/* Foyane · page « Votre proposition » (simulateur, spec 17, lot 4). Reprend la maquette validée
   (analyses/38-maquette-simulateur.html) avec les tokens du site ; rien de codé en dur hors des couleurs de vigilance,
   qui sont la donnée elle-même (convention de Météo-France : jaune, orange, rouge). */

.sim{--vig-jaune:#e9d66b;--vig-orange:#e39a3b;--vig-rouge:#c8352b;padding-block:clamp(var(--espace-8),4.2vw,var(--espace-16)) var(--section)}
.sim__cadre{display:grid;gap:var(--espace-6);max-width:calc(1040px + 2 * var(--marge))}
.sim .surtitre{margin-bottom:0}
.sim__titre{font-size:var(--typo-affiche-titre-3-taille);line-height:var(--typo-affiche-titre-3-interligne);font-weight:var(--graisse-grasse);letter-spacing:-.01em;color:var(--encre-2)}
html:not(.js) .sim__ecran{display:none}
.sim [hidden]{display:none!important}

.sim__ecran{display:grid;gap:var(--espace-8);background:var(--ecran);border:var(--trait-filet) solid var(--filet);padding:clamp(var(--espace-5),5vw,var(--espace-16));min-width:0}
.sim__ecran[hidden]{display:none}
.sim__q{font-family:var(--police-titre);font-size:clamp(26px,1.1rem + 1.6vw,var(--typo-titre-taille-max));line-height:var(--typo-titre-interligne);letter-spacing:-.02em;font-weight:var(--graisse-grasse);text-wrap:balance;max-width:24ch}
.sim__q:focus{outline:none}
.sim__q:focus-visible{outline:var(--trait-focus) solid var(--couleur-focus);outline-offset:var(--trait-focus-decalage)}
.sim__aide{color:var(--encre-2);max-width:62ch;font-size:var(--typo-corps-taille-max)}
.sim__aide b{color:var(--encre)}
.sim__hyp{font-size:14px;color:var(--encre-2);max-width:78ch}
.sim__label{font-size:13px;letter-spacing:.03em;text-transform:uppercase;color:var(--encre-2);display:block}
.sim__erreur{font-weight:var(--graisse-grasse);color:var(--encre);border-left:var(--trait-situation) solid var(--encre);padding-left:var(--espace-4)}
.sim__erreur[hidden],.sim__repli[hidden],[data-si][hidden],.sim__encart[hidden]{display:none}

/* cartes (qui êtes-vous, réseau) */
.sim__cartes{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));gap:var(--espace-3)}
.sim__carte{font:inherit;color:var(--encre);border:var(--trait-filet) solid var(--filet-fort);background:var(--ecran);padding:var(--espace-4) var(--espace-5);display:grid;gap:var(--espace-1);align-content:start;text-align:left;cursor:pointer;transition:border-color var(--motion-duree-etat)}
.sim__carte:hover{border-color:var(--encre)}
.sim__carte[aria-pressed="true"]{border-color:var(--encre);box-shadow:inset 0 0 0 1px var(--encre);background:var(--couleur-accent-tint)}
.sim__carte b{font-size:17px}
.sim__carte span{font-size:14.5px;color:var(--encre-2)}
.sim__choix{border:0;padding:0;margin:0;display:grid;gap:var(--espace-2);max-width:520px}
.sim__choix legend{margin-bottom:var(--espace-2)}
.sim__choix label{display:flex;gap:var(--espace-3);align-items:center;border:var(--trait-filet) solid var(--filet-fort);padding:var(--espace-3) var(--espace-4);cursor:pointer}
.sim__choix label:hover{border-color:var(--encre)}
.sim__choix input{width:20px;height:20px;accent-color:var(--encre);flex:none}
.sim__choix span span{display:block;font-size:14.5px;color:var(--encre-2)}

