/* ============================================================
Maison & Séjour — Édition Cinématique (v2)
Stack design: ui-ux-pro-max → Minimalism Swiss + Classic Elegant
+ Hero film full-viewport (YouTube iframe)
+ Palette monochrome warm + accent bronze
+ Mouvement réduit respecté, contraste AAA, targets ≥44px
============================================================ */
:root{
/* ============ Palette V2 — Navy · Crème · Or ============ */
--bg: #F5EFE1; /* Crème ivoire (papier chaud) */
--bg-alt: #EFE7D4; /* Crème warm (cards, bandes) */
--bg-deep: #0C1A2B; /* Navy profond (hero, contact) */
--navy-soft: #1A2A41;
--ink: #1A1512; /* Encre chaude (texte principal) */
--ink-soft: #4A403A;
--ink-muted: #8C7F72;
--line: #C4B79A; /* Filet or clair */
--line-soft: #D9CFB5;
--accent: #B69368; /* Or champagne (jamais criard) */
--accent-dk: #8A6F45; /* Or profond (hover, italiques) */
--accent-lt: #D4B77E;
--cream: #F5EFE1;
--white: #ffffff;
/* ============ Typographie V2 ============ */
--f-serif: "Cormorant Garamond", Georgia, serif;
--f-sans: "Jost", system-ui, -apple-system, sans-serif;
--f-mono: "JetBrains Mono", "SF Mono", ui-monospace, Menlo, monospace;
/* Rythme 8pt */
--s-1: 8px; --s-2: 16px; --s-3: 24px; --s-4: 32px;
--s-5: 48px; --s-6: 64px; --s-7: 96px; --s-8: 128px;
--container: 1360px;
--gutter: clamp(20px, 4vw, 80px);
--section-y: clamp(104px, 14vw, 220px);
/* Transitions */
--ease: cubic-bezier(.22,.61,.36,1);
--ease-out: cubic-bezier(.16,1,.3,1);
--ease-cine: cubic-bezier(.22,1,.36,1); /* ease cinématique B */
--t-fast: 180ms;
--t-med: 320ms;
--t-slow: 600ms;
--radius-xs: 2px;
/* ============ DIRECTION B — Verre fumé de Rolls ============ */
/* Tokens overlay : pilotés dynamiquement par js/video-bg.js */
--video-ov: rgba(10,22,40,0); /* couche overlay courante */
--video-blur: 0px; /* blur courant sur overlay */
--video-grain: 0; /* opacité grain courant (0..1) */
/* Couleurs spécifiques B */
--nvy-deep: #0A1628; /* navy extraction Riviera, plus froid */
--nvy-glass: #0F2438; /* navy teinté pour glass niveau 2 */
--terra-warm: rgba(184,107,74,.06); /* warm-shift niveau 1 */
--gold-30: rgba(201,169,97,.30);
--gold-20: rgba(201,169,97,.20);
--gold-12: rgba(201,169,97,.12);
/* Glows & shadows signature B */
--glow-gold: 0 0 60px rgba(201,169,97,.08);
--glow-gold-2: 0 0 90px rgba(201,169,97,.14);
--shadow-lev: 0 80px 140px -40px rgba(0,0,0,.55);
--shadow-text: 0 4px 16px rgba(10,22,40,.50), 0 12px 32px rgba(10,22,40,.20);
/* Glass backdrop */
--glass-1: rgba(10,22,40,.28); /* niveau 1 voile léger */
--glass-2: rgba(15,36,56,.58); /* niveau 2 vitre teintée */
--glass-3: rgba(10,22,40,.92); /* niveau 3 opaque */
--blur-s: blur(12px) saturate(1.1);
--blur-m: blur(22px) saturate(1.15);
}
/* ============== RESET ============== */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
margin:0;background:var(--bg);color:var(--ink);
font-family:var(--f-sans);font-size:16px;line-height:1.65;
-webkit-font-smoothing:antialiased;
font-feature-settings:"ss01","cv11";
overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer;border:0;background:none;color:inherit}
ul{list-style:none;margin:0;padding:0}
:focus{outline:none}
:focus-visible{
outline:2px solid var(--accent);
outline-offset:3px;
border-radius:var(--radius-xs);
}
@media (prefers-reduced-motion: reduce){
*,*::before,*::after{
animation-duration:.01ms !important;
transition-duration:.01ms !important;
scroll-behavior:auto !important;
}
}
/* Sélection */
::selection{background:var(--ink);color:var(--bg)}
/* ============== TYPOGRAPHIE V2 ============== */
.eyebrow{
font-family:var(--f-sans);
font-size:11px;letter-spacing:.3em;text-transform:uppercase;
color:var(--ink-muted);margin:0 0 var(--s-3);font-weight:500;
display:inline-flex;align-items:center;gap:18px;
}
.eyebrow::before{
content:"";display:inline-block;width:40px;height:1px;
background:var(--accent);flex:0 0 40px;
}
.eyebrow-num{
font-family:var(--f-serif);font-style:italic;font-weight:400;
letter-spacing:.02em;text-transform:none;
font-size:15px;color:var(--accent-dk);
}
.eyebrow.light{color:rgba(245,239,225,.72)}
.eyebrow.light::before{background:var(--accent)}
.eyebrow.light .eyebrow-num{color:var(--accent-lt)}
.display{
font-family:var(--f-serif);font-weight:300;font-style:italic;
font-size:clamp(56px, 10vw, 140px);
line-height:.92;letter-spacing:-.035em;
margin:0 0 var(--s-4);
}
.display em{font-style:italic;font-weight:300;color:var(--accent-dk)}
.display.light{color:var(--cream);text-shadow:0 2px 32px rgba(0,0,0,.4)}
.display.light em{color:var(--accent-lt)}
.h-display{
font-family:var(--f-serif);font-weight:400;
font-size:clamp(34px, 5vw, 76px);
line-height:1;letter-spacing:-.02em;
margin:0 0 var(--s-2);
}
.h-display em{font-style:italic;color:var(--accent-dk);font-weight:300}
.lede{
font-family:var(--f-serif);font-style:italic;font-weight:400;
font-size:clamp(19px, 1.5vw, 24px);line-height:1.45;letter-spacing:-.005em;
color:var(--ink-soft);max-width:52ch;margin:0 0 var(--s-4);
}
.lede.light{color:rgba(245,239,225,.85);text-shadow:0 1px 16px rgba(0,0,0,.3)}
.text-lg{font-family:var(--f-sans);font-size:16px;color:var(--ink-soft);line-height:1.75}
/* ============== BOUTONS V2 ============== */
.btn{
display:inline-flex;align-items:center;gap:12px;
min-height:48px;padding:14px 30px;
border-radius:0;border:1px solid transparent;
font-family:var(--f-sans);font-weight:500;font-size:11px;letter-spacing:.3em;text-transform:uppercase;
transition:all .4s var(--ease-out);
white-space:nowrap;cursor:pointer;position:relative;
}
.btn-primary{background:var(--ink);color:var(--cream);border-color:var(--ink)}
.btn-primary:hover{background:var(--accent-dk);border-color:var(--accent-dk)}
.btn-gold{background:var(--accent);color:var(--bg-deep);border-color:var(--accent)}
.btn-gold:hover{background:var(--accent-lt);border-color:var(--accent-lt)}
.btn-ghost{border-color:var(--ink);color:var(--ink);background:transparent}
.btn-ghost:hover{background:var(--ink);color:var(--cream)}
.btn-primary-light{background:var(--cream);color:var(--ink);border-color:var(--cream)}
.btn-primary-light:hover{background:var(--accent);border-color:var(--accent);color:var(--bg-deep)}
.btn-link{
min-height:auto;padding:3px 0;letter-spacing:.04em;
text-transform:none;font-size:15px;font-weight:400;
font-family:var(--f-serif);font-style:italic;
border-bottom:1px solid var(--accent);color:var(--ink);background:transparent;
}
.btn-link:hover{color:var(--accent-dk);border-bottom-color:var(--accent-dk)}
.btn-link-light{
min-height:auto;padding:3px 0;letter-spacing:.04em;
text-transform:none;font-size:15px;font-weight:400;
font-family:var(--f-serif);font-style:italic;
border-bottom:1px solid var(--accent);color:var(--cream);background:transparent;
transition:color var(--t-med) var(--ease), border-color var(--t-med) var(--ease);
}
.btn-link-light:hover{color:var(--accent-lt);border-bottom-color:var(--accent-lt)}
/* ============== HEADER (transparent sur film puis solide) ============== */
.site-header{
position:fixed;top:0;left:0;right:0;z-index:50;
display:flex;align-items:center;justify-content:space-between;
padding:22px var(--gutter);
background:transparent;
transition:background var(--t-med) var(--ease), padding var(--t-med) var(--ease), border-color var(--t-med) var(--ease);
border-bottom:1px solid transparent;
}
/* Au-dessus du hero-film → texte clair */
.site-header.on-dark .logo-text,
.site-header.on-dark .nav a{color:var(--white)}
.site-header.on-dark .logo-mark{background:var(--white)}
.site-header.on-dark .logo-mark::after{border-color:var(--white)}
.site-header.on-dark .btn-ghost{border-color:rgba(255,255,255,.6);color:var(--white)}
.site-header.on-dark .btn-ghost:hover{background:var(--white);color:var(--ink);border-color:var(--white)}
.site-header.on-dark .nav a::after{background:var(--white)}
.site-header.on-dark .burger span{background:var(--white)}
/* Quand on scroll passé le film */
.site-header.is-scrolled{
background:color-mix(in srgb, var(--bg) 92%, transparent);
backdrop-filter:blur(16px) saturate(1.1);
-webkit-backdrop-filter:blur(16px) saturate(1.1);
border-bottom-color:var(--line);
padding:14px var(--gutter);
}
/* ============== WORDMARK (sans image) ============== */
.brand-word{
display:inline-flex;flex-direction:column;align-items:flex-start;gap:2px;
line-height:1;
transition:color var(--t-med) var(--ease);
}
.brand-mono{
font-family:var(--f-serif);font-weight:400;
font-size:22px;letter-spacing:.02em;color:var(--ink);
transition:color var(--t-med) var(--ease);
}
.brand-sub{
font-family:var(--f-sans);font-weight:500;
font-size:9px;letter-spacing:.42em;text-transform:uppercase;
color:var(--ink-muted);
transition:color var(--t-med) var(--ease);
}
.site-header.on-dark .brand-mono{color:var(--white)}
.site-header.on-dark .brand-sub{color:rgba(255,255,255,.7)}
.brand-footer .brand-mono{font-size:28px}
.brand-footer .brand-sub{font-size:10px;letter-spacing:.44em}
/* ============== WATERMARK universel (logo DP en bas-droite des photos) ============== */
.has-watermark{position:relative}
.has-watermark::after{
content:"";
position:absolute;bottom:14px;right:14px;
width:54px;height:54px;pointer-events:none;z-index:4;
background-image:url("../img/delfosse-mark.png");
background-size:contain;background-repeat:no-repeat;background-position:bottom right;
filter:invert(1) brightness(1.15)
drop-shadow(0 1px 2px rgba(0,0,0,.55))
drop-shadow(0 3px 10px rgba(0,0,0,.4));
opacity:.92;
transition:transform .7s var(--ease-out);
}
.has-watermark:hover::after{transform:scale(1.08) rotate(-2deg)}
/* Évite un double watermark sur les cartes qui ont déjà .stay-seal */
.has-watermark.stay-img::after,.has-watermark > .stay-seal{display:initial}
.stay-img.has-watermark::after{display:none}
/* ============== CARD SEAL (logo tamponné sur chaque carte) ============== */
.card-media img.card-seal{
position:absolute;bottom:16px;right:16px;
width:64px;height:auto;z-index:2;
object-fit:contain;
/* inversion noir → blanc + double ombre pour se détacher */
filter:
invert(1) brightness(1.15)
drop-shadow(0 1px 2px rgba(0,0,0,.55))
drop-shadow(0 3px 10px rgba(0,0,0,.45));
opacity:.95;pointer-events:none;
transition:transform .7s var(--ease-out), opacity .6s var(--ease-out);
transform-origin:bottom right;
}
.card:hover .card-media img.card-seal{
transform:scale(1.08) rotate(-2deg);
opacity:1;
}
/* Lien Espace voyageur */
.login-link{
display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:8px 14px;
font-size:11px;letter-spacing:.2em;text-transform:uppercase;font-weight:500;
color:var(--ink-soft);transition:color var(--t-med) var(--ease);
border-radius:0;
}
.login-link:hover{color:var(--ink)}
.login-link svg{flex:0 0 auto;opacity:.8}
.site-header.on-dark .login-link{color:rgba(255,255,255,.85)}
.site-header.on-dark .login-link:hover{color:var(--white)}
/* Switch langue FR / EN */
.lang-switch{
display:inline-flex;align-items:center;gap:6px;
font-size:11px;letter-spacing:.18em;font-weight:500;
color:var(--ink-muted);
}
.lang-switch button{
padding:4px 6px;color:inherit;opacity:.55;
min-height:auto;transition:color var(--t-med) var(--ease), opacity var(--t-med) var(--ease);
}
.lang-switch button:hover{opacity:1;color:var(--ink)}
.lang-switch button.is-active{
opacity:1;color:var(--ink);
text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px;
}
.lang-sep{opacity:.4}
.site-header.on-dark .lang-switch{color:rgba(255,255,255,.6)}
.site-header.on-dark .lang-switch button:hover,
.site-header.on-dark .lang-switch button.is-active{color:var(--white)}
.nav{display:flex;gap:var(--s-4)}
.nav a{
font-size:12px;color:var(--ink-soft);position:relative;padding:6px 0;
letter-spacing:.2em;text-transform:uppercase;font-weight:500;
transition:color var(--t-med) var(--ease);
}
.nav a:hover{color:var(--ink)}
.site-header.on-dark .nav a:hover{opacity:.8}
.nav a::after{
content:"";position:absolute;left:0;right:0;bottom:-3px;height:1px;
background:var(--ink);transform:scaleX(0);transform-origin:right;
transition:transform var(--t-med) var(--ease);
}
.nav a:hover::after{transform:scaleX(1);transform-origin:left}
.header-cta{display:flex;align-items:center;gap:12px}
.burger{display:none;width:46px;height:46px;flex-direction:column;justify-content:center;gap:5px;padding:0 10px}
.burger span{display:block;height:1px;background:var(--ink);transition:background var(--t-med) var(--ease)}
/* ============== HERO CINÉMATIQUE ============== */
.hero-film{
position:relative;
width:100%;min-height:100vh;min-height:100dvh;
color:var(--white);
display:flex;align-items:flex-end;
overflow:hidden;isolation:isolate;
}
.hero-film-bg{
position:absolute;inset:0;z-index:-1;
background:var(--bg-deep);
}
/* L'iframe YouTube doit couvrir, sans barres — on la surdimensionne */
.hero-film-bg iframe{
position:absolute;top:50%;left:50%;
width:max(100vw, calc(100vh * 16 / 9));
height:max(100vh, calc(100vw * 9 / 16));
transform:translate(-50%, -50%);
pointer-events:none;border:0;
}
/* Voile dégradé pour lisibilité du texte (règle contrast-readability) */
.hero-film-overlay{
position:absolute;inset:0;
background:
linear-gradient(180deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,.25) 35%, rgba(0,0,0,.15) 55%, rgba(0,0,0,.8) 100%),
radial-gradient(ellipse at 30% 80%, rgba(0,0,0,.5), transparent 70%);
}
.hero-film-grain{
position:absolute;inset:0;opacity:.18;pointer-events:none;mix-blend-mode:overlay;
background-image:url("data:image/svg+xml;utf8,");
}
.hero-film-content{
position:relative;max-width:var(--container);margin:0 auto;width:100%;
padding:0 var(--gutter) clamp(80px, 10vw, 140px);
}
.hero-film-content .hero-actions{display:flex;gap:var(--s-3);align-items:center;flex-wrap:wrap;margin-top:var(--s-4)}
/* Meta coin haut-gauche (style générique cinéma) */
.hero-film-meta{
position:absolute;top:100px;left:var(--gutter);z-index:2;
display:flex;align-items:center;gap:var(--s-2);
font-size:11px;letter-spacing:.24em;text-transform:uppercase;
color:rgba(255,255,255,.78);font-weight:500;
}
.hero-film-meta .rec{
width:8px;height:8px;border-radius:50%;background:#ff3b30;
animation:rec-blink 2s ease-in-out infinite;
box-shadow:0 0 0 2px rgba(255,59,48,.25);
}
.hero-film-meta .sep{opacity:.4}
@keyframes rec-blink{
0%,100%{opacity:1}
50%{opacity:.3}
}
/* Crédit coin bas-droit */
.hero-film-credit{
position:absolute;bottom:32px;right:var(--gutter);z-index:2;
display:flex;align-items:center;gap:10px;
font-size:11px;letter-spacing:.22em;text-transform:uppercase;
color:rgba(255,255,255,.7);font-weight:500;
}
/* Scroll hint centré bas */
.scroll-hint{
position:absolute;bottom:28px;left:50%;transform:translateX(-50%);z-index:2;
display:inline-flex;flex-direction:column;align-items:center;gap:12px;
font-size:10px;letter-spacing:.3em;text-transform:uppercase;
color:rgba(255,255,255,.85);font-weight:500;
}
.scroll-hint-line{
display:block;width:1px;height:52px;background:linear-gradient(to bottom, rgba(255,255,255,.9), rgba(255,255,255,0));
animation:scroll-line 2.4s ease-in-out infinite;
transform-origin:top;
}
@keyframes scroll-line{
0%{transform:scaleY(.1);opacity:.2}
50%{transform:scaleY(1);opacity:1}
100%{transform:scaleY(.1);opacity:.2;transform-origin:bottom}
}
/* ============== SECTIONS GÉNÉRIQUES ============== */
.section{
padding:var(--section-y) var(--gutter);
max-width:var(--container);margin:0 auto;
position:relative;
}
.section-head{margin-bottom:clamp(56px, 7vw, 112px);max-width:760px}
.section-head.center{text-align:center;margin-left:auto;margin-right:auto}
.section-head.center .eyebrow{justify-content:center}
/* ============== À PROPOS ============== */
.about{
display:grid;grid-template-columns:1fr 1.3fr;gap:clamp(40px, 8vw, 160px);
align-items:start;
}
.about p{margin:0 0 var(--s-3);max-width:58ch}
/* ============== STRIP HORIZONTAL (défilement G/D, une bande) ============== */
.strip{
position:relative;padding:var(--s-3) 0 var(--s-3);
}
/* Réduit l'écart entre À propos et Séjours */
.sejours{padding-top:calc(var(--section-y) * .55)}
.about{padding-bottom:calc(var(--section-y) * .6)}
/* L'attribut hidden doit masquer complètement (sinon .grid override) */
[hidden]{display:none!important}
/* Nav (flèches + compteur) au-dessus */
.strip-nav{
display:flex;align-items:center;justify-content:space-between;gap:var(--s-3);
padding:0 0 var(--s-4);
}
.strip-arrow{
width:54px;height:54px;border-radius:50%;
border:1px solid var(--line);color:var(--ink);background:transparent;
display:inline-flex;align-items:center;justify-content:center;
transition:background var(--t-med) var(--ease), color var(--t-med) var(--ease), border-color var(--t-med) var(--ease), transform var(--t-med) var(--ease);
cursor:pointer;
}
.strip-arrow:hover{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.strip-arrow:hover svg{transform:translateX(0)}
.strip-prev:hover svg{transform:translateX(-2px)}
.strip-next:hover svg{transform:translateX(2px)}
.strip-arrow.is-disabled{opacity:.3;pointer-events:none}
.strip-counter{
font-family:var(--f-serif);font-weight:300;font-style:italic;color:var(--ink);
font-size:16px;letter-spacing:.02em;
display:inline-flex;align-items:baseline;gap:10px;
}
.strip-counter #stripCur{
font-family:var(--f-serif);font-style:italic;font-weight:300;
font-size:64px;color:var(--ink);line-height:1;letter-spacing:-.02em;
}
.strip-sep{opacity:.3;color:var(--accent);font-style:normal}
.strip-tot{font-size:14px;color:var(--ink-muted);font-family:var(--f-sans);font-style:normal;letter-spacing:.1em}
/* Track horizontal — scroll-snap */
.strip-track{
display:flex;
overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;
scrollbar-width:none;-ms-overflow-style:none;
outline:none;overscroll-behavior-inline:contain;
}
.strip-track::-webkit-scrollbar{display:none}
/* Slide plein cadre */
.strip-slide{
flex:0 0 100%;width:100%;
scroll-snap-align:start;scroll-snap-stop:always;
display:grid;grid-template-columns:1.05fr 1fr;gap:clamp(32px, 5vw, 100px);
align-items:center;
padding:var(--s-4) 0;min-width:0;
position:relative;perspective:2200px;
}
.strip-slide.is-reverse .stay-media{order:2}
.strip-slide.is-reverse .stay-content{order:1;text-align:right}
.strip-slide.is-reverse .stay-content .stay-specs{justify-content:flex-end}
.strip-slide.is-reverse .stay-content .stay-cta{justify-content:flex-end}
.strip-slide.is-reverse .stay-addr{flex-direction:row-reverse}
/* Dots */
.strip-dots{
display:flex;justify-content:center;gap:10px;margin-top:var(--s-4);
}
.strip-dot{
width:28px;height:2px;background:var(--line);
cursor:pointer;transition:background var(--t-med) var(--ease), width var(--t-med) var(--ease);
padding:0;min-height:auto;border:0;
}
.strip-dot:hover{background:var(--ink-muted)}
.strip-dot.is-active{background:var(--accent);width:56px}
/* Barre de progression */
.strip-progress{
margin-top:var(--s-2);height:1px;background:var(--line);overflow:hidden;
}
.strip-progress-bar{
height:100%;background:var(--accent);width:calc(100% / 7);
transition:transform .5s var(--ease-out), width .3s var(--ease-out);
transform-origin:left;
}
/* Média */
.stay-media{
position:relative;aspect-ratio:4/5;
transform-style:preserve-3d;
max-height:76vh;
}
.stay-img{
position:relative;display:block;width:100%;height:100%;overflow:hidden;
background:var(--bg-alt);
transform-style:preserve-3d;
box-shadow:0 20px 60px -30px rgba(10,10,10,.35);
transition:box-shadow .6s var(--ease-out);
}
.stay-img img:not(.stay-seal){
width:100%;height:100%;object-fit:cover;display:block;
transform:scale(1);
transition:transform 1.4s var(--ease-out);
}
.strip-slide:hover .stay-img img:not(.stay-seal){transform:scale(1.06)}
.strip-slide:hover .stay-img{box-shadow:0 40px 90px -40px rgba(10,10,10,.55)}
/* Ken Burns très lent sur slide active — effet wow */
.strip-slide.is-current .stay-img img:not(.stay-seal){
animation:strip-kb 14s ease-in-out infinite alternate;
}
@keyframes strip-kb{
from{transform:scale(1.02) translate3d(-1%, 0, 0)}
to {transform:scale(1.1) translate3d( 1%, -1%, 0)}
}
.strip-slide:hover .stay-img img:not(.stay-seal){animation-play-state:paused}
/* Compteur qui "pop" au changement */
.strip-counter #stripCur{display:inline-block;animation:cur-pop .5s var(--ease-out)}
@keyframes cur-pop{
from{opacity:0;transform:translateY(6px) scale(.85)}
to {opacity:1;transform:translateY(0) scale(1)}
}
/* Accent bar animée sous la slide active */
.strip-slide::before{
content:"";position:absolute;left:0;right:100%;bottom:-4px;height:2px;
background:linear-gradient(90deg, transparent, var(--accent), transparent);
transition:right 1.5s var(--ease-out);opacity:0;
}
.strip-slide.is-current::before{right:0;opacity:1}
/* Barre de progression avec lueur */
.strip-progress-bar{position:relative}
.strip-progress-bar::after{
content:"";position:absolute;right:-1px;top:-2px;bottom:-2px;width:3px;
background:var(--accent);box-shadow:0 0 10px var(--accent), 0 0 2px var(--accent);
}
@media (prefers-reduced-motion: reduce){
.strip-slide.is-current .stay-img img:not(.stay-seal){animation:none}
.strip-counter #stripCur{animation:none}
}
.stay-tag{
position:absolute;top:18px;left:18px;z-index:2;
background:transparent;color:#fff;padding:4px 0;
font-size:10px;letter-spacing:.28em;text-transform:uppercase;font-weight:500;
border-bottom:1px solid currentColor;
}
.stay-seal{
position:absolute;bottom:18px;right:18px;width:64px;height:auto;z-index:2;
filter:invert(1) brightness(1.15)
drop-shadow(0 1px 2px rgba(0,0,0,.5))
drop-shadow(0 3px 10px rgba(0,0,0,.4));
opacity:.95;pointer-events:none;
transition:transform .7s var(--ease-out);
}
.stay-row:hover .stay-seal{transform:scale(1.08) rotate(-2deg)}
/* Grand numéro en filigrane */
.stay-big-num{
position:absolute;top:-5%;left:-8%;z-index:0;
font-family:var(--f-serif);font-weight:300;font-style:italic;
font-size:clamp(140px, 18vw, 280px);
line-height:.82;letter-spacing:-.05em;
color:transparent;
-webkit-text-stroke:1.5px rgba(10,10,10,.14);
pointer-events:none;
opacity:0;transform:translateY(40px) scale(.95);
transition:opacity 1.1s var(--ease-out) .15s, transform 1.1s var(--ease-out) .15s;
}
.strip-slide.is-reverse .stay-big-num{left:auto;right:-8%;top:-5%}
.strip-slide .stay-big-num{opacity:1;transform:translateY(0) scale(1)}
/* Contenu texte */
.stay-content{max-width:540px}
.strip-slide.is-reverse .stay-content{margin-left:auto}
.stay-addr{
font-family:var(--f-sans);font-size:11px;letter-spacing:.3em;text-transform:uppercase;
color:var(--ink-muted);font-weight:500;margin:0 0 14px;
display:inline-flex;align-items:center;gap:16px;
}
.stay-addr::before{
content:"";display:inline-block;width:36px;height:1px;background:var(--accent);
flex:0 0 36px;
}
.stay-addr-old-bullet::before{
content:"✧";font-family:var(--f-serif);font-style:italic;
font-size:14px;color:var(--accent-dk);
letter-spacing:0;text-transform:none;
}
.strip-slide.is-reverse .stay-addr{flex-direction:row-reverse}
.stay-name{
font-family:var(--f-serif);font-weight:300;font-style:italic;
font-size:clamp(42px, 5.4vw, 84px);line-height:.94;letter-spacing:-.03em;
margin:0 0 8px;
}
.stay-name a{color:var(--ink);transition:color .3s var(--ease)}
.stay-name a:hover{color:var(--accent-dk)}
.stay-name em{font-style:italic;color:var(--accent-dk)}
.stay-sub{
font-family:var(--f-serif);font-style:italic;font-weight:400;
font-size:clamp(19px, 1.8vw, 26px);line-height:1.2;letter-spacing:-.005em;
color:var(--accent-dk);margin:0 0 var(--s-3);
}
.stay-lede{
font-family:var(--f-serif);font-style:italic;font-weight:400;
font-size:clamp(16px, 1.15vw, 18px);line-height:1.55;color:var(--ink-soft);
max-width:44ch;margin:0 0 var(--s-4);
}
.stay-specs{
list-style:none;margin:0 0 var(--s-4);padding:var(--s-3) 0 0;
display:flex;gap:var(--s-5);flex-wrap:wrap;
border-top:1px solid var(--line-soft);
font-family:var(--f-sans);font-size:11px;letter-spacing:.22em;text-transform:uppercase;
color:var(--ink-soft);font-weight:500;
}
.stay-specs li::before{
content:"·";color:var(--accent);margin-right:14px;font-size:14px;
}
.stay-specs li:first-child::before{display:none}
.stay-specs li{display:inline-flex;align-items:center;gap:8px}
.stay-cta{display:flex;gap:var(--s-4);align-items:center;flex-wrap:wrap}
.stay-cta .btn-primary{min-height:50px;padding:14px 28px}
/* Tilt 3D au mouvement souris */
.stay-img{transition:transform .6s var(--ease-out), box-shadow .6s var(--ease-out)}
.strip-slide.tilting .stay-img{transition:transform .1s linear}
/* Responsive */
@media (max-width: 900px){
.strip-slide,.strip-slide.is-reverse{grid-template-columns:1fr;gap:var(--s-3);padding:var(--s-2) 0}
.strip-slide.is-reverse .stay-media{order:-1}
.strip-slide.is-reverse .stay-content{text-align:left;margin:0}
.strip-slide.is-reverse .stay-content .stay-cta{justify-content:flex-start}
.strip-slide.is-reverse .stay-addr{flex-direction:row}
.stay-big-num{font-size:110px;top:-20px;left:-10px;opacity:.45}
.strip-slide.is-reverse .stay-big-num{right:-10px;left:auto}
.stay-media{max-height:60vh}
.stay-name{font-size:clamp(32px, 8.5vw, 44px)!important}
.stay-sub{font-size:16px}
.strip-nav{padding:0 0 var(--s-3)}
.strip-arrow{width:44px;height:44px}
.strip-counter #stripCur{font-size:32px}
}
/* ============== MOBILE CAROUSEL — peek effect éditorial ============== */
@media (max-width: 760px){
.strip{padding:var(--s-2) 0 var(--s-5)}
/* Track pleine largeur avec padding latéral pour voir les voisines */
.strip-track{
padding:0 7vw;
gap:16px;
scroll-padding-inline:7vw;
overscroll-behavior-inline:contain;
-webkit-overflow-scrolling:touch;
}
/* Slide à 86% : on voit la voisine en peek */
.strip-slide{
flex:0 0 86%;
width:86%;
padding:var(--s-2) 0;
scroll-snap-align:center;
scroll-snap-stop:always;
transform:scale(.92);
opacity:.4;
filter:saturate(.75);
transition:
transform .55s var(--ease-out),
opacity .55s var(--ease-out),
filter .55s var(--ease-out);
will-change:transform, opacity;
}
.strip-slide.is-current{
transform:scale(1);
opacity:1;
filter:saturate(1);
}
/* Parallax — l'image se déplace à 60% de la vitesse du slide */
.strip-slide .stay-media,
.strip-slide.is-reverse .stay-media{
order:0;
transition:transform .6s var(--ease-out);
will-change:transform;
}
.strip-slide:not(.is-current) .stay-img img:not(.stay-seal){
transform:scale(1.04);
}
/* Le titre & contenu : fade doux */
.strip-slide .stay-content{
transform:translateY(8px);
opacity:.8;
transition:transform .55s var(--ease-out), opacity .55s var(--ease-out);
}
.strip-slide.is-current .stay-content{
transform:translateY(0);
opacity:1;
}
/* Counter centré + progress en bas */
.strip-counter #stripCur{font-size:44px}
.strip-counter{font-size:14px}
/* Progress Instagram — plus visible sur mobile */
.strip-progress{
margin-top:var(--s-3);
height:2px;
background:color-mix(in srgb, var(--line) 60%, transparent);
}
.strip-progress-bar{
background:var(--accent);
transition:width .55s var(--ease-out);
}
/* Les flèches masquées, le swipe prime */
.strip-arrow{display:none}
.strip-nav{justify-content:center;padding-bottom:var(--s-3)}
.strip-counter{margin:0 auto}
/* Dots plus grosses pour tap */
.strip-dots{gap:8px;margin-top:var(--s-3)}
.strip-dot{width:22px;height:3px}
.strip-dot.is-active{width:44px}
/* stay-content padding intérieur pour l'air de respirer */
.stay-content{padding:0 var(--s-2)}
}
/* Très petit écran : slide à 90% */
@media (max-width: 380px){
.strip-slide{flex:0 0 90%;width:90%}
.strip-track{padding:0 5vw;scroll-padding-inline:5vw}
}
@media (prefers-reduced-motion: reduce){
.strip-track{scroll-behavior:auto}
.strip-slide{transition:none!important}
.strip-slide,.strip-slide:not(.is-current){transform:none;opacity:1;filter:none}
}
/* ============== SÉJOURS — ACCORDÉON ÉDITORIAL ============== */
/* 7 panneaux verticaux, hover/focus expand à ~40% ; autres compressent.
Inspiration : Aesop store index, galerie d'art éditoriale. */
.sej-acc{
display:flex;
width:100%;
height:clamp(520px, 74vh, 760px);
gap:2px;
overflow:hidden;
background:var(--bg-deep, #0C1A2B);
margin-top:clamp(20px, 3vw, 40px);
border-radius:4px;
isolation:isolate;
}
.sej-panel{
position:relative;
flex:1 1 0;
min-width:0;
cursor:pointer;
overflow:hidden;
background:#0A1628;
outline:none;
transition:flex-grow 1100ms cubic-bezier(.22,1,.36,1);
will-change:flex-grow;
}
.sej-panel.is-active{flex-grow:5}
/* Image de fond — dim par défaut, lit quand active */
.sej-bg{
position:absolute;inset:0;width:100%;height:100%;
object-fit:cover;display:block;
filter:brightness(.38) saturate(.85);
transform:scale(1.02);
transition:filter 900ms cubic-bezier(.22,1,.36,1),
transform 1400ms cubic-bezier(.22,1,.36,1);
will-change:filter, transform;
}
.sej-panel.is-active .sej-bg{
filter:brightness(.88) saturate(1);
transform:scale(1.06);
}
.sej-panel:hover:not(.is-active) .sej-bg{
filter:brightness(.5) saturate(.92);
}
/* Shade : dégradé bas pour lisibilité */
.sej-shade{
position:absolute;inset:0;z-index:1;pointer-events:none;
background:linear-gradient(
to top,
rgba(10,22,40,.96) 0%,
rgba(10,22,40,.55) 45%,
rgba(10,22,40,.15) 75%,
rgba(10,22,40,.05) 100%
);
}
.sej-panel.is-active .sej-shade{
background:linear-gradient(
to top,
rgba(10,22,40,.88) 0%,
rgba(10,22,40,.35) 50%,
rgba(10,22,40,.05) 100%
);
}
/* Numéro romain gravé en haut à gauche */
.sej-num{
position:absolute;top:24px;left:24px;z-index:3;
font-family:var(--f-serif);
font-style:italic;font-weight:300;
font-size:clamp(28px, 3.2vw, 44px);
line-height:1;letter-spacing:-.02em;
color:#F5EFE1;
opacity:.72;
transition:opacity 700ms cubic-bezier(.22,1,.36,1), color 700ms;
pointer-events:none;
}
.sej-panel.is-active .sej-num{opacity:1;color:#B69368}
/* État compressé : nom visible rotated/compact */
.sej-collapsed{
position:absolute;left:0;right:0;bottom:0;z-index:3;
padding:22px 18px;
display:flex;justify-content:center;align-items:flex-end;
pointer-events:none;
transition:opacity 500ms cubic-bezier(.22,1,.36,1);
}
.sej-collapsed span{
font-family:var(--f-serif);
font-style:italic;font-weight:300;
font-size:clamp(18px, 1.6vw, 24px);
line-height:1.1;
color:#F5EFE1;
text-align:center;
white-space:nowrap;
text-shadow:0 2px 18px rgba(0,0,0,.55);
/* Écrit le nom en orientation verticale quand l'espace est étroit */
writing-mode:vertical-rl;
transform:rotate(180deg);
letter-spacing:.02em;
}
.sej-panel.is-active .sej-collapsed{opacity:0}
/* État expansé : bloc éditorial complet en bas */
.sej-expanded{
position:absolute;left:0;right:0;bottom:0;z-index:4;
padding:clamp(28px, 3vw, 44px);
color:#F5EFE1;
opacity:0;transform:translateY(12px);
transition:opacity 700ms cubic-bezier(.22,1,.36,1) 100ms,
transform 900ms cubic-bezier(.22,1,.36,1) 100ms;
pointer-events:none;
}
.sej-panel.is-active .sej-expanded{
opacity:1;transform:translateY(0);pointer-events:auto;
}
.sej-tag{
font-family:var(--f-sans);font-weight:500;
font-size:10px;letter-spacing:.32em;text-transform:uppercase;
color:#B69368;margin:0 0 16px;
display:flex;align-items:center;gap:10px;
}
.sej-tag::before{
content:"";display:inline-block;width:24px;height:1px;background:#B69368;
}
.sej-name{
font-family:var(--f-serif);font-weight:300;
font-size:clamp(34px, 4vw, 56px);line-height:1.02;letter-spacing:-.02em;
color:#F5EFE1;
margin:0 0 14px;max-width:18ch;
text-shadow:0 4px 24px rgba(0,0,0,.55);
}
.sej-name em{font-style:italic;font-weight:400}
.sej-lede{
font-family:var(--f-serif);font-style:italic;font-weight:300;
font-size:clamp(16px, 1.2vw, 18px);line-height:1.5;
color:rgba(245,239,225,.85);
margin:0 0 18px;max-width:42ch;
}
.sej-meta{
display:flex;flex-wrap:wrap;gap:22px;
font-family:var(--f-sans);font-weight:400;
font-size:11px;letter-spacing:.2em;text-transform:uppercase;
color:rgba(245,239,225,.7);
margin:0 0 22px;padding:0;list-style:none;
}
.sej-meta li{
display:flex;align-items:center;gap:10px;
}
.sej-meta li + li::before{
content:"";display:inline-block;width:4px;height:4px;border-radius:50%;
background:rgba(182,147,104,.6);margin-left:-16px;
}
.sej-cta{
display:inline-flex;align-items:center;gap:8px;
font-family:var(--f-sans);font-weight:500;
font-size:11px;letter-spacing:.3em;text-transform:uppercase;
color:#F5EFE1;
padding:14px 0;border-top:1px solid rgba(245,239,225,.35);
min-width:220px;
text-decoration:none;
transition:color 500ms cubic-bezier(.22,1,.36,1),
border-color 500ms cubic-bezier(.22,1,.36,1),
padding 500ms cubic-bezier(.22,1,.36,1),
letter-spacing 500ms cubic-bezier(.22,1,.36,1);
}
.sej-cta:hover{
color:#B69368;border-top-color:#B69368;
padding-left:8px;letter-spacing:.34em;
}
/* Focus visible */
.sej-panel:focus-visible{box-shadow:inset 0 0 0 1px rgba(182,147,104,.65)}
/* Hover sur un panneau non-actif : tease */
.sej-panel:not(.is-active):hover .sej-collapsed span{color:#B69368}
/* ============ Mobile : stack vertical ============ */
@media (max-width: 820px){
.sej-acc{
flex-direction:column;
height:auto;
gap:4px;
contain:layout style;
}
.sej-panel{
flex:0 0 auto;
height:96px;
transition:
height 650ms cubic-bezier(.22,1,.36,1),
flex-grow 650ms cubic-bezier(.22,1,.36,1);
will-change:height;
contain:layout style paint;
}
.sej-panel.is-active{
flex-grow:0;
height:clamp(420px, 56vh, 560px);
}
.sej-bg{
transform:none;
filter:brightness(.48) saturate(.9);
}
.sej-panel.is-active .sej-bg{
transform:none;
filter:brightness(.82) saturate(1);
}
/* Collapsed : nom horizontal sur mobile (plus lisible) */
.sej-collapsed{
left:24px;right:24px;bottom:auto;top:50%;
transform:translateY(-50%);
justify-content:flex-start;align-items:center;
padding:0;
}
.sej-collapsed span{
writing-mode:horizontal-tb;
transform:none;
font-size:20px;
text-align:left;
}
.sej-num{
font-size:32px;top:50%;left:auto;right:22px;
transform:translateY(-50%);
opacity:.9;
}
.sej-panel.is-active .sej-num{
top:20px;right:22px;transform:none;
font-size:28px;
}
.sej-name{font-size:clamp(30px, 7vw, 42px)}
.sej-expanded{padding:24px 22px 26px}
.sej-meta{gap:16px;font-size:10px}
.sej-cta{min-width:auto}
}
/* ============ Reduced motion ============ */
@media (prefers-reduced-motion: reduce){
.sej-panel,.sej-bg,.sej-expanded,.sej-collapsed,.sej-num{
transition:none !important;
}
}
/* ============== SÉJOURS — cartes 3D cinématiques (ancien) ============== */
.grid{
display:grid;grid-template-columns:repeat(auto-fill, minmax(400px, 1fr));
gap:clamp(var(--s-5), 4vw, var(--s-7)) clamp(var(--s-4), 2.5vw, var(--s-5));
}
.card{
background:transparent;display:flex;flex-direction:column;
perspective:1400px;
transform-style:preserve-3d;
transition:transform .6s var(--ease-out), box-shadow .6s var(--ease-out);
will-change:transform;
}
.card:hover{
box-shadow:0 40px 80px -40px rgba(10,10,10,.35);
}
.card-media{
position:relative;display:block;aspect-ratio:3/4;overflow:hidden;
background:var(--bg-alt);margin-bottom:var(--s-3);
transform-style:preserve-3d;
}
.card-media::after{
content:"";position:absolute;inset:0;background:rgba(0,0,0,0);z-index:1;
transition:background var(--t-med) var(--ease);pointer-events:none;
}
.card:hover .card-media::after{background:rgba(0,0,0,.05)}
.card-media img{
width:100%;height:100%;object-fit:cover;
transition:transform 1400ms var(--ease-out);
will-change:transform;
}
.card:hover .card-media img{transform:scale(1.07)}
/* La "seal" et "tag" montent en Z pour effet 3D */
.card-media img.card-seal{transform:translateZ(30px)}
.card-media .card-tag{transform:translateZ(20px)}
.card-tag{
position:absolute;top:18px;left:18px;
background:transparent;color:var(--white);
padding:4px 0;
font-size:10px;letter-spacing:.28em;text-transform:uppercase;font-weight:500;
border-bottom:1px solid currentColor;z-index:1;
}
.card-body{padding:0;position:relative;transform-style:preserve-3d}
.card-index{
display:block;font-family:var(--f-serif);font-style:italic;font-weight:400;
font-size:14px;color:var(--accent-dk);letter-spacing:.02em;margin-bottom:8px;
}
.card-body h3{
font-family:var(--f-serif);font-weight:400;
font-size:clamp(26px, 2.4vw, 34px);line-height:1.05;letter-spacing:-.02em;
margin:0 0 10px;
}
.card-body .meta{
color:var(--ink-muted);font-size:13px;margin:0 0 var(--s-2);
letter-spacing:.02em;
}
.card-body .price{
font-size:13px;color:var(--ink-soft);margin:0 0 var(--s-2);
padding-top:var(--s-2);border-top:1px solid var(--line);
font-variant-numeric:tabular-nums;letter-spacing:.02em;
display:flex;align-items:baseline;gap:8px;
}
.card-body .price strong{color:var(--ink);font-weight:500;font-size:16px}
.card-body h3 a{color:inherit;transition:color var(--t-med) var(--ease)}
.card-body h3 a:hover{color:var(--accent-dk)}
.card-actions{display:flex;gap:var(--s-3);align-items:center;flex-wrap:wrap;margin-top:var(--s-2)}
.card-actions .btn-link.subtle{color:var(--ink-muted);font-weight:400;font-size:13px}
.card-actions .btn-link.subtle:hover{color:var(--ink)}
/* ============== EXPÉRIENCES ============== */
.experiences{background:var(--bg-alt);max-width:none;border-radius:0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.experiences .section-head,.experiences .features{
max-width:var(--container);margin-left:auto;margin-right:auto;
}
.features{
display:grid;grid-template-columns:repeat(auto-fit, minmax(240px, 1fr));
gap:0;border-top:1px solid var(--line);
}
.feature{
padding:var(--s-4) var(--s-3) var(--s-4) 0;
border-right:1px solid var(--line);
border-bottom:1px solid var(--line);
position:relative;
transition:background var(--t-med) var(--ease);
}
.feature:nth-child(4n){border-right:0}
.feature:hover{background:rgba(164,113,72,.04)}
.feature::before{
content:"";position:absolute;left:0;top:0;width:0;height:1px;background:var(--accent);
transition:width var(--t-slow) var(--ease-out);
}
.feature:hover::before{width:40%}
.feat-num{
font-family:var(--f-serif);font-size:14px;color:var(--accent-dk);
letter-spacing:.12em;font-style:italic;
}
.feature h3{
font-family:var(--f-serif);font-weight:400;
font-size:24px;letter-spacing:-.01em;
margin:var(--s-2) 0 var(--s-1);
}
.feature p{color:var(--ink-soft);margin:0;font-size:15px;max-width:38ch;line-height:1.6}
/* ============== AVIS ============== */
.reviews-wrap{max-width:var(--container);margin:0 auto;padding:0 var(--gutter)}
.reviews-grid{
display:grid;grid-template-columns:repeat(auto-fit, minmax(300px, 1fr));
gap:var(--s-5);
}
/* Pagination dots (mobile uniquement) */
.reviews-dots{
display:none;
justify-content:center;align-items:center;gap:10px;
margin-top:clamp(32px, 4vw, 48px);
}
.rev-dot-btn{
width:24px;height:2px;background:rgba(245,237,224,.3);
border:0;padding:0;cursor:pointer;
transition:width 550ms var(--ease-cine), background 550ms var(--ease-cine);
}
.rev-dot-btn:hover{background:rgba(245,237,224,.55)}
.rev-dot-btn.is-active{width:52px;background:var(--accent)}
/* Stagger desktop reveal */
.reviews-grid .rev-slide{
opacity:0;
transform:translateY(20px);
transition:opacity 1100ms var(--ease-cine), transform 1100ms var(--ease-cine);
}
.reviews-grid.is-in .rev-slide{opacity:1;transform:translateY(0)}
.reviews-grid.is-in .rev-slide:nth-child(1){transition-delay:0ms}
.reviews-grid.is-in .rev-slide:nth-child(2){transition-delay:80ms}
.reviews-grid.is-in .rev-slide:nth-child(3){transition-delay:160ms}
/* Mobile : carrousel scroll-snap horizontal 1 slide visible */
@media (max-width: 820px){
.reviews-grid{
display:flex;
grid-template-columns:none;
gap:16px;
overflow-x:auto;
scroll-snap-type:x mandatory;
scroll-behavior:smooth;
scrollbar-width:none;-ms-overflow-style:none;
padding:0 0 8px;
margin:0 -24px;
scroll-padding-inline:24px;
}
.reviews-grid::-webkit-scrollbar{display:none}
.reviews-grid .rev-slide{
flex:0 0 calc(100% - 48px);
scroll-snap-align:center;
margin:0 0 0 24px;
opacity:1;transform:none;
padding:32px 0 0;
min-height:auto;
}
.reviews-grid .rev-slide:last-child{margin-right:24px}
.reviews-grid p{font-size:20px;line-height:1.45;margin:20px 0 24px}
.reviews-dots{display:inline-flex;padding-top:4px}
}
.reviews-grid blockquote{
margin:0;padding:var(--s-5) 0 0;
border-top:1px solid var(--line);
position:relative;
}
.reviews-grid blockquote::before{
content:"„";position:absolute;top:-6px;left:0;
font-family:var(--f-serif);font-size:64px;line-height:1;
color:var(--accent);font-weight:300;
}
.reviews-grid p{
font-family:var(--f-serif);font-weight:300;font-style:italic;
font-size:clamp(22px, 1.8vw, 30px);line-height:1.35;
letter-spacing:-.01em;margin:var(--s-4) 0 var(--s-4);color:var(--ink);
}
.reviews-grid cite{
font-family:var(--f-sans);font-style:normal;
font-size:11px;letter-spacing:.28em;text-transform:uppercase;
color:var(--ink-muted);font-weight:500;
display:inline-flex;align-items:center;gap:14px;
}
.reviews-grid cite::before{
content:"";display:inline-block;width:24px;height:1px;background:var(--accent);
flex:0 0 24px;
}
/* ============== CONTACT (bloc sombre éditorial) ============== */
.contact{padding-top:0;padding-bottom:var(--section-y)}
.contact-card{
background:var(--bg-deep);color:var(--bg);
padding:clamp(48px, 6vw, 112px);
display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px, 6vw, 112px);
align-items:start;position:relative;overflow:hidden;
}
.contact-card::before{
content:"";position:absolute;top:0;left:0;right:0;height:1px;
background:linear-gradient(90deg, transparent, var(--accent), transparent);
}
.contact-card .eyebrow{color:rgba(255,255,255,.55)}
.contact-card .eyebrow .eyebrow-num{color:var(--accent);border-right-color:rgba(255,255,255,.18)}
.contact-card .h-display{color:var(--bg);font-weight:300}
.contact-card .h-display em{color:var(--accent)}
.contact-card .text-lg{color:rgba(250,248,244,.72)}
.contact-form{display:grid;gap:var(--s-3)}
.contact-form label{
display:grid;gap:6px;
font-size:11px;letter-spacing:.24em;text-transform:uppercase;
color:rgba(250,248,244,.55);font-weight:500;
}
.contact-form input,.contact-form textarea{
font:inherit;color:var(--bg);
background:transparent;border:0;border-bottom:1px solid rgba(250,248,244,.22);
padding:12px 0;outline:none;font-size:16px;text-transform:none;letter-spacing:0;
transition:border-color var(--t-med) var(--ease);font-weight:400;
min-height:46px;
}
.contact-form input:focus,.contact-form textarea:focus{border-color:var(--accent)}
.contact-form textarea{resize:vertical;min-height:110px}
.contact-form .btn{
justify-self:start;margin-top:var(--s-2);
background:var(--accent);color:var(--ink);border:1px solid var(--accent);
}
.contact-form .btn:hover{background:var(--bg);border-color:var(--bg)}
/* ============== FOOTER ============== */
.site-footer{background:var(--bg);padding:var(--s-8) var(--gutter) var(--s-4);border-top:1px solid var(--line)}
.foot-grid{
max-width:var(--container);margin:0 auto;
display:grid;grid-template-columns:2fr 1fr;gap:var(--s-6);
padding-bottom:var(--s-6);border-bottom:1px solid var(--line);
}
.foot-grid h4{
font-family:var(--f-sans);font-weight:500;
font-size:10px;letter-spacing:.28em;text-transform:uppercase;
margin:0 0 var(--s-2);color:var(--ink);
}
.foot-grid p,.foot-grid li{color:var(--ink-soft);font-size:14px;margin:0 0 8px;line-height:1.7}
.foot-grid a{border-bottom:1px solid transparent;transition:border-color var(--t-fast) var(--ease)}
.foot-grid a:hover{color:var(--ink);border-bottom-color:var(--ink)}
.foot-tag{margin-top:var(--s-3);font-size:14px;color:var(--ink-soft);max-width:300px}
.foot-bottom{
max-width:var(--container);margin:0 auto;padding-top:var(--s-3);
display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;
font-size:12px;color:var(--ink-muted);letter-spacing:.06em;
}
/* ============== RESPONSIVE ============== */
@media (max-width: 960px){
.nav{
display:none;position:fixed;inset:64px 0 0;flex-direction:column;gap:0;
z-index:49;
background:var(--bg);padding:24px var(--gutter) calc(40px + env(safe-area-inset-bottom));
border-bottom:1px solid var(--line);
overflow-y:auto;
}
.nav.open{display:flex}
.nav a{padding:16px 0;border-bottom:1px solid var(--line-soft);font-size:14px;letter-spacing:.08em}
.site-header.on-dark .nav{background:var(--bg-deep);border-bottom-color:rgba(255,255,255,.1)}
/* Variante has-video-bg : panel solide navy, opaque pour masquer la vidéo proprement */
body.has-video-bg .nav{
background:#0A1628;
border-bottom:1px solid var(--gold-30);
color:var(--cream);
}
body.has-video-bg .nav a{
color:var(--cream);border-bottom-color:var(--gold-20);
}
body.has-video-bg .nav a:hover{color:var(--accent-lt)}
/* Masque la meta du hero quand le menu est ouvert (sinon elle bleed-through) */
body.nav-open .hero-film-meta,
body.nav-open .vbg-control{visibility:hidden}
.burger{display:flex}
/* Body lock lorsque le menu est ouvert */
body.nav-open{overflow:hidden}
.about,.contact-card{grid-template-columns:1fr}
.foot-grid{grid-template-columns:1fr 1fr;gap:var(--s-4)}
.feature{border-right:0 !important}
.hero-film-meta{top:78px;font-size:10px}
.hero-film-credit{display:none}
}
@media (max-width: 520px){
.header-cta .btn-ghost{display:none}
.foot-grid{grid-template-columns:1fr}
/* Hero title : calibré pour entrer sur 2 lignes à 375px sans débordement */
.display{
font-size:clamp(40px, 12vw, 60px);
letter-spacing:-.02em;
line-height:.98;
word-break:keep-all;
overflow-wrap:normal;
}
.hero-film-content .lede{font-size:15px;max-width:32ch}
/* Scroll hint caché sur mobile : les boutons "Voir les séjours" / "Notre philosophie"
font déjà office de CTA. Ça évite le chevauchement avec le contenu hero. */
.scroll-hint{display:none}
.hero-film-credit{display:none}
/* Ajuste aussi le padding bas du hero content pour qu'il respire */
.hero-film-content{padding-bottom:clamp(60px, 14vw, 100px)}
/* Meta : deux lignes propres — film + GPS */
.hero-film-meta{
top:74px;font-size:10px;letter-spacing:.22em;
flex-direction:column;align-items:flex-start;gap:6px;
padding-right:16px;
}
.hero-film-meta .sep{display:none}
.login-link span{display:none}
.lang-switch{font-size:10px}
.login-link{padding:8px 6px}
.site-header{padding:14px 16px}
}
/* ============== CARTE INTERACTIVE 3D ============== */
.carte-section{background:var(--bg-alt);max-width:none;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.carte-section .section-head,.carte-section .carte-wrap{max-width:var(--container);margin-left:auto;margin-right:auto}
.carte-wrap{
display:grid;grid-template-columns:1.7fr 1fr;gap:var(--s-4);align-items:stretch;
}
/* Container 3D */
.carte-3d{
position:relative;aspect-ratio:4/3;
perspective:1800px;transform-style:preserve-3d;
transition:transform 1.2s var(--ease-out);
will-change:transform;
}
.carte-canvas{
width:100%;height:100%;position:relative;overflow:hidden;
background:var(--bg-deep);
border:1px solid var(--line);
box-shadow:
0 1px 0 rgba(0,0,0,.05),
0 20px 50px -30px rgba(10,10,10,.35),
0 40px 100px -60px rgba(10,10,10,.25);
cursor:grab;
}
.carte-canvas:active{cursor:grabbing}
/* Stylisation Leaflet : passage en monochrome éditorial sur fond clair.
Sur fond vidéo (has-video-bg), on vire en teinte navy-or. */
.carte-canvas .leaflet-tile-pane{
filter:grayscale(.75) contrast(.88) brightness(1.08) saturate(.75);
}
.carte-canvas .leaflet-container{background:#e9e4d7}
/* Navy-or over video-bg : inversion + hue-rotate vers navy + saturate or */
body.has-video-bg .carte-canvas{background:var(--nvy-deep)}
body.has-video-bg .carte-canvas .leaflet-container{background:var(--nvy-deep)}
body.has-video-bg .carte-canvas .leaflet-tile-pane{
filter:
invert(.92)
hue-rotate(185deg)
brightness(.85)
contrast(1.05)
saturate(.65);
}
.carte-canvas .leaflet-control-attribution{display:none}
.carte-canvas .leaflet-control-zoom{border:0;box-shadow:none;margin:16px}
.carte-canvas .leaflet-control-zoom a{
background:rgba(10,10,10,.9);color:#fff;border:0;
width:36px;height:36px;line-height:36px;font-weight:300;
transition:background var(--t-med) var(--ease);
}
.carte-canvas .leaflet-control-zoom a:hover{background:var(--accent-dk)}
.carte-canvas .leaflet-control-zoom-in{border-radius:0!important;border-bottom:1px solid rgba(255,255,255,.1)!important}
.carte-canvas .leaflet-control-zoom-out{border-radius:0!important}
/* Marqueurs personnalisés */
.dp-marker-wrap{background:transparent;border:0}
.dp-marker{
width:44px;height:44px;border-radius:50%;
background:var(--ink);color:var(--white);
display:flex;align-items:center;justify-content:center;
font-family:var(--f-serif);font-style:italic;font-weight:400;font-size:15px;letter-spacing:.02em;
border:2px solid var(--bg);
box-shadow:0 0 0 1px rgba(10,10,10,.2), 0 6px 18px -4px rgba(10,10,10,.45);
cursor:pointer;
transition:transform .4s var(--ease-out), background .3s var(--ease-out);
transform-origin:center bottom;
position:relative;
}
.dp-marker::before{
content:"";position:absolute;inset:-6px;border:1px solid var(--accent);border-radius:50%;
opacity:0;transform:scale(.85);
transition:opacity .3s var(--ease-out), transform .4s var(--ease-out);
}
.dp-marker:hover,
.dp-marker.is-active{
background:var(--accent-dk);
transform:scale(1.18) translateY(-3px);
}
.dp-marker:hover::before,
.dp-marker.is-active::before{opacity:1;transform:scale(1)}
/* Pulse sur le marqueur actif */
.dp-marker.is-active::after{
content:"";position:absolute;inset:-12px;border-radius:50%;
border:1px solid var(--accent);
animation:marker-pulse 2s ease-out infinite;
pointer-events:none;
}
@keyframes marker-pulse{
0%{opacity:.8;transform:scale(.8)}
100%{opacity:0;transform:scale(1.8)}
}
/* Meta indicator haut-gauche */
.carte-meta{
position:absolute;top:18px;left:18px;z-index:5;
display:flex;align-items:center;gap:10px;
font-size:10px;letter-spacing:.24em;text-transform:uppercase;
color:rgba(255,255,255,.9);font-weight:500;
background:rgba(10,10,10,.65);padding:8px 14px;
backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
}
.carte-meta .rec{
width:6px;height:6px;border-radius:50%;background:var(--accent);
animation:rec-blink 2s ease-in-out infinite;
}
/* Boussole décorative */
.carte-compass{
position:absolute;bottom:18px;right:18px;z-index:5;
width:52px;height:52px;border-radius:50%;
background:rgba(10,10,10,.65);color:var(--white);
display:flex;align-items:center;justify-content:center;
backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
font-family:var(--f-serif);font-style:italic;font-size:12px;
padding-top:5px;
}
.carte-compass svg{position:absolute;opacity:.7}
/* Panneau info latéral */
.carte-panel{
background:var(--bg);
border:1px solid var(--line);
padding:var(--s-4);
display:grid;grid-template-rows:auto 1fr;gap:var(--s-3);
transition:opacity var(--t-med) var(--ease-out);
}
.panel-photo{
position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--bg-alt);
}
.panel-photo img{
width:100%;height:100%;object-fit:cover;
transition:transform .8s var(--ease-out), opacity var(--t-med) var(--ease-out);
}
.panel-photo.changing img{opacity:0;transform:scale(1.04)}
.panel-body{padding:var(--s-1) 0 0}
.panel-num{
display:block;font-family:var(--f-serif);font-style:italic;font-weight:400;
font-size:14px;color:var(--accent-dk);letter-spacing:.02em;margin-bottom:8px;
}
.panel-name{
font-family:var(--f-serif);font-weight:400;
font-size:clamp(24px, 2.4vw, 32px);line-height:1.05;letter-spacing:-.015em;
margin:0 0 10px;
}
.panel-loc{
color:var(--ink-soft);font-size:14px;line-height:1.6;margin:0 0 var(--s-3);max-width:40ch;
}
/* Responsive */
@media (max-width: 960px){
.carte-wrap{grid-template-columns:1fr;gap:var(--s-3)}
.carte-3d{aspect-ratio:1/1}
}
@media (prefers-reduced-motion: reduce){
.carte-3d,.dp-marker{transition:none!important}
.dp-marker.is-active::after{animation:none}
}
/* ============== COVERFLOW 3D (éventail Apple Cover Flow) ============== */
.cf-section{
position:relative;padding:clamp(80px, 10vw, 140px) 0 clamp(60px, 8vw, 100px);
background:#0A1628;color:var(--white);
overflow:hidden;isolation:isolate;
}
.cf-section::before{
/* vignette ambiance : bord assombri */
content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
background:radial-gradient(ellipse at center, transparent 30%, rgba(10,22,40,.92) 94%);
}
.cf-head{
position:relative;z-index:1;
max-width:var(--container);margin:0 auto clamp(32px, 4vw, 56px);
padding:0 var(--gutter);
}
.cf-head .eyebrow{color:rgba(245,237,224,.72);margin-bottom:var(--s-2)}
.cf-head .eyebrow-num{color:#C9A961;border-right-color:rgba(201,169,97,.3)}
.cf-title{
font-family:var(--f-serif);font-weight:300;
font-size:clamp(40px, 6vw, 88px);line-height:1.04;letter-spacing:-.02em;
color:#F5EDE0;margin:0;max-width:18ch;
}
.cf-title em{font-style:italic;font-weight:400}
/* Track 3D */
.cf-track{
position:relative;z-index:1;
width:100%;
height:clamp(380px, 62vh, 580px);
outline:none;
perspective:2000px;
perspective-origin:50% 42%;
}
.cf-track:focus-visible{box-shadow:inset 0 0 0 1px rgba(201,169,97,.4)}
.cf-stage{
position:absolute;inset:0;
transform-style:preserve-3d;
}
/* Carte */
.cf-card{
position:absolute;left:50%;top:50%;
height:clamp(340px, 58vh, 540px);
width:clamp(260px, 26vw, 400px);
border-radius:12px;
overflow:hidden;
cursor:pointer;
background:#0d1b30;
border:1px solid rgba(245,237,224,.18);
box-shadow:0 30px 90px -40px rgba(0,0,0,.55);
opacity:0;
transform:translate(-50%, -50%) translate3d(0, 0, -80px) scale(.7);
transition:
transform 1000ms cubic-bezier(.22,1,.36,1),
opacity 800ms cubic-bezier(.22,1,.36,1),
filter 800ms cubic-bezier(.22,1,.36,1),
box-shadow 700ms cubic-bezier(.22,1,.36,1);
will-change:transform, opacity, filter;
/* Force GPU compositing : les cartes sont layer-promotées en permanence */
backface-visibility:hidden;
-webkit-backface-visibility:hidden;
transform-style:preserve-3d;
user-select:none;
-webkit-user-drag:none;
}
.cf-card.is-current{
box-shadow:
0 60px 140px -40px rgba(0,0,0,.72),
0 0 0 1px rgba(201,169,97,.22);
}
.cf-card.is-current:hover{
box-shadow:
0 70px 150px -40px rgba(0,0,0,.78),
0 0 0 1px rgba(201,169,97,.35),
inset 0 0 80px rgba(201,169,97,.12);
}
.cf-card img{
position:absolute;inset:0;
width:100%;height:100%;
object-fit:cover;display:block;
transform:translate3d(0,0,0) scale(1);
transition:transform 1400ms cubic-bezier(.22,1,.36,1);
will-change:transform;
backface-visibility:hidden;
-webkit-backface-visibility:hidden;
}
.cf-card.is-current img{transform:translate3d(0,0,0) scale(1.04)}
/* Dégradé bas pour lisibilité */
.cf-card::after{
content:"";position:absolute;inset:auto 0 0 0;height:42%;z-index:2;
pointer-events:none;
background:linear-gradient(to top,
rgba(10,22,40,.95) 0%,
rgba(10,22,40,.6) 55%,
transparent 100%);
}
/* (Overlay holographique supprimé — photos propres sans filtre) */
/* Top : numéro + tag gravés */
.cf-card-top{
position:absolute;top:0;left:0;right:0;z-index:4;
display:flex;justify-content:space-between;
padding:16px 18px 0;
font-family:var(--f-sans);
font-size:10px;letter-spacing:.32em;text-transform:uppercase;
color:rgba(245,237,224,.85);
pointer-events:none;
}
/* Bandeau bas : titre + meta */
.cf-card-bot{
position:absolute;inset:auto 0 0 0;z-index:4;
padding:16px 18px 20px;color:#F5EDE0;
pointer-events:none;
}
.cf-card-name{
font-family:var(--f-serif);font-style:italic;font-weight:400;
font-size:clamp(22px, 2.2vw, 30px);line-height:1.08;
margin:0 0 6px;color:#F5EDE0;
text-shadow:0 2px 20px rgba(0,0,0,.5);
}
.cf-card-meta{
display:flex;align-items:center;gap:8px;
font-family:var(--f-sans);font-size:10px;letter-spacing:.22em;text-transform:uppercase;
color:rgba(245,237,224,.82);margin:0;
}
.cf-card-meta::before{
content:"";display:inline-block;width:20px;height:1px;background:#C9A961;
}
.cf-card-meta .sep{opacity:.45}
/* Contrôles bas */
.cf-controls{
position:relative;z-index:1;
max-width:var(--container);margin:clamp(28px, 4vw, 48px) auto 0;
padding:0 var(--gutter);
display:flex;align-items:flex-end;justify-content:space-between;gap:var(--s-4);
flex-wrap:wrap;
}
.cf-counter{
font-family:var(--f-serif);font-weight:300;
display:inline-flex;align-items:baseline;gap:10px;
color:#F5EDE0;
}
.cf-counter #cfCur{
font-family:var(--f-serif);font-style:italic;font-weight:300;
font-size:clamp(44px, 5vw, 72px);line-height:1;color:#F5EDE0;
display:inline-block;
}
.cf-counter #cfCur.cf-pop{animation:cf-cur-pop 600ms cubic-bezier(.22,1,.36,1)}
@keyframes cf-cur-pop{
0% {transform:translateY(14px);opacity:0}
60% {transform:translateY(-2px);opacity:1}
100%{transform:translateY(0);opacity:1}
}
.cf-sep{font-size:22px;color:rgba(201,169,97,.5);font-style:normal}
.cf-tot{
font-family:var(--f-sans);font-size:12px;letter-spacing:.25em;
color:rgba(245,237,224,.6);font-style:normal;
}
/* Pagination tirets */
.cf-dots{
display:flex;align-items:center;gap:10px;
flex:1 1 auto;justify-content:center;
}
.cf-dot{
width:22px;height:2px;border:0;padding:0;background:rgba(245,237,224,.3);
cursor:pointer;
transition:width 550ms cubic-bezier(.22,1,.36,1), background 550ms cubic-bezier(.22,1,.36,1);
}
.cf-dot:hover{background:rgba(245,237,224,.55)}
.cf-dot.is-active{width:56px;background:#F5EDE0}
.cf-dot:focus-visible{outline:1px solid rgba(201,169,97,.6);outline-offset:3px}
/* Flèches */
.cf-arrows{display:inline-flex;gap:10px}
.cf-arrow{
width:44px;height:44px;border-radius:50%;
border:1px solid rgba(245,237,224,.35);color:#F5EDE0;
background:transparent;
display:inline-flex;align-items:center;justify-content:center;
cursor:pointer;
transition:background var(--t-med) var(--ease), color var(--t-med) var(--ease), border-color var(--t-med) var(--ease);
}
.cf-arrow:hover{background:#F5EDE0;color:#0A1628;border-color:#F5EDE0}
.cf-arrow:focus-visible{outline:1px solid rgba(201,169,97,.6);outline-offset:3px}
/* Mobile */
@media (max-width: 760px){
.cf-section{padding:clamp(60px, 12vw, 90px) 0 50px}
.cf-track{height:clamp(380px, 64vh, 540px)}
.cf-card{
height:clamp(340px, 60vh, 520px);
/* 82vw = carte active bien cadrée, les voisines juste entrevues */
width:clamp(260px, 82vw, 380px);
}
.cf-controls{flex-direction:column;align-items:stretch;gap:22px}
.cf-dots{order:3;flex-wrap:wrap;justify-content:center}
.cf-counter{order:1;justify-content:center;align-self:center}
.cf-arrows{order:2;align-self:center}
}
/* Reduce motion */
@media (prefers-reduced-motion: reduce){
.cf-card{transition:opacity .2s linear}
.cf-card img{transition:none}
.cf-counter #cfCur.cf-pop{animation:none}
}
/* ============== CAROUSEL (ancien — désactivé) ============== */
.carousel-section{padding-bottom:calc(var(--section-y) * .8)}
.carousel{
position:relative;margin:0 -12px;
}
.car-track{
display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0, 1fr);
gap:var(--s-3);
overflow-x:auto;scroll-snap-type:x mandatory;
scrollbar-width:none;-ms-overflow-style:none;
padding:var(--s-2) 12px;
scroll-behavior:smooth;
}
.car-track::-webkit-scrollbar{display:none}
.car-slide{
scroll-snap-align:center;scroll-snap-stop:always;
position:relative;display:block;aspect-ratio:3/4;overflow:hidden;
background:var(--bg-alt);color:var(--white);
text-decoration:none;
transition:transform var(--t-med) var(--ease-out);
min-width:0;
}
.car-slide:hover{transform:translateY(-4px)}
.car-slide img{
width:100%;height:100%;object-fit:cover;
transition:transform 1s var(--ease-out);
}
.car-slide:hover img{transform:scale(1.05)}
.car-slide::after{
content:"";position:absolute;inset:0;
background:linear-gradient(180deg, rgba(0,0,0,0) 30%, rgba(0,0,0,.75) 100%);
pointer-events:none;
}
.car-info{
position:absolute;left:20px;right:20px;bottom:22px;z-index:1;
display:grid;gap:2px;
}
.car-num{
font-family:var(--f-serif);font-style:italic;font-weight:400;
font-size:13px;color:var(--accent);letter-spacing:.02em;margin-bottom:4px;
}
.car-info strong{
font-family:var(--f-serif);font-weight:400;
font-size:clamp(22px, 2.2vw, 28px);letter-spacing:-.01em;line-height:1.05;
color:#fff;
}
.car-loc{
font-size:11px;letter-spacing:.18em;text-transform:uppercase;
color:rgba(255,255,255,.78);margin-top:8px;
}
/* Flèches de navigation */
.car-nav{
position:absolute;top:50%;transform:translateY(-50%);
z-index:5;width:56px;height:56px;
display:inline-flex;align-items:center;justify-content:center;
color:var(--ink);background:var(--bg);
border-radius:50%;
transition:color var(--t-med) var(--ease), background var(--t-med) var(--ease), transform var(--t-med) var(--ease), opacity var(--t-med) var(--ease);
cursor:pointer;
box-shadow:0 8px 24px -12px rgba(0,0,0,.35);
}
.car-nav svg{transition:transform var(--t-med) var(--ease)}
.car-nav:hover{background:var(--ink);color:var(--bg)}
.car-nav.car-prev:hover svg{transform:translateX(-2px)}
.car-nav.car-next:hover svg{transform:translateX(2px)}
.car-prev{left:-8px}
.car-next{right:-8px}
.car-nav.is-disabled{opacity:.3;pointer-events:none}
/* Dots */
.car-dots{
display:flex;justify-content:center;gap:10px;
margin-top:var(--s-4);
}
.car-dot{
width:28px;height:2px;background:var(--line);
transition:background var(--t-med) var(--ease), width var(--t-med) var(--ease);
cursor:pointer;padding:0;min-height:auto;
}
.car-dot:hover{background:var(--ink-muted)}
.car-dot.is-active{background:var(--ink);width:40px}
@media (min-width: 1100px){
.car-track{grid-auto-columns:calc((100% - var(--s-3) * 2) / 3)}
}
@media (min-width: 720px) and (max-width: 1099px){
.car-track{grid-auto-columns:calc((100% - var(--s-3)) / 2)}
}
@media (max-width: 719px){
.car-track{grid-auto-columns:88%}
.car-nav{width:46px;height:46px}
}
/* ============== REVEAL ============== */
.reveal{opacity:0;transform:translateY(28px);transition:opacity .9s var(--ease-out), transform .9s var(--ease-out)}
.reveal.in{opacity:1;transform:none}
.hero-film-content > *{
/* Pas d'opacity:0 initiale — si l'animation ne démarre pas (Safari iOS bug occasionnel),
l'élément reste visible par défaut (opacity:1). L'animation ajoute le mouvement. */
animation:hero-in 1.1s var(--ease-out) both;
}
.hero-film-content > *:nth-child(1){animation-delay:.1s}
.hero-film-content > *:nth-child(2){animation-delay:.25s}
.hero-film-content > *:nth-child(3){animation-delay:.4s}
.hero-film-content > *:nth-child(4){animation-delay:.55s}
/* Keyframe explicite (from + to) — l'état initial opacity:0 est défini DANS le keyframe,
donc si l'animation ne tourne pas, l'élément reste à sa valeur par défaut (visible). */
@keyframes hero-in{
from{opacity:0;transform:translateY(40px)}
to{opacity:1;transform:none}
}
@media (prefers-reduced-motion: reduce){
.reveal,.hero-film-content > *{opacity:1;transform:none;animation:none}
.scroll-hint-line{animation:none}
.hero-film-meta .rec{animation:none}
}
/* ============================================================
SAFARI iOS — FORCE VISIBILITÉ DU HERO
Override de sécurité après tous les autres sélecteurs.
Si pour une raison quelconque (animation bloquée, kinetic figé, stacking context
capricieux), le contenu du hero reste caché, ces !important le forcent visible.
Le seul coût : les fade-in subtils sont désactivés sur les éléments concernés.
============================================================ */
.hero-film{
min-height: 100vh !important;
min-height: 100svh !important;
}
.hero-film-content,
.hero-film-content > *,
.hero-film-content .eyebrow,
.hero-film-content h1,
.hero-film-content .lede,
.hero-film-content .hero-actions,
.hero-film-content .hero-actions > *{
opacity: 1 !important;
visibility: visible !important;
transform: none !important;
animation: none !important;
}
/* Kinetic words : force visibility aussi (si IO ne trigger pas) */
.hero-film-content [data-kinetic] .kw{
opacity: 1 !important;
transform: none !important;
}
/* ============================================================
DIRECTION B — Verre fumé de Rolls
Système de transparence global avec vidéo en fond permanent.
Les overlays sont pilotés par js/video-bg.js via CSS vars.
============================================================ */
/* Le body devient "transparent" par endroits : plus de BG crème permanente.
On garde le crème sur les sections qui sont déjà opaques (éditorial). */
body.has-video-bg{
background:var(--nvy-deep);
color:var(--white);
}
/* ------------------ COUCHE VIDÉO GLOBALE ------------------ */
.vbg-wrap{
position:fixed;inset:0;z-index:0;
pointer-events:none;
overflow:hidden;
background:var(--nvy-deep);
}
/* iOS Safari : fixed + iframe bug historique. Fallback : sticky wrapper
en haut du body qui reste 'collé' pendant que le contenu défile par-dessus. */
html.ios-safari body.has-video-bg{
position:relative;
}
html.ios-safari .vbg-wrap{
position:sticky;top:0;
height:100vh;height:100svh; /* safe-view-height iOS */
margin-bottom:-100vh;
/* sticky + -margin = reproduit exactement l'effet position:fixed
sans les bugs iOS. Le contenu scrolle par-dessus. */
}
html.ios-safari .vbg-overlay,
html.ios-safari .vbg-grain{
position:sticky;top:0;
height:100vh;height:100svh;
margin-bottom:-100vh;
}
.vbg-poster{
position:absolute;inset:0;width:100%;height:100%;
object-fit:cover;
filter:saturate(1.05);
z-index:0;
transition:opacity 800ms var(--ease-cine);
transform-origin:50% 45%;
will-change:transform;
}
.vbg-poster.is-hidden{opacity:0}
/* Ken Burns — zoom lent infini, imperceptible, cinématique.
Durée longue + ease-in-out = jamais de saccade perçue. */
@keyframes vbg-kenburns {
0% { transform:scale(1) translate3d(0, 0, 0); }
50% { transform:scale(1.08) translate3d(-1.5%, -1%, 0); }
100% { transform:scale(1) translate3d(0, 0, 0); }
}
.vbg-poster.is-kenburns{
animation:vbg-kenburns 48s var(--ease-cine) infinite;
}
@media (prefers-reduced-motion: reduce){
.vbg-poster.is-kenburns{ animation:none }
}
/* YouTube iframe : on le scale pour qu'aucune bande noire n'apparaisse.
Le ratio 16:9 est étiré à couvrir le viewport, caché si trop étroit. */
.vbg-frame{
position:absolute;top:50%;left:50%;
/* 56.25vw = 100vh*(16/9) pour couvrir en hauteur quand large */
width:max(177.78vh, 100vw);
height:max(100vh, 56.25vw);
transform:translate(-50%, -50%);
border:0;
pointer-events:none;
}
/* ------------------ COUCHE OVERLAY PILOTÉE ------------------ */
.vbg-overlay{
position:fixed;inset:0;z-index:1;
pointer-events:none;
background:var(--video-ov);
backdrop-filter:blur(var(--video-blur)) saturate(1.15);
-webkit-backdrop-filter:blur(var(--video-blur)) saturate(1.15);
transition:background 700ms var(--ease-cine),
backdrop-filter 700ms var(--ease-cine);
will-change:background, backdrop-filter;
}
/* Grain pellicule 4% — PNG pré-bakée 240×240 tileable, image once + GPU composite */
.vbg-grain{
position:fixed;inset:0;z-index:2;
pointer-events:none;
opacity:var(--video-grain);
mix-blend-mode:overlay;
background-image:url("../img/grain.png?v=b1");
background-size:240px 240px;
background-repeat:repeat;
transition:opacity 700ms var(--ease-cine);
will-change:opacity;
}
/* ------------------ TOUT LE CONTENU PAR-DESSUS ------------------ */
/* Exclut aussi .site-header (doit garder son z-index:50 pour le burger) */
body.has-video-bg > *:not(.vbg-wrap):not(.vbg-overlay):not(.vbg-grain):not(.vbg-control):not(.site-header){
position:relative;z-index:3;
}
/* Header au-dessus de tout le contenu mais sous les couches vbg modales */
body.has-video-bg .site-header{z-index:50}
/* ------------------ PAUSE / PLAY BUTTON ------------------ */
.vbg-control{
position:fixed;right:clamp(16px, 2.5vw, 36px);bottom:clamp(16px, 2.5vw, 36px);
z-index:40;
width:44px;height:44px;border-radius:50%;
border:1px solid var(--gold-30);
background:rgba(10,22,40,.55);
backdrop-filter:blur(12px) saturate(1.2);
-webkit-backdrop-filter:blur(12px) saturate(1.2);
color:var(--accent-lt);
display:inline-flex;align-items:center;justify-content:center;
cursor:pointer;
transition:background 400ms var(--ease-cine),
border-color 400ms var(--ease-cine),
color 400ms var(--ease-cine),
transform 500ms var(--ease-cine);
}
.vbg-control:hover{
background:rgba(201,169,97,.18);
border-color:var(--accent);color:var(--cream);
transform:scale(1.06);
}
.vbg-control svg{width:14px;height:14px;fill:currentColor}
.vbg-control .pulse{
position:absolute;top:6px;right:6px;
width:6px;height:6px;border-radius:50%;
background:var(--accent);
box-shadow:0 0 8px rgba(201,169,97,.8);
animation:vbg-pulse 2.4s ease-in-out infinite;
}
.vbg-control.is-paused .pulse{animation:none;background:transparent;box-shadow:none}
@keyframes vbg-pulse{
0%,100%{opacity:.4;transform:scale(.9)}
50% {opacity:1;transform:scale(1.2)}
}
/* ------------------ STICKY BOOKING BAR (mobile uniquement) ------------------ */
/* Brief explicite : « CTA de réservation en sticky bottom bar (non présent sur desktop) » */
.vbg-booking{
display:none;
}
@media (max-width: 820px){
.vbg-booking{
position:fixed;
bottom:max(16px, env(safe-area-inset-bottom));
left:16px;
right:72px; /* réserve l'espace du pause button à droite */
z-index:39;
display:inline-flex;align-items:center;gap:12px;
padding:14px 22px;
height:52px;
background:var(--cream);
color:var(--nvy-deep);
border:1px solid var(--cream);
border-radius:999px;
font-family:var(--f-sans);font-weight:500;
font-size:12px;letter-spacing:.22em;text-transform:uppercase;
box-shadow:
0 20px 40px -10px rgba(0,0,0,.4),
var(--glow-gold);
text-decoration:none;
transition:
transform 500ms var(--ease-cine),
background 500ms var(--ease-cine),
color 500ms var(--ease-cine),
opacity 500ms var(--ease-cine);
isolation:isolate;
overflow:hidden;
}
.vbg-booking::before{
content:"";position:absolute;inset:auto 0 0;
height:0;background:var(--accent);
transition:height 520ms var(--ease-cine);
z-index:-1;
}
.vbg-booking:active{
transform:translateY(2px) scale(.98);
}
.vbg-booking:hover::before,
.vbg-booking:active::before{height:100%}
.vbg-booking:hover,.vbg-booking:active{color:var(--cream);border-color:var(--accent)}
.vbg-booking-mark{
width:8px;height:8px;border-radius:50%;
background:var(--accent);
box-shadow:0 0 8px rgba(201,169,97,.9);
flex-shrink:0;
animation:vbg-pulse 2.4s ease-in-out infinite;
}
.vbg-booking-label{
flex:1;
text-align:left;
white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.vbg-booking svg{flex-shrink:0;transition:transform 400ms var(--ease-cine)}
.vbg-booking:hover svg,.vbg-booking:active svg{transform:translateX(3px)}
/* Cacher quand on est déjà sur la section Séjourner */
body.booking-in-view .vbg-booking{
opacity:0;pointer-events:none;transform:translateY(80px);
}
/* Cacher quand le menu burger est ouvert */
body.nav-open .vbg-booking{opacity:0;pointer-events:none}
}
/* ------------------ GLASS PANELS : niveaux B ------------------ */
/* Panneau générique lévitant. Appliqué via data-level="1|2|3" ou .gp-level-X */
.gp, [data-overlay="1"] > .gp-inner, [data-overlay="2"] > .gp-inner, [data-overlay="3"] > .gp-inner{
position:relative;
isolation:isolate;
}
/* Niveau 1 — voile léger */
.gp-level-1{
background:linear-gradient(180deg, rgba(10,22,40,.32) 0%, rgba(10,22,40,.24) 100%), var(--terra-warm);
backdrop-filter:var(--blur-s);
-webkit-backdrop-filter:var(--blur-s);
border-top:1px solid var(--gold-20);
border-bottom:1px solid var(--gold-20);
box-shadow:inset 0 1px 0 rgba(245,237,224,.06), var(--shadow-lev);
}
/* Niveau 2 — vitre teintée glacée + glow or */
.gp-level-2{
background:linear-gradient(180deg, rgba(15,36,56,.62) 0%, rgba(15,36,56,.54) 100%);
backdrop-filter:var(--blur-m);
-webkit-backdrop-filter:var(--blur-m);
border-top:1px solid var(--gold-30);
border-bottom:1px solid var(--gold-30);
box-shadow:inset 0 1px 0 rgba(245,237,224,.08), var(--shadow-lev), var(--glow-gold);
}
/* Niveau 3 — opaque */
.gp-level-3{
background:var(--glass-3);
border-top:1px solid var(--gold-20);
border-bottom:1px solid var(--gold-20);
}
/* Transition douce entre sections : dégradés de 120 px en haut et bas */
[data-overlay]{position:relative}
[data-overlay]::before{
content:"";position:absolute;left:0;right:0;top:0;height:120px;
background:linear-gradient(to bottom, rgba(10,22,40,.55) 0%, transparent 100%);
pointer-events:none;z-index:1;
}
[data-overlay]::after{
content:"";position:absolute;left:0;right:0;bottom:0;height:120px;
background:linear-gradient(to top, rgba(10,22,40,.55) 0%, transparent 100%);
pointer-events:none;z-index:1;
}
[data-overlay="0"]::before,
[data-overlay="0"]::after{display:none}
/* ------------------ MONO LABELS ------------------ */
.mono-label{
font-family:var(--f-mono);
font-weight:400;
font-size:11px;letter-spacing:.08em;
color:var(--accent-lt);
text-transform:uppercase;
}
.mono-label .dot{
display:inline-block;width:4px;height:4px;border-radius:50%;
background:var(--accent);margin:0 10px;vertical-align:middle;
animation:vbg-pulse 2.4s ease-in-out infinite;
}
/* ------------------ NICE CLOCK ------------------ */
.nice-clock{
display:none;
font-family:var(--f-mono);
font-size:11px;letter-spacing:.14em;color:var(--accent-lt);
}
.nice-clock::before{
content:"";display:inline-block;width:4px;height:4px;border-radius:50%;
background:var(--accent);margin-right:6px;vertical-align:middle;
}
/* Variante header (inline, desktop ≥ 1100px) */
.nice-clock--header{margin-right:var(--s-3)}
@media (min-width: 1100px){
.nice-clock--header{display:inline-flex;align-items:center;gap:6px}
}
/* Variante nav panel (visible seulement quand burger ouvert sur mobile) */
.nice-clock--nav{
display:block;
font-size:12px;letter-spacing:.2em;
padding:16px 0;margin-top:var(--s-3);
border-top:1px solid var(--gold-20);
color:var(--accent-lt);
text-align:left;
}
@media (min-width: 961px){
.nice-clock--nav{display:none !important}
}
/* ------------------ HEADER — update pour fond vidéo ------------------ */
body.has-video-bg .site-header{
border-bottom-color:transparent;
}
body.has-video-bg .site-header.is-scrolled{
background:rgba(10,22,40,.55);
backdrop-filter:blur(20px) saturate(1.2);
-webkit-backdrop-filter:blur(20px) saturate(1.2);
border-bottom-color:var(--gold-20);
}
body.has-video-bg .site-header .brand-mono,
body.has-video-bg .site-header .nav a,
body.has-video-bg .site-header .login-link span{color:var(--cream)}
body.has-video-bg .site-header .brand-sub{color:rgba(245,237,224,.6)}
body.has-video-bg .site-header .lang-switch button{color:rgba(245,237,224,.6)}
body.has-video-bg .site-header .lang-switch button.is-active,
body.has-video-bg .site-header .lang-switch button:hover{color:var(--cream)}
body.has-video-bg .site-header .nav a::after{background:var(--accent)}
/* Lien « Séjourner » en CTA dans la nav (liseré or) */
.site-header .nav-cta{
padding:8px 16px !important;
border:1px solid var(--accent);
border-radius:999px;
letter-spacing:.22em;font-size:11px;
}
body.has-video-bg .site-header .nav-cta{color:var(--cream);border-color:var(--accent)}
body.has-video-bg .site-header .nav-cta:hover{background:var(--accent);color:var(--nvy-deep)}
body.has-video-bg .site-header .burger span{background:var(--cream)}
/* ------------------ HERO niveau 0 — simplifié ------------------ */
body.has-video-bg .hero-film{
background:transparent;
}
body.has-video-bg .hero-film-bg{display:none}
body.has-video-bg .hero-film-content h1,
body.has-video-bg .hero-film-content .lede,
body.has-video-bg .hero-film-content .eyebrow,
body.has-video-bg .hero-film-meta,
body.has-video-bg .hero-film-credit{
text-shadow:var(--shadow-text);
}
/* ------------------ SÉJOURNER — niveau 3 opaque, formulaire conversion ------------------ */
.sejourner{
padding:clamp(80px, 10vw, 160px) 0;
background:var(--nvy-deep); /* plus de vidéo visible ici : conversion */
color:var(--cream);
position:relative;
}
.sejourner-inner{
max-width:min(var(--container), 1080px);
margin:0 auto;
padding:0 var(--gutter);
}
.sejourner-head{margin-bottom:clamp(40px, 5vw, 72px);max-width:620px}
.sejourner-head .eyebrow{color:rgba(245,237,224,.72)}
.sejourner-head .eyebrow-num{color:var(--accent-lt);border-right-color:var(--gold-20)}
.sejourner-head .h-display{color:var(--cream)}
.sejourner-head .h-display em{color:var(--accent-lt)}
.sejourner-lede{
font-family:var(--f-serif);font-style:italic;font-weight:300;
font-size:clamp(17px, 1.3vw, 20px);line-height:1.55;
color:rgba(245,237,224,.78);
margin:var(--s-3) 0 0;max-width:52ch;
}
.sejourner-form{
display:flex;flex-direction:column;gap:clamp(16px, 2vw, 28px);
}
.sf-row{
display:grid;grid-template-columns:1fr 1fr;gap:clamp(16px, 2vw, 28px);
}
@media (max-width: 640px){
.sf-row{grid-template-columns:1fr}
}
.sf-field{
display:flex;flex-direction:column;gap:8px;
}
.sf-field--full{grid-column:1/-1}
.sf-label{
font-family:var(--f-mono);
font-size:10px;letter-spacing:.28em;text-transform:uppercase;
color:rgba(245,237,224,.6);
}
.sf-label em{
color:rgba(245,237,224,.35);
font-family:var(--f-serif);font-style:italic;
text-transform:none;letter-spacing:.02em;font-size:12px;
}
.sf-field input,
.sf-field select,
.sf-field textarea{
font-family:var(--f-serif);font-weight:300;
font-size:clamp(18px, 1.4vw, 22px);
color:var(--cream);
background:transparent;
border:0;
border-bottom:1px solid var(--gold-20);
padding:12px 0;
outline:none;
transition:border-color 400ms var(--ease-cine);
resize:none;
font-feature-settings:"tnum" 1;
}
.sf-field input:focus,
.sf-field select:focus,
.sf-field textarea:focus{
border-bottom-color:var(--accent);
}
.sf-field input::placeholder,
.sf-field textarea::placeholder{
color:rgba(245,237,224,.35);font-style:italic;font-weight:300;
}
.sf-field select{
appearance:none;
background-image:
linear-gradient(45deg, transparent 50%, var(--accent) 50%),
linear-gradient(135deg, var(--accent) 50%, transparent 50%);
background-position:
calc(100% - 14px) 50%,
calc(100% - 8px) 50%;
background-size:6px 6px;
background-repeat:no-repeat;
padding-right:28px;
cursor:pointer;
}
.sf-field select option{
background:var(--nvy-deep);color:var(--cream);
}
.sf-submit{
display:flex;flex-wrap:wrap;align-items:center;gap:clamp(18px, 2vw, 36px);
margin-top:clamp(16px, 2vw, 28px);
padding-top:clamp(24px, 3vw, 40px);
border-top:1px solid var(--gold-20);
}
/* Bouton or « liquid-fill » : crème plein au repos, or plein au hover via transform-origin bas */
.btn-gold{
position:relative;overflow:hidden;
display:inline-flex;align-items:center;gap:12px;
font-family:var(--f-sans);font-weight:500;
font-size:12px;letter-spacing:.28em;text-transform:uppercase;
color:var(--nvy-deep);
background:var(--cream);
padding:18px 32px;
border:1px solid var(--cream);
border-radius:2px;
cursor:pointer;
transition:color 500ms var(--ease-cine), border-color 500ms var(--ease-cine);
isolation:isolate;
}
.btn-gold::before{
content:"";position:absolute;inset:auto 0 0;
height:0;background:var(--accent);
transition:height 520ms var(--ease-cine);
z-index:-1;
}
.btn-gold:hover{
color:var(--cream);
border-color:var(--accent);
}
.btn-gold:hover::before{height:100%}
.btn-gold svg{transition:transform 500ms var(--ease-cine)}
.btn-gold:hover svg{transform:translateX(4px)}
.btn-gold--big{padding:22px 38px;font-size:13px;letter-spacing:.32em}
.sf-reply{
font-family:var(--f-mono);
font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;
color:rgba(245,237,224,.5);
margin:0;
}
/* ------------------ EXPÉRIENCES NICE — scroll horizontal cartes verre fumé ------------------ */
.experiences{overflow:hidden}
.experiences .section-head{
max-width:var(--container);margin:0 auto clamp(40px, 5vw, 72px);
padding:0 var(--gutter);
}
.exp-lede{
font-family:var(--f-serif);font-style:italic;font-weight:300;
font-size:clamp(16px, 1.3vw, 20px);
color:rgba(245,237,224,.8);
margin:var(--s-3) 0 0;max-width:48ch;
}
.exp-scroll{
display:flex;gap:18px;
overflow-x:auto;
scroll-snap-type:x mandatory;
scroll-padding-inline:var(--gutter);
padding:0 var(--gutter) 12px;
scrollbar-width:none;-ms-overflow-style:none;
scroll-behavior:smooth;
outline:none;
}
.exp-scroll::-webkit-scrollbar{display:none}
.exp-scroll:focus-visible{box-shadow:inset 0 0 0 1px var(--gold-30)}
.exp-card{
position:relative;
flex:0 0 clamp(260px, 34vw, 420px);
height:clamp(380px, 52vh, 520px);
scroll-snap-align:start;
border-radius:8px;
overflow:hidden;
border:1px solid var(--gold-20);
box-shadow:var(--shadow-lev);
backdrop-filter:blur(6px) saturate(1.05);
-webkit-backdrop-filter:blur(6px) saturate(1.05);
transition:transform 900ms var(--ease-cine), box-shadow 900ms var(--ease-cine), border-color 900ms var(--ease-cine);
will-change:transform;
cursor:pointer;
color:var(--cream);
isolation:isolate;
}
.exp-card:hover{
transform:translateY(-6px);
box-shadow:
0 90px 160px -50px rgba(0,0,0,.6),
var(--glow-gold-2);
border-color:var(--gold-30);
}
.exp-card-bg{
position:absolute;inset:0;
background-size:cover;background-position:center;
transform:scale(1.04) translate3d(0,0,0);
transition:transform 1600ms var(--ease-cine), filter 900ms var(--ease-cine);
filter:brightness(.58) saturate(.85) sepia(.08);
will-change:transform, filter;
}
.exp-card:hover .exp-card-bg{
transform:scale(1.1) translate3d(0,0,0);
filter:brightness(.7) saturate(1) sepia(0);
}
.exp-card-shade{
position:absolute;inset:0;z-index:1;
background:linear-gradient(
to top,
rgba(10,22,40,.95) 0%,
rgba(10,22,40,.55) 45%,
rgba(10,22,40,.2) 75%,
rgba(10,22,40,0) 100%
);
}
.exp-card-tag{
position:absolute;top:20px;left:22px;z-index:2;
font-family:var(--f-mono);
font-size:10px;letter-spacing:.32em;text-transform:uppercase;
color:var(--accent-lt);
display:inline-flex;align-items:center;gap:10px;
}
.exp-card-tag::before{
content:"";display:inline-block;width:18px;height:1px;background:var(--accent);
}
.exp-card-title{
position:absolute;bottom:64px;left:22px;right:22px;z-index:2;
font-family:var(--f-serif);font-weight:300;
font-size:clamp(26px, 2.8vw, 40px);line-height:1.05;letter-spacing:-.015em;
color:var(--cream);margin:0;
text-shadow:var(--shadow-text);
}
.exp-card-title em{font-style:italic;font-weight:400;color:var(--accent-lt)}
.exp-card-meta{
position:absolute;bottom:18px;left:22px;right:22px;z-index:2;
font-family:var(--f-mono);
font-size:10.5px;letter-spacing:.14em;
color:rgba(245,237,224,.78);
margin:0;line-height:1.5;
text-transform:uppercase;
}
.exp-card-meta em{color:var(--accent-lt);font-style:italic;text-transform:none;letter-spacing:.02em}
.exp-scroll-hint{
display:flex;align-items:center;gap:12px;
max-width:var(--container);margin:clamp(28px, 4vw, 48px) auto 0;
padding:0 var(--gutter);
font-family:var(--f-mono);font-size:10px;letter-spacing:.32em;text-transform:uppercase;
color:rgba(245,237,224,.55);
}
.exp-hint-line{flex:0 0 40px;height:1px;background:var(--gold-30)}
.exp-hint-arrow{
color:var(--accent);margin-left:auto;
animation:exp-nudge 2.4s ease-in-out infinite;
}
@keyframes exp-nudge{
0%,100%{transform:translateX(0)}
50% {transform:translateX(6px)}
}
@media (max-width: 760px){
.exp-card{
flex:0 0 78vw;
height:clamp(340px, 62vh, 460px);
}
.exp-scroll{gap:14px;scroll-padding-inline:20px;padding:0 20px 12px}
.exp-scroll-hint{padding:0 20px}
}
/* ------------------ MANIFESTO — citation signée, glass slide-up ------------------ */
.manifesto{
padding:clamp(80px, 12vw, 180px) 0 clamp(80px, 12vw, 180px);
overflow:hidden;
}
.manifesto-inner{
max-width:min(var(--container), 980px);
margin:0 auto;
padding:0 var(--gutter);
text-align:center;
color:var(--cream);
}
.manifesto-inner .eyebrow{
justify-content:center;
margin-bottom:clamp(24px, 4vw, 48px);
color:var(--accent-lt);
}
.manifesto-inner .eyebrow-num{
color:var(--accent);
font-family:var(--f-serif);font-style:italic;
border-right:0;padding-right:8px;margin-right:0;
}
.manifesto-quote{
font-family:var(--f-serif);font-style:italic;font-weight:300;
font-size:clamp(32px, 4.2vw, 64px);
line-height:1.22;letter-spacing:-.015em;
color:var(--cream);
margin:0 0 clamp(28px, 4vw, 48px);
padding:0;
text-shadow:var(--shadow-text);
position:relative;
}
.manifesto-quote em{color:var(--accent-lt);font-weight:400}
.manifesto-mark{
color:var(--accent);
font-size:1.8em;
font-style:normal;
font-family:var(--f-serif);
line-height:0;
position:relative;top:.15em;
margin:0 .05em;
opacity:.75;
}
.manifesto-sign{
display:inline-flex;align-items:center;gap:12px;
font-family:var(--f-sans);
font-size:11px;letter-spacing:.32em;text-transform:uppercase;
font-style:normal;
color:rgba(245,237,224,.75);
}
.manifesto-sign em{
color:var(--accent-lt);font-style:italic;
font-family:var(--f-serif);text-transform:none;
font-size:14px;letter-spacing:.02em;
}
.manifesto-sign .sep{opacity:.45}
.manifesto-rule{
display:inline-block;width:40px;height:1px;background:var(--accent);
}
/* Apparition slide-up cinématique */
.manifesto-inner{
opacity:0;
transform:translateY(60px);
transition:opacity 1400ms var(--ease-cine), transform 1400ms var(--ease-cine);
}
.manifesto.is-visible .manifesto-inner{
opacity:1;transform:translateY(0);
}
@media (prefers-reduced-motion: reduce){
.manifesto-inner{transition:none;opacity:1;transform:none}
}
/* ------------------ SCORE AIRBNB — tabular roll-up géant ------------------ */
.rev-score{
position:relative;
display:flex;align-items:center;gap:clamp(24px, 4vw, 56px);
padding:clamp(48px, 7vw, 96px) var(--gutter) clamp(48px, 7vw, 96px);
max-width:var(--container);margin:0 auto;
color:var(--cream);
border-top:1px solid var(--gold-30);
border-bottom:1px solid var(--gold-30);
}
.rev-score-value{
font-family:var(--f-serif);
font-weight:300;font-style:italic;
font-size:clamp(110px, 18vw, 240px);
line-height:1;letter-spacing:-.04em;
color:var(--cream);
font-feature-settings:"tnum" 1, "lnum" 1;
font-variant-numeric:tabular-nums lining-nums;
text-shadow:var(--shadow-text);
display:inline-flex;align-items:baseline;
}
.rev-digit{
display:inline-block;
/* Height slightly > 1em + clip-path strict : élimine tout débord de glyph italic */
height:1em;
overflow:clip; /* strict modern clipping (supporté partout >=2021) */
overflow-clip-margin:0;
clip-path:inset(0); /* fallback : force le rectangle de clip */
line-height:1;
vertical-align:baseline;
font-feature-settings:"tnum" 1, "lnum" 1;
font-variant-numeric:tabular-nums lining-nums;
}
.rev-digit > .roll{
display:block;
transform:translateY(0);
transition:transform 2200ms var(--ease-cine);
line-height:1;
}
.rev-digit > .roll > span{
display:block;
line-height:1;
height:1em;
font-feature-settings:"tnum" 1, "lnum" 1;
font-variant-numeric:tabular-nums lining-nums;
}
.rev-dot{
font-style:normal;
color:var(--accent);
opacity:.75;
margin:0 .02em;
display:inline-block;
line-height:1;
}
.rev-score-meta{
display:flex;flex-direction:column;gap:14px;
align-self:center; /* aligné verticalement au centre du gros nombre */
padding-top:.1em;
}
.rev-score-fraction{
font-family:var(--f-serif);font-style:italic;font-weight:300;
font-size:clamp(32px, 4.2vw, 56px);
color:var(--accent-lt);line-height:1;
font-variant-numeric:tabular-nums;
}
.rev-score-source{
display:block;
font-family:var(--f-mono);
font-size:11px;letter-spacing:.18em;
color:rgba(245,237,224,.7);
text-transform:uppercase;
max-width:28ch;
line-height:1.65;
font-variant-numeric:tabular-nums;
}
/* Logo Airbnb discret en bas à droite */
.rev-score-airbnb{
position:absolute;right:var(--gutter);bottom:clamp(20px, 3vw, 32px);
display:inline-flex;align-items:center;gap:10px;
opacity:.5;
font-family:var(--f-mono);font-size:10px;letter-spacing:.24em;
text-transform:uppercase;color:var(--cream);
transition:opacity 500ms var(--ease-cine);
}
.rev-score-airbnb:hover{opacity:.85}
.rev-score-airbnb svg{width:auto;height:22px;max-height:22px}
@media (max-width: 760px){
.rev-score{
flex-direction:column;align-items:flex-start;gap:18px;
padding:clamp(40px, 8vw, 56px) var(--gutter) clamp(72px, 10vw, 96px);
}
.rev-score-value{font-size:clamp(100px, 36vw, 160px)}
.rev-score-meta{padding-top:0;gap:10px}
.rev-score-fraction{font-size:clamp(26px, 7vw, 36px)}
.rev-score-airbnb{right:var(--gutter);bottom:18px;font-size:9px}
.rev-score-airbnb svg{height:18px}
}
/* ------------------ KINETIC TITLES ------------------ */
/* Révélation mot par mot sur IntersectionObserver. Les et
sont préservés. */
[data-kinetic]{
overflow:hidden; /* le text-shadow peut déborder en y — on clip juste le x */
padding-bottom:.12em; /* space for overflow on descendants */
}
[data-kinetic] .kw{
display:inline-block;
opacity:0;
transform:translateY(.85em) rotate(.5deg);
transition:
opacity 820ms var(--ease-cine),
transform 920ms var(--ease-cine);
will-change:opacity, transform;
}
[data-kinetic].kinetic-in .kw{
opacity:1;
transform:translateY(0) rotate(0);
}
@media (prefers-reduced-motion: reduce){
[data-kinetic] .kw{transition:none;opacity:1;transform:none}
}
/* ------------------ ZONES DE RESPIRATION ------------------ */
.breath-zone{
position:relative;z-index:3;
min-height:30vh;
display:flex;align-items:center;justify-content:center;
pointer-events:none;
}
.breath-zone--large{min-height:42vh}
.breath-zone-label{
font-family:var(--f-mono);
font-size:10px;letter-spacing:.32em;text-transform:uppercase;
color:rgba(201,169,97,.55);
text-align:center;
opacity:0;
animation:breath-in 1.6s var(--ease-cine) forwards;
}
.breath-zone-label::before,
.breath-zone-label::after{
content:"";display:inline-block;
width:40px;height:1px;background:var(--gold-30);
vertical-align:middle;margin:0 16px;
}
@keyframes breath-in{to{opacity:1}}
/* ------------------ MOBILE : pause button seulement, overlays identiques ------------------ */
/* Les gp-level-* gardent les MÊMES valeurs desktop/mobile : la vidéo doit
rester en filigrane partout, la lisibilité vient du text-shadow. */
@media (max-width: 760px){
.vbg-control{
right:max(12px, env(safe-area-inset-right));
bottom:max(12px, env(safe-area-inset-bottom));
width:40px;height:40px;
}
}
/* ------------------ reduced-motion ------------------ */
@media (prefers-reduced-motion: reduce){
.vbg-frame{display:none}
.vbg-poster{opacity:1 !important}
.vbg-overlay,.vbg-grain{transition:none}
.vbg-control .pulse{animation:none}
.breath-zone-label{animation:none;opacity:1}
}
/* ============================================================
OVERRIDES SECTIONS pour has-video-bg
Rend les sections transparentes + inverse la typo en crème
============================================================ */
body.has-video-bg .about,
body.has-video-bg .sejours,
body.has-video-bg .experiences,
body.has-video-bg .reviews,
body.has-video-bg .carte-section,
body.has-video-bg .cf-section{
color:var(--cream);
max-width:none;
margin:0;
}
/* Cassage des fonds pleins */
body.has-video-bg .experiences{background:transparent;border-top-color:var(--gold-30);border-bottom-color:var(--gold-30)}
body.has-video-bg .carte-section{background:transparent;border-top-color:var(--gold-30);border-bottom-color:var(--gold-30)}
body.has-video-bg .cf-section{background:transparent}
body.has-video-bg .cf-section::before{display:none}
/* Typo : titres & textes en crème */
body.has-video-bg .about .h-display,
body.has-video-bg .experiences .h-display,
body.has-video-bg .reviews .h-display,
body.has-video-bg .carte-section .h-display,
body.has-video-bg .cf-section .cf-title{
color:var(--cream);
}
body.has-video-bg .about .h-display em,
body.has-video-bg .experiences .h-display em,
body.has-video-bg .reviews .h-display em,
body.has-video-bg .carte-section .h-display em{
color:var(--cream);
}
body.has-video-bg .about p,
body.has-video-bg .about .text-lg,
body.has-video-bg .experiences p,
body.has-video-bg .experiences h3,
body.has-video-bg .reviews-grid p,
body.has-video-bg .reviews-grid cite{
color:rgba(245,237,224,.85);
}
body.has-video-bg .experiences h3{color:var(--cream)}
body.has-video-bg .reviews-grid p{color:var(--cream);font-style:italic}
/* Eyebrow inversé */
body.has-video-bg .eyebrow{color:rgba(245,237,224,.72)}
body.has-video-bg .eyebrow-num{color:var(--accent-lt);border-right-color:var(--gold-20)}
/* Feat-num en or */
body.has-video-bg .experiences .feat-num{color:var(--accent)}
/* Bordures et filets */
body.has-video-bg .reviews-grid blockquote{border-color:var(--gold-20)}
body.has-video-bg .reviews-grid cite::before{background:var(--accent)}
/* Panneau carte : devient glass lui aussi */
body.has-video-bg .carte-panel{
background:rgba(15,36,56,.72);
backdrop-filter:blur(18px) saturate(1.1);
-webkit-backdrop-filter:blur(18px) saturate(1.1);
border:1px solid var(--gold-20);
color:var(--cream);
}
body.has-video-bg .panel-name,
body.has-video-bg .panel-num{color:var(--cream)}
body.has-video-bg .panel-loc{color:rgba(245,237,224,.8)}
/* Boutons link & primary sur fond sombre */
body.has-video-bg .btn-link{color:var(--cream)}
body.has-video-bg .btn-link:hover{color:var(--accent-lt)}
body.has-video-bg .btn-primary{
background:var(--cream);color:var(--nvy-deep);
border-color:var(--cream);
}
body.has-video-bg .btn-primary:hover{
background:var(--accent);color:var(--nvy-deep);border-color:var(--accent);
}
/* Accordéon séjours : déjà sombre, juste verif bordures */
body.has-video-bg .sej-acc{background:transparent;border:1px solid var(--gold-20)}
/* ============================================================
SAFARI iOS — safe-area, paddings symétriques, respiration
============================================================ */
/* Header respecte l'encoche iPhone */
body.has-video-bg .site-header{
padding-top:max(22px, env(safe-area-inset-top));
}
/* Footer respecte la barre inférieure */
body.has-video-bg .site-footer{
padding-bottom:max(28px, calc(env(safe-area-inset-bottom) + 24px));
}
/* Scroll hint du hero : 48px min au-dessus et en dessous */
body.has-video-bg .scroll-hint{
bottom:max(40px, calc(env(safe-area-inset-bottom) + 28px));
margin-top:48px;
}
/* Paddings sections mobile — min 80px haut & bas partout */
@media (max-width: 820px){
body.has-video-bg .section{
padding-top:max(80px, var(--section-y));
padding-bottom:max(80px, var(--section-y));
}
body.has-video-bg .about,
body.has-video-bg .sejours,
body.has-video-bg .manifesto,
body.has-video-bg .carte-section,
body.has-video-bg .reviews,
body.has-video-bg .cf-section{
padding-top:80px;
padding-bottom:80px;
}
/* Dernière section avant footer : encoche respectée */
body.has-video-bg .cf-section{
padding-bottom:max(80px, calc(env(safe-area-inset-bottom) + 80px));
}
/* Le .scroll-hint mobile : plus d'air */
body.has-video-bg .scroll-hint{
bottom:max(32px, calc(env(safe-area-inset-bottom) + 24px));
}
/* Les zones de respiration gardent leur taille mais respirent */
body.has-video-bg .breath-zone{
min-height:36vh;
}
}
/* Remplace tout 100vh résiduel — si quelqu'un en ajoute via d'autres CSS */
.hero-film{
min-height:100vh;
min-height:100svh;
min-height:100dvh;
}
/* ============================================================
FICHE (sejour.css) overrides pour has-video-bg
============================================================ */
body.has-video-bg.sejour-page{background:transparent;color:var(--cream)}
body.has-video-bg .sejour-top{background:transparent}
body.has-video-bg .sejour-top .back-link{color:rgba(245,237,224,.8)}
body.has-video-bg .top-num,
body.has-video-bg .top-rating{color:var(--cream)}
/* Hero fiche : navy sur vidéo */
body.has-video-bg .sejour-hero{
background:transparent;
color:var(--cream);
}
body.has-video-bg .hero-title .display{color:var(--cream)}
body.has-video-bg .hero-title .sub{color:rgba(245,237,224,.75)}
body.has-video-bg .hero-title .addr{color:var(--accent-lt)}
body.has-video-bg .hero-title .lede{color:rgba(245,237,224,.85)}
body.has-video-bg .hero-title .rating-row{color:var(--cream)}
/* Stats band */
body.has-video-bg .sejour-stats{background:transparent;border-top:1px solid var(--gold-20);border-bottom:1px solid var(--gold-20)}
body.has-video-bg .stat-cell .stat-label{color:rgba(245,237,224,.75)}
body.has-video-bg .stat-cell .stat-value{color:var(--cream)}
body.has-video-bg .stat-cell .stat-value em{color:var(--accent-lt)}
/* Description */
body.has-video-bg .sejour-desc{background:transparent;color:var(--cream)}
body.has-video-bg .sejour-desc .h-display{color:var(--cream)}
body.has-video-bg .sejour-desc .h-display em{color:var(--cream)}
body.has-video-bg .sejour-desc .intro,
body.has-video-bg .sejour-desc p{color:rgba(245,237,224,.88)}
body.has-video-bg .sejour-desc h3{color:var(--cream)}
body.has-video-bg .sejour-desc ul li{color:rgba(245,237,224,.8);border-color:var(--gold-20)}
body.has-video-bg .sejour-desc ul li span{color:var(--accent-lt)}
/* Galerie */
body.has-video-bg .sejour-gallery{background:transparent;color:var(--cream)}
body.has-video-bg .sejour-gallery .h-display{color:var(--cream)}
body.has-video-bg .sejour-gallery .h-display em{color:var(--cream)}
body.has-video-bg .gallery-num{color:var(--accent-lt)}
/* Map fiche */
body.has-video-bg .sejour-map{background:transparent;color:var(--cream)}
body.has-video-bg .sejour-map .h-display{color:var(--cream)}
body.has-video-bg .sejour-map .h-display em{color:var(--cream)}
body.has-video-bg .map-legend > div{color:rgba(245,237,224,.85);border-color:var(--gold-20)}
body.has-video-bg .map-legend > div span:first-child{color:var(--accent-lt)}
/* CTA fiche — niveau 3 opaque (conversion) */
body.has-video-bg .sejour-cta{
background:rgba(10,22,40,.92);
color:var(--cream);
}
/* Footer fiche : l'overlay le traite */
body.has-video-bg .site-footer{
background:rgba(10,22,40,.92);
color:var(--cream);
border-top:1px solid var(--gold-20);
}
body.has-video-bg .site-footer a{color:rgba(245,237,224,.75)}
body.has-video-bg .site-footer a:hover{color:var(--accent-lt)}
/* Si body.sejour-page a data-overlay ajouté par section : la carte du fiche reste lisible */