/* ═══════════════════════════════════════════════════════════════════════
   FLORI GREEN — LA PEAU BENTO
   ═══════════════════════════════════════════════════════════════════════

   ⚠ CE FICHIER EST GÉNÉRÉ. Ne le modifie pas ici.

   Sa source est `design/pistes/bento/bento.css`, la maquette validée. Le
   script `tools/bento-css.py` la recopie en changeant deux choses, et deux
   seulement : le chemin des polices, et le préfixe des classes — `.case`
   devient `.fgb-case`.

   Pour modifier une règle : on la modifie dans la maquette, on la regarde
   dans le navigateur, puis on relance

       py tools/bento-css.py

   C'est ce qui garantit que la maquette et le site ne divergent pas. Sur ce
   projet, la divergence entre ce qui est montré et ce qui est livré a déjà
   coûté cher.

   Le préfixe `fgb-` a été choisi parce qu'il est totalement libre dans le
   dépôt. `.fg-case`, `.fg-rangee` et `.fg-vue` ont déjà causé trois
   collisions ; on ne recommence pas.

   PENDANT LE PORTAGE, cette feuille cohabite avec `skin.css` : elle porte
   l'en-tête, le pied et les gabarits déjà portés ; skin.css garde les
   autres. Ce n'est pas une couche corrective — les deux ne se disputent
   aucun sélecteur, elles servent des gabarits différents. Le jour où le
   dernier gabarit est porté, skin.css disparaît.
   ═══════════════════════════════════════════════════════════════════════ */

/* Les polices du thème, servies depuis le dépôt : aucun appel réseau. */
@font-face{font-family:"Instrument Serif";font-style:normal;font-weight:400;font-display:swap;
  src:url("../fonts/instrument-serif-latin.woff2") format("woff2")}
@font-face{font-family:"Instrument Serif";font-style:italic;font-weight:400;font-display:swap;
  src:url("../fonts/instrument-serif-italic-latin.woff2") format("woff2")}
@font-face{font-family:"Instrument Sans";font-style:normal;font-weight:400 700;font-display:swap;
  src:url("../fonts/instrument-latin.woff2") format("woff2")}
/* Fraunces dormait dans `assets/fonts` depuis le debut, jamais declaree :
   127 Ko qui voyageaient dans chaque livraison sans jamais servir. Elle est
   maintenant un choix du personnalisateur.
   La declarer ne coute RIEN tant qu'elle n'est pas choisie : un navigateur ne
   telecharge une police que si une regle l'utilise vraiment. */
@font-face{font-family:"Fraunces";font-style:normal;font-weight:400 700;font-display:swap;
  src:url("../fonts/fraunces-latin.woff2") format("woff2")}

:root{
  /* ── LA PALETTE, CELLE D'ORIGINE ────────────────────────────────────
     Relevée sur ses planches, arrêtée le 29 août, et rien d'autre.

       --creme      le papier : le fond de page, celui qui passe entre les
                    cases et qui fait tout le travail d'aération
       --case       une case ordinaire
       --tuile      une case qui doit se distinguer de sa voisine
       --ox         l'oxblood : la case qui porte l'entrée d'une page
       --brique     le texte accent, et les boutons  (7,2:1 sur crème)
       --brique-vif MARQUES UNIQUEMENT — jamais de texte, jamais un aplat
       --olive      les aplats et les pastilles      (encre dessus 4,9:1)
       --olive-txt  l'olive quand elle devient du texte (6,2:1)

     AUCUN JAUNE nulle part. Le jeton --gold n'existe pas, et aucun repli
     ne doit le faire revenir : c'est déjà arrivé une fois. */
  --creme:#f4f1e6;
  --case:#e9e4d2;
  --tuile:#ddd8bd;
  --ox:#5a1f08;
  --on-ox:#fbf6ea;
  --brique:#8c3315;
  --brique-vif:#c4491a;
  --olive:#8a8b22;
  --on-olive:#1b1905;
  --olive-txt:#5c5d14;
  --encre:#1b1905;
  --encre-doux:#5c5738;
  --line:#d9d3ba;

  --serif:"Instrument Serif",Georgia,"Times New Roman",serif;
  --sans:"Instrument Sans",system-ui,-apple-system,"Segoe UI",sans-serif;

  --gout:24px;        /* la gouttière de la référence */
  --rayon:20px;       /* le rayon, partout */
  --rayon-img:16px;   /* celui d'une image DANS une case */
  --shell:1440px;
  --barre-h:101px;   /* la hauteur reelle de la barre, mesuree */
  /* UNE SEULE marge intérieure, et c'est la correction la plus importante
     du 03/09.
     Il y en avait deux — 24 px sur une case ordinaire, 32 px sur une case
     d'entrée — et rien ne s'alignait d'une case à l'autre : mesuré sur les
     huit pages, les titres tombaient à 48 px du bord de la fenêtre dans
     certaines cases et à 56 px dans d'autres. L'œil voit ce décalage de
     8 px sans savoir le nommer ; c'est ça, « les positionnements ne vont
     pas ».
     La référence n'en a qu'une, 24 px, en-tête compris : son logo et le
     titre de sa case d'entrée tombent tous deux à 48 px du bord. */
  --pad:24px;
  /* La marge d'une case qui porte un grand titre, ou un texte long.
     Ce jeton avait DISPARU lors d'une reecriture, alors que les gabarits
     l'utilisent partout : toutes les cases d'entree retombaient sur la
     marge ordinaire, et le titre touchait presque le bord. L'audit l'a
     attrape — « jeton consomme mais jamais declare ». */
  --pad-l:32px;
  --ease:cubic-bezier(.2,.9,.3,1);
  --dur:.4s;

  /* L'ÉCHELLE — une seule poignée pour tout le texte du site.
     Le réglage « taille générale » du personnalisateur ne fait que poser ce
     nombre. Sans lui, il aurait fallu réécrire les douze tailles ci-dessous
     une à une : douze valeurs à tenir d'accord, qui auraient divergé dès la
     première retouche. Les rapports entre les titres et le corps, eux, ne
     bougent jamais. */
  --echelle:1;

  /* Les tailles de texte. Un rôle = une valeur = partout : aucune taille
     brute n'est écrite ailleurs que dans ce bloc. */
  --t-h1:clamp(calc(2.2rem * var(--echelle)),3.9vw,calc(56px * var(--echelle)));
  --t-h2:clamp(calc(1.8rem * var(--echelle)),3vw,calc(40px * var(--echelle)));
  --t-h3:clamp(calc(1.4rem * var(--echelle)),2.1vw,calc(28px * var(--echelle)));
  --t-item:calc(25px * var(--echelle));
  --t-lede:calc(20px * var(--echelle));
  --t-corps:calc(16px * var(--echelle));
  --t-petit:calc(14px * var(--echelle));
  --t-micro:calc(12px * var(--echelle));
  /* Ajoutés le 03/09 : la maquette écrivait ces trois tailles à la main,
     et l'audit du thème refuse une taille de texte en valeur brute. */
  --t-carte:calc(22px * var(--echelle));   /* le nom d'un flash, d'un produit */
  --t-fait:calc(17px * var(--echelle));    /* une valeur dans une liste de faits */
  --t-menu:calc(1.3rem * var(--echelle));  /* une entrée du menu en overlay */
  --t-nano:calc(10px * var(--echelle));    /* le compte du panier */
}

/* Le sombre. Les mêmes rôles, jamais d'autres couleurs : l'oxblood
   s'éclaircit en braise pour rester lisible sur un fond sombre, l'olive
   monte en clarté pour la même raison. */
@media (prefers-color-scheme:dark){
  :root:not([data-theme="clair"]){
    --creme:#14150a; --case:#20220f; --tuile:#2b2d15;
    --ox:#3d1505; --on-ox:#fbf6ea;
    --brique:#c4491a; --brique-vif:#d9642f;
    --olive:#6f7019; --on-olive:#fbf6ea; --olive-txt:#b9bb60;
    --encre:#efedd9; --encre-doux:#a8a98a; --line:#3a3d1d;
  }
}
:root[data-theme="sombre"]{
  --creme:#14150a; --case:#20220f; --tuile:#2b2d15;
  --ox:#3d1505; --on-ox:#fbf6ea;
  --brique:#c4491a; --brique-vif:#d9642f;
  --olive:#6f7019; --on-olive:#fbf6ea; --olive-txt:#b9bb60;
  --encre:#efedd9; --encre-doux:#a8a98a; --line:#3a3d1d;
}

/* Le passage d'une page à l'autre cesse d'être un clignotement blanc.
   Une ligne, ignorée proprement là où elle n'est pas comprise. */
@view-transition{navigation:auto}

/* ── LES FONDATIONS ──────────────────────────────────────────────── */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;padding:var(--gout);background:var(--creme);color:var(--encre);
  font-family:var(--sans);font-size:var(--t-corps);line-height:1.5;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
h1,h2,h3,h4{margin:0;font-weight:400;line-height:1.02;text-wrap:balance}
p{margin:0}
/* Le gras du navigateur est « bolder », c'est-a-dire un cran au-dessus de
   ce qui l'entoure. Dans un texte en graisse 300, un cran donne 400 : le
   mot important ne ressort pas. Elle veut des <strong> sur les mots qui
   comptent pour le referencement — ils doivent se VOIR. Valeur absolue. */
strong,b{font-weight:600}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
ul,ol{margin:0;padding:0;list-style:none}
svg{display:block}
/* Le focus se voit toujours, et ne dépend jamais de la couleur seule. */
:focus-visible{outline:2px solid var(--brique);outline-offset:3px;border-radius:4px}
.fgb-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap}

/* ── LA GRILLE ───────────────────────────────────────────────────────
   Douze colonnes. Aucune case ne connaît sa largeur en pixels : elle
   connaît son nombre de colonnes, et c'est tout. C'est ce qui manquait à
   l'ancienne grille, où chaque case annonçait sa taille et où rien ne
   s'alignait avec rien. */
/* stretch, et NON start.
   Chaque case faisait SA hauteur : sur une rangee de trois, la plus bavarde
   depassait les deux autres de 60 px et la rangee partait de travers. Un
   bento tient justement parce que les cases d'une meme rangee se terminent
   sur la MEME ligne — c'est ce qui donne l'impression de grille, et son
   absence est le desequilibre signale le 03/09.

   Le risque connu de stretch, c'est la case courte etiree qui laisse un
   grand vide. Il se traite a la source : le contenu se repartit dans la
   hauteur au lieu d'etre colle en haut, donc le vide tombe ENTRE les blocs
   et non apres eux. */
.fgb-bento{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));
  gap:var(--gout);max-width:var(--shell);margin-inline:auto;
  align-items:stretch}
/* L'écart se pose sur CHAQUE bloc, pas entre deux frères adjacents.
   `.fgb-bento + .fgb-bento` ne voyait pas le pied : son frère précédent est <main>,
   pas un autre bento. Mesuré en ligne le 03/09 : 0 px entre le dernier bloc
   et le pied, alors que tout le reste respire de 24 px. Le pied collait.
   Seul le tout premier bloc — la barre — n'a rien au-dessus de lui. */
.fgb-bento{margin-top:var(--gout)}
body > .fgb-bento:first-of-type{margin-top:0}

/* Les SEULES classes utilitaires de la feuille, et elles ne disent qu'une
   chose : combien de colonnes. Documentées ici pour qu'on n'en invente
   pas d'autres au fil des pages. */
