/*
 * Identité visuelle, appliquée.
 *
 * Toutes les valeurs viennent des styles CALCULÉS sur yanicksarrazin.com, pas
 * de ses feuilles : les 1,98 Mo de CSS agrégé sont dominés par du Bootstrap, et
 * y compter les couleurs donnait #007bff pour couleur de marque.
 *
 * CE QUI EST REPRIS, parce que le client le reconnaîtra : le contraste Tinos
 * serif / Roboto, le design plat sans rayon ni ombre, la palette de gris, le
 * rouge en touches, le badge noir rectangulaire, les compteurs en chiffres nus,
 * le mot-symbole à point rouge.
 *
 * CE QUI NE L'EST PAS, et pourquoi : la hauteur d'image figée à 350 px qui
 * faisait dériver le ratio de 1:1 à 1,72:1 selon la largeur ; le retrait de
 * 20 px des compteurs qui désalignait la colonne de texte ; le survol qui ne
 * produisait rien ; la photo en background-image, sans alt ni srcset ; l'année
 * de construction en troisième compteur, qui n'apprend rien à un acheteur.
 */

:root {
	/* Tokens extraits par bin/extraire-tokens.py.
	 *
	 * LES NOMS SONT PROVISOIRES ET MECANIQUES : `--e2`, `--t1`, `--gris-4`.
	 * Nommer une valeur par son ROLE demande de connaitre la direction visuelle,
	 * qui n'est pas arretee. Ils tiennent la place.
	 *
	 * Le renommage par role se fera apres la direction, et il sera prouve par les
	 * trois memes etages : identite statique des valeurs resolues, styles calcules
	 * pseudo-elements compris, et diff pixel sur les 18 pages a trois largeurs. */
	--gris-2: #8a8a8a;
	--gris-3: #bdbdbd;
	--gris-4: #2b2b2b;
	--gris-5: #cbcbcb;
	--noir-2: #232323;
	--noir-rgb: 0,0,0;
	--fond-rgb: 255,255,255;
	--e11: .55rem;
	--e2: .5rem;
	--e10: .6rem;
	--e14: .8rem;
	--e12: 0 0 .5rem;
	--e4: 0 0 .8rem;
	--e9: 1.4rem;
	--e15: 1.8rem;
	--e1: 1rem;
	--e13: 2.5rem;
	--e7: 2.5rem 0;
	--e8: 2rem;
	--e5: 2rem 0;
	--e16: 34px;
	--e6: 3rem 0;
	--e17: 4px;
	--e3: 5rem 0;
	--g6: 200;
	--g5: 300;
	--g4: 400;
	--g1: 500;
	--g2: 600;
	--g3: 700;
	--r2: 50%;
	--r1: 5px;
	--t11: -.5px;
	--t5: .04em;
	--t6: .06em;
	--t10: .12em;
	--t8: 1.3;
	--t9: 1.5;
	--t3: 12px;
	--t1: 13px;
	--t2: 14px;
	--t4: 15px;
	--t12: 17px;
	--t7: 20px;

  /* Palette mesurée. Le rouge est un ACCENT : il ne remplit jamais une surface,
     il ponctue. Sur le site il ne sert qu'au point du mot-symbole et aux états. */
  --noir: #000000;
  --encre: #222222;
  --encre-douce: #444444;
  --gris: #888888;
  --trait: #dddddd;
  --creme: #f0f0f0;
  --sans-photo-fond: var(--creme);
  --sans-photo-trait: var(--gris);
  --fond: #ffffff;
  --accent: #e22037;

  /* Typographie mesurée : Tinos 49px/500 avec interlettrage NÉGATIF pour les
     titres, Raleway capitales pour la navigation, Roboto 15px/28px pour le
     texte. Le rapport d'interligne de 1,87 est nettement aéré, on le garde. */
  --serif: "Tinos", "Times New Roman", Georgia, serif;
  --nav: "Raleway", "Helvetica Neue", Arial, sans-serif;
  /* INTER SUR LE SEUL TEXTE DE CORPS. `--serif` (les titres) et `--nav`
   * (la navigation) ne bougent pas : la demande porte sur le gris de corps,
   * et changer un titre se verrait sur les dix-huit pages a la fois.
   * Roboto reste en second : c'est la police servie jusqu'ici, donc le
   * repli le plus proche si un fichier Inter manquait. */
  --texte: "Inter", "Roboto", -apple-system, "Segoe UI", Arial, sans-serif;

  /* PLEINE LARGEUR. Le site est en boite de 1200 px ; sur un ecran de 2400 il
     laisse la moitie de la page vide alors que la photo est le contenu.
     La gouttiere s'ouvre avec l'ecran plutot que de rester figee : 1,5 rem sur
     telephone, jusqu'a 4 rem sur grand ecran. */
  --gouttiere: clamp(1.5rem, 3.5vw, 4rem);

  /* LA LECTURE, elle, ne suit pas. Une ligne de 2 000 px est illisible : l'oeil
     perd le debut de la ligne suivante. On borne les blocs de texte long, pas
     les grilles ni les photos. */
  --lecture: 72ch;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font: 15px/28px var(--texte);
  color: var(--encre);
  background: var(--fond);
}

img { max-width: 100%; height: auto; display: block; }
a { color: var(--encre); }

/* Étiquette réservée aux lecteurs d'écran : les compteurs sont des chiffres
   nus, sans texte visible. Sans elle, « 4 » ne veut rien dire à l'oreille. */
.sr {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.saut { position: absolute; left: -9999px; }
.saut:focus {
  left: 1rem; top: 1rem; z-index: 200;
  background: var(--noir); color: var(--fond); padding: .6rem 1rem;
}

.dedans { max-width: none; margin: 0 auto; padding: 0 var(--gouttiere); }

/* -- Bandeau -------------------------------------------------------------- */
/* Superposé à la bannière : fond sombre, texte blanc, aucune bordure. Le site
   le pose sur une photo ; ici le fond noir tient le même rôle. */

/* LE BANDEAU COLLANT.
   `sticky` et non `fixed` : il reste dans le flux, donc aucun saut de mise en
   page au moment ou il se colle. Avec `fixed` il aurait fallu compenser sa
   hauteur par un remplissage, ce qui decale toujours d'un pixel ou deux. */
.sentinelle { position: absolute; top: 0; height: 1px; width: 1px; }

.bandeau {
  background: var(--noir);
  position: sticky;
  top: 0;
  z-index: 50;
  transition: background-color .35s ease, min-height .35s ease, box-shadow .35s ease;
}

/* UNE FOIS DEFILE : a moitie transparent, mais LISIBLE DANS LES DEUX CAS.
   Un simple fond translucide suffit sur fond blanc et echoue sur une photo
   claire, ou le texte blanc se perd. Trois choses le garantissent ensemble :
   le flou d'arriere-plan qui casse les details de la photo, l'ombre portee qui
   detache le bandeau de ce qui passe dessous, et l'ombre du texte lui-meme. */
.bandeau.defile {
  background: rgba(var(--noir-rgb), .55);
  -webkit-backdrop-filter: saturate(1.4) blur(14px);
  backdrop-filter: saturate(1.4) blur(14px);
  box-shadow: 0 1px 0 rgba(var(--fond-rgb), .12), 0 6px 24px rgba(var(--noir-rgb), .28);
}
.bandeau.defile .logo,
.bandeau.defile .principale a,
.bandeau.defile .principale > .menu-deroulant > summary,
.bandeau.defile .langue { text-shadow: 0 1px 3px rgba(var(--noir-rgb), .55); }

/* Le bandeau se resserre une fois defile : il rend de la hauteur au contenu. */
.bandeau.defile .dedans { min-height: 66px; }
.bandeau .dedans, .bandeau.defile .dedans { transition: min-height .35s ease; }

/* Qui prefere moins d'animation n'en a pas. */
@media (prefers-reduced-motion: reduce) {
  .bandeau, .bandeau .dedans { transition: none; }
}
.bandeau .dedans {
  display: flex;
  align-items: center;
  gap: var(--e8);
  min-height: 91px;
}

/* LE MOT-SYMBOLE. Serif capitales, blanc, suivi d'un POINT ROUGE. Reproduit en
   texte plutôt qu'en image : net à toute densité, traduisible, et sans dépendre
   d'un fichier du thème sortant. */
.logo {
  font-family: var(--serif);
  font-weight: var(--g1);
  font-size: 1.45rem;
  letter-spacing: var(--t6);
  text-transform: uppercase;
  color: var(--fond);
  text-decoration: none;
  line-height: 1.05;
}
.logo::after { content: "."; color: var(--accent); }

.principale { display: flex; gap: 1.6rem; margin-left: auto; flex-wrap: wrap; }
.principale a,
.principale > .menu-deroulant > summary {
  font-family: var(--nav);
  font-size: 14.3px;
  text-transform: uppercase;
  letter-spacing: .02em;
  color: var(--fond);
  text-decoration: none;
  padding: 9px 0;
  border-bottom: 2px solid transparent;
}
.principale a:hover, .principale a:focus-visible,
.principale > .menu-deroulant > summary:hover,
.principale > .menu-deroulant > summary:focus-visible { border-bottom-color: var(--accent); }

.langue {
  font-family: var(--nav);
  font-size: var(--t3);
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--fond);
  text-decoration: none;
  border: 1px solid rgba(var(--fond-rgb), .35);
  padding: .3rem .7rem;
}
.langue:hover { border-color: var(--accent); }

