/* ===================================================================
   Heaven & Earth Tours – Joomla 5 + Helix 2.1.3
   CUSTOM CSS – Version corrigée (responsive + scope propre)
   =================================================================== */


/* =====================================
   MAIN-EXTENSION | BASE & UTILITAIRES
   ===================================== */

:root {
    --he-primary: #017c7b;
    --he-accent: #ff6600;
    --he-yellow: #fff000;
    --he-dark: #3a3a2c;
    --he-maxw: 1200px;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}


.video {
    max-width: 100%;
    height: auto;
    display: inline-block;
}

h1 { /* Titres fluides */
    font-size: clamp(1.6rem, 1.2rem + 1.8vw, 2.6rem);
    line-height: 1.2;
}

h2 {
    font-size: clamp(1.3rem, 1.0rem + 1.2vw, 2rem);
    line-height: 1.25;
}


.prose { /* Paragraphe lisible (tu peux ajouter .prose sur les zones texte) */
    max-width: 72ch;
    margin-inline: auto;
    padding-inline: 1rem;
}

.prose p {
    margin: 0 0 1rem;
}


.card-grid { /* Grille cartes générique (blog, modules, listes) */
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 1rem;
}

.card-grid>* {
    grid-column: span 12;
}

@media (min-width:768px) {
    .card-grid>* {
        grid-column: span 6;
    }
}

@media (min-width:1200px) {
    .card-grid>* {
        grid-column: span 4;
    }
}


.full-bleed { /* Section plein écran sans toucher .container-fluid global */
    width: 100vw;
    margin-left: 50%;
    transform: translateX(-50%);
}

.blog-item { /* Blog tour vedette page acceuil*/
    background-color: #fff ;
    margin-bottom: 40px;

}


/* =======================================================================================
>>>>>>>>>>>JOOMLA <><><><><><><><><> JOOMLA <<<<<<<<<<<<<<<<<<<<
========================================================================================== */ 

/* ---------------- Corps des Pages ------------------ */

@media (max-width: 767px) {
  div[itemprop="articleBody"] {
    background-color: #fff;
    margin-right: 15px;
    margin-left: 15px;
  }
}


/* ---------------- Bandeau Reseau Sociaux (top article) ------------------ */

.article-details .article-ratings-social-share { 
    background: #017c7b20;
}

.article-social-share .social-share-icon ul li a {
    background: #ffed00;
}

.article-list .row {
    margin-bottom: 30px; /* lien "circuit à velo de la journée" Affichage categorie*/
}




#sp-main-body {
    padding-bottom: 10px; /*Marge derneir artclce page acceuil */
}


@media (max-width: 767px) {/* Marge Gauche et DRoite Home Page Intro Article */
  .container {
   padding-left: 0px; 
   padding-right: 0px;
  }
}



/* ---------->>>>>>>>>>>JOOMLA <><><><>-----------COLONE DE DROITE------------------------ */

.mod-articles-item-content { /* Module Affiche Articles - Blog*/
    background-color: #efefed;
        max-width: 100%;
    margin: 10px auto;
    background: rgba(255, 255, 255, .9);
    padding: 16px;
    border-radius: 12px;
    box-shadow: 0 0 30px rgba(0, 0, 0, .2);
    text-align: center;
}

/* =======================================================================================
>>>>>>>>>>>   MAIN-EXTTENSION |  SOLIDRES <><><><><><><><><> SOLIDRES <<<<<<<<<<<<<<<<<<<<
========================================================================================== */ 


/* ---------------------------
   BOUTONS (scope propre)
   --------------------------- */

/* Boutons primaires – uniquement dans Solidres et encarts personnalisés */
#sr-experience .btn-primary,
.encart .btn-primary {
    background-color: var(--he-yellow);
    color: #000;
    font-weight: 700;
}

#sr-experience .btn-primary:hover,
.encart .btn-primary:hover {
    background-color: var(--he-primary);
    color: #fff;
}




/* ---------------------------------------
>>>> SOLIDRES – ESPACE COLONE 1 et 2 <<<<
-----------------------------------------*/

/* Desktop - 70% / 30% */
.col-md-8 {
    width: 70% !important;
    flex: 0 0 70% !important;
    max-width: 70% !important;
}

.col-md-4 {
    width: 30% !important;
    flex: 0 0 30% !important;
    max-width: 30% !important;
}

/* Tablette - Optionnel */
@media (max-width: 1199px) and (min-width: 992px) {
    .col-md-8 {
        width: 65% !important;
        flex: 0 0 65% !important;
        max-width: 65% !important;
    }
    
    .col-md-4 {
        width: 35% !important;
        flex: 0 0 35% !important;
        max-width: 35% !important;
    }
}

/* Mobile - 100% / 100% (empilé) */
@media (max-width: 991px) {
    .col-md-8,
    .col-md-4 {
        width: 100% !important;
        flex: 0 0 100% !important;
        max-width: 100% !important;
        margin-bottom: 20px;
    }
}

/* Formulaire reservation en premier - Ordre d'affichage mobile */
@media (max-width: 991px) {
    .sr-experience .row {
        display: flex;
        flex-direction: column-reverse;
    }
}

@media (max-width: 767px) { /* Cache la colone "Informations Importantes" */
  .sr-experience .box-bg { 
    display: none !important;
  }
}

@media (max-width: 767px) { /* Formulaire de reservation */
  .sr-experience .box-bg {   
    margin-right: 20px;
    margin-left: 20px;
  }

  

}


/* ===========================
   SOLIDRES – Fiches & Checkout
   =========================== */

#sr-experience-form { /*Background from Check-out*/
    background-color: #fff;
}

#sr-experience-form .tour-info { /* 1 Summary - 2 Guest Information - 3 Payment*/
    background-color: #f7fae7;
    padding: 15px;
}




/* fond blanc zones manquantes */

/* Eviter de masquer tout .text-end Bootstrap : scoper Solidres seulement */
#sr-experience .text-end {
    display: none;
}

/* Cache le nombre de participants dispo si voulu */

/* Tabs Solidres masqués (scope strict) */
#sr-experience [role="tablist"],
#sr-experience joomla-tab-element+[role="tablist"] {
    display: none !important;
}

@media (max-width: 767px) { 
  #sr-experience [role="tablist"],
#sr-experience joomla-tab-element+[role="tablist"] {
    display: none !important;
  }
}




#sr-experience .text-green {
    display: none;
}

joomla-tab-element#expDescription {
    padding: 0;
    border: none;
}





/* padding vertical */
.tour-short-desc {
    display: none;
}

/* description courte masquée si voulu */
.sr-experience .tour-info-box {
    display: none;
}

/* panneau info masqué si voulu */



/* Checkout & page article liée */
.sr-experience .tour-info legend {
    background-color: var(--he-primary);
}

.bg-info {
    background-color: var(--he-accent) !important;
}

#sr-experience-form {
    padding: 20px;
}

/* Summary */
.coupon {
    width: 100%;
    max-width: 480px;
}

/* fluide */

/* Guest Information */
.checkout_result {
    background-color: #fff;
    padding: 50px;
    background: #cac9c9;
    background-image: url(/images/00.Template/bg-checkout.webp);
    background-repeat: no-repeat;
    background-position: top right;
}

.register {
    display: none;
}


/* -------------------
>>>>>>>  SOLIDRES – Payment <<<<<<<
---------------------- */

.form-check {
    background-color: #f7faf6;
    width: 100%;
    margin-bottom: 20px;
    padding: 10px;
    border: 1px solid #ced4da;
    border-radius: .375rem;
}

@media (min-width:768px) {
    .form-check {
        width: 48%;
    }
}

.form-check .form-check-input {
    float: left;
    margin: 8px 10px 5px 5px;
}

.pascal_pay_title {
    font-size: 20px;
    text-transform: uppercase;
    font-weight: 700;
}

.btn-group {
    margin-top: 20px;
}


#sr-experience-form a { /* Lien therm and Condition*/
 color:#017C7b;
}

#sr-experience-form a:hover { /* Lien therm and Condition*/
 color:#44443b;
}


#sr-experience-form .btn-group a {/* bouton back */
color:#fff;
}



/* --------------------------
>>>> Checkout Result <<<<<<<<
-----------------------------*/
.checkout-result {
    color: red;
    font-weight: bold;
}




/* -----------------------------------------
>>>>>>>>> SOLIDRES - FICHE EXPERIENCE <<<<<<
-------------------------------------------- */

/* ENTETE FICHE EXPERIENCE */

.tour-header {
 margin-bottom: 0px !important;
}


.sr-experience .sr-wish-list > a{ /* Coeur et Share en haut de la fiche experience */
    color: #fff;
} 
.sr-experience .sr-wish-list > a:hover { /* Coeur et Share en haut de la fiche experience */
    color: #660505;
}



/* ---------------------------------------------
>>> SOLIDRES - COLONNE DE DROITE SUR EXPERIENCE
------------------------------------------------ */

#sp-right .sp-module {
    padding: 0;
    border: none;
}
.sr-exp-bookform-container {
    background-color: #fff;
}

.sr-experience .box-border { /* Bandeau haut de page "share et widh list" &  "Question" colonne de Droite" */
    /*background-color: #fff;*/
    border: None; /*0px solid #e3e3e3;*/
}


@media (max-width: 767px) {
.sr-exp-bookform-container  {
    margin-right: 20px;
    margin-left: 20px;
}

}

.sr-exp-bookform-container, .tour-help, .tour-price-info  {/* Encart: Form Booking, Question et Important information - Colonne Droite sur experience */
margin-bottom: 30px !important;
padding-bottom: 20px !important;
}

.tour-price {
    background-color: var(--he-primary) !important;
}


.tour-help .box-border { /* Encart Question before booking - Colonne de droite */
    background-color: #fff;
    border: 1px solid #e3e3e3;
   
}

.tour-help {
    padding-left: 25px !important;
    margin-bottom: 30px !important;
    background-color: #fff;
}

.tour-help p {
    font-weight: 700;
    text-transform: uppercase;
    text-align: center;
    margin: 10px 30px;
}

.tour-help a {
    line-height: 30px !important;
    color: var(--he-primary);
}

.tour-help a:hover {
    color: var(--he-accent);
}

.tour-help .fa,
.tour-help .fab {
    padding-right: 20px;
}


/* =======================================================================================
>>>>>>>>>>>   MAIN-EXTTENSION |  JOOMLACK <><><><><><><><><> JOOMLACK <<<<<<<<<<<<<<<<<<<<
========================================================================================== */

