/* ==========================================================================
   Hôtel des Princes — Chambéry
   Système visuel : monographie éditoriale. Une seule graisse (400), des
   neutres chauds, aucun dégradé, aucune ombre, aucun arrondi.
   ========================================================================== */

@font-face {
  font-family: "Inter";
  src: url("../fonts/InterVariable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --ink: #0d0e13;
  --white: #ffffff;
  --canvas: #e4e0db;
  --steel: #6e6e71;
  --footer: #070707;
  --sand: #e0ccbb;
  --linen: #e6d7ca;

  --font: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --serif: "Times New Roman", Times, serif;

  --pad: clamp(20px, 8.333vw, 120px);
  --gap: clamp(104px, 13.9vw, 200px);
  --fs-display: clamp(64px, 16.5vw, 250px);
  --fs-hlg: clamp(50px, 10vw, 144px);
  --fs-statement: clamp(26px, 3.35vw, 48px);
  --fs-sub: 24px;
  --fs-body: 16px;
  --fs-sm: 14px;

  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-io: cubic-bezier(0.76, 0, 0.24, 1);

  --fg: var(--ink);
  --bg: var(--canvas);
  --line: var(--sand);
  --line-action: var(--linen);
  --muted: var(--steel);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }

body {
  margin: 0;
  background: var(--canvas);
  color: var(--ink);
  font-family: var(--font);
  font-weight: 400;
  font-size: var(--fs-body);
  line-height: 1.5;
  letter-spacing: 0.006em;
  font-feature-settings: "ss01" on, "tnum" on;
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
h1, h2, h3, h4, p, ul, ol, figure, blockquote, dl, dd { margin: 0; padding: 0; }
h1, h2, h3, h4, strong, b, th { font-weight: 400; }
ul, ol { list-style: none; }
a { color: inherit; text-decoration: none; }
img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
button, input, select, textarea { font: inherit; color: inherit; letter-spacing: inherit; border-radius: 0; }
button { background: none; border: 0; padding: 0; cursor: pointer; }
address { font-style: normal; }
::selection { background: var(--ink); color: var(--canvas); }
:focus-visible { outline: 1px solid currentColor; outline-offset: 4px; }

.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: fixed; left: 12px; top: -80px; z-index: 300; background: var(--white); color: var(--ink); padding: 12px 20px; border: 1px solid var(--ink); }
.skip:focus { top: 12px; }

/* --------------------------------------------------------------------------
   Typographie
   -------------------------------------------------------------------------- */
.t-display { font-size: var(--fs-display); line-height: 0.76; letter-spacing: -0.046em; }
.t-hlg { font-size: var(--fs-hlg); line-height: 0.82; letter-spacing: -0.04em; }
.t-statement { font-size: var(--fs-statement); line-height: 1.12; letter-spacing: -0.03em; }
.t-sub { font-size: var(--fs-sub); line-height: 1.33; letter-spacing: -0.035em; }
.t-body { font-size: var(--fs-body); line-height: 1.5; letter-spacing: 0.006em; }
.t-sm { font-size: var(--fs-sm); line-height: 1.88; letter-spacing: 0.007em; }
.t-serif { font-family: var(--serif); font-size: 16px; line-height: 2; letter-spacing: 0; }
.muted { color: var(--muted); }

.label { display: flex; gap: 15px; align-items: baseline; font-size: var(--fs-sm); line-height: 1.88; letter-spacing: 0.007em; color: var(--muted); }
.label i { font-style: normal; color: var(--fg); }

.prose { max-width: 520px; }
.prose > * + * { margin-top: 22px; }
.prose p { font-size: var(--fs-body); line-height: 1.5; }
.prose--sm p, .prose--sm li { font-size: var(--fs-sm); line-height: 1.88; letter-spacing: 0.007em; }

/* SplitText : les masques ne doivent pas rogner les lettres à 0.76 d’interligne */
.line-mask, .char-mask, .word-mask { padding: 0.14em 0.08em 0.2em; margin: -0.14em -0.08em -0.2em; }
.t-statement .line-mask, .t-sub .line-mask, .prose .line-mask { padding-block: 0.06em 0.12em; margin-block: -0.06em -0.12em; }

/* --------------------------------------------------------------------------
   Liens et actions — le lien encadré est la seule forme d’action
   -------------------------------------------------------------------------- */
.btn {
  position: relative; display: inline-flex; align-items: center; gap: 13px;
  padding: 13px 26px; border: 1px solid var(--line-action);
  font-size: var(--fs-body); line-height: 1.5; color: var(--fg); background: transparent;
  white-space: nowrap; cursor: pointer; transition: border-color 0.5s var(--ease);
}
.btn:hover, .btn:focus-visible { border-color: var(--fg); }
.btn--sm { padding: 9px 20px; font-size: var(--fs-sm); }
.btn--wide { width: 100%; justify-content: space-between; padding: 18px 26px; }
.roll { position: relative; display: inline-block; overflow: hidden; vertical-align: bottom; }
.roll > span { display: block; transition: transform 0.6s var(--ease); }
.roll > span:last-child { position: absolute; left: 0; top: 0; transform: translateY(110%); }
a:hover > .roll > span:first-child, button:hover > .roll > span:first-child, .is-hover > .roll > span:first-child { transform: translateY(-110%); }
a:hover > .roll > span:last-child, button:hover > .roll > span:last-child, .is-hover > .roll > span:last-child { transform: translateY(0); }
.arrow { width: 11px; height: 11px; flex: none; transition: transform 0.6s var(--ease); }
a:hover > .arrow, button:hover > .arrow { transform: translate(3px, -3px); }

.lnk { position: relative; display: inline-block; }
.lnk::after { content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform 0.6s var(--ease); }
.lnk:hover::after, .lnk[aria-current="page"]::after { transform: scaleX(1); transform-origin: left; }
.lnk--on::after { transform: scaleX(1); background: var(--line-action); }
.lnk--on:hover::after { background: currentColor; }

/* --------------------------------------------------------------------------
   Rideau de chargement / transitions de page
   -------------------------------------------------------------------------- */
.curtain { position: fixed; inset: 0; z-index: 200; background: var(--footer); color: var(--white); display: none; pointer-events: none; }
.js .curtain { display: block; }
.curtain__in { position: absolute; inset: 0; padding: clamp(20px, 3vw, 40px) var(--pad); display: flex; flex-direction: column; justify-content: space-between; }
.curtain__top { display: flex; justify-content: space-between; font-size: var(--fs-sm); line-height: 1.88; }
.curtain__logo { position: absolute; left: 50%; top: 50%; width: clamp(240px, 38vw, 560px); transform: translate(-50%, -50%); overflow: hidden; }
.curtain__logo img { display: block; width: 100%; height: auto; }
.curtain__count { font-size: var(--fs-hlg); line-height: 0.82; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; }
.curtain__row { display: flex; justify-content: space-between; align-items: flex-end; gap: 30px; font-size: var(--fs-sm); line-height: 1.88; }
.js-ready .curtain { will-change: transform; }

/* États initiaux gérés par JS — sans JS tout reste visible */
.js [data-split], .js [data-fade], .js [data-reveal] { visibility: hidden; }
.no-anim [data-split], .no-anim [data-fade], .no-anim [data-reveal] { visibility: visible !important; }
.no-anim .curtain { display: none !important; }

/* --------------------------------------------------------------------------
   Curseur
   -------------------------------------------------------------------------- */
.cursor { position: fixed; left: 0; top: 0; z-index: 150; pointer-events: none; display: none; }
.cursor__dot { position: absolute; left: -48px; top: -48px; width: 96px; height: 96px; background: var(--white); color: var(--ink); display: grid; place-items: center; font-size: var(--fs-sm); transform: scale(0.1); transition: transform 0.55s var(--ease), background-color 0.3s; mix-blend-mode: difference; }
.cursor__dot span { opacity: 0; transition: opacity 0.25s; }
.cursor.is-label .cursor__dot { transform: scale(1); mix-blend-mode: normal; }
.cursor.is-label .cursor__dot span { opacity: 1; transition-delay: 0.12s; }
.cursor.is-link .cursor__dot { transform: scale(0.34); }
.cursor.is-hidden .cursor__dot { transform: scale(0); }
@media (hover: hover) and (pointer: fine) { .js .cursor { display: block; } }

/* --------------------------------------------------------------------------
   En-tête
   -------------------------------------------------------------------------- */
.hdr { position: fixed; top: 0; left: 0; right: 0; z-index: 90; display: flex; align-items: center; justify-content: space-between; gap: 30px; padding: clamp(16px, 2.1vw, 30px) var(--pad); color: var(--ink); --line-action: #c8b5a3; transition: transform 0.7s var(--ease), background-color 0.5s var(--ease), color 0.5s var(--ease); }
.hdr--over { color: var(--white); --line-action: rgba(255, 255, 255, 0.45); --fg: var(--white); }
.hdr--solid { background: var(--white); color: var(--ink); --line-action: #dbc8b8; --fg: var(--ink); }
.hdr--hidden { transform: translateY(-101%); }
.js:not(.js-in):not(.no-anim) .hdr { transform: translateY(-101%); }
/* Logo de l’en-tête : encre sur fond clair, blanc sur une photo (deux copies teintées, en fondu). Dans le menu, sur noir : or. */
.hdr__logo { position: relative; display: block; flex: none; }
.hdr__logo img { display: block; height: clamp(18px, 1.7vw, 26px); width: auto; transition: opacity 0.5s var(--ease); }
.hdr__logo-d { filter: brightness(0); }
.hdr__logo-w { position: absolute; left: 0; top: 0; filter: brightness(0) invert(1); opacity: 0; }
.hdr--over .hdr__logo-w { opacity: 1; }
.hdr--over .hdr__logo-d { opacity: 0; }
.hdr__nav { display: flex; gap: clamp(18px, 2.2vw, 34px); font-size: var(--fs-sm); line-height: 1.88; margin-left: auto; }
.hdr__actions { display: flex; align-items: center; gap: clamp(14px, 1.6vw, 24px); }
.hdr__menu { display: inline-flex; align-items: center; gap: 12px; font-size: var(--fs-sm); line-height: 1.88; padding: 6px 0; }
.hdr__menu i { position: relative; width: 26px; height: 9px; display: block; }
.hdr__menu i::before, .hdr__menu i::after { content: ""; position: absolute; left: 0; right: 0; height: 1px; background: currentColor; transition: transform 0.6s var(--ease); }
.hdr__menu i::before { top: 0; } .hdr__menu i::after { bottom: 0; }
.hdr__menu:hover i::before { transform: translateX(4px); } .hdr__menu:hover i::after { transform: translateX(-4px); }
@media (max-width: 1099px) { .hdr__nav { display: none; } }
@media (max-width: 480px) { .hdr__menu span { display: none; } }

/* --------------------------------------------------------------------------
   Menu plein écran
   -------------------------------------------------------------------------- */
.menu { position: fixed; inset: 0; z-index: 120; background: var(--footer); color: var(--white); visibility: hidden; clip-path: inset(0 0 100% 0); display: grid; grid-template-rows: auto 1fr auto; --line: rgba(230, 215, 202, 0.2); --line-action: rgba(230, 215, 202, 0.35); --fg: var(--white); --muted: rgba(255, 255, 255, 0.55); overflow: hidden; }
.menu__top { display: flex; justify-content: space-between; align-items: center; padding: clamp(16px, 2.1vw, 30px) var(--pad); }
.menu__close { display: inline-flex; align-items: center; gap: 12px; font-size: var(--fs-sm); line-height: 1.88; padding: 6px 0; }
.menu__close i { position: relative; width: 22px; height: 22px; }
.menu__close i::before, .menu__close i::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: currentColor; transition: transform 0.6s var(--ease); }
.menu__close i::before { transform: rotate(45deg); } .menu__close i::after { transform: rotate(-45deg); }
.menu__close:hover i::before { transform: rotate(135deg); } .menu__close:hover i::after { transform: rotate(45deg); }
.menu__body { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: clamp(30px, 5vw, 90px); padding: 10px var(--pad) 30px; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.menu__list { display: flex; flex-direction: column; justify-content: center; }
.menu__item { border-bottom: 1px solid var(--line); }
.menu__item:first-child { border-top: 1px solid var(--line); }
.menu__link { display: flex; align-items: baseline; gap: 22px; padding: clamp(6px, 1vh, 12px) 0 clamp(4px, 0.8vh, 10px); font-size: clamp(32px, min(5.6vh, 4.6vw), 68px); line-height: 1.04; letter-spacing: -0.04em; overflow: hidden; }
.menu__link small { font-size: var(--fs-sm); line-height: 1; letter-spacing: 0.007em; color: var(--muted); width: 30px; flex: none; display: block; }
.menu__txt { display: block; transition: transform 0.7s var(--ease); }
.menu__txt > span { display: block; }
.menu__link:hover .menu__txt { transform: translateX(18px); }
.menu__subs { display: flex; flex-wrap: wrap; gap: 2px 22px; margin: 0 0 10px 52px; font-size: var(--fs-sm); line-height: 1.88; color: var(--muted); }
.menu__subs a:hover { color: var(--white); }
.menu__side { position: relative; display: flex; flex-direction: column; justify-content: center; }
.menu__media { position: relative; aspect-ratio: 4 / 5; max-height: 62vh; width: 100%; overflow: hidden; background: #15161b; align-self: flex-end; max-width: 520px; }
.menu__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; clip-path: inset(100% 0 0 0); transform: scale(1.25); }
.menu__media img.is-active { clip-path: inset(0); z-index: 1; }
.menu__foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 13px 40px; padding: 22px var(--pad) clamp(18px, 2.2vw, 30px); border-top: 1px solid var(--line); font-size: var(--fs-sm); line-height: 1.88; }
.menu__foot div { display: flex; flex-wrap: wrap; gap: 4px 24px; }
@media (max-width: 899px) {
  .menu__body { grid-template-columns: 1fr; }
  .menu__side { display: none; }
  .menu__list { justify-content: flex-start; }
  .menu__subs { margin-left: 0; }
  .menu__link small { display: none; }
}

/* --------------------------------------------------------------------------
   Tiroir de réservation
   -------------------------------------------------------------------------- */
.scrim { position: fixed; inset: 0; z-index: 130; background: rgba(7, 7, 7, 0.55); opacity: 0; visibility: hidden; }
.drawer { position: fixed; top: 0; right: 0; bottom: 0; z-index: 140; width: min(580px, 100%); background: var(--white); color: var(--ink); visibility: hidden; display: flex; flex-direction: column; overflow-y: auto; overscroll-behavior: contain; --line: var(--sand); --line-action: var(--linen); --fg: var(--ink); --muted: var(--steel); }
.drawer__top { display: flex; justify-content: space-between; align-items: center; padding: clamp(16px, 2.1vw, 30px) clamp(20px, 4vw, 50px); }
.drawer__body { padding: clamp(10px, 2vw, 30px) clamp(20px, 4vw, 50px) clamp(30px, 4vw, 50px); display: flex; flex-direction: column; gap: 32px; flex: 1; }
.drawer__title { font-size: clamp(56px, 9vw, 104px); line-height: 0.82; letter-spacing: -0.04em; }
.drawer .menu__close { color: var(--ink); }

.bk { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--line); }
.bk__f { position: relative; padding: 15px 0 13px; border-bottom: 1px solid var(--line); display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.bk__f:nth-child(odd) { padding-right: 22px; }
.bk__f:nth-child(even) { padding-left: 22px; border-left: 1px solid var(--line); }
.bk__f--full { grid-column: 1 / -1; padding-left: 0 !important; border-left: 0 !important; }
.bk__f label, .bk__lbl { font-size: var(--fs-sm); line-height: 1.88; color: var(--muted); }
.bk__f input[type="date"], .bk__f select { appearance: none; -webkit-appearance: none; background: transparent; border: 0; padding: 2px 0; font-size: var(--fs-sub); line-height: 1.33; letter-spacing: -0.035em; width: 100%; min-height: 34px; cursor: pointer; }
.bk__f input[type="date"]::-webkit-calendar-picker-indicator { opacity: 0.45; cursor: pointer; }
.bk__f input:focus-visible, .bk__f select:focus-visible { outline-offset: 2px; }
.step { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: var(--fs-sub); line-height: 1.33; letter-spacing: -0.035em; }
.step button { width: 34px; height: 34px; border: 1px solid var(--line-action); display: grid; place-items: center; font-size: 16px; line-height: 1; transition: border-color 0.4s var(--ease); }
.step button:hover { border-color: var(--fg); }
.step output { min-width: 1.4em; text-align: center; font-variant-numeric: tabular-nums; }
.bk__ages { grid-column: 1 / -1; display: none; flex-wrap: wrap; gap: 10px 22px; padding: 15px 0; border-bottom: 1px solid var(--line); }
.bk__ages.is-on { display: flex; }
.bk__ages label { display: flex; align-items: center; gap: 10px; font-size: var(--fs-sm); color: var(--muted); }
.bk__ages select { border: 1px solid var(--line-action); background: transparent; padding: 6px 10px; font-size: var(--fs-sm); }
.bk__msg { grid-column: 1 / -1; font-size: var(--fs-sm); line-height: 1.88; color: var(--muted); padding-top: 10px; min-height: 2.2em; }
.bk__msg.is-error { color: var(--ink); }
.drawer__list li { display: flex; gap: 15px; padding: 11px 0; border-bottom: 1px solid var(--line); font-size: var(--fs-sm); line-height: 1.88; }
.drawer__list li:first-child { border-top: 1px solid var(--line); }
.drawer__list li span:first-child { color: var(--muted); width: 2em; flex: none; }
.drawer__contact { margin-top: auto; display: grid; gap: 4px; font-size: var(--fs-sm); line-height: 1.88; }
.drawer__contact a.t-sub { font-size: var(--fs-sub); line-height: 1.33; letter-spacing: -0.035em; }

/* --------------------------------------------------------------------------
   Sections
   -------------------------------------------------------------------------- */
main { position: relative; z-index: 2; background: var(--canvas); --line: #d3c2b2; --line-action: #c8b5a3; }
.section--white, .bookbar, .cta, .hs.section--white { --line: var(--sand); --line-action: #dbc8b8; }
.phead { --line-action: #c8b5a3; }
.wrap { padding-left: var(--pad); padding-right: var(--pad); }
.section { position: relative; padding: var(--gap) var(--pad); }
.section--tight { padding-top: calc(var(--gap) * 0.55); padding-bottom: calc(var(--gap) * 0.55); }
.section--white { background: var(--white); }
.section--ink { background: var(--ink); color: var(--white); --fg: var(--white); --line: rgba(230, 215, 202, 0.22); --line-action: rgba(230, 215, 202, 0.4); --muted: rgba(255, 255, 255, 0.58); }
.section--flush { padding-left: 0; padding-right: 0; }
.section + .section--same { padding-top: 0; }
.section__head { display: grid; gap: clamp(30px, 4vw, 60px); margin-bottom: clamp(50px, 7vw, 120px); }
.section__head--row { grid-template-columns: minmax(0, 1fr) auto; align-items: end; }
@media (max-width: 760px) { .section__head--row { grid-template-columns: 1fr; } }

.grid2 { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(16px, 2vw, 30px); row-gap: clamp(40px, 6vw, 80px); align-items: start; }
.col-label { grid-column: 1 / span 3; }
.col-main { grid-column: 5 / span 8; }
.col-l { grid-column: 1 / span 5; }
.col-r { grid-column: 7 / span 6; }
.col-l6 { grid-column: 1 / span 6; }
.col-r5 { grid-column: 8 / span 5; }
.col-full { grid-column: 1 / -1; }
@media (max-width: 899px) { .col-label, .col-main, .col-l, .col-r, .col-l6, .col-r5 { grid-column: 1 / -1; } }
.stack > * + * { margin-top: clamp(26px, 3vw, 40px); }
.stack-lg > * + * { margin-top: clamp(40px, 5vw, 67px); }
.actions { display: flex; flex-wrap: wrap; gap: 13px; }

/* Médias : plein cadre, angles vifs, révélés par découpe */
.media { position: relative; overflow: hidden; background: #d6d1ca; }
.section--ink .media, .menu .media { background: #17181d; }
.zoom { position: absolute; inset: 0; transition: transform 1.4s var(--ease); }
.card:hover .zoom, .rcard:hover .zoom { transform: scale(1.05); }
button.media { display: block; width: 100%; padding: 0; border: 0; cursor: pointer; }
.media img { width: 100%; height: 100%; object-fit: cover; will-change: transform; }
.media--par img { height: 118%; position: absolute; left: 0; top: -9%; }
.r-45 { aspect-ratio: 4 / 5; } .r-34 { aspect-ratio: 3 / 4; } .r-32 { aspect-ratio: 3 / 2; } .r-11 { aspect-ratio: 1; } .r-169 { aspect-ratio: 16 / 9; } .r-219 { aspect-ratio: 21 / 9; } .r-23 { aspect-ratio: 2 / 3; }
.media figcaption, .cap { font-size: var(--fs-sm); line-height: 1.88; }
.cap { display: flex; justify-content: space-between; gap: 20px; margin-top: 14px; color: var(--fg); }
.cap span:last-child { color: var(--muted); text-align: right; }
.bleed { margin-left: calc(var(--pad) * -1); margin-right: calc(var(--pad) * -1); }

/* --------------------------------------------------------------------------
   Héros
   -------------------------------------------------------------------------- */
.hero { position: relative; height: 100vh; height: 100svh; min-height: 620px; color: var(--white); overflow: hidden; background: var(--ink); }
.hero__media { position: absolute; inset: 0; }
.hero__slide { position: absolute; inset: 0; clip-path: inset(0 0 100% 0); }
.hero__slide.is-active { clip-path: inset(0); z-index: 1; }
.hero__slide img, .hero__media > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero__media::after { content: ""; position: absolute; inset: 0; z-index: 2; background: rgba(13, 14, 19, 0.36); }
.hero__in { position: absolute; inset: 0; z-index: 3; padding: 0 var(--pad) clamp(34px, 5vw, 67px); display: flex; flex-direction: column; justify-content: flex-end; }
.hero__title { font-size: var(--fs-display); line-height: 0.76; letter-spacing: -0.046em; margin-left: -0.05em; }
.hero__title span { display: block; }
.hero__meta { position: absolute; right: var(--pad); bottom: clamp(34px, 5vw, 67px); width: min(300px, 40vw); display: grid; gap: 22px; font-size: var(--fs-sm); line-height: 1.88; }
.hero__count { display: flex; align-items: center; gap: 13px; font-variant-numeric: tabular-nums; }
.hero__bar { flex: 1; height: 1px; background: rgba(255, 255, 255, 0.3); position: relative; overflow: hidden; }
.hero__bar i { position: absolute; inset: 0; background: var(--white); transform: scaleX(0); transform-origin: left; }
.hero__kicker { position: absolute; left: var(--pad); top: clamp(96px, 14vh, 150px); z-index: 3; font-size: var(--fs-sm); line-height: 1.88; display: flex; gap: 15px; }
.hero--page { height: 92vh; height: 92svh; }
.hero--page .hero__title { font-size: var(--fs-hlg); line-height: 0.82; letter-spacing: -0.04em; max-width: 12ch; }
.hero--page .hero__title.is-long { font-size: clamp(44px, 8vw, 118px); max-width: 11ch; }
.crumbs { display: flex; flex-wrap: wrap; gap: 6px 12px; font-size: var(--fs-sm); line-height: 1.88; margin-bottom: clamp(22px, 3vw, 40px); color: rgba(255, 255, 255, 0.78); }
.crumbs a:hover { color: var(--white); }
.crumbs li + li::before { content: "—"; margin-right: 12px; opacity: 0.6; }
@media (max-width: 899px) {
  .hero__meta { position: static; width: auto; margin-top: 30px; max-width: 420px; }
  .hero__in { padding-bottom: 30px; }
}

/* En-tête de page sans image */
.phead { padding: clamp(150px, 20vw, 260px) var(--pad) clamp(50px, 6vw, 90px); }
.phead .crumbs { color: var(--muted); }
.phead .crumbs a:hover { color: var(--ink); }

/* --------------------------------------------------------------------------
   Bandeau de réservation (sous le héros)
   -------------------------------------------------------------------------- */
.bookbar { background: var(--white); padding: 0 var(--pad); border-bottom: 1px solid var(--sand); }
.bookbar form { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) auto; align-items: stretch; }
.bookbar__f { padding: 22px 30px 20px 0; display: flex; flex-direction: column; gap: 2px; border-right: 1px solid var(--sand); margin-right: 30px; min-width: 0; }
.bookbar__f label { font-size: var(--fs-sm); line-height: 1.88; color: var(--steel); }
.bookbar__f input, .bookbar__f select { appearance: none; -webkit-appearance: none; border: 0; background: transparent; font-size: var(--fs-sub); line-height: 1.33; letter-spacing: -0.035em; padding: 0; min-height: 34px; width: 100%; cursor: pointer; }
.bookbar__f input::-webkit-calendar-picker-indicator { opacity: 0.45; cursor: pointer; }
.bookbar__go { display: flex; align-items: center; }
@media (max-width: 899px) {
  .bookbar form { grid-template-columns: 1fr 1fr; }
  .bookbar__f { margin-right: 0; padding-right: 16px; }
  .bookbar__f:nth-child(2) { border-right: 0; padding-left: 16px; }
  .bookbar__f:nth-child(3) { grid-column: 1 / -1; border-right: 0; border-top: 1px solid var(--sand); }
  .bookbar__go { grid-column: 1 / -1; padding: 0 0 22px; }
  .bookbar__go .btn { width: 100%; justify-content: space-between; }
  .bookbar__f input, .bookbar__f select { font-size: 18px; letter-spacing: -0.02em; }
}
@media (max-width: 420px) { .bk__f input[type="date"] { font-size: 18px; letter-spacing: -0.02em; } }

/* --------------------------------------------------------------------------
   Listes à filets sable
   -------------------------------------------------------------------------- */
.rows { border-top: 1px solid var(--line); }
.row { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 6fr) auto; gap: 15px clamp(16px, 2vw, 30px); align-items: baseline; padding: clamp(22px, 2.4vw, 32px) 0; border-bottom: 1px solid var(--line); font-size: var(--fs-sm); line-height: 1.88; letter-spacing: 0.007em; }
.row__k { font-size: var(--fs-sub); line-height: 1.33; letter-spacing: -0.035em; }
.row__v { color: var(--muted); max-width: 560px; }
.row__p { white-space: nowrap; text-align: right; min-width: 8em; }
.rows--plain .row { grid-template-columns: minmax(0, 1fr) auto; padding: 15px 0; }
.rows--plain .row__k { font-size: var(--fs-sm); line-height: 1.88; letter-spacing: 0.007em; }
.rows--num .row { grid-template-columns: 3.2em minmax(0, 1fr); padding: 13px 0; }
.rows--num .row > span:first-child { color: var(--muted); font-variant-numeric: tabular-nums; }
@media (max-width: 760px) {
  .row { grid-template-columns: 1fr; gap: 6px; }
  .row__p { text-align: left; }
  .rows--plain .row { grid-template-columns: minmax(0, 1fr) auto; }
  .rows--num .row { grid-template-columns: 2.6em minmax(0, 1fr); }
}

/* Liste avec image au survol */
.hlist { position: relative; border-top: 1px solid var(--line); }
.hlist__row { position: relative; display: grid; grid-template-columns: 4em minmax(0, 1.4fr) minmax(0, 1fr) auto; gap: 15px clamp(16px, 2vw, 30px); align-items: center; padding: clamp(24px, 3vw, 46px) 0; border-bottom: 1px solid var(--line); transition: padding 0.7s var(--ease), color 0.4s; }
.hlist__n { font-size: var(--fs-sm); color: var(--muted); font-variant-numeric: tabular-nums; }
.hlist__t { font-size: clamp(30px, 4.6vw, 66px); line-height: 1; letter-spacing: -0.04em; }
.hlist__d { font-size: var(--fs-sm); line-height: 1.88; color: var(--muted); }
.hlist__m { font-size: var(--fs-sm); line-height: 1.88; text-align: right; white-space: nowrap; }
.hlist__thumb { display: none; }
@media (hover: hover) and (pointer: fine) {
  .hlist:hover .hlist__row { color: var(--muted); }
  .hlist .hlist__row:hover { color: var(--fg); padding-left: 22px; padding-right: 22px; }
}
.hpreview { position: fixed; left: 0; top: 0; z-index: 80; width: clamp(260px, 26vw, 420px); aspect-ratio: 4 / 5; pointer-events: none; overflow: hidden; visibility: hidden; --c: 50; clip-path: inset(calc(var(--c) * 1%)); }
.hpreview img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.2); transition: opacity 0.5s var(--ease), transform 1.1s var(--ease); background: var(--white); }
.hpreview img.is-active { opacity: 1; transform: scale(1); }
.hpreview--logo { aspect-ratio: 4 / 3; background: var(--white); width: clamp(220px, 20vw, 320px); }
.hpreview--logo img { object-fit: contain; padding: 15%; }
@media (max-width: 899px), (hover: none) {
  .hlist__row { grid-template-columns: 96px minmax(0, 1fr); align-items: start; gap: 6px 18px; }
  .hlist__n { display: none; }
  .hlist__thumb { display: block; grid-row: 1 / span 3; aspect-ratio: 4 / 5; overflow: hidden; }
  .hlist__thumb img { width: 100%; height: 100%; object-fit: cover; }
  .hlist__m { text-align: left; white-space: normal; }
  .hpreview { display: none; }
  .hlist--logo .hlist__row { grid-template-columns: minmax(0, 1fr); }
}

/* --------------------------------------------------------------------------
   Chiffres
   -------------------------------------------------------------------------- */
.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--line); }
.stat { padding: clamp(26px, 3vw, 50px) clamp(16px, 2vw, 30px) clamp(26px, 3vw, 50px) 0; border-bottom: 1px solid var(--line); }
.stat + .stat { padding-left: clamp(16px, 2vw, 30px); border-left: 1px solid var(--line); }
.stat__n { font-size: clamp(44px, 6.5vw, 96px); line-height: 0.82; letter-spacing: -0.045em; font-variant-numeric: tabular-nums; display: block; margin-bottom: clamp(26px, 4vw, 60px); white-space: nowrap; }
.stat__n--sm { font-size: clamp(24px, 2.9vw, 42px); line-height: 1; letter-spacing: -0.035em; white-space: normal; min-height: 2em; margin-bottom: clamp(18px, 2vw, 30px); }
.stat__l { font-size: var(--fs-sm); line-height: 1.88; color: var(--muted); max-width: 22ch; }
@media (max-width: 899px) { .stats { grid-template-columns: 1fr 1fr; } .stat:nth-child(3) { padding-left: 0; border-left: 0; } }

/* --------------------------------------------------------------------------
   Bandeau défilant
   -------------------------------------------------------------------------- */
.marquee { overflow: hidden; padding: clamp(30px, 5vw, 67px) 0; white-space: nowrap; user-select: none; }
.marquee__track { display: inline-flex; will-change: transform; }
.marquee__track > span { font-size: var(--fs-hlg); line-height: 0.9; letter-spacing: -0.04em; padding-right: 0.35em; display: inline-flex; align-items: center; gap: 0.35em; }
.marquee__track > span::after { content: ""; width: 0.14em; height: 0.14em; background: currentColor; display: inline-block; }
.marquee--out .marquee__track > span { color: transparent; -webkit-text-stroke: 1px var(--fg); }

/* --------------------------------------------------------------------------
   Chambres — défilement horizontal
   -------------------------------------------------------------------------- */
.hs { position: relative; overflow: hidden; }
.hs__head { padding: var(--gap) var(--pad) clamp(40px, 5vw, 67px); display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 30px; align-items: end; }
.hs__viewport { overflow: hidden; padding-bottom: var(--gap); }
.hs__track { display: flex; gap: clamp(16px, 2vw, 30px); padding: 0 var(--pad); width: max-content; will-change: transform; }
.rcard { width: clamp(270px, 31vw, 470px); flex: none; display: block; }
.rcard .media { aspect-ratio: 4 / 5; }
.rcard .media img { width: 116%; max-width: none; margin-left: -8%; }
.rcard__meta { display: grid; grid-template-columns: 2.4em minmax(0, 1fr) auto; gap: 15px; padding-top: 15px; font-size: var(--fs-sm); line-height: 1.88; align-items: baseline; }
.rcard__meta h3 { font-size: var(--fs-sub); line-height: 1.33; letter-spacing: -0.035em; }
.rcard__meta span:first-child, .rcard__meta span:last-child { color: var(--muted); }
.rcard--end { display: flex; flex-direction: column; justify-content: space-between; border: 1px solid var(--line-action); padding: clamp(24px, 3vw, 50px); aspect-ratio: auto; transition: border-color 0.5s var(--ease); align-self: stretch; margin-bottom: calc(15px + 1.88 * 14px + 0.33 * 24px); }
.rcard--end:hover { border-color: var(--fg); }
.rcard--end strong { font-size: clamp(34px, 4.4vw, 64px); line-height: 0.9; letter-spacing: -0.04em; }
.hs__bar { height: 1px; background: var(--line); margin: 0 var(--pad) clamp(22px, 3vh, 40px); position: relative; }
.hs__bar i { position: absolute; inset: 0; background: var(--fg); transform: scaleX(0); transform-origin: left; }
@media (min-width: 900px) {
  .hs { min-height: 100vh; display: flex; flex-direction: column; justify-content: center; padding: clamp(84px, 11vh, 120px) 0 clamp(26px, 4vh, 50px); }
  .hs__head { padding-top: 0; padding-bottom: clamp(20px, 3.4vh, 44px); }
  .hs__viewport { padding-bottom: 0; }
  .rcard { width: auto; }
  .rcard .media { height: clamp(230px, 45vh, 560px); aspect-ratio: 4 / 5; }
  .rcard--end { width: clamp(250px, 24vw, 380px); height: clamp(230px, 45vh, 560px); margin-bottom: 0; align-self: flex-start; }
}
@media (max-width: 899px) {
  .hs__head { grid-template-columns: 1fr; }
  .hs__bar { display: none; }
  .hs__viewport { overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .hs__viewport::-webkit-scrollbar { display: none; }
  .rcard { scroll-snap-align: start; scroll-margin-left: var(--pad); width: 74vw; }
}

/* Grille de cartes (page Chambres) */
.cards { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: clamp(60px, 9vw, 140px) clamp(16px, 2vw, 30px); }
.cards > :nth-child(4n + 1) { grid-column: 1 / span 5; }
.cards > :nth-child(4n + 2) { grid-column: 7 / span 6; margin-top: clamp(40px, 12vw, 200px); }
.cards > :nth-child(4n + 3) { grid-column: 2 / span 6; }
.cards > :nth-child(4n + 4) { grid-column: 9 / span 4; margin-top: clamp(40px, 10vw, 160px); }
.card { display: block; }

.card__meta { display: flex; justify-content: space-between; gap: 20px; padding-top: 15px; font-size: var(--fs-sm); line-height: 1.88; }
.card__meta h3 { font-size: var(--fs-sub); line-height: 1.33; letter-spacing: -0.035em; }
.card__meta p { color: var(--muted); text-align: right; }
@media (max-width: 760px) { .cards > * { grid-column: 1 / -1 !important; margin-top: 0 !important; } }

/* --------------------------------------------------------------------------
   Image qui s’ouvre au défilement
   -------------------------------------------------------------------------- */
.expand { position: relative; height: 100vh; height: 100svh; min-height: 560px; overflow: hidden; display: grid; place-items: center; color: var(--white); }
.expand__media { position: absolute; inset: 0; --iy: 34; --ix: 38; clip-path: inset(calc(var(--iy) * 1%) calc(var(--ix) * 1%)); will-change: clip-path; }
.expand__media img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.25); will-change: transform; }
.expand__media::after { content: ""; position: absolute; inset: 0; background: rgba(13, 14, 19, 0.34); }
.expand__title { position: relative; z-index: 2; font-size: var(--fs-display); line-height: 0.76; letter-spacing: -0.046em; text-align: center; color: var(--white); }
.expand__foot { position: absolute; z-index: 2; left: var(--pad); right: var(--pad); bottom: clamp(26px, 4vw, 50px); display: flex; justify-content: space-between; gap: 20px; font-size: var(--fs-sm); line-height: 1.88; }

/* --------------------------------------------------------------------------
   Destinations
   -------------------------------------------------------------------------- */
.dgrid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: clamp(50px, 7vw, 110px) clamp(16px, 2vw, 30px); align-items: start; }
.dgrid > :nth-child(1) { grid-column: 1 / span 5; }
.dgrid > :nth-child(2) { grid-column: 8 / span 5; margin-top: clamp(60px, 14vw, 220px); }
.dgrid > :nth-child(3) { grid-column: 3 / span 4; }
.dgrid > :nth-child(4) { grid-column: 8 / span 4; margin-top: clamp(40px, 8vw, 120px); }
.dgrid > :nth-child(5) { grid-column: 1 / span 6; }
@media (max-width: 760px) { .dgrid > * { grid-column: 1 / -1 !important; margin-top: 0 !important; } }

.quote { font-family: var(--serif); font-size: 16px; line-height: 2; max-width: 520px; }
.quote cite { display: block; font-style: normal; color: var(--muted); font-family: var(--font); font-size: var(--fs-sm); line-height: 1.88; margin-top: 13px; }
.bigquote { font-size: var(--fs-statement); line-height: 1.12; letter-spacing: -0.03em; max-width: 22ch; }

/* --------------------------------------------------------------------------
   Galerie glissante + visionneuse
   -------------------------------------------------------------------------- */
