/* BRAISIÈRE — feuille de la refonte (Phase 2). Les jetons sont dans tokens.css.
   Contrat JS conservé : .canvas .fond .pile .slot .calque .toast, .sw, .pilule, .teintes-liste button > i,
   #loupe*, .form-etat, .pot-a-miel, .bandeau-cookies/.bc-in/.bc-btns/.btn (js/mesure.js). */

/* ---------- Base ---------- */
*{box-sizing:border-box;margin:0;padding:0}
/* La gouttière de barre de défilement est réservée dès le premier rendu : sans elle,
   une page qui grandit (le configurateur remplit ses listes en script) fait apparaître
   la barre, rétrécit la fenêtre et décale toute la mise en page. */
html{scroll-behavior:auto;-webkit-text-size-adjust:100%;scrollbar-gutter:stable}
body{font-family:var(--sans);font-size:var(--t-corps);line-height:1.6;color:var(--encre);background:var(--papier);font-optical-sizing:auto}
img,svg,video{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
h1,h2,h3,h4{font-family:var(--serif);font-weight:400;text-wrap:balance}
h1{font-family:var(--serif-titre);font-size:var(--t-h1);font-weight:350;line-height:.93;letter-spacing:-.02em;font-variation-settings:"opsz" 144;max-width:14ch}
h2{font-size:var(--t-h2);line-height:1;letter-spacing:-.01em;max-width:22ch}
h3{font-size:var(--t-h3);line-height:1.1}
p,dd,td,li{text-wrap:pretty}
p{max-width:64ch}
section,article,footer{background:var(--fond);color:var(--texte)}
[data-fond="nuit"],[data-fond="noyer"]{-webkit-font-smoothing:antialiased}
.cap{font-size:var(--t-cap);letter-spacing:.08em;text-transform:uppercase;font-weight:500;line-height:1.3}
.chiffre{font-family:var(--sans);font-variant-numeric:tabular-nums;font-feature-settings:"tnum";white-space:nowrap}
.unite{font-size:max(12px,.62em);letter-spacing:.08em;text-transform:uppercase;margin-left:.2em;font-weight:500}
.legende{font-family:var(--serif);font-style:italic;font-size:var(--t-legende);line-height:1.4;color:var(--secondaire)}
.chapo{font-family:var(--serif);font-style:italic;font-size:var(--t-chapo);line-height:1.3;max-width:40ch}
.secondaire{color:var(--secondaire)}
.lien{border-bottom:1px solid currentColor;padding-bottom:3px;transition:color var(--duree-courte) var(--courbe)}
.lien:hover{color:var(--accent-ici)}
.bouton,.btn{display:inline-block;padding:14px 22px;background:var(--texte);color:var(--fond);border:1px solid var(--texte);font-size:var(--t-dense);line-height:1.2;min-height:44px;transition:background var(--duree-courte) var(--courbe),color var(--duree-courte) var(--courbe)}
.bouton:hover,.btn:hover{background:var(--fond);color:var(--texte)}
.bouton--filet,.btn:not(.btn-plein){background:transparent;color:var(--texte)}
.bouton--filet:hover,.btn:not(.btn-plein):hover{background:var(--texte);color:var(--fond)}
:focus-visible{outline:2px solid var(--accent-ici);outline-offset:3px}
.grille{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--gout);padding:0 var(--marge);max-width:var(--max);margin:0 auto}
.visuellement-cache{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.pot-a-miel{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
[data-apparait]{opacity:0;transform:translateY(12px);transition:opacity var(--duree) var(--courbe),transform var(--duree) var(--courbe)}
[data-apparait="vu"]{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){[data-apparait]{opacity:1;transform:none;transition:none}}
[id]{scroll-margin-top:calc(var(--entete) + 24px)}
html{scroll-padding-top:calc(var(--entete) + 24px)}
.evitement:focus{position:fixed;top:8px;left:8px;width:auto;height:auto;clip:auto;padding:12px 16px;background:var(--nuit);color:var(--ivoire);z-index:40}
.menu,.bandeau-cookies,.barre-cta,#loupe{--accent-ici:var(--accent-nuit);--texte:var(--ivoire);--fond:var(--nuit)}

/* ---------- En-tête ---------- */
.entete{position:fixed;top:0;left:50%;transform:translateX(-50%);width:100%;max-width:var(--max);height:var(--entete);z-index:20;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--gout);padding:0 var(--marge);align-items:center;
  color:var(--texte);background:var(--fond);transition:background var(--duree) var(--courbe),color var(--duree) var(--courbe)}
html[data-fond="nuit"] .entete,html[data-fond="noyer"] .entete{--fond:var(--nuit);--texte:var(--ivoire);--accent-ici:var(--accent-nuit)}
html[data-fond="papier"] .entete{--fond:var(--papier);--texte:var(--encre);--accent-ici:var(--accent)}
html[data-haut]:has(.ouverture) .entete{background:transparent}
.entete .marque{grid-column:1/3;display:flex;align-items:center;min-height:44px}
.entete .mot{height:20px;width:auto;fill:currentColor}
.entete .principale{grid-column:3/9;display:flex;gap:28px;font-size:15px}
.entete .principale a{padding:14px 0;border-bottom:1px solid transparent;transition:border-color var(--duree-courte) var(--courbe)}
.entete .principale a:hover{border-bottom-color:currentColor}
.entete .droite{grid-column:9/13;justify-self:end;display:flex;gap:32px;align-items:center;white-space:nowrap;font-size:15px}
.entete .droite a{padding:13px 0;display:inline-block}
.menu-bouton{display:none;width:44px;height:44px;align-items:center;justify-content:center}
.menu{position:fixed;inset:0;z-index:30;background:var(--nuit);color:var(--ivoire);padding:var(--e8) var(--marge) max(var(--e6),env(safe-area-inset-bottom));display:flex;flex-direction:column;gap:var(--e6);overflow-y:auto;-webkit-overflow-scrolling:touch}
.menu[hidden]{display:none}
.menu nav{display:flex;flex-direction:column;gap:var(--e3);font-family:var(--serif);font-size:clamp(30px,7vw,40px);line-height:1.15}
.menu nav a{padding:6px 0}
.menu .coordonnees{color:var(--argent);font-size:var(--t-dense);margin-top:auto}
.menu .coordonnees a{color:var(--ivoire);border-bottom:1px solid var(--filet-nuit)}
.menu [data-fermer]{position:absolute;top:6px;right:var(--marge);width:44px;height:44px;display:inline-flex;align-items:center;justify-content:center}
html[data-menu]{overflow:hidden}

/* ---------- Ouverture : le geste ---------- */
.ouverture{position:relative;height:200vh;background:var(--fond);color:var(--texte)}
/* Le titre et la planche forment une paire : ils doivent se lire côte à côte, jamais
   l'un sous l'autre. Les rangées étaient dimensionnées sur la hauteur de la fenêtre et
   le titre calé en bas de la première : plus l'écran était haut, plus il descendait,
   jusqu'à passer sous l'image. Les rangées se dimensionnent maintenant sur leur contenu
   et le bloc entier est centré : la composition est la même à toute hauteur d'écran. */
.ouverture .colle{position:sticky;top:0;height:100vh;height:100svh;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--gout);grid-template-rows:auto auto;align-content:center;padding:var(--entete) var(--marge) var(--e6);max-width:var(--max);margin:0 auto}
.ouverture h1{grid-column:1/7;grid-row:1;align-self:end;max-width:14ch}
.ouverture .marge{grid-column:1/6;grid-row:2;align-self:end}
.ouverture .planche{grid-column:7/13;grid-row:1/3;align-self:center;margin:0 calc(-1 * var(--marge)) 0 0;display:flex;flex-direction:column;min-height:0}
.ouverture .accroche{font-size:var(--t-corps);color:var(--secondaire);max-width:34ch;margin-top:var(--e4)}
.scene{position:relative;overflow:hidden;aspect-ratio:16/9;width:100%;max-height:74vh;max-height:74svh}
.scene img,.scene picture{position:absolute;inset:0;width:100%;height:100%}
.scene img{object-fit:cover;filter:saturate(.85) sepia(.06) contrast(.98)}
.scene .fermee{opacity:var(--p,0)}
@supports (animation-timeline: scroll()){
  .ouverture:not(.manuel) .scene .fermee{opacity:0;animation:fermer linear both;animation-timeline:scroll(root);animation-range:0 100vh}
  .ouverture:not(.manuel) .curseur{transform:none;animation:glisser linear both;animation-timeline:scroll(root);animation-range:0 100vh}
}
@keyframes fermer{to{opacity:1}}
@keyframes glisser{to{transform:translateX(32px)}}
.ouverture.manuel .scene .fermee{transition:opacity var(--duree) var(--courbe)}
.ouverture.manuel .curseur{transition:transform var(--duree) var(--courbe)}
.interrupteur{display:inline-flex;align-items:center;gap:var(--e3)}
.rocker{display:inline-block;width:64px;height:32px;border:1.25px solid currentColor;position:relative;padding:0;margin:6px 0}
.rocker::before{content:"";position:absolute;top:2px;bottom:2px;left:50%;width:1px;background:currentColor;opacity:.35}
.curseur{position:absolute;top:3px;left:3px;width:24px;height:24px;background:var(--accent-ici);transform:translateX(calc(var(--p,0)*32px))}
.cote{display:block;width:100%;height:28px;margin:var(--e3) var(--marge) 0 0;color:var(--secondaire)}
.cote-texte{font-size:var(--t-cap);letter-spacing:.06em;margin:-26px auto 0;text-align:center;width:6em;color:var(--secondaire);background:var(--fond);position:relative;left:calc(-.5 * var(--marge))}
.planche figcaption{margin:var(--e4) var(--marge) 0 0}
@media (prefers-reduced-motion:reduce){
  .scene .fermee,.curseur{animation:none !important}
}

