/*
Theme Name: Divi Child
Template: Divi
Description: Divi Child Theme
Author: Térence Morlé
Author URI: #
Version: 4.27.5
*/
/********************************************************************/
/********************************************************************/
/********************************************************************/


/* Custom MAILPOET */
@media (min-width: 500px) and (max-width: 980px) {
	#mp_form_popup1{ width:65vw!important;}
}	
/*.mailpoetseparator {
	margin:10px;
}*/










/* pour équilibrer les paragraphes et les titres
p,h1,h2,h3{
	text-wrap: pretty;
}
*/

/*GENERAL gestion des exposants*/
sup {
    font-size: 50% !important;
}

sup {
    vertical-align: 1% !important;
}

/*GENERAL*/
hr {
    border-top: 0px solid grey;
    margin-top: 20px;
}

p {
    padding-bottom: 20px;
}


/********************************************************************/
/*************************  GENERAL  *********************************
/********************************************************************/

/* Ajout d'une ligne de séparation dans les sous-menus V1 */
/*#top-menu .sub-menu li:not(:last-child) > a {
    border-bottom: 0.5px solid rgba(0, 0, 0, 0.15);
    padding-bottom: 10px;
    margin-bottom: 10px;
}*/
/* Optionnel : ajuster l'espacement général */
/*#top-menu .sub-menu li > a {
    display: block;
}*/



/* Ajout d'une ligne de séparation dans les sous-menus V2 */
#top-menu .sub-menu li:not(:last-child)>a {
    position: relative;
}

#top-menu .sub-menu li:not(:last-child)>a::after {
    content: "";
    position: absolute;
    left: 5%;
    bottom: 0;
    width: 90%;
    height: 1px;
    background: rgba(0, 0, 0, 0.10);
}

/* Réduire l'interlignage dans les sous menus  */
#top-menu .sub-menu li a {
    line-height: 1.6em;
}



/*********************  RESPONSIVE ********************************/

/* RESPONSIVE > ARRANGER 3 colonnes en responsive : 2 en haut et une dessous centrée */

@media (max-width: 980px) {
    .pyramide-inversee {
        display: flex;
        flex-wrap: wrap;
        /* Permet aux colonnes de passer à la ligne */
        justify-content: center;
        /* Centre les colonnes horizontalement */
    }

    .pyramide-inversee .et_pb_column {
        width: 45%;
        /* Largeur des deux premières colonnes */
        margin: 10px
    }

    .pyramide-inversee .et_pb_column:nth-child(3) {
        width: 50%;
        /* Largeur de la troisième colonne */
        margin: 20px 0 0;
        /* Espacement en haut */
        order: 3;
        /* Assure que cette colonne est en dernier */
        text-align: center;
        /* Centre le contenu de la colonne */
    }
}

@media (max-width: 767px) {

    /* smartphone*/
    .pyramide-inversee .et_pb_column,
    .pyramide-inversee .et_pb_column:nth-child(3) {
        width: 100%;
        /* une seule colonne */
    }
}


@media (max-width: 767px) {

    /* smartphone*/
    #test001.et_pb_row_inner_1 {
        width: 100%;
        /* une seule colonne */
    }
}



/*-----------------------------------------------------------------*/
/* RESPONSIVE > TEXTE AUTO 2 colonnes puis 1 colonne sur mobile et tablettes
-> cf spiruline liste ingredients + texte VO2 max*/

.responsive-2columns {
    column-count: 2;
    /* Par défaut, 2 colonnes */
    column-gap: 80px;
    /* Espacement entre les colonnes */
}

@media (max-width: 980px) {
    .responsive-2columns {
        column-count: 2;
        /* = 1 colonne sur tablette */
        column-gap: 40px;
    }
}


.responsive-2columns.ingredients-spiruline {
    column-count: 2;
    /* Par défaut, 2 colonnes */
    column-gap: 10px;
    /* Espacement entre les colonnes */
}

/*-----------------------------------------------------------------*/
/* RESPONSIVE > Inversion de l'ordre des colonnes dans une ligne sur mobiles + tablettes*/

@media (max-width: 980px) {
    #reversed-order {
        display: -webkit-flex;
        display: -ms-flex;
        display: flex;
        flex-direction: column-reverse;
        /* Inverse l'ordre des éléments dans la colonne */
        -webkit-flex-direction: column-reverse;
        -ms-flex-direction: column-reverse;
    }
}

/*-----------------------------------------------------------------*/
/* RESPONSIVE > faire passer à la ligne suivante lorsque la largeur de la fenêtre est trop petite*/

#order_row_spiru01 {
    display: flex;
    flex-wrap: wrap;
}



/********************************************************************/
/******************* PAGE ACCUEIL  **********************************
/********************************************************************/

