/* Page de race, passage au responsive. Version R2 « portrait entier » de
   docs/mockups/2026-08-10_race-classe-6-versions.html, choisie par Xavier le 2026-08-10.

   Défaut réparé : la page ne débordait pas, elle COUPAIT. `.description` faisait 575 px de
   large et sortait jusqu'à x=682, mais son `.container` est en `overflow: hidden` : le texte
   était tronqué à droite et personne ne pouvait y accéder. Neuf éléments dans ce cas, le pire
   à +74 px, mesurés le 2026-08-09.

   Deux partis pris de la version R2 :
   1. Le portrait garde son FORMAT NATIF (341 x 512). C'est un dessin vertical : le recadrer
      en bandeau jetterait les deux tiers de ce qui a été dessiné.
   2. Le contenu GLISSE PAR-DESSUS l'image, qui reste en place. D'où `position: sticky` sur le
      bloc d'en-tête et un fond opaque sur ce qui suit. `background-attachment: fixed` aurait
      été plus court à écrire et ne tient pas sur iOS, c'est un piège connu.

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

@media (max-width: 720px) {

  /* Le conteneur cède ses marges : l'image doit toucher les deux bords. */
  .container.races {
    box-sizing: border-box;
    max-width: none;
    width: 100%;
    margin-top: 0;
    padding: 0;
    overflow: visible;          /* c'est LUI qui rognait le texte */
  }

  /* Les grilles de la page 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. */
  .races .grid-2-1,
  .races .grid-3,
  .races .grid,
  .races .info-important {
    display: block;
  }

  /* ---- L'en-tête : le portrait derrière, le nom et les valeurs devant -------------------
     C'est le PORTRAIT SEUL qui reste en place, pas le bloc entier. Avant, `.row-2` était
     collant dans son ensemble : le nom et les valeurs restaient donc plaqués en bas de
     l'écran et le texte de la description leur passait dessus. Corrigé le 2026-08-10 à la
     demande de Xavier, en deux temps :
       - le portrait passe en `position: fixed`, il ne bouge plus jamais ;
       - `.row-2` ne fait plus que RÉSERVER sa hauteur, et le nom comme les valeurs y sont
         en flux normal, donc ils défilent et sortent par le haut avec le reste.
     Le contenu qui suit est opaque : il recouvre le portrait, qui n'est visible que sur la
     hauteur réservée ici. */
  .races .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 12%;
    background: none;
  }

  .races .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 320 px de haut */
    height: auto;
    aspect-ratio: 341 / 512;
    margin: 0;
    background-size: cover;
    background-position: center top;
  }

  /* Le voile : sans lui, le nom se perd sur un fond clair. Il défile avec le nom, puisqu'il
     appartient au bloc en flux et non au portrait resté fixe. */
  .races .row-2::after {
    content: '';
    position: absolute;
    inset: auto 0 0 0;
    height: 52%;
    background: linear-gradient(transparent, rgba(0, 28, 51, .5) 45%, rgba(0, 28, 51, .9));
    pointer-events: none;
    z-index: -1;
  }

  .races .row-2 h1 {
    z-index: 1;
    margin: 0;
    padding: 0 12px 6px;
    text-align: left;
    font-size: 1.9rem;
    line-height: 1.1;
    text-shadow: 0 2px 14px rgba(0, 0, 0, .95);
  }

  /* Remontés DANS l'image plutôt que collés à son bord bas, où ils touchaient le texte de la
     description et se lisaient comme une légende de celui-ci. Demande de Xavier, 2026-08-10. */
  .races .row-2 { padding-bottom: 12%; }

  .races .row-2 .general {
    z-index: 1;
    display: grid;
    /* `grid-4` impose quatre colonnes explicites : avec deux cases seulement, chacune n'en
       occupait qu'un quart. On annule les colonnes explicites pour que le flux automatique
       reprenne la main et réparte l'espace entre les cases réellement présentes. */
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    gap: 6px;
    margin: 0;
    padding: 0 12px 12px;
  }
  .races .row-2 .general > div {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 6px 3px;
    background: rgba(0, 28, 51, .82);
    border: 1px solid var(--blue-500);
  }
  /* Les pictogrammes sont retirés (demande de Xavier, 2026-08-10) : depuis que chaque case
     porte son libellé, l'épée et le bouclier ne disaient rien de plus et occupaient la moitié
     de la hauteur. Ce sont les div vides `.bonusAtt`, `.taille`, `.deplacement`, `.bonusCA`. */
  .races .row-2 .general > div > div { display: none; }
  /* races_v2.css met ce span en `position: absolute` avec une largeur fixe : dans une case
     de 80 px, la valeur sortait du cadre et se posait à côté. */
  .races .row-2 span.general {
    position: static;
    display: block;
    width: auto;
    font-family: 'Cinzel', Georgia, serif;
    font-size: 15px;
    font-weight: 700;
    color: var(--blue-100);
  }

  /* ---- Le contenu, qui passe par-dessus -----------------------------------------------
     Tout ce qui suit l'en-tête doit former UNE surface opaque continue. Le moindre trou
     laisse réapparaître le portrait resté collé derrière : il y en avait un de 8px entre
     `.grid-2-1` et `.info-detail`, mesuré le 2026-08-10, et on voyait l'image passer entre
     deux sections. D'où les marges verticales mises à zéro entre les blocs de premier rang. */
  .races .description,
  .races .info-important,
  .races .info-detail,
  .races .grid-3 {
    position: relative;
    z-index: 1;
    background: var(--blue-900);
  }
  .races .grid-2-1 { margin-bottom: 0; }
  .races .info-detail { margin-top: 0; }
  .races .description p { margin: 0 0 10px; }

  /* La description touche les bords et porte le filet doré : c'est la ligne que l'on voit
     monter sur le portrait en défilant. */
  .races .description.grid-background {
    box-sizing: border-box;
    margin: 0;
    padding: 14px 12px 6px;
    border-top: 1px solid rgba(245, 197, 66, .4);
  }

  /* Les cartes : elles existaient déjà mais étaient INVISIBLES, leur fond
     `rgba(0,28,51,.95)` valant la couleur de la page et leur bordure zéro. On leur rend le
     traitement employé partout ailleurs depuis la refonte du menu : fond --blue-800,
     bordure --blue-500, angles droits. */
  .races .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);
  }

  /* Les titres de section : `root_v2.css` leur donne `margin: 30px 0`, ce qui ouvrait des
     trous de la hauteur d'un pouce entre chaque bloc. Ils deviennent des étiquettes. */
  .races .grid-background h2,
  .races .grid-background h2 a {
    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;
    text-decoration: none;
    border: 0;
  }
  .races .grid-background .text-center { text-align: left; }

  /* `padding-bottom` autant que `padding-top` : sans lui, la marge basse de la dernière carte
     FUSIONNE hors de son conteneur, qui se termine 8px trop tôt. On voyait le portrait resté
     collé derrière apparaître dans cette bande. Diagnostic du 2026-08-10. */
  .races .info-important,
  .races .info-detail {
    padding-top: 8px;
    padding-bottom: 1px;
  }

  /* Les cinq âges : trois colonnes de paires libellé/valeur. */
  .races .grid-5 {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 6px;
  }
  .races .grid-5 > div {
    display: flex;
    flex-direction: column;
    padding: 5px 7px;
    background: rgba(0, 28, 51, .6);
    border: 1px solid var(--blue-700);
    font-size: 14px;
  }
  /* Les silhouettes d'âge font 157px de haut, dessinées pour une page de bureau : elles
     mangeaient l'écran pour illustrer un nombre. Réduites, elles restent un repère. */
  .races .grid-5 > div > span:first-child {
    height: 34px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: left center;
  }
  /* L'ordre visuel : le libellé, puis la valeur en gros, l'icône en repère au-dessus. */
  .races .grid-5 > div > span:nth-child(2) {
    font-family: 'Cinzel', Georgia, serif;
    font-size: 8px;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--blue-200);
  }
  .races .grid-5 > div > span:nth-child(3) {
    font-family: 'Cinzel', Georgia, serif;
    font-size: 15px;
    font-weight: 700;
    color: var(--blue-100);
  }

  /* Les libellés des quatre valeurs générales : le pictogramme seul ne dit pas de quoi
     il s'agit, « 0 » à côté d'une épée ne distingue pas attaque et dégâts. Les mots
     viennent des noms de classes de la vue, ils ne sont pas inventés. */
  .races .row-2 .general > div::after {
    order: -1;
    font-family: 'Cinzel', Georgia, serif;
    font-size: 7.5px;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--blue-200);
  }
  .races .row-2 .general > div:has(.bonusAtt)::after     { content: 'Attaque'; }
  .races .row-2 .general > div:has(.taille)::after       { content: 'Taille'; }
  .races .row-2 .general > div:has(.deplacement)::after  { content: 'Vitesse'; }
  .races .row-2 .general > div:has(.bonusCA)::after      { content: 'CA'; }
}