/* CSS Variables - Design System */ :root { /* Colors - Light Theme */ --color-primary: #1a365d; --color-primary-light: #2d4a8a; --color-secondary: #c53030; --color-accent: #d69e2e; --color-accent-dark: #b7791f;
--color-background: #ffffff;
--color-surface: #f7fafc;
--color-surface-alt: #edf2f7;

--color-text: #2d3748;
--color-text-light: #4a5568;
--color-text-lighter: #718096;

--color-border: #e2e8f0;
--color-border-light: #f1f5f9;

/* Shadows */
--shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
--shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);

/* Effects */
--blur-backdrop: blur(20px);
--border-radius-sm: 0.375rem;
--border-radius-md: 0.5rem;
--border-radius-lg: 0.75rem;
--border-radius-xl: 1rem;
--border-radius-2xl: 1.5rem;

/* Spacing */
--space-unit: 0.25rem;
--space-1: calc(1 * var(--space-unit));
--space-2: calc(2 * var(--space-unit));
--space-3: calc(3 * var(--space-unit));
--space-4: calc(4 * var(--space-unit));
--space-6: calc(6 * var(--space-unit));
--space-8: calc(8 * var(--space-unit));
--space-12: calc(12 * var(--space-unit));
--space-16: calc(16 * var(--space-unit));

/* Transitions */
--transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
--transition-normal: 300ms cubic-bezier(0.4, 0, 0.2, 1);
--transition-slow: 500ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* Dark Theme */
.theme-dark {

--color-primary: #2d3748;
--color-primary-light: #4a5568;
--color-secondary: #fc8181;
--color-accent: #d69e2e;
--color-accent-dark: #b7791f;

--color-background: #1a202c;
--color-surface: #2d3748;
--color-surface-alt: #4a5568;

--color-text: #f7fafc;
--color-text-light: #e2e8f0;
--color-text-lighter: #cbd5e0;

--color-border: #4a5568;
--color-border-light: #2d3748;







--shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.3);
--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -1px rgba(0, 0, 0, 0.2);
--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.4), 0 4px 6px -2px rgba(0, 0, 0, 0.2);
--shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.4), 0 10px 10px -5px rgba(0, 0, 0, 0.2);
}


:root{
  --color-bg-rgb: 255, 255, 255;
  --color-surface-rgb: 247, 250, 252;
  --color-accent-rgb: 214, 158, 46;
}
.theme-dark{
  --color-bg-rgb: 26, 32, 44;
  --color-surface-rgb: 45, 55, 72;
}

/* Base Styles */

*{
margin: 0;
padding: 0;
box-sizing: border-box;
}

html {
scroll-behavior: smooth;
scroll-padding-top: 5rem;
}

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

body {
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
font-size: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
line-height: 1.6;
color: var(--color-text);
background-color: var(--color-background);
overflow-x: hidden;
transition: background-color var(--transition-normal), color var(--transition-normal);
}

/* Typography */
h1, h2, h3, h4, h5, h6 {
font-family: 'Playfair Display', Georgia, serif;
font-weight: 700;
line-height: 1.2;
margin-bottom: var(--space-4);
}

h1 {
font-size: clamp(2.5rem, 2rem + 2.5vw, 4rem);
}

h2 {
font-size: clamp(2rem, 1.5rem + 2vw, 3rem);
}

h3 {
font-size: clamp(1.5rem, 1.25rem + 1vw, 2rem);
}

.section-title {
position: relative;
display: inline-block;
margin-bottom: var(--space-2);
}

.section-subtitle {
font-size: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
color: var(--color-text-light);
margin-bottom: var(--space-8);
}

.text-accent {
color: var(--color-accent);
}

/* Layout */
.container {
width: 100%;
max-width: 1280px;
margin: 0 auto;
padding: 0 var(--space-6);
}

@media (min-width: 768px) {
.container {
padding: 0 var(--space-8);
}
}

.section {
padding: var(--space-16) 0;
}

.section-header {
text-align: center;
margin-bottom: var(--space-12);
}

/* Buttons */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
padding: var(--space-3) var(--space-6);
border-radius: var(--border-radius-md);
font-weight: 500;
text-decoration: none;
cursor: pointer;
border: 2px solid transparent;
transition: all var(--transition-fast);
font-size: clamp(0.875rem, 0.85rem + 0.125vw, 1rem);
position: relative;
overflow: hidden;
background-color: transparent;
color: var(--color-text);
}

.btn:focus {
outline: 2px solid var(--color-accent);
outline-offset: 2px;
}

.btn:disabled {
opacity: 0.5;
cursor: not-allowed;
}

.btn-primary {
background-color: var(--color-accent);
color: #1a202c;
border-color: var(--color-accent);
}

.btn-primary:hover:not(:disabled) {
background-color: var(--color-accent-dark);
border-color: var(--color-accent-dark);
transform: translateY(-2px);
box-shadow: var(--shadow-lg);
}

.btn-outline {
border-color: var(--color-border);
color: var(--color-text);
}

.btn-outline:hover:not(:disabled) {
border-color: var(--color-accent);
color: var(--color-accent);
transform: translateY(-2px);
box-shadow: var(--shadow-md);
}

.btn-lg {
padding: var(--space-4) var(--space-8);
font-size: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
}

.btn-sm {
padding: var(--space-2) var(--space-4);
font-size: clamp(0.875rem, 0.85rem + 0.125vw, 0.9375rem);
}

/* Header */
.header {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 1000;
background-color: rgba(var(--color-bg-rgb), 0.9);
backdrop-filter: var(--blur-backdrop);
-webkit-backdrop-filter: var(--blur-backdrop);
border-bottom: 1px solid var(--color-border);
transition: all var(--transition-normal);
}

.header.scrolled {
padding: var(--space-2) 0;
box-shadow: var(--shadow-md);
}

.header-container {
display: flex;
align-items: center;
justify-content: space-between;
padding: var(--space-4) var(--space-6);
height: 80px;
transition: height var(--transition-normal);
}

@media (min-width: 768px) {
.header-container {
padding: var(--space-4) var(--space-8);
}
}

.header.scrolled .header-container {
height: 70px;
}

/* Logo */
.logo {
display: flex;
align-items: center;
gap: var(--space-2);
text-decoration: none;
color: var(--color-text);
font-size: clamp(1.25rem, 1.15rem + 0.5vw, 1.5rem);
font-weight: 300;
z-index: 1001;
}

.logo-icon {
font-size: 1.5em;
}

.logo strong {
font-weight: 700;
color: var(--color-accent);
}

/* Navigation */
.nav {
display: none;
}

@media (min-width: 1024px) {
.nav {
display: block;
}

.nav-list {
display: flex;
gap: var(--space-8);
list-style: none;
}

.nav-link {
text-decoration: none;
color: var(--color-text-light);
font-weight: 500;
padding: var(--space-2) var(--space-1);
position: relative;
transition: color var(--transition-fast);
}

.nav-link::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 0;
height: 2px;
background-color: var(--color-accent);
transition: width var(--transition-normal);
}

.nav-link:hover {
color: var(--color-text);
}

.nav-link:hover::after,
.nav-link.active::after {
width: 100%;
}

.nav-link.active {
color: var(--color-text);
}
}

/* Header Actions */
.header-actions {
display: flex;
align-items: center;
gap: var(--space-4);
}

.select-wrapper {
position: relative;
display: none;
}

@media (min-width: 768px) {
.select-wrapper {
display: block;
}
}

.destination-select {
appearance: none;
padding: var(--space-2) var(--space-6) var(--space-2) var(--space-3);
border: 1px solid var(--color-border);
border-radius: var(--border-radius-md);
background-color: var(--color-surface);
color: var(--color-text);
font-size: 0.875rem;
cursor: pointer;
min-width: 180px;
transition: all var(--transition-fast);
}

.destination-select:hover {
border-color: var(--color-accent);
}

.destination-select:focus {
outline: none;
border-color: var(--color-accent);
box-shadow: 0 0 0 3px rgba(214, 158, 46, 0.1);
}

.select-chevron {
position: absolute;
right: var(--space-3);
top: 50%;
transform: translateY(-50%);
pointer-events: none;
color: var(--color-text-lighter);
}

.theme-toggle {
background: none;
border: none;
padding: var(--space-2);
cursor: pointer;
color: var(--color-text);
border-radius: var(--border-radius-md);
transition: background-color var(--transition-fast);
display: flex;
align-items: center;
justify-content: center;
}

.theme-toggle:hover {
background-color: var(--color-surface);
}

.theme-toggle .moon-icon {
display: none;
}

.theme-dark .theme-toggle .sun-icon {
display: none;
}

.theme-dark .theme-toggle .moon-icon {
display: block;
}

/* Hamburger Menu */
.hamburger {
display: flex;
flex-direction: column;
justify-content: space-between;
width: 24px;
height: 18px;
background: none;
border: none;
cursor: pointer;
padding: 0;
z-index: 1001;
}

@media (min-width: 1024px) {
.hamburger {
display: none;
}
}

.hamburger-line {
width: 100%;
height: 2px;
background-color: var(--color-text);
transition: transform var(--transition-normal), opacity var(--transition-normal);
transform-origin: left center;
}

.hamburger.active .hamburger-line:nth-child(1) {
transform: rotate(45deg);
}

.hamburger.active .hamburger-line:nth-child(2) {
opacity: 0;
}

.hamburger.active .hamburger-line:nth-child(3) {
transform: rotate(-45deg);
}

/* Mobile Menu */
/* Accessibilité */
.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;
}

/* Mobile Menu (Premium Drawer) */
.mobile-overlay{
  position: fixed;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.52);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);

  /* ✅ AU-DESSUS du header (sinon rendu “moche” comme ta capture) */
  z-index: 2000;

  opacity: 0;
  visibility: hidden;
  transition: opacity var(--transition-normal), visibility var(--transition-normal);
}

