/* ==========================================================================
   WeRefund — Design tokens
   --------------------------------------------------------------------------
   Valeurs relevées en direct sur la référence (rexen.framer.website, thème
   clair, viewport 1512) puis normalisées sur un cadre de 1280 px, et étendues
   au vocabulaire propre à WeRefund : états de conformité et fenêtre de retour.

   🔴 LA VITRINE EST EN BLANC, TOUJOURS — décision de Rico, 09/09/2026.
   Elle ne suit PAS le réglage clair/sombre du visiteur. Le `color-scheme: light`
   ci-dessous et l'absence de `@media (prefers-color-scheme: dark)` sont
   délibérés : une page qui bascule en sombre chez un visiteur au thème sombre
   n'est plus « la version white ».
   Une palette sombre reste disponible en bas de fichier, derrière une classe
   d'adhésion explicite que rien ne pose automatiquement.

   Règle : AUCUNE couleur n'est écrite en dur ailleurs que dans ce fichier.
   ========================================================================== */

:root {
  color-scheme: light;

  /* --- Grille ------------------------------------------------------------ */
  --frame: 1280px;      /* largeur de la section encadrée */
  --container: 1176px;  /* largeur du contenu */
  --gutter: 24px;
  --nav-h: 68px;

  /* --- Encre ------------------------------------------------------------- */
  --ink: #0F1115;         /* titres */
  --ink-body: #323745;    /* corps */
  --ink-soft: #50576B;    /* secondaire */
  --ink-muted: #697289;   /* tertiaire */
  --ink-faint: #868D9C;   /* labels, méta */
  --ink-invert: #FFFFFF;

  /* --- Surfaces ---------------------------------------------------------- */
  --bg: #FFFFFF;
  --bg-page: #FCFCFD;
  --surface-1: #F9FAFA;
  --surface-2: #F4F6F6;
  --surface-3: #E9EEF1;
  --surface-inset: #F7F8F9;
  /* Fond des panneaux de la section Bénéfices (Rico, 15/09 : le gris #F5F5F5 de la
     référence). Aucune surface existante ne vaut exactement ce gris. */
  --panel: #F5F5F5;
  --stage-border: #E5E5E5;   /* bordure du cadre de l'animation du hero (Rico, 15/09) */

  /* --- Traits ------------------------------------------------------------ */
  --line: #E9ECEF;
  --line-soft: rgba(137, 157, 169, .16);
  --line-hair: rgba(137, 157, 169, .09);
  --hatch: rgba(15, 17, 21, .035);
  /* Voile posé sur la page quand un méga-menu s'ouvre. Assez dense pour que
     le panneau blanc se détache, assez léger pour qu'on lise encore ce qu'il
     y a derrière — un voile opaque donnerait une modale, pas un menu. */
  --scrim: rgba(18, 24, 20, .07);

  /* --- Noir de CTA ------------------------------------------------------- */
  --solid: #151619;
  --solid-hover: #2A2C33;
  --solid-ink: #FFFFFF;

  /* --- Accent : le vert WeRefund (Rico, 15/09/2026 — D30, remplace le violet) ---
     #2EF19C ne fait que 1,48:1 sur blanc : c'est la couleur des aplats, barres, anneaux,
     points, bordures et halos, jamais d'un texte. Le texte d'accent prend --accent-ink
     (5,48:1) ; ce qui est posé SUR le vert prend --accent-on (12,8:1).              */
  --accent: #2EF19C;
  --accent-hover: #22DC8C;
  --accent-ink: #047857;
  --accent-on: #0F1115;
  --accent-soft: rgba(46, 241, 156, .16);
  --accent-line: rgba(46, 241, 156, .48);
  --accent-glow: rgba(46, 241, 156, .34);
  /* Fond du bouton WeRefund des maquettes de checkout, et de lui seul (Rico, 15/09). */
  --checkout-wr: #6BF7BA;

  /* --- Illustrations des témoignages (Rico, 16/09/2026) --------------------
     Pages produit dessinées des trois boutiques fictives de l'accueil : un fond
     et deux ou trois teintes par produit, plus les ombres et reflets du dessin.
     Ce sont des couleurs d'objet, pas de l'interface : elles ne suivent aucun
     thème.                                                                  */
  --ill-sweater-bg: #E8EDF3;
  --ill-sweater: #62738C;
  --ill-sweater-deep: #4A5A70;
  --ill-holder-bg: #F4EDE5;
  --ill-holder: #B4744A;
  --ill-holder-card: #EBDCCB;
  --ill-holder-band: #D9C3AB;
  --ill-lamp-bg: #F1EEE8;
  --ill-lamp: #CBA88C;
  --ill-lamp-deep: #9E7D63;
  --ill-lamp-shade: #FCFAF5;
  --ill-lamp-rim: #E4DACB;
  --ill-lamp-light: rgba(255, 226, 160, .55);
  --ill-shadow: rgba(15, 17, 21, .07);
  --ill-crease: rgba(15, 17, 21, .14);
  --ill-stitch: rgba(255, 255, 255, .34);
  --ill-emboss: rgba(255, 255, 255, .5);
  --ill-sheen: rgba(255, 255, 255, .28);

  /* --- Sémantique de conformité -----------------------------------------
     Volontairement distincte de l'accent : l'accent est une marque,
     ces trois couleurs sont un verdict. Les confondre rendrait un
     marchand en défaut indiscernable d'un lien cliquable.            */
  --ok: #16794A;
  --ok-soft: rgba(22, 163, 74, .12);
  --ok-line: rgba(22, 163, 74, .28);
  --warn: #B45309;
  --warn-soft: rgba(217, 119, 6, .14);
  --warn-line: rgba(217, 119, 6, .30);
  --risk: #B91C1C;
  --risk-soft: rgba(220, 38, 38, .11);
  --risk-line: rgba(220, 38, 38, .26);

  /* --- Typographie -------------------------------------------------------
     Inter est chargée en variable : l'axe optique `opsz` reproduit
     exactement la coupe « Inter Display » utilisée par la référence.   */
  --font-display: "Inter", "Inter Display", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-text: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-mono: "Fragment Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;

  --fs-h1: clamp(2.375rem, 1.55rem + 3.3vw, 3.75rem);   /* 38 → 60 */
  --fs-h2: clamp(1.875rem, 1.35rem + 2.1vw, 2.75rem);   /* 30 → 44 */
  --fs-h3: clamp(1.375rem, 1.15rem + .85vw, 1.75rem);   /* 22 → 28 */
  --fs-lg: 1.1875rem;   /* 19 — titres de carte */
  --fs-md: 1.0625rem;   /* 17 — corps */
  --fs-sm: .9375rem;    /* 15 */
  --fs-xs: .875rem;     /* 14 */
  --fs-2xs: .8125rem;   /* 13 */
  --fs-3xs: .6875rem;   /* 11 — eyebrow */

  --lh-tight: 1.08;
  --lh-snug: 1.22;
  --lh-body: 1.58;

  --ls-display: -.033em;
  --ls-title: -.022em;
  --ls-body: -.014em;
  --ls-caps: .085em;

  /* --- Rayons ------------------------------------------------------------ */
  --r-pill: 999px;
  --r-xl: 28px;
  --r-lg: 18px;
  --r-md: 12px;
  --r-sm: 8px;
  --r-xs: 6px;

  /* --- Ombres ------------------------------------------------------------ */
  --sh-hair: 0 0 0 1px var(--line-soft);
  --sh-sm: 0 1px 2px rgba(15, 17, 21, .04);
  --sh-md: 0 1px 2px rgba(15, 17, 21, .04), 0 8px 24px -14px rgba(15, 17, 21, .18);
  --sh-lg: 0 1px 2px rgba(15, 17, 21, .04), 0 18px 48px -22px rgba(15, 17, 21, .26);
  --sh-pop: 0 2px 6px rgba(15, 17, 21, .06), 0 28px 64px -28px rgba(15, 17, 21, .32);

  /* --- Rythme vertical --------------------------------------------------- */
  --sp-section: clamp(72px, 8vw, 128px);
  --sp-block: clamp(40px, 4.5vw, 64px);

  /* --- Mouvement --------------------------------------------------------- */
  --ease: cubic-bezier(.22, .61, .36, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --dur: .34s;
  --dur-slow: .6s;
}

/* Le fond est peint explicitement sur les deux éléments racine : sans ça, un
   hôte au thème sombre laisse voir sa propre couleur au dépassement de scroll. */
html { background: var(--bg-page); }

/* ==========================================================================
   Palette sombre — CONSERVÉE MAIS DORMANTE
   --------------------------------------------------------------------------
   Valeurs mesurées sur le thème sombre réel de la référence, pas une
   inversion mécanique du thème clair. Rien ne pose `theme-dark`
   automatiquement : ni le réglage système du visiteur, ni l'hôte qui affiche
   la page. Pour l'essayer un jour : <html class="theme-dark">.
   ========================================================================== */

:root.theme-dark {
  color-scheme: dark;

  --ink: #F4F5F7;
  --ink-body: #D5D6DB;
  --ink-soft: #B8BAC2;
  --ink-muted: #8F929C;
  --ink-faint: #767980;
  --ink-invert: #0F0F10;

  --bg: #0F0F10;
  --bg-page: #0B0B0C;
  --surface-1: #161617;
  --surface-2: #1E1E1F;
  --surface-3: #262629;
  --surface-inset: #131314;
  --panel: var(--surface-1);

  --line: #232326;
  --line-soft: rgba(169, 169, 178, .16);
  --line-hair: rgba(169, 169, 178, .08);
  --hatch: rgba(255, 255, 255, .035);

  --solid: #FFFFFF;
  --solid-hover: #E3E4E8;
  --solid-ink: #0F0F10;

  --accent: #2EF19C;
  --accent-hover: #5CF5B2;
  --accent-ink: #5CF5B2;
  --accent-on: #0F1115;
  --accent-soft: rgba(46, 241, 156, .18);
  --accent-line: rgba(46, 241, 156, .38);
  --accent-glow: rgba(46, 241, 156, .30);
  --checkout-wr: #6BF7BA;

  --ok: #4ADE80;
  --ok-soft: rgba(74, 222, 128, .14);
  --ok-line: rgba(74, 222, 128, .30);
  --warn: #FBBF24;
  --warn-soft: rgba(251, 191, 36, .14);
  --warn-line: rgba(251, 191, 36, .30);
  --risk: #F87171;
  --risk-soft: rgba(248, 113, 113, .13);
  --risk-line: rgba(248, 113, 113, .28);

  --sh-sm: 0 1px 2px rgba(0, 0, 0, .5);
  --sh-md: 0 1px 2px rgba(0, 0, 0, .5), 0 8px 24px -14px rgba(0, 0, 0, .8);
  --sh-lg: 0 1px 2px rgba(0, 0, 0, .5), 0 18px 48px -22px rgba(0, 0, 0, .9);
  --sh-pop: 0 2px 6px rgba(0, 0, 0, .6), 0 28px 64px -28px rgba(0, 0, 0, 1);
}