/* ==========================================================================
   CHARTE v4 — la couche que les pages prennent une par une.
   Brief du 22/09/2026, §2. Maquettes : docs/maquettes-v4/.

   POURQUOI UN FICHIER À PART, ET PAS UNE RÉÉCRITURE DE style.css.
   Les 192 pages commune, les articles et l'annuaire partagent la même feuille
   de style. Poser la v4 dedans les aurait toutes changées d'un coup, alors que
   leurs gabarits ne sont refaits qu'aux lots 6, 7 et 10 : le site aurait passé
   des semaines à moitié habillé, en production. Décision de Vanessa du
   22/09/2026 : on migre page par page.

   COMMENT UNE PAGE LA DEMANDE. Elle pose `$charteV4 = true;` avant d'inclure
   includes/header.php. Celui-ci charge alors ce fichier EN PLUS de style.css
   et ajoute la classe `charte-v4` au <body>. Une page qui ne le fait pas ne
   télécharge rien de plus et ne change pas d'un pixel.

   TOUT EST PORTÉ PAR `.charte-v4` ET PRÉFIXÉ `v4-`, pour deux raisons : les
   deux feuilles cohabitent sur une page migrée, et une collision de nom avec
   l'ancienne couche se réglerait en silence, au petit bonheur de l'ordre de
   chargement. Le jour où l'ancienne couche disparaît (lot 8), la portée et le
   préfixe se retirent d'un remplacement mécanique dans ce seul fichier.

   LA PALETTE NE CHANGE PAS — vérifié couleur par couleur contre les maquettes,
   au code hexadécimal près. Les polices non plus : Fraunces et Inter sont déjà
   auto-hébergées et préchargées par header.php, et `design.google_fonts_url`
   reste vide. Ce qui change, ce sont les formes, l'échelle et le mouvement.
   ========================================================================== */

.charte-v4 {
  /* ── Ce que la v4 ajoute ───────────────────────────────────────────────
     Les couleurs de base (--encre, --papier, --cadastre, --nuit, --ambre…)
     viennent de style.css et ne sont pas redéfinies : une palette écrite à
     deux endroits finit par diverger. Ici, seulement ce qui n'existait pas. */

  /* Le texte courant des maquettes est un poil plus sombre que --encre-2, qui
     reste la couleur des légendes et des étiquettes. */
  --encre-doux: #2B3A36;
  /* Les deux gris qui se lisent SUR fond nuit. --sur-nuit pour une phrase,
     --sur-nuit-2 pour une source ou un millésime. */
  --sur-nuit: #C9D8D3;
  --sur-nuit-2: #A9BDB7;
  --filet-nuit: rgba(255,255,255,.14);

  /* L'UNIQUE OMBRE DE LA CHARTE, et elle n'a qu'un seul porteur : la carte
     estimateur. Voir plus bas pourquoi elle a besoin d'un !important. */
  --ombre-estimateur: 0 16px 40px rgba(10,46,41,.10);

  /* Largeur du contenu dans une bande pleine largeur. La colonne de 680 px et
     sa gouttière de 190 px de la v3 ne servent plus : les sources passent en
     micro-légendes sous ce qu'elles datent. */
  --large: 1120px;
  --marge-bande: clamp(16px, 5vw, 160px);

  --r-24: 24px; --r-20: 20px; --r-14: 14px;
  --h-bouton: 56px;   /* le brief demande 52 à 60 */
  --cible: 44px;      /* plancher tactile, partout */
}

/* ── LES OMBRES ────────────────────────────────────────────────────────────
   style.css porte `*,*::before,*::after{box-shadow:none !important}`, hérité
   de la v2 où la charte interdisait toute ombre. La v4 en autorise UNE. On ne
   touche pas à la règle d'origine — elle protège encore tout le reste du site
   — on la bat sur le seul élément concerné, avec plus de spécificité et le
   même !important. C'est laid, c'est volontaire, et ça disparaît avec
   l'ancienne couche. */
.charte-v4 .v4-carte-estimateur { box-shadow: var(--ombre-estimateur) !important; }

/* ══ 1. BANDES ET COMPOSITIONS ═════════════════════════════════════════════
   Une bande occupe toute la largeur de l'écran et porte sa couleur ; son
   contenu, lui, s'arrête à 1 120 px et se centre. C'est le remplacement de la
   colonne unique de la v3. */
/* ⚠️ `margin: 0` N'EST PAS DÉCORATIF. style.css pose `section { margin:
   var(--space-2xl) 0 }` — 64 px en haut et en bas de TOUTE balise <section>
   du site. Les bandes v4 en sont, donc elles héritaient de ces 64 px et
   flottaient les unes au-dessus des autres, séparées par une bande de fond de
   page. Une bande pleine largeur qui ne touche pas la suivante n'est plus une
   bande : c'est une carte très large, et tout le principe du §2 tombe.
   Constaté le 22/09/2026 en construisant l'accueil ; le défaut était déjà en
   production sur les 192 pages commune depuis le lot 6. */
