@import url('https://fonts.googleapis.com/css2?family=Public+Sans:ital,wght@0,400;0,500;0,600;0,700;1,400&family=Source+Serif+4:ital,opsz,wght@0,8..60,400..700;1,8..60,400..600&display=swap');
/* ============================================================
   THÈME « MARINE INSTITUT » — Montfort & Associés
   Corporate institutionnel · 100 % clair : bleu glacier, gris acier, marine, cyan.
   Tokens de design du site public + espace client.
   ============================================================ */

:root {
  /* Surfaces claires (gris acier très pâle) */
  --bg: #f3f5f8;
  --card: #ffffff;
  --surface: #e6ebf1;
  --surface-2: #e0edf3;
  --surface-warm: #f2ecdf;

  /* Lignes / bordures */
  --line: #dbe1e9;
  --input-line: #cbd4df;
  --line-2: #bcc7d4;
  --line-3: #93abc3;

  /* Texte sur fond clair */
  --ink: #0e2646;          /* bleu marine : titres et texte fort */
  --brand-dark: #cfdfec;   /* surface de marque claire : bleu glacier acier (hero, bandeaux, pied de page) */
  --text: #46566a;         /* gris acier : corps de texte */
  --text-strong: #2a3a4f;
  --muted: #5a6a7e;
  --warm-ink: #6e5318;
  --nav-inactive: #2f4560;

  /* Accents */
  --accent: #2c9fc3;      /* cyan clair : boutons pleins, chiffres clés, mot en évidence */
  --accent-2: #1a5c8a;     /* bleu acier : liens, survol, puces */
  --accent-on-brand: #0c4a78; /* bleu profond : mots en accent posés sur --brand-dark */

  /* Éléments posés sur --brand-dark (teinte glacier claire → textes marine foncés) */
  --on-dark-strong: #0e2646;
  --on-dark: #0e2646;
  --on-dark-text: #2a3f5a;
  --on-dark-muted: #3b5068;
  --on-dark-bg: #1f3653;
  --on-dark-soft: #2a3f5a;
  --on-dark-faint: #475a70;
  --on-dark-line: #a3bbd1;
  --on-dark-card: #f4f8fb;

  --header-bg: rgba(243,245,248,.9);
  --on-dark-border: rgba(14,38,70,.22);

  /* Typographie */
  --serif: 'Source Serif 4', 'Georgia', serif;
  --sans: 'Public Sans', 'Helvetica Neue', Arial, sans-serif;

  /* Formes (arrondis moyens, sobres) */
  --r-pill: 8px;
  --r-xl: 16px;
  --r-lg: 12px;
  --r-md: 10px;
  --r-sm: 6px;
}

body { margin:0; background:var(--bg); font-family:var(--sans); color:var(--text-strong); }
a:hover { color: var(--accent-2); }