/* ============================================================
   ZELLIJ STUDIO — refonte éditoriale immersive (proto 2026-07-27)
   DA : blanc lumineux majoritaire · prune profonde · bordeaux
   · olive/sauge · doré ancien grisé · rose poudré très contrôlé
   Typo : Newsreader (serif éditorial, contraste modéré) + Instrument Sans (UI)
   ⚠️ Cette ligne annonçait « Fraunces » jusqu'au 30/07 : c'était un vestige d'un
   prototype abandonné, faux même à l'époque du Bodoni. Corrigé.
   ============================================================ */

:root{
  /* LUMIÈRE — retour Latifa 28/07 : « plus de beige générique, je veux de la
     luminosité ». Le fond passe en BLANC PUR. La seconde nuance garde un souffle
     de prune (pas de jaune, pas de sépia) pour rester dans la DA sans faire beige. */
  --paper:#FFFFFF;
  --paper-2:#FAF7F9;
  --ink:#241722;
  --ink-soft:#5F4C5A;
  --plum:#371F31;
  --plum-deep:#221420;
  --bordeaux:#7B2C3F;
  --bordeaux-dark:#5E2231;
  --olive:#5B6135;
  --sauge:#8B9271;
  --gold:#A18A58;
  --rose:#D9A9B4;
  /* Rose poudré éclairci. Le `--rose` du système est fait pour des touches
     rares sur fond clair ; posé en grand sur une photo beige, il devient
     terne et le mot accentué se noie. Variante plus lumineuse réservée aux
     mots de titre sur photo — le token d'origine n'est pas touché. */
  --rose-vif:#F7B9CB;
  /* 30/07 — Newsreader remplace Bodoni Moda. Voir `assets/fonts/fonts.css`.
     Repli Georgia : serif a contraste modere, l'allure tient sans la police.
     ⚠️ Graisse utile 200→800, et axe optique 6→72 : les anciens reglages
     `opsz 96 / 100 / 144` de ce fichier etaient hors plage et sont supprimes. */
  --serif:"Newsreader",Georgia,"Times New Roman",serif;
  --sans:"Instrument Sans",-apple-system,sans-serif;
  --navh:76px;
  --wrap:1280px;
  --ease:cubic-bezier(.22,.7,.25,1);
}

*{margin:0;padding:0;box-sizing:border-box}
/* pas de scroll-behavior:smooth — Lenis s'en charge (les 2 se contredisent).
   Le CSS reprend la main si Lenis est absent (classe .no-lenis posée par app.js). */
html{overflow-anchor:none}
html.no-lenis{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html.no-lenis{scroll-behavior:auto}}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-stopped{overflow:hidden}
body{
  font-family:var(--sans);
  color:var(--ink);
  background:var(--paper);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
em{font-style:italic}

.wrap{max-width:var(--wrap);margin:0 auto;padding:0 clamp(20px,4vw,56px)}
.center{margin-left:auto;margin-right:auto;text-align:center}
.center-col{display:flex;flex-direction:column;align-items:center;text-align:center;gap:34px}

/* ---------- grain ---------- */
.grain{
  /* le grain salissait le blanc : baissé de .045 à .026 (retour « luminosité » 28/07) */
  position:fixed;inset:-50%;z-index:80;pointer-events:none;opacity:.026;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.72' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain 9s steps(8) infinite;
}
@keyframes grain{
  0%,100%{transform:translate(0,0)}25%{transform:translate(-2%,3%)}
  50%{transform:translate(3%,-2%)}75%{transform:translate(-3%,-3%)}
}
@media (prefers-reduced-motion:reduce){.grain{animation:none}}

/* ---------- typographie ---------- */
.eyebrow{
  font-family:var(--sans);font-size:11.5px;font-weight:600;
  letter-spacing:.22em;text-transform:uppercase;color:var(--gold);
}
.eyebrow.light{color:var(--rose)}
.display{
  font-family:var(--serif);font-weight:700;
  font-size:clamp(40px,5.8vw,80px);line-height:1.02;letter-spacing:-.015em;
  margin-top:14px;max-width:18ch;
}
.display em{font-weight:700;color:var(--bordeaux)}
.chapter-dark .display{color:var(--paper)}
.chapter-dark .display em{color:var(--rose)}
.lede{font-size:clamp(16.5px,1.4vw,19px);color:var(--ink-soft);line-height:1.75}
.dark-lede{color:#CDBBC9}
.pullquote{
  font-family:var(--serif);font-weight:600;
  font-size:clamp(30px,4.6vw,58px);line-height:1.14;color:var(--paper);
  max-width:20ch;margin:0 auto;text-align:center;
}
.pullquote em{color:var(--rose);font-weight:600;white-space:nowrap}

/* mot-à-mot (rempli par JS) */
.split-words .w{display:inline-block;overflow:hidden;vertical-align:top}
.split-words .w>span{display:inline-block;transform:translateY(110%)}
.no-motion .split-words .w>span,
.no-js .split-words .w>span{transform:none}
/* Le titre du hero porte la promesse du site : il ne doit jamais dépendre
   d'une animation pour devenir lisible. Les autres titres gardent leur
   révélation au défilement ; ici, le mouvement reste dans le fond et les
   éléments secondaires, sans cacher le message au premier écran. */
.hero-title.split-words .w>span{transform:none}

/* reveals — le léger flou de départ donne le « fondu » d'ERA (le texte se pose,
   il n'apparaît pas d'un coup). Pas de flou sur les mots masqués : le masque le couperait. */
.rev{opacity:0;transform:translateY(30px);filter:blur(7px);will-change:opacity,transform,filter}
.no-motion .rev,.no-js .rev{opacity:1;transform:none;filter:none}

/* ---------- boutons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--sans);font-weight:600;font-size:14.5px;letter-spacing:.02em;
  padding:15px 30px;border-radius:999px;border:1px solid transparent;
  transition:transform .35s var(--ease),background .35s,color .35s,border-color .35s;
  cursor:pointer;
}
.btn:hover{transform:translateY(-2px)}
.btn-primary{background:var(--bordeaux);color:#fff}
.btn-primary:hover{background:var(--bordeaux-dark)}
.btn-light{background:var(--paper);color:var(--ink)}
.btn-light:hover{background:#fff}
.btn-ghost{border-color:rgba(255,255,255,.4);color:#EBDFE9}
.btn-ghost:hover{border-color:#fff;color:#fff}

/* ============================================================
   NAV
   ============================================================ */
.nav{
  position:fixed;inset:0 0 auto 0;z-index:60;height:var(--navh);
  display:flex;align-items:center;justify-content:space-between;
  padding:0 clamp(18px,3vw,44px);
  transition:background .45s,box-shadow .45s;
}
.nav.scrolled{background:rgba(255,255,255,.9);backdrop-filter:blur(14px);box-shadow:0 1px 0 rgba(36,23,34,.08)}
.nav .logo img{height:34px;width:auto}
.nav .l-white{display:none}
/* La marque ne se comprime jamais. Sans ce `flex:0 0 auto`, l'ajout des deux
   entrées canoniques (11/08) écrasait le logo de 108 px à 64 px sous 760 px de
   large : le flex prenait la place sur la seule boîte qui acceptait de céder. */
.nav .logo{flex:0 0 auto}
.navlinks{display:flex;gap:34px}
.navlinks a{
  font-size:13.5px;font-weight:500;letter-spacing:.04em;color:var(--ink);
  opacity:.82;transition:opacity .3s;position:relative;
}
.navlinks a:hover{opacity:1}
.navlinks a::after{
  content:"";position:absolute;left:0;bottom:-6px;height:1px;width:0;
  background:currentColor;transition:width .35s var(--ease);
}
.navlinks a:hover::after{width:100%}
.navr{display:flex;align-items:center;gap:16px}
.navr .btn{padding:11px 22px;font-size:13px}
/* Le bouton « Menu » est habille par `css/site-menu.css` (partage).
   Ne reste ici que ce qui appartient a CETTE en-tete : sa couleur
   quand elle est posee sur une section sombre. */

/* nav sur section sombre */
.nav.on-dark .l-color{display:none}
.nav.on-dark .l-white{display:block}
.nav.on-dark .navlinks a,
.nav.on-dark .menu-toggle{color:#fff}
.nav.on-dark.scrolled{background:rgba(34,20,32,.86);box-shadow:0 1px 0 rgba(217,169,180,.12)}

/* ============================================================
   MENU DU SITE — DEMENAGE (29/07/2026)
   ------------------------------------------------------------
   Le menu de l'accueil et celui des 32 autres pages etaient deux
   composants separes : deux balisages, deux CSS recopies, deux
   comportements. Ils ont diverge, et Latifa voyait « le menu
   different de l'accueil ».
   Tout est desormais dans `css/site-menu.css` + `js/site-menu.js`,
   charges par cette page ET par `_includes/base.njk`.
   ⚠️ Ne rien remettre ici : c'est ce qui a cause la separation.
   ============================================================ */

/* ============================================================
   1 · HERO
   ============================================================ */
.hero{position:relative;min-height:100svh;display:flex;align-items:center;justify-content:center;overflow:hidden}
.hero-bg{
  position:absolute;inset:-6% 0;background-size:cover;background-position:center;
  transform:scale(1.12);will-change:transform;
}
.hero-veil{
  position:absolute;inset:0;
  background:
    linear-gradient(180deg,rgba(24,13,22,.42) 0%,rgba(24,13,22,.18) 40%,rgba(24,13,22,.6) 100%),
    radial-gradient(120% 90% at 50% 45%,transparent 40%,rgba(24,13,22,.35) 100%);
}
.hero-content{position:relative;z-index:2;text-align:center;color:#fff;padding-top:60px;padding-bottom:80px}
.hero-eyebrow{color:#E9D9C7;text-shadow:0 1px 18px rgba(24,13,22,.5)}
/* `opsz 96` demandait à Bodoni son dessin le plus contrasté : superbe en
   grand sur écran de designer, mais les traits fins disparaissaient sur la
   photo claire. Axe optique ramené bas + graisse 500 : le titre garde son
   dessin, il cesse de s'effacer. (Latifa, 29/07) */
.hero-title{
  font-family:var(--serif);font-weight:600;
  font-size:clamp(50px,9.6vw,142px);line-height:.98;letter-spacing:-.02em;
  max-width:12ch;margin:26px auto 0;text-shadow:0 2px 40px rgba(24,13,22,.45);
}
/* `font-variation-settings` s'hérite et prime sur `font-weight` : sans le
   redéclarer ici, le « direction. » en rose reprendrait la graisse du parent. */
.hero-title em{font-weight:600;color:var(--rose-vif)}
.hero-split{
  display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:10px 72px;
  max-width:680px;margin:34px auto 0;
  font-size:12.5px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:#F2E6EF;
  /* la photo a des zones très claires derrière ces deux mots : une ombre serrée
     pour détacher le tracé, une large pour assombrir le fond juste autour */
  text-shadow:0 1px 2px rgba(24,13,22,.6),0 2px 24px rgba(24,13,22,.8);
}
.hero-split-intro{flex-basis:100%;text-align:center}
.hero-cta{margin-top:44px}
.scrollcue{
  position:absolute;bottom:26px;left:50%;transform:translateX(-50%);z-index:2;
  display:flex;flex-direction:column;align-items:center;gap:10px;
  color:#E4D6E0;font-size:11px;letter-spacing:.3em;text-transform:uppercase;
}
.scrollcue i{width:1px;height:52px;background:linear-gradient(180deg,#E4D6E0,transparent);animation:cue 2.2s var(--ease) infinite}
@keyframes cue{0%{transform:scaleY(0);transform-origin:top}45%{transform:scaleY(1);transform-origin:top}55%{transform:scaleY(1);transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}
@media (prefers-reduced-motion:reduce){.scrollcue i{animation:none}}

/* ============================================================
   CHAPITRES
   ============================================================ */
.chapter{padding:clamp(110px,16vh,190px) 0;position:relative}
.chapter-light{background:var(--paper);color:var(--ink)}
.chapter-dark{background:var(--plum-deep);color:var(--paper)}

/* 2 · respirer */
.breathe{text-align:center;padding:clamp(150px,24vh,260px) 0}
.breathe-line{
  font-family:var(--serif);font-weight:600;
  font-size:clamp(44px,7.4vw,104px);line-height:1.05;margin:26px auto 30px;max-width:16ch;
}
.breathe-line em{color:var(--sauge);font-weight:600}

/* 3 · comprise */
.comprise{text-align:center;overflow:hidden;padding-bottom:clamp(130px,18vh,210px)}
.comprise .wrap{position:relative}
.frag-field{position:relative;height:150px;margin-bottom:40px}
.frag{
  position:absolute;left:50%;top:50%;
  font-family:var(--serif);font-style:italic;font-weight:350;
  font-size:clamp(15px,1.7vw,21px);color:#B99DB2;
  padding:8px 18px;border:1px solid rgba(217,169,180,.25);border-radius:999px;
  white-space:nowrap;background:rgba(252,250,246,.03);
}
.frag-rose{color:var(--rose)}
.frag-gold{color:var(--gold)}
.frag-olive{color:var(--sauge)}
.comprise .lede{margin:34px auto 0}

/* ============================================================
   4 · TRANSFORMATION (moment signature, épinglé)
   ============================================================ */
.transfo{background:var(--paper-2);position:relative}
.transfo-stage{
  min-height:100svh;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:30px;padding:60px 20px 40px;
}
.transfo-fig{
  position:relative;width:min(560px,86vw);border-radius:18px;overflow:hidden;
  box-shadow:0 60px 90px -50px rgba(36,23,34,.5);
}
/* 30/07 — « on dirait qu'elle a perdu ses couleurs a la fin ».
   Verifie a la mesure, et ce n'etait PAS un filtre oublie : le calque flou
   part bien completement. La cause est la COMPOSITION.
   Saturation de hero-split.webp, bande par bande de gauche a droite :
   0.216 · 0.204 · 0.233 · 0.275 · 0.306. La moitie gauche — le tas de
   papiers « idee floue » — est volontairement pale.
   Au depart on voit un ZOOM a 230% d'une zone sombre et chaude : de grands
   aplats riches. A l'arrivee on voit l'image ENTIERE, donc beaucoup de papier
   creme. Numeriquement l'arrivee est plus saturee (0.246 contre ~0.106 apres
   le `saturate(.55)` du calque), mais elle est plus claire et plus plate :
   l'oeil lit « delave ». Elle a raison, la mesure seule avait tort.

   L'etat RESOLU porte donc un leger gain de matiere. Il est pose en CSS, pas
   seulement dans l'animation : c'est aussi ce que voient les personnes qui
   ont reduit les animations, pour qui le calque flou est masque.
   ⚠️ Valeurs volontairement basses. Au-dela, les papiers cremes virent au
   jaune et le vert profond sature en bloc. */
.transfo-img{width:100%;filter:saturate(1.12) contrast(1.06)}
/* calque « idée floue » : gros plan flou du désordre, qui se dissipe au scroll */
.transfo-flou{
  position:absolute;inset:0;
  background-image:url("assets/zellij/hero-split.webp");
  background-size:230%;background-position:14% 38%;
  filter:blur(9px) saturate(.55) brightness(.96);
  will-change:opacity,transform;
}
.transfo-kicker{
  font-size:11.5px;font-weight:600;letter-spacing:.24em;text-transform:uppercase;
  color:var(--ink-soft);
}
.no-motion .transfo-flou{display:none}
.transfo-labels{
  display:flex;align-items:center;gap:22px;width:min(560px,86vw);
  font-size:11.5px;font-weight:600;letter-spacing:.24em;text-transform:uppercase;color:var(--ink-soft);
}
.tl-right{color:var(--bordeaux)}
.tl-track{flex:1;height:1px;background:rgba(36,23,34,.18);position:relative}
.tl-track i{
  position:absolute;top:50%;left:0;width:10px;height:10px;border-radius:50%;
  background:var(--bordeaux);transform:translate(-50%,-50%);
}
.no-motion .tl-track i{left:100%}

/* ============================================================
   5 · MÉTHODE
   ============================================================ */
.steps{
  display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(30px,4vw,64px);
  margin-top:clamp(56px,8vh,90px);
}
.step{border-top:1px solid rgba(36,23,34,.16);padding-top:28px}
.step-n{
  font-family:var(--serif);font-weight:330;font-size:clamp(44px,4vw,64px);
  color:var(--gold);line-height:1;
}
.step h3{
  font-family:var(--serif);font-weight:420;font-size:clamp(24px,2vw,30px);
  margin:18px 0 12px;
}
.step p{color:var(--ink-soft);font-size:15.5px}

/* ============================================================
   6 · BANDES MATIÈRE
   ============================================================ */
.media-band{position:relative;min-height:78vh;display:flex;align-items:center;overflow:hidden}
.media-bg{
  position:absolute;inset:-12% 0;background-size:cover;background-position:center;
  will-change:transform;
}
/* deux couches : le dégradé latéral d'origine + un voile haut qui assombrit la zone
   claire de la photo, là où se pose le mot CLARTÉ (sinon un blanc pur sur du blanc
   ne peut PAS se voir, quelle que soit l'opacité du texte). */
.media-veil{
  position:absolute;inset:0;
  background:
    linear-gradient(180deg,rgba(24,13,22,.58) 0%,rgba(24,13,22,.30) 34%,rgba(24,13,22,0) 56%),
    linear-gradient(90deg,rgba(24,13,22,.74),rgba(24,13,22,.22));
}
.media-veil-strong{background:linear-gradient(90deg,rgba(24,13,22,.84),rgba(24,13,22,.4))}
.media-content{position:relative;z-index:2;color:var(--paper);padding-top:70px;padding-bottom:70px}
/* texte sur photo : blanc PUR + ombre serrée qui détache le tracé du fond clair
   (retour Latifa 28/07 : « le texte n'est pas assez voyant, il devrait être plus blanc ») */
.media-content .display{color:#FFF;text-shadow:0 1px 2px rgba(12,6,10,.55),0 2px 26px rgba(12,6,10,.5)}
.media-content .display em{color:var(--rose)}
/* PLEIN, pas en contour : le contour fin faisait « police cheap » (retour Latifa 27/07) */
/* CLARTÉ n'est PAS un décor : c'est un mot-pilier du Kit (Latifa 28/07). Il s'affiche
   donc en blanc plein, comme un titre, avec un halo court qui détache le tracé. */
.decoword{
  position:absolute;left:0;right:0;top:11%;z-index:1;text-align:center;pointer-events:none;
  font-family:var(--serif);font-weight:600;
  font-size:clamp(66px,15vw,225px);
  line-height:1;letter-spacing:-.012em;
  color:#FFF;
  text-shadow:0 1px 2px rgba(12,6,10,.5),0 3px 26px rgba(12,6,10,.55),0 0 70px rgba(12,6,10,.35);
  will-change:transform;
}
.media-lede{
  color:#FFF;max-width:34ch;margin-top:10px;font-size:clamp(18px,1.7vw,23px);
  text-shadow:0 1px 2px rgba(12,6,10,.6),0 2px 22px rgba(12,6,10,.45);
}
.media-band .media-content{padding-top:34vh}
.rose{color:var(--rose)}

/* ============================================================
   7 · UNIVERS — bande de LOGOS qui défile (fond transparent)
   Demande Latifa 27/07 : plus de cartes photo, uniquement les logos.
   Fond clair (sa DA = blanc lumineux majoritaire) pour que les logos ressortent.
   ============================================================ */
.logos{padding:clamp(100px,14vh,160px) 0 clamp(54px,7vh,88px);overflow:hidden;background:var(--paper)}
.logos-head{text-align:center;display:flex;flex-direction:column;align-items:center;gap:14px}
.logos-head .display{max-width:16ch}
/* la piste avance seule ; touch-action:pan-y = le scroll vertical reste natif sur mobile */
.logoband{
  margin:clamp(46px,7vh,86px) 0 clamp(30px,4vh,44px);
  overflow:hidden;touch-action:pan-y;cursor:grab;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);
}
.logoband.dragging{cursor:grabbing}
.logoband-track{display:flex;align-items:center;gap:clamp(42px,7vw,120px);width:max-content;padding:0 clamp(21px,3.5vw,60px)}
.logoband-track img{-webkit-user-drag:none;user-drag:none}
/* --lh = correction OPTIQUE par logo : un mot large et un monogramme haut
   n'ont pas le même poids visuel à hauteur égale. */
.logomark{flex:none;display:flex;align-items:center;justify-content:center}
.logomark img{
  height:calc(clamp(46px,6.2vw,78px) * var(--lh,1));
  width:auto;display:block;
}
/* pas de survol requis (mobile prioritaire) : les logos sont posés tels quels */
.logos-foot{display:flex;justify-content:space-between;align-items:center;gap:18px;flex-wrap:wrap}
.drag-hint{font-size:11.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-soft);opacity:.7}
.logos-foot .go{font-size:14px}
/* sans JS / mouvement réduit : la bande devient une simple bande scrollable */
.no-motion .logoband{overflow-x:auto;scrollbar-width:none;touch-action:auto}
.no-motion .logoband::-webkit-scrollbar{display:none}

/* ============================================================
   8 · COMMENCER (3 chemins)
   ============================================================ */
.paths{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,2.6vw,36px);margin-top:clamp(50px,7vh,80px)}
.path{
  display:flex;flex-direction:column;gap:12px;padding:34px 30px 30px;
  border:1px solid rgba(36,23,34,.14);border-radius:18px;background:#fff;
  transition:transform .45s var(--ease),box-shadow .45s,border-color .45s;
}
.path:hover{transform:translateY(-6px);box-shadow:0 40px 60px -42px rgba(36,23,34,.35);border-color:rgba(123,44,63,.35)}
.path-n{font-family:var(--serif);font-size:38px;font-weight:330;color:var(--gold);line-height:1}
.path h3{font-family:var(--serif);font-weight:420;font-size:23px;line-height:1.25}
.path p{color:var(--ink-soft);font-size:15px;flex:1}
.go{font-size:13.5px;font-weight:600;color:var(--bordeaux);letter-spacing:.03em}

/* ============================================================
   9 · KIT
   ============================================================ */
/* 30/07 — « je trouve qu'il y a un trop grand ecart entre les 2 » (entre la
   carte « 03 Donner forme » et le Kit).
   Mesure : `#methode` pose 135 px de padding en bas et `#kit` 135 px en haut,
   soit 270 px. Sur les autres jonctions ca passe, parce que la section suivante
   ouvre par un surtitre et un titre : l'oeil lit un debut. `#kit` ouvre par une
   grande IMAGE, alors rien ne remplit ce vide et il se voit.
   C'est aussi la jonction que le retrait du portfolio a creee le meme jour :
   `#methode` et `#kit` n'etaient pas voisines avant.
   On coupe donc la moitie du padding HAUT de #kit — pas celui de #methode, qui
   ferme correctement sa propre section. */
.kit{background:var(--paper-2);padding-top:clamp(46px,6.5vh,78px)}
/* Et l'autre moitie de la jonction : #methode fermait sur 135 px alors que la
   section suivante enchaine immediatement. Mesure apres la 1re passe : il
   restait 225 px de vide, soit plus d'un demi-ecran de telephone. On descend
   la jonction a ~145 px, ce qui se lit comme une respiration voulue.
   Les autres chapitres gardent le rythme de `.chapter` : c'est une exception
   de JONCTION, pas un changement de tempo general. */
#methode{padding-bottom:clamp(56px,8vh,96px)}
.kit-grid{display:grid;grid-template-columns:1fr 1.1fr;gap:clamp(40px,6vw,90px);align-items:center}
.kit-grid--text{display:block;max-width:760px}
.kit-fig{border-radius:20px;overflow:hidden;box-shadow:0 60px 90px -55px rgba(36,23,34,.55);aspect-ratio:4/5}
.kit-fig img{width:100%;height:100%;object-fit:cover}
.kit-product{display:grid;grid-template-columns:minmax(210px,280px) minmax(0,1fr);gap:clamp(28px,4vw,56px);align-items:start;margin-top:30px}
.kit-cover{margin:0;border-radius:16px;overflow:hidden;box-shadow:0 38px 64px -42px rgba(36,23,34,.6)}
.kit-cover img{display:block;width:100%;height:auto}
.kit-details .lede{margin:0;max-width:52ch}
.specs{display:flex;gap:clamp(28px,4vw,54px);list-style:none;margin:36px 0 20px}
.specs li{display:flex;flex-direction:column;gap:4px}
/* 29/07 — Latifa : « pour le produit mettre les lettres et les chiffres plus
   epais, c'est trop flou ». Le Bodoni a 380 est une graisse de titre fin :
   sur des chiffres de prix, ca se lit mal, surtout sur un ecran de telephone
   en plein jour. 380 -> 600, et les legendes passent de `ink-soft` a `ink`
   avec une graisse marquee : ce sont des informations d'achat (7 jours,
   46 pages, 19 EUR), elles doivent etre les plus nettes de la page. */
/* 30/07 — Latifa : « tout le montant en Instrument Sans ». Le « € » du Bodoni
   a grande taille est un trait fin a cote de chiffres pleins. Les 3 specs
   passent ensemble, sinon « 19 € » jurerait a cote de « 46 » et de « 7 ». */
.specs strong{font-family:var(--sans);font-weight:700;font-size:clamp(32px,3.2vw,44px);line-height:1;letter-spacing:-.02em;color:var(--ink)}
.specs span{font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--ink)}
.code{font-size:14px;color:var(--ink-soft);margin-bottom:30px}
.code strong{color:var(--bordeaux);letter-spacing:.08em}
.spec-offer span del{font-size:1em;text-decoration-thickness:1.5px}
.offer-line{display:flex;align-items:center;gap:12px;max-width:max-content;margin:0 0 26px;padding:10px 12px;border:1px solid rgba(123,44,63,.22);border-radius:999px;background:rgba(123,44,63,.045);color:var(--ink)}
.offer-line .offer-badge{display:inline-flex;align-items:center;justify-content:center;flex:none;min-width:52px;padding:8px 7px;border-radius:999px;background:var(--bordeaux);color:#fff;font-size:12px;font-weight:800;letter-spacing:.03em}
.offer-line strong{display:block;font-size:16px;letter-spacing:.06em}
.offer-line small{display:block;margin-top:1px;color:var(--ink-soft);font-size:12px;line-height:1.3}
@media(max-width:679px){.offer-line{max-width:none}.offer-line .offer-badge{min-width:48px}}

/* ============================================================
   10 · FONDATIONS
   ============================================================ */
.fonda .chips{display:flex;flex-wrap:wrap;gap:12px;margin-top:36px}
.chip{
  font-size:13.5px;font-weight:500;letter-spacing:.04em;color:#E8DCE5;
  padding:10px 20px;border:1px solid rgba(217,169,180,.3);border-radius:999px;
}
.fonda-copy{max-width:52ch;margin-top:clamp(34px,5vh,54px)}
.fonda-sub{
  font-family:var(--serif);font-weight:380;font-size:clamp(26px,2.6vw,38px);
  line-height:1.2;margin-bottom:16px;
}
.fonda-sub em{color:var(--rose)}
.fonda-note{margin-top:18px;font-size:14px;color:#9A8496}

/* ============================================================
   11 · RESSOURCES
   ============================================================ */
.rescards{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,2.6vw,36px);margin-top:clamp(50px,7vh,80px)}
.rescard{
  border:1px solid rgba(36,23,34,.14);border-radius:18px;overflow:hidden;background:#fff;
  transition:transform .45s var(--ease),box-shadow .45s;display:flex;flex-direction:column;
}
.rescard:hover{transform:translateY(-6px);box-shadow:0 40px 60px -42px rgba(36,23,34,.3)}
.rimg{aspect-ratio:4/3;background-size:cover;background-position:center}
.rbody{padding:26px 26px 30px}
.tagr{font-size:11px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--gold)}
/* 30/07 — 420 etait la derniere graisse fine de l'accueil, oubliee par les
   deux passes d'epaississement precedentes parce qu'elle ne visait ni `h1/h2`
   ni une classe listee. Trouvee en relevant la graisse CALCULEE de chaque
   titre dans le navigateur, pas en relisant le CSS. 420 -> 700. */
.rbody h3{font-family:var(--serif);font-weight:700;font-size:22px;line-height:1.3;margin:12px 0 10px}
.rbody p{font-size:14.5px;color:var(--ink-soft)}

/* ============================================================
   13 · FINAL + FOOTER
   ============================================================ */
.final{padding:clamp(130px,20vh,220px) 0}
.final-badge{width:88px;height:88px;border-radius:50%;box-shadow:0 20px 50px -20px rgba(0,0,0,.55)}
.final-line{
  font-family:var(--serif);font-weight:600;
  font-size:clamp(34px,5.6vw,80px);line-height:1.08;max-width:18ch;color:var(--paper);
}
.final-line em{color:var(--rose);font-weight:600}

.footer{background:var(--plum-deep);color:#CDBBC9;position:relative}
.zellige-band{height:14px;background-size:auto 200%;background-position:center;opacity:.85}
.footer .wrap{padding-top:70px;padding-bottom:40px}
.fgrid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:clamp(30px,4vw,60px)}
.fbrand img{height:32px;width:auto}
.fbrand p{font-family:var(--serif);font-style:italic;font-size:19px;color:#E7DDEF;margin:16px 0 20px;max-width:30ch}
.fcontact{display:block;width:max-content;max-width:100%;margin-bottom:18px;color:#E7DDEF;font-size:14px;text-decoration:underline;text-decoration-color:rgba(231,221,239,.46);text-underline-offset:4px}
.fcontact:hover,.fcontact:focus-visible{color:#fff;text-decoration-color:currentColor}
.fsocial{display:flex;flex-wrap:wrap;gap:10px 22px;margin-top:26px}
.fsocial a{
  font-size:11.5px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;
  color:#CDBBC9;opacity:.85;padding:4px 0;position:relative;transition:color .3s,opacity .3s;
}
.fsocial a::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:var(--gold);transform:scaleX(0);transform-origin:left;transition:transform .35s var(--ease);
}
.fsocial a:hover{color:var(--rose);opacity:1}
.fsocial a:hover::after{transform:scaleX(1)}
.fcol h4,.fcol-title{font-size:11.5px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);margin-bottom:16px}
.fcol a{display:block;font-size:14.5px;padding:5px 0;opacity:.8;transition:opacity .3s,padding-left .3s}
.fcol a:hover{opacity:1;padding-left:6px;color:var(--rose)}
.fbot{
  margin-top:56px;padding-top:24px;border-top:1px solid rgba(217,169,180,.14);
  font-size:12.5px;color:#9A8496;display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;
}
/* 14/08 — LOOP 01/T2 : rangée légale du footer, alignée sur le footer
   canonique des 74 pages (mentions, CGV, confidentialité, sitemap). */
.flegal{display:flex;flex-wrap:wrap;gap:6px 18px}
.flegal a{color:#9A8496;font-size:12.5px;text-decoration:none;transition:color .3s}
.flegal a:hover,.flegal a:focus-visible{color:var(--rose)}

/* ============================================================
   FACILITATEURS — progression, rail, badge gratuit, retour haut
   ============================================================ */
.progress{position:absolute;left:0;right:0;bottom:-3px;height:3px;pointer-events:none}
.progress i{
  display:block;height:100%;transform:scaleX(0);transform-origin:left;
  background:linear-gradient(90deg,var(--gold),var(--bordeaux));
}
.rail{
  position:fixed;right:22px;top:50%;transform:translateY(-50%);z-index:56;
  display:flex;flex-direction:column;gap:16px;color:var(--ink-soft);
}
.rail a{display:flex;align-items:center;justify-content:flex-end;gap:10px}
.rail i{
  display:block;width:9px;height:9px;border-radius:50%;
  border:1.5px solid currentColor;transition:transform .3s,background .3s;
}
.rail span{
  font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
  opacity:0;transform:translateX(6px);transition:opacity .3s,transform .3s;
}
.rail a:hover span{opacity:1;transform:none}
.rail a.active i{background:var(--bordeaux);border-color:var(--bordeaux);transform:scale(1.35)}
.rail a.active span{opacity:1;transform:none}
.rail.on-dark{color:#E8DCE5}
.rail.on-dark a.active i{background:var(--rose);border-color:var(--rose)}
@media (max-width:1023px){.rail{display:none}}
.free-badge{
  display:inline-block;background:var(--rose);color:var(--plum-deep);
  font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  padding:9px 18px;border-radius:999px;margin:16px 0 10px;
}
.totop{font-size:12.5px;color:#CDBBC9;letter-spacing:.06em}
.totop:hover{color:var(--rose)}

/* ============================================================
   MOBILE STICKY CTA
   ============================================================ */
.mcta{
  position:fixed;left:14px;right:14px;bottom:14px;z-index:55;
  display:none;align-items:center;justify-content:space-between;gap:14px;
  padding:12px 12px 12px 22px;border-radius:18px;
  background:rgba(34,20,32,.9);backdrop-filter:blur(12px);color:var(--paper);
  font-size:14.5px;font-weight:500;
  transform:translateY(130%);transition:transform .5s var(--ease);
}
.mcta.show{transform:none}
.mcta .btn{padding:11px 20px;font-size:13px}

/* ============================================================
   RESPONSIVE
   ============================================================ */
/* EN-TÊTE — la barre est passée de 3 ancres internes à 5 entrées du site le
   11/08/2026 (source unique : `src/_data/site.js`). Mesuré au navigateur : à
   690 px de large, les trois groupes se touchaient bord à bord. On resserre
   d'abord le rythme des liens, puis on retire le bouton — le Menu et le CTA
   collant du bas gardent l'accès aux Kits. */
@media (max-width:1079px){
  .navlinks{gap:20px}
  .navlinks a{font-size:12.5px}
}
@media (max-width:899px){
  .navr .btn{display:none}
}

@media (max-width:1023px){
  .steps,.paths,.rescards{grid-template-columns:1fr 1fr}
  .kit-grid{grid-template-columns:1fr}
  .fgrid{grid-template-columns:1fr 1fr}
}
/* Grand écran : la scène « idée floue → marque claire » passe en deux colonnes.
   L'image est PORTRAIT (1024×1536) — on la cale donc sur la HAUTEUR, pas sur la
   largeur, sinon elle déborde de l'écran. Le vide beige de gauche devient une
   vraie colonne éditoriale (kicker + progression). */
@media (min-width:1200px){
  .transfo-stage{
    display:grid;
    grid-template-columns:minmax(260px,1fr) auto;
    grid-template-rows:auto auto;
    align-items:center;justify-items:start;
    gap:26px clamp(56px,7vw,120px);
    max-width:min(1440px,92vw);margin:0 auto;
    padding:80px clamp(32px,5vw,72px);
  }
  .transfo-kicker{grid-column:1;grid-row:1;align-self:end;max-width:20ch;font-size:13px;letter-spacing:.26em;line-height:2}
  /* le trait « idée floue → marque claire » traverse toute la colonne et vient
     buter sur l'image : la progression pointe vers ce qu'elle décrit */
  .transfo-labels{grid-column:1;grid-row:2;align-self:start;width:100%;max-width:none;gap:18px}
  .transfo-fig{grid-column:2;grid-row:1 / span 2;width:auto;height:min(80svh,820px)}
  .transfo-img{width:auto;height:100%;display:block}
}
@media (max-width:679px){
  .navlinks{display:none}
  .navr .btn{display:none}
  .steps,.paths,.rescards{grid-template-columns:1fr}
  .hero-split{
    display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,.9fr);gap:12px 14px;
    width:min(90vw,350px);max-width:none;font-size:9px;letter-spacing:.16em;
  }
  .hero-split-intro{grid-column:1 / -1}
  .hero-split-message{grid-column:1 / -1;text-align:center;white-space:normal}
  .mcta{display:flex}
  .fgrid{grid-template-columns:1fr}
  .fsocial{display:grid;grid-template-columns:repeat(2,max-content);gap:12px 30px}
  .frag-field{height:120px}
  .logos-foot{flex-direction:column;align-items:flex-start;gap:10px}
  .final-cta{flex-direction:column;align-items:stretch;width:100%}
  .final-cta .btn{justify-content:center}
  /* le CTA collant masque le bas de page : on lui laisse la place */
  .footer .wrap{padding-bottom:96px}
}

/* ============================================================
   LIENS VERS LE RESTE DU SITE (menu, ressources, final, footer)
   ============================================================ */
.ocol-title{
  font-family:var(--sans);font-size:11px;font-weight:600;letter-spacing:.22em;
  text-transform:uppercase;color:var(--gold);margin-bottom:14px;
}


.reslinks{
  display:flex;flex-wrap:wrap;gap:10px;margin-top:clamp(34px,5vh,54px);
  padding-top:26px;border-top:1px solid rgba(36,23,34,.12);
}
.reslinks a{
  font-size:13.5px;font-weight:500;color:var(--ink-soft);
  padding:9px 17px;border:1px solid rgba(36,23,34,.16);border-radius:999px;
  transition:border-color .3s,color .3s,background .3s;
}
.reslinks a:hover{color:var(--bordeaux);border-color:rgba(123,44,63,.4);background:#fff}

.kit-alt{margin-top:20px;font-size:14px;color:var(--ink-soft)}
.kit-alt a{color:var(--bordeaux);font-weight:600;border-bottom:1px solid rgba(123,44,63,.35)}

.final-lede{color:#CDBBC9;max-width:44ch}
.final-cta{display:flex;gap:14px;flex-wrap:wrap;justify-content:center}
.final-map{display:flex;flex-wrap:wrap;gap:8px 10px;justify-content:center;margin-top:6px}
.final-map a{
  font-size:13px;color:#BFAABC;padding:8px 16px;border-radius:999px;
  border:1px solid rgba(217,169,180,.22);transition:color .3s,border-color .3s;
}
.final-map a:hover{color:var(--rose);border-color:var(--rose)}
.final .center-col{gap:22px}
.final .final-line{margin-top:4px}

/* mobile : le menu passe en une colonne et devient défilable */
@media (max-width:679px){
  .kit-product{grid-template-columns:1fr;gap:26px}
  .kit-cover{width:min(100%,285px);margin-inline:auto}
  /* « UNE DIRECTION » ne doit pas toucher les bords (nowrap) */
}

/* ============================================================
   LA MÉTHODE — encadré doré, demande de Latifa le 29/07
   « l'espace entre les 2 me gêne, toute "la méthode..." devrait
     être dans un encadré léger de la même couleur que les chiffres »

   Deux choses ici :
   1. Le blanc qui séparait la scène transformation de la méthode
      venait du padding générique `.chapter` (jusqu'à 190px en haut).
      Sur mobile, ça faisait presque un écran de vide. On le réduit
      pour CETTE section seulement — les autres gardent leur respiration.
   2. L'encadré reprend `--gold`, la couleur des chiffres 01/02/03 :
      un filet et un fond très dilué, pour poser le bloc sans l'alourdir.
   ============================================================ */
#methode{padding-top:clamp(38px,6vh,72px)}

#methode .wrap{
  border:1px solid rgba(161,138,88,.32);
  border-radius:18px;
  background:rgba(161,138,88,.045);
  padding:clamp(26px,4vw,52px);
}

/* Le filet des colonnes reprend la meme teinte doree, sinon le gris
   d'origine jure avec le cadre. */
#methode .step{border-top-color:rgba(161,138,88,.32)}

/* La grille des 3 temps respire moins haut : elle est maintenant DANS
   le cadre, l'ecart d'origine creusait un trou au milieu de l'encadre. */
#methode .steps{margin-top:clamp(30px,4vh,48px)}

/* ------------------------------------------------------------------
   GRAISSE DES TITRES — accueil, 29/07
   Meme correction que `zellij-ui.css` pour les 32 autres pages :
   le Bodoni Moda perd ses delies en dessous de 600 et parait delave.
   `.step-n` etait a 330, c'est-a-dire presque un trait — sur les
   chiffres 01/02/03 dans l'encadre dore, ils s'effacaient.
   ------------------------------------------------------------------ */
/* ------------------------------------------------------------------
   ÉPAISSISSEMENT RÉEL DES TITRES — 30/07, la VRAIE cause
   ------------------------------------------------------------------
   Le 29/07 on a conclu que la police avait ete telechargee avec une plage
   de graisses tronquee, et on a pose un contour optique
   (`-webkit-text-stroke:.33px`) en attendant de retelecharger les fichiers.

   C'ETAIT FAUX. Les .woff2 contiennent l'axe complet. Mesure au canvas le
   30/07 : en chargeant `bodoni-moda-normal-latin.woff2` avec
   `weight:'100 1000'`, la largeur de « 46 pages » passe de 407.65 px a
   455.85 px entre 400 et 900 — l'italique aussi. Le vrai coupable etait la
   DECLARATION de `fonts.css` : une plage `font-weight:400 600` **clampe**
   l'axe variable. On demandait 700, le navigateur servait 600, et personne
   ne voyait de conflit.

   `fonts.css` dit maintenant `400 900`. On demande donc une vraie graisse,
   et les contours de contournement sont SUPPRIMES : un stroke epaissit les
   delies autant que les pleins, ce qui est exactement ce qu'une Didone ne
   supporte pas. Le contraste pleins/delies revient.

   ⚠️ Ne pas remettre de `text-stroke` ici. Si un titre parait maigre,
   monter la graisse — l'axe repond jusqu'a 900.
   ------------------------------------------------------------------ */
.display{font-weight:700}
.display em{font-weight:700}
.step h3{font-weight:700}
.step-n{font-weight:600}
.pullquote{font-weight:600}
.pullquote em{font-weight:600}
.specs strong{font-weight:700}
.eyebrow{font-weight:700}

/* Le sur-titre « Tu arrives avec mille idees » vient de la section
   « respirer » fondue ici le 29/07. Les fragments sont en position
   absolue autour du centre du champ : sans marge ni z-index, ils
   remontent sur le texte. Latifa l'a vu en premier sur son telephone. */
.comprise .eyebrow{
  text-align:center;
  margin-bottom:34px;
  position:relative;
  z-index:2;
}
@media (max-width:780px){
  .comprise .eyebrow{margin-bottom:26px}
  .frag-field{height:150px}
}

/* ============================================================
   12/08 — QUIZ « trois questions, une porte » (remplace la scène
   flou → clair, retirée à la demande de Latifa) + Kit renforcé.
   Palette : tokens de l'accueil (lignes 10-25). Le moteur est
   dans app.js AVANT le garde-fou GSAP : le quiz marche partout.
   ============================================================ */

/* ---------- hero : l'action unique reste dans l'axe de la promesse ---------- */
.hero-actions{display:flex;justify-content:center;gap:16px;flex-wrap:wrap;align-items:center;margin-top:44px}
.hero-actions .hero-cta{margin-top:0}
@media (max-width:560px){.hero-actions{flex-direction:column;align-items:stretch}}

/* ---------- le quiz — une scène de jeu, pas un formulaire ----------
     12/08 (v2) — retour Latifa : « pas beau, pas envie, il faut que ce
     soit ludique ». La carte blanche devient une SCÈNE sombre : la
     texture zellige de la maison, une boîte prune profonde, des options
     qui réagissent au doigt, une jauge qui se remplit, et la porte du
     résultat qui se révèle en arche. */
.quiz-scene{position:relative;overflow:hidden;background:var(--plum-deep)}
.quiz-fond{position:absolute;inset:0;background:url('assets/textures/zellige.webp') center/420px repeat;opacity:.14;pointer-events:none}
.quiz-fond::after{content:"";position:absolute;inset:0;background:radial-gradient(120% 90% at 50% 0%,rgba(34,20,32,.25),rgba(34,20,32,.92) 78%)}
.quiz-scene .wrap{position:relative;z-index:1}
.quiz-scene .eyebrow{color:var(--gold)}
.quiz-geant{
  margin:18px 0 0;font-family:var(--serif);font-weight:700;
  font-size:clamp(88px,15vw,200px);line-height:.92;letter-spacing:-.02em;
  color:#F4EBF1;
}
.quiz-geant i{font-style:normal;color:var(--gold)}
.quiz-scene .quiz-h2{font-size:clamp(26px,3.2vw,44px);margin-top:20px;max-width:none;color:#CBB8C6}
.quiz-scene .quiz-h2 em{color:var(--rose-vif)}
.quiz-scene .display{color:#F4EBF1}
.quiz-scene .display em{color:var(--rose-vif)}
.quiz-lede{color:#CBB8C6;max-width:52ch}

.quiz-cadre{max-width:760px;margin-inline:auto}
.quiz-boite{position:relative;margin-top:38px;padding:clamp(30px,5vw,54px) clamp(22px,4vw,50px) clamp(34px,5vw,52px);background:linear-gradient(180deg,rgba(55,31,49,.72),rgba(34,20,32,.9));border:1px solid rgba(161,138,88,.32);border-radius:24px;box-shadow:0 60px 100px -50px rgba(0,0,0,.75)}

/* la jauge : un filet doré qui se remplit au fil des questions */
.quiz-jauge{position:absolute;top:0;left:clamp(22px,4vw,50px);right:clamp(22px,4vw,50px);height:3px;background:rgba(237,227,233,.12);border-radius:0 0 3px 3px;overflow:hidden}
.quiz-jauge i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--gold),#C9B078);transition:width .6s cubic-bezier(.22,.7,.25,1)}

.quiz-etape{display:flex;flex-direction:column;align-items:flex-start;gap:20px;animation:quizIn .5s cubic-bezier(.22,.7,.25,1)}
.quiz-etape[hidden]{display:none}
@keyframes quizIn{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}

/* intro : l'invitation à jouer */
.quiz-intro-kicker{margin:0;font-size:13px;letter-spacing:.22em;text-transform:uppercase;color:var(--gold)}
.quiz-intro-txt{margin:0;font-family:"Newsreader",Georgia,serif;font-size:clamp(22px,2.8vw,32px);line-height:1.35;max-width:30ch;color:#F4EBF1}
.quiz-go{margin-top:8px}
.quiz-intro-note{margin:0;font-size:13px;color:#A98FA1}

/* les questions */
.quiz-num{margin:0;font-size:12.5px;letter-spacing:.2em;text-transform:uppercase;color:#A98FA1}
.quiz-num b{color:var(--gold);font-weight:600}
.quiz-question{margin:0;font-family:"Newsreader",Georgia,serif;font-size:clamp(26px,3.4vw,40px);line-height:1.12;color:#F4EBF1}

/* les options : vivantes au doigt et à la souris */
.quiz-choix{display:flex;flex-direction:column;gap:12px;width:100%;margin-top:6px}
.quiz-option{display:flex;align-items:center;gap:16px;width:100%;padding:17px 20px;background:rgba(237,227,233,.05);border:1px solid rgba(237,227,233,.16);border-radius:16px;cursor:pointer;font:inherit;font-size:16.5px;line-height:1.4;text-align:left;color:#EDE3EA;transition:border-color .25s,background-color .25s,transform .25s,box-shadow .25s;animation:quizOptIn .5s cubic-bezier(.22,.7,.25,1) both}
.quiz-option:nth-child(2){animation-delay:.07s}
.quiz-option:nth-child(3){animation-delay:.14s}
.quiz-option:nth-child(4){animation-delay:.21s}
@keyframes quizOptIn{from{opacity:0;transform:translateX(-14px)}to{opacity:1;transform:none}}
.quiz-option:hover{border-color:var(--gold);background:rgba(237,227,233,.1);transform:translateX(8px);box-shadow:-8px 0 0 -4px var(--gold)}
.quiz-option:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
/* 14/08 — LOOP 01/T3 : le titre de chaque question prend le focus clavier
   (app.js). `:focus-visible` et non `:focus` : le repère doré n'apparaît que
   pour qui navigue au clavier, jamais au clic souris. */
.quiz-question:focus-visible{outline:2px solid var(--gold);outline-offset:4px;border-radius:2px}
.qo-lettre{flex:none;display:grid;place-items:center;width:34px;height:34px;border:1px solid rgba(161,138,88,.6);border-radius:50%;font-size:14px;color:var(--gold);transition:background-color .25s,color .25s,border-color .25s}
.quiz-option:hover .qo-lettre{background:var(--gold);color:var(--plum-deep);border-color:var(--gold)}
/* le choix se confirme visuellement avant la suite (cf. app.js, 420 ms) */
.quiz-option.choisie{background:linear-gradient(90deg,var(--bordeaux),var(--bordeaux-dark));border-color:var(--rose);color:#fff;transform:scale(1.02)}
.quiz-option.choisie .qo-lettre{background:#fff;color:var(--bordeaux);border-color:#fff}
.quiz.en-attente .quiz-option{pointer-events:none}
.quiz.en-attente .quiz-option:not(.choisie){opacity:.45}

/* le résultat : la porte se révèle en arche */
.quiz-etape--resultat{align-items:stretch}
.quiz-arche{display:flex;flex-direction:column;align-items:center;gap:16px;text-align:center;padding:clamp(40px,6vw,64px) clamp(24px,4vw,44px) clamp(30px,4vw,40px);background:linear-gradient(180deg,rgba(123,44,63,.5),rgba(34,20,32,.6));border:1px solid rgba(161,138,88,.55);border-radius:999px 999px 22px 22px / 240px 240px 22px 22px;animation:quizArche .7s cubic-bezier(.22,.7,.25,1) both}
@keyframes quizArche{from{opacity:0;transform:translateY(26px) scale(.96)}to{opacity:1;transform:none}}
.quiz-res-kicker{margin:0;font-size:12.5px;letter-spacing:.26em;text-transform:uppercase;color:var(--gold)}
.quiz-res-titre{margin:0;font-family:"Newsreader",Georgia,serif;font-weight:400;font-size:clamp(30px,4vw,48px);line-height:1.08;color:#fff}
.quiz-res-texte{margin:0;font-size:16px;line-height:1.7;max-width:46ch;color:#E3D4DE}
.quiz-res-actions{display:flex;align-items:center;gap:24px;flex-wrap:wrap;justify-content:center;margin-top:12px}
.quiz-reco{background:none;border:0;cursor:pointer;font:inherit;font-size:14px;color:#A98FA1;text-decoration:underline;text-underline-offset:4px}
.quiz-reco:hover{color:#EDE3EA}
.quiz-note{margin-top:14px;font-size:13px;color:#A98FA1}
@media (prefers-reduced-motion:reduce){
  .quiz-etape,.quiz-option,.quiz-arche{animation:none}
  .quiz-go{animation:none}
  .quiz-option,.quiz-option:hover{transition:none;transform:none}
}

/* ---------- Kit renforcé : réassurance + aperçus intérieurs ---------- */
.kit-rassurance{margin:14px 0 0;font-size:13.5px;color:var(--ink-soft)}
.kit-apercus{margin-top:clamp(30px,4vw,48px);display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(12px,2vw,22px)}
.kit-apercus a{display:block;border-radius:12px;overflow:hidden;box-shadow:0 26px 44px -30px rgba(36,23,34,.5);transition:transform .4s cubic-bezier(.22,.7,.25,1)}
.kit-apercus a:hover{transform:translateY(-6px)}
.kit-apercus img{display:block;width:100%;height:auto}
.kit-apercus-note{grid-column:1/-1;margin:6px 0 0;font-size:14px;color:var(--ink-soft)}
.kit-apercus-note a{color:var(--bordeaux);text-decoration:underline;text-underline-offset:3px}
@media (max-width:640px){.kit-apercus{grid-template-columns:repeat(3,1fr);gap:8px}}

/* ============================================================
   12/08 (23h) — BULLES « mille idées » (remplace le champ de
   fragments). Trois files de bulles claires dérivent en continu,
   vitesses et sens différents ; chaque piste est doublée pour une
   boucle sans couture. CSS pur — aucun JS ne pilote la section.
   ============================================================ */
.bulles{display:flex;flex-direction:column;gap:clamp(14px,2.4vw,22px);margin:clamp(30px,5vh,54px) 0;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.bulle-file{overflow:visible}
.bulle-piste{display:inline-flex;gap:clamp(12px,1.8vw,20px);white-space:nowrap;will-change:transform;animation:bulleDefile 38s linear infinite}
.bulle-file--d .bulle-piste{animation-direction:reverse;animation-duration:46s}
.bulle-file--lente .bulle-piste{animation-duration:56s}
@keyframes bulleDefile{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.bulle{display:inline-block;padding:.62em 1.35em;background:rgba(244,235,241,.08);border:1px solid rgba(244,235,241,.28);border-radius:999px;font-family:"Newsreader",Georgia,serif;font-style:italic;font-size:clamp(17px,2.1vw,24px);line-height:1;color:#EFE4EC;backdrop-filter:blur(2px)}
.bulle--rose{background:rgba(217,169,180,.14);border-color:rgba(217,169,180,.45);color:#F2CFD9}
.bulle--or{background:rgba(161,138,88,.16);border-color:rgba(161,138,88,.5);color:#D9C698}
.bulle--olive{background:rgba(139,146,113,.16);border-color:rgba(139,146,113,.5);color:#C9CFA8}
@media (prefers-reduced-motion:reduce){.bulle-piste{animation:none}.bulles{-webkit-mask-image:none;mask-image:none;overflow-x:auto}}