/* =========================================================================
   FERVOLIS — Design tokens
   Charte "Noir & Braise" — noir profond, accent rouge incandescent, halos.
   Inspirée de la direction artistique de louloutech.fr.
   ========================================================================= */

/* --- Police hébergée sur le site (L-10) ---
   Plus Jakarta Sans, variable (wght), sous-ensemble latin, licence SIL OFL 1.1
   (assets/fonts/OFL.txt). Source : @fontsource-variable/plus-jakarta-sans@5.2.8. */
@font-face {
  font-family: "Plus Jakarta Sans";
  font-style: normal;
  font-display: swap;
  font-weight: 400 800;
  src: url("../fonts/plus-jakarta-sans-latin-wght-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Plus Jakarta Sans";
  font-style: italic;
  font-display: swap;
  font-weight: 400 800;
  src: url("../fonts/plus-jakarta-sans-latin-wght-italic.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* --- Fonds (noir très profond, jamais plat) --- */
  --bg-abyss:      #030303;
  --bg-base:       #050507;
  --surface:       #0c0c10;
  --surface-2:     #121217;
  --surface-3:     #1b1b22;
  --line:          rgba(255, 255, 255, 0.06);
  --line-strong:   rgba(255, 255, 255, 0.12);

  /* --- Texte --- */
  --text:          #FFFFFF;
  --text-soft:     #DBE0E9;
  --text-muted:    #BFC6D2;
  --text-faint:    #8b93a4;

  /* --- Accent rouge & dérivés --- */
  --accent:        #FF1A1A;   /* rouge incandescent (texte/icônes) */
  --accent-2:      #FF5555;   /* rouge clair (halos, dégradés)     */
  --accent-cyan:   #FF8A5A;   /* braise chaude, accent ponctuel    */
  --accent-ink:    #FFFFFF;   /* texte sur fond accent             */
  --red-pure:      #FF0000;
  --red-deep:      #D40000;

  --grad-signature: linear-gradient(135deg, #FF2A2A 0%, #FF5A4A 100%);
  --grad-soft:      linear-gradient(135deg, rgba(255,42,42,.16), rgba(255,90,74,.16));
  --grad-text:      linear-gradient(120deg, #FFFFFF 0%, #FFC9C2 40%, #FF3B2A 100%);

  /* --- Halos / lueurs rouges --- */
  --glow:          rgba(255, 0, 0, 0.55);
  --glow-accent:   0 0 0 1px rgba(255,0,0,.35), 0 14px 44px -12px rgba(255,0,0,.55);
  --glow-soft:     0 18px 60px -24px rgba(255,0,0,.45);

  /* --- Ombres --- */
  --shadow-sm:     0 1px 2px rgba(0,0,0,.5);
  --shadow-md:     0 18px 46px -20px rgba(0,0,0,.8);
  --shadow-lg:     0 44px 100px -34px rgba(0,0,0,.9);

  /* --- Typographie (police unique) --- */
  --font-display: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body:    "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --fs-eyebrow: clamp(.72rem, .7rem + .15vw, .82rem);
  --fs-h1:      clamp(2.6rem, 1.6rem + 4.4vw, 5.2rem);
  --fs-h2:      clamp(2rem, 1.3rem + 2.8vw, 3.4rem);
  --fs-h3:      clamp(1.3rem, 1.1rem + .8vw, 1.7rem);
  --fs-lead:    clamp(1.05rem, .98rem + .5vw, 1.3rem);
  --fs-body:    1rem;
  --fs-small:   .875rem;

  /* --- Rythme / layout --- */
  --maxw:       1200px;
  --maxw-narrow: 760px;
  --gutter:     clamp(1.25rem, .8rem + 2.4vw, 3rem);
  --section-y:  clamp(4.5rem, 3rem + 7vw, 9rem);
  --radius:     12px;
  --radius-sm:  8px;
  --radius-lg:  18px;
  --radius-pill: 999px;
  --radius-btn: 10px;

  /* --- Mouvement (MOUV-1) : une échelle commune ---
     Trois durées et deux courbes. Les alias historiques (--ease, --ease-out,
     --ease-fluid, --t-*) pointent sur ces jetons : mêmes valeurs qu'avant. */
  --dur-short:  .2s;
  --dur-med:    .4s;
  --dur-long:   .7s;
  --ease-soft:  cubic-bezier(.4, 0, .2, 1);   /* sortie douce            */
  --ease-expo:  cubic-bezier(.16, 1, .3, 1);  /* sortie « expo », nerveuse */

  /* --- Transitions (fluides, façon louloutech) --- */
  --ease:       var(--ease-soft);
  --ease-out:   var(--ease-expo);
  --ease-fluid: var(--ease-expo);
  --t-fast:     var(--dur-short) var(--ease-soft);
  --t-med:      var(--dur-med) var(--ease-expo);
  --t-slow:     .6s var(--ease-expo);

  --header-h:   66px;
  /* + encart de sécurité du haut (encoche), 0 sur ordinateur */
  --dock-top:   calc(clamp(0.65rem, 0.35rem + 1.1vw, 1.15rem) + env(safe-area-inset-top, 0px));
  --dock-gap:   0.85rem;
  --dock-inset: calc(var(--dock-top) + var(--header-h) + var(--dock-gap));
  --dock-scroll: 0;
}