/* ═══════════════════════════════════════════════════════════
   FOUNDATION — socle du site
   Chargée en premier, avant toute autre feuille.

   Elle possède : les jetons de design, la remise à zéro, la
   typographie de base et les règles d'accessibilité.

   Elle remplace normalize.css, webflow.css et
   john-sterlins-fresh-site.webflow.css, qui imposaient des
   tailles de titres en pixels (h1 à 75px, h2 à 50px) héritées
   d'un gabarit sans rapport avec ce site.
   ═══════════════════════════════════════════════════════════ */

:root {
  /* ── Couleurs ─────────────────────────────────────────────
     Deux teintes seulement : marine et lavande. Toutes les
     autres valeurs en sont dérivées par opacité, pour que les
     superpositions restent cohérentes sur n'importe quel fond. */
  --marine-900: #001730;
  --marine-800: #002244;
  --marine-700: #0a3366;
  --marine-600: #14458a;

  --lavande-600: #4a5bb0;
  --lavande-500: #5566bd;
  --lavande-400: #7b8cde;
  --lavande-300: #a3b0e9;

  /* Rôles sémantiques : on écrit --texte, jamais --marine-800 */
  --texte: var(--marine-800);
  --texte-doux: rgba(0, 34, 68, 0.70);
  --texte-tenu: rgba(0, 34, 68, 0.48);
  --accent: var(--lavande-400);
  --accent-fort: var(--lavande-500);
  --accent-voile: rgba(123, 140, 222, 0.10);
  --accent-trait: rgba(123, 140, 222, 0.26);

  --fond: #ffffff;
  --fond-doux: #f6f7fc;
  --fond-profond: var(--marine-800);
  --trait: rgba(0, 34, 68, 0.09);
  --trait-fort: rgba(0, 34, 68, 0.16);

  /* Sur fond marine */
  --sur-sombre: rgba(247, 248, 252, 0.94);
  --sur-sombre-doux: rgba(247, 248, 252, 0.64);
  --sur-sombre-tenu: rgba(247, 248, 252, 0.40);
  --trait-sombre: rgba(255, 255, 255, 0.14);

  /* ── Typographie ──────────────────────────────────────────
     Une échelle fluide : la taille suit la largeur de l'écran
     entre deux bornes, sans palier brutal aux points de rupture. */
  --police-titre: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --police-texte: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  --t-xs: 0.78rem;
  --t-sm: 0.875rem;
  --t-base: 1rem;
  --t-md: clamp(1.02rem, 0.98rem + 0.2vw, 1.12rem);
  --t-lg: clamp(1.15rem, 1.08rem + 0.35vw, 1.35rem);
  --t-xl: clamp(1.35rem, 1.2rem + 0.7vw, 1.75rem);
  --t-2xl: clamp(1.7rem, 1.4rem + 1.3vw, 2.4rem);
  --t-3xl: clamp(2.1rem, 1.55rem + 2.4vw, 3.4rem);

  --interligne-serre: 1.15;
  --interligne: 1.6;
  --interligne-lache: 1.72;

  /* ── Espacement ───────────────────────────────────────────
     Progression sur une base de 4px : les marges se composent
     au lieu de s'accumuler au jugé. */
  --e-1: 0.25rem;
  --e-2: 0.5rem;
  --e-3: 0.75rem;
  --e-4: 1rem;
  --e-5: 1.5rem;
  --e-6: 2rem;
  --e-7: 3rem;
  --e-8: 4rem;
  --e-9: 6rem;

  /* ── Formes et profondeur ─────────────────────────────────
     Ombres teintées de marine plutôt que de noir : une ombre
     noire sur fond bleuté paraît sale. */
  --arrondi-sm: 6px;
  --arrondi: 12px;
  --arrondi-lg: 18px;
  --arrondi-xl: 24px;
  --arrondi-plein: 999px;

  --ombre-1: 0 1px 2px rgba(0, 34, 68, 0.05);
  --ombre-2: 0 4px 14px rgba(0, 34, 68, 0.07);
  --ombre-3: 0 14px 34px rgba(0, 34, 68, 0.11);
  --ombre-4: 0 26px 60px rgba(0, 34, 68, 0.16);

  --transition: 220ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-lente: 420ms cubic-bezier(0.4, 0, 0.2, 1);

  --largeur-contenu: 1140px;
  --largeur-texte: 68ch;
  --hauteur-nav: 72px;
}

