/* ═══════════════════════════════════════════════════════════════
   HISTORIA FRANCE — L'Atlas de guerre (accueil + manuel)
   Typographie gravée (Cinzel) sur velours d'état-major, or ancien.
   ═══════════════════════════════════════════════════════════════ */
:root {
  --nuit: #0a0e13;
  --velours: #10151c;
  --velours-2: #161d26;
  --velours-3: #1e2733;
  --bordure: #2c3947;
  --encre: #e8e4d8;
  --encre-2: #9aa7b4;
  --or: #d4a94e;
  --or-clair: #eccf8e;
  --or-sombre: #8a6d2f;
  --sang: #c0504d;
}

/* ---------- MODE CLAIR : parchemin d'atlas (bouton ☀/☾ dans la navigation) ---------- */
body.clair {
  --nuit: #efe7d3;
  --velours: #f8f2e3;
  --velours-2: #f1e9d5;
  --velours-3: #e3d8bd;
  --bordure: #c2b28a;
  --encre: #2b2416;
  --encre-2: #6d5f42;
  --or: #8a6a1c;
  --or-clair: #6d5312;
  --or-sombre: #a8894a;
  --sang: #a83a32;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

/* Bouton de bascule clair/sombre (navigation) */
.btn-theme {
  background: none; border: 1px solid var(--bordure); border-radius: 4px;
  color: var(--or); font-size: 0.9rem; line-height: 1;
  padding: 5px 9px; cursor: pointer;
}
.btn-theme:hover { border-color: var(--or); }

/* Barres de défilement à l'image du site */
* { scrollbar-width: thin; scrollbar-color: var(--bordure) var(--nuit); }
*::-webkit-scrollbar { width: 9px; height: 9px; }
*::-webkit-scrollbar-track { background: var(--nuit); }
*::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #3a4a5c, var(--bordure));
  border-radius: 5px; border: 2px solid var(--nuit);
}
*::-webkit-scrollbar-thumb:hover { background: var(--or); }
body.atlas {
  background: var(--nuit);
  color: var(--encre);
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 19px;
  line-height: 1.65;
  overflow-x: hidden;
}
h1, h2, h3, .marque, .numero, .annee, .bouton, .cta-nav { font-family: 'Cinzel', Georgia, serif; }
a { color: var(--or); }

/* ───────────── Navigation ───────────── */
#nav-atlas {
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 34px;
  background: linear-gradient(180deg, rgba(10,14,19,0.92), rgba(10,14,19,0.55) 70%, transparent);
  backdrop-filter: blur(6px);
}
.marque {
  font-size: 1.05rem; font-weight: 800; letter-spacing: 4px;
  color: var(--encre); text-decoration: none;
}
.marque em { font-style: normal; color: var(--or); }
.marque .lys { color: var(--or); margin-right: 4px; }
#nav-atlas .liens { display: flex; gap: 28px; }
#nav-atlas .liens a {
  color: var(--encre-2); text-decoration: none; font-size: 0.98rem;
  letter-spacing: 1px; transition: color 0.25s;
}
#nav-atlas .liens a:hover { color: var(--or-clair); }
.cta-nav {
  padding: 8px 22px; border: 1px solid var(--or); border-radius: 3px;
  color: var(--or); text-decoration: none; font-size: 0.85rem;
  letter-spacing: 3px; text-transform: uppercase; transition: all 0.25s;
}
.cta-nav:hover { background: var(--or); color: var(--nuit); }

/* ───────────── Héros ───────────── */
#heros {
  position: relative; min-height: 100vh;
  display: flex; align-items: center; justify-content: center;
  text-align: center; overflow: hidden;
}
#carte-heros { position: absolute; inset: -8%; z-index: 0; background: var(--nuit); filter: saturate(0.85); }
#carte-heros .leaflet-container, #carte-heros.leaflet-container { background: var(--nuit); }
.voile-heros {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    /* Halo d'or derrière le titre : la carte reste lisible sur les bords, et le
       centre gagne la chaleur d'une lampe posée sur une table de cartes. */
    radial-gradient(ellipse 46% 38% at 50% 42%, rgba(212,169,78,0.16) 0%, transparent 70%),
    radial-gradient(ellipse 62% 55% at 50% 46%, rgba(10,14,19,0.28) 0%, rgba(10,14,19,0.82) 68%, var(--nuit) 100%),
    linear-gradient(180deg, rgba(10,14,19,0.75), transparent 28%, transparent 66%, var(--nuit) 100%);
}
/* Filets d'or en haut et en bas du héros : la page se referme comme une carte
   ancienne dans son cartouche. */
