/**************************************************/
/* STRUCTURE DU SITE                */
/* */
/* 00 - Global & Général (Header, Footer, Boutons)*/
/* 01 - Accueil (Home)                            */
/* 02 - Massages (Pages de détail)                */
/* 03 - Tarifs                                    */
/* 04 - Reservation                               */
/* 05 - Cartes Cadeaux / Forfaits                 */
/* 06 - FAQ                                       */
/* 07 - Conseils Bien-Etre                        */
/* 08 - Contact                                   */
/* 09 - Remerciement                              */
/* 10 - Divers                                    */
/* */
/**************************************************/


/*========================================*/
/* 00 - GLOBAL & GÉNÉRAL
/* (Styles appliqués partout : Header, Footer, Boutons)
/*========================================*/


/* --- Header/Navigation --- */
.site-title {
    padding: 0 0 10px 0;
}

.site-header.header-style-2 .site-branding img {
    max-height: 41px;
}

.header-style-3 .pbmit-logo-menuarea, 
.header-style-3 .pbmit-right-box{
    flex: none;
}

.main-menu .navigation > li {
    margin: 0 28px;
}
@media (min-width: 1201px){
    .site-navigation ul.navigation > li > a:hover{
        color: #81bacd !important;

    }
    .main-menu ul > li.dropdown > a:after{
        background-color: #90b67b !important;
    }
    .site-navigation ul.navigation > li.active > a{
        color: #90b67b !important;
    }
    .site-navigation ul.navigation > li.active > a:hover{
        color: #81bacd !important;
    }
}

.site-navigation ul.navigation > li > a {
    font-size: 16px;
}

/* 1. FORCER L'AGRANDISSEMENT DU CONTENEUR PARENT */
/* Cela oblige la zone Logo+Menu à prendre toute la place libre au milieu */
.pbmit-header-content .pbmit-logo-menuarea {
    flex-grow: 1; 
    justify-content: flex-start !important; /* Annule le 'between' pour qu'on puisse gérer le centrage nous-mêmes */
}

/* 2. CENTRER LE BLOC DE NAVIGATION */
/* La marge auto dans une boîte flex pousse l'élément au centre */
.site-navigation {
    margin: 0 auto; /* Pousse à gauche et à droite pour se centrer */
    display: flex;
    justify-content: center;
    width: auto; /* Laisse la largeur s'adapter au contenu */
}

/* 3. NETTOYAGE DU DECALAGE (Votre code initial) */
ul.navigation.clearfix {
    margin: 0 !important; /* Supprime le décalage de 70px */
    padding-top: 5px;
    /*display: flex;*/
    justify-content: center;
}







/*========================================*/
/* INDICATEUR MENU DÉROULANT (FLÈCHE)
/*========================================*/

/* 1. VERSION BUREAU (PC) : On ajoute notre flèche personnalisée */
@media (min-width: 1201px) {
    /* Suppression des indicateurs par défaut sur tous les onglets */
    .main-menu .navigation > li.dropdown > a::after {
        content: none !important;
        display: none !important;
    }

    /* Ajout de la flèche UNIQUEMENT sur Réservation */
    .main-menu .navigation > li.dropdown > a[href*="Reservation"]::after {
        content: "\f107" !important; /* Flèche bas (FontAwesome) */
        font-family: "Font Awesome 5 Free" !important;
        font-weight: 900 !important;
        display: inline-block !important;
        margin-left: 8px !important;
        font-size: 14px !important;
        color: #90b67b !important; /* Vert */
        
        position: static !important; 
        width: auto !important;
        height: auto !important;
        background-color: transparent !important;
        border-radius: 0 !important;
        transform: none !important;
    }

    /* Couleur au survol */
    .main-menu .navigation > li.dropdown:hover > a[href*="Reservation"]::after {
        color: #81bacd !important; /* Bleu */
    }
    
    .main-menu .navigation > li.dropdown > a[href*="Reservation"] {
        display: flex !important;
        align-items: center !important;
        flex-wrap: nowrap !important;
    }

    .main-menu .navigation > li.dropdown > a[href*="service-details-africain"]::after {
        content: "\f107" !important; /* Flèche bas (FontAwesome) */
        font-family: "Font Awesome 5 Free" !important;
        font-weight: 900 !important;
        display: inline-block !important;
        margin-left: 8px !important;
        font-size: 14px !important;
        color: #90b67b !important; /* Vert */
        
        position: static !important; 
        width: auto !important;
        height: auto !important;
        background-color: transparent !important;
        border-radius: 0 !important;
        transform: none !important;
    }

    /* Couleur au survol */
    .main-menu .navigation > li.dropdown:hover > a[href*="service-details-africain"]::after {
        color: #81bacd !important; /* Bleu */
    }
    
    .main-menu .navigation > li.dropdown > a[href*="service-details-africain"] {
        display: flex !important;
        align-items: center !important;
        flex-wrap: nowrap !important;
    }
}

/* 2. VERSION MOBILE : Gestion des flèches noires du thème (.righticon) */
@media (max-width: 1200px) {
    
    /* 1. On cache tout par défaut */
    .site-header .righticon {
        display: none !important;
    }

    /* 2. On ré-affiche pour les pages internes (HOME2) */
    /* Massages est en 2ème, Réservation est en 4ème */
    body.home2 .main-menu .navigation > li:nth-child(2) .righticon,
    body.home2 .main-menu .navigation > li:nth-child(4) .righticon {
        display: block !important;
        color: #90b67b !important;
        top: 12px !important;
    }

    /* 3. On ré-affiche pour l'index (HOME) */
    /* Massages est en 1er, Réservation est en 3ème */
    body.home .main-menu .navigation > li:nth-child(1) .righticon,
    body.home .main-menu .navigation > li:nth-child(3) .righticon {
        display: block !important;
        color: #90b67b !important;
        top: 12px !important;
    }
    
    /* On cache tes anciennes flèches personnalisées (doublons) */
    .main-menu .navigation > li.dropdown > a[href*="Reservation"]::after,
    .main-menu .navigation > li.dropdown > a[href*="service-details"]::after {
        display: none !important;
    }
}








.pbmit-slider-one, .swiper-container {
    overflow: hidden !important;
}

.site-header .pbmit-header-button a {
    display: inline-block;
    padding-left: 70px;
    position: relative;
    padding-right: 35px;
}

/* --- Boutons/Éléments interactifs --- */

.pbmit-btn {
    background-color: #90b67b;
    font-size: 17px;
}

.pbmit-btn:hover {
    background-color: #81bacd;
    color: white;
}

a.pbmit-btn.pbmit-btn-hover-white.centrage {
    display: block; /* Transforme le lien en un élément de bloc */
    margin: 0 auto; /* Centre horizontalement */
    width: fit-content; /* Permet à l'élément de s'ajuster à la largeur de son contenu */
}


.pbmit-testimonial-style-2 .pbminfotech-box-img:before {
    font-family: "pbminfotech-base-icons";
    content: "\e839";
    position: absolute;
    left: auto;
    right: -20px;
    top: 35px;
    background-color: var(--pbmit-global-color);
    color: #ffffff;
    border-radius: 50%;
    text-align: center;
    font-size: 20px;
    height: 50px;
    width: 50px;
    line-height: 50px;
}

.site-header .pbmit-button-box .pbmit-header-button a:hover::before {
    color: var(--pbmit-white-color);
    background-color: #81bacd;
}

.site-header .pbmit-button-box .pbmit-header-button a::before {
    background-color: #fbfaf9;
}


/* --- Footer --- */
.widget.widget_text.footcil {
    padding-top: 37px;
}

.site-footer .pbmit-footer-widget-col-2  .pbmit-footer-desc {
    padding: 27px 100px 10px;
    font-size: 17px;
}


.blog-details.debut .pbmit-entry-content blockquote {
    /*padding: 40px 40px 40px 120px;*/
    font-size: 22px;
    line-height: 32px;
    margin: 30px 0;
    position: relative;
    letter-spacing: 0;
    border-radius: 30px;
    color: var(--pbmit-blackish-color);
    background-color: transparent;
    border: 1px solid rgba(var(--pbmit-blackish-color-rgb), 0.1);
    font-weight: 500 !important;
    font-family: var(--pbmit-heading-typography-font-family);
}


.blog-details .pbmit-entry-content blockquote p{
    margin-bottom: 0;
    font-size: 23px;
}

.site-content.service-details .pbmit-entry-content p {
    text-align: justify;
}

/* Bouton remontée ecran */
.pbmit-progress-wrap svg.pbmit-progress-circle path {
    stroke: #759564;
}

.pbmit-progress-wrap svg path {
    fill: #90b67b;
}

.pbmit-progress-wrap:hover svg path {
    fill: #81bacd;
}

.pbmit-progress-wrap:hover svg.pbmit-progress-circle path {
    stroke: #567c89;
}

.pbmit-footer-menu .menu-item a:focus, .pbmit-footer-menu .menu-item a:hover {
    color: #81bacd;
    text-decoration: underline !important;
}

.site-footer {
    font-size: 17px;
}

.site-footer .pbmit-timelist-list li .pbmit-timelist-li-title {
    font-size: 17px;
}

.site-footer .widget_text {
    font-size: 17px;
    line-height: 30px;
}

.site-footer .pbmit-timelist-wrapper .pbmit-timelist-list li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 0px 15px 0px;
    line-height: 27px;
}

.site-footer .pbmit-social-links li.pbmit-social-li a:hover {
    background-color: #90b67b;
    color: var(--pbmit-white-color);
}

.pbmit-footer-text-inner {
    font-size: 16px;
}

.site-footer {
    background-image: url(../images/commun/footer-bg2.png);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;
    background-attachment: scroll;
    padding: 35px 0 30px;
    font-size: 15px;
    position: relative;
    /*background-color: var(--pbmit-secondary-color);*/
    background-color: #eff5f7;
    color: var(--pbmit-blackish-color);
}

.site-footer .widget ul a:hover{
    color: #81bacd;
}

.site-footer .pbmit-footer-widget-col-1 .textwidget ul {
    display: flex;
    flex-wrap: wrap;
    font-size: 17px;
}

@media(max-width: 1200px) {
    .site-header .righticon {
        display: block;
        position: absolute;
        right: 25px;
        top: 8px !important;
        cursor: pointer;
        color: rgba(0, 0, 0, 0.80);
    }

    .site-header .righticon i {
        font-size: 23px !important;
    }

}

.main-menu .navigation > li > ul a {
    position: relative;
    display: table-cell;
    font-weight: 600;
    font-size: 17px;
    line-height: 24px;
    letter-spacing: 0px;
    text-transform: capitalize;
    font-style: normal;
    color: var(--pbmit-blackish-color);
    font-family: var(--pbmit-body-typography-font-family);
}


