/*
 * rh-facade — sélecteur de lots sur un rendu de façade.
 *
 * Principe de lisibilité : au survol d'une zone, le RESTE de la façade s'assombrit
 * (« projecteur ») au lieu de teinter la zone. Un aplat saumon à 45 % est invisible
 * sur la pierre claire du rendu — mesuré le 09/09/2026 sur facade-rue.jpg.
 *
 * Sans JavaScript : le calque SVG n'est jamais inséré, la liste des lots reste
 * entièrement lisible et chaque détail est atteignable via <details>.
 */

/* --- TUNABLES : réglage du ressenti en preview, comme rh-hover.css --- */
:root{
  /* Voile derrière la modale. Rouge de charte (#F54E16 = palette-color-1)
     assombri, sinon un rouge plein à cette surface écrase tout le reste. */
  --rh-facade-voile: rgba(150, 44, 14, .55);
  --rh-facade-voile-flou: 6px;          /* 0 pour désactiver le flou */
  --rh-facade-modale-duree: .32s;       /* apparition de la modale */
  --rh-facade-modale-duree-sortie: .2s; /* fermeture — plus courte que l'entrée */
  --rh-facade-modale-ease: cubic-bezier(0.16, 1, 0.3, 1); /* même ease-out que le balayage CTA */
  --rh-facade-pastille-taille: 15px;    /* n° de lot sur la zone, pour un repère de 1500 px */
  --rh-facade-ecart: 4rem;              /* entre deux façades l'une sous l'autre (ST-TRA-031) */
  --rh-facade-cote-taille: 24px;        /* titre d'orientation — sous le <h1> de la page (30 px) */
  --rh-facade-modale-largeur: 1120px;   /* fiche V1 (ST-TRA-032) : 1120 px sur la maquette de 1440 */

  /* Couleurs porteuses de sens — les seules qu'un changement de charte touche. */
  --rh-facade-surbrillance: var(--wp--preset--color--palette-color-2, rgba(255,158,162,1));
  --rh-facade-dispo-libre: #3f9d6d;
  --rh-facade-dispo-option: #e0a33a;
  --rh-facade-dispo-vendu: #b9b3ad;
  /* Cartes de lots (ST-TRA-045) : carte active (sa zone est survolée), lot vendu, texte second. */
  --rh-facade-actif: #e8757a;
  --rh-facade-actif-fond: #fff7f6;
  --rh-facade-vendu-fond: #faf8f6;
  --rh-facade-texte-2: #5c6b69;

  /* Fiche V1 (ST-TRA-032) — dérivés de la charte, relevés sur la maquette validée par Tralux. */
  --rh-facade-accent: var(--rh-hover-cta-base, #f54e16);      /* titre, surfaces : orange de charte */
  --rh-facade-encre: #283836;                                  /* texte de la fiche */
  --rh-facade-fond: #fff;                                      /* fond de la fiche et du plan */
  --rh-facade-filet: #e2ddd8;                                  /* filets de séparation */
  /* Cartes de surface : le saumon de charte (celui de la surbrillance), éclairci. */
  --rh-facade-carte-fond: color-mix(in srgb, var(--rh-facade-surbrillance) 10%, var(--rh-facade-fond));
  --rh-facade-carte-bord: color-mix(in srgb, var(--rh-facade-surbrillance) 55%, var(--rh-facade-fond));
  --rh-facade-attente: #f4f1ee;                                /* chargement du plan : fond… */
  --rh-facade-attente-reflet: #fbfaf9;                         /* … et reflet qui le traverse */
}

.rh-facade{ margin:0 0 2rem }

/*
 * ST-TRA-075 — aide au-dessus des façades : icône « info » orange de charte + une ligne de texte.
 * Le texte « survolez… cliquez » ne vaut qu'avec une souris ; un écran tactile (aucun survol)
 * reçoit « touchez… ». Aucune animation.
 */
.rh-facade-aide{
  display:flex; align-items:flex-start; gap:10px;
  margin:0 0 1.5rem;
  color:var(--theme-palette-color-4, #011412);
  font-size:15px; line-height:1.5;
}
.rh-facade-aide__icone{
  flex:none; margin-top:1px;
  color:var(--theme-palette-color-1, #F54E16);
}
.rh-facade-aide__texte--toucher{ display:none }
@media (hover: none){
  .rh-facade-aide__texte--survol{ display:none }
  .rh-facade-aide__texte--toucher{ display:inline }
}

/*
 * ST-TRA-031 — deux façades l'une sous l'autre, chacune titrée de son orientation.
 * Police et graisse héritées du <h2> du thème. La TAILLE, non : le <h2> de Blocksy (35 px)
 * dépassait le titre de la page (<h1> d'archive, 30 px) et coupait « Sainte- / Croix » sur
 * téléphone — relevé en aperçu le 23/09/2026.
 */
.rh-facade + .rh-facade{ margin-top:var(--rh-facade-ecart, 4rem) }

/*
 * ST-TRA-049 — la 2ᵉ façade (« Côté Val Sainte-Croix ») sur un fond rose pâle, d'un bord à
 * l'autre de l'écran : celui du bloc « L'histoire du lieu » de « Le quartier » (couleur 5 de la
 * palette, mesurée le 01/10/2026). Choix d'Etienne : les deux façades se distinguent d'un coup
 * d'œil. Ciblée par sa POSITION (la 2ᵉ), pas par un id : une page à une seule façade n'a pas
 * de fond.
 * Le fond déborde de la colonne par `border-image` (remplissage + débordement de 100vmax à
 * gauche et à droite) : il ne crée pas de défilement horizontal, contrairement à un 100vw, et ne
 * rogne rien, contrairement à `clip-path` — la façade collante et la fiche restent intactes.
 */
.rh-facade + .rh-facade{
  padding-block:var(--rh-facade-bande-marge, 4rem);
  border-image:conic-gradient(var(--theme-palette-color-5, #fff5f6) 0 0) fill 0 / 0 / 0 100vmax;
}
.rh-facade__cote{
  margin:0 0 1rem;
  font-size:var(--rh-facade-cote-taille, 24px);
  line-height:1.3;
}

/* Angles droits (ST-TRA-045, 30/09/2026) : tout le site est en `border-radius: 0` — voir la
   modale plus bas. Le cadre et les cartes étaient les seuls éléments arrondis.
   Sans bordure depuis ST-TRA-049 (Etienne, 01/10/2026) : le filet gris se lisait comme un cadre
   autour de la photo, surtout sur la bande rose pâle de la 2ᵉ façade. */
.rh-facade__cadre{
  position:relative;
  border:0;
  border-radius:0;
  overflow:hidden;
  background:#fff;
}
.rh-facade__indice{
  display:none; margin:0; padding:9px 14px;
  font-size:.82rem; color:#5c6b69;
  background:#fbfaf9; border-bottom:1px solid #e2ddd8;
}
.rh-facade__defilement{ overflow-x:auto; -webkit-overflow-scrolling:touch }
/* ST-TRA-061 — la zone de défilement prend le focus au clavier (si elle déborde, cf. rh-facade.js).
   L'anneau ne peut pas être son propre `outline` : la scène (positionnée) et le calque SVG se
   peignent PAR-DESSUS (constaté le 19/10/2026, anneau invisible), et le cadre coupe ce qui dépasse
   (`overflow:hidden`). On le dessine donc en surimpression sur le cadre (indice compris : il décrit
   la zone), dès que la zone a le focus clavier. Même rose que les zones de lots. Aucune animation :
   rien à adapter pour `prefers-reduced-motion`. Sans `:has()` (navigateurs anciens), le focus reste
   fonctionnel mais sans anneau. */
.rh-facade__defilement:focus{ outline:none }
.rh-facade__cadre:has(> .rh-facade__defilement:focus-visible)::after{
  content:""; position:absolute; inset:0; z-index:2;
  border:3px solid #e8757a; pointer-events:none;
  /* Liseré foncé à l'intérieur : le rose seul se perd sur les tons clairs de la façade. */
  box-shadow:inset 0 0 0 2px #283836;
}
.rh-facade__scene{ position:relative; display:block; margin:0 }
.rh-facade__scene img{ display:block; width:100%; height:auto }

/* Le calque n'existe que si le JS a pris la main. */
.rh-facade__calque{ position:absolute; inset:0; width:100%; height:100% }

.rh-facade__scrim{
  fill:#101b1a; opacity:0; pointer-events:none;
  transition:opacity .2s ease;
}
.rh-facade__scrim.est-actif{ opacity:.55 }

.rh-facade__zone{
  fill:rgba(255,158,162,0);
  stroke:rgba(255,255,255,0);
  stroke-width:calc(2.5px * var(--rh-facade-echelle, 1));
  cursor:pointer;
  transition:fill .18s ease, stroke .18s ease;
}
.rh-facade__zone:hover,
.rh-facade__zone.est-actif{
  fill:rgba(255,158,162,.30);
  stroke:#fff;
  stroke-width:calc(3px * var(--rh-facade-echelle, 1));
}
.rh-facade__zone:focus{ outline:none }
.rh-facade__zone:focus-visible{
  fill:rgba(255,158,162,.30);
  stroke:#fff; stroke-width:calc(3px * var(--rh-facade-echelle, 1));
  outline:3px solid #e8757a;
  outline-offset:1px;
}
/* Lot vendu : la zone reste cliquable — sa fiche s'ouvre, comme sa carte (ST-TRA-045). */

.rh-facade__pastille-svg{
  /* Tailles écrites pour un repère de 1500 px, corrigées par --rh-facade-echelle (posé par le
     JS d'après la largeur de l'image) : sans ça, un rendu plus grand rapetisse le texte. */
  fill:#fff; font-weight:700; pointer-events:none;
  font-size:calc(var(--rh-facade-pastille-taille) * var(--rh-facade-echelle, 1));
  paint-order:stroke; stroke:rgba(40,56,54,.85); stroke-linejoin:round;
  stroke-width:calc(4px * var(--rh-facade-echelle, 1));
}

/* ---- liste des lots : rendue par PHP, donc présente sans JS ---- */
/*
 * Design du 30/09/2026 (ST-TRA-045) — trois niveaux lisibles : sur-titre discret en capitales,
 * titre de groupe avec son nombre de lots, nom du lot. Avant, titre de groupe (17 px gras) et
 * nom du lot (16 px gras) se confondaient. Grille de 8 px : 16 entre les cartes et dedans,
 * 40 entre les groupes (c'était 10 / 12 / 14).
 */
.rh-facade__titre{
  margin:3rem 0 0;
  font-size:.8125rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase;
  color:var(--rh-facade-texte-2);
}
/* ST-TRA-045 — titre de chaque groupe de lots (Studios, Appartements 1 chambre…). */
.rh-facade__groupe{
  display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 12px;
  margin:2.5rem 0 1rem;
  font-size:1.25rem; font-weight:600; line-height:1.3; letter-spacing:-.01em;
  color:var(--rh-facade-encre, #283836);
}
.rh-facade__titre + .rh-facade__groupe,
.rh-facade__titre + .rh-facade__ancre + .rh-facade__groupe{ margin-top:1rem }
/*
 * ST-TRA-057 — repère d'ancre nommée (`#studios`, `#1-chambre`…) posé juste avant le titre du
 * groupe, visé depuis l'accueil. Bloc de hauteur nulle ; l'arrivée est décalée sous le header
 * fixe. `--header-height` (Blocksy, hauteur pleine) et non `--rh-header-h` (suit le
 * rétrécissement) : le titre reste dégagé quel que soit l'état du header à l'arrivée.
 */
.rh-facade__ancre{
  display:block; height:0;
  scroll-margin-top:calc(var(--header-height, 120px) + 8px);
}
.rh-facade__nb{
  font-size:.875rem; font-weight:400; letter-spacing:0; color:var(--rh-facade-texte-2);
  font-variant-numeric:tabular-nums;
}
.rh-facade__liste{
  list-style:none; margin:0; padding:0;
  display:grid; gap:16px;
  grid-template-columns:repeat(auto-fill, minmax(256px, 1fr));
}
.rh-facade__lot{
  background:#fff; border:1px solid var(--rh-facade-filet, #e2ddd8); border-radius:0;
  transition:border-color .15s ease-out, background-color .15s ease-out, box-shadow .15s ease-out;
}
/*
 * États de la carte :
 *   - survol : le bord fonce, la flèche avance ;
 *   - active (sa zone est survolée sur la façade, ou la carte a le focus) : fond rosé et trait
 *     saumon à gauche — la même couleur que la surbrillance de la zone ;
 *   - vendue : grisée, toujours ouvrable (la fiche reste consultable).
 */
.rh-facade__lot:hover{ border-color:var(--rh-facade-encre, #283836) }
.rh-facade__lot.est-actif{
  border-color:var(--rh-facade-actif);
  background:var(--rh-facade-actif-fond);
  box-shadow:inset 3px 0 0 var(--rh-facade-actif);
}
.rh-facade__lot--vendu{ background:var(--rh-facade-vendu-fond) }
.rh-facade__lot--vendu .rh-facade__ref,
.rh-facade__lot--vendu .rh-facade__dispo{ color:var(--rh-facade-texte-2) }

.rh-facade__entete{
  display:grid; grid-template-columns:minmax(0, 1fr) auto; gap:4px 12px;
  align-items:center; width:100%;
  padding:16px 16px 16px 20px;
  background:none; border:0; border-radius:0; text-align:left;
  font:inherit; color:inherit;
}
button.rh-facade__entete{ cursor:pointer }
.rh-facade__entete:focus{ outline:none }
/* Contour en encre (12:1 sur blanc) : le saumon foncé #e8757a ne donnait que 2,9:1, sous les 3:1
   exigés pour un indicateur de focus (revue du 01/10/2026). */
.rh-facade__entete:focus-visible{ outline:3px solid var(--rh-facade-encre, #283836); outline-offset:2px }
/* Flèche d'affordance : seulement sur le <button> posé par le JS (sans JS, rien n'est cliquable). */
button.rh-facade__entete::after{
  content:""; grid-column:2; grid-row:1 / span 2;
  width:8px; height:8px; margin-right:4px;
  border-top:1.5px solid currentColor; border-right:1.5px solid currentColor;
  color:var(--rh-facade-dispo-vendu);   /* même gris clair : la flèche est décorative */
  transform:rotate(45deg);
  transition:transform .15s ease-out, color .15s ease-out;
}
.rh-facade__lot:hover button.rh-facade__entete::after,
.rh-facade__lot.est-actif button.rh-facade__entete::after{
  color:var(--rh-facade-encre, #283836);
  transform:translateX(3px) rotate(45deg);
}
.rh-facade__ref{
  grid-column:1;
  font-size:1rem; font-weight:600; line-height:1.35; color:var(--rh-facade-encre, #283836);
}
.rh-facade__meta{
  grid-column:1; display:flex; flex-direction:column; gap:4px;
  font-size:.875rem; line-height:1.45;
}
.rh-facade__infos{ color:var(--rh-facade-texte-2); font-variant-numeric:tabular-nums }
.rh-facade__dispo{ display:inline-flex; align-items:center; gap:8px; color:var(--rh-facade-encre, #283836) }
.rh-facade__puce{
  width:8px; height:8px; border-radius:99px; flex:0 0 auto;
}
.rh-facade__puce--libre{ background:var(--rh-facade-dispo-libre, #3f9d6d) }
.rh-facade__puce--option{ background:var(--rh-facade-dispo-option, #e0a33a) }
.rh-facade__puce--vendu{ background:var(--rh-facade-dispo-vendu, #b9b3ad) }

/* Sans JS, le détail s'affiche dans la carte : même retrait que l'entête (la marge intérieure est
   portée par l'entête, plus par le <li>, depuis ST-TRA-045 — revue du 01/10/2026). */
.rh-facade__detail{ margin-top:0; padding:0 16px 16px 20px; font-size:.88rem }
.rh-facade__detail summary{ cursor:pointer; color:#5c6b69 }
.rh-facade__fiche{ list-style:none; margin:.5rem 0 0; padding:0 }
.rh-facade__fiche li{
  display:flex; justify-content:space-between; gap:1rem;
  padding:.35rem 0; border-bottom:1px solid #eee7e1;
}
.rh-facade__cle{ color:#5c6b69 }
.rh-facade__val{ font-weight:600; text-align:right }

/* ---- modale (JS uniquement) ---- */
.rh-facade__voile{
  position:fixed; inset:0; z-index:9999;
  background:var(--rh-facade-voile, rgba(150,44,14,.55));
  display:flex; align-items:center; justify-content:center; padding:20px;
  animation:rh-facade-voile-entree var(--rh-facade-modale-duree, .32s)
            var(--rh-facade-modale-ease, ease-out) both;
}
.rh-facade__voile[hidden]{ display:none }

/* Flou de l'arrière-plan — seulement là où il est réellement supporté, sinon
   le voile coloré seul fait le travail. */
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)){
  .rh-facade__voile{
    -webkit-backdrop-filter:blur(var(--rh-facade-voile-flou, 6px)) saturate(1.05);
    backdrop-filter:blur(var(--rh-facade-voile-flou, 6px)) saturate(1.05);
  }
}

/*
 * Apparition : le voile se pose, la modale monte de quelques pixels en se
 * dépliant très légèrement. Même ease-out que le balayage des CTA — le mouvement
 * s'éteint en fin de course au lieu de s'arrêter net.
 * La fermeture, elle, est instantanée : on ne fait pas attendre quelqu'un qui
 * veut sortir.
 */
@keyframes rh-facade-voile-entree{
  from{ opacity:0 }
  to  { opacity:1 }
}
@keyframes rh-facade-modale-entree{
  from{ opacity:0; transform:translateY(10px) scale(.985) }
  to  { opacity:1; transform:none }
}

/*
 * Fermeture — le chemin inverse, mais plus court et en `ease-in` : une entrée
 * se pose (la vitesse s'éteint), une sortie s'échappe (la vitesse s'accélère).
 * Même durée dans les deux sens donnerait l'impression que la modale traîne.
 */
.rh-facade__voile.est-fermeture{
  animation:rh-facade-voile-sortie var(--rh-facade-modale-duree-sortie, .2s)
            cubic-bezier(.4,0,1,1) both;
}
.rh-facade__voile.est-fermeture .rh-facade__modale{
  animation:rh-facade-modale-sortie var(--rh-facade-modale-duree-sortie, .2s)
            cubic-bezier(.4,0,1,1) both;
}
@keyframes rh-facade-voile-sortie{
  from{ opacity:1 }
  to  { opacity:0 }
}
@keyframes rh-facade-modale-sortie{
  from{ opacity:1; transform:none }
  to  { opacity:0; transform:translateY(6px) scale(.99) }
}
/*
 * Angles droits : tout le site est en `border-radius: 0` — bouton Contact du
 * header, cartes de biens, images. Vérifié au navigateur le 09/09/2026. La
 * modale s'aligne dessus.
 */
.rh-facade__modale{
  position:relative;                 /* ancre de la croix de fermeture */
  background:#fff; border-radius:0; width:100%; max-width:var(--rh-facade-modale-largeur, 1120px);
  box-shadow:0 24px 60px rgba(40,20,12,.34);
  max-height:88vh; overflow:auto;
  animation:rh-facade-modale-entree var(--rh-facade-modale-duree, .32s)
            var(--rh-facade-modale-ease, ease-out) both;
}
/*
 * Fiche V1 (ST-TRA-032) : deux colonnes comme sur la maquette — à gauche l'en-tête puis le plan
 * (≈ 55 %), à droite les informations, séparées par un filet vertical. « SURFACES » s'aligne
 * ainsi sous la croix, en haut de la colonne droite.
 */
.rh-facade__colonnes{
  /* `minmax(0, …)` : sans lui, la largeur naturelle du plan élargit la colonne et fait déborder
     la fiche (relevé à 375 px, 23/09/2026). */
  /* 54 / 46 plutôt que 55 / 45 : le bouton principal, aux marges de l'accueil, tient ainsi sur une
     ligne à côté de « Fermer » dans la fiche de 1120 px. */
  display:grid; grid-template-columns:minmax(0, 54fr) minmax(0, 46fr); grid-template-rows:auto 1fr;
  grid-template-areas:"entete texte" "diapo texte";
  padding:30px 36px 32px;
}
/* Lot sans plan sur cet environnement : une seule colonne. */
.rh-facade__colonnes:has(> .rh-facade__diapo[hidden]){
  grid-template-columns:minmax(0, 1fr); grid-template-areas:"entete" "texte";
}
.rh-facade__modale-entete{ grid-area:entete; padding:0 30px 14px 0 }
.rh-facade__modale-ligne{ display:flex; flex-wrap:wrap; align-items:center; gap:8px 18px }
.rh-facade__modale .rh-facade__modale-titre{
  margin:0; color:var(--rh-facade-accent, #f54e16);
  font-size:1.75rem; font-weight:700; line-height:1.2;
}
.rh-facade__modale-entete .rh-facade__sous{ margin:6px 0 0 }

/* Pastille de disponibilité : l'état en toutes lettres, sur un fond pâle de sa couleur. */
.rh-facade__pastille{
  display:inline-block; padding:6px 16px; border-radius:99px;
  font-size:.85rem; font-weight:600; line-height:1.2; color:var(--rh-facade-encre);
  background:color-mix(in srgb, var(--rh-facade-dispo-libre) 20%, var(--rh-facade-fond));
}
.rh-facade__pastille--option{ background:color-mix(in srgb, var(--rh-facade-dispo-option) 25%, var(--rh-facade-fond)) }
.rh-facade__pastille--vendu{ background:color-mix(in srgb, var(--rh-facade-dispo-vendu) 35%, var(--rh-facade-fond)) }
.rh-facade__pastille:empty{ display:none }

/*
 * Croix de fermeture — posée sur la colonne de texte (fond blanc), donc lisible
 * sans halo. Cible de 40 px, bien au-delà des 24 × 24 exigés.
 */
.rh-facade__croix{
  position:absolute; top:0; right:0; z-index:1;
  width:40px; height:40px;
  display:flex; align-items:center; justify-content:center;
  padding:0; border:0; border-radius:0;
  background:transparent; color:#5c6b69;
  cursor:pointer;
  transition:color var(--rh-hover-dur, .28s) var(--rh-hover-ease, ease),
             background-color var(--rh-hover-dur, .28s) var(--rh-hover-ease, ease);
}
.rh-facade__croix:hover{ color:#283836; background-color:#f2ece8 }
.rh-facade__croix:focus-visible{ outline:3px solid #e8757a; outline-offset:-3px }
/* Sur une colonne, la croix passerait au-dessus du diaporama : on la garde
   lisible en lui donnant un fond. */
@media (max-width:720px){
  .rh-facade__croix{ background-color:rgba(255,255,255,.9) }
}
.rh-facade__texte{
  grid-area:texte; padding:34px 0 0 30px; border-left:1px solid var(--rh-facade-filet);
}
.rh-facade__colonnes:has(> .rh-facade__diapo[hidden]) .rh-facade__texte{ padding:0; border-left:0 }
.rh-facade__sous{ color:#5c6b69; margin:0 0 1.1rem; font-size:.95rem }
.rh-facade__pied{
  display:flex; gap:10px; justify-content:flex-end; align-items:stretch;
  margin-top:1.6rem; flex-wrap:wrap;
}
/* Le bouton principal prend la place restante : « pleine largeur » de la maquette, à côté du
   bouton « Fermer » conservé (décision d'Etienne, 23/09/2026). */
/* Bouton principal : mêmes marges que les boutons de l'accueil (18 × 32 px). « Fermer » est
   resserré pour laisser la place au texte sur une ligne. */
.rh-facade__pied .rh-facade__fermer{ padding:18px 14px }
/* Le texte revient à la ligne, centré, quand la place manque (≈ 1024 px) : forcé sur une ligne,
   il était coupé par le `overflow:hidden` du balayage. */
.rh-facade__pied .rh-facade__bouton--primaire{ flex:1 1 0; justify-content:center; text-align:center }

/* ---- corps de la fiche : même balisage dans la liste (sans JS) et dans la modale ---- */
.rh-facade__rubrique{
  margin:1.1rem 0 .6rem; font-size:.8rem; font-weight:700; letter-spacing:.06em;
  text-transform:uppercase; color:var(--rh-facade-encre);
}
.rh-facade__corps > .rh-facade__rubrique:first-child{ margin-top:.2rem }
.rh-facade__rubrique--titre{ margin-top:1.4rem; font-size:1rem; letter-spacing:0; text-transform:none }
.rh-facade__surfaces{ display:grid; grid-template-columns:1fr 1fr; gap:10px }
.rh-facade__surface{
  margin:0; padding:14px 16px;
  background:var(--rh-facade-carte-fond);
  border:1px solid var(--rh-facade-carte-bord);
  color:var(--rh-facade-accent, #f54e16);
}
.rh-facade__surface-cle{ display:block; font-size:.82rem }
.rh-facade__surface-val{ display:block; margin-top:4px; font-size:1.45rem; font-weight:700; line-height:1.2 }
/* Le filet vient SOUS « Catégorie » et « Description », comme sur la maquette (et non au-dessus :
   sans description, il manquait entre « Catégorie » et « Détails » — revue du 23/09/2026). */
.rh-facade__texte-fiche{
  margin:0; padding-bottom:1rem; font-size:.95rem; color:var(--rh-facade-encre);
  border-bottom:1px solid var(--rh-facade-filet);
}
/* Tableau des détails de la maquette : libellé, puis valeur alignée sur une colonne. */
.rh-facade__corps .rh-facade__fiche li{
  display:grid; grid-template-columns:minmax(120px, 40%) 1fr; gap:1rem;
  padding:.28rem 0; border-bottom:0;
}
.rh-facade__corps .rh-facade__val{ font-weight:400; text-align:left; color:var(--rh-facade-encre) }
.rh-facade__corps .rh-facade__val a{ color:var(--rh-facade-accent, #f54e16); text-decoration:underline }

/*
 * Boutons — alignés sur les CTA de la page d'accueil.
 *
 * Ces CTA sont des boutons Greenshift, dont le CSS vit dans `_gspb_post_css`
 * PAGE PAR PAGE : leurs classes ne sont donc pas réutilisables ailleurs sur le
 * site. En revanche, l'apparence et le mouvement sont pilotés par les tokens
 * `--rh-hover-*` que `rh-hover.css` (RH-5, Lot 1) définit sur `:root` et qui est
 * chargé partout. On s'y branche : la charte reste pilotée à un seul endroit,
 * et un réglage de token suit ici automatiquement.
 *
 * Relevé au navigateur le 09/09/2026 sur `a.gspb-buttonbox` de l'accueil :
 * fond #F54E16, texte blanc, Montserrat 600 / 16 px, padding 18px 32px,
 * `border-radius: 0`. Au survol : panneau incliné à 8° qui balaie le fond
 * (rouge → saumon) et flèche qui glisse. Reproduit à l'identique ci-dessous.
 */
.rh-facade__bouton{
  font:inherit;                    /* Montserrat, hérité du thème */
  font-size:16px;
  font-weight:600;
  line-height:1.2;
  padding:18px 32px;
  border-radius:0;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  gap:10px;
}

/* Secondaire : même gabarit, présence volontairement plus faible. */
.rh-facade__bouton:not(.rh-facade__bouton--primaire){
  background:#fff;
  border:1px solid #e2ddd8;
  color:#283836;
  transition:border-color var(--rh-hover-dur, .28s) var(--rh-hover-ease, ease);
}
.rh-facade__bouton:not(.rh-facade__bouton--primaire):hover{ border-color:#5c6b69 }

/* Primaire : le CTA du site, balayage compris. */
.rh-facade__bouton--primaire{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  border:0;
  background:var(--rh-hover-cta-base, #f54e16);
  color:var(--rh-hover-cta-fg, #fff);
  transition:color var(--rh-hover-dur, .28s) var(--rh-hover-ease, ease);
}
/*
 * Le texte RESTE BLANC pendant le balayage, comme sur les boutons de l'accueil. Sans cette règle,
 * c'est la couleur de survol des liens du thème qui s'applique — le saumon, celui du panneau :
 * le texte disparaissait (relevé par Etienne sur staging, 23/09/2026).
 */
.rh-facade__bouton--primaire:hover,
.rh-facade__bouton--primaire:focus,
.rh-facade__bouton--primaire:focus-visible{ color:var(--rh-hover-cta-fg, #fff) }
/* Le panneau incliné, hors-champ à droite au repos (même géométrie que le hero). */
.rh-facade__bouton--primaire::before{
  content:"";
  position:absolute;
  top:50%; left:50%;
  width:200%; height:300%;
  background:var(--rh-hover-cta-sweep, #ff9ea2);
  transform:translate(-50%,-50%) translateX(175%) rotate(var(--rh-hover-cta-tilt, 8deg));
  transform-origin:center;
  transition:transform var(--rh-hover-sweep-dur, 1s) var(--rh-hover-sweep-ease, ease-out);
  z-index:-1;
  pointer-events:none;
}
.rh-facade__bouton--primaire:hover::before,
.rh-facade__bouton--primaire:focus-visible::before{
  transform:translate(-50%,-50%) translateX(-25%) rotate(var(--rh-hover-cta-tilt, 8deg));
}
/* La flèche glisse, comme sur les CTA de l'accueil. */
.rh-facade__fleche{
  display:inline-flex;
  transition:transform var(--rh-hover-dur, .28s) var(--rh-hover-ease, ease);
}
.rh-facade__bouton--primaire:hover .rh-facade__fleche,
.rh-facade__bouton--primaire:focus-visible .rh-facade__fleche{
  transform:translateX(var(--rh-hover-arrow-shift, 4px));
}

/*
 * Mouvement réduit : moteur coupé, retour de survol conservé — même parti pris
 * que rh-hover.css. Le balayage disparaît, le saumon devient un simple état.
 */
@media (prefers-reduced-motion: reduce){
  /* L'apparition est un mouvement : elle saute. Le voile et le flou restent,
     ce sont des états, pas des animations. */
  .rh-facade__voile,
  .rh-facade__voile.est-fermeture,
  .rh-facade__modale,
  .rh-facade__voile.est-fermeture .rh-facade__modale{ animation:none }
  /* Contrairement au hero, les pastilles sont ici des COMMANDES : on les garde,
     on coupe seulement l'animation. */
  .rh-facade__point{ transition:none }
  .rh-facade__point[aria-current="true"]{ transform:none }
  .rh-facade__bouton--primaire::before,
  .rh-facade__fleche{ transition:none }
  .rh-facade__bouton--primaire:hover::before,
  .rh-facade__bouton--primaire:focus-visible::before{ transform:none }
}

/* ---- diaporama (colonne gauche de la modale) ---- */
/* Le plan 3D est sur fond blanc (maquette V1) : il se montre entier, sans recadrage. */
.rh-facade__diapo{
  grid-area:diapo; position:relative; background:var(--rh-facade-fond);
  min-height:340px; align-self:stretch; margin-right:30px;
}
.rh-facade__diapo[hidden]{ display:none }
/* Sans visuel, la modale retombe sur une seule colonne (règle `:has()` en tête de la fiche). */

/*
 * Bouton « Plan » — le PDF du lot (ST-TRA-037) : pictogramme de téléchargement + « Plan », sobre,
 * dans le registre du bouton « Fermer ». Sous le plan 3D, aligné à gauche ; le plan lui laisse la
 * place (`--avec-plan`) au lieu de passer dessous.
 */
.rh-facade__plan-pdf{
  display:inline-flex; align-items:center; gap:8px;
  min-height:36px; padding:6px 14px;
  border:1px solid var(--rh-facade-filet); background:var(--rh-facade-fond);
  color:var(--rh-facade-encre); font-size:.88rem; font-weight:600; line-height:1.2;
  text-decoration:none;
  transition:border-color var(--rh-hover-dur, .28s) var(--rh-hover-ease, ease);
}
.rh-facade__plan-pdf:hover,
.rh-facade__plan-pdf:focus-visible{ color:var(--rh-facade-encre); border-color:var(--rh-facade-encre) }
.rh-facade__plan-pdf:focus-visible{ outline:3px solid var(--rh-facade-surbrillance); outline-offset:2px }
.rh-facade__detail .rh-facade__plan-pdf{ margin:.5rem 0 .25rem }
.rh-facade__diapo .rh-facade__plan-pdf{ position:absolute; left:0; bottom:0; z-index:1 }
.rh-facade__diapo--avec-plan .rh-facade__vues{ bottom:48px }
/* Plusieurs visuels : les pastilles restent sur l'image, au-dessus de la bande du bouton. */
.rh-facade__diapo--avec-plan .rh-facade__points{ bottom:56px }
/* Lot sans plan 3D : le bouton se pose dans la colonne de texte, avant « Fermer ». */
.rh-facade__texte > .rh-facade__plan-pdf{ margin-top:1.4rem }
.rh-facade__vues{ position:absolute; inset:0 }

/* Attente du premier visuel : un battement discret plutôt qu'un aplat noir muet. */
.rh-facade__diapo--chargement::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(100deg, var(--rh-facade-attente) 30%, var(--rh-facade-attente-reflet) 50%,
             var(--rh-facade-attente) 70%);
  background-size:220% 100%;
  animation:rh-facade-attente 1.1s ease-in-out infinite;
}
@keyframes rh-facade-attente{
  from{ background-position:180% 0 }
  to  { background-position:-40% 0 }
}
@media (prefers-reduced-motion: reduce){
  .rh-facade__diapo--chargement::after{ animation:none }
}
.rh-facade__vues img{
  width:100%; height:100%; object-fit:contain; display:block; border-radius:0;
}
.rh-facade__vues img[hidden]{ display:none }

.rh-facade__nav{
  position:absolute; top:50%; transform:translateY(-50%);
  width:40px; height:40px; border:0; border-radius:0;
  background:rgba(16,27,26,.55); color:#fff; font-size:1.5rem; line-height:1;
  cursor:pointer; transition:background .15s ease;
}
.rh-facade__nav:hover{ background:rgba(16,27,26,.85) }
/* Commandes posées SUR une photo : sans ombre portée, elles disparaissent sur un
   ciel clair (vue aérienne, terrasses). */
.rh-facade__nav{ text-shadow:0 1px 3px rgba(16,27,26,.9) }
.rh-facade__point{ filter:drop-shadow(0 1px 2px rgba(16,27,26,.55)) }
.rh-facade__nav--prec{ left:0 }
.rh-facade__nav--suiv{ right:0 }
.rh-facade__diapo--unique .rh-facade__nav,
.rh-facade__diapo--unique .rh-facade__points{ display:none }

/*
 * Pastilles — reprises du diaporama du hero (RH-11), dont le CSS est chargé sur
 * tout le site : on réutilise ses tokens, donc mêmes taille, écart, couleurs et
 * mise en avant de l'active. RONDES, comme sur la page d'accueil.
 */
.rh-facade__points{
  position:absolute; left:0; right:0; bottom:8px;
  display:flex; justify-content:center;
  gap:0;                                     /* l'écart vient du padding des boutons */
  pointer-events:none;                       /* seuls les boutons captent le clic */
}
/*
 * ⚠️ Ces pastilles sont de VRAIS boutons, pas des indicateurs décoratifs comme
 * celles du hero : elles tombent donc sous la cible tactile de 24 × 24 px du
 * projet (UXQ-08, WCAG 2.5.8). Un carré de 8 px est injouable au doigt sur une
 * photo sombre.
 *
 * Le rendu VISUEL reste à 8 px — identique à l'accueil — et c'est la SURFACE
 * qui grandit : `padding` + `background-clip: content-box` peignent le fond sur
 * la seule boîte de contenu. Relevé en revue le 10/09/2026.
 */
.rh-facade__point{
  pointer-events:auto;
  box-sizing:content-box;
  width:var(--rh-slideshow-dot-size, 8px);
  height:var(--rh-slideshow-dot-size, 8px);
  padding:8px;                               /* 8 + 8 + 8 = 24 px de cible */
  border:0;
  border-radius:50%;
  /* `background-color` et NON le raccourci `background` : celui-ci réinitialise
     `background-clip`, et la pastille se peindrait sur toute la cible de 24 px. */
  background-color:var(--rh-slideshow-dot-color, rgba(255,255,255,.55));
  background-clip:content-box;
  cursor:pointer;
  transition:background var(--rh-slideshow-fade, 900ms) ease,
             transform var(--rh-slideshow-fade, 900ms) ease;
}
.rh-facade__point[aria-current="true"]{
  background-color:var(--rh-slideshow-dot-color-active, #fff);
  transform:scale(1.25);
}
.rh-facade__point:focus-visible{ outline:2px solid #fff; outline-offset:2px }

/*
 * Compteur « 2 / 2 » : RETIRÉ DU VISUEL. La page d'accueil n'en a pas — les
 * pastilles suffisent à situer où l'on est. Il reste dans le DOM pour les
 * lecteurs d'écran (`aria-live`), qui eux n'ont pas les pastilles.
 *
 * Il était de toute façon illisible : une règle du thème impose
 * `color: rgb(74, 85, 101)` aux <p> et écrasait le blanc — du gris sur un
 * panneau sombre translucide, par-dessus un ciel clair.
 */
.rh-facade__compteur{
  position:absolute;
  width:1px; height:1px;
  margin:0; padding:0; border:0;
  overflow:hidden;
  clip-path:inset(50%);
  white-space:nowrap;
}

@media (max-width:720px){
  .rh-facade__colonnes,
  .rh-facade__colonnes:has(> .rh-facade__diapo[hidden]){
    grid-template-columns:minmax(0, 1fr); grid-template-rows:auto; grid-template-areas:"entete" "diapo" "texte";
    padding:22px 18px 22px;
  }
  .rh-facade__modale-entete{ padding:0 40px 10px 0 }
  .rh-facade__modale .rh-facade__modale-titre{ font-size:1.4rem }
  /* Plan au-dessus, à SA hauteur : un cadre imposé en 16:9 réduisait les plans en hauteur
     (C3.04 : 121 × 166 px dans 295 px de large — revue du 23/09/2026). Plafonné à 55 % de
     l'écran pour que les informations restent en vue. */
  .rh-facade__diapo{ min-height:160px; margin:0 0 14px }
  .rh-facade__vues{ position:static }
  .rh-facade__diapo .rh-facade__plan-pdf{ position:static; margin-top:10px }
  .rh-facade__vues img{ height:auto; max-height:55vh }
  .rh-facade__texte{ padding:0; border-left:0 }
  .rh-facade__surface-val{ font-size:1.2rem }
  /* Côte à côte, les deux boutons replient leur texte sur trois lignes : on les empile, pleine
     largeur, dans l'ordre du DOM (« Fermer », puis le bouton principal). */
  .rh-facade__pied{ flex-direction:column }
  .rh-facade__pied .rh-facade__bouton{ justify-content:center; padding:16px 20px }
  /* En colonne, `flex:1 1 0` (pleine largeur en ligne) écraserait la HAUTEUR du bouton. */
  .rh-facade__pied .rh-facade__bouton--primaire{ flex:0 0 auto; white-space:normal; text-align:center }
}

/*
 * Mobile : la façade garde une largeur minimale et défile horizontalement.
 * Sans ça, une zone de 2–3 fenêtres au 2ᵉ étage tombe à ~20 px de haut sur un
 * écran de 375 px — sous la cible tactile de 24 × 24 px du projet.
 */
@media (max-width:860px){
  .rh-facade__indice{ display:block }
  .rh-facade__scene{ min-width:900px }
}

@media (prefers-reduced-motion: reduce){
  .rh-facade__plan-pdf{ transition:none }
  .rh-facade__scrim,
  .rh-facade__zone,
  .rh-facade__lot{ transition:none }
  /* La flèche change de couleur mais n'avance plus. */
  button.rh-facade__entete::after{ transition:color .15s ease-out }
  .rh-facade__lot:hover button.rh-facade__entete::after,
  .rh-facade__lot.est-actif button.rh-facade__entete::after{ transform:rotate(45deg) }
}

/*
 * Pleine largeur bord à bord — même technique que .rh-map--full : 100vw plus une
 * marge négative centrée, ce qui sort le bloc de sa colonne sans toucher à la
 * structure de la page. Le cadre perd sa bordure et ses angles arrondis : à
 * pleine largeur, ils se liraient comme un défaut.
 */
.rh-facade__cadre--full{
  width:100vw;
  max-width:100vw;
  margin-left:calc(50% - 50vw);
  margin-right:calc(50% - 50vw);
  border:0;
  border-radius:0;
}
.rh-facade__cadre--full .rh-facade__indice{ border-radius:0 }

/*
 * ST-TRA-045 — façade fixe à gauche (choix d'Etienne du 01/10/2026) : dès 1000 px, la façade
 * reste collée sous le header pendant qu'on fait défiler la liste à droite. Raison : façade
 * au-dessus et liste dessous, survoler une carte allumait une zone souvent sortie de l'écran
 * par le haut. (La disposition empilée a été essayée en parallèle puis retirée.)
 *
 * La façade est bornée à la hauteur de la fenêtre (moins le header et une marge) : sa largeur
 * s'en déduit par `--rh-facade-ratio` (posé par le PHP, proportions du rendu). `sticky` ne sort
 * pas de la section : avec deux façades, chacune ne colle que le long de SA liste.
 * En dessous de 1000 px, rien ne change : la façade reste au-dessus, défilante sur mobile.
 */
@media (min-width:1000px){
  .rh-facade{
    display:grid;
    grid-template-columns:minmax(0, 3fr) minmax(0, 2fr);
    grid-template-areas:"cote cote" "facade lots";
    column-gap:40px;
    align-items:start;
  }
  .rh-facade .rh-facade__cote{ grid-area:cote }
  .rh-facade .rh-facade__cadre{
    grid-area:facade;
    position:sticky; top:calc(var(--rh-header-h, 120px) + 24px);
    width:100%;
    /* `--header-height` (Blocksy, fixe) et non `--rh-header-h` (suit le rétrécissement du header) :
       sinon la façade change de taille sous les yeux au premier défilement. Même choix que
       rh-hero-hauteur.css. `top`, lui, suit le header réel. */
    max-width:calc((100vh - var(--header-height, 120px) - 48px) * var(--rh-facade-ratio, 1.5));
    max-width:calc((100svh - var(--header-height, 120px) - 48px) * var(--rh-facade-ratio, 1.5));
    justify-self:end;
    margin:0;   /* neutralise `full="yes"` (100vw et marges négatives) dans la colonne */
  }
  .rh-facade .rh-facade__lots{ grid-area:lots }
  /* La façade fait ≈ 670 px de large au lieu de ≈ 1150 : à taille relative égale, les noms des
     lots tombaient à 7 px à l'écran (relevé le 30/09/2026). On les grossit dans le repère. */
  .rh-facade{ --rh-facade-pastille-taille:24px }
  .rh-facade .rh-facade__pastille-svg{ stroke-width:calc(6px * var(--rh-facade-echelle, 1)) }
  /* La liste démarre à hauteur de la façade. */
  .rh-facade .rh-facade__titre{ margin-top:0 }
  /* Colonne de ≈ 490 px : deux cartes par ligne sur grand écran, une seule sinon. */
  .rh-facade .rh-facade__liste{ grid-template-columns:repeat(auto-fill, minmax(220px, 1fr)) }
}
/* De 1000 à 1199 px, la façade tombe à ≈ 530 px : 24 donnait 8,5 px à l'écran (relevé à 1024). */
@media (min-width:1000px) and (max-width:1199.98px){
  .rh-facade{ --rh-facade-pastille-taille:30px }
}

/*
 * ST-TRA-036 — description saisie par Tralux dans l'admin : ses retours à la ligne sont gardés,
 * et un mot très long (adresse, référence) passe à la ligne au lieu de déborder sur mobile.
 */
.rh-facade__texte-fiche--description {
  white-space: pre-line;
  overflow-wrap: anywhere;
}