/* =====================================================================
   L'IMMO - page d'accueil : hero à 2 diapositives + recherche de biens
   Transition « double volet » : un volet vert balaie l'écran, la photo
   suit juste derrière ; l'ancienne photo glisse en sens inverse
   (parallaxe) et le texte monte ligne par ligne. Piloté par js/hero.js.
   ===================================================================== */

.l-hero {
  --duree: 7000ms;          /* temps d'affichage d'une diapositive */
  --volet: 1050ms;          /* durée du balayage */
  --recouvre: 40px;         /* hauteur de la recherche qui chevauche le bas du hero */
  position: relative;
  height: clamp(580px, calc(100svh - var(--hdr-h) - 40px), 900px);
  overflow: hidden;
  isolation: isolate;
  background: var(--gris-900);
  color: var(--blanc);
  font-family: var(--police, "Manrope", sans-serif);
}

/* Mêmes marges latérales que le menu */
.l-hero .container { padding-left: var(--gutter); padding-right: var(--gutter); }

/* ---------- Diapositives ---------- */
.l-hero-slides { position: absolute; inset: 0; }
.l-slide { position: absolute; inset: 0; visibility: hidden; z-index: 1; }
.l-slide.is-active { visibility: visible; z-index: 3; }
.l-slide.is-sortant { visibility: visible; z-index: 2; }

.l-slide-voile,
.l-slide-media { position: absolute; inset: 0; }
.l-slide-voile { background: var(--vert); clip-path: inset(0 0 0 100%); }
.l-slide-media { overflow: hidden; }
.l-slide-kb { position: absolute; inset: 0; }
.l-slide-kb img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Sujet des photos à droite : sur écran étroit, le recadrage le garde visible */
#hero-1 .l-slide-kb img { object-position: 74% 50%; }
#hero-2 .l-slide-kb img { object-position: 80% 50%; }

/* Zoom lent pendant l'affichage (continue pendant la sortie : pas de saut) */
.l-slide.is-active .l-slide-kb,
.l-slide.is-sortant .l-slide-kb { transform: scale(1.09); transition: transform calc(var(--duree) + 2500ms) linear; }

/* Entrée : volet vert puis photo, de droite à gauche */
.l-slide.is-entrant .l-slide-voile { animation: h-volet var(--volet) var(--ease-in-out) both; }
.l-slide.is-entrant .l-slide-media { animation: h-volet var(--volet) var(--ease-in-out) 150ms both; }
.l-slide.is-entrant .l-slide-kb img { animation: h-photo-in calc(var(--volet) + 700ms) var(--ease-out) 150ms both; }
/* Sortie : l'ancienne photo recule en sens inverse et s'assombrit */
.l-slide.is-sortant .l-slide-kb img { animation: h-photo-out calc(var(--volet) + 150ms) var(--ease-in-out) both; }

/* Retour en arrière : balayage dans l'autre sens */
.l-hero.is-retour .l-slide.is-entrant .l-slide-voile,
.l-hero.is-retour .l-slide.is-entrant .l-slide-media { animation-name: h-volet-retour; }
.l-hero.is-retour .l-slide.is-entrant .l-slide-kb img { animation-name: h-photo-in-retour; }
.l-hero.is-retour .l-slide.is-sortant .l-slide-kb img { animation-name: h-photo-out-retour; }