.pbmit-ihbox-style-7 .pbmit-ihbox-icon-wrapper, .pbmit-ihbox-style-7 .pbmit-ihbox-svg {
    background-color: #b1deed;
    border-radius: 50%;
    height: 70px;
    width: 70px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.pbmit-ihbox-style-7 .pbmit-icon-type-icon {
    color: #ffffff;
}


/*========================================*/
/* 01 - ACCUEIL (Home)
/*========================================*/

/* Masquer le H1 */
.container .site-main-h1 {
    position: absolute; 
    width: 1px; 
    height: 1px; 
    margin: -1px; 
    padding: 0; 
    overflow: hidden; 
    clip: rect(0, 0, 0, 0); 
    border: 0;
}

/* Section "Nos services" (Ihbox) */
.pbmit-ihbox-style-7 .pbmit-ihbox-box {
    padding: 30px 40px 25px;
    text-align: center;
    font-size: 18px;
}

.pbmit-ihbox-style-7 .pbmit-ihbox-box.modif {
    padding-bottom: 45px;
}

.pbmit-ihbox-style-7 .pbmit-element-title {
    font-size: 24px;
}

.pbmit-ihbox-style-7:hover .pbmit-ihbox-icon-wrapper, .pbmit-ihbox-style-7:hover .pbmit-ihbox-svg {
    background-color: #90b67d;
}

/* Section Ecrite start */
.pbmit-entry-content p.percut {
    font-size: 24px;
    text-align: center;
}

.pbmit-entry-content h3.mb-3.acentrer {
    text-align: center;
    margin-bottom: 2rem !important;
}

h3.pbmit-title.acentrer {
    text-align: center;
    font-size: 36px;
    color: #ffffff;
    text-shadow: 1px 1px 3px #000000;
    margin: 30px 0;
}

.pbmit-ihbox-style-7 .pbmit-content-wrapper:hover {
    border-top: 1px solid #90b67d;
}

/* --- Texte Accueil Présentation --- */

.pbmit-entry-content p.pbmit-firstletteraccueil::first-letter{
    color: #90b67b;
    padding:0;
    font-size: 52px;
    line-height: 48px;
    display: inline-block;
    font-weight: 700;
}

.pbmit-entry-content p {
    margin: 0 0 30px;
    text-align: center;
    font-size: 17px;
}

/* ------------------- STYLES DU SLOGAN ------------------- */

/* Bloc de Slogan (simule max-w-4xl mx-auto py-12 px-6 sm:px-10 text-center) */
.slogan-block {
    max-width: 900px; /* max-w-4xl */
    margin-left: auto;
    margin-right: auto;
    padding: 30px 24px; /* py-12 px-6 */
    text-align: center;
    width: 100%;
}

@media (min-width: 640px) {
    .slogan-block {
        padding-left: 40px; /* sm:px-10 */
        padding-right: 40px; /* sm:px-10 */
    }
}

/* Séparateur (simule w-16 h-1 bg-accent-dark mx-auto mb-6 rounded-full opacity-75) */
.separator {
    width: 64px; /* w-16 */
    height: 4px; /* h-1 */
    background-color: #4495b1;
    margin: 0 auto 24px; /* mx-auto mb-6 */
    border-radius: 9999px; /* rounded-full */
    opacity: 0.75;
}

/* Séparateur inférieur */
.slogan-block > .separator:last-of-type {
    margin-top: 24px; /* mt-6 */
    margin-bottom: 0;
}

/* Titre du Slogan (simule text-3xl sm:text-4xl md:text-5xl font-light text-gray-900 tracking-wider leading-snug) */
.slogan-heading {
    font-size: 30px; /* text-3xl */
    font-weight: 300; /* font-light */
    color: #111827;
    letter-spacing: 0.05em; /* tracking-wider */
    line-height: 1.375; /* leading-snug */
}

@media (min-width: 640px) {
    .slogan-heading {
        font-size: 36px; /* sm:text-4xl */
    }
}

@media (min-width: 768px) {
    .slogan-heading {
        font-size: 48px; /* md:text-5xl */
    }
}

/* Première ligne (simule block tracking-widest uppercase) */
.slogan-line-1 {
    display: block;
    letter-spacing: 0.1em; /* tracking-widest */
    text-transform: uppercase;
}

/* Deuxième ligne (simule block mt-2 font-extrabold text-accent-dark) */
.slogan-line-2 {
    display: block;
    margin-top: 8px; /* mt-2 */
    font-weight: 900; /* font-extrabold */
    color: #6fc0db;
}

/* Sous-titre (simule mt-8 text-xl text-gray-600 font-medium italic) */
.pbmit-entry-content p.slogan-subtitle {
    margin-top: 32px; /* mt-8 */
    font-size: 20px; /* text-xl */
    color: #4b5563;
    font-weight: 500; /* font-medium */
    font-style: italic;
}
/* Sous-titre slogan */
.pbmit-entry-content p.slogan-subtitle {
    text-align: center;
    margin: revert;
}


/* Section Cartes Statiques (Couleurs des titres de massage) */
.pbmit-static-box-style-1 .pbmit-staticbox-title h4 {
 text-align: center;
 padding: 50px 0 20px;
}

.pbmit-static-box-style-1 .pbmit-icon-wrapper {
    background-color: #90b67b;
}

.pbmit-staticbox-title span.fusion {
    color: #efbc74;
}

.pbmit-staticbox-title span.esprit {
    color: #b784b3;
}

.pbmit-staticbox-title span.sahel {
    color: #CC5500;
}

.pbmit-staticbox-title span.vague {
    color: #FDDA06;
}

.pbmit-staticbox-title span.evasion {
    color: #A5F2F3;
}

.pbmit-staticbox-title span.onde {
    color: #00A86B;
}

.pbmit-staticbox-title span.profonde {
    color: #2A4B7C;
}

.swiper-slide a.static-box-link {
    font-family: var(--pbmit-body-typography-font-family);
    color: #666666;
    font-size: 17px;
    /* --- AJOUTER LA TRANSITION ICI --- */
    transition: color 0.2s ease-in-out, font-weight 0.2s ease-in-out;
    /* OU plus simplement : */
    /* transition: all 0.2s ease-in-out; */
}

.swiper-slide a.static-box-link:hover {
    color: #484848;
    font-weight: 800;
}

/* Section Cartes Statiques (Titre) */
.static-box-wrap .pbmit-heading-subheading {
    margin: 80px 0 50px 0;
    text-align: center;
}

.static-box-wrap .pbmit-heading-subheading .pbmit-title {
    font-size: 36px;
    text-shadow: 1px 1px 3px #000000;
}

.blog-wrap .pbmit-heading-subheading .pbmit-title {
    font-size: 42px;
}


.pbmit-btn-white.reser {
    padding: 20px 100px;
    border-radius: 50px;
    color: var(--pbmit-white-color);
    background-color: #90b67b;
    font-size: 17px;
    margin-bottom: 20px;
}

.pbmit-btn-white.reser svg line {
    stroke: var(--pbmit-white-color);
}

.pbmit-btn-white.reser:hover {
    background-color: #81bacd;
}

@media(max-width:1024px) {
.pbmit-btn-white.reser, .pbmit-slider-area .pbmit-button .pbmit-btn {
    padding: 14px 24px !important;
    font-size: 15px !important;
    line-height: 18px !important;
    margin: 10px 0;
}
}

@media(max-width:1280px) {
.pbmit-slider-area .pbmit-button .pbmit-btn, .pbmit-slider-area .pbmit-button .pbmit-btn {
    padding: 14px 30px !important;
    font-size: 14px !important;
    line-height: 22px !important;
    margin: 10px 0;
}
}



/* Témoignages Ornements */
.testimonial-three-bg {
    padding: 40px 20px 40px 20px;
    /*background-image: url(../images/homepage-3/massages/bandeau/testimonial-bgmod3.png);*/
    background-image: none;
    background-color: #a9d591;
    margin-bottom: 100px;
}



/*========================================*/
/* POSITIONNEMENT ORNEMENT BOTANICAL UNIQUE
/*========================================*/

/* Conteneur parent */
.site-content.blog-details.debut {
    margin: 20px auto 70px;
    position: relative;
    overflow: visible;
    padding-top: 60px;
    padding-bottom: 60px;
    /* On augmente les marges internes pour que le texte ne chevauche pas l'ornement */
    padding-left: 80px;
    padding-right: 80px;
    z-index: 1;
}

/* Utilisation d'un seul élément pour l'image contenant les deux côtés */
.site-content.blog-details.debut::before {
    content: "";
    position: absolute;
    top: 75%;
    left: 50%;
    transform: translate(-50%, -50%); /* Centrage absolu horizontal et vertical */
    
    /* On augmente la largeur pour que les bords soient bien visibles sur les côtés */
    width: calc(100% + 300px); 
    height: 150%; /* Hauteur légèrement supérieure pour le confort visuel */
    
    background-image: url(../images/commun/botanical.png); 
    background-size: contain; /* L'image s'adapte sans être rognée */
    background-position: center center; /* Centrage parfait du motif */
    background-repeat: no-repeat;
    
    z-index: -1 !important; /* Reste derrière le texte */
    pointer-events: none;
    opacity: 0.8 !important; /* Ajustement de l'opacité pour que l'ornement soit bien présent */
}

/* Ajustement pour les écrans de taille moyenne (Tablettes) */
@media (max-width: 1400px) {
    .site-content.blog-details.debut::before {
        width: calc(100% + 100px);
    }
}

@media (max-width: 1200px) {
    .site-content.blog-details.debut {
        padding-left: 40px;
        padding-right: 40px;
    }
    .site-content.blog-details.debut::before {
        width: 100%;
        opacity: 0.2; /* On réduit l'opacité pour ne pas gêner la lecture quand l'espace manque */
    }
}

/* Masquage sur mobile pour garantir une lecture fluide */
@media (max-width: 767px) {
    .site-content.blog-details.debut::before {
        display: none;
    }
    .site-content.blog-details.debut {
        padding-left: 15px;
        padding-right: 15px;
    }
}


.pbmit-testimonial-style-2 .pbminfotech-testimonial-text {
    font-size: 22px;
    text-align: center;
    background-color: #ffffff;
    border-radius: 90px;
}

.pbmit-testimonial-style-2 .pbminfotech-box-img {
    position: relative;
    display: inline-block;
}

.pbmit-testimonial-style-2 .pbminfotech-post-item {
    text-align: start;
}

.pbmit-testimonial-style-2 .pbminfotech-box-star-ratings {
    text-align: center;
}

.pbmit-testimonial-style-2 .pbminfotech-box-star-ratings {
    font-size: 16px;
    line-height: 16px;
    padding: 20px 0 15px 0;
    color: rgba(var(--pbmit-blackish-color-rgb), 0.2);
}

.pbmit-testimonial-style-2 .pbminfotech-box-title {
    text-align: center;
    color: #ffffff;
    text-shadow: 1px 1px 4px #000000;
    font-size: 24px;
}

.pbmit-testimonial-style-2 .pbminfotech-testimonial-text p {
    padding: 0 40px;
}

.pbmit-testimonial-style-2 .pbminfotech-box-star-ratings .pbmit-active {
    color: #fdcf00;
}

/* Bouton testimonials */
.swiper-button-next {
    background-color: #90b67b;
}

.swiper-button-next:hover {
    background-color: #81bacd;
}

.swiper-button-next, .swiper-button-prev{
   background-color: #ffffff;
}

.swiper-button-next:hover, .swiper-button-prev:hover{
   background-color: #81bacd;
}

.swiper-button-next:after, .swiper-button-prev:after {
    content: "\e814";
    font-family: "pbminfotech-base-icons";
    font-size: 25px;
    line-height: normal;
    color: #81bacd;
}

.swiper-button-prev:hover:after, .swiper-button-next:hover:after {
    color: #ffffff;
}

/* Quote testimonials */
.pbmit-testimonial-style-2 .pbminfotech-box-img:before {
    background-color: #6fc0db;
}

.blog-details .pbmit-entry-content blockquote:before {
    background: #90b67b;
}

.blog-details .pbmit-entry-content blockquote cite {
    color: #90b67b;
}

/*.blog-details .pbmit-entry-content .bi.bi-chat-quote-fill {
    
    position: absolute !important;
    left: 20px !important;  
    right: auto !important; 
}*/


blockquote p .bi-chat-quote-fill.filin {
    float: left;
    position: relative; 
    margin-top: -30px; 
    margin-left: -30px;
    margin-right: 15px;  
    margin-bottom: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    background: #90b67b; 
    color: var(--pbmit-white-color);
    border-radius: 50%;
    font-size: 25px;
    line-height: 1;
    transform: scaleX(-1);
    z-index: 10;
}

blockquote p {
    display: block !important;
    overflow: visible !important;
    text-align: left !important;
}


.pbminfote-testimonial-box-desc:after {
    content: "";
    display: table;
    clear: both;
}


.pbmit-slider-content .pbmit-btn-white {
    color: #ffffff;
}

.pbmit-slider-content .pbmit-btn-white svg line {
    stroke: #ffffff;
}

/* Autre élément d'accueil (Ihbox 3 colonnes) */
section.service-section-three.pbmit-element-service-style-3 {
    padding-top: 100px;
}

.pbmit-ihbox-box.d-flex.align-items-center {
    /*justify-content: center;*/
    padding: 3% 0 3% 0;
}

.ihbox-three-bg.pbmit-bg-color-secondary img {
    max-width: 60%;
    max-height: 100%;
}

article.pbmit-ele.pbmit-service-style-3.swiper-slide {
    margin-bottom: 3%;
}

.pbmit-element-column-three .pbmit-service-style-3 h4.pbmit-service-title {
    font-size: 17px;
    line-height: 24px;
    text-align: center;
    font-weight: 400;
}

/* Bloc de prévisualisation des tarifs (sur l'accueil) */
.pbmit-ihbox-style-4 .pbmit-element-title {
    font-size: 20px;
}

.pbmit-ihbox-style-4 .pbmit-element-title .euros {
    font-size: 35px;
}

.pbmit-ihbox-style-4 .pbmit-ihbox-headingicon {
    display: block; 
}

.blog-section-one.two .pbminfotech-feature-wrapper .pbmit-meta-category {
    display: none;
}

.section-md {
    padding-top: 110px;
    padding-bottom: 110px;
}

.page-wrapper .static-box-section-one {
    background-color: #a9d591;
}

.page-wrapper .static-box-wrap {
    padding-bottom: 100px;
}

@media (max-width: 1366px){
    .static-box-section-one .static-box-wrap {
        padding-bottom: 100px !important;
    }
}
.pbmit-static-box-style-1 .pbmit-title-img-wrapper {
    background-color: #ffffff;
    border-radius: 30px;
    position: relative;
    overflow: hidden;
}

.pbmit-heading-subheading .pbmit-title {
    font-family: var(--pbmit-heading-typography-font-family);
    font-weight: 600;
    font-size: 40px;
    line-height: 65px;
    letter-spacing: 0px;
    color: #ffffff;
    text-transform: none;
    font-style: normal;
    margin-bottom: 0;
}

/* Style de l'image Macaron */
.medoucine-logo {
  max-width: 17%; /* Vous pouvez ajuster la taille ici */
  height: auto;
  margin-bottom: 20px;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

/* Style spécifique pour l'image dans ce contexte Flexbox */
.booking-container.d-flex .medoucine-logo {
    max-width: 17%; /* Taille de l'image (ajustable) */
    height: auto; /* Garder les proportions */
    flex-shrink: 0; /* Empêche l'image de rétrécir si le texte est long */
    margin-bottom: 0; /* Enlève la marge du bas par défaut des images si nécessaire */
}

/* --- Adaptabilité Mobile (Responsive) --- */
@media (max-width: 767px) {
    /* Sur mobile, on repasse en colonne (image au-dessus du texte) */
    .booking-container.d-flex {
        flex-direction: column; 
        text-align: center; /* Centre tout le contenu */
        padding: 20px;
    }

    /* Ajustements pour l'image sur mobile */
    .booking-container.d-flex .medoucine-logo {
        margin: 0 !important; /* Enlève la marge de droite */
        margin-bottom: 20px; /* Ajoute de l'espace sous l'image */
        min-width: 150px; /* On peut réduire un peu la taille sur mobile */
    }

    /* Centre le texte sur mobile */
    .booking-container.d-flex .booking-text-content {
        text-align: center;
        margin-top: 30px;
    }
}


.pbmit-social-li svg {
    fill: var(--pbmit-blackish-color);
    transition: all 0.3s ease;
    display: inline-block;
    vertical-align: middle;
}

.pbmit-social-links li.pbmit-social-li a:hover {
    background-color: transparent !important; 
    border-color: transparent !important;      
}

.pbmit-social-li a:hover svg {
    fill: #90b67b !important; 
}


/*========================================*/
/* 02 - MASSAGES (Pages de détail)
/* (Styles spécifiques aux pages de massage et à la navigation latérale)
/*========================================*/

/* --- Photos présentation des pages de massage --- */

.pbmit-title-bar-wrapper-frifri {
    background-image: url(../images/massages/bandeau/A73A1497.jpg);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    background-attachment: scroll;
    position: relative;
    z-index: 2;
}

.pbmit-title-bar-wrapper-dip {
    background-image: url(../images/massages/bandeau/A73A1563.jpg);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    background-attachment: scroll;
    position: relative;
    z-index: 2;
}

.pbmit-title-bar-wrapper-cracra {
    background-image: url(../images/massages/bandeau/73A2138-2.jpg);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    background-attachment: scroll;
    position: relative;
    z-index: 2;
}

.pbmit-title-bar-wrapper-sued {
    background-image: url(../images/massages/bandeau/23696.jpg);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    background-attachment: scroll;
    position: relative;
    z-index: 2;
}

.pbmit-title-bar-wrapper-loom {
    background-image: url(../images/massages/bandeau/73A2203-2.jpg);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    background-attachment: scroll;
    position: relative;
    z-index: 2;
}

.pbmit-title-bar-wrapper-decoucou {
    background-image: url(../images/massages/bandeau/7192.jpg);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    background-attachment: scroll;
    position: relative;
    z-index: 2;
}

.pbmit-title-bar-wrapper-rilax {
    background-image: url(../images/massages/bandeau/73A2599.JPG);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    background-attachment: scroll;
    position: relative;
    z-index: 2;
}


/* --- Style texte présentation --- */

.pbmit-tbar-subtitle-phrase {
    font-weight: normal;
    font-size: 22px;
    line-height: 24px;
    letter-spacing: 0.3px;
    font-style: normal;
    margin: 35px 0 20px 0;
    color: var(--pbmit-white-color);
    font-family: var(--pbmit-body-typography-font-family);
    text-shadow: 2px 2px 4px #000000; /* Ombre noire : décalage x, décalage y, flou, couleur */

    /* Le fond semi-transparent pour assombrir juste derrière le texte *
    background-color: rgba(0, 0, 0, 0.6); /* Noir avec 60% d'opacité *

    * Ajouter un peu d'espace autour du texte (padding) pour que le fond se voie *
    padding: 5px 10px; 
    
    * Optionnel: Arrondir légèrement les coins du fond *
    border-radius: 3px;

    * 🔑 La clé : Ne prend que la largeur du contenu tout en conservant les propriétés de bloc *
    display: inline-block;*/
}

.pbmit-tbar-subtitle-phrase .grassaf {
    color: #CC5500;
}

.pbmit-tbar-subtitle-phrase .grasslom {
    color: #FDDA06;
}

.pbmit-tbar-subtitle-phrase .grasscran {
    color: #b784b3;
}

.pbmit-tbar-subtitle-phrase .grasslax {
    color: #00A86B;
}

.pbmit-tbar-subtitle-phrase .grassdeep {
    color: #2A4B7C;
}

.pbmit-tbar-subtitle-phrase .grassion {
    color: #efbc74;
}

.pbmit-tbar-subtitle-phrase .grassdois {
    color: #A5F2F3;
}

.pbmit-breadcrumb .pbmit-breadcrumb-inner span {
    display: inline-block;
    font-size: 17px;
}

/* Styles pour le conteneur vidéo responsive (ratio 1000x615 = 61.5%) */
.video-responsive-container {
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 61.5%; /* Calculé sur la base de 615 / 1000 */
    border-radius: 10px;
    overflow: hidden;
}

/* Style de l'iframe pour remplir le conteneur de ratio */
.video-responsive-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
}


/* --- Styles du contenu des pages de massage --- */

.pbmit-service-ads .pbmit-btn {
    color: #90b67b;
    background-color: revert;
    font-weight: 800;
    font-size: 35px;
}

.pbmit-service-ads .pbmit-btn:hover{
    font-size: xx-large;
    color: white;
}


.pbmit-entry-content p.mt-3.gros {
    font-size: 17px;
}

.pbmit-service_content p.marge {
    margin-bottom: 70px;
}

.pbmit-service_content .pt-4.pb-5.marging {
    margin-bottom: 70px;
}

.service-details .accordion-item .pbmit-accordion-icon {
    max-width: 50px;
    width: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 50px;
    font-size: 14px;
    background: var(--pbmit-white-color);
    border-radius: 50%;
    position: absolute;
    color: #81bacd;
    order: 2;
    top: 50%;
    transform: translate(0, -50%);
    right: 5px;
    left: auto;
}


/* Sidebar de navigation des massages */

.sidebar .widget .widget-title:before {
    color: #90b67b;
}

.site-content.service-details .sidebar .widget .widget-title {
    text-align: center;
    font-size: 23px;
}

/* --- Styles des tableaux comparatifs (dans le contenu) --- */
.pbmit-service_content .table-responsive {
    border-radius: 0.5rem;
    overflow: hidden;
    box-shadow: 0 1rem 1rem rgba(0, 0, 0, 0.08);
    background-color: #ffffff;
}
.pbmit-service_content .table thead {
    background-color: #f7f0e4;
    color: #2e2e2e;
}
.pbmit-service_content .table thead th {
    font-weight: 600;
    color: #2e2e2e;
    font-size: 17px;
}
.pbmit-service_content .table tbody tr:hover {
    background-color: #fcf4f2;
}

.pbmit-service_content .massage-link {
    font-size: 17px;
}

/* Icônes des listes (Avantages) */
.list-group .pbmit-icon-list-icon i.frica {
    width: 1.25em;
    color: #CC5500;
    font-size: 24px;
    transition: color 0.3s;
}

.list-group .pbmit-icon-list-icon i.crani {
    width: 1.25em;
    color: #b784b3;
    font-size: 24px;
    transition: color 0.3s;
}

.list-group .pbmit-icon-list-icon i.lomilom {
    width: 1.25em;
    color: #FDDA06;
    font-size: 24px;
    transition: color 0.3s;
}

.list-group .pbmit-icon-list-icon i.rerelax {
    width: 1.25em;
    color: #00A86B;
    font-size: 24px;
    transition: color 0.3s;
}

.list-group .pbmit-icon-list-icon i.dedeep {
    width: 1.25em;
    color: #2A4B7C;
    font-size: 24px;
    transition: color 0.3s;
}

.list-group .pbmit-icon-list-icon i.fufusion {
    width: 1.25em;
    color: #efbc74;
    font-size: 24px;
    transition: color 0.3s;
}

.list-group .pbmit-icon-list-icon i.susued {
    width: 1.25em;
    color: #A5F2F3;
    font-size: 24px;
    transition: color 0.3s;
}

/* Couleurs des étoiles (Notation) */
.pbmit-service_content .fa-star {
    color: #e2a9a3; /* Couleur rose des étoiles par défaut */
}
.pbmit-service_content .fa-star.africain, .pbmit-service_content .fa-star-half-alt.africain {
    color: #CC5500; 
}
.pbmit-service_content .fa-star.lomi, .pbmit-service_content .fa-star-half-alt.lomi {
    color: #FDDA06; 
}
.pbmit-service_content .fa-star.cranio, .pbmit-service_content .fa-star-half-alt.cranio {
    color: #b784b3; 
}
.pbmit-service_content .fa-star.coreenne, .pbmit-service_content .fa-star-half-alt.coreenne {
    color: #00A86B; 
}
.pbmit-service_content .fa-star.deep, .pbmit-service_content .fa-star-half-alt.deep {
    color: #2A4B7C;
}
.pbmit-service_content .fa-star.suedois, .pbmit-service_content .fa-star-half-alt.suedois {
    color: #A5F2F3;
}
.pbmit-service_content .fa-star.decouverte, .pbmit-service_content .fa-star-half-alt.decouverte {
    color: #efbc74;
}
.pbmit-service_content .table.table-striped.table-hover.table-bordered.align-middle .text-center.fw-bold.fs-5 {
    color: #efbc74;
}

.table-striped>tbody>tr:nth-of-type(odd)>* {
    --bs-table-accent-bg: rgb(185 160 112 / 5%);
    color: var(--bs-table-striped-color);
}

/* --- LOGIQUE RESPONSIVE (TRANSFORMATION EN CARTES) --- */
@media screen and (max-width: 768px) {
    /* On cache l'en-tête du tableau car on va utiliser data-label */
    .site-content.service-details .table thead {
        display: none;
    }

    /* On force chaque élément à se comporter comme un bloc vertical */
    .site-content.service-details .table, .site-content.service-details .table tbody, .site-content.service-details .table tr, .site-content.service-details .table td, .site-content.service-details .table th {
        display: block;
        width: 100%;
    }

    /* Chaque ligne devient une "carte" séparée */
    .site-content.service-details .table tr {
        margin-bottom: 1.5rem;
        border: 1px solid #eee;
        border-radius: 0.5rem;
        box-shadow: 0 2px 5px rgba(0,0,0,0.05);
        overflow: hidden;
    }

    /* Le titre du massage (th) devient le bandeau de la carte */
    .site-content.service-details .table tbody th {
        background-color: #f6f3ed;
        text-align: center;
        padding: 12px;
        border-bottom: 2px solid #90b67b;
        font-size: 1.1rem;
    }

    /* Les cellules de données s'affichent en ligne avec le label à gauche */
    .site-content.service-details .table td {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 10px 15px;
        text-align: right;
        border-bottom: 1px solid #f9f9f9;
    }

    /* On affiche le contenu du data-label avant la valeur */
    .site-content.service-details .table td::before {
        content: attr(data-label);
        font-weight: 700;
        text-transform: uppercase;
        font-size: 0.75rem;
        color: #888;
        flex: 1;
        text-align: left;
    }

    /* Ajustement des étoiles sur mobile pour qu'elles restent groupées à droite */
    .site-content.service-details .table td i {
        font-size: 0.9rem;
        margin-left: 2px;
    }
}


/* --- Styles spécifiques par massage (couleurs, first-letter, sidebar active/hover) --- */

/* Massage Africain */
.service-details .all-post-list li.post-active a.africain-link:after, .service-details .all-post-list li a.africain-link:hover:after {
    background: #ffffff;
}
.service-details .all-post-list li.post-active a.africain-link:hover {
    background-color: rgb(230, 86, 0);
    color:#ffffff;
    font-weight: 800;
}
.service-details .all-post-list li:hover a.africain-link, .service-details .all-post-list li.post-active a.africain-link {
    background-color: #CC5500;
    color:#ffffff;
}
.service-details .all-post-list li.post-active a.africain-link:before {
    background-color: #CC5500; 
    color: #ffffff;
}
.service-details .all-post-list li:hover a.africain-link:before {
    background-color: #ffffff; 
    color: #CC5500;
}
.service-details .pbmit-service_content span.africolor {
    color: #CC5500;
}
.pbmit-firstlettera::first-letter{
    color: #CC5500;
    padding:0;
    font-size: 52px;
    line-height: 48px;
    display: inline-block;
    float: left;
    font-weight: 700;
    margin-right: 8px;
}


/* Massage Cranio */
.service-details .all-post-list li.post-active a.cranio-musculaire-link:after, .service-details .all-post-list li a.cranio-musculaire-link:hover:after {
    background: #ffffff;
}
.service-details .all-post-list li.post-active a.cranio-musculaire-link:hover {
    background-color: rgb(191, 146, 187);
    color:#ffffff;
    font-weight: 800;
}
.service-details .all-post-list li:hover a.cranio-musculaire-link, .service-details .all-post-list li.post-active a.cranio-musculaire-link {
    background-color: #b784b3;
    color:#ffffff;
}
.service-details .all-post-list li.post-active a.cranio-musculaire-link:before {
    background-color: #b784b3; 
    color: #ffffff;
}
.service-details .all-post-list li:hover a.cranio-musculaire-link:before {
    background-color: #ffffff; 
    color: #b784b3;
}
.service-details .pbmit-service_content span.cranicolor {
    color: #b784b3;
}
.pbmit-firstletteranio::first-letter{
    color: #b784b3;
    padding:0;
    font-size: 52px;
    line-height: 48px;
    display: inline-block;
    float: left;
    font-weight: 700;
    margin-right: 8px;
}


/* Massage Lomi Lomi */
.service-details .all-post-list li.post-active a.lomilomi-link:after, .service-details .all-post-list li a.lomilomi-link:hover:after {
    background: #ffffff;
}
.service-details .all-post-list li.post-active a.lomilomi-link:hover {
    background-color: rgb(254, 227, 78);
    color:#ffffff;
    font-weight: 800;
}
.service-details .all-post-list li:hover a.lomilomi-link, .service-details .all-post-list li.post-active a.lomilomi-link {
    background-color: #FDDA06;
    color:#ffffff;
}
.service-details .all-post-list li.post-active a.lomilomi-link:before {
    background-color: #FDDA06; 
    color: #ffffff;
}
.service-details .all-post-list li:hover a.lomilomi-link:before {
    background-color: #ffffff; 
    color: #FDDA06;
}
.service-details .pbmit-service_content span.lomicolor {
    /*color: #FDDA06;*/
    color: #f3d100;
}
.pbmit-firstletteromi::first-letter{
    color: #FDDA06;
    padding:0;
    font-size: 52px;
    line-height: 48px;
    display: inline-block;
    float: left;
    font-weight: 700;
    margin-right: 8px;
}

.service-details .all-post-list li a:before {
    color: #90b67b;
}


/* Massage Relaxation Coréenne */
.service-details .all-post-list li.post-active a.coreenne-link:after, .service-details .all-post-list li a.coreenne-link:hover:after {
    background: #ffffff;
}
.service-details .all-post-list li.post-active a.coreenne-link:hover {
    background-color: rgb(0, 189, 120);
    color:#ffffff;
    font-weight: 800;
}
.service-details .all-post-list li:hover a.coreenne-link, .service-details .all-post-list li.post-active a.coreenne-link {
    background-color: #00A86B;
    color:#ffffff;
}
.service-details .all-post-list li.post-active a.coreenne-link:before {
    background-color: #00A86B; 
    color: #ffffff;
}
.service-details .all-post-list li:hover a.coreenne-link:before {
    background-color: #ffffff; 
    color: #00A86B;
}

.service-details .pbmit-service_content span.relaxcolor {
    color: #00A86B;
}
.pbmit-firstletterelax::first-letter{
    color: #00A86B;
    padding:0;
    font-size: 52px;
    line-height: 48px;
    display: inline-block;
    float: left;
    font-weight: 700;
    margin-right: 8px;
}




/* Massage Deep Tissue */
.service-details .all-post-list li.post-active a.deeptissue-link:after, .service-details .all-post-list li a.deeptissue-link:hover:after {
    background: #ffffff;
}
.service-details .all-post-list li.post-active a.deeptissue-link:hover {
    background-color: rgb(52, 92, 152);
    color:#ffffff;
    font-weight: 800;
}
.service-details .all-post-list li:hover a.deeptissue-link, .service-details .all-post-list li.post-active a.deeptissue-link {
    background-color: #2A4B7C;
    color:#ffffff;
}
.service-details .all-post-list li.post-active a.deeptissue-link:before {
    background-color: #2A4B7C; 
    color: #ffffff;
}
.service-details .all-post-list li:hover a.deeptissue-link:before {
    background-color: #ffffff; 
    color: #2A4B7C;
}

.service-details .pbmit-service_content span.deepcolor {
    color: #2A4B7C;
}
.pbmit-firstletterdiip::first-letter{
    color: #2A4B7C;
    padding:0;
    font-size: 52px;
    line-height: 48px;
    display: inline-block;
    float: left;
    font-weight: 700;
    margin-right: 8px;
}




/* Massage Découverte / Fusion-Découverte (partage la même couleur efbc74) */
.service-details .all-post-list li.post-active a.decouverte-link:after, .service-details .all-post-list li a.decouverte-link:hover:after {
    background: #ffffff;
}
.service-details .all-post-list li.post-active a.decouverte-link:hover {
    background-color: rgb(246, 230, 209);
    color:#ffffff;
    font-weight: 800;
}
.service-details .all-post-list li:hover a.decouverte-link, .service-details .all-post-list li.post-active a.decouverte-link {
    background-color: #efbc74;
    color:#ffffff;
}
.service-details .all-post-list li.post-active a.decouverte-link:before {
    background-color: #efbc74; 
    color: #ffffff;
}
.service-details .all-post-list li:hover a.decouverte-link:before {
    background-color: #ffffff; 
    color: #efbc74;
}

.service-details .pbmit-service_content span.fusioncolor {
    color: #efbc74;
}
.pbmit-firstletterion::first-letter{
    color: #efbc74;
    padding:0;
    font-size: 52px;
    line-height: 48px;
    display: inline-block;
    float: left;
    font-weight: 700;
    margin-right: 8px;
}


/* Massage Suédois */
.service-details .all-post-list li.post-active a.suedois-link:after, .service-details .all-post-list li a.suedois-link:hover:after {
    background: #ffffff;
}
.service-details .all-post-list li.post-active a.suedois-link:hover {
    background-color: rgb(187, 245, 246);
    color:#ffffff;
    font-weight: 800;
}
.service-details .all-post-list li:hover a.suedois-link, .service-details .all-post-list li.post-active a.suedois-link {
    background-color: #A5F2F3;
    color:#ffffff;
}
.service-details .all-post-list li.post-active a.suedois-link:before {
    background-color: #A5F2F3; 
    color: #ffffff;
}
.service-details .all-post-list li:hover a.suedois-link:before {
    background-color: #ffffff; 
    color: #A5F2F3;
}

.service-details .pbmit-service_content span.suedcolor {
    color: #A5F2F3;
}
.pbmit-firstletterois::first-letter{
    color: #A5F2F3;
    padding:0;
    font-size: 52px;
    line-height: 48px;
    display: inline-block;
    float: left;
    font-weight: 700;
    margin-right: 8px;
}

/* Style de la boîte fusion (où le texte est centré) */
.pbmit-ihbox-style-3 .pbmit-heading-desc-fusion {
    text-align: center;
}

/* Photo bloc réservez */
.widget.pbmit-service-ad {
    background-image: url(../images/massages/divers/1762211743739.jpg);
    background-size: cover;
    background-position: center 100%;
    background-color: var(--pbmit-blackish-color);
    border: none;
}

.pbmit-service-ads .pbmit-ads-desc {
    font-size: 18px;
    line-height: 21px;
    padding-top: 25px;
    color: var(--pbmit-white-color);
}

.service-details .alert.alert-info.mt-3 {
    --bs-alert-color: #4e5050;
    --bs-alert-bg: #fffae3;
    --bs-alert-border-color: #dfd399;
}

.service-details .alert.alert-info.mt-3 .cliquesation {
    font-weight: 700;
    color: #90b67b;
}

.service-details .alert.alert-info.mt-3 .cliquesation:hover {
    color: #86c4d9;
    text-decoration: underline !important;
}

.service-details .alert.alert-info.mt-3 .contatac {
    font-weight: 700;
    color: #90b67b;
}

.service-details .alert.alert-info.mt-3 .contatac:hover {
    color: #86c4d9;
    text-decoration: underline !important;
}

.col-md-12.col-xl-3.service-right-col.sidebar {
    background-image: url(../images/massages/ornements/lotus.png);
}

.service-details .pt-4.pb-5.marging.modifit .pbmit-heading .pbmit-title {
    text-align: center;
}

.service-details .pt-4.pb-5.marging.modifit .pbmit-heading .pbmit-title {
    text-align: center;
}

.service-details .pt-4.pb-5.marging.modifit p {
    text-align: center;
}

.service-details .list-group-borderless.specifik .list-group-item {
    display: flex;
    font-size: inherit;
    align-items: center;
    padding: 0;
    margin-bottom: 5px;
    color: var(--pbmit-blackish-color);
    position: relative;
    border: none;
    justify-content: center;
    background: transparent;
}

.list-group .pbmit-icon-list-text {
    font-size: 17px;
}

.service-details .list-group-borderless.specifik .list-group-item .bi.bi-x-lg {
    color: #df0000;
    text-shadow: 
    0.5px 0 0 currentColor, 
    -0.5px 0 0 currentColor;
    font-size: 25px;
}

.modal-content .mb-0.fs-5.text-muted strong u {
    color: #00A86B !important;
}

.pbmit-breadcrumb .pbmit-breadcrumb-inner {
    padding-left: 5px;
    font-weight: 800;
}

/*========================================*/
/* 03 - TARIFS
/*========================================*/

.pbmit-title-bar-wrapper.tarreuh {
    background-image: url(../images/tarifs/bandeau/tarifbar.jpg);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    background-attachment: scroll;
    position: relative;
    z-index: 2;
}

.pbmit-tbar-title.tatarifs {
    font-weight: 500;
    font-size: 60px;
    line-height: 60px;
    letter-spacing: 0px;
    color: var(--pbmit-white-color);
    text-transform: capitalize;
    font-style: normal;
    text-shadow: 2px 2px 4px #000000;
}

.pbmit-breadcrumb.tarr, .pbmit-breadcrumb.tarr a.homeuh {
    font-size: 16px;
    line-height: 26px;
    letter-spacing: 0.5px;
    color: var(--pbmit-white-color);
    text-transform: uppercase;
    font-style: normal;
    text-shadow: 2px 2px 4px #000000;
}

.pricing-Plan.section-lgx.modifpad{
    padding-top: 140px;
}

.pricing-Plan .pbmit-heading-subheading.modifmarg{
    margin-bottom: 40px;
}

.container.text-center.margin {
    margin: 0 0 70px;
}
.container.text-center.margin h3 {
    text-align: left;
    margin-bottom: 2rem;
}
.container.text-center.margin h3.acentrer {
    text-align: center;
}

/* Styles pour le bloc de tarification complet (.pricing-Plan) */
.pricing-Plan .section-title {
    text-align: center;
    margin-bottom: 3rem;
}
.pricing-Plan .section-title h2 {
    font-size: 2.5rem;
    color: #34495e;
    position: relative;
    display: inline-block;
    padding-bottom: 10px;
}
.pricing-Plan .section-title h2::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    height: 3px;
    width: 60px;
    background-color: #90b67b;
    border-radius: 5px;
}
.pricing-Plan .section-title .badge {
    background-color: #f7f7f7;
    color: #607d8b;
    font-weight: normal;
    font-size: 0.85rem;
    padding: 0.4rem 0.8rem;
    border-radius: 20px;
    margin-bottom: 1rem;
    display: inline-block;
}