.voile-heros::after {
  content: ''; position: absolute; inset: auto 0 0 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--or-sombre) 30%, var(--or) 50%, var(--or-sombre) 70%, transparent);
  opacity: 0.75;
}
.contenu-heros { position: relative; z-index: 2; padding: 110px 20px 60px; max-width: 900px; }
.surtitre {
  font-size: 0.82rem; letter-spacing: 5px; text-transform: uppercase;
  color: var(--or); margin-bottom: 26px;
}
#heros h1 { line-height: 0.95; margin-bottom: 30px; }
.mot-historia {
  display: block; font-size: clamp(3.2rem, 10vw, 7.2rem); font-weight: 800;
  letter-spacing: 0.08em; color: var(--encre);
  text-shadow: 0 0 60px rgba(212,169,78,0.25), 0 4px 30px rgba(0,0,0,0.8);
}
.mot-france {
  display: block; font-size: clamp(1.6rem, 5vw, 3.4rem); font-weight: 400;
  letter-spacing: 0.65em; margin-left: 0.65em; color: var(--or);
  text-shadow: 0 2px 20px rgba(0,0,0,0.8);
}
.devise {
  font-size: clamp(1.05rem, 2.2vw, 1.35rem); font-style: italic;
  color: var(--encre-2); margin-bottom: 40px;
  white-space: pre-line; /* les traductions utilisent \n pour les retours à la ligne */
}
#appel p { white-space: pre-line; }
#avis-traduction {
  margin: 0 0 34px; padding: 14px 18px; display: none;
  background: var(--velours-2); border-left: 3px solid var(--or);
  color: var(--encre-2); font-style: italic;
}
.ctas { display: flex; gap: 18px; justify-content: center; flex-wrap: wrap; }
.bouton {
  display: inline-block; padding: 15px 36px; border-radius: 3px;
  font-size: 0.9rem; letter-spacing: 3px; text-transform: uppercase;
  text-decoration: none; transition: all 0.3s;
}
.bouton.or {
  background: linear-gradient(160deg, var(--or-clair), var(--or) 45%, var(--or-sombre));
  color: #16120a; font-weight: 600;
  box-shadow: 0 6px 30px rgba(212,169,78,0.35);
}
.bouton.or:hover { transform: translateY(-2px); box-shadow: 0 10px 40px rgba(212,169,78,0.5); }
.bouton.ombre { border: 1px solid var(--bordure); color: var(--encre-2); background: rgba(10,14,19,0.5); }
.bouton.ombre:hover { border-color: var(--or); color: var(--or-clair); }
.note-heros { margin-top: 22px; font-size: 0.95rem; color: var(--encre-2); font-style: italic; }

.indice-defilement {
  position: absolute; bottom: 26px; left: 50%; transform: translateX(-50%);
  width: 24px; height: 40px; border: 1px solid var(--or-sombre); border-radius: 12px; z-index: 2;
}
.indice-defilement span {
  position: absolute; top: 7px; left: 50%; width: 3px; height: 8px;
  margin-left: -1.5px; background: var(--or); border-radius: 2px;
  animation: descente 1.8s ease-in-out infinite;
}
@keyframes descente { 0%,100% { transform: translateY(0); opacity: 1; } 70% { transform: translateY(14px); opacity: 0; } }

/* ───────────── Le jeu en chiffres ─────────────
   Bande posée juste sous le héros : ce que la page promettait en prose, elle
   l'établit ici en quatre nombres. C'est aussi le premier palier de lecture
   après la carte animée — l'œil s'y arrête avant d'entrer dans les chapitres. */
#chiffres {
  display: grid; grid-template-columns: repeat(4, 1fr);
  max-width: 1180px; margin: 0 auto; padding: 52px 30px;
}
.chiffre { text-align: center; padding: 6px 12px; position: relative; }
.chiffre + .chiffre::before {
  content: ''; position: absolute; left: 0; top: 12%; bottom: 12%;
  width: 1px; background: linear-gradient(180deg, transparent, var(--bordure) 30%, var(--bordure) 70%, transparent);
}
.chiffre b {
  display: block; font-family: 'Cinzel', serif;
  font-size: clamp(2.1rem, 4.6vw, 3.4rem); font-weight: 800; line-height: 1;
  color: var(--or); letter-spacing: 2px;
  text-shadow: 0 0 34px rgba(212,169,78,0.28);
}
.chiffre span {
  display: block; margin-top: 10px; font-size: 0.9rem;
  color: var(--encre-2); letter-spacing: 0.4px;
}

/* ───────────── Chapitres ───────────── */
.chapitre { padding: 110px 30px; max-width: 1180px; margin: 0 auto; }
.chapitre.sombre {
  max-width: none;
  background: linear-gradient(180deg, var(--nuit), var(--velours) 18%, var(--velours) 82%, var(--nuit));
}
.chapitre.sombre > * { max-width: 1180px; margin-left: auto; margin-right: auto; }
.entete-chapitre { text-align: center; margin-bottom: 64px; }
.numero {
  display: inline-block; font-size: 0.78rem; letter-spacing: 6px; text-transform: uppercase;
  color: var(--or); padding-bottom: 10px; margin-bottom: 16px; position: relative;
}
.numero::after {
  content: ''; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%);
  width: 46px; height: 1px; background: var(--or-sombre);
}
.entete-chapitre h2 { font-size: clamp(1.8rem, 4.5vw, 2.9rem); font-weight: 600; letter-spacing: 2px; }
.sous-titre { margin-top: 12px; font-style: italic; color: var(--encre-2); font-size: 1.15rem; }

/* Triptyque (chapitre I) */
.triptyque { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 26px; }
.volet {
  padding: 38px 30px; background: var(--velours-2);
  border: 1px solid var(--bordure); border-top: 2px solid var(--or-sombre);
  transition: transform 0.35s, border-color 0.35s;
}
.volet:hover { transform: translateY(-6px); border-top-color: var(--or); }
.enluminure { font-size: 1.7rem; color: var(--or); margin-bottom: 18px; }
.volet h3 { font-size: 1.25rem; letter-spacing: 1px; margin-bottom: 14px; font-weight: 600; }
.volet p { color: var(--encre-2); font-size: 1.05rem; }

