/* ======================================================
   MENU CENTRÉ AUTOUR DU LOGO
   Logo = centre de référence
   3 liens à gauche / logo / 3 liens à droite
   ====================================================== */

@media screen and (min-width: 769px) {

  /* Navigation pleine largeur */
  .traveltour-navigation.traveltour-item-pdlr {
    position: relative !important;
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    box-sizing: border-box !important;
  }

  /* Menu principal */
  #traveltour-main-menu {
    position: relative !important;
    width: 100% !important;
    float: none !important;
  }

  /* La liste du menu */
  #traveltour-main-menu > ul.sf-menu {
    position: relative !important;
    width: 100% !important;
    max-width: 1360px !important;
    min-height: 115px !important;
    margin: 0 auto !important;
    padding: 0 !important;
    list-style: none !important;
  }

  /* Tous les éléments du menu */
  #traveltour-main-menu > ul.sf-menu > li {
    position: absolute !important;
    top: 50% !important;
    float: none !important;
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    transform: translate(-50%, -50%) !important;
    text-align: center !important;
    white-space: nowrap !important;
  }

  /* Liens */
  #traveltour-main-menu > ul.sf-menu > li > a {
    padding: 0 !important;
    margin: 0 !important;
    white-space: nowrap !important;
    font-size: 18px !important;
    line-height: 1.3 !important;
    letter-spacing: 0.3px !important;
  }

  /* 1 - Accueil */
  #traveltour-main-menu > ul.sf-menu > li:nth-child(1) {
    left: calc(50% - 500px) !important;
  }

  /* 2 - Omra 2026/2027 */
  #traveltour-main-menu > ul.sf-menu > li:nth-child(2) {
    left: calc(50% - 340px) !important;
  }

  /* 3 - Hajj 2027 */
  #traveltour-main-menu > ul.sf-menu > li:nth-child(3) {
    left: calc(50% - 180px) !important;
  }

  /* 4 - LOGO au centre exact */
  #traveltour-main-menu > ul.sf-menu > li.traveltour-center-nav-menu-item {
    left: 50% !important;
    z-index: 999 !important;
  }

  /* 5 - Omra Ramadan */
  #traveltour-main-menu > ul.sf-menu > li:nth-child(5) {
    left: calc(50% + 230px) !important;
  }

  /* 6 - Qui sommes nous */
  #traveltour-main-menu > ul.sf-menu > li:nth-child(6) {
    left: calc(50% + 460px) !important;
  }

  /* 7 - Contact */
  #traveltour-main-menu > ul.sf-menu > li:nth-child(7) {
    left: calc(50% + 640px) !important;
  }

  /* Logo */
  .traveltour-center-nav-menu-item .traveltour-logo,
  .traveltour-center-nav-menu-item .traveltour-logo-inner {
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1 !important;
    text-align: center !important;
  }

  .traveltour-center-nav-menu-item img {
    width: 145px !important;
    max-width: 145px !important;
    height: auto !important;
    display: block !important;
    margin: 0 auto !important;
  }

  /* Sous-menus */
  #traveltour-main-menu > ul.sf-menu > li ul.sub-menu {
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    text-align: left !important;
    z-index: 9999 !important;
  }

  #traveltour-main-menu > ul.sf-menu > li ul.sub-menu li {
    position: relative !important;
    display: block !important;
    text-align: left !important;
    transform: none !important;
    top: auto !important;
    left: auto !important;
  }

  #traveltour-main-menu > ul.sf-menu > li ul.sub-menu li a {
    white-space: normal !important;
    text-align: left !important;
  }

  /* Icône recherche : ne doit pas décaler le menu */
  .traveltour-main-menu-right-wrap {
    display: none !important;
  }
}

/* ======================================================
   ÉCRANS MOYENS
   ====================================================== */

@media screen and (min-width: 769px) and (max-width: 1250px) {

  #traveltour-main-menu > ul.sf-menu > li > a {
    font-size: 16px !important;
  }

  .traveltour-center-nav-menu-item img {
    width: 145px !important;
    max-width: 145px !important;
  }

  #traveltour-main-menu > ul.sf-menu > li:nth-child(1) {
    left: calc(50% - 450px) !important;
  }

  #traveltour-main-menu > ul.sf-menu > li:nth-child(2) {
    left: calc(50% - 295px) !important;
  }

  #traveltour-main-menu > ul.sf-menu > li:nth-child(3) {
    left: calc(50% - 145px) !important;
  }

  #traveltour-main-menu > ul.sf-menu > li:nth-child(5) {
    left: calc(50% + 205px) !important;
  }

  #traveltour-main-menu > ul.sf-menu > li:nth-child(6) {
    left: calc(50% + 400px) !important;
  }

  #traveltour-main-menu > ul.sf-menu > li:nth-child(7) {
    left: calc(50% + 555px) !important;
  }
}

