/* ==========================================================================
   base.css — variables de design, réinitialisation, typographie
   ========================================================================== */

:root{
  /* Couleurs de marque */
  --navy:#17324D;
  --night:#0E2235;
  --gold:#C89B3C;
  --gold-dark:#B7892F;
  --gold-soft:#EFE2C6;

  /* Surfaces et texte */
  --off:#FAF9F6;
  --white:#FFFFFF;
  --text:#333333;
  --muted:#5C6B7A;
  --line:#E6E6E6;

  /* Mise en page */
  --wrap:1200px;
  --gutter:32px;
  --nav-h:74px;

  /* Typographie */
  --sans:"Work Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  --serif:"Spectral",Georgia,"Times New Roman",serif;
}

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

html{
  scroll-behavior:smooth;
  /* Décale les ancres pour qu'elles ne passent pas sous la barre fixe */
  scroll-padding-top:calc(var(--nav-h) + 16px);
}

body{
  margin:0;
  background:var(--white);
  color:var(--text);
  font-family:var(--sans);
  font-size:17px;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
}

/* height:auto est indispensable : les <img> portent des attributs width/height
   (ils réservent la place et évitent les sauts de mise en page), sans quoi la
   hauteur resterait figée à celle du fichier quand la largeur est réduite. */
img{max-width:100%;height:auto;display:block}
a{color:inherit}

h2{
  font-family:var(--serif);
  font-weight:500;
  color:var(--navy);
  font-size:40px;
  line-height:1.25;
  margin:0 0 22px;
  letter-spacing:-.005em;
}
h3{
  font-family:var(--sans);
  font-weight:600;
  color:var(--navy);
  font-size:19px;
  margin:0 0 10px;
}
p{margin:0 0 18px;max-width:62ch}

.eyebrow{
  font-size:12px;
  font-weight:600;
  letter-spacing:.18em;
  color:var(--gold);
  text-transform:uppercase;
  margin:0 0 18px;
}
.lead{font-size:18px;color:#43505C}

/* Accessibilité --------------------------------------------------------- */

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

/* Lien d'évitement, visible uniquement au clavier */
.skip-link{
  position:absolute;left:-9999px;top:0;z-index:100;
  background:var(--navy);color:#fff;text-decoration:none;
  padding:12px 20px;border-radius:0 0 4px 0;font-size:15px;
}
.skip-link:focus{left:0}

.visually-hidden{
  position:absolute;width:1px;height:1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;
}

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