/* ==========================================================================
Hector — design tokens
Source : Figma BbCtfHCfgU67fSggyoltQN · « Design System — Hector » 309:1024
+ valeurs relevées sur la page desktop 182:17899 et mobile 204:995.
Le fichier Figma n'a AUCUNE variable locale (get_variable_defs = {}) :
ces tokens sont relevés sur les calques.
Polices (Google Fonts) :
- Inter : tout le site (400 Regular, 500 Medium, 600 Semi Bold, 700 Bold, 800 Extra Bold)
- Geist Mono : numéros d'étapes « 01 02 03 » uniquement (500)
- Geist : liens et titres de colonnes du footer (400 / 500 / 700)
- SF Pro : uniquement dans la maquette iPhone/WhatsApp → pile système
- Aucune police manuscrite en texte vif : l'écriture des cartes est
incrustée dans les images.
========================================================================== */
:root {
/* ---------- Couleurs · marque ---------- */
--c-green: #25d366; /* Vert WhatsApp — boutons, CTA, bordure sélection */
--c-green-dark: #1fa855; /* Vert foncé — titres accent, coches, prix, liens, « 01 » */
--c-green-pale: #e6ffda; /* Vert pâle — chips hero, offre sélectionnée, pastilles */
--c-green-hector: #f1fbec; /* Fond pastille colonne Hector (comparatif) */
--c-green-product: #1dab61; /* Bouton « envoyer » rond de WhatsApp */
--c-green-soft: #9de1b7; /* Début du dégradé du rail d'étapes */
--c-green-star: #5ed38a; /* Étoiles texte ★★★★★ sur photo (bento) */
--c-green-tint-12: rgba(31, 168, 85, 0.12); /* Tag −44 % à côté du prix */
/* ---------- Couleurs · neutres ---------- */
--c-cream: #fcf5eb; /* Fond de page */
--c-cream-2: #f7f3ea; /* Cartes douces, vignettes galerie */
--c-paper: #faf5eb; /* Fond section CTA final */
--c-white: #ffffff;
--c-border: #d9d9d9; /* Bordures, séparateurs (DS) */
--c-border-soft: rgba(0, 0, 0, 0.08); /* Vignettes, cartes témoignage */
--c-border-card: rgba(0, 0, 0, 0.12); /* Carte offre non sélectionnée */
--c-border-faq: rgba(28, 30, 33, 0.12); /* Séparateurs FAQ */
--c-grey: #667781; /* Texte secondaire */
--c-slate: #404654; /* Paragraphes, chapôs, avis */
--c-ink: #111b21; /* Encre — titres, texte, texte des boutons verts */
--c-ink-2: #1c1e21; /* Titres de section (calques « Shark ») */
--c-ink-logo: #22301f; /* Mot « Hector » du logo */
--c-night: #1d1d1b; /* Titre CTA final */
--c-muted: #a09c8f; /* Placeholder du champ CTA final */
/* ---------- Couleurs · WhatsApp ---------- */
--c-wa-bubble-out: #d9fdd3; /* Bulle sortante (site) */
--c-wa-bubble-out-ios: #d0fecf; /* Bulle sortante dans la maquette iPhone */
--c-wa-bubble-in: #ffffff; /* Bulle entrante */
--c-wa-time: #667781; /* Heure des bulles */
--c-wa-ticks: #53bdeb; /* ✓✓ lus */
--c-wa-chat-bg: #f5f2eb; /* Fond du chat (sous le motif à 10 %) */
--c-wa-chat-bg-ds: #efe7dd; /* Fond du bloc bulles dans le DS */
--c-wa-panel: rgba(245, 242, 235, 0.8); /* Barres haut/bas du chat (blur 25px) */
--c-wa-reaction-border: #f0e9df;
/* ---------- Couleurs · sombres / états ---------- */
--c-footer: #1c1e21; /* Fond footer */
--c-footer-text: rgba(255, 255, 255, 0.73);
--c-footer-line: rgba(255, 255, 255, 0.12);
--c-footer-chip: rgba(255, 255, 255, 0.06); /* Boutons réseaux / langue */
--c-red: #e1512b; /* ✕ comparatif DS, champ en erreur */
--c-red-pale: #fdecea;
--c-cross-bg: #eef0f1; /* ✕ gris du comparatif mobile */
--c-cross: #9aa4ab;
--c-hero-overlay: rgba(0, 0, 0, 0.55); /* Voile sur la vidéo hero desktop */
--c-hero-overlay-mobile: linear-gradient(180deg, rgba(0,0,0,.45) 0%, rgba(0,0,0,.6) 50%, rgba(0,0,0,.75) 100%);
--c-glass: rgba(255, 255, 255, 0.2); /* Badge Trustpilot hero */
--c-glass-border: rgba(255, 255, 255, 0.22);
/* Logos de paiement (pastilles texte dans Figma) */
--c-visa: #1a3399;
--c-cb: #005999;
--c-stripe: #6359ff;
/* ---------- Typographie · familles ---------- */
--font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
--font-mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
--font-footer: "Geist", "Inter", system-ui, sans-serif;
--font-ios: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro", system-ui, sans-serif;
--fw-regular: 400;
--fw-medium: 500;
--fw-semibold: 600;
--fw-bold: 700;
--fw-extrabold: 800;
/* ---------- Typographie · échelle (desktop 1440 → mobile 390) ----------
Valeurs relevées sur les maquettes (px). Interlettrage titres : −1 % (DS)
ou −1px sur les H2 de 48px. */
--fs-display: clamp(40px, 2.6rem + 3.6vw, 80px); /* Hero : 80/80 Regular desktop · 40/44 −2,5 % mobile */
--lh-display: 1.0; /* desktop 80/80 ; mobile 1.1 */
--ls-display: -0.025em;
--fs-h2-xl: clamp(30px, 1.4rem + 2.6vw, 59px); /* « Comment ça marche ? » 59/60 SemiBold · mobile 30/35 Medium */
--lh-h2-xl: 1.02;
--fs-h2: clamp(28px, 1.3rem + 2vw, 48px); /* Sections : 48/54 (−1px) · 46,3/52 · mobile 28–34 / 34–38 */
--lh-h2: 1.125;
--ls-h2: -1px;
--fs-h2-cta: clamp(34px, 1.6rem + 2.2vw, 56px); /* CTA final 56/60 −1,5px · mobile 34/36 */
--lh-h2-cta: 1.07;
--ls-h2-cta: -1.5px;
--fs-h3: 34px; /* « Le Voyage » 33,6/52,5 SemiBold · FAQ titre 34 · mobile 28–32 */
--fs-h3-durer: 36px; /* « Pensé pour durer » 36/48 −1,28px */
--fs-h4: 22px; /* DS H4 22 SemiBold ; bento grande carte 30 SemiBold */
--fs-card-title: 18px; /* Titres cartes étapes 18/24 SemiBold · mobile 17/23 */
--fs-faq-q: 17px; /* Questions FAQ 17/36 SemiBold (mobile 17/24 Medium) */
--fs-lead-l: 24px; /* Chapô « Trois étapes… » 24/37,5 Medium #404654 · mobile 18/26 */
--lh-lead-l: 1.5625;
--fs-lead: 22px; /* Paragraphes de section 22/30 · mobile 17/26 */
--lh-lead: 1.36;
--fs-body-l: 20px; /* 20/27–28 (sous-titre réserve, texte « durer ») */
--fs-body-hero: 17.2px; /* Chapô hero 17,2/25 */
--fs-body: 16px; /* 16/24 */
--lh-body: 1.5;
--fs-body-s: 15px; /* Textes cartes, coches 15/24 */
--fs-small: 14px; /* Avis 14/22, bulles 14 */
--fs-caption: 13px; /* 13 Regular (sous-libellés comparatif 13/18) */
--fs-label: 12px; /* Chips/étiquettes 12 SemiBold */
--fs-micro: 10px; /* Heures des bulles */
--fs-step-num: 16px; /* « 01 » Geist Mono 500, tracking 1,5px, #1FA855 (DS : 14px, +2) */
--ls-step-num: 1.5px;
--fs-nav: 15.6px; /* Liens header 15,6–16 Medium, line-height 16 */
--fs-button: 16px; /* Boutons 16 SemiBold, line-height 18–20 */
/* ---------- Rayons ---------- */
--r-4: 4px; /* Logos de paiement, coin « queue » bulle hero */
--r-8: 8px; /* Tags, badges remise, mini */
--r-10: 10px; /* Logos concurrents, réseaux footer */
--r-12: 12px; /* Vignettes, bulles iOS, chips mobile */
--r-14: 14px; /* Défaut : boutons, inputs, chips, cartes étapes, images */
--r-16: 16px; /* Bulles hero (16/16/16/4), images FAQ */
--r-18: 18px; /* Carte offre */
--r-20: 20px; /* Cartes (témoignages, colonne « autres », photo équipe) */
--r-24: 24px; /* Grandes cartes, bento, colonne Hector, carte hero mobile */
--r-25: 25px; /* Bloc hero desktop */
--r-40: 40px; /* Coque iPhone */
--r-pill: 999px; /* Pilules, avatars, chips bento, champ WhatsApp */
--r-wa-bubble: 7.5px; /* Bulles flottantes (un coin à 0) */
/* ---------- Espacements ---------- */
--s-4: 4px;
--s-8: 8px;
--s-12: 12px;
--s-16: 16px;
--s-24: 24px; /* Gouttière */
--s-32: 32px;
--s-48: 48px;
--s-64: 64px;
--s-88: 88px; /* Padding haut de section */
--s-156: 156px; /* Marge latérale de section desktop */
--container: 1128px; /* max-width contenu (156 + 1128 + 156 = 1440) */
--container-wide: 1200px; /* Footer, FAQ */
--gutter-mobile: 20px;
/* ---------- Ombres ---------- */
--sh-card: 0 8px 24px rgba(0, 0, 0, 0.06); /* DS « Carte » */
--sh-button-hover: 0 6px 16px rgba(37, 211, 102, 0.35); /* DS bouton primaire hover */
--sh-hover-neutral: 0 6px 16px rgba(0, 0, 0, 0.18); /* DS « Bouton survol » */
--sh-hector-col: 0 24px 60px rgba(31, 168, 85, 0.18); /* Colonne Hector (page) ; DS : 0 16px 40px #1FA855 28 % */
--sh-hector-col-ds: 0 16px 40px rgba(31, 168, 85, 0.28);
--sh-chip: 0 8px 20px rgba(0, 0, 0, 0.12); /* Bulles chips hero */
--sh-wa-bubble: 0 8px 24px rgba(11, 20, 26, 0.10), 0 1px 0.5px rgba(11, 20, 26, 0.13); /* Bulles flottantes */
--sh-phone: 0 28px 28px rgba(11, 61, 34, 0.14), 0 6px 8px rgba(11, 61, 34, 0.10); /* iPhone (drop-shadow) */
--sh-postcard: 0 18.4px 46px rgba(65, 31, 17, 0.14); /* Carte inclinée du hero */
--sh-logo: 0 2px 8px rgba(0, 0, 0, 0.35); /* Avatar logo */
--sh-tile: 0 4px 10px rgba(0, 0, 0, 0.12); /* Logos concurrents / logo Hector comparatif */
--sh-photo: 0 10px 24px rgba(0, 0, 0, 0.12); /* Photos collage FAQ */
--sh-input: 0 20px 68px rgba(73, 95, 0, 0.18); /* Champ « Envoyez un message à Hector… » */
--sh-step-dot: 0 0 0 4px rgba(0, 184, 122, 0.18); /* Point actif du rail d'étapes */
/* ---------- Dégradés ---------- */
--g-steps-rail: linear-gradient(90deg, #9de1b7 0%, #25d366 100%);
--g-photo-bottom: linear-gradient(180deg, rgba(0,0,0,0) 40%, rgba(0,0,0,.45) 100%); /* Vignettes vidéo */
--g-bento-large: linear-gradient(180deg, rgba(0,0,0,0) 35%, rgba(0,0,0,.72) 100%);
--g-bento-small: linear-gradient(180deg, rgba(0,0,0,0) 20%, rgba(0,0,0,.8) 100%);
/* ---------- Boutons ---------- */
--btn-height: 45px; /* 13px + 19px + 13px (DS) ; header 46px */
--btn-pad-y: 13px; /* page : 12–14px */
--btn-pad-x: 24px; /* header : 16px */
--btn-radius: var(--r-14);
--btn-font: 600 16px/1.125 var(--font-sans);
--btn-primary-bg: var(--c-green);
--btn-primary-fg: var(--c-ink);
--btn-secondary-bg: var(--c-white);
--btn-secondary-border: 1px solid var(--c-border);
--btn-ghost-fg: var(--c-green-dark);
--btn-dark-bg: var(--c-ink);
--btn-dark-fg: var(--c-white);
--btn-disabled-bg: var(--c-border);
--btn-disabled-fg: var(--c-grey);
--btn-hover-shift: -2px; /* DS : « Hover : +2 px » (élévation) */
--btn-active-scale: 0.98;
/* ---------- Divers ---------- */
--header-height: 80px; /* desktop (mobile 60px) */
--ease: cubic-bezier(0.2, 0.7, 0.2, 1);
}