/* Frise des époques + mondes */
.frise { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 26px; }
.ere {
  position: relative; padding: 40px 32px 34px;
  background: linear-gradient(170deg, var(--velours-3), var(--velours-2) 60%);
  border: 1px solid var(--bordure); overflow: hidden;
  transition: transform 0.35s, box-shadow 0.35s;
}
.ere:hover {
  transform: translateY(-6px);
  box-shadow: 0 18px 50px rgba(0,0,0,0.5), 0 0 0 1px var(--or-sombre);
}
.ere::before {
  content: ''; position: absolute; inset: 0 0 auto 0; height: 2px;
  background: linear-gradient(90deg, transparent, var(--or), transparent);
}
.annee {
  display: block; font-size: 2.6rem; font-weight: 800; color: var(--or);
  letter-spacing: 4px; margin-bottom: 8px;
  text-shadow: 0 0 30px rgba(212,169,78,0.3);
}
.ere h3 { font-size: 1.2rem; font-weight: 600; letter-spacing: 1px; margin-bottom: 14px; }
.ere p { color: var(--encre-2); font-size: 1.02rem; margin-bottom: 16px; }
.unites {
  display: block; font-size: 0.85rem; font-style: italic; color: var(--or-sombre);
  border-top: 1px solid var(--bordure); padding-top: 12px;
}

/* Mondes */
.etat {
  display: inline-block; font-size: 0.72rem; letter-spacing: 3px; text-transform: uppercase;
  padding: 4px 14px; border-radius: 2px; margin-bottom: 16px;
}
.monde.disponible .etat { background: var(--or); color: var(--nuit); font-weight: 600; }
.monde.bientot .etat { border: 1px solid var(--bordure); color: var(--encre-2); }
.monde.bientot { opacity: 0.75; }
.monde.bientot:hover { opacity: 1; }
.monde h3 { font-size: 1.7rem; }

/* Grille des mécaniques */
.grille-arts { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1px; background: var(--bordure); border: 1px solid var(--bordure); }
.art {
  background: var(--velours); padding: 30px 26px;
  color: var(--encre-2); font-size: 1rem; transition: background 0.3s;
}
/* Le liseré d'or se déploie depuis la gauche au survol : les huit tuiles
   deviennent une grille vivante au lieu d'un tableau inerte. */
.art { position: relative; }
.art::before {
  content: ''; position: absolute; inset: 0 auto 0 0; width: 2px;
  background: linear-gradient(180deg, transparent, var(--or), transparent);
  transform: scaleY(0); transition: transform 0.35s;
}
.art:hover { background: var(--velours-2); }
.art:hover::before { transform: scaleY(1); }
.art b {
  display: block; font-family: 'Cinzel', serif; font-size: 1rem; font-weight: 600;
  letter-spacing: 1px; color: var(--encre); margin-bottom: 10px;
}
.art:hover b { color: var(--or-clair); }

/* Appel final */
#appel { text-align: center; padding: 130px 24px 120px; position: relative; }
#appel::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse 50% 60% at 50% 55%, rgba(212,169,78,0.08), transparent 70%);
}
.lys.grand { font-size: 3rem; color: var(--or); display: block; margin-bottom: 18px; }
#appel h2 { font-size: clamp(1.9rem, 5vw, 3rem); letter-spacing: 2px; margin-bottom: 18px; }
#appel p { color: var(--encre-2); font-style: italic; font-size: 1.15rem; margin-bottom: 38px; }
.grand-bouton { font-size: 1.05rem; padding: 18px 52px; }

#pied {
  display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px;
  padding: 26px 34px; border-top: 1px solid var(--bordure);
  color: var(--encre-2); font-size: 0.95rem;
}
#pied a { margin-left: 22px; color: var(--encre-2); text-decoration: none; }
#pied a:hover { color: var(--or); }

/* Révélations */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity 0.9s ease, transform 0.9s ease; }
.reveal.visible { opacity: 1; transform: none; }
.reveal.r1 { transition-delay: 0.15s; }
.reveal.r2 { transition-delay: 0.3s; }
.reveal.r3 { transition-delay: 0.45s; }
.reveal.r4 { transition-delay: 0.6s; }

/* ───────────── MANUEL (wiki.html) ───────────── */
#manuel {
  display: grid; grid-template-columns: 250px 1fr; gap: 54px;
  max-width: 1180px; margin: 0 auto; padding: 130px 30px 90px;
}
#sommaire { position: sticky; top: 90px; align-self: start; }
#sommaire h2 { font-size: 0.8rem; letter-spacing: 4px; text-transform: uppercase; color: var(--or); margin-bottom: 18px; }
#sommaire a {
  display: block; padding: 7px 0 7px 14px; color: var(--encre-2); text-decoration: none;
  font-size: 0.98rem; border-left: 2px solid var(--bordure); transition: all 0.2s;
}
#sommaire a:hover { color: var(--or-clair); border-left-color: var(--or); }
.section-manuel { margin-bottom: 70px; scroll-margin-top: 100px; }
.section-manuel h2 {
  font-size: 1.6rem; font-weight: 600; letter-spacing: 1px; margin-bottom: 6px;
  color: var(--encre);
}
.section-manuel h2 .num { color: var(--or); margin-right: 12px; }
.filet { width: 70px; height: 2px; background: linear-gradient(90deg, var(--or), transparent); margin: 14px 0 22px; }
.section-manuel p { margin-bottom: 14px; color: var(--encre-2); font-size: 1.08rem; }
.section-manuel b { color: var(--encre); }
.section-manuel ul { margin: 0 0 14px 22px; color: var(--encre-2); }
.section-manuel li { margin-bottom: 8px; }
.exemple {
  padding: 16px 20px; margin: 18px 0;
  background: var(--velours-2); border-left: 3px solid var(--or);
  font-style: italic; color: var(--encre); font-size: 1.05rem;
}
.exemple::before { content: '❝ '; color: var(--or); }