/* Styles généraux des cartes de prix */
.pricing-Plan .card {
    border: 1px solid #eceff1;
    border-radius: 10px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
    margin-bottom: 2rem;
    overflow: hidden; 
    font-size: 17px;
}
.pricing-Plan .card-header-custom {
    background-color: #90b67b; /* Vert Logo */
    color: white;
    padding: 1.2rem 1.5rem;
    font-size: 1.3rem;
    font-weight: bold;
    border-bottom: none;
    text-align: center;
}
.pricing-Plan .card-header-custom.quatrieme {
    background-color: #6a9952; /* Vert Logo 3 */
}
.pricing-Plan .card-header-custom.dark {
    background-color: #82bb63;
    color: white;
}

/* Styles du tableau des tarifs */
.pricing-Plan .table-responsive {
    margin-bottom: 0;
}
.pricing-Plan .price-table {
    border-collapse: collapse; 
    width: 100%;
}
.pricing-Plan .price-table th, .price-table td {
    text-align: center;
    vertical-align: middle;
    padding: 0.8rem 0.5rem;
    border: 1px solid #eceff1;
}
.pricing-Plan .price-table thead th {
    background-color: #f7f7f7; 
    color: #34495e;
    font-weight: 600;
    font-size: 17px;
}
.pricing-Plan .price-table tbody td {
    color: #34495e;
    font-weight: 500;
}
.pricing-Plan .price-table .time-slot-standard {
    background-color: #ffffff;
}
.pricing-Plan .price-table .time-slot-peak {
    background-color: #fff9f9; /* Légèrement rosé pour le peak */
    font-weight: bold;
    color: #34495e;
}
.pricing-Plan .price-table .time-slot-night {
    /*background-color: #fdf2f2;  Plus rosé pour la nuit */
    background-color: #f6f3ed;
    color: #0a132e;
    font-weight: bold;
}
.pricing-Plan .price-table .category-row {
    background-color: #81bacd; /* Bleu logo */
    color: white;
    font-weight: bold;
    text-align: left;
    padding-left: 1.5rem;
}
.pricing-Plan .table-footer-info {
    background-color: #f7f7f7;
    padding: 1rem;
    text-align: center;
    font-size: 15px;
    color: #607d8b;
    border-top: 1px solid #eceff1;
}

