/* ==========================================================================
   BMServices — Design tokens
   Palette, typographie, espacements, ombres, rayons, transitions.
   Modifier une valeur ici la répercute sur tout le site.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Polices, servies depuis ce site et non depuis Google
   Deux fichiers à graisse variable : une seule requête par police couvre
   toutes les graisses utilisées, contre six fichiers auparavant. Le
   sous-ensemble « latin » contient tout le français, œ et guillemets compris.
   Inter et Sora sont sous licence SIL Open Font (voir assets/fonts/).

   font-display: swap — le texte s'affiche immédiatement avec la police du
   système, puis bascule. Rien n'est jamais invisible en attendant.
   -------------------------------------------------------------------------- */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/inter-latin-variable.woff2") format("woff2-variations");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

@font-face {
  font-family: "Sora";
  font-style: normal;
  font-weight: 100 800;
  font-display: swap;
  src: url("../fonts/sora-latin-variable.woff2") format("woff2-variations");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

:root {
  /* --- Couleurs de marque ------------------------------------------------ */
  --brand-700: #1440b8;
  --brand-600: #1a56db;
  --brand-500: #2563eb;
  --brand-400: #4b83f5;
  --brand-300: #8fb4fa;
  --brand-100: #dce8fe;
  --brand-50:  #eff5ff;

  /* Accent « eau » : identité plomberie / vitrerie */
  --aqua-600: #0891b2;
  --aqua-500: #06b6d4;
  --aqua-400: #22d3ee;
  --aqua-300: #67e8f9;
  --aqua-50:  #ecfeff;

  /* Accent « urgence » */
  --flame-600: #ea580c;
  --flame-500: #f97316;
  --flame-400: #fb923c;

  /* --- Neutres ------------------------------------------------------------ */
  --ink-950: #04070f;
  --ink-900: #070c1a;
  --ink-850: #0a1124;
  --ink-800: #0e1730;
  --ink-700: #17223f;
  --ink-600: #24314f;

  --slate-900: #0b1120;
  --slate-700: #334155;
  --slate-600: #475569;
  --slate-500: #64748b;
  --slate-400: #94a3b8;
  --slate-300: #cbd5e1;
  --slate-200: #e2e8f0;
  --slate-100: #f1f5f9;
  --slate-50:  #f8fafc;
  --white: #ffffff;

  /* --- Rôles sémantiques (thème clair par défaut) ------------------------- */
  --bg: var(--white);
  --bg-soft: #f4f7fc;
  --bg-elevated: var(--white);
  --text: var(--slate-900);
  --text-muted: #55617a;
  /* Assez foncé pour rester lisible sur le blanc comme sur le gris très clair
     des sections « soft » (rapport de contraste ≥ 4.5). */
  --text-subtle: #5a6780;
  --border: #e4eaf3;
  --border-strong: #d3dcea;

  --accent: var(--brand-600);
  --accent-contrast: var(--white);
  --focus: var(--aqua-500);

  /* Bouton fantôme : adapté automatiquement au fond clair ou sombre */
  --ghost-hover-bg: var(--brand-50);
  --ghost-hover-fg: var(--brand-700);
  --ghost-hover-border: var(--brand-500);

  --success-600: #059669;
  --success-50:  #ecfdf5;
  --danger-600:  #dc2626;
  --danger-50:   #fef2f2;

  /* --- Dégradés signature ------------------------------------------------- */
  --grad-brand: linear-gradient(135deg, var(--brand-600) 0%, var(--aqua-500) 100%);
  --grad-brand-soft: linear-gradient(135deg, rgba(37, 99, 235, .14) 0%, rgba(6, 182, 212, .14) 100%);
  --grad-flame: linear-gradient(135deg, var(--flame-600) 0%, #fbbf24 120%);
  --grad-ink: linear-gradient(165deg, var(--ink-900) 0%, var(--ink-800) 55%, #0b1a3a 100%);
  --grad-text: linear-gradient(100deg, var(--white) 20%, var(--aqua-300) 60%, var(--brand-300) 100%);

  /* --- Typographie -------------------------------------------------------- */
  --font-display: "Sora", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-body: "Inter", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", sans-serif;

  /* Échelle fluide : s'adapte de 320px à 1440px sans media query */
  --fs-xs:   clamp(0.75rem, 0.72rem + 0.15vw, 0.8125rem);
  --fs-sm:   clamp(0.8125rem, 0.79rem + 0.15vw, 0.875rem);
  --fs-base: clamp(0.9375rem, 0.91rem + 0.18vw, 1.0625rem);
  --fs-md:   clamp(1.0625rem, 1.01rem + 0.28vw, 1.1875rem);
  --fs-lg:   clamp(1.1875rem, 1.09rem + 0.44vw, 1.4375rem);
  --fs-xl:   clamp(1.375rem, 1.22rem + 0.75vw, 1.875rem);
  --fs-2xl:  clamp(1.625rem, 1.35rem + 1.35vw, 2.5rem);
  --fs-3xl:  clamp(2rem, 1.55rem + 2.25vw, 3.25rem);
  --fs-4xl:  clamp(2.5rem, 1.72rem + 3.9vw, 4.5rem);

  --lh-tight: 1.08;
  --lh-snug: 1.24;
  --lh-normal: 1.62;

  /* --- Espacements -------------------------------------------------------- */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 2.75rem;
  --sp-8: 3.5rem;
  --sp-9: 5rem;
  --sp-10: 7rem;

  --section-y: clamp(3.75rem, 2.4rem + 6.6vw, 7.5rem);
  --gutter: clamp(1.125rem, 0.7rem + 2.1vw, 2.5rem);
  --container: 1220px;
  --container-narrow: 860px;

  /* --- Rayons ------------------------------------------------------------- */
  --r-xs: 6px;
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-xl: 28px;
  --r-2xl: 36px;
  --r-pill: 999px;

  /* --- Ombres ------------------------------------------------------------- */
  --sh-xs: 0 1px 2px rgba(11, 17, 32, .06);
  --sh-sm: 0 2px 8px rgba(11, 17, 32, .06), 0 1px 2px rgba(11, 17, 32, .04);
  --sh-md: 0 10px 30px -12px rgba(11, 17, 32, .18), 0 2px 8px rgba(11, 17, 32, .05);
  --sh-lg: 0 26px 60px -22px rgba(11, 17, 32, .28), 0 6px 18px rgba(11, 17, 32, .06);
  --sh-xl: 0 44px 90px -30px rgba(9, 20, 48, .38);
  --sh-brand: 0 18px 40px -18px rgba(37, 99, 235, .55);
  --sh-flame: 0 18px 40px -16px rgba(234, 88, 12, .5);

  /* --- Mouvement ---------------------------------------------------------- */
  --ease-out: cubic-bezier(.22, .68, .32, 1);
  --ease-spring: cubic-bezier(.2, .9, .26, 1.04);
  --ease-in-out: cubic-bezier(.65, .02, .28, 1);
  --t-fast: 160ms;
  --t-base: 260ms;
  --t-slow: 520ms;

  /* --- Divers ------------------------------------------------------------- */
  /* Hauteur de la barre d'état sur iPhone (encoche, Dynamic Island).
     Vaut zéro partout ailleurs. Passer par une variable permet de la
     simuler pour vérifier le rendu sans iPhone sous la main. */
  --safe-top: env(safe-area-inset-top, 0px);

  --nav-h: 76px;
  --nav-h-compact: 62px;
  --z-nav: 100;
  --z-drawer: 130;
  --z-lightbox: 160;
  --z-toast: 180;
}

/* --------------------------------------------------------------------------
   Blocs sombres
   On redéfinit ici les rôles sémantiques : titres, textes secondaires,
   bordures, surfaces et boutons s'adaptent alors automatiquement, sans avoir
   à dupliquer une règle par composant.
   -------------------------------------------------------------------------- */
.theme-dark,
.hero,
.page-hero,
.section--dark,
.emergency,
.centered-page,
.site-footer,
.drawer__panel,
.sticky-cta,
.info-panel,
.why__highlight,
.radar {
  --bg: var(--ink-900);
  --bg-soft: var(--ink-850);
  --bg-elevated: rgba(255, 255, 255, .045);
  --text: #eef3fc;
  --text-muted: #a6b3cc;
  --text-subtle: #7d8bA6;
  --border: rgba(255, 255, 255, .1);
  --border-strong: rgba(255, 255, 255, .18);
  --accent: var(--aqua-400);
  --accent-contrast: var(--ink-950);

  --ghost-hover-bg: rgba(255, 255, 255, .12);
  --ghost-hover-fg: #ffffff;
  --ghost-hover-border: rgba(255, 255, 255, .5);

  color-scheme: dark;
}