/* Simulateurs DPE et complément de loyer (03/11/2026) : charte du site (bleu marine, Public
   Sans, angles droits, rouge minoritaire). Une question par écran : titre, un champ ou des
   tuiles, bouton en pied, collant sur téléphone. */
:root{
  --bleu:#101C8E;--bleu-f:#0A1366;--bleu-p:#ECEEFD;--fond:#F6F6F6;--blanc:#FFFFFF;
  --txt:#161616;--txt2:#3A3A3A;--txt3:#666666;--filet:#DDDDDD;
  --rouge:#D1263A;--rouge-p:#FCE9EB;--vert:#1E7B4A;--vert-p:#E6F4EC;--jaune-p:#FFF6C9;
  --dA:#009036;--dB:#55AA35;--dC:#B6C800;--dD:#F2D900;--dE:#FBBA00;--dF:#EB6209;--dG:#E30613;
}
*{box-sizing:border-box;margin:0;padding:0}
*:not(.sim-spin),*::before,*::after{border-radius:0!important}
html{background:var(--fond)}
body{background:var(--fond);color:var(--txt);font:17px/1.55 'Public Sans',-apple-system,'Segoe UI',sans-serif;-webkit-font-smoothing:antialiased}
a{color:var(--bleu)}
button{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--rouge);outline-offset:2px}

