/* ===========================================================================
   SIMULATEUR DE PRÊT IMMOBILIER — parcours en six étapes
   ---------------------------------------------------------------------------
   Ne charge qu'avec simulateur-pret-immobilier.html, en complément de
   style.css qui fournit l'en-tête, le pied de page, les boutons et les jetons
   de couleur.

   TOUTES les classes sont préfixées « sim- ». Ce n'est pas de la coquetterie :
   .step, .card et surtout .nav existent déjà dans style.css — .nav y désigne
   la navigation de l'en-tête. Les réutiliser ici casserait le menu du site.
   =========================================================================== */


/* L'attribut hidden du HTML ne suffit pas ici : style.css declare
   .btn{display:inline-flex}, et une regle d'auteur l'emporte toujours sur celle
   du navigateur. Sans cette ligne, les boutons « Precedent » et « Envoyer »
   restent visibles des la premiere etape, alors que le script les a masques.
   La regle est posee dans ce fichier, qui ne se charge que sur cette page :
   elle couvrira aussi les elements masques qu'on ajoutera plus tard. */
[hidden]{display:none !important}


/* ============================ MISE EN PAGE ============================ */

.sim-shell{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:32px;align-items:start;
  padding-bottom:72px}

.sim-card{background:var(--white);border:1px solid var(--line);border-radius:20px;
  box-shadow:var(--shadow-lg);overflow:hidden}


/* ============================ FIL DES ÉTAPES ============================ */
/* Le fil indique où l'on en est ET combien il reste. Un formulaire long sans
   cette indication fait abandonner : on ne sait pas si l'on en a pour trente
   secondes ou pour un quart d'heure. */

.sim-fil{display:flex;justify-content:space-between;margin:0;padding:24px 28px 20px;
  border-bottom:1px solid var(--line);list-style:none}
.sim-fil li{flex:1;display:flex;flex-direction:column;align-items:center;text-align:center;
  position:relative;font-size:.66rem;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:var(--muted)}
/* Le trait de liaison part du bord du rond, pas de son centre. */
.sim-fil li:not(:last-child)::after{content:"";position:absolute;top:15px;
  left:calc(50% + 18px);right:calc(-50% + 18px);height:2px;background:var(--line)}
.sim-fil li.faite:not(:last-child)::after{background:var(--navy)}
.sim-fil .dot{display:inline-flex;align-items:center;justify-content:center;
  width:32px;height:32px;border-radius:50%;border:2px solid var(--line);background:var(--white);
  color:var(--muted);font-size:.82rem;margin-bottom:8px;position:relative;z-index:1;
  transition:background .25s,border-color .25s,color .25s}
.sim-fil li.ici .dot{background:var(--navy);border-color:var(--navy);color:var(--white)}
.sim-fil li.ici{color:var(--navy)}
.sim-fil li.faite .dot{background:var(--green-lt);border-color:var(--green);color:var(--green)}


/* ============================ ÉTAPES ============================ */

.sim-etape{display:none;padding:32px 28px 24px}
.sim-etape.on{display:block}
.sim-etape h2{font-family:var(--display);font-size:1.5rem;font-weight:700;color:var(--navy-dp);
  margin:0 0 8px}
.sim-etape .sim-sous{color:var(--muted);margin:0 0 24px;font-size:.98rem}


/* ============================ CHAMPS ============================ */

