/* ─────────────────────────────────────────────
   main.css — Styles globaux
   Le Code Pour Tous
───────────────────────────────────────────── */

/* ── Reset & variables ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --green-deep:    #1b3a2d;
  --green-mid:     #2d5c44;
  --green-accent:  #5dbf8a;
  --green-light:   #a8e6c3;
  --green-pale:    #d4f0e2;
  --green-wash:    #eef8f2;
  --cream:         #f5f5f3;
  --cream-dark:    #ece9e3;
  --text-dark:     #141a17;
  --text-muted:    #4a5e54;
  --text-light:    #7a9187;
  --white:         #ffffff;
  --danger:        #c0392b;
  --danger-bg:     #fde8e8;
  --warning:       #856404;
  --warning-bg:    #fff3cd;
  --success:       #1b3a2d;
  --success-bg:    #d4f0e2;
  --info:          #1a4a7a;
  --info-bg:       #ddeeff;

  --radius-sm:  8px;
  --radius-md: 14px;
  --radius-lg: 22px;
  --radius-xl: 32px;
  --shadow:    0 2px 16px rgba(27,58,45,.08), 0 1px 4px rgba(27,58,45,.05);
  --shadow-lg: 0 8px 40px rgba(27,58,45,.12);

  --font-head: 'Sora', sans-serif;
  --font-body: 'DM Sans', sans-serif;
  --font-dys:  'OpenDyslexic', sans-serif;
}

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-body);
  background: var(--cream);
  color: var(--text-dark);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

/* ── Typographie ── */
h1, h2, h3, h4 {
  font-family: var(--font-head);
  font-weight: 700;
  color: var(--green-deep);
  line-height: 1.2;
}
a { color: var(--green-mid); }
a:hover { color: var(--green-deep); }

