/* ═══════════════════════════════════════════════════════════════════════
   WONDERS OF TUNISIA — MISE EN PAGE DE L'ACCUEIL (thème Nuit Luxe)
   ───────────────────────────────────────────────────────────────────────
   PRINCIPE : le visiteur doit pouvoir LIRE les informations essentielles
   de chaque excursion sans cliquer. Donc : photo en haut, puis un panneau
   sombre UNI en dessous pour le texte (jamais de texte posé sur la photo,
   sinon la lisibilité dépend de l'image).

   SYSTÈME DE COULEURS UNIQUE (une seule règle pour chaque type de texte) :
     • Titre        → blanc            var(--wt-title)
     • Description  → beige clair      var(--wt-text)
     • Infos / méta → gris doré        var(--wt-dim)
     • Prix         → blanc + doré     var(--wt-or)
     • Accent       → doré             var(--wt-or)
   ═══════════════════════════════════════════════════════════════════════ */

/* ───────── 1. GRILLE ───────── */
.exc-grid{
  display:grid !important;
  gap:clamp(16px,2vw,24px) !important;
  grid-template-columns:repeat(auto-fill,minmax(min(310px,100%),1fr)) !important;
  align-items:stretch;
}

/* ───────── 2. LA CARTE : photo + panneau texte ───────── */
/* ATTENTION — le « display:flex !important » ci-dessous empêchait les filtres
   (Mer & Îles, Désert, Culture, Famille) de fonctionner : la fonction de
   filtrage masque les cartes avec un style en ligne « display:none », et un
   style en ligne perd toujours contre un !important d'une feuille de style.
   La règle juste en dessous rétablit le masquage : elle est plus spécifique
   (sélecteur d'attribut) et reprend donc la priorité. */
.exc-grid .card[style*="display:none"],
.exc-grid .card[style*="display: none"],
.exc-grid .card.wt-hide{
  display:none !important;
}
.exc-grid .card{
  display:flex !important;
  flex-direction:column !important;
  position:relative;
  border-radius:20px !important;
  overflow:hidden;
  padding:0 !important;
  background:var(--wt-surf) !important;          /* panneau sombre uni */
  border:1px solid var(--wt-line) !important;
  box-shadow:none !important;
  transition:transform .45s var(--wt-e), box-shadow .45s, border-color .35s;
}
.exc-grid .card:hover{
  transform:translateY(-6px);
  border-color:var(--wt-line-str) !important;
  box-shadow:0 24px 56px rgba(0,0,0,.5) !important;
}
/* le lien qui enveloppe l'image ne casse pas la mise en page */
.exc-grid .card > a{display:contents}
/* Le halo doré du thème passait PAR-DESSUS le texte : on le désactive ici,
   le simple soulèvement au survol suffit et le texte reste net. */
.exc-grid .card::after{display:none !important}
.exc-grid .card::before{display:none !important}
/* Toutes les cartes ont exactement la même forme et la même taille
   (y compris celle mise en avant) : grille régulière et lisible. */
.exc-grid .card.featured{grid-column:auto !important}

/* ───────── 3. LA PHOTO (hauteur identique pour toutes les cartes) ───────── */
.exc-grid .card .card-img-wrap{
  position:relative !important;
  inset:auto !important;
  width:100% !important;
  height:auto !important;
  aspect-ratio:16/10;
  overflow:hidden;
  border-radius:0 !important;
  margin:0 !important;
  flex:none;
}
.exc-grid .card .card-img-wrap img{
  width:100% !important;height:100% !important;object-fit:cover !important;
  filter:none;
  transition:transform .9s var(--wt-e);
}
.exc-grid .card:hover .card-img-wrap img{transform:scale(1.06)}
/* petit dégradé en bas de la photo : liaison douce avec le panneau */
.exc-grid .card .card-img-wrap::after{
  content:'';position:absolute;left:0;right:0;bottom:0;height:38%;
  background:linear-gradient(to top, var(--wt-surf), transparent);
  pointer-events:none;
}

/* Badges sur la photo (en haut à gauche) */
.exc-grid .card .card-badges{
  position:absolute;top:12px;left:12px;right:12px;z-index:3;
  display:flex;flex-wrap:wrap;gap:6px;
}
.exc-grid .card .badge{
  background:rgba(13,9,6,.72) !important;color:#fff !important;
  border:1px solid rgba(255,255,255,.18) !important;
  backdrop-filter:blur(8px);
  font-size:10.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  padding:6px 11px;border-radius:99px;line-height:1.2;
}
.exc-grid .card .badge.b-pop{background:var(--wt-or) !important;border-color:var(--wt-or) !important}
/* Note sur la photo (en bas à droite) */
.exc-grid .card .card-rate{
  position:absolute;top:auto;bottom:10px;right:12px;left:auto;z-index:3;
  display:inline-flex;align-items:center;gap:6px;
  background:rgba(13,9,6,.78);backdrop-filter:blur(8px);
  border:1px solid rgba(255,255,255,.16);border-radius:99px;
  padding:5px 11px;font-size:11px;color:#fff !important;line-height:1.2;
  white-space:nowrap;max-width:calc(100% - 24px);overflow:hidden;
}
.exc-grid .card .card-rate .stars{color:var(--wt-or) !important;font-size:10px}

