/* =============================================================================
   SHOW YOUR IMMO — feuille de style de marque
   -----------------------------------------------------------------------------
   Partagée entre toutes les pages générées par syi-build-site.js :
   accueil, catégories (standard/premium/prestige), concept, contact,
   et fiches biens (biens/*.html).

   Palette imposée par la charte :
     fond   : blanc ou #F9F5EC (crème)
     accent : #F15B00 (logo, curseur, détails)
     texte  : noir
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Bodoni+Moda:ital,wght@0,500;0,600;0,700;1,500&family=Inter:wght@400;500;600&family=IBM+Plex+Mono:wght@400;500&display=swap');

:root {
  --cream: #F9F5EC;
  --white: #FFFFFF;
  --ink: #000000;
  --ink-soft: rgba(0, 0, 0, 0.62);
  --ink-faint: rgba(0, 0, 0, 0.38);
  --orange: #F15B00;
  --orange-soft: rgba(241, 91, 0, 0.1);
  --line: rgba(0, 0, 0, 0.12);

  /* Serif à fort contraste, esprit cinématique/luxe (façon Le Collectionist). */
  --display: 'Bodoni Moda', 'Georgia', serif;
  --body: 'Inter', -apple-system, 'Helvetica Neue', Arial, sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, Menlo, monospace;

  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--white);
  color: var(--ink);
  font-family: var(--body);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

@media (hover: hover) and (pointer: fine) {
  body.cursor-ready { cursor: none; }
  body.cursor-ready a,
  body.cursor-ready button { cursor: none; }
}

a { color: inherit; }

::selection { background: var(--orange); color: var(--white); }

/* -----------------------------------------------------------------------
   Curseur personnalisé
   -------------------------------------------------------------------- */
.cursor-dot, .cursor-ring {
  position: fixed; top: 0; left: 0; pointer-events: none; z-index: 9999;
  border-radius: 50%; transform: translate(-50%, -50%); will-change: transform;
}
.cursor-dot { width: 6px; height: 6px; background: var(--orange); }
.cursor-ring {
  width: 34px; height: 34px; border: 1px solid var(--orange);
  transition: width 0.25s var(--ease), height 0.25s var(--ease), opacity 0.25s var(--ease);
}
.cursor-ring.is-active { width: 54px; height: 54px; background: var(--orange-soft); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* -----------------------------------------------------------------------
   Structure générale
   -------------------------------------------------------------------- */
.wrap { max-width: 1160px; margin: 0 auto; padding: 0 32px; }
@media (max-width: 640px) { .wrap { padding: 0 20px; } }

.eyebrow {
  font-family: var(--mono); font-size: 12px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--orange);
}

.section { padding: 96px 0; }
@media (max-width: 640px) { .section { padding: 64px 0; } }
.section--cream { background: var(--cream); }
.section--white { background: var(--white); }

.section-title {
  font-family: var(--display); font-weight: 500;
  font-size: clamp(28px, 4vw, 42px); margin: 10px 0 0;
}

/* -----------------------------------------------------------------------
   Reveal au scroll
   -------------------------------------------------------------------- */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity 0.8s var(--ease), transform 0.8s var(--ease); }
.reveal.is-visible { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } }

/* -----------------------------------------------------------------------
   Barre supérieure (logo + bouton menu)
   -------------------------------------------------------------------- */
.site-nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 700;
  display: flex; align-items: center; justify-content: space-between;
  padding: 24px 32px;
}
.site-nav .nav-logo { display: block; line-height: 0; }
.site-nav .nav-logo img { height: 24px; width: auto; display: block; }

/* Variante utilisée sur les pages avec une photo/vidéo sombre en en-tête
   (fiches biens) : un dégradé assure la lisibilité, sans dépendre d'un
   effet de fusion capricieux selon les navigateurs. */
.site-nav--on-photo {
  padding-bottom: 60px;
  background: linear-gradient(180deg, rgba(0,0,0,0.45) 0%, rgba(0,0,0,0) 100%);
}
.site-nav--on-photo .nav-logo img { filter: brightness(0) invert(1); }

.nav-right { display: flex; align-items: center; gap: 20px; }
.nav-favorites { color: var(--ink); display: flex; }
.site-nav--on-photo .nav-favorites { color: var(--white); }
.nav-favorites:hover { color: var(--orange); }

/* Bouton "trois barres" */
.menu-toggle {
  position: relative;
  width: 40px; height: 40px;
  background: none; border: 0; padding: 0;
  display: flex; align-items: center; justify-content: center;
}
@media (hover: hover) and (pointer: fine) { .menu-toggle { cursor: none; } }
.menu-toggle-bars { position: relative; width: 22px; height: 14px; }
.menu-toggle-bars span {
  position: absolute; left: 0; width: 100%; height: 2px; background: var(--orange);
  transition: transform 0.3s var(--ease), opacity 0.2s var(--ease), top 0.3s var(--ease);
}
.menu-toggle-bars span:nth-child(1) { top: 0; }
.menu-toggle-bars span:nth-child(2) { top: 6px; }
.menu-toggle-bars span:nth-child(3) { top: 12px; }
body.menu-open .menu-toggle-bars span:nth-child(1) { top: 6px; transform: rotate(45deg); }
body.menu-open .menu-toggle-bars span:nth-child(2) { opacity: 0; }
body.menu-open .menu-toggle-bars span:nth-child(3) { top: 6px; transform: rotate(-45deg); }

/* -----------------------------------------------------------------------
   Panneau de menu (glisse depuis la droite)
   -------------------------------------------------------------------- */
.site-menu-backdrop {
  position: fixed; inset: 0; z-index: 800;
  background: rgba(0, 0, 0, 0.4);
  opacity: 0; visibility: hidden;
  transition: opacity 0.4s var(--ease), visibility 0.4s;
}
body.menu-open .site-menu-backdrop { opacity: 1; visibility: visible; }

.site-menu {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 900;
  width: min(440px, 88vw);
  background: var(--cream);
  box-shadow: -30px 0 80px rgba(0, 0, 0, 0.18);
  padding: 110px 44px 44px;
  display: flex; flex-direction: column;
  transform: translateX(100%);
  transition: transform 0.55s var(--ease);
  overflow-y: auto;
}
body.menu-open .site-menu { transform: translateX(0); }

@media (prefers-reduced-motion: reduce) {
  .site-menu, .site-menu-backdrop { transition: none; }
}

