/* DA "INTELLIGENCE CALME" — /calcul-cout-voiture/ UNIQUEMENT ================================================================ Habillage visuel additif de la vraie page de production. Chargé APRÈS home-premium.css et calculator-official.css. Ne redéfinit RIEN dans ces fichiers partagés : toutes les règles ci-dessous sont confinées au sélecteur body.calc-page-calcul-cout-voiture (classe réelle déjà présente sur cette page uniquement), pour ne jamais affecter les 160+ autres calculateurs, le header ou le footer partagés. Référence visuelle validée humainement : _migration-uiux/calcul-cout-voiture/ pilot-da.css. Chaque règle a été ré-analysée et re-scopée pour la production ; aucun artefact pilote (bandeau de traçabilité, script de correspondance d'URL, robots noindex, header/footer M8) n'est repris ici. Source de vérité fonctionnelle/SEO/éditoriale/tracking/CMP/AdSense : calcul-cout-voiture/index.html et les fichiers partagés — non modifiés, non dupliqués. HTML, champs, presets, reset, calcul, tracking, JSON-LD : strictement inchangés par cette feuille. */ @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 — scopés à cette page uniquement. --brand-trust / --brand-transform / --brand-result existent déjà dans home-premium.css (triptyque navy/turquoise/vert, non utilisé jusqu'ici) : on les réutilise, on n'invente aucune nouvelle couleur. Les variables CSS personnalisées héritent normalement de body vers tous ses descendants : les scoper ici ne fuit donc jamais vers les autres pages. ---------- */ /* Audit theme V4 2026-09-20 : selecteur renforce (etait body.calc-page- calcul-cout-voiture seul, specificite 0,1,0) - calculator-official.css pose "body.visual-identity-v1[class*='calc-page-'] { --calc-accent-deep: var(--color-brand-electric-deep) }" a 0,2,0 (Phase 9-11, mecanisme partage) qui gagnait et ecrasait --calc-accent-deep ci-dessous, faisant retomber les badges pill ("VOS DONNEES"/"RESULTAT PRINCIPAL") sur le bleu generique --color-brand-electric au lieu du navy V4 (invisible a un audit de contraste : les deux bleus sont parfaitement lisibles, seule la teinte differe). Cette page ne charge pas outilcalcul-design-system.css (qui redefinit --color-brand-electric en navy pour les 159 autres pages), donc n'en beneficiait jamais. Specificite 0,3,0 ici pour gagner sans dependre de l'ordre de chargement des fichiers. */ body.visual-identity-v1.calc-page-calcul-cout-voiture[class*="calc-page-"] { --color-background-primary: #F6F4EE; /* mineral/creme, remplace #F6F7FA */ --color-surface-border: #E7E2D8; --color-border-strong: #BFB6A6; --color-text-primary: #101826; --color-text-secondary: #4B5567; --radius-xl: 18px; --radius-lg: 18px; --radius-md: 14px; --calc-accent: var(--brand-trust); --calc-accent-deep: #0E2450; /* !important justifié : trouvé lors de l'audit typographique V4 (2026-09-19) — calculator-official.css pose "body.layout-premium-page [class*='calc-page-'] { font-family: Public Sans }" à une spécificité supérieure à ce sélecteur à une seule classe. Sans !important, le corps de texte de CETTE page (déjà en production) restait silencieusement en Public Sans malgré l'intention documentée — seuls les titres passaient réellement en Source Sans 3/Lexend. Limité à cette seule déclaration. */ font-family: "Source Sans 3", system-ui, -apple-system, "Segoe UI", sans-serif !important; } body.calc-page-calcul-cout-voiture h1, body.calc-page-calcul-cout-voiture h2, body.calc-page-calcul-cout-voiture h3, body.calc-page-calcul-cout-voiture h4, body.calc-page-calcul-cout-voiture .result-value, body.calc-page-calcul-cout-voiture .result-breakdown__row strong { font-family: "Lexend", system-ui, -apple-system, "Segoe UI", sans-serif; letter-spacing: -0.01em; } body.calc-page-calcul-cout-voiture .result-value, body.calc-page-calcul-cout-voiture .result-breakdown__row strong, body.calc-page-calcul-cout-voiture .result-breakdown__row span { font-variant-numeric: tabular-nums; } /* ---------- 2. Header / Footer — VOLONTAIREMENT ABSENTS DE CE FICHIER. Décision humaine (M8 refusée pour cette phase) : le header et le footer de production restent strictement inchangés. Leur éventuelle harmonisation sera traitée globalement, séparément, hors de cette migration page-par- page. ---------- */ /* ---------- 3. Fil d'Ariane — retinte seulement, texte/liens inchangés. ---------- */ body.calc-page-calcul-cout-voiture .hero-trust.hero-breadcrumb a { color: var(--color-text-secondary); } body.calc-page-calcul-cout-voiture .hero-trust.hero-breadcrumb a:hover { color: var(--brand-trust); } /* Audit contraste 2026-09-19 (I3) : cette page ne charge ni outilcalcul-design-system.css ni la version locale non deployee de calculator-official.css qui portent deja ce correctif ailleurs sur le site - sans lui, le wordmark du header (fond marine impose par la regle .visual-identity-v1 .prototype-topnav de calculator-official.css) restait en couleurs sombres par defaut (1,41:1 / 2,44:1). Valeurs identiques a celles deja en production ailleurs, aucune divergence. */ body.calc-page-calcul-cout-voiture .prototype-topnav .brand-word--light { color: #fff; } body.calc-page-calcul-cout-voiture .prototype-topnav .brand-word--accent { color: var(--brand-transform-bright, #22D3EE); } /* ---------- 4. Hero — QUESTION -> CONTEXTE COURT -> INSTRUMENT. Rien n'est supprimé (badge/CTA/réassurance/exemple restent dans le DOM, texte inchangé) : seule la hiérarchie visuelle est resserrée pour que le calculateur se lise comme la suite naturelle du H1. ---------- */ body.calc-page-calcul-cout-voiture .hero-kicker { background: transparent; color: var(--brand-trust); padding-left: 0; font-weight: 800; } body.calc-page-calcul-cout-voiture .hero-cta:not(.hero-cta--ghost) { background: var(--brand-trust); } body.calc-page-calcul-cout-voiture .hero-cta:not(.hero-cta--ghost):hover { background: #0E2450; } /* Audit contraste 2026-09-19 (I2) : voir outilcalcul-design-system.css - duplique ici car cette page ne charge pas ce fichier. */ body.calc-page-calcul-cout-voiture .calc-demo__highlight--accent strong { color: var(--color-success-deep); } /* Audit contraste 2026-09-19 (I1) : idem, opacity retiree (3,81:1 -> 6,89:1 sur #F6F4EE). Le bloc hero-trust juste en dessous appliquait la meme dilution (0.85, 4,79:1, en zone LIMITE) sur le meme texte secondaire - retiree par coherence. */ body.calc-page-calcul-cout-voiture .hero-reassurance { opacity: 1; } body.calc-page-calcul-cout-voiture .hero-trust[aria-label="Reassurance"] { margin-top: 8px; gap: 6px 16px; font-size: 0.82rem; color: var(--color-text-secondary); } /* Le H2 "Calculez cout voiture" répète l'intention du H1 juste au-dessus : le texte SEO reste présent au caractère près, seule sa taille est ramenée à celle d'un sous-titre d'instrument (h2 reste un h2). */ body.calc-page-calcul-cout-voiture #calculateur-calcul-cout-voiture.calculator-workspace { margin-top: 28px; } body.calc-page-calcul-cout-voiture #calculateur-calcul-cout-voiture .section-head { margin-bottom: 12px; } body.calc-page-calcul-cout-voiture #calculateur-calcul-cout-voiture .section-head h2 { font-size: 1.05rem; letter-spacing: 0; color: var(--color-text-secondary); font-weight: 700; } body.calc-page-calcul-cout-voiture #calculateur-calcul-cout-voiture .section-head p { font-size: 0.92rem; } @media (max-width: 720px) { body.calc-page-calcul-cout-voiture #calculateur-calcul-cout-voiture.calculator-workspace { margin-top: 18px; } body.calc-page-calcul-cout-voiture #calculateur-calcul-cout-voiture .section-head { margin-bottom: 8px; } body.calc-page-calcul-cout-voiture #calculateur-calcul-cout-voiture .section-head p { font-size: 0.86rem; line-height: 1.45; } } /* ---------- 5. L'INSTRUMENT — formulaire + résultat comme un seul objet. Comportement existant respecté (sticky du résultat >=1101px, empilement <=1100px, voir calculator-official.css) : seule la géométrie des bordures change. ---------- */ body.calc-page-calcul-cout-voiture .calculator-grid { gap: 0; } body.calc-page-calcul-cout-voiture .calculator-grid > .calculator-form-card, body.calc-page-calcul-cout-voiture .calculator-grid > .result-card { box-shadow: none; border-radius: 0; } body.calc-page-calcul-cout-voiture .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.calc-page-calcul-cout-voiture .calculator-grid > .result-card { border: 1px solid var(--color-surface-border); border-top-right-radius: var(--radius-lg); border-bottom-right-radius: var(--radius-lg); } @media (max-width: 1100px) { body.calc-page-calcul-cout-voiture .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.calc-page-calcul-cout-voiture .calculator-grid > .result-card { border-top: none; border-bottom-left-radius: var(--radius-lg); border-bottom-right-radius: var(--radius-lg); border-top-right-radius: 0; } } /* Le volet résultat existant est déjà en dégradé de marque (result-card / result-engine-v2 dans calculator-official.css) : on retinte uniquement vers le navy validé, sans changer sa structure/contenu. */ body.calc-page-calcul-cout-voiture .result-card.result-engine-v2 { background: linear-gradient(165deg, #0E2450 0%, var(--brand-trust) 100%); } body.calc-page-calcul-cout-voiture .result-card .result-head, body.calc-page-calcul-cout-voiture .result-card .result-synthesis, body.calc-page-calcul-cout-voiture .result-card .result-caption, body.calc-page-calcul-cout-voiture .result-card .result-impact, body.calc-page-calcul-cout-voiture .result-card .result-meta, body.calc-page-calcul-cout-voiture .result-card .result-breakdown__row span, /* Audit contraste 2026-09-20 : meme trou que outilcalcul-design-system.css (.result-head h3 et .result-lead ont chacun leur propre regle color dans calculator-official.css, jamais atteinte par l'heritage depuis .result-head ci-dessus) - titre "Resultat estime" a 1,17-1,41:1, description a 1,66-2,0:1. .re-trace-line absent sur cette page, non ajoute ici. */ body.calc-page-calcul-cout-voiture .result-card .result-head h3, body.calc-page-calcul-cout-voiture .result-card .result-lead { color: rgba(244,246,251,0.82); } body.calc-page-calcul-cout-voiture .result-card .result-value, body.calc-page-calcul-cout-voiture .result-card .result-breakdown__row strong, body.calc-page-calcul-cout-voiture .result-card .result-breakdown__row--total strong { color: #fff; } /* ".result-cta" (bouton "Voir les questions frequentes", tracké calculator_result_cta_click par app.js — classe et comportement inchangés) : retinte discrète cohérente avec le panneau navy, et gap flex explicite pour corriger l'espacement chevron/texte (le gabarit JS partagé sépare texte et chevron par un simple espace, écrasé en inline-flex sans gap déclaré — correction de finition, aucun DOM/JS touché). */ body.calc-page-calcul-cout-voiture .result-card .result-cta { background: transparent; color: #fff; border: 1px solid rgba(255,255,255,0.45); gap: 6px; } body.calc-page-calcul-cout-voiture .result-card .result-cta:hover, body.calc-page-calcul-cout-voiture .result-card .result-cta:focus-visible { background: rgba(255,255,255,0.12); color: #fff; } /* ---------- 6. Champs — ligne de guichet, appliquée aux vrais input-row réels (aucune reconstruction DOM). ---------- */ body.calc-page-calcul-cout-voiture .input-control { /* !important justifié : calculator-official.css L2805 pose "body[class*='calc-page-'] .input-control { border-radius:12px }" à specificité identique (0,2,1) à notre sélecteur scopé — sans !important le résultat dépendrait fragilement de l'ordre de chargement des feuilles plutôt que d'une règle explicite. Limité à cette seule déclaration, sur le sélecteur le plus scopé possible (cette page). */ border-radius: 0 !important; border: none; border-bottom: 2px solid var(--color-border-strong); background: transparent; transition: border-color .15s ease; } body.calc-page-calcul-cout-voiture .input-control:focus-within { /* La production s'appuie sur ce box-shadow comme indicateur de focus visible réel (outline:none posé volontairement sur l'input natif, calculator-official.css L919-921) : on le retinte, on ne le supprime jamais — le supprimer casserait l'accessibilité clavier. */ border-bottom-color: var(--brand-transform); box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand-transform) 20%, transparent); } body.calc-page-calcul-cout-voiture .input-control input { font-family: "Lexend", system-ui, sans-serif; font-weight: 700; font-size: 1.15rem; } /* ---------- 6bis. Réduction de l'asymétrie formulaire/résultat. 11 vrais champs ne sont PAS masqués, retirés ni transformés en accordéon : simplement regroupés par paire visuelle quand cela a du sens (même unité/ nature), via CSS Grid sur le vrai formulaire (.calculator-form est déjà display:grid en production, sans colonnes explicites). Aucun id/name/ valeur/ordre DOM/événement n'est touché : chaque ligne est ciblée par l'id réel de son champ (:has()), jamais par sa position. Les 2 lignes qui déclenchent le libellé "Options avancées" généré en CSS (calculator- official.css ~L1807) restent forcées en pleine largeur pour que ce libellé/cette ligne continuent de courir sur toute la largeur. ---------- */ body.calc-page-calcul-cout-voiture #prototype-calculator-form.calculator-form { grid-template-columns: 1fr 1fr; column-gap: 20px; } body.calc-page-calcul-cout-voiture #prototype-calculator-form.calculator-form > .input-row:has(#km), body.calc-page-calcul-cout-voiture #prototype-calculator-form.calculator-form > .input-row:has(#parking), body.calc-page-calcul-cout-voiture #prototype-calculator-form.calculator-form > .input-row:has(#achat), body.calc-page-calcul-cout-voiture #prototype-calculator-form.calculator-form > .calc-prototype-presets { grid-column: 1 / -1; } /* .input-row est lui-même "display:grid; grid-template-columns:minmax(0,1fr) auto;" (label à gauche, valeur à droite) — pensé pour la pleine largeur. En case demi-largeur, le libellé+aide passe sur plusieurs lignes et l'"auto" de la valeur, aligné en align-items:center, se retrouve centré au milieu du bloc de texte (chevauchement constaté à l'écran en pilote). Pour les lignes réellement mises en paire, on empile donc label puis valeur plutôt que de les garder côte à côte : aucune information n'est perdue, tout reste lisible, juste vertical. */ body.calc-page-calcul-cout-voiture #prototype-calculator-form.calculator-form > .input-row:has(#conso), body.calc-page-calcul-cout-voiture #prototype-calculator-form.calculator-form > .input-row:has(#prix), body.calc-page-calcul-cout-voiture #prototype-calculator-form.calculator-form > .input-row:has(#assurance), body.calc-page-calcul-cout-voiture #prototype-calculator-form.calculator-form > .input-row:has(#entretien), body.calc-page-calcul-cout-voiture #prototype-calculator-form.calculator-form > .input-row:has(#peages), body.calc-page-calcul-cout-voiture #prototype-calculator-form.calculator-form > .input-row:has(#credit), body.calc-page-calcul-cout-voiture #prototype-calculator-form.calculator-form > .input-row:has(#amort), body.calc-page-calcul-cout-voiture #prototype-calculator-form.calculator-form > .input-row:has(#horizon) { grid-template-columns: 1fr; align-items: start; row-gap: 8px; } body.calc-page-calcul-cout-voiture #prototype-calculator-form.calculator-form > .input-row:has(#conso) .input-control, body.calc-page-calcul-cout-voiture #prototype-calculator-form.calculator-form > .input-row:has(#prix) .input-control, body.calc-page-calcul-cout-voiture #prototype-calculator-form.calculator-form > .input-row:has(#assurance) .input-control, body.calc-page-calcul-cout-voiture #prototype-calculator-form.calculator-form > .input-row:has(#entretien) .input-control, body.calc-page-calcul-cout-voiture #prototype-calculator-form.calculator-form > .input-row:has(#peages) .input-control, body.calc-page-calcul-cout-voiture #prototype-calculator-form.calculator-form > .input-row:has(#credit) .input-control, body.calc-page-calcul-cout-voiture #prototype-calculator-form.calculator-form > .input-row:has(#amort) .input-control, body.calc-page-calcul-cout-voiture #prototype-calculator-form.calculator-form > .input-row:has(#horizon) .input-control { width: 100%; } /* La production stacke déjà proprement .input-row en 1 colonne (label au-dessus, valeur en dessous, pleine largeur) sous 720px (calculator- official.css ~L2826-2838). On aligne notre bascule "2 colonnes -> 1 colonne" du FORMULAIRE sur ce même seuil, et on NE force PAS .input-row à revenir côte-à-côte en dessous (un forçage antérieur, testé en pilote, écrasait la règle de production et provoquait un écrasement du libellé à 0px de large) : en laissant faire la règle de production existante, chaque champ redevient un empilement label/valeur normal, identique au comportement mobile déjà validé du site. */ @media (max-width: 720px) { body.calc-page-calcul-cout-voiture #prototype-calculator-form.calculator-form { grid-template-columns: 1fr; } /* Densité du formulaire mobile (11 vrais champs, aucun retiré) : la production espace chaque ligne de padding-block:14px + gap:16px + une aide sur 2-3 lignes. On resserre le rythme vertical (padding/gap/aide) sans jamais réduire une zone de frappe ni un texte d'aide sous un seuil confortable : l'input garde sa hauteur, seule la respiration autour change. Aucun champ, aucune aide, aucune unité n'est retirée. Polish (revue humaine 375px) : la densité initiale (10px/4px) donnait une impression de "formulaire administratif" trop serré. Légèrement desserré (13px/9px, toujours nettement sous les 14px/16px de production) pour un rythme plus calme sans revenir à la longueur d'origine. */ body.calc-page-calcul-cout-voiture .calculator-form .input-row { padding-block: 13px; } body.calc-page-calcul-cout-voiture #prototype-calculator-form.calculator-form { gap: 9px; } body.calc-page-calcul-cout-voiture .input-label-group small { font-size: 0.78rem; line-height: 1.35; } body.calc-page-calcul-cout-voiture .input-label-text { font-size: 0.92rem; } } /* ---------- 7. Presets/reset — traitement discret, volontairement plus petit que le CTA principal du haut de page ; reset jamais mis en avant. CORRECTIF (vérifié sur le DOM/CSS HEAD/production réels) : contrairement à .input-row/.input-control/.tool-card--square/.faq-card/etc. (tous présents dans calculator-official.css de production), la classe ".calc-prototype-presets" n'a AUCUNE règle dans la vraie feuille de production — 0 occurrence trouvée. Les presets s'affichaient donc comme de simples liens bleus soulignés par défaut du navigateur, pas comme des boutons. Le style complet (et non plus seulement une retinte) est donc construit ici : bordure, fond, rayon, padding, cible tactile 44px. ---------- */ body.calc-page-calcul-cout-voiture .calc-prototype-presets { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; } body.calc-page-calcul-cout-voiture .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.calc-page-calcul-cout-voiture .calc-prototype-presets a:hover { border-color: var(--brand-trust); color: var(--brand-trust); } body.calc-page-calcul-cout-voiture .calc-prototype-presets a:focus-visible { outline: 2px solid var(--brand-transform); outline-offset: 2px; } @media (max-width: 720px) { /* Les 3 presets restent tous visibles, tappables, sans scroll horizontal : grille 2 colonnes explicite plutôt qu'un flex-wrap qui, texte long oblige, ne caserait qu'un bouton par ligne. */ body.calc-page-calcul-cout-voiture .calculator-form .calc-prototype-presets { display: grid; grid-template-columns: 1fr 1fr; } body.calc-page-calcul-cout-voiture .calc-prototype-presets a { font-size: 0.82rem; padding: 8px 10px; text-align: center; } } @media (max-width: 340px) { body.calc-page-calcul-cout-voiture .calculator-form .calc-prototype-presets { grid-template-columns: 1fr; } } body.calc-page-calcul-cout-voiture #prototype-reset { background: transparent; box-shadow: none; } body.calc-page-calcul-cout-voiture #prototype-reset:hover, body.calc-page-calcul-cout-voiture #prototype-reset:focus-visible { background: var(--color-background-primary); } /* ---------- 8. DÉ-CARDIFICATION DU CONTENU ÉDITORIAL ---------- Principe : SURFACE = SIGNIFICATION, pas SURFACE = CHAQUE BLOC DE CONTENU. Chaque section ci-dessous conserve 100% de son texte/lien/JSON-LD/ comportement réel ; seule la mise en forme "card" (fond + bordure + ombre + radius par bloc) est retirée, remplacée par de l'espace, des lignes et de la typographie. Aucune classe HTML n'est supprimée du DOM (elles restent utilisées ailleurs sur le site) : on neutralise uniquement leur habillage visuel, ici, scopé à cette page. ---------- */ /* -- 8.1 "Comprendre votre résultat" : 3 cards -> 3 colonnes éditoriales séparées par un filet, sans fond ni ombre. Les 3 informations réelles restent intactes. -- */ body.calc-page-calcul-cout-voiture .understand-result-grid { gap: 0; } body.calc-page-calcul-cout-voiture .understand-card { background: transparent; border: 0; box-shadow: none; border-radius: 0; padding: 0 28px; } body.calc-page-calcul-cout-voiture .understand-card + .understand-card { border-left: 1px solid var(--color-surface-border); } body.calc-page-calcul-cout-voiture .understand-card__label { color: var(--brand-trust); font-size: 0.7rem; } @media (max-width: 780px) { body.calc-page-calcul-cout-voiture .understand-card { border-left: 0; padding: 0; } body.calc-page-calcul-cout-voiture .understand-card + .understand-card { border-top: 1px solid var(--color-surface-border); border-left: 0; padding-top: 22px; margin-top: 22px; } } /* Polish (revue humaine 375px) : section déjà éditoriale et validée, juste un peu dense à une main. Aucune card réintroduite — seuls le rythme titre->intro->premier repère et la lisibilité du texte sont affinés, sous 720px uniquement (desktop inchangé). */ @media (max-width: 720px) { body.calc-page-calcul-cout-voiture #comprendre-resultat .section-head { margin-bottom: 22px; } body.calc-page-calcul-cout-voiture #comprendre-resultat .section-head h2 { margin-bottom: 6px; } body.calc-page-calcul-cout-voiture .understand-card p:not(.understand-card__label) { line-height: 1.7; } body.calc-page-calcul-cout-voiture .understand-card__label { margin-bottom: 8px; } } /* -- 8.2 "Pourquoi utiliser OutilCalcul.fr ?" : 4 feature-cards -> liste numérotée éditoriale (01-04), sans fond/bordure/ombre. Les 4 informations et leurs textes réels restent identiques. Couleurs limitées à la palette validée (navy/turquoise/vert en alternance sur le numéro uniquement). -- */ body.calc-page-calcul-cout-voiture .insights-grid { counter-reset: benefit-counter; gap: 0; row-gap: 28px; } body.calc-page-calcul-cout-voiture .insight-card { background: transparent; border: 0; box-shadow: none; border-radius: 0; padding: 0 4px; overflow: visible; } body.calc-page-calcul-cout-voiture .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.calc-page-calcul-cout-voiture .insight-card:nth-of-type(4n+1)::before { color: var(--brand-trust); } body.calc-page-calcul-cout-voiture .insight-card:nth-of-type(4n+2)::before { color: var(--brand-transform); } body.calc-page-calcul-cout-voiture .insight-card:nth-of-type(4n+3)::before { color: var(--brand-result); } body.calc-page-calcul-cout-voiture .insight-card:nth-of-type(4n+4)::before { color: var(--brand-trust); } body.calc-page-calcul-cout-voiture .insight-card h3 { color: var(--color-text-primary); font-size: 1rem; } /* -- 8.3 "Outils complémentaires" : 4 grosses cards carrées -> liste structurée type maillage interne. hrefs, titres, descriptions et nombre de liens strictement identiques : seule la présentation change. -- */ body.calc-page-calcul-cout-voiture .tools-grid--square { grid-template-columns: 1fr; gap: 0; } body.calc-page-calcul-cout-voiture .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.calc-page-calcul-cout-voiture .tool-card--square:hover { transform: none; background: var(--color-background-primary); box-shadow: none; border-color: var(--color-surface-border); } /* La production pose "outline:none" sur .tool-card:focus-visible et compte sur un changement de border-color/box-shadow comme indicateur — mais ici la ligne est une simple rangée sans bordure au repos, donc ce changement de couleur ne produit plus aucun contraste visible au clavier. On restaure un vrai indicateur de focus (outline), régression identique à celle déjà trouvée et corrigée sur les champs du formulaire. */ body.calc-page-calcul-cout-voiture .tool-card--square:focus-visible { transform: none; background: var(--color-background-primary); outline: 2px solid var(--brand-transform); outline-offset: -2px; } body.calc-page-calcul-cout-voiture .tool-card--square .tool-icon { order: 1; flex: 0 0 auto; width: auto; height: auto; font-size: 1.1rem; } body.calc-page-calcul-cout-voiture .tool-card--square h3 { order: 0; flex: 0 0 auto; min-width: 220px; } body.calc-page-calcul-cout-voiture .tool-card--square p { order: 0; flex: 1 1 auto; padding-right: 0; margin: 0; } body.calc-page-calcul-cout-voiture .tool-card--square::after { display: none; } @media (max-width: 640px) { /* flex-wrap laissait la flèche seule sur sa propre ligne (constaté à l'écran, 375px, en pilote) : grille explicite à la place. Titre en pleine largeur, description et flèche côte à côte juste en dessous. */ body.calc-page-calcul-cout-voiture .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.calc-page-calcul-cout-voiture .tool-card--square h3 { grid-area: title; min-width: 0; } body.calc-page-calcul-cout-voiture .tool-card--square p { grid-area: desc; padding-right: 0; } body.calc-page-calcul-cout-voiture .tool-card--square .tool-icon { grid-area: icon; align-self: center; } } /* -- 8.4 FAQ : chaque
était une card indépendante en grille 2 colonnes -> liste éditoriale numérotée sur une colonne. Questions/ réponses/ordre/JSON-LD strictement identiques ;
/ natifs inchangés (accessibles clavier par construction). -- */ body.calc-page-calcul-cout-voiture .faq-card { grid-template-columns: 1fr; counter-reset: faq-counter; gap: 0; } body.calc-page-calcul-cout-voiture .faq-card details { background: transparent; border: 0; border-bottom: 1px solid var(--color-surface-border); border-radius: 0; box-shadow: none; } body.calc-page-calcul-cout-voiture .faq-card details:first-child { border-top: 1px solid var(--color-surface-border); } body.calc-page-calcul-cout-voiture .faq-card details:hover { border-color: var(--color-surface-border); box-shadow: none; } body.calc-page-calcul-cout-voiture .faq-card summary { counter-increment: faq-counter; min-height: 0; padding: 20px 4px; color: var(--color-text-primary); /* La production pose justify-content:space-between entre 2 (question, chevron) ; le ::before numéroté devient lui aussi un enfant flex, donc 3 items = question poussée au centre. On repasse en flex-start et on laisse la question prendre l'espace restant. */ justify-content: flex-start; } body.calc-page-calcul-cout-voiture .faq-card summary > span:first-of-type { flex: 1 1 auto; } body.calc-page-calcul-cout-voiture .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.calc-page-calcul-cout-voiture .faq-card summary:hover { color: var(--brand-trust); } body.calc-page-calcul-cout-voiture .faq-card p { padding: 0 4px 20px; } /* -- 8.5 CTA final : reste un bloc navy fort (justifié : suite directe du résultat), mais moins "bannière marketing" — kicker sans pastille, bouton texte+flèche plutôt que gros bouton plein. Contenu/lien/action réels conservés. -- */ body.calc-page-calcul-cout-voiture .covo-cta-card { background: linear-gradient(165deg, #0E2450 0%, var(--brand-trust) 100%); } body.calc-page-calcul-cout-voiture .covo-cta-card .section-kicker { /* home-premium.css pose "border:1px solid var(--color-surface-border)" sur TOUT .section-kicker (base partagée, non redéfinie par calculator- official.css) : gris clair invisible sur fond clair, mais qui ressort comme un contour parasite sur le fond navy une fois le remplissage pastel retiré. Neutralisé ici, dans ce contexte sombre uniquement. */ background: transparent; border: 0; padding-left: 0; } body.calc-page-calcul-cout-voiture .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.calc-page-calcul-cout-voiture .covo-cta-card .covo-cta-button:hover, body.calc-page-calcul-cout-voiture .covo-cta-card .covo-cta-button:focus-visible { background: color-mix(in srgb, var(--brand-result) 12%, transparent); color: var(--brand-result); } /* ---------- 9. MICRO-CORRECTION RÉASSURANCE MOBILE (revue humaine 375px) ---------- CORRECTIF (vérifié sur le vrai DOM HEAD/production, pas le worktree) : la version précédente ciblait ".calculator-workspace > .hero-trust", une position qui n'existe que lorsque le JS du worktree relocalise cet élément après l'instrument. Sur le DOM réel de production, l'inspection directe (document.querySelector('div.hero-trust') sur le package isolé _deploy-cost-car) montre que .hero-trust[aria-label="Reassurance"] reste à sa position statique d'origine : DIV.hero-trust < DIV.hero-content < SECTION.hero-large.calc-hero-shell.calculator-intro. On cible donc directement l'attribut, sans hypothèse de position parent/enfant, ce qui fonctionne quel que soit l'endroit réel où le HTML/JS place cet élément. 4 "pilules" (fond + bordure + radius, calculator-official.css .hero-trust span ~L475-488) trop hautes et à l'air interactif sur mobile. Les 4 textes/leur ordre/leur présence restent strictement identiques — seul l'habillage visuel change, sous 720px uniquement (desktop non touché). ---------- */ @media (max-width: 720px) { body.calc-page-calcul-cout-voiture .hero-trust[aria-label="Reassurance"] { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 18px; margin-top: 14px; } body.calc-page-calcul-cout-voiture .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.calc-page-calcul-cout-voiture .hero-trust[aria-label="Reassurance"] span::before { content: "✓"; color: var(--brand-result); font-weight: 800; flex: 0 0 auto; } } @media (max-width: 340px) { /* Retour propre à la ligne à 320px : 2 colonnes strictes rendraient "Comparaison facile de plusieurs scenarios" trop compressé. Une seule colonne reste lisible et sobre, toujours sans pilule/fond/bordure. */ body.calc-page-calcul-cout-voiture .hero-trust[aria-label="Reassurance"] { grid-template-columns: 1fr; gap: 6px; } } /* ---------- 10. LARGEUR RÉELLE DE L'INSTRUMENT MOBILE ---------- CAUSE EXACTE (vérifiée sur le DOM HEAD/production, chaîne de parenté complète mesurée) : calculator-official.css applique "width: var(--calc-page-width); margin: 68px auto 0;" (--calc-page-width = min(1280px, calc(100% - 40px))) à TOUT élément ".calculator-workspace". Sur cette page précise, DEUX éléments portent cette classe, imbriqués l'un dans l'autre : la vraie section statique #calculateur-calcul-cout-voiture (le HTML de production), ET un wrapper généré par le moteur JS partagé à l'intérieur de #calc-root (repérable à sa classe .native-prototype-render, absente de la section statique). Le rétrécissement de 40px (20px de chaque côté) s'applique donc DEUX FOIS en cascade, d'où une largeur mesurée d'environ 256px sur un viewport de 375px au lieu des ~336px cohérents avec la marge de page standard du site (.page-shell, 12px de chaque côté). Correctif : neutraliser uniquement CETTE largeur/marge dupliquée sur les deux éléments réels concernés de cette page (aucune règle de calculator-official.css touchée, aucun JS, aucun déplacement DOM). Scopé à <=1100px (seuil réel où .calculator-grid passe déjà en 1 colonne) : le desktop, où ce double rétrécissement existe aussi mais est proportionnellement négligeable et déjà validé visuellement, reste strictement inchangé. */ @media (max-width: 1100px) { body.calc-page-calcul-cout-voiture #calculateur-calcul-cout-voiture.calculator-workspace { width: 100%; margin-left: 0; margin-right: 0; } body.calc-page-calcul-cout-voiture .calculator-workspace.native-prototype-render { width: 100%; margin-left: 0; margin-right: 0; } } /* Espace avant "Comprendre votre résultat" : cette section hérite du margin-top:68px générique de ".section-block", alors que les sections voisines (.explanation-section, .benefits-section, etc.) sont déjà réduites à 36px par la production (calculator-official.css ~L2793). Écart non intentionnel, plus visible une fois la réassurance ci-dessus allégée. Aligné uniquement sur mobile, desktop inchangé. */ @media (max-width: 720px) { body.calc-page-calcul-cout-voiture #comprendre-resultat.section-block { margin-top: 32px; } }