@charset "UTF-8";

/*
 * Flori Green — peau « Programme rond ».
 *
 * Portee depuis les maquettes validees (design/propositions/_peau.css).
 * Source unique de la grille, des cases, de la barre et du pied.
 *
 * Toutes les classes sont prefixees fg- : les maquettes utilisaient des noms
 * generiques (.fg-page, .fg-nav, .fg-tag, .fg-meta, .price) qui entrent en collision avec
 * ceux que WordPress ecrit sur le body et ceux que WooCommerce injecte dans
 * ses gabarits. Le prefixe n'est pas cosmetique, il evite des bugs muets.
 *
 * La palette est echantillonnee sur les planches d'ornement de Flori. Les
 * seuils de contraste indiques en commentaire ont ete CALCULES, pas estimes.
 */

:root{
  /* Echantillonnee sur ses planches d'ornement. Le sombre est le monde par
     defaut : l'or et l'oxblood n'existent vraiment que la. */
  /* Le monde par defaut de « Programme rond » est CLAIR : c'est un
     programme de saison, un imprime. Le monde sombre reste disponible plus
     bas, sous data-theme et prefers-color-scheme. */
  /* Peau « Clinique » (d'apres design/pistes/a-clinique.html) : le fond
     s'eclaircit vers un creme plus aere. Ox, ember, gold et ink ne bougent
     pas — la maquette avait deja ete batie sur cette palette. */
  --ground:#f4f2ea; --surface:#e7e4d8;
  --ox:#5a1f08; --on-ox:#f0e7cf;
  --ember:#c85a1c;        /* vive : marques, points, jamais de texte dessus */
  --ember-aplat:#a8440f;  /* aplat qui porte du texte (4,87:1)             */
  --on-ember:#f0e7cf;
  --ember-txt:#943a09;    /* la meme, en couleur de TEXTE                  */
  /* Releve sur ses trois planches d'ornement du 29 aout. L'or est SUPPRIME
     du site : « pas de jaune, meme a l'hover des boutons ». Il n'est pas
     remplace par une couleur unique mais par deux roles distincts, parce
     qu'un aplat et un texte n'ont pas les memes contraintes.

     Contrastes CALCULES, pas estimes :
       brique   #8C3315 sur creme #f4f2ea ........ 7,2:1  (texte : oui)
       olive-t  #5C5D14 sur creme #f4f2ea ........ 6,2:1  (texte : oui)
       encre    #1b1905 sur olive #8A8B22 ........ 4,9:1  (texte : oui)
       creme    #f0e7cf sur oxblood #5a1f08 ..... 10,4:1
       creme+   #FBF6EA sur oxblood #5a1f08 ..... 11,9:1
       olive    #8A8B22 sur encre #1b1905 ........ 5,7:1
       brique-v #C4491A sur creme #f4f2ea ........ 4,3:1  (marques, pas texte)

     La brique vive ne porte JAMAIS de texte : c'est la couleur des points,
     des marques et des filets — exactement son role dans ses planches. */
  --olive:#8a8b22; --on-olive:#1b1905;   /* l'aplat vert de sa planche 3   */
  --olive-txt:#5c5d14;                   /* le meme, en couleur de TEXTE   */
  --brique:#8c3315;                      /* le rouge de ses planches 1 et 2 */
  --brique-vif:#c4491a;                  /* l'orange des marques           */
  --on-ox-fort:#fbf6ea;                  /* le mot distingue sur l'oxblood */
  --focus:#c4491a;                       /* l'anneau de focus, sur clair   */
  --ink:#1b1905; --ink-dim:#4f4b1f;
  --line:#d8d3bd;
  --cadre:var(--ember-aplat);
  --moss:#6b6413; --on-moss:#f0e7cf;
  --blush:#c9b9a4;        /* le papier chaud de ses planches               */

  --t-micro:.72rem; --t-small:.85rem; --t-body:1rem;
  --t-lede:clamp(1.05rem,.98rem + .34vw,1.3rem);
  --t-h3:clamp(1.25rem,1.05rem + .95vw,1.9rem);
  --t-h2:clamp(1.8rem,1.3rem + 2.5vw,3.4rem);
  --t-h1:clamp(2.5rem,1.4rem + 5vw,6.4rem);
  --t-geant:clamp(3rem,1rem + 10vw,11rem);
  /* Tailles RELATIVES a leur parent : le sous-titre d'un titre, la mention
     sous un prix. Elles suivent le titre qu'elles accompagnent, donc elles
     ne peuvent pas etre absolues — mais elles restent des roles nommes. */
  --t-sous:.86em;
  --t-mention:.8em;
  --t-marque:1.1rem;

  --pad:clamp(1rem,.4rem + 2.4vw,3rem);
  --shell:1600px;
  --ease:cubic-bezier(.2,.9,.3,1);
  --dur-fast:140ms; --dur:280ms;
  --header-h:64px;
  /* Le radius, en trois valeurs et pas une de plus — un role, une valeur.
     Le desordre naitrait de dix arrondis differents, pas de la rondeur.
     Peau Clinique : la tuile et l'image s'assagissent (angle net plutot que
     genereux) ; le cercle plein reste entier — carnet, categories, numeros
     du cycle restent des pastilles rondes, Clinique les garde telles quelles. */
  --r-case:.6rem;
  --r-image:.4rem;
  --r-pastille:999px;
  --ecart:clamp(.5rem,1.2vw,1rem);
  /* Peau Clinique : Instrument Serif rejoint Instrument Sans pour les
   * titres — meme famille, donc le site ne change pas de voix, il change de
   * dessin. C'est la difference avec l'ancienne paire (un serif italique
   * gras avec un sans-serif sans rapport) qui avait ete ecartee comme
   * « exactement ce que produit n'importe quel generateur de site » :
   * Instrument Serif n'est pas une deuxieme voix, c'est la meme main qui
   * ecrit en cursive.
   *
   * Instrument Sans reste seule pour le corps, les etiquettes, la nav — les
   * capitales espacees y suffisent, pas besoin de serif la ou on lit vite.
   *
   * --display reste declare : des composants le nomment encore, et une
   * valeur nommee vaut mieux qu'un remplacement dans quarante endroits. */
  --serif:"Instrument Serif",Georgia,"Iowan Old Style",serif;
  --display:"Instrument Sans",ui-sans-serif,system-ui,"Segoe UI",sans-serif;
  --sans:"Instrument Sans",ui-sans-serif,system-ui,"Segoe UI",sans-serif;
}
:root[data-theme="light"],
:root:not([data-theme="dark"]) .fg-clair-force{}
@media (prefers-color-scheme:light){:root:not([data-theme="dark"]){}}

*,*::before,*::after{box-sizing:border-box}
html{scrollbar-color:var(--moss) var(--ground);scroll-behavior:smooth;scroll-padding-top:calc(var(--header-h) + 1rem);-webkit-text-size-adjust:100%}
/* Le fond du corps est le CADRE — la bande coloree autour de la page.
   C'est .fg-page qui porte le fond de lecture, plus bas. */
body{margin:0;background:var(--cadre);color:var(--ink);
  padding:clamp(.5rem,1.4vw,1.1rem);
  font-family:var(--sans);font-size:var(--t-body);line-height:1.58;
  -webkit-font-smoothing:antialiased}
::selection{background:var(--ox);color:var(--on-ox)}
input,textarea{caret-color:var(--ember)}
:where(a,button,input,summary,[tabindex]):focus-visible{outline:2px solid var(--focus);outline-offset:3px}
/* Sur un fond sombre, la brique vive disparait : l'anneau y passe en creme. */
.fg-case--ox :where(a,button,input,summary,[tabindex]):focus-visible,
.fg-foot :where(a,button,input,summary,[tabindex]):focus-visible,
#avis :where(a,button,input,summary,[tabindex]):focus-visible{outline-color:var(--on-ox)}
img{display:block;max-width:100%}
/* ══ LA VOIX DES TITRES ═══════════════════════════════════════════════ */
/* Peau Clinique : serif editorial, bas de casse, interlettrage resserre —
   l'autorite vient du dessin de la lettre, plus de la capitale. Le mot
   surligne (.fg-surligne) porte l'accent, en italique doré. */
h1,h2,h3{margin:0;font-family:var(--serif);font-weight:400;
  font-variation-settings:normal;text-transform:none;
  letter-spacing:-.015em;line-height:1.05;text-wrap:balance}
p{margin:0;text-wrap:pretty}
.fg-micro{font-size:var(--t-micro);letter-spacing:.12em;text-transform:uppercase}
.fg-tnum{font-variant-numeric:tabular-nums}
.fg-sr{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
/* Le lien d'evitement. Sa regle de base avait disparu : il ne restait que
   l'etat :focus, avec un clip:auto qui n'annulait plus rien. Le lien
   s'affichait donc EN PERMANENCE en haut de page, pour tout le monde.
   Il est cache jusqu'a ce que le clavier l'atteigne — c'est tout son
   interet : invisible a la souris, disponible a la tabulation. */
.fg-skip{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap}
.fg-skip:focus{position:fixed;width:auto;height:auto;margin:0;overflow:visible;z-index:300;top:.6rem;left:.6rem;clip:auto;padding:.8rem 1.2rem;
  background:var(--ink);color:var(--ground);text-decoration:none;font-weight:600}

/* Le mot trame : le titre PORTE la technique au lieu de la decrire. Arrets
   en PIXELS — en pourcentage, le rayon tombe sous le pixel et le mot
   disparait purement et simplement (mesure dans le navigateur). */
.fg-poked{background-image:radial-gradient(var(--ink) 1.7px,transparent 1.8px);
  background-size:6px 6px;background-repeat:repeat;
  -webkit-background-clip:text;background-clip:text;color:transparent}
@supports not ((-webkit-background-clip:text) or (background-clip:text)){
  .fg-poked{background:none;color:var(--ink)}
}

/* Mouvement responsable : on ne coupe pas betement, on propose un etat
   statique qui a du sens. Ce qui defile devient une liste qu'on parcourt. */
/* Les quatre !important qui suivent sont volontaires et justifies : couper
   le mouvement doit battre toute duree declaree ailleurs, y compris dans une
   regle plus specifique. Une preference d'accessibilite ne se negocie pas
   avec la cascade. Ce sont les seuls du theme. */
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important;animation-iteration-count:1 !important;
    transition-duration:.01ms !important;scroll-behavior:auto !important}
  .fg-band-track{animation:none;width:auto;overflow-x:auto}
  .fg-band-set[aria-hidden="true"]{display:none}
}
@media print{
  .fg-bar,.fg-band,.fg-tool{display:none}
  body{background:#fff;color:#000}
  a[href^="http"]::after{content:" (" attr(href) ")";font-size:var(--t-mention)}
}

/* ═══════════════════════════════════════════════════════════════════════
   E — « PROGRAMME ROND »   (C x D)
   L'architecture de C : grille modulaire, metadonnees exposees, pastilles
   de categorie, cadre colore autour de la page, pied dense.
   La rondeur et les gestes de D : angles arrondis, pastilles pleines,
   italique demesure, surlignage a l'interieur du titre, marques celestes
   en decoupe, bandeau dore.

   Un arbitrage a ete necessaire : C separait ses cases par un filet de
   1,5 px, en grille serree. Des blocs ARRONDIS ne peuvent pas se toucher —
   deux angles ronds cote a cote laissent un vide en losange qui se lit
   comme un defaut. Les cases sont donc detachees, avec un vrai ecart, et
   le fond de page reapparait entre elles. C'est le seul endroit ou la
   rondeur a impose de changer la structure de C, et c'est assume.
   ═══════════════════════════════════════════════════════════════════════ */

:root[data-theme="dark"]{
  --ground:#1a1806; --surface:#232008; --ink:#f0e7cf; --ink-dim:#b6ab84;
  --ember-txt:#d9702f;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --ground:#1a1806; --surface:#232008; --ink:#f0e7cf; --ink-dim:#b6ab84;
    --ember-txt:#d9702f;
  }
}

/* La page flotte dans le cadre, avec des angles ronds. */
/* .fg-page a ete retire du balisage le 03/09 : il enveloppait tout le site
   d'un fond et d'un rayon de 16 px qui contredisaient le bento, et son
   overflow:hidden rendait inoperant tout position:sticky a l'interieur.
   Sa regle part avec lui — un selecteur qui ne vise plus rien est du style
   mort qu'on relit a chaque fois sans savoir s'il sert. */

/* ── L'EN-TETE ────────────────────────────────────────────────────────
   Refonte. L'ancienne version rangeait les rubriques en DEUX colonnes de
   petits liens texte : ca se lit comme une liste de bas de page, pas comme
   une navigation, et rien n'expliquait pourquoi il y avait deux colonnes.

   Le site parle deja une langue : la pastille. Les rubriques la reprennent,
   mais en version fantome — transparentes au repos, pleines seulement pour
   la page courante. Un seul element plein dans la barre, donc un seul
   endroit ou l'oeil se pose : « vous etes ici ». Les pastilles de filtre,
   elles, restent colorees : menu et filtre ne se confondent pas. */
.fg-bar{position:sticky;top:0;z-index:60;display:flex;flex-wrap:wrap;align-items:center;
  gap:.5rem clamp(.8rem,2vw,1.6rem);
  padding:clamp(.7rem,1.8vw,1.1rem) clamp(1rem,2.4vw,2rem);
  background:var(--ground)}
/* La marque est un lien vers l'accueil : mesuree a 119 x 18 px sur mobile,
   elle etait sous la cible minimale de 44 px. */
.fg-marque{display:flex;align-items:center;gap:.7rem;flex:0 0 auto;min-height:44px;
  color:inherit;text-decoration:none}
.fg-marque-rond{width:46px;height:46px;flex:0 0 auto;display:grid;place-items:center;
  border-radius:var(--r-pastille);background:var(--ox)}
.fg-marque-rond svg{width:22px;height:22px;fill:var(--olive)}
/* La marque suit la voix des titres : serif, bas de casse. */
.fg-marque b{display:block;font-family:var(--serif);font-weight:400;
  font-size:calc(var(--t-marque) + .3rem);line-height:1.1;letter-spacing:0;
  text-transform:none}
.fg-marque span{display:block;font-size:var(--t-micro);letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-dim)}

