/* ==========================================================================
   VITIS GROUPE — Charte graphique
   Direction : ardoise nuit & sauge
   Fichier a placer dans /assets/css/brand.css et importe en premier
   ========================================================================== */

:root {

  /* --- Couleurs de marque ------------------------------------------------ */
  --vg-slate:            #26333F;  /* couleur principale, texte, logo        */
  --vg-slate-deep:       #1A242D;  /* footer, sections sombres               */
  --vg-slate-soft:       #3D4C59;  /* survols sur fond sombre                */

  --vg-sage:             #7FB09A;  /* accent decoratif, filets, icones       */
  --vg-sage-deep:        #3F7D66;  /* boutons, liens, tout texte accentue    */
  --vg-sage-darker:      #2F6250;  /* survol des boutons                     */
  --vg-sage-wash:        #EDF3F0;  /* fonds de section teintes               */

  /* --- Surfaces ---------------------------------------------------------- */
  --vg-canvas:           #F6F7F5;  /* fond de page                           */
  --vg-surface:          #FFFFFF;  /* cartes, formulaires                    */
  --vg-surface-alt:      #FBFCFB;  /* alternance de sections                 */

  /* --- Texte ------------------------------------------------------------- */
  --vg-text:             #1F2A33;
  --vg-text-muted:       #5C6B76;
  --vg-text-subtle:      #8494A0;
  --vg-text-invert:      #FFFFFF;

  /* --- Bordures ---------------------------------------------------------- */
  --vg-border:           #E2E6E3;
  --vg-border-strong:    #C8D0CC;
  --vg-focus:            #3F7D66;

  /* --- Etats ------------------------------------------------------------- */
  --vg-success:          #3F7D66;
  --vg-success-wash:     #EDF3F0;
  --vg-error:            #B4483F;
  --vg-error-wash:       #FBEDEC;
  --vg-warning:          #A9762A;
  --vg-warning-wash:     #FBF3E6;

  /* --- Typographie ------------------------------------------------------- */
  /* Titres : serif institutionnel, lisible en grand comme en petit corps.
     Texte : grotesque neutre a chiffres tabulaires, indispensable pour
     aligner montants et mensualites dans le simulateur. */
  --vg-font-display: "Source Serif 4", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --vg-font-body:    "Inter", -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --vg-size-hero:    clamp(2.25rem, 1.4rem + 3.6vw, 4rem);
  --vg-size-h1:      clamp(1.9rem, 1.3rem + 2.4vw, 3rem);
  --vg-size-h2:      clamp(1.5rem, 1.15rem + 1.4vw, 2.125rem);
  --vg-size-h3:      clamp(1.15rem, 1rem + 0.6vw, 1.5rem);
  --vg-size-body:    1rem;
  --vg-size-small:   0.875rem;
  --vg-size-caption: 0.8125rem;

  --vg-leading-tight: 1.15;
  --vg-leading-body:  1.7;
  --vg-tracking-wordmark: 0.2em;
  --vg-tracking-eyebrow:  0.16em;

  /* --- Rythme et formes -------------------------------------------------- */
  --vg-space-1: 0.5rem;
  --vg-space-2: 1rem;
  --vg-space-3: 1.5rem;
  --vg-space-4: 2.5rem;
  --vg-space-5: 4rem;
  --vg-space-6: 6rem;

  --vg-radius-sm: 6px;
  --vg-radius:    12px;
  --vg-radius-lg: 20px;

  --vg-shadow-sm: 0 1px 2px rgba(31, 42, 51, 0.05);
  --vg-shadow:    0 6px 20px rgba(31, 42, 51, 0.07);
  --vg-shadow-lg: 0 18px 48px rgba(31, 42, 51, 0.11);

  /* --- Mouvement --------------------------------------------------------- */
  --vg-ease:      cubic-bezier(0.22, 0.61, 0.36, 1);
  --vg-ease-out:  cubic-bezier(0.16, 1, 0.3, 1);
  --vg-dur-fast:  160ms;
  --vg-dur:       320ms;
  --vg-dur-slow:  620ms;

  --vg-container: 1200px;
  --vg-gutter:    clamp(1.25rem, 4vw, 3rem);
}

/* Sections sombres : le footer et le bandeau de confiance renversent les
   tokens de texte plutot que de redefinir chaque regle. */
.vg-inverted {
  --vg-text:        #FFFFFF;
  --vg-text-muted:  #A8B6BF;
  --vg-text-subtle: #7C8B96;
  --vg-border:      rgba(255, 255, 255, 0.12);
  --vg-surface:     var(--vg-slate-deep);
  background: var(--vg-slate-deep);
  color: var(--vg-text);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --vg-dur-fast: 1ms;
    --vg-dur:      1ms;
    --vg-dur-slow: 1ms;
  }
}