/* Adhika Park Wissous, lot 20B : page de vente d'un local (reprise de la page Ballainvilliers, octobre 2026)
   Aucune dépendance. Tokens, typographie, layout, composants, responsive. */

@font-face { font-family: "Montserrat"; font-weight: 700; font-style: normal; font-display: swap; src: url("../fonts/montserrat-700.woff2") format("woff2"); }
@font-face { font-family: "Montserrat"; font-weight: 800; font-style: normal; font-display: swap; src: url("../fonts/montserrat-800.woff2") format("woff2"); }
@font-face { font-family: "Roboto"; font-weight: 400; font-style: normal; font-display: swap; src: url("../fonts/roboto-400.woff2") format("woff2"); }
@font-face { font-family: "Roboto"; font-weight: 500; font-style: normal; font-display: swap; src: url("../fonts/roboto-500.woff2") format("woff2"); }
@font-face { font-family: "Roboto"; font-weight: 700; font-style: normal; font-display: swap; src: url("../fonts/roboto-700.woff2") format("woff2"); }

:root {
  --navy: #181851;
  --navy-deep: #10103A;
  --ink: #181851;
  --muted: #5A6478;
  --zinc: #EEF0F3;
  --zinc-2: #D9DEE6;
  --white: #FFFFFF;
  --lime: #82BE00;
  --lime-ink: #5B8500;
  --orange: #F4711F;
  --orange-ink: #C94F00;
  --rose: #B90F69;      /* rose Adhika : essayé sur les boutons le 22 octobre 2026, remplacé par le vert (.btn-lime) le 23 octobre (retours de relecture) */
  --rose-ink: #930B53;
  --radius: 0;
  --wrap: 1180px;
  --gutter: 20px;
  --font: "Roboto", "Segoe UI", Helvetica, Arial, sans-serif;
  --font-titre: "Montserrat", "Roboto", "Segoe UI", Helvetica, Arial, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
main [id] { scroll-margin-top: 88px; }  /* en-tête collant de 64 px + respiration */
@media (max-width: 1023px) { main [id] { scroll-margin-top: calc(var(--top-h, 64px) + var(--mbar-h, 70px) + 20px); } }  /* téléphone : en plus, la barre de boutons calée sous l'en-tête */
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition: none !important; animation: none !important; } }

body {
  margin: 0;
  font-family: var(--font);
  font-weight: 400;
  font-size: 17px;
  line-height: 1.6;
  color: var(--ink);
  background: var(--white);
  font-variant-numeric: tabular-nums;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--navy); text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