.charte-v4 .v4-bande { margin: 0; padding: clamp(40px, 7vw, 96px) var(--marge-bande); }
.charte-v4 .v4-bande--papier { background: var(--papier); }
.charte-v4 .v4-bande--blanche { background: var(--carte); }
.charte-v4 .v4-bande--nuit { background: var(--nuit); color: #FFFFFF; }
/* Sur fond nuit, les titres et les liens ne peuvent pas rester en encre. */
.charte-v4 .v4-bande--nuit h1,
.charte-v4 .v4-bande--nuit h2,
.charte-v4 .v4-bande--nuit h3 { color: #FFFFFF; }
.charte-v4 .v4-bande--nuit p { color: var(--sur-nuit); }
/* ⚠️ `:not(.v4-bouton)` N'EST PAS UNE COQUETTERIE. Sans lui, cette règle
   repeignait aussi les boutons : le bouton ambre d'une bande nuit recevait du
   texte blanc, soit du blanc sur #E8A924 — un contraste de 2 pour 1, très
   loin du AA exigé. Un bouton porte sa propre couleur de texte, quel que soit
   le fond derrière lui. Attrapé dans la galerie le 22/09/2026. */
.charte-v4 .v4-bande--nuit a:not(.v4-bouton) {
  color: #FFFFFF; text-decoration-color: var(--sur-nuit-2);
}

.charte-v4 .v4-contenu { max-width: var(--large); margin: 0 auto; }

/* Les trois compositions asymétriques du brief. Elles se replient toutes en
   une colonne sous 900 px : une grille 7/5 à 360 px n'est pas une grille. */
.charte-v4 .v4-duo { display: grid; gap: clamp(24px, 4vw, 64px); align-items: center; }
.charte-v4 .v4-duo--7-5 { grid-template-columns: minmax(0,7fr) minmax(0,5fr); }
.charte-v4 .v4-duo--6-5 { grid-template-columns: minmax(0,6fr) minmax(0,5fr); }
.charte-v4 .v4-duo--4-8 { grid-template-columns: minmax(0,4fr) minmax(0,8fr); }
@media (max-width: 900px) {
  .charte-v4 .v4-duo { grid-template-columns: 1fr; }
}

/* ══ 2. ÉCHELLE TYPOGRAPHIQUE ══════════════════════════════════════════════
   Les tailles du §2, au chiffre près. Le corps monte de 17 px sur téléphone à
   19 px sur ordinateur — c'est la seule taille de texte qui respire. */
.charte-v4 .v4-titre-1 {
  margin: 0; font-family: var(--titre); font-weight: 600;
  font-size: clamp(34px, 5vw, 64px); line-height: 1.06; letter-spacing: -.015em;
}
.charte-v4 .v4-titre-2 {
  margin: 0; font-family: var(--titre); font-weight: 600;
  font-size: clamp(26px, 3vw, 44px); line-height: 1.15; letter-spacing: -.015em;
}
.charte-v4 .v4-titre-3 {
  margin: 0; font-family: var(--titre); font-weight: 600;
  font-size: clamp(20px, 2vw, 24px); line-height: 1.25; letter-spacing: -.01em;
}
.charte-v4 .v4-texte {
  margin: 0; font-size: 17px; line-height: 1.6; color: var(--encre-doux);
  max-width: 68ch;
}
@media (min-width: 900px) { .charte-v4 .v4-texte { font-size: 19px; } }

/* La micro-légende : source, millésime, date de relevé. Elle remplace la
   gouttière de la v3 — la source vit maintenant sous ce qu'elle date. */
.charte-v4 .v4-legende {
  margin: 0; font-size: 13px; line-height: 1.5; color: var(--encre-2);
  font-variant-numeric: tabular-nums;
}
.charte-v4 .v4-bande--nuit .v4-legende { color: var(--sur-nuit-2); }

/* LE GRAND CHIFFRE. `tabular-nums` n'est pas un détail : sans lui, deux
   chiffres l'un sous l'autre ne s'alignent pas et la colonne tremble. */
.charte-v4 .v4-chiffre {
  font-family: var(--texte); font-weight: 600; line-height: 1;
  letter-spacing: -.02em; font-variant-numeric: tabular-nums;
  font-size: clamp(40px, 6vw, 56px);
}
.charte-v4 .v4-chiffre--geant { font-size: clamp(48px, 9vw, 88px); }
.charte-v4 .v4-chiffre--ambre { color: var(--ambre-vif); }
/* Sur fond clair, l'ambre vif ne passe pas le contraste AA sur du texte :
   c'est --ambre-texte qui sert, et il est nettement plus sombre. */
.charte-v4 .v4-bande--papier .v4-chiffre--ambre,
.charte-v4 .v4-bande--blanche .v4-chiffre--ambre { color: var(--ambre-texte); }

/* ══ 3. CARTES ET TUILES ═══════════════════════════════════════════════════ */
.charte-v4 .v4-carte {
  background: var(--carte); border: 1px solid var(--trait);
  border-radius: var(--r-20); padding: clamp(18px, 3vw, 28px);
  display: flex; flex-direction: column; gap: 10px;
}
.charte-v4 .v4-carte--voile { background: var(--voile); border-color: transparent; }

/* La carte estimateur : pas de filet, le rayon le plus large, et l'ombre. */
.charte-v4 .v4-carte-estimateur {
  background: var(--carte); border: 0; border-radius: var(--r-24);
  padding: clamp(20px, 3vw, 28px);
  display: flex; flex-direction: column; gap: 18px;
}

/* QUATRE COLONNES SUR UN GRAND ÉCRAN, et c'est le minimum de 240 px qui le
   décide : à 1 120 px de contenu, cinq colonnes demanderaient 1 264 px avec
   les gouttières, quatre en demandent 1 008. Réglé à 210 px, l'ajustement
   automatique en sortait cinq, la tuile forte en occupait quatre, et il
   restait trois cases vides au bout de la grille. La grille se replie ensuite
   toute seule : deux colonnes sur une tablette, une sur un téléphone. */
.charte-v4 .v4-tuiles {
  display: grid; gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
.charte-v4 .v4-tuile {
  background: var(--papier); border-radius: var(--r-20); padding: 22px;
  display: flex; flex-direction: column; justify-content: flex-end; gap: 4px;
  min-height: 150px;
}
.charte-v4 .v4-bande--papier .v4-tuile { background: var(--carte); }
/* La tuile forte : une seule par grille, sur fond nuit, avec le grand chiffre
   en ambre. C'est elle qui donne le rythme de la grille.

   ⚠️ DEUX CLASSES DANS LE SÉLECTEUR, ET C'EST INDISPENSABLE. Écrite
   `.charte-v4 .v4-tuile--forte`, cette règle pesait moins que
   `.charte-v4 .v4-bande--papier .v4-tuile` juste au-dessus, qui compte une
   classe de plus : sur une bande claire, la tuile forte perdait son fond nuit
   et GARDAIT son texte blanc. Du blanc sur blanc, donc une phrase invisible —
   attrapé à 360 px dans la galerie le 22/09/2026. */
.charte-v4 .v4-tuile.v4-tuile--forte {
  background: var(--nuit); color: #FFFFFF; padding: clamp(22px, 3vw, 32px);
  border-radius: var(--r-24); gap: 8px;
}
.charte-v4 .v4-tuile--forte .v4-legende { color: var(--sur-nuit-2); }
/* Même piège, même parade : dans une tuile forte, le fond est sombre, donc
   l'ambre reste le VIF, même si la bande autour est claire. */
.charte-v4 .v4-tuile--forte .v4-chiffre--ambre { color: var(--ambre-vif); }
@media (min-width: 760px) {
  .charte-v4 .v4-tuile--forte { grid-column: span 2; grid-row: span 2; }
}

/* ══ 4. RÉGLETTE ═══════════════════════════════════════════════════════════
   L'élément signature : un intervalle, pas un chiffre. La piste porte
   l'étendue, la barre claire le quart au quart, l'aiguille ambre la médiane. */
.charte-v4 .v4-reglette { display: flex; flex-direction: column; gap: 10px; }
.charte-v4 .v4-reglette-piste { position: relative; height: 22px; }
.charte-v4 .v4-reglette-fond,
.charte-v4 .v4-reglette-bande {
  position: absolute; top: 7px; height: 8px; border-radius: 999px;
}
.charte-v4 .v4-reglette-fond { left: 0; right: 0; background: var(--voile); }
.charte-v4 .v4-reglette-bande { background: var(--cadastre); opacity: .28; }
.charte-v4 .v4-reglette-aiguille {
  position: absolute; top: 0; width: 3px; height: 22px; border-radius: 2px;
  background: var(--ambre-vif);
}
.charte-v4 .v4-bande--nuit .v4-reglette-fond { background: var(--filet-nuit); }
.charte-v4 .v4-bande--nuit .v4-reglette-bande { background: var(--voile); opacity: 1; }
.charte-v4 .v4-reglette-valeurs {
  display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 8px;
}
.charte-v4 .v4-reglette-valeurs > * { display: flex; flex-direction: column; gap: 2px; }
.charte-v4 .v4-reglette-valeurs > :nth-child(2) { align-items: center; text-align: center; }
.charte-v4 .v4-reglette-valeurs > :nth-child(3) { align-items: flex-end; text-align: right; }
.charte-v4 .v4-reglette-valeurs b {
  font-size: 22px; font-weight: 600; font-variant-numeric: tabular-nums;
}

/* ══ 5. BOUTONS ════════════════════════════════════════════════════════════
   DEUX FAMILLES, ET ELLES NE SE MÉLANGENT PAS (§2) : l'ambre pour estimer,
   le cadastre pour demander à être rappelé. Le visiteur doit pouvoir
   distinguer d'un coup d'œil « je calcule » de « je donne mon numéro ». */
.charte-v4 .v4-bouton {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: var(--h-bouton); padding: 0 24px; border: 0; cursor: pointer;
  border-radius: var(--r-14); font-family: var(--texte); font-size: 17px;
  font-weight: 600; text-decoration: none; text-align: center;
  background: var(--ambre-vif); color: var(--encre);
}
.charte-v4 .v4-bouton:hover { background: var(--ambre); }
.charte-v4 .v4-bouton--relation { background: var(--cadastre); color: #FFFFFF; }
.charte-v4 .v4-bouton--relation:hover { background: var(--cadastre-clair); }
.charte-v4 .v4-bouton--fantome {
  background: transparent; color: var(--cadastre);
  border: 1px solid var(--trait);
}
.charte-v4 .v4-bouton--fantome:hover { border-color: var(--cadastre); }
.charte-v4 .v4-bande--nuit .v4-bouton--fantome {
  color: #FFFFFF; border-color: var(--filet-nuit);
}
.charte-v4 .v4-bouton--pleine { width: 100%; }

/* La pastille : un fait vérifiable, jamais un lien déguisé. */
.charte-v4 .v4-pastille {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 14px; border-radius: 999px; font-size: 14px; line-height: 1.2;
  background: var(--carte); border: 1px solid var(--trait); color: var(--encre);
}
/* Pas de règle « pastille sur bande papier » ici : elle existait, elle
   redisait exactement le fond déjà posé ci-dessus — et, comptant une classe de
   plus, elle repeignait en blanc la pastille « Règle locale », dont le texte
   est blanc. Une pastille invisible, née d'une règle qui ne servait à rien.
   C'est le même piège de spécificité que sur la tuile forte, et la bonne
   parade était de supprimer la règle, pas de la renforcer. */
.charte-v4 .v4-bande--nuit .v4-pastille {
  background: transparent; border-color: var(--filet-nuit); color: #FFFFFF;
}
.charte-v4 .v4-pastille.v4-pastille--regle {
  background: var(--brique); border-color: var(--brique); color: #FFFFFF;
}
/* Une pastille CLIQUABLE est une cible tactile : elle passe à 44 px de haut,
   la pastille d'information reste basse. */
.charte-v4 a.v4-pastille { min-height: var(--cible); text-decoration: none; }
.charte-v4 a.v4-pastille:hover { border-color: var(--cadastre); color: var(--cadastre); }

/* ══ 6. CHAMPS ET PROGRESSION ══════════════════════════════════════════════ */
.charte-v4 .v4-champ {
  display: flex; align-items: center; gap: 10px; min-height: 58px;
  padding: 0 16px; border: 2px solid var(--cadastre); border-radius: var(--r-14);
  background: var(--carte);
}
/* `align-self: stretch` : sans lui, le conteneur centre l'input, qui ne fait
   alors que 21 px de haut dans une boîte de 58. Le reste de la boîte n'est
   cliquable par personne — toucher juste au-dessus du texte ne donnait pas le
   focus. L'input remplit donc la hauteur, et toute la boîte devient la cible. */
.charte-v4 .v4-champ input {
  flex: 1 1 auto; min-width: 0; align-self: stretch;
  border: 0; outline: none; background: transparent;
  font-family: var(--texte); font-size: 17px; color: var(--encre);
}
.charte-v4 .v4-etiquette { font-size: 16px; font-weight: 500; }
.charte-v4 .v4-progression { height: 6px; border-radius: 999px; background: var(--voile); }
.charte-v4 .v4-progression > span {
  display: block; height: 6px; border-radius: 999px; background: var(--cadastre);
}

/* ══ 7. FAQ ════════════════════════════════════════════════════════════════
   Un <details> natif : il s'ouvre sans JavaScript, et son contenu est dans le
   HTML servi, donc lisible par un moteur même replié. */
.charte-v4 .v4-faq { border-top: 1px solid var(--trait); }
.charte-v4 .v4-faq > details { border-bottom: 1px solid var(--trait); }
.charte-v4 .v4-faq > details > summary {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  min-height: var(--cible); padding: 18px 0; cursor: pointer; list-style: none;
  font-family: var(--titre); font-weight: 600; font-size: clamp(17px, 2vw, 20px);
}
.charte-v4 .v4-faq > details > summary::-webkit-details-marker { display: none; }
.charte-v4 .v4-faq > details > summary::after {
  content: ""; flex: 0 0 auto; width: 12px; height: 12px;
  border-right: 2px solid var(--cadastre); border-bottom: 2px solid var(--cadastre);
  transform: rotate(45deg) translate(-2px, -2px);
}
.charte-v4 .v4-faq > details[open] > summary::after { transform: rotate(-135deg); }
.charte-v4 .v4-faq > details > :not(summary) { margin: 0 0 18px; }

/* ══ 8. FIL D'ARIANE ET PICTOS ═════════════════════════════════════════════ */
.charte-v4 .v4-fil {
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
  font-size: 14px; color: var(--encre-2);
}
/* Un maillon de fil d'Ariane est un lien de 22 px de haut si on le laisse
   faire : sous le plancher de 44 px du projet, et c'est le premier lien de la
   page sur un téléphone. Il prend donc toute la hauteur de la bande sans
   grossir : c'est la zone qui s'agrandit, pas le texte. */
.charte-v4 .v4-fil a {
  display: inline-flex; align-items: center; min-height: var(--cible);
  color: var(--encre-2);
}
.charte-v4 .v4-fil a:hover { color: var(--cadastre); }

/* Le jeu d'icônes : trait de 1,5 px, jamais de remplissage, jamais d'emoji.
   La taille se règle par la classe, la couleur suit le texte quand on le
   demande — sur fond nuit, un picto cadastre disparaîtrait. */
.charte-v4 .v4-picto {
  flex: 0 0 auto; width: 24px; height: 24px; fill: none;
  stroke: var(--cadastre); stroke-width: 1.5;
  stroke-linecap: round; stroke-linejoin: round;
}
.charte-v4 .v4-picto--grand { width: 28px; height: 28px; }
.charte-v4 .v4-bande--nuit .v4-picto,
.charte-v4 .v4-picto--suit-texte { stroke: currentColor; }

/* ══ 9. LES DEUX ÉLÉMENTS COLLANTS ═════════════════════════════════════════
   Nouveauté de la v4 : la v3 n'en avait aucun. L'en-tête, lui, reste NON
   collant — c'est écrit au §2 et ce n'est pas un oubli. */

/* ORDINATEUR : l'estimateur compact se colle en marge droite. `align-self`
   est indispensable — dans une grille, un enfant est étiré sur toute la
   hauteur par défaut, et un élément étiré ne colle jamais. */
@media (min-width: 900px) {
  .charte-v4 .v4-colle { position: sticky; top: 24px; align-self: start; }
}

/* MOBILE : la barre basse « Estimer », après le premier écran.
   Elle se masque quand un formulaire est à l'écran (§2) : c'est du ressort du
   script, qui pose `data-formulaire-visible` sur le <body>. Sans JavaScript la
   barre reste affichée — elle n'est qu'un raccourci, le parcours reste
   atteignable par le héros et par l'en-tête. */
.charte-v4 .v4-barre-mobile {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  display: flex; gap: 12px; align-items: center;
  padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
  background: var(--carte); border-top: 1px solid var(--trait);
}
.charte-v4 .v4-barre-mobile .v4-bouton { flex: 1 1 auto; }
@media (min-width: 900px) { .charte-v4 .v4-barre-mobile { display: none; } }
.charte-v4[data-formulaire-visible="1"] .v4-barre-mobile { display: none; }
/* La barre recouvre le bas de la page : on rend la hauteur au contenu, sinon
   elle mange la dernière ligne et le pied de page. */
@media (max-width: 899px) {
  .charte-v4.a-barre-mobile { padding-bottom: 84px; }
}

/* ══ 10. MOUVEMENT ═════════════════════════════════════════════════════════
   Les sections apparaissent au défilement, 200 ms, et rien d'autre ne bouge :
   toujours aucun compteur animé — un chiffre qui défile se lit comme une
   animation publicitaire, pas comme une mesure.

   L'état de départ n'est posé QUE sous `.js` : sans JavaScript, personne ne
   viendrait retirer l'opacité et la section resterait invisible. C'est la
   faute classique de ce motif. */
.js .charte-v4 .v4-apparait {
  opacity: 0; transform: translateY(12px);
  transition: opacity .2s ease-out, transform .2s ease-out;
}
.js .charte-v4 .v4-apparait.est-vue { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .js .charte-v4 .v4-apparait { opacity: 1; transform: none; transition: none; }
}

/* ══ 11. LE PLANCHER ═══════════════════════════════════════════════════════
   360 px, focus clavier visible, cibles de 44 px. Inchangé depuis la v2, et
   redit ici parce que la v4 introduit des éléments que la v2 ne connaissait
   pas — la barre collante, les grilles asymétriques. */
.charte-v4 :focus-visible {
  outline: 2px solid var(--cadastre); outline-offset: 2px; border-radius: 2px;
}
.charte-v4 .v4-bande--nuit :focus-visible { outline-color: var(--ambre-vif); }
.charte-v4 .v4-bouton, .charte-v4 summary, .charte-v4 a.v4-pastille {
  min-height: var(--cible);
}
@media (max-width: 380px) {
  /* À 360 px, la marge de bande tombe à 16 px et les grilles sont déjà en une
     colonne. Reste le cas des mots longs — « Fouesnant-les-Glénan » — qui
     poussent la page en largeur si on ne les autorise pas à se couper. */
  .charte-v4 .v4-titre-1, .charte-v4 .v4-titre-2 { overflow-wrap: break-word; }
}

/* ══ 12. LE BLOC CONCIERGERIES ═════════════════════════════════════════════
   §6 du brief. Il vit dans includes/bloc-conciergeries.php et paraît sur deux
   surfaces : la page de résultat aujourd'hui, la page commune au lot 6. Son
   habillage est ici, avec le reste de la charte, et non dans un fichier à
   part : c'est un assemblage de composants v4, pas un composant de plus. */
.charte-v4 .bloc-conciergeries .bc-ouverture { margin: 0 0 22px; }
.charte-v4 .bloc-conciergeries .bc-mention { margin: 0 0 22px; font-size: 15px; }

.charte-v4 .bc-liste {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}
.charte-v4 .bc-carte { gap: 12px; }
/* L'emplacement payant se distingue par un filet, jamais par une couleur de
   fond ni une ombre : le §11 de la décision sponsorisation demande un
   signalement « lisible sans être flatteur ». Une carte plus jolie que les
   autres serait une recommandation déguisée. */
.charte-v4 .bc-carte--payante { border-color: var(--cadastre); }

/* LA TÊTE DE CARTE : le logo à gauche, le nom à côté (22/09/2026).
   Hauteur FIXE et largeur libre pour le logo — un logo large et un logo carré
   doivent peser pareil dans la liste. Aucun recadrage, aucun filtre : c'est la
   marque d'un partenaire, on ne la retouche pas. */
.charte-v4 .bc-tete { display: flex; align-items: center; gap: 14px; }
.charte-v4 .bc-tete .v4-titre-3 { margin: 0; min-width: 0; overflow-wrap: anywhere; }
/* `min-width` RÉSERVE LA PLACE AVANT L'ARRIVÉE DE L'IMAGE. Le logo est en
   `loading="lazy"` et l'attribut HTML ne donne que sa hauteur : tant qu'il n'est
   pas chargé, sa largeur vaut zéro et le nom à côté glisse vers la gauche, puis
   saute quand l'image arrive. On ne peut pas figer une largeur — les logos ne
   sont pas tous carrés, celui de BELLA IMMO l'est, un autre ne le sera pas —
   mais on peut réserver le minimum. */
.charte-v4 .bc-logo {
  height: 44px; width: auto; min-width: 44px; max-width: 132px;
  flex: 0 0 auto; object-fit: contain;
}
/* Le repli quand la conciergerie n'a pas déposé de logo. Même carré que le
   logo, pour que deux cartes voisines s'alignent au pixel. */
.charte-v4 .bc-initiale {
  flex: 0 0 auto; width: 44px; height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--voile); border-radius: var(--r-14);
  font-family: var(--titre); font-weight: 600; font-size: 20px; color: var(--cadastre);
}

/* `.bc-distance` N'A PLUS DE PORTEUR depuis le 22/09/2026 : la ligne de
   provenance a été retirée de la carte, son étiquette de ville la remplace.
   La règle part avec elle — une règle sans porteur est exactement ce qui a
   laissé une étiquette « Partenaire » s'afficher pendant des semaines. */
.charte-v4 .bc-criteres { display: flex; flex-wrap: wrap; gap: 8px; }
/* Le bouton est poussé en bas de carte : dans une grille, deux cartes voisines
   n'ont pas le même nombre de pastilles, et deux boutons à deux hauteurs
   différentes donnent une liste bancale. */
.charte-v4 .bc-carte form,
.charte-v4 .bc-carte > .v4-bouton { margin-top: auto; }
.charte-v4 .bc-critere { margin: 22px 0 0; }

/* ══ 13. L'ÉCRAN DE RÉSULTAT ═══════════════════════════════════════════════
   §5 du brief. La page est faite de bandes v4 ; il ne reste ici que ce qui
   lui est propre. */
/* ⚠️ LA CARTE BLANCHE DOIT DISPARAÎTRE ICI. `.estimation-annuel` est née au
   lot 1 sur une page claire : fond blanc, filet, rayon. Posée telle quelle sur
   la bande nuit, elle gardait son fond blanc pendant que la fourchette passait
   en texte blanc — une phrase invisible, exactement comme la tuile forte du
   lot 2. Sur fond nuit, le bloc n'est plus une carte : c'est le contenu de la
   bande. */
.charte-v4 .estimation-resultat .estimation-annuel {
  background: transparent; border: 0; border-radius: 0; padding: 0;
  margin: 0 0 32px;
}
.charte-v4 .estimation-resultat .annuel-fourchette { color: #FFFFFF; }
.charte-v4 .estimation-resultat .annuel-avant { color: var(--sur-nuit-2); }

/* Les deux réglettes côte à côte sur grand écran, l'une sous l'autre sinon :
   ce sont deux mesures du même logement, les comparer d'un coup d'œil a du
   sens. */
.charte-v4 .estimation-resultat {
  --colonnes-reglettes: repeat(auto-fit, minmax(280px, 1fr));
}
.charte-v4 .estimation-reglette { margin: 0 0 24px; }
@media (min-width: 900px) {
  .charte-v4 .estimation-resultat .v4-contenu {
    display: grid; grid-template-columns: var(--colonnes-reglettes); gap: 0 48px;
  }
  .charte-v4 .estimation-resultat .estimation-annuel,
  .charte-v4 .estimation-resultat .estimation-socle { grid-column: 1 / -1; }
}
.charte-v4 .estimation-socle { margin: 8px 0 0; }

.charte-v4 .estimation-transition { margin: 22px 0 0; }
.charte-v4 .estimation-facteurs .v4-carte { min-height: 0; }

/* Une carte-pilier est un lien : elle prend le soulignement de moins et la
   cible tactile de plus. */
.charte-v4 a.estimation-pilier { text-decoration: none; color: inherit; }
.charte-v4 a.estimation-pilier:hover { border-color: var(--cadastre); }
.charte-v4 .estimation-limites .v4-bouton { margin-top: 8px; }

/* Le formulaire d'alerte, sur une commune que personne ne couvre encore. */
.charte-v4 .bc-alerte { margin: 22px 0 0; gap: 14px; }
.charte-v4 .bc-alerte-case {
  display: flex; gap: 10px; align-items: flex-start;
  font-size: 15px; line-height: 1.5; cursor: pointer;
}
/* La case grandit : à 13 px par défaut, elle est sous le plancher tactile et
   sous le seuil de visibilité pour qui vise mal. */
.charte-v4 .bc-alerte-case input { flex: 0 0 auto; width: 20px; height: 20px; margin-top: 2px; }
.charte-v4 .bc-alerte-erreur { margin: 0; color: var(--brique); font-size: 15px; }

/* ══ 11. LA FRISE DES SAISONS (lot 6) ═════════════════════════════════════
   Douze barres, une par mois, hautes de l'indice du mois — 100 pour le plus
   fort. §3 section 3 du brief v4.

   PAS DE GRAPHIQUE, PAS DE SVG, PAS DE JAVASCRIPT : douze <div> et une
   hauteur en pourcentage. Une courbe demanderait une bibliothèque, ne se
   lirait pas au clavier et ne dirait rien de plus. Ce qu'on veut montrer
   tient en une phrase — « ça monte en juillet, ça redescend en septembre » —
   et douze barres la montrent mieux qu'une courbe.

   LA HAUTEUR EST RELATIVE, jamais absolue : la frise compare les mois entre
   eux, elle ne prétend pas dire combien de nuitées. Le chiffre absolu serait
   départemental, donc faux à l'échelle de la page. */
.charte-v4 .v4-frise {
  display: grid; grid-template-columns: repeat(12, 1fr); gap: 4px;
  align-items: end; height: 150px; margin: 0;
}
.charte-v4 .v4-frise > div { display: flex; flex-direction: column; justify-content: flex-end; height: 100%; }
.charte-v4 .v4-frise-barre {
  border-radius: 6px 6px 0 0; background: var(--voile); min-height: 4px;
}
/* Trois saisons, trois valeurs — la couleur double le niveau, elle ne le
   remplace pas : le libellé reste écrit sous la frise, et la légende des
   couleurs est donnée en toutes lettres. Un daltonien lit la même chose. */
.charte-v4 .v4-frise-barre--haute   { background: var(--ambre-vif); }
.charte-v4 .v4-frise-barre--moyenne { background: var(--cadastre); opacity: .55; }
.charte-v4 .v4-frise-barre--basse   { background: var(--voile); }
/* ⚠️ `max-width: none` EST INDISPENSABLE, pas cosmétique. Cette ligne de mois
   est un <p>, et style.css borne tous les paragraphes à la largeur de lecture
   (--mesure, environ 486 px). La frise au-dessus est un <div> : elle n'est pas
   bornée. Sans cette annulation, les douze mois se serrent dans 486 px pendant
   que les douze barres en occupent 778, et la frise ment — les barres de
   juillet et août tombent en face de « oct. » et « nov. ».
   Constaté EN PRODUCTION le 22/09/2026 : en local, la colonne était plus
   étroite que la largeur de lecture, le défaut ne se voyait pas. */
.charte-v4 .v4-frise-mois {
  display: grid; grid-template-columns: repeat(12, 1fr); gap: 4px;
  max-width: none;
  margin: 6px 0 0; font-size: 11px; line-height: 1.2; color: var(--encre-2);
  text-align: center; font-variant-numeric: tabular-nums;
}
.charte-v4 .v4-bande--nuit .v4-frise-mois { color: var(--sur-nuit-2); }
.charte-v4 .v4-frise-legende {
  display: flex; flex-wrap: wrap; gap: 14px; margin: 14px 0 0;
  font-size: 13px; color: var(--encre-2);
}
.charte-v4 .v4-frise-legende span { display: inline-flex; align-items: center; gap: 6px; }
.charte-v4 .v4-frise-legende i {
  width: 12px; height: 12px; border-radius: 3px; flex: 0 0 auto;
}

/* ══ 12. LES QUATRE FACTEURS (lot 6) ══════════════════════════════════════
   §3 section 4. Quatre entrées, titre et exemples, sur la bande nuit. Pas une
   tuile : une tuile porte un chiffre, ici il n'y en a aucun — et c'est le
   propos, ces quatre-là sont ce que la page NE PEUT PAS savoir. */
.charte-v4 .v4-facteurs {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px 28px; margin: 0; padding: 0; list-style: none;
}
@media (max-width: 560px) { .charte-v4 .v4-facteurs { grid-template-columns: 1fr; } }
.charte-v4 .v4-facteurs > li {
  display: flex; flex-direction: column; gap: 2px;
  padding: 18px; border-radius: 18px; background: rgba(255, 255, 255, .06);
}
.charte-v4 .v4-facteurs strong { font-size: 16px; font-weight: 600; }
.charte-v4 .v4-facteurs span { font-size: 14px; line-height: 1.5; color: var(--sur-nuit-2); }

/* ══ 13. L'APERÇU DU RÉSULTAT (lot 6, partagé au lot 7) ═══════════════════
   La même carte sur la page commune et sur l'accueil — includes/apercu-
   estimation.php. Elle vit ici depuis qu'elle sert deux fois : une copie dans
   chaque page aurait divergé au premier ajustement, et c'est une PROMESSE
   faite au visiteur, pas une décoration.

   ELLE EST BLANCHE SUR FOND NUIT, comme la maquette : c'est un aperçu du
   résultat, et le résultat est sur fond clair. Elle doit donc ANNULER
   l'héritage de la bande — sans quoi son texte reste en gris clair et devient
   illisible sur blanc. C'est le piège du lot 2 : une règle de bande à trois
   classes bat une règle de carte à deux, et la seule parade est un sélecteur
   composé qui nomme les deux. */
.charte-v4 .v4-bande--nuit .v4-apercu {
  background: var(--carte); color: var(--encre);
  display: flex; flex-direction: column; gap: 16px;
}
.charte-v4 .v4-bande--nuit .v4-apercu p,
.charte-v4 .v4-bande--nuit .v4-apercu .v4-legende { color: var(--encre-doux); }
.charte-v4 .v4-bande--nuit .v4-apercu .v4-reglette-fond { background: var(--voile); }
.charte-v4 .v4-bande--nuit .v4-apercu .v4-reglette-bande { background: var(--cadastre); opacity: .28; }
.charte-v4 .v4-apercu-tete {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  margin: 0; font-size: 16px; font-weight: 500;
}
/* « exemple » en pastille, pas en petites capitales perdues dans un coin :
   c'est l'avertissement le plus important de la carte. */
.charte-v4 .v4-apercu-marque {
  font-size: 12px; font-weight: 500; padding: 4px 10px; border-radius: 999px;
  background: var(--voile); color: var(--cadastre);
}

/* ══ 14. L'ÉCRAN 6 : INDICE DE CONFIANCE ET CARTE VERROUILLÉE (lot 9) ═════
   §12. Les deux vivent sur la bande nuit du résultat. */

/* ── L'INDICE ─────────────────────────────────────────────────────────────
   La pastille porte la couleur, la phrase porte le sens. La couleur seule ne
   suffit jamais : un daltonien lit le même mot. */
/* ⚠️ EN COLONNE, ET `align-self: start`. La bande de résultat est une GRILLE
   (lot 4) : tout ce qu'on y pose devient un élément de grille et s'étire sur
   la hauteur de sa rangée. En ligne avec `align-items: baseline`, la pastille
   restait en haut et sa phrase tombait 256 px plus bas, séparées par un vide
   que rien n'expliquait. Constaté à l'écran, invisible dans le code. */
.charte-v4 .estimation-indice {
  display: flex; flex-direction: column; align-items: flex-start; gap: 8px;
  align-self: start; margin: 20px 0 0;
}
.charte-v4 .estimation-indice .indice-pastille {
  display: inline-flex; align-items: center;
  padding: 5px 12px; border-radius: 999px;
  font-size: 13px; font-weight: 600; white-space: nowrap;
}
.charte-v4 .estimation-indice--solide .indice-pastille { background: var(--ambre-vif); color: var(--nuit); }
.charte-v4 .estimation-indice--moyen  .indice-pastille { background: var(--voile);     color: var(--nuit); }
.charte-v4 .estimation-indice--faible .indice-pastille { background: var(--filet-nuit); color: #FFFFFF; }

/* ── LA CARTE VERROUILLÉE ─────────────────────────────────────────────────
   Blanche sur la bande nuit, comme l'aperçu du §3 : c'est le résultat qu'elle
   promet, et le résultat est sur fond clair. Même piège de spécificité, même
   parade — un sélecteur composé qui nomme la bande ET la carte. */
.charte-v4 .estimation-resultat .estimation-verrou {
  background: var(--carte); color: var(--encre);
  border-radius: var(--r-24); padding: clamp(20px, 3vw, 30px);
  margin: 28px 0 0; max-width: 620px;
  display: flex; flex-direction: column; gap: 14px;
}
.charte-v4 .estimation-resultat .estimation-verrou h2,
.charte-v4 .estimation-resultat .estimation-verrou p,
.charte-v4 .estimation-resultat .estimation-verrou label,
.charte-v4 .estimation-resultat .estimation-verrou .v4-legende { color: var(--encre-doux); }
.charte-v4 .estimation-resultat .estimation-verrou h2 { color: var(--encre); margin: 0; }

.charte-v4 .estimation-verrou form { display: flex; flex-direction: column; gap: 12px; margin: 0; }
.charte-v4 .estimation-verrou .verrou-label { font-size: 15px; font-weight: 500; }
.charte-v4 .estimation-verrou input[type="email"] {
  min-height: var(--cible); padding: 0 14px;
  border: 2px solid var(--cadastre); border-radius: var(--r-14);
  font-size: 16px; background: #FFFFFF; color: var(--encre);
}
/* La case facultative est DÉTACHÉE du champ : deux contrôles collés se
   remplissent ensemble par réflexe, et celle-ci ne doit pas se cocher par
   réflexe (§12, RGPD art. 4-11). */
.charte-v4 .estimation-verrou .verrou-option {
  display: flex; gap: 10px; align-items: flex-start;
  margin: 6px 0 2px; padding: 12px; border-radius: 12px; background: var(--papier);
  font-size: 14px; line-height: 1.5;
}
.charte-v4 .estimation-verrou .verrou-option input { margin-top: 3px; flex: 0 0 auto; }
.charte-v4 .estimation-verrou .verrou-erreur {
  margin: 0; padding: 10px 12px; border-radius: 10px;
  background: var(--brique); color: #FFFFFF; font-size: 14px;
}
.charte-v4 .estimation-verrou .verrou-mention { margin: 0; }

/* ══ 15. ÉCRANS 7 ET 8 : PANNEAU DE RAPPEL ET CONFIRMATION (lot 9) ════════ */

.charte-v4 .panneau-rappel { display: flex; flex-direction: column; gap: 20px; max-width: 620px; margin: 24px 0 0; }
.charte-v4 .panneau-duo { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 560px) { .charte-v4 .panneau-duo { grid-template-columns: 1fr; } }
.charte-v4 .panneau-champ { display: flex; flex-direction: column; gap: 6px; margin: 0; }
.charte-v4 .panneau-champ label { font-size: 15px; font-weight: 500; }
.charte-v4 .panneau-champ input {
  min-height: var(--cible); padding: 0 14px;
  border: 2px solid var(--cadastre); border-radius: var(--r-14);
  font-size: 16px; background: var(--carte); color: var(--encre);
}
/* L'email est montré, pas resaisi : le champ doit se voir comme une
   information, pas comme une invitation à le changer. */
.charte-v4 .panneau-champ input[readonly] {
  border-color: var(--trait); background: var(--papier); color: var(--encre-2);
}

/* CE QU'ON SAIT DÉJÀ (02/10/2026) : un relevé, pas un formulaire. Fond papier
   et pas de bordure de champ, pour qu'il ne se lise pas comme une question. */
.charte-v4 .panneau-connu {
  padding: 14px 16px; border-radius: var(--r-14); background: var(--papier);
}
.charte-v4 .panneau-connu > .v4-legende { margin: 0 0 8px; }
.charte-v4 .panneau-connu ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.charte-v4 .panneau-connu li { display: flex; gap: 10px; flex-wrap: wrap; font-size: 15px; }
.charte-v4 .panneau-connu li span { min-width: 6.5em; color: var(--encre-2); }
.charte-v4 .panneau-connu li strong { overflow-wrap: anywhere; }
.charte-v4 .panneau-modifier { margin: 10px 0 0; }
.charte-v4 .panneau-modifier > summary {
  cursor: pointer; color: var(--cadastre); font-size: 14px; font-weight: 500;
  text-decoration: underline; text-underline-offset: 3px;
}
.charte-v4 .panneau-modifier[open] > summary { margin: 0 0 12px; }

.charte-v4 .panneau-choix { border: 0; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.charte-v4 .panneau-choix legend { padding: 0; margin: 0 0 10px; font-size: 15px; font-weight: 500; }
.charte-v4 .panneau-choix label {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: var(--cible); padding: 0 16px;
  border: 1px solid var(--trait); border-radius: 999px; cursor: pointer;
}
.charte-v4 .panneau-choix label:has(input:checked) {
  border-color: var(--cadastre); background: var(--voile); font-weight: 600;
}
/* `:has()` n'est pas partout : le contour de focus reste la garantie de base. */
.charte-v4 .panneau-choix input:focus-visible { outline: 2px solid var(--cadastre); outline-offset: 3px; }

/* La mention de transmission n'est pas une note de bas de page : c'est le
   texte sur lequel le consentement est donné. Filet ambre, corps lisible. */
.charte-v4 .panneau-mention {
  margin: 0; padding: 14px 16px; border-left: 3px solid var(--ambre-vif);
  background: var(--papier); font-size: 15px; line-height: 1.6;
}
.charte-v4 .panneau-erreur {
  margin: 16px 0 0; padding: 12px 14px; border-radius: 10px;
  background: var(--brique); color: #FFFFFF;
}

/* ── LA CONFIRMATION ──────────────────────────────────────────────────────
   Trois étapes numérotées. Le <ol> porte l'ordre ; les numéros dessinés sont
   décoratifs et n'ont pas à être relus à voix haute. */
.charte-v4 .confirme-etapes {
  display: flex; flex-direction: column; gap: 18px;
  margin: 28px 0 0; padding: 0; list-style: none; counter-reset: etape;
}
.charte-v4 .confirme-etapes > li {
  display: flex; flex-direction: column; gap: 4px;
  padding-left: 46px; position: relative; max-width: var(--mesure);
}
.charte-v4 .confirme-etapes > li::before {
  counter-increment: etape; content: counter(etape);
  position: absolute; left: 0; top: 0;
  width: 30px; height: 30px; border-radius: 999px;
  display: flex; align-items: center; justify-content: center;
  background: var(--voile); color: var(--cadastre); font-weight: 600; font-size: 15px;
}
.charte-v4 .confirme-etapes strong { font-size: 17px; }
.charte-v4 .confirme-etapes span { font-size: 15px; line-height: 1.55; color: var(--encre-doux); }

/* ══ 16. L'ARTICLE ET SA MARGE (lot 10) ═══════════════════════════════════
   Brief du 22/09/2026 §13, maquettes Article-desktop et Article-mobile.

   C'EST ICI QUE LES DEUX ÉLÉMENTS COLLANTS DE LA SECTION 9 SERVENT ENFIN :
   dessinés au lot 2, aucune page ne les employait jusqu'à ce gabarit.

   ⚠️ TOUTES LES MARGES VERTICALES SONT ÉCRITES, y compris quand 0 suffirait.
   style.css pose `section { margin: var(--space-2xl) 0 }` sur TOUTE balise
   <section> du site : la FAQ et le bloc des sources en sont, et héritaient de
   64 px qui les décollaient du reste de la colonne. Même piège qu'au lot 7 sur
   les bandes. */

/* ── La tête ──────────────────────────────────────────────────────────── */
.charte-v4 .art-tete { padding-top: clamp(24px, 4vw, 48px); }
.charte-v4 .art-chapo { margin: 18px 0 0; }
.charte-v4 .art-signature { margin: 20px 0 0; }
.charte-v4 .art-signature a { color: var(--encre-2); }
.charte-v4 .art-avertissement {
  margin: 20px 0 0; padding: 14px 18px; max-width: 68ch;
  background: var(--voile); border-radius: var(--r-14);
  font-size: 15px; line-height: 1.6; color: var(--encre);
}

/* ── Les deux colonnes ────────────────────────────────────────────────── */
/* La marge fait 340 px : en dessous, le titre du sommaire se coupe en deux
   lignes sur la moitié des entrées. Elle disparaît sous 900 px, où le
   sommaire redevient un bloc repliable au fil du texte. */
.charte-v4 .art-grille { display: grid; gap: clamp(24px, 4vw, 56px); align-items: start; }
@media (min-width: 900px) {
  .charte-v4 .art-grille { grid-template-columns: minmax(0, 1fr) 340px; }
}
.charte-v4 .art-colonne { min-width: 0; }

/* ── « L'essentiel » ──────────────────────────────────────────────────── */
.charte-v4 .art-essentiel {
  background: var(--nuit); color: #FFFFFF;
  border-radius: var(--r-24); padding: clamp(20px, 3vw, 28px);
  margin: 0 0 32px;
}
.charte-v4 .art-essentiel .v4-titre-3 { color: #FFFFFF; margin: 0 0 14px; }
.charte-v4 .art-essentiel ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.charte-v4 .art-essentiel li { display: flex; gap: 12px; align-items: flex-start; }
.charte-v4 .art-essentiel li span { color: var(--sur-nuit); font-size: 16px; line-height: 1.55; }
/* Le picto suit le texte : en cadastre il disparaîtrait sur le fond nuit. */
.charte-v4 .art-essentiel .v4-picto { stroke: var(--ambre-vif); margin-top: 2px; }

/* ── Le sommaire repliable, sous 900 px seulement ─────────────────────── */
.charte-v4 .art-sommaire-mobile {
  margin: 0 0 28px; padding: 0 18px;
  background: var(--carte); border: 1px solid var(--trait); border-radius: var(--r-14);
}
.charte-v4 .art-sommaire-mobile > summary {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  min-height: var(--cible); padding: 14px 0; cursor: pointer; list-style: none;
  font-family: var(--titre); font-weight: 600; font-size: 18px;
}
.charte-v4 .art-sommaire-mobile > summary::-webkit-details-marker { display: none; }
.charte-v4 .art-sommaire-mobile ol { margin: 0 0 16px; padding-left: 1.2em; }
.charte-v4 .art-sommaire-mobile li { margin: 0 0 8px; line-height: 1.45; }
.charte-v4 .art-sommaire-mobile a { color: var(--cadastre); }
@media (min-width: 900px) { .charte-v4 .art-sommaire-mobile { display: none; } }

/* ── Le corps rédigé ──────────────────────────────────────────────────── */
/* `scroll-margin-top` : sans lui, un clic dans le sommaire cale le titre visé
   contre le bord haut de la fenêtre, à la limite du lisible. */
.charte-v4 .art-texte h2 {
  font-family: var(--titre); font-weight: 600; letter-spacing: -.015em;
  font-size: clamp(24px, 2.6vw, 32px); line-height: 1.2;
  margin: 40px 0 14px; scroll-margin-top: 24px;
}
.charte-v4 .art-texte h2:first-child { margin-top: 0; }
.charte-v4 .art-texte h3 {
  font-family: var(--titre); font-weight: 600;
  font-size: clamp(19px, 2vw, 22px); line-height: 1.3;
  margin: 28px 0 10px; scroll-margin-top: 24px;
}
.charte-v4 .art-texte p { margin: 0 0 16px; font-size: 17px; line-height: 1.7; color: var(--encre-doux); max-width: 68ch; }
@media (min-width: 900px) { .charte-v4 .art-texte p { font-size: 18px; } }
.charte-v4 .art-texte ul,
.charte-v4 .art-texte ol { margin: 0 0 18px; padding-left: 1.25em; max-width: 68ch; }
.charte-v4 .art-texte li { margin: 0 0 8px; line-height: 1.65; color: var(--encre-doux); }
.charte-v4 .art-texte a { color: var(--cadastre); text-decoration: underline; text-underline-offset: 2px; }
.charte-v4 .art-texte a:hover { color: var(--cadastre-clair); }
.charte-v4 .art-texte strong { font-weight: 600; color: var(--encre); }

/* Le tableau défile DANS son conteneur : c'est la page qui ne doit jamais
   partir en défilement horizontal, pas le tableau. La classe vient des corps
   déjà rédigés — on la reprend telle quelle plutôt que de réécrire le HTML. */
.charte-v4 .art-texte .tableau-defilant { overflow-x: auto; margin: 0 0 22px; max-width: 100%; }
.charte-v4 .art-texte table {
  border-collapse: collapse; width: 100%; min-width: 460px; font-size: 16px;
  background: var(--carte); border-radius: var(--r-14);
}
.charte-v4 .art-texte th,
.charte-v4 .art-texte td {
  text-align: left; padding: 12px 16px; border-bottom: 1px solid var(--trait);
  font-variant-numeric: tabular-nums;
}
.charte-v4 .art-texte th {
  font-family: var(--texte); font-weight: 600; font-size: 15px;
  color: var(--encre-2); border-bottom-width: 2px;
}
.charte-v4 .art-texte caption {
  caption-side: top; text-align: left; padding: 0 0 8px;
  font-family: var(--titre); font-weight: 600; font-size: 18px;
}
.charte-v4 .art-texte figcaption,
.charte-v4 .art-texte .source-tableau { font-size: 13px; color: var(--encre-2); margin: 0 0 22px; }

/* ── L'estimateur du milieu ───────────────────────────────────────────── */
.charte-v4 .art-estimateur { margin: 32px 0; gap: 12px; }
.charte-v4 .art-estimateur .v4-texte { font-size: 16px; }
/* Dans la carte collée il n'a plus de marge haute : le sommaire le précède. */
.charte-v4 .art-marge .art-estimateur { margin: 16px 0 0; }

/* ── « Dans ta commune » ──────────────────────────────────────────────── */
.charte-v4 .art-commune {
  margin: 36px 0 0; padding: clamp(18px, 3vw, 26px);
  background: var(--voile); border-radius: var(--r-20);
  display: flex; flex-direction: column; gap: 10px;
}
.charte-v4 .art-commune .v4-texte { font-size: 16px; }

/* ── FAQ et sources ───────────────────────────────────────────────────── */
.charte-v4 .art-faq { margin: 48px 0 0; }
.charte-v4 .art-faq > h2 { margin: 0 0 12px; }
.charte-v4 .art-sources { margin: 40px 0 0; border-top: 1px solid var(--trait); padding-top: 24px; }
.charte-v4 .art-sources h2 { margin: 0 0 12px; }
.charte-v4 .art-sources ul { margin: 0 0 16px; padding-left: 1.2em; }
.charte-v4 .art-sources li { margin: 0 0 8px; font-size: 15px; line-height: 1.55; }
.charte-v4 .art-sources a { color: var(--cadastre); }
.charte-v4 .art-mention { max-width: 68ch; }

/* ── La carte collée ──────────────────────────────────────────────────── */
.charte-v4 .art-marge { display: none; }
@media (min-width: 900px) { .charte-v4 .art-marge { display: block; } }
.charte-v4 .art-sommaire {
  background: var(--carte); border: 1px solid var(--trait);
  border-radius: var(--r-20); padding: 20px 22px;
}
.charte-v4 .art-sommaire > .v4-legende { margin: 0 0 10px; }
.charte-v4 .art-sommaire ol { list-style: none; margin: 0; padding: 0; }
.charte-v4 .art-sommaire li { margin: 0 0 4px; }
.charte-v4 .art-sommaire a {
  display: block; padding: 6px 0 6px 12px; font-size: 15px; line-height: 1.4;
  color: var(--encre-2); text-decoration: none;
  border-left: 2px solid var(--trait);
}
.charte-v4 .art-sommaire a:hover { color: var(--cadastre); }
/* LA SECTION ACTIVE (§13). Marquée par le script, jamais par le survol : elle
   dit où on EST, pas où on pointe. */
.charte-v4 .art-sommaire a.est-actif {
  color: var(--cadastre); font-weight: 600; border-left-color: var(--cadastre);
}

/* ── « À lire ensuite » et l'appel final ──────────────────────────────── */
.charte-v4 .art-suite h2 { margin: 0 0 20px; }
.charte-v4 .art-suite-cartes {
  display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
.charte-v4 .art-suite-carte { text-decoration: none; color: inherit; gap: 8px; }
.charte-v4 .art-suite-carte:hover { border-color: var(--cadastre); }
.charte-v4 .art-appel-contenu { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }

/* ── LE CHAMP DE RECHERCHE DE COMMUNE, HABILLÉ EN v4 ──────────────────────
   Le composant est celui de l'accueil (includes/recherche-commune.php) et il
   n'est PAS dupliqué : deux moteurs de recherche sur un site, c'est deux
   comportements qui divergent. On lui repeint seulement sa boîte, pour qu'il
   ne détonne pas au milieu d'une bande v4. */
.charte-v4 .recherche { margin: 0; }
.charte-v4 .recherche-champ {
  display: flex; gap: 10px; align-items: stretch; flex-wrap: wrap; position: relative;
}
.charte-v4 .recherche-saisie {
  flex: 1 1 220px; min-width: 0; min-height: 58px; padding: 0 16px;
  border: 2px solid var(--cadastre); border-radius: var(--r-14);
  background: var(--carte); font-family: var(--texte); font-size: 17px; color: var(--encre);
}
.charte-v4 .recherche-bouton {
  flex: 0 0 auto; min-height: var(--h-bouton); padding: 0 24px; border: 0;
  border-radius: var(--r-14); cursor: pointer;
  font-family: var(--texte); font-size: 17px; font-weight: 600;
  background: var(--ambre-vif); color: var(--encre);
}
.charte-v4 .recherche-bouton:hover { background: var(--ambre); }

/* ── CE QUE LES CORPS DÉJÀ RÉDIGÉS PORTENT ────────────────────────────────
   Trois classes vivent dans les fichiers .html des articles, écrites avant la
   v4. On les reprend telles quelles plutôt que de rééditer des textes vérifiés
   et datés : on ne touche pas à un contenu pour une raison de feuille de style.

   Le socle national est de la DONNÉE relue à chaque affichage, pas de la prose
   (includes/socle-national.php) : il garde sa présentation en relevé, séparé au
   filet, plutôt que d'être fondu dans le texte. */
.charte-v4 .art-texte .pilier-conclusion,
.charte-v4 .art-texte .guide-conclusion {
  border-top: 1px solid var(--trait); padding-top: 20px; margin-top: 32px;
}
.charte-v4 .art-texte .socle-national { margin: 20px 0 30px; }
.charte-v4 .art-texte .socle-verdict { padding: 16px 0; border-top: 1px solid var(--trait); }
.charte-v4 .art-texte .socle-verdict h3 { margin: 0 0 6px; }
.charte-v4 .art-texte .socle-verdict p { margin: 0; }
.charte-v4 .art-texte .socle-verdict ul { margin: 10px 0 0; }
.charte-v4 .art-texte .socle-note { margin: 18px 0 0; font-size: 15px; color: var(--encre-2); line-height: 1.6; }

/* ══ 17. LA PAGE DE RUBRIQUE (lot 10) ═════════════════════════════════════
   Brief du 22/09/2026 §13, maquette Rubrique-mobile. Une rubrique est un
   sommaire : elle montre par où commencer, elle ne déroule pas un fil. */

.charte-v4 .rub-chapo { margin: 18px 0 0; }
.charte-v4 .rub-champ { gap: 12px; }
.charte-v4 .rub-pages h2 { margin: 0 0 20px; }

/* LE PILIER, EN GRANDE CARTE NUIT. Une seule par rubrique : c'est ce qui rend
   le choix lisible d'un coup d'œil. Les guides suivent en cartes claires. */
.charte-v4 .rub-pilier {
  display: flex; flex-direction: column; gap: 10px;
  background: var(--nuit); color: #FFFFFF; text-decoration: none;
  border-radius: var(--r-24); padding: clamp(22px, 3.5vw, 36px);
  margin: 0 0 16px;
}
.charte-v4 .rub-pilier .v4-legende { color: var(--ambre-vif); }
.charte-v4 .rub-pilier .v4-titre-2 { color: #FFFFFF; max-width: 22ch; }
.charte-v4 .rub-pilier .rub-resume { color: var(--sur-nuit); }
.charte-v4 .rub-pilier:hover { background: #0C1A17; }

.charte-v4 .rub-cartes {
  display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}
.charte-v4 .rub-carte { text-decoration: none; color: inherit; gap: 8px; }
.charte-v4 .rub-carte:hover { border-color: var(--cadastre); }
.charte-v4 .rub-resume { font-size: 16px; line-height: 1.55; color: var(--encre-doux); max-width: 60ch; }

/* Le lien « Lire » de la grande carte : une flèche qui avance au survol, et
   rien d'autre. Le picto suit le texte, sinon il disparaît sur le fond nuit. */
.charte-v4 .rub-lire {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 4px;
  font-weight: 600; color: var(--ambre-vif);
}
.charte-v4 .rub-lire .v4-picto { width: 20px; height: 20px; stroke: currentColor; transition: transform .2s ease-out; }
.charte-v4 .rub-pilier:hover .rub-lire .v4-picto { transform: translateX(3px); }
@media (prefers-reduced-motion: reduce) {
  .charte-v4 .rub-lire .v4-picto { transition: none; }
  .charte-v4 .rub-pilier:hover .rub-lire .v4-picto { transform: none; }
}

/* Le corps rédigé d'une rubrique emprunte la typographie de l'article : deux
   échelles de texte long sur un même site, c'est une de trop. */
.charte-v4 .rub-corps { max-width: 72ch; }
.charte-v4 .rub-corps h2:first-child { margin-top: 0; }

.charte-v4 .rub-communes h2 { margin: 0 0 20px; }
.charte-v4 .rub-pastilles { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 16px; }

/* ══ 18. LE PARCOURS EN PLEIN ÉCRAN (lot 10) ══════════════════════════════
   §13 : « /estimation/ : page noindex, plein écran, seulement "retour" et
   "quitter". » Maquettes Parcours-1 à Parcours-5.

   Le menu et le pied de page sont retirés par includes/header.php et
   includes/footer.php ; ici, seulement la barre qui les remplace. */

.charte-v4 .parcours-barre {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 10px 12px; background: var(--carte);
}
/* Les deux seuls contrôles de l'écran. 44 px, le plancher tactile de la
   charte, alors que l'icône n'en fait que 22 : c'est la ZONE qui grandit. */
.charte-v4 .parcours-bouton {
  display: inline-flex; align-items: center; justify-content: center;
  width: var(--cible); height: var(--cible);
  color: var(--encre); text-decoration: none; border-radius: 999px;
}
.charte-v4 .parcours-bouton:hover { background: var(--voile); }
.charte-v4 .parcours-bouton svg {
  width: 22px; height: 22px; fill: none; stroke: currentColor;
  stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}
.charte-v4 .parcours-compteur { font-size: 14px; color: var(--encre-2); font-variant-numeric: tabular-nums; }

.charte-v4 .parcours-jauge { height: 4px; background: var(--voile); }
.charte-v4 .parcours-jauge > span {
  display: block; height: 4px; background: var(--cadastre);
  transition: width .2s ease-out;
}
@media (prefers-reduced-motion: reduce) {
  .charte-v4 .parcours-jauge > span { transition: none; }
}

/* UNE SEULE PROGRESSION À L'ÉCRAN. Le formulaire porte la sienne — barre et
   pastilles numérotées — et elle sert sur l'accueil et les pages commune, où
   il n'y a pas de barre de parcours. Dans le plein écran, les deux se
   superposeraient : c'est celle du haut qui reste, parce qu'elle est fixée au
   même endroit d'un écran à l'autre. */
.charte-v4.parcours-plein .form-progress { display: none; }
.charte-v4.parcours-plein .lead-header { display: none; }

/* ── L'UNITÉ D'UN GRAND CHIFFRE (22/09/2026) ──────────────────────────────
   Elle se rend à un tiers de la taille du nombre, et jamais à la sienne. À
   56 px, le mot « établissements » mesure 396 px : il ne tenait pas dans une
   tuile de 224 px, il ne pouvait pas se couper, et il poussait la page entière
   à 1 350 px sur un écran de 1 280 — tout le site partait en défilement
   horizontal à cause d'un mot.

   `overflow-wrap: anywhere` est la ceinture : le jour où une unité plus longue
   entre dans le référentiel, elle se coupera au lieu de déborder. */
.charte-v4 .v4-chiffre { overflow-wrap: anywhere; }
.charte-v4 .v4-chiffre-unite {
  font-size: .34em; font-weight: 500; letter-spacing: 0;
  margin-left: .18em; white-space: nowrap;
}

/* ══ 19. LE HÉROS : DEUX CADRES EMPILÉS, ET UN H1 QUI FLOTTAIT (22/09/2026) ══

   ⚠️ LE FORMULAIRE ÉTAIT UNE CARTE DANS UNE CARTE. `.lead-container` vient de
   la v3, où il était une section autonome : fond blanc, coins arrondis, ombre,
   et 64 px de marge intérieure sur les quatre côtés. Depuis le lot 7 il vit
   DANS `.v4-carte-estimateur`, qui a déjà les siens. Les deux s'additionnaient :

     · 128 px de hauteur en pur vide, avant même la première ligne ;
     · une colonne de texte réduite à 256 px dans une carte de 440, donc tout
       ce qui s'y trouve cassé en lignes très courtes, donc encore de la hauteur.

   Résultat mesuré sur un écran de 1 920 × 950 : la carte faisait 943 px de haut
   et le bouton d'envoi tombait HORS DE L'ÉCRAN, à 1 003 px. Le visiteur devait
   faire défiler pour atteindre le seul champ de la page.

   On ne touche pas à `.lead-container` lui-même : il sert encore en plein écran
   sur /estimation/, où ses 64 px sont à leur place. On le neutralise seulement
   là où il est déjà dans une carte. */
.charte-v4 .v4-carte-estimateur .lead-container {
  padding: 0; max-width: none; background: transparent; border-radius: 0;
}
.charte-v4 .v4-carte-estimateur .lead-header { text-align: left; margin-bottom: 20px; }
.charte-v4 .v4-carte-estimateur .form-progress { margin-bottom: 24px; }

/* LE H1 PART DU HAUT DE LA BANDE, il ne flotte plus au milieu. `.v4-duo` centre
   ses deux colonnes l'une par rapport à l'autre, ce qui est juste quand elles
   ont des hauteurs voisines. Dans le héros, la colonne de droite est un
   formulaire : le titre de la page se retrouvait poussé à 399 px du haut de
   l'écran, soit 42 % de la hauteur visible, pour être centré sur lui. */
.charte-v4 .v4-duo--haut { align-items: start; }

/* Le titre d'étape était CENTRÉ (héritage v3, où le formulaire occupait une
   page entière) au milieu d'une carte dont tout le reste est aligné à gauche :
   le libellé, l'aide, le champ. Un seul élément centré dans une colonne de
   384 px se lit comme une erreur de mise en page, et c'en était une. */
.charte-v4 .v4-carte-estimateur .form-step h3 { text-align: left; margin-bottom: 14px; }

/* Même correction dans le parcours plein écran, où la maquette Parcours-1
   aligne aussi le titre et l'aide à gauche, au-dessus d'un champ qui l'est. */
.charte-v4.parcours-plein .form-step h3,
.charte-v4.parcours-plein .form-texte { text-align: left; }

/* ══ 20. « EN BREF » : LES CHIFFRES SUR UNE MÊME LIGNE (22/09/2026) ════════
   Signalé par Vanessa sur Bordeaux, mesuré ensuite : dans la même rangée,
   « 4 342 » commençait 64 px plus bas que « 106 ».

   POURQUOI. Les tuiles alignent leur contenu EN BAS (`flex-end`), comme la
   maquette. Ça marche dans la maquette parce qu'elle pose deux rangées ÉGALES
   et une hauteur fixe de 340 px : tous les blocs font la même taille, donc les
   chiffres tombent au même endroit. Notre grille, elle, laisse chaque rangée
   se dimensionner sur son contenu — 203 px pour l'une, 238 px pour l'autre —
   et surtout le bloc du chiffre n'a pas toujours la même hauteur depuis qu'il
   porte son unité sur une seconde ligne (« 106 » + « établissements » fait
   deux lignes, « 4 342 €/m² » une seule). Aligné par le bas, un bloc plus haut
   remonte son chiffre. C'est mécanique, et c'est exactement ce qui se voyait.

   LA PARADE : des rangées égales, et les chiffres calés EN HAUT. Le chiffre est
   ce qu'on lit en premier et ce qu'on compare d'une tuile à l'autre ; c'est LUI
   qui doit être sur une ligne commune, pas le bas d'un bloc de texte dont la
   longueur varie d'une source à l'autre. Les libellés et les sources coulent en
   dessous, et leurs différences de longueur ne se voient plus. */
.charte-v4 .v4-tuiles { grid-auto-rows: 1fr; }
.charte-v4 .v4-tuile { justify-content: flex-start; }

/* La tuile forte garde son calage en bas : c'est une affiche, pas une fiche.
   Son grand chiffre n'a rien à aligner — il est deux fois plus gros que les
   autres et occupe deux rangées à lui seul. */
.charte-v4 .v4-tuile.v4-tuile--forte { justify-content: flex-end; }

/* La confirmation d'envoi du rapport prend la place qu'occupait la fourchette
   annuelle : même bloc, mais une adresse électronique n'est pas un montant et
   ne se compose pas en chiffres géants. */
.charte-v4 .annuel-confirme { font-size: clamp(19px, 2.2vw, 24px); line-height: 1.3; word-break: break-word; }
.charte-v4 .verrou-quoi { margin: 6px 0 16px; }

/* ══ 21. L'ESTIMATEUR RESSORT (22/09/2026) ════════════════════════════════
   Demande de Vanessa : la carte se fondait dans la bande blanche de l'accueil
   — une carte blanche sur fond blanc, séparée par un filet qu'on ne voit pas.
   C'est pourtant le seul endroit de la page où l'on fait quelque chose.

   UN CADRE AMBRE, ET L'AMBRE N'EST PAS DÉCORATIF ICI : c'est la couleur que la
   charte réserve à la donnée et aux boutons d'estimation (§2). Le cadre dit
   donc la même chose que le bouton qu'il entoure, et il ne concurrence pas le
   cadastre, qui reste la couleur de la mise en relation.

   L'OMBRE RESTE LA SEULE DU SITE. Le §2 n'en autorise qu'une, réservée à cette
   carte : on la renforce et on la teinte, on n'en ajoute pas une seconde
   ailleurs. Le deuxième voile, très sombre et très court, pose la carte sur la
   page ; sans lui l'ombre ambre seule la fait flotter.

   ⚠️ CETTE RÈGLE DOIT RESTER APRÈS celle qui pose `--ombre-estimateur`, en
   tête de fichier : les deux portent `!important` et la même spécificité,
   c'est donc la dernière écrite qui gagne. */
.charte-v4 .v4-carte-estimateur {
  border: 2px solid var(--ambre-vif);
  box-shadow: 0 18px 44px rgba(232,169,36,.22),
              0 2px 10px rgba(10,46,41,.07) !important;
}

/* L'en-tête de l'écran de résultat traverse la grille des réglettes : c'est un
   titre de page, pas une colonne. Sans cette règle, le H1 se retrouvait dans la
   première cellule et le résumé du logement dans la seconde. */
.charte-v4 .estimation-resultat .estimation-entete { grid-column: 1 / -1; margin: 0 0 40px; }
.charte-v4 .estimation-resultat .estimation-entete .v4-titre-1 { margin: 6px 0 12px; }
.charte-v4 .estimation-resultat .estimation-entete .v4-texte { color: var(--sur-nuit); }

/* ══ 22. L'ÉCRAN DE RÉSULTAT EN RAPPORT (22/09/2026) ══════════════════════
   Demande de Vanessa : l'adresse en titre, les caractéristiques en étiquettes,
   les mesures dans des encadrés. Une page qui se parcourt du regard, pas une
   page qui se lit. */

/* Une adresse n'est pas une accroche : elle se compose plus petit qu'un titre
   de promesse, et elle se coupe proprement quand elle est longue. */
.charte-v4 .estimation-entete .v4-titre-1 {
  font-size: clamp(28px, 3.4vw, 44px); overflow-wrap: anywhere;
}

.charte-v4 .estimation-etiquettes {
  display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0 0;
}
.charte-v4 .estimation-etiquette {
  display: inline-flex; align-items: center; padding: 7px 14px;
  border-radius: 999px; font-size: 14px; line-height: 1.2;
  background: rgba(255,255,255,.10); color: #FFFFFF;
}
/* Le type de logement commande la comparaison : un studio et une maison ne se
   mesurent pas au même marché. L'ambre est la couleur de la donnée (§2). */
.charte-v4 .estimation-etiquette--type {
  background: var(--ambre-vif); color: var(--encre); font-weight: 600;
}

/* L'ENCADRÉ D'UNE MESURE. Un voile clair sur le fond nuit, pas un filet : sur
   un fond sombre, une bordure fine disparaît à la première compression JPEG
   d'une capture d'écran, et cette page est faite pour être montrée. */
.charte-v4 .estimation-encadre {
  background: rgba(255,255,255,.06); border-radius: var(--r-20);
  padding: clamp(18px, 2.4vw, 24px); margin: 0 0 20px;
}

/* ── COURTE DURÉE / LONGUE DURÉE (02/10/2026) ─────────────────────────────
   Le croquis de Vanessa : deux colonnes sous l'adresse, une par façon de
   louer. Elles traversent la grille des réglettes de la bande (§13) comme
   l'en-tête, puis se partagent la largeur. Sous 900 px, l'une sous l'autre,
   courte durée d'abord : c'est elle que le visiteur est venu chercher. */
.charte-v4 .estimation-resultat .estimation-duo { grid-column: 1 / -1; display: grid; gap: 40px; }
@media (min-width: 900px) {
  .charte-v4 .estimation-resultat .estimation-duo { grid-template-columns: 1fr 1fr; gap: 0 56px; }
  /* Le filet vertical du croquis, entre les deux colonnes. */
  .charte-v4 .estimation-resultat .duo-colonne--longue {
    border-left: 1px solid var(--filet-nuit); padding-left: 56px; margin-left: -28px;
  }
}
.charte-v4 .estimation-resultat .duo-titre { margin: 0 0 20px; font-size: clamp(20px, 2vw, 24px); }

/* ── UNE COULEUR PAR FAÇON DE LOUER (demande de Vanessa, 02/10/2026) ────────
   « Que les couleurs soient distinctes, afin qu'on fasse bien le parallèle. »
   L'ambre reste à la courte durée — c'est la couleur de la donnée dans la
   charte, et ces réglettes la portaient déjà. La longue durée prend un bleu
   ciel : la seule nouveauté de palette, réservée à cette colonne. Chaud pour
   la nuitée, froid pour le loyer au mois.

   ⚠️ LA COULEUR SUIT LA COLONNE, PAS LE COMPOSANT : la réglette et la classe
   `v4-chiffre--ambre` restent celles de la charte, seule la colonne longue
   durée les repeint. Contraste sur --nuit : 7,3:1 pour le bleu, 7,1:1 pour l'ambre (AAA). */
.charte-v4 .estimation-resultat .duo-colonne { --duo-accent: var(--ambre-vif); }
.charte-v4 .estimation-resultat .duo-colonne--longue { --duo-accent: #8CBCEB; }
.charte-v4 .estimation-resultat .duo-titre {
  display: flex; align-items: center; gap: 12px;
}
/* La pastille de couleur devant le titre : c'est elle qui dit, d'un coup
   d'œil, à quelle colonne appartient chaque chiffre plus bas. */
.charte-v4 .estimation-resultat .duo-titre::before {
  content: ""; flex: 0 0 auto; width: 12px; height: 12px; border-radius: 50%;
  background: var(--duo-accent);
}
.charte-v4 .estimation-resultat .duo-colonne .estimation-encadre {
  border-top: 3px solid var(--duo-accent);
}
.charte-v4 .estimation-resultat .duo-colonne--longue .v4-reglette-aiguille { background: var(--duo-accent); }
.charte-v4 .estimation-resultat .duo-colonne--longue .v4-chiffre--ambre { color: var(--duo-accent); }
.charte-v4 .estimation-resultat .estimation-ld .v4-texte { margin: 0 0 12px; }
/* Un loyer à quatre chiffres (« 1 160 € ») ne doit jamais perdre son « € » à
   la ligne : sur un téléphone de 375 px, les trois montants à 22 px ne
   tenaient pas dans les trois tiers de l'encadré. Insécable, et un cran plus
   petit sous 480 px. */
.charte-v4 .estimation-resultat .estimation-ld .v4-reglette-valeurs b { white-space: nowrap; }
@media (max-width: 480px) {
  .charte-v4 .estimation-resultat .estimation-ld .v4-reglette-valeurs b { font-size: 18px; }
}
.charte-v4 .estimation-resultat .ld-bien { margin: 14px 0 0; }
.charte-v4 .estimation-resultat .ld-bien strong { color: #FFFFFF; font-weight: 600; }
.charte-v4 .estimation-resultat .ld-source { margin: 14px 0 0; }

/* L'emplacement de l'outil de gestion locative : présent, mais inactif tant
   qu'il n'existe pas. Il doit SE LIRE inactif, pas seulement l'être. */
.charte-v4 .estimation-resultat .ld-partenaire {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin: 28px 0 0;
}
.charte-v4 .estimation-resultat .ld-partenaire .v4-bouton:disabled { opacity: .5; cursor: not-allowed; }

/* ── LA PARTIE FLOUTÉE ────────────────────────────────────────────────────
   Des formes sans chiffre (voir estimation.php) : deux traits et douze barres
   de même hauteur, brouillés, sous l'appel à débloquer. Un <details> natif :
   le résumé est le bouton, le formulaire d'email se déplie dessous. */
.charte-v4 .estimation-flou { margin: 24px 0 0; }
.charte-v4 .estimation-flou > summary { list-style: none; cursor: pointer; }
.charte-v4 .estimation-flou > summary::-webkit-details-marker { display: none; }
.charte-v4 .estimation-flou .flou-tete {
  position: relative; display: block; overflow: hidden;
  background: rgba(255,255,255,.06); border-radius: var(--r-20);
  padding: clamp(18px, 2.4vw, 24px); min-height: 168px;
}
.charte-v4 .estimation-flou .flou-forme {
  display: flex; flex-direction: column; gap: 12px; filter: blur(6px); opacity: .55;
}
.charte-v4 .estimation-flou .flou-ligne { display: block; height: 12px; border-radius: 6px; background: var(--sur-nuit-2); }
.charte-v4 .estimation-flou .flou-ligne--titre { width: 45%; }
.charte-v4 .estimation-flou .flou-ligne--chiffre { width: 70%; height: 26px; background: var(--ambre-vif); }
.charte-v4 .estimation-flou .flou-barres { display: flex; align-items: flex-end; gap: 6px; height: 56px; }
.charte-v4 .estimation-flou .flou-barres i { flex: 1; height: 60%; border-radius: 4px 4px 0 0; background: var(--sur-nuit-2); }
.charte-v4 .estimation-flou .flou-appel {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 12px; padding: 16px; text-align: center;
}
.charte-v4 .estimation-flou .flou-quoi { color: #FFFFFF; font-weight: 500; }
.charte-v4 .estimation-flou .flou-bouton { pointer-events: none; }
.charte-v4 .estimation-flou > summary:focus-visible .flou-bouton { outline: 2px solid var(--ambre-vif); outline-offset: 3px; }
/* Ouvert, l'appel a fait son travail : le formulaire prend le relais. */
.charte-v4 .estimation-flou[open] .flou-bouton { display: none; }
.charte-v4 .estimation-resultat .estimation-flou .estimation-verrou { margin: 16px 0 0; max-width: none; }
.charte-v4 .estimation-resultat .estimation-verrou h3 { color: var(--encre); margin: 0; }

/* ══ 23. LE HUB DE L'ANNUAIRE (22/09/2026) ════════════════════════════════
   /conciergerie/ est passé à la charte v4. Les règles ci-dessous n'habillent
   que ce qui, à l'intérieur des bandes, gardait l'allure de l'ancienne charte.

   ⚠️ AUCUN NOM DE CLASSE N'EST CHANGÉ. Le filtre par commune est un script qui
   interroge `.annuaire-groupe`, `.annuaire-ligne` et leurs attributs : renommer
   pour uniformiser aurait cassé le filtre en silence — il se serait affiché et
   n'aurait plus rien filtré. On repeint, on ne renomme pas. */

/* Le chapeau chiffré : deux nombres qui portent la page, à l'échelle du texte
   courant et non à celle d'un grand chiffre — ce sont des volumes, pas des
   mesures de marché. */
.charte-v4 .annuaire-chapeau { margin: 14px 0 0; font-size: 18px; color: var(--encre-doux); }
.charte-v4 .annuaire-chapeau .releve { color: var(--encre); font-weight: 600; }

/* Le champ de filtre prend la boîte des autres champs du site. */
.charte-v4 .annuaire-filtre { margin: 28px 0 0; max-width: 520px; }
.charte-v4 .annuaire-filtre .etiquette {
  display: block; margin: 0 0 8px; font-size: 15px; font-weight: 500; color: var(--encre);
}
.charte-v4 .annuaire-filtre input[type="search"] {
  width: 100%; min-height: 58px; padding: 0 16px;
  border: 2px solid var(--cadastre); border-radius: var(--r-14);
  background: var(--carte); font-family: var(--texte); font-size: 17px; color: var(--encre);
}
.charte-v4 .annuaire-filtre-compte,
.charte-v4 .annuaire-filtre-vide { margin: 8px 0 0; font-size: 14px; color: var(--encre-2); }

/* L'index par département. Les colonnes restent celles de style.css — c'est
   une mise en page qui marche et que la v4 ne remet pas en cause. */
.charte-v4 .annuaire-index { margin: 32px 0 0; }
.charte-v4 .annuaire-groupe-titre {
  font-family: var(--texte); font-size: 15px; font-weight: 600;
  color: var(--encre-2); letter-spacing: .02em;
}
.charte-v4 .annuaire-ligne a { color: var(--cadastre); font-size: 17px; }
.charte-v4 .annuaire-ligne a:hover { color: var(--cadastre-clair); }
.charte-v4 .annuaire-cp { color: var(--encre-2); font-size: 14px; font-variant-numeric: tabular-nums; }

/* Le bloc de méthode et le corps rédigé : même typographie que les articles,
   une seule échelle de texte long sur tout le site. */
.charte-v4 .bloc-methode-classement h2 {
  font-family: var(--titre); font-weight: 600; letter-spacing: -.015em;
  font-size: clamp(24px, 2.6vw, 32px); line-height: 1.2; margin: 0 0 12px;
}
.charte-v4 .bloc-methode-classement p { font-size: 17px; line-height: 1.7; color: var(--encre-doux); max-width: 68ch; }
.charte-v4 .annuaire-carte-legende { max-width: 68ch; margin: 8px 0 0; }
.charte-v4 .annuaire-vide-action { margin: 20px 0 0; }

/* ══ 24. LES 41 PAGES ANNUAIRE DE COMMUNE (22/09/2026) ═════════════════════
   /conciergerie/<commune>/ passe à la charte v4. Ces règles remplacent les
   70 lignes de <style> qui vivaient DANS conciergerie.php : du CSS écrit dans
   une page est du CSS qu'on cesse de relire, et ce bloc-là en portait la
   preuve — il a gardé pendant des semaines l'habillage d'une étiquette
   « Partenaire » réputée ne jamais s'afficher, qui s'affichait sur toutes les
   cartes.

   AUCUN NOM DE CLASSE N'EST CHANGÉ. `.carte-conciergerie` et `.resume-regles`
   gardent les leurs : style.css habille encore la carte sponsorisée et son
   infobulle, dont le chantier n'est pas déployé en entier, et un renommage
   ferait disparaître l'étiquette « Sponsorisé » le jour où une place se vend. */

/* ── La tête ──────────────────────────────────────────────────────────── */
.charte-v4 .annuaire-commune-accroche { margin: 16px 0 0; max-width: 62ch; }
/* La provenance qui remplace la gouttière : le comptage et le mois d'ordre.
   Elle se pose SOUS l'accroche et non au-dessus du titre — c'est une note de
   bas de bloc, pas un sur-titre. */
.charte-v4 .annuaire-commune-provenance { margin: 18px 0 0; }

/* ── Les cartes de conciergerie ───────────────────────────────────────── */
.charte-v4 .liste-conciergeries { display: flex; flex-direction: column; gap: 16px; }

.charte-v4 .carte-conciergerie {
  background: var(--carte); border: 1px solid var(--trait);
  border-radius: var(--r-20); padding: clamp(20px, 3vw, 28px);
}
.charte-v4 .carte-conciergerie-tete {
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
}
/* Hauteur FIXE, largeur libre : un logo large et un logo carré doivent peser
   pareil dans la colonne. Aucun recadrage, aucun filtre. */
.charte-v4 .carte-conciergerie-logo { height: 48px; width: auto; flex: 0 0 auto; }
.charte-v4 .carte-conciergerie-pastille {
  flex: 0 0 auto; width: 52px; height: 52px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--voile); border-radius: var(--r-14);
  font-family: var(--titre); font-weight: 600; font-size: 24px; color: var(--cadastre);
}
.charte-v4 .carte-conciergerie-identite { flex: 1 1 200px; min-width: 0; }
.charte-v4 .carte-conciergerie-identite h3 {
  font-family: var(--texte); font-weight: 600; font-size: 21px;
  letter-spacing: -.01em; margin: 0; color: var(--encre);
}
.charte-v4 .carte-conciergerie-mention {
  font-size: 16px; line-height: 1.6; color: var(--encre-doux);
  margin: 18px 0 14px; max-width: 62ch;
}
.charte-v4 .carte-conciergerie-action { margin: 0; }

/* DEUX COLONNES À PARTIR DE 900 px. La bande fait 1 120 px de contenu ; une
   carte qui y empile identité, mention et bouton laissait la moitié droite
   vide et poussait le bouton à 200 px sous le nom. Le nom à gauche, la décision
   à droite : c'est la forme d'une ligne d'annuaire, et le bouton remonte à
   hauteur du nom qu'il porte.
   ⚠️ `align-items: center` et pas `stretch` : les cartes d'une même liste n'ont
   pas la même hauteur — une conciergerie avec tranche de délai en fait deux
   lignes de plus — et un bouton étiré suivrait cette hauteur-là. */
@media (min-width: 900px) {
  .charte-v4 .carte-conciergerie {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(240px, 320px);
    gap: 32px; align-items: center;
  }
  .charte-v4 .carte-conciergerie-mention { margin: 0 0 14px; }
  /* La mention et le bouton forment la colonne de droite. Ils ne sont pas dans
     un conteneur commun dans le balisage — l'ajouter aurait obligé à toucher
     renderCarteConciergerie(), qui est un fichier amputé en production — donc
     on les place à la main sur la deuxième colonne. */
  .charte-v4 .carte-conciergerie-mention,
  .charte-v4 .carte-conciergerie-action,
  .charte-v4 .carte-conciergerie-complete { grid-column: 2; }
  .charte-v4 .carte-conciergerie-tete { grid-column: 1; grid-row: 1 / -1; }
  .charte-v4 .carte-conciergerie-action .v4-bouton { width: 100%; }
}

/* Tranche de délai de réponse (§4.1 de la spec du 11/08/2026). Elle n'est pas
   mise en couleur : c'est une information de service, pas une note, et la
   colorer en ferait un classement à l'œil. */
.charte-v4 .carte-conciergerie-delai {
  font-size: 14px; color: var(--encre-2); margin: 6px 0 0;
}

/* Fiche complète (§3). Elle reste visible, en fin de liste, et sans bouton. Le
   retrait est marqué par l'atténuation du bloc et par une mention en toutes
   lettres — pas par une couleur d'alerte : ne pas être disponible n'est pas une
   faute, c'est le geste qu'on attend d'une conciergerie sans capacité.
   ⚠️ `background: transparent` de la v3 posait la carte à même la page ; dans
   une bande papier elle disparaissait au lieu de s'atténuer. On garde donc le
   fond de carte et on baisse l'opacité de la tête, comme avant. */
/* ⚠️ LA CARTE SPONSORISÉE REPREND SA TEINTE ICI, ET C'EST OBLIGATOIRE.
   style.css la tient par `.carte-conciergerie.carte-sponsorisee` — deux classes,
   spécificité (0,2,0) — avec un commentaire expliquant que le sélecteur double
   servait à battre le <style> en ligne de conciergerie.php. Ce <style> n'existe
   plus, mais charte-v4.css est chargée APRÈS style.css : `.charte-v4
   .carte-conciergerie` a exactement la même spécificité (0,2,0) et gagnait donc
   par l'ordre. Résultat mesuré le 22/09/2026 : la carte sponsorisée redevenait
   blanche, et son étiquette blanche disparaissait dans son propre fond.
   Trois classes reprennent la main, quel que soit l'ordre de chargement. */
.charte-v4 .carte-conciergerie.carte-sponsorisee { background: var(--voile); }
.charte-v4 .carte-sponsorisee .etiquette-sponsorise { background: var(--carte); }

/* LA CARTE « PAS DISPONIBLE » VA DANS L'AUTRE SENS : fond transparent, donc
   celui de la bande. Elle recule dans la page pendant que la sponsorisée en
   ressort — deux teintes proches auraient fait deux états qu'on distingue mal,
   alors qu'ils ne disent pas du tout la même chose. */
.charte-v4 .carte-conciergerie.est-complete { background: transparent; }
.charte-v4 .carte-conciergerie.est-complete .carte-conciergerie-tete { opacity: .7; }
.charte-v4 .carte-conciergerie-complete {
  display: inline-block; font-size: 14px; font-weight: 500;
  border: 1px solid var(--trait); border-radius: 999px; padding: 5px 14px;
  color: var(--encre-2); margin: 18px 0 0; background: var(--carte);
}

/* PAS EN CORPS DE LÉGENDE. « Une seule conciergerie référencée sur cette
   commune à ce jour » est un énoncé éditorial, celui que le §5 demande à la
   page d'assumer : elle informe, elle ne s'excuse pas. En 13 px gris, elle
   avait l'air de s'excuser. */
.charte-v4 .mention-une-seule { margin: 18px 0 0; font-size: 15px; color: var(--encre-2); }

/* Plancher de qualité : focus clavier toujours visible, jamais outline:none. */
.charte-v4 .carte-conciergerie a:focus-visible { outline: 2px solid var(--cadastre); outline-offset: 3px; }

/* PAS DE RÈGLE `.reperes-*` ICI. Elles y ont vécu quelques heures le
   22/09/2026 : la bande « repères de marché » avait été refaite en réglettes
   le matin, et retirée l'après-midi quand il est apparu qu'elle n'affichait
   plus de chiffres depuis l'abandon de la collecte mensuelle AirROI — elle
   annonçait une actualisation qui n'aurait pas lieu. Les règles sont parties
   avec la bande, et renderReperesMarcheCourts() avec elles. */

/* ── Le résumé des règles locales ─────────────────────────────────────── */
.charte-v4 .resume-regles p { margin: 16px 0 0; max-width: 68ch; }
.charte-v4 .resume-regles-liens { font-size: 15px; }
/* L'aperçu interne. Il ne sort jamais pour un visiteur — la fonction ne le rend
   que derrière ?apercu — mais quand il paraît, il doit se voir du premier coup
   d'œil, sinon une fiche non recoupée finit par être prise pour publiée. */
.charte-v4 .reg-alerte {
  background: var(--voile); border-radius: var(--r-14);
  padding: 14px 18px; font-size: 15px;
}

/* ── L'appel et la sortie ─────────────────────────────────────────────── */
.charte-v4 .annuaire-commune-appel-corps { max-width: 62ch; }
.charte-v4 .annuaire-commune-appel-corps .v4-texte { margin: 12px 0 24px; }
.charte-v4 .annuaire-commune-suite .nearby-links { margin: 12px 0 0; line-height: 2; }
.charte-v4 .annuaire-commune-suite .nearby-links a { color: var(--cadastre); }
.charte-v4 .annuaire-commune-suite .nearby-titre-2 { margin-top: 32px; }

@media (max-width: 520px) {
  /* Au doigt, le bouton prend la largeur de la carte. Le libellé porte le nom
     de la conciergerie : sur 360 px il passe à la ligne, et une cible centrée
     sur deux lignes se vise mieux qu'un bloc aligné à gauche. */
  .charte-v4 .carte-conciergerie-action .v4-bouton { display: flex; width: 100%; }
}

/* ══ 25. LES 41 PAGES DÉPARTEMENT (22/09/2026) ════════════════════════════
   /<departement>/ passe à la charte v4. DEUX BANDES SEULEMENT, et c'est
   délibéré : ces pages sont `noindex, follow` depuis le 20/08/2026 — elles ne
   sont pas du contenu, elles sont le chemin vers les communes que l'accueil ne
   lie pas. Leur habillage doit les faire ressembler au site, pas leur donner
   une importance que le site leur a retirée.

   LES CLASSES VIENNENT DE includes/maillage.php, qui n'a que cette page pour
   appelant mais que l'on ne réécrit pas pour deux noms de classe. `.city-links`
   et `.nearby-links` sont donc habillées ici, et sous `.departement-maillage`
   uniquement : `.nearby-links` sert aussi sur la page annuaire de commune, avec
   une autre mise en page. */

.charte-v4 .departement-tete-texte .v4-texte { margin: 16px 0 0; max-width: 56ch; }

/* Les deux titres de la bande viennent de renderCityGrid() et de
   renderNeighborRegions(), qui rendent un <h2> nu. On les rattrape à
   l'échelle des titres v4 plutôt que d'ajouter un paramètre de classe à deux
   fonctions partagées. */
.charte-v4 .departement-maillage h2 {
  font-family: var(--titre); font-weight: 600; letter-spacing: -.015em;
  font-size: clamp(24px, 2.6vw, 32px); line-height: 1.2; margin: 0 0 20px;
}
.charte-v4 .departement-maillage .link-section + .nearby-section { margin: 48px 0 0; }

/* LES COMMUNES EN PASTILLES, comme la bande de maillage de l'accueil. Une
   liste à puces sur quarante communes fait une colonne de quarante lignes ;
   les pastilles remplissent la largeur et se parcourent d'un regard. La liste
   reste un <ul> dans le balisage — c'est bien une liste. */
.charte-v4 .departement-maillage .city-links {
  display: flex; flex-wrap: wrap; gap: 10px; margin: 0; padding: 0; list-style: none;
}
.charte-v4 .departement-maillage .city-links li { margin: 0; }
.charte-v4 .departement-maillage .city-links a {
  display: inline-flex; align-items: center; min-height: var(--cible);
  padding: 8px 16px; border-radius: 999px; font-size: 16px; line-height: 1.2;
  background: var(--carte); border: 1px solid var(--trait);
  color: var(--encre); text-decoration: none;
}
.charte-v4 .departement-maillage .city-links a:hover { border-color: var(--cadastre); }

/* Les départements voisins restent une phrase de liens séparés par des points
   médians : ils sont trois ou quatre, et quatre pastilles sous quarante autres
   se liraient comme la suite de la liste au-dessus. */
.charte-v4 .departement-maillage .nearby-links { margin: 0; line-height: 2; }
.charte-v4 .departement-maillage .nearby-links a { color: var(--cadastre); }

/* ══ 26. LA PAGE CONTACT (22/09/2026) ═════════════════════════════════════
   Une bande, deux colonnes : ce qu'on peut nous écrire à gauche, le formulaire
   à droite dans la carte de la charte. Les classes du formulaire ne changent
   pas de nom — `.champ`, `.champ-erreur`, `.champ-aide`, `.contact-objet` :
   elles portent le rendu des erreurs et des liens d'accessibilité, et un
   renommage cosmétique aurait pu décrocher un message d'erreur de son champ. */

.charte-v4 .contact-dire .v4-texte { margin: 16px 0 0; max-width: 42ch; }
.charte-v4 .contact-ailleurs { margin: 22px 0 0; }
.charte-v4 .contact-ailleurs a { color: var(--cadastre); }

.charte-v4 .contact-carte { gap: 0; padding: clamp(22px, 3vw, 34px); }
.charte-v4 .contact-carte .champ { margin: 0 0 22px; }
.charte-v4 .contact-carte label,
.charte-v4 .contact-carte legend {
  display: block; margin: 0 0 8px; font-size: 16px; font-weight: 500; color: var(--encre);
}
/* Le champ de saisie prend la boîte des autres champs du site : 58 px de haut,
   filet cadastre de 2 px, rayon 14. Même cible au doigt partout. */
.charte-v4 .contact-carte input[type="text"],
.charte-v4 .contact-carte input[type="email"],
.charte-v4 .contact-carte textarea {
  width: 100%; padding: 16px; border: 2px solid var(--cadastre);
  border-radius: var(--r-14); background: var(--carte);
  font-family: var(--texte); font-size: 17px; color: var(--encre);
}
.charte-v4 .contact-carte input[type="text"],
.charte-v4 .contact-carte input[type="email"] { min-height: 58px; padding: 0 16px; }
.charte-v4 .contact-carte textarea { line-height: 1.6; resize: vertical; }
.charte-v4 .contact-carte .champ-aide { margin: 8px 0 0; font-size: 14px; color: var(--encre-2); }
/* L'erreur est en brique, la couleur que la charte réserve à la contrainte. */
.charte-v4 .contact-carte .champ-erreur { margin: 8px 0 0; font-size: 15px; color: var(--brique); }

/* Les choix d'objet et le consentement : une case et son libellé sur une
   ligne, avec une cible d'au moins 44 px de haut — plancher tactile. */
.charte-v4 .contact-carte .contact-objet,
.charte-v4 .contact-carte .contact-case {
  display: flex; align-items: flex-start; gap: 12px; min-height: var(--cible);
  margin: 0 0 6px; font-weight: 400; cursor: pointer;
}
.charte-v4 .contact-carte .contact-objet input,
.charte-v4 .contact-carte .contact-case input { margin: 3px 0 0; flex: 0 0 auto; }
.charte-v4 .contact-carte fieldset { border: 0; padding: 0; margin: 0 0 22px; }
.charte-v4 .contact-carte .contact-consentement { margin: 0 0 26px; }
.charte-v4 .contact-carte .v4-bouton { width: 100%; }

/* Le pot de miel reste hors de l'écran ET hors du parcours au clavier : sa
   règle vit dans style.css, on ne la redéclare pas — la redéclarer à moitié
   ici rendrait le champ visible le jour où l'autre disparaît. */

.charte-v4 .contact-recu {
  margin: 0; padding: 18px 20px; border-radius: var(--r-14);
  background: var(--voile); font-size: 17px; line-height: 1.6; color: var(--encre);
}

/* ══ 27. LA PAGE DE RECHERCHE (22/09/2026) ════════════════════════════════
   Deux bandes : l'issue, puis la relance. Ces huit règles remplacent le <style>
   qui vivait dans recherche.php. */

.charte-v4 .recherche-resultat .v4-texte { margin: 18px 0 0; max-width: 62ch; }
.charte-v4 .recherche-action { margin: 28px 0 0; }

/* La liste des homonymes : une ligne cliquable pleine largeur, le code postal
   aligné à droite. C'est une liste de choix, pas un paragraphe de liens. */
.charte-v4 .liste-communes {
  list-style: none; padding: 0; margin: 28px 0 0; display: grid; gap: 4px; max-width: 520px;
}
.charte-v4 .liste-communes a {
  display: flex; justify-content: space-between; gap: 16px; align-items: center;
  min-height: var(--cible); padding: 10px 16px; border-radius: var(--r-14);
  color: var(--cadastre); text-decoration: none;
}
.charte-v4 .liste-communes a:hover { background: var(--voile); }
.charte-v4 .liste-cp { font-family: var(--releve); font-size: 14px; color: var(--encre-2); }
.charte-v4 .recherche-relance .v4-texte a { color: var(--cadastre); }

/* ══ 28. LA PAGE PARTENAIRE (22/09/2026) ══════════════════════════════════
   Le CORPS passe aux bandes ; le chrome reste celui de pro.css. L'en-tête
   `pro-tete` est collant et porte le fond nuit qui dit à une conciergerie
   qu'elle n'est pas sur le site du propriétaire : il n'est pas touché.

   ⚠️ `.pro-large` SERT DANS LES DEUX MONDES — dans l'en-tête, où il garde ses
   40 px de marge et ses 1 280 px, et dans les bandes, où c'est la bande qui
   porte déjà la marge. D'où la portée `.v4-bande .pro-large` : sans elle, on
   additionnait les deux marges et le contenu des bandes rentrait de 40 px de
   plus que partout ailleurs sur le site. */
.charte-v4 .v4-bande .pro-large { max-width: var(--large); padding: 0; }

/* L'EN-TÊTE S'ALIGNE SUR LES BANDES, sans changer de nature. Mesuré le
   22/09/2026 : son logotype commençait à 120 px — la marge de `.pro-large` —
   quand le titre juste en dessous commençait à 160, celle des bandes. Quarante
   pixels d'écart entre le logo et le titre qu'il surplombe, c'est exactement le
   défaut qu'on est allé corriger sur les pages annuaire et département. Le
   bandeau garde son fond nuit et son comportement collant : seule sa gouttière
   change. */
.charte-v4 .pro-tete { padding: 0 var(--marge-bande); }
/* LES CÔTÉS SEULEMENT, pas `padding: 0`. Le raccourci effaçait aussi les
   12 px du haut et du bas que pro.css donne à l'en-tête sous 560 px, quand il
   passe à deux lignes : sur téléphone, le logo touchait le bord de l'écran et
   le bouton le bas du bandeau (signalé par Vanessa, 23/09/2026). Cette règle
   gagne par sa spécificité ; elle ne doit donc toucher que ce qu'elle vient
   corriger, la gouttière. */
.charte-v4 .pro-tete .pro-large { max-width: var(--large); padding-left: 0; padding-right: 0; }

/* Le filet supérieur des sections n'a plus lieu d'être : c'est le changement de
   fond qui sépare, et cumuler les deux ferait une couture. Les rembourrages
   viennent de la bande, pas de la section. */
.charte-v4 .v4-bande.pro-section,
.charte-v4 .v4-bande.pro-hero { border-top: 0; }

.charte-v4 .pro-chapeau { font-size: 18px; line-height: 1.7; color: var(--encre-doux); }
.charte-v4 .pro-section h2 { margin: 0 0 22px; }
.charte-v4 .pro-etape h3 {
  font-family: var(--texte); font-weight: 600; font-size: 19px;
  letter-spacing: -.01em; margin: 10px 0 8px; color: var(--encre);
}
.charte-v4 .pro-etape p { color: var(--encre-doux); }

/* La carte d'inscription reçoit l'encadré ambre de l'estimateur. Son rembourrage
   vient de pro.css ; on ne pose ici que ce que la classe v4 n'apporte pas. */
.charte-v4 .candidature-embarquee { border-radius: var(--r-24); }