/* Page de classe, passage au responsive. Même traitement que les races pour l'en-tête
   (portrait au format natif, texte qui glisse par-dessus), et variante B pour la progression
   (sélecteur collant, colonne du niveau figée), arrêtée par Xavier le 2026-08-10.

   Défaut réparé : la page ne débordait pas, elle COUPAIT. 30 éléments dépassaient la fenêtre
   en étant rognés par le `overflow: hidden` du conteneur, le pire à +292 px. Mesuré le
   2026-08-09.

   Les trois vues sont TOUTES des tables, y compris les capacités : c'est la demande
   d'uniformité de Xavier, et ça évite qu'un changement de vue change aussi de langage visuel.

   Chargée après classes_v2.css, donc elle prime à spécificité égale sans !important. */

/* Les tables construites par js_v2/classes_progression.js n'existent que pour le mobile. */
.cl-vues { display: none; }

@media (max-width: 720px) {

  .container {
    box-sizing: border-box;
    max-width: none;
    width: 100%;
    margin-top: 0;
    padding: 0;
    overflow: visible;            /* c'est LUI qui rognait le contenu */
  }

  /* Les grilles passent en pile. `display: block` et non une grille à une colonne : un enfant
     de grille ne peut pas être `sticky` au-delà de sa propre rangée. */
  .grid-classes,
  .grid-classes > .grid,
  .grid-special,
  .info-important { display: block; }

  /* ---- En-tête : le portrait, le nom et les chiffres posés dessus ---------------------- */
  /* Même principe que la page de race : le PORTRAIT SEUL reste en place, le texte qui le
     surplombe défile et sort par le haut. Un bloc entièrement collant laissait le nom et les
     chiffres plaqués en bas d'écran, recouverts par la description qui montait dessus.
     `.row-2` ne fait donc que réserver la hauteur du portrait, qui est en `fixed` derrière. */
  .grid-classes > .row-2 {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    aspect-ratio: 341 / 512;
    margin: 0;
    padding: 0 0 8%;
    background: none;
  }
  .grid-classes > .row-2 > * { position: relative; z-index: 1; }
  .grid-classes > .row-2 .img {
    position: fixed;
    top: 56px;                    /* sous la barre du menu mobile */
    left: 0;
    z-index: -1;
    display: block;
    width: 100vw;
    max-width: none;              /* root_v2.css impose 85 % et 320px de haut */
    height: auto;
    aspect-ratio: 341 / 512;
    margin: 0;
    background-size: cover;
    background-position: center top;
  }
  .grid-classes > .row-2::after {
    content: '';
    position: absolute;
    inset: auto 0 0 0;
    height: 62%;
    background: linear-gradient(transparent, rgba(0, 28, 51, .5) 40%, rgba(0, 28, 51, .92));
    pointer-events: none;
    z-index: -1;
  }
  .grid-classes > .row-2 h1 {
    margin: 0;
    padding: 0 12px 6px;
    text-align: left;
    font-size: 1.85rem;
    line-height: 1.1;
    text-shadow: 0 2px 14px rgba(0, 0, 0, .95);
  }
  /* Les trois encarts du bandeau (compétences, dés de vie, argent). Empilés en six lignes,
     ils mangeaient la moitié du portrait. Groupés par `.cl-stat` dans la vue, le libellé et
     sa valeur tiennent sur la même ligne : trois lignes au lieu de six. */
  .grid-classes > .row-2 .cl-stat {
    padding: 0 12px;
    margin-top: 3px;
    line-height: 1.4;
  }
  .grid-classes > .row-2 .cl-stat h2 {
    display: inline;
    margin: 0;
    padding: 0;
    font-family: 'Cinzel', Georgia, serif;
    font-size: 8px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--blue-200);
  }
  .grid-classes > .row-2 .cl-stat h2::after { content: '\00a0\00a0'; }
  .grid-classes > .row-2 .cl-stat p {
    display: inline;
    margin: 0;
    padding: 0;
    font-size: 12px;
    color: var(--blue-100);
    text-shadow: 0 1px 6px rgba(0, 0, 0, .95);
  }
  /* Le <br> de la valeur « compétences » ferait une quatrième ligne pour rien. */
  .grid-classes > .row-2 .cl-stat p br { display: none; }
  .grid-classes > .row-2 .cl-stat p br + * { margin-left: .4em; }

  /* ---- Le contenu, qui passe par-dessus ------------------------------------------------
     Surface opaque continue : le moindre trou laisse réapparaître le portrait resté collé
     derrière. Padding bas non nul pour empêcher la marge du dernier enfant de fusionner
     hors de son conteneur, ce qui ouvrait une bande transparente sur la page des races. */
  .grid-classes > .description,
  .grid-classes > .grid,
  .grid-special,
  .container > .grid-special {
    position: relative;
    z-index: 1;
    background: var(--blue-900);
    padding-bottom: 1px;
  }
  .grid-classes > .description {
    box-sizing: border-box;
    margin: 0;
    padding: 14px 12px 6px;
    border-top: 1px solid rgba(245, 197, 66, .4);
  }
  .grid-classes > .description p { margin: 0 0 10px; }

  /* Cartes : mêmes fond et bordure que partout depuis la refonte du menu. Sans ça elles sont
     invisibles, leur fond valant la couleur de la page. */
  .grid-classes .grid-background:not(.row-2):not(.description) {
    box-sizing: border-box;
    width: auto;
    margin: 0 12px 8px;
    padding: 10px 12px;
    background: var(--blue-800);
    border: 1px solid var(--blue-500);
  }
  .grid-classes .grid-background h2 {
    margin: 0 0 7px;
    font-family: 'Cinzel', Georgia, serif;
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--gold);
    text-align: left;
  }
  /* Les compétences de classe : des puces qui se replient, pas quatre colonnes. */
  .grid-classes .grid-4 {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
  }
  .grid-classes .grid-4 > * {
    border: 1px solid var(--blue-500);
    background: rgba(0, 28, 51, .6);
    padding: 2px 7px;
    font-size: 12.5px;
  }
  /* La grille d'alignements garde ses colonnes : sa forme EST l'information. */
  .grid-alignement { font-size: 11px; }

  /* ---- La progression : la grille d'origine cède la place aux trois vues -------------- */
  .grid-special { display: none; }
  .cl-vues {
    display: block;
    position: relative;
    z-index: 1;
    background: var(--blue-900);
    padding: 0 0 16px;
  }

  /* Le sélecteur reste sous la barre du menu mobile, haute de 56px, pendant tout le
     défilement de la table : sur vingt lignes, remonter pour changer de vue est pénible. */
  .cl-sw {
    position: sticky;
    top: 56px;
    z-index: 4;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    margin: 0 12px;
    border: 1px solid var(--blue-500);
    background: var(--blue-800);
  }
  .cl-sw button {
    background: none;
    border: 0;
    border-right: 1px solid var(--blue-500);
    color: var(--blue-100-75);
    font-family: 'Cinzel', Georgia, serif;
    font-size: 9.5px;
    letter-spacing: .09em;
    text-transform: uppercase;
    padding: 9px 3px;
    line-height: 1.25;
    cursor: pointer;
  }
  .cl-sw button:last-child { border-right: 0; }
  .cl-sw button.on {
    background: rgba(245, 197, 66, .12);
    color: var(--gold);
    font-weight: 700;
    box-shadow: inset 0 -2px 0 var(--gold);
  }
  .cl-sw button[disabled] { opacity: .32; cursor: not-allowed; }
  .cl-sw small { display: block; font-size: 7.5px; color: var(--blue-200); letter-spacing: .04em; }
  .cl-sw button.on small { color: var(--gold); }
  .cl-sw button:focus-visible { outline: 2px solid var(--gold); outline-offset: -2px; }

  .cl-aide {
    margin: 7px 12px 0;
    font-family: 'Cinzel', Georgia, serif;
    font-size: 9px;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--blue-200);
  }

  .cl-tw { margin: 7px 12px 0; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .cl-vues table {
    width: 100%;
    border-collapse: separate;   /* `collapse` casse les bordures d'une colonne collante */
    border-spacing: 0;
    font-size: 11.5px;
  }
  .cl-vues table.cl-large { width: auto; min-width: 100%; }
  .cl-vues th,
  .cl-vues td {
    border-right: 1px solid var(--blue-700);
    border-bottom: 1px solid var(--blue-700);
    padding: 4px 3px;
    text-align: center;
    white-space: nowrap;
  }
  .cl-vues th {
    border-top: 1px solid var(--blue-700);
    font-family: 'Cinzel', Georgia, serif;
    font-size: 7.5px;
    letter-spacing: .03em;
    text-transform: uppercase;
    color: var(--gold);
    background: var(--blue-900);
  }
  .cl-vues tr:nth-child(even) td { background: rgba(223, 234, 242, .045); }
  .cl-vues td.cl-z { color: rgba(223, 234, 242, .22); }

  /* La colonne du niveau reste en place quand une table large défile, et garde LA MÊME
     LARGEUR dans les trois vues : sans largeur imposée, chaque table la calcule d'après son
     propre contenu et la colonne sautait d'une vue à l'autre. Demande de Xavier, 2026-08-10. */
  .cl-vues th:first-child,
  .cl-vues td:first-child {
    position: sticky;
    left: 0;
    z-index: 2;
    width: 34px;
    min-width: 34px;
    max-width: 34px;
    border-left: 1px solid var(--blue-700);
    border-right: 1px solid rgba(245, 197, 66, .4);
    background: var(--blue-900);
    color: var(--gold);
    font-weight: 700;
  }
  .cl-vues tr:nth-child(even) td:first-child { background: #042a45; }

  /* La colonne de texte des capacités est la seule à revenir à la ligne. */
  .cl-vues td.cl-txt {
    white-space: normal;
    text-align: left;
    padding: 6px 8px;
    font-size: 13px;
    color: var(--blue-100);
  }
  .cl-vues td.cl-vide { color: rgba(223, 234, 242, .4); font-style: italic; }

  /* Les capacités sont des liens vers leur fiche : même traitement que partout ailleurs,
     texte lisible et soulignement doré, plutôt que le rouge hérité de `.lien`. */
  /* `nowrap` sur le lien entier : une capacité ne se coupe jamais en deux, mais la cellule
     continue de passer à la ligne ENTRE deux capacités. C'est ce qui permet de les enchaîner
     à la suite sans qu'une ligne commence par « 1/jour » orphelin. */
  .cl-vues td.cl-txt a {
    display: inline;
    white-space: nowrap;
    color: var(--blue-100);
    text-decoration: none;
    border-bottom: 1px solid rgba(245, 197, 66, .45);
    transition: color .2s ease, border-color .2s ease;
  }
  .cl-vues td.cl-txt a:hover,
  .cl-vues td.cl-txt a:active {
    color: var(--gold);
    border-bottom-color: var(--gold);
  }
  /* NE PAS masquer `span.lien` : il est tantôt vide et décoratif, tantôt PORTEUR DE LA
     VALEUR (« 1/jour », « +1 », « 2/- »). Le masquer effaçait le chiffre de la capacité,
     erreur commise puis corrigée le 2026-08-10. On se contente de le garder solidaire de
     son libellé. */
  /* `display: inline` : ce span est en `block` ailleurs dans le site, ce qui coupait la ligne
     avant ET après lui. « Attaque spéciale » et sa valeur « Lignage » se retrouvaient sur
     deux lignes malgré le nowrap du lien. Diagnostic du 2026-08-10. */
  .cl-vues td.cl-txt a > span.lien {
    display: inline;
  }
  .cl-vues td.cl-txt a > span.lien:not(:empty) {
    margin-left: .25em;
    color: inherit;   /* sinon la valeur se colore autrement et se lit comme un autre élément */
  }
}