/* ═══════════════════════════════════════════════════════════════════════
   WONDERS OF TUNISIA — THÈME « NUIT LUXE »
   ───────────────────────────────────────────────────────────────────────
   Ce fichier est une COUCHE DE THÈME : il se pose par-dessus le style
   existant de chaque page, sans toucher au HTML ni aux scripts.
   → Aucun risque pour le paiement, les calendriers ou les formulaires.

   MODE CLAIR / SOMBRE (pour plus tard) :
   tout est piloté par les variables ci-dessous.
     - <html> sans attribut          → sombre (par défaut)
     - <html data-theme="light">     → clair
   Il suffira d'un bouton qui change cet attribut.
   ═══════════════════════════════════════════════════════════════════════ */

/* ───────── 1. JETONS DE THÈME ───────── */
:root{
  /* Surfaces */
  --wt-bg:        #0D0906;   /* fond de page */
  --wt-bg-2:      #120C08;   /* sections alternées */
  --wt-surf:      #171009;   /* cartes */
  --wt-surf-2:    #1F160E;   /* cartes survolées / champs */
  --wt-line:      rgba(200,133,74,.18);
  --wt-line-str:  rgba(200,133,74,.42);

  /* Textes */
  --wt-title:     #FFFFFF;
  --wt-text:      #CFC2B2;
  --wt-dim:       #8E7D6A;

  /* Accents */
  --wt-or:        #C8854A;
  --wt-or-l:      #E8B587;
  --wt-or-d:      #A66A38;
  --wt-mer:       #4FA3B8;
  --wt-vert:      #25D366;

  /* Effets */
  --wt-glass:     rgba(255,255,255,.045);
  --wt-glass-2:   rgba(255,255,255,.075);
  --wt-shadow:    0 24px 60px rgba(0,0,0,.55);
  --wt-e:         cubic-bezier(.22,1,.36,1);

  /* On remappe les variables du site (fond + textes seulement,
     on garde --nuit et --blanc intacts : ils servent aussi de fond ailleurs) */
  --sable:   var(--wt-bg);
  --sable-d: var(--wt-bg-2);
  --texte:   var(--wt-text);
  --texte-lt:var(--wt-dim);
  --bord:    var(--wt-line);
  --dune-d:  #DDA469;         /* survol plus clair sur fond sombre */
  color-scheme: dark;
}

/* ───────── MODE CLAIR (prêt pour le futur bouton) ───────── */
[data-theme="light"]{
  --wt-bg:#F7F0E6; --wt-bg-2:#FFFDF8; --wt-surf:#FFFFFF; --wt-surf-2:#FBF5EA;
  --wt-line:#E8DECB; --wt-line-str:#C8854A;
  /* Doré adapté au fond clair. Valeurs choisies par calcul de contraste :
     #985F2F donne 4,63 sur le crème et 5,23 sur le blanc — au-dessus du
     minimum de 4,5 exigé pour du texte lisible. Les tons clairs d'origine
     (#E8B587) tombaient à 1,9 sur le crème : illisibles. */
  --wt-or:#985F2F; --wt-or-l:#985F2F; --wt-or-d:#7E4B21;
  --wt-title:#1A1208; --wt-text:#2A2018; --wt-dim:#6B5D4F;
  --wt-glass:rgba(26,18,8,.03); --wt-glass-2:rgba(26,18,8,.06);
  --wt-shadow:0 18px 46px rgba(26,18,8,.12);
  --dune-d:#A86A35;
  color-scheme: light;
}