.site-menu-close {
  position: absolute; top: 24px; right: 32px;
  width: 40px; height: 40px;
  background: none; border: 0;
  font-family: var(--body); font-size: 26px; font-weight: 300;
  color: var(--ink);
}
@media (hover: hover) and (pointer: fine) { .site-menu-close { cursor: none; } }

.site-menu-inner { display: flex; flex-direction: column; gap: 6px; }

.site-menu-link {
  font-family: var(--display);
  font-size: clamp(24px, 3.4vw, 30px);
  font-weight: 500;
  color: var(--ink);
  text-decoration: none;
  background: none; border: 0; padding: 14px 0;
  text-align: left;
  display: flex; align-items: center; justify-content: space-between;
  border-bottom: 1px solid var(--line);
  transition: color 0.2s var(--ease);
}
.site-menu-link:hover { color: var(--orange); }
.site-menu-link .chevron {
  font-family: var(--body); font-size: 16px; color: var(--ink-faint);
  transition: transform 0.3s var(--ease);
}
.site-menu-group.is-open .site-menu-link .chevron { transform: rotate(180deg); color: var(--orange); }
.auth-logout-btn { width: 100%; cursor: pointer; font-family: var(--display); }

.site-menu-submenu {
  max-height: 0; overflow: hidden;
  transition: max-height 0.4s var(--ease);
}
.site-menu-group.is-open .site-menu-submenu { max-height: 220px; }
.site-menu-submenu a {
  display: flex; flex-direction: column; gap: 1px;
  padding: 12px 0 12px 22px;
  text-decoration: none; color: var(--ink-soft);
  font-family: var(--body); font-size: 15px;
  border-left: 1px solid var(--line);
  margin-left: 4px;
}
.site-menu-submenu a:hover { color: var(--orange); border-left-color: var(--orange); }
.site-menu-submenu a span {
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.04em; color: var(--ink-faint);
}

.site-menu-partner {
  margin-top: 28px;
  font-family: var(--mono); font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--ink-faint);
}

@media (max-width: 480px) {
  .site-menu { padding: 100px 28px 32px; }
}

/* -----------------------------------------------------------------------
   Page d'accueil — hero
   -------------------------------------------------------------------- */
.hero {
  position: relative; min-height: 100vh; display: flex; align-items: center;
  background: var(--cream); overflow: hidden; padding-top: 90px;
}
.hero-content { position: relative; z-index: 2; max-width: 720px; }
.hero-title {
  font-family: var(--display); font-weight: 500;
  font-size: clamp(46px, 8vw, 100px); line-height: 0.98; margin: 18px 0 28px;
}
.hero-title em { font-style: italic; color: var(--orange); }
.hero-sub { font-size: 17px; line-height: 1.7; color: var(--ink-soft); max-width: 46ch; margin: 0 0 36px; }
.hero-cta {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--mono); font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase;
  text-decoration: none; color: var(--ink);
  border-bottom: 1px solid var(--orange); padding-bottom: 4px;
  transition: gap 0.25s var(--ease);
}
.hero-cta:hover { gap: 16px; }
.hero-logo-mark {
  position: absolute; right: -80px; bottom: -60px; width: 46vw; max-width: 620px;
  opacity: 0.9; pointer-events: none; z-index: 1;
}
@media (max-width: 860px) { .hero-logo-mark { display: none; } }
.hero-content > .reveal:nth-child(1) { transition-delay: 0.05s; }
.hero-content > .reveal:nth-child(2) { transition-delay: 0.15s; }
.hero-content > .reveal:nth-child(3) { transition-delay: 0.28s; }
.hero-content > .reveal:nth-child(4) { transition-delay: 0.4s; }

.manifesto { text-align: center; }
.manifesto-quote {
  font-family: var(--display); font-style: italic; font-size: clamp(18px, 3.2vw, 34px);
  line-height: 1.5; max-width: 46ch; margin: 0 auto;
}

/* -----------------------------------------------------------------------
   En-tête simple (catégories, concept, contact)
   -------------------------------------------------------------------- */
.page-header { padding: 150px 0 50px; background: var(--cream); position: relative; overflow: hidden; }
.page-header p.reveal { color: var(--ink-soft); font-size: 16px; line-height: 1.7; max-width: 60ch; margin: 14px 0 0; }
.page-header .wrap { position: relative; z-index: 1; }

/* --- Motif décoratif animé (tourbillon de marque), en fond plein cadre de
   l'en-tête de chaque page — très adouci (faible opacité + dégradé) pour
   que le titre reste parfaitement lisible par-dessus. --- */
.decorative-swirl {
  position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, rgba(0,0,0,0.6) 65%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 0%, rgba(0,0,0,0.6) 65%, transparent 100%);
}
.decorative-swirl img {
  position: absolute; top: 50%; left: 50%; width: 130%; height: 160%;
  min-width: 900px; object-fit: cover; opacity: 0.1;
  transform: translate(-50%, -50%) scale(1.05) rotate(-1.5deg);
  animation: swirlWave 26s ease-in-out infinite;
}
@keyframes swirlWave {
  0%, 100% { transform: translate(-50%, -50%) scale(1.05) rotate(-1.5deg); }
  50% { transform: translate(-48%, -53%) scale(1.14) rotate(1.5deg); }
}
@media (prefers-reduced-motion: reduce) { .decorative-swirl img { animation: none; } }

/* -----------------------------------------------------------------------
   Grille de biens (accueil + pages de catégories)
   -------------------------------------------------------------------- */
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 28px; }
.card { text-decoration: none; color: var(--ink); display: block; }
.card-media { position: relative; aspect-ratio: 4/3; overflow: hidden; background: var(--line); }
.card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--ease); }
.card:hover .card-media img { transform: scale(1.06); }

/* --- Cœur de favori (cartes + fiche bien), voir INSTALLATION-COMPTES.md --- */
.favorite-heart {
  position: absolute; top: 12px; right: 12px; z-index: 2;
  width: 34px; height: 34px; border-radius: 50%; border: 0;
  background: rgba(0,0,0,0.35); color: #fff;
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  transition: background 0.2s var(--ease), transform 0.15s var(--ease);
}
.favorite-heart:hover { background: rgba(0,0,0,0.55); transform: scale(1.06); }
.favorite-heart svg path { fill: none; stroke: currentColor; stroke-width: 1.6; }
.favorite-heart.is-active { background: var(--orange); }
.favorite-heart.is-active svg path { fill: currentColor; stroke: currentColor; }