/* en-tête */
.sim-tete{background:var(--blanc);border-bottom:1px solid var(--filet)}
.sim-nav{max-width:1000px;margin:0 auto;padding:12px 20px;display:flex;align-items:center;gap:14px}
.sim-nav .logo img{display:block;height:30px;width:auto}
.sim-nom{font-size:12px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;background:var(--bleu);color:#fff;padding:6px 9px}
.sim-nav .sim-lien{margin-left:auto;font-size:15px;font-weight:700;text-decoration:none;white-space:nowrap}
@media (max-width:520px){.sim-nav .logo img{height:24px}.sim-nom{display:none}}
.sim-prog{height:6px;background:var(--bleu-p)}
.sim-prog i{display:block;height:100%;width:8%;background:var(--bleu);transition:width .35s}

/* carte de l'écran */
main.sim{max-width:680px;margin:0 auto;padding:28px 20px 44px}
#sim-ecran{background:var(--blanc);border:1px solid var(--filet);padding:30px 34px 30px;min-height:520px;display:flex;flex-direction:column}
.sim-retour{align-self:flex-start;background:none;border:0;color:var(--txt3);font-weight:700;font-size:15px;display:flex;align-items:center;gap:4px;cursor:pointer;margin:-6px 0 12px -8px;padding:6px 8px}
.sim-retour svg{width:18px;height:18px}
.sim-retour:hover{color:var(--txt)}
.sim-titre{font-size:clamp(27px,4.6vw,34px);line-height:1.12;font-weight:850;letter-spacing:-.022em;text-wrap:balance}
.sim-sous{margin-top:12px;color:var(--txt2);font-size:17px;text-wrap:pretty}
.sim-form{margin-top:26px;display:flex;flex-direction:column;gap:16px;flex:1}
.sim-champ{display:flex;flex-direction:column;gap:8px;position:relative}
.sim-lab{font-weight:700;font-size:15px}
.sim-saisie{display:flex;align-items:center;border:2px solid var(--txt);background:var(--blanc)}
.sim-saisie:focus-within{border-color:var(--bleu);box-shadow:0 0 0 3px var(--bleu-p)}
.sim-saisie input{flex:1;min-width:0;border:0;background:transparent;padding:16px;font:inherit;font-size:20px;outline:0;color:var(--txt)}
.sim-saisie b{padding:0 16px 0 4px;font-size:20px;color:var(--txt3);font-weight:700}
@supports (-webkit-touch-callout:none){.sim-saisie input[type=date]{-webkit-appearance:none;appearance:none;min-height:60px}}
.sim-aide{font-size:14px;color:var(--txt3)}
.sim-err{color:var(--rouge);font-weight:700;font-size:15px}
.sim-actions{margin-top:auto;padding-top:14px}
.sim-btn{width:100%;display:flex;justify-content:center;align-items:center;gap:10px;background:var(--bleu);color:#fff;border:0;font-weight:800;font-size:18px;padding:18px;cursor:pointer}
.sim-btn:hover{background:var(--bleu-f)}
.sim-btn:disabled{opacity:.75;cursor:wait}
.sim-btn.sec{background:var(--blanc);color:var(--bleu);border:2px solid var(--bleu)}
.sim-spin{width:18px;height:18px;border:3px solid rgba(255,255,255,.35);border-top-color:#fff;border-radius:50%;animation:sim-t .8s linear infinite;flex:none}
@keyframes sim-t{to{transform:rotate(360deg)}}
.sim-lienbtn{background:none;border:0;color:var(--bleu);font-weight:700;font-size:16px;text-decoration:underline;cursor:pointer;text-align:left;padding:4px 0}

/* adresse */
.sim-sugg{list-style:none;border:2px solid var(--txt);border-top:0;background:var(--blanc);max-height:300px;overflow:auto;margin-top:-8px}
.sim-sugg button{width:100%;display:flex;flex-direction:column;align-items:flex-start;text-align:left;padding:12px 16px;border:0;border-bottom:1px solid var(--filet);background:none;cursor:pointer}
.sim-sugg button:hover,.sim-sugg button:focus{background:var(--bleu-p)}
.sim-sugg b{font-size:16px}
.sim-sugg span,.sim-vide{font-size:14px;color:var(--txt3)}
.sim-vide{display:block;padding:12px 16px}

/* tuiles (une réponse) */
.sim-tuiles{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.sim-tuiles.n3{grid-template-columns:repeat(3,1fr)}
.sim-tuile{border:2px solid var(--filet);background:var(--blanc);padding:20px 16px;display:flex;flex-direction:column;align-items:flex-start;gap:6px;cursor:pointer;text-align:left}
.sim-tuile:hover{border-color:var(--bleu)}
.sim-tuile b{font-size:19px;line-height:1.2}
.sim-tuile span{font-size:14px;color:var(--txt3)}
.sim-tuile svg{width:34px;height:34px;color:var(--bleu)}
.sim-tuile[aria-pressed="true"]{border-color:var(--bleu);background:var(--bleu-p)}
.sim-tuiles.nums .sim-tuile{align-items:center;justify-content:center;padding:22px 8px}
.sim-tuiles.nums .sim-tuile b{font-size:30px;font-weight:900}
.sim-tuiles.nums{grid-template-columns:repeat(4,1fr)}
@media (max-width:420px){.sim-tuiles.n3{grid-template-columns:1fr}}
/* classes énergie */
.sim-tuiles.lettres{grid-template-columns:repeat(7,1fr);gap:6px}
.sim-tuiles.lettres .sim-tuile{align-items:center;justify-content:center;padding:18px 0;border:0;color:#fff}
.sim-tuiles.lettres .sim-tuile b{font-size:26px;font-weight:900}
.sim-tuiles.lettres .sim-tuile[aria-pressed="true"]{outline:4px solid var(--txt);outline-offset:2px}
.lA{background:var(--dA)!important}.lB{background:var(--dB)!important}.lC{background:var(--dC)!important;color:var(--txt)!important}.lD{background:var(--dD)!important;color:var(--txt)!important}.lE{background:var(--dE)!important;color:var(--txt)!important}.lF{background:var(--dF)!important}.lG{background:var(--dG)!important}

/* choix multiples */
.sim-multi{display:flex;flex-direction:column;gap:10px}
.sim-puce{display:flex;align-items:center;gap:14px;border:2px solid var(--filet);background:var(--blanc);padding:14px 16px;font-size:16px;font-weight:650;text-align:left;cursor:pointer}
.sim-puce::before{content:"";width:22px;height:22px;border:2px solid var(--txt3);flex:none}
.sim-puce:hover{border-color:var(--bleu)}
.sim-puce[aria-pressed="true"]{border-color:var(--bleu);background:var(--bleu-p)}
.sim-puce[aria-pressed="true"]::before{border-color:var(--bleu);background:var(--bleu) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5' fill='none' stroke='white' stroke-width='3'/%3E%3C/svg%3E") center/16px no-repeat}
.sim-aucun{margin-top:6px}

/* DPE trouvés */
.sim-dpes{display:flex;flex-direction:column;gap:10px}
.sim-dpe{display:flex;align-items:center;gap:14px;width:100%;border:2px solid var(--filet);background:var(--blanc);padding:12px 14px;text-align:left;cursor:pointer}
.sim-dpe:hover{border-color:var(--bleu);background:var(--bleu-p)}
.sim-dpe b{display:block;font-size:16px}
.sim-dpe span span{display:block;font-size:14px;color:var(--txt3)}
.sim-lettre{flex:none;width:50px;height:50px;display:flex;align-items:center;justify-content:center;font-weight:900;font-size:27px;color:#fff;background:var(--txt3)}
.sim-lettre.p{width:38px;height:38px;font-size:20px}
.sim-perime{font-size:12px;font-weight:800;color:var(--rouge);text-transform:uppercase;letter-spacing:.06em}

/* calcul */
.sim-calc{list-style:none;display:flex;flex-direction:column;gap:14px;margin:6px 0}
.sim-calc li{display:flex;align-items:center;gap:12px;font-size:17px;color:var(--txt3);opacity:.35;transition:opacity .3s}
.sim-calc li.fait{opacity:1;color:var(--txt)}
.sim-calc li::before{content:"";width:24px;height:24px;flex:none;border:2px solid var(--filet)}
.sim-calc li.fait::before{border-color:var(--vert);background:var(--vert) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5' fill='none' stroke='white' stroke-width='3'/%3E%3C/svg%3E") center/16px no-repeat}

/* verdict et résultat */
.sim-badge{align-self:flex-start;display:inline-block;font-size:13px;font-weight:900;letter-spacing:.12em;text-transform:uppercase;padding:7px 11px;color:#fff;background:var(--rouge);margin-bottom:12px}
.sim-badge.ok{background:var(--vert)}
.sim-badge.neutre{background:var(--bleu)}
.sim-teaser{border:2px dashed var(--filet);padding:16px 18px;margin-bottom:18px;display:flex;gap:14px;align-items:center}
.sim-teaser b{display:block;font-size:34px;font-weight:900;color:var(--bleu);filter:blur(9px);user-select:none;line-height:1.1}
.sim-teaser span{font-size:14px;color:var(--txt3)}
.sim-res{display:flex;flex-direction:column;gap:18px}
.sim-res h2{font-size:24px;line-height:1.15;font-weight:850;letter-spacing:-.015em;text-wrap:balance}
.sim-res p{color:var(--txt2)}
.sim-montant{font-size:clamp(46px,9vw,64px);line-height:1;font-weight:900;color:var(--bleu);letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.sim-montant-l{font-size:16px;font-weight:700;color:var(--txt2);margin-top:6px}
.sim-plus{background:var(--vert-p);border-left:6px solid var(--vert);padding:12px 14px;font-weight:700;color:#0F4D2C}
.sim-alerte{background:var(--rouge-p);border-left:6px solid var(--rouge);padding:12px 14px;color:#5A0E18}
.sim-urgent{background:var(--jaune-p);border:2px solid var(--txt);padding:14px 16px}
.sim-urgent b{display:block;font-size:18px}
.sim-info{background:var(--bleu-p);border-left:6px solid var(--bleu);padding:12px 14px;color:var(--txt)}
.sim-raisons{list-style:none;display:flex;flex-direction:column;gap:10px}
.sim-raisons li{display:flex;gap:12px;align-items:flex-start;font-size:16px;color:var(--txt)}
.sim-raisons li::before{content:"✕";flex:none;width:26px;height:26px;background:var(--rouge);color:#fff;font-weight:900;font-size:14px;display:flex;align-items:center;justify-content:center;margin-top:1px}
.sim-raisons li.bon::before{content:"✓";background:var(--vert)}
.sim-calcul{border-top:3px solid var(--txt)}
.sim-calcul div{display:flex;justify-content:space-between;gap:12px;padding:10px 0;border-bottom:1px dashed #BFC3D6;font-size:16px}
.sim-calcul b{font-variant-numeric:tabular-nums;white-space:nowrap}
.sim-etapes{list-style:none;counter-reset:e;display:flex;flex-direction:column;gap:10px}
.sim-etapes li{display:flex;gap:12px;align-items:flex-start;font-size:16px;color:var(--txt2)}
.sim-etapes li::before{counter-increment:e;content:counter(e);flex:none;width:28px;height:28px;background:var(--bleu);color:#fff;font-weight:900;font-size:14px;display:flex;align-items:center;justify-content:center}
.sim-cta{border:2px solid var(--bleu);padding:18px;display:flex;flex-direction:column;gap:12px}
.sim-cta small{font-size:14px;color:var(--txt3)}
.sim-ok{background:var(--vert-p);border-left:6px solid var(--vert);padding:14px 16px;color:#0F4D2C}
.sim-croise{border:2px solid var(--filet);padding:14px 16px}
.sim-croise a{font-weight:800}
.sim-contact{display:flex;flex-direction:column;gap:10px}
.sim-contact .sim-saisie input{font-size:18px;padding:14px}
.sim-note{font-size:14px;color:var(--txt3)}
.sim-recommencer{align-self:flex-start;background:none;border:0;color:var(--txt3);font-weight:700;font-size:15px;text-decoration:underline;cursor:pointer;padding:0}

/* téléphone : écran plein, bouton collant */
@media (max-width:640px){
  main.sim{padding:0}
  #sim-ecran{border:0;min-height:calc(100dvh - 58px);padding:20px 18px 110px}
  .sim-actions{position:fixed;left:0;right:0;bottom:0;z-index:30;background:var(--blanc);border-top:1px solid var(--filet);padding:12px 16px calc(12px + env(safe-area-inset-bottom))}
  .sim-titre{font-size:27px}
}

/* explications sous le simulateur (référencement) */
.sim-infos{max-width:760px;margin:0 auto;padding:30px 20px 60px}
.sim-infos h2{font-size:24px;line-height:1.2;margin:32px 0 12px;letter-spacing:-.01em}
.sim-infos h3{font-size:18px;margin:22px 0 8px}
.sim-infos p,.sim-infos li{color:var(--txt2)}
.sim-infos p{margin:0 0 12px}
.sim-infos ul{margin:0 0 12px 22px}
.sim-infos table{border-collapse:collapse;width:100%;font-size:15px;background:var(--blanc);margin:8px 0 14px}
.sim-infos th,.sim-infos td{border:1px solid var(--filet);padding:8px 10px;text-align:left;vertical-align:top}
.sim-infos thead th{background:var(--bleu-p)}
.sim-pied{border-top:1px solid var(--filet);padding:28px 20px;text-align:center;color:var(--txt3);font-size:14px;background:var(--blanc)}
.sim-pied a{color:var(--txt2)}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* bandeau cookies affiché (site/track.js : classe edl-consent-ouvert sur <html>, sa hauteur
   dans --edl-consent-h) : le bouton collant passe au-dessus du bandeau, rien n'est masqué */
html.edl-consent-ouvert main.sim{padding-bottom:var(--edl-consent-h,0px)}
@media (max-width:640px){
  html.edl-consent-ouvert .sim-actions{bottom:var(--edl-consent-h,0px)}
  html.edl-consent-ouvert #sim-ecran{padding-bottom:calc(110px + var(--edl-consent-h,0px))}
}