/* ======================================================
   MOBILE
   ====================================================== */

@media screen and (max-width: 768px) {

  .traveltour-navigation.traveltour-item-pdlr {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 15px !important;
    padding-right: 15px !important;
  }

  #traveltour-main-menu > ul.sf-menu {
    display: block !important;
    min-height: auto !important;
    text-align: center !important;
  }

  #traveltour-main-menu > ul.sf-menu > li {
    position: relative !important;
    display: block !important;
    top: auto !important;
    left: auto !important;
    transform: none !important;
    text-align: center !important;
    margin: 10px 0 !important;
  }

  #traveltour-main-menu > ul.sf-menu > li > a {
    white-space: normal !important;
    font-size: 16px !important;
  }

  .traveltour-center-nav-menu-item img {
    width: 120px !important;
    max-width: 120px !important;
    margin: 0 auto !important;
  }
}


/* ======================================================
   CORRECTION LOGO MENU FIXE / AU SCROLL
   À ajouter à la fin du CSS actuel
   ====================================================== */

/* Empêche le thème de compresser le logo au scroll */
.traveltour-fixed-navigation .traveltour-center-nav-menu-item img,
.traveltour-animate-fixed-navigation .traveltour-center-nav-menu-item img,
.traveltour-sticky-navigation .traveltour-center-nav-menu-item img,
.traveltour-header-container.traveltour-fixed-navigation .traveltour-center-nav-menu-item img,
.traveltour-header-container.traveltour-animate-fixed-navigation .traveltour-center-nav-menu-item img {
  width: 125px !important;
  max-width: 125px !important;
  height: auto !important;
  max-height: none !important;
  min-height: 0 !important;
  object-fit: contain !important;
  display: block !important;
  margin: 0 auto !important;
}

/* Centre verticalement le logo dans le menu fixe */
.traveltour-fixed-navigation .traveltour-center-nav-menu-item,
.traveltour-animate-fixed-navigation .traveltour-center-nav-menu-item,
.traveltour-sticky-navigation .traveltour-center-nav-menu-item {
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  line-height: 1 !important;
}

/* Nettoie le bloc logo dans le menu fixe */
.traveltour-fixed-navigation .traveltour-center-nav-menu-item .traveltour-logo,
.traveltour-fixed-navigation .traveltour-center-nav-menu-item .traveltour-logo-inner,
.traveltour-animate-fixed-navigation .traveltour-center-nav-menu-item .traveltour-logo,
.traveltour-animate-fixed-navigation .traveltour-center-nav-menu-item .traveltour-logo-inner,
.traveltour-sticky-navigation .traveltour-center-nav-menu-item .traveltour-logo,
.traveltour-sticky-navigation .traveltour-center-nav-menu-item .traveltour-logo-inner {
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1 !important;
  height: auto !important;
  max-height: none !important;
}

/* Hauteur propre du menu quand il devient blanc au scroll */
.traveltour-fixed-navigation #traveltour-main-menu > ul.sf-menu,
.traveltour-animate-fixed-navigation #traveltour-main-menu > ul.sf-menu,
.traveltour-sticky-navigation #traveltour-main-menu > ul.sf-menu {
  min-height: 95px !important;
}

/* Liens du menu au scroll */
.traveltour-fixed-navigation #traveltour-main-menu > ul.sf-menu > li > a,
.traveltour-animate-fixed-navigation #traveltour-main-menu > ul.sf-menu > li > a,
.traveltour-sticky-navigation #traveltour-main-menu > ul.sf-menu > li > a {
  line-height: 1.3 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}
/* ======================================================
   CORRECTION SOUS-MENUS : PARIS / MARSEILLE / LYON
   Le niveau 2 s'ouvre à droite
   ====================================================== */

/* Le premier sous-menu s'ouvre sous "Omra 2026/2027" */
#traveltour-main-menu > ul.sf-menu > li > ul.sub-menu {
  position: absolute !important;
  top: 100% !important;
  left: 0 !important;
  right: auto !important;
  z-index: 9999 !important;
}

/* Chaque ligne du sous-menu doit servir de référence */
#traveltour-main-menu ul.sub-menu > li {
  position: relative !important;
}

/* Le sous-menu de Paris / Marseille / Lyon / Bruxelles s'ouvre à droite */
#traveltour-main-menu ul.sub-menu > li.menu-item-has-children > ul.sub-menu {
  position: absolute !important;
  top: 0 !important;
  left: 100% !important;
  right: auto !important;
  margin-left: 0 !important;
  z-index: 10000 !important;
}