/* ───────── 4. LE PANNEAU TEXTE (tout est lisible) ───────── */
.exc-grid .card .card-body{
  position:relative;z-index:2;
  display:flex;flex-direction:column;gap:9px;
  padding:18px 20px 0 !important;
  background:transparent !important;
  flex:1 1 auto;
}
/* Infos courtes (durée, départ) */
.exc-grid .card .card-meta{
  display:flex;flex-wrap:wrap;gap:6px 14px;
  font-size:12px;font-weight:500;color:var(--wt-dim) !important;
  margin:0 !important;
}
.exc-grid .card .card-meta span{color:inherit !important}
/* Titre : une seule taille, une seule couleur */
.exc-grid .card .card-title{
  font-family:var(--f-d);font-weight:600;
  font-size:1.32rem !important;line-height:1.2;
  color:var(--wt-title) !important;margin:0 !important;
}
.exc-grid .card .card-title a{color:inherit !important}
.exc-grid .card:hover .card-title a{color:var(--wt-or-l) !important}
/* Description : visible (3 lignes), même couleur partout */
.exc-grid .card .card-desc{
  font-size:13.5px;line-height:1.6;
  color:var(--wt-text) !important;margin:0 !important;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
}
/* Étiquettes : toutes identiques */
.exc-grid .card .card-tags{display:flex;flex-wrap:wrap;gap:6px;margin:2px 0 0 !important}
.exc-grid .card .tag{
  background:rgba(255,255,255,.06) !important;
  color:var(--wt-dim) !important;
  border:1px solid var(--wt-line) !important;
  font-size:11px;font-weight:500;padding:4px 10px;border-radius:8px;line-height:1.3;
}

