/* ============================================================ MANDAT ÉNERGIE — Thème V2 « Simulateur public » ------------------------------------------------------------ SURCOUCHE PURE CSS pour simulateur_public.html : à charger en DERNIER dans le . Aucune modification de structure, de moteur (me-engine.js) ni de config — décor uniquement. NE TOUCHE PAS : tokens d'offre, échelle DPE, logique des étapes. ============================================================ */ :root{ --yellow:#ffe93d; --yellow-ink:#4a3d00; --yellow-soft:#fffae0; --radius-md:12px; --radius-lg:18px; --radius-xl:26px; --shadow-md:0 6px 22px rgba(16,52,73,.09); --shadow-lg:0 16px 44px rgba(16,52,73,.12); } /* ---------- Fond : crème doux au lieu du blanc pur ---------- */ body{ background: radial-gradient(900px 460px at 94% -10%, rgba(255,233,61,.10), transparent 58%), radial-gradient(820px 480px at -10% 8%, rgba(26,133,184,.08), transparent 56%), linear-gradient(180deg,#f7f4ee 0%,#fbfaf7 100%) !important; } /* ---------- Header : filet jaune signature ---------- */ .site-header{border-bottom:none;box-shadow:0 1px 0 rgba(0,0,0,.05)} .site-header::after{ content:'';display:block;height:3px; background:linear-gradient(90deg,transparent,var(--yellow) 30%,var(--blue-600) 75%,transparent); } .nav-links a:hover{color:var(--blue-800)} /* ---------- Sur-titres ---------- */ .label{color:var(--blue-700)} .label::before{ content:'';display:inline-block;width:9px;height:9px;border-radius:3px; background:var(--yellow);box-shadow:0 0 0 3px var(--yellow-soft); margin-right:8px;vertical-align:1px; } /* ---------- Boutons ---------- */ .btn{border-radius:999px} .btn-fill:hover{box-shadow:0 12px 26px -12px rgba(16,52,73,.5)} .btn-outline{border-radius:999px} /* ---------- Étapes / progression : l'étape active passe au jaune ---------- */ :where(.step,.phase).active,:where(.step,.phase)[aria-current], :where(.step,.phase).cur{ color:var(--blue-900); } :where(.step,.phase).active :where(.dot,i), :where(.step,.phase).cur :where(.dot,i){ background:var(--yellow) !important; border-color:var(--yellow) !important; color:var(--yellow-ink) !important; box-shadow:0 0 0 4px var(--yellow-soft) !important; } :where(.progress) :where(i,span,.fill){border-radius:99px} /* ---------- Pastilles de choix (pills) : sélection plus chaleureuse ---------- */ :where(.pill,.pills button, .pills .pill).active, :where(.pill,.pills button, .pills .pill)[aria-pressed="true"], :where(.pill).on{ border-color:var(--blue-700) !important; box-shadow:inset 0 0 0 1.5px var(--blue-700), 0 6px 16px -8px rgba(16,52,73,.35); position:relative; } :where(.pill.active,.pill.on)::after{ content:'';position:absolute;top:-5px;right:-5px;width:14px;height:14px; border-radius:50%;background:var(--yellow);border:2.5px solid #fff; } /* ---------- Champs ---------- */ :where(.field input,.field select,.field textarea,input,select,textarea):focus{ outline:3px solid var(--yellow) !important; outline-offset:1px; border-color:var(--blue-600) !important; } /* ---------- Cartes & KPI ---------- */ .card,:where(.kpi,.ks,.kl){border-radius:var(--radius-lg)} :where(.kpi) b,:where(.kv){color:var(--blue-800)} /* ---------- Panneau de conversion « Créer mon espace » ---------- */ :where(.convert){ border-radius:var(--radius-xl); box-shadow:0 22px 48px -18px rgba(4,30,48,.45); } :where(.convert)::before{ content:'';display:block;height:4px;margin:-1px -1px 0; border-radius:var(--radius-xl) var(--radius-xl) 0 0; background:linear-gradient(90deg,var(--yellow),var(--green-500)); } /* ---------- Badges de réassurance ---------- */ :where(.trust,.reassure,.kbadge){border-radius:999px} /* ---------- GARDE-FOUS ---------- Aucune règle ne cible l'échelle DPE, les tokens --mev/--meb/--mec/--mer, ni les éléments positionnés du moteur. Décor uniquement : couleurs, rayons, ombres, fonds. Retrait = suppression du . */