/* Accueil chalandia.fr — compilé depuis apps/web/devanture-source/accueil.dc.html. Ne pas modifier ici : modifier la source et recompiler. */
@font-face{font-family:"Archivo";src:url(/devanture/assets/archivo.e3a28ead.woff2) format("woff2");font-weight:100 900;font-stretch:62% 125%;font-style:normal;font-display:swap}
@font-face{font-family:"Archivo";src:url(/devanture/assets/archivo-italique.d63de74e.woff2) format("woff2");font-weight:100 900;font-stretch:62% 125%;font-style:italic;font-display:swap}
@font-face{font-family:"Instrument Sans";src:url(/devanture/assets/instrument-sans.8b74e9bc.woff2) format("woff2");font-weight:400 700;font-stretch:75% 100%;font-style:normal;font-display:swap}
@font-face{font-family:"Instrument Sans";src:url(/devanture/assets/instrument-sans-italique.9519d501.woff2) format("woff2");font-weight:400 700;font-stretch:75% 100%;font-style:italic;font-display:swap}
/* ══ CHALANDIA — ACCUEIL V5 ════════════════════════════════════════════════
   Aucun vert. La palette sort du logo lui-même : le fond #15110E, la courbe
   vermillon #DB5518, le soleil #F0A82F. Deux fonds seulement : la nuit (le
   produit, les agents) et le papier (les décisions, les prix).
   ═════════════════════════════════════════════════════════════════════════ */
:root{
  --nuit:#15110E;--nuit-2:#1C1713;--nuit-3:#241E19;--nuit-4:#2F2721;
  --ln:rgba(246,236,222,.09);--ln2:rgba(246,236,222,.16);--ln3:rgba(246,236,222,.30);
  --lait:#F6ECDE;--lait-2:#B3A594;--lait-3:#968878;
  --creme:#F4EEE5;--papier:#FBF8F3;--blanc:#FFFDF9;--trait:#E3D8C9;--trait-2:#D3C5B2;--sable:#EFE6D8;
  --encre:#1B1612;--encre-2:#5F554C;
  --verm:#DB5518;--verm-vif:#EE6A3C;--verm-fonce:#A83B0E;--verm-voile:#FBE3D7;
  --or:#F0A82F;--or-doux:#F7D08A;
  --display:"Archivo","Helvetica Neue",Arial,sans-serif;
  --texte:"Instrument Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --e:cubic-bezier(.16,1,.3,1);
  --g:clamp(20px,4.4vw,64px);--max:1320px;--nav:68px
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--nav) + 12px);background:var(--nuit)}
body{margin:0;background:var(--nuit);color:var(--lait);font-family:var(--texte);font-size:17px;line-height:1.55;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}
img,video,canvas,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer;-webkit-tap-highlight-color:transparent}
h1,h2,h3,p,ul,ol,figure,dl,dd,blockquote{margin:0}
ul,ol{padding:0;list-style:none}
:focus-visible{outline:2px solid var(--verm-vif);outline-offset:3px;border-radius:8px}
::selection{background:var(--verm);color:var(--nuit)}
.page{width:100%;min-width:320px;overflow-x:clip;background:var(--nuit)}
.enveloppe{width:min(var(--max),100% - 2*var(--g));margin-inline:auto}
section[id]{scroll-margin-top:var(--nav)}
.evitement{position:fixed;left:12px;top:12px;z-index:100;padding:12px 18px;border-radius:12px;background:var(--lait);color:var(--encre);font-weight:600;transform:translateY(-200%)}
.evitement:focus{transform:none}

/* ── Typographie ─────────────────────────────────────────────────────── */
.surtitre{display:inline-flex;align-items:center;gap:10px;font:600 12.5px/1.2 var(--texte);letter-spacing:.14em;text-transform:uppercase;color:var(--lait-2)}
.point{width:8px;height:8px;border-radius:50%;background:var(--verm-vif);flex:none;animation:pouls 2.4s var(--e) infinite}
@keyframes pouls{0%{box-shadow:0 0 0 0 rgba(238,106,60,.5)}70%{box-shadow:0 0 0 9px rgba(238,106,60,0)}100%{box-shadow:0 0 0 0 rgba(238,106,60,0)}}
h1{font-family:var(--display);font-weight:640;font-stretch:100%;font-size:clamp(34px,9.2vw,50px);line-height:1;letter-spacing:-.04em}
h1 .l{display:block}
@media (min-width:1080px){h1{font-stretch:106%;font-size:clamp(52px,calc((min(100vw,1448px) - 2*var(--g))*.052),74px)}h1 .l{white-space:nowrap}}
h1 em{font-style:italic;font-weight:560;color:var(--verm-vif)}
h2{font-family:var(--display);font-weight:620;font-stretch:108%;font-size:clamp(34px,4.3vw,62px);line-height:1;letter-spacing:-.034em;text-wrap:balance}
h3{font-family:var(--display);font-weight:600;font-stretch:104%;font-size:clamp(22px,2vw,28px);line-height:1.12;letter-spacing:-.02em}
.chapo{font-size:clamp(17px,1.35vw,20px);line-height:1.5;color:var(--lait-2);max-width:40ch;text-wrap:pretty}
.chapo strong{color:var(--lait);font-weight:600}
.clair .surtitre,.papier .surtitre{color:var(--encre-2)}
.clair .chapo,.papier .chapo{color:var(--encre-2)}
.clair .chapo strong,.papier .chapo strong{color:var(--encre)}
.petit{font-size:14px;line-height:1.5;color:var(--encre-2)}
.i{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;flex:none}

/* ── Boutons et liens ────────────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:0 20px 0 24px;border-radius:999px;font:600 15.5px/1 var(--texte);letter-spacing:-.005em;white-space:nowrap;transition:transform .35s var(--e),background-color .25s,border-color .25s,color .25s}
.btn .i{width:18px;height:18px;transition:transform .35s var(--e)}
.btn:hover{transform:translateY(-1px)}
.btn:hover .fleche{transform:translateX(3px)}
.btn:active{transform:scale(.98)}
.btn-plein{background:var(--lait);color:var(--encre)}
.btn-plein:hover{background:#FFFFFF}
.btn-trait{border:1px solid var(--ln2);color:var(--lait);padding:0 22px 0 18px}
.btn-trait:hover{background:rgba(246,236,222,.06);border-color:var(--ln3)}
.clair .btn-plein,.papier .btn-plein{background:var(--encre);color:var(--lait)}
.clair .btn-plein:hover,.papier .btn-plein:hover{background:#000000}
.clair .btn-trait,.papier .btn-trait{border-color:var(--trait-2);color:var(--encre)}
.clair .btn-trait:hover,.papier .btn-trait:hover{background:rgba(27,22,18,.04);border-color:var(--encre-2)}
.lien{display:inline-flex;align-items:center;gap:8px;font-weight:600;font-size:16px;color:var(--lait);padding-bottom:4px;border-bottom:1px solid var(--ln3);transition:gap .35s var(--e),border-color .25s}
.lien .i{width:17px;height:17px}
.lien:hover{gap:12px;border-color:var(--verm-vif)}
.clair .lien,.papier .lien{color:var(--encre);border-color:var(--trait-2)}
.clair .lien:hover,.papier .lien:hover{border-color:var(--verm-fonce)}

/* ── Navigation ──────────────────────────────────────────────────────── */
.nav{position:sticky;top:0;z-index:50;background:rgba(21,17,14,.8);-webkit-backdrop-filter:saturate(1.4) blur(14px);backdrop-filter:saturate(1.4) blur(14px);border-bottom:1px solid transparent;transition:border-color .3s}
.nav.defile{border-bottom-color:var(--ln)}
.nav{transition:background-color .35s,border-color .35s}
.nav.sur-clair{background:rgba(251,248,243,.84);border-bottom-color:var(--trait)}
.nav.sur-clair .marque{color:var(--encre)}
.nav.sur-clair .nav-liens a,.nav.sur-clair .espace{color:var(--encre-2)}
.nav.sur-clair .nav-liens a:hover,.nav.sur-clair .espace:hover{color:var(--encre);background:rgba(27,22,18,.05)}
.nav.sur-clair .btn-plein{background:var(--encre);color:var(--lait)}
.nav.sur-clair .menu-btn{border-color:var(--trait-2);color:var(--encre)}
.nav-in{position:relative;height:var(--nav);display:flex;align-items:center;gap:20px}
.marque{flex:none;display:inline-flex;align-items:center;gap:10px;font:700 21px/1 var(--display);letter-spacing:-.035em;color:var(--lait)}
.marque svg{flex:none;width:30px;height:30px}
.marque .pt{color:var(--verm-vif)}
.nav-liens{display:flex;gap:2px;margin-left:18px}
.nav-liens a{padding:10px 13px;border-radius:999px;font-size:15px;color:var(--lait-2);transition:color .2s,background-color .2s}
.nav-liens a:hover{color:var(--lait);background:rgba(246,236,222,.06)}
.nav-actions{margin-left:auto;display:flex;align-items:center;gap:6px}
.espace{padding:10px 14px;border-radius:999px;font-size:15px;color:var(--lait-2)}
.espace:hover{color:var(--lait)}
.nav .btn{min-height:42px;padding:0 16px 0 18px;font-size:14.5px}
.menu-btn{display:none;width:44px;height:44px;border-radius:12px;align-items:center;justify-content:center;border:1px solid var(--ln2);color:var(--lait)}
.menu-feuille{position:absolute;left:calc(-1*var(--g));right:calc(-1*var(--g));top:100%;background:var(--nuit);border-bottom:1px solid var(--ln);padding:8px var(--g) 28px;display:flex;flex-direction:column;animation:apparait .45s var(--e) both}
.menu-feuille a{display:flex;align-items:center;justify-content:space-between;min-height:58px;font:600 21px/1 var(--display);letter-spacing:-.02em;border-bottom:1px solid var(--ln)}
.menu-feuille a .i{color:var(--lait-3)}
@media (max-width:1079px){.nav-liens,.espace{display:none}.menu-btn{display:inline-flex}}
.nav .court{display:none}
@media (max-width:440px){.nav .long{display:none}.nav .court{display:inline}.nav .btn{padding:0 18px}}

