/* ============================================================
   Ferme Clémentoise — feuille de style principale
   ------------------------------------------------------------
   Organisation du fichier :
     1. Jetons de design (couleurs, typo, espacements)
     2. Réinitialisation et bases
     3. Éléments réutilisables (boutons, badges, champs)
     4. En-tête et navigation
     5. Page d'accueil
     6. Grille et fiche produit
     7. Panier
     8. Pied de page
     9. Utilitaires
   ============================================================ */

/* ============================================================
   0. La police condensée
   ------------------------------------------------------------
   Le design repose sur une police condensée pour les titres et pour le
   lettrage du logo. La pile d'origine ne nommait que des polices d'Apple,
   plus « Roboto Condensed » — absent de beaucoup d'Android. Là où rien de
   condensé n'existait, le navigateur retombait sur une police large : le mot
   « CLÉMENTOISE » débordait par-dessus le sélecteur de langue, et les titres
   se faisaient rogner. Un design qui dépend d'une police que l'appareil peut
   ne pas avoir n'est pas un design, c'est un pari.

   Un seul poids (600) : c'est le seul qu'utilise `--police-titre`, partout.
   15 ko au lieu des 45 ko du fichier variable complet.

   Hébergée ici, pas chez Google. La politique de sécurité du contenu
   n'autorise que `font-src 'self'`, et surtout aucune requête vers un tiers
   ne part du navigateur d'un client — ce qui compte pour la loi 25.

   `swap` : le texte s'affiche tout de suite avec la police de repli, puis
   bascule. L'inverse (`block`) laisserait les titres invisibles le temps du
   chargement, ce qui est pire qu'un bref changement de largeur.

   Pas de `preload` : le fichier ne doit justement PAS être téléchargé sur
   les appareils qui ont déjà une police condensée, et un préchargement le
   ferait partir pour tout le monde.
   ============================================================ */
@font-face {
    font-family: "FC Condensed";
    src: url("../fonts/roboto-condensed-600.woff2") format("woff2");
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

/* ── 1. Jetons de design ─────────────────────────────────── */
:root {
    /* ────────────────────────────────────────────────────────
       Palette tirée du logo Ferme Clémentoise.
       Les valeurs marquées « (logo) » sont les couleurs exactes
       relevées dans le fichier, pas des approximations.

       Le rouge et l'orange du logo sont vifs mais trop clairs
       pour porter du texte blanc : chaque teinte existe donc en
       deux versions — celle du logo pour les grandes surfaces,
       et une version assombrie qui atteint le contraste de
       4.5:1 exigé par la norme WCAG AA pour le petit texte.
       ──────────────────────────────────────────────────────── */

    /* Fonds */
    --creme:        #faf7f2;
    --creme-2:      #f3ede4;
    --creme-3:      #dbd3c8;   /* (logo) crème de la Holstein */

    /* Noirs et bruns */
    --noir:         #141210;   /* (logo) noir du lettrage */
    --gris-800:     #2f2a26;
    --brun-600:     #7e4b35;   /* (logo) robe de la vache brune */
    --brun-400:     #a9856f;

    /* Rouges d'érable */
    --rouge-600:    #b01e24;   /* version accessible : liens, boutons */
    --rouge-500:    #d72028;   /* (logo) rouge vif de la grande feuille */
    --bourgogne:    #7d1d16;   /* (logo) feuille la plus sombre */

    /* Oranges d'automne */
    --orange-600:   #c0491a;   /* version accessible : badges, texte blanc */
    --orange-500:   #f1693e;   /* (logo) orange des petites feuilles */
    --orange-300:   #f79a72;   /* orange éclairci : petit texte sur photo */
    --orange-100:   #fbe7de;

    /* Sémantique */
    --vert:         #4f6b4a;   /* confirmations — hors palette du logo,
                                  mais le vert reste le repère universel
                                  du « c'est réussi » */
    --promo:        #b01e24;

    /* Texte */
    --encre:        #1e1a17;
    --sourdine:     #6e6259;
    --ligne:        #e2d9cc;
    --blanc:        #ffffff;

    /* Typographie — polices système : aucun chargement réseau,
       donc aucun texte invisible au premier affichage.

       Le lettrage du logo est un sans-serif étroit et haut. La pile
       ci-dessous cherche l'équivalent condensé sur chaque système
       (macOS, Windows, Android) avant de retomber sur un sans-serif
       ordinaire. Pour coller exactement au logo, il suffirait de
       charger une police web ici — au prix d'une requête réseau. */
    /* « FC Condensed » est notre fichier, déclaré plus bas. Il vient APRÈS
       les polices d'Apple : sur un iPhone ou un Mac, Avenir Next Condensed
       gagne et le fichier n'est jamais téléchargé. Il ne part que là où
       l'appareil n'a aucune police condensée — ce qui était le cas sur
       Android, et ce qui faisait déborder le lettrage du logo. */
    --police-titre: "Avenir Next Condensed", "Helvetica Neue Condensed",
                    "FC Condensed", "Roboto Condensed", "Arial Narrow",
                    "Segoe UI", system-ui, sans-serif;
    --police-texte: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
                    "Helvetica Neue", Arial, sans-serif;

    /* Échelle typographique fluide : s'adapte à la largeur de l'écran
       sans point de rupture, du téléphone au grand écran. */
    --t-xs:   0.78rem;
    --t-sm:   0.875rem;
    --t-base: 1rem;
    --t-lg:   1.125rem;
    --t-xl:   clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);
    --t-2xl:  clamp(1.5rem, 1.25rem + 1.2vw, 2rem);
    --t-3xl:  clamp(1.875rem, 1.4rem + 2.2vw, 2.75rem);
    --t-4xl:  clamp(2.25rem, 1.5rem + 3.5vw, 3.75rem);

    /* Espacements */
    --e-1: 0.25rem;
    --e-2: 0.5rem;
    --e-3: 0.75rem;
    --e-4: 1rem;
    --e-5: 1.5rem;
    --e-6: 2rem;
    --e-7: 3rem;
    --e-8: 4rem;
    --e-9: 6rem;

    --rayon:    4px;
    --rayon-lg: 8px;

    --ombre-1: 0 1px 2px rgba(20, 18, 16, 0.06);
    --ombre-2: 0 4px 14px rgba(20, 18, 16, 0.09);
    --ombre-3: 0 12px 32px rgba(20, 18, 16, 0.14);

    --largeur-max: 1240px;
    --transition: 180ms ease;
}

/* ── 2. Réinitialisation et bases ────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
}

body {
    margin: 0;
    background: var(--creme);
    color: var(--encre);
    font-family: var(--police-texte);
    font-size: var(--t-base);
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
}

/* Interlignage : 1.25, et pas moins.
   À 1.18, la boîte d'un titre de 37 px mesurait 88 px alors que l'encre en
   demandait 91 — un « É » capital accentué au-dessus d'un jambage ne tient
   pas dans un interlignage aussi serré. Sur un appareil Apple ça ne se voyait
   pas : la police condensée de la pile est plus compacte et rien ne rognait.
   Sur Android, où la pile retombe sur Roboto, le bas de la dernière ligne
   était visiblement coupé. Le titre doit tenir avec TOUTES les polices de la
   pile, pas seulement avec la première. */
