/* =============================================================================
   KEY ADVISORY GROUP — Identité visuelle « Institution »
   Palette de marque : bleu profond #002364 et son dégradé royal
   (#002364 → #1442a0 → #2f6bde). Serif Libre Baskerville + grotesque Manrope.
   Familles --font-serif / --font-sans fournies par next/font.
   ============================================================================= */

:root {
  /* Couleurs — clair (défaut) */
  --c-bg: #f3f5f8;
  --c-surface: #ffffff;
  --c-text: #0a1a3f; /* encre navy */
  --c-muted: rgba(10, 26, 63, 0.6);
  --c-faint: rgba(10, 26, 63, 0.42);
  --c-border: rgba(10, 26, 63, 0.12);
  --c-border-md: rgba(10, 26, 63, 0.22);
  --c-subtle: rgba(10, 26, 63, 0.035);

  /* Bleus de marque (dégradé de #002364) */
  --c-accent: #1442a0; /* mid */
  --c-accent-soft: #2f6bde; /* clair */
  --c-accent-deep: #002364; /* profond — couleur de marque */
  --grad-brand: linear-gradient(90deg, #002364 0%, #1442a0 52%, #2f6bde 100%);
  --grad-navy: linear-gradient(165deg, #002b82 0%, #002364 56%, #001a4f 100%);
  --c-deep: #001a4f; /* navy le plus profond — bas du footer / overscroll */

  --c-error: #c0362c;
  --c-success: #1442a0;

  /* Inversion (sections sombres / hero / footer) */
  --c-invert-bg: #002364;
  --c-invert-text: #eef2fb;
  --c-invert-muted: rgba(238, 242, 251, 0.64);

  /* Polices */
  --font-display: var(--font-serif), Georgia, 'Times New Roman', serif;
  --font-body: var(--font-sans), system-ui, -apple-system, sans-serif;
  --font-mono: var(--font-sans), system-ui, sans-serif; /* alias : plus de monospace */

  /* Échelle typographique fluide */
  --text-xs: clamp(0.72rem, 0.9vw, 0.78rem);
  --text-sm: clamp(0.84rem, 1.1vw, 0.92rem);
  --text-base: clamp(0.97rem, 1.3vw, 1.06rem);
  --text-lg: clamp(1.1rem, 1.6vw, 1.26rem);
  --text-xl: clamp(1.28rem, 2.2vw, 1.55rem);
  --text-2xl: clamp(1.55rem, 3vw, 2.05rem);
  --text-3xl: clamp(1.9rem, 4vw, 2.85rem);
  --text-4xl: clamp(2.3rem, 5vw, 3.85rem);
  --text-display: clamp(2.6rem, 6vw, 5rem);

  --r-sm: 3px;
  --r-md: 5px;
  --r-lg: 10px;
  --r-pill: 999px;

  --shadow-sm: 0 1px 2px rgba(10, 26, 63, 0.06);
  --shadow-md: 0 16px 48px -18px rgba(10, 26, 63, 0.3);

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-out: cubic-bezier(0, 0, 0.2, 1);
  --t-fast: 140ms;
  --t-base: 260ms;
  --t-slow: 600ms;

  --header-h-top: 96px; /* header déployé (haut de page) */
  --header-h: 68px; /* header réduit (après défilement) */
  --maxw: 1240px;
  --maxw-narrow: 720px;
  --rule: 1px solid var(--c-border);
}

/* ---- Reset ---- */
*,
*::before,
*::after {
  box-sizing: border-box;
}
* {
  margin: 0;
}
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: var(--header-h-top); /* ancres sous le header fixe */
  /* La zone au-delà du document (overscroll / rebond) prolonge la couleur du
     footer au lieu d'afficher du blanc. */
  background-color: var(--c-deep);
  font-family: var(--font-body);
  text-underline-offset: 0.18em;
}
body {
  background: var(--c-bg);
  color: var(--c-text);
  font-size: var(--text-base);
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  min-height: 100svh;
}
img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
}
input,
button,
textarea,
select {
  font: inherit;
  color: inherit;
}
a {
  color: inherit;
  text-decoration: none;
}
button {
  background: none;
  border: none;
  cursor: pointer;
}
h1,
h2,
h3,
h4 {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 1.12;
  letter-spacing: 0;
}
:focus-visible {
  outline: 2px solid var(--c-accent);
  outline-offset: 3px;
}
::selection {
  background: var(--c-accent-deep);
  color: #fff;
}

/* ---- Layout ---- */
.container {
  width: 100%;
  padding-inline: clamp(1.25rem, 5vw, 4.5rem);
}
.container--wide {
  max-width: var(--maxw);
  margin-inline: auto;
}
.container--narrow {
  max-width: var(--maxw-narrow);
  margin-inline: auto;
}
.grid {
  display: grid;
  gap: var(--gap, 1.5rem);
}
.grid--2 {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
}
.grid--3 {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
}
.grid--asymm {
  grid-template-columns: 5fr 7fr;
}
@media (max-width: 820px) {
  .grid--asymm {
    grid-template-columns: 1fr;
  }
}
.stack {
  display: flex;
  flex-direction: column;
}
.stack-sm {
  gap: clamp(0.75rem, 1.5vw, 1rem);
}
.stack-md {
  gap: clamp(1.25rem, 2.5vw, 1.75rem);
}
.stack-lg {
  gap: clamp(2rem, 4vw, 3rem);
}
.cluster {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--gap, 1rem);
}

/* ---- Voix typographiques ---- */
.v-display {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1.08;
}
.v-mono {
  font-family: var(--font-body);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
}
.v-script {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
}
.v-italic {
  font-style: italic;
}
/* Kicker / sur-titre — sans, sobre, sans fioriture (plus de tiret ni de mono) */
.eyebrow {
  display: inline-block;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.13em;
  color: var(--c-accent);
}
.lead {
  font-size: var(--text-lg);
  line-height: 1.55;
  color: var(--c-muted);
  max-width: 62ch;
}

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