/* ==========================================================================
   CHARTE DE LA FORMATION AGI — Direction A · Régie (Version 1.0)
   Source de vérité : STYLE.md
   ========================================================================== */

:root,
html[data-mode="clair"] {
  /* 1. Couleurs de structure */
  --nuit: #0F2C52;
  --bleu: #1F5FAE;
  --encre: #15233B;
  --ardoise: #4A5568;
  --brume: #E8F0FA;
  --bordure: #DDE3EC;
  --fond: #F7F8FA;
  --surface: #FCFDFE;

  /* 2. Statuts pédagogiques */
  --regle-couleur: #0E7C7B;
  --regle-fond: #E3F2F1;
  --regle-texte: #0B5F5E;

  --attention-couleur: #C98A1A;
  --attention-fond: #FDF1DC;
  --attention-texte: #8A5A00;

  --piege-couleur: #B8432F;
  --piege-fond: #FBE9E5;
  --piege-texte: #9A3524;

  --reussi-couleur: #2E7D4F;
  --reussi-fond: #E6F2EA;
  --reussi-texte: #24653F;

  /* 3. Typographie */
  --font-titres: 'Manrope', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-texte: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-chiffres: 'JetBrains Mono', monospace;

  /* 4. Échelle Document · Téléphone */
  --taille-titre-page: 28px;
  --taille-titre-bloc: 20px;
  --taille-texte: 17px;
  --taille-legende: 14px;
  --taille-surtitre: 13px;

  /* 5. Rayons */
  --rayon-bouton: 10px;
  --rayon-encadre: 12px;
  --rayon-carte: 16px;
  --rayon-badge: 999px;
}

/* Mode Projection (Sombre) */
html[data-mode="projection"] {
  --fond: #0F2C52;
  --surface: #163A66;
  --encre: #F7F8FA;
  --ardoise: #C9D6E8;
  --bleu: #9FC1EC;
  --bordure: #2A4E7E;
  --brume: #1E497C;

  /* Échelle Projection (Rien sous 24 px) */
  --taille-titre-page: 72px;
  --taille-titre-bloc: 44px;
  --taille-texte: 32px;
  --taille-legende: 24px;
  --taille-surtitre: 28px;
}

/* Base & Mobile d'abord */
*, *::before, *::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0 16px;
  background-color: var(--fond);
  color: var(--encre);
  font-family: var(--font-texte);
  font-size: var(--taille-texte);
  line-height: 1.5;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

.page {
  max-width: 1120px;
  margin: 0 auto;
  padding: 24px 0 64px;
}

/* Typographie */
h1, h2, h3, h4 {
  font-family: var(--font-titres);
  font-weight: 700;
  line-height: 1.1;
  color: var(--encre);
  margin-top: 1.4em;
  margin-bottom: 0.5em;
}

h1 {
  font-size: var(--taille-titre-page);
  margin-top: 0.25em;
}

h2 {
  font-size: var(--taille-titre-bloc);
}

p, li {
  max-width: 68ch;
}

a {
  color: var(--bleu);
  text-decoration: underline;
  text-underline-offset: 3px;
}

code, pre, .chiffre, .lot, .montant, .date, td.montant {
  font-family: var(--font-chiffres);
  font-weight: 500;
}

.surtitre {
  display: block;
  font-family: var(--font-titres);
  font-size: var(--taille-surtitre);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--bleu);
  margin-bottom: 6px;
}

/* Composants */
.carte {
  background-color: var(--surface);
  border: 1px solid var(--bordure);
  border-radius: var(--rayon-carte);
  padding: 20px;
  box-shadow: 0 2px 6px rgba(15, 44, 82, 0.04);
  margin-bottom: 16px;
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-texte);
  font-size: 13px;
  font-weight: 600;
  padding: 4px 12px;
  border-radius: var(--rayon-badge);
  background-color: var(--brume);
  color: var(--encre);
}

.badge.regle {
  background-color: var(--regle-fond);
  color: var(--regle-texte);
}

.badge.attention {
  background-color: var(--attention-fond);
  color: var(--attention-texte);
}

.badge.piege {
  background-color: var(--piege-fond);
  color: var(--piege-texte);
}

.badge.reussi {
  background-color: var(--reussi-fond);
  color: var(--reussi-texte);
}

.action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 10px 18px;
  font-family: var(--font-texte);
  font-size: 15px;
  font-weight: 600;
  border-radius: var(--rayon-bouton);
  border: 1px solid var(--bordure);
  background-color: var(--surface);
  color: var(--encre);
  cursor: pointer;
  text-decoration: none;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}

.action.principale {
  background-color: var(--bleu);
  border-color: var(--bleu);
  color: #FCFDFE;
}

/* Encadrés de statut */
.statut {
  border-radius: var(--rayon-encadre);
  padding: 14px 18px;
  margin: 16px 0;
  border-left: 4px solid var(--bleu);
  background-color: var(--brume);
  color: var(--encre);
}

.statut strong:first-child {
  font-family: var(--font-titres);
  font-weight: 800;
}

.statut.regle {
  border-left-color: var(--regle-couleur);
  background-color: var(--regle-fond);
  color: var(--regle-texte);
}

.statut.attention {
  border-left-color: var(--attention-couleur);
  background-color: var(--attention-fond);
  color: var(--attention-texte);
}

.statut.piege {
  border-left-color: var(--piege-couleur);
  background-color: var(--piege-fond);
  color: var(--piege-texte);
}

.statut.reussi {
  border-left-color: var(--reussi-couleur);
  background-color: var(--reussi-fond);
  color: var(--reussi-texte);
}

/* Tableaux */
table {
  width: 100%;
  border-collapse: collapse;
  margin: 16px 0;
  background-color: var(--surface);
  border: 1px solid var(--bordure);
  border-radius: var(--rayon-encadre);
  overflow: hidden;
}

th, td {
  padding: 10px 14px;
  text-align: left;
  border-bottom: 1px solid var(--bordure);
}

th {
  background-color: var(--brume);
  font-family: var(--font-titres);
  font-weight: 700;
  font-size: 14px;
  color: var(--encre);
}

td.montant {
  text-align: right;
  font-family: var(--font-chiffres);
  font-weight: 500;
}

/* Jauge */
.jauge {
  width: 100%;
  height: 10px;
  background-color: var(--brume);
  border-radius: var(--rayon-badge);
  overflow: hidden;
}

.jauge > span {
  display: block;
  height: 100%;
  background-color: var(--bleu);
  border-radius: var(--rayon-badge);
}