/* /assets/css/sp-sim.css — Composants communs des simulateurs (chargé après le CSS chassis). */

/* Bas de page sur une ligne */
.footer {
  padding: 0.55rem 1.25rem;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 0.25rem 1.1rem;
  font-size: 0.8rem; line-height: 1.4;
}
.footer p, .footer .footer-links, .footer .footer-disclaimer { margin: 0; }
.footer .footer-links { display: inline-flex; flex-wrap: wrap; gap: 0 1rem; }
.footer .footer-disclaimer { font-size: inherit; opacity: 0.75; }

/* Pastilles sous le titre : badge des barèmes, guide */
.sp-entete-liens { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin-top: 0.4rem; align-self: flex-start; }
.sp-entete-liens > * { margin: 0 !important; }

/* Badge des barèmes */
.sp-baremes {
  display: inline-flex; align-items: center; gap: 0.3rem;
  margin-top: 0.5rem; padding: 0.2rem 0.65rem;
  border-radius: 999px; font-size: 0.78rem; font-weight: 600;
  background: #ecfdf5; color: #047857; border: 1px solid #a7f3d0;
  text-decoration: none;
}
a.sp-baremes:hover { background: #d1fae5; }

/* Champ de montant */
.sp-montant { font-variant-numeric: tabular-nums; }

/* Couleurs de résultat */
.sp-gain { color: #047857; }
.sp-cout { color: #b91c1c; }

/* En-tête : guide (lien « En savoir plus ») à côté du badge */
.sp-guide {
  display: inline-flex; align-items: center; gap: 0.3rem;
  margin: 0.5rem 0 0 0.5rem; padding: 0.2rem 0.65rem;
  border-radius: 999px; font-size: 0.78rem; font-weight: 600;
  background: #eff6ff; color: #1e293b; border: 1px solid #bfdbfe; text-decoration: none;
}
.sp-guide:hover { background: #dbeafe; }

/* ── Gabarits d'écran : la page tient dans la hauteur de l'écran (bureau) ── */
@media (min-width: 900px) and (min-height: 600px) {
  body.sp-ecran { height: 100vh; display: flex; flex-direction: column; overflow: hidden; }
  body.sp-ecran > header, body.sp-ecran .header, body.sp-ecran .footer { flex-shrink: 0; }
  body.sp-ecran main[data-sp-famille] {
    flex: 1; min-height: 0; display: flex; flex-direction: column; overflow: hidden;
    width: 100%; padding-top: 0.75rem; padding-bottom: 0.5rem;
  }
  body.sp-ecran .sp-flex { flex: 1; min-height: 0; display: flex; flex-direction: column; }
  body.sp-ecran main[data-sp-famille] h1 { font-size: 1.45rem; margin-bottom: 0.15rem; }
  body.sp-ecran main[data-sp-famille] .simulator-header { padding-top: 0.75rem; padding-bottom: 0.6rem; }
  body.sp-ecran main[data-sp-famille] .simulator-description,
  body.sp-ecran main[data-sp-famille] .page-subtitle { font-size: 0.92rem; margin-bottom: 0; }
  body.sp-ecran .sp-volets { flex: 1; min-height: 0; overflow-y: auto; }
}

/* Barre d'étapes horizontale */
.sp-etapes {
  display: flex; align-items: center; gap: 0; margin: 0.5rem 0 0.75rem;
  counter-reset: etape;
}
.sp-etape {
  flex: 1; display: flex; align-items: center; justify-content: center; gap: 0.5rem;
  position: relative; padding: 0.55rem 0.75rem; border: 0; background: transparent;
  font: inherit; font-weight: 600; color: var(--texte-light, #64748b); cursor: pointer;
}
.sp-etape:not(:first-child)::before {
  content: ''; position: absolute; left: 0; right: 50%; top: 50%; height: 3px;
  margin-right: 1.4rem; background: var(--gris-200, #e2e8f0); transform: translateY(-50%); z-index: 0;
}
.sp-etape:not(:last-child)::after {
  content: ''; position: absolute; left: 50%; right: 0; top: 50%; height: 3px;
  margin-left: 1.4rem; background: var(--gris-200, #e2e8f0); transform: translateY(-50%); z-index: 0;
}
.sp-etape-num {
  position: relative; z-index: 1; display: inline-flex; align-items: center; justify-content: center;
  width: 1.9rem; height: 1.9rem; border-radius: 50%; font-size: 0.9rem;
  background: var(--gris-100, #f1f5f9); color: var(--texte-light, #64748b); border: 2px solid var(--gris-200, #e2e8f0);
}
.sp-etape-lib { position: relative; z-index: 1; background: var(--blanc, #fff); padding: 0 0.35rem; }
.sp-etape-active { color: var(--bleu-nuit, #1e293b); }
.sp-etape-active .sp-etape-num { background: var(--bleu-nuit, #1e293b); color: #fff; border-color: var(--bleu-nuit, #1e293b); }
.sp-etape-faite { color: #047857; }
.sp-etape-faite .sp-etape-num { background: #ecfdf5; color: #047857; border-color: #6ee7b7; }
.sp-etape-faite::after, .sp-etape-active::before, .sp-etape-faite::before { background: #6ee7b7 !important; }
.sp-etape:hover .sp-etape-num { border-color: var(--or, #f59e0b); }

/* Volet PDF */
.sp-volet-pdf { display: flex; flex-direction: column; gap: 0.5rem; height: 100%; min-height: 420px; }
.sp-pdf-barre { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.sp-pdf-barre .sp-btn-export { width: auto; margin: 0; padding: 0.6rem 1.4rem; }
.sp-pdf-etat { font-weight: 600; color: var(--bleu-nuit, #1e293b); }
.sp-pdf-apercu { flex: 1; width: 100%; min-height: 0; border: 1px solid var(--gris-200, #e2e8f0); border-radius: 6px; background: #fff; }
body.sp-famille-progression .sp-pdf-wrapper { display: none; }

/* Lecture du PDF : les volets sont lus hors écran */
.sp-lecture-pdf .sp-volets { position: fixed !important; left: -12000px; top: 0; overflow: visible !important; }
body.sp-famille-progression .sp-volets { display: block !important; }
/* Volets en grille de cartes : le volet lui-même, ou l'élément marqué data-sp-grille qu'il contient */
body.sp-famille-progression [data-sp-volet="saisie"]:not(:has([data-sp-grille])),
body.sp-famille-progression [data-sp-volet="resultat"]:not(:has([data-sp-grille])),
body.sp-famille-progression [data-sp-grille] {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(360px, 1fr)); gap: 1rem 1.25rem; align-items: start;
}
body.sp-famille-progression [data-sp-volet]:not(:has([data-sp-grille])) > *,
body.sp-famille-progression [data-sp-grille] > * { margin: 0 !important; min-width: 0; }
body.sp-famille-progression .sp-pleine-largeur { grid-column: 1 / -1; }

/* ── Face à face ── */
.sp-gabarit { display: flex; flex-direction: column; gap: 0.75rem; }
.sp-commun {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 0.75rem 1.25rem;
  padding: 0.75rem 1rem; border: 1px solid var(--gris-200, #e2e8f0); border-radius: 10px; background: var(--gris-50, #f8fafc);
}
/* Saisie commune compacte : les champs se rangent en ligne, les titres de section s'effacent */
.sp-commun { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); align-items: start; }
.sp-commun [data-sp-volet="commun"]:not(button), .sp-commun .section, .sp-commun .card, .sp-commun .grid-2, .sp-commun .grid-2col, .sp-commun .form-row, .sp-commun [class*="form-grid"], .sp-commun [class*="grid-"]:not([class*="grid-col"]), .sp-commun [class*="-grid"], .sp-commun .inputs-grid { display: contents; }
/* intertitres de la saisie commune : une ligne fine pleine largeur (ils portent parfois le seul libellé : Époux 1 / Époux 2) */
.sp-commun .section-title, .sp-commun .card-title, .sp-commun h2, .sp-commun h3, .sp-commun h4, .sp-commun .sp-pleine-largeur { grid-column: 1 / -1; margin: 0.15rem 0 -0.35rem !important; padding: 0 !important; border: 0 !important; font-size: 0.8rem !important; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; color: var(--texte-light, #64748b); }
.sp-commun .form-group, .sp-commun .total-box, .sp-commun .tmi-box, .sp-commun > * { margin: 0 !important; min-width: 0; }
.sp-commun .form-label { font-size: 0.85rem; margin-bottom: 0.25rem; }
.sp-commun .form-hint { font-size: 0.75rem; margin-top: 0.15rem; }
.sp-commun .form-range { margin-top: 0.35rem; }
.sp-commun .form-input, .sp-commun .form-select { padding: 0.45rem 0.65rem; }
.sp-commun .total-box { padding: 0.5rem 0.75rem; align-self: stretch; display: flex; flex-direction: column; justify-content: center; }
.sp-commun .btn-calcul { margin: 0; padding: 0.6rem 1rem; align-self: stretch; }
.sp-duel-zone > * + * { margin-top: 1rem; }
.sp-duel { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; align-items: start; }
.sp-cote { display: flex; flex-direction: column; gap: 1rem; min-width: 0; }
.sp-cote > * { margin: 0 !important; }
.sp-flash { animation: sp-flash 0.9s ease; }
@keyframes sp-flash { 0% { box-shadow: 0 0 0 0 rgba(245, 158, 11,0.6); } 100% { box-shadow: 0 0 0 14px rgba(245, 158, 11,0); } }
@media (min-width: 900px) and (min-height: 600px) {
  body.sp-famille-face_a_face .sp-gabarit { flex: 1; min-height: 0; }
  body.sp-famille-face_a_face .sp-commun { flex-shrink: 0; max-height: 34vh; overflow-y: auto; }
  body.sp-famille-face_a_face .sp-duel-zone { flex: 1; min-height: 0; overflow-y: auto; padding-right: 0.25rem; }
}
@media (max-width: 760px) { .sp-duel { grid-template-columns: 1fr; } }
/* Bandeau de synthèse compact (face à face) */
.sp-duel-zone [data-sp-volet="synthese"] {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 1.25rem;
  padding: 0.6rem 1rem !important; margin: 0 !important; min-height: 0 !important;
}
.sp-duel-zone [data-sp-volet="synthese"] > * { display: inline-block; margin: 0 !important; padding: 0 !important; border: 0 !important; font-size: 1rem !important; line-height: 1.4 !important; }
.sp-duel-zone [data-sp-volet="synthese"] > :nth-child(2) { font-weight: 700; }
.sp-duel-zone [data-sp-volet="synthese"] > * > * { display: inline; font-size: inherit !important; margin: 0 0.4rem 0 0 !important; }

/* ── Choix multiples : un onglet par option ── */
@media (min-width: 900px) and (min-height: 600px) {
  body.sp-famille-choix_multiples .sp-gabarit { flex: 1; min-height: 0; }
  body.sp-famille-choix_multiples .sp-commun { flex-shrink: 0; max-height: 34vh; overflow-y: auto; }
  body.sp-famille-choix_multiples .sp-duel-zone { flex: 1; min-height: 0; overflow-y: auto; padding-right: 0.25rem; }
}
.sp-onglets-barre { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; border-bottom: 2px solid var(--gris-200, #e2e8f0); position: sticky; top: 0; background: var(--blanc, #fff); z-index: 5; }
.sp-onglets { display: flex; flex-wrap: wrap; gap: 0.25rem; }
.sp-onglet {
  border: 1px solid var(--gris-200, #e2e8f0); border-bottom: 0; border-radius: 8px 8px 0 0;
  background: var(--gris-50, #f8fafc); padding: 0.5rem 1.1rem; font: inherit; font-weight: 600;
  color: var(--texte-light, #64748b); cursor: pointer; margin-bottom: -2px;
}
.sp-onglet-actif { background: var(--blanc, #fff); color: var(--bleu-nuit, #1e293b); border-color: var(--gris-200, #e2e8f0); border-bottom: 2px solid var(--blanc, #fff); }
.sp-onglets-pdf {
  margin-bottom: 0.35rem; border: 0; border-radius: 8px; padding: 0.45rem 0.9rem; font: inherit; font-weight: 600;
  background: var(--bleu-nuit, #1e293b); color: #fff; cursor: pointer;
}
.sp-options-zone [data-sp-options] > [data-sp-option] { margin-top: 0.75rem; }
body.sp-pdf-propre .sp-pdf-wrapper { display: none; }

/* Éléments décoratifs masqués en mode écran unique */
@media (min-width: 900px) and (min-height: 600px) {
  body.sp-ecran main[data-sp-famille] .tags { display: none; }
}

/* Info-bulle d'aide « ? » */
.sp-aide {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  width: 1.15rem; height: 1.15rem; margin-left: 0.35rem; border-radius: 50%; border: 0; padding: 0;
  background: var(--gris-200, #e2e8f0); color: var(--bleu-nuit, #1e293b); font: 700 0.72rem/1 inherit; cursor: help; vertical-align: middle;
}
.sp-bulle {
  display: none; position: absolute; z-index: 50; left: 50%; top: calc(100% + 6px); transform: translateX(-50%);
  width: max-content; max-width: 300px; padding: 0.55rem 0.7rem; border-radius: 8px;
  background: var(--bleu-nuit, #1e293b); color: #fff; font: 400 0.8rem/1.4 inherit; text-align: left; white-space: normal;
  box-shadow: 0 6px 18px rgba(0,0,0,0.18);
}
.sp-aide:hover .sp-bulle, .sp-aide:focus .sp-bulle, .sp-aide-ouverte .sp-bulle { display: block; }
.sp-hint-replie { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.sp-commun .btn-calcul { align-self: start; }

/* Barre d'action : bouton Calculer toujours visible, grisé tant qu'une saisie requise manque */
.sp-actions { flex-shrink: 0; display: flex; align-items: center; justify-content: flex-end; gap: 1rem; flex-wrap: wrap; padding: 0.6rem 0 0.1rem; }
.sp-actions .sp-manquants { flex: 1 1 260px; margin: 0; font-size: 0.9rem; color: var(--texte-light, #64748b); }
.sp-actions .btn-calcul { width: auto; min-width: 240px; margin: 0; }
.btn-calcul:disabled, .btn-calcul[disabled] {
  background: var(--gris-200, #e2e8f0) !important; color: var(--texte-light, #64748b) !important;
  cursor: not-allowed; box-shadow: none !important; transform: none !important; opacity: 1;
}
/* Dans la saisie commune : la barre d'action occupe la dernière case, collée en bas de la zone */
.sp-commun > .sp-actions { grid-column: -2 / -1; align-self: end; position: sticky; bottom: 0; padding: 0; flex-direction: column; align-items: stretch; gap: 0.35rem; }
.sp-commun > .sp-actions .btn-calcul { min-width: 0; width: 100%; }
.sp-commun > .sp-actions .sp-manquants { flex: none; font-size: 0.8rem; }
.sp-manquants:empty { display: none; }

/* ── Hors famille : saisie et résultat côte à côte, chacun défile ── */
.sp-cote-a-cote { display: grid; grid-template-columns: minmax(320px, 2fr) 3fr; gap: 1.25rem; }
.sp-pane-saisie { display: flex; flex-direction: column; min-height: 0; min-width: 0; }
.sp-pane-defile, .sp-pane-resultat { min-width: 0; }
@media (min-width: 900px) and (min-height: 600px) {
  body.sp-famille-hors_famille .sp-cote-a-cote { flex: 1; min-height: 0; }
  body.sp-famille-hors_famille .sp-pane-defile { flex: 1; min-height: 0; overflow-y: auto; padding-right: 0.25rem; }
  body.sp-famille-hors_famille .sp-pane-resultat { min-height: 0; overflow-y: auto; padding-right: 0.25rem; }
  body.sp-famille-hors_famille main.sp-defile { overflow-y: auto; }
}
@media (max-width: 899px) { .sp-cote-a-cote { grid-template-columns: 1fr; } }

/* Barre d'action posée dans un conteneur sans marge intérieure */
.sp-actions.sp-actions-marge { padding-left: 1rem; padding-right: 1rem; padding-bottom: 0.75rem; }
/* Progression : volet fait d'un seul bloc qui contient plusieurs sections → ce bloc se range en grille */
body.sp-famille-progression [data-sp-volet]:not(:has([data-sp-grille])):has(> :only-child:has(> :is(section, fieldset, .card, .form-section, .sim-section, .input-section, .section) ~ :is(section, fieldset, .card, .form-section, .sim-section, .input-section, .section))) { display: block; }
body.sp-famille-progression [data-sp-volet]:not(:has([data-sp-grille])) > :only-child:has(> :is(section, fieldset, .card, .form-section, .sim-section, .input-section, .section) ~ :is(section, fieldset, .card, .form-section, .sim-section, .input-section, .section)) {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(360px, 1fr)); gap: 1rem 1.25rem; align-items: start;
}
body.sp-famille-progression [data-sp-volet]:not(:has([data-sp-grille])) > :only-child:has(> :is(section, fieldset, .card, .form-section, .sim-section, .input-section, .section) ~ :is(section, fieldset, .card, .form-section, .sim-section, .input-section, .section)) > * { margin: 0 !important; min-width: 0; }
body.sp-famille-progression [data-sp-volet]:not(:has([data-sp-grille])) > :only-child:has(> :is(section, fieldset, .card, .form-section, .sim-section, .input-section, .section) ~ :is(section, fieldset, .card, .form-section, .sim-section, .input-section, .section)) > :is(h1, h2, h3, h4, .section-title, .card-title, .sim-section-title, p, .form-hint) { grid-column: 1 / -1; }
/* Panneau d'onglet masqué par classe : la grille du gabarit ne le rend pas visible */
body.sp-ecran [data-sp-grille]:is(.tab-content, .tab-pane, .tab-panel, .onglet-contenu):not(.active, .show, .actif) { display: none !important; }
/* Hors famille : les grilles à colonnes fixes se replient sur la largeur de la colonne de saisie */
.sp-pane-saisie { container-type: inline-size; }
@container (max-width: 640px) {
  .sp-pane-saisie :is([class*="grid-"], [class*="-grid"], .form-row) { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}
@container (max-width: 380px) {
  .sp-pane-saisie :is([class*="grid-"], [class*="-grid"], .form-row) { grid-template-columns: minmax(0, 1fr) !important; }
}
.sp-cache { display: none !important; }
/* Progression : dans les grilles de volet, titres, tableaux, graphiques et enfant unique prennent toute la largeur */
body.sp-famille-progression :is([data-sp-volet]:not(:has([data-sp-grille])), [data-sp-grille]) > :is(h2, h3, h4, .section-title, .results-title, .card-title, .sim-section-title, .chart-container, .chart-wrapper, table, .table-container, .table-wrapper, .table-responsive, canvas, .alert, .disclaimer, :only-child) { grid-column: 1 / -1; }
/* Choix multiples : l'option affichée seule prend toute la largeur de sa grille */
.sp-une-option, .sp-une-option :has(> [data-sp-option]:not(td, th)) { grid-template-columns: minmax(0, 1fr) !important; }
/* Prochain bouton à cliquer dans une progression d'étapes (jamais le bouton d'arrivée) */
@keyframes sp-appel { 0%, 100% { box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.75); } 50% { box-shadow: 0 0 0 7px rgba(245, 158, 11, 0); } }
.sp-a-cliquer { animation: sp-appel 1.4s ease-out infinite; position: relative; z-index: 1; }
@media (prefers-reduced-motion: reduce) { .sp-a-cliquer { animation: none; outline: 3px solid rgba(245, 158, 11, 0.9); outline-offset: 2px; } }
@media print { .sp-a-cliquer { animation: none; box-shadow: none; } }
/* Saisie retenue : valeurs reprises d'une simulation précédente */
.sp-reprise {
  display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.2rem 0.4rem 0.2rem 0.7rem; border-radius: 999px;
  background: #fef3c7; border: 1px solid #fde68a; color: #92400e; font-size: 0.78rem; font-weight: 500; line-height: 1.35; max-width: 100%;
}
.sp-reprise-effacer {
  border: 0; background: #fff; color: #92400e; border-radius: 999px; padding: 0.1rem 0.55rem; font: inherit; font-weight: 600; cursor: pointer;
  box-shadow: inset 0 0 0 1px #fde68a;
}
.sp-reprise-effacer:hover { background: #fde68a; }
@media print { .sp-reprise { display: none !important; } }
/* Enchaînements : simulateurs suivants sous le résultat */
.sp-suites { grid-column: 1 / -1; margin-top: 1rem; padding: 0.85rem 1rem; border: 1px dashed #d4c48a; border-radius: 10px; background: #fffdf5; }
.sp-suites-titre { margin: 0 0 0.6rem !important; font-size: 0.95rem !important; color: #1e293b; }
.sp-suites-liste { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0.6rem; }
.sp-suite { display: flex; flex-direction: column; gap: 0.15rem; padding: 0.6rem 0.8rem; border-radius: 8px; background: #fff; border: 1px solid #fde68a; text-decoration: none !important; color: #1e293b !important; transition: border-color .15s, box-shadow .15s; }
.sp-suite:hover { border-color: #f59e0b; box-shadow: 0 3px 10px rgba(245, 158, 11, 0.18); }
.sp-suite-nom { font-weight: 700; font-size: 0.9rem; line-height: 1.3; }
.sp-suite-detail { font-size: 0.78rem; color: #64748b; }
@media print { .sp-suites { display: none !important; } }

/* ── Petit écran : fenêtres en onglets, Calculer collé en bas ── */
.sp-monglets { display: none; }
@media (max-width: 899px) {
  .sp-monglets {
    display: flex; gap: 0.35rem; overflow-x: auto; position: sticky; top: 0; z-index: 30;
    margin: 0 -0.25rem 0.75rem; padding: 0.5rem 0.25rem; background: var(--blanc, #fff); box-shadow: 0 6px 10px -8px rgba(15, 23, 42, 0.35);
    scrollbar-width: none;
  }
  .sp-monglets::-webkit-scrollbar { display: none; }
  .sp-monglet {
    flex: 1 0 auto; padding: 0.55rem 0.85rem; border-radius: 999px; border: 1px solid #e2e8f0; background: #f8fafc;
    color: #1e293b; font: inherit; font-size: 0.85rem; font-weight: 600; white-space: nowrap; cursor: pointer;
  }
  .sp-monglet-actif { background: #1e293b; border-color: #1e293b; color: #fff; }
  body.sp-avec-monglets .sp-mpane:not(.sp-mactif) { display: none !important; }
  /* face à face : une option par onglet, en pleine largeur */
  .sp-duel-mobile { display: block !important; }
  .sp-duel-mobile > .sp-cote:not(.sp-mactif) { display: none !important; }
  .sp-duel-mobile > .sp-cote { width: 100% !important; }
  /* barre d'action : collée en bas de l'écran */
  .sp-actions, .sp-actions-mobile {
    position: fixed !important; left: 0; right: 0; bottom: 0; z-index: 40; margin: 0 !important; padding: 0.55rem 0.75rem calc(0.55rem + env(safe-area-inset-bottom)) !important;
    background: rgba(255, 255, 255, 0.97); box-shadow: 0 -6px 14px -8px rgba(15, 23, 42, 0.4); border-radius: 12px 12px 0 0;
    flex-direction: column; align-items: stretch; gap: 0.3rem;
  }
  body:has(.sp-actions) { padding-bottom: 5.5rem; }
  .sp-actions .btn-calcul { width: 100% !important; min-width: 0 !important; }
  .sp-actions .sp-manquants { flex: none; font-size: 0.8rem; }
  /* progression : barre d'étapes collée en haut */
  .sp-etapes { position: sticky; top: 0; z-index: 30; background: var(--blanc, #fff); padding-top: 0.4rem; padding-bottom: 0.4rem; box-shadow: 0 6px 10px -8px rgba(15, 23, 42, 0.35); }
  /* aperçu PDF : les navigateurs mobiles n'affichent pas un PDF dans la page ; le téléchargement reste */
  .sp-pdf-apercu { display: none !important; }
  .sp-volet-pdf::after { content: "L'aperçu s'affiche sur ordinateur. Téléchargez le PDF pour le consulter."; display: block; margin-top: 0.75rem; color: #64748b; font-size: 0.88rem; }
  /* en-tête plus bas : logo et Aide sur une ligne, recherche dessous */
  .header { padding: 0.6rem 0.9rem !important; gap: 0.5rem; }
  .header .btn-help { margin: 0 0 0 auto !important; padding: 0.45rem 0.9rem !important; font-size: 0.9rem !important; }
  .header .logo { font-size: 1.02rem; }
  .sp-entete-liens { gap: 0.35rem; }
}
@media (max-width: 899px) {
  /* choix multiples : onglets d'options sur une ligne qui défile, bouton PDF dessous */
  .sp-onglets-barre { flex-direction: column; align-items: stretch !important; gap: 0.5rem; }
  .sp-onglets { flex-wrap: nowrap !important; overflow-x: auto; scrollbar-width: none; }
  .sp-onglets::-webkit-scrollbar { display: none; }
  .sp-onglet { flex: 0 0 auto; white-space: nowrap; }
  .sp-onglets-pdf { width: 100%; }
}

/* Saisie commune repliée après calcul (grand écran) : une ligne résumée cliquable + la barre d'action */
.sp-resume { display: none; }
@media (min-width: 900px) and (min-height: 600px) {
  body .sp-commun.sp-replie { display: flex; align-items: center; gap: 1rem; max-height: none; overflow: visible; padding: 0.5rem 1rem; }
  .sp-commun.sp-replie > :not(.sp-resume):not(.sp-actions) { display: none !important; }
  .sp-commun.sp-replie > .sp-resume {
    display: flex; align-items: center; gap: 0.75rem; flex: 1; min-width: 0; padding: 0.35rem 0; border: 0; background: none;
    font: inherit; font-size: 0.9rem; color: var(--texte, #334155); text-align: left; cursor: pointer;
  }
  .sp-resume-texte { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
  .sp-resume-lien { flex: none; font-weight: 600; color: var(--bleu-nuit, #1e293b); text-decoration: underline; }
  .sp-commun.sp-replie > .sp-resume:hover .sp-resume-lien { color: var(--or, #f59e0b); }
  .sp-commun.sp-replie > .sp-actions { position: static; flex: none; flex-direction: row; align-items: center; }
  .sp-commun.sp-replie > .sp-actions .btn-calcul { width: auto; min-width: 200px; }
}

/* Volet « Hypothèses estimées » (valeurs modifiables par l'utilisateur dans leur plage) */
.sp-hyp { grid-column: 1 / -1; margin-top: 0.75rem; border: 1px dashed var(--or, #f59e0b); border-radius: 10px; background: #fffbeb; padding: 0.5rem 0.9rem; font-size: 0.88rem; }
.sp-hyp > summary { cursor: pointer; font-weight: 600; color: var(--bleu-nuit, #1e293b); list-style: revert; }
.sp-hyp-compte { font-weight: 400; color: var(--texte-light, #64748b); }
.sp-hyp-intro { margin: 0.4rem 0 0.6rem; color: var(--texte-light, #64748b); font-size: 0.82rem; }
.sp-hyp-lignes { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 0.6rem 1rem; }
.sp-hyp-ligne { display: flex; flex-direction: column; gap: 0.2rem; min-width: 0; }
.sp-hyp-libelle { font-weight: 500; line-height: 1.3; }
.sp-hyp-saisie { display: flex; align-items: center; gap: 0.4rem; }
.sp-hyp-saisie input { width: 9rem; padding: 0.3rem 0.5rem; border: 1px solid var(--gris-200, #e2e8f0); border-radius: 6px; font: inherit; }
.sp-hyp-saisie input.sp-hyp-hors { border-color: #dc2626; background: #fef2f2; }
.sp-hyp-unite { color: var(--texte-light, #64748b); font-size: 0.8rem; }
.sp-hyp-note { color: var(--texte-light, #64748b); font-size: 0.75rem; }
.sp-hyp-modifiee .sp-hyp-libelle { color: #b45309; }
.sp-hyp-retablir { border: 0; background: none; padding: 0; color: var(--bleu-nuit, #1e293b); text-decoration: underline; cursor: pointer; font: inherit; }
.sp-hyp-actions { margin-top: 0.6rem; text-align: right; }
.sp-hyp-appliquer { border: 0; border-radius: 8px; padding: 0.45rem 0.9rem; background: var(--bleu-nuit, #1e293b); color: #fff; font: inherit; font-weight: 600; cursor: pointer; }
.sp-hyp-appliquer:disabled { background: var(--gris-200, #e2e8f0); color: var(--texte-light, #64748b); cursor: not-allowed; }
.sp-commun.sp-replie > .sp-hyp { display: none !important; }
.sp-hyp-rappel { margin: 0 0 0.5rem !important; font-size: 0.85rem; color: #92400e; background: #fffbeb; border: 1px dashed var(--or, #f59e0b); border-radius: 8px; padding: 0.35rem 0.75rem; }
.sp-hyp-rappel button { border: 0; background: none; padding: 0; color: var(--bleu-nuit, #1e293b); text-decoration: underline; cursor: pointer; font: inherit; font-weight: 600; }