/* ==========================================================================
   /simulateur-taille-box/ — ce qui ne sert qu'à cette page, lié APRÈS ../system/site.css.
   Le héros, les étapes, la paire d'actions, les lignes de prix, le renvoi .crosslink et les
   plans viennent de site.css. Aucun jeton nouveau, aucun jaune nouveau : le seul aplat
   .sec--jaune de la page est celui des étapes.
    A. Héros court, la carte de l'outil à cheval sur son bas
    B. .simu        la carte : questions (.simu__q) + résultat (.simu__out)
    C. Questions    tuiles radio (.simu__opt)
    D. Résultat     plan, raison, condition, prix, action ; aide au téléphone
    E. Étapes       la paire d'actions sous les cartes en escalier
   ========================================================================== */

/* A. Héros ------------------------------------------------------------------------- */
.simu-hero .hero__in{padding-bottom:3.75rem}
.simu-hero .hero__lead a{color:var(--color-dark);font-weight:500;text-underline-offset:.2em;text-decoration-thickness:1px}
@media (min-width:768px){.simu-hero .hero__in{padding-bottom:5rem}}
@media (min-width:1024px){.simu-hero .hero__in{padding-bottom:6rem}}

/* B. La carte ------------------------------------------------------------------------
   Échelle des plans : le résultat ne montre QUE des box (un ou deux, identiques), jamais un box
   à côté d'un garage. Comme la fiche .equip, il pose donc sa propre --k, plus grande que celle de
   :root, choisie pour que deux box tiennent côte à côte dans le panneau à chaque largeur.
   La vignette du renvoi vers /garages/ est décorative et a sa largeur fixe. */
.simu-sec{padding-top:0}
.simu{position:relative;margin-top:-2.25rem;background:var(--color-white);border:1px solid rgba(26,26,26,.07);
  border-radius:var(--radius-xl);box-shadow:var(--shadow-lift);overflow:clip}
.simu [hidden]{display:none !important}
.simu__q{padding:var(--card-pad)}
.simu__out{--k:19;--halo:var(--color-bg);padding:var(--card-pad);border-top:1px solid var(--color-hair);
  background-color:var(--color-bg);background-image:var(--dots);background-size:var(--dots-size)}
@media (min-width:768px){
  .simu{margin-top:-3rem}
  .simu__out{--k:22}
}
@media (min-width:1024px){
  .simu{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);margin-top:-3.5rem}
  .simu__q{padding:2.25rem 2.5rem}
  .simu__out{--k:17;display:flex;flex-direction:column;padding:2.25rem 2.5rem;border-top:0;border-left:1px solid var(--color-hair)}
}
@media (min-width:1180px){.simu__out{--k:20}}
@media (min-width:1280px){.simu__out{--k:22}}

/* C. Questions -------------------------------------------------------------------------
   Une tuile = un <label> qui contient son radio, posé en transparence sur toute la tuile :
   tout le carreau se touche (≥ 68 px), le clavier passe par les flèches, le focus se voit
   sur la tuile. Choisie : filet noir épaissi et fond jaune pâle, coche noire. */
.simu__step{border:0;min-width:0}
/* Légende flottante : sortie du filet du fieldset (sinon le filet haut de la question 2 la traverse) */
.simu__lg{float:left;width:100%;display:flex;align-items:center;gap:.65rem;padding:0;margin-bottom:1rem;
  font-family:var(--font-display);font-weight:700;font-size:var(--fs-h3);line-height:1.25;letter-spacing:-.01em}
.simu__n{width:30px;height:30px;flex:none;display:grid;place-items:center;border-radius:50%;background:var(--color-dark);color:var(--color-primary);
  font-size:.9375rem;line-height:1;font-variant-numeric:tabular-nums}
.simu__opts{clear:both;display:grid;gap:.625rem}
.simu__opts--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.simu__step--2{margin-top:1.5rem;padding-top:1.5rem;border-top:1px solid var(--color-hair)}

.simu__opt{position:relative;display:flex;align-items:center;gap:.8rem;min-height:68px;padding:.7rem .85rem .7rem .7rem;
  border:1.5px solid rgba(26,26,26,.22);border-radius:var(--radius-lg);background:var(--color-white);cursor:pointer;
  transition:border-color var(--duration-fast) var(--ease-out),background-color var(--duration-fast) var(--ease-out),box-shadow var(--duration-fast) var(--ease-out)}
.simu__opt input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.simu__pic{width:44px;height:44px;flex:none;display:grid;place-items:center;border-radius:50%;background:var(--color-primary);color:var(--color-dark);
  box-shadow:inset 0 -3px 0 rgba(26,26,26,.1),0 1px 2px rgba(26,26,26,.12)}