/* ───────── 2. BASE ───────── */
body{
  background:var(--wt-bg) !important;
  color:var(--wt-text);
}
::selection{background:var(--wt-or);color:#fff}
:focus-visible{outline:2px solid var(--wt-or);outline-offset:3px}
h1,h2,h3,h4{color:var(--wt-title)}
/* Halo doré diffus en fond de page : donne de la profondeur */
body::before{
  content:'';position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(60% 45% at 78% 4%, rgba(200,133,74,.10), transparent 70%),
    radial-gradient(50% 40% at 6% 42%, rgba(79,163,184,.07), transparent 70%);
}
[data-theme="light"] body::before{opacity:.5}

/* ───────── 3. NAVIGATION ───────── */
.nav{
  background:color-mix(in srgb, var(--wt-bg) 78%, transparent) !important;
  backdrop-filter:blur(20px) saturate(150%);
  border-bottom:1px solid var(--wt-line) !important;
  transition:background .35s var(--wt-e), height .35s var(--wt-e);
}
.nav.wt-tight{background:color-mix(in srgb, var(--wt-bg) 94%, transparent) !important}
.logo-text{color:var(--wt-title) !important}
.logo-text em{color:var(--wt-or) !important}
.nav-links a{color:var(--wt-text);position:relative}
.nav-links a::after{
  content:'';position:absolute;left:0;bottom:-6px;width:100%;height:1.5px;
  background:var(--wt-or);transform:scaleX(0);transform-origin:left;
  transition:transform .4s var(--wt-e);
}
.nav-links a:hover{color:var(--wt-title)}
.nav-links a:hover::after{transform:scaleX(1)}
.nav-back{color:var(--wt-dim)}
.nav-back:hover{color:var(--wt-or)}
.nav-cta{
  background:var(--wt-or) !important;color:#fff !important;
  box-shadow:0 8px 26px rgba(200,133,74,.28);
  transition:transform .28s var(--wt-e), box-shadow .28s, background .28s;
}
.nav-cta:hover{transform:translateY(-2px);box-shadow:0 14px 36px rgba(200,133,74,.44)}
.nav-mob{color:var(--wt-title)}

/* Sélecteur de langue */
.lang-toggle{
  background:color-mix(in srgb, var(--wt-surf) 88%, transparent) !important;
  border:1px solid var(--wt-line);backdrop-filter:blur(14px);
  box-shadow:0 6px 20px rgba(0,0,0,.4) !important;
}
.lang-toggle button{color:var(--wt-dim) !important}
.lang-toggle button:hover{color:var(--wt-or-l) !important}
.lang-toggle button.active{background:var(--wt-or) !important;color:#fff !important}

/* Menu mobile */
.mob-overlay{background:var(--wt-bg) !important}
.mob-overlay a{color:var(--wt-title) !important;border-bottom-color:var(--wt-line) !important}
.mob-close{color:var(--wt-title)}
.mob-overlay .mob-lang button{
  background:var(--wt-surf-2) !important;color:var(--wt-text) !important;
  border-color:var(--wt-line) !important;
}
.mob-overlay .mob-lang button.active{background:var(--wt-or) !important;color:#fff !important;border-color:var(--wt-or) !important}

/* ───────── 4. HERO D'ACCUEIL (par-dessus le diaporama) ───────── */
.hero{position:relative;isolation:isolate;overflow:hidden;background:var(--wt-bg)}
/* voile dégradé pour garder le texte lisible sur les photos */
.hero::before{
  content:'';position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    radial-gradient(120% 85% at 12% 88%, rgba(13,9,6,.94), transparent 62%),
    linear-gradient(to top, var(--wt-bg) 1%, rgba(13,9,6,.62) 34%, rgba(13,9,6,.30) 72%, rgba(13,9,6,.42) 100%);
}
[data-theme="light"] .hero::before{
  background:linear-gradient(to top, rgba(0,0,0,.72), rgba(0,0,0,.35) 55%, rgba(0,0,0,.25));
}
.hero .hero-dunes{z-index:2}
.hero-content{position:relative;z-index:3}
.hero h1{color:#fff !important;text-shadow:0 2px 30px rgba(0,0,0,.5)}
.hero h1 em{
  font-style:italic;
  background:linear-gradient(102deg, var(--wt-or-l), var(--wt-or) 52%, #fff);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.hero p{color:rgba(255,255,255,.9) !important;text-shadow:0 1px 18px rgba(0,0,0,.5)}
.hero-trust{
  border-top:1px solid rgba(255,255,255,.18);
  backdrop-filter:blur(6px);
}
.hero-trust .trust-item{color:rgba(255,255,255,.82)}
.hero-trust .trust-item strong{color:#fff}
/* Révélation du titre mot par mot (posée par le JS) */
.hero h1 .wt-w{display:inline-block;overflow:hidden;vertical-align:top}
.hero h1 .wt-w>span{display:inline-block;transform:translateY(105%);animation:wtUp 1.05s var(--wt-e) forwards}
@keyframes wtUp{to{transform:none}}

/* ───────── 5. SECTIONS ───────── */
/* Les sections avaient un fond blanc en style « inline » → on force le sombre */
.section[style*="background:white"],
.section[style*="background: white"],
.section[style*="#fff"]{background:var(--wt-bg-2) !important}
.reviews-bg{background:var(--wt-bg-2) !important}
.lune-bg{background:var(--wt-bg) !important}
.eyebrow{color:var(--wt-or) !important;letter-spacing:2.6px}
.sec-title{color:var(--wt-title) !important}
.sec-sub{color:var(--wt-dim) !important}

/* ───────── 6. BOUTONS ───────── */
.btn{position:relative;overflow:hidden;transition:transform .3s var(--wt-e), box-shadow .3s, color .3s, background .3s}
.btn-dune{background:var(--wt-or) !important;color:#fff !important;box-shadow:0 12px 32px rgba(200,133,74,.3)}
.btn-dune::before{
  content:'';position:absolute;inset:0;z-index:0;
  background:linear-gradient(100deg,var(--wt-or-l),#fff);
  transform:translateY(101%);transition:transform .45s var(--wt-e);
}
.btn-dune:hover{color:#2A2018 !important;transform:translateY(-3px);box-shadow:0 18px 44px rgba(200,133,74,.42)}
.btn-dune:hover::before{transform:none}
.btn-dune>*{position:relative;z-index:1}
.btn-out{
  color:#fff !important;border:1px solid rgba(255,255,255,.32) !important;
  backdrop-filter:blur(10px);background:rgba(255,255,255,.06) !important;
}
.btn-out:hover{background:rgba(200,133,74,.16) !important;border-color:var(--wt-or) !important;color:#fff !important;transform:translateY(-3px)}
.btn-wa{box-shadow:0 12px 32px rgba(37,211,102,.28)}
.btn-wa:hover{transform:translateY(-3px)}

/* ───────── 7. CARTES D'EXCURSION ───────── */
.card{
  background:linear-gradient(165deg, var(--wt-glass-2), var(--wt-glass)) !important;
  border:1px solid var(--wt-line) !important;
  backdrop-filter:blur(10px);
  box-shadow:none !important;
  transform-style:preserve-3d;
  transition:transform .5s var(--wt-e), box-shadow .5s, border-color .4s, background .4s;
  position:relative;
}
.card:hover{
  border-color:var(--wt-line-str) !important;
  box-shadow:var(--wt-shadow) !important;
  background:linear-gradient(165deg, rgba(200,133,74,.10), var(--wt-glass)) !important;
}
/* halo doré qui suit la souris (variables posées par le JS) */
.card::after{
  content:'';position:absolute;inset:0;z-index:3;pointer-events:none;border-radius:inherit;
  background:radial-gradient(260px circle at var(--wt-mx,50%) var(--wt-my,50%), rgba(200,133,74,.16), transparent 62%);
  opacity:0;transition:opacity .4s;
}
.card:hover::after{opacity:1}
.card-img-wrap img{filter:saturate(.95) brightness(.88);transition:transform .9s var(--wt-e), filter .5s}
.card:hover .card-img-wrap img{transform:scale(1.07);filter:saturate(1.05) brightness(1)}
.card-title{color:var(--wt-title) !important}
.card-title a{color:inherit}
.card-title a:hover{color:var(--wt-or-l) !important}
.card-desc{color:var(--wt-dim) !important}
.card-meta span{color:var(--wt-dim)}
.card-body,.card-foot{position:relative;z-index:4}
.card-foot{border-top:1px solid var(--wt-line) !important}
.price-from{color:var(--wt-dim) !important}
.price-val{color:var(--wt-title) !important}
.price-unit{color:var(--wt-dim) !important}
.card-btn{
  background:rgba(255,255,255,.08) !important;color:#fff !important;
  border:1px solid var(--wt-line) !important;transition:.3s var(--wt-e);
}
.card:hover .card-btn{background:var(--wt-or) !important;border-color:var(--wt-or) !important}
/* Étiquettes et badges en verre */
.tag{
  background:rgba(255,255,255,.07) !important;color:var(--wt-text) !important;
  border:1px solid var(--wt-line) !important;
}
.badge{backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.18)}
.card-rate{color:var(--wt-text)}
.stars{color:var(--wt-or) !important}

/* ───────── 8. FILTRES ───────── */
.filter-btn{
  background:var(--wt-glass) !important;color:var(--wt-text) !important;
  border:1px solid var(--wt-line) !important;transition:.28s var(--wt-e);
}
.filter-btn:hover{border-color:var(--wt-line-str) !important;color:var(--wt-title) !important}
.filter-btn.on{background:var(--wt-or) !important;color:#fff !important;border-color:var(--wt-or) !important}

/* ───────── 9. FORMULAIRE DE TRANSFERTS (doit rester très lisible) ───────── */
.transfers-form{
  background:linear-gradient(165deg, var(--wt-surf), var(--wt-bg-2)) !important;
  border:1px solid var(--wt-line) !important;
  box-shadow:var(--wt-shadow) !important;
}
.transfers-form h2{color:var(--wt-title) !important}
.transfers-field label{color:var(--wt-dim) !important}
.transfers-field select,.transfers-field input,
.field select,.field input{
  background:var(--wt-surf-2) !important;color:var(--wt-text) !important;
  border:1.5px solid var(--wt-line) !important;
}
.transfers-field select:focus,.transfers-field input:focus,
.field select:focus,.field input:focus{
  /* ATTENTION — il y avait ici « background:#241A11 », une couleur sombre fixe.
     En mode clair le champ restait donc noir alors que le texte devenait
     foncé : on ne voyait plus ce qu'on tapait. On utilise maintenant une
     variable de thème, qui s'adapte automatiquement aux deux modes. */
  border-color:var(--wt-or) !important;
  background:var(--wt-surf) !important;
  color:var(--wt-text) !important;
  box-shadow:0 0 0 4px rgba(200,133,74,.14) !important;
}
/* listes déroulantes lisibles sur Windows */
select option{background:#1F160E;color:#EDE3D6}
input::placeholder{color:#7A6A58}
input[type="date"],input[type="time"]{color-scheme:dark}
[data-theme="light"] input[type="date"],[data-theme="light"] input[type="time"]{color-scheme:light}
.dir-btn{
  background:var(--wt-surf-2) !important;color:var(--wt-text) !important;
  border:1.5px solid var(--wt-line) !important;
}
.dir-btn:hover{border-color:var(--wt-line-str) !important}
.dir-btn.active{background:var(--wt-or) !important;color:#fff !important;border-color:var(--wt-or) !important}
.transfers-info{background:rgba(200,133,74,.09) !important;border:1px solid var(--wt-line) !important}
.transfers-info p{color:var(--wt-text) !important}
.transfers-btn{box-shadow:0 12px 32px rgba(37,211,102,.26)}
.transfers-btn:hover{transform:translateY(-2px)}
.transfers-features{border-top:1px solid var(--wt-line) !important}
.feature-item{color:var(--wt-dim)}

/* ───────── 10. AVIS ───────── */
.ta-badge{background:var(--wt-glass) !important;border:1px solid var(--wt-line) !important;backdrop-filter:blur(10px)}
.ta-badge .stars-big{color:var(--wt-or)}
.review{
  background:linear-gradient(160deg, var(--wt-glass-2), var(--wt-glass)) !important;
  border:1px solid var(--wt-line) !important;backdrop-filter:blur(12px);
  transition:transform .45s var(--wt-e), border-color .4s, background .4s;
}
.review:hover{
  transform:translateY(-6px);border-color:var(--wt-line-str) !important;
  background:linear-gradient(160deg, rgba(200,133,74,.10), var(--wt-glass)) !important;
}
.review-stars{color:var(--wt-or) !important}
.review-quote{color:var(--wt-title) !important}
.review-name{color:var(--wt-or-l) !important}
.review-loc,.review-trip{color:var(--wt-dim) !important}
.reviews-cta a{color:var(--wt-or-l)}

/* ───────── 11. GALERIE D'AMBIANCE ───────── */
.lune-grid > div{border:1px solid var(--wt-line);border-radius:14px;overflow:hidden}
.lune-grid > div img{filter:saturate(.92) brightness(.82);transition:transform .9s var(--wt-e), filter .5s}
.lune-grid > div:hover img{transform:scale(1.06);filter:saturate(1.05) brightness(1)}

/* ───────── 12. FAQ ───────── */
.faq-q{
  background:var(--wt-glass) !important;border:1px solid var(--wt-line) !important;
  backdrop-filter:blur(10px);transition:border-color .3s, background .3s;
}
.faq-q[open]{border-color:var(--wt-line-str) !important;background:var(--wt-glass-2) !important}
.faq-q summary{color:var(--wt-title) !important}
.faq-q summary::after{color:var(--wt-or) !important}
.faq-q-body{color:var(--wt-text) !important}

/* ───────── 13. PIED DE PAGE ───────── */
footer{background:#080503 !important;border-top:1px solid var(--wt-line)}
.foot-brand-text{color:#fff !important}
.foot h4{color:var(--wt-or-l) !important}
.foot a{color:var(--wt-text) !important}
.foot a:hover{color:var(--wt-or-l) !important}
.foot-bottom{border-top:1px solid rgba(255,255,255,.08) !important}

/* ───────── 14. PAGES D'EXCURSION ───────── */
.page-hero{background:var(--wt-bg)}
.page-hero h1{color:#fff !important}
.page-hero h1 em{
  background:linear-gradient(102deg, var(--wt-or-l), var(--wt-or) 52%, #fff);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.page-hero-meta span{color:rgba(255,255,255,.85)}
.main-col h2{color:var(--wt-title) !important}
.main-col p,.main-col .lead,.main-col li{color:var(--wt-text) !important}
.main-col strong{color:var(--wt-or-l)}
/* Programme */
.timeline .t-item{border-bottom-color:var(--wt-line) !important}
.t-time{color:var(--wt-or) !important}
.t-time small{color:var(--wt-dim)}
.t-body h4{color:var(--wt-title) !important}
.t-body p{color:var(--wt-text) !important}
.day-label{color:var(--wt-or) !important;border-bottom-color:var(--wt-or) !important}
/* Inclus */
.inc-item{background:var(--wt-glass);border:1px solid var(--wt-line);border-radius:14px;padding:16px 18px}
.inc-tick{color:var(--wt-or)}
.inc-text{color:var(--wt-text)}
.inc-text strong{color:var(--wt-title) !important}
/* Encadré de réservation */
.book{
  background:linear-gradient(170deg, var(--wt-surf), var(--wt-bg-2)) !important;
  border:1px solid var(--wt-line) !important;box-shadow:var(--wt-shadow) !important;
}
.book-head{background:linear-gradient(140deg,#241A11,#120C08) !important;border-bottom:1px solid var(--wt-line)}
.book-head .label{color:var(--wt-or-l) !important}
.book-head h3{color:#fff !important}
.book-head .rate{color:var(--wt-text)}
.field label{color:var(--wt-dim) !important}
.price-display{background:rgba(200,133,74,.10) !important;border:1px dashed var(--wt-line-str) !important}
.price-display .label{color:var(--wt-dim) !important}
.price-display .val{color:#fff !important}
.price-display .val.empty{color:var(--wt-dim) !important}
.pay-btn{box-shadow:0 14px 36px rgba(200,133,74,.3);transition:.3s var(--wt-e)}
.pay-btn:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 20px 46px rgba(200,133,74,.42)}
.pay-btn:disabled{background:#2A1F15 !important;color:#6E5F4E !important;box-shadow:none}
.book-info{color:var(--wt-dim) !important;border-top:1px solid var(--wt-line)}
.book-info strong{color:var(--wt-or-l) !important}
/* Règle d'annulation propre à l'excursion (ajoutée par le script) */
.wt-cancel{
  display:block;margin:0 0 9px;padding:8px 12px;border-radius:9px;
  background:rgba(74,222,128,.10);border:1px solid rgba(74,222,128,.28);
  color:#86EFAC !important;font-size:12.5px;line-height:1.45;text-align:center;
}
.wt-cancel strong{color:#DCFCE7 !important;font-weight:700}
/* Calendrier */
.cal{background:var(--wt-surf-2) !important;border:1px solid var(--wt-line) !important}
.cal-head button{background:transparent;color:var(--wt-or) !important;border:1px solid var(--wt-line) !important}
.cal-head button:hover{background:var(--wt-or) !important;color:#fff !important}
.cal-title{color:var(--wt-title) !important}
.cal-dow{color:var(--wt-dim) !important}
.cal-d{color:var(--wt-text) !important;border-radius:9px;transition:.2s}
.cal-d:hover:not(.dis):not(.sel){background:rgba(200,133,74,.20) !important;color:#fff !important}
.cal-d.sel{background:var(--wt-or) !important;color:#fff !important;box-shadow:0 6px 18px rgba(200,133,74,.4)}
.cal-d.dis{color:#5A4C3E !important;opacity:.5}
.cal-d.today{outline:1px solid var(--wt-or);outline-offset:-1px}
/* Galerie page excursion */
.gallery > div{border:1px solid var(--wt-line)}
.gallery img{filter:saturate(.95) brightness(.9);transition:transform .8s var(--wt-e), filter .4s}
.gallery > div:hover img{transform:scale(1.05);filter:none}
/* Visionneuse */
.lb{background:rgba(5,3,2,.94) !important;backdrop-filter:blur(14px)}
.lb-x,.lb-nav,.lb-count{color:#fff}

/* ───────── 15. BOUTON WHATSAPP FLOTTANT ───────── */
.wa-float a{box-shadow:0 12px 34px rgba(37,211,102,.45) !important}

/* ───────── 16. MICRO-INTERACTIONS (éléments posés par le JS) ───────── */
@media(hover:hover) and (min-width:1024px){}

/* Barre de progression de lecture */
#wt-prog{
  position:fixed;top:0;left:0;height:2px;width:0;z-index:9999;
  background:linear-gradient(90deg,var(--wt-or),var(--wt-or-l));
  box-shadow:0 0 12px rgba(200,133,74,.6);
}

/* Préchargeur */
#wt-pre{
  position:fixed;inset:0;z-index:10000;background:var(--wt-bg);
  display:grid;place-items:center;
  transition:opacity .7s var(--wt-e), visibility .7s;
}
#wt-pre.wt-done{opacity:0;visibility:hidden}
#wt-pre .wt-pre-in{display:grid;justify-items:center;gap:16px}
#wt-pre img{width:62px;height:62px;border-radius:17px;object-fit:cover;animation:wtBreathe 2.4s var(--wt-e) infinite}
#wt-pre .wt-bar{width:170px;height:2px;background:#2A211A;border-radius:2px;overflow:hidden}
#wt-pre .wt-bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--wt-or),var(--wt-or-l));animation:wtLoad 1.4s var(--wt-e) forwards}
#wt-pre p{font-size:.66rem;letter-spacing:.32em;text-transform:uppercase;color:var(--wt-dim)}
@keyframes wtLoad{to{width:100%}}
@keyframes wtBreathe{50%{transform:scale(1.08)}}

/* Révélations au scroll */
.wt-rv{opacity:0;transform:translateY(34px);transition:opacity .9s var(--wt-e), transform .9s var(--wt-e)}
.wt-rv.wt-on{opacity:1;transform:none}

/* ───────── 17. ACCESSIBILITÉ : mouvement réduit ───────── */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.001ms !important;transition-duration:.001ms !important}
  .wt-rv{opacity:1;transform:none}
  .hero h1 .wt-w>span{transform:none}
  
}

/* ───────── 17. BOUTON MODE CLAIR / SOMBRE ───────── */
#wt-theme-btn{
  margin-left:4px;padding:5px 10px !important;border:none;cursor:pointer;
  background:transparent;border-radius:50px;
  font-size:13px;line-height:1;color:var(--wt-or-l) !important;
  border-left:1px solid var(--wt-line);
  transition:transform .35s var(--wt-e), background .25s;
}
#wt-theme-btn:hover{background:rgba(200,133,74,.16);transform:rotate(-18deg) scale(1.12)}

/* ───────── 19b. BADGE "INCLUS" (style GetYourGuide / TripAdvisor) ─────────
   Pastille verte avec une coche, pour les prestations comprises dans le prix.
   Le « ✓ » est ajouté par le CSS : le texte du HTML reste propre. */
.wt-inc-row{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 10px}
.wt-inc{
  display:inline-flex;align-items:center;gap:5px;
  background:rgba(61,209,124,.13);border:1px solid rgba(61,209,124,.34);color:#3DD17C;
  padding:4px 11px 4px 9px;border-radius:999px;
  font-size:12px;font-weight:600;letter-spacing:.1px;line-height:1.35;white-space:nowrap;
}
.wt-inc::before{content:"\2713";font-weight:800;font-size:11px;opacity:.95}
.page-hero-meta .wt-inc{font-size:12.5px;padding:5px 12px 5px 10px}
[data-theme="light"] .wt-inc{background:rgba(18,135,74,.09);border-color:rgba(18,135,74,.28);color:#0E7A42}
@media(max-width:560px){.wt-inc{font-size:11.5px;padding:3px 9px 3px 8px}}

/* ───────── 19c. BLOC « À LIRE AUSSI » (maillage interne vers les guides) ─────────
   Renforce le référencement : chaque page d'excursion envoie des liens vers les
   guides, ce qui indique à Google qu'ils comptent. */
.wt-read{max-width:1180px;margin:clamp(2rem,5vw,3.2rem) auto 0;
  padding:clamp(1.3rem,3vw,2rem) clamp(1rem,4vw,2rem) 0;border-top:1px solid var(--wt-line)}
.wt-read h2{font-family:var(--f-d);font-size:clamp(1.3rem,1.1rem + .8vw,1.7rem);
  color:var(--wt-title) !important;margin:0 0 14px;letter-spacing:-.2px}
.wt-read-grid{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(min(235px,100%),1fr))}
.wt-read-card{display:block;text-decoration:none;padding:14px 16px;
  border:1px solid var(--wt-line);border-radius:12px;background:var(--wt-surf);
  transition:border-color .25s var(--wt-e), transform .25s var(--wt-e)}
.wt-read-card:hover{border-color:var(--wt-line-str);transform:translateY(-2px)}
.wt-read-k{display:block;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--wt-or-l);margin-bottom:5px;font-weight:600}
.wt-read-t{display:block;font-size:15px;font-weight:600;color:var(--wt-title);line-height:1.34}

/* ───────── 19d. CHAMP « HÔTEL » DE LA RÉSERVATION (liste + saisie libre) ─────────
   La liste est injectée par /js/hotels.js juste avant le champ texte existant :
   elle doit donc hériter exactement du même style que les autres champs. */
#bk-hotel-sel{width:100%;box-sizing:border-box}
#bk-hotel-sel optgroup{font-weight:700;font-style:normal}
#bk-hotel-sel option{font-weight:400}
#bk-hotel-help{color:var(--wt-dim)}

/* ───────── 19e. AVIS CLIENTS — présentation façon TripAdvisor ─────────
   Les avis affichés sont de vrais avis publiés sur TripAdvisor, repris mot
   pour mot. La source est citée en texte, sans lien sortant : on ne veut pas
   envoyer le visiteur ailleurs au moment où il hésite à réserver. */
.rev-top{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px}
.rev-bub{color:#00AA6C;font-size:15px;letter-spacing:2px;line-height:1}
[data-theme="light"] .rev-bub{color:#00875A}
.rev-date{font-size:11.5px;color:var(--wt-dim);white-space:nowrap}
.rev-foot{display:flex;align-items:center;gap:11px;margin-top:16px;padding-top:14px;border-top:1px solid var(--wt-line)}
.rev-av{
  width:38px;height:38px;flex:0 0 38px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:rgba(200,133,74,.16);color:var(--wt-or-l);
  font-size:13px;font-weight:700;letter-spacing:.5px;
}
[data-theme="light"] .rev-av{background:rgba(152,95,47,.12)}
.rev-src{
  display:inline-flex;align-items:center;gap:6px;margin-top:11px;
  font-size:10.5px;letter-spacing:.9px;text-transform:uppercase;
  color:var(--wt-dim) !important;font-weight:600;
}
.rev-src::before{
  content:"";width:13px;height:13px;border-radius:3px;background:#00AA6C;flex:0 0 13px;
}
.rev-tr{display:block;font-size:11px;color:var(--wt-dim);margin-top:7px;font-style:italic}

/* ───────── 20. COMPTEURS SUR LES FILTRES (style TripAdvisor) ───────── */
.wt-cnt{
  display:inline-block;margin-left:5px;padding:1px 7px;border-radius:99px;
  background:rgba(200,133,74,.22);color:var(--wt-or-l);
  font-size:10.5px;font-weight:700;vertical-align:middle;
}
.filter-btn.on .wt-cnt{background:rgba(255,255,255,.26);color:#fff}

/* ───────── 21. SUGGESTIONS CROISÉES (bas des pages d'excursion) ───────── */
.wt-also{margin-top:clamp(2.5rem,6vw,4rem);padding-top:clamp(1.6rem,4vw,2.4rem);border-top:1px solid var(--wt-line)}
.wt-also h2{font-family:var(--f-d);font-size:clamp(1.5rem,1.2rem + 1vw,2rem);color:var(--wt-title) !important;margin-bottom:18px}
.wt-also-grid{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(min(220px,100%),1fr))}
.wt-also-card{
  display:grid;gap:6px;align-content:start;text-decoration:none;
  padding:18px 20px;border-radius:16px;
  background:var(--wt-glass);border:1px solid var(--wt-line);
  transition:transform .35s var(--wt-e), border-color .3s, background .3s;
}
.wt-also-card:hover{
  transform:translateY(-4px);border-color:var(--wt-line-str);
  background:linear-gradient(160deg, rgba(200,133,74,.10), var(--wt-glass));
}
.wt-also-cat{
  font-size:9.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--wt-or);
}
.wt-also-name{font-family:var(--f-d);font-size:1.15rem;font-weight:600;color:var(--wt-title);line-height:1.2}
.wt-also-price{font-size:12.5px;color:var(--wt-dim)}
.wt-also-go{
  margin-top:6px;font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--wt-or-l);transition:letter-spacing .3s var(--wt-e);
}
.wt-also-card:hover .wt-also-go{letter-spacing:.2em}

/* ───────── 19. BARRE DE RÉSERVATION COLLANTE (téléphone) ─────────
   Le prix et le bouton restent visibles pendant la lecture de la page,
   comme sur GetYourGuide / Viator. Masquée sur ordinateur. */
#wt-sticky{
  position:fixed;left:0;right:0;bottom:0;z-index:120;display:none;
  align-items:center;justify-content:space-between;gap:12px;
  padding:11px 14px calc(11px + env(safe-area-inset-bottom));
  background:color-mix(in srgb, var(--wt-bg) 92%, transparent);
  backdrop-filter:blur(20px) saturate(150%);
  border-top:1px solid var(--wt-line-str);
  box-shadow:0 -10px 30px rgba(0,0,0,.4);
  transform:translateY(0);transition:transform .45s var(--wt-e), opacity .3s;
}
#wt-sticky.wt-hide{transform:translateY(115%);opacity:0;pointer-events:none}
.wt-sticky-price{display:grid;line-height:1.15;min-width:0}
.wt-sticky-price small{
  font-size:9.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--wt-dim);
}
.wt-sticky-price b{
  font-family:var(--f-d);font-size:1.45rem;font-weight:700;color:var(--wt-title);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.wt-sticky-btn{
  flex:none;border:none;cursor:pointer;
  padding:14px 26px;border-radius:13px;
  background:var(--wt-or);color:#fff;font-size:15px;font-weight:700;
  box-shadow:0 8px 24px rgba(200,133,74,.4);
  transition:transform .25s var(--wt-e), background .25s;
}
.wt-sticky-btn:hover{background:var(--wt-or-l);color:#241A11}
.wt-sticky-btn:active{transform:scale(.97)}
@media(max-width:900px){
  #wt-sticky{display:flex}
  /* on remonte le bouton WhatsApp pour qu'il ne chevauche pas la barre */
  body:has(#wt-sticky:not(.wt-hide)) .wa-float{bottom:150px !important}
}

/* ───── Téléphone : barre de langue + bouton thème compacts ─────
   Le menu ☰ est à droite : on garde la barre étroite pour ne rien chevaucher. */
@media(max-width:900px){
  .lang-toggle{gap:1px;padding:2px !important}
  .lang-toggle button{padding:4px 7px !important;font-size:9.5px !important}
  #wt-theme-btn{padding:4px 7px !important;font-size:11px;margin-left:2px;padding-left:8px !important}
  /* Bouton WhatsApp flottant : même position sur TOUTES les pages et
     dans TOUTES les langues, et assez haut pour ne rien recouvrir. */
  .wa-float{bottom:96px !important}
  .wa-float a{width:52px !important;height:52px !important}
}
@media(max-width:420px){
  .lang-toggle{right:58px}
  .lang-toggle button{padding:3px 6px !important;font-size:9px !important}
}
/* transition douce quand on bascule de mode */
html.wt-switching,
html.wt-switching body,
html.wt-switching .nav,
html.wt-switching .card,
html.wt-switching .review,
html.wt-switching .faq-q,
html.wt-switching footer,
html.wt-switching .book,
html.wt-switching .transfers-form{
  transition:background-color .4s ease, color .4s ease, border-color .4s ease !important;
}

/* ───────── 18. FINITIONS DU MODE CLAIR ─────────
   Les tuiles photo gardent leur texte blanc (la photo est sombre dessous),
   mais tout le reste s'éclaircit proprement. */
[data-theme="light"] body::before{
  background:
    radial-gradient(60% 45% at 78% 4%, rgba(200,133,74,.14), transparent 70%),
    radial-gradient(50% 40% at 6% 42%, rgba(43,107,122,.08), transparent 70%);
}
[data-theme="light"] footer{background:#1A1208 !important}
[data-theme="light"] .foot a{color:rgba(255,253,248,.78) !important}
[data-theme="light"] .nav-links a{color:var(--wt-text)}
[data-theme="light"] .btn-out{
  color:var(--wt-title) !important;border-color:var(--wt-line-str) !important;
  background:rgba(26,18,8,.03) !important;
}
[data-theme="light"] .btn-out:hover{color:#fff !important;background:var(--wt-or) !important}
[data-theme="light"] .btn-dune:hover{color:#fff !important}
[data-theme="light"] .card{
  background:var(--wt-surf) !important;box-shadow:0 4px 24px rgba(26,18,8,.07) !important;
}
[data-theme="light"] .card:hover{box-shadow:0 18px 46px rgba(26,18,8,.14) !important}
/* En mode clair, les cartes d'excursion sont des PANNEAUX CLAIRS
   (photo en haut + texte sur fond blanc). Il ne faut donc pas leur
   imposer un fond sombre, sinon le texte devient illisible. */
[data-theme="light"] .exc-grid .card{background:var(--wt-surf) !important}
[data-theme="light"] .exc-grid .card .tag{background:rgba(26,18,8,.04) !important}
[data-theme="light"] .exc-grid .card .card-img-wrap::after{
  background:linear-gradient(to top, var(--wt-surf), transparent);
}
[data-theme="light"] select option{background:#fff;color:#2A2018}
[data-theme="light"] input::placeholder{color:#A99880}
[data-theme="light"] .cal-d.dis{color:#BDB0A0 !important}
[data-theme="light"] .book-head{background:linear-gradient(140deg,#2A1F14,#1A1208) !important}
[data-theme="light"] .wt-marquee i{color:var(--wt-dim)}
[data-theme="light"] .wt-step::before{background:rgba(26,18,8,.10)}
[data-theme="light"] .review-quote,[data-theme="light"] .faq-q summary{color:var(--wt-title) !important}
[data-theme="light"] .lune-grid > div img,
[data-theme="light"] .gallery img{filter:none}

/* ═══════════════════════════════════════════════════════════════════════════
   SYSTÈME DE COULEURS DU TEXTE — UNE SEULE COULEUR PAR RÔLE
   ---------------------------------------------------------------------------
   Avant cette section, le site utilisait 23 couleurs de texte différentes :
   10 pour le texte secondaire, 6 pour les accents, 3 pour les étoiles.
   Résultat : des incohérences d'une page à l'autre et du texte blanc resté
   illisible en mode clair.

   La règle est simple et vaut pour les deux thèmes :

     TITRES        -> var(--wt-title)   blanc sur fond sombre / noir sur clair
     TEXTE COURANT -> var(--wt-text)
     SECONDAIRE    -> var(--wt-dim)     (légendes, étiquettes, méta)
     ACCENT / LIENS-> var(--wt-or-l)    doré, adapté à chaque thème
     ÉTOILES       -> var(--wt-or-l)    la même couleur partout

   Les zones volontairement sombres (bandeau d'accueil, en-tête de la boîte
   de réservation, pied de page, boutons pleins) gardent leur texte blanc :
   elles ne sont PAS ciblées ici, et sont protégées en fin de section.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 1. Titres ─────────────────────────────────────────────────────────── */
.sec-title,
.card-title, .card-title a,
.review-quote,
.faq-q summary,
.price-val,
.det-value,
.wt-read-t,
.g h2,
.inc-text strong,
.t-item strong{
  color:var(--wt-title) !important;
}

/* ── 2. Texte courant ──────────────────────────────────────────────────── */
.sec-sub,
.card-desc,
.lead,
.inc-text,
.exc .d,
.review-name,
.wt-also-card span:last-child{
  color:var(--wt-text) !important;
}

/* ── 3. Texte secondaire : légendes, étiquettes, méta ──────────────────── */
.card-meta, .card-meta span,
.review-loc,
.price-from, .price-unit,
.det-label,
.cal-dow,
.feature-item,
#bk-hotel-help,
.book-body label,
.transfers-field label,
.field label{
  color:var(--wt-dim) !important;
}

/* ── 4. Accents et liens ───────────────────────────────────────────────── */
.eyebrow,
.review-trip,
.exc .price,
.g .r,
.wt-read-k,
.brand span,
.section a:not(.btn):not(.card-btn):not(.cta):not(.btn-wa):not(.see-all-btn):not(.wt-read-card):not(.wt-also-card):not(.exc):not(.g){
  color:var(--wt-or-l) !important;
}

/* ── 5. Étoiles : une seule couleur sur tout le site ───────────────────── */
.stars, .stars-big, .review-stars, .rate .stars, .card-rate .stars{
  color:var(--wt-or-l) !important;
}

/* ── 6. Badge TripAdvisor : le texte suivait le thème, pas le fond ──────
   C'était le bug visible : fond éclairci par le thème, texte resté blanc.
   Le logo garde le vert TripAdvisor, qui est leur couleur de marque. */
.ta-badge{
  color:var(--wt-title) !important;
  background:var(--wt-glass) !important;
  border:1px solid var(--wt-line) !important;
}
.ta-badge .ta-logo{background:#00AA6C !important;color:#fff !important}
.ta-badge .stars-big{color:var(--wt-or-l) !important}

/* ── 7. Zones volontairement sombres : le texte reste blanc ─────────────
   Ces blocs ont un fond sombre dans les DEUX thèmes : on protège leur
   contenu de la règle générale ci-dessus. */
.hero, .hero *,
.page-hero, .page-hero *,
.book-head, .book-head *,
footer, footer *,
.nav-cta, .card-btn, .btn-dune, .cta, .btn-wa,
.pay-btn, .transfers-btn, .filter-btn.on, .cal-d.sel, .dir-btn.active,
.lang-toggle button.active, .mob-overlay .mob-lang button.active{
  /* rien n''est forcé ici : on annule seulement l''héritage des règles 1 à 5 */
}
.hero h1, .hero p, .hero .hero-kicker,
.page-hero h1, .page-hero .page-hero-meta, .page-hero .page-hero-meta span:not(.wt-inc),
.book-head h3, .book-head .label, .book-head .rate{
  color:#fff !important;
}
.hero-trust, .hero-trust *, .trust-item, .trust-item strong{color:rgba(255,255,255,.88) !important}
.page-hero h1 em, .hero h1 em{color:var(--wt-or-l) !important}
footer .foot h4{color:#fff !important}
footer .foot a, footer p{color:rgba(255,253,248,.78) !important}

/* Sécurité : en mode clair aussi, le bandeau photo garde son voile sombre,
   sinon le titre blanc deviendrait illisible si l''image tarde à charger. */
[data-theme="light"] .page-hero::before{
  background:linear-gradient(to top, rgba(0,0,0,.70), rgba(0,0,0,.34) 55%, rgba(0,0,0,.24)) !important;
}

/* ═══ Correctifs de mode clair : couleurs sombres qui etaient codees en dur ═══
   Meme famille de bug que le champ de saisie : un fond sombre fixe reste
   sombre en mode clair et rend le texte illisible. */
[data-theme="light"] .pay-btn:disabled{
  background:#EDE4D4 !important;color:#8A7A66 !important;border-color:#E0D4BE !important;
}
[data-theme="light"] #wt-pre{background:#F7F0E6 !important}
[data-theme="light"] #wt-pre .wt-bar{background:#E3D6BE !important}
[data-theme="light"] #wt-pre .wt-bar span{background:var(--wt-or) !important}
[data-theme="light"] 
[data-theme="light"] 
/* En mode clair, le dore devient fonce : un texte tres sombre par-dessus
   donnait un contraste de 2,2 (illisible). On passe le texte en blanc. */
[data-theme="light"] .wt-sticky-btn:hover{color:#fff !important}

/* ═══════════════════════════════════════════════════════════════════════════
   BARRE DE NAVIGATION — REPRISE COMPLETE
   ---------------------------------------------------------------------------
   Deux defauts corriges :

   1. Le selecteur de langue etait en « position:fixed », donc il FLOTTAIT
      au-dessus de la barre au lieu d etre dedans. D ou l impression de
      desordre. Il est maintenant ancre dans la barre, centre verticalement.

   2. Les liens du menu etaient du texte brut sans zone cliquable : rien
      n indiquait qu on pouvait cliquer. Ils ont maintenant une vraie
      surface, un fond au survol et un marqueur de page active.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── La barre ── */
.nav{
  position:sticky !important;top:0 !important;
  background:rgba(13,9,6,.88) !important;
  backdrop-filter:blur(14px) saturate(140%);
  border-bottom:1px solid var(--wt-line) !important;
  z-index:120 !important;
}
[data-theme="light"] .nav{background:rgba(255,253,248,.92) !important}

.nav-inner{
  height:70px !important;
  gap:14px;
  /* place reservee a droite pour la langue et le theme */
  padding-right:186px !important;
}

/* ── Le logo ── */
.logo img{height:42px !important;border-radius:9px}
.logo-text{font-size:19.5px !important;letter-spacing:.2px}

/* ── Les liens : de vraies surfaces cliquables ── */
.nav-links{gap:4px !important;align-items:center}
.nav-links a{
  display:block;
  padding:9px 13px;
  border-radius:10px;
  font-size:13.5px !important;
  font-weight:600 !important;
  letter-spacing:.1px;
  color:var(--wt-text) !important;
  white-space:nowrap;
  transition:background .18s var(--wt-e), color .18s;
}
.nav-links a:hover{
  background:var(--wt-glass-2) !important;
  color:var(--wt-or-l) !important;
}
.nav-links a:active{transform:translateY(1px)}
.nav-links a[aria-current="page"]{
  background:var(--wt-glass-2) !important;
  color:var(--wt-or-l) !important;
}

/* ── Le bouton de reservation ── */
.nav-cta{
  padding:11px 20px !important;
  font-size:13px !important;
  font-weight:700 !important;
  box-shadow:0 4px 14px rgba(200,133,74,.26);
}
.nav-cta:hover{transform:translateY(-1px);box-shadow:0 7px 20px rgba(200,133,74,.34)}

/* ── Langue et theme : ancres dans la barre, plus flottants ── */
.lang-toggle{
  position:absolute !important;
  top:50% !important;
  right:92px !important;
  transform:translateY(-50%) !important;
  display:flex !important;
  gap:2px !important;
  padding:3px !important;
  background:var(--wt-glass) !important;
  border:1px solid var(--wt-line) !important;
  box-shadow:none !important;
  border-radius:50px !important;
}
.lang-toggle button{
  padding:6px 11px !important;
  font-size:11.5px !important;
  font-weight:700 !important;
  letter-spacing:.4px;
  border-radius:50px !important;
  color:var(--wt-dim) !important;
}
.lang-toggle button:hover{color:var(--wt-or-l) !important;background:var(--wt-glass-2) !important}
.lang-toggle button.active{background:var(--wt-or) !important;color:#fff !important}

#wt-theme-btn{
  position:absolute !important;
  top:50% !important;
  right:28px !important;
  transform:translateY(-50%) !important;
  width:38px;height:38px;
  display:flex;align-items:center;justify-content:center;
  border:1px solid var(--wt-line) !important;
  border-radius:50% !important;
  background:var(--wt-glass) !important;
  font-size:15px;
  cursor:pointer;
}
#wt-theme-btn:hover{background:var(--wt-glass-2) !important;transform:translateY(-50%) rotate(-16deg)}

/* ── Le bouton du menu mobile : visiblement un bouton ── */
.nav-mob{
  width:42px;height:42px;
  display:none;
  align-items:center;justify-content:center;
  border:1px solid var(--wt-line) !important;
  border-radius:11px !important;
  background:var(--wt-glass) !important;
  color:var(--wt-title) !important;
  font-size:19px;cursor:pointer;
}
.nav-mob:hover{background:var(--wt-glass-2) !important}

/* ── Adaptation aux petits ecrans ── */
@media(max-width:1060px){
  .nav-links a{padding:8px 10px;font-size:12.8px !important}
  .nav-inner{padding-right:176px !important}
}
@media(max-width:900px){
  .nav-inner{height:64px !important;padding:0 16px !important;padding-right:122px !important}
  .nav-mob{display:flex !important}
  .lang-toggle{right:74px !important;padding:2px !important}
  .lang-toggle button{padding:5px 8px !important;font-size:10.5px !important}
  #wt-theme-btn{right:18px !important;width:34px;height:34px;font-size:13px}
  .logo img{height:36px !important}
  .logo-text{font-size:17px !important}
}
@media(max-width:420px){
  .nav-inner{padding-right:112px !important}
  .lang-toggle button{padding:5px 6px !important;font-size:10px !important}
}

/* ═══════════════════════════════════════════════════════════════════════════
   CORRECTIFS DE LA BARRE — mesures faites apres coup
   ---------------------------------------------------------------------------
   1. Le selecteur de langue n est PAS au meme endroit dans le code selon les
      pages : dans <nav> sur 11 pages, juste apres <body> sur 16 autres. Un
      positionnement « absolu » dependrait donc du parent et casserait sur la
      moitie du site. On utilise une position FIXE calee sur le centre de la
      barre (70 px de haut), ce qui donne le meme rendu partout.

   2. Le texte blanc sur le dore #C8854A ne donnait que 3,04 de contraste,
      sous le minimum de 4,5. Le bouton de langue actif passe donc sur un
      dore plus fonce (#92591F) qui atteint 5,72 avec du texte blanc.
   ═══════════════════════════════════════════════════════════════════════════ */
.lang-toggle{
  position:fixed !important;
  top:35px !important;
  right:92px !important;
  transform:translateY(-50%) !important;
  z-index:130 !important;
}
#wt-theme-btn{
  position:fixed !important;
  top:35px !important;
  right:28px !important;
  transform:translateY(-50%) !important;
  z-index:130 !important;
}
#wt-theme-btn:hover{transform:translateY(-50%) rotate(-16deg) !important}

/* bouton de langue actif : dore assombri pour que le blanc reste lisible */
.lang-toggle button.active{
  background:#92591F !important;
  color:#fff !important;
  box-shadow:0 2px 8px rgba(0,0,0,.18);
}
[data-theme="light"] .lang-toggle button.active{background:#92591F !important}

@media(max-width:900px){
  .lang-toggle{top:32px !important;right:74px !important}
  #wt-theme-btn{top:32px !important;right:18px !important}
  #wt-theme-btn:hover{transform:translateY(-50%) !important}
}





/* ═══════════════════════════════════════════════════════════════════════════
   EN-TETE : LANGUES ET BOUTON DE THEME DANS LE FLUX
   ---------------------------------------------------------------------------
   Pourquoi ca buguait sans arret : la pastille des langues et le bouton de
   theme etaient poses « en absolu », a cote de la barre. Il fallait donc
   reserver leur largeur a la main (padding-right). Au moindre changement de
   taille de police ou de libelle, la reserve devenait fausse et la pastille
   recouvrait le menu hamburger ou le nom du site.

   Nouvelle approche : le script deplace la pastille A L INTERIEUR de la
   barre, juste avant le hamburger (voir navCompact dans js/nuit-luxe.js).
   Sur telephone, pastille et bouton de theme deviennent de simples elements
   du flux : c est le navigateur qui repartit la place. Le nom du site est le
   seul element qui se comprime, et il se coupe proprement avec des points de
   suspension. Plus aucune largeur a calculer, donc plus de recouvrement
   possible.
   ═══════════════════════════════════════════════════════════════════════════ */
@media(max-width:900px){
  /* plus besoin de reserver de la place : le flux s en charge */
  .nav-inner{
    padding:0 14px !important;
    padding-right:14px !important;
    gap:10px !important;
  }

  /* la pastille rejoint le flux, collee a droite avant le hamburger */
  .lang-toggle{
    position:static !important;
    top:auto !important; right:auto !important; bottom:auto !important; left:auto !important;
    transform:none !important;
    flex:0 0 auto !important;
    margin-left:auto !important;
    gap:1px !important;
    padding:2px !important;
  }
  .lang-toggle button{padding:5px 7px !important;font-size:10px !important}

  /* le bouton de theme aussi */
  #wt-theme-btn{
    position:static !important;
    top:auto !important; right:auto !important;
    transform:none !important;
    flex:0 0 auto !important;
    width:32px !important; height:32px !important;
    font-size:13px !important;
  }
  #wt-theme-btn:hover{transform:rotate(-16deg) !important}

  /* seul le nom du site se comprime, proprement */
  .logo{flex:1 1 auto;min-width:0}
  .logo-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .nav-mob{flex:0 0 auto}
}

/* Sur les tres petits ecrans, le nom ecrit disparait : le logo suffit a
   identifier le site, et tout le reste tient largement. */
@media(max-width:480px){
  .logo-text{font-size:15px !important;max-width:120px}
  .logo img{height:36px !important}
  .nav-inner{gap:8px !important}
  .lang-toggle button{padding:5px 6px !important;font-size:9.5px !important}
}

/* Les langues restent aussi dans le menu hamburger, avec leur drapeau */
.mob-overlay .mob-lang button{font-size:13.5px;padding:12px 10px}