a:hover { color: var(--orange-ink); }
h1, h2, h3 { margin: 0; line-height: 1.12; font-family: var(--font-titre); letter-spacing: -0.01em; }
h1 { font-weight: 800; font-size: clamp(2.5rem, 6vw, 4.4rem); line-height: 1.02; letter-spacing: -0.025em; max-width: 14ch; }
h2 { font-weight: 800; font-size: clamp(1.65rem, 3.2vw, 2.45rem); max-width: 22ch; }
h3 { font-weight: 700; font-size: 1.15rem; }
p { margin: 0 0 1em; }
strong { font-weight: 700; }
.wrap { max-width: var(--wrap); margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter); }
.intro { font-size: 1.1rem; max-width: 64ch; color: var(--ink); margin: 0.8em 0 1.6em; }
.intro-list { font-size: 1.05rem; margin: 0.8em 0 1.6em; max-width: 64ch; }
/* Puces carrées, charte Adhika */
.intro-list, details ul { list-style: none; padding-left: 0; }
.intro-list li, details ul li { position: relative; padding-left: 22px; margin-bottom: 6px; }
.intro-list li::before, details ul li::before { content: ""; position: absolute; left: 0; top: 0.5em; width: 9px; height: 9px; background: var(--lime); }
.note { color: var(--muted); font-size: 0.92rem; max-width: 70ch; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

.skip { position: absolute; left: -9999px; top: 8px; background: var(--white); color: var(--navy); padding: 8px 12px; z-index: 100; border-radius: var(--radius); }
.skip:focus { left: 8px; }

/* Boutons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 0 22px; border-radius: var(--radius);
  font: inherit; font-weight: 700; font-size: 1rem; text-decoration: none; cursor: pointer;
  border: 2px solid transparent; white-space: nowrap;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.btn-orange { background: var(--orange); color: var(--white); border-color: var(--orange); }
.btn-orange:hover { background: var(--orange-ink); border-color: var(--orange-ink); color: var(--white); }
.btn-rose { background: var(--rose); color: var(--white); border-color: var(--rose); }
.btn-rose:hover { background: var(--rose-ink); border-color: var(--rose-ink); color: var(--white); }
.btn-rose:focus-visible { outline-color: var(--navy); }
.btn-navy { background: var(--navy); color: var(--white); border-color: var(--navy); }
.btn-navy:hover { background: var(--navy-deep); color: var(--white); }
.btn-lime { background: var(--lime); color: var(--navy); border-color: var(--lime); }
.btn-lime:hover { background: #9dd44f; color: var(--navy); }
.btn-ghost { background: transparent; color: var(--white); border-color: rgba(255,255,255,.7); }
.btn-ghost:hover { background: rgba(255,255,255,.12); color: var(--white); }
.btn-ghost-navy { background: transparent; color: var(--navy); border-color: var(--navy); }
.btn-ghost-navy:hover { background: var(--zinc); color: var(--navy); }
.link-btn { background: none; border: 0; padding: 0; font: inherit; font-weight: 700; color: var(--navy); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.link-btn:hover { color: var(--orange-ink); }
:focus-visible { outline: 3px solid var(--orange); outline-offset: 3px; }
.btn-orange:focus-visible { outline-color: var(--navy); }

/* En-tête */
.top { position: sticky; top: 0; z-index: 50; background: var(--navy); color: var(--white); }
.top-row { display: flex; align-items: center; gap: 24px; min-height: 64px; }
.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--white); text-decoration: none; font-weight: 500; font-size: 1rem; margin-right: auto; }
.brand strong { font-weight: 700; }
.nav { display: none; gap: 22px; }
.nav a { color: rgba(255,255,255,.85); text-decoration: none; font-weight: 700; font-size: .95rem; }
.nav a:hover { color: var(--lime); }
.top-call { min-height: 42px; padding: 0 16px; font-size: .95rem; }

/* Hero */
.hero { position: relative; min-height: 78vh; display: flex; align-items: flex-end; color: var(--white); background: var(--navy); overflow: hidden; }
.hero-bg, .hero-bg img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; }
.hero-bg img { filter: brightness(1.08); }
.hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(24,24,81,.04) 0%, rgba(24,24,81,.28) 45%, rgba(22,31,53,.88) 100%); }
.hero-content { position: relative; z-index: 1; padding-top: 150px; padding-bottom: 56px; text-shadow: 0 2px 14px rgba(22,31,53,.55); }
.hero-where { font-weight: 700; color: var(--white); margin: 0 0 14px; padding-left: 14px; border-left: 4px solid var(--lime); line-height: 1.3; }
.hero-lead { font-size: 1.2rem; max-width: 50ch; margin: 22px 0 16px; color: rgba(255,255,255,.92); }
.hero-lead strong { display: block; margin-top: 6px; color: var(--white); font-weight: 700; font-size: 1.2em; white-space: nowrap; }
.hero-proof { text-shadow: none; list-style: none; margin: 0 0 26px; padding: 0; display: flex; flex-wrap: wrap; gap: 10px 22px; font-weight: 700; color: rgba(255,255,255,.9); }
.hero-proof li { display: inline-flex; align-items: center; gap: 8px; }
/* Tag (cartouche) : capitales espacées, filet fin, pas de fond plein, pour ne pas ressembler à un bouton */
.tag { display: inline-flex; align-items: center; gap: 8px; font-size: .8rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; line-height: 1; padding: 6px 10px; border: 1.5px solid currentColor; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; text-shadow: none; }


/* Pourquoi maintenant */
.why { padding-top: 48px; padding-bottom: 24px; }
.why h2 { max-width: none; margin-bottom: 28px; text-wrap: balance; }
.why-cols { display: grid; gap: 28px 40px; }
.why-cols h3 { margin-bottom: 8px; max-width: 26ch; }
.why-cols p { margin: 0 0 10px; color: var(--muted); max-width: 46ch; }

/* Colonnes principale + latérale */
.two-col { display: grid; gap: 48px; padding-top: 24px; }
.main-col > section { padding: 40px 0; border-top: 1px solid var(--zinc-2); }
.main-col > section:first-child { border-top: 0; }
.side { display: none; }

