/* Montserrat auto-hebergee (police variable, poids 100-900 dans un seul
   fichier) - pas de dependance Google Fonts, cf. contexte RGPD/mineurs
   (eleves de classe, l'app ne doit pas envoyer leur IP a un tiers). */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('fonts/montserrat-variable.woff2') format('woff2');
}

/* Couche de marque sur Bootstrap 5 (voir DESIGN.md). On ne touche que
   --bs-primary et ses derives : le reste (success/danger/warning/gris)
   reste au defaut Bootstrap. */
:root {
  --bs-font-sans-serif: 'Montserrat', Arial, sans-serif;

  /* primary-emphasis (#156F55) sert de --bs-primary : fond avec texte
     blanc a taille normale, contraste verifie ~6,1:1 (AA). */
  --bs-primary: #156F55;
  --bs-primary-rgb: 21, 111, 85;
  --bs-primary-text-emphasis: #156F55;
  --bs-primary-bg-subtle: #D9F0E8;
  --bs-primary-border-subtle: #1B916C;
  --bs-link-color: #156F55;
  --bs-link-color-rgb: 21, 111, 85;
  --bs-link-hover-color: #0f4f3d;
  --bs-link-hover-color-rgb: 15, 79, 61;
}

body {
  font-family: var(--bs-font-sans-serif);
}

/* Titres en gras (conforme a DESIGN.md > Typography). Effet secondaire
   voulu : un titre en gras >= 18,66px passe le seuil "grand texte" WCAG
   (3:1) meme aux tailles h4-h6 - condition pour pouvoir leur appliquer
   .brand-accent sans casser le contraste AA. */
h1, h2, h3, h4, h5, h6 {
  font-weight: 700;
}

/* Jungle Green "vrai" (#1B916C) : reserve aux titres (voir regle
   ci-dessus, toujours en gras) - jamais au texte courant ni aux fonds
   avec texte blanc. Contraste ~3,95:1 sur blanc : suffisant pour du
   grand texte gras (seuil WCAG 3:1), insuffisant pour du texte normal
   (seuil 4,5:1). Voir DESIGN.md > Colors.
*/
.brand-accent {
  color: #1B916C;
}

.badge-self {
  background-color: var(--bs-primary-bg-subtle);
  color: var(--bs-primary-text-emphasis);
}

/* Pastille de couleur devant un nom (roster.js > nameDot) - purement
   decorative, le nom en texte reste toujours la vraie information. */
.name-dot {
  display: inline-block;
  width: 0.65rem;
  height: 0.65rem;
  min-width: 0.65rem;
  border-radius: 50%;
  margin-right: 0.5rem;
}

/* Pastille de resultat de manche (historique eleve + ecran admin-comme-
   joueur) : plus grande qu'un badge Bootstrap standard pour que le
   nombre de points gagnes saute aux yeux au lieu de se perdre dans la
   phrase ("+5 pt(s)." en texte courant). La couleur (text-bg-* applique
   a cote, cf. pointsPillVariant()) est derivee des points et non du
   choix : renforce visuellement la lecon du dilemme (cooperation
   mutuelle = solide, trahison mutuelle = mediocre, trahir un
   cooperateur = jackpot ou sanction selon le cote). */
.result-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 3rem;
  height: 3rem;
  padding: 0 0.75rem;
  border-radius: 999px;
  font-size: 1.25rem;
  font-weight: 700;
  flex-shrink: 0;
}

/* Bouton "Cooperer" : bleu franc (pas notre vert de marque, deja pris par
   --bs-primary) plutot que le rouge/vert classique - meilleure
   distinction pour les daltoniens deuteranopes/protanopes (rouge-vert
   confondus, bleu-rouge non). Construit via les variables --bs-btn-*
   consommees par le composant .btn de Bootstrap 5.3, exactement comme
   .btn-primary/.btn-danger le font en interne - pas de CSS ad-hoc. Le
   bleu vient de --bs-blue, deja fourni par Bootstrap et jamais surcharge
   (voir la regle "on ne touche qu'a --bs-primary" plus haut). */
.btn-cooperate {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--bs-blue);
  --bs-btn-border-color: var(--bs-blue);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #0b5ed7;
  --bs-btn-hover-border-color: #0a58ca;
  --bs-btn-focus-shadow-rgb: 49, 132, 253;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #0a58ca;
  --bs-btn-active-border-color: #0a53be;
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: var(--bs-blue);
  --bs-btn-disabled-border-color: var(--bs-blue);
}

/* Meme bleu que .btn-cooperate, applique en badge (historique) - pendant
   de .text-bg-danger (deja rouge par defaut) pour "Trahir". */
.text-bg-cooperate {
  color: #fff !important;
  background-color: var(--bs-blue) !important;
}

/* Bandeau d'onglets dans l'entete (meme fond que la navbar). Pattern
   personnalise plutot que .nav-tabs (pense pour un fond clair) ou
   .navbar-nav (pense pour un menu de navigation) : plus simple a
   controler pour un etat actif/inactif sur fond fonce. */
.header-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.header-tabs .nav-link {
  display: inline-block;
  background: none;
  border: none;
  border-bottom: 3px solid transparent;
  padding: 0.4rem 0.7rem;
  font-size: 0.9rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.7);
  cursor: pointer;
}
.header-tabs .nav-link:hover,
.header-tabs .nav-link:focus-visible {
  color: #fff;
}
.header-tabs .nav-link.active {
  color: #fff;
  border-bottom-color: #fff;
}