/* ============================================================
   FogenCraft — PAGES (0.92.0)
   Les mises en page propres à une page ou à une famille de pages.
   Aucun composant n'est défini ici : ils viennent de composants.css et
   sont seulement PLACÉS. Une section par page, dans l'ordre du menu.
   ============================================================ */

/* ==================================================== accueil */

.section { max-width: var(--largeur-page); margin: 0 auto; padding: var(--rythme) var(--marge); }
.section.sombre { max-width: none; background: var(--surface);
                  border-block: var(--trait-fort) solid var(--surface-haute); }
.section.sombre > * { max-width: var(--largeur-page); margin-inline: auto; }
.section-tete { margin-bottom: var(--e-6); }
.section-tete h2 { margin-bottom: var(--e-4); }
.section-tete .mesure { margin-bottom: 0; }

/* --- le héros : une affiche, et par-dessus un écran de Pip-Boy qui s'allume --- */
.heros {
  position: relative; isolation: isolate;
  display: flex; align-items: flex-end;
  min-height: min(88svh, 760px);
  padding: calc(var(--rythme) * 1.2) var(--marge) var(--rythme);
  overflow: hidden;
}
.heros picture, .heros img.fond { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -2; }
.heros img.fond { object-fit: cover; object-position: 62% 50%; }   /* le filtre est cuit dans l'image */
.heros::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(to top, var(--fond) 2%, color-mix(in srgb, var(--fond) 62%, transparent) 42%, transparent 78%),
    linear-gradient(to right, color-mix(in srgb, var(--fond) 90%, transparent), transparent 55%);
}
.heros::after {   /* lignes de balayage, comme sur un écran */
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: repeating-linear-gradient(0deg, rgba(0,0,0,.18) 0 2px, transparent 2px 5px);
}
.heros-contenu { position: relative; width: 100%; max-width: 46rem; margin: 0 auto 0 0; }
.heros h1 { margin-bottom: var(--e-5); font-size: clamp(2rem, 6.5vw, 4.4rem); line-height: 1.05;
            text-shadow: 4px 4px 0 rgba(0,0,0,.7), 0 0 14px rgba(0,0,0,.8); }
.heros h1 .or { color: var(--jaune); text-shadow: 4px 4px 0 rgba(0,0,0,.7), 0 0 14px rgba(0,0,0,.8), var(--lueur-jaune-forte); }
.heros .pitch { max-width: 46ch; margin-bottom: var(--e-6); font-size: clamp(1rem, 2.2vw, 1.15rem); color: var(--texte-doux); }
.heros .boutons { display: flex; gap: var(--e-3); flex-wrap: wrap; }
@media (max-width: 575px) { .heros .boutons .bouton { width: 100%; } }

