/* =====================================
   ODYSSEUS – BASE CSS
   Fondations globales (couleurs, typo…)
   ===================================== */

/* === 1. Variables globales === */
:root {
  --bleu-nuit: #1e1f2b;
  --doré: #bfa240;
  --rose-tendre: #f5e3e0;
  --crème: #fff9f0;
  --blanc-pur: #ffffff;
  --gris-clair: #f0f0f0;
  --texte: #111;
  --texte-inverse: #fff;
  --focus-outline: #ffbf47;
  --max-width: 1200px;

  --bg-color: var(--crème);
  --text-color: var(--texte);
  --accent-color: var(--doré);
  --link-color: var(--bleu-nuit);
  --card-bg: var(--blanc-pur);
}

/* === 2. Mode contraste élevé === */
html.high-contrast {
  --bg-color: #000000;
  --text-color: #FFFFFF;
  --accent-color: #FFFF00;
  --link-color: #00FFFF;
  --card-bg: #111111;

  --crème: #000000;
  --bleu-nuit: #FFFFFF;
  --rose-tendre: #111111;
  --doré: #FFFF00;
}

html.high-contrast body,
html.high-contrast section,
html.high-contrast footer.site-footer,
html.high-contrast header.main-header,
html.high-contrast .contact-hero {
  background-color: var(--bg-color) !important;
  color: var(--text-color) !important;
}

html.high-contrast h1,
html.high-contrast h2,
html.high-contrast h3,
html.high-contrast p,
html.high-contrast span,
html.high-contrast .nav-links a,
html.high-contrast .jo-mission-text p,
html.high-contrast .footer-links a {
  color: var(--text-color) !important;
}

html.high-contrast .card p,
html.high-contrast .card span {
  color: #000 !important;
}

html.high-contrast a {
  color: var(--link-color) !important;
}

html.high-contrast .pole-card,
html.high-contrast .team-card,
html.high-contrast .contact-card,
html.high-contrast .audio-bloc {
  background: var(--card-bg) !important;
  border: 1px solid var(--accent-color);
}

html.high-contrast .card {
  background: #FFFFFF !important;
  border: 2px solid var(--accent-color) !important;
}

html.high-contrast .access-toolbar button svg {
  fill: var(--bg-color) !important;
}

html.high-contrast .access-toolbar button {
  background-color: var(--accent-color) !important;
}

html.high-contrast .cta-button {
  color: var(--bg-color) !important;
  background-color: var(--accent-color) !important;
}

html.high-contrast #backToTop {
  background-color: var(--accent-color) !important;
  color: var(--bg-color) !important;
}

/* === 3. Zoom global === */
html.zoom-100 { font-size: 1rem; }
html.zoom-125 { font-size: 1.125rem; }
html.zoom-150 { font-size: 1.25rem; }
html.zoom-200 { font-size: 1.5rem; }
html.zoom-250 { font-size: 1.75rem; }

/* === 4. Reset, structure, body === */
* { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  font-family: 'Segoe UI', sans-serif;
  font-size: 1rem;
  background-color: var(--crème);
  color: var(--texte);
  line-height: 1.6;

  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

main { flex: 1; }

/* === 5. Liens globaux === */
a {
  color: var(--bleu-nuit);
  text-decoration: none;
}
a:hover,
a:focus {
  color: var(--doré);
  outline: none;
}

/* === 6. Grille & layout === */
.container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 1em;
}

/* === 7. Accessibilité utilitaire === */
.sr-only {
  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: -999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.skip-link:focus {
  position: static;
  width: auto;
  height: auto;
  background: var(--doré);
  color: var(--blanc-pur);
  padding: 0.5em 1em;
  z-index: 1000;
}