:root{
  --cur: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAABmJLR0QA/wD/AP+gvaeTAAADOElEQVRYhe3WTWhcVRTA8f95983HmzuJGocBi4SKVEQpaYOokEV3fq9VcKWbuqmg0jTLuHOmQRFB6c4gaK3gB1KpCGItFKGJBK1IobZIkGoHm695SWf67j0uZiZOk3YR52Vw4Vm8d9/jwPndy73nPfivxFdDQ2/OlcuzF8rlkX7Wlc7gl3J5JQqCYs258xdrtXufBtcPQNAZzCfJ/LL3nGs2775g7advQNRXwFyjcf7dZoPPc3lReKJp7XdTAwOlvgEAULgjiDgeReaasCfx/vTrUTTcP0A7/jQBRwtRWBd2ahDMVK3d01cAwCLwUZTPXAlkyKmeqhaL+/oC0PULxAjH8jnzuzGRqn5dLRaf2VaAdiqjaFvSVPgklzHnTBCi+mHF2le3DdCq3YVo373Cl5lQZowRgamKtW9pVw9JF3C9YR2hwLdhwDehQeBA1drpI5BJHbBeUNtl24gOajYIOB4aUXhuwdoTlVJpIFVAN4IuRPe++FmEY2EQONjn19ZOHi4Wy+kANi1953Ez4jeE901gGrDbqZ6pDg7u6h2wjtg4+42gVlwGpgMJl2CHd+50tVAY3Sog3PyqteG0C9GZdVbhAefIATkgq0oOvIAEUPJwsmrtrvE4/uNfA7obkQIGSNqI29Qz5hUPlxXmBZYC+EthGVgWkdpqHF/pYQW6Dp3C/c7xSOL0s9DIryJcEqEmJCVlZiKOn9xKoZvFhk74z+DhJOGxxGHg6qjzroOaFQkFHj+cz9+VOgDgB3+VsSRhzHlF5DVRPbBT1dza3g9ngQY4NebF1AE5VUYba363c07h+UP1+iSrq0dVtT7iWytwTYQfhdDD/knIpwq40yvDzjUEnjoUx9MAByE28N6I90krWZkRIYDBgrXPpglYdXBJRR4aj+MT12cFRyII79HWaVhAuQjewUupAXw2uz+fydw3Ecc/bUw6WK+f9arf7/XqoPVdOAPGwN5KFD2YCmBiYWHp5cXFxZslisg7w2BuR9vf4da5EGNe6AVwg05441iL44/z1r79qOeWQTQZQkIHcxn4oBfAln4qqtZOAa+oyBciMjW+snKql+JbjknIVgqFHX0t+n9sd/wNbEh3I0OakdEAAAAASUVORK5CYII=) 3 2, auto;
  --curp: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAEuElEQVR4nO2XTWwVVRiGnzPnnJn+3Gu5hSIFEWhrpTVIsP4EBUoUbTGGogbRCAtNZCOJiVs1hoXGuHFjYiAuaowmiiRAMKm4ECMQXZAgQkByIf6BSLHJtb2l986c+VzMbXuBir3V7niT2cw5837v93vOQOVQQBVAI+xqhDOdYAC/tDbt0CQGm+7xvP6HtBYND5aM20rJvCkIsBoiBc93+f6szdXVBPCCJFyGCqNQqQBvAbAIbpkHz3RYK23GSIvndaegrR1cpZyVCrC/wsg52LDS2qYRiA+FYbzG2hkhrD+RCDDTJUABai1kfHj6ySCQ41HE12HI2iCQNGxcDZnRfZWImCyMgEpBT4fnSTaTcWuslWat5VQmEz+gtUtBz+vjtTApVBIB7wDoAszo8n0UcNw5fotjQhF51Pe9AmRWJ5yT5q0kX6oXTBp0h7X86Bz9cYwAp+OYxcaQBq834ZRJe1WJgAA8SeYA/SI4IAbyktgT0C5Zn3QNVNQFw6B0ibw8dKMkegrFN5VBBFQQ4+kS8H/hhoAbAv5NgMf4+W8GwarSHJgICvQg2IbS/tK3Htdpz4kmoWJ8nks3KAP6MgQramv1qXzeTMSmgHowK2pr/aF8XjeCXIIoC2ST5YjktLyig6+eJwbQ7eBOQHgnzO2DmSQ3nZpsPu/9BY2XRYjVuIwYuCzCRWh8N59v/7n0CgibYEDg/FrQfcm1LSo9AsgV3ioIt0LwPiyJ4PEMbFhuzJzl1mLAUwmr6QmC4KRzPDU4CMCn6TRtWrOnUCjUQBQlsY9/cI6vwvDCeZHPDOzeDMe3w4gadzwqj2Y10HUTbLpD6+6V1tZ2+j4ppTgSRfwex2PeOiDrHPuKRQAe831atB47BBSQVor7rCUAvg1D+gqF/Ann9vfDR8AXwBCAaoIlRdhYo9QTd1nb1mktVilOOueORpH6LorUkFwzeP+pqK7J773WyiPWylJjdFGEA8Uih8Pw1J9xvMuHTzwH8wVWWaVab/U85ngeF0U4EkUciSImMD5pRMD3JZ6cCA1KsVBrapS6TWCVg/ljngSwqAA9DbCpw5hlXb7vLdCafhG+CcOxFAhQAPrjmNPOAdCqNQ2eR1AWnrRSrLCWVq0ZcI7Pi8X4cBgePZekYDdwdnTvaK9GHsj9kDkISwPomafUuruNmbXMGC8GpYARMOuCIDjtHM8ODiLAx+k0rVqzt1AoVEEUAxbkrHNyMAz7z4jsG4E9rXAsC5deA29bkiGnykSPdoO3BaLtIC3QeGa8DatawOuHh99LpV4pKBU/NzjoAfSm07Ev4r04NPTGTPgymwRqBAhnwMA2uHAQZGfirFA2E0bbQUovHKB2gN6RiPmjGy4a0EWoWl9XJ2/ncrdXKUWz1qSUoggs1ppzzlEPv7xcV3dsdy6nZkNBgzsE8lLiXEhZ/5cX6tUoV6j6kug4QBbmctEA5PcWCvGbqRSvVleTjWOatWbH8HB8AYaP5nJD+xPesMzYFUanCgPQDD0ZkK1BEP1UXy/ZTEbeqqlxDSDNsP46jv1nKMDcDLWLoHc2yDs1Ne7DVMo1gCyAD9ohRVIv0/aX7AGmE8xc2LkQZLFSMg8ObUkMGyo84v8Gxr67zIU3H/8AAAAASUVORK5CYII=) 16 2, pointer;
  --curt: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAeCAYAAAAsEj5rAAAABmJLR0QA/wD/AP+gvaeTAAABp0lEQVRIieWVsW4TQRRFz92xkbERSJEcIVfhA0iFCDUN/0KRwvkAaKmC+BxKqnRIQYmQKOgcJEspwNn1rr1zKTaW0mTHsCmQeNUbzX1H9+m90cC/HkoJZpPJsLKngO9Jx5PZLP9r4IednYdPpY9P+v0DgO9VdfIFXh1eXv68rSZrA5ZlubewDzbnhf2iLMu9tppe26VDKL5VFScho64j49WKdQh/1vK74fCZ4D3SAOgD+/NM2LBrA5wCK6RViPH1UZ5/bnUo2EV6fg0DYBx9U7Lf2HdheJx0eDPewmA4GhWf7o9Yr2terpYMrq4Gh1DeVtM6lDdNoYNNaNp1GywJFDhCFRB9iWi3wpJAAEvlxmGUqs5AYNkDAhBhmRK37iFAtJc9rqdnF52BlopgkAGpOxA7D4DU5J2BkvIAZM1u3wEQFj0gCpAWKX1yyopxMY8l87ois5PAbVr+1TdETLaFwyQwwMUjXEVEwBedgcD5uI61m5dy1hmY2WcPpAESwT5P6lMC5flXgzd5Z+AUihp+rO3ZFO7gpQDKOHVM/rjbA0PkeCva/xm/AVnouMOW7YtaAAAAAElFTkSuQmCC) 10 14, text;
}
/* =============================================================
   VengeancePact - Ambiance sombre / confessionnal maudit
   ============================================================= */