.mobile-overlay.active{
  opacity: 1;
  visibility: visible;
}

.mobile-nav{
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;

  width: min(92vw, 380px);
  background-color: var(--color-background);

  border-left: 1px solid var(--color-border);
  box-shadow: -24px 0 60px rgba(0,0,0,0.22);

  transform: translateX(102%);
  transition: transform var(--transition-normal);

  display: flex;
  flex-direction: column;

  /* safe-area iOS + padding clean */
  padding: calc(var(--space-6) + env(safe-area-inset-top, 0px)) var(--space-6)
           calc(var(--space-6) + env(safe-area-inset-bottom, 0px));
  overflow-y: auto;
}

.mobile-overlay.active .mobile-nav{
  transform: translateX(0);
}

/* Header interne du drawer */
.mobile-nav-header{
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--color-background);

  display: flex;
  align-items: center;
  justify-content: space-between;

  padding-bottom: var(--space-4);
  margin-bottom: var(--space-4);
  border-bottom: 1px solid var(--color-border);
}

.mobile-brand{
  text-decoration: none;
  color: var(--color-text);
  font-size: 1.1rem;
  font-weight: 300;
}
.mobile-brand strong{
  font-weight: 800;
  color: var(--color-accent);
}

.mobile-close{
  width: 44px;
  height: 44px;
  border-radius: 999px;
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-text);
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: transform var(--transition-fast), border-color var(--transition-fast);
}
.mobile-close:hover{
  transform: scale(1.05);
  border-color: var(--color-accent);
}

/* Liste */
.mobile-nav-list{
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
}

/* Liens plus “premium” (pas des traits moches partout) */
.mobile-nav-link{
  display: flex;
  align-items: center;
  justify-content: space-between;

  padding: var(--space-4) var(--space-4);
  border-radius: var(--border-radius-lg);

  text-decoration: none;
  color: var(--color-text);
  font-size: 1.05rem;
  font-weight: 600;

  background: rgba(var(--color-surface-rgb), 0.65);
  border: 1px solid var(--color-border);

  transition: transform var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
}

.mobile-nav-link:hover{
  border-color: var(--color-accent);
  color: var(--color-accent);
  transform: translateX(2px);
}

.mobile-nav-link.active{
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px rgba(var(--color-accent-rgb), 0.14);
}

/* Bouton réserver dans le menu */
.mobile-nav-link.btn{
  margin-top: var(--space-2);
  justify-content: center;
  border: 2px solid transparent;
}

/* Select destination full width */
.mobile-destination-select{
  margin-top: var(--space-2);
}
.select-wrapper--mobile{
  width: 100%;
}
.select-wrapper--mobile .destination-select{
  width: 100%;
}

/* Footer */
.mobile-nav-footer{
  margin-top: auto;
  padding-top: var(--space-6);
  border-top: 1px solid var(--color-border);
  color: var(--color-text-light);
  font-size: 0.9rem;
}


/* Lock scroll quand menu ouvert */
body.no-scroll{ overflow: hidden; }

/* Mobile Menu (Premium Drawer) */
.mobile-overlay{
  position: fixed;
  inset: 0;
  display: grid;
  justify-content: end;

  background: rgba(0, 0, 0, 0.52);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);

  z-index: 3000;

  opacity: 0;
  visibility: hidden;
  transition: opacity var(--transition-normal), visibility var(--transition-normal);
}

.mobile-overlay.active{
  opacity: 1;
  visibility: visible;
}

.mobile-nav{
  height: 100%;
  width: min(92vw, 380px);
  background: var(--color-background);

  border-left: 1px solid var(--color-border);
  box-shadow: -24px 0 60px rgba(0,0,0,0.22);

  transform: translateX(102%);
  transition: transform var(--transition-normal);

  display: flex;
  flex-direction: column;

  padding: calc(var(--space-6) + env(safe-area-inset-top, 0px)) var(--space-6)
           calc(var(--space-6) + env(safe-area-inset-bottom, 0px));

  overflow-y: auto;
}

.mobile-overlay.active .mobile-nav{
  transform: translateX(0);
}

/* Header interne */
.mobile-nav-header{
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--color-background);

  display: flex;
  align-items: center;
  justify-content: space-between;

  padding-bottom: var(--space-4);
  margin-bottom: var(--space-4);
  border-bottom: 1px solid var(--color-border);
}

.mobile-brand{
  text-decoration: none;
  color: var(--color-text);
  font-size: 1.1rem;
  font-weight: 300;
}
.mobile-brand strong{ font-weight: 800; color: var(--color-accent); }

.mobile-close{
  width: 44px; height: 44px;
  border-radius: 999px;
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-text);
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: transform var(--transition-fast), border-color var(--transition-fast);
}
.mobile-close:hover{ transform: scale(1.05); border-color: var(--color-accent); }

/* Liste */
.mobile-nav-list{
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
}

.mobile-nav-link{
  display: flex;
  align-items: center;
  justify-content: space-between;

  padding: var(--space-4) var(--space-4);
  border-radius: var(--border-radius-lg);

  text-decoration: none;
  color: var(--color-text);
  font-size: 1.05rem;
  font-weight: 600;

  background: rgba(var(--color-surface-rgb), 0.65);
  border: 1px solid var(--color-border);

  transition: transform var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
}

.mobile-nav-link:hover{
  border-color: var(--color-accent);
  color: var(--color-accent);
  transform: translateX(2px);
}

.mobile-nav-link.active{
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px rgba(var(--color-accent-rgb), 0.14);
}

.mobile-nav-link.btn{
  margin-top: var(--space-2);
  justify-content: center;
  border: 2px solid transparent;
}

.select-wrapper--mobile,
.select-wrapper--mobile .destination-select{ width: 100%; }

.mobile-nav-footer{
  margin-top: auto;
  padding-top: var(--space-6);
  border-top: 1px solid var(--color-border);
  color: var(--color-text-light);
  font-size: 0.9rem;
}

/* Desktop: pas d’overlay */
@media (min-width: 1024px){
  .mobile-overlay{ display: none !important; }
}


/* Hero Section */
.hero {
position: relative;
height: 100vh;
min-height: 600px;
max-height: 800px;
margin-top: 80px;
overflow: hidden;
}

@media (min-width: 768px) {
.hero {
margin-top: 80px;
}
}

.hero-slider {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

.hero-slide {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
opacity: 0;
transition: opacity var(--transition-slow);
display: flex;
align-items: center;
}

.hero-slide.active {
opacity: 1;
z-index: 1;
}

.hero-content {
max-width: 800px;
color: white;
text-align: center;
margin: 0 auto;
padding: var(--space-8);
}

.hero-title {
font-size: clamp(2.5rem, 2rem + 2.5vw, 4.5rem);
margin-bottom: var(--space-4);
color: white;
}

.hero-subtitle {
font-size: clamp(1.25rem, 1.15rem + 0.5vw, 1.75rem);
margin-bottom: var(--space-6);
opacity: 0.9;
}

.hero-description {
font-size: clamp(1.5rem, 1.4rem + 0.5vw, 2rem);
margin-bottom: var(--space-8);
}

.hero-controls {
position: absolute;
top: 50%;
left: 0;
right: 0;
transform: translateY(-50%);
display: flex;
justify-content: space-between;
padding: 0 var(--space-6);
z-index: 2;
pointer-events: none;
}

.hero-control {
background: rgba(255, 255, 255, 0.1);
border: 1px solid rgba(255, 255, 255, 0.2);
color: white;
width: 48px;
height: 48px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all var(--transition-fast);
pointer-events: auto;
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
}

.hero-control:hover {
background: rgba(255, 255, 255, 0.2);
transform: scale(1.1);
}

.hero-control:focus {
outline: 2px solid white;
outline-offset: 2px;
}

.hero-dots {
position: absolute;
bottom: var(--space-8);
left: 0;
right: 0;
display: flex;
justify-content: center;
gap: var(--space-2);
z-index: 2;
}

.hero-dot {
width: 12px;
height: 12px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.3);
border: none;
cursor: pointer;
transition: all var(--transition-fast);
}

.hero-dot:hover {
background: rgba(255, 255, 255, 0.5);
transform: scale(1.2);
}

.hero-dot.active {
background: white;
transform: scale(1.2);
}

/* Typewriter Effect */
.typewriter-text {
display: inline-block;
overflow: hidden;
border-right: 2px solid var(--color-accent);
white-space: nowrap;
animation: blink-caret 0.75s step-end infinite;
}

@keyframes blink-caret {
from, to { border-color: transparent; }
50% { border-color: var(--color-accent); }
}

/* ============================
   ABOUT (Premium)
   ============================ */

.about-section{
  position: relative;
  background:
    radial-gradient(900px 260px at 50% 0%, rgba(var(--color-accent-rgb), 0.12), transparent 60%),
    linear-gradient(180deg, transparent 0%, rgba(var(--color-surface-rgb), 0.55) 28%, transparent 100%);
}

.about-header{
  max-width: 980px;
  margin-inline: auto;
}

.about-kicker{
  display: inline-flex;
  gap: .5rem;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-size: .78rem;
  color: var(--color-text-lighter);
  margin-bottom: var(--space-3);
}

.about-title{
  line-height: 1.15;
}

.about-grid{
  display: grid;
  gap: var(--space-12);
  align-items: start;
}

@media (min-width: 1024px){
  .about-grid{
    grid-template-columns: 1.12fr 0.88fr;
    gap: var(--space-16);
    align-items: center;
  }
}

.about-card{
  background: rgba(var(--color-surface-rgb), 0.75);
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius-2xl);
  box-shadow: var(--shadow-lg);
  padding: clamp(1.25rem, 1rem + 1vw, 2rem);
}