main { max-width: none; margin: 0 auto; padding: 0 var(--gouttiere) 5rem; }

/* -- Fil d'Ariane --------------------------------------------------------- */

.fil { padding: 1.5rem 0 .5rem; font-size: var(--t1); color: var(--gris); }
.fil ol { list-style: none; display: flex; flex-wrap: wrap; gap: var(--e2); margin: 0; padding: 0; }
.fil li + li::before { content: "›"; margin-right: var(--e2); color: var(--trait); }
.fil a { color: var(--gris); text-decoration: none; }
.fil a:hover { color: var(--accent); }

/* -- Cartes de propriété -------------------------------------------------- */
/* Plates : rayon 0, aucune ombre, aucune surface propre. La carte n'est pas un
   objet posé sur la page, c'est un bloc de la page. */

/* MOINS DE COLONNES, DES CARTES PLUS LARGES. Sur un site immobilier la photo
   EST le contenu : on prefere trois grandes vignettes a quatre petites. Les
   colonnes s'elargissent avec l'ecran plutot que de se multiplier, et se
   bornent a 620 px pour ne pas depasser le derive de 1280 en densite double. */
.grille {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 420px), 1fr));
  gap: 3rem 2.5rem;
  max-width: calc(3 * 620px + 2 * 2.5rem);
}
@media (max-width: 991px) { .grille { grid-template-columns: repeat(2, 1fr); gap: 2rem 1.5rem; } }
@media (max-width: 620px) { .grille { grid-template-columns: 1fr; } }

.carte { background: none; border: 0; border-radius: 0; box-shadow: none; }
.carte a { text-decoration: none; color: inherit; display: block; }

.vignette { position: relative; overflow: hidden; }

/* RATIO FIXE 3:2. Le site fige la hauteur à 350 px, ce qui fait dériver la
   proportion de 1:1 à 1,72:1 selon la largeur de la colonne : la même photo n'a
   pas le même cadrage d'une rangée à l'autre. */
.vignette img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  transition: transform .45s ease, filter .45s ease;
}

/* UN SURVOL QUI PRODUIT QUELQUE CHOSE. Celui du site actuel pose un calque sans
   fond : le code existe, l'effet ne se voit pas. */
.carte a:hover .vignette img,
.carte a:focus-visible .vignette img { transform: scale(1.04); filter: brightness(.94); }
.carte a:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* LE BADGE : noir, rectangulaire, coin supérieur gauche, 10 px gras capitales. */
.badge {
  position: absolute;
  top: 0;
  left: 0;
  background: var(--noir);
  color: var(--fond);
  font-size: 10px;
  font-weight: var(--g3);
  letter-spacing: var(--t10);
  text-transform: uppercase;
  padding: .45rem .75rem;
}

/* TOUT SUR LA MÊME MARGE GAUCHE. Le site retire les compteurs de 20 px, ce qui
   désaligne la colonne de texte sous le titre. */
.carte .corps { padding: .9rem 0 0; }

/* Le contraste typographique, leur signature : serif pour la propriété,
   sans-serif pour tout le reste. */
.carte h3 {
  font-family: var(--serif);
  font-weight: var(--g1);
  font-size: 1.2rem;
  line-height: var(--t8);
  letter-spacing: -.3px;
  margin: 0 0 .15rem;
  color: var(--encre);
}
.carte .adresse {
  font-family: var(--serif);
  font-size: .95rem;
  color: var(--encre-douce);
  margin: 0 0 .7rem;
}

.ligne-chiffres {
  display: flex;
  align-items: center;
  gap: var(--e1);
  margin: 0;
  padding-top: var(--e10);
  border-top: 1px solid var(--trait);
}

/* Compteurs : icône et chiffre nu, gris, 13 px, sans étiquette. */
.compteur {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  font-size: var(--t1);
  color: var(--gris);
}

/* Le prix à droite sur la même ligne, 15 px gras encre. */
.ligne-chiffres .prix {
  margin-left: auto;
  font-size: var(--t4);
  font-weight: var(--g3);
  color: var(--encre);
}

.remplacement { background: var(--sans-photo-fond); }

/* LA VIGNETTE DE REMPLACEMENT EST UN SVG INLINE, et c'est le seul moyen pour
   qu'elle suive les tokens. Servi en `<img src=...>`, un SVG est un document
   separe : ni `currentColor` ni les variables de la page ne l'atteignent, et ses
   deux teintes restaient cuites dans le fichier.

   DEUX TOKENS DE ROLE, qui HERITENT des tokens de palette au lieu de recopier
   leur valeur. Le placeholder suit donc la palette par defaut, et le jour ou la
   direction voudra l'en decoupler, il y a un point ou le faire. Recopier
   `#f0f0f0` en aurait fait une troisieme valeur a retrouver. */
.remplacement .sp-fond { fill: var(--sans-photo-fond); }
.remplacement .sp-trait { stroke: var(--sans-photo-trait); }
.remplacement .sp-texte { fill: var(--sans-photo-trait); }

/* -- Fiche ---------------------------------------------------------------- */

.fiche-tete { padding: 1rem 0 2rem; border-bottom: 1px solid var(--trait); }
.fiche-tete h1 {
  font-family: var(--serif);
  font-weight: var(--g1);
  letter-spacing: var(--t11);
  font-size: clamp(1.9rem, 4.6vw, 3.06rem);
  line-height: 1.12;
  margin: 0 0 .4rem;
}
.fiche-tete .adresse {
  font-family: var(--serif);
  font-size: 1.05rem;
  color: var(--encre-douce);
  margin: 0 0 1.2rem;
}
.prix-grand { font-size: 1.9rem; font-weight: var(--g3); margin: 0; color: var(--encre); }
.etat-grand {
  display: inline-block;
  background: var(--noir);
  color: var(--fond);
  font-size: 10px;
  font-weight: var(--g3);
  letter-spacing: var(--t10);
  text-transform: uppercase;
  padding: .45rem .75rem;
  margin: 0;
}
.note { font-size: var(--t1); color: var(--gris); margin: .6rem 0 0; max-width: 48ch; }
.chapeau, .entete .chapeau { max-width: var(--lecture); }
.mls { font-size: var(--t3); color: var(--gris); margin: 1rem 0 0; letter-spacing: var(--t5); }

.galerie { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--e17); margin: var(--e5); }
.galerie > *:first-child { grid-column: 1 / -1; }
.galerie img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.galerie > *:first-child img { aspect-ratio: 2 / 1; }

/* La colonne de texte est bornee a une largeur de lecture ; la colonne des
   caracteristiques garde une largeur fixe, elle n'a pas a s'etirer. */
.colonnes { display: grid; grid-template-columns: minmax(0, var(--lecture)) minmax(280px, 340px); gap: clamp(2rem, 5vw, 6rem); align-items: start; }
.colonnes > div p { max-width: var(--lecture); }
.colonnes h2 {
  font-family: var(--nav);
  font-size: var(--t3);
  text-transform: uppercase;
  letter-spacing: var(--t10);
  color: var(--gris);
  font-weight: var(--g2);
  margin: var(--e4);
}

.caracteristiques { margin: 0 0 2.5rem; }
.caracteristiques div {
  display: flex;
  justify-content: space-between;
  gap: var(--e1);
  padding: .6rem 0;
  border-bottom: 1px solid var(--trait);
}
.caracteristiques dt { color: var(--gris); margin: 0; font-size: var(--t2); }
.caracteristiques dd { margin: 0; font-weight: var(--g3); }

.courtier { display: block; padding: .35rem 0; text-decoration: none; }
.courtier:hover { color: var(--accent); }

.maillage { margin: 3rem 0 0; padding: 1.25rem 0; border-top: 2px solid var(--noir); }
.maillage a { font-weight: var(--g3); text-decoration: none; }
.maillage a:hover { color: var(--accent); }

/* -- Entêtes de liste ----------------------------------------------------- */

.entete { padding: 1rem 0 2.5rem; }
.entete h1 {
  font-family: var(--serif);
  font-weight: var(--g1);
  letter-spacing: var(--t11);
  font-size: clamp(1.9rem, 4.6vw, 3.06rem);
  margin: 0 0 .3rem;
}
.chapeau { color: var(--gris); margin: 0; font-size: var(--t2); }

/* -- Accueil -------------------------------------------------------------- */

.hero {
  background: var(--noir);
  color: var(--fond);
  /* Le heros sort de la gouttiere pour toucher les deux bords. */
  margin: 0 calc(var(--gouttiere) * -1);
  padding: 6rem var(--gouttiere);
}
.hero h1 {
  font-family: var(--serif);
  font-weight: var(--g1);
  letter-spacing: var(--t11);
  font-size: clamp(2.2rem, 6vw, 3.9rem);
  margin: 0 0 .6rem;
}
.hero .chapeau { color: rgba(var(--fond-rgb), .75); }

