/* =========================================================================
   SUN BLUE SOLARIUM — Refonte 2026 · "L'art de la lumière"
   Obsidienne + champagne or + bleu minuit. Expérience immersive.
   ========================================================================= */

:root {
    --ink:        #050506;
    --obsidian:   #0a0a0d;
    --char:       #111116;
    --midnight:   #0c1530;

    --gold:       #d9b676;
    --gold-soft:  #e7cfa0;
    --gold-deep:  #a87f3f;
    --champagne:  #f2e6cf;
    --ivory:      #f5efe6;
    --muted:      #8d8a82;
    --muted-2:    #6a675f;

    --maxw: 1280px;
    --serif: "Fraunces", Georgia, "Times New Roman", serif;
    --sans:  "Jost", system-ui, -apple-system, "Segoe UI", sans-serif;

    --gold-grad: linear-gradient(115deg, var(--gold-soft), var(--gold) 45%, var(--gold-deep));
    --ease: cubic-bezier(.22,1,.36,1);

    /* pilotés par le JS (course du soleil) */
    --sun-x: 50%;
    --sun-y: 18%;
    --warm: 0;       /* 0 = aube fraîche · 1 = zénith chaud */
}

*, *::before, *::after { box-sizing: border-box; }

/* gouttière du scrollbar toujours réservée : ouvrir une modale (overflow:hidden)
   ne fait plus sauter la page ni la modale de la largeur de la barre */
html { -webkit-text-size-adjust: 100%; scrollbar-gutter: stable; }
html.lenis-ready { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
    margin: 0;
    font-family: var(--sans);
    font-weight: 300;
    color: var(--ivory);
    background: var(--ink);
    line-height: 1.7;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}
body.locked { overflow: hidden; }

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
::selection { background: var(--gold); color: var(--ink); }

.wrap { width: min(100% - 2.6rem, var(--maxw)); margin-inline: auto; }

h1, h2, h3, h4 { font-family: var(--serif); font-weight: 400; line-height: 1.02; letter-spacing: -.015em; margin: 0; }
em { font-style: italic; }

.kicker {
    font-family: var(--sans); font-weight: 500; font-size: .74rem; letter-spacing: .34em;
    text-transform: uppercase; color: var(--gold); margin: 0 0 1.4rem;
}
.section-title { font-size: clamp(2.4rem, 6.5vw, 5rem); font-weight: 300; letter-spacing: -.03em; }
.section-title em { font-weight: 300; color: var(--gold-soft); }
.section-title.center { text-align: center; }

.skip-link { position: absolute; left: -999px; top: 0; z-index: 600; background: var(--gold); color: var(--ink); padding: .6rem 1rem; font-weight: 600; }
.skip-link:focus { left: 0; }

/* ---------- Boutons ---------- */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
    font-family: var(--sans); font-weight: 500; font-size: .82rem; letter-spacing: .14em; text-transform: uppercase;
    padding: 1.05rem 2rem; border-radius: 0; border: 1px solid transparent; cursor: pointer;
    transition: transform .5s var(--ease), background .4s var(--ease), color .4s var(--ease), border-color .4s var(--ease);
    position: relative; overflow: hidden;
}
.btn-gold { background: var(--gold-grad); color: var(--ink); }
.btn-gold::after {
    content: ""; position: absolute; inset: 0; background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,.45), transparent 70%);
    transform: translateX(-120%); transition: transform .8s var(--ease);
}
.btn-gold:hover::after { transform: translateX(120%); }
.btn-gold:hover { transform: translateY(-2px); }
.btn-line { background: transparent; color: var(--champagne); border-color: rgba(217,182,118,.4); }
.btn-line:hover { border-color: var(--gold); color: var(--gold-soft); }

/* (la marque est définie plus bas, juste avant le bloc AMBIANCE) */

/* ====================== PRÉLOADER — INTRO CINÉMATIQUE ====================== */
/* Séquence : 1) le logo apparaît  2) il remonte  3) « festival » : note + avis
   Google en défilé sous des projecteurs, avec la phrase de rêve  4) le site. */
.loader {
    position: fixed; inset: 0; z-index: 1000; overflow: hidden;
    /* halo lumineux chaud derrière le logo, présent dès le départ */
    background:
        radial-gradient(58% 48% at 50% 42%, rgba(217,182,118,.20), rgba(217,182,118,.06) 45%, transparent 72%),
        var(--ink);
}
.loader.done { opacity: 0; visibility: hidden; transition: opacity .9s var(--ease), visibility .9s; }
/* intro déjà vue cette session : on l'escamote sans animation */
.loader.instant { transition: none !important; opacity: 0; visibility: hidden; }
/* garde anti-flash : masqué dès le 1er rendu si l'intro a déjà été vue */
html.sbs-intro-seen .loader { display: none !important; }

/* --- projecteurs « festival de Cannes » --- */
.loader-spotlight { position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity 1.1s var(--ease); }
.loader.s-festival .loader-spotlight { opacity: .9; }
.loader-spotlight::before, .loader-spotlight::after {
    content: ""; position: absolute; top: -28%; width: 52vmax; height: 150vmax;
    background: linear-gradient(to bottom, rgba(217,182,118,.20), rgba(217,182,118,.07) 45%, transparent 70%);
    filter: blur(22px); transform-origin: top center;
}
.loader-spotlight::before { left: 12%; animation: loaderBeamL 6s ease-in-out infinite alternate; }
.loader-spotlight::after  { right: 12%; animation: loaderBeamR 6s ease-in-out infinite alternate; }
@keyframes loaderBeamL { from { transform: rotate(13deg); } to { transform: rotate(27deg); } }
@keyframes loaderBeamR { from { transform: rotate(-13deg); } to { transform: rotate(-27deg); } }

/* --- logo : centré puis remonte --- */
.loader-logo {
    position: absolute; left: 50%; top: 50%;
    display: flex; flex-direction: column; align-items: center; gap: 1.4rem;
    transform: translate(-50%, -50%);
    transition: transform 1.1s var(--ease);
}
.loader.s-up .loader-logo { transform: translate(-50%, -50%) translateY(-32vh) scale(.6); }
.loader-sun {
    width: 70px; height: 70px; border-radius: 50%; background: var(--gold-grad);
    box-shadow: 0 0 0 0 rgba(217,182,118,.5); animation: loaderPulse 1.8s var(--ease) infinite;
}
@keyframes loaderPulse { 0% { box-shadow: 0 0 40px 0 rgba(217,182,118,.35); transform: scale(.9);} 50% { box-shadow: 0 0 80px 12px rgba(217,182,118,.55); transform: scale(1);} 100% { box-shadow: 0 0 40px 0 rgba(217,182,118,.35); transform: scale(.9);} }
.loader-name { display: flex; font-family: var(--serif); font-size: clamp(1.6rem,5vw,2.4rem); letter-spacing: .3em; color: var(--champagne); }
.loader-name span { opacity: 0; transform: translateY(14px); animation: loaderLetter .5s var(--ease) forwards; }
.loader-name .sp { width: .5em; animation: none; }
.loader-name span:nth-child(1){animation-delay:.15s}.loader-name span:nth-child(2){animation-delay:.21s}.loader-name span:nth-child(3){animation-delay:.27s}.loader-name span:nth-child(5){animation-delay:.39s}.loader-name span:nth-child(6){animation-delay:.45s}.loader-name span:nth-child(7){animation-delay:.51s}.loader-name span:nth-child(8){animation-delay:.57s}
@keyframes loaderLetter { to { opacity: 1; transform: none; } }

/* --- bloc « festival » : note Google + phrase --- */
.loader-festival {
    position: absolute; left: 50%; top: 50%; width: min(92vw, 720px);
    display: flex; flex-direction: column; align-items: center; gap: 1.8rem; text-align: center;
    opacity: 0; transform: translate(-50%, -50%) translateY(36px);
    transition: opacity .9s var(--ease) .15s, transform .9s var(--ease) .15s;
}
.loader.s-festival .loader-festival { opacity: 1; transform: translate(-50%, -50%) translateY(2vh); }

.loader-rating { display: flex; flex-direction: column; align-items: center; gap: .7rem; }
.loader-rating-num {
    font-family: var(--serif); font-weight: 300; font-size: clamp(2.8rem, 11vw, 5.2rem);
    line-height: .85; color: var(--champagne); text-shadow: 0 0 24px rgba(217,182,118,.28);
}
.loader-stars { display: inline-block; font-size: clamp(1.25rem, 4.4vw, 1.85rem); letter-spacing: .24em; line-height: 1; color: var(--gold); text-shadow: 0 0 12px rgba(217,182,118,.4); }
.loader-rating-meta { display: inline-flex; align-items: center; gap: .55rem; font-family: var(--sans); font-weight: 400; font-size: .82rem; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.loader-rating-meta .g-mark { width: 1.15em; height: 1.15em; }

/* --- phrase de rêve (glint doré + halo qui respire) --- */
.loader-tagline {
    position: relative; margin: 0; max-width: none; white-space: nowrap; text-align: center;
    font-family: var(--serif); font-style: italic; font-weight: 300;
    font-size: clamp(1.1rem, 4.6vw, 2.4rem); letter-spacing: .04em; line-height: 1.3;
    background: linear-gradient(100deg,
        var(--champagne) 0%, var(--champagne) 40%,
        #fff 47%, #fff8e3 50%, var(--gold) 53%,
        var(--champagne) 60%, var(--champagne) 100%);
    background-size: 260% 100%; background-position: 150% 0;
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: transparent;
    animation: loaderTaglineShine 3.6s ease-in-out 1s infinite, loaderTaglineGlow 3.6s ease-in-out 1.4s infinite;
}
@keyframes loaderTaglineShine { 0%, 24% { background-position: 150% 0; } 55%, 100% { background-position: -150% 0; } }
@keyframes loaderTaglineGlow { 0%, 100% { filter: drop-shadow(0 0 8px rgba(217,182,118,.3)); } 50% { filter: drop-shadow(0 0 26px rgba(217,182,118,.7)); } }

@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
    margin: 0;
    font-family: var(--sans);
    font-weight: 300;
    color: var(--ivory);
    background: var(--ink);
    line-height: 1.7;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}
body.locked { overflow: hidden; }

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
::selection { background: var(--gold); color: var(--ink); }

.wrap { width: min(100% - 2.6rem, var(--maxw)); margin-inline: auto; }

h1, h2, h3, h4 { font-family: var(--serif); font-weight: 400; line-height: 1.02; letter-spacing: -.015em; margin: 0; }
em { font-style: italic; }

.kicker {
    font-family: var(--sans); font-weight: 500; font-size: .74rem; letter-spacing: .34em;
    text-transform: uppercase; color: var(--gold); margin: 0 0 1.4rem;
}
.section-title { font-size: clamp(2.4rem, 6.5vw, 5rem); font-weight: 300; letter-spacing: -.03em; }
.section-title em { font-weight: 300; color: var(--gold-soft); }
.section-title.center { text-align: center; }

.skip-link { position: absolute; left: -999px; top: 0; z-index: 600; background: var(--gold); color: var(--ink); padding: .6rem 1rem; font-weight: 600; }
.skip-link:focus { left: 0; }

/* ---------- Boutons ---------- */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
    font-family: var(--sans); font-weight: 500; font-size: .82rem; letter-spacing: .14em; text-transform: uppercase;
    padding: 1.05rem 2rem; border-radius: 0; border: 1px solid transparent; cursor: pointer;
    transition: transform .5s var(--ease), background .4s var(--ease), color .4s var(--ease), border-color .4s var(--ease);
    position: relative; overflow: hidden;
}
.btn-gold { background: var(--gold-grad); color: var(--ink); }
.btn-gold::after {
    content: ""; position: absolute; inset: 0; background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,.45), transparent 70%);
    transform: translateX(-120%); transition: transform .8s var(--ease);
}
.btn-gold:hover::after { transform: translateX(120%); }
.btn-gold:hover { transform: translateY(-2px); }
.btn-line { background: transparent; color: var(--champagne); border-color: rgba(217,182,118,.4); }
.btn-line:hover { border-color: var(--gold); color: var(--gold-soft); }

/* ---------- Marque ---------- */
.brand { display: inline-flex; align-items: center; }
/* bloc « SUNBLUE / solarium » : les deux lignes partagent la même largeur,
   le filet doré du sous-titre s'ajuste donc tout seul au nom. */
.brand-lockup { display: inline-flex; flex-direction: column; align-items: stretch; gap: .34rem; }
.brand-name {
    font-family: var(--serif); font-size: 1.22rem; font-weight: 400; line-height: 1;
    text-transform: uppercase; letter-spacing: .22em;
    /* l'interlettrage ajoute un blanc après le dernier caractère : on le reprend */
    margin-right: -.22em;
    background: var(--gold-grad); -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: transparent;
}
.brand-sub {
    display: flex; align-items: center; gap: .5rem;
    font-family: var(--sans); font-weight: 400; font-size: .53rem; line-height: 1;
    text-transform: uppercase; color: var(--muted);
}
.brand-sub > span { letter-spacing: .42em; margin-right: -.42em; }
.brand-sub::before, .brand-sub::after { content: ""; flex: 1; height: 1px; background: rgba(217,182,118,.4); }

/* ====================== AMBIANCE ====================== */
.ambient { position: fixed; inset: 0; z-index: -2; overflow: hidden; pointer-events: none; }
.ambient-base {
    position: absolute; inset: 0;
    background:
        radial-gradient(140% 100% at 50% 120%, rgba(12,21,48,.55), transparent 60%),
        linear-gradient(180deg, var(--obsidian), var(--ink));
}
.ambient-sun {
    position: absolute; left: var(--sun-x); top: var(--sun-y); transform: translate(-50%,-50%);
    width: min(70vw, 620px); aspect-ratio: 1; border-radius: 50%;
    background: radial-gradient(circle at 50% 50%,
        hsl(calc(42deg - var(--warm) * 4deg) calc(60% + var(--warm) * 30%) calc(62% + var(--warm) * 6%)) 0%,
        rgba(217,150,80,.45) 26%,
        rgba(160,90,160,.18) 48%,
        transparent 66%);
    filter: blur(10px);
    opacity: calc(.55 + var(--warm) * .4);
    transition: opacity .6s linear;
}
.ambient-grain {
    position: absolute; inset: 0; opacity: .05; mix-blend-mode: overlay;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.ambient-vignette { position: absolute; inset: 0; background: radial-gradient(120% 90% at 50% 40%, transparent 55%, rgba(0,0,0,.65)); }

/* ====================== CURSEUR ====================== */
.cursor {
    position: fixed; top: 0; left: 0; width: 10px; height: 10px; border-radius: 50%;
    background: var(--gold); pointer-events: none; z-index: 900; mix-blend-mode: difference;
    transform: translate(-50%,-50%); transition: width .35s var(--ease), height .35s var(--ease), background .35s, opacity .3s;
    opacity: 0;
}
.cursor.visible { opacity: 1; }
.cursor.hover { width: 54px; height: 54px; background: rgba(217,182,118,.25); mix-blend-mode: normal; border: 1px solid var(--gold); }
.cursor.open { width: 84px; height: 84px; background: rgba(217,182,118,.16); border: 1px solid var(--gold); mix-blend-mode: normal; }
.cursor.open::after { content: "Ouvrir"; font-family: var(--sans); font-size: .6rem; letter-spacing: .15em; text-transform: uppercase; color: var(--gold-soft); }
@media (hover: none), (pointer: coarse) { .cursor { display: none; } }

/* ====================== EN-TÊTE ====================== */
.site-header { position: fixed; inset: 0 0 auto 0; z-index: 500; transition: background .4s var(--ease), backdrop-filter .4s, box-shadow .4s, padding .4s, transform .55s var(--ease), opacity .55s var(--ease); }
.site-header.scrolled { background: rgba(8,8,11,.7); backdrop-filter: blur(16px) saturate(1.1); box-shadow: 0 1px 0 rgba(217,182,118,.12); }
/* mode immersif : nav escamotée quand le couloir des cabines occupe l'écran */
.site-header.hidden { transform: translateY(-100%); opacity: 0; pointer-events: none; }
.header-inner { position: relative; display: flex; align-items: center; gap: 1.5rem; padding: 1.5rem 0; transition: padding .4s; }
.site-header.scrolled .header-inner { padding: 1rem 0; }
/* liens centrés dans l'en-tête (desktop) : marque à gauche, CTA + langues à droite */
.nav { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); margin: 0; display: flex; gap: 2rem; }
.header-cta { margin-left: auto; }
.nav a { font-family: var(--sans); font-weight: 400; font-size: .82rem; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); position: relative; transition: color .3s; }
.nav a::after { content: ""; position: absolute; left: 0; bottom: -7px; height: 1px; width: 0; background: var(--gold); transition: width .4s var(--ease); }
.nav a:hover { color: var(--champagne); } .nav a:hover::after { width: 100%; }
.header-cta { padding: .7rem 1.3rem; font-size: .76rem; }

.burger { display: none; background: none; border: 0; cursor: pointer; width: 44px; height: 44px; }
.burger span { display: block; width: 26px; height: 1.5px; background: var(--champagne); margin: 6px auto; transition: .35s var(--ease); }
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { transform: translateY(-7.5px) rotate(-45deg); }

.mobile-menu { display: flex; flex-direction: column; padding: 1rem 1.3rem 2rem; background: rgba(8,8,11,.97); backdrop-filter: blur(16px); border-top: 1px solid rgba(217,182,118,.12); }
.mobile-menu[hidden] { display: none; }
.mobile-menu a { padding: 1.1rem .2rem; font-family: var(--serif); font-size: 1.6rem; border-bottom: 1px solid rgba(255,255,255,.06); }
.mobile-menu .btn { margin-top: 1.4rem; }

/* ====================== HERO ====================== */
.hero { position: relative; min-height: 100svh; display: flex; flex-direction: column; justify-content: center; padding: 8rem 0 7rem; }
.hero-bg {
    position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none;
    -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 16%, #000 58%, transparent 92%);
            mask-image: linear-gradient(180deg, transparent 0%, #000 16%, #000 58%, transparent 92%);
}
.hero-bg img { width: 100%; height: 100%; object-fit: cover; object-position: center; opacity: .56; filter: saturate(.92); }
.hero-bg::after {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(90deg, rgba(5,5,6,.9) 0%, rgba(5,5,6,.55) 38%, rgba(5,5,6,.12) 70%, transparent 100%);
}
.hero-inner { position: relative; z-index: 2; }
.eyebrow { font-family: var(--sans); font-weight: 400; font-size: .76rem; letter-spacing: .34em; text-transform: uppercase; color: var(--gold); margin: 0 0 2rem; }
.hero-title { font-size: clamp(3.4rem, 14vw, 11rem); font-weight: 300; letter-spacing: -.04em; line-height: .92; margin: 0 0 2rem; }
.hero-title em { color: var(--gold-soft); font-style: italic; }
.line { display: block; overflow: hidden; }
.line > span { display: block; transform: translateY(110%); transition: transform 1s var(--ease); }
.is-revealed .line > span, .line.in > span { transform: none; }
.hero-lead { font-size: clamp(1.05rem, 2vw, 1.4rem); font-weight: 300; color: var(--champagne); max-width: 40ch; margin: 0 0 2.6rem; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 1rem; }
.hero-meta { position: relative; z-index: 2; display: flex; gap: clamp(1.5rem,5vw,4rem); margin-top: clamp(3rem,8vh,6rem); border-top: 1px solid rgba(217,182,118,.18); padding-top: 1.6rem; }
.hero-meta span { font-family: var(--sans); font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); display: flex; align-items: baseline; gap: .6rem; }
.hero-meta b { font-family: var(--serif); font-size: clamp(1.8rem,4vw,2.6rem); font-weight: 300; color: var(--champagne); letter-spacing: -.02em; }

.scroll-hint { position: fixed; right: clamp(.6rem, 1.4vw, 1.6rem); top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; align-items: center; gap: .8rem; z-index: 2; }
.scroll-hint span { writing-mode: vertical-rl; font-size: .68rem; letter-spacing: .26em; text-transform: uppercase; color: var(--muted); }
.scroll-hint i { width: 1px; height: 60px; background: linear-gradient(var(--gold), transparent); position: relative; overflow: hidden; }
.scroll-hint i::after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 30%; background: var(--gold-soft); animation: scrollDot 2s var(--ease) infinite; }
@keyframes scrollDot { 0% { transform: translateY(-100%);} 100% { transform: translateY(330%);} }

/* ====================== MANIFESTE ====================== */
.manifeste { padding: clamp(7rem,16vh,12rem) 0; }
.manifeste-text { font-family: var(--serif); font-weight: 300; font-size: clamp(1.7rem, 4.6vw, 3.6rem); line-height: 1.22; letter-spacing: -.02em; color: var(--ivory); max-width: 22ch; }
.manifeste-text em { color: var(--gold-soft); font-style: italic; }
.manifeste-text .line > span { transition-duration: 1.1s; }

/* ====================== CORRIDOR (CABINES) ====================== */
.corridor { padding: clamp(4rem,9vh,7rem) 0 clamp(5rem,10vh,8rem); overflow: hidden; }
.corridor-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 2rem; margin-bottom: 3rem; }
.corridor-tools { display: flex; flex-direction: column; align-items: flex-end; gap: 1.2rem; }
.corridor-filters { display: flex; flex-wrap: wrap; gap: .5rem; }
.chip { font-family: var(--sans); font-size: .76rem; letter-spacing: .14em; text-transform: uppercase; font-weight: 400; padding: .55rem 1.15rem; border-radius: 999px; color: var(--muted); background: transparent; border: 1px solid rgba(217,182,118,.25); cursor: pointer; transition: .35s var(--ease); }
.chip:hover { color: var(--champagne); border-color: var(--gold); }
.chip.is-active { background: var(--gold-grad); color: var(--ink); border-color: transparent; }
.corridor-arrows { display: flex; align-items: center; gap: 1rem; justify-content: center; margin-top: 1.6rem; }
.corridor-current { min-width: clamp(8rem, 22vw, 13rem); text-align: center; font-family: var(--serif); font-size: 1rem; font-weight: 400; color: var(--muted); letter-spacing: .02em; line-height: 1.2; }
.corridor-current b { font-weight: 400; color: var(--gold-soft); }
.arrow { width: 48px; height: 48px; border-radius: 50%; border: 1px solid rgba(217,182,118,.3); background: transparent; color: var(--champagne); font-size: 1.1rem; cursor: pointer; transition: .35s var(--ease); }
.arrow:hover { background: var(--gold); color: var(--ink); border-color: transparent; }
.arrow:disabled { opacity: .3; cursor: default; }

/* fondu adaptatif sur les bords : montre qu'il reste des cabines à découvrir */
@property --fade-l { syntax: "<length>"; inherits: false; initial-value: 0px; }
@property --fade-r { syntax: "<length>"; inherits: false; initial-value: 0px; }
.corridor-track {
    --card-w: clamp(260px, 28vw, 360px);
    display: flex; gap: clamp(1rem,2vw,1.6rem); overflow-x: auto; scroll-snap-type: x mandatory;
    /* rembourrage = demi-écran moins demi-carte : la 1re et la dernière cabine
       peuvent ainsi venir se centrer (et s'illuminer) en défilant aux extrémités */
    padding: 1.5rem max(1.3rem, calc(50% - var(--card-w) / 2)) 2rem; margin: 0;
    scrollbar-width: none; -ms-overflow-style: none;
    cursor: grab; /* appui maintenu = défilement */
    --fade-l: 0px; --fade-r: 72px;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 var(--fade-l), #000 calc(100% - var(--fade-r)), transparent 100%);
            mask-image: linear-gradient(90deg, transparent 0, #000 var(--fade-l), #000 calc(100% - var(--fade-r)), transparent 100%);
    transition: --fade-l .3s linear, --fade-r .3s linear;
}
.corridor-track::-webkit-scrollbar { display: none; }
.corridor-track:focus-visible { outline: 1px solid var(--gold); outline-offset: 4px; }
.corridor-track.is-dragging { cursor: grabbing; scroll-behavior: auto; }
.corridor-track.is-dragging, .corridor-track.no-snap { scroll-snap-type: none; }
.corridor-track.is-dragging .door { pointer-events: none; } /* pas de hover/clic pendant le glisser */
/* peu de cabines (après filtre) : on centre le groupe au lieu de l'aligner à gauche */
.corridor-track.is-centered { justify-content: center; padding-inline: 1.3rem; }

.door {
    position: relative; flex: 0 0 auto; width: var(--card-w); aspect-ratio: 3 / 4.4;
    scroll-snap-align: center; cursor: pointer; text-align: left; color: var(--ivory);
    border: 1px solid rgba(217,182,118,.16); border-radius: 4px; overflow: hidden;
    background:
        linear-gradient(180deg, rgba(20,16,12,.2), rgba(8,7,6,.85)),
        linear-gradient(150deg, #1b1712, #0a0908 60%);
    padding: 1.6rem 1.5rem;
    transition: transform .6s var(--ease), border-color .6s var(--ease), box-shadow .6s var(--ease), opacity .5s var(--ease);
    display: flex; flex-direction: column;
}
.door.is-hidden { display: none; }
.door:focus { outline: none; }
.door:focus-visible { outline: 1px solid var(--gold); outline-offset: 4px; }

/* --- Mode ciblé : la cabine centrée est agrandie, les autres en retrait --- */
.door.is-focused { transform: scale(1.07); border-color: rgba(217,182,118,.5); box-shadow: 0 44px 90px -45px rgba(217,150,80,.6); z-index: 5; }
.door.is-focused .door-photo { opacity: .5; }
.door.is-focused .door-num { color: var(--gold-soft); }
.door.is-focused::before { border-color: rgba(217,182,118,.4); }
.door.is-focused:hover { transform: scale(1.07) translateY(-8px); }
.corridor-track.has-focus .door:not(.is-focused) { opacity: .68; }

.door::before { /* moulure */
    content: ""; position: absolute; inset: 14px; border: 1px solid rgba(217,182,118,.14); border-radius: 2px; pointer-events: none; transition: border-color .6s var(--ease);
}
.door-glow { position: absolute; inset: 0; opacity: 0; transition: opacity .6s var(--ease); background: radial-gradient(120% 80% at 50% -10%, rgba(217,150,80,.45), transparent 55%); }
.door:hover { transform: translateY(-10px); border-color: rgba(217,182,118,.5); box-shadow: 0 40px 80px -40px rgba(217,150,80,.5); }
.door:hover .door-glow { opacity: 1; }
.door:hover::before { border-color: rgba(217,182,118,.4); }

.door-cat { font-family: var(--sans); font-size: .66rem; letter-spacing: .26em; text-transform: uppercase; color: var(--gold); position: relative; z-index: 2; }
.door-num { font-family: var(--serif); font-weight: 300; font-size: clamp(3.6rem, 7vw, 5.4rem); line-height: 1; margin-top: .6rem; color: var(--champagne); position: relative; z-index: 2; transition: color .5s; }
.door:hover .door-num { color: var(--gold-soft); }
.door-num-icon { display: block; width: clamp(3rem, 6vw, 4.4rem); height: auto; margin-top: .9rem; color: inherit; }
.door-handle { position: absolute; top: 50%; right: 20px; width: 4px; height: 34px; border-radius: 3px; background: linear-gradient(var(--gold-soft), var(--gold-deep)); box-shadow: 0 0 14px rgba(217,182,118,.4); z-index: 2; opacity: .85; }
.door-foot { margin-top: auto; position: relative; z-index: 2; }
.door-modele { display: block; font-family: var(--serif); font-size: 1.2rem; font-weight: 400; }
.door-tag { display: block; font-family: var(--sans); font-size: .76rem; color: var(--muted); margin-top: .15rem; }
.door-price { display: block; font-family: var(--sans); font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-top: .9rem; padding-top: .9rem; border-top: 1px solid rgba(217,182,118,.16); }
.door-price b { color: var(--champagne); font-weight: 500; }
.door-open { position: absolute; left: 1.5rem; bottom: 1.5rem; opacity: 0; transform: translateY(8px); transition: .5s var(--ease); font-size: .7rem; letter-spacing: .2em; text-transform: uppercase; color: var(--gold); z-index: 3; display: none; }

.corridor-progress { width: min(100% - 2.6rem, 320px); height: 1px; margin: 1.5rem auto 0; background: rgba(217,182,118,.16); }
.corridor-progress i { display: block; height: 100%; width: 20%; background: var(--gold); transition: width .15s linear, margin-left .15s linear; }

/* ====================== COMMENT ÇA MARCHE ====================== */
.steps { padding: clamp(6rem,12vh,10rem) 0 clamp(3rem,6vh,5rem); }
.step-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3,1fr); gap: clamp(1.6rem,4vw,3.2rem); max-width: 1000px; margin-inline: auto; }
.step-list li { text-align: center; }
.step-num { display: inline-grid; place-content: center; width: 76px; height: 76px; border-radius: 50%; border: 1px solid rgba(217,182,118,.4); font-family: var(--serif); font-weight: 300; font-size: 2rem; color: var(--gold-soft); margin-bottom: 1.5rem; transition: border-color .4s var(--ease), box-shadow .4s var(--ease); }
.step-list li:hover .step-num { border-color: var(--gold); box-shadow: 0 0 30px rgba(217,182,118,.25); }
.step-list h3 { font-size: 1.5rem; font-weight: 300; margin-bottom: .7rem; }
.step-list p { color: var(--muted); margin: 0; font-size: .98rem; }

/* ====================== PHOTOS CABINES (portes + modale) ====================== */
.door-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .5; filter: saturate(1.1) contrast(1.04); transition: opacity .6s var(--ease), transform .9s var(--ease); z-index: 0; }
/* voile allégé en haut pour laisser voir la machine, toujours dense en bas
   où se posent le modèle, le tag et le prix */
.door-shade { position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(8,7,6,.12) 0%, rgba(8,7,6,.5) 58%, rgba(8,7,6,.93) 100%); }
.door:hover .door-photo { opacity: .82; transform: scale(1.07); }
.door-glow { z-index: 2; }
.door-cat, .door-num, .door-handle, .door-foot, .door-open { z-index: 3; }
.door::before { z-index: 4; }

.modal-photo { margin: -3rem -3rem 1.8rem; height: 220px; overflow: hidden; border-bottom: 1px solid rgba(217,182,118,.22); position: relative; }
.modal-photo[hidden] { display: none; }
.modal-photo img { width: 100%; height: 100%; object-fit: cover; }
.modal-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, #14110c); }
/* bandeau constructeur : on respecte le 5/2 d'origine pour ne rien rogner */
.modal-photo.is-banniere { height: auto; aspect-ratio: 5 / 2; }
.modal-photo.is-banniere::after { background: linear-gradient(180deg, transparent 62%, #14110c); }

/* ====================== TARIFS ====================== */
.tarifs { padding: clamp(6rem,12vh,10rem) 0; }
.block-head { max-width: 640px; margin: 0 auto 4rem; text-align: center; }
.block-intro { color: var(--muted); font-size: 1.05rem; margin: 1.2rem 0 0; }
.tarif-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(248px,1fr)); gap: 1.4rem; align-items: stretch; max-width: 1340px; margin-inline: auto; }
.tarif-card { position: relative; padding: 2.4rem 2rem; border: 1px solid rgba(217,182,118,.18); border-radius: 4px; background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.005)); transition: transform .5s var(--ease), border-color .5s; }
.tarif-card:hover { transform: translateY(-6px); border-color: rgba(217,182,118,.4); }
.tarif-card.is-featured { background: linear-gradient(180deg, rgba(217,150,80,.12), rgba(217,150,80,.02)); border-color: rgba(217,182,118,.5); }
.tarif-flag { position: absolute; top: -.75rem; left: 2rem; font-family: var(--sans); font-size: .66rem; letter-spacing: .2em; text-transform: uppercase; padding: .35rem .85rem; color: var(--ink); background: var(--gold-grad); }
.tarif-photo { margin: -2.4rem -2rem 1.6rem; height: 210px; overflow: hidden; border-radius: 4px 4px 0 0; background: #0a0908; }
.tarif-photo img { width: 100%; height: 100%; object-fit: cover; object-position: center 40%; display: block; }
.tarif-card h3 { font-size: 2rem; font-weight: 300; }
.tarif-sub { color: var(--muted); font-size: .88rem; margin: .4rem 0 1.4rem; }
.tarif-from { font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin: 0 0 1.4rem; }
.tarif-from b { font-family: var(--serif); font-size: 2.2rem; font-weight: 300; color: var(--gold-soft); display: block; letter-spacing: -.02em; }
.tarif-list { list-style: none; margin: 0; padding: 0; }
.tarif-list li { display: flex; justify-content: space-between; padding: .6rem 0; border-bottom: 1px solid rgba(255,255,255,.07); font-size: .95rem; }
.tarif-list li:last-child { border-bottom: 0; }
.tarif-list span { color: var(--muted); }
.tarif-list b { font-weight: 500; color: var(--champagne); }
.tarif-note { max-width: 600px; margin: 3rem auto 0; text-align: center; color: var(--muted); font-size: .95rem; }
.tarif-note b { color: var(--gold-soft); }

/* ====================== EXPÉRIENCE ====================== */
.experience { padding: clamp(6rem,12vh,10rem) 0 0; }
.exp-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit,minmax(250px,1fr)); gap: 2.5rem; max-width: 1000px; margin-inline: auto; }
.exp-list li { position: relative; padding-top: 2rem; border-top: 1px solid rgba(217,182,118,.2); }
.exp-ico { display: block; color: var(--gold); line-height: 0; }
.exp-ico svg { width: 30px; height: 30px; stroke: currentColor; fill: none; }
.exp-list h3 { font-size: 1.6rem; font-weight: 300; margin: 1rem 0 .6rem; }
.exp-list p { color: var(--muted); margin: 0; font-size: .98rem; }
.ribbon { margin: clamp(4rem,8vh,7rem) 0 0; overflow: hidden; }
.ribbon img { width: 100%; height: clamp(320px,46vw,600px); object-fit: cover; filter: saturate(1.05) brightness(.92); -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); }

/* ====================== ÉTOILES (composant partagé) ====================== */
.stars {
    display: inline-block; position: relative; white-space: nowrap;
    font-size: .95rem; letter-spacing: .14em; line-height: 1; color: rgba(217,182,118,.24);
}
.stars::before {
    content: "★★★★★"; position: absolute; left: 0; top: 0; width: var(--rate, 100%);
    overflow: hidden; color: var(--gold);
    text-shadow: 0 0 12px rgba(217,182,118,.4);
}

/* ====================== BADGE DE CONFIANCE (HERO) ====================== */
.trust-badge {
    display: inline-flex; align-items: center; gap: .85rem; margin-top: 2.6rem;
    padding: .7rem 1.3rem .7rem .8rem; border: 1px solid rgba(217,182,118,.32); border-radius: 999px;
    background: linear-gradient(120deg, rgba(217,182,118,.12), rgba(217,182,118,.02));
    -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
    position: relative; overflow: hidden; width: fit-content;
    transition: transform .5s var(--ease), border-color .5s var(--ease), box-shadow .5s var(--ease);
}
.trust-badge::after {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(115deg, transparent 35%, rgba(255,255,255,.18), transparent 65%);
    transform: translateX(-130%); transition: transform 1s var(--ease);
}
.trust-badge:hover { transform: translateY(-2px); border-color: var(--gold); box-shadow: 0 22px 50px -32px rgba(217,150,80,.7); }
.trust-badge:hover::after { transform: translateX(130%); }
.trust-badge-g {
    width: 36px; height: 36px; border-radius: 50%; flex: none; background: #fff;
    display: grid; place-content: center;
    box-shadow: inset 0 0 0 1px rgba(217,182,118,.35), 0 8px 20px -8px rgba(0,0,0,.7);
}
.trust-badge-g .g-mark { width: 19px; height: 19px; }
.trust-badge-main { display: flex; flex-direction: column; gap: .22rem; line-height: 1; }
.trust-badge-stars { display: flex; align-items: center; gap: .55rem; }
.trust-badge-stars b { font-family: var(--serif); font-weight: 400; font-size: 1.1rem; color: var(--champagne); letter-spacing: -.01em; }
.trust-badge-label { font-family: var(--sans); font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.trust-badge-label span { color: var(--gold-soft); }

/* ====================== AVIS — CARROUSEL ====================== */
.avis { padding: clamp(6rem,12vh,10rem) 0; overflow: hidden; }
.avis-head { text-align: center; max-width: 680px; margin-inline: auto; }
.avis-rating { display: inline-flex; flex-direction: column; align-items: center; gap: .55rem; margin-top: 2.4rem; }
.avis-rating .stars { font-size: 1.45rem; letter-spacing: .2em; }
.avis-score { display: flex; align-items: baseline; gap: .45rem; margin: .2rem 0 0; font-family: var(--serif); }
.avis-score b { font-size: 2.8rem; font-weight: 300; color: var(--gold-soft); letter-spacing: -.02em; }
.avis-score span { font-size: 1.05rem; color: var(--muted); }
.avis-source { display: inline-flex; align-items: center; gap: .5rem; margin: 0; font-family: var(--sans); font-size: .84rem; letter-spacing: .04em; color: var(--muted); }
.avis-source .g-mark { width: 16px; height: 16px; flex: none; }
.avis-rating .btn { margin-top: .9rem; }

.avis-marquee {
    margin-top: clamp(3rem,7vh,5.5rem); position: relative;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.avis-track { display: flex; width: max-content; animation: avisScroll 70s linear infinite; }
.avis-marquee:hover .avis-track, .avis-track:focus-within { animation-play-state: paused; }
@keyframes avisScroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }

.avis-card {
    flex: 0 0 auto; width: clamp(280px, 30vw, 360px); margin-right: 1.4rem;
    padding: 2.2rem 2rem; border: 1px solid rgba(217,182,118,.16); border-radius: 6px;
    background: linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.006));
    position: relative; display: flex; flex-direction: column;
    transition: transform .5s var(--ease), border-color .5s var(--ease), box-shadow .5s var(--ease);
}
.avis-card:hover { transform: translateY(-5px); border-color: rgba(217,182,118,.42); box-shadow: 0 40px 80px -50px rgba(217,150,80,.5); }
.avis-card-quote { position: absolute; top: .2rem; right: 1.3rem; font-family: var(--serif); font-style: italic; font-size: 4.4rem; line-height: 1; color: rgba(217,182,118,.15); pointer-events: none; }
.avis-card .stars { margin-bottom: 1.1rem; }
.avis-card blockquote { margin: 0 0 1.7rem; flex: 1; font-family: var(--serif); font-weight: 300; font-size: 1.08rem; line-height: 1.5; letter-spacing: -.005em; color: var(--ivory); }
.avis-card figcaption { display: flex; align-items: center; gap: .9rem; }
.avis-avatar {
    width: 44px; height: 44px; border-radius: 50%; flex: none; display: grid; place-content: center;
    font-family: var(--serif); font-size: .98rem; color: var(--ink); background: var(--gold-grad);
    box-shadow: 0 0 18px rgba(217,182,118,.3); letter-spacing: .02em;
}
.avis-id { display: flex; flex-direction: column; line-height: 1.3; min-width: 0; }
.avis-id b { font-family: var(--sans); font-weight: 500; font-size: .94rem; color: var(--champagne); }
.avis-src { display: inline-flex; align-items: center; gap: .4rem; font-size: .74rem; color: var(--muted); }
.avis-src .g-mark { width: 13px; height: 13px; flex: none; }

@media (prefers-reduced-motion: reduce) {
    .avis-track { animation: none; }
    .avis-marquee { overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none; }
    .avis-marquee::-webkit-scrollbar { display: none; }
    .avis-card--dup { display: none; }
}

/* ====================== INFOS ====================== */
.infos { padding: clamp(6rem,12vh,10rem) 0; }
.infos-grid { display: grid; grid-template-columns: 1fr 1.05fr; gap: clamp(2rem,5vw,4.5rem); align-items: center; }
.infos-col .section-title { margin-bottom: 2.2rem; }
.hours { list-style: none; margin: 0 0 1rem; padding: 0; }
.hours li { display: flex; justify-content: space-between; align-items: baseline; padding: 1rem 0; border-bottom: 1px solid rgba(217,182,118,.16); }
.hours span { color: var(--muted); font-size: .92rem; letter-spacing: .04em; }
.hours b { font-family: var(--serif); font-size: 1.4rem; font-weight: 300; }
.hours .closed { color: var(--gold-deep); }
.hours-note { color: var(--gold-soft); font-size: 1.45rem; font-weight: 700; line-height: 1.35; margin-top: 1.3rem; }
.contact-block { margin-top: 2.2rem; display: grid; gap: .9rem; }
.contact-block a { font-family: var(--sans); color: var(--champagne); font-size: 1rem; width: fit-content; position: relative; }
.contact-block a::after { content: ""; position: absolute; left: 0; bottom: -3px; width: 0; height: 1px; background: var(--gold); transition: width .4s var(--ease); }
.contact-block a:hover { color: var(--gold-soft); } .contact-block a:hover::after { width: 100%; }
.infos-map { position: relative; border: 1px solid rgba(217,182,118,.22); border-radius: 6px; overflow: hidden; box-shadow: 0 40px 90px -50px rgba(0,0,0,.85); }
.infos-map iframe { width: 100%; height: 460px; border: 0; display: block; filter: grayscale(.5) invert(.92) hue-rotate(185deg) contrast(.9) brightness(.96) sepia(.18) saturate(.92); }
/* voile pour fondre la carte dans l'ambiance obsidienne + or (halo or, teinte
   minuit, dégradé bas et vignette) — sans bloquer l'interaction avec la carte. */
.infos-map::after {
    content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
    background:
        radial-gradient(130% 120% at 12% 8%, rgba(217,182,118,.16), transparent 42%),
        radial-gradient(140% 130% at 100% 100%, rgba(12,21,48,.45), transparent 55%),
        linear-gradient(0deg, rgba(5,5,6,.5), transparent 30%);
    box-shadow: inset 0 0 60px 8px rgba(5,5,6,.55), inset 0 0 0 1px rgba(217,182,118,.08);
}

/* ====================== AVERTISSEMENT ====================== */
.warning { padding: 2.6rem 0; border-top: 1px solid rgba(217,182,118,.1); }
.warning p { margin: 0; font-size: .78rem; line-height: 1.7; color: var(--muted-2); max-width: 95ch; }
.warning b { color: var(--gold-deep); }

/* ====================== PIED DE PAGE ====================== */
.site-footer { padding: clamp(4rem,8vh,7rem) 0 3rem; border-top: 1px solid rgba(217,182,118,.12); background: linear-gradient(180deg, transparent, rgba(12,21,48,.3)); }
.footer-top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 2rem; padding-bottom: clamp(3rem,6vh,5rem); border-bottom: 1px solid rgba(217,182,118,.12); }
.footer-claim { font-family: var(--serif); font-size: clamp(2rem,5vw,3.4rem); font-weight: 300; line-height: 1.05; margin: 0; }
.footer-claim em { color: var(--gold-soft); font-style: italic; }
.footer-bottom { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.5rem; padding-top: 2.5rem; }
.footer-brand { display: flex; align-items: center; gap: .7rem; }
.footer-nav { display: flex; flex-wrap: wrap; gap: 1.6rem; }
.footer-nav a, .linklike { font-family: var(--sans); color: var(--muted); font-size: .82rem; letter-spacing: .12em; text-transform: uppercase; transition: color .3s; }
.footer-nav a:hover, .linklike:hover { color: var(--gold-soft); }
.linklike { background: none; border: 0; cursor: pointer; padding: 0; }
.footer-copy { width: 100%; color: var(--muted-2); font-size: .78rem; letter-spacing: .06em; margin: 1rem 0 0; }

/* ====================== MODALES ====================== */
.modal {
    position: fixed; inset: 0; z-index: 700; display: flex; align-items: center; justify-content: center;
    padding: max(1.3rem, env(safe-area-inset-top)) 1.3rem max(1.3rem, env(safe-area-inset-bottom));
}
.modal[hidden] { display: none; }
.modal-backdrop { position: absolute; inset: 0; background: rgba(3,3,5,.8); backdrop-filter: blur(10px); animation: fade .4s var(--ease); }
/* pas d'animation d'entrée par défaut : sinon, à la fin du morph, retirer
   morph-in la réarmerait et la modale "re-clignoterait". L'entrée par défaut
   (modales sans morph : mentions) est portée par la classe .appear ci-dessous. */
/* le panneau ne défile pas lui-même : c'est .modal-scroll qui défile, pour que
   la croix de fermeture reste ancrée en haut à droite du cadre visible.
   dvh (et non vh) pour que la barre d'URL mobile ne rogne pas le haut du panneau. */
.modal-panel { position: relative; display: flex; flex-direction: column; width: min(580px,100%); max-height: 88vh; max-height: min(88vh, 100dvh - 2.6rem); overflow: hidden; border: 1px solid rgba(217,182,118,.3); border-radius: 4px; background: linear-gradient(165deg, #14110c, #0a0a0d); box-shadow: 0 60px 120px -40px rgba(0,0,0,.9); }
.modal-scroll { overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; padding: 3rem; }
.modal-panel.appear { animation: modalIn .55s var(--ease); }
@keyframes fade { from { opacity: 0; } }
@keyframes modalIn { from { opacity: 0; transform: translateY(30px) scale(.97); } }

/* --- Animation « la carte s'ouvre » : le panneau morphe depuis la carte --- */
.modal-panel.morph-in, .modal-panel.morph-out { will-change: transform, opacity; }
/* le contenu se révèle juste après que la « porte » commence à s'ouvrir */
.modal-panel.morph-in > .modal-close, .modal-panel.morph-in .modal-scroll > * { animation: modalContent .45s var(--ease) .12s both; }
@keyframes modalContent { from { opacity: 0; transform: translateY(10px); } }
/* fermeture : le fond se dissout pendant que le panneau se replie sur la carte */
.modal.is-closing .modal-backdrop { opacity: 0; transition: opacity .4s var(--ease); }
/* la croix flotte au-dessus du contenu qui défile : fond opaque pour rester lisible */
.modal-close { position: absolute; top: 1.1rem; right: 1.1rem; z-index: 3; width: 42px; height: 42px; border-radius: 50%; background: rgba(12,10,8,.72); backdrop-filter: blur(8px); border: 1px solid rgba(217,182,118,.3); color: var(--champagne); font-size: 1.4rem; line-height: 1; cursor: pointer; transition: .35s var(--ease); }
.modal-close:hover { background: var(--gold); color: var(--ink); transform: rotate(90deg); }
.modal-head { display: flex; align-items: baseline; gap: 1rem; }
.modal-num { font-family: var(--serif); font-size: 4rem; font-weight: 300; color: var(--gold-soft); line-height: 1; }
.modal-cat { font-family: var(--sans); font-size: .7rem; letter-spacing: .24em; text-transform: uppercase; color: var(--gold); }
.modal-panel h3 { font-size: 2rem; font-weight: 300; margin: 1rem 0 1.2rem; }
.modal-desc { color: var(--champagne); font-weight: 300; margin: 0 0 1.8rem; }
.modal-specs { list-style: none; margin: 0 0 1.8rem; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: .7rem; }
.modal-specs li { font-size: .9rem; color: var(--ivory); padding-left: 1.5rem; position: relative; }
.modal-specs li::before { content: "✦"; position: absolute; left: 0; color: var(--gold); }
.modal-prix { border: 1px solid rgba(217,182,118,.18); border-radius: 4px; padding: 1.3rem 1.5rem; margin-bottom: 1.8rem; background: rgba(0,0,0,.25); }
.modal-prix-label { font-family: var(--sans); font-size: .76rem; letter-spacing: .14em; text-transform: uppercase; color: var(--gold); margin: 0 0 .9rem; }
.modal-prix-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit,minmax(170px,1fr)); gap: .55rem 1.8rem; }
.modal-prix-list li { display: flex; justify-content: space-between; gap: 1.6rem; font-size: .9rem; border-bottom: 1px solid rgba(255,255,255,.08); padding-bottom: .35rem; }
.modal-prix-list span { color: var(--muted); }
.modal-prix-list b { color: var(--champagne); font-weight: 500; }
.modal-cta { width: 100%; }
.modal-textonly h4 { font-family: var(--serif); color: var(--gold-soft); margin: 1.5rem 0 .3rem; font-size: 1.15rem; font-weight: 400; }
.modal-textonly p { color: var(--muted); font-size: .9rem; margin: 0; }
.modal-textonly a { color: var(--gold); text-decoration: underline; }

