/* Passage au responsive de /magies/mana/. Maquette 1 de
   docs/mockups/2026-08-09_responsive-7-pages.html, validée par Xavier le 2026-08-09.
   Défaut mesuré avant : +810 px de débordement à 390 px, le pire du site.

   Deux précautions expliquent la forme de ce fichier.

   1. La vue a DEUX branches : `cata_canSite(CATA_CAP_SITE_MANA_VIEW)` sert une version aux
      admins et bêta-testeurs, et une autre à tout le monde. Seule la première charge
      calculator.css. Cette feuille est donc liée en tête de vue, hors des deux branches.

   2. La branche publique porte un bloc <style> en ligne, plus bas dans le document, qui
      redéfinit .mana-grid et .calculator. À spécificité égale, le dernier gagne, et c'est lui.
      Tous les sélecteurs ci-dessous sont donc préfixés par .container : 0,2,0 contre 0,1,0,
      ça passe devant sans avoir à écrire un seul !important. */

@media (max-width: 720px) {

  /* Le conteneur portait `width: 1140px` en dur dans l'attribut style de la vue. Retiré là-bas,
     un attribut style ne se rattrape pas depuis une feuille. Ici on ne fait que resserrer. */
  /* box-sizing : sans lui, ce padding s'ajoute à `width: 100%` et la page déborde de sa
     valeur exacte. Le projet n'a pas de reset, on le pose donc au cas par cas. Cette feuille
     n'étant chargée que par /magies/mana/, la règle ne fuit nulle part. */
  .container {
    box-sizing: border-box;
    padding-left: 12px;
    padding-right: 12px;
    margin-top: 76px;
  }

  /* Toutes les grilles de la page passent en colonne unique. */
  .container .grid-2,
  .container .grid-3,
  .container .grid-2-5,
  .container .mana-grid,
  .container .metaGroupElement {
    grid-template-columns: 1fr;
  }

  /* Le calculateur avait une hauteur fixe de 500 px, qui laissait un trou en dessous
     une fois les champs empilés. */
  .container .calculator {
    height: auto;
    min-height: 0;
    padding-bottom: 14px;
  }
  .container .calculator input,
  .container .calculator label {
    width: 100%;
  }

  /* ---- Techniques de mana : une ligne est une technique entière, on ne compare jamais
     deux descriptions entre elles. Donc des cartes. Aucune modification du balisage :
     la conversion se fait au CSS, les intitulés des deux colonnes de coût reviennent en
     ::before puisque l'entête disparaît. */
  .container .mana-grid > table thead { display: none; }
  .container .mana-grid > table,
  .container .mana-grid > table tbody,
  .container .mana-grid > table tr,
  .container .mana-grid > table td {
    display: block;
    width: auto;
  }
  .container .mana-grid > table tr {
    border: 1px solid var(--blue-500);
    background: var(--blue-800);
    margin: 0 0 8px;
    padding: 10px 12px;
  }
  .container .mana-grid > table td {
    border: 0;
    padding: 0 0 5px;
    text-align: left;
  }
  .container .mana-grid > table td:first-child {
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--blue-100);
    padding-bottom: 6px;
  }
  .container .mana-grid > table td:nth-child(3)::before { content: "Coût avec dons : "; }
  .container .mana-grid > table td:nth-child(4)::before { content: "Coût sans dons : "; }
  .container .mana-grid > table td:nth-child(3)::before,
  .container .mana-grid > table td:nth-child(4)::before {
    color: var(--blue-200);
    font-size: .9em;
  }

  /* ---- Seuils d'état : la valeur n'a de sens qu'au croisement du mana et de l'état.
     Une matrice reste une matrice : elle défile dans son cadre au lieu d'être aplatie.
     `display: block` sur la table suffit à la rendre défilante, sans toucher au balisage. */
  .container .grid-2 table {
    display: block;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .container .grid-2 table th,
  .container .grid-2 table td {
    white-space: nowrap;
  }
}