/* Toutes les pages : le dieu occupe tout l'écran, la page défile devant lui.
   La page prend la clarté de son ciel : body[data-ciel="sombre"] quand le Ton ou l'Échelle font tomber la nuit. */

.page-scene {
  --scene-voile:rgba(243, 236, 224, .55);
  --scene-ombre:0 0 28px rgba(243, 236, 224, .9), 0 0 2px rgba(243, 236, 224, .6);
  --scene-lecture:rgba(243, 236, 224, .82);
  --scene-panneau:rgba(250, 245, 236, .55);
  transition:background-color 1.2s ease, color 1.2s ease;
}
.page-scene[data-ciel="sombre"] {
  color-scheme:dark;
  --encre:#140d0a;
  --os:#f3e8d8;
  --os-2:#d6c4ae;
  --brume:#b3a290;
  --brume-2:#8d7d6e;
  --trait:rgba(243, 220, 190, .14);
  --trait-2:rgba(243, 220, 190, .26);
  --lueur:#f2a66c;
  --lueur-a:rgba(240, 150, 90, .1);
  --lueur-b:rgba(240, 150, 90, .32);
  --encre-2:#1e1511;
  --encre-3:#2a1d17;
  --encre-4:#3d2b22;
  --braise:#e3915c;
  --voile:#5a3a26;
  --nuit:#1a110d;
  --scene-voile:rgba(14, 8, 6, .62);
  --scene-ombre:0 0 28px rgba(14, 8, 6, .9), 0 0 2px rgba(14, 8, 6, .7);
  --scene-lecture:rgba(16, 10, 8, .84);
  --scene-panneau:rgba(30, 20, 15, .55);
}
.page-scene::before { display:none }

/* L'en-tête flotte sur la scène, sur un voile qui descend du haut de l'écran : il reste lisible même devant le halo. */
.page-scene .entete { position:absolute; top:0; left:0; right:0; z-index:3; margin:0; padding-inline:var(--marge); border-bottom:0 }
.page-scene .entete::before {
  content:""; position:absolute; inset:0 0 -70px; z-index:-1; pointer-events:none;
  background:linear-gradient(to bottom, var(--scene-lecture) 0%, var(--scene-voile) 55%, transparent 100%);
}
.page-scene .nav { gap:clamp(18px, 2.4vw, 34px) }
.page-scene .nav a { font:500 14px/1.3 var(--sans); letter-spacing:.02em; color:var(--os); text-shadow:var(--scene-ombre) }
.page-scene .nav a:hover { color:var(--lueur) }
.page-scene .nav a[aria-current] { color:var(--lueur) }
.page-scene .nav a[aria-current]::after { width:4px; height:4px; bottom:-9px }
.page-scene .marque span, .page-scene .entete-heure { text-shadow:var(--scene-ombre) }
.page-scene .marque small { font-size:9px; color:var(--os-2) }
.page-scene .entete-heure { font-size:11px; color:var(--os) }
.page-scene .pied { position:relative; z-index:2; margin-top:0; border-top-color:var(--trait) }

/* ---------- la scène ---------- */

.scene { max-width:none; margin:0; padding:0; position:relative }
/* Le ciel est peint par le serveur (--ciel-*) : la page s'ouvre dans ses couleurs, le dieu s'y pose quand la 3D est prête. */
.scene-dieu {
  position:fixed; inset:0; z-index:0;
  background:
    radial-gradient(ellipse 34% 30% at var(--baie-x, 62%) 22%, var(--ciel-baie, transparent), transparent 100%),
    linear-gradient(var(--ciel-haut, var(--encre)), var(--ciel-bas, var(--encre)));
}
.scene-dieu .dieu-toile { transition-duration:.7s }
/* Un voile sur les bords : le texte reste lisible, le dieu reste au centre de la lumière. */
.scene-dieu::after {
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    radial-gradient(ellipse 62% 70% at 50% 46%, transparent 55%, var(--scene-voile) 100%),
    linear-gradient(to top, var(--scene-voile), transparent 26%);
}
.scene-dieu .dieu-bulle, .scene-dieu .dieu-son { z-index:2 }
.dieu-silence .dieu-bulle { opacity:0 }
.scene-dieu .dieu-son { position:fixed; right:18px; bottom:18px }
.scene-repli { display:none }
.dieu-sans-3d .scene-repli {
  display:block; position:absolute; left:50%; top:50%; width:min(72vmin, 620px); height:auto; transform:translate(-50%, -50%);
  border-radius:44% 44% 4px 4px / 32% 32% 4px 4px;
}

