/* Direction « NOCTURNE » — sombre et dorée, cinématographique : verre fumé, filets champagne, Bodoni.
   Animations (3) : zoom très lent de la photo d'accueil · filet doré qui se trace sous les titres · reflet de lumière
   qui passe sur les cartes de verre au survol. */
:root {
  --fond: #0c0d10; --fond-2: #13151a; --surface: #1b1e24;
  --encre: #f2ede4; --encre-2: #b9b2a6; --filet: rgba(242, 237, 228, .14);
  --marque: #c9a96a; --marque-texte: #d8bc80; --bouton: #d8bc80; --sur-bouton: #111215;
  --verre-bg: rgba(16, 18, 23, .58); --verre-bord: rgba(255, 255, 255, .13); --verre-flou: 24px;
  --verre-doux-bg: rgba(255, 255, 255, .035);
  --ombre: 0 40px 90px -40px rgba(0, 0, 0, .8);
  --rayon: 0px; --rayon-grand: 2px;
  --police-titres: "Bodoni Moda", "Didot", serif;
  --police-texte: "Jost", system-ui, sans-serif;
  --st-libre: #85d6a5; --st-reserve: #ebc56f; --st-attente: #a7c1e6; --st-vendu: #f09d9d;
}
body { font-weight: 400; letter-spacing: .005em; }
.surtitre { letter-spacing: .3em; font-weight: 500; font-size: 11.5px; }
.pl-sur { color: var(--marque-texte); }
.pl-nom { font-size: 30px; letter-spacing: .04em; font-weight: 500; }
.entete-nav a { letter-spacing: .08em; text-transform: uppercase; font-size: 12.5px; font-weight: 500; }
.bouton { letter-spacing: .12em; text-transform: uppercase; font-size: 12.5px; font-weight: 500; min-height: 50px; padding: 0 26px; }
.bouton--petit { min-height: 40px; font-size: 11.5px; padding: 0 16px; }
.bouton--verre { color: var(--encre); }

/* Accueil plein cadre */
.hero { position: relative; min-height: 100svh; display: grid; place-items: center; text-align: center; padding: 120px var(--gouttiere) 190px; overflow: hidden; }
.hero-fond { position: absolute; inset: 0; overflow: hidden; }
.hero-img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 60%; transform-origin: 60% 55%; }
[data-anim~="kenburns"] .hero-img { animation: kb 26s ease-in-out infinite alternate; }
@keyframes kb { from { transform: scale(1.02); } to { transform: scale(1.1); } }
.hero-voile { position: absolute; inset: 0; background:
  /* voile assez dense pour TOUTE photo (jour comme nuit) : mesuré sur un séjour en plein jour (module, 10.10.2026) */
  radial-gradient(ellipse 75% 62% at 50% 46%, rgba(8, 9, 11, .7), rgba(8, 9, 11, .42) 76%),
  linear-gradient(180deg, rgba(8, 9, 11, .8) 0%, rgba(8, 9, 11, .38) 26%, rgba(8, 9, 11, .55) 68%, var(--fond) 100%); }
.hero-texte { position: relative; max-width: 860px; }
.hero-titre { font-family: var(--police-titres); font-size: clamp(54px, 7.6vw, 116px); line-height: .98; font-weight: 400; margin: 22px 0 0; }
.hero .filet-or { margin: 30px auto 26px; width: 110px; }
.hero-accroche { font-size: 19px; line-height: 1.6; color: rgba(242, 237, 228, .92); max-width: 560px; margin-inline: auto; font-weight: 300; }
.hero-actions { display: flex; gap: 12px; justify-content: center; margin-top: 38px; flex-wrap: wrap; }
.hero-barre { position: absolute; left: 50%; bottom: 40px; transform: translateX(-50%); padding: 22px 34px; width: max-content; max-width: calc(100% - 32px); }
.hero-barre .compteur { border-color: rgba(201, 169, 106, .35); padding-inline: 34px; text-align: left; }
.hero-barre .compteur:first-child { padding-left: 0; }
.compteur dt { color: var(--marque-texte); letter-spacing: .24em; font-weight: 500; font-size: 10.5px; }
.compteur dd { font-size: 32px; font-weight: 500; }
.compteur dd small { font-family: var(--police-texte); font-weight: 400; font-size: .55em; color: var(--encre-2); }


/* Filet doré qui se trace */
.filet-actif .filet-or { transform: scaleX(0); transform-origin: left; transition: transform 1.6s cubic-bezier(.65, 0, .2, 1) .2s; }
.filet-actif .hero .filet-or { transform-origin: center; }
.filet-actif .filet-or.trace { transform: scaleX(1); }

