/* ==========================================================================================
   Simulateur d'impact de la hausse annuelle — modèle squelettes/modeles/simulateur_hausse.html
   Chargée par le modèle lui-même (dans le body, après styles.css) : elle n'existe que sur les
   pages qui insèrent <simulateur_hausse|>.
   Feuille autonome, non compilée depuis less/ : styles.css est généré par Prepros.
   Palette du site : @bleu #0A1339 · @vert #61CD81 · @orange #FFB84E · @gris #F6F7FC
   Le vert et l'orange ne servent de couleur de texte que sur le fond bleu nuit
   (9:1 et 10,5:1) ; sur fond clair ils tombent à 2:1, d'où leurs variantes foncées.
   ========================================================================================== */

/* Les blocs conditionnels sont masqués par l'attribut hidden : tout `display` d'auteur
   déclaré plus bas l'emporterait sur le `display: none` du navigateur. */
.simh [hidden] { display: none !important; }

/* styles.css applique `* { font-size:18px; line-height:154%; color:#0A1339 }`. Un sélecteur
   universel cible DIRECTEMENT chaque élément et bat toute valeur héritée : sans ce garde-fou,
   chaque libellé du panneau bleu nuit repasserait en bleu nuit, donc invisible.
   Placé AVANT les composants : à spécificité égale, leurs déclarations explicites gagnent. */
.simh * {
	color: inherit;
	font-size: inherit;
	line-height: inherit;
	font-family: inherit;
}

.simh {
	--simh-bleu: #0A1339;
	--simh-vert: #61CD81;
	--simh-orange: #FFB84E;
	--simh-gris: #F6F7FC;
	--simh-voile: #E3E6F3;
	--simh-bord: #7A809E;          /* 3,9:1 sur blanc : seuil 3:1 des contours de champ */
	--simh-doux: #606784;          /* 5,2:1 sur #F6F7FC */
	--simh-orange-fonce: #A3470F;  /* 6:1 sur blanc */
	--simh-doux-nuit: #C9CDE0;     /* 11:1 sur le bleu nuit */

	container-type: inline-size;
	background: var(--simh-gris);
	border-radius: 20px;
	padding: 30px;
	font-family: Lato, sans-serif;
	font-size: 18px;
	line-height: 1.5;
	color: var(--simh-bleu);
}
/* .section-edito p ajoute 5px de marge intérieure et un interligne de 130 %. */
.simh p { padding: 0; margin: 0; }
.simh fieldset { margin: 0; padding: 0; border: 0; min-width: 0; }
.simh legend { padding: 0; }

/* --- En-tête ------------------------------------------------------------------------------- */
.simh-entete { margin-bottom: 24px; }
.simh .simh-surtitre {
	display: inline-block;
	margin-bottom: 10px;
	padding: 3px 12px;
	border-radius: 999px;
	background: var(--simh-bleu);
	color: var(--simh-vert);
	font-family: 'Pathway Extreme', sans-serif;
	font-weight: 700;
	font-size: 13px;
	letter-spacing: .06em;
	text-transform: uppercase;
}
/* .section-edito h3 le passe en vert (2:1 sur ce fond gris). */
.simh .simh-titre {
	font-family: 'Pathway Extreme', sans-serif;
	font-weight: 700;
	font-size: 24px;
	line-height: 1.25;
	color: var(--simh-bleu);
}

/* --- Disposition : saisie à gauche, résultat à droite dès que la colonne le permet ---------- */
.simh-corps { display: grid; gap: 24px; }
@container (min-width: 720px) {
	.simh-corps { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); align-items: start; }
	.simh-resultat { position: sticky; top: 20px; }
}

/* --- Champs ---------------------------------------------------------------------------------- */
.simh-saisie { display: flex; flex-direction: column; gap: 24px; }
.simh .simh-label {
	display: block;
	margin-bottom: 8px;
	font-weight: 700;
	font-size: 17px;
	line-height: 1.35;
}
.simh .simh-label-secondaire { display: inline; margin: 0; font-weight: 400; font-size: 16px; white-space: nowrap; }

.simh .simh-texte,
.simh .simh-liste {
	width: 100%;
	height: 48px;
	padding: 0 14px;
	border: 2px solid var(--simh-bord);
	border-radius: 8px;
	background-color: #fff;
	color: var(--simh-bleu);
	font-size: 18px;
}
.simh .simh-liste {
	padding-right: 46px;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	background-image: url('../images/fleche-select_rond.svg');
	background-repeat: no-repeat;
	background-position: right 10px center;
	cursor: pointer;
}
.simh .simh-texte[aria-invalid="true"] { border-color: var(--simh-orange-fonce); }

.simh-unite { display: flex; align-items: center; gap: 10px; }
.simh-unite .simh-texte { max-width: 180px; }
.simh-unite .simh-court { max-width: 110px; }
.simh-unite i { font-style: normal; color: var(--simh-doux); white-space: nowrap; }
#simh-crm-autre-bloc { margin-top: 10px; }

