/* Porte « J'ai l'adresse » (18/10/2026) : saisie, choix du logement, aperçu.
   Feuille propre à ces pages : rien ne change ailleurs. Les blocs de l'aperçu
   (couverture, chiffres clés, sommaire) sont nommés pour être repris par le
   rapport complet le jour où sa couverture sera refaite. */

.porte-adresse { padding-top: 2.4rem; padding-bottom: 3.2rem; }
.porte-adresse .chapo { margin-bottom: 1.4rem; }
.porte-badge {
  display: inline-block; background: #e8f5ee; color: #0b6b3c; border: 1px solid #bfe3cf;
  border-radius: 999px; padding: 0.3rem 0.85rem; font-size: 0.88rem; font-weight: 600;
  margin-bottom: 1rem;
}
.porte-mention { font-size: 0.88rem; color: #6b7690; margin-top: 1.2rem; }
.porte-lien-discret { font-size: 0.92rem; }

/* Saisie */
/* Groupes de boutons radio : un fieldset et sa légende (lus ensemble par le
   lecteur d'écran), sans le cadre ni les marges que le navigateur leur donne. */
fieldset.groupe-choix { border: 0; padding: 0; margin: 0 0 1.9rem; min-width: 0; }
fieldset.groupe-choix > legend { padding: 0; }
.choix-type.deux { grid-template-columns: repeat(2, 1fr); }
.finalites { display: grid; gap: 0.4rem; }
.finalites label { font-weight: 400; display: flex; gap: 0.55rem; align-items: flex-start; cursor: pointer; }
.finalites input { margin-top: 0.3rem; accent-color: var(--accent); }
.autocomplete-liste li.sans-numero { color: #8a93a8; cursor: not-allowed; }
.autocomplete-liste li.sans-numero small { display: block; }
.adresse-choisie { margin: 0.45rem 0 0; font-size: 0.92rem; color: var(--succes-texte); font-weight: 600; }
.message-formulaire { color: var(--erreur); font-weight: 600; margin: 0.6rem 0 0; }
.bouton[aria-busy="true"] { opacity: 0.75; cursor: progress; }
/* Envoi en cours (adresse.js) : indicateur qui tourne dans le bouton (blanc sur
   le bleu du bouton principal, sinon invisible) et durée annoncée dessous. */
.bouton .rotateur { display: inline-block; vertical-align: -0.15em; margin-right: 0.55rem; }
.bouton-principal .rotateur { border-color: rgba(255, 255, 255, 0.45); border-top-color: #fff; }
.attente-duree { margin: 0.5rem 0 0; font-size: 0.92rem; color: var(--encre-douce); }
.attente-duree:empty { margin: 0; }

/* Choix du logement */
/* `align-items: end` : si un libellé passe sur deux lignes (police agrandie),
   les champs restent alignés (contrôle terrain du 21/10/2026). */
.questions-logement { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 1rem;
  align-items: end; }
.questions-logement .champ { margin-bottom: 1rem; }
.questions-logement select, .questions-logement input {
  width: 100%; padding: 0.6rem 0.75rem; font: inherit; border: 1px solid var(--bordure);
  border-radius: 8px; background: #fff;
}
.liste-logements { list-style: none; margin: 1rem 0 0; padding: 0; display: grid; gap: 0.6rem; }
.logement-carte { display: block; position: relative; cursor: pointer; }
.logement-carte input { position: absolute; opacity: 0; }
.logement-carte .logement-corps {
  display: block; border: 1.5px solid var(--bordure); border-radius: 10px;
  padding: 0.85rem 1rem; background: #fff;
}
.logement-carte input:checked + .logement-corps { border-color: var(--accent); background: #eef3ff; }
.logement-carte input:focus-visible + .logement-corps { outline: 2px solid var(--accent); }
.logement-titre { font-weight: 700; color: var(--encre); display: block; }
.logement-details { font-size: 0.92rem; color: var(--encre-douce); display: block; margin-top: 0.15rem; }
.logement-accord { display: inline-block; margin-top: 0.35rem; font-size: 0.82rem; font-weight: 600;
  border-radius: 999px; padding: 0.1rem 0.6rem; }
.logement-accord.oui { background: #e8f5ee; color: #0b6b3c; }
.logement-accord.non { background: #fff4e5; color: #8a5300; }
.logement-accord.actuel { background: #eef3ff; color: #1d3f8f; }
.type-incoherent p { margin: 0 0 0.7rem; }
.type-incoherent form { margin: 0; }
.type-incoherent .aide { margin: 0.6rem 0 0; }
.etiquette-lettre {
  display: inline-block; min-width: 1.6rem; text-align: center; font-weight: 800; border-radius: 4px;
  padding: 0 0.3rem; margin-right: 0.15rem;
}
.etiquette-lettre[data-lettre="A"] { background: #319834; color: #0b1f04; }
.etiquette-lettre[data-lettre="B"] { background: #5fb733; color: #0b1f04; }
.etiquette-lettre[data-lettre="C"] { background: #a8ce39; color: #173404; }
.etiquette-lettre[data-lettre="D"] { background: #f3e600; color: #412402; }
.etiquette-lettre[data-lettre="E"] { background: #f0b310; color: #412402; }
.etiquette-lettre[data-lettre="F"] { background: #ea7b21; color: #4a1b0c; }
.etiquette-lettre[data-lettre="G"] { background: #e32b26; color: #fff; }

/* Aperçu : la preuve (21/10/2026) : titre, identité, photo, maquette */
.apercu-titre-preuve { margin-top: 1.6rem; }
.apercu-chapo { margin: 0.3rem 0 0; color: var(--encre-douce); }
.apercu-intro-points { margin: 0.3rem 0 0; color: var(--encre-douce); }

/* Aperçu : la couverture */
.apercu-couverture { margin: 1.2rem 0 0.4rem; border-radius: var(--rayon); overflow: hidden;
  background: var(--fond-gris); border: 1px solid var(--bordure); aspect-ratio: 16 / 10; }
.apercu-couverture img { display: block; width: 100%; height: 100%; object-fit: cover; }
.apercu-legende { font-size: 0.82rem; color: #6b7690; margin: 0.3rem 0 0; }
.apercu-identite { font-size: 1.02rem; color: var(--encre); font-weight: 600; margin: 0.8rem 0 0; }

/* Aperçu : la maquette 3D (trois vues qui défilent) ou le plan de l'emprise.
   Une vue à la fois sur téléphone, deux sur ordinateur ; flèches et position
   pour le clavier et les lecteurs d'écran (adresse.js). */
.apercu-maquette { margin: 1.4rem 0 0; }
/* L'attribut `hidden` doit l'emporter sur les `display: flex` ci-dessous
   (sans cela, l'attente restait affichée à côté des vues). */
.apercu-maquette[hidden], .apercu-maquette [hidden] { display: none !important; }
.maquette-attente { display: flex; align-items: center; gap: 0.6rem; margin: 0; padding: 1rem 1.1rem;
  background: var(--fond-gris); border: 1px dashed var(--bordure); border-radius: var(--rayon);
  color: var(--encre-douce); font-size: 0.95rem; }
.maquette-defilement { display: flex; gap: 0.6rem; overflow-x: auto; scroll-snap-type: x mandatory;
  scroll-behavior: smooth; border-radius: var(--rayon); overscroll-behavior-x: contain; }
.maquette-defilement:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.maquette-vue { flex: 0 0 100%; scroll-snap-align: start; margin: 0; aspect-ratio: 720 / 504;
  background: #e9ecf2; border: 1px solid var(--bordure); border-radius: var(--rayon); overflow: hidden; }
.maquette-vue img { display: block; width: 100%; height: 100%; object-fit: cover; }
.maquette-commandes { display: flex; align-items: center; justify-content: center; gap: 0.8rem;
  margin: 0.5rem 0 0; }
.maquette-fleche { min-width: 2.75rem; min-height: 2.75rem; border-radius: 999px; font-size: 1.4rem;
  line-height: 1; border: 1px solid var(--bordure); background: #fff; color: var(--encre); cursor: pointer; }
.maquette-fleche:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }
.maquette-fleche:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.maquette-fleche:disabled { opacity: 0.4; cursor: default; }
.maquette-position { font-size: 0.9rem; color: var(--encre-douce); min-width: 6.5rem; text-align: center; }
.maquette-plan { margin: 0; }
.maquette-plan img { display: block; width: 100%; height: auto; border-radius: var(--rayon);
  border: 1px solid var(--bordure); background: #f4f2ec; }
.maquette-indisponible { margin: 0; font-size: 0.92rem; color: var(--encre-douce); }
@media (min-width: 641px) {
  .maquette-defilement:not([data-nombre="1"]) .maquette-vue { flex-basis: calc(50% - 0.3rem); }
}
@media (prefers-reduced-motion: reduce) {
  .maquette-defilement { scroll-behavior: auto; }
}

/* Aperçu : les quatre chiffres clés */
.chiffres-cles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.8rem; margin: 1.6rem 0 0; }
.chiffre-cle { background: #fff; border: 1px solid var(--bordure); border-radius: 10px; padding: 0.95rem 1.05rem;
  border-left-width: 5px; }
.chiffre-cle[data-ton="attention"] { border-left-color: #ea7b21; }
.chiffre-cle[data-ton="bonne"] { border-left-color: var(--succes); }
.chiffre-cle[data-ton="neutre"] { border-left-color: #9aa6bf; }
.chiffre-libelle { display: block; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.04em; color: #6b7690; font-weight: 600; }
.chiffre-valeur { display: block; font-size: 1.12rem; font-weight: 700; color: var(--encre); margin-top: 0.2rem; line-height: 1.3; overflow-wrap: anywhere; }
.chiffre-detail { display: block; font-size: 0.88rem; color: var(--encre-douce); margin-top: 0.25rem; }

.apercu-faits { margin: 1.4rem 0 0; padding: 0; list-style: none; display: grid; gap: 0.6rem; }
.apercu-faits li { background: var(--fond-gris); border-radius: 10px; padding: 0.8rem 1rem; color: var(--encre); }

/* Aperçu : le sommaire du rapport complet */
.sommaire-rapport { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.8rem; margin-top: 0.8rem; }
.sommaire-onglet { border: 1px dashed var(--bordure); border-radius: 10px; padding: 0.8rem 1rem; }
.sommaire-onglet h3 { font-size: 1rem; margin: 0 0 0.3rem; }
.sommaire-onglet ul { margin: 0; padding-left: 1.1rem; font-size: 0.9rem; }
.sommaire-onglet li { margin: 0.15rem 0; }
/* #55617a : 6,2:1 sur blanc (le gris #9aa6bf d'avant n'atteignait que 2,45:1). */
.sommaire-onglet .verrou { color: #55617a; font-size: 0.85rem; }
.sommaire-compte { margin: 0.8rem 0 0; color: var(--encre-douce); }
/* Ce que l'aperçu a déjà repéré pour la section : #1d3f8f sur #eef3ff, 9:1. */
.sommaire-signal { display: inline-block; margin: 0.1rem 0 0 0.25rem; padding: 0 0.5rem;
  border-radius: 999px; background: #eef3ff; color: #1d3f8f; font-size: 0.8rem; font-weight: 600;
  line-height: 1.6; }

/* Commande */
.commande { margin-top: 2rem; }
/* Retour sur #commande ou #invitation après un message d'erreur : l'en-tête
   collant (64 px) ne doit pas masquer le haut du bloc. */
.commande, .commande .invitation { scroll-margin-top: 5rem; }
.commande .champ { margin-bottom: 1rem; }
/* Case d'accord (exécution immédiate) : phrase longue avec un lien, enveloppée
   dans un <span> pour se lire d'un seul tenant à droite de la case ; la case
   reste alignée sur la première ligne. */
.commande .case-accord { align-items: flex-start; margin-bottom: 1rem; line-height: 1.45; }
.commande .case-accord input { margin-top: 0.2rem; }
.commande-note { font-size: 0.88rem; color: #6b7690; margin: 0.6rem 0 0; }
.commande .invitation { margin-top: 1.2rem; }
.commande .invitation > summary { cursor: pointer; color: #6b7690; font-size: 0.92rem; }
.commande .invitation-ligne { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-top: 0.4rem; align-items: flex-end; }
.commande .invitation-champ { flex: 1 1 12rem; }
.commande .invitation-champ label { display: block; font-size: 0.88rem; font-weight: 600; color: var(--encre); margin-bottom: 0.25rem; }
.commande .invitation-ligne input { width: 100%; padding: 0.6rem 0.75rem; border: 1px solid var(--bordure); border-radius: 8px; font: inherit; }
.encart-alerte { background: #fff4e5; border: 1px solid #f2dfae; }

/* Fin d'un rapport offert : l'invitation à laisser un avis */
.avis-libre { margin: 2rem 0 0; }
.avis-libre .avis-liens { display: flex; gap: 0.6rem; flex-wrap: wrap; margin-top: 0.6rem; }

@media (max-width: 640px) {
  .porte-adresse { padding-top: 1.4rem; }
  .questions-logement { grid-template-columns: 1fr; }
  .chiffres-cles, .sommaire-rapport { grid-template-columns: 1fr; }
  .choix-type.deux { grid-template-columns: 1fr 1fr; }
  .commande .bouton-grand { width: 100%; }
}

@media print {
  .commande, .porte-lien-discret, .maquette-commandes, .maquette-attente { display: none; }
  .maquette-defilement { flex-wrap: wrap; overflow: visible; }
}