/* Force l'affichage au survol */
#traveltour-main-menu ul.sub-menu > li.menu-item-has-children:hover > ul.sub-menu {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* Largeur propre des menus */
#traveltour-main-menu ul.sub-menu {
  min-width: 210px !important;
}

/* Texte bien aligné dans les sous-menus */
#traveltour-main-menu ul.sub-menu li a {
  display: block !important;
  text-align: left !important;
  white-space: normal !important;
  padding: 11px 18px !important;
  line-height: 1.4 !important;
}
/* ======================================================
   CORRECTION FINALE COULEUR MENU
   Haut de page = blanc
   Scroll = noir
   ====================================================== */

/* EN HAUT DE PAGE : menu blanc */
.traveltour-header-wrap #traveltour-main-menu > ul.sf-menu > li > a,
.traveltour-header-container #traveltour-main-menu > ul.sf-menu > li > a,
.traveltour-navigation #traveltour-main-menu > ul.sf-menu > li > a {
  color: #ffffff !important;
}

/* Accueil actif en haut : blanc aussi */
.traveltour-header-wrap #traveltour-main-menu > ul.sf-menu > li.current-menu-item > a,
.traveltour-header-wrap #traveltour-main-menu > ul.sf-menu > li.current_page_item > a,
.traveltour-header-container #traveltour-main-menu > ul.sf-menu > li.current-menu-item > a,
.traveltour-header-container #traveltour-main-menu > ul.sf-menu > li.current_page_item > a {
  color: #ffffff !important;
}

/* Hover en haut */
.traveltour-header-wrap #traveltour-main-menu > ul.sf-menu > li > a:hover,
.traveltour-header-container #traveltour-main-menu > ul.sf-menu > li > a:hover,
.traveltour-navigation #traveltour-main-menu > ul.sf-menu > li > a:hover {
  color: #55d66b !important;
}

/* MENU FIXE AU SCROLL : texte noir */
.traveltour-fixed-navigation #traveltour-main-menu > ul.sf-menu > li > a,
.traveltour-animate-fixed-navigation #traveltour-main-menu > ul.sf-menu > li > a,
#traveltour-fixed-navigation #traveltour-main-menu > ul.sf-menu > li > a {
  color: #222222 !important;
}

/* Accueil actif au scroll */
.traveltour-fixed-navigation #traveltour-main-menu > ul.sf-menu > li.current-menu-item > a,
.traveltour-animate-fixed-navigation #traveltour-main-menu > ul.sf-menu > li.current-menu-item > a,
#traveltour-fixed-navigation #traveltour-main-menu > ul.sf-menu > li.current-menu-item > a {
  color: #22a447 !important;
}

/* Hover au scroll */
.traveltour-fixed-navigation #traveltour-main-menu > ul.sf-menu > li > a:hover,
.traveltour-animate-fixed-navigation #traveltour-main-menu > ul.sf-menu > li > a:hover,
#traveltour-fixed-navigation #traveltour-main-menu > ul.sf-menu > li > a:hover {
  color: #22a447 !important;
}

/* Sous-menus : toujours blanc sur fond foncé */
#traveltour-main-menu ul.sub-menu {
  background: #222222 !important;
}

#traveltour-main-menu ul.sub-menu li a,
.traveltour-fixed-navigation #traveltour-main-menu ul.sub-menu li a,
.traveltour-animate-fixed-navigation #traveltour-main-menu ul.sub-menu li a,
#traveltour-fixed-navigation #traveltour-main-menu ul.sub-menu li a {
  color: #ffffff !important;
}

#traveltour-main-menu ul.sub-menu li:hover > a {
  background: #333333 !important;
  color: #ffffff !important;
}

/* ==================================================
   DESIGN AUTOMATIQUE DES PAGES DE SÉJOUR
================================================== */


/* --------------------------------------------------
   1. COULEURS
-------------------------------------------------- */

.wpb_wrapper:has(a[href="#tourmaster-tour-booking-bar-wrap"]) {
    --sejour-vert: #298e4b;
    --sejour-vert-clair: #eef8f1;
    --sejour-bordure: #b9dfc5;
    --sejour-texte: #25332a;
}


/* --------------------------------------------------
   2. DATE DE DÉPART
   Espace de 200 px avant la date
-------------------------------------------------- */

