/* ============================================================
   IdentiBien — feuille de style unique (pas de framework)
   Palette : bleu nuit (confiance) + accent cuivre (action)
   ============================================================ */

:root {
  --encre: #16233b;          /* Bleu nuit : titres, en-tête */
  --encre-douce: #44506a;    /* Texte courant */
  --accent: #2563eb;         /* Bleu action : boutons, liens */
  --accent-fonce: #1d4ed8;
  --succes: #0f9d58;
  --erreur: #d93025;
  --fond: #ffffff;
  --fond-gris: #f4f6fb;
  --bordure: #dde3ef;
  --rayon: 12px;
  --ombre: 0 10px 30px rgba(22, 35, 59, 0.08);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color: var(--encre-douce);
  background: var(--fond);
  line-height: 1.6;
  font-size: 16px;
}

h1, h2, h3, h4 { color: var(--encre); line-height: 1.25; margin: 0 0 0.6em; }
h1 { font-size: clamp(1.8rem, 4vw, 2.6rem); }
h2 { font-size: clamp(1.4rem, 3vw, 1.9rem); }
h3 { font-size: 1.15rem; }
a { color: var(--accent); }
code { background: var(--fond-gris); padding: 2px 6px; border-radius: 4px; font-size: 0.85em; }

.conteneur { max-width: 1080px; margin: 0 auto; padding: 0 1.25rem; }
.centre { text-align: center; }
.sous-titre { font-size: 1.08rem; color: var(--encre-douce); max-width: 620px; }
.sous-titre.centre { margin-left: auto; margin-right: auto; }
.section { padding: 4.5rem 0; }
.section-grise { background: var(--fond-gris); }
.section-etroite { max-width: 760px; margin: 0 auto; padding-left: 1.25rem; padding-right: 1.25rem; }

/* ---------- En-tête ---------- */
.entete {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--bordure);
}
.entete-nav { display: flex; align-items: center; justify-content: space-between; height: 64px; }
/* Logo : pictogramme + nom en deux tons, taille nettement au-dessus des liens
   de navigation. Le nom s'assume : « on dirait qu'on a honte du nom » est le
   défaut exact que ce bloc corrige. */
.logo {
  display: inline-flex; align-items: center; gap: 0.55rem;
  font-weight: 800; font-size: 1.35rem; letter-spacing: -0.02em;
  color: var(--encre); text-decoration: none;
}
.logo-picto { width: 30px; height: 30px; flex: 0 0 auto; }
.logo-bien { color: var(--accent); }
.entete-liens { display: flex; align-items: center; gap: 1.4rem; }
.entete-liens a { color: var(--encre-douce); text-decoration: none; font-weight: 500; font-size: 0.95rem; }
.entete-liens a:hover { color: var(--encre); }