.slider { position: relative; }
.slider__vp { overflow-x: auto; overflow-y: hidden; scrollbar-width: none; cursor: grab; -webkit-overflow-scrolling: touch; }
.slider__vp::-webkit-scrollbar { display: none; }
.slider__vp.is-drag { cursor: grabbing; }
.slider__track { display: flex; gap: clamp(13px, 1.4vw, 22px); padding: 0 var(--pad); width: max-content; align-items: flex-end; }
.slide { flex: none; height: clamp(300px, 62vh, 680px); position: relative; overflow: hidden; background: #d6d1ca; display: block; padding: 0; border: 0; cursor: inherit; }
.slide img { height: 100%; width: auto; max-width: none; pointer-events: none; user-select: none; -webkit-user-drag: none; transition: transform 1.4s var(--ease); }
.slide:hover img { transform: scale(1.04); }
.slider__ui { display: flex; align-items: center; gap: 22px; padding: 22px var(--pad) 0; font-size: var(--fs-sm); line-height: 1.88; }
.slider__bar { flex: 1; height: 1px; background: var(--line); position: relative; }
.slider__bar i { position: absolute; left: 0; top: 0; bottom: 0; width: 100%; background: var(--fg); transform: scaleX(0.1); transform-origin: left; }
.slider__nav { display: flex; gap: 13px; }
.slider__nav button { width: 46px; height: 46px; border: 1px solid var(--line-action); display: grid; place-items: center; transition: border-color 0.4s var(--ease); }
.slider__nav button:hover { border-color: var(--fg); }
.slider__nav svg { width: 14px; height: 14px; }

.lb { position: fixed; inset: 0; z-index: 160; background: var(--footer); color: var(--white); visibility: hidden; opacity: 0; display: grid; grid-template-rows: auto 1fr auto; }
.lb__top, .lb__bot { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: clamp(16px, 2.1vw, 30px) var(--pad); font-size: var(--fs-sm); line-height: 1.88; }
.lb__stage { position: relative; min-height: 0; display: grid; place-items: center; padding: 0 var(--pad); }
.lb__stage img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; position: absolute; inset: 0; margin: auto; }
.lb__nav { display: flex; gap: 13px; }
.lb__nav button, .lb__x { border: 1px solid rgba(230, 215, 202, 0.4); height: 46px; min-width: 46px; padding: 0 16px; display: grid; place-items: center; transition: border-color 0.4s var(--ease); }
.lb__nav button:hover, .lb__x:hover { border-color: var(--white); }
.lb__nav svg { width: 14px; height: 14px; }

