/* ==========================================================================
   Portail-Habitat.fr - rubrique Menuiserie (fenêtres) : simulateur, tableaux,
   schémas, encarts « comparer », formulaire de devis, catégorie.
   Chargé uniquement sur les pages de la catégorie Menuiserie.
   ========================================================================== */

/* Haut de fiche : la case de droite affiche des prix de départ */
html body.menuiserie.hv-2 .hero-categorie .numeros-urgence::before { content: "Prix de départ"; }
html body.menuiserie .hero-categorie .numero-urgence strong, html body.menuiserie .hero-categorie .numero-urgence strong.long { font-size: 1.3rem; }

/* Case de droite des fiches (Menuiserie et Assurance habitation) : colonne des valeurs à la largeur de la plus
   longue, alignée sur toutes les lignes, avec retour à la ligne si besoin. Une valeur longue ne déborde plus sur le texte. */
html body:is(.menuiserie, .assurance-habitation).hv-2 .hero-categorie:not(.mn-hero-cat) .numeros-urgence { display: grid; grid-template-columns: fit-content(12.5rem) minmax(0, 1fr); column-gap: 1rem; }
html body:is(.menuiserie, .assurance-habitation).hv-2 .hero-categorie:not(.mn-hero-cat) .numeros-urgence::before { grid-column: 1 / -1; }
html body:is(.menuiserie, .assurance-habitation).hv-2 .hero-categorie:not(.mn-hero-cat) .numeros-urgence > :not(.numero-urgence) { grid-column: 1 / -1; }
html body:is(.menuiserie, .assurance-habitation).hv-2 .hero-categorie:not(.mn-hero-cat) .numero-urgence { grid-column: 1 / -1; grid-template-columns: fit-content(12.5rem) minmax(0, 1fr); grid-template-columns: subgrid; column-gap: 1rem; }
html body:is(.menuiserie, .assurance-habitation).hv-2 .hero-categorie:not(.mn-hero-cat) .numero-urgence strong, html body:is(.menuiserie, .assurance-habitation).hv-2 .hero-categorie:not(.mn-hero-cat) .numero-urgence strong.long { white-space: normal; overflow-wrap: normal; line-height: 1.15; }
@media (max-width: 480px) {
	html body:is(.menuiserie, .assurance-habitation) .chiffres-cles strong { font-size: 1.4rem; }
	html body:is(.menuiserie, .assurance-habitation).hv-2 .hero-categorie:not(.mn-hero-cat) .numeros-urgence { grid-template-columns: fit-content(10.5rem) minmax(0, 1fr); column-gap: .75rem; }
	html body:is(.menuiserie, .assurance-habitation).hv-2 .hero-categorie:not(.mn-hero-cat) .numero-urgence { column-gap: .75rem; }
	html body:is(.menuiserie, .assurance-habitation).hv-2 .hero-categorie:not(.mn-hero-cat) .numero-urgence strong, html body:is(.menuiserie, .assurance-habitation).hv-2 .hero-categorie:not(.mn-hero-cat) .numero-urgence strong.long { font-size: 1.15rem; }
}

