/* =========================================================================
   Itinéraire Immobilier - style.css
   Intégration des maquettes Figma (design system + composants + sections).
   ========================================================================= */

/* -------------------------------------------------------------------------
   1. Base
   ------------------------------------------------------------------------- */
* { box-sizing: border-box; }

html { scroll-behavior: smooth; }
:target, [id] { scroll-margin-top: 24px; }

body {
  font-family: var(--ii-font-sans);
  color: var(--ii-black);
  font-weight: 400;
  margin: 0;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; }
a { text-decoration: none; }

button, input, optgroup, select, textarea {
  outline: none;
}

/* Conteneur fidèle aux maquettes (1256 px de contenu) */
.ii-container {
  width: 100%;
  max-width: var(--ii-container);
  margin-inline: auto;
  padding-inline: 20px;
}

/* -------------------------------------------------------------------------
   2. Titres & accents
   ------------------------------------------------------------------------- */
.ii-section { padding-block: 80px; }
.ii-section--tight { padding-block: 56px; }

.ii-title {
  font-family: var(--ii-font-sans);
  font-weight: 400;
  font-size: 48px;
  line-height: 1.15;
  color: var(--ii-black);
  margin: 0 0 8px;
}
.ii-title .accent,
.ii-accent {
  font-family: var(--ii-font-accent);
  font-style: italic;
  font-weight: 400;
  color: var(--ii-pink);
}
.ii-title .accent-block { display: block; }       /* accent forcé sur sa propre ligne */
.ii-title--light { color: var(--ii-white); }

.ii-subtitle {
  font-weight: 300;
  font-size: 20px;
  color: var(--ii-gray);
  margin: 0;
}
.ii-title--light + .ii-subtitle,
.ii-subtitle--light { color: rgba(255,255,255,.9); }

/* Surtitre : petit label gris majuscule précédé d'un filet */
.ii-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: 14px;
  letter-spacing: 1.12px;
  text-transform: uppercase;
  color: var(--ii-gray);
  font-weight: 300;
  margin: 0 0 12px;
}
.ii-eyebrow::before {
  content: "";
  width: 18px;
  height: 1px;
  background: currentColor;
}
.ii-eyebrow--light { color: rgba(255,255,255,.85); }

/* -------------------------------------------------------------------------
   3. Boutons
   ------------------------------------------------------------------------- */
.ii-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  font-family: var(--ii-font-sans);
  font-weight: 400;
  line-height: normal;
  border: 1px solid transparent;
  border-radius: 0;
  cursor: pointer;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease;
  text-transform: uppercase;
  text-align: center;
}

