/* =========================================================================
   L&S Conciergerie — couche "motion" premium
   Chargée sur toutes les pages après la feuille globale.
   Tout ce qui masque du contenu est conditionné à html.mo (ajouté par
   motion.js) : sans JS, le site reste entièrement lisible.
   ========================================================================= */

:root {
  --ease-out-expo: cubic-bezier(.16, 1, .3, 1);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);
  --gold-glow: rgba(196, 168, 98, .35);
  --grain: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .07 0 0 0 0 .06 0 0 0 0 .18 0 0 0 .55 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

/* ---------- Transitions entre pages (Chrome / Edge / Safari 18+) ---------- */
@view-transition { navigation: auto; }
.hdr { view-transition-name: site-header; }
::view-transition-old(root) { animation: vt-out .38s var(--ease-in-out) both; }
::view-transition-new(root) { animation: vt-in .6s var(--ease-out-expo) both; }
@keyframes vt-out { to { opacity: 0; transform: translateY(-14px); filter: blur(4px); } }
@keyframes vt-in { from { opacity: 0; transform: translateY(18px); } }

/* ---------- Sélection & focus ---------- */
::selection { background: var(--gold); color: var(--navy-900); }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 3px; }

/* ---------- Grain papier sur les zones crème ---------- */
.hero-bg::after, .page-hero-bg::after, .city-hero-bg::after, .quote-band::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: var(--grain); opacity: .1; mix-blend-mode: multiply;
  -webkit-mask-image: linear-gradient(#000 60%, transparent); mask-image: linear-gradient(#000 60%, transparent);
}
.quote-band::after { -webkit-mask-image: none; mask-image: none; }
.quote-band::after { z-index: 0; }

/* ---------- Barre de progression de lecture ---------- */
.mo-progress {
  position: fixed; inset: 0 0 auto; height: 2px; z-index: 900; pointer-events: none;
  background: linear-gradient(90deg, var(--gold-700), var(--gold), #e6d3a0);
  transform-origin: 0 50%; transform: scaleX(var(--p, 0));
  box-shadow: 0 0 12px var(--gold-glow);
}

/* ---------- En-tête : se cache en descendant, revient en remontant ---------- */
html.mo .hdr { transition: transform .5s var(--ease-out-expo), background .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease); }
html.mo .hdr.is-hidden { transform: translateY(-100%); }
.brand-emblem { transition: transform .6s var(--ease-out-expo); }
.brand:hover .brand-emblem { transform: rotate(-8deg) scale(1.06); }