h1, h2, h3, h4 {
    font-family: var(--police-titre);
    font-weight: 600;
    line-height: 1.25;
    letter-spacing: -0.01em;
    color: var(--noir);
    margin: 0 0 var(--e-4);
}

h1 { font-size: var(--t-4xl); }
h2 { font-size: var(--t-3xl); }
h3 { font-size: var(--t-xl); }
h4 { font-size: var(--t-lg); }

p { margin: 0 0 var(--e-4); }

a {
    color: var(--rouge-600);
    text-decoration: none;
    transition: color var(--transition);
}
a:hover { color: var(--gris-800); text-decoration: underline; }

img { max-width: 100%; height: auto; display: block; }

ul, ol { margin: 0 0 var(--e-4); padding-left: 1.25rem; }

/* Le contour de focus reste visible : c'est le seul repère des
   personnes qui naviguent au clavier. Ne jamais le retirer. */
:focus-visible {
    outline: 2px solid var(--rouge-600);
    outline-offset: 2px;
    border-radius: 2px;
}

/* Respecte le réglage système « réduire les animations ». */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
}

/* ── Structure ───────────────────────────────────────────── */
.contenu {
    width: 100%;
    max-width: var(--largeur-max);
    margin-inline: auto;
    padding-inline: var(--e-4);
}

@media (min-width: 768px) {
    .contenu { padding-inline: var(--e-5); }
}

.section        { padding-block: var(--e-7); }
.section--large { padding-block: var(--e-8); }
.section--creme { background: var(--creme-2); }
.section--noir { background: var(--noir); color: var(--creme); }
.section--noir h2, .section--noir h3 { color: var(--creme); }

.section-entete {
    display: flex;
    flex-wrap: wrap;
    align-items: end;
    justify-content: space-between;
    gap: var(--e-4);
    margin-bottom: var(--e-6);
}
.section-entete h2 { margin-bottom: var(--e-1); }
.section-entete p  { margin: 0; color: var(--sourdine); }

/* Petit titre en capitales au-dessus des grands titres. */
.surtitre {
    display: block;
    font-family: var(--police-texte);
    font-size: var(--t-xs);
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--rouge-600);
    margin-bottom: var(--e-2);
}

/* ── 3. Boutons ──────────────────────────────────────────── */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--e-2);
    padding: 0.75rem 1.5rem;
    border: 1px solid transparent;
    border-radius: var(--rayon);
    font-family: var(--police-texte);
    font-size: var(--t-sm);
    font-weight: 600;
    letter-spacing: 0.02em;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: background var(--transition), color var(--transition),
                border-color var(--transition), transform var(--transition);
}
.btn:hover { text-decoration: none; transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

.btn--principal {
    background: var(--gris-800);
    border-color: var(--gris-800);
    color: var(--creme);
}
.btn--principal:hover { background: var(--noir); border-color: var(--noir); color: var(--creme); }

.btn--rouge {
    background: var(--rouge-600);
    border-color: var(--rouge-600);
    color: var(--blanc);
}
.btn--rouge:hover { background: var(--rouge-500); border-color: var(--rouge-500); color: var(--blanc); }

.btn--contour {
    background: transparent;
    border-color: var(--gris-800);
    color: var(--gris-800);
}
.btn--contour:hover { background: var(--gris-800); color: var(--creme); }

.btn--clair {
    background: transparent;
    border-color: rgba(250, 247, 242, 0.5);
    color: var(--creme);
}
.btn--clair:hover { background: var(--creme); border-color: var(--creme); color: var(--noir); }

.btn--bloc { width: 100%; }
.btn--grand { padding: 0.95rem 2rem; font-size: var(--t-base); }

.btn[disabled], .btn--desactive {
    background: var(--creme-3);
    border-color: var(--creme-3);
    color: var(--sourdine);
    cursor: not-allowed;
    transform: none;
}

/* Lien discret avec flèche. */
.lien-fleche {
    display: inline-flex;
    align-items: center;
    gap: var(--e-2);
    font-size: var(--t-sm);
    font-weight: 600;
    color: var(--gris-800);
}
.lien-fleche::after { content: "→"; transition: transform var(--transition); }
.lien-fleche:hover { text-decoration: none; }
.lien-fleche:hover::after { transform: translateX(3px); }

/* Bouton qui a l'allure d'un lien.
   Une action qui modifie des données (supprimer une adresse, la définir par
   défaut) doit être un vrai <button> dans un formulaire POST : un <a> serait
   déclenchable par un simple lien dans un courriel. Seule l'apparence est
   empruntée au lien. */
.lien-bouton {
    background: none;
    border: 0;
    padding: 0;
    font: inherit;
    font-size: var(--t-sm);
    font-weight: 600;
    color: var(--gris-800);
    text-decoration: underline;
    text-underline-offset: 2px;
    cursor: pointer;
}
.lien-bouton:hover { color: var(--rouge-600); }
.lien-bouton--danger { color: var(--bourgogne); }

/* ── Badges ──────────────────────────────────────────────── */
.badge {
    display: inline-block;
    padding: 0.25rem 0.55rem;
    border-radius: var(--rayon);
    font-size: var(--t-xs);
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    line-height: 1.3;
}
.badge--promo   { background: var(--orange-600); color: var(--blanc); }
.badge--epuise  { background: var(--gris-800); color: var(--creme); }
.badge--nouveau { background: var(--bourgogne); color: var(--blanc); }
.badge--stock   { background: var(--orange-100); color: var(--bourgogne); }

/* ── Champs de formulaire ────────────────────────────────── */
label {
    display: block;
    font-size: var(--t-sm);
    font-weight: 600;
    color: var(--gris-800);
    margin-bottom: var(--e-2);
}

input[type="text"], input[type="email"], input[type="password"],
input[type="tel"], input[type="number"], input[type="search"],
select, textarea {
    width: 100%;
    padding: 0.7rem 0.85rem;
    background: var(--blanc);
    border: 1px solid var(--ligne);
    border-radius: var(--rayon);
    font-family: inherit;
    font-size: var(--t-base);
    color: var(--encre);
    transition: border-color var(--transition), box-shadow var(--transition);
}
input:focus, select:focus, textarea:focus {
    border-color: var(--rouge-500);
    box-shadow: 0 0 0 3px rgba(176, 30, 36, 0.14);
    outline: none;
}
textarea { min-height: 9rem; resize: vertical; }

.champ { margin-bottom: var(--e-4); }
.champ-aide { font-size: var(--t-xs); color: var(--sourdine); margin-top: var(--e-1); }
.champ-erreur { font-size: var(--t-sm); color: var(--promo); margin-top: var(--e-1); }

/* ── Messages ────────────────────────────────────────────── */
.message {
    padding: var(--e-3) var(--e-4);
    border-left: 3px solid;
    border-radius: var(--rayon);
    font-size: var(--t-sm);
    margin-bottom: var(--e-4);
}
.message--succes { background: #edf4ec; border-color: var(--vert); color: #2f4a2b; }
.message--erreur { background: #fbecea; border-color: var(--promo);   color: #7d2415; }
.message--info   { background: var(--orange-100); border-color: var(--rouge-500); color: #7a4415; }

/* ── 4. En-tête et navigation ────────────────────────────── */
.bandeau-annonce {
    background: var(--noir);
    color: var(--creme);
    font-size: var(--t-xs);
    letter-spacing: 0.06em;
    text-align: center;
    padding: var(--e-2) var(--e-4);
}

.entete {
    position: sticky;
    top: 0;
    z-index: 50;
    background: var(--creme);
    border-bottom: 1px solid var(--ligne);
}

.entete__grille {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--e-4);
    min-height: 4.5rem;
}

/* Verrou de marque : l'illustration du logo à gauche, le lettrage
   reconstitué en texte à droite. Le texte reste du texte — il se
   sélectionne, se traduit, se lit à la loupe et ne pixellise jamais.
   Seule l'illustration est une image. */
/* Le verrou de marque doit tenir à côté de quatre boutons sur un
   écran de 375 px. Il démarre donc petit et grandit avec l'écran,
   plutôt que l'inverse — sinon le lettrage passe sous le sélecteur
   de langue. */
.logo {
    display: inline-flex;
    align-items: center;
    gap: var(--e-2);
    min-width: 0;          /* autorise le rétrécissement dans le flex parent */
    text-decoration: none;
}
.logo:hover { text-decoration: none; }

.logo__marque {
    height: 32px;
    width: auto;
    flex: 0 0 auto;
}

/* `overflow: hidden` est un filet, pas une décision de mise en page.
   Le lettrage est en `nowrap` : quand le flex parent le comprime sous sa
   largeur naturelle, le texte ne se replie pas, il DÉBORDE — et il débordait
   par-dessus le sélecteur de langue. Avec ce filet, le pire cas devient
   « CLÉMENTOIS… » au lieu de deux textes superposés. Il ne devrait jamais se
   déclencher : la place a été libérée plus bas. Mais la largeur d'un mot
   dépend de la police que l'appareil a réellement trouvée, et ça ne se
   devine pas d'ici. */
.logo__texte {
    display: flex;
    flex-direction: column;
    min-width: 0;
    line-height: 1;
    overflow: hidden;
}
.logo__nom { text-overflow: ellipsis; }

/* « FERME » : petit, très espacé, comme sur le logo. */
.logo__ferme {
    font-family: var(--police-texte);
    font-size: 0.5rem;
    font-weight: 700;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--brun-600);
    margin-bottom: 0.2em;
}

/* « CLÉMENTOISE » : le mot principal, en capitales condensées. */
.logo__nom {
    font-family: var(--police-titre);
    font-size: 1.05rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    text-transform: uppercase;
    white-space: nowrap;
    color: var(--noir);
}

@media (min-width: 420px) {
    .logo       { gap: var(--e-3); }
    .logo__marque { height: 38px; }
    .logo__nom    { font-size: 1.25rem; }
    .logo__ferme  { font-size: 0.58rem; }
}

@media (min-width: 700px) {
    .logo__marque { height: 50px; }
    .logo__nom    { font-size: 1.65rem; }
    .logo__ferme  { font-size: 0.66rem; }
}

/* Sous-titre réutilisé dans l'en-tête du tiroir mobile. */
.logo__sous {
    font-size: var(--t-xs);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--rouge-600);
}

/* Navigation principale — masquée sous 900px, remplacée par le tiroir. */
.nav-principale { display: none; }

@media (min-width: 900px) {
    .nav-principale {
        display: flex;
        align-items: center;
        gap: var(--e-5);
    }
}

.nav-principale a {
    position: relative;
    font-size: var(--t-sm);
    font-weight: 600;
    color: var(--gris-800);
    padding-block: var(--e-2);
}
.nav-principale a:hover { color: var(--rouge-600); text-decoration: none; }

/* Soulignement de l'onglet actif. */
.nav-principale a[aria-current="page"] { color: var(--rouge-600); }
.nav-principale a[aria-current="page"]::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 2px;
    background: var(--rouge-500);
}