/* boutons, liens, actions */
.sim__actions{display:flex;gap:var(--espace-3) var(--espace-5);flex-wrap:wrap;align-items:center}
.sim__lien{font:inherit;background:none;border:0;padding:var(--espace-2) 0;color:var(--encre);text-decoration:underline;text-underline-offset:.2em;cursor:pointer;min-height:var(--espace-10)}
.sim__lien:hover{text-decoration-thickness:2px}
.sim__segment{display:flex;flex-wrap:wrap;gap:var(--espace-2)}
.sim__segment button{font:inherit;font-size:15.5px;color:var(--encre);border:var(--trait-filet) solid var(--couleur-bord-champ);background:var(--ecran);padding:var(--espace-2) var(--espace-4);min-height:calc(var(--espace-10) + var(--espace-1));cursor:pointer}
.sim__segment button:hover{border-color:var(--encre)}
.sim__segment button[aria-pressed="true"]{background:var(--encre);border-color:var(--encre);color:var(--page)}
.sim__reglage{display:grid;gap:var(--espace-2)}
.sim__bascule{display:flex;gap:var(--espace-3);align-items:flex-start;max-width:600px;cursor:pointer}
.sim__bascule input{width:22px;height:22px;accent-color:var(--encre);margin-top:2px;flex:none}
.sim__bascule .sim__aide{display:block;font-size:15px}

/* champs et curseurs */
.sim__grille{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:var(--espace-5) var(--espace-8);align-items:start}
.sim__pile{display:grid;gap:var(--espace-5);align-content:start}
.sim__curseur{display:grid;gap:var(--espace-2);max-width:520px;min-width:0}
.sim__curseur input[type=range]{width:100%;accent-color:var(--encre);min-height:var(--espace-8)}
.sim__val{font-size:28px;font-weight:var(--graisse-grasse);line-height:1.1}
.sim__precis{font-size:14.5px;color:var(--encre-2);margin-top:var(--espace-1)}
.sim__recherche{display:grid;gap:var(--espace-5)}
.sim__tailles{border:0;padding:0;margin:0;display:grid;gap:var(--espace-2);max-width:520px}
.sim__tailles legend{margin-bottom:var(--espace-2)}
.sim__taille{display:grid;grid-template-columns:minmax(0,1fr) 6.5em;gap:var(--espace-3);align-items:center;font-size:15.5px;border-bottom:var(--trait-filet) solid var(--filet);padding-bottom:var(--espace-2)}
.sim__taille .form-saisie{text-align:right;min-height:var(--espace-10)}
.sim__taille--total b{text-align:right}

/* la commune retrouvée et son été */
.sim__commune{border:var(--trait-filet) solid var(--filet);background:var(--papier);padding:var(--espace-5);display:grid;gap:var(--espace-4);min-width:0}
.sim__commune h3{font-size:clamp(19px,1rem + .6vw,22px);line-height:1.25;text-wrap:balance}
.sim__faits{display:flex;flex-wrap:wrap;gap:var(--espace-2) var(--espace-8);font-size:14.5px;color:var(--encre-2)}
.sim__faits b{color:var(--encre);font-size:16px}
.sim__cal{display:grid;gap:5px;min-width:0;max-width:44rem}
.sim__mois{display:grid;grid-template-columns:5.2em repeat(31,minmax(0,1fr));gap:2px;align-items:center;font-size:12.5px;color:var(--encre-2)}
.sim__mois i{display:block;aspect-ratio:1;max-width:16px;background:var(--couleur-matiere-champ)}
.sim__mois i.x{background:transparent}
.sim__mois i.j{background:var(--vig-jaune)}
.sim__mois i.o{background:var(--vig-orange)}
.sim__mois i.r{background:var(--vig-rouge)}
.sim__legende{display:flex;gap:var(--espace-4);flex-wrap:wrap;font-size:12.5px;color:var(--encre-2)}
.sim__legende i{display:inline-block;width:10px;height:10px;margin-right:6px;vertical-align:-1px}
.sim__puce--j{background:var(--vig-jaune)}.sim__puce--o{background:var(--vig-orange)}.sim__puce--r{background:var(--vig-rouge)}
@media (max-width:520px){
  .sim__mois{grid-template-columns:3.2em repeat(31,minmax(0,1fr));gap:1px}
  .sim__mois span{font-size:0}
  .sim__mois span::after{content:attr(data-court);font-size:11.5px}
}