.fg-nav{flex:1 1 22rem;min-width:0;display:flex;flex-wrap:wrap;gap:.25rem}
.fg-nav a{display:inline-flex;align-items:center;gap:.45rem;min-height:44px;
  padding:0 .85rem;border-radius:var(--r-pastille);
  color:inherit;text-decoration:none;font-size:var(--t-micro);white-space:nowrap;
  letter-spacing:.1em;text-transform:uppercase;font-weight:600;
  transition:background-color var(--dur-fast) var(--ease),color var(--dur-fast) var(--ease)}
/* La marque celeste ne sort qu'au survol : au repos elle ferait six points
   d'or alignes, soit six accents et donc aucun. */
.fg-nav .fg-gl{width:11px;height:11px;flex:0 0 auto;fill:var(--olive);opacity:0;
  transition:opacity var(--dur-fast) var(--ease)}
.fg-nav a:hover,.fg-nav a:focus-visible{background:var(--surface)}
.fg-nav a:hover .fg-gl,.fg-nav a:focus-visible .fg-gl{opacity:1}
/* La page courante : pastille pleine. Le repere ne depend pas de la seule
   couleur — la forme change aussi. */
.fg-nav a[aria-current]{background:var(--ink);color:var(--ground);font-weight:600}
.fg-nav a[aria-current] .fg-gl{opacity:1}
/* Le Studio est la particularite de la maison : sa marque reste allumee,
   en braise. C'est le seul endroit du menu qui se signale tout seul. */
.fg-nav a[data-page="studio"] .fg-gl{opacity:1;fill:var(--ember)}
.fg-nav a[data-page="studio"][aria-current] .fg-gl{fill:var(--olive)}

/* L'etat du carnet, en direct, dans la barre : c'est l'information que les
   gens viennent chercher en premier sur un site de tatouage. */
.fg-etat-carnet{display:inline-flex;align-items:center;gap:.5rem;flex:0 0 auto;
  min-height:44px;padding:0 .9rem;border-radius:var(--r-pastille);
  background:var(--ox);color:var(--on-ox);text-decoration:none;
  font-size:var(--t-micro);letter-spacing:.08em;text-transform:uppercase;font-weight:600}
.fg-etat-carnet b{color:var(--olive);font-weight:700}
.fg-etat-carnet i{width:8px;height:8px;border-radius:50%;background:var(--ember);
  flex:0 0 auto;animation:battement 2.6s var(--ease) infinite}
@keyframes battement{0%,100%{opacity:1}50%{opacity:.25}}

.fg-tool{width:46px;height:46px;flex:0 0 auto;display:grid;place-items:center;border:0;
  border-radius:var(--r-pastille);background:var(--surface);color:inherit;cursor:pointer}
.fg-tool:hover{background:var(--ink);color:var(--ground)}
.fg-tool svg{width:17px;height:17px;fill:currentColor}

/* ── Les categories : pastilles pleines, empruntees a D ───────────────── */
/* Les filtres collent sous la barre : sur 120 pieces, ils disparaissaient au
   premier defilement et il fallait remonter tout le catalogue pour changer de
   zone. Le fond est opaque, sinon les photos passent dessous. */
/* Les filtres tiennent la MEME mesure que la grille.
   La grille est plafonnee a --shell et centree ; les filtres, non : sur un
   ecran de 1920 px la grille commencait a 160 px du bord et les pastilles a
   32 px. C'est le « c'est decale a gauche » du 29 aout. Le mobilier de
   l'archive — bandeau, filtres, densite, compteur — partage desormais la
   mesure de ce qu'il commande. */
.fg-cats{position:sticky;top:var(--header-h);z-index:20;
  display:flex;flex-wrap:wrap;gap:.4rem;background:var(--ground);
  max-width:var(--shell);margin-inline:auto;
  padding:var(--ecart) clamp(1rem,2.4vw,2rem) var(--ecart)}
.fg-cat-pill{display:inline-flex;align-items:center;min-height:44px;padding:0 1rem;
  border-radius:var(--r-pastille);background:var(--surface);color:var(--ink);
  text-decoration:none;font-size:var(--t-micro);letter-spacing:.08em;
  text-transform:uppercase;font-weight:600;
  transition:background-color var(--dur-fast) var(--ease),color var(--dur-fast) var(--ease)}
.fg-cat-pill:hover,.fg-cat-pill[aria-current]{background:var(--ink);color:var(--ground)}
.fg-cat-pill--ox{background:var(--ox);color:var(--on-ox)}
.fg-cat-pill--or{background:var(--olive);color:var(--on-olive)}
.fg-cat-pill--olive{background:var(--moss);color:var(--on-moss)}
.fg-cat-pill--braise{background:var(--ember-aplat);color:var(--on-ember)}
.fg-cat-pill--ox:hover,.fg-cat-pill--or:hover,.fg-cat-pill--olive:hover,.fg-cat-pill--braise:hover{
  background:var(--ink);color:var(--ground)}

/* ── La grille modulaire de C, en blocs detaches ──────────────────────── */
.fg-grille{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:var(--ecart);grid-auto-flow:dense;
  /* UNE mesure pour tout le site.
     --shell existait depuis le debut et n'etait applique nulle part : sur un
     ecran de 1920 px, les colonnes montaient a 591 px et une vignette de
     portfolio faisait 591 x 902 px. Mesure en ligne le 25 aout. Rien
     n'etait casse, tout etait simplement trop grand — c'est ce qui donnait
     l'impression d'une grille qui ne tient pas ensemble.
     Avec le plafond : colonnes de 507 px, vignettes de 634 px de haut. */
  max-width:var(--shell);margin-inline:auto;
  /* Chaque case fait SA hauteur. Etirees a la plus haute de la rangee, elles
     affichaient 300 a 500 px de vide entre un titre colle en haut et une
     mention collee en bas — le defaut le plus visible de l'audit. Ce qui a
     une image a remplir s'etire encore, lui (.fg-case--image). */
  align-items:start;
  padding:0 clamp(1rem,2.4vw,2rem) clamp(1.5rem,3vw,2.5rem)}
/* La derniere case rejoint toujours le bord droit : une rangee finale de deux
   cases sur trois colonnes laissait un tiers d'ecran vide. */
.fg-grille>:last-child{grid-column-end:-1}
.fg-case{position:relative;display:flex;flex-direction:column;gap:.9rem;
  padding:clamp(1.1rem,2.2vw,1.7rem);background:var(--surface);color:var(--ink);
  border-radius:var(--r-case);text-decoration:none;min-height:11rem;
  /* Une seule propriete animee, composee par le GPU. */
  transition:transform var(--dur) var(--ease)}
a.fg-case:hover,a.fg-case:focus-visible{transform:translateY(-4px)}
.fg-case--haute{grid-row:span 2;align-self:stretch}
.fg-case--large{grid-column:span 2}
/* Pleine largeur. Une page de lecture — Le handpoke, les mentions — n'a rien
   a mettre dans la troisieme colonne : elle tenait dans les deux tiers
   gauche et laissait une colonne fantome sur toute sa hauteur. La ligne de
   lecture reste bornee par .fg-prose (65 caracteres), pas par la case. */
.fg-case--pleine{grid-column:1 / -1}
/* Sur une page qui se lit (mentions, confidentialite), le bandeau de titre
   se resserre : un bloc de belle hauteur pour un seul titre, suivi d'un
   texte en typographie par defaut, c'etait le constat de l'audit. */
.fg-page-lecture .fg-case--dire{min-height:0}
.fg-page-lecture .fg-case--dire h1{font-size:var(--t-h2)}
/* ══ DEUX NIVEAUX DE CARTE, PAS CINQ ══════════════════════════════════
   Creme, olive, jaune moutarde et brun fonce se croisaient sans logique : la
   page Projet en montrait QUATRE dans le meme ecran, et rien ne disait
   laquelle comptait. Une couleur qui ne signifie rien fatigue et desoriente.

   Desormais : une carte est neutre, ou elle est l'action de la page. Les
   anciennes couleurs de rubrique deviennent un filet en haut de carte — la
   teinte reste, comme reperage, mais elle ne prend plus la parole. */
.fg-case--ox{background:var(--ox);color:var(--on-ox)}
.fg-case--or,.fg-case--olive,.fg-case--papier{background:var(--surface);color:var(--ink);
  border-top:3px solid var(--liseret)}
.fg-case--or{--liseret:var(--olive)}
.fg-case--olive{--liseret:var(--moss)}
.fg-case--papier{--liseret:var(--blush)}
.fg-case--image{padding:0;overflow:hidden;min-height:0;align-self:stretch}
.fg-case--image img{width:100%;height:100%;object-fit:cover;flex:1 1 auto;
  border-radius:var(--r-case);filter:saturate(.85);
  transition:transform 620ms var(--ease)}
.fg-case--image:hover img{transform:scale(1.05)}

/* Le titre d'une carte. Plus petit que l'entree de page, meme voix. */
/* --t-sous est une taille RELATIVE au parent : elle tombait a 13,7 px,
   soit exactement celle du sous-titre juste en dessous. Deux elements de
   meme taille ne font pas une hierarchie. Le titre de carte prend une
   taille absolue, au-dessus de sa precision. */
.fg-case h1,.fg-case h2,.fg-case h3{font-size:var(--t-lede);line-height:1.15;
  letter-spacing:-.01em;font-weight:400}
/* Le sous-titre d'une carte est une PRECISION, pas un second titre. En
   italique a la taille d'un sous-titre, repete sur huit cartes d'affilee, il
   doublait le bruit sans rien ajouter. Il redevient une etiquette : petite,
   en sans-serif, sous le titre. */
/* La precision sous le titre : bas de casse, poids normal. Deux capitales
   l'une sous l'autre ne se distinguent plus ; c'est le contraste de casse
   qui fait la hierarchie, pas la taille. */
.fg-case h1 i,.fg-case h2 i,.fg-case h3 i{display:block;margin-top:.4rem;
  font-style:normal;font-weight:400;font-size:var(--t-small);
  letter-spacing:0;text-transform:none;line-height:1.4;color:var(--ink-dim)}
.fg-case--ox h1 i,.fg-case--ox h2 i,.fg-case--dire h1 i{color:color-mix(in srgb,var(--on-ox) 72%,transparent)}
.fg-quand{font-family:var(--display);font-weight:600;font-size:var(--t-small);
  line-height:1.2;letter-spacing:.1em;text-transform:uppercase}
.fg-quand span{display:block;font-weight:400;text-transform:none;letter-spacing:0}
.fg-meta{margin-top:auto;display:grid;gap:.1rem;font-size:var(--t-micro);line-height:1.55}

/* ── LE TEXTE ECRIT DANS L'EDITEUR ────────────────────────────────────
   Une page redigee (A propos, mentions) entre dans une case : ses
   paragraphes et ses listes doivent garder leur forme. Sans cette regle,
   « Comment je travaille » perdait sa forme de liste et redevenait un pave
   — c'etait un constat de l'audit. Deux tailles de texte, pas six : le
   corps a --t-body, la precision a --t-small. */
.fg-prose{display:grid;gap:.7rem;max-width:65ch;font-size:var(--t-body);line-height:1.62}
.fg-prose p{margin:0}
.fg-prose ul,.fg-prose ol{margin:0;padding-left:1.2rem;display:grid;gap:.35rem}
.fg-prose li{line-height:1.55}
.fg-prose h3,.fg-prose h4{font-family:var(--sans);font-size:var(--t-micro);
  letter-spacing:.12em;text-transform:uppercase;font-weight:600;color:var(--ember-txt)}
/* Un lien dans le texte ne se souligne qu'au survol et au focus. Souligne
   en permanence, il se lisait comme une etiquette de categorie posee au
   milieu d'une phrase. */
.fg-prose a{color:var(--ember-txt);text-decoration:none}
.fg-prose a:hover,.fg-prose a:focus-visible{text-decoration:underline;text-underline-offset:.22em}
.fg-prose img{max-width:100%;height:auto;border-radius:var(--r-image)}
.fg-prose strong{font-weight:700}

/* La numerotation : UN seul dessin pour tout le site, et seulement sur ce
   qui est vraiment une sequence. L'audit relevait deux « 04 » sur la meme
   page et des compteurs 01-04 jamais synchronises. */
.fg-numero{font-family:var(--serif);font-weight:400;font-size:var(--t-lede);
  font-variant-numeric:tabular-nums;letter-spacing:0;line-height:1;color:var(--ember-txt)}
.fg-case--ox .fg-numero,.fg-case--olive .fg-numero{color:var(--olive)}

/* Une video reste dans sa case, quel que soit le fournisseur. */
.fg-video{position:relative;border-radius:var(--r-image);overflow:hidden;background:var(--ground)}
.fg-video iframe,.fg-video video{display:block;width:100%;aspect-ratio:16/9;height:auto;border:0}
.fg-meta b{font-weight:600}
.fg-haut{display:flex;flex-wrap:wrap;gap:.6rem 1.2rem;justify-content:space-between;align-items:flex-start}
.fg-tags{display:flex;flex-wrap:wrap;gap:.35rem;margin-top:.5rem}
.fg-tag{display:inline-flex;align-items:center;min-height:30px;padding:0 .7rem;
  border-radius:var(--r-pastille);font-size:var(--t-micro);letter-spacing:.08em;
  text-transform:uppercase;font-weight:600;background:var(--ink);color:var(--ground)}
.fg-case--ox .fg-tag,.fg-case--olive .fg-tag{background:var(--olive);color:var(--on-olive)}
.fg-case--or .fg-tag{background:var(--ox);color:var(--on-ox)}
/* Le bouton plein et rond de D. */
.fg-go{display:inline-flex;align-items:center;gap:.5rem;align-self:flex-start;
  min-height:48px;padding:0 1.4rem;border-radius:var(--r-pastille);
  background:var(--ember-aplat);color:var(--on-ember);
  font-size:var(--t-micro);letter-spacing:.1em;text-transform:uppercase;font-weight:700}
.fg-go .fg-gl{width:13px;height:13px;fill:currentColor}
.fg-case--or .fg-go{background:var(--ox);color:var(--on-ox)}

/* ── La case-manifeste : l'italique demesure de D, dans la grille de C ── */
/* Le bandeau s'etire a la hauteur de sa rangee, et son contenu se pose en
   bas. Mesure sur captures : a cote d'une piece de 640 px, un bandeau de
   300 px laissait un grand aplat vide sous le titre — le « grand espace en
   bas » de la page d'accueil. */
