/* ============================================================
   Boutique — 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
   le nom de la boutique 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 {
    /* 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(var(--encre-rgb), 0.06);
    --ombre-2: 0 4px 14px rgba(var(--encre-rgb), 0.09);
    --ombre-3: 0 12px 32px rgba(var(--encre-rgb), 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(--fond);
    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(--encre-forte);
    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(--action);
    text-decoration: none;
    transition: color var(--transition);
}
a:hover { color: var(--encre-2); 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(--action);
    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--claire { background: var(--fond-2); }
.section--sombre { background: var(--encre-forte); color: var(--fond); }
.section--sombre h2, .section--sombre h3 { color: var(--fond); }

.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(--encre-douce); }

/* 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(--action);
    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(--encre-2);
    border-color: var(--encre-2);
    color: var(--fond);
}
.btn--principal:hover { background: var(--encre-forte); border-color: var(--encre-forte); color: var(--fond); }

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

.btn--contour {
    background: transparent;
    border-color: var(--encre-2);
    color: var(--encre-2);
}
.btn--contour:hover { background: var(--encre-2); color: var(--fond); }

.btn--clair {
    background: transparent;
    border-color: rgba(var(--fond-rgb), 0.5);
    color: var(--fond);
}
.btn--clair:hover { background: var(--fond); border-color: var(--fond); color: var(--encre-forte); }

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

.btn[disabled], .btn--desactive {
    background: var(--fond-3);
    border-color: var(--fond-3);
    color: var(--encre-douce);
    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(--encre-2);
}
.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(--encre-2);
    text-decoration: underline;
    text-underline-offset: 2px;
    cursor: pointer;
}
.lien-bouton:hover { color: var(--action); }
.lien-bouton--danger { color: var(--action-sombre); }

/* ── 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(--accent-fonce); color: var(--blanc); }
.badge--epuise  { background: var(--encre-2); color: var(--fond); }
.badge--nouveau { background: var(--action-sombre); color: var(--blanc); }
.badge--stock   { background: var(--accent-pale); color: var(--action-sombre); }

/* ── Champs de formulaire ────────────────────────────────── */
label {
    display: block;
    font-size: var(--t-sm);
    font-weight: 600;
    color: var(--encre-2);
    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(--bordure-forte);
    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(--action-vif);
    box-shadow: 0 0 0 3px rgba(var(--action-rgb), 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(--encre-douce); 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: var(--succes-pale); border-color: var(--succes); color: var(--succes-encre); }
.message--erreur { background: var(--danger-pale); border-color: var(--promo);   color: var(--danger-encre); }
.message--info   { background: var(--accent-pale); border-color: var(--action-vif); color: var(--accent-fonce); }

/* ── 4. En-tête et navigation ────────────────────────────── */
.bandeau-annonce {
    background: var(--encre-forte);
    color: var(--fond);
    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(--fond);
    border-bottom: 1px solid var(--bordure);
}

.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; }

/* Le petit mot au-dessus du nom dans le logo (réglage shop_name_prefix) :
   petit, très espacé. Vide, il ne s'affiche pas. */
.logo__prefixe {
    font-family: var(--police-texte);
    font-size: 0.5rem;
    font-weight: 700;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--encre-douce);
    margin-bottom: 0.2em;
}

/* Nom de la boutique : 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(--encre-forte);
}

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

@media (min-width: 700px) {
    .logo__marque { height: 50px; }
    .logo__nom    { font-size: 1.65rem; }
    .logo__prefixe  { 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(--action);
}

/* 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(--encre-2);
    padding-block: var(--e-2);
}
.nav-principale a:hover { color: var(--action); text-decoration: none; }

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

.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(--encre-2);
    font: inherit;
    font-size: var(--t-sm);
    cursor: pointer;
    transition: background var(--transition), color var(--transition);
}
.icone-btn:hover { background: var(--fond-2); color: var(--action); 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(--encre-douce);
    padding: var(--e-2) var(--e-3);
    border: 1px solid var(--bordure);
    border-radius: var(--rayon);
}
.lien-langue:hover { background: var(--fond-2); color: var(--action); 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(--action);
    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(--fond);
    border-left: 1px solid var(--bordure);
    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(var(--encre-rgb), 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(--bordure);
    font-size: var(--t-lg);
    font-weight: 600;
    color: var(--encre-2);
}
.tiroir__nav a:hover { color: var(--action); 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(--encre-forte) 0%, var(--encre-2) 45%, var(--neutre) 100%);
    color: var(--fond);
    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(var(--encre-rgb), 0.86) 0%, rgba(var(--encre-rgb), 0.5) 60%, rgba(var(--encre-rgb), 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(var(--encre-rgb), 0.62) 0%,
            rgba(var(--encre-rgb), 0.74) 45%,
            rgba(var(--encre-rgb), 0.74) 80%,
            rgba(var(--encre-rgb), 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(--fond); 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(--accent-clair); }
.hero__texte {
    font-size: var(--t-lg);
    color: rgba(var(--fond-rgb), 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(--fond-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(--encre-douce);
    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(--encre-douce);
    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(--fond-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 boutique. */
.bio__nuance {
    background: var(--fond-2);
    border-left: 3px solid var(--neutre);
    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(--encre-douce);
    margin-bottom: var(--e-2);
}
.bio__nuance p { margin: 0 !important; }

/* Photo de la page « La boutique ». `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. */
.page-photo {
    margin: var(--e-5) 0;
}
.page-photo img {
    width: 100%;
    height: auto;
    border-radius: var(--rayon-lg);
    display: block;
}
.page-photo figcaption {
    margin-top: var(--e-2);
    font-size: var(--t-sm);
    color: var(--encre-douce);
}

