/* La vie de la page (vie.js, vie-voile.js, vie-dragon.js) : la toile partagée, le brouillard ou le Silence, les mots qui
   reviennent, la barre d'expérience, le dragon compagnon, son nom, la fin personnalisée.
   Même fichier pour BeEnglish et BeMagyar (copié par outils/langues.py) ; il se charge après style.css. */

[data-vie-section] { position: relative; }

/* ------------------------------------------------------------------ la toile partagée et les mots */
.vie-toile { position: fixed; left: 0; top: 0; z-index: 15; pointer-events: none; visibility: hidden; }
.vie-mots { position: fixed; inset: 0; z-index: 17; pointer-events: none; overflow: hidden; }
.vie-mot { position: absolute; left: 0; top: 0; padding: 5px 13px 4px; border-radius: 999px; background: #fff; color: var(--rouge-ombre);
  font: 800 21px/1.1 var(--titre); white-space: nowrap; box-shadow: 0 6px 18px rgba(60,30,20,.18), 0 0 0 2px rgba(195,58,58,.18); opacity: 0; will-change: transform, opacity; }
[data-vie="silence"] .vie-mot { color: #2F6B45; box-shadow: 0 6px 18px rgba(30,40,30,.18), 0 0 0 2px rgba(62,154,90,.3); }

/* le voile de l'ouverture avant que les scripts ne prennent la main (et sans JavaScript) : il se lève tout seul */
html:not(.vie-pret) .ouverture::after { content: ""; position: absolute; inset: 0; z-index: 12; pointer-events: none; animation: vie-pre 1.1s ease-out .9s forwards; }
html[data-vie="brouillard"]:not(.vie-pret) .ouverture::after {
  background: radial-gradient(42% 30% at 22% 78%, rgba(220,222,230,.6), transparent 70%), radial-gradient(40% 34% at 78% 30%, rgba(220,222,230,.55), transparent 70%),
    radial-gradient(50% 40% at 60% 85%, rgba(214,216,226,.5), transparent 70%), rgba(220,222,230,.2); }
html[data-vie="silence"]:not(.vie-pret) .ouverture::after { background: rgba(128,128,128,.9); mix-blend-mode: saturation; }
@keyframes vie-pre { to { opacity: 0; visibility: hidden; } }

/* BeMagyar : une section encore figée par le Silence (la couleur revient en vague, vie-voile.js) */
.vie-hote-gris { position: relative; }
.vie-gris { position: absolute; inset: 0; z-index: 12; pointer-events: none; background: rgba(128,128,128,.9); mix-blend-mode: saturation; border-radius: inherit; }

/* ------------------------------------------------------------------ la barre d'expérience et le compteur de mots
   (vague 2 : le compteur est à cheval sur le bas de la barre, sous les boutons, pour couvrir le moins de texte possible) */
.vie-xp { position: absolute; left: 0; right: 0; bottom: -3px; height: 3px; background: rgba(60,30,20,.07); pointer-events: none; }
.vie-xp-plein { display: block; height: 100%; transform-origin: 0 50%; transform: scaleX(0); background: linear-gradient(90deg, var(--rouge), var(--or)); border-radius: 0 3px 3px 0; }
.vie-compteur { position: absolute; right: var(--gouttiere); top: -7px; display: flex; align-items: center; gap: 5px; padding: 2px 9px 2px 6px; border-radius: 999px;
  background: rgba(255,255,255,.92); box-shadow: 0 3px 10px rgba(60,30,20,.12); font: 800 12px/18px var(--corps); color: var(--doux); white-space: nowrap;
  opacity: 0; transform: translateY(-4px); transition: opacity .4s, transform .4s; }
.vie-compteur.montre { opacity: 1; transform: none; }
.vie-compte-texte, .vie-compteur.ouvert .vie-compte-n { display: none; }
.vie-compteur.ouvert .vie-compte-texte { display: inline; }
.vie-compteur.pop { animation: vie-pop .45s cubic-bezier(.3,1.6,.5,1); }
.vie-compteur-icone { position: relative; width: 13px; height: 10px; border-radius: 4px; background: var(--rouge); }
.vie-compteur-icone::after { content: ""; position: absolute; left: 2px; bottom: -3px; border: 3px solid transparent; border-top-color: var(--rouge); border-left-color: var(--rouge); }
@keyframes vie-pop { 40% { transform: scale(1.18); } }

/* ------------------------------------------------------------------ le dragon compagnon */
.vie-compagnon { --taille: calc(56px + (var(--stade, 1) - 1) * 6px); --cote: calc(var(--taille) + 20px - 100vw);
  position: fixed; right: 10px; bottom: calc(14px + env(safe-area-inset-bottom, 0px)); z-index: 18; width: var(--taille); height: var(--taille);
  cursor: pointer; -webkit-tap-highlight-color: transparent; touch-action: manipulation;
  transition: transform .55s cubic-bezier(.3,1.3,.5,1), opacity .3s; }
.vie-compagnon.gauche { transform: translateX(var(--cote)); }
.vie-compagnon.cache { opacity: 0; pointer-events: none; transform: translate(30%, 130%) scale(.5); }
.vie-compagnon.gauche.cache { transform: translateX(var(--cote)) translate(-30%, 130%) scale(.5); }
.vie-compagnon-vol, .vie-compagnon-geste { position: absolute; inset: 0; }
.vie-compagnon-vol { animation: vie-vole 3.2s ease-in-out infinite; }
.vie-compagnon .vif { left: 0; top: 0; width: 100%; height: 100%; }
.vie-compagnon .vif > img { filter: drop-shadow(0 8px 10px rgba(60,30,20,.3)); }
.vie-compagnon.gauche .vif { scale: -1 1; }
.vie-compagnon-geste.tourne { animation: vie-tourne .8s cubic-bezier(.4,.1,.3,1); }
.vie-compagnon-geste.saute { animation: vie-saute .55s cubic-bezier(.3,1.4,.5,1); }
.vie-compagnon::before { content: ""; position: absolute; inset: -40%; border-radius: 50%; pointer-events: none; opacity: 0;
  background: radial-gradient(closest-side, rgba(255,231,163,.95), rgba(242,184,51,.5) 45%, rgba(242,184,51,0)); }
.vie-compagnon.eclat::before { animation: vie-eclat .9s ease-out; }
.vie-compagnon.eclat .vie-compagnon-geste { animation: vie-grandit .6s cubic-bezier(.3,1.6,.5,1); }
.vie-ruban-mini { position: absolute; right: -4px; top: 100%; transform: translateY(-7px); max-width: 130px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  padding: 1px 8px; border-radius: 5px; background: var(--rouge); color: #fff; font: 800 11px/16px var(--titre); box-shadow: 0 2px 0 var(--rouge-ombre); pointer-events: none; }
.vie-compagnon.gauche .vie-ruban-mini { right: auto; left: -4px; }
.vie-ruban-mini[hidden] { display: none; }
@keyframes vie-vole { 50% { transform: translateY(-7px) rotate(-2deg); } }
@keyframes vie-tourne { to { transform: rotate(360deg); } }
@keyframes vie-saute { 40% { transform: translateY(-16px) scale(1.08); } }
@keyframes vie-eclat { 0% { opacity: 0; transform: scale(.5); } 30% { opacity: 1; } 100% { opacity: 0; transform: scale(1.5); } }
@keyframes vie-grandit { 0% { transform: scale(.75); } 60% { transform: scale(1.15); } }
@media (min-width: 901px) {
  .vie-compagnon { --taille: calc(92px + (var(--stade, 1) - 1) * 10px); --cote: calc(var(--taille) + 48px - 100vw); right: 24px; bottom: 24px; }
}
/* sur téléphone (vague 2) : plus petit, dans le coin ; s'il y a du texte dessous, il se perche (sa tête dépasse du bord) */
@media (max-width: 520px) {
  .vie-compagnon { --taille: calc(44px + (var(--stade, 1) - 1) * 3px); --cote: calc(var(--taille) + 8px - 100vw); right: 4px; bottom: calc(6px + env(safe-area-inset-bottom, 0px)); }
  .vie-compteur { font-size: 11px; line-height: 15px; padding: 1px 8px 1px 5px; }
}
.vie-compagnon.perche { transform: translateY(46%) scale(.82); }
.vie-compagnon.gauche.perche { transform: translateX(var(--cote)) translateY(46%) scale(.82); }
.vie-compagnon.perche .vie-ruban-mini { opacity: 0; }

/* ------------------------------------------------------------------ le nom du dragon */
.nommer { display: flex; flex-direction: column; align-items: center; gap: 8px; margin-top: 6px; width: 100%; max-width: 340px; }
.nommer label { font: 800 17px var(--corps); color: var(--encre); }
.nommer input { width: 100%; height: 52px; border-radius: 14px; border: 2px solid #E3CDA8; background: #fff; padding: 0 16px; text-align: center;
  font: 800 20px var(--titre); color: var(--rouge-ombre); }
.nommer input::placeholder { color: #C9B597; }
.nommer input:focus { outline: none; border-color: var(--rouge); box-shadow: 0 0 0 4px rgba(195,58,58,.15); }
.sans-js .nommer { display: none; }
/* le ruban sous la frise des dragons */
.art-ruban { display: flex; justify-content: center; margin-top: -26px; position: relative; z-index: 4; pointer-events: none; }
.ruban { position: relative; margin: 0; padding: 7px 30px 6px; background: var(--rouge); color: #fff; font: 800 24px/1.1 var(--titre); max-width: calc(100% - 80px);
  border-radius: 6px; box-shadow: 0 4px 0 var(--rouge-ombre), 0 12px 24px rgba(195,58,58,.25); white-space: nowrap; overflow: visible; }
.ruban span { display: block; overflow: hidden; text-overflow: ellipsis; }
.ruban::before, .ruban::after { content: ""; position: absolute; top: 10px; width: 30px; height: 100%; background: var(--rouge-ombre); z-index: -1; }
.ruban::before { left: -22px; clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 38% 50%); }
.ruban::after { right: -22px; clip-path: polygon(0 0, 100% 0, 62% 50%, 100% 100%, 0 100%); }
.ruban[hidden] { display: none; }
.ruban.fete { animation: vie-ruban .7s cubic-bezier(.3,1.6,.5,1); }
@keyframes vie-ruban { 0% { transform: scale(.7) rotate(-4deg); } 55% { transform: scale(1.12) rotate(2deg); } }

/* ------------------------------------------------------------------ la fin : le dragon du stade 7 et le héros choisi */
.appel .final { position: absolute; left: 50%; top: 0; width: 600px; height: 330px; transform: translateX(-50%); pointer-events: none; }
.appel .final .pip-final { left: auto; right: 2%; top: 4px; width: 330px; transform: none; }
.appel .final .heros-final { left: 4%; top: 46px; width: 290px; aspect-ratio: 1; }
.appel .final .heros-final > img { filter: drop-shadow(0 12px 18px rgba(0,0,0,.4)); }
.appel .attend { margin: 0; font: 800 clamp(22px, 2.4vw, 30px)/1.15 var(--titre); color: var(--or); }
.pip-final, .scene .pip { transition: rotate .5s cubic-bezier(.3,1.3,.5,1), scale .4s, translate .5s; }
@media (max-width: 900px) {
  .appel .final { width: 340px; height: 250px; }
  .appel .final .pip-final { width: 210px; right: 0; top: 10px; }
  .appel .final .heros-final { width: 180px; left: 0; top: 54px; }
}

@media (prefers-reduced-motion: reduce) {
  .vie-compagnon-vol { animation-duration: 5s; }
  .vie-compagnon { transition: transform .3s, opacity .3s; }
}
.vie-compagnon.cache.perche { transform: translate(30%, 130%) scale(.5); }
.vie-compagnon.gauche.cache.perche { transform: translateX(var(--cote)) translate(-30%, 130%) scale(.5); }

/* ================================================================== vague 2 : la vie de chaque section (vie-scenes.js,
   vie-classe.js). Hors de l'écran, les animations en boucle s'arrêtent (vie-pause). */
.vie-pause, .vie-pause *, .vie-pause::before, .vie-pause::after, .vie-pause *::before, .vie-pause *::after { animation-play-state: paused !important; }

/* ------------------------------------------------------------------ 1. l'ouverture */
/* les téléphones : leur place par translate et rotate, pour que le relief (transform, vie.js) s'y ajoute */
.scene .tel { transition: none; }
.scene .tel.milieu { transform: none; translate: 0 -52%; }
.scene .tel.gauche { transform: none; translate: 0 -46%; rotate: -9deg; }
.scene .tel.droite { transform: none; translate: 0 -46%; rotate: 8deg; }
.tel .ecran { position: relative; width: 100%; height: 100%; overflow: hidden; border-radius: 11% / 5.2%; isolation: isolate; }
.tel .ecran img { border-radius: 0; }
/* la ville du téléphone du milieu glisse sous l'interface (le haut et le bas de l'écran restent fixes) */
.ecran[data-pan] > img:first-child { transform-origin: 50% 46%; animation: vie-pan 18s ease-in-out infinite alternate; will-change: transform; }
.ecran[data-pan] > .fixe { position: absolute; inset: 0; clip-path: polygon(0 0, 100% 0, 100% 8%, 0 8%, 0 82.6%, 100% 82.6%, 100% 100%, 0 100%); }
@keyframes vie-pan { 0% { transform: scale(1.2) translate(3.5%, 2.5%); } 30% { transform: scale(1.2) translate(-3%, 0.5%); } 65% { transform: scale(1.24) translate(1.5%, -3.5%); } 100% { transform: scale(1.2) translate(-3.5%, 2%); } }
/* les créatures flottent (leur traînée de lumière : vie-scenes.js) */
.scene .wisp { animation: vie-flotte-a 7s ease-in-out infinite; }
.scene .nessie { animation: vie-flotte-b 9s ease-in-out infinite; }
@keyframes vie-flotte-a { 0%, 100% { translate: 0 0; } 25% { translate: 16px -12px; } 50% { translate: 28px 6px; } 75% { translate: 8px 14px; } }
@keyframes vie-flotte-b { 0%, 100% { translate: 0 0; } 33% { translate: -14px -10px; } 66% { translate: -4px 8px; } }
/* leur traînée : 4 lueurs à la même place, qui suivent le même chemin avec un retard croissant */
.scene .traces { position: absolute; z-index: 2; pointer-events: none; animation: none; }
.traces i { position: absolute; left: 50%; top: 48%; width: calc(34% - var(--k) * 5%); aspect-ratio: 1; margin: calc((var(--k) * 5% - 34%) / 2); border-radius: 50%;
  background: radial-gradient(closest-side, var(--lueur), rgba(255,255,255,0)); opacity: calc(.62 - var(--k) * .12);
  animation: vie-flotte-a 7s ease-in-out infinite; animation-delay: calc(var(--k) * .28s - 7s); }
.traces-b i { animation-name: vie-flotte-b; animation-duration: 9s; animation-delay: calc(var(--k) * .34s - 9s); }
/* le titre revient mot à mot ; il attend les scripts, mais jamais plus de 2,2 s */
.vie-titre-mot { display: inline-block; }
@media (scripting: enabled) {
  html:not(.vie-titre) .ouverture h1 { opacity: 0; animation: vie-secours .35s ease-out 2.2s forwards; }
}
@keyframes vie-secours { to { opacity: 1; } }

/* ------------------------------------------------------------------ 2. le combat */
.arene::after { content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none; opacity: 0;
  background: radial-gradient(48% 40% at 50% 30%, rgba(255,247,220,.85), rgba(255,247,220,0)); }
.arene.vie-flash::after { animation: vie-flash .34s ease-out; }
@keyframes vie-flash { 0% { opacity: 0; } 20% { opacity: 1; } 100% { opacity: 0; } }
.vie-pv { position: absolute; z-index: 5; left: 50%; top: 16px; width: min(56%, 300px); height: 16px; translate: -50% 0; border-radius: 99px; pointer-events: none;
  background: rgba(20,14,30,.62); box-shadow: 0 0 0 2px rgba(255,255,255,.8), 0 4px 10px rgba(0,0,0,.3); }
.vie-pv i { position: absolute; left: 3px; right: 3px; top: 3px; bottom: 3px; border-radius: 99px; transform-origin: 0 50%; }
.vie-pv-traine { background: #FFF3D0; transition: transform .55s ease-out; }
.vie-pv-plein { background: linear-gradient(90deg, #2FAF5E, #9BE36A); transition: transform .35s cubic-bezier(.3,.8,.4,1), background .3s; }
.vie-pv.bas .vie-pv-plein { background: linear-gradient(90deg, #E0553A, #F2A33A); }
.vie-pv.vide { opacity: .55; transition: opacity .6s .4s; }
.vie-combo { position: absolute; left: 100%; top: 50%; margin-left: 8px; translate: 0 -50%; font: 800 22px/1 var(--titre); color: #FFE7A3; white-space: nowrap;
  text-shadow: 0 2px 0 #8E2226, 0 0 12px rgba(242,184,51,.75); }
.vie-combo.pop { animation: vie-combo .5s cubic-bezier(.3,1.8,.5,1); }
@keyframes vie-combo { 0% { transform: scale(.3) rotate(-12deg); } 60% { transform: scale(1.35) rotate(6deg); } }
.vie-degat { position: absolute; z-index: 6; top: 22%; font: 800 40px/1 var(--titre); color: #fff; pointer-events: none; white-space: nowrap; translate: -50% 0;
  text-shadow: 0 3px 0 #8E2226, 0 -1px 0 #8E2226, 2px 0 0 #8E2226, -2px 0 0 #8E2226, 0 0 16px rgba(242,184,51,.85); animation: vie-degat 1s cubic-bezier(.2,.8,.3,1) forwards; }
.vie-degat.fort { font-size: 48px; color: #FFE7A3; }
@keyframes vie-degat { 0% { opacity: 1; transform: translateY(6px) scale(.6); } 18% { opacity: 1; transform: translateY(-10px) scale(1.25); } 34% { transform: translateY(-16px) scale(1); }
  100% { opacity: 0; transform: translateY(-72px) scale(.9); } }

/* ------------------------------------------------------------------ 3. le dragon qui grandit */
.vie-frise .sept { display: none; }
.vie-frise .art-ruban { width: calc(100% + 28px); margin: -40px -14px 4px; }
.frise { position: relative; width: 100%; --s: .42; }
.frise[data-stade="2"] { --s: .5; } .frise[data-stade="3"] { --s: .58; } .frise[data-stade="4"] { --s: .67; }
.frise[data-stade="5"] { --s: .77; } .frise[data-stade="6"] { --s: .87; } .frise[data-stade="7"] { --s: .97; }
.frise-colle { position: relative; display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 14px 14px 18px; border-radius: 28px;
  background: radial-gradient(80% 70% at 50% 70%, #FFE7C2, #FBF4E6 70%); box-shadow: inset 0 0 0 1px rgba(60,30,20,.06); }
.frise-scene { position: relative; width: min(340px, 86%); aspect-ratio: 1; touch-action: pan-y; user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent; }
.frise-glisser .frise-scene { cursor: grab; }
.frise-halo { position: absolute; inset: 6% 8% 2%; border-radius: 50%; background: radial-gradient(closest-side, rgba(255,226,150,.75), rgba(255,226,150,0)); }
.frise-sol { position: absolute; left: 16%; right: 16%; bottom: 3%; height: 10%; border-radius: 50%; background: radial-gradient(closest-side, rgba(90,50,20,.28), rgba(90,50,20,0)); }
.frise .frise-vif { left: 2%; bottom: 2%; width: 96%; aspect-ratio: 1; scale: var(--s); transform-origin: 50% 96%; transition: scale .6s cubic-bezier(.3,1.45,.5,1), translate .25s; }
.frise-eclat { position: absolute; inset: -8%; border-radius: 50%; opacity: 0; pointer-events: none; z-index: 4;
  background: radial-gradient(closest-side, rgba(255,255,255,.95), rgba(255,231,163,.6) 40%, rgba(242,184,51,0)); }
.frise-scene.grandit .frise-eclat, .frise-scene.rapetisse .frise-eclat { animation: vie-eclat .8s ease-out; }
.frise-scene.grandit .frise-vif { animation: vie-frise-pop .6s cubic-bezier(.3,1.6,.5,1); }
@keyframes vie-frise-pop { 0% { transform: scale(.82); } 60% { transform: scale(1.08); } 100% { transform: none; } }
.frise-scene.invite .frise-vif { animation: vie-invite 1.3s ease-in-out; }
@keyframes vie-invite { 20%, 60% { transform: translateX(-22px) rotate(-4deg); } 40%, 80% { transform: none; } }
/* sur téléphone : deux chevrons qui invitent à glisser, jusqu'au premier geste */
.frise-glisse { position: absolute; right: -4%; top: 44%; display: flex; gap: 2px; z-index: 5; pointer-events: none; transition: opacity .4s; }
.frise-glisse i { width: 12px; height: 12px; border: solid var(--rouge); border-width: 0 0 3px 3px; transform: rotate(45deg); opacity: .8; animation: vie-chevron 1.4s ease-in-out infinite; }
.frise-glisse i + i { animation-delay: .15s; }
@keyframes vie-chevron { 0%, 100% { translate: 0 0; opacity: .25; } 50% { translate: -8px 0; opacity: .9; } }
.frise-defile .frise-glisse, .frise.touche .frise-glisse { opacity: 0; }
.frise-compteur { display: flex; align-items: center; justify-content: center; gap: 16px; flex-wrap: wrap; }
.frise-jour { font: 800 clamp(26px, 3vw, 34px)/1 var(--titre); color: var(--encre); font-variant-numeric: tabular-nums; }
.frise-serie { display: inline-flex; align-items: center; gap: 6px; font: 800 15px/1.2 var(--corps); color: #B4500E; transition: opacity .3s; }
.frise-serie.eteinte { opacity: .4; }
.flamme { display: inline-block; width: 24px; height: 31px; }
.flamme svg { width: 100%; height: 100%; overflow: visible; scale: var(--feu, 1); transform-origin: 50% 100%; transition: scale .4s; }
.flamme .f1 { fill: #F28C38; transform-box: fill-box; transform-origin: 50% 100%; animation: vie-flamme .8s ease-in-out infinite alternate; }
.flamme .f2 { fill: #FFD25A; transform-box: fill-box; transform-origin: 50% 100%; animation: vie-flamme .55s ease-in-out infinite alternate-reverse; }
.frise-serie.eteinte .f1, .frise-serie.eteinte .f2 { animation: none; }
@keyframes vie-flamme { 0% { transform: scale(1, 1) skewX(-4deg); } 100% { transform: scale(.92, 1.1) skewX(5deg); } }
.frise-etapes { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; max-width: 100%; }
.frise-etapes button { min-height: 40px; padding: 0 13px; border: 0; border-radius: 999px; background: rgba(255,255,255,.8); color: var(--doux); font: 800 14px var(--corps); cursor: pointer;
  box-shadow: 0 0 0 1.5px rgba(60,30,20,.1); white-space: nowrap; transition: background .25s, color .25s, transform .3s cubic-bezier(.3,1.5,.5,1); }
.frise-etapes button:hover { box-shadow: 0 0 0 2px var(--rouge); }
.frise-etapes button:focus-visible { outline: 3px solid var(--rouge); outline-offset: 2px; }
.frise-etapes button[aria-pressed="true"] { background: var(--rouge); color: #fff; transform: scale(1.06); box-shadow: 0 3px 0 var(--rouge-ombre); }
/* sur ordinateur, la scène reste à l'écran pendant qu'on descend dans la section */
.frise-defile { height: calc(min(640px, 100vh - 110px) + 150vh); }
.frise-defile .frise-colle { position: sticky; top: 76px; height: min(640px, calc(100vh - 110px)); justify-content: center; }
.frise-defile .frise-scene { width: auto; height: 58%; max-width: 100%; }

/* ------------------------------------------------------------------ 4. le choix du héros : la ruelle en profondeur */
.grand.vie-rue { background: #3A2E3A; }
.rue { position: absolute; inset: 0; z-index: 0; overflow: hidden; border-radius: inherit; pointer-events: none; }
.rue-plan { position: absolute; inset: -5%; background: url('/img/decor-rue.webp') center / cover; }
.rue-loin { -webkit-mask-image: radial-gradient(22% 18% at 64% 66%, #000 55%, transparent 100%); mask-image: radial-gradient(22% 18% at 64% 66%, #000 55%, transparent 100%); }
.rue-cotes { -webkit-mask-image: linear-gradient(90deg, #000 0, #000 19%, transparent 31%, transparent 67%, #000 79%); mask-image: linear-gradient(90deg, #000 0, #000 19%, transparent 31%, transparent 67%, #000 79%); }
.rue-ombre { position: absolute; inset: 0; background: radial-gradient(30% 3.2% at 50% 93%, rgba(10,6,14,.6), rgba(10,6,14,0)), linear-gradient(180deg, rgba(20,14,30,.05) 40%, rgba(20,14,30,.35)); }
.lanterne { position: absolute; width: 24%; aspect-ratio: 1; translate: -50% -50%; border-radius: 50%; opacity: .85;
  background: radial-gradient(closest-side, rgba(255,222,140,.9), rgba(255,196,96,.38) 42%, rgba(255,186,80,0)); animation: vie-lanterne 2.7s linear infinite; }
.lanterne.l1 { left: 16.4%; top: 46.6%; }
.lanterne.l2 { left: 71.5%; top: 49.8%; animation-duration: 3.3s; animation-delay: -1.3s; }
.lanterne.l3 { left: 33.4%; top: 64.6%; width: 12%; animation-duration: 2.3s; animation-delay: -.6s; }
.lanterne.l4 { left: 57.2%; top: 67%; width: 11%; animation-duration: 3s; animation-delay: -2s; }
@keyframes vie-lanterne { 0%, 100% { opacity: .85; } 7% { opacity: 1; } 11% { opacity: .62; } 16% { opacity: .95; } 31% { opacity: .78; } 40% { opacity: 1; }
  46% { opacity: .68; } 52% { opacity: .9; } 70% { opacity: .8; } 84% { opacity: 1; } 90% { opacity: .74; } }
.grand { will-change: auto; }

/* ------------------------------------------------------------------ 5. la ville qui se construit */
.chantier { position: relative; aspect-ratio: 1 / .84; border-radius: 28px; overflow: hidden; isolation: isolate;
  background: radial-gradient(90% 50% at 50% 100%, #CFE3C4, rgba(207,227,196,0) 70%), linear-gradient(180deg, #CFE8F5, #EEF6F3 72%); }
.ch-maisons { position: absolute; inset: 0; }
.ch-maison { position: absolute; height: auto; filter: drop-shadow(0 8px 8px rgba(40,60,40,.16)); }
.ch-maison.m1 { left: 0; top: 16%; width: 30%; }
.ch-maison.m2 { right: -1%; top: 12%; width: 29%; }
.ch-maison.m3 { left: 3%; bottom: 1%; width: 29%; z-index: 3; }
.ch-parlement { position: absolute; left: 21%; right: 13%; bottom: 3%; aspect-ratio: 1; z-index: 2; }
.ch-parlement img { position: absolute; inset: 0; width: 100%; height: 100%; }
.ch-parlement img:not(.n3) { opacity: 0; }
.vie-chantier .ch-parlement img { opacity: 0; }
.vie-chantier .ch-parlement img.montre { opacity: 1; }
.vie-chantier .ch-maison:not(.posee) { opacity: 0; }
.ch-echafaudage { position: absolute; left: 32%; right: 24%; bottom: 16%; height: 52%; z-index: 4; transform-origin: 50% 100%; transform: scaleY(0); opacity: 0; pointer-events: none;
  transition: transform .3s cubic-bezier(.3,1.4,.5,1), opacity .25s; }
.ch-echafaudage.monte { transform: none; opacity: .95; }
.ch-echafaudage svg { display: block; width: 100%; height: 100%; }
.ch-marteau { position: absolute; z-index: 5; width: 13%; aspect-ratio: 1; opacity: 0; transform-origin: 55% 92%; pointer-events: none; }
.ch-marteau svg { display: block; width: 100%; height: 100%; }
.ch-marteau.frappe { animation: vie-marteau .26s ease-in; }
@keyframes vie-marteau { 0% { opacity: 1; transform: rotate(-55deg); } 70% { opacity: 1; transform: rotate(14deg); } 100% { opacity: 0; transform: rotate(4deg); } }
.ch-brume { position: absolute; inset: 0; z-index: 6; pointer-events: none; opacity: var(--brume, 0); transition: opacity 1.3s ease;
  background: radial-gradient(55% 42% at 28% 66%, rgba(236,237,242,.96), rgba(236,237,242,0) 72%), radial-gradient(50% 46% at 76% 38%, rgba(226,228,236,.94), rgba(226,228,236,0) 72%), rgba(230,232,238,.6); }
[data-vie="silence"] .ch-brume { background: rgba(128,128,128,.92); mix-blend-mode: saturation; }
.ch-niveaux { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); width: fit-content; max-width: 100%; margin: 14px auto 0; padding: 4px; border-radius: 999px;
  background: #fff; box-shadow: 0 6px 16px rgba(60,30,20,.1), inset 0 0 0 1.5px rgba(60,30,20,.06); }
.ch-niveaux::before { content: ""; position: absolute; top: 4px; bottom: 4px; left: 4px; width: calc((100% - 8px) / 3); border-radius: 999px; background: var(--rouge); box-shadow: 0 3px 0 var(--rouge-ombre);
  transition: transform .45s cubic-bezier(.3,1.4,.5,1); }
.ch-niveaux[data-niveau="2"]::before { transform: translateX(100%); }
.ch-niveaux[data-niveau="3"]::before { transform: translateX(200%); }
.ch-niveaux button { position: relative; z-index: 1; min-height: 44px; padding: 0 16px; border: 0; border-radius: 999px; background: none; font: 800 15px var(--corps); color: var(--doux);
  cursor: pointer; white-space: nowrap; transition: color .3s; }
.ch-niveaux button[aria-pressed="true"] { color: #fff; }
.ch-niveaux button:focus-visible { outline: 3px solid var(--rouge); outline-offset: 2px; }
.sans-js .ch-niveaux { display: none; }

/* ------------------------------------------------------------------ 6. le butin : le coffre et les objets */
.tresor .art { position: relative; }
.tresor .objets { position: relative; z-index: 3; }
.coffre { position: relative; z-index: 2; width: min(220px, 52%); aspect-ratio: 200 / 160; margin: -8px auto -14px; pointer-events: none; }
.coffre-svg { position: relative; z-index: 1; display: block; width: 100%; height: 100%; overflow: visible; }
.coffre-couvercle { transform-box: fill-box; transform-origin: 15% 100%; }
.coffre.ouvert .coffre-couvercle { animation: vie-couvercle 1s cubic-bezier(.3,1.4,.5,1) forwards; }
@keyframes vie-couvercle { 0% { transform: none; } 14% { transform: translateY(-6%) rotate(-3deg); } 26% { transform: none; } 62% { transform: translateY(-30%) rotate(-16deg); }
  80% { transform: translateY(-22%) rotate(-10deg); } 100% { transform: translateY(-26%) rotate(-12deg); } }
.coffre-rayons { position: absolute; left: 50%; top: 44%; width: 250%; aspect-ratio: 1; translate: -50% -50%; opacity: 0; scale: .2; pointer-events: none;
  -webkit-mask-image: radial-gradient(closest-side, #000 18%, transparent); mask-image: radial-gradient(closest-side, #000 18%, transparent); }
.coffre-rayons::before { content: ""; position: absolute; inset: 0; border-radius: 50%; background: repeating-conic-gradient(rgba(255,222,130,.55) 0 8deg, transparent 8deg 19deg);
  animation: tourne 16s linear infinite; }
.coffre.ouvert .coffre-rayons { animation: vie-rayons 1.1s .3s cubic-bezier(.3,1.2,.5,1) forwards; }
@keyframes vie-rayons { to { opacity: 1; scale: 1; } }
.objets.vie-ferme li { opacity: 0; }
.objets li { cursor: pointer; -webkit-tap-highlight-color: transparent; }
.objets li.r3.pose::before { animation: vie-pouls 2.2s ease-in-out infinite; }
@keyframes vie-pouls { 0%, 100% { opacity: .45; } 50% { opacity: 1; } }
.objets li.r4::after { background: linear-gradient(90deg, rgba(255,226,130,0), rgba(255,226,130,.9), rgba(255,255,255,.95), rgba(255,226,130,.9), rgba(255,226,130,0)); }
.objets li.r4.eclat-or { animation: vie-or .9s ease-out; }
@keyframes vie-or { 0% { box-shadow: 0 0 0 2px var(--c), 0 0 0 rgba(242,184,51,0); } 40% { box-shadow: 0 0 0 3px #FFE7A3, 0 0 34px rgba(242,184,51,.9); } 100% { box-shadow: 0 0 0 2px var(--c), 0 14px 30px rgba(30,20,40,.25); } }

/* ------------------------------------------------------------------ 7. pour qui : les cartes de quête en parchemin */
@property --d { syntax: '<length-percentage>'; inherits: true; initial-value: 100%; }
.joueurs .carte.quete { --d: 100%; position: relative; margin: 14px 10px; padding: 150px 24px 30px; border-radius: 6px; color: #4A3520;
  background: radial-gradient(130% 90% at 50% 45%, #FCF2D8 0%, #F3E1B8 68%, #E3C690 100%);
  box-shadow: 0 10px 18px rgba(60,30,20,.14), inset 0 0 34px rgba(150,100,40,.2);
  clip-path: inset(-24px -24px calc(100% - var(--d) - 24px) -24px); transition: --d 1.1s cubic-bezier(.3,.8,.3,1); }
.carte.quete::before, .carte.quete::after { content: ""; position: absolute; left: -10px; right: -10px; height: 20px; border-radius: 10px; z-index: 2;
  background: linear-gradient(180deg, #E5C384, #FFF0C8 38%, #CFA463 72%, #A2733A); box-shadow: 0 3px 6px rgba(60,30,20,.25); }
.carte.quete::before { top: -10px; }
.carte.quete::after { top: calc(var(--d) - 10px); }
.vie-quetes .carte.quete:not(.deroulee) { --d: 0%; }
.carte.quete .gros { color: var(--rouge-ombre); }
.carte.quete p:not(.gros) { color: #5E4630; }
.carte.quete .perso { position: absolute; left: 0; right: 0; top: 14px; height: 130px; pointer-events: none; }
.carte.quete .perso img { position: absolute; bottom: 0; height: 126px; width: auto; filter: drop-shadow(0 8px 6px rgba(60,30,20,.22)); }
.q-enfant .qui { left: calc(50% - 98px); animation: vie-hop 2.6s ease-in-out infinite; }
.q-enfant .avec { left: calc(50% + 4px); height: 84px !important; animation: vie-hop 2.6s ease-in-out -1.3s infinite; }
.q-adulte .qui { left: calc(50% - 63px); transform-origin: 50% 100%; animation: vie-balance 3.4s ease-in-out infinite; }
.q-adulte .perso::after { content: ""; position: absolute; left: calc(50% + 18px); top: 34px; width: 14px; height: 14px; border-radius: 50%;
  background: radial-gradient(closest-side, #fff, rgba(255,226,130,.9) 40%, rgba(255,226,130,0)); animation: vie-scintille 1.8s ease-in-out infinite; }
.q-prof .qui { left: calc(50% - 112px); transform-origin: 50% 100%; animation: vie-lance 4.2s ease-in-out infinite; }
.q-prof .avec { left: calc(50% + 4px); height: 104px !important; transform-origin: 50% 100%; animation: vie-boss 4.2s cubic-bezier(.3,1.3,.5,1) infinite; }
.q-prof .perso::after { content: ""; position: absolute; left: calc(50% + 6px); bottom: -4px; width: 96px; height: 20px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(138,79,214,.65), rgba(138,79,214,0)); box-shadow: 0 0 0 2px rgba(138,79,214,.35); animation: vie-cercle 4.2s ease-in-out infinite; }
@keyframes vie-hop { 0%, 60%, 100% { transform: none; } 20% { transform: translateY(-10px); } 34% { transform: translateY(0) scaleY(.97); } }
@keyframes vie-balance { 0%, 100% { transform: rotate(-2deg); } 50% { transform: rotate(2.5deg); } }
@keyframes vie-scintille { 0%, 100% { opacity: 0; transform: scale(.4); } 50% { opacity: 1; transform: scale(1.2); } }
@keyframes vie-lance { 0%, 8%, 70%, 100% { transform: none; } 14% { transform: rotate(4deg) translateX(4px); } 24% { transform: rotate(-1deg); } }
@keyframes vie-boss { 0%, 12% { transform: scale(0) translateY(20%); opacity: 0; } 22% { transform: scale(1.12); opacity: 1; } 30% { transform: none; } 44% { transform: rotate(-5deg); }
  56% { transform: rotate(4deg); } 68% { transform: none; } 84% { transform: scale(1); opacity: 1; } 94%, 100% { transform: scale(.2) translateY(30%); opacity: 0; } }
@keyframes vie-cercle { 0%, 10%, 96%, 100% { opacity: 0; transform: scale(.4); } 18% { opacity: 1; transform: scale(1.1); } 30%, 86% { opacity: .8; transform: none; } }

/* ------------------------------------------------------------------ 8. en classe */
.classe { display: flex; flex-direction: column; gap: 72px; padding: 32px var(--gouttiere) 96px; overflow-x: clip; }
.classe > h2 { font-size: clamp(36px, 4.4vw, 60px); text-align: center; }
.classe-chapo { margin: -52px auto 0; max-width: 640px; text-align: center; color: var(--doux); font-size: 19px; }
.tel-classe { position: relative; width: min(300px, 70%); margin: 0 auto; aspect-ratio: 780 / 1688; border-radius: 13% / 6%; background: #17171A; padding: 2.4%;
  box-shadow: 0 40px 70px rgba(30,30,60,.3); }
.tel-classe .ecran { width: 100%; height: 100%; overflow: hidden; border-radius: 11% / 5.2%; }
.tel-classe img { width: 100%; height: 100%; object-fit: cover; }
.classe-prof .art { position: relative; padding: 20px 0; }
.classe-prof .art::before { content: ""; position: absolute; inset: 4% 4%; border-radius: 50%; background: radial-gradient(closest-side, rgba(43,91,168,.2), rgba(43,91,168,0)); }
.classe .numero { color: #2B5BA8; }
.classe-raid .art { position: relative; padding-bottom: 12px; }
.raid { position: relative; }
.raid-tableau { position: relative; aspect-ratio: 16 / 10.5; border-radius: 22px; overflow: hidden;
  background: radial-gradient(70% 75% at 50% 42%, #3E3778, #1E1838 76%); box-shadow: 0 0 0 7px #2A2440, 0 0 0 9px #4A4266, 0 30px 60px rgba(30,20,40,.35); }
.raid-tableau::after { content: ""; position: absolute; inset: 0; opacity: 0; pointer-events: none; background: radial-gradient(40% 45% at 50% 58%, rgba(255,247,220,.6), rgba(255,247,220,0)); }
.raid-tableau.flash::after { animation: vie-flash .3s ease-out; }
.raid-pv { position: absolute; left: 16%; right: 16%; top: 7%; height: 14px; z-index: 2; border-radius: 99px; background: rgba(0,0,0,.45); box-shadow: 0 0 0 2px rgba(255,255,255,.65); }
.raid-pv i { position: absolute; inset: 3px; border-radius: 99px; transform-origin: 0 50%; background: linear-gradient(90deg, #2FAF5E, #9BE36A); transition: transform .35s cubic-bezier(.3,.8,.4,1); }
.raid-tableau.bas .raid-pv i { background: linear-gradient(90deg, #E0553A, #F2A33A); }
.raid-boss { position: absolute; left: 50%; bottom: 3%; width: 50%; height: auto; translate: -50% 0; filter: drop-shadow(0 14px 18px rgba(0,0,0,.45)); animation: vie-boss-flotte 3.4s ease-in-out infinite; }
@keyframes vie-boss-flotte { 0%, 100% { translate: -50% 0; } 50% { translate: -50% -6px; } }
.raid-tableau.gagne .raid-boss { animation: vie-boss-fuite 3.2s ease-in-out forwards; }
@keyframes vie-boss-fuite { 0% { translate: -50% 0; opacity: 1; } 18% { translate: -50% -16px; } 40% { translate: 40% -30%; scale: .5; opacity: 0; } 80% { translate: -50% 10%; scale: .4; opacity: 0; }
  100% { translate: -50% 0; scale: 1; opacity: 1; } }
.raid-degat { font-size: 26px; }
.raid-eleves { position: relative; z-index: 2; display: flex; justify-content: center; gap: clamp(6px, 2.2vw, 20px); margin-top: -24px; }
.raid-eleve { position: relative; width: clamp(44px, 11vw, 64px); }
.raid-eleve img { width: 100%; aspect-ratio: 1; border-radius: 50%; border: 3px solid #fff; background: var(--sable); box-shadow: 0 6px 12px rgba(30,20,40,.25); }
.raid-tel { position: relative; display: block; width: 32%; aspect-ratio: .62; margin: -10px auto 0; border-radius: 3px; background: #17171A; box-shadow: 0 3px 6px rgba(0,0,0,.25); }
.raid-tel::before, .raid-tel::after { content: ""; position: absolute; inset: 2px; border-radius: 2px; background: #3F78C9; }
.raid-tel::after { background: #3EC26B; opacity: 0; }
.raid-eleve.repond { animation: vie-repond .45s cubic-bezier(.3,1.6,.5,1); }
.raid-eleve.repond .raid-tel::after { animation: vie-vert .7s ease-out; }
@keyframes vie-repond { 40% { transform: translateY(-8px) scale(1.06); } }
@keyframes vie-vert { 0%, 50% { opacity: 1; } 100% { opacity: 0; } }
.raid-coffre { position: absolute; left: 50%; top: -24px; width: 26px; height: 20px; translate: -50% 0; opacity: 0; scale: .3; border-radius: 6px 6px 3px 3px;
  background: linear-gradient(180deg, #C9803F 0 40%, #F2B833 40% 52%, #9B5A2C 52%); box-shadow: 0 0 12px rgba(242,184,51,.8); }
.raid-eleve.coffre .raid-coffre { animation: vie-coffre-pop 2.6s cubic-bezier(.3,1.6,.5,1) forwards; }
@keyframes vie-coffre-pop { 0% { opacity: 0; scale: .3; } 15% { opacity: 1; scale: 1.2; } 25%, 85% { opacity: 1; scale: 1; } 100% { opacity: 0; scale: .8; } }
.classe-raid .tel-classe.petit { position: absolute; right: -5%; bottom: -14%; width: 30%; z-index: 3; }
.classe-appel { display: flex; flex-direction: column; align-items: center; gap: 12px; width: 100%; max-width: 720px; margin: 0 auto; padding: 34px 26px; border-radius: 28px; text-align: center;
  background: #fff; box-shadow: 0 20px 40px rgba(60,30,20,.08), inset 0 0 0 2px rgba(43,91,168,.12); }
.classe-appel .gros { margin: 0; font: 800 clamp(24px, 2.6vw, 32px)/1.1 var(--titre); color: #2B5BA8; }
.classe-appel > p { margin: 0; max-width: 520px; color: var(--doux); }
.classe-appel .liste { margin-top: 6px; }
@media (min-width: 901px) {
  .classe-raid .raid-eleves { justify-content: flex-start; padding-left: 5%; gap: 14px; }
  .classe-raid .raid-eleve { width: 54px; }
  .classe-raid .tel-classe.petit { right: -6%; bottom: -10%; width: 27%; }
}
@media (max-width: 900px) {
  .classe { gap: 56px; padding-top: 16px; }
  .classe-chapo { margin-top: -36px; }
  .classe-raid .tel-classe.petit { position: relative; right: auto; bottom: auto; width: min(240px, 56%); margin: 28px auto 0; }
}

/* ------------------------------------------------------------------ 9. le pied de page : deux créatures curieuses */
.pied { position: relative; }
.pied-cachette { position: absolute; left: 0; right: 0; top: -62px; height: 62px; overflow: hidden; pointer-events: none; }
.pied-bord { position: absolute; left: 10%; right: 10%; bottom: 0; height: 10px; border-radius: 10px 10px 0 0; background: var(--dune); z-index: 1; }
.curieux { position: absolute; bottom: 2px; width: 64px; height: auto; transform: translateY(54%); transition: transform .5s cubic-bezier(.3,1.4,.5,1); }
.curieux.c1 { left: 24%; animation: vie-guette 3.2s ease-in-out infinite; }
.curieux.c2 { right: 24%; transform: translateY(56%) scaleX(-1); animation: vie-guette 3.8s ease-in-out -1s infinite; }
.curieux.cache { transform: translateY(112%); }
.curieux.c2.cache { transform: translateY(112%) scaleX(-1); }
@keyframes vie-guette { 0%, 100% { rotate: -5deg; } 50% { rotate: 6deg; } }
@media (max-width: 900px) {
  .pied-cachette { top: -46px; height: 46px; }
  .curieux { width: 60px; }
  .curieux.c1 { left: 18%; } .curieux.c2 { right: 18%; }
}

@media (prefers-reduced-motion: reduce) {
  .ecran[data-pan] > img:first-child { animation-duration: 34s; }
  .carte.quete { transition-duration: .6s; }
}