/* ── Alertes / Flash ── */
.alert {
  padding: .85rem 1.1rem;
  border-radius: var(--radius-sm);
  font-size: .9rem;
  margin-bottom: 1rem;
  border-left: 3px solid currentColor;
}
.alert-success { background: var(--success-bg); color: var(--success);  border-color: var(--green-accent); }
.alert-error   { background: var(--danger-bg);  color: var(--danger);   border-color: var(--danger); }
.alert-warning { background: var(--warning-bg); color: var(--warning);  border-color: #ffc107; }
.alert-info    { background: var(--info-bg);    color: var(--info);     border-color: #5b9bd5; }

/* ── Formulaires ── */
.form-group { margin-bottom: 1.25rem; }
.form-label {
  display: block;
  font-size: .88rem;
  font-weight: 600;
  color: var(--text-dark);
  margin-bottom: .4rem;
}
.form-input, .form-select, .form-textarea {
  width: 100%;
  padding: .75rem 1rem;
  border: 1.5px solid var(--cream-dark);
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-size: .95rem;
  color: var(--text-dark);
  background: var(--white);
  transition: border-color .2s, box-shadow .2s;
  outline: none;
}
.form-input:focus, .form-select:focus, .form-textarea:focus {
  border-color: var(--green-accent);
  box-shadow: 0 0 0 3px rgba(93,191,138,.15);
}
.form-input.error { border-color: var(--danger); }
.form-hint {
  display: block;
  font-size: .78rem;
  color: var(--text-muted);
  margin-top: .3rem;
}
.form-error {
  display: block;
  font-size: .78rem;
  color: var(--danger);
  margin-top: .3rem;
}

/* ── Boutons ── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: .75rem 1.5rem;
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-size: .95rem;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  border: 1.5px solid transparent;
  transition: background .2s, transform .15s, box-shadow .2s;
  white-space: nowrap;
}
.btn:active { transform: scale(.98); }
.btn:disabled { opacity: .55; cursor: not-allowed; }
.btn-primary   { background: var(--green-deep); color: var(--white); border-color: var(--green-deep); }
.btn-primary:hover   { background: var(--green-mid); color: var(--white); }
.btn-secondary { background: transparent; color: var(--green-deep); border-color: var(--green-deep); }
.btn-secondary:hover { background: var(--green-pale); }
.btn-accent    { background: var(--green-accent); color: var(--green-deep); border-color: var(--green-accent); }
.btn-accent:hover    { background: var(--green-light); }
.btn-danger    { background: var(--danger-bg); color: var(--danger); border-color: var(--danger); }
.btn-danger:hover    { background: #fcc; }
.btn-full  { width: 100%; }
.btn-sm    { padding: .45rem 1rem; font-size: .85rem; }
.btn-lg    { padding: 1rem 2rem; font-size: 1.05rem; }

/* ── Badge ── */
.badge {
  display: inline-block;
  padding: .2rem .6rem;
  border-radius: 99px;
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.badge-pending  { background: var(--warning-bg); color: var(--warning); }
.badge-active   { background: var(--success-bg); color: var(--green-mid); }
.badge-disabled { background: #f0f0f0; color: #888; }
.badge-passed   { background: var(--success-bg); color: var(--green-mid); }
.badge-failed   { background: var(--danger-bg);  color: var(--danger); }

/* ── Layout utilitaires ── */
.container { max-width: 1140px; margin: 0 auto; padding: 0 1.5rem; }
.container-sm { max-width: 560px; margin: 0 auto; padding: 0 1.5rem; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }

/* ── Mode DYS ── */
body.mode-dys {
  font-family: var(--font-dys) !important;
  letter-spacing: .05em;
  word-spacing: .1em;
  line-height: 1.9;
  background: #fdf8f0 !important;
}
body.mode-dys .form-input,
body.mode-dys .form-select,
body.mode-dys .form-textarea { font-family: var(--font-dys) !important; }

/* Contenu de leçon injecté depuis les fichiers HTML : peut contenir des
   styles inline (style="font-family:...") autorisés par sanitize_html().
   Un style inline gagne toujours face à un héritage du body, même avec
   !important sur body — il faut donc cibler chaque descendant explicitement. */
body.mode-dys .lesson-text,
body.mode-dys .lesson-text * {
  font-family: var(--font-dys) !important;
}

/* ── Fort contraste ── */
body.mode-contrast {
  --cream: #ffffff;
  --text-dark: #000000;
  --text-muted: #222222;
  --green-deep: #003d1f;
  --green-accent: #007a40;
  background: #fff !important;
}
body.mode-contrast .form-input,
body.mode-contrast .form-select { border-color: #000; }

/* Sidebar élève/admin : vert forêt très sombre (reste dans la charte,
   contrairement au noir pur) + item actif en ambre, bien lisible.
   Corrige le bug où l'item de menu actif (ex: "Fort contraste" lui-même)
   devenait quasi invisible : var(--green-accent) sur var(--green-deep)
   donnait deux verts très foncés proches en luminosité une fois les
   variables redéfinies ci-dessus. */
body.mode-contrast .student-sidebar,
body.mode-contrast .admin-sidebar {
  background: #0d2318 !important;
}
body.mode-contrast .s-nav-link,
body.mode-contrast .sidebar-link {
  color: #fff !important;
}
body.mode-contrast .s-nav-link:hover,
body.mode-contrast .sidebar-link:hover {
  background: rgba(255,255,255,.15) !important;
  color: #fff !important;
}
body.mode-contrast .s-nav-link.active,
body.mode-contrast .sidebar-link.active {
  background: #f0a500 !important;
  color: #3d2b00 !important;
  font-weight: 800;
}
body.mode-contrast .s-nav-link.active svg,
body.mode-contrast .sidebar-link.active svg {
  stroke: #3d2b00 !important;
}

/* Boutons / liens : contraste renforcé partout */
body.mode-contrast .btn-primary {
  background: #0d2318 !important;
  color: #fff !important;
  border-color: #0d2318 !important;
}
body.mode-contrast a {
  text-decoration: underline;
}

/* ── Spinner ── */
.spinner {
  display: inline-block;
  width: 20px; height: 20px;
  border: 2.5px solid rgba(255,255,255,.35);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }