/* ======================================================================
   MEHARI EDEN — CSS scopé (location-voiture-cassis.com)
   À charger via functions.php du thème enfant Kadence (voir README).
   Toutes les règles sont préfixées par .mehari-eden pour ne jamais
   déborder sur le reste du site / de l'admin WordPress.
   ====================================================================== */

.mehari-eden {
  /* ---- Design tokens ------------------------------------------------- */
  --mehari-accent: #A8723C;        /* Sable / Laiton — couleur de marque officielle */
  --mehari-accent-dark: #8A5C2C;
  --mehari-cream: #FBF7F2;
  --mehari-cream-alt: #F3ECE2;
  --mehari-dark: #211C16;
  --mehari-white: #FFFFFF;
  --mehari-border: #E4DACB;

  --font-heading: 'Fraunces', Georgia, serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;

  --radius-s: 6px;
  --radius-m: 14px;
  --radius-l: 28px;
  --container: 1180px;

  font-family: var(--font-body);
  color: var(--mehari-dark);
  background: var(--mehari-white);
  line-height: 1.5;
}

.mehari-eden * { box-sizing: border-box; }

.mehari-eden img { max-width: 100%; display: block; }

.mehari-eden h1,
.mehari-eden h2,
.mehari-eden h3,
.mehari-eden h4 {
  font-family: var(--font-heading);
  font-weight: 500;
  line-height: 1.15;
  margin: 0 0 0.5em;
  color: var(--mehari-dark);
}

.mehari-eden h1 { font-size: clamp(2.2rem, 4.5vw, 3.6rem); font-weight: 400; }
.mehari-eden h2 { font-size: clamp(1.8rem, 3vw, 2.6rem); font-weight: 400; }
.mehari-eden h1 em,
.mehari-eden h2 em { font-style: italic; color: var(--mehari-accent); }

.mehari-eden p { margin: 0 0 1em; }

.mehari-eden .mehari-eyebrow {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--mehari-accent-dark);
  font-weight: 600;
  margin-bottom: 0.9em;
}

.mehari-eden .mehari-container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 24px;
}

.mehari-eden.mehari-section {
  padding: 88px 0;
}
.mehari-eden.mehari-section--alt { background: var(--mehari-cream); }
.mehari-eden.mehari-section--dark {
  background: var(--mehari-dark);
  color: var(--mehari-cream);
}
.mehari-eden.mehari-section--dark h2,
.mehari-eden.mehari-section--dark h3 { color: var(--mehari-white); }

.mehari-eden .mehari-section-head {
  max-width: 640px;
  margin: 0 auto 3rem;
  text-align: center;
}

/* ---- Boutons ---------------------------------------------------- */
.mehari-eden .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  padding: 0.9em 1.7em;
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.95rem;
  text-decoration: none;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}
.mehari-eden .btn:hover { transform: translateY(-1px); }
.mehari-eden .btn-primary {
  background: var(--mehari-accent);
  color: var(--mehari-white);
}
.mehari-eden .btn-primary:hover { background: var(--mehari-accent-dark); }
.mehari-eden .btn-outline {
  background: transparent;
  color: var(--mehari-dark);
  border-color: var(--mehari-border);
}
.mehari-eden .btn-outline:hover { border-color: var(--mehari-accent); }
.mehari-eden .btn-light {
  background: var(--mehari-white);
  color: var(--mehari-dark);
}
.mehari-eden .btn-soon {
  background: transparent;
  color: #9c9484;
  border-color: var(--mehari-border);
  border-style: dashed;
  cursor: default;
  pointer-events: none;
}

/* ======================================================================
   HEADER
   ====================================================================== */
.mehari-eden.mehari-header {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--mehari-border);
}
.mehari-eden .mehari-header-inner {
  position: relative;
  max-width: var(--container);
  margin: 0 auto;
  padding: 16px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.mehari-eden .mehari-logo {
  display: flex;
  align-items: center;
  text-decoration: none;
}
.mehari-eden .mehari-logo img {
  height: 92px !important;
  width: auto !important;
  max-width: none !important;
  object-fit: contain;
  display: block;
}
.mehari-eden .mehari-logo--footer img {
  height: 76px !important;
  width: auto !important;
  max-width: none !important;
  /* Logo fourni en noir : on le passe en blanc pour rester visible sur
     le fond foncé du footer. Si un fichier logo blanc dédié est fourni
     un jour, retirer ce filtre et utiliser directement ce fichier. */
  filter: brightness(0) invert(1);
}
/* Convention de marque : "trolib · [produit]", le point prend la couleur
   de la gamme concernée (Sable/Laiton pour eden). À répliquer sur
   trolib.com pour chaque future gamme, ex. "trolib · vtt" en rose. */
.mehari-eden .mehari-logo-dot {
  color: var(--mehari-accent);
}
.mehari-eden .mehari-nav {
  display: flex;
  gap: 28px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.mehari-eden .mehari-nav a {
  color: var(--mehari-dark);
  text-decoration: none;
  font-size: 0.92rem;
  font-weight: 500;
}
.mehari-eden .mehari-nav a:hover { color: var(--mehari-accent); }
.mehari-eden .mehari-header-actions {
  display: flex;
  align-items: center;
  gap: 18px;
}
.mehari-eden .mehari-gtranslate {
  display: flex;
  align-items: center;
  font-size: 0.85rem;
}

/* ---- Bouton hamburger (masqué par défaut, visible en dessous de 900px) ---- */
.mehari-eden .mehari-nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 32px;
  height: 32px;
  background: transparent;
  border: none;
  padding: 0;
  cursor: pointer;
  flex-shrink: 0;
}
.mehari-eden .mehari-nav-toggle span {
  display: block;
  width: 100%;
  height: 2px;
  border-radius: 2px;
  background: var(--mehari-dark);
  transition: transform 0.2s ease, opacity 0.2s ease;
}
.mehari-eden .mehari-nav-toggle.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.mehari-eden .mehari-nav-toggle.is-open span:nth-child(2) { opacity: 0; }
.mehari-eden .mehari-nav-toggle.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 900px) {
  /* Le header passe en 2 lignes : logo/actions/hamburger sur la 1re,
     le menu déroulant en pleine largeur sur la 2e, uniquement quand ouvert.
     Comme tout reste dans le flux normal du header (sticky), le menu
     grandit avec lui — pas de position fixed/absolute, donc pas de calcul
     de décalage à faire, et rien qui puisse être rogné par un conteneur
     Kadence autour. */
  .mehari-eden .mehari-header-inner { flex-wrap: wrap; }
  .mehari-eden .mehari-header-inner > .mehari-logo { order: 1; }
  .mehari-eden .mehari-header-inner > .mehari-header-actions { order: 2; }
  .mehari-eden .mehari-nav-toggle { display: flex; order: 3; }
  .mehari-eden .mehari-header-inner > nav { order: 4; flex: 1 1 100%; }

  .mehari-eden .mehari-nav {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    margin: 0;
    padding: 0;
    max-height: 0;
    overflow: hidden;
    background: var(--mehari-white);
    transition: max-height 0.25s ease;
  }
  .mehari-eden .mehari-nav.is-open {
    max-height: 420px;
    border-top: 1px solid var(--mehari-border);
  }
  .mehari-eden .mehari-nav li { border-top: 1px solid var(--mehari-border); }
  .mehari-eden .mehari-nav li:first-child { border-top: none; }
  .mehari-eden .mehari-nav a {
    display: block;
    padding: 14px 24px;
  }
}

@media (max-width: 402px) {
  .mehari-eden .mehari-header-actions {
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
  }
}

/* ======================================================================
   HERO — photo plein cadre construite en dur (évite le bug de bandes
   blanches rencontré avec les colonnes Kadence en pleine largeur).
   ====================================================================== */
.mehari-eden.mehari-hero {
  position: relative;
  width: 100%;
  min-height: 640px;
  display: flex;
  align-items: flex-end;
  overflow: visible;
  background: var(--mehari-cream-alt);
}
.mehari-eden .mehari-hero-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}
.mehari-eden .mehari-hero-credit {
  position: absolute;
  bottom: 14px;
  right: 18px;
  z-index: 2;
  font-size: 0.72rem;
  color: rgba(255,255,255,0.75);
  letter-spacing: 0.02em;
}
.mehari-eden .mehari-hero-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(0deg, rgba(20,15,10,0.6) 0%, rgba(20,15,10,0.15) 55%, rgba(20,15,10,0.05) 100%);
}
.mehari-eden .mehari-hero-inner {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 48px 24px 88px;
}
.mehari-eden .mehari-hero-badge {
  position: absolute;
  top: 32px;
  right: 24px;
  background: var(--mehari-white);
  border-radius: var(--radius-m);
  padding: 14px 20px;
  box-shadow: 0 12px 30px -14px rgba(0,0,0,0.35);
}
.mehari-eden .mehari-hero-badge strong {
  display: block;
  font-family: var(--font-heading);
  font-size: 1rem;
}
.mehari-eden .mehari-hero-badge span {
  font-size: 0.78rem;
  color: #837c6d;
}
.mehari-eden .mehari-hero-content {
  max-width: 620px;
  color: var(--mehari-white);
}
.mehari-eden .mehari-hero-content .mehari-hero-location {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--mehari-cream);
  margin-bottom: 1em;
}
.mehari-eden .mehari-hero-content h1 { color: var(--mehari-white); }
.mehari-eden .mehari-hero-content h1 em { color: var(--mehari-accent); }
.mehari-eden .mehari-hero-content p { color: rgba(255,255,255,0.88); }
.mehari-eden .mehari-hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 22px;
  margin-top: 1.6em;
}
.mehari-eden .btn-link-light {
  background: transparent;
  color: var(--mehari-white);
  padding: 0.9em 0;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* MIS EN ATTENTE — voir commentaire HTML correspondant dans le hero.
.mehari-eden .mehari-hero-colorswitch {
  position: absolute;
  left: 50%;
  bottom: -24px;
  transform: translateX(-50%);
  z-index: 3;
  display: flex;
  gap: 4px;
  background: var(--mehari-dark);
  border-radius: 999px;
  padding: 6px;
  box-shadow: 0 14px 30px -12px rgba(0,0,0,0.4);
}
.mehari-eden .mehari-hero-colorswitch button {
  display: flex;
  align-items: center;
  gap: 8px;
  border: none;
  background: transparent;
  color: rgba(255,255,255,0.7);
  font-family: var(--font-body);
  font-size: 0.85rem;
  font-weight: 500;
  padding: 10px 18px;
  border-radius: 999px;
  cursor: pointer;
}
.mehari-eden .mehari-hero-colorswitch button.is-active {
  background: var(--mehari-white);
  color: var(--mehari-dark);
  font-weight: 700;
}
.mehari-eden .mehari-hero-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  display: inline-block;
}
*/

/* ---- Bandeau de stats sous le hero ------------------------------- */
.mehari-eden.mehari-hero-stats-section {
  background: var(--mehari-cream);
  padding: 56px 0;
}
.mehari-eden .mehari-hero-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}
.mehari-eden .mehari-hero-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 0 24px;
  border-right: 1px solid var(--mehari-border);
}
.mehari-eden .mehari-hero-stat:last-child { border-right: none; }
.mehari-eden .mehari-hero-stat-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--mehari-accent);
  margin-bottom: 14px;
  flex-shrink: 0;
}
.mehari-eden .mehari-hero-stat-icon {
  width: 22px;
  height: 22px;
  color: var(--mehari-white);
  display: block;
}
.mehari-eden .mehari-hero-stat-text {
  display: block;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 0.95rem;
  line-height: 1.45;
  color: var(--mehari-dark);
  max-width: 210px;
}

@media (max-width: 900px) {
  .mehari-eden.mehari-hero { min-height: 560px; }
  .mehari-eden .mehari-hero-badge { position: static; margin: 0 24px 20px; display: inline-block; }
  .mehari-eden .mehari-hero-stats { grid-template-columns: 1fr 1fr; row-gap: 32px; }
  .mehari-eden .mehari-hero-stat { border-right: none; padding: 0 12px; }
  .mehari-eden .mehari-hero-stat:nth-child(odd) { border-right: 1px solid var(--mehari-border); }
}

/* ======================================================================
   TARIFS
   ====================================================================== */
.mehari-eden .mehari-pricing-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.mehari-eden .mehari-price-card {
  background: var(--mehari-white);
  border: 1px solid var(--mehari-border);
  border-radius: var(--radius-m);
  padding: 32px 28px;
  display: flex;
  flex-direction: column;
}
.mehari-eden .mehari-price-media {
  position: relative;
  margin: -32px -28px 20px;
  aspect-ratio: 16 / 10;
  border-radius: var(--radius-m) var(--radius-m) 0 0;
  overflow: hidden;
}
.mehari-eden .mehari-price-media img { width: 100%; height: 100%; object-fit: cover; }

/* ---- Carrousel photo en fondu lent (pur CSS, sans JS) ------------
   Fonctionne avec 2 images (par défaut) OU 3 images (détection
   automatique via :has()) — il suffit d'ajouter/retirer un <img>,
   rien d'autre à toucher. */
.mehari-eden .mehari-crossfade img {
  position: absolute;
  inset: 0;
  opacity: 0;
  animation: mehari-crossfade-loop 16s infinite;
}
.mehari-eden .mehari-crossfade img:nth-child(1) { animation-delay: 0s; }
.mehari-eden .mehari-crossfade img:nth-child(2) { animation-delay: 8s; }
@keyframes mehari-crossfade-loop {
  0%   { opacity: 1; }
  45%  { opacity: 1; }
  55%  { opacity: 0; }
  95%  { opacity: 0; }
  100% { opacity: 1; }
}

/* Variante 3 images : cycle plus long, réparti en 3 tiers égaux */
.mehari-eden .mehari-crossfade:has(img:nth-child(3)) img {
  animation-name: mehari-crossfade-loop3;
  animation-duration: 24s;
}
.mehari-eden .mehari-crossfade:has(img:nth-child(3)) img:nth-child(1) { animation-delay: 0s; }
.mehari-eden .mehari-crossfade:has(img:nth-child(3)) img:nth-child(2) { animation-delay: 8s; }
.mehari-eden .mehari-crossfade:has(img:nth-child(3)) img:nth-child(3) { animation-delay: 16s; }
@keyframes mehari-crossfade-loop3 {
  0%   { opacity: 1; }
  28%  { opacity: 1; }
  38%  { opacity: 0; }
  90%  { opacity: 0; }
  100% { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .mehari-eden .mehari-crossfade img { animation: none; opacity: 1; }
}
.mehari-eden .mehari-price-card--featured {
  border-color: var(--mehari-accent);
  box-shadow: 0 18px 40px -20px rgba(168,114,60,0.45);
  position: relative;
}
.mehari-eden .mehari-price-badge {
  position: absolute;
  top: 16px;
  left: 16px;
  background: var(--mehari-accent);
  color: var(--mehari-white);
  font-size: 0.72rem;
  font-weight: 700;
  padding: 5px 12px;
  border-radius: 999px;
}
.mehari-eden .mehari-price-duration {
  font-size: 0.85rem;
  color: #837c6d;
  margin-bottom: 0.6em;
}
.mehari-eden .mehari-price-amount {
  font-family: var(--font-heading);
  font-size: 2rem;
  margin: 0.2em 0 1em;
}
.mehari-eden .mehari-price-amount small {
  font-family: var(--font-body);
  font-size: 0.9rem;
  font-weight: 400;
  color: #837c6d;
}
.mehari-eden .mehari-price-list {
  list-style: none;
  margin: 0 0 1.6em;
  padding: 0;
  flex-grow: 1;
}
.mehari-eden .mehari-price-list li {
  padding: 8px 0;
  border-top: 1px solid var(--mehari-border);
  font-size: 0.9rem;
}
.mehari-eden .mehari-price-list li:first-child { border-top: none; }

.mehari-eden .mehari-price-color-links {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.mehari-eden .mehari-price-color-links .btn {
  justify-content: center;
  padding: 0.75em 1em;
  font-size: 0.9rem;
  white-space: nowrap;
}
.mehari-eden .mehari-price-note {
  max-width: 620px;
  margin: 32px auto 0;
  text-align: center;
  font-size: 0.85rem;
  color: #837c6d;
}
.mehari-eden .mehari-price-note a {
  color: var(--mehari-accent-dark);
  font-weight: 600;
}

@media (max-width: 900px) {
  .mehari-eden .mehari-pricing-grid { grid-template-columns: 1fr; }
}

/* ======================================================================
   NOS EDEN (couleurs)
   ⚠️ Les teintes ci-dessous sont indicatives — à ajuster sur les
   photos réelles des véhicules une fois livrées.
   ====================================================================== */
.mehari-eden .mehari-color-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  max-width: 720px;
  margin: 0 auto;
}
.mehari-eden .mehari-color-card {
  position: relative;
  display: block;
  border-radius: var(--radius-m);
  overflow: hidden;
  background: var(--mehari-cream-alt);
  text-decoration: none;
  color: inherit;
  transition: transform 0.15s ease;
}
.mehari-eden .mehari-color-card:hover { transform: translateY(-2px); }
.mehari-eden .mehari-color-swatch {
  aspect-ratio: 4/3;
  width: 100%;
  overflow: hidden;
}
.mehari-eden .mehari-color-swatch img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mehari-eden .mehari-color-swatch--citron { background: #F3D34A; }
.mehari-eden .mehari-color-swatch--grenache { background: #E0785A; }
.mehari-eden .mehari-color-swatch--rose-piscine { background: #E9C9D6; }
.mehari-eden .mehari-color-card--soon .mehari-color-swatch { opacity: 0.55; }
.mehari-eden .mehari-color-card--soon .mehari-color-body { opacity: 0.7; }
.mehari-eden .mehari-color-badge {
  position: absolute;
  top: 12px;
  right: 12px;
  background: rgba(255,255,255,0.92);
  color: #9c9484;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 4px 11px;
  border-radius: 999px;
  border: 1px dashed var(--mehari-border);
}
.mehari-eden .mehari-color-body { padding: 20px 22px 26px; }
.mehari-eden .mehari-color-body h3 { font-size: 1.15rem; margin-bottom: 0.3em; }
.mehari-eden .mehari-color-body p { font-size: 0.9rem; color: #6c665a; margin: 0; }

@media (max-width: 900px) {
  .mehari-eden .mehari-color-grid { grid-template-columns: 1fr; }
}

/* ======================================================================
   LE VÉHICULE
   ====================================================================== */
.mehari-eden .mehari-specs-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: start;
}
.mehari-eden .mehari-spec-list {
  list-style: none;
  margin: 1.6em 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px 24px;
}
.mehari-eden .mehari-spec-list li {
  border-top: 1px solid var(--mehari-border);
  padding-top: 10px;
}
.mehari-eden .mehari-spec-list strong {
  display: block;
  font-family: var(--font-heading);
  font-size: 1.05rem;
}
.mehari-eden .mehari-spec-list span {
  font-size: 0.82rem;
  color: #837c6d;
}
.mehari-eden .mehari-tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

/* ---- Accordéons (contenu secondaire / priorité 2) --------------- */
.mehari-eden .mehari-accordion {
  border-top: 1px solid var(--mehari-border);
  padding: 14px 0;
}
.mehari-eden .mehari-accordion:last-of-type { border-bottom: 1px solid var(--mehari-border); }
.mehari-eden .mehari-accordion summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-weight: 600;
  font-size: 0.95rem;
}
.mehari-eden .mehari-accordion summary::-webkit-details-marker { display: none; }
.mehari-eden .mehari-accordion summary::after {
  content: "+";
  font-size: 1.2rem;
  color: var(--mehari-accent);
  flex-shrink: 0;
  margin-left: 12px;
}
.mehari-eden .mehari-accordion[open] summary::after { content: "–"; }
.mehari-eden .mehari-accordion-body {
  font-size: 0.9rem;
  color: #6c665a;
  padding-top: 12px;
  line-height: 1.7;
}
.mehari-eden .mehari-accordion-body a { color: var(--mehari-accent-dark); }
.mehari-eden .mehari-accordion-list {
  list-style: none;
  margin: 0;
  padding: 12px 0 0;
  font-size: 0.9rem;
  color: #6c665a;
}
.mehari-eden .mehari-accordion-list li {
  padding: 6px 0 6px 18px;
  position: relative;
}
.mehari-eden .mehari-accordion-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 14px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--mehari-accent);
}
.mehari-eden .mehari-accordion-list a { color: var(--mehari-accent-dark); }
.mehari-eden .mehari-tag {
  background: var(--mehari-cream);
  border: 1px solid var(--mehari-border);
  border-radius: 999px;
  padding: 8px 16px;
  font-size: 0.82rem;
  font-weight: 500;
}
.mehari-eden .mehari-specs-media {
  border-radius: var(--radius-l);
  overflow: hidden;
  aspect-ratio: 3/4;
  background: var(--mehari-cream-alt);
}
.mehari-eden .mehari-specs-media img { width: 100%; height: 100%; object-fit: cover; }

@media (max-width: 900px) {
  .mehari-eden .mehari-specs-grid { grid-template-columns: 1fr; }
  .mehari-eden .mehari-spec-list { grid-template-columns: 1fr; }
}

/* ======================================================================
   GALERIE
   ====================================================================== */
.mehari-eden .mehari-gallery-tabs {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-bottom: 32px;
}
.mehari-eden .mehari-gallery-tab {
  border: 1px solid var(--mehari-border);
  background: var(--mehari-white);
  color: var(--mehari-dark);
  font-family: var(--font-body);
  font-size: 0.9rem;
  font-weight: 600;
  padding: 10px 22px;
  border-radius: 999px;
  cursor: pointer;
}
.mehari-eden .mehari-gallery-tab.is-active {
  background: var(--mehari-accent);
  border-color: var(--mehari-accent);
  color: var(--mehari-white);
}
.mehari-eden .mehari-gallery-subhead {
  font-family: var(--font-heading);
  font-size: 1.1rem;
  margin: 0 0 16px;
}
.mehari-eden .mehari-gallery-panel[hidden] { display: none; }

.mehari-eden .mehari-gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 220px;
  gap: 16px;
  margin-bottom: 40px;
}
.mehari-eden .mehari-gallery-item {
  position: relative;
  border-radius: var(--radius-m);
  overflow: hidden;
  background: var(--mehari-cream-alt);
}
.mehari-eden .mehari-gallery-item--tall { grid-row: span 2; }
.mehari-eden .mehari-gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  cursor: zoom-in;
}

.mehari-eden .mehari-gallery-videos {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.mehari-eden .mehari-gallery-videos video {
  width: 100%;
  aspect-ratio: 16/10;
  border-radius: var(--radius-m);
  background: var(--mehari-dark);
  object-fit: cover;
}

@media (max-width: 900px) {
  .mehari-eden .mehari-gallery-grid { grid-template-columns: 1fr 1fr; grid-auto-rows: 180px; }
  .mehari-eden .mehari-gallery-videos { grid-template-columns: 1fr; }
}

/* ---- Lightbox (clic sur une photo = affichage en grand) ---------- */
.mehari-eden .mehari-lightbox,
.mehari-lightbox {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 999;
  background: rgba(20,15,10,0.9);
  align-items: center;
  justify-content: center;
  padding: 40px;
}
.mehari-lightbox.is-open { display: flex; }
.mehari-lightbox-img {
  max-width: 90vw;
  max-height: 85vh;
  border-radius: 8px;
  object-fit: contain;
}
.mehari-lightbox-close {
  position: absolute;
  top: 24px;
  right: 28px;
  background: transparent;
  border: none;
  color: #fff;
  font-size: 2.2rem;
  line-height: 1;
  cursor: pointer;
}

/* ======================================================================
   PLUS D'ACTIVITÉS
   ====================================================================== */
.mehari-eden .mehari-activities-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
.mehari-eden .mehari-activity-card {
  background: var(--mehari-white);
  border: 1px solid var(--mehari-border);
  border-radius: var(--radius-m);
  padding: 26px 22px;
  display: block;
  text-decoration: none;
  color: inherit;
  transition: border-color 0.15s ease, transform 0.15s ease;
}
.mehari-eden .mehari-activity-card:hover {
  border-color: var(--mehari-accent);
  transform: translateY(-2px);
}
.mehari-eden .mehari-activity-media {
  aspect-ratio: 4 / 3;
  margin: -26px -22px 16px;
  border-radius: var(--radius-m) var(--radius-m) 0 0;
  overflow: hidden;
}
.mehari-eden .mehari-activity-media img { width: 100%; height: 100%; object-fit: cover; }
.mehari-eden .mehari-activity-card h4 {
  font-size: 1.02rem;
  margin-bottom: 0.4em;
}
.mehari-eden .mehari-activity-card p {
  font-size: 0.85rem;
  color: #837c6d;
  margin: 0;
}

@media (max-width: 900px) {
  .mehari-eden .mehari-activities-grid { grid-template-columns: 1fr 1fr; }
}

/* ======================================================================
   RÉSERVATION / CONTACT
   ⚠️ Le formulaire ci-dessous est un gabarit visuel : brancher sur le
   plugin de formulaire réellement utilisé (ou un shortcode Kadence/CF7).
   ====================================================================== */
.mehari-eden .mehari-contact-grid {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: 56px;
}
.mehari-eden .mehari-form-wrapper {
  background: var(--mehari-cream);
  border-radius: var(--radius-m);
  padding: 28px;
}
.mehari-eden .mehari-agency-card {
  background: var(--mehari-cream);
  border-radius: var(--radius-m);
  padding: 28px;
}
.mehari-eden .mehari-agency-card h4 { margin-bottom: 0.3em; }
.mehari-eden .mehari-agency-card p { font-size: 0.9rem; color: #6c665a; }

/* ---- Style du formulaire Contact Form 7 (structure par défaut) --- */
.mehari-eden .mehari-form-wrapper .wpcf7-form p {
  margin: 0 0 12px;
}
.mehari-eden .mehari-form-wrapper label {
  display: block;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--mehari-dark);
}
.mehari-eden .mehari-form-wrapper .wpcf7-form-control-wrap {
  display: block;
  margin-top: 4px;
}
.mehari-eden .mehari-form-wrapper .wpcf7-form-control {
  width: 100%;
  padding: 9px 12px;
  border: 1px solid var(--mehari-border);
  border-radius: var(--radius-s);
  font-family: var(--font-body);
  font-size: 0.9rem;
  background: var(--mehari-white);
}
.mehari-eden .mehari-form-wrapper textarea.wpcf7-form-control {
  resize: vertical;
  min-height: 80px;
}
.mehari-eden .mehari-form-wrapper input[type="submit"].wpcf7-form-control {
  width: auto;
  background: var(--mehari-accent);
  color: var(--mehari-white);
  border: none;
  border-radius: 999px;
  padding: 0.9em 1.7em;
  font-weight: 600;
  font-size: 0.95rem;
  cursor: pointer;
}
.mehari-eden .mehari-form-wrapper input[type="submit"].wpcf7-form-control:hover {
  background: var(--mehari-accent-dark);
}
.mehari-eden .mehari-form-wrapper .wpcf7-not-valid-tip {
  display: block;
  margin-top: 4px;
  font-size: 0.78rem;
  color: #b3413c;
}
.mehari-eden .mehari-form-wrapper .wpcf7-response-output {
  margin-top: 16px;
  padding: 12px 16px;
  border-radius: var(--radius-s);
  font-size: 0.85rem;
}

@media (max-width: 900px) {
  .mehari-eden .mehari-contact-grid { grid-template-columns: 1fr; }
}

/* ======================================================================
   FOOTER
   ====================================================================== */
.mehari-eden.mehari-footer {
  background: var(--mehari-dark);
  color: rgba(255,255,255,0.75);
  padding: 64px 0 32px;
}
.mehari-eden .mehari-footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 40px;
  padding-bottom: 40px;
  border-bottom: 1px solid rgba(255,255,255,0.12);
}
.mehari-eden .mehari-social-links {
  display: flex;
  gap: 12px;
  margin-top: 18px;
}
.mehari-eden .mehari-social-links a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.35);
  color: #ffffff;
  transition: border-color 0.15s ease;
}
.mehari-eden .mehari-social-links a:hover {
  border-color: var(--mehari-accent);
}
.mehari-eden .mehari-social-links svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}
.mehari-eden.mehari-footer h5 {
  color: var(--mehari-white);
  font-size: 0.82rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 1em;
}
.mehari-eden.mehari-footer ul { list-style: none; margin: 0; padding: 0; }
.mehari-eden.mehari-footer li { margin-bottom: 0.6em; }
.mehari-eden.mehari-footer a { color: inherit; text-decoration: none; }
.mehari-eden.mehari-footer a:hover { color: var(--mehari-accent); }
.mehari-eden .mehari-footer-bottom {
  padding-top: 24px;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  font-size: 0.78rem;
}

@media (max-width: 900px) {
  .mehari-eden .mehari-footer-grid { grid-template-columns: 1fr; }
}