/* =============================================================
   AB II GROUPE IMMOBILIER — Feuille principale
   1. Réinitialisation & base
   2. Typographie éditoriale
   3. Trame & sections
   4. En-tête / navigation
   5. Boutons & liens
   6. Plaques visuelles (substitut photo)
   7. Composants d'accueil
   8. Biens : filtres, grille, carte, fiche
   9. Projets : grille, comparateur avant/après
   10. Journal
   11. Formulaires & contact
   12. Pied de page
   13. Révélations au défilement
   14. Utilitaires & impression
   ============================================================= */

/* ---------- 1. Réinitialisation & base ---------- */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--entete-h) + 1.5rem);
}

body {
  margin: 0;
  background: var(--ink-000);
  color: var(--chalk-80);
  font-family: var(--f-sans);
  font-size: var(--t-md);
  line-height: var(--lh-corps);
  letter-spacing: var(--ls-corps);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  text-rendering: optimizeLegibility;
}

/* Grain de papier : casse l'aplat numérique sans dessiner de contour */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 60;
  pointer-events: none;
  opacity: 0.032;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='g'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/></filter><rect width='140' height='140' filter='url(%23g)'/></svg>");
}

body.nav-ouverte { overflow: hidden; }

img, svg, video { display: block; max-width: 100%; height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; padding: 0; }
ul, ol { list-style: none; margin: 0; padding: 0; }
figure, blockquote { margin: 0; }

a { color: inherit; text-decoration: none; }

:focus-visible {
  outline: 2px solid var(--accent-clair);
  outline-offset: 3px;
  border-radius: var(--r-xs);
}

::selection { background: var(--accent); color: #fff; }

/* ---------- 2. Typographie éditoriale ---------- */

h1, h2, h3, h4 {
  margin: 0;
  font-family: var(--f-display);
  font-weight: 400;
  color: var(--chalk);
  line-height: var(--lh-titre);
  letter-spacing: var(--ls-titre);
}

h1 { font-size: var(--t-3xl); line-height: var(--lh-tight); letter-spacing: var(--ls-display); }
h2 { font-size: var(--t-2xl); }
h3 { font-size: var(--t-xl); }
h4 { font-size: var(--t-lg); }

p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

strong { color: var(--chalk); font-weight: 600; }

/* Micro-label typographique : la seule « décoration » autorisée */
.label {
  display: block;
  font-family: var(--f-mono);
  font-size: var(--t-xxs);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--accent-clair);
  margin-bottom: var(--e-4);
}
.label--sourdine { color: var(--chalk-35); }

/* Numérotation éditoriale des sections */
.label--num::before {
  content: attr(data-num) " \2014\00a0";
  color: var(--chalk-35);
}

.chapo {
  font-size: var(--t-lg);
  line-height: 1.5;
  color: var(--chalk-80);
  max-width: var(--largeur-texte);
}

.mesure { max-width: var(--largeur-texte); }

/* Mot mis en exergue à l'intérieur d'un titre */
.exergue {
  font-style: italic;
  color: var(--accent-clair);
}

/* Chiffres tabulaires partout où l'on compare des valeurs */
.tabulaire { font-variant-numeric: tabular-nums; }

/* ---------- 3. Trame & sections ---------- */

.enveloppe {
  width: 100%;
  max-width: var(--largeur-max);
  margin-inline: auto;
  padding-inline: var(--gouttiere);
}

.section { padding-block: var(--section-y); position: relative; }
.section--court { padding-block: var(--section-y-court); }

/* Les paliers de fond remplacent les bordures de séparation */
.section--encre-100 { background: var(--ink-100); }
.section--encre-200 { background: var(--ink-200); }

.section--papier {
  background: var(--paper-000);
  color: var(--graphite-70);
}
.section--papier h1, .section--papier h2,
.section--papier h3, .section--papier h4 { color: var(--graphite); }
.section--papier .label { color: var(--accent); }
.section--papier .label--sourdine { color: var(--graphite-45); }
.section--papier .chapo { color: var(--graphite-70); }

/* Dégradé de raccord entre deux paliers : évite la ligne franche */
.raccord {
  height: clamp(3rem, 6vw, 7rem);
  background: linear-gradient(to bottom, var(--ink-000), var(--ink-100));
}
.raccord--inverse {
  background: linear-gradient(to bottom, var(--ink-100), var(--ink-000));
}

.entete-section {
  display: grid;
  gap: var(--e-5);
  margin-bottom: clamp(2.5rem, 4vw, 4.5rem);
}
@media (min-width: 60rem) {
  .entete-section--duo {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    align-items: end;
    gap: var(--e-8);
  }
}

.grille { display: grid; gap: var(--e-5); }
@media (min-width: 44rem) { .grille--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 62rem) { .grille--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 44rem) and (max-width: 61.99rem) { .grille--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 62rem) { .grille--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 40rem) and (max-width: 61.99rem) { .grille--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---------- 4. En-tête / navigation ---------- */

.entete {
  position: fixed;
  inset-block-start: 0;
  inset-inline: 0;
  z-index: 50;
  height: var(--entete-h);
  display: flex;
  align-items: center;
  transition: background var(--d-moyen) var(--ease-doux),
              backdrop-filter var(--d-moyen) var(--ease-doux);
}
.entete[data-fixe="true"] {
  background: rgba(8, 9, 10, 0.82);
  backdrop-filter: saturate(160%) blur(18px);
  -webkit-backdrop-filter: saturate(160%) blur(18px);
}

.entete__inner {
  width: 100%;
  max-width: var(--largeur-max);
  margin-inline: auto;
  padding-inline: var(--gouttiere);
  display: flex;
  align-items: center;
  gap: var(--e-6);
}

.marque { display: flex; align-items: center; gap: var(--e-3); margin-inline-end: auto; }
.marque__sceau { width: 2.35rem; height: 2.35rem; border-radius: var(--r-plein); flex: none; }
.marque__texte { display: grid; line-height: 1.05; }
.marque__nom {
  font-family: var(--f-display);
  font-size: 1.12rem;
  color: var(--chalk);
  letter-spacing: -0.01em;
}
.marque__nom em { font-style: normal; color: var(--accent-clair); }
.marque__sous {
  font-family: var(--f-mono);
  font-size: 0.56rem;
  letter-spacing: 0.19em;
  text-transform: uppercase;
  color: var(--chalk-35);
}

.nav { display: none; }
@media (min-width: 62rem) {
  .nav { display: flex; align-items: center; gap: clamp(1.25rem, 2vw, 2.25rem); }
}
.nav__lien {
  position: relative;
  font-size: var(--t-sm);
  color: var(--chalk-55);
  padding-block: var(--e-2);
  transition: color var(--d-rapide) var(--ease-doux);
}
.nav__lien:hover { color: var(--chalk); }
/* Soulignement typographique animé — pas une bordure de conteneur */
.nav__lien::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  height: 1px;
  width: 100%;
  background: var(--accent-clair);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform var(--d-moyen) var(--ease-sortie);
}
.nav__lien:hover::after,
.nav__lien[aria-current="page"]::after { transform: scaleX(1); transform-origin: left; }
.nav__lien[aria-current="page"] { color: var(--chalk); }