.simu__pic .ico{width:22px;height:22px}
.simu__txt{flex:1;min-width:0;display:flex;flex-direction:column;gap:.1rem}
.simu__txt b{font-family:var(--font-display);font-weight:700;font-size:1.0625rem;line-height:1.25}
.simu__txt > span{font-size:1rem;line-height:1.4;color:var(--color-ink-2)}
.simu__tick{width:26px;height:26px;flex:none;display:grid;place-items:center;border-radius:50%;border:2px solid rgba(26,26,26,.28);
  transition:background-color var(--duration-fast) var(--ease-out),border-color var(--duration-fast) var(--ease-out)}
.simu__tick .ico{width:15px;height:15px;stroke-width:3;opacity:0;color:var(--color-white)}
.simu__opt--big{justify-content:space-between;min-height:72px;padding-left:1rem}
.simu__opt--big b{font-size:clamp(1.125rem,1rem + .3vw,1.25rem);letter-spacing:-.01em}

.simu__opt:has(input:checked){border-color:var(--color-dark);background:var(--color-primary-light);box-shadow:inset 0 0 0 1px var(--color-dark)}
.simu__opt:has(input:checked) .simu__tick{background:var(--color-dark);border-color:var(--color-dark)}
.simu__opt:has(input:checked) .simu__tick .ico{opacity:1}
.simu__opt:has(input:focus-visible){outline:3px solid var(--color-dark);outline-offset:3px}
@media (hover:hover){.simu__opt:hover{border-color:var(--color-dark)}}

/* D. Résultat ---------------------------------------------------------------------------- */
.simu__empty{display:none}
@media (min-width:1024px){
  .simu__empty{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1rem;text-align:center;color:var(--color-ink-2)}
  .simu__empty .plan{opacity:.55}
}
.simu__res .plan{margin:1.1rem auto .4rem}
.simu__pair{--cotes:none;margin-block:1.1rem .4rem}
.simu__pair .plan{margin:0}
/* Sous 768 px, les deux box côte à côte, chacun sur la moitié du panneau (même taille, donc même
   échelle entre eux) ; les cotes sont masquées, la ligne de prix dit l'essentiel. */
@media (max-width:767.98px){
  .simu__pair{flex-direction:row;align-items:flex-end;gap:.5rem}
  .simu__pair .plan{flex:1 1 0;min-width:0}
  .simu__pair .plan__svg{width:100%}
  .simu__pair figcaption{font-size:.875rem}
}
.simu__why{margin-top:.75rem;color:var(--color-ink-2);max-width:46ch}
.simu__name{margin-top:.6rem;font-size:clamp(1.375rem,1.1rem + 1vw,1.875rem);letter-spacing:-.02em}
.simu__terms{display:flex;align-items:flex-start;gap:.55rem;margin-top:1rem;padding-top:1rem;border-top:1px solid var(--color-hair);
  font-weight:500;line-height:1.45}
.simu__terms .ico{width:20px;height:20px;margin-top:.1em}
.simu__prices{margin-top:.85rem}
.simu__prices .prices__dims{font-size:1rem}            /* texte ≥ 16 px sur cette page outil */
.simu__act{width:100%;margin-top:1.1rem}
.simu__cross{margin-top:1.25rem;background:var(--color-white)}
@media (min-width:600px){.simu__act{width:auto}}

.simu__help{display:grid;gap:.6rem;margin-top:1.5rem;padding-top:1.25rem;border-top:1px solid var(--color-hair)}
.simu__help p{color:var(--color-ink-2);line-height:1.5}
.simu__help .btn{justify-self:start;background:var(--color-white)}
.simu[data-result="none"] .simu__help{margin-top:0;padding-top:0;border-top:0}
@media (min-width:1024px){.simu[data-result="none"] .simu__help{margin-top:1.5rem;padding-top:1.25rem;border-top:1px solid var(--color-hair)}}
@media (hover:hover){.simu__help .btn:hover{background:var(--color-bg)}}

/* E. Étapes : la paire d'actions descend sous la troisième carte, décalée de 3 rem dès 768 px */
.simu-steps__act{margin-top:2rem}
@media (min-width:768px){.simu-steps__act{margin-top:calc(2rem + 3rem)}}

@media (prefers-reduced-motion:reduce){.simu__opt,.simu__tick{transition:none}}

/* Sans JS, les trois résultats se suivent : un filet les sépare (avec JS, un seul est visible). */
.simu__res + .simu__res{margin-top:1.75rem;padding-top:1.5rem;border-top:2px solid var(--color-dark)}