/* LES COMPOSANTS DU SOCLE — un style par RÔLE, pas par endroit.
 *
 * Partagé par toutes les pages qu'on touche : le pupitre (Jouer, Messages,
 * Composer), les fiches et le téléphone des joueurs. Chaque page garde ses
 * jetons de couleur — son `:root` — et le thème de la campagne les redéfinit
 * par-dessus ; ce fichier ne fait que les employer. Il se charge APRÈS la
 * feuille de la page et AVANT le thème.
 *
 * Avant lui, presque tout ce qui se touchait était le même rectangle sombre à
 * bord fin : le bouton qui lance une scène, un palier de luminosité et
 * « Relire le dossier » se ressemblaient. Le rôle d'un contrôle doit se lire
 * avant son libellé — dans le noir, d'un coup d'œil.
 *
 * ── Quel rôle pour quel contrôle ───────────────────────────────────────
 *
 *   .bouton.principal   L'action pour laquelle on est sur cet écran. UNE
 *                       seule visible à la fois. Plein, à l'accent.
 *                       Lancer maintenant · Envoyer · Terminer le masque
 *   .bouton.secondaire  Une action ordinaire. Contour et texte à l'accent.
 *                       Enregistrer · Épingler · Silence · messages préparés
 *   .bouton.discret     L'utilitaire, qu'on ne touche pas en jouant. Contour
 *                       neutre, texte faible, plus petit.
 *                       Relire le dossier · Tester le pont · Annuler · Fermer
 *   .bouton.danger      Un effet large et immédiat, protégé par un appui
 *                       maintenu. Teinté de --ko.
 *                       Tout rallumer · Effacer les fils
 *   .choix              UNE valeur parmi plusieurs : des segments soudés, le
 *                       choisi est plein. Luminosité, volume, fondu, durée,
 *                       Veille / Noir, Persistante / Temporaire…
 *   .puce               PLUSIEURS à cocher : des pastilles arrondies, cochée =
 *                       pleine. Les destinataires d'un message.
 *   .carte              Lancer ou ouvrir quelque chose de nommé : une surface,
 *                       un titre, un détail. `.carte.lien` y ajoute un chevron :
 *                       elle mène ailleurs au lieu d'agir.
 *                       Scènes · conversations · fiches · personnages
 *   .onglets, .retour   Changer de page : un soulignement, un chevron — pas
 *                       une boîte, pour qu'on ne les prenne pas pour des actions.
 *   .bouton-icone       Un seul symbole, rond. + · ✎ · ⇄
 *
 * Une TAILLE se combine à un rôle, sans le changer : `.large` (toute la
 * largeur), `.compact` (dans une barre ou un en-tête).
 *
 * Les sélecteurs de CONTENU — vignettes de médias, pastilles de couleur —
 * gardent leur aspect dans la feuille de leur page : c'est l'image ou la
 * couleur qui doit se lire, pas le contrôle.
 *
 * LA RÈGLE : un nouveau contrôle prend un de ces rôles. S'il n'en trouve
 * aucun, c'est un rôle qui manque ici — pas un style de plus à inventer sur
 * place, qui ramènerait l'uniformité ou le désordre d'avant.
 */

/* Le texte posé sur l'accent et sur le rouge. Un thème dont l'accent serait
   sombre les redéfinit. */
:root {
  --sur-accent: #000;
  --sur-danger: #fff;
}

/* ─── les états communs à tous les rôles ──────────────────────────────── */

/* L'APPUI. Les pages retirent le voile bleu du navigateur
   (`-webkit-tap-highlight-color`) : il faut rendre l'appui nous-mêmes, sinon
   rien ne bouge à l'écran avant que l'état revienne du serveur. `.danger` est
   exclu : sa barre de progression est son retour, et se contracter pendant
   deux secondes d'appui maintenu se lirait comme un défaut. */
button:not(.danger):active, a:active, summary:active {
  transform: scale(.97);
  filter: brightness(1.3);
}

/* Le focus au clavier : un anneau à l'accent, celui du navigateur se perd sur
   nos fonds sombres. */
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ─── les boutons : quatre rôles, une même forme ──────────────────────── */