/* ───────────── RELEVÉ DU PORTE-MONNAIE ─────────────
   Chaque mouvement de crédit avec sa raison : le joueur doit pouvoir vérifier
   lui-même ce qui lui a été prélevé, et constater ce qui ne l'a pas été. */
.releve-periode { display: inline-flex; border: 1px solid var(--bordure); }
.releve-periode button { background: transparent; color: var(--encre-2); border: 0; cursor: pointer;
                         padding: 4px 11px; font-size: 0.76rem; font-family: inherit; }
.releve-periode button + button { border-left: 1px solid var(--bordure); }
.releve-periode button.actif { background: var(--velours-3); color: var(--or); }
.releve-btn { background: var(--nuit); color: var(--encre); border: 1px solid var(--bordure);
              padding: 4px 12px; font-size: 0.76rem; cursor: pointer; font-family: inherit; }
.releve-btn:hover { border-color: var(--or); color: var(--or); }
.releve-ligne { display: flex; align-items: baseline; gap: 10px; padding: 7px 0;
                border-bottom: 1px solid var(--bordure); font-size: 0.86rem; }
.releve-ligne .quand { color: var(--encre-2); opacity: 0.75; font-size: 0.76rem;
                       white-space: nowrap; min-width: 92px; }
.releve-ligne .quoi { flex: 1; color: var(--encre); }
.releve-ligne .quoi small { display: block; color: var(--encre-2); opacity: 0.75; font-size: 0.74rem; }
.releve-ligne .montant { font-family: 'Cinzel', serif; white-space: nowrap; }
.releve-ligne.credit .montant { color: #8fce8f; }
.releve-ligne.debit  .montant { color: var(--or); }
.releve-ligne.offert .montant { color: var(--encre-2); opacity: 0.8; font-size: 0.8rem; }
.releve-resume-lignes { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 6px; }
.releve-resume-lignes span { font-size: 0.82rem; }

/* ───────────── TABLEAU DE BORD (jouer.html) ───────────── */
.cachee { display: none !important; }
.muted { color: var(--encre-2); }
.erreur { color: var(--sang); font-size: 0.95rem; min-height: 1.2em; margin: 6px 0; }
#badge-user { color: var(--or); font-family: 'Cinzel', serif; letter-spacing: 2px; font-size: 0.9rem; }

/* La barre de navigation fait une soixantaine de pixels : 130 px de marge haute
   laissaient un vide de la hauteur d'un titre avant « État-major ». */
#tableau {
  max-width: 1240px; margin: 0 auto; min-height: calc(100vh - 140px);
  padding: 88px 30px 70px;
}
.parchemin {
  background: linear-gradient(170deg, var(--velours-3), var(--velours-2) 55%);
  border: 1px solid var(--bordure); border-top: 2px solid var(--or-sombre);
  padding: 42px 44px; box-shadow: 0 20px 60px rgba(0,0,0,0.45);
  animation: apparition 0.5s ease;
}
.parchemin.etroit { max-width: 540px; margin: 0 auto; }
@keyframes apparition { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
.titre-parchemin {
  font-family: 'Cinzel', serif; font-size: 1.7rem; font-weight: 600;
  letter-spacing: 1px; margin: 8px 0 20px;
}
.parchemin p { color: var(--encre-2); margin-bottom: 14px; }

/* Formulaires */
#tableau label { display: block; font-size: 0.95rem; color: var(--encre-2); margin-bottom: 16px; letter-spacing: 0.5px; }
#tableau input, #tableau select {
  width: 100%; margin-top: 6px; padding: 12px 14px;
  background: var(--nuit); color: var(--encre);
  border: 1px solid var(--bordure); border-radius: 3px;
  font-family: 'Cormorant Garamond', Georgia, serif; font-size: 1.05rem;
  transition: border-color 0.25s;
}
#tableau input:focus, #tableau select:focus { outline: none; border-color: var(--or); }
.encart { font-style: italic; font-size: 0.98rem; padding: 0 2px 4px; }

/* Boutons (classes générées par accueil.js) */
#tableau .btn {
  display: block; width: 100%; padding: 13px; margin-top: 12px;
  border: none; border-radius: 3px; cursor: pointer;
  font-family: 'Cinzel', serif; font-size: 0.85rem;
  letter-spacing: 2.5px; text-transform: uppercase; transition: all 0.3s;
}
#tableau .btn.principal {
  background: linear-gradient(160deg, var(--or-clair), var(--or) 45%, var(--or-sombre));
  color: #16120a; font-weight: 600; box-shadow: 0 5px 22px rgba(212,169,78,0.28);
}
#tableau .btn.principal:hover { transform: translateY(-2px); box-shadow: 0 9px 32px rgba(212,169,78,0.45); }
#tableau .btn.secondaire {
  background: transparent; color: var(--encre-2); border: 1px solid var(--bordure);
}
#tableau .btn.secondaire:hover { border-color: var(--or); color: var(--or-clair); }
#tableau .btn:disabled { opacity: 0.5; cursor: wait; transform: none; }

/* Sélecteur de langue */
#sel-langue {
  background: var(--nuit); color: var(--encre-2);
  border: 1px solid var(--bordure); border-radius: 3px;
  padding: 5px 8px; font-family: 'Cinzel', serif; font-size: 0.78rem; cursor: pointer;
}
#sel-langue:hover { border-color: var(--or); color: var(--or-clair); }