.wpb_wrapper:has(a[href="#tourmaster-tour-booking-bar-wrap"])
> p:has(> strong):not(:has(img)):not(:has(strong span)):not(p:has(img) ~ p) {
    display: table !important;
    width: auto !important;
    max-width: 90% !important;
    box-sizing: border-box !important;

    /* 200 px avant la date */
    margin: 120px auto 14px !important;
    padding: 11px 26px !important;

    color: #ffffff !important;
    background: var(--sejour-vert) !important;

    border: none !important;
    border-radius: 50px !important;

    text-align: center !important;
    font-size: 20px !important;
    font-weight: 700 !important;
    line-height: 1.4 !important;

    box-shadow: 0 5px 14px rgba(41, 142, 75, 0.25) !important;
}


/* Texte de la date en blanc */

.wpb_wrapper:has(a[href="#tourmaster-tour-booking-bar-wrap"])
> p:has(> strong):not(:has(img)):not(:has(strong span)):not(p:has(img) ~ p)
> strong {
    display: inline !important;

    margin: 0 !important;
    padding: 0 !important;

    color: #ffffff !important;
    background: transparent !important;

    border: none !important;

    font-size: inherit !important;
    font-weight: 700 !important;
}


/* --------------------------------------------------
   3. IMAGES
-------------------------------------------------- */

/*
   Les billets, les hôtels et l’image « COMPLET »
   conservent leur apparence d’origine.
*/

.wpb_wrapper:has(a[href="#tourmaster-tour-booking-bar-wrap"])
> p:has(img) {
    margin-top: 20px !important;
    margin-bottom: 20px !important;
    padding: 0 !important;

    background: transparent !important;
    border: none !important;
    box-shadow: none !important;

    text-align: center !important;
}


/* Images responsives */

.wpb_wrapper:has(a[href="#tourmaster-tour-booking-bar-wrap"])
> p:has(img) img {
    display: inline-block !important;
    max-width: 100% !important;
    height: auto !important;

    margin: 0 !important;
    padding: 0 !important;

    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}


/* --------------------------------------------------
   4. INFORMATIONS DU SÉJOUR ET DES HÔTELS
-------------------------------------------------- */

.wpb_wrapper:has(a[href="#tourmaster-tour-booking-bar-wrap"])
> p:has(img) ~ p:has(strong):not(:has(img)) {
    display: block !important;
    width: auto !important;
    max-width: 830px !important;
    box-sizing: border-box !important;

    margin: 14px auto !important;
    padding: 17px 22px !important;

    color: var(--sejour-texte) !important;
    background: var(--sejour-vert-clair) !important;

    border: 1px solid var(--sejour-bordure) !important;
    border-left: 5px solid var(--sejour-vert) !important;
    border-radius: 12px !important;

    text-align: center !important;
    font-size: 17px !important;
    line-height: 1.6 !important;

    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05) !important;
}


/* Petit déjeuner inclus et autres textes en gras */

.wpb_wrapper:has(a[href="#tourmaster-tour-booking-bar-wrap"])
> p:has(img) ~ p:has(strong):not(:has(img)) strong,

.wpb_wrapper:has(a[href="#tourmaster-tour-booking-bar-wrap"])
> p:has(img) ~ p:has(strong):not(:has(img)) strong span {
    display: inline !important;

    margin: 0 !important;
    padding: 0 !important;

    color: var(--sejour-vert) !important;
    background: transparent !important;

    border: none !important;
    border-radius: 0 !important;

    font-size: inherit !important;
    font-weight: 700 !important;
}


/* --------------------------------------------------
   5. « CE SÉJOUR COMMENCE PAR… »
-------------------------------------------------- */

/*
   Cette règle fonctionne également lorsqu’une
   image « COMPLET » se trouve avant cette phrase.
*/

.wpb_wrapper:has(a[href="#tourmaster-tour-booking-bar-wrap"])
> p:has(strong span):not(:has(img)) {
    display: block !important;
    width: auto !important;
    max-width: 830px !important;

    margin: 0 auto 25px !important;
    padding: 0 !important;

    color: #5e6d63 !important;
    background: transparent !important;

    border: none !important;
    border-radius: 0 !important;

    text-align: center !important;
    font-size: 17px !important;
    line-height: 1.5 !important;

    box-shadow: none !important;
}


/* Nom de la ville : Makkah ou Médine */

.wpb_wrapper:has(a[href="#tourmaster-tour-booking-bar-wrap"])
> p:has(strong span):not(:has(img)) strong,

.wpb_wrapper:has(a[href="#tourmaster-tour-booking-bar-wrap"])
> p:has(strong span):not(:has(img)) strong span {
    display: inline !important;

    margin: 0 !important;
    padding: 0 !important;

    color: var(--sejour-vert) !important;
    background: transparent !important;

    border: none !important;

    font-size: 19px !important;
    font-weight: 700 !important;
}