/* Mosaïque (page Galerie) */
.filters { display: flex; flex-wrap: wrap; gap: 13px; margin-bottom: clamp(40px, 5vw, 67px); }
.filters .btn[aria-pressed="true"] { border-color: var(--fg); }
.mosaic { columns: 3; column-gap: clamp(13px, 1.4vw, 22px); }
.mosaic__i { display: block; width: 100%; margin: 0 0 clamp(13px, 1.4vw, 22px); break-inside: avoid; overflow: hidden; background: #d6d1ca; padding: 0; border: 0; }
.mosaic__i img { width: 100%; transition: transform 1.4s var(--ease); }
.mosaic__i:hover img { transform: scale(1.04); }
.mosaic__i.is-off { display: none; }
@media (max-width: 899px) { .mosaic { columns: 2; } }
@media (max-width: 520px) { .mosaic { columns: 1; } }

/* --------------------------------------------------------------------------
   Histoire — frise
   -------------------------------------------------------------------------- */
.tl { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(16px, 6vw, 110px); align-items: start; }
.tl__year { position: sticky; top: 0; height: 100vh; height: 100svh; display: flex; flex-direction: column; justify-content: center; gap: 30px; }
.tl__num { font-size: clamp(84px, 15.6vw, 240px); line-height: 0.76; letter-spacing: -0.05em; font-variant-numeric: tabular-nums; display: flex; overflow: hidden; padding: 0.12em 0 0.14em; margin-left: -0.05em; }
.tl__num span { display: block; }
.tl__prog { height: 1px; background: var(--line); position: relative; max-width: 420px; }
.tl__prog i { position: absolute; inset: 0; background: var(--fg); transform: scaleX(0); transform-origin: left; }
.tl__events { padding: 30vh 0 34vh; }
.tl__ev { padding: clamp(40px, 9vh, 110px) 0; border-top: 1px solid var(--line); opacity: 0.28; transition: opacity 0.7s var(--ease); }
.tl__ev.is-active { opacity: 1; }
.tl__ev h3 { font-size: var(--fs-statement); line-height: 1.12; letter-spacing: -0.03em; margin: 13px 0 22px; }
.tl__ev p { max-width: 480px; }
@media (max-width: 899px) {
  .tl { grid-template-columns: 1fr; }
  .tl__year { height: auto; top: 0; padding: 74px 0 16px; background: var(--canvas); z-index: 3; gap: 14px; }
  .tl__num { font-size: clamp(72px, 25vw, 150px); }
  .tl__events { padding: 6vh 0 10vh; }
}

/* --------------------------------------------------------------------------
   Lien « page suivante »
   -------------------------------------------------------------------------- */
.next { position: relative; display: block; overflow: hidden; color: var(--white); background: var(--ink); }
.next__media { position: absolute; inset: 0; }
.next__media img { width: 100%; height: 120%; object-fit: cover; position: absolute; top: -10%; transition: transform 1.6s var(--ease); }
.next__media::after { content: ""; position: absolute; inset: 0; background: rgba(13, 14, 19, 0.5); transition: background-color 0.8s var(--ease); }
.next:hover .next__media img { transform: scale(1.05); }
.next:hover .next__media::after { background: rgba(13, 14, 19, 0.3); }
.next__in { position: relative; z-index: 2; padding: var(--gap) var(--pad); min-height: 78vh; display: flex; flex-direction: column; justify-content: space-between; gap: 60px; }
.next__t { font-size: var(--fs-hlg); line-height: 0.82; letter-spacing: -0.04em; display: flex; align-items: flex-end; justify-content: space-between; gap: 30px; }
.next__t svg { width: 0.5em; height: 0.5em; flex: none; transition: transform 0.9s var(--ease); }
.next:hover .next__t svg { transform: translate(0.08em, -0.08em); }

/* --------------------------------------------------------------------------
   Appel à réserver
   -------------------------------------------------------------------------- */
.cta { background: var(--white); padding: var(--gap) var(--pad); }
.cta__t { font-size: var(--fs-hlg); line-height: 0.82; letter-spacing: -0.04em; max-width: 9ch; }
.cta__grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(40px, 6vw, 90px) clamp(16px, 2vw, 30px); align-items: end; }
@media (max-width: 899px) { .cta__grid { grid-template-columns: 1fr; } }