.favorite-heart--booking {
  position: static; width: 32px; height: 32px; margin-left: 10px;
  background: none; color: var(--ink-faint); vertical-align: middle;
}
.favorite-heart--booking:hover { background: none; color: var(--orange); }
.favorite-heart--booking.is-active { background: none; color: var(--orange); }
.card-zone { font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--orange); }
.card-title { font-family: var(--display); font-size: 19px; margin: 8px 0 6px; }
.card-meta { font-size: 13px; color: var(--ink-faint); margin-bottom: 6px; }
.card-price { font-family: var(--mono); font-size: 14px; }
.card-price span { color: var(--ink-faint); }
.card-info { padding-top: 14px; }

/* --- Bascule vue grille / vue liste (pages de biens) --- */
.view-toggle { display: inline-flex; gap: 4px; margin-left: auto; }
.view-toggle-btn {
  display: flex; align-items: center; justify-content: center; width: 38px; height: 38px;
  background: var(--cream); border: 1px solid var(--line); color: var(--ink-faint); padding: 0;
  transition: color 0.2s var(--ease), border-color 0.2s var(--ease);
}
@media (hover: hover) and (pointer: fine) { .view-toggle-btn { cursor: none; } }
.view-toggle-btn svg { fill: none; stroke: currentColor; stroke-width: 1.6; }
.view-toggle-btn.is-active { color: var(--orange); border-color: var(--orange); }

.grid--list { grid-template-columns: 1fr !important; gap: 18px; }
.grid--list .card { display: flex; flex-direction: row; gap: 24px; }
.grid--list .card-media { width: 280px; flex-shrink: 0; aspect-ratio: 4/3; }
.grid--list .card-info { padding-top: 0; display: flex; flex-direction: column; justify-content: center; }
@media (max-width: 640px) {
  .grid--list .card { flex-direction: column; }
  .grid--list .card-media { width: 100%; }
}

.empty-state { padding: 60px 0; text-align: center; color: var(--ink-faint); font-size: 15px; line-height: 1.7; }
.empty-state code { font-family: var(--mono); background: var(--white); padding: 2px 6px; border: 1px solid var(--line); }

/* -----------------------------------------------------------------------
   Carte (Leaflet + OpenStreetMap) avec marqueur de prix — fiche bien et
   accueil. Le fond de carte reste désaturé pour rester dans la charte ;
   les marqueurs de prix, eux, restent en couleur pleine.
   -------------------------------------------------------------------- */
.map-frame { width: 100%; height: 320px; border: 1px solid var(--line); background: var(--cream); }
.map-frame .leaflet-tile-pane { filter: grayscale(0.4) contrast(1.05); }
.map-frame .leaflet-div-icon.price-marker { background: transparent; border: none; }
.map-frame .leaflet-popup-content-wrapper { border-radius: 4px; }
.map-frame .leaflet-popup-content { font-family: var(--body); font-size: 13px; line-height: 1.5; }
.map-frame .leaflet-popup-content a { color: var(--orange); }

/* --- Pages de catégorie (standard/premium/prestige) : liste + carte
   collée sur le côté, qui reste visible pendant le défilement des biens.
   En Flexbox (et non Grid) car un enfant sticky reste coincé dans la
   hauteur de sa propre "cellule" en Grid dès qu'on empile les éléments
   sur une seule colonne (mobile) — en Flexbox la carte garde bien toute
   la hauteur cumulée du conteneur comme zone de collage, sur les deux
   mises en page. */
.category-layout { display: flex; align-items: flex-start; gap: 40px; }
.category-layout-main { min-width: 0; flex: 1 1 auto; }
.category-layout-map { position: sticky; top: 104px; flex: 0 0 420px; }
.map-frame--category { height: calc(100vh - 160px); min-height: 420px; max-height: 720px; }
/* Tablette : on garde la carte collée à droite comme en desktop, juste
   un peu plus étroite pour laisser de la place à la liste. */
@media (max-width: 980px) and (min-width: 641px) {
  .category-layout-map { flex: 0 0 320px; }
}
/* Téléphone en largeur (ou grand téléphone) : encore assez de place pour
   garder la carte collée à droite, en bande plus étroite. */
@media (max-width: 640px) and (min-width: 480px) {
  .category-layout-map { flex: 0 0 200px; top: 88px; }
  .map-frame--category { height: calc(100vh - 120px); min-height: 320px; max-height: 520px; }
}
/* Petit téléphone en portrait : plus assez de place pour un côté-à-côte
   lisible, la carte passe au-dessus de la liste en position normale (pas
   collée) — un bandeau sticky sur toute la hauteur du scroll fait
   bizarre sur un si petit écran. */
@media (max-width: 479px) {
  .category-layout { flex-direction: column; gap: 24px; }
  .category-layout-map { position: static; order: -1; flex: 0 0 auto; width: 100%; margin-top: 0; }
  .map-frame--category { height: 280px; max-height: none; }
}

/* Survol d'une case -> le marqueur correspondant ressort sur la carte. */
.price-pin.is-active {
  transform: translate(-50%, -100%) scale(1.28);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.35);
  z-index: 1000;
}

/* --- Aperçu détaillé au clic sur un marqueur (photo, stats, prix, collection) --- */
.map-frame--category .leaflet-popup-content-wrapper { padding: 0; overflow: hidden; }
.map-frame--category .leaflet-popup-content { margin: 0; width: 260px !important; }
.map-popup-img { width: 100%; height: 150px; object-fit: cover; display: block; }
.map-popup-body { padding: 16px 18px; }
.map-popup-name {
  font-family: var(--mono); font-size: 12px; letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--ink); margin-bottom: 6px;
}
.map-popup-stats { font-size: 13px; color: var(--ink-soft); margin-bottom: 8px; }
.map-popup-price { font-family: var(--display); font-weight: 500; font-size: 18px; margin-bottom: 10px; }
.map-popup-tier {
  display: flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.05em; text-transform: uppercase; color: var(--ink-faint);
  padding-top: 10px; border-top: 1px solid var(--line); margin-bottom: 10px;
}
.map-popup-link {
  display: inline-block; font-family: var(--mono); font-size: 11px; letter-spacing: 0.05em;
  text-transform: uppercase; color: var(--orange) !important; text-decoration: none;
  border-bottom: 1px solid var(--orange);
}