/* ── Ouverture : le film ─────────────────────────────────────────────── */
.ouverture{position:relative;isolation:isolate;overflow:hidden;padding:clamp(40px,6vh,76px) 0 clamp(40px,6vh,64px);background:var(--nuit)}
.ouverture-fond{position:absolute;inset:0;z-index:-1;pointer-events:none;background:
  radial-gradient(56% 42% at 50% 80%,rgba(219,85,24,.17),rgba(219,85,24,0) 72%),
  radial-gradient(36% 26% at 50% 100%,rgba(240,168,47,.09),rgba(240,168,47,0) 70%),
  radial-gradient(rgba(246,236,222,.07) 1px,transparent 1.4px) 0 0/26px 26px;
  -webkit-mask-image:linear-gradient(180deg,#000 0%,rgba(0,0,0,.9) 50%,transparent 100%);mask-image:linear-gradient(180deg,#000 0%,rgba(0,0,0,.9) 50%,transparent 100%)}
.ouverture-texte{display:flex;flex-direction:column;align-items:center;text-align:center}
/* L'ouverture monte sans partir de l'invisible (4 octobre 2026). Mesuré sur un
   téléphone moyen (4G lente, processeur ×4) : partis d'une opacité nulle, le
   surtitre et le chapo n'étaient comptés « affichés » que 0,9 et 1,3 s après
   le premier rendu — plus grand rendu à 3,1 s, au-delà des 2,5 s attendues.
   Partis de 35 %, ils sont lisibles dès le premier rendu, et le fondu se voit. */
@keyframes monte-doux{from{opacity:.35;transform:translateY(16px)}to{opacity:1;transform:none}}
.ouverture-texte .surtitre{margin-bottom:24px;animation:monte-doux .8s var(--e) .05s backwards}
.ouverture-titre{font-family:var(--display);font-weight:650;font-stretch:108%;font-size:clamp(40px,6.4vw,98px);line-height:1.02;letter-spacing:-.046em;color:var(--lait)}
.ouverture-titre .ligne{display:block;overflow:hidden;padding:0 .06em .15em;margin-bottom:-.15em}
.ouverture-titre .ligne>span{display:inline-block;animation:ligne-monte 1.15s var(--e) .1s backwards}
.ouverture-titre .ligne+.ligne>span{animation-delay:.22s}
@keyframes ligne-monte{from{transform:translateY(108%)}to{transform:none}}
.ouverture-titre em{font-style:italic;font-weight:560;color:var(--verm-vif)}
.ouverture .chapo{margin-top:22px;max-width:none;font-size:clamp(17px,1.4vw,20px);color:var(--lait-2);animation:monte-doux .9s var(--e) .38s backwards}
.ouverture .actions{justify-content:center;margin-top:30px;gap:12px 30px;animation:monte-doux .9s var(--e) .48s backwards}
.lien-agents{display:inline-flex;align-items:center;gap:10px;min-height:48px;font-size:15.5px;font-weight:600;color:var(--lait-2);transition:color .25s}
.lien-agents .i{width:18px;height:18px;transition:transform .35s var(--e)}
.lien-agents:hover{color:var(--lait)}
.lien-agents:hover .i{transform:translateY(3px)}

.film-heros{position:relative;width:min(1060px,100% - 2*var(--g));margin:clamp(32px,5vh,52px) auto 0;animation:film-entree 1.2s var(--e) .55s backwards}
@keyframes film-entree{from{opacity:0;transform:translateY(46px)}to{opacity:1;transform:none}}
.film-fenetre{position:relative;isolation:isolate;aspect-ratio:16/9;border-radius:18px;overflow:hidden;background:#0B0907;border:1px solid var(--ln2);
  box-shadow:0 50px 100px -40px rgba(0,0,0,.8),0 0 0 8px rgba(246,236,222,.025),0 30px 140px -30px rgba(219,85,24,.32);
  transform:scale(var(--ouvre,1));transform-origin:50% 0;will-change:transform}
.film-fenetre video{width:100%;height:100%;object-fit:cover;background:#0B0907}
.film-points{position:absolute;top:18px;left:20px;z-index:2;display:flex;gap:7px;pointer-events:none}
.film-points i{display:block;width:9px;height:9px;border-radius:50%;background:rgba(246,236,222,.3)}
.film-points i:first-child{background:#EE6A3C}
.film-points i:nth-child(2){background:#F0A82F}
.film-zone{position:absolute;inset:0;z-index:1;cursor:pointer;border-radius:inherit;background:linear-gradient(180deg,rgba(11,9,7,.28) 0%,rgba(11,9,7,0) 22%,rgba(11,9,7,0) 72%,rgba(11,9,7,.42) 100%)}
.film-zone:focus-visible{outline-offset:-6px;border-radius:16px}
.film-son{position:absolute;right:16px;top:14px;z-index:3;display:inline-flex;align-items:center;gap:9px;min-height:44px;padding:0 17px 0 13px;border-radius:999px;border:1px solid rgba(246,236,222,.26);background:rgba(21,17,14,.58);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);font-size:14px;font-weight:600;color:var(--lait);transition:background-color .25s,transform .35s var(--e)}
.film-son:hover{background:rgba(21,17,14,.86);transform:translateY(-1px)}
.film-son .i{width:18px;height:18px}
.film-etiquette{position:absolute;left:22px;bottom:24px;z-index:2;display:flex;align-items:center;gap:9px;font-size:12.5px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:var(--lait);text-shadow:0 1px 14px rgba(0,0,0,.6);pointer-events:none}
.film-etiquette .i{width:18px;height:18px;fill:currentColor;stroke:none}
.film-etiquette span{margin-left:6px;color:var(--lait-2);letter-spacing:.02em;font-variant-numeric:tabular-nums}
.film-pause{position:absolute;right:16px;bottom:14px;z-index:3;width:44px;height:44px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;border:1px solid rgba(246,236,222,.26);background:rgba(21,17,14,.55);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);color:var(--lait);transition:background-color .25s}
.film-pause:hover{background:rgba(21,17,14,.86)}
.film-pause .i{width:16px;height:16px}
.film-barre{position:absolute;left:0;right:0;bottom:0;z-index:2;height:3px;background:rgba(246,236,222,.12);pointer-events:none}
.film-barre span{display:block;height:100%;background:var(--verm-vif);transform-origin:left;transform:scaleX(0);transition:transform .3s linear}
.film-erreur{position:absolute;left:16px;right:16px;bottom:16px;z-index:4;padding:12px 14px;border-radius:12px;background:rgba(21,17,14,.92);font-size:14px;line-height:1.45;color:var(--lait)}
.film-erreur a{text-decoration:underline;text-underline-offset:3px}
.film-heros figcaption{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:14px 2px 0;font-size:13.5px;color:var(--lait-3)}
.film-heros figcaption button{display:inline-flex;align-items:center;gap:8px;min-height:44px;font-size:14px;font-weight:600;color:var(--lait-2);transition:color .25s}
.film-heros figcaption button:hover{color:var(--lait)}
.film-heros figcaption .i{width:16px;height:16px}

.grand-livre{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px 40px;margin-top:clamp(36px,5.5vh,60px);padding-top:clamp(24px,3.5vh,34px);border-top:1px solid var(--ln);animation:monte .9s var(--e) .85s backwards}
.grand-livre>div{display:flex;align-items:center;gap:16px;min-width:0}
.grand-livre strong{flex:none;font:700 clamp(40px,3.5vw,54px)/1 var(--display);font-stretch:108%;letter-spacing:-.04em;color:var(--lait)}
.grand-livre strong span{margin-left:2px;color:var(--verm-vif)}
.grand-livre p{font-size:14.5px;line-height:1.42;color:var(--lait)}
.grand-livre p span{color:var(--lait-3)}
.grand-livre p b{font-weight:600}
.livre-avatars{display:flex;flex:none}
.livre-avatars img{width:46px;height:46px;border-radius:50%;object-fit:cover;box-shadow:0 0 0 3px var(--nuit)}
.livre-avatars img+img{margin-left:-12px}

@media (max-width:1079px){
  .grand-livre{grid-template-columns:repeat(2,minmax(0,1fr))}
  .grand-livre>div:last-child{grid-column:1/-1}
}
@media (max-width:760px){
  .ouverture{padding-top:34px}
  .ouverture-titre{font-size:clamp(38px,10.4vw,56px);letter-spacing:-.04em}
  .ouverture-titre em{display:block}
  .ouverture .chapo{font-size:16.5px}
  .ouverture .actions{flex-direction:column;gap:6px}
  .film-heros{width:calc(100% - 20px)}
  .film-fenetre{border-radius:14px}
  .film-son{right:10px;top:10px;min-height:40px;padding:0 13px 0 11px;font-size:13px}
  .film-points{display:none}
  .film-etiquette{left:14px;bottom:16px;font-size:11px}
  .film-pause{right:10px;bottom:8px;width:40px;height:40px}
  .film-heros figcaption{padding:10px 6px 0;font-size:12.5px}
  .film-heros figcaption>span{max-width:170px}
  .grand-livre{grid-template-columns:minmax(0,1fr);gap:0;padding-top:6px}
  .grand-livre>div{gap:16px;padding:14px 0;border-bottom:1px solid var(--ln)}
  .grand-livre>div:last-child{border-bottom:0}
  .grand-livre strong{min-width:92px;font-size:38px}
  .grand-livre p{font-size:14px}
}
@media (max-width:420px){.film-etiquette{display:none}}

/* ── La scène : l'équipe en relief ───────────────────────────────────── */
.actions{display:flex;flex-wrap:wrap;align-items:center;gap:12px}
.equipe-scene{position:relative;height:calc(100svh - var(--nav));min-height:640px;max-height:1000px}
section.equipe-scene{scroll-margin-top:-12px}   /* posée pile sous la barre : scroll-padding (nav + 12) − 12 */
.scene{position:absolute;inset:0;overflow:hidden;isolation:isolate;background:var(--nuit);outline:none}
.scene-fond{position:absolute;inset:0;z-index:0;background:
  radial-gradient(46% 40% at 50% 64%,rgba(219,85,24,.17),rgba(219,85,24,0) 72%),
  radial-gradient(72% 36% at 50% 100%,rgba(240,168,47,.07),rgba(240,168,47,0) 70%),
  linear-gradient(180deg,#140F0B 0%,#1A1410 56%,#0F0C09 100%)}
.scene-titre{position:absolute;left:0;right:0;top:3%;z-index:1;margin:0;text-align:center;pointer-events:none;white-space:nowrap;
  font-family:var(--display);font-weight:720;font-stretch:112%;font-size:clamp(70px,15vw,236px);line-height:.86;letter-spacing:-.058em;color:rgba(246,236,222,.95);
  opacity:0;transform:translateY(34px) scale(.985);transition:opacity .7s var(--e),transform 1s var(--e)}
.scene-titre .pt{color:var(--verm-vif)}
/* tout entre en scène quand la scène arrive dans l'écran (classe .vue), pas au chargement */
.scene.vue .scene-titre{opacity:1;transform:none;transition:opacity 1.1s var(--e),transform 1.4s var(--e)}
.scene canvas{position:absolute;inset:0;z-index:2;width:100%;height:100%;display:block;touch-action:pan-y;-webkit-user-select:none;user-select:none}
.scene.survol canvas{cursor:pointer}
.scene-voile{position:absolute;inset:0;z-index:3;pointer-events:none;background:radial-gradient(130% 96% at 50% 44%,rgba(0,0,0,0) 56%,rgba(0,0,0,.55) 100%)}
.scene-grain{position:absolute;inset:-60px;z-index:3;pointer-events:none;background-image:url(/devanture/assets/grain.c9a2b3af.png);background-size:160px 160px;opacity:.055;mix-blend-mode:overlay;animation:grain 1.1s steps(5) infinite}
@keyframes grain{0%{transform:translate(0,0)}20%{transform:translate(-22px,14px)}40%{transform:translate(18px,-20px)}60%{transform:translate(-12px,-16px)}80%{transform:translate(20px,8px)}100%{transform:translate(0,0)}}
.scene-cadre{position:absolute;left:23%;right:23%;top:15%;bottom:10%;pointer-events:none}
.scene-charge{position:absolute;left:50%;top:58%;z-index:5;width:min(200px,46vw);height:2px;border-radius:2px;background:var(--ln);overflow:hidden;transform:translateX(-50%)}
.scene-charge span{display:block;height:100%;width:100%;background:var(--verm-vif);transform-origin:left;transition:transform .35s var(--e)}
.scene-charge.attente span{animation:charge-attente 1.25s var(--e) infinite}
@keyframes charge-attente{0%{transform:translateX(-32%) scaleX(.32)}100%{transform:translateX(100%) scaleX(.32)}}
@media (prefers-reduced-motion:reduce){.scene-charge.attente span{animation:none}}
.noms{position:absolute;inset:0;z-index:5;pointer-events:none}
.nom{position:absolute;left:0;top:0;pointer-events:auto;display:flex;flex-direction:column;align-items:center;gap:3px;min-width:64px;min-height:44px;padding:6px 12px 7px;border-radius:14px;opacity:0;transform:translate(-9999px,0);transition:opacity .6s var(--e),background-color .25s;will-change:transform}
.nom .n{font:640 16px/1.1 var(--display);letter-spacing:-.01em;color:var(--lait)}
.nom .r{font-size:10.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--lait-3);transition:color .25s}
.nom:hover,.nom.actif,.nom:focus-visible{background:rgba(246,236,222,.07)}
.nom:hover .r,.nom.actif .r{color:var(--or-doux)}
.scene-intro{position:absolute;left:var(--g);bottom:clamp(30px,5.5vh,60px);z-index:5;width:min(282px,19vw);display:flex;flex-direction:column;align-items:flex-start;gap:16px;opacity:0;transform:translateY(16px);transition:opacity .9s var(--e) .9s,transform .9s var(--e) .9s,visibility 0s}
.scene.vue .scene-intro{opacity:1;transform:none}
.scene.posee .scene-intro,.scene.posee .scene-indice{transition-delay:0s}
.scene-intro .texte{font-size:15.5px;line-height:1.52;color:var(--lait-2);text-wrap:pretty}
.scene-intro .texte strong{color:var(--lait);font-weight:600}
.scene-intro .actions{gap:10px}
.scene-intro .btn{min-height:48px}
@keyframes monte{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.scene-indice{position:absolute;right:var(--g);bottom:clamp(30px,5.5vh,60px);z-index:5;display:flex;align-items:center;gap:8px;min-height:48px;font-size:13px;color:var(--lait-3);white-space:nowrap;pointer-events:none;opacity:0;transition:opacity 1s var(--e) 1.6s,visibility 0s}
.scene.vue .scene-indice{opacity:1}
.scene-indice .i{width:15px;height:15px}
.scene-curseur{position:absolute;left:0;top:0;z-index:8;pointer-events:none;display:inline-flex;align-items:center;gap:9px;min-height:40px;padding:0 14px 0 5px;border-radius:999px;background:var(--lait);color:var(--encre);font-size:13.5px;font-weight:600;white-space:nowrap;opacity:0;transform:translate(-9999px,0);transition:opacity .22s;box-shadow:0 16px 40px -14px rgba(0,0,0,.7)}
.scene-curseur img{width:30px;height:30px;border-radius:50%;object-fit:cover}
.scene-curseur .i{width:15px;height:15px}
.scene-curseur.voir{opacity:1}
.repli{position:absolute;left:0;right:0;top:15%;bottom:12%;z-index:4;display:flex;align-items:flex-end;justify-content:center;gap:clamp(4px,1.4vw,20px);padding:0 var(--g)}
.repli button{height:100%;display:flex;align-items:flex-end;padding:0;transition:transform .5s var(--e),filter .3s}
.repli img{height:100%;width:auto;object-fit:contain;filter:drop-shadow(0 20px 30px rgba(0,0,0,.5))}
.repli button:hover{transform:translateY(-6px)}
@media (min-width:1080px){
  .repli{left:22%;right:22%;padding:0;gap:0}
  .repli button{flex:1 1 0;min-width:0;justify-content:center}
  .repli img{width:100%;height:auto;max-height:100%;object-position:50% 100%}
}

/* ── La fiche : un agent au premier plan ─────────────────────────────── */
.scene.focus{position:fixed;inset:0;z-index:90;height:auto;min-height:0;max-height:none;padding:0}
/* un cadre très haut (aperçu du canevas, page entière) : la fiche reste dans la scène */
@media (min-width:1080px) and (min-height:1400px){.scene.focus{position:absolute}}
.scene.focus .scene-titre{opacity:0;transform:translateY(-8%) scale(.93)}
.scene.focus canvas{touch-action:none;cursor:grab}
.scene.focus canvas:active{cursor:grabbing}
.scene.focus .scene-intro,.scene.focus .noms,.scene.focus .scene-indice,.scene.focus .scene-curseur,.scene.focus .repli{opacity:0;visibility:hidden;transition:opacity .3s,visibility 0s .3s}
.focus-ombre{position:absolute;left:0;top:0;bottom:0;z-index:4;width:min(700px,58vw);pointer-events:none;background:linear-gradient(90deg,rgba(18,14,11,.94) 0%,rgba(18,14,11,.82) 52%,rgba(18,14,11,0) 100%);animation:fondu .8s var(--e) both}
@keyframes fondu{from{opacity:0}to{opacity:1}}
.focus-barre{position:absolute;left:0;right:0;top:0;z-index:7;display:flex;align-items:center;gap:16px;height:78px;padding:0 var(--g);animation:apparait .7s var(--e) .2s backwards}
.fermer{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 18px 0 12px;border-radius:999px;border:1px solid var(--ln2);background:rgba(21,17,14,.5);font-size:14.5px;font-weight:600;color:var(--lait);transition:background-color .25s,border-color .25s}
.fermer:hover{background:rgba(246,236,222,.07);border-color:var(--ln3)}
.fermer .i{width:17px;height:17px}
.focus-avatars{display:flex;gap:8px;margin:0 auto}
.fa-btn{position:relative;width:44px;height:44px;border-radius:50%;padding:0;overflow:hidden;opacity:.5;filter:saturate(.6);transition:opacity .25s,filter .25s,transform .4s var(--e),box-shadow .3s}
.fa-btn img{width:100%;height:100%;object-fit:cover}
.fa-btn:hover{opacity:.95;filter:none;transform:translateY(-2px)}
.fa-btn.actif{opacity:1;filter:none;box-shadow:0 0 0 2px var(--nuit),0 0 0 4px var(--verm-vif)}
.focus-barre .btn{min-height:44px;padding:0 18px}
.focus-panneau{position:absolute;left:0;top:78px;bottom:0;z-index:6;width:min(620px,50vw);overflow-y:auto;overscroll-behavior:contain;padding:34px var(--g) 80px;scrollbar-width:none;
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 30px,#000 calc(100% - 60px),transparent 100%);mask-image:linear-gradient(180deg,transparent 0,#000 30px,#000 calc(100% - 60px),transparent 100%)}
.focus-panneau::-webkit-scrollbar{display:none}
.poignee{display:none}
.focus-panneau .fiche{display:flex;flex-direction:column;align-items:flex-start;gap:20px;max-width:500px}
.fiche .actions{gap:14px 28px;margin-top:4px}
.fiche.a{animation:fiche-a .9s var(--e) .12s both}
.fiche.b{animation:fiche-b .9s var(--e) .12s both}
@keyframes fiche-a{from{opacity:0;transform:translateX(-24px)}to{opacity:1;transform:none}}
@keyframes fiche-b{from{opacity:0;transform:translateX(-24px)}to{opacity:1;transform:none}}
.f-tag{display:inline-flex;align-items:center;min-height:32px;padding:0 13px;border-radius:6px;background:#A9472A;color:#FFF6EC;font-size:12.5px;font-weight:600;letter-spacing:.13em;text-transform:uppercase}
.focus-panneau .f-nom{font-size:clamp(76px,8.4vw,132px);margin-top:-2px}
.f-sous{margin-top:10px;display:flex;align-items:center;gap:10px;font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--lait-3)}
.f-sous::after{content:"";flex:1;min-width:40px;height:1px;background:var(--ln2)}
.focus-panneau .demo{align-self:stretch}
.focus-panneau .ecran{min-height:0}
.f-duo{align-self:stretch;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 24px;padding-top:18px;border-top:1px solid var(--ln)}
.f-suivant{align-self:stretch;margin-top:18px;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:4px 16px;padding:22px 24px;border-radius:20px;border:1px solid var(--ln2);text-align:left;transition:background-color .3s,border-color .3s}
.f-suivant:hover{background:rgba(246,236,222,.05);border-color:var(--ln3)}
.f-suivant .s1{font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--lait-3)}
.f-suivant .s2{grid-column:1;font:620 24px/1.15 var(--display);letter-spacing:-.02em;color:var(--lait)}
.f-suivant .i{grid-column:2;grid-row:1/span 2;width:22px;height:22px;transition:transform .35s var(--e)}
.f-suivant:hover .i{transform:translateX(4px)}
.focus-geste{position:absolute;right:var(--g);bottom:82px;z-index:6;display:flex;align-items:center;gap:8px;padding:9px 16px;border-radius:999px;background:rgba(21,17,14,.62);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);font-size:13px;color:var(--lait-2);white-space:nowrap;pointer-events:none;animation:geste-in .7s var(--e) 1s backwards;transition:opacity .5s}
@keyframes geste-in{from{opacity:0}to{opacity:1}}
.focus-geste.vu,.focus-panneau.haute~.focus-geste{opacity:0}
.focus-geste .i{width:16px;height:16px}
.focus-nav{position:absolute;right:var(--g);bottom:24px;z-index:7;display:flex;gap:8px;animation:apparait .7s var(--e) .5s backwards}
.focus-nav button{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 16px;border-radius:999px;border:1px solid var(--ln2);background:rgba(21,17,14,.5);font-size:14px;font-weight:600;color:var(--lait);transition:background-color .25s,border-color .25s}
.focus-nav button:hover{background:rgba(246,236,222,.07);border-color:var(--ln3)}
.focus-nav .i{width:16px;height:16px}
.focus-portrait{position:absolute;left:47%;right:3%;top:10%;z-index:3;height:86%;width:auto;margin:0 auto;object-fit:contain;filter:drop-shadow(0 24px 40px rgba(0,0,0,.5));animation:portrait-in .9s var(--e) .1s backwards}
@keyframes portrait-in{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}

@media (max-width:1079px){
  /* --pied : la hauteur de la scène au-dessus du texte ; sur téléphone, juste ce qu'il faut à l'équipe */
  .equipe-scene{height:auto;min-height:0;max-height:none;--pied:min(clamp(400px,66svh,580px),calc(142px + 81vw))}
  .scene{position:relative;inset:auto;padding:var(--pied) var(--g) 36px}
  .scene-titre{top:clamp(18px,3.5svh,30px);font-size:clamp(50px,15.2vw,120px)}
  .scene-cadre{left:2%;right:2%;top:calc(var(--pied)*.17);bottom:auto;height:calc(var(--pied)*.71)}
  .scene-intro{position:relative;left:auto;bottom:auto;width:auto;max-width:560px;margin:0 auto;align-items:center;text-align:center}
  .scene-intro .actions{justify-content:center}
  .scene-indice{position:relative;right:auto;bottom:auto;justify-content:center;margin-top:10px;min-height:0}
  .repli{top:calc(var(--pied)*.14);bottom:auto;height:calc(var(--pied)*.76)}
}
@media (max-width:480px){
  .nom{min-width:0;padding:6px 4px 7px}
  .nom .n{font-size:15px}
  .nom .r{font-size:9.5px;letter-spacing:.07em}
}
@media (max-width:899px){
  .focus-ombre{display:none}
  .focus-barre{height:64px;gap:10px;background:linear-gradient(180deg,rgba(18,14,11,.85),rgba(18,14,11,0))}
  .focus-barre .btn{display:none}
  .fermer{padding:0 14px 0 10px}
  .fermer .t{display:none}
  .focus-avatars{gap:6px;margin:0 0 0 auto}
  .fa-btn{width:38px;height:38px}
  .focus-panneau{left:0;right:0;top:auto;bottom:0;width:auto;height:44svh;padding:10px var(--g) 48px;border-radius:26px 26px 0 0;background:rgba(24,19,16,.95);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);box-shadow:0 -24px 60px -18px rgba(0,0,0,.7);border-top:1px solid var(--ln);transition:height .6s var(--e);-webkit-mask-image:none;mask-image:none}
  .focus-panneau.haute{height:88svh}
  .poignee{display:block;position:sticky;top:-10px;z-index:2;height:30px;margin:-10px calc(-1*var(--g)) 6px;background:linear-gradient(180deg,rgba(24,19,16,.98) 55%,rgba(24,19,16,0))}
  .poignee::before{content:"";position:absolute;left:50%;top:12px;width:44px;height:5px;margin-left:-22px;border-radius:3px;background:var(--ln3)}
  .focus-panneau .f-nom{font-size:clamp(56px,16vw,84px)}
  .f-duo{grid-template-columns:minmax(0,1fr)}
  .focus-geste{left:50%;right:auto;top:calc(56svh - 50px);bottom:auto;transform:translateX(-50%)}
  .focus-nav{display:none}
  .focus-portrait{left:0;right:0;top:64px;height:52svh}
}

/* ── Sections ────────────────────────────────────────────────────────── */
.section{position:relative;padding:clamp(88px,10vw,156px) 0}
.sombre{background:var(--nuit);color:var(--lait)}
.clair{background:var(--creme);color:var(--encre)}
.papier{background:var(--papier);color:var(--encre)}
.tete{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:20px 64px;align-items:end;margin-bottom:clamp(40px,5vw,68px)}
.tete>.surtitre{grid-column:1/-1}
@media (max-width:1079px){.tete{grid-template-columns:minmax(0,1fr)}}
.revele{animation:none}
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion:no-preference){
    .revele{animation:revele linear both;animation-timeline:view();animation-range:entry 0% entry 32%}
  }
}
@keyframes revele{from{opacity:0;transform:translateY(34px)}to{opacity:1;transform:none}}
.apparait{animation:apparait .6s var(--e) both}
@keyframes apparait{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* ── Les fiches : texte et scènes illustratives ────────────────────────────────────────────────────────── */
.fiche{display:flex;flex-direction:column;align-items:flex-start;gap:18px}
.f-index{font:600 12.5px/1 var(--texte);letter-spacing:.14em;text-transform:uppercase;color:var(--verm-vif)}
.f-nom{font:640 clamp(60px,7vw,108px)/.88 var(--display);font-stretch:112%;letter-spacing:-.055em}
.f-nom .pt{color:var(--verm-vif)}
.f-accroche{font:italic 520 clamp(20px,1.9vw,26px)/1.3 var(--display);letter-spacing:-.015em;color:var(--lait);max-width:25ch;text-wrap:balance}
.f-points{display:flex;flex-direction:column;gap:10px}
.f-points li{display:flex;gap:10px;align-items:flex-start;font-size:16px;color:var(--lait)}
.f-points .i{width:18px;height:18px;margin-top:3px;color:var(--verm-vif)}
.f-extra{font-size:14.5px;color:var(--lait-2);padding:10px 14px;border-radius:12px;border:1px solid var(--ln2)}
.f-remplace{display:flex;flex-direction:column;gap:4px;font-size:13.5px;color:var(--lait-3)}
.f-remplace s{font:500 17px/1.3 var(--display);color:var(--lait-2);text-decoration-color:var(--verm-vif);text-decoration-thickness:2px}
.f-limite{font-size:14px;line-height:1.5;color:var(--lait-3);max-width:46ch}
.f-limite strong{display:block;margin-bottom:2px;color:var(--lait-2);font-weight:600}
.demo{display:flex;flex-direction:column;gap:12px;min-width:0}
.demo.a .ecran{animation:scene-a .7s var(--e) both}
.demo.b .ecran{animation:scene-b .7s var(--e) both}
@keyframes scene-a{from{opacity:0;transform:translateY(14px) scale(.985)}to{opacity:1;transform:none}}
@keyframes scene-b{from{opacity:0;transform:translateY(14px) scale(.985)}to{opacity:1;transform:none}}
.ecran{flex:1;display:flex;flex-direction:column;min-height:500px;border-radius:22px;overflow:hidden;background:var(--papier);color:var(--encre);box-shadow:0 0 0 1px rgba(0,0,0,.4),0 40px 90px -40px rgba(0,0,0,.85)}
.ecran-tete{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;padding:14px 18px;border-bottom:1px solid var(--trait);font-size:14.5px}
.ecran-tete strong{font-weight:600;white-space:nowrap}
.ecran-tete .muet{color:var(--encre-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.illus{margin-left:auto;font-size:11px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--encre-2);white-space:nowrap}
.ecran-corps{flex:1;display:flex;flex-direction:column;gap:12px;padding:18px}
.rond{width:8px;height:8px;border-radius:50%;background:var(--verm);flex:none}
.rond.vif{animation:pouls 1.6s var(--e) infinite}
.pastille{margin-left:auto;display:inline-flex;align-items:center;min-height:26px;padding:0 10px;border-radius:999px;background:var(--sable);color:var(--encre);font-size:12.5px;font-weight:600;white-space:nowrap}
.pastille.vive{background:var(--verm-voile);color:var(--verm-fonce)}
.note{margin-top:auto;padding-top:4px;font-size:13.5px;line-height:1.45;color:var(--encre-2)}
.mini{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:0 16px;border-radius:12px;border:1px solid var(--trait-2);background:var(--blanc);color:var(--encre);font-size:14.5px;font-weight:600;transition:border-color .2s,background-color .2s}
.mini:hover{border-color:var(--encre-2)}
.mini.plein{background:var(--encre);border-color:var(--encre);color:var(--lait)}
.mini .i{width:16px;height:16px}
.rejouer{align-self:flex-start;display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:0 14px;border-radius:999px;border:1px solid var(--ln2);font-size:13.5px;font-weight:600;color:var(--lait-2)}
.rejouer:hover{color:var(--lait);border-color:var(--ln3)}
.rejouer .i{width:15px;height:15px}
/* Nina */
.onde{display:flex;align-items:center;gap:3px;height:38px;padding:0 2px}
.onde i{flex:1;max-width:6px;height:100%;border-radius:3px;background:var(--verm);opacity:.85;transform:scaleY(.16)}
.onde.parle i{animation:onde 1.05s ease-in-out infinite;animation-delay:var(--d)}
@keyframes onde{0%,100%{transform:scaleY(.16)}50%{transform:scaleY(var(--h))}}
.bulle{max-width:90%;padding:10px 14px;border-radius:16px;font-size:14.5px;line-height:1.45}
.bulle .qui{display:block;margin-bottom:3px;font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase}
.bulle.agent{align-self:flex-start;background:#F1E7DA;border-top-left-radius:6px}
.bulle.agent .qui{color:var(--verm-fonce)}
.bulle.client{align-self:flex-end;background:var(--encre);color:var(--lait);border-top-right-radius:6px}
.bulle.client .qui{color:var(--lait-3)}
.ticket{border:1px solid var(--trait-2);border-radius:16px;background:var(--blanc);overflow:hidden}
.t-haut{display:flex;align-items:center;gap:12px;padding:12px 14px}
.t-num{font:640 30px/1 var(--display);letter-spacing:-.03em}
.t-haut strong{display:block;font-weight:600}
.t-haut small{display:block;font-size:13px;color:var(--encre-2)}
.t-haut .pastille{background:var(--encre);color:var(--lait)}
.t-ligne{padding:10px 14px;border-top:1px dashed var(--trait-2);font-size:15px}
.t-bas{display:flex;align-items:center;gap:8px;padding:10px 14px;background:#F6EFE5;font-size:13.5px;font-weight:600}
.t-bas .i{width:16px;height:16px;color:var(--verm-fonce)}
/* Iris */
.sources{display:flex;flex-wrap:wrap;align-items:center;gap:6px;font-size:13px;color:var(--encre-2)}
.puce{display:inline-flex;align-items:center;min-height:26px;padding:0 10px;border-radius:999px;border:1px solid var(--trait-2);background:var(--blanc);color:var(--encre);font-size:12.5px;font-weight:500}
.post{display:grid;grid-template-columns:118px minmax(0,1fr);gap:14px;padding:12px;border-radius:16px;border:1px solid var(--trait);background:var(--blanc)}
.post img{width:118px;height:118px;border-radius:12px;object-fit:cover;object-position:50% 5%}
.post-texte{font:500 18px/1.38 var(--display);letter-spacing:-.012em;color:var(--encre);min-height:4.2em}
.curseur{display:inline-block;width:2px;height:1.05em;margin-left:2px;vertical-align:-.16em;background:var(--verm);animation:clignote 1s steps(1) infinite}
@keyframes clignote{50%{opacity:0}}
.post-meta{margin-top:8px;font-size:12.5px;color:var(--encre-2)}
.post-actions{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;font-size:13.5px;color:var(--encre-2)}
/* Jules */
.lignes{display:flex;flex-direction:column;border-radius:16px;border:1px solid var(--trait);background:var(--blanc);overflow:hidden}
.lj{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 16px;font-size:15px}
.lj+.lj{border-top:1px solid var(--trait)}
.ok{display:inline-flex;align-items:center;gap:6px;font-size:13.5px;font-weight:600;white-space:nowrap}
.ok .i{width:16px;height:16px;color:var(--verm-fonce)}
.manque{padding:14px 16px;border-radius:16px;background:var(--verm-voile)}
.manque strong{display:flex;align-items:center;gap:8px;font-size:14.5px;font-weight:600;color:var(--verm-fonce)}
.manque strong .i{width:17px;height:17px}
.manque p{margin-top:4px;font-size:14.5px;color:var(--encre)}
/* Hugo */
.stock{display:flex;flex-direction:column;gap:10px;padding:14px 16px;border-radius:16px;border:1px solid var(--trait);background:var(--blanc)}
.st-haut{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:15px}
.st-haut strong{font-weight:600}
.etat{padding:4px 9px;border-radius:999px;font-size:12.5px;font-weight:600;white-space:nowrap}
.etat.bas{background:var(--verm-voile);color:var(--verm-fonce)}
.etat.ok-etat{background:var(--sable);color:var(--encre-2)}
.jauge{position:relative;height:10px;border-radius:999px;background:var(--sable)}
.niveau{position:absolute;left:0;top:0;bottom:0;border-radius:999px;background:var(--encre);animation:jauge 1.5s var(--e) both}
.niveau.bas{background:var(--verm)}
@keyframes jauge{from{width:100%}}
.seuil{position:absolute;top:-5px;bottom:-5px;width:2px;border-radius:2px;background:var(--encre);transform:translateX(-1px)}
.st-bas{display:flex;justify-content:space-between;gap:10px;font-size:13px;color:var(--encre-2);font-variant-numeric:tabular-nums}
/* Lia */
.releve{padding:12px 14px;border-radius:16px;border:1px solid var(--trait);background:var(--blanc)}
.releve-titre{margin-bottom:6px;font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--encre-2)}
.releve li{display:grid;grid-template-columns:30px minmax(0,1fr);gap:10px;align-items:start;padding:6px 0;font-size:14.5px}
.releve img{width:30px;height:30px;border-radius:9px}
.releve small{display:block;font-size:12.5px;color:var(--encre-2)}
.proposition{display:flex;flex-direction:column;gap:12px;padding:16px 18px;border-radius:18px;background:var(--encre);color:var(--lait)}
.prop-sur{font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--or-doux)}
.prop-titre{font:600 20px/1.25 var(--display);letter-spacing:-.015em}
.prop-dl{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 16px}
.prop-dl dt{font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--lait-3)}
.prop-dl dd{margin-top:3px;font-size:14px;line-height:1.4;color:var(--lait)}
.choix{display:flex;flex-wrap:wrap;gap:8px}
.proposition .mini{background:transparent;border-color:var(--ln2);color:var(--lait)}
.proposition .mini:hover{border-color:var(--ln3)}
.proposition .mini.plein{background:var(--lait);border-color:var(--lait);color:var(--encre)}
.motifs{display:flex;flex-wrap:wrap;align-items:center;gap:6px;font-size:13.5px;color:var(--lait-2)}
.motif{min-height:40px;padding:0 14px;border-radius:999px;border:1px solid var(--ln2);font-size:13.5px;color:var(--lait)}
.motif:hover{border-color:var(--ln3);background:rgba(246,236,222,.06)}
.decision{display:flex;align-items:center;gap:8px;font-size:14.5px;font-weight:600}
.decision .i{width:18px;height:18px;color:var(--or)}
@media (max-width:560px){.post{grid-template-columns:84px minmax(0,1fr)}.post img{width:84px;height:84px}.prop-dl{grid-template-columns:minmax(0,1fr)}}


/* ── Le produit : trois écrans, en un parcours ───────────────────────── */
.parcours{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(36px,5.5vw,96px);align-items:start}
.parcours-etapes{display:flex;flex-direction:column}
.etape{position:relative;min-height:min(78vh,780px);display:flex;flex-direction:column;justify-content:center;align-items:flex-start;padding:5vh 0;opacity:.3;transition:opacity .7s var(--e)}
.etape.ici{opacity:1}
.p-kicker{display:flex;align-items:center;gap:12px;font-size:12.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--encre-2)}
.p-num{display:inline-flex;align-items:center;justify-content:center;min-width:40px;height:40px;padding:0 10px;border-radius:999px;background:var(--encre);color:var(--lait);font:600 13.5px/1 var(--texte);letter-spacing:.02em;font-variant-numeric:tabular-nums;transition:background-color .5s var(--e),color .5s}
.etape.ici .p-num{background:var(--verm);color:#FFF8F1}
.p-titre{margin-top:20px;font-size:clamp(30px,3.2vw,48px);line-height:1.04;letter-spacing:-.03em;white-space:pre-line}
.p-desc{margin-top:16px;max-width:42ch;font-size:17px;line-height:1.55;color:var(--encre-2);text-wrap:pretty}
.p-liste{margin:22px 0 26px;display:flex;flex-direction:column;gap:10px}
.p-liste li{display:flex;gap:10px;font-size:16px;color:var(--encre)}
.p-liste .i{width:18px;height:18px;margin-top:3px;color:var(--verm-fonce)}
/* sur grand écran, l'image de chaque étape reste lisible par les lecteurs d'écran ; le visuel collant la montre */
.p-visuel{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}

.parcours-scene{position:sticky;top:calc(var(--nav) + 3vh);height:calc(100vh - var(--nav) - 6vh);max-height:840px;min-height:520px;display:flex;flex-direction:column;gap:14px}
.ecrans{position:relative;flex:1;min-height:0;border-radius:30px;overflow:hidden;container-type:size;perspective:1600px;
  background:radial-gradient(90% 80% at 50% 28%,#F5EDE3 0%,#ECE1D2 64%,#E5D7C4 100%);box-shadow:inset 0 0 0 1px rgba(27,22,18,.07)}
.ecrans-halo{position:absolute;left:50%;top:58%;width:74%;height:62%;transform:translate(-50%,-50%);background:radial-gradient(closest-side,rgba(219,85,24,.17),rgba(219,85,24,0));pointer-events:none}
/* scopé à .ecrans : sans ce préfixe, ces règles plaçaient aussi l’écran de démonstration des fiches d’agent (même classe) en absolu, décalé sur le texte */
/* min-height:0 — la règle générale .ecran (l’écran de démonstration des fiches d’agent) lui donnait 500 px : sous le cadre du navigateur, une bande vide de ~50 px (relevé le 27 septembre) */
.ecrans .ecran{min-height:0;position:absolute;left:50%;top:50%;z-index:1;opacity:0;transform:translate(-50%,calc(-50% + 70px)) scale(.94);transition:opacity .65s var(--e),transform 1s var(--e);will-change:transform,opacity}
.ecrans .ecran.passe{transform:translate(-50%,calc(-50% - 70px)) scale(.94)}
.ecrans .ecran.ici{z-index:2;opacity:1;transform:translate(-50%,-50%) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg))}
.ecrans .ecran .n-cadre{width:560px;width:min(88cqw,calc((84cqh - 38px) * 1.6))}
.ecrans .ecran .t-cadre{height:480px;height:86cqh}
.ecrans-vraie{position:absolute;left:18px;top:16px;z-index:3;display:inline-flex;align-items:center;gap:8px;padding:7px 12px;border-radius:999px;background:rgba(255,253,249,.72);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);font-size:12px;font-weight:600;color:var(--encre-2)}
.ecrans-vraie .rond{width:7px;height:7px;border-radius:50%;background:var(--verm-vif)}

/* les cadres : un navigateur pour le service et le gérant, un téléphone pour la vitrine */
.n-cadre{border-radius:14px;overflow:hidden;background:#FFFFFF;box-shadow:0 0 0 1px rgba(27,22,18,.12),0 50px 90px -40px rgba(27,22,18,.55),0 18px 40px -24px rgba(27,22,18,.3)}
.n-barre{display:flex;align-items:center;gap:10px;height:38px;padding:0 14px;background:#221C17;color:var(--lait-2);font-size:12.5px}
/* les trois boutons d’une vraie fenêtre de macOS (27 septembre, Léo : « je veux les vraies ») : fermer, réduire, agrandir, avec leur liseré */
.n-points{display:flex;gap:7px;flex:none}
.n-points i{display:block;width:11px;height:11px;border-radius:50%;background:#FF5F57;box-shadow:inset 0 0 0 .5px #E0443E}
.n-points i:nth-child(2){background:#FEBC2E;box-shadow:inset 0 0 0 .5px #DEA123}
.n-points i:nth-child(3){background:#28C840;box-shadow:inset 0 0 0 .5px #1AAB29}
@media (max-width:899px){.n-points{gap:6px}.n-points i{width:10px;height:10px}}
.n-legende{flex:1;min-width:0;text-align:center;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.n-barre .i{width:14px;height:14px;opacity:.7}
.n-cadre img{width:100%;height:auto}
.t-cadre{padding:9px;border-radius:46px;background:#1B1612;box-shadow:0 0 0 1px rgba(27,22,18,.22),inset 0 0 0 2px #2F2721,0 50px 90px -36px rgba(27,22,18,.6)}
.t-cadre img{height:100%;width:auto;max-width:none;border-radius:37px}

.rail{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;flex:none}
.rail button{display:flex;flex-direction:column;align-items:stretch;gap:10px;min-height:52px;padding:6px 2px;text-align:left;color:var(--encre-2);transition:color .3s}
.rail button:hover{color:var(--encre)}
.r-texte{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:600}
.r-num{font-variant-numeric:tabular-nums;opacity:.6}
.r-trait{display:block;height:3px;border-radius:2px;background:var(--trait);overflow:hidden}
.r-trait span{display:block;height:100%;border-radius:inherit;background:var(--encre-2);transform:scaleX(0);transform-origin:left;transition:transform .8s var(--e),background-color .4s}
.rail .fait .r-trait span{transform:scaleX(1)}
.rail .ici{color:var(--encre)}
.rail .ici .r-trait span{transform:scaleX(1);background:var(--verm)}

.socle-pied{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px 32px;margin-top:clamp(36px,4vw,56px);padding-top:24px;border-top:1px solid var(--trait)}
.vraie{font:italic 520 16.5px/1.3 var(--display);color:var(--encre)}
.capacites{display:flex;flex-wrap:wrap;gap:8px}
.capacites li{display:inline-flex;align-items:center;gap:8px;min-height:38px;padding:0 14px;border-radius:999px;background:#F1E8DC;font-size:14px}
.capacites .i{width:16px;height:16px;color:var(--verm-fonce)}

@media (max-width:1079px){
  .parcours{grid-template-columns:minmax(0,1fr);gap:0}
  .parcours-scene{display:none}
  .etape{min-height:0;opacity:1;padding:0 0 72px}
  .etape:last-child{padding-bottom:8px}
  .p-visuel{position:static;width:auto;height:auto;margin:30px 0 0;overflow:visible;clip:auto;clip-path:none;white-space:normal;align-self:stretch}
  .p-visuel.telephone{display:flex;justify-content:center;padding:30px 0;border-radius:26px;background:radial-gradient(90% 80% at 50% 28%,#F5EDE3 0%,#ECE1D2 64%,#E5D7C4 100%)}
  .p-visuel .t-cadre{height:min(560px,118vw)}
}

/* ── Sous le capot : le bandeau qui défile ───────────────────────────────
   27 septembre, demande de Léo : plus fin, plus beau, sans bouton pause.
   Des vignettes d'application et des noms, séparés d'un filet — plus de
   cartes. Le défilement s'arrête quand la souris est dessus, quand on le
   touche (un toucher l'arrête, le suivant le relance), quand il a le focus du
   clavier, et quand il sort de l'écran ; il ne bouge pas du tout pour qui a
   demandé moins d'animations. */
.outils{position:relative;overflow:hidden;background:var(--nuit-2);color:var(--lait);border-block:1px solid var(--ln)}
.outils-in{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;padding:clamp(22px,2vw,28px) 0 clamp(22px,2vw,28px) max(var(--g),calc((100% - var(--max)) / 2))}
.outils-tete{display:flex;flex-direction:column;gap:7px;padding-right:clamp(26px,2.6vw,40px);border-right:1px solid var(--ln)}
.outils-tete .surtitre{font-size:11px;letter-spacing:.16em}
.outils-tete h2{font-size:clamp(18px,1.4vw,20px);line-height:1.15;letter-spacing:-.02em;white-space:nowrap}
.outils-tete .pt{color:var(--verm-vif)}
.outils-fenetre{position:relative;min-width:0;border-radius:14px;-webkit-tap-highlight-color:transparent}
.outils-fenetre:focus{outline:none}
.outils-fenetre:focus-visible{outline:2px solid var(--verm-vif);outline-offset:-2px}
.outils-masque{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 5%,#000 90%,transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 5%,#000 90%,transparent 100%)}
.outils-piste{display:flex;width:max-content;animation:outils-defile 40s linear infinite}
@media (hover:hover) and (pointer:fine){.outils-fenetre:hover .outils-piste{animation-play-state:paused}}
.outils-fenetre:focus-visible .outils-piste,.outils-fenetre.arrete .outils-piste,.outils-fenetre.hors .outils-piste{animation-play-state:paused}
@keyframes outils-defile{to{transform:translateX(calc(-100% / 3))}}
.outils-groupe{display:flex;align-items:center}
.outil{position:relative;display:flex;align-items:center;gap:12px;padding:4px clamp(24px,2.3vw,32px);white-space:nowrap}
.outil::after{content:"";position:absolute;right:0;top:50%;width:1px;height:24px;margin-top:-12px;background:var(--ln2)}
.o-pastille{flex:none;width:36px;height:36px;border-radius:10px;display:inline-flex;align-items:center;justify-content:center;box-shadow:inset 0 0 0 1px rgba(246,236,222,.05)}
.o-pastille .i{width:18px;height:18px}
.o-texte{display:flex;flex-direction:column;gap:3px}
.o-nom{font:620 15px/1.1 var(--display);letter-spacing:-.01em;color:var(--lait)}
.o-role{font-size:12.5px;line-height:1.25;color:var(--lait-3)}
/* sans logo déposé : un pictogramme, une teinte par service, prise dans la palette Chalandia */
.outil.t1 .o-pastille{background:rgba(238,106,60,.14);color:#F2875C}
.outil.t2 .o-pastille{background:rgba(240,168,47,.14);color:#F4BE62}
.outil.t3 .o-pastille{background:rgba(246,236,222,.08);color:var(--lait)}
.outil.t4 .o-pastille{background:rgba(219,85,24,.2);color:#FF9D72}
.outil.t5 .o-pastille{background:rgba(247,208,138,.12);color:var(--or-doux)}
/* un logo officiel déposé dans logos/ : il garde ses couleurs d'origine, sur une plaque claire — les chartes réservent la
   couleur aux fonds clairs (Stripe : violet sur clair, blanc sur sombre), et une marque noire reste lisible sur la nuit */
.outil.a-logo .o-pastille{background:#FFFFFF;box-shadow:inset 0 0 0 1px rgba(27,22,18,.06),0 6px 16px -8px rgba(0,0,0,.6)}   /* blanc pur : un logo livré sur fond blanc (Netlify) s’y fond sans rectangle */
.o-logo{display:block;width:22px;height:22px;object-fit:contain}
/* un logo qui porte déjà le nom (Stripe) : la plaque prend sa largeur, le nom écrit ne reste que pour les lecteurs d'écran */
.outil.a-marque .o-pastille{width:auto;padding:0 13px}
.outil.a-marque .o-logo{width:auto;height:var(--logo-h,18px);max-width:118px}
.outil.a-marque .o-nom{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
/* une icône pleine (le symbole sur son propre fond, comme Supabase sur son noir) : elle est la vignette, bordée d’un filet */
.outil.a-icone .o-pastille{background:none;overflow:hidden;box-shadow:0 6px 16px -8px rgba(0,0,0,.6);outline:1px solid rgba(246,236,222,.12);outline-offset:-1px}
.outil.a-icone .o-logo{width:100%;height:100%;object-fit:cover}
@media (max-width:899px){
  .outils-in{grid-template-columns:minmax(0,1fr);gap:16px;padding:22px 0 20px}
  .outils-tete{gap:6px;padding:0 var(--g);border-right:0}
  .outils-tete h2{white-space:normal}
  .outils-masque{-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 4%,#000 88%,transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 4%,#000 88%,transparent 100%)}
  .outil{gap:10px;padding:4px 22px}
  .outil::after{height:22px;margin-top:-11px}
  .o-pastille{width:32px;height:32px;border-radius:9px}
  .o-pastille .i{width:16px;height:16px}
  .o-logo{width:20px;height:20px}
  .outil.a-marque .o-pastille{padding:0 11px}
  .outil.a-marque .o-logo{height:calc(var(--logo-h,18px) * .89);max-width:104px}
  .o-nom{font-size:14.5px}
  .o-role{font-size:12px}
}
@media (prefers-reduced-motion:reduce){
  .outils-masque{-webkit-mask-image:none;mask-image:none}
  .outils-piste{display:block;animation:none;width:auto;padding-left:clamp(26px,2.6vw,40px)}
  .outils-groupe{display:grid;grid-template-columns:repeat(auto-fill,minmax(172px,1fr));gap:16px 20px;padding-right:var(--g)}
  .outils-groupe.echo{display:none}
  .outil{padding:0;white-space:normal}
  .outil::after{display:none}
}
@media (prefers-reduced-motion:reduce) and (max-width:899px){.outils-piste{padding-left:var(--g)}}

/* ── Métiers ─────────────────────────────────────────────────────────── */
.metiers-grille{display:grid;grid-template-columns:minmax(0,560px) minmax(0,1fr);gap:40px;align-items:center}
.galerie{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;align-items:start}
/* Le panneau des autres métiers de bouche, à droite des deux devantures (19 octobre 2026). */
.vitrine-autres{display:flex;flex-direction:column;gap:16px;padding:clamp(24px,3vw,40px);border-radius:28px;border:1px solid var(--ln);background:var(--nuit-3)}
.va-titre{font:600 clamp(24px,2.2vw,30px)/1.15 var(--display);letter-spacing:-.015em}
.va-texte{color:var(--lait-2);max-width:44ch}
.va-pastilles{display:flex;flex-wrap:wrap;gap:8px;padding:0;margin:0;list-style:none}
.va-pastilles li{display:inline-flex;align-items:center;min-height:34px;padding:0 14px;border-radius:999px;border:1px solid var(--ln2);font-size:14px;color:var(--lait-2)}
.va-nina{margin-top:8px;padding-top:18px;border-top:1px solid var(--ln);font-size:15px;color:var(--lait-3)}
.va-nina strong{color:var(--lait)}
.va-nina .lien{display:flex;width:fit-content;align-items:center;gap:6px;margin-top:6px;min-height:44px}
.vitrine{display:flex;flex-direction:column;gap:14px}
.vitrine:nth-child(even){margin-top:56px}
.v-cadre{aspect-ratio:390/720;border-radius:22px;overflow:hidden;background:var(--nuit-3);box-shadow:0 0 0 1px var(--ln),0 40px 80px -40px rgba(0,0,0,.85);transition:transform .7s var(--e)}
.v-cadre img{width:100%;height:100%;object-fit:cover;object-position:top;transition:transform 1.2s var(--e)}
.vitrine:hover .v-cadre{transform:translateY(-6px)}
.vitrine:hover .v-cadre img{transform:scale(1.035)}
.v-metier{display:flex;align-items:center;gap:6px;font:600 18px/1.2 var(--display);letter-spacing:-.012em}
.v-metier .i{width:16px;height:16px;color:var(--verm-vif);transition:transform .35s var(--e)}
.vitrine:hover .v-metier .i{transform:translate(2px,-2px)}
.v-nom{display:block;margin-top:2px;font-size:14px;color:var(--lait-3)}
.metiers-pied{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px;margin-top:clamp(28px,3vw,40px);font-size:14px;color:var(--lait-3)}
@media (max-width:1079px){.galerie{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:var(--g);gap:14px;margin-inline:calc(-1*var(--g));padding:0 var(--g) 8px;scrollbar-width:none}.galerie::-webkit-scrollbar{display:none}.vitrine{flex:0 0 min(62vw,280px);scroll-snap-align:start}.metiers-grille{display:block}.vitrine-autres{margin-top:28px}.vitrine:nth-child(even){margin-top:0}}

/* ── Tarifs ──────────────────────────────────────────────────────────── */
.formules-tete{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:34px}
.formules-tete .chapo{margin-top:14px}
.bascule{display:inline-flex;gap:4px;padding:4px;border-radius:999px;background:#EAE0D2}
.bascule button{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 18px;border-radius:999px;font-size:15px;font-weight:600;color:var(--encre-2);transition:background-color .25s,color .25s}
.bascule button.actif{background:var(--blanc);color:var(--encre);box-shadow:0 1px 2px rgba(27,22,18,.14)}
.bascule button span{font-size:12.5px;color:var(--verm-fonce)}
.formules{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;align-items:stretch}
.formule{display:flex;flex-direction:column;align-items:flex-start;gap:14px;padding:clamp(24px,3vw,40px);border-radius:28px;border:1px solid var(--trait);background:var(--blanc)}
.f-sur{display:flex;flex-wrap:wrap;align-items:center;gap:10px;font-size:12.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--encre-2)}
.formule h3{font-size:clamp(28px,2.6vw,36px)}
.f-desc{max-width:36ch;color:var(--encre-2)}
.prix{display:flex;align-items:flex-end;gap:10px;margin-top:6px}
.montant{font:640 clamp(58px,5.4vw,78px)/.9 var(--display);font-stretch:106%;letter-spacing:-.05em;font-variant-numeric:tabular-nums}
.unite{padding-bottom:6px;font-size:14px;line-height:1.25;color:var(--encre-2)}
.f-fact{font-size:14px;color:var(--encre-2)}
.formule .btn{margin:6px 0 10px}
.f-liste-titre{align-self:stretch;padding-top:18px;border-top:1px solid var(--trait);font-size:15px;font-weight:600}
.f-liste{align-self:stretch;display:flex;flex-direction:column;gap:10px}
.f-liste li{display:flex;gap:10px;font-size:15.5px;line-height:1.4}
.f-liste .i{width:18px;height:18px;margin-top:2px;color:var(--verm-fonce)}
.f-liste b{font-weight:600}
.formule-pro{background:var(--nuit);border-color:var(--nuit);color:var(--lait)}
.formule-pro .f-sur,.formule-pro .f-desc,.formule-pro .unite,.formule-pro .f-fact{color:var(--lait-2)}
.formule-pro .f-liste-titre{border-color:var(--ln2)}
.formule-pro .f-liste .i{color:var(--verm-vif)}
.formule-pro .btn-plein{background:var(--lait);color:var(--encre)}
.formule-pro .btn-plein:hover{background:#FFFFFF}
.badge{display:inline-flex;align-items:center;min-height:24px;padding:0 10px;border-radius:999px;background:var(--verm);color:var(--nuit);font-size:11.5px;letter-spacing:.05em}
.f-note{margin-top:auto;padding-top:6px;font-size:13.5px;color:var(--lait-3)}
.formules-pied{display:grid;grid-template-columns:minmax(0,1fr);gap:14px;margin-top:26px}
.ms{display:flex;align-items:flex-start;gap:10px;font-size:15.5px}
.ms .i{width:18px;height:18px;margin-top:2px;color:var(--verm-fonce)}
.ms strong{font-weight:600}
.multi{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px;margin-top:10px;padding:20px 24px;border-radius:20px;border:1px solid var(--trait-2)}
.multi strong{display:block;font:600 18px/1.3 var(--display);letter-spacing:-.01em}
.multi span{display:block;font-size:15px;color:var(--encre-2)}
@media (max-width:900px){.formules{grid-template-columns:minmax(0,1fr)}}

/* ── Questions ───────────────────────────────────────────────────────── */
.faq{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(32px,6vw,96px);align-items:start}
.faq-tete h2{font-size:clamp(32px,3.3vw,48px)}
.faq-tete{position:sticky;top:calc(var(--nav) + 32px);display:flex;flex-direction:column;align-items:flex-start;gap:20px}
.faq-liste{border-top:1px solid var(--trait)}
.faq details{border-bottom:1px solid var(--trait)}
.faq summary{display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:74px;padding:18px 0;list-style:none;cursor:pointer;font:600 clamp(18px,1.5vw,21px)/1.3 var(--display);letter-spacing:-.015em}
.faq summary::-webkit-details-marker{display:none}
.plus{width:38px;height:38px;flex:none;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--trait-2);transition:transform .45s var(--e),background-color .25s,color .25s,border-color .25s}
.plus .i{width:16px;height:16px}
.faq details[open] .plus{transform:rotate(45deg);background:var(--encre);border-color:var(--encre);color:var(--lait)}
.faq details p{max-width:62ch;padding:0 58px 24px 0;font-size:16.5px;color:var(--encre-2)}
@media (max-width:1079px){.faq{grid-template-columns:minmax(0,1fr)}.faq-tete{position:static}.faq details p{padding-right:0}}

/* ── Final, pied ─────────────────────────────────────────────────────── */
.final{text-align:center;overflow:hidden}
.final-in{display:flex;flex-direction:column;align-items:center;gap:22px}
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion:no-preference){
          }
}
.final .chapo{max-width:36ch}
.final .petit{color:var(--lait-3)}
.pied{padding:64px 0 28px;border-top:1px solid var(--ln);background:var(--nuit);color:var(--lait-2);font-size:15px}
.pied-grille{display:grid;grid-template-columns:minmax(0,1.25fr) repeat(4,minmax(0,1fr));gap:32px}
.pied-marque p{margin-top:16px;max-width:30ch;line-height:1.5}
.pied-marque .petit{color:var(--lait-3)}
.pied h3{margin-bottom:14px;font:600 12.5px/1.2 var(--texte);letter-spacing:.12em;text-transform:uppercase;color:var(--lait-3)}
.pied nav{display:flex;flex-direction:column;gap:10px}
.pied nav a{color:var(--lait-2)}
.pied nav a:hover{color:var(--lait)}
.pied-bas{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;margin-top:56px;padding-top:24px;border-top:1px solid var(--ln);font-size:13.5px;color:var(--lait-3)}
.pied-bas a:hover{color:var(--lait)}
@media (max-width:1079px){.pied-grille{grid-template-columns:repeat(2,minmax(0,1fr))}.pied-marque{grid-column:1/-1}}

/* ── Film ────────────────────────────────────────────────────────────── */
.film{width:min(1100px,94vw);max-width:none;padding:0;border:0;background:transparent;color:var(--lait)}
.film::backdrop{background:rgba(10,8,6,.84)}
.film-in{border-radius:22px;border:1px solid var(--ln2);background:var(--nuit-2);overflow:hidden}
.film-tete{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 10px 10px 20px;font:600 16px/1.2 var(--display)}
.film-fermer{width:44px;height:44px;border-radius:12px;display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--ln2)}
.film video{width:100%;aspect-ratio:16/9;background:#000000}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  html{scroll-behavior:auto}
}