/* =========================================================
   ESPACE MEMBRE

   Cette feuille ne définit QUE les composants propres à l'espace membre :
   tuiles, tableaux, packs, récapitulatif. Tout le reste — jetons de couleur,
   fond, barre de navigation, boutons, champs de formulaire, cartes, pied de
   page — vient de assets/style.css et assets/home.css, comme sur le site
   public.

   C'est délibéré : la version précédente redéfinissait sa propre palette et ses
   propres boutons, et les deux ont immédiatement divergé de la landing page.
========================================================= */

:root {
  --surface: #ffffff;
  --surface-haut: #eef7fe;
  --radius: 14px;
}

/* ---------- Mise en page ---------- */

.m-main {
  position: relative;
  z-index: 1;
  flex: 1;
  width: 100%;
  max-width: 980px;
  margin: 0 auto;
  padding: 34px 24px 64px;
}

/* home.css donne aux <section> la mise en page des sections de la page
   d'accueil (max-width 1080, padding 70px). Les <section> d'ici ne sont que des
   conteneurs de grille : on annule.

   `:not(.m-section)` est indispensable : sans lui ce sélecteur (0-1-1) écrase
   la marge et le padding de `.m-section` (0-1-0), et les cadres se retrouvent
   collés les uns aux autres, contenu plaqué contre la bordure. */
.m-main section:not(.m-section) {
  max-width: none;
  margin: 0;
  padding: 0;
}

.m-centre { min-height: 62vh; display: grid; place-items: center; }

.m-main h1 {
  font-family: "Cinzel Decorative", "Trebuchet MS", serif;
  font-size: clamp(1.5rem, 3.4vw, 1.9rem);
  margin: 6px 0 20px;
  color: var(--nuit);
}

/* Titre de section précédé d'un court filet doré, écho du surtitre du hero.
   Réservé aux enfants directs : appliqué à tous les h2, il décorait aussi les
   noms de packs, où un filet à gauche d'un texte centré n'a aucun sens. */
.m-main > h2 {
  position: relative;
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  margin: 44px 0 16px;
  padding-left: 16px;
  color: var(--nuit);
}
.m-main > h2::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.28em;
  bottom: 0.28em;
  width: 2px;
  border-radius: 2px;
  background: linear-gradient(180deg, var(--or), rgba(214, 159, 28, 0.25));
}

.m-sous { color: var(--texte-doux); margin: -8px 0 24px; line-height: 1.7; }
.m-vide { color: var(--text-dim); font-style: italic; }
.m-note { color: var(--text-dim); font-size: 0.88rem; max-width: 680px; line-height: 1.7; }
.m-aide { margin: 20px 0 0; font-size: 0.88rem; color: var(--text-dim); text-align: center; }
.m-indice { display: block; margin-top: 6px; font-size: 0.82rem; color: var(--text-dim); }
.mono { font-family: ui-monospace, Consolas, monospace; font-size: 0.92em; }

/* style.css ne définit pas de couleur de lien globale — le site public n'a que
   des liens boutons ou de navigation. Ici il y a de vrais liens dans le texte :
   sans cette règle ils repartaient en bleu par défaut du navigateur.
   Pas de soulignement permanent : un texte criblé de traits dorés fait daté. */
/* Un bouton qui doit se lire comme le lien textuel voisin — « renvoyer la
   confirmation » dans une bannière, par exemple. Une vraie `<form>` est
   nécessaire dessous (l'action modifie un état côté serveur), mais elle ne
   doit pas avoir l'air d'un bouton pour autant. */
.m-lien-bouton {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  color: var(--or-texte);
  text-decoration: underline;
  cursor: pointer;
}

.m-main a:not(.cta-button),
.m-pied a {
  color: var(--or-texte);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s ease, color 0.2s ease;
}
.m-main a:not(.cta-button):hover,
.m-pied a:hover { border-bottom-color: rgba(214, 159, 28, 0.6); }

/* ---------- Barre : compléments au .site-nav du site ---------- */

.m-qui { color: var(--text-dim); font-size: 0.85rem; }
.nav-actions form { margin: 0; }