.about-prose{
  max-width: 70ch;
  margin-inline: auto;
}

.about-text{
  margin-bottom: var(--space-6);
  font-size: clamp(1rem, 0.98rem + 0.22vw, 1.125rem);
  color: var(--color-text);
  text-align: justify;
  text-justify: inter-word;
  hyphens: auto;
}

.about-lead{
  font-size: clamp(1.05rem, 1rem + 0.35vw, 1.22rem);
  color: var(--color-text);
}

.about-text strong{
  color: var(--color-accent);
}

.about-bullets{
  display: grid;
  gap: var(--space-3);
  margin: var(--space-6) 0 var(--space-8);
  padding-top: var(--space-6);
  border-top: 1px dashed var(--color-border);
}

.about-bullet{
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  color: var(--color-text-light);
}

.bullet-dot{
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: var(--color-accent);
  margin-top: 7px;
  flex: 0 0 auto;
  box-shadow: 0 0 0 6px rgba(var(--color-accent-rgb), 0.12);
}

/* ticker plus clean + fondu sur les bords */
.highlight-ticker{
  overflow: hidden;
  position: relative;
  background: var(--color-surface);
  border-radius: var(--border-radius-xl);
  padding: var(--space-4);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-sm);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

.highlight-track{
  display: flex;
  gap: var(--space-6);
  width: max-content;
  animation: ticker 22s linear infinite;
}

@keyframes ticker{
  0%{ transform: translateX(0); }
  100%{ transform: translateX(-50%); }
}

.highlight-item{
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  background: var(--color-surface-alt);
  border-radius: 999px;
  font-weight: 600;
  color: var(--color-accent);
  white-space: nowrap;
  border: 1px solid var(--color-border);
}

.about-media{
  width: 100%;
}

.about-frame{
  border-radius: var(--border-radius-2xl);
  overflow: hidden;
  box-shadow: var(--shadow-xl);
  border: 1px solid var(--color-border);
  background: rgba(var(--color-surface-rgb), 0.6);
}

.about-placeholder{
  height: clamp(240px, 30vw, 360px);
}

.about-caption{
  padding: var(--space-5) var(--space-6);
  background: linear-gradient(180deg, transparent, rgba(0,0,0,0.06));
  color: var(--color-text-light);
  font-size: .95rem;
}

/* Placeholder image + overlay */
.about-placeholder{
  height: clamp(240px, 30vw, 360px);
  position: relative;
  margin: 0;
}

.about-placeholder img{
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  border-radius: inherit;
}

/* Overlay texte "L’aventure vous attend" */
.about-overlay{
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: var(--space-6);
  pointer-events: none;
}

/* léger voile pour lisibilité du texte */
.about-overlay::before{
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(70% 60% at 50% 65%,
    rgba(0,0,0,0.45),
    rgba(0,0,0,0.05) 55%,
    rgba(0,0,0,0.0) 100%);
}

.about-overlay-title{
  position: relative;
  z-index: 1;
  font-family: "Playfair Display", serif;
  font-weight: 800;
  letter-spacing: .02em;
  text-align: center;
  font-size: clamp(1.05rem, 0.9rem + 0.8vw, 1.5rem);
  color: var(--color-text-light);
  text-shadow: 0 10px 28px rgba(0,0,0,0.55);
  padding: .6rem 1rem;
  border-radius: 999px;
  background: rgba(0,0,0,0.22);
  border: 1px solid rgba(255,255,255,0.12);
  backdrop-filter: blur(6px);
}


/* FIX About: enlever le grand vide + éviter tout débordement */
.about-card { min-width: 0; }

.about-prose{
  max-width: 70ch;
  margin-inline: auto;
}

/* Sur desktop, le texte doit remplir la carte */
@media (min-width: 1024px){
  .about-prose{
    max-width: none;
    margin-inline: 0;
  }
}

/* Sécurité anti-débordement (mots trop longs, etc.) */
.about-text,
.about-bullet{
  overflow-wrap: anywhere;
}


/* Destinations Section */
.destinations-filters {
display: flex;
flex-wrap: wrap;
gap: var(--space-2);
justify-content: center;
margin-bottom: var(--space-12);
}

.filter-btn {
padding: var(--space-2) var(--space-4);
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--border-radius-md);
color: var(--color-text-light);
font-size: 0.875rem;
font-weight: 500;
cursor: pointer;
transition: all var(--transition-fast);
}

.filter-btn:hover {
border-color: var(--color-accent);
color: var(--color-accent);
}

.filter-btn.active {
background: var(--color-accent);
border-color: var(--color-accent);
color: #1a202c;
}

.destinations-grid {
display: grid;
gap: var(--space-8);
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}

.destination-card {
background: var(--color-surface);
border-radius: var(--border-radius-xl);
overflow: hidden;
box-shadow: var(--shadow-md);
transition: all var(--transition-normal);
opacity: 0;
transform: translateY(20px);
}

.destination-card.revealed {
opacity: 1;
transform: translateY(0);
}

.destination-card:hover {
transform: translateY(-8px);
box-shadow: var(--shadow-xl);
}

.destination-card.hidden {
display: none;
}

.card-badge {
position: absolute;
top: var(--space-4);
right: var(--space-4);
background: var(--color-accent);
color: #1a202c;
padding: var(--space-1) var(--space-3);
border-radius: var(--border-radius-md);
font-weight: 600;
font-size: 0.875rem;
z-index: 1;
}

.card-image {
height: 200px;
overflow: hidden;
}

.card-image{
  height: 200px;
  overflow: hidden;
  position: relative;
}

.card-image img{
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  transform: scale(1.001);
  transition: transform var(--transition-normal), filter var(--transition-normal);
}

/* overlay léger pour rendre le texte/badge toujours lisible */
.card-image-overlay{
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(0,0,0,0.12) 0%,
    rgba(0,0,0,0.02) 40%,
    rgba(0,0,0,0.18) 100%
  );
  pointer-events: none;
}

.destination-card:hover .card-image img{
  transform: scale(1.06);
  filter: saturate(1.05);
}


.card-content {
padding: var(--space-6);
}

.card-title {
font-size: clamp(1.25rem, 1.15rem + 0.5vw, 1.5rem);
margin-bottom: var(--space-2);
}

.card-subtitle {
color: var(--color-accent);
font-weight: 500;
margin-bottom: var(--space-4);
font-size: 0.875rem;
}

.card-description {
color: var(--color-text-light);
margin-bottom: var(--space-6);
font-size: 0.9375rem;
line-height: 1.6;
}

.card-footer {
display: flex;
justify-content: flex-end;
}

/* Map Section */
.map-container {
position: relative;
background: var(--color-surface);
border-radius: var(--border-radius-xl);
padding: var(--space-8);
box-shadow: var(--shadow-lg);
overflow: hidden;
}

.map-container{
  background: linear-gradient(180deg,
    rgba(var(--color-surface-rgb), .92),
    rgba(var(--color-surface-rgb), .70)
  );
}

.world-map {
width: 100%;
height: auto;
display: block;
}

.map-marker {
cursor: pointer;
transition: transform var(--transition-fast);
}

.map-marker:hover {
transform: scale(1.2);
}

.map-marker:focus {
outline: 2px solid var(--color-accent);
outline-offset: 2px;
border-radius: 50%;
}

/* === FIX PALPITATION SVG === */
.map-marker{
  cursor: pointer;
  transition: transform var(--transition-fast);

  /* ✅ indispensable sur SVG pour éviter le "va-et-vient" */
  transform-box: fill-box;
  transform-origin: center;
}

/* hover plus stable */
.map-marker:hover{
  transform: scale(1.12);
}


.map-tooltip {
position: absolute;
background: var(--color-background);
border: 1px solid var(--color-border);
border-radius: var(--border-radius-md);
padding: var(--space-3) var(--space-4);
box-shadow: var(--shadow-lg);
font-size: 0.875rem;
pointer-events: none;
opacity: 0;
transform: translateY(10px);
transition: opacity var(--transition-fast), transform var(--transition-fast);
z-index: 10;
}

.map-tooltip.visible {
opacity: 1;
transform: translateY(0);
}


/* Badge correctement positionné */
.destination-card{ position: relative; }

/* Carte visible (fond + continents contrastés) */
.map-container{ background: var(--color-surface-alt); }
.world-map .land{
  fill: var(--color-surface);
  stroke: var(--color-border);
  stroke-width: 1;
  opacity: 0.95;
}

/* Typewriter: caret seulement pendant la frappe */
.typewriter-text{
  border-right: none;
  animation: none;
}
.typewriter-text.is-typing{
  border-right: 2px solid var(--color-accent);
  animation: blink-caret 0.75s step-end infinite;
}


.world-map { width: 100%; height: auto; display: block; }

/* Pays + frontières */
.countries path{
  fill: rgba(255,255,255,.06);
  stroke: rgba(255,255,255,.18);
  stroke-width: .6;
  vector-effect: non-scaling-stroke;
}

/* Markers : clic stable */
.map-marker { cursor: pointer; }
.map-marker .hit { pointer-events: all; }
.map-marker .dot, .map-marker .ring, .map-marker text { pointer-events: none; }

.map-marker .ring{
  transform-box: fill-box;
  transform-origin: center;
  transition: transform .2s ease, opacity .2s ease;
}
.map-marker:hover .ring{ transform: scale(1.25); opacity: .75; }



/* CTA Section */
.cta-section {
background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-light) 100%);
color: white;
position: relative;
overflow: hidden;
}

.cta-card {
background: var(--color-background);
border-radius: var(--border-radius-2xl);
padding: var(--space-12) var(--space-8);
display: grid;
gap: var(--space-12);
box-shadow: var(--shadow-xl);
transform: translateY(20px);
opacity: 0;
}

