/* ==========================================================================
   ALLIANCE ACTION — Gestion immobilière
   Feuille de style unique pour les 3 pages (accueil, inventaire, fiche)
   Archétype : CATALOGUE / INVENTAIRE FILTRABLE
   Direction : beaucoup de blanc, vert forêt en accent, aucune surcharge
   ========================================================================== */

/* ─────────────────────────── 1. Tokens ─────────────────────────── */
:root{
  /* Neutres */
  --paper:#FFFFFF;
  --sand:#F8F8F5;          /* fond des sections alternées */
  --sand-2:#F2F2EE;
  --ink:#14181A;
  --ink-2:#3C4448;
  --muted:#6E7876;
  --line:#E7E8E3;
  --line-2:#DDDED8;

  /* Vert forêt (accent unique) */
  --forest:#14503A;
  --forest-d:#0D3527;
  --forest-l:#EAF1EC;
  --forest-l2:#DCE8E0;
  --leaf:#3FBF85;          /* vert vif de la flèche du logo — documenté, jamais utilisé ailleurs */

  /* Divers */
  --r-sm:12px;
  --r:16px;
  --r-lg:22px;
  --r-pill:999px;
  --sh-1:0 1px 2px rgba(20,24,26,.05);
  --sh-2:0 4px 18px rgba(20,24,26,.07);
  --sh-3:0 18px 48px -18px rgba(20,24,26,.20);
  --wrap:1180px;
  --ease:cubic-bezier(.22,.61,.36,1);

  --f-disp:'Schibsted Grotesk','Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --f-body:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  --f-serif:'Newsreader',Georgia,'Times New Roman',serif;
}

/* ─────────────────────────── 2. Base ─────────────────────────── */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--f-body); font-size:16.5px; line-height:1.62;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img{max-width:100%; height:auto; display:block}
a{color:inherit; text-decoration:none}
button,input,select,textarea{font:inherit; color:inherit}
h1,h2,h3,h4{font-family:var(--f-disp); font-weight:600; letter-spacing:-.022em; margin:0; line-height:1.12; text-wrap:balance}
h1{font-size:clamp(2.15rem,4.6vw,3.5rem)}
h2{font-size:clamp(1.65rem,3.1vw,2.4rem)}
h3{font-size:1.14rem; letter-spacing:-.012em}
p{margin:0}
ul{margin:0; padding:0; list-style:none}
:focus-visible{outline:2.5px solid var(--forest); outline-offset:3px; border-radius:4px}

.wrap{width:100%; max-width:var(--wrap); margin:0 auto; padding:0 24px}
.sec{padding:96px 0}
.sec--tight{padding:68px 0}
.sec--sand{background:var(--sand); border-top:1px solid var(--line); border-bottom:1px solid var(--line)}
.sr{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}

/* Étiquette de section */
.eyebrow{
  font-family:var(--f-disp); font-size:.735rem; font-weight:600;
  letter-spacing:.14em; text-transform:uppercase; color:var(--forest);
  display:flex; align-items:center; gap:10px; margin-bottom:16px;
}
.eyebrow::before{content:''; width:22px; height:1.5px; background:var(--forest); opacity:.55; flex:none}
.lead{color:var(--ink-2); font-size:1.06rem; max-width:62ch}
.serif{font-family:var(--f-serif); font-style:italic; font-weight:400; letter-spacing:-.01em}

/* ─────────────────────────── 3. Boutons ─────────────────────────── */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  height:52px; padding:0 26px; border-radius:var(--r-pill);
  background:var(--forest); color:#fff; border:1px solid var(--forest);
  font-family:var(--f-disp); font-weight:600; font-size:.97rem; letter-spacing:-.005em;
  cursor:pointer; transition:background .18s var(--ease), transform .18s var(--ease), box-shadow .18s var(--ease);
  box-shadow:var(--sh-1);
}
.btn:hover{background:var(--forest-d); border-color:var(--forest-d); transform:translateY(-1px); box-shadow:var(--sh-2)}
.btn:active{transform:translateY(0)}
.btn--line{background:transparent; color:var(--ink); border-color:var(--line-2); box-shadow:none}
.btn--line:hover{background:var(--paper); border-color:var(--ink); color:var(--ink); transform:translateY(-1px)}
.btn--ghost{background:#fff; color:var(--forest); border-color:var(--forest-l2)}
.btn--ghost:hover{background:var(--forest-l); border-color:var(--forest-l2); color:var(--forest-d)}
.btn--sm{height:44px; padding:0 20px; font-size:.9rem}
.btn--full{width:100%}
.btn svg{flex:none}

.tlink{
  display:inline-flex; align-items:center; gap:8px; font-family:var(--f-disp);
  font-weight:600; font-size:.95rem; color:var(--forest); border-bottom:1.5px solid var(--forest-l2);
  padding-bottom:2px; transition:border-color .18s var(--ease), gap .18s var(--ease);
}
.tlink:hover{border-color:var(--forest); gap:12px}

/* ─────────────────────────── 4. Logo ─────────────────────────── */
/* Logo reconstruit en SVG + CSS (aucune image raster, net à toute taille) */
.logo{display:inline-flex; align-items:center; gap:11px}
.logo-mark{
  width:40px; height:40px; border-radius:11px; flex:none;
  background:linear-gradient(150deg,#1D2A25 0%,#101613 100%);
  display:grid; place-items:center;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.10), 0 2px 8px rgba(20,24,26,.16);
}
.logo-mark svg{width:22px; height:22px; display:block}
.logo-txt{display:flex; flex-direction:column; line-height:1}
.logo-txt b{
  font-family:var(--f-disp); font-weight:700; font-size:.98rem;
  letter-spacing:.055em; text-transform:uppercase; color:var(--ink);
}
.logo-txt span{
  font-size:.575rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--muted); margin-top:4px; font-weight:500;
}
.foot .logo-txt b{color:#fff}
.foot .logo-txt span{color:rgba(255,255,255,.55)}
.foot .logo-mark{background:linear-gradient(150deg,#24312B 0%,#161D19 100%)}

/* ─────────────────────────── 5. En-tête ─────────────────────────── */
.hdr{
  position:sticky; top:0; z-index:60; background:rgba(255,255,255,.88);
  backdrop-filter:saturate(1.6) blur(12px); -webkit-backdrop-filter:saturate(1.6) blur(12px);
  border-bottom:1px solid var(--line);
}
.hdr-in{display:flex; align-items:center; gap:28px; height:72px}
.nav{display:flex; align-items:center; gap:28px; margin-left:auto}
.nav a{
  font-size:.945rem; color:var(--ink-2); font-weight:500;
  position:relative; padding:4px 0; transition:color .16s var(--ease);
}
.nav a::after{
  content:''; position:absolute; left:0; right:100%; bottom:-1px; height:1.5px;
  background:var(--forest); transition:right .22s var(--ease);
}
.nav a:hover{color:var(--ink)}
.nav a:hover::after,.nav a[aria-current="page"]::after{right:0}
.nav a[aria-current="page"]{color:var(--ink)}
.hdr-cta{display:flex; align-items:center; gap:14px}
.hdr-tel{
  display:inline-flex; align-items:center; gap:8px; font-family:var(--f-disp);
  font-weight:600; font-size:.93rem; color:var(--ink);
}
.hdr-tel svg{color:var(--forest)}
.burger{
  display:none; width:44px; height:44px; margin-left:auto; border:1px solid var(--line-2);
  border-radius:11px; background:#fff; cursor:pointer; place-items:center;
}
.burger span{display:block; width:17px; height:1.6px; background:var(--ink); position:relative}
.burger span::before,.burger span::after{content:''; position:absolute; left:0; width:17px; height:1.6px; background:var(--ink)}
.burger span::before{top:-5.5px} .burger span::after{top:5.5px}

/* En-tête flottant par-dessus la photo du hero (page d'accueil) */
.hdr{transition:background .28s var(--ease), border-color .28s var(--ease)}
.hdr--over:not(.scrolled):not(.open){
  background:transparent; border-bottom-color:transparent;
  backdrop-filter:none; -webkit-backdrop-filter:none;
}
.hdr--over:not(.scrolled):not(.open) .nav a{color:rgba(255,255,255,.88)}
.hdr--over:not(.scrolled):not(.open) .nav a:hover,
.hdr--over:not(.scrolled):not(.open) .nav a[aria-current="page"]{color:#fff}
.hdr--over:not(.scrolled):not(.open) .nav a::after{background:#fff}
.hdr--over:not(.scrolled):not(.open) .logo-txt b{color:#fff}
.hdr--over:not(.scrolled):not(.open) .logo-txt span{color:rgba(255,255,255,.64)}
.hdr--over:not(.scrolled):not(.open) .logo-mark{
  background:rgba(255,255,255,.14); box-shadow:inset 0 0 0 1px rgba(255,255,255,.30);
}
.hdr--over:not(.scrolled):not(.open) .hdr-tel{color:#fff}
.hdr--over:not(.scrolled):not(.open) .hdr-tel svg{color:var(--leaf)}
.hdr--over:not(.scrolled):not(.open) .hdr-cta .btn{background:#fff; border-color:#fff; color:var(--forest-d)}
.hdr--over:not(.scrolled):not(.open) .hdr-cta .btn:hover{background:var(--sand); border-color:var(--sand)}
.hdr--over:not(.scrolled):not(.open) .burger{background:rgba(255,255,255,.12); border-color:rgba(255,255,255,.34)}
.hdr--over:not(.scrolled):not(.open) .burger span,
.hdr--over:not(.scrolled):not(.open) .burger span::before,
.hdr--over:not(.scrolled):not(.open) .burger span::after{background:#fff}

/* ─────────────────────────── 6. Hero ─────────────────────────── */
/* Photo pleine largeur + voile vert forêt en dégradé. Le header flotte
   par-dessus : le hero remonte de la hauteur exacte du header. */
.hero{
  position:relative; isolation:isolate; overflow:hidden;
  margin-top:-72px; padding:calc(72px + 82px) 0 84px;
  min-height:min(90vh,760px); display:flex; align-items:center;
}
.hero-bg{
  position:absolute; inset:0; width:100%; height:100%; z-index:-2;
  object-fit:cover; object-position:62% 52%;
}
.hero::after{
  content:''; position:absolute; inset:0; z-index:-1;
  background:
    linear-gradient(96deg, rgba(6,24,17,.93) 0%, rgba(6,24,17,.82) 32%, rgba(6,24,17,.50) 64%, rgba(6,24,17,.32) 100%),
    linear-gradient(to bottom, rgba(6,24,17,.60) 0%, rgba(6,24,17,0) 24%);
}
.hero-in{width:100%; max-width:940px}
.hero .eyebrow{color:rgba(255,255,255,.84)}
.hero .eyebrow::before{background:var(--leaf); opacity:.95}
.hero h1{color:#fff; margin-bottom:20px; max-width:22ch; text-shadow:0 2px 34px rgba(0,0,0,.32)}
.hero h1 em{font-family:var(--f-serif); font-style:italic; font-weight:400; color:#A8DDC3}
.hero .lead{color:rgba(255,255,255,.91); font-size:1.09rem; max-width:52ch}
.hero-trust{display:flex; flex-wrap:wrap; gap:9px 8px; margin-top:26px}
.tchip{
  display:inline-flex; align-items:center; gap:8px; height:34px; padding:0 14px;
  border-radius:var(--r-pill); background:rgba(255,255,255,.13);
  border:1px solid rgba(255,255,255,.26); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  font-size:.845rem; color:#fff; font-weight:500;
}
.tchip svg{color:var(--leaf); flex:none}

/* Barre de recherche : inchangée dans son fonctionnement, posée sur la photo */
.search{
  margin:32px 0 0; max-width:880px; background:var(--paper);
  border:1px solid rgba(255,255,255,.5); border-radius:var(--r-lg);
  box-shadow:0 30px 70px -24px rgba(0,0,0,.60), 0 2px 8px rgba(0,0,0,.14);
  padding:10px; display:grid;
  grid-template-columns:1.5fr 1fr 1fr auto; gap:6px; align-items:stretch; text-align:left;
}
.sf{position:relative; padding:10px 14px; border-radius:14px; transition:background .16s var(--ease)}
.sf + .sf{box-shadow:inset 1px 0 0 var(--line)}
.sf:focus-within{background:var(--sand)}
.sf label{
  display:block; font-family:var(--f-disp); font-size:.7rem; font-weight:600;
  letter-spacing:.1em; text-transform:uppercase; color:var(--muted); margin-bottom:2px;
}
.sf input,.sf select{
  width:100%; border:0; background:transparent; padding:0; font-size:.97rem;
  font-weight:500; color:var(--ink); appearance:none; outline:none; cursor:pointer;
}
.sf input{cursor:text}
.sf input::placeholder{color:#9BA3A1; font-weight:400}
.sf--sel::after{
  content:''; position:absolute; right:14px; bottom:16px; width:7px; height:7px;
  border-right:1.6px solid var(--muted); border-bottom:1.6px solid var(--muted);
  transform:rotate(45deg); pointer-events:none;
}
.search .btn{height:auto; min-height:62px; border-radius:14px; padding:0 24px}
.hero-alt{margin-top:16px; font-size:.9rem; color:rgba(255,255,255,.80)}
.hero-alt a{color:#fff; font-weight:600; border-bottom:1.5px solid rgba(255,255,255,.4)}
.hero-alt a:hover{border-color:#fff}

/* Rangée de nouveautés (scroll-snap) */
.rail-head{display:flex; align-items:flex-end; justify-content:space-between; gap:24px; margin-bottom:22px}
.rail{
  display:grid; grid-auto-flow:column; grid-auto-columns:minmax(288px,1fr);
  gap:18px; overflow-x:auto; scroll-snap-type:x mandatory;
  padding:4px 24px 22px; margin:0 -24px; scrollbar-width:none;
}
.rail::-webkit-scrollbar{display:none}
.rail > *{scroll-snap-align:start}

/* ─────────────────────────── 7. Carte de logement ─────────────────────────── */
.grid-lg{display:grid; grid-template-columns:repeat(3,1fr); gap:26px 22px}
.lc{
  display:flex; flex-direction:column; background:var(--paper);
  border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden;
  transition:transform .26s var(--ease), box-shadow .26s var(--ease), border-color .26s var(--ease);
}
.lc:hover{transform:translateY(-4px); box-shadow:var(--sh-3); border-color:var(--line-2)}
.lc-media{position:relative; aspect-ratio:4/3; background:var(--sand-2); overflow:hidden}
.lc-media img{width:100%; height:100%; object-fit:cover; transition:transform .5s var(--ease)}
.lc:hover .lc-media img{transform:scale(1.035)}
.lc-flags{position:absolute; top:12px; left:12px; right:12px; display:flex; gap:6px; flex-wrap:wrap}
.flag{
  display:inline-flex; align-items:center; height:26px; padding:0 11px; border-radius:var(--r-pill);
  font-family:var(--f-disp); font-size:.735rem; font-weight:600; letter-spacing:.01em;
  background:rgba(255,255,255,.94); color:var(--ink); backdrop-filter:blur(6px);
  box-shadow:0 1px 4px rgba(20,24,26,.10);
}
.flag--promo{background:var(--forest); color:#fff}
.flag--neuf{background:#14181A; color:#fff}
.lc-body{padding:18px 20px 20px; display:flex; flex-direction:column; flex:1}
.lc-top{display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin-bottom:8px}
.lc-type{
  font-family:var(--f-disp); font-weight:600; font-size:.78rem; letter-spacing:.06em;
  text-transform:uppercase; color:var(--forest); background:var(--forest-l);
  padding:3px 9px; border-radius:6px;
}
.lc-price{font-family:var(--f-disp); font-weight:700; font-size:1.16rem; letter-spacing:-.02em; white-space:nowrap}
.lc-price i{font-style:normal; font-weight:500; font-size:.8rem; color:var(--muted)}
.lc h3{margin-bottom:3px}
.lc-adr{font-size:.9rem; color:var(--muted)}
.lc-specs{
  display:flex; flex-wrap:wrap; gap:6px 14px; margin-top:14px; padding-top:14px;
  border-top:1px solid var(--line); font-size:.855rem; color:var(--ink-2);
}
.lc-specs li{display:inline-flex; align-items:center; gap:6px}
.lc-specs svg{color:var(--muted); flex:none}
.lc-foot{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  margin-top:16px; font-size:.855rem; color:var(--muted);
}
.lc-foot b{font-weight:600; color:var(--ink-2)}
.lc-go{
  display:inline-flex; align-items:center; gap:6px; color:var(--forest);
  font-family:var(--f-disp); font-weight:600; font-size:.875rem;
}
.lc:hover .lc-go svg{transform:translateX(3px)}
.lc-go svg{transition:transform .22s var(--ease)}

/* ─────────────────────────── 8. Régions ─────────────────────────── */
.regions{display:grid; grid-template-columns:repeat(3,1fr); gap:20px}
.rg{
  position:relative; border-radius:var(--r-lg); overflow:hidden; min-height:250px;
  display:flex; flex-direction:column; justify-content:flex-end; padding:24px;
  color:#fff; isolation:isolate; border:1px solid var(--line);
}
.rg img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:-2; transition:transform .6s var(--ease)}
.rg::after{
  content:''; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(to top,rgba(13,53,39,.86) 0%,rgba(13,53,39,.38) 45%,rgba(13,53,39,.10) 100%);
}
.rg:hover img{transform:scale(1.05)}
.rg b{font-family:var(--f-disp); font-size:1.32rem; font-weight:600; letter-spacing:-.02em}
.rg span{font-size:.9rem; color:rgba(255,255,255,.82); margin-top:3px}
.rg-cities{margin-top:12px; font-size:.82rem; color:rgba(255,255,255,.72); line-height:1.5}
.rg-go{
  position:absolute; top:20px; right:20px; width:38px; height:38px; border-radius:50%;
  background:rgba(255,255,255,.16); border:1px solid rgba(255,255,255,.28);
  display:grid; place-items:center; transition:background .2s var(--ease), transform .2s var(--ease);
}
.rg:hover .rg-go{background:#fff; color:var(--forest); transform:translate(2px,-2px)}

/* ─────────────────────────── 9. Étapes + photo ─────────────────────────── */
.split{display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:center}
.steps{margin-top:34px; display:flex; flex-direction:column}
.step{display:grid; grid-template-columns:auto 1fr; gap:18px; padding:22px 0; border-top:1px solid var(--line)}
.step:last-child{border-bottom:1px solid var(--line)}
.step-n{
  width:34px; height:34px; border-radius:50%; background:var(--forest-l); color:var(--forest);
  display:grid; place-items:center; font-family:var(--f-disp); font-weight:700; font-size:.9rem;
}
.step h3{margin-bottom:4px}
.step p{font-size:.955rem; color:var(--ink-2)}
.frame{position:relative; border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--sh-3)}
.frame img{width:100%; aspect-ratio:4/5; object-fit:cover}
.frame--wide img{aspect-ratio:3/2}
.float-card{
  position:absolute; bottom:22px; left:22px; right:22px; background:rgba(255,255,255,.96);
  backdrop-filter:blur(8px); border-radius:var(--r); padding:16px 18px; box-shadow:var(--sh-2);
  display:flex; align-items:center; gap:14px;
}
.float-card b{font-family:var(--f-disp); font-size:1.55rem; font-weight:700; letter-spacing:-.03em; color:var(--forest); line-height:1}
.float-card span{font-size:.86rem; color:var(--ink-2); line-height:1.35}

/* ─────────────────────────── 10. Valeurs (2x2) ─────────────────────────── */
.vals{display:grid; grid-template-columns:1fr 1fr; gap:0; margin-top:8px}
.val{padding:34px 40px 34px 0; border-top:1px solid var(--line)}
.vals .val:nth-child(even){padding-left:40px; box-shadow:inset 1px 0 0 var(--line)}
.val-ic{
  width:42px; height:42px; border-radius:11px; background:var(--forest-l); color:var(--forest);
  display:grid; place-items:center; margin-bottom:16px;
}
.val h3{margin-bottom:7px}
.val p{font-size:.955rem; color:var(--ink-2)}

/* ─────────────────────────── 11. Bande gratuite / stats ─────────────────────────── */
.band{
  position:relative; overflow:hidden; color:#fff; border-radius:0;
  background:var(--forest-d);
}
.band img.band-bg{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
}
.band::after{   /* voile qui garde le texte lisible sans effacer la texture */
  content:''; position:absolute; inset:0;
  background:linear-gradient(105deg,rgba(13,53,39,.58) 0%,rgba(13,53,39,.30) 52%,rgba(13,53,39,.70) 100%);
}
.band-in{position:relative; z-index:2; padding:78px 0; text-align:center}
.band .eyebrow{color:rgba(255,255,255,.88); justify-content:center}
.band .eyebrow::before{background:rgba(255,255,255,.6)}
.band h2{color:#fff; max-width:22ch; margin:0 auto 16px}
.band p{color:rgba(255,255,255,.92); max-width:56ch; margin:0 auto}
.stats{
  display:grid; grid-template-columns:repeat(4,1fr); gap:24px; margin-top:44px;
  padding-top:34px; border-top:1px solid rgba(255,255,255,.18);
}
.stat b{
  display:block; font-family:var(--f-disp); font-weight:700; letter-spacing:-.035em;
  font-size:clamp(1.9rem,3.4vw,2.6rem); line-height:1; color:#fff;
}
.stat > span{display:block; margin-top:8px; font-size:.875rem; color:rgba(255,255,255,.86)}
.band .btn{margin-top:34px; background:#fff; color:var(--forest-d); border-color:#fff}
.band .btn:hover{background:var(--sand); border-color:var(--sand); color:var(--forest-d)}

/* ─────────────────────────── 12. Formulaires interactifs (wizard) ─────────────────────────── */
.form-wrap{display:grid; grid-template-columns:1.35fr .85fr; gap:52px; align-items:start}
.card{background:var(--paper); border:1px solid var(--line-2); border-radius:var(--r-lg); box-shadow:var(--sh-2)}

/* Coquille du wizard : une question à la fois, façon Typeform */
.wz{
  background:var(--paper); border:1px solid var(--line-2); border-radius:var(--r-lg);
  box-shadow:var(--sh-2); padding:30px; position:relative;
}
.wz-top{display:flex; align-items:center; gap:14px; margin-bottom:26px}
.wz-bar{flex:1; height:4px; border-radius:2px; background:var(--sand-2); overflow:hidden}
.wz-bar i{display:block; height:100%; width:10%; background:var(--forest); border-radius:2px; transition:width .42s var(--ease)}
.wz-count{font-family:var(--f-disp); font-size:.79rem; font-weight:600; color:var(--ink); white-space:nowrap}
.wz-count span{color:var(--muted); font-weight:500}

.q{display:none}
.q.on{display:block; animation:qIn .34s var(--ease) both}
.q.on.rev{animation-name:qInRev}
@keyframes qIn{from{opacity:0; transform:translateY(20px)} to{opacity:1; transform:none}}
@keyframes qInRev{from{opacity:0; transform:translateY(-20px)} to{opacity:1; transform:none}}

.q-n{
  font-family:var(--f-disp); font-size:.71rem; font-weight:600; letter-spacing:.13em;
  text-transform:uppercase; color:var(--forest); display:flex; align-items:center; gap:9px;
  margin-bottom:12px;
}
.q-n::before{content:''; width:16px; height:1.5px; background:var(--forest); opacity:.5; flex:none}
.q-t{font-size:1.42rem; letter-spacing:-.022em; margin-bottom:7px}
.q-h{font-size:.925rem; color:var(--muted); margin-bottom:22px}

/* Tuiles de choix avec raccourci clavier */
.opts{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:10px}
.opts--stack{grid-template-columns:1fr}
.opt{position:relative}
.opt input{position:absolute; opacity:0; inset:0; cursor:pointer; margin:0}
.opt span{
  display:flex; align-items:center; gap:12px; min-height:56px; padding:12px 16px;
  border:1px solid var(--line-2); border-radius:var(--r-sm); background:var(--paper);
  font-family:var(--f-disp); font-weight:600; font-size:.96rem; letter-spacing:-.008em;
  transition:border-color .16s var(--ease), background .16s var(--ease), box-shadow .16s var(--ease), transform .16s var(--ease);
  cursor:pointer;
}
.opt input:hover + span{border-color:var(--ink-2); transform:translateY(-1px)}
.opt input:checked + span{
  border-color:var(--forest); background:var(--forest-l); color:var(--forest-d);
  box-shadow:inset 0 0 0 1px var(--forest);
}
.opt input:focus-visible + span{outline:2.5px solid var(--forest); outline-offset:2px}
.opt-k{
  width:25px; height:25px; border-radius:6px; background:var(--sand-2); color:var(--muted);
  font-family:var(--f-disp); font-size:.71rem; font-weight:700; display:grid; place-items:center;
  flex:none; transition:background .16s var(--ease), color .16s var(--ease);
}
.opt input:checked + span .opt-k{background:var(--forest); color:#fff}
.opts.bad .opt span{border-color:#C4443A}

/* Champs classiques (étape coordonnées) */
.frow{display:grid; grid-template-columns:1fr 1fr; gap:14px}
.field{margin-bottom:14px}
.field label,.field .lbl{
  display:block; font-family:var(--f-disp); font-size:.79rem; font-weight:600;
  color:var(--ink-2); margin-bottom:6px; letter-spacing:.005em;
}
.field input,.field select,.field textarea{
  width:100%; height:50px; padding:0 14px; border:1px solid var(--line-2);
  border-radius:var(--r-sm); background:var(--paper); font-size:.97rem;
  transition:border-color .16s var(--ease), box-shadow .16s var(--ease);
}
.field textarea{height:auto; min-height:92px; padding:12px 14px; resize:vertical; line-height:1.55}
.field 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='%236E7876' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 14px center; padding-right:36px}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--forest); box-shadow:0 0 0 3px rgba(20,80,58,.10); outline:none}
.field input[aria-invalid="true"],.field select[aria-invalid="true"]{border-color:#C4443A; box-shadow:0 0 0 3px rgba(196,68,58,.09)}
.err{display:none; font-size:.8rem; color:#C4443A; margin-top:5px}
.field.bad .err{display:block}

/* Récapitulatif avant l'envoi */
.recap{
  background:var(--forest-l); border:1px solid var(--forest-l2); border-radius:var(--r);
  padding:14px 16px; margin-bottom:20px;
}
.recap b{
  display:block; font-family:var(--f-disp); font-size:.71rem; font-weight:600;
  letter-spacing:.12em; text-transform:uppercase; color:var(--forest); margin-bottom:9px;
}
.recap ul{display:flex; flex-wrap:wrap; gap:6px}
.recap li{
  background:rgba(255,255,255,.75); border:1px solid var(--forest-l2); border-radius:var(--r-pill);
  padding:4px 11px; font-size:.83rem; color:var(--forest-d); font-weight:500;
}

/* Navigation du wizard */
.q-nav{display:flex; align-items:center; gap:8px; margin-top:24px; flex-wrap:wrap}
.back{
  background:none; border:0; color:var(--muted); font-size:.9rem; cursor:pointer;
  padding:8px 10px; font-weight:500; border-radius:8px;
}
.back:hover{color:var(--ink); background:var(--sand)}
.skip{background:none; border:0; color:var(--muted); font-size:.88rem; cursor:pointer; padding:8px 10px; text-decoration:underline; text-underline-offset:3px}
.skip:hover{color:var(--forest)}
.kbd{margin-left:auto; font-size:.8rem; color:var(--muted); display:inline-flex; align-items:center; gap:7px}
.kbd b{
  font-family:var(--f-disp); font-size:.71rem; font-weight:600; border:1px solid var(--line-2);
  border-bottom-width:2px; border-radius:5px; padding:2px 6px; color:var(--ink-2); background:var(--paper);
}
@media (hover:none){.kbd{display:none}}

.consent{display:flex; gap:10px; align-items:flex-start; margin-top:6px; font-size:.83rem; color:var(--muted); line-height:1.5}
.consent input{width:17px; height:17px; margin:3px 0 0; accent-color:var(--forest); flex:none}
.consent.bad{color:#C4443A}
.fdone{display:none; text-align:center; padding:26px 6px}
.fdone.on{display:block; animation:qIn .4s var(--ease) both}
.fdone-ic{width:56px; height:56px; border-radius:50%; background:var(--forest-l); color:var(--forest); display:grid; place-items:center; margin:0 auto 18px}

/* Colonne de réassurance */
.aside-list{margin-top:22px; display:flex; flex-direction:column; gap:16px}
.al{display:grid; grid-template-columns:auto 1fr; gap:13px; align-items:start}
.al svg{color:var(--forest); margin-top:3px; flex:none}
.al b{display:block; font-family:var(--f-disp); font-weight:600; font-size:.95rem; margin-bottom:1px}
.al span{font-size:.895rem; color:var(--muted); line-height:1.5}
.note{
  margin-top:24px; padding:16px 18px; background:var(--sand); border:1px solid var(--line);
  border-radius:var(--r); font-size:.85rem; color:var(--ink-2); line-height:1.55;
}
.note b{font-family:var(--f-disp)}

/* ─────────────────────────── 13. Témoignages ─────────────────────────── */
.temos{display:grid; grid-template-columns:repeat(3,1fr); gap:22px}
.temo{background:var(--paper); border:1px solid var(--line); border-radius:var(--r-lg); padding:26px}
.temo p{font-size:.985rem; color:var(--ink-2); line-height:1.62}
.temo-who{display:flex; align-items:center; gap:12px; margin-top:20px; padding-top:18px; border-top:1px solid var(--line)}
.temo-who img{width:44px; height:44px; border-radius:50%; object-fit:cover; flex:none; background:var(--sand-2)}
.temo-who b{display:block; font-family:var(--f-disp); font-size:.93rem; font-weight:600}
.temo-who span{font-size:.84rem; color:var(--muted)}
.stars{display:flex; gap:3px; color:#C9963F; margin-bottom:14px}

/* ─────────────────────────── 14. FAQ ─────────────────────────── */
.faq{max-width:820px; margin:0 auto}
.qa{border-top:1px solid var(--line)}
.qa:last-child{border-bottom:1px solid var(--line)}
.qa button{
  width:100%; display:flex; align-items:center; justify-content:space-between; gap:20px;
  padding:24px 0; background:none; border:0; cursor:pointer; text-align:left;
  font-family:var(--f-disp); font-weight:600; font-size:1.045rem; letter-spacing:-.012em; color:var(--ink);
}
.qa button:hover{color:var(--forest)}
.qa-ic{
  width:28px; height:28px; border-radius:50%; border:1px solid var(--line-2); flex:none;
  display:grid; place-items:center; position:relative; transition:all .22s var(--ease);
}
.qa-ic::before,.qa-ic::after{content:''; position:absolute; background:var(--ink); border-radius:1px}
.qa-ic::before{width:11px; height:1.6px}
.qa-ic::after{width:1.6px; height:11px; transition:transform .24s var(--ease)}
.qa[data-open="1"] .qa-ic{background:var(--forest); border-color:var(--forest)}
.qa[data-open="1"] .qa-ic::before,.qa[data-open="1"] .qa-ic::after{background:#fff}
.qa[data-open="1"] .qa-ic::after{transform:scaleY(0)}
.qa-body{overflow:hidden; max-height:0; transition:max-height .34s var(--ease)}
.qa-body div{padding:0 46px 26px 0; color:var(--ink-2); font-size:.985rem}

/* ─────────────────────────── 15. Pied de page ─────────────────────────── */
.foot{background:#101614; color:rgba(255,255,255,.66); padding:64px 0 30px}
.foot-top{display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:40px}
.foot h4{font-family:var(--f-disp); font-size:.76rem; letter-spacing:.14em; text-transform:uppercase; color:#fff; margin-bottom:16px; font-weight:600}
.foot a:hover{color:#fff}
.foot ul{display:flex; flex-direction:column; gap:10px; font-size:.92rem}
.foot-blurb{font-size:.92rem; margin-top:18px; max-width:34ch; line-height:1.65}
.foot-bot{
  margin-top:52px; padding-top:24px; border-top:1px solid rgba(255,255,255,.10);
  display:flex; justify-content:space-between; gap:18px; flex-wrap:wrap; font-size:.83rem;
}

/* ─────────────────────────── 16. Page inventaire ─────────────────────────── */
.phead{padding:46px 0 30px; border-bottom:1px solid var(--line); background:var(--paper)}
.crumb{display:flex; align-items:center; gap:9px; font-size:.855rem; color:var(--muted); margin-bottom:14px}
.crumb a:hover{color:var(--forest)}
.crumb svg{opacity:.5}
.phead h1{font-size:clamp(1.8rem,3.4vw,2.5rem); margin-bottom:8px}

.filters{
  position:sticky; top:72px; z-index:40; background:rgba(255,255,255,.93);
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line); padding:14px 0;
}
.filters-in{display:flex; align-items:center; gap:10px; flex-wrap:wrap}
.fbox{
  position:relative; display:flex; align-items:center; gap:8px; height:44px;
  padding:0 14px; border:1px solid var(--line-2); border-radius:var(--r-pill);
  background:var(--paper); font-size:.91rem; font-weight:500;
}
.fbox svg{color:var(--muted); flex:none}
.fbox input,.fbox select{border:0; background:transparent; outline:none; appearance:none; cursor:pointer; font-size:.91rem; font-weight:500; padding-right:14px}
.fbox input{cursor:text; min-width:150px}
.fbox--sel::after{
  content:''; position:absolute; right:14px; width:6px; height:6px;
  border-right:1.6px solid var(--muted); border-bottom:1.6px solid var(--muted);
  transform:rotate(45deg) translateY(-2px); pointer-events:none;
}
.fbox:focus-within{border-color:var(--forest); box-shadow:0 0 0 3px rgba(20,80,58,.09)}
.fchips{display:flex; gap:6px}
.fchip{
  height:44px; padding:0 16px; border-radius:var(--r-pill); border:1px solid var(--line-2);
  background:var(--paper); font-family:var(--f-disp); font-weight:600; font-size:.91rem;
  cursor:pointer; transition:all .15s var(--ease);
}
.fchip:hover{border-color:var(--ink-2)}
.fchip[aria-pressed="true"]{background:var(--forest); border-color:var(--forest); color:#fff}
.fclear{
  margin-left:auto; display:inline-flex; align-items:center; gap:7px; background:none;
  border:0; color:var(--muted); font-size:.89rem; cursor:pointer; padding:8px 2px;
}
.fclear:hover{color:var(--forest)}
.res-head{display:flex; align-items:baseline; justify-content:space-between; gap:20px; margin-bottom:24px; flex-wrap:wrap}
.res-count{font-family:var(--f-disp); font-weight:600; font-size:1.06rem}
.res-count span{color:var(--muted); font-weight:500}
.empty{
  text-align:center; padding:70px 24px; border:1px dashed var(--line-2);
  border-radius:var(--r-lg); background:var(--sand);
}
.empty h3{margin-bottom:8px}
.empty p{color:var(--muted); max-width:46ch; margin:0 auto 22px}

/* ─────────────────────────── 17. Fiche logement ─────────────────────────── */
.fiche-head{padding:34px 0 26px}
.fiche-title{display:flex; align-items:flex-end; justify-content:space-between; gap:32px; flex-wrap:wrap}
.fiche-title h1{font-size:clamp(1.75rem,3.2vw,2.4rem); margin-bottom:8px}
.fiche-meta{display:flex; align-items:center; gap:8px; color:var(--muted); font-size:.95rem}
.fiche-price{text-align:right}
.fiche-price b{display:block; font-family:var(--f-disp); font-weight:700; font-size:2rem; letter-spacing:-.03em; line-height:1}
.fiche-price span{font-size:.88rem; color:var(--muted)}
.badges{display:flex; gap:8px; flex-wrap:wrap; margin-top:14px}

.gal{display:grid; grid-template-columns:2.1fr 1fr; gap:12px; margin-bottom:44px}
.gal-main{border-radius:var(--r-lg); overflow:hidden; background:var(--sand-2); aspect-ratio:3/2}
.gal-main img{width:100%; height:100%; object-fit:cover}
.gal-side{display:grid; grid-auto-rows:1fr; gap:12px}   /* s'adapte à 2 ou 3 vignettes */
.gal-side button{
  padding:0; border:0; background:var(--sand-2); border-radius:var(--r); overflow:hidden;
  cursor:pointer; position:relative; aspect-ratio:auto;
}
.gal-side img{width:100%; height:100%; object-fit:cover; transition:opacity .2s var(--ease)}
.gal-side button:hover img{opacity:.86}
.gal-side button[aria-current="true"]{box-shadow:0 0 0 2.5px var(--forest)}

.fiche-body{display:grid; grid-template-columns:1fr 372px; gap:56px; align-items:start; padding-bottom:96px}
.fblock{padding-bottom:34px; margin-bottom:34px; border-bottom:1px solid var(--line)}
.fblock:last-child{border-bottom:0; margin-bottom:0; padding-bottom:0}
.fblock h2{font-size:1.32rem; margin-bottom:16px}
.fblock p{color:var(--ink-2)}
.specs{display:grid; grid-template-columns:repeat(auto-fit,minmax(148px,1fr)); gap:2px; background:var(--line); border:1px solid var(--line); border-radius:var(--r); overflow:hidden}
.spec{background:var(--paper); padding:16px 18px}
.spec span{display:block; font-size:.78rem; color:var(--muted); letter-spacing:.03em; text-transform:uppercase; font-weight:500}
.spec b{font-family:var(--f-disp); font-weight:600; font-size:1.02rem; margin-top:3px; display:block}
.ticks{display:grid; grid-template-columns:1fr 1fr; gap:11px 24px}
.ticks li{display:grid; grid-template-columns:auto 1fr; gap:11px; align-items:start; font-size:.965rem; color:var(--ink-2)}
.ticks svg{color:var(--forest); margin-top:5px; flex:none}

.sticky{position:sticky; top:104px}
.side-card{padding:26px}
.side-card .price{display:flex; align-items:baseline; gap:8px; margin-bottom:4px}
.side-card .price b{font-family:var(--f-disp); font-weight:700; font-size:1.72rem; letter-spacing:-.03em}
.side-card .price span{color:var(--muted); font-size:.9rem}
.side-card .avail{font-size:.9rem; color:var(--forest); font-weight:600; font-family:var(--f-disp); margin-bottom:20px}
.side-sep{height:1px; background:var(--line); margin:20px 0}
.side-tel{display:flex; align-items:center; justify-content:center; gap:9px; font-size:.93rem; color:var(--ink-2)}
.side-tel a{font-family:var(--f-disp); font-weight:600; color:var(--ink)}

.similar{background:var(--sand); border-top:1px solid var(--line); padding:76px 0}

/* ─────────────────────────── 18. Révélation au scroll ─────────────────────────── */
[data-reveal]{opacity:0; transform:translateY(16px); transition:opacity .7s var(--ease), transform .7s var(--ease)}
[data-reveal].in{opacity:1; transform:none}
.no-js [data-reveal]{opacity:1; transform:none}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important; transition-duration:.01ms !important; scroll-behavior:auto !important}
  [data-reveal]{opacity:1; transform:none}
}

/* ─────────────────────────── 19. Responsive ─────────────────────────── */
@media (max-width:1040px){
  .grid-lg{grid-template-columns:repeat(2,1fr)}
  .fiche-body{grid-template-columns:1fr; gap:40px}
  .sticky{position:static}
  .side-card{max-width:520px}
  .split{gap:44px}
  .foot-top{grid-template-columns:1fr 1fr; gap:34px}
}
@media (max-width:880px){
  .nav,.hdr-cta{display:none}
  /* Menu mobile : le contenu passe simplement à la ligne, aucune hauteur codée en dur */
  .hdr.open .hdr-in{flex-wrap:wrap; height:auto; padding-bottom:20px; gap:0}
  .hdr.open .logo{min-height:72px}
  .hdr.open .burger{align-self:center}
  .hdr.open .nav{
    display:flex; order:3; width:100%; margin-left:0;
    flex-direction:column; align-items:stretch; gap:0;
  }
  .hdr.open .nav a{padding:15px 0; border-bottom:1px solid var(--line); font-size:1rem}
  .hdr.open .nav a::after{display:none}
  .hdr.open .hdr-cta{
    display:flex; order:4; width:100%; margin-top:18px;
    flex-direction:column-reverse; align-items:stretch; gap:14px;
  }
  .hdr.open .hdr-tel{justify-content:center}
  .burger{display:grid}
  .sec{padding:66px 0}
  .hero{margin-top:-72px; padding:calc(72px + 48px) 0 56px; min-height:auto}
  .hero h1{max-width:none}
  .hero-bg{object-position:58% 50%}
  .search{grid-template-columns:1fr; padding:8px; box-shadow:var(--sh-2)}
  .sf + .sf{box-shadow:inset 0 1px 0 var(--line)}
  .search .btn{min-height:52px; margin-top:6px}
  .split{grid-template-columns:1fr; gap:34px}
  .split .frame{order:-1}
  .frame img{aspect-ratio:3/2}
  .regions{grid-template-columns:1fr}
  .rg{min-height:206px}
  .vals{grid-template-columns:1fr}
  .val{padding:28px 0}
  .vals .val:nth-child(even){padding-left:0; box-shadow:none}
  .stats{grid-template-columns:1fr 1fr; gap:26px 16px}
  .form-wrap{grid-template-columns:1fr; gap:34px}
  .temos{grid-template-columns:1fr}
  .gal{grid-template-columns:1fr}
  .gal-side{grid-template-rows:none; grid-auto-flow:column; grid-auto-columns:1fr}
  .gal-side button{aspect-ratio:4/3}
  .fiche-title{align-items:flex-start}
  .fiche-price{text-align:left}
  .filters{top:0}
  .filters-in{gap:8px}
  .fbox input{min-width:110px}
  .fclear{margin-left:0}
}
@media (max-width:620px){
  body{font-size:16px}
  .grid-lg{grid-template-columns:1fr; gap:20px}
  .frow{grid-template-columns:1fr; gap:0}
  .ticks{grid-template-columns:1fr}
  .foot-top{grid-template-columns:1fr; gap:30px}
  .wz{padding:22px 18px}
  .q-t{font-size:1.24rem}
  .opts{grid-template-columns:1fr}
  .side-card{padding:22px 18px}
  .rail{grid-auto-columns:minmax(268px,1fr)}
  .band-in{padding:58px 0}
  .stat b{font-size:1.75rem}
  .logo-txt b{font-size:.9rem}
  .qa button{font-size:.99rem; padding:20px 0}
  .qa-body div{padding-right:8px}
}