/* Charte graphique Tendè Academy — couleurs, polices, formes */
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@500;600;700&family=Source+Sans+3:wght@400;600;700&display=swap");

:root {
  /* Couleurs de marque */
  --marine-900: #031e40;  /* bleu nuit du logo : titres et texte */
  --marine-800: #0d2254;  /* fond des bannières (début du dégradé) */
  --marine-700: #143685;  /* fond des bannières (fin du dégradé) */
  --bleu-600:   #0057b0;  /* liens, éléments actifs */
  --bleu-50:    #eaf2fc;
  --or-500:     #d9a43d;  /* bouton principal (texte bleu nuit dessus) */
  --or-600:     #c08f16;
  --or-300:     #e6b94a;  /* mot doré sur bannière bleu nuit */
  --or-texte:   #8a5a00;  /* or lisible sur fond blanc */
  --or-50:      #fbf3e2;
  --vert-600:   #136a3c;  /* succès, feuille */
  --vert-500:   #1f9d55;
  --terre-600:  #a8502a;  /* motifs bogolan uniquement */

  /* Rôles */
  --surface: #ffffff;
  --surface-alt: #f4f7fb;
  --ink: #031e40;
  --ink-muted: #4a5876;
  --border: #dce3ee;
  --brand: #0057b0;
  --accent: #d9a43d;
  --on-accent: #031e40;
  --success: #136a3c;
  --danger: #b42318;
  --focus: #0057b0;

  /* Polices */
  --font-display: Poppins, "Segoe UI", system-ui, sans-serif;
  --font-body: "Source Sans 3", "Segoe UI", system-ui, sans-serif;

  /* Formes */
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-pill: 999px;
  --shadow-card: 0 6px 24px rgba(3, 30, 64, 0.08);
  --shadow-raised: 0 14px 40px rgba(3, 30, 64, 0.16);
}

body { font-family: var(--font-body); color: var(--ink); }
h1, h2, h3, h4, .btn, button { font-family: var(--font-display); }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }