/* =====================================================================
   BÉNIN CULTURE TOURS — IDENTITÉ VISUELLE (v1)
   Ce fichier se charge APRÈS style.css et remplace seulement :
   couleurs, polices, forme des boutons, icône calendrier, bandeaux à croix.
   Il ne change ni la structure, ni les tailles, ni le JavaScript.
   Pour revenir à l'ancien look : retirer la ligne qui charge ce fichier.
   ===================================================================== */

@import url("https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,500..900&family=Figtree:wght@400;500;600;700&display=swap");

/* ---------- 1. Les couleurs et les polices ---------- */
:root {
  --terre-cuite: #CE5E44;
  --bouton: #C45140;
  --bouton-survol: #A8412F;
  --brun-cacao: #512D25;
  --chocolat: #3B2016;
  --ocre: #EA9D2F;
  --bronze: #A26119;
  --sable: #F6E9DA;
  --ivoire: #FAF7F0;
  --blanc: #FFFFFF;
  --anthracite: #2B2422;
  --discret: #7A5A50;

  --titre: "Fraunces", Georgia, "Times New Roman", serif;
  --texte: "Figtree", "Segoe UI", system-ui, sans-serif;

  --glass-shadow: rgba(59, 32, 22, 0.22);
  --pill-bg: rgba(246, 233, 218, 0.95);
  --nav-text: #512D25;
  --nav-text-active: #512D25;

  --icone-calendrier: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='5' width='17' height='15.5' rx='3'/%3E%3Cpath d='M8 3v4M16 3v4M3.5 10.2h17'/%3E%3Crect x='8' y='13.5' width='3' height='3' rx='.8' fill='black' stroke='none'/%3E%3C/svg%3E");

  --motif-croix: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='34' viewBox='0 0 60 34'%3E%3Cg fill='none' stroke='%23EA9D2F' stroke-width='1.6' stroke-linecap='round'%3E%3Cpath d='M2 3L28 31M28 3L2 31'/%3E%3Cpath d='M32 3L58 31M58 3L32 31'/%3E%3Cpath d='M45 9L53 17L45 25L37 17Z'/%3E%3C/g%3E%3C/svg%3E");
  --motif-croix-taille: 60px 34px;

  --ic-route: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3.5 20c3 0 3.4-13 7.4-13 3.3 0 2 7 5.3 7 3.3 0 2.3-7.4 5.3-7.4' fill='none' stroke='%23EA9D2F' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M3.5 20l-1.4 1.4M3.5 20l1.4 1.4' stroke='%23EA9D2F' stroke-width='1.5' stroke-linecap='round'/%3E%3Crect x='9.6' y='5.6' width='2.6' height='2.6' transform='rotate(45 10.9 6.9)' fill='%23EA9D2F'/%3E%3Crect x='19.8' y='4.6' width='2.6' height='2.6' transform='rotate(45 21.1 5.9)' fill='%23EA9D2F'/%3E%3C/svg%3E");
  --ic-cal: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='3.5' y='5' width='17' height='15.5' rx='3' fill='none' stroke='%23EA9D2F' stroke-width='1.8'/%3E%3Cpath d='M8 3v4M16 3v4M3.5 10.2h17' fill='none' stroke='%23EA9D2F' stroke-width='1.8' stroke-linecap='round'/%3E%3Crect x='8' y='13.5' width='3' height='3' rx='.8' fill='%23EA9D2F'/%3E%3C/svg%3E");
  --ic-decouvrir: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3.4v2.4' stroke='%23EA9D2F' stroke-width='1.8' stroke-linecap='round'/%3E%3Cpath d='M5.8 6.2l1.7 1.7M18.2 6.2l-1.7 1.7' stroke='%23EA9D2F' stroke-width='1.8' stroke-linecap='round'/%3E%3Cpath d='M5 15.5a7 7 0 0 1 14 0' fill='none' stroke='%23EA9D2F' stroke-width='1.9' stroke-linecap='round'/%3E%3Cpath d='M2.6 15.5h18.8' stroke='%23EA9D2F' stroke-width='1.9' stroke-linecap='round'/%3E%3C/svg%3E");
  --ic-valise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='3.2' y='8' width='17.6' height='12.4' rx='2.6' fill='none' stroke='%23EA9D2F' stroke-width='1.7'/%3E%3Cpath d='M9 8V6.2A1.7 1.7 0 0 1 10.7 4.5h2.6a1.7 1.7 0 0 1 1.7 1.7V8' fill='none' stroke='%23EA9D2F' stroke-width='1.7' stroke-linecap='round'/%3E%3Cpath d='M3.2 13.6h17.6' stroke='%23EA9D2F' stroke-width='1.7'/%3E%3Ccircle cx='12' cy='13.6' r='1.15' fill='%233B2016'/%3E%3C/svg%3E");
  --ic-drapeau: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.5 3.4v17.2' stroke='%23EA9D2F' stroke-width='1.8' stroke-linecap='round'/%3E%3Cpath d='M6.5 4.4c2-1.1 3.6-1.1 5.2 0 1.7 1.1 3.4 1.1 5.3 0v7c-1.9 1.1-3.6 1.1-5.3 0-1.6-1.1-3.2-1.1-5.2 0z' fill='none' stroke='%23EA9D2F' stroke-width='1.7' stroke-linejoin='round'/%3E%3C/svg%3E");
  --ic-medaillon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='8.6' fill='none' stroke='%23EA9D2F' stroke-width='1.7'/%3E%3Cpath d='M7 7l10 10M17 7L7 17' stroke='%23EA9D2F' stroke-width='1.6' stroke-linecap='round'/%3E%3Cpath d='M12 5.4L9.4 12 12 18.6 14.6 12z' fill='none' stroke='%23EA9D2F' stroke-width='1.4' stroke-linejoin='round'/%3E%3C/svg%3E");
  --ic-mesure: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 4.6L5.2 19.4h13.6z' fill='none' stroke='%23EA9D2F' stroke-width='1.7' stroke-linejoin='round'/%3E%3Ccircle cx='12' cy='4.6' r='1.5' fill='%23EA9D2F'/%3E%3Cpath d='M9.2 14.4h5.6' stroke='%233B2016' stroke-width='1.4' stroke-linecap='round'/%3E%3Cpath d='M12 4.6v3.4' stroke='%23EA9D2F' stroke-width='1.4' stroke-linecap='round'/%3E%3C/svg%3E");
  --ic-oiseau: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M2 13.5c2.2-4.2 4.6-4.2 6.8 0 1.6-3.4 3.6-3.4 5.2 0 1.6-3.4 3.6-3.4 5.2 0 2.2-4.2 4.6-4.2 6.8 0' fill='none' stroke='%23EA9D2F' stroke-width='1.9' stroke-linecap='round'/%3E%3C/svg%3E");
  --ic-citation: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 6.5h16v9.5H10l-3.4 3v-3H4z' fill='none' stroke='%23EA9D2F' stroke-width='1.8' stroke-linejoin='round'/%3E%3Cpath d='M8 11V9.3c0-.9.7-1.6 1.6-1.6M14 11V9.3c0-.9.7-1.6 1.6-1.6' stroke='%23EA9D2F' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
  --ic-faq: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='8.6' fill='none' stroke='%23EA9D2F' stroke-width='1.8'/%3E%3Cpath d='M9.4 9.6a2.6 2.6 0 1 1 3.9 2.3c-.9.6-1.3 1-1.3 2' fill='none' stroke='%23EA9D2F' stroke-width='1.8' stroke-linecap='round'/%3E%3Ccircle cx='12' cy='17' r='1' fill='%23EA9D2F'/%3E%3C/svg%3E");
  --ic-email: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='3' y='5.5' width='18' height='13' rx='2.4' fill='none' stroke='%23EA9D2F' stroke-width='1.7'/%3E%3Cpath d='M4 7l8 6.2L20 7' fill='none' stroke='%23EA9D2F' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --ic-tel: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 3.6c1.1-.4 1.9-.3 2.4.8l1 2.2c.4.9.1 1.6-.6 2.2l-1 .9c.7 2 2.1 3.4 4.1 4.1l.9-1c.6-.7 1.3-1 2.2-.6l2.2 1c1.1.5 1.2 1.3.8 2.4-.9 2.4-3.3 3.1-5.5 2.2-4-1.6-7-4.6-8.6-8.6-.9-2.2-.2-4.6 2.1-5.6z' fill='%23EA9D2F'/%3E%3C/svg%3E");
  --ic-pin: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 21s-6.8-6-6.8-11.3a6.8 6.8 0 1 1 13.6 0C18.8 15 12 21 12 21z' fill='none' stroke='%23EA9D2F' stroke-width='1.7' stroke-linejoin='round'/%3E%3Ccircle cx='12' cy='9.6' r='2.5' fill='%23EA9D2F'/%3E%3C/svg%3E");
  --ic-bed: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3.2 18.6V7' stroke='%23EA9D2F' stroke-width='1.7' stroke-linecap='round'/%3E%3Cpath d='M3.2 14.2h17.6v4.4M20.8 14.2v-2.4a2.8 2.8 0 0 0-2.8-2.8h-6.6v5.2' fill='none' stroke='%23EA9D2F' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3Ccircle cx='7.4' cy='11' r='1.7' fill='%23EA9D2F'/%3E%3C/svg%3E");
  --ic-fourchette: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.6 3.6v6.2M4.9 3.6v3.9a1.7 1.7 0 0 0 1.7 1.7v0a1.7 1.7 0 0 0 1.7-1.7V3.6M6.6 9.8v10.6' fill='none' stroke='%23EA9D2F' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M17.4 3.6c-1.6.4-2.6 2-2.6 4.3 0 1.9.9 3.1 2 3.5v9' fill='none' stroke='%23EA9D2F' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
  --ic-voiture: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 14.6l1.6-4.4A2.2 2.2 0 0 1 7.7 8.8h8.6a2.2 2.2 0 0 1 2.1 1.4l1.6 4.4' fill='none' stroke='%23EA9D2F' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M3.2 14.6h17.6v3.2a.9.9 0 0 1-.9.9h-1a.9.9 0 0 1-.9-.9v-1H6v1a.9.9 0 0 1-.9.9h-1a.9.9 0 0 1-.9-.9z' fill='none' stroke='%23EA9D2F' stroke-width='1.7' stroke-linejoin='round'/%3E%3Cpath d='M6 11.6h12' stroke='%23EA9D2F' stroke-width='1.4' stroke-linecap='round'/%3E%3Ccircle cx='7.4' cy='14.6' r='1.15' fill='%233B2016'/%3E%3Ccircle cx='16.6' cy='14.6' r='1.15' fill='%233B2016'/%3E%3C/svg%3E");
  --ic-guide: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='7.4' r='3.4' fill='none' stroke='%23EA9D2F' stroke-width='1.7'/%3E%3Cpath d='M4.6 20c.9-4.1 3.7-6.2 7.4-6.2s6.5 2.1 7.4 6.2' fill='none' stroke='%23EA9D2F' stroke-width='1.7' stroke-linecap='round'/%3E%3C/svg%3E");
  --ic-duree: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='8.6' fill='none' stroke='%23EA9D2F' stroke-width='1.8'/%3E%3Cpath d='M12 7.4V12l3.4 2' fill='none' stroke='%23EA9D2F' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E");
  --ic-puce: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='9.5' y='9.5' width='5' height='5' transform='rotate(45 12 12)' fill='%23EA9D2F'/%3E%3C/svg%3E");
  --ic-etoile: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3.4l2.4 5 5.5.6-4 3.8 1 5.5-4.9-2.7-4.9 2.7 1-5.5-4-3.8 5.5-.6z' fill='%23EA9D2F'/%3E%3C/svg%3E");
  /* Hébergement : maison (économique) / façade d'hôtel (standard) / couronne (luxe) */
  --ic-maison: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3.6 10.6 12 3.8l8.4 6.8' fill='none' stroke='%23EA9D2F' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M5.9 12.1v7.1a1.7 1.7 0 0 0 1.7 1.7h8.8a1.7 1.7 0 0 0 1.7-1.7v-7.1' fill='none' stroke='%23EA9D2F' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M9.9 20.9v-4.7h4.2v4.7' fill='none' stroke='%233B2016' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --ic-facade: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='5' y='3.6' width='14' height='16.8' rx='1.8' fill='none' stroke='%23EA9D2F' stroke-width='1.7'/%3E%3Cpath d='M5 9.6h14' fill='none' stroke='%23EA9D2F' stroke-width='1.3'/%3E%3Crect x='8.4' y='5.3' width='2.2' height='2.2' rx='.4' fill='%233B2016'/%3E%3Crect x='13.4' y='5.3' width='2.2' height='2.2' rx='.4' fill='%233B2016'/%3E%3Crect x='8.4' y='11.4' width='2.2' height='2.2' rx='.4' fill='%233B2016'/%3E%3Crect x='13.4' y='11.4' width='2.2' height='2.2' rx='.4' fill='%233B2016'/%3E%3Cpath d='M10.3 20.4v-3.9h3.4v3.9' fill='none' stroke='%233B2016' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --ic-couronne: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4.1 17.2 3.4 7.7 8.1 11 12 4.9 15.9 11 20.6 7.7 19.9 17.2Z' fill='none' stroke='%23EA9D2F' stroke-width='1.7' stroke-linejoin='round'/%3E%3Cpath d='M5.2 20.6h13.6' fill='none' stroke='%23EA9D2F' stroke-width='1.7' stroke-linecap='round'/%3E%3Ccircle cx='12' cy='14.5' r='1.15' fill='%233B2016'/%3E%3C/svg%3E");
}

body {
  font-family: var(--texte);
  background-color: var(--blanc);
  color: var(--anthracite);
}

button, input, select, textarea {
  font-family: inherit;
}

.hero h1,
.section-header h2,
.apropos-texte h2 {
  font-family: var(--titre);
  font-weight: 800;
  letter-spacing: -0.01em;
}
.chiffre-item h3,
.prix-montant {
  font-family: var(--titre);
  font-weight: 800;
}
.circuit-info h3,
.sejour-header h3,
.visuel-contenu h4 {
  font-family: var(--titre);
  font-weight: 700;
}
.nav-logo { font-family: var(--texte); }
.champ,
.faq-question {
  font-family: var(--texte);
}

.nav-logo { color: var(--brun-cacao); }
.logo-accent { color: var(--ocre); }

.liquid-nav a {
  color: rgba(81, 45, 37, 0.78);
}
.liquid-nav a:hover { color: var(--nav-text); }
.liquid-nav a.is-active { color: var(--nav-text-active); }
.liquid-nav a:focus-visible { outline-color: var(--bouton-survol); }

.liquid-nav__indicator { box-shadow: 0 4px 14px rgba(59, 32, 22, 0.15); }
.liquid-nav__separator { background: rgba(234, 157, 47, 0.55); }

.liquid-dropdown a { color: rgba(81, 45, 37, 0.85); }
.liquid-dropdown a:hover { background: rgba(234, 157, 47, 0.2); color: var(--nav-text-active); }
.liquid-dropdown__titre { border-bottom-color: rgba(81, 45, 37, 0.12); }

.globe-btn-desktop { color: var(--brun-cacao); }
.globe-btn-desktop:hover { color: var(--bouton-survol); }

.lang-btn:hover { border-color: var(--ocre); background-color: rgba(234, 157, 47, 0.12); }
.lang-btn.active { border-color: var(--ocre); background-color: rgba(234, 157, 47, 0.18); }
.lang-dropdown { background: var(--ivoire); border-color: var(--ocre); }

.burger-btn span { background-color: var(--brun-cacao); }

.nav-cta {
  background-color: var(--bouton);
  color: #FFFFFF;
  border-radius: 12px;
  padding: 10px 22px;
}
.nav-cta:hover { background-color: var(--bouton-survol); }

.btn-primary {
  background-color: var(--bouton);
  color: #FFFFFF;
  border-radius: 12px;
}
.btn-primary:hover { background-color: var(--bouton-survol); }

.btn-outline {
  background-color: var(--brun-cacao);
  color: var(--ivoire);
  border-color: var(--brun-cacao);
  border-radius: 12px;
}
.btn-outline:hover { border-color: var(--ocre); color: var(--ocre); }

.btn-carte {
  background-color: var(--bouton);
  color: #FFFFFF;
  border-radius: 10px;
}
.btn-carte:hover { background-color: var(--bouton-survol); color: #FFFFFF; }

.btn-decouvrir {
  background-color: var(--ocre);
  color: var(--chocolat);
}
.btn-decouvrir:hover { background-color: var(--ivoire); color: var(--chocolat); }

.nav-cta::before,
.btn-carte:not(.btn-decouvrir)::before,
.avec-calendrier::before {
  content: "";
  display: inline-block;
  width: 18px;
  height: 18px;
  margin-right: 9px;
  vertical-align: -4px;
  background-color: currentColor;
  -webkit-mask: var(--icone-calendrier) center / contain no-repeat;
  mask: var(--icone-calendrier) center / contain no-repeat;
  transition: transform 0.2s ease;
}
.nav-cta:hover::before,
.btn-carte:not(.btn-decouvrir):hover::before,
.avec-calendrier:hover::before {
  transform: rotate(-9deg) scale(1.1);
}
@media (prefers-reduced-motion: reduce) {
  .nav-cta::before,
  .btn-carte:not(.btn-decouvrir)::before,
  .avec-calendrier::before { transition: none; }
  .nav-cta:hover::before,
  .btn-carte:not(.btn-decouvrir):hover::before,
  .avec-calendrier:hover::before { transform: none; }
}

/* ---- ICÔNES DES BOUTONS D'ACTION (variante A) ----
   Uniquement des variables --ic-* déjà déclarées dans :root */
.btn-carte.btn-decouvrir::before {
  content: "";
  display: inline-block;
  width: 18px;
  height: 18px;
  margin-right: 8px;
  vertical-align: -4px;
  background-color: currentColor;
  mask: var(--ic-decouvrir) center/contain no-repeat;
  -webkit-mask: var(--ic-decouvrir) center/contain no-repeat;
  transition: transform 0.2s ease;
}
.btn-carte.btn-decouvrir:hover::before { transform: rotate(-9deg) scale(1.1); }

#sejours .sejour-body .btn-primary::before {
  content: "";
  display: inline-block;
  width: 18px;
  height: 18px;
  margin-right: 9px;
  vertical-align: -4px;
  background-color: currentColor;
  mask: var(--ic-cal) center/contain no-repeat;
  -webkit-mask: var(--ic-cal) center/contain no-repeat;
}
#sejours .sejour-body [data-i18n="sejour_btn_devis"]::before {
  mask: var(--ic-email) center/contain no-repeat;
  -webkit-mask: var(--ic-email) center/contain no-repeat;
}
@media (prefers-reduced-motion: reduce) {
  .btn-carte.btn-decouvrir::before { transition: none; }
  .btn-carte.btn-decouvrir:hover::before { transform: none; }
}

.hero { background-color: var(--brun-cacao); }
.hero-overlay {
  background: linear-gradient(135deg,
    rgba(59, 32, 22, 0.50) 0%,
    rgba(81, 45, 37, 0.42) 50%,
    rgba(59, 32, 22, 0.55) 100%);
}
.hero-tag { color: var(--ocre); }
.hero h1 { color: var(--ivoire); }
.hero h1 span { color: var(--ocre); }
.hero-desc { color: rgba(250, 247, 240, 0.85); }
.hero-scroll { color: var(--ivoire); }

.chiffres {
  background-color: var(--brun-cacao);
  position: relative;
}
.chiffre-item { border-right-color: rgba(234, 157, 47, 0.3); }
.chiffre-item h3 { color: var(--ocre); }
.chiffre-item p { color: rgba(250, 247, 240, 0.75); }

.chiffres::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 34px;
  background-color: var(--brun-cacao);
  background-image: var(--motif-croix);
  background-size: var(--motif-croix-taille);
  background-repeat: repeat-x;
  pointer-events: none;
}

.section-tag { color: var(--bronze); }
.apropos .section-tag,
.contact .section-tag { color: var(--ocre); }
.section-header h2 { color: var(--brun-cacao); }
.section-desc { color: rgba(43, 36, 34, 0.8); }

.circuits { background-color: var(--ivoire); }
.circuits-fond::after {
  background: linear-gradient(180deg,
    #FAF7F0 0%,
    rgba(250, 247, 240, 0.85) 25%,
    rgba(250, 247, 240, 0.55) 60%,
    #FAF7F0 100%);
}
.circuit-carte {
  background-color: var(--brun-cacao);
  box-shadow: 0 4px 20px rgba(59, 32, 22, 0.10);
}
.circuit-carte:hover { box-shadow: 0 12px 40px rgba(59, 32, 22, 0.20); }
.circuit-badge { background-color: var(--ocre); color: var(--chocolat); }
.circuit-badge::before {
  content: "";
  display: inline-block;
  width: 14px; height: 14px;
  margin-right: 6px;
  vertical-align: -2px;
  background-color: currentColor;
  mask: var(--ic-etoile) center/contain no-repeat;
  -webkit-mask: var(--ic-etoile) center/contain no-repeat;
}
.circuit-voile {
  background: linear-gradient(180deg, rgba(81, 45, 37, 0.10) 0%, rgba(46, 25, 18, 0.92) 100%);
}
.circuit-duree { color: var(--ocre); }
.circuit-info h3 { color: var(--ivoire); }
.circuit-info p { color: rgba(250, 247, 240, 0.88); }
.circuit-prix { color: var(--ivoire); }
.prix-fcfa, .prix-euro { color: var(--ocre); }

.slider-fleche {
  border-color: rgba(81, 45, 37, 0.25);
  color: var(--brun-cacao);
}
.slider-fleche:hover { background-color: var(--ocre); border-color: var(--ocre); }
.slider-hint { color: var(--discret); }

.sejours { background-color: var(--blanc); }
.sejour-carte {
  box-shadow: 0 2px 20px rgba(59, 32, 22, 0.07);
  border-color: rgba(81, 45, 37, 0.10);
}
.sejour-carte:hover { box-shadow: 0 16px 50px rgba(59, 32, 22, 0.14); }
.sejour-carte.featured-sejour {
  border-color: var(--ocre);
  box-shadow: 0 16px 50px rgba(234, 157, 47, 0.22);
}
.sejour-popular {
  background: var(--bouton-survol);
  color: #FFFFFF;
}
.sejour-popular::before {
  content: "";
  display: inline-block;
  width: 14px; height: 14px;
  margin-right: 6px;
  vertical-align: -2px;
  background-color: currentColor;
  mask: var(--ic-etoile) center/contain no-repeat;
  -webkit-mask: var(--ic-etoile) center/contain no-repeat;
}
.chiffre-item:nth-child(3) h3::after {
  content: "";
  display: inline-block;
  width: 22px; height: 22px;
  margin-left: 4px;
  vertical-align: -2px;
  background-color: currentColor;
  mask: var(--ic-etoile) center/contain no-repeat;
  -webkit-mask: var(--ic-etoile) center/contain no-repeat;
}
.sejour-header { border-bottom-color: rgba(81, 45, 37, 0.08); }
.sejour-badge { color: var(--bronze); }
.sejour-header h3 { color: var(--brun-cacao); }
.prix-from { color: var(--discret); }
.prix-montant { color: var(--brun-cacao); }
.sejour-devis { color: var(--bronze); }
.sejour-liste li {
  color: var(--anthracite);
  border-bottom-color: rgba(81, 45, 37, 0.07);
}
.sejour-hebergement { background-color: var(--sable); }
.sejour-hebergement p { color: var(--discret); }
.heberg-btn {
  color: var(--brun-cacao);
  border-color: rgba(81, 45, 37, 0.20);
}
.heberg-btn:hover {
  background-color: var(--ocre);
  border-color: var(--ocre);
  color: var(--chocolat);
}

.heberg-btn.selectionne {
  background-color: var(--ocre);
  border-color: var(--ocre);
  color: var(--chocolat);
}

/* Icône d'hébergement : currentColor suit la couleur du texte de la pastille,
   donc elle passe seule en --chocolat au survol et à la sélection. */
.heberg-btn::before {
  content: "";
  display: inline-block;
  width: 14px;
  height: 14px;
  margin-right: 6px;
  vertical-align: -2px;
  background-color: currentColor;
}
.heberg-btn[data-hebergement="eco"]::before {
  mask: var(--ic-maison) center/contain no-repeat;
  -webkit-mask: var(--ic-maison) center/contain no-repeat;
}
.heberg-btn[data-hebergement="standard"]::before {
  mask: var(--ic-facade) center/contain no-repeat;
  -webkit-mask: var(--ic-facade) center/contain no-repeat;
}
.heberg-btn[data-hebergement="luxe"]::before {
  mask: var(--ic-couronne) center/contain no-repeat;
  -webkit-mask: var(--ic-couronne) center/contain no-repeat;
}

/* Bouton globe mobile : le .navbar est transparent, donc un trait brun serait
   invisible au-dessus des heroes sombres. Pastille verre autonome, identique
   au bouton desktop. */
.globe-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--glass-bg);
  backdrop-filter: blur(36px) saturate(180%);
  -webkit-backdrop-filter: blur(36px) saturate(180%);
  border: 1px solid var(--glass-border);
  box-shadow: 0 8px 20px -8px var(--glass-shadow);
  color: var(--brun-cacao);
}
.globe-btn svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.globe-btn:hover { color: var(--bouton-survol); }

.apropos { background-color: var(--brun-cacao); }
.apropos-texte h2 { color: var(--ivoire); }
.apropos-texte p { color: rgba(250, 247, 240, 0.80); }
.apropos-item { color: rgba(250, 247, 240, 0.88); }

.social-btn {
  background-color: rgba(250, 247, 240, 0.08);
  color: var(--ivoire);
  border-color: rgba(250, 247, 240, 0.18);
}
.social-btn:hover {
  background-color: var(--ocre);
  border-color: var(--ocre);
  color: var(--chocolat);
}
.social-btn:focus-visible { outline-color: var(--ocre); }

.visuel-overlay {
  background: linear-gradient(180deg, rgba(81, 45, 37, 0.10) 0%, rgba(46, 25, 18, 0.92) 100%);
}
.visuel-chiffre { background-color: var(--ocre); color: var(--chocolat); }
.visuel-contenu h4 { color: var(--ivoire); }
.visuel-contenu p { color: rgba(250, 247, 240, 0.85); }

.temoignages { background-color: var(--ivoire); }
.temoignage-carte {
  box-shadow: 0 4px 20px rgba(59, 32, 22, 0.08);
  border-top-color: var(--ocre);
}
.temoignage-texte { color: var(--anthracite); }
.auteur-avatar { background-color: var(--brun-cacao); color: var(--ocre); }
.temoignage-auteur strong { color: var(--brun-cacao); }
.temoignage-auteur p { color: var(--discret); }

.faq { background-color: var(--blanc); }
.faq-item {
  border-color: rgba(81, 45, 37, 0.10);
  box-shadow: 0 2px 12px rgba(59, 32, 22, 0.06);
}
.faq-item.open { border-color: var(--ocre); }
.faq-question { color: var(--brun-cacao); }
.faq-question:hover { color: var(--bouton-survol); }
.faq-icone { background: rgba(234, 157, 47, 0.18); color: var(--bronze); }
.faq-item.open .faq-icone { background: var(--ocre); color: var(--chocolat); }
.faq-reponse p { color: var(--anthracite); }

.contact { background-color: var(--brun-cacao); }
.contact .section-header h2 { color: var(--ivoire); }
.contact .section-desc { color: rgba(250, 247, 240, 0.72); }
.champ {
  border-color: rgba(234, 157, 47, 0.35);
  background-color: rgba(250, 247, 240, 0.08);
  color: var(--ivoire);
}
.champ::placeholder { color: rgba(250, 247, 240, 0.55); }
.champ:focus { border-color: var(--ocre); }
.champ option { background-color: var(--brun-cacao); color: var(--ivoire); }
.consent-case { color: rgba(250, 247, 240, 0.82); }
.consent-case input { accent-color: var(--ocre); }
.consent-case a { color: var(--ocre); }

.reservation-recap {
  font-family: var(--titre);
  font-weight: 800;
  font-size: 1.2rem;
  line-height: 1.4;
  letter-spacing: -0.01em;
  color: var(--ivoire);
  margin: 0 0 4px;
}

#bloc-dates label,
#reservation-form label[for="nombre-adultes"],
#reservation-form label[for="nombre-enfants"],
#reservation-form label[for="hebergement-form"] {
  display: block;
  font-family: var(--texte);
  font-size: 0.9rem;
  font-weight: 600;
  color: rgba(250, 247, 240, 0.85);
  margin-bottom: 8px;
}

/* ---- Sélection des circuits (formules Découverte / Immersion / Sur Mesure) ----
   Le bloc est rendu comme un champ du formulaire : même bordure, même fond et
   même rayon que .champ, pour ne plus flotter sur le fond cacao. */
#bloc-circuits-formule > div { flex: 1; }

#circuits-formule-label {
  color: rgba(250, 247, 240, 0.85);
  font-family: var(--texte);
  font-size: 0.9rem;
  font-weight: 600;
  margin-bottom: 10px;
}

#bloc-circuits-formule label {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 14px;
  margin-bottom: 8px;
  border: 1px solid rgba(234, 157, 47, 0.35);
  border-radius: 6px;
  background-color: rgba(250, 247, 240, 0.08);
  color: var(--ivoire);
  font-family: var(--texte);
  font-size: 0.9rem;
  cursor: pointer;
  transition: border-color 0.3s, background-color 0.3s;
}
#bloc-circuits-formule label:hover {
  border-color: var(--ocre);
  background-color: rgba(250, 247, 240, 0.12);
}
#bloc-circuits-formule label:has(input:checked) {
  border-color: var(--ocre);
  background-color: rgba(234, 157, 47, 0.16);
}
#bloc-circuits-formule label:has(input:disabled) {
  opacity: 0.45;
  cursor: not-allowed;
}
#bloc-circuits-formule input[type="checkbox"] {
  width: 16px;
  height: 16px;
  flex: none;
  accent-color: var(--ocre);
}
#bloc-circuits-formule label:focus-within { border-color: var(--ocre); }

#circuits-formule-erreur {
  color: #E9A0A0;
  font-size: 0.9rem;
  margin-top: 8px;
}

#date-fin-auto { color: rgba(250, 247, 240, 0.78); }

/* Rangée participants (adultes / enfants / hébergement) : parts égales pour que les
   champs s'alignent sur la largeur du formulaire. L'alignement en bas garantit que
   les inputs restent sur la même ligne même si un libellé passe sur 2 lignes. */
#bloc-participants > div,
#form-participants > div { flex: 1 1 0; min-width: 0; }
#bloc-participants,
#form-participants { align-items: flex-end; }

/* Sur mobile, cette rangée reste en ligne (2 champs par ligne) au lieu de s'empiler
   comme les rangées de texte : on rétablit le sens ligne, car .form-row passe en
   colonne sous 768 px. */
@media (max-width: 768px) {
  #bloc-participants,
  #form-participants {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 12px;
  }
  #bloc-participants > div,
  #form-participants > div { flex: 1 1 45%; min-width: 0; }
}

/* Très petits écrans : les deux champs restent sur une seule ligne, on rétrécit
   seulement les libellés pour qu'ils tiennent sur une ligne de texte. On reprend
   volontairement les sélecteurs exacts de la règle desktop ci-dessus, sinon la
   spécificité serait plus faible et le font-size serait ignoré. */
@media (max-width: 380px) {
  #reservation-form label[for="nombre-adultes"],
  #reservation-form label[for="nombre-enfants"] { font-size: 0.8rem; }
}

.footer {
  background-color: var(--chocolat);
  position: relative;
  padding-top: 94px;
}
.footer::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 34px;
  background-color: var(--chocolat);
  background-image: var(--motif-croix);
  background-size: var(--motif-croix-taille);
  background-repeat: repeat-x;
  pointer-events: none;
}
.footer-contenu { border-bottom-color: rgba(234, 157, 47, 0.22); }
.footer-brand p { color: rgba(250, 247, 240, 0.65); }
.footer-social a {
  color: var(--ivoire);
  background-color: rgba(250, 247, 240, 0.08);
  border-color: rgba(250, 247, 240, 0.18);
}
.footer-social a:hover {
  background-color: var(--ocre);
  border-color: var(--ocre);
  color: var(--chocolat);
}
.footer-social a:focus-visible { outline-color: var(--ocre); }
.footer-liens h4, .footer-contact h4 { color: var(--ivoire); }
.footer-liens a { color: rgba(250, 247, 240, 0.72); }
.footer-liens a:hover { color: var(--ocre); }
.footer-contact p { color: rgba(250, 247, 240, 0.72); }
.footer-bas { color: rgba(250, 247, 240, 0.60); }

.whatsapp-btn {
  background-color: var(--brun-cacao);
  border-radius: 16px;
  box-shadow: 0 8px 22px rgba(40, 18, 12, 0.35), inset 0 0 0 2px var(--ocre);
}
.whatsapp-btn:hover {
  box-shadow: 0 10px 26px rgba(40, 18, 12, 0.45), inset 0 0 0 2px var(--ocre);
}
.whatsapp-btn svg { fill: var(--sable); }

@media (max-width: 900px) {
  .mobile-controls,
  .navbar .burger-btn { border-left-color: rgba(234, 157, 47, 0.5); }

  .nav-liens {
    background: rgba(81, 45, 37, 0.90);
    border-color: rgba(234, 157, 47, 0.40);
  }
  .nav-liens li > a:not(.nav-cta) { color: var(--ivoire); }
  .nav-liens li > a:not(.nav-cta):hover {
    background-color: rgba(234, 157, 47, 0.15);
    color: var(--ocre);
  }
  .mobile-reserver .nav-cta {
    background: var(--bouton);
    color: #FFFFFF;
    border-radius: 12px;
  }
  .mobile-reserver .nav-cta:hover { background: var(--bouton-survol); }
}

:root {
  --gallery-overlay: linear-gradient(90deg, rgba(59, 32, 22, 0.78) 0%, rgba(81, 45, 37, 0.30) 55%, rgba(59, 32, 22, 0) 100%);
  --gallery-accent: #EA9D2F;
}

.page-hero { background-color: var(--brun-cacao); }
.page-hero-contenu h1 { color: var(--ivoire); }
.page-hero-contenu h1 span { color: var(--ocre); }

.page-hero { margin-bottom: 0; border-radius: 0; }
.galerie-hero { border-radius: 0; }

/* Bande à croix sous le hero des pages circuit.
   Le fond brun est déjà assuré par .page-hero (--brun-cacao) : la bande ne dessine que les
   croisillons, dont la couleur vient de la même variable que .page-prix (--ocre), ce qui garantit
   une teinte identique au prix affiché dans le hero.
   z-index: 3 pour passer au-dessus de .hero-overlay (z-index: 1), sinon le dégradé translucide de
   l'overlay atténue la couleur de la bande alors que le prix, en z-index: 2, reste en pleine teinte. */
.page-hero:has(+ .galerie-hero)::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 34px;
  z-index: 3;
  background-color: var(--ocre);
  -webkit-mask: var(--motif-croix) repeat-x;
  mask: var(--motif-croix) repeat-x;
  -webkit-mask-size: var(--motif-croix-taille);
  mask-size: var(--motif-croix-taille);
  pointer-events: none;
}
.guide-hero::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 34px;
  z-index: 3;
  background-color: var(--brun-cacao);
  background-image: var(--motif-croix);
  background-size: var(--motif-croix-taille);
  background-repeat: repeat-x;
  pointer-events: none;
}

.page-hero:has(+ .legal-bloc)::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 34px;
  z-index: 3;
  background-color: var(--brun-cacao);
  background-image: var(--motif-croix);
  background-size: var(--motif-croix-taille);
  background-repeat: repeat-x;
  pointer-events: none;
}

.page-prix { color: var(--ocre); }
/* Sur les pages circuit, le montant fait 20 px : on aligne "/ adulte" et la mention
   enfants sur la taille du montant en euros pour qu'ils restent discrets. */
.page-prix .prix-unite { font-size: 0.75rem; }

.page-bloc h2 { color: var(--brun-cacao); }
.page-bloc p.lead { color: var(--anthracite); }

.galerie-hero { background-color: var(--chocolat); }
.gh-cta:hover { background: var(--ocre); border-color: var(--ocre); color: var(--chocolat); }
.gh-fleche:hover { background: var(--ocre); border-color: var(--ocre); color: var(--chocolat); }
.gh-vig-legende { background: linear-gradient(180deg, transparent, rgba(59, 32, 22, 0.85)); }

.iti-liste li { border-bottom-color: rgba(81, 45, 37, 0.12); }
.iti-heure { background: var(--brun-cacao); color: var(--ocre); }
.iti-liste p { color: var(--anthracite); }

.page-retour { color: var(--brun-cacao); }
.page-retour:hover { color: var(--bouton-survol); }

.galerie-vignettes img.active { border-color: var(--ocre); }
.guide-carte {
  border-top-color: var(--ocre);
  box-shadow: 0 4px 20px rgba(59, 32, 22, 0.10);
}
.guide-photo {
  border-color: var(--ocre);
  box-shadow: 0 4px 16px rgba(59, 32, 22, 0.18);
}
.guide-carte h3 { color: var(--brun-cacao); }
.guide-langues { color: var(--bronze); }
.guide-carte p { color: var(--anthracite); }
.galerie-principale { box-shadow: 0 4px 20px rgba(59, 32, 22, 0.14); }

.hero-scroll::before {
  content: "";
  display: inline-block;
  width: 16px; height: 16px;
  margin-right: 7px;
  vertical-align: -3px;
  background-color: var(--ocre);
  mask: var(--ic-decouvrir) center/contain no-repeat;
  -webkit-mask: var(--ic-decouvrir) center/contain no-repeat;
}
.hero-boutons .btn-primary::before {
  content: "";
  display: inline-block;
  width: 18px; height: 18px;
  margin-right: 9px;
  vertical-align: -4px;
  background-color: currentColor;
  mask: var(--ic-route) center/contain no-repeat;
  -webkit-mask: var(--ic-route) center/contain no-repeat;
}
.hero-boutons .btn-outline::before {
  content: "";
  display: inline-block;
  width: 18px; height: 18px;
  margin-right: 9px;
  vertical-align: -4px;
  background-color: currentColor;
  mask: var(--icone-calendrier) center/contain no-repeat;
  -webkit-mask: var(--icone-calendrier) center/contain no-repeat;
}
.hero-boutons .btn-outline:hover::before { transform: rotate(-9deg) scale(1.1); }

.page-hero .hero-boutons .btn-primary::before {
  content: none;
}
.page-hero .hero-boutons .btn-outline::before {
  mask: var(--ic-route) center/contain no-repeat;
  -webkit-mask: var(--ic-route) center/contain no-repeat;
}
/* Ajouts ci-dessous : plus spécifiques que les deux règles ci-dessus
   donc ils ne les modifient pas.
   Portée sur tous les .page-hero : 5 circuits + Vodoun + Guide. */

/* « Envoyer ma demande » : icône enveloppe sur les pages à hero */
.page-hero .hero-boutons .btn-primary::before {
  content: "";
  display: inline-block;
  width: 18px; height: 18px;
  margin-right: 9px;
  vertical-align: -4px;
  background-color: currentColor;
  mask: var(--ic-email) center/contain no-repeat;
  -webkit-mask: var(--ic-email) center/contain no-repeat;
}

/* Les 2 boutons du hero des pages circuit / Vodoun / Guide
   (« Envoyer ma demande » et « Tous les circuits ») partagent la meme couleur
   que le bouton « Reserver maintenant » de l'accueil, c'est-a-dire la couleur
   de base du .btn-outline : --brun-cacao (#512D25).

   Pourquoi un liseré est obligatoire : le fond de .page-hero est lui-meme
   --brun-cacao (identite.css:664), mais .hero-overlay le voile avec un
   dégradé brun translucide (identite.css:226). Mesure au pixel près sur
   circuit-ganvie : le fond réel au niveau des boutons vaut #4C2A21, contre
   #512D25 pour le bouton — 4 unités RGB d'écart sur 255. Un bouton de cette
   teinte sans liseré se confondrait avec le fond ; seul le texte ivoire
   resterait visible.

   Le liseré est posé en box-shadow: inset et non en border: car
   .page-hero .hero-boutons impose flex-wrap:nowrap et un padding réduit à
   14px 10px pour tenir les 2 boutons sur une ligne dès 360 px (règles
   mobiles plus bas). Une border de 1px ajouterait 2 px par bouton et
   risquerait un débordement ; box-shadow ne change aucune dimension. */
.page-hero .hero-boutons .btn-outline {
  background-color: var(--brun-cacao);
  color: #FFFFFF;
  border: none;
  border-radius: 12px;
  box-shadow: inset 0 0 0 1px rgba(250, 247, 240, 0.38);
  transition: background-color 0.3s, box-shadow 0.3s;
}
.page-hero .hero-boutons .btn-outline:hover {
  background-color: var(--chocolat);
  box-shadow: inset 0 0 0 1px var(--ocre);
  color: #FFFFFF;
}
.page-hero .hero-boutons .btn-outline:focus-visible {
  outline: 2px solid var(--ocre);
  outline-offset: 3px;
}

/* « Envoyer ma demande » : meme traitement que « Tous les circuits » ci-dessus,
   pour que les 2 boutons du hero soient strictement identiques. */
.page-hero .hero-boutons .btn-primary {
  background-color: var(--brun-cacao);
  color: #FFFFFF;
  box-shadow: inset 0 0 0 1px rgba(250, 247, 240, 0.38);
  transition: background-color 0.3s, box-shadow 0.3s;
}
.page-hero .hero-boutons .btn-primary:hover {
  background-color: var(--chocolat);
  box-shadow: inset 0 0 0 1px var(--ocre);
  color: #FFFFFF;
}

/* Mobile : les 2 boutons du hero sur une seule ligne.
   flex-wrap:nowrap empêche la 2e rangée ; flex:0 1 auto garde les largeurs
   naturelles ; padding et typo réduits pour tenir dès 360 px ; la cible
   tactile reste à 43 px de haut.
   space-between colle « Envoyez ma demande » au bord gauche et « Tous les
   circuits » au bord droit. !important obligatoire : les 7 pages (5 circuits
   + Vodoun + Guide) portent un style="justify-content:flex-start;" inline
   qui l'emporterait sinon. Sans effet à 360 px, où les deux boutons occupent
   déjà toute la largeur utile. */
@media (max-width: 768px) {
  .page-hero .hero-boutons {
    flex-wrap: nowrap;
    gap: 10px;
    justify-content: space-between !important;
  }
  .page-hero .hero-boutons .btn-primary,
  .page-hero .hero-boutons .btn-outline {
    flex: 0 1 auto;
    padding: 14px 10px;
    font-size: 12.5px;
    letter-spacing: 0.02em;
    line-height: 1.2;
    white-space: nowrap;
  }
  .page-hero .hero-boutons .btn-primary::before,
  .page-hero .hero-boutons .btn-outline::before {
    width: 15px;
    height: 15px;
    margin-right: 5px;
    vertical-align: -3px;
  }
}

#circuits .section-tag::before,
#sejours .section-tag::before,
#apropos .section-tag::before,
.temoignages .section-tag::before,
#faq .section-tag::before,
#contact .section-tag::before,
#reserver .section-tag::before {
  content: "";
  display: inline-block;
  width: 18px; height: 18px;
  margin-right: 8px;
  vertical-align: -4px;
  background-color: currentColor;
}
#circuits .section-tag::before { mask: var(--ic-route) center/contain no-repeat; -webkit-mask: var(--ic-route) center/contain no-repeat; }
#sejours .section-tag::before { mask: var(--ic-valise) center/contain no-repeat; -webkit-mask: var(--ic-valise) center/contain no-repeat; }
#apropos .section-tag::before { mask: var(--ic-oiseau) center/contain no-repeat; -webkit-mask: var(--ic-oiseau) center/contain no-repeat; }
.temoignages .section-tag::before { mask: var(--ic-citation) center/contain no-repeat; -webkit-mask: var(--ic-citation) center/contain no-repeat; }
#faq .section-tag::before { mask: var(--ic-faq) center/contain no-repeat; -webkit-mask: var(--ic-faq) center/contain no-repeat; }
#contact .section-tag::before,
#reserver .section-tag::before {
  mask: var(--icone-calendrier) center/contain no-repeat;
  -webkit-mask: var(--icone-calendrier) center/contain no-repeat;
}

.apropos-item::before {
  content: "";
  display: inline-block;
  width: 9px; height: 9px;
  margin-right: 10px;
  vertical-align: 1px;
  background-color: var(--ocre);
  mask: var(--ic-puce) center/contain no-repeat;
  -webkit-mask: var(--ic-puce) center/contain no-repeat;
}

.sejour-badge::before {
  content: "";
  display: inline-block;
  width: 18px; height: 18px;
  margin-right: 8px;
  vertical-align: -4px;
  background-color: var(--bronze);
}
[data-i18n="sejour_badge1"]::before { mask: var(--ic-drapeau) center/contain no-repeat; -webkit-mask: var(--ic-drapeau) center/contain no-repeat; }
[data-i18n="sejour_badge2"]::before { mask: var(--ic-medaillon) center/contain no-repeat; -webkit-mask: var(--ic-medaillon) center/contain no-repeat; }
[data-i18n="sejour_badge3"]::before { mask: var(--ic-mesure) center/contain no-repeat; -webkit-mask: var(--ic-mesure) center/contain no-repeat; }