.m-pied {
  display: flex;
  gap: 10px;
  justify-content: center;
  text-transform: none;
  letter-spacing: 0;
  font-size: 0.85rem;
}

/* ---------- Cartes ---------- */

/* .card vient de style.css. On n'ajoute que la variante large. */
.card.large { max-width: 560px; }

/* Dans les modales du site public, .card est un conteneur et le <form> qu'il
   contient récupère `text-align: left`. Ici la carte EST le formulaire, et
   `.card { text-align: center }` l'emporte sur `form { text-align: left }` par
   spécificité — les libellés se retrouvaient centrés au-dessus de leur champ.
   On rétablit l'alignement des champs, en gardant l'en-tête centré. */
form.card { text-align: left; }
form.card h1,
form.card .m-sous,
form.card .m-aide,
.card h1,
.card .m-sous,
.card .m-aide { text-align: center; }

/* ---------- Alertes ---------- */

.m-alerte {
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--surface);
  padding: 13px 16px;
  margin: 0 0 22px;
}
.m-alerte.ok { border-color: rgba(90, 171, 39, 0.6); }
.m-alerte.ko { border-color: var(--danger); color: var(--danger); }

/* ---------- Tuiles ---------- */

.m-tuiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 12px;
}
.m-tuile {
  background: linear-gradient(180deg, #ffffff, #eef7fe);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.m-tuile .v { font-size: 1.7rem; font-weight: 650; line-height: 1.15; word-break: break-all; }
.m-tuile .v.petit { font-size: 1.05rem; }
.m-tuile .e { color: var(--text-dim); font-size: 0.86rem; }

/* ---------- Packs ---------- */

/* 260 px de base : avec cinq packs dans un conteneur de ~930 px, des colonnes
   de 220 en donnent quatre et laissent le cinquième seul sur la ligne suivante.
   À 260 on obtient 3 + 2, nettement plus équilibré. */
.m-packs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 16px;
  align-items: stretch;
}

.m-pack {
  position: relative;
  background: linear-gradient(180deg, #ffffff, #eef7fe);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 26px 20px 20px;
  display: flex;
  flex-direction: column;
  text-align: center;
}
/* Le bouton reste collé au bas quelle que soit la longueur de l'accroche :
   sans ça, les boutons d'une même rangée seraient en escalier. */
.m-pack .cta-button { margin-top: auto; }

.m-pack.populaire { border-color: rgba(214, 159, 28, 0.6); }
.m-pack-ruban {
  position: absolute;
  top: -11px;
  left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(180deg, var(--or-clair), var(--or-fonce));
  color: #fff;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 4px 13px;
  border-radius: 999px;
  white-space: nowrap;
}

.m-pack-nom {
  font-family: "Cinzel Decorative", "Trebuchet MS", serif;
  font-size: 1.15rem;
  margin: 0 0 10px;
  color: var(--or-texte);
}

/* Les hauteurs minimales alignent prix, badges et mentions d'une carte à
   l'autre. Sans elles, une accroche de trois lignes contre deux, ou un pack
   sans bonus, décalent tout le bloc du dessous. */
.m-pack-accroche {
  color: var(--text-dim);
  font-size: 0.87rem;
  line-height: 1.5;
  margin: 0 0 18px;
  min-height: 4.5em;
}
.m-pack-prix { font-size: 1.75rem; font-weight: 700; line-height: 1.1; }
.m-pack-points { margin-top: 6px; font-size: 0.95rem; color: var(--text); min-height: 3.2em; }
.m-pack-bonus {
  display: inline-block;
  margin-top: 6px;
  padding: 3px 10px;
  border-radius: 999px;
  border: 1px solid rgba(90, 171, 39, 0.6);
  color: var(--emerald);
  font-size: 0.76rem;
  white-space: nowrap;
}
.m-pack-dispo {
  margin: 14px 0 18px;
  font-size: 0.8rem;
  color: var(--text-dim);
  display: flex;
  align-items: center;
  gap: 6px;
  justify-content: center;
}
.m-pack-dispo span { color: var(--emerald); }

/* ---------- Paliers de fidélité ---------- */

/* Le bloc reprend le vocabulaire visuel des cartes de packs — même fond, même
   rayon, même bordure — et ne se distingue que par le filet doré du haut. Il
   annonce sans ouvrir un second langage graphique. */
/* Sélecteur préfixé par .m-main pour peser 0-1-1 : la remise à zéro des
   <section> en haut de ce fichier annule sinon le rembourrage de ce bloc, qui
   est bien un <section> et ne porte pas `.m-section`. */
.m-main .m-palier {
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, #ffffff, #eef7fe);
  border: 1px solid rgba(214, 159, 28, 0.45);
  border-radius: var(--radius);
  padding: 22px 24px 20px;
  margin: 0 0 26px;
  box-shadow: inset 0 1px 0 #fff, 0 8px 24px rgba(12, 50, 80, 0.12);
}
.m-palier::before {
  content: '';
  position: absolute;
  inset: 0 0 auto;
  height: 3px;
  background: linear-gradient(90deg,
    rgba(214, 159, 28, 0) 0%,
    var(--or-clair) 30%,
    var(--or-fonce) 70%,
    rgba(214, 159, 28, 0) 100%);
}

.m-palier-entete {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
}

.m-palier-eyebrow {
  margin: 0;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--or-texte);
}

.m-palier-nom {
  font-family: "Cinzel Decorative", "Trebuchet MS", serif;
  font-size: 1.6rem;
  line-height: 1.15;
  margin: 4px 0 0;
  color: var(--nuit);
}

.m-palier-bonus { text-align: right; }
.m-palier-bonus-valeur {
  display: block;
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--emerald);
  line-height: 1.1;
}
.m-palier-bonus-legende {
  display: block;
  font-size: 0.76rem;
  color: var(--text-dim);
}