/* ---------- Encart « comparer les devis » ---------- */
body .mn-cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.25rem 2rem; margin: 2.5rem 0; padding: 1.6rem 1.75rem; background: var(--mag); border-radius: 1rem; color: #fff; }
body .mn-cta > div { flex: 1 1 24rem; }
body .mn-cta p { margin: 0; color: #D9ECEA; font-size: 1rem; line-height: 1.5; }
body .mn-cta p.mn-cta-titre { margin-bottom: .4rem; font-size: 1.3rem; font-weight: 800; line-height: 1.3; color: #fff; }
body .mn-cta-points { display: flex; flex-wrap: wrap; gap: .4rem 1.2rem; list-style: none; margin: .8rem 0 0; padding: 0; }
body .mn-cta-points li { position: relative; padding-left: 1.3rem; font-size: .9rem; font-weight: 600; color: #fff; }
body .mn-cta-points li::before { content: "✓"; position: absolute; left: 0; color: var(--jaune); }
body .mn-cta .btn { flex: 0 0 auto; background: var(--terre); color: #fff; margin: 0; }
body .mn-cta .btn:hover { background: var(--terre-fonce); }

/* ---------- Tableaux de prix ---------- */
.mn-tableau { margin-top: 1.25rem; }
.mn-tableau caption { caption-side: top; padding: 0 0 .6rem; text-align: left; font-weight: 800; font-size: 1.05rem; color: var(--mag-nuit); }
.mn-tableau th span { display: block; font-weight: 400; font-size: .78rem; color: #5E6868; }
.mn-tableau td strong { color: var(--mag); }
.mn-tableau td { white-space: nowrap; }
.mn-tableau thead th { white-space: normal; vertical-align: bottom; }
.mn-tableau th[scope="row"] { white-space: normal; }
.mn-tableau a { color: var(--mag); }

/* ---------- Schémas ---------- */
.mn-schema { margin: 1.75rem 0; padding: 1.25rem; background: #fff; border: 1px solid #E3DED5; border-radius: 1rem; text-align: center; }
.mn-schema svg { display: block; width: 100%; max-width: 30rem; height: auto; margin: 0 auto; }
.mn-schema figcaption { margin-top: .6rem; font-size: .92rem; line-height: 1.5; color: #4A5555; }
.mn-galerie { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin: 1.5rem 0; }
.mn-galerie-item { text-decoration: none; }
.mn-galerie-item .mn-schema { margin: 0; height: 100%; padding: .9rem; transition: border-color .15s; }
.mn-galerie-item:hover .mn-schema { border-color: var(--mag); }
.mn-galerie-item figcaption { font-weight: 700; color: var(--mag-nuit); }

/* ---------- Simulateur ---------- */
.mn-simulateur { margin: 2rem 0; padding: 1.75rem; background: #fff; border: 2px solid var(--mag); border-radius: 1.25rem; box-shadow: 0 14px 34px rgba(11,54,56,.08); }
.mn-simulateur .mn-sim-titre { margin: 0; font-size: 1.45rem; font-weight: 800; line-height: 1.25; color: var(--mag-nuit); }
.mn-simulateur .mn-sim-sous { margin: .35rem 0 1.25rem; font-size: .95rem; color: #5E6868; }
.mn-lignes { display: flex; flex-direction: column; gap: .75rem; }
.mn-ligne { position: relative; display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1.1fr) minmax(0, .8fr) minmax(0, .8fr) minmax(0, .6fr) auto; gap: .6rem; align-items: end; padding: .9rem; background: var(--mag-pale); border-radius: .8rem; }
.mn-simulateur label { display: flex; flex-direction: column; gap: .3rem; margin: 0; }
.mn-simulateur label > span { font-size: .78rem; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; color: #4A5555; }
.mn-simulateur select, .mn-simulateur input { width: 100%; min-width: 0; height: 2.8rem; padding: 0 .7rem; border: 1px solid #C9D6D4; border-radius: .55rem; background: #fff; font: inherit; font-size: 1rem; color: #1B2626; }
.mn-simulateur select:focus-visible, .mn-simulateur input:focus-visible { outline: 3px solid var(--corail); outline-offset: 1px; }
.mn-suppr { align-self: end; width: 2.8rem; height: 2.8rem; border: 0; border-radius: .55rem; background: #fff; color: var(--terre); font-size: 1.5rem; line-height: 1; cursor: pointer; }
.mn-ajout { margin-top: .75rem; padding: .55rem 1rem; border: 2px dashed var(--mag-clair); border-radius: .6rem; background: transparent; color: var(--mag); font: inherit; font-weight: 700; cursor: pointer; }
.mn-ajout:hover { border-color: var(--mag); }
.mn-options { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .6rem; margin-top: 1.1rem; }
.mn-resultat * { color: inherit; }
.mn-resultat { margin-top: 1.4rem; padding: 1.4rem; background: var(--mag); border-radius: 1rem; color: #fff; }
.mn-res-lignes p span { color: #D9ECEA; }
.mn-res-lignes p { display: flex; justify-content: space-between; gap: 1rem; margin: 0; padding: .45rem 0; border-bottom: 1px solid rgba(255,255,255,.15); color: #D9ECEA; font-size: 1rem; }
.mn-res-lignes p strong { color: #fff; font-size: 1.1rem; }
.mn-res-lignes p.mn-res-total { border-bottom: 0; padding-top: .7rem; color: #fff; font-weight: 700; }
.mn-res-lignes p.mn-res-total span { color: #fff; }
.mn-res-lignes p.mn-res-total strong { font-size: 1.9rem; color: var(--jaune); }
.mn-resultat .mn-res-fourchette { margin: .5rem 0 0; font-size: .95rem; color: #D9ECEA; }
.mn-resultat .mn-res-fourchette strong { color: #fff; }
.mn-resultat .mn-res-conseil { margin: .9rem 0 1rem; padding: .8rem 1rem; background: rgba(255,255,255,.08); border-left: 4px solid var(--corail); border-radius: .4rem; font-size: .95rem; line-height: 1.5; color: #fff; }
.mn-resultat .btn { margin: 0; background: var(--terre); color: #fff; }
.mn-resultat .btn:hover { background: var(--terre-fonce); }
.mn-simulateur .note-tableau { margin-top: .9rem; }
.mn-simulateur.compact .mn-options { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* ---------- Formulaire de devis ---------- */
.dv-bloc { margin: 3rem 0 1rem; padding: 2rem; background: #fff; border: 2px solid var(--mag); border-radius: 1.25rem; box-shadow: 0 16px 40px rgba(11,54,56,.10); scroll-margin-top: 7rem; }
.dv-tete .dv-sur { margin: 0; font-size: .78rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--terre); }
.dv-tete h2 { margin: .35rem 0 .6rem; font-size: clamp(1.4rem, 2.4vw, 1.8rem); line-height: 1.25; color: var(--mag-nuit); text-align: left; border: 0; padding: 0; }
.dv-tete p { margin: 0; color: #34403F; }
.dv-points { display: flex; flex-wrap: wrap; gap: .4rem 1.2rem; list-style: none; margin: .9rem 0 1.25rem; padding: 0; }
.dv-points li { position: relative; padding-left: 1.3rem; font-size: .92rem; font-weight: 600; color: var(--mag); }
.dv-points li::before { content: "✓"; position: absolute; left: 0; color: var(--terre); }
.dv-etapes { display: none; }
.dv-actif .dv-etapes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .4rem; list-style: none; margin: 0 0 1.25rem; padding: 0; counter-reset: dv; }
.dv-etapes li { counter-increment: dv; padding: .5rem .4rem; border-top: 4px solid var(--mag-clair); font-size: .85rem; font-weight: 700; color: #7A8483; text-align: center; }
.dv-etapes li::before { content: counter(dv) ". "; }
.dv-etapes li.actif { border-top-color: var(--terre); color: var(--mag-nuit); }
.dv-etapes li.fait { border-top-color: var(--mag); color: var(--mag); }
.dv-etape { margin: 0 0 1.25rem; padding: 0; border: 0; }
.dv-etape legend { margin-bottom: .75rem; padding: 0; font-size: 1.15rem; font-weight: 800; color: var(--mag-nuit); }
.dv-etape legend span { font-weight: 400; font-size: .9rem; color: #5E6868; }
.dv-question { margin: 1.1rem 0 .5rem; font-weight: 700; color: #1B2626; }
.dv-choix { display: flex; flex-wrap: wrap; gap: .5rem; }
.dv-option { position: relative; margin: 0; cursor: pointer; }
.dv-option input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.dv-option span { display: inline-block; padding: .6rem 1rem; border: 2px solid #D5E3E1; border-radius: .7rem; background: #fff; font-weight: 600; font-size: .98rem; color: #1B2626; transition: border-color .12s, background .12s; }
.dv-option:hover span { border-color: var(--mag); }
.dv-option input:checked + span { border-color: var(--mag); background: var(--mag); color: #fff; }
.dv-option input:focus-visible + span { outline: 3px solid var(--corail); outline-offset: 2px; }
.dv-champs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8rem 1rem; }
.dv-champs label, .dv-message { display: flex; flex-direction: column; gap: .3rem; margin: 0; }
.dv-champs span, .dv-message span { font-size: .85rem; font-weight: 700; color: #34403F; }
.dv-champs input, .dv-message textarea { width: 100%; min-width: 0; height: 3rem; padding: 0 .9rem; border: 1px solid #C9D6D4; border-radius: .6rem; background: #fff; font: inherit; font-size: 1rem; color: #1B2626; }
.dv-message { margin-top: .9rem; }
.dv-message textarea { height: auto; padding: .7rem .9rem; resize: vertical; }
.dv-champs input:focus-visible, .dv-message textarea:focus-visible { outline: 3px solid var(--corail); outline-offset: 1px; }
.dv-rassurance { margin: 1rem 0 .5rem; font-weight: 700; color: var(--mag); }
.dv-consent { display: flex; gap: .6rem; align-items: flex-start; margin: .5rem 0 0; font-size: .9rem; line-height: 1.45; color: #34403F; }
.dv-consent input { flex: 0 0 auto; width: 1.15rem; height: 1.15rem; margin-top: .15rem; accent-color: var(--mag); }
.dv-consent a { color: var(--mag); text-decoration: underline; }
.dv-nav { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .75rem; margin-top: 1.4rem; }
.dv-nav .btn { margin: 0; }
.dv-nav .btn:not(.contour) { background: var(--terre); color: #fff; margin-left: auto; }
.dv-nav .btn:not(.contour):hover { background: var(--terre-fonce); }
.dv-nav .btn.contour { background: transparent; color: var(--mag); box-shadow: inset 0 0 0 2px var(--mag); }
.dv-erreur { margin: .5rem 0 0; padding: .7rem 1rem; background: #FDECEB; border-radius: .5rem; color: #8E1F14; font-weight: 600; }
.dv-envoyer { font-size: 1.05rem; }

/* ---------- Barre mobile ---------- */
.mn-barre-mobile { display: none; }
@media (max-width: 767px) {
	.mn-barre-mobile { position: fixed; left: .75rem; right: .75rem; bottom: .75rem; z-index: 50; display: block; padding: .95rem 1rem; background: var(--terre); border-radius: 999px; box-shadow: 0 10px 24px rgba(0,0,0,.25); color: #fff; font-weight: 800; text-align: center; text-decoration: none; }
	body.menuiserie .pied { padding-bottom: 5rem; }
}

/* ---------- Catégorie ---------- */
.mn-hero-cat h1 em { color: var(--jaune); font-style: normal; }
.mn-boutons { margin-top: 1.5rem; }
.mn-boutons .btn { background: var(--terre); color: #fff; }
.mn-boutons .btn.blanc.contour { background: transparent; color: #fff; box-shadow: inset 0 0 0 2px #fff; }
.mn-hero-cat .numeros-urgence::before { content: "Prix de départ"; display: block; width: 100%; margin-bottom: .2rem; font-weight: 700; font-size: .8rem; letter-spacing: .08em; text-transform: uppercase; color: var(--jaune); }
.mn-hero-cat .numeros-urgence .numero-urgence strong { color: var(--mag); font-size: 1.35rem; }
.mn-groupe { padding: 3rem 0 0; }
.mn-groupe h2.hp-titre { margin: 0 0 .5rem; font-size: clamp(1.4rem, 2.3vw, 1.85rem); line-height: 1.25; font-weight: 800; color: var(--mag-nuit); text-align: left; }
.mn-groupe-texte { margin: 0 0 1.4rem; max-width: 44rem; color: #4A5555; }
.mn-grille { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.mn-carte { display: flex; flex-direction: column; gap: .4rem; padding: 1.25rem 1.3rem; background: #fff; border: 1px solid #E3DED5; border-radius: 1rem; text-decoration: none; transition: border-color .15s, transform .15s; }
.mn-carte:hover { border-color: var(--mag); transform: translateY(-2px); }
.mn-carte strong { font-size: 1.05rem; line-height: 1.3; color: var(--mag-nuit); }
.mn-carte span { font-size: .92rem; line-height: 1.5; color: #4A5555; }
.mn-carte-schema .mn-schema { margin: 0 0 .5rem; padding: .4rem; border: 0; background: var(--mag-pale); }
.mn-carte-schema .mn-schema figcaption { display: none; }
.mn-groupe-schemas .mn-grille { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.mn-groupe-liste .mn-grille { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .6rem; }
.mn-groupe-liste .mn-carte { padding: .8rem 1rem; }
.mn-groupe-liste .mn-carte strong { font-size: .98rem; }

@media (max-width: 1000px) {
	.mn-ligne { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.mn-ligne label:first-child { grid-column: 1 / -1; }
	.mn-grille, .mn-groupe-schemas .mn-grille, .mn-groupe-liste .mn-grille { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.mn-galerie { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
	.mn-simulateur, .dv-bloc { padding: 1.25rem 1rem; }
	.mn-ligne { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.mn-ligne label:nth-child(2) { grid-column: 1 / -1; }
	.mn-options { grid-template-columns: minmax(0, 1fr); }
	.dv-champs { grid-template-columns: minmax(0, 1fr); }
	.dv-actif .dv-etapes li { font-size: .72rem; }
	.mn-grille, .mn-groupe-schemas .mn-grille { grid-template-columns: minmax(0, 1fr); }
	.mn-groupe-liste .mn-grille { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.mn-galerie { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; }
	body .mn-cta { padding: 1.3rem 1.2rem; }
	.mn-tableau td, .mn-tableau th { white-space: normal; }
}

.mn-cta *, .dv-bloc .dv-points li, .mn-carte * { }
body .mn-cta div, body .mn-cta ul { color: inherit; }

/* ---------- V3.3 : mobile (iPhone) - aucune grille ni champ ne peut élargir la page ---------- */
html body.menuiserie, html body.assurance-habitation { overflow-x: clip; }
.mn-simulateur label, .dv-champs label, .mn-ligne > *, .mn-options > * { min-width: 0; }
.dv-etapes li { min-width: 0; }
.dv-etape-nom { display: none; }
@media (max-width: 640px) {
	/* étapes : 4 segments de progression + le nom de l'étape en cours en dessous */
	.dv-actif .dv-etapes { margin-bottom: .5rem; }
	.dv-actif .dv-etapes li { height: 0; padding: 0; font-size: 0; }
	.dv-actif .dv-etapes li::before { content: none; }
	.dv-actif .dv-etape-nom { display: block; margin: 0 0 1.1rem; font-size: .82rem; font-weight: 700; color: var(--mag-nuit); }
}

/* ---------- V3.3 : encart en fin de page (le formulaire est sur /menuiserie/comparer) ---------- */
.dv-vers-page .dv-points { margin-bottom: 1.3rem; }
.dv-vers-page .btn.dv-aller { margin: 0; background: var(--terre); color: #fff; font-size: 1.05rem; }
.dv-vers-page .btn.dv-aller:hover, .dv-vers-page .btn.dv-aller:focus-visible { background: var(--terre-fonce); color: #fff; }
@media (max-width: 640px) { .dv-vers-page .btn.dv-aller { display: block; width: 100%; text-align: center; } }

/* ---------- V3.3 : page formulaire /menuiserie/comparer ---------- */
.mn-formulaire-page { padding-top: 1.5rem; }
.mn-formulaire-page .fil-ariane { margin: 0 0 1rem; }
.mn-landing-tete .dv-sur { margin: 0; font-size: .78rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--terre-fonce); }
.mn-landing-tete h1 { margin: .4rem 0 .7rem; font-size: clamp(1.55rem, 3vw, 2.2rem); line-height: 1.2; color: var(--mag-nuit); text-align: left; }
.mn-landing-tete .mn-landing-chapo { margin: 0; font-size: 1.05rem; line-height: 1.55; color: #34403F; }
.mn-landing-atouts { display: flex; flex-wrap: wrap; gap: .45rem 1.4rem; list-style: none; margin: 1rem 0 0; padding: 0; }
.mn-landing-atouts li { position: relative; padding-left: 1.35rem; font-size: .95rem; color: #34403F; }
.mn-landing-atouts li::before { content: "✓"; position: absolute; left: 0; font-weight: 800; color: var(--terre); }
.mn-landing-atouts strong { color: var(--mag-nuit); }
.mn-formulaire-page .dv-bloc { margin-top: 1.5rem; }
.mn-landing-suite { margin: 2.2rem 0 1rem; }
.mn-landing-suite h2 { margin: 0 0 1rem; font-size: 1.3rem; color: var(--mag-nuit); text-align: left; border: 0; padding: 0; }
.mn-landing-etapes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; list-style: none; margin: 0; padding: 0; counter-reset: mnl; }
.mn-landing-etapes li { counter-increment: mnl; position: relative; padding: 1rem 1rem 1rem 3.2rem; background: #fff; border-radius: .9rem; box-shadow: 0 6px 18px rgba(11,54,56,.06); }
.mn-landing-etapes li::before { content: counter(mnl); position: absolute; left: 1rem; top: 1rem; width: 1.6rem; height: 1.6rem; border-radius: 50%; background: var(--mag); color: #fff; font-weight: 800; font-size: .9rem; line-height: 1.6rem; text-align: center; }
.mn-landing-etapes strong { display: block; color: var(--mag-nuit); }
.mn-landing-etapes span { display: block; margin-top: .25rem; font-size: .92rem; line-height: 1.45; color: #4A5555; }
.mn-landing-note { margin: 1.2rem 0 0; font-size: .92rem; color: #4A5555; }
.mn-landing-note a { color: var(--mag); text-decoration: underline; }
@media (max-width: 760px) {
	.mn-landing-etapes { grid-template-columns: minmax(0, 1fr); gap: .6rem; }
	.mn-landing-tete .mn-landing-chapo { font-size: 1rem; }
	.mn-landing-atouts { flex-direction: column; gap: .3rem; }
}
.mn-barre-mobile:hover, .mn-barre-mobile:focus-visible { color: #fff; text-decoration: none; }
.dv-etapes li { color: #5E6868; }

/* ---------- V3.4 : adresse des travaux, consentement téléphonique ---------- */
.dv-champs .dv-large { grid-column: 1 / -1; }
.dv-consent-lien { margin: .35rem 0 0 1.75rem; font-size: .85rem; }
.dv-consent-lien a { color: var(--mag); text-decoration: underline; text-underline-offset: 2px; }