/* Le Bal des Monstres : un univers visuel par affaire.
   Chaque univers a sa couleur, sa police de titre et son image Kling (assets/univers/<nom>.jpg).
   Tant que l'image manque, le dégradé de l'univers reste seul : rien ne casse. */

:root {
  --nuit: #0b0910;
  --carte: rgba(14, 10, 20, 0.80);
  --carte-bord: rgba(255, 240, 220, 0.12);
  --os: #f4ecdc;
  --os-doux: #c9bfb0;
  --or: #f0c35a;
  --rouge: #e0343f;
  --vert: #7cf55a;
  --accent: #b08cff;
  --accent-2: #7cf55a;
  --titre: "Creepster", Impact, sans-serif;
  --titre-affaire: "Creepster", Impact, sans-serif;
  --texte: "Outfit", system-ui, sans-serif;
  --degrade: radial-gradient(120% 70% at 50% 0%, #3b2350 0%, #160f1d 55%, #0b0910 100%);
  --r: 18px;
  color-scheme: dark;
}

/* ---------- Les univers ---------- */
[data-univers="accueil"], .u-accueil { --accent: #b08cff; --accent-2: #7cf55a; --degrade: radial-gradient(120% 70% at 50% 0%, #41245c 0%, #170f20 55%, #0b0910 100%); }
[data-univers="revelation"] { --accent: #e0343f; --accent-2: #f0c35a; --degrade: radial-gradient(120% 70% at 50% 10%, #4a1016 0%, #1a0a0d 55%, #0b0909 100%); }
[data-univers="dracula"], .u-dracula { --accent: #e0343f; --accent-2: #f0c35a; --titre-affaire: "Pirata One", Georgia, serif; --degrade: radial-gradient(120% 70% at 50% 0%, #6b0f1a 0%, #2a070c 55%, #0d0507 100%); }
[data-univers="testament"], .u-testament { --accent: #e3b46a; --accent-2: #f3e3c3; --titre-affaire: "IM Fell English SC", Georgia, serif; --degrade: radial-gradient(120% 70% at 50% 0%, #5a3d1e 0%, #2a1c0e 55%, #0f0a05 100%); }
[data-univers="chat-noir"], .u-chat-noir { --accent: #d9dde3; --accent-2: #9aa3ad; --titre-affaire: "Special Elite", "Courier New", monospace; --degrade: radial-gradient(120% 70% at 50% 0%, #3a3a40 0%, #17171b 55%, #070708 100%); }
[data-univers="sorciere"], .u-sorciere { --accent: #7cf55a; --accent-2: #c38cff; --titre-affaire: "Creepster", Impact, sans-serif; --degrade: radial-gradient(120% 70% at 50% 0%, #2e5a1e 0%, #1c1030 55%, #0a0710 100%); }
[data-univers="banquet"], .u-banquet { --accent: #f0c35a; --accent-2: #c0392b; --titre-affaire: "Cinzel Decorative", Georgia, serif; --degrade: radial-gradient(120% 70% at 50% 0%, #5c1a24 0%, #26100f 55%, #0c0606 100%); }
[data-univers="potager"], .u-potager { --accent: #f2a03a; --accent-2: #9fd36b; --titre-affaire: "Creepster", Impact, sans-serif; --degrade: radial-gradient(120% 70% at 50% 0%, #2a3a52 0%, #1d1a12 55%, #090806 100%); }

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; min-height: 100%; }
body {
  background: var(--nuit);
  color: var(--os);
  font-family: var(--texte);
  font-size: 18px;
  line-height: 1.4;
  overflow-x: hidden;
}
button { font: inherit; color: inherit; cursor: pointer; border: 0; background: none; }
img { display: block; max-width: 100%; }
#app { position: relative; z-index: 1; max-width: 560px; margin: 0 auto; padding: max(16px, env(safe-area-inset-top)) 16px 110px; }

/* ---------- Le décor ---------- */
.decor { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; background: var(--degrade); transition: background 0.8s ease; }
.decor-img { position: absolute; inset: -30px; background: transparent center / cover no-repeat; opacity: 0; transition: opacity 1.1s ease; animation: zoom-lent 40s ease-in-out infinite alternate; }
.decor-img.visible { opacity: 1; }
@keyframes zoom-lent { from { transform: scale(1.03); } to { transform: scale(1.12) translateY(-1.5%); } }
.decor::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(8, 6, 12, 0.25) 0%, rgba(8, 6, 12, 0.72) 45%, rgba(8, 6, 12, 0.92) 100%); }
.brume { position: absolute; inset: -20% -40%; background: radial-gradient(40% 25% at 30% 70%, rgba(255, 255, 255, 0.05), transparent 70%), radial-gradient(35% 20% at 70% 85%, rgba(255, 255, 255, 0.04), transparent 70%); animation: brume 30s linear infinite alternate; z-index: 1; }
@keyframes brume { to { transform: translateX(12%); } }
.grain { position: absolute; inset: 0; z-index: 2; opacity: 0.08; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E"); }

/* ---------- Textes ---------- */
h1, h2, h3 { margin: 0 0 10px; font-weight: 400; }
h2 { font-family: var(--titre-affaire); font-size: 32px; line-height: 1.05; color: var(--accent); }
h3 { font-family: var(--texte); font-weight: 700; font-size: 20px; }
p { margin: 8px 0; }
.surtitre { margin: 0 0 4px; font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent-2); opacity: 0.9; }
.note { color: var(--os-doux); font-size: 15px; }
.duo-nom { font-family: var(--titre); color: var(--or); font-size: 26px; margin: 0; }

/* ---------- Boutons ---------- */
.gros-bouton { display: block; width: 100%; margin: 18px 0 8px; padding: 17px 20px; border-radius: 16px; background: var(--accent); color: #120a0f; font-weight: 800; font-size: 19px; box-shadow: 0 10px 30px -8px var(--accent); transition: transform 0.12s, opacity 0.2s; }
.gros-bouton:active { transform: scale(0.98); }
.gros-bouton:disabled { opacity: 0.35; box-shadow: none; }
.gros-bouton.secondaire { background: transparent; color: var(--os); border: 2px solid var(--carte-bord); box-shadow: none; }
.lien { color: var(--os-doux); text-decoration: underline; font-size: 15px; padding: 8px 0; }
.chip { display: inline-flex; gap: 6px; align-items: center; padding: 5px 11px; border-radius: 999px; background: var(--carte); border: 1px solid var(--carte-bord); font-size: 13px; color: var(--os-doux); }
.chip b { color: var(--os); font-variant-numeric: tabular-nums; }
.bandeau { padding: 12px 14px; border-radius: 14px; background: rgba(240, 195, 90, 0.12); border: 1px solid rgba(240, 195, 90, 0.35); font-size: 15px; }
.bandeau b { font-variant-numeric: tabular-nums; }

/* ---------- Entrée, inscription, règles ---------- */
.entree { min-height: 88vh; display: flex; flex-direction: column; justify-content: flex-end; text-align: center; padding-bottom: 30px; }
.titre-bal { font-family: var(--titre); font-size: clamp(58px, 18vw, 92px); line-height: 0.92; color: var(--vert); text-shadow: 0 0 30px rgba(124, 245, 90, 0.35), 0 4px 0 #000; margin: 6px 0 14px; animation: respire 4s ease-in-out infinite; }
@keyframes respire { 50% { text-shadow: 0 0 46px rgba(124, 245, 90, 0.55), 0 4px 0 #000; } }
.accroche-entree { font-size: 19px; color: var(--os-doux); max-width: 340px; margin: 0 auto 10px; }
.carte-ecran { margin-top: 24vh; padding: 22px 20px; border-radius: 22px; background: var(--carte); border: 1px solid var(--carte-bord); backdrop-filter: blur(8px); }
.champ { width: 100%; margin-top: 10px; padding: 16px; border-radius: 14px; border: 2px solid var(--carte-bord); background: rgba(0, 0, 0, 0.4); color: var(--os); font: inherit; font-size: 22px; }
.champ:focus { outline: none; border-color: var(--accent); }
.liste-duos { display: grid; gap: 10px; margin: 14px 0; }
.duo-libre { display: flex; justify-content: space-between; align-items: center; padding: 16px; border-radius: 14px; background: rgba(124, 245, 90, 0.10); border: 1px solid rgba(124, 245, 90, 0.4); }
.duo-libre span { color: var(--vert); font-size: 14px; text-transform: uppercase; letter-spacing: 0.1em; }
.regles ol { padding-left: 22px; margin: 12px 0; }
.regles li { margin-bottom: 10px; }
.regles .duo-nom { margin-bottom: 6px; }

/* ---------- Bureau des enquêtes ---------- */
.entete-bureau { display: flex; justify-content: space-between; align-items: flex-end; gap: 10px; margin: 10px 0 14px; }
.pastille-points { padding: 9px 14px; border-radius: 999px; background: var(--carte); border: 1px solid rgba(240, 195, 90, 0.5); color: var(--or); font-size: 15px; white-space: nowrap; }
.pastille-points b { font-size: 20px; }
.vague { margin: 22px 0 10px; font-family: var(--texte); font-size: 14px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--os-doux); }
.cartes { display: grid; gap: 12px; }
.carte-enquete { position: relative; display: block; width: 100%; min-height: 128px; border-radius: var(--r); overflow: hidden; text-align: left; background: var(--degrade); border: 1px solid var(--carte-bord); transition: transform 0.15s; }
.carte-enquete:active { transform: scale(0.985); }
.ce-image { position: absolute; inset: 0; background: center 30% / cover no-repeat; }
.ce-image::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(8, 6, 12, 0.92) 0%, rgba(8, 6, 12, 0.55) 60%, rgba(8, 6, 12, 0.2) 100%); }
.ce-texte { position: relative; display: flex; flex-direction: column; gap: 4px; padding: 18px 16px; }
.ce-sous { font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent-2); }
.ce-titre { font-family: var(--titre-affaire); font-weight: 400; font-size: 27px; line-height: 1.05; color: var(--accent); }
.ce-statut { font-size: 14px; color: var(--os); margin-top: 6px; }
.carte-enquete.fermee { filter: grayscale(0.9) brightness(0.55); }
.carte-enquete.ouverte { box-shadow: 0 0 0 2px var(--accent), 0 12px 30px -10px var(--accent); animation: appel 2.4s ease-in-out infinite; }
@keyframes appel { 50% { box-shadow: 0 0 0 2px var(--accent), 0 12px 40px -6px var(--accent); } }
.carte-enquete.repondue .ce-statut { color: var(--or); }
.carte-enquete.gagne .ce-statut { color: var(--vert); font-weight: 700; }
.carte-enquete.rate .ce-statut { color: var(--os-doux); }
.pied-bureau { text-align: center; margin-top: 24px; }

/* ---------- Une affaire ---------- */
.entete-enquete { display: flex; gap: 12px; align-items: flex-start; margin: 4px 0 10px; }
.entete-enquete h2 { margin: 0; }
.retour { flex: none; width: 44px; height: 44px; border-radius: 50%; background: var(--carte); border: 1px solid var(--carte-bord); font-size: 28px; line-height: 1; }
.infos-enquete { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.contenu { animation: monte 0.35s ease; }
@keyframes monte { from { opacity: 0; transform: translateY(8px); } }
.accroche { padding: 18px; border-radius: var(--r); background: var(--carte); border-left: 4px solid var(--accent); font-size: 19px; }
.accroche p:last-child { margin-bottom: 0; }
.dossier h3 { margin-top: 22px; }
.theatre-rappel { margin-top: 14px; padding: 14px; border-radius: 14px; border: 2px solid var(--rouge); background: rgba(224, 52, 63, 0.12); }
.theatre-rappel b { color: var(--rouge); text-transform: uppercase; letter-spacing: 0.06em; }
.verrou { margin-top: 16px; padding: 16px; border-radius: 14px; background: rgba(0, 0, 0, 0.45); border: 1px dashed var(--carte-bord); color: var(--os-doux); }

.onglets { position: fixed; z-index: 5; left: 50%; bottom: max(10px, env(safe-area-inset-bottom)); transform: translateX(-50%); width: min(540px, calc(100% - 20px)); display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; padding: 5px; border-radius: 18px; background: rgba(10, 8, 14, 0.92); border: 1px solid var(--carte-bord); backdrop-filter: blur(10px); }
.onglets button { padding: 12px 4px; border-radius: 13px; font-size: 14px; font-weight: 700; color: var(--os-doux); }
.onglets button.actif { background: var(--accent); color: #120a0f; }

/* Portraits : la toile Kling dans le cadre doré de l'appli, identique pour tous. */
.portrait { position: relative; display: inline-grid; place-items: center; flex: none; overflow: hidden; border-radius: 6px; background: radial-gradient(circle at 50% 35%, #4a3a2a, #1a120c); border: 3px solid #c9a24a; box-shadow: inset 0 0 0 2px #6b4f1d, 0 0 0 2px #3a2a10, 0 6px 14px rgba(0, 0, 0, 0.5); }
.portrait img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.portrait span { font-family: var(--titre); color: #e9d39b; font-size: 22px; }
.portrait.xs { width: 26px; height: 32px; border-width: 2px; } .portrait.xs span { font-size: 13px; }
.portrait.s { width: 38px; height: 48px; border-width: 2px; } .portrait.s span { font-size: 16px; }
.portrait.m { width: 58px; height: 74px; }
.portrait.l { width: 84px; height: 108px; } .portrait.l span { font-size: 32px; }

.fiches { display: grid; gap: 10px; margin-top: 10px; }
.fiche { position: relative; display: flex; gap: 14px; align-items: center; padding: 12px; border-radius: var(--r); background: var(--carte); border: 1px solid var(--carte-bord); text-align: left; overflow: hidden; }
.fiche-texte { display: flex; flex-direction: column; gap: 4px; }
.fiche-texte b { font-size: 18px; color: var(--accent-2); }
.fiche-texte span { font-size: 15px; color: var(--os-doux); }
.tampon { position: absolute; right: 10px; top: 50%; transform: translateY(-50%) rotate(-14deg) scale(1.6); padding: 4px 10px; border: 3px solid var(--rouge); border-radius: 8px; color: var(--rouge); font-family: var(--titre); font-size: 22px; opacity: 0; pointer-events: none; transition: all 0.25s cubic-bezier(.2, 1.6, .4, 1); }
.fiche.barree { opacity: 0.75; }
.fiche.barree .tampon { opacity: 0.9; transform: translateY(-50%) rotate(-14deg) scale(1); }
.fiche.barree .portrait { filter: grayscale(1); }

.indices { list-style: none; padding: 0; margin: 12px 0; display: grid; gap: 10px; }
.indice { position: relative; padding: 14px 44px 14px 14px; border-radius: 14px; background: var(--carte); border: 1px solid var(--carte-bord); font-size: 17px; animation: monte 0.4s ease both; }
.indice i { position: absolute; right: 12px; top: 12px; width: 24px; height: 24px; display: grid; place-items: center; border-radius: 50%; background: var(--accent); color: #120a0f; font-style: normal; font-size: 13px; font-weight: 800; }
.indice.cache { background: repeating-linear-gradient(45deg, rgba(0, 0, 0, 0.55) 0 10px, rgba(0, 0, 0, 0.35) 10px 20px); color: var(--os-doux); font-style: italic; font-size: 15px; }
.indice.cache i { background: #444; color: #aaa; }
.indice-qui { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; color: var(--accent-2); }

/* Réponse */
.formulaire fieldset { border: 0; padding: 0; margin: 0 0 22px; }
.formulaire legend { font-size: 20px; font-weight: 700; margin-bottom: 10px; }
.choix { display: grid; gap: 8px; }
.choix.avec-portraits { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); }
.choix-bouton { display: flex; gap: 10px; align-items: center; padding: 12px; border-radius: 14px; background: var(--carte); border: 2px solid var(--carte-bord); text-align: left; transition: all 0.15s; }
.choix.avec-portraits .choix-bouton { flex-direction: column; text-align: center; font-size: 14px; padding: 10px 6px; }
.choix-bouton small { display: block; color: var(--os-doux); font-size: 13px; }
.choix-bouton.actif { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 22%, rgba(10, 8, 14, 0.9)); box-shadow: 0 0 18px -4px var(--accent); }
.choix-bouton.barre { opacity: 0.45; }
.choix-bouton.barre .portrait { filter: grayscale(1); }
.attente-theatre { text-align: center; padding: 24px 16px; border-radius: var(--r); background: var(--carte); border: 1px solid var(--carte-bord); }
.gros-compte { font-family: var(--titre); font-size: 64px; color: var(--accent); margin: 10px 0 0; font-variant-numeric: tabular-nums; }

.sceau-bloc { text-align: center; padding: 26px 18px; border-radius: var(--r); background: var(--carte); border: 1px solid var(--carte-bord); }
.sceau { width: 96px; height: 96px; margin: 0 auto 14px; display: grid; place-items: center; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #e0434c, #8a0f18 70%); color: #f7d7c4; font-family: var(--titre); font-size: 30px; box-shadow: 0 0 0 6px rgba(138, 15, 24, 0.35), 0 10px 26px rgba(0, 0, 0, 0.6); animation: tamponne 0.5s cubic-bezier(.2, 1.6, .4, 1); }
@keyframes tamponne { from { transform: scale(2.4) rotate(-20deg); opacity: 0; } }
.rep-liste { list-style: none; padding: 0; margin: 14px 0; text-align: left; }
.rep-liste li { display: flex; justify-content: space-between; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--carte-bord); }
.rep-liste span { color: var(--os-doux); font-size: 15px; }

.solution { padding: 20px 18px; border-radius: var(--r); background: var(--carte); border: 1px solid var(--carte-bord); }
.solution h3 { font-family: var(--titre-affaire); font-weight: 400; font-size: 26px; color: var(--accent); }
.verdict { padding: 12px 14px; border-radius: 12px; font-size: 18px; }
.verdict.gagne { background: rgba(124, 245, 90, 0.14); border: 1px solid rgba(124, 245, 90, 0.5); }
.verdict.rate { background: rgba(255, 255, 255, 0.06); border: 1px solid var(--carte-bord); }
.revelation-texte p { font-size: 17px; }
.arrivees, .podium { list-style: none; padding: 0; margin: 14px 0 6px; display: grid; gap: 6px; }
.arrivees li, .podium li { display: grid; grid-template-columns: 44px 1fr auto auto; gap: 10px; align-items: center; padding: 10px 12px; border-radius: 12px; background: rgba(0, 0, 0, 0.35); }
.podium li { grid-template-columns: 44px 1fr auto; font-size: 18px; }
.arrivees em { font-style: normal; color: var(--os-doux); font-size: 14px; }
.arrivees i, .podium i { font-style: normal; font-weight: 800; color: var(--or); }
.arrivees li.moi, .podium li.moi { outline: 2px solid var(--or); }
.podium li:first-child span { color: var(--or); font-weight: 800; }

/* Visuels */
.stories-vignette { display: block; width: 100%; margin-top: 18px; padding: 18px; border-radius: var(--r); text-align: left; background: linear-gradient(135deg, rgba(124, 245, 90, 0.18), rgba(195, 140, 255, 0.22)); border: 1px solid rgba(195, 140, 255, 0.45); }
.stories-vignette b { display: block; font-size: 19px; margin: 10px 0 4px; }
.stories-vignette span { font-size: 14px; color: var(--os-doux); }
.sv-ronds { display: flex; gap: 6px; }
.sv-ronds i { width: 42px; height: 42px; border-radius: 50%; background: radial-gradient(circle, #7cf55a 30%, #2c6a18 70%); box-shadow: 0 0 0 3px #c38cff; }
.dessin { display: block; width: 100%; margin-top: 18px; padding: 8px; border-radius: var(--r); background: var(--carte); border: 1px solid var(--carte-bord); position: relative; }
.dessin svg { width: 100%; height: auto; display: block; border-radius: 10px; }
.dessin-loupe { position: absolute; right: 16px; bottom: 16px; padding: 6px 12px; border-radius: 999px; background: rgba(0, 0, 0, 0.7); font-size: 13px; }
.testaments { display: grid; gap: 10px; }
.parchemin { padding: 14px 16px; border-radius: 6px; background: #efe2c4; color: #3b2a14; font-family: Georgia, serif; box-shadow: inset 0 0 30px rgba(120, 80, 30, 0.35), 0 6px 16px rgba(0, 0, 0, 0.45); }
.pa-titre { display: flex; align-items: center; gap: 8px; font: 700 12px var(--texte); letter-spacing: 0.08em; text-transform: uppercase; color: #7a5a2a; margin-bottom: 8px; }
.pa-texte { font-style: italic; font-size: 18px; }
.pa-detail { margin-top: 8px; font-size: 14px; color: #6b5432; }
.parchemin.sang .pa-texte { color: #7a0f18; }
.parchemin.machine .pa-texte { font-family: "Special Elite", "Courier New", monospace; font-style: normal; }
.parchemin.bandelette { background: repeating-linear-gradient(-8deg, #ece3cf 0 14px, #e1d5b8 14px 16px); }
.parchemin.rose .pa-texte { color: #d6337f; font-family: "Caveat", cursive; font-size: 24px; font-style: normal; }
.parchemin.cache { background: rgba(0, 0, 0, 0.45); color: var(--os-doux); box-shadow: none; border: 1px dashed var(--carte-bord); }
.parchemin.cache .pa-titre { color: var(--os-doux); }
.plan-table { margin-top: 8px; }
.plan-svg { width: 100%; max-width: 420px; display: block; margin: 0 auto; }
.plan-svg .place circle { fill: #2b2140; stroke: #b9aec4; stroke-width: 2; }
.plan-svg .place.prise circle { stroke: var(--or); stroke-width: 3; }
.plan-svg .num { fill: #ece6dc; font: 700 20px var(--texte); }
.plan-svg .qui { fill: var(--or); font: 700 13px var(--texte); }
.plan-svg .plan-centre { fill: #e9d6bf; font: 22px "Cinzel Decorative", Georgia, serif; }
.plan-svg .verre .cible { fill: rgba(255, 255, 255, 0.08); stroke: rgba(255, 255, 255, 0.5); }
.plan-svg .verre .coupe { fill: none; stroke: #f2f2f2; stroke-width: 1.6; }
.plan-svg .verre.marque .cible { fill: rgba(124, 245, 90, 0.35); stroke: var(--vert); stroke-width: 2.5; }
.plan-svg g { cursor: pointer; }
.regle { padding: 12px 14px; border-radius: 12px; background: rgba(240, 195, 90, 0.12); border: 1px solid rgba(240, 195, 90, 0.4); font-size: 16px; }
.choix-liste { display: grid; gap: 8px; }
.choix-convive { display: flex; gap: 12px; align-items: center; padding: 10px; border-radius: 12px; background: rgba(255, 255, 255, 0.06); text-align: left; }
.choix-convive.actif { outline: 2px solid var(--or); }
.choix-convive.vide { justify-content: center; color: var(--os-doux); }

/* ---------- Feuilles plein écran ---------- */
.feuille { position: fixed; inset: 0; z-index: 50; display: flex; align-items: flex-end; justify-content: center; }
.feuille-fond { position: absolute; inset: 0; background: rgba(4, 3, 6, 0.75); opacity: 0; transition: opacity 0.25s; }
.feuille-boite { position: relative; width: min(560px, 100%); max-height: 92vh; overflow: auto; padding: 22px 18px max(22px, env(safe-area-inset-bottom)); border-radius: 22px 22px 0 0; background: #14101b; border: 1px solid var(--carte-bord); transform: translateY(30px); opacity: 0; transition: all 0.28s ease; }
.feuille.ouverte .feuille-fond { opacity: 1; }
.feuille.ouverte .feuille-boite { transform: none; opacity: 1; }
.feuille-x { position: absolute; right: 10px; top: 8px; width: 40px; height: 40px; font-size: 28px; color: var(--os-doux); }

.feuille.theatre .feuille-boite, .feuille.revelation .feuille-boite { height: 100%; max-height: none; border-radius: 0; display: flex; flex-direction: column; justify-content: center; text-align: center; }
.feuille.theatre .feuille-boite { background: radial-gradient(circle at 50% 30%, #5a0a12, #12060a 70%); animation: secousse 0.6s 0.2s; }
@keyframes secousse { 10%, 50%, 90% { transform: translateX(-8px); } 30%, 70% { transform: translateX(8px); } }
.theatre-titre { font-family: var(--titre); font-size: 58px; color: #ff4b55; text-transform: uppercase; text-shadow: 0 0 30px rgba(255, 60, 70, 0.6); }
.theatre-texte { font-size: 22px; margin: 10px 0 18px; }
.feuille.pouce .feuille-boite { border-top: 3px solid var(--or); }
.pouce-texte { font-size: 21px; }
.feuille.revelation .feuille-boite { background: radial-gradient(circle at 50% 20%, #3a0d12, #0b0607 70%); justify-content: flex-start; padding-top: max(40px, env(safe-area-inset-top)); }
.rev-etape { opacity: 0; max-height: 0; overflow: hidden; transform: translateY(14px); transition: all 0.7s ease; }
.rev-etape.visible { opacity: 1; max-height: 1600px; transform: none; margin-bottom: 14px; }
.rev-titre { font-family: var(--titre); font-size: 44px; color: var(--or); }
.rev-reponse { font-family: var(--titre); font-weight: 400; font-size: 34px; color: #ff4b55; line-height: 1.1; }
.rev-para { font-size: 19px; text-align: left; }
.feuille.confirmer .rep-liste { margin-top: 6px; }
.sceau-bouton { position: relative; display: block; width: 100%; margin-top: 16px; padding: 20px; border-radius: 16px; overflow: hidden; background: #3a0d12; border: 2px solid #e0434c; font-weight: 800; font-size: 18px; user-select: none; -webkit-user-select: none; touch-action: none; }
.sceau-bouton .remplissage { position: absolute; inset: 0; width: 0; background: linear-gradient(90deg, #8a0f18, #e0434c); }
.sceau-bouton.appui .remplissage { width: 100%; transition: width 1.2s linear; }
.sceau-bouton .txt { position: relative; }
.visio .feuille-boite { height: 100%; max-height: none; border-radius: 0; display: flex; flex-direction: column; }
.visio-titre { margin: 0 40px 10px 0; }
.visio-cadre { flex: 1; overflow: auto; border-radius: 12px; background: #000; -webkit-overflow-scrolling: touch; }
.visio-zoom svg { width: 100%; height: auto; display: block; }
.visio-boutons { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-top: 10px; }
.visio-boutons button { padding: 12px; border-radius: 12px; background: var(--carte); border: 1px solid var(--carte-bord); font-weight: 700; }
.visio-boutons button.actif { background: var(--accent); color: #120a0f; }

/* Stories façon Instagram */
.stories-feuille .feuille-boite { height: 100%; max-height: none; border-radius: 0; padding: 0; background: #000; }
.stories-lecteur { position: relative; height: 100%; display: flex; flex-direction: column; padding: max(14px, env(safe-area-inset-top)) 14px 24px; background: linear-gradient(180deg, #3b1f4f, #160f1d); }
.stories-lecteur.nb { filter: grayscale(1) contrast(1.1); }
.st-barres { display: flex; gap: 4px; }
.st-barres span { flex: 1; height: 3px; border-radius: 3px; background: rgba(255, 255, 255, 0.3); overflow: hidden; }
.st-barres span i { display: block; height: 100%; width: 0; background: #fff; }
.st-barres span.vu i { width: 100%; }
.st-barres span.en-cours i { animation: barre 7s linear forwards; }
@keyframes barre { to { width: 100%; } }
.st-entete { display: flex; align-items: center; gap: 8px; margin: 12px 0; font-size: 15px; }
.st-rond { width: 34px; height: 34px; border-radius: 50%; background: radial-gradient(circle, #7cf55a 30%, #2c6a18 70%); box-shadow: 0 0 0 2px #c38cff; }
.st-heure { margin-left: auto; font-weight: 800; font-size: 18px; }
.st-corps { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 24px; padding: 0 6px; }
.st-texte { font-size: 23px; line-height: 1.35; }
.st-legende { align-self: center; padding: 8px 14px; border-radius: 10px; background: #fff; color: #111; font-weight: 800; font-size: 17px; transform: rotate(-3deg); }
.st-prec, .st-suiv { position: absolute; top: 80px; bottom: 0; width: 40%; z-index: 2; }
.st-prec { left: 0; } .st-suiv { right: 0; }
.stories-feuille .feuille-x { z-index: 3; top: max(28px, env(safe-area-inset-top)); color: #fff; }

/* ---------- Toasts ---------- */
#toasts { position: fixed; z-index: 60; left: 50%; top: max(12px, env(safe-area-inset-top)); transform: translateX(-50%); display: grid; gap: 8px; width: min(520px, calc(100% - 24px)); pointer-events: none; }
.toast { padding: 12px 16px; border-radius: 14px; background: rgba(20, 16, 27, 0.95); border: 1px solid var(--carte-bord); font-size: 16px; animation: monte 0.3s ease; transition: opacity 0.5s, transform 0.5s; }
.toast.or { border-color: var(--or); color: var(--or); }
.toast.rouge { border-color: var(--rouge); }
.toast.part { opacity: 0; transform: translateY(-8px); }

/* ---------- Console ---------- */
.console #app { max-width: 820px; }
.console-onglets { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 16px; }
.console-onglets button { padding: 9px 14px; border-radius: 999px; background: var(--carte); border: 1px solid var(--carte-bord); font-size: 15px; }
.console-onglets button.actif { background: var(--accent); color: #120a0f; font-weight: 700; }
.bloc { padding: 16px; border-radius: var(--r); background: var(--carte); border: 1px solid var(--carte-bord); margin-bottom: 12px; }
.ligne-enquete { display: grid; grid-template-columns: 1fr auto; gap: 10px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--carte-bord); }
.ligne-enquete:last-child { border-bottom: 0; }
.ligne-enquete small { color: var(--os-doux); display: block; }
.etat { display: inline-block; padding: 2px 8px; border-radius: 6px; font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; }
.etat.fermee { background: #333; color: #bbb; } .etat.ouverte { background: rgba(124, 245, 90, 0.2); color: var(--vert); } .etat.revelee { background: rgba(240, 195, 90, 0.2); color: var(--or); }
.petits-boutons { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }
.petit-bouton { padding: 9px 13px; border-radius: 10px; background: rgba(255, 255, 255, 0.08); border: 1px solid var(--carte-bord); font-size: 14px; font-weight: 700; }
.petit-bouton.fort { background: var(--accent); color: #120a0f; }
.petit-bouton.danger { border-color: var(--rouge); color: #ff8a90; }
.membre { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; justify-content: space-between; padding: 8px 0; }

/* Console : le pilote et le journal */
.pilote { border-left: 4px solid var(--or); }
.pilote h3 { margin: 2px 0 4px; }
.pilote .gros-bouton { margin: 14px 0 6px; font-size: 17px; }
.pilote-secours { justify-content: flex-start; margin-top: 10px; }
.journal { margin: 6px 0 0; padding-left: 20px; }
.journal li { padding: 3px 0; }
.journal em { color: var(--os-doux); font-style: normal; font-variant-numeric: tabular-nums; margin-right: 6px; }

/* Les peurs d'Adeline : par-dessus tout, sans jamais bloquer les doigts */
.peur { position: fixed; inset: 0; z-index: 200; pointer-events: none; overflow: hidden; }
.peur-eclair { background: #fff; opacity: 0; animation: eclair 1.5s linear forwards; }
@keyframes eclair { 0% { opacity: 0; } 4% { opacity: 1; } 10% { opacity: 0.1; } 16% { opacity: 1; } 30% { opacity: 0.85; } 100% { opacity: 0; } }
.peur-panne { background: #000; animation: panne 2.7s steps(1, end) forwards; }
@keyframes panne { 0% { opacity: 1; } 22% { opacity: 0.25; } 26% { opacity: 1; } 55% { opacity: 0.55; } 58% { opacity: 1; } 82% { opacity: 0.3; } 85% { opacity: 1; } 96% { opacity: 1; } 100% { opacity: 0; } }
.peur-secousse { background: radial-gradient(circle, transparent 40%, rgba(0, 0, 0, 0.7)); }
body.peur-tremble #app, body.peur-tremble .decor { animation: tremble 0.12s linear 13; }
@keyframes tremble { 0% { transform: translate(0, 0) rotate(0); } 25% { transform: translate(-9px, 5px) rotate(-1.2deg); } 50% { transform: translate(8px, -6px) rotate(1deg); } 75% { transform: translate(-6px, -4px) rotate(-0.6deg); } 100% { transform: translate(0, 0) rotate(0); } }
.peur-fantome { background: rgba(0, 0, 0, 0.85); animation: fantome-fond 1.3s ease-out forwards; }
.peur-visage { position: absolute; inset: -10%; background: center 30% / cover no-repeat; filter: grayscale(1) contrast(1.8) brightness(1.15); mix-blend-mode: screen; animation: visage 1.3s cubic-bezier(0.2, 0.9, 0.2, 1) forwards; }
@keyframes visage { 0% { transform: scale(0.25); opacity: 0; } 8% { transform: scale(1.15); opacity: 1; } 14% { transform: scale(1.05) translateX(-2%); opacity: 0.6; } 18% { opacity: 1; transform: scale(1.12) translateX(2%); } 75% { opacity: 1; } 100% { transform: scale(1.3); opacity: 0; } }
@keyframes fantome-fond { 75% { opacity: 1; } 100% { opacity: 0; } }
.peur-fil { position: absolute; left: 62%; top: 0; width: 2px; height: 55%; background: rgba(230, 230, 230, 0.7); transform-origin: top; animation: fil 3.6s ease-in-out forwards; }
.peur-araignee { position: absolute; bottom: -70px; left: -70px; width: 140px; height: 140px; animation: balance 0.9s ease-in-out infinite alternate; }
.peur-araignee .patte { animation: patte 0.18s linear infinite alternate; }
@keyframes fil { 0% { transform: scaleY(0.02); } 30% { transform: scaleY(1); } 70% { transform: scaleY(1); } 100% { transform: scaleY(0.02); } }
@keyframes balance { from { transform: rotate(-8deg); } to { transform: rotate(8deg); } }
@keyframes patte { to { transform: translateY(3px); } }
.peur-murmure { display: flex; align-items: center; justify-content: center; background: radial-gradient(circle, rgba(40, 0, 0, 0.35), rgba(0, 0, 0, 0.85)); animation: fondu-peur 3s ease forwards; }
.peur-mot { margin: 0 24px; font-family: Creepster, Impact, sans-serif; font-size: clamp(44px, 13vw, 90px); line-height: 1.05; text-align: center; color: #d0101e; text-shadow: 0 0 24px rgba(208, 16, 30, 0.8); animation: mot 3s ease forwards; }
@keyframes mot { 0% { opacity: 0; filter: blur(12px); } 25% { opacity: 1; filter: blur(0); } 40% { opacity: 0.4; } 44% { opacity: 1; } 80% { opacity: 1; } 100% { opacity: 0; filter: blur(6px); } }
@keyframes fondu-peur { 0% { opacity: 0; } 15% { opacity: 1; } 80% { opacity: 1; } 100% { opacity: 0; } }
.peur-griffes { animation: fondu-griffes 2.4s ease forwards; }
.peur-griffes svg { width: 100%; height: 100%; }
.peur-griffes path { stroke-dasharray: 1; stroke-dashoffset: 1; filter: drop-shadow(0 0 3px rgba(80, 0, 0, 0.9)); animation: griffe 0.25s ease-out forwards; }
.peur-griffes path:nth-child(2) { animation-delay: 0.22s; }
.peur-griffes path:nth-child(3) { animation-delay: 0.44s; }
@keyframes griffe { to { stroke-dashoffset: 0; } }
@keyframes fondu-griffes { 80% { opacity: 1; } 100% { opacity: 0; } }
.peur-coeur { background: radial-gradient(circle, transparent 35%, rgba(170, 0, 20, 0.75)); animation: coeur 0.8s ease-out 4 forwards; }
@keyframes coeur { 0% { opacity: 0.2; } 12% { opacity: 1; } 24% { opacity: 0.45; } 36% { opacity: 0.95; } 100% { opacity: 0.1; } }

/* La page des peurs d'Adeline */
.peurs-grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; margin: 12px 0; }
.peur-carte { position: relative; text-align: left; padding: 14px 12px 12px; border-radius: 16px; background: var(--carte); border: 1px solid var(--carte-bord); color: var(--os); }
.peur-carte b { display: block; font-size: 17px; color: var(--accent); }
.peur-carte small { display: block; margin-top: 4px; color: var(--os-doux); font-size: 13px; line-height: 1.35; }
.peur-envoi { all: unset; display: block; cursor: pointer; }
.peur-envoi:disabled { opacity: 0.35; }
.peur-apercu { display: inline-block; margin-top: 8px; font-size: 13px; color: var(--or); text-decoration: underline; }
.peur-cible { width: 100%; padding: 12px; border-radius: 12px; background: var(--carte); color: var(--os); border: 1px solid var(--carte-bord); font: inherit; }