/* Forfaits */
.pricing-Plan .forfait-card .card-header-custom {
    background-color: #007bff; /* Bleu du logo pour les forfaits */
}
.pricing-Plan .forfait-item {
    background-color: #ffffff;
    border: 1px solid #eceff1;
    border-radius: 8px;
    padding: 1.5rem;
    text-align: center;
    box-shadow: 0 2px 10px rgba(0,0,0,0.03);
    height: 100%; 
}
.pricing-Plan .forfait-item h4 {
    /*color: #34495e;*/
    color: #0a132e;
    font-weight: bold;
    margin-bottom: 0.8rem;
}
.pricing-Plan .forfait-item .lead {
    color: #7fd0eb; /* Bleu Logo pour le prix */
    font-size: 2rem;
    font-weight: bold;
}
.pricing-Plan .forfait-item .text-small {
    font-size: 17px;
    color: #607d8b;
}
.pricing-Plan .forfait-item .badge {
    font-size: 0.75rem;
    padding: 0.3em 0.6em;
    vertical-align: middle;
    margin-left: 0.5rem;
    background-color: #90b67b;
    color: white;
}
.pricing-Plan .forfait-alert {
    background-color: #b1deed29;
    border: 1px #90b67b;
    color: #0a97c7;
}
.pricing-Plan .card-body.p-0.modific {
    padding-bottom: 35px !important;
}

