/* ============================================================
   EGIC-ATA — main.css
   Fondations : variables de palette, reset, typographie, layout
   Mobile-first. Aucune dépendance externe.
   ============================================================ */

/* ------------------------------------------------------------
   1. VARIABLES — PALETTE & DESIGN TOKENS
   Palette stricte (gouvernance) : navy | or | ivoire
   ------------------------------------------------------------ */
:root {
  /* Couleurs de marque */
  --navy: #0F2A5E;
  --navy-dark: #0B1F46;        /* footer — légèrement plus foncé que le header */
  --gold: #C9A24B;
  --gold-soft: #d9b873;
  --ivory: #FAF7F0;
  --white: #FFFFFF;

  /* Neutres institutionnels */
  --gray: #6B7280;             /* labels, légendes */
  --gray-dark: #2E3743;        /* corps de texte sur fond clair */
  --border: #E6E1D6;           /* filets sur fond ivoire/blanc */
  --error: #B3261E;            /* messages de validation de formulaire */

  /* Couleurs atténuées sur fond navy */
  --ivory-muted: rgba(250, 247, 240, 0.72);
  --ivory-faint: rgba(250, 247, 240, 0.45);

  /* Typographie */
  --font-heading: Georgia, "Times New Roman", "Noto Serif", serif;
  --font-body: Arial, "Helvetica Neue", Helvetica, "Segoe UI", sans-serif;

  /* Échelle typographique (mobile-first, redéfinie en desktop) */
  --fs-overline: 0.75rem;
  --fs-body: 1rem;
  --fs-lead: 1.125rem;
  --fs-h3: 1.25rem;
  --fs-h2: 1.625rem;
  --fs-h1: 2rem;
  --fs-display: 2.5rem;        /* chiffres clés, années */

  --lh-tight: 1.15;
  --lh-normal: 1.6;

  /* Espacement */
  --space-xs: 0.5rem;
  --space-sm: 0.75rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2.5rem;
  --space-2xl: 4rem;
  --section-y: 3.5rem;         /* padding vertical des sections (mobile) */

  /* Mise en page */
  --container: 1140px;
  --container-narrow: 820px;
  --radius: 6px;
  --radius-lg: 12px;

  /* Ombres */
  --shadow-sm: 0 1px 3px rgba(15, 42, 94, 0.08);
  --shadow: 0 6px 20px rgba(15, 42, 94, 0.10);

  /* Divers */
  --header-h: 64px;
  --transition: 0.2s ease;
}

/* ------------------------------------------------------------
   2. RESET
   ------------------------------------------------------------ */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 1rem);
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  color: var(--gray-dark);
  background-color: var(--white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, p, figure, blockquote, ul, ol {
  margin: 0;
}

ul, ol {
  padding: 0;
  list-style: none;
}

img, picture, svg {
  max-width: 100%;
  display: block;
  height: auto;
}

a {
  color: inherit;
  text-decoration: none;
  transition: color var(--transition);
}

button {
  font-family: inherit;
  font-size: inherit;
  cursor: pointer;
  border: none;
  background: none;
}

input, textarea, select {
  font-family: inherit;
  font-size: inherit;
}

:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 2px;
}

/* ------------------------------------------------------------
   3. TYPOGRAPHIE
   Georgia pour tous les titres ; Arial pour le corps.
   ------------------------------------------------------------ */
h1, h2, h3, h4 {
  font-family: var(--font-heading);
  line-height: var(--lh-tight);
  color: var(--navy);
  font-weight: 700;
}

h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }

p {
  margin-bottom: var(--space-md);
}
p:last-child {
  margin-bottom: 0;
}

strong { font-weight: 700; }

/* Surtitre / overline — Arial, or, petites majuscules */
.overline {
  display: block;
  font-family: var(--font-body);
  font-size: var(--fs-overline);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: var(--space-sm);
}

/* Accroche / paragraphe d'introduction */
.lead {
  font-size: var(--fs-lead);
  line-height: var(--lh-normal);
}

/* ------------------------------------------------------------
   4. LAYOUT — CONTENEUR, SECTIONS
   ------------------------------------------------------------ */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--space-lg);
}

.container--narrow {
  max-width: var(--container-narrow);
}

.section {
  padding-block: var(--section-y);
}

/* Variantes de fond de section (gouvernance : navy | ivoire | blanc) */
.section--navy {
  background-color: var(--navy);
  color: var(--ivory);
}
.section--navy h1,
.section--navy h2,
.section--navy h3 {
  color: var(--ivory);
}

.section--ivory {
  background-color: var(--ivory);
}

.section--white {
  background-color: var(--white);
}

/* En-tête de section (surtitre + titre + intro) */
.section-head {
  max-width: var(--container-narrow);
  margin-bottom: var(--space-xl);
}
.section-head--center {
  margin-inline: auto;
  text-align: center;
}
.section-head p {
  margin-top: var(--space-md);
  color: var(--gray-dark);
}
.section--navy .section-head p {
  color: var(--ivory-muted);
}

/* ------------------------------------------------------------
   5. GRILLES UTILITAIRES (mobile : 1 colonne)
   ------------------------------------------------------------ */
.grid {
  display: grid;
  gap: var(--space-lg);
}
.grid--2,
.grid--3,
.grid--4 {
  grid-template-columns: 1fr;
}

/* Utilitaires d'espacement (basés sur les tokens, jamais de valeurs en dur) */
.mt-md { margin-top: var(--space-md); }
.mt-lg { margin-top: var(--space-lg); }
.mt-xl { margin-top: var(--space-xl); }
.text-center { text-align: center; }
/* Espace vertical régulier entre enfants successifs */
.stack > * + * { margin-top: var(--space-md); }
.mx-auto { margin-inline: auto; }
.measure { max-width: var(--container-narrow); }

/* ------------------------------------------------------------
   6. ACCESSIBILITÉ
   ------------------------------------------------------------ */
.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: var(--space-md);
  top: -100px;
  z-index: 1000;
  background: var(--gold);
  color: var(--navy);
  padding: var(--space-xs) var(--space-md);
  border-radius: var(--radius);
  font-weight: 700;
  transition: top var(--transition);
}
.skip-link:focus {
  top: var(--space-md);
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
}

/* ------------------------------------------------------------
   7. BREAKPOINTS — TABLETTE & DESKTOP
   ------------------------------------------------------------ */
@media (min-width: 768px) {
  :root {
    --fs-h1: 2.5rem;
    --fs-h2: 2rem;
    --fs-h3: 1.375rem;
    --fs-display: 3.25rem;
    --section-y: 5rem;
  }

  .grid--2 { grid-template-columns: repeat(2, 1fr); }
  .grid--3 { grid-template-columns: repeat(3, 1fr); }
  .grid--4 { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1024px) {
  :root {
    --fs-h1: 3rem;
    --fs-display: 3.75rem;
  }

  .grid--4 { grid-template-columns: repeat(4, 1fr); }
}