.entete__actions { display: flex; align-items: center; gap: var(--e-3); }

.burger {
  width: 2.75rem;
  height: 2.75rem;
  display: grid;
  place-items: center;
  gap: 5px;
  align-content: center;
  border-radius: var(--r-sm);
  background: var(--ink-200);
}
@media (min-width: 62rem) { .burger { display: none; } }
.burger span {
  display: block;
  width: 18px;
  height: 1.5px;
  background: var(--chalk);
  transition: transform var(--d-moyen) var(--ease-sortie),
              opacity var(--d-rapide) linear;
}
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

.voile-nav {
  position: fixed;
  inset: 0;
  z-index: 45;
  background: var(--ink-000);
  padding: calc(var(--entete-h) + 2rem) var(--gouttiere) 2rem;
  display: grid;
  align-content: start;
  gap: var(--e-2);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-1.5rem);
  transition: opacity var(--d-moyen) var(--ease-doux),
              transform var(--d-moyen) var(--ease-sortie),
              visibility 0s linear var(--d-moyen);
  overflow-y: auto;
}
.voile-nav[data-ouvert="true"] {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition-delay: 0s;
}
.voile-nav__lien {
  font-family: var(--f-display);
  font-size: var(--t-xl);
  color: var(--chalk);
  padding-block: var(--e-3);
}
.voile-nav__lien small {
  display: block;
  font-family: var(--f-mono);
  font-size: var(--t-xxs);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--chalk-35);
  margin-top: 2px;
}
.voile-nav__pied { margin-top: var(--e-6); display: grid; gap: var(--e-3); }

/* ---------- 5. Boutons & liens ---------- */

.btn {
  --btn-fond: var(--accent);
  --btn-fond-survol: var(--accent-vif);
  --btn-texte: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--e-3);
  padding: 0.82em 1.5em;
  background: var(--btn-fond);
  color: var(--btn-texte);
  font-size: var(--t-sm);
  font-weight: 500;
  letter-spacing: 0.01em;
  border-radius: var(--r-sm);
  transition: background var(--d-rapide) var(--ease-doux),
              transform var(--d-rapide) var(--ease-doux);
  will-change: transform;
}
.btn:hover { background: var(--btn-fond-survol); transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

.btn--sourd {
  --btn-fond: var(--ink-300);
  --btn-fond-survol: var(--ink-400);
  --btn-texte: var(--chalk);
}
.btn--craie {
  --btn-fond: var(--chalk);
  --btn-fond-survol: #fff;
  --btn-texte: var(--ink-000);
}
.btn--nu {
  --btn-fond: transparent;
  --btn-fond-survol: var(--ink-200);
  --btn-texte: var(--chalk-80);
  padding-inline: 1.1em;
}
.btn--vert {
  --btn-fond: #1f7a4d;
  --btn-fond-survol: #24915b;
  --btn-texte: #fff;
}
.btn--large { width: 100%; }
.btn--compact { padding: 0.6em 1.05em; font-size: var(--t-xs); }
.btn svg { flex: none; }

/* Lien-flèche : l'affordance vient du mouvement, pas d'un cadre */
.lien-fleche {
  display: inline-flex;
  align-items: baseline;
  gap: 0.55em;
  color: var(--chalk);
  font-size: var(--t-sm);
  font-weight: 500;
}
.lien-fleche span:last-child {
  transition: transform var(--d-moyen) var(--ease-sortie);
  color: var(--accent-clair);
}
.lien-fleche:hover span:last-child { transform: translateX(0.4em); }
.section--papier .lien-fleche { color: var(--graphite); }

/* Puces d'information (statut, type) : aplat coloré, jamais de contour */
.puce {
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  padding: 0.34em 0.78em;
  border-radius: var(--r-plein);
  font-family: var(--f-mono);
  font-size: var(--t-xxs);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  background: var(--accent-voile);
  color: var(--accent-clair);
  white-space: nowrap;
}
.puce--dispo { background: var(--dispo-voile); color: var(--dispo); }
.puce--reserve { background: var(--reserve-voile); color: var(--reserve); }
.puce--vendu { background: var(--brique-voile); color: var(--brique-clair); }
.puce--neutre { background: rgba(244, 242, 238, 0.08); color: var(--chalk-55); }

/* ---------- 6. Plaques visuelles (substitut photo) ---------- */
/* Tant qu'aucune photographie n'est chargée, la plaque affiche un motif
   cadastral dessiné en CSS : cela reste graphique et intentionnel,
   jamais un rectangle cassé. Dès qu'une image est renseignée dans les
   données, elle recouvre la plaque. */

.plaque {
  position: relative;
  overflow: hidden;
  background: var(--ink-200);
  border-radius: var(--r-md);
  isolation: isolate;
}
.plaque::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(150deg, rgba(27, 79, 160, 0.34), transparent 62%),
    linear-gradient(20deg, rgba(8, 9, 10, 0.9), rgba(23, 27, 34, 0.55));
}
.plaque::after {
  content: "";
  position: absolute;
  inset: -10%;
  opacity: 0.5;
  background-image:
    linear-gradient(rgba(244, 242, 238, 0.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(244, 242, 238, 0.055) 1px, transparent 1px),
    linear-gradient(rgba(244, 242, 238, 0.028) 1px, transparent 1px),
    linear-gradient(90deg, rgba(244, 242, 238, 0.028) 1px, transparent 1px);
  background-size: 96px 96px, 96px 96px, 24px 24px, 24px 24px;
  transform: rotate(-1.5deg) scale(1.06);
}
.plaque__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 2;
  transition: transform var(--d-lent) var(--ease-sortie);
}
.plaque__sigle {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: grid;
  place-content: center;
  gap: var(--e-2);
  text-align: center;
  padding: var(--e-4);
}
.plaque__sigle b {
  font-family: var(--f-display);
  font-size: clamp(2.2rem, 5vw, 3.6rem);
  font-weight: 400;
  color: rgba(244, 242, 238, 0.16);
  letter-spacing: -0.03em;
  line-height: 1;
}
.plaque__sigle span {
  font-family: var(--f-mono);
  font-size: var(--t-xxs);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: rgba(244, 242, 238, 0.28);
}
.plaque--16-9 { aspect-ratio: 16 / 9; }
.plaque--4-3 { aspect-ratio: 4 / 3; }
.plaque--3-2 { aspect-ratio: 3 / 2; }
.plaque--1-1 { aspect-ratio: 1 / 1; }
.plaque--portrait { aspect-ratio: 3 / 4; }

/* ---------- 7. Composants d'accueil ---------- */

/* --- Héros --- */
.heros {
  position: relative;
  min-height: clamp(38rem, 92vh, 56rem);
  display: flex;
  align-items: flex-end;
  padding-top: calc(var(--entete-h) + 4rem);
  padding-bottom: clamp(3rem, 6vw, 6rem);
  overflow: hidden;
}
/* Lavis de fond à très grand rayon : c'est un fond, pas un halo d'objet */
.heros__fond {
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(120% 85% at 78% 8%, rgba(27, 79, 160, 0.4), transparent 58%),
    radial-gradient(90% 70% at 8% 100%, rgba(27, 79, 160, 0.14), transparent 60%),
    var(--ink-000);
}
.heros__fond::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, transparent 35%, var(--ink-000) 98%);
}
/* Photographie de fond. Elle passe AU-DESSUS du lavis (qui est opaque)
   et SOUS le voile, jamais en contact direct avec la typographie.
   Position et opacité sont pilotées depuis l'éditeur via les variables. */