.entete__actions {
    display: flex;
    align-items: center;
    gap: var(--e-2);
    flex: 0 0 auto;        /* les boutons gardent leur taille : c'est le
                              verrou de marque qui cède, jamais eux */
}

/* Sous 420 px, l'arithmétique ne tombait pas juste : 343 px utiles, dont
   221 pour la rangée de boutons — qui ne cède jamais — laissaient 106 px au
   verrou de marque, lequel en réclamait 148. Les 42 px manquants passaient
   par-dessus le « EN ».
   L'icône de compte s'efface donc ici, et elle seule : c'est la moins
   fréquente des cinq, et le tiroir contient DÉJÀ son lien (« Mon compte » /
   « Se connecter »). Rien n'est perdu, 44 px sont rendus, et le sélecteur de
   langue reste visible — sur une boutique bilingue, un visiteur anglophone
   ne doit pas avoir à ouvrir un menu pour trouver sa langue. */
@media (max-width: 419px) {
    .entete__actions { gap: 0; }
    .lien-langue { padding: var(--e-2); }

    /* Sélecteur descendant, et ce n'est pas cosmétique : `.icone-btn` pose
       `display: inline-flex` PLUS BAS dans ce fichier. À spécificité égale,
       c'est la dernière règle qui gagne — écrite en `.compte-lien` seul, celle
       d'ici n'avait aucun effet. */
    .entete__actions .compte-lien { display: none; }

    /* Le verrou de marque se resserre un peu ici.
       Avec Avenir Next Condensed il tenait déjà; avec Roboto Condensed —
       notre fichier, donc ce que voient les appareils sans police d'Apple —
       il réclamait 157 px pour 150 disponibles. Ces trois retouches en
       rendent 16, ce qui laisse une vraie marge plutôt qu'un ajustement au
       pixel qui se casserait à la première police un peu plus large.
       Le design prévoit déjà l'inverse au-dessus de 420 px : il grandit. */
    .logo         { gap: 4px; }
    .logo__marque { height: 30px; }
    .logo__nom    { font-size: 0.95rem; letter-spacing: 0; }
}

.icone-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--e-2);
    min-width: 2.75rem;
    min-height: 2.75rem;   /* cible tactile confortable */
    padding: 0 var(--e-2);
    background: none;
    border: none;
    border-radius: var(--rayon);
    color: var(--gris-800);
    font: inherit;
    font-size: var(--t-sm);
    cursor: pointer;
    transition: background var(--transition), color var(--transition);
}
.icone-btn:hover { background: var(--creme-2); color: var(--rouge-600); text-decoration: none; }
.icone-btn svg { width: 20px; height: 20px; }

.lien-langue {
    font-size: var(--t-xs);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--brun-600);
    padding: var(--e-2) var(--e-3);
    border: 1px solid var(--ligne);
    border-radius: var(--rayon);
}
.lien-langue:hover { background: var(--creme-2); color: var(--rouge-600); text-decoration: none; }

/* Compteur d'articles du panier. */
.panier-lien { position: relative; }
.panier-compte {
    position: absolute;
    top: 0.25rem;
    right: 0;
    min-width: 1.15rem;
    height: 1.15rem;
    padding-inline: 0.2rem;
    background: var(--rouge-600);
    color: var(--blanc);
    border-radius: 999px;
    font-size: 0.68rem;
    font-weight: 700;
    line-height: 1.15rem;
    text-align: center;
}

.menu-bascule { display: inline-flex; }
@media (min-width: 900px) { .menu-bascule { display: none; } }