/* Création visuelle : cartes de scénarios et de camps */
.sous-titre-creation {
  font-family: 'Cinzel', serif; font-size: 1rem; font-weight: 600;
  letter-spacing: 2px; color: var(--or); margin: 30px 0 14px;
}
.grille-choix { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; }
.grille-choix.camps { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
.carte-choix {
  text-align: left; cursor: pointer; padding: 18px;
  background: linear-gradient(170deg, var(--velours-3), var(--velours-2) 60%);
  border: 1px solid var(--bordure); border-radius: 6px;
  color: var(--encre); font-family: 'Cormorant Garamond', serif;
  transition: transform 0.25s, border-color 0.25s, box-shadow 0.25s;
  position: relative;
}
.carte-choix:hover { transform: translateY(-4px); border-color: var(--or-sombre); }
.carte-choix.choisie {
  border-color: var(--or); box-shadow: 0 0 0 1px var(--or), 0 10px 34px rgba(212,169,78,0.18);
}
.carte-choix.choisie::after {
  content: '✓'; position: absolute; top: 8px; right: 12px;
  color: var(--or); font-size: 1rem; font-weight: bold;
}
.carte-choix b { display: block; font-family: 'Cinzel', serif; font-size: 1rem; letter-spacing: 1px; margin: 4px 0 8px; }
.annee-choix { font-family: 'Cinzel', serif; font-size: 1.5rem; font-weight: 800; color: var(--or); letter-spacing: 3px; }
.carte-choix .drapeau { font-size: 2rem; display: block; margin-bottom: 4px; }
.grille-choix.pays { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
.carte-choix.pays { text-align: center; }
.sous-choix { display: block; color: var(--encre-2); font-size: 0.9rem; font-style: italic; }
.note-agent { color: var(--or); font-size: 0.78rem; margin-top: 4px; cursor: help; }
.pastilles-choix { display: block; margin-bottom: 6px; }
.pastille { display: inline-block; width: 11px; height: 11px; border-radius: 2px; margin-right: 5px; vertical-align: baseline; }
.pastille.grande { width: 18px; height: 18px; border-radius: 4px; margin-bottom: 8px; }

.segmente { display: flex; gap: 1px; background: var(--bordure); border: 1px solid var(--bordure); border-radius: 5px; overflow: hidden; max-width: 480px; }
.segmente button {
  flex: 1; padding: 11px; cursor: pointer; border: none;
  background: var(--velours); color: var(--encre-2);
  font-family: 'Cinzel', serif; font-size: 0.8rem; letter-spacing: 1.5px;
}
.segmente button.choisi { background: var(--or); color: var(--nuit); font-weight: 600; }
.segmente button:hover:not(.choisi) { background: var(--velours-3); color: var(--or-clair); }

/* ───────────── Création de partie : plan en deux colonnes ─────────────
   Les huit sections se suivaient sur toute la largeur, chacune sous la
   précédente : trois écrans de défilement pour une décision qui tient en
   trois choix. Elles occupent maintenant une grille — le théâtre et l'époque
   côte à côte, les camps en dessous — et tout ce qui ne dépend d'aucun choix
   (nom, cerveau, attitude, lancement) part dans un rail qui reste à l'écran.
   Les grilles longues défilent chez elles au lieu d'allonger la page.        */
.plan-creation {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 322px;
  gap: 30px;
  align-items: start;
}
/* Les étapes s'empilent dans UN bloc plutôt que d'occuper chacune une rangée de
   la grille : une étape masquée ne laisse alors aucun vide derrière elle. */
.colonne-creation { display: flex; flex-direction: column; gap: 26px; min-width: 0; }

/* ── Repli des deux premières étapes ──
   Le théâtre et l'époque sont des décisions à prendre UNE fois ; les garder
   ouverts pendant qu'on choisit son camp ne fait que repousser ce dernier en
   bas de page. Dès que l'époque est retenue, les deux volets cèdent la place à
   une simple barre rappelant ce qui a été choisi — et le choix du camp, la
   seule décision qui reste, occupe alors toute la largeur et toute la hauteur. */
/* L'étape 3 n'existe pas tant que les deux premières ne sont pas tranchées :
   une grille vide portant « Choisissez votre camp » n'apprend rien et vole de
   la hauteur aux choix en cours. Le panneau n'a donc que deux visages — on
   choisit son théâtre et son époque, ou on choisit son camp. */
.plan-creation:not(.replie) #etape-camp { display: none; }

.resume-etapes { display: none; }
.plan-creation.replie .duo-creation { display: none; }
.plan-creation.replie .resume-etapes {
  display: flex; align-items: center; flex-wrap: wrap; gap: 10px;
  padding: 12px 16px; border: 1px solid var(--bordure); border-radius: 6px;
  background: var(--velours-2); border-left: 3px solid var(--or);
}
.resume-etapes b { font-family: 'Cinzel', serif; font-size: 0.95rem; letter-spacing: 1px; color: var(--encre); }
.resume-etapes .separateur { color: var(--encre-2); }
.resume-etapes .jalon { margin-right: 0; }
.lien-modifier {
  margin-left: auto; padding: 6px 14px; cursor: pointer;
  background: transparent; color: var(--encre-2);
  border: 1px solid var(--bordure); border-radius: 3px;
  font-family: 'Cinzel', serif; font-size: 0.72rem; letter-spacing: 1.4px;
  text-transform: uppercase; transition: border-color 0.25s, color 0.25s;
}
.lien-modifier:hover { border-color: var(--or); color: var(--or-clair); }
/* Replié, la grille des camps récupère la hauteur libérée. */
.plan-creation.replie .grille-choix.defilante.haute { max-height: 58vh; }
/* La barre fixe du haut recouvrirait le titre de l'étape amenée à l'écran. */
#etape-camp { scroll-margin-top: 96px; }

/* Théâtre et époque : deux volets jumeaux, le premier alimente le second. */
.duo-creation { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; align-items: start; }
.etape { min-width: 0; }
.etape .sous-titre-creation { margin-top: 0; }
/* Les intitulés traduits sont des phrases entières : dans une demi-colonne il
   faut les resserrer pour qu'ils tiennent sur une ligne. */
.duo-creation .sous-titre-creation { font-size: 0.9rem; letter-spacing: 1.3px; }

/* Jalon numéroté : rend l'ordre des choix lisible d'un coup d'œil. */
.jalon {
  display: inline-grid; place-items: center; width: 22px; height: 22px;
  margin-right: 10px; border-radius: 50%; font-style: normal;
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0;
  color: var(--nuit); background: var(--or); vertical-align: 2px;
}
.sous-titre-creation.compact { margin: 22px 0 10px; font-size: 0.88rem; letter-spacing: 1.6px; }
.encart.petit { font-size: 0.86rem; margin-bottom: 10px; }

/* Grilles qui défilent chez elles : la page ne s'allonge plus avec le catalogue
   (174 cartes de pays y passaient jusqu'ici en pleine hauteur). */
.grille-choix.defilante {
  max-height: 322px; overflow-y: auto;
  padding: 2px 8px 2px 2px; scrollbar-gutter: stable;
  /* Ombres de défilement : les deux premiers calques sont ancrés au CONTENU
     (`local`), les deux suivants au CADRE (`scroll`). L'ombre du bas n'est donc
     visible que s'il reste quelque chose en dessous, et disparaît une fois en
     bas de course — sans une ligne de JavaScript. Sans ce signal, une grille
     pleine ressemble à une grille complète, et le dernier théâtre de la liste
     passe inaperçu. */
  background:
    linear-gradient(var(--nuit) 40%, transparent) top    / 100% 22px no-repeat local,
    linear-gradient(transparent, var(--nuit) 60%) bottom / 100% 22px no-repeat local,
    radial-gradient(farthest-side at 50% 0,   rgba(212,169,78,0.30), transparent) top    / 100% 10px no-repeat scroll,
    radial-gradient(farthest-side at 50% 100%, rgba(212,169,78,0.30), transparent) bottom / 100% 10px no-repeat scroll;
}
/* `align-content` vaut `stretch` par défaut en grille : quand le conteneur est
   plus haut que ses rangées — ce qui est devenu la règle depuis que la hauteur
   vient de l'écran — les rangées s'étirent pour combler le vide, et les cartes
   deviennent plus hautes que larges. Elles gardent leur hauteur naturelle et
   l'espace restant reste en bas. */
.grille-choix { align-content: start; }
.grille-choix.defilante.haute { max-height: 400px; }
.duo-creation .grille-choix { grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 10px; }
.duo-creation .carte-choix { padding: 13px 12px; }
.duo-creation .carte-choix b { font-size: 0.88rem; margin: 3px 0 5px; }
.duo-creation .annee-choix { font-size: 1.2rem; letter-spacing: 2px; }
.duo-creation .drapeau-img { width: 30px; height: 22px; margin-bottom: 6px; }
.duo-creation .sous-choix { font-size: 0.84rem; }
#filtre-pays { max-width: none; }

/* Rail de commande : suit le regard pendant que la colonne de gauche défile. */
.rail-creation {
  position: sticky; top: 96px;
  padding: 22px 20px 24px;
  background: linear-gradient(170deg, var(--velours-3), var(--velours-2) 55%);
  border: 1px solid var(--bordure); border-top: 2px solid var(--or-sombre);
  border-radius: 6px;
}
.rail-creation .btn { margin-top: 16px; }
.rail-creation .segmente { max-width: none; }
.rail-creation .segmente button { padding: 9px 4px; font-size: 0.72rem; letter-spacing: 0.6px; }
/* Le cerveau de l'IA se lit en liste dans un rail étroit, pas en mosaïque —
   et tient sur deux lignes par carte : intitulé et modèle sur la première,
   tarif sur la seconde. Les quatre agents entrent ainsi dans le rail sans
   qu'il ait besoin de défiler. */
.rail-creation .grille-choix.liste { grid-template-columns: 1fr; gap: 6px; }
.rail-creation .carte-choix { padding: 8px 11px; text-align: left; }
.rail-creation .carte-choix b {
  display: inline; margin: 0; font-size: 0.8rem; letter-spacing: 0.6px;
}
.rail-creation .carte-choix .modele {
  display: inline; font-size: 0.86rem; color: var(--encre-2);
}
.rail-creation .carte-choix .modele::before { content: ' — '; }
.rail-creation .carte-choix .prix { display: block; font-size: 0.78rem; margin-top: 1px; }
.rail-creation .carte-choix.choisie::after { top: 5px; right: 8px; font-size: 0.8rem; }
/* Pastille d'avertissement : l'explication complète est dans son infobulle. */
.rail-creation .note-agent {
  position: absolute; top: 6px; right: 24px; margin: 0; font-size: 0.7rem;
}
.rail-creation .carte-choix.choisie .note-agent { right: 24px; }

/* Récapitulatif : les trois décisions déjà prises, toujours sous les yeux. */
.recap { margin: 4px 0 6px; border-top: 1px solid var(--bordure); }
.recap > div {
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
  padding: 8px 0; border-bottom: 1px solid var(--bordure);
}
.recap dt {
  font-family: 'Cinzel', serif; font-size: 0.7rem; letter-spacing: 1.4px;
  text-transform: uppercase; color: var(--encre-2); white-space: nowrap;
}
.recap dd { text-align: right; color: var(--encre); font-size: 0.98rem; min-width: 0; }
.recap dd.vide { color: var(--encre-2); font-style: italic; }

/* ── Création tenant dans un seul écran ──
   Même repliée, la page défilait encore : trois grilles à hauteur fixe empilées
   dépassent toujours la fenêtre. On inverse donc le raisonnement — l'écran fixe
   la hauteur, et ce sont les grilles qui s'y adaptent. Le panneau occupe
   exactement la fenêtre, la page ne défile plus du tout, et chaque grille
   défile chez elle sur la part de hauteur qui lui revient.

   Réservé aux fenêtres assez grandes : en dessous, un défilement normal reste
   plus confortable qu'un empilement de zones minuscules. */
@media (min-width: 1041px) and (min-height: 660px) {
  body.creation-plein { overflow: hidden; }
  body.creation-plein #pied { display: none; }
  /* La barre de navigation fait une soixantaine de pixels ; les 130 px de marge
     haute étaient calculés pour une page qui défile, où l'on veut de l'air avant
     le titre. Ici chaque pixel au-dessus est un pixel retiré aux grilles. */
  /* Les 1100 px du tableau de bord conviennent à une liste de campagnes ; ici
     ils tassent trois grilles au milieu de l'écran en laissant les côtés vides.
     La largeur suit la fenêtre, avec une borne pour rester lisible en 21:9. */
  body.creation-plein #tableau {
    box-sizing: border-box; height: 100vh; min-height: 0;
    max-width: 1800px; padding-top: 72px; padding-bottom: 22px;
    padding-left: 36px; padding-right: 36px;
    display: flex; flex-direction: column;
  }
  /* Plus de largeur disponible : autant de colonnes en plus. */
  body.creation-plein .duo-creation .grille-choix { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
  body.creation-plein #choix-camps { grid-template-columns: repeat(auto-fill, minmax(232px, 1fr)); }
  body.creation-plein #cases-pays { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); }
  body.creation-plein #panneau-creation:not(.cachee) {
    flex: 1; min-height: 0; display: flex; flex-direction: column;
  }
  body.creation-plein #panneau-creation .entete-tableau { margin-bottom: 16px; flex: none; }
  body.creation-plein #panneau-creation .numero { padding-bottom: 6px; margin-bottom: 6px; }
  body.creation-plein #panneau-creation .titre-parchemin { margin: 2px 0 0; }
  body.creation-plein .plan-creation { flex: 1; min-height: 0; }
  /* Les deux colonnes s'étirent sur toute la hauteur de la grille : sans cela
     leur hauteur dépendrait de leur contenu, qu'on cherche justement à borner. */
  body.creation-plein .colonne-creation { align-self: stretch; min-height: 0; }

  /* Les deux volets du haut et le choix du camp se partagent la hauteur ;
     repliés, le camp la prend tout entière. */
  body.creation-plein .duo-creation { flex: 1.15 1 0; min-height: 0; align-items: stretch; }
  body.creation-plein #etape-camp { flex: 1 1 0; }
  body.creation-plein #bloc-pays-perso { flex: 1 1 0; }
  body.creation-plein .etape { display: flex; flex-direction: column; min-height: 0; }
  body.creation-plein .etape > h3,
  body.creation-plein .etape > input,
  body.creation-plein .etape > p { flex: none; }
  body.creation-plein #bloc-mode { flex: none; }
  body.creation-plein .resume-etapes { flex: none; }

  /* La hauteur fixe cède devant la hauteur disponible. */
  body.creation-plein .grille-choix.defilante,
  body.creation-plein .plan-creation.replie .grille-choix.defilante.haute {
    flex: 1 1 0; max-height: none; min-height: 96px;
  }

  body.creation-plein .rail-creation {
    position: static; align-self: stretch; min-height: 0; overflow-y: auto;
  }
}

@media (max-width: 1040px) {
  .plan-creation { grid-template-columns: 1fr; }
  .rail-creation { position: static; }
  .duo-creation { grid-template-columns: 1fr; }
  .grille-choix.defilante { max-height: 280px; }
}

/* ───────────── Personnalisation : trois volets ─────────────
   Palette, identité et porte-monnaie se suivaient en une seule colonne, ce qui
   faisait de cette section la plus haute de la page pour trois champs et une
   liste. Côte à côte, chacun tient dans un cadre à sa mesure. */
#section-perso { margin-top: 56px; padding-top: 28px; border-top: 1px solid var(--bordure); }
#section-perso select {
  width: 100%; margin-top: 6px; padding: 10px;
  background: var(--nuit); color: var(--encre);
  border: 1px solid var(--bordure); border-radius: 3px; font-family: inherit;
}
.grille-perso {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px; align-items: start; margin-top: 20px;
}
.volet-perso {
  padding: 20px 22px; border: 1px solid var(--bordure); border-radius: 6px;
  background: linear-gradient(170deg, var(--velours-3), var(--velours-2) 60%);
}
.volet-perso h3 {
  font-family: 'Cinzel', serif; font-size: 0.95rem; font-weight: 600;
  letter-spacing: 1.6px; color: var(--or); margin-bottom: 12px;
}
.volet-perso p.muted { font-size: 0.94rem; }
.volet-perso .btn { margin-top: 16px; }
.couleur-libre { display: flex !important; align-items: center; gap: 10px; margin-top: 14px !important; }
.couleur-libre input[type=color] { width: 46px; height: 30px; margin: 0; padding: 2px; cursor: pointer; }
#perso-retour { margin-top: 10px; min-height: 1.2em; }