/* --------------------------------------------------------------------------
   Formulaires
   -------------------------------------------------------------------------- */
.form { display: grid; grid-template-columns: 1fr 1fr; gap: 0 clamp(16px, 2vw, 30px); border-top: 1px solid var(--line); }
.field { position: relative; display: flex; flex-direction: column; padding: 15px 0 13px; border-bottom: 1px solid var(--line); transition: border-color 0.4s var(--ease); }
.field--full { grid-column: 1 / -1; }
.field:focus-within { border-color: var(--fg); }
.field label { font-size: var(--fs-sm); line-height: 1.88; color: var(--muted); }
.field input, .field textarea { border: 0; background: transparent; padding: 4px 0; font-size: var(--fs-sub); line-height: 1.33; letter-spacing: -0.035em; outline: 0; width: 100%; resize: vertical; }
.field textarea { min-height: 150px; font-size: var(--fs-body); letter-spacing: 0.006em; line-height: 1.5; }
.field.is-error { border-color: var(--ink); }
.field__err { font-size: var(--fs-sm); line-height: 1.88; min-height: 0; color: var(--ink); }
.form__foot { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 22px; padding-top: 30px; }
.form__note { font-size: var(--fs-sm); line-height: 1.88; color: var(--muted); max-width: 420px; }
@media (max-width: 620px) { .form { grid-template-columns: 1fr; } }