/* Tiroir de navigation mobile. */
.tiroir {
    position: fixed;
    inset: 0 0 0 auto;
    width: min(20rem, 85vw);
    z-index: 100;
    background: var(--creme);
    border-left: 1px solid var(--ligne);
    box-shadow: var(--ombre-3);
    padding: var(--e-5) var(--e-4);
    transform: translateX(100%);
    transition: transform 240ms ease;
    overflow-y: auto;
}
.tiroir[data-ouvert="true"] { transform: translateX(0); }

.tiroir__voile {
    position: fixed;
    inset: 0;
    z-index: 90;
    background: rgba(20, 18, 16, 0.5);
    opacity: 0;
    pointer-events: none;
    transition: opacity 240ms ease;
}
.tiroir__voile[data-ouvert="true"] { opacity: 1; pointer-events: auto; }

.tiroir__entete {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--e-5);
}

.tiroir__nav { display: flex; flex-direction: column; }
.tiroir__nav a {
    padding: var(--e-3) 0;
    border-bottom: 1px solid var(--ligne);
    font-size: var(--t-lg);
    font-weight: 600;
    color: var(--gris-800);
}
.tiroir__nav a:hover { color: var(--rouge-600); text-decoration: none; }

/* ── 5. Page d'accueil ───────────────────────────────────── */
.hero {
    position: relative;
    display: grid;
    align-items: center;
    min-height: min(78vh, 620px);
    background: linear-gradient(135deg, var(--noir) 0%, var(--gris-800) 45%, var(--brun-600) 100%);
    color: var(--creme);
    overflow: hidden;
}

/* Voile dégradé sur la photo de fond, pour garder le texte lisible
   quelle que soit la photo choisie par l'administratrice. */
.hero__image {
    position: absolute;
    /* Débordement volontaire en haut et en bas : la couche se déplace en
       parallaxe, et sans cette marge elle découvrirait un bord vide. */
    inset: -12% 0;
    object-fit: cover;
    width: 100%;
    height: 124%;
    opacity: 0.45;
    /* Prévient le navigateur qu'il aura à animer cette couche. */
    will-change: transform;
}

/* Les couches en parallaxe ne doivent jamais intercepter un clic. */
[data-parallaxe] { pointer-events: none; }
.hero__contenu [data-parallaxe],
.hero__contenu { pointer-events: auto; }
.hero__voile {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(20, 18, 16, 0.86) 0%, rgba(20, 18, 16, 0.5) 60%, rgba(20, 18, 16, 0.25) 100%);
}

/* Ce dégradé est LATÉRAL parce que le texte occupe la moitié gauche — ce qui
   n'est vrai qu'à partir de 900px, là où .hero__grille passe en deux colonnes.
   En dessous, le texte traverse toute la largeur et ses dernières lignes
   sortaient dans la partie claire de la photo. Le dégradé devient donc
   vertical, dans le même esprit : sombre là où l'on lit, plus clair aux
   extrémités pour que l'image respire. */
@media (max-width: 899px) {
    .hero__voile {
        background: linear-gradient(180deg,
            rgba(20, 18, 16, 0.62) 0%,
            rgba(20, 18, 16, 0.74) 45%,
            rgba(20, 18, 16, 0.74) 80%,
            rgba(20, 18, 16, 0.58) 100%);
    }
}

.hero__grille {
    position: relative;
    z-index: 1;
    display: grid;
    gap: var(--e-6);
    align-items: center;
    padding-block: var(--e-8);
}

@media (min-width: 900px) {
    .hero__grille { grid-template-columns: 1.15fr 0.85fr; }
}

.hero__logo { display: none; }

@media (min-width: 900px) {
    .hero__logo {
        display: block;
        width: min(320px, 100%);
        height: auto;
        margin-inline: auto;
        will-change: transform;
    }
}

.hero__contenu {
    max-width: 34rem;
}
.hero__contenu h1 { color: var(--creme); margin-bottom: var(--e-4); }
/* Éclairci, et non l'orange du logo : mesuré sur la photo réelle, le
   #f1693e tombait à 2,7:1 sous le petit texte du surtitre (seuil 4,5:1).
   Le #f79a72 donne 5,4:1 sans avoir à noircir davantage l'image. */
.hero__contenu .surtitre { color: var(--orange-300); }
.hero__texte {
    font-size: var(--t-lg);
    color: rgba(250, 247, 242, 0.88);
    margin-bottom: var(--e-5);
}
.hero__boutons { display: flex; flex-wrap: wrap; gap: var(--e-3); }

/* Ingrédients et conservation, sur la fiche produit. Même traitement que
   .fiche__description : un bloc de texte détaché du bloc d'achat. */
.fiche__ingredients,
.fiche__conservation {
    margin-top: var(--e-5);
    padding-top: var(--e-5);
    border-top: 1px solid var(--creme-3);
}
.fiche__ingredients p,
.fiche__conservation p { margin: 0; }
.fiche__guide {
    margin-top: var(--e-4);
    font-size: var(--t-sm);
}

.fiche__conservation-lien {
    margin-top: var(--e-3) !important;
    font-size: var(--t-sm);
}

.coordonnees__note {
    font-size: var(--t-sm);
    color: var(--sourdine);
    margin-top: var(--e-2);
}

/* Le sceau Ecocert. Taille modeste et volontairement fixe : un logo de
   certification qui s'étire ou rétrécit selon la place perd sa lisibilité, et
   les chartes graphiques imposent presque toujours une taille minimale. */
.ecocert {
    display: flex;
    align-items: center;
    gap: var(--e-4);
    flex-wrap: wrap;
    margin: var(--e-5) 0;
}
.ecocert__logo {
    width: 150px;
    height: auto;
    flex: 0 0 auto;
}
.ecocert__legende {
    margin: 0 !important;
    font-size: var(--t-sm);
    color: var(--sourdine);
    max-width: 24rem;
}

/* Dans la section explicative, le sceau se pose à côté du paragraphe qui
   nomme l'organisme — pas ailleurs sur la page. */
.bio__sceau { margin-bottom: var(--e-4); }
@media (min-width: 700px) {
    .bio__sceau {
        display: grid;
        grid-template-columns: 1fr auto;
        gap: var(--e-5);
        align-items: center;
    }
    .bio__sceau .ecocert { margin: 0; }
}

/* La section sur la certification biologique. Un filet à gauche plutôt qu'un
   encadré plein : c'est une explication, elle doit rester dans le fil du texte
   et non ressembler à une publicité insérée. */
.bio {
    margin: var(--e-7) 0;
    scroll-margin-top: var(--e-8);
}
.bio__titre {
    font-size: var(--t-xl);
    padding-bottom: var(--e-3);
    border-bottom: 1px solid var(--creme-3);
    margin-bottom: var(--e-4);
}
.bio__amorce { margin-bottom: var(--e-2) !important; font-weight: 600; }
.bio__liste {
    margin: 0 0 var(--e-4);
    padding-left: var(--e-5);
}
.bio__liste li { margin-bottom: var(--e-2); }

/* La nuance : mise en évidence, pas enfouie. Dire soi-même ce que son
   étiquette ne couvre pas est à l'avantage de la ferme. */
.bio__nuance {
    background: var(--creme-2);
    border-left: 3px solid var(--brun-600);
    border-radius: 0 var(--rayon-lg) var(--rayon-lg) 0;
    padding: var(--e-5);
    margin-top: var(--e-5);
}
.bio__nuance-titre {
    font-size: var(--t-base);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--sourdine);
    margin-bottom: var(--e-2);
}
.bio__nuance p { margin: 0 !important; }