.heros__image {
  position: absolute;
  inset: 0;
  z-index: 1;
  object-fit: cover;
  object-position: var(--photo-position, 50% 50%);
  width: 100%;
  height: 100%;
  opacity: var(--photo-opacite, 0.55);
  /* Désaturation légère : la photo rejoint la palette au lieu de la concurrencer */
  filter: saturate(0.72) contrast(1.06);
  animation: derive 38s var(--ease-doux) infinite alternate;
}
@keyframes derive {
  from { transform: scale(1.04) translate3d(0, 0, 0); }
  to   { transform: scale(1.14) translate3d(-1.5%, -2%, 0); }
}

/* Voile de lecture : c'est lui qui rend le titre lisible, pas un
   assombrissement uniforme de la photo. Deux dégradés croisés —
   l'un ouvre la colonne de texte à gauche, l'autre raccorde au noir
   de la page en haut et en bas. */
.heros__voile {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    linear-gradient(to bottom,
      rgba(8, 9, 10, 0.82) 0%,
      rgba(8, 9, 10, 0.35) 26%,
      rgba(8, 9, 10, 0.55) 62%,
      var(--ink-000) 98%),
    linear-gradient(to right,
      var(--ink-000) 0%,
      rgba(8, 9, 10, 0.9) 34%,
      rgba(8, 9, 10, 0.42) 66%,
      rgba(8, 9, 10, 0.22) 100%);
}
/* En colonne étroite, la typographie occupe toute la largeur :
   le dégradé horizontal n'a plus de sens, on assombrit par le bas. */
@media (max-width: 61.99rem) {
  .heros__voile {
    background:
      linear-gradient(to bottom,
        rgba(8, 9, 10, 0.88) 0%,
        rgba(8, 9, 10, 0.62) 24%,
        rgba(8, 9, 10, 0.84) 55%,
        var(--ink-000) 97%);
  }
}

.heros__inner { position: relative; z-index: 3; width: 100%; }

.heros__titre {
  font-size: var(--t-4xl);
  line-height: 0.98;
  letter-spacing: var(--ls-display);
  max-width: 15ch;
}
.heros__titre .exergue { display: block; }

.heros__texte {
  margin-top: var(--e-5);
  font-size: var(--t-lg);
  color: var(--chalk-80);
  max-width: 46ch;
}

.heros__actions {
  margin-top: var(--e-6);
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-3);
}

/* Bandeau de chiffres — séparation par vide, sans filet */
.heros__chiffres {
  margin-top: clamp(3rem, 6vw, 5rem);
  display: grid;
  gap: var(--e-5) var(--e-7);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (min-width: 52rem) {
  .heros__chiffres { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.chiffre__val {
  font-family: var(--f-display);
  font-size: var(--t-2xl);
  color: var(--chalk);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.chiffre__val em { font-style: normal; color: var(--accent-clair); }
.chiffre__lib {
  margin-top: var(--e-2);
  font-size: var(--t-xs);
  color: var(--chalk-35);
  line-height: 1.4;
  max-width: 22ch;
}

/* Invite au défilement */
.heros__descendre {
  position: absolute;
  z-index: 3;
  right: var(--gouttiere);
  bottom: clamp(3rem, 6vw, 6rem);
  display: none;
  writing-mode: vertical-rl;
  font-family: var(--f-mono);
  font-size: var(--t-xxs);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--chalk-35);
  align-items: center;
  gap: var(--e-4);
}
@media (min-width: 62rem) { .heros__descendre { display: flex; } }
.heros__descendre i {
  display: block;
  width: 1px;
  height: 3.5rem;
  background: linear-gradient(to bottom, var(--accent-clair), transparent);
  animation: filer 2.4s var(--ease-doux) infinite;
}
@keyframes filer {
  0%   { transform: scaleY(0.2); transform-origin: top; opacity: 0; }
  35%  { opacity: 1; }
  100% { transform: scaleY(1); transform-origin: top; opacity: 0; }
}

/* --- Bandeau défilant des quartiers --- */
.bandeau {
  overflow: hidden;
  padding-block: var(--e-5);
  background: var(--ink-100);
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.bandeau__piste {
  display: flex;
  gap: var(--e-7);
  width: max-content;
  animation: defiler 46s linear infinite;
}
.bandeau:hover .bandeau__piste { animation-play-state: paused; }
@keyframes defiler { to { transform: translateX(-50%); } }
.bandeau__item {
  display: flex;
  align-items: center;
  gap: var(--e-4);
  font-family: var(--f-mono);
  font-size: var(--t-xs);
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--chalk-35);
  white-space: nowrap;
}
.bandeau__item::after {
  content: "";
  width: 3px;
  height: 3px;
  border-radius: var(--r-plein);
  background: var(--accent);
}

/* --- Services : liste éditoriale numérotée --- */
.service {
  display: grid;
  gap: var(--e-3);
  padding: clamp(1.5rem, 3vw, 2.5rem);
  border-radius: var(--r-md);
  background: transparent;
  transition: background var(--d-moyen) var(--ease-doux);
  position: relative;
}
.service:hover { background: var(--ink-200); }
.service__num {
  font-family: var(--f-mono);
  font-size: var(--t-xxs);
  letter-spacing: var(--ls-label);
  color: var(--accent-clair);
}
.service__titre { font-size: var(--t-lg); }
.service__texte { font-size: var(--t-sm); color: var(--chalk-55); }
.service__liste {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-2);
  margin-top: var(--e-2);
}
.service__liste li {
  font-size: var(--t-xs);
  color: var(--chalk-35);
  padding: 0.2em 0.66em;
  border-radius: var(--r-plein);
  background: rgba(244, 242, 238, 0.05);
}
.section--papier .service:hover { background: var(--paper-100); }
.section--papier .service__texte { color: var(--graphite-70); }
.section--papier .service__num { color: var(--accent); }
.section--papier .service__liste li { background: var(--paper-200); color: var(--graphite-70); }

/* --- Bloc « pourquoi nous » en deux colonnes --- */
.duo {
  display: grid;
  gap: clamp(2.5rem, 5vw, 5rem);
  align-items: start;
}
@media (min-width: 62rem) {
  .duo { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .duo--collant > :first-child { position: sticky; top: calc(var(--entete-h) + 3rem); }
}

.engagements { display: grid; gap: var(--e-2); }
.engagement {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--e-4);
  padding: var(--e-5) var(--e-4);
  border-radius: var(--r-md);
  transition: background var(--d-moyen) var(--ease-doux);
}
.engagement:hover { background: var(--ink-200); }
.engagement__idx {
  font-family: var(--f-mono);
  font-size: var(--t-xxs);
  color: var(--accent-clair);
  padding-top: 0.35em;
  letter-spacing: 0.08em;
}
.engagement__titre { font-size: var(--t-md); color: var(--chalk); font-weight: 600; font-family: var(--f-sans); }
.engagement__texte { font-size: var(--t-sm); color: var(--chalk-55); margin-top: var(--e-1); }
.section--papier .engagement:hover { background: var(--paper-100); }
.section--papier .engagement__titre { color: var(--graphite); }
.section--papier .engagement__texte { color: var(--graphite-70); }
.section--papier .engagement__idx { color: var(--accent); }

/* --- Témoignages --- */
.temoin {
  display: grid;
  gap: var(--e-5);
  padding: clamp(1.5rem, 3vw, 2.25rem);
  background: var(--ink-200);
  border-radius: var(--r-md);
  height: 100%;
  align-content: start;
  transition: background var(--d-moyen) var(--ease-doux),
              transform var(--d-moyen) var(--ease-sortie);
}
.temoin:hover { background: var(--ink-300); transform: translateY(-3px); }
.temoin__texte {
  font-family: var(--f-display);
  font-size: var(--t-lg);
  line-height: 1.42;
  color: var(--chalk);
}
.temoin__texte::before { content: "\201C"; color: var(--accent-clair); }
.temoin__texte::after { content: "\201D"; color: var(--accent-clair); }
.temoin__qui { display: grid; gap: 2px; }
.temoin__nom { font-size: var(--t-sm); color: var(--chalk); font-weight: 600; }
.temoin__role {
  font-family: var(--f-mono);
  font-size: var(--t-xxs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--chalk-35);
}

/* --- Bande d'appel à l'action --- */
.appel {
  position: relative;
  overflow: hidden;
  background: var(--accent);
  color: #fff;
  border-radius: var(--r-lg);
  padding: clamp(2.5rem, 5vw, 4.5rem);
  display: grid;
  gap: var(--e-6);
}
@media (min-width: 62rem) {
  .appel { grid-template-columns: minmax(0, 1.2fr) auto; align-items: center; gap: var(--e-8); }
}
.appel::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(80% 120% at 100% 0%, rgba(255, 255, 255, 0.16), transparent 60%);
  pointer-events: none;
}
.appel > * { position: relative; z-index: 1; }
.appel h2 { color: #fff; }
.appel p { color: rgba(255, 255, 255, 0.82); max-width: 48ch; margin-top: var(--e-3); }
.appel .label { color: rgba(255, 255, 255, 0.7); }
.appel__actions { display: flex; flex-wrap: wrap; gap: var(--e-3); }

/* ---------- 8. Biens ---------- */

.filtres {
  display: grid;
  gap: var(--e-4);
  padding: clamp(1.25rem, 2.5vw, 1.75rem);
  background: var(--ink-200);
  border-radius: var(--r-md);
}
@media (min-width: 56rem) {
  .filtres__ligne { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--e-4); }
}
.filtres__ligne { display: grid; gap: var(--e-4); }

.champ { display: grid; gap: var(--e-2); }
.champ__lib {
  font-family: var(--f-mono);
  font-size: var(--t-xxs);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--chalk-35);
}
.champ__saisie,
.champ select,
.champ input,
.champ textarea {
  width: 100%;
  background: var(--ink-000);
  color: var(--chalk);
  border: 0;
  border-radius: var(--r-sm);
  padding: 0.78em 0.95em;
  font-size: var(--t-sm);
  transition: background var(--d-rapide) var(--ease-doux);
  appearance: none;
}
.champ select {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8'><path d='M1 1l5 5 5-5' fill='none' stroke='%236f9fe4' stroke-width='1.6' stroke-linecap='round'/></svg>");
  background-repeat: no-repeat;
  background-position: right 0.95em center;
  padding-right: 2.4em;
  cursor: pointer;
}
.champ input:hover, .champ select:hover, .champ textarea:hover { background: var(--ink-300); }
.champ input::placeholder, .champ textarea::placeholder { color: var(--chalk-35); }
.champ textarea { min-height: 8rem; resize: vertical; }

