/* Styles propres a la page (repris du prototype v5) */
/* Experiences page: four chapters, four atmospheres, one art direction.
   French Polynesia = ocean; South Africa = warm sand at dusk; France = white sand and
   contour lines; Lapland = polar night with a moving aurora. The open destination is
   shown in photos; the three to come are told with generic photos or line drawings, never
   with the property itself. */


/* Intro */
.xintro { padding-block: clamp(96px, 11vw, 150px) clamp(40px, 6vw, 72px); }
.xintro .shead h2 { max-width: 22ch; }

/* Chapters */
.ch { position: relative; padding-block: clamp(72px, 9vw, 120px) clamp(96px, 11vw, 150px); --ch-bg: var(--band); --ch-fg: #EEE8E1; --ch-soft: rgba(238,232,225,.86); --ch-line: rgba(238,232,225,.22); --ch-accent: #EEE8E1; background: var(--ch-bg); color: var(--ch-fg); isolation: isolate; overflow: hidden; }
.ch--fp { --ch-bg: #083E4B; overflow: visible; }
.ch--bush { --ch-bg: #CFB99C; --ch-fg: #00292C; --ch-soft: #22393B; --ch-line: rgba(0,41,44,.2); --ch-accent: #083E4B; }
.ch--hex { --ch-bg: #EEE8E1; --ch-fg: #00292C; --ch-soft: #34504F; --ch-line: rgba(0,41,44,.16); --ch-accent: #2F6875; }
.ch--santa { --ch-bg: #00292C; --ch-fg: #EEE8E1; --ch-soft: rgba(238,232,225,.84); --ch-line: rgba(238,232,225,.2); --ch-accent: #9FD8C9; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .ch--bush { --ch-bg: #3A3226; --ch-fg: #F2EADF; --ch-soft: #D9CDBC; --ch-line: rgba(242,234,223,.2); --ch-accent: #EEE8E1; } :root:not([data-theme="light"]) .ch--hex { --ch-bg: #11262B; --ch-fg: #EEE8E1; --ch-soft: #BAC6C5; --ch-line: rgba(238,232,225,.16); --ch-accent: #EEE8E1; } }
:root[data-theme="dark"] .ch--bush { --ch-bg: #3A3226; --ch-fg: #F2EADF; --ch-soft: #D9CDBC; --ch-line: rgba(242,234,223,.2); --ch-accent: #EEE8E1; }
:root[data-theme="dark"] .ch--hex { --ch-bg: #11262B; --ch-fg: #EEE8E1; --ch-soft: #BAC6C5; --ch-line: rgba(238,232,225,.16); --ch-accent: #EEE8E1; }
.ch h2, .ch h3 { color: var(--ch-fg); }
.ch__head { display: grid; gap: 18px; align-items: end; margin-bottom: clamp(36px, 5vw, 60px); }
@media (min-width: 1000px) { .ch__head { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 56px; } }
.ch__num { font: 500 13px/1 var(--sans); letter-spacing: .14em; color: var(--ch-accent); font-variant-numeric: tabular-nums; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.ch__name { font-size: clamp(56px, 9vw, 140px); line-height: .9; letter-spacing: -.02em; margin-top: 14px; overflow-wrap: break-word; }
.ch__head > div { min-width: 0; }
.ch__word { font-family: var(--serif); font-style: italic; font-size: clamp(22px, 2.4vw, 30px); line-height: 1.25; color: var(--ch-soft); max-width: 30ch; }
.ch__side { display: grid; gap: 16px; justify-items: start; }
.ch .chip { background: transparent; color: var(--ch-fg); border-color: var(--ch-line); backdrop-filter: none; }
.ch .chip--open { background: #CFB99C; color: #00292C; border-color: #CFB99C; }
.ch--bush .chip--lock, .ch--hex .chip--lock { background: var(--ch-fg); color: var(--ch-bg); border-color: var(--ch-fg); }
.ch .chip svg { width: 14px; height: 14px; }
.ch .waitlist { background: rgba(255,255,255,.92); border-color: transparent; }
.ch .waitlist input { color: #00292C; }
.ch .waitlist input::placeholder { color: #5A6E70; }
.ch .waitlist .btn { background: #083E4B; color: #EEE8E1; }
.ch .waitlist__ok { color: var(--ch-soft); }
.ch--fp .btn--light { background: #EEE8E1; color: #083E4B; }
.hero + .disc { margin-top: 10px; }
.disc + .xtabs { margin-top: 24px; }

/* Bento of experiences */
.bento { display: grid; gap: 14px; }
@media (max-width: 799px) { .bento { grid-auto-flow: column; grid-auto-columns: 82%; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin-inline: calc(var(--gl) * -1); padding-inline: var(--gl); scroll-padding-inline: var(--gl); } .bento::-webkit-scrollbar { display: none; } }
@media (min-width: 800px) { .bento { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: minmax(250px, auto); } .xp:first-child { grid-column: span 2; grid-row: span 2; } .bento--4 .xp:last-child { grid-column: span 2; } }
.xp { position: relative; scroll-snap-align: start; min-height: 360px; border-radius: var(--r-lg); overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; isolation: isolate; color: #EEE8E1; background: #0A3440; transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .5s var(--ease); }
@media (min-width: 800px) { .xp { min-height: 0; } .bento { perspective: 1200px; } }
.xp > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform 1.4s var(--ease); }
.xp:hover > img { transform: scale(1.06); }
.xp::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(0,41,44,0) 30%, rgba(0,41,44,.85) 100%); }
.xp__body { padding: 22px; display: grid; gap: 6px; }
.xp h3 { font-size: clamp(26px, 2.4vw, 36px); line-height: 1.02; color: #EEE8E1; }
.xp:first-child h3 { font-size: clamp(32px, 3.6vw, 52px); }
.xp p { font-size: 15px; color: rgba(238,232,225,.92); max-width: 40ch; }
.xp__tag { position: absolute; top: 16px; left: 16px; }
.xp__tag .chip { background: rgba(0,41,44,.4); color: #EEE8E1; border-color: rgba(238,232,225,.3); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.xp__n { position: absolute; top: 18px; right: 20px; font: 500 12px/1 var(--sans); letter-spacing: .14em; color: rgba(238,232,225,.8); }
/* Line-drawn cards (no photo) */
.xp--art { background: var(--art-bg, #0A3440); color: var(--art-fg, #EEE8E1); }
.xp--art::before { display: none; }
.xp--art h3 { color: var(--art-fg, #EEE8E1); }
.xp--art p { color: var(--art-soft, rgba(238,232,225,.86)); }
.xp--art .xp__n { color: var(--art-soft, rgba(238,232,225,.8)); }
.xp__art { flex: 1; display: grid; place-items: center; padding: 28px 28px 0; min-height: 170px; color: var(--art-line, #CFB99C); }
.xp__art svg { width: min(78%, 300px); height: auto; overflow: visible; }
.xp__art svg * { vector-effect: non-scaling-stroke; }
.xp__art .draw { stroke-dasharray: 600; stroke-dashoffset: 600; transition: stroke-dashoffset 2.2s var(--ease); }
.xp.is-in .xp__art .draw, .calm .xp__art .draw { stroke-dashoffset: 0; }
.ch--fp .xp--art { --art-bg: linear-gradient(160deg, #0F4C5C 0%, #083E4B 60%, #06323C 100%); }
.ch--hex .xp--art { --art-bg: #FFFFFF; --art-fg: #083E4B; --art-soft: #34504F; --art-line: #2F6875; border: 1px solid var(--ch-line); }
.ch--hex .xp--art:nth-child(2) { --art-bg: #083E4B; --art-fg: #EEE8E1; --art-soft: rgba(238,232,225,.86); --art-line: #CFB99C; border: 0; }
.ch--hex .xp--art:nth-child(3) { --art-bg: #E2D6C6; }
.ch--hex .xp--art:nth-child(4) { --art-bg: #2F6875; --art-fg: #EEE8E1; --art-soft: rgba(238,232,225,.9); --art-line: #EEE8E1; border: 0; }
:root[data-theme="dark"] .ch--hex .xp--art:nth-child(odd) { --art-bg: #162E34; --art-fg: #EEE8E1; --art-soft: #BAC6C5; --art-line: #CFB99C; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .ch--hex .xp--art:nth-child(odd) { --art-bg: #162E34; --art-fg: #EEE8E1; --art-soft: #BAC6C5; --art-line: #CFB99C; } }
.ch--santa .xp--art { --art-bg: rgba(238,232,225,.06); --art-line: #9FD8C9; border: 1px solid rgba(238,232,225,.14); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
.ch--bush .xp::before { background: linear-gradient(180deg, rgba(60,30,10,0) 30%, rgba(40,22,10,.82) 100%); }

/* Atmospheres */

/* Closing line */
.xend { padding-block: clamp(80px, 9vw, 120px); text-align: center; }
.xend h2 { font-size: clamp(36px, 5vw, 68px); line-height: 1.04; max-width: 20ch; margin: 18px auto 0; }
.xend__ctas { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 30px; }