/* ============================================================
   Variables CSS — Golf 7 Fontaines
   Palette claire et chaleureuse, typographie grotesque.
   Les couleurs primaire/accent sont surchargées par le Customizer.
   ============================================================ */

:root {

  /* Couleurs de marque (injectées dynamiquement par PHP) — reprises du logo */
  --vc-color-primary: #0a4240;   /* vert profond du bandeau */
  --vc-color-accent:  #b81018;   /* rouge du fanion */

  /* Neutres chauds */
  --vc-color-cream:      #fbf9f5;
  --vc-color-cream-2:    #f4f0e8;
  --vc-color-sand:       #ebe5d9;
  --vc-color-white:      #ffffff;
  --vc-color-ink:        #14140f;
  --vc-color-ink-soft:   #3a3831;
  --vc-color-grey-400:   #a5a094;
  --vc-color-grey-500:   #6e6a5f;
  --vc-color-grey-700:   #4a473f;

  /* Neutres sombres (hero, footer, médias) */
  --vc-color-black:      #0d0d0b;
  --vc-color-dark:       #14140f;
  --vc-color-dark-2:     #1e1e18;
  --vc-color-dark-3:     #2a2a22;

  /* Couleurs sémantiques */
  --vc-color-bg:         var(--vc-color-cream);
  --vc-color-bg-alt:     var(--vc-color-cream-2);
  --vc-color-surface:    var(--vc-color-white);
  --vc-color-text:       var(--vc-color-ink);
  --vc-color-text-muted: var(--vc-color-grey-500);
  --vc-color-border:     rgba(20, 20, 15, 0.12);
  --vc-color-border-soft:rgba(20, 20, 15, 0.07);
  --vc-color-overlay:    rgba(13, 13, 11, 0.55);

  /* Équivalents pour les fonds sombres (hero, footer) */
  --vc-on-dark:          #fbf9f5;
  --vc-on-dark-muted:    rgba(251, 249, 245, 0.7);
  --vc-on-dark-border:   rgba(251, 249, 245, 0.22);

  /* Typographie — grotesque serrée (display) + grotesque neutre (texte) */
  --vc-font-heading: 'Inter Tight', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --vc-font-body:    'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --vc-font-mono:    ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;

  --vc-font-size-xs:   0.8125rem;
  --vc-font-size-sm:   0.9375rem;
  --vc-font-size-base: 1.0625rem;
  --vc-font-size-md:   1.1875rem;
  --vc-font-size-lg:   1.375rem;
  --vc-font-size-xl:   1.75rem;
  --vc-font-size-2xl:  clamp(1.75rem, 3vw, 2.5rem);
  --vc-font-size-3xl:  clamp(2.25rem, 5.5vw, 4rem);
  --vc-font-size-hero: clamp(2.75rem, 9vw, 6.5rem);

  /* Réglages display : tracking serré façon Neue Haas */
  --vc-tracking-display: -0.035em;
  --vc-tracking-tight:   -0.02em;
  --vc-tracking-wide:    0.18em;

  --vc-line-height-tight:  1.05;
  --vc-line-height-snug:   1.25;
  --vc-line-height-normal: 1.6;
  --vc-line-height-loose:  1.75;

  /* Espacement */
  --vc-space-1:  0.25rem;
  --vc-space-2:  0.5rem;
  --vc-space-3:  0.75rem;
  --vc-space-4:  1rem;
  --vc-space-5:  1.25rem;
  --vc-space-6:  1.5rem;
  --vc-space-8:  2rem;
  --vc-space-10: 2.5rem;
  --vc-space-12: 3rem;
  --vc-space-16: 4rem;
  --vc-space-20: 5rem;
  --vc-space-24: 6rem;
  --vc-space-32: 8rem;

  /* Rythme vertical des sections — respiration généreuse */
  --vc-section-py:      clamp(4.5rem, 11vw, 10rem);
  --vc-section-py-sm:   clamp(3rem, 7vw, 6rem);
  --vc-gap-grid:        clamp(1.5rem, 2.5vw, 2.25rem);

  /* Layout */
  --vc-max-width:         1500px;
  --vc-content-width:     1240px;
  --vc-content-narrow:    760px;
  --vc-container-padding: clamp(1.25rem, 5vw, 4rem);

  /* Header */
  --vc-header-height:  88px;
  --vc-header-bg:      rgba(251, 249, 245, 0.88);
  --vc-header-z:       100;

  /* Border radius */
  --vc-radius-sm:  3px;
  --vc-radius-md:  6px;
  --vc-radius-lg:  14px;
  --vc-radius-xl:  22px;
  --vc-radius-full: 9999px;

  /* Ombres — discrètes sur fond clair */
  --vc-shadow-sm:   0 1px 2px rgba(20, 20, 15, .06);
  --vc-shadow-md:   0 6px 24px rgba(20, 20, 15, .08);
  --vc-shadow-lg:   0 18px 48px rgba(20, 20, 15, .12);
  --vc-shadow-card: 0 2px 10px rgba(20, 20, 15, .06);

  /* Transitions */
  --vc-ease:         cubic-bezier(.4, 0, .2, 1);
  --vc-ease-out:     cubic-bezier(.16, 1, .3, 1);
  --vc-duration-fast:   150ms;
  --vc-duration-base:   280ms;
  --vc-duration-slow:   600ms;

  /* Breakpoints (utilisés en JS via getComputedStyle) */
  --vc-bp-sm:  640px;
  --vc-bp-md:  768px;
  --vc-bp-lg:  1024px;
  --vc-bp-xl:  1280px;
  --vc-bp-2xl: 1440px;
}

/* Zoom des visuels, déclaré comme propriété typée pour rester transitionnable.
   Les images composent deux transformations indépendantes :
   translate3d(--vc-parallax-y) piloté au scroll par parallax.js, et
   scale(--vc-zoom) piloté au survol. Sans @property, --vc-zoom ne pourrait pas
   être animé, et transitionner `transform` ferait traîner le parallaxe. */
@property --vc-zoom {
  syntax: '<number>';
  inherits: false;
  initial-value: 1;
}