.bouton {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 52px; padding: 0 18px;
  border: 1px solid transparent; border-radius: var(--rayon);
  font: 600 15px/1.2 var(--police); text-align: center; text-decoration: none;
  cursor: pointer;
}
.bouton:disabled { cursor: not-allowed; }
.bouton.large { display: flex; width: 100%; }
.bouton.compact { min-height: 44px; padding: 0 14px; font-size: 14px; }

/* Le plein à l'accent porte toute la hiérarchie à lui seul : pas d'ombre
   colorée en dessous. Sur un fond sombre, une lueur d'accent n'est qu'une
   décoration — et la plus reconnaissable des interfaces assemblées. */
.bouton.principal {
  min-height: 56px;
  background: var(--accent); color: var(--sur-accent); border-color: var(--accent);
  font-size: 16px;
}
.bouton.principal.compact { min-height: 44px; font-size: 14px; }
/* Pas encore possible — « Choisis un destinataire » — : il s'éteint, sans
   disparaître, pour qu'on sache ce qu'il attend. */
.bouton.principal:disabled {
  background: var(--fond-creux); color: var(--texte-faible); border-color: var(--trait);
}

.bouton.secondaire { background: transparent; color: var(--accent); border-color: var(--accent); }

.bouton.discret {
  min-height: 44px; padding: 0 14px;
  background: transparent; color: var(--texte-faible); border-color: var(--trait);
  font-size: 14px;
}
/* Un discret qui bascule (« Repart du début ») : actif, il passe à l'accent. */
.bouton.discret.actif { color: var(--accent); border-color: var(--accent); }

.bouton.danger {
  position: relative; overflow: hidden;
  flex-direction: column; gap: 4px;
  min-height: 76px;
  background: color-mix(in srgb, var(--ko) 16%, var(--fond));
  border-color: color-mix(in srgb, var(--ko) 55%, var(--fond));
  color: var(--texte);
}
.bouton.danger b { font-size: 18px; letter-spacing: .06em; }
.bouton.danger small { font-size: 12px; font-weight: 400; opacity: .75; }
/* La barre de l'appui maintenu, remplie par le script de la page. */
.bouton.danger::before {
  content: ''; position: absolute; inset: 0 auto 0 0;
  width: var(--progression, 0);
  background: var(--ko); opacity: .4;
  transition: width .05s linear;
}
.bouton.danger > * { position: relative; }

/* ─── choisir : une valeur parmi plusieurs ────────────────────────────── */

/* Des segments SOUDÉS : le fond du groupe passe dans les interstices d'un
   pixel et dessine les séparations. `flex-wrap` : si la place manque (320 px),
   les segments passent à la ligne et le dernier rang s'étire, au lieu de
   pousser la page hors de l'écran. */
.choix {
  display: flex; flex-wrap: wrap; gap: 1px;
  background: var(--trait);
  border: 1px solid var(--trait); border-radius: var(--rayon);
  overflow: hidden;
}
.choix > button {
  flex: 1 1 auto; min-width: 48px; min-height: 48px; padding: 0 10px;
  background: var(--fond-creux); color: var(--texte);
  border: 0; border-radius: 0;
  font: 600 16px/1.1 var(--police);
}
.choix > button.actif { background: var(--accent); color: var(--sur-accent); }
/* « Éteindre », quand c'est le choix fait : rouge, l'état se lit de loin. */
.choix > button.eteindre.actif { background: var(--ko); color: var(--sur-danger); }

/* ─── cocher : plusieurs à la fois ────────────────────────────────────── */

.puce {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 0 16px;
  background: transparent; color: var(--texte);
  border: 1px solid var(--trait); border-radius: 999px;
  font: 600 15px/1 var(--police);
}
.puce.actif { background: var(--accent); color: var(--sur-accent); border-color: var(--accent); }

/* ─── les cartes : lancer ou ouvrir ───────────────────────────────────── */

.carte {
  display: flex; flex-direction: column; justify-content: center; gap: 3px;
  width: 100%; min-height: 64px; padding: 12px 16px;
  background: var(--fond-bloc); color: var(--texte);
  border: 1px solid var(--trait); border-radius: calc(var(--rayon) + 2px);
  font: inherit; text-align: left; text-decoration: none;
  cursor: pointer;
}
/* La taille du titre est une VARIABLE, pas une règle à surenchérir : une
   carte qui veut un titre plus grand (les conversations, à 20 px) la règle
   chez elle, sans combat de précision avec ce fichier, chargé après le sien. */