/* Photo de la page « La ferme ». `height:auto` avec les attributs width et
   height du HTML : le navigateur réserve la bonne place avant le chargement,
   et la page ne saute pas quand l'image arrive. */
.ferme-photo {
    margin: var(--e-5) 0;
}
.ferme-photo img {
    width: 100%;
    height: auto;
    border-radius: var(--rayon-lg);
    display: block;
}
.ferme-photo figcaption {
    margin-top: var(--e-2);
    font-size: var(--t-sm);
    color: var(--sourdine);
}

/* ── Les piments ─────────────────────────────────────────── */
.piments { max-width: 58rem; }

.piments__intro {
    font-size: var(--t-lg);
    color: var(--brun-600);
    margin-bottom: var(--e-4);
}
/* Encadré de la ferme : c'est une confidence, pas un avertissement légal.
   D'où le fond crème et le filet orange plutôt qu'un cadre d'alerte. */
.piments__origine {
    background: var(--creme-2);
    border-left: 3px solid var(--orange-500);
    border-radius: 0 var(--rayon-lg) var(--rayon-lg) 0;
    padding: var(--e-5);
    margin-bottom: var(--e-5);
}
.piments__origine-titre {
    font-size: var(--t-base);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--sourdine);
    margin-bottom: var(--e-2);
}
.piments__origine p { margin: 0; }

.piments__note {
    color: var(--sourdine);
    font-size: var(--t-sm);
    margin-bottom: var(--e-7);
}
.piments__section-titre {
    font-size: var(--t-xl);
    padding-bottom: var(--e-3);
    border-bottom: 1px solid var(--creme-3);
    margin: var(--e-7) 0 var(--e-5);
}

/* Le tableau déborde sur un téléphone : il défile DANS son cadre, pour que
   la page elle-même ne parte jamais de travers. */
.piments__cadre { overflow-x: auto; }

.piments__table {
    width: 100%;
    border-collapse: collapse;
    min-width: 34rem;
}
.piments__table th,
.piments__table td {
    text-align: left;
    padding: var(--e-3) var(--e-3);
    border-bottom: 1px solid var(--creme-2);
    vertical-align: middle;
}
.piments__table thead th {
    font-size: var(--t-sm);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--sourdine);
    border-bottom: 2px solid var(--creme-3);
}
/* La ligne visée par une ancre s'éclaire, sinon on ne sait pas où l'on a
   atterri au milieu de vingt-trois lignes qui se ressemblent. */
.piments__table tr { scroll-margin-top: var(--e-8); }
.piments__table tr:target { background: var(--orange-100); }

.piments__nom { font-weight: 600; white-space: nowrap; }
.piments__shu { white-space: nowrap; color: var(--gris-800); }
.piments__palier { font-weight: 600; margin-right: var(--e-2); }
.piments__cmp {
    color: var(--sourdine);
    font-size: var(--t-sm);
    display: block;
}

/* La jauge de chaleur. L'échelle est logarithmique — voir Pepper::echelle() —
   sans quoi les quinze premières variétés se tasseraient sur un centième. */
.jauge {
    display: block;
    width: 100%;
    max-width: 9rem;
    height: 6px;
    border-radius: 3px;
    background: var(--creme-2);
    overflow: hidden;
    margin-bottom: var(--e-2);
}
.jauge__plein { display: block; height: 100%; border-radius: 3px; }
/* Six paliers, du vert au presque noir. Le dernier — « super-hot », au-delà
   du million d'unités — sort volontairement de la gamme des rouges : c'est une
   catégorie à part dans le milieu, pas juste un cran de plus. */
