/* =========================================================================
   Cocooning Spa – Barre de navigation signature (toutes les pages).
   Autonome : ne dépend pas de la feuille de l'accueil v2.
   ========================================================================= */
.csp-nav {
	--n-navy: #0a1628;
	--n-ink: #f4efe2;
	--n-text: #cbd2de;
	--n-gold: #d4b85c;
	--n-gold-l: #f0d98a;
	--n-serif: 'Cormorant Garamond', Georgia, serif;
	--n-sans: Montserrat, 'Inter', system-ui, sans-serif;
	--n-ease: cubic-bezier(.2, .7, .2, 1);
	--n-h: 5.6rem;
	--n-top: 0px;
	position: fixed; left: 0; right: 0; top: var(--n-top); z-index: 10050;
	font-family: var(--n-sans);
	pointer-events: none;
}
.csp-nav * { box-sizing: border-box; }
.csp-nav a, .csp-nav button { pointer-events: auto; }

/* ---- Barre ---- */
.csp-nav__bar {
	position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 2rem;
	height: var(--n-h); padding: 0 clamp(1.25rem, 3vw, 2.75rem);
	pointer-events: auto;
	transition: transform .55s var(--n-ease), height .5s var(--n-ease), background .5s ease, border-color .5s ease, box-shadow .5s ease;
	background: linear-gradient(180deg, rgba(5, 11, 22, .55), rgba(5, 11, 22, 0));
	border-bottom: 1px solid transparent;
}
.csp-nav.is-scrolled .csp-nav__bar {
	--n-h: 4.4rem;
	background: rgba(9, 19, 38, .78);
	-webkit-backdrop-filter: blur(18px) saturate(1.2); backdrop-filter: blur(18px) saturate(1.2);
	border-bottom-color: rgba(212, 184, 92, .14);
	box-shadow: 0 14px 40px rgba(0, 0, 0, .28);
}
.csp-nav__side { display: flex; align-items: center; gap: clamp(1.2rem, 2.2vw, 2.4rem); min-width: 0; }
.csp-nav__side--l { justify-content: space-between; }
.csp-nav__side--r { justify-content: space-between; }

/* Liens */
.csp-nav__links { display: flex; align-items: center; gap: clamp(1.3rem, 2.3vw, 2.6rem); margin: 0; padding: 0; list-style: none; }
.csp-nav__links li { margin: 0; padding: 0; }
.csp-nav__links a {
	position: relative; display: inline-block; padding: .7rem 0;
	font: 500 .7rem/1 var(--n-sans); letter-spacing: .22em; text-transform: uppercase; white-space: nowrap;
	color: rgba(244, 239, 226, .86) !important; text-decoration: none !important; transition: color .35s;
}
.csp-nav__links a::after {
	content: ""; position: absolute; left: 50%; bottom: .15rem; width: 100%; height: 1px; transform: translateX(-50%) scaleX(0);
	background: linear-gradient(90deg, rgba(212, 184, 92, 0), var(--n-gold), rgba(212, 184, 92, 0)); transition: transform .5s var(--n-ease);
}
.csp-nav__links a::before {
	content: ""; position: absolute; left: 50%; bottom: -.32rem; width: 4px; height: 4px; margin-left: -2px; transform: rotate(45deg) scale(0);
	background: var(--n-gold); box-shadow: 0 0 8px rgba(212, 184, 92, .8); transition: transform .45s var(--n-ease);
}
.csp-nav__links a:hover, .csp-nav__links a:focus-visible { color: var(--n-gold-l) !important; }
.csp-nav__links a:hover::after, .csp-nav__links a:focus-visible::after { transform: translateX(-50%) scaleX(1); }
.csp-nav__links a.is-current { color: var(--n-gold-l) !important; }
.csp-nav__links a.is-current::before { transform: rotate(45deg) scale(1); }

/* Lotus central */
.csp-nav__mark { display: block; line-height: 0; transition: opacity .6s ease, transform .6s var(--n-ease); }
.csp-nav__lotus { display: block; width: auto; height: 3.1rem; filter: drop-shadow(0 2px 10px rgba(0, 0, 0, .35)); transition: height .5s var(--n-ease); }
.csp-nav.is-scrolled .csp-nav__lotus { height: 2.45rem; }
.csp-nav__mark:hover .csp-nav__lotus { filter: drop-shadow(0 0 14px rgba(240, 217, 138, .45)); }
/* Accueil : le grand logo du haut de page suffit ; le lotus de la barre apparaît une fois ce logo dépassé. */
.csp-nav--home.is-top .csp-nav__mark { opacity: 0; transform: translateY(-6px) scale(.9); pointer-events: none; }