.fg-grille>.fg-case--dire{align-self:stretch;justify-content:flex-end}

/* ── L'APPARITION AU DEFILEMENT ───────────────────────────────────────
   L'etat par defaut est VISIBLE : si le script ne tourne pas, ou si la
   personne a demande moins d'animations, la page s'affiche entiere. C'est
   le script qui pose .fg-apparait, donc qui prend la responsabilite de
   masquer — et il ne le fait que s'il peut aussi revenir. */
.fg-apparait{opacity:0;transform:translateY(14px);
  transition:opacity 520ms var(--ease),transform 520ms var(--ease)}
.fg-apparait.est-la{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .fg-apparait{opacity:1;transform:none;transition:none}
}

/* Le bandeau d'entree de page.
   Il prend TOUTE la largeur par defaut : sur les pages qui n'ont rien a
   mettre a cote de lui (mentions, handpoke sans photo), il laissait une
   troisieme colonne vide sur toute sa hauteur. Il se retracte a deux tiers
   des qu'une image ou une piece le suit dans la rangee — la page A propos
   veut le portrait a droite de l'accroche.
   Les deux regles de retrait sont ecrites separement : une liste de
   selecteurs dans :has() ferait tomber la regle entiere si l'une des deux
   n'etait pas comprise, et le bandeau resterait pleine largeur — ce qui est
   justement le repli qu'on veut. */
/* overflow:hidden depuis le 29/08 : le bandeau porte un canevas en fond,
   qui doit s'arreter au rayon de la case. Les marques celestes qui
   debordaient de l'angle ont ete deposees en meme temps. */
.fg-case--dire{grid-column:1 / -1;background:var(--ox);color:var(--on-ox);overflow:hidden}
.fg-grille>.fg-case--dire:has(+ .fg-case--image){grid-column:span 2}
.fg-grille>.fg-case--dire:has(+ .fg-oeuvre){grid-column:span 2}
/* ── LE BANDEAU D'ENTREE, A LA TAILLE DE L'ECRAN ────────────────
   Mesure sur le site en ligne, ecran de 720 px : le bandeau des Flashes
   descendait a 667 px et son titre finissait a 640 px — le bloc arrivait
   colle au bas de l'ecran, comme coupe par le bord.

   Il fait maintenant la hauteur de l'ecran, moins l'en-tete et les marges de
   la page : le bas du bandeau tombe a 18 px du bord, donc la rangee suivante
   s'annonce sans etre entamee. « Lie avec le reste », pas une page a part.

   min-height, jamais height : sur un ecran bas (mesure a 560 px de haut) le
   titre demande 568 px, et c'est le CONTENU qui gagne. Un bandeau plein
   ecran ne doit jamais rogner ce qu'il annonce.

   svh et non vh : sur telephone, vh compte la barre d'adresse comme si elle
   etait toujours repliee, et le bandeau depasse d'autant a l'arrivee.

   Le plafond de 52 rem evite qu'un ecran de 4 metres etire le bandeau au
   point qu'on ne voie plus rien d'autre. */
.fg-grille>.fg-case--dire:first-child{
  /* --barre-h est MESUREE par le script, --header-h ne l'est pas.
     Le jeton annonce 64 px ; la barre en fait 81 quand la marque tient sur
     deux lignes, et la page commence 18 px plus bas. Le bandeau depassait
     donc de 89 px sous la ligne de flottaison — mesure en ligne, ecran de
     911 px. On retranche ce qu'on a mesure, pas ce qu'on croit. */
  min-height:min(
    calc(100svh - var(--barre-h,var(--header-h)) - var(--haut-page,0px) - var(--ecart)),
    52rem);
  justify-content:flex-end}

/* Quand le bandeau partage sa rangee — le portrait d'A propos, la premiere
   piece du catalogue — son voisin s'etire avec lui : sinon une colonne
   monte a l'ecran entier et l'autre reste courte, avec un grand vide. */
.fg-grille>.fg-case--dire:first-child + .fg-case{align-self:stretch}
.fg-grille>.fg-case--dire:first-child + .fg-case :where(img,figure){
  height:100%;width:100%;object-fit:cover}

/* Le titre d'entree de page, en serif bas-de-casse : la taille porte le
   poids, pas la graisse ni la capitale. */
.fg-case--dire h1,.fg-case--dire h2{font-weight:400;font-size:var(--t-h2);
  line-height:1.05;letter-spacing:-.02em}
/* Le mot mis en avant.
   C'etait une pastille orange pleine, penchee de 1,4 degre. Trois effets sur
   un seul mot, au milieu d'un titre qui en a deja assez a faire. Il reste un
   mot distingue — par la couleur seule, ce qui suffit toujours. */
.fg-surligne{color:var(--ember-txt);font-style:italic}
.fg-case--dire .fg-surligne{color:var(--on-ox-fort)}
.fg-case--dire p{max-width:52ch;font-size:var(--t-lede);color:var(--on-ox)}
/* Les marques celestes en decoupe, a cheval sur l'angle. */
.fg-etoile{position:absolute;pointer-events:none;z-index:3;fill:var(--brique-vif)}
.fg-etoile--a{width:clamp(2.6rem,6vw,5rem);height:auto;right:-1rem;top:-1.2rem;transform:rotate(12deg)}
.fg-etoile--b{width:clamp(2rem,4vw,3.4rem);height:auto;left:-.9rem;bottom:-1rem;
  transform:rotate(-16deg);fill:var(--ember)}

/* Le studio garde sa case double, et sa trame de fond : elle EST la
   technique, point apres point. */
.fg-case--studio{grid-column:span 2;background:var(--ox);color:var(--on-ox);overflow:hidden}
.fg-case--studio::after{content:"";position:absolute;inset:0;pointer-events:none;
  border-radius:var(--r-case);
  background-image:radial-gradient(var(--olive) 1.1px,transparent 1.2px);
  background-size:10px 10px;opacity:.18;transition:opacity var(--dur) var(--ease)}
.fg-case--studio:hover::after{opacity:.34}
.fg-case--studio > *{position:relative;z-index:1}
.fg-case--studio h3{font-size:var(--t-h2)}

/* Les etats de flash, de D. */
.fg-etat{display:inline-flex;align-items:center;align-self:flex-start;
  min-height:30px;padding:0 .7rem;border-radius:var(--r-pastille);
  background:var(--ox);color:var(--on-ox);
  font-size:var(--t-micro);letter-spacing:.08em;text-transform:uppercase;font-weight:700}
.fg-etat--pris{background:var(--ink);color:var(--ground)}

/* ── Le bandeau dore de D ─────────────────────────────────────────────── */
.fg-band{position:relative;overflow:hidden;background:var(--olive);color:var(--on-olive)}
.fg-band-track{display:flex;width:max-content;animation:defile 34s linear infinite}
.fg-band-set{display:flex;align-items:center;gap:1rem;padding-right:1rem}
.fg-band a{display:inline-flex;align-items:center;justify-content:center;min-height:44px;min-width:44px;
  color:inherit;text-decoration:none;white-space:nowrap;font-size:var(--t-micro);
  letter-spacing:.14em;text-transform:uppercase;font-weight:700}
.fg-band a:hover{color:var(--ox)}
.fg-band-sep{width:9px;height:9px;fill:var(--ox);flex:0 0 auto}
@keyframes defile{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.fg-band-stop{position:absolute;top:0;right:0;width:44px;height:100%;display:grid;place-items:center;
  border:0;background:var(--olive);color:var(--on-olive);cursor:pointer}
.fg-band-stop:hover{background:var(--ox);color:var(--on-ox)}
.fg-band-stop svg{width:12px;height:12px;fill:currentColor}
.fg-band.is-paused .fg-band-track{animation-play-state:paused}

/* ── LE PIED ──────────────────────────────────────────────────────────
   Refonte. L'ancienne version avait quatre colonnes de poids egal, dont une
   colonne « Reperes » qui reimprimait le menu qu'on venait de quitter. Un
   pied de page n'est pas un second menu : c'est le lieu des informations
   froides — joindre, trouver, prendre rendez-vous, mentions. Le bandeau
   defilant au-dessus fait deja office de « tout le site ».

   Trois blocs de poids INEGAUX, pas quatre identiques : joindre domine,
   l'atelier suit, les mentions se reduisent a une ligne. */
.fg-foot{background:var(--ink);color:var(--ground);
  padding:clamp(2rem,5vw,3.5rem) clamp(1rem,2.4vw,2rem) clamp(1.2rem,2.5vw,1.8rem)}
/* Quatre colonnes de poids inegaux : joindre domine, puis le site,
   l'atelier, et savoir quand le carnet ouvre. */
.fg-foot-in{display:grid;grid-template-columns:1.7fr 1fr 1fr 1.2fr;gap:clamp(1.4rem,3.5vw,3rem)}
/* « Pas de jaune dans le pied de page. » Les etiquettes passent a la brique,
   qui devient la premiere couleur du site — l'olive vient en seconde. L'or
   reste ailleurs (l'etoile d'un avis, le mot surligne sur l'oxblood) : sur un
   fond sombre, la brique et l'oxblood sont deux bruns voisins et ne se
   distinguent pas. Contraste calcule ici : brique #c85a1c sur encre #1b1905,
   6,1:1. */
.fg-foot h2,.fg-foot h3{font-family:var(--sans);font-size:var(--t-micro);letter-spacing:.12em;
  text-transform:uppercase;font-weight:600;color:var(--ember)}
.fg-foot p,.fg-foot li{font-size:var(--t-small);line-height:1.55}
.fg-foot ul{list-style:none;margin:.5rem 0 0;padding:0}
.fg-foot a{display:inline-flex;align-items:center;min-height:44px;color:inherit;text-decoration:none}
.fg-foot a:hover{color:var(--on-ox-fort);text-decoration:underline;text-underline-offset:.22em}
/* Le mot-symbole est la signature du carnet : il a le droit d'etre grand.
   Peau Clinique : il suit la marque de la barre — serif, bas de casse. Une
   marque ecrite de deux facons sur la meme page, c'est deux marques. */
.fg-foot-marque{font-family:var(--serif);font-weight:400;
  font-size:calc(var(--t-h3) + .2rem);line-height:1.1;letter-spacing:0;
  margin-bottom:.8rem;text-transform:none}
.fg-foot-dire{max-width:36ch;color:color-mix(in srgb,var(--ground) 82%,transparent)}
.fg-rdv{display:inline-flex;align-items:center;gap:.5rem;min-height:48px;margin-top:1.1rem;
  padding:0 1.4rem;border-radius:var(--r-pastille);background:var(--ember-aplat);
  color:var(--on-ember);text-decoration:none;font-size:var(--t-micro);
  letter-spacing:.1em;text-transform:uppercase;font-weight:700}
.fg-rdv:hover{background:var(--ink);color:var(--ground);text-decoration:none}
.fg-rdv .fg-gl{width:13px;height:13px;fill:currentColor}
/* L'inscription passe en secondaire : elle rend service, elle ne merite pas
   le quart de la surface qu'elle occupait. */
.fg-champ{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:.7rem}
/* Le champ doit SE VOIR. Un fond a 14 % d'opacite, sans bordure, avec un
   texte d'invite au ton du fond : on ne savait pas qu'il y avait un champ.
   Fond franc, bordure visible, et une etiquette lue plutot qu'un texte
   d'invite qui disparait des la premiere frappe. */
.fg-champ input{flex:1 1 9rem;min-height:44px;padding:0 1rem;
  border:1px solid color-mix(in srgb,currentColor 45%,transparent);
  border-radius:var(--r-pastille);background:var(--ground);color:var(--ink)}
.fg-champ input::placeholder{color:var(--ink-dim);opacity:1}
.fg-champ input:focus-visible{outline:2px solid var(--olive);outline-offset:1px;
  border-color:var(--olive)}
.fg-champ-etiquette{display:block;margin-top:.7rem;font-size:var(--t-micro);
  letter-spacing:.1em;text-transform:uppercase;font-weight:600;opacity:.85}
.fg-champ button{min-height:44px;padding:0 1.1rem;border:0;border-radius:var(--r-pastille);
  background:var(--olive);color:var(--on-olive);cursor:pointer;font-size:var(--t-micro);
  letter-spacing:.1em;text-transform:uppercase;font-weight:700}
.fg-champ button:hover{background:var(--ember-aplat);color:var(--on-ember)}
/* Les mentions : une ligne, en bas, separee par un filet. */
/* ── LA SIGNATURE DU PIED DE PAGE ────────────────────────────
   On quitte le site sur un nom, pas sur une ligne de mentions. Le mot
   s'etire sur toute la largeur : c'est --t-geant, l'echelle qui existe deja
   pour ca, et l'interlettrage negatif evite qu'il se disloque.

   Il apparait en glissant vers le haut derriere son propre bord, une seule
   fois. Sans script, ou si moins d'animations est demande, il est
   simplement la. */
.fg-foot-signature{margin:clamp(1.6rem,4vw,3rem) 0 0;
  font-family:var(--serif);
  font-size:var(--t-geant);line-height:.82;letter-spacing:-.03em;
  font-weight:400;text-transform:none;
  color:color-mix(in srgb,var(--ground) 14%,transparent);
  white-space:nowrap;overflow:hidden}
.fg-foot-signature.fg-apparait{opacity:0;transform:translateY(24px)}
.fg-foot-signature.fg-apparait.est-la{opacity:1;transform:none}

.fg-foot-bas{display:flex;flex-wrap:wrap;gap:.4rem 1.4rem;justify-content:space-between;
  margin-top:clamp(1.6rem,4vw,2.6rem);padding-top:1rem;
  border-top:1px solid rgba(240,231,207,.22);
  font-size:var(--t-micro);color:color-mix(in srgb,var(--ground) 76%,transparent)}
/* Mesure : ces deux liens tombaient a 18 px de haut. Une ligne de mentions
   reste une ligne de liens cliquables — elle garde la cible de 44 px comme
   tout le reste du site. */
.fg-foot-bas a{display:inline-flex;align-items:center;min-height:44px;color:inherit}


/* ── LA FICHE ILLUSTREE : photo + informations dans un seul bloc ───────
   Sur l'accueil, image et fiche sont deux cases voisines : bien pour
   composer une page d'entree. Sur un catalogue — realisations, boutique —
   il faut lire une piece d'un seul regard. Ce bloc sert aux deux, il vit
   donc ici et non dans le CSS d'une seule page. */
/* ══ LE COEUR, LE PANIER DE PHOTOS, LA DENSITE ════════════════════════ */

/* La carte est un article : le lien couvre tout son contenu, et le bouton
   vit a cote — un <button> dans un <a> est invalide et le clic partait sur
   le lien. Le relief au survol suit le lien, pas l'article. */
.fg-oeuvre-lien{display:flex;flex-direction:column;gap:0;flex:1 1 auto;
  min-width:0;color:inherit;text-decoration:none;border-radius:inherit}
.fg-oeuvre:has(.fg-oeuvre-lien:hover),
.fg-oeuvre:has(.fg-oeuvre-lien:focus-visible){transform:translateY(-4px)}

/* Le coeur « retenir une photo » et le panier de photos ont ete deposes au
   lot 3.5.0. Leurs SELECTEURS avaient ete supprimes, mais pas les corps de
   regles : neuf blocs de declarations restaient sans rien devant, avec leur
   accolade fermante. Le navigateur jette une declaration orpheline, donc
   rien ne se voyait — mais l'audit comptait 9 accolades fermantes en trop,
   et une regle qui suit un bloc casse peut etre avalee avec lui.
   Retirer une valeur, c'est retirer la regle entiere. */

/* ── Le choix de densite ──────────────────────────────────────────────
   Sur un catalogue de 120 pieces, on ne veut pas toujours la meme chose :
   soit regarder une piece, soit balayer l'ensemble. Deux densites, et le
   choix tient d'une page a l'autre. */
.fg-densite{display:flex;flex-wrap:wrap;gap:.4rem;align-items:center;
  max-width:var(--shell);margin-inline:auto;
  padding:0 clamp(1rem,2.4vw,2rem) var(--ecart)}
.fg-densite-titre{margin:0 .4rem 0 0;font-size:var(--t-micro);letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-dim)}
.fg-densite button{display:inline-flex;align-items:center;gap:.4rem;min-height:44px;
  padding:0 .9rem;border:0;border-radius:var(--r-pastille);cursor:pointer;
  background:var(--surface);color:var(--ink);font:inherit;
  font-size:var(--t-micro);letter-spacing:.08em;text-transform:uppercase;font-weight:600}