.fgb-s3{grid-column:span 3}.fgb-s4{grid-column:span 4}.fgb-s5{grid-column:span 5}
.fgb-s6{grid-column:span 6}.fgb-s7{grid-column:span 7}.fgb-s8{grid-column:span 8}
.fgb-s9{grid-column:span 9}.fgb-s12{grid-column:1/-1}
.fgb-r2{grid-row:span 2}
/* .fgb-etire n'a plus de raison d'etre depuis que la grille etire par defaut.
   La classe reste declaree pour ne rien casser dans les gabarits. */
.fgb-etire{align-self:stretch}

/* ── LA CASE ─────────────────────────────────────────────────────── */
.fgb-case{position:relative;display:flex;flex-direction:column;min-width:0;
  padding:var(--pad);background:var(--case);color:var(--encre);
  border-radius:var(--rayon)}
.fgb-case--tuile{background:var(--tuile)}
.fgb-case--ox{background:var(--ox);color:var(--on-ox)}
.fgb-case--olive{background:var(--olive);color:var(--on-olive)}
/* Une case vide de contenu, pour montrer où poser une photo. */
.fgb-case--vide{border:1px dashed var(--line);background:transparent;
  align-items:center;justify-content:center;text-align:center;gap:.4rem;
  min-height:11rem;color:var(--encre-doux)}
.fgb-case--vide b{font-size:var(--t-lede);font-weight:500;color:var(--encre)}
.fgb-case--vide span{font-size:var(--t-micro);letter-spacing:.1em;text-transform:uppercase}
/* Une case qui mène ailleurs se soulève. UNE seule propriété animée. */
a.fgb-case{transition:transform var(--dur) var(--ease)}
a.fgb-case:hover,a.fgb-case:focus-visible{transform:translateY(-4px)}
/* Le titre d'entrée de page : énorme, posé en bas, l'ornement en haut. */
.fgb-case--entree{min-height:clamp(320px,46vh,479px);justify-content:flex-end;
  overflow:hidden}
.fgb-case--entree h1{font-size:var(--t-h1);font-weight:700;letter-spacing:-.02em;
  max-width:15ch}
.fgb-case--entree h1 em{font-family:var(--serif);font-style:italic;font-weight:400}
.fgb-case--entree p{margin-top:14px;font-size:var(--t-lede);font-weight:300;
  max-width:44ch;opacity:.88}

/* L'ornement d'angle : le geste du métier, pas un logo. Il ne se lit pas,
   il accompagne — donc masqué aux lecteurs d'écran, et sans couleur qui
   entre en concurrence avec le titre. */
.fgb-ornement{position:absolute;top:var(--pad);right:var(--pad);
  width:119px;height:119px;color:var(--line);pointer-events:none}
.fgb-case--ox .fgb-ornement{color:var(--brique-vif);opacity:.5}

/* ── LE MOBILIER DE TEXTE ────────────────────────────────────────── */
.fgb-etiq{font-size:var(--t-micro);letter-spacing:.14em;text-transform:uppercase;
  font-weight:600;color:var(--olive-txt)}
/* PAS --brique-vif ici. Son contrat le reserve aux MARQUES : jamais de
   texte. Mesure faite en sombre le 03/09 : l'etiquette en brique-vif sur
   l'oxblood donnait 4,45:1, sous la barre AA de 4,5 — la regle avait donc
   deux raisons d'etre respectee, pas une.
   Le creme attenue donne 8:1, et la hierarchie tient par la taille et
   l'espacement des capitales, comme partout ailleurs. */
.fgb-case--ox .fgb-etiq{color:var(--on-ox);opacity:.72}
.fgb-serif{font-family:var(--serif);font-weight:400;letter-spacing:-.02em}
.fgb-lede{font-size:var(--t-lede);line-height:1.3;font-weight:300}
/* ── UN TEXTE LONG SE LIT, IL NE SE SUBIT PAS ────────────────────────
   Le contenu des pages arrivait tout lisse : même interligne pour un
   paragraphe et pour un titre, même écart partout, listes sans retrait.
   Sur la page Info, qui descend sur des milliers de pixels, l'œil n'avait
   aucun repère.

   Trois réglages, et pas un de plus — l'exagération se voit autant que
   l'absence :

   1. L'INTERLIGNE SUIT LA TAILLE. Un texte courant a besoin d'air entre
      ses lignes (1,65) ; un grand titre en a besoin de MOINS (1,1), sinon
      ses deux lignes se détachent l'une de l'autre.
   2. L'ÉCART AU-DESSUS D'UN TITRE EST PLUS GRAND QUE CELUI EN DESSOUS.
      C'est ce qui rattache un titre à SON paragraphe plutôt qu'au
      précédent — la règle de proximité, et elle fait tout le travail.
   3. LA LIGNE RESTE COURTE. 62 caractères : au-delà, l'œil rate la ligne
      suivante en revenant à la marge. */
.fgb-prose{max-width:64ch;font-weight:300;line-height:1.65;
  text-wrap:pretty}
.fgb-prose > * + *{margin-top:1.1em}

/* Les titres à l'intérieur d'un texte long. */
.fgb-prose :where(h2,h3,h4){font-family:var(--serif);font-weight:400;
  letter-spacing:-.015em;line-height:1.12;color:var(--encre)}
.fgb-prose h2{font-size:var(--t-h3);margin-top:2.4em;margin-bottom:.5em}
.fgb-prose h3{font-size:var(--t-lede);margin-top:1.9em;margin-bottom:.4em}
.fgb-prose h4{font-family:var(--sans);font-size:var(--t-corps);font-weight:600;
  letter-spacing:.02em;margin-top:1.6em;margin-bottom:.3em}
/* Un titre qui ouvre le texte n'a rien au-dessus de quoi s'écarter. */
.fgb-prose > :first-child{margin-top:0}
/* Le paragraphe qui SUIT un titre lui appartient : il se colle. */
.fgb-prose :where(h2,h3,h4) + *{margin-top:.5em}

/* Le premier paragraphe d'une section porte un cran de plus : il annonce,
   les suivants développent. Un seul niveau de nuance, pas trois. */
.fgb-prose h2 + p{font-size:var(--t-fait);line-height:1.55}

/* Les listes : un retrait, une puce discrète, et de l'air entre les items —
   une liste serrée se lit comme un bloc, donc ne se lit pas. */
.fgb-prose :where(ul,ol){padding-left:1.4em}
.fgb-prose li + li{margin-top:.5em}
.fgb-prose ul li{list-style:none;position:relative}
.fgb-prose ul li::before{content:"";position:absolute;left:-1.1em;top:.62em;
  width:5px;height:5px;border-radius:50%;background:var(--brique)}
.fgb-prose ol{list-style:decimal;font-variant-numeric:tabular-nums}
.fgb-prose ol li::marker{color:var(--brique)}

/* Une citation : décalée d'un filet, jamais en italique — l'italique sur
   plusieurs lignes fatigue. */
.fgb-prose blockquote{margin-left:0;padding-left:1.2em;
  border-left:2px solid var(--line);color:var(--encre-doux)}
.fgb-prose :where(strong,b){color:var(--encre)}
.fgb-prose a{border-bottom:1px solid var(--line);
  transition:border-color .2s var(--ease)}
.fgb-prose a:hover{border-bottom-color:var(--brique)}
.fgb-prose img{border-radius:var(--rayon-img);margin-block:1.6em}
.fgb-prose hr{margin-block:2.4em;border:0;border-top:1px solid var(--line)}
.fgb-doux{color:var(--encre-doux)}
.fgb-tnum{font-variant-numeric:tabular-nums}

/* La pastille d'état : « carnet ouvert ». Jamais la couleur seule — il y a
   toujours le mot à côté du point. */
.fgb-pastille{display:inline-flex;align-items:center;gap:.5rem;align-self:flex-start;
  margin-top:20px;font-size:var(--t-micro);letter-spacing:.1em;text-transform:uppercase;
  color:var(--olive-txt)}
.fgb-case--ox .fgb-pastille{color:var(--on-ox)}
.fgb-pastille::before{content:"";width:7px;height:7px;border-radius:50%;
  background:currentColor}

/* ── LES BOUTONS ─────────────────────────────────────────────────────
   Deux niveaux, pas cinq : plein pour ce qui engage, contour pour ce qui
   accompagne. La cible fait 44 px de haut, mesurée et non supposée. */
.fgb-bouton{display:inline-flex;align-items:center;gap:.5rem;min-height:44px;
  padding:0 20px;border-radius:999px;border:0;cursor:pointer;
  font-family:var(--sans);font-size:var(--t-petit);letter-spacing:.06em;
  text-transform:uppercase;background:var(--brique);color:var(--on-ox);
  transition:transform var(--dur) var(--ease)}
.fgb-bouton:hover{transform:translateY(-2px)}
.fgb-bouton--calme{background:transparent;color:var(--encre);
  border:1px solid var(--line)}
.fgb-case--ox .fgb-bouton--calme{color:var(--on-ox);border-color:var(--on-ox)}
.fgb-bouton svg{width:15px;height:15px;fill:currentColor}
/* Le groupe d'actions d'une case. `margin-top:auto` le pousse en bas : dans
   une rangee de cartes, c'est LUI qui les aligne toutes sur la meme ligne
   du bas, quel que soit le nombre de lignes de texte au-dessus.
   Le padding au-dessus est genereux — un bouton colle a son texte donne
   l'impression que la case est pleine a craquer. */
.fgb-duo{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem;
  margin-top:auto;padding-top:1.6rem}

/* ── L'EN-TÊTE ET LE MENU ────────────────────────────────────────────
   Le menu est le morceau le plus délicat de la page : sept entrées, et il
   ne doit ressembler ni à une liste ni à un empilement.

   Grand écran : une seule ligne, l'entrée courante soulignée d'un filet
   brique — pas d'un fond, pas d'une graisse. Le soulignement se dessine au
   survol, il ne clignote pas.

   Sous 1100 px : les sept entrées ne tiennent plus sans se replier en pile,
   et une pile de sept lignes dans l'en-tête écrase la page. On passe donc à
   un bouton qui ouvre un panneau plein écran — les entrées y sont grandes,
   au serif, avec la marge de doigt qu'il faut. C'est un menu, pas un
   accordéon compressé. */
/* La barre a DEUX groupes, pas trois.
   Avec trois enfants et space-between, la nav flottait au MILIEU : mesure a
   1440 px, 141 px de vide a sa gauche, 141 px a sa droite. Chez Bentolio le
   logo est a gauche et les liens sont colles a droite — 885 px de vide entre
   les deux. C'est ce vide unique qui fait la barre.
   Le logo d'un cote, la navigation et les outils de l'autre. */
.fgb-tete{grid-column:1/-1;flex-direction:row;align-items:center;
  justify-content:space-between;gap:var(--gout);
  padding:0 var(--pad);min-height:var(--barre-h)}
.fgb-tete-droite{display:flex;align-items:center;gap:clamp(1rem,2.4vw,2.6rem)}
.fgb-marque{display:flex;align-items:baseline;gap:.4em;font-family:var(--serif);
  font-size:var(--t-item);letter-spacing:.06em;text-transform:uppercase;
  white-space:nowrap}
.fgb-marque i{font-style:italic}
.fgb-marque b{font-family:var(--sans);font-weight:700;font-size:.8em;letter-spacing:.04em}
/* Le logo quand on EST sur l'accueil : le meme filet brique que les entrees
   de menu, pour que le reperage soit le meme partout. */
a.fgb-marque[aria-current]{border-bottom:1px solid var(--brique);padding-bottom:2px}