@media (min-width: 768px) {
.cta-card {
grid-template-columns: 2fr 1fr;
align-items: center;
padding: var(--space-16);
}
}

.cta-card.revealed {
transform: translateY(0);
opacity: 1;
}

.cta-title {
color: var(--color-text);
margin-bottom: var(--space-4);
}

.cta-description {
color: var(--color-text-light);
margin-bottom: var(--space-8);
font-size: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
}

.cta-features {
display: grid;
gap: var(--space-4);
}

.feature {
display: flex;
align-items: center;
gap: var(--space-3);
color: var(--color-text);
font-weight: 500;
}

.cta-action {
text-align: center;
}

.cta-note {
margin-top: var(--space-4);
font-size: 0.875rem;
color: var(--color-text-light);
}

/* Testimonials */
.testimonials-slider {
position: relative;
overflow: hidden;
}

.testimonials-track {
display: flex;
gap: var(--space-8);
transition: transform var(--transition-normal);
}

.testimonial-card {
min-width: 100%;
background: var(--color-surface);
border-radius: var(--border-radius-xl);
padding: var(--space-8);
box-shadow: var(--shadow-md);
}

@media (min-width: 768px) {
.testimonial-card {
min-width: calc(50% - var(--space-4));
}
}

@media (min-width: 1024px) {
.testimonial-card {
min-width: calc(33.333% - var(--space-6));
}
}

.testimonial-rating {
color: var(--color-accent);
font-size: 1.25rem;
margin-bottom: var(--space-4);
}

.testimonial-text {
font-style: italic;
color: var(--color-text);
margin-bottom: var(--space-6);
line-height: 1.7;
}

.testimonial-author strong {
display: block;
color: var(--color-text);
margin-bottom: var(--space-1);
}

.testimonial-author span {
font-size: 0.875rem;
color: var(--color-text-light);
}

.testimonials-controls {
display: flex;
justify-content: center;
gap: var(--space-4);
margin-top: var(--space-8);
}

.testimonial-prev,
.testimonial-next {
background: var(--color-surface);
border: 1px solid var(--color-border);
width: 48px;
height: 48px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
color: var(--color-text);
transition: all var(--transition-fast);
}

.testimonial-prev:hover,
.testimonial-next:hover {
border-color: var(--color-accent);
color: var(--color-accent);
transform: scale(1.1);
}

/* FAQ */
.faq-list {
max-width: 800px;
margin: 0 auto;
}

.faq-item {
border-bottom: 1px solid var(--color-border);
}

.faq-question {
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
padding: var(--space-6) 0;
background: none;
border: none;
text-align: left;
color: var(--color-text);
font-size: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
font-weight: 600;
cursor: pointer;
transition: color var(--transition-fast);
}

.faq-question:hover {
color: var(--color-accent);
}

.faq-question[aria-expanded="true"] .faq-icon {
transform: rotate(180deg);
}

.faq-icon {
transition: transform var(--transition-fast);
flex-shrink: 0;
margin-left: var(--space-4);
}

.faq-answer {
padding-bottom: var(--space-6);
color: var(--color-text-light);
line-height: 1.7;
display: none;
}

.faq-answer[aria-hidden="false"] {
display: block;
}

/* Contact Section */
.contact-grid {
display: grid;
gap: var(--space-12);
}

@media (min-width: 1024px) {
.contact-grid {
grid-template-columns: 1fr 1fr;
gap: var(--space-16);
}
}

.contact-description {
color: var(--color-text-light);
margin-bottom: var(--space-8);
font-size: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
}

.contact-details {
display: grid;
gap: var(--space-6);
margin-bottom: var(--space-8);
}

.contact-item {
display: flex;
align-items: flex-start;
gap: var(--space-4);
}

.contact-item h3 {
font-size: 1.125rem;
margin-bottom: var(--space-1);
}

.contact-item p {
color: var(--color-text-light);
font-size: 0.875rem;
}

.contact-social p {
margin-bottom: var(--space-4);
font-weight: 500;
}

.social-links {
display: flex;
gap: var(--space-4);
}

.social-links a {
display: flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
border-radius: 50%;
background: var(--color-surface);
color: var(--color-text);
transition: all var(--transition-fast);
}

.social-links a:hover {
background: var(--color-accent);
color: #1a202c;
transform: translateY(-2px);
}

.contact-form {
background: var(--color-surface);
border-radius: var(--border-radius-xl);
padding: var(--space-8);
box-shadow: var(--shadow-lg);
}

.form-group {
margin-bottom: var(--space-6);
}

.form-group label {
display: block;
margin-bottom: var(--space-2);
font-weight: 500;
color: var(--color-text);
}

.form-group input,
.form-group select,
.form-group textarea {
width: 100%;
padding: var(--space-3) var(--space-4);
border: 1px solid var(--color-border);
border-radius: var(--border-radius-md);
background: var(--color-background);
color: var(--color-text);
font-family: inherit;
font-size: inherit;
transition: all var(--transition-fast);
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
outline: none;
border-color: var(--color-accent);
box-shadow: 0 0 0 3px rgba(214, 158, 46, 0.1);
}

.form-group textarea {
resize: vertical;
min-height: 120px;
}

/* Footer */
.footer {
background: var(--color-primary);
color: white;
padding: var(--space-16) 0 var(--space-8);
}

.footer-content {
display: grid;
gap: var(--space-12);
margin-bottom: var(--space-12);
}

@media (min-width: 768px) {
.footer-content {
grid-template-columns: 2fr 3fr;
}
}

.footer-brand .logo {
color: white;
margin-bottom: var(--space-4);
}

.footer-tagline {
font-size: 1.125rem;
margin-bottom: var(--space-2);
opacity: 0.9;
}

.footer-info {
font-size: 0.875rem;
opacity: 0.7;
}

.footer-links {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
gap: var(--space-8);
}

.footer-column h3 {
font-size: 1.125rem;
color: var(--color-accent);
margin-bottom: var(--space-4);
}

.footer-column ul {
list-style: none;
}

.footer-column li {
margin-bottom: var(--space-2);
}

.footer-column a {
color: rgba(255, 255, 255, 0.8);
text-decoration: none;
font-size: 0.875rem;
transition: color var(--transition-fast);
}

.footer-column a:hover {
color: white;
}

.footer-bottom {
border-top: 1px solid rgba(255, 255, 255, 0.1);
padding-top: var(--space-8);
text-align: center;
}

.copyright {
font-size: 0.875rem;
opacity: 0.7;
margin-bottom: var(--space-2);
}

.footer-credits {
font-size: 0.75rem;
opacity: 0.5;
}

/* Floating Buttons */
.whatsapp-float,
.back-to-top {
position: fixed;
bottom: var(--space-8);
z-index: 999;
width: 56px;
height: 56px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
box-shadow: var(--shadow-lg);
transition: all var(--transition-normal);
}

.whatsapp-float {
right: var(--space-8);
background: #25D366;
color: white;
text-decoration: none;
}

.whatsapp-float:hover {
transform: scale(1.1) rotate(5deg);
box-shadow: var(--shadow-xl);
}

.back-to-top {
left: var(--space-8);
background: var(--color-surface);
color: var(--color-text);
border: 1px solid var(--color-border);
opacity: 0;
visibility: hidden;
transform: translateY(10px);
cursor: pointer;
}

.back-to-top.visible {
opacity: 1;
visibility: visible;
transform: translateY(0);
}

.back-to-top:hover {
background: var(--color-accent);
color: #1a202c;
border-color: var(--color-accent);
transform: translateY(-4px);
}

/* Scroll Reveal Animation */
[data-scroll-reveal] {
opacity: 0;
transform: translateY(20px);
transition: opacity var(--transition-slow), transform var(--transition-slow);
}

[data-scroll-reveal].revealed {
opacity: 1;
transform: translateY(0);
}

/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}

.typewriter-text {
border-right: none;
animation: none;
}

.highlight-track {
animation: none;
}

.image-frame,
.destination-card,
.cta-card {
transition: none;
opacity: 1;
transform: none;
}
}

@media (max-width: 420px){
  .header-actions{ gap: var(--space-2); }
  .theme-toggle{ padding: var(--space-1); }
  /* Le bouton Réserver reste dispo dans le menu mobile */
  .header-actions > .btn.btn-primary.btn-sm{ display: none; }
}

/* ============================
   RESERVATION PAGE
   ============================ */

/* hero reservation (sinon texte blanc sur fond blanc = invisible) */
.reservation-hero{
  height: auto;
  min-height: 46vh;
  max-height: none;
  margin-top: 80px; /* aligne avec le header fixed */
  display: flex;
  align-items: center;
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-light) 100%);
}
.reservation-hero .hero-content{
  padding: var(--space-12) var(--space-6);
}
.reservation-hero .hero-title,
.reservation-hero .hero-subtitle{
  color: #fff;
}

/* Steps */
.steps{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap: var(--space-4);
}
.step{
  display:flex;
  align-items:center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  border-radius: var(--border-radius-xl);
  box-shadow: var(--shadow-sm);
  color: var(--color-text-light);
}
.step-number{
  width: 34px;
  height: 34px;
  border-radius: 999px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight: 700;
  background: var(--color-surface-alt);
  border: 1px solid var(--color-border);
  color: var(--color-text);
}
.step.active{
  border-color: var(--color-accent);
  box-shadow: var(--shadow-md);
  color: var(--color-text);
}
.step.active .step-number{
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: #1a202c;
}

/* Form wizard */
.reservation-form{
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius-2xl);
  padding: var(--space-8);
  box-shadow: var(--shadow-lg);
}
.form-step{ display:none; }
.form-step.active{ display:block; }

.step-title{
  margin-bottom: var(--space-2);
}
.step-description{
  color: var(--color-text-light);
  margin-bottom: var(--space-8);
}

