/* /expansion : scène 3D en plein écran (position fixe, 100vw × 100vh/100dvh, zéro marge, sans défilement), fond noir
   sans JS, ou ni WebGPU ni WebGL2. html.en-3d (posé après la première image rendue) masque visuellement H1 et texte SEO : clip 1 px,
   jamais display:none ni visibility:hidden ; ils sortent du flux sans rien décaler (la scène est fixe, CLS 0).
   Mobile (même requête que MOBILE dans expansion-scene-logique.js) : scène masquée, bandeau servi dans le HTML. */
/* Typo du site (Maxime) : font-face exactes de public/fonts/fonts.css (Big Shoulders Display 700, mêmes woff2 auto-hébergés,
   mêmes plages, font-display:swap), déclarées ici : la page ne charge aucune autre feuille que celle de la scène. */
@font-face{font-family:"Big Shoulders Display";font-style:normal;font-weight:700;font-display:swap;src:url(/fonts/big-shoulders-display-700-vietnamese.woff2) format("woff2");unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB}
@font-face{font-family:"Big Shoulders Display";font-style:normal;font-weight:700;font-display:swap;src:url(/fonts/big-shoulders-display-700-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:"Big Shoulders Display";font-style:normal;font-weight:700;font-display:swap;src:url(/fonts/big-shoulders-display-700-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:"Big Shoulders Repli";src:local("Big Shoulders Display Bold"),local("BigShouldersDisplay-Bold"),local("Arial Narrow Bold"),local("ArialNarrow-Bold"),local("Arial Narrow");font-weight:700}
html,body{margin:0;padding:0;background:#050203;color:#fff}
html{overflow:hidden}
#en-scene{position:fixed;top:0;left:0;width:100vw;height:100vh;height:100dvh;z-index:0;background:#050203;overflow:hidden;contain:strict}
main>h1,main>p:not(.en-mobile){position:relative;z-index:1;margin:0;padding:24px 32px 0;color:#c9b8bb}
main>h1{font-family:"Big Shoulders Display","Big Shoulders Repli","Arial Narrow",sans-serif;font-weight:700;letter-spacing:.06em}
html.en-3d main>h1,html.en-3d main>p:not(.en-mobile){position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
#en-scene .en-scene-canvas{position:absolute;inset:0;width:100%;height:100%;display:block;cursor:none}
html.en-3d #en-scene:not([data-menu]),html.en-3d #en-scene:not([data-menu]) *{cursor:none!important}
#en-scene[data-menu] .en-scene-canvas{cursor:default}
#en-scene .en-plein-ecran{position:absolute;top:12px;right:12px;z-index:3;padding:6px 8px;font:700 14px/1 "Big Shoulders Display","Big Shoulders Repli","Arial Narrow",sans-serif;letter-spacing:.08em;color:#F40700;background:none;border:0;cursor:pointer}
#en-scene .en-plein-ecran:hover,#en-scene .en-plein-ecran:focus-visible{color:#fff}
#en-scene .en-plein-ecran:focus-visible{outline:2px solid #F40700;outline-offset:2px}
#en-scene .en-plein-ecran--croix{padding:8px;line-height:0}
#en-scene .en-plein-ecran--croix,#en-scene .en-plein-ecran--croix:hover,#en-scene .en-plein-ecran--croix:focus,#en-scene .en-plein-ecran--croix:focus-visible,#en-scene .en-plein-ecran--croix:active{color:#F40700;outline:none;background:none;box-shadow:none;-webkit-tap-highlight-color:transparent}
#en-scene .en-plein-ecran-croix{position:relative;display:block;width:16px;height:16px;transition:transform .15s ease}
#en-scene .en-plein-ecran-croix::before,#en-scene .en-plein-ecran-croix::after{content:"";position:absolute;top:0;left:50%;width:2px;height:100%;margin-left:-1px;border-radius:1px;background:currentColor;transform:rotate(45deg)}
#en-scene .en-plein-ecran-croix::after{transform:rotate(-45deg)}
#en-scene .en-plein-ecran--croix:hover .en-plein-ecran-croix{transform:scale(1.25)}
@media (prefers-reduced-motion:reduce){#en-scene .en-plein-ecran-croix{transition:none}}
#en-scene[data-pause]::after{content:"Pause";position:absolute;top:48px;right:12px;z-index:2;padding:2px 8px;font:600 12px/1.4 system-ui,sans-serif;color:#fff;background:rgba(0,0,0,.8);border:1px solid #F40700;border-radius:4px;pointer-events:none}
/* Alerte d'un défaut de rendu (pipeline refusé par le navigateur, perte du GPU) : bandeau au bas de la scène, absent tant que tout va bien.
   Curseur rendu au bandeau : la scène le masque partout ailleurs. */
#en-scene .en-scene-alerte{position:absolute;left:50%;bottom:24px;z-index:4;transform:translateX(-50%);display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px 12px;box-sizing:border-box;width:max-content;max-width:min(92vw,640px);padding:10px 16px;font:600 14px/1.4 system-ui,sans-serif;color:#fff;text-align:center;background:rgba(0,0,0,.85);border:1px solid #F40700;border-radius:4px}
#en-scene .en-scene-alerte p{margin:0}
#en-scene .en-scene-alerte button{padding:4px 10px;font:inherit;color:#F40700;background:none;border:1px solid #F40700;border-radius:4px}
#en-scene .en-scene-alerte button:hover,#en-scene .en-scene-alerte button:focus-visible{color:#fff}
#en-scene .en-scene-alerte button:focus-visible{outline:2px solid #F40700;outline-offset:2px}
html.en-3d #en-scene:not([data-menu]) .en-scene-alerte,html.en-3d #en-scene:not([data-menu]) .en-scene-alerte *,#en-scene .en-scene-alerte{cursor:default!important}
html.en-3d #en-scene:not([data-menu]) .en-scene-alerte button,#en-scene .en-scene-alerte button{cursor:pointer!important}
/* Repli (ni WebGPU ni WebGL2, ou échec du montage de la scène : classe en-scene--repli) : le bandeau de l'alerte de rendu (rôle « alert »,
   message ALERTE_RENDU.REPLI, annoncé par les lecteurs d'écran), au centre de la scène ; H1 et texte SEO restent affichés (html.en-3d n'est
   posé qu'à la première image). */
#en-scene.en-scene--repli .en-scene-alerte{top:50%;bottom:auto;transform:translate(-50%,-50%)}
.en-mobile{display:none}
@media (max-width:900px),(hover:none) and (pointer:coarse){
html{overflow:visible}
body{margin:8px}
#en-scene{display:none}
main>h1,main>p:not(.en-mobile){position:static;padding:0;color:inherit;margin:revert}
.en-mobile{display:flex;align-items:center;justify-content:center;min-height:120px;margin:0;padding:24px 16px;background:#050203;color:#c9b8bb;text-align:center;font-family:"Big Shoulders Display","Big Shoulders Repli","Arial Narrow",sans-serif;font-weight:700;font-size:1.25rem;line-height:1.2;letter-spacing:.04em}
}
.en-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* Sas (première visite) : titre, touches, « Passer le portail », « Revoir le sas » ; aucune couleur hors palette. */
#en-scene .en-sas{position:absolute;inset:0;z-index:2;pointer-events:none;display:flex;flex-direction:column;align-items:center;padding:13vh 16px 11vh;color:#e9dcdf;font-family:"Big Shoulders Display","Big Shoulders Repli","Arial Narrow",sans-serif;text-align:center}
#en-scene .en-sas[hidden],#en-scene .en-sas-passer[hidden],#en-scene .en-sas-revoir[hidden]{display:none}
#en-scene .en-sas-titre{margin:0;font-family:"Big Shoulders Display","Big Shoulders Repli","Arial Narrow",sans-serif;font-weight:700;font-size:clamp(1.6rem,4.2vw,3.4rem);letter-spacing:.06em;text-transform:uppercase;color:#F40700;text-shadow:0 0 18px rgba(244,7,0,.55);opacity:0;transition:opacity 1.6s ease}
#en-scene .en-sas-titre-blanc{color:#f4ecee;text-shadow:0 0 18px rgba(244,236,238,.22)}
#en-scene .en-sas--entree .en-sas-titre{opacity:1}
#en-scene .en-sas--titre-parti .en-sas-titre{opacity:0}
#en-scene .en-sas-bas{margin-top:auto;display:flex;flex-direction:column;align-items:center;gap:22px}
#en-scene .en-sas-controles{display:flex;align-items:flex-end;justify-content:center;gap:30px;pointer-events:none;opacity:0;transition:opacity 1s ease .6s}
#en-scene .en-sas-controles[hidden]{display:none}
#en-scene .en-sas-controles--visible{opacity:.92}
#en-scene .en-sas-controles.en-sas-controles--oubli{opacity:0;transition:opacity 1.5s ease}
#en-scene .en-sas-bloc{display:flex;flex-direction:column;align-items:center;gap:8px}
#en-scene .en-sas-croix{display:flex;flex-direction:column;align-items:center;gap:6px}
#en-scene .en-sas-rang{display:flex;gap:6px}
#en-scene .en-sas-touche--active{color:#F40700;background:#0b0708}
#en-scene .en-sas-souris{display:flex;align-items:center;justify-content:center;width:46px;height:46px;color:#e9dcdf;transition:color .12s ease}
#en-scene .en-sas-souris--active{color:#F40700}
#en-scene .en-sas-libelle{font:700 13px/1 "Big Shoulders Display","Big Shoulders Repli","Arial Narrow",sans-serif;letter-spacing:.08em;color:#e9dcdf}
#en-scene .en-sas-touche{box-sizing:border-box;display:flex;align-items:center;justify-content:center;width:46px;height:46px;padding-bottom:4px;font:700 17px/1 "Big Shoulders Display","Big Shoulders Repli","Arial Narrow",sans-serif;color:#e9dcdf;background:linear-gradient(#2c2224,#171112);border:1px solid #7a6164;border-bottom:5px solid #0b0708;border-radius:7px;box-shadow:0 3px 0 #000,0 6px 12px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.09);transition:transform .06s ease,border-bottom-width .06s ease,color .12s ease,box-shadow .12s ease}
#en-scene .en-sas-touche--enfoncee{transform:translateY(4px);border-bottom-width:1px;color:#F40700;background:#0b0708;box-shadow:0 0 0 #000,0 0 14px rgba(244,7,0,.45),inset 0 1px 0 rgba(255,255,255,.05)}
#en-scene .en-sas-emplacement{min-height:2.6rem;display:flex;align-items:center}
#en-scene .en-sas-passer{pointer-events:auto;padding:.7em 1.6em;font:700 1rem/1 "Big Shoulders Display","Big Shoulders Repli","Arial Narrow",sans-serif;letter-spacing:.24em;text-transform:uppercase;color:#fff;background:rgba(5,2,3,.55);border:1px solid #F40700;border-radius:2px;cursor:pointer;animation:en-sas-in .9s ease-out both}
#en-scene .en-sas-passer:hover,#en-scene .en-sas-passer:focus-visible{background:#F40700;color:#050203;outline:2px solid #fff;outline-offset:3px}
#en-scene .en-sas-revoir{position:absolute;left:12px;bottom:12px;z-index:2;padding:4px 10px;font:600 11px/1.4 system-ui,sans-serif;color:rgba(255,255,255,.6);background:rgba(0,0,0,.55);border:1px solid rgba(244,7,0,.45);border-radius:4px;cursor:pointer}
#en-scene .en-sas-revoir:hover,#en-scene .en-sas-revoir:focus-visible{color:#fff;border-color:#F40700;outline:2px solid #F40700;outline-offset:2px}
@keyframes en-sas-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){#en-scene .en-sas *{transition:none;animation:none}}