/* =====================================================================
   Délégance · « L'Heure bleue »
   Feuille de style principale. Les composants des démonstrations
   (écrans, tablette, téléphone, Bureau PV) sont dans demos.css.
   ===================================================================== */

/* ---------- Polices (auto-hébergées, réduites au latin) ---------- */
@font-face{font-family:"Bricolage HB";src:url(../fonts/bricolage-hb.woff2) format("woff2");font-weight:300 600;font-stretch:75% 100%;font-display:swap}
@font-face{font-family:"Newsreader HB";src:url(../fonts/newsreader-hb.woff2) format("woff2");font-weight:300 500;font-style:normal;font-display:swap}
@font-face{font-family:"Newsreader HB";src:url(../fonts/newsreader-hb-italique.woff2) format("woff2");font-weight:300 400;font-style:italic;font-display:swap}
@font-face{font-family:"Plex HB";src:url(../fonts/plex-mono-hb.woff2) format("woff2");font-weight:400;font-display:swap}
/* Polices d'interface des démonstrations (chargées seulement si elles s'affichent) */
@font-face{font-family:"Brico";font-weight:600;font-display:swap;src:url(../fonts/bricolage-grotesque-latin-600-normal.woff2) format("woff2")}
@font-face{font-family:"Fig";font-weight:400;font-display:swap;src:url(../fonts/figtree-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"Fig";font-weight:500;font-display:swap;src:url(../fonts/figtree-latin-500-normal.woff2) format("woff2")}
@font-face{font-family:"Fig";font-weight:600;font-display:swap;src:url(../fonts/figtree-latin-600-normal.woff2) format("woff2")}
/* Polices de secours aux proportions proches : rien ne saute pendant le chargement */
@font-face{font-family:"Secours titre";src:local("Arial Narrow"),local("Helvetica Neue"),local("Arial");size-adjust:92%;ascent-override:96%}
@font-face{font-family:"Secours texte";src:local("Georgia"),local("Times New Roman");size-adjust:96%}

/* ---------- Jetons ---------- */
:root{
  /* Couleurs */
  --nuit-0:#050B0B;      /* générique, bandes cinéma */
  --nuit-1:#0A1514;      /* fond principal */
  --nuit-2:#0F1D1C;      /* scènes alternées */
  --nuit-3:#15302D;      /* survols */
  --papier:#F1ECE2;
  --papier-2:#FBF8F2;
  --encre-hb:#1F2328;
  --encre-2:#3D4448;
  --encre-3:#5A6166;
  --brume-hb:#A7BAB7;    /* texte secondaire sur nuit */
  --brume-2:#C9D3D1;
  --brume-3:#8FA4A1;     /* légendes */
  --elan-hb:#0F6B66;
  --elan-clair-hb:#6CCFC4;
  --lampe:#E0A85A;
  --rouille:#9A5B12;     /* « À faire » sur papier */
  --erreur-nuit:#F0A58A;
  --erreur-papier:#9A2B12;
  --filet:rgba(241,236,226,.14);
  --filet-papier:#CFC7B8;

  /* Typographie */
  --f-titre:"Bricolage HB","Secours titre","Arial Narrow",sans-serif;
  --f-texte:"Newsreader HB","Secours texte",Georgia,serif;
  --f-mono:"Plex HB",ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace;

  /* Mise en page */
  --large-max:1320px;
  --gouttiere:clamp(16px,4vw,48px);
  --silence:clamp(88px,11vw,170px);   /* espace entre deux scènes */
  --entete-h:88px;

  /* Mouvement (voir la bible du système d'animation) */
  --ease-elan:cubic-bezier(.22,.61,.36,1);
  --ease-pose:cubic-bezier(.65,0,.35,1);
  --ease-sortie:cubic-bezier(.55,0,1,.45);
  --d-instant:120ms; --d-rapide:300ms; --d-court:450ms; --d-base:700ms;
  --d-long:900ms; --d-scene:1200ms; --d-lumiere:1600ms;
  --ecart-mot:40ms; --ecart-liste:80ms; --ecart-ligne:120ms; --ecart-voix:150ms;
  --dist-xs:4px; --dist-s:10px; --dist-m:18px; --dist-l:22px;

  /* Noms attendus par demos.css (composants hérités du site actuel) */
  --encre:#1F2328; --elan:#0F6B66; --nuit:#12201F; --brume:#EEF3F2; --blanc:#FFFFFF;
  --gris:#4A5157; --elan-clair:#6CCFC4; --gris-clair:#B9C9C6; --trait:#D5E0DE;
  --titre:"Brico","Trebuchet MS",sans-serif; --texte:"Fig","Segoe UI",Arial,sans-serif;
  --mesure:68ch; --large:1160px;
}

/* ---------- Base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{background:var(--nuit-1);color:var(--papier);-webkit-text-size-adjust:100%;scroll-padding-top:72px;color-scheme:dark}
@media (prefers-reduced-motion:no-preference){html:not(.mouvement-reduit){scroll-behavior:smooth}}
body{margin:0;background:var(--nuit-1);color:var(--papier);font:340 1.1875rem/1.5 var(--f-texte);font-optical-sizing:auto;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;overflow-x:clip}
img,svg{display:block;max-width:100%}
img{height:auto}
a{color:var(--elan-clair-hb);text-underline-offset:.2em;text-decoration-thickness:1px}
a:hover{color:var(--papier)}
button{font:inherit;color:inherit}
h1,h2,h3,h4{margin:0;font-weight:inherit;text-wrap:balance}
p{margin:0}
ul,ol{margin:0;padding:0}
:focus-visible{outline:2px solid var(--elan-clair-hb);outline-offset:3px;border-radius:2px}
.sur-papier :focus-visible,.plein-papier :focus-visible,.formulaire :focus-visible,.methode-scene :focus-visible,.feuille :focus-visible,.confirmation :focus-visible{outline-color:var(--elan-hb)}
::selection{background:var(--elan-hb);color:#fff}
.evitement{position:absolute;left:-999px;top:12px;z-index:100;background:var(--papier);color:var(--nuit-1);padding:12px 18px;border-radius:999px;font:500 1rem/1 var(--f-titre);text-decoration:none}
.evitement:focus{left:12px}
.ancre{position:absolute;top:0;left:0;width:1px;height:1px}
.enveloppe{width:100%;max-width:var(--large-max);margin:0 auto;padding-inline:var(--gouttiere)}
em{font-family:var(--f-texte);font-style:italic;font-weight:300}

/* Grain photographique (ordinateur et tablette seulement) */
@media (min-width:768px){
  body::after{content:"";position:fixed;inset:0;z-index:90;pointer-events:none;opacity:.07;mix-blend-mode:overlay;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E")}
}

/* ---------- Typographie commune ---------- */
.surtitre,.legende-scene{font:400 .8125rem/1.4 var(--f-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--brume-hb)}
.legende-scene{margin-bottom:22px}
.titre-scene{font:300 clamp(2.75rem,5.4vw,5.25rem)/.95 var(--f-titre);font-stretch:80%;letter-spacing:-.035em;max-width:18ch}
.titre-scene em{display:inline;color:var(--elan-clair-hb);letter-spacing:-.02em}
.titre-moyen{font-size:clamp(2.5rem,4.4vw,4.25rem)}
.tete-texte{max-width:36ch;font-size:1.1875rem;color:var(--brume-hb)}
.tc{font:400 .8125rem/1 var(--f-mono);color:var(--lampe);letter-spacing:.04em}
.lien-fleche{display:inline-flex;align-items:center;min-height:44px;padding:0;border:0;background:none;cursor:pointer;font:500 1rem/1.2 var(--f-titre);color:var(--elan-clair-hb);text-decoration:none;transition:color var(--d-rapide) var(--ease-elan)}
.lien-fleche:hover{color:var(--papier)}
.lien-discret{border:0;background:none;padding:0;min-height:44px;cursor:pointer;color:inherit;font:inherit;text-decoration:underline;text-underline-offset:.2em;text-decoration-thickness:1px}
.lien-discret:hover{color:var(--papier)}

/* ---------- Boutons ---------- */
.bouton{display:inline-flex;align-items:center;justify-content:center;gap:12px;min-height:52px;padding:0 26px;border-radius:999px;border:0;cursor:pointer;font:500 1rem/1.1 var(--f-titre);text-decoration:none;text-align:center;
  transition:background-color var(--d-rapide) var(--ease-elan),box-shadow var(--d-rapide) var(--ease-elan),color var(--d-rapide) var(--ease-elan),transform var(--d-instant) var(--ease-elan)}
.bouton:active{transform:translateY(1px)}
.bouton svg{transition:transform 400ms var(--ease-elan)}
.bouton:hover svg{transform:translateX(var(--dist-xs))}
.bouton-plein{background:var(--papier);color:var(--nuit-1)}
.bouton-plein:hover{background:#fff;color:var(--nuit-1)}
.bouton-contour{background:transparent;color:var(--papier);box-shadow:inset 0 0 0 1px rgba(241,236,226,.32)}
.bouton-contour:hover{color:#fff;box-shadow:inset 0 0 0 1px var(--papier)}
.bouton-encre{background:var(--nuit-1);color:var(--papier)}
.bouton-encre:hover{background:#000;color:#fff}
.bouton-contour-encre{background:transparent;color:var(--encre-hb);box-shadow:inset 0 0 0 1px var(--encre-hb)}
.bouton-contour-encre:hover{background:var(--encre-hb);color:var(--papier)}
.bouton-cta{min-height:56px;padding:0 30px;font-size:1.0625rem}
.bouton-petit{min-height:44px;padding:0 20px;font-size:.9375rem}
.bouton-large{width:100%}
.bouton[aria-busy="true"]{opacity:.7;pointer-events:none}

/* ---------- En-tête ---------- */
.entete{position:fixed;inset:0 0 auto;z-index:50;height:var(--entete-h);transition:height var(--d-rapide) var(--ease-elan),background-color var(--d-rapide) var(--ease-elan),transform var(--d-court) var(--ease-elan)}
.entete-int{height:100%;max-width:var(--large-max);margin:0 auto;padding-inline:var(--gouttiere);display:flex;align-items:center;gap:28px}
.entete-logo{flex:none;display:flex;align-items:center;min-height:44px}
.entete-logo img{width:auto;height:32px}
.entete-nav{display:flex;gap:28px;margin-left:auto;font:400 .9375rem/1 var(--f-titre)}
.entete-nav a{color:var(--brume-hb);text-decoration:none;padding:14px 0;position:relative;transition:color var(--d-rapide) var(--ease-elan)}
.entete-nav a:hover,.entete-nav a[aria-current="true"]{color:var(--papier)}
.entete-nav a[aria-current="true"]::after{content:"";position:absolute;left:0;right:0;bottom:8px;height:1px;background:var(--papier)}
.entete-heure{font:400 .8125rem/1 var(--f-mono);letter-spacing:.08em;color:var(--lampe);font-variant-numeric:tabular-nums;min-width:8ch;text-align:right}
.entete-menu{display:none;width:44px;height:44px;border:0;background:none;cursor:pointer;align-items:center;justify-content:center;color:var(--papier)}
.entete.solide{height:64px;background:rgba(10,21,20,.92);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:0 1px 0 var(--filet)}
.entete.solide .entete-logo img{height:28px}
.entete.cachee{transform:translateY(-100%)}
@media (max-width:1199px){
  .entete-nav{display:none}
  .entete-heure{margin-left:auto}
  .entete-menu{display:inline-flex}
}
@media (max-width:767px){
  :root{--entete-h:72px}
  .entete-demo{display:none}
  .entete-logo img{height:24px}
  .entete-int{gap:12px}
}

/* ---------- Menu plein écran ---------- */
.menu{position:fixed;inset:0;width:100%;height:100%;max-width:none;max-height:none;margin:0;padding:0;border:0;background:var(--nuit-1);color:var(--papier)}
.menu::backdrop{background:var(--nuit-1)}
.menu-int{min-height:100%;display:flex;flex-direction:column;padding:16px var(--gouttiere) max(24px,env(safe-area-inset-bottom));max-width:720px;margin:0 auto}
.menu-haut{display:flex;justify-content:space-between;align-items:center}
.menu-fermer{width:44px;height:44px;border:0;background:none;cursor:pointer;display:flex;align-items:center;justify-content:center}
.menu-liens{list-style:none;margin-top:40px}
.menu-liens li{border-top:1px solid var(--filet)}
.menu-liens li:last-child{border-bottom:1px solid var(--filet)}
.menu-liens a{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:18px 0;color:var(--papier);text-decoration:none;font:300 clamp(2rem,7vw,2.75rem)/1.05 var(--f-titre);font-stretch:80%;letter-spacing:-.02em}
.menu-liens i{font:400 .75rem/1 var(--f-mono);font-style:normal;color:var(--lampe)}
.menu-liens i.froid{color:var(--elan-clair-hb)}
.menu-bas{margin-top:auto;padding-top:32px;display:flex;flex-direction:column;align-items:center;gap:8px}
.menu-mail{min-height:44px;display:flex;align-items:center;font:400 .9375rem/1 var(--f-titre)}
.menu[open] .menu-liens li{animation:voix-in 600ms var(--ease-elan) both}
.menu[open] .menu-liens li:nth-child(2){animation-delay:60ms}.menu[open] .menu-liens li:nth-child(3){animation-delay:120ms}
.menu[open] .menu-liens li:nth-child(4){animation-delay:180ms}.menu[open] .menu-liens li:nth-child(5){animation-delay:240ms}
@keyframes voix-in{from{opacity:0;transform:translateY(var(--dist-s))}to{opacity:1;transform:none}}
@keyframes fondu-in{from{opacity:0}to{opacity:1}}
.menu[open]{animation:fondu-in var(--d-rapide) var(--ease-elan)}

/* =====================================================================
   SCÈNE 1 · OUVERTURE
   ===================================================================== */
.ouverture{position:relative;min-height:max(760px,100svh);overflow:hidden;isolation:isolate;display:flex;flex-direction:column}
.decor{position:absolute;inset:0;z-index:-1;pointer-events:none}
.fenetre{position:absolute;right:max(6vw,calc(50% - 600px));top:clamp(80px,9vh,110px);width:clamp(230px,23vw,330px);aspect-ratio:330/410;border-radius:3px;
  background:linear-gradient(180deg,#1F5260 0%,#163C47 45%,#0F2A31 100%);
  box-shadow:inset 0 0 0 11px var(--nuit-1),inset 0 0 0 12px rgba(241,236,226,.10),0 0 160px -10px rgba(108,207,196,.22);
  transition:opacity var(--d-lumiere) var(--ease-pose)}
.fenetre i{position:absolute;background:var(--nuit-1)}
.fenetre i:nth-child(1){left:50%;top:11px;bottom:11px;width:7px;margin-left:-3px}
.fenetre i:nth-child(2){left:11px;right:11px;top:33%;height:7px}
.fenetre i:nth-child(3){left:11px;right:11px;top:66%;height:7px}
.coulee{position:absolute;inset:0;background:rgba(108,207,196,.07);clip-path:polygon(64% 52%,90% 52%,82% 100%,40% 100%);opacity:.55;transition:opacity var(--d-lumiere) var(--ease-pose)}
.bureau-plan{position:absolute;left:0;right:0;bottom:0;height:40%;background:linear-gradient(180deg,#0F1B1A 0%,#0B1615 100%);box-shadow:inset 0 1px 0 rgba(241,236,226,.07);-webkit-mask-image:linear-gradient(90deg,transparent 0%,transparent 42%,#000 70%);mask-image:linear-gradient(90deg,transparent 0%,transparent 42%,#000 70%)}
.flaque{position:absolute;left:68%;bottom:-6%;width:min(66vw,980px);height:min(46vh,420px);transform:translateX(-50%);border-radius:50%;
  background:radial-gradient(closest-side,rgba(224,168,90,.34),rgba(224,168,90,.10) 55%,rgba(224,168,90,0) 100%);transition:opacity var(--d-lumiere) var(--ease-pose)}
/* La lampe est accrochée à la feuille : abat-jour au-dessus, pied sur le bureau à droite */
.lampe{position:absolute;left:-103px;top:-285px;width:688px;height:auto;max-width:none;overflow:visible;z-index:-1;pointer-events:none}
.lampe-faisceau,.lampe-cercle{transition:opacity var(--d-lumiere) var(--ease-pose)}

.ouverture-int{flex:1;width:100%;max-width:var(--large-max);margin:0 auto;padding:calc(var(--entete-h) + clamp(32px,8vh,96px)) var(--gouttiere) 24px;
  display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:56px;align-items:start}
.ouverture-texte{display:flex;flex-direction:column;gap:26px;max-width:680px;position:relative;z-index:2}
.titre-ouverture{font:300 clamp(3.4rem,8.2vw,7.4rem)/.9 var(--f-titre);font-stretch:76%;letter-spacing:-.045em}
.titre-ouverture .ligne{display:block;overflow:hidden;padding-bottom:.04em}
.titre-ouverture .ligne > span{display:block}
.titre-ouverture .ligne-voix{font-family:var(--f-texte);font-style:italic;font-size:.78em;line-height:1.08;letter-spacing:-.025em;color:var(--brume-hb);transition:color var(--d-long) var(--ease-elan)}
.ouverture.confie .ligne-voix{color:var(--elan-clair-hb)}
.chapo{max-width:31ch;font-size:clamp(1.125rem,1.6vw,1.375rem);line-height:1.42;color:#D9D4CA;font-weight:300}
.actions{display:flex;flex-wrap:wrap;gap:14px;align-items:center}
.microtexte{margin-top:-8px;font:400 .8125rem/1.4 var(--f-mono);letter-spacing:.03em;color:var(--brume-3)}
.ligne-preuve{position:relative;z-index:2;width:100%;max-width:var(--large-max);margin:0 auto;padding:0 var(--gouttiere) 34px;font:400 .875rem/1.4 var(--f-titre);color:var(--brume-3)}

/* La feuille */
.feuille-zone{align-self:end;justify-self:center;width:min(440px,100%);margin-bottom:clamp(8px,4vh,48px);perspective:1300px;position:relative;z-index:2}
.feuille{background:var(--papier);color:var(--encre-hb);border-radius:3px;padding:26px 30px 18px;transform-origin:50% 100%;transform:rotateX(22deg) rotateZ(-4deg);
  box-shadow:0 60px 70px -40px rgba(0,0,0,.9),0 0 140px -30px rgba(224,168,90,.45);transition:transform var(--d-scene) var(--ease-elan),opacity var(--d-long) var(--ease-elan),box-shadow var(--d-scene) var(--ease-elan)}
.feuille-tete{display:flex;justify-content:space-between;align-items:baseline;border-bottom:1px solid var(--filet-papier);padding-bottom:10px;margin-bottom:6px}
.feuille-tete h2,.feuille-tete > span:first-child{font:600 .875rem/1 var(--f-titre)}
.feuille-tete > span:last-child{font:400 .75rem/1 var(--f-mono);color:var(--encre-3)}
.taches{list-style:none}
.tache{display:grid;grid-template-columns:48px minmax(0,1fr) auto;gap:10px;align-items:baseline;width:calc(100% + 16px);min-height:44px;margin:0 -8px;padding:8px;border:0;border-radius:2px;background:transparent;color:var(--encre-hb);text-align:left;cursor:default;
  transition:background-color 400ms var(--ease-elan),opacity var(--d-long) var(--ease-elan),transform var(--d-long) var(--ease-elan)}
.tache:hover,.tache:focus-visible,.tache.survol{background:rgba(15,107,102,.08)}
.tache .tc{color:#5A6166;font-size:.6875rem}
.tache .txt{font-size:1.03rem;line-height:1.3}
.tache .etat{font:600 .6875rem/1 var(--f-titre);letter-spacing:.05em;text-transform:uppercase;color:var(--rouille);white-space:nowrap}
.tache.survol .etat,.tache.confie .etat{color:var(--elan-hb)}
.tache.confie{opacity:.4;transform:translateX(var(--dist-m))}
.feuille-pied{margin-top:10px;padding-top:12px;border-top:1px solid var(--filet-papier);font-style:italic;color:var(--elan-hb)}
.indice{margin-top:20px;font:400 .75rem/1.4 var(--f-mono);letter-spacing:.04em;color:var(--brume-3);min-height:1.4em;transition:color var(--d-rapide) var(--ease-elan)}
.indice.actif{color:var(--elan-clair-hb)}

/* États de lumière */
.ouverture.confie .flaque,.ouverture.confie .lampe-faisceau{opacity:.22}
.ouverture.confie .lampe-cercle{opacity:.3}
.ouverture.confie .coulee{opacity:1}
.ouverture.cta-survol .coulee{opacity:.85}

/* --- Entrée (seulement avec JavaScript et sans « réduire les animations ») --- */
html.js:not(.mouvement-reduit) .ouverture:not(.entree-faite) .entree{opacity:0;transform:translateY(var(--dist-l))}
html.js:not(.mouvement-reduit) .ouverture:not(.entree-faite) .ligne.entree{opacity:1;transform:none}
html.js:not(.mouvement-reduit) .ouverture:not(.entree-faite) .ligne.entree > span{transform:translateY(105%)}
html.js:not(.mouvement-reduit) .ouverture:not(.entree-faite) .entree-feuille{opacity:0;transform:rotateX(48deg) rotateZ(-10deg) translateY(-60px)}
html.js:not(.mouvement-reduit) .ouverture:not(.entree-faite) .fenetre{opacity:.25}
html.js:not(.mouvement-reduit) .ouverture:not(.entree-faite) .coulee,
html.js:not(.mouvement-reduit) .ouverture:not(.entree-faite) .flaque,
html.js:not(.mouvement-reduit) .ouverture:not(.entree-faite) .lampe-faisceau,
html.js:not(.mouvement-reduit) .ouverture:not(.entree-faite) .lampe-cercle{opacity:0}
html.js .ouverture.entree-faite .entree{transition:opacity var(--d-long) var(--ease-elan),transform var(--d-long) var(--ease-elan);transition-delay:calc(250ms + var(--i,0) * 130ms)}
html.js .ouverture.entree-faite .ligne.entree > span{transition:transform var(--d-base) var(--ease-elan);transition-delay:calc(250ms + var(--i,0) * 130ms)}
html.js .ouverture.entree-faite .entree-feuille{transition:transform var(--d-scene) var(--ease-elan) 900ms,opacity var(--d-long) var(--ease-elan) 900ms}
html.js .ouverture.entree-faite .fenetre{transition-delay:0ms}
html.js .ouverture.entree-faite .flaque,html.js .ouverture.entree-faite .lampe-faisceau,html.js .ouverture.entree-faite .lampe-cercle{transition-delay:300ms}
/* Visite suivante dans la session : entrée courte, tout ensemble */
html.js:not(.premiere-visite) .ouverture.entree-faite .entree,
html.js:not(.premiere-visite) .ouverture.entree-faite .ligne.entree > span,
html.js:not(.premiere-visite) .ouverture.entree-faite .entree-feuille{transition-duration:600ms;transition-delay:0ms}
html.js:not(.premiere-visite) .ouverture.entree-faite .fenetre,html.js:not(.premiere-visite) .ouverture.entree-faite .flaque{transition-delay:0ms;transition-duration:600ms}
/* Une fois l'entrée terminée, les transitions reprennent leur rythme normal */
html.js .ouverture.entree-finie .entree,html.js .ouverture.entree-finie .ligne.entree > span,html.js .ouverture.entree-finie .entree-feuille,
html.js .ouverture.entree-finie .fenetre,html.js .ouverture.entree-finie .flaque,html.js .ouverture.entree-finie .lampe-faisceau,html.js .ouverture.entree-finie .lampe-cercle{transition-delay:0ms}

/* Ordinateur portable peu haut (ex. 1536 × 674) : le bouton principal reste dans le premier écran */
@media (min-width:1200px) and (max-height:820px){
  .ouverture-int{padding-top:calc(var(--entete-h) + 20px)}
  .ouverture-texte{gap:18px}
  .titre-ouverture{font-size:clamp(3.4rem,12.5vh,7.4rem)}
  .chapo{font-size:1.125rem}
  .feuille-zone{margin-bottom:8px}
  .lampe{left:-71px;top:-259px;width:602px}
  .ligne-preuve{padding-bottom:20px}
}

/* Tablette */
@media (max-width:1199px){
  .ouverture-int{grid-template-columns:minmax(0,1fr);gap:40px;padding-top:calc(var(--entete-h) + 40px)}
  .lampe,.fenetre{display:none}
  .decor::before{content:"";position:absolute;right:-180px;top:-200px;width:620px;height:620px;border-radius:50%;background:radial-gradient(closest-side,rgba(108,207,196,.2),rgba(15,107,102,0) 100%)}
  .feuille-zone{justify-self:end;margin-right:4%;width:min(420px,100%)}
  .flaque{left:70%;bottom:-10%}
  .coulee{display:none}
}
/* Téléphone */
@media (max-width:767px){
  .ouverture{min-height:auto}
  .fenetre,.bureau-plan{display:none}
  .decor::before{content:"";position:absolute;right:-150px;top:-170px;width:440px;height:440px;border-radius:50%;background:radial-gradient(closest-side,rgba(108,207,196,.22),rgba(15,107,102,0) 100%)}
  .flaque{left:40%;bottom:auto;top:52%;width:640px;height:520px}
  .ouverture-int{padding-top:calc(var(--entete-h) + 18px);gap:28px}
  .ouverture-texte{gap:18px}
  .titre-ouverture{font-size:clamp(3rem,15vw,3.75rem)}
  .feuille-zone{justify-self:stretch;margin:4px 6px 0 14px;width:auto;perspective:none}
  .feuille{transform:rotate(-2.5deg);padding:18px 20px 12px}
  html.js:not(.mouvement-reduit) .ouverture:not(.entree-faite) .entree-feuille{transform:rotate(-6deg) translateY(-30px)}
  .tache{grid-template-columns:minmax(0,1fr) auto}
  .tache .tc{display:none}
  .ligne-preuve{padding-bottom:28px;padding-top:28px}
  .indice{margin-left:4px}
}

/* =====================================================================
   SCÈNE 2 · LE BRUIT (épinglée sur grand écran)
   ===================================================================== */
.bruit{position:relative;background:var(--nuit-1)}
.bruit-scene{padding-block:var(--silence)}
.voix{list-style:none;display:flex;flex-wrap:wrap;align-items:baseline;column-gap:.5em;row-gap:8px;font:300 clamp(1.75rem,3.6vw,3.375rem)/1.18 var(--f-texte);font-style:italic;letter-spacing:-.01em}
.voix li{transition:opacity 600ms var(--ease-elan),transform 600ms var(--ease-elan)}
.voix .tc{font-style:normal;font-size:.8125rem;vertical-align:.4em;margin-right:.35em}
.voix-proche{color:var(--papier)}
.voix-moyenne{color:var(--brume-hb);font-size:.92em}
.voix-loin{color:#7F928F;font-size:.84em}
.bruit-bas{margin-top:clamp(56px,8vw,96px);display:flex;flex-wrap:wrap;justify-content:space-between;align-items:end;gap:40px;transition:opacity 600ms var(--ease-elan),transform 600ms var(--ease-elan)}
.bruit-bas .titre-scene{max-width:16ch;font-size:clamp(2.5rem,4.6vw,4.5rem)}
.bruit-bas > div{max-width:38ch;display:flex;flex-direction:column;gap:14px;color:var(--brume-hb);font-size:1.25rem}
html.js:not(.mouvement-reduit) .bruit [data-voix]:not(.on){opacity:0;transform:translateY(6px)}
@media (min-width:1200px) and (min-height:700px){
  html.js:not(.mouvement-reduit) .bruit{height:220vh}
  html.js:not(.mouvement-reduit) .bruit-scene{position:sticky;top:0;height:100vh;display:flex;align-items:center;padding-block:0}
}
@media (max-width:767px){
  .voix{flex-direction:column;align-items:flex-start;row-gap:18px;font-size:1.75rem}
  .voix .tc{display:block;vertical-align:0;margin-bottom:6px}
  .voix-moyenne,.voix-loin{font-size:1.6rem}
}

/* =====================================================================
   SCÈNE 3 · LES QUATRE PÔLES
   ===================================================================== */
.poles{position:relative;background:var(--nuit-2);padding-block:var(--silence)}
.poles::before{content:"";position:absolute;inset:0 0 auto;height:200px;background:linear-gradient(var(--nuit-1),var(--nuit-2));pointer-events:none}
.poles .enveloppe{position:relative}
.tete-scene{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:end;gap:32px;margin-bottom:72px}
.poles-grille{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;border-top:1px solid var(--filet);border-left:1px solid var(--filet)}
.pole{background:var(--nuit-2);border-right:1px solid var(--filet);border-bottom:1px solid var(--filet);padding:40px 30px 30px;display:flex;flex-direction:column;gap:20px;transition:background-color 600ms var(--ease-pose)}
.pole:hover,.pole:focus-within{background:var(--nuit-3)}
.plan{font:400 .78rem/1 var(--f-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--lampe);transition:color 600ms var(--ease-pose)}
.pole:hover .plan{color:var(--papier)}
.pole h3{font:500 1.75rem/1.08 var(--f-titre);letter-spacing:-.02em}
.pole > p{font-size:1.125rem;line-height:1.5;color:var(--brume-2);font-weight:380;flex:1}
/* Quatre colonnes étroites : texte un peu resserré pour que le justifié ne creuse pas de blancs */
@media (min-width:1200px){.pole{padding-inline:24px}.pole > p{font-size:1.03rem;line-height:1.55;word-spacing:-.02em}}
.pole-ouvrir{margin-top:auto;display:flex;justify-content:space-between;align-items:center;width:100%;min-height:48px;padding:14px 0 0;border:0;border-top:1px solid var(--filet);background:none;cursor:pointer;font:500 .9375rem/1 var(--f-titre);color:var(--brume-hb);text-align:left;transition:color var(--d-rapide) var(--ease-elan)}
.pole-ouvrir:hover{color:var(--papier)}
.pole-ouvrir span{font:400 1.25rem/1 var(--f-mono)}
.pole-detail{display:flex;flex-direction:column;gap:18px}
.pole-detail ul{list-style:none;display:flex;flex-direction:column;gap:10px}
.pole-detail li{position:relative;padding-left:18px;font-size:1.0625rem;line-height:1.45;color:var(--brume-2)}
.pole-detail li::before{content:"";position:absolute;left:0;top:.7em;width:8px;height:1px;background:var(--lampe)}
.pole-actions{display:flex;flex-wrap:wrap;gap:8px 18px;align-items:center}
html.js .pole .pole-detail[hidden]{display:none}
/* Fiches « relais » : la tâche du soir, puis ce qu'elle devient une fois confiée */
.relais{display:flex;flex-direction:column;gap:8px;min-height:148px;padding:14px 16px;border-radius:3px;background:rgba(241,236,226,.035);box-shadow:inset 0 0 0 1px var(--filet)}
.relais-tc{font:400 .6875rem/1.3 var(--f-mono);color:var(--brume-3);letter-spacing:.03em}
.relais-tc span{color:var(--lampe)}
.relais-brut{font-style:italic;font-size:1rem;line-height:1.45;color:var(--papier);font-weight:340}
.relais-brut s{text-decoration:none;transition:color 800ms var(--ease-elan),opacity 800ms var(--ease-elan)}
.relais-net{margin-top:auto;font-size:1rem;line-height:1.4;color:var(--elan-clair-hb);font-weight:380;transition:opacity var(--d-long) var(--ease-elan) 900ms,transform var(--d-long) var(--ease-elan) 900ms}
.relais-net::before{content:"\2192\00a0";font-family:var(--f-mono);font-size:.8em}
.relais.net .relais-brut s{text-decoration:line-through;text-decoration-thickness:1px;color:var(--lampe);opacity:.55}
html.js:not(.mouvement-reduit) .relais:not(.net) .relais-net{opacity:0;transform:translateY(var(--dist-s))}
html.mouvement-reduit .relais .relais-brut s{text-decoration:line-through;color:var(--lampe);opacity:.6}
.pole:hover .relais{box-shadow:inset 0 0 0 1px rgba(108,207,196,.28)}
@media (max-width:1199px){
  .poles-grille{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pole{min-height:0}
}
@media (max-width:767px){
  .poles-grille{grid-template-columns:minmax(0,1fr);border:0}
  .pole{padding:22px 0;min-height:0;gap:12px;border:0;border-top:1px solid var(--filet);background:none}
  .pole:hover,.pole:focus-within{background:none}
  .pole h3{font-size:1.375rem}
  .relais{min-height:0}
  .pole-ouvrir{border-top:0;padding-top:4px}
  .tete-scene{margin-bottom:28px}
}

/* Panneau latéral (détail d'un pôle, ordinateur et tablette) */
.panneau{position:fixed;inset:0 0 0 auto;width:min(520px,100%);height:100%;max-height:none;max-width:none;margin:0 0 0 auto;padding:0;border:0;background:var(--nuit-2);color:var(--papier);box-shadow:-40px 0 80px rgba(0,0,0,.5)}
.panneau::backdrop{background:rgba(5,11,11,.6)}
.panneau[open]{animation:panneau-in var(--d-base) var(--ease-elan)}
@keyframes panneau-in{from{transform:translateX(40px);opacity:0}to{transform:none;opacity:1}}
.panneau-int{padding:28px 36px 40px;display:flex;flex-direction:column;gap:22px;min-height:100%}
.panneau-haut{display:flex;justify-content:space-between;align-items:center}
.panneau h2{font:500 2rem/1.05 var(--f-titre);letter-spacing:-.02em}

/* =====================================================================
   SCÈNE 4 · LES PREUVES
   ===================================================================== */
.preuves{position:relative;padding-block:var(--silence);background:var(--nuit-1)}
.preuves .titre-scene{margin-bottom:clamp(48px,7vw,96px)}
.preuves-grille{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:64px;align-items:start}
.preuve{margin:0;display:flex;flex-direction:column;gap:28px}
.preuve-decalee{margin-top:140px}
.cadre-cinema{position:relative;background:var(--nuit-0);padding:34px 0;border-radius:3px;overflow:hidden}
.cadre-cinema img{width:100%;aspect-ratio:2.39/1;object-fit:cover;object-position:50% 62%;filter:saturate(.85) brightness(.92);transition:transform var(--d-scene) var(--ease-elan)}
.cadre-cinema img.cadre-gauche{object-position:left top;filter:brightness(.82) saturate(.9)}
.preuve:hover .cadre-cinema img.cadre-gauche{filter:brightness(.95)}
.cadre-cinema{cursor:pointer}
.cadre-cinema > img{transition:transform var(--d-scene) var(--ease-elan),filter var(--d-long) var(--ease-elan)}
.preuve .lien-fleche{transition:color var(--d-rapide) var(--ease-elan),letter-spacing var(--d-rapide) var(--ease-elan)}
.preuve:hover .lien-fleche{color:var(--papier)}
.cadre-haut,.cadre-bas{position:absolute;font:400 .6875rem/1 var(--f-mono);letter-spacing:.1em;text-transform:uppercase}
.cadre-haut{left:18px;top:12px;color:var(--brume-3)}
.cadre-bas{right:18px;bottom:11px;color:var(--lampe)}
.cadre-cinema::before,.cadre-cinema::after{content:"";position:absolute;left:0;right:0;height:0;background:var(--nuit-0);z-index:1;transition:height 600ms var(--ease-elan)}
.cadre-cinema::before{top:34px}.cadre-cinema::after{bottom:34px}
html.js:not(.mouvement-reduit) [data-reveal="cinema"]:not(.visible) .cadre-cinema::before,
html.js:not(.mouvement-reduit) [data-reveal="cinema"]:not(.visible) .cadre-cinema::after{height:calc(50% - 34px)}
html.js:not(.mouvement-reduit) [data-reveal="cinema"]:not(.visible) .cadre-cinema img{transform:scale(1.06)}
.preuve:hover .cadre-cinema img{transform:scale(1.02)}
.preuve figcaption{display:flex;flex-direction:column;gap:12px;align-items:flex-start}
.preuve h3{font:500 1.875rem/1.1 var(--f-titre);letter-spacing:-.02em}
.preuve p{font-size:1.1875rem;color:var(--brume-2);max-width:46ch;font-weight:380}
@media (max-width:1199px){.preuve-decalee{margin-top:0}.preuves-grille{gap:40px}}
@media (max-width:767px){
  .preuves-grille{grid-template-columns:minmax(0,1fr);gap:56px}
  .cadre-cinema{padding:22px 0}
  .cadre-cinema::before{top:22px}.cadre-cinema::after{bottom:22px}
  .cadre-cinema img{aspect-ratio:4/3}
  .cadre-haut{top:6px;left:10px}.cadre-bas{bottom:5px;right:10px}
  .preuve h3{font-size:1.5rem}
}

/* Plein écran des preuves (sur papier) */
.plein{position:fixed;inset:0;width:100%;height:100%;max-width:none;max-height:none;margin:0;padding:0;border:0;background:var(--nuit-0);color:var(--encre-hb);overflow:hidden}
.plein::backdrop{background:var(--nuit-0)}
.plein[open]{display:flex;flex-direction:column;animation:fondu-in var(--d-court) var(--ease-elan)}
.plein[open] .plein-papier{animation:plein-in var(--d-base) var(--ease-elan)}
@keyframes plein-in{from{opacity:0;transform:translateY(var(--dist-l))}to{opacity:1;transform:none}}
.plein-barre{flex:none;display:flex;justify-content:space-between;align-items:center;gap:16px;height:60px;padding:0 var(--gouttiere);color:var(--papier)}
.plein-legende{font:400 .75rem/1 var(--f-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--brume-3)}
.plein-fermer{display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:0 16px;border:0;border-radius:999px;background:rgba(241,236,226,.08);cursor:pointer;font:500 .9375rem/1 var(--f-titre);color:var(--papier)}
.plein-fermer:hover{background:rgba(241,236,226,.16)}
.plein-papier{flex:1;overflow-y:auto;overscroll-behavior:contain;background:var(--papier);border-radius:6px 6px 0 0;font-family:var(--texte);font-size:1.0625rem;line-height:1.6}
.plein-int{max-width:1160px;margin:0 auto;padding:clamp(40px,6vw,80px) 24px 80px}
.plein-titre{font:300 clamp(2.25rem,4.4vw,3.75rem)/1 var(--f-titre);font-stretch:80%;letter-spacing:-.03em;color:var(--encre-hb);max-width:20ch}
.plein-intro{margin-top:18px;max-width:62ch;font:340 1.25rem/1.5 var(--f-texte);color:var(--encre-2)}
.plein .note-fictif{margin-top:14px}
.plein .cas h3,.plein .demo h4,.plein .li-liste h4{font-family:var(--f-titre);font-weight:500}
.plein .btn{display:inline-flex;align-items:center;min-height:48px;padding:0 22px;border-radius:999px;background:var(--nuit-1);color:var(--papier);text-decoration:none;font:500 .9375rem/1 var(--f-titre)}
.plein .btn:hover{background:#000;color:#fff}
.plein .cas-texte p,.plein .etapes-demo li,.plein .atouts span,.plein .li-liste li{color:var(--encre-2)}
.plein-appel{margin-top:64px;display:flex;flex-wrap:wrap;gap:18px 28px;align-items:center;justify-content:space-between;padding:26px 30px;border-radius:4px;background:var(--papier-2);box-shadow:inset 0 0 0 1px var(--filet-papier)}
.plein-appel p{font:500 1.25rem/1.35 var(--f-titre);max-width:40ch;color:var(--encre-hb)}
.plein .rejouer{color:var(--elan-hb);font-family:var(--f-titre)}
.plein .bureau-onglets button{font-family:var(--f-titre);min-height:44px}
html.plein-ouvert{overflow:hidden}

/* =====================================================================
   SCÈNE 5 · LA MÉTHODE (pleine lumière)
   ===================================================================== */
.methode-scene{background:var(--papier);color:var(--encre-hb);padding-block:var(--silence)}
.methode-scene .legende-scene{color:var(--encre-3)}
.methode-scene .titre-scene{max-width:20ch;margin-bottom:clamp(48px,6vw,88px)}
.methode-scene .titre-scene em{color:var(--elan-hb)}
.etapes-hb{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:48px}
.etapes-hb li{position:relative;display:flex;flex-direction:column;gap:16px;padding-top:26px}
.etapes-hb li::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:var(--encre-hb);transform-origin:left;transition:transform var(--d-long) var(--ease-elan) calc(var(--i,0) * 300ms)}
html.js:not(.mouvement-reduit) .etapes-hb li:not(.visible)::before{transform:scaleX(0)}
.etapes-hb .tc{color:var(--elan-hb)}
.etape-num{font:300 clamp(3.5rem,6vw,5.5rem)/.85 var(--f-titre);font-stretch:76%;letter-spacing:-.04em;color:var(--elan-hb);margin-bottom:8px}
.etapes-hb h3{font:500 1.75rem/1.1 var(--f-titre);letter-spacing:-.02em}
.etapes-hb p{font-size:1.1875rem;color:var(--encre-2);font-weight:380;max-width:32ch}
.methode-scene .bouton-encre{margin-top:72px;min-height:56px;padding:0 30px;font-size:1.0625rem}
@media (max-width:1199px){.etapes-hb{gap:28px}}
@media (max-width:767px){
  .etapes-hb{grid-template-columns:minmax(0,1fr);gap:0;border-left:1px solid var(--encre-hb);margin-left:6px}
  .etapes-hb li{padding:0 0 32px 22px}
  .etapes-hb li::before{display:none}
  .methode-scene .bouton-encre{margin-top:24px;width:100%}
}

/* =====================================================================
   SCÈNE 6 · LA CONFIANCE
   ===================================================================== */
.confiance-scene{position:relative;padding-block:var(--silence);background:var(--nuit-1)}
.confiance-scene::before{content:"";position:absolute;inset:0 0 auto;height:1px;background:linear-gradient(90deg,transparent,rgba(224,168,90,.45),transparent);pointer-events:none}
.confiance-grille{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:64px;align-items:start}
.confiance-tete{display:flex;flex-direction:column;gap:22px;align-items:flex-start}
.confiance-tete .legende-scene{margin-bottom:0}
@media (min-width:1200px){.confiance-tete{position:sticky;top:120px}}
.engagements-hb{list-style:none}
.engagements-hb li{display:grid;grid-template-columns:56px minmax(0,1fr);gap:16px;padding:28px 0;border-top:1px solid var(--filet)}
.engagements-hb li:last-child{border-bottom:1px solid var(--filet)}
.engagements-hb .num{font:400 .8125rem/1.6 var(--f-mono);color:var(--lampe)}
.engagements-hb h3{font:500 1.375rem/1.25 var(--f-titre);margin-bottom:8px}
.engagements-hb p{font-size:1.125rem;color:var(--brume-2);font-weight:380;max-width:52ch}
@media (max-width:1199px){.confiance-grille{grid-template-columns:minmax(0,1fr);gap:40px}}

/* =====================================================================
   GÉNÉRIQUE ET DEMANDE
   ===================================================================== */
.generique{position:relative;overflow:hidden;background:var(--nuit-0);padding-block:var(--silence) 120px}
.generique::before{content:"";position:absolute;inset:0 0 auto;height:200px;background:linear-gradient(var(--nuit-1),var(--nuit-0));pointer-events:none}
.generique::after{content:"";position:absolute;left:50%;bottom:-560px;width:1300px;height:1000px;margin-left:-650px;border-radius:50%;background:radial-gradient(closest-side,rgba(15,107,102,.42),rgba(15,107,102,.10) 55%,rgba(15,107,102,0) 100%);pointer-events:none}
.generique .enveloppe{position:relative;z-index:1}
.credits{text-align:center;display:flex;flex-direction:column;align-items:center}
.credits .legende-scene{letter-spacing:.24em;color:var(--brume-3)}
.credits dl{margin:12px 0 0;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.35fr);column-gap:36px;row-gap:22px;width:min(920px,100%);text-align:left}
.credits dl > div{display:contents}
.credits dt{text-align:right;padding-top:.55em}
.credits dd{margin:0 !important}
.credits dt{font:400 .78rem/1 var(--f-titre);letter-spacing:.2em;text-transform:uppercase;color:var(--brume-3)}
.credits dd{margin:8px 0 0;font:400 1.375rem/1.35 var(--f-titre);color:var(--papier)}
.credits .credit-nom{font-size:1.875rem;font-weight:500;letter-spacing:-.01em}
.credits .credit-italique{font:300 1.5rem/1.35 var(--f-texte);font-style:italic;color:#D9D4CA}
.credits .credit-texte{font:340 1.1875rem/1.5 var(--f-texte);color:var(--brume-2)}
.demande-grille{margin-top:clamp(80px,10vw,140px);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,600px);gap:80px;align-items:center}
.demande-texte{display:flex;flex-direction:column;gap:24px}
.heure-finale{font:300 clamp(4.5rem,11vw,10rem)/.86 var(--f-titre);font-stretch:76%;letter-spacing:-.045em}
.titre-demande{font:300 clamp(1.75rem,2.6vw,2.375rem)/1.15 var(--f-texte);font-style:italic;color:var(--elan-clair-hb)}
.demande-texte > p{max-width:40ch;color:var(--brume-hb)}
.rassurances{list-style:none;display:flex;flex-direction:column;gap:8px;font:400 .9375rem/1.4 var(--f-titre);color:var(--brume-2)}
.rassurances li::before{content:"— ";color:var(--lampe)}
.autres-contacts{display:flex;flex-wrap:wrap;align-items:center;gap:4px 20px;padding-top:20px;border-top:1px solid var(--filet);font:400 .9375rem/1.3 var(--f-titre);color:var(--brume-3)}
.autres-contacts a{min-height:44px;display:inline-flex;align-items:center}
.copie-retour{color:var(--elan-clair-hb);min-width:6ch}

.demande-feuille{position:relative}
.formulaire,.confirmation{background:var(--papier);color:var(--encre-hb);border-radius:3px;padding:36px 38px 30px;box-shadow:0 50px 90px -30px rgba(0,0,0,.85)}
@media (min-width:1200px){.formulaire{transform:rotate(-.5deg)}.confirmation{transform:rotate(-2deg)}}
.formulaire{display:flex;flex-direction:column;gap:18px}
.champ-groupe{border:0;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.champ-groupe legend,.champ label{font:500 .875rem/1.3 var(--f-titre);color:var(--encre-hb);padding:0}
.champ-groupe legend{margin-bottom:10px}
.facultatif{font-weight:400;color:var(--encre-3)}
.puces{display:flex;flex-wrap:wrap;gap:8px}
.puce{display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:0 16px;border-radius:999px;border:1px solid #B9B1A2;background:var(--papier-2);cursor:pointer;font:400 .9rem/1 var(--f-titre);color:var(--encre-hb);transition:background-color var(--d-rapide) var(--ease-elan),color var(--d-rapide) var(--ease-elan),border-color var(--d-rapide) var(--ease-elan)}
.puce input{-webkit-appearance:none;appearance:none;flex:none;width:18px;height:18px;margin:0;border:1.5px solid var(--encre-3);border-radius:50%;background:transparent;display:grid;place-content:center;transition:border-color var(--d-rapide) var(--ease-elan),background-color var(--d-rapide) var(--ease-elan)}
.puce input::after{content:"";width:8px;height:5px;border-left:1.5px solid var(--elan-hb);border-bottom:1.5px solid var(--elan-hb);transform:translateY(-1px) rotate(-45deg) scale(0);transition:transform var(--d-rapide) var(--ease-elan)}
.puce:hover{border-color:var(--encre-2)}
.puce:has(input:checked){background:var(--elan-hb);border-color:var(--elan-hb);color:#fff}
.puce:has(input:checked) input{border-color:#fff;background:#fff}
.puce input:checked::after{transform:translateY(-1px) rotate(-45deg) scale(1)}
.puce:has(input:focus-visible){outline:2px solid var(--elan-hb);outline-offset:2px}
.champ{display:flex;flex-direction:column;gap:6px;min-width:0}
.champ input{width:100%;min-height:48px;padding:12px 14px;border:1px solid #B9B1A2;border-radius:3px;background:var(--papier-2);color:var(--encre-hb);font:400 1.0625rem/1.3 var(--f-texte);transition:border-color var(--d-rapide) var(--ease-elan)}
.champ input::placeholder{color:#767676}
.champ input:focus{outline:2px solid var(--elan-hb);outline-offset:1px;border-color:var(--elan-hb)}
.champ input[aria-invalid="true"]{border-color:var(--erreur-papier)}
.champ-ligne{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.champ-ligne-inegale{grid-template-columns:200px minmax(0,1fr)}
.erreur{display:none;font:400 .84rem/1.3 var(--f-titre);color:var(--erreur-papier)}
.erreur.visible{display:block;animation:erreur-in var(--d-rapide) var(--ease-elan)}
@keyframes erreur-in{from{opacity:0;transform:translateY(calc(-1 * var(--dist-xs)))}to{opacity:1;transform:none}}
.formulaire .bouton-encre{margin-top:6px}
.mention{font:400 .78rem/1.5 var(--f-titre);color:var(--encre-3)}
.mention a,.lien-encre{color:var(--elan-hb)}
.mention a:hover,.lien-encre:hover{color:var(--encre-hb)}
.confirmation{display:flex;flex-direction:column;gap:18px}
.confirmation[hidden]{display:none}
.confirmation:not([hidden]){animation:plein-in var(--d-long) var(--ease-elan)}
.confirmation-titre{font:300 3.25rem/.98 var(--f-titre);font-stretch:80%;letter-spacing:-.03em}
.confirmation-titre em{display:block;color:var(--elan-hb)}
.confirmation > p{font-size:1.125rem;color:var(--encre-2)}
.confirmation-liste{list-style:none;padding-top:14px;border-top:1px solid var(--filet-papier);display:flex;flex-direction:column;gap:10px}
.confirmation-liste li{display:flex;justify-content:space-between;gap:12px;font-size:1.0625rem}
.confirmation-liste li span{font:600 .75rem/1.4 var(--f-titre);letter-spacing:.06em;color:var(--elan-hb)}
.confirmation-actions{display:flex;flex-wrap:wrap;align-items:center;gap:12px 22px}
.confirmation-actions .lien-encre{min-height:44px;display:inline-flex;align-items:center;font:400 .9375rem/1.2 var(--f-titre)}
@media (max-width:1199px){.demande-grille{grid-template-columns:minmax(0,1fr);gap:48px}.demande-feuille{max-width:640px}}
@media (max-width:767px){
  .credits dl{grid-template-columns:minmax(0,1fr);row-gap:6px;text-align:center}
  .credits dt{text-align:center;padding-top:18px}
  .formulaire,.confirmation{padding:24px 20px 22px}
  .champ-ligne,.champ-ligne-inegale{grid-template-columns:minmax(0,1fr)}
  .champ input{font-size:1rem}
  .confirmation-titre{font-size:2.5rem}
  .credits dd{font-size:1.1875rem}
  .credits .credit-nom{font-size:1.5rem}
  .generique{padding-bottom:96px}
}

/* ---------- Pied de page ---------- */
.pied{background:var(--nuit-0);border-top:1px solid rgba(241,236,226,.08)}
.pied-int{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:8px 24px;padding-block:22px;font:400 .84rem/1.4 var(--f-titre);color:var(--brume-3)}
.pied nav{display:flex;flex-wrap:wrap;gap:4px 22px;align-items:center}
.pied a{color:var(--brume-3);min-height:44px;display:inline-flex;align-items:center}
.pied a:hover,.pied .lien-discret:hover{color:var(--papier)}
@media (max-width:767px){.pied-int{padding-bottom:96px}}

/* ---------- Barre basse (téléphone) ---------- */
.barre-mobile{display:none}
@media (max-width:767px){
  .barre-mobile{display:block;position:fixed;left:0;right:0;bottom:0;z-index:40;padding:12px 16px max(16px,env(safe-area-inset-bottom));background:rgba(10,21,20,.96);box-shadow:0 -1px 0 var(--filet);transform:translateY(110%);transition:transform var(--d-court) var(--ease-elan)}
  .barre-mobile.visible{transform:none}
}

/* =====================================================================
   RÉVÉLATIONS AU DÉFILEMENT (un seul mécanisme)
   ===================================================================== */
html.js:not(.mouvement-reduit) [data-reveal]:not([data-reveal="cinema"]):not([data-reveal="filet"]):not(.visible){opacity:0;transform:translateY(var(--dist-l))}
html.js:not(.mouvement-reduit) [data-reveal="voix"]:not(.visible){transform:translateY(var(--dist-s))}
html.js [data-reveal="ligne"]{-webkit-mask-image:linear-gradient(#000,#000);mask-image:linear-gradient(#000,#000);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:0 100%;mask-position:0 100%;-webkit-mask-size:100% 100%;mask-size:100% 100%}
html.js:not(.mouvement-reduit) [data-reveal="ligne"]:not(.visible){opacity:1;transform:translateY(.25em);-webkit-mask-size:100% 0%;mask-size:100% 0%}
html.js [data-reveal]{transition:opacity var(--d-base) var(--ease-elan),transform var(--d-base) var(--ease-elan),mask-size var(--d-base) var(--ease-elan),-webkit-mask-size var(--d-base) var(--ease-elan),background-color 600ms var(--ease-pose);transition-delay:calc(var(--i,0) * var(--ecart-liste))}
html.js [data-reveal="voix"]{transition-duration:600ms}
html.js [data-reveal].visible{transition-delay:calc(var(--i,0) * var(--ecart-liste))}
html.js [data-reveal].fini{transition-delay:0ms}

/* =====================================================================
   PROFONDEUR : parallaxe pilotée par le défilement (CSS seul)
   ===================================================================== */
@supports (animation-timeline:view()){
  @media (min-width:1200px) and (prefers-reduced-motion:no-preference){
    html:not(.mouvement-reduit) .ouverture .couche-fond{animation:derive-fond linear both;animation-timeline:view();animation-range:exit 0% exit 100%}
    html:not(.mouvement-reduit) .ouverture .feuille-zone{animation:derive-feuille linear both;animation-timeline:view();animation-range:exit 0% exit 100%}
    html:not(.mouvement-reduit) .ouverture .lampe{animation:baisse-lampe linear both;animation-timeline:view();animation-range:exit 0% exit 100%}
  }
}
@keyframes derive-fond{from{translate:0 0}to{translate:0 40px}}
@keyframes derive-feuille{from{translate:0 0}to{translate:0 -40px}}
@keyframes baisse-lampe{from{opacity:1}to{opacity:.55}}

/* =====================================================================
   RÉDUIRE LES ANIMATIONS (réglage de l'appareil ou du site)
   ===================================================================== */
html.mouvement-reduit *,html.mouvement-reduit *::before,html.mouvement-reduit *::after{animation-duration:1ms !important;animation-iteration-count:1 !important;transition-duration:1ms !important;transition-delay:0ms !important;scroll-behavior:auto !important}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:1ms !important;animation-iteration-count:1 !important;transition-duration:1ms !important;transition-delay:0ms !important}
}

/* =====================================================================
   PAGES INTÉRIEURES (mentions, confidentialité, outils, 404)
   ===================================================================== */
.page-int .entete{background:rgba(10,21,20,.92);height:64px;box-shadow:0 1px 0 var(--filet)}
.page-int .entete .entete-logo img{height:28px}
.page-tete{padding:calc(64px + clamp(56px,9vw,120px)) 0 clamp(48px,6vw,80px);position:relative;overflow:hidden}
.page-tete::after{content:"";position:absolute;right:-200px;top:-260px;width:900px;height:900px;border-radius:50%;background:radial-gradient(closest-side,rgba(108,207,196,.14),rgba(15,107,102,0) 100%);pointer-events:none}
.page-tete .enveloppe{position:relative;z-index:1;display:flex;flex-direction:column;gap:22px}
.page-tete h1{font:300 clamp(2.75rem,6vw,5.5rem)/.92 var(--f-titre);font-stretch:78%;letter-spacing:-.04em;max-width:18ch}
.page-tete h1 em{color:var(--elan-clair-hb)}
.page-tete .chapo{max-width:52ch}
.prose{background:var(--papier);color:var(--encre-hb);padding-block:clamp(48px,7vw,96px)}
.prose .enveloppe{max-width:820px}
.prose h2{font:500 1.5rem/1.2 var(--f-titre);margin:40px 0 12px}
.prose h2:first-child{margin-top:0}
.prose p,.prose li,.prose dd{font-size:1.125rem;line-height:1.6;color:var(--encre-2);margin:0 0 1em}
.prose ul{padding-left:1.2em}
.prose a{color:var(--elan-hb)}
.prose a:hover{color:var(--encre-hb)}
.prose dl{margin:0 0 1em}
.prose dt{font:500 1rem/1.4 var(--f-titre);color:var(--encre-hb);margin-top:14px}
.prose dd{margin:2px 0 0}
.prose .maj{font:400 .875rem/1.4 var(--f-mono);color:var(--encre-3)}
/* =====================================================================
   ALIGNEMENTS (règle de la maison, reprise du site actuel)
   - Paragraphes, listes et légendes de plusieurs lignes : justifiés, sur ordinateur comme sur téléphone.
   - Aucune césure : jamais de mot coupé en fin de ligne.
   - Titres, boutons et étiquettes : alignés à gauche.
   - Centré : uniquement le « Générique » et le bas du menu.
   ===================================================================== */
/* Tout le texte courant est justifié, à toutes les tailles d'écran.
   Une ligne seule ou la dernière ligne d'un paragraphe restent alignées normalement. */
:where(p,blockquote,td),:where(li,dd,figcaption):not(:has(h1,h2,h3,h4,h5,h6,p,div,ul,ol)),.relais-brut,.pied-int span{text-align:justify;text-wrap:pretty}
/* Les titres ne sont jamais justifiés */
:where(h1,h2,h3,h4,h5,h6),p.surtitre,p.legende-scene{text-align:start}
.credits :where(h1,h2,h3,h4){text-align:center}
/* Sur téléphone, le numéro passe au-dessus : la colonne de texte reste assez large pour justifier sans trous */
@media (max-width:699px){.engagements-hb li{grid-template-columns:minmax(0,1fr);gap:6px}}
.credits dd{text-align-last:center}
/* Exceptions : citations en vrac de la scène 2, fiches d'identité et dates restent alignées à gauche */
.voix li,.prose dd,.maj{text-align:start}
/* Tablette : les trois étapes passent l'une sous l'autre, pour des lignes assez longues à justifier */
@media (min-width:768px) and (max-width:1023px){.etapes-hb{grid-template-columns:minmax(0,1fr);gap:36px}.etapes-hb p{max-width:60ch}}
/* Aucun mot coupé en fin de ligne, nulle part */
*,*::before,*::after{hyphens:none!important;-webkit-hyphens:none!important}

/* Page « Exemples d'outils » */
.principes-hb{list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;margin-top:22px;background:rgba(241,236,226,.10);border-radius:4px;overflow:hidden}
.principes-hb li{background:var(--nuit-2);padding:22px 24px;display:flex;flex-direction:column;gap:8px}
.principes-hb b{font:500 1.0625rem/1.2 var(--f-titre);color:var(--papier)}
.principes-hb span{font-size:1rem;color:var(--brume-2)}
@media (max-width:1199px){.principes-hb{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:600px){.principes-hb{grid-template-columns:minmax(0,1fr)}}
.famille-hb{background:var(--papier);color:var(--encre-hb);padding-block:clamp(56px,8vw,110px);font-family:var(--texte)}
.famille-hb + .famille-hb{border-top:1px solid var(--filet-papier)}
.famille-hb .etiquette{display:inline-block;font:400 .78rem/1 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--elan-hb);margin-bottom:14px}
.famille-hb h2{font:300 clamp(2.25rem,4vw,3.5rem)/1 var(--f-titre);font-stretch:80%;letter-spacing:-.03em;max-width:20ch}
.famille-hb .intro{margin:16px 0 0;max-width:62ch;font:340 1.1875rem/1.5 var(--f-texte);color:var(--encre-2)}
.famille-hb .outil h3{font-family:var(--f-titre);font-weight:500}
.famille-hb .outil-texte p,.famille-hb .outil ul li{color:var(--encre-2)}
.outils-appel{background:var(--nuit-1);padding-block:var(--silence)}
.outils-appel .enveloppe{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:28px}
.outils-appel p{font:300 clamp(1.75rem,3vw,2.75rem)/1.1 var(--f-titre);font-stretch:80%;letter-spacing:-.02em;max-width:22ch}

/* 404 */
.page-404{min-height:100svh;display:flex;align-items:center}
.page-404 .enveloppe{display:flex;flex-direction:column;gap:24px;align-items:flex-start}
.page-404 h1{font:300 clamp(3rem,9vw,7rem)/.9 var(--f-titre);font-stretch:76%;letter-spacing:-.045em}
.page-404 h1 em{color:var(--elan-clair-hb)}

/* ---------- Écran de chargement (si la page tarde, première visite) ---------- */
.chargement{position:fixed;inset:0;z-index:200;display:none;flex-direction:column;align-items:center;justify-content:center;gap:20px;background:var(--nuit-1)}
.chargement::before,.chargement::after{content:"";position:absolute;left:0;right:0;height:50%;background:var(--nuit-0);transition:height 600ms var(--ease-elan)}
.chargement::before{top:0}.chargement::after{bottom:0}
.chargement > *{position:relative;z-index:1;transition:opacity 300ms var(--ease-elan)}
.chargement img{height:40px;width:auto}
.chargement-heure{font:400 .9375rem/1 var(--f-mono);letter-spacing:.12em;color:var(--lampe);font-variant-numeric:tabular-nums}
.chargement-signature{font:300 1.375rem/1 var(--f-texte);font-style:italic;color:var(--brume-hb)}
.chargement-filet{position:absolute !important;left:0;bottom:0;height:1px;width:0;background:var(--lampe);transition:width 900ms var(--ease-elan)}
html.chargement-visible .chargement{display:flex}
html.chargement-visible .chargement-filet{width:70%}
html.chargement-sortie .chargement{background:transparent;pointer-events:none}
html.chargement-sortie .chargement::before,html.chargement-sortie .chargement::after{height:0}
html.chargement-sortie .chargement > *{opacity:0}
html.chargement-sortie .chargement-filet{width:100%}
.wrap{width:100%;max-width:1160px;margin:0 auto;padding:0 24px}
.plein .bureau-onglets button{font-size:.9375rem}
.plein-fermer svg{flex:none}
.page-int .page-tete .maj{font:400 .875rem/1.4 var(--f-mono);color:var(--brume-3)}

.plein .cas h3{line-height:1.15}