.fgb-nav{display:flex;align-items:center;gap:clamp(.9rem,2vw,2rem)}
.fgb-nav a{position:relative;padding-block:4px;font-size:var(--t-petit);
  letter-spacing:.06em;text-transform:uppercase;color:var(--encre-doux);
  transition:color .2s var(--ease)}
.fgb-nav a:hover{color:var(--encre)}
/* Le filet de l'entrée courante et du survol : il se dessine depuis la
   gauche, il n'apparaît pas d'un coup. */
.fgb-nav a::after{content:"";position:absolute;left:0;bottom:0;height:1px;width:0;
  background:var(--brique);transition:width .3s var(--ease)}
.fgb-nav a:hover::after{width:100%}
.fgb-nav a[aria-current]{color:var(--encre)}
.fgb-nav a[aria-current]::after{width:100%}
/* La cible de 44 px est portée par un calque qui ne compte pas dans la
   mise en page : lui donner min-height ferait grossir la barre de 23 px
   sur tous les écrans pour un problème qui n'existe qu'au doigt.
   Sur ::before, parce que ::after porte déjà le filet. */
.fgb-nav a::before{content:"";position:absolute;left:-8px;right:-8px;top:50%;
  height:44px;transform:translateY(-50%)}
.fgb-nav .fgb-ext i{font-style:normal;margin-left:.3em;font-size:.85em}

/* Le groupe d'outils est decale vers l'EXTERIEUR de la moitie du vide de ses
   boutons. Sans ce decalage, mesure a 1440 px : le logo tombait a 32 px du
   bord de la case, le dernier glyphe d'icone a 45 px — le cote droit etait
   en retrait de 13 px, et rien ne disait pourquoi.
   Un bouton de 44 px autour d'un glyphe de 19 px porte 12,5 px de vide de
   chaque cote. On rend ce vide au bord. */
.fgb-outils{display:flex;align-items:center;gap:.3rem;margin-right:-12px}
.fgb-outils button,.fgb-outils a{position:relative;display:grid;place-items:center;
  width:44px;height:44px;border:0;border-radius:50%;cursor:pointer;
  background:transparent;color:var(--encre);
  transition:background .2s var(--ease)}
.fgb-outils button:hover,.fgb-outils a:hover{background:var(--line)}
.fgb-outils svg{width:19px;height:19px}
/* Le bouton du menu n'existe QUE sous le palier de repli.
   Il s'affichait a toutes les largeurs, y compris a 1440 px a cote de la
   navigation complete. La cause : `.fgb-icone-menu{display:none}` pesait moins
   que `.fgb-outils button{display:grid}` — une classe contre une classe plus un
   type. On descend la regle dans le meme contexte pour qu'elle porte. */
.fgb-outils .fgb-icone-menu{display:none}

/* Le menu en OVERLAY, et non en plein ecran.
   Le plein ecran REMPLACE la page : on ne sait plus d'ou on vient, et
   revenir coute un geste. L'overlay se pose PAR-DESSUS, accroche sous
   l'en-tete, a la largeur d'une carte — la page reste visible derriere,
   donc on voit qu'on n'a rien quitte. */
.fgb-panneau{position:fixed;inset:0;z-index:60;display:none}
.fgb-panneau[data-ouvert]{display:block}
/* Le voile assombrit sans cacher. C'est aussi la surface qui ferme le menu
   au clic : un <button> et non un <div>, pour que ce soit atteignable au
   clavier comme le reste. */
.fgb-voile{position:absolute;inset:0;width:100%;border:0;cursor:pointer;
  background:rgb(0 0 0 / .38)}
@supports (backdrop-filter:blur(2px)){.fgb-voile{backdrop-filter:blur(2px)}}
/* Le panneau est un BENTO, lui aussi.
   C'etait une liste de liens dans une boite : la seule partie du site qui ne
   parlait pas la meme langue que le reste. Chaque entree devient une CASE —
   meme rayon, meme fond, meme ecart — et le menu ressemble enfin au site
   qu'il ouvre.

   Deux exceptions, et elles disent quelque chose : Accueil prend la largeur
   parce que c'est la porte, et Contact aussi parce qu'il SORT du site. Cette
   derniere est la seule case pleine du panneau — une seule case accentuee
   par ecran, ici comme ailleurs.

   Le haut s'accroche sur --barre-h, la hauteur REELLE de la barre. Il etait
   fige a 88 px alors qu'elle en fait 101 : le panneau flottait 13 px trop
   haut, et il collait la barre sur telephone ou elle n'en fait que 76. */
.fgb-panneau-boite{position:absolute;top:calc(var(--gout) + var(--barre-h) + 8px);
  right:var(--gout);width:min(400px,calc(100vw - var(--gout) * 2));
  max-height:calc(100vh - var(--gout) * 2 - var(--barre-h) - 8px);
  overflow-y:auto;padding:var(--gout);background:var(--creme);
  border-radius:calc(var(--rayon) + 4px);
  box-shadow:0 22px 60px rgb(0 0 0 / .34)}