/* ── Remise à zéro ──────────────────────────────────────────── */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* La navigation est fixe : les ancres doivent s'arrêter dessous. */
  scroll-padding-top: calc(var(--hauteur-nav) + var(--e-5));
}

body {
  margin: 0;
  background: var(--fond);
  color: var(--texte);
  font-family: var(--police-texte);
  font-size: var(--t-base);
  line-height: var(--interligne);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6,
p, figure, blockquote, dl, dd {
  margin: 0;
}

ul, ol {
  margin: 0;
  padding: 0;
}

/* ── Typographie de base ────────────────────────────────────
   Des valeurs par défaut raisonnables. Chaque composant reste
   libre de les redéfinir, mais plus rien n'arrive à 75px sans
   qu'on l'ait décidé. */

h1, h2, h3, h4, h5, h6 {
  font-family: var(--police-titre);
  font-weight: 700;
  line-height: var(--interligne-serre);
  letter-spacing: -0.015em;
  color: var(--texte);
  text-wrap: balance;
}

h1 { font-size: var(--t-3xl); }
h2 { font-size: var(--t-2xl); }
h3 { font-size: var(--t-xl); }
h4 { font-size: var(--t-lg); }
h5 { font-size: var(--t-md); }
h6 { font-size: var(--t-base); }

p {
  line-height: var(--interligne);
  text-wrap: pretty;
}

strong, b {
  font-weight: 650;
  color: var(--texte);
}

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

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

button, input, select, textarea {
  font: inherit;
  color: inherit;
}

button {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
}

hr {
  border: none;
  border-top: 1px solid var(--trait);
  margin: var(--e-7) 0;
}

::selection {
  background: var(--accent);
  color: #ffffff;
}

/* ── Accessibilité ──────────────────────────────────────────
   Le site n'avait aucun style de focus : un visiteur au clavier
   n'avait aucun moyen de savoir où il se trouvait. */

:focus-visible {
  outline: 2px solid var(--accent-fort);
  outline-offset: 3px;
  border-radius: var(--arrondi-sm);
}

/* Sur fond marine, un contour lavande ressort mal. */
.nav :focus-visible,
.footer :focus-visible,
.executive-cta :focus-visible {
  outline-color: #ffffff;
}

/* Lien d'évitement : accéder au contenu sans parcourir le menu. */
.saut-contenu {
  position: absolute;
  left: var(--e-4);
  top: var(--e-4);
  z-index: 2000;
  padding: var(--e-3) var(--e-5);
  background: var(--marine-800);
  color: #ffffff;
  border-radius: var(--arrondi-sm);
  font-size: var(--t-sm);
  font-weight: 600;
  transform: translateY(-160%);
  transition: transform var(--transition);
}

.saut-contenu:focus {
  transform: translateY(0);
}

/* ── Mouvement réduit ───────────────────────────────────────
   Respecte le réglage système de qui souffre de troubles
   vestibulaires ou de migraines déclenchées par le mouvement. */

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ── Impression ─────────────────────────────────────────────
   Les articles sont de la matière de fond : ils doivent pouvoir
   être imprimés ou enregistrés en PDF proprement. */

@media print {
  .nav,
  .footer,
  .back-to-top,
  .preloader,
  .language-toggle,
  .saut-contenu {
    display: none !important;
  }

  body {
    color: #000000;
    background: #ffffff;
  }

  a[href^="http"]::after {
    content: ' (' attr(href) ')';
    font-size: 0.8em;
    color: #555555;
  }
}