.sim-champ{margin-bottom:8px;border-left:3px solid transparent;transition:border-color .25s}
.sim-champ.oblig{border-left-color:var(--navy-lt);padding-left:16px}
.sim-champ.err{border-left-color:#B23A3A}

.sim-lbl{display:block;font-size:.72rem;font-weight:700;letter-spacing:.05em;
  text-transform:uppercase;color:var(--navy-dp);margin:20px 0 10px}
.sim-lbl .req{color:#B23A3A}

.sim-aide{font-size:.86rem;color:var(--muted);margin:8px 0 0;line-height:1.5}
.sim-err{display:none;color:#B23A3A;font-size:.86rem;font-weight:600;margin:8px 0 0}
.sim-champ.err .sim-err{display:block}

.sim-card input[type=text],
.sim-card input[type=tel],
.sim-card input[type=email],
.sim-card select,
.sim-card textarea{width:100%;font:inherit;font-size:1rem;color:var(--ink);
  background:#F8F9FB;border:1.5px solid var(--line);border-radius:10px;padding:14px 15px;
  transition:border-color .2s,background .2s,box-shadow .2s}
.sim-card input:focus,.sim-card select:focus,.sim-card textarea:focus{outline:none;
  border-color:var(--navy);background:var(--white);box-shadow:0 0 0 3px rgba(18,53,107,.12)}
.sim-champ.err input,.sim-champ.err select{border-color:#B23A3A}
.sim-card textarea{min-height:112px;resize:vertical}

/* La flèche du menu déroulant est dessinée en SVG plutôt que laissée au
   navigateur : celle de Windows jure avec le reste. */
.sim-card select{appearance:none;padding-right:42px;background-repeat:no-repeat;
  background-position:right 15px center;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2312356B' stroke-width='2.5'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E")}

.sim-euro{position:relative}
.sim-euro input{padding-right:42px}
.sim-euro::after{content:"€";position:absolute;right:15px;top:50%;transform:translateY(-50%);
  color:var(--muted);font-weight:600}

.sim-duo{display:grid;gap:0 20px;grid-template-columns:repeat(2,minmax(0,1fr))}


/* ============================ CHOIX EN PAVÉS ============================ */
/* Volontairement sans pictogrammes : le site n'emploie aucun émoji nulle part,
   et ceux-ci se dessinent différemment sur chaque système — un rendu qu'on ne
   maîtrise pas n'a rien à faire dans une charte. */

.sim-choix{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
.sim-choix.duo{grid-template-columns:repeat(2,minmax(0,1fr));max-width:440px}
.sim-opt{position:relative;display:block;cursor:pointer}
.sim-opt input{position:absolute;opacity:0;pointer-events:none}
.sim-opt .box{display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:6px;min-height:74px;padding:16px 12px;border:1.5px solid var(--line);
  border-radius:var(--r);background:var(--white);text-align:center;font-weight:600;
  font-size:.94rem;line-height:1.3;color:var(--ink);
  transition:border-color .2s,background .2s,color .2s}
.sim-opt .box small{display:block;font-weight:400;font-size:.78rem;color:var(--muted);
  line-height:1.35}
.sim-opt:hover .box{border-color:var(--navy)}
.sim-opt input:checked + .box{background:var(--navy);border-color:var(--navy);color:var(--white)}
.sim-opt input:checked + .box small{color:rgba(255,255,255,.78)}
.sim-opt input:focus-visible + .box{outline:3px solid rgba(18,53,107,.35);outline-offset:2px}


/* ============================ BLOCS CONDITIONNELS ============================ */

.sim-cond{display:none}
.sim-cond.on{display:block}

.sim-co{display:none;margin-top:26px;padding-top:4px;border-top:1px dashed var(--line)}
.sim-shell.a-deux .sim-co{display:block}
.sim-co-titre{display:block;background:var(--navy-lt);color:var(--navy-dp);font-size:.72rem;
  font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:10px 16px;
  border-radius:8px;margin:20px 0 4px}

.sim-agence{display:none;margin-top:12px;padding:12px 16px;border-radius:10px;
  background:var(--green-lt);border:1px solid #BFE0CF;color:var(--green);
  font-size:.92rem;font-weight:600}
.sim-agence.on{display:block}


/* ============================ ESTIMATION ============================ */

.sim-estim{margin:0 0 24px;padding:20px;border-radius:var(--r);background:var(--navy-lt);
  border:1px solid #D5E0F0}
.sim-estim .t{font-size:.72rem;text-transform:uppercase;letter-spacing:.05em;
  font-weight:700;color:var(--navy-dp)}
.sim-estim .chiffres{display:flex;gap:32px;flex-wrap:wrap;margin-top:10px}
.sim-estim b{font-family:var(--display);font-size:1.7rem;color:var(--navy);font-weight:700;
  display:block;line-height:1.1}
.sim-estim .n{font-size:.84rem;color:var(--muted);margin-top:4px;line-height:1.5}
.sim-estim .note{font-size:.84rem;color:var(--muted);margin-top:12px;line-height:1.55}


/* ============================ PIED DE CARTE ============================ */

.sim-pied{padding:0 28px 28px}
.sim-boutons{display:flex;justify-content:space-between;align-items:center;gap:14px;
  padding-top:22px;border-top:1px solid var(--line)}
.sim-boutons .btn{padding:14px 24px;font-size:.96rem}
.sim-boutons .sim-suivant{margin-left:auto}
.sim-boutons .btn[disabled]{opacity:.6;cursor:wait}

.sim-gages{display:flex;flex-wrap:wrap;gap:8px 24px;justify-content:center;margin-top:20px;
  font-size:.84rem;color:var(--muted)}
.sim-gages span::before{content:"✓";color:var(--green);font-weight:700;margin-right:7px}

.sim-consent{display:flex;gap:12px;align-items:flex-start;font-size:.9rem;color:var(--muted);
  margin-top:20px;line-height:1.6;cursor:pointer}
.sim-consent input{margin-top:4px;width:18px;height:18px;accent-color:var(--navy);flex:0 0 auto}
.sim-consent a{color:var(--navy);text-decoration:underline}


/* ============================ COLONNE LATÉRALE ============================ */

.sim-aside .box{background:var(--white);border:1px solid var(--line);border-radius:var(--r);
  box-shadow:var(--shadow);padding:24px}
.sim-aside h2{font-family:var(--display);font-size:1.12rem;font-weight:700;color:var(--navy-dp);
  margin:0 0 16px}
.sim-aside ol{margin:0;padding:0;list-style:none;counter-reset:pas}
/* La pastille numérotée est posée en absolu et le texte coule normalement :
   un li en display:flex découperait chaque phrase contenant une balise en
   autant de blocs juxtaposés. Le défaut a déjà été rencontré sur ce site. */
.sim-aside ol li{counter-increment:pas;position:relative;padding-left:32px;font-size:.94rem;
  color:var(--muted);margin-bottom:14px;line-height:1.55}
.sim-aside ol li::before{content:counter(pas);position:absolute;left:0;top:1px;
  width:22px;height:22px;border-radius:50%;background:var(--navy-lt);color:var(--navy);
  font-weight:700;font-size:.76rem;display:flex;align-items:center;justify-content:center}
.sim-aside .repere{margin-top:20px;padding-top:16px;border-top:1px solid var(--line);
  display:flex;gap:14px;align-items:center}
.sim-aside .repere b{font-family:var(--display);font-size:1.4rem;color:var(--navy-dp);
  font-weight:700;line-height:1}
.sim-aside .repere small{display:block;font-size:.8rem;color:var(--muted);line-height:1.45}

/* Le piege reste un vrai champ, saisissable par un automate, mais reduit a un
   point : sorti de l ecran sans largeur contrainte, il s etalait sur 312 px et
   ne devait qu au overflow-x:hidden du corps de ne pas creer de defilement. */
.sim-piege{position:absolute;left:-9999px;top:0;width:1px;height:1px;overflow:hidden}

/* .sr-only n'existe que dans accueil.css, que cette page ne charge pas : la
   regle est reprise ici. Elle sert au compteur d'etapes, annonce aux lecteurs
   d'ecran sans etre affiche — le fil visuel, lui, est en aria-hidden. */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* La page n'a pas de bandeau d'introduction colore comme les pages de service :
   le titre respire directement sous le fil d'Ariane. */
.sim-intro{padding-top:8px}
.sim-intro h1{margin:12px 0 14px}


/* ============================ ADAPTATION ============================ */

@media(max-width:980px){
  .sim-shell{grid-template-columns:1fr;gap:24px}
  .sim-aside{order:2}
}
@media(max-width:700px){
  /* Sous 700 px, les six libellés ne tiennent plus : on garde les ronds
     numérotés, qui suffisent à situer l'avancement. */
  .sim-fil .lbl{display:none}
  .sim-fil{padding:20px 14px 16px}
  .sim-etape{padding:26px 20px 20px}
  .sim-pied{padding:0 20px 22px}
  .sim-duo{grid-template-columns:1fr}
  .sim-boutons{gap:10px}
  .sim-boutons .btn{padding:13px 18px;font-size:.9rem}
}