/* ====================== CONSENTEMENT ====================== */
.consent { position: fixed; inset: 0; z-index: 800; display: flex; align-items: center; justify-content: center; padding: 1.3rem; background: rgba(3,3,5,.92); backdrop-filter: blur(14px); }
.consent[hidden] { display: none; }
.consent-card { width: min(460px,100%); text-align: center; padding: 3rem 2.5rem; border: 1px solid rgba(217,182,118,.3); border-radius: 4px; background: linear-gradient(165deg, #14110c, #0a0a0d); animation: modalIn .6s var(--ease); }
.consent-sun { width: 60px; height: 60px; border-radius: 50%; background: var(--gold-grad); margin: 0 auto 1.5rem; box-shadow: 0 0 50px rgba(217,182,118,.6); display: block; }
.consent-card h2 { font-size: 2rem; font-weight: 300; margin-bottom: 1.1rem; }
.consent-card p { color: var(--muted); font-size: .95rem; margin: 0 0 2rem; }
.consent-card .btn { width: 100%; }

/* ====================== REVEALS ====================== */
[data-rise] { opacity: 0; transform: translateY(34px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
[data-rise].in { opacity: 1; transform: none; }
[data-rise].in:nth-child(2) { transition-delay: .06s; }
[data-rise].in:nth-child(3) { transition-delay: .12s; }
[data-rise].in:nth-child(4) { transition-delay: .18s; }
@media (prefers-reduced-motion: reduce) {
    [data-rise] { opacity: 1; transform: none; }
    .line > span { transform: none; }
    .loader { display: none; }
}

/* ====================== RESPONSIVE ====================== */
/* --- Hero : adaptation par paliers (le titre plafonnait à 11rem dès ~1257px,
   d'où un hero rogné sur les portables qui sont larges mais peu hauts).
   Les très grands moniteurs (2xl, ≥1537px) gardent la taille pleine. --- */

/* xl : ~1281–1536px */
@media (min-width: 1281px) and (max-width: 1536px) {
    .hero-title { font-size: 7.4rem; }
    .hero-lead { font-size: 1.25rem; }
}
/* lg : ~981–1280px */
@media (min-width: 981px) and (max-width: 1280px) {
    .hero-title { font-size: clamp(4.8rem, 9vw, 6.4rem); }
    .hero-lead { font-size: 1.18rem; }
    /* nav centrée resserrée pour ne pas chevaucher marque / CTA sur desktop étroit */
    .nav { gap: 1.15rem; }
    .nav a { font-size: .74rem; letter-spacing: .1em; }
    .header-cta { padding: .6rem 1rem; font-size: .72rem; }
}

/* Écrans peu hauts (portables) : on compacte le rythme vertical pour que tout
   le hero tienne dans la fenêtre sans être coupé. Le titre suit alors la
   hauteur disponible. Cumulé aux paliers de largeur ci-dessus. */
@media (min-width: 981px) and (max-height: 920px) {
    .hero { padding-top: 6.5rem; padding-bottom: 4rem; }
    .eyebrow { margin-bottom: 1.2rem; }
    .hero-title { font-size: min(7rem, 8.4vh + 2.2vw); margin-bottom: 1.3rem; }
    .hero-lead { margin-bottom: 1.7rem; }
    .trust-badge { margin-top: 1.5rem; }
    .hero-meta { margin-top: clamp(1.4rem, 3.5vh, 2.6rem); padding-top: 1.1rem; }
}
@media (min-width: 981px) and (max-height: 760px) {
    .hero { padding-top: 6rem; padding-bottom: 3rem; }
    .hero-title { font-size: min(5.4rem, 7.4vh + 2.2vw); margin-bottom: 1.1rem; }
    .hero-lead { font-size: 1.08rem; margin-bottom: 1.4rem; }
    .hero-meta { margin-top: 1.3rem; }
}

/* === DESKTOP : chaque section contenue dans l'écran (compactage sans rognage) ===
   On plafonne les médias en hauteur d'écran et on resserre le rythme vertical
   sur les écrans peu hauts. Le scroll reste libre : rien n'est jamais coupé. */
@media (min-width: 981px) {
    .ribbon img       { height: clamp(320px, 44vh, 600px); }
    .infos-map iframe { height: clamp(320px, 52vh, 460px); }
    .corridor-track   { --card-w: clamp(250px, 25vw, 330px); }
}

/* desktop peu haut (~portables, 1366×768 / 1440×900…) */
@media (min-width: 981px) and (max-height: 900px) {
    .section-title    { font-size: clamp(2rem, 5vw, 3.4rem); }
    .manifeste        { padding: clamp(3rem, 9vh, 6rem) 0; }
    .manifeste-text   { font-size: clamp(1.6rem, 3.6vw, 2.8rem); }
    .corridor         { padding: clamp(2.5rem, 6vh, 5rem) 0; }
    .corridor-head    { margin-bottom: clamp(1.4rem, 4vh, 2.4rem); }
    .steps            { padding: clamp(3rem, 8vh, 6rem) 0 clamp(2rem, 4vh, 3rem); }
    .tarifs, .infos   { padding: clamp(3rem, 8vh, 6rem) 0; }
    .experience       { padding: clamp(3rem, 8vh, 6rem) 0 0; }
    .avis             { padding: clamp(3rem, 8vh, 6rem) 0; }
    .block-head       { margin-bottom: clamp(1.6rem, 4vh, 3rem); }
    .step-num         { width: 64px; height: 64px; font-size: 1.7rem; margin-bottom: 1rem; }
    .ribbon           { margin-top: clamp(2rem, 5vh, 4rem); }
    .ribbon img       { height: clamp(280px, 38vh, 480px); }
    .infos-map iframe { height: clamp(300px, 46vh, 420px); }
    .avis-marquee     { margin-top: clamp(2rem, 5vh, 3.5rem); }
    .avis-rating      { margin-top: 1.4rem; }
    /* tarifs : grille dense, on resserre cartes et lignes de prix */
    .tarif-card       { padding: 1.8rem 1.6rem; }
    .tarif-card h3    { font-size: 1.8rem; }
    .tarif-sub        { margin: .3rem 0 1rem; }
    .tarif-from       { margin-bottom: 1rem; }
    .tarif-from b     { font-size: 1.9rem; }
    .tarif-list li    { padding: .45rem 0; }
    .tarif-note       { margin-top: 2rem; }
    .corridor-track   { --card-w: clamp(230px, 23vw, 290px); }
}

/* desktop très peu haut (~768px et moins) */
@media (min-width: 981px) and (max-height: 760px) {
    .tarif-list li    { padding: .34rem 0; font-size: .9rem; }
    .tarif-card       { padding: 1.5rem 1.4rem; }
    .corridor-track   { --card-w: clamp(205px, 21vw, 260px); }
    .ribbon img       { height: clamp(240px, 32vh, 400px); }
    .infos-map iframe { height: clamp(280px, 42vh, 380px); }
    .exp-list         { gap: 1.6rem; }
}

/* lg → xl (jusqu'à 2xl, <1537px) : on déplace le badge avis Google à droite
   du hero pour occuper l'espace libre à côté du titre/CTA. .hero-inner est
   déjà position:relative. */
@media (min-width: 981px) and (max-width: 1536px) {
    .trust-badge { position: absolute; right: 0; bottom: 0; margin-top: 0; }
}

@media (max-width: 980px) {
    .nav, .header-cta { display: none; }
    /* le .header-cta (qui portait le margin-left:auto) disparaît : le burger reprend
       le rôle de dernier élément poussé à droite de l'en-tête */
    .burger { display: block; margin-left: auto; margin-right: -9px; }
    .infos-grid { grid-template-columns: 1fr; gap: 2.5rem; }
}
@media (max-width: 640px) {
    .corridor-head { align-items: flex-start; }
    .corridor-tools { align-items: flex-start; width: 100%; }
    .corridor-arrows { display: none; }
    .corridor-track { --card-w: min(72vw, 300px); }
    .hero-meta { flex-wrap: wrap; gap: 1.4rem 2.5rem; }
    .modal-scroll { padding: 2.2rem 1.5rem; }
    .modal-photo { margin: -2.2rem -1.5rem 1.6rem; height: 180px; }
    .modal-close { top: .75rem; right: .75rem; width: 40px; height: 40px; }
    .modal-specs { grid-template-columns: 1fr; }
    .footer-top { flex-direction: column; align-items: flex-start; }
    .step-list { grid-template-columns: 1fr; gap: 2.4rem; }
    .avis-card { width: 80vw; max-width: 340px; padding: 1.9rem 1.6rem; }
    .trust-badge { margin-top: 2.2rem; }
}

/* ====================== RÉSEAUX SOCIAUX ====================== */
.social-band { padding: clamp(3.5rem, 9vh, 6rem) 0; text-align: center; position: relative; }
.social-band::before {
    content: ""; position: absolute; left: 50%; top: 0; transform: translateX(-50%);
    width: min(92%, var(--maxw)); height: 1px;
    background: linear-gradient(90deg, transparent, rgba(217,182,118,.4), transparent);
}
.social-band .section-title { margin-top: .4rem; }
.social-links { display: flex; justify-content: center; flex-wrap: wrap; gap: clamp(1.8rem, 6vw, 3.6rem); margin-top: clamp(2rem, 5vh, 3rem); }
.social-item { display: flex; flex-direction: column; align-items: center; gap: .85rem; }
.social-ico {
    width: clamp(60px, 14vw, 76px); height: clamp(60px, 14vw, 76px); border-radius: 50%;
    background: var(--gold-grad); color: var(--ink); display: flex; align-items: center; justify-content: center;
    box-shadow: 0 0 30px rgba(217,182,118,.4), inset 0 0 8px rgba(255,255,255,.35);
    transition: transform .45s var(--ease), box-shadow .45s var(--ease);
}
.social-ico svg { width: clamp(26px, 6.5vw, 34px); height: auto; fill: currentColor; display: block; }
/* logo Google : pastille dorée comme Facebook et Instagram, « G » en aplat sombre */
.social-ico.is-google svg { width: clamp(28px, 7vw, 36px); }
.social-ico.is-google svg path { fill: currentColor; }
.social-item:hover .social-ico { transform: translateY(-5px) scale(1.07); box-shadow: 0 0 50px rgba(217,182,118,.7), inset 0 0 8px rgba(255,255,255,.5); }
.social-name { font-family: var(--sans); font-weight: 500; font-size: .78rem; letter-spacing: .16em; text-transform: uppercase; color: var(--champagne); transition: color .35s; }
.social-item:hover .social-name { color: var(--gold-soft); }

/* ====================== SÉLECTEUR DE LANGUE ====================== */
.lang-switch { position: relative; display: flex; align-items: center; }
/* déclencheur du dropdown */
.lang-toggle {
    display: inline-flex; align-items: center; gap: .45rem;
    font-family: var(--sans); font-weight: 500; font-size: .76rem; letter-spacing: .12em;
    padding: .5rem .8rem; border-radius: 999px; border: 1px solid rgba(217,182,118,.3);
    background: none; color: var(--champagne); cursor: pointer;
    transition: border-color .3s var(--ease), color .3s var(--ease), background .3s var(--ease);
}
.lang-toggle:hover { border-color: var(--gold); color: var(--gold-soft); }
.lang-globe { width: 15px; height: 15px; flex: none; opacity: .8; }
.lang-current { min-width: 1.4em; text-align: left; }
.lang-caret { width: 9px; height: 6px; flex: none; transition: transform .35s var(--ease); }
.lang-switch.open .lang-toggle { border-color: var(--gold); color: var(--gold-soft); }
.lang-switch.open .lang-caret { transform: rotate(180deg); }

/* menu déroulant */
.lang-menu {
    position: absolute; top: calc(100% + .8rem); right: 0; z-index: 60;
    display: flex; flex-direction: column; gap: .3rem; min-width: 15rem; padding: .8rem;
    border: 1px solid rgba(217,182,118,.24); border-radius: 16px;
    background: linear-gradient(165deg, #14110c, #0a0a0d);
    box-shadow: 0 40px 80px -34px rgba(0,0,0,.92);
    text-align: center;
    opacity: 0; visibility: hidden; transform: translateY(-10px) scale(.96); transform-origin: top right;
    transition: opacity .28s var(--ease), transform .28s var(--ease), visibility .28s;
}
/* petite flèche qui pointe vers le déclencheur */
.lang-menu::before {
    content: ""; position: absolute; top: -6px; right: 1.5rem; width: 12px; height: 12px;
    background: #14110c; border-left: 1px solid rgba(217,182,118,.24); border-top: 1px solid rgba(217,182,118,.24);
    transform: rotate(45deg);
}
.lang-switch.open .lang-menu { opacity: 1; visibility: visible; transform: none; }
.lang-btn {
    font-family: var(--sans); font-weight: 500; font-size: .95rem; letter-spacing: .03em; text-align: center;
    padding: .85rem 1rem; border-radius: 10px; border: 0; background: none; color: var(--muted); cursor: pointer;
    transition: color .25s var(--ease), background .25s var(--ease);
}
.lang-btn:hover { color: var(--champagne); background: rgba(217,182,118,.08); }
.lang-btn.is-active { color: var(--ink); background: var(--gold-grad); }

/* version mobile (dans le menu burger) : boutons inline, pas de dropdown */
.lang-switch--mobile { margin-top: 1.6rem; justify-content: center; gap: .45rem; }
.lang-switch--mobile .lang-btn { font-size: .82rem; padding: .55rem .95rem; border: 1px solid rgba(217,182,118,.25); border-radius: 999px; }
@media (max-width: 980px) { .lang-switch:not(.lang-switch--mobile) { display: none; } }