/* Destination cards radio */
.destination-options{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--space-6);
  margin-bottom: var(--space-8);
}
.destination-option{ position: relative; }
.destination-radio{
  position:absolute;
  opacity:0;
  pointer-events:none;
}
.destination-card-option{
  display:block;
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius-xl);
  overflow:hidden;
  background: var(--color-background);
  box-shadow: var(--shadow-sm);
  cursor:pointer;
  transition: all var(--transition-normal);
}
.destination-card-option:hover{
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
  border-color: var(--color-accent);
}
.destination-radio:checked + .destination-card-option{
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px rgba(var(--color-accent-rgb), 0.18), var(--shadow-lg);
}
.option-image{
  height: 140px;
  background-size: cover;
  background-position:center;
}
.option-content{
  padding: var(--space-6);
}
.option-content h3{ margin-bottom: var(--space-2); }
.option-content p{
  color: var(--color-text-light);
  margin-bottom: var(--space-4);
  font-size: 0.95rem;
}
.option-price{
  display:inline-flex;
  padding: var(--space-1) var(--space-3);
  border-radius: 999px;
  background: var(--color-surface-alt);
  border: 1px solid var(--color-border);
  font-weight: 600;
  color: var(--color-accent);
}

/* Form layout */
.form-grid{
  display:grid;
  gap: var(--space-6);
}
@media (min-width: 768px){
  .form-grid{ grid-template-columns: 1fr 1fr; }
}
.checkbox-label{
  display:flex;
  align-items:flex-start;
  gap: var(--space-3);
  color: var(--color-text-light);
}
.checkbox-label input{ margin-top: 4px; }

.step-actions{
  margin-top: var(--space-8);
  display:flex;
  gap: var(--space-4);
  justify-content:flex-end;
}

/* Summary */
.reservation-summary{
  display:grid;
  gap: var(--space-6);
  margin-top: var(--space-6);
}
.summary-section{
  background: var(--color-background);
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius-xl);
  padding: var(--space-6);
}
.summary-section h3{
  font-family: 'Inter', sans-serif;
  font-size: 1rem;
  margin-bottom: var(--space-3);
  color: var(--color-text);
}
.summary-content{
  color: var(--color-text-light);
  line-height: 1.7;
}
.summary-actions{
  margin-top: var(--space-8);
  display:grid;
  gap: var(--space-4);
}
.action-buttons{
  display:flex;
  flex-wrap:wrap;
  gap: var(--space-3);
}

/* Benefits */
.benefits-grid{
  display:grid;
  gap: var(--space-8);
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
.benefit-card{
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius-2xl);
  padding: var(--space-8);
  box-shadow: var(--shadow-md);
}
.benefit-card h3{
  font-family: 'Playfair Display', Georgia, serif;
  margin-top: var(--space-4);
}
.benefit-card p{
  color: var(--color-text-light);
  margin-top: var(--space-2);
}

/* ============================
   Destination Page — Senegal
   ============================ */

#details, #reservation { scroll-margin-top: var(--header-height, 90px); }

.destination-hero{
  height: 70vh;
  min-height: 520px;
  margin-top: var(--header-height, 80px);
  display:flex;
  align-items:center;
  position:relative;
  background:
    linear-gradient(rgba(0,0,0,0.52), rgba(0,0,0,0.52)),
    url("https://images.unsplash.com/photo-1599933404334-94c8a442a4d5?auto=format&fit=crop&w=1920&q=80");
  background-size: cover;
  background-position: center;
}

.destination-badge{
  display:inline-block;
  background: var(--color-accent);
  color:#1a202c;
  padding: var(--space-2) var(--space-4);
  border-radius: var(--border-radius-md);
  font-weight:700;
  margin-bottom: var(--space-4);
}

.hero-actions{
  display:flex;
  gap: var(--space-4);
  margin-top: var(--space-8);
  flex-wrap: wrap;
}

/* Quick facts */
.quick-facts{
  background: var(--color-surface);
  padding: var(--space-8) 0;
  border-bottom: 1px solid var(--color-border);
}

.facts-grid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--space-6);
}

.fact{ display:flex; align-items:center; gap: var(--space-4); }
.fact-icon{ font-size: 2rem; }
.fact-content h3{
  font-size: .875rem;
  color: var(--color-text-light);
  margin-bottom: var(--space-1);
}
.fact-content p{ font-weight:600; }

/* Overview */
.overview-content{ display:grid; gap: var(--space-12); }
@media (min-width: 1024px){
  .overview-content{ grid-template-columns: 1fr 1fr; align-items:center; }
}
.overview-text p{
  margin-bottom: var(--space-6);
  font-size: clamp(1rem, .95rem + .25vw, 1.125rem);
}

/* Highlights */
.highlights-grid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--space-8);
}

.highlight-card{
  background: var(--color-surface);
  border-radius: var(--border-radius-lg);
  padding: var(--space-6);
  text-align:center;
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}
.highlight-card:hover{
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
}
.highlight-icon{ font-size: 2.5rem; margin-bottom: var(--space-4); }
.highlight-card h3{ margin-bottom: var(--space-3); font-size: 1.25rem; }

/* Program */
.program-timeline{ max-width: 860px; margin: 0 auto; }
.program-day{
  position: relative;
  padding-left: 64px;
  margin-bottom: var(--space-8);
}
.program-day:not(:last-child)::before{
  content:"";
  position:absolute;
  left: 30px;
  top: 64px;
  bottom: -40px;
  width: 2px;
  background: var(--color-border);
}
.day-header{ display:flex; align-items:center; margin-bottom: var(--space-4); }
.day-number{
  position:absolute;
  left: 0;
  width: 60px;
  height: 60px;
  border-radius: 999px;
  background: var(--color-accent);
  color:#1a202c;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size: 1.5rem;
  font-weight: 800;
  z-index: 1;
}
.day-title{ margin-left: var(--space-6); font-size: 1.5rem; }
.day-content{
  background: var(--color-surface);
  border-radius: var(--border-radius-lg);
  padding: var(--space-6);
  margin-left: var(--space-6);
}

/* Included */
.included-grid{ display:grid; gap: var(--space-8); }
@media (min-width: 768px){
  .included-grid{ grid-template-columns: 1fr 1fr; }
}
.included-card{
  background: var(--color-surface);
  border-radius: var(--border-radius-xl);
  padding: var(--space-8);
  box-shadow: var(--shadow-md);
}
.included-title{
  color: var(--color-accent);
  margin-bottom: var(--space-6);
  font-size: 1.5rem;
}
.included-list{ list-style:none; }
.included-list li{
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--color-border-light);
  display:flex;
  align-items:center;
  gap: var(--space-3);
}
.included-list li:last-child{ border-bottom:none; }

/* Practical */
.practical-grid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--space-8);
}
.practical-card{
  background: var(--color-surface);
  border-radius: var(--border-radius-lg);
  padding: var(--space-6);
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}
.practical-card:hover{ transform: translateY(-2px); box-shadow: var(--shadow-md); }
.practical-card h3{
  color: var(--color-accent);
  margin-bottom: var(--space-3);
  font-size: 1.125rem;
  display:flex;
  align-items:center;
  gap: var(--space-2);
}

/* Price block (CTA) */
.price{ text-align:center; margin-bottom: var(--space-6); }
.price-from{ display:block; font-size:.875rem; color: var(--color-text-light); margin-bottom: var(--space-1); }
.price-amount{ font-size: 3rem; font-weight: 800; color: var(--color-accent); line-height: 1; }
.price-per{ display:block; font-size:.875rem; color: var(--color-text-light); margin-top: var(--space-1); }

/* Mobile */
@media (max-width: 768px){
  .destination-hero{ min-height: 460px; }
  .hero-actions{ flex-direction: column; }
  .hero-actions .btn{ width: 100%; text-align:center; }

  .program-day{ padding-left: 54px; }
  .day-number{ width: 50px; height: 50px; font-size: 1.25rem; }
  .program-day:not(:last-child)::before{ left: 25px; top: 56px; }
}

/* ==========================
   NAV: Destination select dans "Destinations"
   ========================== */
.nav-item--destinations {
  position: relative;
}

.nav-select-popover {
  position: absolute;
  top: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%) translateY(-6px);
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease, transform .2s ease;
  z-index: 50;
}

.nav-item--destinations:hover .nav-select-popover,
.nav-item--destinations:focus-within .nav-select-popover {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}

.select-wrapper--nav {
  min-width: 240px;
}

/* un petit fond (si tu as déjà un style de select-wrapper, ça s’aligne tout seul) */
.nav-select-popover .select-wrapper {
  border-radius: 14px;
}

/* ==========================
   MOBILE OVERLAY: select full width
   ========================== */
.mobile-destination-select {
  padding-top: 6px;
}

.select-wrapper--mobile {
  width: 100%;
}

.select-wrapper--mobile .destination-select {
  width: 100%;
}

/* ✅ IMPORTANT : le popover ne doit JAMAIS prendre de place dans le menu */
.nav-item--destinations {
  position: relative;
}

/* caché par défaut */
.nav-select-popover {
  display: none;
  position: absolute;
  top: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 1000;
}

/* visible uniquement au hover/focus */
.nav-item--destinations:hover .nav-select-popover,
.nav-item--destinations:focus-within .nav-select-popover {
  display: block;
}

/* petite carte propre */
.nav-select-popover .select-wrapper {
  min-width: 240px;
  padding: 8px;
  border-radius: 14px;
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(0,0,0,.08);
  box-shadow: 0 18px 50px rgba(0,0,0,.18);
  backdrop-filter: blur(10px);
}

/* si tu as un mode sombre */
body.theme-dark .nav-select-popover .select-wrapper {
  background: rgba(20,20,20,.85);
  border: 1px solid rgba(255,255,255,.10);
}

