/* ============================================
   Doukkali — components.css
   Styles premium — inspiré de Niarra Travel / Hedwig
   ============================================ */

/* === Variables CSS === */
/* ===== THEME SYSTEM ===== */
:root, [data-theme="royal"] {
  --c-primary: 17 8 59;
  --c-gold: 193 157 104;
  --c-dark: 14 12 25;
  --c-light: 248 246 242;
  --c-sky: 168 134 205;
  --c-ink: 60 58 71;
  --c-dim: 102 102 102;
  --color-primary: #11083B;
  --color-gold: #C19D68;
  --color-dark: #0E0C19;
  --color-light: #F8F6F2;
  --color-sky: #A886CD;
  --color-white: #FFFFFF;
  --color-text-dark: #3C3A47;
  --color-text-muted: #666666;
}

[data-theme="original"] {
  --c-primary: 26 60 46;
  --c-gold: 201 168 76;
  --c-dark: 13 31 23;
  --c-light: 245 240 232;
  --c-sky: 135 206 235;
  --c-ink: 28 28 28;
  --c-dim: 107 114 128;
  --color-primary: #1A3C2E;
  --color-gold: #C9A84C;
  --color-dark: #0D1F17;
  --color-light: #F5F0E8;
  --color-sky: #87CEEB;
  --color-white: #FFFFFF;
  --color-text-dark: #1C1C1C;
  --color-text-muted: #6B7280;
}

[data-theme="discount"] {
  --c-primary: 17 94 97;
  --c-gold: 188 155 70;
  --c-dark: 20 61 97;
  --c-light: 248 244 236;
  --c-sky: 1 64 63;
  --c-ink: 26 26 26;
  --c-dim: 71 85 105;
  --color-primary: #115E61;
  --color-gold: #BC9B46;
  --color-dark: #143D61;
  --color-light: #F8F4EC;
  --color-sky: #01403F;
  --color-white: #FFFFFF;
  --color-text-dark: #1A1A1A;
  --color-text-muted: #475569;
}

/* === Smooth Scroll === */
html { scroll-behavior: smooth; }

/* === Selection === */
::selection {
  background: rgb(var(--c-gold) / 0.25);
  color: var(--color-dark);
}

/* === Preloader === */
@keyframes preloader-spin {
  to { stroke-dashoffset: 0; }
}
@keyframes preloader-pulse {
  0%, 100% { transform: scale(1); opacity: 0.8; }
  50%      { transform: scale(1.08); opacity: 1; }
}
@keyframes preloader-glow {
  0%, 100% { filter: drop-shadow(0 0 8px rgba(201,168,76,0.3)); }
  50%      { filter: drop-shadow(0 0 20px rgba(201,168,76,0.7)); }
}
@keyframes blink-cursor {
  0%, 100% { border-color: #C9A84C; }
  50%      { border-color: transparent; }
}
@keyframes preloader-fade-up {
  0%   { opacity: 0; transform: translateY(12px); }
  100% { opacity: 1; transform: translateY(0); }
}
.preloader-circle {
  animation: preloader-spin 1.5s ease-in-out forwards;
  transform-origin: center;
}
.preloader-logo {
  animation: preloader-pulse 1.8s ease-in-out infinite, preloader-glow 1.8s ease-in-out infinite;
}
.preloader-name-fr {
  display: inline-block;
  white-space: nowrap;
  border-right: 3px solid transparent;
  min-height: 1.2em;
}
.preloader-name-fr.typing {
  border-right-color: #C9A84C;
  animation: blink-cursor 0.6s step-end infinite;
}
.preloader-separator {
  opacity: 0;
  transition: opacity 0.4s ease;
}
.preloader-separator.visible {
  opacity: 1;
}
.preloader-name-ar {
  display: inline-block;
  white-space: nowrap;
  border-left: 3px solid transparent;
  min-height: 1.2em;
}
.preloader-name-ar.typing {
  border-left-color: #C9A84C;
  animation: blink-cursor 0.6s step-end infinite;
}
.preloader-subtitle {
  opacity: 0;
}
.preloader-subtitle.visible {
  animation: preloader-fade-up 0.8s ease-out forwards;
}

/* === Bouton CTA Or === */
.btn-gold {
  background: var(--color-gold);
  color: var(--color-dark);
  font-family: 'DM Sans', sans-serif;
  font-weight: 600;
  padding: 14px 32px;
  border-radius: 6px;
  transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  display: inline-block;
  text-decoration: none;
  cursor: pointer;
  border: none;
  letter-spacing: 0.02em;
  position: relative;
  overflow: hidden;
  white-space: nowrap;
}
.btn-gold::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, transparent, rgba(255,255,255,0.2), transparent);
  transform: translateX(-100%);
  transition: transform 0.6s;
}
.btn-gold:hover::before {
  transform: translateX(100%);
}
.btn-gold:hover {
  background: var(--color-primary);
  color: var(--color-gold);
  transform: translateY(-1px);
  box-shadow: 0 4px 20px rgb(var(--c-gold) / 0.3);
}

/* === Bouton CTA Outline === */
.btn-outline {
  border: 1.5px solid rgba(255,255,255,0.5);
  color: #FFFFFF;
  font-family: 'DM Sans', sans-serif;
  font-weight: 500;
  padding: 14px 32px;
  border-radius: 6px;
  transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  display: inline-block;
  text-decoration: none;
  background: transparent;
  cursor: pointer;
}
.btn-outline:hover {
  background: rgba(255,255,255,0.1);
  border-color: rgba(255,255,255,0.8);
  transform: translateY(-1px);
}

/* === Bouton CTA Outline foncé (fonds clairs) === */
.btn-outline-dark {
  border: 1.5px solid rgba(26, 60, 46, 0.35);
  color: var(--color-primary);
  font-family: 'DM Sans', sans-serif;
  font-weight: 500;
  padding: 14px 32px;
  border-radius: 6px;
  transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  display: inline-block;
  text-decoration: none;
  background: transparent;
  cursor: pointer;
}
.btn-outline-dark:hover {
  background: var(--color-primary);
  color: #FFFFFF;
  border-color: var(--color-primary);
  transform: translateY(-1px);
}

