/* Feuille du teaser, extraite telle quelle de docs/design/teaser.html (lot A, ARCHITECTURE §7.3).
   Seul ajout : les polices de la DA, servies par nous (static/fonts/, licence SIL OFL) au lieu de
   Google Fonts. Mêmes fichiers, mêmes graisses et même découpage (sous-ensemble « latin ») que ceux
   que Google servait : le rendu ne change pas, et aucune requête ne part vers un domaine tiers.
   Graisses utilisées par le teaser : Alegreya SC 700 et 800, Alegreya Sans 400, 400 italique et 500,
   IBM Plex Mono 500. */
@font-face{font-family:"Alegreya SC";font-style:normal;font-weight:700;font-display:swap;
  src:url("../fonts/alegreya-sc-700.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:"Alegreya SC";font-style:normal;font-weight:800;font-display:swap;
  src:url("../fonts/alegreya-sc-800.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:"Alegreya Sans";font-style:normal;font-weight:400;font-display:swap;
  src:url("../fonts/alegreya-sans-400.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:"Alegreya Sans";font-style:italic;font-weight:400;font-display:swap;
  src:url("../fonts/alegreya-sans-400-italique.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:"Alegreya Sans";font-style:normal;font-weight:500;font-display:swap;
  src:url("../fonts/alegreya-sans-500.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.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}

/* ==========================================================================
   L'Épreuve des Dieux · page de révélation (teaser)
   Page autonome : HTML, CSS et JS vanilla, aucun visuel du jeu.
   Tout le décor est généré : ciel en dégradés, étoiles et poussières d'or
   en canvas, tour en SVG, brume en couches CSS. Voir docs/design/DA.md.

   Aperçus pour la recette :
     ?etat=ouvert   affiche l'état « Les portes sont ouvertes »
     ?dans=12       lance un compte à rebours de 12 secondes pour voir la bascule
     ?ambiance=URL  teste une image d'ambiance (repli sur le décor généré)
   ========================================================================== */
:root{
  color-scheme:dark;
  /* Nuit */
  --night-0:#05070e; --night-1:#0a0e1c; --night-2:#141a30; --horizon:#2a2240;
  /* Pierre de la tour */
  --stone-hi:#2a3150; --stone-lo:#0c1020;
  /* Texte */
  --ink:#f1ead9; --muted:#b8b2a2; --faint:#9aa1b8;
  /* Or divin */
  --gold:#e3b552; --gold-hi:#f6d58a; --gold-deep:#a8781f;
  --gold-wash:rgba(227,181,82,.12); --gold-line:rgba(227,181,82,.32);

  --f-display:"Alegreya SC",Georgia,serif;
  --f-body:"Alegreya Sans",system-ui,sans-serif;
  --f-data:"IBM Plex Mono",ui-monospace,monospace;

  /* Composition : la tour est pilotée par 3 variables.
     --tx : axe horizontal de la tour ; --B : hauteur de sa base ; --H : sa hauteur. */
  --vh:1vh; --tx:50%; --B:calc(var(--vh) * 50); --H:min(calc(var(--vh) * 58),125vw);
}
@supports (height:1svh){:root{--vh:1svh}}
/* Grand écran : texte à gauche, tour en majesté à droite, posée au sol. */
@media (min-width:900px){:root{--tx:69%; --B:0px; --H:min(calc(var(--vh) * 94),78vw)}}

*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;height:100%}
html{overflow-x:clip}
body{
  background:var(--night-0);color:var(--ink);
  font:400 18px/1.55 var(--f-body);
  overflow-x:hidden;-webkit-font-smoothing:antialiased;
}
:focus-visible{outline:2px solid var(--gold-hi);outline-offset:3px;border-radius:4px}

/* ---------- Le décor, en calques du fond vers l'avant ---------- */
.scene{position:fixed;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.scene > *{position:absolute}

/* 1. Ciel : zénith presque noir, horizon violacé. */
.sky{inset:0;background:
  radial-gradient(120% 70% at 50% 108%,var(--horizon) 0%,transparent 60%),
  linear-gradient(180deg,var(--night-0) 0%,var(--night-1) 45%,var(--night-2) 100%)}

/* 2. Image d'ambiance (option) : invisible tant qu'elle n'est pas chargée. */
.ambiance{inset:0;background:center/cover no-repeat;opacity:0;transition:opacity 1.6s ease;
  filter:saturate(.7) brightness(.55)}
.ambiance.ready{opacity:.55}

/* 3. Étoiles (canvas) */
#stars{inset:0;width:100%;height:100%}

/* 4. Lueur divine au sommet + rayons + colonne de lumière */
.glow{left:var(--tx);top:calc(var(--vh) * 100 - var(--B) - var(--H) * .78);width:150vmax;height:110vmax;
  transform:translate(-50%,-50%);
  background:radial-gradient(closest-side,rgba(255,221,150,.40),rgba(227,181,82,.14) 38%,rgba(120,90,160,.06) 62%,transparent 100%);
  animation:breathe 10s ease-in-out infinite}
.rays{left:var(--tx);top:calc(var(--vh) * 100 - var(--B) - var(--H) * .78);width:180vmax;height:180vmax;
  transform:translate(-50%,-50%);
  background:repeating-conic-gradient(from 0deg,rgba(255,220,150,.035) 0deg 1.5deg,transparent 1.5deg 13deg);
  -webkit-mask:radial-gradient(closest-side,#000 0%,rgba(0,0,0,.5) 25%,transparent 60%);
          mask:radial-gradient(closest-side,#000 0%,rgba(0,0,0,.5) 25%,transparent 60%);
  animation:turn 140s linear infinite}
.beam{left:var(--tx);top:0;width:min(14vw,90px);height:calc(var(--vh) * 100 - var(--B) - var(--H) * .70);transform:translateX(-50%);
  background:linear-gradient(90deg,transparent,rgba(255,226,160,.20) 35%,rgba(255,240,200,.38) 50%,rgba(255,226,160,.20) 65%,transparent);
  -webkit-mask:linear-gradient(180deg,transparent,#000 35%,#000 85%,transparent);
          mask:linear-gradient(180deg,transparent,#000 35%,#000 85%,transparent);
  animation:breathe 7s ease-in-out infinite reverse}

/* 5. Crêtes et ruines lointaines */
.ridge{left:0;right:0;bottom:calc(var(--B) - 1px);width:100%;height:calc(var(--vh) * 30)}
.ground{left:0;right:0;bottom:0;height:var(--B);background:linear-gradient(180deg,#070a14,#04060c)}

/* 6. La tour */
.tower{left:var(--tx);bottom:var(--B);height:var(--H);width:calc(var(--H) * .6);transform:translateX(-50%)}
.tower .ledge{fill:#151a2e}
.tower .rim{stroke:var(--gold-hi);stroke-width:1.4;opacity:.6;fill:none}
.tower .win{fill:#04060c}
.tower .win.lit{fill:url(#warm)}
.tower .seal circle{fill:none;stroke:var(--gold);stroke-width:1.2;opacity:.45}
.tower .seal text{fill:var(--gold);opacity:.7;font-family:var(--f-display);font-weight:700;text-anchor:middle;dominant-baseline:central}
.tower .gate{fill:url(#gateGlow);opacity:.35;transition:opacity 1.2s ease}
.tower .tier{transition:filter 1s ease}

/* 7. Brume en bandes qui dérivent (transform seul : peu coûteux) */
.crown{left:var(--tx);top:calc(var(--vh) * 100 - var(--B) - var(--H) * .66);width:calc(var(--H) * 1.1);height:calc(var(--H) * .36);
  transform:translate(-50%,-50%);
  background:
    radial-gradient(34% 30% at 50% 58%,rgba(196,190,215,.30),transparent 75%),
    radial-gradient(48% 22% at 36% 66%,rgba(150,156,192,.26),transparent 75%),
    radial-gradient(44% 20% at 66% 50%,rgba(150,156,192,.24),transparent 75%),
    radial-gradient(26% 26% at 52% 36%,rgba(255,226,170,.16),transparent 75%);
  animation:breathe 12s ease-in-out infinite}
.fog{left:0;width:200%;background-repeat:repeat-x;background-size:50% 100%;will-change:transform}
.fog-high{top:calc(var(--vh) * 100 - var(--B) - var(--H) * .92);height:calc(var(--H) * .42);opacity:.95;
  background-image:
    radial-gradient(28% 34% at 22% 52%,rgba(178,176,205,.28),transparent 70%),
    radial-gradient(22% 26% at 48% 38%,rgba(255,226,170,.16),transparent 70%),
    radial-gradient(30% 30% at 74% 60%,rgba(150,158,196,.24),transparent 70%),
    radial-gradient(40% 22% at 50% 75%,rgba(120,128,170,.20),transparent 70%);
  animation:drift 110s linear infinite}
.fog-mid{top:calc(var(--vh) * 100 - var(--B) - var(--H) * .58);height:calc(var(--H) * .30);opacity:.7;
  background-image:
    radial-gradient(26% 30% at 15% 50%,rgba(140,150,190,.16),transparent 70%),
    radial-gradient(34% 26% at 62% 44%,rgba(140,150,190,.13),transparent 70%);
  animation:drift 160s linear infinite reverse}
.fog-ground{bottom:calc(var(--B) - var(--vh) * 10);height:calc(var(--vh) * 40);
  background-image:
    radial-gradient(30% 50% at 20% 70%,rgba(96,106,150,.34),transparent 72%),
    radial-gradient(36% 46% at 64% 62%,rgba(96,106,150,.30),transparent 72%),
    linear-gradient(180deg,transparent,rgba(8,10,20,.65) 70%);
  animation:drift 90s linear infinite}

/* 8. Poussières d'or (canvas) et vignette pour la lisibilité */
#motes{inset:0;width:100%;height:100%}
.vignette{inset:0;background:
  radial-gradient(120% 90% at 50% 40%,transparent 55%,rgba(2,3,8,.75) 100%),
  linear-gradient(180deg,transparent 45%,rgba(4,6,12,.55) 100%)}

@keyframes drift{to{transform:translate3d(-50%,0,0)}}
@keyframes breathe{0%,100%{opacity:.78}50%{opacity:1}}
@keyframes turn{to{transform:translate(-50%,-50%) rotate(360deg)}}

/* ---------- Le contenu ---------- */
.stage{
  position:relative;z-index:1;min-height:calc(var(--vh) * 100);
  display:flex;flex-direction:column;align-items:center;justify-content:flex-start;
  text-align:center;gap:16px;
  /* Petit écran : la tour occupe le haut, le texte commence au pied de la tour, dans la brume. */
  padding:calc(var(--vh) * 100 - var(--B) - 34px) max(16px,env(safe-area-inset-right)) max(24px,env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left));
}
.stage > *{position:relative}
.halo{position:absolute;left:0;right:0;top:calc(var(--vh) * 100 - var(--B) - 120px);bottom:0;
  background:radial-gradient(60% 50% at 50% 45%,rgba(4,6,13,.78),rgba(4,6,13,.5) 60%,transparent 85%);pointer-events:none}
.eyebrow{font:500 12px/1.4 var(--f-data);letter-spacing:.22em;text-transform:uppercase;color:var(--gold);
  text-shadow:0 1px 8px rgba(0,0,0,.9)}
h1{margin:0;font-family:var(--f-display);font-weight:800;line-height:.92;letter-spacing:.015em;
  font-size:clamp(44px,7.4vw,108px);text-wrap:balance;
  text-shadow:0 2px 24px rgba(0,0,0,.85),0 0 60px rgba(4,6,13,.9)}
h1 .l1{display:block;color:var(--ink)}
h1 .l2{display:block;color:var(--gold-hi)}
@supports (-webkit-background-clip:text) or (background-clip:text){
  h1 .l2{background:linear-gradient(180deg,#fdeec4 5%,#f0c86a 55%,#d6a043 100%);
    -webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:none;
    filter:drop-shadow(0 2px 14px rgba(0,0,0,.9))}
}
.rule{width:min(240px,50vw);height:12px;display:block;margin:0 auto;color:var(--gold)}
.lore{margin:0;max-width:34em;font-size:clamp(17px,2.1vw,20px);color:var(--muted);text-wrap:pretty;
  text-shadow:0 1px 10px rgba(0,0,0,.95)}
.lore em{display:block;margin-top:8px;font-style:italic;color:var(--ink)}

/* Compte à rebours */
.countdown{display:grid;gap:12px;justify-items:center;margin-top:6px}
.cd-label{font:500 12px/1.3 var(--f-data);letter-spacing:.18em;text-transform:uppercase;color:var(--faint)}
.cells{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(6px,1.6vw,14px);width:min(560px,100%)}
.cell{position:relative;display:grid;gap:4px;justify-items:center;padding:clamp(10px,2vw,16px) 4px clamp(8px,1.6vw,12px);
  background:linear-gradient(180deg,rgba(26,31,54,.82),rgba(9,12,24,.88));
  border:1px solid rgba(143,150,173,.22);border-radius:6px;
  box-shadow:inset 0 1px 0 var(--gold-line),0 10px 30px rgba(0,0,0,.45)}
.cell b{font:500 clamp(30px,8vw,64px)/1 var(--f-data);font-variant-numeric:tabular-nums;color:var(--ink);letter-spacing:-.02em}
.cell span{font:500 clamp(10px,1.6vw,12px)/1 var(--f-data);letter-spacing:.14em;text-transform:uppercase;color:var(--faint)}
.date{margin:0;font-size:16px;color:var(--muted);text-shadow:0 1px 8px rgba(0,0,0,.95)}
.date strong{color:var(--ink);font-weight:500}
.local{display:block;font-size:14px;color:var(--faint)}

/* État « portes ouvertes » */
.opened{display:grid;gap:12px;justify-items:center;margin-top:6px}
.opened h2{margin:0;font:700 clamp(30px,5.6vw,54px)/1.05 var(--f-display);color:var(--gold-hi);
  text-shadow:0 0 30px rgba(227,181,82,.45),0 2px 16px rgba(0,0,0,.9)}
.opened p{margin:0;max-width:30em;color:var(--muted);text-shadow:0 1px 8px rgba(0,0,0,.95)}
.enter{display:inline-flex;align-items:center;gap:10px;min-height:48px;padding:12px 26px;border-radius:6px;
  background:linear-gradient(180deg,#f2cf7c,#d9a441);color:#1b1407;text-decoration:none;
  font:700 17px/1 var(--f-display);letter-spacing:.06em;box-shadow:0 0 0 1px rgba(255,236,190,.5),0 8px 30px rgba(227,181,82,.35)}
.enter:hover{background:linear-gradient(180deg,#f8dc98,#e3b552)}
[hidden]{display:none!important}

footer{position:relative;z-index:1;text-align:center;padding:0 16px max(16px,env(safe-area-inset-bottom));
  font-size:13px;color:var(--faint);text-shadow:0 1px 6px #000}
footer a{color:var(--gold);text-underline-offset:3px}

.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* Bascule : portes ouvertes */
body.is-open .gate{opacity:1}
body.is-open .glow{background:radial-gradient(closest-side,rgba(255,226,160,.55),rgba(227,181,82,.22) 38%,rgba(120,90,160,.06) 62%,transparent 100%)}
body.is-open .seal circle{opacity:.85}
body.is-open .seal text{opacity:1}
body.opening .tier{animation:wake 1.4s ease both;animation-delay:calc(var(--i) * 160ms)}
@keyframes wake{0%{filter:none}40%{filter:brightness(2.2) drop-shadow(0 0 8px rgba(246,213,138,.9))}100%{filter:none}}
body.opening .opened{animation:rise 1.6s ease both}
@keyframes rise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}

@media (min-width:900px){
  .stage{align-items:flex-start;justify-content:center;text-align:left;
    padding:48px 0 48px max(7vw,32px);max-width:min(52vw,720px)}
  .halo{left:0;top:0;bottom:0;width:62vw;transform:none;
    background:linear-gradient(90deg,rgba(4,6,13,.72),rgba(4,6,13,.45) 60%,transparent)}
  .rule{margin:0}
  .countdown,.opened{justify-items:start}
  .opened p{text-align:left}
}

/* Petits écrans */
@media (max-width:520px){
  body{font-size:17px}
  .stage{gap:12px}
  .date{font-size:15px}
}
@media (max-height:640px) and (min-width:700px){
  h1{font-size:clamp(40px,7vw,80px)}
  .stage{gap:12px}
}

/* Mouvement réduit : le décor est figé, le compte à rebours continue. */
@media (prefers-reduced-motion:reduce){
  .fog,.glow,.beam,.rays,.crown{animation:none!important}
  body.opening .tier,body.opening .opened{animation:none!important}
  .ambiance,.gate{transition:none}
}