/* ========================================================================== BABI — tokens · DA « Nocturne » Source unique de toute valeur de marque. Rien de ce qui suit ne doit être réécrit en dur ailleurs. Valeurs issues du dossier de refonte (design_handoff_baby_refonte/README.md) — haute fidélité. ========================================================================== */ :root{ /* --- Couleurs ---------------------------------------------------------- */ --fond: #14111A; /* fond de toutes les pages */ --fond-2: #1E1927; /* sections alternées, champs */ --clair: #E8DCCB; /* une seule section claire / page */ --encre-clair: #14111A; /* titres sur fond clair */ --encre-clair-2:#4A4253; /* paragraphes sur fond clair */ --filet-clair: rgba(20,17,26,.2); --texte: #F2EDE6; /* titres, texte fort */ --texte-88: rgba(242,237,230,.88); /* chapôs sur photo */ --texte-84: rgba(242,237,230,.84); --texte-82: rgba(242,237,230,.82); --texte-78: rgba(242,237,230,.78); /* paragraphes légaux */ --texte-76: rgba(242,237,230,.76); /* texte courant */ --texte-72: rgba(242,237,230,.72); /* labels de champ */ --texte-66: rgba(242,237,230,.66); --texte-62: rgba(242,237,230,.62); /* mentions, copyright */ --texte-58: rgba(242,237,230,.58); --texte-42: rgba(242,237,230,.42); /* placeholders */ --accent: #A97CE8; /* sur-titres, liens, boutons */ --accent-60: rgba(169,124,232,.6); --accent-50: rgba(169,124,232,.5); --accent-12: rgba(169,124,232,.12); --violet: #6A3FA0; /* couleur de marque, carte membre */ --filet: rgba(242,237,230,.16); /* séparateurs de sections */ --filet-18: rgba(242,237,230,.18); --filet-20: rgba(242,237,230,.2); --filet-fort: rgba(242,237,230,.22); /* bordures de champs, listes */ --filet-24: rgba(242,237,230,.24); --filet-26: rgba(242,237,230,.26); /* pastilles */ --filet-bouton:rgba(242,237,230,.42); /* bouton secondaire */ --erreur: #F0917F; /* lisible sur fond sombre */ --whatsapp: #25D366; --whatsapp-survol:#1FBE5A; --whatsapp-glyphe:#0B2E18; /* Voile horizontal obligatoire sur toute photo portant du texte. */ --voile-photo: linear-gradient(96deg, rgba(0,0,0,.82) 0%, rgba(0,0,0,.66) 26%, rgba(0,0,0,.40) 48%, rgba(0,0,0,.10) 72%, rgba(0,0,0,0) 88%); /* Dégradés verticaux posés sous ce voile. */ --voile-hero: linear-gradient(180deg, rgba(20,17,26,.62) 0%, rgba(20,17,26,.22) 34%, rgba(20,17,26,.72) 76%, #14111A 100%); --voile-rejoindre: linear-gradient(180deg, rgba(20,17,26,.66) 0%, rgba(20,17,26,.5) 40%, rgba(20,17,26,.94) 100%); --voile-final: linear-gradient(180deg, rgba(20,17,26,.7) 0%, rgba(20,17,26,.5) 40%, rgba(20,17,26,.9) 100%); --voile-legende: linear-gradient(180deg, rgba(20,17,26,0) 0%, rgba(20,17,26,.88) 100%); /* --- Typographie ------------------------------------------------------- */ --titre: "Bricolage Grotesque", system-ui, sans-serif; --sans: Archivo, system-ui, -apple-system, sans-serif; --h1-hero: 500 clamp(44px, 7.4vw, 124px)/.9 var(--titre); --h1-interne: 500 clamp(34px, 5.4vw, 84px)/.94 var(--titre); --h1-contact: 500 clamp(38px, 7.4vw, 116px)/.9 var(--titre); --h1-merci: 500 clamp(36px, 6.6vw, 104px)/.92 var(--titre); --h2: 500 clamp(30px, 3.8vw, 58px)/1 var(--titre); --h2-panneau: 500 clamp(24px, 2.4vw, 36px)/1.08 var(--titre); --h2-paire: 500 clamp(24px, 2.6vw, 38px)/1.08 var(--titre); --h2-contact: 500 clamp(28px, 3.2vw, 46px)/1 var(--titre); --h2-final: 500 clamp(32px, 5vw, 80px)/.96 var(--titre); --h2-legal: 500 clamp(22px, 2.2vw, 30px)/1.12 var(--titre); --h3-univers: 500 clamp(22px, 2.2vw, 32px)/1.1 var(--titre); --h3-raison: 500 23px/1.15 var(--titre); --h3-etape: 500 25px/1.15 var(--titre); --num-etape: 500 clamp(32px, 3.2vw, 44px)/1 var(--titre); --legende: 500 19px/normal var(--titre); --annonce: 500 clamp(22px, 2.2vw, 30px)/1.12 var(--titre); --chapo: 400 clamp(15px, 1.25vw, 18px)/1.7 var(--sans); --lead: 400 clamp(16px, 1.4vw, 20px)/1.65 var(--sans); --fort: 400 clamp(18px, 1.5vw, 22px)/1.5 var(--sans); --body: 400 16px/1.7 var(--sans); --body-l: 400 16.5px/1.75 var(--sans); --body-s: 400 15.5px/1.7 var(--sans); --legal: 400 16px/1.8 var(--sans); --mention: 400 14px/1.7 var(--sans); --mention-s: 400 13px/1.7 var(--sans); --surtitre: 600 10.5px/1.1 var(--sans); --label: 600 10.5px/1.1 var(--sans); --bouton: 600 11.5px/1 var(--sans); --bouton-s: 600 11px/1 var(--sans); --pied-lien: 400 15px/normal var(--sans); --track-h1: -.045em; --track-h1-int: -.04em; --track-h2: -.035em; --track-h3: -.03em; --track-surtitre: .26em; --track-label: .18em; --track-bouton: .14em; --track-sous-logo:.3em; /* --- Grille ------------------------------------------------------------ */ --conteneur: 1440px; --gouttiere: clamp(20px, 4vw, 56px); --gouttiere-hero: clamp(24px, 4vw, 64px); --section-y: clamp(62px, 8vw, 120px); /* --- Gaps -------------------------------------------------------------- */ --gap-colonnes: clamp(32px, 4vw, 80px); --gap-cartes: clamp(24px, 2.6vw, 40px); --gap-champs: 20px; --gap-pastilles:10px; /* --- Angles droits partout : signature de la DA ------------------------ */ --r-bloc: 0; --r-champ: 0; --r-bouton: 0; --r-pastille: 0; /* --- Ombres ------------------------------------------------------------ */ --ombre-consent: 0 18px 40px rgba(0,0,0,.55); --ombre-panneau: 0 20px 44px rgba(0,0,0,.5); --ombre-wa: 0 14px 30px rgba(0,0,0,.45); --ombre-carte: 0 24px 50px rgba(0,0,0,.5); /* --- Mouvement --------------------------------------------------------- */ --t-rapide: .22s ease; --t-lente: .45s cubic-bezier(.2,.7,.3,1); --t-media: .8s cubic-bezier(.22,.61,.36,1); --t-reveal: .8s cubic-bezier(.2,.7,.3,1); /* --- En-tête ----------------------------------------------------------- */ --entete-h: 76px; /* --- Empilement -------------------------------------------------------- */ --z-entete: 100; --z-flottant: 150; --z-consent: 250; /* Hauteur réelle du bandeau de consentement (+ marges), posée par consent.js. 0 tant qu'aucun bandeau n'est affiché. */ --consent-h: 0px; }