/* Simulateur d'aides (outils/simulateur.html) : carte blanche sur section vert forêt, une étape à la fois.
   S'appuie sur les variables du thème. */

.simulateur {
  margin-block: var(--e6);
  margin-inline: calc(50% - 50vw);
  padding: var(--e6) calc(50vw - 50%);
  background: var(--sombre-fond);
}
.simulateur > * { max-width: 640px; margin-inline: auto; }
.prose .simulateur > * + * { margin-top: var(--e4); }

.sim-carte {
  padding: 22px 20px;
  border-radius: var(--rayon-grand);
  background: var(--carte-fond);
  color: var(--texte);
  box-shadow: 0 30px 60px -24px rgba(0, 0, 0, 0.6);
}

.sim-etape-texte { display: flex; justify-content: space-between; gap: 12px; font-size: 16px; color: var(--texte-secondaire); max-width: none; }
.sim-etape-num { font-weight: 800; color: var(--titre); }
.sim-barres { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin: 10px 0 var(--e5); }
.sim-barres span { height: 8px; border-radius: 999px; background: var(--bordure); }
.sim-barres .fait { background: var(--sombre-fond); }

.simulateur fieldset { margin: 0 0 var(--e5); padding: 0; border: 0; min-width: 0; }
.simulateur .sim-etape > :last-child { margin-bottom: 0; }

.sim-question {
  display: block;
  margin-bottom: var(--e4);
  font-family: var(--police-titres);
  font-size: 24px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--titre);
  max-width: none;
}
.sim-question:focus { outline: none; }
.sim-carte { scroll-margin-top: 12px; }

.simulateur legend:not(.sim-question),
.simulateur .champ > label {
  display: block;
  margin-bottom: var(--e2);
  font-weight: 700;
  color: var(--titre);
}

.simulateur .champ { margin-bottom: var(--e5); }
.simulateur .aide-champ { margin: 6px 0 0; font-size: 16px; color: var(--texte-secondaire); }

.simulateur select,
.simulateur input[type="number"] {
  width: 100%;
  min-height: 52px;
  padding: 10px 14px;
  border: 0;
  border-radius: 14px;
  background: var(--fond);
  color: var(--texte);
  font: inherit;
  box-shadow: inset 0 0 0 2px var(--bordure-forte);
}
.simulateur select:focus-visible,
.simulateur input[type="number"]:focus-visible { outline: 3px solid var(--lien); outline-offset: 2px; }
/* Champ en erreur : contour rouge posé par aria-invalid seulement, message sous le champ */
.simulateur :is(select, input[type="number"])[aria-invalid="true"] { box-shadow: inset 0 0 0 2px var(--cta); }
.simulateur fieldset[aria-invalid="true"] .choix-carte { box-shadow: inset 0 0 0 2px var(--cta); }
.simulateur fieldset .sim-erreur { margin-top: var(--e2); }
.simulateur .sim-erreur { margin: 6px 0 0; color: var(--cta-survol); font-weight: 700; font-size: 16.5px; }
.simulateur .sim-erreur:empty { display: none; }