/* Conditions et Annexes */
.pricing-Plan .conditions-section h5 {
    /*color: #34495e;*/
    color: #0a132e;
    font-weight: bold;
    margin-bottom: 1rem;
}
.pricing-Plan .conditions-section ul {
    padding-left: 0;
    list-style: none;
}
.pricing-Plan .conditions-section li {
    margin-bottom: 0.5rem;
    color: #607d8b;
    font-weight: 700;
}
.pricing-Plan .conditions-section li i {
    margin-right: 8px;
    color: #90b67b;
}
.pricing-Plan .conditions-section .alert-custom {
    background-color: #b1deed29; /* Très léger bleu */
    border: 1px #90b67b;
    color: #0a97c7;
    padding: 1rem;
    border-radius: 8px;
}
.pricing-Plan .footer-info {
    background-color: #f7f7f7;
    padding: 1.5rem;
    border-radius: 0 0 10px 10px;
    color: #607d8b;
    border-top: 1px solid #eceff1;
}

/* NOUVEAUX STYLES POUR RENDRE LE BOUTON CARTE CADEAU CLIQUABLE */

.conditions-tionsec a {
    text-decoration: none;
    display: block;
}
.conditions-tionsec .card-gift-cta {
    background-color: #90b67b;
    color: white;
    font-weight: bold;
    padding: 1rem;
    border-radius: 8px;
    text-align: center;
    transition: all 0.3s ease;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    font-size: 1rem;
    border: 2px solid var(--accent-color);
    display: flex;
    align-items: center;
    justify-content: center;
}
.conditions-tionsec .card-gift-cta:hover {
    background-color: #81bacd; /* Couleur plus foncée au survol */
    box-shadow: 0 6px 20px rgba(159, 203, 240, 0.7);
    transform: translateY(-3px);
    color: white; /* S'assurer que le texte reste blanc */
}
.conditions-tionsec .card-gift-cta i {
    margin-right: 10px;
    font-size: 1.2rem;
}

.conditions-section a {
    text-decoration: none;
    display: block;
}
.conditions-section .card-gift-cta {
    background-color: #90b67b;
    color: white;
    font-weight: bold;
    padding: 1rem;
    border-radius: 8px;
    text-align: center;
    transition: all 0.3s ease;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    font-size: 1rem;
    border: 2px solid var(--accent-color);
    display: flex;
    align-items: center;
    justify-content: center;
}
.conditions-section .card-gift-cta:hover {
    background-color: #81bacd; /* Couleur plus foncée au survol */
    box-shadow: 0 6px 20px rgba(159, 203, 240, 0.7);
    transform: translateY(-3px);
    color: white; /* S'assurer que le texte reste blanc */
}
.conditions-section .card-gift-cta i {
    margin-right: 10px;
    font-size: 1.2rem;
}

/* Couleurs supplémentaires */
.pricing-Plan h6.fw-bold {
   /* color: #34495e;*/
   color: #0a132e;
}

.pricing-Plan h6.secondecouleur{
    color: #607d8b;
}

.pricing-Plan p.secondecouleur{
    font-weight: 700;
}

.pricing-Plan td.category-row.secondcoul{
    color: white;
    background-color: #aadaeb;
}

.pricing-Plan h5.text-center.mb-4.secondcoul{
    color: #607d8b;
    font-size: 22px;
}

.pricing-Plan td.category-row.troisiemecoul{
    color: white;
    /*background-color: #f33643; /*Rouge St Valentin*/
    background-color: #bcedfe;
}

.pricing-Plan i.fas.fa-info-circle.troiscouleur{
    color: #90b67b;
}

.pricing-Plan i.fas.fa-car-side.troiscouleur{
    color: #90b67b;
}

.pricing-Plan i.fas.fa-car-side.troiscouleur{
    color: #81bacd;
}

.pricing-Plan .autrecouleur{
    color: #56a8c3;
}


/* Responsive adjustments */
@media (max-width: 767px) {
    .pricing-Plan .section-title h2 {
        font-size: 2rem;
    }
    .pricing-Plan .price-table th, .price-table td {
        font-size: 0.8rem;
        padding: 0.6rem 0.3rem;
    }
    .pricing-Plan .forfait-item {
        padding: 1rem;
    }
    .pricing-Plan .forfait-item .lead {
        font-size: 1.5rem;
    }
}

.table.table-striped.table-hover.table-bordered.align-middle {
    margin-bottom: 0px;
}


/*========================================*/
/* 04 - Reservation
/*========================================*/

.pbmit-title-bar-wrapper.resar {
    background-image: url(../images/reservations/bandeau/resarr.png);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    background-attachment: scroll;
    position: relative;
    z-index: 2;
}

.pbmit-tbar-title.rdv {
    font-weight: 500;
    font-size: 60px;
    line-height: 60px;
    letter-spacing: 0px;
    color: var(--pbmit-white-color);
    text-transform: capitalize;
    font-style: normal;
    text-shadow: 2px 2px 4px #000000;
}

.pbmit-breadcrumb.tarr, .pbmit-breadcrumb a.homeohm {
    font-size: 16px;
    line-height: 26px;
    letter-spacing: 0.5px;
    color: var(--pbmit-white-color);
    text-transform: uppercase;
    font-style: normal;
    text-shadow: 2px 2px 4px #000000;
}