/* =============================== MOBILE MENU CK ======================================== */

@media (max-width: 767px) {
  .mobilemenuck-bar {
     position: fixed !important;
    z-index: 10000 !important;
}
}
/* =============================== FIN - MOBILE MENU CK ======================================== */

/* =============================== Carousel CK ======================================== */

@media (max-width: 767px) {
 
.carouselck_caption_title {
    font-size: 15px;
}
}


/* =============================== FIN - Carousel CK ======================================== */




/* ==========================================================================
   >>>>>>>>> MAIN-EXTTENSION | TEMPLATE HELIX – Modules & Layout  <<<<<<<<<<<
============================================================================= */


@media (max-width: 767px) { /*Logo Entete page */
  .logo-image 
 {
    height: 90px;
    margin-left: 60px;
  }
}

@media (max-width: 576px) {
    .logo-image {
        height: 90px !important;
        margin-left: 20px;
    }
}

@media (max-width: 767px) { /*Logo Entete page */
  #sp-logo
 {
    margin-top: 30px !important;
  }
}


/* Module personnalisé – encart */
.encart {
    max-width: 100%;
    margin: 10px auto;
    background: rgba(255, 255, 255, .9);
    padding: 16px;
    border-radius: 12px;
    box-shadow: 0 0 30px rgba(0, 0, 0, .2);
    text-align: center;
}

.encart-title {
    text-align: center;
    font-size: 32px;
    font-weight: 700;
    margin-bottom: 10px;
    color: var(--he-primary);
}

.encart-subtitle {
    font-size: 20px;
    margin-bottom: 30px;
    font-style: italic;
}

.encart-image {
    max-width: 100%;
    border-radius: 8px;
    margin: 0 auto 10px;
    display: block;
}

.encart-quote {
    font-size: 22px;
    font-weight: 700;
    color: #d63333;
    margin-bottom: 10px;
}

.encart-descrip {
    margin: 10px 20px;
    font-family: system-ui;
    font-size: 16px;
    line-height: 1.6;
}

.encart-descrip p {
      margin: 10px 20px;
}

.encart-bouton {
    background-color: var(--he-primary);
    color: #fff;
    font-size: 24px;
    font-weight: 700;
    padding: 10px 20px;
    display: inline-block;
    border-radius: 6px;
    margin-top: 25px;
}

.encart-note {
    font-size: 10px;
    line-height: 1.6;
}

.encart-flex {
    display: flex;
    align-items: flex-start;
}

.encart-flex img {
    width: 64px;
    height: 64px;
    object-fit: contain;
    margin-right: 15px;
}

.encart-flex-imagecol {
    flex: 1;
}

/* Espaces articles vedette */
.articleBody {
    margin-bottom: 30px;
    background-color: #fff;
}

div[itemprop="articleBody"] {
    background-color: #fff;
}

/* Composant & fil d’ariane */
#sp-component {
    background: #fff;
    padding: 0;
}

#sp-component {
    background: url(/images/00.Template/page.webp) !important;
}

.article {
    background-color: #fff;
}

/* Badge featured caché */
.article-list .article .featured-article-badge,
.article-details .featured-article-badge {
    display: none;
    visibility: hidden;
}

/* Fond body (désactivé sur mobile plus bas) */
body {
   background: url(/images/00.Template/pageglare.webp) bottom center no-repeat,
        -webkit-linear-gradient(top, rgba(5, 5, 4, .09) 0, rgba(115, 115, 85, .14) 500px) no-repeat,
        url(/images/00.Template/page.webp),
        -webkit-linear-gradient(top, #171711 0, #616148 500px) no-repeat;
}

/* OFFCANVAS – ne pas masquer, réactiver */
#offcanvas-toggler {
    display: none;
}

/* Espace principal */
#sp-main-body {
    padding-top: 15px;
    background-image: none;
}

/* Header & sticky */
#sp-header {
    height: 0px;
}

#sp-header.header-sticky {
    min-height: 130px;
    box-shadow: 0 0 6px 8px rgba(0, 0, 0, .15);
   background: #3a3a2c;
}


#sp-header.header-sticky~section#sp-main-body {
    padding-top: 50px;
}

/* Logo et toggler (ajuste la marge si besoin) */
#sp-logo {
    margin-top: 60px;
}

#offcanvas-toggler.offcanvas-toggler-right {
    margin-top: 30px;
    margin-right: 30px;
    display: none !important; /* Cache le menu offcanvas-megamenu du template helix en mode responsive */
}

#offcanvas-toggler>.fa {
    font-size: 30px;
}


#sp-bread {
    background: none;
}

#sp-fil-ariane {
    background: none !important;
    margin-top: 20px;
}

/* Menu principal */
.sp-megamenu-parent>li>a {
    color: #fff;
    font-weight: 700;
    font-size: 20px;
}

.sp-megamenu-parent>li.active>a {
    color: #fff;
    border: 1px #fff solid;
    font-weight: 700;
    font-size: 14px;
    letter-spacing: 2px;
}

.sp-megamenu-parent>li.hover>a {
    color: #ffcc00;
    font-weight: 700;
    font-size: 20px;
    letter-spacing: 2px;
}

/* Titre de page */
.sp-page-title {
    padding: 30px 0 15px;
    background: #ab2d2d url(images/00.Template/nuage_2.webp) repeat-x;
    box-shadow: inset 0 -8px 6px rgba(0, 0, 0, .5), 0 8px 6px rgba(0, 0, 0, .5);
}

.sp-page-title .sp-page-title-heading {
    font-size: 45px;
    line-height: 1;
    text-align: center;
    color: var(--he-yellow);
    background: none;
}

@media (max-width: 767px) {
  .sp-page-title .sp-page-title-heading  {
    font-size: 30px;
  }
}


.sp-page-title-heading {
    font-weight: 700;
}

.sp-page-title .sp-page-title-sub-heading {
    font-size: 25px;
    font-weight: 400;
    text-align: center;
    line-height: 1;
    margin-top: 10px;
    background: none;
}

@media (max-width: 767px) {
  .sp-page-title .sp-page-title-sub-heading  {
        font-size: 15px;
    font-weight: 400;
    text-align: center;
    line-height: 1.5;
    margin-top: 10px;
    background: none;
  }
}


/* Modules */
.sp-module ul>li>a {
    color: #fff;
}

.sp-module ul>li>a:hover {
    color: #ab2d2d;
}


.sp-contact-info { /* Positionne les infos Contact au-dessus du menu */
    position: absolute;
    top: 5px; /* Plus négatif = monte plus haut */
    z-index: 100;
    margin-bottom: -15px;
}


.sp-contact-info,
.sp-contact-info li {
    color: #fff;
    margin-top: 5px;
    margin-bottom: 15px;
    font-size: 13px;
}

/* Bottom */
#sp-bottom {
    padding: 30px 0 20px;
    background-color: #fff;
}

/* Ancienne balise H1 hérité 2018 – conservé mais rendu responsive sur mobile */
h2 {
    color: #fff;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: 700;
    font-size: 1.5em;
    /* sera écrasé par clamp() plus haut si plus grand écran */
    line-height: 150%;
    margin: 0;
    padding-left: 135px;
    padding-top: 5px;
    text-transform: uppercase;
}

/* Titres H2/H3 */
h2 {
    margin-bottom: 0;
}

h3 {
    margin: 0;
}

/* Paragraphes (marges réduites sur mobile plus bas) */
p {
    margin: 10px 40px;
    line-height: 170%;
    text-align: justify;
}

p a,
li a {
    text-decoration: underline;
    color: #017c7b;
}

/* Listes */
ol {
    margin: 10px 20px 10px 50px;
    text-align: justify;
    list-style-type: lower-latin;
}

ol li {
    padding: 0 50px 0 10px;
}

/* Ne pas écraser .container-fluid globalement (supprimé)
   .container-fluid { padding:0; } */


/* ========================
>>> LANGUES (drapeaux)
=========================== */

div.mod-languages ul li.lang-active {
    background: none !important;
}


/* ===========================
>>>   ARTICLE / BLOG
============================== */

.h3-blog {
    background: #017C7b;
     color: #ffed00;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: 700;
    font-size: 1.3em;
    text-transform: capitalize;
    min-height: 40px;
    margin-top: 0;
    padding-left: 20px;
    padding-top: 5px;
    line-height: 150%;
}

@media (max-width: 767px) {
  .h3-blog {
      font-size: 1.1em;
  }
}

.h3-blog a {
    color: #ffed00;
    font-size: larger;
    text-shadow: 0 0 9px rgba(0, 0, 0, .54);
}

.h3-blog a:hover {
    color: #ffd900;
}

.h3-span,
.h3-blog span {
    font-size: 16px;
}


.h4-blog {
    color: #017c7b;
    margin: 0 40px;
    padding-right: 20px;
    line-height: 40px;
    text-align: left;
    font-weight: 700;
    font-size:1.4em;
}

.intro-blog {
    text-align: center;
    font-weight: 700;
    margin-bottom: 20px;
    margin-top: 0;
    padding-top: 25px;
}

.img-blog,
.vignette_intro {
    margin-left: 20px;
    margin-right: 15px;
    float: left;
}

@media (max-width: 767px) {
  .vignette_intro {
      margin-left: 0px;
  }
}



/* Lire plus */
.readmore-flex {
    display: flex;
    justify-content: flex-end;
    width: 100%;
}

.readmore {
    width: auto;
    max-width: 100%;
    text-align: center;
    padding: 10px 16px;
    margin: 15px 20px;
    text-decoration: none;
    font-family: verdana;
    font-size: 1em;
    color: #000;
    background-color: var(--he-yellow);
    border-radius: 24px;
    border: 4px solid #ffff99;
    box-shadow: 3px 3px 12px #444;
}

.readmore:hover {
    font-weight: 700;
    background-color: var(--he-primary);
    color: #000;
    border: 4px solid #ffffcc;
    box-shadow: 1px 1px 4px #777;
}

/* Bordures bas sur listings (scopées) */
.view-articlelist .article,
.blog .items-leading>.article,
.blog .items-row>div {
    border-bottom: 30px solid var(--he-dark);
}

.j2store-cart .row-fluid {
    border-bottom: none;
    padding-bottom: 70px;
}



/* ======================================================
> MAIN-EXTTENSION | PAGE DESCRIPTION TOURS (EXPERIENCE) <
========================================================= */
.page {
    margin: 30px;
}