.plan {
  position:relative; z-index:1; min-height:100vh; min-height:100svh;
  display:grid; padding:110px var(--marge) 72px;
  pointer-events:none; text-shadow:var(--scene-ombre);
}
.plan a, .plan button, .plan input, .plan label, .plan-texte, .plan h1 { pointer-events:auto }
.plan h2 { font:300 clamp(36px, 4.4vw, 68px)/1 'Fraunces', serif; letter-spacing:-.025em; margin:0 0 20px }
.plan .sur-titre { margin:0 0 16px; text-transform:uppercase }
.plan .bouton { text-shadow:none; background:#b5542a; color:#fff8eb; border-color:#b5542a }
.plan .bouton.fantome { background:transparent; color:var(--os); border-color:var(--trait-2) }
.plan-texte { max-width:430px; align-self:center }

/* 1. L'ouverture : le titre en bas à gauche, l'appel en bas à droite. */
.plan-ouverture { grid-template-columns:minmax(0, 1fr) auto; align-items:end; gap:32px }
.plan-ouverture h1 {
  margin:0; max-width:min(44vw, 9.5em);
  font:300 clamp(42px, 5.6vw, 96px)/.94 'Fraunces', serif; letter-spacing:-.035em;
}
.plan-ouverture h1 em { display:block; margin-top:.12em; color:var(--lueur); font-style:italic }
.ouverture-appel { display:grid; justify-items:end; gap:12px; text-align:right; padding-bottom:6px }
.ouverture-appel .etat { display:flex; align-items:center; gap:9px; margin:0; font:500 11px/1.4 var(--mono); letter-spacing:.12em; text-transform:uppercase; color:var(--os-2) }
.ouverture-appel .etat b { color:var(--os); font-weight:500 }
.ouverture-appel .compte { margin:0; font:400 12px/1.4 var(--mono); letter-spacing:.06em; color:var(--brume) }
.ouverture-appel .compte b { color:var(--os); font-weight:500 }
.ouverture-appel .compte.grand b { font:300 clamp(34px, 3.6vw, 54px)/1 'Fraunces', serif; letter-spacing:-.02em; font-variant-numeric:tabular-nums }
.defiler {
  position:absolute; left:50%; bottom:22px; width:1px; height:44px; transform:translateX(-50%);
  background:var(--trait-2); overflow:hidden;
}
.defiler span { position:absolute; left:0; top:-40%; width:1px; height:40%; background:var(--lueur); animation:defiler 2.6s cubic-bezier(.6, 0, .3, 1) infinite }
@keyframes defiler { to { top:100% } }

/* 2. Le jeu du soir : le dieu à gauche, le texte à droite. */
.plan-droite { justify-items:end }
.plan-droite .accroche { font:400 clamp(19px, 1.6vw, 23px)/1.45 'Fraunces', serif; font-style:italic; margin:0 0 18px }
.plan .details { font:400 11px/1.6 var(--mono); letter-spacing:.08em; text-transform:uppercase; color:var(--brume); margin:0 0 24px }

/* 3. Les curseurs : le texte à gauche, le dieu à droite qui change sous vos yeux. */
.plan-gauche { justify-items:start }
.plan-gauche .plan-texte { max-width:400px }
.reglages { display:grid; gap:4px; margin:4px 0 18px }
.reglage { display:grid; grid-template-columns:1fr; padding:7px 10px 6px; margin:0 -10px; border-radius:3px; transition:background-color .3s }
.reglage:hover, .reglage:focus-within { background:var(--lueur-a) }
.reglage label { display:flex; justify-content:space-between; align-items:baseline; gap:12px; cursor:pointer }
.reglage label b { font:600 13px/1.3 var(--sans) }
.reglage label span { font:italic 400 15px/1.3 'Fraunces', serif; color:var(--brume) }
.reglage input { width:100%; margin:6px 0 2px; accent-color:var(--lueur); cursor:pointer }
.reglage small { display:flex; justify-content:space-between; font:400 10px/1.2 var(--sans); color:var(--brume) }
.plan-gauche .note { font:400 12.5px/1.6 var(--sans); color:var(--brume); margin:0 }
.plan-gauche .note button { display:inline; margin:0 0 0 4px; padding:0; background:none; border:0; color:var(--lueur); text-decoration:underline; text-underline-offset:.2em; cursor:pointer; font:inherit }

/* 4. Le pacte : gros plan sur le masque, trois phrases à côté. */
.plan-masque { min-height:130vh; min-height:130svh; align-items:center }
.pacte-lignes { list-style:none; margin:0; padding:0; display:grid; gap:clamp(28px, 6vh, 64px); max-width:min(31vw, 420px) }
.pacte-lignes li { font:300 clamp(26px, 2.7vw, 42px)/1.08 'Fraunces', serif; letter-spacing:-.02em; pointer-events:auto }
.pacte-lignes li:nth-child(2) { transition-delay:.15s }
.pacte-lignes li:nth-child(3) { transition-delay:.3s }
.pacte-lignes li span { display:block; margin-bottom:10px; font:500 10px/1 var(--mono); letter-spacing:.16em; text-transform:uppercase; color:var(--lueur) }

/* 5. Les traces : le dieu recule, petit, là-haut ; les mondes scellés en bas. */
.plan-traces { align-items:end; justify-items:center; text-align:center }
.plan-traces .plan-texte { max-width:760px; align-self:end }
.plan-traces h2 { font-size:clamp(28px, 3vw, 46px) }
.traces { display:flex; justify-content:center; flex-wrap:wrap; gap:14px; margin:8px 0 26px }
.trace {
  display:grid; justify-items:center; gap:4px; width:132px; padding:14px 10px 12px; text-decoration:none;
  border:1px solid var(--trait); border-radius:3px; background:var(--scene-voile); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); transition:border-color .3s, transform .3s;
}
.trace:hover { border-color:var(--lueur-b); transform:translateY(-3px) }
.trace-sceau { width:58px; height:58px; display:block }
.plan .trace .sceau { filter:none }
.trace-sceau svg { width:100%; height:100% }
.trace span { font:400 9.5px/1.4 var(--mono); letter-spacing:.12em; color:var(--brume) }
.trace b { font:400 18px/1.15 'Fraunces', serif }
.liens { display:flex; justify-content:center; flex-wrap:wrap; gap:8px 26px; margin:0; font:500 11px/1.4 var(--mono); letter-spacing:.08em; text-transform:uppercase }
.liens a { text-decoration:none; color:var(--os-2) }
.liens a:hover { color:var(--lueur) }