.simh .simh-aide { margin-top: 6px; font-size: 15px; line-height: 1.45; color: var(--simh-doux); }
.simh .simh-aide-avant { width: 100%; margin: 0 0 2px; }
.simh .simh-erreur { margin-top: 6px; font-size: 15px; font-weight: 700; color: var(--simh-orange-fonce); }

/* Boutons radio en pastilles : le rond natif reste visible, la pastille cochée s'entoure. */
.simh-choix { display: flex; flex-wrap: wrap; gap: 8px; }
.simh-choix label {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 8px 14px;
	border: 2px solid var(--simh-voile);
	border-radius: 999px;
	background: #fff;
	font-size: 16px;
	line-height: 1.3;
	cursor: pointer;
}
.simh-choix label:hover { border-color: var(--simh-bord); }
.simh-choix label:has(input:checked) { border-color: var(--simh-bleu); box-shadow: inset 0 0 0 1px var(--simh-bleu); }
#simh-formule-bloc { margin-top: 12px; }

.simh input[type="radio"],
.simh input[type="checkbox"] {
	width: 18px;
	height: 18px;
	margin: 0;
	flex-shrink: 0;
	accent-color: var(--simh-bleu);
}
/* Case à gauche, libellé qui s'enroule dessous : pas de flex, qui ferait de chaque <b> du
   libellé une colonne. */
.simh .simh-case {
	display: block;
	position: relative;
	margin-top: 12px;
	padding-left: 28px;
	font-size: 16px;
	line-height: 1.4;
	cursor: pointer;
}
.simh .simh-case input { position: absolute; top: 2px; left: 0; }
.simh .simh-case b { font-weight: 700; }

/* Curseur de hausse et préréglages des cabinets */
.simh output {
	display: inline-block;
	margin-left: 6px;
	padding: 0 8px;
	border-radius: 6px;
	background: var(--simh-bleu);
	color: #fff;
	font-variant-numeric: tabular-nums;
}
.simh .simh-curseur { display: block; width: 100%; height: 28px; margin: 2px 0 6px; accent-color: var(--simh-bleu); cursor: pointer; }
/* Pastilles d'une ligne, comme les choix de sinistre : la valeur seule, sans la source. */
.simh-prereglages { display: flex; flex-wrap: wrap; gap: 8px; }
.simh-prereglages button {
	min-width: 64px;
	padding: 7px 16px;
	border: 2px solid var(--simh-voile);
	border-radius: 999px;
	background: #fff;
	color: var(--simh-bleu);
	font-weight: 700;
	font-size: 16px;
	line-height: 1.3;
	white-space: nowrap;
	cursor: pointer;
}
.simh-prereglages button:hover { border-color: var(--simh-bleu); }
.simh-prereglages button[aria-pressed="true"] { border-color: var(--simh-bleu); background: var(--simh-bleu); color: #fff; }

/* styles.css retire le contour de focus des liens et des span : on le rend explicitement. */
.simh input:focus-visible,
.simh select:focus-visible,
.simh button:focus-visible,
.simh summary:focus-visible {
	outline: 3px solid var(--simh-bleu);
	outline-offset: 2px;
}

/* --- Résultat ------------------------------------------------------------------------------- */
.simh-resultat {
	padding: 26px 24px;
	border-radius: 20px;
	background: var(--simh-bleu);
	color: #fff;
}
.simh .simh-resultat-libelle {
	font-family: 'Pathway Extreme', sans-serif;
	font-weight: 700;
	font-size: 13px;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--simh-doux-nuit);
}
.simh .simh-montant { margin: 4px 0 4px; font-size: 16px; color: var(--simh-doux-nuit); }
.simh .simh-montant strong {
	display: block;
	font-family: 'Pathway Extreme', sans-serif;
	font-weight: 700;
	font-size: 44px;
	line-height: 1.1;
	color: var(--simh-vert);
}
.simh .simh-ecart { margin-bottom: 18px; font-weight: 700; }
.simh-resultat .simh-hausse { color: var(--simh-orange); }
.simh-resultat .simh-baisse { color: var(--simh-vert); }

.simh-detail { width: 100%; margin-bottom: 18px; border-collapse: collapse; font-size: 15px; }
.simh .simh-detail caption {
	padding-bottom: 4px;
	text-align: left;
	font-size: 13px;
	color: var(--simh-doux-nuit);
}
.simh-detail th,
.simh-detail td { padding: 7px 0; border-bottom: 1px solid rgba(255, 255, 255, .15); vertical-align: top; }
.simh-detail th { padding-right: 12px; text-align: left; font-weight: 400; }
.simh-detail td { text-align: right; white-space: nowrap; font-weight: 700; font-variant-numeric: tabular-nums; }
.simh-detail .simh-total th,
.simh-detail .simh-total td { padding-top: 10px; border-top: 2px solid var(--simh-vert); border-bottom: 0; font-weight: 700; }