/* Carte cadeau : cadre doré fin, en miroir du bouton Réserver */
.csp-nav__gift {
	display: inline-flex; align-items: center; gap: .65rem; height: 2.85rem; padding: 0 1.35rem;
	font: 600 .7rem/1 var(--n-sans); letter-spacing: .2em; text-transform: uppercase; white-space: nowrap;
	color: var(--n-gold-l) !important; text-decoration: none !important;
	border: 1px solid rgba(240, 217, 138, .5); background: rgba(10, 22, 40, .25);
	transition: color .3s, background .35s, border-color .35s;
}
.csp-nav__gift svg { flex-shrink: 0; }
.csp-nav__gift:hover { color: var(--n-navy) !important; background: var(--n-gold-l); border-color: var(--n-gold-l); }
.csp-nav__gift--m { display: none; }

/* Réserver */
.csp-nav__cta {
	position: relative; display: inline-flex; align-items: center; justify-content: center; height: 2.85rem; padding: 0 1.8rem;
	font: 600 .7rem/1 var(--n-sans); letter-spacing: .22em; text-transform: uppercase; white-space: nowrap;
	color: var(--n-navy) !important; text-decoration: none !important;
	background: linear-gradient(135deg, #e2c46c, #c9a84c 55%, #b8963f); overflow: hidden; transition: transform .3s, box-shadow .3s;
}
.csp-nav__cta::before { content: ""; position: absolute; inset: 3px; border: 1px solid rgba(10, 22, 40, .28); pointer-events: none; }
.csp-nav__cta::after {
	content: ""; position: absolute; top: 0; bottom: 0; width: 45%; left: -60%; transform: skewX(-20deg);
	background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 250, 230, .65), rgba(255, 255, 255, 0));
	animation: csp-nav-sheen 6.5s ease-in-out 2.5s infinite;
}
.csp-nav__cta span { position: relative; z-index: 1; }
.csp-nav__cta:hover { transform: translateY(-1px); box-shadow: 0 10px 26px rgba(212, 184, 92, .28); }
@keyframes csp-nav-sheen { 0%, 78% { left: -60%; } 100% { left: 130%; } }

/* Fil d'or de lecture, intégré au bas de la barre */
.csp-nav__progress {
	position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; transform-origin: 0 50%; transform: scaleX(var(--p, 0));
	background: linear-gradient(90deg, rgba(212, 184, 92, .15), var(--n-gold) 70%, var(--n-gold-l)); opacity: 0; transition: opacity .4s;
}
.csp-nav.is-scrolled .csp-nav__progress { opacity: 1; }

/* Bouton Menu (mobile et écrans moyens) */
.csp-nav__menu {
	display: none; align-items: center; gap: .75rem; padding: .6rem 0; margin: 0; border: 0; background: none; cursor: pointer;
	font: 500 .68rem/1 var(--n-sans); letter-spacing: .26em; text-transform: uppercase; color: var(--n-ink);
}
.csp-nav__lines { position: relative; display: block; width: 1.65rem; height: .7rem; }
.csp-nav__lines i { position: absolute; left: 0; height: 1px; background: var(--n-gold-l); transition: width .4s var(--n-ease); }
.csp-nav__lines i:first-child { top: 0; width: 100%; }
.csp-nav__lines i:last-child { bottom: 0; width: 62%; }
.csp-nav__menu:hover .csp-nav__lines i:last-child { width: 100%; }

/* Écrans moyens : rubriques dans le menu, la barre garde Offrir · lotus · Réserver */
@media (max-width: 1180px) {
	.csp-nav__links { display: none; }
	.csp-nav__menu { display: inline-flex; }
	.csp-nav__side--l { justify-content: flex-start; gap: 2rem; }
	.csp-nav__side--r { justify-content: flex-end; }
}
/* Mobile : Menu · lotus · cadeau (Réserver est dans la capsule du bas de l'écran) */
@media (max-width: 768px) {
	.csp-nav { --n-h: 4.4rem; }
	.csp-nav.is-scrolled .csp-nav__bar { --n-h: 3.9rem; }
	.csp-nav__bar { gap: 1rem; padding: 0 1.1rem; }
	.csp-nav__side--l .csp-nav__gift, .csp-nav__cta { display: none; }
	.csp-nav__gift--m { display: inline-flex; height: 2.5rem; gap: .5rem; padding: 0 .75rem; font-size: .54rem; line-height: 1.15; letter-spacing: .16em; text-align: left; white-space: normal; }
	.csp-nav__gift--m svg { width: 16px; height: 16px; }
	.csp-nav__menu-t { font-size: .64rem; }
	.csp-nav__lotus { height: 2.5rem; }
	.csp-nav.is-scrolled .csp-nav__lotus { height: 2.15rem; }
}