/* ---------- Les trois cuisines ---------- */
.cuisines-intro{padding:var(--e9) 0 var(--e7)}
.cuisines-intro h2{grid-column:1/8}
.cuisines-intro .chapo{grid-column:1/7;margin-top:var(--e5)}
.cuisines-intro .emprise{grid-column:8/13;align-self:end;font-size:clamp(26px,2.8vw,40px);line-height:1;color:var(--secondaire)}
.chapitre{padding:var(--e8) 0}
.chapitre .grille{align-items:start}
.chapitre .marge{grid-column:1/2;position:sticky;top:calc(var(--entete) + 32px)}
.chapitre .numero{font-family:var(--serif);font-size:var(--t-numero);font-weight:300;line-height:1;display:block}
.chapitre .marge .cap{display:block;margin-top:var(--e3);color:var(--secondaire)}
.chapitre .image{margin:0}
.chapitre .image img{width:100%;object-fit:cover;filter:saturate(.85) sepia(.06) contrast(.98)}
.chapitre .image figcaption{margin-top:var(--e3)}
.fiche{padding:var(--e5) 0 0;border-top:1px solid var(--trait)}
.fiche h3{font-size:var(--t-h3);margin-bottom:var(--e4)}
.fiche dl{font-size:var(--t-dense);line-height:1.5}
.fiche dt{font-size:var(--t-cap);letter-spacing:.08em;text-transform:uppercase;font-weight:500;color:var(--secondaire);padding-top:var(--e3);border-top:1px solid var(--trait)}
.fiche dd{padding:var(--e1) 0 var(--e3)}
.fiche .prix{font-size:var(--t-dense);color:var(--secondaire);margin-top:var(--e4);padding-top:var(--e3);border-top:1px solid var(--trait)}
.fiche .lien{display:inline-block;margin-top:var(--e4);font-size:var(--t-dense)}
/* I : image pleine largeur débordante, fiche en marge gauche */
.chapitre--i .image{grid-column:2/13;margin-right:calc(-1 * var(--marge))}
.chapitre--i .image img{aspect-ratio:16/9}
.chapitre--i .image figcaption{margin-left:var(--e7)}
.chapitre--i .fiche{grid-column:2/6;margin-top:var(--e6)}
/* II : la scène de configuration sur papier, fiche collante à droite */
.chapitre--ii .image{grid-column:2/9}
.chapitre--ii .image img{aspect-ratio:16/9;filter:none}
.chapitre--ii .image figcaption{margin-left:var(--e7)}
.chapitre--ii .fiche{grid-column:9/13;position:sticky;top:calc(var(--entete) + 32px)}
/* III : image sur 12 colonnes, fiche posée en bas à droite sur un aplat qui mord sur l'image */
.chapitre--iii .numero{font-size:calc(var(--t-numero) * 1.3)}
.chapitre--iii .image{grid-column:1/13;margin:0 calc(-1 * var(--marge))}
.chapitre--iii .image img{aspect-ratio:2/1;object-position:50% 45%}
.chapitre--iii .image figcaption{padding:0 var(--marge);margin-left:8.333%}
.chapitre--iii .fiche{grid-column:8/13;margin-top:calc(-1 * var(--e9));background:var(--papier);color:var(--encre);--secondaire:var(--ardoise);--trait:var(--filet);padding:var(--e5) var(--e5) var(--e5);position:relative;z-index:1;margin-bottom:var(--e8)}
.chapitre--iii .fiche .lien:hover{color:var(--accent)}
.bande{margin:0}
.bande img{width:100%;aspect-ratio:21/9;object-fit:cover;object-position:50% 45%;filter:saturate(.85) sepia(.06) contrast(.98)}
.bande figcaption{padding:var(--e3) var(--marge) var(--e7);max-width:40ch;margin-left:calc(var(--marge) + 8.333%)}