.filtres__bas {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-4);
}
.filtres__compte {
  font-family: var(--f-mono);
  font-size: var(--t-xs);
  letter-spacing: 0.08em;
  color: var(--chalk-55);
}
.filtres__compte b { color: var(--accent-clair); font-variant-numeric: tabular-nums; }

.rapides { display: flex; flex-wrap: wrap; gap: var(--e-2); }
.rapide {
  padding: 0.42em 0.95em;
  border-radius: var(--r-plein);
  background: var(--ink-300);
  color: var(--chalk-55);
  font-size: var(--t-xs);
  transition: background var(--d-rapide) var(--ease-doux), color var(--d-rapide) var(--ease-doux);
}
.rapide:hover { background: var(--ink-400); color: var(--chalk); }
.rapide[aria-pressed="true"] { background: var(--accent); color: #fff; }

/* --- Carte de bien --- */
.carte {
  position: relative;
  display: grid;
  grid-template-rows: auto 1fr;
  background: var(--ink-200);
  border-radius: var(--r-md);
  overflow: hidden;
  transition: background var(--d-moyen) var(--ease-doux),
              transform var(--d-moyen) var(--ease-sortie),
              box-shadow var(--d-moyen) var(--ease-doux);
}
.carte:hover {
  background: var(--ink-300);
  transform: translateY(-4px);
  box-shadow: var(--ombre-carte);
}
.carte:hover .plaque__img { transform: scale(1.05); }
.carte__media { position: relative; }
.carte__puces {
  position: absolute;
  z-index: 3;
  top: var(--e-3);
  left: var(--e-3);
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-2);
}
.carte__puces .puce { backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.carte__ref {
  position: absolute;
  z-index: 3;
  top: var(--e-3);
  right: var(--e-3);
  font-family: var(--f-mono);
  font-size: var(--t-xxs);
  letter-spacing: 0.1em;
  color: rgba(255, 255, 255, 0.62);
  background: rgba(8, 9, 10, 0.5);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  padding: 0.28em 0.6em;
  border-radius: var(--r-xs);
}
.carte__corps {
  padding: var(--e-5);
  display: grid;
  gap: var(--e-3);
  align-content: start;
}
.carte__lieu {
  font-family: var(--f-mono);
  font-size: var(--t-xxs);
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--chalk-35);
}
.carte__titre { font-size: var(--t-lg); }
.carte__titre a::after { content: ""; position: absolute; inset: 0; z-index: 4; }
.carte__prix {
  font-family: var(--f-display);
  font-size: var(--t-lg);
  color: var(--accent-clair);
  font-variant-numeric: tabular-nums;
}
.carte__prix small {
  font-family: var(--f-sans);
  font-size: var(--t-xs);
  color: var(--chalk-35);
  letter-spacing: 0.02em;
}
/* Caractéristiques : colonnes séparées par le vide, sans filet vertical */
.carte__specs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-2) var(--e-5);
  margin-top: var(--e-1);
}
.carte__spec { display: grid; gap: 1px; }
.carte__spec b {
  font-size: var(--t-sm);
  color: var(--chalk);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.carte__spec span {
  font-family: var(--f-mono);
  font-size: 0.6rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--chalk-35);
}