/* ✅ évite que le header coupe le dropdown */
.header,
.header .header-container,
.nav,
.nav-list {
  overflow: visible;
}

/* ✅ sur mobile, on n'affiche jamais ce popover (tu as déjà le select dans l’overlay) */
@media (max-width: 900px) {
  .nav-select-popover { display: none !important; }
}

.nav-item--destinations { position: relative; }

/* dropdown caché par défaut */
.nav-dropdown{
  position:absolute;
  top: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%) translateY(6px);
  min-width: 260px;
  padding: 10px;
  border-radius: 14px;
  background: rgba(255,255,255,.94);
  border: 1px solid rgba(0,0,0,.08);
  box-shadow: 0 18px 50px rgba(0,0,0,.18);
  backdrop-filter: blur(10px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  z-index: 1200;
}

/* ✅ pont invisible : évite que ça se ferme quand tu passes la souris du lien vers le menu */
.nav-dropdown::before{
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:-12px;     /* couvre le gap */
  height:12px;
}

/* ouverture au hover + focus clavier */
.nav-item--destinations:hover .nav-dropdown,
.nav-item--destinations:focus-within .nav-dropdown{
  opacity:1;
  visibility:visible;
  transform: translateX(-50%) translateY(0);
  pointer-events:auto;
}

/* style items */
.nav-dd-item{
  display:flex;
  align-items:center;
  gap:10px;
  padding: 10px 12px;
  border-radius: 12px;
  color: inherit;
  text-decoration: none;
  white-space: nowrap;
}

.nav-dd-item:hover,
.nav-dd-item:focus-visible{
  background: rgba(0,0,0,.06);
  outline: none;
}

/* dark */
body.theme-dark .nav-dropdown{
  background: rgba(18,18,18,.86);
  border: 1px solid rgba(255,255,255,.10);
}
body.theme-dark .nav-dd-item:hover,
body.theme-dark .nav-dd-item:focus-visible{
  background: rgba(255,255,255,.08);
}

/* ne jamais afficher ce dropdown sur mobile */
@media (max-width: 900px){
  .nav-dropdown{ display:none !important; }
}

/* === MAP: continents toujours visibles (clair + dark) === */
:root{
  --map-fill: rgba(20, 28, 38, .10);
  --map-stroke: rgba(20, 28, 38, .28);
}

body.theme-dark{
  --map-fill: rgba(255,255,255,.08);
  --map-stroke: rgba(255,255,255,.22);
}

.countries path{
  fill: var(--map-fill);
  stroke: var(--map-stroke);
  stroke-width: .8;
  vector-effect: non-scaling-stroke;
}

/* ============================
   SAFETY TOKENS (si manquants)
   ============================ */
:root{
  --border-radius-md: 14px;
  --border-radius-xl: 22px;

  --shadow-md: 0 10px 25px rgba(0,0,0,.18);
  --shadow-lg: 0 14px 40px rgba(0,0,0,.22);
  --shadow-xl: 0 18px 55px rgba(0,0,0,.28);

  /* fallback si absent */
  --color-accent-rgb: 243, 156, 18;
}

/* Thème (si tu as déjà ces valeurs, garde les tiennes) */
body.theme-light{
  --color-surface: #ffffff;
  --color-text: #0b1220;
  --color-border: rgba(15, 23, 42, 0.14);

  --footer-bg-start: #0f172a;
  --footer-bg-end: #070b14;
}
body.theme-dark{
  --color-surface: rgba(255,255,255,0.06);
  --color-text: rgba(255,255,255,0.92);
  --color-border: rgba(255,255,255,0.12);

  --footer-bg-start: #0b1020;
  --footer-bg-end: #050812;
}

/* ============================
   FOOTER REDESIGN - CSS
   ============================ */
.footer{
  background: linear-gradient(180deg, var(--footer-bg-start), var(--footer-bg-end));
  color: rgba(255,255,255,.86);
  padding: clamp(3rem, 8vw, 5rem) 0 1.5rem;
  position: relative;
  overflow: hidden;
}

.footer::before{
  content:'';
  position:absolute;
  top:0; left:0; right:0;
  height:1px;
  background: linear-gradient(90deg, transparent, var(--color-accent), transparent);
}

.footer .footer-top{
  display:grid;
  grid-template-columns: 1fr;
  gap: clamp(2rem, 5vw, 3.5rem);
  margin-bottom: clamp(2.5rem, 6vw, 4rem);
  padding-bottom: clamp(2rem, 5vw, 3rem);
  border-bottom: 1px solid rgba(255,255,255,0.08);
}

@media (min-width:768px){
  .footer .footer-top{ grid-template-columns: 1fr 1fr; align-items:start; }
}

.footer .footer-brand .logo{
  color:#fff;
  margin-bottom: 1rem;
  display:inline-flex;
  gap:.6rem;
  align-items:center;
  text-decoration:none;
}

.footer .footer-tagline{
  font-size: clamp(1.05rem, 1.5vw, 1.2rem);
  line-height:1.5;
  margin-bottom:1.25rem;
  opacity:.9;
  max-width: 40ch;
}

.footer .footer-contact{
  display:flex;
  flex-direction:column;
  gap:.75rem;
}

.footer .footer-contact-info{
  display:flex;
  align-items:center;
  gap:.75rem;
  font-size:.95rem;
  margin:0;
}

.footer .footer-contact-info svg{ flex-shrink:0; opacity:.75; }

.footer .footer-contact-info a{
  color: var(--color-accent);
  text-decoration:none;
  font-weight:600;
}
.footer .footer-contact-info a:hover{ text-decoration:underline; opacity:.95; }

/* Newsletter */
.footer .footer-newsletter{
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--border-radius-xl);
  padding: clamp(1.5rem, 4vw, 2rem);
  backdrop-filter: blur(10px);
}

.footer .footer-newsletter h3{
  color:#fff;
  font-size:1.5rem;
  margin-bottom:.5rem;
}
.footer .footer-newsletter > p{
  opacity:.78;
  margin-bottom:1.25rem;
  font-size:.95rem;
}

.footer .newsletter-form{
  display:flex;
  flex-direction:column;
  gap:.75rem;
  margin-bottom:.9rem;
}

@media (min-width:480px){
  .footer .newsletter-form{ flex-direction:row; }
}

.footer .newsletter-form input{
  flex:1;
  padding:.9rem 1rem;
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.06);
  border-radius: var(--border-radius-md);
  color:#fff;
  font-size:1rem;
}
.footer .newsletter-form input:focus{
  outline:none;
  border-color: var(--color-accent);
  box-shadow: 0 0 0 4px rgba(var(--color-accent-rgb), .18);
}

.footer .newsletter-note{ font-size:.82rem; opacity:.62; margin:0; }

/* Links grid */
.footer .footer-middle{ margin-bottom: clamp(2rem, 5vw, 3rem); }

.footer .footer-links-grid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(180px,1fr));
  gap: clamp(2rem, 4vw, 3rem);
}

.footer .footer-column h3{
  color: var(--color-accent);
  font-size:1.1rem;
  margin-bottom:1.05rem;
  font-weight:700;
}

.footer .footer-column ul{ list-style:none; padding:0; margin:0; }
.footer .footer-column li{ margin-bottom:.6rem; }

.footer .footer-column a{
  color: rgba(255,255,255,0.75);
  text-decoration:none;
  font-size:.95rem;
  display:inline-block;
  transition: transform .18s ease, color .18s ease;
}
.footer .footer-column a:hover{ color:#fff; transform: translateX(4px); }

/* Footer socials (scopé pour éviter conflit avec ta section contact) */
.footer .footer-social-links{
  display:flex;
  gap:1rem;
  margin-bottom:.85rem;
}
.footer .footer-social-links a{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:44px;
  height:44px;
  border-radius:999px;
  background: rgba(255,255,255,0.06);
  color: rgba(255,255,255,0.86);
  transition: transform .22s ease, background .22s ease, color .22s ease;
}
.footer .footer-social-links a:hover{
  background: var(--color-accent);
  color:#1a202c;
  transform: translateY(-3px) scale(1.08);
}
.footer .footer-social-tagline{ font-size:.9rem; opacity:.72; margin:0; }

/* Bottom */
.footer .footer-bottom{
  text-align:center;
  padding-top:1.5rem;
  border-top:1px solid rgba(255,255,255,0.08);
  display:flex;
  flex-direction:column;
  gap:.9rem;
}

@media (min-width:640px){
  .footer .footer-bottom{
    flex-direction:row;
    justify-content:space-between;
    align-items:center;
    text-align:left;
  }
}

.footer .copyright{ opacity:.72; font-size:.9rem; margin:0; }

.footer .footer-legal{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:.75rem;
}
.footer .footer-legal a{
  color: rgba(255,255,255,.65);
  text-decoration:none;
  font-size:.85rem;
}
.footer .footer-legal a:hover{ color: var(--color-accent); }
.footer .separator{ opacity:.4; }

.footer .footer-credits{
  opacity:.55;
  font-size:.85rem;
  font-style:italic;
  margin:0;
}

/* Focus visible */
.footer a:focus-visible,
.fab:focus-visible,
.fab-menu-item:focus-visible{
  outline: 3px solid rgba(var(--color-accent-rgb), .55);
  outline-offset: 3px;
  border-radius: 999px;
}

/* ============================
   MODERN FAB - CSS
   ============================ */
.fab-container{
  position:fixed;
  bottom: clamp(1.5rem, 4vw, 2.5rem);
  right: clamp(1.5rem, 4vw, 2.5rem);
  z-index: 9998;
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:1rem;
  pointer-events:none;
}

.fab-menu{
  display:flex;
  flex-direction:column;
  gap:1rem;
  margin-bottom:1rem;
  opacity:0;
  transform: translateY(10px) scale(.92);
  pointer-events:none;
  transition: all .35s cubic-bezier(0.68,-0.55,0.27,1.55);
}

.fab-menu.active{
  opacity:1;
  transform: translateY(0) scale(1);
  pointer-events:auto;
}

.fab-menu-item{
  width:56px;
  height:56px;
  border-radius:999px;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  pointer-events:auto;
  position:relative;
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-lg);

  background: var(--color-surface);
  color: var(--color-text);

  -webkit-tap-highlight-color: transparent;
  appearance:none;
}

