/* ─────────────────────────────────────────────────────────────────
   luxe.css — refonte claire éditoriale, feuille PARTAGÉE par tout le site.
   Chargée APRÈS le <style> inline de chaque page : les :root et les
   sélecteurs de même spécificité l'emportent (ordre source). L'essentiel
   du travail = rebrancher les variables de palette du thème sombre vers
   la palette claire : ~47 règles par fiche se reteintent sans y toucher.
   ───────────────────────────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@300;400;500;600;700&family=Space+Mono:wght@400;700&display=swap');

/* 1. Palette : on redéfinit les variables du thème sombre en clair.
      Tout ce qui utilise var(--dark/--gold/--white...) bascule d'un coup. */
:root{
  --dark:#F2EFE7;  --dark-2:#ECE7DB;  --dark-3:#E7E1D4;
  --white:#15140F; --white-soft:#4C574C; --white-muted:#726C60;
  --gold:#0E5B5E;  --gold-light:#12706F; --gold-dark:#0A4749;
  --lx-paper:#F2EFE7; --lx-ink:#15140F; --lx-teal:#0E5B5E; --lx-teal-deep:#0A4749;
  --lx-rule:rgba(21,20,15,.16); --lx-rule-2:rgba(21,20,15,.42);
  --lx-serif:'Archivo',system-ui,sans-serif; --lx-sans:'Archivo',system-ui,sans-serif;
  --lx-mono:'Space Mono',ui-monospace,monospace;
}

/* 2. Base */
body{background:var(--lx-paper);color:var(--lx-ink);font-family:var(--lx-sans)}
h1,h2,h3,h4{font-family:var(--lx-serif);font-weight:600;letter-spacing:0}
/* grand titre de page (fiches, quartiers, journal, pages fixes) -> capitales larges façon couture */
.page-hero h1,.hero h1{text-transform:uppercase;letter-spacing:.02em;font-weight:600;line-height:1.06}
.page-hero .label,.eyebrow,[class*="label"]{font-family:var(--lx-mono)!important;letter-spacing:.12em;text-transform:uppercase}

/* 3. Rattrapage des dorés EN DUR (n'utilisent pas les variables) -> teal/encre */
.gold-line{background:var(--lx-teal)!important}
[class*="label"]{color:var(--lx-teal)}

