/*
 * 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 */

  /* 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;
}

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

.rh-facade__cadre{
  position:relative;
  border:1px solid var(--theme-border-color, #e2ddd8);
  border-radius:10px;
  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 }
.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:2.5;
  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:3;
}
.rh-facade__zone:focus{ outline:none }
.rh-facade__zone:focus-visible{
  fill:rgba(255,158,162,.30);
  stroke:#fff; stroke-width:3;
  outline:3px solid #e8757a;
  outline-offset:1px;
}
.rh-facade__zone--vendu{ cursor:default }

.rh-facade__pastille-svg{
  fill:#fff; font-size:15px; font-weight:700; pointer-events:none;
  paint-order:stroke; stroke:rgba(40,56,54,.85); stroke-width:4px; stroke-linejoin:round;
}

/* ---- liste des lots : rendue par PHP, donc présente sans JS ---- */
.rh-facade__titre{
  font-size:.9rem; text-transform:uppercase; letter-spacing:.08em;
  color:#5c6b69; margin:2rem 0 .75rem;
}
.rh-facade__liste{
  list-style:none; margin:0; padding:0;
  display:grid; gap:10px;
  grid-template-columns:repeat(auto-fill, minmax(250px, 1fr));
}
.rh-facade__lot{
  background:#fff; border:1px solid #e2ddd8; border-radius:8px;
  padding:12px 14px; transition:border-color .15s ease;
}
.rh-facade__lot.est-actif{ border-color:#e8757a }
.rh-facade__entete{
  display:flex; gap:12px; align-items:baseline; width:100%;
  background:none; border:0; padding:0; text-align:left;
  font:inherit; color:inherit;
}
button.rh-facade__entete{ cursor:pointer }
.rh-facade__ref{ font-weight:700; letter-spacing:.02em }
.rh-facade__meta{ margin-left:auto; text-align:right; font-size:.88rem; color:#5c6b69 }
.rh-facade__puce{
  width:9px; height:9px; border-radius:99px; flex:0 0 auto; align-self:center;
}
.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) }

.rh-facade__detail{ margin-top:.6rem; 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:940px;
  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;
}
.rh-facade__colonnes{ display:grid; grid-template-columns:1fr 1fr; align-items:stretch }

/*
 * 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{ padding:26px 28px }
.rh-facade__texte .rh-facade__modale-titre{ padding-right:44px }
.rh-facade__modale h3{ margin:0 0 2px; font-size:1.35rem }
.rh-facade__sous{ color:#5c6b69; margin:0 0 1.1rem; font-size:.95rem }
.rh-facade__pied{
  display:flex; gap:12px; justify-content:flex-end; align-items:stretch;
  margin-top:1.4rem; flex-wrap:wrap;
}

/*
 * 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 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) ---- */
.rh-facade__diapo{ position:relative; background:#101b1a; min-height:280px }
.rh-facade__diapo[hidden]{ display:none }
/* Sans visuel, la modale retombe sur une seule colonne. */
.rh-facade__diapo[hidden] + .rh-facade__texte{ grid-column:1 / -1 }
.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,#1b2b29 30%,#2b3f3c 50%,#1b2b29 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:cover; 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{ grid-template-columns:1fr }
  .rh-facade__diapo{ min-height:220px }
}

/*
 * 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__scrim,
  .rh-facade__zone,
  .rh-facade__lot{ transition:none }
}

/*
 * 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 }