/* ---------- Halo doré animé dans les héros ---------- */
.mo-aurora { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0;
  -webkit-mask-image: linear-gradient(#000 55%, transparent); mask-image: linear-gradient(#000 55%, transparent); }
.mo-aurora span {
  position: absolute; border-radius: 50%; filter: blur(60px); opacity: .55;
  will-change: transform;
}
.mo-aurora span:nth-child(1) { width: 46vw; height: 46vw; max-width: 640px; max-height: 640px; right: -8vw; top: -14vw; background: radial-gradient(circle, rgba(196,168,98,.42), transparent 65%); animation: drift-a 22s ease-in-out infinite alternate; }
.mo-aurora span:nth-child(2) { width: 34vw; height: 34vw; max-width: 480px; max-height: 480px; left: -10vw; bottom: -16vw; background: radial-gradient(circle, rgba(74,70,133,.18), transparent 65%); animation: drift-b 26s ease-in-out infinite alternate; }
.mo-aurora span:nth-child(3) { width: 22vw; height: 22vw; max-width: 320px; max-height: 320px; left: 38%; top: 20%; background: radial-gradient(circle, rgba(230,211,160,.35), transparent 65%); animation: drift-c 18s ease-in-out infinite alternate; }
@keyframes drift-a { to { transform: translate(-6vw, 5vw) scale(1.12); } }
@keyframes drift-b { to { transform: translate(7vw, -4vw) scale(1.2); } }
@keyframes drift-c { to { transform: translate(-5vw, 6vw) scale(.85); } }

/* ---------- Titres : mots qui émergent d'un masque ---------- */
.mo-w { display: inline-block; overflow: hidden; vertical-align: bottom; padding: .06em .04em .12em; margin: -.06em -.04em -.12em; }
/* dernier mot + ponctuation : jamais séparés */
.mo-nw { white-space: nowrap; }
/* l'italique déborde à droite : on élargit le masque sans décaler la mise en page */
em .mo-w { padding-right: .2em; margin-right: -.2em; }
.mo-w > span { display: inline-block; }
html.mo [data-split] .mo-w > span {
  transform: translateY(105%) rotate(4deg); transform-origin: 0 100%;
  transition: transform 1.05s var(--ease-out-expo);
  transition-delay: calc(var(--i, 0) * 55ms + var(--d, 0ms));
}
html.mo [data-split].is-split-in .mo-w > span { transform: none; }
/* les éléments splittés ne font plus le fondu global du data-reveal */
html.mo [data-reveal][data-split] { opacity: 1; transform: none; transition: none; }

/* Soulignement doré qui se dessine sous les <em> des titres (multi-lignes OK) */
.display em, h2.section-title em, .city-title em {
  background: linear-gradient(90deg, var(--gold), #e6d3a0, var(--gold-700)) 0 94% / 0% .07em no-repeat;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
  transition: background-size 1.3s var(--ease-out-expo) .6s;
}
html:not(.mo) .display em, html:not(.mo) h2.section-title em, html:not(.mo) .city-title em,
.is-split-in em, .is-visible em { background-size: 100% .07em; }
.img-band h2.section-title em, .section-navy h2.section-title em { color: var(--gold); }

/* ---------- Images : rideau qui se lève ---------- */
html.mo .mo-unveil { clip-path: inset(100% 0 0 0); transition: clip-path 1.4s var(--ease-out-expo); }
html.mo .mo-unveil.mo-in { clip-path: inset(0 0 0 0); }
html.mo .arch.mo-unveil { clip-path: inset(100% 0 0 0 round 999px 999px 10px 10px); }
html.mo .arch.mo-unveil.mo-in { clip-path: inset(0 0 0 0 round 999px 999px 10px 10px); }

/* le cadre doré décalé glisse en place après l'image */
html.mo .frame::before { opacity: 0; transform: translate(-18px, 18px); transition: opacity 1s var(--ease-out-expo) .5s, transform 1.4s var(--ease-out-expo) .5s; }
html.mo .frame.mo-in::before { opacity: 1; transform: none; }

/* reflet lumineux qui balaie l'image une fois révélée */
.media { position: relative; }
.media::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 2;
  background: linear-gradient(105deg, transparent 35%, rgba(255,255,255,.28) 50%, transparent 65%);
  transform: translateX(-120%);
}
html.mo .mo-in .media::after, html.mo .media.mo-in::after { animation: sheen 1.6s var(--ease-in-out) .9s 1 both; }
@keyframes sheen { to { transform: translateX(120%); } }

/* ---------- Parallaxe ---------- */
[data-parallax] { will-change: transform; }
.img-band > img { inset: -12% 0; height: 124%; }

/* ---------- Boutons : reflet doré + aimant ---------- */
.btn { position: relative; overflow: hidden; isolation: isolate; }
.btn-gold::before, .btn-primary::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,.55) 50%, transparent 70%);
  transform: translateX(-130%); transition: transform .9s var(--ease-out-expo);
}
.btn-gold:hover::before, .btn-primary:hover::before { transform: translateX(130%); }
.btn-gold { box-shadow: 0 8px 24px -10px var(--gold-glow); }
.btn-gold:hover { box-shadow: 0 16px 36px -12px rgba(196,168,98,.65); }
.btn-ghost::before {
  content: ""; position: absolute; inset: 0; z-index: -1; background: rgba(196,168,98,.1);
  transform: scaleY(0); transform-origin: 50% 100%; transition: transform .45s var(--ease-out-expo);
}
.btn-ghost:hover::before { transform: scaleY(1); }
.btn.mo-magnet { transition: transform .35s var(--ease-out-expo), background .25s var(--ease), color .25s, border-color .25s, box-shadow .3s; }
.btn.mo-magnet > * { pointer-events: none; }

