/* ==========================================================================
   PLATEAU : système visuel partagé du site
   Anthracite et blanc cassé, une seule couleur vive (le voyant REC), labels en
   timecode, titres en deux tons avec un effet hologramme, glitch de pellicule
   au survol des boutons, blocs posés dans l'espace.
   Le rose ne sert plus en aplat : uniquement voyants REC, tête de lecture et
   un canal du glitch. Tout mouvement s'arrête avec prefers-reduced-motion.
   ========================================================================== */

/* ---------- Polices, toutes hébergées dans /fonts/ ---------- */
@font-face {
    font-family: 'Archivo';
    font-style: normal;
    font-weight: 100 900;
    font-stretch: 62% 125%;
    font-display: swap;
    src: url('/fonts/archivo-variable-latin.woff2') format('woff2-variations'), url('/fonts/archivo-variable-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Familjen Grotesk';
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url('/fonts/familjen-grotesk-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'Familjen Grotesk';
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url('/fonts/familjen-grotesk-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'IBM Plex Mono';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('/fonts/ibm-plex-mono-400-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'IBM Plex Mono';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('/fonts/ibm-plex-mono-500-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------- Couleurs et polices ---------- */
:root {
    --noir: #0E0E10;
    --noir-2: #16161A;
    --noir-3: #1E1E23;
    --ligne: rgba(255, 255, 255, .09);
    --ligne-2: rgba(255, 255, 255, .16);
    --clair: #EDEBE7;
    --gris: #86858A;
    --gris-2: #5E5D63;
    --blanc: #F3F2EF;
    --blanc-2: #E9E7E2;
    --papier: #FFFFFF;
    --encre: #141416;
    --graphite: #6A6964;
    --ligne-c: rgba(20, 20, 22, .1);
    --rec: #E5263F;            /* le voyant REC : la seule couleur vive */
    --cyan: #22C6E8;           /* second canal du glitch, jamais en aplat */
    --titre: 'Archivo', 'Arial Narrow', Arial, sans-serif;
    --texte: 'Familjen Grotesk', 'Helvetica Neue', Arial, sans-serif;
    --mono: 'IBM Plex Mono', ui-monospace, Menlo, monospace;
    --r: 18px;
    color-scheme: dark;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { background: var(--noir); scroll-behavior: smooth; scroll-padding-top: 80px; scrollbar-width: thin; scrollbar-color: var(--gris-2) var(--noir); }
body { margin: 0; background: var(--noir); color: var(--clair); font-family: var(--texte); font-size: 17px; line-height: 1.5; -webkit-font-smoothing: antialiased; overflow-x: hidden; overflow-x: clip; }
a { color: inherit; }
img, video { max-width: 100%; }
:focus-visible { outline: 2px solid var(--rec); outline-offset: 3px; }
.wrap { max-width: 1120px; margin: 0 auto; padding-inline: 16px; }
main section { position: relative; padding-block: 72px; }
main > :is(section, div) { overflow-x: clip; }   /* le glitch des titres ne fait jamais déborder la page */
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
html.nav-locked, html.nav-locked body { overflow: hidden; }

/* Matières : sombre par défaut, blanc cassé pour les sections claires */
.blanc, .clair { background: var(--blanc); color: var(--encre); color-scheme: light; }
:is(.blanc, .clair) :focus-visible { outline-color: var(--encre); }

/* ---------- Compatibilité : pages construites sur l'ancien système (matières .salle et .clair, variables --bg, --fg…) ----------
   .salle devient anthracite, .clair devient blanc cassé ; les anciennes variables pointent vers les couleurs plateau, sans rose. */
:root {
    --salle: var(--noir); --ecran: var(--noir-2); --lumiere: var(--clair); --lumiere-2: #B4B2AD; --carton: var(--blanc); --bleu: #8FA3B3;
    --bg: var(--noir); --surface: var(--noir-2); --fg: var(--clair); --fg-2: var(--gris); --filet: var(--ligne-2);
}
.salle { --bg: var(--noir); --surface: var(--noir-2); --fg: var(--clair); --fg-2: var(--gris); --filet: var(--ligne-2); background: var(--noir); color: var(--clair); }
.clair { --bg: var(--blanc); --surface: var(--papier); --fg: var(--encre); --fg-2: var(--graphite); --filet: var(--ligne-c); }

/* Ligne « Aussi » : le lien vers l'accompagnement, en bas des pages */
.also { padding: 22px 16px; text-align: center; border-top: 1px solid var(--ligne-c); background: var(--blanc); }
.also a { font-weight: 500; color: var(--encre); text-decoration: none; border-bottom: 1px solid var(--encre); }

/* Transitions entre pages : l'image de la carte Still Human de l'accueil devient l'en-tête de la page Still Human */
@view-transition { navigation: auto; }
::view-transition-group(affiche-still-human) { animation-duration: .5s; animation-timing-function: cubic-bezier(.22, .61, .36, 1); }
::view-transition-old(affiche-still-human), ::view-transition-new(affiche-still-human) { animation-duration: .5s; height: 100%; object-fit: cover; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .2s; }

/* ---------- Titres en deux tons : la fin est projetée, pas imprimée ---------- */
main h1, main h2 { margin: 0; font-family: var(--titre); font-stretch: 78%; font-weight: 600; letter-spacing: -.025em; line-height: .98; text-wrap: balance; }
main h2 { font-size: clamp(2.3rem, 9vw, 4.2rem); }
@property --ang { syntax: "<angle>"; initial-value: 0deg; inherits: true; }
@property --mx { syntax: "<percentage>"; initial-value: 50%; inherits: true; }
@property --my { syntax: "<percentage>"; initial-value: 0%; inherits: true; }
.ton {
    position: relative; display: inline-block; color: transparent; -webkit-background-clip: text; background-clip: text;
    background-image:
        repeating-linear-gradient(180deg, rgba(14, 14, 16, .78) 0 2px, transparent 2px 4.5px),
        linear-gradient(180deg, transparent 0 42%, rgba(255, 255, 255, .55) 49%, transparent 56%),
        linear-gradient(100deg, rgba(237, 235, 231, .72) 0%, rgba(170, 192, 216, .55) 45%, rgba(237, 235, 231, .72) 55%, rgba(170, 192, 216, .45) 100%);
    background-size: 100% 4.5px, 100% 320%, 220% 100%;
    filter: drop-shadow(2.5px 0 rgba(229, 38, 63, .38)) drop-shadow(-2.5px 0 rgba(34, 198, 232, .38)) drop-shadow(0 0 16px rgba(178, 206, 235, .25));
    animation: balayage .9s steps(6) infinite, bande 3.4s steps(28) infinite, reflet 7s ease-in-out infinite alternate, plane 2.6s steps(10) infinite, gresille 4.2s steps(1) infinite;
    animation-delay: 0s, var(--d, 0s), 0s, var(--d, 0s), var(--d2, 0s);
}
.ton::before, .ton::after { content: attr(data-t); position: absolute; inset: 0; pointer-events: none; opacity: 0; mix-blend-mode: screen; }
.ton::before { color: rgba(229, 38, 63, .75); animation: dechire-a 4.2s steps(1) infinite; animation-delay: var(--d2, 0s); }
.ton::after { color: rgba(34, 198, 232, .75); animation: dechire-b 4.2s steps(1) infinite; animation-delay: var(--d2, 0s); }
:is(.blanc, .clair) .ton {
    background-image:
        repeating-linear-gradient(180deg, rgba(243, 242, 239, .85) 0 2px, transparent 2px 4.5px),
        linear-gradient(180deg, transparent 0 42%, rgba(255, 255, 255, .7) 49%, transparent 56%),
        linear-gradient(100deg, rgba(20, 20, 22, .62) 0%, rgba(50, 74, 110, .55) 45%, rgba(20, 20, 22, .62) 55%, rgba(50, 74, 110, .5) 100%);
    filter: drop-shadow(2.5px 0 rgba(229, 38, 63, .3)) drop-shadow(-2.5px 0 rgba(34, 198, 232, .34));
}
:is(.blanc, .clair) .ton::before, :is(.blanc, .clair) .ton::after { mix-blend-mode: multiply; }
@keyframes balayage { to { background-position: 0 4.5px, 0 0, 0 0; } }
@keyframes bande { from { background-position-y: 0, 110%, 0; } to { background-position-y: 0, -210%, 0; } }
@keyframes reflet { from { background-position-x: 0, 0, 0; } to { background-position-x: 0, 0, 100%; } }
@keyframes plane { 0%, 100% { translate: 0 0; } 25% { translate: 1px -3px; } 50% { translate: 0 -5px; } 75% { translate: -1px -3px; } }
@keyframes gresille { 0%, 71%, 100% { opacity: 1; transform: none; } 72% { opacity: .45; transform: translateX(5px) skewX(-8deg); } 73% { opacity: .95; transform: translateX(-3px); } 74% { opacity: .3; transform: none; } 75% { opacity: 1; transform: translateX(2px) scaleY(1.04); } 76% { transform: none; } 90% { opacity: .75; } 91% { opacity: 1; } }
@keyframes dechire-a { 0%, 71%, 77%, 100% { opacity: 0; transform: none; clip-path: inset(0); } 72% { opacity: 1; transform: translateX(-8px); clip-path: inset(12% 0 64% 0); } 73% { opacity: 1; transform: translateX(6px); clip-path: inset(58% 0 20% 0); } 74% { opacity: .8; transform: translateX(-4px); clip-path: inset(32% 0 52% 0); } 75% { opacity: 1; transform: translateX(10px); clip-path: inset(80% 0 4% 0); } 76% { opacity: .6; transform: translateX(-2px); clip-path: inset(2% 0 86% 0); } }
@keyframes dechire-b { 0%, 71%, 77%, 100% { opacity: 0; transform: none; clip-path: inset(0); } 72% { opacity: 1; transform: translateX(7px); clip-path: inset(60% 0 22% 0); } 73% { opacity: .8; transform: translateX(-9px); clip-path: inset(20% 0 66% 0); } 74% { opacity: 1; transform: translateX(5px); clip-path: inset(70% 0 10% 0); } 75% { opacity: .7; transform: translateX(-6px); clip-path: inset(40% 0 44% 0); } 76% { opacity: 1; transform: translateX(3px); clip-path: inset(88% 0 0 0); } }

/* ---------- Labels techniques : « SC 01 · NOM DE LA SECTION » ---------- */
.label { display: block; margin: 0 0 18px; font-family: var(--mono); font-size: 11.5px; font-weight: 400; letter-spacing: .16em; text-transform: uppercase; color: var(--gris); }
.label b { font-weight: 500; color: var(--clair); }
:is(.blanc, .clair) .label { color: var(--graphite); }
:is(.blanc, .clair) .label b { color: var(--encre); }
.mono { font-family: var(--mono); font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase; }
.intro { max-width: 36ch; margin: 18px 0 0; font-size: clamp(1.05rem, 4.3vw, 1.22rem); line-height: 1.5; color: var(--gris); }
.intro b { font-weight: 500; color: var(--clair); }
:is(.blanc, .clair) .intro { color: var(--graphite); }
:is(.blanc, .clair) .intro b { color: var(--encre); }

/* Voyant REC */
.rec { display: inline-flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: 11.5px; letter-spacing: .16em; color: var(--clair); }
.rec::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--rec); box-shadow: 0 0 0 3px rgba(229, 38, 63, .18), 0 0 14px rgba(229, 38, 63, .8); animation: clignote 1.6s steps(1) infinite; }
@keyframes clignote { 0%, 60% { opacity: 1; } 61%, 100% { opacity: .25; } }

/* ---------- Boutons : glitch de pellicule au survol ---------- */
.cta { position: relative; isolation: isolate; display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-height: 52px; padding: 0 24px; border-radius: 999px; background: var(--clair); color: var(--encre); text-decoration: none; font-weight: 600; font-size: 16px; line-height: 1.2; text-align: center; border: 0; cursor: pointer; font-family: var(--texte); overflow: hidden; transition: background .25s, translate .3s cubic-bezier(.2, .8, .2, 1), box-shadow .3s; }
.cta .fl { font-family: var(--mono); font-size: 13px; transition: translate .25s; }
.cta:hover .fl { translate: 4px 0; }
.cta .t { position: relative; display: inline-block; }
.cta .t::before, .cta .t::after { content: attr(data-t); position: absolute; inset: 0; opacity: 0; pointer-events: none; }
.cta .t::before { color: var(--rec); }
.cta .t::after { color: var(--cyan); }
.cta::after { content: ""; position: absolute; left: 0; right: 0; height: 2px; top: -4px; background: rgba(255, 255, 255, .9); opacity: 0; z-index: 2; pointer-events: none; }
.cta:hover { translate: 0 -2px; box-shadow: 0 0 0 4px rgba(237, 235, 231, .08), 0 18px 30px -14px rgba(0, 0, 0, .8); }
.cta:hover .t { animation: saut .44s steps(1) 1; }
.cta:hover .t::before { animation: canal-a .44s steps(1) 1; }
.cta:hover .t::after { animation: canal-b .44s steps(1) 1; }
.cta:hover::after { animation: balaye .44s linear 1; }
@keyframes saut { 0% { translate: 0 0; } 12% { translate: 0 -3px; } 24% { translate: 0 2px; } 36% { translate: -1px 0; } 48%, 100% { translate: 0 0; } }
@keyframes canal-a { 0% { opacity: .95; transform: translate(-3px, 0); clip-path: inset(0 0 58% 0); } 20% { transform: translate(3px, 0); clip-path: inset(42% 0 18% 0); } 40% { transform: translate(-2px, 0); clip-path: inset(72% 0 0 0); } 60% { transform: translate(2px, 0); clip-path: inset(8% 0 70% 0); } 80%, 100% { opacity: 0; } }
@keyframes canal-b { 0% { opacity: .95; transform: translate(3px, 0); clip-path: inset(60% 0 0 0); } 20% { transform: translate(-3px, 0); clip-path: inset(0 0 66% 0); } 40% { transform: translate(2px, 0); clip-path: inset(30% 0 40% 0); } 60% { transform: translate(-2px, 0); clip-path: inset(76% 0 4% 0); } 80%, 100% { opacity: 0; } }
@keyframes balaye { 0% { opacity: .9; top: -4px; } 100% { opacity: .4; top: 110%; } }
.cta.contour { background: transparent; color: var(--clair); box-shadow: inset 0 0 0 1px var(--ligne-2); }
.cta.contour:hover { background: rgba(255, 255, 255, .06); }
:is(.blanc, .clair) .cta { background: var(--encre); color: var(--blanc); }
:is(.blanc, .clair) .cta:hover { box-shadow: 0 18px 30px -14px rgba(20, 20, 22, .5); }
:is(.blanc, .clair) .cta.contour { background: transparent; color: var(--encre); box-shadow: inset 0 0 0 1px rgba(20, 20, 22, .28); }
:is(.blanc, .clair) .cta.contour:hover { background: rgba(20, 20, 22, .05); }
.lien { font-weight: 500; font-size: 15px; color: var(--gris); text-decoration: none; border-bottom: 1px solid var(--ligne-2); padding-bottom: 2px; transition: color .2s, border-color .2s; }
.lien:hover { color: var(--clair); border-color: var(--clair); }
:is(.blanc, .clair) .lien { color: var(--graphite); border-color: var(--ligne-c); }
:is(.blanc, .clair) .lien:hover { color: var(--encre); border-color: var(--encre); }

/* ---------- Plans vidéo : un seul gabarit (voir plateau.js) ---------- */
.plan-video { position: relative; overflow: hidden; background: var(--noir-3); }
.plan-video img, .plan-video video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--cadre, 50% 50%); display: block; }
.plan-video video { opacity: 0; transition: opacity .4s ease; }
.plan-video img:not([src]) { visibility: hidden; }
.plan-video video.joue { opacity: 1; }
/* Matière d'attente (dégradé flou et grain) pour un plan qui n'a pas encore sa vidéo */
.matiere { position: relative; overflow: hidden; background: #22222A; }
.matiere::before { content: ""; position: absolute; inset: -20%; background: var(--g); animation: derive 18s ease-in-out infinite alternate; }
.matiere::after { content: ""; position: absolute; inset: 0; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E"); opacity: .13; mix-blend-mode: overlay; pointer-events: none; }
@keyframes derive { to { transform: translate(6%, 4%) scale(1.06); } }

/* Viseur de caméra : coins, REC, infos, timecode */
.viseur { position: absolute; inset: 78px 16px 18px; pointer-events: none; z-index: 3; }
.viseur i { position: absolute; width: 22px; height: 22px; border-color: rgba(255, 255, 255, .55); border-style: solid; border-width: 0; }
.viseur i:nth-child(1) { top: 0; left: 0; border-top-width: 1.5px; border-left-width: 1.5px; }
.viseur i:nth-child(2) { top: 0; right: 0; border-top-width: 1.5px; border-right-width: 1.5px; }
.viseur i:nth-child(3) { bottom: 0; left: 0; border-bottom-width: 1.5px; border-left-width: 1.5px; }
.viseur i:nth-child(4) { bottom: 0; right: 0; border-bottom-width: 1.5px; border-right-width: 1.5px; }
.viseur .rec { position: absolute; top: 12px; left: 16px; }
.viseur .infos { position: absolute; top: 12px; right: 16px; color: rgba(255, 255, 255, .6); }
.viseur .tc { position: absolute; bottom: 12px; right: 16px; color: rgba(255, 255, 255, .75); font-variant-numeric: tabular-nums; }

/* ---------- Mouvement : entrée, blocs, dérive, pastilles ---------- */
.entre { opacity: 0; translate: 0 18px; transition: opacity .7s, translate .8s cubic-bezier(.2, .8, .2, 1); }
.entre.vu { opacity: 1; translate: 0 0; }

/* .bloc : objet posé dans l'espace. Dérive au défilement, inclinaison et reflet au survol, liseré holographique tournant ;
   sur mobile, le bloc au centre de l'écran s'allume (.actif) */
.bloc { position: relative; transform: perspective(1100px) translate3d(0, var(--py, 0px), 0) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .5s cubic-bezier(.2, .8, .2, 1), box-shadow .5s; will-change: transform; }
/* Reflet holographique « carte brillante » : liseré irisé pastel + voile de lumière irisé, posés sur le bloc (.bloc)
   ou sur une couche séparée (.reflet) quand l'élément porte déjà sa propre rotation 3D.
   Ordinateur : l'angle et la position suivent le curseur. Mobile : le bloc au centre de l'écran s'allume et son reflet suit le défilement. */
.reflet { position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 6; }
.bloc::before, .reflet::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px; z-index: 5; pointer-events: none;
    background: conic-gradient(from var(--ang, 0deg) at var(--mx, 50%) var(--my, 50%), #F6C9DA, #F7E3B5, #CDEFD8, #BFE2F5, #D7CBF6, #F6C9DA);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
    opacity: 0; transition: opacity .45s; }
.bloc::after, .reflet::after { content: ""; position: absolute; inset: 0; border-radius: inherit; z-index: 4; pointer-events: none;
    background:
        radial-gradient(360px circle at var(--mx, 50%) var(--my, 50%), rgba(255, 255, 255, .28), transparent 50%),
        linear-gradient(calc(var(--ang, 0deg) + 115deg), transparent 18%, rgba(246, 201, 218, .5) 34%, rgba(247, 227, 181, .5) 44%, rgba(205, 239, 216, .5) 54%, rgba(191, 226, 245, .5) 64%, rgba(215, 203, 246, .5) 74%, transparent 88%);
    background-size: 100% 100%, 240% 240%; background-position: center, var(--mx, 50%) var(--my, 50%);
    mix-blend-mode: color-dodge; opacity: 0; transition: opacity .45s; }
:is(.blanc, .clair) .bloc::after, :is(.blanc, .clair) .reflet::after { mix-blend-mode: overlay; }
.bloc:hover::before, .bloc.actif::before, :hover > .reflet::before, .actif > .reflet::before { opacity: .95; }
.bloc:hover::after, .bloc.actif::after, :hover > .reflet::after, .actif > .reflet::after { opacity: .32; }
.bloc:hover { box-shadow: 0 40px 70px -40px rgba(0, 0, 0, .75), 0 0 0 1px rgba(255, 255, 255, .06); }
:is(.blanc, .clair) .bloc:hover { box-shadow: 0 40px 60px -40px rgba(20, 20, 22, .35); }
/* .flotte : la dérive seule (vidéos) */
.flotte { transform: perspective(1100px) translate3d(0, var(--py, 0px), 0) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .6s cubic-bezier(.2, .8, .2, 1); }
/* .pastille : petits blocs qui respirent, frange au survol */
.pastille { display: inline-block; animation: respire var(--dur, 8s) ease-in-out var(--del, 0s) infinite; transition: background .3s, color .3s, border-color .3s, box-shadow .3s; }
@keyframes respire { 0%, 100% { translate: 0 0; } 50% { translate: 0 -3px; } }
.pastille:hover { animation-play-state: paused; border-color: transparent; box-shadow: 0 0 0 1px rgba(255, 255, 255, .55), -2px 0 0 0 rgba(229, 38, 63, .45), 2px 0 0 0 rgba(34, 198, 232, .45), 0 14px 24px -12px rgba(0, 0, 0, .8); }
:is(.blanc, .clair) .pastille:hover { box-shadow: 0 0 0 1px rgba(20, 20, 22, .5), -2px 0 0 0 rgba(229, 38, 63, .35), 2px 0 0 0 rgba(34, 198, 232, .4); }

/* ---------- Chiffres calés comme un timecode : ils défilent 0,8 s à travers des valeurs parasites, puis se figent net ---------- */
.calage { text-shadow: 2px 0 rgba(229, 38, 63, .6), -2px 0 rgba(34, 198, 232, .6); }

/* ---------- Main de cartes (mobile, moins de 900 px) ----------
   Des cartes holographiques en éventail, toutes visibles dans un écran. Toucher une carte la sort de la main.
   Variante .petite : une carte est toujours choisie, son contenu s'affiche dans le panneau dessous (hauteur fixe). */
.main-cartes { display: none; }
@media (max-width: 899px) {
    .main-source { display: none !important; }
    .main-cartes { display: block; position: relative; margin-top: 26px; --w: min(27vw, 118px); }
    .cm-eventail { position: relative; height: calc(var(--w) * 1.55 + 46px); }
    .cm-eventail + .cm-eventail { margin-top: -6px; }
    .carte-m { position: absolute; left: 50%; bottom: 8px; width: var(--w); margin-left: calc(var(--w) / -2); z-index: var(--z, 1);
        transform: translate(var(--tx, 0px), var(--ty, 0px)) rotate(var(--rot, 0deg)) scale(var(--s, 1)); transform-origin: 50% 130%;
        transition: transform .5s cubic-bezier(.3, 1.2, .4, 1), opacity .35s, filter .35s; }
    .cm-face { all: unset; box-sizing: border-box; position: relative; display: block; width: 100%; aspect-ratio: 2 / 3; border-radius: 12px; overflow: hidden; cursor: pointer;
        background: var(--noir-2); border: 1px solid var(--ligne-2); box-shadow: 0 18px 30px -16px rgba(0, 0, 0, .8); -webkit-tap-highlight-color: transparent; }
    :is(.blanc, .clair) .cm-face { background: var(--papier); border-color: var(--ligne-c); box-shadow: 0 18px 30px -18px rgba(20, 20, 22, .45); color: var(--encre); }
    .cm-face:focus-visible { outline: 2px solid var(--rec); outline-offset: 3px; }
    .cm-visuel { position: absolute; inset: 0; display: block; }
    .cm-visuel img, .cm-visuel video { width: 100%; height: 100%; object-fit: cover; display: block; }
    .cm-visuel::after { content: ""; position: absolute; inset: 0; background: linear-gradient(transparent 45%, rgba(14, 14, 16, .85)); }
    .cm-label { position: absolute; left: 7px; right: 7px; bottom: 7px; z-index: 3; font-family: var(--mono); font-size: 9px; letter-spacing: .08em; text-transform: uppercase; line-height: 1.25; color: #fff; }
    .cm-texte { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; justify-content: space-between; padding: 10px 9px; font-family: var(--titre); font-stretch: 78%; font-weight: 600; font-size: 15px; line-height: 1.05; letter-spacing: -.01em; }
    .cm-texte small { font-family: var(--mono); font-size: 8.5px; font-weight: 400; letter-spacing: .1em; text-transform: uppercase; color: var(--gris); }
    :is(.blanc, .clair) .cm-texte small { color: var(--graphite); }
    .main-cartes.ouverte .carte-m:not(.on) { opacity: .72; }
    /* Panneau : les informations de la carte sortie */
    .cm-panneau { position: relative; }
    .cm-contenu { display: none; }
    .cm-contenu.on { display: block; animation: cm-entre .35s ease both; }
    @keyframes cm-entre { from { opacity: 0; translate: 0 8px; } to { opacity: 1; translate: 0 0; } }
    .main-cartes:not(.petite) .cm-panneau { display: none; margin-top: 12px; padding: 18px; border-radius: var(--r); background: var(--noir-2); border: 1px solid var(--ligne-2); }
    .main-cartes.ouverte:not(.petite) .cm-panneau { display: block; }
    :is(.blanc, .clair) .main-cartes:not(.petite) .cm-panneau { background: var(--papier); border-color: var(--ligne-c); }
    .cm-contenu h3 { margin: 0 0 6px; font-family: var(--titre); font-stretch: 78%; font-weight: 600; font-size: 1.45rem; line-height: 1.05; letter-spacing: -.015em; }
    .cm-contenu h3 a { color: inherit; text-decoration: none; border-bottom: 1px solid currentColor; }
    .cm-contenu p { margin: 6px 0 0; font-size: 15.5px; line-height: 1.5; color: var(--gris); }
    :is(.blanc, .clair) .cm-contenu p { color: var(--graphite); }
    .cm-contenu .mono { display: block; margin-top: 4px; font-size: 10.5px; color: var(--gris); }
    .main-cartes.petite { --w: min(22vw, 92px); }
    .main-cartes.petite .cm-eventail { height: calc(var(--w) * 1.5 + 40px); }
    .main-cartes.petite .cm-panneau { margin-top: 14px; padding: 18px; border-radius: var(--r); border: 1px solid var(--ligne-2); background: var(--noir-2); }
    :is(.blanc, .clair) .main-cartes.petite .cm-panneau { background: var(--papier); border-color: var(--ligne-c); }
}
@media (max-width: 899px) and (prefers-reduced-motion: reduce) {
    .carte-m, .cm-contenu.on { transition: none !important; animation: none !important; }
}

/* ---------- Barre de navigation du site ---------- */
nav.site { position: fixed; top: 0; left: 0; width: 100%; z-index: 1000; display: flex; justify-content: space-between; align-items: center; padding: 22px 48px; color: var(--clair); transition: background .3s ease, box-shadow .3s ease, transform .35s ease, padding .3s ease; }
nav.site:not(.solid) a, nav.site:not(.solid) button, nav.site:not(.solid) .lang-switch { text-shadow: 0 0 14px rgba(0, 0, 0, .7), 0 1px 3px rgba(0, 0, 0, .6); }
nav.site.solid { padding-block: 14px; background: rgba(14, 14, 16, .78); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: 0 1px 0 var(--ligne); }
nav.site.nav-hidden { transform: translateY(-100%); }
/* Au-dessus d'un hero clair, la barre passe à l'encre */
nav.site.sur-clair .nav-logo, nav.site.sur-clair .nav-links a, nav.site.sur-clair .lang-switch, nav.site.sur-clair .lang-switch .on, nav.site.sur-clair .nav-quick, nav.site.sur-clair .nav-menu-btn { color: var(--encre); text-shadow: none !important; }
nav.site.sur-clair .lang-switch a, nav.site.sur-clair .lang-switch .sep, nav.site.sur-clair .nav-links small { color: var(--graphite); text-shadow: none !important; }
.nav-logo { font-family: var(--titre); font-stretch: 62%; font-weight: 800; font-size: 1.2rem; letter-spacing: .3em; text-transform: uppercase; color: var(--clair); text-decoration: none; }
.nav-links { display: flex; align-items: center; gap: 36px; list-style: none; margin: 0; padding: 0; }
.nav-links a { position: relative; display: inline-block; padding-bottom: 6px; font-family: var(--mono); font-size: 12px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--clair); text-decoration: none; }
.nav-links a::after { content: ''; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px; background: var(--rec); transform: scaleX(0); transform-origin: left; transition: transform .35s cubic-bezier(.2, .8, .2, 1); }
.nav-links a:hover::after { transform: scaleX(1); }
.nav-links small { position: absolute; left: 0; top: 100%; margin-top: 8px; font-family: var(--titre); font-stretch: 78%; font-weight: 600; font-size: 20px; line-height: 1; letter-spacing: -.01em; text-transform: none; color: var(--gris); white-space: nowrap; opacity: 0; transform: translateY(-6px); transition: opacity .3s ease .05s, transform .3s ease .05s; pointer-events: none; }
.nav-links a:hover small { opacity: 1; transform: none; }
.nav-links .lang-li { display: flex; align-items: center; }
.lang-switch { display: inline-flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: 12px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; line-height: 1; color: var(--clair); }
.lang-switch .on { color: var(--clair); text-decoration: underline; text-decoration-color: var(--rec); text-underline-offset: 5px; }
.lang-switch .sep { color: var(--gris); letter-spacing: 0; }
.lang-switch a { color: var(--gris); text-decoration: none; padding: 6px 0; transition: color .3s; }
.lang-switch a:hover { color: var(--clair); }
.nav-links .lang-switch a { padding: 6px 0; }
.nav-links .lang-switch a::after { display: none; }
.nav-lang, .nav-quick, .nav-menu-btn { display: none; }
.nav-quick { font-family: var(--mono); font-size: 12px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--clair); text-decoration: none; padding: 6px 0; margin-right: 22px; }
.nav-menu-btn { font-family: var(--mono); font-size: 12px; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: var(--clair); background: none; border: 0; padding: 6px 0; cursor: pointer; }
/* Menu mobile */
.nav-ov { position: fixed; inset: 0; z-index: 2000; display: flex; flex-direction: column; padding: 20px 24px 28px; background: var(--noir); color: var(--clair); transform: translateY(-100%); visibility: hidden; transition: transform .45s cubic-bezier(.7, 0, .2, 1), visibility 0s linear .45s; }
.nav-ov.open { transform: none; visibility: visible; transition: transform .45s cubic-bezier(.7, 0, .2, 1), visibility 0s; }
.nav-ov .nav-menu-btn { display: inline-block; }
.nav-ov-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 56px; }
.nav-ov-links a { display: block; padding: 14px 0; border-bottom: 1px solid var(--ligne); color: var(--clair); text-decoration: none; opacity: 0; transform: translateY(12px); transition: opacity .4s, transform .4s; }
.nav-ov.open .nav-ov-links a { opacity: 1; transform: none; }
.nav-ov-links a:nth-child(1) { transition-delay: .12s; }
.nav-ov-links a:nth-child(2) { transition-delay: .18s; }
.nav-ov-links a:nth-child(3) { transition-delay: .24s; }
.nav-ov-links a:nth-child(4) { transition-delay: .30s; }
.nav-ov-links a:nth-child(5) { transition-delay: .36s; }
.nav-ov-links b { display: block; font-family: var(--titre); font-stretch: 78%; font-weight: 600; font-size: 40px; line-height: .95; letter-spacing: -.02em; }
.nav-ov-links small { display: block; margin-top: 4px; font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--gris); }
.nav-ov-foot { margin-top: auto; font-family: var(--mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--gris); }

/* ---------- Pied de page ---------- */
footer.site { position: relative; padding: 28px 16px 36px; border-top: 1px solid var(--ligne); text-align: center; font-family: var(--mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--gris-2); line-height: 2.4; }
footer.site a { color: var(--gris); text-decoration: none; border-bottom: 1px solid var(--ligne-2); transition: color .2s; }
footer.site a:hover { color: var(--clair); }
footer.site .sep { margin: 0 12px; }

/* ---------- Compteur de lecture (ordinateur) : timecode de la page et numéro de scène ---------- */
.compteur { position: fixed; left: 18px; bottom: 16px; z-index: 25; display: none; align-items: center; gap: 12px; padding: 8px 12px; border-radius: 10px; background: rgba(14, 14, 16, .7); border: 1px solid var(--ligne); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); color: var(--gris); font-variant-numeric: tabular-nums; transition: opacity .3s; }
.compteur b { font-weight: 500; color: var(--clair); }
.compteur.cache { opacity: 0; pointer-events: none; }


