/* ==========================================================================
   Simulateurs — styles des pages /simulateurs/*.html
   Charte : celle du site (variables définies dans style.css, chargé avant).
   L'or est réservé au bouton principal, au chiffre-résultat et au focus.
   Grille d'espacement 8 px · 5 tailles de texte par écran maximum.
   ========================================================================== */

/* ---- Bandeau « version de travail » (posé par moteur.js) ---- */
.sim-bandeau {
  position: sticky;
  top: 0;
  z-index: 90;
  padding: 10px 24px;
  background: #2A1F0A;
  color: var(--gold);
  font-family: var(--font-body);
  font-size: 13px;
  line-height: 1.5;
  text-align: center;
}
/* Le bandeau étant dans le flux, aucune compensation n’est nécessaire. */

/* ---- En-tête réduit ---- */
.sim-header { max-width: 60rem; margin: 0 auto; padding: 32px 24px 0; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.sim-logo { display: inline-block; line-height: 0; }
.sim-logo img { display: block; width: auto; height: 26px; }
.sim-retour { font-family: var(--font-body); font-size: 14px; color: var(--muted); display: inline-flex; align-items: center; min-height: 44px; }
.sim-retour:hover { color: var(--foreground); }

/* ---- Corps ---- */
.sim-page { max-width: 60rem; margin: 0 auto; padding: 32px 24px 80px; font-family: var(--font-body); color: var(--foreground); }
.sim-page h1 {
  margin: 0 0 8px;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2rem, 4.5vw, 3rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
}
.sim-intro { margin: 0 0 32px; font-size: 16px; line-height: 1.6; color: var(--muted); max-width: 44rem; }
.sim-page h2 { margin: 40px 0 16px; font-family: var(--font-display); font-weight: 400; font-size: 24px; line-height: 1.2; }

/* Deux colonnes dès 900 px : formulaire à gauche, résultat à droite (collant) */
.sim-colonnes { display: grid; grid-template-columns: 1fr; gap: 32px; }
@media (min-width: 900px) {
  .sim-colonnes { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 40px; align-items: start; }
}

/* ---- Formulaire ---- */
.sim-form { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.sim-form fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
.sim-champ { display: flex; flex-direction: column; gap: 8px; }
.sim-champ label, .sim-legende { font-size: 14px; font-weight: 500; color: var(--muted); }
.sim-champ input[type="number"], .sim-champ input[type="text"], .sim-champ input[type="date"], .sim-champ select {
  width: 100%;
  box-sizing: border-box;
  min-height: 48px;
  padding: 12px 16px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 10px;
  color: var(--foreground);
  font-family: var(--font-body);
  font-size: 16px;
  transition: border-color 200ms ease;
}
.sim-champ select {
  appearance: none;
  cursor: pointer;
  padding-right: 44px;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ADADA7' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  background-size: 16px 16px;
}
.sim-champ input:focus, .sim-champ select:focus { outline: none; border-color: var(--gold); }
.sim-champ input[aria-invalid="true"] { border-color: #E5735A; }
.sim-erreur { font-size: 13px; color: #E5735A; min-height: 0; }
.sim-erreur:empty { display: none; }
.sim-aide { font-size: 13px; color: var(--muted); line-height: 1.5; }

/* Curseur synchronisé avec le champ numérique */
.sim-curseur { display: grid; grid-template-columns: 1fr 7.5rem; gap: 12px; align-items: center; }
.sim-curseur input[type="range"] { width: 100%; min-height: 44px; margin: 0; accent-color: var(--gold); cursor: pointer; }
.sim-curseur input[type="number"] { min-height: 44px; padding: 8px 12px; }

/* Groupe de boutons radio (choix exclusif) */
.sim-choix { display: flex; flex-wrap: wrap; gap: 8px; }
.sim-choix label {
  display: inline-flex; align-items: center; min-height: 44px; padding: 8px 16px;
  border: 1px solid var(--line); border-radius: 9999px; background: var(--surface);
  color: var(--muted); font-size: 14px; font-weight: 500; cursor: pointer;
  transition: border-color 200ms ease, color 200ms ease;
}
.sim-choix input { position: absolute; opacity: 0; width: 0; height: 0; }
.sim-choix input:checked + span, .sim-choix label:has(input:checked) { color: var(--foreground); border-color: var(--foreground); }
.sim-choix label:has(input:focus-visible) { outline: 2px solid var(--gold); outline-offset: 2px; }
.sim-case { display: flex; align-items: center; gap: 12px; min-height: 44px; font-size: 15px; color: var(--muted); cursor: pointer; }
.sim-case input { width: 20px; height: 20px; accent-color: var(--gold); margin: 0; }

.sim-mention { margin: 4px 0 0; font-size: 13px; color: var(--muted); }

/* ---- Résultats ---- */
.sim-resultats { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.sim-principal {
  padding: 28px; background: var(--surface); border: 1px solid var(--line); border-radius: 16px;
}
.sim-principal .sim-etiquette { margin: 0 0 8px; font-size: 14px; font-weight: 500; color: var(--muted); }
.sim-principal .sim-chiffre {
  margin: 0; font-family: var(--font-display); font-weight: 400;
  font-size: clamp(2.25rem, 5vw, 3.25rem); line-height: 1.1; letter-spacing: -0.02em; color: var(--gold);
}
.sim-principal .sim-sous { margin: 8px 0 0; font-size: 14px; color: var(--muted); line-height: 1.5; }
/* Le chiffre et son astérisque sur la même ligne : en blocs séparés,
   l’astérisque tombait seul sous le montant. */
.sim-principal .sim-chiffre { display: inline-block; vertical-align: top; }
.sim-asterisque { display: inline-block; margin-left: 4px; vertical-align: top; font-family: var(--font-display); font-size: 1.5rem; line-height: 1.6; color: var(--gold); }
.sim-note-asterisque { margin: 12px 0 0; padding-top: 12px; border-top: 1px solid var(--line); font-size: 13px; color: var(--muted); line-height: 1.5; }
.sim-note-asterisque:empty { display: none; }

/* Bloc « valeurs manquantes » : remplace le résultat quand une valeur n'est pas fiable */
.sim-bloque { padding: 24px; border: 1px solid #E5735A; border-radius: 16px; color: var(--foreground); font-size: 15px; line-height: 1.6; }
.sim-bloque h2 { margin: 0 0 8px; font-size: 20px; }
.sim-bloque ul { margin: 8px 0 0; padding-left: 20px; color: var(--muted); }

/* Tableau de détail, cartes empilées sous 640 px */
.sim-tableau { width: 100%; border-collapse: collapse; font-size: 15px; }
.sim-tableau th, .sim-tableau td { padding: 12px 10px; border-bottom: 1px solid var(--line); text-align: right; vertical-align: top; }
.sim-tableau th { font-weight: 500; color: var(--muted); font-size: 13px; }
.sim-tableau th:first-child, .sim-tableau td:first-child { text-align: left; }
.sim-tableau td.sim-fort { color: var(--foreground); font-weight: 500; }
.sim-tableau .sim-meilleure { box-shadow: inset 0 0 0 1px var(--gold); }
@media (min-width: 640px) {
  .sim-tableau .sim-meilleure { box-shadow: inset 1px 0 0 0 var(--gold), inset -1px 0 0 0 var(--gold); }
  .sim-tableau tbody tr:first-child .sim-meilleure { box-shadow: inset 1px 0 0 0 var(--gold), inset -1px 0 0 0 var(--gold), inset 0 1px 0 0 var(--gold); }
  .sim-tableau tbody tr:last-child .sim-meilleure { box-shadow: inset 1px 0 0 0 var(--gold), inset -1px 0 0 0 var(--gold), inset 0 -1px 0 0 var(--gold); }
}
.sim-tableau .sim-qualitatif { font-size: 13px; color: var(--muted); text-align: left; }
@media (max-width: 639px) {
  .sim-tableau thead { display: block; position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); }
  .sim-tableau, .sim-tableau tbody, .sim-tableau tr, .sim-tableau td { display: block; }
  .sim-tableau tr { padding: 12px 0; border-bottom: 1px solid var(--line); }
  .sim-tableau td { display: flex; justify-content: space-between; gap: 16px; padding: 6px 0; border: 0; text-align: right; }
  .sim-tableau td::before { content: attr(data-libelle); color: var(--muted); font-size: 13px; text-align: left; }
  .sim-tableau td:first-child { display: block; text-align: left; font-weight: 500; color: var(--foreground); }
  .sim-tableau td:first-child::before { display: none; }
  .sim-tableau td.sim-qualitatif { display: block; }
  .sim-tableau td.sim-qualitatif::before { display: block; margin-bottom: 4px; }
}

/* Barre empilée cliquable et jauges */
.sim-barre { display: flex; height: 28px; border-radius: 9999px; overflow: hidden; border: 1px solid var(--line); }
.sim-barre button { border: 0; padding: 0; cursor: pointer; min-width: 4px; transition: opacity 200ms ease; }
.sim-barre button:focus-visible { outline: 2px solid var(--gold); outline-offset: -2px; }
.sim-barre .s1 { background: var(--gold); }
.sim-barre .s2 { background: #8F8E86; }
.sim-barre .s3 { background: #5E5D56; }
.sim-barre-legende { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-top: 12px; font-size: 13px; color: var(--muted); }
.sim-barre-legende span::before { content: ''; display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 8px; vertical-align: middle; }
.sim-barre-legende .s1::before { background: var(--gold); }
.sim-barre-legende .s2::before { background: #8F8E86; }
.sim-barre-legende .s3::before { background: #5E5D56; }
.sim-barre-detail { margin: 8px 0 0; font-size: 14px; color: var(--foreground); }

.sim-jauge { margin: 0 0 16px; }
.sim-jauge .sim-jauge-titre { display: flex; justify-content: space-between; font-size: 14px; margin-bottom: 8px; }
.sim-jauge .sim-jauge-fond { height: 12px; border-radius: 9999px; background: var(--line); overflow: hidden; }
.sim-jauge .sim-jauge-verse { height: 100%; background: var(--gold); transition: width 400ms ease-out; }
.sim-jauge .sim-jauge-reste { margin: 8px 0 0; }

/* Blocs de saisie masqués selon le mode choisi */
.sim-page [hidden] { display: none !important; }

/* Deux chiffres principaux côte à côte */
.sim-duo { display: grid; grid-template-columns: 1fr; gap: 12px; }
@media (min-width: 640px) { .sim-duo { grid-template-columns: 1fr 1fr; } }
.sim-duo .sim-principal .sim-chiffre { font-size: 32px; }

/* Légende des courbes et notes sous tableau */
.sim-legende { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-top: 12px; font-size: 13px; color: var(--muted); }
.sim-legende span::before { content: ''; display: inline-block; width: 18px; height: 2px; margin-right: 8px; vertical-align: middle; }
.sim-legende .la::before { background: var(--gold); }
.sim-legende .lb::before { background: var(--muted); }
.sim-note { margin: 12px 0 0; font-size: 13px; line-height: 1.5; color: var(--muted); }

/* Graphiques SVG */
.sim-graphique { width: 100%; height: auto; display: block; }
.sim-graphique .axe { stroke: var(--line); stroke-width: 1; }
.sim-graphique .grille { stroke: var(--line); stroke-width: 1; stroke-dasharray: 2 4; }
.sim-graphique .etiquette { fill: var(--muted); font-family: var(--font-body); font-size: 11px; }
.sim-graphique .ligne-a { stroke: var(--gold); stroke-width: 2; fill: none; }
.sim-graphique .ligne-b { stroke: var(--muted); stroke-width: 2; fill: none; }
.sim-graphique .aire-a { fill: var(--gold); opacity: 0.18; }
.sim-graphique .marqueur { fill: var(--gold); }
.sim-graphique .point { fill: var(--foreground); }

/* Encadrés secondaires */
.sim-carte { padding: 20px 24px; background: var(--surface); border: 1px solid var(--line); border-radius: 16px; min-width: 0; }
/* Carte contenant un tableau large : elle défile seule plutôt que d'élargir la page. */
.sim-carte-large { overflow-x: auto; }
/* Blocs pleine largeur, sous les deux colonnes (tableaux larges, graphiques). */
.sim-large { margin-top: 32px; }
.sim-carte h2 { margin: 0 0 12px; font-size: 20px; }
.sim-alerte { padding: 14px 18px; border: 1px solid var(--gold); border-radius: 12px; font-size: 14px; line-height: 1.5; }
.sim-alerte:empty { display: none; }
.sim-attente { padding: 14px 18px; border: 1px dashed var(--line); border-radius: 12px; font-size: 14px; line-height: 1.5; color: var(--muted); }
.sim-liste { margin: 0; padding-left: 20px; color: var(--muted); font-size: 15px; line-height: 1.6; }

/* Bandeau permanent sous les résultats */
.sim-estimation { margin: 0; font-size: 13px; line-height: 1.6; color: var(--muted); }

/* ---- Méthode de calcul (bloc dépliable généré par moteur.js) ---- */
.sim-methode { margin-top: 48px; border: 1px solid var(--line); border-radius: 16px; }
.sim-methode summary { cursor: pointer; padding: 20px 24px; font-family: var(--font-display); font-size: 20px; list-style: none; }
.sim-methode summary::-webkit-details-marker { display: none; }
.sim-methode summary::after { content: '+'; float: right; color: var(--gold); }
.sim-methode[open] summary::after { content: '−'; }
.sim-methode > div { padding: 0 24px 24px; font-size: 15px; line-height: 1.6; color: var(--muted); }
.sim-methode ol { padding-left: 20px; }
.sim-methode li { margin-bottom: 8px; }
.sim-methode table { width: 100%; border-collapse: collapse; font-size: 14px; margin-top: 16px; }
.sim-methode th, .sim-methode td { text-align: left; padding: 8px 6px; border-bottom: 1px solid var(--line); vertical-align: top; }
.sim-methode th { font-weight: 500; color: var(--muted); font-size: 13px; }
.sim-methode a { color: var(--gold); text-decoration: underline; text-underline-offset: 3px; overflow-wrap: anywhere; }
.sim-methode .conf-a_verifier { color: var(--gold); }
.sim-methode .conf-incertain { color: #E5735A; }

/* ---- Actions et CTA ---- */
.sim-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
.sim-bouton {
  display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 10px 20px;
  border: 1px solid var(--line); border-radius: 10px; background: var(--surface); color: var(--foreground);
  font-family: var(--font-body); font-size: 14px; font-weight: 500; cursor: pointer; transition: border-color 200ms ease;
}
.sim-bouton:hover { border-color: var(--muted); }
.sim-cta { margin-top: 56px; padding: 28px; border: 1px solid var(--gold); border-radius: 16px; text-align: center; }
.sim-cta p { margin: 0 0 16px; font-size: 16px; line-height: 1.5; }
.sim-cta a {
  display: inline-flex; align-items: center; min-height: 44px; padding: 10px 24px;
  border: 1px solid var(--gold); border-radius: 9999px; color: var(--gold); font-size: 14px; font-weight: 500;
  transition: background-color 200ms ease, color 200ms ease;
}
.sim-cta a:hover { background: var(--gold); color: #1F1E1B; }

.sim-pied { max-width: 60rem; margin: 0 auto; padding: 0 24px 40px; font-size: 13px; color: var(--muted); }
.sim-pied a { color: var(--muted); text-decoration: underline; text-underline-offset: 3px; }

/* ---- Mouvement réduit ---- */
@media (prefers-reduced-motion: reduce) {
  .sim-page *, .sim-page *::before, .sim-page *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}

/* ---- Impression : fond blanc, texte noir, saisies et date incluses ---- */
@media print {
  body, .sim-page { background: #fff !important; color: #000 !important; }
  .sim-bandeau, .sim-header, .sim-actions, .sim-cta, .sim-pied, .sim-barre button:focus { display: none !important; }
  body.a-bandeau { padding-top: 0; }
  .sim-colonnes { display: block; }
  .sim-resultats { position: static; }
  .sim-principal, .sim-carte, .sim-bloque, .sim-methode { border: 1px solid #999 !important; background: #fff !important; break-inside: avoid; }
  .sim-principal .sim-chiffre, .sim-page a, .sim-asterisque { color: #000 !important; }
  .sim-page h1, .sim-page h2, .sim-tableau td, .sim-tableau th, .sim-estimation, .sim-methode > div, .sim-liste, .sim-intro { color: #000 !important; }
  .sim-tableau th, .sim-tableau td, .sim-methode th, .sim-methode td { border-color: #999 !important; }
  .sim-methode { display: block; }
  .sim-methode[open] summary::after, .sim-methode summary::after { display: none; }
  .sim-graphique .axe, .sim-graphique .grille { stroke: #999; }
  .sim-graphique .etiquette { fill: #000; }
  .sim-graphique .ligne-a, .sim-graphique .marqueur { stroke: #000; fill: #000; }
  .sim-graphique .ligne-b { stroke: #777; }
  .sim-graphique .aire-a { fill: #ccc; }
  .sim-saisies-impression { display: block !important; }
  input, select { border: 1px solid #999 !important; color: #000 !important; background: #fff !important; }
  input[type="range"] { display: none; }
  /* L’encadré or de la colonne retenue et les aplats de la barre ne sortent
     pas à l’impression sans ces deux règles. */
  .sim-tableau .sim-meilleure { box-shadow: none !important; outline: 1px solid #000; outline-offset: -1px; }
  .sim-barre, .sim-barre button, .sim-jauge-verse, .sim-jauge-fond { print-color-adjust: exact; -webkit-print-color-adjust: exact; }
  .sim-note, .sim-aide, .sim-attente, .sim-sous, .sim-etiquette, .sim-note-asterisque { color: #333 !important; }
}
/* Récapitulatif des saisies et date, visible seulement à l'impression */
.sim-saisies-impression { display: none; font-size: 13px; margin: 16px 0; }