/* Petit bouton encadré noir (« Small btn noir ») */
.ii-btn--outline {
  background: transparent; color: var(--ii-black); border-color: var(--ii-black);
  font-size: 12px; letter-spacing: .96px; padding: 16px 46px;
}
.ii-btn--outline:hover { background: var(--ii-black); color: #fff; }

/* Grand bouton encadré (« big btn encadré ») : padding 30/50, 20px, ls 1.6, gap 26, + icône */
.ii-btn--lg { font-size: 20px; letter-spacing: 1.6px; padding: 28px 50px; gap: 26px; }
.ii-btn--lg img { width: 30px; height: 30px; }
.ii-btn--light { color: #fff; border-color: #fff; background: transparent; }
.ii-btn--light img { filter: brightness(0) invert(1); }            /* icône blanche */
.ii-btn--light:hover { background: #fff; color: var(--ii-black); }
.ii-btn--light:hover img { filter: brightness(0); }                /* fond blanc -> icône noire */
.ii-btn--dark { color: var(--ii-black); border-color: var(--ii-black); background: transparent; }
.ii-btn--dark img { filter: brightness(0); }                       /* icône noire */
.ii-btn--dark:hover { background: var(--ii-black); color: #fff; }
.ii-btn--dark:hover img { filter: brightness(0) invert(1); }       /* fond noir -> icône blanche */

/* Bouton plein rose */
.ii-btn--pink { background: var(--ii-pink); color: #fff; border-color: var(--ii-pink); font-size: 14px; letter-spacing: .96px; padding: 16px 36px; }
.ii-btn--pink:hover { background: var(--ii-pink-dark); border-color: var(--ii-pink-dark); color: #fff; }

/* Bouton icône carré noir (« btn icon noir ») */
.ii-icon-btn {
  width: 70px; height: 70px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--ii-black);
  border: none; cursor: pointer;
  transition: background-color .2s ease;
}
.ii-icon-btn:hover { background: var(--ii-pink); }
.ii-icon-btn img { width: 32px; height: 32px; filter: brightness(0) invert(1); }

/* -------------------------------------------------------------------------
   4. Header + navigation
   ------------------------------------------------------------------------- */
.site-header {
  position: absolute;
  inset: 0 0 auto 0;
  z-index: 1030;
  padding-top: 40px;
  color: #fff;
}
.site-header__inner {
  width: 100%;
  max-width: 1446px;
  margin-inline: auto;
  padding-inline: 24px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: start;
  gap: 16px;
}

/* Coordonnées (gauche) */
.site-header__contact { font-size: 16px; line-height: 1.5; padding-top: 16px; }
.site-header__contact p { margin: 0; }
.site-header__phone { font-weight: 700; display: flex; align-items: center; gap: 8px; }
.site-header__phone a { color: inherit; }
.site-header__phone img { width: 18px; height: 18px; }

/* Module central flottant : logo rose + bouton menu noir */
.site-header__brand {
  display: flex;
  align-items: stretch;
  filter: drop-shadow(0 8px 4px rgba(0,0,0,.2));
}
.site-header__logo { display: block; }
.site-header__logo img { display: block; height: 80px; width: auto; }

.site-menu-toggle {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  background: var(--ii-black);
  color: #fff;
  border: none;
  padding: 0 28px;
  min-width: 156px;
  font-family: var(--ii-font-sans);
  font-weight: 300;
  font-size: 20px;
  text-transform: uppercase;
  cursor: pointer;
}
/* Burger « mur de briques » : 4 traits (1 / 2 / 1) */
.site-menu-toggle__icon { width: 30px; height: 18px; position: relative; flex: none; }
.site-menu-toggle__icon .b {
  position: absolute; left: 0; height: 3px; background: #fff;
  transform-origin: center;
  transition: transform .3s ease, top .3s ease, opacity .25s ease;
}
.site-menu-toggle__icon .b1 { top: 0;     width: 30px; }              /* ligne 1 : 1 brique */
.site-menu-toggle__icon .b2 { top: 7.5px; width: 13px; }             /* ligne 2 : brique gauche */
.site-menu-toggle__icon .b3 { top: 7.5px; left: auto; right: 0; width: 13px; } /* ligne 2 : brique droite */
.site-menu-toggle__icon .b4 { top: 15px;  width: 30px; }             /* ligne 3 : 1 brique */
.site-menu-toggle__label::before { content: attr(data-closed); }

/* Réseaux sociaux (droite) */
.site-header__social {
  display: flex; align-items: center; justify-content: flex-end; gap: 18px; padding-top: 18px;
}
.site-header__social a { display: inline-flex; }
.site-header__social img { width: 24px; height: 24px; }

/* Panneau de navigation déroulant */
.site-nav {
  position: absolute;
  inset: 0 0 auto 0;
  background: #fff;
  box-shadow: var(--ii-shadow);
  padding: 150px 20px 48px;
  transform: translateY(-100%);
  opacity: 0;
  visibility: hidden;
  transition: transform .35s ease, opacity .35s ease, visibility .35s;
  z-index: -1;
}
.site-nav ul { list-style: none; margin: 0; padding: 0; text-align: center; }
.site-nav li { margin: 0; }
.site-nav a {
  display: inline-block;
  font-size: 22px;
  font-weight: 700;
  color: var(--ii-black);
  padding: 8px 0;
  transition: color .2s ease;
}
.site-nav a:hover { color: var(--ii-pink); }

/* État ouvert */
body.nav-open { overflow: hidden; }
.site-header.is-open { color: var(--ii-black); }
.site-header.is-open .site-header__phone a { color: var(--ii-black); }
.site-header.is-open .site-header__social img,
.site-header.is-open .site-header__phone img { filter: invert(1); }
.site-header.is-open .site-nav { transform: translateY(0); opacity: 1; visibility: visible; }
/* Ouvert : les traits 1 et 4 pivotent en croix, les 2 du milieu disparaissent */
.site-header.is-open .site-menu-toggle__icon .b1 { top: 7.5px; width: 30px; left: 0; transform: rotate(45deg); }
.site-header.is-open .site-menu-toggle__icon .b4 { top: 7.5px; transform: rotate(-45deg); }
.site-header.is-open .site-menu-toggle__icon .b2,
.site-header.is-open .site-menu-toggle__icon .b3 { opacity: 0; }
.site-header.is-open .site-menu-toggle__label::before { content: attr(data-open); }

/* Variante header sur fond clair (pages sans héro sombre) */
.site-header--solid { color: var(--ii-black); }
.site-header--solid .site-header__phone a { color: var(--ii-black); }
.site-header--solid .site-header__social img,
.site-header--solid .site-header__phone img { filter: invert(1); }

/* -------------------------------------------------------------------------
   5. Footer
   ------------------------------------------------------------------------- */
.site-footer {
  background: var(--ii-black);
  color: #fff;
  padding-block: 70px 28px;
  font-size: 18px;
}
.site-footer__logo { width: 200px; margin-bottom: 24px; }
.site-footer__col-title {
  display: flex; align-items: center; gap: 12px;
  font-size: 14px; letter-spacing: 1.12px; text-transform: uppercase;
  color: var(--ii-gray); margin: 0 0 16px; font-weight: 400;
}
.site-footer__col-title::before {
  content: ""; flex: none; width: 18px; height: 1px; background: currentColor;
}
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer__links a { color: #fff; font-weight: 300; line-height: 36px; display: inline-block; }
.site-footer__links a:hover { color: var(--ii-pink); }
.site-footer__seo a { color: var(--ii-gray); line-height: 36px; }
.site-footer__seo a:hover { color: #fff; }
.site-footer__contact { font-size: 14px; line-height: 1.4; }
.site-footer__contact .phone { font-weight: 900; font-size: 16px; display: flex; align-items: center; gap: 8px; }
.site-footer__contact .phone img { width: 18px; height: 18px; filter: brightness(0) invert(1); }
.site-footer__social { display: flex; gap: 18px; }
.site-footer__social img { width: 24px; height: 24px; filter: brightness(0) invert(1); }
.site-footer hr { border: 0; border-top: 1px dashed rgba(255,255,255,.35); opacity: 1; margin-block: 44px; }
.site-footer__legal { font-size: 14px; font-weight: 300; color: #fff; }
.site-footer__legal a { color: #fff; }
.site-footer__legal a:hover { color: var(--ii-pink); }
.site-footer__3clics { height: 30px; }

/* -------------------------------------------------------------------------
   6. Fil d'ariane
   ------------------------------------------------------------------------- */
.ii-breadcrumb { font-size: 11px; letter-spacing: .88px; text-transform: uppercase; color: var(--ii-gray); padding-block: 20px; }
.ii-breadcrumb ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; }
.ii-breadcrumb li { display: inline-flex; align-items: center; }
.ii-breadcrumb li + li::before { content: "\27F6"; margin: 0 8px; color: var(--ii-gray); }
.ii-breadcrumb a { color: var(--ii-gray); }
.ii-breadcrumb a:hover { color: var(--ii-pink); }
/* Espace vertical breadcrumb -> 1re section identique sur toutes les pages
   (référence produits.php : ~8px sous le fil d'ariane avant le bloc-titre).
   La 1re section enveloppant le titre porte normalement padding-block 80/56px :
   on ramène uniquement son padding-top à 8px pour aligner toutes les pages. */
.ii-breadcrumb + .ii-section,
.ii-breadcrumb + .ii-section--tight { padding-top: 8px; }
/* Le sur-titre (.ii-eyebrow) en inline-flex centré ajoute ~6px de demi-interligne
   au-dessus : on l'aligne en haut de sa ligne pour que le bloc-titre démarre
   exactement au même niveau que les pages sans sur-titre (produits.php). */
.ii-breadcrumb + .ii-section .ii-eyebrow,
.ii-breadcrumb + .ii-section--tight .ii-eyebrow { vertical-align: top; }

/* -------------------------------------------------------------------------
   7. Carte annonce (.annonce)
   ------------------------------------------------------------------------- */
.annonce {
  position: relative;
  background: #fff;
  display: block;
  color: var(--ii-black);
}
.annonce__media { position: relative; aspect-ratio: 395 / 456; overflow: hidden; }
.annonce__media > img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .6s cubic-bezier(.22, .61, .36, 1);   /* zoom smooth au survol */
}
/* Survol de l'encart : léger zoom de la photo (la carte ne change pas de taille,
   l'image déborde et est rognée par overflow:hidden ci-dessus). */
.annonce:hover .annonce__media > img { transform: scale(1.06); }
/* Overlay au survol : dégradé blanc + description (fidèle maquette) */
.annonce__hover { position: absolute; inset: 0; pointer-events: none; }
/* Dégradé : monte du bas + apparaît EN PREMIER (sans délai). */
.annonce__hover::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to bottom, rgba(217,217,217,0) 44.7%, rgba(255,255,255,.85) 80%);
  opacity: 0; transform: translateY(45px);
  transition: opacity .45s ease, transform .55s cubic-bezier(.22, .61, .36, 1);
}
/* Texte : monte du bas + apparaît, légèrement APRÈS le dégradé (délai à l'entrée seulement),
   les deux mouvements se chevauchent. À la sortie, pas de délai -> retrait net et propre. */
.annonce__desc {
  position: absolute; left: 24px; right: 24px; bottom: 22px; margin: 0;
  font-size: 16px; line-height: 20px; text-align: justify; color: var(--ii-black);
  opacity: 0; transform: translateY(28px);
  transition: opacity .45s ease, transform .55s cubic-bezier(.22, .61, .36, 1);
}
.annonce:hover .annonce__hover::before { opacity: 1; transform: translateY(0); }
.annonce:hover .annonce__desc {
  opacity: 1; transform: translateY(0);
  transition-delay: .14s;   /* démarre après le dégradé, mais chevauche (cascade) */
}
.annonce__body { padding: 26px 24px 28px; text-align: center; }
.annonce__features {
  display: flex; justify-content: center; gap: 36px; margin-bottom: 14px;
  font-size: 14px; font-weight: 300;
}
.annonce__feature { display: inline-flex; align-items: center; gap: 8px; }
.annonce__feature img { width: 22px; height: 22px; }
.annonce__divider { border: 0; border-top: 1px solid var(--ii-line); margin: 0 0 16px; }
.annonce__title { font-size: 16px; font-weight: 500; margin: 0 0 16px; line-height: 1.4; }
.annonce__title strong { display: block; font-size: 24px; font-weight: 700; }
/* Prix : badge rose centré SOUS la ville */
.annonce__price {
  display: inline-block; background: var(--ii-pink); color: #fff;
  font-weight: 700; font-size: 20px; line-height: 1.4; padding: 4px 16px; white-space: nowrap;
}
/* Variante listing : photo au format horizontal (paysage) */
.annonce--wide .annonce__media { aspect-ratio: 610 / 456; }
/* Dans les carrousels, la carte (en dur en .annonce--wide) repasse au format portrait */
.annonce-slide .annonce__media { aspect-ratio: 395 / 456; }

/* -------------------------------------------------------------------------
   8. Champs de formulaire
   ------------------------------------------------------------------------- */
.ii-field { margin-bottom: 18px; }
.ii-field label { display: block; font-size: 14px; color: var(--ii-gray); margin-bottom: 6px; }
.ii-input,
.ii-select,
.ii-textarea {
  width: 100%;
  border: 1px solid var(--ii-line);
  border-radius: 0;
  padding: 16px 18px;
  font-family: var(--ii-font-sans);
  font-size: 16px;
  color: var(--ii-black);
  background: #fff;
}
.ii-input::placeholder,
.ii-textarea::placeholder { color: var(--ii-gray); }
.ii-input:focus,
.ii-select:focus,
.ii-textarea:focus { outline: none; border-color: var(--ii-pink); }
.ii-textarea { resize: vertical; min-height: 120px; }
.ii-select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23000' stroke-width='1.5' fill='none'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 18px center;
  padding-right: 44px;
}
.ii-check { display: flex; align-items: flex-start; gap: 12px; font-size: 16px; color: var(--ii-black); }
.ii-check input { width: 24px; height: 24px; accent-color: var(--ii-pink); flex: none; border-radius: 0; border: 1px solid #000; }
.ii-check a { color: inherit; text-decoration: underline; }

/* Champs « ligne » du formulaire de contact (label au-dessus, soulignement pointillé) */
.ii-formline { margin-bottom: 28px; }
.ii-formline > label {
  display: block; font-size: 14px; letter-spacing: .5px; text-transform: uppercase;
  color: var(--ii-gray); margin-bottom: 12px;
}
.ii-formline input,
.ii-formline textarea {
  width: 100%; border: 0; border-bottom: 1px dashed #585858; background: transparent;
  font-family: var(--ii-font-sans); font-size: 16px; color: var(--ii-black); padding: 6px 0;
}
.ii-formline textarea { resize: none; min-height: 120px; border-bottom: 0; }
.ii-formline input:focus { outline: none; border-bottom: 1px solid var(--ii-pink); }
.ii-formline textarea:focus { outline: none; }
.ii-form-sep { border: 0; border-top: 1px dashed #585858; opacity: 1; margin: 8px 0 28px; }

/* Messages de retour des formulaires (confirmation / erreur inline) */
/* Confirmation inline des formulaires (charte : fond gris clair, icône rose, centré) */
.ii-form-success {
  max-width: 620px; margin: 0 auto;
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: 22px;
  background: #f3eff0; padding: 44px 40px; border: 0; color: #1a1a1a;
}
.ii-form-success__icon {
  flex: 0 0 auto; width: 58px; height: 58px; border-radius: 50%;
  background: #ee458e; display: flex; align-items: center; justify-content: center;
}
.ii-form-success__text { display: flex; flex-direction: column; gap: 8px; }
.ii-form-success__text strong {
  font-family: 'Playfair Display', Georgia, serif; font-weight: 600; font-size: 24px; line-height: 1.25; color: #1a1a1a;
}
.ii-form-success__text span { font-family: 'Figtree', sans-serif; font-size: 15px; color: #585858; }
.ii-form-error { background: #fdeceb; border-left: 4px solid #c0392b; padding: 14px 18px; color: #c0392b; margin-bottom: 18px; }
@media (max-width: 575px) {
  .ii-form-success { gap: 18px; padding: 32px 24px; }
  .ii-form-success__text strong { font-size: 20px; }
}

/* Badge reCAPTCHA masqué (la mention légale reste dans les CGU) */
.grecaptcha-badge { opacity: 0 !important; }

/* Bouton "EN COURS…" pendant l'envoi d'un formulaire */
.ii-btn.is-loading { pointer-events: none; opacity: .85; }
.ii-dots i { font-style: normal; opacity: 0; animation: ii-dot 1.2s infinite; }
.ii-dots i:nth-child(2) { animation-delay: .2s; }
.ii-dots i:nth-child(3) { animation-delay: .4s; }
@keyframes ii-dot { 0%, 100% { opacity: 0; } 50% { opacity: 1; } }

/* Réseaux sociaux sur fond clair (icônes en noir) */
.ii-socials-dark img { filter: brightness(0); }

/* -------------------------------------------------------------------------
   9. Sections génériques
   ------------------------------------------------------------------------- */
/* Héro plein écran avec image de fond */
.ii-hero {
  position: relative;
  min-height: 100vh;          /* fallback */
  min-height: 100svh;         /* remplit l'écran, gère la barre d'adresse mobile */
  display: flex;
  align-items: flex-end;      /* contenu ancré en bas */
  padding-top: 180px;         /* dégagement de l'en-tête : empêche tout chevauchement */
  color: #fff;
  background: #222 center/cover no-repeat;
}
.ii-hero::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(180deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,0) 47%),
    rgba(0,0,0,.20);
}
/* Distance CONSTANTE sous le badge ; les écarts au-dessus sont proportionnels
   à la hauteur d'écran (clamp) pour un responsive parfait sans chevauchement. */
.ii-hero__inner { position: relative; z-index: 2; width: 100%; text-align: center; padding-bottom: 56px; }
.ii-hero__title {
  font-size: clamp(26px, 3.1vw, 42px); font-weight: 300; line-height: 1.25;
  margin: 0 0 clamp(36px, 11.5vh, 130px);
  text-shadow: 0 2px 12px rgba(0,0,0,.3);
}
.ii-hero__rating { margin-top: clamp(44px, 14vh, 150px); }
.ii-hero__title .accent { font-family: var(--ii-font-accent); font-style: italic; font-weight: 400; }
.ii-hero .ii-search-tabs { justify-content: center; }
.ii-hero--page { min-height: 460px; }

/* Effet Ken Burns sur les photos du slider */
#heroSlider .carousel-item { overflow: hidden; }
#heroSlider .carousel-item > img { transform-origin: center; will-change: transform; }
#heroSlider .carousel-item.active > img { animation: iiKenBurns 8s ease-out forwards; }
@keyframes iiKenBurns {
  from { transform: scale(1) translate(0, 0); }
  to   { transform: scale(1.14) translate(-1.5%, -1.2%); }
}
@media (prefers-reduced-motion: reduce) {
  #heroSlider .carousel-item.active > img { animation: none; }
}

/* Carrousels (biens à la une, avis) */
.ii-carousel { position: relative; }
/* Pied de carrousel : flèche · filet pointillé · bouton · filet · flèche (même hauteur) */
.ii-carousel-foot { display: flex; align-items: center; gap: 28px; margin-top: 44px; }
.ii-carousel-foot .ii-nav-arrow { flex: none; }
.ii-carousel-foot .ii-dotted { flex: 1; }
.ii-carousel-foot .ii-btn { flex: none; }
.ii-nav-arrow {
  width: 46px; height: 46px; border: 1px solid var(--ii-black); background: #fff;
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
  transition: background-color .2s ease, color .2s ease;
}
.ii-nav-arrow:hover { background: var(--ii-black); color: #fff; }
.ii-nav-arrow svg { width: 16px; height: 16px; }

/* Filet pointillé décoratif autour des titres de section */
.ii-dotted { flex: 1; height: 0; border-top: 1px dashed var(--ii-line); }
.ii-title-deco { display: flex; align-items: center; gap: 32px; }
.ii-title-deco .ii-dotted:first-child { max-width: 425px; }
.ii-title-deco .ii-dotted:last-child { max-width: 425px; }

/* Stats (chiffres clés) */
/* Stats : TOUJOURS sur une seule ligne -> tailles fluides qui se réduisent */
.ii-stats { display: flex; flex-wrap: nowrap; justify-content: space-between; gap: clamp(8px, 2vw, 24px); text-align: center; }
.ii-stat { flex: 1 1 0; min-width: 0; }
.ii-stat__icon { height: 56px; margin-bottom: 16px; }
/* Icônes des stats - uniquement page Notre agence (maquette : ~96px de haut, noir) */
.ii-stats--icons .ii-stat__icon { height: auto; margin-bottom: 44px; }
.ii-stats--icons .ii-stat__icon img { display: block; height: clamp(68px, 7.5vw, 96px); width: auto; margin: 0 auto; }
.ii-stat__num { font-size: clamp(18px, 4.4vw, 34px); font-weight: 700; color: var(--ii-black); line-height: 1.1; white-space: nowrap; text-transform: uppercase; }
.ii-stat__label { font-size: clamp(11px, 2.6vw, 14px); color: var(--ii-gray); text-transform: uppercase; letter-spacing: .5px; }

/* Section estimation (CTA sombre sur image) */
.ii-cta-dark {
  position: relative; color: #fff; text-align: center; padding-block: 120px;
  background: #1a1a1a center/cover no-repeat;
}
.ii-cta-dark::after { content: ""; position: absolute; inset: 0; background: rgba(0,0,0,.72); }
.ii-cta-dark > * { position: relative; z-index: 2; }

/* Rails de carrousel (biens à la une, avis) */
.annonces-rail,
.reviews-rail {
  display: flex;
  gap: 24px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding-bottom: 8px;
  scrollbar-width: none;
}
.annonces-rail::-webkit-scrollbar,
.reviews-rail::-webkit-scrollbar { display: none; }
/* 3 slides par vue (desktop) */
.annonce-slide { flex: 0 0 calc((100% - 48px) / 3); scroll-snap-align: start; }
.annonce-slide > .annonce { height: 100%; }   /* cartes de carrousel à hauteur égale */
.review-slide  { flex: 0 0 calc((100% - 48px) / 3); scroll-snap-align: start; }
/* 2 slides par vue (tablette) */
@media (max-width: 991.98px) {
  .annonce-slide, .review-slide { flex-basis: calc((100% - 24px) / 2); }
}
/* 1 slide par vue (mobile) - slide pleine, pas de débordement de la suivante */
@media (max-width: 767.98px) {
  .annonce-slide, .review-slide { flex-basis: 100%; }
}

/* Carte de localisation (Google Maps JS API, style snazzymaps) */
.ii-map-wrap { position: relative; overflow: hidden; }
.ii-map { width: 100%; height: 460px; border: 0; background: #f3eff0; }
.ii-map--placeholder { display: flex; align-items: center; justify-content: center; }
.ii-map--placeholder::after {
  content: "Carte - renseigner la clé Google Maps (assets/js/main.js)";
  color: var(--ii-gray); font-size: 13px; text-align: center; padding: 20px;
}

/* Info-bulle "biens vendus" (popup OverlayView au clic sur un point) */
.ii-mappop { position: absolute; }
.ii-mappop__card {
  position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%);
  display: flex; width: 300px; height: 120px; background: #fff;
  box-shadow: 4px 4px 2px rgba(0, 0, 0, .25); cursor: default;
}
.ii-mappop__photo { flex: 0 0 120px; width: 120px; height: 120px; overflow: hidden; }
.ii-mappop__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ii-mappop__body { padding: 28px 0 0 17px; font-family: var(--ii-font-sans); }
.ii-mappop__type { margin: 0; font-size: 14px; font-weight: 500; line-height: 1.4; color: var(--ii-black); }
.ii-mappop__loc  { margin: 0; font-size: 16px; font-weight: 700; line-height: 1.4; color: var(--ii-black); }
.ii-mappop__ref  { margin: 0; font-size: 10px; line-height: 2; color: var(--ii-gray); }

/* Badge note Google (compact, cliquable -> scroll vers les avis) */
.ii-rating {
  display: inline-flex; align-items: center; gap: 9px;
  background: #fff; color: var(--ii-black); padding: 6px 14px;
  box-shadow: 0 6px 20px rgba(0,0,0,.18); transition: transform .2s ease, box-shadow .2s ease;
}
.ii-rating:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(0,0,0,.25); }
.ii-rating__score { font-size: 30px; font-weight: 700; line-height: 1; color: var(--ii-black); }
.ii-rating__right { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
.ii-rating__stars { display: inline-flex; gap: 0; margin-left: -2px; }
.ii-rating__stars img { width: 17px; height: 17px; margin-right: -1px; }
.ii-rating__label { font-size: 13px; color: var(--ii-black); font-weight: 600; line-height: 1; letter-spacing: .2px; }

/* Onglets de recherche du héro (« big bouton » : Acheter / Louer / Estimer) */
.ii-search-tabs { display: flex; gap: 18px; flex-wrap: wrap; }
.ii-search-tab {
  display: inline-flex; align-items: center; justify-content: center; gap: 19px;
  background: rgba(0,0,0,.4); color: #fff;
  border: 1px solid rgba(255,255,255,.25);
  -webkit-backdrop-filter: blur(14px) saturate(120%);
  backdrop-filter: blur(14px) saturate(120%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 8px 24px rgba(0,0,0,.18);
  height: 90px; padding: 25px 50px;
  font-family: var(--ii-font-sans); font-size: 24px; font-weight: 300; cursor: pointer;
  text-transform: uppercase; letter-spacing: 1.92px;
  transition: transform .3s ease, background-color .3s ease, color .3s ease, box-shadow .3s ease;
}
.ii-search-tab img { width: 42px; height: 42px; filter: brightness(0) invert(1); transition: filter .3s ease; }
.ii-search-tab:hover {
  background: #fff; color: var(--ii-black); transform: scale(1.07);
  box-shadow: 0 16px 40px rgba(0,0,0,.28);
}
.ii-search-tab:hover img { filter: none; }

/* Carte avis client (fidèle composant « avis ») */
.ii-review { border: 1px solid var(--ii-black); padding: 40px 44px; height: 100%; background: #fff; }
.ii-review__head { display: flex; align-items: flex-start; gap: 16px; margin-bottom: 24px; }
.ii-review__avatar {
  width: 60px; height: 60px; border-radius: 50%; background: var(--ii-pink);
  color: #fff; font-weight: 700; font-size: 24px; flex: none;
}
.ii-review__id { flex: 1; min-width: 0; padding-top: 4px; }
.ii-review__name { font-weight: 700; font-size: 16px; margin-bottom: 8px; }
.ii-review__rating { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.ii-review__stars { display: inline-flex; gap: 0; flex: none; }
.ii-review__stars img { width: 22px; height: 22px; flex: none; margin-right: -4px; }   /* resserrées (vide interne du SVG) */
.ii-review__stars img:last-child { margin-right: 0; }
.ii-review__google { height: 18px; width: auto; flex: none; }
.ii-review__text { font-style: italic; font-size: 20px; line-height: 1.4; color: var(--ii-black); margin: 0; }

/* -------------------------------------------------------------------------
   10. Détail produit
   ------------------------------------------------------------------------- */
/* Héro plein écran (slider + ken burns, comme la HP) */
.detail-hero { position: relative; min-height: 100vh; min-height: 100svh; display: flex; align-items: flex-end; padding-top: 180px; color: #fff; background: #222 center/cover no-repeat; overflow: hidden; }
.detail-hero::after { content:""; position:absolute; inset:0; z-index:1; background: linear-gradient(180deg, rgba(0,0,0,.5) 0%, rgba(0,0,0,0) 38%, rgba(0,0,0,.55) 100%); }
.detail-hero__inner { position: relative; z-index: 2; width: 100%; padding-bottom: 48px; display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.detail-hero__title { font-size: 22px; font-weight: 300; margin: 0; line-height: 1.3; }
.detail-hero__title strong { display: block; font-size: 34px; font-weight: 700; }
.detail-hero__title .ref { display: block; font-size: 14px; font-weight: 300; margin-top: 6px; }
.detail-hero__right { display: flex; flex-direction: column; align-items: flex-end; gap: 16px; }
/* bouton "X photos" */
.detail-photos-btn { display: inline-flex; align-items: center; gap: 10px; background: rgba(0,0,0,.4);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border: 1px solid rgba(255,255,255,.4);
  color: #fff; padding: 12px 20px; font-size: 14px; letter-spacing: .5px; text-transform: uppercase; cursor: pointer;
  transition: background-color .2s ease, color .2s ease; }
.detail-photos-btn:hover { background: #fff; color: #000; }
.detail-photos-btn img { width: 20px; height: 20px; filter: brightness(0) invert(1); }
.detail-photos-btn:hover img { filter: brightness(0); }
#detailSlider .carousel-item { overflow: hidden; height: 100%; }
#detailSlider .carousel-item > img { width: 100%; height: 100%; object-fit: cover; }
#detailSlider .carousel-item.active > img { animation: iiKenBurns 8s ease-out forwards; }
/* Fil d'ariane blanc, sous le header, au-dessus du slider */
.detail-hero__crumb { position: absolute; top: 188px; left: 0; right: 0; z-index: 3; }
.detail-hero__crumb .ii-breadcrumb { text-align: center; color: rgba(255,255,255,1); padding: 0; }
.detail-hero__crumb .ii-breadcrumb li + li::before {
  color: rgba(255,255,255,1);
}
.detail-hero__crumb .ii-breadcrumb a { color: rgba(255,255,255,1); }
.detail-hero__crumb .ii-breadcrumb a:hover { color: #fff; }
@media (max-width: 767.98px) { .detail-hero__crumb { top: 120px; } }

/* Bloc haut : Description + Caractéristiques (contenu) + sidebar sticky à droite */
.detail-body { padding-block: 64px; }
/* Le bloc haut porte le trait -> la sidebar sticky se libère pile à cette ligne */
.detail-top { display: flex; gap: 40px; align-items: flex-start; padding-bottom: 48px; margin-bottom: 48px; border-bottom: 1px solid var(--ii-line); }
.detail-top__main { flex: 1; min-width: 0; }
.detail-top__aside { width: 360px; flex: none; position: sticky; top: 24px; }
/* Une section = titre (gauche) + contenu */
.detail-section { display: flex; gap: 40px; padding-bottom: 48px; margin-bottom: 48px; border-bottom: 1px solid var(--ii-line); }
.detail-top__main > .detail-section:last-child { border-bottom: 0; margin-bottom: 0; padding-bottom: 0; }
.detail-body > .detail-section:last-child { border-bottom: 0; margin-bottom: 0; padding-bottom: 0; }
.detail-section__title { width: 220px; flex: none; font-family: var(--ii-font-accent); font-style: italic; font-size: 34px; color: var(--ii-black); margin: 0; line-height: 1.1; }
.detail-section__content { flex: 1; min-width: 0; }
/* Sections pleine largeur (En images, Infos financières, DPE) : 1/3 titre + 2/3 contenu */
.detail-section--wide .detail-section__title { width: 33.333%; }
.detail-text { font-size: 16px; line-height: 1.6; }

/* Liens dans le texte : noir souligné (hover rose) - règle globale */
.ii-texte-agence a,
.detail-text a,
.ii-check a,
.ii-seo-links a,
.ii-rich a,
.site-content p a,
.site-content li a { color: var(--ii-black); text-decoration: underline; }
.ii-texte-agence a:hover,
.detail-text a:hover,
.ii-check a:hover,
.ii-seo-links a:hover,
.ii-rich a:hover,
.site-content p a:hover,
.site-content li a:hover { color: var(--ii-pink); }

/* Bloc de texte riche (section À découvrir) */
.ii-rich { font-size: 16px; line-height: 1.4; }
.ii-rich p { margin-bottom: 16px; }
/* Liste de liens SEO : puces disque, gras, soulignés */
.ii-seo-links { list-style: disc; padding-left: 24px; margin: 0; }
.ii-seo-links li { font-weight: 700; font-size: 16px; line-height: 1.8; }

/* Caractéristiques : grille de tuiles (icône noire 46px + libellé) */
.detail-features { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px 12px; }
.detail-feature { text-align: center; }
.detail-feature__icon { width: 46px; height: 46px; margin: 0 auto 10px; background: var(--ii-black); display: flex; align-items: center; justify-content: center; }
.detail-feature__icon img { width: 26px; height: 26px; }
.detail-feature__label { font-size: 14px; line-height: 1.3; color: var(--ii-black); }
.detail-feature__label strong { font-weight: 700; }

/* Sidebar contact (sticky) « Ce bien vous intéresse ? » */
.detail-aside-card { background: var(--ii-gray-light); padding: 32px 28px; }
.detail-aside-card__title { font-family: var(--ii-font-accent); font-style: italic; font-size: 24px; margin: 0 0 20px; line-height: 1.2; }
.detail-aside-card__title .accent { color: var(--ii-pink); }
.detail-contact-btns { display: flex; flex-direction: column; gap: 12px; }
.detail-contact-btns .ii-btn { width: 100%; justify-content: flex-start; gap: 16px; padding: 16px 22px; font-size: 14px; letter-spacing: .96px; }
.detail-contact-btns .ii-btn img { width: 22px; height: 22px; }

/* Galerie « En images » : rail horizontal (2 photos/vue) navigable par les flèches */
.detail-gallery { display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; }
.detail-gallery::-webkit-scrollbar { display: none; }
.detail-gallery img { flex: 0 0 calc((100% - 16px) / 2); height: 300px; object-fit: cover; cursor: pointer; scroll-snap-align: start; }
@media (max-width: 575.98px) { .detail-gallery img { flex-basis: 100%; } }

/* DPE - étiquettes officielles (visuels SVG de la maquette).
   L'image affichée dépend de la classe (conso-c.svg, emi-c.svg, no-dpe-conso.svg…).
   Voir le helper PHP ii_dpe() dans detail.php.
   Les visuels conso (851×766, ratio 1.111) et emi (755×838, ratio 0.900) ont des
   ratios différents. Pour tenir 2 PAR LIGNE (comme la maquette) tout en gardant des
   HAUTEURS ÉGALES, on dimensionne chaque graphe par sa LARGEUR proportionnelle au
   ratio : conso 52.5% + emi 42.5% + gap 5% = 100% de la colonne. À ces largeurs,
   les deux SVG ont exactement la même hauteur. L'image suit (width:100%, height:auto). */
.dpe-wrap { display: flex; gap: 5%; align-items: flex-end; }
.dpe-graph { position: relative; }
.dpe-graph--conso { flex: 0 0 52.5%; }
.dpe-graph--emi   { flex: 0 0 42.5%; }
.dpe-graph img { display: block; width: 100%; height: auto; }
/* DPE non applicable : visuels en noir & blanc */
.dpe-graph--na img { filter: grayscale(1); }

/* --- Valeurs numériques DYNAMIQUES en overlay absolu (PAS dans l'image) ---
   Le SVG ne contient plus les chiffres ; ils sont positionnés ici en face de la
   classe active. --row = centre vertical de la classe (% de la hauteur du visuel,
   mesuré sur les SVG). Le développeur peut ajuster left/top au pixel près. */
.dpe-val {
  position: absolute; font-family: var(--ii-font-sans); font-weight: 700;
  color: #1d1d1b; line-height: 1; white-space: nowrap; pointer-events: none;
  font-size: clamp(13px, 1.35vw, 18px);
}
/* Consommation (gauche) : 2 nombres dans l'encadré, au-dessus de leurs unités */
.dpe-graph--conso .dpe-val { top: calc(var(--row) - 3%); transform: translate(-50%, -50%); }
.dpe-val--c1 { left: 10%; }     /* énergie primaire - kWh/m².an (centre colonne gauche de l'encadré) */
.dpe-val--c2 { left: 29.5%; }   /* émissions        - kg CO₂/m².an (centre colonne droite) */
/* Émissions (droite) : 1 nombre au bout de la ligne de renvoi */
.dpe-graph--emi .dpe-val--e { left: 76%; top: var(--row); transform: translate(-50%, -50%); }

/* Centre vertical de chaque classe (A→G), mesuré sur chaque SVG */
/* cl-a conso : l'encadré se cale plus bas qu'un pas régulier (butée haute) → 17%, mesuré sur conso-a.svg */
.dpe-graph--conso.cl-a { --row: 17.0%; } .dpe-graph--emi.cl-a { --row: 22.0%; }
.dpe-graph--conso.cl-b { --row: 26.1%; } .dpe-graph--emi.cl-b { --row: 32.7%; }
.dpe-graph--conso.cl-c { --row: 38.1%; } .dpe-graph--emi.cl-c { --row: 43.6%; }
.dpe-graph--conso.cl-d { --row: 50.1%; } .dpe-graph--emi.cl-d { --row: 54.4%; }
.dpe-graph--conso.cl-e { --row: 62.1%; } .dpe-graph--emi.cl-e { --row: 65.0%; }
.dpe-graph--conso.cl-f { --row: 74.1%; } .dpe-graph--emi.cl-f { --row: 76.2%; }
.dpe-graph--conso.cl-g { --row: 86.1%; } .dpe-graph--emi.cl-g { --row: 87.1%; }

/* Bouton flottant mobile "Contactez-nous" (réutilise le style du FAB recherche) */
.contact-fab { display: none; }
@media (max-width: 991.98px) {
  .detail-top { flex-direction: column; }
  .detail-top__aside { width: 100%; position: static; }
  .detail-section { flex-direction: column; gap: 16px; }
  .detail-section__title,
  .detail-section--wide .detail-section__title { width: auto; }
  .detail-features { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 767.98px) {
  .detail-top__aside { display: none; }   /* la sidebar laisse place au FAB */
  .detail-features { grid-template-columns: repeat(2, 1fr); }
  .detail-gallery { grid-template-columns: 1fr; }
  .contact-fab {
    display: flex; align-items: center; justify-content: center; gap: 10px;
    position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 1070;
    background: var(--ii-pink); color: #fff; border: 0; padding: 16px;
    font-family: var(--ii-font-sans); font-size: 16px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px;
    box-shadow: 0 8px 24px rgba(0,0,0,.35); cursor: pointer; text-decoration: none;
  }
  .contact-fab img { width: 20px; height: 20px; filter: brightness(0) invert(1); }
}
/* DPE : sous 576px, on empile les graphes (sinon le texte vectorisé devient illisible) */
@media (max-width: 575.98px) {
  .dpe-wrap { flex-direction: column; gap: 32px; align-items: flex-start; }
  .dpe-graph--conso, .dpe-graph--emi { flex: 0 0 auto; width: 100%; max-width: 360px; }
}

/* -------------------------------------------------------------------------
   11. Barre de recherche & tri (listing)
   ------------------------------------------------------------------------- */
.search-bar {
  background: rgba(243, 239, 240, .94);
  box-shadow: var(--ii-shadow-soft);
  padding: 22px 25px;
  display: flex;
  align-items: flex-end;
  gap: 28px;
}
.search-field { flex: 1; min-width: 0; position: relative; }
.search-field__label {
  display: block; font-size: 12px; letter-spacing: .96px; text-transform: uppercase;
  color: #585858; margin-bottom: 14px;
}
/* contrôle commun (valeur + chevron), pointillé EN BAS comme les inputs */
.search-field__control {
  width: 100%; background: none; border: 0; border-bottom: 1px dashed #585858;
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  font-family: var(--ii-font-sans); font-size: 20px; font-weight: 700; text-transform: uppercase;
  color: var(--ii-black); padding: 0 0 10px; text-align: left; cursor: pointer;
}
.search-field__control .chev { width: 14px; height: 14px; flex: none; transition: transform .2s ease; }
.search-field__control[aria-expanded="true"] .chev { transform: rotate(180deg); }
/* référence : véritable input */
input.search-field__control { cursor: text; }
input.search-field__control::placeholder { color: #585858; font-weight: 400; }

.search-submit {
  flex: none; width: 70px; height: 70px; background: var(--ii-black); border: 1px solid var(--ii-black);
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
  transition: background-color .2s ease;
}
.search-submit img { width: 30px; height: 30px; filter: brightness(0) invert(1); transition: filter .2s ease; }
.search-submit:hover { background: transparent; }       /* hover : transparent + bord noir */
.search-submit:hover img { filter: brightness(0); }     /* + icône noire */

/* menus déroulants (cases à cocher) */
.search-menu { background: #f3eff0; border: 0; box-shadow: 0 4px 8px rgba(0,0,0,.25); border-radius: 0; padding: 16px 20px; }
.search-menu .form-check { margin-bottom: 8px; }
.search-menu .form-check:last-child { margin-bottom: 0; }
.search-menu .form-check-label { text-transform: uppercase; font-size: 16px; }
.search-menu .form-check-input { border-radius: 0; border-color: #000; }
.search-menu .form-check-input:checked { background-color: #000; border-color: #000; }

/* Réglette budget (double curseur) */
.budget-menu { padding: 26px 24px 18px; min-width: 280px; }
.range-slider { position: relative; height: 26px; }
.range-slider .track { position: absolute; top: 50%; left: 0; right: 0; height: 2px; background: #000; transform: translateY(-50%); }
.range-slider input[type=range] {
  position: absolute; top: 0; left: 0; width: 100%; height: 26px; margin: 0; pointer-events: none;
  background: none; -webkit-appearance: none; appearance: none;
}
.range-slider input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; pointer-events: auto;
  width: 8px; height: 22px; background: var(--ii-pink); border: 0; cursor: pointer;
}
.range-slider input[type=range]::-moz-range-thumb {
  pointer-events: auto; width: 8px; height: 22px; background: var(--ii-pink); border: 0; border-radius: 0; cursor: pointer;
}
.budget-values { display: flex; justify-content: space-between; font-size: 13px; font-weight: 700; margin-top: 12px; }

/* Tri */
.tri { display: inline-flex; align-items: center; gap: 10px; }
.tri .tri-toggle {
  background: none; border: 0; cursor: pointer; text-transform: uppercase;
  font-size: 16px; color: var(--ii-black); display: inline-flex; align-items: center; gap: 10px;
}
.tri .tri-toggle .chev { width: 16px; height: 16px; }
.tri-menu { background: #f3eff0; border: 0; box-shadow: 0 4px 8px rgba(0,0,0,.25); border-radius: 0; }
.tri-menu .dropdown-item { text-transform: uppercase; font-size: 14px; padding: 6px 16px; }
.tri-menu .dropdown-item:active { background: var(--ii-pink); }

.results-count { font-size: 16px; color: var(--ii-black); }

/* Loader infinite scroll (fidèle maquette : anneau + arc rose + « Chargement… ») */
.ii-loader { display: flex; justify-content: center; align-items: center; padding: 32px 0 8px; min-height: 40px; }
.ii-loader__spinner { width: 146px; height: 146px; position: relative; display: none; }
.ii-loader.is-active .ii-loader__spinner { display: block; }
.ii-loader__ring {
  display: block; width: 146px; height: 146px; box-sizing: border-box;
  border: 3px solid #efeaeb; border-top-color: var(--ii-pink); border-radius: 50%;
  animation: iiSpin .9s linear infinite;
}
.ii-loader__text {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-size: 12px; letter-spacing: 1px; text-transform: uppercase; color: var(--ii-black);
}
@keyframes iiSpin { to { transform: rotate(360deg); } }

/* Hero court (bandeau image) - pages internes.
   Cadrage vertical réglable par page via --hero-pos (0% = haut de l'image, 50% = centre,
   100% = bas). Exprimé en %, donc identique à toutes les tailles d'écran (responsive).
   Ex. dans la page : <section class="listing-hero" style="background-image:url('…'); --hero-pos:30%"> */
.listing-hero {
  position: relative; height: 328px;
  background-color: #222;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: 50% var(--hero-pos, 50%);
}
.listing-hero::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(0,0,0,.5),rgba(0,0,0,.2)); }
/* Moteur de recherche en overlay dans le héro (desktop) */
.listing-hero__search { position: absolute; left: 0; right: 0; bottom: 42px; z-index: 6; }

/* Bouton flottant mobile (masqué hors mobile) */
.search-fab { display: none; }

@media (max-width: 991.98px) {
  .search-bar { flex-wrap: wrap; gap: 18px 24px; align-items: stretch; }
  .search-field { flex: 1 1 45%; }
}
@media (max-width: 767.98px) {
  .search-field { flex-basis: 100%; }
  .search-submit { width: 100%; }
  /* Recherche masquée par défaut sur mobile, affichée via le bouton flottant */
  .listing-hero__search { position: static; display: none; }
  .listing-hero__search.is-open {
    display: block; position: fixed; top: 0; left: 0; right: 0; z-index: 1080;
    padding: 16px; max-height: 100vh; overflow-y: auto;
  }
  body.search-open { overflow: hidden; }
  .search-fab {
    display: flex; align-items: center; justify-content: center; gap: 10px;
    position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 1070;
    background: var(--ii-pink); color: #fff; border: 0; padding: 16px;
    font-family: var(--ii-font-sans); font-size: 16px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px;
    box-shadow: 0 8px 24px rgba(0,0,0,.35); cursor: pointer;
  }
  .search-fab img { width: 20px; height: 20px; filter: brightness(0) invert(1); }
}

/* -------------------------------------------------------------------------
   12. Responsive
   ------------------------------------------------------------------------- */
@media (max-width: 991.98px) {
  .site-header__inner { grid-template-columns: 1fr auto; }
  .site-header__contact { display: none; }
  .detail-features { grid-template-columns: repeat(2, 1fr); }
  .detail-gallery { grid-template-columns: 1fr 1fr; }

  /* Héro : les 3 boutons ne tiennent plus sur une ligne -> empilés, largeur égale */
  .ii-search-tabs { flex-direction: column; align-items: center; gap: 16px; }
  .ii-search-tab { width: 100%; max-width: 420px; }
}
@media (max-width: 767.98px) {
  .ii-section { padding-block: 56px; }
  .ii-title { font-size: 26px; }
  /* Contenu ancré EN HAUT (sous le header) au lieu du bas : le titre et les
     boutons remontent juste sous l'en-tête au lieu de descendre en bas de l'écran. */
  .ii-hero { padding-top: 160px; align-items: flex-start; }
  .ii-hero__inner { padding-bottom: 0; }
  /* Écarts verticaux réduits : éloigne le titre du header, évite que ça touche */
  .ii-hero__title { margin-bottom: 26px; }
  .ii-hero__rating { margin-top: 30px; }

  .site-header__social { display: none; }
  /* Plus que logo + Menu : on centre l'ensemble */
  .site-header__inner { display: flex; justify-content: center; }
  .site-menu-toggle { min-width: 0; padding: 0 18px; font-size: 16px; }
  .site-header__logo img { height: 64px; }

  /* Boutons héro pleine largeur (occupent mieux l'espace) */
  .ii-search-tab { max-width: none; padding: 18px 28px; font-size: 18px; gap: 14px; }
  .ii-search-tab img { width: 34px; height: 34px; }

  .detail-features { grid-template-columns: 1fr; }
  .detail-gallery { grid-template-columns: 1fr; }

  /* Pied de carrousel : flèches aux extrémités (filet pointillé entre) au-dessus,
     puis bouton pleine largeur en dessous */
  .ii-carousel-foot { flex-wrap: wrap; align-items: center; gap: 18px; }
  .ii-carousel-foot .ii-nav-arrow { order: -1; }
  .ii-carousel-foot .ii-dotted { display: none; }
  .ii-carousel-foot .ii-dotted:first-of-type { display: block; order: -1; flex: 1 1 auto; }
  .ii-carousel-foot .ii-btn { flex-basis: 100%; }
}

/* -------------------------------------------------------------------------
   13. Alerte mail (2 colonnes : « Votre recherche » beige + « Vos coordonnées » blanc)
   ------------------------------------------------------------------------- */
/* En-tête de page interne (H1 + intro centrés), rythme vertical relevé sur Figma :
   H1 -> intro = 41px, intro -> contenu = 83px. Intro : Figtree Light 20px,
   line-height 1.2, chaque phrase sur une ligne (retour autorisé sous 1100px).
   Classes génériques réutilisables (pages Alerte mail, Biens vendus, etc.). */
.ii-page-head { margin-bottom: 83px; }
.ii-page-intro { margin: 41px auto 0; }
.ii-page-intro p { font-weight: 300; font-size: 20px; line-height: 1.2; color: var(--ii-gray); margin: 0; white-space: nowrap; }
@media (max-width: 1100px) { .ii-page-intro p { white-space: normal; } }

/* Page Notre agence : espace entre le H1 centré et la présentation (photo + texte) */
.agence-intro { margin-top: 56px; }

/* Page Avis clients : H1 centré (espace H1->listing = 69px, maquette) puis grille
   3 colonnes. Gaps maquette : 34px horizontal, 38px vertical. flex + justify-content
   center -> la dernière rangée incomplète est centrée (comme la maquette). */
.avis-h1 { margin-bottom: 69px; }
.avis-grid { display: flex; flex-wrap: wrap; justify-content: center; align-items: stretch; column-gap: 34px; row-gap: 38px; }
.avis-grid > * { flex: 0 0 calc((100% - 68px) / 3); min-width: 0; }
/* align-items: stretch + height auto -> tous les encarts d'une même ligne ont la même hauteur
   (on neutralise le height:100% de .ii-review hérité du contexte grille Bootstrap) */
.avis-grid > .ii-review { height: auto; }
@media (max-width: 991.98px) { .avis-grid > * { flex-basis: calc((100% - 34px) / 2); } }
@media (max-width: 767.98px) { .avis-grid > * { flex-basis: 100%; } }
/* CTA « Voir tous les avis » sous le listing (maquette : ~98px sous les cartes) */
.avis-more { margin-top: 96px; }

/* Page Contact (variante de la section contact partagée) : fond blanc, sans sur-titre.
   Espacements maquette : H1 -> colonne gauche (maps) = 69px ; le formulaire (colonne
   droite) démarre 74px plus bas que la colonne gauche -> H1 -> formulaire = 143px. */
.ii-contact--page { padding-top: 61px; }   /* 61px + 8px (marge basse du H1) = 69px sous le H1 */
/* +74px en plus du gutter Bootstrap (sinon on l'écrase et la row le re-soustrait) */
@media (min-width: 992px) { .ii-contact--page #estimation { margin-top: calc(var(--bs-gutter-y) + 74px); } }

/* align-items: stretch -> la colonne beige prend automatiquement la hauteur de la colonne de droite */
.alerte-form { display: flex; gap: 130px; align-items: stretch; }
.alerte-form__col-title {
  font-family: var(--ii-font-accent); font-style: italic; font-size: 38px;
  color: var(--ii-black); text-align: left; line-height: 1.1; margin: 0 0 63px;
}
/* Colonne gauche : panneau de recherche sur fond beige */
.alerte-form__search { flex: 0 0 506px; background: #f3eff0; padding: 38px 40px; }
.alerte-form__search .search-field { margin-bottom: 30px; }
.alerte-form__search .search-field:last-child { margin-bottom: 0; }
/* Le champ dont le menu déroulant est ouvert passe au-dessus des champs suivants
   (les animations au scroll créent des contextes d'empilement qui le masquaient). */
.alerte-form__search .search-field.dropdown.show,
.alerte-form__search .search-field.dropdown:has(.dropdown-menu.show) { z-index: 50; }
.alerte-form__search .search-menu { z-index: 50; }
/* Colonne droite : coordonnées sur fond blanc.
   padding-top = padding-top du panneau beige -> les 2 titres de colonne sont alignés */
.alerte-form__contact { flex: 1; min-width: 0; padding-top: 38px; }
/* textarea : même trait pointillé que les inputs (comme le formulaire de contact) */
.alerte-form__contact .ii-formline textarea { border-bottom: 1px dashed #585858; }
.alerte-form__btn-row { text-align: right; margin-top: 8px; }

@media (max-width: 991.98px) {
  .alerte-form { flex-direction: column; gap: 48px; }
  .alerte-form__search { flex-basis: auto; width: 100%; }
}

/* -------------------------------------------------------------------------
   14. Classes utilitaires (remplacent d'anciens styles "inline")
   ------------------------------------------------------------------------- */
/* Carrousel d'arrière-plan des héros */
.ii-hero-bg { z-index: 0; }
/* Image plein cadre du carrousel héro */
.ii-hero-img { width: 100%; height: 100%; object-fit: cover; }
/* Photo verticale (colonnes image agence / découvrir) */
.ii-photo-portrait { width: 100%; object-fit: cover; aspect-ratio: 502 / 754; }
/* Filet séparateur au-dessus des stats */
.ii-stats-divider { border: 0; border-top: 1px solid var(--ii-line); opacity: 1; margin: 40px 0 32px; }
/* Section sur fond beige (section contact homepage/agence/détail) */
.ii-section--gray { background: var(--ii-gray-light); }
/* Carte (map) haute */
.ii-map--tall { min-height: 560px; }
/* Variante de titre plus petite (H1 listing) */
.ii-title--sm { font-size: 40px; }
/* Label « Trier » du listing */
.tri-label { font-size: 12px; letter-spacing: .96px; color: var(--ii-gray); }
/* Pied de page : intitulés de colonnes du bloc SEO (blancs) */
.site-footer__col-title--light { color: #fff; }

/* Page détail : intitulés des infos financières */
.detail-fin-title { font-size: 22px; font-weight: 700; }
/* Page détail : blocs coordonnées agence */
.detail-agency-info { font-size: 18px; line-height: 1.5; }
/* Page détail : sur-titre et titre du formulaire de contact */
.detail-form-eyebrow { margin-bottom: 28px; }
.detail-form-title { margin-bottom: 48px; }
/* Page détail : modales galerie / partage */
.gallery-modal-content { background: rgba(0, 0, 0, .95); }
.gallery-carousel { max-width: 1100px; }
.gallery-slide-img { max-height: 75vh; object-fit: contain; }
.gallery-thumb { width: 90px; height: 64px; object-fit: cover; cursor: pointer; opacity: .7; }
.share-modal-content { border: 0; border-radius: 0; }