/* État « aucun résultat » */
.vide {
  padding: clamp(3rem, 7vw, 6rem) var(--e-5);
  text-align: center;
  background: var(--ink-100);
  border-radius: var(--r-md);
  display: grid;
  gap: var(--e-4);
  justify-items: center;
}
.vide h3 { font-size: var(--t-xl); }
.vide p { color: var(--chalk-55); max-width: 42ch; }

/* --- Fiche de bien --- */
.fiche { display: grid; gap: clamp(2rem, 4vw, 3.5rem); }
@media (min-width: 68rem) {
  .fiche__colonnes {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 22rem;
    gap: clamp(2.5rem, 4vw, 4rem);
    align-items: start;
  }
  .fiche__aside { position: sticky; top: calc(var(--entete-h) + 2rem); }
}

.galerie { display: grid; gap: var(--e-3); }
@media (min-width: 48rem) {
  .galerie {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-auto-rows: 7rem;
  }
  .galerie > :first-child { grid-column: span 4; grid-row: span 3; }
}
.galerie button { border-radius: var(--r-md); overflow: hidden; width: 100%; height: 100%; }
.galerie .plaque { height: 100%; width: 100%; }
@media (min-width: 48rem) { .galerie .plaque { aspect-ratio: auto; } }

.donnees {
  display: grid;
  gap: 1px;
  background: transparent;
}
.donnee {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--e-4);
  align-items: baseline;
  padding: var(--e-4) var(--e-4);
  border-radius: var(--r-sm);
}
/* Zébrure : remplace le filet horizontal du tableau classique */
.donnee:nth-child(odd) { background: var(--ink-200); }
.donnee__lib { font-size: var(--t-sm); color: var(--chalk-55); }
.donnee__val { font-size: var(--t-sm); color: var(--chalk); font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; }

.encart {
  background: var(--ink-200);
  border-radius: var(--r-md);
  padding: clamp(1.5rem, 3vw, 2rem);
  display: grid;
  gap: var(--e-4);
}
.encart__prix {
  font-family: var(--f-display);
  font-size: var(--t-2xl);
  color: var(--chalk);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.encart__mention { font-size: var(--t-xs); color: var(--chalk-35); }

.atouts { display: grid; gap: var(--e-3); }
.atout {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--e-3);
  font-size: var(--t-sm);
  color: var(--chalk-80);
}
.atout::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: var(--r-plein);
  background: var(--accent-clair);
  margin-top: 0.62em;
}

/* Fil d'Ariane */
.fil {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-2);
  font-family: var(--f-mono);
  font-size: var(--t-xxs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--chalk-35);
  margin-bottom: var(--e-5);
}
.fil a { color: var(--chalk-55); transition: color var(--d-rapide); }
.fil a:hover { color: var(--accent-clair); }
.fil span[aria-hidden] { color: var(--chalk-35); }

/* En-tête de page intérieure */
.tete {
  padding-top: calc(var(--entete-h) + clamp(3rem, 6vw, 6rem));
  padding-bottom: clamp(2rem, 4vw, 3.5rem);
  position: relative;
  overflow: hidden;
}
.tete__fond {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: radial-gradient(90% 130% at 88% -10%, rgba(27, 79, 160, 0.3), transparent 62%);
}
.tete > .enveloppe { position: relative; z-index: 1; }

/* ---------- 9. Projets ---------- */

.projet {
  display: grid;
  gap: var(--e-4);
  background: var(--ink-200);
  border-radius: var(--r-md);
  overflow: hidden;
  position: relative;
  transition: background var(--d-moyen) var(--ease-doux),
              transform var(--d-moyen) var(--ease-sortie);
}
.projet:hover { background: var(--ink-300); transform: translateY(-4px); }
.projet:hover .plaque__img { transform: scale(1.05); }
.projet__corps { padding: 0 var(--e-5) var(--e-5); display: grid; gap: var(--e-3); }
.projet__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-2) var(--e-4);
  font-family: var(--f-mono);
  font-size: var(--t-xxs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--chalk-35);
}
.projet__titre { font-size: var(--t-lg); }
.projet__titre a::after { content: ""; position: absolute; inset: 0; z-index: 4; }
.projet__texte { font-size: var(--t-sm); color: var(--chalk-55); }

/* Jauge d'avancement : barre pleine sur fond sourd, sans contour */
.jauge { display: grid; gap: var(--e-2); }
.jauge__haut {
  display: flex;
  justify-content: space-between;
  font-family: var(--f-mono);
  font-size: var(--t-xxs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--chalk-35);
}
.jauge__haut b { color: var(--accent-clair); font-variant-numeric: tabular-nums; }
.jauge__rail {
  height: 3px;
  border-radius: var(--r-plein);
  background: rgba(244, 242, 238, 0.09);
  overflow: hidden;
}
.jauge__part {
  height: 100%;
  border-radius: var(--r-plein);
  background: var(--accent);
  width: 0;
  transition: width 1.1s var(--ease-sortie);
}

/* --- Comparateur avant / après --- */
.compare {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-md);
  aspect-ratio: 16 / 10;
  touch-action: pan-y;
  cursor: ew-resize;
  user-select: none;
  background: var(--ink-200);
}
.compare__face { position: absolute; inset: 0; }
.compare__face .plaque { width: 100%; height: 100%; border-radius: 0; }
.compare__face--apres { clip-path: inset(0 0 0 var(--coupe, 50%)); }
.compare__poignee {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--coupe, 50%);
  width: 2px;
  background: rgba(255, 255, 255, 0.85);
  z-index: 5;
  pointer-events: none;
}
.compare__bouton {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 2.75rem;
  height: 2.75rem;
  border-radius: var(--r-plein);
  background: rgba(255, 255, 255, 0.94);
  color: var(--ink-000);
  display: grid;
  place-items: center;
  font-size: 0.9rem;
  letter-spacing: -0.1em;
  box-shadow: var(--ombre-carte);
}
.compare__etiquette {
  position: absolute;
  bottom: var(--e-4);
  z-index: 4;
  font-family: var(--f-mono);
  font-size: var(--t-xxs);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: #fff;
  background: rgba(8, 9, 10, 0.55);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  padding: 0.35em 0.75em;
  border-radius: var(--r-xs);
}
.compare__etiquette--g { left: var(--e-4); }
.compare__etiquette--d { right: var(--e-4); }

/* ---------- 10. Journal ---------- */

.article-carte {
  position: relative;
  display: grid;
  gap: var(--e-4);
  padding: var(--e-5);
  border-radius: var(--r-md);
  background: transparent;
  align-content: start;
  transition: background var(--d-moyen) var(--ease-doux);
}
.article-carte:hover { background: var(--ink-200); }
.article-carte__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-2) var(--e-4);
  font-family: var(--f-mono);
  font-size: var(--t-xxs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--chalk-35);
}
.article-carte__meta em { font-style: normal; color: var(--accent-clair); }
.article-carte__titre { font-size: var(--t-lg); }
.article-carte__titre a::after { content: ""; position: absolute; inset: 0; }
.article-carte__chapo { font-size: var(--t-sm); color: var(--chalk-55); }

