/* Digital by Everywhere — accueil « de la famille » (17/10/2026). Nuit vert forêt, laiton, ivoire ; polices de la
   maison Everywhere (Anybody, Atkinson Hyperlegible, Space Mono), auto-hébergées. */
@font-face{font-family:'Anybody';font-style:normal;font-weight:100 900;font-stretch:50% 150%;font-display:swap;src:url(../fonts/anybody.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Anybody';font-style:normal;font-weight:100 900;font-stretch:50% 150%;font-display:swap;src:url(../fonts/anybody-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Atkinson Hyperlegible';font-weight:400;font-display:swap;src:url(../fonts/atkinson-normal-400.woff2) format('woff2')}
@font-face{font-family:'Atkinson Hyperlegible';font-weight:700;font-display:swap;src:url(../fonts/atkinson-normal-700.woff2) format('woff2')}
@font-face{font-family:'Space Mono';font-weight:400;font-display:swap;src:url(../fonts/spacemono-400.woff2) format('woff2')}
@font-face{font-family:'Space Mono';font-weight:700;font-display:swap;src:url(../fonts/spacemono-700.woff2) format('woff2')}

:root{
  --nuit:#0b1712;--nuit2:#10271e;--nuit3:#16342a;--trait:#2d5546;
  --ivoire:#f4f1e8;--doux:#c8cfc7;--laiton:#d9a441;--laiton-c:#e8bd62;--menthe:#8fd6b4;
  --disp:'Anybody',system-ui,sans-serif;--txt:'Atkinson Hyperlegible',system-ui,sans-serif;--mono:'Space Mono',ui-monospace,Consolas,monospace;
  --gut:clamp(16px,4vw,56px);--ease:cubic-bezier(.2,.75,.2,1);
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:96px}
body{margin:0;background:var(--nuit);color:var(--ivoire);font-family:var(--txt);font-size:18px;line-height:1.6;-webkit-font-smoothing:antialiased}
h1,h2,h3,p,ul,ol,figure{margin:0}
img,video{display:block;max-width:100%}
a{color:var(--laiton-c)}
.wrap{width:min(1240px,100% - 2*var(--gut));margin-inline:auto}
.evitement{position:absolute;left:12px;top:-60px;z-index:300;background:var(--laiton);color:var(--nuit);padding:10px 14px;border-radius:6px;font-weight:700}
.evitement:focus{top:12px}
:focus-visible{outline:3px solid var(--laiton-c);outline-offset:3px}
html:not(.js) .js-seul{display:none!important}

/* ---------- en-tête ---------- */
.entete{position:fixed;inset:0 0 auto 0;z-index:100;--mx-encre:#f4f1e8;transition:background-color .35s,border-color .35s;border-bottom:1px solid transparent}
.entete.plein{background:rgba(11,23,18,.88);backdrop-filter:blur(14px);border-bottom-color:rgba(255,255,255,.07)}
.barre{display:flex;align-items:center;justify-content:space-between;gap:20px;height:72px}
.marque{color:var(--ivoire);text-decoration:none}
@media(min-width:701px){html.js:not(.calme) .entete:not(.plein) .barre .marque{display:none!important}}
.entete .barre>nav{margin-left:auto}
.entete nav ul{display:flex;align-items:center;gap:26px;list-style:none;padding:0}
.entete .barre nav a{font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:#d8ded8;text-decoration:none;padding:6px 0;white-space:nowrap;
  background:linear-gradient(var(--laiton),var(--laiton)) left bottom/0 2px no-repeat;transition:background-size .35s var(--ease),color .2s}
.entete .barre nav a:hover{color:#fff;background-size:100% 2px}
.entete .barre nav a.appel{background:var(--laiton);color:var(--nuit);padding:11px 16px;border-radius:6px;font-weight:700}
.entete .barre nav a.appel:hover{background:var(--laiton-c)}
@media(max-width:900px){.entete .barre nav li:not(:last-child){display:none}}
@media(max-width:420px){.entete .barre nav a.appel{padding:9px 11px;letter-spacing:.05em}}

/* ---------- boutons ---------- */
.bouton{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:14px 26px;border:0;border-radius:8px;background:var(--laiton);color:var(--nuit);
  font-family:var(--txt);font-size:18px;font-weight:700;text-decoration:none;cursor:pointer;transition:transform .25s var(--ease),box-shadow .25s,background-color .2s}
.bouton:hover{background:var(--laiton-c)}
@media(hover:hover){.bouton:hover{transform:translateY(-2px);box-shadow:0 14px 30px -14px var(--laiton)}}
.pause{font-family:var(--mono);font-size:12px;letter-spacing:.06em;color:var(--ivoire);background:rgba(11,23,18,.7);border:1px solid rgba(244,241,232,.35);border-radius:999px;min-height:32px;padding:4px 14px;cursor:pointer}
.pause:hover{border-color:var(--laiton)}

/* ---------- ouverture : l'établi vu de dessus ----------
   Le film montre l'établi d'en haut ; la page y pose une feuille à en-tête Digital (le titre, les cases à cocher), puis
   les pièces préparées, à côté des mains. Encre sur papier : lisible d'emblée, sans voile lourd. */
.ouv{position:relative;min-height:100vh;min-height:100svh;display:grid;align-items:center;overflow:hidden;overflow:clip;background:#1a120b;isolation:isolate;--encre:#1c2520;--encre2:#46514a;--papier:#f7f2e6}
.ouv-scene{position:absolute;inset:0;z-index:-1}
.ouv-affiche,.ouv-film{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:56% 50%}
.ouv-film{opacity:0;transition:opacity 1.4s ease}
.ouv-film.vu{opacity:1}
.ouv-affiche{transition:opacity .4s}
.ouv-voile{position:absolute;inset:0;background:linear-gradient(90deg,rgba(12,8,4,.55) 0%,rgba(12,8,4,.12) 46%,rgba(12,8,4,0) 70%,rgba(12,8,4,.25) 100%),linear-gradient(0deg,rgba(12,8,4,.6) 0%,rgba(12,8,4,0) 22%)}
.ouv-contenu{position:static;width:min(1240px,100% - 2*var(--gut));margin-inline:auto;padding:110px 0 64px;display:grid;grid-template-columns:minmax(0,520px) 1fr;align-items:center;gap:56px}
/* La feuille : papier quadrillé comme le carnet du film, posée de biais. */
.papier{position:relative;padding:22px 32px 26px;color:var(--encre);border-radius:3px;transform:rotate(-1.4deg);
  background:linear-gradient(rgba(70,110,140,.09) 1px,transparent 1px) 0 0/100% 22px,linear-gradient(90deg,rgba(70,110,140,.09) 1px,transparent 1px) 0 0/22px 100%,var(--papier);
  box-shadow:0 2px 0 rgba(0,0,0,.06),0 38px 70px -26px rgba(0,0,0,.85),0 12px 24px -12px rgba(0,0,0,.5)}
.papier::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:linear-gradient(115deg,rgba(255,255,255,.35),transparent 38%,rgba(0,0,0,.05))}
.papier-tete{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-bottom:10px;margin-bottom:18px;border-bottom:1.5px solid rgba(28,37,32,.75);font-family:var(--mono);font-size:13px;color:var(--encre2)}
.papier-tete img{height:26px;width:auto}
.ouv-titre{font-family:var(--disp);font-weight:880;font-stretch:68%;letter-spacing:-.01em;line-height:.94;font-size:clamp(56px,7.2vw,100px);color:var(--encre)}
.ouv-titre{--te-b:64%}
.ouv-titre .te-l{display:block;font-stretch:var(--te-b);animation:etire 1.3s var(--ease) backwards .2s}
.ouv-titre .te-l+.te-l{animation-delay:.34s}
/* La signature de Digital : le trait de crayon du menuisier, tiré sous le mot qui compte (titre, puis chaque section). */
.trait,.titre-section em{background:url(../media/trait.svg) 0 100%/0% .2em no-repeat;padding-bottom:.08em}
.trait{animation:trace .9s var(--ease) 1.2s forwards}
@keyframes trace{to{background-size:100% .2em}}
.titre-section em{color:inherit;transition:background-size 1s var(--ease) .35s}
.titre-section.vu em,.calme .titre-section em,html:not(.js) .titre-section em,html:not(.js) .trait,.calme .trait{background-size:100% .2em}
@keyframes etire{from{font-stretch:118%;opacity:0;transform:translateY(16px)}to{font-stretch:var(--te-b);opacity:1;transform:none}}
.ouv-sous{margin-top:12px;font-size:clamp(17px,1.35vw,19px);line-height:1.5;color:var(--encre2);max-width:46ch}
@keyframes monte{from{opacity:0;transform:translateY(14px)}}
.choix{margin:16px 0 0;padding:12px 0 0;border:0;border-top:1px dashed rgba(28,37,32,.35);min-width:0}
.choix legend{float:left;width:100%;padding:0;margin-bottom:10px;font-family:var(--disp);font-weight:780;font-stretch:68%;font-size:19px;letter-spacing:-.01em;color:var(--encre)}
.choix-liste{clear:both;display:grid;grid-template-columns:1fr 1fr;gap:0 22px}
@media(min-width:1100px){.choix label span{font-size:16px;gap:10px}}
.choix label{position:relative;cursor:pointer}
.choix input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.choix label span{display:flex;align-items:center;gap:12px;min-height:44px;padding:6px 0;font-size:17px;color:var(--encre)}
/* La case, tracée au crayon ; cochée, le trait laiton s'y pose. */
.choix label span::before{content:"";flex:none;width:22px;height:22px;border:2px solid var(--encre);border-radius:3px;transform:rotate(-2deg);
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 13l5 5L21 4' fill='none' stroke='%23a8741c' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/0 0 no-repeat;transition:background-size .3s cubic-bezier(.3,1.6,.5,1)}
.choix label:hover span::before{border-color:#a8741c}
.choix input:checked+span{font-weight:700}
.choix input:checked+span::before{background-size:120% 120%}
.choix input:focus-visible+span{outline:3px solid #a8741c;outline-offset:2px;border-radius:4px}
.choix-echo{margin-top:6px;font-size:16px;line-height:1.45;color:var(--encre2)}
.choix-echo ul{list-style:none;padding:0;margin:0}
.choix-echo li{position:relative;padding-left:20px;animation:monte .4s var(--ease) backwards}
.choix-echo li::before{content:"→";position:absolute;left:0;color:#a8741c;font-weight:700}
.choix-echo .ecrit::after{content:"";display:inline-block;width:2px;height:1em;margin-left:2px;vertical-align:-2px;background:#a8741c}
.choix-echo p{font-size:14px;color:#5c6660}
.lu-seul{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.ouv-action{margin-top:12px}
/* Les pièces préparées, posées sur l'établi à côté des mains ; les précédentes restent dessous, de biais. */
.pieces{position:relative;align-self:center;justify-self:center;width:330px;height:300px;margin-top:150px}
.piece{position:absolute;right:0;bottom:0;width:320px;padding:14px 18px 12px;background:#fbf8f0;color:#1d241f;border-radius:3px;font-size:14px;line-height:1.4;
  box-shadow:0 26px 44px -18px rgba(0,0,0,.9),0 0 0 1px rgba(0,0,0,.06);transform:rotate(var(--r,2deg)) translate(var(--dx,0),var(--dy,0));transition:transform .7s var(--ease),filter .7s;animation:piece-pose .75s var(--ease) both}
.piece.dessous{filter:brightness(.82)}
.piece-quoi{display:flex;justify-content:space-between;align-items:center;gap:10px;font-family:var(--disp);font-weight:820;font-size:17px;letter-spacing:-.01em}
.piece-ex{font-family:var(--mono);font-size:12px;font-weight:700;color:#7a4f0e;border:1.5px solid #b8862e;border-radius:4px;padding:0 6px;transform:rotate(3deg)}
.piece-qui{color:#4b554e;margin-top:2px}
.piece ul{list-style:none;padding:0;margin:8px 0 0;border-top:1px dashed #c3b89f}
.piece li{padding:4px 0;border-bottom:1px dashed #c3b89f}
.piece-pied{margin-top:7px;font-family:var(--mono);font-size:12px;color:#525b55}
.piece-fin{margin-top:6px;font-weight:700;color:#24583f}
@keyframes piece-pose{from{opacity:0;transform:rotate(14deg) translate(120px,-60px) scale(1.06)}}
.calme .piece{animation:none}
.ouv-pause{position:absolute;right:var(--gut);bottom:14px;z-index:2}
.ouv-credit{position:absolute;right:calc(var(--gut) + 92px);bottom:18px;display:block;margin:0;font-size:16px;line-height:1.5;color:#e9e3d6;text-shadow:0 1px 6px rgba(0,0,0,.9);max-width:calc(100% - 2*var(--gut))}
/* Arrivée : l'établi d'abord vu à travers les lettres DIGITAL, puis on traverse le I ; la feuille se pose ensuite. */
.ouv-nom{display:none;position:absolute;inset:0;background:rgba(12,8,4,.86);--nom-l:min(86vw,1160px);
  -webkit-mask:linear-gradient(#000 0 0),url(../media/nom-masque.png) center/var(--nom-l) auto no-repeat;-webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0),url(../media/nom-masque.png) center/var(--nom-l) auto no-repeat;mask-composite:exclude;
  transform-origin:calc(50% + var(--nom-l) * .00475) 50%;will-change:transform}
.ouv.nom .ouv-nom{display:block;animation:nom-arrive 1s var(--ease) both}
.ouv.nom.ouvre .ouv-nom{animation:nom-traverse 1.15s cubic-bezier(.75,0,.9,.35) forwards}
@keyframes nom-arrive{from{transform:scale(.9);opacity:.4}}
@keyframes nom-traverse{from{transform:scale(1)}80%{opacity:1}to{transform:scale(48);opacity:0}}
.ouv.nom .ouv-voile,.ouv.nom .ouv-credit,.ouv.nom .ouv-pause{transition:opacity 1s ease .3s}
.ouv.nom:not(.ouvert) .ouv-voile,.ouv.nom:not(.ouvert) .ouv-credit,.ouv.nom:not(.ouvert) .ouv-pause{opacity:0}
/* La feuille glisse sur l'établi et se pose, de biais. */
.ouv.nom .papier{transition:transform 1.1s cubic-bezier(.2,.9,.25,1),opacity .5s}
.ouv.nom:not(.ouvert) .papier{opacity:0;transform:translate(-40px,90px) rotate(-7deg)}
.ouv.nom:not(.ouvert) .te-l,.ouv.nom:not(.ouvert) .trait{animation-play-state:paused}
.ouv.nom:not(.ouvert) .ouv-contenu,.ouv.nom:not(.ouvert) .ouv-credit,.ouv.nom:not(.ouvert) .ouv-pause{visibility:hidden}
@media(max-width:1060px) and (min-width:701px){.ouv-contenu{grid-template-columns:minmax(0,500px)}.pieces{position:absolute;right:0;bottom:60px;width:260px}.piece{width:250px}}
@media(max-width:700px){
  /* Sur téléphone : l'établi net en haut (film recadré depuis la 4K), la feuille monte sur le bas du film. */
  .ouv{align-items:start;--film-h:max(50svh,calc(100svh - 390px))}
  .ouv-affiche,.ouv-film{height:var(--film-h);bottom:auto;object-position:50% 62%}
  .ouv-scene::after{content:"";position:absolute;left:0;right:0;top:calc(var(--film-h) - 120px);height:120px;background:linear-gradient(0deg,#1a120b,rgba(26,18,11,0))}
  .ouv-voile{background:linear-gradient(180deg,rgba(12,8,4,.65) 0%,rgba(12,8,4,0) 18%)}
  .ouv-nom{--nom-l:90vw;bottom:28svh}
  .ouv-contenu{position:relative;display:flex;flex-direction:column;justify-content:flex-end;gap:0;min-height:100vh;min-height:100svh;padding:190px 0 10px}
  .papier{padding:18px 18px 20px;transform:rotate(-1deg)}
  .ouv.nom:not(.ouvert) .papier{transform:translateY(80px) rotate(-4deg)}
  .papier{display:flex;flex-direction:column}
  /* Le nom DIGITAL posé sur l'établi, au-dessus de la feuille, à droite de la mention. */
  .papier-tete{position:absolute;top:-40px;right:2px;margin:0;padding:0;border:0;transform:rotate(1deg)}
  .papier-tete img{height:28px;filter:drop-shadow(0 2px 6px rgba(0,0,0,.8))}
  .ouv-titre{order:1}.ouv-sous{order:2}.ouv-action{order:3;margin-top:14px!important}.choix{order:4}
  .ouv-titre{--te-b:64%;font-size:clamp(50px,15.5vw,64px);letter-spacing:-.005em}
  .ouv-sous{margin-top:8px;font-size:16px;line-height:1.5}
  .choix{margin-top:12px;padding-top:8px}
  .choix legend{font-size:16px;margin-bottom:2px}
  .choix-liste{gap:0 10px}
  .choix label span{font-size:15px;gap:9px;line-height:1.25}
  .choix label span::before{width:20px;height:20px}
  .choix-echo ul{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
  .ouv-action{margin-top:10px}
  /* La pièce se pose sur l'établi, au-dessus de la feuille : on la voit sans défiler. */
  .pieces{position:absolute;top:128px;right:0;width:min(250px,66vw);height:0;margin:0}
  .piece{width:100%;font-size:13px;padding:10px 13px 9px;bottom:auto;top:0;transform-origin:100% 0;scale:.86}
  .piece-pied{display:none}
  .piece-quoi{font-size:16px}
  .piece ul{margin-top:6px}.piece li{padding:3px 0}
  .piece.dessous{filter:brightness(.7)}
  .ouv-pause{right:auto;left:0;bottom:auto;top:128px;left:var(--gut)}
  /* La mention reste dans le premier écran : sur l'établi, juste au-dessus de la feuille, à gauche des pièces. */
  .ouv-credit{position:relative;right:auto;bottom:auto;align-self:flex-start;margin:0 0 14px;max-width:none;font-size:16px;line-height:1.3;color:#efe8da}
  .cr-long{display:none}
  .ouv-contenu{padding-bottom:6px}
  .entete:not(.plein){background:linear-gradient(180deg,rgba(12,8,4,.8) 0%,rgba(12,8,4,.4) 70%,rgba(12,8,4,0) 100%)}
}
@media(max-width:350px){.papier-tete{display:none}.ouv-titre{font-size:46px}.choix label span{font-size:14px;gap:7px}}

/* ---------- ce que nous installons : les feuilles posées sur l'établi ---------- */
.installe{background:linear-gradient(90deg,rgba(10,16,12,.18) 0%,rgba(10,16,12,.12) 52%,rgba(10,16,12,.86) 63%),linear-gradient(180deg,#1a120b 0%,rgba(26,18,11,0) 180px,rgba(26,18,11,0) calc(100% - 200px),var(--nuit2) 100%),url(../media/bois.webp) center/cover fixed}
.installe .wrap>.titre-section,.installe .wrap>.chapeau{display:inline-block;max-width:none;padding:6px 14px;margin-left:-14px;background:rgba(10,16,12,.72);border-radius:6px}
.installe .wrap>.chapeau{display:block;width:fit-content;max-width:62ch}
.installe .titre-section,.installe .chapeau{text-shadow:0 2px 18px rgba(0,0,0,.8)}
.installe .chapeau{color:#dfe3dc}
.feuille img{box-shadow:0 0 0 10px #fbfaf6,0 34px 60px -24px rgba(0,0,0,.95)!important;border-radius:2px!important}
.feuille{transform:rotate(var(--rot,0deg))}
.bloc:nth-of-type(1) .feuille,.pile .feuille:nth-child(1){--rot:-1.4deg}
.bloc:nth-of-type(2) .feuille,.pile .feuille:nth-child(2){--rot:1.1deg}
.bloc:nth-of-type(3) .feuille,.pile .feuille:nth-child(3){--rot:-.6deg}
.scenario .pile .feuille.pose{transform:rotate(var(--rot))}
.note-photos{color:#cfd3cc;text-shadow:0 1px 8px rgba(0,0,0,.8)}
@media(max-width:820px){.installe{background:linear-gradient(180deg,#1a120b 0%,rgba(14,12,8,.74) 160px,rgba(14,12,8,.74) calc(100% - 160px),var(--nuit2) 100%),url(../media/bois.webp) 30% 50%/auto 100% repeat-y}
  /* 18/10 : au téléphone, plus de cartes sombres : le texte se lit sur l'établi assombri, les feuilles portent la suite. */
  .installe .wrap>.titre-section,.installe .wrap>.chapeau{background:none;padding:0;margin-left:0}
  .bloc .feuille{margin:22px 8px 26px}
  .bloc-txt{padding:4px 2px 0}}

/* ---------- titres de section ---------- */
.titre-section{font-family:var(--disp);font-weight:860;font-stretch:68%;letter-spacing:-.01em;line-height:.98;font-size:clamp(44px,6vw,84px)}
.titre-section em{font-style:normal}
.chapeau{margin-top:18px;max-width:58ch;color:var(--doux);font-size:clamp(17px,1.4vw,20px)}
section{position:relative}
.installe,.construit,.deroule,.regles,.ecrire{padding:clamp(80px,10vw,140px) 0}

/* ---------- ce que nous installons ---------- */
.bloc{display:grid;grid-template-columns:1.7fr 1fr;gap:clamp(24px,4vw,64px);align-items:center;margin-top:clamp(48px,6vw,80px)}
.bloc picture,.feuille picture{display:block;justify-self:center;width:100%}.bloc img,.feuille img{display:block;width:100%;height:auto;border-radius:14px;box-shadow:0 24px 50px -28px #000}
.bloc-inverse{grid-template-columns:1fr 1.7fr}.bloc-inverse picture,.bloc-inverse .feuille{order:2}
.bloc h3{font-family:var(--disp);font-weight:820;font-stretch:68%;font-size:clamp(32px,3.4vw,48px);letter-spacing:-.005em;line-height:1}
.bloc-txt>p{margin-top:14px;color:var(--doux)}
/* 18/10 : la liste devient une feuille de l'établi, qui s'écrit ligne à ligne quand elle arrive à l'écran ; les lignes
   cochées en haut de page reçoivent la coche laiton. Sans script ou en mouvement réduit, elle est écrite d'emblée. */
.lignes{list-style:none;margin-top:22px;padding:12px 18px 10px;display:grid;color:#1d241f;border-radius:3px;transform:rotate(-.7deg);
  background:#fbf8f0;box-shadow:0 26px 44px -20px rgba(0,0,0,.9),0 0 0 1px rgba(0,0,0,.05)}
.lignes li{position:relative;padding:6px 0 6px 30px;font-size:16px;line-height:1.5;border-bottom:1px dashed #c3b89f;transition:clip-path .9s var(--ease)}
.lignes li:last-child{border-bottom:0}
.lignes li::before{content:"";position:absolute;left:2px;top:18px;width:16px;height:2px;border-radius:2px;background:#1d241f;opacity:.55;transform:rotate(-4deg)}
.lignes li.coche{font-weight:700}
.lignes li.coche::before{top:9px;width:20px;height:20px;opacity:1;border-radius:0;transform:rotate(-3deg);
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 13l5 5L21 4' fill='none' stroke='%23a8741c' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/100% no-repeat}
.lignes li.coche::after{content:"vous l’avez coché";margin-left:8px;font-family:var(--mono);font-size:12px;font-weight:400;color:#7a4f0e;white-space:nowrap}
.js .lignes li{clip-path:inset(-4px -4px -4px -4px)}
.js .lignes:not(.ecrite) li{clip-path:inset(0 100% 0 0)}
.lignes li:nth-child(2){transition-delay:.45s}.lignes li:nth-child(3){transition-delay:.9s}.lignes li:nth-child(4){transition-delay:1.35s}.lignes li:nth-child(5){transition-delay:1.8s}
.calme .lignes li{clip-path:none!important}
/* Les feuilles : chaque capture a son cadre laiton, posé sur la ligne qui concerne Mme Lambert (exemple). */
.feuille{position:relative;display:block}
.cadre{position:absolute;left:var(--x);top:var(--y);width:var(--w);height:var(--h);border:2px solid var(--laiton);border-radius:10px;
  box-shadow:0 0 0 4px rgba(217,164,65,.18),0 0 26px rgba(232,189,98,.45);pointer-events:none;clip-path:inset(0 100% 0 0 round 10px);transition:clip-path .9s var(--ease) .25s}
.feuille.pose .cadre,.calme .cadre{clip-path:inset(0 0 0 0 round 10px)}
@media(max-width:820px){.cadre{left:var(--xt);top:var(--yt);width:var(--wt);height:var(--ht)}}
.js .bloc .feuille{transition:transform 1s var(--ease),opacity .9s var(--ease),filter .9s}
.js .bloc .feuille:not(.pose){opacity:0;transform:translateY(48px) rotate(1.6deg)}
.calme .bloc .feuille:not(.pose){opacity:1;transform:none}
/* Écran large : les feuilles s'empilent dans une colonne qui reste à l'écran ; chaque texte, en passant au milieu, pose
   la sienne sur la pile, la précédente recule. */
.scenario{display:grid;grid-template-columns:1.6fr 1fr;gap:clamp(32px,4vw,64px);margin-top:clamp(40px,5vw,72px)}
.scenario .pile{position:sticky;top:110px;align-self:start;aspect-ratio:2160/1401}
.scenario .pile .feuille{position:absolute;inset:0 0 auto 0;opacity:0;transform:translateY(70px) rotate(2deg);transition:transform 1s var(--ease),opacity .8s var(--ease),filter .9s}
.scenario .pile .feuille.pose{opacity:1;transform:none}
.scenario .pile .feuille.dessous{opacity:0;transform:translateY(-40px) scale(.94)} /* 18/10 : la précédente s'efface, plus de captures superposées */
.scenario .pile .feuille.dessous .cadre{clip-path:inset(0 100% 0 0 round 10px)}
.scenario .textes .bloc{display:block;margin:0;min-height:62vh;padding:8vh 0;opacity:.72;transition:opacity .6s}
.scenario .textes .bloc.actif{opacity:1}
.scenario .textes .bloc:first-child{padding-top:0}
.scenario .textes .bloc:last-child{min-height:0;padding-bottom:0}
.note-photos{margin-top:28px;font-size:16px;color:#aab3ab}
@media(max-width:820px){.bloc,.bloc-inverse{grid-template-columns:1fr}.bloc-inverse picture,.bloc-inverse .feuille{order:0}}

/* ---------- réalisations ---------- */
.construit{background:radial-gradient(50% 40% at 12% 0%,rgba(232,189,98,.12),transparent 70%),var(--nuit2);isolation:isolate;overflow:hidden}
/* Le soir où tout est prêt : l'établi en grand, avant les réalisations. */
.soir{position:relative;display:grid;align-items:end;min-height:min(78vh,640px);margin:calc(-1 * clamp(80px,10vw,140px)) 0 clamp(56px,7vw,96px);overflow:hidden;isolation:isolate}
.soir picture,.soir img{position:absolute;inset:0;width:100%;height:100%}
.soir img{object-fit:cover;object-position:60% 55%;transition:transform 2.6s var(--ease)}
.soir::after{content:"";position:absolute;inset:0;z-index:0;background:linear-gradient(0deg,var(--nuit2) 0%,rgba(16,39,30,.82) 26%,rgba(16,39,30,0) 62%),linear-gradient(90deg,rgba(11,23,18,.78) 0%,rgba(11,23,18,0) 58%),radial-gradient(40% 50% at 64% 60%,rgba(232,189,98,.16),transparent 70%)}
.soir-txt{position:relative;z-index:1;padding-bottom:clamp(28px,4vw,48px)}
.soir-mot{max-width:24ch;font-family:var(--disp);font-weight:840;font-stretch:68%;font-size:clamp(38px,5vw,72px);line-height:.98;letter-spacing:-.01em;text-shadow:0 2px 24px rgba(5,10,7,.75)}
.soir-mot em{font-style:normal;background:url(../media/trait.svg) 0 100%/0% .2em no-repeat;padding-bottom:.06em;transition:background-size 1s var(--ease) 1.2s}
.soir.vu .soir-mot em,.calme .soir-mot em,html:not(.js) .soir-mot em{background-size:100% .2em}
.soir-credit{margin-top:14px;font-size:14px;color:#c8cfc7}
.soir-action{margin-top:22px}
.soir-releve{max-width:62ch;margin-top:22px;padding:12px 16px;border:1px solid rgba(143,214,180,.4);border-radius:8px;background:rgba(11,23,18,.72);backdrop-filter:blur(6px);font-size:16px;line-height:1.5;color:var(--doux)}
.soir-releve b{display:block;font-family:var(--mono);font-weight:700;font-size:13px;color:var(--menthe);margin-bottom:2px}
.soir-releve time{color:var(--ivoire);font-weight:700}
@media(max-width:820px){
  .soir{align-items:start;min-height:100svh}
  .soir img{object-position:50% 100%}
  .soir::after{background:linear-gradient(180deg,var(--nuit2) 0%,rgba(16,39,30,.88) 30%,rgba(16,39,30,0) 58%),linear-gradient(0deg,var(--nuit2) 0%,rgba(16,39,30,0) 14%)}
  .soir-txt{padding:clamp(88px,22vw,120px) 0 0}
}
.js .soir.apparait{opacity:1;transform:none}
.js .soir.apparait img{transform:scale(1.08)}
.js .soir.apparait .soir-mot{opacity:0;transform:translateY(24px);transition:opacity 1.1s var(--ease) .35s,transform 1.1s var(--ease) .35s}
.js .soir.vu img{transform:none}
.js .soir.vu .soir-mot{opacity:1;transform:none}

.real{background:linear-gradient(180deg,rgba(232,189,98,.05),transparent 40%),var(--nuit)}
.reals{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;margin-top:clamp(40px,5vw,64px)}
.real{display:grid;grid-template-rows:auto 1fr;background:var(--nuit);border:1px solid var(--trait);border-radius:10px;overflow:hidden}
.real-grand{grid-column:1/-1;grid-template-columns:1.5fr 1fr;grid-template-rows:none}
.real-media{position:relative;background:#050a07;overflow:hidden}
.real-film{width:100%;height:100%;aspect-ratio:16/10;object-fit:cover}
.real-media .pause{position:absolute;right:12px;top:12px}
.real-media-cuisine{display:grid;place-items:center;padding:28px 0 0;background:#12100d;height:340px}
.real-media-cuisine img{height:100%;width:auto;border-radius:8px 8px 0 0;box-shadow:0 20px 40px -18px #000}
.real-media-papier{display:grid;place-items:start center;padding:28px 0 0;background:#1a2a22;height:340px}
.real-media-papier img{width:78%;height:auto;border-radius:3px 3px 0 0;box-shadow:0 20px 40px -18px #000;transform:rotate(-1.2deg)}
.real-txt{padding:26px 26px 30px}
.real h3,.real-essai h3{font-family:var(--disp);font-weight:800;font-stretch:68%;font-size:clamp(22px,2vw,28px);letter-spacing:-.02em;line-height:1.1;margin-top:12px}
.real-txt>p:not(.statut):not(.legende){margin-top:10px;color:var(--doux)}
.real-essai p:not(.statut){margin:0;color:var(--doux);flex:1 1 30ch}
.legende{margin-top:14px;font-size:16px;color:#aab3ab}
.releve-banc{margin-top:16px;padding:12px 14px;border:1px solid rgba(143,214,180,.35);border-radius:8px;background:rgba(143,214,180,.06);font-size:16px;color:var(--doux)}
.releve-banc b{display:block;font-family:var(--mono);font-weight:700;font-size:13px;letter-spacing:.02em;color:var(--menthe);margin-bottom:2px}
.releve-banc time{color:var(--ivoire);font-weight:700}
.statut{display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-size:12px;letter-spacing:.04em;padding:5px 12px;border-radius:999px;border:1px solid currentColor}
.statut::before{content:"";width:8px;height:8px;border-radius:50%;background:currentColor}
.statut-service{color:var(--menthe)}
.statut-construit{color:var(--laiton-c)}
.statut-essai{color:#c8cfc7}
.statut-essai::before{background:none;border:1.5px solid currentColor}
.repere{grid-column:1/-1;padding:28px 28px 24px;border:1px solid var(--trait);border-radius:10px;background:radial-gradient(80% 120% at 0% 0%,rgba(217,164,65,.08),transparent 60%),var(--nuit)}
.repere h3{font-family:var(--disp);font-weight:800;font-stretch:68%;font-size:clamp(22px,2vw,28px);letter-spacing:-.02em;line-height:1.1}
.frise{position:relative;height:2px;margin:30px 8px 26px;background:var(--trait)}
.frise::before,.frise::after{content:"";position:absolute;top:-6px;width:14px;height:14px;border-radius:50%;background:var(--nuit);border:2px solid var(--laiton)}
.frise::before{left:-7px;background:var(--laiton)}.frise::after{right:-7px}
.frise-fait{position:absolute;left:0;top:0;height:2px;width:calc(100% * var(--av));background:var(--laiton);box-shadow:0 0 12px rgba(232,189,98,.6);transition:width 1.6s var(--ease)}
.frise-ici{position:absolute;top:-11px;left:calc(100% * var(--av));width:2px;height:24px;margin-left:-1px;background:var(--ivoire);transition:left 1.6s var(--ease)}
.frise-ici::after{content:"17 octobre";position:absolute;left:8px;top:-20px;font-family:var(--mono);font-size:12px;color:var(--ivoire);white-space:nowrap}
.frise-dates{list-style:none;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:12px 32px;color:var(--doux)}
.frise-dates li:last-child{text-align:right}
.frise-dates b{display:block;color:var(--ivoire);font-family:var(--mono);font-weight:700;font-size:14px;margin-bottom:4px}
.frise-dates span{display:block;margin-top:4px;color:var(--laiton-c)}
.repere-src{margin-top:16px;font-size:16px;color:#aab3ab}
@media(max-width:620px){.frise-dates{grid-template-columns:1fr}.frise-dates li:last-child{text-align:left}}
.real-essai{grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px;padding:18px 24px;border:1px dashed var(--trait);border-radius:10px}
@media(max-width:900px){.reals{grid-template-columns:1fr}.real-grand{grid-template-columns:1fr}}

/* ---------- comment ça se passe : le fil laiton ---------- */
.temps{list-style:none;padding:0;margin-top:clamp(44px,5vw,72px);display:grid;grid-template-columns:repeat(4,1fr);gap:28px;position:relative;--av:0}
.temps::before,.temps::after{content:"";position:absolute;left:0;top:11px;height:2px;border-radius:2px}
.temps::before{right:0;background:var(--trait)}
.temps::after{width:calc(100% * var(--av));background:linear-gradient(90deg,var(--laiton),var(--laiton-c));box-shadow:0 0 14px rgba(232,189,98,.55)}
.temps li{position:relative;padding-top:42px}
.temps li::before{content:"";position:absolute;left:0;top:2px;width:20px;height:20px;border-radius:50%;background:var(--nuit);border:2px solid var(--trait);transition:background-color .4s,border-color .4s,box-shadow .4s}
.temps li h3{font-family:var(--disp);font-weight:800;font-stretch:68%;font-size:22px;letter-spacing:-.015em;line-height:1.15;color:#aab3ab;transition:color .4s}
.temps li p{margin-top:8px;color:var(--doux);font-size:17px}
.temps li.allume::before,html:not(.js) .temps li::before{background:var(--laiton);border-color:var(--laiton);box-shadow:0 0 0 6px rgba(217,164,65,.16),0 0 18px rgba(232,189,98,.6)}
.temps li.allume h3,html:not(.js) .temps li h3{color:var(--ivoire)}
html:not(.js) .temps::after{width:100%}
@media(max-width:820px){
  .temps{grid-template-columns:1fr;gap:30px;padding-left:40px}
  .temps::before,.temps::after{left:10px;top:0;width:2px;height:auto;bottom:0}
  .temps::after{bottom:auto;height:calc(100% * var(--av));width:2px}
  html:not(.js) .temps::after{height:100%;width:2px}
  .temps li{padding-top:0}
  .temps li::before{left:-40px;top:3px}
}

/* ---------- ce qui ne change pas, questions ---------- */
.regles{background:radial-gradient(45% 45% at 88% 0%,rgba(232,189,98,.10),transparent 70%),var(--nuit2);isolation:isolate;overflow:hidden}
.regles-grille{display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px,6vw,90px)}
.tient{list-style:none;padding:0;margin-top:32px;display:grid;gap:16px}
.tient li{padding:16px 0 0;border-top:1px solid var(--trait);color:var(--doux)}
.tient b{color:var(--ivoire)}
.faq-titre{font-family:var(--disp);font-weight:840;font-stretch:68%;font-size:clamp(26px,2.6vw,34px);letter-spacing:-.025em;margin-bottom:16px}
.faq details{border-top:1px solid var(--trait)}
.faq details:last-child{border-bottom:1px solid var(--trait)}
.faq details+details{margin-top:8px}
.faq summary{display:flex;justify-content:space-between;gap:16px;align-items:center;min-height:56px;padding:12px 0;cursor:pointer;font-weight:700;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";flex:none;display:grid;place-items:center;width:28px;height:28px;border:1px solid var(--trait);border-radius:50%;font-family:var(--mono);color:var(--laiton-c);transition:transform .3s var(--ease)}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{padding:0 0 18px;color:var(--doux)}
@media(max-width:860px){.regles-grille{grid-template-columns:1fr}}

/* ---------- nous écrire ---------- */
.ecrire{background:var(--nuit);overflow:hidden;isolation:isolate}
.ecrire-fond{position:absolute;inset:0;z-index:-1;background:radial-gradient(40% 50% at 85% 30%,rgba(232,189,98,.13),transparent 70%)}
.ecrire-grille{display:grid;grid-template-columns:1fr 1fr;gap:clamp(36px,6vw,90px);align-items:start}
.tel{margin-top:18px;color:var(--doux)}
.tel a{font-weight:700;white-space:nowrap}
.formulaire{display:grid;gap:8px;padding:clamp(22px,3vw,34px);background:var(--nuit2);border:1px solid var(--trait);border-radius:12px}
.formulaire label{margin-top:10px;font-weight:700;font-size:16px}
.formulaire input,.formulaire textarea{width:100%;min-height:50px;padding:12px 14px;border:1px solid #6f8a7d;border-radius:8px;background:#0b1712;color:var(--ivoire);font:inherit;font-size:17px}
.formulaire textarea{resize:vertical;min-height:120px}
.formulaire input:focus,.formulaire textarea:focus{border-color:var(--laiton-c)}
.formulaire .bouton{margin-top:16px;justify-self:start}
.formulaire small{margin-top:8px;font-size:14px;color:#aab3ab}
.piege{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
@media(max-width:860px){.ecrire-grille{grid-template-columns:1fr}}

/* ---------- pied et famille ---------- */
.pied{padding:70px 0 34px;background:#070f0b;border-top:1px solid var(--trait);font-size:16px}
.pied-grille{display:grid;grid-template-columns:2fr 1fr;gap:40px}
.pied-grille>div>p{margin-top:14px;max-width:46ch;color:var(--doux)}
.pied h2{font-family:var(--mono);font-weight:400;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:#aab3ab;margin-bottom:12px}
.pied ul{list-style:none;padding:0;display:grid;gap:8px}
.pied a{color:var(--ivoire)}
.famille{grid-column:1/-1;margin-top:8px;padding:28px 0 6px;border-top:1px solid color-mix(in srgb,currentColor 16%,transparent)}
.fam-tete{display:flex;flex-wrap:wrap;align-items:center;gap:14px 28px;margin-bottom:22px}
.fam-ref{display:inline-flex;align-items:flex-end;gap:14px;text-decoration:none;color:inherit}
.fam-tete p{max-width:46ch;font-size:16px;line-height:1.5;opacity:.85}
.fam-tete p b{display:block;font-family:var(--mono);font-weight:400;font-size:11px;letter-spacing:.16em;text-transform:uppercase;margin-bottom:2px}
.fam-cartes{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);gap:12px;padding:0;margin:0}
.fam-carte a,.fam-carte.fam-ici{position:relative;display:flex;align-items:flex-end;gap:14px;height:100%;padding:16px 16px 14px;border-radius:16px;text-decoration:none;color:inherit;border:1px solid color-mix(in srgb,currentColor 14%,transparent);background:color-mix(in srgb,currentColor 4%,transparent);transition:border-color .3s,background-color .3s,transform .3s var(--ease)}
.fam-carte a:hover,.fam-carte a:focus-visible{border-color:var(--fam-c);background:color-mix(in srgb,var(--fam-c) 10%,transparent)}
@media(hover:hover){.fam-carte a:hover{transform:translateY(-3px)}.fam-carte a:hover em{transform:translateX(3px);opacity:1}}
.fam-carte.fam-ici{border-color:var(--fam-c);background:color-mix(in srgb,var(--fam-c) 12%,transparent)}
.fam-txt{display:flex;flex-direction:column;gap:2px;min-width:0}
.fam-txt b{font-family:var(--disp);font-weight:860;font-size:25px;line-height:1.05;margin-bottom:4px}
.fam-txt>span{font-size:14px;line-height:1.35;opacity:.88}
.fam-txt small{font-family:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;opacity:.75;margin-top:4px}
.fam-ici small{opacity:1;color:var(--fam-c)}
.fam-carte em{position:absolute;right:14px;top:12px;font-style:normal;font-family:var(--mono);opacity:.6;transition:transform .3s,opacity .3s}
.bas{grid-column:1/-1;display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px;padding-top:24px;font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:#aab3ab}
@media(max-width:980px){.fam-cartes{grid-template-columns:1fr 1fr}}
@media(max-width:620px){.pied-grille{grid-template-columns:1fr}.fam-cartes{grid-template-columns:1fr}}

/* ---------- apparitions au défilement (seulement avec script) ---------- */
.js .apparait{opacity:0;transform:translateY(26px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
/* Le statut de chaque réalisation se pose comme un tampon quand elle arrive ; la frise se remplit jusqu'au jour. */
.js:not(.calme) .tampon .statut{opacity:0;transform:scale(1.7) rotate(-9deg)}
.js .tampon.vu .statut{opacity:1;transform:rotate(-2deg);transition:transform .45s cubic-bezier(.3,1.6,.5,1) .2s,opacity .2s .2s}
.js:not(.calme) .repere:not(.vu) .frise-fait{width:0}
.js:not(.calme) .repere:not(.vu) .frise-ici{left:0}
.js .apparait.vu{opacity:1;transform:none}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .js .apparait{opacity:1;transform:none}
  .ouv-film{display:none}
  .ouv.attend .ouv-affiche{opacity:1}
  .ouv-nom{display:none!important}
  .papier{opacity:1!important;visibility:visible!important}
}
/* Petits écrans (hauteur 700 px et moins, ex. 320 × 640) : la feuille se resserre pour garder les six choix au premier écran. */
@media(max-width:700px) and (max-height:700px){
  .ouv-titre{font-size:42px}
  .ouv-sous{margin-top:4px}
  .ouv-action{margin-top:8px!important}.ouv-action .bouton{padding-block:12px}
  .choix{margin-top:8px;padding-top:6px}
  .choix label span{min-height:30px;padding:2px 0}
  .choix legend{margin-bottom:0}
  .ouv-credit{max-width:none;margin-bottom:6px}
  .papier{padding:12px 16px 8px}
  .ouv-contenu{padding-bottom:4px}
  /* Trop peu de hauteur pour poser la pièce sans couvrir le titre : la réponse s'écrit sous les choix. */
  .pieces{display:none}
  .choix-echo ul{position:static;width:auto;height:auto;overflow:visible;clip-path:none;white-space:normal}
}