.page-content .reservation-card {
    max-width: 1100px; /* Légèrement élargi pour Calendly */
    margin: 2rem auto;
    border-radius: 1.5rem;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.page-content .h3.fw-bolder.mb-2 {
    font-size: 35px;
}

.page-content .bi.bi-patch-check-fill.me-2.text-primary {
    color: #90b67b !important;
}

.page-content .bi.bi-clock.me-2.text-primary {
    font-size: 18px;
    color: #81bacd !important;
}

.page-content .bi.bi-chat.me-2.text-primary {
    font-size: 18px;
    color: #81bacd !important;
}

.page-content .bi.bi-credit-card.me-2.text-primary {
    font-size: 18px;
    color: #81bacd !important;
}

.page-content .bi.bi-patch-question.me-2.text-primary {
    font-size: 18px;
    color: #81bacd !important;
}

.page-content .text-primary.fw-semibold.text-decoration-none {
    color: #80a36c !important;
    font-weight: 700 !important;
    font-size: 19px;
}

.page-content .text-primary.fw-semibold.text-decoration-none:hover {
    color: #81bacd !important;
    transition: all 0.3s ease;
    text-decoration: underline !important;
}

.page-content .list-unstyled i {
    font-size: 14px;
    color: #ffffff;
}

/* En-tête de la page */
.page-content .header-bg {
    background-color: #81bacd;
    color: white;
    padding: 2.5rem;
}

/* Conteneur Calendly */
.page-content .calendly-container {
    position: relative;
    min-height: 980px; /* Augmenté pour éviter le double scroll */
    width: 100%;
    border: 1px solid rgba(129, 186, 205, 0.3);
    border-radius: 1rem;
    overflow: hidden;
    background-color: #fff;
}

/* Force l'iframe à remplir tout le conteneur */
.page-content .calendly-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* Styles spécifiques aux blocs d'information */
.page-content .info-block {
    background-color: #f7f7f7;
    border-radius: 1rem;
    padding: 1.5rem;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.05);
}

.page-content .small.text-dark.mb-4 {
    font-size: 16px;
}

.page-content .p-3.bg-warning-subtle.rounded-3.border.border-warning-subtle.text-warning-emphasis {
    background-color: #fffae3;
}

.page-content .h5.fw-bold.text-primary.mb-3 {
    color: #80a36c !important;
}

.page-content .p-4.border.border-primary.rounded-3.shadow-sm {
    --bs-border-opacity: 1;
    border-color: #80a36c !important;
}

.page-content .btn.btn-primary.fw-semibold.rounded-pill {
    background-color: #90b67b;
    border-color: #80a36c;
}

.page-content .btn.btn-primary.fw-semibold.rounded-pill:hover {
    box-shadow: 0 6px 20px rgba(159, 203, 240, 0.7);
    transform: translateY(-3px);
    transition: all 0.3s ease;
    background-color: #81bacd;
}

.page-content .small.fw-semibold.mb-0 {
    font-size: 16px;
}

/* Adaptabilité mobile */
@media (max-width: 768px) {
    .calendly-container {
        min-height: 1000px; /* Souvent plus long sur mobile car les éléments s'empilent */
    }
}

/* --- Boutons personnalisés Réservation 
.pbmit-btn.btn-cb {
    background-color: #81bacd; 
    border: none;
    text-align: center;
    padding: 15px;
}

.pbmit-btn.btn-cb:hover {
    background-color: #2c3e50; 
    color: white;
}

.pbmit-btn.btn-especes {
    background-color: #90b67b; 
    border: none;
    text-align: center;
    padding: 15px;
}

.pbmit-btn.btn-especes:hover {
    background-color: #2c3e50; 
    color: white;
}

.rounded-4 {
    border-radius: 25px !important;
}  --- */

.col-lg-8.differ.mx-auto {
    margin-bottom: 100px;
}


/*========================================*/
/* 05 - Cartes Cadeaux / Forfaits 
/*========================================*/

.pbmit-title-bar-wrapper.cadoo {
    background-image: url(../images/cartecadeau/bandeau/cadeaubar.png);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    background-attachment: scroll;
    position: relative;
    z-index: 2;
}

/* --- FORMULAIRE STYLE MONETICO (Adapté Cilans) --- */
.monetico-wrapper {
    max-width: 800px;
    margin: 100px auto 0; /* Chevauchement léger si voulu, ici normal */
    background: #fff;
    padding: 40px;
    border-radius: 10px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.05);
    position: relative;
    top: -50px; /* Remonte sur la bannière pour effet moderne */
}

.form-section-title {
    font-size: 1.25rem;
    color: var(--pbmit-blackish-color);
    border-bottom: 2px solid #90b67b;
    padding-bottom: 10px;
    margin-bottom: 25px;
    margin-top: 10px;
}

.form-label {
    font-weight: 600;
    font-size: 17px;
    color: #555;
}

.form-control, .form-select {
    border-radius: 5px;
    border: 1px solid #ddd;
    padding: 12px;
    background-color: #fcfcfc;
}

.form-control, form select {
    /*border: unset;
    background-color: var(--pbmit-white-color);*/
    border: 1px solid #ddd;
    background-color: #fcfcfc;
    height: 60px;
    font-size: 16px;
    padding: 10px 20px;
    border-radius: 15px;
    margin-bottom: 20px;
}

.form-control:focus {
    border-color: var(--pbmit-secondary-color);
    box-shadow: 0 0 0 0.2rem rgba(129, 186, 205, 0.25);
}

.required-star { color: #90b67b; margin-left: 3px; }

/* Style spécifique pour le montant */
.amount-options {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 15px;
}

.amount-btn {
    background: #fff;
    border: 2px solid #eee;
    color: #666;
    padding: 10px 20px;
    border-radius: 50px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.amount-btn:hover {
    border-color: #81bacd;
    color: #81bacd;
}

.amount-btn.active {
    background-color: #81bacd;
    border-color: #73a4b5;
    color: #fff;
}

.total-box {
    background-color: #f8f9fa;
    border-radius: 10px;
    padding: 20px;
    text-align: right;
    margin-top: 30px;
    border: 1px solid #e9ecef;
}

.total-label { font-size: 1.2rem; margin-right: 15px; }
.total-amount { font-size: 2rem; font-weight: 800; color: var(--pbmit-blackish-color); }
.currency { font-size: 1.2rem; vertical-align: super; }

.secure-badge {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 20px;
    font-size: 16px;
    color: #888;
}

.secure-badge i { 
    color: #81bacd; 
    margin-right: 8px; 
}

/* Message d'erreur personnalisé */
.error-message {
    color: #dc3545;
    font-size: 0.85rem;
    margin-top: 5px;
    display: none;
    font-weight: 600;
}
.error-message i { margin-right: 5px; }

@media (min-width: 1201px) {
  .main-menu .navigation > li > ul, .main-menu .navigation > li > ul > li > ul {
    border-bottom: 2px solid #90b67b !important;
    border-top: 2px solid #90b67b !important;
}
}

@media (min-width: 1201px) {
    .main-menu .navigation > li > ul a:before {
        background-color: #81bacd !important;
    }
}

@media (min-width: 1201px){
    .main-menu .navigation > li > ul li:hover > a{
        color: #81bacd !important;
    }
}

/* Correction de l'alignement vertical du symbole € dans le champ montant */
.input-group-text {
    /* 1. Assure que le symbole prend toute la hauteur de l'input */
    height: 100%; 
    
    /* 2. Centre le contenu (le €) verticalement */
    display: flex;
    align-items: center; 
    
    /* 3. Utilise le padding des inputs larges de Bootstrap (0.5rem) */
    /* Cela est crucial pour correspondre à form-control-lg */
    padding-top: 0.5rem; 
    padding-bottom: 1.2rem;
    
    /* Optionnel : Assurez que la police correspond également au format large */
    font-size: 1.25rem; 
}

/* Style désactivé pour les boutons montants */
.amount-btn:disabled {
    background-color: #eee;
    color: #aaa;
    cursor: not-allowed;
    border-color: #ddd;
}
.amount-btn:disabled:hover {
    border-color: #ddd;
    color: #aaa;
}

/* STYLE POUR LA POPUP MAINTENANCE */
.modal-header-maintenance {
    background-color: #90b67b;
    color: white;
}
.modal-icon-maintenance {
    font-size: 3rem;
    color: var(--pbmit-secondary-color);
    margin-bottom: 15px;
}

.fas.fa-exclamation-circle {
    color: crimson;
}

.modal-content .mb-0.mt-2.text-primary.fw-bold {
    color: #81bacd !important;
}

.modal-content .btn.btn-secondary {
    background-color: #90b67b;
}

.modal-content .btn.btn-secondary:hover {
    background-color: #81bacd;
}

.page-content.carteforfait {
    margin-top: 80px;
}

.text-center.mb-4.p-4.rounded-4.ccetff {
    background-color: #e7ffda; 
    border: 1px solid #eee;
    margin: 0 10% 0 10%;
    font-size: 17px;
}

.text-center.mb-4.p-4.rounded-4.ccetff h3 {
    color: #81bacd;
}

@media (max-width: 1201px){
    .text-center.mb-4.p-4.rounded-4.ccetff {
        margin: auto;
}
}

/*========================================*/
/* 06 - FAQ
/*========================================*/

.pbmit-title-bar-wrapper-faqqq {
    background-image: url(../images/faq/bandeau/6183.jpg);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    background-attachment: scroll;
    position: relative;
    z-index: 2;
}

.pbmit-heading-subheading .pbmit-subtitle {
    font-family: var(--pbmit-body-typography-font-family);
    font-weight: 700;
    font-size: 14px;
    line-height: 21px;
    letter-spacing: 0.5px;
    color: #ffffff;
    text-transform: uppercase;
    font-style: normal;
    padding: 5px 20px;
    display: inline-block;
    background: #90b67b;
    border-radius: 30px;
    margin-bottom: 10px;
}



.pbmit-heading-subheading .pbmit-title.conte {
    font-family: var(--pbmit-heading-typography-font-family);
    font-weight: 600;
    font-size: 40px;
    line-height: 65px;
    letter-spacing: 0px;
    color: var(--pbmit-blackish-color);
    text-transform: none;
    font-style: normal;
    margin-bottom: 0;
}

.row.marges {
  margin-bottom: 70px;
}

.pbmit-heading-subheading.ding {
    margin-bottom: 0;
    position: relative;
    z-index: 1;
}

.pbmit-heading-subheading .pbmit-heading-desc {
    margin-top: 30px;
    font-size: 17px;
}

.intro-icon {
    font-size: 2.5rem;
    color: #81bac0; /* Couleur d'accentuation (bleu/vert doux trouvé sur votre site) */
    margin-bottom: 10px;
    display: block;
}

.introduction-text {
    max-width: 1100px;
    margin: 0 auto 3rem auto;
    text-align: center;
    padding: 30px; /* Augmentation du padding */
    /* NOUVEAUX STYLES POUR LA DYNAMISATION */
    background-color: #ffffff; /* Fond blanc léger */
    border-radius: 12px; /* Coins arrondis */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08); /* Ombre douce */
    border-top: 3px solid #7f8c8d; /* Bordure supérieure fine pour l'accentuation (couleur neutre/douce) */
}
.introduction-text h2 {
    font-weight: 700;
    color: #2c3e50;
    margin-bottom: 1rem;
}
.introduction-text h5.maincoeur {
    font-size: 25px;
    line-height: 34px;
    letter-spacing: 0px;
}

.introduction-text p {
    font-size: 17px;
    color: #555;
    line-height: 1.8;
}
.introduction-text p strong {
    color: #2c3e50; /* Accentuation des mots clés avec la couleur de titre/croix */
    font-weight: 600;
}

.container-fluid.didi {
    padding-top: 20px;
    padding-bottom: 150px;
}
.grid-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    /* C'est ici que la magie opère pour le + */
    gap: 2px; /* Épaisseur de la croix centrale */
    background-color: #2c3e50; /* Couleur de la croix (gris foncé/bleu nuit de votre charte) */

    width: 90%;
    max-width: 900px;
    margin: 0 auto;
    /* Suppression explicite des bordures extérieures et ombres */
    border: none;
    box-shadow: none;
    border-radius: 0;
}
.grid-item {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 40px;
    /* La couleur de fond des cases vient recouvrir le fond du conteneur, sauf aux endroits du gap */
    background-color: #f0f4f7; /* Même couleur que le fond de page pour fondre les cases */

    min-height: 250px;
    transition: all 0.3s ease-in-out; /* Ajout d'une transition pour la fluidité */
    position: relative; /* Nécessaire pour gérer le z-index en cas d'ombre */
}

.grid-item p {
    text-align: justify;
}

.grid-item p .bi.bi-x-lg {
    color: #df0000;
    text-shadow: 
    0.5px 0 0 currentColor, 
    -0.5px 0 0 currentColor;
    font-size: 25px;
}