/* ---------- Comparatif ---------- */
.comparatif-section{padding:var(--e8) 0}
.defile{grid-column:2/13;overflow-x:auto}
.comparatif{width:100%;min-width:640px;border-collapse:collapse;font-size:var(--t-dense);font-variant-numeric:tabular-nums;table-layout:fixed}
.comparatif caption{text-align:left;font-family:var(--serif);font-size:var(--t-h2);line-height:1;padding-bottom:var(--e6);caption-side:top;text-wrap:balance;max-width:22ch}
.comparatif th{font-family:var(--serif);font-weight:400;font-size:var(--t-chapo);text-align:left;padding:0 var(--e4) var(--e4) 0;vertical-align:bottom}
.comparatif th[scope=row]{font-family:var(--sans);font-size:var(--t-dense);font-weight:500;color:var(--secondaire);padding:var(--e3) var(--e4) var(--e3) 0;vertical-align:top}
.comparatif td{padding:var(--e3) var(--e4) var(--e3) 0;vertical-align:top;max-width:none}
.comparatif tbody tr{border-top:1px solid var(--trait)}
.comparatif .opt{font-family:var(--serif);font-style:italic;color:var(--secondaire)}

/* ---------- Aperçu en direct ---------- */
.apercu{padding:var(--e9) 0 var(--e8)}
.apercu h2{grid-column:1/7}
.apercu .chapo{grid-column:8/13;align-self:end}
.apercu .demo{grid-column:1/13;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--gout);margin-top:var(--e7);align-items:start}
.apercu .scene-cadre{grid-column:1/9}
.canvas{position:relative;aspect-ratio:16/9;background:var(--pierre);overflow:hidden}
.canvas .fond,.canvas .calque{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.canvas .pile,.canvas .slot{position:absolute;inset:0}
.canvas .fond{z-index:1;transition:opacity .5s var(--courbe)}
.canvas .calque{opacity:0;transition:opacity .46s var(--courbe)}
.canvas .calque.vu{opacity:1}
.toast{position:absolute;left:var(--e4);bottom:var(--e4);z-index:60;max-width:calc(100% - 32px);background:var(--nuit);color:var(--ivoire);font-size:var(--t-dense);padding:8px 14px;opacity:0;pointer-events:none;transition:opacity var(--duree-courte) var(--courbe)}
.toast.vu{opacity:1}
.apercu .commandes{grid-column:9/13;display:flex;flex-direction:column;gap:var(--e5)}
.apercu .commandes h3{font-family:var(--sans);font-size:var(--t-cap);letter-spacing:.08em;text-transform:uppercase;font-weight:500;color:var(--secondaire);margin-bottom:var(--e2);padding-bottom:var(--e2);border-bottom:1px solid var(--trait)}
.apercu .liste{display:flex;flex-direction:column}
.sw{display:flex;align-items:center;gap:var(--e3);width:100%;padding:8px 0;text-align:left;font-size:var(--t-dense);min-height:44px;border-bottom:1px solid var(--trait)}
.sw .pastille{width:28px;height:28px;flex:none;background-size:cover;background-position:center;border:1px solid var(--trait);box-shadow:inset 0 0 0 1px rgba(28,25,23,.35)}
.sw.on{color:var(--accent-ici)}
.sw.on .pastille{outline:2px solid var(--accent-ici);outline-offset:2px}
.pilule{display:flex;align-items:center;justify-content:space-between;width:100%;padding:8px 0;text-align:left;font-size:var(--t-dense);min-height:44px;border-bottom:1px solid var(--trait)}
.pilule::after{content:"en option";font-size:var(--t-cap);letter-spacing:.08em;text-transform:uppercase;color:var(--secondaire)}
.pilule.on{color:var(--accent-ici)}
.pilule.on::after{content:"compris";font-size:var(--t-cap);letter-spacing:.08em;text-transform:uppercase;color:var(--accent-ici)}
.apercu .mention{font-size:var(--t-legende);color:var(--secondaire);margin-top:var(--e2)}
.apercu .vue{display:flex;align-items:center;justify-content:space-between;gap:var(--e4);padding:var(--e3) 0;border-top:1px solid var(--trait);border-bottom:1px solid var(--trait);margin-top:var(--e3)}
.apercu .vue .nom{font-family:var(--serif);font-style:italic;font-size:var(--t-legende);color:var(--secondaire)}

/* ---------- Ce que l'on ne voit pas ---------- */
.matiere{padding:var(--e9) 0}
.matiere h2{grid-column:1/8;margin-bottom:var(--e7)}
.matiere .texte{grid-column:1/5}
.matiere .texte .bloc{min-height:60vh;padding-top:var(--e5)}
.matiere .texte .bloc:last-child{min-height:40vh}
.matiere .texte h3{margin-bottom:var(--e3)}
.matiere .texte p{color:var(--secondaire)}
.matiere .images{grid-column:6/13;display:flex;flex-direction:column;gap:var(--e6)}
.matiere .images figure{position:sticky;top:calc(var(--entete) + 24px);margin:0;background:var(--noyer);color:var(--ivoire);padding:var(--e5)}
.matiere .images img{width:100%}
.matiere .images .legende{color:var(--argent-clair);margin-top:var(--e3)}
.matiere .images .texte-planche{font-family:var(--serif);font-size:var(--t-h3);line-height:1.2;color:var(--ivoire);max-width:26ch;padding:var(--e6) 0}
.matiere .images .texte-planche .chiffre{font-size:clamp(48px,5vw,72px);display:block;line-height:1;margin-bottom:var(--e3)}

/* ---------- Nuancier ---------- */
.nuancier{padding:var(--e9) 0}
.nuancier h2{grid-column:1/8}
.nuancier .chapo{grid-column:8/13;align-self:end}
.nuancier .surface{grid-column:1/13;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--gout);margin-top:var(--e7);padding-top:var(--e5);border-top:1px solid var(--trait)}
.nuancier .surface h3{grid-column:1/4;font-family:var(--sans);font-size:var(--t-cap);letter-spacing:.08em;text-transform:uppercase;font-weight:500;color:var(--secondaire)}
.teintes-liste{grid-column:4/13;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:var(--gout)}
.teintes-liste button{display:block;width:100%;text-align:left;padding:0;cursor:zoom-in}
.teintes-liste .echantillon{display:block;width:100%;aspect-ratio:1;object-fit:cover;background-size:cover;background-position:center;border:1px solid var(--trait);box-shadow:inset 0 0 0 1px rgba(28,25,23,.35);transition:outline-color var(--duree-courte) var(--courbe)}
.teintes-liste button:hover .echantillon{outline:1px solid var(--texte);outline-offset:3px}
.teintes-liste i{display:block;font-family:var(--serif);font-style:italic;font-size:var(--t-legende);line-height:1.3;margin-top:var(--e2);color:var(--texte)}
.nuancier .note{grid-column:4/10;margin-top:var(--e5)}
#loupe{border:0;padding:0;background:transparent;width:min(1180px,94vw);max-width:none;margin:auto;color:var(--ivoire)}
#loupe::backdrop{background:rgba(23,20,16,.92)}
.loupe-in{background:var(--noyer);padding:var(--e5)}
.loupe-visuel{position:relative;aspect-ratio:1900/430;max-height:60vh;background:var(--nuit)}
.loupe-visuel img,.loupe-visuel #loupe-uni{position:absolute;inset:0;width:100%;height:100%}
.loupe-visuel img{object-fit:cover;display:none}
.loupe-visuel img.vu{display:block}
#loupe-uni{display:none}
#loupe-uni.vu{display:block}
.loupe-pied{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--e5);padding-top:var(--e5)}
.loupe-surface{display:block;font-size:var(--t-cap);letter-spacing:.08em;text-transform:uppercase;font-weight:500;color:var(--argent-clair);margin-bottom:var(--e2)}
.loupe-nom{display:block;font-family:var(--serif);font-size:var(--t-h2);line-height:1}
.loupe-nav{display:flex;gap:var(--e3);flex:none}
.loupe-nav button{min-width:44px;height:44px;padding:0 var(--e4);border:1px solid var(--filet-nuit);font-size:var(--t-dense);transition:border-color var(--duree-courte) var(--courbe)}
.loupe-nav button:hover{border-color:var(--ivoire)}
.loupe-note{font-size:var(--t-legende);font-family:var(--serif);font-style:italic;color:var(--argent-clair);margin-top:var(--e4)}

