/* ============================================================================
   Socle commun des pages d'Aventures : création de personnage, montée de
   niveau, caractéristiques, âges, capacités.

   POURQUOI un socle unique plutôt qu'une feuille par page : ces pages n'avaient
   quasiment aucun style propre (creerPersonnages.css était un fichier VIDE, la
   page des âges ne chargeait aucune feuille). Elles s'appuyaient entièrement sur
   root.css, le socle legacy en thème clair, qui n'est plus chargé depuis la
   migration du menu v5. Une feuille par page reproduirait la dispersion qu'on
   cherche à corriger.

   Les blocs dépliants restent habillés par accordeon.css.
   Charte : docs/charte-graphique-cataclysme.md
   ========================================================================== */

/* Le conteneur est une FEUILLE opaque, pas un simple gabarit de largeur.
   Sans fond, une page de texte (les états préjudiciables) s'écrit directement
   sur l'image de fond du site et devient illisible dès que le décor s'éclaircit.
   Toutes les pages d'Aventures reposent donc sur le même support. */
.container {
    max-width: 1150px;
    margin: 90px auto 4rem;
    padding: 1.75rem 2rem 2rem;
    background: rgba(0, 24, 44, 0.94);
    border: 1px solid var(--blue-500);
    font-family: 'Crimson Text', Georgia, serif;
    font-size: 1.02rem;
    line-height: 1.65;
    color: var(--blue-100);
}

/* Séparateur entre deux états ou deux blocs de même niveau : sans lui, la page
   des états n'est qu'un long ruban de titres. */
.container > div + div {
    margin-top: 1.4rem;
    padding-top: 1.4rem;
    border-top: 1px solid rgba(10, 61, 102, 0.55);
}

/* ------------------------------------------------------------------ titres */

/* root_v2.css centre tous les h1/h2 du site : ces pages se lisent en colonne. */
.container h1,
.container h2,
.container h3,
.container h4 {
    text-align: left;
    font-family: 'Cinzel', Georgia, serif;
}

.container h1 {
    font-weight: 900;
    font-size: 1.8rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--gold);
    margin: 0 0 1rem;
}

.container h2 {
    font-size: 1.1rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--gold);
    margin: 2.2rem 0 0.8rem;
    padding-bottom: 0.45rem;
    border-bottom: 1px solid rgba(245, 197, 66, 0.2);
}

.container h3 {
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--blue-200);
    margin: 1.6rem 0 0.6rem;
}

.container h4 {
    font-size: 0.85rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(87, 158, 217, 0.85);
    margin: 1.2rem 0 0.5rem;
}

.container p { margin: 0 0 0.9rem; }
.container strong { color: var(--gold); font-weight: 600; }
.container em { color: rgba(223, 234, 242, 0.85); }

.container a {
    color: var(--blue-200);
    text-decoration: none;
    border-bottom: 1px solid rgba(87, 158, 217, 0.35);
    transition: color 0.2s ease, border-color 0.2s ease;
}
.container a:hover {
    color: var(--gold);
    border-bottom-color: var(--gold);
}

/* ------------------------------------------------------------------ listes */

.container ul, .container ol { padding-left: 1.5rem; margin: 0 0 1rem; }
.container li { margin-bottom: 0.4rem; }

/* Les guides (créer un personnage, monter de niveau) sont des listes d'étapes
   numérotées : chaque étape devient un bloc, sinon la page n'est qu'un mur. */
.container > ol {
    list-style: none;
    padding-left: 0;
    counter-reset: etape;
}

.container > ol > li {
    counter-increment: etape;
    position: relative;
    background: rgba(0, 28, 51, 0.92);
    border: 1px solid var(--blue-500);
    border-left: 3px solid rgba(245, 197, 66, 0.5);
    padding: 1.1rem 1.35rem 1.1rem 3.6rem;
    margin-bottom: 1rem;
}

.container > ol > li::before {
    content: counter(etape);
    position: absolute;
    left: 1.1rem;
    top: 1rem;
    font-family: 'Cinzel', Georgia, serif;
    font-size: 1.35rem;
    font-weight: 900;
    color: rgba(245, 197, 66, 0.4);
    line-height: 1;
}

/* Le titre de l'étape, porté par un <span> dans ces pages. */
.container > ol > li > span {
    display: block;
    font-family: 'Cinzel', Georgia, serif;
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--blue-100);
    margin-bottom: 0.6rem;
}

/* ------------------------------------------------------------------ tables */

.container table {
    width: 100%;
    border-collapse: collapse;
    background: rgba(0, 35, 64, 0.55);
    border: 1px solid var(--blue-500);
    margin: 0 0 1.25rem;
    font-size: 0.97rem;
}

.container thead th {
    background: var(--blue-800);
    font-family: 'Cinzel', Georgia, serif;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--gold);
    text-align: left;
    padding: 0.55rem 0.8rem;
    border-bottom: 1px solid var(--blue-500);
    white-space: nowrap;
}

.container tbody td {
    padding: 0.5rem 0.8rem;
    border-bottom: 1px solid rgba(10, 61, 102, 0.45);
    vertical-align: top;
    line-height: 1.5;
}
.container tbody tr:last-child td { border-bottom: none; }
.container tbody tr:nth-child(even) { background: var(--blue-100-05); }
.container tbody tr:hover { background: rgba(245, 197, 66, 0.05); }

/* Tables larges : elles défilent dans leur boîte, la page ne déborde jamais. */
.container .table-scroll { overflow-x: auto; margin-bottom: 1.25rem; }
.container .table-scroll table { margin-bottom: 0; }

/* Table à colonnes de largeur égale (répartition de caractéristiques) */
.tr-same-size td, .tr-same-size th { text-align: center; }

/* ------------------------------------------------------- formules et notes */

.container .eq-c {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: wrap;
    background: var(--blue-800);
    border: 1px solid rgba(245, 197, 66, 0.3);
    border-left: 3px solid var(--gold);
    padding: 0.8rem 1rem;
    margin: 0.9rem 0;
    font-family: 'Cinzel', Georgia, serif;
    font-size: 0.92rem;
}

.container .fraction {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    line-height: 1.25;
}
.container .fraction .fup { border-bottom: 1px solid rgba(245, 197, 66, 0.6); padding: 0 0.4rem; }
.container .fraction .bar { display: none; }
.container .fraction .fdn { padding: 0 0.4rem; }

.container blockquote {
    margin: 0.9rem 0;
    padding: 0.75rem 1rem;
    background: rgba(10, 61, 102, 0.3);
    border-left: 3px solid var(--blue-200);
    color: rgba(223, 234, 242, 0.8);
}

/* --------------------------------------------------------------- responsive */

@media (max-width: 900px) {
    .container { margin-top: 75px; padding: 0 0.9rem; }
    .container > ol > li { padding: 0.9rem 1rem 0.9rem 3rem; }
    .container table { display: block; overflow-x: auto; }
}