/* ============================================================
   BASE.CSS — Athenia Academy
   Responsabilité : variables, thèmes, reset, typographie globale
   Ne contient PAS : mise en page, composants, animations
   ============================================================ */

/* ── VARIABLES CSS GLOBALES ─────────────────────────────── */

:root {
  /* Transitions globales */
  --transition-fast: 0.2s ease;

  /* Couleurs principales */
  --bg:          #FFFFFF;
  --bg2:         #F5F5F7;
  --bg3:         #EFEFF2;
  --surface:     rgba(255,255,255,0.86);
  --border:      rgba(29,29,31,0.10);
  --accent:            #00A86B;
  --accent2:           #007a4f;
  --home-green:        #00A86B;
  --home-green-bright: #00A86B;
  --accent-dim:  rgba(0,168,107,0.08);
  --text:        #1D1D1F;
  --text2:       #6E6E73;
  --text3:       #86868B;
  --hero-glow:   rgba(0,168,107,0.05);
  --card-bg:     #FFFFFF;
  --nav-bg:      rgba(255,255,255,0.82);
  --btn-text:    #FFFFFF;

  /* Hero overlay */
  --hero-overlay-l: rgba(240,248,240,0.75);
  --hero-overlay-r: rgba(240,248,240,0.2);

  /* Section "Le Problème" (flip cards) */
  --prob-coral:        #b83030;
  --prob-coral-light:  rgba(184,48,48,0.09);
  --prob-coral-border: rgba(184,48,48,0.22);
  --prob-coral-faint:  rgba(184,48,48,0.06);
  --prob-green-border: rgba(0,168,107,0.22);
  --prob-green-faint:  rgba(0,168,107,0.07);
}

/* ── RESET ──────────────────────────────────────────────── */

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  font-size: 16px;
  overflow-x: hidden;
}

body {
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
  letter-spacing: -0.01em;
}

img { max-width: 100%; }

/* ── TYPOGRAPHIE GLOBALE ────────────────────────────────── */

h1, h2, h3, h4 {
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.15;
}

/* Classe mono pour usage ponctuel uniquement */
.mono { font-family: 'Space Mono', monospace; }

a {
  color: var(--accent);
  text-decoration: none;
  transition: opacity 0.2s;
}
a:hover { opacity: 0.8; }

/* ── CLASSES UTILITAIRES COULEUR ────────────────────────── */

.accent { color: var(--accent); }
.text2  { color: var(--text2); }

/* ── COMPOSANTS — surcharges couleur minimales ──────────── */

/* Le texte des boutons primaires reste toujours blanc */
.btn-primary,
.btn-primary:hover,
.sticky-cta-btn {
  color: #ffffff;
}

/* Labels accent */
.label { color: var(--accent); }