/* ---------- Modules : mosaïque ---------- */
.modules{padding:var(--e9) 0}
.modules h2{grid-column:1/8}
.modules .chapo{grid-column:8/13;align-self:end}
.mosaique{grid-column:1/13;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--gout);margin-top:var(--e7);align-items:end}
.mosaique figure{margin:0}
.mosaique img{width:100%;aspect-ratio:1;object-fit:cover;filter:saturate(.85) sepia(.06) contrast(.98)}
.mosaique figcaption{margin-top:var(--e2)}
.mosaique figure:nth-child(12n+1){grid-column:span 4}
.mosaique figure:nth-child(12n+2){grid-column:span 3;margin-bottom:var(--e7)}
.mosaique figure:nth-child(12n+3){grid-column:span 2}
.mosaique figure:nth-child(12n+4){grid-column:span 3;margin-bottom:var(--e6)}
.mosaique figure:nth-child(12n+5){grid-column:2/span 3}
.mosaique figure:nth-child(12n+6){grid-column:span 5}
.mosaique figure:nth-child(12n+7){grid-column:span 2;margin-bottom:var(--e8)}
.mosaique figure:nth-child(12n+8){grid-column:span 3}
.mosaique figure:nth-child(12n+9){grid-column:span 2;margin-bottom:var(--e6)}
.mosaique figure:nth-child(12n+10){grid-column:span 3}
.mosaique figure:nth-child(12n+11){grid-column:span 2;margin-bottom:var(--e7)}
.mosaique figure:nth-child(12n+12){grid-column:span 2}
/* vu de près : six carrés égaux, photos d’atelier */
.details{padding:var(--e9) 0}
.details h2{grid-column:1/8}
.details .chapo{grid-column:8/13;align-self:end}
.mosaique--details{align-items:start}
.mosaique--details figure:nth-child(n){grid-column:span 4;margin:0 0 var(--e5)}
.mosaique--details img{filter:saturate(.9) contrast(.98)}
.modules .suite{grid-column:8/13;margin-top:var(--e6)}