/* 4. Nav -> masthead clair, filet net, libellés monospace */
.nav-bar{background:var(--lx-paper)!important;border-bottom:1px solid var(--lx-rule-2)!important;
  backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
.nav-brand{display:inline-flex!important;flex-direction:column;align-items:center;line-height:1.05;color:var(--lx-ink)!important;font-family:var(--lx-serif)!important;text-transform:uppercase}.nav-brand .nb-a{font-size:.8rem;font-weight:500;letter-spacing:.32em;text-indent:.32em}.nav-brand .nb-b{font-size:.5rem;font-weight:400;letter-spacing:.62em;text-indent:.62em;color:var(--lx-teal);margin-top:.6em}
.nav-links a{font-family:var(--lx-mono)!important;font-size:.68rem!important;letter-spacing:.05em;
  text-transform:uppercase;color:var(--lx-ink-soft,#4C574C)!important}
.nav-links a:hover,.nav-links a.active{color:var(--lx-teal)!important}
.nav-logo svg path,.nav-logo svg line{stroke:var(--lx-ink)!important}
.menu-toggle span{background:var(--lx-ink)!important}

/* 5. Footer -> colophon encre + mono */
footer{background:var(--lx-ink)!important;border-top:none!important}
footer p{font-family:var(--lx-mono)!important;font-size:.66rem!important;letter-spacing:.04em;color:#8f978f!important}
footer a{color:#cdd6cf!important;text-decoration:none}
footer a:hover{color:#fff!important}

/* 6. Boutons contour -> encre, angles nets, mono */
.v-btn,.back-link a{border-color:var(--lx-ink)!important;color:var(--lx-ink)!important;
  font-family:var(--lx-mono)!important;letter-spacing:.08em;border-radius:0!important}
.v-btn--solid{background:var(--lx-ink)!important;color:var(--lx-paper)!important}
.v-btn:hover,.back-link a:hover{background:var(--lx-teal)!important;color:#fff!important;border-color:var(--lx-teal)!important}

/* 7. Bouton WhatsApp flottant -> carré encre */
.wa-float{background:var(--lx-ink)!important;color:#fff!important;border-radius:0!important;
  border:1px solid var(--lx-ink)!important;box-shadow:none!important}
.wa-float:hover{background:var(--lx-teal)!important}

/* 8. Colonne de lecture : fiches FR (contenu dans un <article> nu, sans max-width).
      La prose du journal utilise .article-body (classe) -> garde sa propre largeur. */
article{max-width:770px;margin-left:auto;margin-right:auto;padding:0 clamp(1.1rem,4vw,1.5rem)}
article > p{line-height:1.85}

/* 9. Détails : supprimer les cadres dorés fantômes du thème sombre, et
      redonner de l'air entre le texte et les boutons (fini le "collé"). */
.v-close,.cta-box,.v-ask{border:none!important}
.v-block,.v-faq,.v-gallery,.toc,[class*="v-cta"],[class*="v-hero"]{border-color:var(--lx-rule)!important}
.v-cta,[class*="v-cta"]{margin-top:3.4rem!important;gap:.9rem}
.v-btn,.back-link a{padding:1.02rem 1.9rem!important}
.back-cta,.cta-box{margin-top:3.2rem}

/* 10. Rattrapage des textes codés en dur pour le thème SOMBRE : le rebind de
      variables ne les atteint pas, donc ils restaient quasi blancs / or pâle
      (invisibles ou illisibles) sur le papier clair. On les repasse en encre. */
.quote p{color:var(--lx-ink)!important}
.page-hero .lead,.lead,.check{color:#4C574C!important}
.page-hero .eyebrow,.eyebrow,.quote .by,.stat-item .num em{color:var(--lx-teal)!important}
.stat-item .lbl,.submit-note,.ask-meta{color:#726C60!important}
.folio{color:#8A8172!important}
.field label{color:#4C574C!important}
.field input::placeholder,.field textarea::placeholder,.ask-input input::placeholder{color:#9A9488!important}

/* 11. Liens de prose : teal soigné + soulignement fin (fini le bleu navigateur). */
.content a,.article-body a,article a,.about-body a,.back-cta a,.check a,.actions a,.ask-preset,.quote a,p a:not([class*="btn"]):not(.fill){
  color:var(--lx-teal);text-decoration:none;transition:color .2s}
.content a:hover,.article-body a:hover,article a:hover,.about-body a:hover,.back-cta a:hover,.check a:hover,.actions a:hover,.quote a:hover,p a:not([class*="btn"]):not(.fill):hover{
  color:var(--lx-teal-deep);text-decoration:underline;text-decoration-color:rgba(14,91,94,.32);text-decoration-thickness:1px;text-underline-offset:.24em}

/* 14. Emphase de prose : fini le gras "IA". <strong> au poids du corps (discret).
      !important car des pages ont un .copy p strong{font-weight:500} plus spécifique. */
.content strong,.article-body strong,article strong,.copy strong,.copy p strong,.about-body strong,.quote strong,.q-block strong,.q-close strong,.story strong,p strong{font-weight:inherit!important}

/* 12. Cartes villa avec texte SUR la photo (.card .meta a un voile sombre) :
      le rebind avait rendu le texte sombre -> sombre sur sombre = illisible.
      On force le texte clair. Et on garantit un bouton plein toujours lisible. */
.card .meta,.card .meta h2{color:#fff!important}
.card .meta .label{color:rgba(255,255,255,.92)!important}
.card .meta p{color:rgba(255,255,255,.82)!important}
.q-btn--solid,.v-btn--solid,.btn--fill,a.fill{color:var(--lx-paper)!important;text-decoration:none!important}
.q-btn{text-decoration:none!important}

/* 15. Unification typographique : on retire le serif Bodoni Moda hérité de
      l'ancien thème. La DA ne porte que Archivo (display/corps) + Space Mono
      (libellés). On garde la casse et le style (italique = italique Archivo,
      accent éditorial moderne, plus la vignette "presse de luxe"). */
.cta-box h2,.faq summary,.faq-section summary,.faq-section h2,.faq-q h3,
.page-hero .lead,.lead,.sub,.submit-note,.field input,.field textarea,.check,
.card .meta h2,.body h3,.svc h3,.pillar h3,
.testimonials-head h2,.journal-card h2,.contact-form-header h2,
.stat-item .num,.quote p,.or,.q-block h2,.q-close h2{
  font-family:var(--lx-serif)!important}

/* 13. Logo compact sur mobile : evite que "LUXURY VILLAS" casse sur deux lignes. */
@media(max-width:600px){
  .nav-brand{align-items:flex-start!important}
  .nav-brand .nb-a{white-space:nowrap;font-size:.74rem;letter-spacing:.2em;text-indent:0}
  .nav-brand .nb-b{white-space:nowrap;font-size:.48rem;letter-spacing:.4em;text-indent:0;margin-top:.5em}
}

/* 16. Transitions de page : fondu doux (crossfade) PARTOUT, à la place du slide.
      Les pages intérieures définissent un slide (translateX) dans leur <style> inline ;
      luxe.css étant chargée APRÈS, ces règles l'écrasent par la cascade (même spécificité,
      source plus tardive) — sans avoir à toucher les ~160 fichiers, et quelle que soit la
      variante du bloc inline. On neutralise aussi la variante html.nav-back (retour arrière)
      pour que le fondu soit symétrique. Et `@view-transition:auto` active le crossfade sur
      les pages qui n'avaient AUCUNE transition (mentions légales, privacy, terms, thanks).
      Le fondu reste court (300ms) pour rester « rapide et fluide » ; coupé si l'utilisateur
      a demandé moins d'animation. (Chrome/Edge/Safari récents ; ailleurs = navigation nette,
      sans pire flash que le défaut.) */
@view-transition{navigation:auto}
::view-transition-old(root){animation:.3s cubic-bezier(.4,0,.2,1) both vt-fade-out}
::view-transition-new(root){animation:.3s cubic-bezier(.4,0,.2,1) both vt-fade-in}
html.nav-back::view-transition-old(root){animation-name:vt-fade-out}
html.nav-back::view-transition-new(root){animation-name:vt-fade-in}
@keyframes vt-fade-out{to{opacity:0}}
@keyframes vt-fade-in{from{opacity:0}}
@media(prefers-reduced-motion:reduce){
  ::view-transition-old(root),::view-transition-new(root){animation:none!important}
}

/* 17. Galerie villa = carrousel « galerie d'art » sur TOUS les écrans. Les fiches
      affichaient une grille sur desktop ; luxe.css (chargée après) la passe en
      défilement horizontal fluide avec scroll-snap : boutons ‹ › au clic sur desktop,
      glissé au doigt sur mobile (natif). La 1re photo (hero) est déjà la plus belle.
      Le wrapper .v-gallery-wrap est injecté par /js/villa-gallery.js. */
.v-gallery-wrap{position:relative;margin:0 0 4.6rem}
.v-gallery{display:flex!important;grid-template-columns:none!important;
  overflow-x:auto;overflow-y:hidden;gap:.9rem;margin:0!important;padding:0;
  scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scroll-behavior:smooth;
  scrollbar-width:none}
.v-gallery::-webkit-scrollbar{display:none}
.v-gallery .v-shot{flex:0 0 86%;scroll-snap-align:center;margin:0;overflow:hidden;background:var(--lx-ink)}
.v-gallery .v-shot img{width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;display:block}
@media(min-width:900px){.v-gallery .v-shot{flex:0 0 72%}}
/* boutons de navigation (desktop) */
.v-nav{position:absolute;top:50%;transform:translateY(-50%);z-index:6;
  width:52px;height:52px;border-radius:50%;border:1px solid var(--lx-rule-2);
  background:var(--lx-paper);color:var(--lx-ink);cursor:pointer;
  display:none;align-items:center;justify-content:center;font-size:1.5rem;line-height:1;
  padding:0 0 3px;box-shadow:0 8px 24px rgba(21,20,15,.18);
  transition:background .2s ease,color .2s ease,opacity .2s ease}
.v-nav:hover,.v-nav:focus-visible{background:var(--lx-ink);color:var(--lx-paper);outline:none}
.v-prev{left:.7rem}.v-next{right:.7rem}
@media(min-width:900px){.v-nav{display:flex}}
@media(prefers-reduced-motion:reduce){.v-gallery{scroll-behavior:auto}}
.v-gallery .v-shot{cursor:zoom-in}

/* 18. Lightbox : clic sur une photo -> plein écran (fond encre, flèches, compteur). */
.v-lightbox{position:fixed;inset:0;z-index:1000;background:rgba(15,14,10,.94);
  display:none;align-items:center;justify-content:center;opacity:0;transition:opacity .25s ease}
.v-lightbox.open{display:flex;opacity:1}
.v-lightbox img{max-width:92vw;max-height:86vh;object-fit:contain;box-shadow:0 24px 70px rgba(0,0,0,.55)}
.v-lb-close,.v-lb-nav{position:absolute;z-index:2;background:rgba(242,239,231,.1);
  border:1px solid rgba(242,239,231,.32);color:#F2EFE7;cursor:pointer;border-radius:50%;
  display:flex;align-items:center;justify-content:center;line-height:1;padding:0 0 3px;
  transition:background .2s ease}
.v-lb-close:hover,.v-lb-nav:hover{background:rgba(242,239,231,.24)}
.v-lb-close{top:1.2rem;right:1.2rem;width:44px;height:44px;font-size:1.5rem;padding-bottom:5px}
.v-lb-nav{top:50%;transform:translateY(-50%);width:54px;height:54px;font-size:1.7rem}
.v-lb-prev{left:1.4rem}.v-lb-next{right:1.4rem}
.v-lb-count{position:absolute;bottom:1.5rem;left:50%;transform:translateX(-50%);z-index:2;
  color:rgba(242,239,231,.8);font-family:var(--lx-mono);font-size:.68rem;letter-spacing:.22em}
@media(max-width:600px){.v-lb-nav{width:44px;height:44px;font-size:1.4rem}.v-lb-prev{left:.5rem}.v-lb-next{right:.5rem}.v-lb-close{top:.7rem;right:.7rem}}

/* 19. Cartes villa = mini-slideshow (crossfade + flèches au survol), comme l'accueil.
      /js/villa-cards.js injecte .card-slides (les photos -2/-3/-4) et les .pnav sur les
      cartes qui lient vers /villa/<slug>. La photo -1 reste la première. */
.card .card-slides{position:absolute;inset:0}
.card .card-slides img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;transition:opacity .8s ease,transform .8s cubic-bezier(.4,0,.2,1),filter .6s ease}
.card .card-slides img.on{opacity:1}
.card .pnav{position:absolute;top:50%;transform:translateY(-50%);z-index:5;width:34px;height:34px;
  border-radius:50%;background:rgba(15,14,10,.42);color:#fff;border:1px solid rgba(255,255,255,.4);
  display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:1.15rem;line-height:1;
  padding:0 0 2px;opacity:0;transition:opacity .25s ease,background .2s ease}
.card:hover .pnav,.card:focus-within .pnav{opacity:1}
.card .pnav:hover{background:rgba(15,14,10,.72)}
.pnav-prev{left:.55rem}.pnav-next{right:.55rem}
@media(hover:none){.card .pnav{opacity:.82}}