/* --------------------------------------------------
   6. BOUTON « RÉSERVEZ EN LIGNE »
-------------------------------------------------- */

.wpb_wrapper:has(a[href="#tourmaster-tour-booking-bar-wrap"])
.ubtn-ctn-center {
    margin-top: 25px !important;
}


/* --------------------------------------------------
   7. VERSION MOBILE
-------------------------------------------------- */

@media (max-width: 767px) {

    /* Date avec espace de 200 px conservé */

    .wpb_wrapper:has(a[href="#tourmaster-tour-booking-bar-wrap"])
    > p:has(> strong):not(:has(img)):not(:has(strong span)):not(p:has(img) ~ p) {
        max-width: 95% !important;

        margin: 200px auto 12px !important;
        padding: 9px 18px !important;

        font-size: 17px !important;
    }


    /* Informations du séjour et des hôtels */

    .wpb_wrapper:has(a[href="#tourmaster-tour-booking-bar-wrap"])
    > p:has(img) ~ p:has(strong):not(:has(img)) {
        max-width: 95% !important;

        margin: 10px auto !important;
        padding: 14px 16px !important;

        text-align: left !important;
        font-size: 15px !important;
        line-height: 1.5 !important;
    }


    /* Ce séjour commence par */

    .wpb_wrapper:has(a[href="#tourmaster-tour-booking-bar-wrap"])
    > p:has(strong span):not(:has(img)) {
        max-width: 95% !important;

        margin: 0 auto 18px !important;
        padding: 0 !important;

        text-align: center !important;
        font-size: 15px !important;
    }


    /* Makkah ou Médine */

    .wpb_wrapper:has(a[href="#tourmaster-tour-booking-bar-wrap"])
    > p:has(strong span):not(:has(img)) strong,

    .wpb_wrapper:has(a[href="#tourmaster-tour-booking-bar-wrap"])
    > p:has(strong span):not(:has(img)) strong span {
        font-size: 17px !important;
    }


    /* Images */

    .wpb_wrapper:has(a[href="#tourmaster-tour-booking-bar-wrap"])
    > p:has(img) {
        margin-top: 15px !important;
        margin-bottom: 15px !important;
    }
}

/* Ligne date + nuits + complet */
.sejour-badges {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-wrap: wrap !important;
    gap: 10px !important;

    box-sizing: border-box !important;
    max-width: 900px !important;

    /* Espace de 200 px avant les badges */
    margin: 200px auto 20px !important;
    padding: 0 15px !important;

    text-align: center !important;
}


/* Style général des badges */
.sejour-badges > span {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    min-height: 52px !important;
    box-sizing: border-box !important;

    padding: 10px 24px !important;

    border-radius: 50px !important;

    font-size: 18px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;

    box-shadow: 0 5px 14px rgba(0, 0, 0, 0.12) !important;
}


/* Date */
.sejour-badges .badge-date {
    color: #ffffff !important;
    background: #298e4b !important;
}


/* Nombre de nuits */
.sejour-badges .badge-nuits {
    color: #298e4b !important;
    background: #eef8f1 !important;

    border: 1px solid #b9dfc5 !important;

    text-transform: uppercase !important;
}


/* Complet */
.sejour-badges .badge-complet {
    color: #ffffff !important;
    background: #e32620 !important;

    text-transform: uppercase !important;
}


/* Point blanc devant « Complet » */
.sejour-badges .badge-complet::before {
    content: "" !important;

    display: inline-block !important;
    width: 9px !important;
    height: 9px !important;

    margin-right: 9px !important;

    background: #ffffff !important;
    border-radius: 50% !important;
}