.jauge--doux      .jauge__plein { background: #4a8f3c; }
.jauge--moyen     .jauge__plein { background: #c8a326; }
.jauge--fort      .jauge__plein { background: #e07b1f; }
.jauge--tres_fort .jauge__plein { background: #d2451e; }
.jauge--extreme   .jauge__plein { background: #a01810; }
.jauge--super_hot .jauge__plein { background: #3f0d1c; }

/* Sur un écran étroit, le tableau devient une pile de cartes.
   Il défilait latéralement dans son cadre, ce qui poussait la colonne
   « Force » hors de l'écran — or la comparaison au jalapeño est toute la
   raison d'être de la page, et le mobile est l'essentiel du trafic. */
@media (max-width: 639px) {
    .piments__table { min-width: 0; }

    /* L'en-tête sort de l'écran sans disparaître : les lecteurs d'écran
       continuent d'annoncer les colonnes. `display:none` les aurait tues. */
    .piments__table thead {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
    }

    .piments__table tr {
        display: block;
        padding: var(--e-4) 0;
        border-bottom: 1px solid var(--creme-2);
    }
    .piments__table th,
    .piments__table td {
        display: block;
        padding: 0;
        border: 0;
    }
    .piments__nom {
        font-size: var(--t-lg);
        white-space: normal;
        margin-bottom: var(--e-1);
    }
    .piments__shu { margin-bottom: var(--e-3); }
    .jauge { max-width: 100%; }
}

.piments-seches { margin-top: var(--e-7); scroll-margin-top: var(--e-8); }
.piments-seches__intro { font-size: var(--t-lg); color: var(--brun-600); }
.piments-seches p { margin-bottom: var(--e-4); }

/* Une grille plutôt qu'une liste en colonne : six usages courts tiennent sur
   deux colonnes en grand écran et se parcourent d'un coup d'œil. */
.piments-seches__usages {
    list-style: none;
    margin: 0 0 var(--e-5);
    padding: 0;
    display: grid;
    gap: var(--e-3);
}
@media (min-width: 700px) {
    .piments-seches__usages { grid-template-columns: 1fr 1fr; }
}
.piments-seches__usages li {
    display: flex;
    align-items: baseline;
    gap: var(--e-3);
}
.piments-seches__puce { flex: 0 0 auto; font-size: 1.1em; }

.piment {
    padding-top: var(--e-5);
    margin-top: var(--e-5);
    border-top: 1px solid var(--creme-2);
    scroll-margin-top: var(--e-8);
}
/* La fiche passe en deux colonnes quand elle a une photo : le texte à gauche,
   le piment à droite. Sur téléphone, la photo se met simplement au-dessus. */
@media (min-width: 700px) {
    .piment--avec-photo {
        display: grid;
        grid-template-columns: 1fr 200px;
        grid-template-areas: 'texte photo';
        gap: var(--e-5);
        align-items: start;
    }
    .piment--avec-photo > *  { grid-area: texte; }
    .piment--avec-photo > .piment__photo { grid-area: photo; }
}
.piment__photo {
    width: 100%;
    max-width: 200px;
    height: auto;
    border-radius: var(--rayon-lg);
    display: block;
    margin-bottom: var(--e-3);
}

.piment__nom { font-size: var(--t-lg); margin-bottom: var(--e-1); }
.piment__espece {
    font-size: var(--t-sm);
    font-weight: 400;
    color: var(--sourdine);
    margin-left: var(--e-2);
}
.piment__chaleur { color: var(--gris-800); margin-bottom: var(--e-3); }

.piment__faits { margin: 0 0 var(--e-3); }
.piment__faits dt {
    font-size: var(--t-sm);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--sourdine);
    margin-top: var(--e-3);
}
.piment__faits dd { margin: 0; }
.piment__produits { margin: 0; }
.piment__version {
    font-size: var(--t-sm);
    color: var(--sourdine);
}

/* ── Foire aux questions ─────────────────────────────────── */
/*
   Une colonne étroite, volontairement : une réponse de trois lignes se lit
   mal sur toute la largeur d'un écran. La mesure typographique prime ici sur
   l'occupation de l'espace.
*/
.faq { max-width: 46rem; }

.faq__intro {
    font-size: var(--t-lg);
    color: var(--brun-600);
    margin-bottom: var(--e-6);
}

.faq__sommaire {
    background: var(--creme-2);
    border-radius: var(--rayon-lg);
    padding: var(--e-5);
    margin-bottom: var(--e-7);
}
.faq__sommaire-titre {
    font-size: var(--t-base);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--sourdine);
    margin-bottom: var(--e-3);
}
.faq__sommaire ul {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: var(--e-2) var(--e-5);
    margin: 0;
    padding: 0;
}

.faq__groupe { margin-bottom: var(--e-7); }
.faq__groupe-titre {
    font-size: var(--t-xl);
    padding-bottom: var(--e-3);
    border-bottom: 1px solid var(--creme-3);
    margin-bottom: var(--e-5);
}

.faq__item { margin-bottom: var(--e-5); }

/* Chaque question est une ancre. Sans ce décalage, cliquer un lien du
   sommaire glisse la question sous l'en-tête fixe, et on atterrit sur la
   réponse sans voir de quoi elle répond. */
.faq__item,
.faq__groupe { scroll-margin-top: var(--e-8); }

.faq__question {
    font-size: var(--t-lg);
    margin-bottom: var(--e-2);
}
.faq__reponse {
    margin: 0;
    color: var(--gris-800);
}

.faq__reste {
    background: var(--creme-2);
    border-radius: var(--rayon-lg);
    padding: var(--e-6);
    text-align: center;
}
.faq__reste p { margin-bottom: var(--e-4); }

/* Bandeau d'arguments de vente. */
.arguments {
    display: grid;
    gap: var(--e-5);
    grid-template-columns: 1fr;
}
@media (min-width: 700px) {
    .arguments { grid-template-columns: repeat(3, 1fr); }
}
.argument { text-align: center; }
.argument__icone {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    margin-bottom: var(--e-3);
    background: var(--orange-100);
    border-radius: 50%;
    color: var(--rouge-600);
}
.argument__icone svg { width: 24px; height: 24px; }
.argument h3 { font-size: var(--t-lg); margin-bottom: var(--e-2); }
.argument p { color: var(--sourdine); font-size: var(--t-sm); margin: 0; }

/* Vignettes de catégories. */
.grille-categories {
    display: grid;
    gap: var(--e-4);
    grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 700px) {
    .grille-categories { grid-template-columns: repeat(4, 1fr); }
}

.vignette-categorie {
    position: relative;
    display: flex;
    align-items: flex-end;
    /* Carré : les photos de produits le sont, donc aucune n'est rognée.
       Onze tuiles en 3/4 occupaient près de 1200 px de hauteur. */
    aspect-ratio: 1 / 1;
    padding: var(--e-4);
    border-radius: var(--rayon-lg);
    background: var(--brun-600);
    overflow: hidden;
    color: var(--creme);
    text-decoration: none;
}
.vignette-categorie img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 400ms ease;
}
.vignette-categorie::after {
    content: "";
    position: absolute;
    inset: 0;
    /* Une photo de produit sur fond blanc rendrait le nom illisible sans un
       voile franc dans le bas de la tuile. */
    background: linear-gradient(to top,
        rgba(20, 18, 16, 0.92) 0%,
        rgba(20, 18, 16, 0.55) 38%,
        rgba(20, 18, 16, 0.08) 72%);
}
.vignette-categorie:hover img { transform: scale(1.04); }
.vignette-categorie:hover { text-decoration: none; }
.vignette-categorie__texte { position: relative; z-index: 1; }
.vignette-categorie__nom {
    display: block;
    font-family: var(--police-titre);
    font-size: var(--t-lg);
    font-weight: 600;
}
.vignette-categorie__compte {
    font-size: var(--t-xs);
    color: rgba(250, 247, 242, 0.75);
}

/* ── 6. Grille et fiche produit ──────────────────────────── */
.grille-produits {
    display: grid;
    gap: var(--e-5) var(--e-4);
    /* Deux colonnes dès le téléphone : c'est ce qui donne à la boutique
       son allure de catalogue, et la majorité du trafic est mobile. */
    grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 700px)  { .grille-produits { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1024px) { .grille-produits { grid-template-columns: repeat(4, 1fr); } }

.carte-produit {
    position: relative;
    display: flex;
    flex-direction: column;
    background: var(--blanc);
    border: 1px solid var(--ligne);
    border-radius: var(--rayon-lg);
    overflow: hidden;
    transition: border-color var(--transition), box-shadow var(--transition), transform var(--transition);
}
.carte-produit:hover {
    border-color: var(--orange-500);
    box-shadow: var(--ombre-2);
    transform: translateY(-2px);
}

.carte-produit__media {
    position: relative;
    aspect-ratio: 1 / 1;
    background: var(--creme-2);
    overflow: hidden;
}
.carte-produit__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 400ms ease;
}
.carte-produit:hover .carte-produit__media img { transform: scale(1.05); }

.carte-produit__badges {
    position: absolute;
    top: var(--e-3);
    left: var(--e-3);
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--e-1);
}

.carte-produit__corps {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: var(--e-4);
}

.carte-produit__categorie {
    font-size: var(--t-xs);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--rouge-600);
    margin-bottom: var(--e-1);
}

.carte-produit__titre {
    font-family: var(--police-titre);
    font-size: var(--t-base);
    font-weight: 600;
    line-height: 1.3;
    margin: 0 0 var(--e-1);
}
.carte-produit__titre a { color: var(--noir); }
.carte-produit__titre a:hover { color: var(--rouge-600); text-decoration: none; }

.carte-produit__format {
    font-size: var(--t-xs);
    color: var(--sourdine);
    margin-bottom: var(--e-3);
}

/* Le prix est poussé en bas de la carte pour que toutes les cartes
   d'une même rangée alignent leur prix, même si les titres n'ont
   pas le même nombre de lignes. */
.carte-produit__pied { margin-top: auto; }

.prix {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: var(--e-2);
}
.prix__courant {
    font-family: var(--police-titre);
    font-size: var(--t-lg);
    font-weight: 600;
    color: var(--noir);
}
.prix__courant--promo { color: var(--promo); }
.prix__barre {
    font-size: var(--t-sm);
    color: var(--sourdine);
    text-decoration: line-through;
}

/* « à partir de », devant le prix d'un produit à formats multiples. */
.prix__depuis {
    font-size: var(--t-xs);
    color: var(--sourdine);
    margin-right: calc(var(--e-1) * -1);
}

/* Visuel d'attente : pictogramme et mention traduisible, superposés.
   Le texte reste du texte — il se traduit, se lit à la loupe et respecte
   le réglage de taille de police du visiteur. */
.visuel-attente {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
}
.visuel-attente img { width: 100%; height: 100%; object-fit: cover; }
.visuel-attente__mot {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 12%;
    text-align: center;
    font-family: var(--police-titre);
    font-size: var(--t-sm);
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #8f7358;
}

.carte-produit__epuise {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(250, 247, 242, 0.75);
    font-size: var(--t-sm);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--gris-800);
}