@keyframes h-volet        { from { clip-path: inset(0 0 0 100%); } to { clip-path: inset(0 0 0 0); } }
@keyframes h-volet-retour { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes h-photo-in        { from { transform: translateX(14%) scale(1.18); } to { transform: none; } }
@keyframes h-photo-in-retour { from { transform: translateX(-14%) scale(1.18); } to { transform: none; } }
@keyframes h-photo-out        { to { transform: translateX(-16%); filter: brightness(.45); } }
@keyframes h-photo-out-retour { to { transform: translateX(16%); filter: brightness(.45); } }

/* Lisibilité : halo sombre neutre juste derrière le texte (façon vignettage d'objectif),
   la photo garde ses vraies couleurs ailleurs ; léger fondu en bas pour la navigation */
.l-slide-ombre {
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(ellipse 52% 70% at 24% 50%, rgba(10, 11, 12, .6) 0%, rgba(10, 11, 12, .32) 50%, rgba(10, 11, 12, 0) 100%),
    linear-gradient(0deg, rgba(10, 11, 12, .45) 0%, rgba(10, 11, 12, 0) 28%);
}
.l-slide-bloc { text-shadow: 0 2px 30px rgba(0, 0, 0, .35); }
.l-slide-bloc .btn-pill { text-shadow: none; }
.l-slide-texte { text-shadow: 0 1px 2px rgba(0, 0, 0, .45), 0 2px 24px rgba(0, 0, 0, .4); }

/* ---------- Texte ---------- */
.l-slide-contenu {
  position: relative; z-index: 2;
  height: 100%;
  display: flex; flex-direction: column; justify-content: center;
  padding-top: 40px;
  padding-bottom: calc(var(--recouvre) + 96px);
}
.l-slide-sur {
  display: flex; align-items: center; gap: 14px;
  margin: 0 0 22px;
  font-size: .8rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  color: var(--blanc);
}
.l-slide-sur::before { content: ""; width: 34px; height: 2px; background: var(--vert); flex: none; }
.l-slide-titre {
  margin: 0;
  max-width: 13.5em;
  font-family: inherit;
  font-size: clamp(2.3rem, 4.7vw, 4.6rem);
  font-weight: 600; line-height: 1.02; letter-spacing: -.03em;
  color: var(--blanc);
}
.l-slide-titre em { font-style: normal; color: var(--vert); }
.l-slide-texte {
  max-width: 560px;
  margin: 24px 0 0;
  font-size: clamp(1rem, 1.15vw, 1.12rem); line-height: 1.65;
  color: rgba(255, 255, 255, .9);
}
.l-slide-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 30px; margin-top: 34px; }
.l-lien-hero {
  display: inline-flex; align-items: center; gap: 10px;
  color: var(--blanc); font-weight: 700; font-size: .95rem;
  text-decoration: none;
  background: linear-gradient(currentColor, currentColor) 0 100% / 0 2px no-repeat;
  padding-bottom: 3px;
  transition: background-size 350ms var(--ease-out);
}
.l-lien-hero:hover, .l-lien-hero:focus-visible { color: var(--blanc); background-size: 100% 2px; }
.l-lien-hero .icon { transition: transform 300ms var(--ease-out); }
.l-lien-hero:hover .icon { transform: translateX(4px); }

/* Lignes révélées par un masque (le petit débord garde les jambages visibles) */
.l-ligne { display: block; overflow: hidden; padding-bottom: .1em; margin-bottom: -.1em; }
.l-ligne > span { display: inline-block; }

.l-hero.is-anime .l-slide .l-ligne > span { transform: translateY(108%); }
.l-hero.is-anime .l-slide .l-slide-texte,
.l-hero.is-anime .l-slide .l-slide-actions { opacity: 0; transform: translateY(18px); }

.l-hero.is-anime.is-pret .l-slide.is-active .l-ligne > span,
.l-hero.is-anime.is-pret .l-slide.is-active .l-slide-texte,
.l-hero.is-anime.is-pret .l-slide.is-active .l-slide-actions {
  opacity: 1; transform: none;
  transition: transform 1000ms var(--ease-out), opacity 700ms ease;
}
.l-hero.is-anime.is-pret .l-slide.is-active .l-slide-sur .l-ligne > span { transition-delay: 450ms; }
.l-hero.is-anime.is-pret .l-slide.is-active .l-slide-titre .l-ligne:nth-child(1) > span { transition-delay: 540ms; }
.l-hero.is-anime.is-pret .l-slide.is-active .l-slide-titre .l-ligne:nth-child(2) > span { transition-delay: 630ms; }
.l-hero.is-anime.is-pret .l-slide.is-active .l-slide-texte { transition-delay: 780ms; }
.l-hero.is-anime.is-pret .l-slide.is-active .l-slide-actions { transition-delay: 880ms; }
/* 1er affichage, juste après le loader : un peu plus vif */
.l-hero.is-anime.is-premier .l-slide.is-active .l-slide-sur .l-ligne > span { transition-delay: 0ms; }
.l-hero.is-anime.is-premier .l-slide.is-active .l-slide-titre .l-ligne:nth-child(1) > span { transition-delay: 90ms; }
.l-hero.is-anime.is-premier .l-slide.is-active .l-slide-titre .l-ligne:nth-child(2) > span { transition-delay: 180ms; }
.l-hero.is-anime.is-premier .l-slide.is-active .l-slide-texte { transition-delay: 330ms; }
.l-hero.is-anime.is-premier .l-slide.is-active .l-slide-actions { transition-delay: 430ms; }

/* Sortie du texte : il continue sa montée et disparaît */
.l-hero.is-anime .l-slide.is-sortant .l-ligne > span { transform: translateY(-108%); transition: transform 600ms var(--ease-in-out); }
.l-hero.is-anime .l-slide.is-sortant .l-slide-texte,
.l-hero.is-anime .l-slide.is-sortant .l-slide-actions { opacity: 0; transform: translateY(-14px); transition: opacity 350ms ease, transform 500ms var(--ease-in-out); }