/* registre en traits, diagnostic */
.sim__bloc{border-top:var(--trait-filet) solid var(--filet);padding-top:var(--espace-6);display:grid;gap:var(--espace-4);min-width:0}
.sim__bloc[hidden]{display:none}
.sim__bloc[aria-busy="true"] .sim__bloc-titre{opacity:.6}
.sim__bloc-titre{font-size:clamp(19px,1rem + .6vw,22px);line-height:1.25;letter-spacing:-.01em;text-wrap:balance;max-width:40ch}
.sim__traits svg{width:100%;height:auto}
.sim__traits rect{fill:var(--couleur-matiere-trait)}
.sim__traits rect.a{fill:var(--encre)}
.sim__detail summary{cursor:pointer;font-size:15px;min-height:var(--espace-10);display:flex;align-items:center}
.sim__detail p{font-size:14px;color:var(--encre-2);max-width:78ch;margin-top:var(--espace-2)}
.sim__chiffres{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,180px),1fr));gap:var(--espace-5)}
.sim__chiffre{display:grid;gap:2px;align-content:start}
.sim__chiffre strong{font-size:clamp(30px,1.2rem + 1.6vw,40px);line-height:1.05;letter-spacing:-.02em;font-weight:var(--graisse-grasse)}
.sim__chiffre span{font-size:14.5px;color:var(--encre-2)}
.sim__barres{display:grid;gap:var(--espace-3)}
.sim__barre{display:grid;grid-template-columns:8em minmax(0,1fr) 6.5em;gap:var(--espace-3);align-items:center;font-size:14.5px}
.sim__jauge{height:14px;background:var(--couleur-matiere-champ);position:relative;display:block}
.sim__jauge i{position:absolute;left:0;top:0;bottom:0;background:var(--encre);width:0}
@media (max-width:520px){.sim__barre{grid-template-columns:1fr 6em}.sim__jauge{grid-column:1 / -1;grid-row:2}}

.sim__encart{background:var(--couleur-accent-tint);padding:var(--espace-4) var(--espace-5);max-width:70ch}
.sim__repli{border-left:var(--trait-situation) solid var(--encre);background:var(--couleur-accent-tint);padding:var(--espace-5) var(--espace-6);display:grid;gap:var(--espace-3);max-width:46em}
.sim__repli:focus{outline:var(--trait-focus) solid var(--couleur-focus);outline-offset:var(--trait-focus-decalage)}
.sim__repli-titre{font-size:20px;line-height:1.3;font-weight:var(--graisse-grasse)}
.sim__form{max-width:46em}

@media (max-width:759px){.sim__actions .btn{width:100%}}

/* parcours d'écoute (lot 11) : deux moments, reformulation, avant / après, charge face au temps disponible */
.sim__moments{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr));gap:var(--espace-5)}
.sim__moment{border:var(--trait-filet) solid var(--filet);background:var(--papier);padding:var(--espace-5);display:grid;gap:var(--espace-5);align-content:start;min-width:0}
.sim__moment--alerte{border-top:var(--trait-situation) solid var(--encre)}
.sim__note{font-size:15px;color:var(--encre);max-width:62ch;min-height:1.5em}
.sim__compris{display:grid;gap:var(--espace-3);font-size:clamp(17px,1rem + .3vw,19px);max-width:62ch;border-left:var(--trait-situation) solid var(--encre);padding-left:var(--espace-5)}
.sim__tableau{overflow-x:auto;max-width:100%}
.sim__tableau table{border-collapse:collapse;width:100%;min-width:560px;font-size:15px}
.sim__tableau th,.sim__tableau td{text-align:left;vertical-align:top;padding:var(--espace-3) var(--espace-4) var(--espace-3) 0;border-bottom:var(--trait-filet) solid var(--filet)}
.sim__tableau thead th{font-size:13px;letter-spacing:.03em;text-transform:uppercase;color:var(--encre-2);font-weight:400}
.sim__tableau tbody th{font-weight:var(--graisse-grasse);width:30%}
.sim__chiffre--tension{background:var(--couleur-situation-a-accompagner-tint);padding:var(--espace-3)}
.sim__chiffre--tension strong{color:var(--couleur-situation-a-accompagner-ink)}
.sim__chiffre--ok{background:var(--couleur-situation-va-bien-tint);padding:var(--espace-3)}
.sim__chiffre--ok strong{color:var(--couleur-situation-va-bien-ink)}
.sim__chiffre--texte strong{font-size:clamp(20px,1rem + .6vw,24px);line-height:1.2;letter-spacing:-.01em}