/* Corps d'article */
.prose { max-width: var(--largeur-texte); }
.prose > * + * { margin-top: 1.3em; }
.prose h2 { font-size: var(--t-xl); margin-top: 2em; }
.prose h3 { font-size: var(--t-lg); margin-top: 1.7em; }
.prose p { color: var(--chalk-80); }
.prose a { color: var(--accent-clair); text-decoration: underline; text-underline-offset: 0.22em; text-decoration-thickness: 1px; }
.prose ul { display: grid; gap: var(--e-3); }
.prose ul li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--e-3);
  color: var(--chalk-80);
}
.prose ul li::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: var(--r-plein);
  background: var(--accent-clair);
  margin-top: 0.68em;
}
.prose blockquote {
  font-family: var(--f-display);
  font-size: var(--t-lg);
  line-height: 1.45;
  color: var(--chalk);
  background: var(--ink-200);
  padding: clamp(1.25rem, 3vw, 2rem);
  border-radius: var(--r-md);
}

/* --- Questions fréquentes --- */
/* Le dépliant natif <details> : pas de filet, la séparation vient
   du palier de fond qui s'allume à l'ouverture. */
.faq { display: grid; gap: var(--e-2); }

.faq__item {
  border-radius: var(--r-md);
  background: transparent;
  transition: background var(--d-moyen) var(--ease-doux);
}
.faq__item:hover,
.faq__item[open] { background: var(--ink-200); }

.faq__item summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--e-4);
  padding: var(--e-5);
  cursor: pointer;
  list-style: none;
  font-family: var(--f-display);
  font-size: var(--t-lg);
  color: var(--chalk);
  line-height: 1.3;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after {
  content: "";
  width: 11px;
  height: 11px;
  flex: none;
  background: var(--accent-clair);
  transition: transform var(--d-moyen) var(--ease-sortie);
  clip-path: polygon(46% 0, 54% 0, 54% 46%, 100% 46%, 100% 54%, 54% 54%, 54% 100%, 46% 100%, 46% 54%, 0 54%, 0 46%, 46% 46%);
}
.faq__item[open] summary::after { transform: rotate(135deg); }

.faq__reponse {
  padding: 0 var(--e-5) var(--e-5);
  font-size: var(--t-sm);
  color: var(--chalk-55);
  max-width: 62ch;
}
.section--papier .faq__item:hover,
.section--papier .faq__item[open] { background: var(--paper-100); }
.section--papier .faq__item summary { color: var(--graphite); }
.section--papier .faq__item summary::after { background: var(--accent); }
.section--papier .faq__reponse { color: var(--graphite-70); }

/* ---------- 11. Formulaires & contact ---------- */

.form { display: grid; gap: var(--e-4); }
@media (min-width: 44rem) { .form__duo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e-4); } }
.form__aide { font-size: var(--t-xs); color: var(--chalk-35); }
.form__message {
  padding: var(--e-4);
  border-radius: var(--r-sm);
  background: var(--dispo-voile);
  color: var(--dispo);
  font-size: var(--t-sm);
}
.form__message[data-etat="erreur"] { background: var(--brique-voile); color: var(--brique-clair); }
/* Tant qu'aucun message n'a été posé, le bloc se replie sans disparaître :
   un role="status" retiré du rendu ne serait plus annoncé par les lecteurs
   d'écran au moment où il se remplit. */
.form__message:empty { padding: 0; background: none; }

.contact-bloc { display: grid; gap: var(--e-5); }
.contact-item { display: grid; gap: var(--e-1); }
.contact-item dt {
  font-family: var(--f-mono);
  font-size: var(--t-xxs);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--chalk-35);
}
.contact-item dd { margin: 0; font-size: var(--t-md); color: var(--chalk); }
.contact-item dd a:hover { color: var(--accent-clair); }

/* ---------- 12. Pied de page ---------- */

.pied { background: var(--ink-100); padding-block: clamp(3.5rem, 6vw, 5.5rem) var(--e-6); }
.pied__haut { display: grid; gap: clamp(2.5rem, 5vw, 4rem); }
@media (min-width: 62rem) {
  .pied__haut { grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr)); }
}
.pied__titre {
  font-family: var(--f-mono);
  font-size: var(--t-xxs);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--chalk-35);
  margin-bottom: var(--e-4);
}
.pied__liste { display: grid; gap: var(--e-3); }
.pied__liste a { font-size: var(--t-sm); color: var(--chalk-55); transition: color var(--d-rapide); }
.pied__liste a:hover { color: var(--chalk); }
.pied__signature {
  font-family: var(--f-display);
  font-size: var(--t-lg);
  color: var(--chalk);
  max-width: 26ch;
  line-height: 1.3;
}
.pied__bas {
  margin-top: clamp(2.5rem, 5vw, 4rem);
  padding-top: var(--e-5);
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-4);
  justify-content: space-between;
  align-items: center;
  font-size: var(--t-xs);
  color: var(--chalk-35);
}
.pied__bas a:hover { color: var(--chalk-55); }

/* Bouton WhatsApp flottant */
.wa-flottant {
  position: fixed;
  z-index: 40;
  right: clamp(1rem, 3vw, 2rem);
  bottom: clamp(1rem, 3vw, 2rem);
  display: inline-flex;
  align-items: center;
  gap: var(--e-3);
  padding: 0.85em 1.25em;
  border-radius: var(--r-plein);
  background: #1f7a4d;
  color: #fff;
  font-size: var(--t-sm);
  font-weight: 500;
  box-shadow: var(--ombre-flottante);
  transform: translateY(140%);
  transition: transform var(--d-moyen) var(--ease-sortie), background var(--d-rapide);
}
.wa-flottant[data-visible="true"] { transform: none; }
.wa-flottant:hover { background: #24915b; }
.wa-flottant span { display: none; }
@media (min-width: 40rem) { .wa-flottant span { display: inline; } }

/* ---------- 13. Révélations au défilement ---------- */

[data-reveal] {
  opacity: 0;
  transform: translateY(1.35rem);
  transition: opacity 0.9s var(--ease-sortie), transform 0.9s var(--ease-sortie);
  transition-delay: var(--retard, 0ms);
}
[data-reveal][data-vu="true"] { opacity: 1; transform: none; }

/* Révélation par ligne, façon générique de titre imprimé */
.masque-ligne { display: block; overflow: hidden; }
.masque-ligne > span {
  display: block;
  transform: translateY(105%);
  transition: transform 1.05s var(--ease-sortie);
  transition-delay: var(--retard, 0ms);
}
[data-vu="true"] .masque-ligne > span { transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  [data-reveal] { opacity: 1; transform: none; }
  .masque-ligne > span { transform: none; }
}

/* Visionneuse plein écran */
.visionneuse {
  position: fixed;
  inset: 0;
  z-index: 70;
  background: rgba(8, 9, 10, 0.96);
  display: grid;
  place-items: center;
  padding: var(--gouttiere);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--d-moyen) var(--ease-doux), visibility 0s linear var(--d-moyen);
}
.visionneuse[data-ouvert="true"] { opacity: 1; visibility: visible; transition-delay: 0s; }
.visionneuse__contenu { width: min(72rem, 100%); }
.visionneuse__contenu .plaque { border-radius: var(--r-md); }
.visionneuse__fermer {
  position: absolute;
  top: var(--gouttiere);
  right: var(--gouttiere);
  width: 2.75rem;
  height: 2.75rem;
  border-radius: var(--r-plein);
  background: var(--ink-300);
  color: var(--chalk);
  display: grid;
  place-items: center;
  font-size: 1.1rem;
}
.visionneuse__legende {
  margin-top: var(--e-4);
  text-align: center;
  font-family: var(--f-mono);
  font-size: var(--t-xs);
  letter-spacing: 0.1em;
  color: var(--chalk-55);
}