/* ---------- Navigation ---------- */
.l-hero-nav {
  position: absolute; left: 0; right: 0; z-index: 10;
  bottom: calc(var(--recouvre) + 26px);
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  pointer-events: none;
}
.l-hero-nav > * { pointer-events: auto; }
.l-hero-puces { display: flex; gap: 28px; }
.l-puce {
  display: grid; grid-template-columns: auto auto; align-items: baseline; column-gap: 10px; row-gap: 10px;
  padding: 6px 0; border: 0; background: none; cursor: pointer;
  color: rgba(255, 255, 255, .6); font-family: inherit; text-align: left;
  transition: color 300ms ease;
}
.l-puce.is-active, .l-puce:hover { color: var(--blanc); }
.l-puce-num { font-size: .95rem; font-weight: 800; }
.l-puce-nom { font-size: .72rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.l-puce-barre {
  grid-column: 1 / -1;
  position: relative; display: block; width: 110px; height: 2px;
  background: rgba(255, 255, 255, .3); border-radius: 2px; overflow: hidden;
}
.l-puce-barre > span {
  position: absolute; inset: 0; background: var(--vert);
  transform-origin: left; transform: scaleX(0);
}
.l-puce.is-active .l-puce-barre > span { transform: scaleX(1); }
.l-hero.is-auto .l-puce.is-active .l-puce-barre > span { animation: h-progres var(--duree) linear both; }
.l-hero.is-pause .l-puce.is-active .l-puce-barre > span { animation-play-state: paused; }
@keyframes h-progres { from { transform: scaleX(0); } to { transform: scaleX(1); } }

.l-hero-pause {
  position: relative; width: 42px; height: 42px; flex: none;
  border-radius: 50%; border: 1px solid rgba(255, 255, 255, .5);
  background: rgba(63, 64, 66, .25); cursor: pointer;
  transition: background-color 200ms ease, border-color 200ms ease, transform 160ms var(--ease-out);
}
.l-hero-pause:hover { background: var(--vert); border-color: var(--vert); }
.l-hero-pause:active { transform: scale(.94); }
.l-hero-pause span,
.l-hero-pause span::before { position: absolute; top: 50%; left: 50%; }
.l-hero-pause span { width: 10px; height: 12px; transform: translate(-50%, -50%); border-left: 3px solid var(--blanc); border-right: 3px solid var(--blanc); }
.l-hero-pause[aria-pressed="true"] span { width: 0; height: 0; border: 0; border-left: 11px solid var(--blanc); border-top: 7px solid transparent; border-bottom: 7px solid transparent; margin-left: 2px; }
/* Sans js/hero.js (script absent ou bloqué) : texte affiché, commandes masquées */
.l-hero:not(.is-anime) .l-hero-nav,
.l-hero:not(.is-anime) .l-hero-vignettes { display: none; }

/* Vignettes en bas à droite, à côté du bouton pause (laisse le sujet des photos dégagé), grand écran */
.l-hero-vignettes {
  position: absolute; z-index: 10;
  right: calc(var(--gutter) + 42px + 22px);
  bottom: calc(var(--recouvre) + 26px);
  display: flex; gap: 12px;
}
.l-vignette {
  width: 68px; height: 68px; padding: 0;
  border: 0; border-radius: 16px; overflow: hidden; cursor: pointer;
  background: var(--gris);
  opacity: .55;
  outline: 2px solid transparent; outline-offset: 4px;
  transition: opacity 300ms ease, outline-color 300ms ease, transform 300ms var(--ease-out);
}
.l-vignette img { width: 100%; height: 100%; object-fit: cover; display: block; }
.l-vignette:hover { opacity: .9; transform: scale(1.04); }
.l-vignette.is-active { opacity: 1; outline-color: var(--vert); }
@media (max-width: 1199px) { .l-hero-vignettes { display: none; } }

/* ---------- À propos : texte blanc sur fond vert (gauche), photo (droite) ----------
   Texte un peu plus gras que d'habitude pour rester bien lisible en blanc sur le vert */
.l-apropos { padding: clamp(70px, 8vw, 120px) var(--gutter) 0; }
.l-apropos-carte {
  display: grid; grid-template-columns: 1fr 1fr;
  max-width: 1579px; margin: 0 auto;
  border-radius: var(--radius); overflow: hidden;
}
.l-apropos-texte {
  display: flex; flex-direction: column; justify-content: center;
  padding: clamp(40px, 6vw, 96px) clamp(28px, 5.5vw, 90px);
  background: var(--vert);
  color: var(--blanc);
}
.l-apropos-sur {
  display: flex; align-items: center; gap: 14px;
  margin: 0 0 18px;
  font-size: .8rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  color: var(--blanc);
}
.l-apropos-sur::before { content: ""; width: 34px; height: 2px; background: var(--gris-900); flex: none; }
.l-apropos-titre {
  margin: 0 0 26px;
  font-size: clamp(2rem, 3.2vw, 3.1rem); font-weight: 600; line-height: 1.08; letter-spacing: -.02em;
  color: var(--blanc);
}
.l-apropos-texte p:not(.l-apropos-sur) {
  max-width: 620px; margin: 0;
  font-size: clamp(1.02rem, 1.15vw, 1.14rem); font-weight: 500; line-height: 1.7;
  color: var(--blanc);
}
.l-apropos-texte p:not(.l-apropos-sur) + p { margin-top: 18px; }
.l-apropos-texte strong { font-weight: 800; color: var(--blanc); }
.l-apropos-photo { position: relative; min-height: 420px; }
.l-apropos-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 62%; }   /* garde les clés et l'enfant dans le cadre */