.grid-item p .bi.bi-check2 {
    color: #66b739;
    text-shadow: 
    0.5px 0 0 currentColor, 
    -0.5px 0 0 currentColor;
    font-size: 25px;
}


/* Optionnel : Si vous voulez que les cases soient blanches pour bien contraster avec la page grise */
.grid-item.white-bg {
   background-color: #ffffff;
}

/* NOUVEL EFFET DE SURVOL (HOVER) */
.grid-item:hover {
    /* Soulèvement léger et ombre pour l'effet de profondeur */
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
    /* Changement de fond pour accentuer la case survolée */
    background-color: #fff9f9; /* Un blanc très légèrement teinté pour le survol */
    z-index: 10; /* Assure que l'ombre ne coupe pas la croix centrale */
}

.grid-item.white-bg.ok:hover {
    background-color: #edffe3; 
}

.grid-item.white-bg.nok:hover {
    background-color: #f9ecec;
}

.grid-item h3 {
    font-size: 1.8rem;
    font-weight: 700;
    color: #2c3e50;
    margin-bottom: 1rem;
}
.grid-item p {
    font-size: 1.1rem;
    color: #7f8c8d;
    line-height: 1.6;
    margin-bottom: 0;
    max-width: 300px; /* Pour éviter que le texte ne s'étale trop */
}

/* Media Queries pour le responsive */
@media (max-width: 768px) {
    .grid-container {
        grid-template-columns: 1fr;
        grid-template-rows: auto;
        gap: 2px;
    }
}

.accordion-item .pbmit-accordion-icon {
    max-width: 50px;
    width: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 50px;
    font-size: 14px;
    background: var(--pbmit-white-color);
    border-radius: 50%;
    position: absolute;
    color: #90b67b;
    order: 2;
    top: 50%;
    transform: translate(0, -50%);
    right: 5px;
    left: auto;
}

.accordion-body {
    border: 0;
    padding: 30px 15px 5px 15px;
    font-size: 17px;
}

.section-lgx a.cliqueclique {
    font-weight: 700;
    color: #90b67b;
}

.section-lgx a.cliqueclique:hover {
    /*color: #86c4d9;*/
    color: #0a97c7;
    text-decoration: underline !important;
}

.section-lgx a.contaterie {
    font-weight: 700;
    color: #90b67b;
}

.section-lgx a.contaterie:hover {
    color: #86c4d9;
    text-decoration: underline !important;
}

.section-lgx .alert.alert-info.mt-3 {
    background-color: #b1deed29;
    border: 1px #90b67b;
    color: #34495e;
    border-radius: 8px;
}

.pbmit-accordion-title:hover{
    color: #90b67b;
    -webkit-transition: all .25s ease-in-out;
    transition: all .25s ease-in-out;
}

.contact-form-rightbox {
    padding: 55px 50px 50px 50px;
    border-radius: 30px;
    background-color: #b1deed;
}

/*========================================*/
/* 07 - CONSEILS BIEN-ETRE (Page de blog/liste d'articles)
/*========================================*/

.pbmit-title-bar-wrapper-inspi {
    background-image: url(../images/blogs/bandeau/coule.jpg);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    background-attachment: scroll;
    position: relative;
    z-index: 2;
}

/* Le sélecteur .pbmit-heading-desc .pbmit-day correspond probablement à la date dans les articles */
.pbmit-heading-desc .pbmit-day {
    color: var(--pbmit-heading-color) ;
    font-size: large;
}

/* Icône de la date */
span.pbmit-day i.bi {
    margin-right: 5px;
}

/* Règle pour masquer les articles */
.hidden-article {
    display: none !important;
    opacity: 0; /* Optionnel : pour une transition si vous utilisez JS pour l'afficher */
    /* On utilise !important car le style de grille pourrait surcharger le display */
}

/* Style du bouton "Voir plus" (S'il n'est pas déjà stylisé par pbmit-btn) */
.load-more-btn-wrapper {
    padding-top: 30px;
    padding-bottom: 30px;
}

/* Styles pour réduire la taille du bouton "Lire l'article" et le centrer */

/* Étape 1 : Centrer le contenu (le bouton) dans le conteneur */
.pbmit-blog-content .pbmit-meta-cat-wrapper {
    text-align: center;
}

/* Étape 2 : Réduire la largeur du bouton pour qu'il s'adapte à son contenu
   et le rendre sensible à la propriété 'text-align: center' du parent */
   .pbmit-blog-content .pbmit-blog-btn {
    display: inline-block; /* Le rendra à la fois alignable et de la taille de son contenu */
    width: auto; /* Optionnel, mais assure qu'il ne prend pas 100% de la largeur */
}

a.pbmit-btn.pbmit-btn.centrageart {
    margin: 0 auto; /* Centre horizontalement */
    text-align: center;
    width: fit-content; /* Permet à l'élément de s'ajuster à la largeur de son contenu */
}


/**************************************************/
/* STYLES DES FILTRES DE LA PAGE CONSEILS         */
/**************************************************/

.pbmit-blog-cat-list-wrapper {
    margin-bottom: 50px;
    text-align: center; /* Centrer les boutons */
}

/* Liste des boutons */
.pbmit-blog-cat-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    justify-content: center;
    flex-wrap: wrap; /* Assure la responsivité */
    gap: 10px; /* Espace entre les boutons */
}

/* Style de base des boutons */
.pbmit-blog-cat-list button {
    background-color: var(--pbmit-white-color); /* Fond blanc ou clair */
    color: var(--pbmit-blackish-color); /* Texte sombre */
    border: 0px solid #e0e0e0; /* Bordure légère */
    padding: 10px 20px;
    border-radius: 30px; /* Coins très arrondis */
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Style au survol des boutons */
.pbmit-blog-cat-list button:hover {
    background-color: none; /* Couleur principale (rose/marron clair) */
    color: #81bacd;
    border-color: none;
}

/* Style du bouton actif/sélectionné */
.pbmit-blog-cat-list button.active {
    background-color: #90b67b;
    color: var(--pbmit-white-color);
    border-color: #658156;
    /* Ajout d'une petite ombre pour le mettre en valeur */
    box-shadow: 0 4px 8px rgba(144, 182, 123, 1.0);
}

/* Classe utilisée par le JavaScript pour masquer les articles */
.hidden-article {
    display: none !important; 
    /* Utilisation de !important pour s'assurer qu'il écrase les styles Bootstrap (comme col-md-4) */
}

/* * NOUVEAUX STYLES POUR HARMONISER LES BLOCS ARTICLES (STYLE 2)
 */

/* Assure que le conteneur .row se comporte bien en flex */
#blog-container.row {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch; /* Aligne les cartes sur le haut */
}

/* Cible la colonne pour qu'elle s'étire */
.blog-classic-box {
    display: flex; /* Fait en sorte que la colonne soit un conteneur flex */
    flex-direction: column; /* Aligne les enfants verticalement */
    margin-bottom: 30px; /* Espace entre les rangées d'articles */
}

/* Cible l'article lui-même */
article.pbmit-blog-style-2 {
    display: flex; /* Fait de l'article un conteneur flex */
    flex-direction: column; /* Aligne l'image et le contenu verticalement */
    height: 100%; /* Fait en sorte que l'article remplisse la colonne (pour l'harmonie) */
    
    /* MODIFICATION : Retrait du style "carte" de l'article principal */
    border-radius: 0; /* Annule l'arrondi */
    overflow: visible; /* Laisse le contenu déborder (l'image gère son propre overflow) */
    background-color: transparent; /* Fond transparent (pas de fond de carte) */
    box-shadow: none; /* Pas d'ombre */
    transition: none; /* Pas de transition de survol sur la carte principale */
}

/* Effet de survol optionnel */
article.pbmit-blog-style-2:hover {
    transform: none;
    box-shadow: none;
}

/* Image en haut de la carte */
article.pbmit-blog-style-2 .post-featured-wrapper {
    flex-shrink: 0; /* Empêche l'image de rétrécir */
    margin-bottom: 15px; /* Ajout d'espace entre l'image et le texte */
    height: 290px; /* Hauteur fixe pour le conteneur d'image */
    overflow: hidden; /* Assure que l'image ne dépasse pas */
    
    /* NOUVEAU STYLE : Appliquer le style de la carte à l'image */
    border-radius: 20px; /* Coins arrondis pour l'image */
    border: 1px solid #e0e0e0; /* Bordure légère pour l'image (couleur grise) */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05); /* Ombre légère pour l'image */
    transition: transform 0.3s ease, box-shadow 0.3s ease;

    /* 1. Positionnement du conteneur image pour que l'encart flotte correctement */
    position: relative; /* Base pour le positionnement absolu de l'encart */
    /* Assurez-vous que ce conteneur n'a pas overflow: hidden si le tag dépasse */
}