/* Reflet de lumière sur le verre au survol */
.atout, .carte-lot, .contact-carte, .contact-appel, .plans, .hero-barre { overflow: hidden; }
.atout, .carte-lot, .contact-carte, .contact-appel, .plans { position: relative; }
.atout::after, .carte-lot::after, .contact-carte::after, .contact-appel::after, .plans::after {
  content: ""; position: absolute; inset: -1px; pointer-events: none; transform: translateX(-130%);
  background: linear-gradient(110deg, transparent 30%, rgba(255, 236, 200, .10) 48%, rgba(255, 236, 200, .02) 56%, transparent 70%); }
[data-anim~="reflet"] .atout:hover::after, [data-anim~="reflet"] .carte-lot:hover::after, [data-anim~="reflet"] .contact-carte:hover::after,
[data-anim~="reflet"] .contact-appel:hover::after, [data-anim~="reflet"] .plans:hover::after { transform: translateX(130%); transition: transform 1.3s cubic-bezier(.3, 0, .2, 1); }

/* Sections */
.section-tete { text-align: left; }
.section-titre { font-size: clamp(36px, 4.6vw, 62px); font-weight: 400; line-height: 1.05; }
.projet-intro { font-weight: 300; font-size: 20px; }
.chiffres dt { color: var(--marque-texte); letter-spacing: .22em; font-weight: 500; font-size: 11px; }
.atout { border: 1px solid var(--filet); border-top: 1px solid rgba(201, 169, 106, .5); }
.atout-n { font-size: 52px; }
.atout h3 { font-weight: 500; letter-spacing: .02em; }

.lots { background: var(--fond-2); }
.table-cadre { border: 1px solid var(--filet); background: rgba(255, 255, 255, .02); }
.table-lots thead th { color: var(--marque-texte); letter-spacing: .22em; font-weight: 500; font-size: 10.5px; }
.table-lots tr.groupe th { font-size: 26px; }
.table-lots tr.groupe th span { color: var(--encre-2); }
.lot-ref { font-family: var(--police-titres); font-size: 19px; font-weight: 500; }
.onglets { background: rgba(255, 255, 255, .03); }
.onglets button { letter-spacing: .06em; }
.carte-prix { color: var(--marque-texte); }
.plans img { filter: invert(.92) hue-rotate(180deg) brightness(.95); background: #000; }
.annexes strong { color: var(--marque-texte); font-weight: 500; letter-spacing: .1em; text-transform: uppercase; font-size: 12px; }

.galerie { background: var(--fond); }
.g-item { outline: 1px solid transparent; outline-offset: -10px; transition: outline-color .4s; }
.g-item:hover { outline-color: rgba(216, 188, 128, .8); }

.situation { background: var(--fond-2); }
.carte { background: #101217; }
.carte-motif { color: rgba(201, 169, 106, .22); }
.trajets strong { color: var(--marque-texte); }

.contact { padding: 150px 0; }
.contact-fond::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(10, 11, 14, .86), rgba(10, 11, 14, .62)); }
.contact-fond img { filter: saturate(.7); }
.portrait { filter: saturate(.92); }
.contact-nom { font-size: 42px; }

.partenaires { background: var(--fond); }
/* Logos d'agence et de constructeur (souvent sombres) : posés sur une carte ivoire pour rester visibles sur la nuit */
.partenaire-logo img, .entete-agence img, .portrait--logo { background: #f2ede4; border-radius: 4px; padding: 6px 10px; }
.portrait--logo { padding: 18px; }
.partenaire-logo--vide { border-color: rgba(201, 169, 106, .35); }
.pied { background: #08090b; }

.fenetre-boite { background: var(--fond-2); }
.fenetre-fermer { background: var(--surface); }
.champs input, .champs textarea { background: var(--surface); color: var(--encre); }
.g-agrandir { background: rgba(216, 188, 128, .9); color: #111215; }

@media (max-width: 860px) {
  .hero { padding: 110px 20px 250px; }
  .hero-barre { bottom: 20px; width: calc(100% - 32px); padding: 18px 20px; }
  .hero-barre .compteur { padding-inline: 14px; }
}
@media (max-width: 560px) {
  .hero { padding: 100px 16px 230px; min-height: 100svh; }
  .hero-titre { font-size: 54px; }
  .hero-accroche { font-size: 17px; }
  .hero-actions .bouton { flex: 1; padding: 0 12px; }
  .hero-barre .compteur:nth-child(3) { padding-left: 0; }
  .pl-nom { font-size: 22px; }
  .contact { padding: 80px 0; }
  .contact-nom { font-size: 34px; }
}

/* Chiffres et références : le Bodoni est épaissi pour que les traits fins (le « 4 ») restent lisibles en petit */
.carte-lot h3, .carte-prix, .lot-ref, .compteur dd, .chiffres dd, .atout-n, .trajets strong, .section-titre, .table-lots tr.groupe th { font-weight: 600; }
.hero-titre, .contact-nom { font-weight: 500; }