@media (max-width: 991px) {
  .l-apropos-carte { grid-template-columns: 1fr; }
  .l-apropos-photo { order: -1; min-height: 0; aspect-ratio: 16 / 10; }
}

/* ---------- Mobile ---------- */
@media (max-width: 767px) {
  .l-hero { height: clamp(600px, 86svh, 760px); }
  .l-slide-ombre {
    background: linear-gradient(0deg, rgba(10, 11, 12, .8) 0%, rgba(10, 11, 12, .5) 50%, rgba(10, 11, 12, .08) 100%);
  }
  .l-slide-contenu { justify-content: flex-end; padding-bottom: calc(var(--recouvre) + 92px); }
  .l-slide-sur { margin-bottom: 16px; font-size: .7rem; }
  .l-slide-texte { margin-top: 16px; font-size: .95rem; line-height: 1.55; }
  .l-slide-actions { margin-top: 24px; gap: 14px 22px; }
  .l-hero-puces { gap: 20px; }
  .l-puce-barre { width: 76px; }
  .l-hero-nav { bottom: calc(var(--recouvre) + 18px); }
}
@media (max-width: 380px) {
  .l-slide-texte { display: none; }
}

/* ---------- Mouvement réduit : simple fondu, pas de zoom ni de balayage ---------- */
@media (prefers-reduced-motion: reduce) {
  .l-slide.is-active .l-slide-kb,
  .l-slide.is-sortant .l-slide-kb { transform: none; transition: none; }
  .l-slide.is-entrant .l-slide-voile { animation: none; clip-path: inset(0 0 0 100%); }
  .l-slide.is-entrant .l-slide-media { animation: h-fondu 400ms ease both; }
  .l-slide.is-entrant .l-slide-kb img,
  .l-slide.is-sortant .l-slide-kb img { animation: none; }
  .l-hero.is-anime .l-slide .l-ligne > span,
  .l-hero.is-anime .l-slide.is-sortant .l-ligne > span { transform: none; }
  .l-hero.is-anime.is-pret .l-slide.is-active .l-ligne > span { transition: none; }
}
@keyframes h-fondu { from { opacity: 0; } to { opacity: 1; } }

/* ===== Blocs « Type de biens » et « Nos dernières offres » : h2 (SEO) à la taille des autres titres de section ===== */
.flat-categories .box-title h2.title,
.flat-recommended .box-title h2.title { font-size: 36px; line-height: 44px; }
.flat-recommended .l-biens-intro { max-width: 760px; margin: 12px auto 0; }
.flat-categories .l-types-intro { margin-top: 12px; max-width: 640px; color: var(--gris-700, #58595B); }
@media (max-width: 991px) {
    .flat-categories .box-title h2.title,
    .flat-recommended .box-title h2.title { font-size: 26px; line-height: 34px; }
}

/* ===== Avis Google (widget Elfsight) sur le fond du thème ===== */
.l-avis .box-title h2.title { font-size: 36px; line-height: 44px; }
.l-avis .l-avis-intro { max-width: 640px; margin: 12px auto 0; }
.l-avis .l-avis-widget { margin-top: 40px; min-height: 200px; }
@media (max-width: 991px) {
    .l-avis .box-title h2.title { font-size: 26px; line-height: 34px; }
    .l-avis .l-avis-widget { margin-top: 28px; }
}