.h2-tour { /*Ancien h1-tour*/
    background: #cacab3;
    color: #ffed00;
    font-size: 1.5em;
    text-shadow: 0 0 9px rgba(0, 0, 0, .54);
    height: 40px;
}

.h3-article {/*Ancien h2-article*/
    background: none;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: 700;
    font-size: 1.7em;
    text-align: center;
    padding: 30px 30px 15px 30px;
    color: #017c7b;
}

.h4-article {
    background: none;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: 700;
    font-size: 1.5em;
    padding: 30px 30px 15px 30px;
    color: #017c7b;
}

.nom_tour {
    /* background-color: #cacab3; */
    color: #fff;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: bold;
    font-size: 1.5em;
    font-style: normal;
    line-height: 150%;
    margin: 0;
    padding-left: 135px;
    padding-top: 5px;
    /*text-transform: uppercase;*/
}

@media (max-width: 767px) {
  .nom_tour {
    padding-left: 15px;
  }
}


/* Listings catégories */
.article-list .article {
    border: none;
    padding: 0;
    margin-bottom: 0;
}

.articles-leading,
.row .col-md-12 {
    border-bottom: 30px solid var(--he-dark);
}

/* Marges (ancien correctif multi-catégorie – laissé neutre) */
/* .row{ } .col-md-12{ } */

.cadre-note {
  border: 1px solid #e1e5df;
  background: #f7faf6;
  border-radius: 10px;
  margin: 40px 40px 5px 40px;
  padding: 20px;
}

.tour-note { /*question grid*/
  font-size: 15px;
  border: 1px solid #e1e5df;
  background: #fff;
  border-radius: 10px;
  padding: 20px;
}

.tour-note h4 { /*question grid*/
    font-size: 17px;
    text-align: center;
    font-weight: bold;
}


/*---------------------------------------------------------
>>>>>>>>>>>> SUB MAIN | Liste des Visites <<<<<<<<<<<<<<<<<
-----------------------------------------------------------*/
/* Pour Version 1 - Grid */


.tour-visits {
margin: 0 40px;
}

/* Visits Grid - 3 Columns */
.visits-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin: 30px 0;
}

.visit-item {
  padding: 15px;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  background: #f9f9f9;
  transition: all 0.3s ease;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.visit-item:hover {
  border-color: #2c5f2d;
  box-shadow: 0 4px 12px rgba(44, 95, 45, 0.1);
  transform: translateY(-2px);
}

.visit-item h4 {
  margin-top: 0;
  color: #2c5f2d;
  font-size: 1.1em;
}

.visit-item p {
  margin: 0;
  font-size: .8em;
  text-align: left;
}

.visits-note {
  margin-top: 20px;
  padding: 10px;
  background: #fff3cd;
  border-left: 4px solid #ffc107;
  font-size: 0.9em;
}

/* Responsive - Mobile (1 colonne) */
@media (max-width: 768px) {
  .visits-grid {
    grid-template-columns: 1fr;
    gap: 15px;
  }

  .visit-item {
    padding: 15px;
  }

  .visit-item h4 {
    font-size: 1em;
  }

  .visit-item p {
    font-size: 0.9em;
  }
}


/* --------------------------------------------------------
>>>>> SUB MAIN | PROPOSITION ALTERNATIVE (autre tours) <<<<
----------------------------------------------------------- */

/* Conteneur général (inchangé ou presque) */
.tour-choices-callout {
  margin: 16px 40px 28px;
  padding: 18px 18px 22px;
  border: 1px solid #e1e5df;
  background: #f7faf6;
  border-radius: 10px;
}

.tour-choices-lead {
  margin: 0 0 14px;
  font-size: 1rem;
  line-height: 1.5;
}

/* Grille 2 colonnes */
.tour-choices-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
@media (max-width: 700px) {
  .tour-choices-grid { grid-template-columns: 1fr; }
}

/* Carte */
.tour-option {
  border: 1px solid #e8ece6;
  border-radius: 10px;
  background: #fff;
  overflow: hidden; /* pour que le header colle bien aux bords */
  box-shadow: 0 1px 0 rgba(0,0,0,.02);
  transition: box-shadow .12s ease, transform .12s ease, border-color .12s ease;
}

/* ===========
>> DEBUT - au survol */

/* État "actif" de la carte : hover souris + focus clavier sur un lien interne */
.tour-option:is(:hover, :focus-within) {
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(0,0,0,.06);
  border-color: #d7e2d4;
}

/* Le titre (lien plein-largeur) suit l’état de la carte */
.tour-option:is(:hover, :focus-within) .tour-option-title a {
  background: #eaf3e7;              /* un peu plus contrasté */
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 2px;
}

/* Le texte devient orange */
.tour-option:is(:hover, :focus-within) .tour-option-text {
  color: orange;                       /* au lieu de #334 */
}

/* La pseudo-CTA en bas du texte peut souligner/renforcer */
.tour-option:is(:hover, :focus-within) .tour-option-cta {
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 2px;
}

/* Effet léger sur l’image (optionnel) */
.tour-option .tour-option-media img {
  transition: transform .18s ease, filter .18s ease;
}
.tour-option:is(:hover, :focus-within) .tour-option-media img {
  transform: scale(1.03);
  filter: saturate(1.05);
}

/* Transitions douces pour les éléments qui changent */
.tour-option {
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
.tour-option-title a,
.tour-option-text,
.tour-option-cta {
  transition: color .12s ease, background-color .12s ease, text-decoration-thickness .12s ease;
}
/* FIN au Survol 
=================*/


/* Titre + lien plein-largeur en haut */
.tour-option-title {
  margin: 15px 5px 0px 0px;
  font-size: 1rem;
  line-height: 1.3;
  font-weight: bold;
  color:#017c7b;
  text-align: center;
}


/* Zone sous le titre : logo à gauche, texte à droite */
.tour-option-content {
  display: grid;
  grid-template-columns: 120px 1fr;  /* logo gauche / texte droite */
  gap: 14px;
  align-items: start;
  padding: 14px;
}
@media (max-width: 420px) {
  .tour-option-content { grid-template-columns: 88px 1fr; }
}

/* Logo */
.tour-option-media img {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  display: block;
  object-fit: cover;
}
@media (max-width: 420px) {
  .tour-option-media img { width: 88px; height: 88px; }
}

/* Texte descriptif */
.tour-option-text {
  margin: 2px 0 0;
  font-size: .85rem;
  color: #334;
  text-align: left;
}
 
.tour-option-next {
  margin: 2px 0 0;
  font-size: .85rem;
  font-weight: bold;
  color: orange;
}


/* Réduction d’animation si préférence */
@media (prefers-reduced-motion: reduce) {
  .tour-option { transition: none; }
}




/* ======================================================
   >> MAIN-EXTTENSION | THEMATIQUES TOURS (couleurs & bgs)
   ====================================================== */

.margetour {
    padding-bottom: 40px;
    border-bottom: 5px #cacab3 solid;
}

.entete {
    background-size: auto;
    max-width: 100%;
    border-bottom: 2px solid #000;
    font-weight: 700;
    color: #fff;
    height: auto;
}

/* ROUGE – Adventure */
.mt-rouge {
    border-left: #ff0000 solid 25px;
}

.et-rouge {
    background: #ff0000 url(/images/00.Template/nuage_2.webp) repeat-x;
}

.bg_rouge {
    background: url(/images/02.Tour/ADV.adventure_tour/Illustration/he.adv.adventure_tour_bandeau.webp) center/cover no-repeat;
}

/* VERT – Countryside */
.mt-vert {
    border-left: #76b615 solid 25px;
}

.et-vert {
    background: #76b615 url(/images/00.Template/nuage_2.webp) repeat-x;
}

.bg_vert_cts1 {
    background: url(/images/02.Tour/CTS1.traditional_countryside_1/Illustration/he.cts1.countryside1_bandeau.webp) center/cover no-repeat;
}

.bg_vert_cts2 {
    background: url(/images/02.Tour/CTS2.traditional_countryside_2/Illustration/he.cts2.countryside2_bandeau.webp) center/cover no-repeat;
}

/* ORANGE – Real Vietnam */
.mt-orange {
    border-left: #ff6600 solid 25px;
}

.et-orange {
    background: #ff6600 url(/images/00.Template/nuage_2.webp) repeat-x;
}

.bg_orange_mv {
    background: url(/images/02.Tour/MV.magic_vietnam/Illustration/he.mv.magic_vietnam_bandeau.webp) center/cover no-repeat;
}

.bg_orange_rv {
    background: url(/images/02.Tour/RV.real_vietnam/Illustration/he.rv.real_vietnam_bandeau.webp) center/cover no-repeat;
}

/* MARRON – MTB */
.mt-marron {
    border-left: #542d02 solid 25px;
}

.et-marron {
    background: #542d02 url(/images/00.Template/nuage_2.webp) repeat-x;
}

.bg_marron_jfr {
    background: url(/images/02.Tour/MTB-JFR.justfortheride/Illustration/he.jfr.justfortheride_bandeau.webp) center/cover no-repeat;
}

.bg_marron_indi {
    background: url(/images/02.Tour/MTB-IND.indiana/Illustration/he.mtb-ind.indiana_bandeau.webp) center/cover no-repeat;
}

/* MAUVE – Lost Civilization */
.mt-mauve {
    border-left: #8400ff solid 25px;
}

.et-mauve {
    background: #8400ff url(/images/00.Template/nuage_2.webp) repeat-x;
}

.bg_mauve {
    background: url(/images/02.Tour/LOCI.lost_civilization/Illustration/he.loci.lost_civilization_bandeau.webp) center/cover no-repeat;
}

/* BLEU – Multidays */
.mt-bleu {
    border-left: #00a2ff solid 25px;
}

.et-bleu {
    background: #00a2ff url(/images/00.Template/nuage_2.webp) repeat-x;
}

.bg_bleu_lovi {
    background: url(/images/02.Tour/LOCI.lost_civilization/Illustration/he.loci.lost_civilization_bandeau.webp) center/cover no-repeat;
}

.bg_bleu_hiro {
    background: url(/images/02.Tour/HIRO.hit_the_road/Illustration/he.hiro.hit_the_road_bandeau.webp) center/cover no-repeat;
}

.bg_bleu_crri {
    background: url(/images/02.Tour/LOCI.lost_civilization/Illustration/he.loci.lost_civilization_bandeau.webp) center/cover no-repeat;
}

.bg_bleu_imro {
    background: url(/images/02.Tour/LOCI.lost_civilization/Illustration/he.loci.lost_civilization_bandeau.webp) center/cover no-repeat;
}

/* OR – Private/Customized/Special */
.mt-or {
    border-left: #f7d232 solid 25px;
}

.et-or {
    background: #f7d232 url(/images/00.Template/nuage_2.webp) repeat-x;
}

.bg_or-private {
    background: url(/images/02.Tour/PTV.private_tours/Illustration/he.pvt.private_tours_bandeau2.webp) center/cover no-repeat;
}

.bg_or-custome {
    background: url(/images/02.Tour/CUST.custimized_tours/Illustration/he.cust.customized_tour_bandeau.webp) center/cover no-repeat;
}

/* TET */
.bg_or-tet {
    background: url(/images/02.Tour/SP.special_tours/bandeau-tour_special_tet-0814.webp) center/cover no-repeat;
}

/* ROSE – Combo */
.mt-rose {
    border-left: #8f5b80 solid 25px;
}

.et-rose {
    background: #8f5b80 url(/images/00.Template/nuage_2.webp) repeat-x;
}

.bg_rose {
    background: url(/images/02.Tour/CC4.Full%20Discovery%20Vietnam/Illustration/he.cc4.full_discovery_vietnam_bandeau.webp) center/cover no-repeat;
}

.h3-rose {
    margin-top: 10px;
    font-size: 16px;
    color: #8f5b80;
    font-weight: 700;
    text-decoration: underline;
}

/* TRANSPARENT ? */
.tour_transp {
    background: #ab2d2d url(/images/00.Template/nuage_2.webp) repeat-x;
}

/* JAUNE – Information */
.tour_jaune {
    background: #ffcc00 url(/images/00.Template/nuage_2.webp) repeat-x;
}

.mt-jaune {
    border-left: #ffcc00 solid 25px;
}

.et-jaune {
    background: #ffcc00 url(/images/00.Template/nuage_2.webp) repeat-x;
}

.bg_jaune {
    background: url(/images/02.Tour/PVT.private_tours/he.pvt.private_tours_bandeau2.webp) center/cover no-repeat;
}

/* En-têtes & blocs info */
.flex_entete_art {
    clear: both;
    display: flex;
    flex-flow: row wrap;
    box-sizing: border-box;
    justify-content: flex-end;
    min-height: 300px;
}

.item_entete_art {
    background: rgba(207, 207, 207, .8);
}

.img_band_art {
    margin-left: 0;
    padding-left: 0;
    text-align: left;
}

.short_info {
    margin: 0;
    padding-right: 15px;
    padding-top: 10px;
    color: #000;
}

.short_info li {
    margin-top: 3px;
}

.short_info h4 {
    font-size: 1em ;
    margin-top: 0;
    text-decoration: underline;
    font-weight: 700;
    margin: 10px 40px 10px 40px;
    line-height: 170%;
    text-align: justify;
}

.flex_descript_art {
    display: flex;
    flex-flow: wrap;
    box-sizing: border-box;
    justify-content: center;
    gap: 16px;
}

div .art_text {
    flex-grow: 1;
    overflow: visible;

    /*Pascal correction affchage CSS CTS1*/
}
.art_text::after {   /*Pascal correction affchage CSS CTS1*/
    content:""; 
    display:block; 
    clear:both; 
}
  
div .art_book {
    width: auto;
    max-width: 420px;
    margin: 0 20px 10px 0;
}

.slider_portrait {
    width: auto;
    max-width: 420px;
    margin-top: 20px;
}

/* Rubriques */
.title {
    float: left;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: 700;
    font-size: 24px;
    width: 130px;
    color: #000;
    padding-left: 15px;
    height: 40px;
    line-height: 40px;
}

@media (max-width: 767px) { /* Efface le mot Tour en entete */
  .title {
    display: none !important;
  }
}


.tour {
    background: url(/images/00.Template/h1_vert.webp) left center no-repeat;
}

@media (max-width: 767px) { /* Enleve le fond du type d'article "tour" par xmple*/
  .tour {
    display: none !important;
  }
}


.new {
    background: url(/images/00.Template/h1_rose.webp) left center no-repeat;
}

.system {
    background: url(/images/00.Template/h1_vert_dark.webp) left center no-repeat;
}

/* Divers */
.clic_diapo {
    font-size: 9px;
    text-align: center;
    margin: 0 10px !important;
    color: #999;
}

.recommand_footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
}

.recommand_logo {
    margin: 10px 0;
}

/* Commentaires / encadrés */
.comment {
    background-color: #eee;
    padding: 0 0 10px 0;
    border: 1px solid #000;
    font-style: italic;
    font-weight: 700;
}

.colo,
.colo p {
    margin: 10px 0;
    padding: 10px;
}

.milieu {
    margin: 45px;
}

.cadre-info {
    background: #017c7b;
    color: #eee;
    max-width: 100%;
    margin: 0 0 10px 0;
    padding: 10px 10px 10px 25px;
}

.cadre-col-gauche {
    max-width: 800px;
    margin: 10px auto;
    background: rgba(255, 255, 255, .9);
    padding: 10px;
    border-radius: 12px;
    box-shadow: 0 0 30px rgba(0, 0, 0, .2);
    text-align: center;
}

.bouton_vert {
    background-color: var(--he-primary);
    color: #fff;
    font-size: 24px;
    font-weight: 700;
    padding: 10px 20px;
    display: inline-block;
    border-radius: 6px;
    margin-top: 25px;
}

.lightspot { /*Mise en avant like callout*/
    margin: 0 50px;
    background-color: #f7d232;
    color: #017c7b;
    border-radius: 6px;
    padding: 15px;
    border-color: red;
}
.lightspot .h4-blog {
    font-weight: bold;
    color: red;
}


/* ======================================================
   >> Sub-EXTENSION | THEMATIQUES Page Specifique
*/


/*  -------------- CSS DÉDIÉ - PAGE CGV & FAQ -------- */

.cgv-section:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15) !important;
}

