/* ═══════════════════════════════════════════════════════════════════
SATOBOAT.IO — style.css
Le fichier maître. Toutes les pages importent celui-ci.
Ne jamais mettre de styles spécifiques à une page ici —
uniquement les variables, composants et utilitaires globaux.
═══════════════════════════════════════════════════════════════════ */
/* ─── 1. RESET & BASE ────────────────────────────────────────────── */
*, *::before, *::after {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
-webkit-text-size-adjust: 100%;
}
body {
background: var(--abyss);
color: var(--white);
font-family: var(--font-body);
font-size: var(--text-base);
line-height: 1.7;
overflow-x: hidden;
cursor: default;
-webkit-font-smoothing: antialiased;
}
img, video {
display: block;
max-width: 100%;
}
a {
color: inherit;
text-decoration: none;
}
button {
cursor: pointer;
border: none;
background: none;
font-family: inherit;
}
ul, ol {
list-style: none;
}
/* ─── 2. DESIGN TOKENS ───────────────────────────────────────────── */
:root {
/* Palette */
--abyss: #010810; /* fond le plus sombre */
--deep-ocean: #020c1b; /* fond principal */
--navy: #0a1628; /* sections alternées */
--navy-mid: #0d1f3c; /* cartes, modals */
--navy-light: #1a2f4a; /* hover states */
--gold: #c8922a; /* accent principal */
--gold-bright: #f0b84a; /* hover gold, highlights */
--gold-dim: #8a6218; /* gold discret */
--gold-ghost: rgba(200, 146, 42, 0.15); /* fonds gold subtils */
--white: #f0ece4; /* texte principal */
--white-dim: rgba(240, 236, 228, 0.8); /* texte secondaire */
--white-ghost: rgba(240, 236, 228, 0.12); /* fonds blancs subtils */
--white-mist: rgba(240, 236, 228, 0.04); /* séparateurs */
/* Typographie */
--font-display: 'Cinzel', serif; /* titres hero */
--font-body: 'Cormorant Garamond', serif; /* corps de texte */
--font-ui: 'Montserrat', sans-serif; /* UI, labels, nav */
/* Échelle typographique */
--text-xs: clamp(11px, 1.1vw, 13px);
--text-sm: clamp(14px, 1.3vw, 16px);
--text-base: clamp(21px, 1.7vw, 25px);
--text-md: clamp(22px, 1.9vw, 27px);
--text-lg: clamp(22px, 2vw, 28px);
--text-xl: clamp(28px, 3vw, 38px);
--text-2xl: clamp(36px, 4vw, 52px);
--text-3xl: clamp(48px, 6vw, 80px);
/* Espacement */
--space-xs: 0.5rem;
--space-sm: 1rem;
--space-md: 2rem;
--space-lg: 4rem;
--space-xl: 7rem;
--space-2xl: 12rem;
/* Rayons */
--radius-sm: 2px;
--radius-md: 6px;
--radius-lg: 12px;
/* Ombres */
--shadow-gold: 0 0 40px rgba(200, 146, 42, 0.2);
--shadow-deep: 0 8px 40px rgba(0, 0, 0, 0.6);
--shadow-card: 0 4px 24px rgba(0, 0, 0, 0.4);
/* Transitions */
--ease-out: cubic-bezier(0.16, 1, 0.3, 1);
--ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
--duration-fast: 150ms;
--duration-base: 300ms;
--duration-slow: 600ms;
--duration-xslow: 1200ms;
/* Layout */
--container-max: 1200px;
--container-wide: 1440px;
--nav-height: 72px;
}
/* ─── 3. GOOGLE FONTS ─────────────────────────────────────────────
À placer dans le de chaque page HTML :
─────────────────────────────────────────────────────────────────── */
/* ─── 4. NAVBAR ──────────────────────────────────────────────────── */
.navbar {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 100;
height: var(--nav-height);
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 var(--space-lg);
transition: background var(--duration-base) var(--ease-out),
backdrop-filter var(--duration-base) var(--ease-out);
}
.navbar.scrolled {
background: rgba(1, 8, 16, 0.92);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border-bottom: 1px solid var(--white-mist);
}
.navbar__logo {
font-family: var(--font-display);
font-size: var(--text-sm);
font-weight: 400;
letter-spacing: 0.3em;
color: var(--white);
text-transform: uppercase;
transition: color var(--duration-fast);
}
.navbar__logo:hover {
color: var(--gold);
}
.navbar__logo .logo-symbol {
color: var(--gold);
font-size: 0.85em;
}
.navbar__links {
display: flex;
align-items: center;
gap: var(--space-lg);
}
.navbar__link {
font-family: var(--font-ui);
font-size: var(--text-xs);
font-weight: 300;
letter-spacing: 0.25em;
text-transform: uppercase;
color: var(--white-dim);
transition: color var(--duration-fast);
position: relative;
}
.navbar__link::after {
content: '';
position: absolute;
bottom: -4px;
left: 0;
width: 0;
height: 1px;
background: var(--gold);
transition: width var(--duration-base) var(--ease-out);
}
.navbar__link:hover,
.navbar__link.active {
color: var(--white);
}
.navbar__link:hover::after,
.navbar__link.active::after {
width: 100%;
}
/* Toggle langue */
.lang-toggle {
display: flex;
align-items: center;
gap: 6px;
font-family: var(--font-ui);
font-size: var(--text-xs);
font-weight: 200;
letter-spacing: 0.2em;
}
.lang-btn {
color: var(--white-dim);
transition: color var(--duration-fast);
cursor: pointer;
background: none;
border: none;
font-family: inherit;
font-size: inherit;
font-weight: inherit;
letter-spacing: inherit;
text-transform: uppercase;
}
.lang-btn.active {
color: var(--gold);
}
.lang-divider {
color: var(--white-ghost);
}
/* Hamburger mobile */
.navbar__burger {
display: none;
flex-direction: column;
gap: 5px;
padding: 4px;
cursor: pointer;
}
.navbar__burger span {
display: block;
width: 22px;
height: 1px;
background: var(--white-dim);
transition: all var(--duration-base) var(--ease-out);
}
.navbar__burger.open span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.navbar__burger.open span:nth-child(2) { opacity: 0; }
.navbar__burger.open span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
/* Menu mobile */
.navbar__mobile {
display: none;
position: fixed;
inset: 0;
top: var(--nav-height);
background: rgba(1, 8, 16, 0.97);
backdrop-filter: blur(20px);
flex-direction: column;
align-items: center;
justify-content: center;
gap: var(--space-lg);
z-index: 99;
}
.navbar__mobile.open {
display: flex;
}
.navbar__mobile .navbar__link {
font-size: var(--text-base);
letter-spacing: 0.3em;
}
/* ─── 5. HERO ────────────────────────────────────────────────────── */
.hero {
position: relative;
width: 100vw;
height: 100vh;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
}
.hero__bg {
position: absolute;
inset: 0;
background-size: cover;
background-position: center;
transform: scale(1.08);
animation: heroZoom 12s var(--ease-out) forwards;
z-index: 0;
}
.hero__bg::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(
to bottom,
rgba(2, 12, 27, 0.2) 0%,
rgba(2, 12, 27, 0.1) 40%,
rgba(2, 12, 27, 0.7) 80%,
rgba(2, 12, 27, 1) 100%
);
}
@keyframes heroZoom {
from { transform: scale(1.08); }
to { transform: scale(1.0); }
}
.hero__content {
position: relative;
z-index: 2;
text-align: center;
}
.hero__eyebrow {
font-family: var(--font-ui);
font-weight: 200;
font-size: var(--text-xs);
letter-spacing: 0.45em;
color: var(--gold);
text-transform: uppercase;
margin-bottom: var(--space-sm);
opacity: 0;
animation: fadeInUp 1s 0.3s var(--ease-out) forwards;
}
.hero__title {
font-family: var(--font-display);
font-weight: 300;
font-size: var(--text-3xl);
color: var(--white);
letter-spacing: 0.25em;
line-height: 1.15;
text-shadow: 0 4px 30px rgba(0, 0, 0, 0.8);
opacity: 0;
animation: titleReveal 2s 0.5s var(--ease-out) forwards;
}
.hero__subtitle {
display: block;
font-family: var(--font-body);
font-size: var(--text-md);
font-weight: 300;
font-style: italic;
letter-spacing: 0.3em;
color: var(--white-dim);
margin-top: var(--space-xs);
}
.hero__divider {
width: 80px;
height: 1px;
background: linear-gradient(90deg, transparent, var(--gold), transparent);
margin: var(--space-md) auto;
}
.hero__tagline {
font-family: var(--font-body);
font-size: var(--text-md);
font-style: italic;
color: var(--white-dim);
letter-spacing: 0.1em;
opacity: 0;
animation: fadeIn 1s 2s forwards;
}
/* Scroll hint */
.scroll-hint {
position: absolute;
bottom: 3rem;
left: 50%;
transform: translateX(-50%);
z-index: 3;
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
opacity: 0;
animation: fadeIn 1s 3s forwards;
}
.scroll-hint__label {
font-family: var(--font-ui);
font-weight: 200;
font-size: 9px;
letter-spacing: 0.4em;
color: var(--white-dim);
text-transform: uppercase;
}
.scroll-hint__line {
width: 1px;
height: 40px;
background: linear-gradient(to bottom, var(--gold), transparent);
animation: scrollPulse 2s 3s ease-in-out infinite;
}
@keyframes titleReveal {
from { opacity: 0; letter-spacing: 0.5em; }
to { opacity: 1; letter-spacing: 0.25em; }
}
@keyframes fadeIn {
to { opacity: 1; }
}
@keyframes fadeInUp {
from { opacity: 0; transform: translateY(12px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes scrollPulse {
0%, 100% { opacity: 0.4; transform: scaleY(1); }
50% { opacity: 1; transform: scaleY(1.3); }
}
/* Variantes partagées par plusieurs pages (heros avec zoom/durées différentes) */
@keyframes heroZoom105 {
from { transform: scale(1.05); }
to { transform: scale(1.0); }
}
@keyframes heroZoom104 {
from { transform: scale(1.04); }
to { transform: scale(1.0); }
}
@keyframes fadeInUp20 {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes scrollPulseFade {
0%, 100% { opacity: 0.4; }
50% { opacity: 1; }
}
/* ─── 6. SECTIONS ────────────────────────────────────────────────── */
.section {
position: relative;
padding: var(--space-xl) var(--space-lg);
}
.section--dark { background: var(--deep-ocean); }
.section--darker { background: var(--abyss); }
.section--navy { background: var(--navy); }
.container {
max-width: var(--container-max);
margin: 0 auto;
}
.container--wide {
max-width: var(--container-wide);
margin: 0 auto;
}
/* En-têtes de section */
.section-header {
text-align: center;
margin-bottom: var(--space-xl);
}
.section-header__eyebrow {
font-family: var(--font-ui);
font-size: var(--text-xs);
font-weight: 200;
letter-spacing: 0.4em;
color: var(--gold);
text-transform: uppercase;
margin-bottom: var(--space-sm);
}
.section-header__title {
font-family: var(--font-display);
font-size: var(--text-2xl);
font-weight: 300;
letter-spacing: 0.15em;
color: var(--white);
line-height: 1.2;
}
.section-header__line {
width: 60px;
height: 1px;
background: linear-gradient(90deg, transparent, var(--gold), transparent);
margin: var(--space-md) auto;
}
.section-header__lead {
font-family: var(--font-body);
font-size: var(--text-md);
font-style: italic;
color: var(--white-dim);
max-width: 600px;
margin: 0 auto;
line-height: 1.8;
}
/* ─── 7. BOUTONS ─────────────────────────────────────────────────── */
/* Bouton principal — gold outline */
.btn {
display: inline-flex;
align-items: center;
gap: var(--space-xs);
font-family: var(--font-ui);
font-size: var(--text-xs);
font-weight: 300;
letter-spacing: 0.3em;
text-transform: uppercase;
padding: 0.85em 2.2em;
border: 1px solid var(--gold);
color: var(--gold);
background: transparent;
transition: all var(--duration-base) var(--ease-out);
cursor: pointer;
position: relative;
overflow: hidden;
}
.btn::before {
content: '';
position: absolute;
inset: 0;
background: var(--gold);
transform: translateX(-101%);
transition: transform var(--duration-base) var(--ease-out);
}
.btn:hover {
color: var(--abyss);
}
.btn:hover::before {
transform: translateX(0);
}
.btn span {
position: relative;
z-index: 1;
}
/* Bouton secondaire — ghost */
.btn--ghost {
border-color: var(--white-ghost);
color: var(--white-dim);
}
.btn--ghost::before {
background: var(--white-ghost);
}
.btn--ghost:hover {
color: var(--white);
border-color: var(--white-dim);
}
/* Bouton CTA plein */
.btn--solid {
background: var(--gold);
color: var(--abyss);
border-color: var(--gold);
font-weight: 400;
}
.btn--solid::before {
background: var(--gold-bright);
}
.btn--solid:hover {
color: var(--abyss);
}
/* Bouton large */
.btn--lg {
padding: 1.1em 3em;
font-size: var(--text-sm);
}
/* ─── 8. CARTES DESTINATION ─────────────────────────────────────── */
.dest-card {
position: relative;
overflow: hidden;
cursor: pointer;
border: 1px solid var(--white-mist);
transition: border-color var(--duration-base) var(--ease-out),
transform var(--duration-base) var(--ease-out);
flex-shrink: 0;
}
.dest-card:hover {
border-color: rgba(200, 146, 42, 0.3);
transform: translateY(-4px);
}
.dest-card__img {
width: 100%;
aspect-ratio: 3/4;
object-fit: cover;
display: block;
transition: transform var(--duration-slow) var(--ease-out);
filter: brightness(0.75) saturate(0.8);
}
.dest-card:hover .dest-card__img {
transform: scale(1.06);
filter: brightness(0.85) saturate(0.9);
}
.dest-card__overlay {
position: absolute;
inset: 0;
background: linear-gradient(
to top,
rgba(1, 8, 16, 0.95) 0%,
rgba(1, 8, 16, 0.4) 50%,
transparent 100%
);
}
.dest-card__body {
position: absolute;
bottom: 0;
left: 0;
right: 0;
padding: var(--space-md);
}
.dest-card__sea {
font-family: var(--font-ui);
font-size: var(--text-xs);
font-weight: 200;
letter-spacing: 0.3em;
color: var(--gold-dim);
text-transform: uppercase;
margin-bottom: 6px;
}
.dest-card__name {
font-family: var(--font-display);
font-size: var(--text-lg);
font-weight: 300;
letter-spacing: 0.15em;
color: var(--white);
line-height: 1.2;
}
.dest-card__status {
display: inline-block;
margin-top: var(--space-xs);
font-family: var(--font-ui);
font-size: 8px;
letter-spacing: 0.3em;
text-transform: uppercase;
padding: 3px 10px;
border: 1px solid;
}
.dest-card__status--available {
border-color: var(--gold-dim);
color: var(--gold);
}
.dest-card__status--soon {
border-color: var(--white-ghost);
color: var(--white-dim);
}
.dest-card__status--full {
border-color: rgba(200, 146, 42, 0.2);
color: var(--gold-dim);
}
/* Strip horizontal scrollable */
.dest-strip {
display: flex;
gap: var(--space-md);
overflow-x: auto;
padding: var(--space-md) var(--space-lg) var(--space-lg);
scrollbar-width: none;
cursor: grab;
}
.dest-strip::-webkit-scrollbar { display: none; }
.dest-strip.grabbing { cursor: grabbing; }
.dest-strip .dest-card {
width: clamp(220px, 22vw, 300px);
}
/* ─── 9. MODAL DESTINATION ───────────────────────────────────────── */
.dest-modal {
position: fixed;
inset: 0;
z-index: 200;
display: flex;
align-items: center;
justify-content: center;
padding: var(--space-md);
background: rgba(1, 8, 16, 0.85);
backdrop-filter: blur(8px);
opacity: 0;
pointer-events: none;
transition: opacity var(--duration-base) var(--ease-out);
}
.dest-modal.open {
opacity: 1;
pointer-events: all;
}
.dest-modal__inner {
position: relative;
display: grid;
grid-template-columns: 1fr 1.4fr;
max-width: 900px;
width: 100%;
max-height: 88vh;
background: var(--navy-mid);
border: 1px solid var(--white-mist);
overflow: hidden;
transform: translateY(20px);
transition: transform var(--duration-base) var(--ease-out);
}
.dest-modal.open .dest-modal__inner {
transform: translateY(0);
}
.dest-modal__img {
width: 100%;
height: 100%;
object-fit: cover;
filter: brightness(0.75) saturate(0.8);
}
.dest-modal__body {
padding: var(--space-lg) var(--space-md);
overflow-y: auto;
display: flex;
flex-direction: column;
gap: var(--space-md);
}
.dest-modal__sea {
font-family: var(--font-ui);
font-size: var(--text-xs);
letter-spacing: 0.35em;
color: var(--gold-dim);
text-transform: uppercase;
}
.dest-modal__title {
font-family: var(--font-display);
font-size: var(--text-xl);
font-weight: 300;
letter-spacing: 0.15em;
color: var(--white);
line-height: 1.2;
}
.dest-modal__desc {
font-family: var(--font-body);
font-size: var(--text-base);
line-height: 1.9;
color: var(--white-dim);
}
.dest-modal__meta {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--space-sm);
padding: var(--space-sm) 0;
border-top: 1px solid var(--white-mist);
border-bottom: 1px solid var(--white-mist);
}
.dest-modal__meta-item {
display: flex;
flex-direction: column;
gap: 4px;
}
.dest-modal__meta-label {
font-family: var(--font-ui);
font-size: 9px;
letter-spacing: 0.3em;
color: var(--gold-dim);
text-transform: uppercase;
}
.dest-modal__meta-value {
font-family: var(--font-body);
font-size: var(--text-base);
color: var(--white);
}
.dest-modal__tags {
display: flex;
flex-wrap: wrap;
gap: 6px;
}
.dest-tag {
font-family: var(--font-ui);
font-size: 9px;
font-weight: 300;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--white-dim);
border: 1px solid var(--white-mist);
padding: 4px 10px;
}
.dest-modal__close {
position: absolute;
top: var(--space-sm);
right: var(--space-sm);
width: 36px;
height: 36px;
display: flex;
align-items: center;
justify-content: center;
font-family: var(--font-ui);
font-size: 18px;
color: var(--white-dim);
transition: color var(--duration-fast);
cursor: pointer;
background: rgba(1, 8, 16, 0.5);
}
.dest-modal__close:hover {
color: var(--white);
}
/* ─── 10. SCROLL REVEAL ──────────────────────────────────────────── */
.reveal {
opacity: 0;
transform: translateY(30px);
transition: opacity var(--duration-slow) var(--ease-out),
transform var(--duration-slow) var(--ease-out);
}
.reveal.visible {
opacity: 1;
transform: translateY(0);
}
.reveal-delay-1 { transition-delay: 100ms; }
.reveal-delay-2 { transition-delay: 200ms; }
.reveal-delay-3 { transition-delay: 300ms; }
.reveal-delay-4 { transition-delay: 400ms; }
.reveal-delay-5 { transition-delay: 500ms; }
/* ─── 11. SÉPARATEURS & ORNEMENTS ───────────────────────────────── */
.divider {
width: 100%;
height: 1px;
background: var(--white-mist);
}
.divider--gold {
background: linear-gradient(90deg, transparent, var(--gold-dim), transparent);
}
.ornament {
display: flex;
align-items: center;
gap: var(--space-sm);
color: var(--gold-dim);
}
.ornament::before,
.ornament::after {
content: '';
flex: 1;
height: 1px;
background: linear-gradient(90deg, transparent, var(--gold-dim));
}
.ornament::after {
background: linear-gradient(90deg, var(--gold-dim), transparent);
}
/* Ligne décorative verticale */
.vert-line {
width: 1px;
height: 60px;
background: linear-gradient(to bottom, var(--gold), transparent);
margin: 0 auto;
}
/* ─── 12. TEXTE UTILITAIRES ──────────────────────────────────────── */
.text-gold { color: var(--gold); }
.text-dim { color: var(--white-dim); }
.text-center { text-align: center; }
.text-display {
font-family: var(--font-display);
letter-spacing: 0.15em;
font-weight: 300;
}
.text-eyebrow {
font-family: var(--font-ui);
font-size: var(--text-xs);
font-weight: 200;
letter-spacing: 0.4em;
text-transform: uppercase;
color: var(--gold);
}
.text-italic {
font-style: italic;
}
.text-body-lg {
font-size: var(--text-md);
line-height: 1.9;
}
/* Quote / citation */
.quote {
border-left: 2px solid var(--gold);
padding-left: var(--space-md);
font-family: var(--font-body);
font-size: var(--text-md);
font-style: italic;
color: var(--white-dim);
line-height: 1.8;
}
/* ─── 13. FOOTER ─────────────────────────────────────────────────── */
.footer {
background: var(--abyss);
border-top: 1px solid var(--white-mist);
padding: var(--space-xl) var(--space-lg) var(--space-lg);
}
.footer__grid {
display: grid;
grid-template-columns: 2fr 1fr 1fr 1fr;
gap: var(--space-xl);
margin-bottom: var(--space-xl);
}
.footer__brand {
font-family: var(--font-display);
font-size: var(--text-sm);
font-weight: 400;
letter-spacing: 0.3em;
color: var(--white);
text-transform: uppercase;
margin-bottom: var(--space-md);
}
.footer__tagline {
font-family: var(--font-body);
font-size: var(--text-base);
font-style: italic;
color: var(--white-dim);
line-height: 1.8;
}
.footer__heading {
font-family: var(--font-ui);
font-size: var(--text-xs);
font-weight: 300;
letter-spacing: 0.3em;
text-transform: uppercase;
color: var(--gold-dim);
margin-bottom: var(--space-md);
}
.footer__links {
display: flex;
flex-direction: column;
gap: var(--space-sm);
}
.footer__link {
font-family: var(--font-ui);
font-size: var(--text-xs);
font-weight: 200;
letter-spacing: 0.15em;
color: var(--white-dim);
transition: color var(--duration-fast);
}
.footer__link:hover {
color: var(--gold);
}
.footer__bottom {
display: flex;
align-items: center;
justify-content: space-between;
padding-top: var(--space-md);
border-top: 1px solid var(--white-mist);
font-family: var(--font-ui);
font-size: var(--text-xs);
font-weight: 200;
letter-spacing: 0.15em;
color: var(--white-dim);
}
.footer__legal {
display: flex;
gap: var(--space-md);
}
.footer__legal a {
color: var(--white-dim);
transition: color var(--duration-fast);
}
.footer__legal a:hover {
color: var(--gold);
}
/* ─── 14. FORMULAIRES & INPUTS ───────────────────────────────────── */
.form-group {
display: flex;
flex-direction: column;
gap: 8px;
}
.form-label {
font-family: var(--font-ui);
font-size: var(--text-xs);
font-weight: 300;
letter-spacing: 0.25em;
text-transform: uppercase;
color: var(--gold-dim);
}
.form-input,
.form-textarea {
background: var(--white-mist);
border: 1px solid var(--white-ghost);
color: var(--white);
font-family: var(--font-body);
font-size: var(--text-base);
padding: 0.8em 1.2em;
outline: none;
transition: border-color var(--duration-fast);
width: 100%;
}
.form-input::placeholder,
.form-textarea::placeholder {
color: var(--white-dim);
font-style: italic;
}
.form-input:focus,
.form-textarea:focus {
border-color: var(--gold-dim);
}
.form-textarea {
resize: vertical;
min-height: 120px;
}
/* ─── 15. BANDEAU NEWSLETTER (Brevo) ─────────────────────────────── */
.newsletter {
background: var(--navy-mid);
border: 1px solid var(--white-mist);
padding: var(--space-xl) var(--space-lg);
text-align: center;
}
.newsletter__title {
font-family: var(--font-display);
font-size: var(--text-xl);
font-weight: 300;
letter-spacing: 0.15em;
color: var(--white);
margin-bottom: var(--space-sm);
}
.newsletter__sub {
font-family: var(--font-body);
font-style: italic;
color: var(--white-dim);
margin-bottom: var(--space-lg);
}
.newsletter__form {
display: flex;
gap: var(--space-sm);
max-width: 480px;
margin: 0 auto;
}
.newsletter__input {
flex: 1;
background: var(--white-mist);
border: 1px solid var(--white-ghost);
color: var(--white);
font-family: var(--font-body);
font-size: var(--text-base);
padding: 0.8em 1.2em;
outline: none;
transition: border-color var(--duration-fast);
}
.newsletter__input:focus {
border-color: var(--gold-dim);
}
/* ─── 16. RESPONSIVE ─────────────────────────────────────────────── */
@media (max-width: 900px) {
:root {
--space-lg: 2rem;
--space-xl: 4rem;
}
/* Navbar */
.navbar__links { display: none; }
.navbar__burger { display: flex; }
/* Footer */
.footer__grid {
grid-template-columns: 1fr 1fr;
gap: var(--space-lg);
}
/* Modal */
.dest-modal__inner {
grid-template-columns: 1fr;
max-height: 92vh;
}
.dest-modal__img {
height: 240px;
}
}
@media (max-width: 600px) {
:root {
--space-lg: 1.5rem;
--space-xl: 3rem;
}
.footer__grid {
grid-template-columns: 1fr;
}
.footer__bottom {
flex-direction: column;
gap: var(--space-sm);
text-align: center;
}
.newsletter__form {
flex-direction: column;
}
.dest-modal__meta {
grid-template-columns: 1fr;
}
}
/* ─── 17. ACCESSIBILITÉ ──────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}
:focus-visible {
outline: 2px solid var(--gold);
outline-offset: 3px;
}
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
/* ═══════════════════════════════════════════════════════════════════
18. PAGE — index.html
═══════════════════════════════════════════════════════════════════ */
#hero {
position: relative;
width: 100vw;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
#hero-bg {
position: absolute;
inset: 0;
background-image: url('assets/img/bg.png');
background-size: cover;
background-position: center;
transform: scale(1.08);
animation: heroZoom 12s ease-out forwards;
z-index: 0;
}
#hero-bg::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(
to bottom,
rgba(2,12,27,0.2) 0%,
rgba(2,12,27,0.1) 40%,
rgba(2,12,27,0.7) 80%,
rgba(2,12,27,1) 100%
);
}
#boat-wrap {
position: absolute;
z-index: 2;
opacity: 0;
}
#boat-img {
width: clamp(180px, 46vw, 680px);
filter: drop-shadow(0 12px 50px rgba(0,0,0,0.75));
display: block;
}
#hero-title {
position: absolute;
top: 38%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
z-index: 3;
text-align: center;
opacity: 0;
animation: heroTitleFade 2s 0.5s ease-out forwards;
white-space: normal;
width: 90vw;
max-width: 800px;
}
@keyframes heroTitleFade {
from { opacity: 0; }
to { opacity: 1; }
}
#hero-title .eyebrow {
font-family: var(--font-ui);
font-weight: 200;
font-size: clamp(9px, 1.1vw, 12px);
letter-spacing: 0.45em;
color: var(--gold);
text-transform: uppercase;
margin-bottom: 1rem;
}
#hero-title h1 {
font-family: var(--font-display);
font-weight: 300;
font-size: clamp(1.3rem, 4.5vw, 4rem);
color: var(--white);
letter-spacing: 0.1em;
line-height: 1.2;
text-shadow: 0 4px 30px rgba(0,0,0,0.8);
}
@media (min-width: 600px) {
#hero-title h1 { letter-spacing: 0.25em; }
}
#hero-title h1 span {
display: block;
font-size: clamp(0.9rem, 2vw, 1.6rem);
font-weight: 300;
letter-spacing: 0.4em;
color: var(--white-dim);
margin-top: 0.6rem;
font-style: italic;
}
#hero-title .line {
width: 80px;
height: 1px;
background: linear-gradient(90deg, transparent, var(--gold), transparent);
margin: 1.5rem auto;
}
#scroll-hint {
position: absolute;
bottom: 3rem;
left: 50%;
transform: translateX(-50%);
z-index: 3;
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
opacity: 0;
animation: fadeIn 1s 3s forwards;
}
#scroll-hint span {
font-family: var(--font-ui);
font-weight: 200;
font-size: 9px;
letter-spacing: 0.4em;
color: var(--white-dim);
text-transform: uppercase;
}
#hero .scroll-line {
width: 1px;
height: 40px;
background: linear-gradient(to bottom, var(--gold), transparent);
animation: scrollPulse 2s 3s ease-in-out infinite;
}
/* ═══════════════════════════════════════════════════════════════════
19. PAGE — presentation.html
═══════════════════════════════════════════════════════════════════ */
#pres-hero {
position: relative;
width: 100vw;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
#pres-hero-bg {
position: absolute;
inset: 0;
background-image: url('assets/img/bg_presentation.png');
background-size: cover;
background-position: center;
transform: scale(1.05);
animation: heroZoom105 12s ease-out forwards;
z-index: 0;
}
#pres-hero-bg.no-img {
background-image: none;
background: radial-gradient(ellipse at 60% 40%, #0d2040 0%, #020c1b 70%);
}
#pres-hero-bg::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(
to bottom,
rgba(2,12,27,0.3) 0%,
rgba(2,12,27,0.15) 40%,
rgba(2,12,27,0.75) 80%,
rgba(2,12,27,1) 100%
);
}
#pres-hero-content {
position: relative;
z-index: 2;
text-align: center;
opacity: 0;
animation: fadeInUp20 1.2s 0.4s ease-out forwards;
}
#pres-hero-content .eyebrow {
font-family: var(--font-ui);
font-weight: 200;
font-size: clamp(9px, 1vw, 11px);
letter-spacing: 0.5em;
color: var(--gold);
text-transform: uppercase;
margin-bottom: 1.5rem;
}
#pres-hero-content h1 {
font-family: var(--font-display);
font-weight: 300;
font-size: clamp(2rem, 5vw, 4.5rem);
letter-spacing: 0.25em;
color: var(--white);
line-height: 1.1;
text-shadow: 0 4px 30px rgba(0,0,0,0.8);
margin-bottom: 1.5rem;
}
#pres-hero-content .hero-line {
width: 60px;
height: 1px;
background: linear-gradient(90deg, transparent, var(--gold), transparent);
margin: 1.8rem auto;
}
#pres-hero-content .tagline {
font-family: var(--font-body);
font-style: italic;
font-size: clamp(1rem, 1.8vw, 1.4rem);
color: var(--white-dim);
letter-spacing: 0.08em;
line-height: 1.6;
}
#pres-scroll-hint {
position: absolute;
bottom: 3rem;
left: 50%;
transform: translateX(-50%);
z-index: 3;
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
opacity: 0;
animation: fadeIn 1s 2.5s forwards;
}
#pres-scroll-hint span {
font-family: var(--font-ui);
font-weight: 200;
font-size: 9px;
letter-spacing: 0.4em;
color: var(--white-dim);
text-transform: uppercase;
}
#pres-hero .scroll-line {
width: 1px;
height: 40px;
background: linear-gradient(to bottom, var(--gold), transparent);
animation: scrollPulseFade 2s 2.5s ease-in-out infinite;
}
.pres-section {
padding: 5rem 2rem;
position: relative;
}
.pres-section--dark { background: var(--deep-ocean); }
.pres-section--darker { background: var(--abyss); }
.pres-section--navy { background: var(--navy); }
.pres-inner { max-width: 860px; margin: 0 auto; }
.pres-inner--wide { max-width: 1100px; margin: 0 auto; }
.section-intro {
display: flex;
align-items: center;
gap: 1.5rem;
margin-bottom: 4rem;
}
.section-intro__num {
font-family: var(--font-display);
font-size: clamp(3rem, 5vw, 5rem);
font-weight: 300;
color: rgba(200,146,42,0.12);
line-height: 1;
flex-shrink: 0;
}
.section-intro__eyebrow {
font-family: var(--font-ui);
font-size: 9px;
font-weight: 200;
letter-spacing: 0.5em;
color: var(--gold);
text-transform: uppercase;
margin-bottom: 0.5rem;
}
.section-intro__title {
font-family: var(--font-display);
font-size: clamp(1.6rem, 3vw, 2.6rem);
font-weight: 300;
letter-spacing: 0.15em;
color: var(--white);
line-height: 1.2;
}
.origine-text p {
font-family: var(--font-body);
font-size: clamp(1.2rem, 1.6vw, 1.35rem);
line-height: 2;
color: var(--white-dim);
margin-bottom: 1.6rem;
}
.origine-text p:last-child { margin-bottom: 0; }
.origine-text .hl { color: var(--white); font-style: italic; }
.origine-quote {
border-left: 2px solid var(--gold);
padding: 0.2rem 0 0.2rem 2rem;
margin: 2.5rem 0;
}
.origine-quote p {
font-family: var(--font-body);
font-size: clamp(1.25rem, 1.7vw, 1.4rem);
font-style: italic;
color: var(--white);
line-height: 1.8;
margin: 0 !important;
}
.seatadel-intro {
font-family: var(--font-body);
font-style: italic;
font-size: clamp(1.2rem, 1.6vw, 1.35rem);
color: var(--white-dim);
line-height: 1.9;
max-width: 680px;
margin-bottom: 4rem;
}
.seatadel-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
border: 1px solid var(--white-mist);
}
.seatadel-item {
padding: 2.5rem;
border-right: 1px solid var(--white-mist);
border-bottom: 1px solid var(--white-mist);
transition: background var(--duration-base);
}
.seatadel-item:hover { background: var(--white-mist); }
.seatadel-item__icon {
font-size: 1.6rem;
margin-bottom: 1.2rem;
display: block;
}
.seatadel-item__title {
font-family: var(--font-display);
font-size: clamp(1.2rem, 1.7vw, 1.4rem);
font-weight: 400;
letter-spacing: 0.1em;
color: var(--white);
margin-bottom: 0.8rem;
}
.seatadel-item__text {
font-family: var(--font-body);
font-size: clamp(1.15rem, 1.5vw, 1.3rem);
line-height: 1.9;
color: var(--white-dim);
}
.seatadel-item__tag {
display: inline-block;
margin-top: 1rem;
font-family: var(--font-ui);
font-size: 8px;
letter-spacing: 0.3em;
text-transform: uppercase;
color: var(--gold-dim);
border: 1px solid var(--gold-dim);
padding: 3px 10px;
}
.how-wrap {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 5rem;
align-items: center;
}
.how-visual {
position: relative;
aspect-ratio: 4/3;
overflow: hidden;
border: 1px solid var(--white-mist);
}
.how-visual img, .how-visual video {
width: 100%; height: 100%;
object-fit: cover;
display: block;
filter: brightness(0.8) saturate(0.7);
}
.how-visual__placeholder {
position: absolute;
inset: 0;
background: var(--navy-mid);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 1rem;
}
.how-visual__placeholder span {
font-family: var(--font-ui);
font-size: 9px;
letter-spacing: 0.4em;
text-transform: uppercase;
color: var(--gold-dim);
}
.how-text p {
font-family: var(--font-body);
font-size: clamp(1.2rem, 1.6vw, 1.35rem);
line-height: 2;
color: var(--white-dim);
margin-bottom: 1.5rem;
}
.how-text p:last-child { margin-bottom: 0; }
.how-text strong { color: var(--white); font-weight: 400; }
.how-citation {
margin-top: 2.5rem;
padding-top: 2rem;
border-top: 1px solid var(--white-mist);
font-family: var(--font-body);
font-style: italic;
font-size: clamp(1.2rem, 1.6vw, 1.35rem);
color: var(--gold-dim);
line-height: 1.7;
}
@media (max-width: 780px) {
.how-wrap { grid-template-columns: 1fr; gap: 3rem; }
}
.manifeste-header {
text-align: center;
margin-bottom: 5rem;
}
.manifeste-header .eyebrow {
font-family: var(--font-ui);
font-size: 9px;
font-weight: 200;
letter-spacing: 0.5em;
color: var(--gold);
text-transform: uppercase;
margin-bottom: 1rem;
}
.manifeste-header h2 {
font-family: var(--font-display);
font-size: clamp(1.4rem, 2.5vw, 2.2rem);
font-weight: 300;
letter-spacing: 0.15em;
color: var(--white);
line-height: 1.3;
}
.manifeste-body {
max-width: 720px;
margin: 0 auto;
text-align: center;
}
.manifeste-body p {
font-family: var(--font-body);
font-size: clamp(1.25rem, 1.7vw, 1.4rem);
line-height: 2;
color: var(--white-dim);
margin-bottom: 1.8rem;
}
.manifeste-body p.white { color: var(--white); font-style: italic; }
.manifeste-quote {
font-family: var(--font-body);
font-size: clamp(1.1rem, 1.8vw, 1.4rem);
font-style: italic;
color: var(--white);
line-height: 1.75;
padding: 2.5rem 3rem;
border-top: 1px solid var(--gold-dim);
border-bottom: 1px solid var(--gold-dim);
margin: 2.5rem 0;
}
.manifeste-divider {
display: flex;
align-items: center;
justify-content: center;
gap: 1rem;
color: var(--gold-dim);
margin: 2.5rem 0;
}
.manifeste-divider::before,
.manifeste-divider::after {
content: '';
width: 60px; height: 1px;
background: linear-gradient(90deg, transparent, var(--gold-dim));
}
.manifeste-divider::after {
background: linear-gradient(90deg, var(--gold-dim), transparent);
}
.manifeste-closing {
font-family: var(--font-display);
font-size: clamp(1.2rem, 2vw, 1.6rem);
font-weight: 300;
letter-spacing: 0.1em;
color: var(--white);
font-style: italic;
margin-top: 1rem;
}
#pres-cta {
text-align: center;
padding: 10rem 2rem;
position: relative;
}
#pres-cta::before {
content: '';
position: absolute;
top: 0; left: 50%;
transform: translateX(-50%);
width: 200px; height: 1px;
background: linear-gradient(90deg, transparent, var(--gold), transparent);
}
.cta-tagline {
font-family: var(--font-body);
font-style: italic;
font-size: clamp(1.2rem, 1.8vw, 1.45rem);
color: var(--gold-dim);
margin-bottom: 1rem;
}
.cta-title {
font-family: var(--font-display);
font-size: clamp(1.8rem, 4vw, 3.2rem);
font-weight: 300;
letter-spacing: 0.15em;
color: var(--white);
line-height: 1.2;
margin-bottom: 1.5rem;
}
.cta-sub {
font-family: var(--font-body);
font-style: italic;
font-size: clamp(1.2rem, 1.6vw, 1.4rem);
color: var(--white-dim);
margin-bottom: 3rem;
line-height: 1.7;
}
.cta-buttons {
display: flex;
gap: 1.5rem;
justify-content: center;
flex-wrap: wrap;
}
.pres-footer {
border-top: 1px solid var(--white-mist);
padding: 2rem;
text-align: center;
}
.pres-footer p {
font-family: var(--font-ui);
font-size: 9px;
letter-spacing: 0.3em;
color: rgba(240,236,228,0.2);
text-transform: uppercase;
}
/* Fade-in depuis transition index */
body.page-enter { animation: pageEnter 0.9s ease forwards; }
@keyframes pageEnter {
from { opacity: 0; }
to { opacity: 1; }
}
/* ═══════════════════════════════════════════════════════════════════
20. PAGE — investisseur.html
═══════════════════════════════════════════════════════════════════ */
#inv-hero {
position: relative;
width: 100vw;
height: 70vh;
min-height: 480px;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
#inv-hero-bg {
position: absolute;
inset: 0;
background-image: url('assets/img/bg_invest.png');
background-size: cover;
background-position: center;
transform: scale(1.04);
animation: heroZoom104 12s ease-out forwards;
z-index: 0;
}
#inv-hero-bg.no-img {
background-image: none;
background: radial-gradient(ellipse at 40% 60%, #0d2040 0%, #020c1b 70%);
}
#inv-hero-bg::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(to bottom, rgba(2,12,27,0.1) 0%, rgba(2,12,27,0.35) 60%, rgba(2,12,27,0.85) 100%);
}
#inv-hero-content {
position: relative;
z-index: 2;
text-align: center;
opacity: 0;
animation: fadeInUp20 1.2s 0.4s ease-out forwards;
}
#inv-hero-content .eyebrow {
font-family: var(--font-ui);
font-weight: 200;
font-size: clamp(9px, 1vw, 11px);
letter-spacing: 0.5em;
color: var(--gold);
text-transform: uppercase;
margin-bottom: 1.5rem;
}
#inv-hero-content h1 {
font-family: var(--font-display);
font-weight: 300;
font-size: clamp(2rem, 5vw, 4rem);
letter-spacing: 0.25em;
color: var(--white);
line-height: 1.1;
text-shadow: 0 4px 30px rgba(0,0,0,0.8);
margin-bottom: 1.5rem;
}
#inv-hero-content .hero-line {
width: 60px; height: 1px;
background: linear-gradient(90deg, transparent, var(--gold), transparent);
margin: 1.5rem auto;
}
#inv-hero-content .tagline {
font-family: var(--font-body);
font-style: italic;
font-size: clamp(1rem, 1.6vw, 1.3rem);
color: var(--white-dim);
line-height: 1.7;
}
.inv-section {
padding: 7rem 2rem;
position: relative;
}
.inv-section--dark { background: var(--deep-ocean); }
.inv-section--darker { background: var(--abyss); }
.inv-section--navy { background: var(--navy); }
.inv-section::before {
content: '';
position: absolute;
top: 0; left: 50%; transform: translateX(-50%);
width: 200px; height: 1px;
background: linear-gradient(90deg, transparent, var(--gold-dim), transparent);
}
.inv-inner { max-width: 960px; margin: 0 auto; }
.inv-inner--wide { max-width: 1100px; margin: 0 auto; }
.inv-tag {
font-family: var(--font-ui);
font-weight: 200;
font-size: 9px;
letter-spacing: 0.55em;
color: var(--gold);
text-transform: uppercase;
display: block;
margin-bottom: 1.5rem;
}
.inv-title {
font-family: var(--font-display);
font-weight: 300;
font-size: clamp(1.6rem, 3.5vw, 2.8rem);
letter-spacing: 0.2em;
color: var(--white);
margin-bottom: 1rem;
}
.inv-line {
width: 60px; height: 1px;
background: linear-gradient(90deg, transparent, var(--gold), transparent);
margin: 1.5rem auto;
}
.inv-intro {
font-family: var(--font-body);
font-size: clamp(1.25rem, 1.8vw, 1.45rem);
line-height: 1.9;
color: var(--white-dim);
font-style: italic;
max-width: 640px;
margin: 0 auto;
}
.inv-divider {
width: 100%; height: 1px;
background: linear-gradient(90deg, transparent, rgba(200,146,42,0.2), transparent);
margin: 4rem 0;
}
.inv-pillars {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 2rem;
margin-bottom: 5rem;
}
@media (max-width: 720px) { .inv-pillars { grid-template-columns: 1fr; } }
.inv-pillar {
border: 1px solid rgba(200,146,42,0.2);
padding: 2.5rem 2rem;
transition: border-color 0.35s, background 0.35s;
}
.inv-pillar:hover {
border-color: var(--gold-dim);
background: rgba(200,146,42,0.04);
}
.inv-pillar-icon { font-size: 1.6rem; margin-bottom: 1.2rem; opacity: 0.75; }
.inv-pillar h3 {
font-family: var(--font-display);
font-weight: 400;
font-size: 1.15rem;
letter-spacing: 0.15em;
color: var(--gold-bright);
margin-bottom: 1rem;
text-transform: uppercase;
}
.inv-pillar p {
font-family: var(--font-body);
font-size: 1.2rem;
line-height: 1.75;
color: var(--white-dim);
}
.inv-receive-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 2rem;
}
@media (max-width: 720px) { .inv-receive-grid { grid-template-columns: 1fr; } }
.inv-receive-card {
border: 1px solid rgba(200,146,42,0.2);
padding: 2.5rem;
}
.inv-receive-label {
font-family: var(--font-ui);
font-weight: 300;
font-size: 10px;
letter-spacing: 0.5em;
color: var(--gold);
margin-bottom: 1.5rem;
border-bottom: 1px solid rgba(200,146,42,0.2);
padding-bottom: 1rem;
}
.inv-receive-body p {
font-family: var(--font-body);
font-size: 1.2rem;
line-height: 1.75;
color: var(--white-dim);
margin-bottom: 1rem;
}
.inv-receive-body p:last-child { margin-bottom: 0; }
.gold-text { color: var(--gold-bright); }
.inv-calc-title {
font-family: var(--font-display);
font-weight: 300;
font-size: clamp(1.2rem, 2.5vw, 1.8rem);
letter-spacing: 0.18em;
color: var(--white);
margin-bottom: 0.5rem;
}
.inv-calc-subtitle {
font-family: var(--font-ui);
font-weight: 200;
font-size: 11px;
letter-spacing: 0.25em;
color: var(--white-dim);
text-transform: uppercase;
margin-bottom: 3rem;
}
.inv-calc {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 3rem;
border: 1px solid rgba(200,146,42,0.2);
padding: 3rem;
}
@media (max-width: 720px) { .inv-calc { grid-template-columns: 1fr; padding: 2rem; } }
/* Widget calculateur — scopé à .inv-calc pour ne pas entrer en conflit
avec le calculateur de membership.html qui partage les mêmes noms de classe */
.inv-calc .calc-field { margin-bottom: 2.5rem; }
.inv-calc .calc-field:last-child { margin-bottom: 0; }
.inv-calc .calc-label {
display: block;
font-family: var(--font-ui);
font-weight: 200;
font-size: 9px;
letter-spacing: 0.45em;
color: var(--gold);
text-transform: uppercase;
margin-bottom: 0.8rem;
}
.inv-calc .calc-label-note { color: var(--white-dim); letter-spacing: 0.2em; }
.inv-calc .calc-input-row {
display: flex;
align-items: center;
border: 1px solid var(--gold-dim);
transition: border-color 0.3s;
}
.inv-calc .calc-input-row:focus-within { border-color: var(--gold); }
.inv-calc .calc-input-row input[type="number"] {
flex: 1;
background: transparent;
border: none;
outline: none;
padding: 0.9rem 1.2rem;
font-family: var(--font-ui);
font-weight: 300;
font-size: 14px;
letter-spacing: 0.1em;
color: var(--white);
min-width: 0;
}
.inv-calc .calc-unit {
font-family: var(--font-ui);
font-weight: 300;
font-size: 12px;
color: var(--gold);
padding-right: 1.2rem;
letter-spacing: 0.1em;
}
.inv-calc .calc-range-hint {
display: flex;
justify-content: space-between;
margin-top: 0.5rem;
}
.inv-calc .calc-range-hint span {
font-family: var(--font-ui);
font-weight: 200;
font-size: 9px;
letter-spacing: 0.2em;
color: var(--white-dim);
}
.inv-calc .calc-category { color: var(--gold) !important; transition: color 0.3s; }
.inv-calc .calc-slider {
-webkit-appearance: none;
width: 100%; height: 1px;
background: var(--gold-dim);
outline: none;
margin: 1rem 0 0.5rem;
cursor: pointer;
}
.inv-calc .calc-slider::-webkit-slider-thumb {
-webkit-appearance: none;
width: 14px; height: 14px;
border-radius: 50%;
background: var(--gold);
cursor: pointer;
border: 2px solid var(--deep-ocean);
box-shadow: 0 0 8px rgba(200,146,42,0.5);
transition: transform 0.2s;
}
.inv-calc .calc-slider::-webkit-slider-thumb:hover { transform: scale(1.3); }
.inv-calc .calc-slider-labels {
display: flex;
justify-content: space-between;
align-items: center;
}
.inv-calc .calc-slider-labels span {
font-family: var(--font-ui);
font-weight: 200;
font-size: 9px;
letter-spacing: 0.25em;
color: var(--white-dim);
}
.inv-calc .calc-slider-val { color: var(--gold) !important; font-weight: 300 !important; font-size: 11px !important; }
.inv-calc .calc-toggle-wrap {
display: flex;
gap: 0;
border: 1px solid var(--gold-dim);
}
.inv-calc .calc-toggle {
flex: 1;
background: transparent;
border: none;
border-right: 1px solid var(--gold-dim);
padding: 0.75rem 1rem;
font-family: var(--font-ui);
font-weight: 200;
font-size: 10px;
letter-spacing: 0.3em;
color: var(--white-dim);
text-transform: uppercase;
cursor: pointer;
transition: background 0.25s, color 0.25s;
}
.inv-calc .calc-toggle:last-child { border-right: none; }
.inv-calc .calc-toggle.active { background: rgba(200,146,42,0.12); color: var(--gold); }
.inv-calc .calc-toggle:hover:not(.active) { background: rgba(200,146,42,0.06); }
.inv-calc-results {
display: flex;
flex-direction: column;
border-left: 1px solid rgba(200,146,42,0.15);
padding-left: 3rem;
}
@media (max-width: 720px) {
.inv-calc-results {
border-left: none;
border-top: 1px solid rgba(200,146,42,0.15);
padding-left: 0;
padding-top: 2rem;
}
}
.inv-calc .calc-result-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1.5rem;
margin-bottom: 2rem;
}
.inv-calc .calc-result-block { text-align: center; }
.inv-calc .calc-result-label {
font-family: var(--font-ui);
font-weight: 200;
font-size: 9px;
letter-spacing: 0.45em;
color: var(--gold);
text-transform: uppercase;
margin-bottom: 0.6rem;
}
.inv-calc .calc-result-value {
font-family: var(--font-display);
font-weight: 300;
font-size: clamp(1.4rem, 2.5vw, 2rem);
color: var(--white);
letter-spacing: 0.05em;
transition: all 0.3s ease;
}
.inv-calc .calc-result-sub {
font-family: var(--font-ui);
font-weight: 200;
font-size: 9px;
letter-spacing: 0.25em;
color: var(--white-dim);
margin-top: 0.3rem;
}
.inv-calc .calc-result-divider {
width: 100%; height: 1px;
background: linear-gradient(90deg, transparent, rgba(200,146,42,0.2), transparent);
margin-bottom: 2rem;
}
.inv-calc .calc-days-grid {
display: flex;
flex-direction: column;
gap: 0.6rem;
margin-bottom: 1.5rem;
}
.inv-calc .calc-day-row {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0.5rem 0.8rem;
border: 1px solid rgba(200,146,42,0.1);
transition: border-color 0.3s;
}
.inv-calc .calc-day-row:hover { border-color: rgba(200,146,42,0.3); }
.inv-calc .calc-day-dest {
font-family: var(--font-body);
font-size: 1.15rem;
color: var(--white-dim);
font-style: italic;
}
.inv-calc .calc-day-val {
font-family: var(--font-ui);
font-weight: 300;
font-size: 11px;
letter-spacing: 0.2em;
color: var(--gold-bright);
white-space: nowrap;
}
.inv-calc .calc-disclaimer {
font-family: var(--font-ui);
font-weight: 300;
font-size: 10px;
letter-spacing: 0.12em;
color: rgba(240,236,228,0.5);
line-height: 1.7;
margin-top: auto;
border-top: 1px solid rgba(200,146,42,0.15);
padding-top: 1rem;
}
.inv-timeline {
display: flex;
align-items: flex-start;
justify-content: center;
gap: 0;
flex-wrap: wrap;
}
.inv-tl-item {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
max-width: 180px;
}
.inv-tl-dot {
width: 10px; height: 10px;
border-radius: 50%;
border: 1px solid var(--gold-dim);
background: transparent;
margin-bottom: 0.8rem;
flex-shrink: 0;
transition: background 0.3s;
}
.inv-tl-dot.active {
background: var(--gold);
box-shadow: 0 0 10px rgba(200,146,42,0.6);
}
.inv-tl-line {
flex: 1;
height: 1px;
background: linear-gradient(90deg, var(--gold-dim), transparent);
min-width: 40px;
margin-top: 4px;
align-self: flex-start;
}
.inv-tl-label {
font-family: var(--font-ui);
font-weight: 300;
font-size: 10px;
letter-spacing: 0.3em;
color: var(--gold);
text-transform: uppercase;
margin-bottom: 0.5rem;
}
.inv-tl-text {
font-family: var(--font-body);
font-size: 1.1rem;
line-height: 1.6;
color: var(--white-dim);
}
.inv-cta {
text-align: center;
padding: 5rem 0 0;
}
.inv-cta-line {
font-family: var(--font-body);
font-style: italic;
font-size: 1.2rem;
color: var(--white-dim);
margin-bottom: 2rem;
letter-spacing: 0.05em;
}
.inv-cta-buttons {
display: flex;
gap: 1.5rem;
justify-content: center;
flex-wrap: wrap;
}
.inv-cta-note {
font-family: var(--font-ui);
font-weight: 200;
font-size: 9px;
letter-spacing: 0.3em;
color: rgba(240,236,228,0.25);
text-transform: uppercase;
margin-top: 1.5rem;
}
.inv-footer {
border-top: 1px solid var(--white-mist);
padding: 2rem;
text-align: center;
}
.inv-footer p {
font-family: var(--font-ui);
font-size: 9px;
letter-spacing: 0.3em;
color: rgba(240,236,228,0.2);
text-transform: uppercase;
}
/* ═══════════════════════════════════════════════════════════════════
21. PAGE — apropos.html
═══════════════════════════════════════════════════════════════════ */
.ap-section {
padding: 4rem 2rem;
position: relative;
}
.ap-section--dark { background: var(--deep-ocean); }
.ap-section--darker { background: var(--abyss); }
.ap-section--navy { background: var(--navy); }
.ap-section::before {
content: '';
position: absolute;
top: 0; left: 50%; transform: translateX(-50%);
width: 200px; height: 1px;
background: linear-gradient(90deg, transparent, var(--gold-dim), transparent);
}
.ap-inner { max-width: 900px; margin: 0 auto; }
.ap-inner--wide { max-width: 1100px; margin: 0 auto; }
.ap-eyebrow {
font-family: var(--font-ui);
font-weight: 200;
font-size: 9px;
letter-spacing: 0.5em;
color: var(--gold);
text-transform: uppercase;
display: block;
margin-bottom: 1.5rem;
}
.ap-title {
font-family: var(--font-display);
font-weight: 300;
font-size: clamp(1.6rem, 3vw, 2.6rem);
letter-spacing: 0.15em;
color: var(--white);
margin-bottom: 1rem;
line-height: 1.2;
}
.ap-divider {
width: 100%; height: 1px;
background: linear-gradient(90deg, transparent, rgba(200,146,42,0.2), transparent);
margin: 4rem 0;
}
.founder-wrap {
display: grid;
grid-template-columns: 280px 1fr;
gap: 5rem;
align-items: start;
}
@media (max-width: 760px) {
.founder-wrap { grid-template-columns: 1fr; gap: 3rem; }
}
.founder-photo {
position: relative;
}
.founder-photo__img {
width: 100%;
aspect-ratio: 3/4;
object-fit: cover;
display: block;
filter: brightness(0.85) saturate(0.8);
border: 1px solid var(--white-mist);
}
.founder-photo__placeholder {
width: 100%;
aspect-ratio: 3/4;
background: var(--navy-mid);
border: 1px solid var(--white-mist);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 1rem;
}
.founder-photo__placeholder span {
font-family: var(--font-ui);
font-size: 9px;
letter-spacing: 0.3em;
text-transform: uppercase;
color: var(--gold-dim);
text-align: center;
padding: 0 1rem;
}
.founder-creds {
margin-top: 1.5rem;
display: flex;
flex-direction: column;
gap: 0.6rem;
}
.founder-cred {
display: flex;
align-items: center;
gap: 0.8rem;
font-family: var(--font-ui);
font-size: 9px;
font-weight: 200;
letter-spacing: 0.25em;
text-transform: uppercase;
color: var(--white-dim);
}
.founder-cred::before {
content: '';
display: block;
width: 20px; height: 1px;
background: var(--gold-dim);
flex-shrink: 0;
}
.founder-text p {
font-family: var(--font-body);
font-size: clamp(1.2rem, 1.6vw, 1.35rem);
line-height: 2;
color: var(--white-dim);
margin-bottom: 1.6rem;
}
.founder-text p:last-child { margin-bottom: 0; }
.founder-text .hl { color: var(--white); font-style: italic; }
.founder-quote {
border-left: 2px solid var(--gold);
padding: 0.2rem 0 0.2rem 2rem;
margin: 2.5rem 0;
}
.founder-quote p {
font-family: var(--font-body);
font-size: clamp(1.25rem, 1.7vw, 1.4rem);
font-style: italic;
color: var(--white);
line-height: 1.8;
margin: 0;
}
.social-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: 1.5rem;
}
.social-card {
display: flex;
align-items: center;
gap: 1.2rem;
padding: 1.5rem 2rem;
border: 1px solid var(--white-mist);
text-decoration: none;
transition: border-color var(--duration-base), background var(--duration-base);
cursor: pointer;
}
.social-card:hover {
border-color: var(--gold-dim);
background: var(--white-mist);
}
.social-card__icon {
width: 36px; height: 36px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.social-card__icon svg { width: 20px; height: 20px; fill: var(--gold); }
.social-card__name {
font-family: var(--font-ui);
font-size: 10px;
font-weight: 300;
letter-spacing: 0.3em;
text-transform: uppercase;
color: var(--white);
margin-bottom: 3px;
}
.social-card__handle {
font-family: var(--font-ui);
font-size: 9px;
font-weight: 200;
letter-spacing: 0.1em;
color: var(--white-dim);
}
.pgp-wrap {
position: relative;
}
.pgp-intro {
font-family: var(--font-body);
font-size: clamp(1.2rem, 1.5vw, 1.3rem);
color: var(--white-dim);
line-height: 1.8;
margin-bottom: 2rem;
font-style: italic;
}
.pgp-block {
position: relative;
background: rgba(10, 22, 40, 0.8);
border: 1px solid var(--gold-dim);
padding: 2rem;
}
.pgp-block pre {
font-family: 'Courier New', monospace;
font-size: 11px;
line-height: 1.6;
color: var(--gold-dim);
white-space: pre-wrap;
word-break: break-all;
margin: 0;
user-select: all;
}
.pgp-copy-btn {
position: absolute;
top: 1rem;
right: 1rem;
font-family: var(--font-ui);
font-size: 8px;
font-weight: 300;
letter-spacing: 0.3em;
text-transform: uppercase;
color: var(--gold);
border: 1px solid var(--gold-dim);
background: transparent;
padding: 5px 12px;
cursor: pointer;
transition: background var(--duration-fast), color var(--duration-fast);
}
.pgp-copy-btn:hover { background: var(--gold); color: var(--abyss); }
.pgp-copy-btn.copied { color: var(--white); border-color: var(--white-dim); }
.pgp-hint {
margin-top: 0.8rem;
font-family: var(--font-ui);
font-size: 9px;
letter-spacing: 0.2em;
color: rgba(240,236,228,0.3);
}
.contact-intro {
font-family: var(--font-body);
font-style: italic;
font-size: clamp(1.2rem, 1.6vw, 1.35rem);
color: var(--white-dim);
line-height: 1.9;
margin-bottom: 3rem;
max-width: 600px;
}
.contact-form {
display: flex;
flex-direction: column;
gap: 2rem;
max-width: 680px;
}
.cf-field {
display: flex;
flex-direction: column;
gap: 0.6rem;
}
.cf-label {
font-family: var(--font-ui);
font-size: 9px;
font-weight: 200;
letter-spacing: 0.4em;
text-transform: uppercase;
color: var(--gold);
}
.cf-input,
.cf-textarea {
background: var(--white-mist);
border: 1px solid var(--white-ghost);
color: var(--white);
font-family: var(--font-body);
font-size: clamp(1.2rem, 1.5vw, 1.3rem);
padding: 1rem 1.4rem;
outline: none;
transition: border-color var(--duration-fast);
width: 100%;
}
.cf-input::placeholder,
.cf-textarea::placeholder {
color: rgba(240,236,228,0.25);
font-style: italic;
}
.cf-input:focus,
.cf-textarea:focus { border-color: var(--gold-dim); }
.cf-textarea {
resize: vertical;
min-height: 160px;
}
.cf-checkbox-wrap {
display: flex;
align-items: flex-start;
gap: 1rem;
cursor: pointer;
}
.cf-checkbox {
width: 16px; height: 16px;
border: 1px solid var(--gold-dim);
background: transparent;
appearance: none;
-webkit-appearance: none;
flex-shrink: 0;
margin-top: 3px;
cursor: pointer;
transition: background var(--duration-fast);
position: relative;
}
.cf-checkbox:checked {
background: var(--gold);
}
.cf-checkbox:checked::after {
content: '✓';
position: absolute;
top: 50%; left: 50%;
transform: translate(-50%, -50%);
font-size: 10px;
color: var(--abyss);
font-weight: bold;
}
.cf-checkbox-label {
font-family: var(--font-ui);
font-size: 10px;
font-weight: 200;
letter-spacing: 0.2em;
color: var(--white-dim);
line-height: 1.6;
}
.cf-checkbox-label span { color: var(--gold-dim); }
.cf-submit-wrap {
display: flex;
align-items: center;
gap: 2rem;
flex-wrap: wrap;
}
.cf-msg {
font-family: var(--font-ui);
font-size: 10px;
letter-spacing: 0.3em;
text-transform: uppercase;
min-height: 20px;
transition: opacity var(--duration-base);
}
.cf-msg.success { color: var(--gold); }
.cf-msg.error { color: rgba(240,236,228,0.5); }
.ap-footer {
border-top: 1px solid var(--white-mist);
padding: 2rem;
text-align: center;
background: var(--abyss);
}
.ap-footer p {
font-family: var(--font-ui);
font-size: 9px;
letter-spacing: 0.3em;
color: rgba(240,236,228,0.2);
text-transform: uppercase;
}
/* ═══════════════════════════════════════════════════════════════════
22. PAGE — voyage.html
═══════════════════════════════════════════════════════════════════ */
#voy-hero {
position: relative;
width: 100vw;
height: 80vh;
min-height: 500px;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
#voy-hero-bg {
position: absolute;
inset: 0;
background-image: url('assets/img/bg_voyage.png');
background-size: cover;
background-position: center;
transform: scale(1.05);
animation: heroZoom105 12s ease-out forwards;
z-index: 0;
}
#voy-hero-bg.no-img {
background-image: none;
background: radial-gradient(ellipse at 50% 40%, #0d2040 0%, #020c1b 70%);
}
#voy-hero-bg::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(
to bottom,
rgba(2,12,27,0.1) 0%,
rgba(2,12,27,0.3) 50%,
rgba(2,12,27,0.9) 100%
);
}
#voy-hero-content {
position: relative;
z-index: 2;
text-align: center;
padding: 0 2rem;
max-width: 800px;
opacity: 0;
animation: fadeInUp20 1.2s 0.4s ease-out forwards;
}
.voy-manifeste {
font-family: var(--font-body);
font-style: italic;
font-size: clamp(1.2rem, 2.2vw, 1.8rem);
color: var(--white);
line-height: 1.8;
letter-spacing: 0.03em;
text-shadow: 0 2px 20px rgba(0,0,0,0.6);
margin: 0;
}
#voy-hero-content .eyebrow {
font-family: var(--font-ui);
font-weight: 200;
font-size: clamp(9px, 1vw, 11px);
letter-spacing: 0.5em;
color: var(--gold);
text-transform: uppercase;
margin-bottom: 2rem;
}
#voy-hero-content blockquote {
font-family: var(--font-body);
font-style: italic;
font-size: clamp(1.2rem, 2.5vw, 2rem);
color: var(--white);
line-height: 1.7;
letter-spacing: 0.03em;
text-shadow: 0 2px 20px rgba(0,0,0,0.6);
margin: 0 0 2rem;
}
#voy-hero-content .hero-line {
width: 60px; height: 1px;
background: linear-gradient(90deg, transparent, var(--gold), transparent);
margin: 2rem auto;
}
#voy-hero-content .tagline {
font-family: var(--font-body);
font-size: clamp(1.2rem, 1.7vw, 1.4rem);
color: var(--white-dim);
line-height: 1.8;
}
#globe-section {
position: relative;
width: 100vw;
height: 300vh;
background: var(--deep-ocean);
}
#globe-sticky {
position: sticky;
top: 0;
width: 100vw;
height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
overflow: hidden;
}
#globe-canvas {
display: block;
border-radius: 50%;
filter: drop-shadow(0 0 60px rgba(30,80,200,0.4));
will-change: transform, opacity;
}
#globe-label {
position: absolute;
bottom: 3%;
left: 50%;
transform: translateX(-50%);
text-align: center;
will-change: opacity;
width: 90vw;
}
#globe-label p {
font-family: var(--font-ui);
font-weight: 200;
font-size: 9px;
letter-spacing: 0.2em;
color: var(--gold-dim);
text-transform: uppercase;
white-space: normal;
}
#construction-overlay {
position: absolute;
bottom: 18%;
left: 50%;
transform: translateX(-50%);
text-align: center;
z-index: 4;
opacity: 0;
transition: opacity 0.8s ease;
pointer-events: none;
white-space: normal;
width: 90vw;
max-width: 600px;
}
#construction-overlay.visible { opacity: 1; }
#construction-overlay .badge {
display: inline-flex;
align-items: center;
gap: 10px;
font-family: var(--font-ui);
font-weight: 300;
font-size: 10px;
letter-spacing: 0.4em;
color: var(--gold);
text-transform: uppercase;
border: 1px solid var(--gold-dim);
padding: 0.6rem 1.6rem;
margin-bottom: 1.2rem;
}
.badge-dot {
width: 6px; height: 6px;
border-radius: 50%;
background: var(--gold);
animation: pulse 1.8s ease-in-out infinite;
}
@keyframes pulse {
0%, 100% { opacity: 1; transform: scale(1); }
50% { opacity: 0.4; transform: scale(0.7); }
}
#construction-overlay h2 {
font-family: var(--font-display);
font-weight: 300;
font-size: clamp(1.2rem, 2.5vw, 2rem);
letter-spacing: 0.2em;
color: var(--white);
margin-bottom: 0.6rem;
}
#construction-overlay p {
font-family: var(--font-ui);
font-weight: 200;
font-size: 9px;
letter-spacing: 0.15em;
color: var(--white-dim);
text-transform: uppercase;
}
#dest-strip-wrap {
position: relative;
background: transparent;
padding: 0 0 0.8rem;
overflow: visible;
}
#dest-strip {
display: flex;
gap: 1rem;
padding: 0.2rem 2rem 0.4rem;
overflow-x: auto;
overflow-y: visible;
scroll-behavior: smooth;
cursor: grab;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
user-select: none;
}
#dest-strip::-webkit-scrollbar { display: none; }
#dest-strip:active { cursor: grabbing; }
/* .dest-card est scopé à #dest-strip : le nom de classe est déjà utilisé
par le composant générique "cartes destination" de la section 8,
mais ce voyage.html a un design de carte totalement différent (strip horizontal) */
#dest-strip .dest-card {
flex: 0 0 auto;
width: clamp(160px, 40vw, 200px);
height: clamp(80px, 12vw, 96px);
border: 1px solid rgba(200,146,42,0.22);
border-radius: 10px;
background: rgb(8,18,34);
cursor: pointer;
transition: border-color 0.3s, background 0.3s, transform 0.3s, box-shadow 0.3s;
position: relative;
overflow: hidden;
isolation: isolate;
margin-top: 6px;
margin-bottom: 6px;
}
#dest-strip .dest-card::before {
content: '';
position: absolute;
inset: 0;
border-radius: 12px;
background: linear-gradient(135deg, rgba(200,146,42,0.06) 0%, transparent 60%);
opacity: 0;
transition: opacity 0.3s;
}
#dest-strip .dest-card:hover {
border-color: var(--gold);
background: rgb(12,24,44);
transform: translateY(-4px);
box-shadow: 0 8px 24px rgba(0,0,0,0.5), 0 0 12px rgba(200,146,42,0.15);
}
#dest-strip .dest-card:hover::before { opacity: 1; }
.dest-card-inner {
display: flex;
flex-direction: column;
justify-content: center;
padding: 0 1rem;
height: 100%;
gap: 0.2rem;
position: relative;
z-index: 1;
}
.dest-card-flag { font-size: 1.1rem; line-height: 1; margin-bottom: 0.1rem; }
.dest-card-name {
font-family: var(--font-display);
font-weight: 400;
font-size: clamp(0.8rem, 3vw, 1.05rem);
letter-spacing: 0.1em;
color: var(--white);
line-height: 1.2;
}
.dest-card-sea {
font-family: var(--font-ui);
font-weight: 300;
font-size: 8px;
letter-spacing: 0.25em;
color: rgba(200,146,42,0.7);
text-transform: uppercase;
}
.dest-strip-hint {
display: flex;
align-items: center;
gap: 1rem;
padding: 0.4rem 2rem 0;
}
.dest-strip-hint span {
font-family: var(--font-ui);
font-weight: 300;
font-size: 9px;
letter-spacing: 0.4em;
color: rgba(200,146,42,0.45);
text-transform: uppercase;
white-space: nowrap;
}
.dest-hint-line {
flex: 1;
height: 1px;
background: linear-gradient(90deg, rgba(200,146,42,0.35), transparent);
}
#voy-video-section {
padding: 5rem 2rem;
background: var(--abyss);
position: relative;
}
#voy-video-section::before {
content: '';
position: absolute;
top: 0; left: 50%; transform: translateX(-50%);
width: 200px; height: 1px;
background: linear-gradient(90deg, transparent, var(--gold-dim), transparent);
}
.voy-video-inner {
max-width: 960px;
margin: 0 auto;
}
.voy-video-eyebrow {
font-family: var(--font-ui);
font-size: 9px;
font-weight: 200;
letter-spacing: 0.5em;
color: var(--gold);
text-transform: uppercase;
display: block;
margin-bottom: 1.2rem;
text-align: center;
}
.voy-video-title {
font-family: var(--font-display);
font-weight: 300;
font-size: clamp(1.4rem, 2.5vw, 2.2rem);
letter-spacing: 0.15em;
color: var(--white);
text-align: center;
margin-bottom: 3rem;
}
.voy-video-wrap {
position: relative;
width: 100%;
aspect-ratio: 16/9;
border: 1px solid var(--white-mist);
overflow: hidden;
background: var(--navy);
}
.voy-video-wrap video {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
#voy-cta {
padding: 7rem 2rem;
text-align: center;
background: var(--deep-ocean);
position: relative;
}
#voy-cta::before {
content: '';
position: absolute;
top: 0; left: 50%; transform: translateX(-50%);
width: 200px; height: 1px;
background: linear-gradient(90deg, transparent, var(--gold), transparent);
}
.voy-cta-title {
font-family: var(--font-display);
font-weight: 300;
font-size: clamp(1.6rem, 3vw, 2.4rem);
letter-spacing: 0.15em;
color: var(--white);
margin-bottom: 1rem;
}
.voy-cta-sub {
font-family: var(--font-body);
font-style: italic;
font-size: clamp(1.2rem, 1.6vw, 1.4rem);
color: var(--white-dim);
margin-bottom: 2.5rem;
line-height: 1.7;
}
.voy-cta-buttons {
display: flex;
gap: 1.5rem;
justify-content: center;
flex-wrap: wrap;
}
#dest-modal {
position: fixed;
inset: 0;
z-index: 9000;
background: rgba(1,8,16,0.82);
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
pointer-events: none;
transition: opacity 0.4s ease;
backdrop-filter: blur(6px);
padding: 2rem;
}
#dest-modal.open {
opacity: 1;
pointer-events: all;
}
#dest-modal-inner {
display: grid;
grid-template-columns: 1fr 1fr;
max-width: 900px;
width: 100%;
max-height: 85vh;
border: 1px solid rgba(200,146,42,0.3);
overflow: hidden;
transform: translateY(24px) scale(0.98);
transition: transform 0.4s ease;
background: var(--navy);
}
#dest-modal.open #dest-modal-inner {
transform: translateY(0) scale(1);
}
@media (max-width: 680px) {
#dest-modal-inner { grid-template-columns: 1fr; max-height: 90vh; overflow-y: auto; }
}
#dest-modal-img-wrap {
position: relative;
overflow: hidden;
min-height: 300px;
}
#dest-modal-img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform 6s ease;
}
#dest-modal.open #dest-modal-img { transform: scale(1.06); }
#dest-modal-img-overlay {
position: absolute;
inset: 0;
background: linear-gradient(to right, transparent 60%, var(--navy) 100%);
}
#dest-modal-content {
padding: 3rem 2.5rem;
display: flex;
flex-direction: column;
justify-content: center;
position: relative;
overflow-y: auto;
}
#dest-modal-close {
position: absolute;
top: 1.2rem;
right: 1.5rem;
background: transparent;
border: none;
color: var(--white-dim);
font-size: 1rem;
cursor: pointer;
font-family: var(--font-ui);
font-weight: 200;
letter-spacing: 0.1em;
transition: color 0.2s;
padding: 0.3rem 0.6rem;
}
#dest-modal-close:hover { color: var(--gold); }
#dest-modal-sea {
font-family: var(--font-ui);
font-weight: 200;
font-size: 9px;
letter-spacing: 0.4em;
color: rgba(200,146,42,0.6);
text-transform: uppercase;
display: block;
margin: 0.5rem 0 0;
}
#dest-modal-title {
font-family: var(--font-display);
font-weight: 300;
font-size: clamp(1.6rem, 3vw, 2.4rem);
letter-spacing: 0.18em;
color: var(--white);
margin-bottom: 0;
line-height: 1.2;
}
#dest-modal-line {
width: 50px;
height: 1px;
background: linear-gradient(90deg, var(--gold), transparent);
margin: 1.4rem 0;
}
#dest-modal-desc {
font-family: var(--font-body);
font-size: clamp(1.2rem, 1.6vw, 1.35rem);
line-height: 1.85;
color: var(--white-dim);
font-style: italic;
}
#dest-modal-tags { display: none; }
/* ═══════════════════════════════════════════════════════════════════
23. PAGE — membership.html
═══════════════════════════════════════════════════════════════════ */
#mem-hero {
position: relative;
width: 100vw;
height: 55vh;
min-height: 380px;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
#mem-hero-bg {
position: absolute;
inset: 0;
background-image: url('assets/img/bg_membership.png');
background-size: cover;
background-position: center;
z-index: 0;
}
#mem-hero-bg.no-img {
background-image: none;
background: radial-gradient(ellipse at 50% 40%, #0d2040 0%, #020c1b 70%);
}
#mem-hero-bg::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(to bottom, rgba(2,12,27,0.1) 0%, rgba(2,12,27,0.35) 60%, rgba(2,12,27,0.85) 100%);
}
#mem-hero-content {
position: relative;
z-index: 2;
text-align: center;
opacity: 0;
animation: fadeInUp20 1.2s 0.4s ease-out forwards;
padding: 0 2rem;
max-width: 860px;
}
#mem-hero-content .eyebrow {
font-family: var(--font-ui);
font-weight: 200;
font-size: clamp(9px, 1vw, 11px);
letter-spacing: 0.5em;
color: var(--gold);
text-transform: uppercase;
margin-bottom: 1.5rem;
}
#mem-hero-content h1 {
font-family: var(--font-display);
font-weight: 300;
font-size: clamp(1.1rem, 2vw, 1.8rem);
letter-spacing: 0.12em;
color: var(--white);
line-height: 1.5;
text-shadow: 0 4px 30px rgba(0,0,0,0.8);
margin-bottom: 1rem;
}
#mem-hero-content .hero-line {
width: 60px; height: 1px;
background: linear-gradient(90deg, transparent, var(--gold), transparent);
margin: 1.5rem auto;
}
#mem-hero-content .tagline {
font-family: var(--font-body);
font-style: italic;
font-size: clamp(1rem, 1.5vw, 1.2rem);
color: var(--white-dim);
letter-spacing: 0.05em;
}
.mem-section {
padding: 5rem 2rem;
position: relative;
}
.mem-section::before {
content: '';
position: absolute;
top: 0; left: 50%; transform: translateX(-50%);
width: 200px; height: 1px;
background: linear-gradient(90deg, transparent, var(--gold-dim), transparent);
}
.mem-section--dark { background: var(--deep-ocean); }
.mem-section--darker { background: var(--abyss); }
.mem-section--navy { background: var(--navy); }
.mem-inner { max-width: 900px; margin: 0 auto; }
.mem-inner--wide { max-width: 1100px; margin: 0 auto; }
.mem-eyebrow {
font-family: var(--font-ui);
font-weight: 200;
font-size: 9px;
letter-spacing: 0.5em;
color: var(--gold);
text-transform: uppercase;
display: block;
margin-bottom: 1.2rem;
}
.mem-title {
font-family: var(--font-display);
font-weight: 300;
font-size: clamp(1.6rem, 3vw, 2.4rem);
letter-spacing: 0.15em;
color: var(--white);
margin-bottom: 2rem;
line-height: 1.2;
}
.mem-text p {
font-family: var(--font-body);
font-size: clamp(1.2rem, 1.6vw, 1.35rem);
line-height: 1.95;
color: var(--white-dim);
margin-bottom: 1.4rem;
}
.mem-text p:last-child { margin-bottom: 0; }
.mem-text .hl { color: var(--white); font-style: italic; }
.mem-divider {
width: 100%; height: 1px;
background: linear-gradient(90deg, transparent, rgba(200,146,42,0.2), transparent);
margin: 3rem 0;
}
.mem-receive-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1.5rem;
}
@media (max-width: 780px) {
.mem-receive-grid { grid-template-columns: 1fr; }
}
.mem-receive-card {
border: 1px solid var(--white-mist);
padding: 2rem;
transition: border-color var(--duration-base), background var(--duration-base);
}
.mem-receive-card:hover {
border-color: var(--gold-dim);
background: var(--white-mist);
}
.mem-receive-icon {
font-size: 1.4rem;
margin-bottom: 1rem;
display: block;
}
.mem-receive-label {
font-family: var(--font-ui);
font-size: 9px;
font-weight: 300;
letter-spacing: 0.4em;
text-transform: uppercase;
color: var(--gold-dim);
margin-bottom: 0.8rem;
padding-bottom: 0.8rem;
border-bottom: 1px solid var(--white-mist);
}
.mem-receive-text {
font-family: var(--font-body);
font-size: clamp(1.15rem, 1.5vw, 1.3rem);
line-height: 1.85;
color: var(--white-dim);
}
.mem-pricing-table {
width: 100%;
border-collapse: collapse;
margin-bottom: 1.5rem;
}
.mem-pricing-table th {
font-family: var(--font-ui);
font-size: 9px;
font-weight: 300;
letter-spacing: 0.35em;
text-transform: uppercase;
color: var(--gold-dim);
border-bottom: 1px solid var(--gold-dim);
padding: 0.8rem 1rem;
text-align: left;
}
.mem-pricing-table td {
font-family: var(--font-body);
font-size: clamp(1.15rem, 1.5vw, 1.3rem);
color: var(--white-dim);
padding: 0.85rem 1rem;
border-bottom: 1px solid var(--white-mist);
line-height: 1.4;
}
.mem-pricing-table tr:hover td { background: var(--white-mist); }
.mem-pricing-table td:first-child {
color: var(--white);
font-weight: 400;
}
.mem-pricing-table td:nth-child(2) {
color: var(--gold-bright);
font-family: var(--font-ui);
font-size: 11px;
letter-spacing: 0.1em;
}
.mem-pricing-note {
font-family: var(--font-ui);
font-size: 9px;
letter-spacing: 0.18em;
color: rgba(240,236,228,0.35);
line-height: 2;
text-transform: uppercase;
margin-top: 1rem;
}
.mem-calc {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 3rem;
border: 1px solid rgba(200,146,42,0.2);
padding: 3rem;
margin-top: 3rem;
}
@media (max-width: 720px) {
.mem-calc { grid-template-columns: 1fr; padding: 2rem; gap: 2rem; }
}
/* Widget calculateur — scopé à .mem-section--navy (section unique de cette page)
pour ne pas entrer en conflit avec le calculateur de investisseur.html
qui partage les mêmes noms de classe */
.mem-section--navy .calc-field { margin-bottom: 2rem; }
.mem-section--navy .calc-field:last-child { margin-bottom: 0; }
.mem-section--navy .calc-label {
display: block;
font-family: var(--font-ui);
font-weight: 200;
font-size: 9px;
letter-spacing: 0.45em;
color: var(--gold);
text-transform: uppercase;
margin-bottom: 0.8rem;
}
.mem-section--navy .calc-label-note {
color: var(--white-dim);
letter-spacing: 0.2em;
}
.mem-section--navy .calc-input-row {
display: flex;
align-items: center;
border: 1px solid var(--gold-dim);
transition: border-color 0.3s;
}
.mem-section--navy .calc-input-row:focus-within { border-color: var(--gold); }
.mem-section--navy .calc-input-row input[type="number"] {
flex: 1;
background: transparent;
border: none;
outline: none;
padding: 0.9rem 1.2rem;
font-family: var(--font-ui);
font-weight: 300;
font-size: 14px;
letter-spacing: 0.1em;
color: var(--white);
min-width: 0;
}
.mem-section--navy .calc-unit {
font-family: var(--font-ui);
font-weight: 300;
font-size: 12px;
color: var(--gold);
padding-right: 1.2rem;
}
.mem-section--navy .calc-slider {
-webkit-appearance: none;
width: 100%; height: 1px;
background: var(--gold-dim);
outline: none;
margin: 1rem 0 0.5rem;
cursor: pointer;
}
.mem-section--navy .calc-slider::-webkit-slider-thumb {
-webkit-appearance: none;
width: 14px; height: 14px;
border-radius: 50%;
background: var(--gold);
cursor: pointer;
border: 2px solid var(--deep-ocean);
box-shadow: 0 0 8px rgba(200,146,42,0.5);
transition: transform 0.2s;
}
.mem-section--navy .calc-slider::-webkit-slider-thumb:hover { transform: scale(1.3); }
.mem-section--navy .calc-slider-labels {
display: flex;
justify-content: space-between;
}
.mem-section--navy .calc-slider-labels span {
font-family: var(--font-ui);
font-weight: 200;
font-size: 9px;
letter-spacing: 0.2em;
color: var(--white-dim);
}
.mem-section--navy .calc-slider-val {
color: var(--gold) !important;
font-weight: 300 !important;
}
.mem-section--navy .calc-toggle-wrap {
display: flex;
border: 1px solid var(--gold-dim);
}
.mem-section--navy .calc-toggle {
flex: 1;
background: transparent;
border: none;
border-right: 1px solid var(--gold-dim);
padding: 0.75rem 0.5rem;
font-family: var(--font-ui);
font-weight: 200;
font-size: 9px;
letter-spacing: 0.2em;
color: var(--white-dim);
text-transform: uppercase;
cursor: pointer;
transition: background 0.25s, color 0.25s;
}
.mem-section--navy .calc-toggle:last-child { border-right: none; }
.mem-section--navy .calc-toggle.active { background: rgba(200,146,42,0.12); color: var(--gold); }
.mem-section--navy .calc-toggle:hover:not(.active) { background: rgba(200,146,42,0.06); }
.mem-calc-results {
border-left: 1px solid rgba(200,146,42,0.15);
padding-left: 3rem;
display: flex;
flex-direction: column;
}
@media (max-width: 720px) {
.mem-calc-results {
border-left: none;
border-top: 1px solid rgba(200,146,42,0.15);
padding-left: 0;
padding-top: 2rem;
}
}
.mem-section--navy .calc-result-block {
text-align: center;
margin-bottom: 2rem;
}
.mem-section--navy .calc-result-label {
font-family: var(--font-ui);
font-weight: 200;
font-size: 9px;
letter-spacing: 0.45em;
color: var(--gold);
text-transform: uppercase;
margin-bottom: 0.6rem;
}
.mem-section--navy .calc-result-value {
font-family: var(--font-display);
font-weight: 300;
font-size: clamp(1.6rem, 2.5vw, 2.2rem);
color: var(--white);
letter-spacing: 0.05em;
transition: all 0.3s ease;
}
.mem-section--navy .calc-result-sub {
font-family: var(--font-ui);
font-weight: 200;
font-size: 9px;
letter-spacing: 0.2em;
color: var(--white-dim);
margin-top: 0.3rem;
}
.mem-section--navy .calc-result-divider {
width: 100%; height: 1px;
background: linear-gradient(90deg, transparent, rgba(200,146,42,0.2), transparent);
margin-bottom: 1.5rem;
}
.mem-section--navy .calc-days-grid {
display: flex;
flex-direction: column;
gap: 0.5rem;
margin-bottom: 1.5rem;
}
.mem-section--navy .calc-day-row {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0.5rem 0.8rem;
border: 1px solid rgba(200,146,42,0.1);
transition: border-color 0.3s;
}
.mem-section--navy .calc-day-row:hover { border-color: rgba(200,146,42,0.3); }
.mem-section--navy .calc-day-dest {
font-family: var(--font-body);
font-size: 1.15rem;
color: var(--white-dim);
font-style: italic;
}
.mem-section--navy .calc-day-val {
font-family: var(--font-ui);
font-weight: 300;
font-size: 11px;
letter-spacing: 0.15em;
color: var(--gold-bright);
white-space: nowrap;
}
.mem-section--navy .calc-disclaimer {
font-family: var(--font-ui);
font-weight: 300;
font-size: 9px;
letter-spacing: 0.1em;
color: rgba(240,236,228,0.4);
line-height: 1.8;
margin-top: auto;
border-top: 1px solid rgba(200,146,42,0.15);
padding-top: 1rem;
}
.sbc-formula {
background: rgba(10,22,40,0.8);
border: 1px solid var(--gold-dim);
padding: 1.5rem 2rem;
margin: 2rem 0;
text-align: center;
}
.sbc-formula p {
font-family: var(--font-ui);
font-size: 11px;
letter-spacing: 0.15em;
color: var(--gold-dim);
margin: 0;
}
.sbc-table {
width: 100%;
border-collapse: collapse;
margin: 2rem 0;
}
.sbc-table th {
font-family: var(--font-ui);
font-size: 9px;
font-weight: 300;
letter-spacing: 0.3em;
text-transform: uppercase;
color: var(--gold-dim);
border-bottom: 1px solid var(--gold-dim);
padding: 0.7rem 0.8rem;
text-align: left;
}
.sbc-table td {
font-family: var(--font-body);
font-size: 1.15rem;
color: var(--white-dim);
padding: 0.7rem 0.8rem;
border-bottom: 1px solid var(--white-mist);
}
.sbc-table tr:hover td { background: var(--white-mist); }
.mem-conditions {
display: flex;
flex-direction: column;
gap: 0;
}
.mem-condition {
display: grid;
grid-template-columns: 200px 1fr;
gap: 2rem;
padding: 1.8rem 0;
border-bottom: 1px solid var(--white-mist);
align-items: start;
}
@media (max-width: 600px) {
.mem-condition { grid-template-columns: 1fr; gap: 0.5rem; }
}
.mem-condition:last-child { border-bottom: none; }
.mem-condition-label {
font-family: var(--font-ui);
font-size: 9px;
font-weight: 300;
letter-spacing: 0.3em;
text-transform: uppercase;
color: var(--gold-dim);
padding-top: 0.2rem;
}
.mem-condition-text {
font-family: var(--font-body);
font-size: clamp(1.15rem, 1.5vw, 1.3rem);
line-height: 1.85;
color: var(--white-dim);
}
#mem-cta {
text-align: center;
padding: 6rem 2rem;
}
.mem-cta-title {
font-family: var(--font-display);
font-weight: 300;
font-size: clamp(1.6rem, 3vw, 2.4rem);
letter-spacing: 0.15em;
color: var(--white);
margin-bottom: 1rem;
}
.mem-cta-sub {
font-family: var(--font-body);
font-style: italic;
font-size: clamp(1.2rem, 1.6vw, 1.35rem);
color: var(--white-dim);
margin-bottom: 2.5rem;
line-height: 1.7;
}
.mem-footer {
background: var(--abyss);
border-top: 1px solid var(--white-mist);
padding: 2rem;
text-align: center;
}
.mem-footer p {
font-family: var(--font-ui);
font-size: 9px;
letter-spacing: 0.25em;
color: rgba(240,236,228,0.2);
text-transform: uppercase;
line-height: 2;
}
/* ═══════════════════════════════════════════════════════════════════
24. PAGE — mentions-legales.html
═══════════════════════════════════════════════════════════════════ */
.legal-page {
max-width: 780px;
margin: 0 auto;
padding: 7rem 2rem 3rem;
}
.legal-eyebrow {
font-family: var(--font-ui);
font-size: 9px;
font-weight: 200;
letter-spacing: 0.5em;
color: var(--gold);
text-transform: uppercase;
display: block;
margin-bottom: 1.2rem;
}
.legal-title {
font-family: var(--font-display);
font-weight: 300;
font-size: clamp(1.8rem, 3.5vw, 3rem);
letter-spacing: 0.2em;
color: var(--white);
margin-bottom: 2rem;
line-height: 1.2;
}
.legal-section {
margin-bottom: 1.5rem;
padding-bottom: 1.5rem;
border-bottom: 1px solid var(--white-mist);
}
.legal-section:last-child {
border-bottom: none;
}
.legal-section h2 {
font-family: var(--font-ui);
font-size: 9px;
font-weight: 300;
letter-spacing: 0.4em;
text-transform: uppercase;
color: var(--gold-dim);
margin-bottom: 1.2rem;
}
.legal-section p {
font-family: var(--font-body);
font-size: clamp(1.2rem, 1.5vw, 1.3rem);
line-height: 1.9;
color: var(--white-dim);
margin-bottom: 0.8rem;
}
.legal-section p:last-child { margin-bottom: 0; }
.legal-section strong {
color: var(--white);
font-weight: 400;
}
.legal-date {
font-family: var(--font-ui);
font-size: 9px;
letter-spacing: 0.3em;
color: rgba(240,236,228,0.2);
text-transform: uppercase;
margin-top: 4rem;
}
.legal-footer {
background: var(--abyss);
border-top: 1px solid var(--white-mist);
padding: 1.5rem 2rem;
text-align: center;
}
.legal-footer p {
font-family: var(--font-ui);
font-size: 9px;
letter-spacing: 0.25em;
color: rgba(240,236,228,0.2);
text-transform: uppercase;
}