.fgb-panneau nav{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.fgb-panneau nav a{display:flex;flex-direction:column;justify-content:space-between;
  gap:.6rem;min-height:88px;padding:14px;border-radius:var(--rayon);
  background:var(--case);font-family:var(--serif);font-size:var(--t-h3);
  line-height:1.05;letter-spacing:-.02em;
  transition:transform .25s var(--ease),background .2s var(--ease)}
.fgb-panneau nav a:hover{background:var(--tuile);transform:translateY(-2px)}
.fgb-panneau nav a[aria-current]{background:var(--tuile);color:var(--brique)}
.fgb-panneau nav a:first-child{grid-column:1 / -1;min-height:0;
  flex-direction:row;align-items:center;font-size:var(--t-lede)}
.fgb-panneau nav a.fgb-ext{grid-column:1 / -1;flex-direction:row;align-items:center;
  justify-content:space-between;min-height:64px;
  background:var(--ox);color:var(--on-ox)}
.fgb-panneau nav a.fgb-ext:hover{background:var(--ox)}
.fgb-panneau nav a svg{width:18px;height:18px;flex:none;opacity:.6;
  align-self:flex-end}
.fgb-panneau nav a.fgb-ext svg,.fgb-panneau nav a:first-child svg{align-self:center;
  opacity:.85}
.fgb-panneau-pied{display:flex;flex-wrap:wrap;gap:.4rem 1.2rem;
  margin-top:12px;padding:14px 4px 2px;border-top:1px solid var(--line);
  font-size:var(--t-micro);letter-spacing:.08em;text-transform:uppercase;
  color:var(--encre-doux)}
.fgb-panneau-pied a:hover{color:var(--brique)}
/* Sous 420 px, deux colonnes de 80 px ne sont plus des cases : une seule. */
@media (max-width:420px){
  .fgb-panneau nav{grid-template-columns:1fr}
  .fgb-panneau nav a{min-height:0;flex-direction:row;align-items:center;
    justify-content:space-between;font-size:var(--t-lede)}
  .fgb-panneau nav a svg{align-self:center}
}
/* Sur telephone, l'overlay vient du bas et prend la largeur : a 375 px, un
   panneau de 360 px colle a droite laisse une bande inutile a gauche. */
@media (max-width:520px){
  .fgb-panneau-boite{top:auto;bottom:var(--gout);left:var(--gout);
    right:var(--gout);width:auto;max-height:calc(100vh - var(--gout) * 2)}
}

/* ── LA RANGÉE DE TITRE ──────────────────────────────────────────────
   Sans filet : il séparait un titre de ses propres images alors qu'il les
   annonce. La hiérarchie est portée par la taille du serif et par l'écart
   au-dessus, pas par un trait. */
.fgb-rangee{grid-column:1/-1;display:flex;align-items:baseline;
  justify-content:space-between;gap:1rem;flex-wrap:wrap;
  padding:8px var(--pad) 2px}
.fgb-rangee h2{font-family:var(--serif);font-size:var(--t-h2);letter-spacing:-.02em}
.fgb-rangee > a{position:relative;font-size:var(--t-petit);letter-spacing:.06em;
  text-transform:uppercase;color:var(--encre-doux);
  border-bottom:1px solid currentColor;padding-bottom:2px}
.fgb-rangee > a:hover{color:var(--encre)}
.fgb-rangee > a::before{content:"";position:absolute;left:-8px;right:-8px;top:50%;
  height:44px;transform:translateY(-50%)}

/* ── LE FIL D'ARIANE ─────────────────────────────────────────────────
   D'où l'on vient, sans occuper une case. Il vit DANS la grille — comme la
   rangée de titre — et non au-dessus d'elle : sa marge est donc celle de la
   page, et il s'aligne sur le bord gauche de la première case.
   L'ancien fil se calait sur une marge en vw, sans rapport avec les 24 px du
   bento : il partait à gauche pendant que tout le reste tenait la ligne. */
.fgb-fil{grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:center;
  gap:.2rem .5rem;padding:0 var(--pad);
  font-size:var(--t-micro);letter-spacing:.14em;text-transform:uppercase;
  color:var(--encre-doux)}
.fgb-fil a{display:inline-flex;align-items:center;min-height:44px;
  color:inherit;text-decoration:none;font-weight:600}
.fgb-fil a:hover{color:var(--encre);text-decoration:underline;text-underline-offset:.22em}
/* La page où l'on est : présente, mais elle ne se donne pas pour un lien. */
.fgb-fil-ici{color:var(--encre);font-weight:600}

/* ── LA LISTE DE TRAVAUX ─────────────────────────────────────────────
   Le motif central de la référence : des intitulés séparés par un filet de
   2 px, dont le premier porte une image qui absorbe la hauteur restante.
   Sans elle, la liste s'arrêtait à mi-hauteur et laissait 200 px de blanc. */
/* ── L'ACCORDEON DE PHOTOS ───────────────────────────────────────────
   Les quatre ou cinq dernieres pieces, en photos. Au survol, celle qu'on
   regarde s'ouvre et les autres se replient — l'effet s'appelle un
   « accordeon horizontal », et il tient dans une seule propriete animee :
   le `flex-grow` de chaque panneau.

   Trois choses le rendent propre :

   1. LE RAYON ET L'ECART NE BOUGENT PAS. Ce sont les panneaux qui changent
      de largeur, pas leur habillage — rien ne s'ecrase pendant le
      mouvement, et l'ecart reste le meme que partout ailleurs sur le site.
   2. `flex-basis:0` ET `min-width:0`. Sans eux, une image large impose sa
      taille et les panneaux replies restent gros.
   3. Une seule propriete animee, composee par le navigateur.

   Au CLAVIER, :focus-within fait la meme chose que le survol : l'effet
   n'est pas reserve a la souris.

   Sans survol possible — telephone, tablette — les panneaux se rangent en
   grille : un accordeon qu'on ne peut pas survoler ne montre jamais rien. */
/* L'accordeon prend TOUTE la hauteur de sa case.
   Il avait une hauteur a lui, calculee sur l'ecran : dans une case dont la
   hauteur est fixee par la colonne voisine, ca laissait un vide sous les
   photos. `height:100%` avec `min-height:0` a chaque etage — sinon la
   hauteur en pourcentage retombe sur celle du contenu. */
/* Le mouvement, encore assagi.
   `flex-basis` en pourcentage evite le recalcul de repartition, mais cinq
   photos qui changent de largeur en meme temps restent lourdes. Trois
   precautions :
     · `contain: layout paint` — le navigateur sait que rien ne deborde d'un
       panneau, il ne recalcule donc que ce panneau ;
     · l'image est en `transform` fige, ce qui la fait passer sur sa propre
       couche et lui evite d'etre redessinee a chaque image ;
     · un delai de 40 ms avant l'ouverture : sans lui, le simple fait de
       traverser l'accordeon avec la souris declenche cinq animations. */
.fgb-accordeon{display:flex;gap:var(--gout);align-items:stretch;
  flex:1 1 auto;min-height:min(42vh,380px);height:100%;
  contain:layout}
.fgb-liste:has(.fgb-accordeon){padding:var(--pad);min-height:0}
/* Le mouvement.
   `flex-grow` s'anime, mais mal : le navigateur recalcule la mise en page a
   chaque image, et sur cinq panneaux qui portent des photos ca saccade.
   `flex-basis` en pourcentage s'anime, LUI, sans recalculer la repartition —
   c'est la meme bascule, en fluide.
   La courbe est longue et douce : un accordeon nerveux donne l'impression
   que la page tremble. */
.fgb-accordeon > a{position:relative;display:block;overflow:hidden;
  border-radius:var(--rayon);background:var(--tuile);
  flex:1 1 20%;min-width:0;min-height:0;
  contain:layout paint;
  transition:flex-basis .5s cubic-bezier(.22,1,.36,1) 40ms}
/* On n'attend pas pour se refermer : seul l'ouverture est retardee. */
.fgb-accordeon > a:hover,.fgb-accordeon > a:focus-within{transition-delay:0s}
.fgb-accordeon > a img{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;display:block;transform:translateZ(0)}
/* La piece survolee prend trois fois la place ; les autres gardent la leur,
   donc aucune ne disparait tout a fait. */
@media (hover:hover){
  /* Les autres se resserrent pendant que la survolee s'ouvre : sans ca,
     c'est la case entiere qui s'elargit et la page bouge. */
  .fgb-accordeon:hover > a{flex-basis:14%}
  .fgb-accordeon > a:hover,
  .fgb-accordeon > a:focus-within{flex-basis:44%}
}
.fgb-accordeon > a:focus-visible{outline:2px solid var(--brique);outline-offset:3px}
/* Le nom apparait sur la piece ouverte, et sur elle seule : sur cinq
   panneaux etroits, cinq legendes se chevauchent. */
.fgb-accordeon .fgb-nom{position:absolute;left:0;right:0;bottom:0;z-index:1;
  padding:var(--pad);
  background:linear-gradient(to top,
    color-mix(in srgb,var(--ox) 88%,transparent),transparent);
  color:var(--on-ox);font-family:var(--serif);font-size:var(--t-lede);
  line-height:1.1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  opacity:0;transition:opacity .3s var(--ease)}
@media (hover:hover){
  .fgb-accordeon > a:hover .fgb-nom,
  .fgb-accordeon > a:focus-within .fgb-nom{opacity:1}
}
@supports not (background:color-mix(in srgb,red 50%,transparent)){
  .fgb-accordeon .fgb-nom{background:linear-gradient(to top,var(--ox),transparent)}
}
/* Sans survol, une grille de photos — et RIEN d'autre.
   Le nom s'affichait sur chaque vignette : « on a besoin uniquement des
   photos » vaut ici comme ailleurs, et cinq legendes empilees sur un
   telephone, c'est du bruit. Il reste dans le balisage pour les lecteurs
   d'ecran, masque a l'oeil seul. */
@media (hover:none),(max-width:760px){
  .fgb-accordeon{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
    min-height:0;contain:none}
  .fgb-accordeon > a{aspect-ratio:4/5;transition:none}
  .fgb-accordeon .fgb-nom{position:absolute;width:1px;height:1px;margin:-1px;
    padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;
    background:none;opacity:1}
}
@media (prefers-reduced-motion:reduce){
  .fgb-accordeon > a{transition:none}
}

.fgb-liste{padding:var(--pad)}
.fgb-item{display:block;padding-block:16px}
.fgb-item + .fgb-item{border-top:2px solid var(--line)}
.fgb-item-tete{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem}
.fgb-item h3{font-family:var(--sans);font-size:var(--t-item);font-weight:500;
  letter-spacing:-.01em}
.fgb-item .fgb-fleche{flex:none;width:26px;height:26px;
  transition:transform .3s var(--ease)}
.fgb-item:hover .fgb-fleche{transform:translate(3px,-3px)}
.fgb-item figure{margin:16px 0 0;border-radius:var(--rayon-img);overflow:hidden;
  aspect-ratio:399/269;background:var(--tuile)}
.fgb-item figure img{width:100%;height:100%;object-fit:cover}
.fgb-item--vedette{display:flex;flex-direction:column;flex:1 1 auto;min-height:0}
.fgb-item--vedette figure{flex:1 1 auto;aspect-ratio:auto;min-height:140px}
.fgb-liste-pied{margin-top:auto;padding-top:16px;border-top:2px solid var(--line);
  font-size:var(--t-petit);letter-spacing:.06em;text-transform:uppercase;
  color:var(--encre-doux)}
.fgb-liste-pied:hover{color:var(--encre)}
/* Le meme lien, sans le filet : sous un accordeon de photos, le trait ne
   separe plus rien, il barre le bas de la case. */
.fgb-liste-lien{margin-top:var(--pad);font-size:var(--t-petit);letter-spacing:.06em;
  text-transform:uppercase;color:var(--encre-doux);align-self:flex-start}
.fgb-liste-lien:hover{color:var(--brique)}

/* La colonne qui empile deux cases sur la hauteur de deux rangées.
   minmax(0,1fr) à CHAQUE étage : sans lui, une hauteur en pourcentage
   retombe sur la hauteur du contenu et la case ne s'étire pas. */
.fgb-colonne{display:grid;grid-template-rows:minmax(0,1fr) auto;gap:var(--gout);
  align-self:stretch}

/* ── LES PHOTOS ──────────────────────────────────────────────────── */
.fgb-photo{border-radius:var(--rayon);overflow:hidden;background:var(--case);margin:0;
  align-self:stretch;min-height:220px}
.fgb-photo img{width:100%;height:100%;object-fit:cover}
.fgb-photo--haute{aspect-ratio:4/5}
.fgb-photo--large{aspect-ratio:16/10}
/* La bande large de la boutique : une bande, pas un bandeau. 21/6 est assez
   plat pour accompagner sans concurrencer l'entree juste au-dessus. */
.fgb-bande-image{aspect-ratio:21/6;min-height:0}
@media (max-width:760px){ .fgb-bande-image{aspect-ratio:16/9} }

/* Une pièce du catalogue : la photo, et rien d'autre.
   « On a besoin uniquement des photos. » Le titre reste dans le balisage,
   masqué à l'œil seul — un lien sans intitulé n'existe pas pour un lecteur
   d'écran. */
.fgb-piece{padding:0;overflow:hidden;background:var(--tuile)}
.fgb-piece img{width:100%;aspect-ratio:4/5;object-fit:cover;
  transition:transform .6s var(--ease)}
.fgb-piece:hover img{transform:scale(1.03)}

/* ── LES TROIS DENSITES DU CATALOGUE ──────────────────────────────────
   Deux facons de regarder un catalogue de 120 pieces : une piece a la fois,
   ou l'ensemble d'un coup d'oeil. Le choix se garde d'une page a l'autre.

   La densite ne change QUE le nombre de colonnes qu'une piece occupe : la
   case, le rayon, l'ecart et le survol ne bougent pas. C'est la meme grille,
   regardee de plus ou moins loin. */
.fgb-bento[data-densite="compact"] .fgb-piece{grid-column:span 3}
.fgb-bento[data-densite="compact"] .fgb-piece img{aspect-ratio:1}
.fgb-bento[data-densite="planche"] .fgb-piece{grid-column:span 2}
.fgb-bento[data-densite="planche"] .fgb-piece img{aspect-ratio:1}
/* Le rang, quand la vignette devient trop petite pour le porter. */
.fgb-bento[data-densite="compact"] .fgb-rang,
.fgb-bento[data-densite="planche"] .fgb-rang{display:none}
@media (max-width:1200px){
  .fgb-bento[data-densite="compact"] .fgb-piece{grid-column:span 4}
  .fgb-bento[data-densite="planche"] .fgb-piece{grid-column:span 3}
}
@media (max-width:760px){
  .fgb-bento[data-densite="compact"] .fgb-piece,
  .fgb-bento[data-densite="planche"] .fgb-piece{grid-column:span 6}
}

/* Le numero d'ordre, pose sur la photo. Il dit qu'on parcourt une SUITE,
   pas un tas — et il donne un repere quand on revient sur la page. */
.fgb-rang{position:absolute;top:12px;left:12px;z-index:1;
  padding:2px 8px;border-radius:999px;
  background:color-mix(in srgb,var(--creme) 82%,transparent);
  color:var(--encre);font-size:var(--t-micro);font-weight:600;
  font-variant-numeric:tabular-nums}
@supports not (background:color-mix(in srgb,red 50%,transparent)){
  .fgb-rang{background:var(--creme)}
}

/* Les commandes de densite : les memes pastilles que les filtres, avec
   leur pictogramme. */
.fgb-densite{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap}
.fgb-densite p{font-size:var(--t-micro);letter-spacing:.14em;
  text-transform:uppercase;color:var(--olive-txt);margin-right:.4rem}
.fgb-densite button svg{width:14px;height:14px;fill:currentColor}

/* Le bandeau de prevenance : des photos de poitrine arrivaient au fil du
   defilement, sans prevenir. Il n'a de sens que si des photos sont
   reellement floutees. */
.fgb-prevenance{flex-direction:row;align-items:center;justify-content:space-between;
  gap:1rem;flex-wrap:wrap}
.fgb-prevenance p{font-weight:300;max-width:60ch}

/* Le compte de ce qui est A L'ECRAN — pas de ce qui existe en base. */
.fgb-compte{font-size:var(--t-micro);letter-spacing:.12em;text-transform:uppercase;
  color:var(--encre-doux);font-variant-numeric:tabular-nums}

/* Un flash : la photo, son nom, et les deux actions. */
.fgb-flash{gap:14px}
.fgb-flash figure{margin:0;border-radius:var(--rayon-img);overflow:hidden;
  aspect-ratio:4/5;background:var(--tuile)}
.fgb-flash figure img{width:100%;height:100%;object-fit:cover}
.fgb-flash h3{font-family:var(--sans);font-size:var(--t-carte);font-weight:500}

/* ── LA PLANCHE DE MOTIFS ────────────────────────────────────────────
   Huit de front sur grand ecran. Ce compte doit rester egal a celui de la
   requete qui les charge — un neuvieme carre seul sur une deuxieme ligne
   avait ete signale.

   Elle se fait GLISSER a l'horizontale quand il y en a plus que la rangee
   n'en tient : une planche de trente motifs sur quatre rangees, ce n'est
   plus une planche, c'est une page. `scroll-snap` fait s'arreter le
   glissement sur un motif entier plutot qu'au milieu de deux. */
/* ── LA PLANCHE DE MOTIFS ────────────────────────────────────────────
   C'était une PELLICULE : des carrés de 88 px, sans nom, dans une barre de
   défilement horizontale. On ne pouvait ni distinguer un motif d'un autre,
   ni savoir combien il y en avait, ni comment il s'appelait. Ce n'était pas
   une présentation, c'était un rangement.

   Chaque motif est maintenant une CARTE : le dessin sur son papier, le nom
   dessous, et toute la carte est le lien vers l'essayage. Les cartes
   s'alignent sur la grille du bento — six de front — et passent à la ligne
   au lieu de disparaître à droite.

   Le papier ne suit pas le thème. Un motif est un trait d'encre sombre sur
   fond transparent : sur une case sombre il devenait invisible. Ce fond
   n'est pas une couleur d'interface, c'est le support sur lequel le motif
   est dessiné — il reste clair dans les deux modes. */
/* La planche s'aligne sur la case qui l'accueille, quelle que soit sa
   largeur : elle vit tantôt dans une case pleine largeur, tantôt dans une
   case de huit colonnes. Un nombre de colonnes ÉCRIT aurait donné des tuiles
   de tailles différentes d'une page à l'autre — c'est la régularité du pas
   qui fait qu'une planche se lit comme une planche. */
.fgb-motifs{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));
  gap:var(--gout);margin:0;padding:0;list-style:none}
