/* ============================================================
   MANDAT ÉNERGIE — Thème V2 « Espaces » (client + mandataire)
   ------------------------------------------------------------
   SURCOUCHE PURE CSS : à charger APRÈS les styles existants
   (espace_head / têtes mandataire). Aucune logique modifiée,
   aucun sélecteur structurel — uniquement variables + décor.
   Nouveautés : accent jaune #ffe93d, rayons plus généreux,
   fond crème apaisé, ombres teintées bleu.
   NE TOUCHE PAS : couleurs d'offre (--mev/--meb/--mec/--mer),
   échelle DPE, boutons verts d'action.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@600;700;800&display=swap');

:root{
  /* Nouvel accent */
  --yellow:#ffe93d;
  --yellow-ink:#4a3d00;
  --yellow-soft:#fffae0;
  /* Rayons plus généreux */
  --radius:22px; --radius-sm:14px; --radius-xs:11px;
  /* Ombres teintées bleu, plus franches */
  --sh-sm:0 2px 14px rgba(16,52,73,.07);
  --sh-md:0 14px 34px -14px rgba(16,52,73,.28);
  --sh-lg:0 26px 54px -20px rgba(16,52,73,.34);
}

/* ---------- Fond de page : crème calme + halos bleu/jaune ---------- */
body{
  background:
    radial-gradient(1000px 520px at 92% -12%, rgba(255,233,61,.10), transparent 58%),
    radial-gradient(900px 520px at -12% 6%, rgba(26,133,184,.10), transparent 56%),
    linear-gradient(180deg,#f7f4ee 0%,#f2f5f7 100%) !important;
  background-attachment:fixed;
}
@media(max-width:820px){ body{background-attachment:scroll} }

/* ---------- Header : filet jaune signature ---------- */
header.me::after{
  background:linear-gradient(90deg,transparent,var(--yellow) 30%,var(--blue-600) 75%,transparent);
  height:3px; opacity:1;
}
header.me .brand .logo{border-radius:16px}
header.me .who a.active{color:var(--yellow)}

/* ---------- Onglets : soulignement jaune, actif affirmé ---------- */
nav.tabs a::after{
  background:var(--yellow);
  height:3.5px;
}
nav.tabs a.active{color:var(--blue-800);font-weight:800}
nav.tabs a:hover{color:var(--blue-800)}

/* ---------- Cartes : filet jaune→bleu, coins plus doux ---------- */
.card{border-radius:var(--radius)}
.card::before{
  background:linear-gradient(90deg,var(--yellow),var(--blue-600));
}
.card:hover::before{opacity:1}

/* ---------- Eyebrows / sur-titres ---------- */
.eyebrow{color:var(--blue-700)}
.eyebrow::before{
  content:'';width:10px;height:10px;border-radius:3px;background:var(--yellow);
  box-shadow:0 0 0 3px var(--yellow-soft);
}

/* ---------- Badges « recommandé » et pastilles de mise en avant ----------
   Ciblage prudent : uniquement les classes décoratives connues. */
:where(.reco,.badge-reco,.pill-reco,.tag-reco){
  background:var(--yellow) !important;
  color:var(--yellow-ink) !important;
  border-color:transparent !important;
}

/* ---------- Notices OK : liseré un peu plus net (inchangé sur warn/err) ---------- */
:where(.notice-ok,.ok){border-left-color:var(--green-500)}

/* ---------- Focus clavier : anneau jaune lisible ---------- */
a:focus-visible,button:focus-visible,input:focus-visible,
select:focus-visible,textarea:focus-visible,[tabindex]:focus-visible{
  outline:3px solid var(--yellow) !important;
  outline-offset:2px;
}

/* ---------- Chips filtre (mandataire) : état actif plus chaleureux ---------- */
.ra-chip.on{
  background:linear-gradient(135deg,var(--blue-700),var(--blue-800));
  box-shadow:0 8px 18px -10px rgba(16,52,73,.55);
}

/* ---------- Jauges / barres de progression génériques ---------- */
:where(.bar,.progress) i,:where(.bar,.progress) span{border-radius:99px}

/* ---------- GARDE-FOUS ----------
   L'échelle DPE (styles inline via mand_dpe_color / dpeColors) n'est pas
   affectée : aucune règle ci-dessus ne cible .dpe-chip ni les couleurs A→G.
   Les tokens d'offre --mev/--meb/--mec/--mer ne sont pas redéfinis. */


/* ============================================================
   V2.1 (2026-07-30, Nicolas) — « comme la prévisualisation » :
   titres Poppins ExtraBold, palette bleu V2 du site public,
   boutons PLEINS en pilule (fin des dégradés/reflets/pulsations).
   Les CHIFFRES restent en Instrument Serif (accent éditorial V2).
   ============================================================ */
:root{
  --blue-950:#0b2431; --blue-900:#103449; --blue-800:#144a68; --blue-700:#176e97;
  --blue-600:#1a85b8; --blue-500:#2f9ccd; --blue-100:#d9eef7; --blue-50:#eef7fb;
  --navy:#0b2431; --navy-2:#103449;
  --blue:#176e97; --blue-2:#1a85b8; --blue-d:#144a68;
  --green:#80c030; --green-d:#4d7f14; --lime:#80c030; --green-l:#a6d45e;
  --ink:#0f2430; --ink-2:#4a6675;
  --line:#d7e6ee;
  --font-display:'Poppins',system-ui,sans-serif;
}
/* --- Typo : titres Poppins (V2), chiffres en serif éditorial --- */
h1,h2,h3,h4{font-family:var(--font-display)!important;font-weight:800!important;letter-spacing:-.015em}
h1.page{font-size:clamp(26px,3.2vw,33px)!important;letter-spacing:-.02em;line-height:1.12!important}
h1.page em{color:var(--green-d)}
.card h2{font-size:18.5px!important;font-weight:700!important}
.odecide h3,.osign h3,.lnky h3{font-family:var(--font-display)!important;font-weight:800!important;letter-spacing:-.02em}
.odecide h3{font-size:25px!important}
.lnky h3{font-size:21px!important}
.faq summary{font-family:var(--font-sans)!important;font-weight:700!important;font-size:15.5px!important}
.ecocalc>summary{font-family:var(--font-sans)!important}
header.me .brand .name{font-family:var(--font-display);font-size:18px}
/* --- Header : plus sobre, logo à l'échelle V2 --- */
header.me{background:var(--blue-950)!important}
header.me .brand img{height:64px!important}
@media(max-width:680px){header.me .brand img{height:46px!important}}
/* --- Boutons : pleins, pilule, sans reflet ni pulsation --- */
.btn{background:var(--blue-600)!important;border-radius:999px!important;font-weight:800!important;box-shadow:0 10px 24px -12px rgba(26,133,184,.55)!important;filter:none!important}
.btn::before{display:none!important}
.btn.green{background:var(--green)!important;box-shadow:0 10px 24px -12px rgba(128,192,48,.55)!important}
.btn.ghost{background:#fff!important;color:var(--blue-900)!important;border:2px solid var(--blue-900)!important;box-shadow:none!important}
.btn.ghost:hover{background:var(--blue-900)!important;color:#fff!important}
.osign .btnbig,.odecide .btnbig{animation:none!important;background:var(--green)!important;border-radius:999px!important;box-shadow:0 10px 24px rgba(128,192,48,.4)!important}
.osign .btnbig::before,.odecide .btnbig::before{display:none!important}
.osign .btnbig:hover,.odecide .btnbig:hover{transform:translateY(-2px);box-shadow:0 14px 30px rgba(128,192,48,.5)!important}
.signbar .sb-btn{background:var(--green)!important;color:#fff!important}
.btnp2{background:var(--blue-600)!important;border-radius:999px!important}
.btnp2:hover{background:var(--blue-700)!important}
.odlnk,.osign .lnk{border-radius:999px!important}
.odl-pdf{background:var(--green)!important;border-radius:999px!important}
/* --- Enedis Data Connect : visuels officiels à taille contractuelle --- */
.lnky .lk-r img.lk-logo{height:26px!important;width:auto!important;max-width:none!important;align-self:flex-start!important;object-fit:contain}
.lnky a.lk-btn img{width:100%!important;max-width:282px!important;height:auto!important}

/* ============================================================
   V2.2 (2026-08-01, Nicolas) — « Mon offre » : le bloc de décision
   passe en HÉRO NAVY. C'est LE bloc le plus important de l'espace :
   fond nuit #0b2431 + halo jaune (signature V2 du site public),
   deux chemins en pilules — facture VERTE / signature JAUNE
   (le jaune = couleur « recommandé » du système V2). Le reste de
   la page reste clair : un seul bloc sombre = une seule décision.
   ============================================================ */
.odecide{
  background:
    radial-gradient(560px 320px at 88% -20%, rgba(255,233,61,.16), transparent 60%),
    radial-gradient(520px 300px at -10% 110%, rgba(26,133,184,.22), transparent 62%),
    linear-gradient(150deg,var(--navy) 0%,var(--navy-2) 100%) !important;
  border:1px solid rgba(255,255,255,.08)!important;
  border-radius:var(--radius)!important;
  box-shadow:var(--sh-lg)!important;
  padding:34px 36px!important;
}
@media(max-width:620px){.odecide{padding:26px 20px!important}}
.odecide::before{
  background:radial-gradient(circle,rgba(255,233,61,.20),transparent 65%);
}
/* Trame discrète façon blueprint (même motif que .osign, en clair sur nuit) */
.odecide::after{
  content:'';position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);
  background-size:34px 34px;
}
.odecide>div{position:relative;z-index:1}
.odecide .od-lab{color:var(--yellow)!important}
.odecide .od-lab::before{background:var(--yellow)!important}
.odecide h3{color:#fff!important;font-size:27px!important}
.odecide .od-sub{color:#bcd6e6!important}
/* Chips de réassurance : verre clair sur nuit, coche verte */
.odecide .od-chips span{
  background:rgba(255,255,255,.07)!important;
  border:1px solid rgba(255,255,255,.16)!important;
  color:#e4eff6!important;
}
/* Deux chemins : pilules pleine hauteur, poids égal —
   facture = VERT (action), signature = JAUNE (recommandé V2) */
.odecide .odcta .btnbig{padding:17px 26px!important;font-size:15.5px!important}
.odecide .btnbig{box-shadow:0 14px 30px -10px rgba(0,0,0,.5),0 10px 24px rgba(128,192,48,.25)!important}
.odecide .btnbig.blu{
  background:var(--yellow)!important;
  color:var(--yellow-ink)!important;
  box-shadow:0 14px 30px -10px rgba(0,0,0,.5),0 10px 26px rgba(255,233,61,.28)!important;
}
.odecide .btnbig.blu:hover{box-shadow:0 18px 36px -10px rgba(0,0,0,.55),0 14px 32px rgba(255,233,61,.38)!important}
.odecide .btnbig.blu .emschip{background:var(--navy)!important;color:var(--yellow)!important}
/* Lien PDF : fantôme clair sur nuit (le seul plein reste les 2 chemins) */
.odecide .odl-pdf{
  background:transparent!important;
  border:1.5px solid rgba(255,255,255,.38)!important;
  color:#fff!important;
}
.odecide .odl-pdf:hover{background:rgba(255,255,255,.10)!important;border-color:#fff!important}
/* Ligne d'appoint : lisible sur nuit, Linky en jaune signature */
.odecide .od-alt{color:#9db8c6!important}
.odecide .od-alt strong{color:#a6d45e!important}
.odecide .od-alt a{color:var(--yellow)!important;text-decoration:underline;text-underline-offset:3px}
.odecide #signNote{color:#ffb4a8!important}