.simh .simh-verdict {
	margin-bottom: 20px;
	padding: 12px 14px;
	border-left: 4px solid var(--simh-vert);
	border-radius: 0 10px 10px 0;
	background: rgba(255, 255, 255, .08);
	font-size: 15px;
	line-height: 1.5;
}
/* Le bouton du site (.bouton, blanc sur vert) : pleine largeur dans le panneau. */
.simh .simh-cta { width: 100%; padding: 16px 20px; font-size: 17px; text-align: center; }
.simh .simh-cta:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }

/* --- Méthode -------------------------------------------------------------------------------- */
.simh-methode { margin-top: 22px; font-size: 15px; line-height: 1.5; color: var(--simh-doux); }
.simh-methode summary { display: list-item; font-weight: 700; color: var(--simh-bleu); cursor: pointer; }
.simh .simh-methode p { margin-top: 8px; }

@media (max-width: 575px) {
	.simh { padding: 20px 16px; border-radius: 16px; }
	/* Les préréglages se partagent la ligne au lieu d'en laisser un seul à la suivante. */
	.simh-prereglages { flex-wrap: nowrap; gap: 6px; }
	.simh-prereglages button { flex: 1 1 0; min-width: 0; padding: 7px 4px; }
	.simh .simh-titre { font-size: 21px; }
	.simh-resultat { padding: 22px 18px; }
	.simh .simh-montant strong { font-size: 38px; }
}

/* ==========================================================================================
   Compléments de l'article qui accueille le simulateur
   Ils s'appuient sur le tableau du site (.tableau) et ne corrigent que ce qui y manquait.
   Ils partent avec le simulateur : un article qui retire <simulateur_hausse|> perd aussi
   ces règles.
   ========================================================================================== */

/* La boîte .tableau devient conteneur de requête : la légende peut se caler sur sa largeur
   visible (100cqw) quand le tableau, trop large sur mobile, défile à l'intérieur. */
.section-edito .tableau { container-type: inline-size; }

/* .tableau est bleu nuit et le `*` de styles.css peint toute légende en bleu nuit :
   une <caption> y était invisible. Sans max-width, elle prenait la largeur du tableau
   et se trouvait coupée à droite sur mobile. */
.section-edito .tableau caption {
	max-width: 100cqw;
	padding: 4px 10px 14px;
	caption-side: top;
	text-align: left;
	color: #fff;
	font-family: 'Pathway Extreme', sans-serif;
	font-weight: 700;
	font-size: 18px;
	line-height: 1.35;
}
/* Pas de nowrap sur les cellules chiffrées : il imposait 920 et 1 007 px à deux tableaux,
   plus que la colonne de texte (837 px au plus), qui défilaient alors sur ordinateur.
   L'espace insécable que la typographie de SPIP pose avant « % » et « : » suffit. */

/* Les marges du tableau du site (24 et 25 px de chaque côté de chaque cellule) rendent un
   tableau de cinq colonnes plus large que la boîte dès que celle-ci passe sous 800 px,
   soit les écrans de 1 280 px et moins. On resserre alors cellules et texte, couleurs et
   polices inchangées ; au-delà, le tableau garde exactement le style du site. */
.section-edito .tableau td *,
.section-edito .tableau th * { font-size: inherit; }
@container (max-width: 800px) {
	.section-edito .tableau table thead tr th { padding: 16px 12px; font-size: 17px; }
	.section-edito .tableau table tbody tr td { padding: 12px 12px; font-size: 16px; }
}
@container (max-width: 600px) {
	.section-edito .tableau table thead tr th { padding: 12px 8px; font-size: 15px; }
	.section-edito .tableau table tbody tr td { padding: 10px 8px; font-size: 15px; }
	.section-edito .tableau caption { font-size: 16px; }
}

/* Notes de lecture sous un tableau : texte secondaire. */
.section-edito p.note { font-size: 16px; color: #606784; }
.section-edito p.note * { font-size: inherit; }

/* Encadré « L'essentiel » : version allégée du bloc .important du site (fond bleu nuit,
   pastille de 120 px, 195 px de marge à gauche), jugé trop massif en tête d'article.
   Même pictogramme, même vert, sur fond gris clair et en pastille de 34 px. */
.section-edito .essentiel {
	padding: 26px 30px 28px;
	border-radius: 20px;
	background-color: #F6F7FC;
}
.section-edito .essentiel .essentiel-titre {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 14px;
	padding: 0;
	font-family: 'Pathway Extreme', sans-serif;
	font-weight: 700;
	font-size: 20px;
	line-height: 1.3;
}
.section-edito .essentiel .essentiel-titre::before {
	content: "";
	flex-shrink: 0;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: #61CD81 url('../images/important_blanc.svg') no-repeat center / 20px;
}
.section-edito .essentiel ul { gap: 10px; padding-left: 0; }
.section-edito .essentiel li { padding-left: 34px; font-size: 17px; line-height: 1.45; }
.section-edito .essentiel li * { font-size: inherit; }
.section-edito .essentiel ul li::before { width: 22px; height: 22px; top: 2px; }
@media (max-width: 575px) {
	.section-edito .essentiel { padding: 22px 18px 24px; }
}