/* ========================================================================== Kawann Supply — jetons de design (design tokens) Source unique de vérité pour la charte graphique. Chargé AVANT tous les autres CSS du thème enfant : aucune valeur de couleur ou de police ne doit être écrite en dur ailleurs, on passe toujours par ces variables. ========================================================================== */ :root { /* ------------------------------------------------------------------ 1. PALETTE DE MARQUE — valeurs exactes de la charte, non modifiables ------------------------------------------------------------------ */ --kawann-marine: #14263d; /* Bleu marine */ --kawann-horizon: #035f84; /* Bleu Horizon */ --kawann-blanc-casse: #f2efea; /* Blanc cassé */ --kawann-vert: #8a9537; /* Vert */ --kawann-jaune: #fac675; /* Jaune */ --kawann-soleil: #f6a316; /* Soleil */ --kawann-blanc: #ffffff; /* ------------------------------------------------------------------ 2. DÉRIVÉS — mêmes teintes, calibrés pour WCAG 2.2 AA Soleil et Jaune sont des couleurs de FOND, pas de texte : Soleil sur blanc = 2,07:1 / Jaune sur blanc = 1,57:1 -> échec AA. On garde donc la teinte Soleil mais assombrie pour tout usage TEXTE ou ICÔNE sur fond clair (--kawann-soleil-ink = 5,73:1 sur blanc, et 5,00:1 sur le fond de badge --kawann-soleil-wash). Sur fond marine, en revanche, le Soleil pur passe largement (7,40:1) : c'est la seule situation où on l'utilise en texte. ------------------------------------------------------------------ */ --kawann-marine-clair: #1c3554; /* panneaux marine, blanc dessus 12,45:1 */ --kawann-soleil-ink: #8f5b05; /* Soleil en TEXTE sur fond clair 5,73:1 */ --kawann-soleil-wash: #fdeed3; /* fond de badge, teinté Jaune */ --kawann-vert-ink: #727b2d; /* Vert en TEXTE sur fond clair 4,58:1 */ /* ------------------------------------------------------------------ 3. RÔLES SÉMANTIQUES — c'est ce qu'on utilise dans les composants ------------------------------------------------------------------ */ --kawann-text: var(--kawann-marine); /* 15,28:1 sur blanc */ --kawann-text-muted: #4c5e76; /* 6,62:1 sur blanc */ --kawann-text-on-dark: var(--kawann-blanc); --kawann-link-hover: var(--kawann-soleil-ink); /* Neutres CHAUDS dérivés du Blanc cassé (et non des gris froids génériques) : c'est ce qui raccroche les fonds à la charte. */ --kawann-surface: #f8f7f4; --kawann-surface-2: var(--kawann-blanc-casse); --kawann-border: #e3ddd3; --kawann-border-clair: #efeae2; /* Bleu des liens d'action (5,45:1 sur blanc, conforme AA). */ --kawann-lien: #005bf8; --kawann-border-subtle: #efeae2; /* Aplats rayés des visuels en attente d'image */ --kawann-placeholder-a: #ebe7e0; --kawann-placeholder-b: #f6f3ee; /* Focus clavier — marine sur tout fond clair, jamais supprimé */ --kawann-focus-ring: var(--kawann-marine); /* ------------------------------------------------------------------ 4. TYPOGRAPHIE — charte : Montserrat ExtraBold (titres & logo), Montserrat SemiBold (textes) ------------------------------------------------------------------ */ --kawann-font: 'Montserrat', 'Inter', system-ui, -apple-system, sans-serif; --kawann-weight-title: 800; /* ExtraBold */ --kawann-weight-text: 600; /* SemiBold */ --kawann-weight-bold: 700; /* accentuation dans un texte SemiBold */ --kawann-weight-light: 400; /* mentions légales, texte fin uniquement */ /* -------------------------------------------------------------------- Colonne de contenu du site. Référence : .kawann-hero. Header, footer, fil d'Ariane, contenu des pages internes et sections d'accueil s'y réfèrent tous, pour qu'une seule valeur pilote l'alignement général. -------------------------------------------------------------------- */ --kawann-colonne: 1280px; --kawann-colonne-retrait: 24px; --kawann-colonne-retrait-mobile: 16px; } /* -------------------------------------------------------------------- Mappage de la palette Bootstrap du thème parent sur la charte. Hummingbird rend lui-même les boutons, liens, alertes et formulaires des pages catalogue / compte / tunnel de commande avec --bs-primary (#0b69f6, un bleu générique hors charte). On réaffecte ces variables pour que TOUT le site suive la charte, pas seulement les gabarits surchargés. -------------------------------------------------------------------- */ :root { --bs-primary: var(--kawann-marine); --bs-primary-rgb: 20, 38, 61; --bs-primary-text-emphasis: var(--kawann-marine); --bs-primary-bg-subtle: var(--kawann-blanc-casse); --bs-primary-border-subtle: var(--kawann-border); --bs-secondary: var(--kawann-horizon); --bs-secondary-rgb: 3, 95, 132; --bs-link-color: var(--kawann-horizon); /* 7,06:1 sur blanc */ --bs-link-color-rgb: 3, 95, 132; --bs-link-hover-color: var(--kawann-marine); --bs-link-hover-color-rgb: 20, 38, 61; --bs-success: #4f6b1f; /* Vert de la charte, assombri pour AA */ --bs-success-rgb: 79, 107, 31; --bs-warning: var(--kawann-soleil); --bs-warning-rgb: 246, 163, 22; --bs-body-color: var(--kawann-marine); --bs-body-font-family: var(--kawann-font); --bs-body-font-weight: 600; --bs-border-color: var(--kawann-border); --bs-focus-ring-color: rgba(20, 38, 61, 0.35); } /* Boutons principaux : marine plein, blanc dessus (15,28:1). Le survol passe au Bleu Horizon, qui garde 7,06:1 avec du blanc. */ .btn-primary { --bs-btn-bg: var(--kawann-marine); --bs-btn-border-color: var(--kawann-marine); --bs-btn-color: var(--kawann-blanc); --bs-btn-hover-bg: var(--kawann-horizon); --bs-btn-hover-border-color: var(--kawann-horizon); --bs-btn-hover-color: var(--kawann-blanc); --bs-btn-active-bg: var(--kawann-horizon); --bs-btn-active-border-color: var(--kawann-horizon); --bs-btn-disabled-bg: var(--kawann-marine); --bs-btn-disabled-border-color: var(--kawann-marine); font-weight: var(--kawann-weight-bold); } /* Bouton d'appel à l'action : Soleil plein, texte MARINE (7,40:1). Du blanc sur Soleil ne ferait que 2,07:1. */ .btn-secondary { --bs-btn-bg: var(--kawann-soleil); --bs-btn-border-color: var(--kawann-soleil); --bs-btn-color: var(--kawann-marine); --bs-btn-hover-bg: var(--kawann-jaune); --bs-btn-hover-border-color: var(--kawann-jaune); --bs-btn-hover-color: var(--kawann-marine); --bs-btn-active-bg: var(--kawann-jaune); --bs-btn-active-color: var(--kawann-marine); font-weight: var(--kawann-weight-bold); } .btn-outline-primary { --bs-btn-color: var(--kawann-marine); --bs-btn-border-color: var(--kawann-marine); --bs-btn-hover-bg: var(--kawann-marine); --bs-btn-hover-border-color: var(--kawann-marine); --bs-btn-hover-color: var(--kawann-blanc); font-weight: var(--kawann-weight-bold); } /* -------------------------------------------------------------------- Application globale de la typographie de la charte. Le thème parent Hummingbird est en Inter : on bascule tout le site sur Montserrat, textes en SemiBold et titres en ExtraBold. -------------------------------------------------------------------- */ body { font-family: var(--kawann-font); font-weight: var(--kawann-weight-text); color: var(--kawann-text); } h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { font-family: var(--kawann-font); font-weight: var(--kawann-weight-title); color: var(--kawann-text); } /* Les textes déjà en gras dans le thème parent doivent rester distincts d'un corps de texte en SemiBold : on les monte d'un cran. */ strong, b { font-weight: var(--kawann-weight-title); } /* -------------------------------------------------------------------- Focus clavier visible sur TOUT le site (WCAG 2.2 — 2.4.11 / 2.4.13). Aucun composant ne doit retirer le focus sans le remplacer. -------------------------------------------------------------------- */ :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible { outline: 2px solid var(--kawann-focus-ring); outline-offset: 2px; border-radius: 2px; }