/* Immo refonte 2026 : organisation UI/UX - simulateurs (lot parallele) */
/* =====================================================================================
   Page Nos simulateurs (simulateur/index.php, gabarit templates/temp/simulateur/index.tpl), 28/09/2026.
   Meme organisation que la page validee d'Accord, identite Immo (encre, fond chaud, orange) :
   bandeau court, colonne de gauche compacte classee par theme et collante, calculateur Mediatix
   a droite visible des l'arrivee. Tablette / mobile : menu deroulant puis calculateur.
   Arrondis 7 px maximum. Le bandeau compact (.ux-page .if-hero) est dans ux-contenus.css.
   ===================================================================================== */
.ux-simus-page .ux-simus:not(#if) { width: var(--if-int-largeur); margin: 20px auto 0; padding: 0; scroll-margin-top: calc(var(--if-entete, 100px) + 12px); }
.ux-simus-in { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 20px; align-items: start; }

/* colonne de gauche */
.ux-simunav:not(#if) {
  position: sticky; top: calc(var(--if-entete, 100px) + 16px);
  max-height: calc(100vh - var(--if-entete, 100px) - 32px); overflow: auto; overscroll-behavior: contain; scrollbar-width: thin;
  padding: 12px 8px; background: #fff; border: 1px solid var(--if-ligne); border-radius: 7px;
}
.ux-simunav-mobile { display: none; }
.ux-simunav .ux-simunav-groupe:not(#if) { margin: 12px 10px 4px; font-size: 13px; font-weight: 700; line-height: 1.3; letter-spacing: 0; text-transform: none; color: var(--if-texte); }
.ux-simunav .ux-simunav-groupe:first-child:not(#if) { margin-top: 2px; }
.ux-simunav .ux-simunav-lien:not(#if) {
  display: flex; align-items: center; gap: 10px; padding: 5px 10px; border-radius: 5px;
  color: var(--if-encre); font-size: 14.5px; font-weight: 600; line-height: 1.25; text-decoration: none !important;
  transition: background-color .15s ease;
}
.ux-simunav-lien img { width: 28px !important; height: 28px; flex: none; }
.ux-simunav .ux-simunav-lien:not(#if):hover { background: var(--if-fond-chaud); color: var(--if-encre); }
.ux-simunav .ux-simunav-lien.ux-actif:not(#if) { background: var(--color-orange, #EC7B35); box-shadow: none; color: var(--if-sur-orange, #fff); }
/* etat actif sur fond orange : icone blanche dessinee exprès (img/simulateurs-actif/, choisie dans le gabarit), 29/09/2026 */
.ux-simunav .ux-simunav-lien.ux-actif:not(#if):hover { background: var(--if-orange-survol, #CF5F1C); color: var(--if-sur-orange, #fff); }
.ux-simunav .ux-simunav-lien:focus-visible { outline: 2px solid var(--if-encre); outline-offset: -2px; }

/* calculateur */
.ux-simu-cadre:not(#if) { min-width: 0; padding: 20px 24px 24px; background: #fff; border: 1px solid var(--if-ligne); border-radius: 7px; box-shadow: var(--if-ombre); }
.ux-simu-tete { display: flex; align-items: baseline; justify-content: space-between; gap: 8px 16px; flex-wrap: wrap; margin-bottom: 14px; padding-bottom: 14px; border-bottom: 1px solid var(--if-ligne); }
.ux-simu-tete h2:not(#if) { margin: 0; font-size: 24px; line-height: 1.2; letter-spacing: -.02em; }
.ux-simu-tete p:not(#if) { margin: 0; font-size: 14.5px; line-height: 1.5; color: var(--if-texte); }
.ux-simu-tete p a:not(#if) { color: var(--if-orange-fonce); font-weight: 700; text-decoration: underline !important; text-underline-offset: 3px; }
.ux-simu-tete p a:not(#if):hover { color: var(--if-encre); }
.ux-simu-iframe iframe { display: block; width: 100%; min-height: 400px; border: 0; }
.ux-simu-vide:not(#if) { margin: 0; padding: 32px 0; font-size: 15px; color: var(--if-texte); }

@media (max-width: 1100px) {
  .ux-simus-in { grid-template-columns: 1fr; gap: 12px; }
  .ux-simunav:not(#if) { position: static; max-height: none; overflow: visible; padding: 14px 16px; }
  .ux-simunav-liste { display: none; }
  .ux-simunav-mobile { display: block; }
  .ux-simunav-mobile label:not(#if) { display: block; margin: 0 0 6px; font-size: 14px; font-weight: 700; color: var(--if-encre); }
  .ux-simunav-mobile select:not(#if) {
    display: block; width: 100%; height: 46px; padding: 0 12px; border: 1px solid #BDBEBD; border-radius: 4px;
    font: 600 15px/1.2 var(--font-sans, "Hanken Grotesk", system-ui, sans-serif); color: var(--if-encre); background-color: #fff;
  }
  .ux-simunav-mobile select:focus-visible { outline: 2px solid var(--if-encre); outline-offset: 2px; }
}
@media (max-width: 767px) {
  .ux-simus-page .ux-simus:not(#if) { margin-top: 12px; }
  .ux-simu-cadre:not(#if) { padding: 14px 12px 16px; }
  .ux-simu-tete h2:not(#if) { font-size: 21px; }
}