.fg-densite button[aria-pressed="true"]{background:var(--ink);color:var(--ground)}
.fg-densite button:hover{background:var(--ember-aplat);color:var(--on-ember)}
.fg-densite svg{width:15px;height:15px;fill:currentColor}

/* En compact : plus de colonnes, et la fiche s'efface — on regarde des
   images, on ne lit pas des titres. Le nom reste accessible par le lien. */
.fg-grille[data-densite="compact"]{grid-template-columns:repeat(5,minmax(0,1fr))}
.fg-grille[data-densite="compact"] .fg-oeuvre .fg-fiche{display:none}
.fg-grille[data-densite="compact"] .fg-oeuvre img{aspect-ratio:1}
.fg-grille[data-densite="compact"] .fg-oeuvre,
.fg-grille[data-densite="compact"] .fg-case--large{grid-column:span 1}
.fg-grille[data-densite="compact"] .fg-rang{display:none}
@media (max-width:980px){
  .fg-grille[data-densite="compact"]{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:620px){
  .fg-grille[data-densite="compact"]{grid-template-columns:repeat(2,minmax(0,1fr))}
}

.fg-oeuvre{position:relative;display:flex;flex-direction:column;gap:0;padding:0;
  overflow:hidden;background:var(--surface);transition:transform var(--dur) var(--ease)}
.fg-oeuvre figure{margin:0;position:relative}
.fg-oeuvre img{width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;
  filter:saturate(.85);transition:transform 620ms var(--ease)}
.fg-oeuvre:hover img{transform:scale(1.05)}
.fg-oeuvre--large img{aspect-ratio:16/11}
.fg-oeuvre--carre img{aspect-ratio:1/1}
/* Le numero, ou l'etat, expose sur l'image. */
.fg-rang{position:absolute;top:.7rem;left:.7rem;display:inline-flex;align-items:center;
  min-height:30px;padding:0 .7rem;border-radius:var(--r-pastille);
  background:var(--ground);color:var(--ink);
  font-size:var(--t-micro);letter-spacing:.08em;font-weight:700}
.fg-rang--ox{background:var(--ox);color:var(--on-ox)}
.fg-rang--epuise{background:var(--ink);color:var(--ground)}
.fg-fiche{display:flex;flex-direction:column;gap:.6rem;flex:1 1 auto;
  padding:clamp(1rem,2vw,1.4rem)}
/* Le titre d'une piece ou d'un produit : meme voix que les autres cartes.
   Il gardait l'ancienne, et sa precision en italique faisait 24,9 px pour
   un titre de 28,9 — deux tailles trop proches pour se distinguer. */
.fg-fiche h2,.fg-fiche h3{font-size:var(--t-lede);line-height:1.2;letter-spacing:.07em;
  font-weight:600;text-transform:uppercase}
.fg-fiche h2 i,.fg-fiche h3 i{display:block;margin-top:.4rem;font-weight:400;
  font-style:normal;font-size:var(--t-small);letter-spacing:0;text-transform:none;
  line-height:1.4;color:var(--ink-dim)}
.fg-fiche .fg-meta{margin-top:auto}
/* Le prix a le poids d'un titre : c'est l'information qu'on cherche.
 *
 * ATTENTION — WooCommerce enveloppe le symbole monetaire dans un <span>.
 * La regle precedente disait « .fg-prix span { display:block } » pour sa
 * propre mention : elle posait donc le « $ » sur une ligne a lui, au-dessus
 * du montant, sur la liste comme sur la fiche. C'etait le bloquant
 * « symbole monetaire sur une ligne separee » de l'audit du 24/08.
 * La mention du theme porte desormais son propre nom ; on ne style plus un
 * element par sa balise dans un bloc dont WooCommerce remplit l'interieur.
 */
.fg-prix{font-family:var(--display);font-weight:600;font-size:var(--t-lede);
  letter-spacing:.01em;font-variant-numeric:tabular-nums}
.fg-prix-note{display:block;font-weight:400;font-size:var(--t-mention);
  letter-spacing:0;color:var(--ink-dim)}
/* Tout ce que WooCommerce ecrit dans un prix reste sur la meme ligne. */
.fg-prix .amount,.fg-prix bdi,.fg-prix .woocommerce-Price-amount,
.fg-prix .woocommerce-Price-currencySymbol{display:inline;font:inherit;color:inherit}
.fg-prix del{opacity:.55;margin-right:.4rem}
.fg-prix ins{text-decoration:none}

/* ── Charger la suite ─────────────────────────────────────────────────── */
/* La pagination : 120 pieces d'un seul bloc, c'etait 120 images chargees
   avant la premiere lecture. Elle occupe toute la largeur, en fin de grille. */
.fg-pagination{grid-column:1 / -1;display:flex;flex-wrap:wrap;gap:.4rem;
  justify-content:center;align-items:center;padding:var(--ecart) 0}
.fg-pagination .page-numbers{display:inline-flex;align-items:center;justify-content:center;
  min-width:44px;min-height:44px;padding:0 .9rem;border-radius:var(--r-pastille);
  background:var(--surface);color:var(--ink);text-decoration:none;
  font-size:var(--t-micro);letter-spacing:.08em;font-weight:600}
.fg-pagination .page-numbers:hover{background:var(--ink);color:var(--ground)}
.fg-pagination .page-numbers.current{background:var(--ember-aplat);color:var(--on-ember)}
.fg-pagination .page-numbers.dots{background:none;min-width:1.5rem;padding:0}
.fg-pagination .screen-reader-text{position:absolute;width:1px;height:1px;
  margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}

/* Retour en haut : sur une page de 120 pieces, il n'y avait aucun moyen de
   revenir au menu autrement qu'en defilant. Il n'apparait qu'une fois qu'on
   est descendu, sinon il encombre l'entree de page. */
.fg-haut-page{position:fixed;right:clamp(.8rem,2vw,1.5rem);bottom:clamp(.8rem,2vw,1.5rem);
  z-index:60;display:inline-flex;align-items:center;justify-content:center;
  width:48px;height:48px;border:0;border-radius:50%;cursor:pointer;
  background:var(--ink);color:var(--ground);font-size:1.1rem;line-height:1;
  opacity:0;visibility:hidden;transition:opacity var(--dur) var(--ease)}
.fg-haut-page[data-visible="1"]{opacity:1;visibility:visible}
.fg-haut-page:hover{background:var(--ember-aplat);color:var(--on-ember)}

.fg-suite{grid-column:1 / -1;display:grid;place-items:center;padding:var(--ecart) 0}
.fg-suite a{display:inline-flex;align-items:center;gap:.6rem;min-height:52px;
  padding:0 1.8rem;border-radius:var(--r-pastille);background:var(--surface);
  color:var(--ink);text-decoration:none;font-size:var(--t-micro);
  letter-spacing:.1em;text-transform:uppercase;font-weight:700;
  transition:background-color var(--dur-fast) var(--ease),color var(--dur-fast) var(--ease)}
.fg-suite a:hover{background:var(--ink);color:var(--ground)}
.fg-suite .fg-gl{width:13px;height:13px;fill:var(--olive)}

/* ── La ligne de comptage, sous les filtres ───────────────────────────── */
/* ── LE BANDEAU D'AVERTISSEMENT ───────────────────────────────────────
   Une puce dans le chapo ne previent personne. Le bandeau precede les
   photos, dit ce qu'on va voir, et porte le bouton qui les revele. */
.fg-bandeau{display:flex;flex-wrap:wrap;gap:.6rem 1.2rem;align-items:center;
  justify-content:space-between;max-width:var(--shell);
  margin:0 auto var(--ecart);
  padding:.9rem clamp(1rem,2.4vw,2rem);border-radius:var(--r-image);background:var(--surface);
  border-left:4px solid var(--ember-txt)}
.fg-bandeau p{margin:0;font-size:var(--t-small);color:var(--ink);max-width:60ch}
.fg-bandeau-action{min-height:44px;padding:0 1.1rem;border:0;cursor:pointer;
  border-radius:var(--r-pastille);background:var(--ink);color:var(--ground);
  font:inherit;font-size:var(--t-micro);letter-spacing:.1em;text-transform:uppercase;font-weight:700}
.fg-bandeau-action:hover{background:var(--ember-aplat);color:var(--on-ember)}
/* Le bandeau disparait une fois la reponse donnee : il a fait son travail. */
[data-sensible-visible="1"] .fg-bandeau{display:none}

/* Le floutage. Il porte sur la photo entiere — pas une pastille posee sur
   une partie du corps, qui se lisait comme un cache bricole. */
.fg-oeuvre[data-sensible="1"] img{filter:blur(22px) saturate(.7);transform:scale(1.06)}
[data-sensible-visible="1"] .fg-oeuvre[data-sensible="1"] img{filter:none;transform:none}
[data-sensible-visible="1"] .fg-tag--sensible{display:none}
.fg-tag--sensible{background:var(--ember-aplat);color:var(--on-ember)}

/* L'entree de page du catalogue vit hors de la grille des pieces : le titre
   se lit avant les filtres. */
.fg-grille--tete{padding-bottom:var(--ecart)}

/* Un titre de section DANS la grille : il occupe une rangee a lui, sinon on
   ne sait pas ce que la rangee suivante montre. */
.fg-titre-rangee{grid-column:1 / -1;margin:var(--ecart) 0 0;
  font-family:var(--sans);font-size:var(--t-micro);letter-spacing:.12em;
  text-transform:uppercase;font-weight:600;color:var(--ember-txt)}

/* Piece precedente / suivante. On parcourt une zone du corps sans repasser
   par le catalogue — il n'y avait aucun moyen de le faire. */
.fg-parcours{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(18rem,100%),1fr));
  gap:var(--ecart);padding:0 clamp(1rem,2.4vw,2rem) clamp(1.5rem,3vw,2.5rem)}
.fg-parcours a{display:grid;gap:.25rem;min-height:76px;align-content:center;
  padding:1rem 1.2rem;border-radius:var(--r-case);background:var(--surface);
  color:var(--ink);text-decoration:none}
.fg-parcours a:hover{background:var(--ink);color:var(--ground)}
.fg-parcours--suivant{text-align:right}
.fg-parcours span{font-size:var(--t-micro);letter-spacing:.1em;
  text-transform:uppercase;opacity:.7}
.fg-parcours b{font-family:var(--display);font-weight:600;font-size:var(--t-small);
  letter-spacing:.06em;text-transform:uppercase}

/* Le compteur d'une pastille de filtre : un volume, pas une decoration. */
.fg-cat-pill b{margin-left:.5rem;opacity:.7;font-weight:600}
/* Le filtre actif se voit, qu'il ait ete choisi au clic (aria-pressed) ou
   atteint par son adresse (aria-current). */
.fg-cat-pill[aria-pressed="true"],.fg-cat-pill[aria-current]{
  background:var(--ink);color:var(--ground)}
.fg-oeuvre[hidden]{display:none}

/* Le panier de la barre. Le compte est une pastille, pas un texte perdu :
   c'est ce qu'on cherche du coin de l'oeil. */
/* ── LA TRADUCTION DU TUNNEL WOOCOMMERCE ──────────────────────────────
   shop.css et main.css datent du nom de code precedent : ils consomment
   --c-cream, --c-wine, --radius-control… L'audit du 24/08 le voit sur le
   selecteur de quantite (« champ blanc a angles droits ») et sur les boutons
   du tunnel, tous hors systeme. On traduit ces jetons vers la peau 2.0, ici
   et une seule fois : la feuille de la boutique n'a pas besoin d'etre
   reecrite pour prendre la bonne couleur et le bon rayon. */
:root{
  --c-cream:var(--surface);
  --c-paper:var(--ground);
  --c-ink:var(--ink);
  --c-ink-soft:var(--ink-dim);
  --c-on-ink:var(--ground);
  --c-wine:var(--ember-aplat);
  --c-on-wine:var(--on-ember);
  --c-line:color-mix(in srgb,var(--ink) 16%,transparent);
  --c-line-strong:color-mix(in srgb,var(--ink) 34%,transparent);
  --radius-control:var(--r-pastille);
  --radius-card:var(--r-case);
}