.fgb-motifs > li{min-width:0}

.fgb-motif{display:flex;flex-direction:column;gap:10px;text-decoration:none;
  color:inherit}
/* La plaque : le papier du motif. Le rayon est celui d'une image DANS une
   case — 16 px — pas celui d'une case, parce que c'en est une. */
.fgb-motif .fgb-plaque{position:relative;aspect-ratio:1;border-radius:var(--rayon-img);
  background:#f4f1e6;border:1px solid var(--line);overflow:hidden;
  transition:transform .3s var(--ease),box-shadow .3s var(--ease),
    border-color .3s var(--ease)}
.fgb-motif img{width:100%;height:100%;object-fit:contain;padding:14%;
  display:block}
.fgb-motif:hover .fgb-plaque{transform:translateY(-3px);border-color:var(--brique);
  box-shadow:0 10px 24px rgba(0,0,0,.14)}
.fgb-motif:focus-visible{outline:none}
.fgb-motif:focus-visible .fgb-plaque{outline:2px solid var(--brique);outline-offset:3px}

/* Le nom : deux lignes au plus, et il ne pousse jamais la carte voisine.
   Sans nom, quinze rosaces se ressemblent toutes ; avec un nom tronqué au
   milieu, on ne sait toujours pas laquelle on regarde. */
.fgb-motif b{font-weight:500;font-size:var(--t-micro);letter-spacing:.08em;
  text-transform:uppercase;color:var(--encre-doux);line-height:1.35;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden}
.fgb-motif:hover b{color:var(--encre)}

/* L'emplacement vide, quand rien n'est encore publié : la forme de la
   planche se voit, donc on comprend ce qui doit venir là. */
.fgb-motifs li:empty{aspect-ratio:1;border-radius:var(--rayon-img);
  background:#f4f1e6;border:1px dashed var(--line);opacity:.5}

/* ── LES BLOCS DE CONTENU ────────────────────────────────────────── */
/* Une liste de faits : atelier, horaires, tarifs. */
.fgb-faits{margin:0}
.fgb-faits dt{margin-top:16px;font-size:var(--t-micro);letter-spacing:.14em;
  text-transform:uppercase;color:var(--olive-txt)}
.fgb-faits dt:first-child{margin-top:0}
.fgb-faits dd{margin:3px 0 0;font-size:var(--t-fait);font-weight:300}

/* Les étapes numérotées : le chiffre est un ornement, pas un titre. */
.fgb-etapes{display:grid;gap:20px}
.fgb-etapes li{display:grid;grid-template-columns:auto 1fr;gap:.2rem 1rem}
.fgb-etapes .fgb-num{font-family:var(--serif);font-size:var(--t-h3);color:var(--brique);
  grid-row:span 2;line-height:1}
.fgb-etapes h3{font-size:var(--t-lede);font-weight:600}
.fgb-etapes p{font-weight:300;color:var(--encre-doux)}

/* La foire aux questions : un <details> ne retire rien du HTML — le
   référencement voit la page entière, la personne voit une page courte. */
.fgb-faq summary{display:flex;align-items:center;justify-content:space-between;
  gap:1rem;min-height:56px;cursor:pointer;list-style:none;
  font-size:var(--t-lede);font-weight:500}
.fgb-faq summary::-webkit-details-marker{display:none}
.fgb-faq summary::after{content:"+";font-family:var(--serif);font-size:1.6em;
  color:var(--brique);transition:transform .3s var(--ease)}
.fgb-faq details[open] summary::after{transform:rotate(45deg)}
.fgb-faq details{border-bottom:2px solid var(--line)}
.fgb-faq details:last-child{border-bottom:0}
.fgb-faq p{padding-bottom:20px;font-weight:300;max-width:60ch;color:var(--encre-doux)}

/* Le formulaire. Il ne sert qu'au séminaire : les demandes de tatouage
   partent sur encre.fgb-me, et il n'y en a donc qu'un sur tout le site. */
.fgb-form{display:grid;gap:18px}
.fgb-form-rang{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(15rem,100%),1fr));
  gap:18px}
.fgb-form label{display:grid;gap:6px;font-size:var(--t-micro);letter-spacing:.12em;
  text-transform:uppercase;color:var(--olive-txt)}
.fgb-form input,.fgb-form textarea,.fgb-form select{width:100%;min-height:52px;padding:14px 16px;
  border:1px solid var(--line);border-radius:12px;background:var(--creme);
  color:var(--encre);font-family:var(--sans);font-size:var(--t-corps)}
.fgb-form textarea{min-height:130px;resize:vertical}
.fgb-form input:focus-visible,.fgb-form textarea:focus-visible{border-color:var(--brique)}

/* Les pastilles de filtre : la seule place de l'olive en aplat. */
/* ── LE CHOIX DE TAILLE, SUR LA FICHE PRODUIT ────────────────────────
   Des boutons radio déguisés en pastilles. La case ronde du navigateur est
   masquée mais reste là : elle porte le clavier, le focus et le groupe. On
   n'a donc rien à réécrire en JavaScript pour que les flèches fonctionnent.
   Les pastilles font 44 px de haut — c'est une cible tactile, pas une
   décoration. */
.fgb-tailles{margin:0 0 20px;padding:0;border:0}
.fgb-tailles legend{padding:0 0 8px;font-size:var(--t-micro);letter-spacing:.14em;
  text-transform:uppercase;color:var(--encre-doux)}
.fgb-tailles-choix{display:flex;flex-wrap:wrap;gap:.5rem}
.fgb-taille{position:relative;display:inline-flex}
.fgb-taille input{position:absolute;inset:0;width:100%;height:100%;
  margin:0;opacity:0;cursor:pointer}
.fgb-taille span{display:inline-flex;align-items:center;min-height:44px;
  padding:0 16px;border:1px solid var(--line);border-radius:999px;
  font-variant-numeric:tabular-nums;transition:background .2s var(--ease),
  border-color .2s var(--ease)}
.fgb-taille:hover span{border-color:var(--encre-doux)}
/* Le diamètre retenu : un aplat plein. Un simple changement de bordure ne se
   voit pas assez quand douze pastilles se suivent. */
.fgb-taille input:checked + span{background:var(--olive);color:var(--on-olive);
  border-color:var(--olive)}
/* Le focus vient du bouton radio masqué : sans cette règle il serait
   invisible, et le choix deviendrait impraticable au clavier. */
.fgb-taille input:focus-visible + span{outline:2px solid var(--brique);
  outline-offset:2px}

.fgb-filtres{display:flex;flex-wrap:wrap;gap:.5rem}
/* L'ESPACE ENTRE LE NOM ET LE COMPTE.

   L'étiquette sortait « Objets5 », collée. Le balisage contient pourtant un
   retour à la ligne entre le nom et le nombre — mais un conteneur FLEX ne
   rend pas les nœuds de texte qui ne contiennent que des blancs. L'espace
   existait dans le HTML et disparaissait à l'affichage.

   `gap` le rétablit, et il le rétablit partout : c'est le conteneur qui
   espace ses enfants, pas une espace insécable ajoutée à la main dans
   chaque gabarit. */
.fgb-filtre{display:inline-flex;align-items:center;gap:.5em;min-height:44px;padding:0 16px;
  border-radius:999px;border:1px solid var(--line);background:transparent;
  cursor:pointer;font-family:var(--sans);font-size:var(--t-petit);
  letter-spacing:.06em;text-transform:uppercase;color:var(--encre);
  transition:background .2s var(--ease),color .2s var(--ease)}
.fgb-filtre:hover{background:var(--line)}
.fgb-filtre[aria-pressed="true"]{background:var(--olive);color:var(--on-olive);
  border-color:var(--olive)}

/* Un produit de la boutique. Le prix a le poids d'un titre : c'est
   l'information qu'on cherche. */
.fgb-produit{gap:12px}
.fgb-produit figure{margin:0;border-radius:var(--rayon-img);overflow:hidden;
  aspect-ratio:1;background:var(--tuile)}
.fgb-produit figure img{width:100%;height:100%;object-fit:cover}
.fgb-produit h3{font-family:var(--sans);font-size:var(--t-lede);font-weight:500}
.fgb-produit .fgb-taille{font-size:var(--t-micro);letter-spacing:.1em;text-transform:uppercase;
  color:var(--encre-doux)}
.fgb-produit .fgb-prix{font-size:var(--t-lede);font-weight:600;font-variant-numeric:tabular-nums}
/* `.stock` appartient a WooCommerce : il le pose lui-meme sur ses fiches.
   Le nom n'etait donc pas libre, et le prefixe l'aurait fait viser une
   classe qui n'existe pas. C'est la quatrieme collision du projet apres
   .fg-champ, .fg-rangee et .fg-vue — on verifie AVANT d'inventer un nom. */
.fgb-produit .fgb-dispo{font-size:var(--t-micro);letter-spacing:.1em;
  text-transform:uppercase;color:var(--olive-txt)}

/* La scène du studio 3D. Elle est plein cadre, sans colonne permanente :
   les commandes viendront autour du motif sélectionné. */
/* LA CASE N'IMPOSE PAS SA COULEUR À CE QU'ELLE CONTIENT.

   Elle déclarait `color:var(--on-ox)` — du crème — et l'extension du studio
   vit dedans. En mode SOMBRE tout allait : son panneau est sombre, le crème
   se lit. En mode CLAIR son panneau devient crème lui aussi, et tout texte
   qui ne fixait pas sa propre couleur héritait du crème de la case. Crème
   sur crème : mesuré à 1,03:1 sur douze libellés du panneau.

   La couleur reste donc sur les seuls éléments décoratifs de la case, qui la
   déclarent déjà chacun. Ce qui est posé dedans — le studio — s'habille
   lui-même. */
.fgb-scene{min-height:min(62vh,560px);background:var(--ox);
  align-items:center;justify-content:center;overflow:hidden}
/* Le texte propre à la case vide, quand le studio n'est pas encore là. */
.fgb-scene > :where(h1,h2,h3,p,span,b):not(.fgb-fgs *){color:var(--on-ox)}
.fgb-scene .fgb-silhouette{width:min(190px,34vw);color:var(--on-ox);opacity:.5}
.fgb-scene .fgb-aide{position:absolute;left:0;right:0;bottom:var(--pad);text-align:center;
  font-size:var(--t-petit);letter-spacing:.06em;color:var(--on-ox);opacity:.75}
/* La bande de flashes reste visible en permanence : c'est aussi sa vitrine. */
.fgb-bande{display:flex;gap:12px;overflow-x:auto;padding-bottom:4px;
  scrollbar-width:thin}
.fgb-bande li{flex:none;width:96px;aspect-ratio:4/5;border-radius:var(--rayon-img);
  overflow:hidden;background:var(--tuile)}