.primeurs { margin: var(--e6); }
.primeurs h2, .quartiers h2 {
  font-family: var(--serif);
  font-weight: var(--g1);
  font-size: 1.7rem;
  letter-spacing: -.3px;
  margin: 0 0 .3rem;
}
.rail {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(300px, 1fr);
  gap: 1.75rem;
  overflow-x: auto;
  padding: 1.5rem 0 1rem;
  scroll-snap-type: x mandatory;

  /* LE RAIL DOIT SE BORNER LUI-MEME.
     Sans ces deux lignes, ses colonnes s'additionnent — sept cartes a 300 px
     minimum plus les gouttieres — et le conteneur s'elargit au lieu de defiler.
     Le document deborde alors horizontalement : on peut faire glisser la page
     entiere vers la droite, ce qui est le pire des defauts de mise en page
     puisqu'il ne se voit qu'en essayant. */
  max-width: 100%;
  min-width: 0;
}

/* LE CONFINEMENT. Borner le rail ne suffit pas : ses colonnes clippees comptent
   encore dans le `scrollWidth` du document, qui debordait de 192 px alors
   qu'aucun element visible ne depassait, et que `body.scrollWidth` valait
   exactement `clientWidth` : le debordement remonte du rail jusqu'a l'element
   racine en sautant body.
   `contain: paint` NE SUFFIT PAS - mesure : 2593 avec, 2401 avec `layout paint`.
   Le confinement de peinture empeche de dessiner au-dela des bords ; c'est le
   confinement de MISE EN PAGE qui empeche la region de defilement de remonter.
   Le debordement horizontal ne se voit qu'en essayant de faire glisser la page :
   c'est pour cela qu'il faut le MESURER, pas le regarder. */
.rail { contain: layout paint; }
.rail .carte { scroll-snap-align: start; }

.quartiers { margin: 3.5rem 0; }
.pastilles { list-style: none; margin: 1.2rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--e2); }
.pastilles a {
  display: inline-block;
  border: 1px solid var(--trait);
  padding: .5rem 1rem;
  text-decoration: none;
  font-size: var(--t2);
}
.pastilles a:hover { border-color: var(--noir); }
.pastilles span { color: var(--gris); font-size: var(--t3); }

/* -- Pied ----------------------------------------------------------------- */

.pied { background: var(--noir); color: rgba(var(--fond-rgb), .7); padding: var(--e7); font-size: var(--t1); }

@media (max-width: 980px) {
  .colonnes { grid-template-columns: 1fr; gap: var(--e13); }
}