/* ---------- Comment ça se passe ---------- */
.processus{padding:var(--e9) 0;background:var(--pierre)}
.processus h2{grid-column:1/8;margin-bottom:var(--e7)}
.processus ol{grid-column:1/13;list-style:none;counter-reset:etape}
.processus li{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--gout);padding:var(--e6) 0;border-top:1px solid var(--trait);counter-increment:etape}
.processus li::before{content:counter(etape);grid-column:1/2;grid-row:1/3;font-family:var(--serif);font-size:var(--t-numero);font-weight:300;line-height:.9;color:var(--secondaire)}
.processus li h3{grid-column:2/6;grid-row:1}
.processus li p{grid-column:6/12;grid-row:1/3;font-size:var(--t-corps)}
.processus .delai{grid-column:2/6;grid-row:2;align-self:start;margin-top:var(--e2);color:var(--secondaire);font-size:var(--t-dense)}

/* ---------- Entretien (questions) ---------- */
.entretien{padding:var(--e9) 0}
.entretien h2{grid-column:1/8;margin-bottom:var(--e7)}
.entretien .qr,.qr{grid-column:1/13;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--gout);padding:var(--e6) 0;border-top:1px solid var(--trait)}
.entretien .qr h3,.qr h3{grid-column:1/6;font-size:var(--t-h3)}
.entretien .qr p,.qr p{grid-column:7/12;font-size:var(--t-corps);margin-top:var(--e5)}

/* ---------- Contact ---------- */
.contact{padding:var(--e9) 0}
.contact .maison{grid-column:1/6}
.contact .maison p{margin-top:var(--e5);color:var(--secondaire)}
.contact .coordonnees{grid-column:1/6;margin-top:var(--e6);font-size:var(--t-dense);line-height:2}
.contact .coordonnees a{border-bottom:1px solid var(--secondaire)}
.contact form, .formulaire{grid-column:7/12;display:flex;flex-direction:column;gap:var(--e4)}
.contact .champ, .formulaire .champ{display:flex;flex-direction:column;gap:var(--e2)}
.champ label,.contact label,.formulaire label{font-size:var(--t-cap);letter-spacing:.08em;text-transform:uppercase;font-weight:500;color:var(--secondaire)}
input,select,textarea{width:100%;background:transparent;border:0;border-bottom:1px solid var(--texte);color:var(--texte);padding:10px 0;font:inherit;font-size:var(--t-corps);border-radius:var(--r0)}
input:focus,select:focus,textarea:focus{border-bottom-width:2px}
input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--accent-ici);outline-offset:3px;border-bottom-color:var(--accent-ici)}
textarea{min-height:120px;resize:vertical}
.rgpd{font-size:var(--t-legende);color:var(--secondaire)}
.form-etat{font-size:var(--t-dense);line-height:1.5}
.form-etat:empty{display:none}
.form-etat.ok{color:var(--texte)}
.form-etat.ko{color:var(--accent-ici)}
.contact .envoi, .formulaire .envoi{align-self:flex-start}

/* ---------- Professionnels ---------- */
.pro{padding:var(--e8) 0}
.pro h2{grid-column:1/8}
.pro p{grid-column:1/7;margin-top:var(--e5);color:var(--secondaire)}
.pro .lien{grid-column:8/13;align-self:end;justify-self:start}

/* ---------- Pied : colophon ---------- */
.pied{padding:var(--e7) 0 var(--e6)}
.pied .grille{row-gap:var(--e6)}
.pied .mot{grid-column:1/4;height:18px;width:auto;fill:currentColor}
.pied .colophon{grid-column:4/10;font-size:var(--t-dense);color:var(--argent);line-height:1.6}
.pied .colophon a{color:var(--ivoire);border-bottom:1px solid var(--filet-nuit)}
.pied .plan{grid-column:1/13;display:flex;flex-wrap:wrap;gap:var(--e3) var(--e6);font-size:15px;padding-top:var(--e5);border-top:1px solid var(--filet-nuit)}
.pied .plan a{padding:6px 0}
.pied .bas{grid-column:1/13;color:var(--argent);max-width:none}
.pied .bas a{color:var(--ivoire);border-bottom:1px solid var(--filet-nuit)}