/* Lots */
.plan { margin: 8px 0 32px; }
.plan img { border-radius: var(--radius); border: 1px solid var(--zinc-2); }
.plan figcaption { color: var(--muted); font-size: .92rem; margin-top: 8px; }
.building { margin: 26px 0; }
.building h3 { margin-bottom: 14px; }
.lot-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.lot { position: relative; display: grid; gap: 4px; padding: 14px 14px 16px; border-radius: var(--radius); border: 2px solid var(--zinc-2); background: var(--white); min-height: 150px; }
.lot-name { font-weight: 700; font-size: 1.7rem; line-height: 1; }
.lot-surface { font-weight: 700; font-size: 1.05rem; }
.lot-status { font-weight: 700; font-size: .9rem; }
.lot-detail { font-size: .84rem; color: var(--muted); line-height: 1.3; }
.lot-price { font-size: .84rem; color: var(--muted); margin-top: 2px; line-height: 1.3; }
.lot .sim { margin-top: auto; justify-self: start; font-size: .92rem; }
.lot.is-free { border-color: var(--lime); }
.lot.is-free .lot-status { color: var(--lime-ink); }
.lot.is-sold { background: repeating-linear-gradient(135deg, var(--zinc) 0 10px, #E5E8ED 10px 12px); border-color: var(--zinc-2); color: var(--muted); min-height: 110px; }
.lot.is-sold .lot-status { color: var(--muted); }
.lot.is-sold::after { content: "Réservé"; position: absolute; top: 12px; right: 12px; font-weight: 700; font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; line-height: 1; color: var(--muted); border: 1.5px solid var(--muted); padding: 4px 8px; }
.lot.is-sold .lot-status { position: absolute; left: -9999px; }

.lots h2 { max-width: none; }

/* Programme */
.gallery { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 8px 0 28px; }
.gallery figure { margin: 0; }
.gallery img { border-radius: var(--radius); aspect-ratio: 16 / 9; object-fit: cover; width: 100%; }
.gallery figcaption { font-size: .9rem; color: var(--muted); margin-top: 6px; }
.specs details, .faq details { border-top: 1px solid var(--zinc-2); }
.specs details:last-child, .faq details:last-child { border-bottom: 1px solid var(--zinc-2); }
summary { cursor: pointer; list-style: none; padding: 16px 40px 16px 0; font-weight: 700; font-size: 1.05rem; position: relative; }
summary::-webkit-details-marker { display: none; }
summary::after { content: "+"; position: absolute; right: 8px; top: 50%; transform: translateY(-50%); font-weight: 500; font-size: 1.5rem; color: var(--lime-ink); line-height: 1; }
details[open] summary::after { content: "–"; }
details ul, details p { margin: 0 0 18px; color: var(--ink); max-width: 66ch; }
details p { padding-left: 0; }
details li { margin-bottom: 4px; }
details ul ul { margin: 6px 0 0; }
details ul ul li::before { width: 6px; height: 6px; top: 0.6em; background: var(--lime-ink); }
.brochure { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; background: var(--zinc); border-radius: var(--radius); padding: 18px 20px; margin: 28px 0; }
.brochure p { margin: 0; flex: 1 1 260px; font-weight: 700; }
.partners p { color: var(--muted); margin: 0 0 12px; }
.partners ul { list-style: none; margin: 0 0 18px; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 22px 34px; }
.partners img { width: auto; height: 64px; }
.partners-adhika { max-width: 62ch; }


/* Images agrandissables (plan + galerie) */
.plan, .gallery figure { position: relative; }
.zoomable { cursor: zoom-in; }
.plan::after, .gallery figure::after { content: ""; position: absolute; top: 10px; right: 10px; width: 34px; height: 34px; pointer-events: none; background: var(--navy) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.4'%3E%3Ccircle cx='10.5' cy='10.5' r='6'/%3E%3Cpath d='M15 15l5 5M10.5 8v5M8 10.5h5'/%3E%3C/svg%3E") center / 20px no-repeat; }
.lb { width: 100vw; height: 100vh; max-width: 100vw; max-height: 100vh; margin: 0; padding: 0; border: 0; background: transparent; overflow: hidden; }
.lb::backdrop { background: rgba(16,16,58,.94); }
.lb-stage { position: absolute; inset: 60px 64px 64px; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.lb-stage img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; cursor: zoom-in; background: var(--white); }
.lb.is-zoomed .lb-stage { display: block; overflow: auto; }
.lb.is-zoomed .lb-stage img { max-width: none; max-height: none; cursor: zoom-out; }
.lb-cap { position: absolute; left: 64px; right: 64px; bottom: 18px; margin: 0; color: var(--white); text-align: center; font-weight: 500; font-size: .95rem; }
.lb-btn { position: absolute; width: 44px; height: 44px; border: 0; border-radius: 0; background: var(--navy); color: var(--white); font: inherit; font-size: 1.8rem; line-height: 1; cursor: pointer; }
.lb-btn:hover { background: var(--lime); color: var(--navy); }
.lb-close { top: 10px; right: 10px; }
.lb-prev { left: 10px; top: 50%; transform: translateY(-50%); }
.lb-next { right: 10px; top: 50%; transform: translateY(-50%); }
@media (max-width: 699px) { .lb-stage { inset: 60px 8px 64px; } .lb-prev, .lb-next { top: auto; bottom: 10px; transform: none; } .lb-cap { left: 60px; right: 60px; } }

/* Visite */
.visite-row { display: grid; gap: 32px; }
.conseil { display: grid; gap: 8px; align-content: start; }
.conseil img { width: 120px; }   /* la photo contient déjà son rond, la tête dépasse au-dessus : ne pas la recouper */
.conseil p { margin: 0; }
.conseil-say { color: var(--muted); max-width: 40ch; }
.conseil-contact a { font-weight: 700; }
.lead { display: grid; gap: 14px; background: var(--zinc); padding: 22px; border-radius: 0; align-content: start; }
.lead label { display: block; font-weight: 700; font-size: .92rem; }
.lead label small { font-weight: 500; color: var(--muted); font-size: .85em; }
.lead input, .lead select, .lead textarea { margin-top: 4px; font: inherit; font-weight: 500; font-size: .95rem; padding: 11px 12px; border-radius: var(--radius); border: 2px solid var(--zinc-2); background: var(--white); color: var(--ink); width: 100%; }
.lead input:focus, .lead select:focus, .lead textarea:focus { outline: none; border-color: var(--navy); }
.lead input:user-invalid { border-color: var(--orange-ink); }
.f2 { display: grid; gap: 14px; }
.lead .btn { justify-self: start; }
.form-status { margin: 0; font-weight: 700; color: var(--lime-ink); min-height: 1.4em; }
.form-status.is-error { color: var(--orange-ink); }
.form-legal { margin: 0; font-size: .82rem; color: var(--muted); }

/* Latérale (desktop) */
.side-card { position: sticky; top: 84px; display: grid; gap: 10px; padding: 20px; border-radius: 0; border: 2px solid var(--zinc-2); background: var(--white); box-shadow: 0 10px 30px rgba(24,24,81,.08); }
.side-card img { width: 72px; }
.side-card p { margin: 0; }
.side-card .btn { width: 100%; }
.side-price { font-size: .95rem; line-height: 1.45; color: var(--muted); }
.side-price strong { color: var(--ink); }
.side-link { font-weight: 700; font-size: .95rem; }

/* Pied de page */
.foot { background: var(--navy); color: rgba(255,255,255,.85); margin-top: 48px; padding: 40px 0; font-size: .95rem; }
.foot a { color: var(--white); }
.foot-row { display: grid; gap: 14px; }
.foot-small { color: rgba(255,255,255,.6); font-size: .85rem; margin: 0; }

/* Barre de boutons (téléphone, tablette). Cachée en haut de page pour ne pas doubler les boutons du hero.
   Quand ceux-ci passent sous l'en-tête, js/main.js pose la classe est-visible : la barre se cale sous l'en-tête,
   comme si les boutons du hero y restaient accrochés. --top-h et --mbar-h (hauteurs mesurées) viennent aussi de main.js. */
.mobile-bar { position: fixed; left: 0; right: 0; top: var(--top-h, 64px); z-index: 40; display: grid; grid-template-columns: 1.6fr 1fr; gap: 8px 10px; padding: 10px var(--gutter); background: var(--white); border-bottom: 1px solid var(--zinc-2); box-shadow: 0 6px 16px rgba(24,24,81,.10); transform: translateY(-100%); visibility: hidden; transition: transform .22s ease, visibility 0s linear .22s; }
.mobile-bar.est-visible { transform: none; visibility: visible; transition: transform .22s ease; }
.mobile-bar .btn { min-height: 46px; padding: 0 12px; }

/* FAQ */
.faq details p { max-width: 66ch; }

/* ≥ 700 px */
@media (min-width: 700px) {
  .why-cols { grid-template-columns: repeat(3, 1fr); }
  .visite-row { grid-template-columns: 300px 1fr; }
  .f2 { grid-template-columns: 1fr 1fr; }
  .hero-content { padding-top: 140px; padding-bottom: 64px; }
}

/* ≥ 1024 px : navigation, colonne latérale, plus de barre mobile */
@media (min-width: 1024px) {
  .nav { display: flex; }
  .two-col { grid-template-columns: minmax(0, 1fr) 320px; }
  .side { display: block; }
  .mobile-bar { display: none; }
  .hero { min-height: 82vh; }
}

/* Wissous lot 20B : photo d'intérieur en hero, texte en bas, sur le parquet */
.hero::after { background: linear-gradient(180deg, rgba(24,24,81,0) 0%, rgba(24,24,81,.08) 35%, rgba(22,31,53,.62) 62%, rgba(22,31,53,.92) 100%); }
.hero h1 { font-size: clamp(2.1rem, 4.4vw, 3.6rem); max-width: 18ch; }
.hero-lead { margin: 14px 0 10px; }
.hero-proof { margin-bottom: 18px; }
.hero-bg img { object-position: 50% 30%; }
@media (max-width: 699px) {
  .hero { min-height: 0; }
  .hero-content { padding-top: 190px; padding-bottom: 28px; }
}
@media (min-width: 700px) { .hero { min-height: 88vh; } }

/* Fiche du lot : les chiffres clés */
.fiche { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 0; margin: 8px 0 26px; border: 2px solid var(--lime); }
.fiche div { padding: 16px 16px 18px; border-bottom: 1px solid var(--zinc-2); border-right: 1px solid var(--zinc-2); display: grid; gap: 4px; align-content: start; }
.fiche dt { font-size: .84rem; color: var(--muted); font-weight: 500; }
.fiche dd { margin: 0; font-weight: 700; font-size: 1.25rem; line-height: 1.2; }
.fiche .fiche-prix dd { color: var(--orange-ink); }
.fiche .fiche-dispo dd { color: var(--lime-ink); }
.conseil-nom { font-family: var(--font-titre); font-weight: 800; font-size: 1.3rem; }
.visite h2 { margin-bottom: 24px; }

/* Plaquette : demande d'e-mail ou de téléphone avant le téléchargement */
.plaquette { margin: 30px 0 0; padding: 22px; background: var(--zinc); border-left: 6px solid var(--lime); }
.plaquette h3 { margin-bottom: 6px; }
.plaquette > p { margin: 0 0 14px; color: var(--muted); }
.plaquette-form { display: grid; gap: 12px; }
.plaquette-form label { display: block; font-weight: 700; font-size: .92rem; }
.plaquette-form input { margin-top: 4px; font: inherit; font-weight: 500; font-size: .95rem; padding: 11px 12px; border-radius: var(--radius); border: 2px solid var(--zinc-2); background: var(--white); color: var(--ink); width: 100%; }
.plaquette-form input:focus { outline: none; border-color: var(--navy); }
.plaquette-form .btn { justify-self: start; }
.plaquette .plaquette-ok { margin: 0; color: var(--ink); font-weight: 700; display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.plaquette .plaquette-ok[hidden] { display: none; }
/* Lightbox : glisser du doigt pour changer de photo (js/main.js) */
.lb:not(.is-zoomed) .lb-stage { touch-action: pan-y pinch-zoom; }

/* Ordinateur : hero moins haut, le début de la section suivante reste visible sous la photo (demande de Bérénice, 23 octobre 2026) */
@media (min-width: 1024px) {
  .hero { min-height: min(62vh, 620px); }
  .hero-content { padding-top: 100px; padding-bottom: 44px; }
}

/* Ordinateur : même hauteur de photo d'accueil sur les trois pages programme (Lamorlaye, Ballainvilliers, Wissous lot 20B),
   celle de Lamorlaye avec son offre (demande de Bérénice, 23 octobre 2026). Le titre de la section suivante reste visible sur un écran de 900 px. */
@media (min-width: 1024px) {
  .hero { min-height: 680px; }
}

/* Survol des liens en vert, plus d'orange (demande de Bérénice, 23 octobre 2026) : vert foncé sur fond blanc (lisible), vert vif sur fond marine */
a:hover, .link-btn:hover { color: var(--lime-ink); }
.brand:hover, .top a:not(.btn):hover, .foot a:not(.btn):hover, .hero a:not(.btn):hover, .sim a:not(.btn):hover { color: var(--lime); }