/* ───────── 5. PIED DE CARTE : prix + bouton ───────── */
.exc-grid .card .card-foot{
  position:relative;z-index:2;margin:0 !important;
  padding:15px 20px 18px !important;
  margin-top:auto !important;
  border-top:1px solid var(--wt-line) !important;
  background:transparent !important;
  display:flex;align-items:center;justify-content:space-between;gap:12px;
}
.exc-grid .card .price-from{
  display:block;font-size:10px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--wt-dim) !important;margin-bottom:2px;
}
.exc-grid .card .price-val{
  font-family:var(--f-d);font-weight:700;font-size:1.7rem !important;
  color:var(--wt-title) !important;line-height:1;
}
.exc-grid .card .price-unit{font-size:11.5px;color:var(--wt-dim) !important}
.exc-grid .card .card-btn{
  background:var(--wt-or) !important;color:#fff !important;border:none !important;
  padding:11px 18px !important;border-radius:11px !important;
  font-size:12.5px;font-weight:700;white-space:nowrap;
  transition:.28s var(--wt-e);
}
.exc-grid .card:hover .card-btn{background:var(--wt-or-l) !important;color:#241A11 !important}

/* ───────── 6. HERO : pastille d'accroche ───────── */
.hero-kicker{
  display:inline-flex;align-items:center;gap:10px;
  padding:8px 18px;border-radius:99px;margin-bottom:22px;
  border:1px solid rgba(200,133,74,.36);background:rgba(200,133,74,.11);
  backdrop-filter:blur(10px);
  font-size:11px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  color:var(--wt-or-l);
}
.hero-kicker .dot{
  width:7px;height:7px;border-radius:50%;background:#4ADE80;flex:none;
  box-shadow:0 0 0 0 rgba(74,222,128,.7);animation:wtPulse 2.2s infinite;
}
@keyframes wtPulse{70%{box-shadow:0 0 0 9px rgba(74,222,128,0)}100%{box-shadow:0 0 0 0 rgba(74,222,128,0)}}
/* Bandeau de confiance : on garde la mise en page d'origine, juste la couleur */
.hero-trust .trust-item strong{color:var(--wt-or) !important}

/* ───────── 7. LÉGENDE DU HERO (suit la photo affichée) ───────── */
.wt-cap{
  position:absolute;right:clamp(16px,4vw,44px);bottom:clamp(96px,13vh,130px);z-index:4;
  display:grid;gap:5px;max-width:min(88vw,320px);
  padding:15px 19px;border-radius:15px;text-decoration:none;
  background:rgba(13,9,6,.66);backdrop-filter:blur(16px) saturate(140%);
  border:1px solid rgba(255,255,255,.17);
  box-shadow:0 18px 44px rgba(0,0,0,.45);
  opacity:0;transform:translateY(14px);
  transition:opacity .55s var(--wt-e), transform .55s var(--wt-e), border-color .3s;
  pointer-events:none;text-align:left;
}
.wt-cap.wt-cap-on{opacity:1;transform:none;pointer-events:auto}
.wt-cap:hover{border-color:var(--wt-or)}
.wt-cap-name{font-family:var(--f-d);font-size:1.18rem;font-weight:600;color:#fff;line-height:1.15}
.wt-cap-price{font-size:12.5px;font-weight:600;color:var(--wt-or-l)}
.wt-cap-closed{border-color:rgba(245,158,11,.4)}
.wt-cap-closed .wt-cap-price{color:#FCD34D}
.wt-cap-closed .wt-cap-go b{color:#F59E0B}
.wt-cap-live{display:inline-flex;align-items:center;gap:7px;font-size:11.5px;color:#86EFAC}
.wt-cap-live i{width:7px;height:7px;border-radius:50%;background:#4ADE80;flex:none;
  box-shadow:0 0 0 0 rgba(74,222,128,.7);animation:wtPulse 2.2s infinite}
.wt-cap-go{
  margin-top:6px;padding-top:9px;border-top:1px solid rgba(255,255,255,.15);
  font-size:10.5px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:#fff;
  display:flex;align-items:center;gap:8px;
}
.wt-cap-go b{color:var(--wt-or);transition:transform .3s var(--wt-e)}
.wt-cap:hover .wt-cap-go b{transform:translateX(5px)}

/* ───────── 8. ENCART DE DISPONIBILITÉS RÉELLES ───────── */
.wt-avail{
  display:inline-flex;align-items:center;gap:11px;flex-wrap:wrap;
  margin:4px 0 22px;padding:11px 20px;border-radius:99px;
  border:1px solid rgba(74,222,128,.34);background:rgba(74,222,128,.09);
  backdrop-filter:blur(10px);font-size:13.5px;color:var(--wt-text);
}
.wt-avail[hidden]{display:none}
.wt-avail .dot{
  width:8px;height:8px;border-radius:50%;background:#4ADE80;flex:none;
  box-shadow:0 0 0 0 rgba(74,222,128,.7);animation:wtPulse 2.2s infinite;
}
.wt-avail .wt-avail-lbl{
  font-size:10.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:#86EFAC;padding-right:11px;border-right:1px solid rgba(255,255,255,.16);
}
.wt-avail .wt-avail-txt b{font-family:var(--f-d);font-size:1.5em;font-weight:700;color:#fff;margin-right:3px}
.wt-avail.wt-low{border-color:rgba(245,158,11,.5);background:rgba(245,158,11,.12)}
.wt-avail.wt-low .wt-avail-lbl{color:#FCD34D}
.wt-avail.wt-low .dot{background:#F59E0B;box-shadow:0 0 0 0 rgba(245,158,11,.75);animation:wtPulseWarn 1.6s infinite}
.wt-avail.wt-full{border-color:rgba(248,113,113,.45);background:rgba(248,113,113,.10)}
.wt-avail.wt-full .wt-avail-lbl{color:#FCA5A5}
.wt-avail.wt-full .dot{background:#F87171;animation:none}
@keyframes wtPulseWarn{70%{box-shadow:0 0 0 10px rgba(245,158,11,0)}100%{box-shadow:0 0 0 0 rgba(245,158,11,0)}}

/* ───────── 9. BANDEAU DÉFILANT ───────── */
.wt-marquee{border-block:1px solid var(--wt-line);background:var(--wt-bg-2);padding-block:16px;overflow:hidden}
.wt-marquee-in{display:flex;gap:52px;width:max-content;animation:wtSlide 40s linear infinite}
.wt-marquee:hover .wt-marquee-in{animation-play-state:paused}
.wt-marquee i{
  font-family:var(--f-d);font-style:normal;white-space:nowrap;
  font-size:clamp(1.05rem,2.2vw,1.6rem);color:var(--wt-dim);
  display:flex;align-items:center;gap:52px;
}
.wt-marquee i::after{content:'✦';color:var(--wt-or);font-size:.78em}
@keyframes wtSlide{to{transform:translateX(-50%)}}

/* ───────── 10. ÉTAPES « COMMENT ÇA MARCHE » ───────── */
.wt-steps{
  display:grid;gap:clamp(1.3rem,3vw,2.4rem);
  grid-template-columns:repeat(auto-fit,minmax(min(230px,100%),1fr));
  counter-reset:wtS;margin-top:8px;
}
.wt-step{position:relative;padding-top:32px;counter-increment:wtS}
.wt-step::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:rgba(255,255,255,.1)}
.wt-step::after{content:'';position:absolute;top:0;left:0;width:0;height:2px;background:var(--wt-or);transition:width 1.2s var(--wt-e) .2s}
.wt-step.wt-on::after{width:100%}
.wt-step b{display:block;font-family:var(--f-d);font-size:1.4rem;color:var(--wt-title);margin-bottom:7px;font-weight:600}
.wt-step b::before{
  content:'0' counter(wtS);display:block;
  font-family:var(--f-b);font-size:11px;font-weight:700;letter-spacing:.18em;
  color:var(--wt-or);margin-bottom:9px;
}
.wt-step p{font-size:14px;color:var(--wt-dim);margin:0}

/* ───────── 11. BANDEAU DE RÉASSURANCE ───────── */
.reassure-bar{background:var(--wt-bg-2) !important;border-block:1px solid var(--wt-line) !important}
.reassure-inner{color:var(--wt-text) !important}
.reassure-item strong{color:var(--wt-title) !important;font-weight:600}

/* ═══════════════════════════════════════════════════════════════════════
   VERSION TÉLÉPHONE
   Le hero est un conteneur flex : on RÉSERVE de la place en bas pour le
   bandeau de confiance (fonctionne quelle que soit la longueur du texte,
   donc aussi en allemand).
   ═══════════════════════════════════════════════════════════════════════ */
@media(max-width:900px){
  .wt-cap{display:none !important}          /* les cartes en dessous donnent déjà l'info */
  .exc-grid{grid-template-columns:1fr !important}
  .hero{padding-bottom:118px}
  .hero-trust{gap:8px 16px;bottom:30px;padding:0 14px}
  .hero .hero-content{padding-bottom:0}
  .hero-kicker{font-size:10px;letter-spacing:.12em;padding:7px 14px;max-width:92%;justify-content:center;flex-wrap:wrap}
  .wt-marquee{padding-block:12px}
  .wt-marquee-in{gap:30px}
  .wt-marquee i{font-size:1rem;gap:30px}
  .wt-avail{display:flex;width:100%;justify-content:center;text-align:center;padding:11px 15px;font-size:12.5px;gap:9px}
  .wt-avail .wt-avail-lbl{font-size:9.5px;letter-spacing:.1em;padding-right:9px}
  .wt-steps{gap:1.5rem}
  .wt-step{padding-top:26px}
  .wt-step b{font-size:1.25rem}
}

@media(max-width:560px){
  .hero{padding-bottom:132px}
  .hero-trust{gap:6px 14px;font-size:10.5px}
  .hero-trust .trust-item strong{font-size:14px}
  /* Les cartes restent complètes et lisibles, juste un peu plus compactes */
  .exc-grid .card .card-img-wrap{aspect-ratio:16/11}
  .exc-grid .card .card-title{font-size:1.22rem !important}
  .exc-grid .card .card-desc{font-size:13px;-webkit-line-clamp:3}
  .exc-grid .card .card-body{padding:16px 17px 0 !important}
  .exc-grid .card .card-foot{padding:13px 17px 16px !important}
  .exc-grid .card .price-val{font-size:1.5rem !important}
  .exc-grid .card .card-btn{padding:10px 15px !important;font-size:12px}
  .wt-marquee i{font-size:.92rem}
  .wt-step b{font-size:1.15rem}
}

@media (prefers-reduced-motion: reduce){
  .wt-cap{transition:none}
  .wt-marquee-in{animation:none}
}


/* ═══════════════════════════════════════════════════════════════════════════
   BADGE « TRANSPORT INCLUS » DANS LES CARTES
   ---------------------------------------------------------------------------
   Il occupait sa propre ligne, en 12px, alors que les autres tags sont en
   11px : il paraissait plus gros et decalait la mise en page. Il fait
   maintenant partie de la meme ligne et a exactement la meme taille, tout en
   gardant sa couleur verte pour rester repérable.
   ═══════════════════════════════════════════════════════════════════════════ */
.exc-grid .card .card-tags .wt-inc{
  font-size:11px !important;
  font-weight:600 !important;
  padding:4px 10px 4px 8px !important;
  gap:4px !important;
  border-radius:99px !important;
}
.exc-grid .card .card-tags .wt-inc::before{font-size:10px}

/* Hauteur fixe pour la description (3 lignes) : sans elle, une description
   plus courte remontait les tags et les cartes n'etaient plus alignees
   entre elles — c'est ce qui decalait la carte Grand Heritage. */
.exc-grid .card .card-desc{min-height:4.8em}

@media(max-width:560px){
  .exc-grid .card .card-tags .wt-inc{font-size:10.5px !important;padding:3px 9px 3px 7px !important}
}