/* ==========================================================================
   LUUBO · SerenTag — Design tokens
   --------------------------------------------------------------------------
   Identité LUUBO : blanc pur + Santorini Blue.
   Choix client (et non la planche de marque, qui indiquait Warm White) :
   le fond est un BLANC PUR, pour que le bleu ressorte au maximum. Toute la
   famille des neutres est donc froide, très légèrement bleutée — ne jamais
   réintroduire un beige ici, il jaunirait aussitôt sur du blanc pur.
   Les valeurs bleues sont relevées sur la planche de marque ; si vos Pantone
   officiels diffèrent, corrigez-les ICI : elles se propagent à toute la page.

   Mise en page « plein cadre » : la page est faite de blocs de couleur qui se
   touchent, pas de cartes qui flottent sur un fond. Les gouttières sont donc
   volontairement courtes et la typo de titre volontairement grande.
   ========================================================================== */

:root {
  /* --- Fonds ----------------------------------------------------------
     --surface est volontairement identique à --ground : sur un fond blanc,
     une carte se distingue par son TRAIT, pas par son fond. (`.section--paper`
     n'est plus utilisé ; si vous le réintroduisez, donnez-lui --ground-deep.)
     -------------------------------------------------------------------- */
  --ground:        #FFFFFF;   /* blanc pur : fond de page */
  --ground-deep:   #F1F4FF;   /* bandes alternées : blanc à peine bleuté */
  --surface:       #FFFFFF;   /* cartes */
  --surface-muted: #F3F6FF;
  --night:         #0B1240;   /* bleu nuit : sections sombres, bezel téléphone */
  --night-soft:    #16205C;

  /* --- Encre ----------------------------------------------------------
     --ink-faint a été assombri deux fois en passant au blanc pur : #8A8FA4
     tombait à 3,4:1 et #757A90 encore à 4,25:1, tous deux sous le seuil AA.
     Il porte des mentions réelles (prix à la médaille, légendes, mention
     légale), pas de la décoration : ne le rééclaircissez pas.
     Ratios ci-dessous MESURÉS sur fond blanc, pas estimés.
     -------------------------------------------------------------------- */
  --ink:        #15172A;   /* 17,7:1 */
  --ink-strong: #000000;
  --ink-soft:   #565C74;   /* 6,6:1 */
  --ink-faint:  #6E7389;   /* 4,7:1 — plancher AA, ne pas éclaircir */
  --on-night:      #FFFFFF;
  --on-night-soft: #AEB8E4;

  /* --- Santorini Blue (couleur d'action de la marque) ------------------ */
  /* Bleu OFFICIEL de la charte, repris du pack de logo (son README le déclare
     et les huit SVG l'utilisent). Le site employait #1B3FE0 : le logo se
     retrouvait dans une nuance différente du bouton voisin, en en-tête.
     Ne pas revenir en arrière sans changer aussi les fichiers du logo. */
  --blue:        #173DBD;   /* 8,6:1 sur blanc */
  --blue-hover:  #12309A;
  --blue-bright: #2452E8;   /* pastilles, icônes pleines, accents */
  --blue-tint:   #E8ECFE;   /* panneaux clairs */
  --blue-line:   #C6D1FB;
  --blue-glow:   rgba(27, 63, 224, .30);

  /* --- Accent de mise en page ------------------------------------------
     Troisième couleur, à mi-chemin entre le fond et le bleu d'action : elle
     porte le bandeau d'avis, le panneau d'abonnement, les pastilles
     « Économisez » et la colonne SerenTag du comparatif. Le texte posé
     dessus est toujours --night, jamais du blanc.
     -------------------------------------------------------------------- */
  --accent:        #BFCEFB;
  --accent-strong: #9DB4F8;
  --accent-soft:   #DCE4FD;

  /* --- Signalétique --------------------------------------------------- */
  --focus:  #0B1240;   /* anneau de focus : lisible sur crème, blanc ET bleu */
  --danger: #B3261E;

  /* --- Traits & rayons -------------------------------------------------
     Rayons sobres : au-delà de --r-lg on retombe dans le « gros bloc
     arrondi » qui fait générique. Les grands blocs sont carrés.
     -------------------------------------------------------------------- */
  --line:        #E4E7F2;   /* neutre froid — un beige jaunirait sur blanc */
  --line-strong: #CBD1E4;
  --r-xs: 8px;
  --r-sm: 12px;
  --r:    16px;
  --r-lg: 24px;
  --r-xl: 32px;
  --r-pill: 999px;

  /* --- Ombres (basses, teintées bleu nuit) ---------------------------- */
  --sh-1: 0 1px 2px rgba(11, 18, 64, .06), 0 2px 8px rgba(11, 18, 64, .05);
  --sh-2: 0 2px 4px rgba(11, 18, 64, .06), 0 8px 24px rgba(11, 18, 64, .08);
  --sh-3: 0 4px 8px rgba(11, 18, 64, .07), 0 18px 48px rgba(11, 18, 64, .12);
  --sh-phone: 0 8px 16px rgba(11, 18, 64, .14), 0 40px 80px rgba(11, 18, 64, .20);

  /* --- Typographie ----------------------------------------------------
     Fredoka reprend les formes rondes du logo LUUBO (titres, chiffres,
     wordmark). Inter porte le texte courant.

     Échelle haute assumée : sur le site de référence le titre occupe la
     moitié de l'écran. Un titre timide noyé dans du blanc = aspect gabarit.
     -------------------------------------------------------------------- */
  --font: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
          "Helvetica Neue", Arial, sans-serif;
  --font-display: "Fredoka", "Inter", ui-sans-serif, system-ui, -apple-system,
          "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  --t-display: clamp(2.7rem, 1.05rem + 5.9vw, 5.5rem);
  --t-h2:      clamp(2rem,  1.05rem + 3.4vw, 3.6rem);
  --t-h3:      clamp(1.15rem, 1rem + .7vw, 1.5rem);
  --t-lead:    clamp(1.05rem, .98rem + .4vw, 1.25rem);
  --t-body:    1rem;
  --t-sm:      .9375rem;
  --t-xs:      .8125rem;
  --t-label:   .75rem;

  /* --- Rythme ----------------------------------------------------------
     --max borne le texte courant ; les blocs visuels vont jusqu'au bord de
     l'écran (.wrap--wide, .bleed). --nav-h sert aux éléments collants.
     -------------------------------------------------------------------- */
  --gutter: clamp(1.15rem, .55rem + 2.4vw, 3.25rem);
  --section-y: clamp(3.5rem, 2rem + 6vw, 7.5rem);
  --max: 1320px;
  --max-wide: 1680px;
  --max-narrow: 760px;
  --nav-h: 72px;

  /* --- Mouvement ------------------------------------------------------- */
  --ease: cubic-bezier(.22, .61, .36, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --fast: 140ms;
  --mid:  260ms;
  --slow: 620ms;
}