.fgb-bande img{width:100%;height:100%;object-fit:cover}
/* Un motif est un DESSIN a fond transparent, pas une photo : il se pose sur
   le papier au lieu d'etre recadre, et il respire. */
.fgb-bande--motif{aspect-ratio:1;background:var(--case)}
.fgb-bande--motif img{object-fit:contain;padding:12%}

/* ── LE PLAN ─────────────────────────────────────────────────────────
   Il est AFFICHE depuis le 03/09, a sa demande, avec un bouton d'itineraire.

   Ce que ca implique et qu'il faut assumer : une carte integree est un appel
   reseau vers un service exterieur, ce que le reste du site s'interdit.
   OpenStreetMap est retenu plutot que Google Maps — il ne depose aucun
   cookie publicitaire — et le cadre est en loading="lazy", donc il ne part
   que si on descend jusqu'a lui.

   La case n'a plus de marge interieure : la carte va d'un bord a l'autre,
   et c'est la bande du bas qui porte l'adresse et le bouton. Une carte
   encadree de 24 px de creme a l'air d'une capture d'ecran collee. */
/* LE PLAN NE PREND PAS LA MOLETTE.

   Une carte intégrée écoute le défilement : la molette y zoome au lieu de
   faire descendre la page. On arrive dessus, la page se bloque, et il faut
   contourner la case à la souris pour continuer. « Ça casse le rythme. »

   Le cadre ne reçoit donc plus les événements de pointeur : la molette
   traverse et la page défile normalement. Pour manipuler la carte, le lien
   d'itinéraire ouvre le plan en grand, là où on a la place de le faire. */
.fgb-plan .fgb-carte iframe{pointer-events:none}
.fgb-plan{position:relative;min-height:340px;padding:0;overflow:hidden;
  background:var(--tuile);justify-content:flex-end}
/* Sans carte saisie, la case redevient une invitation centree. */
.fgb-plan:not(:has(.fgb-carte)){padding:var(--pad);align-items:center;
  justify-content:center;gap:.8rem;text-align:center}
.fgb-carte{flex:1 1 auto;min-height:240px;display:block}
/* ── LA CARTE, AUX COULEURS DU SITE ───────────────────────────────────
   OpenStreetMap rend une carte bleu-vert-gris standard. Posee dans une page
   creme et brique, elle a l'air d'une capture d'ecran collee : c'est le seul
   endroit du site qui ne parle pas la meme langue.

   On ne peut pas lui demander une autre palette — c'est une image servie par
   un autre serveur. On peut, en revanche, la TEINTER, et c'est ce que font
   les trois filtres :

     · `saturate(.35)` retire l'essentiel des bleus et des verts vifs sans
       aplatir la carte : les routes restent distinctes des parcs ;
     · `sepia(.45)` la fait basculer vers le chaud, du cote du papier ;
     · `hue-rotate(-12deg)` amene ce chaud vers la brique plutot que vers le
       jaune — et le jaune est exclu de cette palette.

   Le contraste est remonte d'un cheveu pour compenser la desaturation, sinon
   les noms de rue deviennent illisibles. C'est le point de vigilance : une
   carte qu'on ne peut plus lire n'est plus une carte. */
.fgb-carte iframe{width:100%;height:100%;min-height:240px;border:0;display:block;
  filter:saturate(.35) sepia(.45) hue-rotate(-12deg) contrast(1.06)}
/* En sombre, on inverse la clarte SANS inverser les teintes : une carte
   inversee betement rend l'eau blanche et les batiments noirs. On assombrit
   et on reduit le contraste, comme un fond de plan de nuit. */
:root[data-theme="sombre"] .fgb-carte iframe,
:root:not([data-theme="clair"]) .fgb-carte iframe{
  filter:saturate(.3) sepia(.5) hue-rotate(-12deg) brightness(.72) contrast(.95)}
@media (prefers-reduced-motion:no-preference){
  .fgb-carte iframe{transition:filter .3s var(--ease)}
}
.fgb-plan-pied{display:flex;align-items:center;justify-content:space-between;
  gap:1rem;flex-wrap:wrap;padding:var(--pad);background:var(--tuile)}
.fgb-adresse{margin-top:6px;font-weight:300;line-height:1.45}

/* Deux colonnes de lecture pour un texte long, dans une case pleine
   largeur. La ligne reste courte sans que la case soit etroite.
   Sous 900 px, une seule colonne : deux colonnes de 30 caracteres, ce n'est
   plus de la lecture. */
.fgb-deux-colonnes{max-width:none;columns:2;column-gap:calc(var(--gout) * 2)}
.fgb-deux-colonnes > :first-child{margin-top:0}
@media (max-width:900px){ .fgb-deux-colonnes{columns:1} }

/* ── UNE CASE DE LECTURE AEREE ───────────────────────────────────────
   Un texte long dans une case pleine largeur se lit mal : la ligne fait
   1300 px, l'oeil rate la ligne suivante en revenant a la marge, et les
   sections s'enchainent sans respiration.

   Deux colonnes de lecture, un filet entre elles, et de l'air en haut de
   chaque section. Le texte se picore au lieu de se subir. */
.fgb-lecture{padding:var(--pad-l)}
.fgb-lecture .fgb-prose{max-width:none;columns:2;column-gap:calc(var(--gout) * 2);
  column-rule:1px solid var(--line)}
.fgb-lecture .fgb-prose > *{break-inside:avoid-column}
/* Un titre de section ne se coupe jamais de son premier paragraphe. */
.fgb-lecture .fgb-prose :where(h2,h3){break-after:avoid-column;
  break-inside:avoid-column}
.fgb-lecture .fgb-prose h2{margin-top:2.2em}
.fgb-lecture .fgb-prose > :first-child{margin-top:0}
@media (max-width:1000px){
  .fgb-lecture .fgb-prose{columns:1;column-rule:0}
}

/* ── UNE CASE AVEC UNE IMAGE DERRIÈRE LE TEXTE ───────────────────────
   Poser du texte sur une photo, c'est prendre le risque qu'il devienne
   illisible dès que la photo change — et sur ce site, c'est elle qui
   choisit les photos depuis WordPress. On ne peut donc pas se fier au
   contraste de l'image : il faut le GARANTIR.

   Le voile fait ça. Un dégradé qui part de l'oxblood opaque en bas — là où
   le texte se pose — vers presque transparent en haut, là où la photo doit
   rester visible. Le texte est toujours au-dessus d'une surface dont on
   connaît la couleur, quelle que soit l'image.

   L'ombre portée n'est PAS décorative ici : elle détache la case de son
   voisin quand les deux portent une image, et sans elle on ne voit plus où
   l'une finit et l'autre commence. */
.fgb-case--image{position:relative;overflow:hidden;color:var(--on-ox);
  box-shadow:0 12px 32px rgb(0 0 0 / .22)}
.fgb-case--image > .fgb-fond{position:absolute;inset:0;z-index:0;margin:0}
.fgb-case--image > .fgb-fond img,
.fgb-case--image > .fgb-fond video{width:100%;height:100%;object-fit:cover;display:block}
/* La vidéo passe DEVANT l'image : quand les deux sont posées, l'image sert
   d'affiche le temps que la vidéo arrive, puis s'efface derrière elle. */
.fgb-case--image > .fgb-fond video{position:absolute;inset:0}
/* Le lecteur YouTube : il ne sait pas se recadrer comme une image, il garde
   son format 16/9. On l'agrandit donc jusqu'à couvrir la case, quitte à
   déborder — un lecteur plus petit que sa case laisserait deux bandes. */
.fgb-fond-youtube{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:max(100%,177.78vh);height:max(100%,56.25vw);border:0;pointer-events:none}
/* LE VOILE NE COUVRE QUE LE TEXTE.

   Il montait à 62 % d'oxblood au MILIEU de la case et à 18 % tout en haut :
   sur une case dont le texte occupe le bas, la photo passait sous un lavis
   sur toute sa hauteur. On posait une image et on voyait l'aplat — « mettre
   des images sur le fond du bento 1 ne fonctionne pas, l'aplat reste là ».
   L'image était bien là ; c'est le voile qui la mangeait.

   Il descend donc à ZÉRO au-dessus de 62 % de la hauteur. Le haut de la case
   montre la photo telle quelle, le bas garde de quoi lire le titre. Deux
   arrêts pour le dégradé, un troisième pour couper net : au-delà, le voile
   n'existe plus. */
.fgb-case--image::after{content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(to top,
    color-mix(in srgb,var(--ox) 88%,transparent) 0%,
    color-mix(in srgb,var(--ox) 46%,transparent) 34%,
    transparent 62%)}
@supports not (background:color-mix(in srgb,red 50%,transparent)){
  .fgb-case--image::after{background:linear-gradient(to top,var(--ox),transparent)}
}
.fgb-case--image > :not(.fgb-fond){position:relative;z-index:2}
.fgb-case--image .fgb-etiq{color:var(--on-ox);opacity:.8}
.fgb-case--image .fgb-prose,.fgb-case--image .fgb-doux{color:var(--on-ox)}

/* La même case, mais l'image À CÔTÉ du texte plutôt que derrière.
   C'est ce qu'il faut quand le texte est long : une colonne d'image, une
   colonne de lecture, et aucun risque de contraste. */
.fgb-case--duo{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);
  gap:var(--pad);padding:0;overflow:hidden;align-items:stretch}
.fgb-case--duo > .fgb-fond{margin:0;min-height:220px}
.fgb-case--duo > .fgb-fond img{width:100%;height:100%;object-fit:cover;display:block}
.fgb-case--duo > .fgb-duo-texte{display:flex;flex-direction:column;
  padding:var(--pad) var(--pad) var(--pad) 0}
@media (max-width:760px){
  .fgb-case--duo{grid-template-columns:minmax(0,1fr)}
  .fgb-case--duo > .fgb-fond{aspect-ratio:16/10;min-height:0}
  .fgb-case--duo > .fgb-duo-texte{padding:var(--pad)}
}

/* ═══ LA BOUTIQUE ════════════════════════════════════════════════════
   WooCommerce ecrit son propre balisage pour le panier, la commande et le
   compte. On ne le reecrit pas — c'est un tunnel d'achat qui fonctionne —
   mais il herite du cadre du site : meme fond, meme rayon, memes couleurs.

   Le point critique est le MODE SOMBRE. WooCommerce suppose une page
   claire : ses tableaux, ses champs et ses totaux sortent en gris sur
   blanc. Sur un fond presque noir, le sous-total devenait invisible et la
   barre de filtres apparaissait comme un grand rectangle blanc. Chaque
   regle ci-dessous corrige un contraste MESURE, pas une supposition. */

/* La grille de produits herite du bento : les cartes d'une meme rangee se
   terminent sur la meme ligne. Mesure avant correction : 832 px pour une
   carte, 656 pour ses voisines. */
.fgb-produit figure{position:relative;flex:none}
.fgb-produit .fgb-marqueur{position:absolute;top:10px;left:10px;
  padding:3px 10px;border-radius:999px;background:var(--ox);
  color:var(--on-ox);font-size:var(--t-micro);letter-spacing:.08em;
  text-transform:uppercase}
.fgb-produit h3 a{display:block}
.fgb-produit h3 a:hover{color:var(--brique)}
/* Le prix a le poids d'un titre : c'est l'information qu'on cherche.
   WooCommerce l'enveloppe dans des <span> et des <bdi> — on parle donc a
   ce qu'il produit, pas a ce qu'on voudrait qu'il produise. */
