/* ============================================================
   WATTLIFT v10 - DESIGN SYSTEM
   Accent de marque : orange #FB8B39.
   Aucun vert volt. #FBBC05 reserve aux etoiles Google
   (declare dans la section avis, jamais ici).

   M22, retour design : PLUS AUCUN MARRON.
   La declinaison foncee de l'orange etait une terre de Sienne que
   le client lisait comme du marron. Toute la famille
   se resserre autour de #FB8B39 : meme teinte, uniquement des
   variations de luminosite, aucune couleur nouvelle.
   ============================================================ */

:root {
  /* === MARQUE ===
     --or est l'accent de marque : il habille les surfaces (boutons,
     pastilles, puces). --or-deep est la declinaison reservee au TEXTE
     sur fond clair et aux pieds de degrade.
     Contraste mesure de --or-deep sur blanc : 4,53:1, donc AA en
     texte courant comme en texte large. */
  --or:        #FB8B39;
  --or-dark:   #E8732A;
  --or-deep:   #C85107;
  --or-light:  #FFA866;
  --or-soft:   #FFF3E9;
  --or-line:   #FFE0C7;

  /* Degrade de marque, une seule definition pour tout le site :
     du plus profond au plus clair, sans jamais quitter la famille
     de #FB8B39. */
  --grad-or:      linear-gradient(100deg, var(--or-deep) 0%, var(--or) 45%, var(--or-light) 100%);
  --grad-or-soft: linear-gradient(135deg, var(--or) 0%, var(--or-dark) 100%);
  /* Pour les GRANDS aplats : on part de --or-dark et non de
     --or-deep. Sur une surface de plusieurs centaines de pixels,
     la teinte la plus foncee de la famille pese trop et tire le
     bandeau vers la terre cuite. */
  --grad-or-band: linear-gradient(100deg, var(--or-dark) 0%, var(--or) 45%, var(--or-light) 100%);

  /* === ENCRE ET NEUTRES === */
  --ink:       #14161A;
  --ink-2:     #2C3138;
  --ink-3:     #4A5058;
  --muted:     #6A7078;
  --muted-2:   #696F77;
  --line:      #E7E4E0;
  --line-2:    #F0EDE9;
  --paper:     #FFFFFF;
  --paper-alt: #FAF8F5;
  --paper-3:   #F4F1EC;

  /* === TYPOGRAPHIE ===
     Une seule fonte sur tout le site, Lato, celle deja utilisee
     pour les grands titres. --font-display nomme cet usage
     « grands titres » pour que les nouvelles pages tapent dessus
     sans qu'une fonte supplementaire puisse s'introduire. */
  --font: 'Lato', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-display: var(--font);

  --fs-xs:   clamp(0.75rem,  0.71rem + 0.20vw, 0.8125rem);
  --fs-sm:   clamp(0.8125rem, 0.78rem + 0.22vw, 0.9375rem);
  --fs-base: clamp(0.9375rem, 0.90rem + 0.28vw, 1.0625rem);
  --fs-lg:   clamp(1.0625rem, 1.00rem + 0.35vw, 1.1875rem);
  --fs-xl:   clamp(1.1875rem, 1.10rem + 0.50vw, 1.375rem);
  --fs-2xl:  clamp(1.375rem,  1.24rem + 0.70vw, 1.75rem);
  --fs-3xl:  clamp(1.625rem,  1.40rem + 1.10vw, 2.25rem);
  --fs-4xl:  clamp(1.9375rem, 1.60rem + 1.70vw, 3rem);
  --fs-5xl:  clamp(2.25rem,   1.75rem + 2.50vw, 3.875rem);

  --lh-tight: 1.08;
  --lh-snug:  1.24;
  --lh-norm:  1.5;
  --lh-loose: 1.68;

  /* === LAYOUT === */
  --wrap:      1180px;
  --wrap-wide: 1320px;
  --pad:       clamp(1rem, 4vw, 2rem);
  --sec-y:     clamp(4rem, 9vw, 7.5rem);

  /* === RAYONS === */
  --r-sm:  8px;
  --r-md:  14px;
  --r-lg:  20px;
  --r-xl:  28px;
  --r-pill: 999px;

  /* === OMBRES (legeres, jamais lourdes) === */
  --sh-1: 0 1px 2px rgba(20, 22, 26, .05);
  --sh-2: 0 4px 14px rgba(20, 22, 26, .07);
  --sh-3: 0 14px 38px rgba(20, 22, 26, .09);
  --sh-or: 0 8px 22px rgba(251, 139, 57, .28);

  /* === MOUVEMENT ===
     expo.out : entrees rapides puis freinage long.
     Aucun rebond, aucune rotation. */
  --ease-expo: cubic-bezier(.16, 1, .3, 1);
  --ease-out:  cubic-bezier(.22, .61, .36, 1);
  --t-fast: .18s var(--ease-out);
  --t-base: .32s var(--ease-out);
  --t-slow: .7s var(--ease-expo);

  /* === PLANS === */
  --z-nav:    600;
  --z-panel:  900;
  --z-float:  700;
}

@media (prefers-reduced-motion: reduce) {
  :root { --t-fast: .01ms; --t-base: .01ms; --t-slow: .01ms; }
}