/* ---- Menu plein écran ---- */
.csp-nav__sheet {
	position: fixed; inset: 0; z-index: 2; display: block; overflow: hidden auto; pointer-events: auto;
	background: radial-gradient(90vmax 70vmax at 85% 110%, rgba(30, 71, 168, .28), rgba(10, 22, 40, 0)), linear-gradient(180deg, #0b1830, #060e1c);
	clip-path: circle(0 at var(--ox, 2.5rem) var(--oy, 2.2rem)); transition: clip-path .85s cubic-bezier(.7, 0, .2, 1), visibility 0s .85s; visibility: hidden;
	overscroll-behavior: contain;
}
.csp-nav__sheet[hidden] { display: none; }
.csp-nav.is-open .csp-nav__sheet { clip-path: circle(150vmax at var(--ox, 2.5rem) var(--oy, 2.2rem)); visibility: visible; transition: clip-path .9s cubic-bezier(.7, 0, .2, 1); }
.csp-nav__sheet::before { content: ""; position: absolute; inset: 0; opacity: .05; pointer-events: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.csp-nav__watermark {
	position: fixed; right: -18vmin; bottom: -12vmin; width: min(118vmin, 980px); height: auto; pointer-events: none;
	fill: none; stroke: rgba(240, 217, 138, .16); stroke-width: 1px; vector-effect: non-scaling-stroke;
	opacity: 0; transform: rotate(-8deg) scale(.92); transition: opacity 1.2s ease .35s, transform 1.8s var(--n-ease) .25s;
}
.csp-nav.is-open .csp-nav__watermark { opacity: 1; transform: rotate(-4deg) scale(1); }
.csp-nav__sheet-in { position: relative; min-height: 100%; max-width: 46rem; margin: 0 auto; padding: 1rem clamp(1.4rem, 5vw, 3rem) calc(1.2rem + env(safe-area-inset-bottom)); display: flex; flex-direction: column; }
.csp-nav__sheet-top { display: flex; align-items: center; justify-content: space-between; min-height: 3rem; margin-bottom: clamp(.6rem, 3vh, 2.6rem); }
.csp-nav__eyebrow { display: inline-flex; align-items: center; gap: .8rem; font: 600 .62rem/1 var(--n-sans); letter-spacing: .3em; text-transform: uppercase; color: var(--n-gold); }
.csp-nav__eyebrow::before { content: ""; width: 1.8rem; height: 1px; background: var(--n-gold); }
.csp-nav__close { position: relative; width: 2.9rem; height: 2.9rem; margin: 0 -.4rem 0 0; padding: 0; border: 1px solid rgba(240, 217, 138, .35); border-radius: 50%; background: none; cursor: pointer; transition: transform .5s var(--n-ease), border-color .3s; }
.csp-nav__close i { position: absolute; left: 50%; top: 50%; width: 1.1rem; height: 1px; margin-left: -.55rem; background: var(--n-gold-l); transform: rotate(45deg); }
.csp-nav__close i + i { transform: rotate(-45deg); }
.csp-nav__close:hover { transform: rotate(90deg); border-color: var(--n-gold); }

.csp-nav__list { margin: 0; padding: 0; list-style: none; counter-reset: none; }
.csp-nav__list li { margin: 0; padding: 0; border-bottom: 1px solid rgba(212, 184, 92, .1); opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .7s var(--n-ease); }
.csp-nav.is-open .csp-nav__list li { opacity: 1; transform: none; transition-delay: calc(.32s + var(--k) * .055s); }
.csp-nav__list a { display: grid; grid-template-columns: 2.2rem 1fr; grid-template-areas: "n l" ". h"; align-items: baseline; padding: clamp(.4rem, 1.15vh, .8rem) 0; text-decoration: none !important; }
.csp-nav__n { grid-area: n; font: italic 500 .9rem/1 var(--n-serif); color: var(--n-gold); }
.csp-nav__l { grid-area: l; font: 400 min(clamp(1.45rem, 6vw, 2.4rem), 3.4vh)/1.05 var(--n-serif); color: var(--n-ink); transition: color .3s, transform .5s var(--n-ease); }
.csp-nav__h { grid-area: h; margin-top: .2rem; font: 400 .7rem/1.25 'Inter', system-ui, sans-serif; letter-spacing: .04em; color: rgba(203, 210, 222, .62); }
.csp-nav__list a:hover .csp-nav__l, .csp-nav__list a:focus-visible .csp-nav__l { color: var(--n-gold-l); transform: translateX(.35rem); }
.csp-nav__list a.is-current .csp-nav__l { color: var(--n-gold-l); font-style: italic; }

.csp-nav__actions { display: grid; grid-template-columns: 1fr 1fr; gap: .7rem; margin-top: clamp(1rem, 2.6vh, 2.4rem); opacity: 0; transform: translateY(14px); transition: opacity .6s ease, transform .7s var(--n-ease); }
.csp-nav.is-open .csp-nav__actions { opacity: 1; transform: none; transition-delay: .8s; }
.csp-nav__btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; min-height: 3.1rem; padding: 0 .8rem; text-align: center; font: 600 .64rem/1.25 var(--n-sans); letter-spacing: .14em; text-transform: uppercase; text-decoration: none !important; color: var(--n-navy) !important; background: linear-gradient(135deg, #e2c46c, #c9a84c 55%, #b8963f); }
.csp-nav__btn--ghost { background: transparent; border: 1px solid rgba(240, 217, 138, .45); color: var(--n-gold-l) !important; }
.csp-nav__quick { display: flex; flex-wrap: wrap; gap: .2rem 1.6rem; margin-top: .9rem; opacity: 0; transition: opacity .6s ease; }
.csp-nav.is-open .csp-nav__quick { opacity: 1; transition-delay: .9s; }
.csp-nav__quick a { display: inline-flex; align-items: center; gap: .55rem; padding: .5rem 0; font: 400 .85rem/1 'Inter', system-ui, sans-serif; color: var(--n-text) !important; text-decoration: none !important; }
.csp-nav__quick a:hover { color: var(--n-gold-l) !important; }
.csp-nav__quick svg { color: var(--n-gold); }
.csp-nav__private { align-self: flex-start; display: inline-flex; align-items: center; gap: .45rem; margin-top: auto; padding-top: 1rem; font: 500 .6rem/1 var(--n-sans); letter-spacing: .24em; text-transform: uppercase; color: rgba(203, 210, 222, .38) !important; text-decoration: none !important; opacity: 0; transition: opacity .6s ease, color .3s; }
.csp-nav.is-open .csp-nav__private { opacity: 1; transition-delay: 1s; }
.csp-nav__private:hover { color: var(--n-gold-l) !important; }
@media (max-height: 700px) { .csp-nav__h { display: none; } }
@media (min-width: 769px) { .csp-nav__sheet-in { padding-top: 1.8rem; } }

/* Quand le menu est ouvert : barre au-dessus du voile, défilement de la page bloqué */
html.csp-nav-lock, html.csp-nav-lock body { overflow: hidden !important; }
.csp-nav.is-open .csp-nav__bar { visibility: hidden; }
html.csp-nav-lock .csp-v2-dock { opacity: 0 !important; pointer-events: none; }

/* L'ancienne barre du thème et l'ancien fil de lecture n'ont plus lieu d'être */
body.csp-nav-on .csp-v2-progress { display: none !important; }

@media (prefers-reduced-motion: reduce) {
	.csp-nav, .csp-nav *, .csp-nav__sheet { transition-duration: .01s !important; transition-delay: 0s !important; animation: none !important; }
}

/* Portables 13–15" (1181–1420 px) : la barre respire, aucune rubrique ne touche le lotus */
@media (min-width: 1181px) and (max-width: 1420px) {
	.csp-nav__bar { gap: 1.4rem; padding: 0 1.6rem; }
	.csp-nav__side { gap: 1.1rem; }
	.csp-nav__links { gap: 1.15rem; }
	.csp-nav__links a { letter-spacing: .14em; font-size: .66rem; }
	.csp-nav__gift { padding: 0 .95rem; letter-spacing: .14em; font-size: .64rem; }
	.csp-nav__cta { padding: 0 1.3rem; letter-spacing: .16em; }
}