.amorce {
  margin: 0 0 var(--e-5); padding: var(--e-3) var(--e-4);
  max-width: 34rem; font-family: var(--police-pipboy); font-size: var(--t-pipboy); line-height: 1.35;
  background: color-mix(in srgb, var(--phosphore-sombre) 82%, transparent);
  border: var(--trait-fin) solid rgba(92,224,92,.35); color: var(--phosphore);
  box-shadow: inset 0 0 30px rgba(0,0,0,.7), var(--lueur-phosphore);
}
.amorce p { margin: 0; min-height: 1.35em; }
.amorce p::before { content: "> "; opacity: .55; }
.amorce b { color: #fff; font-weight: 400; text-shadow: 0 0 8px var(--phosphore); }
@media (max-width: 480px) { .amorce p { min-height: 2.7em; } .amorce { font-size: 1.05rem; } }

/* --- le bandeau de données : une réglette d'instrument --- */
.bandeau-donnees { display: grid; grid-template-columns: repeat(2, 1fr);
                   border-block: var(--trait-fort) solid var(--surface-haute); background: var(--surface); }
.bandeau-donnees .dd { display: flex; align-items: baseline; gap: var(--e-2); flex-wrap: wrap;
                       padding: var(--e-3) var(--marge);
                       border-right: 1px solid var(--separateur); border-bottom: 1px solid var(--separateur); }
.bandeau-donnees .dd i { font-style: normal; font-family: var(--police-pixel); font-size: var(--t-etiquette);
                         text-transform: uppercase; color: var(--texte-faible); }
.bandeau-donnees .dd b { font-weight: 400; color: var(--phosphore); text-shadow: 0 0 8px rgba(92,224,92,.4); }
@media (max-width: 767.98px) { .bandeau-donnees .adr { grid-column: 1 / -1; } }
@media (min-width: 768px) {
  .bandeau-donnees { grid-template-columns: repeat(4, 1fr); }
  .bandeau-donnees .dd { border-bottom: none; justify-content: center; }
  .bandeau-donnees .dd:last-child { border-right: none; }
}

/* --- 01 · la bande --- */
.monde-texte .faits { margin-top: var(--e-5); }
.bande { display: grid; max-width: var(--largeur-page); margin-inline: auto; }
.bande-texte { padding: var(--rythme) var(--marge); }
.bande-texte h2 { margin-bottom: var(--e-5); }
.faits { list-style: none; display: flex; gap: var(--e-6); flex-wrap: wrap; margin: var(--e-6) 0 0; padding: 0; }
.faits li { display: grid; }
.faits b { font-size: 2.4rem; color: var(--jaune); text-shadow: 0 0 22px rgba(242,194,48,.35); }
.faits span { font-family: var(--police-pixel); font-size: var(--t-etiquette); text-transform: uppercase;
              color: var(--texte-doux); margin-top: 4px; }
@media (min-width: 1024px) { .bande-texte { padding: var(--rythme) clamp(2rem, 5vw, 5rem); max-width: 760px; margin-inline: auto; } }

/* --- 02 · les piliers --- */
.piliers { display: grid; gap: 0; border-top: var(--trait-fin) solid var(--separateur); }
.pilier { padding: var(--e-5) 0; border-bottom: 1px solid var(--separateur); }
.pilier svg, .pilier img { width: 56px; height: 56px; color: var(--jaune); margin-bottom: var(--e-3); }
.pilier h3 { margin-bottom: var(--e-2); }
.pilier p { margin: 0; font-size: var(--t-petit); color: var(--texte-doux); }
@media (max-width: 639px) {
  .pilier { display: grid; align-items: center; grid-template-columns: 56px 1fr; column-gap: var(--e-4);
            grid-template-areas: "icone titre" "icone texte"; padding: var(--e-4) 0; }
  .pilier svg, .pilier img { grid-area: icone; align-self: center; margin: 0; }
  .pilier h3 { grid-area: titre; margin-bottom: var(--e-1); }
  .pilier p  { grid-area: texte; }
}
@media (min-width: 640px) { .piliers { grid-template-columns: repeat(2, 1fr); column-gap: var(--e-6); } }
@media (min-width: 1024px) {
  .piliers { grid-template-columns: repeat(5, 1fr); column-gap: var(--e-5); border-bottom: var(--trait-fin) solid var(--separateur); }
  .pilier { border-bottom: none; padding: var(--e-6) 0; }
}

/* --- 03 · ton personnage --- */
.duo { display: grid; gap: var(--e-6); align-items: center; }
.duo h2 { margin-bottom: var(--e-5); }
@media (min-width: 1024px) { .duo { grid-template-columns: 1fr 1fr; gap: var(--e-8); } }
.demo-special .stat { border-color: rgba(92,224,92,.22); }
.demo-special .stat .valeur { color: inherit; }
.demo-special .stat .jauge { border-color: rgba(92,224,92,.35); background: #04140A; }
.demo-special .stat .jauge i { background: currentColor; }
.demo-special .stat .jauge::after { background: repeating-linear-gradient(90deg, transparent 0 8px, #04140A 8px 10px); }
.demo-special .total { margin: var(--e-4) 0 0; font-family: var(--police-pixel); font-size: var(--t-etiquette);
                       text-transform: uppercase; opacity: .75; }

/* --- 04 · les camps --- */
.camps-bande { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--trait-fin);
               background: var(--separateur); border: var(--trait-fin) solid var(--separateur); }
.camp-tuile { display: grid; justify-items: center; text-align: center; gap: var(--e-2);
              padding: var(--e-5) var(--e-3); background: var(--surface); color: var(--texte); text-decoration: none;
              border-top: var(--trait-fort) solid transparent; transition: background-color .15s, border-color .15s; }
.camp-tuile:hover { background: var(--surface-haute); border-top-color: var(--jaune); color: var(--texte); }
.camp-tuile:hover .embleme { transform: scale(1.06); }
.camp-tuile .embleme { width: 72px; height: 72px; margin-inline: auto; }
.camp-tuile b { font-family: var(--police-pixel); font-size: .9rem; }
.camp-tuile span { font-family: var(--police-pipboy); font-size: var(--t-pipboy); color: var(--texte-doux); }
@media (min-width: 900px) { .camps-bande { grid-template-columns: repeat(4, 1fr); } }
.lien-suite { margin: var(--e-5) 0 0; font-family: var(--police-pixel); font-size: var(--t-etiquette); text-transform: uppercase; }
.lien-suite a { text-decoration: none; }
.lien-suite a:hover { text-decoration: underline; }

/* --- 05 · admission --- */
.etapes-dossier { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--e-5); }
.etapes-dossier li { display: grid; grid-template-columns: auto 1fr; column-gap: var(--e-4); align-items: start;
                     padding-top: var(--e-4); border-top: var(--trait-fin) solid var(--separateur); }
.etapes-dossier .rang { grid-row: 1 / span 2; align-self: start; font-family: var(--police-pipboy);
                        font-size: 3rem; line-height: .75; color: var(--jaune); opacity: .5; }
.etapes-dossier h3 { grid-column: 2; margin-bottom: var(--e-2); }
.etapes-dossier p { grid-column: 2; margin: 0; color: var(--texte-doux); font-size: var(--t-petit); max-width: 46ch; }
@media (min-width: 900px) { .etapes-dossier { grid-template-columns: repeat(3, 1fr); } }

/* --- 06 · journal --- */
.journal { display: grid; gap: var(--e-5); }
.entree { display: grid; gap: var(--e-4); }
.entree img { width: 100%; aspect-ratio: 16/9; object-fit: cover; border: var(--trait-fin) solid var(--bordure); }
.entree time { display: block; font-family: var(--police-pixel); font-size: var(--t-etiquette); text-transform: uppercase;
               color: var(--texte-faible); margin-bottom: var(--e-2); }
.entree h3 { margin-bottom: var(--e-2); }
.entree p { margin: 0; font-size: var(--t-petit); color: var(--texte-doux); }
.entree .lire { display: inline-block; margin-top: var(--e-3); font-family: var(--police-pixel); font-size: var(--t-etiquette);
                text-transform: uppercase; text-decoration: none; border-bottom: var(--trait-fin) solid currentColor; }
@media (min-width: 900px) { .journal { grid-template-columns: repeat(3, 1fr); } }

/* --- l'appel final --- */
.appel { display: grid; gap: var(--e-5); align-items: center; max-width: var(--largeur-page); margin: 0 auto;
         padding: var(--rythme) var(--marge); }
.appel .eyebrow { color: var(--texte-doux); }
.appel-action { display: grid; gap: var(--e-3); justify-items: start; }
.adresse-inline { margin: 0; font-family: var(--police-pipboy); font-size: var(--t-pipboy); color: var(--texte-doux); }
@media (min-width: 900px) { .appel { grid-template-columns: 1fr auto; gap: var(--e-8); } .appel-action { justify-items: end; } }
@media (max-width: 575px) { .appel-action .bouton { width: 100%; } }

/* ==================================================== journal (lecture) */

.journal-long { display: grid; gap: var(--e-5); max-width: 760px; }
.actu-longue img { width: 100%; aspect-ratio: 16/9; object-fit: cover; margin-bottom: var(--e-4);
                   border: var(--trait-fin) solid var(--bordure); }
.actu-longue time { display: block; font-family: var(--police-pixel); font-size: var(--t-etiquette); text-transform: uppercase;
                    color: var(--texte-faible); margin-bottom: var(--e-2); }
.actu-longue h2 { margin-bottom: var(--e-4); }
.actu-longue .pastille { margin-bottom: var(--e-4); }
.actu-longue .corps p { color: var(--texte-doux); max-width: 62ch; }
.actu-longue .corps p:last-child { margin-bottom: 0; }

/* ==================================================== règles */

.regles { display: grid; gap: var(--e-8); }
.regle { padding-top: var(--e-5); border-top: var(--trait-fin) solid var(--separateur); }
.regle h2 { margin-bottom: var(--e-4); max-width: 24ch; }
.echelle { list-style: none; margin: var(--e-5) 0; padding: 0; display: grid; gap: 0; counter-reset: marche; }
.echelle li { display: grid; grid-template-columns: auto 1fr; gap: var(--e-4); align-items: baseline;
              padding: var(--e-3) 0; border-bottom: 1px solid var(--separateur); }
.echelle li::before { counter-increment: marche; content: counter(marche, decimal-leading-zero);
                      font-family: var(--police-pixel); font-size: var(--t-etiquette); color: var(--jaune);
                      border: var(--trait-fin) solid currentColor; padding: 3px 6px 2px; }
.echelle span { display: block; font-size: var(--t-petit); color: var(--texte-doux); }
@media (min-width: 640px) { .echelle li { grid-template-columns: auto 14rem 1fr; } .echelle span { margin-top: 0; } }
.rappel-regles { margin-top: var(--e-8); }
.rappel-regles p:last-child { margin-bottom: 0; }

/* ==================================================== guide, système, factions */

.numero, .etapes-install .numero { flex: none; width: 1.9rem; height: 1.9rem; display: inline-grid; place-items: center;
                                   background: var(--jaune); color: var(--sur-jaune);
                                   font-family: var(--police-pipboy); font-size: 1.1rem; margin-right: var(--e-2); }
.titre-liste { margin: var(--e-5) 0 var(--e-3); font-family: var(--police-pixel); font-size: var(--t-h4); }
.camp { padding: var(--e-5) 0; border-bottom: 1px solid var(--separateur); }
.camp:last-of-type { border-bottom: none; padding-bottom: 0; }
.camp h4 { color: var(--jaune); }
.camp .devise { margin: var(--e-1) 0 var(--e-3); font-family: var(--police-pipboy); font-size: var(--t-pipboy); color: var(--texte-doux); }
.camp p { margin: 0 0 var(--e-2); color: var(--texte-doux); }
.besoin-quoi, .besoin-metier { font-weight: 500; }
.besoin-prix, .besoin-volume { font-family: var(--police-pipboy); font-size: var(--t-pipboy); color: var(--jaune); }

/* ==================================================== installation */

.versions { display: flex; flex-wrap: wrap; gap: var(--e-3); margin: var(--e-4) 0; }
.version { flex: 1 1 12rem; padding: var(--e-3); background: var(--surface-haute); border-left: var(--trait-fort) solid var(--jaune); }
.version-nom { display: block; font-family: var(--police-pixel); font-size: var(--t-etiquette); text-transform: uppercase; color: var(--texte-doux); }
.version strong { color: var(--jaune); overflow-wrap: anywhere; }
.titre-voies { margin: var(--e-5) 0 var(--e-3); }
.panneau-voies .titre-voies { margin-top: 0; }
.voies { display: grid; gap: var(--e-4); }
.voie { display: flex; flex-direction: column; gap: var(--e-3); padding: var(--e-4); --_fond: var(--surface); }
.voie > * { margin: 0; position: relative; z-index: 1; }
.voie h3 { font-size: var(--t-h4); }
.voie-primaire { --_bord: var(--jaune); --_fond: color-mix(in srgb, var(--jaune) 5%, var(--surface)); }
.voie .bouton { align-self: start; }
@media (min-width: 46rem) { .voies { grid-template-columns: 1.15fr 1fr; align-items: start; } }
.etapes-install { display: grid; gap: var(--e-4); margin: var(--e-5) 0; }
.etapes-install h3 { display: flex; align-items: center; gap: var(--e-3); }
@media (min-width: 46rem) { .etapes-install { grid-template-columns: repeat(2, 1fr); } }
.adresse-serveur { margin: var(--e-3) 0; }
.adresse-serveur code { display: inline-block; padding: var(--e-3) var(--e-4); background: var(--phosphore-sombre);
                        border: var(--trait-fin) solid var(--phosphore); color: var(--phosphore);
                        font-size: 1.4rem; overflow-wrap: anywhere; text-shadow: 0 0 8px rgba(92,224,92,.4); }
.depannage { margin: var(--e-4) 0 0; }
.depannage dt { margin-top: var(--e-4); font-weight: 600; color: var(--jaune); overflow-wrap: anywhere; }
.depannage dt:first-child { margin-top: 0; }
.depannage dd { margin: var(--e-2) 0 0; padding-left: var(--e-4); border-left: var(--trait-fin) solid var(--separateur); color: var(--texte-doux); }

/* ==================================================== carte */

/* QUATRE RANGEES, ET CHACUNE NOMMEE. La page etait une grille de trois
   rangees dont la deuxieme, en `1fr`, portait le cadre de la carte. En y
   ajoutant la barre des vues, c'est ELLE qui a pris cette rangee : ses deux
   boutons se sont etires sur toute la hauteur et la carte s'est ecrasee
   dessous (signale le 7 septembre 2026). Les rangees sont donc assignees
   explicitement — la barre masquee laisse simplement sa rangee vide. */
.page-carte { display: grid; grid-template-rows: auto auto 1fr auto;
              min-height: calc(100svh - var(--h-nav)); }
.carte-tete  { grid-row: 1; }
.vues-carte  { grid-row: 2; }
.cadre-carte { grid-row: 3; }
.note-carte  { grid-row: 4; }
.carte-tete { display: grid; gap: var(--e-3); align-items: end; padding: var(--e-5) var(--marge) var(--e-4);
              border-bottom: var(--trait-fin) solid var(--bordure); }
.carte-tete h1 { font-size: var(--t-h2); }
.carte-tete .mesure { margin: 0; font-size: var(--t-petit); }
@media (min-width: 900px) { .carte-tete { grid-template-columns: auto 1fr; gap: var(--e-8); }
                            .carte-tete .mesure { text-align: right; justify-self: end; } }
.cadre-carte { position: relative; background: #05060B; min-height: min(420px, 60svh); }
.cadre-carte iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }
.carte-absente { display: grid; place-content: center; justify-items: center; text-align: center; gap: var(--e-3);
                 height: 100%; padding: var(--e-8) var(--marge); }
.carte-absente .titre-absente { font-family: var(--police-pixel); font-size: var(--t-h3); max-width: 22ch; margin: 0; }
.carte-absente .mesure { max-width: 46ch; }
.note-carte { margin: 0; padding: var(--e-3) var(--marge); border-top: var(--trait-fin) solid var(--bordure);
              background: var(--surface); font-family: var(--police-texte); font-size: var(--t-petit); color: var(--texte-faible); }

/* ==================================================== survivants */

.filtres { display: flex; gap: var(--e-2); flex-wrap: wrap; margin-bottom: var(--e-4); }
.recherche { max-width: 26rem; margin-bottom: var(--e-6); }
.survivants { display: grid; gap: var(--e-4); }
@media (min-width: 760px)  { .survivants { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1200px) { .survivants { grid-template-columns: repeat(3, 1fr); } }
.survivant { display: flex; flex-direction: column; gap: var(--e-3); }
.survivant header { display: flex; align-items: center; gap: var(--e-3); flex-wrap: wrap; }
.survivant header img { flex: none; }
.survivant header > div { margin-right: auto; min-width: 0; }
.survivant h2 { color: var(--jaune); }
.survivant .sous { margin: 2px 0 0; font-family: var(--police-pipboy); font-size: var(--t-pipboy); color: var(--texte-doux); }
.survivant details summary { cursor: pointer; font-family: var(--police-pixel); font-size: var(--t-etiquette);
                             text-transform: uppercase; color: var(--texte-doux); }
.survivant details summary:hover { color: var(--jaune); }
.survivant details p { margin: var(--e-3) 0 0; font-size: var(--t-petit); color: var(--texte-doux); }
.survivant .fiche-cles { margin-top: auto; padding-top: var(--e-3); border-top: 1px solid var(--separateur); }
.special-compact { display: flex; gap: 1px; background: var(--separateur); border: var(--trait-fin) solid var(--separateur); }
.special-compact span { flex: 1; display: grid; justify-items: center; gap: 1px; padding: var(--e-2) 2px; background: var(--fond); }
.special-compact i { font-style: normal; font-family: var(--police-pixel); font-size: var(--t-etiquette); color: var(--texte-faible); }
.special-compact b { color: var(--jaune); }

/* ==================================================== administration */

.vue[hidden] { display: none; }

/* ---------------------------------------------------- le bandeau de phase (alpha) */
.bandeau-phase { padding: var(--e-2) var(--marge); background: var(--surface-haute);
  border-bottom: var(--trait-fin) solid var(--jaune); color: var(--texte);
  font-family: var(--police-pixel); font-size: var(--t-etiquette); letter-spacing: .08em;
  text-transform: uppercase; text-align: center; }
.bandeau-phase a { color: var(--jaune); }
.bandeau-donnees .dd .noms { flex-basis: 100%; font-family: var(--police-texte);
  font-size: var(--t-petit); color: var(--texte-doux); text-transform: none; letter-spacing: 0; }

/* ---------------------------------------------------- l'espace membre */
/* LES PANNEAUX COULENT EN COLONNES, ils ne s'empilent plus. Deux colonnes
   fixes — la fiche à gauche, tout le reste à droite — laissaient la gauche
   vide sur deux écrans de haut pendant que la droite alignait huit
   panneaux (signalé le 6 septembre 2026). En multicolonne, le flux remplit
   la première colonne puis passe à la seconde : la hauteur s'équilibre
   d'elle-même, quels que soient les panneaux que le script affiche. Les
   deux <div> de colonnes restent dans le HTML (l'ordre de lecture est le
   leur) mais ne sont plus des boîtes : `display: contents`. */
@media (min-width: 1024px) {
  #etatFiche { display: block; columns: 2; column-gap: var(--e-5); }
  #etatFiche > div { display: contents; }
  #etatFiche .panneau { break-inside: avoid; margin: 0 0 var(--e-5); }
  #etatFiche .panneau + .panneau { margin-top: 0; }
}

/* Les deux vues de la carte (carte.js). Au-dessus du cadre, jamais par-dessus :
   BlueMap pose sa propre interface dans les coins de son application. */
/* `flex: none` ET `align-items` : `.page-carte` est une colonne flexible dont
   le cadre prend la place restante. Sans ces deux lignes, la barre s'etirait
   sur toute la hauteur et ses deux boutons devenaient des colonnes. */
.vues-carte { display: flex; flex: none; flex-wrap: wrap; align-items: center;
              gap: var(--e-3); padding: var(--e-3) var(--marge); }
.vues-carte .bouton { flex: none; }
.vues-carte .bouton[aria-pressed="true"] { color: var(--jaune); --_bord: var(--jaune); }