.fgb-produit .fgb-prix bdi,.fgb-produit .fgb-prix span{color:inherit;font:inherit}
.fgb-produit .fgb-prix del{opacity:.55;font-size:.86em;margin-right:.4em}
.fgb-produit .fgb-prix ins{text-decoration:none}

/* La fiche produit. */
.fgb-galerie{padding:var(--pad);overflow:hidden}
.fgb-galerie img{border-radius:var(--rayon-img)}
.fgb-galerie .flex-control-thumbs{display:flex;gap:8px;margin-top:12px;
  padding:0;list-style:none;flex-wrap:wrap}
.fgb-galerie .flex-control-thumbs li{width:64px}
.fgb-galerie .flex-control-thumbs img{border-radius:10px;cursor:pointer;
  opacity:.6;transition:opacity .2s var(--ease)}
.fgb-galerie .flex-control-thumbs img:hover,
.fgb-galerie .flex-control-thumbs img.flex-active{opacity:1}
.fgb-fiche h1{font-size:var(--t-h2);line-height:1.05}
.fgb-fiche .fgb-prix{margin-top:10px;font-size:var(--t-h3);font-weight:600;
  font-variant-numeric:tabular-nums}
.fgb-fiche .fgb-prix bdi,.fgb-fiche .fgb-prix span{color:inherit;font:inherit}

/* ── LE CHOIX DE LA TAILLE ───────────────────────────────────────────
   Une taille — 6, 8, 10 … 25 mm — est une VARIATION du produit, pas un
   produit a part. C'est WooCommerce qui rend ce bloc ; on l'habille.
   Ajouter une taille plus tard ne demandera donc aucun code. */
.fgb-achat{margin-top:20px}
.fgb-achat .variations{width:100%;border-collapse:collapse;margin-bottom:14px}
.fgb-achat .variations th,.fgb-achat .variations td{display:block;text-align:left;
  padding:0;border:0}
.fgb-achat .variations th label{font-size:var(--t-micro);letter-spacing:.12em;
  text-transform:uppercase;color:currentColor;opacity:.75}
.fgb-achat .variations td{padding-top:6px;padding-bottom:14px}
.fgb-achat select,.fgb-achat input[type="number"]{width:100%;min-height:48px;
  padding:10px 14px;border:1px solid currentColor;border-radius:12px;
  background:transparent;color:inherit;font-family:var(--sans);
  font-size:var(--t-corps)}
.fgb-achat select option{color:var(--encre);background:var(--creme)}
.fgb-achat .reset_variations{display:inline-block;margin-bottom:10px;
  font-size:var(--t-petit);opacity:.8}
.fgb-achat .quantity{display:inline-flex;align-items:center;margin-right:10px}
.fgb-achat .quantity input{width:5.5rem;text-align:center}
/* Le bouton d'ajout : c'est l'action de la page. */
.fgb-achat button[type="submit"],.fgb-achat .button{display:inline-flex;
  align-items:center;justify-content:center;min-height:52px;padding:0 26px;
  border:0;border-radius:999px;cursor:pointer;background:var(--brique);
  color:var(--on-ox);font-family:var(--sans);font-size:var(--t-petit);
  font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  transition:transform var(--dur) var(--ease)}
.fgb-achat button[type="submit"]:hover,.fgb-achat .button:hover{transform:translateY(-2px)}
.fgb-achat .woocommerce-variation-price{margin-bottom:12px;font-size:var(--t-lede);
  font-weight:600}
.fgb-achat .stock{margin:0 0 12px;font-size:var(--t-petit);opacity:.85}

/* Le tri du catalogue, a droite des filtres. */
.fgb-tri select{min-height:44px;padding:0 14px;border:1px solid var(--line);
  border-radius:999px;background:var(--case);color:var(--encre);
  font-family:var(--sans);font-size:var(--t-petit)}

.fgb-pagination{grid-column:1/-1;display:flex;justify-content:center}
.fgb-pagination .nav-links{display:flex;gap:.5rem;flex-wrap:wrap}
.fgb-pagination a,.fgb-pagination span{display:grid;place-items:center;
  min-width:44px;min-height:44px;padding:0 12px;border-radius:999px;
  background:var(--case);color:var(--encre);font-variant-numeric:tabular-nums}
.fgb-pagination .current{background:var(--olive);color:var(--on-olive)}

/* Les messages de WooCommerce. */
.fgb-notices ul{margin:0;padding:0}
.fgb-notices .woocommerce-message,.fgb-notices .woocommerce-info,
.fgb-notices .woocommerce-error{margin:0;padding:0;background:none;border:0;
  color:inherit;font-weight:300}
.fgb-notices a{border-bottom:1px solid currentColor}

/* ── PANIER, COMMANDE, COMPTE ────────────────────────────────────────
   WooCommerce rend ces pages lui-meme. On lui donne le cadre du site, et
   on repare ses contrastes en mode sombre : sans ces regles, le sous-total
   et les libelles de champs sortaient en gris clair sur gris clair, donc
   illisibles. C'est ce que montrait la capture du panier. */
.woocommerce-page main,.woocommerce-cart main,.woocommerce-checkout main{
  color:var(--encre)}
.woo :where(table,th,td){border-color:var(--line);color:var(--encre)}
.woo :where(h2,h3){font-family:var(--serif);font-weight:400}
.woo :where(label,th,.woocommerce-Price-amount,bdi,strong,.amount){color:var(--encre)}
.woo :where(input,select,textarea){min-height:48px;padding:10px 14px;
  border:1px solid var(--line);border-radius:12px;background:var(--creme);
  color:var(--encre);font-family:var(--sans);font-size:var(--t-corps)}
.woo :where(input,select,textarea):focus-visible{border-color:var(--brique)}
.woo :where(a.button,button.button,input.button,.checkout-button,
  button[type="submit"]){display:inline-flex;align-items:center;
  justify-content:center;min-height:52px;padding:0 26px;border:0;
  border-radius:999px;cursor:pointer;background:var(--brique);
  color:var(--on-ox);font-family:var(--sans);font-size:var(--t-petit);
  font-weight:600;letter-spacing:.06em;text-transform:uppercase}
.woo .quantity input{max-width:6rem;text-align:center}
.woo .cart_totals,.woo .order-total,.woo .woocommerce-checkout-review-order{
  color:var(--encre)}
/* Le sous-total, en toutes lettres et en contraste plein. C'est le chiffre
   qu'on cherche sur cette page ; il etait le plus efface. */
.woo :where(.order-total,.cart-subtotal,.woocommerce-Price-amount){
  color:var(--encre);font-variant-numeric:tabular-nums}
.woo .order-total :where(th,td,strong,bdi){color:var(--encre);
  font-size:var(--t-lede);font-weight:600}

/* ── LA BOUTIQUE, LE PANIER, LA COMMANDE ─────────────────────────────
   Leur habillage a QUITTÉ cette feuille pour `assets/css/woo.fgb-css`.

   Raison : WooCommerce charge ses propres feuilles APRÈS celle du thème.
   À spécificité égale, c'est la dernière qui gagne — toutes les règles
   écrites ici perdaient sans le dire. Mesuré : une vignette de produit
   restait à 42 px de large, avec le texte du bouton à la verticale, une
   lettre par ligne.

   La feuille `woo.fgb-css` déclare une dépendance à `wc-blocks-style` : elle
   est donc chargée après, et gagne par l'ordre plutôt que par une course
   à la spécificité ou des `!important`. */

/* ── LES AVIS ────────────────────────────────────────────────────────
   Une citation, son étoilement, son prénom. Le prénom vient EN DERNIER : on
   lit l'avis avant de savoir qui le signe, sinon on trie les gens avant de
   les écouter. */
.fgb-avis{justify-content:space-between;gap:16px;margin:0}
.fgb-avis blockquote{margin:0;font-family:var(--serif);font-size:var(--t-lede);
  line-height:1.4;letter-spacing:-.01em}
.fgb-avis figcaption{font-size:var(--t-micro);letter-spacing:.14em;
  text-transform:uppercase;color:var(--encre-doux)}
/* Les étoiles prennent la brique, jamais un jaune : le site n'en a pas.
   Les creuses gardent la même couleur, en retrait — deux couleurs pour une
   même échelle se lisent comme deux informations. */
.fgb-etoiles{color:var(--brique);letter-spacing:.16em;font-size:var(--t-petit)}

/* ── LA PAGE D'ATTENTE ───────────────────────────────────────────────
   Elle n'a ni barre ni pied : rien à parcourir, une seule chose à lire. Son
   bento se centre donc dans la hauteur de l'écran au lieu de se coller en
   haut comme sur une page qu'on descend. */
.fgb-attente{min-height:100dvh;background:var(--creme)}
.fgb-attente-page{min-height:100dvh;display:flex;align-items:center}
.fgb-attente-page > .fgb-bento{width:100%}

/* ── LE PIED DE PAGE ─────────────────────────────────────────────────
   La signature en 150 px prenait un ecran entier pour ne rien dire de plus
   que le logo de l'en-tete. Elle est deposee.

   A la place : trois bandes horizontales de meme nature, separees par un
   filet — la marque, les liens, les mentions. Rien ne domine, tout se lit
   en descendant. Le logo garde sa place mais a SA taille : 34 px, celle
   d'un repere, pas d'une affiche. */
.fgb-pied{grid-column:1/-1;padding:var(--pad);gap:0}
.fgb-pied-haut{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:var(--gout);padding-bottom:26px}

/* LA MARQUE EN BAS.
   Elle était en haut, au-dessus des colonnes de liens. On quitte un site
   sur un nom, pas sur une liste : la marque descend, et c'est la dernière
   chose qu'on voit — sans revenir à la signature de 150 px, qui prenait un
   écran entier.

   Le logo est CONTRAINT en largeur, et c'est le bug corrigé le 03/09 :
   `.fgb-pied-marque img{height:30px}` fixait la hauteur sans borner la largeur.
   Mesuré en ligne : son fichier s'affichait à 1329 × 30 px — un trait blanc
   étiré sur toute la page. Une image de logo garde SES proportions, et on
   ne suppose jamais qu'un fichier est carré. */
.fgb-pied-marque{display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  padding-top:22px;border-top:1px solid var(--line)}
.fgb-pied-marque svg{width:32px;height:32px;color:var(--brique);flex:none}
.fgb-pied-marque .fgb-marque{font-size:var(--t-lede);white-space:nowrap}
.fgb-pied-marque p{flex:1 1 18rem;min-width:0;margin:0;
  font-weight:300;font-size:var(--t-petit);color:var(--encre-doux)}
.fgb-pied h2{margin-bottom:12px;font-size:var(--t-micro);letter-spacing:.14em;
  text-transform:uppercase;color:var(--olive-txt)}
.fgb-pied li{margin-bottom:8px;font-weight:300;font-size:var(--t-petit)}
.fgb-pied li a:hover{color:var(--brique)}
.fgb-pied-bas{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem 1.8rem;
  padding-top:18px;font-size:var(--t-micro);letter-spacing:.08em;
  text-transform:uppercase;color:var(--encre-doux)}
.fgb-pied-bas a:hover{color:var(--brique)}
/* Le dernier element file a droite : une ligne de mentions se lit mieux
   avec deux ancrages qu'avec un seul tas a gauche. */
.fgb-pied-bas > :last-child{margin-left:auto}

/* ── LE LOGO EN IMAGE ────────────────────────────────────────────────
   La marque peut etre une IMAGE plutot que du texte : c'est le fichier
   qu'elle voudra poser. Il garde la hauteur de la ligne quelle que soit
   la largeur du fichier, et le texte reste dans le balisage pour les
   lecteurs d'ecran. */