/* ── LE MENU MOBILE ───────────────────────────────────────────────────
   Le bouton n'existe qu'en dessous de 900 px, la ou la barre ne peut plus
   porter les rubriques en clair. Le panneau occupe l'ecran : on lit toutes
   les entrees d'un coup, au lieu d'en deviner dans un rail qui defile. */
.fg-menu-bouton{display:none}
.fg-menu-bouton svg{width:20px;height:20px;fill:none;stroke:currentColor;
  stroke-width:1.8;stroke-linecap:round}
.fg-menu{position:fixed;inset:0;z-index:200;display:grid;
  grid-template-rows:1fr auto;gap:1rem;padding:5rem clamp(1rem,5vw,2rem) 2rem;
  background:var(--ground);color:var(--ink);overflow-y:auto;overscroll-behavior:contain}
.fg-menu[hidden]{display:none}
.fg-menu-liste{display:grid;align-content:start;gap:.2rem}
.fg-menu-liste a{display:flex;align-items:center;min-height:56px;
  padding:.4rem 0;color:inherit;text-decoration:none;
  font-family:var(--serif);font-weight:400;font-size:var(--t-h3);
  letter-spacing:-.015em;border-bottom:1px solid color-mix(in srgb,var(--ink) 14%,transparent)}
.fg-menu-liste a[aria-current]{color:var(--ember-txt)}
.fg-menu-pied{display:grid;gap:.7rem}
.fg-menu-carnet{display:inline-flex;align-items:center;min-height:44px;
  font-size:var(--t-micro);letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-dim);text-decoration:none}
.fg-menu-carnet:hover{color:var(--ember-txt)}
.fg-menu-action{display:inline-flex;align-items:center;justify-content:center;
  min-height:52px;padding:0 1.4rem;border-radius:var(--r-pastille);
  background:var(--ember-aplat);color:var(--on-ember);text-decoration:none;
  font-size:var(--t-micro);letter-spacing:.1em;text-transform:uppercase;font-weight:700}
/* La page ne defile plus derriere le panneau ouvert. */
body.fg-menu-ouvert{overflow:hidden}

@media (max-width:900px){
  .fg-nav{display:none}
  .fg-menu-bouton{display:inline-flex}
}

.fg-panier{position:relative}
.fg-panier svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round}
.fg-panier-compte{position:absolute;top:-.2rem;right:-.2rem;min-width:20px;height:20px;
  display:grid;place-items:center;padding:0 .25rem;border-radius:999px;
  background:var(--ember-aplat);color:var(--on-ember);font-size:.62rem;font-weight:700}

/* Un avertissement se lit avant, pas apres : il precede les photos et il est
   ecrit dans le texte courant, sans dramatiser. */
.fg-prevenir{display:flex;gap:.5rem;align-items:baseline;font-size:var(--t-small);
  color:var(--ink-dim);line-height:1.5}
.fg-prevenir::before{content:"";flex:0 0 auto;width:.5rem;height:.5rem;border-radius:50%;
  background:var(--ember-txt);transform:translateY(-.1em)}

.fg-compte{display:flex;flex-wrap:wrap;gap:.4rem 1.2rem;align-items:baseline;
  max-width:var(--shell);margin-inline:auto;
  padding:0 clamp(1rem,2.4vw,2rem) var(--ecart);color:var(--ink-dim);font-size:var(--t-small)}
.fg-compte b{color:var(--ink);font-weight:600}


/* ── LE RELEVE : des donnees en lignes, etiquette a gauche, valeur a droite
   Sert a la fiche d'une piece comme au bloc de coordonnees. Le filet est en
   currentColor melange, pour tenir sur n'importe quel fond de case. */
.fg-releve{display:grid;gap:0;margin-top:auto}
.fg-releve div{display:flex;flex-wrap:wrap;gap:.2rem 1rem;justify-content:space-between;
  padding:.55rem 0;border-top:1px solid color-mix(in srgb,currentColor 22%,transparent);
  font-size:var(--t-small)}
.fg-releve dt{font-weight:600}
.fg-releve dd{margin:0;text-align:right;opacity:.85;font-variant-numeric:tabular-nums}

@media (max-width:980px){
  .fg-grille{grid-template-columns:repeat(2,minmax(0,1fr))}
  .fg-case--large,.fg-case--studio,.fg-case--dire{grid-column:span 2}
  .fg-foot-in{grid-template-columns:1fr 1fr}
  .fg-foot-signature{white-space:normal}
}
@media (max-width:620px){
  .fg-bar{grid-template-columns:1fr auto}
  .fg-nav{grid-column:1 / -1}
  .fg-grille{grid-template-columns:1fr}
  .fg-case--large,.fg-case--studio,.fg-case--dire,.fg-case--haute,.fg-case--pleine{grid-column:span 1;grid-row:auto}
  .fg-foot-in{grid-template-columns:1fr}
  /* Les decoupes rentrent : a demi coupees par le bord, elles se lisent
     comme un defaut d'affichage et non comme un debordement voulu. */
  .fg-etoile--a{right:.4rem;top:-.9rem}
  .fg-etoile--b{left:.4rem;bottom:-.8rem}
}

/* ── LA PAGE D'ATTENTE ────────────────────────────────────────────────
   Une carte centree, et rien d'autre : ni barre, ni pied. Quand une image
   est fournie, elle occupe la moitie droite au-dela de 900 px ; sans elle,
   la carte se centre toute seule. La trame de points passe en fond, tres
   discrete : c'est sa technique, meme sur une page qui ne montre rien. */

@media (min-width:900px){
  /* La carte garde la main : deux tiers pour le texte, un tiers pour
     l'image. L'inverse ferait une page de photo avec une legende. */
}


/* ══ LA FICHE D UNE PIECE ══ */
/* ═══════════════════════════════════════════════════════════════════════
   LA FICHE — page de detail
   Une page de detail n'est pas une page de liste avec une case en plus :
   elle a une hierarchie propre. La piece occupe la largeur, les
   informations se rangent a cote, et tout ce qui suit repond aux questions
   qu'on se pose APRES avoir regarde — combien de temps, ca fait mal, et
   comment on s'y prend pour en avoir un.

   Elle sert aussi bien a une realisation qu'a un produit de la boutique :
   seule la case d'action change (prendre rendez-vous / ajouter au panier).
   ═══════════════════════════════════════════════════════════════════════ */

/* La piece : une grande image, qui garde ses proportions.
   La PORTEE de grille n'est pas declaree ici : elle vient des classes
   .fg-case--large et .fg-case--haute de la peau, qui sont les seules a savoir se
   reduire sous 620 px. Une portee redeclaree dans le CSS d'une page
   ressuscite une deuxieme colonne sur telephone. */
.fg-piece{padding:0;overflow:hidden;min-height:0}
.fg-piece img{width:100%;height:100%;object-fit:cover;aspect-ratio:4/5;
  border-radius:var(--r-case)}

/* Le releve vit dans la peau partagee : deux pages s en servent. */

/* Les vues de detail : plus petites, alignees, sans fiche. */
.fg-vue{padding:0;overflow:hidden;min-height:0}
.fg-vue img{width:100%;height:100%;object-fit:cover;aspect-ratio:1/1;
  border-radius:var(--r-case);filter:saturate(.85);
  transition:transform 620ms var(--ease)}
.fg-vue:hover img{transform:scale(1.05)}

/* Ce qu'il faut savoir : une liste de reponses courtes, en deux colonnes. */
.fg-savoir{display:grid;
  grid-template-columns:repeat(auto-fit,minmax(13rem,1fr));gap:1.2rem}
.fg-savoir h3,.fg-savoir h4{margin:0;font-family:var(--sans);font-size:var(--t-micro);letter-spacing:.12em;
  text-transform:uppercase;font-weight:600;color:var(--ember-txt)}
.fg-savoir p{margin-top:.35rem;font-size:var(--t-small);color:var(--ink-dim)}
.fg-case--ox .fg-savoir h3,.fg-savoir h4{color:var(--olive)}
.fg-case--ox .fg-savoir p{color:color-mix(in srgb,var(--on-ox) 86%,transparent)}

/* ══ LE FORMULAIRE DE PROJET ══ */
/* ═══════════════════════════════════════════════════════════════════════
   CONTACT — proposer un projet
   C'est la page qui decide si quelqu'un ecrit ou renonce. Deux principes :

   1. Le formulaire occupe la place PRINCIPALE, pas une colonne de droite.
      Sur beaucoup de sites de tatouage, il est relegue sous trois
      paragraphes d'explication — les gens abandonnent avant.
   2. Chaque champ dit pourquoi on le demande. Un champ « taille
      approximative » sans explication fait peur ; avec « en centimetres,
      meme au jugé », il se remplit.
   ═══════════════════════════════════════════════════════════════════════ */

/* La portee vient de .fg-case--large (peau), pas d'ici : voir single. */
.fg-formulaire{gap:1.2rem}
/* Le formulaire est un enfant unique de la case : c'est LUI qui porte le
   rythme vertical, sinon les six champs se collent les uns aux autres. */
/* UNE colonne, dite explicitement.
   Mesure faite en ligne le 24/08 : sans grid-template-columns, le navigateur
   avait fabrique deux colonnes implicites de 305 et 394 px, et les champs
   tombaient en deux piles inegales au lieu de s'empiler proprement. Une
   grille sans colonnes declarees n'est pas une grille, c'est un pari. */
.fg-form{display:grid;grid-template-columns:1fr;gap:1.2rem}
.fg-form>*{min-width:0}

/* La confirmation est le seul retour que recoit la personne apres l'envoi :
   elle se lit avant tout le reste, dans les deux themes. Le texte reste en
   --ink (13,6:1 en clair, 14,5:1 en sombre) et c'est la barre de gauche qui
   porte la couleur : un vert lisible sur du creme ne l'est plus sur du noir,
   alors qu'une barre n'a pas de contraste a tenir. */
.fg-form-notice{margin:0;padding:.9rem 1.1rem;border:0;
  border-left:4px solid var(--line);border-radius:var(--r-image);
  background:var(--ground);color:var(--ink);font-size:var(--t-small);line-height:1.5}
.fg-form-notice--ok{border-left-color:var(--moss)}
.fg-form-notice--error{border-left-color:var(--ember-txt)}
.fg-rangee{display:grid;grid-template-columns:repeat(auto-fit,minmax(13rem,1fr));gap:.9rem}
/* Les champs d'une meme rangee s'alignent par le BAS : l'un porte une ligne
   d'aide, l'autre non, et les deux cadres se retrouvaient decales. */
.fg-champ-bloc{display:grid;gap:.3rem;align-content:end}
.fg-champ-bloc label{font-size:var(--t-micro);letter-spacing:.1em;text-transform:uppercase;
  font-weight:600}
/* L'aide est SOUS l'etiquette et au-dessus du champ : lue avant de repondre,
   pas apres avoir hesite. */
.fg-aide{font-size:var(--t-micro);color:var(--ink-dim);line-height:1.45}
.fg-champ-bloc input,.fg-champ-bloc select,.fg-champ-bloc textarea{
  width:100%;min-height:48px;padding:.7rem 1rem;
  border:1px solid color-mix(in srgb,var(--ink) 22%,transparent);
  border-radius:var(--r-image);background:var(--ground);color:var(--ink);
  /* 16 px : en dessous, iOS zoome tout seul des qu'on touche le champ et la
     page part de travers. Et un champ se lit, il ne se devine pas. */
  font:inherit;font-size:1rem}
.fg-champ-bloc textarea{min-height:9rem;resize:vertical;line-height:1.55}
.fg-champ-bloc input::placeholder,.fg-champ-bloc textarea::placeholder{color:var(--ink-dim);opacity:1}
.fg-champ-bloc input:focus-visible,.fg-champ-bloc select:focus-visible,.fg-champ-bloc textarea:focus-visible{
  border-color:var(--ember-txt);outline:2px solid var(--ember-txt);outline-offset:1px}
.fg-obligatoire{color:var(--ember-txt)}
.fg-legende-champs{display:flex;gap:.5rem;align-items:baseline;margin:0}

/* Le depot de references : une zone qu'on voit, pas un bouton « Parcourir »
   perdu au milieu du texte. */
.fg-depot{display:grid;gap:.3rem;padding:1rem;border-radius:var(--r-image);
  background:var(--ground);border:2px dashed color-mix(in srgb,var(--ink) 28%,transparent)}
.fg-depot strong{font-size:var(--t-small)}
.fg-depot input[type=file]{font-size:var(--t-micro);min-height:44px}

.fg-accord{display:flex;gap:.7rem;align-items:flex-start;font-size:var(--t-small);
  line-height:1.5;color:var(--ink-dim)}
.fg-accord input{width:24px;height:24px;min-height:24px;flex:0 0 auto;margin-top:.15rem;
  accent-color:var(--ember-aplat)}
.fg-envoyer{display:inline-flex;align-items:center;gap:.6rem;align-self:flex-start;
  min-height:52px;padding:0 1.6rem;border:0;border-radius:var(--r-pastille);
  background:var(--ember-aplat);color:var(--on-ember);cursor:pointer;
  font-size:var(--t-micro);letter-spacing:.1em;text-transform:uppercase;font-weight:700}
.fg-envoyer:hover{background:var(--ink);color:var(--ground)}
.fg-envoyer .fg-gl{width:13px;height:13px;fill:currentColor}

/* Le deroule : des etapes numerotees, pour que personne ne se demande
   « et apres, il se passe quoi ? ». */
/* ── LES QUESTIONS FREQUENTES ─────────────────────────────────────────
   Rendues brutes, elles donnaient douze <details> a 12 px avec la fleche du
   navigateur et des zones de clic sous 44 px. La question occupe desormais
   toute la largeur : c'est la cible, et elle fait 56 px de haut. */
.fg-faq{display:grid}
.fg-faq details{border-top:1px solid color-mix(in srgb,currentColor 20%,transparent)}
.fg-faq details:last-child{border-bottom:1px solid color-mix(in srgb,currentColor 20%,transparent)}
.fg-faq summary{display:flex;gap:1rem;align-items:center;justify-content:space-between;
  min-height:56px;padding:.9rem 0;cursor:pointer;list-style:none;
  font-size:var(--t-body);font-weight:600;line-height:1.4}
.fg-faq summary::-webkit-details-marker{display:none}
/* Le signe dit l'etat, il ne decore pas : + ferme, − ouvert. */
.fg-faq summary::after{content:"+";flex:0 0 auto;font-family:var(--display);
  font-size:var(--t-lede);line-height:1;color:var(--ember-txt)}
