/* =========================================================
   BASE / POLICE
   ========================================================= */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600&display=swap');

* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { height: 100%; }
body {
  font-family: 'Poppins', sans-serif;
  background-color: #f8f0e8; /* Beige chaud global */
  color: #333;
  line-height: 1.6;
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
a:hover { text-decoration: underline; }

/* Accessibilité */
.sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 1px, 1px); white-space: nowrap; border: 0;
}

/* =========================================================
   HERO + TOPBAR
   ========================================================= */
.hero {
  position: relative; width: 100%; height: 50vh;
  background-position: center; background-size: cover; background-repeat: no-repeat;
  display: flex; align-items: center; justify-content: center; text-align: center;
}
.hero::after { content: ""; position: absolute; inset: 0; background: rgba(0,0,0,.35); }
/* ⬇️ Empêche l’overlay de bloquer le carrousel */
.hero::after { pointer-events: none; }

.hero-title {
  position: relative; z-index: 1; color: #fff;
  font-size: 2.6rem; line-height: 1.2; padding: 0 16px;
  text-shadow: 2px 2px 6px rgba(0,0,0,.7);
}

/* Topbar (sur l’image) */
.hero-topbar {
  position: absolute; top: 12px; left: 0; right: 0;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 0 20px; z-index: 10;
}

/* Liens topbar/nav: blanc, jamais en "boutons" */
#lang-switcher a, .nav-hero a {
  color: #fff !important; font-weight: bold; text-shadow: 1px 1px 3px rgba(0,0,0,.6) !important;
  background: transparent !important; border: 0 !important; border-radius: 0 !important;
  padding: 0 !important; box-shadow: none !important; outline: none !important; display: inline !important;
}
.hero-topbar a:focus, .hero-topbar a:focus-visible,
.nav-hero a:focus, .nav-hero a:focus-visible { outline: none !important; box-shadow: none !important; }
.hero-topbar a::before, .hero-topbar a::after,
.nav-hero a::before, .nav-hero a::after { content: none !important; }

/* Hard-clean : si un "pillage" bleu venait d'un élément fantôme/premier enfant */
.nav-hero > *:first-child:empty,
.nav-hero > *:first-child[aria-hidden="true"],
.nav-hero > *:first-child[href="#"] { display: none !important; }
.nav-hero > *:first-child::before, .nav-hero > *:first-child::after { content: none !important; }