/* === Navigation === */
.nav-link {
  font-family: 'DM Sans', sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: rgba(255,255,255,0.7);
  transition: all 0.3s ease;
  text-decoration: none;
  padding: 8px 16px;
  border-radius: 6px;
  position: relative;
  white-space: nowrap;
}
.nav-link:hover {
  color: #FFFFFF;
  background: rgba(255,255,255,0.06);
}
.nav-link.active {
  color: var(--color-gold);
}

/* ═══ ANCIEN NAVBAR (avant refonte transparente) ═══
#main-header {
  backdrop-filter: none;
  background: none;
  border-bottom: none;
}
.nav-scrolled {
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  background: rgb(var(--c-dark) / 0.92) !important;
  box-shadow: 0 1px 0 rgb(var(--c-gold) / 0.1);
}
Header height: h-20 lg:h-24, logo: h-12 sm:h-14
═══════════════════════════════════════════════════ */

/* Nav — frost par défaut */
#main-header {
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  background: transparent;
  border-bottom: 1px solid rgb(var(--c-gold) / 0.06);
}

/* Nav scrolled — frost léger, reste transparent */
.nav-scrolled {
  backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  background: rgb(var(--c-dark) / 0.15) !important;
  box-shadow: 0 1px 0 rgb(var(--c-gold) / 0.1);
  border-bottom-color: rgb(var(--c-gold) / 0.1);
}

/* === Menu mobile === */
.mobile-nav-link {
  font-family: 'Playfair Display', serif;
  font-size: 24px;
  color: var(--color-light);
  border-bottom: 1px solid rgb(var(--c-gold) / 0.15);
  padding-bottom: 14px;
  transition: all 0.3s;
  text-decoration: none;
  display: block;
}
.mobile-nav-link:hover {
  color: var(--color-gold);
  padding-left: 8px;
}
#mobile-menu:not(.translate-x-full) {
  z-index: 9999 !important;
}

/* Hamburger bars */
.hamburger-bar {
  display: block;
  width: 26px;
  height: 3px;
  background: #FFFFFF;
  transition: all 0.3s ease;
  border-radius: 2px;
}
#hamburger {
  position: relative;
  z-index: 60;
}

/* === Hero styles === */

/* --- Slideshow multi-phases avec Ken Burns --- */
.hero-slideshow {
  position: relative;
  width: 100%;
  height: 100%;
}
.hero-slide {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transform: scale(1);
  transition: opacity 1.5s ease-in-out;
  will-change: opacity, transform;
}
.hero-slide.active {
  opacity: 1;
  animation: kb-phase 8s ease-in-out forwards;
}

/* Phases de zoom différentes pour variété */
@keyframes kb-phase {
  0%   { transform: scale(1);    }
  100% { transform: scale(1.12); }
}
/* Phase sortante — léger zoom-out pendant le fondu */
.hero-slide.exiting {
  opacity: 0;
  transform: scale(1.15);
  transition: opacity 1.5s ease-in-out, transform 1.5s ease-in-out;
}

/* Ancien Ken Burns simple — gardé pour compatibilité autres pages */
.hero-bg-img {
  animation: ken-burns 20s ease-in-out infinite alternate;
  will-change: transform;
}
@keyframes ken-burns {
  0%   { transform: scale(1); }
  100% { transform: scale(1.08); }
}

/* Scroll dot animation */
@keyframes scroll-down {
  0%   { transform: translateY(0); opacity: 1; }
  100% { transform: translateY(8px); opacity: 0; }
}
.scroll-dot {
  animation: scroll-down 1.8s ease-in-out infinite;
}

/* === Marquee === */
@keyframes marquee-scroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
.marquee-track {
  animation: marquee-scroll 30s linear infinite;
}
.marquee-item {
  font-family: 'DM Sans', sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: var(--color-dark);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  flex-shrink: 0;
}