/* ---------- Bandeau de consentement (js/mesure.js) ---------- */
.bandeau-cookies{position:fixed;left:0;right:0;bottom:0;z-index:25;background:var(--nuit);color:var(--ivoire);border-top:1px solid var(--filet-nuit);padding-bottom:env(safe-area-inset-bottom)}
.bc-in{max-width:var(--max);margin:0 auto;padding:var(--e5) var(--marge);display:flex;align-items:center;gap:var(--e6);flex-wrap:wrap}
.bc-in p{flex:1 1 420px;font-size:var(--t-dense);line-height:1.5;color:var(--argent);margin:0;max-width:none}
.bc-in a{color:var(--ivoire);border-bottom:1px solid var(--filet-nuit)}
.bc-btns{display:flex;gap:var(--e3);flex:none}
.bc-btns .btn{--texte:var(--ivoire);--fond:var(--nuit)}

/* ---------- Mobile ---------- */
@media (max-width:1080px){
  .entete .principale{display:none}
  .entete .marque{grid-column:1/6}
  .entete .droite{grid-column:6/13;gap:16px}
  .menu-bouton{display:inline-flex}
  .ouverture h1{grid-column:1/8}
  .ouverture .planche{grid-column:8/13}
  .chapitre--ii .image{grid-column:2/8}
  .chapitre--ii .fiche{grid-column:8/13}
  .apercu .scene-cadre{grid-column:1/13}
  .apercu .commandes{grid-column:1/13;flex-direction:row;flex-wrap:wrap;gap:var(--e6)}
  .apercu .commandes > div{flex:1 1 220px}
  .teintes-liste{grid-column:1/13}
  .nuancier .surface h3{grid-column:1/13}
}
@media (max-width:720px){
  .entete .droite .lien{display:none}
  .ouverture{height:auto}
  .ouverture .colle{position:static;height:auto;grid-template-rows:auto;padding-top:80px;align-content:start}
  .ouverture h1,.ouverture .marge,.ouverture .planche{grid-column:1/13;grid-row:auto;margin-right:0;padding-bottom:0;max-width:none}
  .scene{max-height:none}
  .ouverture .marge{order:3;margin-top:var(--e5)}
  .cote{margin-right:0}
  .cote-texte{left:0}
  .planche figcaption{margin:var(--e4) 0 0}
  .scene .fermee{animation:none !important;opacity:var(--p,0);transition:opacity var(--duree) var(--courbe)}
  .curseur{animation:none !important;transition:transform var(--duree) var(--courbe)}
  .cuisines-intro h2,.cuisines-intro .chapo,.cuisines-intro .emprise{grid-column:1/13}
  .cuisines-intro .emprise{margin-top:var(--e5)}
  .chapitre{padding:var(--e7) 0}
  .chapitre .marge{grid-column:1/13;position:static;display:flex;gap:var(--e4);align-items:baseline}
  .chapitre .marge .cap{margin:0}
  .chapitre .image,.chapitre .fiche{grid-column:1/13;position:static;margin:0}
  .chapitre--i .image,.chapitre--iii .image{margin:0 calc(-1 * var(--marge))}
  .chapitre--i .image figcaption,.chapitre--iii .image figcaption,.chapitre--ii .image figcaption{margin:var(--e3) var(--marge) 0}
  .chapitre--iii .fiche{margin:var(--e5) 0 var(--e7);padding:var(--e5) 0 0;background:transparent;color:inherit;--secondaire:var(--argent);--trait:var(--filet-nuit)}
  .chapitre--i .fiche{margin-top:var(--e5)}
  .bande figcaption{margin-left:0}
  .defile{grid-column:1/13;margin:0 calc(-1 * var(--marge));padding:0 var(--marge)}
  .comparatif caption{padding-left:0}
  .apercu h2,.apercu .chapo,.matiere h2,.matiere .texte,.matiere .images,.nuancier h2,.nuancier .chapo,.nuancier .note,.modules h2,.modules .chapo,.modules .suite,.processus h2,.entretien h2,.contact .maison,.contact .coordonnees,.contact form,.pro h2,.pro p,.pro .lien,.pied .mot,.pied .colophon{grid-column:1/13}
  .apercu .commandes{flex-direction:column;gap:var(--e5)}
  .matiere .texte .bloc{min-height:0;padding:var(--e5) 0}
  .matiere .images figure{position:static}
  .teintes-liste{grid-template-columns:repeat(3,minmax(0,1fr))}
  .mosaique figure{grid-column:span 6 !important;margin:0 !important}
  .processus li{display:block}
  .processus li::before{display:block;margin-bottom:var(--e3)}
  .processus li p,.processus .delai{margin-top:var(--e3)}
  .entretien .qr,.qr{display:block}
  .entretien .qr p,.qr p{margin-top:var(--e3)}
  .contact form{margin-top:var(--e6)}
}

