/* --------------------------------------------------------------------------
   Socle : variables, remise a plat, typographie, mise en page generale.
   Remplace la partie « reboot » et « grille » de Bootstrap.
   -------------------------------------------------------------------------- */

/* Les deux polices de la charte, servies depuis le serveur et non depuis un
   CDN : une distribution se prepare parfois sans reseau correct, et une
   requete vers un tiers pour afficher un titre n'a pas lieu d'etre.

   Ce sont des sous-ensembles -- latin de base, accents francais, ponctuation
   typographique, euro -- de 8 a 11 ko chacun. Au-dela de cette plage, la pile
   systeme prend le relais glyphe par glyphe : un nom de producteur ecrit dans
   un autre alphabet reste lisible, il n'a simplement pas la meme lettre.

   font-display: swap : le texte s'affiche tout de suite dans la police
   systeme, la bonne arrive ensuite. Rien n'attend un fichier. */
@font-face {
    font-family: "Bebas Neue";
    src: url("/polices/bebas-neue-subset.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "PT Sans Narrow";
    src: url("/polices/pt-sans-narrow-subset.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "PT Sans Narrow";
    src: url("/polices/pt-sans-narrow-bold-subset.woff2") format("woff2");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

:root {
    /* Couleurs de la marque, relevees sur l'affiche de l'association. Les
       rapports de contraste et les emplois permis sont dans design/CHARTE.md :
       en resume, l'ambre et le vert pousse ne portent pas de texte sur blanc. */
    --nuit: #032010;
    --feuille: #447400;
    --pousse: #7ca404;
    --ambre: #f5b301;
    --ambre-profond: #b87a00;
    --orange: #f85700;

    /* Une seule teinte de marque, declinee par color-mix. */
    --marque: var(--feuille);
    --marque-contraste: #ffffff;
    --texte: #16201a;
    --texte-discret: #6b7a6e;
    --fond: #ffffff;
    /* Un papier chaud plutot qu'un gris neutre : c'est le fond de l'affiche,
       et il fait ressortir le blanc des cartes au lieu de s'y confondre. */
    --fond-doux: #faf8f3;
    --bordure: #e2e6dc;
    --echec: #b3261e;
    --succes: var(--feuille);
    /* Une commande a valider n'est pas une erreur, mais elle demande un geste :
       l'ambre le dit sans dramatiser. Plus sombre que --ambre-profond, parce
       que celui-ci porte du texte blanc et qu'il lui faut 4,5:1. */
    --alerte: #a35a00;
    --alerte-contraste: #ffffff;

    /* Espacements : une echelle unique, pas d'utilitaires mb-1..mb-5. */
    --pas: 0.25rem;
    --espace-xs: calc(var(--pas) * 2);
    --espace-s: calc(var(--pas) * 3);
    --espace-m: calc(var(--pas) * 5);
    --espace-l: calc(var(--pas) * 8);

    --rayon: 8px;
    --ombre: 0 1px 3px rgb(0 0 0 / 12%);

    /* Cible tactile minimale recommandee. */
    --cible: 44px;

    /* Couleur de l'anneau de focus : elle s'oppose au fond de page, que le
       bandeau vert nuit inverse de son cote. */
    --focus: var(--nuit);

    --systeme: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --police: "PT Sans Narrow", var(--systeme);
    /* Bebas n'a pas de bas-de-casse : elle ne sert qu'aux titres et aux
       montants, jamais a une donnee saisie. */
    --police-titre: "Bebas Neue", "PT Sans Narrow", var(--systeme);
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

/* L'attribut hidden n'est applique que par une regle display: none de la
   feuille du navigateur : toute regle d'auteur qui fixe display -- et il y en a
   sur .bouton, .fiche-achat, .fiche-contact -- l'emporte et rend visible un
   element cense etre masque. */
[hidden] {
    display: none !important;
}

body {
    margin: 0;
    font-family: var(--police);
    /* 1rem minimum sur le corps et les champs : en dessous de 16px, iOS zoome
       a chaque prise de focus dans un formulaire. */
    font-size: 1rem;
    line-height: 1.5;
    color: var(--texte);
    background: var(--fond-doux);
}

h1, h2, h3 {
    margin: 0 0 var(--espace-xs);
    line-height: 1.25;
}

/* Les titres des ecrans passent en Bebas : capitales, condensees, c'est le
   titrage de l'affiche. Ils ne portent jamais de donnee -- les noms de
   produits, de producteurs et de membres restent en PT Sans Narrow, ou tous
   les caracteres existent. */
h1, h2 {
    font-family: var(--police-titre);
    font-weight: 400;
    letter-spacing: 0.015em;
    line-height: 1.05;
}

h1 { font-size: 1.95rem; }
h2 { font-size: 1.45rem; }
h3 { font-size: 1.05rem; }

/* Une exception : les titres qui affichent un nom venu de la base. Bebas les
   mettrait en capitales, et un nom propre en capitales se lit moins bien. */
h1[data-role="nom"],
h2[data-role="nom"],
h1.nom-donnee,
h2.nom-donnee {
    font-family: var(--police);
    font-weight: 700;
    font-size: 1.35rem;
    letter-spacing: 0;
    line-height: 1.2;
}

p {
    margin: 0 0 var(--espace-xs);
}

a {
    color: var(--marque);
}

img {
    max-width: 100%;
}

/* L'anneau de focus.
   Il etait vert et translucide : sur un bouton orange il tombait a 1,3:1, et
   sur le bandeau vert nuit il disparaissait tout a fait. Le WCAG en demande 3.

   L'ecart de deux pixels laisse voir le fond de page entre le bouton et
   l'anneau : c'est donc au fond, et non au bouton, que l'anneau doit
   s'opposer. Une seule couleur n'y suffit pas -- le bandeau est sombre et la
   page est claire -- alors l'anneau prend un jeton, que le bandeau redefinit
   comme il redefinit les autres. */
:focus-visible {
    outline: 3px solid var(--focus);
    outline-offset: 2px;
}

.discret {
    color: var(--texte-discret);
    font-size: 0.9rem;
}

.chargement,
.vide {
    padding: var(--espace-l);
    text-align: center;
    color: var(--texte-discret);
}

/* --- Entete ------------------------------------------------------------- */

/* Le bandeau de l'affiche, en haut de l'application : c'est ce qui fait
   reconnaitre le site a qui a vu l'affiche. Sur ce fond, les jetons de couleur
   changent de valeur -- l'ambre y donne enfin ses 9,3:1, alors qu'il n'en vaut
   que 1,9 sur blanc. */
.entete {
    position: sticky;
    top: 0;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--espace-s);
    padding: var(--espace-xs) var(--espace-m);
    background: var(--nuit);
    color: #ffffff;

    --alerte: var(--ambre);
    --alerte-contraste: var(--nuit);
    --marque: var(--pousse);
    --marque-contraste: var(--nuit);
    /* Le vert feuille sur ce fond ne porte plus le vert nuit : 3,05:1. Sur le
       bandeau, la reussite se dit donc en vert pousse, qui remonte a 5,9. */
    --succes: var(--pousse);
    --bordure: rgb(255 255 255 / 28%);
    --texte: #ffffff;
    --texte-discret: rgb(255 255 255 / 62%);
    --fond: transparent;
    --fond-doux: rgb(255 255 255 / 12%);
    --focus: #ffffff;
}

.entete .bouton {
    color: #ffffff;
    background: transparent;
}

.entete .bouton:hover:not(:disabled) {
    background: rgb(255 255 255 / 12%);
}

.marque {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
}

/* La hauteur cale le bandeau, la largeur suit : c'est la regle de la charte,
   et c'est ce qui evite d'ecraser le logo quand la place manque. */
.marque-logo {
    height: 34px;
    width: auto;
}

@media (max-width: 30rem) {
    /* Sur un telephone, le mot-symbole prend la place des actions. Le panier
       seul reste la marque -- c'est bien lui qu'on reconnait. */
    .marque-logo {
        height: 28px;
    }
}

.entete-actions {
    display: flex;
    align-items: center;
    gap: var(--espace-xs);
}

.entete-actions > span {
    color: var(--texte-discret);
    font-size: 0.9rem;
}

/* Sur un telephone, le nom du membre fait passer l'entete sur deux lignes.
   C'est l'information la moins utile des quatre. */
@media (max-width: 30rem) {
    .entete-actions > span {
        display: none;
    }
}

.pastille {
    display: inline-block;
    min-width: 1.5em;
    padding: 0 0.35em;
    border-radius: 999px;
    background: var(--marque);
    color: var(--marque-contraste);
    font-size: 0.8rem;
    text-align: center;
}

/* --- Mise en page du catalogue ------------------------------------------ */

.catalogue {
    max-width: 70rem;
    margin: 0 auto;
    padding: var(--espace-m);
}

.catalogue-entete {
    margin-bottom: var(--espace-m);
}

/* Grille fluide : remplace row/col et les variantes d-none d-lg-block, qui
   servaient a dupliquer le markup entre mobile et bureau. */
.grille-produits {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
    gap: var(--espace-s);
    margin: 0;
    padding: 0;
    list-style: none;
}

/* --- Icones -------------------------------------------------------------- */

.icone {
    width: 1.35em;
    height: 1.35em;
    flex: none;
    /* Le trait est ici et non sur chaque <svg> : il y en a une dizaine, et une
       epaisseur qui varie d'un bouton a l'autre se voit tout de suite. Les
       attributs de presentation que portent encore certains traces disent la
       meme chose ; la feuille l'emporte, sans rien changer. */
    fill: none;
    stroke: currentColor;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/*
 * Masque a l'oeil sans retirer de l'arbre d'accessibilite : contrairement a
 * display: none, le lecteur d'ecran continue d'annoncer "Panier 5" quand le
 * mot est masque faute de place.
 */
.visuellement-cachee {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

/* Sur telephone, l'icone et le compteur suffisent. */
@media (max-width: 30rem) {
    .entete-actions .libelle {
        position: absolute;
        width: 1px;
        height: 1px;
        margin: -1px;
        padding: 0;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
    }
}