.m-palier-chiffres {
  margin: 18px 0 8px;
  font-size: 0.95rem;
  color: var(--texte-doux);
}
.m-palier-chiffres strong { color: var(--nuit); font-size: 1.05rem; }

/* Piste et remplissage : la largeur est posée en style en ligne par le gabarit,
   à partir d'un pourcentage calculé côté serveur. */
.m-palier-barre {
  height: 12px;
  border-radius: 999px;
  background: rgba(18, 58, 107, 0.1);
  border: 1px solid var(--border);
  overflow: hidden;
}
.m-palier-barre span {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--or-clair), var(--or-fonce));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55);
  transition: width 0.4s ease;
}
.m-palier-barre.max span {
  background: linear-gradient(90deg, var(--or-fonce), var(--or-clair), var(--or-fonce));
}

.m-palier-suite {
  margin: 12px 0 0;
  font-size: 0.92rem;
  color: var(--texte-doux);
  line-height: 1.6;
}
.m-palier-prochain {
  display: inline-block;
  padding: 2px 9px;
  border-radius: 999px;
  border: 1px solid rgba(90, 171, 39, 0.5);
  color: var(--emerald);
  font-size: 0.82rem;
  font-weight: 700;
}

.m-palier-note {
  margin: 14px 0 0;
  padding-top: 12px;
  border-top: 1px solid var(--border);
  font-size: 0.8rem;
  color: var(--text-dim);
  line-height: 1.6;
}

/* Variante hors session : le barème, sans palier attribué. */
.m-palier-invite { margin: 8px 0 16px; color: var(--texte-doux); line-height: 1.6; }
.m-palier-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.m-palier-liste li {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  padding: 7px 0;
  border-top: 1px solid var(--border);
  font-size: 0.88rem;
}
.m-palier-puce { font-weight: 700; color: var(--nuit); min-width: 92px; }
.m-palier-seuil { flex: 1; color: var(--text-dim); }
.m-palier-gain { font-weight: 700; color: var(--emerald); }

/* Détail du crédit sur une carte de pack. */
.m-pack-detail {
  margin: 10px 0 4px;
  padding: 10px 12px;
  border-radius: 10px;
  background: rgba(214, 159, 28, 0.09);
  border: 1px solid rgba(214, 159, 28, 0.35);
  font-size: 0.84rem;
  line-height: 1.55;
  color: var(--texte-doux);
}
.m-pack-detail .l { display: block; }
.m-pack-detail .plus { color: var(--emerald); font-weight: 600; }
.m-pack-detail .plus em { font-style: normal; opacity: 0.75; }
.m-pack-detail .total { color: var(--nuit); }
.m-pack-detail .total strong { font-size: 1.02rem; }
.m-pack-detail.neutre {
  background: none;
  border: 0;
  padding: 0;
  color: var(--text-dim);
}
.m-pack-detail.neutre em { font-style: normal; color: var(--or-texte); }

