/* Base : page, cadre plein ecran (centre a 430 px sur grand ecran), couches communes. */
:root {
  --acc: #8ff0b8;
  --bougie: #e0a458;
  --papier: #e8dcc0;
  --parchemin: #d9c9a3;
  --fond: #050507;
  --rouge: #e5484d;
  --police-main: 'Caveat', cursive;
  --police-texte: 'Atkinson Hyperlegible', system-ui, sans-serif;
  --police-systeme: -apple-system, system-ui, sans-serif;
  --safe-t: env(safe-area-inset-top);
  --safe-b: env(safe-area-inset-bottom);
  --pad-top: 84px;
  --hud-top: 12px;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: #000;
  height: 100%;
  overflow: hidden;
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
  user-select: none;
  touch-action: manipulation;
  overscroll-behavior: none;
}

body { font-family: var(--police-texte); color: var(--papier); }
a { color: var(--acc); }
a:hover { color: #c6ffe0; }
input::placeholder { color: rgba(232, 220, 192, .35); }
input { outline: none; }
button { font-family: inherit; }
button:focus-visible, input:focus-visible { outline: 2px solid var(--acc); outline-offset: 2px; }

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.defs-svg { position: absolute; }

.ecran-global {
  position: fixed;
  inset: 0;
  background: radial-gradient(ellipse at 50% 60%, #121016, #000 70%);
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: var(--police-texte);
  color: var(--papier);
}

.cadre {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  overflow: clip;
  background: var(--fond);
  flex: none;
}

@media (min-width: 560px) {
  .cadre {
    width: min(100%, 430px);
    height: min(100%, 932px);
    border-radius: 28px;
    box-shadow: 0 0 0 1px #2a2a30, 0 40px 100px rgba(0, 0, 0, .9);
  }
}

.sans-js { position: absolute; inset: auto 24px 40px; text-align: center; font-family: var(--police-main); font-size: 28px; color: var(--acc); }

/* Scene 3D et brume */
.scene3d { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

.brume { position: absolute; inset: 0; pointer-events: none; transition: transform .4s cubic-bezier(.2, .7, .2, 1); }
.brume > div { position: absolute; inset: -20%; opacity: var(--brume-op, 1); transition: opacity 3s; }
.brume-a { transform: translate(calc(var(--px, 0) * -18px), calc(var(--py, 0) * -12px)); }
.brume-a > div { background: radial-gradient(ellipse at 30% 40%, var(--brume, rgba(224, 164, 88, .09)) 0, transparent 55%); animation: fogDrift 26s ease-in-out infinite; }
.brume-b { transform: translate(calc(var(--px, 0) * 14px), calc(var(--py, 0) * 10px)); }
.brume-b > div { background: radial-gradient(ellipse at 70% 70%, var(--brume, rgba(224, 164, 88, .09)) 0, transparent 50%); animation: fogDrift2 34s ease-in-out infinite; }

/* Plateau qui recoit les ecrans (pivote pour les transitions 3D) */
.scene {
  position: absolute;
  inset: 0;
  will-change: transform;
  transform: perspective(1200px) rotateX(calc(var(--py, 0) * -3deg)) rotateY(calc(var(--px, 0) * 3deg));
  transition: transform .5s cubic-bezier(.2, .7, .2, 1);
}

/* Grain, vignette, invasion verte, griffures de fond */
.grain {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
  opacity: .07;
  mix-blend-mode: overlay;
  z-index: 3;
}
.vignette { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse at 50% 45%, transparent 50%, rgba(0, 0, 0, .75)); z-index: 3; }
.invasion { position: absolute; inset: 0; pointer-events: none; box-shadow: inset 0 0 var(--inv-blur, 40px) rgba(143, 240, 184, var(--inv, 0)); z-index: 3; transition: box-shadow 2s; }
.griffures-fond {
  position: absolute;
  inset: -10%;
  pointer-events: none;
  opacity: var(--griffe, 0);
  background: repeating-linear-gradient(115deg, transparent 0 140px, rgba(232, 220, 192, .25) 140px 141px, transparent 141px 260px), repeating-linear-gradient(60deg, transparent 0 203px, rgba(143, 240, 184, .2) 203px 204px);
  z-index: 3;
  transition: opacity 3s;
}
.geste-secret { position: absolute; left: 0; top: 0; width: 72px; height: 96px; z-index: 9; }

/* Boutons partages */
.btn-bougie {
  margin-top: 28px;
  min-height: 60px;
  width: 100%;
  border: 1px solid rgba(224, 164, 88, .55);
  background: rgba(224, 164, 88, .08);
  color: var(--bougie);
  font: 700 17px var(--police-texte);
  letter-spacing: .08em;
  border-radius: 3px;
  cursor: pointer;
}
.btn-vert {
  min-height: 60px;
  border: 1px solid rgba(143, 240, 184, .5);
  background: rgba(143, 240, 184, .06);
  color: var(--acc);
  font: 700 16px var(--police-texte);
  letter-spacing: .1em;
  border-radius: 3px;
  cursor: pointer;
  animation: riseIn 1s both;
}
.btn-pointille {
  min-height: 48px;
  padding: 0 18px;
  border: 1px dashed rgba(232, 220, 192, .25);
  background: transparent;
  color: rgba(232, 220, 192, .55);
  font-size: 13px;
  border-radius: 3px;
  cursor: pointer;
}

/* Texte de Camille : lettres et mots */
.mot { display: inline-block; white-space: nowrap; }
.lettre { display: inline-block; animation: inkLetter .55s cubic-bezier(.2, .7, .2, 1) both; }
.lettre.rune { color: var(--acc); text-shadow: 0 0 10px var(--acc); }

.ecran { position: absolute; inset: 0; }
.ecran-haut { display: flex; flex-direction: column; padding: calc(var(--pad-top) + var(--safe-t)) 20px calc(24px + var(--safe-b)); }
.surtitre { font-size: 12px; letter-spacing: .3em; text-transform: uppercase; color: rgba(232, 220, 192, .45); margin-bottom: 10px; animation: riseIn 1s .2s both; }
.espace { flex: 1; min-height: 12px; }

@media (prefers-reduced-motion: reduce) {
  .brume > div { animation: none; }
}

/* Enveloppes logiques sans boite : leurs enfants restent des elements flex de l'ecran (comme les sc-if du prototype). */
.saisie, .saisie-ouija, .sceau-effets, .rituel-etape, .bloc { display: contents; }