/* Effet hover sur les boutons */
a[style*="background: var(--he-primary"]:hover {
    background: #015a5a !important;
    transform: translateX(5px);
}

/* Responsive pour petits écrans */
@media (max-width: 768px) {
    div[style*="grid-template-columns"] {
        grid-template-columns: 1fr !important;
    }
}


.cgv-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 1rem;
}

.cgv-section {
    margin-bottom: 1rem;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    overflow: hidden;
    background: #fff;
    transition: all 0.3s ease;
}

.cgv-section:hover {
    border-color: var(--he-primary, #017c7b);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* Checkbox caché pour l'accordion */
.cgv-checkbox {
    display: none;
}

/* Label comme bouton */
.cgv-toggle {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: 1rem 1.5rem;
    background: linear-gradient(180deg, #f9fafb, #f3f4f6);
    cursor: pointer;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: 700;
    font-size: 1.1rem;
    color: #000;
    transition: all 0.3s ease;
    user-select: none;
}

.cgv-toggle:hover {
    background: linear-gradient(180deg, #eef2f3, #e5e7eb);
}

/* Icône */
.cgv-icon {
    font-size: 1.2rem;
    transition: transform 0.3s ease;
    flex-shrink: 0;
    margin-left: 1rem;
}

.cgv-icon::before {
    content: "▼";
}

/* État ouvert */
.cgv-checkbox:checked + .cgv-toggle {
    background: var(--he-primary, #017c7b);
    color: #fff;
}

.cgv-checkbox:checked + .cgv-toggle .cgv-icon {
    transform: rotate(180deg);
}

/* Contenu */
.cgv-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.5s ease, padding 0.5s ease;
    padding: 0 1.5rem;
}

.cgv-checkbox:checked ~ .cgv-content {
    max-height: 10000px;
    padding: 1.5rem;
}

.cgv-content p,
.cgv-content ul {
    margin-bottom: 1rem;
    line-height: 1.7;
}

.cgv-content ul {
    padding-left: 1.5rem;
    list-style-type: disc;
}

.cgv-content li {
    margin-bottom: 0.5rem;
}

.cgv-content strong {
    color: var(--he-primary, #017c7b);
    font-weight: 700;
}

.cgv-content em {
    font-style: italic;
    color: #555;
}

/* Header CGV */
.cgv-header {
    text-align: center;
    margin-bottom: 2rem;
    padding: 2rem 1rem;
    background: linear-gradient(135deg, #f9fafb 0%, #e5e7eb 100%);
    border-radius: 12px;
}

.cgv-badge {
    display: inline-block;
    background: var(--he-yellow, #fff000);
    color: #000;
    padding: 0.5rem 1.5rem;
    font-weight: 700;
    font-size: 0.9rem;
    border-radius: 20px;
    margin-bottom: 1rem;
    text-transform: uppercase;
}

.cgv-title {
    margin: 1rem 0;
    font-size: clamp(1.5rem, 2vw + 1rem, 2.2rem);
    color: var(--he-primary, #017c7b);
    font-weight: 700;
    line-height: 1.3;
}

/* Introduction */
.cgv-intro {
    max-width: 900px;
    margin: 0 auto 2rem;
    padding: 1.5rem;
    background: #fff;
    border-left: 4px solid var(--he-primary, #017c7b);
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.cgv-intro-title {
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--he-primary, #017c7b);
    margin-bottom: 1rem;
}

.cgv-intro p {
    margin-bottom: 1rem;
    line-height: 1.7;
}

.cgv-intro p:last-child {
    margin-bottom: 0;
}

/* Footer CGV */
.cgv-footer {
    text-align: center;
    margin-top: 3rem;
    padding: 2rem 1rem;
    background: #f9fafb;
    border-radius: 12px;
    border: 1px solid #e5e7eb;
}

.cgv-footer-title {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--he-primary, #017c7b);
    margin-bottom: 1rem;
}

.cgv-footer-signature {
    font-size: 1.1rem;
    font-weight: 700;
    margin: 1rem 0 0.5rem;
}

.cgv-footer-company {
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.cgv-footer-address {
    color: #666;
    font-size: 0.95rem;
}

.cgv-footer img {
    max-width: 300px;
    height: auto;
    margin: 2rem auto 0;
    display: block;
}

/* Contact info highlight */
.contact-info {
    background: #f0f9ff;
    border-left: 3px solid #0284c7;
    padding: 1rem;
    margin: 1rem 0;
    border-radius: 4px;
}

.contact-info-title {
    font-weight: 700;
    color: #0284c7;
    margin-bottom: 0.5rem;
}

.contact-info ul {
    list-style: none;
    padding-left: 0;
}

.contact-info li {
    margin-bottom: 0.5rem;
    padding-left: 1.5rem;
    position: relative;
}

.contact-info li::before {
    content: "→";
    position: absolute;
    left: 0;
    color: #0284c7;
    font-weight: 700;
}

/* Highlight boxes */
.highlight-box {
    background: #fef3c7;
    border-left: 4px solid #f59e0b;
    padding: 1rem;
    margin: 1rem 0;
    border-radius: 4px;
}

.highlight-box p {
    margin: 0;
    font-weight: 600;
}

/* Refund table style */
.refund-policy {
    background: #f0fdf4;
    border: 1px solid #86efac;
    border-radius: 8px;
    padding: 1rem;
    margin: 1rem 0;
}

.refund-item {
    padding: 0.75rem;
    border-bottom: 1px solid #d1fae5;
}

.refund-item:last-child {
    border-bottom: none;
}

.refund-time {
    font-weight: 700;
    color: #15803d;
}

.refund-amount {
    color: #166534;
    font-weight: 600;
}

/* Responsive */
@media (max-width: 768px) {
    .cgv-container {
        padding: 0.5rem;
    }
    
    .cgv-toggle {
        padding: 0.75rem 1rem;
        font-size: 1rem;
    }
    
    .cgv-checkbox:checked ~ .cgv-content {
        padding: 1rem;
    }
    
    .cgv-title {
        font-size: 1.5rem;
    }
    
    .cgv-intro {
        padding: 1rem;
    }
    
    .cgv-footer img {
        max-width: 200px;
    }
}

/* Accessibilité */
.cgv-toggle:focus-within {
    outline: 2px solid var(--he-primary, #017c7b);
    outline-offset: 2px;
}

/* Print styles */
@media print {
    .cgv-section {
        border: none;
        page-break-inside: avoid;
    }
    
    .cgv-content {
        max-height: none !important;
        padding: 1rem 0 !important;
    }
    
    .cgv-icon {
        display: none;
    }
    
    .cgv-toggle {
        background: none;
        border-bottom: 2px solid #000;
    }
}
/*------------------ FIN PAGE CGV ET FAQ -----------------*/

/*  -------------- CSS DÉDIÉ - PAGE CUSTOM TOURS -------- */


/* --- SECTIONS AVEC FOND ALTERNÉ --- */
.mt-or .tour-highlights:nth-of-type(odd),
.mt-or .tour-visits:nth-of-type(odd) {
     background-color: #fff3cd;
    padding: 30px 50px;
    border-radius: 8px;
    margin: 20px 0;
        width: 100%;
}

.mt-or .tour-why {
     background-color: #fff3cd;
    padding: 30px 50px;
    border-radius: 8px;
    margin: 20px 0;
}

/* --- TITRES DE SECTIONS AMÉLIORÉS --- */
.mt-or .tour-section-title {
    border-bottom: 3px solid var(--or-custome);
    display: inline-block;
    position: relative;
}

.mt-or .tour-section-title::after {
    content: "";
    display: block;
    width: 60px;
    height: 3px;
    background: linear-gradient(90deg, var(--or-custome), transparent);
    margin: 10px 0 0 0;
}

/* --- CARTES "WHAT YOU CAN CUSTOMIZE" --- */
.mt-or .why-item {
    background: #fff;
    border: 2px solid #f0f0f0;
    border-radius: 8px;
    padding: 20px;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.mt-or .why-item::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: linear-gradient(90deg, var(--or-custome), #f4d03f);
    transform: scaleX(0);
    transition: transform 0.3s ease;
}

.mt-or .why-item:hover::before {
    transform: scaleX(1);
}

.mt-or .why-item:hover {
    border-color: var(--or-custome);
    box-shadow: 0 8px 20px rgba(218, 165, 32, 0.15);
    transform: translateY(-5px);
}

.mt-or .why-item strong {
    display: block;
    color: var(--or-custome);
    font-size: 1.1em;
    margin-bottom: 10px;
    padding-bottom: 8px;
    border-bottom: 1px solid #f0f0f0;
}

/* --- CARTES "HOW IT WORKS" (ÉTAPES) --- */
.mt-or .visit-item {
    background: #fff;
    border-left: 4px solid var(--or-custome);
    padding: 20px;
    padding-left: 20px;
    border-radius: 8px;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

.mt-or .visit-item:hover {
    border-left-width: 8px;
    transform: translateX(5px);
    box-shadow: 0 4px 16px rgba(218, 165, 32, 0.2);
}

.mt-or .visit-item h4 {
    color: var(--or-custome);
    font-size: 1.15em;
    margin-bottom: 12px;
    font-weight: bold;
}

/* --- HIGHLIGHTS (CHECKMARKS) --- */
.mt-or .highlight-card {
     background: #fff;
    border: 1px solid #f0f0f0;
    border-radius: 6px;
    padding: 20px;
    transition: all 0.3s ease;
    text-align: center; /* Centre le contenu */
    display: flex;
    flex-direction: column; /* Titre en haut, texte en bas */
    align-items: center;

    /*
    background: #fff;
    border: 1px solid #f0f0f0;
    border-radius: 6px;
    padding: 15px;
    transition: all 0.3s ease;*/
}

.mt-or .highlight-card:hover {
    border-color: var(--or-custome);
    box-shadow: 0 4px 12px rgba(218, 165, 32, 0.1);
    transform: translateY(-3px);
}

.mt-or .highlight-card .hl-ico {
    color: var(--or-custome);
    font-weight: bold;
    font-size: 1.8em;
    margin-bottom: 10px;
    display: block; /* Icône sur sa propre ligne */
}

.mt-or .highlight-card strong {
    display: block; /* Titre sur sa propre ligne */
    color: var(--or-custome);
    font-size: 1.15em;
    margin-bottom: 10px;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--or-custome);
    width: 100%;
}


/* --- CTA PRINCIPAL (ENCADRÉ DORÉ) --- */
.mt-or .tour-choices-callout {
     /*background: linear-gradient(135deg, var(--or-custome) 0%, #f4d03f 100%);*/
     background-color: #f7faf6;
   
    padding: 40px 30px;
    border-radius: 12px;
    /*box-shadow: 0 8px 24px rgba(218, 165, 32, 0.3);*/
    text-align: center;
    margin: 30px auto;
    max-width: 1200px;
}

.mt-or .tour-choices-callout .tour-choices-lead {

    font-size: 1.3em;
    margin-bottom: 15px;
    text-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.mt-or .tour-choices-callout p {
    color: #017c7b;
    font-size: 1.05em;
}

.mt-or .tour-choices-callout .cta-btn {
    background: #fff;
    color: var(--or-custome) !important;
    font-weight: bold;
    padding: 15px 30px;
    font-size: 1.1em;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
    transition: all 0.3s ease;
    text-decoration: none;
    display: inline-block;
    margin: 10px;
}

.mt-or .tour-choices-callout .cta-btn:hover {
    transform: scale(1.05);
    box-shadow: 0 6px 16px rgba(0,0,0,0.3);
    background: #fffef8;
}

/* --- CTA SECONDAIRE (UPSELL) --- */
.mt-or .tour-upsell {
    background: linear-gradient(135deg, #fff9e6 0%, #ffffff 100%);
    border: 2px solid var(--or-custome);
    border-radius: 10px;
    padding: 25px;
    margin: 30px 0;
    box-shadow: 0 4px 12px rgba(218, 165, 32, 0.1);
}

.mt-or .tour-upsell .tour-section-title {
    color: var(--or-custome);
    border-bottom: none;
    margin-bottom: 10px;
}

.mt-or .tour-upsell .tour-section-title::after {
    display: none;
}

/* --- BOUTONS CTA (EMAIL & WHATSAPP) --- */
.mt-or .cta-btn.email {
     background: #fff3cd;
border-color: #ffc107;
    border: 2px solid /*var(--or-custome)*/;
}

.mt-or .cta-btn.email:hover {
    background: #ffc107;
    border-color: #ffc107;
    transform: translateY(-2px);
}

.mt-or .cta-btn.whatsapp {
    background: #25D366;
    color: #fff;
    border: 2px solid #25D366;
}

.mt-or .cta-btn.whatsapp:hover {
    background: #1fb855;
    border-color: #1fb855;
    transform: translateY(-2px);
}

/* --- FAQ AMÉLIORÉE --- */
.mt-or .tour-faq details {
    background: #fff;
    border: 1px solid #f0f0f0;
    border-radius: 8px;
    margin-bottom: 12px;
    padding: 15px 20px;
    transition: all 0.3s ease;
}

.mt-or .tour-faq details:hover {
    border-color: var(--or-custome);
    box-shadow: 0 4px 12px rgba(218, 165, 32, 0.1);
}

.mt-or .tour-faq summary {
    cursor: pointer;
    font-weight: bold;
    color: #333;
    padding: 5px 0;
    transition: color 0.3s ease;
}

.mt-or .tour-faq summary:hover {
    color: var(--or-custome);
}

.mt-or .tour-faq details[open] summary {
    color: var(--or-custome);
    margin-bottom: 15px;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--or-custome);
}

.mt-or .tour-faq details[open] {
    border-color: var(--or-custome);
    box-shadow: 0 4px 12px rgba(218, 165, 32, 0.15);
}

/* --- BADGES/PILLS --- */
.mt-or .badge-or {
    display: inline-block;
    background-color: #f7d232;
    padding: 6px 16px;
    border-color: #ffc107;
    border-radius: 20px;
    font-size: 0.9em;
    font-weight: bold;
    margin: 5px;
    box-shadow: 0 2px 8px rgba(218, 165, 32, 0.3);
}

/* --- SÉPARATEURS DÉCORATIFS --- */
.mt-or .section-separator {
    width: 100px;
    height: 3px;
    background: linear-gradient(90deg, transparent, var(--or-custome), transparent);
    margin: 30px auto;
}

/* --- LIENS DANS LE TEXTE --- */
.mt-or .art_text a.link {
    color: var(--or-custome);
    font-weight: 600;
    text-decoration: underline;
    transition: all 0.3s ease;
}

.mt-or .art_text a.link:hover {
    color: #c89519;
    text-decoration: none;
}

/* --- RESPONSIVE MOBILE --- */
@media (max-width: 768px) {
    .mt-or .tour-choices-callout {
        padding: 30px 20px;
    }
    
    .mt-or .tour-choices-callout .cta-btn {
        display: block;
        margin: 10px 0;
        width: 100%;
    }
    
    .mt-or .why-item,
    .mt-or .visit-item {
        padding: 15px;
    }
    
    .mt-or .tour-section-title {
        font-size: 1.3em;
    }
}

/* --- ANIMATIONS SUBTILES --- */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.mt-or .tour-highlights,
.mt-or .tour-visits,
.mt-or .tour-why,
.mt-or .tour-faq {
    animation: fadeInUp 0.6s ease-out;
}

/* --- AMÉLIORATION DES GRILLES --- */
.mt-or .why-us-grid,
.mt-or .visits-grid {
    gap: 20px;
}

/* --- TEXTE DANS LES CARTES --- */
.mt-or .why-item ul,
.mt-or .visit-item ul {
    margin-top: 10px;
    padding-left: 0;
    list-style: none;
}

.mt-or .why-item ul li,
.mt-or .visit-item ul li {
    padding-left: 20px;
    position: relative;
    margin-bottom: 8px;
}

.mt-or .why-item ul li::before,
.mt-or .visit-item ul li::before {
    content: "•";
    color: var(--or-custome);
    font-weight: bold;
    position: absolute;
    left: 0;
}

/* --- IMAGE CIRCULAIRE INTRO --- 
.mt-or .art_text img[width="150"] {
    border: 3px solid var(--or-custome);
    box-shadow: 0 4px 12px rgba(218, 165, 32, 0.2);
    transition: all 0.3s ease;
}

.mt-or .art_text img[width="150"]:hover {
    transform: scale(1.05);
    box-shadow: 0 6px 16px rgba(218, 165, 32, 0.3);
}*/

/* --- H3 ET H4 AMÉLIORÉS --- */
.mt-or .h3-article {
    color: var(--or-custome);
    border-left: 5px solid var(--or-custome);
    padding-left: 15px;
    margin-bottom: 20px;
}

.mt-or .h4-blog {
    color: #333;
    position: relative;
    padding-left: 20px;
    margin-top: 10px;
    margin-bottom: 15px;
}

/*  -------------- FIN - PAGE CUSTOM TOURS -------- 
---------------------------------------------------*/


/*=======================================================
>>>>>>>>>>>>>> MAIN-EXTTENSION | PAGE BLOG <<<<<<<<<<<<<<
=========================================================*/

.article-blog h2, .article-blog h3, .article-blog h4 {
    color: #017c7b;
    font-size: 1.5em;
    padding: 10px 50px;
}

.article-blog h3 {
      font-size: 1.4em;
}

.article-blog h4 {
    font-size: 1.3em;
}



/*=======================================================
>>>>>>> MAIN-EXTENSION | PAGE ABOUT (information)<<<<<<<
=========================================================*/

/* --------------------------
>>>> PAGE ABOUT > Equipement 
-----------------------------*/
.equipement {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
}

@media (min-width:768px) {
    .equipement {
        grid-template-columns: 1fr 2fr;
    }
}

.equ_title {
    grid-column: 1/-1;
    margin: 50px 0 10px;
}

.equ_img img {
    margin: auto;
    min-width: 35%;
    max-width: 100%;
    height: auto;
}
/* Extensions CK */
.titreck-text {
    font-family: Verdana;
}

div#maximenuck131 li.maximenuck img,
div#maximenuck151 li.maximenuck img {
    float: left;
    margin-right: 7px;
}

.mobilebarmaximenuck {
    z-index: 10000;
}

/* .imageeffectck_title etc. */
.imageeffectck_title {
    line-height: 50px !important;
}

/* Info complémentaire */
.title_compl {
    background: #b7cab3 url(/images/00.Template/title_complement.webp) no-repeat left top;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 1.4em;
    font-weight: 700;
    min-height: 40px;
    color: #000;
    padding-top: 5px;
    padding-left: 130px;
    margin: 0;
}

@media (max-width: 767px) {
  .title_compl {
    background: #b7cab3;
    padding-left: 15px;
  }
}

.info_complement ul {
    margin: 10px 20px 1rem 0;
}

.info_complement li {
    list-style-type: none;
    background: url(/images/00.Template/postbullets.webp) left center no-repeat;
    padding-left: 32px;
    padding-bottom: 7px;
}


.subtitle_compl h3 {
    margin: 20px 40px 0;
    padding-left: 15px;
    background: #b7cab3;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 1.4em;
    color: #000;
    font-weight: 700;
}

.subtitle_compl ul {
    list-style-type: none;
    margin-left: 130px; /* garde ta mise en page existante */
    line-height: 1.8em;
}

.subtitle_compl ul {
    list-style: none;
    margin: 10px 40px 0;   /* marge harmonisée avec le h3 */
    padding: 0;
}

.subtitle_compl ul li {
    background: url(/images/00.Template/postbullets.webp) 0 .4em no-repeat; /* à gauche */
    padding-left: 2.1em;  /* espace pour l’icône */
}




/* ----------------------------
>>>> PAGE ABOUT > Page Contact
------------------------------- */
.h3-contact {
    background: none;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: 700;
    font-size: 1.6em;
    text-align: center;
    padding: 30px 30px 15px 30px;
    color: #000;
    text-align: left;
}


/* ========================================================
   MAIN-EXTTENSION | BLOG / CATÉGORIES – Grille responsive
   ========================================================= */

.blog .items-leading,
.blog .items-row {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}

@media (min-width:768px) {

    .blog .items-leading,
    .blog .items-row {
        grid-template-columns: 1fr 1fr;
    }
}

@media (min-width:1200px) {

    .blog .items-leading,
    .blog .items-row {
        grid-template-columns: 1fr 1fr 1fr;
    }
}


/* ===========================
   MEDIA QUERIES – Ajustements mobiles
   =========================== */

@media (max-width: 770px) {
    .checkout_result {
        background-image: none;
        padding: 24px;
    }

    ul.sp-contact-info {
        display: none;
    }

    body {
        background-image: none;
    }

    /* H1 héritage – réduire le padding gauche sur mobile */
    h2 {
        padding-left: 16px;
    }

    /* Paragraphes – marges plus petites */
    p {
        margin: 10px;
        margin-right: 30px;
        margin-left: 20px;
    }
}


/* EXPECTATION DESCRIPTION TOURS */
.expect-list {
    line-height: 200%;
}


/* Conteneur général */
.tour-info {
    margin-top: 1rem;
}

/* Grille responsive des cartes */
.tour-info-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 14px;
    margin-top: 12px;
}

/* Cartes d'information */
.info-card {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 14px 16px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .04);
}

.info-card-title {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 8px;
    font-weight: 700;
    font-size: 1.05rem;
}

.info-card ul {
    margin: 0;
    padding-left: 1.1rem;
}

/* Icône de titre (emoji) */
.card-ico {
    font-size: 1.1rem;
    line-height: 1;
}

/* Liste des prix, alignement étiquette / montant */
.price-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.price-list li {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 6px 0;
    border-bottom: 1px dashed #e5e7eb;
}

.price-list li:last-child {
    border-bottom: 0;
}

/* Petits ajustements mobiles */
@media (max-width: 600px) {
    .info-card-title {
        font-size: 1rem;
    }

    .price-list li {
        padding: 8px 0;
    }
}






/* --------------------------------------------------------------------- 
----------- SUB MAIN |  Ajout recommandation Hightlight, FAQ, ----------
------------------------------------------------------------------------= */


/* Sections titrées harmonisées */
.tour-section-title {
    font-size: 1.25rem;
    line-height: 1.4;
    margin: 1.25rem 0 0.75rem;
    font-weight: 700;
}

/* Highlights */
.tour-highlights-grid {/*2025*/
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 12px;
    margin: 20px 0px 20px 0px;
    padding: 0 0 0 0;
    list-style: none;
}

.highlight-card {
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 12px 14px;
    background: #fff;
    display: flex;
    align-items: center;
    gap: 10px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .04);
}

.hl-ico {
    font-size: 1.2rem;
}

/* Why choose us */

.why-us-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 12px;
    margin-bottom: 16px;
}

.why-item {
    background: linear-gradient(180deg, #ffffff, #f8fafc);
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 14px;
}

/* Upsell e-bike */
.tour-upsell {
    border: 1px dashed #94a3b8;
    border-radius: 14px;
    padding: 14px;
    background: #f8fafc;
    margin: 25px 40px 0px !important;
}

.tour-upsell .upsell-content p {
    margin: 6px 0 0;
}

/* Policies */
.tour-policy .policy-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 12px;
}

.policy-card {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 14px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .04);
}

.policy-card p {
    margin: 6px 0 0;
}

/* =====================================
>>>>>>>>>>>>>> CTA buttons <<<<<<<<<<<<<
CTA contact – ergonomique et responsive
======================================== */

/*.tour-cta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    margin: 16px 0;
    justify-content: center;
    max-width: fit-content;    
}

.tour-cta{
  --cta-accent: var(--tour-accent, #1fa2ff);
  --cta-line:   var(--tour-line, #e5e7eb);
  --cta-ink:    #0b2b45;

  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .5rem .6rem;

  padding: .75rem .9rem;
  border: 1px solid var(--cta-line);
  border-radius: var(--radius-lg, 16px);
  background: #fff;
  box-shadow: 0 4px 12px rgba(0,0,0,.04);
}*/

.tour-cta{
  /* Vars */
  --cta-accent: var(--tour-accent, #1fa2ff);
  --cta-line:   var(--tour-line, #e5e7eb);
  --cta-ink:    #0b2b45;

  /* Layout + centrage */
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;      /* centre les éléments à l’intérieur */
  gap: .5rem .6rem;
  margin: 16px auto;            /* centre le bloc lui-même */
  max-width: fit-content;       /* s’ajuste au contenu */
  text-align: center;           /* aligne le texte si besoin (icônes, label) */

  /* Style */
  padding: .75rem .9rem;
  border: 1px solid var(--cta-line);
  border-radius: var(--radius-lg, 16px);
  background: #fff;
  box-shadow: 0 4px 12px rgba(0,0,0,.04);
}


.tour-cta .cta-label{
  font-weight: 700;
  color: var(--cta-ink);
  margin-right: .25rem;
}

.tour-cta .cta-btn{
  display: inline-flex;
  align-items: center;
  gap: .4rem;

  padding: .5rem .85rem;
  border: 1px solid color-mix(in oklab, var(--cta-accent) 55%, white 45%);
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(31,162,255,.10), rgba(31,162,255,.05));
  color: var(--cta-ink);
  text-decoration: none;
  line-height: 1;
  font-weight: 600;
  transition: transform .06s ease, background-color .15s ease, color .15s ease, border-color .15s ease;
}

@supports not (color: color-mix(in oklab, white, black)){
  .tour-cta .cta-btn{ border-color:#b8e0ff; }
}

.tour-cta .cta-btn:hover{
  background: var(--cta-accent);
  color: #fff;
  border-color: var(--cta-accent);
  transform: translateY(-1px);
}

.tour-cta .cta-btn:active{
  transform: translateY(0);
}

.tour-cta .cta-btn ._ico{
  font-size: 1rem;
  line-height: 1;
}

/* Variantes (si tu veux des couleurs dédiées) */
.tour-cta .cta-btn.whatsapp{
  border-color: #22c55e33;
  background: linear-gradient(180deg, #22c55e22, #22c55e11);
}
.tour-cta .cta-btn.whatsapp:hover{
  background: #22c55e; border-color:#22c55e;
}

/* Mobile : occupe toute la largeur si besoin */
@media (max-width: 640px){
  .tour-cta{ gap: .5rem; }
  .tour-cta .cta-btn{ width: 100%; justify-content: center; }
}

/* >>>>>>>>>>>>>> FIN CTA buttons <<<<<<<<<<<<<<<
================================================= 
================================================= */



.btn-primary,
.btn-outline {
    display: inline-block;
    padding: 10px 16px;
    border-radius: 10px;
    text-decoration: none;
    font-weight: 700;
    transition: transform .05s ease, box-shadow .2s ease;
}

.btn-primary {
    background: #017c7b;
    color: #fff;
}

.btn-primary:hover {
    box-shadow: 0 6px 18px rgba(1, 124, 123, .25);
    transform: translateY(-1px);
}

.btn-outline {
    color: #017c7b;
    border: 2px solid #017c7b;
    background: #fff;
}

.btn-outline:hover {
    background: #eefcfb;
}

/* FAQ - Affichage 2 COLONNE*/
.tour-faq {
    /* 1. MISE EN PAGE EN DEUX COLONNES */
    column-count: 2;
    column-gap: 24px;
    /* Espace entre les deux colonnes */
}

/* Force le titre (H3) à s'étendre sur toute la largeur des deux colonnes */
.tour-faq .tour-section-title {
    column-span: all;
    margin-bottom: 1.5rem;
    /* Ajout d'une marge pour bien séparer le titre des colonnes */
}

.tour-faq details {
    /* 2. ÉVITER LA COUPURE entre les colonnes */
    break-inside: avoid;

    /* Styles existants */
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    padding: 10px 12px;
    margin: 8px 0;
    background: #fff;
}

.tour-faq summary {
    cursor: pointer;
    font-weight: 600;
}

.tour-faq details[open] summary {
    margin-bottom: 6px;
}

/* 3. ADAPTATION MOBILE : Retour à une seule colonne sur petits écrans */
@media (max-width: 768px) {
    .tour-faq {
        column-count: 1;
        column-gap: normal;
        /* Supprime l'espace entre les colonnes */
    }

    /* Le titre n'a plus besoin d'être forcé à s'étendre, mais on peut réinitialiser la marge */
    .tour-faq .tour-section-title {
        margin-bottom: 0.75rem;
        /* Règle la marge standard */
    }
}


/* FAQ - Affichage UNE COLONNE */
/*.tour-faq details {
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  padding: 10px 12px;
  margin: 8px 0;
  background: #fff;
}

.tour-faq summary {
  cursor: pointer;
  font-weight: 600;
}

.tour-faq details[open] summary {
  margin-bottom: 6px;
}*/

/* Helpers */
.txt-center {
    text-align: center;
}

.link {
    color: #017c7b;
    text-decoration: underline;
}

.link:hover {
    text-decoration: none;
}

/* Responsive small tweaks */
@media (max-width: 640px) {

    .btn-primary,
    .btn-outline {
        width: 100%;
        text-align: center;
    }
}


/* ============================================
>>>>>>>>>>>>>>>>>>>> PASCAL <<<<<<<<<<<<<<<<<<<
=============================================== */


/* --- Ajout de marges spécifiques pour les sections de contenu --- */
.tour-highlights,
.tour-why,
.tour-upsell,
.tour-policy,
.tour-faq {
    /* Marge extérieure de 0px (haut/bas) et 40px (gauche/droite) */
    margin: 0 40px;
}


/* ================================================================
>>>>>>>>>>> SUB MAIN | CSS PAGE LEVEL DIFFICULTE  <<<<<<<<<<<<<<<<<<<
=================================================================== */


.dif-wrap{max-width:1100px;margin:0 auto;padding:16px;}
.dif-intro{
  background:var(--bg);border:1px solid var(--line);border-radius:var(--radius);
  padding:18px 20px;box-shadow:var(--shadow)
}
.dif-intro h1{margin:.2rem 0 .4rem;font-size:clamp(1.5rem,1.2rem + 1vw,2rem);color:var(--ink)}
.dif-intro p{margin:.2rem 0;color:var(--muted);line-height:1.6}
.dif-bullets{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.6rem;margin-top:.6rem}
.dif-bullets .b{
  display:flex;gap:.5rem;align-items:center;background:var(--card);
  border:1px solid var(--line);border-radius:12px;padding:.55rem .7rem
}
.dif-ico{width:22px;height:22px;color:var(--ink)}

.dif-grid{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1rem;margin:14px 0
}
.dif-card{
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  padding:16px;box-shadow:var(--shadow);display:flex;flex-direction:column;gap:.55rem;
  transition:transform .15s ease, box-shadow .15s ease
}
.dif-card:hover{transform:translateY(-2px);box-shadow:0 12px 30px rgba(2,8,23,.14)}
.dif-top{display:flex;justify-content:space-between;align-items:center;gap:.6rem}
.dif-title{margin:0;font-size:1.05rem;color:var(--ink);font-weight:800}
.badge{padding:.25rem .6rem;border-radius:999px;font-weight:700;font-size:.85rem;color:#0b0f13;border:1px solid transparent}
.badge-easy{background:color-mix(in oklab,var(--easy) 20%,#fff);border-color:var(--easy)}
.badge-moderate{background:color-mix(in oklab,var(--moderate) 20%,#fff);border-color:var(--moderate)}
.badge-sport{background:color-mix(in oklab,var(--sport) 20%,#fff);border-color:var(--sport)}
.badge-expert{background:color-mix(in oklab,var(--expert) 20%,#fff);border-color:var(--expert)}
.tagline{margin:0;color:var(--muted)}
.quick{display:flex;gap:.4rem;flex-wrap:wrap}
.quick span{
  background:var(--bg);border:1px solid var(--line);border-radius:10px;padding:.25rem .5rem;
  font-size:.9rem;color:var(--ink)
}
.dif-illus{display:flex;gap:.5rem;align-items:center;margin:.2rem 0 .1rem}
.dif-illus .ico-lg{width:38px;height:38px}
.who{margin:.1rem 0 0;font-weight:600;color:var(--ink)}

.note-box{
  border-left:6px solid var(--moderate);
  background:color-mix(in oklab,var(--moderate) 6%,#fff);
  padding:.9rem 1rem;border-radius:14px;color:var(--ink);margin-top:.8rem
}

/* Tableau très simple et lisible */
.dif-table{width:100%;border-collapse:separate;border-spacing:0;background:#fff;border:1px solid var(--line);border-radius:16px;overflow:hidden;box-shadow:var(--shadow);margin-top:.6rem}
.dif-table th{background:var(--bg);text-align:left;padding:.8rem .9rem;color:var(--ink);border-bottom:1px solid var(--line)}
.dif-table td{padding:.7rem .9rem;border-bottom:1px solid var(--line);color:var(--ink)}
.dif-table tr:last-child td{border-bottom:0}

/* Responsive */
@media (max-width:1024px){.dif-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.dif-bullets{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.dif-grid,.dif-bullets{grid-template-columns:1fr}}
/* Fins accents couleurs sur cartes */
.card-1{border-color:color-mix(in oklab,var(--easy) 35%,var(--line))}
.card-2{border-color:color-mix(in oklab,var(--moderate) 35%,var(--line))}
.card-3{border-color:color-mix(in oklab,var(--sport) 35%,var(--line))}
.card-4{border-color:color-mix(in oklab,var(--expert) 35%,var(--line))}


/*------------------------------------------
>>>>>>>> Feuille Level Difficulty <<<<<<<<<<
-------------------------------------------- */
.body-level-sheet{
    height:100%;
    --bg:#f5f7fb;
    --panel:#ffffff;
    --ink:#0d2239;
    --muted:#5f6b7a;
    --line:#e6e9f0;

    --green:#22c55e;
    --green-ink:#0f5132;
    --amber:#f59e0b;
    --red:#ef4444;
    --blue:#2563eb;

    --radius-xl:18px;
    --radius:12px;

    --shadow: 0 4px 20px rgba(13,34,57,.06), 0 2px 6px rgba(13,34,57,.04);
  }
  .body-level-sheet{
    margin:0;
    background:var(--bg);
    color:var(--ink);
    font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
    line-height:1.45;
  }
  .wrap-level-sheet{
    max-width:1060px;
    margin:40px auto;
    padding:24px;
  }

  .board-level-sheet{
    background:var(--panel);
    border-radius:var(--radius-xl);
    box-shadow:var(--shadow);
    padding:36px 28px 32px;
  }

  /* Header */
  .title-level-sheet{
    text-align:center;
    margin:0 0 18px;
    font-size: clamp(28px, 3.8vw, 44px);
    line-height:1.15;
    letter-spacing:.2px;
  }
  .subtitle-level-sheet{
    text-align:center;
    color:var(--muted);
    margin:0 0 28px;
    font-size:clamp(14px, 1.8vw, 16px);
  }

  /* Small KPI boxes */
  .kpis{
    display:grid;
    grid-template-columns: repeat(4, 1fr);
    gap:12px;
    margin:10px 0 26px;
  }
  .kpi{
    background:#f9fbff;
    border:1px solid var(--line);
    border-radius:14px;
    padding:14px 12px;
    display:flex;
    gap:12px;
    align-items:center;
  }
  .kpi svg{flex:0 0 28px}
  .kpi h4{margin:0 0 2px;font-size:15px}
  .kpi p{margin:0;color:var(--muted);font-size:13px}

  /* Level cards */
  .levels{
    display:grid;
    grid-template-columns: repeat(4, 1fr);
    gap:14px;
  }
  .card{
    background:#fff;
    border:1px solid var(--line);
    border-radius:16px;
    padding:18px 16px;
    box-shadow:var(--shadow);
  }
  .card h5{
    margin:0 0 10px;
    font-size:18px;
    font-weight:700;
    display:flex;
    justify-content:space-between;
    align-items:baseline;
  }
  .card h5 span{color:var(--muted); font-weight:600}
  .badge{
    display:inline-block;
    padding:6px 10px;
    border-radius:999px;
    font-size:12px;
    font-weight:700;
    color:#fff;
    margin:6px 0 12px;
  }
  .badge.green{background:var(--green)}
  .badge.amber{background:var(--amber)}
  .badge.red{background:var(--red)}
  .iconCircle{
    width:42px;height:42px;border-radius:50%;display:grid;place-items:center;margin-bottom:8px;
  }
  .iconCircle.green{background: rgba(34,197,94,.12)}
  .iconCircle.amber{background: rgba(245,158,11,.14)}
  .iconCircle.red{background: rgba(239,68,68,.14)}
  .card ul{
    margin:10px 0 0 18px;
    padding:0;
    color:#1e293b;
    font-size:14px;
  }
  .card ul li + li{margin-top:6px}
  .forwho{
    margin-top:10px;
    color:var(--muted);
    font-size:13px;
  }

  /* Table */
  .tableWrap{margin-top:22px;border:1px solid var(--line);border-radius:14px;overflow:hidden;background:#fff}
  table{
    width:100%;
    border-collapse:collapse;
    font-size:14px;
  }
  thead th{
    background:#f7f9fc;
    color:#0f172a;
    text-align:left;
    padding:12px 14px;
    border-bottom:1px solid var(--line);
    font-weight:700;
  }
  tbody td{
    padding:12px 14px;
    border-bottom:1px solid var(--line);
    vertical-align:top;
    color:#0f172a;
  }
  tbody tr:last-child td{border-bottom:none}
  .lvlTag{
    font-weight:700;
  }
  .lvl1{color:var(--green)}
  .lvl2{color:#eab308}
  .lvl3{color:var(--amber)}
  .lvl4{color:var(--red)}

  /* Note */
  .note{
    margin-top:16px;
    background:#fff8e6;
    border:1px solid #fde7b3;
    padding:14px 16px;
    border-radius:12px;
    color:#7a5a00;
    font-size:14px;
  }
  .note b{color:#6b4f00}

  /* Responsive */
  @media (max-width: 1024px){
    .levels{grid-template-columns: repeat(2, 1fr)}
    .kpis{grid-template-columns: repeat(2, 1fr)}
  }
  @media (max-width: 640px){
    .wrap{padding:14px}
    .levels, .kpis{grid-template-columns: 1fr}
    .board{padding:26px 18px}
  }

  /* Print */
  @media print{
    body{background:#fff}
    .board{box-shadow:none;border:1px solid #ddd}
    .note{break-inside:avoid}
  }


  /* ============================================
>>>>>>>> FIN - Feuille Level Difficulty <<<<<<<<<<
============================================ */







/* ------------------------------------------------------
  >>>> SUB MAIN | MULTIDAYS TOURS — CSS optimisé (2026)
 -------------------------------------------------------- */

/* ---------- Variables (avec valeurs par défaut) ---------- */
:root{
  /* Spacings */
  --space-3: .75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;

  /* Radius */
  --radius-md: 12px;
  --radius-lg: 16px;

  /* Couleurs thème (fallbacks si non définies plus haut) */
  --tour-accent: #1fa2ff;     /* bleu accent */
  --tour-line: #e5e7eb;       /* gris bordures */
  --tour-ink-soft: #334155;   /* texte */
  --tour-shadow: 0 6px 18px rgba(0,0,0,.06);

  /* Composants */
  --chip-h: 34px;
}

/* ---------- En-tête "days" ---------- */
.days{
  position: relative;
  margin: var(--space-5) 0 var(--space-3);
  padding: .85rem 1.1rem .9rem 3.1rem;
  background: linear-gradient(180deg, #fff, #f9fbfd);
  border: 1px solid var(--tour-line);
  border-start-start-radius: 0;              /* coin haut gauche (en LTR) */
  border-end-start-radius: 0;                /* coin bas  gauche (en LTR) */
  border-start-end-radius: var(--radius-lg); /* coin haut droit  (en LTR) */
  border-end-end-radius: var(--radius-lg); 
  box-shadow: var(--tour-shadow);
  font-weight: 700;
  line-height: 1.25;
  max-width: fit-content;
  color: #017C7b
}
.days::before{
  content: "🚴";
  position: absolute;
  left: .85rem;
  top: 50%;
  transform: translateY(-50%);
  width: 1.75rem; height: 1.75rem;
  display: grid; place-items: center;
  background: radial-gradient(ellipse at 30% 30%, var(--tour-accent) 0%, #6ed0ff 80%);
  color: #fff;
  border-radius: 50%;
  font-size: .95rem;
  box-shadow: 0 4px 12px rgba(31,162,255,.35);
}

/* ---------- Points forts / highlights ---------- */
.highlight-multidays{
  position: relative;
  background: #fff;
  border: 1px solid var(--tour-line);
  border-radius: var(--radius-md);
  padding: .7rem .8rem .7rem 2.2rem;
  box-shadow: 0 3px 12px rgba(0,0,0,.04);
}
.highlight-multidays::before{
  content: "✓";
  position: absolute;
  left: .65rem; top: .72rem;
  width: 1.2rem; height: 1.2rem;
  display: grid; place-items: center;
  border-radius: 50%;
  /* Fallback simple */
  background: #e9f5ff;
  border: 1px solid #b8e0ff;
  font-weight: 800;
  color: #0b3a5b; line-height: 1;
}
/* Upgrade si color-mix supporté */
@supports (color: color-mix(in oklab, white, black)){
  .highlight-multidays::before{
    background: color-mix(in oklab, var(--tour-accent) 20%, #fff 80%);
    border: 1px solid color-mix(in oklab, var(--tour-accent) 55%, #fff 45%);
  }
}

/* ---------- Sections du tour ---------- */
.tour-section{ margin: 2rem 0; }
/*.tour-section p{ margin: 0 0 .85rem; }*/
.tour-section p + .tour-highlights-grid{ margin: 40px; }


.tour-section a{
  color: #0b3a5b;
  text-decoration-thickness: 2px;
  text-underline-offset: 2px;
}
.tour-section a:hover{ color: var(--tour-accent); }

/* ---------- En-têtes de journée ---------- */
.tour-day-header{
  display: flex;
  align-items: baseline;
  gap: .75rem;
  flex-wrap: wrap;
}
.tour-day-badge{
  font-size: .85rem;
  font-weight: 700;
  letter-spacing: .02em;
  background: #eef6ff;
  color: #1158c7;
  padding: .35rem .6rem;
  border-radius: 999px;
  border: 1px solid #d7e8ff;
}
.tour-day h3{
  margin: 0;
  line-height: 1.25;
  font-size: 1.35rem;
}

/* ---------- Meta / chips ---------- */
.tour-meta{
  display: flex;
  flex-wrap: wrap;
  gap: .5rem .6rem;
  margin: .6rem 0 var(--space-3);
  padding: 20px;
}
.chip{
  --bd: #cae9ff; /* fallback bordure */
  height: var(--chip-h);
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: 0 .75rem;
  border: 1px solid var(--bd);
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(31,162,255,.12), rgba(31,162,255,.06));
  color: #0b2b45;
  font-weight: 600;
  font-size: .92rem;
  line-height: 1;
  white-space: nowrap;
}
@supports (color: color-mix(in oklab, white, black)){
  .chip{ --bd: color-mix(in oklab, var(--tour-accent) 45%, white 55%); }
}
.chip:has(> ._ico){ padding-left: .6rem; }
.chip[data-kind*="time"]::before{ content: "⏱️"; }
.chip[data-kind*="distance"]::before{ content: "📏"; }
.chip[data-kind*="surface"]::before{ content: "🛣️"; }
.chip[data-kind*="people"]::before{ content: "👥"; }
.chip[data-kind*="sleep"]::before{ content: "🛏️"; }
@media (max-width: 600px){
  .chip{ font-size: .88rem; height: 32px; }
}

/* ---------- Texte du contenu ---------- */
.tour-content p{
  margin: .6rem 0;
  color: #2b2f36;
}

/* ---------- Encarts info ---------- */
.info-note{
  position: relative;
  /* Fallbacks */
  background: #fff;
  border: 1px dashed #b8e0ff;
  color: var(--tour-ink-soft);
  /* Upgrades si support */
  background: linear-gradient(180deg, #f3fbff, #fff);
  border-radius: var(--radius-md);
  padding: .85rem 1rem .9rem 3.25rem;
  box-shadow: 0 4px 16px rgba(0,0,0,.05);
  font-size: .96rem;
  margin: .4rem 0 var(--space-4);


  display: block;          /* garantit le comportement block */
  margin-left: auto;       /* pousse l'élément à droite */
  margin-right: 20px;
  width: fit-content;      /* s'ajuste au contenu */
  max-width: 100%;         /* évite tout débordement */
}
@supports (color: color-mix(in oklab, white, black)){
  .info-note{
    --note-bg: color-mix(in oklab, var(--tour-accent) 10%, #fff 90%);
    background: linear-gradient(180deg, var(--note-bg), #fff);
    border: 1px dashed color-mix(in oklab, var(--tour-accent) 55%, #fff 45%);
  }
}
.info-note::before{
  content: "ℹ️";
  position: absolute;
  left: .9rem; top: .8rem;
  width: 1.6rem; height: 1.6rem;
  display: grid; place-items: center;
  filter: saturate(1.2);
}
.info-note .distance-tag{
  font-weight: 700;
  color: #0b3a5b;
}

/* ---------- Grilles & responsive manquantes ---------- */

/*@media (min-width: 920px){
  .tour-highlights,
  .tour-highlights-grid{ grid-template-columns: 1fr 1fr; }
}*/

/* Mise en colonnes pour une journée + aside */
.tour-day{ display: block; }
@media (min-width: 640px){
  .tour-day{
    display: grid;
    grid-template-columns: 1.15fr .85fr;
    align-items: start;
    gap: 1rem;
  }
  .tour-aside{
    padding-left: 1rem;
    border-left: 1px dashed #e8edf3;
  }
}

/* ---------- Impression ---------- */
@media print{
  .days, .highlight-multidays, .info-note{
    box-shadow: none !important;
    background: #fff !important;
  }
  .chip{ background: none !important; }
}