/* ZORI « Ailleurs » : lumière, retenue, preuves lisibles. Vert profond et or de la marque ZORI. */
:root {
  --vert: #182e29;
  --vert-2: oklch(0.34 0.035 170);
  --or: #d9b36c;
  --or-texte: #8f6e22;                 /* or lisible sur fond clair (WCAG AA) */
  --fond: oklch(0.992 0.003 170);
  --fond-2: oklch(0.965 0.007 170);
  --encre: oklch(0.25 0.025 170);
  --encre-2: oklch(0.43 0.02 170);
  --filet: oklch(0.87 0.012 170);
  --vendu: oklch(0.52 0.12 150);
  --option: oklch(0.72 0.11 80);
  --display: 'Bodoni Moda', 'Didot', 'Times New Roman', serif;
  --nuit: #0f1d1a;                     /* fond de la partie rêve, sous les cartes vert profond */
  --nuit-texte: rgb(255 255 255 / .82);
  --texte: 'Hanken Grotesk', system-ui, sans-serif;
  --signature: 'Brittany Signature', cursive;
  --coin: 22px 0 22px 0;               /* coin diagonal, signature ZORI */
  --marge: clamp(1.25rem, 5vw, 5rem);
  --large: 78rem;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --z-tete: 30; --z-flottant: 40; --z-visionneuse: 50;
}
@font-face { font-family: 'Brittany Signature'; src: url('/assets/BrittanySignature.woff2') format('woff2'); font-display: swap; }

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--fond); color: var(--encre); font: 400 1.0625rem/1.65 var(--texte); -webkit-font-smoothing: antialiased; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
h1, h2, h3 { font-family: var(--display); font-weight: 400; font-optical-sizing: auto; line-height: 1.08; letter-spacing: -0.01em; text-wrap: balance; margin: 0; color: var(--vert); }
h2 { font-size: clamp(2rem, 4.2vw, 3.25rem); }
p { margin: 0 0 1em; text-wrap: pretty; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.saut { position: absolute; left: -999px; top: 0; background: var(--vert); color: #fff; padding: .75rem 1rem; z-index: 100; }
.saut:focus { left: 1rem; }
:focus-visible { outline: 2px solid var(--or-texte); outline-offset: 3px; }

section { padding: clamp(4.5rem, 10vw, 9rem) var(--marge); max-width: calc(var(--large) + 2 * var(--marge)); margin: 0 auto; }
.intro { max-width: 40rem; margin-bottom: clamp(2rem, 4vw, 3.5rem); }
.intro h2 { margin-bottom: 1rem; }
.note { font-size: .875rem; color: var(--encre-2); max-width: 48rem; margin-top: 1.5rem; }
.sous-titre { font-family: var(--display); font-size: clamp(1.25rem, 2vw, 1.6rem); color: var(--vert); line-height: 1.3; margin-bottom: 1rem; }

/* Boutons */
.bouton { display: inline-flex; align-items: center; gap: .5rem; padding: .95rem 1.6rem; border-radius: var(--coin); font: 500 .95rem/1 var(--texte); text-decoration: none; letter-spacing: .01em; transition: background-color .3s var(--ease), color .3s var(--ease), transform .3s var(--ease); cursor: pointer; border: 0; }
.bouton-plein { background: var(--vert); color: #fff; }
.bouton-plein:hover { background: var(--vert-2); }
.bouton-clair { background: rgb(255 255 255 / .92); color: var(--vert); }
.bouton-clair:hover { background: #fff; transform: translateY(-1px); }

/* En-tête : transparent sur l'image d'ouverture, blanc ensuite */
.tete { position: fixed; inset: 0 0 auto; z-index: var(--z-tete); display: flex; align-items: center; gap: 2rem; padding: .9rem var(--marge); transition: background-color .4s var(--ease), box-shadow .4s var(--ease), transform .5s var(--ease); }
.tete.est-cache { transform: translateY(-110%); }
.tete-logo img { height: 46px; width: auto; }
.tete-nav { display: flex; gap: 1.75rem; margin-left: auto; font-size: .95rem; }
.tete-nav a { text-decoration: none; color: #fff; text-shadow: 0 1px 12px rgb(0 0 0 / .35); }
.tete-nav a:hover { text-decoration: underline; text-underline-offset: .35em; text-decoration-color: var(--or); }
.tete-droite { display: flex; align-items: center; gap: 1.25rem; }
.langues { display: flex; gap: .75rem; list-style: none; margin: 0; padding: 0; font-size: .85rem; }
.langues a { text-decoration: none; color: #fff; opacity: .75; }
.langues a[aria-current] { opacity: 1; text-decoration: underline; text-decoration-color: var(--or); text-underline-offset: .35em; }
.tete.est-pleine { background: rgb(255 255 255 / .97); box-shadow: 0 1px 0 var(--filet); }
.tete.est-pleine .tete-nav a, .tete.est-pleine .langues a { color: var(--vert); text-shadow: none; }
.tete .bouton { padding: .75rem 1.2rem; font-size: .875rem; }

.ouverture-lieu { font-size: .95rem; letter-spacing: .04em; margin-bottom: .75rem; }
.credit, figcaption { font-size: .75rem; color: var(--encre-2); }
@keyframes monte { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }

/* Arche : le cadre des portes rondes en teck des villas */
.arche { margin: 0; overflow: hidden; border-radius: 999px 999px 0 0; aspect-ratio: 3 / 4; }
.arche img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
a:hover .arche img, .arche:hover img { transform: scale(1.04); }




/* Le domaine : plan et liste liés */
.domaine-grille { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(2rem, 5vw, 5rem); align-items: start; }
.plan { margin: 0; position: sticky; top: 6rem; }
.plan svg { width: 100%; height: auto; max-height: 78vh; display: block; }
.lot polygon { fill: #fff; stroke: var(--vert); stroke-width: .7; transition: fill .3s var(--ease); }
.lot text { font: 400 9px var(--display); fill: var(--vert); text-anchor: middle; dominant-baseline: middle; pointer-events: none; }
.lot a { cursor: pointer; }
.lot a:focus-visible { outline: none; }
.lot a:focus-visible polygon { stroke-width: 1.6; stroke: var(--or-texte); }
.lot.est-actif polygon, .lot a:hover polygon { fill: oklch(0.93 0.04 85); }
.lot-terrain polygon { fill: var(--fond-2); stroke-dasharray: 2.5 2; }
.lot-option polygon { fill: oklch(0.95 0.05 85); }
.lot-vendu polygon { fill: oklch(0.94 0.03 150); }
.lot-indisponible polygon { fill: var(--fond-2); stroke: var(--filet); }
.lot-indisponible text { fill: var(--encre-2); }
.pastille { fill: var(--vendu); }
.pastille-coche { fill: none; stroke: #fff; stroke-width: 1.1; stroke-linecap: round; stroke-linejoin: round; }
.plan-entree { font: italic 400 8px var(--texte); fill: var(--encre-2); text-anchor: middle; }
.plan-nord path { fill: var(--vert); }
.plan-nord text { font: 400 7px var(--texte); fill: var(--vert); text-anchor: middle; }
.legende { display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; margin-top: 1rem; font-size: .8rem; color: var(--encre-2); }
.leg { display: inline-flex; align-items: center; gap: .45rem; }
.leg::before { content: ''; width: .9rem; height: .9rem; border: 1px solid var(--vert); background: #fff; }
.leg-option::before { background: oklch(0.95 0.05 85); }
.leg-vendu::before { display: none; }
.leg-hors::before { background: var(--fond-2); border-color: var(--filet); }
.coche { width: 1em; height: 1em; }
.leg-vendu .coche { width: .95rem; height: .95rem; color: #fff; background: var(--vendu); border-radius: 50%; padding: 1px; }

.liste-villas table { width: 100%; border-collapse: collapse; font-size: .95rem; }
.liste-villas th, .liste-villas td { text-align: left; padding: .85rem .5rem; border-bottom: 1px solid var(--filet); font-weight: 400; }
.liste-villas thead th { font-size: .8rem; color: var(--encre-2); border-bottom-color: var(--vert); }
.liste-villas tbody th a { font-family: var(--display); font-size: 1.15rem; color: var(--vert); text-decoration: none; }
.liste-villas tbody tr { transition: background-color .25s var(--ease); }
.liste-villas tbody tr.est-actif, .liste-villas tbody tr:hover { background: oklch(0.97 0.025 85); }
.liste-villas td:last-child, .liste-villas th:last-child { text-align: right; white-space: nowrap; }
.prix-cellule { font-variant-numeric: tabular-nums; }
.ligne-vendu th a, .ligne-vendu td { color: var(--encre-2); }
.badge-vendu { display: inline-flex; align-items: center; gap: .35rem; font-size: .85rem; font-weight: 600; color: var(--vendu); letter-spacing: .03em; text-transform: uppercase; }
.badge-vendu .coche { color: #fff; background: var(--vendu); border-radius: 50%; padding: 2px; width: 1.1em; height: 1.1em; }
.badge-option { display: inline-block; font-size: .75rem; padding: .15rem .5rem; border: 1px solid var(--or-texte); color: var(--or-texte); border-radius: 8px 0 8px 0; margin-left: .35rem; }
.badge-grand { font-size: 1rem; margin-bottom: 1rem; }

/* Accueil */
.accueil { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.accueil-image { margin: 0; }
.accueil-image img { border-radius: var(--coin); aspect-ratio: 4 / 3; object-fit: cover; width: 100%; }
.accueil-image figcaption { margin-top: .5rem; }
.accueil h2 { margin-bottom: 2rem; }
.accueil dl, .roles-liste { margin: 0; }
.accueil dl div, .roles-liste div { padding: 1.1rem 0; border-top: 1px solid var(--filet); }
.accueil dt, .roles-liste dt { font-family: var(--display); font-size: 1.25rem; color: var(--vert); margin-bottom: .35rem; }
.accueil dd, .roles-liste dd { margin: 0; color: var(--encre-2); }

/* Terrains : des tableaux encadrés */
.tableaux { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: clamp(1.5rem, 4vw, 3.5rem); max-width: 56rem; }
.tableau { display: block; text-decoration: none; margin: 0; }
.cadre { display: block; padding: clamp(1.25rem, 3vw, 2.25rem); background: #fff; outline: 1px solid var(--or); outline-offset: -10px; box-shadow: 0 0 0 1px var(--filet), 0 24px 48px -28px rgb(24 46 41 / .35); aspect-ratio: 4 / 5; transition: box-shadow .5s var(--ease), transform .5s var(--ease); }
.cadre svg { width: 100%; height: 100%; }
.cadre polygon { fill: var(--fond-2); stroke: var(--vert); stroke-width: .6; vector-effect: non-scaling-stroke; }
a.tableau:hover .cadre { transform: translateY(-4px); box-shadow: 0 0 0 1px var(--filet), 0 34px 60px -30px rgb(24 46 41 / .45); }
.tableau-legende { display: flex; justify-content: space-between; gap: 1rem; margin-top: 1rem; color: var(--encre-2); font-size: .95rem; }
.tableau-nom { font-family: var(--display); font-size: 1.25rem; color: var(--vert); }

/* Garanties : frise */
/* Séparateur fin, aligné sur le contenu */
.terrains, .garanties, .roles { background: linear-gradient(var(--filet), var(--filet)) top center / calc(100% - 2 * var(--marge)) 1px no-repeat; }
.marque { font-family: var(--display); font-size: 1.15rem; color: var(--or-texte); margin-bottom: .5rem; }
.frise { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--vert); }
.frise li { position: relative; padding: 2rem 1.5rem 0 0; }
.frise li::before { content: ''; position: absolute; top: -5px; left: 0; width: 9px; height: 9px; border-radius: 50%; background: var(--or); }
.frise li:last-child::before { width: 13px; height: 13px; top: -7px; background: var(--vert); box-shadow: 0 0 0 4px var(--fond), 0 0 0 5px var(--or); }
.frise-duree { display: block; font-family: var(--display); font-size: clamp(1.75rem, 3vw, 2.5rem); color: var(--vert); margin-bottom: .75rem; }
.frise li:last-child .frise-duree { font-size: clamp(2.25rem, 4vw, 3.25rem); }
.frise p { font-size: .95rem; color: var(--encre-2); }

/* Chiffres : la seule bande vert profond de la page */
.chiffres { max-width: none; background: var(--vert); color: rgb(255 255 255 / .86); }
.chiffres > * { max-width: var(--large); margin-left: auto; margin-right: auto; }
.signature-intro { font-family: var(--signature); color: var(--or); font-size: clamp(2rem, 4vw, 3rem); font-weight: 400; margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.chiffres-grille { display: grid; grid-template-columns: repeat(3, 1fr); }
.chiffre { padding: 0 2rem 0 0; }
.chiffre + .chiffre { border-left: 1px solid rgb(217 179 108 / .45); padding-left: 2rem; }
.chiffre-label { font-size: .9rem; color: var(--or); margin-bottom: .75rem; }
.chiffre-valeur { font-family: var(--display); font-size: clamp(2.1rem, 4vw, 3.4rem); color: #fff; line-height: 1.05; margin-bottom: .75rem; font-variant-numeric: lining-nums; }
.chiffre-valeur span { font-size: .5em; color: rgb(255 255 255 / .7); }
.chiffre-note { font-size: .9rem; }
.chiffres-exemple { font-family: var(--display); font-size: clamp(1.2rem, 2vw, 1.5rem); color: #fff; margin-top: clamp(2.5rem, 5vw, 3.5rem); padding-top: 2rem; border-top: 1px solid rgb(217 179 108 / .45); }
.chiffres-hypotheses { font-size: .82rem; color: rgb(255 255 255 / .72); margin-top: 1.5rem; }
.chiffres-hypotheses, .chiffres-exemple { padding-right: max(0px, calc(100% - 60rem)); }

/* Paiement */
.etapes { list-style: none; margin: 2.5rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(6, 1fr); counter-reset: e; }
.etapes li { padding: 1.25rem 1rem 0 0; border-top: 1px solid var(--vert); display: flex; flex-direction: column; gap: .5rem; font-size: .92rem; color: var(--encre-2); }
.etape-part { font-family: var(--display); font-size: clamp(1.5rem, 2.4vw, 2rem); color: var(--vert); }

/* Rôles */
.roles { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(2rem, 6vw, 6rem); align-items: center; }
.roles h2 { margin-bottom: 2rem; }

/* Questions */
.faq { max-width: calc(52rem + 2 * var(--marge)); }
.faq h2 { margin-bottom: 2rem; }
.faq details { border-top: 1px solid var(--filet); }
.faq details:last-of-type { border-bottom: 1px solid var(--filet); }
.faq summary { cursor: pointer; list-style: none; padding: 1.25rem 2.5rem 1.25rem 0; font-family: var(--display); font-size: 1.25rem; color: var(--vert); position: relative; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ''; position: absolute; right: .5rem; top: 50%; width: 12px; height: 12px; border-right: 1px solid var(--or-texte); border-bottom: 1px solid var(--or-texte); transform: translateY(-75%) rotate(45deg); transition: transform .3s var(--ease); }
.faq details[open] summary::after { transform: translateY(-25%) rotate(-135deg); }
.faq details p { color: var(--encre-2); padding-bottom: 1.25rem; max-width: 44rem; }

/* Contact */
.contact { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(2rem, 6vw, 6rem); background: var(--fond-2); max-width: none; padding-left: max(var(--marge), calc((100vw - var(--large)) / 2)); padding-right: max(var(--marge), calc((100vw - var(--large)) / 2)); }
.contact h2 { margin-bottom: 1.25rem; }
.lien-whatsapp, .lien-retour { color: var(--or-texte); font-weight: 500; text-decoration: none; }
.lien-whatsapp:hover, .lien-retour:hover { text-decoration: underline; }
.formulaire { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem 1.5rem; }
.champ { display: flex; flex-direction: column; gap: .4rem; font-size: .875rem; color: var(--encre-2); }
.champ em { font-style: normal; opacity: .8; }
.champ-large, .consent, .formulaire .message, .formulaire button { grid-column: 1 / -1; }
/* Formulaire « dossier » : les trois questions de qualification (projet, budget, financement) sur une ligne. */
.qualif-trio { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem 1.5rem; }
.formulaire-pret { display: flex; flex-direction: column; align-items: flex-start; gap: 1.25rem; }
.champ input, .champ select, .champ textarea { font: inherit; font-size: 1rem; color: var(--encre); background: #fff; border: 1px solid var(--filet); border-radius: 10px 0 10px 0; padding: .8rem .9rem; transition: border-color .2s; }
.champ input:focus, .champ select:focus, .champ textarea:focus { border-color: var(--or-texte); outline: none; box-shadow: 0 0 0 3px rgb(217 179 108 / .25); }
.consent { display: flex; gap: .65rem; align-items: flex-start; font-size: .85rem; color: var(--encre-2); }
.consent input { margin-top: .25rem; accent-color: var(--vert); }
.formulaire button { justify-self: start; }
.piege { position: absolute; left: -9999px; }
.message { padding: 1rem 1.25rem; border-radius: var(--coin); margin: 0; }
.message-ok { background: oklch(0.94 0.04 150); color: oklch(0.32 0.08 150); }
.message-erreur { background: oklch(0.95 0.03 30); color: oklch(0.4 0.12 30); }

/* Pied de page : la structure du site zori.immo */
.pied { background: #f3f4f6; border-top: 1px solid #e5e7eb; text-align: center; padding: clamp(3.5rem, 7vw, 5rem) var(--marge) 6rem; color: var(--vert); }
.pied .signature { font-family: var(--signature); font-size: clamp(1.75rem, 3vw, 2.4rem); color: var(--vert); margin-bottom: 1.5rem; }
.pied-logo { height: 90px; width: auto; margin: 0 auto 1.5rem; }
.pied-contact { font-size: .9rem; line-height: 1.8; }
.pied-contact a { text-decoration-color: rgb(217 179 108 / .5); text-underline-offset: 4px; }
.pied-label, .pied-legal dt { display: block; color: var(--or-texte); font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; font-weight: 600; margin-bottom: .25rem; }
.pied-legal { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem 3rem; max-width: 44rem; margin: 2.5rem auto; padding: 2.5rem 0; border-top: 1px solid #e5e7eb; border-bottom: 1px solid #e5e7eb; }
.pied-legal dd { margin: 0; font-size: .82rem; color: var(--encre-2); }
.pied-mentions { font-size: .8rem; color: var(--encre-2); max-width: 44rem; margin: 0 auto 2rem; }
.pied-liens { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem 1.75rem; font-size: .8rem; letter-spacing: .08em; text-transform: uppercase; font-weight: 600; margin-bottom: 1.25rem; }
.pied-liens a { text-decoration: none; }
.pied-liens a:hover { color: var(--or-texte); }
.pied-copy { font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--encre-2); margin: 0; }

/* WhatsApp flottant */
.whatsapp { position: fixed; right: 1.25rem; bottom: 1.25rem; z-index: var(--z-flottant); width: 3.25rem; height: 3.25rem; border-radius: 50%; background: var(--vert); color: var(--or); display: grid; place-items: center; box-shadow: 0 10px 30px -10px rgb(24 46 41 / .6); transition: transform .3s var(--ease); }
.whatsapp:hover { transform: translateY(-2px); }
.whatsapp svg { width: 1.6rem; height: 1.6rem; }

/* Page villa */
.fil { max-width: calc(var(--large) + 2 * var(--marge)); margin: 0 auto; padding: 1rem var(--marge) 0; font-size: .875rem; color: var(--encre-2); display: flex; gap: .6rem; }
.fil a { color: var(--or-texte); text-decoration: none; }
.villa-tete { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: center; padding-top: clamp(1.5rem, 3vw, 2.5rem); }
.villa-image { margin: 0; }
.villa-image img { border-radius: var(--coin); aspect-ratio: 4 / 3; object-fit: cover; width: 100%; }
.villa-image figcaption { margin-top: .5rem; }
.villa-tete h1 { font-size: clamp(2.75rem, 6vw, 4.5rem); margin-bottom: 1rem; }
.villa-specs { list-style: none; padding: 0; margin: 1.5rem 0; }
.villa-specs li { padding: .7rem 0; border-top: 1px solid var(--filet); font-size: .98rem; }
.villa-specs li:last-child { border-bottom: 1px solid var(--filet); }
.villa-prix { font-family: var(--display); font-size: clamp(2rem, 3.5vw, 2.75rem); color: var(--vert); margin: 1.5rem 0; }
.villa-prix span { font-family: var(--texte); font-size: .9rem; color: var(--encre-2); margin-left: .35rem; }
.villa-terrain, .villa-vendue { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); }
.villa-vendue { grid-template-columns: minmax(0, 48rem); padding-bottom: 2rem; }
.tableau-grand .cadre { max-width: 30rem; margin-left: auto; }
.galerie h2 { margin-bottom: 2rem; }
.galerie-liste { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 18rem), 1fr)); gap: 1rem; }
.galerie-liste a { display: block; overflow: hidden; border-radius: 16px 0 16px 0; }
.galerie-liste img { aspect-ratio: 3 / 2; object-fit: cover; width: 100%; transition: transform 1s var(--ease); }
.galerie-liste a:hover img { transform: scale(1.04); }
.chiffres-villa { margin-top: 2rem; }
/* Plan de principe d'une villa (SVG inline) : une feuille claire, une seule bordure, rien d'autre. */
.v-plan { padding-bottom: clamp(2.5rem, 5vw, 4rem); }
.v-plan .signature-intro { margin-bottom: clamp(1.5rem, 3vw, 2.5rem); }
.v-plan figure { margin: 0; padding: clamp(.75rem, 2vw, 1.5rem); background: #F3EEE4; border-radius: 24px 0 24px 0; }
.v-plan svg { display: block; width: 100%; height: auto; max-height: 78vh; }
.v-plan figure:has(img.planche) { padding: 0; background: #F4EEEC; overflow: hidden; }
.v-plan img.planche { display: block; width: 100%; height: auto; max-height: 86vh; object-fit: contain; }
.v-plan .note { margin-top: 1rem; max-width: 48rem; }
.autres h2 { margin-bottom: 2rem; }
.autres-liste { list-style: none; margin: 0 0 2rem; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: clamp(1.5rem, 3vw, 2.5rem); }
.autres-liste a { text-decoration: none; display: block; }
.autres-liste .arche { display: block; }
.autres-nom { display: block; font-family: var(--display); font-size: 1.4rem; color: var(--vert); margin-top: 1rem; }
.autres-detail { display: block; color: var(--encre-2); font-size: .92rem; }

/* Visionneuse d'images (amélioration progressive) */
.visionneuse { position: fixed; inset: 0; z-index: var(--z-visionneuse); background: rgb(10 22 19 / .92); display: grid; place-items: center; padding: 3rem 1rem; border: 0; max-width: none; max-height: none; width: 100%; height: 100%; }
.visionneuse:not([open]) { display: none; }
.visionneuse::backdrop { background: transparent; }
.visionneuse img { max-height: 86vh; width: auto; border-radius: 6px; }
.visionneuse button { position: absolute; top: 1rem; right: 1rem; background: none; border: 1px solid rgb(255 255 255 / .5); color: #fff; border-radius: 50%; width: 2.75rem; height: 2.75rem; font-size: 1.25rem; cursor: pointer; }

/* Apparition douce : le contenu est visible par défaut, l'animation ne fait que l'accompagner */
.js .apparait { opacity: 0; transform: translateY(24px); transition: opacity 1s var(--ease), transform 1s var(--ease); }
.js .apparait.est-visible { opacity: 1; transform: none; }

/* Tablette */
@media (max-width: 1000px) {
  .tete-nav { display: none; }
  .tete-droite { margin-left: auto; }
  .domaine-grille, .accueil, .roles, .contact, .villa-tete, .villa-terrain { grid-template-columns: 1fr; }
  .plan { position: static; max-width: 32rem; }
  .frise { grid-template-columns: repeat(2, 1fr); row-gap: 2.5rem; }
  .etapes { grid-template-columns: repeat(3, 1fr); row-gap: 2rem; }
  .roles-arche { max-width: 20rem; }
  .tableau-grand .cadre { margin-left: 0; }
}
/* Téléphone */
@media (max-width: 700px) {
  body { font-size: 1rem; }
  .tete { gap: 1rem; }
  .tete-logo img { height: 36px; }
  .tete .bouton { padding: .6rem .9rem; font-size: .8rem; }
  .chiffres-grille { grid-template-columns: 1fr; gap: 2rem; }
  .chiffre + .chiffre { border-left: 0; padding-left: 0; border-top: 1px solid rgb(217 179 108 / .45); padding-top: 2rem; }
  .frise, .etapes { grid-template-columns: 1fr; }
  .formulaire { grid-template-columns: 1fr; }
  .qualif-trio { grid-template-columns: 1fr; }
  .pied-legal { grid-template-columns: 1fr; }
  .liste-villas td:nth-child(3), .liste-villas th:nth-child(3) { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .js .apparait { opacity: 1; transform: none; }
}

/* ============================================================
   Partie rêve : une idée par écran, cartes vert profond sur fond nuit
   ============================================================ */
.page-projet, .page-villa { background: var(--nuit); }
.zone-nuit { background: var(--nuit); color: var(--nuit-texte); padding: .9rem 0 .1rem; }
.zone-jour { background: var(--fond); padding-top: .1rem; }

/* En-tête selon la zone traversée */
.tete.est-sombre { background: rgb(15 29 26 / .86); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: 0 1px 0 rgb(217 179 108 / .18); }
.tete-nav a, .tete .langues a { transition: color .3s var(--ease); }
.tete .bouton-plein { background: #fff; color: var(--vert); }
.tete.est-pleine .bouton-plein { background: var(--vert); color: #fff; }

.carte { position: relative; max-width: none; margin: 0 clamp(.5rem, 1.2vw, 1.1rem) clamp(.5rem, 1.2vw, 1.1rem); padding: clamp(5.5rem, 8vw, 7.5rem) clamp(1.25rem, 4.5vw, 4.5rem) clamp(2.5rem, 5vw, 4.5rem); min-height: calc(var(--ecran, 100svh) - 2.2rem); border-radius: clamp(14px, 2vw, 28px); background: var(--vert); overflow: hidden; }
.carte h1, .carte h2, .carte h3 { color: #fff; }
.carte p { color: var(--nuit-texte); }
.carte .note { color: rgb(255 255 255 / .6); }
.repere { font-family: var(--display); font-style: italic; font-size: 1.05rem; color: var(--or); margin: 0 0 1.25rem; letter-spacing: .01em; }
.titre-carte, .monument { font-family: var(--display); font-weight: 400; text-transform: uppercase; letter-spacing: -0.015em; line-height: .98; }
.titre-carte { font-size: clamp(2.6rem, 5.4vw, 5.25rem); }
.titre-carte em, .monument em, .accroche em, .diapo-titre em { font-style: italic; }
.ligne { display: block; overflow: hidden; padding-bottom: .04em; }
.ligne-in { display: inline-block; }
.pilule { display: inline-flex; align-items: center; white-space: nowrap; flex-shrink: 0; padding: .7rem 1.35rem; border-radius: 999px; background: #fff; color: var(--vert); font-size: .82rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; text-decoration: none; transition: background-color .3s var(--ease), transform .3s var(--ease); }
.pilule:hover { background: var(--or); transform: translateY(-1px); }
.revele { margin: 0; overflow: hidden; }
.revele img { width: 100%; height: 100%; object-fit: cover; }
.c-fond, .c-fond img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; margin: 0; }

/* 1. Ouverture */
.c-ouverture { display: grid; align-items: end; padding-bottom: clamp(2rem, 4vw, 3.5rem); }
.c-ouverture::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgb(8 18 15 / .5) 0%, rgb(8 18 15 / 0) 30%, rgb(8 18 15 / .1) 55%, rgb(8 18 15 / .78) 100%); pointer-events: none; }
.c-ouverture-bas { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(15rem, 22rem); gap: 2rem clamp(2rem, 5vw, 5rem); align-items: end; }
.monument { color: #fff; font-size: clamp(4.25rem, 13.5vw, 13rem); margin: 0; }
.c-ouverture-cote { padding-bottom: .6rem; }
.accroche { font-family: var(--display); text-transform: uppercase; font-size: clamp(1.1rem, 1.6vw, 1.4rem); line-height: 1.2; color: #fff !important; margin-bottom: 1rem; }
.c-ouverture-cote p { font-size: .95rem; }
.defiler { display: inline-flex; gap: .6rem; align-items: center; margin-top: .75rem; color: #fff; font-size: .78rem; letter-spacing: .16em; text-transform: uppercase; text-decoration: none; }
.defiler::after { content: ''; width: 2.5rem; height: 1px; background: var(--or); }
.c-ouverture .credit { position: absolute; right: clamp(1.25rem, 4.5vw, 4.5rem); top: clamp(5.5rem, 8vw, 7rem); z-index: 1; color: rgb(255 255 255 / .62); margin: 0; }

/* 2. Vivre ici */
.c-vivre { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 4fr) minmax(0, 3fr); gap: clamp(1.5rem, 4vw, 4rem); align-items: stretch; }
.c-vivre-gauche { display: flex; flex-direction: column; justify-content: space-between; }
.c-vivre-image { border-radius: 4px; aspect-ratio: 3 / 4; align-self: center; }
.c-vivre-texte { align-self: start; padding-top: 2.5rem; font-size: .98rem; }
.c-vivre-texte .pilule { margin-top: 1rem; }

/* 3. Repères chiffrés, en quinconce */
.c-reperes { display: flex; flex-direction: column; }
.reperes { flex: 1; display: grid; grid-template-columns: repeat(12, 1fr); grid-template-rows: repeat(3, minmax(9rem, auto)); gap: 1rem; margin: 0; }
.reperes div { color: #fff; }
.reperes dt { font-family: var(--display); font-size: clamp(4rem, 9vw, 8.5rem); line-height: .9; color: #fff; font-variant-numeric: lining-nums; }
.reperes .unite { font-style: italic; font-size: .3em; margin-left: .35em; color: var(--or); }
.reperes dd { margin: .6rem 0 0; max-width: 15rem; font-size: .9rem; color: var(--nuit-texte); }
.repere-1 { grid-column: 1 / span 4; grid-row: 2; align-self: center; }
.repere-2 { grid-column: 7 / span 3; grid-row: 1; }
.repere-3 { grid-column: 10 / span 3; grid-row: 1; }
.repere-4 { grid-column: 5 / span 4; grid-row: 3; align-self: end; }

/* 4. Engagements : panneaux translucides sur l'image (la seule surface vitrée de la page) */
.c-engagements { display: grid; grid-template-rows: auto 1fr; gap: 2rem; }
.c-engagements::after { content: ''; position: absolute; inset: 0; background: rgb(10 22 19 / .38); pointer-events: none; }
.c-engagements-tete, .panneaux { position: relative; z-index: 1; }
.c-engagements-tete { display: grid; grid-template-columns: 1fr minmax(0, 24rem); align-items: start; }
.c-engagements-tete p:not(.repere) { color: #fff; font-size: .95rem; }
.panneaux { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: clamp(.5rem, 1vw, 1rem); align-items: stretch; }
.panneaux li { position: relative; display: flex; flex-direction: column; justify-content: flex-end; min-height: 22rem; padding: 1.5rem 1.25rem; background: rgb(255 255 255 / .1); backdrop-filter: blur(14px) saturate(1.1); -webkit-backdrop-filter: blur(14px) saturate(1.1); border: 1px solid rgb(255 255 255 / .16); border-radius: 4px; }
.panneaux li:nth-child(even) { margin-top: 3rem; }
.panneau-num { position: absolute; top: 1.25rem; left: 1.25rem; font-family: var(--display); font-style: italic; color: var(--or); font-size: .95rem; }
.panneaux h3 { font-size: clamp(1.25rem, 1.8vw, 1.6rem); text-transform: uppercase; margin-bottom: .75rem; }
.panneaux p { color: #fff; font-size: .88rem; margin: 0; }

/* 5. Une journée ici : image et titre qui se chevauchent */
.c-vision { display: grid; grid-template-columns: repeat(12, 1fr); grid-template-rows: auto auto; align-items: center; column-gap: 1.5rem; }
.c-vision-image { grid-column: 1 / span 6; grid-row: 1 / span 2; aspect-ratio: 4 / 5; border-radius: 4px; }
.c-vision-titre { grid-column: 5 / span 8; grid-row: 1; position: relative; z-index: 1; align-self: end; padding-bottom: 2rem; }
.c-vision-titre .titre-carte { text-shadow: 0 2px 30px rgb(0 0 0 / .25); }
.c-vision-texte { grid-column: 8 / span 5; grid-row: 2; align-self: start; font-size: .95rem; }
.distances-nuit { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem 2rem; margin: 2rem 0 0; }
.distances-nuit dt { font-family: var(--display); font-size: 2.25rem; color: #fff; line-height: 1; }
.distances-nuit dd { margin: .35rem 0 0; font-size: .85rem; color: var(--nuit-texte); }

/* 6. Cinq signatures : liste à gauche, images superposées à droite */
.c-signatures { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.c-signatures-gauche > p:not(.repere) { font-size: .95rem; max-width: 26rem; margin-top: 1.5rem; }
.styles { list-style: none; margin: 2rem 0 0; padding: 0; border-top: 1px solid rgb(255 255 255 / .14); }
.styles button { width: 100%; text-align: left; background: none; border: 0; border-bottom: 1px solid rgb(255 255 255 / .14); color: rgb(255 255 255 / .55); font: italic 400 1.35rem/1 var(--display); padding: .9rem 0; cursor: pointer; transition: color .3s var(--ease), padding .3s var(--ease); }
.styles button:hover, .styles button[aria-pressed="true"] { color: #fff; padding-left: .75rem; }
.styles button[aria-pressed="true"]::before { content: ''; display: inline-block; width: 1.25rem; height: 1px; background: var(--or); vertical-align: middle; margin-right: .75rem; }
.c-signatures-images { position: relative; aspect-ratio: 4 / 3.3; }
.style-image { position: absolute; inset: 0 0 12% 10%; margin: 0; opacity: 0; transition: opacity .8s var(--ease); }
.style-image.est-actif { opacity: 1; }
.style-image img { width: 100%; height: 100%; object-fit: cover; border-radius: 4px; }
.style-image figcaption { position: absolute; right: 0; bottom: -1.75rem; color: rgb(255 255 255 / .55); }
.style-porte { position: absolute; left: 0; bottom: 0; width: 32%; aspect-ratio: 3 / 4; border-radius: 999px 999px 0 0; z-index: 1; box-shadow: 0 30px 60px -20px rgb(0 0 0 / .6); }

/* 7. Nos villas : carrousel par format */
.c-villas { display: flex; flex-direction: column; }
.c-villas-tete { display: flex; justify-content: space-between; align-items: baseline; }
.carrousel-nav { display: flex; gap: 1rem; }
.carrousel-nav button, .carrousel-fleches button { background: none; border: 0; color: rgb(255 255 255 / .5); font: italic 400 1rem var(--display); cursor: pointer; padding: .25rem; }
.carrousel-nav button[aria-current], .carrousel-nav button:hover { color: var(--or); }
.diapos { list-style: none; margin: 0; padding: 0; flex: 1; display: grid; position: relative; }
.diapo { grid-area: 1 / 1; display: grid; grid-template-columns: repeat(12, 1fr); grid-template-rows: 1fr auto; column-gap: 1.25rem; row-gap: 2rem; align-items: center; }
.js-carrousel .diapo { visibility: hidden; }
.js-carrousel .diapo.est-actif { visibility: visible; }
.diapo-img { display: block; overflow: hidden; border-radius: 4px; }
.diapo-img img { width: 100%; height: 100%; object-fit: cover; }
.diapo-img-1 { grid-column: 1 / span 2; grid-row: 1; aspect-ratio: 2 / 3.4; align-self: end; }
.diapo-img-2 { grid-column: 4 / span 5; grid-row: 1; aspect-ratio: 4 / 4.4; }
.diapo-img-3 { grid-column: 10 / span 3; grid-row: 1; aspect-ratio: 3 / 4.2; align-self: start; }
.diapo-titre { grid-column: 2 / span 10; grid-row: 1; position: relative; z-index: 1; text-align: center; font-size: clamp(2.4rem, 5.6vw, 5.5rem); text-transform: uppercase; line-height: .98; text-shadow: 0 2px 40px rgb(0 0 0 / .35); pointer-events: none; }
.diapo-bas { grid-column: 4 / span 6; grid-row: 2; display: flex; gap: 1.5rem; align-items: center; justify-content: center; }
.diapo-bas p { margin: 0; font-size: .92rem; }
.diapo-lots { color: var(--or); font-size: .85rem; }
.carrousel-fleches { display: flex; justify-content: flex-end; gap: .5rem; margin-top: 1rem; }
.carrousel-fleches button { font-style: normal; font-size: 1.35rem; color: #fff; width: 2.75rem; height: 2.75rem; border: 1px solid rgb(255 255 255 / .25); border-radius: 50%; }
.carrousel-fleches button:hover { border-color: var(--or); color: var(--or); }

/* Partie preuve : ton calme, titres en casse normale */
.zone-jour .chiffres { background: var(--fond-2); color: var(--encre); }
.zone-jour .signature-intro { color: var(--or-texte); }
.zone-jour .chiffre-label { color: var(--or-texte); }
.zone-jour .chiffre-valeur { color: var(--vert); }
.zone-jour .chiffre-valeur span { color: var(--encre-2); }
.zone-jour .chiffre + .chiffre { border-left-color: var(--filet); }
.zone-jour .chiffres-exemple { color: var(--vert); border-top-color: var(--filet); }
.zone-jour .chiffres-hypotheses { color: var(--encre-2); }
.zone-jour .contact { background: var(--fond); }

@media (max-width: 1000px) {
  .carte { min-height: 0; }
  .c-vivre { grid-template-columns: 1fr 1fr; }
  .c-vivre-gauche { grid-column: 1 / -1; gap: 2rem; }
  .c-vivre-texte { padding-top: 0; align-self: center; }
  .reperes { grid-template-columns: 1fr 1fr; grid-template-rows: none; gap: 3rem 1.5rem; margin-top: 2rem; }
  .repere-1, .repere-2, .repere-3, .repere-4 { grid-column: auto; grid-row: auto; align-self: start; }
  .panneaux { grid-template-columns: 1fr 1fr; }
  .panneaux li { min-height: 13rem; }
  .panneaux li:nth-child(even) { margin-top: 0; }
  .c-engagements-tete { grid-template-columns: 1fr; gap: 1rem; }
  .c-vision { grid-template-columns: 1fr; row-gap: 2rem; }
  .c-vision-image, .c-vision-titre, .c-vision-texte { grid-column: 1; grid-row: auto; }
  .c-vision-titre { padding-bottom: 0; }
  .c-signatures { grid-template-columns: 1fr; }
  .diapo-img-1 { display: none; }
  .diapo-img-2 { grid-column: 1 / span 8; }
  .diapo-img-3 { grid-column: 9 / span 4; }
  .diapo-titre { grid-column: 1 / -1; }
  .diapo-bas { grid-column: 1 / -1; justify-content: space-between; }
}
@media (max-width: 700px) {
  .carte { margin: 0 .5rem .5rem; padding: 5.25rem 1.25rem 2rem; }
  .c-ouverture { min-height: calc(var(--ecran, 100svh) - 1.4rem); }
  .c-ouverture-bas { grid-template-columns: 1fr; }
  .c-ouverture .credit { top: auto; bottom: .75rem; }
  .c-vivre { grid-template-columns: 1fr; }
  .c-vivre-image { aspect-ratio: 4 / 5; }
  .panneaux { grid-template-columns: 1fr; }
  .panneaux li { min-height: 0; padding-top: 3rem; }
  .diapo { row-gap: 1.25rem; }
  .diapo-bas { flex-direction: column; align-items: flex-start; }
  .tete-droite .bouton { display: none; }
}

/* Pages villa : la même articulation, allégée (une carte nuit en tête, le reste en clair) */
.page-villa .zone-nuit .fil { position: relative; z-index: 2; color: rgb(255 255 255 / .6); padding-top: 5.25rem; padding-bottom: .9rem; }
.page-villa .zone-nuit .fil a { color: var(--or); }
.c-villa { min-height: 0; padding-top: clamp(2.5rem, 4vw, 3.5rem); }
.c-villa .titre-carte { font-size: clamp(3.5rem, 8vw, 7.5rem); margin-bottom: 1.25rem; }
.c-villa .sous-titre { color: #fff; font-style: italic; }
.c-villa .villa-specs li { border-top-color: rgb(255 255 255 / .16); color: var(--nuit-texte); }
.c-villa .villa-specs li:last-child { border-bottom-color: rgb(255 255 255 / .16); }
.c-villa .villa-prix { color: #fff; }
.c-villa .villa-prix span { color: rgb(255 255 255 / .6); }
.c-villa .villa-image figcaption, .c-villa .note { color: rgb(255 255 255 / .55); }
.c-villa .bouton-plein { background: #fff; color: var(--vert); }
.c-villa .bouton-plein:hover { background: var(--or); }
.c-villa .badge-vendu { color: #8fd3a6; }
.c-villa .cadre { background: rgb(255 255 255 / .04); box-shadow: 0 0 0 1px rgb(255 255 255 / .12); }
.c-villa .cadre polygon { fill: rgb(255 255 255 / .06); stroke: var(--or); }
.page-villa .zone-jour > section:first-child { padding-top: clamp(4rem, 8vw, 7rem); }

/* Films : ouverture en boucle, séquence « Entrez » pilotée au défilement */
.c-film { opacity: 0; transition: opacity 1.4s var(--ease); }
.c-film.est-pret { opacity: 1; }
.c-entrez { position: relative; height: calc(var(--ecran, 100svh) * 3.2); margin: 0 clamp(.5rem, 1.2vw, 1.1rem) clamp(.5rem, 1.2vw, 1.1rem); max-width: none; padding: 0; }
.c-entrez-colle { position: sticky; top: .6rem; height: calc(var(--ecran, 100svh) - 1.2rem); border-radius: clamp(14px, 2vw, 28px); overflow: hidden; background: var(--vert); }
.c-entrez-film { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.c-entrez-colle::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgb(8 18 15 / .72) 0%, rgb(8 18 15 / .25) 42%, rgb(8 18 15 / 0) 65%); pointer-events: none; }
.c-entrez-texte { position: absolute; left: clamp(1.25rem, 4.5vw, 4.5rem); bottom: clamp(2.5rem, 7vh, 5rem); z-index: 1; max-width: 30rem; }
.c-entrez-texte h2 { color: #fff; margin-bottom: 1.25rem; }
.c-entrez-texte p:not(.repere) { color: #fff; font-size: 1rem; }
.c-entrez-mention { position: absolute; right: clamp(1.25rem, 4.5vw, 4.5rem); top: clamp(1.25rem, 3vw, 2rem); z-index: 1; margin: 0; font-size: .72rem; color: rgb(255 255 255 / .7); max-width: 20rem; text-align: right; }
.c-entrez-barre { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: rgb(255 255 255 / .12); z-index: 1; }
.c-entrez-barre span { display: block; height: 100%; width: 0; background: var(--or); }
@media (prefers-reduced-motion: reduce) { .c-entrez { height: auto; } .c-entrez-colle { position: relative; height: 80vh; } }
@media (max-width: 700px) { .c-entrez { margin: 0 .5rem .5rem; height: calc(var(--ecran, 100svh) * 2.6); } .c-entrez-colle::after { background: linear-gradient(0deg, rgb(8 18 15 / .8) 0%, rgb(8 18 15 / 0) 60%); } .c-entrez-mention { left: 1.25rem; right: auto; text-align: left; } }

/* ============================================================
   Composition calquée sur la référence (mesurée en % de la carte).
   Grille invisible : marge 2,5 % · colonnes 25 · 34 · 50 · 75 %.
   Tailles en unités de carte (--u = 1 % de la hauteur, bornée par la largeur).
   ============================================================ */
:root { --carte: #121a18; }
.carte { background: var(--carte); }

/* Flux par défaut (téléphone, tablette, écran étroit) pour la nouvelle structure */
.c-vivre, .c-vision, .c-signatures { display: flex; flex-direction: column; gap: 1.5rem; }
.c-vivre-image, .c-vision-grande, .c-vision-petite { border-radius: 4px; aspect-ratio: 4 / 3; }
.c-vision-petite { display: none; }
.c-filet { display: none; }
.c-signatures-images { position: relative; aspect-ratio: 4 / 3; }
.style-image { inset: 0; }
.c-ouverture .monument { font-size: clamp(3.75rem, 17vw, 13rem); }
.panneaux li h3 { margin-bottom: .5rem; }
.diapo { display: grid; }

@media (min-width: 1000px) {
  .carte { height: calc(var(--ecran, 100svh) - 1.2rem); min-height: 0; padding: 0; container-type: size; border-radius: 14px; }
  .carte > *, .carte .reperes > div, .carte .panneaux > li { position: absolute; }
  .carte { --u: min(1cqh, .6cqw); }
  .carte p, .carte dd { font-size: max(.82rem, calc(var(--u) * 1.6)); line-height: 1.55; }
  .carte .repere { left: 2.5%; top: 6%; margin: 0; font-size: calc(var(--u) * 2.3); }
  .carte .titre-carte { font-size: calc(var(--u) * 11.5); line-height: .92; letter-spacing: -.01em; margin: 0; }
  .carte .pilule { font-size: max(.72rem, calc(var(--u) * 1.3)); padding: .85em 1.6em; }

  /* 1. Ouverture ↔ ELYSE */
  .c-ouverture { display: block; }
  .c-filet { display: block; left: 2.5%; right: 2.5%; top: 8.5%; height: 1px; background: rgb(255 255 255 / .32); z-index: 1; }
  .c-ouverture .monument { left: 2.5%; bottom: 13%; margin: 0; font-size: calc(var(--u) * 26); line-height: .8; letter-spacing: -.025em; z-index: 1; }
  .c-ouverture-cote { left: 74%; top: 54%; width: 19%; z-index: 1; padding: 0; }
  .c-ouverture .accroche { font-size: calc(var(--u) * 2.5); line-height: 1.15; margin-bottom: calc(var(--u) * 2.4); }
  .c-ouverture .defiler { left: 74%; top: 83%; margin: 0; z-index: 1; font-size: max(.7rem, calc(var(--u) * 1.3)); }
  .c-ouverture .credit { right: 2.5%; left: auto; top: auto; bottom: 3%; font-size: max(.65rem, calc(var(--u) * 1.1)); }

  /* 2. Vivre ici ↔ A VISION OF INSPIRED LIVING */
  .c-vivre { display: block; }
  .c-vivre-image { left: 0; top: 0; width: 50%; height: 100%; aspect-ratio: auto; border-radius: 0; }
  .c-vivre .repere { left: 75%; top: 3%; }
  .c-vivre .titre-carte { left: 34%; top: 19%; width: 62%; z-index: 1; text-shadow: 0 2px 40px rgb(0 0 0 / .25); }
  .c-vivre-texte { left: 75%; top: auto; bottom: 7%; width: 21%; padding: 0; }
  .c-vivre-texte p { margin-bottom: 1em; }
  .c-vivre-texte .pilule { margin-top: calc(var(--u) * 3); }

  /* 3. Repères ↔ chiffres en quinconce */
  .c-reperes { display: block; }
  .c-reperes .reperes { position: absolute; inset: 0; display: block; margin: 0; }
  .reperes dt { font-size: calc(var(--u) * 17); line-height: .85; }
  .reperes .unite { font-size: .17em; margin-left: .6em; vertical-align: .9em; }
  .reperes dd { margin-top: calc(var(--u) * 1.6); max-width: 18cqw; }
  .repere-1 { left: 2.5%; top: 39%; }
  .repere-2 { left: 50%; top: 11%; }
  .repere-3 { left: 75%; top: 11%; }
  .repere-4 { left: 34%; top: 66%; }

  /* 4. Engagements ↔ panneaux translucides, coins échancrés */
  .c-engagements { display: block; }
  .c-engagements-tete { left: 75%; top: 3%; width: 18%; display: block; z-index: 1; }
  .c-engagements-tete .repere { position: static; margin-bottom: calc(var(--u) * 1.6); }
  .c-engagements .panneaux { position: absolute; inset: 0; display: block; z-index: 1; }
  .panneaux li { min-height: 0; margin: 0 !important; justify-content: flex-start; align-items: center; text-align: center; padding: calc(var(--u) * 9) 1.2cqw 0; border: 0; border-radius: 0;
    --n: calc(var(--u) * 2.4);
    -webkit-mask: radial-gradient(circle at 0 0, #0000 var(--n), #000 calc(var(--n) + .5px)) top left / 51% 100% no-repeat, radial-gradient(circle at 100% 0, #0000 var(--n), #000 calc(var(--n) + .5px)) top right / 51% 100% no-repeat;
            mask: radial-gradient(circle at 0 0, #0000 var(--n), #000 calc(var(--n) + .5px)) top left / 51% 100% no-repeat, radial-gradient(circle at 100% 0, #0000 var(--n), #000 calc(var(--n) + .5px)) top right / 51% 100% no-repeat; }
  .panneaux h3 { font-size: calc(var(--u) * 2.6); line-height: 1.1; margin-bottom: calc(var(--u) * 2.4); }
  .panneaux p { max-width: 13cqw; margin: 0 auto; }
  .panneau-num { top: auto; bottom: calc(var(--u) * 2); left: auto; right: 1cqw; font-size: max(.7rem, calc(var(--u) * 1.3)); }
  .panneau-1 { left: 2.5%; top: 0; width: 19%; height: 43%; }
  .panneau-2 { left: 26%; top: 0; width: 19%; height: 45%; }
  .panneau-3 { left: 2.5%; top: 55%; width: 19%; height: 45%; }
  .panneau-4 { left: 50%; top: 55%; width: 20%; height: 45%; }
  .panneau-5 { left: 75%; top: 60%; width: 20%; height: 40%; }

  /* 5. Une journée ici ↔ WELLNESS-CENTERED AMENITIES */
  .c-vision { display: block; }
  .c-vision-grande { left: 50%; top: 0; width: 50%; height: 100%; aspect-ratio: auto; border-radius: 0; }
  .c-vision-petite { display: block; left: 34%; top: 20%; width: 31%; height: 63%; aspect-ratio: auto; border-radius: 0; z-index: 1; box-shadow: 0 30px 70px -30px rgb(0 0 0 / .7); }
  .c-vision-texte { left: 2.5%; top: 18%; width: 30%; z-index: 2; }
  .c-vision-texte .repere { position: static; margin-bottom: calc(var(--u) * 2); }
  .c-vision .titre-carte { position: static; white-space: nowrap; font-size: calc(var(--u) * 7); margin-bottom: calc(var(--u) * 3.5); }
  .c-vision-texte > p { width: 75%; }
  .distances-nuit { grid-template-columns: 1fr 1fr; gap: calc(var(--u) * 1.6) 1.5cqw; margin-top: calc(var(--u) * 3); width: 75%; }
  .distances-nuit dt { font-size: calc(var(--u) * 3.6); }
  .distances-nuit dd { font-size: max(.7rem, calc(var(--u) * 1.2)) !important; }

  /* 6. Cinq signatures ↔ (ABOUT) */
  .c-signatures { display: block; }
  .c-signatures .repere { left: 2.5%; top: 10%; }
  .c-signatures .titre-carte { left: 2.5%; bottom: 10%; width: 30%; font-size: calc(var(--u) * 7.2); }
  .c-signatures-images { left: 34%; top: 10%; width: 34%; height: 80%; aspect-ratio: auto; }
  .style-image img { border-radius: 0; }
  .c-signatures-texte { left: 75%; top: 10%; width: 22%; }
  .c-signatures-texte .styles { margin-top: calc(var(--u) * 4); }
  .c-signatures-texte .styles button { font-size: calc(var(--u) * 2.4); padding: calc(var(--u) * 1.2) 0; }

  /* 7. Nos villas ↔ (OUR PROJECTS) */
  .c-villas { display: block; }
  .c-villas .repere { left: 2.5%; top: 5%; }
  .c-villas .carrousel-nav { right: 2.5%; top: 5%; z-index: 2; }
  .c-villas .carrousel-nav button { font-size: calc(var(--u) * 1.8); }
  .c-villas .diapos { position: absolute; inset: 0; display: block; }
  .diapo { position: absolute; inset: 0; display: block; }
  .diapo > * { position: absolute; }
  .diapo-img { border-radius: 0; aspect-ratio: auto; }
  .diapo-img-1 { display: block; left: 8.5%; top: 17%; width: 29%; height: 65%; }
  .diapo-img-2 { left: 59%; top: 44%; width: 22%; height: 37%; }
  .diapo-img-3 { left: 91%; top: 21%; width: 13%; height: 61%; }
  .diapo-titre { left: 15%; right: 15%; top: 15%; font-size: calc(var(--u) * 11); line-height: .95; z-index: 2; }
  .diapo-bas { left: 34%; top: auto; bottom: 4.5%; width: 46%; justify-content: flex-start; gap: 2.5cqw; }
  .diapo-img-1, .diapo-img-3 { height: 60% !important; }
  .diapo-img-2 { top: 40% !important; height: 34% !important; }
  .diapo-bas p { max-width: 20cqw; }
  .c-villas .carrousel-fleches { right: 2.5%; bottom: 4%; margin: 0; z-index: 2; }
  .c-villas .carrousel-fleches button { width: calc(var(--u) * 4.6); height: calc(var(--u) * 4.6); font-size: calc(var(--u) * 1.8); }

  /* Séquence « Entrez » : même cadre */
  .c-entrez-colle { border-radius: 14px; background: var(--carte); }
}

/* Ambiance sonore : coupée par défaut, un bouton discret dans l'en-tête */
.son { display: inline-flex; align-items: center; gap: .45rem; background: none; border: 1px solid rgb(255 255 255 / .35); color: #fff; border-radius: 999px; padding: .5rem .85rem .5rem .65rem; font: 500 .8rem/1 var(--texte); letter-spacing: .04em; cursor: pointer; transition: border-color .3s var(--ease), color .3s var(--ease); }
.son svg { width: 1.15rem; height: 1.15rem; }
.son .son-onde { opacity: 0; transition: opacity .3s var(--ease); }
.son[aria-pressed="true"] { border-color: var(--or); color: var(--or); }
.son[aria-pressed="true"] .son-onde { opacity: 1; }
.son[aria-pressed="true"] .son-barre { opacity: 0; }
.son[aria-pressed="true"] svg { animation: pulse-son 2.4s ease-in-out infinite; }
@keyframes pulse-son { 50% { opacity: .55; } }
.tete.est-pleine .son { color: var(--vert); border-color: var(--filet); }
.tete.est-pleine .son[aria-pressed="true"] { color: var(--or-texte); border-color: var(--or-texte); }
@media (max-width: 700px) { .son span { display: none; } .son { padding: .5rem; } }

/* Repères : un filet d'or qui se trace, puis le libellé (plus de parenthèses) */
.repere { display: inline-flex; align-items: center; gap: .75em; font-style: italic; }
.repere-filet { display: inline-block; width: 2.4em; height: 1px; background: var(--or); transform-origin: left; }
.js .carte .repere-filet { transform: scaleX(0); transition: transform 1.1s var(--ease) .15s; }
.js .carte .repere.est-trace .repere-filet { transform: scaleX(1); }

/* Sélecteur en motion design : pastille d'or qui glisse, barre de temps sous l'option active */
.selecteur { position: relative; display: inline-flex; gap: .15rem; padding: .3rem; border: 1px solid rgb(255 255 255 / .16); border-radius: 999px; background: rgb(255 255 255 / .04); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); isolation: isolate; }
.selecteur button { position: relative; z-index: 1; background: none; border: 0; cursor: pointer; padding: .62rem 1.05rem; border-radius: 999px; font: 500 .82rem/1 var(--texte); letter-spacing: .03em; color: rgb(255 255 255 / .66); white-space: nowrap; transition: color .45s var(--ease); }
.selecteur button:hover { color: #fff; }
.selecteur button[aria-selected="true"], .selecteur button[aria-checked="true"] { color: var(--vert); }
.selecteur-pastille { position: absolute; left: 0; top: 0; z-index: 0; border-radius: 999px; background: var(--or); opacity: 0; box-shadow: 0 6px 24px -8px rgb(217 179 108 / .7); transition: transform .65s cubic-bezier(.65,0,.15,1), width .65s cubic-bezier(.65,0,.15,1), height .65s cubic-bezier(.65,0,.15,1), opacity .3s; }
.selecteur.est-pret .selecteur-pastille { opacity: 1; }
.selecteur-temps { position: absolute; left: 1.2rem; right: 1.2rem; bottom: -.7rem; height: 1px; background: rgb(255 255 255 / .12); overflow: hidden; }
.selecteur-temps::after { content: ''; position: absolute; inset: 0; background: var(--or); transform: scaleX(0); transform-origin: left; }
.selecteur.compte .selecteur-temps::after { animation: temps 6.5s linear forwards; }
@keyframes temps { to { transform: scaleX(1); } }

/* Variante verticale (les cinq ambiances) */
.selecteur-vertical { display: flex; flex-direction: column; align-items: stretch; gap: .1rem; border-radius: 22px; padding: .35rem; margin-top: 2rem; }
.selecteur-vertical button { text-align: left; font: italic 400 1.3rem/1 var(--display); letter-spacing: 0; padding: .8rem 1.1rem; border-radius: 16px; }
.selecteur-vertical .selecteur-pastille { border-radius: 16px; }
.c-signatures-texte .styles { border-top: 0; }
.c-signatures-texte .styles button { border-bottom: 0; width: auto; }
.c-signatures-texte .styles button[aria-pressed="true"]::before { display: none; }

/* Cinq intérieurs : même point de vue calé, une caméra commune qui avance lentement, fondu enchaîné */
.c-signatures-images { overflow: hidden; }
.styles-scene { position: absolute; inset: 0; animation: camera 26s ease-in-out infinite alternate; transform-origin: 50% 42%; }
.style-image { position: absolute; inset: 0; margin: 0; opacity: 0; transition: opacity 1.4s cubic-bezier(.45,0,.2,1), clip-path 1.4s cubic-bezier(.65,0,.15,1); clip-path: inset(0 0 0 100%); }
.style-image.est-actif { opacity: 1; clip-path: inset(0 0 0 0); z-index: 1; }
.style-image.est-sortant { opacity: 1; clip-path: inset(0 0 0 0); z-index: 0; }
.style-image img { width: 100%; height: 100%; object-fit: cover; }
.styles-nom { position: absolute; left: 1rem; bottom: 1rem; z-index: 2; margin: 0; font: italic 400 1.1rem/1 var(--display); color: #fff; text-shadow: 0 2px 18px rgb(0 0 0 / .45); }
@keyframes camera { from { transform: scale(1.04) translate3d(-1.2%, .4%, 0); } to { transform: scale(1.16) translate3d(1.4%, -.8%, 0); } }
@media (prefers-reduced-motion: reduce) { .styles-scene { animation: none; } .style-image { transition: opacity .3s; clip-path: none; } }
@media (min-width: 1000px) { .c-villas .carrousel-nav { position: absolute; top: 4.5%; right: 2.5%; left: auto; } }
@media (max-width: 700px) { .selecteur { max-width: 100%; overflow-x: auto; } .selecteur button { padding: .55rem .8rem; font-size: .75rem; } }

.c-signatures-texte .styles.selecteur button { padding: calc(var(--u, 1vh) * 1.2) 1.1rem; }

@media (min-width: 1000px) { .c-villas .carrousel-fleches { right: 7%; } }

/* Cinq signatures en plein écran : la pièce entière, le sélecteur en haut au centre */
.c-signatures { display: block !important; padding: 0 !important; height: calc(var(--ecran, 100svh) - 1.2rem); min-height: 30rem; }
.c-signatures > * { position: absolute; }
.c-signatures .c-signatures-images { inset: 0; left: 0; top: 0; width: 100%; height: 100%; aspect-ratio: auto; overflow: hidden; }
.c-signatures .styles-scene { animation: camera-plein 30s ease-in-out infinite alternate; transform-origin: 50% 46%; }
.c-signatures .style-image img { object-position: 50% 45%; }
@keyframes camera-plein { from { transform: scale(1.02) translate3d(-.6%, 0, 0); } to { transform: scale(1.09) translate3d(.8%, -.6%, 0); } }
.c-signatures::after { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, rgb(8 18 15 / .55) 0%, rgb(8 18 15 / 0) 22%, rgb(8 18 15 / 0) 52%, rgb(8 18 15 / .78) 100%); }
.c-signatures .styles { left: 50%; top: 6%; transform: translateX(-50%); z-index: 3; margin: 0; flex-direction: row; background: rgb(10 22 19 / .38); border-color: rgb(255 255 255 / .22); max-width: calc(100% - 2.5rem); }
.c-signatures .styles button { font: italic 400 1.05rem/1 var(--display); letter-spacing: 0; padding: .7rem 1.15rem; color: rgb(255 255 255 / .82); width: auto; border: 0; }
.c-signatures .styles button[aria-checked="true"] { color: var(--vert); }
.c-signatures .styles button[aria-pressed="true"]::before { display: none; }
.c-signatures .c-signatures-bas { left: 2.5%; bottom: 7%; z-index: 2; width: 46%; }
.c-signatures .c-signatures-bas .repere { position: static; margin-bottom: 1.2rem; }
.c-signatures .c-signatures-bas .titre-carte { position: static; font-size: clamp(2.2rem, calc(var(--u, 1vh) * 7.2), 6rem); text-shadow: 0 2px 40px rgb(0 0 0 / .35); }
.c-signatures .c-signatures-texte { left: auto; right: 2.5%; top: auto; bottom: 7%; width: min(24%, 24rem); z-index: 2; }
.c-signatures .c-signatures-texte p { color: #fff; }
.c-signatures .c-signatures-texte .note { color: rgb(255 255 255 / .62); margin-top: .75rem; }
@media (max-width: 999px) {
  .c-signatures { height: calc(var(--ecran, 100svh) * .88); }
  .c-signatures .styles { top: 1.25rem; overflow-x: auto; justify-content: flex-start; }
  .c-signatures .styles button { font-size: .9rem; padding: .6rem .85rem; white-space: nowrap; }
  .c-signatures .c-signatures-bas { left: 1.25rem; right: 1.25rem; width: auto; bottom: 6.5rem; }
  .c-signatures .c-signatures-texte { left: 1.25rem; right: 1.25rem; width: auto; bottom: 1.25rem; }
  .c-signatures .c-signatures-texte p:not(.note) { display: none; }
}
@media (prefers-reduced-motion: reduce) { .c-signatures .styles-scene { animation: none; } }

.c-signatures .c-signatures-bas .titre-carte { width: auto !important; left: auto; bottom: auto; font-size: clamp(2rem, calc(var(--u, 1vh) * 6.2), 5.2rem) !important; }

@media (min-width: 1000px) { .c-signatures { --u: min(1cqh, .6cqw); } .c-signatures .styles button { font-size: max(1rem, calc(var(--u) * 2.1)); padding: calc(var(--u) * 1.3) calc(var(--u) * 2.2); } }

/* Sur mesure : visite pilotée au défilement à travers une villa de référence */
.c-reve { position: relative; height: calc(var(--ecran, 100svh) * 9); margin: 0 clamp(.5rem, 1.2vw, 1.1rem) clamp(.5rem, 1.2vw, 1.1rem); max-width: none; padding: 0; }
.c-reve-colle { position: sticky; top: .6rem; height: calc(var(--ecran, 100svh) - 1.2rem); border-radius: 14px; overflow: hidden; background: var(--carte, #121a18); --u: min(1cqh, .6cqw); container-type: size; }
.reve-image { position: absolute; inset: 0; margin: 0; clip-path: inset(100% 0 0 0); will-change: clip-path, transform; }
.reve-image.est-actif, .reve-image.est-passe { clip-path: inset(0 0 0 0); }
.reve-image img { width: 100%; height: 100%; object-fit: cover; transform: scale(var(--z, 1.12)); transform-origin: 50% 55%; will-change: transform; }
.c-reve-colle::after { content: ''; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: linear-gradient(90deg, rgb(8 18 15 / .62) 0%, rgb(8 18 15 / .15) 38%, rgb(8 18 15 / 0) 60%), linear-gradient(0deg, rgb(8 18 15 / .45) 0%, rgb(8 18 15 / 0) 30%); }
.reve-ouverture, .reve-legendes, .reve-final, .reve-mention, .reve-barre { position: absolute; z-index: 3; }
.reve-ouverture { left: 2.5%; bottom: 9%; width: min(46%, 44rem); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.reve-ouverture .titre-carte { color: #fff; font-size: clamp(2.2rem, calc(var(--u) * 7.4), 6rem); margin: 0 0 1.2rem; }
.reve-ouverture p:not(.repere) { color: #fff; max-width: 30rem; font-size: max(.85rem, calc(var(--u) * 1.6)); }
.c-reve.apres-ouverture .reve-ouverture { opacity: 0; transform: translateY(-2rem); pointer-events: none; }
.reve-legendes { left: 2.5%; bottom: 9%; width: min(32%, 26rem); list-style: none; margin: 0; padding: 0; }
.reve-legende { position: absolute; left: 0; bottom: 0; width: 100%; opacity: 0; transform: translateY(1.2rem); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.c-reve.apres-ouverture .reve-legende.est-actif { opacity: 1; transform: none; }
.reve-num { display: block; font: 500 .72rem/1 var(--texte); letter-spacing: .16em; color: var(--or); margin-bottom: .9rem; }
.reve-legende h3 { color: #fff; font-size: clamp(1.8rem, calc(var(--u) * 5), 4rem); text-transform: uppercase; line-height: .95; margin: 0 0 .9rem; }
.reve-legende p { color: rgb(255 255 255 / .86); font-size: max(.85rem, calc(var(--u) * 1.55)); margin: 0; }
.reve-final { right: 2.5%; bottom: 9%; width: min(30%, 24rem); padding: 1.6rem 1.6rem 1.8rem; background: rgb(10 22 19 / .45); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border: 1px solid rgb(255 255 255 / .16); border-radius: 6px; opacity: 0; transform: translateY(1.5rem); transition: opacity .8s var(--ease), transform .8s var(--ease); pointer-events: none; }
.c-reve.au-final .reve-final { opacity: 1; transform: none; pointer-events: auto; }
.reve-prix-label { color: var(--or); font-size: .8rem; letter-spacing: .14em; text-transform: uppercase; margin: 0 0 .5rem; }
.reve-prix { font-family: var(--display); color: #fff; font-size: clamp(1.9rem, calc(var(--u) * 4.6), 3.4rem); line-height: 1; margin: 0 0 .7rem; }
.reve-prix-note { color: rgb(255 255 255 / .78); font-size: .85rem; margin: 0 0 1.3rem; }
.reve-mention { right: 2.5%; top: 4%; max-width: 22rem; text-align: right; font-size: .7rem; color: rgb(255 255 255 / .62); margin: 0; }
.reve-barre { left: 0; right: 0; bottom: 0; height: 2px; background: rgb(255 255 255 / .12); }
.reve-barre span { display: block; height: 100%; width: 0; background: var(--or); }
@media (max-width: 999px) {
  .c-reve { height: calc(var(--ecran, 100svh) * 8); margin: 0 .5rem .5rem; }
  .reve-ouverture, .reve-legendes { left: 1.25rem; right: 1.25rem; width: auto; bottom: 1.5rem; }
  .reve-final { left: 1.25rem; right: 1.25rem; width: auto; bottom: 1.25rem; }
  .c-reve.au-final .reve-legende.est-actif { opacity: 0; }
  .reve-mention { left: 1.25rem; right: 1.25rem; text-align: left; max-width: none; }
  .c-reve-colle::after { background: linear-gradient(0deg, rgb(8 18 15 / .82) 0%, rgb(8 18 15 / 0) 60%); }
}
@media (prefers-reduced-motion: reduce) { .reve-image img { transform: none !important; } }

/* Cinq signatures : un texte par style, superposés dans une même cellule, fondu au changement. */
.styles-textes { display: grid; }
.style-texte { grid-area: 1 / 1; opacity: 0; transform: translateY(.6rem); transition: opacity .7s var(--ease), transform .7s var(--ease); pointer-events: none; }
.style-texte.est-actif { opacity: 1; transform: none; pointer-events: auto; }
.c-signatures .style-texte .style-nom { font: 500 .72rem/1 var(--texte); letter-spacing: .16em; text-transform: uppercase; color: var(--or); margin: 0 0 .7rem; }
.c-signatures .style-texte .style-accroche { font: italic 400 clamp(1.25rem, calc(var(--u, 1vh) * 3), 2rem)/1.1 var(--display); margin: 0 0 .8rem; }
.c-signatures .style-texte .style-desc { font-size: max(.85rem, calc(var(--u, 1vh) * 1.55)); line-height: 1.55; color: rgb(255 255 255 / .86); margin: 0; }
@media (min-width: 1000px) { .c-signatures .c-signatures-texte { width: min(28%, 26rem); } }
@media (max-width: 999px) {
  .c-signatures .c-signatures-bas { bottom: auto; top: 5rem; }
  .c-signatures .c-signatures-texte .style-texte p:not(.note) { display: block; }
  .c-signatures .style-texte .style-desc { font-size: .85rem; }
}

/* Fiche villa : même grammaire que la page projet. Ouverture plein écran, pourquoi, visite plein écran. */
.v-ouverture, .v-galerie { padding: 0; height: calc(var(--ecran, 100svh) - 1.8rem); min-height: 34rem; container-type: size; --u: min(1cqh, .6cqw); }
.v-ouverture::after { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, rgb(8 18 15 / .55) 0%, rgb(8 18 15 / 0) 26%, rgb(8 18 15 / .08) 50%, rgb(8 18 15 / .82) 100%), linear-gradient(270deg, rgb(8 18 15 / .45) 0%, rgb(8 18 15 / 0) 40%); }
.v-ouverture > :not(.c-fond), .v-galerie > :not(.v-diapos) { position: absolute; z-index: 2; margin: 0; }
.v-ouverture .c-filet { display: block; left: 2.5%; right: 2.5%; top: 13%; height: 1px; background: rgb(255 255 255 / .3); }
.v-fil { left: 2.5%; top: calc(13% + 1rem); display: flex; gap: .6rem; font-size: .8rem; letter-spacing: .04em; color: rgb(255 255 255 / .7); }
.v-fil a { color: var(--or); text-decoration: none; }
.v-fil a:hover { text-decoration: underline; }
.v-monument { left: 2.5%; bottom: 17%; font-size: calc(var(--u) * 24); line-height: .8; letter-spacing: -.025em; white-space: nowrap; }
.v-monument em { color: var(--or); }
.v-cote { right: 2.5%; bottom: 19%; width: min(27%, 25rem); }
.v-cote .accroche { font: italic 400 max(1.2rem, calc(var(--u) * 3)) / 1.12 var(--display); color: #fff; margin: 0 0 1rem; }
.v-cote p { color: rgb(255 255 255 / .86); font-size: .95rem; }
.v-cote .v-prix { font-family: var(--display); color: #fff; font-size: max(1.8rem, calc(var(--u) * 4.4)); line-height: 1; margin: 1.2rem 0 1.3rem; }
.v-prix span { display: block; font: 500 .72rem/1.3 var(--texte); letter-spacing: .14em; text-transform: uppercase; color: rgb(255 255 255 / .66); margin-top: .5rem; }
.v-specs { left: 2.5%; right: 2.5%; bottom: 4%; display: flex; border-top: 1px solid rgb(255 255 255 / .28); padding-top: calc(var(--u) * 1.8); }
.v-specs div { flex: 1; }
.v-specs dt { font-family: var(--display); color: #fff; font-size: max(1.4rem, calc(var(--u) * 3.6)); line-height: 1; font-variant-numeric: lining-nums; }
.v-specs dd { margin: .45rem 0 0; font: 500 .7rem/1.3 var(--texte); letter-spacing: .14em; text-transform: uppercase; color: rgb(255 255 255 / .66); }
.v-ouverture .credit, .v-galerie .credit { right: 2.5%; top: calc(13% + 1rem); font-size: .7rem; color: rgb(255 255 255 / .6); }
.v-galerie .credit { top: auto; bottom: 1.2%; }
.v-vendue .c-fond img { filter: saturate(.75); }

.v-pourquoi { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(2rem, 5vw, 5.5rem); align-items: center; padding: clamp(1rem, 2vw, 1.6rem); padding-right: clamp(1.25rem, 4.5vw, 4.5rem); }
.v-pourquoi-image, .v-pourquoi-plan { margin: 0; align-self: stretch; min-height: 26rem; border-radius: clamp(10px, 1.4vw, 18px); overflow: hidden; }
.v-pourquoi-image img { width: 100%; height: 100%; object-fit: cover; }
.v-pourquoi-plan { display: grid; place-items: center; background: rgb(255 255 255 / .04); border: 1px solid rgb(255 255 255 / .1); position: relative; }
.v-pourquoi-plan svg { width: 70%; height: 70%; }
.v-pourquoi-plan polygon { fill: rgb(217 179 108 / .16); stroke: var(--or); stroke-width: .8; vector-effect: non-scaling-stroke; }
.v-pourquoi-plan figcaption { position: absolute; left: 1.4rem; bottom: 1.2rem; font: italic 400 1.6rem var(--display); color: #fff; }
.v-pourquoi-texte { padding: clamp(2rem, 5vw, 4rem) 0; }
.v-pourquoi-texte .titre-carte { font-size: clamp(2.4rem, 5.6vw, 5.4rem); margin: 0 0 1.6rem; }
.v-pourquoi-texte > p:not(.repere):not(.note) { max-width: 34rem; font-size: 1.02rem; }
.v-points { list-style: none; margin: 1.8rem 0; padding: 0; display: grid; gap: .1rem; }
.v-points li { border-left: 2px solid var(--or); padding: .55rem 0 .55rem 1rem; color: #fff; font-size: .98rem; }
.v-pourquoi-texte .pilule { margin-top: 1.2rem; }

.v-diapos { list-style: none; margin: 0; padding: 0; position: absolute; inset: 0; }
.v-diapo { position: absolute; inset: 0; opacity: 0; transition: opacity 1s var(--ease); }
.v-diapo.est-actif { opacity: 1; z-index: 1; }
.v-diapo a { display: block; width: 100%; height: 100%; cursor: zoom-in; }
.v-diapo img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.06); transition: transform 7s cubic-bezier(.2,.6,.2,1); }
.v-diapo.est-actif img { transform: scale(1); }
.v-galerie::after { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(180deg, rgb(8 18 15 / .45) 0%, rgb(8 18 15 / 0) 22%, rgb(8 18 15 / 0) 60%, rgb(8 18 15 / .7) 100%); }
.v-galerie .v-onglets { left: 50%; top: 6%; transform: translateX(-50%); background: rgb(10 22 19 / .38); border-color: rgb(255 255 255 / .22); max-width: calc(100% - 2.5rem); }
.v-onglets button { font: italic 400 max(1rem, calc(var(--u) * 2.1)) / 1 var(--display); letter-spacing: 0; padding: calc(var(--u) * 1.3) calc(var(--u) * 2.2); color: rgb(255 255 255 / .82); }
.v-galerie-bas { left: 2.5%; bottom: 6%; pointer-events: none; }
.v-galerie-bas .repere { margin-bottom: 1rem; }
.v-galerie-bas .titre-carte { font-size: clamp(2.2rem, calc(var(--u) * 7.2), 6rem); text-shadow: 0 2px 40px rgb(0 0 0 / .35); margin: 0; }
.v-galerie-bas .titre-carte em { color: var(--or); }
.v-galerie-nav { right: 2.5%; bottom: 6%; display: flex; align-items: center; gap: .6rem; }
.v-galerie .v-compteur { font: italic 400 1.1rem var(--display); color: #fff; margin: 0 1rem 0 0; font-variant-numeric: tabular-nums; }
.v-compteur span { color: var(--or); font-size: 1.6rem; }
.v-galerie-nav button { background: rgb(10 22 19 / .3); color: #fff; width: 3rem; height: 3rem; border: 1px solid rgb(255 255 255 / .3); border-radius: 50%; font-size: 1.3rem; cursor: pointer; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); transition: border-color .3s, color .3s; }
.v-galerie-nav button:hover { border-color: var(--or); color: var(--or); }

@media (max-width: 999px) {
  .v-ouverture { height: auto; min-height: calc(var(--ecran, 100svh) - 1.2rem); display: flex; flex-direction: column; justify-content: flex-end; padding: 7rem 1.25rem 1.25rem; container-type: normal; }
  .v-ouverture > :not(.c-fond) { position: relative; }
  .v-ouverture .c-filet { display: none; }
  .v-ouverture .v-fil { position: absolute; left: 1.25rem; top: 5.2rem; }
  .v-ouverture .credit { position: absolute; right: 1.25rem; top: auto; bottom: .4rem; font-size: .6rem; }
  .v-monument { font-size: clamp(3.6rem, 19vw, 9rem); margin-bottom: 1.2rem; }
  .v-cote { width: auto; margin-bottom: 1.6rem; }
  .v-cote .accroche { font-size: 1.35rem; }
  .v-specs { flex-wrap: wrap; row-gap: 1rem; padding-top: 1rem; margin-bottom: .8rem; }
  .v-specs div { flex: 0 0 33.33%; }
  .v-specs dt { font-size: 1.5rem; }
  .v-specs dd { font-size: .62rem; letter-spacing: .1em; }
  .v-pourquoi { grid-template-columns: 1fr; padding: .6rem .6rem 0; gap: 0; }
  .v-pourquoi-image, .v-pourquoi-plan { min-height: 0; aspect-ratio: 4 / 3; }
  .v-pourquoi-texte { padding: 2rem .65rem 2.5rem; }
  .v-galerie { height: calc(var(--ecran, 100svh) * .82); min-height: 30rem; }
  .v-galerie .v-onglets { top: 1.25rem; overflow-x: auto; justify-content: flex-start; }
  .v-onglets button { font-size: .9rem; padding: .6rem .85rem; }
  .v-galerie-bas { left: 1.25rem; bottom: 5.2rem; }
  .v-galerie-nav { left: 1.25rem; right: 1.25rem; bottom: 1.25rem; }
  .v-galerie .v-compteur { margin-right: auto; }
  .v-galerie .credit { display: none; }
}
.v-pourquoi > * { position: relative; inset: auto; }
.v-cote .accroche { text-transform: none; }
@media (min-width: 1000px) {
  .v-pourquoi { height: auto; min-height: calc(var(--ecran, 100svh) - 1.2rem); container-type: normal; }
  .v-pourquoi .titre-carte { font-size: min(5.2vw, 10vh); }
  .v-pourquoi .repere { font-size: 1.05rem; }
  .v-points li { padding: .45rem 0 .45rem 1rem; }
}
.v-galerie .credit { top: 7.5%; bottom: auto; }
.v-pourquoi-plan svg { width: 62%; height: 62%; }
.v-pourquoi-terrain { position: relative; }
.v-pourquoi .v-pourquoi-terrain svg { position: absolute; left: 1.4rem; bottom: 3.6rem; width: 5.5rem; height: 5.5rem; }
.v-pourquoi-terrain polygon { fill: rgb(217 179 108 / .25); stroke: var(--or); stroke-width: 1.2; vector-effect: non-scaling-stroke; }
.v-pourquoi-terrain figcaption { position: absolute; left: 1.4rem; bottom: 1.2rem; font: italic 400 1.6rem var(--display); color: #fff; text-shadow: 0 2px 20px rgb(0 0 0 / .5); }
.v-pourquoi-terrain::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgb(8 18 15 / .6) 0%, rgb(8 18 15 / 0) 40%); pointer-events: none; }
.v-pourquoi-terrain svg, .v-pourquoi-terrain figcaption { z-index: 1; }
@media (max-width: 999px) { .c-signatures .c-signatures-bas .titre-carte { font-size: clamp(1.9rem, 9vw, 2.6rem) !important; } }

/* Envol : le film vertical du promoteur, cadré comme un tableau sur un fond flouté du même plan. */
.c-envol { height: calc(var(--ecran, 100svh) * 2.8); }
.c-envol .c-entrez-colle::after { background: linear-gradient(90deg, rgb(8 18 15 / .78) 0%, rgb(8 18 15 / .35) 45%, rgb(8 18 15 / .15) 100%); z-index: 1; }
.c-envol-fond { position: absolute; inset: -4%; width: 108%; height: 108%; object-fit: cover; filter: blur(28px) saturate(.9) brightness(.7); }
.c-envol-cadre { position: absolute; z-index: 2; right: 8%; top: 7%; bottom: 7%; aspect-ratio: 1014 / 1724; border-radius: 12px; overflow: hidden; box-shadow: 0 30px 80px -20px rgb(0 0 0 / .6); outline: 1px solid rgb(255 255 255 / .14); outline-offset: 8px; }
.c-envol .c-entrez-film { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.c-envol .c-entrez-texte, .c-envol .c-entrez-mention, .c-envol .c-entrez-barre { z-index: 3; }
.c-envol .c-entrez-mention { right: auto; left: clamp(1.25rem, 4.5vw, 4.5rem); text-align: left; }
.c-envol .c-entrez-texte { max-width: min(34rem, 44%); }
@media (max-width: 999px), (max-aspect-ratio: 4/5) {
  .c-envol-cadre { inset: 0; aspect-ratio: auto; border-radius: 0; outline: 0; box-shadow: none; }
  .c-envol .c-entrez-colle::after { background: linear-gradient(0deg, rgb(8 18 15 / .85) 0%, rgb(8 18 15 / 0) 55%); }
  .c-envol .c-entrez-texte { max-width: none; right: 1.25rem; }
  .c-envol .c-entrez-mention { left: auto; right: 1.25rem; text-align: right; }
}

/* Intérieurs : trois plans verticaux en boucle, comme trois tableaux. */
.c-interieurs { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(2rem, 4vw, 4rem); align-items: center; }
.c-interieurs > * { position: relative; inset: auto; }
.c-interieurs-tete .titre-carte { font-size: min(5vw, 10vh); }
.triptyque { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(.6rem, 1.2vw, 1.1rem); align-items: start; }
.triptyque li:nth-child(2) { margin-top: 8%; }
.triptyque video { display: block; width: 100%; aspect-ratio: 1014 / 1724; max-height: calc(var(--ecran, 100svh) * .72); object-fit: cover; border-radius: 10px; background: rgb(255 255 255 / .05); }
.c-interieurs .triptyque-nom { margin: .8rem 0 0; font: italic 400 1.15rem var(--display); color: #fff; }
.c-interieurs .credit { position: absolute; right: 2.5%; bottom: 3%; font-size: .7rem; color: rgb(255 255 255 / .55); margin: 0; }
@media (min-width: 1000px) {
  .c-interieurs { padding: 0 2.5%; }
  .c-interieurs .repere { position: static; margin-bottom: 1.2rem; font-size: 1.05rem; }
}
@media (max-width: 999px) {
  .c-interieurs { grid-template-columns: 1fr; }
  .triptyque { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 62%; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: .5rem; }
  .triptyque li { scroll-snap-align: start; }
  .triptyque li:nth-child(2) { margin-top: 0; }
  .c-interieurs .credit { position: static; margin-top: 1rem; }
}
@media (max-width: 999px), (max-aspect-ratio: 4/5) { .c-envol .c-entrez-colle::after, .c-entrez .c-entrez-colle::after { background: linear-gradient(0deg, rgb(8 18 15 / .92) 0%, rgb(8 18 15 / .55) 40%, rgb(8 18 15 / 0) 70%); } }

/* L'emplacement : texte et temps à gauche, carte à droite, adresses par catégorie dessous. */
.c-lieu { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); grid-template-rows: auto auto; gap: clamp(1.5rem, 3vw, 3rem) clamp(2rem, 4vw, 4rem); height: auto !important; min-height: calc(var(--ecran, 100svh) - 1.2rem); padding: clamp(1.5rem, 3vw, 3rem) !important; container-type: normal !important; }
.c-lieu > * { position: relative !important; inset: auto !important; }
.c-lieu .repere { font-size: 1.05rem; margin: 0 0 1.2rem; }
.c-lieu .titre-carte { font-size: min(5.4vw, 10vh) !important; margin: 0 0 1.4rem !important; }
.c-lieu-tete p { max-width: 32rem; font-size: 1rem !important; }
.lieu-temps { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.4rem 1.5rem; margin: 2rem 0 0; }
.lieu-temps div { border-left: 2px solid var(--or); padding-left: .9rem; }
.lieu-temps dt { font-family: var(--display); font-size: clamp(2rem, 3.4vw, 3.2rem); line-height: 1; color: #fff; }
.lieu-temps dt span { font-style: italic; font-size: .4em; color: var(--or); margin-left: .3em; }
.lieu-temps dd { margin: .4rem 0 0; font-size: .85rem; color: rgb(255 255 255 / .75); }
.c-lieu-carte { margin: 0; border-radius: 12px; overflow: hidden; align-self: start; box-shadow: 0 30px 70px -30px rgb(0 0 0 / .6); }
.c-lieu-carte img { display: block; width: 100%; height: auto; }
.c-lieu-adresses { grid-column: 1 / -1; }
.lieu-onglets { flex-wrap: wrap; max-width: 100%; }
.lieu-onglets button { font: italic 400 1rem/1 var(--display); letter-spacing: 0; }
.lieu-liste { list-style: none; margin: 1.4rem 0 0; padding: 0; display: none; grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); gap: .2rem 1.5rem; }
.lieu-liste.est-actif { display: grid; animation: lieu-entre .6s var(--ease); }
.lieu-liste li { color: #fff; padding: .55rem 0; border-bottom: 1px solid rgb(255 255 255 / .1); font-size: .95rem; }
.lieu-liste li span { display: inline-block; width: 2.2rem; font: 500 .72rem var(--texte); letter-spacing: .1em; color: var(--or); }
@keyframes lieu-entre { from { opacity: 0; transform: translateY(.5rem); } to { opacity: 1; transform: none; } }

.c-rarete { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(2rem, 4vw, 4rem); align-items: center; height: auto !important; min-height: 0 !important; padding: clamp(2rem, 4vw, 4rem) !important; container-type: normal !important; }
.c-rarete > * { position: relative !important; inset: auto !important; }
.rarete-points { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem 2.5rem; }
.rarete-points li { border-left: 2px solid var(--or); padding-left: 1.1rem; }
.rarete-points h3 { font: italic 400 clamp(1.3rem, 2vw, 1.75rem)/1.15 var(--display); text-transform: none; margin: 0 0 .6rem; }
.rarete-points p { font-size: .92rem !important; color: rgb(255 255 255 / .8); margin: 0; }
.rarete-bali { margin: 0; display: grid; gap: 1.6rem; }
.rarete-bali dt { font-family: var(--display); font-size: clamp(2.6rem, 4.6vw, 4.4rem); line-height: 1; color: #fff; }
.rarete-bali dt span { font-style: italic; font-size: .45em; color: var(--or); margin-left: .2em; }
.rarete-bali dd { margin: .35rem 0 0; font-size: .88rem; color: rgb(255 255 255 / .75); max-width: 22rem; }
.c-rarete .note { grid-column: 1 / -1; font-size: .72rem !important; color: rgb(255 255 255 / .55); margin: 0; }
@media (max-width: 999px) {
  .c-lieu, .c-rarete { grid-template-columns: 1fr; }
  .c-lieu .titre-carte { font-size: clamp(2.2rem, 11vw, 3.4rem) !important; }
  .rarete-points { grid-template-columns: 1fr; }
  .lieu-onglets { flex-wrap: nowrap; overflow-x: auto; }
}

/* La visite avec Timé : plein écran, sélecteur jour / nuit en haut au centre, sous-titres sobres. */
.c-visite { padding: 0 !important; height: calc(var(--ecran, 100svh) - 1.2rem) !important; min-height: 32rem; container-type: size; --u: min(1cqh, .6cqw); }
.c-visite > * { position: absolute !important; z-index: 2; margin: 0; }
.c-visite-film { inset: 0 !important; width: 100%; height: 100%; object-fit: cover; z-index: 0 !important; transition: opacity .6s var(--ease); }
.c-visite-film.est-bascule { opacity: 0; }
.c-visite::after { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(180deg, rgb(8 18 15 / .5) 0%, rgb(8 18 15 / 0) 22%, rgb(8 18 15 / 0) 55%, rgb(8 18 15 / .8) 100%); }
.c-visite-haut { left: 50% !important; top: 5% !important; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: .7rem; }
.heure-bali { font-size: .78rem !important; letter-spacing: .12em; text-transform: uppercase; color: rgb(255 255 255 / .75) !important; margin: 0; }
.heure-bali strong { font: italic 400 1.05rem var(--display); letter-spacing: 0; text-transform: none; color: var(--or); margin-left: .3rem; }
.moment { background: rgb(10 22 19 / .38); border-color: rgb(255 255 255 / .22); }
.moment button { display: inline-flex; align-items: center; gap: .5rem; font: italic 400 1.05rem/1 var(--display); letter-spacing: 0; color: rgb(255 255 255 / .82); padding: .65rem 1.15rem; }
.moment svg { width: 1.05rem; height: 1.05rem; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.c-visite-sous { left: 50% !important; bottom: 24% !important; transform: translateX(-50%); width: min(44rem, 80%); text-align: center; font: italic 400 max(1.15rem, calc(var(--u) * 2.9))/1.25 var(--display); color: #fff !important; text-shadow: 0 2px 24px rgb(0 0 0 / .55); opacity: 0; transition: opacity .5s var(--ease); }
.c-visite-sous.est-visible { opacity: 1; }
.c-visite-bas { left: 2.5% !important; bottom: 6% !important; }
.c-visite-bas .repere { position: static !important; margin: 0 0 1rem !important; }
.c-visite-bas .titre-carte { position: static !important; font-size: clamp(2.2rem, calc(var(--u) * 7), 5.6rem) !important; text-shadow: 0 2px 40px rgb(0 0 0 / .35); }
.c-visite-signature { margin-top: .9rem !important; font-size: .8rem !important; letter-spacing: .14em; text-transform: uppercase; color: rgb(255 255 255 / .75) !important; }
.c-visite-lecture { right: 2.5% !important; bottom: 6% !important; width: 3.2rem; height: 3.2rem; border-radius: 50%; border: 1px solid rgb(255 255 255 / .35); background: rgb(10 22 19 / .3); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); cursor: pointer; display: grid; place-items: center; }
.c-visite-lecture span { width: .8rem; height: .9rem; border-left: 3px solid #fff; border-right: 3px solid #fff; }
.c-visite-lecture.est-arrete span { width: 0; height: 0; border-style: solid; border-width: .5rem 0 .5rem .85rem; border-color: transparent transparent transparent #fff; margin-left: .2rem; }
.c-visite-lecture:hover { border-color: var(--or); }
.c-visite .credit { right: 2.5% !important; top: 5% !important; max-width: 18rem; text-align: right; font-size: .68rem !important; color: rgb(255 255 255 / .6) !important; }
@media (max-width: 999px) {
  .c-visite { height: calc(var(--ecran, 100svh) * .9) !important; }
  .c-visite-haut { top: 1.25rem !important; }
  .c-visite .credit { top: auto !important; bottom: .5rem !important; left: 1.25rem; right: 1.25rem !important; text-align: left; max-width: none; font-size: .6rem !important; }
  .c-visite-sous { bottom: 34% !important; width: calc(100% - 2.5rem); }
  .c-visite-bas { left: 1.25rem !important; bottom: 2.4rem !important; }
  .c-visite-lecture { right: 1.25rem !important; bottom: 2.4rem !important; }
  .c-visite-film { object-position: 60% 50%; }
}
.c-rarete > .sr { position: absolute !important; }
@media (max-width: 999px) { .c-lieu, .c-rarete { grid-template-columns: minmax(0, 1fr) !important; } .c-lieu > * { min-width: 0; } }

.c-visite-son { right: calc(2.5% + 4rem) !important; bottom: 6% !important; height: 3.2rem; display: inline-flex; align-items: center; gap: .55rem; padding: 0 1.2rem; border-radius: 999px; border: 1px solid rgb(255 255 255 / .35); background: rgb(10 22 19 / .3); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); color: #fff; font: italic 400 1.05rem var(--display); cursor: pointer; transition: border-color .3s, background-color .3s; }
.c-visite-son svg { width: 1.15rem; height: 1.15rem; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linejoin: round; stroke-linecap: round; }
.c-visite-son[aria-pressed="false"] .onde { opacity: .35; }
.c-visite-son[aria-pressed="true"] { background: var(--or); border-color: var(--or); color: var(--vert); }
.c-visite-son:hover { border-color: var(--or); }
@media (max-width: 999px) { .c-visite-son { right: calc(1.25rem + 3.8rem) !important; bottom: 2.4rem !important; font-size: .95rem; padding: 0 .9rem; } }

/* La visite, format vertical (style des vidéos ZORI) : cadre portrait sur fond flouté ; plein écran sur mobile. */
.c-visite-fond { position: absolute !important; inset: -4% !important; width: 108%; height: 108%; object-fit: cover; filter: blur(30px) saturate(.9) brightness(.55); z-index: 0 !important; }
.c-visite-cadre { right: 9% !important; top: 5% !important; bottom: 5% !important; aspect-ratio: 9 / 16; border-radius: 12px; overflow: hidden; z-index: 2 !important; box-shadow: 0 30px 80px -20px rgb(0 0 0 / .6); outline: 1px solid rgb(255 255 255 / .14); outline-offset: 8px; }
.c-visite-cadre .c-visite-film { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.c-visite-cadre .c-visite-sous { position: absolute; left: 6%; right: 6%; bottom: 7%; width: auto; transform: none; font-size: max(1rem, calc(var(--u) * 2.2)); }
.c-visite::after { background: linear-gradient(90deg, rgb(8 18 15 / .55) 0%, rgb(8 18 15 / .15) 55%, rgb(8 18 15 / .05) 100%); }
.c-visite-haut { left: 2.5% !important; top: 7% !important; transform: none; align-items: flex-start; }
.c-visite-son { right: auto !important; left: calc(2.5% + 4rem); bottom: 6% !important; }
.c-visite-lecture { right: auto !important; left: 2.5% !important; }
.c-visite-bas { bottom: calc(6% + 4.5rem) !important; max-width: 46%; }
.c-visite .credit { right: auto !important; left: 2.5% !important; top: auto !important; bottom: 1.5% !important; text-align: left; max-width: 40%; }
@media (max-width: 999px), (max-aspect-ratio: 4/5) {
  .c-visite-cadre { inset: 0 !important; aspect-ratio: auto; border-radius: 0; outline: 0; box-shadow: none; }
  .c-visite-cadre .c-visite-sous { bottom: 36%; }
  .c-visite::after { background: linear-gradient(0deg, rgb(8 18 15 / .85) 0%, rgb(8 18 15 / 0) 50%), linear-gradient(180deg, rgb(8 18 15 / .45) 0%, rgb(8 18 15 / 0) 20%); }
  .c-visite-haut { left: 50% !important; transform: translateX(-50%); top: 1.25rem !important; align-items: center; }
  .c-visite-bas { bottom: 2.4rem !important; max-width: none; }
  .c-visite-lecture { left: auto !important; right: 1.25rem !important; }
  .c-visite-son { left: auto !important; right: calc(1.25rem + 3.8rem) !important; }
  .c-visite .credit { left: 1.25rem !important; right: 1.25rem !important; max-width: none; bottom: .5rem !important; }
}
@media (max-width: 999px), (max-aspect-ratio: 4/5) { .c-visite-bas { bottom: 6.2rem !important; } .c-visite-son, .c-visite-lecture { bottom: 2.2rem !important; } .c-visite-son { left: 1.25rem !important; right: auto !important; } .c-visite-cadre .c-visite-sous { bottom: 44%; } }
@media (max-width: 999px), (max-aspect-ratio: 4/5) { .c-visite-cadre .c-visite-sous { bottom: auto; top: 18%; } }

/* Carte : la catégorie choisie s'allume, le reste s'estompe ; Balimmo Hills garde son halo. */
.c-lieu-carte { position: relative; }
.c-lieu-carte::after { content: ''; position: absolute; inset: 0; background: rgb(8 18 15 / .42); opacity: 0; transition: opacity .6s var(--ease); pointer-events: none; }
.c-lieu-carte.a-categorie::after { opacity: 1; }
.lieu-points { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.lieu-point, .lieu-projet { position: absolute; width: 0; height: 0; }
.lieu-point i { position: absolute; left: 50%; top: 50%; width: clamp(1.9rem, 3.4vw, 3.2rem); aspect-ratio: 1; border-radius: 50%; transform: translate(-50%, -50%) scale(.3); opacity: 0;
  border: 2px solid var(--or); background: radial-gradient(circle, rgb(217 179 108 / .28) 0%, rgb(217 179 108 / .08) 60%, transparent 70%);
  box-shadow: 0 0 22px 4px rgb(217 179 108 / .55); transition: transform .55s cubic-bezier(.2,1.4,.4,1), opacity .4s var(--ease); transition-delay: var(--d, 0s); }
.lieu-point i::after { content: ''; position: absolute; inset: -2px; border-radius: 50%; border: 1px solid var(--or); opacity: 0; }
.lieu-point.est-actif i { transform: translate(-50%, -50%) scale(1); opacity: 1; }
.lieu-point.est-actif i::after { animation: lieu-onde 2.2s var(--ease) infinite; animation-delay: calc(var(--d, 0s) + .5s); }
.lieu-point.est-survole i { transform: translate(-50%, -50%) scale(1.45); box-shadow: 0 0 34px 8px rgb(217 179 108 / .8); transition-delay: 0s; }
.lieu-projet::before, .lieu-projet::after { content: ''; position: absolute; left: 50%; top: 50%; width: clamp(2.6rem, 4.6vw, 4.4rem); aspect-ratio: 1; border-radius: 50%; transform: translate(-50%, -50%); border: 2px solid rgb(255 255 255 / .85); }
.lieu-projet::after { border-color: var(--or); animation: lieu-onde 2.6s var(--ease) infinite; }
@keyframes lieu-onde { 0% { opacity: .9; transform: translate(-50%, -50%) scale(1); } 100% { opacity: 0; transform: translate(-50%, -50%) scale(2.3); } }
.lieu-point.est-actif i::after { left: 50%; top: 50%; width: 100%; height: 100%; inset: auto; transform: translate(-50%, -50%); }
.lieu-liste li { cursor: default; transition: color .3s; }
.lieu-liste li:hover { color: var(--or); }
@media (prefers-reduced-motion: reduce) { .lieu-point i, .lieu-point.est-actif i::after, .lieu-projet::after { animation: none !important; transition: none !important; } }

/* ===== Hub « Ailleurs » ===== */
/* Ouverture : une image plein écran recule et devient une tuile de la mosaïque. */
.h-ouverture { position: relative; height: calc(var(--ecran, 100svh) * 2.4); margin: 0 clamp(.5rem, 1.2vw, 1.1rem) clamp(.5rem, 1.2vw, 1.1rem); }
.h-ouverture-colle { position: sticky; top: .6rem; height: calc(var(--ecran, 100svh) - 1.2rem); border-radius: 14px; overflow: hidden; background: var(--carte, #121a18); container-type: size; --u: min(1cqh, .6cqw); }
.h-mosaique { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr); gap: 1.4cqw; padding: 4cqh 4cqw; }
.h-tuile { position: relative; overflow: hidden; border-radius: 10px; opacity: .0; transform: scale(.92); }
.h-tuile img { width: 100%; height: 100%; object-fit: cover; display: block; }
.h-tuile-centre { opacity: 1; transform: none; z-index: 1; }
.h-voile { position: absolute; inset: 0; z-index: 2; pointer-events: none; background: linear-gradient(180deg, rgb(8 18 15 / .45) 0%, rgb(8 18 15 / 0) 30%, rgb(8 18 15 / .15) 60%, rgb(8 18 15 / .85) 100%); }
.h-ouverture-colle > :not(.h-mosaique):not(.h-voile) { position: absolute; z-index: 3; margin: 0; }
.h-monument { left: 2.5%; bottom: 9%; font-size: calc(var(--u) * 26); line-height: .8; letter-spacing: -.025em; color: #fff; }
.h-monument em { color: var(--or); font-style: normal; }
.h-ouverture-texte { right: 2.5%; bottom: 10%; width: min(28%, 26rem); }
.h-ouverture-texte .accroche { font: italic 400 max(1.2rem, calc(var(--u) * 3)) / 1.15 var(--display); text-transform: none; color: #fff; margin: 0 0 1rem; }
.h-ouverture-texte p:not(.accroche) { color: rgb(255 255 255 / .86); font-size: .98rem; margin: 0; }
.h-defiler { right: 2.5%; bottom: 3.5%; color: rgb(255 255 255 / .7); font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; text-decoration: none; }
.page-hub .h-ouverture.est-mosaique .h-tuile { opacity: 1; transform: none; }

/* Sections du hub : en flux, sans la composition absolue des cartes du projet. */
.page-hub .carte.h-projets, .page-hub .carte.h-methode, .page-hub .carte.h-rencontres { height: auto !important; min-height: 0 !important; padding: clamp(2rem, 4.5vw, 4.5rem) !important; container-type: normal !important; }
.page-hub .h-projets > *, .page-hub .h-methode > *, .page-hub .h-rencontres > *, .page-hub .h-projets .repere, .page-hub .h-methode .repere, .page-hub .h-rencontres .repere { position: relative !important; inset: auto !important; }
.page-hub .carte .repere { font-size: 1.05rem; margin: 0 0 1.2rem; }
.page-hub .carte .titre-carte { font-size: clamp(2.6rem, 6vw, 6rem) !important; margin: 0 0 1.4rem !important; }

/* Projets : une grande carte par projet. */
.h-projets-tete { margin-bottom: clamp(1.5rem, 3vw, 3rem); }
.h-projet-lien { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); border-radius: 14px; overflow: hidden; background: rgb(255 255 255 / .03); border: 1px solid rgb(255 255 255 / .1); text-decoration: none; transition: border-color .4s var(--ease); }
.h-projet-lien:hover { border-color: var(--or); }
.h-projet-image { overflow: hidden; min-height: 26rem; }
.h-projet-image img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.02); transition: transform 1.4s var(--ease); }
.h-projet-lien:hover .h-projet-image img { transform: scale(1.07); }
.h-projet-texte { display: flex; flex-direction: column; justify-content: center; gap: 1.1rem; padding: clamp(1.75rem, 3.5vw, 3.5rem); }
.h-projet-lieu { font: 500 .74rem/1.3 var(--texte); letter-spacing: .16em; text-transform: uppercase; color: var(--or); }
.h-projet-nom { font-family: var(--display); font-size: clamp(2.6rem, 4.6vw, 4.6rem); line-height: .95; color: #fff; text-transform: uppercase; }
.h-projet-nom em { font-style: italic; text-transform: none; }
.h-projet-resume { color: rgb(255 255 255 / .82); font-size: 1rem; line-height: 1.6; }
.h-projet-chiffres { display: flex; flex-wrap: wrap; gap: .4rem 1.6rem; border-top: 1px solid rgb(255 255 255 / .14); padding-top: 1.1rem; color: rgb(255 255 255 / .7); font-size: .85rem; }
.h-projet-chiffres strong { font: 400 1.6rem var(--display); color: #fff; margin-right: .25rem; }
.h-projet-texte .pilule { align-self: flex-start; margin-top: .4rem; }
.h-projets-note { margin: 1.6rem 0 0 !important; font-size: .85rem !important; color: rgb(255 255 255 / .55) !important; font-style: italic; }

/* Méthode : trois engagements, filets or. */
.h-methode { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(2rem, 5vw, 5rem); align-items: start; }
.h-methode-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 2.2rem; }
.h-methode-liste li { display: grid; grid-template-columns: 4rem 1fr; column-gap: 1.2rem; border-top: 1px solid rgb(255 255 255 / .14); padding-top: 1.4rem; }
.h-methode-num { grid-row: span 2; font: italic 400 2.4rem/1 var(--display); color: var(--or); }
.h-methode-liste h3 { font: italic 400 clamp(1.4rem, 2.2vw, 1.9rem)/1.15 var(--display); text-transform: none; margin: 0 0 .5rem; }
.h-methode-liste p { margin: 0; color: rgb(255 255 255 / .8); font-size: .95rem !important; }

/* Rencontres : agenda et « me prévenir ». */
.h-rencontres { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(2rem, 5vw, 5rem); align-items: start; }
.h-rencontres-tete p { max-width: 30rem; color: rgb(255 255 255 / .82); font-size: 1rem !important; }
.h-agenda-vide { font: italic 400 clamp(1.5rem, 2.6vw, 2.2rem)/1.2 var(--display); color: #fff !important; margin: 0 0 2rem !important; border-left: 2px solid var(--or); padding-left: 1.2rem; }
.h-agenda-liste { list-style: none; margin: 0 0 2rem; padding: 0; }
.h-agenda-liste li { display: grid; grid-template-columns: 7rem 1fr auto; gap: 1.2rem; align-items: center; padding: 1.2rem 0; border-bottom: 1px solid rgb(255 255 255 / .12); }
.h-agenda-liste time { display: flex; flex-direction: column; }
.h-jour { font: 400 2.6rem/1 var(--display); color: #fff; }
.h-mois { font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--or); margin-top: .3rem; }
.h-agenda-lieu { color: #fff !important; margin: 0 !important; }
.h-agenda-detail { color: rgb(255 255 255 / .6) !important; margin: .2rem 0 0 !important; font-size: .85rem !important; }
.h-agenda-complet { font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; color: rgb(255 255 255 / .5); }
.h-prevenir { border-radius: 14px; padding: 1.6rem; background: rgb(255 255 255 / .04); border: 1px solid rgb(255 255 255 / .12); }
.h-prevenir > p:first-of-type { color: rgb(255 255 255 / .85) !important; margin: 0 0 1rem !important; }
.h-prevenir-champs { display: flex; flex-wrap: wrap; gap: .7rem; }
.h-prevenir input[type=text], .h-prevenir input[type=email] { flex: 1 1 12rem; min-width: 0; padding: .85rem 1.1rem; border-radius: 999px; border: 1px solid rgb(255 255 255 / .22); background: rgb(255 255 255 / .06); color: #fff; font: inherit; font-size: .95rem; }
.h-prevenir input::placeholder { color: rgb(255 255 255 / .5); }
.h-prevenir input:focus { outline: 2px solid var(--or); outline-offset: 2px; }
.h-prevenir label { display: contents; }
.h-prevenir .pilule { border: 0; cursor: pointer; font-family: inherit; }
.h-prevenir .note { margin: .9rem 0 0 !important; font-size: .75rem !important; }
.h-prevenir .note a { color: var(--or); }

@media (max-width: 999px) {
  .h-ouverture { height: calc(var(--ecran, 100svh) * 2); }
  .h-mosaique { padding: 5cqh 4cqw; gap: 2.5cqw; }
  .h-monument { font-size: clamp(3.4rem, 19vw, 8rem); bottom: 32%; }
  .h-ouverture-texte { left: 1.25rem; right: 1.25rem; width: auto; bottom: 7%; }
  .h-projet-lien, .h-methode, .h-rencontres { grid-template-columns: minmax(0, 1fr); }
  .h-projet-image { min-height: 15rem; }
  .h-agenda-liste li { grid-template-columns: 5rem 1fr; }
  .h-agenda-liste li > :last-child { grid-column: 1 / -1; justify-self: start; }
}
@media (prefers-reduced-motion: reduce) { .h-tuile { opacity: 1; transform: none; } }
.h-ouverture { max-width: none; padding: 0; }
.page-hub .carte .titre-carte { font-size: clamp(2.4rem, 4.6vw, 5rem) !important; }

/* Nos villas : chaque villa du format est un lien direct vers sa fiche. */
.diapo-villas { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.diapo-villas a { display: inline-flex; align-items: baseline; gap: .55rem; padding: .62rem 1.05rem; border-radius: 999px; border: 1px solid rgb(217 179 108 / .55); background: rgb(10 22 19 / .35); color: #fff; text-decoration: none; transition: background-color .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease), transform .35s var(--ease); }
.diapo-villas a:hover, .diapo-villas a:focus-visible { background: var(--or); border-color: var(--or); color: var(--vert); transform: translateY(-2px); }
.diapo-villa-nom { font: italic 400 1.05rem/1 var(--display); }
.diapo-villa-prix { font-size: .78rem; letter-spacing: .04em; opacity: .8; }
.diapo-villa-option { font-size: .62rem; letter-spacing: .12em; text-transform: uppercase; color: var(--or); }
.diapo-villas a:hover .diapo-villa-option { color: var(--vert); }
.diapo-plan { font-size: .75rem; letter-spacing: .12em; text-transform: uppercase; color: rgb(255 255 255 / .7); text-decoration: none; border-bottom: 1px solid rgb(255 255 255 / .3); padding-bottom: .15rem; white-space: nowrap; }
.diapo-plan:hover { color: var(--or); border-color: var(--or); }
@media (min-width: 1000px) { .diapo-bas { left: 24%; width: 60%; flex-wrap: wrap; } .diapo-bas p { max-width: 24cqw; } }
@media (max-width: 999px) { .diapo-bas { flex-direction: column; align-items: flex-start; gap: .9rem; } }

/* ===== Cohérence avec zori.immo (Belgique) ===== */
/* En-tête : la barre verte à filet or du site principal, en permanence. */
.tete, .tete.est-pleine, .tete.est-sombre { background: #182E29; backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: 0 1px 0 rgb(217 179 108 / .4), 0 10px 30px -18px rgb(0 0 0 / .6); padding-top: .75rem; padding-bottom: .75rem; }
.tete.est-pleine .tete-nav a, .tete.est-pleine .langues a { color: #fff; }
.tete.est-pleine .son { color: #fff; border-color: rgb(255 255 255 / .3); }
.tete-nav a { text-shadow: none; }
.univers { display: flex; align-items: center; gap: .6rem; margin-left: 1.5rem; font: 400 1rem/1 var(--display); }
.univers a { color: rgb(255 255 255 / .7); text-decoration: none; padding-bottom: .3rem; border-bottom: 1px solid transparent; transition: color .3s, border-color .3s; }
.univers a:hover { color: #fff; }
.univers a[aria-current] { color: var(--or); font-style: italic; border-bottom-color: var(--or); }
.univers span { color: var(--or); }
.reseaux { display: flex; gap: 1rem; }
.reseaux a { color: var(--or); display: inline-flex; transition: color .3s; }
.reseaux a:hover { color: #fff; }
.reseaux svg { width: 1.15rem; height: 1.15rem; }
/* Bouton principal : or plein, capitales, comme « Estimation offerte ». */
.tete .bouton-plein, .tete.est-pleine .bouton-plein, .bouton-plein { background: #D9B36C; color: #182E29; text-transform: uppercase; font-weight: 700; letter-spacing: .06em; border-radius: 12px; }
.tete .bouton-plein:hover, .bouton-plein:hover { background: #e6c88d; color: #182E29; }
/* Coins « feuille » du site principal (grand rayon en haut à gauche et en bas à droite). */
.carte, .h-ouverture-colle, .c-entrez-colle, .c-reve-colle, .h-projet-lien, .h-prevenir, .c-lieu-carte, .v-pourquoi-image, .formulaire { border-radius: 34px 6px 34px 6px; }
/* Repères : petites capitales or espacées, comme « Dernières pépites ». */
.repere { font: 600 .74rem/1.2 var(--texte) !important; letter-spacing: .32em !important; text-transform: uppercase; font-style: normal !important; color: var(--or); }
/* La signature manuscrite de ZORI sur l'ouverture du hub. */
.h-signature { left: 2.5%; bottom: calc(9% + calc(var(--u) * 21)); font-family: 'Brittany Signature', cursive; font-size: max(1.6rem, calc(var(--u) * 4.4)); color: var(--or); line-height: 1.2; }
@font-face { font-family: 'Brittany Signature'; src: url('/assets/BrittanySignature.woff2') format('woff2'); font-display: swap; }
@media (max-width: 999px) {
  .univers { margin-left: .8rem; font-size: .9rem; }
  .reseaux { display: none; }
  .h-signature { left: 1.25rem; bottom: calc(32% + 5.5rem); font-size: 1.6rem; }
}
@media (max-width: 520px) { .univers a:first-child, .univers span { display: none; } }

/* Destinations : quatre panneaux d'atmosphère ; le panneau survolé s'ouvre, seule l'Indonésie mène à un projet. */
.h-destinations { margin: 0 clamp(.5rem, 1.2vw, 1.1rem) clamp(.5rem, 1.2vw, 1.1rem); max-width: none; padding: 0; }
.h-dest-liste { list-style: none; margin: 0; padding: 0; display: flex; height: calc(var(--ecran, 100svh) - 1.2rem); min-height: 34rem; gap: 4px; border-radius: 34px 6px 34px 6px; overflow: hidden; }
.h-dest { flex: 1 1 0; position: relative; overflow: hidden; transition: flex-grow .9s cubic-bezier(.65,0,.15,1); }
.h-dest-liste:hover .h-dest { flex-grow: .8; }
.h-dest-liste .h-dest:hover { flex-grow: 1.9; }
.h-dest-lien { position: absolute; inset: 0; display: block; color: #fff; text-decoration: none; }
.h-dest img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.04); transition: transform 1.6s var(--ease), filter .8s var(--ease); }
.h-dest:hover img { transform: scale(1); }
.h-dest:not(.est-ouvert) img { filter: saturate(.85) brightness(.88); }
.h-dest-lien::after { content: ''; position: absolute; inset: 0; background: linear-gradient(0deg, rgb(8 18 15 / .72) 0%, rgb(8 18 15 / 0) 45%); pointer-events: none; }
.h-dest-texte { position: absolute; left: 0; right: 0; bottom: 9%; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: .9rem; text-align: center; padding: 0 1rem; }
.h-dest-pays { font-family: var(--display); font-size: clamp(2.2rem, 4.4vw, 4.6rem); line-height: 1; text-shadow: 0 2px 30px rgb(0 0 0 / .35); }
.h-dest-regions { font: 600 .72rem/1.2 var(--texte); letter-spacing: .32em; text-transform: uppercase; color: rgb(255 255 255 / .88); }
.h-dest-statut { font: italic 400 1rem/1 var(--display); color: rgb(255 255 255 / .7); opacity: 0; transform: translateY(.5rem); transition: opacity .5s var(--ease), transform .5s var(--ease); }
.h-dest:hover .h-dest-statut, .h-dest.est-ouvert .h-dest-statut { opacity: 1; transform: none; }
.h-dest.est-ouvert .h-dest-statut { color: #182E29; background: #D9B36C; padding: .7rem 1.2rem; border-radius: 12px; font: 700 .74rem/1 var(--texte); letter-spacing: .08em; text-transform: uppercase; }
.h-dest.est-ouvert .h-dest-lien:hover .h-dest-statut { background: #e6c88d; }
@media (max-width: 999px) {
  .h-dest-liste { flex-direction: column; height: auto; min-height: 0; }
  .h-dest { flex: none; height: 42svh; }
  .h-dest-liste:hover .h-dest, .h-dest-liste .h-dest:hover { flex-grow: 0; }
  .h-dest-statut { opacity: 1; transform: none; }
}
.h-signature { bottom: calc(9% + calc(var(--u) * 24.5)); }
@media (max-width: 999px) { .h-signature { bottom: calc(32% + 7rem); } }

/* ===== Barres identiques à zori.immo (header.php / footer.php) ===== */
.tete, .tete.est-pleine, .tete.est-sombre { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 1rem 1.5rem; background: #182E29; border-bottom: 1px solid rgba(217,179,108,.4); box-shadow: 0 10px 15px -3px rgba(0,0,0,.1), 0 4px 6px -4px rgba(0,0,0,.1); }
.tete.est-cache { transform: none; }
.tete-gauche { display: flex; align-items: center; }
.tete-logo img { height: 40px; width: auto; display: block; object-fit: contain; }
.univers { margin-left: 1.4rem; font-size: 1rem; }
.tete-droite { display: flex; align-items: center; gap: 1.25rem; color: #D9B36C; margin-left: auto; }
.tete-droite > a { color: #D9B36C; display: inline-flex; transition: color .3s; }
.tete-droite > a:hover { color: #fff; }
.tete-droite > a svg { width: 20px; height: 20px; }
.tete-droite > a.tete-tel svg { width: 24px; height: 24px; }
.tete .son, .tete.est-pleine .son { width: 34px; height: 34px; padding: 0; justify-content: center; border-radius: 50%; color: #D9B36C; border: 1px solid rgba(217,179,108,.45); }
.tete .son span { display: none; }
.tete .son svg { width: 18px; height: 18px; }
.barre-bas { position: fixed; left: 0; right: 0; bottom: 0; height: 80px; z-index: 100; display: flex; align-items: center; justify-content: space-around; background: #182E29; border-top: 1px solid rgba(217,179,108,.3); box-shadow: 0 -10px 30px rgba(0,0,0,.3); }
.barre-bas a { display: flex; flex-direction: column; align-items: center; gap: .25rem; color: rgba(255,255,255,.4); text-decoration: none; transition: color .3s; }
.barre-bas a:hover { color: rgba(255,255,255,.75); }
.barre-bas a[aria-current] { color: #D9B36C; }
.barre-bas svg { width: 24px; height: 24px; }
.barre-bas span { font: 700 9px/1 var(--texte); letter-spacing: .1em; text-transform: uppercase; }
body { padding-bottom: 80px; }
.whatsapp { bottom: 6rem !important; right: 1.5rem !important; }
@media (max-width: 480px) {
  .tete, .tete.est-pleine, .tete.est-sombre { padding: 1rem; }
  .univers { margin-left: .7rem; gap: .35rem; font-size: .88rem; }
  .tete-droite { gap: .75rem; }
  .univers a:first-child, .univers span { display: inline; }
}


/* ===== Carrousel « Nos villas » : images mises en avant + visionneuse en galerie ===== */
:where(a.diapo-img) { position: relative; display: block; }
a.diapo-img { cursor: zoom-in; }
.diapo-img img { transition: transform 1.2s cubic-bezier(.2,.7,.2,1), filter .6s; }
.diapo.est-actif .diapo-img img { animation: diapo-respire 14s ease-in-out infinite alternate; }
@keyframes diapo-respire { from { transform: scale(1); } to { transform: scale(1.07); } }
a.diapo-img:hover img, a.diapo-img:focus-visible img { animation-play-state: paused; transform: scale(1.1); filter: brightness(1.06); }
.diapo-loupe { position: absolute; right: .9rem; bottom: .9rem; width: 2.6rem; height: 2.6rem; border-radius: 50%; display: grid; place-items: center;
  color: #fff; background: rgb(10 22 19 / .45); border: 1px solid rgb(255 255 255 / .45); backdrop-filter: blur(6px);
  opacity: 0; transform: scale(.85); transition: opacity .35s, transform .35s; }
.diapo-loupe svg { width: 1.2rem; height: 1.2rem; }
a.diapo-img:hover .diapo-loupe, a.diapo-img:focus-visible .diapo-loupe { opacity: 1; transform: scale(1); }
@media (hover: none) { .diapo-loupe { opacity: .9; transform: none; } }
.diapo > .diapo-photos { grid-column: 1 / -1; grid-row: 2; justify-self: start; align-self: start; z-index: 3; }
.diapo-photos { cursor: pointer; font: inherit; font-size: .72rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; white-space: nowrap;
  display: inline-flex; align-items: center; gap: .45rem; padding: .7rem 1.15rem; border-radius: 999px; border: 1px solid var(--or); background: var(--or); color: var(--vert);
  transition: transform .35s var(--ease), background-color .35s var(--ease), color .35s var(--ease); }
.diapo-photos:hover, .diapo-photos:focus-visible { background: transparent; color: var(--or); transform: translateY(-2px); }
.diapo-photos span { opacity: .65; font-weight: 600; }
@media (prefers-reduced-motion: reduce) { .diapo.est-actif .diapo-img img { animation: none; } }

.visionneuse { padding: 0; overflow: hidden; }
.visionneuse-cadre { margin: 0; width: 100%; height: 100%; display: grid; place-items: center; overflow: hidden; padding: 4.5rem 5.5rem 5rem; }
.visionneuse-cadre img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; border-radius: 6px; cursor: zoom-in;
  transition: scale .45s cubic-bezier(.2,.7,.2,1); box-shadow: 0 30px 80px rgb(0 0 0 / .45); }
.visionneuse-cadre.est-zoome img { scale: 2.2; cursor: zoom-out; border-radius: 0; }
.visionneuse button { position: absolute; z-index: 2; background: rgb(10 22 19 / .35); border: 1px solid rgb(255 255 255 / .45); color: #fff; border-radius: 50%;
  width: 3rem; height: 3rem; font-size: 1.2rem; cursor: pointer; transition: background .3s, border-color .3s; }
.visionneuse button:hover, .visionneuse button:focus-visible { background: var(--or); border-color: var(--or); color: #182E29; }
.visionneuse .visionneuse-fermer { top: 1.2rem; right: 1.2rem; left: auto; }
.visionneuse .visionneuse-prec { left: 1.2rem; right: auto; top: 50%; translate: 0 -50%; }
.visionneuse .visionneuse-suiv { right: 1.2rem; left: auto; top: 50%; translate: 0 -50%; }
.visionneuse.est-seule .visionneuse-prec, .visionneuse.est-seule .visionneuse-suiv { display: none; }
.visionneuse-legende { position: absolute; left: 0; right: 0; bottom: 1.4rem; margin: 0; display: flex; gap: 1rem; justify-content: center; align-items: baseline;
  color: rgb(255 255 255 / .85); font-size: .9rem; letter-spacing: .02em; pointer-events: none; }
.visionneuse-compte { color: var(--or); font-size: .75rem; letter-spacing: .2em; }
@media (max-width: 700px) {
  .visionneuse-cadre { padding: 4rem .5rem 4.5rem; }
  .visionneuse .visionneuse-prec, .visionneuse .visionneuse-suiv { top: auto; bottom: 1rem; translate: none; width: 2.6rem; height: 2.6rem; }
  .visionneuse-legende { bottom: 4rem; font-size: .8rem; }
}

/* Bouton « Voir les photos » posé sur l'image principale (écran large) */
@media (min-width: 1000px) {
  .c-villas .diapo > .diapo-photos { left: 10%; top: auto; bottom: 26%; box-shadow: 0 10px 30px rgb(0 0 0 / .35); }
}
@media (max-width: 999px) { .diapo-bas { grid-row: 3; } }

/* Messages de retour des formulaires sur fond nuit : filet or à gauche, texte clair (le pastel du fond clair y était illisible). */
.zone-nuit .message { background: rgb(217 179 108 / .1); color: #fff; border-left: 2px solid var(--or); border-radius: 0 10px 10px 0; }
.zone-nuit .message-erreur { border-left-color: oklch(0.7 0.14 30); background: oklch(0.7 0.14 30 / .12); }
.message:focus { outline: none; }


/* Case facultative d'accord (invitations et actualités) dans le formulaire des rencontres : texte aligné sous lui-même. */
.h-accord { display: flex; gap: .55rem; align-items: flex-start; margin-top: .6rem; cursor: pointer; }
.h-accord input { margin-top: .2em; flex: none; accent-color: var(--or); }

/* ===== Parcours acquéreur : frise (page projet et parcours) et pages d'étape ===== */
.af { max-width: calc(64rem + 2 * var(--marge)); margin: 0 auto; padding: 0 var(--marge); }
.af .repere { margin-bottom: .8rem; }
.af-sous { color: var(--encre-2); max-width: 36rem; margin: 0 0 2.5rem; }
.af-liste { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); position: relative; }
.af-liste::before, .af-liste::after { content: ''; position: absolute; top: 1.35rem; left: calc(100% / 14); height: 1px; }
.af-liste::before { right: calc(100% / 14); background: var(--filet); }
.af-liste::after { background: var(--or); width: calc((100% - 100% / 7) * var(--af-trace) / 100); }
.af-noeud a { display: flex; flex-direction: column; align-items: center; gap: .85rem; text-align: center; text-decoration: none; padding: 0 .3rem; }
.af-num { position: relative; z-index: 1; width: 2.7rem; height: 2.7rem; border-radius: 50%; display: grid; place-items: center; background: #fff; border: 1px solid var(--or); font-family: var(--display); font-size: 1.1rem; color: var(--vert); transition: background .35s var(--ease), color .35s var(--ease), transform .35s var(--ease); }
.af-nom { font-size: .68rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; line-height: 1.45; color: var(--encre-2); transition: color .3s; }
.af-noeud a:hover .af-num, .af-noeud a:focus-visible .af-num { background: var(--vert); color: var(--or); transform: translateY(-3px); }
.af-noeud a:hover .af-nom { color: var(--vert); }
.af-noeud.est-faite .af-num { background: #fbf7ee; }
.af-noeud.est-active .af-num { background: var(--vert); color: var(--or); box-shadow: 0 0 0 5px rgb(217 179 108 / .2); }
.af-noeud.est-active .af-nom { color: var(--vert); }
.af-pied { margin-top: 2.2rem; }
.af-pied a { font-size: .74rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--vert); text-decoration: none; border-bottom: 1px solid var(--or); padding-bottom: .2rem; }
@media (max-width: 860px) {
  .af-liste { grid-template-columns: 1fr; max-width: 24rem; }
  .af-liste::before, .af-liste::after { top: 1.35rem; left: 1.35rem; width: 1px; }
  .af-liste::before { bottom: 1.35rem; right: auto; height: auto; }
  .af-liste::after { height: calc((100% - 2.7rem) * var(--af-trace) / 100); }
  .af-noeud a { flex-direction: row; text-align: left; gap: 1rem; padding: .4rem 0; }
  .af-num { flex: none; }
}
.parcours-achat { padding-top: clamp(7rem, 10vw, 8.5rem); padding-bottom: 2rem; }
.acheter-entete { max-width: calc(48rem + 2 * var(--marge)); margin: 0 auto 3rem; padding: 0 var(--marge); }
.acheter-fil { font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; color: var(--encre-2); margin: 0 0 1.5rem; }
.acheter-fil a { color: inherit; text-decoration: none; }
.acheter-fil a:hover { color: var(--or-texte); }
.acheter-entete h1 { font-size: clamp(2rem, 4.2vw, 3.2rem); line-height: 1.08; color: var(--vert); margin: .5rem 0 0; }
.acheter-entete .chapo { color: var(--encre-2); margin-top: 1rem; max-width: 40rem; }
.acheter-corps { max-width: calc(48rem + 2 * var(--marge)); margin: 3.5rem auto 0; padding: 0 var(--marge); }
.acheter-bref { background: #fbf7ee; border-left: 3px solid var(--or); padding: 1.25rem 1.5rem; margin: 0 0 2.5rem; }
.acheter-bref p:first-child { font-size: .7rem; letter-spacing: .22em; text-transform: uppercase; color: var(--or-texte); margin: 0 0 .5rem; }
.acheter-bref p:last-child { font-size: 1.12rem; line-height: 1.75; color: var(--vert); margin: 0; }
.acheter-texte p { line-height: 1.85; margin: 0 0 1.1rem; }
.acheter-liste { list-style: none; margin: 0; padding: 0; }
.acheter-liste li { border-left: 1px solid var(--or); padding: 0 0 0 1.4rem; margin: 0 0 2.6rem; }
.acheter-liste .repere { margin-bottom: .5rem; }
.acheter-liste h2 { font-size: clamp(1.35rem, 2.4vw, 1.75rem); line-height: 1.2; margin: 0 0 .6rem; }
.acheter-liste h2 a { color: var(--vert); text-decoration: none; }
.acheter-liste h2 a:hover { color: var(--or-texte); }
.acheter-liste p { margin: 0; line-height: 1.75; }
.acheter-lire { display: inline-block; margin-top: .7rem; font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; color: var(--vert); text-decoration: none; border-bottom: 1px solid var(--or); }
.acheter-faq { margin-top: 3rem; }
.acheter-voisines { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; margin: 3.5rem 0 0; }
.acheter-voisines a { display: block; border-top: 1px solid var(--filet); padding-top: 1rem; text-decoration: none; color: var(--vert); }
.acheter-voisines a.suivante { text-align: right; border-top-color: var(--or); }
.acheter-voisines span { display: block; font-size: .7rem; letter-spacing: .18em; text-transform: uppercase; color: var(--encre-2); margin-bottom: .3rem; }
.acheter-note { font-size: .82rem; color: var(--encre-2); margin-top: 2.5rem; }
.page-projet .af { margin-top: clamp(4rem, 8vw, 6rem); margin-bottom: clamp(4rem, 8vw, 6rem); }
@media (max-width: 620px) { .acheter-voisines { grid-template-columns: 1fr; } .acheter-voisines a.suivante { text-align: left; } }
.acheter-corps .faq { padding: 0; max-width: none; margin: 3rem 0 0; }
.acheter-corps .faq h2 { font-size: clamp(1.6rem, 3vw, 2.2rem); margin-bottom: 1.25rem; }

/* ===== Parcours acquéreur, lecture rythmée (09/10/2026) : aperçu sur la page projet, sommaire illustré, pages d'étape ===== */
.af-liste::after { transition: width .6s var(--ease); }
.af-noeud.est-vue .af-num { background: var(--vert); color: var(--or); box-shadow: 0 0 0 5px rgb(217 179 108 / .2); }
.af-noeud.est-vue .af-nom { color: var(--vert); }
.af-apercu { display: grid; margin-top: 2.75rem; }
.af-bloc { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(1.75rem, 4vw, 3.5rem); align-items: center; }
.af-bloc figure { margin: 0; border-radius: 30px 0 30px 0; overflow: hidden; aspect-ratio: 16 / 10; background: var(--fond-2, #f4efe4); }
.af-bloc img { width: 100%; height: 100%; object-fit: cover; display: block; }
.af-bloc-inverse { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); }
.af-bloc-inverse figure { order: 2; }
h1.af-pan-titre { font-size: clamp(2rem, 3.4vw, 2.9rem); line-height: 1.12; margin-top: .9rem; }
h2.af-pan-titre { font-size: clamp(1.5rem, 2.5vw, 2.05rem); }
.af-bloc-tete .af-pan-texte { font-size: 1.05rem; color: var(--encre); }
.af-panneau { grid-area: 1 / 1;
  opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity .45s var(--ease), transform .45s var(--ease), visibility 0s .45s; }
.af-panneau.est-vu { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.af-panneau img { transform: scale(1.04); transition: transform 1.2s var(--ease); }
.af-panneau.est-vu img { transform: none; }
.af-pan-repere, .ab-cta-repere { font-size: .66rem; font-weight: 700; letter-spacing: .26em; text-transform: uppercase; color: var(--or-texte); margin: 0; }
.af-pan-titre { font-family: var(--display); font-weight: 400; font-size: clamp(1.45rem, 2.3vw, 1.9rem); line-height: 1.2; color: var(--vert); margin: .7rem 0 0; }
.af-pan-texte { color: var(--encre-2); line-height: 1.8; font-size: .97rem; margin: 1rem 0 0; }
.af-pan-cles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--filet); border-bottom: 1px solid var(--filet); }
.af-pan-cles { margin: 1.5rem 0 0; }
.af-pan-cles div { padding: .95rem .6rem .95rem 0; }
.af-pan-cles div + div { border-left: 1px solid var(--filet); }
.af-pan-cles div + div { padding-left: 1rem; }
.af-pan-cles b { display: block; font-family: var(--display); font-weight: 400; line-height: 1.2; color: var(--vert); }
.af-pan-cles b { font-size: 1.2rem; }
.af-pan-cles span { display: block; margin-top: .35rem; font-size: .6rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--encre-2); line-height: 1.5; }
.af-pan-liens { display: flex; flex-wrap: wrap; align-items: center; gap: 1.25rem 1.75rem; margin: 1.6rem 0 0; }
.af-pan-lire { font-size: .7rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--vert); text-decoration: none; border-bottom: 2px solid var(--or); padding-bottom: .25rem; }
.af-pan-rdv { font-size: .7rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; text-decoration: none; background: var(--vert); color: var(--or); padding: .85rem 1.3rem; border-radius: 12px; transition: background .3s, color .3s; }
.af-pan-rdv:hover { background: var(--or); color: var(--vert); }
@media (max-width: 860px) {
  /* Pastilles sans libellés : pagination de l'aperçu (page projet), repère discret dans le parcours. */
  .af-compacte .af-liste, .af-avec-apercu .af-liste { grid-template-columns: repeat(7, minmax(0, 1fr)); max-width: none; }
  .af-compacte .af-liste::before, .af-compacte .af-liste::after, .af-avec-apercu .af-liste::before, .af-avec-apercu .af-liste::after { top: 1.05rem; bottom: auto; left: calc(100% / 14); width: auto; height: 1px; }
  .af-compacte .af-liste::before, .af-avec-apercu .af-liste::before { right: calc(100% / 14); }
  .af-compacte .af-liste::after, .af-avec-apercu .af-liste::after { right: auto; width: calc((100% - 100% / 7) * var(--af-trace) / 100); height: 1px; }
  .af-compacte .af-noeud a, .af-avec-apercu .af-noeud a { flex-direction: column; padding: 0; gap: 0; }
  .af-compacte .af-num, .af-avec-apercu .af-num { width: 2.1rem; height: 2.1rem; font-size: .9rem; }
  .af-compacte .af-nom, .af-avec-apercu .af-nom { display: none; }
  .af-bloc, .af-bloc-inverse { grid-template-columns: 1fr; gap: 1.4rem; align-items: start; }
  .af-bloc-inverse figure { order: 0; }
  .af-bloc figure { aspect-ratio: 16 / 9; }
  h1.af-pan-titre { font-size: 1.85rem; }
  .af-pan-cles b { font-size: 1.05rem; }
  .af-pan-cles div + div { padding-left: .7rem; }
  .af-apercu { display: flex; gap: 1rem; overflow-x: auto; scroll-snap-type: x mandatory; margin: 1.75rem calc(-1 * var(--marge)) 0; padding: 0 var(--marge) .5rem; scroll-padding: 0 var(--marge); scrollbar-width: none; }
  .af-apercu::-webkit-scrollbar { display: none; }
  .af-panneau { flex: 0 0 84%; grid-template-columns: 1fr; gap: 0; align-items: start; scroll-snap-align: start; opacity: 1; visibility: visible; transform: none;
    background: #fff; border: 1px solid var(--filet); border-radius: 22px 0 22px 0; overflow: hidden; }
  .af-panneau figure { border-radius: 0; aspect-ratio: 16 / 9; }
  .af-panneau img { transform: none; }
  .af-panneau > div { padding: 1.2rem 1.25rem 1.4rem; }
  .af-panneau .af-pan-titre { font-size: 1.25rem; }
  .af-panneau .af-pan-texte { font-size: .9rem; line-height: 1.7; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
  .af-panneau .af-pan-cles, .af-panneau .af-pan-rdv { display: none; }
  .af-panneau .af-pan-liens { margin-top: 1.1rem; }
}
@media (prefers-reduced-motion: reduce) { .af-panneau, .af-panneau img, .af-liste::after { transition: none; } }

/* Boutons et appel à l'action */
.ab-btn { display: block; text-align: center; padding: .95rem 1rem; border-radius: 12px; font-size: .7rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; text-decoration: none; transition: background .3s, color .3s, border-color .3s; }
.ab-btn + .ab-btn { margin-top: .6rem; }
.ab-btn-or { background: var(--or); color: var(--vert); }
.ab-btn-or:hover { background: #fff; }
.ab-btn-ligne { border: 1px solid rgb(217 179 108 / .5); color: var(--or); }
.ab-btn-ligne:hover { border-color: var(--or); }
.ab-cta { background: var(--vert); color: #fff; border-radius: 30px 0 30px 0; padding: 1.75rem 1.6rem; border-left: 4px solid var(--or); }
.ab-cta .ab-cta-repere { color: var(--or); }
.ab-cta-titre { font-family: var(--display); font-size: 1.45rem; line-height: 1.2; margin: .6rem 0 0; }
.ab-cta-texte { color: rgb(255 255 255 / .78); font-size: .88rem; line-height: 1.65; margin: .8rem 0 1.2rem; }

/* Sommaire : bandeau d'appel sous la frise, étapes illustrées en alternance */
.ab-bandeau { margin-top: 3rem; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1.5rem 3rem; align-items: center; }
.ab-bandeau > div { border-left: 4px solid var(--or); padding: .3rem 0 .3rem 1.4rem; }
.ab-bandeau-titre { font-family: var(--display); font-size: clamp(1.4rem, 2.4vw, 1.8rem); line-height: 1.2; color: var(--vert); margin: .5rem 0 0; }
.ab-bandeau-texte { color: var(--encre-2); font-size: .92rem; margin: .5rem 0 0; max-width: 36rem; }
.ab-bandeau .ab-btn { padding: 1rem 1.6rem; }

/* Page d'étape : article et colonne d'appel qui reste visible */
.ab-grille { margin-top: 4.5rem; display: grid; grid-template-columns: minmax(0, 46rem) 20rem; justify-content: space-between; gap: 4rem; align-items: start; }
.ab-suivante { display: grid; grid-template-columns: 12rem minmax(0, 1fr); gap: 1.5rem; align-items: center; margin-top: 3.5rem; text-decoration: none; border: 1px solid var(--filet); border-radius: 22px 0 22px 0; overflow: hidden; background: #fff; transition: border-color .35s, box-shadow .35s; }
.ab-suivante:hover { border-color: var(--or); box-shadow: 0 18px 40px -24px rgb(24 46 41 / .35); }
.ab-suivante img { width: 100%; height: 100%; min-height: 8rem; object-fit: cover; display: block; transition: transform 1s var(--ease); }
.ab-suivante:hover img { transform: scale(1.05); }
.ab-suivante div { padding: 1.2rem 1.4rem 1.2rem 0; }
.ab-suivante small { display: block; font-size: .64rem; font-weight: 700; letter-spacing: .24em; text-transform: uppercase; color: var(--or-texte); }
.ab-suivante strong { display: block; margin-top: .4rem; font-family: var(--display); font-weight: 400; font-size: 1.2rem; line-height: 1.35; color: var(--vert); }
.ab-prec { display: inline-block; margin-top: 1.4rem; font-size: .7rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--encre-2); text-decoration: none; }
.ab-prec:hover { color: var(--vert); }
.ab-cote { position: sticky; top: 6.5rem; }
.ab-sommaire { margin: 1.75rem 0 0; padding: 0; list-style: none; border-left: 1px solid var(--filet); }
.ab-sommaire a { display: flex; gap: .7rem; padding: .42rem 0 .42rem 1rem; margin-left: -1px; border-left: 1px solid transparent; font-size: .84rem; color: var(--encre-2); text-decoration: none; transition: color .3s, border-color .3s; }
.ab-sommaire a:hover { color: var(--vert); }
.ab-sommaire a[aria-current] { color: var(--vert); font-weight: 600; border-left-color: var(--or); }
.ab-sommaire i { font-style: normal; font-family: var(--display); color: var(--or-texte); width: 1rem; }
.ab-mobile { display: none; margin-top: 2rem; }
@media (max-width: 1023px) {
  .ab-grille { grid-template-columns: minmax(0, 1fr); gap: 0; margin-top: 2.5rem; }
  .ab-cote { display: none; }
  .ab-mobile { display: block; }
}
@media (max-width: 760px) {
  .ab-bandeau { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .ab-suivante { grid-template-columns: 1fr; }
  .ab-suivante img { aspect-ratio: 16 / 9; min-height: 0; }
  .ab-suivante div { padding: 1.1rem 1.3rem 1.3rem; }
}
.ab-grille .faq { padding: 0; max-width: none; margin: 3rem 0 0; }
.ab-grille .faq h2 { font-size: clamp(1.6rem, 3vw, 2.2rem); margin-bottom: 1.25rem; }
.page-projet .af { max-width: calc(var(--large) + 2 * var(--marge)); }
/* Pages du parcours (sommaire et étapes) : un seul cadre, celui des sections de la page projet ; tout ce qu'il contient
   en prend la largeur, pour que frise et blocs ne bougent pas d'une page à l'autre (Timé, 09/10 : « la structure n'est pas harmonisée »). */
.ab-cadre { max-width: calc(var(--large) + 2 * var(--marge)); margin: 0 auto; padding: 0 var(--marge); }
.ab-cadre .af, .ab-cadre .acheter-entete { max-width: none; padding: 0; margin-left: 0; margin-right: 0; }
.ab-fil { margin: 0 0 1.75rem; }
.ab-tete { margin-top: 3rem; }
.ab-liste { list-style: none; margin: 4.5rem 0 0; padding: 0; }
.ab-liste li + li { margin-top: clamp(3.5rem, 7vw, 5.5rem); }
.ab-liste .af-pan-titre a { color: inherit; text-decoration: none; }
.page-acheter .acheter-note { margin-top: 3rem; }
@media (max-width: 640px) { .ab-tete { margin-top: 2rem; } }

/* La situation (15/10/2026) : Bali dans le monde et Hills sur Bali, avant la carte du quartier. Même grille que l'emplacement. */
.c-situation { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(1.5rem, 3vw, 3rem) clamp(2rem, 4vw, 4rem); align-items: center; height: auto !important; min-height: 0 !important; padding: clamp(1.5rem, 3vw, 3rem) !important; container-type: normal !important; }
.c-situation > * { position: relative !important; inset: auto !important; }
.c-situation .repere { font-size: 1.05rem; margin: 0 0 1.2rem; }
.c-situation .titre-carte { font-size: min(5.4vw, 10vh) !important; margin: 0 0 1.4rem !important; }
.c-situation-tete p { max-width: 32rem; font-size: 1rem !important; color: rgb(255 255 255 / .82); }
.c-situation-cartes { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(.75rem, 1.5vw, 1.25rem); align-items: stretch; }
.situation-carte { margin: 0; border-radius: 12px; overflow: hidden; background: #f6f1e7; box-shadow: 0 30px 70px -30px rgb(0 0 0 / .6); display: flex; align-items: center; }
.situation-carte svg { display: block; width: 100%; height: auto; }
@media (max-width: 999px) { .c-situation, .c-situation-cartes { grid-template-columns: minmax(0, 1fr) !important; } .c-situation .titre-carte { font-size: clamp(2.2rem, 11vw, 3.4rem) !important; } }