/* ---------- les pages intérieures : il pose à côté du titre, puis recule derrière la page pendant qu'on lit ---------- */

.interieur .tete-page {
  max-width:none; margin:0; min-height:88vh; min-height:88svh;
  padding:120px var(--marge) clamp(56px, 11vh, 120px);
  align-content:end; justify-items:start;
}
.interieur .tete-page > * { max-width:min(46vw, 40rem); pointer-events:auto }
.interieur .tete-page .chapeau { color:var(--os-2) }
.interieur .tete-page .voix { max-width:min(42vw, 30ch) }

/* La lecture : un voile monte du bas et le dieu reste derrière, en retrait. */
.interieur .lecture {
  position:relative; z-index:1; margin:0;
  padding:clamp(56px, 10vh, 110px) max(var(--marge), calc((100% - var(--large)) / 2)) clamp(90px, 16vh, 170px);
  background:linear-gradient(transparent, var(--scene-lecture) clamp(140px, 26vh, 280px));
}
.interieur .carte, .interieur .multiple, .interieur .idee, .interieur .panneau, .interieur .journal, .interieur .chiffres > div { background:var(--scene-panneau) }
.interieur .carte.a-venir { background:transparent }
.interieur .chiffres { background:var(--trait) }
.interieur .carte:hover { background:var(--encre-3) }
.page-scene .interieur + .pied { background:var(--scene-lecture) }