/* --- Pastille de couleur par catégorie (légende carte accueil + aperçu
   détaillé des marqueurs sur les pages de biens) --- */
.category-legend-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; align-self: center; }
.category-legend-dot--standard { background: #F2854A; }
.category-legend-dot--premium { background: #D94E00; }
.category-legend-dot--prestige { background: #4A2E1A; }

/* -----------------------------------------------------------------------
   Pages simples (concept, contact) — contenu éditorial générique
   -------------------------------------------------------------------- */
.simple-page-body { padding: 20px 0 20px; max-width: 62ch; }
.simple-page-body p { font-size: 17px; line-height: 1.8; color: var(--ink-soft); }
.placeholder-note {
  margin-top: 32px; padding: 16px 20px;
  border: 1px dashed var(--line);
  font-family: var(--mono); font-size: 12px; color: var(--ink-faint); line-height: 1.6;
}

/* --- Page contact --- */
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; max-width: 860px; }
@media (max-width: 700px) { .contact-grid { grid-template-columns: 1fr; gap: 40px; } }
.contact-list { margin-bottom: 20px; }
.contact-list a, .contact-list li { font-size: 16px; }
.contact-social { margin-bottom: 24px; }
a.cta-link {
  display: inline-flex; align-items: center; gap: 10px; margin-top: 28px;
  font-family: var(--mono); font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase;
  text-decoration: none; color: var(--white); background: var(--orange);
  padding: 16px 24px; transition: opacity 0.2s var(--ease);
}
a.cta-link:hover { opacity: 0.85; }

/* -----------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------- */
.site-footer-full { border-top: 1px solid var(--line); background: var(--cream); }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.footer-newsletter-link {
  background: none; border: 0; padding: 0; cursor: pointer;
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.04em; color: var(--ink-faint);
  transition: color 0.2s var(--ease);
}
.footer-newsletter-link:hover { color: var(--orange); }

/* --- Popup newsletter (voir INSTALLATION-NEWSLETTER.md) : carte en bas
   à droite, apparaît 10s après l'arrivée sur le site. --- */
.newsletter-popup {
  position: fixed; right: 20px; bottom: 20px; z-index: 900; width: min(340px, calc(100vw - 40px));
  background: var(--white); border: 1px solid var(--line); border-radius: 8px;
  padding: 24px 24px 22px; box-shadow: 0 20px 48px rgba(0, 0, 0, 0.16);
  animation: newsletter-popup-in 0.4s var(--ease);
}
.newsletter-popup[hidden] { display: none; }
@keyframes newsletter-popup-in {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: translateY(0); }
}
.newsletter-popup-close {
  position: absolute; top: 10px; right: 12px; background: none; border: 0;
  font-size: 20px; line-height: 1; color: var(--ink-faint); cursor: pointer;
}
.newsletter-popup-close:hover { color: var(--orange); }
.newsletter-popup-text p { font-size: 13px; line-height: 1.6; color: var(--ink-soft); margin: 8px 0 16px; }
.newsletter-popup-form { display: flex; flex-direction: column; gap: 10px; }
.newsletter-popup-form input[type="email"] {
  font-family: var(--body); font-size: 14px; color: var(--ink);
  background: var(--cream); border: 1px solid var(--line); padding: 11px 14px; outline: none;
  transition: border-color 0.2s var(--ease);
}
.newsletter-popup-form input[type="email"]:focus { border-color: var(--orange); }
.newsletter-popup-form button[type="submit"] {
  font-family: var(--mono); font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase;
  color: #fff; background: var(--orange); border: 0; padding: 12px; cursor: pointer;
  transition: opacity 0.2s var(--ease);
}
.newsletter-popup-form button[type="submit"]:hover { opacity: 0.85; }
.site-footer-grid {
  display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 40px;
  padding-top: 64px; padding-bottom: 40px;
}
@media (max-width: 860px) { .site-footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .site-footer-grid { grid-template-columns: 1fr; } }
.footer-brand img { height: 22px; width: auto; margin-bottom: 16px; }
.footer-tagline { font-size: 14px; line-height: 1.6; color: var(--ink-soft); max-width: 32ch; margin: 0 0 18px; }
.footer-social { display: flex; gap: 18px; flex-wrap: wrap; }
.footer-social a {
  font-family: var(--mono); font-size: 12px; letter-spacing: 0.04em; text-transform: uppercase;
  text-decoration: none; color: var(--ink); border-bottom: 1px solid var(--line);
  padding-bottom: 2px; transition: color 0.2s var(--ease), border-color 0.2s var(--ease);
}
.footer-social a:hover { color: var(--orange); border-color: var(--orange); }
.footer-heading {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--orange); margin-bottom: 16px;
}
.footer-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.footer-list a { text-decoration: none; color: var(--ink); font-size: 14px; transition: color 0.2s var(--ease); }
.footer-list a:hover { color: var(--orange); }
.footer-list li { font-size: 14px; color: var(--ink-soft); }
.footer-cta-text { font-size: 14px; line-height: 1.6; color: var(--ink-soft); margin: 0 0 16px; max-width: 30ch; }
.footer-bottom {
  border-top: 1px solid var(--line); padding: 20px 0;
  display: flex; align-items: center; justify-content: center; gap: 24px; flex-wrap: wrap; text-align: center;
}
.footer-bottom span { font-family: var(--mono); font-size: 11px; letter-spacing: 0.04em; color: var(--ink-faint); }
.footer-legal-note { font-style: italic; }
.footer-legal-links { display: inline-flex; gap: 16px; }
.footer-legal-links a { color: var(--ink-faint); text-decoration: none; transition: color 0.2s var(--ease); }
.footer-legal-links a:hover { color: var(--orange); }

@media (max-width: 560px) {
  .site-footer-grid { text-align: center; }
  .footer-col { display: flex; flex-direction: column; align-items: center; }
  .footer-social { justify-content: center; }
}