/* === Feature Cards (Pourquoi nous) === */
.feature-card {
  background: #FFFFFF;
  border-radius: 16px;
  padding: 32px 28px;
  border: 1px solid rgb(var(--c-gold) / 0.1);
  transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  text-align: center;
}
.feature-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 40px rgb(var(--c-primary) / 0.12);
  border-color: rgb(var(--c-gold) / 0.3);
}
.feature-icon {
  width: 56px;
  height: 56px;
  border-radius: 14px;
  background: linear-gradient(135deg, rgb(var(--c-gold) / 0.1), rgb(var(--c-gold) / 0.05));
  border: 1px solid rgb(var(--c-gold) / 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 20px;
  color: var(--color-gold);
  transition: all 0.4s ease;
}
.feature-card:hover .feature-icon {
  background: var(--color-gold);
  color: var(--color-dark);
  transform: scale(1.05);
}

/* === Badge === */
.badge-depart {
  background: rgb(var(--c-gold) / 0.1);
  color: var(--color-gold);
  border: 1px solid rgb(var(--c-gold) / 0.3);
  font-size: 12px;
  padding: 4px 14px;
  border-radius: 20px;
  font-family: 'DM Sans', sans-serif;
  font-weight: 500;
  display: inline-block;
}

.badge-populaire {
  background: var(--color-gold);
  color: var(--color-dark);
  font-size: 11px;
  padding: 5px 14px;
  border-radius: 20px;
  font-family: 'DM Sans', sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.badge-limite {
  background: #DC2626;
  color: #FFFFFF;
  font-size: 11px;
  padding: 5px 14px;
  border-radius: 20px;
  font-family: 'DM Sans', sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

/* === Cards Offres === */
.offre-card {
  background: #FFFFFF;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 4px 24px rgb(var(--c-primary) / 0.08);
  transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  border: 1px solid rgba(0,0,0,0.04);
}
.offre-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 24px 56px rgb(var(--c-primary) / 0.16);
}
.card-img {
  transition: transform 0.7s cubic-bezier(0.4, 0, 0.2, 1);
}
.offre-card:hover .card-img {
  transform: scale(1.06);
}

/* === Compteurs === */
.counter-item {
  text-align: center;
}
.counter {
  font-family: 'Playfair Display', serif;
  font-size: 48px;
  font-weight: 700;
  color: var(--color-gold);
  line-height: 1;
}
@media (max-width: 640px) {
  .counter { font-size: 36px; }
}

/* === Calendrier === */
.calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
}
.calendar-day {
  aspect-ratio: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-family: 'DM Sans', sans-serif;
  font-size: 14px;
  border-radius: 10px;
  cursor: default;
  transition: all 0.25s ease;
  position: relative;
}
.calendar-day.has-depart {
  background: rgb(var(--c-gold) / 0.12);
  color: var(--color-gold);
  font-weight: 600;
  cursor: pointer;
  border: 1px solid rgb(var(--c-gold) / 0.25);
  position: relative;
}
.calendar-day.has-depart .depart-num {
  font-size: 15px;
  font-weight: 700;
}
.calendar-day.has-depart .depart-label {
  font-size: 10px;
  line-height: 1;
  margin-top: 1px;
}
.calendar-day.has-depart .depart-tooltip {
  display: none;
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--color-dark, #0D1F17);
  color: #fff;
  padding: 10px 14px;
  border-radius: 8px;
  white-space: nowrap;
  z-index: 50;
  box-shadow: 0 8px 24px rgba(0,0,0,0.25);
  font-size: 12px;
  text-align: center;
  flex-direction: column;
  gap: 4px;
}
.calendar-day.has-depart .depart-tooltip::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-top-color: var(--color-dark, #0D1F17);
}
.calendar-day.has-depart .depart-tooltip strong {
  display: block;
  font-weight: 600;
  color: #fff;
}
.calendar-day.has-depart .depart-tooltip-price {
  display: block;
  color: var(--color-gold);
  font-weight: 500;
  margin-top: 2px;
}
.calendar-day.has-depart:hover .depart-tooltip {
  display: flex;
}
.calendar-day.has-depart:hover {
  background: var(--color-gold);
  color: var(--color-dark);
  transform: scale(1.15);
  z-index: 10;
}
.calendar-day.has-depart:hover .depart-label {
  color: var(--color-dark);
}
.calendar-day.past-day {
  color: #d1d5db;
}
.calendar-day-header {
  font-family: 'DM Sans', sans-serif;
  font-size: 11px;
  font-weight: 600;
  color: var(--color-text-muted);
  text-align: center;
  padding: 8px 0;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

/* === Composez votre voyage (calendrier tarifaire) === */
.composer {
  background: #FFFFFF;
  border-radius: 20px;
  border: 1px solid rgb(var(--c-gold) / 0.12);
  box-shadow: 0 12px 40px rgba(26, 60, 46, 0.10);
  overflow: hidden;
  font-family: 'DM Sans', sans-serif;
}

/* ===== Composer split full-bleed (détail à gauche, calendrier à droite) ===== */
.composer-split-section {
  position: relative;
  overflow: hidden;
}
.composer-split {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
  width: 100%;
  min-height: 600px;
}
/* GAUCHE : panneau détail offre */
.composer-detail {
  position: relative;
  min-height: 600px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  color: #FFFFFF;
  overflow: hidden;
  background: var(--color-dark, #0D1F17);
}
.composer-detail .cd-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.8s ease;
}
.composer-detail:hover .cd-img { transform: scale(1.04); }
.composer-detail::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(13,31,23,0.92) 0%, rgba(13,31,23,0.55) 45%, rgba(13,31,23,0.18) 100%);
}
.composer-detail .cd-body {
  position: relative;
  z-index: 2;
  padding: clamp(28px, 4vw, 56px);
  max-width: 640px;
  margin-left: auto;
}
.composer-detail .cd-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgb(var(--c-gold) / 0.18);
  color: var(--color-gold);
  border: 1px solid rgb(var(--c-gold) / 0.45);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  padding: 5px 14px;
  border-radius: 20px;
  margin-bottom: 16px;
}
.composer-detail .cd-title {
  font-family: 'Playfair Display', serif;
  font-weight: 700;
  font-size: clamp(26px, 3.4vw, 42px);
  line-height: 1.15;
  margin-bottom: 18px;
}
.composer-detail .cd-meta {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 24px;
  margin-bottom: 24px;
}
.composer-detail .cd-meta-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-family: 'DM Sans', sans-serif;
  font-size: 14px;
  color: rgba(255,255,255,0.9);
}
.composer-detail .cd-meta-item i,
.composer-detail .cd-meta-item svg {
  color: var(--color-gold);
  font-size: 15px;
  width: 18px;
  height: 18px;
  margin-top: 2px;
  text-align: center;
  flex: 0 0 auto;
}
.composer-detail .cd-meta-item span small {
  display: block;
  font-size: 11px;
  color: rgba(255,255,255,0.6);
  font-weight: 400;
}
.composer-detail .cd-meta-item span b {
  font-weight: 600;
}
.composer-detail .cd-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  padding-top: 20px;
  border-top: 1px solid rgba(255,255,255,0.15);
}
.composer-detail .cd-price small {
  display: block;
  font-size: 12px;
  color: rgba(255,255,255,0.65);
}
.composer-detail .cd-price b {
  font-family: 'Playfair Display', serif;
  font-size: clamp(24px, 2.6vw, 34px);
  font-weight: 700;
  color: var(--color-gold);
}
.composer-detail .cd-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--color-gold);
  color: var(--color-dark, #0D1F17);
  font-family: 'DM Sans', sans-serif;
  font-weight: 600;
  font-size: 14px;
  padding: 13px 26px;
  border-radius: 6px;
  transition: background 0.3s ease, color 0.3s ease, transform 0.3s ease;
}
.composer-detail .cd-btn:hover {
  background: var(--color-primary, #1A3C2E);
  color: var(--color-gold);
  transform: translateY(-2px);
}
.composer-detail .cd-btn svg { width: 16px; height: 16px; }
.composer-detail .cd-empty {
  position: relative;
  z-index: 2;
  margin: auto;
  text-align: center;
  padding: 40px;
  color: rgba(255,255,255,0.85);
  font-family: 'DM Sans', sans-serif;
}
/* DROITE : calendrier */
.composer-cal {
  background: #FFFFFF;
  padding: clamp(28px, 3.6vw, 56px);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.composer-cal-head { margin-bottom: 24px; }
.composer-kicker {
  display: inline-block;
  font-family: 'DM Sans', sans-serif;
  color: var(--color-gold);
  font-size: 13px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  margin-bottom: 10px;
}
.composer-title {
  font-family: 'Playfair Display', serif;
  font-weight: 700;
  color: var(--color-dark, #0D1F17);
  font-size: clamp(26px, 3vw, 40px);
  line-height: 1.15;
}
.composer-title span { color: var(--color-gold); }
.composer-cal .composer-selectors {
  background: transparent;
  border: none;
  padding: 0 0 8px;
}
.composer-cal .composer-dates { padding: 0; }
@media (max-width: 1024px) {
  .composer-split { grid-template-columns: 1fr; min-height: 0; }
  .composer-split > * { min-width: 0; }
  .composer-detail { min-height: 420px; }
}
.composer-selectors {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  padding: 20px;
  background: #FBF8F2;
  border-bottom: 1px solid rgb(var(--c-gold) / 0.12);
}
.composer-field label {
  display: block;
  font-size: 12px;
  font-weight: 500;
  color: var(--color-text-muted);
  margin-bottom: 8px;
}
.composer-select-wrap {
  position: relative;
}
.composer-select-wrap select {
  width: 100%;
  appearance: none;
  -webkit-appearance: none;
  background: #FFFFFF;
  border: 1px solid #E5E0D6;
  border-radius: 10px;
  padding: 13px 40px 13px 16px;
  font-family: 'DM Sans', sans-serif;
  font-size: 15px;
  font-weight: 600;
  color: var(--color-dark, #0D1F17);
  cursor: pointer;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.composer-select-wrap select:focus {
  outline: none;
  border-color: var(--color-gold);
  box-shadow: 0 0 0 3px rgb(var(--c-gold) / 0.15);
}
.composer-select-wrap svg {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  color: var(--color-text-muted);
  pointer-events: none;
}
.composer-dates {
  padding: 20px;
}
.composer-dates-head {
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text-muted);
  margin-bottom: 16px;
}
.composer-months-wrap {
  display: flex;
  align-items: stretch;
  gap: 10px;
  margin-bottom: 22px;
}
.composer-months {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: 10px;
  flex: 1;
  min-width: 0;
}
.composer-months-arrow {
  flex: 0 0 auto;
  width: 38px;
  border: 1px solid #E5E0D6;
  background: #FFFFFF;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-dark, #0D1F17);
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease;
}
.composer-months-arrow svg { width: 18px; height: 18px; }
.composer-months-arrow:hover { background: #FBF8F2; border-color: var(--color-gold); }
.composer-months-arrow:disabled { opacity: 0.35; cursor: not-allowed; }
.composer-month-tab {
  position: relative;
  border: 1px solid #E5E0D6;
  background: #FFFFFF;
  border-radius: 10px;
  padding: 14px 8px 12px;
  text-align: center;
  cursor: pointer;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
  min-width: 0;
}
.composer-month-tab:hover:not(.disabled) {
  border-color: var(--color-gold);
  transform: translateY(-2px);
}
.composer-month-tab .cmt-name {
  display: block;
  font-size: 13px;
  font-weight: 700;
  color: var(--color-dark, #0D1F17);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.composer-month-tab .cmt-from {
  display: block;
  font-size: 11px;
  color: var(--color-text-muted);
  margin-top: 4px;
}
.composer-month-tab .cmt-price {
  display: block;
  font-size: 14px;
  font-weight: 700;
  color: var(--color-dark, #0D1F17);
  margin-top: 1px;
}
.composer-month-tab.disabled {
  cursor: not-allowed;
  background: #FAFAFA;
}
.composer-month-tab.disabled .cmt-name,
.composer-month-tab.disabled .cmt-price { color: #C7C7C7; }
.composer-month-tab.disabled .cmt-from { color: #C7C7C7; font-size: 11px; }
.composer-month-tab.active {
  background: var(--color-gold);
  border-color: var(--color-gold);
  box-shadow: 0 8px 20px rgb(var(--c-gold) / 0.35);
}
.composer-month-tab.active .cmt-name,
.composer-month-tab.active .cmt-from,
.composer-month-tab.active .cmt-price { color: var(--color-dark, #0D1F17); }
.composer-month-tab .cmt-best {
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--color-gold);
  color: var(--color-dark, #0D1F17);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 3px 8px;
  border-radius: 20px;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 3px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.15);
}
.composer-month-tab.active .cmt-best {
  background: var(--color-dark, #0D1F17);
  color: var(--color-gold);
}
.composer-weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 8px;
  margin-bottom: 10px;
}
.composer-weekdays > div {
  text-align: center;
  font-size: 12px;
  font-weight: 600;
  color: var(--color-text-muted);
}
.composer-days {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 8px;
}
.cmp-cell {
  min-height: 104px;
  border-radius: 12px;
  padding: 8px 6px 8px;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  overflow: hidden;
}
.cmp-cell.empty { background: transparent; }
.composer-empty {
  grid-column: 1 / -1;
  text-align: center;
  padding: 32px 16px;
  color: var(--color-text-muted);
  font-family: 'DM Sans', sans-serif;
  font-size: 14px;
}
.cmp-cell.plain {
  background: #FFFFFF;
  border: 1px solid #EFEAE0;
}
.cmp-cell.plain .cmp-daynum { color: #B9B4A8; }
.cmp-cell.depart {
  background: #FFFFFF;
  border: 1px solid #EFEAE0;
  cursor: pointer;
  transition: background-color 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease, transform 0.2s ease;
}
.cmp-daynum {
  align-self: flex-start;
  font-size: 12px;
  font-weight: 700;
  color: var(--color-dark, #0D1F17);
}
.cmp-from {
  display: block;
  font-size: 10px;
  color: var(--color-text-muted);
  margin-top: 10px;
}
.cmp-price {
  display: block;
  font-size: 14px;
  font-weight: 800;
  color: var(--color-gold);
  line-height: 1.1;
}
.cmp-cta {
  display: none;
  margin-top: 6px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.03em;
  color: var(--color-gold);
}

/* État survol uniquement : carte sombre façon "pricing" */
.cmp-cell.depart:hover {
  background: var(--color-dark, #0D1F17);
  border-color: var(--color-dark, #0D1F17);
  box-shadow: 0 10px 26px rgb(var(--c-primary) / 0.28);
  transform: translateY(-2px);
}
.cmp-cell.depart.best { padding-bottom: 24px; }
.cmp-cell.depart.best {
  border-color: var(--color-gold);
  box-shadow: 0 4px 16px rgb(var(--c-gold) / 0.18);
}
.cmp-cell.depart:hover .cmp-daynum,
.cmp-cell.depart:hover .cmp-from { color: rgba(255,255,255,0.85); }
.cmp-cell.depart:hover .cmp-price { color: var(--color-gold); }
.cmp-cell.depart:hover .cmp-cta { display: block; }

/* Départ sélectionné (panneau détail affiché à gauche) */
.cmp-cell.depart.selected {
  background: var(--color-dark, #0D1F17);
  border-color: var(--color-gold);
  box-shadow: 0 10px 26px rgb(var(--c-primary) / 0.28);
}
.cmp-cell.depart.selected .cmp-daynum,
.cmp-cell.depart.selected .cmp-from { color: rgba(255,255,255,0.85); }
.cmp-cell.depart.selected .cmp-price { color: var(--color-gold); }
.cmp-cell.depart.selected .cmp-cta { display: block; }

.cmp-badge {
  position: absolute;
  top: 6px;
  right: 6px;
  background: var(--color-gold);
  color: var(--color-dark, #0D1F17);
  font-size: 9px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 6px;
}
.cmp-best-ribbon {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--color-gold);
  color: var(--color-dark, #0D1F17);
  font-size: 9px;
  font-weight: 700;
  text-align: center;
  padding: 3px 0;
  border-radius: 0 0 11px 11px;
  letter-spacing: 0.03em;
}
@media (max-width: 1024px) {
  .composer-months { grid-auto-columns: minmax(120px, 1fr); overflow-x: auto; }
}
@media (max-width: 768px) {
  .composer-selectors { grid-template-columns: 1fr; }
  .composer-weekdays { display: none; }
  .composer-days { grid-template-columns: 1fr; gap: 8px; }
  .cmp-cell.empty { display: none; }
  .cmp-cell.plain { display: none; }
  .cmp-cell { min-height: auto; flex-direction: row; align-items: center; justify-content: space-between; padding: 12px 14px; }
  .cmp-daynum { align-self: center; }
  .cmp-cell.depart .cmp-daynum::after { content: ' — Départ'; font-weight: 500; color: var(--color-text-muted); }
  .cmp-from { display: inline; margin: 0 4px 0 0; }
  .cmp-cta { display: none !important; }
  .cmp-best-ribbon { position: static; border-radius: 6px; padding: 2px 8px; margin-left: 8px; }
  .cmp-cell.depart.best { padding-bottom: 12px; }
  .composer-months-wrap { gap: 6px; }
}

/* === Visa Cards === */
.visa-card {
  background: #FFFFFF;
  border-radius: 20px;
  padding: 36px 28px;
  box-shadow: 0 4px 24px rgb(var(--c-primary) / 0.06);
  border: 1px solid rgb(var(--c-gold) / 0.1);
  transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  text-align: center;
}
.visa-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 48px rgb(var(--c-primary) / 0.14);
  border-color: rgb(var(--c-gold) / 0.3);
}

/* === Avis / Carrousel === */
.avis-card {
  background: #FFFFFF;
  border-radius: 16px;
  padding: 28px;
  box-shadow: 0 2px 16px rgb(var(--c-primary) / 0.06);
  border: 1px solid rgba(0,0,0,0.04);
  transition: all 0.4s ease;
}
.avis-card:hover {
  box-shadow: 0 8px 32px rgb(var(--c-primary) / 0.1);
}
.avis-stars {
  color: var(--color-gold);
  font-size: 16px;
  letter-spacing: 2px;
}
.avis-carousel-wrapper {
  position: relative;
  overflow: hidden;
}
.avis-track {
  display: flex;
  transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}
.avis-slide {
  min-width: 100%;
  padding: 0 12px;
  box-sizing: border-box;
}
@media (min-width: 768px) {
  .avis-slide { min-width: 50%; }
}
@media (min-width: 1024px) {
  .avis-slide { min-width: 33.333%; }
}

/* === Input Fields === */
.input-field {
  width: 100%;
  padding: 12px 16px;
  border: 1px solid rgb(var(--c-gold) / 0.25);
  border-radius: 8px;
  background: #FFFFFF;
  font-family: 'DM Sans', sans-serif;
  font-size: 15px;
  outline: none;
  transition: all 0.3s ease;
}
.input-field:focus {
  border-color: var(--color-gold);
  box-shadow: 0 0 0 3px rgb(var(--c-gold) / 0.1);
}

/* === Toggle boutons prix === */
.toggle-btn {
  padding: 10px 24px;
  border-radius: 6px;
  border: 1px solid rgb(var(--c-gold) / 0.3);
  font-family: 'DM Sans', sans-serif;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.25s ease;
  color: var(--color-primary);
  background: transparent;
}
.toggle-btn.active {
  background: var(--color-gold);
  color: var(--color-dark);
  border-color: var(--color-gold);
}

/* === Steps Booking === */
.steps-indicator .step {
  font-size: 13px;
  color: var(--color-text-muted);
  padding: 6px 16px;
  border-radius: 20px;
  border: 1px solid #e5e7eb;
}
.steps-indicator .step.active {
  background: var(--color-primary);
  color: var(--color-light);
  border-color: var(--color-primary);
}

/* === Texture fond parchemin === */
.bg-texture {
  background-color: var(--color-light);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4'%3E%3Crect width='4' height='4' fill='%23F8F6F2'/%3E%3Crect width='1' height='1' fill='%23C19D68' opacity='0.04'/%3E%3C/svg%3E");
}

/* === Scrollbar custom === */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--color-light); }
::-webkit-scrollbar-thumb { background: var(--color-gold); border-radius: 3px; }

/* === Motif islamique SVG overlay === */
.islamic-pattern {
  position: absolute;
  inset: 0;
  opacity: 0.05;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80' viewBox='0 0 80 80'%3E%3Cg fill='%23C19D68' fill-opacity='1'%3E%3Cpath d='M40 0L50 10L40 20L30 10Z'/%3E%3Cpath d='M0 40L10 30L20 40L10 50Z'/%3E%3Cpath d='M80 40L70 30L60 40L70 50Z'/%3E%3Cpath d='M40 80L50 70L40 60L30 70Z'/%3E%3Cpath d='M40 40L50 30L60 40L50 50Z'/%3E%3C/g%3E%3C/svg%3E");
}

/* === Section ornement (utilisé sur les sous-pages) === */
.section-ornement {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-bottom: 24px;
}
.section-ornement::before,
.section-ornement::after {
  content: '';
  flex: 1;
  max-width: 80px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--color-gold), transparent);
}

/* === Footer === */
.footer-separator {
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--color-gold), transparent);
  margin: 32px 0;
}

/* === WhatsApp flottant === */
@keyframes whatsapp-ring {
  0%   { transform: scale(1); opacity: 0.4; }
  100% { transform: scale(2); opacity: 0; }
}
.whatsapp-pulse {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: #25D366;
  animation: whatsapp-ring 2s ease-out infinite;
  pointer-events: none;
}

/* === Tooltip calendrier === */
.calendar-tooltip {
  position: absolute;
  background: var(--color-dark);
  color: var(--color-light);
  font-family: 'DM Sans', sans-serif;
  font-size: 13px;
  padding: 8px 14px;
  border-radius: 8px;
  white-space: nowrap;
  pointer-events: none;
  z-index: 10;
  opacity: 0;
  transition: opacity 0.2s;
  border: 1px solid rgb(var(--c-gold) / 0.3);
}

/* === Responsive mobile nav === */
@media (max-width: 640px) {
  .mobile-nav-link {
    font-size: 20px;
    padding-bottom: 12px;
  }
}

/* === MOBILE COMPACT PREMIUM === */
@media (max-width: 640px) {
  /* --- Header compact --- */
  #main-header .h-14 { height: 50px !important; }
  #main-header img { height: 32px !important; }

  /* --- Preloader always centered --- */
  #preloader { display: flex !important; align-items: center !important; justify-content: center !important; }
  #preloader .text-3xl { font-size: 24px !important; }
  #preloader .text-2xl { font-size: 20px !important; }

  /* --- Hamburger always visible --- */
  #hamburger { display: flex !important; opacity: 1 !important; visibility: visible !important; }

  /* --- Filters: horizontal scroll, no wrap --- */
  #omra-filters { flex-wrap: nowrap !important; justify-content: flex-start !important; margin-bottom: 1rem !important; }
  #omra-filters .filter-btn { white-space: nowrap; font-size: 12px !important; padding: 6px 12px !important; flex-shrink: 0; }

  /* --- Cards: hide description on mobile, keep hotels --- */
  #omra-grid .offre-card p.hidden.sm\:block { display: none !important; }
  /* Show hotel details but compact */
  #omra-grid .offre-card .card-meta-details { margin-bottom: 2px !important; }
  #omra-grid .offre-card .card-meta-details .text-sm { font-size: 11px !important; }
  /* Hide image overlays in horizontal card layout (keep promo badge) */
  #omra-grid .offre-card .relative.overflow-hidden > .absolute.inset-0 { display: none !important; }
  #omra-grid .offre-card .relative.overflow-hidden > .absolute.top-0 { display: none !important; }
  #omra-grid .offre-card .relative.overflow-hidden > .absolute.bottom-4 { display: none !important; }
  /* Reposition promo badge for horizontal layout */
  #omra-grid .offre-card .relative.overflow-hidden > .absolute.top-12 { top: 4px !important; right: 4px !important; }
  #omra-grid .offre-card .relative.overflow-hidden > .absolute.top-12 span { font-size: 10px !important; padding: 2px 6px !important; }
  /* Hide badge-depart row */
  #omra-grid .offre-card .badge-depart { font-size: 10px !important; padding: 2px 6px !important; }
  /* Border-t separator thinner */
  #omra-grid .offre-card .border-t { border: none !important; padding-top: 4px !important; }
  /* Equal height cards */
  #omra-grid { align-items: stretch !important; }
  #omra-grid .offre-card { min-height: 140px !important; }

  /* --- Floating buttons smaller on mobile --- */
  #whatsapp-float { width: 44px !important; height: 44px !important; bottom: 1.5rem !important; right: 1rem !important; }
  #whatsapp-float svg { width: 22px !important; height: 22px !important; }
  #whatsapp-float .whatsapp-pulse { display: none !important; }
  #back-to-top { width: 36px !important; height: 36px !important; bottom: 1.5rem !important; right: 4.5rem !important; }
  #back-to-top svg { width: 16px !important; height: 16px !important; }
  /* Theme switcher aligned with WhatsApp */
  #ts-panel { bottom: 1.5rem !important; left: 1rem !important; }
  #ts-panel #ts-trigger { width: 40px !important; height: 40px !important; }

  /* --- Section spacing compact --- */
  section { padding-top: 2.5rem !important; padding-bottom: 2.5rem !important; }
  section .mb-16, section .mb-14, section .mb-12 { margin-bottom: 1rem !important; }
  section .mb-8, section .mb-10 { margin-bottom: 0.75rem !important; }
  section .py-16, section .py-20 { padding-top: 2rem !important; padding-bottom: 2rem !important; }
  .gap-8 { gap: 1rem !important; }
  .gap-6 { gap: 0.75rem !important; }
  .space-y-5 > * + * { margin-top: 0.6rem !important; }

  /* --- Typography compact --- */
  body, .font-dm { font-size: 14px !important; line-height: 1.5 !important; }
  p { margin-bottom: 0.4rem; }
  h1, .text-4xl, .text-5xl, .text-6xl { font-size: 26px !important; line-height: 1.15 !important; }
  h2, .text-3xl { font-size: 20px !important; line-height: 1.2 !important; }
  h3, .text-2xl, .text-xl { font-size: 15px !important; line-height: 1.3 !important; }
  .text-lg { font-size: 14px !important; }
  .text-sm { font-size: 12px !important; }
  .text-xs { font-size: 11px !important; }

  /* --- Cards compact (only in 2-col grids) --- */
  #featured-grid .offre-card,
  #omra-grid .offre-card { border-radius: 12px !important; overflow: hidden; display: grid !important; grid-template-columns: 120px 1fr !important; }
  #featured-grid .offre-card .relative.overflow-hidden,
  #omra-grid .offre-card .relative.overflow-hidden { max-height: none !important; height: 100% !important; aspect-ratio: unset !important; }
  #featured-grid .offre-card img.card-img,
  #featured-grid .offre-card .relative.overflow-hidden img,
  #omra-grid .offre-card img.card-img,
  #omra-grid .offre-card .relative.overflow-hidden img { max-height: none !important; height: 100% !important; aspect-ratio: unset !important; object-fit: cover !important; width: 100% !important; }
  #omra-grid .offre-card .p-6,
  #omra-grid .offre-card .p-5 { padding: 10px !important; }
  #featured-grid .offre-card .p-6,
  #featured-grid .offre-card .p-5 { padding: 10px !important; }
  #omra-grid .offre-card h3,
  #featured-grid .offre-card h3 { font-size: 14px !important; margin-bottom: 2px !important; }
  #omra-grid .offre-card .text-2xl,
  #featured-grid .offre-card .text-2xl { font-size: 16px !important; }
  #omra-grid .offre-card .mb-4,
  #omra-grid .offre-card .mb-5,
  #omra-grid .offre-card .mb-3,
  #featured-grid .offre-card .mb-4,
  #featured-grid .offre-card .mb-5 { margin-bottom: 4px !important; }
  #omra-grid .offre-card .pt-4,
  #featured-grid .offre-card .pt-4 { padding-top: 6px !important; }
  #omra-grid .offre-card .gap-2,
  #featured-grid .offre-card .gap-2 { gap: 2px !important; }

  /* --- Images compact in 2-col grids only --- */
  /* (featured-grid now uses horizontal layout like omra-grid) */

  /* --- Visa cards / feature cards compact --- */
  .visa-card { padding: 14px 12px !important; border-radius: 12px !important; }
  .feature-card { padding: 14px 12px !important; border-radius: 10px !important; }
  .avis-card { padding: 12px !important; }

  /* --- Icon circles reduced --- */
  .w-24.h-24 { width: 4rem !important; height: 4rem !important; }
  .w-16.h-16 { width: 3rem !important; height: 3rem !important; }
  .w-20.h-20 { width: 3.5rem !important; height: 3.5rem !important; }

  /* --- CTA compact --- */
  .btn-gold { padding: 8px 18px !important; font-size: 13px !important; min-height: 38px !important; }
  .btn-outline { padding: 8px 18px !important; font-size: 13px !important; min-height: 38px !important; }
  a[class*="btn-gold"].text-lg { font-size: 14px !important; padding: 10px 20px !important; min-height: 40px !important; }

  /* --- Grid: show 2 cards side by side for card grids only --- */
  .grid.grid-cols-1.md\:grid-cols-2.gap-6,
  .grid.grid-cols-1.md\:grid-cols-3.gap-6,
  .grid.grid-cols-2 {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
  }
  #featured-grid,
  #omra-grid {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
  #voyages-grid {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
  #voyages-home-grid,
  #combines-home-grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  /* Home Omra ("Nos offres"): single-column vertical stack, no carousel on mobile */
  #featured-grid {
    flex-direction: column !important;
    transform: none !important;
    gap: 16px !important;
  }
  #featured-grid > div {
    width: 100% !important;
    flex-shrink: 1 !important;
  }
  #featured-grid > div:nth-child(n+5) { display: none !important; }
  #prog-prev, #prog-next { display: none !important; }
  #featured-grid .offre-card {
    display: block !important;
    grid-template-columns: none !important;
  }
  #featured-grid .offre-card .relative.overflow-hidden {
    height: auto !important;
    aspect-ratio: unset !important;
  }
  #featured-grid .offre-card img.card-img {
    height: auto !important;
    aspect-ratio: 4 / 3 !important;
  }
  #featured-grid .offre-card .p-5 { padding: 16px !important; }
  #featured-grid .offre-card h3 { font-size: 18px !important; }
  #featured-grid .offre-card .text-2xl { font-size: 22px !important; }

  /* --- Hero compact --- */
  #hero, [id="hero"], section:first-of-type[class*="min-h-screen"] {
    min-height: 70vh !important;
  }
  .hero-title { font-size: 28px !important; margin-bottom: 0.5rem !important; }
  .hero-subtitle { font-size: 14px !important; margin-bottom: 0.5rem !important; }
  .hero-citation { font-size: 14px !important; margin-bottom: 1rem !important; }
  .hero-cta-wrap { gap: 8px !important; }
  .hero-cta { padding: 10px 20px !important; font-size: 14px !important; }

  /* --- Tarif cards compact --- */
  .tarif-card { padding: 10px 8px !important; }
  .tarif-card p.font-dm { font-size: 11px !important; }
  .tarif-badge { font-size: 9px !important; padding: 2px 6px !important; }

  /* --- Reduce nav-section sticky bar --- */
  nav[aria-label="Navigation sections"] { padding: 6px 0 !important; }
  nav[aria-label="Navigation sections"] a { font-size: 11px !important; padding: 4px 8px !important; }

  /* --- Footer compact --- */
  footer { padding-top: 1.5rem !important; padding-bottom: 1rem !important; }
  footer .grid { gap: 1rem !important; }
  footer nav a,
  footer a[href^="tel"],
  footer a[href^="mailto"] {
    min-height: 38px;
    display: inline-flex;
    align-items: center;
    font-size: 13px;
  }
  footer .flex.gap-3 a[aria-label] { width: 36px; height: 36px; }

  /* --- WhatsApp float smaller --- */
  .fixed.bottom-6.right-6, [class*="fixed"][class*="bottom-"] a[href*="wa.me"] {
    width: 48px !important; height: 48px !important;
  }

  /* --- Boarding pass / vol section compact --- */
  .vol-toggle .px-5 { padding-left: 10px !important; padding-right: 10px !important; }
  .vol-toggle .py-4 { padding-top: 8px !important; padding-bottom: 8px !important; }

  /* --- Badges smaller --- */
  .badge-depart { font-size: 10px !important; padding: 2px 8px !important; }

  /* --- Stats / counters --- */
  .counter { font-size: 28px !important; }
  
  /* --- General reductions --- */
  .max-w-5xl, .max-w-6xl, .max-w-7xl { padding-left: 12px !important; padding-right: 12px !important; }
  .px-4 { padding-left: 12px !important; padding-right: 12px !important; }
  .rounded-2xl { border-radius: 12px !important; }
  .shadow-2xl, .shadow-\[0_8px_32px_-4px_rgba\(3\,105\,161\,0\.15\)\] { box-shadow: 0 4px 16px rgba(0,0,0,0.08) !important; }
}

/* === Visa carousel mobile === */
/* Hide scrollbar on visa carousel */
#visa-carousel-track::-webkit-scrollbar { display: none; }
#visa-carousel-track { -ms-overflow-style: none; scrollbar-width: none; }
@media (min-width: 768px) {
  .visa-carousel-track .visa-card {
    min-width: auto;
    margin-right: 0;
    flex-shrink: 1;
  }
}

/* === Pourquoi nous choisir — 2 cols mobile === */
@media (max-width: 1023px) {
  .pourquoi-grid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
  }
  .pourquoi-grid .arrow-sep { display: none !important; }
  .pourquoi-grid .text-center.group { text-align: center; }
  .pourquoi-grid .text-center.group h3 { font-size: 14px; }
  .pourquoi-grid .text-center.group p { font-size: 12px; }
  .pourquoi-grid .w-24.h-24 { width: 3.5rem !important; height: 3.5rem !important; }
  .pourquoi-grid .mb-6 { margin-bottom: 0.5rem !important; }
}

/* === AOS fallback — rend visible si AOS JS ne charge pas === */
html:not(.aos-init) [data-aos] {
  opacity: 1 !important;
  transform: none !important;
}

/* ================================================================
   DISCOUNT THEME — Gradient System (teal-navy)
   Couleurs extraites de omradiscount.fr :
   Navy  #143D61 → Teal #0D7377  (standard)
   Brun  #8B7355 → Or   #BC9B46  (gold)
   ================================================================ */

[data-theme="discount"] {
  --grd-main: linear-gradient(180deg, #143D61 0%, #0D7377 100%);
  --grd-135:  linear-gradient(135deg, #143D61 0%, #0D7377 100%);
  --grd-110:  linear-gradient(110deg, #143D61 0%, #0D7377 100%);
  --grd-rev:  linear-gradient(180deg, #0D7377 0%, #143D61 100%);
  --grd-gold: linear-gradient(135deg, #8B7355 0%, #BC9B46 100%);
  --grd-deep: linear-gradient(180deg, #0A2E47 0%, #143D61 100%);
}

/* --- Solid dark backgrounds → teal-navy gradient --- */
[data-theme="discount"] .bg-dark {
  background: var(--grd-main) !important;
}

/* --- Solid primary backgrounds → teal gradient --- */
[data-theme="discount"] .bg-primary {
  background: var(--grd-110) !important;
}

/* --- Inline style dark backgrounds --- */
[data-theme="discount"] [style*="background-color: var(--color-dark)"] {
  background: var(--grd-main) !important;
}

[data-theme="discount"] [style*="background-color: var(--color-primary)"] {
  background: var(--grd-110) !important;
}

/* --- Footer — deeper navy gradient --- */
[data-theme="discount"] footer {
  background: var(--grd-deep) !important;
}

/* --- Nav scrolled — transparent with blur --- */
[data-theme="discount"] .nav-scrolled {
  background: rgb(var(--c-dark) / 0.15) !important;
}

/* --- Preloader --- */
[data-theme="discount"] #preloader {
  background: var(--grd-main) !important;
}

/* --- Buttons — hover gets gradient --- */
[data-theme="discount"] .btn-gold:hover {
  background: var(--grd-135);
}

/* --- Toggle / Step buttons active --- */
[data-theme="discount"] .toggle-btn.active {
  background: var(--grd-gold);
  border-color: #BC9B46;
}

[data-theme="discount"] .steps-indicator .step.active {
  background: var(--grd-135);
  border-color: #0D7377;
}

/* --- Feature icons --- */
[data-theme="discount"] .feature-icon {
  background: linear-gradient(135deg, rgba(13,115,119,0.15), rgba(20,61,97,0.08));
  border-color: rgba(13,115,119,0.25);
}
[data-theme="discount"] .feature-card:hover .feature-icon {
  background: var(--grd-gold);
}

/* --- Badge populaire --- */
[data-theme="discount"] .badge-populaire {
  background: var(--grd-gold);
}

/* --- Calendar day hover --- */
[data-theme="discount"] .calendar-day.has-depart:hover {
  background: var(--grd-135);
}

/* --- Tooltip --- */
[data-theme="discount"] .calendar-tooltip {
  background: linear-gradient(135deg, #143D61, #0D7377);
}

/* --- Tarif cards (omra pages) --- */
[data-theme="discount"] .tarif-card {
  background: linear-gradient(180deg, rgba(20,61,97,0.12), rgba(13,115,119,0.08)) !important;
  border-color: rgba(13,115,119,0.2) !important;
}
[data-theme="discount"] .tarif-card:hover {
  background: linear-gradient(180deg, rgba(20,61,97,0.2), rgba(13,115,119,0.15)) !important;
  border-color: rgba(188,155,70,0.3) !important;
}

/* --- Room option selected --- */
[data-theme="discount"] .room-option.selected,
[data-theme="discount"] .room-option[style*="border-color"] {
  background: linear-gradient(135deg, rgba(20,61,97,0.08), rgba(13,115,119,0.05));
}

/* --- Scrollbar --- */
[data-theme="discount"] ::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #143D61, #0D7377);
}

/* --- Marquee background --- */
[data-theme="discount"] .bg-gold {
  background: var(--grd-gold) !important;
}

/* --- Offre cards subtle gradient border on hover --- */
[data-theme="discount"] .offre-card {
  border-color: rgba(13,115,119,0.1);
}
[data-theme="discount"] .offre-card:hover {
  border-color: rgba(13,115,119,0.25);
}

/* --- Visa cards --- */
[data-theme="discount"] .visa-card {
  border-color: rgba(13,115,119,0.1);
}
[data-theme="discount"] .visa-card:hover {
  border-color: rgba(13,115,119,0.3);
}

/* --- Semi-transparent overlays → gradient overlays --- */
[data-theme="discount"] .bg-gradient-to-b.from-dark\/90 {
  background: linear-gradient(to bottom, rgba(20,61,97,0.9), rgba(13,115,119,0.4), rgba(20,61,97,0.8)) !important;
}
[data-theme="discount"] .bg-gradient-to-b.from-dark\/80 {
  background: linear-gradient(to bottom, rgba(20,61,97,0.8), rgba(13,115,119,0.35), rgba(20,61,97,0.7)) !important;
}
[data-theme="discount"] .bg-gradient-to-t.from-dark\/80 {
  background: linear-gradient(to top, rgba(20,61,97,0.8), rgba(13,115,119,0.3), transparent) !important;
}

/* --- Avis cards subtle tint --- */
[data-theme="discount"] .avis-card:hover {
  border-color: rgba(13,115,119,0.15);
}

/* ===== MOBILE RESPONSIVE — tablet range only ===== */
@media (min-width: 641px) and (max-width: 767px) {
  .offre-card .card-img,
  .offre-card .aspect-\[4\/3\] {
    aspect-ratio: 16 / 9 !important;
  }
  .offre-card > div:last-child {
    padding: 14px 16px 16px;
  }
  .offre-card h3 { font-size: 16px; }
  .offre-card .text-2xl { font-size: 20px; }
}