/* La fiche d'une veillée : le sceau devient son emblème, au-dessus du titre. */
.interieur .fiche-tete { grid-template-columns:none; gap:0 }
.interieur .fiche-tete .sceau-cadre { width:clamp(88px, 9vw, 120px); margin:0 0 14px }
.interieur .fiche-tete .sceau-cadre .sceau, .interieur .carte .sceau, .interieur .marge .sceau { filter:none }
.interieur .fiche-tete .titre-jeu { font-size:clamp(60px, 9vw, 128px) }

/* L'atelier : sa journée se lit sur le cadran, plus bas. */
.interieur .atelier-tete { grid-template-columns:none; gap:0 }
.interieur .journee .cadran { width:min(100%, 440px); margin:0 auto }

/* Les erreurs : le dieu au milieu, la phrase en dessous. */
.interieur .erreur-page { align-content:end; justify-items:center; text-align:center; padding-bottom:clamp(56px, 10vh, 110px) }
.interieur .erreur-page .plan-texte { max-width:34rem; align-self:end }
.interieur .erreur-page h1 { margin:12px 0 18px; font:300 clamp(48px, 7vw, 96px)/1 'Fraunces', serif; letter-spacing:-.03em }
.interieur .erreur-page .voix { margin:0 auto 28px }

/* ---------- en portrait : le dieu monte, le texte prend le bas de l'écran ---------- */

@media (max-width:760px) {
  .scene-dieu { --baie-x:50% }
  .scene-dieu::after { background:linear-gradient(to top, var(--scene-voile) 8%, transparent 52%) }
  .scene-dieu .dieu-son { right:12px; bottom:auto; top:max(12px, env(safe-area-inset-top)); }
  .page-scene .entete { padding-top:14px; padding-inline:20px }
  .page-scene .nav { gap:8px }
  .page-scene .nav a { font-size:12.5px; letter-spacing:0 }
  .plan { padding:96px 20px 44px; align-content:end }
  .plan-texte { align-self:end; max-width:none }
  .plan-ouverture { grid-template-columns:1fr; gap:22px }
  .plan-ouverture h1 { max-width:none; font-size:clamp(38px, 11vw, 54px) }
  .ouverture-appel { justify-items:start; text-align:left }
  .defiler { display:none }
  .plan-droite, .plan-gauche { justify-items:stretch }
  .plan-gauche .plan-texte { max-width:none }
  .plan-gauche h2 br { display:none }
  .plan-gauche { padding-top:46vh }
  .plan-masque { min-height:110svh; align-items:end }
  .pacte-lignes { max-width:none; gap:26px }
  .trace { width:calc(50% - 7px) }
  .interieur .tete-page { min-height:92svh; padding:96px 20px 44px }
  .interieur .tete-page > *, .interieur .tete-page .voix { max-width:none }
  .interieur .lecture { padding:48px 20px 90px }
  .interieur .erreur-page { padding-bottom:44px }
}

@media (prefers-reduced-motion:reduce) {
  .defiler span { animation:none; top:30% }
  .page-scene { transition:none }
}