/* ── 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(--encre-douce);
    margin-bottom: var(--e-6);
}

.faq__sommaire {
    background: var(--fond-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(--encre-douce);
    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(--fond-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(--encre-2);
}

.faq__reste {
    background: var(--fond-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(--accent-pale);
    border-radius: 50%;
    color: var(--action);
}
.argument__icone svg { width: 24px; height: 24px; }
.argument h3 { font-size: var(--t-lg); margin-bottom: var(--e-2); }
.argument p { color: var(--encre-douce); 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(--neutre);
    overflow: hidden;
    color: var(--fond);
    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(var(--encre-rgb), 0.92) 0%,
        rgba(var(--encre-rgb), 0.55) 38%,
        rgba(var(--encre-rgb), 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(var(--fond-rgb), 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(--bordure);
    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(--accent);
    box-shadow: var(--ombre-2);
    transform: translateY(-2px);
}

.carte-produit__media {
    position: relative;
    aspect-ratio: 1 / 1;
    background: var(--fond-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(--action);
    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(--encre-forte); }
.carte-produit__titre a:hover { color: var(--action); text-decoration: none; }

.carte-produit__format {
    font-size: var(--t-xs);
    color: var(--encre-douce);
    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(--encre-forte);
}
.prix__courant--promo { color: var(--promo); }
.prix__barre {
    font-size: var(--t-sm);
    color: var(--encre-douce);
    text-decoration: line-through;
}

/* « à partir de », devant le prix d'un produit à formats multiples. */
.prix__depuis {
    font-size: var(--t-xs);
    color: var(--encre-douce);
    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: var(--encre-douce);
}

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

/* 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(--bordure);
}
.barre-boutique__compte { font-size: var(--t-sm); color: var(--encre-douce); }
.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(--bordure);
    border-radius: 999px;
    font-size: var(--t-sm);
    font-weight: 600;
    color: var(--encre-2);
}
.puce:hover { border-color: var(--accent); color: var(--action); text-decoration: none; }
.puce[aria-current="page"] {
    background: var(--encre-2);
    border-color: var(--encre-2);
    color: var(--fond);
}

/* Fil d'Ariane. */
.fil-ariane {
    font-size: var(--t-xs);
    color: var(--encre-douce);
    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(--bordure); }
.fil-ariane a { color: var(--encre-douce); }
.fil-ariane a:hover { color: var(--action); }

/* ── 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(--bordure);
    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(--bordure);
    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(--action-vif); 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(--encre-douce);
    margin-bottom: var(--e-5);
}

.fiche__description {
    color: var(--encre-2);
    padding-block: var(--e-5);
    border-block: 1px solid var(--bordure);
    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(--bordure);
    border-radius: var(--rayon);
    background: var(--blanc);
    overflow: hidden;
}
.quantite button {
    width: 2.75rem;
    height: 2.75rem;
    background: none;
    border: none;
    color: var(--encre-2);
    font-size: var(--t-lg);
    cursor: pointer;
    transition: background var(--transition);
}
.quantite button:hover { background: var(--fond-2); }
.quantite input {
    width: 3.25rem;
    border: none;
    border-inline: 1px solid var(--bordure);
    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(--bordure);
    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(--encre-2); }
.variante__prix { font-size: var(--t-xs); color: var(--encre-douce); }
.variante:hover { border-color: var(--accent); }
.variante:has(input:checked) {
    border-color: var(--action-vif);
    border-width: 2px;
    background: var(--accent-pale);
}
.variante:has(input:focus-visible) { outline: 2px solid var(--action); outline-offset: 2px; }
.variante--epuise { opacity: 0.45; cursor: not-allowed; }

.fiche__meta {
    font-size: var(--t-sm);
    color: var(--encre-douce);
    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(--bordure);
}
.ligne-panier__media {
    width: 5rem;
    height: 5rem;
    border-radius: var(--rayon);
    overflow: hidden;
    background: var(--fond-2);
}
.ligne-panier__media img { width: 100%; height: 100%; object-fit: cover; }
.ligne-panier__nom { font-weight: 600; color: var(--encre-forte); 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(--encre-douce);
    text-decoration: underline;
    cursor: pointer;
}
.ligne-panier__retirer:hover { color: var(--promo); }

.sommaire {
    background: var(--blanc);
    border: 1px solid var(--bordure);
    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(--bordure);
    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(--encre-forte);
}
.sommaire__note { font-size: var(--t-xs); color: var(--encre-douce); 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(--bordure);
}

@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(--action);
    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(--encre-douce); margin-bottom: var(--e-5); }

/* ── 8. Pied de page ─────────────────────────────────────── */
.pied {
    background: var(--encre-forte);
    color: rgba(var(--fond-rgb), 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(var(--fond-rgb), 0.14);
}
@media (min-width: 700px) {
    .pied__grille { grid-template-columns: 1.6fr 1fr 1fr; }
}
.pied h4 {
    color: var(--fond);
    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(var(--fond-rgb), 0.78); }
.pied a:hover { color: var(--accent); 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(var(--fond-rgb), 0.55);
}

/* ── 9. Utilitaires ──────────────────────────────────────── */
.centre       { text-align: center; }
.muet         { color: var(--encre-douce); }
.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(--encre-forte);
    color: var(--fond);
    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 boutique
   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(--bordure);
    border-radius: 50%;
    color: var(--encre-douce);
    transition: color var(--transition), border-color var(--transition);
}

.social-lien:hover,
.social-lien:focus-visible {
    color: var(--action);
    border-color: var(--action);
    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(var(--fond-rgb), 0.22);
    color: rgba(var(--fond-rgb), 0.78);
}

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

/* ── 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(--encre-douce);
    white-space: nowrap;
}