/* =============================================================
   15. Améliorations d'usage (v2.3)
   ============================================================= */

/* ---------- Visionneuse : navigation entre les vues ---------- */

.visionneuse__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: 3rem;
  height: 3rem;
  display: grid;
  place-items: center;
  border-radius: var(--r-plein);
  background: var(--ink-300);
  color: var(--chalk);
  font-size: 1.3rem;
  line-height: 1;
  transition: background var(--d-rapide) var(--ease-doux);
}
.visionneuse__nav:hover { background: var(--ink-400); }
.visionneuse__nav[hidden] { display: none; }
.visionneuse__nav--prec { left: var(--gouttiere); }
.visionneuse__nav--suiv { right: var(--gouttiere); }

@media (max-width: 48rem) {
  .visionneuse__nav { width: 2.5rem; height: 2.5rem; }
  .visionneuse__nav--prec { left: 0.5rem; }
  .visionneuse__nav--suiv { right: 0.5rem; }
}

.visionneuse__compteur {
  font-family: var(--f-mono);
  font-size: var(--t-xxs);
  letter-spacing: 0.14em;
  color: var(--chalk-35);
  font-variant-numeric: tabular-nums;
}

/* Le contenu se décale légèrement à chaque changement de vue :
   le mouvement signale qu'on a bien changé d'image. */
.visionneuse__contenu { transition: opacity var(--d-rapide) var(--ease-doux); }
.visionneuse[data-transition="true"] .visionneuse__contenu { opacity: 0.3; }

/* ---------- Barre d'action collante sur mobile ---------- */
/* Sur une fiche de bien, l'encart de droite — prix et bouton de contact —
   disparaît dès qu'on fait défiler sur téléphone. Cette barre le remplace. */

.barre-bien {
  position: fixed;
  z-index: 41;
  inset-inline: 0;
  bottom: 0;
  display: none;
  align-items: center;
  gap: var(--e-4);
  padding: var(--e-3) var(--gouttiere);
  padding-bottom: max(var(--e-3), env(safe-area-inset-bottom));
  background: rgba(12, 14, 17, 0.94);
  backdrop-filter: saturate(160%) blur(18px);
  -webkit-backdrop-filter: saturate(160%) blur(18px);
  box-shadow: 0 -2px 4px rgba(0, 0, 0, 0.35), 0 -14px 40px rgba(0, 0, 0, 0.4);
  transform: translateY(110%);
  transition: transform var(--d-moyen) var(--ease-sortie);
}
@media (max-width: 68rem) {
  .page-bien .barre-bien { display: flex; }
}
.barre-bien[data-visible="true"] { transform: none; }

.barre-bien__prix {
  display: grid;
  gap: 1px;
  min-width: 0;
  margin-inline-end: auto;
}
.barre-bien__prix b {
  font-family: var(--f-display);
  font-size: var(--t-lg);
  color: var(--chalk);
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.barre-bien__prix span {
  font-family: var(--f-mono);
  font-size: 0.6rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--chalk-35);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.barre-bien .btn { flex: none; }

/* Le bouton WhatsApp flottant cèderait la place à la barre : on l'efface
   pour ne pas empiler deux appels à l'action au même endroit. */
@media (max-width: 68rem) {
  .page-bien .wa-flottant { display: none; }
}

/* ---------- Squelettes de chargement du catalogue ---------- */
/* Sur une connexion lente, une grille qui pâlit ressemble à une panne.
   Des blocs en attente disent « ça travaille ». */

.squelette {
  background: var(--ink-200);
  border-radius: var(--r-md);
  overflow: hidden;
  display: grid;
  grid-template-rows: auto 1fr;
}
.squelette__media { aspect-ratio: 3 / 2; }
.squelette__corps { padding: var(--e-5); display: grid; gap: var(--e-3); }

.squelette__ligne {
  height: 0.7rem;
  border-radius: var(--r-xs);
  background: linear-gradient(
    90deg,
    var(--ink-300) 0%,
    var(--ink-400) 40%,
    var(--ink-300) 80%
  );
  background-size: 220% 100%;
  animation: attente 1.5s var(--ease-doux) infinite;
}
.squelette__media .squelette__ligne { height: 100%; border-radius: 0; }
.squelette__ligne--court { width: 45%; }
.squelette__ligne--moyen { width: 72%; }
.squelette__ligne--haut { height: 1.15rem; }

@keyframes attente {
  from { background-position: 120% 0; }
  to   { background-position: -120% 0; }
}

@media (prefers-reduced-motion: reduce) {
  .squelette__ligne { animation: none; }
}

/* ---------- Filtres repliables sur mobile ---------- */

.filtres__bascule {
  display: none;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-3);
  padding: var(--e-4) var(--e-5);
  border-radius: var(--r-md);
  background: var(--ink-200);
  color: var(--chalk);
  font-size: var(--t-sm);
  font-weight: 500;
}
.filtres__bascule b {
  font-family: var(--f-mono);
  font-size: var(--t-xxs);
  letter-spacing: 0.1em;
  color: var(--accent-clair);
  font-variant-numeric: tabular-nums;
}
.filtres__bascule::after {
  content: "";
  width: 10px;
  height: 10px;
  flex: none;
  background: var(--accent-clair);
  transition: transform var(--d-moyen) var(--ease-sortie);
  clip-path: polygon(46% 0, 54% 0, 54% 46%, 100% 46%, 100% 54%, 54% 54%, 54% 100%, 46% 100%, 46% 54%, 0 54%, 0 46%, 46% 46%);
}
.filtres__bascule[aria-expanded="true"]::after { transform: rotate(135deg); }

@media (max-width: 56rem) {
  .filtres__bascule { display: flex; }
  .filtres[data-replie="true"] .filtres__corps { display: none; }
  .filtres { gap: var(--e-3); }
}

.filtres__corps { display: grid; gap: var(--e-4); }

/* ---------- Carte, chargée à la demande ---------- */
/* Aucune ressource externe n'est appelée tant que le visiteur ne le
   demande pas : la fiche reste légère sur une connexion mobile. */