/* ---------- Boutons ---------- */
.bouton {
  display: inline-block; text-decoration: none; text-align: center;
  border-radius: 10px; border: 1px solid transparent; cursor: pointer;
  font: inherit; font-weight: 600; padding: 0.7rem 1.4rem;
  transition: background 0.15s, transform 0.1s;
}
.bouton:active { transform: translateY(1px); }
.bouton-principal { background: var(--accent); color: #fff !important; }
.bouton-principal:hover { background: var(--accent-fonce); }
.bouton-secondaire { background: #fff; color: var(--encre); border-color: var(--bordure); }
.bouton-secondaire:hover { border-color: var(--encre-douce); }

/* Bouton de paiement : libellé et prix nettement séparés par un filet —
   pas de ponctuation de fortune (tiret, flèche) au moment de payer. */
.bouton-payer { display: inline-flex; align-items: center; gap: 0.85rem; }
.bouton-payer-prix {
  border-left: 1px solid rgba(255, 255, 255, 0.4);
  padding-left: 0.85rem; font-weight: 800; white-space: nowrap;
}

/* Bouton visible mais inopérant : signale qu'une fonction EXISTE sans la
   proposer (ex. identification du propriétaire, réservée aux maisons). Un
   bouton grisé se comprend d'un coup d'œil, là où une phrase se lit rarement. */
.bouton-inactif {
  opacity: 0.45; cursor: not-allowed; pointer-events: none;
  background: var(--fond-gris); color: var(--encre-douce);
}
.bouton-grand { padding: 0.9rem 1.8rem; font-size: 1.05rem; }
.bouton-petit { padding: 0.45rem 1rem; font-size: 0.9rem; }

/* ---------- Héro ---------- */
.hero {
  background: linear-gradient(160deg, #f6f8fd 0%, #eef2fb 55%, #e7edfa 100%);
  padding: 4.5rem 0 5rem;
}
.hero-grille { display: grid; grid-template-columns: 1.2fr 1fr; gap: 3rem; align-items: center; }
.badge {
  display: inline-block; background: #e4ecff; color: var(--accent-fonce);
  font-weight: 600; font-size: 0.82rem; padding: 0.3rem 0.85rem;
  border-radius: 999px; margin-bottom: 1.1rem;
}
.hero-promesse { font-size: 1.25rem; color: var(--encre); margin: 0.4rem 0 0.8rem; }
.hero-texte { max-width: 540px; }
.hero-actions { display: flex; gap: 0.9rem; flex-wrap: wrap; margin: 1.6rem 0 1.4rem; }
.hero-preuves { list-style: none; padding: 0; margin: 0; font-size: 0.94rem; }
.hero-preuves li { margin: 0.3rem 0; }

/* Fausse carte de résultat dans le héro */
.carte-demo {
  background: #fff; border-radius: var(--rayon); box-shadow: var(--ombre);
  padding: 1.4rem; border: 1px solid var(--bordure); max-width: 360px; margin-left: auto;
}
.carte-demo-ligne {
  display: flex; justify-content: space-between; gap: 1rem;
  padding: 0.55rem 0; border-bottom: 1px solid var(--fond-gris); font-size: 0.95rem;
}
.carte-demo-titre { font-weight: 700; color: var(--encre); font-size: 1.05rem; }
.carte-demo-ligne strong { color: var(--succes); }
/* Caviardage graphique de l'aperçu avant paiement (page de confirmation) :
   blocs de longueur FIXE, identiques pour tous les dossiers — ils ne
   trahissent ni la longueur du nom de voie, ni son type, ni le numéro. */
.adresse-caviardee { color: var(--encre); display: inline-flex; align-items: center; gap: 0.35rem; }
.caviarde {
  display: inline-block; height: 0.95em; border-radius: 3px;
  background: repeating-linear-gradient(90deg, var(--encre) 0 14px, #31405f 14px 19px);
}
.caviarde-numero { width: 2em; }
.caviarde-voie { width: 9em; max-width: 34vw; }

/* Dé-caviardage animé de l'adresse d'exemple : le cache noir se retire par
   balayage et révèle l'adresse complète (numéro compris), reste lisible
   quelques secondes, puis se referme en fondu. Boucle de 9 s. */
.adresse-demo { position: relative; color: var(--encre); }
.adresse-vraie { display: inline-block; animation: adresse-nette 9s ease-in-out infinite; }
.adresse-cache {
  position: absolute; inset: 1px -4px; border-radius: 4px;
  background: repeating-linear-gradient(90deg, var(--encre) 0 14px, #31405f 14px 19px);
  animation: decaviardage 9s ease-in-out infinite;
}
@keyframes decaviardage {
  0%, 38% { clip-path: inset(0 0 0 0); opacity: 1; }      /* caviardé */
  52%     { clip-path: inset(0 0 0 100%); opacity: 1; }   /* balayage vers la droite */
  90%     { clip-path: inset(0 0 0 100%); opacity: 0; }   /* adresse lisible */
  91%     { clip-path: inset(0 0 0 0); opacity: 0; }
  100%    { clip-path: inset(0 0 0 0); opacity: 1; }      /* le cache revient en fondu */
}
@keyframes adresse-nette {
  0%, 40%  { filter: blur(4px); }
  54%, 92% { filter: blur(0); }
  100%     { filter: blur(4px); }
}

/* Légère lévitation de la carte de démonstration : du mouvement, sans distraire. */
.carte-demo { animation: levitation 7s ease-in-out infinite alternate; }
@keyframes levitation { from { transform: translateY(0); } to { transform: translateY(-9px); } }

/* Entrée en douceur des deux colonnes du héro au chargement. */
.hero-grille > div { animation: apparition 0.55s ease-out both; }
.hero-grille > div + div { animation-delay: 0.12s; }
@keyframes apparition { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.carte-demo-cta {
  border: none; justify-content: center; margin-top: 0.7rem;
  background: var(--accent); color: #fff; border-radius: 8px; font-weight: 600;
  padding: 0.6rem 1rem;
}

/* ---------- Grilles et cartes ---------- */
.grille-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4rem; margin-top: 2.2rem; }
.grille-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.4rem; margin-top: 2.2rem; }
.carte {
  background: #fff; border: 1px solid var(--bordure);
  border-radius: var(--rayon); padding: 1.8rem;
}
/* Relief au survol des cartes de la landing : un peu de vie sous le curseur. */
.etape, .tarif { transition: transform 0.2s ease, box-shadow 0.2s ease; }
.etape:hover, .tarif:hover { transform: translateY(-4px); box-shadow: 0 16px 40px rgba(22, 35, 59, 0.13); }

/* ---------- Onglets du back-office ----------
   Une seule barre, identique sur toutes les pages. Avant, chaque page portait
   ses propres liens vers les autres et la déconnexion n'existait qu'au tableau
   de bord : passer des partenaires aux invitations imposait un détour.
   L'onglet actif est souligné plutôt que coloré en aplat : la page est déjà
   dense, un repère discret suffit à situer où l'on est. */
.admin-onglets {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap;
  border-bottom: 1px solid var(--bordure); margin-bottom: 1.6rem;
}
.admin-onglets ul {
  display: flex; gap: 0.3rem; flex-wrap: wrap;
  list-style: none; margin: 0; padding: 0;
}
.admin-onglets a {
  display: block; padding: 0.7rem 1.1rem;
  color: var(--encre-douce); text-decoration: none; font-weight: 600;
  /* Bordure présente dès l'état inactif, en transparent : sans elle, l'onglet
     actif serait plus haut que les autres et la barre sauterait au survol. */
  border-bottom: 3px solid transparent; margin-bottom: -1px;
}
.admin-onglets a:hover { color: var(--encre); background: rgba(37, 99, 235, 0.05); }
.admin-onglets a.actif { color: var(--encre); border-bottom-color: #2563eb; }
.admin-onglets-sortie { margin: 0 0 0.5rem; }

/* Tableau du back-office (statistiques). `overflow-x` sur l'enveloppe : sur un
   écran étroit, c'est le tableau qui défile, jamais la page entière. */
.tableau-admin {
  width: 100%; border-collapse: collapse; background: #fff;
  border: 1px solid var(--bordure); border-radius: var(--rayon);
  overflow: hidden; font-size: 0.92rem;
}
.tableau-admin th, .tableau-admin td {
  padding: 0.6rem 0.8rem; text-align: left;
  border-bottom: 1px solid var(--bordure);
}
.tableau-admin th {
  background: var(--fond-gris); font-weight: 500; color: var(--encre-douce);
  font-size: 0.85rem;
}
.tableau-admin tr:last-child td { border-bottom: none; }
.tableau-admin td:not(:first-child), .tableau-admin th:not(:first-child) {
  text-align: right;
}
.etape { box-shadow: var(--ombre); }
.etape-numero {
  width: 42px; height: 42px; border-radius: 50%;
  background: var(--encre); color: #fff; font-weight: 700; font-size: 1.15rem;
  display: flex; align-items: center; justify-content: center; margin-bottom: 1rem;
}

/* ---------- Tarifs ---------- */
.grille-tarifs { max-width: 860px; margin-left: auto; margin-right: auto; }

/* Bandeau vertical sur la carte « recherche approfondie ».

   Deux cartes de même taille se lisent comme un comparatif de forfaits ; ce
   bandeau est ce qui empêche cette lecture. Il est HORS DU FLUX (position
   absolue) : posé dans le flux, il décalait tout le contenu de sa carte vers le
   bas, et les prix comme les mentions vertes ne s'alignaient plus d'une carte à
   l'autre. Ce défaut d'alignement est ce qui a motivé cette forme. */
.tarif-conditionnel { padding-left: 3.7rem; }

.tarif-declencheur {
  position: absolute; left: 0; top: 0; bottom: 0; width: 2.5rem;
  margin: 0;
  display: flex; align-items: center; justify-content: center;
  /* Le fond reste volontairement pâle : ce bandeau doit se remarquer sans
     crier, il informe d'une condition, il ne vend rien. La lisibilité vient
     donc du TEXTE (taille, contraste, interlettrage) et non du fond, un texte
     vertical se déchiffrant moins vite qu'une ligne ordinaire. */
  background: #eef2ff; color: #2b3563;
  /* Lecture de bas en haut : le sens naturel pour un bandeau latéral gauche,
     la tête penchant vers la gauche. */
  writing-mode: vertical-rl; transform: rotate(180deg);
  font-size: 0.86rem; font-weight: 700; letter-spacing: 0.045em;
  text-align: center;
  /* Épouse les coins arrondis de la carte, côté gauche uniquement. */
  border-radius: var(--rayon) 0 0 var(--rayon);
}

/* Sous 560 px les cartes s'empilent et se resserrent : le bandeau mangerait
   une part trop visible de la largeur. Il redevient une étiquette horizontale,
   et la question de l'alignement ne se pose plus puisque les cartes ne sont
   plus côte à côte. */
@media (max-width: 560px) {
  .tarif-conditionnel { padding-left: 1.8rem; }
  .tarif-declencheur {
    position: static; width: auto; display: inline-block;
    writing-mode: horizontal-tb; transform: none;
    padding: 0.25rem 0.6rem; margin: 0 0 0.5rem;
    border-radius: 999px;
  }
}
.tarif { display: flex; flex-direction: column; }
.tarif-prix { font-size: 2.6rem; font-weight: 800; color: var(--encre); margin: 0.2rem 0 0; }
.tarif-condition { color: var(--succes); font-weight: 600; margin: 0.2rem 0 1rem; }
.liste-coches { list-style: none; padding: 0; margin: 0 0 1.6rem; flex: 1; }
/* Tarif de lancement : petit tampon encré à côté du prix, légèrement de
   travers comme un coup de tampon. Discret : le prix reste le héros. */
.tarif { position: relative; }
.tampon-lancement {
  display: inline-block; vertical-align: middle; margin-left: 0.6rem;
  transform: rotate(-7deg);
  border: 2px solid #c07a12; color: #a2660f; border-radius: 6px;
  padding: 0.12rem 0.45rem;
  font-size: 0.7rem; font-weight: 800; letter-spacing: 0.03em;
  text-transform: uppercase; line-height: 1.35; opacity: 0.9;
  white-space: nowrap;
}

/* Bouton unique sous les deux cartes de tarifs : un seul chemin d'entrée. */
.tarifs-action { margin-top: 2.4rem; }
.tarifs-note { font-size: 0.92rem; color: #6b7690; max-width: 480px; margin: 0.8rem auto 0; }
.liste-coches li { padding: 0.35rem 0 0.35rem 1.6rem; position: relative; font-size: 0.96rem; }
.liste-coches li::before { content: "✔"; position: absolute; left: 0; color: var(--succes); font-weight: 700; }
/* Variante compacte sous un bouton de paiement : remplace le paragraphe dense. */
.aide-incluse { margin: 1rem 0 0.2rem; font-size: 0.92rem; color: var(--encre-douce); }
.aide-incluse li { padding: 0.22rem 0 0.22rem 1.5rem; }
.paiement-note { margin-top: 0.8rem; }

/* ---------- FAQ ---------- */
.faq-item {
  border: 1px solid var(--bordure); border-radius: 10px;
  margin-top: 0.8rem; background: #fff; overflow: hidden;
}
.faq-item summary {
  cursor: pointer; font-weight: 600; color: var(--encre);
  padding: 1rem 1.2rem; list-style: none; position: relative;
}
.faq-item summary::after { content: "+"; position: absolute; right: 1.2rem; font-size: 1.3rem; color: var(--accent); }
.faq-item[open] summary::after { content: "–"; }
.faq-item p { padding: 0 1.2rem 1.1rem; margin: 0; }

/* ---------- Pied de page ---------- */
.pied { background: var(--encre); color: #c4cde0; margin-top: 2rem; }
.pied-grille { display: grid; grid-template-columns: 1.5fr 1fr 1fr; gap: 2rem; padding: 3rem 1.25rem 1.5rem; }
.pied h4 { color: #fff; margin-bottom: 0.7rem; }
.pied a { display: block; color: #c4cde0; text-decoration: none; margin: 0.35rem 0; font-size: 0.94rem; }
.pied a:hover { color: #fff; }
.logo-pied { color: #fff; }
.logo-pied .logo-bien { color: #93b4f8; } /* « Bien » lisible sur le fond bleu nuit */
.pied-texte { font-size: 0.9rem; }
.pied-bas { border-top: 1px solid rgba(255,255,255,0.12); padding: 1.1rem 1.25rem; font-size: 0.85rem; }

/* ---------- Formulaire multi-étapes ---------- */
.etapes-barre {
  display: flex; justify-content: center; gap: 2.2rem;
  list-style: none; padding: 0; margin: 2.2rem 0 1.4rem;
}
.etapes-barre-item { display: flex; align-items: center; gap: 0.5rem; color: var(--encre-douce); font-size: 0.92rem; font-weight: 500; }
.etapes-barre-item span {
  width: 30px; height: 30px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--fond-gris); border: 1px solid var(--bordure); font-weight: 700;
}
.etapes-barre-item.actif { color: var(--encre); }
.etapes-barre-item.actif span { background: var(--accent); border-color: var(--accent); color: #fff; }
.etapes-barre-item.fait span { background: var(--succes); border-color: var(--succes); color: #fff; }

.formulaire { box-shadow: var(--ombre); }
fieldset.etape-panneau { border: none; padding: 0; margin: 0; }
/* Espacement entre champs : c'est lui qui fait lire la page comme une suite de
   blocs distincts. À 1,3 rem, le titre d'un champ se collait à l'aide du champ
   précédent et les parties se confondaient. */
.champ { margin-bottom: 1.9rem; }
.champ label, .champ .label { display: block; font-weight: 600; color: var(--encre); margin-bottom: 0.4rem; }
.champ abbr { color: var(--erreur); text-decoration: none; }
/* `url` et `date` manquaient : ces champs restaient à la largeur par défaut du
   navigateur, ridiculement étroite à côté des autres (lien d'annonce). */
.champ input[type="text"], .champ input[type="email"], .champ input[type="number"],
.champ input[type="url"], .champ input[type="date"],
.champ textarea, .champ input[type="file"] {
  width: 100%; padding: 0.7rem 0.9rem; font: inherit;
  border: 1px solid var(--bordure); border-radius: 8px; background: #fff;
}
.champ input:focus, .champ textarea:focus { outline: 2px solid var(--accent); border-color: transparent; }
.champ input.invalide, .champ select.invalide { border-color: var(--erreur); }

/* Aperçu d'un texte d'exemple DANS la zone de saisie (survol des liens
   d'exemples) : style nettement distinct de la saisie réelle, qui est
   stockée et restaurée dès la fin du survol. */
.champ textarea.apercu-exemple { color: #8a93a8; font-style: italic; background: var(--fond-gris); }

/* Case à cocher sous un champ (ex. « mon annonce n'est pas en ligne »).
   Sélecteur volontairement plus précis que `.champ label` : sans cela, la
   case héritait du gras et de la couleur des LIBELLÉS, et pesait visuellement
   autant que le titre du champ suivant. Une option secondaire doit se lire
   comme telle. */
.champ label.case-a-cocher, label.case-a-cocher {
  display: flex; align-items: center; gap: 0.5rem;
  margin: 0.55rem 0 0; font-size: 0.9rem; font-weight: 400;
  color: var(--encre-douce); cursor: pointer;
}
.case-a-cocher input {
  width: 16px; height: 16px; flex: 0 0 auto; accent-color: var(--accent);
}
.aide { font-size: 0.86rem; color: #6b7690; margin: 0.35rem 0 0; }
.grille-champs { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1.4rem; }

/* Choix du type de bien en cartes */
.choix-type { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.8rem; }
.choix-carte input { position: absolute; opacity: 0; }
.choix-carte span {
  display: block; text-align: center; padding: 1rem 0.5rem;
  border: 1.5px solid var(--bordure); border-radius: 10px; cursor: pointer;
  font-weight: 600; color: var(--encre); font-size: 0.95rem;
}
.choix-carte input:checked + span { border-color: var(--accent); background: #eef3ff; }
.choix-carte input:focus-visible + span { outline: 2px solid var(--accent); }

/* Autocomplete commune */
.autocomplete-conteneur { position: relative; }
.autocomplete-liste {
  position: absolute; top: 100%; left: 0; right: 0; z-index: 20;
  background: #fff; border: 1px solid var(--bordure); border-radius: 8px;
  margin: 4px 0 0; padding: 0.3rem; list-style: none; box-shadow: var(--ombre);
  max-height: 260px; overflow-y: auto;
}
.autocomplete-liste li { padding: 0.55rem 0.8rem; border-radius: 6px; cursor: pointer; }
.autocomplete-liste li:hover, .autocomplete-liste li.survol { background: var(--fond-gris); }
.autocomplete-liste li small { color: #6b7690; }
/* Avertissement homonymes : ce n'est PAS une suggestion cliquable — on le
   distingue nettement pour qu'il ne soit ni pris pour une commune, ni ignoré. */
.autocomplete-liste li.autocomplete-alerte {
  background: #fff8e6; border: 1px solid #f2dfae; cursor: default;
  font-size: 0.86rem; color: #7a5c12; margin-bottom: 0.3rem;
}
.autocomplete-liste li.autocomplete-alerte:hover { background: #fff8e6; }

/* Historique des déclarations (page de dossier) */
.historique-declarations {
  list-style: none; padding: 0; margin: 0.6rem 0 0;
  border-left: 2px solid var(--bordure);
}
.historique-declarations li {
  position: relative; padding: 0.45rem 0 0.45rem 1rem;
  font-size: 0.92rem; color: #4a5468;
}
.historique-declarations li::before {
  content: ""; position: absolute; left: -5px; top: 0.95rem;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--accent);
}

/* Encarts d'aide */
.encart { border-radius: 10px; padding: 1rem 1.2rem; margin: 1.2rem 0; font-size: 0.95rem; }
.encart-dpe { background: #fff8e6; border: 1px solid #f2dfae; }
.encart-dpe p { margin: 0.4rem 0 0; }
.encart-info { background: #eef3ff; border: 1px solid #cdddfb; margin-top: 1.8rem; }

/* Aperçu des photos : vignettes avec bouton de suppression */
.photos-apercu { display: flex; gap: 0.6rem; flex-wrap: wrap; margin-top: 0.7rem; }
.photo-vignette { position: relative; width: 86px; height: 86px; }
.photo-vignette img {
  width: 86px; height: 86px; object-fit: cover;
  border-radius: 8px; border: 1px solid var(--bordure);
}
.photo-suppr {
  position: absolute; top: -7px; right: -7px;
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--erreur); color: #fff; border: 2px solid #fff;
  font-size: 0.95rem; line-height: 1; cursor: pointer; padding: 0;
  display: flex; align-items: center; justify-content: center;
}
.photo-suppr:hover { background: #b3251b; }

/* Blocs énergie / climat du DPE */
.dpe-bloc { border: 1px solid var(--bordure); border-radius: 10px; padding: 0.4rem 1rem 0.9rem; margin: 0.8rem 0; }
.dpe-bloc legend { font-weight: 600; color: var(--encre); padding: 0 0.4rem; font-size: 0.95rem; }
.champ select { width: 100%; padding: 0.7rem 0.9rem; font: inherit; border: 1px solid var(--bordure); border-radius: 8px; background: #fff; }

/* ---------- Échelle d'étiquette (énergie / climat) ----------
   On reprend les couleurs de l'étiquette officielle que le client a sous les
   yeux dans l'annonce : vert vers rouge pour l'énergie, violet clair vers
   violet foncé pour le climat. Largeurs ÉGALES et hauteur légèrement
   croissante : l'escalier réel rendrait le A minuscule et le G énorme, donc
   pénible à viser sur un téléphone. */
.champ-etiquette { margin-top: 1.1rem; }
.etiquette-echelle { display: flex; gap: 4px; align-items: flex-end; }
.etiquette-case { flex: 1; cursor: pointer; }
.etiquette-case input { position: absolute; opacity: 0; width: 0; height: 0; }
.etiquette-case span {
  display: flex; align-items: center; justify-content: center;
  border-radius: 8px; border: 1px solid rgba(22, 35, 59, 0.12);
  font-weight: 700; font-size: 1rem; user-select: none;
  transition: transform 0.12s, box-shadow 0.12s;
}
.etiquette-case:hover span { transform: translateY(-2px); }
/* Sélection : liseré sombre + léger soulèvement, lisibles sur toutes les
   teintes de l'échelle (un simple changement de fond serait invisible). */
.etiquette-case input:checked + span {
  outline: 3px solid var(--encre); outline-offset: 2px; transform: translateY(-3px);
}
.etiquette-case input:focus-visible + span { outline: 3px solid var(--accent); outline-offset: 2px; }

/* Hauteurs croissantes : l'escalier, en restant tous cliquables. */
.case-a span { height: 38px; }
.case-b span { height: 42px; }
.case-c span { height: 46px; }
.case-d span { height: 50px; }
.case-e span { height: 54px; }
.case-f span { height: 58px; }
.case-g span { height: 62px; }

/* Énergie : dégradé officiel vert → rouge */
.echelle-energie .case-a span { background: #319834; color: #fff; }
.echelle-energie .case-b span { background: #5fb733; color: #fff; }
.echelle-energie .case-c span { background: #a8ce39; color: #173404; }
.echelle-energie .case-d span { background: #f3e600; color: #412402; }
.echelle-energie .case-e span { background: #f0b310; color: #412402; }
.echelle-energie .case-f span { background: #ea7b21; color: #4a1b0c; }
.echelle-energie .case-g span { background: #e32b26; color: #fff; }

/* Climat : dégradé officiel violet clair → violet foncé */
.echelle-climat .case-a span { background: #f2eaf7; color: #3c3489; }
.echelle-climat .case-b span { background: #dcc9ea; color: #3c3489; }
.echelle-climat .case-c span { background: #c4a7dc; color: #26215c; }
.echelle-climat .case-d span { background: #a886cc; color: #26215c; }
.echelle-climat .case-e span { background: #8b64bc; color: #fff; }
.echelle-climat .case-f span { background: #6f44a6; color: #fff; }
.echelle-climat .case-g span { background: #53278c; color: #fff; }

/* Échappatoire explicite, séparée de l'échelle : aucune adjacence avec une
   vraie classe, donc aucun « je ne sais pas » transformé en G. */
.etiquette-absente { margin-top: 0.65rem; }
/* Groupe signalé en erreur par les contrôles de cohérence. */
.etiquette-echelle.invalide {
  outline: 2px solid var(--erreur); outline-offset: 4px; border-radius: 10px;
}

/* Seconde issue d'une recherche non aboutie : gratuite, donc présentée
   sobrement à côté de l'action payante. */
.actions-secondaires {
  display: flex; align-items: center; gap: 0.9rem; flex-wrap: wrap;
  margin-top: 1.2rem;
}

/* Numéros d'étapes cliquables */
.etapes-barre-item[role="button"] { cursor: pointer; }
.etapes-barre-item.fait span { }
kbd { background: #eef1f7; border: 1px solid var(--bordure); border-radius: 4px; padding: 1px 5px; font-size: 0.82em; }

/* Type de bien sur 2 colonnes (le Terrain n'est pas proposé) */
.choix-type-2 { grid-template-columns: repeat(2, 1fr); }

/* Sous-titre de section dans le formulaire */
.sous-titre-champ { font-weight: 600; color: var(--encre); margin: 1.2rem 0 0.4rem; }

/* Exemple gris dans un libellé + info-bulle */
.aide-inline { font-weight: 400; color: #8a93a8; font-size: 0.9rem; }
.infobulle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 17px; height: 17px; border-radius: 50%; background: var(--fond-gris);
  border: 1px solid var(--bordure); color: var(--encre-douce);
  font-size: 0.72rem; cursor: help; position: relative; vertical-align: middle;
}
.infobulle::after {
  content: attr(data-info); position: absolute; bottom: 135%; left: 50%; transform: translateX(-50%);
  width: 220px; background: var(--encre); color: #fff; padding: 0.55rem 0.7rem; border-radius: 8px;
  font-size: 0.8rem; line-height: 1.4; font-weight: 400; text-align: left;
  opacity: 0; visibility: hidden; transition: opacity 0.15s; z-index: 30; pointer-events: none;
}
.infobulle:hover::after, .infobulle:focus::after { opacity: 1; visibility: visible; }

/* Liens d'exemples subtils (survol → placeholder) */
.exemples-liens { margin: 0.2rem 0 0.5rem; }
.exemple-lien {
  color: var(--accent); cursor: pointer; border-bottom: 1px dotted var(--accent);
}
.exemple-lien:hover, .exemple-lien:focus { color: var(--accent-fonce); border-bottom-style: solid; outline: none; }

.formulaire-navigation { display: flex; justify-content: space-between; margin-top: 1.6rem; }
.message-erreur { color: var(--erreur); font-weight: 600; margin-top: 1rem; }

/* ---------- Confirmation ---------- */
.carte-confirmation { box-shadow: var(--ombre); }
.pastille-succes {
  width: 54px; height: 54px; border-radius: 50%;
  background: var(--succes); color: #fff; font-size: 1.7rem; font-weight: 700;
  display: flex; align-items: center; justify-content: center; margin-bottom: 1rem;
}
.recap-titre { font-size: 1.1rem; margin-top: 2rem; }
.recap { margin: 0.8rem 0 0; }
.recap > div {
  display: flex; justify-content: space-between; gap: 1.5rem;
  padding: 0.55rem 0; border-bottom: 1px solid var(--fond-gris);
}
.recap dt { color: #6b7690; }
.recap dd { margin: 0; font-weight: 600; color: var(--encre); text-align: right; }

.erreur-code { font-size: 4rem; font-weight: 800; color: var(--bordure); margin: 0; }

/* ---------- Révélation ---------- */
.revelation-adresse {
  background: #eefbf3; border: 1px solid #bfe8cf; border-radius: 10px;
  padding: 1.1rem 1.3rem; margin: 1.4rem 0;
}
.revelation-libelle {
  text-transform: uppercase; letter-spacing: 0.06em;
  font-size: 0.78rem; font-weight: 700; color: var(--succes);
}
.revelation-valeur {
  font-size: 1.45rem; font-weight: 800; color: var(--encre); margin: 0.25rem 0 0;
}

/* ---------- Rapport de due diligence ---------- */
.rapport-entete { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; }
.rapport-adresse { font-size: 1.2rem; font-weight: 700; color: var(--encre); margin: 0.2rem 0; }
.rapport-section {
  background: #fff; border: 1px solid var(--bordure); border-left-width: 5px;
  border-radius: 10px; padding: 1.3rem 1.5rem; margin: 1.2rem 0;
}
.niveau-bord-vert { border-left-color: var(--succes); }
.niveau-bord-orange { border-left-color: #e8a33d; }
.niveau-bord-rouge { border-left-color: var(--erreur); }
.niveau-bord-neutre { border-left-color: var(--bordure); }
.rapport-indispo { background: var(--fond-gris); border-left-color: var(--bordure); }
.rapport-section-tete { display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.rapport-section-tete h2 { margin: 0; font-size: 1.2rem; }
.niveau {
  display: inline-block; font-size: 0.78rem; font-weight: 700; padding: 0.25rem 0.7rem;
  border-radius: 999px; white-space: nowrap;
}
.niveau-vert { background: #e3f6eb; color: #0f7a43; }
.niveau-orange { background: #fdf0dc; color: #a2660f; }
.niveau-rouge { background: #fde8e8; color: #b42318; }
.niveau-neutre { background: #eef1f7; color: #55617a; }
.rapport-alertes { margin: 0.6rem 0 0; padding-left: 1.2rem; }
.rapport-alertes li { margin: 0.3rem 0; }
.rapport-brut {
  background: var(--fond-gris); border-radius: 8px; padding: 0.9rem;
  overflow-x: auto; font-size: 0.82rem; max-height: 320px;
}

@media print {
  .entete, .pied, .bouton { display: none !important; }
  .rapport-section { break-inside: avoid; box-shadow: none; }
  body { font-size: 12px; }
}

/* ---------- Pages légales ---------- */
.legal h2 { font-size: 1.2rem; margin-top: 2rem; }
.legal p, .legal li { color: var(--encre-douce); }
.legal ul { padding-left: 1.3rem; }
.legal li { margin: 0.35rem 0; }

/* ---------- Bandeau cookies ---------- */
.bandeau-cookies {
  position: fixed; left: 1rem; right: 1rem; bottom: 1rem; z-index: 100;
  max-width: 720px; margin: 0 auto;
  background: #fff; border: 1px solid var(--bordure); border-radius: 12px;
  box-shadow: var(--ombre); padding: 1rem 1.2rem;
  display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
}
/* L'attribut hidden doit l'emporter sur le display:flex ci-dessus, sinon le
   bandeau ne se ferme jamais (le « J'ai compris » resterait sans effet). */
.bandeau-cookies[hidden] { display: none; }
.bandeau-cookies p { margin: 0; flex: 1; min-width: 240px; font-size: 0.9rem; }
.bandeau-cookies .bouton { white-space: nowrap; }
/* Bandeau de consentement : disposition en colonne (refus en haut à droite,
   texte, puis les deux boutons pleine largeur). Le bandeau d'INFORMATION, lui,
   garde la disposition horizontale héritée de `.bandeau-cookies`. */
.bandeau-consentement { display: block; }
.bandeau-consentement p { margin: 0.2rem 0 0; }
.bandeau-haut { display: flex; justify-content: flex-end; }
.bandeau-boutons {
  display: flex; gap: 0.7rem; flex-wrap: wrap; margin-top: 1rem;
}
.bandeau-boutons .bouton { flex: 1 1 200px; justify-content: center; text-align: center; }

/* Refus présenté en LIEN et non en bouton (arbitrage Meven du 13/08/2026, sur
   le modèle des grands sites français). Ce qui compte juridiquement est
   préservé : un seul clic, au premier niveau, sans écran intermédiaire.
   La hauteur de 44 px est délibérée — un lien trop petit pour être atteint au
   pouce recréerait par la physique la friction que la loi interdit, et c'est
   exactement ce qu'un contrôle regarderait. */
.bandeau-consentement .lien-refus {
  background: none; border: none; padding: 0 0.2rem;
  min-height: 44px; display: inline-flex; align-items: center;
  color: var(--encre-douce); font-size: 0.82rem; font-family: inherit;
  text-decoration: underline; cursor: pointer; white-space: nowrap;
}
.bandeau-consentement .lien-refus:hover,
.bandeau-consentement .lien-refus:focus-visible { color: var(--encre); }

/* ---------- Responsive ---------- */
@media (max-width: 860px) {
  .hero-grille { grid-template-columns: 1fr; }
  .hero-illustration { display: none; }
  .grille-3, .grille-2 { grid-template-columns: 1fr; }
  .grille-champs { grid-template-columns: 1fr; }
  .pied-grille { grid-template-columns: 1fr; }
  .entete-liens a:not(.bouton) { display: none; }
  .etapes-barre { gap: 1rem; }
  .etapes-barre-item { font-size: 0.8rem; }
  /* Sept pastilles sur une largeur de téléphone : on récupère les marges
     internes du bloc pour que chaque case reste visable au doigt. */
  .dpe-bloc { padding-left: 0.55rem; padding-right: 0.55rem; }
  .etiquette-echelle { gap: 3px; }
  .etiquette-case span { font-size: 0.95rem; }
}

/* --- Attente de la section « marché » du rapport (calcul en tâche de fond) --- */
.attente-dvf {
  display: flex;
  align-items: center;
  gap: .7rem;
  color: #4b5563;
}
.rotateur {
  flex: 0 0 auto;
  width: 1.05rem;
  height: 1.05rem;
  border: 2px solid #c7d2fe;
  border-top-color: #2563eb;
  border-radius: 50%;
  animation: rotation 0.9s linear infinite;
}
@keyframes rotation { to { transform: rotate(360deg); } }
/* Respecte les préférences d'accessibilité : pas d'animation imposée.
   La carte de démonstration montre alors directement l'état final : adresse révélée. */
@media (prefers-reduced-motion: reduce) {
  .rotateur { animation: none; border-top-color: #c7d2fe; }
  .adresse-cache, .adresse-vraie, .carte-demo, .hero-grille > div { animation: none; }
  .adresse-cache { opacity: 0; }
  .etape, .tarif { transition: none; }
}


/* ============================================================
   Écran d'attente de la recherche
   ------------------------------------------------------------
   La recherche serveur dure quelques centaines de millisecondes. Rendre le
   résultat instantanément fait passer le service pour un simple filtre : on
   marque donc un court temps d'attente (voir recherche.js).
   Les libellés affichés décrivent l'avancement, jamais la méthode.
   ============================================================ */
.ecran-recherche {
  position: fixed; inset: 0; z-index: 900;
  display: flex; align-items: center; justify-content: center;
  padding: 1.5rem;
  background: rgba(22, 35, 59, 0.55);
  backdrop-filter: blur(3px);
  animation: apparition-voile 0.25s ease-out;
}
/* INDISPENSABLE : une règle d'auteur `display:flex` écrase le `display:none`
   que le navigateur applique à l'attribut `hidden`. Sans cette ligne, l'écran
   d'attente reste affiché en permanence dès l'ouverture du formulaire. */
.ecran-recherche[hidden] { display: none; }
@keyframes apparition-voile { from { opacity: 0; } to { opacity: 1; } }

/* Empêche le défilement de l'arrière-plan pendant l'attente */
body.recherche-en-cours { overflow: hidden; }

.ecran-recherche-boite {
  background: #fff; border-radius: var(--rayon); box-shadow: var(--ombre);
  padding: 2.2rem 2.4rem; text-align: center;
  max-width: 380px; width: 100%;
}

.ecran-recherche-anneau {
  width: 46px; height: 46px; margin: 0 auto 1.2rem;
  border: 3px solid var(--fond-gris); border-top-color: var(--accent);
  border-radius: 50%;
  animation: rotation-attente 0.9s linear infinite;
}
@keyframes rotation-attente { to { transform: rotate(360deg); } }

.ecran-recherche-titre {
  margin: 0 0 0.35rem; font-weight: 700; color: var(--encre); font-size: 1.05rem;
}

/* Le libellé change toutes les 620 ms : la transition évite le clignotement */
.ecran-recherche-etape {
  margin: 0 0 1.1rem; color: var(--encre-douce); font-size: 0.95rem;
  min-height: 1.4em;
  animation: fondu-etape 0.3s ease-out;
}
@keyframes fondu-etape { from { opacity: 0.25; } to { opacity: 1; } }

.ecran-recherche-jauge {
  height: 4px; background: var(--fond-gris); border-radius: 999px;
  overflow: hidden; margin-bottom: 1rem;
}
.ecran-recherche-jauge span {
  display: block; height: 100%; width: 0;
  background: var(--accent); border-radius: 999px;
  transition: width 0.55s ease-out;
}

.ecran-recherche-note {
  margin: 0; font-size: 0.82rem; color: #8a93a8;
}

/* Accessibilité : sans animation, l'écran n'est de toute façon pas affiché
   (recherche.js envoie directement le formulaire). Garde-fou si l'écran est
   rendu malgré tout. */
@media (prefers-reduced-motion: reduce) {
  .ecran-recherche { animation: none; }
  .ecran-recherche-anneau { animation: none; border-top-color: var(--accent); }
  .ecran-recherche-etape { animation: none; }
  .ecran-recherche-jauge span { transition: none; }
}

/* ---------- Lecture du lien de l'annonce (29/09/2026) ----------
   Premier geste du parcours : coller le lien. Le formulaire complet n'apparaît
   qu'ensuite, pré-rempli ; les valeurs lues dans l'annonce restent surlignées
   tant que le client ne les a pas retouchées. */
.lecture-annonce { margin: 1.6rem 0 1.4rem; box-shadow: var(--ombre); }
.lecture-titre { display: block; font-weight: 700; color: var(--encre); margin-bottom: 0.5rem; }
.lecture-ligne { display: flex; gap: 0.6rem; flex-wrap: wrap; }
.lecture-ligne input {
  flex: 1 1 260px; min-width: 0; padding: 0.8rem 0.9rem; font-size: 1rem;
  border: 1px solid var(--bordure); border-radius: 8px;
}
.lecture-ligne input:focus { outline: 2px solid var(--accent); border-color: transparent; }
.lecture-ligne .bouton { flex: 0 0 auto; }
.lecture-etat { margin: 0.9rem 0 0; padding: 0.7rem 0.9rem; border-radius: 8px; background: var(--fond-gris); }
.lecture-etat-succes { background: #e8f6ee; color: #0b6b3c; }
.lecture-etat-partiel { background: #fff7e6; color: #8a5300; }
.lecture-etat-erreur { background: #fdecea; color: var(--erreur); font-weight: 600; }
.lecture-etat-attente { color: var(--encre-douce); }
.lecture-recap { margin-top: 1rem; border-top: 1px solid var(--bordure); padding-top: 1rem; }
.lecture-recap-titre { font-weight: 700; color: var(--encre); margin: 0 0 0.6rem; }
.recap-lignes { list-style: none; margin: 0; padding: 0; }
.recap-lignes li {
  padding: 0.55rem 0; border-bottom: 1px solid var(--bordure); line-height: 1.5;
}
.recap-lignes li:first-child .recap-valeurs { font-size: 1.08rem; }
.recap-valeurs { color: var(--encre); font-weight: 600; }
.recap-confirmation { margin: 0.9rem 0 0; font-size: 0.92rem; color: var(--encre-douce); }
.lecture-recap-actions { display: flex; gap: 0.6rem; flex-wrap: wrap; margin-top: 1.1rem; }
.lien-discret {
  background: none; border: 0; padding: 0; margin-top: 1rem; cursor: pointer;
  color: var(--accent); text-decoration: underline; font: inherit; font-size: 0.92rem;
}
/* Valeur lue dans l'annonce, pas encore retouchée : trait bleu à gauche (le
   vert pâle d'origine se voyait à peine et se lisait comme « validé »). */
.champ input.pre-rempli, .pre-rempli {
  background-color: #f1f6ff; border-left: 4px solid var(--accent);
}
.choix-type.pre-rempli, .etiquette-echelle.pre-rempli {
  border-radius: 10px; padding-left: 6px; background: #f1f6ff;
}
.lecture-etat:empty { padding: 0; margin: 0; }
.lecture-actions-etat { margin: 0.6rem 0 0; }
.lecture-compacte { margin: 0; color: var(--encre-douce); }
.lien-discret-inline {
  background: none; border: 0; padding: 0; cursor: pointer; font: inherit;
  color: var(--accent); text-decoration: underline; font-size: 0.9em;
}
.lecture-recap-titre:focus { outline: none; }
.recap-manquant { color: #8a5300; font-weight: 600; }
.recap-saisie {
  width: 9rem; max-width: 100%; padding: 0.35rem 0.5rem; font: inherit;
  border: 2px solid #f0a020; border-radius: 6px; background: #fffaf0;
}
.recap-saisie:focus { outline: 2px solid var(--accent); }
.bloc-facultatif { margin: 1.2rem 0; border-top: 1px solid var(--bordure); padding-top: 0.8rem; }
.bloc-facultatif > summary { cursor: pointer; color: var(--accent); font-weight: 600; }
.bloc-facultatif[open] > summary { margin-bottom: 0.8rem; }
.lien-deja-lu { margin: 0 0 1rem; }
@media (max-width: 560px) {
  .lecture-annonce { padding: 1.1rem; }
  .lecture-ligne .bouton { width: 100%; }
}

/* ---------- Dépôt de captures d'écran ou du PDF de l'annonce (04/10/2026) ---------- */
.visuellement-masque {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.lecture-ou {
  display: flex; align-items: center; gap: 0.8rem; margin: 1rem 0; color: #6b7690;
  font-size: 0.9rem; text-transform: uppercase; letter-spacing: 0.05em;
}
.lecture-ou::before, .lecture-ou::after { content: ""; flex: 1; border-top: 1px solid var(--bordure); }
.zone-depot {
  display: block; position: relative; cursor: pointer; text-align: center;
  border: 2px dashed var(--bordure); border-radius: var(--rayon); padding: 1.1rem 1rem;
  background: var(--fond-gris); transition: border-color 0.15s, background 0.15s;
}
.zone-depot:hover, .zone-depot:focus-within, .zone-depot-survol {
  border-color: var(--accent); background: #f1f6ff;
}
.zone-depot-invite { border-color: var(--accent); background: #f1f6ff; box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.15); }
.zone-depot-occupee { opacity: 0.6; pointer-events: none; }
.zone-depot-titre { display: block; font-weight: 700; color: var(--encre); }
.zone-depot-aide { display: block; margin-top: 0.3rem; font-size: 0.88rem; color: var(--encre-douce); }

/* Mode d'emploi replié sous la zone de dépôt (07/10/2026). */
.aide-depot { margin-top: 0.7rem; font-size: 0.92rem; }
.aide-depot > summary { cursor: pointer; color: var(--accent); font-weight: 600; }
.aide-depot[open] > summary { margin-bottom: 0.5rem; }
.aide-depot .etapes-simples { margin-bottom: 0; }

/* Saisie à la main : une vraie option, au même rang que le dépôt de fichiers. */
.saisie-manuelle-bloc[hidden] { display: none; }
.bouton-manuel { display: block; width: 100%; padding: 0.8rem 1rem; }
.bouton-manuel-sous {
  display: block; margin-top: 0.15rem;
  font-size: 0.86rem; font-weight: 400; color: var(--encre-douce);
}

/* Sous-étapes de « Caractéristiques » */
.sous-etape { margin: 0 0 1rem; font-size: 0.92rem; color: #6b7690; }

/* ---------- Parcours v4 (04/10/2026) ---------- */

/* L'en-tête collant masquait le haut des écrans amenés par le script. */
html { scroll-padding-top: 80px; }
.etape-panneau:focus, .lecture-echec-bandeau:focus { outline: none; }

/* Consignes selon l'appareil : téléphone/tablette (tactile) ou ordinateur. */
.lecture-annonce .seulement-tactile { display: none; }
@media (pointer: coarse) {
  .lecture-annonce .seulement-tactile { display: block; }
  .lecture-annonce .seulement-souris { display: none; }
}

/* Précisions propres à chaque étiquette, dépliées sous elle. */
.details-etiquette {
  margin: 0.9rem 0 0.4rem; padding: 0.9rem 1rem 0.2rem;
  border-left: 3px solid var(--bordure); background: var(--fond-gris);
  border-radius: 0 10px 10px 0;
}
.details-titre { margin: 0 0 0.6rem; font-size: 0.92rem; font-weight: 600; color: var(--encre-douce); }

/* Le lien ne se lit pas : « il reste une étape simple ». */
.lecture-echec-bandeau {
  margin: 0 0 1rem; padding: 0.8rem 1rem; border-radius: 8px;
  background: #fff7e6; color: #8a5300; font-weight: 600;
}
.lecture-echec-sous { margin: 0 0 0.6rem; font-size: 1.08rem; font-weight: 700; color: var(--encre); }
.etapes-simples { margin: 0 0 1rem; padding-left: 1.4rem; line-height: 1.6; }
.etapes-simples li { margin-bottom: 0.45rem; }
.etapes-simples kbd, .zone-depot kbd { font-size: 0.95em; font-weight: 700; padding: 2px 7px; white-space: nowrap; }
.zone-depot-echec { padding: 1.6rem 1rem; }
.zone-depot-bouton {
  display: inline-block; margin-top: 0.7rem; padding: 0.5rem 1.1rem; border-radius: 8px;
  background: #fff; border: 1px solid var(--accent); color: var(--accent); font-weight: 600;
}
.bouton-captures { display: block; width: 100%; position: relative; }
.lecture-echec-liens { margin: 1rem 0 0; text-align: center; }
.lecture-compacte { overflow-wrap: anywhere; }

/* Écran de vérification */
.recap-intro { margin: 0 0 0.6rem; color: var(--encre-douce); }
.recap-intro-partiel { color: #8a5300; font-weight: 600; }
.recap-lignes li { display: flex; justify-content: space-between; align-items: baseline; gap: 0.8rem; }
.recap-valeurs { overflow-wrap: anywhere; }
/* Zone de toucher plus large que le mot « modifier » lui-même. */
.recap-modifier { flex: 0 0 auto; padding: 0.4rem 0.5rem; margin: -0.4rem -0.5rem -0.4rem 0; }
.recap-choix { display: inline-flex; gap: 0.4rem; flex-wrap: wrap; vertical-align: middle; }
.recap-surface { display: inline-flex; align-items: center; gap: 0.3rem; flex-wrap: wrap; }
.recap-lignes li.recap-a-completer { display: block; }
/* Champ ou choix à compléter : sur sa propre ligne, au-dessus du reste. */
.recap-valeurs > .recap-surface, .recap-valeurs > span > .recap-choix { margin: 0.2rem 0; }
.recap-a-completer-titre { display: block; font-weight: 600; color: #8a5300; margin-bottom: 0.4rem; }
/* Les sept lettres toujours sur une ligne, même sur un petit téléphone. */
.recap-lettres { display: grid; grid-template-columns: repeat(7, minmax(0, 2.8rem)); gap: 4px; }
.recap-lettre {
  width: 100%; height: 2.6rem; padding: 0; border-radius: 8px;
  border: 1px solid rgba(22, 35, 59, 0.12); font: inherit; font-weight: 700; cursor: pointer;
}
.recap-lettre:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.recap-lettre-absente { grid-column: 1 / -1; justify-self: start; padding: 0.4rem 0; }
.recap-lettres-energie [data-lettre="A"] { background: #319834; color: #fff; }
.recap-lettres-energie [data-lettre="B"] { background: #5fb733; color: #fff; }
.recap-lettres-energie [data-lettre="C"] { background: #a8ce39; color: #173404; }
.recap-lettres-energie [data-lettre="D"] { background: #f3e600; color: #412402; }
.recap-lettres-energie [data-lettre="E"] { background: #f0b310; color: #412402; }
.recap-lettres-energie [data-lettre="F"] { background: #ea7b21; color: #4a1b0c; }
.recap-lettres-energie [data-lettre="G"] { background: #e32b26; color: #fff; }
.recap-lettres-climat [data-lettre="A"] { background: #f2eaf7; color: #3c3489; }
.recap-lettres-climat [data-lettre="B"] { background: #dcc9ea; color: #3c3489; }
.recap-lettres-climat [data-lettre="C"] { background: #c4a7dc; color: #26215c; }
.recap-lettres-climat [data-lettre="D"] { background: #a886cc; color: #26215c; }
.recap-lettres-climat [data-lettre="E"] { background: #8b64bc; color: #fff; }
.recap-lettres-climat [data-lettre="F"] { background: #6f44a6; color: #fff; }
.recap-lettres-climat [data-lettre="G"] { background: #53278c; color: #fff; }
.recap-ajout { margin: 0.8rem 0 0; font-size: 0.92rem; color: var(--encre-douce); }
.recap-ajout label { cursor: pointer; }
.recap-email { margin-top: 1.2rem; }
.recap-email input {
  width: 100%; padding: 0.8rem 0.9rem; font-size: 1rem;
  border: 1px solid var(--bordure); border-radius: 8px;
}
.recap-email input:focus { outline: 2px solid var(--accent); border-color: transparent; }
.recap-email input.invalide { border-color: var(--erreur); }
#recap-valider { display: block; width: 100%; margin-top: 0.9rem; }
#recap-valider:disabled { opacity: 0.7; cursor: wait; }
.recap-gratuit { text-align: center; margin-top: 0.6rem; }
.recap-detail { text-align: center; margin: 0.4rem 0 0; }
.lien-deja-lu { overflow-wrap: anywhere; }

/* Formulaire ouvert pour corriger une valeur : un seul bouton, retour à la
   vérification. */
.bouton-retour-verification { display: none; }
.mode-retour-recap .bouton-retour-verification { display: inline-block; }
.mode-retour-recap [data-precedent], .mode-retour-recap [data-suivant],
.mode-retour-recap #bouton-soumettre, .mode-retour-recap .recap-gratuit { display: none; }
.mode-retour-recap .formulaire-navigation { justify-content: flex-end; }

/* Pastilles d'étapes : focus clavier visible ; sur très petit écran, les
   numéros seuls (et le nom de l'étape en cours). */
.etapes-barre-item[role="button"]:focus-visible span { outline: 3px solid var(--accent); outline-offset: 2px; }
.etapes-barre-item[aria-disabled="true"] { cursor: default; }
@media (max-width: 400px) {
  .etapes-barre { gap: 0.8rem; }
  .etapes-barre-item { font-size: 0; gap: 0; }
  .etapes-barre-item span { font-size: 0.85rem; }
  .etapes-barre-item.actif { font-size: 0.8rem; gap: 0.4rem; }
}