/* =====================================================================
   variables.css  -  KL TRAVAUX (Montpellier)
   DA : PLB-7 Acier graphite (Neo-Editorial)
   Skin imposee par da_engine : Fraunces + DM Sans, accent #37536B
   ===================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300..900;1,9..144,300..900&family=DM+Sans:ital,opsz,wght@0,9..40,300..800;1,9..40,300..800&display=swap');

:root {
  /* Couleurs - palette Acier graphite (Neo-Editorial PLB-7) */
  --bg:        #F1F0EC;          /* blanc casse chaud */
  --bg-alt:    #E7E5DF;          /* sable trame */
  --surface:   #FAF9F5;          /* papier creme leger */
  --surface-2: #D9D6CC;
  --text:      #2C2C2C;          /* encre profonde - JAMAIS --ink */
  --text-2:    #545454;
  --text-mute: #8A8884;
  --border:    rgba(44,44,44,0.14);
  --border-strong: rgba(44,44,44,0.32);

  --accent:    #37536B;          /* acier graphite */
  --accent-2:  #7894AE;          /* acier clair (derive lighter) */
  --accent-soft: rgba(55,83,107,0.10);
  --primary:   #2C2C2C;
  --wa-green:  #25D366;
  --wa-dark:   #128C7E;
  --warn:      #B8472A;
  --ok:        #2E7D5B;

  /* Typo */
  --ff-display: 'Fraunces', Georgia, 'Times New Roman', serif;
  --ff-body:    'DM Sans', system-ui, -apple-system, sans-serif;
  --ff-ui:      'DM Sans', system-ui, -apple-system, sans-serif;

  /* Echelle fluide */
  --fs-xs:   clamp(0.75rem, 0.71rem + 0.18vw, 0.85rem);
  --fs-sm:   clamp(0.875rem, 0.82rem + 0.25vw, 1rem);
  --fs-base: clamp(1rem, 0.95rem + 0.3vw, 1.125rem);
  --fs-lg:   clamp(1.18rem, 1.05rem + 0.5vw, 1.45rem);
  --fs-xl:   clamp(1.55rem, 1.3rem + 1vw, 2.2rem);
  --fs-2xl:  clamp(2.1rem, 1.7rem + 2vw, 3.4rem);
  --fs-3xl:  clamp(2.6rem, 2rem + 3.5vw, 5rem);

  /* Espacements */
  --gap-1: 0.5rem;
  --gap-2: 1rem;
  --gap-3: 1.5rem;
  --gap-4: 2.5rem;
  --gap-5: 4rem;

  /* Rayons */
  --r-sm: 4px;
  --r-md: 8px;
  --r-lg: 14px;
  --r-xl: 22px;

  /* Header / containers */
  --header-h:        76px;
  --header-h-mobile: 60px;
  --container:       1240px;

  /* Z-index - regle absolue : header > menu */
  --z-header: 1100;
  --z-menu:   1000;
  --z-modal:  2000;
  --z-fab:    900;

  /* Transitions */
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --dur:  280ms;
}