.volet-monnaie { border-left: 3px solid var(--or); }
.volet-monnaie .solde { font-family: 'Cinzel', serif; font-size: 1.25rem; color: var(--encre); margin-bottom: 8px; }
.volet-monnaie .mention { font-size: 0.86rem; }
.bloc-releve { margin-top: 16px; border-top: 1px solid var(--bordure); padding-top: 14px; }
.barre-releve { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 10px; }
.barre-releve b { font-family: 'Cinzel', serif; letter-spacing: 1px; font-size: 0.86rem; }
#releve-resume { font-size: 0.9rem; }
#releve-detail { max-height: 300px; overflow: auto; margin-top: 10px; }

/* Palette d'étendard (inscription) */
#choix-etendard { margin-bottom: 14px; }
#palette-etendard, #palette-perso { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px; }
.pastille-etendard {
  width: 34px; height: 34px; border-radius: 50%; cursor: pointer;
  border: 2px solid transparent; outline: 2px solid var(--bordure);
  transition: transform 0.2s, outline-color 0.2s;
}
.pastille-etendard:hover { transform: scale(1.15); }
.pastille-etendard.choisie {
  outline: 2px solid var(--or); border-color: var(--nuit);
  transform: scale(1.18); box-shadow: 0 0 14px rgba(212,169,78,0.5);
}