/* Effet de survol de l'image (si vous voulez un effet) */
article.pbmit-blog-style-2:hover .post-featured-wrapper {
    transform: translateY(-5px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
}

/* 2. Style et positionnement de l'encart de catégorie (rose) */
.pbmit-meta-category {
    /* Positionnement */
    position: absolute; /* Permet de flotter sur l'image */
    top: 20px; /* Espace depuis le haut */
    right: 20px; /* Espace depuis la droite */
    z-index: 10; /* Assure que l'encart est au-dessus de l'image */
    
    /* Style de l'encart (Similaire à la capture d'écran rose) */
    background-color: #fff; 
    padding: 7px 15px; /* Remplissage intérieur */
    border-radius: 20px; /* Bords très arrondis (forme de "pilule") */
    font-size: 13px;
    line-height: 1;
    font-weight: 700; /* Texte en gras */
    text-transform: uppercase; /* Texte en majuscules */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Petite ombre */
}

/* 3. Style du lien à l'intérieur de l'encart */
.pbmit-meta-category a {
    color: #81bacd !important; 
    text-decoration: none !important;
}

/* L'image elle-même */
article.pbmit-blog-style-2 .post-featured img {
    /* L'image prend les coins arrondis de son conteneur (.post-featured-wrapper) */
    border-radius: 0; /* Annule tous les border-radius ici */
    width: 100%;
    height: 100%; /* Remplir le conteneur de 220px */
    object-fit: cover; /* Recadre l'image pour l'adapter sans distorsion */
}

/* Bloc de contenu (texte) */
.pbmit-blog-content {
    display: flex;
    flex-direction: column;
    flex-grow: 1; /* Fait en sorte que ce bloc s'étende pour remplir l'espace */
    /* MODIFICATION : Retrait du padding car l'image n'est plus à l'intérieur d'une boîte */
    padding: 0 5px; /* Un léger padding horizontal au cas où */
}

/* Titre de l'article */
.pbmit-blog-content .pbmit-post-title {
    font-size: 22px; /* Taille de police cohérente */
    line-height: 1.3;
    flex-grow: 0;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    text-align: justify;
}

/* Description de l'article */
.pbmit-blog-content .pbmit-entry-content {
    flex-grow: 1; /* S'étend pour pousser le bouton "Lire" vers le bas */
    margin-top: 15px;
}

/* Bouton "Lire l'article" */
.pbmit-blog-content .pbmit-meta-cat-wrapper .pbmit-blog-btn{
    flex-grow: 0;
    margin-top: 10px; /* Espace au-dessus du bouton */
    text-decoration: none; /* On enlève le soulignement de base */
    position: relative; /* Nécessaire pour l'animation */
    padding-bottom: 3px; /* Crée un petit espace pour la ligne */
}

/* Bouton "Lire l'article" */
.pbmit-blog-content .pbmit-meta-cat-wrapper .pbmit-blog-btn:hover {
    color: #90b67b;
    transition: all .3s ease-in;
    font-weight: 600;
}

/* Animation du soulignement (état de base : ligne cachée) */
.pbmit-blog-content .pbmit-meta-cat-wrapper .pbmit-blog-btn::after {
    content: '';
    position: absolute;
    bottom: 0; /* Positionne la ligne en bas */
    left: 0; /* Positionne la ligne à gauche */
    width: 0; /* La ligne n'a pas de largeur au repos */
    height: 1px; /* Épaisseur de la ligne */
    background-color: #90b67b; /* Couleur de la ligne (la couleur de survol) */
    transition: width 0.3s ease-in-out; /* L'animation ! */
}

/* Animation du soulignement (état de survol : ligne visible) */
.pbmit-blog-content .pbmit-meta-cat-wrapper .pbmit-blog-btn:hover::after {
    width: 100%; /* La ligne fait 100% de la largeur au survol */
}


.pbmit-blog-style-1 .pbmit-blog-btn .pbmit-button-text::before {
    content: "";
    position: absolute;
    bottom: -1px;
    left: 0;
    width: 0%;
    height: 1px;
    background-color: var(--pbmit-global-color);
    transition: all .3s ease-in;
}

/* Flèche */
.pbmit-blog-btn:hover svg line,
.pbmit-service-btn:hover svg line{
    stroke-dashoffset: 0;
    stroke: #90b67b;
}



/**************************************************/
/* PAGES BLOGS */
/**************************************************/


.post.blog-classic .pbmit-firstletterblogg span.blogcolor {
    color: #81bacd;
    font-weight: 800;
}

.pbmit-firstletterblogg::first-letter{
    color: #81bacd;
    padding:0;
    font-size: 52px;
    line-height: 48px;
    display: inline-block;
    float: left;
    font-weight: 700;
    margin-right: 8px;
}

.post.blog-classic .pbmit-entry-content p span.blogcolor {
    color: #81bacd;
    font-weight: 800;
}

.pbmit-title-bar-wrapper-cinq {
    background-image: url(../images/blog/cinqmouv/1920x600_cinqmouv.jpg);
    background-repeat: no-repeat;
    background-position: center 30%; /* Centre horizontalement, mais descend verticalement à 70% */
    background-size: cover;
    background-attachment: scroll;
    position: relative;
    z-index: 2;
}

/*.post.blog-classic .pbmit-featured-wrapper .img-fluid.zen {
    /* Nouvelle ligne correcte : */
    /* object-position: 65% 50%; /* Essayez 65% ou 70% pour la décaler vers la gauche */
/*}*/


/**************************************************/
/* A EFFACER UNE FOIS PAGE TERMINEE */
/**************************************************/

/* --- CONTENU SPÉCIFIQUE CONSTRUCTION --- */
.coming-soon-wrapper {
    max-width: 800px;
    margin: -30px auto 150px; /* Remonte sur la bannière */
    background: #fff;
    padding: 60px 40px;
    border-radius: 20px;
    box-shadow: 0 15px 40px rgba(0,0,0,0.08);
    position: relative;
    text-align: center;
    z-index: 2;
}

.icon-container {
    width: 120px;
    height: 120px;
    background-color: rgba(129, 186, 205, 0.15); /* Fond bleu très clair */
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 30px;
    position: relative;
}

.main-icon {
    font-size: 50px;
    color: #81bacd; /* Bleu */
}

.sub-icon {
    position: absolute;
    bottom: 10px;
    right: 10px;
    background: #90b67b; /* Vert */
    color: white;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    border: 3px solid #fff;
}

.construction-title {
    font-size: 2rem;
    margin-bottom: 15px;
    color: var(--pbmit-blackish-color);
}

.construction-text {
    font-size: 1.1rem;
    color: #777;
    margin-bottom: 40px;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

/* Barre de progression stylisée */
.progress-container {
    max-width: 500px;
    margin: 0 auto 40px;
    text-align: left;
}

.progress-label {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
    font-weight: 700;
    color: var(--pbmit-blackish-color);
    font-size: 0.9rem;
}

.progress {
    height: 12px;
    background-color: #e9ecef;
    border-radius: 10px;
    overflow: hidden;
}

.progress-bar {
    background-color: #90b67b;
    background-image: linear-gradient(45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent);
    background-size: 1rem 1rem;
    animation: progress-bar-stripes 1s linear infinite;
}

/*========================================*/
/* 08 - CONTACT
/*========================================*/

.pbmit-title-bar-wrapper-conta {
    background-image: url(../images/contact/bandeau/45399.jpg);
    background-repeat: no-repeat;
    background-position: center 30%; /* Centre horizontalement, mais descend verticalement à 70% */
    background-size: cover;
    background-attachment: scroll;
    position: relative;
    z-index: 2;
}

/* Les styles suivants semblent être liés à une section de contact ou à une boîte d'information
   (potentiellement utilisée sur la page Contact) */
   .pbmit-heading-desc .heure {
    font-size: 20px;
}

.pbmit-heading-desc .pbmit-social-links li.pbmit-social-li a {
    font-size: 22px;
    display: inline-block;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    opacity: 1;
    color: var(--pbmit-blackish-color);
    background-color: var(--pbmit-white-color);
    border-radius: 50%;
}

.pbmit-heading-desc .pbmit-social-links li.pbmit-social-li a:hover {
    color: #90b67b;
}

.pbmit-ihbox-style-9 .pbmit-element-title.deplacement {
    font-size: 20px;
    line-height: 26px;
    padding-bottom: 20px;
    margin: 0;
}

.pbmit-ihbox-style-9 .pbmit-heading-desc.depla {
    margin-bottom: 18px;
}

.pbmit-contact-social .pbmit-social-links a {
    color: #81bacd;
    border: 1px solid #5c828f;
}

.pbmit-contact-social .pbmit-social-links a:hover {
    color: #ffffff;
    background-color: #81bacd;
    border: 1px solid #5c828f;
}

.pbmit-contact-social .pbmit-social-links .pbmit-social-li svg {
    fill: #81bacd;
    transition: all 0.3s ease;
    display: inline-block;
    vertical-align: middle;
    
}

.pbmit-contact-social .pbmit-social-links .pbmit-social-li a:hover {
    background-color: #81bacd !important; 
    border: 1px solid #5c828f !important;    
}

.pbmit-contact-social .pbmit-social-links .pbmit-social-li a:hover svg {
    fill: #ffffff !important; 
}


/*========================================*/
/* 09 - REMERCIEMENT
/*========================================*/

.merci-section {
    padding: 100px 0;
    text-align: center;
}
.merci-icon {
    font-size: 80px;
    color: #90b67b; /* La couleur verte de ton thème */
    margin-bottom: 20px;
}
.merci-box {
    background-color: var(--pbmit-secondary-color);
    padding: 60px;
    border-radius: 30px;
    max-width: 700px;
    margin: 0 auto;
}
.merci-box p {
    font-size: 17px;
}





/*========================================*/
/* 10 - DIVERS
/*========================================*/

/*========================================*/
/*  POPUP SAINT VALENTIN
/*========================================*/

#valentin-popup-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    opacity: 0;
    visibility: hidden;
    transition: all 0.4s ease;
}

#valentin-popup-overlay.active {
    opacity: 1;
    visibility: visible;
}

/* 1. Style par défaut (pour Mobile et Tablette) */
.valentin-popup-content {
    background: #fff;
    width: 90%;
    max-width: 600px;
    
    /* --- AJOUTS POUR LE DÉFILEMENT --- */
    max-height: 90vh;    /* Empêche le popup de dépasser de l'écran (90% de la hauteur) */
    overflow-y: auto;    /* Active la barre de défilement verticale si besoin */
    /* --------------------------------- */

    border-radius: 20px;
    position: relative;
    box-shadow: 0 20px 40px rgba(0,0,0,0.3);
    transform: scale(0.8);
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* 2. Style spécifique pour les Grands Écrans (Ordinateurs) */
@media (min-width: 1025px) {
    .valentin-popup-content {
        /* On désactive le défilement sur ordi */
        max-height: none;    /* Le popup reprend sa taille naturelle */
        overflow-y: visible; /* Pas de barre de défilement */
        transform: scale(1); /* Optionnel : s'assure qu'il est à la bonne taille */
    }
}

.valentin-popup-content .bi.bi-arrow-through-heart-fill.rougee {
    color: #db2f3b;
}

.valentin-popup-content .bi.bi-stars.jaune {
    color: #efbf04;
}

.valentin-popup-content .plusgros {
    font-size: 22px;
    color: #db2f3b;
    text-shadow: 0px 0px 0px #000000;
}

.valentin-popup-content .plusgrog {
    font-size: 22px;
    color: #D9851E;
    text-shadow: 0px 0px 0px #000000;
}

#valentin-popup-overlay.active .valentin-popup-content {
    transform: scale(1);
}

/*.valentin-image-box {
    width: 100%;
    height: 400px;
    background-image: url(../images/indexx/evenements/duo2.png);
    background-size: cover;
    background-position: 100% 75%;
    position: relative;
}*/

.valentin-image-box {
    width: 100%;
    height: 400px;
    background-image: url(../images/indexx/evenements/confiance2.jpg); /* Remplacez par votre image */
    background-size: cover;
    background-position: 50% 75%;
    position: relative;
}

.valentin-image-box::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 50px;
    background: linear-gradient(to top, #fff, transparent);
}

.valentin-text-box {
    padding: 30px;
    text-align: center;
}

.valentin-text-box h2 {
    font-family: var(--pbmit-heading-typography-font-family);
    /*color: #e7a391; /* Rose doux */
    color: #3A4D3F;
    font-size: 32px;
    margin-bottom: 10px;
}

.valentin-text-box p {
    font-size: 17px;
    line-height: 26px;
    margin-bottom: 20px;
    color: #555;
}

/*.valentin-promo {
    background: #ed4a55;
    padding: 15px;
    border-radius: 10px;
    border: 1px dashed #6e5650;
    margin-bottom: 25px;
    color: #ffffff;
}*/

.valentin-promo {
    background: #D9851E;
    padding: 15px;
    border-radius: 10px;
    border: 1px dashed #6e5650;
    margin-bottom: 25px;
    color: #ffffff;
    font-size: 17px;
}

.valentin-promo .dixpourcent {
    font-size: 18px;
}

.valentin-promo span {
    /*display: block;*/
    font-weight: 700;
    color: #ffffff;
    font-size: 20px;
}

/* AJUSTEMENT POUR LA STRUCTURE ROW/COL BOOTSTRAP */
.valentin-btn-group .row {
    margin-left: -5px;
    margin-right: -5px;
}

.valentin-btn-group .col-md-6 {
    padding: 4px; /* Petit espace entre les colonnes */
}

.valentin-btn-group .pbmit-btn {
    width: 100%; /* Le bouton prend toute la colonne */
    padding: 20px 10px;
    font-size: 17px;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    min-height: 60px;
    line-height: 1.3;
    background-color: #3A4D3F;
}

.valentin-btn-group .pbmit-btn:hover {
    background-color: #D9851E;
}

.valentin-close {
    position: absolute;
    top: 15px;
    right: 15px;
    font-size: 24px;
    color: #fff;
    cursor: pointer;
    background: rgba(0,0,0,0.3);
    width: 35px;
    height: 35px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10;
    transition: background 0.3s;
}

.valentin-close:hover {
    background: #e7a391;
}

/* --- ADAPTATION MOBILE SPECIFIQUE --- */
@media (max-width: 767px) {
    .valentin-image-box { 
        height: 180px; /* Image beaucoup plus petite sur mobile */
    }
    .valentin-text-box {
        padding: 15px 15px;
    }
    .valentin-text-box h2 {
        font-size: 30px;
    }
    .valentin-text-box p {
        font-size: 18px;
        margin-bottom: 10px;
    }
    .valentin-promo {
        padding: 8px;
        margin: 15px auto;
    }
    .valentin-promo span {
        font-size: 16px;
    }
    .valentin-close {
        background: rgba(231, 163, 145, 0.9); /* Plus visible sur mobile */
        top: 8px;
        right: 8px;
    }
}

/* Cas des téléphones très petits ou en paysage */
@media (max-height: 500px) {
    .valentin-image-box { display: none; } /* On cache l'image si l'écran est trop bas */
    .valentin-popup-content { max-height: 95vh; }
}