@media (max-width: 780px) {
  .galerie { grid-template-columns: repeat(2, 1fr); }
  /* SUR TELEPHONE, il ne doit pas manger la moitie de l'ecran : la navigation
     defile horizontalement au lieu de passer a la ligne, ce qui garderait un
     bandeau de 150 px de haut. */
  .bandeau .dedans { min-height: 62px; gap: var(--e1); flex-wrap: nowrap; }
  .bandeau.defile .dedans { min-height: 54px; }
  .logo { font-size: 1.05rem; }
  .principale {
    margin-left: auto;
    gap: 1.1rem;
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .principale::-webkit-scrollbar { display: none; }
  .principale a { white-space: nowrap; font-size: 12.5px; padding: 6px 0; }
  .langue { padding: .2rem .5rem; font-size: 11px; }
}

/* -- Visionneuse ---------------------------------------------------------- */

.v-declencheur { display: block; padding: 0; border: 0; background: none; cursor: zoom-in; width: 100%; }
.v-declencheur:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

.v-reste {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  aspect-ratio: 3 / 2;
  background: var(--creme);
  font-family: var(--serif);
  font-size: 1.7rem;
  font-weight: var(--g1);
  color: var(--encre);
  cursor: pointer;
  border: 0;
}
.v-reste span { font-family: var(--texte); font-size: var(--t3); font-weight: var(--g4); color: var(--gris); }

.visionneuse {
  position: fixed; inset: 0; z-index: 100;
  background: rgba(var(--noir-rgb), .95);
  display: flex; align-items: center; justify-content: center;
}
.visionneuse[hidden] { display: none; }
body.visionneuse-ouverte { overflow: hidden; }

.v-scene { margin: 0; max-width: 92vw; max-height: 88vh; display: flex; flex-direction: column; }
.v-image { max-width: 92vw; max-height: 82vh; object-fit: contain; transition: opacity .15s; }
.visionneuse.chargement .v-image { opacity: .35; }
.v-legende { color: rgba(var(--fond-rgb), .75); font-size: var(--t1); padding: .75rem 0 0; text-align: center; }
.v-legende[hidden] { display: none; }

.visionneuse button {
  position: absolute;
  background: rgba(var(--fond-rgb), .1);
  border: 0; color: var(--fond); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.visionneuse button:hover { background: var(--accent); }
.visionneuse button:focus-visible { outline: 2px solid var(--fond); outline-offset: 2px; }

.v-fermer { top: 1rem; right: 1rem; width: 48px; height: 48px; }
.v-prec, .v-suiv { top: 50%; transform: translateY(-50%); width: 56px; height: 88px; }
.v-prec { left: 1rem; }
.v-suiv { right: 1rem; }
.visionneuse button[hidden] { display: none; }

.v-compteur {
  position: absolute; bottom: 1.25rem; left: 50%; transform: translateX(-50%);
  margin: 0; color: var(--fond); font-size: var(--t1); letter-spacing: .1em;
  background: rgba(var(--noir-rgb), .6); padding: .35rem .9rem;
}

@media (max-width: 780px) {
  .v-prec, .v-suiv { width: 40px; height: 64px; }
  .v-prec { left: .25rem; }
  .v-suiv { right: .25rem; }
  .v-image { max-height: 74vh; }
}

/* -- Bloc de recherche ---------------------------------------------------- */
/*
 * MESURE PRISE SUR /nos-proprietes/ DU SITE ACTUEL :
 *   panneau         rgba(0, 0, 0, .48), padding 10px, ombre 0 1px 5px
 *   grille          4 colonnes, le prix en occupe 2
 *   champ blanc     #fff, hauteur 40px, dans une boite de 60px (10px 5px)
 *   etiquette       Roboto 14px / 500, #222
 *   bouton          #000, #fff, capitales, 13px / 600, rayon 5px, hauteur 48px
 *
 * Ce qui change ici : les champs prennent notre typographie et notre noir, et
 * le tiroir s'ouvre avec `<details>` natif au lieu de trois scripts.
 */
.filtres {
  margin-top: var(--e13);
  /* PLEINE LARGEUR NE VEUT PAS DIRE CHAMPS DEMESURES. La grille de cartes
     traverse l'ecran ; un champ « Nombre de chambres » de 592 px, non. Le
     plafond ramene chaque champ a ~354 px, la mesure prise sur le site actuel
     (347 px dans un conteneur de 1439). */
  max-width: 1440px;
  margin-inline: auto;
  background: rgba(var(--fond-rgb), .10);
  backdrop-filter: blur(8px);
  padding: .75rem;
  box-shadow: 0 1px 5px rgba(var(--noir-rgb), .2);
}
.filtres-grille {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--e2);
}
.filtre { min-width: 0; }
.filtre-large { grid-column: span 2; }

.filtre > details,
.filtre .champ,
.filtre-case > label {
  background: var(--fond);
  color: var(--noir);
  height: 44px;
  display: flex;
  align-items: center;
  padding: 0 .9rem;
  font-size: var(--t2);
  font-weight: var(--g1);
}

/* -- Les tiroirs ---------------------------------------------------------- */
.filtre > details { position: relative; display: block; padding: 0; }
.filtre > details > summary {
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e2);
  padding: 0 .9rem;
  cursor: pointer;
  list-style: none;
  /* Le libelle d'un quartier est long : il se coupe plutot que de deformer la
     grille. */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.filtre > details > summary::-webkit-details-marker { display: none; }
.filtre > details > summary::after {
  content: '';
  flex: none;
  width: 8px;
  height: 8px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform .15s ease;
}
.filtre > details[open] > summary::after { transform: rotate(-135deg) translate(-2px, -2px); }
.filtre > details > summary:focus-visible { outline: 2px solid var(--noir); outline-offset: -2px; }

.tiroir {
  position: absolute;
  z-index: 20;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  min-width: 260px;
  max-height: 320px;
  overflow-y: auto;
  background: var(--fond);
  box-shadow: 0 8px 24px rgba(var(--noir-rgb), .28);
  padding: .5rem 0;
}
.tiroir label {
  display: flex;
  align-items: center;
  gap: var(--e11);
  padding: .42rem .9rem;
  font-size: 13.5px;
  font-weight: var(--g4);
  line-height: var(--t8);
  cursor: pointer;
}
.tiroir label:hover { background: var(--sable, #f5f3ef); }
.tiroir .n { margin-left: auto; color: var(--gris); font-size: var(--t3); flex: none; }

/* La case, dessinee : celle du navigateur ne se met pas au noir de la charte. */
.filtres input[type="checkbox"] { position: absolute; opacity: 0; width: 0; height: 0; }
.coche {
  flex: none;
  width: 16px;
  height: 16px;
  border: 1px solid var(--gris-3);
  background: var(--fond);
  position: relative;
}
input[type="checkbox"]:checked + .coche { background: var(--noir); border-color: var(--noir); }
input[type="checkbox"]:checked + .coche::after {
  content: '';
  position: absolute;
  left: 4px;
  top: 1px;
  width: 5px;
  height: 9px;
  border-right: 2px solid var(--fond);
  border-bottom: 2px solid var(--fond);
  transform: rotate(45deg);
}
input[type="checkbox"]:focus-visible + .coche { outline: 2px solid var(--noir); outline-offset: 2px; }

/* -- Les champs de saisie ------------------------------------------------- */
.champ { gap: .4rem; }
.champ label { flex: none; color: var(--gris); font-size: var(--t1); font-weight: var(--g4); }
.champ input {
  min-width: 0;
  flex: 1 1 auto;
  border: 0;
  background: transparent;
  font: inherit;
  font-size: var(--t2);
  color: var(--noir);
  padding: 0;
}
.champ input:focus-visible { outline: 2px solid var(--noir); outline-offset: 2px; }
.champ span { flex: none; color: var(--gris); font-size: var(--t1); }
.champ-texte input { text-align: left; }
.filtre-case > label { gap: var(--e11); cursor: pointer; }

/* -- Le bouton ------------------------------------------------------------ */
.filtres-bouton {
  margin-top: var(--e2);
  width: 100%;
  height: 48px;
  border: 0;
  border-radius: var(--r1);
  background: var(--noir);
  color: var(--fond);
  font-family: inherit;
  font-size: var(--t1);
  font-weight: var(--g2);
  letter-spacing: var(--t6);
  text-transform: uppercase;
  cursor: pointer;
}
.filtres-bouton:hover { background: var(--gris-4); }
.filtres-bouton:focus-visible { outline: 2px solid var(--fond); outline-offset: 2px; }

/* SUR TELEPHONE, une grille de quatre colonnes rend des champs de 70 px. On
   descend a deux, puis a une, et le prix cesse d'occuper deux colonnes. */
@media (max-width: 900px) {
  .filtres-grille { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .filtres-grille { grid-template-columns: 1fr; }
  .filtre-large { grid-column: span 1; }
  .champ-prix { font-size: var(--t1); }
}

/* -- Voir toutes les proprietes ------------------------------------------- */
.voir-suite { margin: 2.5rem 0 1rem; text-align: center; }
.bouton {
  display: inline-block;
  padding: .95rem 2.4rem;
  border: 1px solid var(--noir);
  background: var(--noir);
  color: var(--fond);
  text-decoration: none;
  font-size: var(--t1);
  font-weight: var(--g2);
  letter-spacing: var(--t6);
  text-transform: uppercase;
  border-radius: var(--r1);
}
.bouton:hover { background: var(--fond); color: var(--noir); }
.bouton:focus-visible { outline: 2px solid var(--noir); outline-offset: 3px; }

/* -- Heros avec video ------------------------------------------------------ */
.hero { position: relative; overflow: hidden; isolation: isolate; }
.hero-video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; z-index: -2; pointer-events: none;
}
/* Le voile garantit le contraste du texte QUELLE QUE SOIT l'image de la video :
   une frame claire ne doit pas rendre le titre illisible. */
.hero-voile {
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(var(--noir-rgb), .55) 0%, rgba(var(--noir-rgb), .35) 45%, rgba(var(--noir-rgb), .65) 100%);
}
.hero-dedans { position: relative; }

/* -- Rangees de proprietes ------------------------------------------------- */
.rangee { margin: 4rem 0; }
.rangee-tete { display: flex; align-items: baseline; justify-content: space-between; gap: var(--e1); margin-bottom: var(--e9); }
.rangee-tete h2 { margin: 0; }
.lien-tout { font-size: var(--t1); letter-spacing: var(--t5); text-transform: uppercase; color: var(--rouge, #b3121b); text-decoration: none; white-space: nowrap; }
.lien-tout:hover { text-decoration: underline; }

/* -- Courtiers ------------------------------------------------------------- */
.courtiers { margin: var(--e3); }
.surtitre { max-width: 68ch; color: var(--gris); font-size: var(--t4); line-height: 1.6; margin: var(--e4); }
.grille-courtiers {
  list-style: none; padding: 0; margin: 2rem 0 2.5rem;
  display: grid; gap: 1.2rem;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr));
}
.courtier a { display: block; text-decoration: none; color: inherit; }

/* LA BOITE EST FIXE, L IMAGE S Y ADAPTE.
 *
 * `height: auto` laissait chaque tuile prendre la hauteur de son fichier : les
 * portraits 500x750 sortaient deux fois plus hauts que les cadrages 360x260, et
 * la grille partait en escalier. Les vingt et une photos de l equipe viennent de
 * seances differentes et n auront jamais le meme format.
 *
 * `aspect-ratio` fixe la boite, `object-fit: cover` remplit sans deformer, et
 * `object-position: center 22%` remonte le cadrage vers le haut du cadre - c est
 * la que sont les visages sur un portrait en pied.
 */
.courtier .vue,
.courtier img {
  width: 100%; display: block;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  object-position: center 22%;
  background: var(--gris-5);
}
.courtier-initiale {
  display: grid; place-items: center;
  width: 100%; aspect-ratio: 3 / 4;
  background: var(--gris-5); color: var(--gris-2);
  font-family: var(--serif); font-size: 2.6rem; letter-spacing: .04em;
}
.courtier-nom {
  display: block; margin-top: .7rem;
  font-family: var(--serif); font-size: 19px; font-weight: var(--g1);
}
.courtier-fonction {
  display: block; margin-top: .15rem;
  font-size: var(--t3); color: var(--gris-2);
  letter-spacing: var(--t5);
}
.courtier a:hover .courtier-nom { color: var(--rouge, #b3121b); }

/* -- Le texte de presentation, sous les tuiles ----------------------------- */
.equipe-groupe { margin: var(--e6); }
.equipe-groupe h2 {
  font-family: var(--serif); font-size: var(--t7); font-weight: var(--g2);
  letter-spacing: var(--t5); margin: 0 0 var(--e9);
}
.equipe-presentation {
  max-width: 68ch; margin: var(--e6) auto; padding: 0 var(--e1);
}
.equipe-presentation p { font-size: var(--t4); line-height: var(--t9); margin: 0 0 var(--e1); }
.equipe-presentation h2,
.equipe-presentation h3 {
  font-family: var(--serif); font-weight: var(--g2);
  margin: var(--e8) 0 var(--e11);
}
.equipe-presentation h2 { font-size: var(--t7); }
.equipe-presentation h3 { font-size: var(--t12); }
.equipe-presentation h3.equipe-personne { margin-top: var(--e13); }
.equipe-presentation p.equipe-fonction {
  margin: 0 0 var(--e10);
  font-size: var(--t3); letter-spacing: var(--t6);
  text-transform: uppercase; color: var(--gris-2);
}
.centre { text-align: center; margin: var(--e5); }

/* -- Damier de quartiers --------------------------------------------------- */
.quartiers-damier { margin: var(--e3); }
.damier {
  list-style: none; padding: 0; margin: 2rem 0 0;
  display: grid; gap: var(--e1);
  grid-template-columns: repeat(4, 1fr);
}
.tuile-large { grid-column: span 2; }
.tuile a { position: relative; display: block; overflow: hidden; text-decoration: none; }
.tuile img { width: 100%; height: 100%; aspect-ratio: 3 / 2; object-fit: cover; display: block; transition: transform .5s ease; }
.tuile a:hover img { transform: scale(1.04); }
.tuile-texte {
  position: absolute; inset: auto 0 0 0; padding: var(--e9);
  background: linear-gradient(0deg, rgba(var(--noir-rgb), .72) 0%, rgba(var(--noir-rgb), 0) 100%);
  color: var(--fond);
}
.tuile-texte strong { display: block; font-family: var(--serif); font-size: 22px; font-weight: var(--g1); }
.tuile-texte em { display: block; font-style: normal; font-size: var(--t2); opacity: .82; margin-top: .2rem; }

/* -- Temoignages ----------------------------------------------------------- */
.temoignages { margin: var(--e3); }
.grille-temoignages { display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); }
.temoignage { margin: 0; padding: var(--e15); background: var(--sable, #f5f3ef); }
.temoignage blockquote { margin: 0; font-family: var(--serif); font-size: 18px; line-height: var(--t9); }
.temoignage figcaption { margin-top: var(--e1); font-size: var(--t1); color: var(--gris); }

/* -- Actualites ------------------------------------------------------------ */
.actualites { margin: var(--e3); }
.grille-articles { list-style: none; padding: 0; margin: 2rem 0 0; display: grid; gap: var(--e15); grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); }
.article a { display: block; text-decoration: none; color: inherit; }
.article time { font-size: var(--t3); letter-spacing: var(--t6); text-transform: uppercase; color: var(--gris); }
.article h3 { font-family: var(--serif); font-size: var(--t7); font-weight: var(--g1); margin: .5rem 0 .6rem; line-height: var(--t8); }
.article p { margin: var(--e4); font-size: var(--t2); color: var(--gris); line-height: 1.55; }
.lire { font-size: var(--t1); letter-spacing: var(--t5); text-transform: uppercase; color: var(--rouge, #b3121b); }
.article a:hover h3 { color: var(--rouge, #b3121b); }

/* -- Contact --------------------------------------------------------------- */
.contact { margin: 5rem calc(var(--gouttiere) * -1) 0; padding: 4rem var(--gouttiere); background: var(--noir); color: var(--fond); }
.contact-dedans { max-width: 720px; margin: 0 auto; }
.contact h2 { margin-top: 0; }
.contact .chapeau { color: rgba(var(--fond-rgb), .72); margin-bottom: var(--e8); }
.champ-ligne { display: flex; flex-direction: column; gap: .35rem; margin: 0 0 1.1rem; }
.champ-ligne label { font-size: var(--t1); letter-spacing: .03em; color: rgba(var(--fond-rgb), .72); }
.champ-ligne input, .champ-ligne textarea {
  font: inherit; font-size: var(--t4); padding: .75rem .9rem;
  border: 0; background: var(--fond); color: var(--noir); width: 100%;
}
.champ-ligne textarea { resize: vertical; }
.champ-projet { border: 0; padding: 0; margin: 0 0 1.4rem; }
.champ-projet legend { font-size: var(--t1); letter-spacing: .03em; color: rgba(var(--fond-rgb), .72); padding: var(--e12); }
.champ-projet label { display: flex; align-items: center; gap: var(--e11); margin: .45rem 0; font-size: var(--t4); cursor: pointer; }
.contact .filtres-bouton { border: 1px solid var(--fond); }
.contact .filtres-bouton:hover { background: var(--fond); color: var(--noir); }

/* -- Instagram ------------------------------------------------------------- */
.instagram { margin: 5rem 0 2rem; text-align: center; }
.mur-instagram { list-style: none; padding: 0; margin: var(--e5); display: grid; gap: var(--e10); grid-template-columns: repeat(6, 1fr); }
.mur-instagram img { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; }

@media (max-width: 900px) {
  .damier { grid-template-columns: repeat(2, 1fr); }
  .tuile-large { grid-column: span 2; }
  .mur-instagram { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 560px) {
  .damier { grid-template-columns: 1fr; }
  .tuile-large { grid-column: span 1; }
}

/* -- Corrections d'accueil ------------------------------------------------- */

/* LA DERNIERE RANGEE INCOMPLETE EST CENTREE. Au-dela de 1456 px la grille tient
   3 colonnes : 5 fiches donnent 3 + 2, et les deux du bas collaient a gauche en
   laissant un trou a droite. `justify-content: center` centre les pistes, et
   `justify-items: stretch` garde les cartes pleine largeur dans leur piste. */
.grille { justify-content: center; }

/* LE FILTRE DEROULE NE DOIT PAS ETRE COUPE. Le tiroir « Quartier » liste 71
   entrees : il sortait du heros, qui le rognait. Deux causes, deux correctifs :
   le heros n'ecrete plus, et le bloc de filtres passe au-dessus de la video. */
.hero { overflow: visible; }
.hero-dedans { z-index: 2; }
.filtres { position: relative; z-index: 3; }
.filtre > details[open] { z-index: 30; }
.tiroir { z-index: 40; }

/* -- Sur-titres ------------------------------------------------------------ */
.surtitre {
  max-width: 62ch;
  margin: 0 auto 1.2rem;
  text-align: center;
  font-family: var(--serif);
  font-size: clamp(1.05rem, 1.6vw, 1.35rem);
  font-weight: var(--g4);
  line-height: 1.75;
  color: var(--gris);
}
.courtiers, .quartiers-damier { text-align: center; }
.courtiers h2, .quartiers-damier h2 { text-align: center; }
.quartiers-damier > .chapeau {
  max-width: 62ch;
  margin: 0 auto 2rem;
  text-align: center;
  font-family: var(--serif);
  font-size: clamp(1.05rem, 1.6vw, 1.35rem);
  line-height: 1.75;
  color: var(--gris);
}
.damier, .grille-courtiers { text-align: left; }

/* -- Le manege des courtiers ----------------------------------------------- */
/*
 * DEFILEMENT CONTINU, pas un carrousel a diapos. La liste est dupliquee une
 * fois dans le HTML et l'animation translate de -50 % : au moment ou la copie
 * arrive a l'endroit du debut, la boucle repart sans saut visible.
 *
 * `prefers-reduced-motion` arrete le manege et rend une grille : un defilement
 * perpetuel est exactement ce que ce reglage demande d'eviter.
 */
.manege { overflow: hidden; margin: var(--e7); -webkit-mask-image: linear-gradient(90deg, transparent, var(--noir) 6%, var(--noir) 94%, transparent); mask-image: linear-gradient(90deg, transparent, var(--noir) 6%, var(--noir) 94%, transparent); }
.manege-piste { display: flex; gap: 1.2rem; width: max-content; animation: defiler 64s linear infinite; }
.manege:hover .manege-piste, .manege:focus-within .manege-piste { animation-play-state: paused; }
.manege .courtier { flex: 0 0 clamp(200px, 18vw, 260px); list-style: none; }
@keyframes defiler { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .manege { overflow: visible; -webkit-mask-image: none; mask-image: none; }
  .manege-piste { flex-wrap: wrap; width: auto; animation: none; justify-content: center; }
  .manege-piste > .copie { display: none; }
}

/* -- Contact adouci -------------------------------------------------------- */
/* Le noir plein etait trop dur en bas de page. Un gris tres fonce garde le
   contraste du bouton blanc sur noir sans trancher net avec le reste. */
.contact { background: var(--noir-2); }
.contact .chapeau { color: rgba(var(--fond-rgb), .66); }
.contact h2 { color: var(--fond); }

/* -- Page de resultats ----------------------------------------------------- */
.criteres { margin: var(--e7); padding: 1.5rem 1.8rem; background: var(--sable, #f5f3ef); }
.criteres h2 { margin: var(--e4); font-size: var(--t7); }
.criteres ul { list-style: none; padding: 0; margin: 0; font-size: var(--t2); line-height: 1.8; }
.criteres strong { font-weight: var(--g2); }
.article img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; display: block; margin-bottom: .9rem; background: var(--sable, #f5f3ef); }
.article a:hover img { opacity: .92; }

/* -- Heros plus haut ------------------------------------------------------- */
/* La video n'etait pas assez visible : le heros lui laisse desormais une vraie
   place, sans jamais depasser la hauteur de l'ecran. */
.hero { padding-block: clamp(5rem, 11vh, 9rem); min-height: min(78vh, 900px); display: flex; align-items: center; }
.hero-dedans { width: 100%; }


/* -- Avis de gabarit ------------------------------------------------------- */
.avis-gabarit { display: inline-block; margin: 0 0 1rem; padding: .5rem .9rem; background: var(--sable, #f5f3ef); border-left: 3px solid var(--rouge, #b3121b); font-size: 13.5px; }
.avis-gabarit strong { text-transform: uppercase; letter-spacing: .05em; font-size: var(--t3); }
.damier-index { grid-template-columns: repeat(3, 1fr); }
.damier-index .tuile-large { grid-column: span 1; }

@media (max-width: 900px) {
  .pied-colonnes { grid-template-columns: 1fr; }
  .damier-index { grid-template-columns: repeat(2, 1fr); }
}


/* -- Pied de page ---------------------------------------------------------- */
/*
 * RELEVE SUR yanicksarrazin.com, mesure par mesure : deux sections sur fond
 * #000, trois colonnes egales, et DEUX COULEURS DE TEXTE SEULEMENT, blanc et
 * #8a8a8a. Toute autre valeur de gris serait une invention.
 *
 * TROIS DEFAUTS DU SITE ACTUEL NE SONT PAS REPRODUITS :
 *   - l'icone TikTok, PNG rendu a 7x7 px en noir sur noir : les cinq reseaux
 *     sont ici des SVG au meme gabarit de 16x16 et a la meme couleur ;
 *   - le separateur a largeur nulle : on garde son espacement, pas son trait ;
 *   - « Politique de confidentialite » en Roboto : tout le pied est en
 *     Montserrat, sauf les deux titres en Tinos.
 */
.pied-riche {
  margin: 4rem 0 0;
  background: var(--noir);
  color: var(--gris-2);
  font-family: 'Montserrat', var(--sans, system-ui), sans-serif;
}
.pied-haut {
  display: grid;
  grid-template-columns: repeat(3, 33.333%);
  padding: 47px var(--gouttiere) 9px;
  max-width: 1440px;
  margin: 0 auto;
}
.pied-col { text-align: center; }
/* Tous les widgets a 20px, sauf le dernier de chaque colonne. */
.pied-col > * { margin: 0 0 20px; }
.pied-col > :last-child { margin-bottom: 0; }

.pied-logo { width: 278px; height: 56px; max-width: 100%; display: block; margin: 0 auto 20px; }
.pied-titre-site {
  font-family: var(--serif);
  font-size: var(--t12); font-weight: var(--g6); line-height: var(--t12); letter-spacing: -.1px;
  color: var(--gris-2); text-align: center;
}
.pied-reseaux { display: flex; justify-content: center; gap: 14px; }
/* SPECIFICITE : `.pied-riche a { color: inherit }` est declaree plus bas avec
   la meme force (0,1,1) et l'emportait, ramenant les icones a #8a8a8a. On
   qualifie par le conteneur plutot que d'ajouter `!important`. */
.pied-riche .pied-reseaux a { display: inline-flex; width: 16px; height: 16px; color: rgba(var(--fond-rgb), .8); }
.pied-riche .pied-reseaux a:hover { color: var(--fond); }
.pied-reseaux svg { width: 16px; height: 16px; display: block; }

.pied-riche h3 {
  font-family: var(--serif);
  font-size: 16px; font-weight: var(--g2); color: var(--fond); margin: 0 0 20px; text-transform: none;
}
.pied-riche a { text-decoration: none; color: inherit; }
.pied-riche a:hover { text-decoration: underline; }
.pied-tel a { display: inline-flex; align-items: center; gap: 7px; font-size: 18.2px; font-weight: var(--g2); color: var(--fond); }
.pied-mail a, .pied-adresse a { display: inline-flex; align-items: center; gap: 7px; font-size: var(--t1); font-weight: var(--g2); color: var(--gris-2); }
.pied-adresse a { align-items: flex-start; line-height: var(--t9); }
.pied-note { font-size: var(--t3); font-weight: var(--g5); color: var(--gris-2); line-height: var(--t9); }
.pied-note a { color: var(--gris-2); text-decoration: underline; }

.pied-seo { font-size: var(--t1); font-weight: var(--g5); line-height: 16.9px; color: var(--gris-2); text-align: center; }
.pied-ordres { font-size: var(--t1); font-weight: var(--g5); }
.pied-ordres a { color: var(--fond); }
.pied-confid { font-size: var(--t1); font-weight: var(--g5); }
.pied-confid a { color: var(--gris-2); }

.pied-bas { padding: 10px var(--gouttiere); max-width: 1440px; margin: 0 auto; text-align: center; }

/* LE SEPARATEUR NE DESSINE RIEN, il espace. Sur le site actuel c'est un divider
   a largeur nulle : le trait ne se voit pas, mais sa place compte dans la
   hauteur du pied. On garde donc l'espacement releve, 30 px de haut plus 20 px
   de marge, sans bordure. `aria-hidden` parce qu'il n'a rien a annoncer. */
.pied-separateur { height: 30px; margin-bottom: 20px; }
/* LE RELEVE DIT 10,4 px AVEC UN INTERLIGNE DE 10,4 px : les lignes se touchent,
   et a cette taille sur fond noir le texte est illisible. On s'ecarte du releve
   sciemment - taille remontee a 11,5 px, interligne a 1,7 - parce que ce sont
   des mentions legales de courtage : elles doivent pouvoir se lire. */
.pied-bas p { margin: 0 0 .35rem; font-size: 11.5px; font-weight: var(--g5); line-height: 1.7; color: var(--gris-2); }
.pied-bas p:last-child { margin-bottom: 0; }

@media (max-width: 900px) {
  .pied-haut { grid-template-columns: 1fr; gap: var(--e16); padding-top: var(--e16); }
}

/* -- Videos de quartier ---------------------------------------------------- */
.videos-quartiers { margin: var(--e3); text-align: center; }
.video-carrousel { position: relative; overflow: hidden; margin-top: var(--e8); }
.video-piste { display: flex; gap: 16px; list-style: none; margin: 0; padding: 0; transition: transform .6s ease; }
.video-tuile { flex: 0 0 calc((100% - 32px) / 3); }
.video-facade {
  position: relative; display: block; width: 100%; padding: 0;
  border: 0; background: none; cursor: pointer; font: inherit; color: inherit;
}
.video-facade img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block; }
.video-jouer { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.video-jouer .v-fond { fill: rgba(var(--noir-rgb), .62); transition: fill .2s ease; }
.video-facade:hover .v-fond, .video-facade:focus-visible .v-fond { fill: var(--rouge, #b3121b); }
.video-facade:focus-visible { outline: 2px solid var(--noir); outline-offset: 3px; }
.video-nom {
  display: block; margin-top: var(--e14);
  font-family: var(--serif); font-size: 19px; font-weight: var(--g1); color: var(--noir);
}
.video-cadre { width: 100%; aspect-ratio: 16 / 9; border: 0; display: block; }
.video-prec, .video-suiv {
  position: absolute; top: calc(50% - 2rem); transform: translateY(-50%); z-index: 5;
  width: 44px; height: 44px; border: 0; border-radius: var(--r2);
  background: rgba(var(--noir-rgb), .6); color: var(--fond); font-size: 26px; line-height: 1; cursor: pointer;
}
.video-prec { left: 8px; }
.video-suiv { right: 8px; }
.video-prec:hover, .video-suiv:hover { background: var(--noir); }

/* -- Damier : plus de trou en derniere rangee ------------------------------ */
/* 8 tuiles sur 4 colonnes, dont 2 larges : la derniere rangee n'en portait que
   2 et laissait un vide a droite. Sur 6 colonnes, une large en occupe 3 et une
   simple 2 : 2 larges puis 3 + 3, les trois rangees sont pleines. */
.damier { grid-template-columns: repeat(6, 1fr); }
.damier > .tuile { grid-column: span 2; }
.damier > .tuile-large { grid-column: span 3; }

/* Le compte du compte Instagram, centre comme ses icones. */
.instagram > .chapeau { text-align: center; }

@media (max-width: 900px) {
  .video-tuile { flex: 0 0 calc((100% - 16px) / 2); }
  .damier { grid-template-columns: repeat(2, 1fr); }
  .damier > .tuile, .damier > .tuile-large { grid-column: span 1; }
}
@media (max-width: 560px) {
  .video-tuile { flex: 0 0 100%; }
  .damier { grid-template-columns: 1fr; }
}

/* -- Menu principal, trois niveaux ----------------------------------------- */
/*
 * DEROULANT AU SURVOL sur grand ecran, comme chez eux, mais `:focus-within` est
 * ajoute partout : sans lui, le menu serait inaccessible au clavier. Sur
 * telephone, tout s'ouvre au clic - un survol n'existe pas au doigt.
 */
.principale ul { list-style: none; margin: 0; padding: 0; }
.m-n1 { display: flex; align-items: center; gap: var(--e9); }
.m-n1 > li { position: relative; }
.principale a, .principale .m-inerte {
  font-family: var(--nav);
  font-size: 14.3px;
  text-transform: uppercase;
  letter-spacing: .02em;
  color: var(--fond);
  text-decoration: none;
  padding: 9px 0;
  border-bottom: 2px solid transparent;
  display: inline-block;
  cursor: pointer;
}
.m-n1 > li:hover > a, .m-n1 > li:focus-within > a,
.m-n1 > li:hover > .m-inerte, .m-n1 > li:focus-within > .m-inerte { border-bottom-color: var(--accent); }

/* Niveaux 2 et 3 : masques par defaut, poses par-dessus le contenu. */
/* UN DEROULANT FERME NE DOIT PAS ELARGIR LE DOCUMENT.
 *
 * Les sous-menus sont en `position: absolute` et masques par `visibility:
 * hidden` - qui les garde DANS LE CALCUL DE LARGEUR. Un `m-n3` de 3e niveau,
 * pose a `left: 100%` du dernier sous-menu, sortait a 1409 px sur un document
 * de 1177 : la page defilait de 232 px vers la droite, en permanence, sans
 * qu'aucun element visible ne deborde.
 *
 * `overflow-x: clip` sur `body` et non `hidden` : `hidden` ferait de `body` un
 * conteneur de defilement et casserait le `position: sticky` du bandeau, alors
 * que `clip` se contente de couper. Les deroulants ouverts, eux, restent
 * entierement visibles - c'est mesure page par page. */
/* SUR LES DEUX, PAS SUR `body` SEUL. Pose sur `body` uniquement, la regle est
   bien calculee - `overflow-x: clip` s'y lit - mais le document continue de
   defiler : c'est `html` qui porte le defilement de la page. Mesure : 232 px
   avec `body` seul, 0 avec les deux. */
html, body { overflow-x: clip; }

/* AUCUN DEROULANT NE DEFILE.
 *
 * La version precedente posait `max-height: 70vh; overflow-y: auto` sur les
 * sous-menus. Deux consequences, toutes deux visibles :
 *   - une barre de defilement et un contenu coupe en bas ;
 *   - surtout, le 3e niveau s'ouvre en `left: 100%`, donc HORS du sous-menu :
 *     l'`overflow` du parent le rognait net. Un conteneur qui defile clippe
 *     aussi ce qui en sort lateralement.
 *
 * Le diagnostic a remonte toute la chaine jusqu'a `body` : aucun parent ne
 * clippait. Le coupable etait la regle elle-meme. */
.m-n2, .m-n3 {
  position: absolute; z-index: 70; min-width: 250px;
  background: var(--fond); box-shadow: 0 10px 30px rgba(var(--noir-rgb), .3); padding: .4rem 0;
  opacity: 0; visibility: hidden; transition: opacity .15s ease;
}
.m-n2 { top: 100%; left: 0; }
.m-n3 { top: -.4rem; left: 100%; }
/* Quand le sous-menu sortirait de l'ecran, il s'ouvre de l'autre cote. */
.m-n2.a-gauche { left: auto; right: 0; }
.m-n3.a-gauche { left: auto; right: 100%; }
.m-parent:hover > .m-n2, .m-parent:focus-within > .m-n2,
.m-parent:hover > .m-n3, .m-parent:focus-within > .m-n3 { opacity: 1; visibility: visible; }
.m-n2 li, .m-n3 li { position: relative; }
.m-n2 a, .m-n3 a, .m-n2 .m-inerte, .m-n3 .m-inerte {
  display: block; padding: .5rem 1.1rem; font-size: var(--t1); text-transform: none;
  letter-spacing: 0; color: var(--noir); border: 0; white-space: nowrap;
}
.m-n2 a:hover, .m-n3 a:hover { background: var(--sable, #f5f3ef); }
/* Un parent de 3e niveau porte un chevron vers la droite. */
.m-n2 > .m-parent > a::after, .m-n2 > .m-parent > .m-inerte::after {
  content: '›'; float: right; margin-left: var(--e14); opacity: .5;
}

/* La bascule ne sert qu'au tactile : masquee au clavier et a la souris. */
.m-bascule, .m-hamburger { display: none; }

@media (max-width: 1100px) {
  .m-hamburger {
    display: flex; flex-direction: column; justify-content: center; gap: 5px;
    width: 44px; height: 44px; border: 0; background: none; cursor: pointer; padding: 0;
  }
  .m-hamburger span { display: block; height: 2px; background: var(--fond); }
  .principale {
    position: absolute; top: 100%; left: 0; right: 0; z-index: 80;
    background: var(--noir); max-height: 0; overflow: hidden; transition: max-height .3s ease;
  }
  .principale.ouvert { max-height: 80vh; overflow-y: auto; }
  .m-n1 { flex-direction: column; align-items: stretch; gap: 0; padding: .5rem 0 1rem; }
  .m-n1 > li { border-top: 1px solid rgba(var(--fond-rgb), .12); }
  .principale a, .principale .m-inerte { display: block; padding: .8rem var(--gouttiere); border: 0; }
  .m-n2, .m-n3 {
    position: static; opacity: 1; visibility: visible; max-height: 0; overflow: hidden;
    background: rgba(var(--fond-rgb), .06); box-shadow: none; padding: 0; min-width: 0;
    transition: max-height .3s ease;
  }
  /* AU CLIC, PAS AU SURVOL : le survol n'existe pas au doigt. */
  .m-parent:hover > .m-n2, .m-parent:focus-within > .m-n2,
  .m-parent:hover > .m-n3, .m-parent:focus-within > .m-n3 { max-height: 0; }
  .m-parent.ouvert > .m-n2, .m-parent.ouvert > .m-n3 { max-height: 220vh; overflow-y: auto; }
  .m-n2 a, .m-n3 a, .m-n2 .m-inerte, .m-n3 .m-inerte { color: var(--fond); white-space: normal; padding-left: calc(var(--gouttiere) + 1rem); }
  .m-n3 a { padding-left: calc(var(--gouttiere) + 2rem); }
  .m-n2 > .m-parent > a::after, .m-n2 > .m-parent > .m-inerte::after { content: none; }
  .m-bascule {
    display: block; position: absolute; top: 0; right: 0; width: 52px; height: 46px;
    border: 0; background: none; cursor: pointer;
  }
  .m-bascule span {
    display: block; width: 9px; height: 9px; margin: 0 auto;
    border-right: 2px solid var(--fond); border-bottom: 2px solid var(--fond);
    transform: rotate(45deg); transition: transform .2s ease;
  }
  .m-parent.ouvert > .m-bascule span { transform: rotate(-135deg); }
}
.video-repli { display: flex; align-items: center; justify-content: center; aspect-ratio: 16 / 9; background: var(--noir); color: var(--fond); text-decoration: underline; font-size: var(--t2); padding: var(--e1); text-align: center; }

/* La mention discrete : on ouvre YouTube, ce n'est pas une lecture sur place. */
.video-hors {
  display: block; margin-top: .2rem;
  font-size: 11.5px; letter-spacing: var(--t5); text-transform: uppercase;
  color: var(--gris);
}
.video-facade { text-decoration: none; color: inherit; display: block; }
.video-facade:hover .video-nom { color: var(--rouge, #b3121b); }
.par-mois { font-size: .75em; font-weight: var(--g4); opacity: .7; margin-left: .15em; }

/* -- Carrousels de proprietes ---------------------------------------------- */
/*
 * TROIS CARTES VISIBLES, deux en tablette, une au telephone. La largeur d'une
 * carte est calculee sur celle de la piste, gouttieres deduites : le carrousel
 * ne depasse jamais de son conteneur, quelle que soit la quantite de fiches.
 */
.rangee-piste {
  display: flex;
  gap: 24px;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  /* La barre de defilement native est masquee : les fleches et le balayage
     suffisent, et elle couperait le bas des cartes. */
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding-bottom: var(--e17);
}
.rangee-piste::-webkit-scrollbar { display: none; }
.rangee-piste > .carte {
  flex: 0 0 calc((100% - 48px) / 3);
  scroll-snap-align: start;
  min-width: 0;
}
/* LE FOCUS DOIT SE VOIR. La piste est focalisable pour que les fleches du
   clavier defilent : sans contour visible, on ne saurait pas ou l'on est. */
.rangee-piste:focus-visible { outline: 2px solid var(--noir); outline-offset: 4px; }

.rangee-outils { display: flex; align-items: center; gap: var(--e10); }
.rangee-prec, .rangee-suiv {
  width: 38px; height: 38px; flex: none;
  border: 1px solid var(--noir); border-radius: var(--r2);
  background: var(--fond); color: var(--noir);
  font-size: var(--t7); line-height: 1; cursor: pointer;
}
.rangee-prec:hover, .rangee-suiv:hover { background: var(--noir); color: var(--fond); }
.rangee-prec:focus-visible, .rangee-suiv:focus-visible { outline: 2px solid var(--noir); outline-offset: 2px; }
.rangee-prec[hidden], .rangee-suiv[hidden] { display: none; }

@media (max-width: 900px) {
  .rangee-piste > .carte { flex-basis: calc((100% - 24px) / 2); }
}
@media (max-width: 620px) {
  .rangee-piste { gap: 16px; }
  .rangee-piste > .carte { flex-basis: 100%; }
}
/* Le defilement doux est une animation : on le coupe si l'on n'en veut pas. */
@media (prefers-reduced-motion: reduce) {
  .rangee-piste { scroll-behavior: auto; }
}

/* -- Page de resultats ----------------------------------------------------- */
.res-compte { font-size: var(--t4); font-weight: var(--g1); color: var(--noir); }

/* LES AVIS DU PRIX ne sont pas des erreurs : ils expliquent une regle. Le filet
   rouge attire l'oeil sans crier a la panne, ce que ferait un fond rouge. */
.res-avis {
  max-width: 72ch;
  margin: 1rem 0 0;
  padding: .8rem 1rem;
  background: var(--sable, #f5f3ef);
  border-left: 3px solid var(--rouge, #b3121b);
  font-size: var(--t2);
  line-height: 1.55;
}
.res-avis[hidden] { display: none; }

.res-vide { margin: var(--e6); padding: 2.5rem var(--gouttiere); background: var(--sable, #f5f3ef); text-align: center; }
.res-vide[hidden] { display: none; }
.res-vide-titre { font-family: var(--serif); font-size: 22px; margin: var(--e12); }

.res-pages { display: flex; align-items: center; justify-content: center; gap: 1.5rem; margin: var(--e6); }
.res-pages a {
  padding: .7rem 1.4rem;
  border: 1px solid var(--noir);
  color: var(--noir);
  text-decoration: none;
  font-size: var(--t1);
  letter-spacing: var(--t5);
  text-transform: uppercase;
}
.res-pages a:hover { background: var(--noir); color: var(--fond); }
.res-pages a[hidden] { display: none; }
.res-compte-pages { font-size: var(--t2); color: var(--gris); }

/* Le selecteur de superficie, dans le champ. */
.champ-plage select {
  border: 0;
  background: transparent;
  font: inherit;
  font-size: var(--t1);
  color: var(--noir);
  cursor: pointer;
  max-width: 9em;
}
.champ-plage select:focus-visible { outline: 2px solid var(--noir); outline-offset: 2px; }

/* -- Le bouton du heros ---------------------------------------------------- */
/* LE BOUTON PAR DEFAUT EST NOIR SUR CLAIR : pose sur la video du heros, il
   disparaissait dans le voile sombre. La variante claire inverse les deux, et
   garde la meme geometrie pour que rien ne bouge d'un ecran a l'autre. */
.hero-action { margin: 1.8rem 0 0; }
.bouton-clair {
  border-color: var(--fond);
  background: var(--fond);
  color: var(--noir);
}
.bouton-clair:hover { background: transparent; color: var(--fond); }
.bouton-clair:focus-visible { outline: 2px solid var(--fond); outline-offset: 3px; }

/* -- Le texte sous la banniere --------------------------------------------- */
/* La phrase du client est longue et nomme six quartiers : elle respire mieux
   centree, dans la largeur de lecture, qu'etiree sur toute la page. */
.banniere-texte { margin: 3rem 0 1rem; }
.banniere-texte .surtitre { margin-bottom: 0; }

/* -- Le texte de quartier -------------------------------------------------- */
/* IL VIENT D'UN AUTRE SITE, donc on ne compte pas sur ses classes : le style
   porte sur les balises elles-memes, apres nettoyage. La largeur de lecture
   s'applique, sinon les paragraphes courent sur 1440 pixels. */
.quartier-texte { margin: 0 0 3.5rem; }
.quartier-texte h2 {
  font-family: var(--serif);
  font-weight: var(--g1);
  font-size: clamp(1.35rem, 2.6vw, 1.85rem);
  letter-spacing: -.3px;
  margin: 2.2rem 0 .7rem;
}
.quartier-texte h2:first-child { margin-top: 0; }
.quartier-texte p { max-width: var(--lecture); margin: 0 0 1.1rem; line-height: 1.75; }
.quartier-texte ul { max-width: var(--lecture); margin: 0 0 1.1rem; padding-left: 1.2rem; line-height: 1.75; }
.quartier-texte li { margin-bottom: .35rem; }
.quartier-texte a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.quartier-texte a:hover { color: var(--rouge, #b3121b); }

/* == LES FORMULAIRES DE CONTACT ============================================
 *
 * Rendus par `YE\Centris\Formulaire_Contact`, sur les quatre contextes relevés
 * du site sortant. Tout est bâti sur les jetons déjà là : aucune couleur, aucune
 * graisse, aucun rayon n'est introduit ici.
 *
 * LE PIÈGE EST HORS-ÉCRAN, PAS EN `display: none`.
 *
 * Il était SANS AUCUN STYLE jusqu'ici, donc parfaitement visible : un champ
 * « Ne pas remplir » s'affichait au milieu du formulaire, et un visiteur qui le
 * remplissait par curiosité voyait sa demande refusée EN SILENCE. C'est
 * exactement la perte de prospect que `Lead` existe pour empêcher, et je l'avais
 * introduite en croyant m'en prémunir.
 *
 * `display: none` et `visibility: hidden` sont les deux réflexes, et les
 * robots qui valent quelque chose les lisent : ils sautent le champ, et le piège
 * ne prend plus rien. Le sortir du cadre le rend invisible à l'œil sans le dire
 * au robot. `tabindex="-1"` et `aria-hidden` (posés par le PHP) le retirent du
 * clavier et des lecteurs d'écran, donc personne ne l'atteint par accident.
 * ------------------------------------------------------------------------- */

.formulaires {
  max-width: 720px;
  margin: var(--e6);
  padding: 0 var(--e1);
}

.formulaires h2 {
  font-size: var(--t7);
  font-weight: var(--g2);
  letter-spacing: var(--t5);
  margin: 0 0 var(--e9);
}

/* Deux formulaires sur une même page - le cas des pages d'évaluation - se
   séparent par un filet, sinon ils se lisent comme un seul. */
.formulaires .formulaire-contact + .formulaire-contact {
  margin-top: var(--e13);
  padding-top: var(--e13);
  border-top: 1px solid var(--gris-5);
}

.formulaire-champ {
  display: flex;
  flex-direction: column;
  margin: 0 0 var(--e9);
}

/* LE LIBELLÉ EST UN VRAI LIBELLÉ, et il reste affiché. Le site sortant n'avait
   que des `placeholder`, qui disparaissent dès qu'on tape : le visiteur qui
   revient sur un champ ne sait plus ce qu'on lui demandait. */
.formulaire-champ label {
  font-size: var(--t3);
  font-weight: var(--g2);
  letter-spacing: var(--t5);
  text-transform: uppercase;
  color: var(--gris-4);
  margin: 0 0 var(--e11);
}

.formulaire-champ .requis { color: var(--accent); }

.formulaire-champ input,
.formulaire-champ textarea {
  font-family: inherit;
  font-size: var(--t4);
  line-height: var(--t9);
  color: var(--noir);
  background: var(--fond);
  border: 1px solid var(--gris-3);
  border-radius: var(--r1);
  padding: var(--e10) var(--e14);
  width: 100%;
}

.formulaire-champ textarea { resize: vertical; min-height: 7rem; }

.formulaire-champ input:focus,
.formulaire-champ textarea:focus {
  outline: 2px solid var(--noir);
  outline-offset: 1px;
  border-color: var(--noir);
}

.formulaire-champ input::placeholder,
.formulaire-champ textarea::placeholder { color: var(--gris-2); }

/* Les trois cases d'intention de l'accueil, en ligne tant que la largeur le
   permet, empilées ensuite. */
.formulaire-cases {
  border: 0;
  margin: 0 0 var(--e9);
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--e14) var(--e8);
}

.formulaire-cases label {
  display: flex;
  align-items: center;
  gap: var(--e2);
  font-size: var(--t2);
  line-height: var(--t8);
  color: var(--gris-4);
  cursor: pointer;
}

.formulaire-cases input[type="checkbox"] {
  width: 1rem;
  height: 1rem;
  accent-color: var(--noir);
  flex: none;
}

.formulaire-envoi { margin: var(--e9) 0 0; }

/* Le bouton réutilise `.bouton`, déjà défini plus haut : noir, capitales,
   interligne élargi. Il n'y a rien à redéfinir, seulement à le laisser
   remplir la largeur sur mobile. */
.formulaire-envoi .bouton { border: 1px solid var(--noir); cursor: pointer; }

.formulaire-retour {
  font-size: var(--t4);
  line-height: var(--t9);
  padding: var(--e10) var(--e14);
  border-radius: var(--r1);
  margin: 0 0 var(--e9);
  border: 1px solid var(--gris-3);
}

.formulaire-ok { border-color: var(--noir); }
.formulaire-erreur { border-color: var(--accent); color: var(--accent); }

.ye-hp {
  position: absolute;
  left: -9999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

@media (max-width: 600px) {
  .formulaires { margin: var(--e5); }
  .formulaire-cases { flex-direction: column; gap: var(--e14); }
  .formulaire-envoi .bouton { display: block; width: 100%; text-align: center; }
}

/* -- LES CAPSULES VIDEO -----------------------------------------------------
 *
 * Reposees apres l'import : le site sortant les portait dans des widgets
 * Elementor, hors du contenu, et la bascule les avait perdues. La vignette est
 * un LIEN vers YouTube, pas un lecteur : le proprietaire de la chaine restreint
 * la lecture a son domaine (erreur 153), une facade rendrait un carre noir.
 */
.capsules { margin: 48px 0; }
.capsules > h2 { margin: 0 0 20px; }
.capsules-liste { flex-wrap: wrap; }
.capsule { position: relative; }
.capsule-lien { display: block; position: relative; text-decoration: none; color: inherit; }
.capsule-lien img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 4px; }
.capsule-jouer { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; pointer-events: none; }
.capsule-jouer svg { width: 58px; height: 41px; fill: rgba(0, 0, 0, .72); transition: fill .2s ease; }
.capsule-lien:hover .capsule-jouer svg,
.capsule-lien:focus-visible .capsule-jouer svg { fill: #c00; }
.capsule-lien:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
.capsule-legende { display: block; margin-top: 10px; font-size: .95rem; line-height: 1.35; }

/* Le rappel « s'ouvre sur YouTube » est lu par les lecteurs d'ecran et retire
 * de l'affichage : hors champ, JAMAIS display:none, qui l'en retirerait aussi. */
.ye-hp-visuel { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* -- LE LOGO ----------------------------------------------------------------
 *
 * Deux etats, et le repli n'est pas un ornement : tant que le fichier n'est pas
 * depose, l'en-tete rend le nom du site en toutes lettres plutot qu'une icone
 * cassee sur toutes les pages des deux langues.
 */
.logo-image { display: inline-flex; align-items: center; padding: 0; }
.logo-image img { display: block; height: 34px; width: auto; max-width: 220px; }
@media (max-width: 767px) { .logo-image img { height: 28px; max-width: 170px; } }