/* ==========================================================================
   IASS-NEW — tokens.css v1.0 (UI Designer)
   Socle visuel : réplique maquette LSPA, branding IASS.
   Ordre de chargement : tokens.css → style.css → catalogue.css / detail.css
   Fonte : Montserrat (chargée dans <head>, @import en repli ci-dessous).
   Palette : orange #ff6f00 (accent) / navy #071a30 (fond sombre).
   Règle contraste : aucun petit texte < 4.5:1 (voir table §1).
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800&display=swap');

:root {
  /* ---------- 1. NAVY — header .top / .feat / .presence / footer sombre --- */
  /* Blanc #fff sur #071a30 = 15.9:1 ✅ / sur #0B2547 = 14.1:1 ✅ */
  --navy: #071a30;        /* ★ fond header, feat bar, presence, bannières */
  --navy-2: #0b2547;      /* variante (dégradés, .monument, .help) */
  --navy-3: #12325c;      /* 3e ton (side-quote, survols) */
  --navy-ink: #071a30;    /* texte sombre sur fond clair (13.2:1 sur blanc ✅) */

  /* ---------- 2. ORANGE — accent unique (ex-gold/bordeaux LSPA) ------------ */
  /* ⚠️ #ff6f00 sur blanc = 3.0:1 → INTERDIT en petit texte.
     Boutons : fond orange + texte NAVY (#071a30 = 7.1:1 ✅).
     Texte accentué sur blanc : --orange-ink (#8a3d00 = 6.1:1 ✅). */
  --orange: #ff6f00;      /* ★ pastille .go, filets, CTA (fond, jamais texte seul) */
  --orange-2: #e66300;    /* hover bouton / texte fort sur fond clair (4.6:1 ✅) */
  --orange-hover: #d65a00;/* hover appuyé */
  --orange-soft: #fff3e8; /* fond pastille / note / survol tuile */
  --orange-line: #f5c99a; /* bordure douce sur blanc */
  --orange-ink: #8a3d00;  /* ★ LIENS/kicker/compteurs sur blanc (6.1:1 ✅) */
  --gold: var(--orange);  /* alias compat LSPA (.gold, .btn-gold) */
  --gold-2: var(--orange-2);

  /* ---------- 3. TEXTES — tous ≥ 4.5:1 sur blanc --------------------------- */
  --text: #2b3445;        /* ★ titres/courant (9.6:1 ✅) */
  --body: #3c4657;        /* paragraphes (7.4:1 ✅) */
  --muted: #4b5563;       /* ★ secondaire (7.0:1 ✅) — utiliser pour .hero p, .head p */
  --muted-2: #5b6575;     /* alias ancien (5.4:1 ✅, limite — éviter en 12px) */
  --placeholder: #6b7686; /* placeholder (4.6:1 ✅) */

  /* ---------- 4. FONDS / LIGNES ------------------------------------------ */
  --bg: #f4f5f8;          /* fond page catalogue / section .sect */
  --w: #ffffff;           /* fond cartes / hero */
  --cream: #faf7f2;       /* fond imgbox tuile .p / .pdp-main */
  --line: #e3e6ec;        /* ★ toutes bordures 1px */
  --line-2: #cfd5e0;      /* bordure bouton .btn-line / inputs */

  /* ---------- 5. SÉMANTIQUE (contrastes vérifiés sur blanc) --------------- */
  --ok: #1d6b38;          /* 5.9:1 ✅ */  --ok-bg: #e8f7ee;
  --ko: #a32c1c;          /* 7.0:1 ✅ */  --ko-bg: #fdecea;
  --info: #0b4e9b;        /* 7.2:1 ✅ */  --info-bg: #e8effc;
  --wa: #25d366;          /* pastille WhatsApp (blanc dessus = décoratif 2.0:1, icône seule) */
  --wa-hover: #1ebe5b;
  --wa-focus: #128c7e;

  /* ---------- 6. TYPO ----------------------------------------------------- */
  --font: "Montserrat", Arial, Helvetica, sans-serif;
  --fs-xs: 0.72rem;   /* 11.5px badges / .ref */
  --fs-sm: 0.78rem;   /* 12.5px labels / footer */
  --fs-base: 0.88rem; /* 14px boutons / cartes */
  --fs-md: 1rem;      /* 16px corps */
  --fs-lg: 1.25rem;   /* 20px */
  --fs-xl: 1.5rem;    /* 24px H3 */
  --fs-2xl: 2.2rem;   /* 35px H1 mobile */
  --fs-3xl: 3rem;     /* 48px H1 desktop */
  --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; --fw-extrabold: 800;

  /* ---------- 7. FORMES / OMBRES (sobres, comme LSPA) --------------------- */
  --radius: 12px;         /* cartes panneaux */
  --radius-sm: 8px;       /* boutons / inputs / badges carrés */
  --radius-xs: 6px;       /* tuiles .card */
  --radius-pill: 999px;   /* pastilles .go / .ref / .badge */
  --shadow-sm: 0 2px 10px rgba(7, 26, 48, 0.10);
  --shadow-md: 0 10px 28px rgba(7, 26, 48, 0.14);
  --shadow-none: none;

  /* ---------- 8. LAYOUT --------------------------------------------------- */
  --container-max: 1240px;
  --container-max-xl: 1320px;
  --header-h: 78px;
  --header-h-sm: 70px;
  --sidebar-w: 240px;     /* sidebar catalogue (spec mission) */
  --z-header: 50;
  --z-float: 80;
  --focus: #ff6f00;       /* outline focus-visible (3px, voir style.css) */

  /* ---------- 9. TRANSITIONS ---------------------------------------------- */
  --tr-fast: 150ms ease;
  --tr-med: 220ms ease;
}

/* ============ BASE (zéro scroll-X, box-model, fondamentaux) =============== */
*, *::before, *::after { box-sizing: border-box; }
html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}
html, body {
  overflow-x: clip;       /* garde-fou scroll-X (fallback hidden ci-dessous) */
  max-width: 100%;
}
@supports not (overflow: clip) {
  html, body { overflow-x: hidden; }
}
body {
  margin: 0;
  font-family: var(--font);
  color: var(--text);
  background: var(--w);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, video, svg, iframe { max-width: 100%; }
img { height: auto; }
a { color: inherit; }
p, h1, h2, h3, h4, .card .lab, .fcontact li span, .about {
  overflow-wrap: break-word;
  word-wrap: break-word;
}

/* Utilitaires accessibilité — utilisés par les 3 autres feuilles */
.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
  white-space: nowrap;
}
.skip {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--navy); color: #fff;
  font: 700 0.8rem var(--font);
  padding: 10px 16px; border-radius: 0 0 8px 0; text-decoration: none;
}
.skip:focus { left: 0; color: #fff; }
.skip:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }

/* Focus visible ORANGE global (exigence mission) — 3px + offset 2px */
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
  border-radius: 4px;
}
::selection { background: var(--orange); color: var(--navy); }

/* Icônes inline SVG (comme LSPA — aucun sprite inventé, <use href="#…">) */
svg.i {
  width: 1em; height: 1em;
  stroke: currentColor; fill: none;
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
  vertical-align: -0.125em;
  flex: none;
}

/* Mouvement réduit — global */
@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;
  }
}