/*
Theme Name:     Divi Enfant
Description:    Theme enfant Delphine Mercier
Author:         Delphine Mercier
Template:       Divi
Version:        1.1
*/


/* Ajout du soulignement aux liens */
#main-content .et_pb_text a {
    transition: all 0.4s !important;
}

#main-content .et_pb_text a:hover  {
   color:#222222;
   border-bottom: 1px solid #222222;
}



/*********************************
MENU DE NAVIGATION
**********************************/

#top-menu li li a {
padding: 6px 20px;
width: 280px;
font-size: 14px;
}
#top-menu li ul {
  width: 280px !important;

}


/*Largeur sous menu*/
.et-menu li li a {
  width: 280px !important;
	font-size:14px !important;
  margin-right:0px !important;
  margin-left:0px !important;
}

.nav li ul {
  width: 280px !important;

}
#top-menu-nav > ul > li.current-menu-item > a {
color: #000 !important; 
}


/*********************************
LOGO HEADER FIXE



.et-fixed-header #logo {
content: url("https://www.delphine-mercier.fr/wp-content/uploads/2025/11/md.png");
}
*********************************/
/*********************************
STYLE HAMBURGER
**********************************/

    /* style the opened mobile menu hamburger (make it an 'X') */
    div.mobile_nav.opened .mobile_menu_bar:before {
        font-family: "ETmodules";
        content: "\4d";
    }
    /* color and size both the open and close hamburgers */
    div.mobile_nav.opened .mobile_menu_bar:before, div.mobile_nav.closed .mobile_menu_bar:before {
        color: #ed1719;
        font-size:40px !important;
    }


/*********************************
LOGO SUR MOBILE

@media(max-width: 980px) {
    #logo {
    content: url("https://www.delphine-mercier.fr/wp-content/uploads/2025/11/logo-delphine-mercier-H-mobile-1.png");
		max-width: 260px !important;
		padding-top:-20px;
   
  }
}
 **********************************/


   /*********************************
Graisse typo menu
**********************************/
#top-menu li a {
font-weight: 400;
}

/*********************************
LISTES A PUCES
**********************************/
/*LISTE A PUCES accueil*/
.pa-bullet-list-1 ul {
list-style-type: none!important;
	
}

.pa-bullet-list-1 ul li:before {
content: '9'!important;
color: #ffcc22;
font-family: 'ETMODULES'!important;
margin-right: 2px;
margin-left: -26px;
padding-left:10px;
}
/*********************************
LISTES A PUCES ce que ça change pour vous fleche
**********************************/
/*LISTE A PUCES fleches*/
.list-fleche ul {
list-style-type: none!important;
	
}

.list-fleche ul li:before {
content: '\24'!important;
color: #ed1719;
font-family: 'ETMODULES'!important;
margin-right: 2px;
margin-left: -26px;
padding-left:10px;
}
/*********************************
LISTES A PUCES ce que ça change pour vous fleche
**********************************/
/*LISTE A PUCES fleches*/
.list-fleche-noire ul {
list-style-type: none!important;
	
}

.list-fleche-noire ul li:before {
content: '\24'!important;
color: #333333;
font-family: 'ETMODULES'!important;
margin-right: 2px;
margin-left: -26px;
padding-left:10px;
}



/*------------------------------------------------*/
/*-----------------[Breadcrumbs]----------------*/
/*------------------------------------------------*/
.pa-breadcrumb-links {
font-size:13px;
	color:#e3e3e3;
}

.pa-breadcrumb-links a {
	color:#fff;
}
.breadcrumb_last {
  color: #FFCC22;
	
}

/*------------------------------------------------*/
/*-----------------[Logo]----------------*/
/*------------------------------------------------*/

/* Switch mobile logo*/
@media only screen and (max-width: 1020px) {
#logo {
    max-width: 100%;

  }
} 


/*------------------------------------------------*/
/*-----------------[Bouton contact]----------------*/
/*------------------------------------------------*/

/*********************************
BOUTON CTA NAVIGATION
**********************************/

/* Sélecteur du lien (a) à l’intérieur de l’élément de menu
   qui a la classe .de-menu-cta (ton bouton CTA dans le menu) */
.de-menu-cta a {
    /* Couleur du texte du bouton (ici noir).
       Tu peux mettre par ex. #ffffff pour du texte blanc. */
    color: #fff!important; /* Change la couleur du texte du bouton ici */

    /* Couleur de fond du bouton (ici jaune #ffcc22).
       Tu peux remplacer par ta couleur d’accent. */
    background-color: #ed1719; /* Change la couleur de fond du bouton ici */

    /* Rayon des coins (5px = légèrement arrondi).
       Mets 0px pour un bouton carré, 999px pour très pillulé. */
    border-radius: 15px; /* Mets 0px si tu veux un bouton carré */
    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;

    /* Alignement interne du texte dans le bouton (centré). */
    text-align: center;

    /* Hauteur de ligne. Tu peux l’ajuster si le texte semble trop serré. */
    line-height: 9px;

    /* Padding interne du bouton (haut/bas 12px, gauche/droite 10px).
       Plus tu augmentes, plus le bouton est grand. */
    padding: 12px 10px!important;
    
    /* Le bouton occupe tout l’espace dispo du li. */
    display: block;

    /* Padding gauche/droite (redéfini ici). */
    padding-left: 10px!important;
    padding-right: 10px!important;

    /* Bordure du bouton (0 = pas de bordure). */
    border: 0px;
}