/* --- Marqueurs de la carte --- */
@keyframes pinDrop {
  from { opacity: 0; transform: translate(-50%, -160%) scale(0.5); }
  to { opacity: 1; transform: translate(-50%, -100%) scale(1); }
}
@keyframes pinPulse {
  0%, 100% { box-shadow: 0 4px 10px rgba(0,0,0,0.25), 0 0 0 0 rgba(241,91,0,0.45); }
  50% { box-shadow: 0 4px 10px rgba(0,0,0,0.25), 0 0 0 9px rgba(241,91,0,0); }
}
.price-pin {
  display: inline-block; transform: translate(-50%, -100%); white-space: nowrap;
  background: #F2854A; color: #fff; font-family: var(--mono); font-size: 11px;
  padding: 7px 14px; border-radius: 999px; position: relative;
  animation-name: pinDrop, pinPulse;
  animation-duration: 0.5s, 2.4s;
  animation-timing-function: var(--ease), ease-in-out;
  animation-iteration-count: 1, infinite;
  animation-fill-mode: backwards, none;
  transition: transform 0.2s var(--ease);
}
.leaflet-marker-icon:hover .price-pin { transform: translate(-50%, -100%) scale(1.12); }
.price-pin::after {
  content: ""; position: absolute; bottom: -5px; left: 50%; transform: translateX(-50%);
  border-width: 5px 5px 0 5px; border-style: solid; border-color: #F2854A transparent transparent transparent;
}
.price-marker--premium .price-pin { background: #D94E00; }
.price-marker--premium .price-pin::after { border-top-color: #D94E00; }
.price-marker--prestige .price-pin { background: #4A2E1A; }
.price-marker--prestige .price-pin::after { border-top-color: #4A2E1A; }

/* --- Filtres (pages de catégories) --- */
.filters {
  display: flex; flex-wrap: wrap; align-items: flex-end; gap: 24px;
  padding: 28px; margin-bottom: 40px;
  background: var(--white); border: 1px solid var(--line);
}
.filter-field { display: flex; flex-direction: column; gap: 8px; }
.filter-field label {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--ink-faint);
}
.filter-field input, .filter-field select {
  font-family: var(--body); font-size: 15px; color: var(--ink);
  background: var(--cream); border: 1px solid var(--line);
  padding: 10px 12px; width: 130px; outline: none;
  transition: border-color 0.2s var(--ease);
}
.filter-field select { width: 180px; cursor: pointer; }
.filter-field input:focus, .filter-field select:focus { border-color: var(--orange); }
.filter-reset {
  font-family: var(--mono); font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase;
  background: none; border: 1px solid var(--line); color: var(--ink);
  padding: 11px 18px; transition: border-color 0.2s var(--ease), color 0.2s var(--ease);
}
.filter-reset:hover { border-color: var(--orange); color: var(--orange); }
.filter-empty { text-align: center; padding: 48px 0; color: var(--ink-faint); font-size: 15px; line-height: 1.7; }
.filter-empty .filter-reset { margin-top: 12px; }
.card.is-filtered-out { display: none; }

/* --- Recherche de disponibilité (accueil) : vidéo plein cadre en fond,
   inspirée des sites de conciergerie de luxe (Le Collectionist). --- */
.availability--hero {
  position: relative; min-height: 720px; display: flex; flex-direction: column;
  justify-content: center; overflow: hidden; padding: 140px 0 56px;
}
.availability-hero-media { position: absolute; inset: 0; z-index: 0; overflow: hidden; background: #000; }
.availability-hero-media iframe {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 100%; height: 100%; min-width: 177.78vh; min-height: 56.25vw;
  pointer-events: none;
}
.availability-hero-overlay {
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(0,0,0,0.4) 0%, rgba(0,0,0,0.48) 55%, rgba(0,0,0,0.72) 100%);
}
.availability-hero-content { position: relative; z-index: 2; text-align: center; margin-bottom: 44px; }
.availability-hero-title {
  font-family: var(--display); font-weight: 500; color: #fff;
  font-size: clamp(34px, 5.5vw, 60px); line-height: 1.08; margin: 16px 0 18px;
}
.hero-badges {
  list-style: none; margin: -10px 0 0; padding: 0;
  display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 12px 20px;
  font-family: var(--mono); font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase;
  color: rgba(255, 255, 255, 0.9);
}
.hero-badges li { position: relative; }
.hero-badges li + li { padding-left: 22px; }
.hero-badges li + li::before {
  content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  width: 4px; height: 4px; border-radius: 50%; background: var(--orange);
}
@media (max-width: 560px) {
  .hero-badges { flex-wrap: nowrap; justify-content: flex-start; gap: 6px; font-size: 8.5px; overflow-x: auto; padding: 0 4px; }
  .hero-badges li { white-space: nowrap; }
  .hero-badges li + li { padding-left: 10px; }
}
.availability-search {
  position: relative; z-index: 2;
  display: flex; flex-wrap: wrap; align-items: flex-end; gap: 24px;
  padding: 28px; background: var(--cream); border: 1px solid var(--line);
}
.availability-search--floating { box-shadow: 0 30px 60px rgba(0, 0, 0, 0.3); border-radius: 4px; }
.availability-submit {
  font-family: var(--mono); font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase;
  background: var(--orange); color: var(--white); border: 1px solid var(--orange);
  padding: 12px 26px; height: fit-content; transition: opacity 0.2s var(--ease);
}
@media (hover: hover) and (pointer: fine) { .availability-submit { cursor: none; } }
.availability-submit:hover { opacity: 0.88; }
.availability-error { color: #fff; background: rgba(0, 0, 0, 0.6); font-size: 14px; margin: 16px 0 0; padding: 10px 16px; position: relative; z-index: 2; }
@media (max-width: 640px) {
  .availability-search { padding: 22px; gap: 18px; }
  .availability--hero { min-height: 560px; padding: 120px 0 40px; }
}

/* --- Notice de recherche par dates (pages "Tous les biens" / catégories) --- */
.availability-notice {
  font-family: var(--mono); font-size: 12px; letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--orange); margin: 0 0 20px;
}

/* --- Pages simples (concept, proprietaires) --- */
.lead { font-size: 19px; line-height: 1.7; color: var(--ink-soft); max-width: 62ch; margin-top: 16px; }

/* --- Section "rêve" (accueil) : photo plein cadre du bien le plus
   prestigieux, citation évocatrice en surimpression. --- */
.dream-section {
  position: relative; min-height: 640px; display: flex; align-items: center; justify-content: center;
  background-size: cover; background-position: center; padding: 100px 0; overflow: hidden;
}
.dream-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.32) 0%, rgba(0,0,0,0.58) 100%);
}
.dream-content { position: relative; z-index: 1; text-align: center; max-width: 760px; margin: 0 auto; }
.dream-content .eyebrow { color: rgba(255,255,255,0.85); }
.dream-quote {
  font-family: var(--display); font-style: italic; font-weight: 500; color: #fff;
  font-size: clamp(24px, 3.6vw, 40px); line-height: 1.45; margin: 18px 0 20px;
}
.dream-sub { font-size: 17px; color: rgba(255,255,255,0.82); margin: 0 0 32px; }
.hero-cta--light { color: #fff; }
@media (max-width: 640px) { .dream-section { min-height: 480px; padding: 72px 0; } }

/* --- Section "Ce qui nous différencie" (accueil) : colonnes numérotées,
   sans carte ni icône, pour trancher visuellement avec les cartes à icône. --- */
.differentiator-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; }
@media (max-width: 980px) { .differentiator-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .differentiator-grid { grid-template-columns: 1fr; } }
.differentiator-number {
  display: block; font-family: var(--display); font-weight: 500; font-size: 36px;
  color: var(--orange); line-height: 1; margin-bottom: 16px;
}
.differentiator-card h3 { font-family: var(--display); font-weight: 500; font-size: 20px; margin: 0 0 10px; }
.differentiator-card p { font-size: 14px; line-height: 1.65; color: var(--ink-soft); margin: 0; }

