/* OUTILCALCUL — DESIGN SYSTEM GLOBAL "INTELLIGENCE CALME" ================================================================ Généralisation, à l'échelle du site, de la direction artistique validée humainement et mise en production sur /calcul-cout-voiture/ (référence : assets/calcul-cout-voiture.css, rendu réel en production). MÉCANISME D'ACTIVATION : classe .visual-identity-v1 sur , déjà posée par le rollout précédent (162/163 pages calculateur). Ce fichier RÉUTILISE ce même mécanisme plutôt que d'en créer un second, et l'étend aux familles de pages qui ne l'avaient pas encore (accueil, thèmes, guides, pages légales). Aucune règle ci-dessous ne s'applique à une page qui ne porte pas cette classe. ARCHITECTURE : chargé en DERNIER sur chaque page (après home-premium.css, calculator-official.css, et la feuille de famille éventuelle : theme-hub / guide-hub / utility-page). Deux mécanismes, dans cet ordre : 1. SURCHARGE DE TOKENS — home-premium.css et calculator-official.css consomment déjà très majoritairement des variables CSS sémantiques (--color-background-primary, --color-text-primary, --color-surface- border, --radius-lg, --color-brand-electric, --calc-accent...) plutôt que des couleurs en dur. Redéfinir ces tokens sous .visual-identity-v1 re-thème donc automatiquement la grande majorité des composants existants sans dupliquer leur CSS. 2. COMPOSANTS — pour les traitements que la palette seule ne peut pas produire (dé-cardification éditoriale, ligne de guichet des champs, panneau résultat navy, hero resserré, etc.), les règles ciblées de calcul-cout-voiture.css sont reprises et généralisées aux classes partagées réelles (confirmées universelles par audit du DOM statique et du moteur JS partagé, pas supposées). CE QUI N'EST PAS ICI (volontairement) : tout ce qui était spécifique à la page Coût Voiture — le regroupement de champs par paire (:has(#km) etc, dépend des id réels de CE calculateur), le correctif de layout propre à ses 11 champs. Voir DESIGN.md v4 pour la liste des exceptions par calculateur. RIEN dans ce fichier ne touche : formules, valeurs par défaut, presets fonctionnels, reset, tracking/dataLayer, CMP, AdSense, URLs, JSON-LD, SEO. */ @import url('https://fonts.googleapis.com/css2?family=Lexend:wght@400;500;600;700;800&family=Source+Sans+3:wght@400;500;600;700&display=swap'); /* ================================================================== 1. TOKENS — surcharge globale, propagée par héritage CSS depuis . ================================================================== */ body.visual-identity-v1 { /* Surfaces : brume/papier -> crème/minéral. */ --color-background-primary: #F6F4EE; --color-surface-border: #E7E2D8; --color-border-strong: #BFB6A6; /* Texte. */ --color-text-primary: #101826; --color-text-secondary: #4B5567; /* Rayons — échelle resserrée, cohérente avec le pilote. */ --radius-xl: 18px; --radius-lg: 18px; --radius-md: 14px; /* Action / accent — le bleu électrique unique cède la place au triptyque Trust/Transform/Result déjà défini dans home-premium.css (Visual Identity System Phases 9-11), désormais généralisé plutôt que réservé à un composant unique. */ --color-brand-electric: var(--brand-trust); --color-brand-electric-deep: #0E2450; --color-focus-ring: color-mix(in srgb, var(--brand-transform) 45%, transparent); --calc-accent: var(--brand-trust); --calc-accent-deep: #0E2450; /* !important justifié : trouvé lors de l'audit typographique V4 (2026-09-19) — chaque feuille de famille pose son propre "body. { font-family: Public Sans }" à une spécificité (body + 1 ou 2 classes, voire un attribut sur les pages calculateur : body.layout-premium-page[class*= "calc-page-"]) qui égale ou dépasse celle de ce sélecteur. Sans !important, le corps de texte restait silencieusement en Public Sans sur TOUTES les familles de page malgré le token/l'intention V4 documentée — seuls h1-h4 et les éléments explicitement ciblés plus bas (résultat, etc.) passaient réellement en Lexend. Limité à cette seule déclaration. */ font-family: "Source Sans 3", system-ui, -apple-system, "Segoe UI", sans-serif !important; background: var(--color-background-primary); } body.visual-identity-v1 h1, body.visual-identity-v1 h2, body.visual-identity-v1 h3, body.visual-identity-v1 h4, body.visual-identity-v1 .result-value, body.visual-identity-v1 .result-breakdown__row strong { font-family: "Lexend", system-ui, -apple-system, "Segoe UI", sans-serif; letter-spacing: -0.01em; } body.visual-identity-v1 .result-value, body.visual-identity-v1 .result-breakdown__row strong, body.visual-identity-v1 .result-breakdown__row span { font-variant-numeric: tabular-nums; } /* ================================================================== 2. HEADER / FOOTER — le header (.prototype-topnav) est déjà navy sur les 162 pages calculateur via les règles .visual-identity-v1 existantes dans calculator-official.css. Exception réelle trouvée à l'audit : la variante home/thème (.prototype-topnav.home-topnav, home-premium.css ~L200) pose "background: var(--color-surface)" (jamais --brand-trust) à une spécificité (0,2,0) identique à la règle navy existante — elle gagne le conflit indépendamment de l'ordre de chargement, la home et les pages thème gardaient donc un header clair même avec .visual-identity-v1 actif. Correctif ciblé, spécificité supérieure (0,3,0), même traitement Trust Header que le reste du site. L'harmonisation du footer reste un chantier séparé (Phase 8), non traité par ce fichier. ================================================================== */ body.visual-identity-v1 .prototype-topnav.home-topnav { background: var(--brand-trust); border-color: color-mix(in srgb, var(--brand-trust) 60%, black); } /* La home (index.html) ne charge PAS calculator-official.css (seule exception du site, confirmée à l'audit des réels) : les règles .visual-identity-v1 .prototype-topnav existantes là-bas (nav, wordmark, sous-menu) n'atteignent donc jamais cette page. Répliquées ici pour que le header reste cohérent partout où .visual-identity-v1 est actif, que calculator-official.css soit chargé ou non — valeurs strictement identiques, aucune divergence de couleur introduite. */ body.visual-identity-v1 .prototype-topnav .brand-word--light { color: #fff; } body.visual-identity-v1 .prototype-topnav .brand-word--accent { color: var(--brand-transform-bright); } body.visual-identity-v1 .prototype-nav > a, body.visual-identity-v1 .prototype-nav-trigger { color: #C3D3F5; } body.visual-identity-v1 .prototype-nav > a:hover, body.visual-identity-v1 .prototype-nav-trigger:hover { color: var(--brand-transform-bright); } body.visual-identity-v1 .prototype-topnav { --nav-focus-color: var(--brand-transform-bright); } body.visual-identity-v1 .prototype-subnav { background: var(--color-surface); } body.visual-identity-v1 .prototype-subnav a { color: var(--color-text-primary); } /* ================================================================== 3. FIL D'ARIANE — retinte seulement, texte/liens inchangés. ================================================================== */ body.visual-identity-v1 .hero-trust.hero-breadcrumb a { color: var(--color-text-secondary); } body.visual-identity-v1 .hero-trust.hero-breadcrumb a:hover { color: var(--brand-trust); } /* ================================================================== 4. HERO — kicker/CTA/réassurance/hiérarchie resserrée. ================================================================== */ body.visual-identity-v1 .hero-kicker { background: transparent; color: var(--brand-trust); padding-left: 0; font-weight: 800; } body.visual-identity-v1 .hero-cta:not(.hero-cta--ghost) { background: var(--brand-trust); } body.visual-identity-v1 .hero-cta:not(.hero-cta--ghost):hover { background: #0E2450; } body.visual-identity-v1 .calc-demo__highlight--accent strong { color: var(--brand-result); } body.visual-identity-v1 .hero-reassurance { opacity: 0.75; } body.visual-identity-v1 .hero-trust[aria-label="Reassurance"] { margin-top: 8px; gap: 6px 16px; font-size: 0.82rem; color: var(--color-text-secondary); opacity: 0.85; } body.visual-identity-v1 .calculator-workspace .section-head { margin-bottom: 12px; } body.visual-identity-v1 .calculator-workspace .section-head h2 { font-size: 1.05rem; letter-spacing: 0; color: var(--color-text-secondary); font-weight: 700; } body.visual-identity-v1 .calculator-workspace .section-head p { font-size: 0.92rem; } @media (max-width: 720px) { body.visual-identity-v1 .calculator-workspace .section-head { margin-bottom: 8px; } body.visual-identity-v1 .calculator-workspace .section-head p { font-size: 0.86rem; line-height: 1.45; } } /* ================================================================== 5. L'INSTRUMENT — formulaire + résultat comme un seul objet. ================================================================== */ body.visual-identity-v1 .calculator-grid { gap: 0; } body.visual-identity-v1 .calculator-grid > .calculator-form-card, body.visual-identity-v1 .calculator-grid > .result-card { box-shadow: none; border-radius: 0; } body.visual-identity-v1 .calculator-grid > .calculator-form-card { border: 1px solid var(--color-surface-border); border-right: none; border-top-left-radius: var(--radius-lg); border-bottom-left-radius: var(--radius-lg); } body.visual-identity-v1 .calculator-grid > .result-card { border: 1px solid var(--color-surface-border); border-top: 3px solid var(--brand-result); border-top-right-radius: var(--radius-lg); border-bottom-right-radius: var(--radius-lg); } @media (max-width: 1100px) { body.visual-identity-v1 .calculator-grid > .calculator-form-card { border-right: 1px solid var(--color-surface-border); border-bottom: none; border-top-left-radius: var(--radius-lg); border-top-right-radius: var(--radius-lg); border-bottom-left-radius: 0; } body.visual-identity-v1 .calculator-grid > .result-card { border-top: 3px solid var(--brand-result); border-bottom-left-radius: var(--radius-lg); border-bottom-right-radius: var(--radius-lg); border-top-right-radius: 0; border-top-left-radius: 0; } } /* ------------------------------------------------------------------ PANNEAU RÉSULTAT — DEUX FAMILLES RÉELLES, confirmées par audit du DOM et du moteur JS partagé (assets/calculator-template.js ~L4524-4582) et du registry (assets/calculator-registry.js) : - Famille A — 20/163 calculateurs déclarent `resultEngine` dans leur entrée de registry -> calculator-template.js ajoute la classe .result-engine-v2 sur .result-card. - Famille B — 143/163 calculateurs n'ont AUCUN champ `resultEngine` -> .result-card reste sans cette classe, sur un fond clair par défaut (calculator-official.css L1041-1042 : "background: var(--color- surface)", jamais navy). Les deux familles partagent EXACTEMENT les mêmes classes de contenu (.result-value, .result-head, .result-synthesis, .result-caption, .result-impact, .result-meta, .result-breakdown__row, .result-cta) — seule la présence de .result-engine-v2 diffère. BUG CORRIGÉ ICI (revue visuelle post-migration) : les règles de couleur claire (texte quasi blanc) étaient précédemment posées sur .result-card SANS cette condition, donc appliquées aussi à la Famille B -> texte blanc sur fond blanc, y compris le chiffre principal, sur 143/163 pages. Corrigé en scopant strictement chaque règle de couleur "fond sombre" à .result-engine-v2, et en donnant à la Famille B sa propre signature V4 claire (pas un retour V3) ci-dessous. ------------------------------ */ /* --- Famille A (result-engine-v2) : panneau navy dégradé, texte clair. Fonctionne quelle que soit l'unité du résultat (€, %, km, kg, kWh, jours, années...) : ne cible que la couleur/police, jamais le texte lui-même. */ body.visual-identity-v1 .result-card.result-engine-v2 { background: linear-gradient(165deg, #0E2450 0%, var(--brand-trust) 100%); } body.visual-identity-v1 .result-card.result-engine-v2 .result-head, body.visual-identity-v1 .result-card.result-engine-v2 .result-synthesis, body.visual-identity-v1 .result-card.result-engine-v2 .result-caption, body.visual-identity-v1 .result-card.result-engine-v2 .result-impact, body.visual-identity-v1 .result-card.result-engine-v2 .result-meta, body.visual-identity-v1 .result-card.result-engine-v2 .result-breakdown__row span { color: rgba(244,246,251,0.82); } body.visual-identity-v1 .result-card.result-engine-v2 .result-value, body.visual-identity-v1 .result-card.result-engine-v2 .result-breakdown__row strong, body.visual-identity-v1 .result-card.result-engine-v2 .result-breakdown__row--total strong { color: #fff; } body.visual-identity-v1 .result-card.result-engine-v2 .result-breakdown, body.visual-identity-v1 .result-card.result-engine-v2 .result-breakdown__divider { border-color: rgba(255,255,255,0.18); } body.visual-identity-v1 .result-card.result-engine-v2 .result-cta { background: transparent; color: #fff; border: 1px solid rgba(255,255,255,0.45); gap: 6px; } body.visual-identity-v1 .result-card.result-engine-v2 .result-cta:hover, body.visual-identity-v1 .result-card.result-engine-v2 .result-cta:focus-visible { background: rgba(255,255,255,0.12); color: #fff; } /* --- Famille B (sans result-engine-v2) : variante claire V4 assumée, pas une carte V3 laissée telle quelle. Le fond, tous les textes de base (.result-head/.result-synthesis/.result-caption/.result-impact/ .result-meta/.result-breakdown__row) et le bouton .result-cta (fond --color-brand-electric = navy par la surcharge de token Section 1, calculator-official.css L358-367, déjà non conditionnel) sont CORRECTS PAR DÉFAUT dès qu'aucune règle ne les force en clair sur clair — aucune redéclaration de couleur n'est donc nécessaire ici. Seule la signature V4 volontaire est ajoutée : la ligne de total et la part la plus importante d'une répartition (déjà en --calc-accent-deep par défaut, calculator-official.css L1890) sont réaffirmées en navy plein pour hiérarchiser clairement le chiffre qui compte le plus après le résultat principal. Le liseré mint (--brand-result) du haut de carte, partagé avec la Famille A via la règle .calculator-grid > .result-card ci-dessus, est la signature commune qui rattache visiblement cette carte claire à OutilCalcul V4. */ body.visual-identity-v1 .result-card:not(.result-engine-v2) .result-breakdown__row--total strong { color: var(--brand-trust); } /* ================================================================== 6. CHAMPS — ligne de guichet, appliquée aux input-row réels de n'importe quel calculateur (aucune reconstruction DOM). ================================================================== */ body.visual-identity-v1 .input-control { /* !important justifié : calculator-official.css pose "body[class*='calc-page-'] .input-control { border-radius:12px }" à spécificité identique à .visual-identity-v1 .input-control — sans !important le résultat dépendrait de l'ordre de chargement des feuilles plutôt que d'une règle explicite. */ border-radius: 0 !important; border: none; border-bottom: 2px solid var(--color-border-strong); background: transparent; transition: border-color .15s ease; } body.visual-identity-v1 .input-control:focus-within { border-bottom-color: var(--brand-transform); box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand-transform) 20%, transparent); } body.visual-identity-v1 .input-control input { font-family: "Lexend", system-ui, sans-serif; font-weight: 700; font-size: 1.15rem; } @media (max-width: 720px) { body.visual-identity-v1 .calculator-form .input-row { padding-block: 13px; } body.visual-identity-v1 .calculator-form { gap: 9px; } body.visual-identity-v1 .input-label-group small { font-size: 0.78rem; line-height: 1.35; } body.visual-identity-v1 .input-label-text { font-size: 0.92rem; } } /* ================================================================== 7. PRESETS / RESET — traitement discret et cible tactile 44px, pour tout calculateur qui en propose (classe partagée, absente du DOM sinon = règles sans effet, aucune casse pour les calculateurs sans presets). ================================================================== */ body.visual-identity-v1 .calc-prototype-presets { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; } body.visual-identity-v1 .calc-prototype-presets a { display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; min-height: 44px; padding: 8px 14px; border: 1px solid var(--color-surface-border); border-radius: var(--radius-md); background: var(--color-surface, #fff); color: var(--color-text-primary); font-size: 0.86rem; font-weight: 600; line-height: 1.4; text-decoration: none; } body.visual-identity-v1 .calc-prototype-presets a:hover { border-color: var(--brand-trust); color: var(--brand-trust); } body.visual-identity-v1 .calc-prototype-presets a:focus-visible { outline: 2px solid var(--brand-transform); outline-offset: 2px; } @media (max-width: 720px) { body.visual-identity-v1 .calculator-form .calc-prototype-presets { display: grid; grid-template-columns: 1fr 1fr; } body.visual-identity-v1 .calc-prototype-presets a { font-size: 0.82rem; padding: 8px 10px; text-align: center; } } @media (max-width: 340px) { body.visual-identity-v1 .calculator-form .calc-prototype-presets { grid-template-columns: 1fr; } } body.visual-identity-v1 #prototype-reset { background: transparent; box-shadow: none; } body.visual-identity-v1 #prototype-reset:hover, body.visual-identity-v1 #prototype-reset:focus-visible { background: var(--color-background-primary); } /* ================================================================== 8. DÉ-CARDIFICATION DU CONTENU ÉDITORIAL — classes partagées confirmées présentes sur 162-163/163 pages calculateur (audit DOM statique). ================================================================== */ body.visual-identity-v1 .understand-result-grid { gap: 0; } body.visual-identity-v1 .understand-card { background: transparent; border: 0; box-shadow: none; border-radius: 0; padding: 0 28px; } body.visual-identity-v1 .understand-card + .understand-card { border-left: 1px solid var(--color-surface-border); } body.visual-identity-v1 .understand-card__label { color: var(--brand-trust); font-size: 0.7rem; } @media (max-width: 780px) { body.visual-identity-v1 .understand-card { border-left: 0; padding: 0; } body.visual-identity-v1 .understand-card + .understand-card { border-top: 1px solid var(--color-surface-border); border-left: 0; padding-top: 22px; margin-top: 22px; } } @media (max-width: 720px) { body.visual-identity-v1 .explanation-section .section-head, body.visual-identity-v1 .understand-result-grid ~ * .section-head { margin-bottom: 22px; } body.visual-identity-v1 .understand-card p:not(.understand-card__label) { line-height: 1.7; } body.visual-identity-v1 .understand-card__label { margin-bottom: 8px; } } body.visual-identity-v1 .insights-grid { counter-reset: benefit-counter; gap: 0; row-gap: 28px; } body.visual-identity-v1 .insight-card { background: transparent; border: 0; box-shadow: none; border-radius: 0; padding: 0 4px; overflow: visible; } body.visual-identity-v1 .insight-card::before { counter-increment: benefit-counter; content: counter(benefit-counter, decimal-leading-zero); display: block; margin-bottom: 6px; font-family: "Lexend", sans-serif; font-size: 0.82rem; font-weight: 800; letter-spacing: 0.06em; } body.visual-identity-v1 .insight-card:nth-of-type(4n+1)::before { color: var(--brand-trust); } body.visual-identity-v1 .insight-card:nth-of-type(4n+2)::before { color: var(--brand-transform); } body.visual-identity-v1 .insight-card:nth-of-type(4n+3)::before { color: var(--brand-result); } body.visual-identity-v1 .insight-card:nth-of-type(4n+4)::before { color: var(--brand-trust); } body.visual-identity-v1 .insight-card h3 { color: var(--color-text-primary); font-size: 1rem; } body.visual-identity-v1 .tools-grid--square { grid-template-columns: 1fr; gap: 0; } body.visual-identity-v1 .tool-card--square { display: flex; align-items: center; gap: 16px; min-height: 0; padding: 16px 4px; border: 0; border-bottom: 1px solid var(--color-surface-border); border-radius: 0; background: transparent; } body.visual-identity-v1 .tool-card--square:hover { transform: none; background: var(--color-background-primary); box-shadow: none; border-color: var(--color-surface-border); } body.visual-identity-v1 .tool-card--square:focus-visible { transform: none; background: var(--color-background-primary); outline: 2px solid var(--brand-transform); outline-offset: -2px; } body.visual-identity-v1 .tool-card--square .tool-icon { order: 1; flex: 0 0 auto; width: auto; height: auto; font-size: 1.1rem; } body.visual-identity-v1 .tool-card--square h3 { order: 0; flex: 0 0 auto; min-width: 220px; } body.visual-identity-v1 .tool-card--square p { order: 0; flex: 1 1 auto; padding-right: 0; margin: 0; } body.visual-identity-v1 .tool-card--square::after { display: none; } @media (max-width: 640px) { body.visual-identity-v1 .tool-card--square { display: grid; grid-template-columns: 1fr auto; grid-template-areas: "title title" "desc icon"; column-gap: 12px; row-gap: 4px; align-items: start; } body.visual-identity-v1 .tool-card--square h3 { grid-area: title; min-width: 0; } body.visual-identity-v1 .tool-card--square p { grid-area: desc; padding-right: 0; } body.visual-identity-v1 .tool-card--square .tool-icon { grid-area: icon; align-self: center; } } body.visual-identity-v1 .faq-card { grid-template-columns: 1fr; counter-reset: faq-counter; gap: 0; } body.visual-identity-v1 .faq-card details { background: transparent; border: 0; border-bottom: 1px solid var(--color-surface-border); border-radius: 0; box-shadow: none; } body.visual-identity-v1 .faq-card details:first-child { border-top: 1px solid var(--color-surface-border); } body.visual-identity-v1 .faq-card details:hover { border-color: var(--color-surface-border); box-shadow: none; } body.visual-identity-v1 .faq-card summary { counter-increment: faq-counter; min-height: 0; padding: 20px 4px; color: var(--color-text-primary); justify-content: flex-start; } body.visual-identity-v1 .faq-card summary > span:first-of-type { flex: 1 1 auto; } body.visual-identity-v1 .faq-card summary::before { content: counter(faq-counter, decimal-leading-zero); font-family: "Lexend", sans-serif; font-weight: 800; color: var(--brand-transform); margin-right: 16px; font-size: 0.86rem; } body.visual-identity-v1 .faq-card summary:hover { color: var(--brand-trust); } body.visual-identity-v1 .faq-card p { padding: 0 4px 20px; } /* CTA final : bloc navy, kicker sans pastille, bouton texte+flèche. */ body.visual-identity-v1 .covo-cta-card { background: linear-gradient(165deg, #0E2450 0%, var(--brand-trust) 100%); } body.visual-identity-v1 .covo-cta-card .section-kicker { background: transparent; border: 0; padding-left: 0; } body.visual-identity-v1 .covo-cta-card .covo-cta-button { background: transparent; color: var(--brand-result); border: 1px solid color-mix(in srgb, var(--brand-result) 45%, transparent); min-width: 0; } body.visual-identity-v1 .covo-cta-card .covo-cta-button:hover, body.visual-identity-v1 .covo-cta-card .covo-cta-button:focus-visible { background: color-mix(in srgb, var(--brand-result) 12%, transparent); color: var(--brand-result); } /* ================================================================== FOOTER — déjà largement aligné V4 par la cascade de tokens (Section 1) : .site-footer__col a, .footer-brand-wordmark span et .site-footer__badge- icon utilisent tous var(--color-brand-electric) (calculator-official.css L1359/1396/1423/1466), donc déjà navy sans règle dédiée ; le fond reste clair (var(--color-surface)) avec une simple bordure haute (var(--color-surface-border), déjà crème via la Section 1) — aucun bloc sombre, donc pas d'effet "sandwich navy" avec le header. Complète volontairement la signature V4 (typographie, hiérarchie, deuxième accent) sans toucher un seul lien ni contenu. */ body.visual-identity-v1 .footer-brand-wordmark { font-family: "Lexend", system-ui, sans-serif; } body.visual-identity-v1 .site-footer__col strong { color: var(--brand-trust); } /* Deuxième accent (turquoise) sur les réseaux sociaux uniquement, pour ne pas rendre le navy omniprésent : les liens de colonnes gardent le navy (cohérence avec l'action principale du site), les icônes sociales utilisent Transform — même logique de rareté que le reste du système. */ body.visual-identity-v1 .site-footer__socials a:hover, body.visual-identity-v1 .site-footer__socials a:focus-visible { color: var(--brand-transform); } /* Liseré mint, identique en principe à celui du panneau résultat (Section 5) : signature commune et rare qui rattache visiblement le bas de page à OutilCalcul V4, sans jamais recréer un bloc sombre. */ body.visual-identity-v1 .site-footer__inner { border-top: 2px solid var(--brand-result); } /* ------------------------------------------------------------------ HOVER RÉSIDUEL V3 — theme-hub.css (.theme-hero-cta:hover) pose un bleu électrique codé en dur (#1740b5) au lieu du token --color-brand-electric- deep, donc jamais retinté par la Section 1. Corrigé ici (spécificité supérieure : 4 classes vs 3) plutôt que dans le fichier historique, pour ne pas modifier un fichier hors du périmètre de cette migration. ------- */ body.visual-identity-v1.theme-page .theme-hero-cta:hover, body.visual-identity-v1.theme-page .theme-hero-cta:focus-visible { background: #0E2450; } /* ================================================================== 9. RÉASSURANCE MOBILE — cible l'attribut, jamais une position DOM supposée (fonctionne quel que soit l'endroit réel où le HTML/JS place cet élément, cf. audit production /calcul-cout-voiture/). ================================================================== */ @media (max-width: 720px) { body.visual-identity-v1 .hero-trust[aria-label="Reassurance"] { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 18px; margin-top: 14px; } body.visual-identity-v1 .hero-trust[aria-label="Reassurance"] span { background: transparent; border: 0; border-radius: 0; box-shadow: none; padding: 0; min-height: 0; gap: 6px; justify-content: flex-start; font-size: 0.78rem; font-weight: 600; color: var(--color-text-secondary); } body.visual-identity-v1 .hero-trust[aria-label="Reassurance"] span::before { content: "✓"; color: var(--brand-result); font-weight: 800; flex: 0 0 auto; } } @media (max-width: 340px) { body.visual-identity-v1 .hero-trust[aria-label="Reassurance"] { grid-template-columns: 1fr; gap: 6px; } } /* ================================================================== 10. LARGEUR RÉELLE DE L'INSTRUMENT MOBILE — bug pré-existant, confirmé universel : .calculator-workspace est porté à la fois par la section statique ET par le wrapper créé par renderCalculatorPage() dans calculator-template.js (assets/calculator-template.js ~L4463), imbriqués l'un dans l'autre sur CHAQUE page calculateur. calculator-official.css applique "width:var(--calc-page-width); margin:68px auto 0" à TOUT élément .calculator-workspace : le rétrécissement de 40px s'applique donc deux fois en cascade sur toutes les pages, pas seulement Coût Voiture. Ciblage par simple classe (sans ID) : couvre les deux instances imbriquées quel que soit l'id réel de la section statique de chaque calculateur. ================================================================== */ @media (max-width: 1100px) { body.visual-identity-v1 .calculator-workspace { width: 100%; margin-left: 0; margin-right: 0; } }