/* couleurs par ordre : email / call / whatsapp */
.fab-menu-item[data-action="email"]{
  background: var(--color-accent);
  color:#1a202c;
  border-color: var(--color-accent);
}
.fab-menu-item[data-action="call"]{
  background:#4285F4;
  color:#fff;
  border-color:#4285F4;
}
.fab-menu-item[data-action="whatsapp"]{
  background:#25D366;
  color:#fff;
  border-color:#25D366;
}

.fab-menu-item:hover{
  transform: translateY(-3px) scale(1.08);
  box-shadow: var(--shadow-xl);
}

.tooltip{
  position:absolute;
  right: calc(100% + 12px);
  top:50%;
  transform: translateY(-50%);
  background: rgba(15, 23, 42, .95);
  color:#fff;
  padding:.5rem .85rem;
  border-radius: var(--border-radius-md);
  font-size:.85rem;
  white-space:nowrap;
  opacity:0;
  pointer-events:none;
  transition: opacity .18s ease;
  box-shadow: var(--shadow-md);
}
.tooltip::after{
  content:'';
  position:absolute;
  left:100%;
  top:50%;
  transform: translateY(-50%);
  border-width:6px;
  border-style:solid;
  border-color: transparent transparent transparent rgba(15, 23, 42, .95);
}
.fab-menu-item:hover .tooltip{ opacity:1; }

.fab{
  width:68px;
  height:68px;
  border-radius:999px;
  background: var(--color-primary);
  color:#fff;
  border:none;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow: 0 8px 25px rgba(0,0,0,.28);
  cursor:pointer;
  pointer-events:auto;
  transition: transform .22s ease, box-shadow .22s ease, background .22s ease, color .22s ease;
  position:relative;
  z-index:9999;
  -webkit-tap-highlight-color: transparent;
}

.fab:hover{ transform: scale(1.07); box-shadow: 0 12px 34px rgba(0,0,0,.35); }

.fab.active{
  background: var(--color-accent);
  color:#1a202c;
}

.fab-icon-close{ display:none; }
.fab.active .fab-icon-open{ display:none; }
.fab.active .fab-icon-close{ display:block; }

@media (max-width:768px){
  .fab-container{ bottom:1.25rem; right:1.25rem; }
  .fab{ width:62px; height:62px; }
  .fab-menu-item{ width:52px; height:52px; }
  .tooltip{ display:none; }
}

/* pulse discret */
@keyframes fabPulse{
  0%{ box-shadow: 0 8px 25px rgba(0,0,0,.28); }
  50%{ box-shadow: 0 8px 25px rgba(var(--color-accent-rgb), .38); }
  100%{ box-shadow: 0 8px 25px rgba(0,0,0,.28); }
}
.fab{ animation: fabPulse 3s infinite ease-in-out; }

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .fab, .fab-menu, .fab-menu-item, .footer *{
    animation: none !important;
    transition: none !important;
    transform: none !important;
    scroll-behavior: auto !important;
  }
}

/* ============================
   GALLERY MODERN (override safe)
   ============================ */