/* Chaque carte entre différemment (pas toujours le même mouvement),
   déclenché par le .reveal du conteneur .differentiator-grid. Une fois
   visible, chaque carte bouge aussi différemment au survol. */
.differentiator-card {
  padding: 28px 24px; background: var(--cream); border: 1px solid var(--line); border-radius: 12px;
  opacity: 0;
  transition: opacity 0.7s var(--ease), transform 0.5s var(--ease), box-shadow 0.35s var(--ease), border-color 0.35s var(--ease);
}
.differentiator-grid.is-visible .differentiator-card { opacity: 1; transform: none; }
.differentiator-card:nth-child(1) { transform: translateY(30px); }
.differentiator-card:nth-child(2) { transform: scale(0.82); transition-delay: 0.12s; }
.differentiator-card:nth-child(3) { transform: translateX(-30px) rotate(-3deg); transition-delay: 0.24s; }
.differentiator-card:nth-child(4) { transform: translateX(30px) rotate(3deg); transition-delay: 0.36s; }

.differentiator-grid.is-visible .differentiator-card:hover {
  box-shadow: 0 20px 36px rgba(0, 0, 0, 0.08); border-color: rgba(241, 91, 0, 0.35); transition-delay: 0s;
}
.differentiator-grid.is-visible .differentiator-card:nth-child(1):hover { transform: translateY(-8px); }
.differentiator-grid.is-visible .differentiator-card:nth-child(2):hover { transform: scale(1.05); }
.differentiator-grid.is-visible .differentiator-card:nth-child(3):hover { transform: translateY(-6px); }
.differentiator-grid.is-visible .differentiator-card:nth-child(4):hover { transform: translateY(-6px); }

@media (prefers-reduced-motion: reduce) {
  .differentiator-card { transition: none; opacity: 1; transform: none; }
  .differentiator-grid.is-visible .differentiator-card:hover { transform: none; }
}

/* --- Cartes à icône (accueil "Louez plus, gérez moins", concept, proprietaires) --- */
.advantage-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
@media (max-width: 980px) { .advantage-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .advantage-grid { grid-template-columns: 1fr; } }
.advantage-grid--3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 720px) { .advantage-grid--3 { grid-template-columns: 1fr; } }

/* --- Page concept — relie visuellement l'intro et les 3 étapes Louez plus /
   Gagnez plus / Gérez moins par une flèche descendante. --- */
.step-connector {
  text-align: center; margin-top: 40px; font-family: var(--display); font-size: 26px; color: var(--orange);
}
.advantage-card {
  position: relative; padding: 32px 26px; background: var(--cream); border: 1px solid var(--line);
  border-radius: 10px; transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease), border-color 0.35s var(--ease);
}
.advantage-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 24px 40px rgba(0, 0, 0, 0.1);
  border-color: rgba(241, 91, 0, 0.35);
}
@media (prefers-reduced-motion: reduce) { .advantage-card { transition: none; } .advantage-card:hover { transform: none; } }
.advantage-icon {
  width: 52px; height: 52px; border-radius: 50%; background: var(--orange-soft);
  display: flex; align-items: center; justify-content: center; margin-bottom: 22px;
  transition: background 0.3s var(--ease);
}
.advantage-card:hover .advantage-icon { background: var(--orange); }
.advantage-icon svg {
  width: 24px; height: 24px; fill: none; stroke: var(--orange); stroke-width: 1.6;
  transition: stroke 0.3s var(--ease);
}
.advantage-card:hover .advantage-icon svg { stroke: var(--white); }
.advantage-card h3 { font-family: var(--display); font-weight: 500; font-size: 21px; margin: 0 0 10px; }
.advantage-card p { font-size: 14px; line-height: 1.6; color: var(--ink-soft); margin: 0; }

/* --- Galerie cinématique décorative (accueil, concept…) : une seule villa
   à la fois, plein écran en largeur, bandeau fin en hauteur, aucun texte
   hormis une petite légende nom + lieu. --- */
.gallery-cinematic {
  position: relative; width: 100vw; margin-left: calc(50% - 50vw);
  height: 46vh; min-height: 320px; max-height: 560px; overflow: hidden; background: #000;
}
.gallery-cinematic-slide {
  position: absolute; inset: 0; margin: 0; opacity: 0; transition: opacity 1.2s var(--ease);
  pointer-events: none; display: block; text-decoration: none;
}
.gallery-cinematic-slide.is-active { opacity: 1; pointer-events: auto; }
.gallery-cinematic-slide img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gallery-cinematic-slide::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0) 60%, rgba(0,0,0,0.5) 100%);
}
.gallery-cinematic-caption {
  position: absolute; left: 32px; bottom: 20px; z-index: 2; color: #fff;
  display: flex; flex-direction: column; gap: 2px;
}
.gallery-cinematic-name { font-family: var(--display); font-size: 15px; }
.gallery-cinematic-place {
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.08em;
  text-transform: uppercase; opacity: 0.75;
}
.gallery-cinematic-arrow {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 3;
  background: none; border: none; color: #fff; opacity: 0.4; cursor: pointer;
  font-size: 32px; line-height: 1; padding: 20px; transition: opacity 0.25s var(--ease);
}
.gallery-cinematic-arrow:hover { opacity: 0.8; }
.gallery-cinematic-arrow--left { left: 4px; }
.gallery-cinematic-arrow--right { right: 4px; }
@media (max-width: 640px) {
  .gallery-cinematic { height: 34vh; min-height: 240px; }
  .gallery-cinematic-arrow { font-size: 24px; padding: 12px; }
  .gallery-cinematic-caption { left: 20px; bottom: 14px; }
}

