/* ═══════════════════════════════════════════════════════════════════════════
   Chronarch — feuille de style
   Direction : scriptorium à la chandelle. Encre chaude et nuit profonde,
   texte de parchemin en Cormorant, dorure (#B8860B) posée avec parcimonie
   comme l'enluminure d'un manuscrit. Signature : la « colonne des chroniques »
   (timeline verticale dorée). Mobile-first ~390px.
   Polices auto-hébergées (aucun CDN applicatif).
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Fontes ──────────────────────────────────────────────────────────────── */
@font-face{font-family:"Cormorant";font-style:normal;font-weight:400;font-display:swap;
  src:url("/static/fonts/cormorant-latin-400-normal.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:"Cormorant";font-style:normal;font-weight:400;font-display:swap;
  src:url("/static/fonts/cormorant-latin-ext-400-normal.woff2") format("woff2");unicode-range:U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:"Cormorant";font-style:normal;font-weight:600;font-display:swap;
  src:url("/static/fonts/cormorant-latin-600-normal.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:"Cormorant";font-style:normal;font-weight:600;font-display:swap;
  src:url("/static/fonts/cormorant-latin-ext-600-normal.woff2") format("woff2");unicode-range:U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:"Inter";font-style:normal;font-weight:400;font-display:swap;
  src:url("/static/fonts/inter-latin-400-normal.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:"Inter";font-style:normal;font-weight:400;font-display:swap;
  src:url("/static/fonts/inter-latin-ext-400-normal.woff2") format("woff2");unicode-range:U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:"Inter";font-style:normal;font-weight:500;font-display:swap;
  src:url("/static/fonts/inter-latin-500-normal.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:"Inter";font-style:normal;font-weight:600;font-display:swap;
  src:url("/static/fonts/inter-latin-600-normal.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}

/* ── Jetons ──────────────────────────────────────────────────────────────── */
:root{
  --nuit:#0e0c08;          /* fond le plus profond, encre chaude */
  --nuit-2:#17130c;        /* panneaux */
  --nuit-3:#1f1a10;        /* surélévation */
  --parchemin:#ece1c9;     /* texte primaire, papier vieilli */
  --parchemin-doux:#a7997c;/* texte secondaire */
  --or:#b8860b;            /* dorure — accent (spec) */
  --or-clair:#d9ad3f;      /* dorure vive (survol / actif) */
  --or-voile:rgba(184,134,11,.16);
  --ligne:rgba(184,134,11,.22);
  --sang:#8a3324;          /* danger — oxblood */
  --sang-clair:#c05a44;
  --ok:#5f7d4f;
  --ombre:0 18px 48px rgba(0,0,0,.55);
  --r:14px;                /* rayon */
  --pas:clamp(16px,4vw,22px);
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--nuit);color:var(--parchemin);
  font-family:"Inter",system-ui,sans-serif;font-size:16px;line-height:1.55;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
  background-image:radial-gradient(1200px 600px at 50% -10%,rgba(184,134,11,.06),transparent 70%);
}
a{color:var(--or-clair);text-decoration:none}
a:hover{color:var(--parchemin)}
::selection{background:var(--or-voile);color:var(--parchemin)}

/* ── Enveloppe / nav ─────────────────────────────────────────────────────── */
.enveloppe{max-width:960px;margin:0 auto;padding:0 var(--pas)}
.barre{
  position:sticky;top:0;z-index:30;backdrop-filter:blur(8px);
  background:linear-gradient(180deg,rgba(14,12,8,.92),rgba(14,12,8,.72));
  border-bottom:1px solid var(--ligne);
}
.barre__int{display:flex;align-items:center;gap:14px;height:58px;max-width:960px;margin:0 auto;padding:0 var(--pas)}
.marque{font-family:"Cormorant",serif;font-weight:600;font-size:1.5rem;letter-spacing:.03em;color:var(--parchemin);display:flex;align-items:center;gap:.5ch}
.marque b{color:var(--or)}
.barre__esp{flex:1}
.jeton-credit{
  display:inline-flex;align-items:center;gap:6px;font-size:.82rem;color:var(--parchemin-doux);
  border:1px solid var(--ligne);border-radius:999px;padding:5px 11px;background:var(--nuit-2);white-space:nowrap;
}
.jeton-credit b{color:var(--or-clair)}
.jeton-credit--prem b{color:var(--or-clair)}
.lien-nav{color:var(--parchemin-doux);font-size:.9rem;padding:8px;min-height:40px;display:inline-flex;align-items:center}
.lien-nav:hover{color:var(--parchemin)}

/* ── Boutons ─────────────────────────────────────────────────────────────── */
.btn{
  font-family:"Inter",sans-serif;font-weight:500;font-size:.95rem;cursor:pointer;
  border:1px solid var(--ligne);background:var(--nuit-2);color:var(--parchemin);
  border-radius:var(--r);padding:12px 18px;min-height:44px;
  transition:transform .12s ease-out,background .2s ease-out,border-color .2s ease-out;
}
.btn:hover{border-color:var(--or);background:var(--nuit-3)}
.btn:active{transform:translateY(1px)}
.btn--or{background:linear-gradient(180deg,#caa02e,#a9780a);color:#20180a;border-color:#caa02e;font-weight:600}
.btn--or:hover{background:linear-gradient(180deg,#d9ad3f,#b8860b);color:#1a1206}
.btn--fant{background:transparent}
.btn--bloc{width:100%}
.btn--danger{border-color:rgba(138,51,36,.5);color:var(--sang-clair)}
.btn--danger:hover{background:rgba(138,51,36,.14);border-color:var(--sang)}
.btn:focus-visible,a:focus-visible,input:focus-visible,.noeud:focus-visible{outline:2px solid var(--or-clair);outline-offset:2px}

/* ── Titres / rythme ─────────────────────────────────────────────────────── */
.titre{font-family:"Cormorant",serif;font-weight:600;line-height:1.05;letter-spacing:.01em;color:var(--parchemin);margin:0}
.eyebrow{font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;color:var(--or);font-weight:600}
.sous{color:var(--parchemin-doux);font-size:.96rem}
.section{padding:34px 0}
.section + .section{border-top:1px solid var(--ligne)}

/* ── Accueil : héros ─────────────────────────────────────────────────────── */
.hero{padding:52px 0 26px;text-align:center}
.hero .titre{font-size:clamp(2.4rem,9vw,4rem)}
.hero .sous{max-width:34ch;margin:14px auto 0}

/* ── Signature : la colonne des chroniques (timeline verticale) ──────────── */
.chronique{position:relative;margin:8px 0;padding-left:44px}
.chronique::before{ /* le fil doré */
  content:"";position:absolute;left:19px;top:6px;bottom:6px;width:2px;
  background:linear-gradient(180deg,transparent,var(--or) 8%,var(--or) 92%,transparent);
  opacity:.7;
}
.noeud{
  position:relative;display:block;width:100%;text-align:left;cursor:pointer;
  background:var(--nuit-2);border:1px solid var(--ligne);border-radius:var(--r);
  padding:14px 16px;margin:0 0 14px;color:inherit;
  transition:transform .14s ease-out,border-color .2s ease-out,background .2s ease-out;
}
.noeud:hover{border-color:var(--or);background:var(--nuit-3);transform:translateX(3px)}
.noeud::before{ /* la perle d'enluminure sur le fil */
  content:"";position:absolute;left:-33px;top:20px;width:12px;height:12px;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,var(--or-clair),var(--or));
  box-shadow:0 0 0 4px var(--nuit),0 0 14px var(--or-voile);
}
.noeud__an{font-family:"Cormorant",serif;font-size:1.05rem;color:var(--or-clair);font-weight:600}
.noeud__titre{font-family:"Cormorant",serif;font-size:1.4rem;font-weight:600;margin:1px 0 3px;line-height:1.1}
.noeud__desc{color:var(--parchemin-doux);font-size:.9rem}
.noeud__role{margin-top:8px;font-size:.8rem;color:var(--or);letter-spacing:.04em}
.noeud__role::before{content:"▸ "}

/* ── Cartes (reprise / scénarios) ────────────────────────────────────────── */
.grille{display:grid;gap:14px}
@media(min-width:620px){.grille--3{grid-template-columns:repeat(3,1fr)}.grille--2{grid-template-columns:repeat(2,1fr)}}
.carte{background:var(--nuit-2);border:1px solid var(--ligne);border-radius:var(--r);padding:16px;display:flex;flex-direction:column;gap:8px}
.carte:hover{border-color:var(--or)}
.carte__titre{font-family:"Cormorant",serif;font-size:1.35rem;font-weight:600;line-height:1.1}
.carte__meta{font-size:.78rem;color:var(--or);letter-spacing:.05em;text-transform:uppercase}
.carte__txt{color:var(--parchemin-doux);font-size:.92rem;flex:1}

/* ── Écran de jeu ────────────────────────────────────────────────────────── */
.scene{
  position:relative;min-height:100vh;min-height:100dvh;
  display:flex;flex-direction:column;
}
.scene__fond{ /* fond qui se fond (ease-in-out 300ms) — Taste */
  position:fixed;inset:0;z-index:-1;transition:opacity 300ms ease-in-out,background 300ms ease-in-out;
  background:linear-gradient(180deg,var(--fond-haut,#2b2416),var(--fond-bas,#0f0d09));
}
.scene__fond::after{content:"";position:absolute;inset:0;background:radial-gradient(120% 80% at 50% 0%,transparent 40%,rgba(0,0,0,.55))}
.scene__barre{display:flex;align-items:center;gap:12px;padding:12px var(--pas);border-bottom:1px solid var(--ligne);background:linear-gradient(180deg,rgba(14,12,8,.8),transparent)}
.scene__lieu{font-family:"Cormorant",serif;font-size:1.15rem;color:var(--parchemin)}
.scene__lieu small{display:block;font-family:"Inter";font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--or)}

.parchpanel{flex:1;display:flex;flex-direction:column;justify-content:flex-end;max-width:720px;width:100%;margin:0 auto;padding:24px var(--pas) 12px}
.narration{
  font-family:"Cormorant",serif;font-weight:400;
  font-size:clamp(1.35rem,4.4vw,1.7rem);line-height:1.5;color:var(--parchemin);
  text-shadow:0 1px 0 rgba(0,0,0,.4);white-space:pre-wrap;
  min-height:3em;
}
.curseur{display:inline-block;width:.5ch;margin-left:1px;color:var(--or-clair);animation:clign 1s steps(1) infinite}
@keyframes clign{50%{opacity:0}}

/* Indice historique pendant le loading (jamais un spinner nu — état `loading`) */
.indice{display:flex;align-items:flex-start;gap:10px;color:var(--parchemin-doux);font-family:"Inter";font-size:.9rem;font-style:normal}
.indice__pt{width:8px;height:8px;border-radius:50%;background:var(--or);margin-top:6px;animation:pulse 1.2s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:.35;transform:scale(.8)}50%{opacity:1;transform:scale(1.1)}}
.indice em{color:var(--or-clair);font-style:italic}

/* Choix */
.choix{display:flex;flex-direction:column;gap:10px;max-width:720px;width:100%;margin:0 auto;padding:8px var(--pas) 20px}
.choix__b{
  text-align:left;font-family:"Inter";font-weight:500;font-size:1rem;color:var(--parchemin);
  background:rgba(23,19,12,.82);border:1px solid var(--ligne);border-radius:var(--r);
  padding:14px 16px;min-height:48px;cursor:pointer;backdrop-filter:blur(2px);
  transition:transform .12s ease-out,border-color .2s ease-out,background .2s ease-out;
}
.choix__b:hover{border-color:var(--or);background:rgba(31,26,16,.92)}
.choix__b:active{transform:translateY(1px)}
.choix__b .n{color:var(--or);margin-right:10px;font-family:"Cormorant";font-weight:600}
.libre{display:flex;gap:8px;margin-top:4px}
.libre input{flex:1;min-height:48px;background:rgba(23,19,12,.82);border:1px solid var(--ligne);border-radius:var(--r);color:var(--parchemin);padding:0 14px;font-family:"Inter";font-size:.95rem}
.libre input::placeholder{color:var(--parchemin-doux)}

/* Bandeau d'erreur (état `erreur` — jamais silencieux, P-II) */
.alerte-scene{max-width:720px;margin:0 auto;padding:0 var(--pas)}
.alerte{border:1px solid rgba(138,51,36,.5);background:rgba(138,51,36,.14);color:var(--sang-clair);border-radius:var(--r);padding:12px 14px;font-size:.92rem;display:flex;gap:12px;align-items:center;justify-content:space-between}

/* ── Paywall slide-up off-canvas (crédits épuisés) ───────────────────────── */
.voile{position:fixed;inset:0;background:rgba(6,5,3,.66);z-index:60;opacity:0;pointer-events:none;transition:opacity .28s ease-out}
.voile.on{opacity:1;pointer-events:auto}
.paywall{
  position:fixed;left:0;right:0;bottom:0;z-index:61;
  background:linear-gradient(180deg,var(--nuit-3),var(--nuit-2));
  border-top:1px solid var(--or);border-radius:22px 22px 0 0;box-shadow:var(--ombre);
  padding:22px var(--pas) calc(22px + env(safe-area-inset-bottom));
  transform:translateY(102%);transition:transform .32s cubic-bezier(.22,1,.36,1);
  max-width:560px;margin:0 auto;
}
.paywall.on{transform:translateY(0)}
.paywall__poignee{width:38px;height:4px;border-radius:2px;background:var(--ligne);margin:0 auto 14px}
.paywall__t{font-family:"Cormorant",serif;font-size:1.7rem;font-weight:600;text-align:center;margin:0 0 4px}
.paywall__s{color:var(--parchemin-doux);text-align:center;font-size:.94rem;margin:0 auto 16px;max-width:36ch}
.paywall__liste{list-style:none;margin:0 0 18px;padding:0;display:flex;flex-direction:column;gap:9px}
.paywall__liste li{display:flex;gap:10px;align-items:center;font-size:.94rem}
.paywall__liste li::before{content:"❖";color:var(--or)}
.paywall__note{text-align:center;font-size:.78rem;color:var(--parchemin-doux);margin-top:12px}

/* ── Formulaires (auth) ──────────────────────────────────────────────────── */
.form-carte{max-width:400px;margin:36px auto;background:var(--nuit-2);border:1px solid var(--ligne);border-radius:var(--r);padding:26px}
.form-carte .titre{font-size:1.9rem;margin-bottom:4px}
.champ,input[type=text],input[type=password],input[type=email]{
  width:100%;min-height:46px;background:var(--nuit);border:1px solid var(--ligne);border-radius:10px;
  color:var(--parchemin);padding:0 13px;font-family:"Inter";font-size:.96rem;margin-top:4px;
}
.form-ligne{margin-bottom:14px}
.form-ligne label{font-size:.85rem;color:var(--parchemin-doux)}
.form-ligne .helptext,.form-ligne ul{font-size:.76rem;color:var(--parchemin-doux);margin:6px 0 0;padding-left:1.1em}
.case{display:flex;gap:10px;align-items:flex-start;font-size:.85rem;color:var(--parchemin-doux);margin:6px 0 16px}
.case input{margin-top:3px;accent-color:var(--or)}
.errorlist{list-style:none;padding:0;margin:6px 0 0;color:var(--sang-clair);font-size:.82rem}

/* ── Messages flash ──────────────────────────────────────────────────────── */
.flashs{max-width:960px;margin:12px auto 0;padding:0 var(--pas);display:flex;flex-direction:column;gap:8px}
.flash{border-radius:10px;padding:11px 14px;font-size:.9rem;border:1px solid var(--ligne);background:var(--nuit-2)}
.flash--success{border-color:rgba(95,125,79,.5);background:rgba(95,125,79,.12)}
.flash--error{border-color:rgba(138,51,36,.5);background:rgba(138,51,36,.14);color:var(--sang-clair)}

/* ── Cockpit founder ─────────────────────────────────────────────────────── */
.kpis{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
@media(min-width:620px){.kpis{grid-template-columns:repeat(4,1fr)}}
.kpi{background:var(--nuit-2);border:1px solid var(--ligne);border-radius:var(--r);padding:16px}
.kpi__v{font-family:"Cormorant",serif;font-size:2.1rem;font-weight:600;color:var(--or-clair);line-height:1}
.kpi__l{font-size:.78rem;color:var(--parchemin-doux);letter-spacing:.04em;margin-top:6px}
.panneau-graphe{background:var(--nuit-2);border:1px solid var(--ligne);border-radius:var(--r);padding:18px;margin-top:16px}

/* ── État vide ───────────────────────────────────────────────────────────── */
.vide{text-align:center;color:var(--parchemin-doux);padding:26px;border:1px dashed var(--ligne);border-radius:var(--r);background:var(--nuit-2)}

/* ── Divers ──────────────────────────────────────────────────────────────── */
.pied{color:var(--parchemin-doux);font-size:.8rem;text-align:center;padding:30px var(--pas) 46px;border-top:1px solid var(--ligne);margin-top:20px}
.masque{display:none!important}
[x-cloak]{display:none!important}

@media (prefers-reduced-motion: reduce){
  *{animation-duration:.001ms!important;transition-duration:.001ms!important}
}