/* Pastille "Audit gratuit" du menu : pulsation discrète */
.nav-cta { animation: cta-pulse 3.2s ease-in-out 2.5s infinite; }
@keyframes cta-pulse { 0%, 70%, 100% { box-shadow: 0 0 0 0 rgba(196,168,98,0); } 35% { box-shadow: 0 0 0 7px rgba(196,168,98,.22); } }

/* ---------- Cartes : lumière qui suit la souris + inclinaison ---------- */
.card, .plan, .tier, .apt, .svc, .aside-card, .perk {
  --mx: 50%; --my: 50%;
  position: relative;
}
.card::before, .plan::before, .tier::before, .apt::after, .aside-card::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 0;
  background: radial-gradient(420px circle at var(--mx) var(--my), rgba(196,168,98,.16), transparent 45%);
  opacity: 0; transition: opacity .4s var(--ease);
}
.card:hover::before, .plan:hover::before, .tier:hover::before, .apt:hover::after, .aside-card:hover::before { opacity: 1; }
.card > *, .plan > :not(.plan-flag), .tier > * { position: relative; z-index: 1; }
.plan-flag { z-index: 2; }

/* Services : l'index glisse et la ligne se colore */
.svc { transition: background .5s var(--ease), opacity .7s var(--ease), transform .7s var(--ease); }
.svc-index { transition: transform .6s var(--ease-out-expo), color .4s; }
.svc:hover .svc-index { transform: translateX(10px); color: var(--gold-700); }
.svc:hover { background: linear-gradient(90deg, rgba(196,168,98,.07), transparent 70%); }
html.mo .mo-tilt { transform-style: preserve-3d; }
html.mo .mo-tilt.is-tilting { transition: transform .12s linear, box-shadow .3s var(--ease), border-color .3s var(--ease) !important; }

.card .num { transition: background .5s var(--ease-out-expo), color .5s, transform .7s var(--ease-out-expo); }
.card:hover .num { background: var(--gold); color: var(--navy-900); transform: rotate(360deg); }

/* Formule annuelle : bordure dorée animée */
@property --ang { syntax: "<angle>"; initial-value: 0deg; inherits: false; }
.plan-feat { border-color: transparent !important; background:
  linear-gradient(var(--white), var(--white)) padding-box,
  conic-gradient(from var(--ang), rgba(196,168,98,.25), var(--gold), #f1e3b8, var(--gold-700), rgba(196,168,98,.25)) border-box !important;
  border: 1.5px solid transparent !important;
  animation: spin-border 6s linear infinite;
}
@keyframes spin-border { to { --ang: 360deg; } }

/* ---------- Bandeau chiffres ---------- */
.stats-band { position: relative; overflow: hidden; }
.stats-band::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(100deg, transparent 20%, rgba(196,168,98,.13) 50%, transparent 80%);
  transform: translateX(-100%); animation: band-sweep 7s ease-in-out 1.5s infinite;
}
@keyframes band-sweep { 0% { transform: translateX(-100%); } 45%, 100% { transform: translateX(100%); } }
.stat-n { font-variant-numeric: tabular-nums; }
.stat { position: relative; }
.stat::after {
  content: ""; position: absolute; left: 50%; bottom: 26px; width: 28px; height: 1px; background: var(--gold);
  transform: translateX(-50%) scaleX(0); transition: transform 1s var(--ease-out-expo) .4s;
}
.stat.is-visible::after { transform: translateX(-50%) scaleX(1); }

