/* SAHRAOUI — desert aesthetic */
@font-face {
font-family: 'Albaik';
src: url('/fonts/Albaik-alt02.otf') format('opentype');
font-weight: 400;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Ebullience';
src: url('/fonts/Ebullience.otf') format('opentype');
font-weight: 400;
font-style: normal;
font-display: swap;
}
:root {
--sand-50: #fdf8f1;
--sand-100: #f7ecd8;
--sand-200: #ebd5b0;
--sand-300: #d9b985;
--sand-400: #c69a5a;
--sand-500: #a87a3e;
--earth-700: #6b4423;
--earth-800: #4a2e16;
--night-900: #1a120a;
--night-950: #0d0805;
--ink: #2a1f12;
--muted: #6b5c45;
--accent: #c79354;
--line: rgba(106, 76, 35, 0.15);
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
background: var(--sand-50);
color: var(--ink);
line-height: 1.7;
font-size: 16px;
-webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, .serif {
font-family: 'Cormorant Garamond', 'Playfair Display', Georgia, serif;
font-weight: 500;
letter-spacing: 0.01em;
color: var(--night-900);
line-height: 1.2;
}
a { color: var(--earth-700); text-decoration: none; transition: color .2s; }
a:hover { color: var(--accent); }
img { max-width: 100%; height: auto; display: block; }
/* ---------- nav ---------- */
.nav {
position: fixed;
top: 0; left: 0; right: 0;
z-index: 100;
background: rgba(251, 244, 232, 0.96);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
}
.nav::before {
content: '';
position: absolute;
inset: 0;
background-image: var(--p-nav-zellige);
background-size: 72px 72px;
opacity: 0.38;
pointer-events: none;
z-index: 0;
animation: zellige-pan 90s linear infinite;
}
.nav::after {
content: '';
position: absolute;
left: 0; right: 0; bottom: 0;
height: 3px;
background: linear-gradient(90deg, transparent 0%, var(--sand-300) 8%, var(--accent) 30%, rgba(199,147,84,0.95) 50%, var(--accent) 70%, var(--sand-300) 92%, transparent 100%);
pointer-events: none;
z-index: 0;
}
.nav-inner {
max-width: 1200px;
margin: 0 auto;
padding: 0.55rem 2rem;
display: flex;
align-items: center;
justify-content: space-between;
gap: 2rem;
position: relative;
z-index: 1;
}
.nav-brand {
font-family: 'Reem Kufi', 'Cormorant Garamond', Georgia, serif;
font-size: 2rem;
font-weight: 700;
letter-spacing: 0;
color: var(--night-900);
direction: rtl;
margin-top: -3px;
}
.nav-brand::before {
content: '✦';
font-size: 0.55rem;
color: var(--accent);
vertical-align: middle;
opacity: 0.8;
margin-right: 0.55rem;
}
.nav-brand::after {
content: '✦';
font-size: 0.55rem;
color: var(--accent);
vertical-align: middle;
opacity: 0.8;
margin-left: 0.55rem;
}
.nav-links {
display: flex;
gap: 1.8rem;
list-style: none;
align-items: center;
overflow: visible;
}
.nav-links a {
font-size: 0.88rem;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--ink);
font-weight: 500;
transition: color .2s;
white-space: nowrap;
}
.nav-links a:not(.nav-cta) {
position: relative;
padding-bottom: 3px;
}
.nav-links a:not(.nav-cta)::after {
content: '';
position: absolute;
left: 50%; right: 50%;
bottom: 0;
height: 1px;
background: var(--accent);
transition: left .25s cubic-bezier(.4,0,.2,1), right .25s cubic-bezier(.4,0,.2,1), background .2s;
}
.nav-links a:not(.nav-cta):hover { color: var(--accent); }
.nav-links a:not(.nav-cta):hover::after { left: 0; right: 0; }
.nav-cta {
padding: 0.5rem 1.3rem;
border: 1px solid var(--earth-700);
border-radius: 100px;
font-size: 0.78rem !important;
letter-spacing: 0.12em !important;
transition: all .2s;
color: var(--earth-700) !important;
}
.nav-cta:hover { background: var(--earth-700); color: var(--sand-50) !important; }
.nav-toggle {
display: none;
background: none;
border: none;
cursor: pointer;
font-size: 1.5rem;
color: var(--ink);
position: relative;
z-index: 1;
}
/* ---------- nav-right (lang-btn + hamburger wrapper) ---------- */
.nav-right {
display: flex;
align-items: center;
gap: 0.6rem;
}
/* ---------- lang switcher ---------- */
.lang-switcher,
.currency-switcher {
position: relative;
list-style: none;
}
.lang-switcher::marker,
.currency-switcher::marker { content: ''; display: none; }
.lang-btn {
background: none;
border: 1px solid var(--accent);
border-radius: 100px;
padding: 0.38rem 0.65rem;
cursor: pointer;
font-size: 1rem;
line-height: 1;
color: var(--accent);
transition: background .2s, color .2s;
display: flex;
align-items: center;
gap: 0.3rem;
}
.lang-btn:hover { background: var(--accent); color: var(--sand-50); }
.lang-dropdown {
position: fixed;
background: rgba(251,244,232,0.98);
border: 1px solid rgba(160,105,45,0.25);
border-radius: 8px;
box-shadow: 0 6px 24px rgba(0,0,0,0.12);
min-width: 140px;
z-index: 9999;
overflow: hidden;
list-style: none;
visibility: hidden;
opacity: 0;
pointer-events: none;
transform: translateY(-6px);
transition: opacity .15s, transform .15s, visibility .15s;
}
.lang-dropdown.open {
visibility: visible;
opacity: 1;
pointer-events: auto;
transform: translateY(0);
}
.lang-dropdown button {
display: block;
width: 100%;
text-align: left;
background: none;
border: none;
padding: 0.65rem 1rem;
font-size: 0.82rem;
letter-spacing: 0.08em;
text-transform: uppercase;
font-family: 'Inter', sans-serif;
color: var(--ink);
cursor: pointer;
transition: background .15s, color .15s;
}
.lang-dropdown button:hover { background: rgba(160,105,45,0.1); color: var(--accent); }
.lang-dropdown button.active { color: var(--accent); font-weight: 600; }
/* ---------- hero ---------- */
.hero {
min-height: 70vh;
display: flex;
align-items: center;
justify-content: center;
padding: 5.5rem 2rem 3rem;
position: relative;
overflow: hidden;
background:
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30'%3E%3Cpath d='M15 1L29 15L15 29L1 15Z' fill='none' stroke='rgba(160,105,45,0.18)' stroke-width='0.6'/%3E%3Cpath d='M15 8L22 15L15 22L8 15Z' fill='rgba(160,105,45,0.04)' stroke='rgba(160,105,45,0.11)' stroke-width='0.5'/%3E%3C/svg%3E") repeat,
radial-gradient(ellipse at 70% 30%, rgba(199, 147, 84, 0.35) 0%, transparent 50%),
radial-gradient(ellipse at 20% 80%, rgba(106, 68, 35, 0.25) 0%, transparent 55%),
linear-gradient(180deg, #c9933e 0%, #9a6218 50%, #7a4a10 100%);
}
.hero::before {
content: '';
position: absolute;
bottom: 0; left: 0; right: 0;
height: 40%;
background: linear-gradient(180deg, transparent 0%, rgba(74, 46, 22, 0.15) 100%);
pointer-events: none;
}
.hero-inner {
max-width: 900px;
text-align: center;
position: relative;
z-index: 2;
}
.hero-eyebrow {
font-size: 0.85rem;
letter-spacing: 0.4em;
text-transform: uppercase;
color: var(--earth-700);
margin-top: 0.5rem;
margin-bottom: 0.6rem;
font-weight: 500;
}
.hero h1 {
font-family: 'Cinzel Decorative', 'Cormorant Garamond', Georgia, serif;
font-size: clamp(3rem, 8vw, 6.5rem);
font-weight: 400;
letter-spacing: 0.22em;
margin-bottom: 1.5rem;
color: var(--night-900);
display: flex;
justify-content: center;
align-items: baseline;
}
.hero-tagline {
font-family: 'Inter', sans-serif;
font-size: 1.4rem;
font-style: normal;
font-weight: 500;
letter-spacing: 0.4em;
text-transform: uppercase;
color: var(--earth-800);
margin-bottom: 2.5rem;
}
.hero-subtitle {
font-family: 'Amiri', 'Cormorant Garamond', Georgia, serif;
font-size: 2.6rem;
font-weight: 700;
font-style: italic;
color: var(--night-900);
margin-bottom: 2rem;
letter-spacing: 0;
line-height: 1.2;
text-transform: none;
}
.hero-subtitle .hero-num {
font-family: inherit;
font-weight: inherit;
font-style: inherit;
font-size: inherit;
color: inherit;
margin: 0;
letter-spacing: inherit;
}
.hero-title-suffix,
.hero-title-mirror {
font-family: 'Inter', sans-serif;
font-size: 0.85rem;
font-weight: 500;
letter-spacing: 0.4em;
white-space: nowrap;
}
.hero-title-suffix {
margin-left: -0.22em;
}
.hero-title-mirror {
visibility: hidden;
margin-right: -0.22em;
}
.hero-title-main {
display: inline-block;
}
.hero p.lead {
font-size: 1.1rem;
font-style: italic;
color: var(--earth-800);
max-width: 620px;
margin: 0 auto 3rem;
}
.hero-divider {
width: 60px;
height: 1px;
background: var(--earth-700);
margin: 2.5rem auto;
opacity: 0.4;
}
.hero-cta {
display: flex;
gap: 1.2rem;
justify-content: center;
flex-wrap: wrap;
margin-top: 1rem;
}
/* ---------- buttons ---------- */
.btn {
display: inline-block;
padding: 0.95rem 2.2rem;
font-size: 0.85rem;
letter-spacing: 0.18em;
text-transform: uppercase;
font-weight: 500;
border-radius: 100px;
border: 1px solid var(--earth-700);
cursor: pointer;
transition: all .25s;
text-align: center;
font-family: inherit;
}
.btn-primary {
background: var(--earth-700);
color: var(--sand-50);
}
.btn-primary:hover {
background: var(--night-900);
border-color: var(--night-900);
color: var(--sand-50);
transform: translateY(-1px);
}
.btn-ghost {
background: transparent;
color: var(--earth-800);
}
.btn-ghost:hover {
background: var(--earth-700);
color: var(--sand-50);
}
/* ---------- sections ---------- */
section.page-section {
padding: 6rem 2rem;
}
.container {
max-width: 1100px;
margin: 0 auto;
}
.container-narrow {
max-width: 760px;
margin: 0 auto;
}
.section-eyebrow {
font-size: 0.85rem;
letter-spacing: 0.4em;
text-transform: uppercase;
color: var(--accent);
text-align: center;
margin-bottom: 1.2rem;
font-weight: 500;
}
h2.section-title {
font-size: clamp(2.2rem, 5vw, 3.4rem);
text-align: center;
margin-bottom: 1.2rem;
letter-spacing: 0.04em;
}
.section-divider {
width: 50px;
height: 1px;
background: var(--accent);
margin: 1.5rem auto 3rem;
opacity: 0.5;
}
/* ---------- piliers grid ---------- */
.piliers {
background: linear-gradient(180deg, var(--sand-300) 0%, var(--sand-100) 100%);
position: relative;
}
.piliers-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: 2.5rem;
margin-top: 0.8rem;
}
.pilier {
text-align: center;
padding: 2rem 1rem;
}
.pilier-icon {
width: 60px;
height: 60px;
margin: 0 auto 1.5rem;
border: 1px solid var(--earth-700);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-family: 'Cormorant Garamond', serif;
font-size: 1.6rem;
color: var(--earth-700);
font-style: italic;
}
.pilier h3 {
font-size: 1.5rem;
margin-bottom: 0.8rem;
font-style: italic;
}
.pilier p {
font-size: 0.95rem;
color: var(--muted);
}
.pilier .arabesque-divider {
margin: 1rem 0 0 auto;
max-width: 110px;
height: 22px;
}
/* Experience "Piliers": 2×2 cards — icon centred on top, title, short text. */
.piliers-grid.piliers-left {
grid-template-columns: repeat(2, 1fr);
gap: 1.6rem;
}
.piliers-left .pilier {
display: block;
text-align: center;
padding: 2.4rem 1.8rem;
background: rgba(253, 248, 241, 0.5);
border: 1px solid rgba(160, 105, 45, 0.18);
border-radius: 12px;
}
.piliers-left .pilier .pilier-icon {
display: flex;
width: 60px;
height: 60px;
margin: 0 auto 1.3rem;
}
.piliers-left .pilier h3 {
display: block;
margin-bottom: 0.6rem;
}
.piliers-left .pilier p {
margin: 0;
font-family: 'Cormorant Garamond', Georgia, serif;
font-style: italic;
font-size: 1.22rem;
color: var(--earth-800);
line-height: 1.6;
}
.piliers-left .pilier .arabesque-divider {
margin: 0.6rem auto 0;
}
/* ---------- prose blocks ---------- */
.prose {
font-size: 1.15rem;
color: var(--ink);
}
.prose p {
margin-bottom: 1.4rem;
}
.prose p.lead {
font-family: 'Cormorant Garamond', Georgia, serif;
font-size: 1.45rem;
font-style: italic;
color: var(--earth-800);
line-height: 1.5;
margin-bottom: 2.5rem;
}
.prose h3 {
font-size: 1.7rem;
font-style: italic;
margin: 3rem 0 1rem;
color: var(--night-900);
}
.prose blockquote {
font-family: 'Cormorant Garamond', Georgia, serif;
font-size: 1.6rem;
font-style: italic;
color: var(--earth-800);
text-align: center;
padding: 2rem;
margin: 2.5rem 0;
border-top: 1px solid var(--line);
border-bottom: 1px solid var(--line);
}
/* Second line of the tarif-card labels ("tout inclus sur place",
"8 à 12 voyageurs"…) — on its own line, slightly smaller. */
.tarif-sub {
display: inline-block;
font-size: 0.85em;
}
.prose ul {
list-style: none;
padding: 0;
}
.prose ul li {
padding-left: 1.5rem;
position: relative;
margin-bottom: 0.6rem;
}
.prose ul li::before {
content: '—';
position: absolute;
left: 0;
color: var(--accent);
}
/* ---------- prose split layout (photo left / text right) ---------- */
.prose-wide {
max-width: none;
padding: 0 5rem;
}
.prose-split {
display: grid;
grid-template-columns: 1fr 1.3fr;
gap: 2.5rem;
align-items: stretch;
margin-bottom: 2.5rem;
}
.photo-split {
align-items: start;
}
.prose-split-reverse {
grid-template-columns: 1.3fr 1fr;
}
.prose-split-reverse .prose-text { order: 1; }
.prose-split-reverse .prose-illustration { order: 2; }
.prose-illustration {
position: relative;
overflow: hidden;
}
/* The index "Au cœur du désert" photo: shown at its natural portrait ratio,
centred horizontally within its half-column, and height-capped so it never
grows with the prose. Cap is 594px = the previous 540px +10%. */
.prose-split > .prose-illustration:not(.photo-prose) {
align-self: center;
height: auto;
overflow: visible;
}
.prose-split > .prose-illustration:not(.photo-prose) .prose-photo {
display: block;
width: auto;
max-width: 100%;
max-height: 594px;
margin: 0 0 0 auto;
border-radius: 6px;
}
/* Index "Au cœur du désert" block: wider gap between the decorative
illustration and the prose, plus vertical centring so the illustration
sits balanced against the (taller) text rather than hugging the top. */
.prose-split:not(.photo-split) {
gap: 12rem;
align-items: center;
}
/* Experience page photo blocks: centre the photo against its text so it no
longer looks too low (short text) or too high (long text); wider gap between
the photo and its text. Scoped to the prose-bg sections so the programme
itinerary keeps its top alignment. */
.prose-bg .prose-split.photo-split {
align-items: center;
gap: 4rem;
}
/* The second (reversed) photo block gets double that gap above it, so the two
photo+text blocks are clearly separated. */
.prose-bg .prose-split-reverse.photo-split {
margin-top: 8rem;
}
.photo-prose {
height: 260px;
align-self: center;
}
.photo-frame-svg {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: 2;
overflow: visible;
}
.prose-illustration svg {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
display: block;
}
.prose-text p,
.prose-text p.lead {
font-family: 'Cormorant Garamond', Georgia, serif;
font-style: italic;
color: var(--earth-800);
line-height: 1.75;
font-size: 1.38rem;
margin-bottom: 1.2rem;
}
/* Pillars list on the index "Au cœur du désert" block — four named
day-rhythms (Marche silencieuse, Espace introspectif, …). Inherits the
same prose typography (Cormorant Garamond italic, 1.38rem) so the list
reads as part of the same prose flow rather than a separate UI block;
only the pillar names are pulled out in upright weighted serif. */
.day-pillars {
list-style: none;
padding: 0;
margin: 0 0 1.2rem;
}
.day-pillars li {
font-family: 'Cormorant Garamond', Georgia, serif;
font-style: italic;
color: var(--earth-800);
line-height: 1.75;
font-size: 1.38rem;
margin-bottom: 0.4rem;
}
.day-pillars li strong {
font-style: normal;
font-weight: 600;
color: var(--earth-900, #4a3219);
}
/* ---------- programme / itinerary ---------- */
.itinerary {
margin-top: 3rem;
}
.day {
display: grid;
grid-template-columns: 200px 1fr;
gap: 2.5rem;
padding: 2rem 0;
border-top: 1px solid var(--line);
}
.day:last-child { border-bottom: 1px solid var(--line); }
.day-label {
font-family: 'Cormorant Garamond', serif;
font-size: 1.4rem;
font-style: italic;
color: var(--accent);
letter-spacing: 0.02em;
}
.day-body h3 {
font-size: 1.3rem;
margin-bottom: 0.6rem;
color: var(--night-900);
}
.day-body p {
color: var(--muted);
font-size: 0.98rem;
}
/* ---------- programme day entries ---------- */
section.programme-section { padding-top: 2.8rem; padding-bottom: 0; }
.programme-section .itinerary { margin-top: 1rem; }
.programme-section .itinerary::before { display: none; }
.programme-section .photo-prose {
width: 280px;
height: 280px;
border-radius: 50%;
border: 4px solid var(--accent, #c79354);
box-shadow: 0 0 0 3px rgba(199,147,84,0.45), 0 0 0 11px rgba(199,147,84,0.14), 0 14px 44px rgba(0,0,0,0.32);
margin: 0 auto;
background: var(--earth-800);
}
.programme-section .photo-prose img {
object-fit: cover !important;
}
.programme-section .prose-split { gap: 4.5rem; margin-bottom: 2.5rem; }
.programme-section .itinerary .arabesque-divider { margin: 3.5rem auto 4rem; }
/* À propos circular photo */
.apropos-photo-circle {
width: 300px;
height: 300px;
border-radius: 50%;
overflow: hidden;
border: 4px solid var(--accent, #c79354);
box-shadow: 0 0 0 3px rgba(199,147,84,0.45), 0 0 0 11px rgba(199,147,84,0.14), 0 14px 44px rgba(0,0,0,0.32);
display: inline-block;
position: relative;
background: var(--earth-800);
}
.apropos-photo-circle img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.day-badge {
font-family: 'Inter', sans-serif;
font-size: 0.85rem;
letter-spacing: 0.4em;
text-transform: uppercase;
color: var(--accent);
font-weight: 500;
margin-bottom: 1rem;
}
.day-rule {
width: 50px;
height: 1px;
background: linear-gradient(90deg, var(--accent), transparent);
margin: 0 0 1.4rem;
opacity: 0.6;
}
.prose-text h3 {
font-family: 'Cormorant Garamond', serif;
font-size: clamp(1.1rem, 1.6vw, 1.3rem);
font-style: italic;
font-weight: 400;
color: var(--night-900);
margin-bottom: 0.8rem;
letter-spacing: 0.02em;
}
.programme-section .prose-text p {
color: var(--night-900);
letter-spacing: 0.02em;
font-weight: 400;
}
/* ---------- info grid ---------- */
.info-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 1.6rem;
margin-top: 2rem;
}
.info-card {
padding: 1.9rem 1.7rem;
background: rgba(253, 248, 241, 0.5);
border: 1px solid rgba(160, 105, 45, 0.18);
border-radius: 12px;
text-align: center;
}
.info-card .info-icon {
display: block;
width: 40px;
height: 40px;
margin: 0 auto 1rem;
color: var(--earth-700, #8a6a45);
}
.info-card .info-icon svg { width: 100%; height: 100%; display: block; }
.info-card h4 {
font-size: 1.35rem;
font-style: italic;
margin-bottom: 0.7rem;
color: var(--night-900);
}
.info-card p {
font-family: 'Cormorant Garamond', serif;
font-style: italic;
font-size: 1.15rem;
color: var(--night-900);
text-align: left;
}
.piliers .container-narrow p {
font-family: 'Cormorant Garamond', serif;
font-style: italic;
font-size: 1.15rem;
color: var(--night-900);
}
/* ---------- tarif ---------- */
.tarif-card {
background: linear-gradient(180deg, var(--sand-100) 0%, var(--sand-50) 100%);
border: 1px solid var(--line);
border-radius: 2px;
padding: 4rem 3rem;
text-align: center;
margin: 3rem auto;
max-width: 580px;
}
.tarif-old-wrap {
margin-bottom: 0.6rem;
}
.tarif-old-label {
display: block;
font-family: 'Inter', sans-serif;
font-size: 0.68rem;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--muted);
margin-bottom: 0.15rem;
}
.tarif-old-price {
font-family: 'Cormorant Garamond', Georgia, serif;
font-size: 2.4rem;
font-style: italic;
color: var(--muted);
letter-spacing: 0.02em;
}
.tarif-old-num {
text-decoration: line-through;
text-decoration-color: #c0392b;
text-decoration-thickness: 1.5px;
}
.tarif-old-price .tarif-currency {
font-size: 1.15rem;
}
.tarif-footnote {
font-family: 'Cormorant Garamond', Georgia, serif;
font-style: italic;
font-size: 1.45rem;
color: #c0392b;
margin-top: 0.8rem;
line-height: 1.5;
}
.tarif-price {
font-family: 'Cormorant Garamond', Georgia, serif;
font-size: 3.5rem;
color: var(--night-900);
margin-bottom: 0.3rem;
letter-spacing: 0.02em;
}
.tarif-currency {
font-size: 1.5rem;
color: var(--accent);
}
.tarif-per {
color: var(--muted);
font-size: 0.95rem;
letter-spacing: 0.1em;
text-transform: uppercase;
margin-bottom: 0.6rem;
}
.tarif-promo {
font-family: 'Cormorant Garamond', Georgia, serif;
font-style: italic;
font-size: 1.05rem;
color: #c0392b;
letter-spacing: 0.03em;
margin-bottom: 1.6rem;
}
.dates-list {
list-style: none;
margin: 2rem 0;
}
.dates-list li {
padding: 0.9rem 0;
border-top: 1px solid var(--line);
font-family: 'Cormorant Garamond', serif;
font-size: 1.25rem;
text-align: center;
}
.dates-list li:last-child { border-bottom: 1px solid var(--line); }
.dates-list .place-status {
display: block;
font-family: 'Inter', sans-serif;
font-size: 0.75rem;
letter-spacing: 0.18em;
text-transform: uppercase;
margin-top: 0.3rem;
color: var(--accent);
}
.dates-list .place-status.sold-out {
color: #c53030;
letter-spacing: 0.12em;
font-weight: 600;
}
.dates-list li.trip-group-heading {
border-top: none;
border-bottom: none;
padding: 1.6rem 0 0.4rem;
font-family: 'Cinzel Decorative', Georgia, serif;
font-size: 1.1rem;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--earth-800, #6a4423);
font-weight: 700;
}
.dates-list li.trip-group-heading:first-child { padding-top: 0.4rem; }
.dates-list li.trip-group-heading + li { border-top: 1px solid var(--line); }
.inclus-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 3rem;
margin: 3rem 0;
text-align: left;
}
.inclus-col h4 {
font-size: 1.1rem;
letter-spacing: 0.12em;
text-transform: uppercase;
margin-bottom: 1.5rem;
color: var(--night-900);
font-family: 'Inter', sans-serif;
font-weight: 600;
}
.inclus-col ul {
list-style: none;
padding: 0;
}
.inclus-col ul li {
padding: 0.5rem 0 0.5rem 1.8rem;
position: relative;
font-size: 0.98rem;
}
.inclus-col.yes li::before {
content: '✓';
position: absolute;
left: 0;
color: #6b8e3d;
font-weight: bold;
}
.inclus-col.no li::before {
content: '✕';
position: absolute;
left: 0;
color: #a8543a;
}
/* ---------- forms ---------- */
.form {
margin: 3rem auto 0;
max-width: 560px;
}
.form-row {
margin-bottom: 1.5rem;
}
.form-row label {
display: block;
font-size: 0.8rem;
letter-spacing: 0.15em;
text-transform: uppercase;
color: var(--earth-700);
margin-bottom: 0.5rem;
font-weight: 500;
}
.form-row input,
.form-row textarea,
.form-row select {
width: 100%;
padding: 0.9rem 1rem;
background: transparent;
border: 1px solid var(--line);
border-bottom: 1px solid var(--earth-700);
border-radius: 0;
font-family: inherit;
font-size: 1rem;
color: var(--ink);
transition: border-color .2s;
}
#contact-form .form-row select,
#contact-form .form-row select option {
font-family: 'Cormorant Garamond', serif;
font-style: italic;
font-size: 1.15rem;
}
.form-row input:focus,
.form-row textarea:focus,
.form-row select:focus {
outline: none;
border-color: var(--accent);
}
.form-row textarea {
min-height: 120px;
resize: vertical;
}
.form-grid-2 {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1.5rem;
}
.form-status {
margin-top: 1.5rem;
padding: 1rem;
border-radius: 4px;
font-size: 0.95rem;
text-align: center;
display: none;
}
.form-status.success {
display: block;
background: rgba(107, 142, 61, 0.1);
color: #4a6b2a;
border: 1px solid rgba(107, 142, 61, 0.3);
}
.form-status.error {
display: block;
background: rgba(168, 84, 58, 0.1);
color: #a8543a;
border: 1px solid rgba(168, 84, 58, 0.3);
}
/* ---------- faq ---------- */
.faq-list {
margin-top: 3rem;
}
.faq-item {
border-top: 1px solid var(--line);
padding: 1.5rem 0;
}
.faq-item:last-child {
border-bottom: 1px solid var(--line);
}
.faq-question {
cursor: pointer;
display: flex;
justify-content: space-between;
align-items: center;
font-family: 'Cormorant Garamond', Georgia, serif;
font-size: 1.4rem;
font-style: italic;
color: var(--night-900);
list-style: none;
}
.faq-question::-webkit-details-marker { display: none; }
.faq-question::after {
content: '+';
font-family: 'Inter', sans-serif;
font-size: 1.5rem;
color: var(--accent);
font-style: normal;
transition: transform .2s;
}
.faq-item[open] .faq-question::after {
content: '−';
}
.faq-answer {
padding-top: 1rem;
color: var(--muted);
font-size: 1.15rem;
font-family: 'Cormorant Garamond', Georgia, serif;
font-style: italic;
white-space: pre-line;
}
/* ---------- galerie ---------- */
.galerie-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 1.5rem;
margin-top: 3rem;
}
.galerie-tile {
aspect-ratio: 4/5;
border-radius: 2px;
position: relative;
overflow: hidden;
display: flex;
align-items: flex-end;
padding: 1.5rem;
color: var(--sand-50);
font-family: 'Cormorant Garamond', serif;
font-style: italic;
font-size: 1.2rem;
}
.galerie-tile.t1 { background: linear-gradient(135deg, #d9b985 0%, #8b5a2b 100%); }
.galerie-tile.t2 { background: linear-gradient(135deg, #6b4423 0%, #2a1f12 100%); aspect-ratio: 4/3; grid-row: span 2; }
.galerie-tile.t3 { background: linear-gradient(135deg, #c69a5a 0%, #6b4423 100%); }
.galerie-tile.t4 { background: linear-gradient(135deg, #1a120a 0%, #6b4423 100%); }
.galerie-tile.t5 { background: linear-gradient(135deg, #ebd5b0 0%, #c79354 100%); color: var(--earth-800); }
.galerie-tile.t6 { background: linear-gradient(135deg, #a87a3e 0%, #4a2e16 100%); }
.galerie-tile.t7 { background: linear-gradient(135deg, #d9b985 0%, #c69a5a 50%, #6b4423 100%); }
.galerie-tile.t8 { background: linear-gradient(180deg, #2a1f12 0%, #6b4423 50%, #d9b985 100%); }
.galerie-tile.t9 { background: linear-gradient(135deg, #f7ecd8 0%, #d9b985 100%); color: var(--earth-800); }
.galerie-tile::before {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(180deg, transparent 50%, rgba(0,0,0,0.4) 100%);
pointer-events: none;
}
.galerie-tile span {
position: relative;
z-index: 1;
}
.galerie-note {
text-align: center;
margin-top: 3rem;
font-style: italic;
color: var(--muted);
}
/* ---------- contact ---------- */
.contact-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 4rem;
margin-top: 3rem;
align-items: center;
}
.contact-info {
background: linear-gradient(180deg, var(--sand-100) 0%, var(--sand-50) 100%);
border: 1px solid var(--line);
border-radius: 2px;
padding: 3rem 2.4rem;
text-align: center;
position: relative;
overflow: visible;
}
.contact-info::before,
.contact-info::after {
content: '';
position: absolute;
width: 70px;
height: 70px;
background-image: var(--p-star-earth);
background-size: contain;
background-repeat: no-repeat;
background-position: center;
opacity: 0.16;
pointer-events: none;
}
.contact-info::before { top: -18px; left: -18px; clip-path: inset(18px 0 0 18px); animation: rotate-cw 55s linear infinite; }
.contact-info::after { bottom: -18px; right: -18px; clip-path: inset(0 18px 18px 0); animation: rotate-ccw 65s linear infinite; }
.contact-info h4 {
font-size: 0.85rem;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--earth-700);
margin-bottom: 0.5rem;
font-weight: 500;
}
.contact-info p {
font-family: 'Cormorant Garamond', serif;
font-size: 1.25rem;
margin-bottom: 1.6rem;
color: var(--night-900);
}
.contact-info p:last-child { margin-bottom: 0; }
@media (max-width: 700px) {
.contact-info { padding: 2.2rem 1.6rem; }
.contact-info p { font-size: 1.1rem; margin-bottom: 1.2rem; }
}
/* ---------- cta band ---------- */
.cta-band {
background: linear-gradient(135deg, var(--earth-800) 0%, var(--night-900) 100%);
color: var(--sand-100);
text-align: center;
padding: 6rem 2rem;
}
.cta-band h2 {
color: var(--sand-50);
font-size: clamp(2rem, 5vw, 3rem);
font-style: italic;
margin-bottom: 1.5rem;
}
.cta-band p {
font-family: 'Cormorant Garamond', serif;
font-size: 1.3rem;
font-style: italic;
margin-bottom: 2.5rem;
opacity: 0.85;
}
.cta-band .btn-primary {
background: var(--sand-100);
color: var(--night-900);
border-color: var(--sand-100);
}
.cta-band .btn-primary:hover {
background: var(--accent);
border-color: var(--accent);
color: var(--night-900);
}
.cta-band .btn-ghost {
color: var(--sand-100);
border-color: var(--sand-100);
}
.cta-band .btn-ghost:hover {
background: var(--sand-100);
color: var(--night-900);
}
/* ---------- footer ---------- */
footer {
background: var(--night-950);
color: var(--sand-200);
padding: 1rem 2rem 0.5rem;
}
.footer-inner {
max-width: 1100px;
margin: 0 auto;
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
gap: 2rem;
}
.footer-brand {
text-align: center;
flex-shrink: 0;
max-width: 320px;
min-width: 0;
}
.footer-brand .brand-name {
font-family: 'Cormorant Garamond', serif;
font-size: 1.8rem;
letter-spacing: 0.2em;
margin-bottom: 0.5rem;
color: var(--sand-100);
}
.footer-brand p {
font-style: italic;
color: var(--sand-300);
font-size: 0.95rem;
max-width: 320px;
}
.footer-brand .footer-sub-eyebrow {
font-family: 'Inter', sans-serif;
font-style: normal;
font-size: 0.68rem;
font-weight: 500;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--sand-300);
margin-bottom: 0.3rem;
white-space: nowrap;
overflow: hidden;
max-width: 100%;
}
.footer-brand .footer-sub-tagline {
font-family: 'Inter', sans-serif;
font-style: normal;
font-weight: 500;
font-size: 1.15rem;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--sand-200);
margin-bottom: 0;
white-space: nowrap;
overflow: hidden;
max-width: 100%;
}
.footer-col {
display: flex;
align-items: center;
flex-wrap: wrap;
justify-content: flex-end;
gap: 0;
flex: 1;
text-align: right;
}
.footer-col h5 {
font-size: 0.8rem;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--sand-100);
margin-bottom: 0;
margin-right: 0.2em;
font-family: 'Inter', sans-serif;
font-weight: 500;
white-space: nowrap;
}
.footer-col h5::after {
content: '';
}
.footer-col ul {
display: flex;
flex-wrap: wrap;
align-items: center;
list-style: none;
}
.footer-col ul li {
margin-bottom: 0;
}
.footer-col ul li::before {
content: '\00a0\00a0|\00a0\00a0';
color: var(--sand-300);
}
.footer-col ul li:last-child::after {
content: '\00a0\00a0|';
color: var(--sand-300);
}
.footer-col a {
color: var(--sand-300);
font-size: 0.9rem;
}
.footer-col a:hover { color: var(--sand-100); }
.footer-bottom {
max-width: 1100px;
margin: 0.4rem auto 0;
padding-top: 0.4rem;
border-top: 1px solid rgba(255,255,255,0.08);
text-align: center;
font-size: 0.8rem;
color: var(--sand-300);
opacity: 0.6;
}
/* ---------- page header (non-home pages) ---------- */
.page-header {
padding: 6rem 2rem 3rem;
position: relative;
overflow: hidden;
background:
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30'%3E%3Cpath d='M15 1L29 15L15 29L1 15Z' fill='none' stroke='rgba(160,105,45,0.22)' stroke-width='0.7'/%3E%3Cpath d='M15 8L22 15L15 22L8 15Z' fill='rgba(160,105,45,0.06)' stroke='rgba(160,105,45,0.14)' stroke-width='0.5'/%3E%3C/svg%3E") repeat,
radial-gradient(ellipse at 50% 0%, rgba(212,168,83,0.18) 0%, transparent 50%),
linear-gradient(180deg, var(--sand-100) 0%, var(--sand-200) 100%);
text-align: center;
}
.page-header .eyebrow {
font-size: 0.85rem;
letter-spacing: 0.4em;
text-transform: uppercase;
color: var(--earth-700);
margin-bottom: 1.5rem;
}
.page-header h1 {
font-family: 'Cinzel Decorative', 'Cormorant Garamond', Georgia, serif;
font-size: clamp(1.8rem, 4.5vw, 3rem);
letter-spacing: 0.06em;
margin-bottom: 1rem;
}
.page-header .subtitle {
font-family: 'Inter', sans-serif;
font-size: 0.85rem;
font-style: normal;
font-weight: 500;
letter-spacing: 0.4em;
text-transform: uppercase;
color: var(--earth-700);
max-width: 700px;
margin: 0 auto;
}
/* ---------- responsive ---------- */
@media (max-width: 768px) {
.nav-inner { padding: 0.3rem 1.2rem; }
.nav-links {
flex-direction: column;
gap: 0;
position: absolute;
top: calc(100% + 6px);
right: 0;
left: auto;
min-width: 215px;
background: rgba(251,244,232,0.98);
border: 1px solid rgba(160,105,45,0.25);
border-radius: 10px;
box-shadow: 0 8px 32px rgba(0,0,0,0.14);
overflow: hidden;
padding: 0.35rem 0;
visibility: hidden;
opacity: 0;
pointer-events: none;
transform: translateY(-6px);
transition: opacity .18s, transform .18s, visibility .18s;
}
.nav-links.open {
visibility: visible;
opacity: 1;
pointer-events: auto;
transform: translateY(0);
}
.nav-links li { width: 100%; }
.nav-links a { display: block; padding: 0.65rem 1.2rem; font-size: 0.82rem; letter-spacing: 0.1em; }
.nav-links a:not(.nav-cta) { padding: 0.65rem 1.2rem; }
.nav-links a:not(.nav-cta)::after { display: none; }
.nav-toggle { display: block; }
section.page-section { padding: 4rem 1.2rem; }
.hero { padding: 5rem 1.2rem 2rem; }
.hero-slide { background-size: auto 75%; background-position: center center; }
@keyframes hero-fade {
0% { opacity: 0; transform: scale(1.0); animation-timing-function: linear; }
4% { opacity: 1; transform: scale(1.02); animation-timing-function: linear; }
25% { opacity: 1; transform: scale(1.05); animation-timing-function: linear; }
29% { opacity: 0; transform: scale(1.07); }
100% { opacity: 0; transform: scale(1.0); }
}
.day { grid-template-columns: 1fr; gap: 0.5rem; padding: 1.5rem 0; }
.day-label { font-size: 1.2rem; }
.form-grid-2 { grid-template-columns: 1fr; }
.inclus-grid { grid-template-columns: 1fr; gap: 2rem; }
.contact-grid { grid-template-columns: 1fr; gap: 2.5rem; }
.footer-inner { flex-direction: column; align-items: center; gap: 0.8rem; }
.footer-col { display: none; }
.tarif-card { padding: 2.5rem 1.5rem; }
/* Page header (non-home pages) */
.page-header { padding: 4.5rem 1.2rem 2rem; }
/* CTA band — compact on phones */
.cta-band { padding: 2.2rem 1.2rem; }
.cta-band .container-narrow { display: flex; flex-direction: column; align-items: center; gap: 0.6rem; }
.cta-band h2 { font-size: 1.35rem; margin-bottom: 0.6rem; }
.cta-band p { font-size: 0.95rem; margin-bottom: 0.4rem; }
.cta-band .btn { padding: 0.5rem 1.4rem; font-size: 0.75rem; }
/* Hero — fix overflow caused by flex row of spans being wider than phone viewport */
.hero-inner { width: 100%; }
.hero h1 { display: block; letter-spacing: 0.1em; }
.hero-title-mirror, .hero-title-suffix { display: none; }
.hero-tagline { font-size: 1rem; letter-spacing: 0.15em; }
.hero-eyebrow { letter-spacing: 0.15em; }
.hero-subtitle { font-size: 0.89rem; letter-spacing: 0.08em; }
.hero-lead { letter-spacing: 0.04em; }
.hero-leads { min-height: 10rem; margin-bottom: 1.5rem; }
.hero-cta { gap: 0.8rem; }
/* Prose */
.prose blockquote { font-size: 1.25rem; padding: 1.2rem 1rem; }
.prose p.lead { font-size: 1.2rem; }
.prose-text p, .prose-text p.lead { font-size: 1.1rem; text-align: justify; }
.day-pillars li { font-size: 1.1rem; }
.day-pillars li strong { font-size: 1rem; }
.prose-split:not(.photo-split) { gap: 2.5rem; }
.tarif-footnote { font-size: 1.1rem; }
/* Piliers */
.piliers .section-eyebrow { font-size: 1.4rem; letter-spacing: 0.12em; }
.piliers h2.section-title { font-size: 1.4rem; }
.piliers-grid { gap: 0.8rem; }
.pilier { padding: 1rem 0.5rem; }
.piliers-left .pilier p { font-size: 1.1rem; }
/* Footer: smaller scale on mobile */
footer { padding: 0.6rem 1.2rem 0.3rem; }
.footer-brand .brand-name { font-size: 1.2rem; letter-spacing: 0.15em; }
.footer-brand .footer-sub-eyebrow { font-size: 0.55rem; letter-spacing: 0.22em; }
.footer-brand .footer-sub-tagline { font-size: 0.65rem; letter-spacing: 0.15em; }
.footer-col a { font-size: 0.75rem; }
.footer-col h5 { font-size: 0.65rem; }
.footer-bottom { font-size: 0.68rem; }
/* Réserver button — separated at bottom of dropdown */
.nav-links li:last-child { border-top: 1px solid rgba(160,105,45,0.18); padding: 0.4rem 0.8rem 0.45rem; }
.nav-links .nav-cta { display: block; text-align: center; border-radius: 100px; padding: 0.5rem 1rem !important; font-size: 0.78rem !important; }
}
/* ==========================================================
GEOMETRIC ART — Moroccan / Islamic patterns + photo system
========================================================== */
:root {
--p-star-sand: url("data:image/svg+xml;utf8,");
--p-star-earth: url("data:image/svg+xml;utf8,");
--p-zellige-earth: url("data:image/svg+xml;utf8,");
--p-zellige-sand: url("data:image/svg+xml;utf8,");
--p-arabesque: url("data:image/svg+xml;utf8,");
--p-arabesque-light: url("data:image/svg+xml;utf8,");
--p-nav-zellige: url("data:image/svg+xml;utf8,");
}
@keyframes rotate-cw { to { transform: rotate(360deg); } }
@keyframes rotate-ccw { to { transform: rotate(-360deg); } }
@keyframes rotate-center-cw { from { transform: translate(-50%, -50%) rotate(0deg); } to { transform: translate(-50%, -50%) rotate(360deg); } }
@keyframes rotate-center-ccw { from { transform: translate(-50%, -50%) rotate(0deg); } to { transform: translate(-50%, -50%) rotate(-360deg); } }
@keyframes zellige-pan { from { background-position: 0 0; } to { background-position: 80px 80px; } }
@keyframes float-y {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-12px); }
}
@keyframes page-fade {
from { opacity: 0; transform: translateY(8px); }
to { opacity: 1; transform: translateY(0); }
}
body > nav,
body > section,
body > header,
body > footer {
animation: page-fade 0.7s cubic-bezier(.2,.7,.2,1) both;
}
body > section { animation-delay: 0.05s; }
/* ------- HERO ------- */
.hero {
background: var(--night-900);
}
.hero::before {
top: auto;
bottom: 0; left: 0; right: 0;
height: 40%;
background: linear-gradient(180deg, transparent 0%, rgba(13, 8, 5, 0.35) 100%);
z-index: 2;
filter: none;
will-change: auto;
transform: none;
transition: none;
}
.hero::after {
content: '';
position: absolute;
inset: 0;
background:
radial-gradient(ellipse at 50% 60%, transparent 0%, rgba(90, 45, 5, 0.18) 70%),
linear-gradient(180deg, rgba(120, 65, 5, 0.08) 0%, rgba(75, 38, 5, 0.26) 100%);
z-index: 1;
}
.hero-slides {
position: absolute;
inset: 0;
overflow: hidden;
z-index: 0;
will-change: transform;
transform: translate3d(0, var(--parallax-y, 0), 0);
transition: transform 0.05s linear;
}
.hero-slide {
position: absolute;
inset: 0;
background-size: cover;
opacity: 0;
animation: hero-fade 36s ease-in-out infinite;
will-change: opacity, transform;
filter: brightness(0.72) saturate(1.1);
}
.hero-slide:nth-child(1) { animation-delay: 0s; background-position: center 45%; filter: brightness(1.05) saturate(1.55) contrast(1.08); }
.hero-slide:nth-child(2) { animation-delay: 9s; background-position: center 50%; filter: brightness(0.92) saturate(1.1); }
.hero-slide:nth-child(3) { animation-delay: 18s; background-position: center 50%; filter: brightness(1.1) saturate(1.1); }
.hero-slide:nth-child(4) { animation-delay: 27s; background-position: center 40%; filter: brightness(0.95) saturate(0.85) contrast(1.0); }
@keyframes hero-fade {
0% { opacity: 0; transform: scale(1.0); animation-timing-function: linear; }
4% { opacity: 1; transform: scale(1.02); animation-timing-function: linear; }
25% { opacity: 1; transform: scale(1.06); animation-timing-function: linear; }
29% { opacity: 0; transform: scale(1.08); }
100% { opacity: 0; transform: scale(1.0); }
}
@media (prefers-reduced-motion: reduce) {
.hero-slide { animation: none; opacity: 0; }
.hero-slide:nth-child(1) { opacity: 1; }
}
.hero-pattern {
position: absolute;
inset: 0;
z-index: 2;
background-image: var(--p-nav-zellige);
background-size: 90px 90px;
opacity: 0.22;
pointer-events: none;
animation: zellige-pan 120s linear infinite;
}
.hero-inner { z-index: 3; }
.hero h1,
.hero-subtitle { color: var(--sand-50) !important; }
.hero-tagline,
.hero-eyebrow,
.hero-title-suffix { color: var(--sand-200) !important; }
.hero-leads {
position: relative;
min-height: 6rem;
width: 100%;
max-width: 740px;
margin: 0 auto 2.5rem;
}
.hero-lead {
position: absolute;
top: 0; left: 0; right: 0;
font-family: 'Cinzel Decorative', Georgia, serif;
font-size: clamp(0.75rem, 1.8vw, 1.05rem);
font-weight: 400;
font-style: italic;
color: var(--sand-100);
letter-spacing: 0.12em;
line-height: 1.8;
text-align: center;
margin: 0;
opacity: 0;
animation: hero-lead-fade 36s ease-in-out infinite;
text-shadow: 0 1px 12px rgba(13, 8, 5, 0.65);
}
.hero-lead em {
font-style: italic;
font-weight: 700;
color: var(--earth-400, #d4a76a);
}
.hero-lead-1 { animation-delay: 0s; }
.hero-lead-2 { animation-delay: 9s; }
.hero-lead-3 { animation-delay: 18s; }
.hero-lead-4 { animation-delay: 27s; }
/* Leads: each phrase animates IN (slide up + fade in) AND OUT (slide up
+ fade out) symmetrically. The exit completes at 25% of the cycle —
exactly when the next lead's delay (9s = 25% of 36s) starts. So the two
phrases never visually overlap; the disappearance is animated, not snapped. */
/* Lead text is synced to its photo: both fade in together over 0→4% of the
cycle (the same 1.44s the incoming photo takes to appear, while the previous
photo crossfades out over that same window — so the old photo is gone fast).
The lead then holds and fades out by 25%, exactly when the next photo + lead
start. Two leads never overlap, and the text always enters with its photo. */
@keyframes hero-lead-fade {
0% { opacity: 0; transform: translateY(20px); animation-timing-function: linear; }
4% { opacity: 1; transform: translateY(0); animation-timing-function: linear; }
21% { opacity: 1; transform: translateY(0); animation-timing-function: linear; }
25% { opacity: 0; transform: translateY(-10px); }
26% { opacity: 0; transform: translateY(20px); }
100% { opacity: 0; transform: translateY(20px); }
}
@media (prefers-reduced-motion: reduce) {
.hero-lead { animation: none; opacity: 0; }
.hero-lead-1 { opacity: 1; }
}
.hero-divider { background: var(--sand-200); opacity: 0.6; }
.hero .btn-ghost {
color: var(--sand-50);
border-color: rgba(253, 248, 241, 0.7);
}
.hero .btn-ghost:hover {
background: var(--sand-50);
color: var(--night-900);
border-color: var(--sand-50);
}
.hero .btn-primary {
background: linear-gradient(135deg, #d9b985 0%, #c79354 50%, #a87a3e 100%);
color: var(--night-900);
border-color: #c79354;
box-shadow: 0 4px 14px rgba(168, 122, 62, 0.35);
}
.hero .btn-primary:hover {
background: linear-gradient(135deg, #c79354 0%, #a87a3e 50%, #7e5a26 100%);
border-color: #a87a3e;
color: var(--sand-50);
box-shadow: 0 6px 18px rgba(168, 122, 62, 0.5);
}
.hero-star,
.hero-star-2 {
position: absolute;
top: 50%;
left: 50%;
pointer-events: none;
z-index: 2;
background-image: var(--p-star-sand);
background-size: contain;
background-repeat: no-repeat;
background-position: center;
transform: translate(-50%, -50%);
}
.hero-star {
width: min(80vw, 720px);
height: min(80vw, 720px);
opacity: 0.16;
animation: rotate-center-cw 140s linear infinite;
}
.hero-star-2 {
width: min(50vw, 440px);
height: min(50vw, 440px);
opacity: 0.11;
animation: rotate-center-ccw 90s linear infinite;
}
/* ------- PAGE HEADER (non-home pages) — photo treatment ------- */
.page-header[data-photo] {
position: relative;
overflow: hidden;
background: var(--night-900);
}
.page-header[data-photo]::before {
content: '';
position: absolute;
inset: -10% 0 0 0;
background-image: var(--header-photo);
background-size: cover;
background-position: center;
filter: brightness(0.55) saturate(1.05);
z-index: 0;
will-change: transform;
transform: translate3d(0, var(--parallax-y, 0), 0);
transition: transform 0.05s linear;
}
.page-header[data-photo]::after {
content: '';
position: absolute;
inset: 0;
background:
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30'%3E%3Cpath d='M15 1L29 15L15 29L1 15Z' fill='none' stroke='rgba(210,160,80,0.13)' stroke-width='0.6'/%3E%3Cpath d='M15 8L22 15L15 22L8 15Z' fill='rgba(210,160,80,0.04)' stroke='rgba(210,160,80,0.08)' stroke-width='0.5'/%3E%3C/svg%3E") repeat,
radial-gradient(ellipse at 50% 100%, rgba(199, 147, 84, 0.22) 0%, transparent 60%),
linear-gradient(180deg, rgba(13, 8, 5, 0.25) 0%, rgba(13, 8, 5, 0.6) 100%);
z-index: 1;
}
.page-header[data-photo] > * { position: relative; z-index: 2; }
.page-header[data-photo] h1 { color: var(--sand-50); }
.page-header[data-photo] .subtitle { color: var(--sand-200); }
.page-header[data-photo] .eyebrow { color: var(--sand-200); }
/* ------- PILIERS section — zellige overlay + ornamented icons ------- */
.piliers {
position: relative;
overflow: hidden;
}
.piliers::before {
content: '';
position: absolute;
inset: 0;
background-image: var(--p-zellige-earth);
background-size: 100px 100px;
opacity: 0.55;
pointer-events: none;
animation: zellige-pan 80s linear infinite;
z-index: 0;
}
.piliers > .container { position: relative; z-index: 1; }
.pilier {
position: relative;
}
.pilier-icon {
position: relative;
z-index: 1;
background: radial-gradient(circle, var(--sand-50) 0%, rgba(253, 248, 241, 0.7) 70%, transparent 100%);
}
.pilier-icon::after {
content: '';
position: absolute;
inset: -14px;
background-image: var(--p-star-earth);
background-size: contain;
background-repeat: no-repeat;
background-position: center;
opacity: 0.55;
animation: rotate-cw 45s linear infinite;
z-index: -1;
}
.piliers .section-eyebrow {
font-size: 1.9rem;
font-family: 'Cormorant Garamond', Georgia, serif;
font-style: normal;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.2em;
margin-bottom: 0.4rem;
}
.piliers h2.section-title {
font-size: clamp(2rem, 5vw, 3rem);
font-style: italic;
margin-bottom: 2rem;
}
.piliers .section-divider {
margin: 0.5rem auto 2.5rem;
}
/* Section padding overrides */
section.prose-bg {
padding: 2.5rem 2rem;
}
section.piliers {
padding: 2rem 2rem 0.3rem;
}
/* Arabesque divider tighter inside prose section */
.prose-wide > .arabesque-divider:first-child {
margin: 0.2rem auto 0.8rem;
}
.prose-wide > .arabesque-divider:last-child {
margin: 0.5rem auto 0.2rem;
}
/* ------- CTA BAND — zellige overlay ------- */
.cta-band {
position: relative;
overflow: hidden;
}
.cta-band::before {
content: '';
position: absolute;
inset: 0;
background-image: var(--p-zellige-sand);
background-size: 80px 80px;
pointer-events: none;
animation: zellige-pan 70s linear infinite;
z-index: 0;
}
.cta-band > .container-narrow { position: relative; z-index: 1; }
.cta-band::after {
content: '';
position: absolute;
top: 50%; left: 50%;
transform: translate(-50%, -50%);
width: 360px;
height: 360px;
background-image: var(--p-star-sand);
background-size: contain;
background-repeat: no-repeat;
background-position: center;
opacity: 0.08;
animation: rotate-center-cw 120s linear infinite;
pointer-events: none;
z-index: 0;
}
/* ------- PROSE section with subtle zellige background ------- */
.prose-bg {
position: relative;
overflow: hidden;
}
.prose-bg::before {
content: '';
position: absolute;
inset: 0;
background-image: var(--p-zellige-earth);
background-size: 140px 140px;
opacity: 0.35;
pointer-events: none;
animation: zellige-pan 100s linear infinite;
z-index: 0;
}
.prose-bg > .container,
.prose-bg > .container-narrow { position: relative; z-index: 1; }
/* ------- ARABESQUE DIVIDER (replaces simple lines) ------- */
.arabesque-divider {
width: 100%;
max-width: 420px;
height: 44px;
margin: 2rem auto 3rem;
background-image: var(--p-arabesque);
background-repeat: no-repeat;
background-position: center;
background-size: contain;
opacity: 0.85;
}
.arabesque-divider.light {
background-image: var(--p-arabesque-light);
opacity: 0.95;
}
/* ------- INLINE CONTENT PHOTOS ------- */
.photo-frame {
position: relative;
overflow: hidden;
border-radius: 2px;
box-shadow: 0 12px 36px rgba(74, 46, 22, 0.28), 0 3px 8px rgba(74, 46, 22, 0.15);
margin: 3rem 0;
}
.photo-frame img {
width: 100%;
display: block;
transition: transform 1.4s cubic-bezier(.2,.7,.2,1);
}
.photo-frame:hover img { transform: scale(1.05); }
.photo-frame::after {
content: '';
position: absolute;
inset: 10px;
border: 1px solid rgba(253, 248, 241, 0.55);
pointer-events: none;
z-index: 1;
}
.photo-frame .caption {
position: absolute;
left: 0; right: 0; bottom: 0;
padding: 1.2rem 1.5rem;
background: linear-gradient(180deg, transparent 0%, rgba(13, 8, 5, 0.75) 100%);
color: var(--sand-100);
font-family: 'Cormorant Garamond', serif;
font-style: italic;
font-size: 1.15rem;
letter-spacing: 0.03em;
z-index: 2;
}
.photo-grid-2 {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1.5rem;
margin: 3rem 0;
}
.photo-grid-2 .photo-frame { margin: 0; }
/* ------- GALERIE — circles ------- */
.galerie-circles {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 3rem 3.5rem;
max-width: 1080px;
margin: 3rem auto 0;
}
.galerie-circle {
width: 195px;
height: 195px;
border-radius: 50%;
overflow: hidden;
cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='36' viewBox='0 0 36 36'%3E%3Cpath d='M18 2L21.5 14.5L34 18L21.5 21.5L18 34L14.5 21.5L2 18L14.5 14.5Z' fill='%23c79354'/%3E%3Ccircle cx='18' cy='18' r='3' fill='%23fdf8f1'/%3E%3C/svg%3E") 18 18, zoom-in;
border: 2px solid rgba(160,105,45,0.4);
box-shadow: 0 4px 24px rgba(0,0,0,0.14), 0 0 0 7px rgba(199,147,84,0.07);
transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
background: var(--earth-800);
flex-shrink: 0;
}
.galerie-circle:hover {
transform: scale(1.07);
box-shadow: 0 10px 36px rgba(0,0,0,0.28), 0 0 0 9px rgba(199,147,84,0.14);
border-color: var(--accent);
}
.galerie-circle img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform .22s ease;
display: block;
}
.galerie-circle:hover img { transform: scale(1.1); }
/* Zellige background for galerie section */
.galerie-section { position: relative; }
.galerie-section::before {
content: '';
position: absolute;
inset: 0;
background-image: var(--p-nav-zellige);
background-size: 72px 72px;
opacity: 0.13;
pointer-events: none;
animation: zellige-pan 90s linear infinite;
}
/* Lightbox */
.galerie-lightbox {
position: fixed;
inset: 0;
background: transparent;
display: flex;
align-items: center;
justify-content: center;
z-index: 9999;
opacity: 0;
visibility: hidden;
pointer-events: none;
transition: opacity .3s, visibility .3s;
cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='36' viewBox='0 0 36 36'%3E%3Cpath d='M18 2L21.5 14.5L34 18L21.5 21.5L18 34L14.5 21.5L2 18L14.5 14.5Z' fill='%23c79354'/%3E%3Ccircle cx='18' cy='18' r='3' fill='%23fdf8f1'/%3E%3C/svg%3E") 18 18, pointer;
padding: 2rem;
}
.galerie-lightbox.open {
opacity: 1;
visibility: visible;
pointer-events: auto;
}
.galerie-lightbox img {
max-width: min(90vw, 1400px);
max-height: 88vh;
object-fit: contain;
transform: scale(0.92);
transition: transform .35s cubic-bezier(.2,.7,.2,1);
pointer-events: none;
}
.galerie-lightbox.open img { transform: scale(1); }
.lightbox-arrow {
position: fixed;
top: 50%;
transform: translateY(-50%);
width: 54px;
height: 54px;
display: none;
align-items: center;
justify-content: center;
background: rgba(10,8,5,0.45);
border: 1.5px solid rgba(199,147,84,0.35);
border-radius: 50%;
color: rgba(255,255,255,0.82);
cursor: pointer;
z-index: 10001;
transition: background 0.22s, border-color 0.22s, color 0.22s, transform 0.18s;
pointer-events: auto;
-webkit-user-select: none;
user-select: none;
}
.galerie-lightbox.open .lightbox-arrow { display: flex; }
.lightbox-arrow:hover {
background: rgba(199,147,84,0.82);
border-color: rgba(199,147,84,0.9);
color: #fff;
transform: translateY(-50%) scale(1.1);
}
.lightbox-prev { left: 2.5rem; }
.lightbox-next { right: 2.5rem; }
.lightbox-rotate-hint {
display: none;
position: absolute;
bottom: 2rem;
left: 50%;
transform: translateX(-50%);
flex-direction: column;
align-items: center;
gap: 0.5rem;
color: rgba(255,255,255,0.65);
font-family: 'Inter', sans-serif;
font-size: 0.72rem;
letter-spacing: 0.12em;
text-transform: uppercase;
pointer-events: none;
animation: hint-fade 0.4s ease both;
}
.lightbox-rotate-hint.visible { display: flex; }
.lightbox-rotate-hint svg { animation: rotate-phone 1.8s ease-in-out infinite; }
@keyframes rotate-phone {
0%, 100% { transform: rotate(0deg); }
45%, 55% { transform: rotate(90deg); }
}
@keyframes hint-fade {
from { opacity: 0; transform: translateX(-50%) translateY(8px); }
to { opacity: 1; transform: translateX(-50%) translateY(0); }
}
.galerie-tile {
background: var(--earth-800);
position: relative;
isolation: isolate;
transition: box-shadow .5s, transform .5s cubic-bezier(.2,.7,.2,1);
}
.galerie-tile img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 1.4s cubic-bezier(.2,.7,.2,1), filter .5s;
z-index: 0;
filter: saturate(1.05);
}
.galerie-tile::before { z-index: 1; }
.galerie-tile span {
position: relative;
z-index: 2;
font-size: 1.25rem;
letter-spacing: 0.02em;
text-shadow: 0 1px 12px rgba(0,0,0,0.55);
transform: translateY(10px);
opacity: 0.92;
transition: transform .5s, opacity .5s;
}
.galerie-tile:hover img { transform: scale(1.08); }
.galerie-tile:hover span { transform: translateY(0); opacity: 1; }
.galerie-tile:hover { box-shadow: 0 16px 40px rgba(13, 8, 5, 0.35); }
.galerie-tile::after {
content: '';
position: absolute;
top: 12px; right: 12px;
width: 28px; height: 28px;
background-image: var(--p-star-sand);
background-size: contain;
background-repeat: no-repeat;
background-position: center;
opacity: 0;
transform: rotate(0deg);
transition: opacity .5s, transform 1.5s;
z-index: 2;
pointer-events: none;
}
.galerie-tile:hover::after { opacity: 0.7; transform: rotate(180deg); }
/* ------- ITINERARY — day ornament ------- */
.day-label::before {
content: '✦';
display: block;
font-size: 0.95rem;
color: var(--accent);
margin-bottom: 0.5rem;
opacity: 0.75;
}
.itinerary {
position: relative;
}
.itinerary::before {
content: '';
position: absolute;
top: -20px; bottom: -20px;
left: 100px;
width: 1px;
background: linear-gradient(180deg, transparent 0%, var(--line) 10%, var(--line) 90%, transparent 100%);
pointer-events: none;
}
.day {
position: relative;
}
/* ------- DECORATIVE FLOATING STARS ------- */
.deco-star {
position: absolute;
pointer-events: none;
background-image: var(--p-star-earth);
background-size: contain;
background-repeat: no-repeat;
background-position: center;
opacity: 0.18;
animation: rotate-cw 60s linear infinite, float-y 9s ease-in-out infinite;
z-index: 0;
}
.deco-star.reverse { animation: rotate-ccw 70s linear infinite, float-y 10s ease-in-out infinite; }
/* ------- SCROLL REVEAL ------- */
.reveal {
opacity: 0;
transform: translateY(36px);
transition: opacity 1s cubic-bezier(.2,.7,.2,1), transform 1s cubic-bezier(.2,.7,.2,1);
will-change: opacity, transform;
}
.reveal.visible {
opacity: 1;
transform: translateY(0);
}
@keyframes reveal-up {
from { opacity: 0; transform: translateY(36px); }
to { opacity: 1; transform: translateY(0); }
}
.programme-section .container {
animation: reveal-up 1s cubic-bezier(.2,.7,.2,1) both;
animation-delay: 0.15s;
}
/* ------- STATS BAND on home page ------- */
.stats-band {
padding: 3.2rem 1.5rem;
background: var(--sand-50, #fdf8f1);
border-top: 1px solid rgba(106,76,35,0.12);
border-bottom: 1px solid rgba(106,76,35,0.12);
}
.stats-band-inner {
max-width: 1100px;
margin: 0 auto;
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 1.5rem;
text-align: center;
}
.stats-band .stat-num,
.stats-band .stat-num-text {
font-family: 'Cinzel Decorative', serif;
font-size: 2.4rem;
color: var(--earth-800, #6a4423);
font-weight: 700;
line-height: 1;
}
.stats-band .stat-num-text { font-size: 1.6rem; letter-spacing: 0.08em; }
.stats-band .stat-label {
font-family: 'Inter', sans-serif;
font-size: 0.74rem;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--earth-700, #8a6a45);
margin-top: 0.7rem;
line-height: 1.4;
}
@media (max-width: 700px) {
.stats-band { padding: 2.2rem 1rem; }
.stats-band-inner { grid-template-columns: repeat(2, 1fr); gap: 1.8rem; }
.stats-band .stat-num,
.stats-band .stat-num-text { font-size: 2rem; }
.stats-band .stat-num-text { font-size: 1.3rem; }
.stats-band .stat-label { font-size: 0.68rem; }
}
/* ------- TARIF CARD — geometric corner ornaments ------- */
.tarif-card {
position: relative;
overflow: visible;
}
.tarif-card::before,
.tarif-card::after {
content: '';
position: absolute;
width: 80px;
height: 80px;
background-image: var(--p-star-earth);
background-size: contain;
background-repeat: no-repeat;
background-position: center;
opacity: 0.18;
pointer-events: none;
}
.tarif-card::before { top: -20px; left: -20px; clip-path: inset(20px 0 0 20px); animation: rotate-cw 50s linear infinite; }
.tarif-card::after { bottom: -20px; right: -20px; clip-path: inset(0 20px 20px 0); animation: rotate-ccw 60s linear infinite; }
/* Currency switcher placed inside the top-right corner of the tarif card. */
.tarif-card-currency {
position: absolute;
top: 0.8rem;
right: 0.8rem;
z-index: 20;
}
.tarif-card-currency .lang-switch { margin-left: 0; }
/* ---- Mobile-only tweaks ---- */
@media (max-width: 700px) {
/* Sahraoui meaning row: break onto two lines on phones, drop the em dash. */
.sahraoui-dash { display: none; }
.sahraoui-text { display: block; }
/* (1) Breathing room between the currency switcher row and the "Ancien tarif"
row on the tarif card. */
.tarif-card .tarif-old-wrap { margin-top: 2.2rem; }
/* (2) Programme: center the day badge, the small rule, the h3 title and the
paragraphs under each day. */
.programme-section .prose-text {
text-align: center;
}
.programme-section .prose-text .day-badge { text-align: center; }
.programme-section .prose-text .day-rule { margin-left: auto; margin-right: auto; }
.programme-section .prose-text h3 { text-align: center; }
.programme-section .prose-text p,
.programme-section .prose-text p.lead { text-align: center; }
/* (3) Center the "Informations pratiques" section (each card's title and
paragraph). */
.info-grid { text-align: center; }
.info-card h4 { text-align: center; }
.info-card p { text-align: left; }
}
/* Disable heavy animations for users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}
/* Mobile adjustments */
@media (max-width: 768px) {
.photo-grid-2 { grid-template-columns: 1fr; }
.hero-star { opacity: 0.28; top: 41%; }
.hero-star-2 { display: none; }
.itinerary::before { display: none; }
.arabesque-divider { max-width: 280px; height: 36px; margin: 0.4rem auto; }
.tarif-card::before,
.tarif-card::after { width: 50px; height: 50px; }
.prose-wide { padding: 0; }
.prose-split { grid-template-columns: 1fr; }
.prose-split-reverse { grid-template-columns: 1fr; }
.prose-split-reverse .prose-text { order: 1; }
.prose-split-reverse .prose-illustration { order: 2; }
.prose-split .photo-frame { margin-bottom: 1rem; }
.prose-text { order: 1; }
.prose-illustration { order: 2; margin-top: 0.1rem; height: 420px; }
.photo-prose { height: 210px; }
/* Programme: photo always before text on mobile */
.programme-section .photo-split .prose-illustration { order: 1; }
.programme-section .photo-split .prose-text { order: 2; }
.programme-section .prose-split { gap: 1.2rem; }
.programme-section .photo-prose { width: 200px; height: 200px; }
.apropos-photo-circle { width: 220px; height: 220px; }
.piliers-grid.piliers-left { grid-template-columns: 1fr; gap: 1rem; }
.piliers-left .pilier { padding: 1.8rem 1.4rem; }
.piliers-left .pilier .pilier-icon { margin: 0 auto 1rem; width: 52px; height: 52px; }
.piliers-left .pilier p { font-size: 1.1rem; }
/* Prose section: minimal left/right padding */
section.prose-bg { padding: 2.5rem 0.8rem; }
/* Piliers section: tighter padding */
section.piliers { padding: 1.5rem 1.2rem; }
/* Arabesque dividers: tight margins inside prose */
.prose-wide > .arabesque-divider:first-child { margin: 0 auto 0.4rem; }
.prose-wide > .arabesque-divider:last-child { margin: 0.3rem auto 0; }
/* Galerie circles: 2 per row on mobile */
.galerie-circles { gap: 1.5rem 1.8rem; max-width: 340px; }
.galerie-circle { width: 130px; height: 130px; }
/* Mobile lightbox is fully controlled by JS inline styles — no CSS overrides needed */
body.lightbox-open { overflow: hidden; }
/* Footer brand: prevent tagline overflow */
.footer-brand .footer-sub-tagline { font-size: 0.65rem; letter-spacing: 0.1em; }
.footer-brand .footer-sub-eyebrow { letter-spacing: 0.1em; }
}
/* Reservation booking-form section titles (merged from backend branch) */
.form-section-title {
font-family: 'Cormorant Garamond', Georgia, serif;
font-size: 1.5rem;
font-style: italic;
color: var(--night-900, #1a120a);
margin: 2.5rem 0 1.2rem;
padding-bottom: 0.5rem;
border-bottom: 1px solid var(--line, rgba(106, 76, 35, 0.15));
letter-spacing: 0.02em;
}
.form-section-title:first-of-type { margin-top: 0; }
/* ====================================================================
Merged from origin/main: .lang-switch flag widget + wizard styles
==================================================================== */
.lang-switch {
position: relative;
display: inline-block;
margin-left: 0.5rem;
}
.lang-switch .lang-current {
display: inline-flex;
align-items: center;
gap: 0.45rem;
background: transparent;
border: 1px solid rgba(106, 76, 35, 0.25);
color: var(--ink, #2a1f12);
padding: 0.35rem 0.7rem;
border-radius: 100px;
font-family: inherit;
font-size: 0.75rem;
letter-spacing: 0.1em;
cursor: pointer;
transition: all .15s;
}
.lang-switch .lang-current:hover {
background: rgba(199, 147, 84, 0.1);
border-color: var(--accent, #c79354);
}
.lang-switch .lang-flag {
display: inline-flex;
width: 22px;
height: 14px;
border-radius: 2px;
overflow: hidden;
box-shadow: 0 0 0 1px rgba(0,0,0,0.08);
}
.lang-switch .lang-flag svg { display: block; }
.lang-switch .lang-code {
font-weight: 600;
}
.lang-switch .lang-menu {
position: absolute;
top: calc(100% + 0.4rem);
right: 0;
background: var(--sand-50, #fdf8f1);
border: 1px solid var(--line, rgba(106,76,35,0.15));
border-radius: 6px;
padding: 0.3rem;
list-style: none;
min-width: 140px;
box-shadow: 0 12px 30px rgba(74, 46, 22, 0.18);
opacity: 0;
pointer-events: none;
transform: translateY(-4px);
transition: opacity .15s, transform .15s;
z-index: 200;
}
.lang-switch.open .lang-menu {
opacity: 1;
pointer-events: auto;
transform: translateY(0);
}
.lang-switch .lang-menu li { margin: 0; padding: 0; }
.lang-switch .lang-menu button {
display: flex;
align-items: center;
gap: 0.6rem;
width: 100%;
text-align: left;
background: transparent;
border: none;
padding: 0.55rem 0.7rem;
font-family: inherit;
font-size: 0.85rem;
color: var(--ink, #2a1f12);
cursor: pointer;
border-radius: 4px;
}
.lang-switch .lang-menu button:hover { background: rgba(199, 147, 84, 0.12); }
.lang-switch .lang-menu button.is-active {
background: rgba(199, 147, 84, 0.18);
color: var(--earth-700, #6b4423);
font-weight: 600;
}
/* Inside dark headers / hero: invert */
.hero .lang-switch .lang-current,
.cta-band .lang-switch .lang-current,
.nav.scrolled .lang-switch .lang-current { color: inherit; }
/* Mobile: tuck the switch in alongside the toggle */
@media (max-width: 768px) {
.lang-switch {
margin-left: 0;
margin-right: 0.4rem;
}
.lang-switch .lang-menu {
right: auto;
left: 0;
}
/* Currency switcher sits at the right edge of the tarif card — its dropdown
must open LEFTWARD on phones, otherwise it spills off the screen. */
.tarif-card-currency .lang-switch .lang-menu {
right: 0;
left: auto;
}
}
/* ---------- wizard / multi-step reservation form ---------- */
.wizard { max-width: 720px; margin: 0 auto; }
.wizard-progress {
text-align: center;
margin-bottom: 1.6rem;
}
.wizard-step-counter {
font-size: 0.75rem;
letter-spacing: 0.25em;
text-transform: uppercase;
color: var(--muted, #6b5c45);
font-weight: 500;
}
.wizard-progress-step {
display: flex;
align-items: center;
gap: 0.5rem;
padding: 0.4rem 0.6rem;
font-size: 0.78rem;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--muted, #6b5c45);
font-weight: 500;
white-space: nowrap;
}
.wizard-progress-step .dot {
width: 28px;
height: 28px;
border-radius: 50%;
border: 1px solid var(--line, rgba(106, 76, 35, 0.2));
display: inline-flex;
align-items: center;
justify-content: center;
font-family: 'Cormorant Garamond', serif;
font-size: 0.95rem;
background: transparent;
transition: all 0.2s;
}
.wizard-progress-step.active { color: var(--night-900, #1a120a); }
.wizard-progress-step.active .dot {
background: var(--earth-700, #6b4423);
color: var(--sand-50, #fdf8f1);
border-color: var(--earth-700, #6b4423);
}
.wizard-progress-step.done .dot {
background: var(--accent, #c79354);
color: var(--sand-50, #fdf8f1);
border-color: var(--accent, #c79354);
}
.wizard-progress-divider {
width: 32px;
height: 1px;
background: var(--line, rgba(106, 76, 35, 0.2));
margin: 0 0.4rem;
}
.wizard-step { display: none; }
.wizard-step.active { display: block; animation: wizard-fade 0.3s ease-out; }
@keyframes wizard-fade {
from { opacity: 0; transform: translateY(8px); }
to { opacity: 1; transform: translateY(0); }
}
.wizard-step-title {
font-family: 'Cormorant Garamond', Georgia, serif;
font-size: clamp(1.8rem, 4vw, 2.4rem);
font-weight: 500;
text-align: center;
margin-bottom: 0.4rem;
letter-spacing: 0.02em;
color: var(--night-900, #1a120a);
}
.wizard-step-subtitle {
text-align: center;
color: var(--muted, #6b5c45);
margin-bottom: 2rem;
font-style: italic;
}
.wizard-summary {
background: var(--sand-100, #f7ecd8);
border: 1px solid var(--line, rgba(106, 76, 35, 0.2));
border-radius: 6px;
padding: 1.4rem 1.6rem;
margin: 2rem 0;
}
.wizard-summary-row {
display: flex;
justify-content: space-between;
align-items: baseline;
padding: 0.5rem 0;
font-size: 0.95rem;
color: var(--ink, #2a1f12);
}
.wizard-summary-row + .wizard-summary-row {
border-top: 1px solid var(--line, rgba(106, 76, 35, 0.15));
}
.wizard-summary-row strong { font-size: 1.05rem; }
.wizard-summary-row.total { font-weight: 600; padding-top: 0.8rem; }
.wizard-summary-row.deposit strong { color: var(--accent, #c79354); }
.wizard-nav {
display: flex;
justify-content: space-between;
align-items: center;
gap: 1rem;
margin-top: 2.5rem;
flex-wrap: wrap;
}
.wizard-nav .spacer { flex: 1; }
/* Step 5 — single language-aware pay button reflecting the chosen */
/* reservation_type. Stacks the i18n label over the computed amount. */
.btn-pay {
display: inline-block;
padding: 0.95rem 2.2rem;
}
.btn-pay-label { font-size: 0.95em; }
.btn-pay-amount { font-size: 1.05em; font-weight: 700; letter-spacing: 0.02em; }
/* Pay button — identical to the hero "Réserver" gold button (gradient,
colours, shadow, hover lift). */
.btn-pay {
background: linear-gradient(135deg, #d9b985 0%, #c79354 50%, #a87a3e 100%);
border-color: #c79354;
color: var(--night-900);
box-shadow: 0 4px 14px rgba(168, 122, 62, 0.35);
}
.btn-pay:hover {
background: linear-gradient(135deg, #c79354 0%, #a87a3e 50%, #7e5a26 100%);
border-color: #a87a3e;
color: var(--sand-50);
box-shadow: 0 6px 18px rgba(168, 122, 62, 0.5);
transform: translateY(-1px);
}
@media (max-width: 640px) {
.wizard-progress-step { padding: 0.3rem 0.2rem; font-size: 0; }
.wizard-progress-step .dot { font-size: 0.9rem; }
.wizard-progress-divider { width: 14px; margin: 0 0.2rem; }
}
/* ---------- wizard placed on a .cta-band (dark) section ----------------- */
/* When the wizard sits on the dark gradient/zellige cta-band background, */
/* invert the form text colors so labels and inputs stay readable, and */
/* match the title/subtitle typography to the other pages' cta-band h2+p. */
.cta-band .wizard { color: var(--sand-100, #f7ecd8); }
.cta-band .wizard-step-title {
color: var(--sand-50, #fdf6e6);
font-family: 'Cormorant Garamond', Georgia, serif;
font-style: italic;
font-size: clamp(2rem, 5vw, 3rem);
font-weight: 500;
margin-bottom: 1.5rem;
}
.cta-band .wizard-step-subtitle {
color: var(--sand-100, #f7ecd8);
opacity: 0.85;
font-family: 'Cormorant Garamond', serif;
font-style: italic;
font-size: 1.3rem;
margin-bottom: 2.5rem;
}
/* Step 1 has only a Suivant button (no Back) — center it. */
.cta-band .wizard-step[data-step="1"] .wizard-nav { justify-content: center; }
.cta-band .wizard-step[data-step="1"] .wizard-nav .spacer { display: none; }
/* Match the dropdown choices + summary card typography to the subtitle */
/* (italic Cormorant Garamond), so the whole wizard feels consistent. */
.cta-band .form-row select,
.cta-band .form-row select option {
font-family: 'Cormorant Garamond', serif;
font-style: italic;
font-size: 1.15rem;
}
.cta-band .wizard-summary-row,
.cta-band .wizard-summary-row span,
.cta-band .wizard-summary-row strong {
font-family: 'Cormorant Garamond', serif;
font-style: italic;
}
.cta-band .wizard-summary-row { font-size: 1.15rem; }
.cta-band .wizard-summary-row strong { font-size: 1.2rem; font-weight: 600; }
.cta-band .wizard-summary-row.total strong { font-size: 1.35rem; }
.cta-band .form-row label { color: var(--sand-100, #f7ecd8); }
.cta-band .form-row input,
.cta-band .form-row textarea,
.cta-band .form-row select {
color: var(--sand-50, #fdf6e6);
background: rgba(255, 255, 255, 0.06);
border-color: rgba(251, 244, 232, 0.35);
border-bottom-color: rgba(251, 244, 232, 0.55);
}
.cta-band .form-row input:focus,
.cta-band .form-row textarea:focus,
.cta-band .form-row select:focus {
border-color: var(--sand-100, #f7ecd8);
}
/* Select options inherit the dark page background by default; restore light. */
.cta-band .form-row select option { color: var(--ink, #2a1f12); background: var(--sand-100, #f7ecd8); }
/* Summary card stays light (good contrast) but tweak surface for the dark band. */
.cta-band .wizard-summary {
background: rgba(251, 244, 232, 0.10);
border-color: rgba(251, 244, 232, 0.25);
}
.cta-band .wizard-summary-row { color: var(--sand-100, #f7ecd8); }
.cta-band .wizard-summary-row + .wizard-summary-row { border-top-color: rgba(251, 244, 232, 0.18); }
.cta-band .wizard-summary-row strong { color: var(--sand-50, #fdf6e6); }
/* Wizard nav buttons already use cta-band button overrides; nothing extra. */
/* ---------- wizard placed on a .wizard-band (light) section ------------- */
/* Same wizard, but on a clearly lighter background. Defaults (dark text on */
/* light bg) take over automatically; we only re-style what the cta-band */
/* override changed (title size/italic, summary typography, step-1 centering). */
.wizard-band {
position: relative;
overflow: hidden;
background: linear-gradient(180deg, var(--sand-50, #fdf8f1) 0%, #fffbf0 100%);
padding: 5rem 2rem;
border-top: 1px solid rgba(199, 147, 84, 0.25);
border-bottom: 1px solid rgba(199, 147, 84, 0.25);
}
.wizard-band::before {
content: '';
position: absolute;
inset: 0;
background-image: var(--p-zellige-earth);
background-size: 80px 80px;
pointer-events: none;
animation: zellige-pan 70s linear infinite;
z-index: 0;
/* Wizard surface stays mostly clean — the zellige is barely there. */
opacity: 0.18;
}
.wizard-band > .container-narrow { position: relative; z-index: 1; }
/* ---------- Square card payment block ---------------------------------- */
/* Wraps #square-card-container with a header (title + card brand logos) */
/* and a 'secure payment' footer so the area feels intentional even while */
/* Square's iframe is still loading. */
.card-pay-block { margin-top: 1.5rem; }
.card-pay-header {
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: 0.8rem;
margin-bottom: 0.7rem;
}
.card-pay-title {
font-family: 'Inter', sans-serif;
font-size: 0.78rem;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--earth-700, #6b4423);
font-weight: 500;
}
.card-pay-brands {
display: flex;
align-items: center;
gap: 0.45rem;
}
.card-pay-brands svg { display: block; }
.card-pay-secure {
margin-top: 0.8rem;
display: flex;
align-items: center;
justify-content: center;
gap: 0.45rem;
font-family: 'Cormorant Garamond', serif;
font-style: italic;
font-size: 0.95rem;
color: var(--muted, #6b5c45);
text-align: center;
}
.card-pay-secure svg { flex-shrink: 0; color: var(--accent, #c79354); }
/* ---------- Marketing block on /reservation: zellige overlay ----------- */
/* Mirrors the cta-band pattern setup but on the regular light page bg. */
.reservation-marketing {
position: relative;
overflow: hidden;
}
.reservation-marketing::before {
content: '';
position: absolute;
inset: 0;
background-image: var(--p-zellige-earth);
background-size: 80px 80px;
pointer-events: none;
animation: zellige-pan 70s linear infinite;
z-index: 0;
/* Match the wizard band — very subtle, barely-there mosaic. */
opacity: 0.18;
}
.reservation-marketing > .container-narrow { position: relative; z-index: 1; }
.wizard-band .wizard-step-title {
font-family: 'Cormorant Garamond', Georgia, serif;
font-style: italic;
font-size: clamp(2rem, 5vw, 3rem);
font-weight: 500;
margin-bottom: 1.5rem;
color: var(--night-900, #1a120a);
}
.wizard-band .wizard-step-subtitle {
font-family: 'Cormorant Garamond', serif;
font-style: italic;
font-size: 1.3rem;
color: var(--muted, #6b5c45);
margin-bottom: 2.5rem;
}
.wizard-band .wizard-step[data-step="1"] .wizard-nav { justify-content: center; }
.wizard-band .wizard-step[data-step="1"] .wizard-nav .spacer { display: none; }
.wizard-band .form-row select,
.wizard-band .form-row select option {
font-family: 'Cormorant Garamond', serif;
font-style: italic;
font-size: 1.15rem;
}
.wizard-band .wizard-summary {
background: #ffffff;
border-color: rgba(106, 76, 35, 0.18);
}
.wizard-band .wizard-summary-row,
.wizard-band .wizard-summary-row span,
.wizard-band .wizard-summary-row strong {
font-family: 'Cormorant Garamond', serif;
font-style: italic;
}
.wizard-band .wizard-summary-row { font-size: 1.15rem; }
/* Right-hand values use Inter (same as nav links), not bold and not italic, */
/* in the warm earth-700 tone so they don't read as harsh black. The Total */
/* row stays in night-900 (effectively black) so the price stands out. */
.wizard-band .wizard-summary-row strong {
font-family: 'Inter', sans-serif;
font-style: normal;
font-weight: 400;
font-size: 1rem;
color: var(--earth-700, #6b4423);
}
.wizard-band .wizard-summary-row.total strong {
font-size: 1.15rem;
color: var(--night-900, #1a120a);
}
/* ---------- Wizard mobile layout (<640px) -------------------------------- */
@media (max-width: 640px) {
/* Force Cormorant on selects + their options. iOS Safari ignores option */
/* font in the native picker, but Android Chrome honors it. */
.wizard-band .form-row select,
.wizard-band .form-row select option {
font-family: 'Cormorant Garamond', Georgia, serif !important;
font-style: italic !important;
font-size: 1.1rem !important;
}
/* Steps with both Retour + Suivant/Vérifier (steps 2 and 3 by default): */
/* keep the two buttons inline, no wrap, smaller padding/font so they fit */
/* comfortably on phone widths. */
.wizard-band .wizard-nav {
flex-wrap: nowrap;
gap: 0.6rem;
}
.wizard-band .wizard-nav .btn {
padding: 0.45rem 0.9rem;
font-size: 0.7rem;
letter-spacing: 0.08em;
}
/* Step 3 (review + pay): stack vertically with PAYER on top (centered, */
/* slightly larger as the main CTA) and a tight Retour link underneath. */
.wizard-band .wizard-step[data-step="3"] .wizard-nav {
flex-direction: column;
align-items: center;
gap: 1rem;
}
.wizard-band .wizard-step[data-step="3"] .wizard-nav .spacer { display: none; }
.wizard-band .wizard-step[data-step="3"] .wizard-nav .btn-pay {
order: 1;
padding: 0.95rem 2.8rem;
font-size: 0.95rem;
min-width: 220px;
}
.wizard-band .wizard-step[data-step="3"] .wizard-nav .btn-ghost {
order: 2;
padding: 0.3rem 0.9rem;
font-size: 0.66rem;
}
/* Only the Voyage + Email rows stack on mobile (they hold long values */
/* that overflow). Other rows (Voyageur, Téléphone, Nationalité, etc.) */
/* keep the default side-by-side layout. Stacked values right-align so */
/* the label sits on the left and the answer drops below to the right. */
.wizard-band .wizard-summary-row.stack-mobile {
flex-direction: column;
gap: 0.2rem;
}
.wizard-band .wizard-summary-row.stack-mobile span { align-self: flex-start; }
.wizard-band .wizard-summary-row.stack-mobile strong {
align-self: flex-end;
text-align: right;
word-break: break-word;
max-width: 100%;
}
/* Policy title at the end of /reservation must fit on a single line on */
/* phones — shrink it just enough to avoid wrapping. */
.wizard-band .wizard-summary-row .policy-title-text {
font-size: 0.82rem;
white-space: nowrap;
}
.wizard-band .policy-summary-text,
.wizard-band .policy-summary-text button {
font-size: 0.4rem;
line-height: 1.35;
}
/* Card payment header on mobile: keep title + brand logos on the same */
/* line (no wrap) like on desktop, and shrink everything a touch so it */
/* fits comfortably on phone widths. */
.card-pay-header { flex-wrap: nowrap; gap: 0.5rem; }
.card-pay-title { font-size: 0.62rem; letter-spacing: 0.14em; }
.card-pay-brands { gap: 0.3rem; flex-shrink: 0; }
.card-pay-brands svg { width: 30px; height: auto; }
.card-pay-brands svg:nth-child(2) { width: 26px; }
}