/* AnnalesDNB — main.css : tokens + layout global */

:root {
  /* Couleurs principales */
  --color-marine:       #003189; /* fond des éléments de marque (header/footer/boutons) — bascule en sombre */
  --color-marine-light: #1a4aad;
  --color-marine-dark:  #001f5e;
  --color-link:         #003189; /* texte de lien sur le fond de page — bascule en sombre */
  --color-link-hover:   #1a4aad;
  --color-gold:         #C8A84B;
  --color-gold-light:   #e8c96b;
  --color-white:        #FFFFFF; /* texte sur fond marine/bouton — reste blanc dans les deux thèmes */
  --color-surface:      #FFFFFF; /* fond des cards/panneaux — bascule en sombre */
  --color-bg:           #F5F6FA;
  --color-bg-alt:       #EEF0F8;
  --color-text:         #1A1A2E;
  --color-text-muted:   #5A5A7A;
  --color-border:       #D0D4E8;

  /* Couleurs par matière (bordure gauche des cards) */
  --color-francais:     #C0392B;
  --color-maths:        #1A5276;
  --color-hg-emc:       #1A6B3A;
  --color-sciences:     #6C3483;

  /* Couleurs de statut */
  --color-success:      #1A6B3A;
  --color-success-bg:   #E4F3E9;
  --color-warning:      #B7770D;
  --color-warning-bg:   #FCEFDA;
  --color-warning-fg:   #6b4e0e;
  --color-error:        #C0392B;
  --color-info:         #1A5276;
  --color-info-bg:      #E9F0FB;

  /* Typographie */
  --font-primary:   'Marianne', 'Plus Jakarta Sans', system-ui, sans-serif;
  --font-serif:     'Source Serif 4', 'Georgia', serif;
  --font-mono:      'JetBrains Mono', monospace;

  /* Échelle typographique +1px sur chaque palier (confort de lecture) */
  --text-xs:   0.8125rem;
  --text-sm:   0.9375rem;
  --text-base: 1.0625rem;
  --text-lg:   1.1875rem;
  --text-xl:   1.3125rem;
  --text-2xl:  1.5625rem;
  --text-3xl:  1.9375rem;

  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-12: 3rem;
  --space-16: 4rem;

  --radius-sm: 4px;
  --radius:    8px;
  --radius-lg: 12px;
  --shadow-sm: 0 1px 3px rgba(0, 0, 46, 0.08);
  --shadow-md: 0 4px 16px rgba(0, 0, 46, 0.12);
  --shadow-lg: 0 8px 32px rgba(0, 0, 46, 0.16);
  --transition: 200ms ease;
}

/* Mode sombre — suit le système par défaut, ou le choix explicite de
   l'utilisateur (bouton bascule, attribut data-theme, persisté en
   localStorage par assets/js/theme.js). */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --color-marine:       #0a1428;
    --color-marine-light: #1c2b4d;
    --color-marine-dark:  #05080f;
    --color-link:         #93b0ff;
    --color-link-hover:   #b8cdff;
    --color-gold:         #d9bb6b;
    --color-gold-light:   #e8cf8f;
    --color-surface:      #1a1d2b;
    --color-bg:           #12141f;
    --color-bg-alt:       #212437;
    --color-text:         #ecedf6;
    --color-text-muted:   #a3a6c2;
    --color-border:       #323654;

    --color-francais:     #e07364;
    --color-maths:        #6ea3d6;
    --color-hg-emc:       #5cb684;
    --color-sciences:     #b087d9;

    --color-success:      #7fd6a3;
    --color-success-bg:   #16321f;
    --color-warning:      #ecc37c;
    --color-warning-bg:   #3a2c10;
    --color-warning-fg:   #ecc37c;
    --color-error:        #e0776a;
    --color-info:         #8fb8ec;
    --color-info-bg:      #1a2740;

    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.4);
    --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.5);
    --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.6);
  }
}
:root[data-theme="dark"] {
  --color-marine:       #0a1428;
  --color-marine-light: #1c2b4d;
  --color-marine-dark:  #05080f;
  --color-link:         #93b0ff;
  --color-link-hover:   #b8cdff;
  --color-gold:         #d9bb6b;
  --color-gold-light:   #e8cf8f;
  --color-surface:      #1a1d2b;
  --color-bg:           #12141f;
  --color-bg-alt:       #212437;
  --color-text:         #ecedf6;
  --color-text-muted:   #a3a6c2;
  --color-border:       #323654;

  --color-francais:     #e07364;
  --color-maths:        #6ea3d6;
  --color-hg-emc:       #5cb684;
  --color-sciences:     #b087d9;

  --color-success:      #7fd6a3;
  --color-success-bg:   #16321f;
  --color-warning:      #ecc37c;
  --color-warning-bg:   #3a2c10;
  --color-warning-fg:   #ecc37c;
  --color-error:        #e0776a;
  --color-info:         #8fb8ec;
  --color-info-bg:      #1a2740;

  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.5);
  --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.6);
}

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

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font-primary);
  font-size: var(--text-base);
  color: var(--color-text);
  background: var(--color-bg);
  line-height: 1.5;
}