/* ---------- Impression ---------- */
@media print{
  *{background:#fff !important;color:#000 !important;filter:none !important}
  .entete,.menu,.menu-bouton,.bandeau-cookies,.rocker,.toast,dialog,.apercu .commandes,[data-apparait]{display:none !important}
  .ouverture{height:auto}
  .ouverture .colle{position:static;height:auto;display:block}
  .scene .fermee{display:none}
  a[href^="http"]::after{content:" (" attr(href) ")";font-size:.8em}
  .chapitre .fiche,.chapitre .marge{position:static}
  section,article{padding:12mm 0 !important;break-inside:avoid}
}

/* ---------- Pages secondaires (Phase 4) ---------- */
.page{padding:calc(var(--entete) + var(--e8)) 0 var(--e9)}
.page-tete{grid-column:1/13;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--gout);margin-bottom:var(--e8)}
.page-tete .fil{grid-column:1/13;color:var(--secondaire);margin-bottom:var(--e6)}
.page-tete .fil a{border-bottom:1px solid var(--secondaire);padding-bottom:2px}
.fil ol{list-style:none;display:flex;flex-wrap:wrap;gap:.6em;padding:0;margin:0}
.fil li+li::before{content:"·";margin-right:.6em}
.fil a{display:inline-block;padding:12px 0;margin:-12px 0}
.page-tete h1{grid-column:1/10;font-size:var(--t-h1-page,clamp(40px,4.6vw,68px));max-width:20ch}
.page-tete .chapo{grid-column:1/8;margin-top:var(--e5)}
.page-tete .signature{grid-column:1/8;margin-top:var(--e5);color:var(--secondaire);font-size:var(--t-dense)}
.page-tete .signature a{border-bottom:1px solid var(--trait)}
.lecture{grid-column:1/13;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--gout);align-items:start}
.lecture .corps{grid-column:1/11;display:grid;grid-template-columns:subgrid;column-gap:var(--gout);row-gap:var(--e4)}
.lecture .corps>*{grid-column:4/9;max-width:none;min-width:0}
.lecture .corps>h2{grid-column:1/4;max-width:none;font-size:var(--t-h3);line-height:1.15;margin-top:var(--e6);padding-top:var(--e4);border-top:1px solid var(--trait)}
.lecture .corps>h2+*{margin-top:var(--e6);padding-top:var(--e4);border-top:1px solid var(--trait)}
.lecture .corps>h2:first-child,.lecture .corps>h2:first-child+*{margin-top:0}
.lecture .corps>h3{font-size:var(--t-chapo);font-style:normal;margin-top:var(--e4)}
.lecture .corps ol,.lecture .corps ul{padding-left:1.4em}
.lecture .corps li+li{margin-top:var(--e3)}
.lecture .corps strong{font-weight:500}
/* fabrication : huit étapes, photo et texte en quinconce */
.fabrication .etapes{grid-column:1/13;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--gout);row-gap:var(--e8)}
.fabrication .etape{grid-column:1/13;display:grid;grid-template-columns:subgrid;align-items:end}
.fabrication .etape figure{grid-column:1/8;margin:0}
.fabrication .etape img{width:100%;aspect-ratio:4/3;object-fit:cover;filter:saturate(.9) contrast(.98)}
.fabrication .etape .texte{grid-column:8/13}
.fabrication .etape:nth-child(even) figure{grid-column:6/13;grid-row:1}
.fabrication .etape:nth-child(even) .texte{grid-column:1/5;grid-row:1}
.fabrication .etape .numero{display:block;color:var(--secondaire);margin-bottom:var(--e3)}
.fabrication .etape h2{font-size:var(--t-h3);line-height:1.15;margin-bottom:var(--e3);max-width:none}
.fabrication .etape p{color:var(--secondaire)}
.fabrication .video-auvent{grid-column:1/13;margin:var(--e8) 0 0}
.fabrication .video-auvent video{width:100%;aspect-ratio:16/9;background:#000;display:block}
.fabrication .video-auvent .legende{margin-top:var(--e3)}
.fabrication .suite{grid-column:1/13;margin-top:var(--e8);display:flex;gap:var(--e5);flex-wrap:wrap}
@media (max-width:720px){.fabrication .etape figure,.fabrication .etape .texte,.fabrication .etape:nth-child(even) figure,.fabrication .etape:nth-child(even) .texte{grid-column:1/13;grid-row:auto}}
.video-pose{margin:var(--e5) 0 var(--e6)}
.video-pose video{width:100%;max-width:400px;aspect-ratio:9/16;background:#000}
.video-pose .legende{margin-top:var(--e3)}
.lecture .corps a:not(.lien):not(.bouton){border-bottom:1px solid var(--secondaire);transition:border-color var(--duree-courte) var(--courbe)}
.lecture .corps a:not(.lien):not(.bouton):hover{border-bottom-color:currentColor}
.lecture .corps .defile{grid-column:1/11;max-width:none}
.lecture .corps .comparatif{min-width:520px;table-layout:auto}
.lecture .corps .comparatif th[scope=row]{width:26%}
.lecture .corps .cap{margin-top:var(--e5);color:var(--secondaire)}
.lecture .corps .actions{display:flex;gap:var(--e5);flex-wrap:wrap;align-items:center;margin-top:var(--e5)}
/* variante avec sommaire (pages légales) */
.lecture--sommaire .sommaire{grid-column:1/4;position:sticky;top:calc(var(--entete) + 24px);font-size:var(--t-dense);color:var(--secondaire)}
.lecture--sommaire .sommaire ol{list-style:none;counter-reset:som}
.lecture--sommaire .sommaire li{counter-increment:som;padding:6px 0;border-top:1px solid var(--trait)}
.lecture--sommaire .sommaire li::before{content:counter(som) ".\2002";font-family:var(--sans);font-variant-numeric:tabular-nums}
.lecture--sommaire .sommaire a:hover{color:var(--texte)}
.lecture--sommaire .corps{grid-column:4/9;display:block;max-width:none}
.lecture--sommaire .corps>*+*{margin-top:var(--e4)}
.lecture--sommaire .corps>h2{grid-column:auto;font-size:var(--t-h3);border:0;padding:0;margin-top:var(--e7);scroll-margin-top:calc(var(--entete) + var(--e5))}
.lecture--sommaire .corps>h2+*{border:0;padding:0;margin-top:var(--e4)}
/* journal : liste éditoriale */
.journal{grid-column:1/13}
.journal .entree{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--gout);padding:var(--e6) 0;border-top:1px solid var(--trait)}
.journal .entree h2{grid-column:1/7;font-size:var(--t-h3);line-height:1.15;max-width:none}
.journal .entree h2 a{transition:color var(--duree-courte) var(--courbe)}
.journal .entree h2 a:hover{color:var(--accent-ici)}
.journal .entree .resume{grid-column:7/12;font-size:var(--t-corps);color:var(--secondaire)}
.journal .entree .lire{grid-column:7/12;justify-self:start;margin-top:var(--e3)}
.journal .entree:last-child{border-bottom:1px solid var(--trait)}
/* article */
.article .page-tete h1{grid-column:1/11;max-width:24ch}
.article .pleine{grid-column:1/13;margin:0 calc(-1 * var(--marge)) var(--e8)}
.article .pleine img{width:100%;aspect-ratio:21/9;object-fit:cover;filter:saturate(.85) sepia(.06) contrast(.98)}
.article .pleine figcaption{padding:var(--e3) var(--marge) 0;max-width:40ch;margin-left:calc(var(--marge) + 8.333%)}
.article .corps>p:first-of-type::first-letter{font-family:var(--serif);font-weight:350;font-size:3.8em;line-height:.78;float:left;padding:.08em .1em 0 0;font-variation-settings:"opsz" 144}
.article .exergue{grid-column:1/4;margin-top:var(--e5);padding-top:var(--e4);border-top:1px solid var(--trait);font-family:var(--serif);font-style:italic;font-size:var(--t-chapo);line-height:1.25;color:var(--texte);max-width:none;text-wrap:balance}
.article .qr{border-top:1px solid var(--trait)}
.article .corps>.questions{grid-column:1/11;max-width:none;margin-top:var(--e7)}
.article .corps>.questions h2{font-size:var(--t-h3);margin-bottom:var(--e4)}
.article .suite{margin-top:var(--e7);padding-top:var(--e5);border-top:1px solid var(--trait);color:var(--secondaire)}
.article .suite .lien{color:var(--texte);margin-left:.5em}
.article .lies{grid-column:1/11;max-width:none;display:grid;grid-template-columns:subgrid;margin-top:var(--e6)}
.article .lies h2{grid-column:1/4;font-size:var(--t-h3);margin:0;padding-top:var(--e3);border:0;border-top:1px solid var(--trait)}
.article .lies ul{grid-column:4/9;list-style:none;padding:0;max-width:none}
.article .lies li{padding:var(--e3) 0;border-top:1px solid var(--trait);font-family:var(--serif);font-size:var(--t-chapo);line-height:1.25}
.article .lies li:last-child{border-bottom:1px solid var(--trait)}
.lecture .corps .lies a:not(.lien):not(.bouton){border-bottom:0}
.article .lies a:hover{color:var(--accent-ici)}
.article .publication{grid-column:4/9;margin-top:var(--e6);color:var(--secondaire)}
.page-tete + .domaines{margin-top:0}
.page-tete + .processus{padding-top:0}
.domaines + .processus{padding-top:var(--e8)}
.bandeau-btns .lien,.reveal-btns .lien,.actions .lien,.journal .lire{display:inline-block;padding:11px 0 8px}
/* domaines (sur mesure) et étapes courtes */
.domaines{grid-column:1/13;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--gout);margin-top:var(--e7)}
.domaines h2{grid-column:1/4;font-size:var(--t-h3);border-top:1px solid var(--trait);padding-top:var(--e4)}
.domaines .domaine{grid-column:4/11;display:grid;grid-template-columns:subgrid;border-top:1px solid var(--trait);padding:var(--e4) 0 var(--e5)}
.domaines .domaine h3{grid-column:1/3;font-size:var(--t-chapo)}
.domaines .domaine p{grid-column:3/8;color:var(--secondaire)}
.page .processus{grid-column:1/13;background:transparent;padding:var(--e7) 0 0}
.page .processus h2{font-size:var(--t-h3)}
.page .processus li h3{font-size:var(--t-chapo)}
.page .formulaire-bloc{grid-column:1/13;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--gout);margin-top:var(--e8);padding-top:var(--e7);border-top:1px solid var(--trait)}
.page .formulaire-bloc .maison{grid-column:1/6}
.page .formulaire-bloc .maison h2{font-size:var(--t-h3)}
.page .formulaire-bloc .maison p{margin-top:var(--e5);color:var(--secondaire)}
.page .formulaire-bloc .formulaire{grid-column:7/12;display:flex;flex-direction:column;gap:var(--e4)}
.formulaire select{font:inherit;color:inherit;background:transparent;border:0;border-bottom:1px solid var(--texte);padding:10px 0;border-radius:0;min-height:44px}
.page-simple{grid-column:1/13;min-height:50vh}
@media (max-width:1080px){
  .lecture .corps>*{grid-column:3/11}
  .lecture .corps>h2{grid-column:1/3}
  .article .exergue{grid-column:1/3}
  .lecture--sommaire .corps{grid-column:4/10}
}
@media (max-width:720px){
  .page{padding-top:calc(var(--entete) + var(--e6))}
  .page-tete h1,.page-tete .chapo,.page-tete .signature,.article .page-tete h1{grid-column:1/13}
  .lecture .corps{grid-column:1/13;display:block}
  .lecture .corps>*+*{margin-top:var(--e4)}
  .lecture .corps>h2{margin-top:var(--e6);padding-top:var(--e4)}
  .lecture .corps>h2+*{margin-top:var(--e4);padding-top:0;border:0}
  .lecture--sommaire .sommaire{position:static;grid-column:1/13;margin-bottom:var(--e6)}
  .lecture--sommaire .corps{grid-column:1/13}
  .journal .entree{display:block}
  .journal .entree .resume{margin-top:var(--e3)}
  .article .exergue{margin:var(--e5) 0}
  .article .pleine img{aspect-ratio:3/2}
  .article .lies{display:block}
  .article .lies ul{margin-top:var(--e4)}
  .domaines h2,.domaines .domaine{grid-column:1/13;display:block}
  .domaines .domaine p{margin-top:var(--e3)}
  .page .formulaire-bloc .maison,.page .formulaire-bloc .formulaire{grid-column:1/13}
  .page .formulaire-bloc .formulaire{margin-top:var(--e6)}
}