/* ============================================================ Bazinet design tokens & reset. Values mirror the maquette's :root declarations exactly. Drift here propagates everywhere — verify against CLAUDE.md "Design system" table after any edit. ============================================================ */ /* All design tokens consolidated into a single :root block — keep edits here so the Elementor Global Colors mirror in the kit (functions.php seed) stays in lockstep. Drift here propagates everywhere. */ :root { /* Brand */ --bz-marine: #0B1E38; --bz-marine-900: #040B16; --bz-marine-400: #2A4B7C; --bz-acajou: #2A1F18; --bz-foret: #1E3A32; --bz-encre-bleu: #0A0F1A; --bz-or: #B89D64; /* Or assombri pour usage sur fonds cream — passe WCAG AA (~5.1:1). L'or principal #B89D64 fail AA sur cream à 2.5:1, donc à utiliser uniquement sur fonds marine ou en éléments décoratifs non-textuels. */ --bz-or-deep: #8C6F3D; /* Or encore plus profond pour SMALL TEXT (≤14 px) sur cream — passe WCAG AA 4.5:1 où --bz-or-deep est marginal (~3.9:1 à 11 px). Audit L-4 fix 2026-05-08. */ --bz-or-deeper: #6B5226; --bz-or-soft: #E5C68C; /* gold clair pour hover sur marine */ /* Mauve spectrum — accent signature de PrevGab. Le mauve primaire #7B52AB vient du logo PrevGab. Suit exactement le même pattern que la gamme --bz-or pour permettre des swaps `--bz-or → --bz-mauve` dans le CSS de la page sans réécrire la grille. */ --bz-mauve: #7B52AB; /* Mauve assombri pour usage sur fonds cream — contraste élevé. #5C3B8A passe WCAG AA (~6.8:1) sur cream #F4F1EA. */ --bz-mauve-deep: #5C3B8A; --bz-mauve-soft: #B89CD9; /* mauve clair pour hover sur marine */ /* Neutrals */ --bz-titane: #4A4A4A; --bz-n-500: #7A7A7A; --bz-n-300: #D1D1D1; --bz-n-200: #E6E6E6; /* Crème spectrum — valeur historique du design (était drift entre #F9F9F9 dans tokens et #F4F1EA en hard-code). On aligne sur F4F1EA. */ --bz-creme: #F4F1EA; --bz-creme-2: #EFE9DD; --bz-creme-3: #E4DCC9; /* Encre */ --bz-encre: #141414; /* Type + motion */ --font-d: "Montserrat", system-ui, sans-serif; --font-b: "Open Sans", system-ui, sans-serif; --ease: cubic-bezier(0.3, 0, 0, 1); /* Typography scale — un seul endroit pour piloter les tailles responsives. Utilise clamp(min, fluide, max). */ --fs-h1: clamp(34px, 4vw, 64px); --fs-h2: clamp(28px, 2.6vw, 48px); --fs-h3: clamp(20px, 1.7vw, 28px); --fs-eyebrow: 11.5px; --fs-body: clamp(15px, 1.05vw, 17.5px); --fs-caption: 13.5px; --lh-tight: 1.04; --lh-body: 1.6; --tracking-eyebrow: 0.22em; --tracking-cta: 0.18em; /* Spacing scale — gouttières et paddings de section */ --gutter: clamp(32px, 5vw, 88px); --hero-py: clamp(110px, 14vh, 180px); --section-py: clamp(80px, 12vh, 160px); --card-pad: clamp(24px, 3vw, 36px); /* Phantom token aliases — les CSS de pages utilisent --ph-* en fallback, on les déclare officiellement pour qu'ils suivent les renames futurs. */ --ph-cream: var(--bz-creme); --ph-navy: var(--bz-marine); --ph-grey-700: var(--bz-titane); --ph-amber: #C4821A; --ph-amber-soft: var(--bz-or-soft); /* Opacités récurrentes (audit R-11 · 2026-05-08). Top occurrences à travers tous les CSS — tokenisées pour réduire la dette technique et garantir la cohérence des hover / borders. La palette suit la convention `--bz--` où NN est l'opacité × 100 arrondie. Ajouter une nouvelle valeur ici plutôt que de coder un rgba() en dur dès qu'une opacité est utilisée 3 fois ou plus. */ --bz-or-30: rgba(184, 157, 100, 0.30); /* gold @ 30% — borders */ --bz-or-55: rgba(184, 157, 100, 0.55); /* gold @ 55% — hover borders */ --bz-creme-78: rgba(244, 241, 234, 0.78); /* cream @ 78% — body text on marine */ --bz-marine-18: rgba(11, 30, 56, 0.18); /* marine @ 18% — borders on cream */ --bz-mauve-30: rgba(123, 82, 171, 0.30); /* mauve @ 30% — borders (PrevGab) */ --bz-mauve-55: rgba(123, 82, 171, 0.55); /* mauve @ 55% — hover borders (PrevGab) */ /* Brand-accent tokens, isolés de l'alias --bz-or → --bz-mauve fait dans prevgab-page.css. Sert exclusivement à colorer le « Hub » / « Gab » dans les mentions PrevHub / PrevGab via .bz-brand-hub / .bz-brand-gab. NE PAS remapper. L'orange PrevHub vient de --ph-amber (#C4821A) défini dans prevhub-page.css comme « primary signature, distinct from Bazinet gold ». */ --bz-brand-hub-color: #C4821A; --bz-brand-gab-color: #7B52AB; } /* ----- Universal reset (extracted from maquette) ----- */ *, *::before, *::after { box-sizing: border-box; } html, body { margin: 0; padding: 0; } html { background: var(--bz-marine, #0B1E38); } body.bz-home { background: var(--bz-marine); } body { font-family: var(--font-b); color: var(--bz-titane); font-size: 17px; line-height: 1.6; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } /* Utility: hide a section/widget without deleting its data. Apply by adding `bz-hide` to the Elementor css_classes field. Toggle visibility back on by removing the class. */ .bz-hide { display: none !important; } /* Brand-mark accent — colore la partie « Hub » de PrevHub et « Gab » de PrevGab. Convention de casse : - Titres / eyebrows / boutons : PREVHUB - Body / labels / paragraphes : PrevHub font-style: inherit assure que l'accent reste italique s'il est dans un , et droit sinon. Sur fond marque (CTA orange, bande mauve, etc.) l'accent se flippe en blanc via .bz-on-brand (à appliquer sur le wrapper de la section concernée). */ .bz-brand-hub { color: var(--bz-brand-hub-color); font-style: inherit; font-weight: inherit; } .bz-brand-gab { color: var(--bz-brand-gab-color); font-style: inherit; font-weight: inherit; } .bz-on-brand .bz-brand-hub, .bz-on-brand .bz-brand-gab, .elementor-button .bz-brand-hub, .elementor-button .bz-brand-gab { color: #fff; } /* Kill the Hello Elementor reset's default magenta colour (#CC3366). Their reset hard-codes this hue on `a, button, [type="button"]` — AND on the :hover / :focus states (`button:hover { background: #CC3366 }`) which is the most invasive: any unstyled button flashes pink on tap/hover/focus across the whole site, including our mobile hamburger. Resetting colour to `inherit` and stripping the hover/focus background lets every element pick up its parent's tone, while brand- coloured CTAs / chips / pills still win via higher specificity. */ a, button, [type="button"], [type="submit"], [type="reset"] { color: inherit; } button:hover, button:focus, button:active, [type="button"]:hover, [type="button"]:focus, [type="button"]:active, [type="submit"]:hover, [type="submit"]:focus, [type="submit"]:active, [type="reset"]:hover, [type="reset"]:focus, [type="reset"]:active { background-color: transparent; color: inherit; }