/* ============================================================ CIVIK — Correctifs de contraste WCAG AA Audit : 2026-05-20 (https://civik.tech, build main.1374f7fa.css) À charger APRÈS le main.css (ou inliner en fin de ). Toutes les couleurs cibles utilisent la palette existante : --rouge-signal #e53935 --rouge-hover #c62828 --vert-actif #43a047 --vert-clair #e8f5e9 --bleu-nuit #0b1d3a --bleu-medium #1e3a5f --blanc #ffffff --gris-clair #f4f6f9 ============================================================ */ /* ---------------------------------------------------------------- 1. Boutons rouges — ratio 4.23 → 5.62 (WCAG AA OK) -------------------------------------------------------------- #fff sur --rouge-signal (#e53935) = 4.23 → échec AA (texte normal). On passe au --rouge-hover (#c62828), déjà dans la palette pour le :hover. ---------------------------------------------------------------- */ html .btn-primary, html .btn-connexion, html .pricing-badge, html .cookie-btn-accept { background: var(--rouge-hover) !important; background-color: var(--rouge-hover) !important; color: var(--blanc) !important; } html .btn-primary:hover, html .btn-connexion:hover, html .cookie-btn-accept:hover { background: #a31f1f !important; /* hover -> encore plus foncé */ background-color: #a31f1f !important; } /* ---------------------------------------------------------------- 2. Boutons mockup téléphone — REGRESSION DE CLASSE -------------------------------------------------------------- Le HTML rend .btn-17 / .btn-18 / .btn-cam, mais le CSS définit .phone-btn-17 / .phone-btn-18 / .phone-btn-dashcam. Résultat : aucun fond appliqué → texte blanc sur le gris #f0f0f0 du phone-screen → ratio 1.14 (illisible). Correctif : aliaser les classes utilisées par le HTML. ---------------------------------------------------------------- */ html .phone-btn.btn-17 { background-color: var(--rouge-hover) !important; /* 5.62 sur blanc */ color: var(--blanc) !important; } html .phone-btn.btn-18 { background-color: #2e7d32 !important; /* vert foncé, 5.10 sur blanc */ color: var(--blanc) !important; } html .phone-btn.btn-cam { background-color: var(--bleu-medium) !important; /* 8.93 sur blanc */ color: var(--blanc) !important; } /* ---------------------------------------------------------------- 3. Note "Modèle collaboratif" — ratio 1.09 → 17+ -------------------------------------------------------------- Texte rgba(255,255,255,0.8) sur fond rgba(67,160,71,0.1) sur blanc = blanc/transparent sur vert pâle = invisible. ---------------------------------------------------------------- */ html .pros-note { color: var(--bleu-nuit) !important; background-color: var(--vert-clair) !important; border-left: 4px solid var(--vert-actif) !important; } /* ---------------------------------------------------------------- 4. Icônes Trust / Pillar — ratio 3.67 → 4.97 -------------------------------------------------------------- Glyphe en --rouge-signal sur rgba(229,57,53,0.1) (rose pâle composé) ne passait pas. On assombrit le glyphe en --rouge-hover. ---------------------------------------------------------------- */ html .trust-icon, html .pillar-icon { color: var(--rouge-hover) !important; /* 4.97 sur rose pâle */ } /* ============================================================ NOTE .btn-secondary "Découvrir" est apparu en faux positif lors du premier audit : le scanner ignorait le linear-gradient du hero. Sur le hero (#0b1d3a → #1e3a5f), le bouton blanc/transparent donne en réalité un ratio ~8.5 → AUCUNE correction nécessaire. ============================================================ */