/* ============================================================================
   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); }

/* Le soulignement passe au doré le 2026-08-09, à la demande de Xavier : il était bleu à 35 %
   sous un texte lui-même bleu, donc à peine visible, et l'or est la couleur d'accent de la
   charte. Il reste une bordure et non un `text-decoration` : c'est ce qui permet de le
   colorer indépendamment du texte. */
.container a {
    color: var(--blue-200);
    text-decoration: none;
    border-bottom: 1px solid rgba(245, 197, 66, 0.45);
    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) {
    /* box-sizing : ce padding s'ajoutait à `width: 100%` faute de reset dans le projet, et
       faisait déborder la page de 31px exactement. Mesuré le 2026-08-09 sur Âges, Monter de
       niveau et Dons, qui partagent cette feuille. */
    .container { box-sizing: border-box; margin-top: 75px; padding: 0 0.9rem; }
    .container > ol > li { padding: 0.9rem 1rem 0.9rem 3rem; }
    .container table { display: block; overflow-x: auto; }
}

/* ══════════════════════════════════════════════════════════════════════════
   Traitement par table, sous 720px. Maquettes 4 et 5 de
   docs/mockups/2026-08-09_responsive-7-pages.html, validées par Xavier.

   Le bloc 900px ci-dessus rend toutes les tables défilantes : c'est un filet de
   sécurité correct, mais un défilement horizontal reste un pis-aller. Les deux
   tables ci-dessous méritent mieux, chacune pour une raison opposée.
   ══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 720px) {

  /* ---- Âges : six colonnes aux intitulés longs pour huit lignes, et on ne la lit pas
     en croisant : on cherche une race et on lit sa ligne. Donc une carte par race.
     Les libellés reviennent depuis l'attribut data-k posé sur chaque cellule dans la vue,
     pour qu'ils ne soient écrits qu'à un seul endroit. */
  table.col-8.tr-same-size { display: block; overflow-x: visible; }
  table.col-8.tr-same-size thead { display: none; }
  table.col-8.tr-same-size tbody { display: block; }
  table.col-8.tr-same-size tr {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 6px;
    margin: 0 0 8px;
    padding: 10px 12px;
    background: var(--blue-800);
    border: 1px solid var(--blue-500);
  }
  table.col-8.tr-same-size td {
    display: block;
    border: 1px solid var(--blue-700);
    background: rgba(0, 28, 51, .6);
    padding: 5px 8px;
    text-align: left;
  }
  table.col-8.tr-same-size td:first-child {
    grid-column: 1 / -1;
    border: 0;
    background: none;
    padding: 0 0 3px;
    font-family: 'Cinzel', Georgia, serif;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--blue-100);
  }
  /* L'âge maximum contient un jet de dés et non un nombre : deux cases, sinon « 250 +2d100 »
     revient à la ligne au milieu. */
  table.col-8.tr-same-size td:last-child { grid-column: 2 / -1; }
  table.col-8.tr-same-size td[data-k]::before {
    content: attr(data-k);
    display: block;
    font-family: 'Cinzel', Georgia, serif;
    font-size: 8.5px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--blue-200);
  }

  /* ---- Monter de niveau : cinq colonnes de nombres à un ou deux chiffres. Elle n'a besoin
     ni d'être transformée ni de défiler, elle tient telle quelle une fois débarrassée du
     padding de bureau. On garde donc la comparaison verticale, qui est tout l'intérêt d'une
     table de progression. */
  table.augmentation_personnage {
    display: table;
    width: 100%;
    table-layout: fixed;
    overflow-x: visible;
    font-size: 12px;
  }
  table.augmentation_personnage th,
  table.augmentation_personnage td {
    padding: 5px 3px;
    text-align: center;
  }
  /* Colonnes réparties selon la longueur de l'intitulé et non à parts égales : à parts
     égales, « Caractéristiques » se faisait couper. Les intitulés ne sont PAS abrégés,
     c'est du contenu ; ils reviennent à la ligne, coupure autorisée en dernier recours. */
  table.augmentation_personnage th:nth-child(1) { width: 17%; }
  table.augmentation_personnage th:nth-child(2) { width: 13%; }
  table.augmentation_personnage th:nth-child(3) { width: 23%; }
  table.augmentation_personnage th:nth-child(4) { width: 16%; }
  table.augmentation_personnage th:nth-child(5) { width: 31%; }
  table.augmentation_personnage th {
    font-size: 8.5px;
    line-height: 1.15;
    letter-spacing: .02em;
    hyphens: auto;
    overflow-wrap: anywhere;
  }
  /* 3rem de retrait pour la puce de liste, c'est 48px pris sur 390. */
  .container > ol > li { padding-left: 2.1rem; }
  /* Suivre une ligne sur vingt sans repère est pénible. */
  table.augmentation_personnage tbody tr:nth-child(even) { background: rgba(223, 234, 242, .04); }
}