/* description des slides  DIRECTEMENT DANS LE BLOC SLIDER DIVI*/

/* MODIFS DU CSS DES SLIDES A CHECKER DIRECTEMENT DANS LES BLOCS */
/* suppression de la description du slide "bien être pour la performance"*/



/************************************************* 
 * PAGES DECOUVERTES ET ARTICLES
 ***********************************************/

/* Masquer les infobulles (tooltips) des images */
img[title] {
    position: relative;
    /* Nécessaire pour que le pseudo-élément fonctionne */
}

img[title]:hover::after {
    content: '';
    /* Aucun contenu à afficher */
    display: none;
    /* Masque complètement l'infobulle */
}

.titre-pages-juridiques {
    padding: 50px 0px 30px 0px !important;
    text-transform: uppercase;
    font-size: 20px;
}

/*Top scroll button*/
body .et_pb_scroll_top.et-pb-icon {
    background: #11afb2b0;
}

.CTA01 h3 {
    font-size: clamp(1rem, 4vw, 3rem) !important;
}

.CTA01 p {
    font-size: clamp(0.6rem, 2vw, 1.2rem) !important;
}


/* Decouvrir collagene : puces du bloc normes (compatible avec safari)*/
#normes .puce-description-courte ul {
    padding-left: 0;
    /* Supprime l’indentation par défaut */
}

#normes .puce-description-courte ul li {
    list-style: none;
    padding-left: 35px;
    /* Ajoute un espace pour l'icône */
    position: relative;
    padding-bottom: 0.5em;
}

#normes .puce-description-courte ul li::before {
    font-family: "FontAwesome";
    content: "\f058";
    /* Code Unicode de la coche */
    font-weight: 900;
    color: #017693;
    font-size: 22px;
    position: absolute;
    left: 0;
    top: 0;
}

/* modif des bi-titres avec span */
.titre-bi-zize span {
    font-size: 1.2em;
    line-height: 1 em;
    font-weight: bold;
}

/*collagene line-height des titres "muscles"*/
#Pep-Section07-muscles h3 {
    padding-top: 20px;
}

#Pep-Section07-muscles p {
    padding-left: 20px;
}

/*--- Retrait du décalage margin bottom des articles ------------------ A CHECKER SI TOUJOURS UTILISE */
.et_pb_post {
    margin-bottom: 0px;
}

.single .post {
    padding-bottom: 0px;
}


/********************************************************************/
/*************************  PAGE CONTACT  ****************************
/********************************************************************/

/* CONTACT > custom du formulaire de contact*/
.contact-form-wpform input,
select.wpforms-field-medium {
    /*champs*/
    height: 40px;
    padding: 0 10px;
}

.contact-form-wpform .wpforms-field-sublabel {
    /*labels*/
    color: grey;
    font-size: 0.9em;
}

/* CONTACT > zone du RGPD --------------------------------------------*/

#formulaire-contact ul#wpforms-359202-field_8 {
    list-style-type: none;
    /* supprimer la puce avant la phrase*/
}

#formulaire-contact ul#wpforms-359202-field_8 label,
/* phrase "En cochant...." */
#formulaire-contact .contact-form-rgpd .wpforms-field-description

/*phrase RGPD avec lien politique confidentialité*/
    {
    font-size: 13px;
}

#formulaire-contact .contact-form-rgpd .wpforms-field-description a {
    text-decoration: underline;
}

/* CONTACT > bt envoyer de WPforms - page contact*/
#formulaire-contact .bt-envoi-contactform {
    padding: 4px 40px !important;
    font-weight: 400;
    cursor: pointer;
    border-radius: 30px;
    border: 2px solid #017693;
    font-size: 15px;
    background-color: #017693;
    color: #fff;
    width: 100%;
}

#formulaire-contact .bt-envoi-contactform:hover {
    background: #11afb2 !important;
    border: 2px solid #11afb2;
    color: #fff;
}

/* CONTACT > message de remerciement d'envoi de message*/
body #wpforms-confirmation-359202 {
    color: #017693;
    background-color: #0176931f;
    padding: 10px;
}



/********************************************************************/
/*******************  NAVBAR   **************************************
/********************************************************************/

#et-top-navigation {
    font-weight: 500 !important;  /* Force le poids normal */
}


/* NAVBAR > Ajuster la taille de l'icone Home de la nav sur tous les érans - NE PAS METTRE DANS LE style.css*/
header .et-pb-icon {
    font-size: 24px;
}

/* Retirer l'icone du panier DIVI dans la nav */
.et-cart-info {
    display: none;
}