.fg-faq details[open] summary::after{content:"\2212"}
.fg-faq summary:focus-visible{outline:2px solid var(--ember-txt);outline-offset:2px}
.fg-faq p{margin:0 0 1rem;max-width:65ch;font-size:var(--t-small);
  line-height:1.6;color:var(--ink-dim)}

/* ── LE STUDIO 3D ─────────────────────────────────────────────────────
   CE BLOC A ÉTÉ RETIRÉ, ET C'EST LA CORRECTION.

   Le thème restylait l'extension : polices, couleurs, boutons, cent
   quatre-vingts lignes qui écrasaient ses propres règles. Elles ont été
   écrites quand l'extension n'avait pas de palette à elle. Depuis, elle en
   a une, branchée sur les mêmes jetons que le site.

   Ces règles utilisaient encore les jetons de l'ancienne peau — `--ink-dim`,
   `--ember-aplat`, `--display` — qui ne suivent pas la bascule clair/sombre.
   Mesuré sur le site : en mode CLAIR, douze textes du panneau sortaient à
   1,03:1, crème sur crème. En mode sombre, aucun défaut : c'est le mode
   clair seul qui était illisible, parce que ces jetons y gardaient une
   valeur de mode sombre.

   Le thème ne restyle plus l'extension. Elle s'habille elle-même, en lisant
   `--creme`, `--case`, `--encre`, `--brique` — les jetons du site. */

/* La sortie du studio : deux actions, pas une. Revenir, ou continuer vers la
   demande — l'outil ne debouchait sur rien, alors que la page Projet promet
   qu'on peut envoyer son placement. */
.fg-studio-actions{position:fixed;z-index:80;left:50%;transform:translateX(-50%);
  bottom:clamp(.7rem,2vw,1.4rem);display:flex;flex-wrap:wrap;gap:.5rem;
  justify-content:center;max-width:calc(100% - 2rem)}
.fg-studio-actions a{display:inline-flex;align-items:center;min-height:48px;
  padding:0 1.2rem;border-radius:var(--r-pastille);text-decoration:none;
  background:var(--surface);color:var(--ink);
  font-size:var(--t-micro);letter-spacing:.1em;text-transform:uppercase;font-weight:700}
.fg-studio-actions a.fg-studio-suite{background:var(--ember-aplat);color:var(--on-ember)}
.fg-studio-actions a:hover{background:var(--ink);color:var(--ground)}

/* ══ LES AVIS ═════════════════════════════════════════════════════════
   WooCommerce ecrit son propre balisage : un titre qui doublonne avec le
   notre, un avatar Gravatar — donc un appel reseau vers un service tiers,
   ce que ce site s'interdit — un selecteur natif, et des etoiles qui sont
   des liens. On ne reecrit pas le module : on l'habille, ici, avec les
   memes jetons que le reste.

   Regle de fond : un avis se lit d'abord (qui, quand, combien d'etoiles,
   quoi), et seulement ensuite on propose d'en ecrire un. */

/* ── LA CASE DES AVIS EST SOMBRE ────────────────────────────
   « Toujours tres mal designes — fais sombre et propre. »

   Une case creme sous une fiche creme ne separait rien : on ne voyait pas
   ou la parole passait du studio a la clientele. L'encre du site devient le
   fond, la creme devient le texte, l'or porte les etoiles. Aucune couleur
   nouvelle — deux jetons qui echangent leurs roles.

   Contraste calcule : --ground #e7e3c8 sur --ink #1b1905 = 14,6:1. */
#avis{background:var(--ink);color:var(--ground);border:0}
#avis .fg-haut h2{color:var(--ground)}
#avis .fg-haut h2 i{color:color-mix(in srgb,var(--ground) 68%,transparent)}

/* ── PLUS DE FAUX LIENS DANS LES AVIS ───────────────────────
   « Il y a des endroits ou les textes sont soulignes comme objet qui fait
   partie des categories. » WooCommerce ecrit « Annuler la reponse » et les
   cinq etoiles en <a href="#"> : soulignes, ils prenaient l'apparence de
   liens de rubrique au milieu d'un avis. Ce sont des commandes, pas des
   destinations. */
#avis :where(a, .woocommerce-review-link){text-decoration:none;color:var(--olive)}
#avis :where(a, .woocommerce-review-link):hover{color:var(--ground);text-decoration:none}
#avis #cancel-comment-reply-link{font-size:var(--t-micro);letter-spacing:.06em}

/* Le titre de WooCommerce doublonne avec celui de la carte. */
#avis .woocommerce-Reviews-title{position:absolute;width:1px;height:1px;
  margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}

/* Gravatar est un service exterieur : aucune image ne part le chercher. */
#avis .avatar,#avis .comment_container > img{display:none}

#avis .woocommerce-Reviews{max-width:none;margin:0}
#avis #comments{margin:0 0 1.4rem}
#avis .commentlist{display:grid;gap:0;margin:0;padding:0;list-style:none}
#avis .commentlist .review{padding:1.1rem 0;
  border-top:1px solid color-mix(in srgb,var(--ground) 22%,transparent)}
#avis .commentlist .review:first-child{border-top:0;padding-top:0}
#avis .comment_container{display:block}
#avis .comment-text{min-width:0}

/* La note d'un avis : des etoiles pleines sur des etoiles vides, sans
   image ni police d'icones. */
#avis .star-rating{position:relative;display:inline-block;width:5.6em;height:1em;
  overflow:hidden;font-size:var(--t-small);line-height:1;letter-spacing:.12em;
  color:var(--olive);font-family:var(--sans)}
#avis .star-rating::before{content:"★★★★★";color:color-mix(in srgb,var(--ground) 34%,transparent);position:absolute;inset:0;
  color:color-mix(in srgb,var(--ink) 22%,transparent)}
#avis .star-rating span{position:absolute;inset:0;overflow:hidden;
  white-space:nowrap;text-indent:-999em}
#avis .star-rating span::before{content:"★★★★★";position:absolute;left:0;top:0;
  text-indent:0;color:var(--olive)}

#avis .meta{color:color-mix(in srgb,var(--ground) 70%,transparent);
  display:flex;flex-wrap:wrap;gap:.2rem .6rem;align-items:baseline;
  margin:.5rem 0 .4rem;font-size:var(--t-micro);letter-spacing:.06em;
  text-transform:uppercase;color:var(--ink-dim)}
#avis .woocommerce-review__author{color:var(--ground);font-weight:600}
#avis .woocommerce-review__dash{opacity:.5}
#avis .description{color:var(--ground);font-size:var(--t-body);line-height:1.6;max-width:65ch}
#avis .description p{margin:0}

/* Ecrire un avis : un formulaire du site, pas un formulaire de commentaire. */
#avis #review_form_wrapper{padding-top:1.2rem;
  border-top:1px solid color-mix(in srgb,var(--ground) 22%,transparent)}
#avis .comment-reply-title{display:block;margin-bottom:.9rem;
  font-family:var(--display);font-weight:600;font-size:var(--t-small);
  letter-spacing:.08em;text-transform:uppercase}
#avis .comment-form{display:grid;grid-template-columns:1fr;gap:1rem}
#avis .comment-form > p{margin:0}
#avis .comment-form label{color:color-mix(in srgb,var(--ground) 86%,transparent);
  display:block;margin-bottom:.3rem;
  font-size:var(--t-micro);letter-spacing:.1em;text-transform:uppercase;font-weight:600}
#avis .comment-form .required{color:var(--olive)}
#avis .comment-form textarea{width:100%;min-height:8rem;padding:.7rem 1rem;
  border:1px solid color-mix(in srgb,var(--ground) 30%,transparent);
  border-radius:var(--r-image);
  background:color-mix(in srgb,var(--ground) 10%,transparent);color:var(--ground);
  font:inherit;font-size:1rem;line-height:1.55;resize:vertical}
#avis .comment-form textarea:focus-visible{outline:2px solid var(--olive);
  outline-offset:1px;border-color:var(--olive)}

/* Les etoiles a cliquer. WooCommerce en fait des liens : on leur donne au
   moins la taille d'une vraie cible et un etat visible. */
#avis .comment-form-rating .stars{display:flex;gap:.15rem;margin:0}
#avis .comment-form-rating .stars span{display:flex;gap:.15rem}
#avis .comment-form-rating .stars a{display:inline-flex;align-items:center;
  justify-content:center;width:44px;height:44px;overflow:hidden;
  text-indent:-999em;position:relative;text-decoration:none;border-radius:50%}
#avis .comment-form-rating .stars a::before{content:"★";position:absolute;
  inset:0;display:grid;place-items:center;text-indent:0;
  font-size:1.35rem;line-height:1;color:color-mix(in srgb,var(--ground) 34%,transparent)}
#avis .comment-form-rating .stars a:hover::before,
#avis .comment-form-rating .stars a:focus-visible::before,
#avis .comment-form-rating .stars.selected a.active::before,
#avis .comment-form-rating .stars.selected a:not(.active)::before{color:var(--olive)}
#avis .comment-form-rating .stars.selected a.active ~ a::before{color:color-mix(in srgb,var(--ground) 34%,transparent)}

#avis .form-submit{margin:0}
#avis .comment-form .submit{display:inline-flex;align-items:center;
  min-height:52px;padding:0 1.6rem;border:0;border-radius:var(--r-pastille);
  background:var(--olive);color:var(--on-olive);cursor:pointer;
  font:inherit;font-size:var(--t-micro);letter-spacing:.1em;
  text-transform:uppercase;font-weight:700}
#avis .comment-form .submit:hover{background:var(--ground);color:var(--ink)}

/* Un avis en attente de moderation le dit, plutot que de disparaitre. */
#avis .comment-awaiting-moderation{display:block;margin-top:.4rem;
  font-size:var(--t-micro);color:var(--olive)}

.fg-etapes{display:grid;gap:0;margin-top:auto}
.fg-etapes div{display:grid;grid-template-columns:auto 1fr;gap:.2rem .8rem;
  padding:.7rem 0;border-top:1px solid color-mix(in srgb,currentColor 22%,transparent)}
.fg-etapes b{grid-row:span 2;font-family:var(--serif);font-weight:400;
  font-size:calc(var(--t-lede) + .3rem);
  font-variant-numeric:tabular-nums;color:var(--olive);line-height:1}
.fg-etapes strong{font-size:var(--t-small)}
.fg-etapes span{font-size:var(--t-micro);opacity:.85;line-height:1.45}

/* ══ LA BOUTIQUE ══ */
/* ═══════════════════════════════════════════════════════════════════════
   BOUTIQUE
   Elle n'ajoute rien a la peau : la fiche illustree, le prix, les etats et
   la ligne de comptage y vivent deja. Seule difference de fond avec les
   Realisations : ici la fiche porte un PRIX et un ETAT de stock, et l'etat
   ne se dit pas qu'en couleur — « Epuise » est ecrit.
   ═══════════════════════════════════════════════════════════════════════ */

/* Un produit epuise reste visible mais recule : on ne cache pas ce qui a
   existe, on le desature. L'image seule est atteinte, pas le texte, qui
   doit rester lisible. */
.fg-epuise img{filter:saturate(.15) contrast(.95)}
.fg-epuise .fg-prix{text-decoration:line-through;color:var(--ink-dim)}

/* Les conditions d'achat, en bas de grille : elles repondent aux questions
   qu'on se pose AVANT de cliquer, pas apres. */
.fg-conditions{grid-column:1 / -1;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));gap:clamp(1rem,2.5vw,2rem);
  padding:clamp(1.2rem,2.6vw,2rem);background:var(--surface);border-radius:var(--r-case)}
.fg-conditions h2,.fg-conditions h3{font-family:var(--sans);font-size:var(--t-micro);letter-spacing:.12em;
  text-transform:uppercase;font-weight:600;color:var(--ember-txt)}
.fg-conditions p{margin-top:.4rem;font-size:var(--t-small);color:var(--ink-dim)}

/* ══ LE SOMMAIRE INTERNE ══════════════════════════════════════════════
   Une seule page du site porte trois sujets : Le handpoke (la technique, la
   formation, l'atelier). Sans sommaire annonce en haut, elle devient le
   fourre-tout du site. C'est la contrepartie assumee de la regle « une page,
   un sujet » : la page qui y deroge doit dire d'entree ce qu'elle contient. */
/* Les raccourcis vivent DANS le bandeau, sous l'accroche.
   Ils formaient une rangee de pastilles flottant au-dessus du titre : une
   barre de navigation qui n'en etait pas une, posee la ou on attend le
   sujet. Ils sont maintenant la fin du bandeau — trois portes offertes une
   fois qu'on sait de quoi la page parle. Sur l'oxblood du bandeau, la
   pastille creme et l'or : contraste calcule 12,1:1. */
.fg-raccourcis{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:1.2rem}
.fg-raccourcis a{display:inline-flex;align-items:center;gap:.45rem;min-height:44px;
  padding:0 1rem;border-radius:var(--r-pastille);
  border:1px solid color-mix(in srgb,var(--on-ox) 40%,transparent);
  background:transparent;color:var(--on-ox);text-decoration:none;
  font-size:var(--t-micro);letter-spacing:.08em;text-transform:uppercase;
  font-weight:600;
  transition:background-color var(--dur-fast) var(--ease),color var(--dur-fast) var(--ease)}
.fg-raccourcis a:hover{background:var(--on-ox);border-color:var(--on-ox);color:var(--ox)}
/* Le decalage d'ancre : sans lui, chaque section vient se cacher sous la
   barre collante et l'on croit que le lien n'a pas marche. */
.fg-grille [id]{scroll-margin-top:calc(var(--header-h) + 1.5rem)}

/* ══ LA FORMATION ═════════════════════════════════════════════════════
   Elle etait enfermee dans une fenetre surgissante, imprimee dans le pied de
   CHAQUE page du site. C'est une prestation payante : elle a droit a une
   section entiere, lisible, indexable. */
.fg-formation{grid-column:1 / -1;display:grid;gap:var(--ecart);
  grid-template-columns:repeat(auto-fit,minmax(min(18rem,100%),1fr))}
.fg-formation-tete{grid-column:1 / -1}
.fg-liste{display:grid;gap:.5rem;margin:0;padding:0;list-style:none}
.fg-liste li{display:grid;grid-template-columns:auto 1fr;gap:.7rem;
  font-size:var(--t-small);line-height:1.5}