:root{
  --noir:        #050506;
  --noir-2:      #0b0b0d;
  --rouge:       #e01818;
  --rouge-vif:   #ff2020;
  --rouge-sombre:#7a0b0b;
  --cendre:      #9a9a9a;
  --brume:       rgba(180,0,0,.05);
  --fs-std:      1.2rem;   /* STANDARD de taille de police du site (a propager partout) */
}

*{ box-sizing:border-box; margin:0; padding:0; }

/* Curseur demoniaque (crane) sur tout le site */
html, body{ cursor:var(--cur); }
a, button, .btn, .hit, label, select, .corner a, .devbar select, [onclick],
input[type=checkbox], input[type=radio]{ cursor:var(--curp); }
input[type=text], input[type=email], textarea{ cursor:var(--curt); }

/* Bouton ON/OFF du son (en-tete) : bascule haut-parleur / haut-parleur barre selon l'etat */
#sound-toggle .snd-off{ display:none; }
#sound-toggle[data-muted="1"] .snd-on{ display:none; }
#sound-toggle[data-muted="1"] .snd-off{ display:inline; }
#sound-toggle:hover{ border-color:#e04b4b; box-shadow:0 0 10px rgba(200,0,0,.45); }

html,body{ height:100%; }

html{
  background:
    radial-gradient(circle at 50% 30%, #14060700 0%, #000 75%),
    radial-gradient(circle at 50% 120%, #2a0303 0%, var(--noir) 60%);
  background-color:var(--noir);
}
body{
  background:transparent;
  transition:opacity .34s ease;   /* fondu du contenu lors des transitions ; la brume (html) reste */
  color:var(--cendre);
  font-family:"EB Garamond", Georgia, serif;
  min-height:100vh;
  overflow-x:hidden;
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:60px 20px;
}

/* --- Brume mouvante --------------------------------------- */
body::before{
  content:"";
  position:fixed; inset:-50%;
  background:
    radial-gradient(ellipse at 20% 30%, var(--brume), transparent 40%),
    radial-gradient(ellipse at 80% 70%, var(--brume), transparent 40%);
  animation:brume 22s ease-in-out infinite alternate;
  pointer-events:none;
  z-index:0;
}
@keyframes brume{
  from{ transform:translate(-3%, -2%) scale(1); }
  to  { transform:translate(3%, 2%) scale(1.15); }
}

/* Brume mouvante PERSISTANTE : posee sur <html> (jamais remplace lors des
   transitions) -> elle ne se coupe jamais quand on change de page. */
html::before, html::after{
  content:""; position:fixed; inset:-30%; z-index:-1; pointer-events:none;
  background-image:url(/static/img/fog.svg); background-repeat:repeat;
}
html::before{ background-size:620px 620px; opacity:.20; animation:fogA 53s linear infinite; }
html::after { background-size:880px 880px; opacity:.14; animation:fogB 87s linear infinite; }
/* Pendant une transition de page, on met la brume en pause : moins de compositing
   -> le curseur personnalise ne "lache" plus vers la fleche Windows. */
html.vp-transit::before, html.vp-transit::after{ animation-play-state:paused; }

/* ===== Sequence de PRESSION avant l'ouverture (voir opening.js) ========= */
#vp-open-layer{ position:fixed; inset:0; z-index:60; pointer-events:none; overflow:hidden; }
#vp-open-layer::before{ content:""; position:absolute; inset:0;
  background:radial-gradient(ellipse at 50% 45%, rgba(150,0,0,.09), transparent 70%);
  animation:vpVeilFlick .32s steps(2) infinite; }
@keyframes vpVeilFlick{ 0%{opacity:.2;} 50%{opacity:.55;} 100%{opacity:.3;} }
.vp-rune{ position:absolute; color:#c81414; font-family:serif; opacity:0;
  text-shadow:0 0 6px rgba(200,0,0,.5); animation:vpRuneFlash .3s ease-out forwards; }
.vp-rune.halo{ color:#ff3030; text-shadow:0 0 10px rgba(255,30,30,.95), 0 0 24px rgba(200,0,0,.7); }
@keyframes vpRuneFlash{ 0%{opacity:0;transform:scale(.7);} 30%{opacity:.95;} 100%{opacity:0;transform:scale(1.15);} }
.vp-warn{ position:absolute; color:#e01818; font-family:"EB Garamond",serif; font-size:1.35rem;
  font-weight:700; white-space:nowrap; text-shadow:0 0 8px rgba(200,0,0,.75); opacity:0;
  animation:vpWarnIn .16s ease-out forwards; }
.vp-warn.out{ animation:vpWarnOut .5s ease-in forwards; }
@keyframes vpWarnIn{ from{opacity:0;transform:scale(.8);} to{opacity:1;transform:scale(1);} }
@keyframes vpWarnOut{ to{opacity:0;} }
.vp-cmd{ position:fixed; left:50%; top:62vh; transform:translateX(-50%);
  width:min(560px,84vw); height:172px; background:#050202; border:1px solid #c81414;
  border-radius:6px; box-shadow:0 0 16px rgba(200,0,0,.5); overflow:hidden; z-index:61; }
.vp-cmd.out{ opacity:0; transition:opacity .5s; }
.vp-cmd-head{ background:#140708; color:#ff4040; font-size:.78rem; letter-spacing:.2em;
  padding:5px 12px; border-bottom:1px solid #2a1010; }
.vp-cmd-body{ padding:8px 14px; height:calc(100% - 30px); overflow:hidden;
  color:#e01818; font-family:"Courier New",monospace; font-size:.98rem; line-height:1.5; }
.vp-cmd-line{ white-space:nowrap; text-shadow:0 0 5px rgba(200,0,0,.55); }
#vp-open-layer.vp-open-flash{ animation:vpOpenFlash .6s ease-out; }
@keyframes vpOpenFlash{ 0%{background:rgba(220,0,0,0);} 25%{background:rgba(220,0,0,.3);} 100%{background:rgba(0,0,0,0);} }
/* Petit panneau de controle de la page de test */
.vp-testctrl{ position:fixed; left:14px; top:60px; z-index:100000; background:#0a0506;
  border:1px solid #c81414; border-radius:8px; padding:12px 14px; font-family:system-ui,sans-serif;
  color:#e0b0b0; box-shadow:0 0 14px rgba(200,0,0,.4); }
.vp-testctrl h4{ margin:0 0 8px; color:#ff4040; font-size:.85rem; letter-spacing:.1em; }
.vp-testctrl label{ font-size:.8rem; display:block; margin:6px 0 2px; }
.vp-testctrl input{ width:80px; }
.vp-testctrl button{ margin-top:10px; margin-right:6px; background:#1a0303; color:#ff5555;
  border:1px solid #c81414; border-radius:5px; padding:6px 14px; cursor:pointer; }
/* Choix de l'animation de transition (2 radios) */
.vp-testctrl .t-anim{ border:1px solid #5a0808; border-radius:5px; margin:9px 0 2px; padding:5px 9px 8px; text-align:left; }
.vp-testctrl .t-anim legend{ font-size:.72rem; padding:0 5px; color:#ff8a8a; letter-spacing:.04em; }
.vp-testctrl .t-anim label{ display:flex; align-items:center; gap:7px; margin:3px 0; font-size:.8rem; cursor:var(--curp); }
.vp-testctrl .t-anim input[type=radio]{ width:auto; margin:0; accent-color:#c81414; cursor:var(--curp); }

.wrap{ position:relative; z-index:2; max-width:720px; width:100%; }

/* --- Titre ------------------------------------------------- */
.title{
  font-family:"Titrale", "Cinzel", serif;
  font-weight:700;
  font-size:clamp(3rem, 11vw, 7rem);
  letter-spacing:.06em;
  color:var(--rouge);
  line-height:1;
  text-shadow:0 0 10px var(--rouge-sombre);
  animation:halo 5s ease-in-out infinite;
}
/* Une pulsation de lueur par cycle, avec un temps mort entre chaque
   -> le nom clignote moins souvent. */
@keyframes halo{
  0%,55%,100%{ text-shadow:0 0 8px #5a0000, 0 0 20px #7a0b0b; opacity:.9; }
  68%        { text-shadow:0 0 20px var(--rouge), 0 0 55px var(--rouge-sombre); opacity:1; }
  82%        { text-shadow:0 0 8px #5a0000, 0 0 20px #7a0b0b; opacity:.9; }
}

/* --- Nom du site en IMAGE (titre) ------------------------- */
.title-img{
  display:block; width:min(760px, 86vw); height:auto; margin:0 auto;
  animation:titleGlow 5s ease-in-out infinite;
}
@keyframes titleGlow{
  0%,55%,100%{ filter:drop-shadow(0 0 6px rgba(150,0,0,.5)) drop-shadow(0 0 16px rgba(120,0,0,.4)); }
  68%        { filter:drop-shadow(0 0 18px rgba(224,24,24,.9)) drop-shadow(0 0 44px rgba(150,0,0,.55)); }
}
/* Voile de fumee sur le nom (quelques lettres) */
.title-smoke{
  position:absolute; inset:0; pointer-events:none; z-index:2;
  background:url(/static/img/fog.svg); background-size:340px 340px; background-repeat:repeat;
  -webkit-mask:url(/static/img/title.png) center / 100% 100% no-repeat;
          mask:url(/static/img/title.png) center / 100% 100% no-repeat;
  mix-blend-mode:screen; opacity:.5;
  animation:titleSmoke 22s linear infinite;
}
@keyframes titleSmoke{ from{ background-position:0 0; } to{ background-position:340px 340px; } }
/* Accueil ferme : nom sans lueur ni fumee (aspect attenue) */
body.name-dim .title-img{ animation:none; filter:none; }
body.name-dim .title-smoke{ display:none; }

/* Police infernale auto-hebergee (Eater) pour le nom du site */
@font-face{
  font-family:"Infernale";
  src:url(/static/fonts/eater.woff2) format("woff2"),
      url(/static/fonts/eater.ttf) format("truetype");
  font-weight:400; font-style:normal; font-display:swap;
}
/* Police des TITRES de page (serif inscriptionnel, style de ta planche) */
@font-face{ font-family:"Titrale"; src:url(/static/fonts/cinzel-400.woff2) format("woff2"); font-weight:400; font-style:normal; font-display:swap; }
@font-face{ font-family:"Titrale"; src:url(/static/fonts/cinzel-700.woff2) format("woff2"); font-weight:700; font-style:normal; font-display:swap; }
/* Nom du site en TEXTE (langues autres que FR) : meme relief rouge/lueur */
.title-text{
  display:block; margin:0 auto 4px; max-width:92vw; text-align:center;
  font-family:"Cinzel","Titrale","Noto Serif",serif; font-weight:700;
  font-size:clamp(2.4rem, 8.5vw, 6rem); line-height:1.06; letter-spacing:.02em;
  color:#d21a1a;
  text-shadow:0 0 14px rgba(210,20,20,.75), 0 0 42px rgba(150,0,0,.55), 0 2px 2px rgba(0,0,0,.85);
  animation:title3d 5s ease-in-out infinite;
}
/* Titre TEXTE a deux lignes (ar/hi...) : meme esprit que les images (petit / grand mot). */
.title-text .tt-small, .title-text .tt-big{
  display:block; font-family:"Cinzel","Noto Serif",serif; font-weight:700; letter-spacing:.03em;
  color:#d21a1a;
  text-shadow:0 1px 0 #7a0f0f, 0 2px 0 #4c0808, 0 3px 5px rgba(0,0,0,.85),
              0 0 16px rgba(220,20,20,.8), 0 0 46px rgba(150,0,0,.5);
}
.title-text .tt-small{ font-size:clamp(1.2rem, 3.6vw, 2.6rem); color:#bf1e1e; margin-bottom:.06em; }
.title-text .tt-big{ font-size:clamp(2.8rem, 10vw, 7rem); line-height:1; }
/* teinte propre a chaque langue (comme les images qui different) */
html[lang="hi"] .title-text .tt-big{ color:#e6331a;
  text-shadow:0 1px 0 #7a1a0f, 0 2px 0 #4c0e08, 0 3px 5px rgba(0,0,0,.85), 0 0 16px rgba(240,70,20,.8), 0 0 46px rgba(190,40,0,.5); }
html[lang="ar"] .title-text .tt-big{ color:#d2143c;
  text-shadow:0 1px 0 #7a0f22, 0 2px 0 #4c0814, 0 3px 5px rgba(0,0,0,.85), 0 0 16px rgba(220,20,70,.8), 0 0 46px rgba(160,0,50,.5); }
/* En mode texte, on cache les effets lies a l'IMAGE (masque/gouttes) */
.title-wrap.text-mode .title-smoke,
.title-wrap.text-mode .title-blood{ display:none; }
/* Accueil FERME : nom du site entierement masque (plus enigmatique) */
body.closed .title-wrap{ display:none; }
/* Accueil FERME (hors maintenance) : coin bas-droite entierement masque
   (Soutenir + ? + version). La maintenance garde sa version. */
body.closed:not(.maintenance) .corner{ display:none; }
/* Page maintenance : les deux phrases centrees verticalement (autant d'espace
   au-dessus du rouge que sous le blanc) ; le tournevis flotte plus bas. */
body.ferme .wrap{ justify-content:center; }   /* page auto-kick : tout centre verticalement */
/* Maintenance : les deux phrases centrees dans la hauteur AU-DESSUS du tournevis ;
   le tournevis reste en bas, a sa place. */
.ms-intro{ flex:1 1 auto; display:flex; flex-direction:column; justify-content:center; align-items:center; width:100%; }
body.maintenance #ms-svg{ margin:0 0 7vh; }

/* Page "curiosite" (Easter egg) : brume seule, pas de cierges ni d'eclair */
body.curiosite .candle{ display:none; }
body.curiosite #storm{ display:none; }

/* ARG : message box "tricheur" (contour rouge demoniaque fissure, fond noir) */
.secret-modal{ position:fixed; inset:0; z-index:100000; display:none;
  align-items:center; justify-content:center; background:rgba(0,0,0,.72); }
.secret-modal.show{ display:flex; }
.secret-box{ position:relative; background:#050202; color:#e01818;
  border:2px solid #c81414; border-radius:16px; padding:34px 40px;
  max-width:min(90vw,460px); text-align:center; font-family:"EB Garamond",serif;
  box-shadow:0 0 0 2px #3a0000, 0 0 28px rgba(200,0,0,.55), inset 0 0 30px rgba(120,0,0,.35);
  animation:secretPop .28s ease-out; }
.secret-box::before{ content:""; position:absolute; inset:6px; border-radius:11px;
  border:1px dashed rgba(224,24,24,.5); pointer-events:none; }
@keyframes secretPop{ 0%{ transform:scale(.85); opacity:0; } 100%{ transform:scale(1); opacity:1; } }
.secret-text{ font-size:1.32rem; line-height:1.5; margin:0 0 22px; text-shadow:0 0 10px rgba(200,0,0,.5); }
.secret-ok{ font-family:"Creepster",cursive; letter-spacing:.08em; font-size:1.25rem;
  background:#1a0303; color:#ff4040; border:1px solid #c81414; border-radius:9px;
  padding:8px 26px; cursor:var(--curp);
  transition:background .2s, box-shadow .2s; }
.secret-ok:hover{ background:#2a0505; box-shadow:0 0 16px rgba(200,0,0,.6); }

/* ===== Reussite de TOUS les secrets : flash rouge transparent glitche + 2 yeux rouges demoniaques ===== */
.vp-allsecrets{ position:fixed; inset:0; z-index:120000; pointer-events:none;
  display:flex; align-items:center; justify-content:center; overflow:hidden;
  mix-blend-mode:normal; animation:vpAsFlash 2s ease-out forwards; }
@keyframes vpAsFlash{
  0%{ background:rgba(150,0,0,0); }
  8%{ background:rgba(180,0,0,.4); }
  16%{ background:rgba(80,0,0,.14); }
  26%{ background:rgba(200,0,0,.46); }
  36%{ background:rgba(70,0,0,.18); }
  50%{ background:rgba(150,0,0,.3); }
  75%{ background:rgba(80,0,0,.18); }
  100%{ background:rgba(80,0,0,0); }
}
/* Yeux 3x plus gros mais plus EFFACES (contraste/opacite reduits) */
.vp-allsecrets .vp-eyes{ display:flex; gap:min(13vw,150px); opacity:.5;
  animation:vpAsEyesIn .4s ease-out .1s both, vpAsGlitch .11s steps(2,end) 0s 16; }
@keyframes vpAsEyesIn{ from{ opacity:0; transform:scale(.4); } to{ opacity:.5; transform:scale(1); } }
@keyframes vpAsGlitch{
  0%{ transform:translate(0,0); }   20%{ transform:translate(-5px,3px); }
  40%{ transform:translate(6px,-3px); } 60%{ transform:translate(-3px,-4px); }
  80%{ transform:translate(4px,2px); } 100%{ transform:translate(0,0); } }
.vp-allsecrets .vp-eye{ width:min(40vw,340px); height:min(19vw,152px);
  background:radial-gradient(ellipse at center, #d83a30 0%, #9c0808 48%, #360000 80%, rgba(45,0,0,0) 100%);
  border-radius:50%;
  box-shadow:0 0 52px 18px rgba(190,25,25,.4), 0 0 130px 46px rgba(140,0,0,.24);
  position:relative; animation:vpAsEyePulse 1.05s ease-in-out infinite; }
.vp-allsecrets .vp-eye::after{ content:""; position:absolute; top:14%; bottom:14%;
  left:50%; width:12%; transform:translateX(-50%);
  background:#140000; border-radius:50%; box-shadow:inset 0 0 10px rgba(0,0,0,.8); }
@keyframes vpAsEyePulse{ 0%,100%{ filter:brightness(.8); }
  50%{ filter:brightness(1.12); box-shadow:0 0 74px 26px rgba(200,20,20,.5); } }

/* Relief 3D (uniquement le nom du site sur l'accueil) - le
   filtre est independant du text-shadow, donc le halo pulse toujours. */
/* Vraies lettres en relief (extrusion) + lueur pulsante, sur le nom du site.
   Selecteur double pour l'emporter sur l'animation halo de .title. */
.title.title-3d{
  filter:none;
  animation:title3d 5s ease-in-out infinite;
}
@keyframes title3d{
  0%,55%,100%{
    text-shadow:
      1px 1px 0 #8a1212, 2px 2px 0 #6e0e0e, 3px 3px 0 #560a0a,
      4px 4px 0 #3e0707, 5px 5px 0 #280404, 6px 9px 8px rgba(0,0,0,.85),
      0 0 10px #5a0000, 0 0 22px #7a0b0b;
  }
  68%{
    text-shadow:
      1px 1px 0 #8a1212, 2px 2px 0 #6e0e0e, 3px 3px 0 #560a0a,
      4px 4px 0 #3e0707, 5px 5px 0 #280404, 6px 9px 8px rgba(0,0,0,.85),
      0 0 22px #e01818, 0 0 55px var(--rouge-sombre);
  }
}

/* Gouttes de sang sous le nom du site (accueil ouvert uniquement) */
.title-wrap{ position:relative; display:inline-block; }
.title-blood{ display:none; position:absolute; left:0; right:0; bottom:6px; height:0; }
body.open .title-blood{ display:block; }
.title-blood i{
  position:absolute; bottom:0; width:7px; height:9px;
  border-radius:50% 50% 50% 50% / 45% 45% 55% 55%;
  background:linear-gradient(#d0122a, #6a0010);
  filter:drop-shadow(0 0 3px rgba(180,0,0,.65));
  opacity:0; transform-origin:top center;
  animation:drip 7s ease-in infinite;
}
.title-blood i:nth-child(1){ left:20%; animation-delay:0s; }
.title-blood i:nth-child(2){ left:44%; animation-delay:2.3s; }
.title-blood i:nth-child(3){ left:63%; animation-delay:4.1s; }
.title-blood i:nth-child(4){ left:82%; animation-delay:5.5s; }
@keyframes drip{
  0%,55%   { transform:translateY(0) scaleY(1); opacity:0; }
  60%      { opacity:.95; }
  70%      { transform:translateY(8px) scaleY(1.8); opacity:.95; }
  100%     { transform:translateY(150px) scaleY(1.1); opacity:0; }
}

.subtitle{
  font-size:clamp(1rem,2.4vw,1.4rem);
  color:#b98; letter-spacing:.15em; text-transform:uppercase;
  margin-top:14px; opacity:.7;
}

p.lead{ font-size:1.15rem; line-height:1.8; margin:22px 0; color:#b6b6b6; }
.small{ font-size:.85rem; color:#666; letter-spacing:.05em; }

/* --- Cierges (image detouree + flamme animee) ------------- */
.candle{
  position:fixed; bottom:7vh; z-index:1;
}
.candle.left { left:2vw; }
.candle.right{ right:2vw; }
.candle .candle-body{ display:block; height:52vh; width:auto; position:relative; z-index:2;
  filter:drop-shadow(0 6px 14px rgba(0,0,0,.55)) drop-shadow(0 0 16px rgba(150,0,0,.22)); }

/* Flamme calee sur la meche. Ajuste left/top si besoin. */
.candle .flame{
  position:absolute; left:50%; margin-left:-11.5px; top:-116px;
  width:23px; height:126px;
  border-radius:50% 50% 50% 50% / 60% 60% 40% 40%;
  background:radial-gradient(circle at 50% 72%, #fff6d0, var(--rouge) 55%, #400 100%);
  box-shadow:0 0 60px 20px rgba(255,60,0,.55), 0 0 132px 44px rgba(200,0,0,.35);
  transform-origin:bottom center;
  animation:flamme .18s ease-in-out infinite alternate;
  z-index:3;
  filter:blur(1.3px);
}
@keyframes flamme{
  from{ transform:rotate(-3deg) scaleY(1); }
  to  { transform:rotate(3deg) scaleY(1.08); }
}

/* Cierges eteints (site ferme) : plus de flamme, cire visible mais atténuée */
body.closed .candle .flame{ opacity:0; box-shadow:none; }
body.closed .candle .candle-body{ filter:brightness(.8) saturate(.92) drop-shadow(0 6px 12px rgba(0,0,0,.55)); }

/* Liens sous chaque cierge : "Soutenir" (gauche) et "?" (droite) - deplaces de l'ancien coin */
.candle .candle-link{ position:absolute; left:50%; top:100%; transform:translateX(-50%); margin-top:1vh;
  z-index:5; white-space:nowrap; text-decoration:none; color:#8a5a5a; opacity:.55;
  transition:opacity .3s, color .3s, text-shadow .3s; }
.candle .candle-link:hover{ opacity:1; color:#e04b4b; text-shadow:0 0 12px rgba(200,0,0,.55); }
.candle .candle-support{ font-size:.9rem; letter-spacing:.06em; }
.candle .candle-q{ font-family:"Pirata One", serif; font-size:1.8rem; line-height:1; }
/* Caches quand le site est ferme (comme l'ancien coin) */
body.closed:not(.maintenance) .candle .candle-link{ display:none; }

/* --- Etincelle d'allumage des cierges (page accueil ouvert, <= 0.3s) --- */
.candle .spark{ position:absolute; left:50%; top:-6px; width:0; height:0; z-index:4; pointer-events:none; opacity:0; }
.candle.igniting .spark{ opacity:1; }
/* eclat central : bloom chaud, flou, additif */
.candle .spark::before{ content:""; position:absolute; left:0; top:0; width:64px; height:64px; margin:-32px 0 0 -32px;
  border-radius:50%; opacity:0; mix-blend-mode:screen; filter:blur(2px);
  background:radial-gradient(circle, rgba(255,246,238,.98) 0%, rgba(255,140,60,.78) 24%, rgba(220,35,0,.34) 50%, transparent 70%); }
.candle.igniting .spark::before{ animation:vpFlash .17s ease-out forwards; }
/* onde de choc breve */
.candle .spark::after{ content:""; position:absolute; left:0; top:0; width:14px; height:14px; margin:-7px 0 0 -7px;
  border-radius:50%; opacity:0; border:2px solid rgba(255,120,55,.85); mix-blend-mode:screen; }
.candle.igniting .spark::after{ animation:vpRing .26s ease-out forwards; }
/* braises rondes lumineuses */
.candle .spark i{ position:absolute; left:0; top:0; width:var(--s,3px); height:var(--s,3px);
  margin:calc(var(--s,3px) / -2) 0 0 calc(var(--s,3px) / -2); border-radius:50%; opacity:0;
  mix-blend-mode:screen; will-change:transform,opacity;
  background:radial-gradient(circle, #fff 0%, #ffb98a 30%, #ff5a12 72%, rgba(220,25,0,0) 100%);
  box-shadow:0 0 5px 1px rgba(255,110,35,.9), 0 0 11px 2px rgba(230,40,0,.55); }
.candle.igniting .spark i{ animation:vpEmber var(--du,.28s) cubic-bezier(.15,.7,.3,1) var(--dl,0s) forwards; }
.candle .spark i:nth-child(1){ --tx:29.1px; --ty:2.2px; --s:3.8px; --dl:0.004s; --du:0.263s; }
.candle .spark i:nth-child(2){ --tx:24.5px; --ty:11.8px; --s:3.4px; --dl:0.002s; --du:0.255s; }
.candle .spark i:nth-child(3){ --tx:22.0px; --ty:18.2px; --s:3.2px; --dl:0.041s; --du:0.23s; }
.candle .spark i:nth-child(4){ --tx:21.7px; --ty:39.8px; --s:4.5px; --dl:0.029s; --du:0.252s; }
.candle .spark i:nth-child(5){ --tx:-4.7px; --ty:26.6px; --s:4.3px; --dl:0.014s; --du:0.232s; }
.candle .spark i:nth-child(6){ --tx:-8.4px; --ty:34.1px; --s:4.2px; --dl:0.009s; --du:0.267s; }
.candle .spark i:nth-child(7){ --tx:-27.3px; --ty:26.1px; --s:3.5px; --dl:0.003s; --du:0.225s; }
.candle .spark i:nth-child(8){ --tx:-41.2px; --ty:24.5px; --s:3.2px; --dl:0.016s; --du:0.267s; }
.candle .spark i:nth-child(9){ --tx:-34.2px; --ty:4.6px; --s:4.1px; --dl:0.035s; --du:0.24s; }
.candle .spark i:nth-child(10){ --tx:-38.2px; --ty:-11.4px; --s:4.3px; --dl:0.036s; --du:0.243s; }
.candle .spark i:nth-child(11){ --tx:-15.8px; --ty:-16.8px; --s:3.2px; --dl:0.038s; --du:0.232s; }
.candle .spark i:nth-child(12){ --tx:-9.8px; --ty:-17.0px; --s:3.8px; --dl:0.038s; --du:0.266s; }
.candle .spark i:nth-child(13){ --tx:5.0px; --ty:-26.9px; --s:3.9px; --dl:0.03s; --du:0.266s; }
.candle .spark i:nth-child(14){ --tx:19.3px; --ty:-40.0px; --s:4.5px; --dl:0.024s; --du:0.273s; }
.candle .spark i:nth-child(15){ --tx:27.7px; --ty:-31.1px; --s:3.8px; --dl:0.05s; --du:0.286s; }
.candle .spark i:nth-child(16){ --tx:33.0px; --ty:-11.3px; --s:3.8px; --dl:0.001s; --du:0.257s; }
@keyframes vpFlash{ 0%{opacity:0; transform:scale(.2);} 25%{opacity:1; transform:scale(1);} 100%{opacity:0; transform:scale(1.7);} }
@keyframes vpRing{ 0%{opacity:.85; transform:scale(.3);} 100%{opacity:0; transform:scale(3);} }
@keyframes vpEmber{
  0%   { opacity:0; transform:translate(0,0) scale(.5); }
  10%  { opacity:1; }
  75%  { opacity:1; }
  100% { opacity:0; transform:translate(var(--tx,0), var(--ty,0)) scale(1.05); }
}
/* La flamme apparait quand le cierge est allume (fondu doux si transition possible) */
.candle .flame{ transition:opacity .24s ease-out; }
body.accueil.open .candle:not(.lit) .flame{ opacity:0; }

/* --- Compte a rebours ------------------------------------- */
.countdown{
  font-family:"Creepster", cursive;
  font-size:clamp(2.6rem, 9vw, 5.5rem);
  color:var(--rouge-vif);
  letter-spacing:.08em;
  text-shadow:0 0 14px var(--rouge-sombre);
  margin:24px 0 6px;
}
.countdown-label{ font-size:.9rem; letter-spacing:.25em; text-transform:uppercase; color:#7a5; opacity:.6; }

/* --- Accueil FERME uniquement --------------------------------
   Pas d'eclair, pas de roue de compteurs ; le compte a rebours
   (x2) est centre dans l'espace restant sous le nom du site. */
body.closed #storm{ display:none !important; }
body.closed .wheel-wrap{ display:none !important; }
body.closed{ justify-content:flex-start; }
/* Accueil OUVERT equilibre (JS balanceAccueilOpen) : titre fixe, 3 espaces egaux sous lui */
body.vp-balanced{ justify-content:flex-start; }
body.closed .wrap{ display:flex; flex-direction:column; align-items:center; flex:1 1 auto; width:100%; }
body.closed #view-closed{ width:100%; flex:1 1 auto; display:flex !important; align-items:center; justify-content:center; }
body.closed .countdown{ font-size:clamp(5.2rem, 18vw, 11rem); margin:0; }
/* Decompte affiche avec les glyphes infernaux (images) */
.countdown.cd-glyph{ display:flex; align-items:center; justify-content:center; gap:.5vw; line-height:0; margin:0; }
.cd-digit, .cd-colon{ display:block; }
/* Largeur de case FIXE (monospace) -> le decompte ne bouge plus quand les chiffres changent.
   0.70 x hauteur >= le chiffre le plus large (le "4"), donc aucun chiffre n'est retreci. */
.cd-digit{ height:16vh; width:11.2vh; object-fit:contain; filter:drop-shadow(0 0 16px rgba(200,0,0,.4)); }
.cd-colon{ height:12vh; width:auto; }

/* --- Boutons / actions ------------------------------------ */
.btn{
  display:inline-block; cursor:var(--curp);
  font-family:"EB Garamond", serif; font-size:1.15rem; letter-spacing:.12em;
  text-transform:uppercase; text-decoration:none;
  color:#e8caca; background:#120303;
  border:1px solid var(--rouge-sombre);
  padding:16px 40px; margin-top:26px; border-radius:2px;
  transition:all .35s ease;
}
.btn:hover{
  background:#1e0505; color:#fff;
  border-color:var(--rouge);
  box-shadow:0 0 22px rgba(224,24,24,.5);
  letter-spacing:.2em;
}
.btn.ghost{ background:transparent; border-color:#333; color:#888; }
.btn.ghost:hover{ border-color:#555; box-shadow:none; color:#aaa; }

/* Ligne "Partager mon histoire" (page Confession) : case a cocher + phrase + "?" alignes */
.share-row{ display:flex; align-items:center; justify-content:center; gap:10px; margin:18px 0 4px;
  color:#c9a0a0; font-family:"EB Garamond", serif; }
.share-row .share-check{ width:16px; height:16px; accent-color:#c81414; cursor:var(--curp); }
.share-row .share-label{ font-size:2rem; letter-spacing:.03em; cursor:var(--curp); }
.share-row .share-help{ width:40px; height:40px; padding:0; line-height:1; border-radius:50%;
  background:#120303; color:#e04b4b; border:1px solid var(--rouge-sombre);
  font-family:"Pirata One", serif; font-size:2rem; cursor:var(--curp);
  display:inline-flex; align-items:center; justify-content:center; transition:all .3s; }
.share-row .share-help:hover{ color:#fff; border-color:var(--rouge); box-shadow:0 0 12px rgba(200,0,0,.55); }

/* Derniere mise en garde avant de sceller (page Confession) : rouge */
.last-warning{ display:table; margin:16px auto 10px; max-width:min(860px,92vw); text-align:center;
  font-family:"EB Garamond", serif; font-size:2.1rem; letter-spacing:.03em; font-weight:700;
  color:#e01818; background:#120303; border:1px solid var(--rouge-sombre); border-radius:2px; padding:16px 40px;
  animation:vpWarnHalo 0.28s ease-in-out infinite; }   /* meme cadre + meme halo rapide que le bouton, mais texte rouge */
@keyframes vpWarnHalo{
  0%,55%,100%{ color:#c81414; border-color:#7a0b0b;
    text-shadow:0 0 8px #5a0000, 0 0 20px #7a0b0b;
    box-shadow:0 0 8px rgba(120,0,0,.5), 0 0 18px rgba(90,0,0,.4); }
  68%{ color:#ff2020; border-color:var(--rouge);
    text-shadow:0 0 20px var(--rouge), 0 0 55px var(--rouge-sombre);
    box-shadow:0 0 22px rgba(224,24,24,.85), 0 0 46px rgba(150,0,0,.6); }
  82%{ color:#c81414; border-color:#7a0b0b;
    text-shadow:0 0 8px #5a0000, 0 0 20px #7a0b0b;
    box-shadow:0 0 8px rgba(120,0,0,.5), 0 0 18px rgba(90,0,0,.4); }
}
/* Page Confession : libelles au-dessus des cadres (cible / histoire) en taille x2 + centres */
#target-form .field label{ font-size:1.7rem; text-align:center; }
/* Sous-phrase "Nomme celui..." en taille x2 (page Confession) */
body.confession-page p.lead{ font-size:2.3rem; }
/* Ligne de reference du pacte (officiel maudit) : numero + date/heure, grave et discret */
.pact-ref{ text-align:center; margin:0; color:#9a5a5a; font-family:"Titrale","Cinzel",serif;
  font-size:1rem; letter-spacing:.2em; text-transform:uppercase; opacity:.8; text-shadow:0 0 8px rgba(150,0,0,.35); }
/* Reference du pacte sur la page "Pacte scelle" : en ROUGE, taille x2, espace egal au-dessus/en-dessous */
#r-ref{ color:#e01818; opacity:.9; text-shadow:0 0 10px rgba(200,0,0,.5); font-size:2rem; margin:30px 0;
  white-space:nowrap; letter-spacing:.1em; }   /* reference sur UNE seule ligne */
#done > #r-heard{ margin-top:0; }   /* -> l'espace sous la reference = marge de #r-ref uniquement */
/* Confession equilibree (JS balanceConfession) : titre fixe, espaces egaux sous lui */
body.vp-balanced-conf{ justify-content:flex-start; }
/* Empeche le margin-collapsing parent<->enfant du formulaire (pour un espacement fiable) */
body.confession-page #target-form{ display:flow-root; }

/* "Sceller le pacte" : halo rouge (texte + contour) = dernier avertissement, tres rapide (~0.28s ; 3x puis x6 plus vite que le halo classique 5s) */
.btn.halo-warn{ animation:vpBtnHalo 0.28s ease-in-out infinite; }
@keyframes vpBtnHalo{
  0%,55%,100%{ color:#f0c8c8; border-color:#7a0b0b;
    text-shadow:0 0 8px #5a0000, 0 0 20px #7a0b0b;
    box-shadow:0 0 8px rgba(120,0,0,.5), 0 0 18px rgba(90,0,0,.4); }
  68%{ color:#fff; border-color:var(--rouge);
    text-shadow:0 0 20px var(--rouge), 0 0 55px var(--rouge-sombre);
    box-shadow:0 0 22px rgba(224,24,24,.85), 0 0 46px rgba(150,0,0,.6); }
  82%{ color:#f0c8c8; border-color:#7a0b0b;
    text-shadow:0 0 8px #5a0000, 0 0 20px #7a0b0b;
    box-shadow:0 0 8px rgba(120,0,0,.5), 0 0 18px rgba(90,0,0,.4); }
}

/* Boutons empiles, centres, meme largeur (celle du plus large) */
.btnrow{
  display:flex; flex-direction:column; align-items:stretch; gap:14px;
  margin:26px auto 0; width:fit-content; max-width:100%;
}
.btnrow .btn{ margin-top:0; text-align:center; }

/* --- Formulaires ------------------------------------------ */
form.ritual{ margin-top:26px; text-align:left; }
.field{ margin-bottom:20px; }
.field label{ display:block; font-size:.85rem; letter-spacing:.15em; text-transform:uppercase; color:#8a6a6a; margin-bottom:8px; }
.field input, .field textarea{
  width:100%; background:#0a0708; color:#ddd;
  border:1px solid #2a1414; border-radius:2px;
  padding:14px; font-family:"EB Garamond", serif; font-size:1.05rem;
  transition:border .3s, box-shadow .3s;
}
.field input:focus, .field textarea:focus{
  outline:none; border-color:var(--rouge-sombre);
  box-shadow:0 0 14px rgba(150,0,0,.35);
}
.field textarea{ min-height:130px; resize:vertical; }
.hint{ font-size:.78rem; color:#5a4a4a; margin-top:6px; }
.error{ color:var(--rouge-vif); font-size:.9rem; margin-top:14px; min-height:1.2em; }

/* --- Contrat ---------------------------------------------- */
.contract{
  text-align:left; border:1px solid #2a1010;
  background:linear-gradient(#0a0606,#060404);
  padding:34px; margin-top:24px; border-radius:3px;
  box-shadow:inset 0 0 40px #000;
  font-size:1.05rem; line-height:1.9; color:#c7bdbd;
}
.contract h3{ color:var(--rouge); font-family:"Titrale","Cinzel",serif; font-weight:700; letter-spacing:.05em; margin-bottom:16px; font-size:1.8rem; }
.contract .val{ color:#fff; border-bottom:1px solid var(--rouge-sombre); }
.checkline{ display:flex; align-items:flex-start; gap:12px; margin-top:22px; color:#b6a; font-size:.95rem; }
.checkline input{ margin-top:4px; accent-color:var(--rouge); transform:scale(1.3); }
/* Page chat : champ Surnom + cases a cocher centres */
#chat-form .field label{ text-align:center; }
#chat-form .field input{ text-align:center; }
#chat-form .checkline{ justify-content:center; }
.c-soul{ display:inline-block; font-weight:700;
  text-decoration:underline !important; text-decoration-color:#6b0d0d !important;
  text-decoration-thickness:1.5px; text-underline-offset:4px; }

/* --- Parchemin (page contrat) ----------------------------- */
.contract.parchment{
  position:relative; z-index:0;
  text-align:center; color:#2b1c0d;
  background:none; border:0; box-shadow:none;
}
/* La matiere du parchemin est portee par ::before, dont les bords
   sont dechires par le filtre SVG #tornEdge (feDisplacementMap). */
.contract.parchment::before{
  content:""; position:absolute; inset:-12px; z-index:-1;
  background-color:#e6d4a8;
  background-image:
    /* taches / auréoles vieillies */
    radial-gradient(circle at 17% 26%, rgba(110,75,28,.20), transparent 7%),
    radial-gradient(circle at 78% 20%, rgba(95,62,22,.18), transparent 6%),
    radial-gradient(circle at 30% 78%, rgba(120,82,34,.16), transparent 9%),
    radial-gradient(circle at 88% 66%, rgba(90,58,20,.16), transparent 6%),
    radial-gradient(circle at 62% 44%, rgba(120,84,36,.10), transparent 12%),
    /* pliures (creases) : fines lignes sombres + reflet */
    linear-gradient(93deg, transparent calc(33% - 1px), rgba(80,52,16,.16) 33%, rgba(255,248,225,.14) calc(33% + 1px), transparent calc(33% + 2px)),
    linear-gradient(88deg, transparent calc(67% - 1px), rgba(80,52,16,.14) 67%, rgba(255,248,225,.12) calc(67% + 1px), transparent calc(67% + 2px)),
    linear-gradient(2deg, transparent calc(50% - 1px), rgba(80,52,16,.12) 50%, rgba(255,248,225,.10) calc(50% + 1px), transparent calc(50% + 2px)),
    /* matiere / vignettage */
    radial-gradient(ellipse at 25% 12%, rgba(255,250,232,.55), transparent 55%),
    radial-gradient(ellipse at 82% 90%, rgba(120,88,40,.26), transparent 55%),
    radial-gradient(ellipse at 50% 55%, rgba(175,135,78,.14), transparent 72%);
  border:2px solid #8a6a38;
  box-shadow:
    inset 0 0 60px rgba(120,80,30,.42),
    inset 0 0 16px rgba(80,50,10,.5),
    0 12px 42px rgba(0,0,0,.6);
  filter:url(#tornEdge);
}
.contract.parchment h3{ color:#6b0d0d; text-shadow:none; }
.contract.parchment p{ color:#2b1c0d; }
.contract.parchment .val{ color:#3a1010; border-bottom:1px solid #7a0b0b; font-weight:600; }
.contract.parchment .checkline{ justify-content:center; color:#6b0d0d; font-style:italic; }
.contract.parchment .checkline .val{ color:#6b0d0d; }
.contract.parchment .checkline input{ accent-color:#7a0b0b; }

/* --- Roue des compteurs (image symbole + compteurs) ------ */
.wheel-wrap{ position:relative; width:440px; max-width:88vw; margin:30px auto 0; }
.wheel-wrap::before{ content:""; display:block; padding-top:100%; }
.wheel-bg{ position:absolute; inset:0; background:url(/static/img/symbol.png) center/contain no-repeat; }
.wheel{ position:absolute; inset:0; width:100%; height:100%; overflow:visible; -webkit-user-select:none; user-select:none; }
.wheel .num{ fill:#c82424; font-family:"Creepster",cursive; font-size:46px; text-anchor:middle;
  stroke:#180000; stroke-width:3; paint-order:stroke; transition:fill .25s, filter .25s; }
.wheel .lbl{ fill:#8a6a6a; font-family:"EB Garamond",serif; font-size:15px; font-weight:700; letter-spacing:0.7px;
  transform-box:fill-box; transform-origin:center; transition:fill .25s, transform .3s ease, filter .25s; }
.wheel .q:hover .lbl{ transform:scale(1.16); }
/* Surbrillance : copie du logo teintee rouge, decoupee au quart, visible au survol */
.wheel .hi{ opacity:0; transition:opacity .2s; pointer-events:none; will-change:opacity; }
.wheel .hit{ fill:transparent; cursor:var(--cur); }
.wheel .q:hover .hi{ opacity:1; }
.wheel .q:hover .num{ fill:#ff4040; filter:drop-shadow(0 0 14px rgba(255,40,40,.9)); }
.wheel .numimg{ filter:drop-shadow(0 0 5px rgba(160,0,0,.4)); }
.wheel .q:hover .numimg{ filter:drop-shadow(0 0 11px rgba(255,40,40,.85)) brightness(1.15); }
.wheel .q:hover .lbl{ fill:#ff6a6a; filter:drop-shadow(0 0 8px rgba(224,24,24,.7)); }
/* Quart "Ames presentes" : survol rouge conserve, curseur = fleche (pas de "main") */
.wheel .q-live .hit{ cursor:var(--cur); }

/* --- Stats (ancien, conserve) ----------------------------- */
.stats{ display:flex; gap:34px; justify-content:center; margin-top:30px; flex-wrap:wrap; }
.stat b{ display:block; font-family:"Creepster",cursive; font-size:1.9rem; color:var(--rouge); }
.stat span{ font-size:.72rem; letter-spacing:.2em; text-transform:uppercase; color:#666; }

/* --- Coin bas-droite (soutenir / a-propos / version) ------ */
.corner{
  position:fixed; right:18px; bottom:14px; z-index:6;
  display:flex; align-items:center; gap:16px;
  font-family:"EB Garamond", serif;
}
.corner a{ text-decoration:none; color:#8a5a5a; opacity:.55; transition:opacity .3s, color .3s, text-shadow .3s; }
.corner a:hover{ opacity:1; color:#e04b4b; text-shadow:0 0 12px rgba(200,0,0,.55); }
.corner .corner-cagnotte{ font-size:.85rem; letter-spacing:.06em; }
.corner .corner-q{ font-family:"Pirata One", "Creepster", cursive; font-size:1.7rem; line-height:1; }
.corner .corner-v{ color:#555; opacity:.5; font-size:.72rem; letter-spacing:.12em;
  cursor:var(--cur); }   /* curseur de base : ne trahit pas le clic */
.corner .corner-v:hover{ opacity:.5; color:#555; text-shadow:none; }  /* pas de survol : on cache la page curiosite */
@media (max-width:640px){ .corner{ gap:12px; right:12px; } }

/* --- Bouton muet ------------------------------------------ */
#mute-btn{
  position:fixed; left:16px; bottom:14px; z-index:7;
  width:30px; height:30px; border-radius:50%;
  background:#120303; color:#8a5a5a; border:1px solid #5a0808;
  font-size:.95rem; cursor:var(--curp); opacity:.5; transition:opacity .3s, color .3s, box-shadow .3s;
}
#mute-btn:hover{ opacity:1; color:#e04b4b; box-shadow:0 0 12px rgba(200,0,0,.5); }

/* --- Menu DEV --------------------------------------------- */
.devbar{
  position:fixed; top:12px; right:12px; z-index:999;
  font-family:system-ui, sans-serif;
}
.devbar select, .devbar button{
  background:#111; color:#0f0; border:1px solid #0a0;
  font-size:.8rem; padding:6px 8px; border-radius:3px; cursor:pointer;
}
.devbar .tag{ color:#0f0; font-size:.7rem; margin-right:6px; letter-spacing:.1em; }

/* --- Transitions de scellement ---------------------------- */
.fade-seq > *{ opacity:0; animation:appear 1.4s forwards; }
@keyframes appear{ to{ opacity:1; } }

body.sealing{ animation:darken 2.4s forwards; }
@keyframes darken{ to{ background:#000; } }

/* Flash blanc fort quand "PACTE SCELLE" apparait (page 7) */
#seal-flash{ position:fixed; inset:0; background:#fff; opacity:0; pointer-events:none; z-index:60; }
#seal-flash.go{ animation:sealFlash .55s ease-out; }
@keyframes sealFlash{
  0%{ opacity:0; }
  8%{ opacity:1; }
  22%{ opacity:.15; }
  30%{ opacity:.85; }
  100%{ opacity:0; }
}

/* --- Sequence page finale (pacte scelle) ------------------ */
.reveal-item{ opacity:0; transition:opacity 1.2s ease; }
.reveal-item.show{ opacity:1; }
.soul-final{ color:var(--rouge-vif); font-size:2.04rem; font-weight:700; letter-spacing:.04em; display:inline-block; }
.soul-final.zoom{ animation:soulZoom 1.1s ease-in-out 3; }
.soul-final.glow{ animation:halo 0.28s ease-in-out infinite; }   /* PROVISOIRE : halo rapide (meme cadence que le bouton "Sceller le pacte"), a trancher */
/* La phrase rouge peut etre plus large que le .wrap (720px) : on lui donne toute la largeur de la fenetre pour un VRAI centrage */
#r-soul{ width:100vw; margin-left:calc(50% - 50vw); text-align:center; }
/* Page "Pacte scelle" : les 3 lignes blanches x2 (le titre et le bouton ne changent pas ; la phrase rouge est x2 en inline) */
#r-heard, #r-noreturn, #r-engage{ font-size:2.3rem; }
@keyframes soulZoom{
  0%,100%{ transform:scale(1); text-shadow:0 0 6px #5a0000; }
  50%    { transform:scale(1.2); text-shadow:0 0 22px var(--rouge), 0 0 46px var(--rouge-sombre); }
}
.caret{ color:var(--rouge-vif); }
.caret.on{ animation:caretBlink .8s steps(1) infinite; }
@keyframes caretBlink{ 50%{ opacity:0; } }

/* --- Flash d'orage (derriere la brume) -------------------- */
#storm{
  position:fixed; inset:0; z-index:0; pointer-events:none; opacity:0;
  background:radial-gradient(140% 110% at 50% 12%, rgba(232,239,255,.98), rgba(150,168,200,.55) 45%, rgba(120,135,165,.15) 72%, transparent 88%);
  animation:storm 9s linear infinite;
}
@keyframes storm{
  0%,14%{ opacity:0; }
  14.5%{ opacity:.55; }
  15.3%{ opacity:.12; }
  16%{ opacity:.68; }
  17.2%{ opacity:0; }
  55%{ opacity:0; }
  55.5%{ opacity:.5; }
  56.2%{ opacity:.12; }
  56.9%{ opacity:.62; }
  58.2%{ opacity:0; }
  100%{ opacity:0; }
}

/* --- Brume passive de fond (accueil / maintenance) -------- */
#fog{
  position:fixed; inset:0; z-index:0; pointer-events:none;
  mix-blend-mode:screen; overflow:hidden;
}
#fog .fog-layer{
  position:absolute; inset:-30%;
  background-image:url(/static/img/fog.svg);
  background-repeat:repeat;
}
/* Chaque couche defile d'exactement une tuile (multiple entier)
   -> le point de bouclage est invisible. Vitesses/directions
   differentes pour un effet de volutes en mouvement. */
#fog .l1{ background-size:620px 620px; opacity:.22; animation:fogA 53s linear infinite; }
#fog .l2{ background-size:880px 880px; opacity:.16; animation:fogB 87s linear infinite; }
@keyframes fogA{ from{ background-position:0 0; } to{ background-position:620px 620px; } }
@keyframes fogB{ from{ background-position:0 0; } to{ background-position:-880px 880px; } }

/* --- Voile de fumee (transition entre pages) -------------- */
#veil{
  position:fixed; inset:0; z-index:9999; pointer-events:none;
  background:#000; overflow:hidden;
  animation:veilReveal 1.7s ease forwards;
}
/* Embrasement d'ouverture (minuit) : flammes qui consument la page */
#ignite{ position:fixed; inset:0; z-index:9998; pointer-events:none; opacity:0; visibility:hidden; }
#ignite .flames{
  position:absolute; left:0; right:0; bottom:0; height:100%;
  background:
    radial-gradient(58% 42% at 18% 100%, rgba(255,190,50,.95), rgba(200,40,0,.6) 40%, transparent 70%),
    radial-gradient(55% 48% at 50% 100%, rgba(255,150,20,.98), rgba(180,20,0,.6) 42%, transparent 72%),
    radial-gradient(58% 42% at 82% 100%, rgba(255,120,10,.92), rgba(160,10,0,.6) 40%, transparent 70%),
    linear-gradient(to top, rgba(120,0,0,.92), rgba(40,0,0,.45) 42%, transparent 72%);
  background-repeat:no-repeat;
  filter:blur(2px) contrast(1.25);
  transform:translateY(60%) scaleY(.4);
}
#ignite.go{ visibility:visible; animation:igniteSeq 2.2s ease-in forwards; }
#ignite.go .flames{ animation:flameRise 2.2s ease-in forwards; }
@keyframes igniteSeq{ 0%{opacity:0;} 16%{opacity:1;} 55%{opacity:1;} 100%{opacity:0; visibility:hidden;} }
@keyframes flameRise{
  0%  { transform:translateY(60%) scaleY(.4);  opacity:.15; }
  28% { transform:translateY(8%)  scaleY(1);   opacity:1; }
  60% { transform:translateY(-6%) scaleY(1.18);opacity:1; }
  100%{ transform:translateY(-32%) scaleY(1.3);opacity:0; }
}

/* Calque anti-flash du curseur pendant les transitions (voir transition.js) */
/* Calque anti-flash du curseur : TOUJOURS present (jamais display:none) pour
   garder les 3 images de curseur decodees en memoire -> Chrome ne retombe plus
   sur la fleche Windows lors des changements de DOM. Precharge via background. */
#vp-cursor-mask{
  position:fixed; inset:0; z-index:2147483647; pointer-events:none;
  background:
    url(/static/img/cursor.png) -200px -200px no-repeat,
    url(/static/img/cursor_pointer.png) -200px -200px no-repeat,
    url(/static/img/cursor_text.png) -200px -200px no-repeat;
}
#vp-cursor-mask.on{ pointer-events:auto; cursor:var(--cur); }
#veil svg{
  position:absolute; inset:0; display:block;
  width:100%; height:100%;
}
@keyframes veilReveal{
  0%,22%{ opacity:1; visibility:visible; }
  100%{ opacity:0; visibility:hidden; }
}
/* Fermeture du voile avant de quitter la page */
#veil.cover{
  animation:none; visibility:visible; opacity:1;
  transition:opacity .32s ease;
}
@media (prefers-reduced-motion:reduce){
  #veil{ animation-duration:.4s; }
}

@media (max-width:640px){
  .candle{ display:none; }
}
/* Compteur long Halloween : meme police-image, mais cadence responsive en 5 blocs. */
body.halloween-mode .countdown.cd-glyph{
  flex-wrap:nowrap;
  gap:clamp(2px, .35vw, 7px);
  max-width:96vw;
}
body.halloween-mode .cd-digit{
  height:clamp(2.6rem, 8.4vw, 8.8rem);
  width:clamp(1.85rem, 5.9vw, 6.2rem);
}
body.halloween-mode .cd-colon{
  height:clamp(2rem, 6.2vw, 6.5rem);
}
.countdown-units{
  display:grid;
  grid-template-columns:repeat(5, minmax(0, 1fr));
  width:min(900px, 94vw);
  margin:0 auto 18px;
  color:#8a5a5a;
  font-family:"Titrale","Cinzel",serif;
  font-size:clamp(.64rem, 1.7vw, .95rem);
  letter-spacing:.12em;
  text-transform:uppercase;
  text-shadow:0 0 7px rgba(200,0,0,.35);
}
.secret-count{
  position:absolute;
  top:auto; bottom:26vh;              /* ~mi-hauteur du cierge */
  left:50%;
  transform:translateX(-50%);
  color:#c33;
  font-family:"Titrale","Cinzel",serif; font-weight:700;
  font-size:2rem;
  line-height:1;
  text-shadow:0 0 5px #000, 0 0 12px rgba(200,0,0,.55), 0 0 20px rgba(255,20,20,.5);
  pointer-events:none;
  opacity:.95;
  z-index:4;
  display:none;                        /* cache par defaut... */
  user-select:none; -webkit-user-select:none;
}
/* Empeche la SELECTION de texte (chiffre du compteur) pendant le trick 12+12 clics */
.candle, .candle *{ user-select:none; -webkit-user-select:none; }
/* ...visible UNIQUEMENT sur l'accueil OUVERT, et si au moins 1 secret trouve */
body.accueil.open.has-secrets .secret-count{ display:block; }
body.has-secrets .secret-count-total::before{ content:"/"; position:absolute; right:100%; margin-right:.12em; opacity:.65; }

/* Versioning (+ secret) en bas de la page "A propos" : meme police (EB Garamond) que l'ancien versioning */
/* Nom + version : STRICTEMENT identiques (meme couleur, taille, espacement, opacite) */
.apropos-version{ position:fixed; left:50%; bottom:2.4vh; transform:translateX(-50%); z-index:5;
  text-align:center; color:#666; opacity:.6;
  font-family:"EB Garamond", Georgia, serif; font-size:.82rem; letter-spacing:.12em; }
.apropos-version .corner-v{ color:inherit; text-decoration:none; margin-left:.4em; }
.apropos-version .corner-v:hover{ color:inherit; text-shadow:none; }  /* pas de survol : on cache la page curiosite */
/* Le versioning est un SECRET : le curseur ne doit pas changer (pas de "main"), sinon on le devine */
.corner-v, .corner-v:hover{ cursor:var(--cur) !important; }
/* "." discret sur la page "?" quand tous les secrets sont trouves -> mot de passe */
/* Emplacement reserve du "." : hauteur fixe -> Retour ne bouge pas selon la presence du point */
.secret-slot{ min-height:2.6rem; display:flex; align-items:center; justify-content:center; margin:20px 0 4px; }
.secret-dot{ display:inline-block; margin:0; color:#c33; font-size:2.4rem; line-height:.4;
  text-decoration:none; text-shadow:0 0 10px rgba(200,0,0,.7); cursor:var(--curp); }
.secret-dot:hover{ color:#ff4040; text-shadow:0 0 18px rgba(255,30,30,.95); }