@media (max-width: 768px) {
    nav.site { padding: 18px 20px; }
    nav.site.solid { padding-block: 12px; }
    .nav-links { display: none; }
    .nav-lang { display: inline-flex; margin-left: auto; margin-right: 18px; }
    .nav-quick, .nav-menu-btn { display: inline-block; }
}
@media (min-width: 769px) {
    .wrap { padding-inline: 32px; }
    .nav-ov { display: none; }
}
@media (min-width: 900px) {
    main section { padding-block: 120px; }
    .compteur { display: flex; }
}

/* ---------- Mouvement réduit : tout s'arrête proprement ---------- */
@media (prefers-reduced-motion: reduce) {
    @view-transition { navigation: none; }
    html { scroll-behavior: auto; }
    *, *::before, *::after { transition: none !important; animation: none !important; }
    .entre { opacity: 1 !important; translate: none !important; }
    .bloc, .flotte { transform: none !important; }
    .ton::before, .ton::after { display: none; }
}

/* ==========================================================================
   PORTES : une rangée de cartes vidéo qui s'ouvre au survol (ordinateur), une main de cartes qui s'ouvre en grande carte (mobile)
   Ordinateur : <div class="portes-rangee main-source"><ul class="portes-grille" data-portes [style="--n: 5; --ratio: 1"]> <li class="porte bloc" data-amp="0" tabindex="0">
                 <div class="porte-plan"><video …></div><div class="porte-txt"><span class="mono">…</span><h3>…</h3><div class="porte-detail">…</div></div></li> … </ul></div>
   Mobile :     <div class="portes-mobile" data-portes-mobile [style="--n: 5; --ratio: 1"]> la main de cartes (.main-cartes) puis
                 <div class="po" data-allume-seul> .po-grande (.po-plan × n) · .po-minis (.po-mini × n) · .po-textes (.po-texte × n) </div></div>
   Paramètres : --n (nombre de cartes), --ratio (largeur / hauteur de la carte ouverte : 16 / 9, 1…), --hmax (hauteur maximale de la rangée),
   --fermee (largeur minimale d'une carte fermée), --fermee-etroite (la même entre 900 et 1099 px).
   ========================================================================== */