.carte > b:first-child { font-size: var(--carte-titre, 17px); }
.carte small { color: var(--texte-faible); font-size: 13px; }
.carte:disabled { opacity: .4; cursor: not-allowed; }
/* `.lien` : elle mène ailleurs. Un chevron à droite, dessiné plutôt qu'un
   caractère « › » dont la taille change d'un téléphone à l'autre. */
.carte.lien { position: relative; padding-right: 40px; }
.carte.lien::after {
  content: ''; position: absolute; top: 50%; right: 18px;
  width: 9px; height: 9px; margin-top: -5px;
  border-right: 2px solid var(--texte-faible); border-bottom: 2px solid var(--texte-faible);
  transform: rotate(-45deg);
}

/* ─── naviguer : onglets et retour ────────────────────────────────────── */

/* Des onglets SOULIGNÉS, pas des boîtes : ce sont des endroits, pas des
   actions. Marge latérale de 6 px seulement — avec 12, quatre onglets
   débordaient sur les téléphones de 360 px — et `wrap` : à 320 px, ou texte
   agrandi, le dernier passe dessous plutôt que de pousser la page. */
.onglets {
  display: flex; flex-wrap: wrap;
  margin: 12px 0 4px;
  border-bottom: 1px solid var(--trait);
}
.onglets a {
  position: relative; flex: 1;
  display: flex; align-items: center; justify-content: center;
  min-height: 48px; padding: 12px 6px;
  color: var(--texte-faible); text-decoration: none;
  font: 600 15px/1 var(--police);
  border-bottom: 3px solid transparent; margin-bottom: -1px;
}
.onglets a[aria-current="page"] { color: var(--texte); border-bottom-color: var(--accent); }

/* Le retour : un lien à l'accent précédé d'un chevron dessiné. */
.retour {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 44px; padding: 0 8px 0 2px;
  color: var(--accent); text-decoration: none;
  font: 600 15px/1 var(--police);
}
.retour::before {
  content: ''; width: 9px; height: 9px;
  border-left: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
}

/* ─── un seul symbole ─────────────────────────────────────────────────── */

.bouton-icone {
  display: inline-grid; place-items: center; flex: none;
  width: 48px; height: 48px; padding: 0;
  background: var(--fond-creux); color: var(--texte);
  border: 1px solid var(--trait); border-radius: 50%;
  font: 600 18px/1 var(--police); text-decoration: none;
  cursor: pointer;
}
/* Ouvert (le « + » d'une conversation) : à l'accent, on sait qu'on peut
   refermer en le retouchant. */
.bouton-icone[aria-expanded="true"] { color: var(--accent); border-color: var(--accent); }

/* ─── déplier ─────────────────────────────────────────────────────────── */

summary {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  min-height: 48px; padding: 12px 14px;
  list-style: none; cursor: pointer;
  background: var(--fond-bloc); color: var(--texte-faible);
  border: 1px solid var(--trait); border-radius: var(--rayon);
  font-size: 14px; font-weight: 600;
}
summary::-webkit-details-marker { display: none; }
/* Le chevron dit dans quel sens ça va s'ouvrir, et se retourne une fois ouvert. */
summary::after {
  content: ''; flex: none; width: 8px; height: 8px; margin-top: -4px;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
}
details[open] > summary { margin-bottom: 10px; }
details[open] > summary::after { margin-top: 4px; transform: rotate(-135deg); }

/* ─── masqué, c'est masqué ────────────────────────────────────────────── */

/* EN DERNIER, exprès. Chaque rôle ci-dessus pose un `display`, et une règle
   d'auteur l'emporte toujours sur l'attribut `hidden` du navigateur : sans
   ces lignes, « Ma fiche » ou la rangée des volumes resteraient affichés quand
   le script les masque — le bug de la barre « Terminer ». Placées après, à
   précision égale, elles gagnent. */
.bouton[hidden], .choix[hidden], .puce[hidden], .carte[hidden], .bouton-icone[hidden] { display: none; }