.news { display: flex; align-items: flex-end; gap: 13px; border-bottom: 1px solid var(--line-action); padding-bottom: 10px; max-width: 420px; transition: border-color 0.4s var(--ease); }
.news:focus-within { border-color: var(--fg); }
.news input { flex: 1; min-width: 0; border: 0; background: transparent; outline: 0; padding: 4px 0; font-size: var(--fs-body); color: inherit; }
.news input::placeholder { color: var(--muted); }
.news button { font-size: var(--fs-sm); line-height: 1.88; white-space: nowrap; }

/* Carte */
.map { position: relative; aspect-ratio: 16 / 8; min-height: 380px; background: var(--white); overflow: hidden; border: 1px solid var(--line); }
.map iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; filter: grayscale(1) sepia(0.18) contrast(0.96) brightness(1.02); }
.map__ph { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between; padding: clamp(24px, 3vw, 50px); }
.map__ph .t-hlg { font-size: clamp(40px, 6.4vw, 92px); }
.map__grid { position: absolute; inset: 0; background-image: linear-gradient(var(--sand) 1px, transparent 1px), linear-gradient(90deg, var(--sand) 1px, transparent 1px); background-size: 64px 64px; opacity: 0.55; background-position: -1px -1px; }
.map__ph > * { position: relative; }