/* Barre de filtres de la boutique. */
.barre-boutique {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--e-3);
    padding-bottom: var(--e-4);
    margin-bottom: var(--e-5);
    border-bottom: 1px solid var(--ligne);
}
.barre-boutique__compte { font-size: var(--t-sm); color: var(--sourdine); }
.barre-boutique select { width: auto; min-width: 12rem; }

.filtres-categories {
    display: flex;
    flex-wrap: wrap;
    gap: var(--e-2);
    margin-bottom: var(--e-5);
}
.puce {
    display: inline-block;
    padding: 0.45rem 0.95rem;
    background: var(--blanc);
    border: 1px solid var(--ligne);
    border-radius: 999px;
    font-size: var(--t-sm);
    font-weight: 600;
    color: var(--gris-800);
}
.puce:hover { border-color: var(--orange-500); color: var(--rouge-600); text-decoration: none; }
.puce[aria-current="page"] {
    background: var(--gris-800);
    border-color: var(--gris-800);
    color: var(--creme);
}

/* Fil d'Ariane. */
.fil-ariane {
    font-size: var(--t-xs);
    color: var(--sourdine);
    padding-block: var(--e-4);
}
.fil-ariane ol {
    display: flex;
    flex-wrap: wrap;
    gap: var(--e-2);
    list-style: none;
    margin: 0;
    padding: 0;
}
.fil-ariane li + li::before { content: "/"; margin-right: var(--e-2); color: var(--ligne); }
.fil-ariane a { color: var(--sourdine); }
.fil-ariane a:hover { color: var(--rouge-600); }

/* ── Fiche produit ───────────────────────────────────────── */
.fiche {
    display: grid;
    gap: var(--e-6);
    grid-template-columns: 1fr;
    padding-bottom: var(--e-7);
}
@media (min-width: 900px) {
    .fiche {
        grid-template-columns: 1.05fr 1fr;
        gap: var(--e-7);
        align-items: start;
    }
}

.galerie__principale {
    position: relative;
    aspect-ratio: 1 / 1;
    background: var(--blanc);
    border: 1px solid var(--ligne);
    border-radius: var(--rayon-lg);
    overflow: hidden;
}
.galerie__principale img { width: 100%; height: 100%; object-fit: cover; }

.galerie__miniatures {
    display: flex;
    gap: var(--e-2);
    margin-top: var(--e-3);
    overflow-x: auto;
    padding-bottom: var(--e-1);
}
.galerie__miniature {
    flex: 0 0 auto;
    width: 4.5rem;
    height: 4.5rem;
    padding: 0;
    background: var(--blanc);
    border: 1px solid var(--ligne);
    border-radius: var(--rayon);
    overflow: hidden;
    cursor: pointer;
    transition: border-color var(--transition);
}
.galerie__miniature img { width: 100%; height: 100%; object-fit: cover; }
.galerie__miniature[aria-current="true"] { border-color: var(--rouge-500); border-width: 2px; }

.fiche__info h1 { margin-bottom: var(--e-3); }

.fiche__prix { margin-bottom: var(--e-4); }
.fiche__prix .prix__courant { font-size: var(--t-2xl); }

.fiche__stock {
    display: flex;
    align-items: center;
    gap: var(--e-2);
    font-size: var(--t-sm);
    color: var(--sourdine);
    margin-bottom: var(--e-5);
}

.fiche__description {
    color: var(--gris-800);
    padding-block: var(--e-5);
    border-block: 1px solid var(--ligne);
    margin-bottom: var(--e-5);
}

.formulaire-achat {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--e-3);
    margin-bottom: var(--e-5);
}
.formulaire-achat .champ { margin-bottom: 0; }

/* Sélecteur de quantité. */
.quantite {
    display: inline-flex;
    align-items: center;
    border: 1px solid var(--ligne);
    border-radius: var(--rayon);
    background: var(--blanc);
    overflow: hidden;
}
.quantite button {
    width: 2.75rem;
    height: 2.75rem;
    background: none;
    border: none;
    color: var(--gris-800);
    font-size: var(--t-lg);
    cursor: pointer;
    transition: background var(--transition);
}
.quantite button:hover { background: var(--creme-2); }
.quantite input {
    width: 3.25rem;
    border: none;
    border-inline: 1px solid var(--ligne);
    border-radius: 0;
    text-align: center;
    font-weight: 600;
    -moz-appearance: textfield;
    appearance: textfield;
}
.quantite input::-webkit-outer-spin-button,
.quantite input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* Choix de format (variantes). */
.variantes { display: flex; flex-wrap: wrap; gap: var(--e-2); margin-bottom: var(--e-5); }
.variante {
    position: relative;
    display: inline-flex;
    flex-direction: column;
    padding: var(--e-3) var(--e-4);
    background: var(--blanc);
    border: 1px solid var(--ligne);
    border-radius: var(--rayon);
    cursor: pointer;
    transition: border-color var(--transition), background var(--transition);
}
.variante input { position: absolute; opacity: 0; pointer-events: none; }
.variante__nom { font-size: var(--t-sm); font-weight: 600; color: var(--gris-800); }
.variante__prix { font-size: var(--t-xs); color: var(--sourdine); }
.variante:hover { border-color: var(--orange-500); }
.variante:has(input:checked) {
    border-color: var(--rouge-500);
    border-width: 2px;
    background: var(--orange-100);
}
.variante:has(input:focus-visible) { outline: 2px solid var(--rouge-600); outline-offset: 2px; }
.variante--epuise { opacity: 0.45; cursor: not-allowed; }

.fiche__meta {
    font-size: var(--t-sm);
    color: var(--sourdine);
    display: grid;
    gap: var(--e-1);
}

/* ── 7. Panier ───────────────────────────────────────────── */
.panier { display: grid; gap: var(--e-6); grid-template-columns: 1fr; }
@media (min-width: 900px) {
    .panier { grid-template-columns: 1.6fr 1fr; gap: var(--e-7); align-items: start; }
}

.ligne-panier {
    display: grid;
    grid-template-columns: 5rem 1fr;
    gap: var(--e-4);
    padding-block: var(--e-4);
    border-bottom: 1px solid var(--ligne);
}
.ligne-panier__media {
    width: 5rem;
    height: 5rem;
    border-radius: var(--rayon);
    overflow: hidden;
    background: var(--creme-2);
}
.ligne-panier__media img { width: 100%; height: 100%; object-fit: cover; }
.ligne-panier__nom { font-weight: 600; color: var(--noir); margin-bottom: var(--e-1); }
.ligne-panier__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--e-3);
    margin-top: var(--e-2);
}
.ligne-panier__retirer {
    background: none;
    border: none;
    padding: 0;
    font-size: var(--t-sm);
    color: var(--sourdine);
    text-decoration: underline;
    cursor: pointer;
}
.ligne-panier__retirer:hover { color: var(--promo); }

