/* =========================================================
   Fatichanelya — v3
   Système de design Velix : tokens → primitives → sections
   ========================================================= */

/* ---------- 0. POLICE ----------
   Poppins, servie depuis le thème : aucun appel à un service tiers, donc
   aucune donnée de visiteur envoyée ailleurs, et rien à déclarer de plus dans
   la politique de confidentialité. Sous-ensemble latin étendu, 7 Ko par
   graisse. `font-display:swap` : le texte s'affiche immédiatement dans la
   police de repli, puis bascule. */
@font-face{
  font-family:"Poppins";
  src:url("../fonts/poppins-400.woff2") format("woff2");
  font-weight:400;font-style:normal;font-display:swap;
}
@font-face{
  font-family:"Poppins";
  src:url("../fonts/poppins-700.woff2") format("woff2");
  font-weight:700;font-style:normal;font-display:swap;
}

/* ---------- 1. TOKENS ----------
   Palette de la marque : bleu marine et beige chaud, or champagne en accent.
   C'est l'identité validée en maquette v3, réchauffée côté fonds.
   Toutes les valeurs ci-dessous sont mesurées, pas estimées : voir
   `_velix/design-system.md` pour les ratios et les règles d'emploi. */
:root{
  /* --- fonds --- */
  --paper:#F7F1E8;        /* beige chaud, fond dominant */
  --ivory:#EFE6D8;        /* sable, bande alternée */
  --shell:#F2EADE;        /* bannières de titre de page */
  --surface:#FFFFFF;      /* cartes et surfaces posées */

  /* --- bleu marine, surfaces fortes --- */
  --navy:#16233D;         /* en-tête, pied, aplats — blanc dessus 15,65:1 */
  --navy-2:#1E3050;       /* variante, survol des surfaces bleues */
  --navy-deep:#0E1729;    /* état actif — blanc dessus 17,90:1 */
  --navy-soft:#E6EAF0;    /* aplat très clair de la même famille */

  /* --- texte --- */
  --ink:#221E19;          /* principal — 14,75:1 sur beige */
  --muted:#5E574C;        /* secondaire — 6,35:1 sur beige */
  --muted-soft:#8B8377;   /* mentions, jamais un texte qu'il faut lire */

  /* --- or champagne ---
     Deux rôles séparés, jamais interchangeables. L'or de fond ne vaut que
     2,32:1 sur beige : il ne porte jamais de texte. */
  --gold:#C39A4E;         /* décor, icônes, aplats — JAMAIS en texte sur clair */
  --gold-ink:#825F1F;     /* texte or sur clair — 5,19:1 beige, 4,71:1 sable */
  --gold-light:#D5A54E;   /* texte or sur bleu marine — 6,95:1 */
  --gold-press:#A8803B;   /* survol : l'or fonce, il ne s'éclaircit pas */
  --gold-soft:#F0E3C9;    /* aplat or très clair */

  /* --- filets et bordures --- */
  --line:#E4DACA;         /* filet discret entre blocs */
  --line-mid:#DCCFBA;     /* filet structurel — décoratif */
  --line-card:#E8DECE;    /* contour de carte, à peine visible */
  --line-strong:#8F8065;  /* bordure de contrôle sur clair */
  --line-on-navy:#8A94A3; /* bordure de contrôle sur bleu marine */
  --line-decor-navy:#9BA6B6;
  --line-light:#FFFFFF2E;

  --text-on-navy:#F2EADE;   /* texte sur bleu marine — 13,50:1 */
  --text-on-navy-2:#C9D0DB; /* secondaire sur bleu marine — 10,08:1 */

  --sage:#7B9482;
  --sage-ink:#4F6857;

  /* --- typographie ---
     Une seule famille sans empattement, comme le modèle. La serif est
     retirée : c'est elle qui donnait au site son air de gabarit générique. */
  /* Poppins est chargée depuis le thème (deux graisses, en local, aucun appel
     réseau externe). Les replis sont des polices géométriques réellement
     présentes : Futura et Avenir Next sur macOS, Segoe UI sur Windows. */
  --font-body:"Poppins",Futura,"Avenir Next",Avenir,"Segoe UI",
    system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
  --font-display:var(--font-body);

  --fs-hero:clamp(2.35rem,1rem + 3vw,3.65rem);
  --fs-h2:clamp(1.85rem,1.35rem + 2vw,2.85rem);
  --fs-h3:clamp(1.15rem,1.05rem + .45vw,1.4rem);
  --fs-body:clamp(.95rem,.92rem + .16vw,1.02rem);
  --fs-lead:clamp(1rem,.96rem + .28vw,1.12rem);
  --fs-num:2.125rem;
  --fs-price:1.22rem;
  --fs-price-lg:clamp(1.55rem,1.35rem + .7vw,1.85rem);
  --fs-label:.875rem;
  --fs-sm:.8125rem;
  --fs-eyebrow:.75rem;
  --lh-tight:1.14; --lh-body:1.7; --lh-prose:1.75;
  --measure:56ch; --measure-prose:68ch;

  /* Graisses : le modèle oppose un 700 franc à un 400 régulier,
     sans niveau intermédiaire dans les titres. */
  --fw-title:700;
  --fw-medium:500;
  --fw-body:400;

  /* --- espace & formes --- */
  --container:1280px;
  /* La gouttière est calculée pour que le contenu s'aligne exactement sur le
     conteneur centré : au-delà de 1280 px + 2 gouttières, c'est le centrage
     qui décide, en dessous c'est la gouttière. Une seule valeur pour les deux
     évite le décalage de 16 px entre l'en-tête et les sections. */
  --gutter:clamp(1.25rem,4.5vw,4rem);
  --bord:max(var(--gutter),calc((100vw - var(--container)) / 2));
  --section-y:clamp(3.25rem,6.5vw,6rem);
  --section-y-lg:clamp(4.5rem,9vw,8rem);
  --section-y-sm:clamp(2rem,4vw,3.25rem);
  --r-sm:8px; --r-md:14px; --r-lg:20px; --r-pill:999px;

  --shadow-card:none;
  --shadow-lift:none;
  --shadow-float:0 4px 10px #1a1a1a0f,0 22px 55px #1a1a1a1f;

  /* --- mouvement --- */
  --t-micro:150ms; --t-base:280ms; --t-enter:600ms;
  --ease-out:cubic-bezier(.22,1,.36,1);
  --ease-io:cubic-bezier(.65,0,.35,1);
}

/* ---------- 2. RESET ---------- */
*,*::before,*::after{box-sizing:border-box}
/* impératif : .drawer/.product-card portent display:flex, qui écrase le [hidden] du navigateur */
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--font-body);font-size:var(--fs-body);line-height:1.65;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img,picture,svg{max-width:100%;display:block}
img{height:auto}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer;background:none;border:0;padding:0}
h1,h2,h3{margin:0;font-family:var(--font-display);font-weight:500;color:var(--navy);letter-spacing:-.03em;text-wrap:balance}
h1{font-size:var(--fs-hero);line-height:1.02}
h2{font-size:var(--fs-h2);line-height:1.08}
h3{font-size:var(--fs-h3);line-height:1.25;letter-spacing:-.015em}
p{margin:0}
ul{margin:0;padding:0;list-style:none}
:where(section[id]){scroll-margin-block-start:112px}
.i{flex:none}

/* focus — jamais supprimé */
:is(a,button,input,select,summary,[tabindex]):focus-visible{
  outline:3px solid var(--gold-ink);outline-offset:3px;border-radius:4px;
}
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
.skip-link{position:fixed;inset-block-start:12px;inset-inline-start:12px;z-index:200;
  background:var(--navy);color:#fff;border-radius:var(--r-pill);padding:12px 18px;
  font-size:var(--fs-sm);font-weight:700;transform:translateY(-160%);transition:transform var(--t-base) var(--ease-out)}
.skip-link:focus{transform:none}

/* ---------- 3. MOUVEMENT ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;scroll-behavior:auto!important}
}
@media (prefers-reduced-motion:no-preference){
  html{scroll-behavior:smooth}
  @view-transition{navigation:auto}
}
/* Reveal — amélioration progressive stricte :
   le contenu est VISIBLE par défaut. Seul le JS (via .js-reveal sur <html>) le masque
   avant de le révéler, et uniquement si l'IntersectionObserver est disponible.
   NB : animation-timeline:view() a été écarté — un élément reste bloqué à opacité 0
   quand la page ne défile pas (viewport très haut, impression, capture pleine page). */
.js-reveal .reveal{
  opacity:0;transform:translateY(22px);
  transition:opacity var(--t-enter) var(--ease-out) calc(min(var(--i,0),4)*70ms),
             transform var(--t-enter) var(--ease-out) calc(min(var(--i,0),4)*70ms);
}
.js-reveal .reveal.is-in{opacity:1;transform:none}

/* ---------- 4. PRIMITIVES ---------- */
.section{padding-block:var(--section-y);padding-inline:var(--bord)}
.section-head{max-inline-size:100%;margin-block-end:clamp(2rem,4vw,3.25rem)}
.section-head--split{display:grid;gap:1.5rem clamp(2rem,5vw,4.5rem);align-items:end;
  grid-template-columns:minmax(0,1.2fr) minmax(0,.9fr)}
@media (max-width:900px){.section-head--split{grid-template-columns:1fr;align-items:start}}
.section-intro{color:var(--muted);max-width:56ch}
.eyebrow{margin-block-end:.9rem;font-size:var(--fs-eyebrow);font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:var(--gold-ink)}
.eyebrow.light{color:var(--gold-soft)}
h1 em,h2 em{font-style:normal;color:var(--gold-ink)}
.pledge h2 em,.contact h2 em{color:var(--gold-soft)}