.fg-liste .fg-gl{width:11px;height:11px;margin-top:.42em;fill:var(--olive)}
.fg-case--ox .fg-liste .fg-gl,.fg-case--olive .fg-liste .fg-gl{fill:var(--olive)}

/* ══ LE STUDIO 3D, PLEIN ECRAN ════════════════════════════════════════
   La page defilait : on perdait le modele en faisant defiler, l'outil etait
   inutilisable. Le gabarit n'imprime plus ni bandeau ni pied ; il ne reste
   que la barre, rendue transparente au-dessus du canevas.
   overscroll-behavior:none empeche le rebond de la page derriere le geste
   de rotation. On ne met PAS position:fixed sur body : cela perdrait la
   position de defilement au retour. */
body.fg-studio-plein{overflow:hidden;overscroll-behavior:none}
.fg-studio-plein .fg-page{border-radius:0;height:100dvh;display:grid;
  grid-template-rows:auto 1fr}
.fg-studio-plein .fg-bar{
  background:color-mix(in srgb,var(--ground) 72%,transparent);
  backdrop-filter:blur(10px)}
/* La scene est une GRILLE d'une seule case.
   La coque du studio recevait `height:100%` — mais un pourcentage de
   hauteur contre un parent de hauteur indefinie retombe sur `auto`, donc
   sur la hauteur du contenu. Mesure en ligne le 25 aout : cadre de 812 px,
   coque de 1086 px, 274 px sous la ligne de flottaison, sur une page qui
   ne doit pas defiler. Etiree par la grille au lieu d'un pourcentage, elle
   prend exactement la case ; `min-height:0` l'autorise a etre plus petite
   que son contenu, et c'est le panneau qui defile. */
.fg-studio-scene{position:relative;display:grid;grid-template-rows:minmax(0,1fr);
  min-height:0;overflow:hidden;
  border-radius:var(--r-case);margin:0 clamp(.5rem,1.4vw,1.1rem) clamp(.5rem,1.4vw,1.1rem)}
/* minmax(0,1fr) a CHAQUE etage, sinon la rangee se dimensionne sur le
   contenu et l'enfant repousse le cadre au lieu d'y tenir. */
.fg-studio-scene > .fgs{min-height:0;min-width:0;
  display:grid;grid-template-rows:minmax(0,1fr)}
/* inset:0 n'etire pas un element remplace : le canevas garderait sa taille
   intrinseque. Largeur et hauteur explicites, donc. */
.fg-studio-scene canvas{width:100%;height:100%}
/* La coque du studio remplit la scene sur grand ecran : c'est elle qui
   porte la disposition a deux volets. */
.fg-studio-scene .fgs .fgs-shell{width:100%;height:auto;min-height:0;
  border-radius:var(--r-case)}

@media (max-width:900px){
  /* Sur telephone, les deux volets s'empilent : la page DOIT pouvoir
     defiler, sinon les reglages sont inatteignables. Le verrou ne vaut que
     la ou la scene occupe tout l'ecran. */
  body.fg-studio-plein{overflow:auto}
  .fg-studio-plein .fg-page{height:auto;min-height:100dvh}
  .fg-studio-scene{overflow:visible}
  .fg-studio-scene .fgs .fgs-shell{height:auto;min-height:0}
}

/* ══ LE PANIER ET LA COMMANDE ═════════════════════════════════════════
   Constate sur capture le 24/08 : le panier etait le gabarit brut du bloc
   WooCommerce — encadres gris, bouton « Valider la commande » sur un aplat
   ardoise qui n'existe nulle part ailleurs sur le site, tableau colle a
   droite d'un grand vide. Il prend la peau, sans qu'on touche au tunnel.

   Ces blocs sont recents cote WooCommerce : ils s'appuient sur des classes
   .wc-block-*. On les habille en surface, avec le rayon et les pastilles du
   site. */
.wc-block-components-sidebar-layout,
.wp-block-woocommerce-cart,
.wp-block-woocommerce-checkout{max-width:none}

/* Les deux colonnes du panier : le contenu a gauche, le total a droite. */
.wc-block-cart .wc-block-components-sidebar-layout{
  display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);
  gap:var(--ecart);align-items:start}
@media (max-width:900px){
  .wc-block-cart .wc-block-components-sidebar-layout{grid-template-columns:1fr}
}

/* Chaque bloc est une case du site. */
.wc-block-components-main,
.wc-block-components-sidebar,
.wc-block-components-order-summary,
.wc-block-components-totals-wrapper{background:var(--surface);
  border-radius:var(--r-case);border:0}
.wc-block-components-main{padding:clamp(1.1rem,2.2vw,1.7rem)}
.wc-block-components-sidebar{padding:clamp(1.1rem,2.2vw,1.7rem)}

/* Les lignes de produit : un filet, pas un tableau. */
.wc-block-cart-items,.wc-block-cart-items__row{border:0}
.wc-block-cart-items__row{padding:1rem 0;
  border-top:1px solid color-mix(in srgb,var(--ink) 14%,transparent)}
.wc-block-cart-items__row:first-child{border-top:0}
.wc-block-cart-item__image img{border-radius:var(--r-image)}
.wc-block-components-product-name{font-family:var(--display);font-weight:600;
  font-size:var(--t-small);letter-spacing:.06em;text-transform:uppercase;
  color:var(--ink);text-decoration:none}
.wc-block-components-product-name:hover{color:var(--ember-txt)}

/* Les prix : le meme dessin que sur la fiche. */
.wc-block-components-product-price,
.wc-block-components-totals-item__value{font-family:var(--display);
  font-weight:600;font-variant-numeric:tabular-nums;color:var(--ink)}
.wc-block-components-totals-item__label{font-size:var(--t-small);color:var(--ink-dim)}
.wc-block-components-totals-footer-item{
  border-top:1px solid color-mix(in srgb,var(--ink) 18%,transparent)}
.wc-block-components-totals-footer-item .wc-block-components-totals-item__value{
  font-size:var(--t-lede)}

/* Le selecteur de quantite : une pastille, comme partout. */
.wc-block-components-quantity-selector{border:1px solid color-mix(in srgb,var(--ink) 22%,transparent);
  border-radius:var(--r-pastille);background:var(--ground);overflow:hidden}
.wc-block-components-quantity-selector input{min-height:44px;background:none;
  color:var(--ink);font:inherit;font-variant-numeric:tabular-nums}
.wc-block-components-quantity-selector__button{min-width:44px;min-height:44px;
  border:0;background:none;color:var(--ink);cursor:pointer;font-size:1.1rem}
.wc-block-components-quantity-selector__button:hover{background:var(--ink);color:var(--ground)}

/* Le bouton qui engage : celui du site, pas un aplat ardoise. */
.wc-block-cart__submit-button,
.wc-block-components-checkout-place-order-button,
.wc-block-components-button:not(.is-link){
  display:inline-flex;align-items:center;justify-content:center;
  min-height:52px;padding:0 1.6rem;border:0;border-radius:var(--r-pastille);
  background:var(--ember-aplat);color:var(--on-ember);cursor:pointer;
  font-family:var(--display);font-size:var(--t-micro);letter-spacing:.1em;
  text-transform:uppercase;font-weight:700}
.wc-block-cart__submit-button:hover,
.wc-block-components-checkout-place-order-button:hover,
.wc-block-components-button:not(.is-link):hover{background:var(--ink);color:var(--ground)}
.wc-block-components-button.is-link{color:var(--ember-txt)}

/* Codes promo, champs, panneaux depliants. */
.wc-block-components-panel__button{min-height:44px;font-family:var(--display);
  font-size:var(--t-micro);letter-spacing:.08em;text-transform:uppercase;
  font-weight:600;color:var(--ink)}
.wc-block-components-text-input input,
.wc-block-components-textarea,
.wc-block-components-select__container{border-radius:var(--r-image);
  border:1px solid color-mix(in srgb,var(--ink) 22%,transparent);
  background:var(--ground);color:var(--ink)}
.wc-block-components-text-input input{min-height:48px;font-size:1rem}

/* Un panier vide dit quoi faire, il ne se contente pas de constater. */
.wp-block-woocommerce-empty-cart-block{background:var(--surface);
  border-radius:var(--r-case);padding:clamp(1.2rem,3vw,2rem)}

/* ══ WOOCOMMERCE ══════════════════════════════════════════════════════
   Les etiquettes sont les CATEGORIES de produit. Les etoiles disent la note
   ET l'ecrivent : une note portee par la seule couleur d'une etoile est
   illisible pour qui ne la distingue pas. */
.fg-etiquettes{display:flex;flex-wrap:wrap;gap:.35rem}
.fg-etoiles{display:inline-flex;align-items:center;gap:.3rem;font-size:var(--t-micro);
  font-variant-numeric:tabular-nums}
.fg-etoiles-jauge{position:relative;display:inline-block;width:5.6em;height:1em;
  color:color-mix(in srgb,currentColor 30%,transparent)}
.fg-etoiles-jauge::before,.fg-etoiles-plein::before{
  content:"★★★★★";position:absolute;inset:0;letter-spacing:.1em;line-height:1}
.fg-etoiles-plein{position:absolute;inset:0;overflow:hidden;color:var(--olive);
  white-space:nowrap}
.fg-avis{grid-column:1 / -1;display:grid;gap:var(--ecart);
  grid-template-columns:repeat(auto-fit,minmax(min(20rem,100%),1fr))}
.fg-avis-un{display:grid;gap:.5rem;padding:clamp(1rem,2vw,1.5rem);
  background:var(--surface);border-radius:var(--r-case)}
.fg-avis-un p{font-size:var(--t-small)}
.fg-avis-qui{font-size:var(--t-micro);letter-spacing:.08em;text-transform:uppercase;
  font-weight:600;color:var(--ink-dim)}
/* Un produit sans avis ne doit pas afficher un bloc vide qui donne
   l'impression que la page est cassee. */
.fg-avis-vide{color:var(--ink-dim);font-size:var(--t-small)}
.fg-woo-notice{grid-column:1 / -1;margin:0;padding:1rem 1.2rem;
  border-radius:var(--r-case);background:var(--olive);color:var(--on-olive);
  font-size:var(--t-small);font-weight:600;list-style:none}
.fg-quantite{display:flex;align-items:center;gap:.5rem}
.fg-quantite input{width:5rem;min-height:48px;padding:.6rem .8rem;border:0;
  border-radius:var(--r-image);background:var(--ground);color:var(--ink);
  font:inherit;text-align:center;font-variant-numeric:tabular-nums}


/* ══ RESPONSIVE ═══════════════════════════════════════════════════════
   Trois largeurs declarees, et pas une de plus : 1000 px (la grille passe a
   deux colonnes), 760 px (la barre se reorganise), 620 px (une colonne).
   Des points de rupture eparpilles laissent des trous ou plus rien n'est
   prevu — le projet en a deja fait les frais entre 701 et 820 px. */

.fg-marque-logo{width:46px;height:46px;flex:0 0 auto;object-fit:contain;
  border-radius:var(--r-pastille)}

@media (max-width:760px){
  /* La marque et les outils tiennent sur la premiere rangee, les rubriques
     passent dessous et DEFILENT : six pastilles empilees mangeraient tout
     l'ecran avant le premier contenu. */
  .fg-bar{gap:.5rem .6rem;padding:.6rem clamp(.8rem,3vw,1.2rem)}
  .fg-marque{order:1}
  .fg-tool{order:2;margin-left:auto}
  .fg-etat-carnet{order:3}
  .fg-nav{order:4;flex:1 0 100%;flex-wrap:nowrap;overflow-x:auto;
    scrollbar-width:none;padding-bottom:.15rem;
    /* La rangee s'arrete sur une pastille, pas au milieu d'un mot. */
    scroll-snap-type:x proximity;overscroll-behavior-x:contain}
  .fg-nav::-webkit-scrollbar{display:none}
  .fg-nav a{flex:0 0 auto;scroll-snap-align:start}
  .fg-marque-logo,.fg-marque-rond{width:40px;height:40px}
}

@media (max-width:620px){
  /* Le carnet quitte la barre : son information est reprise telle quelle
     dans le pied, et la barre doit rester lisible avant tout. */
  .fg-etat-carnet{display:none}
  .fg-marque span span{display:none}
  .fg-cats,.fg-sommaire{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;
    overscroll-behavior-x:contain}
  .fg-cats::-webkit-scrollbar,.fg-sommaire::-webkit-scrollbar{display:none}
  .fg-cats .fg-cat-pill,.fg-sommaire a{flex:0 0 auto}
  /* Un formulaire en une seule colonne : deux champs cote a cote sous
     400 px donnent des champs ou l'on ne voit pas ce qu'on tape. */
  .fg-rangee{grid-template-columns:1fr}
}

@media (max-width:420px){
  /* Sur les plus petits ecrans, la fiche illustree perd son ratio 4/5 :
     l'image mangeait l'ecran entier et la fiche passait sous la ligne de
     flottaison a chaque piece. */
  .fg-oeuvre img{aspect-ratio:3/2}
}

/* ══ VENIR AU STUDIO ══════════════════════════════════════════════════
   La carte n'existait pas sur le site : le gabarit de Contact n'appelait
   pas le fichier qui la contenait. Elle est maintenant a sa place, et
   dessinee ici plutot que chargee chez Google — le contrat interdit tout
   appel reseau au chargement, et un cadre gris « acceptez pour voir » n'est
   pas une carte.

   Le dessin est schematique et assume : quelques rues, des ilots, un point.
   Il situe, il ne cartographie pas. Le plan detaille reste a un clic. */
.fg-lieu-plan{position:relative;display:grid;
  grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:0;
  border-radius:var(--r-image);overflow:hidden;background:var(--ground);
  border:1px solid var(--line);min-height:15rem}
.fg-lieu-dessin,.fg-lieu-iframe{display:block;width:100%;height:100%;
  min-height:15rem;border:0}
.fg-lieu-fond{fill:var(--ground)}
.fg-lieu-ilots rect{fill:var(--surface)}
.fg-lieu-rues path{stroke:var(--line);stroke-width:9;fill:none;
  stroke-linecap:round}
/* L'impasse : plus fine que les rues, elle se lit comme une desserte. */
.fg-lieu-impasse path{stroke:var(--line);stroke-width:5;fill:none;
  stroke-linecap:round}