/* ---------- Défilant des communes ---------- */
.mo-marquee {
  background: var(--cream-alt); border-bottom: 1px solid var(--line-soft); overflow: hidden;
  padding-block: 22px; position: relative;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.mo-marquee-track { display: flex; width: max-content; animation: marquee 48s linear infinite; }
.mo-marquee:hover .mo-marquee-track { animation-play-state: paused; }
.mo-marquee ul { display: flex; align-items: center; flex-shrink: 0; }
.mo-marquee li { display: flex; align-items: center; }
.mo-marquee a {
  font-family: var(--font-display); font-size: clamp(1.05rem, 1.8vw, 1.4rem); color: var(--navy-700);
  letter-spacing: 1.5px; padding-inline: 26px; white-space: nowrap; transition: color .25s;
}
.mo-marquee a:hover { color: var(--gold-700); }
.mo-marquee li::after { content: ""; width: 7px; height: 7px; transform: rotate(45deg); background: var(--gold); flex-shrink: 0; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* ---------- Citation : les mots s'allument au défilement ---------- */
html.mo blockquote.mo-ink .mo-ink-w { color: rgba(30,27,75,.18); transition: color .35s var(--ease); }
html.mo blockquote.mo-ink .mo-ink-w.on { color: var(--navy-800); }
html.mo blockquote.mo-ink { opacity: 1; transform: none; }
.quote-emblem { transition: none; }

/* ---------- Étapes de la méthode ---------- */
.step-n { position: relative; }
.step-n::after {
  content: ""; position: absolute; inset: -6px; border-radius: 50%; border: 1px solid var(--gold);
  opacity: 0; transform: scale(.6);
}
.step.is-visible .step-n::after { animation: ring 1.4s var(--ease-out-expo) .3s both; }
@keyframes ring { 0% { opacity: .9; transform: scale(.6); } 100% { opacity: 0; transform: scale(1.5); } }
.step { transition: opacity .7s var(--ease), transform .7s var(--ease); }
.step:hover .step-n { transform: scale(1.08); }
.step-n { transition: transform .4s var(--ease-out-expo); }

/* ---------- Listes à puces dorées ---------- */
.promise-list li { transition: padding-left .4s var(--ease-out-expo), color .3s, opacity .7s var(--ease), transform .7s var(--ease); }
.promise-list li:hover { padding-left: 52px; color: var(--navy-700); }
.promise-list li::before { transition: transform .5s var(--ease-out-expo); }
.promise-list li:hover::before { transform: scale(1.25); }

/* ---------- Carte flottante du héros ---------- */
.float-card { overflow: hidden; }
.float-card::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(110deg, transparent 35%, rgba(196,168,98,.22) 50%, transparent 65%);
  transform: translateX(-120%); animation: sheen-loop 5s ease-in-out 2s infinite;
}
@keyframes sheen-loop { 0% { transform: translateX(-120%); } 40%, 100% { transform: translateX(120%); } }
.float-ico { position: relative; }
.float-ico::before { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 1px solid var(--gold); animation: ping 2.6s var(--ease-out-expo) infinite; }
@keyframes ping { 0% { transform: scale(1); opacity: .8; } 80%, 100% { transform: scale(1.7); opacity: 0; } }
html.mo .float-card { opacity: 0; translate: -30px 0; transition: opacity .9s var(--ease-out-expo) 1.1s, translate 1.1s var(--ease-out-expo) 1.1s; }
html.mo .hero-visual.is-visible .float-card { opacity: 1; translate: 0 0; }

/* ---------- Puces (chips) ---------- */
.chip { transition: border-color .3s, background .3s, transform .4s var(--ease-out-expo); }
.chip:hover { border-color: rgba(196,168,98,.6); background: #fff; transform: translateY(-2px); }
.chip .dot { animation: dot 2.4s ease-in-out infinite; }
.chip:nth-child(2) .dot { animation-delay: .4s; }
.chip:nth-child(3) .dot { animation-delay: .8s; }
@keyframes dot { 50% { box-shadow: 0 0 0 4px rgba(196,168,98,.22); } }

/* ---------- FAQ : ouverture fluide ---------- */
:root { interpolate-size: allow-keywords; }
.faq::details-content { block-size: 0; overflow: hidden; transition: block-size .5s var(--ease-out-expo), content-visibility .5s allow-discrete; }
.faq[open]::details-content { block-size: auto; }
.faq { transition: border-color .3s, box-shadow .4s var(--ease), opacity .7s var(--ease), transform .7s var(--ease); }
.faq:hover { border-color: rgba(196,168,98,.55); }
.faq[open] { box-shadow: var(--shadow-sm); border-color: rgba(196,168,98,.55); }
.faq-icon::before, .faq-icon::after { transition: transform .45s var(--ease-out-expo) !important; }
.faq[open] .faq-icon { transform: rotate(180deg); }
.faq-icon { transition: transform .45s var(--ease-out-expo); }

/* ---------- Liens éditoriaux ---------- */
.art a:not(.btn), .city-p a, .faq-a a {
  background: linear-gradient(var(--gold), var(--gold)) 0 100% / 0 1px no-repeat;
  transition: background-size .45s var(--ease-out-expo), color .25s;
}
.art a:not(.btn):hover, .city-p a:hover, .faq-a a:hover { background-size: 100% 1px; color: var(--gold-700); }

/* ---------- Footer ---------- */
.ft { position: relative; }
.ft::before {
  content: ""; position: absolute; inset: 0 0 auto; height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  transform: scaleX(var(--ft, 0)); transition: transform 1.6s var(--ease-out-expo);
}
.ft.mo-in { --ft: 1; }
.ft-link { position: relative; transition: color .2s, transform .35s var(--ease-out-expo); }
.ft-link:hover { transform: translateX(4px); }
.ft-logo { transition: transform .8s var(--ease-out-expo), filter .6s; }
.ft-logo:hover { transform: scale(1.04); filter: drop-shadow(0 0 18px rgba(196,168,98,.35)); }

/* ---------- Bouton retour en haut avec anneau de progression ---------- */
.mo-top {
  position: fixed; right: 22px; bottom: 22px; z-index: 850; width: 52px; height: 52px; border-radius: 50%;
  border: 0; background: var(--navy-800); color: var(--gold); display: grid; place-items: center;
  box-shadow: var(--shadow-md); opacity: 0; transform: translateY(16px) scale(.9); pointer-events: none;
  transition: opacity .4s var(--ease-out-expo), transform .5s var(--ease-out-expo), background .25s;
}
.mo-top.show { opacity: 1; transform: none; pointer-events: auto; }
.mo-top:hover { background: var(--navy-700); }
.mo-top svg.ring { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.mo-top svg.ring circle { fill: none; stroke: var(--gold); stroke-width: 2; stroke-dasharray: 150.8; stroke-dashoffset: calc(150.8 * (1 - var(--p, 0))); stroke-linecap: round; }
.mo-top svg.arr { width: 18px; height: 18px; transition: transform .35s var(--ease-out-expo); }
.mo-top:hover svg.arr { transform: translateY(-3px); }

/* ---------- Lightbox (pages appartements) ---------- */
.lightbox[open] { animation: lb-in .45s var(--ease-out-expo) both; }
.lightbox[open] .lb-img { animation: lb-img .7s var(--ease-out-expo) both; }
@keyframes lb-in { from { opacity: 0; } }
@keyframes lb-img { from { opacity: 0; transform: scale(.94); } }

/* ---------- Écrans tactiles : pas d'effets de survol ---------- */
@media (hover: none) {
  .card::before, .plan::before, .tier::before, .apt::after, .aside-card::before { display: none; }
}
@media (max-width: 640px) {
  .mo-top { right: 14px; bottom: 14px; width: 46px; height: 46px; }
  .ft { padding-bottom: 64px; }
  .mo-marquee { padding-block: 16px; }
  .mo-marquee a { padding-inline: 18px; }
}

/* ---------- Accessibilité : mouvement réduit ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; transition-delay: 0s !important; }
  @view-transition { navigation: none; }
  html.mo [data-split] .mo-w > span, html.mo .mo-unveil { transform: none; clip-path: none; }
  html.mo .float-card { opacity: 1; translate: 0 0; }
  .mo-marquee-track { animation: none; }
  .mo-aurora { display: none; }
}