/* ==========================================================================
   Portail-Habitat.fr - composants complémentaires
   Chargé après style.css. Tout reprend les variables du thème
   (--categorie, --categorie-clair, --bleu, --noir, --trace, --gris).
   Composants : quiz, test d'éligibilité, outils/calculateurs, numéros
   utiles, tableaux, liste d'étapes, check-list, alertes, relais mairie,
   partage, impression, formulaires (contact), plan du site.
   ========================================================================== */

:root {
	--vert-ok: #146B46;
	--vert-ok-clair: #E8F7F0;
	--rouge-ko: #B42318;
	--rouge-ko-clair: #FDECEB;
	--orange-alerte: #B54708;
	--orange-alerte-clair: #FEF3E6;
}

button.btn { border: 0; cursor: pointer; font-family: inherit; }
.btn.contour { background-color: transparent; color: var(--bleu); box-shadow: inset 0 0 0 2px var(--bleu); }
.btn.contour:hover { background-color: var(--bleu); color: var(--blanc); }
.numeros-urgence .numero-urgence { height: auto; min-height: 7.375rem; padding: .6rem .4rem; }
.numeros-urgence .numero-urgence strong { line-height: 1.25; }
.numeros-urgence .numero-urgence:has(strong.long) { flex: 1 1 calc((100% - .625rem) / 2); }
.numeros-urgence .numero-urgence strong.long { font-size: 1.55rem; white-space: nowrap; letter-spacing: 0; }
.numeros-urgence .numero-urgence span { margin-top: .2rem; }
.hero-texte:only-child { max-width: 54rem; }
.lien-evitement { position: absolute; left: -9999px; top: 0; z-index: 100; padding: .5rem 1rem; background: var(--bleu); color: #fff; }
.lien-evitement:focus { left: 1rem; top: 1rem; }
.piege-infolettre { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.note-question { margin: -.5rem 0 1rem; font-size: 1rem; color: #555; }
.barre-admin { background: #191919; color: #fff; font-size: .9rem; padding: .4rem 0; }
.barre-admin a { color: #F2AF49; }
body.guides, .rubrique.guides { --categorie: #E4572E; --categorie-clair: #FDF0ED; }
@media (max-width: 480px) { .numeros-urgence .numero-urgence strong.long { font-size: 1.3rem; } }
.carte-article a:not(.btn) { color: var(--bleu); }
.carte-article .btn { margin-top: 1.875rem; }
.carte-article > h3:not(.titre-partie) { margin-top: 1.875rem; font-size: 1.25rem; font-weight: 700; line-height: 1.5; }
.carte-article strong { font-weight: 700; }
.bloc-aide ul { padding-left: 1.2rem; list-style: disc outside; }
.bloc-aide a:not(.btn) { color: #1A4A30; text-decoration: underline; }

/* ---------- Quiz ---------- */
.quiz { margin-top: 1.5rem; }
.quiz-progression { display: flex; justify-content: space-between; gap: 1rem; font-size: .95rem; color: #555; margin-bottom: .5rem; }
.quiz-barre { height: 6px; background: var(--trace); border-radius: 3px; overflow: hidden; margin-bottom: 1.25rem; }
.quiz-barre span { display: block; height: 100%; width: 0; background: var(--categorie); transition: width .3s ease; }
.quiz-situation { font-size: 1.2rem; line-height: 1.5; font-weight: 700; margin: 0 0 1.25rem; color: var(--noir); }
.quiz-choix { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; }
.quiz-choix.une-colonne { grid-template-columns: 1fr; }
.quiz-choix button { font: inherit; font-size: 1.05rem; font-weight: 600; text-align: left; padding: 1rem 1.1rem; border-radius: .75rem; border: 2px solid var(--trace); background: var(--blanc); color: var(--noir); cursor: pointer; line-height: 1.4; transition: border-color .2s, background-color .2s; }
.quiz-choix button:hover:not(:disabled) { border-color: var(--categorie); background: var(--categorie-clair); }
.quiz-choix button:disabled { cursor: default; }
.quiz-choix button.est-juste { border-color: var(--vert-ok); background: var(--vert-ok-clair); }
.quiz-choix button.est-faux { border-color: var(--rouge-ko); background: var(--rouge-ko-clair); }
.quiz-retour { margin-top: 1rem; padding: 1rem 1.25rem; border-radius: .75rem; border-left: 5px solid var(--categorie); background: var(--gris); }
.quiz-retour.juste { border-left-color: var(--vert-ok); background: var(--vert-ok-clair); }
.quiz-retour.faux { border-left-color: var(--rouge-ko); background: var(--rouge-ko-clair); }
.quiz-retour .verdict { display: block; margin-bottom: .35rem; font-weight: 700; }
.quiz-retour p { margin: 0; font-size: 1.05rem; line-height: 1.5; }
.quiz-actions { margin-top: 1.25rem; display: flex; gap: .75rem; flex-wrap: wrap; align-items: center; }
.carte-article .quiz-actions .btn { margin-top: 0; }
.quiz-score { font-size: 3rem; font-weight: 900; line-height: 1; margin: .75rem 0 .75rem; color: var(--categorie); }
.quiz-fin p { font-size: 1.125rem; line-height: 1.5; }

/* ---------- Test d'éligibilité (questions oui / non) ---------- */
.eligibilite { margin-top: 1.5rem; }
.eligibilite .quiz-choix button { text-align: center; }
.eligibilite-resultat { margin-top: 1rem; padding: 1.25rem 1.4rem; border-radius: .75rem; background: var(--gris); border-left: 5px solid var(--categorie); }
.eligibilite-resultat.oui { background: var(--vert-ok-clair); border-left-color: var(--vert-ok); }
.eligibilite-resultat.non { background: var(--orange-alerte-clair); border-left-color: var(--orange-alerte); }
.eligibilite-resultat h3 { font-size: 1.25rem; font-weight: 700; line-height: 1.4; margin: 0 0 .5rem; }
.eligibilite-resultat p { margin: .5rem 0 0; font-size: 1.075rem; line-height: 1.5; }

/* ---------- Outils / calculateurs ---------- */
.outil, .retract { margin-top: 1.5rem; display: grid; gap: 1.1rem; }
.outil fieldset, .retract fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
.outil legend, .outil .intitule-champ, .retract legend, .retract .intitule-champ, .intitule-champ { display: block; font-weight: 700; margin-bottom: .45rem; padding: 0; font-size: 1.05rem; color: var(--noir); }
.outil-radios, .retract-radios { display: flex; flex-wrap: wrap; gap: .5rem; }
.outil-radios label, .retract-radios label { display: flex; align-items: center; gap: .5rem; padding: .6rem .9rem; border: 1px solid var(--trace); border-radius: .5rem; cursor: pointer; background: var(--blanc); font-size: 1.025rem; }
.outil-radios label:has(input:checked), .retract-radios label:has(input:checked) { border-color: var(--categorie); background: var(--categorie-clair); }
.outil input[type="radio"], .outil input[type="checkbox"], .retract input[type="radio"], .retract input[type="checkbox"] { accent-color: var(--categorie); width: 1.1rem; height: 1.1rem; }
.outil input[type="date"], .outil input[type="text"], .outil input[type="number"], .outil input[type="email"], .outil select, .outil textarea,
.retract input[type="date"], .retract input[type="text"], .retract textarea { font: inherit; font-size: 1.05rem; width: 100%; box-sizing: border-box; padding: .65rem .8rem; border: 1px solid #a9a9a9; border-radius: .5rem; background: var(--blanc); color: var(--noir); }
.outil-grille, .retract-grille { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.outil-case, .retract-case { display: flex; gap: .6rem; align-items: flex-start; font-size: 1.025rem; line-height: 1.45; }
.outil-resultat, .retract-resultat { padding: 1.25rem 1.4rem; border-radius: .75rem; background: var(--categorie-clair); border-left: 5px solid var(--categorie); }
.outil-resultat.alerte, .retract-resultat.depasse { background: var(--rouge-ko-clair); border-left-color: var(--rouge-ko); }
.outil-resultat.ok { background: var(--vert-ok-clair); border-left-color: var(--vert-ok); }
.outil-resultat p, .retract-resultat p { margin: 0 0 .5rem; font-size: 1.075rem; line-height: 1.5; }
.outil-resultat ul, .retract-resultat ul { margin: .5rem 0 0; padding-left: 1.2rem; list-style: disc outside; }
.outil-resultat li, .retract-resultat li { margin-top: .3rem; line-height: 1.5; }
.outil-chiffre, .retract-date { display: block; font-size: 1.6rem; font-weight: 900; line-height: 1.25; margin: .25rem 0 .5rem; color: var(--noir); }
.outil-erreur, .retract-erreur { color: var(--rouge-ko); font-weight: 700; margin: 0; }
.outil-separateur, .retract-separateur { border: 0; border-top: 1px solid var(--trace); margin: .75rem 0; }
.outil textarea, .retract textarea { min-height: 20rem; line-height: 1.5; }
.carte-article .outil .btn, .carte-article .retract .btn { margin-top: 0; }
.copie-ok { font-weight: 700; color: var(--vert-ok); }

/* ---------- Numéros utiles ---------- */
.grille-numeros { display: grid; grid-template-columns: repeat(auto-fill, minmax(14.5rem, 1fr)); gap: .9375rem; margin-top: 1.875rem; }
.carte-numero { display: flex; flex-direction: column; gap: .25rem; padding: 1.1rem 1.25rem; border: 1px solid var(--trace); border-radius: .9375rem; background: var(--blanc); border-top: 5px solid var(--categorie); }
.carte-numero .numero-tel { font-size: 1.75rem; font-weight: 900; line-height: 1.2; color: var(--noir); font-variant-numeric: tabular-nums; white-space: nowrap; text-decoration: none; }
.carte-numero a.numero-tel:hover { color: var(--categorie); }
.carte-numero .numero-nom { font-size: 1.1rem; font-weight: 700; line-height: 1.35; color: var(--noir); }
.carte-numero .numero-detail { font-size: 1rem; line-height: 1.45; color: #444; }
.carte-numero .numero-cout { display: inline-block; width: fit-content; margin-top: .35rem; padding: .1rem .6rem; border-radius: 1rem; font-size: .85rem; font-weight: 700; background: var(--vert-ok-clair); color: var(--vert-ok); }
.carte-numero.urgence { border-top-color: var(--rouge); }
.carte-numero.urgence .numero-tel { color: var(--rouge); }
.puces-numeros { list-style: none; padding: 0; margin: .75rem 0 1rem; display: flex; flex-wrap: wrap; gap: .4rem; }
.puces-numeros li { padding: .3rem .6rem; border: 1px solid var(--trace); border-radius: .4rem; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ---------- Tableaux ---------- */
.tableau-defilant { overflow-x: auto; margin: 1.875rem 0 0; border: 1px solid var(--trace); border-radius: .75rem; }
.tableau-simple { width: 100%; min-width: 34rem; border-collapse: collapse; font-size: 1rem; line-height: 1.45; background: var(--blanc); }
.tableau-simple th, .tableau-simple td { text-align: left; vertical-align: top; padding: .8rem .9rem; border-bottom: 1px solid var(--trace); }
.tableau-simple thead th { background: var(--categorie-clair); font-weight: 700; border-bottom: 2px solid var(--categorie); }
.tableau-simple tbody tr:last-child th, .tableau-simple tbody tr:last-child td { border-bottom: 0; }
.tableau-simple tbody th { font-weight: 700; }
.tableau-simple .col-ok { color: var(--vert-ok); }
.tableau-simple .col-ko { color: var(--rouge-ko); }
.tableau-simple td.nombre { white-space: nowrap; font-variant-numeric: tabular-nums; font-weight: 700; }

/* ---------- Étapes numérotées dans une carte ---------- */
.etapes-liste { counter-reset: etape; margin-top: 1.875rem; padding: 0; list-style: none; display: grid; gap: 1rem; }
.etapes-liste > li { counter-increment: etape; position: relative; padding: .1rem 0 0 3.4rem; min-height: 2.5rem; font-size: 1.125rem; line-height: 1.5; color: var(--noir); }
.etapes-liste > li::before { content: counter(etape); position: absolute; left: 0; top: 0; width: 2.4rem; height: 2.4rem; border-radius: 50%; background: var(--categorie); color: var(--blanc); font-weight: 700; display: flex; align-items: center; justify-content: center; font-size: 1.1rem; }
.etapes-liste > li strong:first-child { display: block; }

/* ---------- Check-list (documents à préparer…) ---------- */
.checklist { margin-top: 1.875rem; padding: 0; list-style: none; display: grid; gap: .5rem; }
.checklist li label { display: flex; gap: .7rem; align-items: flex-start; padding: .7rem .9rem; border: 1px solid var(--trace); border-radius: .6rem; background: var(--blanc); cursor: pointer; font-size: 1.075rem; line-height: 1.45; }
.checklist li input { accent-color: var(--vert-ok); width: 1.2rem; height: 1.2rem; margin-top: .15rem; flex-shrink: 0; }
.checklist li label:has(input:checked) { background: var(--vert-ok-clair); border-color: #A8D8C0; }
.checklist-bilan { margin-top: .75rem; font-weight: 700; color: var(--vert-ok); }

/* ---------- Alertes ---------- */
.bloc-alerte { margin-top: 1.875rem; padding: 1.4rem 1.5rem; background: var(--orange-alerte-clair); border: 1px solid #F5C58F; border-left: 6px solid var(--orange-alerte); border-radius: .9375rem; }
.bloc-alerte.danger { background: var(--rouge-ko-clair); border-color: #F4B4AE; border-left-color: var(--rouge-ko); }
.bloc-alerte .etiquette { background-color: var(--orange-alerte); }
.bloc-alerte.danger .etiquette { background-color: var(--rouge-ko); }
.bloc-alerte h3 { margin-top: .5rem; font-size: 1.25rem; font-weight: 700; line-height: 1.45; color: var(--noir); }
.bloc-alerte p, .bloc-alerte li { margin-top: .6rem; font-size: 1.1rem; line-height: 1.5; color: var(--noir); }
.bloc-alerte ul { padding-left: 1.2rem; list-style: disc outside; }

/* ---------- Chiffres clés (hero sans numéro de téléphone) ---------- */
.chiffres-cles { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: .9375rem; margin-top: 1.875rem; }
.chiffres-cles .chiffre-cle { padding: 1.1rem 1.2rem; background: var(--categorie-clair); border-radius: .9375rem; }
.chiffres-cles strong { display: block; font-size: 1.6rem; font-weight: 900; line-height: 1.2; color: var(--categorie); }
.chiffres-cles span { display: block; margin-top: .25rem; font-size: 1rem; line-height: 1.4; color: var(--noir); }

/* ---------- Relais mairie ---------- */
.texte-relais textarea { display: block; width: 100%; box-sizing: border-box; min-height: 15rem; margin: .75rem 0 0; padding: .9rem; font: inherit; font-size: .95rem; line-height: 1.5; color: #1a1a1a; background: #fff; border: 1px solid rgba(0, 0, 0, .2); border-radius: .5rem; resize: vertical; }
.bloc-relais .quiz-actions .btn.blanc { box-shadow: inset 0 0 0 1px var(--trace); }
.bloc-relais .panneau .texte-relais .surtitre { display: block; margin-top: 1.25rem; }

/* ---------- Focus clavier ---------- */
.quiz button:focus-visible, .outil input:focus-visible, .outil select:focus-visible, .outil textarea:focus-visible,
.retract input:focus-visible, .retract textarea:focus-visible, .texte-relais textarea:focus-visible,
.checklist input:focus-visible, .formulaire input:focus-visible, .formulaire textarea:focus-visible, .formulaire select:focus-visible { outline: 3px solid var(--categorie); outline-offset: 2px; }

/* ---------- Formulaires (contact, espace mairie) ---------- */
.formulaire { display: grid; gap: 1.1rem; margin-top: 1.875rem; }
.formulaire label { display: block; font-weight: 700; margin-bottom: .4rem; font-size: 1.05rem; }
.formulaire input[type="text"], .formulaire input[type="email"], .formulaire input[type="tel"], .formulaire select, .formulaire textarea { font: inherit; font-size: 1.05rem; width: 100%; box-sizing: border-box; padding: .7rem .85rem; border: 1px solid #a9a9a9; border-radius: .5rem; background: #fff; color: var(--noir); }
.formulaire textarea { min-height: 11rem; line-height: 1.5; }
.formulaire .deux-colonnes { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.formulaire .case { display: flex; gap: .6rem; align-items: flex-start; font-weight: 400; font-size: 1rem; line-height: 1.45; }
.formulaire .piege { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.formulaire .btn { margin-top: 0; justify-self: start; }
.message-formulaire { margin-top: 1.25rem; padding: 1rem 1.25rem; border-radius: .75rem; font-size: 1.075rem; line-height: 1.5; }
.message-formulaire.ok { background: var(--vert-ok-clair); border-left: 5px solid var(--vert-ok); }
.message-formulaire.erreur { background: var(--rouge-ko-clair); border-left: 5px solid var(--rouge-ko); }

/* ---------- Pages simples (mentions, plan du site) ---------- */
.plan-site { display: grid; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); gap: 1.5rem; margin-top: 1.875rem; }
.plan-site h3 { font-size: 1.15rem; font-weight: 700; }
.plan-site h3 a { color: var(--noir); }
.plan-site ul { margin-top: .6rem; padding-left: 1.1rem; list-style: disc outside; }
.plan-site li { margin-top: .3rem; font-size: 1.025rem; line-height: 1.45; }

/* ---------- Catégorie : lien vers la fiche ---------- */
.accordeon .liste-essentiel { margin-top: 1.25rem; padding-left: 1.3rem; list-style: disc outside; }
.accordeon .liste-essentiel li { font-size: 1.1rem; line-height: 1.5; margin-top: .35rem; color: var(--noir); }

/* ---------- Impression : fiche propre à afficher en mairie ---------- */
@media print {
	.entete, .barre-menu, .ancre-menu, .ancres-categorie, .pied, .colonne-laterale, .bloc-relais, .quiz, .eligibilite, .outil, .retract, .ne-pas-imprimer, .halo, .btn { display: none !important; }
	body, body.fond-gris { background: #fff !important; }
	.hero-categorie { padding: 0 !important; min-height: 0 !important; background: none !important; }
	.contenu-fenetre > .section { display: block !important; }
	.carte-article { border: 0 !important; padding: 0 !important; break-inside: auto; }
	.carte-article + .carte-article { margin-top: 1.2rem !important; }
	.faq .question-contenu, .accordeon .accordeon-contenu { grid-template-rows: 1fr !important; }
	.faq .question-corps, .accordeon .accordeon-corps { overflow: visible !important; }
	.faq .plus, .accordeon .plus { display: none !important; }
	a[href^="http"]::after { content: " (" attr(href) ")"; font-size: .8em; color: #555; word-break: break-all; }
	.tableau-defilant { overflow: visible; border: 0; }
	.tableau-simple { min-width: 0; }
	body::after { content: "Source : portail-habitat.fr - fiche d'information gratuite, à jour à la date d'impression."; display: block; margin-top: 1.5rem; font-size: .85rem; color: #555; }
}

@media (max-width: 640px) {
	.exemple-chiffre .ligne-exemple span:last-child, .encart-lateral .ligne-prix span:last-child { white-space: normal; }
	.exemple-chiffre .ligne-exemple { flex-wrap: wrap; }
	.quiz-choix, .outil-grille, .retract-grille, .formulaire .deux-colonnes { grid-template-columns: 1fr; }
	.carte-numero .numero-tel { font-size: 1.5rem; }
	.etapes-liste > li { font-size: 1rem; }
}
@media (prefers-reduced-motion: reduce) {
	.quiz-barre span { transition: none; }
}

/* Case à cocher des formulaires : texte sur une seule colonne */
.formulaire .case span { flex: 1 1 auto; min-width: 0; }

/* Bloc relais : le texte à copier ne passe pas sous l'illustration,
   boutons alignés sur une ligne */
.bloc-relais .panneau p.quiz-actions { max-width: none; margin-top: 1.25rem; }
@media (min-width: 1250px) {
	.bloc-relais .panneau .texte-relais, .bloc-relais .panneau p.quiz-actions { max-width: 34rem; }
}
@media (max-width: 1249px) {
	.pied .infolettre-texte { flex-basis: auto; }
}
.bloc-relais .panneau .quiz-actions .btn { margin-top: 0; }
.bloc-relais .panneau .btn.blanc { background-color: var(--blanc); color: var(--bleu-marine); box-shadow: none; }
.bloc-relais .panneau .btn.blanc:hover { background-color: var(--gris); }
.bloc-relais .panneau .copie-ok { color: #9BE3BD; }

/* ==========================================================================
   V1.1 - charte unifiée (demande client) :
   une seule couleur (vert Énergie) pour toutes les rubriques, pas de dégradé,
   pas de bandeau sommaire, pas de colonne latérale.
   ========================================================================== */
body, body[class], .rubrique, .rubrique[class] {
	--categorie: #08A400;
	--categorie-clair: #DEFEE9;
}
.halo, .hero .halo, .hero-categorie .halo, .panneau-conseil .halo, .encart-bleu .halo, .panneau-mairie .halo { display: none !important; }
.ancres-categorie, .colonne-laterale, .contenu-fenetre .colonne-laterale { display: none !important; }
.contenu-fenetre .colonne-article { flex: 1 1 100%; max-width: 100%; }
.contenu-categorie .colonne-accordeons { flex: 1 1 100%; max-width: 100%; }
.contenu-fenetre { padding-top: 3.5rem; }

/* Barre de partage sobre en bas des fiches */
.barre-partage { padding: 2.5rem 0 0; }
.barre-partage .section { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; }
.barre-partage .libelle-partage { font-weight: 700; margin-right: .5rem; }
.barre-partage .btn { font-size: 1rem; }

/* « Ce que dit la loi » */
.carte-loi { border-top: 5px solid var(--bleu-marine); }
.bloc-loi { margin-top: 1.5rem; padding: 1.25rem 1.5rem; background: #F6F7FB; border-left: 4px solid var(--bleu-marine); border-radius: 0 .75rem .75rem 0; }
.bloc-loi .loi-ref { display: block; font-size: .95rem; font-weight: 700; letter-spacing: .01em; color: var(--bleu-marine); text-transform: none; }
.bloc-loi blockquote { margin: .6rem 0 0; padding: 0; font-family: Georgia, "Times New Roman", serif; font-size: 1.1rem; line-height: 1.6; font-style: italic; color: #222; }
.bloc-loi p { margin-top: .6rem; font-size: 1.075rem; line-height: 1.55; color: var(--noir); }
.bloc-loi .loi-enclair { font-weight: 700; }
.liste-references { margin-top: 1rem; padding-left: 1.2rem; list-style: disc outside; }
.liste-references li { margin-top: .4rem; font-size: 1rem; line-height: 1.5; }

/* À lire aussi (fin de fiche) */
.liens-fiches { margin-top: 1.25rem; display: grid; grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); gap: .75rem; }
.liens-fiches a { display: block; padding: .9rem 1.1rem; border: 1px solid var(--trace); border-radius: .75rem; background: var(--gris); color: var(--noir) !important; text-decoration: none; font-weight: 600; line-height: 1.4; }
.liens-fiches a:hover { border-color: var(--categorie); background: var(--categorie-clair); }