.fg-lieu-point circle{fill:var(--ox)}
.fg-lieu-halo{fill:var(--ember-aplat);opacity:.22}

.fg-lieu-fiche{display:flex;flex-direction:column;gap:.9rem;
  justify-content:center;padding:clamp(1rem,2.4vw,1.8rem);
  background:var(--surface);border-left:1px solid var(--line)}
.fg-lieu-fiche address{font-style:normal;font-size:var(--t-lede);
  line-height:1.4;color:var(--ink)}
.fg-lieu-actions{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center}
/* Le bouton du plan detaille est SECOND : l'itineraire est le geste
   attendu, la carte n'est qu'un reperage. */
.fg-lieu-charger{min-height:44px;padding:0 .9rem;border:1px solid var(--line);
  border-radius:var(--r-pastille);background:transparent;color:var(--ink);
  font:inherit;font-size:var(--t-small);cursor:pointer}
.fg-lieu-charger:hover{background:var(--ink);color:var(--ground);
  border-color:var(--ink)}
.fg-lieu-note{margin:0;font-size:var(--t-micro);color:var(--ink-dim);
  line-height:1.5;max-width:44ch}

@media (max-width:760px){
  /* Le dessin passe au-dessus, l'adresse dessous : cote a cote, aucun des
     deux n'a la largeur pour se lire. */
  .fg-lieu-plan{grid-template-columns:minmax(0,1fr)}
  .fg-lieu-fiche{border-left:0;border-top:1px solid var(--line)}
  .fg-lieu-dessin,.fg-lieu-iframe{min-height:12rem}
}

/* ══ LE RESTE DE LA BOUTIQUE, SOUS LA FICHE ═══════════════════════════
   Les autres produits occupaient la colonne de droite de la fiche : on
   lisait la description avec trois vignettes qui tiraient l'oeil a cote.
   Ils forment maintenant une rangee pleine largeur, sous les avis, avec
   ses propres pastilles de categorie. */
.fg-cats--produits{grid-column:1 / -1;margin-top:var(--ecart)}
.fg-grille--produits{grid-column:1 / -1;display:grid;
  grid-template-columns:repeat(auto-fill,minmax(min(100%,15rem),1fr));
  align-items:start;gap:var(--ecart);margin:0}
/* Une pastille de categorie est ici un <button> : sans remise a zero, le
   navigateur lui met son propre fond gris et son propre texte. */
.fg-cats--produits .fg-cat-pill{font:inherit;font-size:var(--t-small);
  cursor:pointer;-webkit-appearance:none;appearance:none}

/* ══ L'ACCUEIL EN QUATRE TEMPS ════════════════════════════════════════
   Neuf cases de meme poids alignees, c'est une liste : l'oeil ne sait pas
   par ou commencer. Chaque temps s'ouvre desormais par un titre qui
   traverse la grille, et le regard reprend un ordre. */

/* Le titre de rangee EXISTE deja (petite etiquette capitale, plus haut). On
   lui ajoute une variante « qui ouvre » : meme role, meme composant, mais
   elle porte un vrai titre et le lien « en voir plus » a l'autre bout.
   Deux composants pour titrer une rangee auraient diverge des la premiere
   retouche. */
/* Sans filet depuis le 03/09 : « un filet blanc inutile sous la rangee
   Realisations ». Le trait separait le titre de ses propres images alors
   qu'il les annonce — il decoupait ce qu'il devait rassembler. La hierarchie
   est deja portee par la taille du serif et par l'ecart au-dessus. */
.fg-titre-rangee--ouvre{display:flex;align-items:baseline;
  justify-content:space-between;gap:1rem;flex-wrap:wrap;
  margin-top:clamp(1.4rem,3vw,2.6rem);padding-bottom:.2rem}
/* « Grandir les titres » : dans cette peau, c'est la taille qui porte le
   poids — pas la capitale, pas la graisse. */
.fg-titre-rangee--ouvre h2{font-family:var(--serif);font-size:var(--t-h2);
  font-weight:400;line-height:1;letter-spacing:-.02em;
  text-transform:none;color:var(--ink)}
/* « En voir plus » descendait trop bas. Mesure en ligne le 03/09, ecran de
   1280 px : le bas du titre tombait a 53 px du haut de la rangee, le bas du
   lien a 63 px — dix pixels sous la ligne, sur les trois rangees.
   La cause : min-height:44px. En alignement sur la baseline, la boite de
   44 px deborde sous le texte et pousse la rangee a 75 px alors que le
   titre n'en demande que 64.
   La cible tactile reste garantie, mais elle est portee par un calque qui
   ne compte pas dans la mise en page. */
.fg-titre-rangee--ouvre a{position:relative;display:inline-flex;align-items:center;
  color:inherit;text-decoration:none;border-bottom:1px solid currentColor;
  padding-bottom:1px;transition:color var(--dur-fast) var(--ease)}
.fg-titre-rangee--ouvre a::after{content:"";position:absolute;
  left:0;right:0;top:50%;height:44px;transform:translateY(-50%)}
.fg-titre-rangee--ouvre a:hover{color:var(--ink)}

/* Le champ de points du bandeau. Il se pose SOUS le texte : le titre garde
   son contraste, le dessin ne fait que l'accompagner.
   Le nom : .fg-champ etait deja pris par le champ e-mail du pied de page. */
.fg-pointille,.fg-hero-media{position:absolute;inset:0;z-index:0;
  width:100%;height:100%;pointer-events:none}
.fg-hero-media{object-fit:cover}
/* Un voile, sans quoi le titre creme se perd sur une photo claire.
   Contraste mesure au pire cas (photo blanche) : creme #f0e7cf sur le voile
   a 58 % d'oxblood = 5,4:1. */
.fg-case--dire:has(.fg-hero-media)::before{content:"";position:absolute;inset:0;
  z-index:0;background:linear-gradient(180deg,
    color-mix(in srgb,var(--ox) 38%,transparent),
    color-mix(in srgb,var(--ox) 74%,transparent))}
.fg-case--dire > :not(.fg-pointille):not(.fg-hero-media){position:relative;z-index:1}

/* Le portrait ouvre la page : il s'etire a la hauteur du bandeau. */
.fg-portrait{align-self:stretch}
.fg-portrait img{width:100%;height:100%;object-fit:cover}

/* Les flashes en grand : ce sont des dessins, pas des photos de peau — ils
   respirent sur le papier plutot que d'etre recadres serre. */
.fg-flash-grand figure{background:var(--ground)}
.fg-flash-grand img{aspect-ratio:4/5;object-fit:contain;padding:clamp(.6rem,1.4vw,1.2rem)}

/* Les motifs : « deux ou trois motifs feraient la taille d'un flash en
   largeur ». Trois de front dans une colonne, donc neuf motifs occupent
   exactement la place d'un flash. */
.fg-motifs-case{justify-content:flex-start}
.fg-motifs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:.5rem;list-style:none;margin:0;padding:0}
.fg-motifs li{margin:0}
.fg-motifs a{display:block;border-radius:var(--r-image);overflow:hidden;
  background:var(--ground);transition:transform var(--dur) var(--ease)}
.fg-motifs a:hover{transform:translateY(-3px)}
.fg-motifs img{width:100%;aspect-ratio:1;object-fit:contain;padding:.4rem}

/* ══ LES EMPLACEMENTS A REMPLIR ═══════════════════════════════════════
   Un trou dans une grille ne dit rien ; un emplacement nomme dit ou aller le
   remplir. Ils ne s'affichent QUE tant que le contenu manque, et indiquent
   le chemin exact dans l'administration. */
.fg-vide{display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:.5rem;text-align:center;min-height:14rem;
  background:var(--surface);
  border:1px dashed color-mix(in srgb,var(--ink) 28%,transparent);
  color:var(--ink-dim)}
.fg-vide-mot{font-family:var(--serif);font-size:var(--t-lede);line-height:1}
.fg-vide-ou{font-size:var(--t-micro);letter-spacing:.06em;color:var(--ink-dim);
  max-width:26ch;line-height:1.5}
.fg-motifs--vide li{aspect-ratio:1;border-radius:var(--r-image);
  background:color-mix(in srgb,var(--ink) 7%,transparent);
  border:1px dashed color-mix(in srgb,var(--ink) 20%,transparent)}

/* ══ LE LOGO, UN PAR MODE ═════════════════════════════════════════════
   Le site n'en servait qu'un dans les deux modes : en clair, un logo clair
   devenait invisible sur le fond clair. Les deux sont maintenant rendus, et
   c'est le CSS qui montre celui du mode courant — pas le script, parce que
   le mode est decide avant qu'il tourne et qu'un logo qui change apres coup
   se voit clignoter.

   L'etat par defaut est le mode CLAIR : c'est le monde par defaut du site. */
.fg-marque-logo--sombre{display:none}

/* Systeme en sombre, et aucun choix explicite de la personne. */
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .fg-marque-logo--clair{display:none}
  :root:not([data-theme="light"]) .fg-marque-logo--sombre{display:block}
}
/* Choix explicite : il gagne dans les deux sens. */
:root[data-theme="dark"] .fg-marque-logo--clair{display:none}
:root[data-theme="dark"] .fg-marque-logo--sombre{display:block}
:root[data-theme="light"] .fg-marque-logo--clair{display:block}
:root[data-theme="light"] .fg-marque-logo--sombre{display:none}

/* ══ L'ACCUEIL, SUITE DU 29/08 ════════════════════════════════════════ */

/* Une piece sans son texte : « sans texte, pas besoin pour les images ».
   La fiche n'est pas SUPPRIMEE mais masquee a l'oeil — un lien sans intitule
   n'existe pas pour un lecteur d'ecran, et le catalogue en compte trois. */
.fg-oeuvre--nue .fg-fiche{position:absolute;width:1px;height:1px;
  margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
.fg-oeuvre--nue figure{margin:0}

/* Deux actions cote a cote : « Voir » et « Tester ». La seconde est celle
   qui engage, donc la seule pleine. */
.fg-actions{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:auto;padding-top:.7rem}
.fg-go--calme{background:transparent;color:var(--ink);
  border:1px solid color-mix(in srgb,var(--ink) 30%,transparent)}
.fg-go--calme:hover{background:var(--ink);color:var(--ground);
  border-color:var(--ink)}

/* Le flash en grand porte deux boutons : sa fiche doit pouvoir les pousser
   en bas, donc elle s'etire. */
.fg-flash-grand{display:flex;flex-direction:column}
.fg-flash-grand .fg-fiche{flex:1 1 auto;display:flex;flex-direction:column}

/* Les motifs occupent une rangee entiere : huit carres de front sur grand
   ecran, quatre sur telephone. Ce sont des dessins, pas des photos : ils
   respirent sur le papier au lieu d'etre recadres. */
.fg-motifs-case .fg-motifs{grid-template-columns:repeat(8,minmax(0,1fr))}
@media (max-width:900px){
  .fg-motifs-case .fg-motifs{grid-template-columns:repeat(4,minmax(0,1fr))}
}

/* ══ LA VISIONNEUSE ═══════════════════════════════════════════════════
   « Quand on ouvre, je veux une lightbox, pas une single page. » Ouvrir une
   page entiere pour regarder une photo fait perdre sa place, son filtre et
   sa densite. Le catalogue reste derriere, et on enchaine.

   Elle n'existe dans la page que si le script tourne : sans lui, le lien
   mene toujours a la piece. */
.fg-loupe{position:fixed;inset:0;z-index:90;display:flex;align-items:center;
  justify-content:center;gap:clamp(.4rem,2vw,1.6rem);
  padding:clamp(.8rem,3vw,2.4rem);
  background:color-mix(in srgb,var(--ink) 92%,transparent);
  backdrop-filter:blur(6px)}
.fg-loupe[hidden]{display:none}
.fg-loupe-cadre{margin:0;display:flex;flex-direction:column;gap:.8rem;
  align-items:center;max-width:min(92vw,68rem);max-height:88svh}
.fg-loupe-cadre img{max-width:100%;max-height:78svh;width:auto;height:auto;
  border-radius:var(--r-image);background:var(--surface)}
.fg-loupe-cadre figcaption{color:var(--ground);font-size:var(--t-small);
  letter-spacing:.04em;text-align:center}

/* Les commandes : cibles de 44 px, contraste tenu sur l'encre.
   Creme #e7e3c8 sur encre #1b1905 : 14,6:1. */
.fg-loupe button{display:grid;place-items:center;min-width:48px;min-height:48px;
  border:1px solid color-mix(in srgb,var(--ground) 34%,transparent);
  border-radius:50%;background:transparent;color:var(--ground);
  font-size:1.6rem;line-height:1;cursor:pointer;
  transition:background var(--dur-fast) var(--ease),color var(--dur-fast) var(--ease)}
.fg-loupe button:hover{background:var(--ground);color:var(--ink)}
.fg-loupe-fermer{position:absolute;top:clamp(.8rem,3vw,2rem);
  right:clamp(.8rem,3vw,2rem);font-size:1.9rem}

@media (max-width:620px){
  /* Sur telephone, les fleches passent sous l'image : de part et d'autre
     elles mangeraient la moitie de la largeur utile. */
  .fg-loupe{flex-wrap:wrap}
  .fg-loupe-cadre{order:-1;flex:1 0 100%}
}

/* ══ UNE TROISIEME DENSITE ════════════════════════════════════════════
   « Il faudrait peut-etre une grille plus petite que celle deja presente,
   et laisser la grande aussi. » Trois choix desormais : la grande (trois
   colonnes), la compacte (cinq), et la planche (huit) — ou l'on ne voit
   plus que des photos, ce qui est exactement ce qu'elle demande. */
.fg-grille[data-densite="planche"]{grid-template-columns:repeat(8,minmax(0,1fr))}
.fg-grille[data-densite="planche"] .fg-oeuvre .fg-fiche{display:none}
.fg-grille[data-densite="planche"] .fg-oeuvre img{aspect-ratio:1}
.fg-grille[data-densite="planche"] .fg-oeuvre,
.fg-grille[data-densite="planche"] .fg-case--large{grid-column:span 1}
.fg-grille[data-densite="planche"] .fg-rang{display:none}
@media (max-width:980px){
  .fg-grille[data-densite="planche"]{grid-template-columns:repeat(5,minmax(0,1fr))}
}
@media (max-width:620px){
  .fg-grille[data-densite="planche"]{grid-template-columns:repeat(3,minmax(0,1fr))}
}