/* En-tête du tableau de bord */
.entete-tableau {
  display: flex; justify-content: space-between; align-items: flex-end;
  flex-wrap: wrap; gap: 16px; margin-bottom: 34px;
}
.entete-tableau .titre-parchemin { margin-bottom: 0; font-size: 2.1rem; }
.boutons-entete { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; justify-content: flex-end; margin-left: auto; }
.boutons-entete .btn { width: auto; margin: 0; padding: 9px 16px; font-size: 0.85rem; align-self: center; }

/* Recherche d'un pays dans « Choisissez votre théâtre » */
#filtre-pays {
  width: 100%; max-width: 380px; margin: 0 0 12px;
  background: var(--velours); color: var(--encre);
  border: 1px solid var(--bordure); border-radius: 6px; padding: 9px 12px;
  font-family: inherit; font-size: 0.95rem;
}
#filtre-pays:focus { outline: none; border-color: var(--or); }
.drapeau-img {
  width: 36px; height: 27px; object-fit: cover; border-radius: 3px;
  display: block; margin: 0 auto 8px; box-shadow: 0 2px 8px rgba(0,0,0,0.45);
}
#ligne-compte { max-width: 320px; }

/* Cartes de parties */
.grille-parties { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 20px; }
.carte-partie {
  position: relative; padding: 26px 26px 20px;
  background: linear-gradient(170deg, var(--velours-3), var(--velours-2) 60%);
  border: 1px solid var(--bordure); overflow: hidden;
  transition: transform 0.3s, box-shadow 0.3s;
}
.carte-partie::before {
  content: ''; position: absolute; inset: 0 0 auto 0; height: 2px;
  background: linear-gradient(90deg, transparent, var(--or), transparent);
}
.carte-partie:hover { transform: translateY(-5px); box-shadow: 0 16px 44px rgba(0,0,0,0.5); }
.carte-partie h3 {
  font-family: 'Cinzel', serif; font-size: 1.15rem; font-weight: 600;
  letter-spacing: 1px; color: var(--encre); margin-bottom: 8px; padding-right: 92px;
}
.carte-partie p { font-size: 0.98rem; margin-bottom: 4px; }
/* Le camp choisi est ce qu'on cherche des yeux en revenant : il se détache. */
.carte-partie .camp-partie {
  font-family: 'Cinzel', serif; font-size: 0.92rem; letter-spacing: 1px; color: var(--or);
}
.carte-partie .tour-partie { margin-top: 8px; font-size: 0.92rem; }
.etat-partie {
  position: absolute; top: 16px; right: 16px;
  padding: 4px 10px; border-radius: 999px;
  font-family: 'Cinzel', serif; font-size: 0.66rem; letter-spacing: 1.2px;
  border: 1px solid var(--bordure); color: var(--encre-2); background: var(--nuit);
}
.etat-partie.active { border-color: var(--or-sombre); color: var(--or); }
.carte-partie.terminee { opacity: 0.7; }
.carte-partie.terminee:hover { opacity: 1; }
.actions-partie { display: flex; gap: 10px; margin-top: 18px; }
.actions-partie .btn { margin: 0; padding: 10px; }
.actions-partie .principal { flex: 3; }
.actions-partie .secondaire { flex: 1; }

/* Hauts faits */
#section-hauts-faits { margin-top: 64px; }
#section-hauts-faits .titre-parchemin { font-size: 1.5rem; }
#liste-hauts-faits { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 14px; }
.haut-fait {
  padding: 16px 18px; font-size: 0.98rem;
  background: var(--velours-2); border: 1px solid var(--bordure);
  border-left: 3px solid var(--or);
}
.haut-fait b { font-family: 'Cinzel', serif; font-size: 0.92rem; letter-spacing: 1px; color: var(--or-clair); }

@media (max-width: 900px) {
  #chiffres { grid-template-columns: repeat(2, 1fr); gap: 26px 0; padding: 38px 20px; }
  #nav-atlas { padding: 12px 16px; }
  #nav-atlas .liens { display: none; }
  #manuel { grid-template-columns: 1fr; padding-top: 100px; }
  #sommaire { position: static; }
  .chapitre { padding: 70px 20px; }
  #tableau { padding: 110px 16px 60px; }
  .parchemin { padding: 30px 22px; }
}