/* Une image de logo garde ses proportions : hauteur imposée, largeur
   calculée, et un plafond pour qu'un fichier très large ne pousse pas la
   navigation hors de la barre. width:auto ne suffit pas seul — sans
   max-width, un logo panoramique reste panoramique. */
.fgb-marque img,.fgb-pied-marque img{width:auto;max-width:220px;height:34px;
  object-fit:contain}
.fgb-pied-marque img{height:30px}
@media (max-width:760px){
  .fgb-marque img,.fgb-pied-marque img{max-width:150px;height:26px}
}

/* ── CE QUE LA MAQUETTE PORTAIT EN STYLE EN LIGNE ────────────────────
   Ces motifs revenaient d'une page a l'autre, ecrits a la main dans le
   HTML. Un style en ligne ne se modifie pas a un seul endroit — c'est
   exactement ce qu'on cherche a eviter. Ils ont donc un nom. */

/* La bande de liens « Instagram · Encre.fgb-me · Le studio », sous la liste
   de travaux. Trois mots repartis, rien d'autre. */
.fgb-reseaux{flex-direction:row;align-items:center;justify-content:space-around;
  gap:1rem;min-height:101px;flex-wrap:wrap}
.fgb-reseaux a{font-size:var(--t-petit);font-weight:300;letter-spacing:.08em;
  text-transform:uppercase;transition:color .2s var(--ease)}
.fgb-reseaux a:hover{color:var(--brique)}

/* Une case BASSE : celle de la rangee du bas de l'accueil.
   Sans hauteur minimale, une case qui ne porte qu'un paragraphe tombait a
   152 px a cote d'une colonne de 647, et le texte passait sous l'ornement
   d'angle. La valeur suit l'ecran plutot que d'etre figee a 351 px : sur un
   portable, 351 px de case pour trois lignes de texte, c'est du vide. */
.fgb-case--basse{min-height:clamp(220px,25vh,351px)}

/* Le petit ornement pose dans l'angle d'une case de texte.
   La case qui le porte reserve la place : sans ce retrait, le premier
   paragraphe demarrait DERRIERE le dessin. */
.fgb-case:has(> .fgb-coin){padding-top:calc(var(--pad) + 54px)}
.fgb-coin{position:absolute;top:var(--pad);left:var(--pad);
  width:38px;height:38px;color:var(--brique);pointer-events:none}
.fgb-coin svg{width:100%;height:100%}

/* La tete d'une case d'action : la question a gauche, la fleche a droite. */
.fgb-action-tete{display:flex;align-items:flex-start;justify-content:space-between;
  gap:1rem;font-size:var(--t-petit);font-weight:300}
.fgb-action-tete > span{max-width:14ch;opacity:.85}
.fgb-action-tete svg{flex:none;transition:transform .3s var(--ease)}
a.fgb-case:hover .fgb-action-tete svg{transform:translate(4px,-4px)}

/* Un bandeau large et bas : un titre, un texte, un bouton, sur une ligne.
   Il se replie en colonne quand la ligne ne tient plus. */
.fgb-bandeau{flex-direction:row;align-items:center;justify-content:space-between;
  gap:var(--gout);padding:var(--pad);flex-wrap:wrap}
@media (max-width:760px){
  .fgb-bandeau{flex-direction:column;align-items:flex-start}
}

/* Le compte du panier. */
.fgb-compte{position:absolute;top:2px;right:2px;min-width:17px;height:17px;
  padding:0 4px;border-radius:999px;background:var(--brique);
  color:var(--on-ox);font-size:var(--t-nano);font-weight:600;line-height:17px;
  text-align:center;font-variant-numeric:tabular-nums}
.fgb-outils a{position:relative}

/* Le lien d'evitement. Il est hors de l'ecran jusqu'a ce qu'on l'atteigne
   au clavier — c'est la premiere chose que rencontre une personne qui
   n'utilise pas de souris. */
.fgb-skip{position:absolute;left:-9999px;top:0;z-index:80;padding:12px 20px;
  background:var(--brique);color:var(--on-ox);border-radius:0 0 12px 0}
.fgb-skip:focus{left:0}

/* Les mentions legales du pied, quand elles viennent d'un menu WordPress. */
.fgb-pied-legal{display:flex;flex-wrap:wrap;gap:.6rem 1.8rem}

/* ── LE FORMULAIRE ───────────────────────────────────────────────────
   Il garde son balisage — il fonctionne, jeton de securite et piege a
   robots compris — mais ses petits textes etaient illisibles en mode
   sombre : « on ne voit pas trop ce qui est ecrit en petit ».

   La cause : ils heritaient d'un gris pense pour une page claire. Ils
   passent sur le jeton du theme, qui suit le mode. */
.fgb-case :where(.fg-aide,.fg-form-delay,.fg-champ-etiquette,.fg-obligatoire){
  color:var(--encre-doux)}
.fgb-case .fg-aide{font-size:var(--t-petit);line-height:1.45;display:block;
  margin-bottom:6px}
.fgb-case :where(.fg-form,.fg-rangee) label{color:var(--encre)}
.fgb-case .fg-accord{display:flex;align-items:flex-start;gap:.7rem;
  font-weight:300;color:var(--encre-doux)}
.fgb-case .fg-accord input{flex:none;width:22px;height:22px;margin-top:2px;
  accent-color:var(--brique)}
.fgb-case :where(.fg-form input,.fg-form textarea,.fg-form select){
  background:var(--creme);color:var(--encre);border:1px solid var(--line);
  border-radius:12px;min-height:48px;padding:10px 14px;
  font-family:var(--sans);font-size:var(--t-corps)}
.fgb-case .fg-form textarea{min-height:130px}
.fgb-case :where(.fg-form input,.fg-form textarea):focus-visible{
  border-color:var(--brique)}
.fgb-case .fg-form button[type="submit"]{min-height:52px;padding:0 26px;
  border:0;border-radius:999px;cursor:pointer;background:var(--brique);
  color:var(--on-ox);font-family:var(--sans);font-size:var(--t-petit);
  font-weight:600;letter-spacing:.06em;text-transform:uppercase}
.fgb-case .fg-form-notice{padding:14px 16px;border-radius:12px;
  background:var(--tuile);color:var(--encre)}

/* ── LE MOUVEMENT ────────────────────────────────────────────────────
   Piloté par le défilement, en CSS natif : aucune bibliothèque, aucun
   IntersectionObserver, zéro octet de JavaScript.

   L'état par défaut est VISIBLE. La règle est enfermée dans un @supports
   ET dans un @media : si l'un des deux ne passe pas, la case s'affiche
   simplement. C'est l'erreur qui avait fait disparaître des blocs entiers
   sur ce projet — on ne masque que si on peut aussi révéler.

   Le premier bento n'est jamais animé : il est déjà à l'écran au
   chargement, et animer ce qui est déjà là ne produit qu'un clignotement. */
/* LA RÉVÉLATION EST PILOTÉE, ET DÉCALÉE.

   Elle passait par `animation-timeline: view()` : élégant, zéro script —
   mais Safari et Firefox ne le connaissent pas, et sur un site de tatouage
   l'iPhone n'est pas une minorité. La moitié des visiteuses n'avaient donc
   aucune animation. Et surtout : une timeline ne sait pas décaler les cases
   les unes après les autres, or c'est ce décalage qui fait qu'une grille
   s'installe au lieu d'apparaître d'un bloc.

   LA RÈGLE DE SÛRETÉ : le masquage dépend de `html.fgb-anime`, une classe que
   SEUL le script pose. Pas de script, script en erreur, mouvement réduit :
   la classe n'existe pas, rien n'est masqué, tout s'affiche. C'est l'erreur
   qui avait fait disparaître des blocs entiers sur ce projet — on ne masque
   que si on peut aussi révéler.

   Le premier bento n'est jamais animé : il est déjà à l'écran au chargement,
   et animer ce qui est déjà là ne produit qu'un clignotement. */
html.fgb-anime .fgb-bento + .fgb-bento > .fgb-case,
html.fgb-anime .fgb-bento + .fgb-bento > .fgb-photo{
  opacity:0;transform:translateY(16px);
  transition:opacity 520ms var(--ease),transform 520ms var(--ease);
  /* Le décalage est posé case par case par le script. */
  transition-delay:var(--pose,0ms)}
html.fgb-anime .fgb-bento + .fgb-bento > .fgb-vu{opacity:1;transform:none}

/* Sur un téléphone, 150 px laisserait deux tuiles et beaucoup de marge : on
   descend le pas plutôt que d'écrire un nombre de colonnes. */
@media (max-width:520px){.fgb-motifs{grid-template-columns:repeat(auto-fill,minmax(110px,1fr))}}

/* ── L'ADAPTATION ────────────────────────────────────────────────────
   Trois paliers, et la grammaire ne change jamais : ce sont toujours des
   cases détachées sur du papier. Ce qui change, c'est le nombre de
   colonnes qu'une case occupe. */

/* Tablette : la grille passe à 6 colonnes utiles. Tout ce qui prenait
   3 ou 4 colonnes en prend 6, tout ce qui en prenait 5 ou plus prend
   toute la largeur. */
/* Le palier est a 1200 px, et c'est MESURE, pas choisi.
   A 1200 px la navigation tient encore sur une ligne. A 1150 px elle passe
   sur DEUX lignes dans une barre qui reste haute de 101 px : les entrees
   sortaient de la case sans que rien ne le signale. L'ancien palier a
   1100 px laissait donc une centaine de pixels de casse. */
@media (max-width:1200px){
  .fgb-s3,.fgb-s4,.fgb-s5{grid-column:span 6}
  .fgb-s7,.fgb-s8,.fgb-s9{grid-column:1/-1}
  .fgb-r2{grid-row:auto}
  .fgb-colonne{align-self:auto}
  .fgb-motifs{grid-template-columns:repeat(6,minmax(0,1fr))}
  .fgb-produit{grid-column:span 6}
  .fgb-pied-haut{grid-template-columns:1fr 1fr}
  /* Le menu passe au panneau : sept entrees ne tiennent plus sur une ligne,
     et une pile de sept lignes ecraserait l'en-tete. */
  .fgb-nav{display:none}
  .fgb-outils .fgb-icone-menu{display:grid}
}

/* Téléphone. */
@media (max-width:760px){
  /* La barre est plus basse au telephone : le jeton suit, sinon l'overlay
     s'accroche 25 px sous elle et laisse un trou. Une declaration doit
     TOUJOURS vivre dans une regle — neuf blocs orphelins ont deja ete
     retires de skin.fgb-css pour cette raison. */
  :root{--gout:14px;--pad:18px;--pad-l:22px;--barre-h:76px}
  .fgb-s3,.fgb-s4,.fgb-s5,.fgb-s6,.fgb-s7,.fgb-s8,.fgb-s9{grid-column:1/-1}
  .fgb-tete{padding:0 18px;min-height:var(--barre-h)}
  .fgb-marque{font-size:var(--t-lede)}
  .fgb-case--entree{min-height:auto;padding-top:120px}
  .fgb-ornement{width:84px;height:84px}
  .fgb-motifs{grid-template-columns:repeat(4,minmax(0,1fr))}
  .fgb-pied-haut{grid-template-columns:1fr 1fr;gap:16px}
  .fgb-pied-marque p{margin-left:0}
  .fgb-pied-bas > :last-child{margin-left:0}
  .fgb-scene{min-height:52vh}
}