.sejour-liste li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.sejour-liste li::before {
  content: "";
  display: inline-block;
  flex: none;
  width: 17px; height: 17px;
  margin-top: 2px;
  background-color: var(--bronze);
}
[data-i18n="sejour1_item1"]::before, [data-i18n="sejour2_item1"]::before, [data-i18n="sejour3_item2"]::before {
  mask: var(--ic-route) center/contain no-repeat; -webkit-mask: var(--ic-route) center/contain no-repeat;
}
[data-i18n="sejour1_item2"]::before, [data-i18n="sejour2_item2"]::before, [data-i18n="sejour3_item3"]::before {
  mask: var(--ic-bed) center/contain no-repeat; -webkit-mask: var(--ic-bed) center/contain no-repeat;
}
[data-i18n="sejour1_item3"]::before, [data-i18n="sejour2_item3"]::before {
  mask: var(--ic-fourchette) center/contain no-repeat; -webkit-mask: var(--ic-fourchette) center/contain no-repeat;
}
[data-i18n="sejour1_item4"]::before, [data-i18n="sejour2_item4"]::before {
  mask: var(--ic-voiture) center/contain no-repeat; -webkit-mask: var(--ic-voiture) center/contain no-repeat;
}
[data-i18n="sejour1_item5"]::before, [data-i18n="sejour2_item5"]::before, [data-i18n="sejour3_item5"]::before {
  mask: var(--ic-guide) center/contain no-repeat; -webkit-mask: var(--ic-guide) center/contain no-repeat;
}
[data-i18n="sejour3_item1"]::before {
  mask: var(--ic-duree) center/contain no-repeat; -webkit-mask: var(--ic-duree) center/contain no-repeat;
}
[data-i18n="sejour3_item4"]::before {
  mask: var(--ic-mesure) center/contain no-repeat; -webkit-mask: var(--ic-mesure) center/contain no-repeat;
}
[data-i18n="enfants_gratuit"]::before {
  mask: var(--ic-puce) center/contain no-repeat; -webkit-mask: var(--ic-puce) center/contain no-repeat;
}

.footer-contact p {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.footer-contact p::before {
  content: "";
  display: inline-block;
  flex: none;
  width: 17px; height: 17px;
  margin-top: 2px;
  background-color: var(--ocre);
}
.contact-email::before { mask: var(--ic-email) center/contain no-repeat; -webkit-mask: var(--ic-email) center/contain no-repeat; }
.contact-tel::before { mask: var(--ic-tel) center/contain no-repeat; -webkit-mask: var(--ic-tel) center/contain no-repeat; }
.contact-adresse::before { mask: var(--ic-pin) center/contain no-repeat; -webkit-mask: var(--ic-pin) center/contain no-repeat; }

/* ---------- SECTION PROMO EXPÉRIENCE VODOUN (page d'accueil) ---------- */
/* Palette et icônes : exclusivement les variables déjà déclarées dans :root.
   Les 2 lignes à modifier quand la photo définitive est livrée :
     --vodoun-promo-image     : le fichier WebP de fond
     --vodoun-promo-position  : background-position (center, 62% center, etc.) */
.vodoun-promo {
  --vodoun-promo-image: url("images/vodoun-promo.webp");
  --vodoun-promo-position: center top;
  --vodoun-promo-hauteur: 480px;

  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  align-items: center;
  min-height: var(--vodoun-promo-hauteur);
  padding: 72px 60px;
  background-color: var(--chocolat);
}
.vodoun-promo-fond {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image: var(--vodoun-promo-image);
  background-size: cover;
  background-position: var(--vodoun-promo-position);
  background-repeat: no-repeat;
  transition: transform 0.9s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.vodoun-promo:hover .vodoun-promo-fond { transform: scale(1.035); }

.vodoun-promo-voile {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(100deg, rgba(64, 32, 16, 0.86) 0%, rgba(80, 32, 32, 0.62) 58%, rgba(64, 32, 16, 0.16) 100%),
    linear-gradient(180deg, rgba(59, 32, 22, 0.26) 0%, rgba(59, 32, 22, 0.05) 46%, rgba(59, 32, 22, 0.44) 100%);
}
.vodoun-promo-contenu {
  position: relative;
  z-index: 2;
  max-width: 660px;
}
.vodoun-promo-tag {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--texte);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--ocre);
  margin-bottom: 18px;
}
.vodoun-promo-tag::before {
  content: "";
  display: inline-block;
  flex: none;
  width: 18px;
  height: 18px;
  background-color: currentColor;
  mask: var(--ic-medaillon) center/contain no-repeat;
  -webkit-mask: var(--ic-medaillon) center/contain no-repeat;
}
.vodoun-promo-titre {
  font-family: var(--titre);
  font-size: clamp(34px, 4.4vw, 52px);
  font-weight: 800;
  letter-spacing: -0.015em;
  line-height: 1.1;
  color: var(--ivoire);
  margin-bottom: 18px;
}
.vodoun-promo-texte {
  font-family: var(--texte);
  font-size: 17px;
  line-height: 1.7;
  max-width: 540px;
  color: rgba(250, 247, 240, 0.92);
  margin-bottom: 30px;
}
.vodoun-promo-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 52px;
  padding: 15px 26px;
  font-weight: 600;
  text-decoration: none;
}
.vodoun-promo-btn::before {
  content: "";
  display: inline-block;
  flex: none;
  width: 18px;
  height: 18px;
  background-color: currentColor;
  mask: var(--ic-medaillon) center/contain no-repeat;
  -webkit-mask: var(--ic-medaillon) center/contain no-repeat;
}
.vodoun-promo-btn:focus-visible { outline: 2px solid var(--ivoire); outline-offset: 3px; }

@media (max-width: 900px) {
  .vodoun-promo {
    --vodoun-promo-hauteur: 440px;
    padding: 60px 40px;
  }
  /* Voile renforcé : le texte occupe une part plus grande de la largeur */
  .vodoun-promo-voile {
    background:
      linear-gradient(100deg, rgba(64, 32, 16, 0.84) 0%, rgba(80, 32, 32, 0.66) 66%, rgba(64, 32, 16, 0.30) 100%),
      linear-gradient(180deg, rgba(59, 32, 22, 0.24) 0%, rgba(59, 32, 22, 0.10) 45%, rgba(59, 32, 22, 0.50) 100%);
  }
}
@media (max-width: 768px) {
  .vodoun-promo {
    --vodoun-promo-hauteur: auto;
    align-items: flex-end;
    min-height: 520px;
    padding: 72px 24px;
  }
  /* Voile vertical : le contenu est calé en bas, la photo reste lisible en haut */
  .vodoun-promo-voile {
    background: linear-gradient(180deg,
      rgba(59, 32, 22, 0.28) 0%,
      rgba(59, 32, 22, 0.58) 34%,
      rgba(59, 32, 22, 0.86) 62%,
      rgba(59, 32, 22, 0.93) 100%);
  }
  .vodoun-promo-contenu { max-width: 100%; }
  .vodoun-promo-titre { font-size: clamp(30px, 8.4vw, 38px); }
  .vodoun-promo-texte { font-size: 16px; margin-bottom: 26px; }
  .vodoun-promo-btn { width: 100%; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
  .vodoun-promo-fond { transition: none; }
  .vodoun-promo:hover .vodoun-promo-fond { transform: none; }
}