.button{display:inline-flex;align-items:center;justify-content:center;gap:.7rem;
  min-height:52px;padding-inline:1.5rem;border-radius:var(--r-pill);
  font-size:var(--fs-sm);font-weight:700;letter-spacing:.01em;
  transition:transform var(--t-base) var(--ease-out),background var(--t-base),color var(--t-base),box-shadow var(--t-base)}
.button-navy{background:var(--navy);color:#fff}
/* Texte en vert très foncé, pas en vert forêt : sur le doré, le forêt
   ne vaut que 3,87:1. Le ton plus sombre atteint 5,00:1. */
.button-gold{background:var(--gold);color:var(--navy-deep)}
.button-outline{border:1.5px solid var(--navy);color:var(--navy)}
/* Sur fond sombre, le contour navy devient invisible : la variante claire
   s'applique automatiquement dans les blocs à fond navy. */
.apropos-cta .button-outline,.contact-cta .button-outline,.button-outline--light{
  border-color:var(--line-on-navy);color:var(--text-on-navy)}
@media (hover:hover){
  .apropos-cta .button-outline:hover,.contact-cta .button-outline:hover,
  .button-outline--light:hover{border-color:#fff;color:#fff;background:#FFFFFF14}}
.button-lg{min-height:58px;padding-inline:2rem}
.button-block{width:100%}
@media (hover:hover){
  .button:hover{transform:translateY(-1px)}
  .button-navy:hover{background:var(--navy-2)}
  .button-gold:hover{background:#D3AC64}
  .button-outline:hover{background:var(--navy);color:#fff}
}
.button:active{transform:scale(.985)}

.text-button,.arrow-link{display:inline-flex;align-items:center;gap:.55rem;
  min-height:44px;font-size:var(--fs-sm);font-weight:700;color:var(--navy)}
.arrow-link--light{color:#fff}
.text-button .i,.arrow-link .i{transition:transform var(--t-base) var(--ease-out)}
@media (hover:hover){.text-button:hover .i,.arrow-link:hover .i{transform:translateX(4px)}}
.chip{display:inline-flex;align-items:center;padding:.3rem .7rem;border-radius:var(--r-pill);
  background:var(--ivory);color:var(--muted);font-size:.7rem;font-weight:700;
  letter-spacing:.09em;text-transform:uppercase}
.chip--light{background:#FFFFFF24;color:var(--text-on-navy)}

/* ---------- 5. BARRE + HEADER ---------- */
.announcement{display:flex;justify-content:space-between;align-items:center;gap:1rem;
  min-height:38px;padding-inline:var(--bord);background:var(--navy);color:var(--text-on-navy);
  font-size:.72rem;letter-spacing:.04em}
.announcement a{display:inline-flex;align-items:center;gap:.5rem;min-height:38px;font-weight:700;color:var(--gold-soft)}
.announcement p{margin:0}
@media (max-width:760px){.announcement p{display:none}
  .announcement{justify-content:center}}

.site-header{position:sticky;inset-block-start:0;z-index:50;
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:1rem;
  padding-inline:var(--bord);block-size:84px;
  background:var(--surface)F0;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  transition:block-size var(--t-base) var(--ease-out),box-shadow var(--t-base),background var(--t-base)}
.site-header.is-stuck{block-size:66px;box-shadow:0 1px 0 var(--line),0 10px 30px #1a1a1a0f}
.wordmark{font-family:var(--font-display);font-size:clamp(1.5rem,2vw,1.95rem);
  font-weight:600;letter-spacing:-.045em;color:var(--navy)}
.wordmark--light{color:#fff}
.primary-nav{display:flex;gap:clamp(1.1rem,2.6vw,2.4rem);justify-self:center}
.primary-nav a{position:relative;display:inline-flex;align-items:center;min-height:44px;
  font-size:.82rem;font-weight:600}
.primary-nav a::after{content:"";position:absolute;inset-block-end:14px;inset-inline-start:0;
  inline-size:100%;block-size:2px;border-radius:2px;background:var(--gold);
  transform:scaleX(0);transform-origin:inline-start;transition:transform var(--t-base) var(--ease-out)}
@media (hover:hover){.primary-nav a:hover::after{transform:scaleX(1)}}
.header-tools{display:flex;align-items:center;gap:.25rem;justify-self:end}
.icon-button{display:inline-flex;align-items:center;justify-content:center;
  inline-size:44px;min-block-size:44px;border-radius:50%;color:var(--navy);
  transition:background var(--t-micro)}
@media (hover:hover){.icon-button:hover{background:var(--ivory)}}
.lang{display:flex;align-items:center;gap:.35rem;padding-inline:.5rem;color:var(--navy)}
.lang select{appearance:none;background:none;border:0;min-height:44px;
  font-size:.78rem;font-weight:700;padding-inline-end:.2rem}
.bag-button{position:relative}
.bag-count{position:absolute;inset-block-start:2px;inset-inline-end:0;
  display:grid;place-items:center;min-inline-size:19px;block-size:19px;padding-inline:4px;
  border-radius:var(--r-pill);background:var(--gold);color:var(--navy-deep);
  font-size:.65rem;font-weight:800;line-height:1}
.header-cta{margin-inline-start:.5rem;min-height:44px;padding-inline:1.15rem}
.burger{display:none}

.mobile-panel{position:fixed;inset-block-start:122px;inset-inline:0;z-index:45;
  box-shadow:var(--shadow-float);
  background:var(--paper);border-block-end:1px solid var(--line);padding:1rem var(--gutter) 1.5rem}
.mobile-panel nav{display:grid}
.mobile-panel a{display:flex;align-items:center;min-height:52px;
  border-block-end:1px solid var(--line);font-weight:600}
.mobile-panel a:last-child{border:0;color:var(--gold-ink)}

@media (max-width:1080px){
  .primary-nav,.header-cta{display:none}
  .burger{display:inline-flex}
  .site-header{grid-template-columns:1fr auto}
}
@media (min-width:1081px){.mobile-panel{display:none!important}}

/* ---------- 6. HERO ---------- */
/* ---------- HERO ----------
   Un cadre arrondi posé dans la colonne de contenu, à hauteur fixe : texte à
   gauche, portrait à droite, fondu entre les deux. Le cadre suit --bord comme
   tout le reste, donc il reste à 1280 px sur un écran de 2722. Aucun vert :
   bleu marine, beige et or. */
.hero{padding-inline:var(--bord);padding-block:clamp(.75rem,1.5vw,1.5rem);
  background:var(--paper)}

.hero-frame{position:relative;display:grid;
  grid-template-columns:minmax(0,58%) minmax(0,42%);
  /* Hauteur fixe dans le cas normal ; en minimum, pour qu'un texte plus haut
     que prévu agrandisse le cadre au lieu d'être coupé par overflow:hidden. */
  min-block-size:600px;
  border-radius:28px;overflow:hidden;background:var(--ivory)}

/* Aucune largeur maximale : les enfants portent leur mesure. */
.hero-copy{display:grid;align-content:center;justify-items:start;min-inline-size:0;
  padding-inline:clamp(1.75rem,3.5vw,3.5rem) clamp(1rem,2vw,1.5rem);
  padding-block:1.75rem;z-index:1}

/* Le titre est l'élément LCP : aucune animation, il est là au premier rendu.
   La seconde ligne passe en or, comme sur la maquette. */
.hero h1{font-size:var(--fs-hero);line-height:1.06;letter-spacing:-.03em;
  color:var(--navy);max-width:20ch;text-wrap:balance}
.hero h1 em{display:block;font-style:normal;color:var(--gold-ink)}

.hero .lead{margin-block:1.25rem 1.75rem;max-width:40ch;color:var(--muted);
  font-size:var(--fs-lead);line-height:1.7}
.hero-actions{display:flex;flex-wrap:wrap;align-items:center;gap:1.5rem}

.hero-facts{display:flex;flex-wrap:wrap;gap:.6rem 1.9rem;
  margin-block-start:2rem;padding-block-start:1.25rem;
  border-block-start:1px solid var(--line-mid);
  inline-size:100%;max-inline-size:34rem;
  color:var(--muted);font-size:var(--fs-label)}
.hero-facts li{display:inline-flex;align-items:center;gap:.6rem}
.hero-facts li::before{content:"";inline-size:5px;block-size:5px;
  border-radius:50%;background:var(--gold);flex:none}

/* Portrait : remplit sa colonne sur toute la hauteur du cadre. Hors flux,
   sinon l'image imposerait sa hauteur intrinsèque à la rangée. */
.hero-portrait{position:relative;margin:0;min-inline-size:0;overflow:hidden}
.hero-portrait img{position:absolute;inset:0;inline-size:100%;block-size:100%;
  object-fit:cover;object-position:center 18%}
/* Fondu côté texte : le cadre est en sable, le fondu part du sable. */
.hero-portrait::before{content:"";position:absolute;inset-block:0;
  inset-inline-start:0;inline-size:34%;z-index:1;pointer-events:none;
  background:linear-gradient(to right,var(--ivory),transparent)}
/* Voile sous la signature : une ombre portée ne compte pas comme du contraste. */
.hero-portrait::after{content:"";position:absolute;inset-inline:0;
  inset-block-end:0;block-size:38%;z-index:1;pointer-events:none;
  background:linear-gradient(to top,#0E1729D9,#0E172966 45%,transparent)}
.hero-portrait figcaption{position:absolute;z-index:2;
  inset-block-end:clamp(1.25rem,3vw,2rem);inset-inline-end:clamp(1.25rem,3vw,2rem);
  display:grid;gap:.1rem;text-align:end;color:#fff}
.hero-portrait figcaption strong{font-size:1.5rem;font-weight:var(--fw-title);
  letter-spacing:-.02em}
.hero-portrait figcaption span{font-size:var(--fs-label);color:#EDE6DA}

/* Sans portrait, le cadre prend sa hauteur naturelle sur une colonne. */
.hero--sans-portrait .hero-frame{grid-template-columns:minmax(0,1fr);block-size:auto}

/* Tablette en paysage : le texte reprend de la largeur, le cadre baisse. */
@media (min-width:981px) and (max-width:1180px){
  .hero-frame{grid-template-columns:minmax(0,62%) minmax(0,38%);min-block-size:540px}
}

/* Mobile : le cadre empile le portrait au-dessus du texte. Le portrait a une
   hauteur fixe, le texte prend la sienne : un cadre entier à hauteur fixe
   couperait le texte. Le fondu latéral disparaît, le voile de la signature
   reste. */
@media (max-width:980px){
  .hero{padding-block:.75rem 0}
  .hero-frame{grid-template-columns:minmax(0,1fr);min-block-size:0;border-radius:20px}
  .hero-portrait{order:-1;block-size:clamp(280px,46vh,360px)}
  .hero-portrait::before{display:none}
  .hero-copy{padding:1.75rem clamp(1.25rem,5vw,2rem) 2rem}
  .hero h1{max-width:22ch}
  .hero-facts{margin-block-start:1.75rem;padding-block-start:1.25rem}
}

/* ---------- 7. TRUST ---------- */
.trust{padding-inline:var(--bord);padding-block:clamp(1.75rem,3vw,2.5rem);
  background:var(--ivory);border-block:1px solid var(--line)}
.trust ul{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1.5rem 2rem;
  max-inline-size:100%}
/* Les titres partent tous de la même hauteur : `align-items:center` centrait
   chaque entrée sur son propre contenu, et un texte passant sur deux lignes
   décalait son titre de 4 px par rapport aux voisins. */
.trust li{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto 1fr;
  gap:.15rem 1.1rem;align-items:start}
.trust .i{grid-row:span 2;align-self:center;
  inline-size:44px;block-size:44px;color:var(--gold);stroke-width:1.4}
.trust strong{font-size:.85rem;color:var(--navy)}
.trust span{font-size:.76rem;color:var(--muted);line-height:1.45}
@media (max-width:900px){.trust ul{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.trust ul{grid-template-columns:1fr}}

/* ---------- 8. UNIVERS ---------- */
/* ---------- CELLULE À FILET ----------
   Le composant de grille par défaut du site. Une grille de contenu se compose
   en cellules séparées par un filet, jamais en cartes bordées : quand une
   catégorie, un produit, un engagement et une question portent tous le même
   contour, l'œil ne hiérarchise plus rien. Les boîtes restent réservées à ce
   qui porte une photo ou doit se distinguer du corps de texte. */
.rule-cell{padding-block-start:1.5rem;padding-inline:0;
  border-block-start:1px solid var(--line-mid);border-radius:0;
  background:transparent;box-shadow:none;
  transition:border-color var(--t-base)}
@media (hover:hover){
  a.rule-cell:hover,.rule-cell:has(a:hover){border-block-start-color:var(--navy)}}

/* Sur fond sombre, le filet se relève pour rester perceptible. */
.on-navy .rule-cell,.rule-cell--on-navy{border-block-start-color:var(--line-on-navy)}

/* Variante à filet vertical : listes de valeurs et de points courts. */
.rule-cell--side{padding-block-start:0;padding-inline-start:1.25rem;
  border-block-start:0;border-inline-start:1px solid var(--line-mid)}

/* Le numéro se pose en grand corps, sans zéro devant : jamais en petite
   capitale colorée au-dessus du titre. */
.rule-num{display:block;margin-block-end:.5rem;
  font-family:var(--font-display);font-size:var(--fs-num);font-weight:500;
  line-height:1;letter-spacing:-.03em;color:var(--navy)}
.on-navy .rule-num{color:var(--gold)}

/* Au survol on change une couleur, pas une position : une carte de contenu
   ne décolle pas au passage du pointeur. */

/* ---------- 9. BOUTIQUE ---------- */
.shop{background:var(--ivory)}
.shop-controls{display:flex;flex-wrap:wrap;gap:1rem;justify-content:space-between;
  align-items:center;max-inline-size:100%;margin-block-end:1.25rem}
.filters{display:flex;flex-wrap:wrap;gap:.5rem}
.chip-button{min-height:44px;padding-inline:1.05rem;border-radius:var(--r-pill);
  border:1px solid var(--line-strong);background:var(--surface);color:var(--muted);
  font-size:.78rem;font-weight:700;transition:background var(--t-micro),color var(--t-micro),border-color var(--t-micro)}
.chip-button.is-active{background:var(--navy);border-color:var(--navy);color:#fff}
@media (hover:hover){.chip-button:not(.is-active):hover{border-color:var(--navy);color:var(--navy)}}
.search{position:relative;display:flex;align-items:center;gap:.6rem;
  padding-inline:1rem;border:1px solid var(--line-strong);border-radius:var(--r-pill);
  background:var(--surface);color:var(--muted);min-inline-size:min(100%,280px)}
.search input{min-height:44px;border:0;background:none;inline-size:100%;font-size:.85rem}
.search input:focus{outline:none}
.search:focus-within{border-color:var(--navy)}
.result-count{max-inline-size:100%;margin-block-end:1.75rem;
  font-size:.78rem;color:var(--muted)}

/* `auto-fill` avec un minimum de 220 px calcule son nombre de colonnes sur la
   largeur disponible ; imbriquée dans une autre grille, celle-ci vaut la place
   maximale et non la place réelle, d'où cinq colonnes et un débordement.
   Des points de rupture explicites suppriment ce calcul implicite. */
.product-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(.9rem,1.8vw,1.5rem);max-inline-size:100%}
@media (max-width:420px){.product-grid{grid-template-columns:minmax(0,1fr)}}
@media (min-width:700px){.product-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (min-width:1000px){.product-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (min-width:1240px){.product-grid{grid-template-columns:repeat(5,minmax(0,1fr))}}
.product-card{display:flex;flex-direction:column;background:var(--surface);
  border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden;
  transition:border-color var(--t-base)}
@media (hover:hover){
  .product-card:hover{border-color:var(--line-strong)}
  .product-card:hover .product-name{color:var(--gold-ink)}}
/* Fond blanc : les visuels sont des packshots sur fond blanc, le cadre ne
   doit pas se voir autour d'eux. */
.product-media{position:relative;display:block;inline-size:100%;background:var(--surface);
  border:0;overflow:hidden;aspect-ratio:1}
.product-media img{inline-size:100%;block-size:100%;object-fit:cover}
/* Pas de pastille « Voir la fiche » en fondu : la vignette entière est déjà un
   lien, et un libellé qui apparaît au survol n'existe pas au toucher. */
.product-flag{position:absolute;inset-block-start:10px;inset-inline-start:10px;
  padding:.3rem .65rem;border-radius:var(--r-pill);background:var(--navy);color:#fff;
  font-size:var(--fs-eyebrow);font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.product-body{display:grid;gap:.45rem;padding:1.15rem 1.15rem 1.25rem;flex:1}
.product-cat{font-size:var(--fs-eyebrow);font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--gold-ink)}
/* Le nom du produit est l'information principale de la carte : il se lit en
   police de titre, au-dessus du corps de texte, jamais en dessous. */
.product-name{font-family:var(--font-display);font-size:1.06rem;font-weight:var(--fw-title);
  color:var(--navy);line-height:1.3;letter-spacing:-.015em;
  /* Deux lignes au plus : au-delà, les cartes d'une même rangée se
     désalignent et la grille paraît bancale. */
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;
  overflow:hidden;
  transition:color var(--t-micro)}
/* Contenance sous le nom (« 90 gélules ») : elle rend le prix lisible. */
.product-format{font-size:var(--fs-sm);line-height:1.35;color:var(--muted);
  text-wrap:balance}
.product-price{font-family:var(--font-display);font-size:var(--fs-price);
  color:var(--gold-ink);line-height:1.1}
/* Sans prix en base : « Sur demande », à la même place, en retrait. */
.product-price--demande{color:var(--muted)}
/* `auto` et non une valeur fixe : la ligne de contenance n'existe pas sur
   toutes les cartes, et les boutons d'une même rangée doivent rester alignés
   en bas quelle que soit la hauteur du texte au-dessus. */
.product-add{margin-block-start:auto;min-height:44px;padding-inline:1rem;
  border-radius:var(--r-pill);border:1.5px solid var(--navy);color:var(--navy);
  font-size:var(--fs-label);font-weight:700;
  /* Le libellé reste sur une ligne. Plus de troncature par points de
     suspension : un bouton dont le texte est coupé ne dit plus ce qu'il fait.
     C'est le libellé qui a été raccourci, pas la boîte. */
  white-space:nowrap;
  transition:background var(--t-micro),color var(--t-micro)}
@media (hover:hover){.product-add:hover{background:var(--navy);color:#fff}}
.no-result{max-inline-size:100%;padding-block:2rem;color:var(--muted)}
.shop-note{max-inline-size:100%;margin-block-start:2rem;
  font-size:.76rem;color:var(--muted)}

/* ---------- 10. FORMATIONS ---------- */
/* Pas de largeur maximale : la section porte déjà --bord, et 1408 px moins
   deux fois 721 tombait à zéro sur un écran de 2722 px. */
.training{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
  gap:clamp(2rem,5vw,4.5rem);align-items:center}
.training-media{margin:0;position:relative}
.training-media img{border-radius:var(--r-lg);aspect-ratio:4/5;object-fit:cover;box-shadow:var(--shadow-card)}
.training-media figcaption{position:absolute;inset-block-end:-18px;inset-inline-start:16px;
  inline-size:min(88%,320px);padding:1rem 1.2rem;border-radius:var(--r-md);
  background:var(--navy);color:var(--text-on-navy);font-size:.82rem;line-height:1.45;box-shadow:var(--shadow-lift)}
.training-list{display:grid;gap:.75rem;margin-block-start:2rem}
.training-list li{display:grid;gap:.4rem;justify-items:start;
  padding-block-start:1.35rem;padding-inline:0;
  background:transparent;border:0;border-block-start:1px solid var(--line-mid);
  border-radius:0;transition:border-color var(--t-base)}
@media (hover:hover){.training-list li:hover{border-block-start-color:var(--navy)}}
@media (hover:hover){.training-list li:hover{border-color:var(--navy);transform:translateX(4px)}}
.training-list p{color:var(--muted);font-size:.9rem}
@media (max-width:920px){.training{grid-template-columns:1fr}
  .training-media{max-inline-size:460px}}

/* ---------- 11. À PROPOS ---------- */
.about{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);
  gap:clamp(2.5rem,6vw,5rem);align-items:center;background:var(--ivory)}
.about-gallery{position:relative;justify-self:center;inline-size:min(100%,380px)}
.about-main{margin:0}
.about-main img{border-radius:var(--r-lg);aspect-ratio:3/5;object-fit:cover;box-shadow:var(--shadow-lift)}
.about-avatar{position:absolute;inset-block-start:-22px;inset-inline-end:-22px;margin:0}
@media (max-width:560px){.about-avatar{inset-inline-end:4px;inset-block-start:-16px}}
.about-avatar img{inline-size:96px;block-size:96px;border-radius:50%;
  border:5px solid var(--paper);object-fit:cover}
.about-stat{position:absolute;inset-block-end:-20px;inset-inline-start:-18px;
  display:grid;gap:.1rem;padding:.85rem 1.2rem;border-radius:var(--r-md);
  background:var(--surface);box-shadow:var(--shadow-card);font-size:.72rem;color:var(--muted)}
.about-stat strong{font-family:var(--font-display);font-size:1.1rem;color:var(--navy)}
.values{display:grid;gap:.85rem;margin-block:1.9rem}
.values li{display:grid;gap:.2rem;padding-inline-start:1.25rem;
  border-inline-start:1px solid var(--line-mid)}
.values strong{font-family:var(--font-display);font-size:1.06rem;font-weight:500;
  color:var(--navy);letter-spacing:-.012em}
.values span{font-size:var(--fs-label);color:var(--muted)}
@media (max-width:920px){.about{grid-template-columns:1fr}}

/* ---------- 12. TIKTOK ---------- */
.journal-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(1rem,2vw,1.5rem);max-inline-size:100%}
.journal-card{position:relative;display:block;border-radius:var(--r-lg);overflow:hidden;
  transition:transform var(--t-base) var(--ease-out),box-shadow var(--t-base)}
.journal-card img{aspect-ratio:9/16;object-fit:cover;inline-size:100%;
  transition:transform var(--t-enter) var(--ease-out)}
@media (hover:hover){.journal-card:hover{border-color:var(--line-strong)}}
.journal-meta{position:absolute;inset-block-end:0;inset-inline:0;display:grid;gap:.2rem;
  padding:2.5rem 1.15rem 1.15rem;color:#fff;font-size:.85rem;font-weight:600;
  background:linear-gradient(to top,var(--navy)E6,var(--navy)00)}
.journal-meta em{font-style:normal;font-size:.68rem;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;color:var(--gold-soft)}
@media (max-width:760px){.journal-grid{grid-template-columns:1fr;max-inline-size:420px}}

/* ---------- 13. ENGAGEMENT ---------- */
.pledge{background:var(--navy);color:var(--text-on-navy)}
.pledge h2{color:#fff}
.pledge-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(1rem,2.5vw,2rem);max-inline-size:100%}
.pledge-grid li{display:grid;gap:.5rem;padding-block-start:1.5rem;padding-inline:0;
  background:transparent;border:0;border-block-start:1px solid var(--line-on-navy)}
.pledge-grid strong{font-family:var(--font-display);font-size:1.15rem;
  font-weight:500;color:#fff;letter-spacing:-.02em}
.pledge-grid p{font-size:.88rem;color:var(--text-on-navy-2)}
@media (max-width:820px){.pledge-grid{grid-template-columns:1fr}}

/* « Ce que je ne fais pas » : quatre phrases en grand corps, filet vertical
   clair. La typographie porte seule — aucun pictogramme, aucun numéro. Le
   bloc précède les trois engagements dans la même bande sombre. */
.pledge-non{margin-block-end:clamp(2.75rem,5vw,4.5rem)}
.pledge-non h3{margin-block-end:1.4rem;font-family:var(--font-body);
  font-size:var(--fs-eyebrow);font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--gold-light)}
.pledge-non ul{display:grid;gap:1.4rem clamp(2rem,5vw,4.5rem);max-inline-size:100%}
.pledge-non li{padding-block:.1rem;padding-inline-start:1.25rem;
  border-inline-start-color:var(--line-decor-navy);
  font-family:var(--font-display);font-size:clamp(1.35rem,1.1rem + 1.1vw,1.95rem);
  font-weight:500;line-height:1.25;letter-spacing:-.02em;color:var(--text-on-navy);
  text-wrap:balance}
@media (min-width:820px){.pledge-non ul{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* ---------- 14. FAQ ---------- */
.faq-list{display:grid;gap:.6rem;max-width:840px;margin-inline:auto}
.faq-list details{background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-md);overflow:hidden}
.faq-list summary{display:flex;align-items:center;justify-content:space-between;gap:1rem;
  min-height:60px;padding-inline:1.35rem;font-weight:600;list-style:none;cursor:pointer}
.faq-list summary::-webkit-details-marker{display:none}
.faq-list summary::after{content:"";inline-size:11px;block-size:11px;flex:none;
  border-inline-end:2px solid var(--gold-ink);border-block-end:2px solid var(--gold-ink);
  transform:rotate(45deg) translateY(-3px);transition:transform var(--t-base) var(--ease-out)}
.faq-list details[open] summary::after{transform:rotate(-135deg) translateY(-3px)}
.faq-list details>div{padding:0 1.35rem 1.35rem;color:var(--muted);font-size:.92rem}
@media (hover:hover){.faq-list summary:hover{background:var(--ivory)}}

/* ---------- 15. CONTACT ---------- */
.contact{background:var(--navy);color:var(--text-on-navy);text-align:center}
.contact h2{color:#fff;max-width:22ch;margin-inline:auto}
.contact .section-intro{margin-inline:auto;margin-block:1.25rem 2rem;color:var(--text-on-navy-2)}
.contact-note{margin-block-start:1.25rem;font-size:.76rem;color:var(--text-on-navy-2)}

/* ---------- 16. FOOTER ---------- */
.site-footer{background:var(--navy);color:var(--text-on-navy-2);
  padding-inline:var(--bord);padding-block:clamp(2.5rem,5vw,4rem) 1.5rem;
  border-block-start:1px solid var(--line-light)}
.footer-top{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1.2fr) minmax(0,1.1fr);
  gap:2.5rem clamp(2rem,4vw,3.5rem);max-inline-size:100%}
.footer-brand{display:grid;gap:.7rem;justify-items:start;font-size:.88rem}
.footer-nav{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2rem}
.footer-nav h2,.newsletter h2{font-family:var(--font-body);font-size:.72rem;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;color:var(--gold-soft)}
.footer-nav ul{display:grid;gap:.15rem;margin-block-start:.85rem}
.footer-nav a{display:inline-flex;align-items:center;min-height:36px;font-size:.88rem}
@media (hover:hover){.footer-nav a:hover,.footer-brand a:hover{color:#fff;text-decoration:underline}}
.newsletter h2{max-width:26ch;line-height:1.5}
.newsletter-row{display:flex;gap:.5rem;margin-block-start:1rem;flex-wrap:wrap}
.newsletter input{flex:1 1 180px;min-height:52px;padding-inline:1.15rem;
  border:1px solid var(--line-on-navy);border-radius:var(--r-pill);
  background:#FFFFFF12;color:#fff;font-size:.88rem}
.newsletter input::placeholder{color:var(--muted)}
.newsletter-help{margin-block-start:.7rem;font-size:.72rem;color:var(--text-on-navy-2)}
.disclaimer{max-inline-size:100%;margin-block-start:2.5rem;
  padding-block-start:1.5rem;border-block-start:1px solid var(--line-light);
  font-size:.72rem;line-height:1.6;color:var(--text-on-navy-2)}
.footer-bottom{display:flex;flex-wrap:wrap;gap:.5rem 1.5rem;justify-content:space-between;
  max-inline-size:100%;margin-block-start:1.25rem;
  font-size:.72rem;color:var(--text-on-navy-2)}
.footer-bottom p{margin:0}
@media (max-width:900px){.footer-top{grid-template-columns:1fr}}

/* ---------- 17. PANNEAU SÉLECTION ---------- */
.drawer-backdrop{position:fixed;inset:0;z-index:90;background:var(--navy)80;
  -webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}
.drawer{position:fixed;inset-block:0;inset-inline-end:0;z-index:95;
  display:flex;flex-direction:column;inline-size:min(100%,400px);
  background:var(--paper);box-shadow:var(--shadow-float)}
.drawer-head{display:flex;align-items:center;justify-content:space-between;
  padding:1.15rem 1.25rem;border-block-end:1px solid var(--line)}
.drawer-head h2{font-size:1.3rem}
.drawer-list{flex:1;overflow-y:auto;padding:1rem 1.25rem;display:grid;gap:.75rem;align-content:start}
.drawer-list li{display:grid;grid-template-columns:56px 1fr auto;gap:.8rem;align-items:center}
.drawer-list img{inline-size:56px;block-size:56px;object-fit:cover;border-radius:var(--r-sm)}
.drawer-list .dl-name{font-size:.85rem;font-weight:600}
.drawer-list .dl-price{font-size:.78rem;color:var(--muted)}
.drawer-empty{padding:1.5rem 1.25rem;color:var(--muted);font-size:.88rem}
.drawer-foot{padding:1.25rem;border-block-start:1px solid var(--line);display:grid;gap:.85rem}
.drawer-total{display:flex;justify-content:space-between;align-items:baseline;font-size:.85rem;color:var(--muted)}
.drawer-total strong{font-family:var(--font-display);font-size:1.4rem;color:var(--navy)}
.drawer-note{font-size:.72rem;color:var(--muted)}

/* ---------- 18. FICHE PRODUIT ---------- */
.product-dialog{inline-size:min(100%,860px);padding:0;border:0;border-radius:var(--r-lg);
  background:var(--paper);color:var(--ink);box-shadow:var(--shadow-float)}
.product-dialog::backdrop{background:var(--navy)8C;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
.pd-close{position:absolute;inset-block-start:12px;inset-inline-end:12px;z-index:2;
  background:var(--surface);box-shadow:var(--shadow-card)}
.pd-body{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr)}
.pd-body img{inline-size:100%;block-size:100%;object-fit:cover;background:var(--ivory);
  border-start-start-radius:var(--r-lg);border-end-start-radius:var(--r-lg)}
.pd-copy{display:grid;gap:.7rem;align-content:start;padding:clamp(1.5rem,3vw,2.4rem)}
.pd-copy h2{font-size:clamp(1.4rem,1.1rem + 1vw,2rem)}
.pd-price{font-family:var(--font-display);font-size:1.6rem;color:var(--gold-ink)}
.pd-price--demande{font-size:1.1rem;color:var(--muted)}
.pd-format{margin-block-start:-.35rem;font-size:var(--fs-label);color:var(--muted)}
.pd-desc{color:var(--muted);font-size:.92rem}
.pd-actions{display:flex;flex-wrap:wrap;gap:.6rem;margin-block-start:.5rem}
.pd-legal{font-size:.72rem;color:var(--muted)}
@media (max-width:720px){.pd-body{grid-template-columns:1fr}
  .pd-body img{aspect-ratio:4/3;border-radius:var(--r-lg) var(--r-lg) 0 0}}

/* ---------- 19. TOAST ---------- */
.toast{position:fixed;inset-block-end:22px;inset-inline-start:50%;z-index:120;
  padding:.85rem 1.4rem;border-radius:var(--r-pill);background:var(--navy);color:#fff;
  font-size:.82rem;font-weight:600;box-shadow:var(--shadow-float);
  transform:translate(-50%,120%);transition:transform var(--t-base) var(--ease-out)}
.toast.is-visible{transform:translate(-50%,0)}

/* ---------- 20. PERF ----------
   content-visibility:auto retiré volontairement : gain nul ici (LCP 1,5 s / TBT 80 ms
   sans lui) et il casse les captures pleine page, l'impression et l'ancrage du scroll. */

/* =========================================================
   21. INTÉGRATION WORDPRESS
   Les menus, la pagination et le contenu d'éditeur arrivent
   avec leur propre balisage : on l'accorde au système ci-dessus.
   ========================================================= */

.primary-nav ul,.mobile-panel ul,.footer-nav ul{list-style:none;margin:0;padding:0}
.primary-nav ul{display:flex;gap:clamp(1.1rem,2.6vw,2.4rem);align-items:center}
.primary-nav li{display:flex}
.mobile-panel ul{display:grid}
.mobile-panel li{display:block}
.mobile-panel li:last-child a{border:0;color:var(--gold-ink)}
.footer-nav li{display:block}

/* Fiche produit : le conteneur du visuel est un <div> rempli par le JS.
   Fond blanc, comme les packshots qu'il reçoit. */
.pd-media{display:grid;background:var(--surface)}
.pd-media img{inline-size:100%;block-size:100%;object-fit:cover;
  border-start-start-radius:var(--r-lg);border-end-start-radius:var(--r-lg)}
@media (max-width:720px){
  .pd-media img{aspect-ratio:4/3;border-radius:var(--r-lg) var(--r-lg) 0 0}
}

/* Pages de contenu : mentions légales, confidentialité, CGV, livraison.
   Ce sont des documents longs qui se parcourent en diagonale avant de se lire.
   La hiérarchie prime donc sur l'effet : titres calmes, filets plutôt que
   boîtes, et une mesure de ligne qui tient sur plusieurs écrans de texte. */
.page-simple{max-inline-size:100%}
.page-simple .section-head{margin-inline:0;max-width:none}
/* Le titre reste sur deux lignes au plus : « Conditions générales de vente »
   est le plus long des quatre, il sert de gabarit. */
.page-simple .section-head h1{font-size:clamp(2rem,1.45rem+2.1vw,2.9rem);
  max-width:18ch;text-wrap:balance}

.prose{max-width:72ch;color:var(--ink);font-size:1.0125rem;line-height:1.72;
  /* Les marqueurs « [[À FOURNIR : … ]] » et les URL n'ont pas de point de
     coupure naturel : sans cela ils débordent sur mobile. */
  overflow-wrap:anywhere}
.prose > p:first-child{font-size:1.14rem;line-height:1.62;color:var(--muted);
  max-width:60ch;margin-block-end:2.4rem}

/* Titres : nettement plus petits que dans les sections d'accueil. Un titre de
   document n'a pas à rivaliser avec le titre de la page. */
.prose h2{font-size:clamp(1.3rem,1.15rem+.55vw,1.6rem);line-height:1.22;
  margin-block:3rem .7rem;padding-block-start:1.4rem;
  border-block-start:1px solid var(--line);color:var(--navy)}
.prose h2:first-of-type{margin-block-start:0;padding-block-start:0;border-block-start:0}
.prose h3{font-size:1.06rem;line-height:1.3;margin-block:1.9rem .4rem;color:var(--navy)}

.prose p,.prose ul,.prose ol{margin-block-end:1.05rem}
.prose ul,.prose ol{padding-inline-start:1.25rem;list-style:disc}
.prose ol{list-style:decimal}
.prose li{margin-block-end:.42rem}
.prose li::marker{color:var(--gold-ink)}
.prose strong{color:var(--navy);font-weight:650}
.prose a{color:var(--gold-ink);text-decoration:underline;text-underline-offset:3px}
.prose img{border-radius:var(--r-md)}

/* Tableaux : filets seuls, jamais de cadre ni de fond alterné. */
.prose table{inline-size:100%;border-collapse:collapse;margin-block:1.4rem 1.8rem;
  font-size:.945rem}
.prose :is(th,td){padding-block:.72rem;padding-inline-end:1.1rem;
  text-align:start;vertical-align:top;border-block-end:1px solid var(--line)}
.prose th{font-size:.72rem;letter-spacing:.09em;text-transform:uppercase;
  font-weight:700;color:var(--gold-ink);padding-block-end:.55rem;
  border-block-end:1.5px solid var(--navy)}
.prose tr:last-child td{border-block-end:1px solid var(--line-strong)}

.prose blockquote{margin-block:1.6rem;padding-inline-start:1.2rem;
  border-inline-start:3px solid var(--gold);font-style:italic;color:var(--muted)}

/* Marqueurs de données manquantes : visibles en recette, invisibles au lecteur
   final puisqu'ils auront disparu du contenu avant la mise en ligne. */
.prose mark{background:var(--gold-soft);color:var(--ink);
  padding-inline:.25em;border-radius:2px}


/* ---------- FORMATIONS : ARCHIVE ET FICHE ----------
   Le prix et les dates ne sont pas publics : la conversion passe par un
   message, pas par un panier. La page doit donc donner assez de matière
   pour qu'écrire devienne naturel. */
.training-archive{display:grid;gap:clamp(2rem,4vw,3.25rem)}
.training-cards{display:grid;gap:0;max-width:var(--container);
  margin-inline:auto;inline-size:100%}
.training-card{display:grid;gap:.5rem;justify-items:start;
  padding-block:1.6rem;border-block-start:1px solid var(--line-mid);
  transition:border-color var(--t-base)}
.training-card:last-child{border-block-end:1px solid var(--line-mid)}
@media (hover:hover){.training-card:hover{border-block-start-color:var(--navy)}}
.training-card-title{font-size:clamp(1.3rem,1.1rem+.9vw,1.75rem);line-height:1.18}
.training-card-title a::after{content:"";position:absolute;inset:0}
.training-card{position:relative}
.training-card-desc{max-width:62ch;color:var(--muted)}

@media (min-width:860px){
  .training-cards{grid-template-columns:repeat(2,minmax(0,1fr));
    column-gap:clamp(2rem,4vw,4rem)}
  .training-card:nth-last-child(-n+2){border-block-end:1px solid var(--line-mid)}
}

.training-aside{display:grid;gap:.7rem;justify-items:start;
  max-inline-size:100%;inline-size:100%;
  padding:clamp(1.75rem,3.5vw,2.5rem);border-radius:var(--r-md);
  background:var(--ivory)}
.training-aside h2{font-size:clamp(1.3rem,1.1rem+.8vw,1.7rem)}
.training-aside p{max-width:52ch;color:var(--muted)}

.formation-single{display:grid;gap:clamp(2rem,4vw,3.25rem)}
.formation-body{display:grid;gap:clamp(1.75rem,3.5vw,3rem);
  max-inline-size:100%;inline-size:100%}
.formation-head{display:grid;gap:.9rem;justify-items:start;max-width:none}
.formation-head h1{font-size:clamp(2rem,1.5rem+2.2vw,3rem);
  max-width:16ch;text-wrap:balance}

.formation-facts{display:flex;flex-wrap:wrap;gap:0;margin:0;inline-size:100%}
.formation-facts > div{flex:1 1 9rem;padding-block-start:1rem;
  border-block-start:1px solid var(--line-mid)}
.formation-facts dt{font-size:var(--fs-eyebrow);font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--gold-ink)}
.formation-facts dd{margin:.25rem 0 0;font-family:var(--font-display);
  font-size:1.14rem;color:var(--navy)}

.formation-cta{display:grid;gap:.75rem;justify-items:start;
  padding:clamp(1.75rem,3.5vw,2.5rem);border-radius:var(--r-md);
  background:var(--navy);color:var(--text-on-navy)}
.formation-cta h2{color:#fff;font-size:clamp(1.3rem,1.1rem+.8vw,1.7rem)}
.formation-cta p{max-width:52ch;color:var(--text-on-navy-2)}
.formation-note{font-size:var(--fs-label)}

.formation-autres{max-inline-size:100%;inline-size:100%}
.formation-autres h2{margin-block-end:1.25rem;
  font-size:clamp(1.3rem,1.1rem+.8vw,1.7rem)}

@media (min-width:1000px){
  .formation-body{grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);
    align-items:start;column-gap:clamp(2.5rem,5vw,5rem)}
  /* L'en-tête tient toute la largeur : sur une seule colonne, un titre comme
     « Lancer son e-commerce » cassait sur trois lignes. */
  .formation-head{grid-column:1/-1}
  .formation-head h1{max-width:22ch}
  .formation-facts{max-width:44rem}
  .formation-cta{position:sticky;inset-block-start:96px}
}


/* ---------- FICHE PRODUIT ----------
   La page où se décide l'achat. Le bloc d'achat est isolé par du blanc, pas
   par une bordure ; la réassurance vient juste dessous, là où naît le doute. */
/* `grid-template-columns:1fr` vaut `minmax(auto,1fr)` : la colonne prend la
   largeur minimale de son contenu, ici la grille des produits associés, et
   pousse toute la page. `minmax(0,1fr)` l'autorise à rétrécir.
   La classe est `produit-page`, pas `single-produit` : WordPress pose
   celle-ci sur <body>, et la grille s'appliquait au document entier — 40 px
   d'écart entre l'annonce, l'en-tête, la bannière et le pied de page. */
.produit-page{display:grid;grid-template-columns:minmax(0,1fr);
  gap:clamp(2.5rem,5vw,4.5rem)}
.produit-page > *{max-inline-size:100%;
  inline-size:100%;min-inline-size:0}

/* Bloc d'achat : média puis texte en mobile, deux colonnes dès 900 px
   (≈ 45 / 55), gouttière généreuse. */
.produit-achat{display:grid;grid-template-columns:minmax(0,1fr);
  gap:clamp(1.5rem,3vw,2rem) clamp(2.5rem,5vw,5rem);align-items:start}

/* Le média est un carré blanc à filet : les visuels sont des packshots sur
   fond blanc, contenus et jamais recadrés.
   Pas de grille ici : dans une grille, la rangée `auto` prend la hauteur
   intrinsèque de l'image (620 px via width/height) et `block-size:100%` se
   résout sur cette rangée, pas sur la figure — l'image débordait et
   `overflow:hidden` la recadrait au lieu de la contenir. En bloc, le
   pourcentage se résout sur la hauteur de la figure. */
.produit-media{margin:0;display:block;
  background:var(--surface);border:1px solid var(--line-card);
  border-radius:var(--r-lg);overflow:hidden}
.produit-media img{display:block;inline-size:100%;block-size:100%;object-fit:contain}

.produit-copy{display:grid;gap:.75rem;justify-items:start;align-content:start}
.produit-copy .eyebrow{margin-block-end:0}
/* Aucune largeur maximale sur le titre : la colonne porte déjà la sienne,
   et c'est la largeur du titre qu'on mesure à 2722 px. */
.produit-copy h2{font-size:clamp(1.6rem,1.15rem + 1.8vw,2.7rem);line-height:1.1}

/* Prix puis contenance sur la même ligne : « 61 € · 90 gélules ». Le prix est
   en gras, la contenance en retrait ; sans prix, la mention prend la place du
   prix, même corps, graisse normale. */
.produit-prix{font-family:var(--font-display);font-size:var(--fs-price-lg);
  font-weight:var(--fw-title);line-height:1.2;color:var(--navy)}
.produit-prix--demande{font-weight:var(--fw-body);color:var(--muted)}
/* La contenance est en corps de chapô, pas au corps du prix : « 120 comprimés
   × 300 mg » au corps du prix passait sur deux lignes à 375 px. En bloc en
   ligne, elle descend entière quand elle ne tient pas, jamais coupée. */
.produit-format{display:inline-block;font-size:var(--fs-lead);
  font-weight:var(--fw-body);color:var(--muted)}

.produit-accroche{max-width:52ch;font-size:var(--fs-lead);color:var(--muted)}
.produit-cadrage{max-width:52ch;font-size:var(--fs-label);color:var(--muted)}
.produit-actions{display:flex;flex-wrap:wrap;gap:.75rem;inline-size:100%;
  margin-block-start:.35rem}

/* Mobile : image en premier, puis nom, prix et bouton principal — tous
   visibles sans défiler à 375 × 667, mesuré sur le titre le plus long du
   catalogue. La bannière se réduit au fil d'Ariane : le nom du produit y est
   gardé pour les lecteurs d'écran et les moteurs (c'est le h1), mais il n'est
   affiché qu'une fois, sous l'image, là où le prix et le bouton le suivent.
   Avec le titre visible deux fois, le bouton tombait à 667 px sur un titre
   de deux lignes. La fiche démarre plus haut, le média prend toute la largeur
   mais sa hauteur suit l'écran, et l'accroche passe sous les boutons. */
@media (max-width:899px){
  body.single-produit .page-banner{padding-block:.9rem}
  body.single-produit .page-banner h1{position:absolute;width:1px;height:1px;
    margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);
    white-space:nowrap;border:0}
  body.single-produit .page-banner .breadcrumb{margin-block-start:0;font-size:var(--fs-sm)}
  body.single-produit .page-banner .breadcrumb [aria-current],
  body.single-produit .page-banner .breadcrumb [aria-hidden]:has(+ [aria-current]){display:none}
  .produit-page{padding-block-start:1.25rem}
  .produit-media{block-size:max(200px,min(34vh,100vw - 2.5rem))}
  .produit-accroche{order:1}
  .produit-cadrage{order:2}
  .produit-actions .button{flex:1 1 100%}
}
@media (min-width:900px){
  .produit-achat{grid-template-columns:minmax(0,45fr) minmax(0,55fr)}
  /* Le média suit la lecture, sous l'en-tête collant (66 px une fois réduit). */
  .produit-media{position:sticky;inset-block-start:96px;aspect-ratio:1}
  .produit-copy{gap:1rem}
}

/* Composition et conseils d'utilisation : deux cellules à filets côte à côte
   dès 760 px, empilées avant. Chaque étape porte son numéro en grand corps. */
.produit-details{display:grid;grid-template-columns:minmax(0,1fr);
  gap:clamp(1.75rem,3.5vw,3rem) clamp(2.5rem,5vw,5rem)}
.produit-details h2{margin-block-end:1rem;font-size:clamp(1.3rem,1.1rem+.8vw,1.7rem)}
.produit-composition p{max-width:52ch;line-height:var(--lh-body)}
.produit-usage ol{display:grid;gap:1.1rem;margin:0;padding:0;list-style:none}
.produit-usage li{display:grid;grid-template-columns:auto minmax(0,1fr);
  gap:0 1rem;align-items:start}
.produit-usage .rule-num{margin:0;min-inline-size:1.3ch;line-height:1.1}
.produit-usage p{max-width:48ch;padding-block-start:.4rem}
@media (min-width:760px){.produit-details{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* Bande de réassurance : cellules à filets, jamais de cartes. */
/* `repeat(4, minmax(0,1fr))` ne se replie pas : la grille gardait ses quatre
   colonnes à 375 px et poussait toute la page à 1198 px de large. */
.produit-reassurance ul{display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,13rem),1fr));
  gap:clamp(1rem,2.5vw,2.25rem)}
.produit-reassurance li{display:grid;gap:.25rem;align-content:start;
  padding-block-start:1.1rem;border-block-start:1px solid var(--line-mid)}
.produit-reassurance strong{font-family:var(--font-display);font-size:1.06rem;
  font-weight:500;color:var(--navy);letter-spacing:-.012em}
.produit-reassurance span{font-size:var(--fs-label);color:var(--muted)}

.produit-description{display:grid;gap:.9rem}
.produit-description h2{font-size:clamp(1.3rem,1.1rem+.8vw,1.7rem)}
.produit-description .prose{max-width:62ch}

.produit-legal{max-width:68ch;margin-inline:0;padding:1.1rem 1.25rem;
  border-radius:var(--r-sm);background:var(--ivory);
  font-size:var(--fs-label);color:var(--muted)}

/* La grille des produits associés est imbriquée dans une grille : sans
   `minmax(0,1fr)`, sa colonne prend la largeur de son contenu et déborde. */
.produit-associes{display:grid;grid-template-columns:minmax(0,1fr);gap:1.35rem}
.produit-associes h2{font-size:clamp(1.3rem,1.1rem+.8vw,1.7rem)}
/* Quatre produits : 2 × 2 en mobile, jamais de défilement horizontal, et
   quatre colonnes dès que le bloc d'achat passe en deux colonnes. */
.produit-associes .product-grid{min-inline-size:0;
  grid-template-columns:repeat(2,minmax(0,1fr))}
@media (min-width:900px){
  .produit-associes .product-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}

/* Rappel d'achat en fin de lecture : la décision se prend souvent ici. */
.produit-rappel{display:flex;flex-wrap:wrap;align-items:center;
  justify-content:space-between;gap:1.25rem;
  padding:clamp(1.4rem,3vw,2rem) clamp(1.4rem,3vw,2.25rem);
  border-radius:var(--r-md);background:var(--ivory)}
.produit-rappel-nom{font-family:var(--font-display);font-size:1.25rem;
  color:var(--navy);letter-spacing:-.015em}
.produit-rappel-prix{font-family:var(--font-display);font-size:var(--fs-price);
  color:var(--gold-ink)}
.produit-rappel-prix--demande{color:var(--muted)}
@media (max-width:599px){.produit-rappel .button{inline-size:100%}}


/* ---------- PAGES À PROPOS ET CONTACT ---------- */
.page-apropos,.page-contact{display:grid;grid-template-columns:minmax(0,1fr);
  gap:clamp(2.5rem,5vw,4.5rem)}
.page-apropos > *,.page-contact > *{max-width:var(--container);
  margin-inline:auto;inline-size:100%;min-inline-size:0}

.apropos-head,.contact-head{display:grid;gap:.9rem;justify-items:start}
.apropos-head h1,.contact-head h1{font-size:clamp(2.1rem,1.5rem+2.4vw,3.2rem);
  max-width:18ch;text-wrap:balance}
.apropos-intro,.contact-intro{max-width:58ch;font-size:var(--fs-lead);color:var(--muted)}

.apropos-portrait{margin:0;display:grid;gap:.75rem;justify-items:start;max-width:34rem}
.apropos-portrait img{inline-size:100%;border-radius:var(--r-lg);
  aspect-ratio:4/5;object-fit:cover}
.apropos-portrait figcaption{display:grid;gap:.1rem}
.apropos-portrait strong{font-family:var(--font-display);font-size:1.12rem;color:var(--navy)}
.apropos-portrait span{font-size:var(--fs-label);color:var(--muted)}

.apropos-valeurs h2,.apropos-limites h2,.contact-ailleurs h2{
  margin-block-end:1.5rem;font-size:clamp(1.3rem,1.1rem+.8vw,1.75rem)}
.apropos-valeurs ul{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(1.25rem,3vw,2.5rem)}
.apropos-valeurs li{display:grid;gap:.3rem;align-content:start;
  padding-block-start:1.35rem;border-block-start:1px solid var(--line-mid)}
.apropos-valeurs strong{font-family:var(--font-display);font-size:1.14rem;
  font-weight:500;color:var(--navy);letter-spacing:-.015em}
.apropos-valeurs p{color:var(--muted);font-size:var(--fs-label)}
@media (max-width:820px){.apropos-valeurs ul{grid-template-columns:minmax(0,1fr)}}

/* « Ce que je ne fais pas » : la réponse à l'objection MLM se fait par
   l'absence, et c'est vérifiable en parcourant le site. */
.apropos-limites ul{display:grid;gap:0;max-width:72ch}
.apropos-limites li{padding-block:1.05rem;color:var(--muted);
  border-block-start:1px solid var(--line-mid)}
.apropos-limites li:last-child{border-block-end:1px solid var(--line-mid)}

.apropos-cta,.contact-cta{display:grid;gap:.85rem;justify-items:start;
  padding:clamp(1.75rem,3.5vw,2.75rem);border-radius:var(--r-md);
  background:var(--navy);color:var(--text-on-navy)}
.apropos-cta h2{color:#fff;font-size:clamp(1.3rem,1.1rem+.8vw,1.75rem)}
.apropos-cta p,.contact-cta .contact-note{max-width:52ch;color:var(--text-on-navy-2)}
.apropos-actions{display:flex;flex-wrap:wrap;gap:.75rem;margin-block-start:.35rem}

.contact-choix ul{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(1.25rem,3vw,2.5rem)}
.contact-choix li{display:grid;gap:.4rem;justify-items:start;align-content:start;
  padding-block-start:1.35rem;border-block-start:1px solid var(--line-mid);
  transition:border-color var(--t-base)}
@media (hover:hover){.contact-choix li:hover{border-block-start-color:var(--navy)}}
.contact-choix strong{font-family:var(--font-display);font-size:1.18rem;
  font-weight:500;color:var(--navy);letter-spacing:-.015em}
.contact-choix p{color:var(--muted);font-size:var(--fs-label)}
@media (max-width:820px){.contact-choix ul{grid-template-columns:minmax(0,1fr)}}

.contact-ailleurs{display:grid;gap:.75rem;justify-items:start}
.contact-ailleurs p{max-width:52ch;color:var(--muted)}


/* Aperçu boutique sur l'accueil : la grille montre huit produits et renvoie
   vers la boutique complète, où les filtres ont un sens. */
.shop-apercu-suite{display:grid;gap:.9rem;justify-items:start;
  max-inline-size:100%;margin-block-start:clamp(1.75rem,3.5vw,2.5rem)}


/* ---------- PARCOURS DE COMMANDE ----------
   Sous la grille de la boutique et des catégories : trois étapes en cellules
   à filets, numéro en grand corps sans zéro devant. La visiteuse apprend ici
   qu'on ne paie pas en ligne, avant de le découvrir dans le tiroir. */
.parcours{background:var(--paper)}
.parcours .section-head{margin-block-end:clamp(1.5rem,3vw,2.25rem)}
.parcours h2{font-size:clamp(1.5rem,1.2rem + 1.2vw,2.1rem)}
.parcours-etapes{display:grid;grid-template-columns:minmax(0,1fr);
  gap:clamp(1.5rem,3vw,2.5rem);max-inline-size:100%}
.parcours-etapes li{display:grid;gap:.35rem;align-content:start}
.parcours-etapes h3{font-size:1.15rem;font-weight:500;color:var(--navy);
  letter-spacing:-.015em}
.parcours-etapes p{max-width:36ch;font-size:var(--fs-label);color:var(--muted)}
.parcours-note{margin-block-start:clamp(1.5rem,3vw,2.25rem);max-width:60ch;
  font-size:var(--fs-label);color:var(--muted)}
@media (min-width:700px){.parcours-etapes{grid-template-columns:repeat(3,minmax(0,1fr))}}

/* ---------- UNE QUESTION AVANT DE CHOISIR ----------
   Bande sombre qui ferme la boutique : une phrase, le bouton WhatsApp et le
   lien vers la page de livraison. Bouton pleine largeur en mobile. */
.question{display:grid;gap:1.5rem clamp(2rem,5vw,4.5rem);align-items:center;
  padding-block:var(--section-y-sm)}
.question h2{max-width:18ch;font-size:clamp(1.5rem,1.2rem + 1.2vw,2.1rem);
  text-wrap:balance}
.question-actions{display:flex;flex-wrap:wrap;align-items:center;gap:.75rem 1.75rem}
@media (min-width:900px){
  .question{grid-template-columns:minmax(0,1fr) auto}
  .question-actions{justify-content:end}
}
@media (max-width:599px){.question-actions .button{flex:1 1 100%}}


/* ---------- BANNIÈRE DE TITRE DE PAGE ----------
   Reprise de la référence : fond gris très clair, titre centré, fil d'Ariane
   dessous. Elle donne à chaque page intérieure la même entrée en matière. */
.page-banner{padding-block:clamp(2.5rem,5vw,4rem);padding-inline:var(--bord);
  background:var(--shell);text-align:center}
.page-banner h1{font-size:clamp(1.9rem,1.4rem + 2vw,2.9rem);
  font-weight:var(--fw-title);line-height:var(--lh-tight);color:var(--ink);
  max-width:20ch;margin-inline:auto}
.page-banner .breadcrumb{justify-content:center;margin-block:.85rem 0;
  max-width:none;font-size:var(--fs-label)}
.page-banner .breadcrumb a{color:var(--muted)}
.page-banner .breadcrumb [aria-current]{color:var(--ink)}
@media (hover:hover){.page-banner .breadcrumb a:hover{color:var(--gold-ink)}}

/* ---------- BANDEAU DE RÉASSURANCE ----------
   Trois promesses, icône à gauche, avant le pied de page. Elles ne portent
   que ce qui est vrai : rien sur un seuil de livraison offerte tant que Fati
   n'a pas fixé ses tarifs. */
.assurance{padding-block:var(--section-y-sm);padding-inline:var(--bord);
  border-block-start:1px solid var(--line)}
.assurance ul{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(1.25rem,3vw,2.5rem);max-inline-size:100%}
.assurance li{display:grid;grid-template-columns:auto 1fr;gap:.15rem .9rem;
  align-items:center}
.assurance .i{grid-row:span 2;inline-size:48px;block-size:48px;color:var(--gold);
  stroke-width:1.4}
.assurance strong{font-size:1.02rem;font-weight:var(--fw-title);color:var(--ink)}
.assurance span{font-size:var(--fs-label);color:var(--muted)}
@media (max-width:820px){
  .assurance ul{grid-template-columns:minmax(0,1fr);gap:1.1rem}
}

/* ---------- SECTIONS ALTERNÉES ----------
   Le rythme de la référence : blanc, gris très clair, blanc. */
.section--shell{background:var(--ivory)}
.section--navy{background:var(--navy);color:var(--text-on-navy)}
.section--navy :is(h2,h3){color:var(--text-on-navy)}
.section--navy .eyebrow{color:var(--gold-light)}


.drawer-voir{justify-self:center;margin-block-start:.35rem;font-size:var(--fs-label)}

/* ---------- PAGE « MA SÉLECTION » ----------
   Structure du panier de la référence, sans paiement en ligne : le
   récapitulatif prépare un message, il n'encaisse rien. */
.page-selection{display:grid;grid-template-columns:minmax(0,1fr)}
.selection-layout{display:grid;grid-template-columns:minmax(0,1fr);
  gap:clamp(1.75rem,3.5vw,3rem);max-width:var(--container);
  margin-inline:auto;inline-size:100%}

.selection-head{display:none}
.selection-items{display:grid;gap:0}

.selection-item{position:relative;display:grid;align-items:center;
  grid-template-columns:auto 72px minmax(0,1fr);
  grid-template-areas:"retirer media nom" ". . prix" ". . qte" ". . soustotal";
  gap:.5rem .9rem;padding-block:1.15rem;
  border-block-start:1px solid var(--line)}
.selection-item:last-child{border-block-end:1px solid var(--line)}

.selection-item-retirer{grid-area:retirer;inline-size:32px;block-size:32px;
  border-radius:var(--r-pill);color:var(--muted);font-size:1.1rem;line-height:1;
  transition:background var(--t-micro),color var(--t-micro)}
@media (hover:hover){.selection-item-retirer:hover{background:var(--ivory);color:var(--ink)}}

.selection-item-media{grid-area:media;inline-size:72px;block-size:72px;
  border-radius:var(--r-sm);overflow:hidden;background:var(--ivory)}
.selection-item-media img{inline-size:100%;block-size:100%;object-fit:cover}

.selection-item-nom{grid-area:nom;display:grid;gap:.1rem}
.selection-item-nom p{font-weight:var(--fw-title);color:var(--ink);line-height:1.25}
.selection-item-nom span{font-size:var(--fs-label);color:var(--muted)}

.selection-item-prix{grid-area:prix;color:var(--muted)}
.selection-item-soustotal{grid-area:soustotal;font-weight:var(--fw-title);color:var(--ink)}

.selection-item-qte{grid-area:qte;display:inline-flex;align-items:center;
  border:1px solid var(--line-mid);border-radius:var(--r-pill);inline-size:fit-content}
.selection-item-qte button{inline-size:38px;min-block-size:38px;
  color:var(--ink);font-size:1rem;line-height:1;
  transition:color var(--t-micro)}
@media (hover:hover){.selection-item-qte button:hover{color:var(--gold-ink)}}
.selection-item-qte span{min-inline-size:2.25rem;text-align:center;
  font-weight:var(--fw-title);font-variant-numeric:tabular-nums}

.selection-vide{display:grid;gap:.6rem;justify-items:start;
  padding-block:2.5rem;color:var(--muted)}
.selection-actions{display:flex;flex-wrap:wrap;gap:1.5rem;
  justify-content:space-between;padding-block-start:1.35rem}

.selection-resume{display:grid;gap:.9rem;align-content:start;
  padding:clamp(1.5rem,3vw,2rem);border:1px solid var(--line-card);
  border-radius:var(--r-md);background:var(--surface)}
.selection-resume h2{font-size:1.25rem}
.selection-totaux{display:grid;gap:.6rem;margin:0}
.selection-totaux > div{display:flex;justify-content:space-between;gap:1rem;
  padding-block-end:.6rem;border-block-end:1px solid var(--line)}
.selection-totaux dt{color:var(--muted)}
.selection-totaux dd{margin:0;font-weight:var(--fw-title);color:var(--ink)}
.selection-note,.selection-paiement{font-size:var(--fs-label);color:var(--muted)}

@media (min-width:760px){
  .selection-item{grid-template-columns:auto 84px minmax(0,1fr) 7rem 9rem 7rem;
    grid-template-areas:"retirer media nom prix qte soustotal";
    gap:1.1rem;align-items:center}
  .selection-item-media{inline-size:84px;block-size:84px}
  .selection-item-prix,.selection-item-soustotal{text-align:end}
  .selection-head{display:grid;
    grid-template-columns:auto 84px minmax(0,1fr) 7rem 9rem 7rem;
    gap:1.1rem;padding-block:.85rem;
    font-size:var(--fs-eyebrow);letter-spacing:.09em;text-transform:uppercase;
    font-weight:var(--fw-title);color:var(--muted)}
  .selection-head span:first-child{grid-column:3}
  .selection-head span:nth-child(2){text-align:end}
  .selection-head span:last-child{text-align:end}
}

@media (min-width:1000px){
  .selection-layout{grid-template-columns:minmax(0,1fr) 22rem;
    align-items:start;column-gap:clamp(2rem,4vw,3.5rem)}
  .selection-resume{position:sticky;inset-block-start:96px}
}



/* ---------- ICONES ----------
   Les pictogrammes se lisent : ils ne sont pas des vignettes decoratives.
   L'epaisseur de trait baisse quand la taille monte, sinon un grand
   pictogramme parait lourd a cote du texte. */
.i{flex:none;stroke-width:1.7}
.button .i,.arrow-link .i,.text-button .i{stroke-width:1.9}
.button-lg .i{stroke-width:1.7}


/* ---------- VISUELS DES FORMATIONS ----------
   Une formation sans image se lit comme une ligne de liste : le visuel lui
   donne le poids d'une offre. Il reste en retrait, sans ombre ni contour,
   pour ne pas réintroduire la carte que le reste du site a écartée. */
.training-card-media{display:block;margin-block-end:1.1rem;
  border-radius:var(--r-md);overflow:hidden;background:var(--ivory);
  aspect-ratio:4/3}
.training-card-media img{inline-size:100%;block-size:100%;object-fit:cover;
  transition:transform var(--t-enter) var(--ease-out)}
@media (hover:hover){.training-card:hover .training-card-media img{transform:scale(1.02)}}

.formation-media{margin:0 0 clamp(1.5rem,3vw,2.25rem);
  border-radius:var(--r-lg);overflow:hidden;background:var(--ivory);
  aspect-ratio:16/7}
.formation-media img{inline-size:100%;block-size:100%;object-fit:cover}

/* ---------- CATÉGORIES ----------
   Vignettes rondes, reprises de la référence. Le rond découpe le visuel sans
   cadre ni ombre : c'est la photo qui porte, pas la boîte. */
.section-head--center{text-align:center;max-inline-size:46rem;
  margin-inline:auto}
.section-head--center .eyebrow{margin-block-end:.55rem}

.categories-grid{display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,9.5rem),1fr));
  gap:clamp(1.25rem,3vw,2.5rem);max-inline-size:100%}
.categorie a{display:grid;justify-items:center;gap:.2rem;text-align:center}
.categorie-media{inline-size:min(100%,11.5rem);aspect-ratio:1;
  border-radius:50%;overflow:hidden;background:var(--ivory);
  margin-block-end:.9rem;transition:transform var(--t-base) var(--ease-out)}
.categorie-media img{inline-size:100%;block-size:100%;object-fit:cover}
/* Sans visuel, un aplat de la palette plutôt qu'un trou : la section reste
   présentable avant que la cliente ait tout rempli. */
.categorie-media--vide{background:
  radial-gradient(circle at 34% 30%,var(--gold-soft),var(--navy-soft) 72%)}
.categorie-nom{font-size:1.14rem;font-weight:var(--fw-title);color:var(--ink);
  transition:color var(--t-micro)}
.categorie-compte{font-size:var(--fs-label);color:var(--muted)}
@media (hover:hover){
  .categorie a:hover .categorie-media{transform:scale(1.03)}
  .categorie a:hover .categorie-nom{color:var(--gold-ink)}
}

/* ---------- CARROUSEL PRODUITS ----------
   Défilement horizontal natif avec points d'ancrage : pas de dépendance, et
   le geste tactile fonctionne sans JavaScript. Les flèches ne servent qu'à la
   souris et au clavier. */
.carousel{position:relative;max-inline-size:100%}
.carousel-piste{display:grid;grid-auto-flow:column;
  grid-auto-columns:14rem;
  gap:clamp(.9rem,1.8vw,1.5rem);
  overflow-x:auto;scroll-snap-type:x mandatory;
  scroll-padding-inline:0;padding-block-end:.5rem;
  scrollbar-width:none}
.carousel-piste::-webkit-scrollbar{display:none}
.carousel-piste > *{scroll-snap-align:start}

/* Les pistes se dimensionnent en unités absolues, jamais en pourcentage :
   un pourcentage dans `grid-auto-columns` se résout sur le conteneur puis se
   répartit entre les huit colonnes implicites, qui s'écrasaient à 139 px et le
   carrousel ne défilait plus du tout. Une largeur fixe fait réellement
   déborder la piste, ce qui est le principe même du défilement. */
@media (min-width:700px){.carousel-piste{grid-auto-columns:15.5rem}}
@media (min-width:1000px){.carousel-piste{grid-auto-columns:17rem}}

.carousel-nav{display:flex;gap:.6rem;justify-content:flex-end;
  margin-block-end:1rem}
.carousel-bouton{inline-size:44px;block-size:44px;border-radius:50%;
  border:1.5px solid var(--line-mid);color:var(--ink);
  display:grid;place-items:center;
  transition:border-color var(--t-micro),background var(--t-micro),color var(--t-micro)}
.carousel-bouton[disabled]{opacity:.35;cursor:default}
@media (hover:hover){
  .carousel-bouton:not([disabled]):hover{background:var(--navy);
    border-color:var(--navy);color:var(--text-on-navy)}
}
.carousel-bouton .i{inline-size:18px;block-size:18px}
.carousel-prec .i{transform:rotate(180deg)}

/* Fil d'Ariane */
.breadcrumb{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center;
  max-inline-size:100%;margin-block-end:2rem;
  font-size:.78rem;color:var(--muted)}
.breadcrumb a{text-decoration:underline;text-underline-offset:3px}
@media (hover:hover){.breadcrumb a:hover{color:var(--navy)}}

/* La fiche produit en page dédiée est entièrement décrite dans le bloc
   « FICHE PRODUIT » plus haut : ne pas reposer ici de règle sur
   `.produit-media` ou `.produit-copy`, elle l'emporterait par l'ordre. */

/* Pagination */
.pagination{display:flex;flex-wrap:wrap;gap:.4rem;justify-content:center;
  max-inline-size:100%;margin-block-start:3rem}
.pagination .page-numbers{display:grid;place-items:center;min-inline-size:44px;min-block-size:44px;
  padding-inline:.6rem;border-radius:var(--r-pill);border:1px solid var(--line-strong);
  font-size:.82rem;font-weight:700;color:var(--navy)}
.pagination .current{background:var(--navy);border-color:var(--navy);color:#fff}

/* Barre d'admin connectée : ne pas cacher le header collant dessous */
body.admin-bar .site-header{inset-block-start:32px}
@media (max-width:782px){body.admin-bar .site-header{inset-block-start:46px}}

/* Fallback : sans le champ image renseigné, le hero ne doit pas s'effondrer */
.hero-visual:not(:has(.hero-media)) .hero-shape{display:none}