/* Burger : barres blanches, mobile uniquement */
.burger { display: none; appearance: none; background: transparent; border: 0; padding: .5rem; cursor: pointer; }
.burger span { width: 26px; height: 2px; background: #fff; display: block; transition: transform .2s ease, opacity .2s ease; }
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* =========================================================
   COULEUR DE FOND (beige) POUR LES BLOCS
   ========================================================= */
body, main, section, .container, .testimonials, .testimonial-card, .tour-card .content {
  background-color: #f8f0e8 !important;
}

/* =========================================================
   EXCEPTIONS BLANCHES (réservation, formulaires)
   ========================================================= */
.reservation-container {
  display: flex; flex-wrap: wrap; gap: 24px;
  max-width: 1000px; margin: -60px auto 40px;
  background: #fff !important; border-radius: 18px;
  box-shadow: 0 8px 20px rgba(0,0,0,.15);
  padding: 28px; align-items: flex-start; position: relative; z-index: 3;
}
.reservation-form { flex: 1 1 100%; min-width: 280px; display: flex; flex-direction: column; gap: 14px; }
.reservation-form label { font-weight: bold; margin-top: 4px; }
.reservation-form input, .reservation-form textarea, .reservation-form button {
  padding: 10px; border-radius: 8px; border: 1px solid #ccc; font-size: 1rem;
}
.reservation-form button {
  background-color: #007bff; color: #fff; border: none; cursor: pointer; font-weight: bold;
  transition: background .25s ease;
}
.reservation-form button:hover { background-color: #0056b3; }

/* Formulaire générique (laisser un commentaire) */
form {
  background: #fff !important; border-radius: 14px; padding: 20px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.08);
  display: grid; gap: 20px; max-width: 800px; margin: 0 auto;
}
form label { margin-bottom: 15px; font-weight: bold; }
form input, form textarea, form select, form button {
  width: 100%; padding: 14px; border: 1px solid #ccc; border-radius: 8px; font-size: 16px;
}
form textarea { height: 150px; }
form button {
  background-color: #007bff; color: #fff; border: none; cursor: pointer; font-weight: bold;
  transition: background .25s ease; padding: 16px 20px;
}
form button:hover { background-color: #0056b3; }

/* Sélecteur d’étoiles (demi-étoiles) */
.star-rating { direction: rtl; unicode-bidi: bidi-override; display: inline-block; line-height: 1; }
.star-rating input { display: none; }
.star-rating label { display: inline-block; position: relative; cursor: pointer; width: 26px; height: 26px; margin: 0 2px; vertical-align: middle; }
.star-rating label::before { content: "★"; font-size: 26px; color: #ddd; position: absolute; left: 0; top: 0; }
.star-rating label::after { content: "★"; font-size: 26px; color: #ffb400; position: absolute; left: 0; top: 0; opacity: 0; width: 100%; overflow: hidden; }
.star-rating label.half::after { width: 50%; }
.star-rating label:hover::after, .star-rating label:hover ~ label::after,
.star-rating input:checked ~ label::after { opacity: 1; }
.star-rating label:focus-visible { outline: 2px solid #ffd54f; outline-offset: 2px; }

/* =========================================================
   TOURS
   ========================================================= */
#excursions { max-width: 1200px; margin: 50px auto; padding: 0 20px; }

.tour-card { display: flex; align-items: center; gap: 20px; margin-bottom: 60px; }
.tour-card.left { flex-direction: row; }
.tour-card.right { flex-direction: row-reverse; }

/* — bloc image — */
.tour-swiper {
  width: 50%; height: 350px; border-radius: 10px; overflow: hidden;
  /* Renforts carrousel */
  position: relative; z-index: 2; touch-action: pan-y;
}
.tour-swiper .swiper-wrapper { height: 100%; }
.tour-swiper .swiper-slide { width: 100% !important; display: flex; }
.tour-swiper img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Flèches Swiper */
.swiper-button-next, .swiper-button-prev {
  color: #fff !important; text-shadow: 1px 1px 5px rgba(0,0,0,.6);
}
/* S’assure que les flèches sont cliquables au-dessus de tout */
.tour-swiper .swiper-button-next,
.tour-swiper .swiper-button-prev { z-index: 5; pointer-events: auto; }

.swiper-button-next::after, .swiper-button-prev::after { font-size: 24px; }

/* Contenu tours */
.tour-card .content { width: 50%; max-width: 680px; padding: 16px 18px; border-radius: 10px; }
.tour-card h3.tour-title { font-size: clamp(26px, 3.2vw, 36px); line-height: 1.15; margin: 0 0 10px; letter-spacing: .2px; }
.tour-lead { font-size: clamp(16px, 1.8vw, 18px); line-height: 1.7; color: rgba(0,0,0,.78); margin: 10px 0 16px; max-width: 62ch; }

/* Bloc "Inclus" (barre orange + ✓) */
.tour-includes { position: relative; margin: 14px 0 12px; padding-left: 14px; }
.tour-includes::before {
  content: ""; position: absolute; left: 0; top: 4px; bottom: 4px; width: 4px; border-radius: 4px;
  background: linear-gradient(180deg, #f59e0b, #f97316);
}
.includes-title { margin: 0 0 8px; font-size: 14px; letter-spacing: .4px; text-transform: uppercase; opacity: .8; }
.includes-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px 14px; grid-template-columns: 1fr; }
.includes-list li { position: relative; padding-left: 26px; line-height: 1.6; }
.includes-list li::before { content: "✓"; position: absolute; left: 0; top: 0; font-weight: 700; transform: translateY(1px); opacity: .9; }
@media (min-width: 900px){ .includes-list { grid-template-columns: 1fr 1fr; } }

/* Infos pratiques (texte simple, label en gras) */
.tour-chips { list-style: none; padding: 0; margin: 12px 0 16px; display: flex; flex-wrap: wrap; gap: 16px; }
.tour-chips .chip {
  background: none !important; border: none !important; padding: 0 !important;
  border-radius: 0 !important; box-shadow: none !important; font-size: 16px; line-height: 1.6;
}
.tour-chips .chip strong { font-weight: 700; }

/* CTA rangée */
.cta-row { display: flex; flex-wrap: wrap; gap: 12px; margin: 12px 0 8px; align-items: center; clear: both; }

/* Boutons génériques (hors topbar) */
.btn, a.btn, button.btn,
.btn-secondary, .btn-dark, .btn-outline, .btn-outline-dark, .btn-black, .btn-default,
.btn-primary {
  background: #2563eb !important; color: #fff !important;
  border: 1px solid rgba(0,0,0,.2) !important; border-radius: 12px !important;
  font-weight: 700 !important; padding: 12px 18px !important;
  display: inline-flex !important; align-items: center; justify-content: center;
  line-height: 1; text-decoration: none !important; cursor: pointer;
  transition: transform .06s ease, filter .2s ease;
}
.btn:hover, a.btn:hover, button.btn:hover,
.btn-secondary:hover, .btn-dark:hover, .btn-outline:hover, .btn-outline-dark:hover, .btn-black:hover, .btn-default:hover,
.btn-primary:hover { filter: brightness(1.05); }
.btn:active, a.btn:active, button.btn:active,
.btn-secondary:active, .btn-dark:active, .btn-outline:active, .btn-outline-dark:active, .btn-black:active, .btn-default:active,
.btn-primary:active { transform: translateY(1px); }

/* Zone "transport" : robustesse anti-chevauchement */
.transport-text p { margin: 0 0 12px; }
.transport-text p > a.btn-primary { display: inline-flex; margin-right: 12px; white-space: nowrap; }
.transport-text p + p { margin-top: 10px; }

/* Corrige les flèches bloquées */
.tour-swiper .swiper-button-next,
.tour-swiper .swiper-button-prev {
  z-index: 10 !important;
  pointer-events: auto !important;
  color: #fff !important;
  text-shadow: 0 0 6px rgba(0,0,0,0.65);
}

.tour-swiper .swiper-button-next::after,
.tour-swiper .swiper-button-prev::after {
  font-size: 26px !important;
  font-weight: bold;
}

/* =========================================================
   AVIS DES VOYAGEURS
   ========================================================= */
.testimonials { background: #f8f0e8 !important; padding: 40px 20px; margin-top: 40px; }
.testimonials .container { max-width: 1000px; margin: 0 auto; }
.testimonials h2 { text-align: center; margin-bottom: 22px; font-size: 28px; }
.testimonials-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; width: 100%; }

.testimonial-card {
  background: #fff !important; border: 1px solid #eee; border-radius: 12px;
  padding: 30px; box-shadow: 0 4px 14px rgba(0,0,0,.06);
  display: flex; flex-direction: column; justify-content: flex-start; min-height: 250px;
}

.t-stars { display: inline-flex; gap: 4px; align-items: center; margin-bottom: 8px; }
.t-stars svg { width: 18px; height: 18px; }

.t-head { display: grid; grid-template-columns: auto 1fr; gap: 6px 10px; align-items: center; margin-bottom: 10px; }
.t-name { font-weight: 600; }
.t-meta { color: #666; font-size: 14px; }

.testimonial-card .t-text { font-size: 16px; line-height: 1.7; color: #333; white-space: pre-wrap; word-break: break-word; }
.testimonial-card .t-text.clamp { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; overflow: hidden; }
.testimonial-card.expanded .t-text { -webkit-line-clamp: unset; display: block; overflow: visible; }

.testimonial-card .t-toggle { margin-top: 8px; background: none; border: 0; color: #007bff; font: inherit; cursor: pointer; padding: 0; }
.testimonial-card .t-toggle:hover { text-decoration: underline; }

/* =========================================================
   WHATSAPP FAB
   ========================================================= */
.whatsapp-fab {
  position: fixed; right: 16px; bottom: 16px; width: 56px; height: 56px; border-radius: 50%;
  box-shadow: 0 6px 20px rgba(0,0,0,.25); overflow: hidden; background: #25D366;
  display: flex; align-items: center; justify-content: center; z-index: 50;
}
.whatsapp-fab img { width: 56px; height: 56px; display: block; }

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 900px){
  .tour-card { flex-direction: column !important; }
  .tour-swiper, .tour-card .content { width: 100%; }
  .hero-title { font-size: 2.1rem; }
}
@media (max-width: 768px){
  .reservation-container { margin: -40px 16px 30px; padding: 20px; }
  button { width: 100%; }
}

/* Burger uniquement sur mobile */
@media (max-width: 767px){
  .burger { display: grid !important; gap: 4px; }
}
/* Masquer burger sur desktop */
@media (min-width: 768px){
  .burger { display: none !important; }
}

/* Réduire les animations si préférence utilisateur */
@media (prefers-reduced-motion: reduce){
  .swiper, .tour-swiper { animation: none !important; }
}

/* ====== Taille des onglets de navigation (toutes pages) ====== */
.nav-hero{
  font-size: clamp(17px, 2.0vw, 22px);
  gap: 18px;
}
.nav-hero a{
  font-weight: 700;
  line-height: 1.2;
}
@media (max-width: 900px){
  .nav-hero{ font-size: 18px; }
}

/* — forcer photo + texte côte à côte en desktop — */
.tour-card{
  display:flex;
  flex-wrap:wrap;
  align-items:flex-start;
}
.tour-swiper{
  flex:0 0 48%;
  max-width:48%;
  height:350px;
  border-radius:10px;
  overflow:hidden;
}
.tour-card .content{
  flex:0 0 48%;
  max-width:48%;
  padding:15px;
  border-radius:10px;
  max-width:680px;
}
/* “Inclus” et “Meta” (Durée/Langues/Tarif + Réserver) sous l’ensemble */
.tour-includes{
  flex:0 0 100%;
  max-width:100%;
  order:3;
  margin-top:10px;
}
.tour-meta{
  flex:0 0 100%;
  max-width:100%;
  order:4;
  display:flex;
  align-items:center;
  gap:18px;
  flex-wrap:wrap;
  margin-top:6px;
}
/* Alternance gauche/droite conservée via .right (déjà présent) */
.tour-card.right{ flex-direction:row-reverse; }
/* Mobile : on repasse en colonne */
@media (max-width:900px){
  .tour-swiper,
  .tour-card .content{
    flex:0 0 100%;
    max-width:100%;
  }
}

/* Sécurité globale : ne pas laisser d’overlays capter les clics */
[class*="gradient"], [class*="overlay"], [class*="mask"] { pointer-events: none; }

/* --- Forcer les flèches Swiper cliquables sur la page des tours --- */
.tour-swiper { position: relative; isolation: isolate; }
.tour-swiper .swiper-slide { width: 100% !important; display: flex; }
.tour-swiper .swiper-button-next,
.tour-swiper .swiper-button-prev {
  z-index: 9999 !important;
  pointer-events: auto !important;
  color: #fff !important;
  text-shadow: 0 0 6px rgba(0,0,0,.65);
}
.tour-swiper .swiper-button-next::after,
.tour-swiper .swiper-button-prev::after {
  font-size: 26px !important;
}

/* Si un overlay (bandeau/masque) bloque des clics au-dessus :
   on neutralise explicitement les overlays visuels */
.hero::after { pointer-events: none !important; }

.site-header{
  position:fixed; top:0; left:0; right:0; z-index:50;
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 18px;
}
.brand{display:inline-flex; align-items:center}
.logo{height:44px; width:auto; display:block}
@media (max-width:640px){ .logo{height:32px} }

.main-nav{display:flex; align-items:center; gap:20px}
.main-nav a{font-weight:600; text-decoration:none}

/* Drapeaux à droite */
.lang-switcher{display:flex; gap:8px; margin-left:12px}
.lang-switcher a{font-size:20px; line-height:1; padding:6px; border-radius:6px}
.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}

/* Par défaut (sur la photo hero) : logo blanc + liens clairs */
.logo--dark{display:none}
.header-on-hero .main-nav a{color:#fff; text-shadow:0 1px 2px rgba(0,0,0,.35)}

/* Au scroll ou sur pages sans hero : logo couleur + liens foncés */
.site-header.scrolled .logo--light{display:none}
.site-header.scrolled .logo--dark{display:block}
.site-header.scrolled .main-nav a{color:#1a1a1a}

/* Option lisibilité drapeaux sur la photo */
.header-on-hero .lang-switcher a{background:rgba(0,0,0,.25); backdrop-filter:blur(4px)}
.site-header.scrolled .lang-switcher a{background:transparent}

.logo-container {
  display: flex;
  align-items: center;
  gap: 10px;
}

.logo {
  height: 40px; /* ajuste la taille */
  width: auto;
}

/* Par défaut, afficher le logo foncé */
.logo-dark { display: block; }
.logo-light { display: none; }

/* Quand le header est sur une image sombre */
.header-on-image .logo-dark { display: none; }
.header-on-image .logo-light { display: block; }

.site-title {
  font-size: 1.3rem;         /* même taille que sur l’accueil */
  font-weight: 600;          /* en gras */
  line-height: 1.2;
  color: inherit;
}

.header-on-hero .site-title {
  color: #fff !important;
  text-shadow: 0 1px 2px rgba(0,0,0,.35);
}

.site-header.scrolled .site-title {
  color: #0f172a !important;
  text-shadow: none;
}

/* --- BURGER: visible en mobile, caché en desktop --- */
@media (max-width: 900px){
  header.site-header .burger{display:inline-flex !important;}
  header.site-header .main-nav{display:none !important;}
}

/* Couleur lisible : blanc sur la hero, noir après scroll */
header.site-header.header-on-hero .burger{ color:#fff; }
header.site-header.scrolled .burger{ color:#0f172a; }

/* Toujours cliquable au-dessus de tout */
header.site-header{ z-index: 1000; }
header.site-header .burger{ z-index: 130; position: relative; }

/* BURGER: toujours visible en mobile, même si un autre CSS le cache */
@media (max-width: 900px){
  .site-header .burger{display:inline-flex !important;}
  .site-header .main-nav{display:none !important;}
}
/* couleur lisible (blanc sur la hero, noir après scroll) */
.site-header.header-on-hero .burger{color:#fff;}
.site-header.scrolled .burger{color:#0f172a;}
/* au-dessus des overlays + clics non bloqués */
.site-header{z-index:9999;}
.site-header .burger{position:relative; z-index:10001;}
.hero::after{pointer-events:none !important;}

/* Cache les drapeaux dans le header compact */
.site-header .lang-switcher {
  display: none;
}

/* Garde uniquement ceux dans le menu burger */
.mobile-menu .lang-switcher {
  display: flex !important;
  justify-content: center;
  margin-top: 12px;
  gap: 12px;
}

/* En mobile: logo seul */
@media (max-width: 768px) {
  .site-title { display: none; }
  .logo { height: 36px; }
}

/* Desktop: afficher les drapeaux */
.site-header .lang-switcher {
  display: flex;
  gap: 8px;
  margin-left: 12px;
}

/* ===== Header collant unifié ===== */
.site-header{
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1000;                       /* stable: assez haut mais pas absurde */
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 18px;
  transition: background .25s ease, box-shadow .25s ease, color .2s ease;
}

/* état après défilement */
.site-header.scrolled{
  background: rgba(255,255,255,.86);
  backdrop-filter: saturate(180%) blur(8px);
  box-shadow: 0 2px 10px rgba(0,0,0,.08);
}

/* espace sous le header fixe (évite que la hero passe dessous) */
.header-spacer{ height: 64px; }
@media (max-width:768px){ .header-spacer{ height: 56px; } }

/* visibilités burger / nav cohérentes */
@media (max-width:900px){
  .site-header .burger{ display:inline-flex !important; }
  .site-header .main-nav{ display:none !important; }
}
@media (min-width:901px){
  .site-header .burger{ display:none !important; }
}

/* lisibilité liens & drapeaux sur la hero */
.header-on-hero .main-nav a{ color:#fff; text-shadow:0 1px 2px rgba(0,0,0,.35); }
.site-header.scrolled .main-nav a{ color:#1a1a1a; text-shadow:none; }

/* drapeaux: visibles sur desktop; pour mobile, utiliser ceux du menu latéral */
.site-header .lang-switcher{ display:flex; gap:8px; margin-left:12px; }
@media (max-width:900px){ .site-header .lang-switcher{ display:none; } }

/* logos: ne garde qu’une convention (.logo--light / .logo--dark) */
.logo{ height:40px; width:auto; display:block; }
.logo--dark{ display:none; }
.site-header.scrolled .logo--light{ display:none; }
.site-header.scrolled .logo--dark{ display:block; }
.header-on-hero .site-title{ color:#fff; text-shadow:0 1px 2px rgba(0,0,0,.35); }
.site-header.scrolled .site-title{ color:#0f172a; text-shadow:none; }

/* l’overlay de la hero ne bloque jamais les clics */
.hero::after{ pointer-events:none !important; }

@media (max-width: 768px) {
  .testimonials-grid {
    display: flex;
    flex-direction: column;
    gap: 20px;
  }
}

/* Centrer le titre des commentaires */
.comment-form-title {
  text-align: center;
  margin-bottom: 20px;
}

/* Centrer le titre de la section commentaires */
.comment-section-title {
  text-align: center !important;
  width: 100%;
  display: block;
  margin: 0 auto 20px;
}

/* Force la position des flèches à l’intérieur de CHAQUE carrousel */
.tour-swiper .swiper-button-next{
  right: 10px;     /* ⬅️ explicite */
  left: auto;
  opacity: 1 !important;
  display: flex; align-items: center; justify-content: center;
}

.tour-swiper .swiper-button-prev{
  left: 10px;      /* ⬅️ explicite */
  right: auto;
  opacity: 1 !important;
  display: flex; align-items: center; justify-content: center;
}

.tour-swiper{ isolation: isolate; position: relative; }
.tour-swiper .swiper-button-next,
.tour-swiper .swiper-button-prev{ z-index: 9999 !important; pointer-events: auto !important; }

nav ul li a i.fab {
  font-size: 20px;   /* taille de l’icône */
  color: #fff;       /* couleur blanche */
  margin-left: 10px; /* petit espace avant l’icône */
  transition: color 0.3s;
}

nav ul li a i.fab:hover {
  color: #E1306C; /* rose Instagram au survol */
}