/* --- Page concept — étapes "Le constat / La méthode / Le résultat", reliées
   par des flèches pour montrer la logique de progression --- */
.process-grid { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; align-items: stretch; gap: 20px; }
.process-grid .advantage-card { display: flex; flex-direction: column; }
.process-arrow { align-self: center; font-family: var(--display); font-size: 28px; color: var(--orange); }
@media (max-width: 900px) {
  .process-grid { grid-template-columns: 1fr; }
  .process-arrow { transform: rotate(90deg); margin: -4px 0; }
}

/* --- Page proprietaires — parcours en 6 étapes d'une prestation --- */
.journey-grid {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr auto 1fr auto 1fr;
  align-items: stretch;
  gap: 8px;
}
@media (max-width: 1100px) {
  .journey-grid { grid-template-columns: 1fr; gap: 20px; }
}
.journey-step {
  padding: 26px 16px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 10px;
  text-align: center;
  transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease), border-color 0.35s var(--ease);
}
.journey-step:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 30px rgba(0, 0, 0, 0.08);
  border-color: rgba(241, 91, 0, 0.35);
}
@media (prefers-reduced-motion: reduce) { .journey-step { transition: none; } .journey-step:hover { transform: none; } }
.journey-icon {
  width: 44px; height: 44px; border-radius: 50%; background: var(--orange-soft);
  display: flex; align-items: center; justify-content: center; margin: 0 auto 16px;
  transition: background 0.3s var(--ease), transform 0.3s var(--ease);
}
.journey-step:hover .journey-icon { background: var(--orange); transform: scale(1.08); }
.journey-icon svg {
  width: 20px; height: 20px; fill: none; stroke: var(--orange); stroke-width: 1.6;
  transition: stroke 0.3s var(--ease);
}
.journey-step:hover .journey-icon svg { stroke: var(--white); }
.journey-step h3 { font-family: var(--display); font-weight: 500; font-size: 16px; margin: 0 0 6px; }
.journey-step p {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.03em; text-transform: uppercase;
  color: var(--orange); line-height: 1.5; margin: 0;
}
.journey-arrow {
  align-self: center; justify-self: center; width: max-content;
  font-family: var(--display); font-size: 20px; color: var(--orange);
  animation: journeyFlow 2s ease-in-out infinite;
}
@keyframes journeyFlow {
  0%, 100% { transform: translateX(0); opacity: 0.5; }
  50% { transform: translateX(5px); opacity: 1; }
}
@media (max-width: 1100px) {
  .journey-arrow { animation-name: journeyFlowVertical; }
}
@keyframes journeyFlowVertical {
  0%, 100% { transform: translateY(0) rotate(90deg); opacity: 0.5; }
  50% { transform: translateY(5px) rotate(90deg); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) { .journey-arrow { animation: none; } }

/* --- Page offres — cartes tarifaires --- */
.pricing-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; align-items: stretch; }
@media (max-width: 900px) { .pricing-grid { grid-template-columns: 1fr; max-width: 420px; margin: 0 auto; } }
.pricing-card {
  display: flex; flex-direction: column;
  background: var(--cream); border: 1px solid var(--line); border-radius: 14px;
  padding: 36px 30px;
  transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease), border-color 0.35s var(--ease);
}
.pricing-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 24px 44px rgba(0, 0, 0, 0.1);
  border-color: rgba(241, 91, 0, 0.35);
}
@media (prefers-reduced-motion: reduce) { .pricing-card { transition: none; } .pricing-card:hover { transform: none; } }
.pricing-name {
  font-family: var(--mono); font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--orange); margin-bottom: 14px;
}
.pricing-price { font-family: var(--display); font-size: 38px; font-weight: 500; color: var(--ink); margin-bottom: 26px; }
.pricing-price span {
  font-family: var(--mono); font-size: 12px; font-weight: 400; color: var(--ink-faint);
  text-transform: uppercase; letter-spacing: 0.04em; margin-left: 8px;
}
.pricing-features { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; flex: 1; }
.pricing-features li { font-size: 14px; line-height: 1.4; color: var(--ink-soft); display: flex; align-items: flex-start; gap: 10px; }
.pricing-check {
  flex-shrink: 0; width: 18px; height: 18px; border-radius: 50%; margin-top: 1px;
  display: flex; align-items: center; justify-content: center; font-size: 10px;
}
.pricing-features li.is-yes .pricing-check { background: var(--orange-soft); color: var(--orange); }
.pricing-features li.is-no .pricing-check { background: rgba(0, 0, 0, 0.05); color: var(--ink-faint); }
.pricing-features li.is-no { color: var(--ink-faint); }
.pricing-terms {
  text-align: center; margin: 44px auto 0; padding: 26px; max-width: 560px;
  background: var(--white); border: 1px dashed var(--line); border-radius: 10px;
}
.pricing-terms p { margin: 0 0 8px; font-size: 14px; line-height: 1.6; color: var(--ink-soft); }
.pricing-terms p:last-child { margin-bottom: 0; }
.pricing-terms strong { font-family: var(--mono); color: var(--orange); }
.pricing-terms p.pricing-terms-highlight {
  font-family: var(--display); font-weight: 500; font-size: 20px; line-height: 1.4; color: var(--orange);
}
/* --- Section "Simulez vos gains" (proprietaires.html) --- */
.simulator-content { text-align: center; max-width: 640px; margin: 0 auto; }
.simulator-card {
  background: var(--white); border: 1px solid var(--line); border-radius: 16px;
  padding: 56px 40px; margin: 0 auto; max-width: 560px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.06);
}
.simulator-stat { display: flex; align-items: baseline; justify-content: center; gap: 4px; }
.simulator-stat-value {
  font-family: var(--display); font-weight: 500; font-size: clamp(64px, 10vw, 110px);
  color: var(--orange); line-height: 1;
}
.simulator-stat-unit {
  font-family: var(--display); font-weight: 500; font-size: clamp(28px, 4vw, 44px); color: var(--orange);
}
.simulator-stat-label {
  font-family: var(--mono); font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--ink-faint); margin: 10px 0 0;
}
.simulator-lede { font-size: 17px; line-height: 1.7; color: var(--ink-soft); margin: 28px 0 32px; }
.simulator-lede strong { color: var(--ink); font-weight: 600; }
@media (max-width: 640px) { .simulator-card { padding: 40px 24px; } }