/* Version mobile */
@media (max-width: 767px) {
    .sejour-badges {
        gap: 7px !important;
        margin-top: 200px !important;
        padding: 0 8px !important;
    }

    .sejour-badges > span {
        min-height: 44px !important;
        padding: 8px 14px !important;
        font-size: 14px !important;
    }
}
/* Bouton Réserver en ligne */
a[href="#tourmaster-tour-booking-bar-wrap"] .ubtn,
a[href="#tourmaster-tour-booking-bar-wrap"] button {
    position: relative !important;
    min-width: 260px !important;
    padding: 16px 32px !important;

    color: #ffffff !important;
    background: linear-gradient(135deg, #298e4b, #197239) !important;

    border: 2px solid #ffffff !important;
    border-radius: 50px !important;

    font-size: 17px !important;
    font-weight: 700 !important;
    letter-spacing: 0.2px !important;

    box-shadow:
        0 7px 18px rgba(41, 142, 75, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.25) !important;

    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease,
        background 0.25s ease !important;
}

/* Icône devant le texte */
a[href="#tourmaster-tour-booking-bar-wrap"] .ubtn-data::before {
    content: "✓";
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 23px;
    height: 23px;
    margin-right: 9px;

    color: #298e4b;
    background: #ffffff;
    border-radius: 50%;

    font-size: 14px;
    font-weight: 900;
}

/* Survol */
a[href="#tourmaster-tour-booking-bar-wrap"]:hover .ubtn,
a[href="#tourmaster-tour-booking-bar-wrap"]:hover button {
    color: #ffffff !important;
    background: linear-gradient(135deg, #35a95c, #298e4b) !important;

    transform: translateY(-3px) !important;

    box-shadow:
        0 10px 24px rgba(41, 142, 75, 0.38),
        inset 0 1px 0 rgba(255, 255, 255, 0.25) !important;
}

/* Mobile */
@media (max-width: 767px) {
    a[href="#tourmaster-tour-booking-bar-wrap"] .ubtn,
    a[href="#tourmaster-tour-booking-bar-wrap"] button {
        width: 90% !important;
        min-width: 0 !important;
        max-width: 340px !important;
        padding: 14px 20px !important;
        font-size: 16px !important;
    }
}

/* ==================================================
   TABLEAU FINAL DES TARIFS
   Ordinateur : 4 cartes
   Mobile : 2 cartes par ligne
================================================== */


/* --------------------------------------------------
   1. CONTENEUR DU TABLEAU
-------------------------------------------------- */

.tarifs-sejour {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    align-items: stretch !important;
    gap: 14px !important;

    width: 100% !important;
    max-width: 1100px !important;
    box-sizing: border-box !important;

    margin: 30px auto !important;
    padding: 10px !important;
}


/* --------------------------------------------------
   2. CARTE TARIFAIRE
-------------------------------------------------- */

.tarif-colonne {
    position: relative !important;

    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;

    min-width: 0 !important;
    min-height: 360px !important;
    box-sizing: border-box !important;

    padding: 0 16px 12px !important;
    overflow: visible !important;

    color: #26342c !important;
    background: #ffffff !important;

    border: 1px solid #d4e5d9 !important;
    border-radius: 30px !important;

    text-align: center !important;

    box-shadow: 0 8px 22px rgba(18, 57, 35, 0.12) !important;

    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease !important;
}


/* Effet au survol */
.tarif-colonne:hover {
    transform: translateY(-5px) !important;
    box-shadow: 0 13px 28px rgba(18, 57, 35, 0.18) !important;
}


/* --------------------------------------------------
   3. BANDEAU DU TYPE DE CHAMBRE
-------------------------------------------------- */

.tarif-chambre {
    display: flex !important;
    align-items: flex-start !important;
    justify-content: center !important;

    width: calc(100% + 32px) !important;
    min-height: 105px !important;
    box-sizing: border-box !important;

    margin: 0 -16px 0 !important;
    padding: 20px 6px 0 !important;

    color: #ffffff !important;
    background: linear-gradient(135deg, #279455, #6dcf8d) !important;

    border-radius: 29px 29px 0 0 !important;
    border-bottom: 2px solid #d5e5da !important;

    font-size: 23px !important;
    font-weight: 800 !important;
    line-height: 1.2 !important;
    letter-spacing: 0 !important;
    text-transform: uppercase !important;
}


/* Texte « Prix par personne » dans le bandeau */
.tarif-chambre::after {
    content: "Prix par personne" !important;

    position: absolute !important;
    top: 62px !important;
    left: 0 !important;

    width: 100% !important;

    color: #ecfff2 !important;

    text-align: center !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    text-transform: none !important;
}


/* --------------------------------------------------
   4. NUANCES DE VERT
-------------------------------------------------- */

/* Quadruple */
.tarif-colonne:nth-child(1) .tarif-chambre {
    background: linear-gradient(135deg, #279455, #6dcf8d) !important;
}


/* Triple */
.tarif-colonne:nth-child(2) .tarif-chambre {
    background: linear-gradient(135deg, #78b92c, #b1dc50) !important;
}


/* Double */
.tarif-colonne:nth-child(3) .tarif-chambre {
    background: linear-gradient(135deg, #198f79, #56c4a7) !important;
}


/* Individuelle */
.tarif-colonne:nth-child(4) .tarif-chambre {
    background: linear-gradient(135deg, #176b45, #4caf78) !important;
}


/* --------------------------------------------------
   5. BADGE « LA PLUS CHOISIE »
   Uniquement sur la chambre Double
-------------------------------------------------- */

.tarif-colonne:nth-child(3)::before {
    content: "LA PLUS CHOISIE" !important;

    position: absolute !important;
    z-index: 10 !important;
    top: 87px !important;
    left: 50% !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: 176px !important;
    min-height: 36px !important;
    box-sizing: border-box !important;

    padding: 6px 12px !important;

    color: #ffffff !important;
    background: #d6a62f !important;

    border: 3px solid #ffffff !important;
    border-radius: 50px !important;

    text-align: center !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    line-height: 1.1 !important;
    white-space: nowrap !important;

    box-shadow: 0 4px 10px rgba(110, 82, 13, 0.25) !important;

    transform: translateX(-50%) !important;
}


/* --------------------------------------------------
   6. PRIX
-------------------------------------------------- */

.tarif-prix {
    display: block !important;
    width: 100% !important;

    margin: 30px 0 5px !important;
    padding: 0 !important;

    color: #26342c !important;
    background: transparent !important;

    font-size: 31px !important;
    font-weight: 800 !important;
    line-height: 1.1 !important;
    letter-spacing: -0.5px !important;
    white-space: nowrap !important;
}


/* L’ancien texte « Par personne » est masqué,
   car il est maintenant affiché dans le bandeau */
.tarif-personne {
    display: none !important;
}


/* --------------------------------------------------
   7. PETIT DÉJEUNER INCLUS
-------------------------------------------------- */

.tarif-petit-dejeuner {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: 100% !important;
    min-height: 42px !important;
    box-sizing: border-box !important;

    margin: 12px 0 14px !important;
    padding: 8px 10px !important;

    color: #298e4b !important;
    background: #edf8f0 !important;

    border-radius: 16px !important;

    text-align: center !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    line-height: 1.25 !important;
    white-space: normal !important;
}


/* Petite coche */
.tarif-petit-dejeuner::before {
    content: "✓" !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: 18px !important;
    height: 18px !important;
    flex: 0 0 18px !important;

    margin-right: 6px !important;

    color: #ffffff !important;
    background: #298e4b !important;
    border-radius: 50% !important;

    font-size: 11px !important;
    font-weight: 800 !important;
}


/* --------------------------------------------------
   8. BOUTON RÉSERVER
-------------------------------------------------- */

.tarif-reserver {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: 100% !important;
    min-height: 46px !important;
    box-sizing: border-box !important;

    margin: auto 0 0 !important;
    padding: 10px 15px !important;

    color: #ffffff !important;
    background: #298e4b !important;

    border: none !important;
    border-radius: 50px !important;

    text-align: center !important;
    text-decoration: none !important;
    font-size: 14px !important;
    font-weight: 800 !important;
    line-height: 1.2 !important;
    text-transform: uppercase !important;

    box-shadow: 0 5px 13px rgba(41, 142, 75, 0.22) !important;

    transition:
        transform 0.25s ease,
        filter 0.25s ease,
        box-shadow 0.25s ease !important;
}


/* Couleur des boutons selon la chambre */
.tarif-colonne:nth-child(1) .tarif-reserver {
    background: #279455 !important;
}

.tarif-colonne:nth-child(2) .tarif-reserver {
    background: #78b92c !important;
}

.tarif-colonne:nth-child(3) .tarif-reserver {
    background: #198f79 !important;
}

.tarif-colonne:nth-child(4) .tarif-reserver {
    background: #176b45 !important;
}


/* Survol du bouton */
.tarif-reserver:hover {
    color: #ffffff !important;
    text-decoration: none !important;

    filter: brightness(1.08) !important;
    transform: translateY(-2px) !important;

    box-shadow: 0 8px 18px rgba(41, 142, 75, 0.3) !important;
}


/* ==================================================
   TABLETTE
   Deux cartes par ligne
================================================== */

@media (min-width: 768px) and (max-width: 1024px) {
    .tarifs-sejour {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 18px !important;
        max-width: 760px !important;
    }
}


/* ==================================================
   MOBILE
   Minimum : deux cartes par ligne
================================================== */

@media (max-width: 767px) {

    /* Tableau 2 × 2 */
    .tarifs-sejour {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 10px !important;

        width: 100% !important;
        max-width: 100% !important;

        margin: 20px auto !important;
        padding: 5px !important;
    }


    /* Cartes */
    .tarif-colonne {
        min-width: 0 !important;
        min-height: 290px !important;

        padding: 0 7px 8px !important;

        border-radius: 19px !important;

        box-shadow: 0 5px 13px rgba(18, 57, 35, 0.1) !important;
    }


    /* Pas de déplacement au toucher */
    .tarif-colonne:hover {
        transform: none !important;
    }


    /* Bandeau */
    .tarif-chambre {
        width: calc(100% + 14px) !important;
        min-height: 82px !important;

        margin: 0 -7px !important;
        padding: 16px 3px 0 !important;

        border-radius: 18px 18px 0 0 !important;

        font-size: clamp(14px, 4.2vw, 18px) !important;
        line-height: 1.15 !important;
    }


    /* Prix par personne dans le bandeau */
    .tarif-chambre::after {
        top: 49px !important;

        padding: 0 3px !important;

        font-size: 9px !important;
        line-height: 1.1 !important;
    }


    /* Badge Double */
    .tarif-colonne:nth-child(3)::before {
        top: 67px !important;

        width: 125px !important;
        min-height: 29px !important;

        padding: 4px 7px !important;

        border-width: 2px !important;

        font-size: 8px !important;
    }


    /* Prix */
    .tarif-prix {
        margin: 25px 0 3px !important;

        font-size: clamp(19px, 6vw, 25px) !important;
        letter-spacing: -0.5px !important;
    }


    /* Petit déjeuner */
    .tarif-petit-dejeuner {
        min-height: 38px !important;

        margin: 9px 0 10px !important;
        padding: 6px 4px !important;

        border-radius: 12px !important;

        font-size: 9px !important;
        line-height: 1.2 !important;
    }


    /* Petite coche mobile */
    .tarif-petit-dejeuner::before {
        width: 14px !important;
        height: 14px !important;
        flex-basis: 14px !important;

        margin-right: 4px !important;

        font-size: 8px !important;
    }


    /* Bouton mobile */
    .tarif-reserver {
        min-height: 39px !important;

        padding: 8px 5px !important;

        font-size: 10px !important;
    }
}


/* Très petits téléphones :
   on conserve toujours deux cartes par ligne */
@media (max-width: 360px) {
    .tarifs-sejour {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 6px !important;
        padding: 3px !important;
    }

    .tarif-chambre {
        font-size: 13px !important;
    }

    .tarif-prix {
        font-size: 18px !important;
    }

    .tarif-colonne:nth-child(3)::before {
        width: 112px !important;
        font-size: 7px !important;
    }
}
/* ==================================================
   CORRECTION : TABLEAUX PLUS COMPACTS
================================================== */

/* Réduit la hauteur des cartes */
.tarif-colonne {
    min-height: 0 !important;
    height: auto !important;
    padding-bottom: 12px !important;
}


/* Rapproche le prix du bandeau */
.tarif-prix {
    margin-top: 24px !important;
    margin-bottom: 6px !important;
}


/* Rapproche le petit déjeuner du prix */
.tarif-petit-dejeuner {
    min-height: 40px !important;
    margin: 8px 0 !important;
    padding: 7px 8px !important;
}


/* Empêche le bouton de créer un grand espace */
.tarif-reserver {
    margin: 8px 0 0 !important;
}


/* Empêche les types de chambres de revenir à la ligne */
.tarif-chambre {
    padding-left: 3px !important;
    padding-right: 3px !important;

    white-space: nowrap !important;
    word-break: normal !important;
    overflow-wrap: normal !important;
}


/* Réduit légèrement « Individuelle » */
.tarif-colonne:nth-child(4) .tarif-chambre {
    font-size: 20px !important;
    letter-spacing: -0.5px !important;
}


/* Mobile : cartes compactes en 2 × 2 */
@media (max-width: 767px) {
    .tarif-colonne {
        min-height: 0 !important;
        height: auto !important;
        padding-bottom: 7px !important;
    }

    .tarif-prix {
        margin-top: 21px !important;
        margin-bottom: 3px !important;
    }

    .tarif-petit-dejeuner {
        min-height: 36px !important;
        margin: 6px 0 !important;
        padding: 5px 3px !important;
    }

    .tarif-reserver {
        margin-top: 6px !important;
    }

    .tarif-colonne:nth-child(4) .tarif-chambre {
        font-size: 13px !important;
        letter-spacing: -0.5px !important;
    }
}

.tarif-colonne{
    display: flex;
    flex-direction: column;
    align-items: center;
}

.tarif-colonne br{
    display: none;
}

.tarif-chambre{
    margin-bottom: 0;
}

.tarif-prix{
    margin: 6px 0 2px;
}

.tarif-personne{
    margin-bottom: 6px;
}

.tarif-petit-dejeuner{
    margin: 0 0 6px;
}

.tarif-reserver{
    margin-top: 0;
}