.gallery-section.gallery-modern{
  scroll-margin-top: 110px;
  position: relative;
  padding: clamp(4rem, 8vw, 8rem) 0;
  background: linear-gradient(180deg, var(--color-background, #0b1220) 0%, rgba(0,0,0,0.08) 100%);
  overflow: hidden;
}

.gallery-section.gallery-modern::before{
  content:"";
  position:absolute; left:0; right:0; top:0; height:1px;
  background: linear-gradient(90deg, transparent, var(--color-border, rgba(255,255,255,0.18)), transparent);
}
.gallery-section.gallery-modern::after{
  content:"";
  position:absolute; left:0; right:0; bottom:0; height:280px;
  background: linear-gradient(to top, var(--color-background, #0b1220), transparent);
  pointer-events:none;
}

.gallery-modern .gallery-container{
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 clamp(1rem, 3vw, 2rem);
}

.gallery-modern .gallery-header{
  position: relative;
  height: clamp(300px, 40vh, 420px);
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
  overflow: hidden;
  border-radius: var(--border-radius-2xl, 24px);
  isolation: isolate;
  border: 1px solid var(--color-border, rgba(255,255,255,0.14));
}

.gallery-modern .header-background{
  position:absolute; inset:0;
  background:
    linear-gradient(135deg, rgba(214,158,46,0.14) 0%, transparent 55%),
    radial-gradient(80% 120% at 50% 0%, rgba(255,255,255,0.10), transparent 65%),
    url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" opacity="0.06"><path d="M0,50 Q50,0 100,50 Q50,100 0,50" fill="%23d69e2e"/></svg>');
  background-size: cover;
  transform: scale(1.12) translateY(var(--gallery-parallax, 0px));
  transition: transform .8s cubic-bezier(.4,0,.2,1);
}
.gallery-modern .gallery-header:hover .header-background{
  transform: scale(1.18) translateY(var(--gallery-parallax, 0px));
}

.gallery-modern .header-content{
  position: relative;
  z-index: 2;
  height: 100%;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  text-align:center;
  padding: clamp(1.5rem, 4vw, 3rem);
  color: var(--color-text, #fff);
}

.gallery-modern .gallery-title{
  font-size: clamp(2.4rem, 4.5vw, 4.2rem);
  margin-bottom: clamp(.8rem, 2vw, 1.2rem);
  line-height:1.05;
}
.gallery-modern .title-line{ display:block; }
.gallery-modern .text-accent{
  position:relative;
  display:inline-block;
  color: var(--color-accent, #d69e2e);
}
.gallery-modern .text-accent::after{
  content:"";
  position:absolute; left:0; right:0; bottom:6px; height:10px;
  background: linear-gradient(90deg, transparent, rgba(214,158,46,0.25), transparent);
  z-index:-1;
  border-radius: 999px;
}

.gallery-modern .gallery-subtitle{
  font-size: clamp(1rem, 1.4vw, 1.2rem);
  color: var(--color-text-light, rgba(255,255,255,0.85));
  max-width: 680px;
  margin: 0 auto clamp(1.25rem, 2.8vw, 2rem);
  line-height: 1.7;
}

/* scroll reveal support */
.gallery-modern [data-scroll-reveal]{
  opacity:0;
  transform: translateY(16px);
  transition: opacity .7s cubic-bezier(.4,0,.2,1), transform .7s cubic-bezier(.4,0,.2,1);
}
.gallery-modern [data-scroll-reveal].visible{
  opacity:1;
  transform: translateY(0);
}

/* Stats */
.gallery-modern .gallery-stats{
  display:flex;
  gap: clamp(1rem, 3vw, 3rem);
  margin-top: clamp(.75rem, 2vw, 1.25rem);
}
.gallery-modern .stat-item{ text-align:center; }
.gallery-modern .stat-number{
  font-size: clamp(2rem, 3.6vw, 3.2rem);
  font-weight: 900;
  color: var(--color-accent, #d69e2e);
  line-height:1;
  margin-bottom: .45rem;
}
.gallery-modern .stat-number::after{
  content:"+";
  font-size:.6em;
  opacity:.7;
  margin-left:2px;
}
.gallery-modern .stat-label{
  font-size:.85rem;
  color: var(--color-text-light, rgba(255,255,255,0.78));
  text-transform: uppercase;
  letter-spacing: 1px;
}

/* Filters */
.gallery-modern .gallery-filters{
  display:flex;
  justify-content:center;
  gap: clamp(.5rem, 1.2vw, .9rem);
  margin-bottom: clamp(1.75rem, 3.5vw, 2.75rem);
  position: relative;
  flex-wrap: wrap;
}

.gallery-modern .filter-btn{
  padding: .75rem 1.25rem;
  background: var(--color-surface, rgba(255,255,255,0.06));
  border: 1px solid var(--color-border, rgba(255,255,255,0.14));
  border-radius: 999px;
  color: var(--color-text-light, rgba(255,255,255,0.80));
  font-size: .9rem;
  font-weight: 600;
  cursor: pointer;
  transition: transform .25s cubic-bezier(.4,0,.2,1), background .25s, border-color .25s, color .25s;
}

.gallery-modern .filter-btn:hover{
  color: var(--color-accent, #d69e2e);
  border-color: rgba(214,158,46,0.7);
  transform: translateY(-2px);
}
.gallery-modern .filter-btn.active{
  background: var(--color-accent, #d69e2e);
  border-color: var(--color-accent, #d69e2e);
  color: #1a202c;
  box-shadow: 0 10px 26px rgba(214,158,46,0.28);
}

.gallery-modern .filter-slider{
  position:absolute;
  bottom:-2px;
  height:3px;
  background: var(--color-accent, #d69e2e);
  border-radius: 2px;
  transition: all .35s cubic-bezier(.4,0,.2,1);
  z-index: 0;
}
@media (max-width: 768px){
  .gallery-modern .filter-slider{ display:none; }
  .gallery-modern .gallery-stats{ flex-direction: column; gap: 1rem; }
}

/* Grid */
.gallery-modern .gallery-grid{
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  grid-auto-rows: 300px;
  gap: clamp(1rem, 2.5vw, 1.75rem);
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
}

@media (min-width: 1024px){
  .gallery-modern .gallery-grid{
    grid-template-columns: repeat(12, 1fr);
    grid-auto-rows: 280px;
  }
  .gallery-modern .gallery-item{ grid-column: span 4; }
  .gallery-modern .gallery-item.large{ grid-column: span 6; }
  .gallery-modern .gallery-item.wide{ grid-column: span 8; }
}

.gallery-modern .gallery-item{
  position:relative;
  border-radius: var(--border-radius-xl, 18px);
  overflow:hidden;
  cursor:pointer;
  isolation:isolate;
  outline:none;
}
.gallery-modern .gallery-item.is-hidden{ display:none !important; }

/* utilise ton système reveal-on-scroll */
.gallery-modern .gallery-item.reveal-on-scroll{
  opacity:0;
  transform: translateY(40px) scale(.98);
  transition: opacity .7s cubic-bezier(.4,0,.2,1), transform .7s cubic-bezier(.4,0,.2,1);
}
.gallery-modern .gallery-item.reveal-on-scroll.visible{
  opacity:1;
  transform: translateY(0) scale(1);
}

.gallery-modern .item-inner{ position:relative; height:100%; transition: transform .5s cubic-bezier(.4,0,.2,1); }
.gallery-modern .gallery-item:hover .item-inner{ transform: translateY(-8px); }

.gallery-modern .image-wrapper{ position:absolute; inset:0; overflow:hidden; border-radius: inherit; }
.gallery-modern .gallery-image{ width:100%; height:100%; object-fit:cover; transition: transform .8s cubic-bezier(.4,0,.2,1); }
.gallery-modern .gallery-item:hover .gallery-image{ transform: scale(1.1); }

.gallery-modern .image-overlay{
  position:absolute; inset:0;
  background: linear-gradient(to bottom, transparent 0%, transparent 60%, rgba(0,0,0,0.92) 100%);
  opacity:.82;
  transition: opacity .35s ease;
}
.gallery-modern .gallery-item:hover .image-overlay{ opacity:.9; }

.gallery-modern .image-shine{
  position:absolute; inset:0;
  background: linear-gradient(135deg, transparent 0%, rgba(255,255,255,0.10) 45%, rgba(255,255,255,0.22) 50%, rgba(255,255,255,0.10) 55%, transparent 100%);
  transform: translateX(-110%);
  transition: transform .8s cubic-bezier(.4,0,.2,1);
}
.gallery-modern .gallery-item:hover .image-shine{ transform: translateX(110%); }

.gallery-modern .item-content{
  position:absolute;
  left:0; right:0; bottom:0;
  padding: clamp(1.25rem, 2.6vw, 1.75rem);
  color:#fff;
  z-index:2;
  transform: translateY(18px);
  transition: transform .35s cubic-bezier(.4,0,.2,1);
}
.gallery-modern .gallery-item:hover .item-content{ transform: translateY(0); }

.gallery-modern .location-badge{
  display:inline-block;
  padding: .35rem .85rem;
  background: rgba(214,158,46,0.95);
  color:#1a202c;
  font-size:.75rem;
  font-weight: 800;
  border-radius: 999px;
  margin-bottom: .7rem;
  text-transform: uppercase;
  letter-spacing:.5px;
  backdrop-filter: blur(10px);
}

.gallery-modern .item-title{
  font-size: clamp(1.2rem, 2vw, 1.45rem);
  margin: 0 0 .45rem;
  line-height: 1.25;
}
.gallery-modern .item-description{
  font-size:.9rem;
  opacity:.92;
  margin: 0 0 .9rem;
  line-height:1.6;
}

.gallery-modern .item-tags{ display:flex; gap:.5rem; flex-wrap:wrap; margin-bottom: .9rem; }
.gallery-modern .tag{
  padding: .25rem .62rem;
  background: rgba(255,255,255,0.14);
  border: 1px solid rgba(255,255,255,0.22);
  border-radius: 999px;
  font-size: .72rem;
  backdrop-filter: blur(6px);
  transition: transform .25s ease, background .25s ease;
}
.gallery-modern .gallery-item:hover .tag{ background: rgba(255,255,255,0.22); transform: translateY(-2px); }

.gallery-modern .item-action{
  position:absolute;
  bottom: 1.25rem;
  right: 1.25rem;
  width: 44px; height:44px;
  background: rgba(255,255,255,0.14);
  border: 1px solid rgba(255,255,255,0.30);
  border-radius: 50%;
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  backdrop-filter: blur(6px);
  opacity:0;
  transform: scale(.86);
  transition: all .35s cubic-bezier(.4,0,.2,1);
}
.gallery-modern .gallery-item:hover .item-action{
  opacity:1;
  transform: scale(1);
}
.gallery-modern .item-action:hover{
  background: var(--color-accent, #d69e2e);
  border-color: var(--color-accent, #d69e2e);
  color:#1a202c;
  transform: scale(1.08);
}

.gallery-modern .item-hover-effect{
  position:absolute; inset:-2px;
  border: 2px solid transparent;
  border-radius: inherit;
  background: linear-gradient(135deg, var(--color-accent, #d69e2e), transparent, var(--color-accent, #d69e2e)) border-box;
  -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
  mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity:0;
  transform: scale(.96);
  transition: all .45s cubic-bezier(.4,0,.2,1);
}
.gallery-modern .gallery-item:hover .item-hover-effect{
  opacity:1;
  transform: scale(1);
}

/* CTA inside gallery */
.gallery-modern .gallery-cta{
  background: linear-gradient(135deg, var(--color-primary, #1a365d), var(--color-primary-light, #2d4a8a));
  border-radius: var(--border-radius-2xl, 24px);
  padding: clamp(2.5rem, 5vw, 4rem);
  text-align:center;
  position:relative;
  overflow:hidden;
  border: 1px solid rgba(255,255,255,0.10);
}
.gallery-modern .gallery-cta h3{
  font-size: clamp(1.7rem, 2.8vw, 2.2rem);
  color:#fff;
  margin-bottom: .8rem;
}
.gallery-modern .gallery-cta p{
  font-size: clamp(1rem, 1.4vw, 1.1rem);
  color: rgba(255,255,255,0.90);
  margin: 0 auto 1.6rem;
  line-height:1.7;
  max-width: 760px;
}

/* Lightbox */
.gallery-lightbox{
  display:none;
  position:fixed;
  inset:0;
  z-index: 9999;
}
.gallery-lightbox.active{ display:block; }

.gallery-lightbox .lightbox-overlay{
  position:absolute; inset:0;
  background: rgba(0,0,0,0.94);
  backdrop-filter: blur(10px);
}

.gallery-lightbox .lightbox-container{
  position:absolute; inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  padding: clamp(1rem, 3vw, 2.5rem);
}

.gallery-lightbox .lightbox-close{
  position:absolute;
  top: clamp(1rem, 3vw, 1.8rem);
  right: clamp(1rem, 3vw, 1.8rem);
  width: 48px; height: 48px;
  background: rgba(255,255,255,0.10);
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 50%;
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  transition: transform .25s ease, background .25s ease;
  z-index: 10;
}
.gallery-lightbox .lightbox-close:hover{
  background: rgba(255,255,255,0.18);
  transform: rotate(90deg);
}

.gallery-lightbox .lightbox-content{
  width: min(1200px, 100%);
  max-height: 90vh;
  display:flex;
  flex-direction:column;
  border-radius: var(--border-radius-xl, 18px);
  overflow:hidden;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(0,0,0,0.25);
}

.gallery-lightbox .lightbox-image-container{
  position:relative;
  flex: 1;
  min-height: 45vh;
  background: rgba(0,0,0,0.35);
}

.gallery-lightbox .lightbox-image{
  width:100%;
  height:100%;
  object-fit: contain;
  display:block;
}

.gallery-lightbox .lightbox-loader{
  position:absolute;
  top:50%; left:50%;
  transform: translate(-50%,-50%);
  width:40px; height:40px;
  border: 3px solid rgba(255,255,255,0.10);
  border-top-color: var(--color-accent, #d69e2e);
  border-radius:50%;
  animation: gallerySpin 1s linear infinite;
  display:none;
}
@keyframes gallerySpin{ to{ transform: translate(-50%,-50%) rotate(360deg); } }

.gallery-lightbox .lightbox-info{
  padding: clamp(1rem, 2vw, 1.4rem);
  background: rgba(0,0,0,0.65);
  backdrop-filter: blur(18px);
  color:#fff;
}

.gallery-lightbox .lightbox-location{
  font-size:.9rem;
  color: var(--color-accent, #d69e2e);
  font-weight: 800;
  margin-bottom: .25rem;
}
.gallery-lightbox .lightbox-title{
  font-size: 1.4rem;
  font-weight: 800;
  margin-bottom: .5rem;
}
.gallery-lightbox .lightbox-description{
  font-size: .98rem;
  opacity:.92;
  line-height:1.6;
  margin-bottom: .9rem;
}
.gallery-lightbox .lightbox-tags{
  display:flex;
  gap:.5rem;
  flex-wrap:wrap;
}

.gallery-lightbox .lightbox-nav{
  position:absolute;
  top:50%;
  transform: translateY(-50%);
  width:56px; height:56px;
  background: rgba(255,255,255,0.10);
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 50%;
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  transition: transform .25s ease, background .25s ease;
}
.gallery-lightbox .lightbox-nav:hover{
  background: rgba(255,255,255,0.18);
  transform: translateY(-50%) scale(1.08);
}
.gallery-lightbox .lightbox-nav.prev{ left: clamp(1rem, 3vw, 2rem); }
.gallery-lightbox .lightbox-nav.next{ right: clamp(1rem, 3vw, 2rem); }

@media (prefers-reduced-motion: reduce){
  .gallery-modern *{ transition:none !important; animation:none !important; }
  .gallery-modern .image-shine,
  .gallery-modern .item-hover-effect{ display:none !important; }
}