.carte-lieu {
  position: relative;
  border-radius: var(--r-md);
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: var(--ink-200);
  display: grid;
  place-items: center;
}
.carte-lieu::before {
  content: "";
  position: absolute;
  inset: -10%;
  opacity: 0.4;
  background-image:
    linear-gradient(rgba(244, 242, 238, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(244, 242, 238, 0.05) 1px, transparent 1px);
  background-size: 34px 34px;
  transform: rotate(-1.5deg) scale(1.06);
}
.carte-lieu__appel {
  position: relative;
  z-index: 1;
  display: grid;
  gap: var(--e-3);
  justify-items: center;
  text-align: center;
  padding: var(--e-5);
}
.carte-lieu__appel p {
  font-size: var(--t-xs);
  color: var(--chalk-35);
  max-width: 26ch;
}
.carte-lieu iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  z-index: 2;
}

/* ---------- Partage ---------- */

.partage {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--e-3);
}
.partage__lib {
  font-family: var(--f-mono);
  font-size: var(--t-xxs);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--chalk-35);
}
.partage__bouton {
  width: 2.4rem;
  height: 2.4rem;
  display: grid;
  place-items: center;
  border-radius: var(--r-plein);
  background: var(--ink-300);
  color: var(--chalk-55);
  transition: background var(--d-rapide) var(--ease-doux),
              color var(--d-rapide) var(--ease-doux);
}
.partage__bouton:hover { background: var(--ink-400); color: var(--chalk); }
.partage__bouton--wa:hover { background: #1f7a4d; color: #fff; }
.partage__retour {
  font-size: var(--t-xs);
  color: var(--dispo);
  opacity: 0;
  transition: opacity var(--d-rapide) var(--ease-doux);
}
.partage__retour[data-visible="true"] { opacity: 1; }

/* =============================================================
   16. Bloc de recherche et barre d'onglets (v2.4)
   ============================================================= */

/* ---------- Bloc de recherche sous le héros ---------- */
/* Le visiteur cherche un bien : on lui donne le moteur tout de suite,
   au lieu de l'obliger à trouver le lien du catalogue.
   Séparation des champs par palier de fond, jamais par un filet. */

.recherche {
  position: relative;
  z-index: 4;
  background: var(--ink-200);
  border-radius: var(--r-lg);
  padding: clamp(1.25rem, 2.5vw, 1.75rem);
  box-shadow: var(--ombre-flottante);
  display: grid;
  gap: var(--e-3);
}

/* Sur grand écran, le bloc chevauche le bas du héros : il signale que la
   recherche est l'action principale, sans ajouter de section. */
@media (min-width: 62rem) {
  .recherche { margin-top: clamp(-5rem, -4vw, -3rem); }
}

.recherche__champs {
  display: grid;
  gap: var(--e-2);
}
@media (min-width: 40rem) {
  .recherche__champs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 62rem) {
  .recherche__champs { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--e-3); }
}

.recherche__champ {
  display: grid;
  gap: var(--e-1);
  padding: var(--e-3) var(--e-4);
  border-radius: var(--r-md);
  background: var(--ink-000);
  transition: background var(--d-rapide) var(--ease-doux);
  min-width: 0;
}
.recherche__champ:hover,
.recherche__champ:focus-within { background: var(--ink-300); }

.recherche__lib {
  font-family: var(--f-mono);
  font-size: var(--t-xxs);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--chalk-35);
}

.recherche__champ select {
  width: 100%;
  background: transparent;
  color: var(--chalk);
  border: 0;
  padding: 0;
  font-size: var(--t-md);
  font-family: var(--f-sans);
  appearance: none;
  cursor: pointer;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8'><path d='M1 1l5 5 5-5' fill='none' stroke='%236f9fe4' stroke-width='1.6' stroke-linecap='round'/></svg>");
  background-repeat: no-repeat;
  background-position: right center;
  padding-right: 1.6em;
  text-overflow: ellipsis;
}
.recherche__champ select:focus { outline: none; }

.recherche__bas {
  display: grid;
  gap: var(--e-3);
  align-items: center;
}
@media (min-width: 40rem) {
  .recherche__bas { grid-template-columns: minmax(0, 1fr) auto; }
}

.recherche__envoyer {
  width: 100%;
  justify-content: center;
  padding-block: 1em;
  font-size: var(--t-md);
  letter-spacing: 0.02em;
}
@media (min-width: 40rem) {
  .recherche__envoyer { width: auto; padding-inline: 2.5em; }
}

.recherche__avance {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  font-size: var(--t-sm);
  color: var(--chalk-55);
  justify-self: start;
  transition: color var(--d-rapide) var(--ease-doux);
}
.recherche__avance:hover { color: var(--accent-clair); }
.recherche__avance svg { color: var(--accent-clair); }

/* ---------- Barre d'onglets mobile ---------- */
/* Les quatre gestes qui comptent, toujours à portée de pouce.
   Le marché est très majoritairement mobile et WhatsApp. */

.onglets {
  position: fixed;
  z-index: 42;
  inset-inline: 0;
  bottom: 0;
  display: none;
  background: rgba(12, 14, 17, 0.96);
  backdrop-filter: saturate(160%) blur(18px);
  -webkit-backdrop-filter: saturate(160%) blur(18px);
  box-shadow: 0 -1px 3px rgba(0, 0, 0, 0.4), 0 -12px 34px rgba(0, 0, 0, 0.38);
  padding-bottom: env(safe-area-inset-bottom);
}
@media (max-width: 62rem) {
  .onglets { display: grid; grid-template-columns: repeat(4, 1fr); }
  /* Le contenu ne doit pas se terminer sous la barre. */
  body { padding-bottom: 4.5rem; }
  /* Un seul appel à l'action flottant : WhatsApp vit dans la barre. */
  .wa-flottant { display: none; }
}

/* Sur une fiche de BIEN — et elle seule — la barre de prix occupe déjà
   cet emplacement. Les fiches de réalisation gardent les onglets. */
@media (max-width: 62rem) {
  .page-bien .onglets { display: none; }
}

.onglet {
  display: grid;
  justify-items: center;
  gap: 3px;
  padding: 0.6rem 0.25rem 0.5rem;
  color: var(--chalk-35);
  font-family: var(--f-mono);
  font-size: 0.56rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-align: center;
  transition: color var(--d-rapide) var(--ease-doux);
}
.onglet:hover,
.onglet[aria-current="page"] { color: var(--chalk); }
.onglet svg { display: block; }
.onglet--wa { color: #3ba76b; }
.onglet--wa:hover { color: #4fc985; }

/* ---------- 14. Utilitaires ---------- */

.visuellement-cache {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.evitement {
  position: absolute;
  top: -100%;
  left: var(--gouttiere);
  z-index: 80;
  background: var(--accent);
  color: #fff;
  padding: 0.7em 1.2em;
  border-radius: 0 0 var(--r-sm) var(--r-sm);
  font-size: var(--t-sm);
}
.evitement:focus { top: 0; }

.pile { display: grid; }
.pile--2 { gap: var(--e-2); }
.pile--3 { gap: var(--e-3); }
.pile--4 { gap: var(--e-4); }
.pile--5 { gap: var(--e-5); }
.pile--6 { gap: var(--e-6); }
.rang { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-3); }
.centre { text-align: center; justify-items: center; }

@media print {
  .entete, .voile-nav, .wa-flottant, .heros__descendre, .bandeau { display: none !important; }
  body { background: #fff; color: #000; }
  body::after { display: none; }
}