/* =============================================================================
   TOKENS — charte graphique dérivée du logo Fidem Froid Clim
   ========================================================================== */
:root {
  /* --- Couleurs de marque (prélevées sur le logo) --------------------------- */
  --navy-900: #12293A;   /* texte du logotype, fonds profonds */
  --navy-800: #17303F;
  --navy-700: #1B3B50;   /* départ du dégradé de l'anneau */
  --navy-600: #24405B;
  --steel-500:#3E7B9B;   /* point central du logo, couleur d'action */
  --steel-400:#4A8AAB;
  /* Arrêt clair du dégradé des boutons primaires. Distinct de --steel-400 :
     en texte blanc, #4A8AAB ne donne que 3,81:1, sous le minimum de 4,5:1 exigé
     pour du texte de taille courante (WCAG 1.4.3). Sur un bouton large, le
     libellé atteint bel et bien cette extrémité du dégradé — mesuré au pixel.
     Assombri de 12 %, il passe à 4,77:1 en conservant la teinte. */
  --steel-cta: #417996;
  --steel-300:#6FA6C0;
  --sky-200:  #A8CFE0;   /* fin du dégradé de l'anneau */
  --sky-100:  #CDE6F1;
  --ice-50:   #DCEEF4;   /* teinte la plus claire de la palette */
  --white:    #FFFFFF;

  /* --- Neutres ------------------------------------------------------------- */
  --ink:      #12293A;
  --ink-soft: #3C5568;
  --muted:    #5C7181;   /* assombri : #62788A tombait à 4,47:1 sur blanc */
  --line:     rgba(18, 41, 58, 0.10);
  --line-strong: rgba(18, 41, 58, 0.18);
  --canvas:   #F5FAFC;
  --surface:  #FFFFFF;
  --surface-2:#EFF7FA;

  /* --- Accents fonctionnels (usage parcimonieux) --------------------------- */
  --ember-500:#C2691F;   /* urgence / dépannage */
  --ember-50: #FBF0E4;
  --leaf-600: #2E7D63;   /* délai « aujourd'hui », écologie */
  --leaf-50:  #E4F3EE;

  /* --- Dégradés ------------------------------------------------------------ */
  --grad-brand: linear-gradient(120deg, var(--navy-700) 0%, var(--steel-500) 48%, var(--sky-200) 100%);
  --grad-deep:  linear-gradient(165deg, #0E2231 0%, #17303F 42%, #234a63 100%);
  --grad-frost: linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,.62));
  --grad-sheen: linear-gradient(115deg, transparent 12%, rgba(255,255,255,.55) 48%, transparent 84%);

  /* --- Profondeur : ombres empilées, jamais plates ------------------------- */
  --sh-xs: 0 1px 2px rgba(18,41,58,.06);
  --sh-sm: 0 2px 4px rgba(18,41,58,.05), 0 6px 14px -6px rgba(18,41,58,.10);
  --sh-md: 0 3px 6px rgba(18,41,58,.05), 0 14px 28px -12px rgba(18,41,58,.16);
  --sh-lg: 0 6px 12px rgba(18,41,58,.06), 0 28px 56px -20px rgba(18,41,58,.24);
  --sh-glow: 0 18px 44px -18px rgba(62,123,155,.62);
  --sh-inset: inset 0 1px 0 rgba(255,255,255,.7);

  /* --- Rayons -------------------------------------------------------------- */
  --r-xs: 8px;
  --r-sm: 12px;
  --r-md: 18px;
  --r-lg: 26px;
  --r-xl: 34px;
  --r-pill: 999px;

  /* --- Typographie --------------------------------------------------------- */
  --font-title: 'Alice', 'Iowan Old Style', 'Palatino Linotype', Palatino, Georgia, 'Times New Roman', serif;
  --font-body:  'Garet', 'Avenir Next', Avenir, 'Century Gothic', 'Segoe UI', system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif;
  --font-quote: 'Bree Serif', 'Bitter', Georgia, 'Times New Roman', serif;

  /* Échelle fluide : lisible sur mobile, ample sur grand écran */
  --t-xs:   clamp(0.75rem, 0.72rem + 0.15vw, 0.82rem);
  --t-sm:   clamp(0.86rem, 0.83rem + 0.16vw, 0.94rem);
  --t-base: clamp(1rem, 0.97rem + 0.18vw, 1.08rem);
  --t-lg:   clamp(1.1rem, 1.04rem + 0.32vw, 1.28rem);
  --t-xl:   clamp(1.3rem, 1.18rem + 0.6vw, 1.65rem);
  --t-2xl:  clamp(1.45rem, 1.28rem + 0.82vw, 2.1rem);
  --t-3xl:  clamp(1.72rem, 1.5rem + 1.1vw, 2.65rem);
  --t-4xl:  clamp(2.05rem, 1.72rem + 1.62vw, 3.4rem);

  /* --- Rythme -------------------------------------------------------------- */
  --gap-xs: .5rem;
  --gap-sm: .85rem;
  --gap-md: 1.4rem;
  --gap-lg: 2.2rem;
  --gap-xl: 3.4rem;
  --section-y: clamp(3.5rem, 2.2rem + 5.4vw, 7rem);
  /* Largeur maximale du contenu. Portée de 1220 px à 2600 px : sur un écran de
     1920 px, la coquille s'arrêtait à 1220 et laissait près de 700 px de vide
     réparti à gauche et à droite. Le site occupe maintenant la largeur
     disponible et ne se recadre qu'au-delà de 2600 px — un écran de 2560 px est
     donc rempli d'un bord à l'autre. Au-delà, la limite se justifie par le
     contenu lui-même : les photos de la galerie mesurent environ 500 px de
     large à la source et seraient étirées, et le texte des cartes dépasserait
     la longueur de ligne qu'un œil peut suivre sans se perdre.
     Doit rester une longueur simple : .hero__media s'en sert pour calculer
     son débord jusqu'au bord de la fenêtre. */
  --shell: 2600px;
  /* Même pente qu'avant — donc AUCUN changement en dessous de 1380 px, où le
     rembourrage plafonnait déjà — mais le plafond passe de 2,5 à 5 rem pour que
     la marge latérale reste proportionnée sur un grand écran. */
  --shell-pad: clamp(1.1rem, 0.6rem + 2.2vw, 5rem);
  /* Hauteur du bandeau de navigation. Elle suit maintenant l'élargissement de
     la page : figée, la barre paraissait rétrécir à mesure que le contenu
     s'étendait. Les bornes sont calées pour qu'AUCUNE valeur ne change en
     dessous de 1455 px — au-delà, la barre grandit jusqu'à 96 px. */
  --header-h: clamp(74px, 42px + 2.2vw, 96px);
  /* Corps de texte du bandeau : navigation, téléphone et bouton d'action.
     Même principe — identique à --t-xs jusqu'à 1440 px, puis croissant. */
  --t-nav: clamp(.82rem, .59rem + .26vw, 1rem);

  /* --- Mouvement ----------------------------------------------------------- */
  --ease-out: cubic-bezier(.22, .68, .36, 1);
  --ease-spring: cubic-bezier(.2, .9, .3, 1.12);
  --dur-fast: 160ms;
  --dur: 280ms;
  --dur-slow: 620ms;
}

@media (max-width: 860px) {
  :root { --header-h: 64px; }
}

/* Réduction des animations : préférence système respectée partout. */
@media (prefers-reduced-motion: reduce) {
  :root { --dur-fast: 1ms; --dur: 1ms; --dur-slow: 1ms; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}