/* Media query : les styles à l’intérieur ne s’appliquent
   que pour les écrans ≥ 981px (version desktop, pas mobile). */
@media (min-width: 981px) {
    
    /* Styles au survol (hover) du bouton CTA sur desktop uniquement */
    .de-menu-cta a:hover {
        /* Opacité totale (visible à 100%). */
        opacity: 1!important;

        /* Couleur du texte au survol (ici noir). */
        color: #fff!important; /* Change la couleur du texte au survol ici */

        /* Couleur de fond au survol (ici blanc).
           Tu peux mettre ta couleur d’accent inverse si tu veux. */
        background-color: #ed1719; /* Change la couleur de fond au survol ici */

        /* Zoom léger au survol (1.1 = 10% plus grand).
           Supprime cette ligne si tu ne veux pas d’animation de zoom. */
        transform: scale(1.1); /* Enlève cette ligne si tu ne veux pas l’effet zoom */
    }
}
    
/* Corrige le padding vertical des items de menu
   quand le menu contient un logo, pour que ton bouton s’aligne bien. */
.et_pb_menu--with-logo .et_pb_menu__menu>nav>ul>li>a {
    padding-top: 0px;
    padding-bottom: 0px;
}
 
/* S’assure que les éléments de menu sont bien centrés verticalement. */
.et_pb_menu .et_pb_menu__menu>nav>ul>li {
    align-items: center;
}


/* Text color menu sticky uniquement sur le bouton CTA */
/* Partie spéciale pour le menu fixé (sticky) quand on scrolle */
@media (min-width: 981px) {

  /* Quand le menu devient sticky (.et-fixed-header),
     on redéfinit le style du bouton CTA dans le menu du haut. */
  .et-fixed-header #et-top-navigation nav > ul > li.de-menu-cta > a {
    /* Couleur du texte dans le menu sticky (ici noir). */
    color: #fff !important;

    /* Couleur de fond du bouton dans le menu sticky (ici jaune). */
    background-color: #ed1719 !important;
  }

  /* Style au survol du bouton CTA dans le menu sticky. */
  .et-fixed-header #et-top-navigation nav > ul > li.de-menu-cta > a:hover {
    /* Couleur du texte au survol (ici blanc). */
    color: #fff !important;

    /* Couleur de fond au survol (ici noir). */
    background-color: #fff !important;

    /* On garde l’effet de zoom au survol si souhaité. */
    transform: scale(1.1); /* Enlève cette ligne si tu ne veux pas l’effet survol */
  }
}
/* Bouton CTA dans menu mobile */
@media (max-width: 980px) {
    .et_mobile_menu .de-menu-cta > a {
        background-color: #ed1719 !important; /* couleur de fond du bouton */
        color: #fff !important; /* couleur du texte */
        display: block;
        padding: 12px 15px !important;
        border-radius: 5px;
    }
}



/* Retirer le gras dans le menu mobile Divi */
@media (max-width: 980px) {
    .et_mobile_menu li a,
    #mobile_menu li a {
        font-weight: 400 !important; /* Regular */
    }
}

/********************************************
    Style the Hamburger
    *****************************************************************/
    /* style the opened mobile menu hamburger (make it an 'X') */
    div.mobile_nav.opened .mobile_menu_bar:before {
        font-family: "ETmodules";
        content: "\4d";
    }
    /* color and size both the open and close hamburgers */
    div.mobile_nav.opened .mobile_menu_bar:before, div.mobile_nav.closed .mobile_menu_bar:before {
        color: #ed1719;
        font-size:50px !important;
    }


 /*********************************
Menu de navigation sur mobile
**********************************/



#mobile_menu { display: block !important;  padding-top: 20px; z-index: 9998; }

.mobile_nav.closed #mobile_menu {
 transform: rotateY(90deg); -webkit-transform: rotateY(90deg);
 transform-origin: right; -webkit-transform-origin: right;
 background: #333333; transition: .8s ease-in-out !important; }

.mobile_nav.opened #mobile_menu {
 transform: rotateY(0deg); -webkit-transform: rotateY(0deg);
 transform-origin: right; -webkit-transform-origin: right;
 background: #1e1e1e; transition: .8s ease-in-out; }

.mobile_nav.opened .mobile_menu_bar:before {
 content: "\4d"; color: #ed1719 !important; }





/*********************************
GRAVITY FORM standard fond clair
**********************************/

/* Style du bouton */
.gform_wrapper .gform_footer input.button {
 float: right;
 background: #333333;
 border: 1px solid #333333;
 font-size: 18px;
 color: #ffffff;
 padding: 12px 23px;
 cursor: pointer;
}
/* Style du bouton au survol*/
.gform_wrapper .gform_footer input.button:hover {
 background: #191919!important;
	 border: 1px solid #191919;
color:#ffffff;
}


/* Case à cocher formulaire*/
.gform_wrapper ul.gfield_checkbox li label, .gform_wrapper ul.gfield_radio li label {
    display: -moz-inline-stack;
    display: inline-block;
    letter-spacing: inherit;
    vertical-align: top !important;
    cursor: pointer;
    font-size: 16px;
    color:#fff !important;
}

.gform_wrapper.gravity-theme .gfield-choice-input {
display: inline-block;
margin-top: 5px;
vertical-align: top;
}

.gform_wrapper .field_description_below .gfield_description {
    padding-top: 16px;
    font-size: 12px;
    padding-bottom: 10px;
    line-height: 18px;
    font-style: italic;

}

.gform_legacy_markup_wrapper .gfield_required {
  color: red;
}