.choix-cartes { display: grid; gap: 12px; }
.choix-carte {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 76px;
  padding: 12px 16px;
  border-radius: 16px;
  background: var(--fond);
  cursor: pointer;
  box-shadow: inset 0 0 0 2px var(--bordure-forte);
}
.choix-carte:hover { box-shadow: inset 0 0 0 2px var(--lien); }
.choix-carte:has(input:checked) { background: var(--lime); box-shadow: inset 0 0 0 2px var(--sombre-fond); }
.choix-carte:has(input:focus-visible) { outline: 3px solid var(--lien); outline-offset: 2px; }
.choix-icone {
  display: grid;
  place-items: center;
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--surface);
  color: var(--titre);
}
.choix-carte:has(input:checked) .choix-icone { background: var(--accent); color: var(--accent-texte); }
.choix-icone .ico { width: 22px; height: 22px; }
.choix-texte { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.choix-libelle { font-weight: 800; color: var(--titre); line-height: 1.3; }
.choix-detail { font-size: 15.5px; color: var(--texte-secondaire); line-height: 1.35; }

.choix-carte input[type="radio"] {
  appearance: none;
  flex: none;
  width: 26px;
  height: 26px;
  margin: 0;
  border-radius: 50%;
  box-shadow: inset 0 0 0 2px var(--bordure-forte);
  background: var(--fond);
}
.choix-carte input[type="radio"]:checked {
  background: var(--sombre-fond) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 12.5 4 4L18 8'/%3E%3C/svg%3E") center / 16px no-repeat;
  box-shadow: none;
}
.choix-carte input:focus-visible { outline: none; }

.choix-case { display: inline-flex; align-items: center; gap: 10px; min-height: 48px; cursor: pointer; }
.simulateur input[type="checkbox"] { width: 22px; height: 22px; accent-color: var(--lien); }

.sim-actions { display: flex; gap: 12px; margin-top: var(--e5); }
.sim-actions .bouton { flex: 1 1 auto; }
#sim-retour { flex: 0 0 auto; padding-inline: 18px; }
.sim-actions .bouton[hidden] { display: none; }
.sim-actions .bouton .ico { width: 20px; height: 20px; }

.sim-reassurance {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  font-size: 15.5px;
  color: var(--sombre-reassurance);
}
.sim-reassurance .ico { width: 18px; height: 18px; color: var(--sombre-accent); }

/* Résultat */

.simulateur-resultat:focus { outline: none; }
.simulateur-resultat > * + * { margin-top: var(--e3); }
.sim-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 34px;
  padding: 4px 14px 4px 10px;
  border-radius: 999px;
  background: var(--lime);
  color: var(--vert-profond);
  font-size: 15.5px;
  font-weight: 800;
}
.sim-badge::before {
  content: "";
  width: 18px;
  height: 18px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2308452A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='m8 12.3 2.6 2.6L16 9.5'/%3E%3C/svg%3E") center / contain no-repeat;
}
.prose .simulateur-resultat h3 { margin: var(--e3) 0 0; font-size: 28px; line-height: 1.15; letter-spacing: -0.02em; }

.sim-lignes {
  display: grid;
  grid-template-columns: 1fr;
  margin: var(--e4) 0;
  padding: 6px 18px;
  border-radius: var(--rayon-moyen);
  background: var(--surface);
}
.sim-lignes dt { padding-top: 12px; color: var(--texte); }
.sim-lignes dd {
  margin: 0;
  padding-bottom: 12px;
  font-weight: 800;
  font-variant-numeric: tabular-nums lining-nums;
  color: var(--titre);
  box-shadow: 0 1px 0 var(--bordure);
}
.sim-lignes dd:last-of-type { box-shadow: none; }
.sim-lignes dt.total { font-weight: 800; color: var(--titre); }
.sim-lignes dd.total { font-family: var(--police-titres); font-size: 24px; color: var(--lien); }

@media (min-width: 560px) {
  .sim-lignes { grid-template-columns: 1fr auto; column-gap: 16px; }
  .sim-lignes dt { padding-block: 14px; box-shadow: 0 1px 0 var(--bordure); }
  .sim-lignes dd { padding-block: 14px; text-align: right; align-self: stretch; }
  .sim-lignes dt.total, .sim-lignes dd.total { box-shadow: none; }
}

.simulateur-resultat ul { padding-left: 20px; }
.simulateur-resultat li { font-size: 16.5px; }
.simulateur-resultat li + li { margin-top: var(--e2); }
.simulateur-date { font-size: 16px; color: var(--texte-secondaire); }
.sim-modifier { gap: 0.3em; margin-top: var(--e4); min-height: 40px; padding: 0 16px; font-size: 15px; box-shadow: inset 0 0 0 1.5px var(--bordure-forte); }
/* « Détails du calcul » à gauche, « Modifier mes réponses » discret à droite, sur la même ligne */
.sim-resultat-actions { position: relative; }
.sim-resultat-actions .sim-modifier { position: absolute; top: calc((var(--cible) - 40px) / 2); right: 0; margin: 0; }
@media (max-width: 29.99em) { .sim-modifier-suite { display: none; } }
.sim-rappel {
  padding: 18px;
  border-radius: var(--rayon-moyen);
  background: var(--lime);
  box-shadow: inset 0 0 0 1px var(--lime-filet);
}
.sim-rappel p { margin: 0 0 var(--e3); color: var(--titre); font-weight: 700; }
.prose .sim-rappel a.bouton { color: var(--cta-texte); text-decoration: none; }
.sim-economies .sim-rappel { margin-block: var(--e5) var(--e4); }
.sim-hyp-titre { margin-top: var(--e2); font-weight: 700; color: var(--titre); }