/* --- Étoiles de notation (accueil + page avis) : deux rangées de 5
   étoiles superposées, celle du dessus tronquée à --rating / 5. --- */
.reviews-stars { position: relative; display: inline-block; font-size: 18px; line-height: 1; letter-spacing: 3px; }
.reviews-stars-bg { color: var(--line); }
.reviews-stars-fg {
  position: absolute; top: 0; left: 0; color: var(--orange); overflow: hidden; white-space: nowrap;
  width: calc(var(--rating) / 5 * 100%);
}

/* --- Carte "avis" (accueil + page Devenir partenaire) --- */
.reviews-card {
  display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 48px;
  text-decoration: none; color: var(--ink);
  border: 1px solid var(--line); border-radius: 12px; padding: 48px;
  transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease), border-color 0.35s var(--ease);
}
.reviews-card:hover {
  transform: translateY(-4px); box-shadow: 0 24px 44px rgba(0, 0, 0, 0.1); border-color: rgba(241, 91, 0, 0.35);
}
@media (prefers-reduced-motion: reduce) { .reviews-card { transition: none; } .reviews-card:hover { transform: none; } }
@media (max-width: 760px) { .reviews-card { grid-template-columns: 1fr; text-align: center; gap: 28px; padding: 36px 28px; } }
.reviews-score { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.review-canvas { width: 100%; max-width: 220px; height: 130px; display: block; }
.reviews-score-sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.reviews-score-value { font-family: var(--mono); font-size: 13px; letter-spacing: 0.04em; color: var(--ink-faint); }
.reviews-lede { font-size: 16px; line-height: 1.7; color: var(--ink-soft); max-width: 46ch; margin: 6px 0 14px; }
.reviews-count { font-family: var(--mono); font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink); display: inline-flex; align-items: center; gap: 8px; }
.reviews-arrow { color: var(--orange); transition: transform 0.3s var(--ease); }
.reviews-card:hover .reviews-arrow { transform: translate(4px, -4px); }

/* --- Page avis (avis.html) --- */
.avis-filters { margin-bottom: 32px; }
.avis-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); }
@media (max-width: 860px) { .avis-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .avis-grid { grid-template-columns: 1fr; } }
.avis-card { background: var(--white); padding: 36px 32px; }
.avis-card .reviews-stars { margin-bottom: 18px; }
.avis-quote { font-family: var(--display); font-size: 18px; font-style: italic; line-height: 1.5; margin: 0 0 20px; }
.avis-author { font-family: var(--mono); font-size: 12px; letter-spacing: 0.04em; color: var(--ink); }
.avis-country { font-family: var(--mono); font-size: 11px; letter-spacing: 0.04em; color: var(--ink-faint); margin-top: 8px; }

/* --- Modale de connexion / inscription (comptes SYI + favoris),
   voir INSTALLATION-COMPTES.md --- */
.auth-modal { position: fixed; inset: 0; z-index: 950; display: flex; align-items: center; justify-content: center; padding: 20px; }
.auth-modal[hidden] { display: none; }
.auth-modal-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,0.5); }
.auth-modal-box {
  position: relative; z-index: 1; width: min(420px, 100%);
  background: var(--white); padding: 40px 32px 32px; border-radius: 4px;
}
.auth-modal-close {
  position: absolute; top: 12px; right: 14px; background: none; border: 0;
  font-size: 24px; line-height: 1; color: var(--ink-faint); cursor: pointer;
}
.auth-modal-close:hover { color: var(--orange); }
.auth-modal-tabs { display: flex; gap: 24px; margin-bottom: 24px; border-bottom: 1px solid var(--line); }
.auth-tab {
  background: none; border: 0; padding: 0 0 14px; cursor: pointer;
  font-family: var(--mono); font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--ink-faint); border-bottom: 2px solid transparent; margin-bottom: -1px;
  transition: color 0.2s var(--ease), border-color 0.2s var(--ease);
}
.auth-tab.is-active { color: var(--ink); border-bottom-color: var(--orange); }
.auth-modal-error {
  background: var(--orange-soft); color: var(--orange); font-size: 13px; line-height: 1.5;
  padding: 10px 14px; border-radius: 4px; margin: 0 0 18px;
}
.auth-form { display: flex; flex-direction: column; gap: 16px; }
.auth-form[hidden] { display: none; }
.auth-form label {
  display: flex; flex-direction: column; gap: 6px;
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-faint);
}
.auth-form input, .auth-form select {
  font-family: var(--body); font-size: 15px; color: var(--ink);
  background: var(--cream); border: 1px solid var(--line); padding: 11px 12px; outline: none;
  transition: border-color 0.2s var(--ease);
}
.auth-form select { cursor: pointer; }
.auth-form input:focus, .auth-form select:focus { border-color: var(--orange); }
.auth-form button[type="submit"] { border: 0; cursor: pointer; margin-top: 4px; }
.auth-form-row { display: flex; gap: 12px; }
.auth-form-row label { flex: 1; min-width: 0; }

/* --- Page "Mes favoris" --- */
.favorites-empty-state { text-align: center; padding: 48px 0; color: var(--ink-soft); }
.favorites-empty-state p { margin: 0 0 20px; font-size: 16px; }

/* --- Réduction de bienvenue (fiche bien), voir INSTALLATION-COMPTES.md --- */
.promo-banner {
  display: flex; align-items: center; gap: 12px;
  background: var(--orange-soft); border: 1px solid var(--orange);
  padding: 14px 16px; margin-bottom: 18px; border-radius: 3px;
}
.promo-banner[hidden] { display: none; }
.promo-banner .promo-icon { display: flex; color: var(--orange); flex-shrink: 0; }
.promo-banner strong { display: block; font-size: 14px; color: var(--ink); }
.promo-banner .promo-code {
  font-family: var(--mono); font-size: 12px; color: var(--orange); letter-spacing: 0.04em;
}
.promo-banner--login strong { font-size: 13px; }
.promo-login-btn {
  background: none; border: 0; padding: 0; margin-top: 4px; cursor: pointer;
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--orange); text-decoration: underline;
}