/*------------------ NAVBAR : modifs -------------------------------*/
.et_menu_container,
.et_mobile_menu {
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    /*transition: box-shadow 0.3s ease;
	backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
	border: none;
	padding: 0 10px;
	width: 100%;*/
}

/*--------------------NAVBAR STICKY : modifs---------------------- */
.et-fixed-header {
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    /* ombre plus marquée  
	backdrop-filter: blur(2px); /* ajout de flou 
    /*-webkit-backdrop-filter: blur(2px); /* Compatibilité avec navigateurs */
    /*background-color: rgba(255,255,255,0.9)!important;*/
}

/* typo du menu*/
/*#et-top-navigation {  font-weight: 400;}*/


/* ------------- SOUS MENUS -------------------------------------- */

/* SOUS MENUS : Décalage du sous menu car le dernier est rogné*/
.nav li ul {
    padding: 20px 0;
    width: 210px;
    /* elmt 1/2 pour réduire la largeur du sous menu*/
    text-align: left;
    margin: 0 0 0 -50px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, .1);
    -moz-box-shadow: 0 2px 5px rgba(0, 0, 0, .1);
    -webkit-box-shadow: 0 2px 5px rgba(0, 0, 0, .1);
}

#top-menu li li a {
    width: 210px;
    /* elmt 2/2 pour réduire la largeur du sous menu*/
}

/* SOUS MENUS : items */
#top-menu li li {
    padding: 0 0px;
    font-weight: 400;
}

/* SOUS MENUS : hover des items */
.et_header_style_left #et-top-navigation nav>ul>li>a:hover,
#top-menu li li a:hover {
    color: #017693 !important;
}



/********************************************************************/
/****************  MOBILE NAVIGATION   ******************************
/********************************************************************/

/* Changer la couleur et le fond lors du survol des liens */
.et_mobile_menu li a:hover {
    color: #11afb2 !important;
    background-color: rgba(0, 0, 0, 0.08);
}

/*custom des items*/
.et_mobile_menu li {
    margin-bottom: -5px; /* reduire espacement des items */
    text-align: left !important;}

/* Ajouter un padding aux sous-menus */
.et_mobile_menu li li,
.et_mobile_menu li ul {
    padding-left: 20px !important;
}
/* typo des items */
.et_mobile_menu li a {
	font-weight: 400;
}

/* correction bug couleur du fond de la nav sur smartphone qui est transparent et non fixe*/
@media screen and (max-width: 980px) {
    .container.et_menu_container {
        background-color: #FFFFFF;
        position: fixed;
    }
}

/* le hamburger devient une croix pour fermer */
.mobile_nav.opened .mobile_menu_bar:before {
    content: "\4d";
}

/* Make the mobile menu full width + full height*/
.container.et_menu_container {
    width: 100%;
}

.et_mobile_menu {
    margin-left: 0px;
    padding: 10px 0 0 0;
    width: calc(100% + 60px);
    min-height: 100vh !important;
    min-height: -webkit-fill-available;
    position: fixed;
}

/* couleur de la bordure*/
.et-mobile-menu {
    border: #11afb2 !important;
}

/*retrait du hamburger du bord droit*/
.mobile_menu_bar::before {
    left: -20px !important;
}

/*retrait du logo du bord gauche*/
.logo_container {
    padding-left: 20px;
}

/*Repositionnement du picto shopping  */
@media screen and (max-width: 980px) {
    .xoo-wsc-sc-cont .xoo-wsc-cart-trigger {
        margin-right: 50px;
        margin-top: 20px;
    }
}

/********************************************************************/
/********************  FOOTER   **************************************
/********************************************************************/

/* FOOTER > Make the menu module display vertically*/
.vertical-menu nav ul li {
    width: 100%;
    display: block;
}

/* FOOTER > aligner verticalement les items des menus*/
#footer.et_pb_menu .et_pb_menu__menu,
.et_pb_menu .et_pb_menu__menu>nav,
.et_pb_menu .et_pb_menu__menu>nav>ul {
    display: -webkit-box;
    display: -ms-flexbox;
    display: block;
    -webkit-box-align: stretch;
    -ms-flex-align: stretch;
    align-items: stretch;
}

/* FOOTER > Ne pas afficher le hamburger dans les menus footer mobile */
@media (max-width: 980px) {
    .pa-open-mobile-menu .et_pb_menu__menu {
        display: flex !important;
    }

    .pa-open-mobile-menu .et_mobile_nav_menu {
        display: none !important;
    }
}

/* FOOTER > correction du décalage des sous menus sur smartphone*/
@media (max-width: 980px) {
    #footer .et_pb_menu--style-left_aligned .et_pb_menu__wrap {
        -webkit-box-pack: end;
        -ms-flex-pack: end;
        justify-content: left;
    }
}