img { max-width: 100%; display: block; }

a { color: var(--color-link); }
a:hover { color: var(--color-link-hover); }

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--color-marine);
  color: var(--color-white);
  padding: var(--space-2) var(--space-4);
  z-index: 200;
  border-radius: 0 0 var(--radius) 0;
}
.skip-link:focus {
  left: 0;
}

/* Boutons */
.btn {
  font-family: inherit;
  font-size: var(--text-sm);
  font-weight: 600;
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius);
  border: 1px solid transparent;
  cursor: pointer;
  transition: background var(--transition), border-color var(--transition), color var(--transition);
}
.btn--primary {
  background: var(--color-marine);
  color: var(--color-white);
}
.btn--primary:hover { background: var(--color-marine-light); }
.btn--secondary {
  background: var(--color-surface);
  color: var(--color-link);
  border-color: var(--color-border);
}
.btn--secondary:hover { background: var(--color-bg-alt); }

/* Header */
.site-header {
  background: var(--color-marine);
  color: var(--color-white);
}
.site-header__inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: var(--space-3) var(--space-4);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}
.site-header__brand {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  text-decoration: none;
  color: var(--color-white);
}
.site-header__title-group {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}
.site-header__title {
  font-size: var(--text-xl);
  font-weight: 700;
}
.site-header__tagline {
  font-size: var(--text-xs);
  color: rgba(255,255,255,0.75);
}
.site-header__nav {
  display: flex;
  gap: var(--space-4);
  flex-wrap: wrap;
}
.site-header__nav a {
  color: var(--color-white);
  text-decoration: none;
  font-size: var(--text-sm);
  font-weight: 500;
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);
}
.site-header__nav a:hover,
.site-header__nav a[aria-current="page"] {
  background: rgba(255,255,255,0.12);
}

.theme-toggle {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.3);
  background: rgba(255,255,255,0.08);
  color: var(--color-white);
  font-size: var(--text-base);
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background var(--transition), border-color var(--transition);
  flex: 0 0 auto;
}
.theme-toggle:hover {
  background: rgba(255,255,255,0.18);
  border-color: rgba(255,255,255,0.5);
}

/* Alert banner réforme */
.alert-banner {
  background: var(--color-warning-bg);
  border-bottom: 1px solid var(--color-warning);
}
.alert-banner__inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: var(--space-3) var(--space-4);
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
}
.alert-banner__icon { font-size: var(--text-lg); }
.alert-banner__text {
  flex: 1;
  margin: 0;
  font-size: var(--text-sm);
  color: var(--color-warning-fg);
}
.alert-banner__text a {
  color: var(--color-warning);
  font-weight: 600;
}
.alert-banner__close {
  background: none;
  border: none;
  font-size: var(--text-lg);
  cursor: pointer;
  color: var(--color-warning-fg);
  line-height: 1;
  padding: var(--space-1);
}

/* Footer */
.site-footer {
  background: var(--color-marine-dark);
  color: rgba(255,255,255,0.8);
  margin-top: var(--space-16);
}
.site-footer__inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: var(--space-8) var(--space-4);
  font-size: var(--text-sm);
}
.site-footer__inner p { margin: var(--space-1) 0; }
.site-footer__inner a { color: var(--color-gold-light); }

/* Layout générique */
.layout {
  max-width: 1200px;
  margin: 0 auto;
  padding: var(--space-6) var(--space-4);
  display: flex;
  gap: var(--space-8);
  align-items: flex-start;
}

/* Modal (signalement) */
.modal[hidden] { display: none; }
.modal {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: flex;
  align-items: center;
  justify-content: center;
}
.modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,20,0.5);
}
.modal__dialog {
  position: relative;
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: var(--space-6);
  max-width: 480px;
  width: calc(100% - var(--space-8));
  max-height: 80vh;
  overflow-y: auto;
}
.modal__dialog h2 { margin-top: 0; }
.modal__links {
  list-style: none;
  padding: 0;
  margin: var(--space-4) 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.modal__links a {
  display: block;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  text-decoration: none;
  font-size: var(--text-sm);
}
.modal__links a:hover { background: var(--color-bg-alt); }
.modal__actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-2);
  margin-top: var(--space-4);
}

@media print {
  .site-header, .alert-banner, .filters, .filters-toggle, .site-footer, .catalogue__toolbar {
    display: none !important;
  }
}