/* Étapes d’itinéraire */
.acc { border-top: 1px solid var(--line); }
.acc__item { border-bottom: 1px solid var(--line); }
.acc__btn { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: clamp(22px, 2.4vw, 32px) 0; text-align: left; font-size: var(--fs-sub); line-height: 1.33; letter-spacing: -0.035em; }
.acc__btn i { position: relative; width: 16px; height: 16px; flex: none; }
.acc__btn i::before, .acc__btn i::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: currentColor; transition: transform 0.6s var(--ease); }
.acc__btn i::after { transform: rotate(90deg); }
.acc__btn[aria-expanded="true"] i::after { transform: rotate(0deg); }
.acc__panel { height: 0; overflow: hidden; }
.acc__in { padding: 0 0 32px; max-width: 760px; }

/* --------------------------------------------------------------------------
   Pied de page
   -------------------------------------------------------------------------- */
.ftr { position: relative; z-index: 1; background: var(--footer); color: var(--white); padding: var(--gap) var(--pad) clamp(22px, 2.4vw, 32px); --fg: var(--white); --line: rgba(230, 215, 202, 0.2); --line-action: rgba(230, 215, 202, 0.38); --muted: rgba(255, 255, 255, 0.55); overflow: hidden; }
.ftr__cta { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 40px; align-items: end; padding-bottom: clamp(60px, 9vw, 120px); }
.ftr__cta .t-hlg { max-width: 10ch; }
.ftr__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 50px clamp(16px, 2vw, 30px); padding: clamp(40px, 5vw, 67px) 0; border-top: 1px solid var(--line); }
.ftr__col { grid-column: span 3; font-size: var(--fs-sm); line-height: 1.88; }
.ftr__col h4 { color: var(--muted); margin-bottom: 15px; font-size: var(--fs-sm); }
.ftr__col li a, .ftr__col p a { display: inline-block; }
.ftr__big { font-size: clamp(22px, 2.3vw, 32px); line-height: 1.25; letter-spacing: -0.035em; }
.ftr__logo { width: min(100%, clamp(280px, 62vw, 880px)); margin: clamp(50px, 7vw, 110px) auto clamp(44px, 6vw, 90px); overflow: hidden; }
.ftr__logo img { display: block; width: 100%; height: auto; }
.ftr__bot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 30px; padding-top: 22px; border-top: 1px solid var(--line); font-size: var(--fs-sm); line-height: 1.88; color: var(--muted); }
.ftr__bot a:hover { color: var(--white); }
.ftr__bot div { display: flex; flex-wrap: wrap; gap: 4px 24px; }
@media (max-width: 899px) { .ftr__col { grid-column: span 6; } .ftr__cta { grid-template-columns: 1fr; } }
@media (max-width: 520px) { .ftr__col { grid-column: 1 / -1; } }

/* Barre de réservation mobile */
.mbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 85; display: none; background: var(--white); border-top: 1px solid var(--sand); padding: 10px 20px calc(10px + env(safe-area-inset-bottom)); gap: 10px; transform: translateY(101%); transition: transform 0.7s var(--ease); }
.mbar.is-on { transform: none; }
.mbar .btn { flex: 1; justify-content: center; padding: 12px 10px; font-size: var(--fs-sm); }
@media (max-width: 760px) { .mbar { display: flex; } .ftr { padding-bottom: 96px; } }

/* Barre de progression de lecture */
.progress { position: fixed; left: 0; top: 0; height: 2px; width: 100%; z-index: 95; background: var(--ink); transform: scaleX(0); transform-origin: left; pointer-events: none; mix-blend-mode: difference; background: var(--white); }

/* --------------------------------------------------------------------------
   Divers
   -------------------------------------------------------------------------- */
.split-media { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: clamp(40px, 6vw, 80px) clamp(16px, 2vw, 30px); align-items: center; }
.split-media > .sm-a { grid-column: 1 / span 6; }
.split-media > .sm-b { grid-column: 8 / span 5; }
.split-media--rev > .sm-a { grid-column: 7 / span 6; order: 2; }
.split-media--rev > .sm-b { grid-column: 1 / span 5; order: 1; }
@media (max-width: 899px) { .split-media > * { grid-column: 1 / -1 !important; order: 0 !important; } }

.duo { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: clamp(16px, 2vw, 30px); align-items: end; }
.duo > :first-child { grid-column: 1 / span 7; }
.duo > :last-child { grid-column: 9 / span 4; }
.duo--rev > :first-child { grid-column: 1 / span 4; }
.duo--rev > :last-child { grid-column: 6 / span 7; }
@media (max-width: 620px) { .duo > * { grid-column: 1 / -1 !important; } }

.tags { display: flex; flex-wrap: wrap; gap: 13px; }
.tag { border: 1px solid var(--line); padding: 6px 15px; font-size: var(--fs-sm); line-height: 1.88; }
.bullets li { position: relative; padding: 11px 0 11px 30px; border-bottom: 1px solid var(--line); font-size: var(--fs-sm); line-height: 1.88; }
.bullets li:first-child { border-top: 1px solid var(--line); }
.bullets li::before { content: ""; position: absolute; left: 0; top: 1.55em; width: 13px; height: 1px; background: currentColor; }
.legal h2 { font-size: var(--fs-sub); line-height: 1.33; letter-spacing: -0.035em; margin: 50px 0 15px; }
.legal p { max-width: 640px; font-size: var(--fs-sm); line-height: 1.88; }
.e404 { min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; justify-content: flex-end; padding: 160px var(--pad) var(--gap); gap: 40px; }

/* Sans animation (mouvement réduit ou script indisponible) : tout reste accessible */
.no-anim .hs__viewport { overflow-x: auto; }
.no-anim .hs { min-height: 0; }
.no-anim .expand__media { clip-path: none; }
.no-anim .expand__media img { transform: none; }
.no-anim .tl__ev { opacity: 1; }
.no-anim .tl__year { position: static; height: auto; padding: 0 0 40px; }
.no-anim .hero__slide:first-child { clip-path: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
  .cursor { display: none !important; }
}
@media print {
  .hdr, .menu, .drawer, .scrim, .curtain, .cursor, .mbar, .progress, .hpreview { display: none !important; }
  .js [data-split], .js [data-fade], .js [data-reveal] { visibility: visible !important; }
}