/* Détails du calcul des aides : panneau replié sous le tableau */
.sim-details { margin-top: var(--e3); }
.sim-details > summary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: var(--cible);
  color: var(--lien);
  font-weight: 700;
  cursor: pointer;
  list-style: none;
}
.sim-details > summary::-webkit-details-marker { display: none; }
.sim-details > summary::after {
  content: "";
  width: 8px;
  height: 8px;
  margin-top: -4px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform 0.2s ease;
}
.sim-details[open] > summary::after { margin-top: 4px; transform: rotate(-135deg); }
.sim-details > summary:hover { text-decoration: underline; }
.sim-details > summary:focus-visible { outline: 3px solid var(--lien); outline-offset: 2px; border-radius: var(--rayon-petit); }
.sim-details > ul { margin-top: var(--e2); }

@media (min-width: 48em) {
  .simulateur { padding-block: var(--e7); }
  .sim-carte { padding: 32px 36px; }
  .choix-cartes { grid-template-columns: 1fr 1fr; }
}

/* Économies de chauffage estimées (résultat) */
.sim-economies { margin-top: var(--e5); padding-top: var(--e5); box-shadow: 0 -1px 0 var(--bordure); }
.sim-economies > * + * { margin-top: var(--e3); }
.prose .sim-economies h4 { margin: 0; font-family: var(--police-titres); font-size: 23px; line-height: 1.2; color: var(--titre); }
.sim-economies-chiffre { font-family: var(--police-titres); font-size: 28px; font-weight: 700; line-height: 1.15; color: var(--lien); font-variant-numeric: tabular-nums lining-nums; }
.sim-economies ul { padding-left: 20px; }

/* Résumé collant du résultat : colonne à droite de la carte sur ordinateur seulement ; en dessous de 62em, la
   barre d'appel du bas reprend le montant des aides (statique/js : resume() dans outils/simulateur.html). */
.sim-resume { display: none; }
@media (min-width: 62em) {
  .simulateur-avec-resume {
    display: grid;
    /* La section sort de la colonne de lecture : sa zone utile s'élargit pour loger la carte et le résumé */
    padding-inline: max(16px, calc(50vw - 500px));
    grid-template-columns: minmax(0, 640px) minmax(240px, 300px);
    justify-content: center;
    column-gap: var(--e5);
    align-items: start;
  }
  .simulateur-avec-resume > * { max-width: none; margin-inline: 0; grid-column: 1; }
  .prose .simulateur-avec-resume > * + * { margin-top: 0; }
  .simulateur-avec-resume > .sim-reassurance { margin-top: var(--e4); }
  .simulateur-avec-resume > .sim-resume {
    display: block;
    grid-column: 2;
    grid-row: 1 / span 2;
    align-self: stretch;
  }
  .sim-resume-carte {
    position: sticky;
    top: calc(var(--entete-compacte, 88px) + 24px);
    padding: 22px;
    border-radius: var(--rayon-grand);
    background: var(--carte-fond);
    color: var(--texte);
    box-shadow: 0 30px 60px -24px rgba(0, 0, 0, 0.6);
  }
  .sim-resume-carte p { margin: 0; }
  .sim-resume-libelle { font-size: 15px; color: var(--texte-secondaire); }
  .sim-resume-chiffre { margin-bottom: var(--e3) !important; color: var(--lien); font-weight: 800; font-size: 22px; line-height: 1.2; }
  .sim-resume-texte { margin-bottom: var(--e3) !important; font-size: 15.5px; line-height: 1.45; }
  .sim-resume-carte .bouton { width: 100%; justify-content: center; text-align: center; }
  .prose .sim-resume-carte a.bouton { color: var(--cta-texte); text-decoration: none; }
}