.portes-rangee { container-type: inline-size; margin-top: 34px; }
.portes-grille { --f: var(--fermee, 112px); --ecart: 12px; --h: min(var(--hmax, 440px), calc((100cqw - (var(--n, 4) - 1) * var(--ecart) - (var(--n, 4) - 1) * var(--f)) / (var(--ratio, 16 / 9))));
    list-style: none; padding: 0; margin: 0; display: flex; gap: var(--ecart); height: var(--h); }
.porte { position: relative; flex: none; height: 100%; width: calc((100cqw - (var(--n, 4) - 1) * var(--ecart) - var(--h) * var(--ratio, 16 / 9)) / (var(--n, 4) - 1)); border-radius: var(--r); overflow: hidden; color: #fff; background: var(--noir-2); cursor: pointer;
    transition: width .65s cubic-bezier(.2, .8, .2, 1), transform .5s cubic-bezier(.2, .8, .2, 1), box-shadow .5s; }
.porte.ouverte { width: calc(var(--h) * var(--ratio, 16 / 9)); cursor: default; }
.porte:not(.ouverte)::before, .porte:not(.ouverte)::after { opacity: 0 !important; }   /* le reflet holographique reste sur la carte ouverte */
.porte-plan { position: absolute; inset: 0; border-radius: inherit; overflow: hidden; }
.porte-plan video, .porte-plan img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--cadre, 50% 50%); display: block; }
.porte-plan .matiere { position: absolute; inset: 0; }
.porte-plan::before, .porte-plan::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; transition: opacity .5s; }
.porte-plan::before { background: linear-gradient(180deg, transparent 52%, rgba(14, 14, 16, .78)); }
.porte-plan::after { opacity: 0; background: linear-gradient(180deg, transparent 22%, rgba(14, 14, 16, .5) 50%, rgba(14, 14, 16, .9)); }
.porte.ouverte .porte-plan::before { opacity: 0; }
.porte.ouverte .porte-plan::after { opacity: 1; }
.porte-txt { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; padding: 16px 14px 16px; }
.porte-txt .mono { display: block; font-size: 10.5px; color: rgba(255, 255, 255, .72); }
.porte h3 { margin: 6px 0 0; font-family: var(--titre); font-stretch: 78%; font-weight: 600; letter-spacing: -.02em; font-size: 1.15rem; line-height: 1.02; transition: font-size .45s cubic-bezier(.2, .8, .2, 1); }
.porte.ouverte .porte-txt { padding: 22px 24px 22px; }
.porte.ouverte h3 { font-size: 2rem; }
.porte-detail { width: min(500px, calc(var(--h) * var(--ratio, 16 / 9) - 48px)); display: grid; gap: 7px; max-height: 0; opacity: 0; visibility: hidden; transition: opacity .3s, max-height .3s, visibility 0s .3s; }
.porte.ouverte .porte-detail { max-height: 420px; margin-top: 10px; opacity: 1; visibility: visible; transition: opacity .45s .3s, max-height .45s .2s, visibility 0s; }
.porte-detail p { margin: 0; font-size: 15px; line-height: 1.45; color: rgba(255, 255, 255, .86); }
.porte-detail .cta { justify-self: start; margin-top: 6px; }
.porte .cta { background: var(--clair); color: var(--encre); }
.porte:not(.ouverte) .porte-txt { padding-inline: 12px; }
.porte:not(.ouverte) .porte-txt .mono { font-size: 9px; letter-spacing: .04em; }
/* Mobile : toucher une carte de la main ouvre la grande carte (au format --ratio), la rangée des miniatures et le texte */
.po { display: none; margin-top: 26px; }
.portes-mobile.ouvert .main-cartes { display: none; }
.portes-mobile.ouvert .po { display: block; animation: po-entre .45s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes po-entre { from { opacity: 0; transform: translateY(10px) scale(.98); } to { opacity: 1; transform: none; } }
.po-grande { display: grid; aspect-ratio: var(--ratio, 16 / 9); border-radius: var(--r); overflow: hidden; background: var(--noir-2); box-shadow: 0 26px 40px -26px rgba(20, 20, 22, .6); }
.po-plan { grid-area: 1 / 1; position: relative; overflow: hidden; color: #fff; opacity: 0; visibility: hidden; transition: opacity .45s, visibility 0s .45s; }
.po-plan.on { opacity: 1; visibility: visible; transition: opacity .45s, visibility 0s; }
.po-plan video, .po-plan .matiere { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.po-plan::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 45%, rgba(14, 14, 16, .85)); }
.po-tete { position: absolute; left: 14px; right: 14px; bottom: 12px; z-index: 2; }
.po-tete .mono { display: block; font-size: 10px; color: rgba(255, 255, 255, .78); }
.po-tete b { display: block; margin-top: 4px; font-family: var(--titre); font-stretch: 78%; font-weight: 600; font-size: 1.55rem; line-height: 1.02; letter-spacing: -.02em; }
.po-minis { display: grid; grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); gap: 8px; margin-top: 10px; }
.po-mini { appearance: none; margin: 0; padding: 0; border: 0; position: relative; height: 58px; border-radius: 10px; overflow: hidden; cursor: pointer; background: var(--noir-2); opacity: .5; transition: opacity .3s, translate .3s; }
.po-mini.actif { opacity: 1; translate: 0 -3px; }
.po-mini:focus-visible { outline: 2px solid var(--rec); outline-offset: 2px; }
.po-mini img, .po-mini .matiere { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.po-mini::after { content: ""; position: absolute; inset: 0; background: linear-gradient(transparent 30%, rgba(14, 14, 16, .8)); }
.po-mini .mono { position: absolute; left: 6px; bottom: 5px; z-index: 2; font-size: 9px; color: #fff; }
.po-textes { display: grid; margin-top: 14px; padding: 18px; border-radius: var(--r); background: var(--papier); border: 1px solid var(--ligne-c); }
.po-texte { grid-area: 1 / 1; opacity: 0; visibility: hidden; transition: opacity .35s, visibility 0s .35s; }
.po-texte.on { opacity: 1; visibility: visible; transition: opacity .35s, visibility 0s; }
.po-texte p { margin: 6px 0 0; font-size: 15.5px; line-height: 1.5; color: var(--graphite); }
.po-texte p:first-child { margin-top: 0; }
.po-texte .cta { width: 100%; margin-top: 14px; }
@media (min-width: 900px) {
    .portes-mobile { display: none; }
}
@media (min-width: 900px) and (max-width: 1099px) {
    .portes-grille { --f: var(--fermee-etroite, 92px); }
    .porte h3 { font-size: 1rem; }
    .porte.ouverte h3 { font-size: 1.7rem; }
}
@media (prefers-reduced-motion: reduce) {
    .porte, .porte h3, .porte-detail, .porte-plan::before, .porte-plan::after, .po-plan, .po-texte, .po-mini { transition: none !important; }
    .portes-mobile.ouvert .po { animation: none; }
}

/* ==========================================================================
   LECTEUR PLEIN ÉCRAN : ouvert par [data-lecteur] (plateau.js), la version complète d'un film avec le son
   ========================================================================== */
.lecteur { padding: 0; border: 0; background: transparent; color: var(--clair); max-width: 100vw; max-height: 100vh; max-height: 100dvh; }
.lecteur[open] { width: 100vw; height: 100vh; height: 100dvh; display: grid; place-items: center; }
.lecteur::backdrop { background: rgba(14, 14, 16, .94); }
.lecteur video { display: block; max-width: min(100vw - 32px, 1280px); max-height: calc(100dvh - 120px); border-radius: var(--r); background: var(--noir); box-shadow: 0 0 0 1px var(--ligne-2), 0 40px 80px -40px rgba(0, 0, 0, .9); }
.lecteur-fermer { position: fixed; top: max(16px, env(safe-area-inset-top)); right: 16px; z-index: 2; min-height: 44px; padding: 0 18px; border-radius: 999px; border: 1px solid var(--ligne-2); background: rgba(14, 14, 16, .7); color: var(--clair); font: inherit; font-family: var(--mono); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; cursor: pointer; }
.lecteur-fermer span { font-family: var(--texte); font-size: 18px; letter-spacing: 0; margin-left: 6px; }
.lecteur-fermer:hover, .lecteur-fermer:focus-visible { border-color: var(--clair); outline: none; }