/* ---------- Récapitulatif d'achat ---------- */

.m-recap {
  max-width: 540px;
  background: linear-gradient(180deg, #ffffff, #eef7fe);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 28px;
}
.m-recap-tete {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  border-bottom: 1px solid var(--trait);
  padding-bottom: 16px;
}
.m-recap-tete h2 {
  margin: 0;
  font-family: "Cinzel Decorative", "Trebuchet MS", serif;
  color: var(--or-texte);
  font-size: 1.3rem;
}
.m-recap-prix { font-size: 1.5rem; font-weight: 700; }

.m-recap-lignes { margin: 18px 0 6px; }
.m-recap-lignes > div {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 9px 0;
}
.m-recap-lignes dt { color: var(--text-dim); font-size: 0.9rem; }
.m-recap-lignes dd { margin: 0; text-align: right; }
.m-recap-bonus { color: var(--emerald); font-weight: 600; }
/* Le total se détache des lignes de détail : c'est le seul chiffre que le
   joueur doit retenir avant de payer. */
.m-recap-lignes .m-recap-total {
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  margin: 4px 0;
}
.m-recap-lignes .m-recap-total dt { color: var(--nuit); font-weight: 600; }
.m-recap-lignes .m-recap-total strong { font-size: 1.1rem; }
.m-indice-inline { display: block; font-size: 0.76rem; color: var(--text-dim); }

.m-recap h3 { font-size: 1rem; margin: 24px 0 12px; }
.m-paiements { display: grid; gap: 10px; margin-top: 0; }
.m-paiements .cta-button { margin-top: 0; }

/* ---------- Acceptation des conditions ---------- */

/*
  Case à cocher et son libellé. La case garde sa taille native et ne rétrécit
  pas quand le texte passe sur plusieurs lignes : `align-items: start` la cale
  sur la première ligne, `flex: none` l'empêche d'être comprimée.

  Le libellé enveloppe la case : cliquer sur le texte coche, ce qui double la
  surface utile sur mobile. Les liens vers les documents restent cliquables et
  s'ouvrent dans un nouvel onglet, pour ne pas perdre une commande en cours.
*/
.m-conditions { display: grid; gap: 10px; margin: 4px 0 16px; }

.m-consentement {
  display: flex;
  align-items: start;
  gap: 10px;
  margin: 14px 0 4px;
  font-size: 0.86rem;
  line-height: 1.5;
  font-weight: 400;
  cursor: pointer;
}
.m-conditions .m-consentement { margin: 0; }
.m-consentement input {
  flex: none;
  width: 18px;
  height: 18px;
  margin: 1px 0 0;
  accent-color: var(--or, #d69f1c);
  cursor: pointer;
}
.m-consentement a { text-decoration: underline; text-underline-offset: 2px; }
.m-mode-test {
  display: inline-block;
  margin-left: 8px;
  padding: 1px 8px;
  border-radius: 999px;
  background: rgba(12, 50, 80, 0.14);
  font-size: 0.72rem;
  font-weight: 500;
}

/* ---------- Étapes du vote ---------- */

.m-etapes { list-style: none; counter-reset: etape; padding: 0; margin: 22px 0 0; }
.m-etapes li {
  counter-increment: etape;
  position: relative;
  padding-left: 42px;
  margin-bottom: 24px;
}
.m-etapes li::before {
  content: counter(etape);
  position: absolute;
  left: 0;
  top: 0;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid rgba(214, 159, 28, 0.55);
  color: var(--or-texte);
  display: grid;
  place-items: center;
  font-weight: 650;
  font-size: 0.9rem;
}
.m-etapes .cta-button { max-width: 340px; margin-top: 10px; }
.m-etapes form { margin: 0; }

/* ---------- Tableaux ---------- */

/* Un tableau large défile dans son propre conteneur : la page, elle, ne doit
   jamais défiler horizontalement. */
.m-scroll { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius); }
.m-table { width: 100%; border-collapse: collapse; background: #ffffff; }
.m-table th, .m-table td { padding: 10px 14px; text-align: left; white-space: nowrap; }
.m-table thead th {
  background: #e3f0fb;
  color: var(--text-dim);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  border-bottom: 1px solid var(--border);
}
.m-table tbody tr + tr td { border-top: 1px solid rgba(18, 58, 107, 0.1); }

.m-jeton {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 0.8rem;
  border: 1px solid var(--border);
  color: var(--text-dim);
}
.m-jeton.ok { color: var(--emerald); border-color: rgba(90, 171, 39, 0.55); }
.m-jeton.ko { color: var(--danger); border-color: rgba(196, 52, 42, 0.5); }

/* ---------- Apparition ---------- */

@keyframes m-entree {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

.m-main > * { animation: m-entree 0.55s cubic-bezier(0.22, 0.61, 0.36, 1) both; }
.m-main > *:nth-child(2) { animation-delay: 0.06s; }
.m-main > *:nth-child(3) { animation-delay: 0.12s; }
.m-main > *:nth-child(4) { animation-delay: 0.18s; }

/* Comme sur la page d'accueil : on coupe l'animation mais on force l'état
   final, sinon le contenu resterait invisible. */
@media (prefers-reduced-motion: reduce) {
  .m-main > * { animation: none; opacity: 1; transform: none; }
}

/* ---------- Écrans étroits ---------- */

@media (max-width: 700px) {
  .m-main { padding: 26px 18px 48px; }
  .m-qui { display: none; } /* le nom du compte est déjà sur la page */
  .m-recap { padding: 22px 18px; }
  .m-etapes li { padding-left: 36px; }
}


/* La tuile des points de vote est devenue un lien : elle doit s'annoncer
   cliquable sans changer de taille ni de place dans la rangee. */
.m-tuile-lien {
  text-decoration: none;
  border-bottom: 0;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.m-tuile-lien:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(12, 50, 80, 0.18);
}
.m-tuile-fleche {
  display: inline-block;
  margin-left: 4px;
  transition: transform 0.15s ease;
}
.m-tuile-lien:hover .m-tuile-fleche { transform: translateX(3px); }


/* =========================================================
   LES COMPTES DE JEU D'UN COMPTE WEB

   Une grille de cartes, une par compte, plus les emplacements encore libres.
   Voir qu'il reste de la place est une information en soi : la grille va donc
   jusqu'au plafond au lieu de s'arrêter aux comptes existants.

   `auto-fill` et non `auto-fit` : avec deux comptes sur six, `auto-fit`
   étirerait les deux cartes sur toute la largeur et l'on ne verrait plus qu'il
   reste quatre places. `auto-fill` garde les colonnes vides en réserve, et les
   cartes conservent leur taille.
========================================================= */

/* Pas de marge propre ici : l'espacement entre blocs appartient à `.m-section`,
   que cette section porte aussi. Deux règles de même poids qui règlent la même
   marge, c'est le piège où l'ordre du fichier décide à notre place. */

.m-compte-nb {
  margin-left: 8px;
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
  font-size: 0.8rem;
  font-weight: 500;
  opacity: 0.65;
}

.m-grille-comptes {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 16px;
  margin-top: 14px;
}

.m-carte-compte {
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: var(--surface);
  border: 1px solid rgba(12, 50, 80, 0.12);
  border-radius: var(--radius);
  padding: 18px;
  box-shadow: 0 4px 14px rgba(12, 50, 80, 0.08);
}

.m-carte-compte h3 {
  margin: 0;
  font-size: 1.05rem;
  overflow-wrap: anywhere;
}

.m-carte-compte header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
}

/* Le compte actif porte un liseré, pas un fond : un aplat ferait perdre aux
   cartes leur relief commun, et l'on ne saurait plus les comparer. */
.m-carte-compte.actif {
  border-color: rgba(47, 138, 232, 0.55);
  box-shadow: 0 4px 14px rgba(12, 50, 80, 0.08), inset 3px 0 0 #2f86e8;
}

/* Un emplacement libre est en attente, pas en défaut : trait discontinu, fond
   transparent, et il ne pèse pas visuellement autant qu'un compte réel. */
.m-carte-compte.m-libre {
  background: transparent;
  border-style: dashed;
  border-color: rgba(12, 50, 80, 0.22);
  box-shadow: none;
  justify-content: center;
  text-align: center;
}
.m-carte-compte.m-libre h3 { opacity: 0.75; font-weight: 600; }

.m-personnages {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 4px;
}
.m-personnages li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding: 5px 9px;
  border-radius: 8px;
  background: var(--surface-haut);
  font-size: 0.9rem;
}
.m-perso-nom { font-weight: 600; overflow-wrap: anywhere; }
.m-perso-niveau {
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
  font-size: 0.78rem;
  opacity: 0.7;
  white-space: nowrap;
}

/* Le bouton d'une carte se colle en bas, pour que toutes les cartes d'une
   rangée l'alignent quel que soit leur nombre de personnages. */
.m-carte-compte form,
.m-carte-compte > .cta-button { margin-top: auto; }

/*
  Les deux raccourcis de mouvement d'une carte : « envoyer ici » et « retirer
  d'ici ».

  Dessinés comme des LIENS et non comme des boutons, à dessein. La cagnotte est
  un solde unique pour l'ensemble des comptes : six boutons identiques, un par
  carte, laisseraient croire que chaque carte détient sa propre somme. Et un
  bouton ne pourrait pas faire le travail de toute façon — un mouvement a
  besoin d'un montant, que seul un formulaire demande.

  Le filet qui les sépare du reste suffit à les rendre trouvables sans leur
  donner le poids de l'action principale de la carte, qui reste « Agir sur ce
  compte ».
*/
.m-carte-mouvements {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: auto;
  padding-top: 10px;
  border-top: 1px solid rgba(12, 50, 80, 0.1);
  font-size: 0.84rem;
  text-align: center;
}

/*
  Quand le bloc suit le bouton, c'est le BOUTON qui absorbe l'espace libre —
  il porte déjà `margin-top: auto` plus haut. Laisser les deux en `auto`
  partagerait cet espace entre eux et les écarterait au lieu de les coller en
  bas de carte.
*/
.m-carte-compte form + .m-carte-mouvements { margin-top: 10px; }

/* La flèche de sens, dans l'historique : assez large pour que les deux
   colonnes de libellés s'alignent malgré « ← » et « → ». */
.m-sens {
  display: inline-block;
  width: 1em;
  opacity: 0.6;
}

@media (max-width: 620px) {
  .m-grille-comptes { grid-template-columns: 1fr; }
}


/* =========================================================
   LA CAGNOTTE — solde du compte web et transfert vers le jeu
   =========================================================

   Un seul formulaire pour six destinations possibles. Le montant et la
   destination sont côte à côte parce qu'ils forment une seule phrase —
   « combien, et vers où » — et qu'un transfert dont on ne voit qu'une moitié
   à l'écran invite à l'erreur.
========================================================= */

.m-transfert-champs {
  display: grid;
  /* 150px pour le montant : un nombre de points n'a pas besoin de plus, et le
     reste va au nom de compte, qui peut être long. */
  grid-template-columns: 150px minmax(0, 1fr);
  gap: 14px 16px;
  align-items: start;
  margin-bottom: 18px;
}

/* Les champs d'un formulaire de carte sont pleine largeur dans ui.css ; ici ils
   doivent tenir dans leur colonne de grille. */
.m-transfert-champs input,
.m-transfert-champs select { width: 100%; }

.m-transfert-champs label {
  display: block;
  margin-bottom: 6px;
  font-size: 0.88rem;
  font-weight: 600;
}

/* Bouton à sa largeur de contenu : « Transférer ces points » pleine largeur
   aurait le poids d'une validation de commande, alors que le geste est courant
   et réversible par un nouveau transfert. */
.m-transfert .cta-button { width: auto; }

/* Titre de second rang à l'intérieur d'une section encadrée. `.m-section > h2`
   porte le filet du cadre ; un h3 n'en veut pas, il ne fait que regrouper. */
.m-sous-titre {
  margin: 26px 0 10px;
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  color: var(--texte-doux);
}

@media (max-width: 620px) {
  .m-transfert-champs { grid-template-columns: 1fr; }
  .m-transfert .cta-button { width: 100%; }
}


/* =========================================================
   LES SECTIONS ENCADRÉES

   Les blocs de « Mon compte » flottaient directement sur le fond étoilé du
   site : un titre, du contenu, un autre titre — rien ne disait où une section
   finissait et où la suivante commençait. Sur un fond chargé, c'est le cadre
   qui fait la lecture.

   UN SEUL CONTENEUR, RÉUTILISÉ. Il reprend le traitement des cartes déjà
   présentes (`.card`, `.m-tuile`) plutôt que d'inventer une troisième
   apparence, et il est ajouté à leur liste dans nocturne.css : le thème sombre
   le repeint du même coup, sans règle en double.

   Le titre est DANS le cadre, séparé par un filet. Posé au-dessus, il se
   serait détaché de ce qu'il annonce — c'est précisément le défaut qu'on
   corrige.
========================================================= */

/*
  LA SÉPARATION SE FAIT PAR L'ÉCART, PAS SEULEMENT PAR LE TRAIT.

  Première version : fond de carte et bordure de 1 px, comme les tuiles. Appliqué
  correctement, et pourtant illisible — en thème sombre le panneau vaut
  rgba(16,28,50,.86) et sa bordure rgba(120,170,255,.16), c'est-à-dire du bleu
  nuit discret sur un fond étoilé bleu nuit. Deux sections de suite se lisaient
  comme un seul bloc continu.

  Trois corrections, et la première est la plus importante :

    · l'écart passe à 30 px. C'est lui qui sépare, bien plus que le trait : deux
      panneaux collés restent deux panneaux collés, si bien dessinés soient-ils ;
    · un FILET DORÉ en tête de chaque section. C'est le vocabulaire du site — le
      pied de page et les cadres en portent un — et l'or est la seule couleur qui
      tranche franchement sur ce fond, dans les deux thèmes ;
    · le coin supérieur suit le filet : sans cela, la barre dorée déborderait de
      l'arrondi.

  Et l'écart ne s'est quand même pas affiché, pour une raison qui n'a rien à voir
  avec les valeurs ci-dessous : la remise à zéro `.m-main section` en haut de ce
  fichier pèse 0-1-1 et écrasait purement et simplement le `margin` comme le
  `padding` d'ici. Elle porte désormais `:not(.m-section)`. Si un écart disparaît
  encore un jour, chercher d'abord un sélecteur plus lourd, pas une valeur trop
  petite.
*/
.m-section {
  background: var(--surface);
  border: 1px solid var(--border);
  border-top: 2px solid var(--ui-or);
  border-radius: var(--radius);
  padding: 20px 24px 24px;
  margin: 0 0 30px;
}

/* La dernière section n'a personne à repousser : l'écart du bas est celui de
   `.m-main`, et le doubler laisserait un vide avant le pied de page. */
.m-section:last-of-type { margin-bottom: 0; }

.m-section > h2 {
  margin: 0 0 18px;
  padding-bottom: 12px;
  /* Le filet s'étend d'un bord à l'autre du cadre, rembourrage compris : un
     trait qui s'arrête avant les bords donne l'impression d'un titre mal calé. */
  margin-inline: -24px;
  padding-inline: 24px;
  border-bottom: 1px solid var(--border);
  font-size: 1.15rem;
}

/* Le premier élément de contenu n'a pas à repousser le filet. */
.m-section > h2 + * { margin-top: 0; }

/* Un formulaire encadré n'a plus besoin de sa propre carte : deux cadres
   emboîtés font un bord inutile. Il s'étale dans la section. */
.m-section > .card.large {
  max-width: none;
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  padding: 0;
  text-align: left;
}
.m-section > .card.large .m-sous { text-align: left; }

@media (max-width: 620px) {
  .m-section { padding: 18px 16px 20px; }
  .m-section > h2 { margin-inline: -16px; padding-inline: 16px; }
}