.sommaire {
    background: var(--blanc);
    border: 1px solid var(--ligne);
    border-radius: var(--rayon-lg);
    padding: var(--e-5);
    position: sticky;
    top: 6rem;
}
.sommaire__ligne {
    display: flex;
    justify-content: space-between;
    gap: var(--e-3);
    font-size: var(--t-sm);
    padding-block: var(--e-2);
}
.sommaire__ligne--total {
    border-top: 1px solid var(--ligne);
    margin-top: var(--e-2);
    padding-top: var(--e-3);
    font-family: var(--police-titre);
    font-size: var(--t-lg);
    font-weight: 600;
    color: var(--noir);
}
.sommaire__note { font-size: var(--t-xs); color: var(--sourdine); margin-top: var(--e-3); }

/* ── Coordonnées de la page contact ──────────────────────── */
.coordonnees {
    display: grid;
    gap: var(--e-5);
    grid-template-columns: 1fr;
    padding: var(--e-5) 0;
    margin-top: var(--e-5);
    border-block: 1px solid var(--ligne);
}

@media (min-width: 700px) {
    .coordonnees { grid-template-columns: repeat(3, 1fr); gap: var(--e-6); }
}

.coordonnees__bloc h2 {
    font-family: var(--police-texte);
    font-size: var(--t-xs);
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--rouge-600);
    margin-bottom: var(--e-2);
}
.coordonnees__bloc p { margin: 0 0 var(--e-2); }
.coordonnees__bloc p:last-child { margin-bottom: 0; }

/* État vide (panier, recherche sans résultat). */
.etat-vide {
    text-align: center;
    padding-block: var(--e-8);
}
.etat-vide p { color: var(--sourdine); margin-bottom: var(--e-5); }

/* ── 8. Pied de page ─────────────────────────────────────── */
.pied {
    background: var(--noir);
    color: rgba(250, 247, 242, 0.78);
    padding-block: var(--e-7) var(--e-5);
    margin-top: var(--e-8);
    font-size: var(--t-sm);
}
.pied__grille {
    display: grid;
    gap: var(--e-6);
    grid-template-columns: 1fr;
    padding-bottom: var(--e-6);
    border-bottom: 1px solid rgba(250, 247, 242, 0.14);
}
@media (min-width: 700px) {
    .pied__grille { grid-template-columns: 1.6fr 1fr 1fr; }
}
.pied h4 {
    color: var(--creme);
    font-family: var(--police-texte);
    font-size: var(--t-xs);
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    margin-bottom: var(--e-3);
}
.pied a { color: rgba(250, 247, 242, 0.78); }
.pied a:hover { color: var(--orange-500); text-decoration: none; }
.pied ul { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--e-2); }
.pied__logo {
    width: 150px;
    height: auto;
    margin-bottom: var(--e-3);
}
.pied__bas {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: var(--e-3);
    padding-top: var(--e-5);
    font-size: var(--t-xs);
    color: rgba(250, 247, 242, 0.55);
}

/* ── 9. Utilitaires ──────────────────────────────────────── */
.centre       { text-align: center; }
.muet         { color: var(--sourdine); }
.mt-0  { margin-top: 0; }
.mb-0  { margin-bottom: 0; }

/* Visible pour les lecteurs d'écran, invisible à l'œil. */
.hors-ecran {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Lien d'évitement, premier élément focusable de la page. */
.saut-contenu {
    position: absolute;
    top: -3rem;
    left: var(--e-4);
    z-index: 200;
    padding: var(--e-2) var(--e-4);
    background: var(--noir);
    color: var(--creme);
    border-radius: var(--rayon);
    transition: top var(--transition);
}
.saut-contenu:focus { top: var(--e-2); text-decoration: none; }

/* ============================================================
   Apparition au défilement
   ------------------------------------------------------------
   Les blocs montent de quelques pixels en se révélant. C'est l'effet qui
   convient au reste de la page : le parallaxe étendu à tout deviendrait
   lourd, et sur une grille de produits, franchement tapageur.

   LE POINT CRUCIAL EST LA SÉCURITÉ. L'état caché n'existe que si le
   JavaScript tourne : il pose `js-anim` sur la racine et l'attribut
   `data-apparait` sur ses cibles. Écrire l'état caché en CSS pur, en
   comptant sur le JavaScript pour le lever, transformerait la moindre
   erreur de script en boutique vide. Un effet manqué est un détail; du
   contenu invisible est une panne.

   Le script ne touche par ailleurs QUE ce qui est déjà hors de l'écran au
   chargement. Ce que le visiteur regarde n'est jamais masqué puis rendu,
   donc aucun clignotement.

   La transition est portée par `.est-vu` et non par l'état de départ : le
   masquage s'applique d'un coup, seule la révélation s'anime.
   ============================================================ */
.js-anim [data-apparait] {
    opacity: 0;
    transform: translateY(16px);
}

.js-anim [data-apparait].est-vu {
    opacity: 1;
    transform: none;
    transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}

/* Même refus que pour le parallaxe : pour certaines personnes, du mouvement
   au défilement provoque un vrai malaise. Le script s'abstient déjà dans ce
   cas — cette règle est la ceinture en plus des bretelles. */
@media (prefers-reduced-motion: reduce) {
    .js-anim [data-apparait],
    .js-anim [data-apparait].est-vu {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

/* ── Icônes des pages sociales ────────────────────────────────
   Les mêmes icônes servent dans le pied (fond foncé) et sur la page Contact
   (fond crème). Les couleurs de base sont donc celles du fond clair, et le
   pied les redéfinit dans son contexte. L'inverse — écrire deux jeux de
   règles — les aurait fait diverger.

   44 px de cible tactile, comme les boutons de l'en-tête : c'est le minimum
   recommandé, et l'accessibilité du site est à 100. Ce n'était pas le moment
   de la faire descendre pour deux pictogrammes.

   Ni le bleu de Facebook ni le dégradé d'Instagram : la palette de la ferme
   reste la sienne jusqu'en bas de page. */
.social-liens {
    display: flex;
    gap: var(--e-2);
    margin-top: var(--e-3);
}

.social-lien {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border: 1px solid var(--ligne);
    border-radius: 50%;
    color: var(--brun-600);
    transition: color var(--transition), border-color var(--transition);
}

.social-lien:hover,
.social-lien:focus-visible {
    color: var(--rouge-600);
    border-color: var(--rouge-600);
    text-decoration: none;
}

.social-lien svg {
    width: 21px;
    height: 21px;
}

/* Dans le pied, sur fond foncé. */
.pied .social-liens { margin-top: var(--e-4); }

.pied .social-lien {
    border-color: rgba(250, 247, 242, 0.22);
    color: rgba(250, 247, 242, 0.78);
}

.pied .social-lien:hover,
.pied .social-lien:focus-visible {
    color: var(--orange-500);
    border-color: var(--orange-500);
}


/* ── L'étiquette du menu de tri ───────────────────────────────
   Elle était en `hors-ecran`, donc invisible : le menu n'affichait que
   « En vedette », et se faisait prendre pour un filtre. Un contrôle qui ne
   dit pas ce qu'il fait sera deviné, et souvent mal. */
.tri-boutique {
    display: flex;
    align-items: center;
    gap: var(--e-2);
}

.tri-boutique__etiquette {
    font-size: var(--t-sm);
    color: var(--sourdine);
    white-space: nowrap;
}