/*
Theme Name: Divi Enfant par bubulgum.comm'
Site Name: Diem - Conseil en image Lausanne
Description: Theme enfant du theme Divi, pour le site www.diem-image.ch
Author: bubulgum.comm'
Author URI: https://bubulgum.com/
Template: Divi
Version: 1.0
Date début: 26.02.19
Date fin: 25.03.19
Dernière mise à jour: 22.08.24
*/

/* ----------------------- CONTENU ----------------------- */

/***** 0) réglages généraux *****/
/*** 1) personnalisation du background-color du site ***/
/*** 2) personnalisation des textes (font, color, etc) + boutons ***/
/*** 3) réglages des "Sections standard" et des "Lignes" ***/
/*** 4) réglages du HEADER ***/
/*** 5) réglages du FOOTER ***/
/*** 6) réglages de la page HOME ***/

/***** 7) réglages des autres pages *****/
/*** 7.1) réglages des éléments des pages Conseil et A propos ***/
/*** 7.2) réglages des éléments de la page Avant-Après ***/
/*** 7.3) réglages des éléments de la page BLOG ***/
/*** 7.4) réglages des éléments des pages d'ARTICLES (blog) ***/
/*** 7.5) réglages des éléments de la page CONTACT ***/
/*** 7.6) réglages des éléments de la page ÉVÉNEMENTS ***/
/*** 7.7) réglages des éléments de la page PARTENAIRES ***/

/***** 8) réglages d'éléments spéciaux (utilisés sur plusieurs pages) *****/
/*** 8.1) inversion ordre des colonnes "paires" (pages Conseil, Prestations, A propos) ***/
/*** 8.2) réglages galeries images (carrées) ***/
/*** 8.3) réglages des modules Bascule (page Prestations) ***/
/*** 8.4) réglages du popup pour promo eBook ***/

/***** 10) réglages du pop-up COOKIEBOT *****/


/* ----------------------- CONTENU ----------------------- */


@font-face {
    font-family: 'HelveticaNeueRoman';
    src: url('webfont/HelveticaNeueRoman.eot');
    src: url('webfont/HelveticaNeueRoman.eot') format('embedded-opentype'),
         url('webfont/HelveticaNeueRoman.woff2') format('woff2'),
         url('webfont/HelveticaNeueRoman.woff') format('woff'),
         url('webfont/HelveticaNeueRoman.ttf') format('truetype'),
         url('webfont/HelveticaNeueRoman.svg#HelveticaNeueRoman') format('svg');
}



/*** ---------------------------------------------------------------------------------------------------------- ***/
/*** ---------------------------------------------------------------------------------------------------------- ***/
/***** ---------------------------------------- 0) réglages généraux ---------------------------------------- *****/
/*** ---------------------------------------------------------------------------------------------------------- ***/
/*** ---------------------------------------------------------------------------------------------------------- ***/




/*** ------------------------------------------------------------ ***/
/*** 1) personnalisation du background-color du site ***/
/*** ------------------------------------------------------------ ***/

.et_pb_section {
	background-color: transparent !important;  /* pour annuler la valeur par défaut de Divi (qui est #fff) */
}

body {
	background-color: #fdfdfd !important;	/* gris très clair */
	font-family: HelveticaNeueRoman, Arial, sans-serif !important;	
}

/** réglage de la couleur de fond du "Bouton retour en haut de page" **/
.et_pb_scroll_top.et-pb-icon {
	background: rgba(171,147,160,0.65);		/* taupe à 65% d'opacité */
}






/*** ------------------------------------------------------------ ***/
/*** 2) personnalisation des textes (font, color, etc) + boutons ***/
/*** ------------------------------------------------------------ ***/

html {
	font-family: HelveticaNeueRoman, Arial, sans-serif !important;
	font-size: 100%;  /* équivaut à 1rem = 16px */
}

h1, h2, h3, h4, h5, h6 {
    color: #65575f !important;
    font-weight: 500 !important;
    line-height: 1em !important;
	padding-bottom: 0px !important;
}

h1 {
    font-family: 'Lobster Two', cursive;
	line-height: 1em !important;
	font-style: italic !important;
}

h4,
body.page-id-240907 h3 {
	padding-bottom: 0.5em !important;
}

h6 {
	padding-top: 1em !important;
	padding-bottom: 0.25em !important;
}

h1 {font-size: 2.75rem !important; margin-top: 1rem !important;}
h2 {font-size: 3rem !important;}
h3 {font-size: 1.75rem !important;}
h4 {font-size: 1.375rem !important;}
h5 {font-size: 1rem !important;}
h6 {font-size: 1rem !important;}

h1 {text-align: center !important;}
h6 {font-style: italic;}


p {
    font-size: 1rem !important;
	font-weight: 500 !important;
    line-height: 1.4em !important;
}

.page-id-130 .et_pb_text a {	/* lien (mail) page Contact */
	text-decoration: none !important;
	color: #ab93a0 !important;
}


/** réglages du texte "prioritaire" = en intro (sous le H1), ou év. en bas de page **/
/** la classe CSS "infos_prioritaires" doit être ajoutée dans les Paramétrages de Texte Module (onglet Avancé) **/
.infos_prioritaires p { 
    font-size: 1.25rem !important;
	font-weight: 500 !important;
    line-height: 1.4em !important;
	text-align: center !important;
}

@media only screen and (max-width: 767px) { /* smartphone */
	.et_pb_text {
    	max-width: 100% !important;
	}
}

/* "Ce qui me tient à coeur etc" sur page A propos = texte en blanc */
#texte_blanc p, #texte_blanc h1 {
	color: #fff !important;
}

/* réglages des boutons */
.et_pb_button {
	color: #ab93a0 !important;
}

body.page-id-240907 .et_pb_button,
button.frm_button_submit {
	background-color: transparent !important;
	border: 3px solid #ab93a0 !important;
	border-radius: 0px !important;
	display: block !important;
	color: #ab93a0 !important;
	font-size: 20px !important;
	font-weight: 500 !important;
	padding: .3em 1em !important;
	line-height: 1.7em !important;
	background-size: cover;
	background-position: 50%;
	background-repeat: no-repeat;
	-webkit-transition-duration: .2s;
	transition-duration: .2s;
	-webkit-transition-property: all !important;
	transition-property: all !important;
	margin: 2rem auto 0 auto !important;
}
body.page-id-240907 .et_pb_button {
	width: auto !important;
	display: initial !important;
}

.et_pb_bg_layout_light.et_pb_button:hover, .et_pb_bg_layout_light .et_pb_button:hover, .et_pb_contact_reset:hover, .et_pb_contact_submit:hover, .et_pb_pricing_table_button:hover,
button.frm_button_submit:hover {
    color: #fff !important; 
	background-color: #ab93a0 !important;
}

.et_pb_button_module_wrapper > a {
    min-width: 200px !important;
}

/* supprimer le picto à droite du texte du bouton (bouton popup + boutons page Event) */
#popup_ebook .et_pb_button::after,
body.page-id-240907 .et_pb_button:after {
	display: none !important;
}
/* et du coup supprimer le padding-right (qui laissait la place pour le picto) */
#popup_ebook .et_pb_button:hover,
body.page-id-240907 .et_pb_button:hover {
    border: 3px solid #ab93a0 !important;
    padding: .3em 1em !important;		/* mêmes réglages que en "pas hover" */
}


/** réglages tailles textes pour mobile **/
@media only screen and (max-width: 980px) { /* tablette */
	h1 {font-size: 2.4rem !important;}
}
@media only screen and (max-width: 767px) { /* smartphone */
	h1 {font-size: 1.85rem !important;}
	h2 {font-size: 1.75rem !important;}
	h3 {font-size: 1.25rem !important;}
	h4 {font-size: 1.125rem !important;}
	h5 {font-size: 1rem !important;}
	h6 {font-size: 1rem !important; padding-top: 1em !important}
	p {line-height: 1.125em !important;}
	.infos_prioritaires p {
		font-size: 1rem !important; 
		line-height: 1.125em !important;
	}
}






/*** ------------------------------------------------------------ ***/
/*** 3) réglages des "Sections standard" et des "Lignes" ***/
/*** ------------------------------------------------------------ ***/

/** réglages des padding des "Sections standard" **/

@media only screen and (min-width: 981px) { /* bureau */
	.et_pb_section {
    	padding: 3rem 0px !important;
	}
	.et_pb_section:first-child {	/* pour que la grande image colle au header */
		padding: 0px !important;
	}
	.et_pb_row:first-child {		/* pour que la grande image colle au header */
		padding: 0px !important;
	}
}

@media only screen and (max-width: 980px) { /* tablette */
	.et_pb_section {
    	padding: 2rem 0px !important;
	}
}

@media only screen and (max-width: 767px) { /* smartphone */
	.et_pb_section {
    	padding: 1.25rem 0px !important;
	}
	.et_pb_section:first-child {
		padding: 0px !important;
		margin-top: 10px !important;
	}
	.et_pb_section:first-child > .et_pb_row {  /* Image en-tête de page */
		padding: 0px !important;
		width: 96% !important;
	}
}

/** dernière section de la page: 48px (3rem) de margin-bottom, c'est plus harmonieux :) **/

.et_pb_section:last-child {		
    	margin-bottom: 3rem !important;
	}

#et_pb_section-home-alt {
    margin-bottom: 6rem !important;
}






/*** ------------------------------------------------------------ ***/
/*** 4) réglages du HEADER ***/
/*** ------------------------------------------------------------ ***/

/** ça gérait la ligne gris claire en dessous du header - enlevée par rapport au thème original (voir ligne 1241 fichier style.dev_divi_parent.css) **/
#main-header {
	box-shadow: 0 0px 0 rgba(0, 0, 0, 0);
}

/** background-color du header quand on scroll (et qu'il devient plus petit) **/
.et-fixed-header#main-header, .et-fixed-header#main-header .nav li ul, .et-fixed-header .et-search-form {
    background-color: #fdfdfd !important;	/* gris très clair = même couleur que le fond du site */
}

/** font-size du menu **/
#top-menu li,
#top-menu li a {
    font-size: 1.25rem !important;
}

/** couleur du texte du menu **/
#top-menu a,
.et_mobile_menu li a {
	color: #65575f !important;						/* taupe foncé */
}

/** lien menu actif --> couleur + bordure en dessous **/
#top-menu li.current-menu-ancestor > a,
#top-menu li.current-menu-item > a, 
.bottom-nav li.current-menu-item > a {
	color: #ab93a0 !important;						/* taupe */
	border-bottom: solid 2px #ab93a0 !important;	/* taupe */
	padding-bottom: 0.25rem !important;
}
/* annuler ces réglages pour les liens actifs des sous-menus */
#top-menu li ul li.current-menu-ancestor > a,
#top-menu li ul li.current-menu-item > a, 
.bottom-nav li ul li.current-menu-item > a {
	border-bottom: none !important;	
	margin-bottom: 0 !important;
}

/* réglages des sous-menu déroulants - li ul */

.nav li ul {
    visibility: hidden;
    z-index: 9999;
    max-width: 200px !important;	/* largeur du bloc liste "ul" */
    border-top: none !important;
    opacity: 0;
	background-color: #fdfdfd !important;	/* gris très clair */
    -webkit-box-shadow: 0 2px 5px rgba(0,0,0,.1);
    -moz-box-shadow: 0 2px 5px rgba(0,0,0,.1);
    box-shadow: 0 2px 5px rgba(0,0,0,.1);
	margin-top: -40px !important;
	padding: 0 !important;
	margin-left: -30px !important;
}

.nav li ul li {
    width: 100% !important;		/* pour que tout le texte reste sur 1 ligne */
}

/** réglages des liens dans les lignes des sous-menu déroulants - li ul li a (ordi + mobile) **/
#top-menu li li a,
#et_mobile_nav_menu li li a {
    width: auto !important;
    padding: 6px 10px;
	text-transform: none !important;
	font-weight: 500 !important;
}
/** réglages spécial pour mobile: réduire l'espace entre les liens du sous-menu (liens 2e niveau) **/
#et_mobile_nav_menu li li a {
    padding: 2px 10px !important;
}
.et_mobile_menu li a:hover, .nav ul li a:hover {
  background-color: transparent;
  opacity: 1;
}

/** couleur des 3 lignes "menu burger" **/
.mobile_menu_bar::before {
	color: #ab93a0 !important;						/* taupe */
}

/** couleur de la barre en dessous du menu burger "ouvert" **/
ul#mobile_menu.et_mobile_menu {
	border-top: 3px solid #ab93a0;
}






/*** ------------------------------------------------------------ ***/
/*** 5) réglages du FOOTER ***/
/*** ------------------------------------------------------------ ***/

.footer-widget p {
	color: #fdfdfd !important;	/* gris très clair */	
	font-size: 0.875rem !important;
	font-weight: 500 !important;
    line-height: 1.7em !important;
}

a.link-footer {
	text-decoration: none !important;
	color: #fdfdfd !important;	/* gris très clair */	
	font-size: 0.875rem !important;
	font-weight: 500 !important;
	margin-top: 0rem;
	margin-bottom: 0rem;
}

a.link-footer:hover {
	text-decoration: underline !important;
	color: #d5d5d5 !important;		/** gris un poil moins clair */
	font-weight: 700 !important;
}		

	
@media only screen and (max-width: 980px) { /* tablette et smartphone */
	a.link-footer {
		text-decoration: none !important;
		color: #fdfdfd !important;	/* gris très clair */	
	}
	
	.footer-widget p {
    line-height: 1.2em !important;
	}
} 

.widget_media_image img {
	width: 175px !important;
	height: auto;
}

a.reseaux-sociaux-footer {
	font-size: 2.7rem !important;
	letter-spacing: 2rem !important;
}
#footer-widgets .footer-widget li::before {display: none;}
#footer-widgets .footer-widget li {padding-left: 0; padding-top: 1rem;}

/* #footer-bottom {
    display: none !important;	/* pour enlever la barre tout en bas (pas défaut dans DIVI, pour y mettre les crédit et les réseaux sociaux)
} /// finalement je l'ai laissée */

#footer-info {	/* les crédits qui sont dans le footer-bottom */
    float: right !important;
    padding-bottom: 10px !important;
    color: #fdfdfd !important;
    text-align: right !important;
}

#footer-bottom a {
    -webkit-transition: none !important;
    -moz-transition: none !important;
    transition: none !important;
}

#footer-info a:hover {	/* pour annuler la valeur par défaut de DIVI (opacity: 0.7) */
    opacity: 1;
}






/*** ---------------------------------------------------------------------------------------------------------- ***/
/*** ---------------------------------------------------------------------------------------------------------- ***/
/***** ------------------------------------ 6) réglages de la page HOME ------------------------------------ *****/
/*** ---------------------------------------------------------------------------------------------------------- ***/
/*** ---------------------------------------------------------------------------------------------------------- ***/


/** réglages des boutons (en gris clair, vu que c'est sur le fond taupe) --> en fait non, je laisse sur fond blanc, donc lien et cadre en couleur taupe 
.page-id-474 .et_pb_button {
	color: #ab93a0 !important;
} **/


/** réglage de la couleur des flèches pour passer d'une image à l'autre --> en fait j'ai laissé "par défaut", du coup sur la Home les flèches sont blanches, et sur les autres pages, elles sont grises... et on voit mieux je trouve!
.et-pb-arrow-prev::before,
.et-pb-arrow-next::before {
    color: #ffffff !important;
}
**/


/** réglage de la phrase d'accroche **/
h1.phrase_accroche {
    font-family: 'Lobster Two', cursive;
	color: #fff !important;
	font-size: 2.95rem !important;
	line-height: 1em !important;
	font-style: italic !important;
}
h1.phrase_accroche.taupe {
    color: #65575f !important;	/* taupe */
}
@media only screen and (max-width: 980px) { 	/* tablette et smartphone */
h1.phrase_accroche.taupe br {display: none;}
}
@media only screen and (min-width: 981px) { 	/* bureau */
h1.phrase_accroche.taupe {margin-bottom: 2rem;}
}

@media only screen and (max-width: 767px) { 	/* smartphone */
	h1.phrase_accroche {font-size: 1.5rem !important;}
}

/* réglage du bloc phrase d'accroche */
#phrase-accroche-module.et_pb_testimonial {
	background-color: transparent !important;
	margin-top: 30px !important;
}

/* réglage de l'interlignage du texte de la phrase d'accroche */
#phrase-accroche-module.et_pb_testimonial_description p {
	line-height: 1.7em !important;
}

/* réglage du petit rond avec le guillemet (au dessus de la phrase d'accroche) */
#phrase-accroche-module.et_pb_testimonial::before {
    position: absolute;
    z-index: 2;
    top: -103px !important;
    left: 50%;
    margin-left: -24px;
    -webkit-border-radius: 31px;
    -moz-border-radius: 31px;
    border-radius: 31px;
    background: #c7b7c0 !important;
    color: #fff !important;
    font-size: 48px;
    content: "\7c";
}

@media only screen and (min-width: 981px) { /* bureau */
	#photo-isabelle-home-alt {
		max-width: 320.4px !important;
	}
}


/**
    font-family: 'Dancing Script', cursive;

    font-family: 'Montez', cursive;

    font-family: 'Clicker Script', cursive;

    font-family: 'Lobster Two', cursive;

**/




h1.phrase_accroche-choix-police-jess {
    font-family: 'Montez', cursive;
	color: #fff !important;
	font-size: 3.25rem !important;
	line-height: 1em !important;
	font-style: italic !important;
}

@media only screen and (max-width: 767px) { 	/* smartphone */
	h1.phrase_accroche-choix-police-jess {font-size: 1.5rem !important;}
}


/* section sous la phrase d'accroche (3 blocs navagation) - largeur modules = 100% - texte = centré */
.blocs-navigation-home {
	width: 100% !important;
}
.blocs-navigation-home p {
	text-align: center;
}






/*** ---------------------------------------------------------------------------------------------------------- ***/
/*** ---------------------------------------------------------------------------------------------------------- ***/
/***** ------------------------------------ 7) réglages des autres pages ------------------------------------ *****/
/*** ---------------------------------------------------------------------------------------------------------- ***/
/*** ---------------------------------------------------------------------------------------------------------- ***/



/*** ------------------------------------------------------------ ***/
/*** 7.1) réglages des éléments des pages Conseil et A propos ***/
/*** ------------------------------------------------------------ ***/

/* réglage du bloc Témoignage sur la page Conseil en image et Soin de support : pour annuler la margin-top de 45px */
.et_pb_testimonial.temoignage-page-conseil {
	margin-top: 0 !important;	
}

/* les lignes (row) des pages Conseil et A propos sont réglées à max 874px de large... et on touche à rien d'autre (width, margin, etc), comme ça les proportions restent toujours harmonieuses, et le responsive se passe bien ;-) */
#ligne-pages-conseil-apropos {
	max-width: 874px !important;
}






/*** ------------------------------------------------------------ ***/
/*** 7.2) réglages des éléments de la page Avant-Après ***/
/*** ------------------------------------------------------------ ***/

/* hauteur de ligne du paragraphe après un H6 */
h6+p {    
	line-height: 1.25em !important;
}


/*
@media only screen and (max-width: 767px) {  ***largeur et hauteur de l'image "AVANT" (qui est située dans un <a>, lui-même situé dans un <h4>) // réglage smartphone // plus besoin de ce code, car j'ai fait 2 modules séparés, comme pour la page Contact***
	h4>a>img,
	h4>img {
		width: 120px !important;
		height: 120px !important;
	}
} 
*/

/* réglage des blocs Témoignages */
.et_pb_testimonial {
	background-color: #e6e6e6 !important;
	margin-top: 45px !important;
}

.module-texte-profil-cliente {
	min-height: 150px !important;
}

/* réglage de l'interlignage du texte des Témoignages (dans l'encadré gris) */
.et_pb_testimonial_description p {
	line-height: 1.7em !important;
}

/* réglage du petit rond avec le guillemet (au dessus du témoignage) */
.et_pb_testimonial::before {
    position: absolute;
    z-index: 2;
    top: -16px !important;
    left: 50%;
    margin-left: -16px;
    -webkit-border-radius: 31px;
    -moz-border-radius: 31px;
    border-radius: 31px;
	background: #e6e6e6 !important;
    font-size: 32px;
    content: "\7c";
}

.et_pb_testimonial_description_inner a {
	color: #ab93a0 !important;
	font-weight: 700 !important;
	font-style: normal !important;
}

/* pour éliminer la ligne "auteur" en dessous du bloc témoignage (qui de toutes façons est vide) */
.et_pb_testimonial_author {
    display: none !important;
}






/*** ------------------------------------------------------------ ***/
/*** 7.3) réglages des éléments de la page BLOG ***/
/*** ------------------------------------------------------------ ***/

/** réglages du "contenant" de l'image, pour lui imposer de rester toujours carré */
#images-module-blog-3lignes .et_pb_image_container {
    background-color: transparent;
    width: 100%;
    padding-top: 100%; /* 1:1 Aspect Ratio */
    position: relative; /* If you want image inside of it ---> */
}

/* ---> If you want image inside of the container */
#images-module-blog-3lignes .et_pb_blog_grid .et_pb_image_container a {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
}

/** réglages du "contenu" du container (donc, l'image quoi ^^), pour lui dire de remplir tout l'espace */
#images-module-blog-3lignes .et_pb_blog_grid .et_pb_image_container img {
	min-height: 100% !important; /*height of parent container*/
	max-height: 100% !important; /*height of parent container*/
	width: auto;  /*width of parent container*/
	object-fit: cover;
}

/** annuler la margin-bottom de l'image (originalement à 30px ***) (voir ligne 7145 fichier style.dev_divi_parent.css), sinon ça fait pas carré */
#images-module-blog-3lignes .et_pb_post .entry-featured-image-url {
    margin-bottom: 0px !important;
}

/** marges autour de ces images (voir ligne 7276 fichier style.dev_divi_parent.css) */
#images-module-blog-3lignes .et_pb_image_container {
    margin: -10px 0px 0px;;
}

@media only screen and (max-width: 980px) { /* tablette et smartphone */
	#images-module-blog-3lignes .et_pb_image_container {
    	margin: -10px 0px -15px;;
	}
}

#images-module-blog-3lignes h2 {
	font-size: 1.5rem !important;
	line-height: 1.2em !important;
	padding-bottom: 0.125em !important;	
	margin-top: 20px !important; /* et du coup j'ajoute une marge *** au dessus du titre, pour compenser la margin-bottom de l'image que j'ai mise à 0px à la ligne 549 */
}

.et_pb_post p.post-meta {
    margin-bottom: 0.75rem !important;
    font-size: 0.875rem !important;
}

@media only screen and (max-width: 767px) { /* smartphone */
	#images-module-blog-3lignes h2 {
		font-size: 1.25rem !important;
		line-height: 1.2em !important;
		margin-top: 30px !important;
	}
	.et_pb_post p.post-meta {
		font-size: 0.75rem !important;
	}
	#images-module-blog-3lignes .post-content p {
		font-size: 0.925rem !important;
	}
}



a.more-link {
    display: block;
    clear: both;
    margin-top: 0px !important;
    text-align: right !important;
    font-weight: 600 !important;
	color: #ab93a0 !important;
}

/* imposer une hauteur fixe aux blocs de la page Blog, comme ça quelle que soit la longueur du titre de l'Article (qui par défaut décalle tout vers le bas), la "grille" des articles reste toujours bien alignée */
@media only screen and (min-width: 768px) { /* bureau et tablette */
	.et_pb_blog_grid .et_pb_post {
		height: 650px !important;
	}
}
@media only screen and (max-width: 767px) { /* smartphone */
	.et_pb_blog_grid .et_pb_post {
		height: auto !important;
	}
}






/*** ------------------------------------------------------------ ***/
/*** 7.4) réglages des éléments des pages d'ARTICLES (blog) ***/
/*** ------------------------------------------------------------ ***/

/** réglages textes et images **/
.et_post_meta_wrapper > h1 {	/* titre de l'article */
	text-align: left !important;
	padding-bottom: 0.5em !important;
	margin-top: 0 !important;	/* pour annuler la margin-top: 1rem que j'ai mise sur le H1 (titres des pages du site) */
}

.et_post_meta_wrapper > img {	/* image à la une de l'article */
	max-height: 800px !important;
	width: auto;
}

h1#comments.page_title {	/* h1 "XX commentaires" */
	font-size: 1.5rem !important;
	text-align: left !important;
	padding-bottom: 0.5em !important;
}

h3#reply-title.comment-reply-title {	/* h3 "Poster le commentaire" */
	font-size: 1.5rem !important;
}


/** réglages padding boutons Facebook */
.sfsiaftrpstwpr {
    width: 100%;
    float: left;
    line-height: 1.125rem;
    margin: 0;
    padding-top: 1.5rem !important;
    padding-bottom: 3rem !important;
}


/** réglages liens et titres des 2 menus dans le aside (page BLOG) */
.et_pb_widget a,
.et_pb_widget li a{
	color: #ab93a0;	/* taupe */
    text-decoration: none;
}

.et_pb_widget a:hover,
.et_pb_widget li a:hover {
    color: #ab93a0;	/* taupe */
	font-weight: 700 !important;
}

span.reseaux-sociaux-aside {
	font-size: 1.5rem !important;
}

h4.widgettitle {
	font-size: 1.125rem !important;
	line-height: 1.25em !important;
	padding-top: 1em !important;
	padding-bottom: 1em !important;
}

/* titre "Articles récents" : comme c'est un widget à part entière (séparé du widget qui affiche la liste des derniers articles) --> margin-bottom idem que padding-bottom des h4.widgettitle / padding-bottom du h4 à 0... pour avoir le même rendu que dans les autres widget */
#sidebar #block-3 {margin-bottom:1.125rem !important;}
#sidebar #block-3 h4 {padding-bottom:0 !important;}


/*** réglages de la div contenant le bouton Partager (Facebook) - plugin Social Warfare ***/
.swp_social_panel:not(.nc_floater):not(.swp_social_panelSide) {
    max-width: 25% !important;
	float: right !important;
}
.swp_social_panel:not(.swp_social_panelSide) .total_shares.total_sharesalt .swp_count {
	min-width: 50px !important;
}
.swp_social_panel:not(.nc_floater):not(.swp_social_panelSide) a {
    color: #ffffff !important;	/* blanc */
}




/*** ------------------------------------------------------------ ***/
/*** 7.5) réglages des éléments de la page CONTACT ***/
/*** ------------------------------------------------------------ ***/

.et_contact_bottom_container {
    margin-top: 1rem;
}




/*** ------------------------------------------------------------ ***/
/*** 7.6) réglages des éléments de la page ÉVÉNEMENTS ***/
/*** ------------------------------------------------------------ ***/

/*** FONCTIONS JS: display none sur les blocs "détails events", puis on les affiche au besoin (module code dans la page ÉVÉNEMENTS) ***/
#section_detail_event_1,
#section_detail_event_2,
#section_detail_event_3,
#section_detail_event_4,
#section_detail_event_5 {
	display: none;
}
#section_code_js.et_pb_section,
#section_code_js.et_pb_section .et_pb_row {
	padding: 0 !important;
}

@media only screen and (min-width: 981px) { /* bureau */
	.section_detail_event .et_pb_module.et_pb_text {
		column-count: 2;	/* contenu réparti sur 2 colonnes */
	}
	.section_detail_event {
		padding-top: 5rem !important;
	}
}

/* forcer l'affichage sur 2 colonnes sur tablette */
@media only screen and (min-width: 768px) and (max-width: 980px) {		/* tablette uniquement */
	.section_event .et_pb_column_1_3 {
		width: 36.7% !important;
		margin-right: 5.5% !important;
	}
	.section_event .et_pb_column_2_3 {
		width: 57.8% !important;
		margin-right: 0 !important;
	}
}

#events_passes .et_pb_column_1_3 {
	width: 14.5% !important;
	margin-right: 5.5% !important;
}
#events_passes .et_pb_column_2_3 {
	width: 80% !important;
	margin-right: 0 !important;
}
#events_passes h2 {
	margin-bottom: 3rem !important;
}
@media only screen and (max-width: 767px) { /* smartphone */
	#events_passes .et_pb_column_1_3 {width: 34.5% !important;}
	#events_passes .et_pb_column_2_3 {width: 60% !important;}
	#events_passes h2 {margin-bottom: 1.5rem !important;}
}

/* séparateur avant chaque section "année" */
#events_passes .et_pb_divider {
	height: 3px;
	margin-bottom: 3rem !important;
}
#events_passes .et_pb_divider::before {
  content: "";
  width: 10%;
  height: 1px;
  border-top: 3px solid #65575f !important;	/* taupe */
  position: absolute;
  left: 50%;
  transform: translatex(-50%);
  top: 0;
  z-index: 10;
}

@media only screen and (max-width: 980px) { /* tablette et smartphone */
	#events_passes.et_pb_section,
	#events_passes.et_pb_section .et_pb_row {
		padding-top: 0 !important;
	}
}




/*** ------------------------------------------------------------ ***/
/*** 7.7) réglages des éléments de la page PARTENAIRES ***/
/*** ------------------------------------------------------------ ***/

#logo_partenaire img  {
	max-height: 100px !important;
	width: auto;
  	max-width: 200px;
  	height: auto;
}

@media only screen and (min-width: 981px) {
	body.page-id-15797 .et_pb_section:nth-child(2n + 1) .et_pb_row { display: flex; }
	body.page-id-15797 .et_pb_section:nth-child(2n + 1) .et_pb_row .et_pb_column_2_3 { order: 2; margin-right: 0 !important; }
	body.page-id-15797 .et_pb_section:nth-child(2n + 1) .et_pb_row .et_pb_column_1_3 { order: 1; margin-right: 5.5% !important; }
	
	body.page-id-15797 .et_pb_section .et_pb_row .et_pb_column_1_3,
	body.page-id-15797 .et_pb_section .et_pb_row .et_pb_column_2_3 { margin-top: 2rem !important; }
	
	body.page-id-15797 .et_pb_section:nth-child(2n + 1) .et_pb_row .et_pb_column_1_3 #logo_partenaire {text-align: right !important;}
	body.page-id-15797 .et_pb_section:nth-child(2n) .et_pb_row .et_pb_column_1_3 #logo_partenaire {text-align: left !important;}

	/* body.page-id-15797 .et_pb_divider {display: none;} */
}

@media only screen and (max-width: 980px) {
	#logo_partenaire {margin-top: 2rem !important;}
}




/*** ---------------------------------------------------------------------------------------------------------- ***/
/*** ---------------------------------------------------------------------------------------------------------- ***/
/***** ------------------- 8) réglages d'éléments spéciaux (utilisés sur plusieurs pages) ------------------- *****/
/*** ---------------------------------------------------------------------------------------------------------- ***/
/*** ---------------------------------------------------------------------------------------------------------- ***/



/*** ------------------------------------------------------------ ***/
/*** 8.1) inversion ordre des colonnes "paires" (pages Conseil, Prestations, A propos) ***/
/*** ------------------------------------------------------------ ***/

/** swap = échanger **/
/** la classe CSS "column-swap" doit être ajoutée dans les Paramétrages de Ligne Module (onglet Avancé) = le bloc qui contient les 2 colonnes! et non dans les Paramétrages de Texte Module ^^ **/
/** la classe CSS "column-swap" doit être ajoutée uniquement dans les colonnes paires (2, 4, 6, etc) ^^ **/

@media only screen and (min-width: 981px) {
	.column-swap { display: flex; }
	.column-swap .et_pb_column:first-child { order: 2; margin-right: 0 !important; }
	.column-swap .et_pb_column:last-child { order: 1; margin-right: 5.5% !important; }
}


/*** ------------------------------------------------------------ ***/
/*** 8.2) réglages galeries images (carrées) ***/
/*** ------------------------------------------------------------ ***/

/** réglages du "contenant" de l'image, pour lui imposer de rester toujours carré **/
.et_pb_gallery {
    background-color: transparent !important;
    width: 100%;
    padding-top: 100% !important; /* 1:1 Aspect Ratio */
    position: relative; /* If you want image inside of it ---> */
}

/** ---> If you want image inside of the container **/
.et_pb_gallery_items {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
}


/** réglages pour les images des galeries des pages Prestations et Avant-Après
// réglages pour TABLETTE ET SMARTPHONE **/

@media only screen and (max-width: 981px) { /* tablette et smartphone */
	
	/* réglages du "contenu" du container (donc, l'image quoi ^^), pour lui dire de remplir tout l'espace */
	#galeries-prestations .et_pb_gallery_image img,
	#galeries-temoignages .et_pb_gallery_image img {
		min-width: 100% !important; /*height of parent container*/
		max-width: 100% !important; /*height of parent container*/
		height: auto !important;  /*width of parent container*/
		object-fit: cover !important;
	}
	
	/* réglages pour que l'image (contenu) soit centrée verticalement dans le container */
	/* source: https://www.divi-community.fr/snippets-divi/centrer-du-contenu-verticalement/ */
	#galeries-prestations .et_pb_gallery_items,
	#galeries-temoignages .et_pb_gallery_items {
	  display: flex;
	  flex-direction: column;
	  justify-content: center;
	  display: -webkit-box;
	  display: -webkit-flex;
	  display: -moz-box;
	  display: -ms-flexbox;
	  -webkit-box-orient: vertical;
	  -webkit-box-direction: normal;
	  -webkit-flex-direction: column;
		 -moz-box-orient: vertical;
		 -moz-box-direction: normal;
		  -ms-flex-direction: column;
	  -webkit-box-pack: center;
	  -webkit-justify-content: center;
		 -moz-box-pack: center;
		  -ms-flex-pack: center;
	}

}


/** réglages pour les images des galeries des pages Prestations et Avant-Après
// réglages pour ORDI **/

@media only screen and (min-width: 981px) { /* bureau */
	
	/* réglages du "contenu" du container (donc, l'image quoi ^^), pour lui dire de remplir tout l'espace */
	#galeries-prestations .et_pb_gallery_item,
	#galeries-temoignages .et_pb_gallery_item {
		min-height: 100% !important; /*height of parent container*/
		max-height: 100% !important; /*height of parent container*/
		width: auto !important;  /*width of parent container*/
		object-fit: cover !important;
		vertical-align: middle !important;
	}

	/* IMAGES GALERIES PRESTATIONS : on spécifie les dimensions de l'image (contenu), pour qu'elles soient équivalentes aux dimensions du container */
	#galeries-prestations .et_pb_gallery_image img {
		width: 320.4px !important;  /*width of parent container*/
		height: 320.4px !important; /*height of parent container*/
		object-fit: cover !important;
		position: relative;
	}

	/* IMAGES GALERIES AVANT-APRES : on spécifie les dimensions de l'image (contenu), pour qu'elles soient équivalentes aux dimensions du container */
	#galeries-temoignages .et_pb_gallery_image img {
		width: 510px !important;  /*width of parent container*/
		height: 510px !important; /*height of parent container*/
		object-fit: cover !important;
		position: relative;
	}
}


/** réglages pour les images des galeries des pages "Témoignages trop longs"
// réglages pour ORDI
// (j'ai appliqué ces réglages pour avoir le même cadrage que sur la page Avant-Après) **/

@media only screen and (min-width: 981px) { /* bureau */
	
	/* réglages du "contenu" du container (donc, l'image quoi ^^), pour lui dire de remplir tout l'espace */
	#galeries-temoignages-trop-longs .et_pb_gallery_image img {
		min-width: 100% !important; /*height of parent container*/
		max-width: 100% !important; /*height of parent container*/
		height: auto !important;  /*width of parent container*/
		object-fit: cover !important;
	}
	
	/* réglages pour que l'image (contenu) soit centrée verticalement dans le container */
	#galeries-temoignages-trop-longs .et_pb_gallery_items {
	  display: flex;
	  flex-direction: column;
	  justify-content: center;
	  display: -webkit-box;
	  display: -webkit-flex;
	  display: -moz-box;
	  display: -ms-flexbox;
	  -webkit-box-orient: vertical;
	  -webkit-box-direction: normal;
	  -webkit-flex-direction: column;
		 -moz-box-orient: vertical;
		 -moz-box-direction: normal;
		  -ms-flex-direction: column;
	  -webkit-box-pack: center;
	  -webkit-justify-content: center;
		 -moz-box-pack: center;
		  -ms-flex-pack: center;
	}

}


/** pour masquer les petits points de défilement en bas des images (car selon les photos, le résultat était vraiment affreux, genre... sur les dents!) --> en fait j'ai remis, après avoir réussi à faire les galeries bien carrées... comme ça on voit plus facilement qu'il y a d'autres photos!
.et-pb-controllers {
    display: none !important;
}
**/






/*** ------------------------------------------------------------ ***/
/*** 8.3) réglages des modules Bascule (page Prestations) ***/
/*** ------------------------------------------------------------ ***/

/** réglages du padding des modules **/
.et_pb_toggle {
    padding: 0px !important;
	margin-bottom: 2.25% !important;
}
/** réglages de la couleur du texte "descriptif" dans les modules **/
.et_pb_toggle_content p {
	color: #787878 !important;
}

.et_pb_toggle > h5:hover {
	color: #666 !important;
	font-weight: 700 !important;
}

.et_pb_toggle_title::before {
    font-size: 20px;  /* taille du petit picto "+" (taille d'origine = 16px) */
	color: #65575f !important;
}




/*** ------------------------------------------------------------ ***/
/*** 8.4) réglages du popup pour promo eBook ***/
/*** ------------------------------------------------------------ ***/


/* réglage de la croix pour fermer le popup */
.overlay-container .overlay-close {
    width: auto;
    height: auto;
    display: block;
    position: absolute;
    right: 10px;
    top: 10px;
    overflow: hidden;
    border: none;
    outline: none;
    z-index: 99991;
    font-size: 100px !important;
    line-height: 60px !important;
    min-height: 15px;
    min-width: 15px;
    color: #fdfdfd !important;	/* gris très clair */
    background-color: transparent;
    font-family: inherit;
    font-weight: 300 !important;
}

/* réglages généraux */
@media only screen and (min-width: 981px) { /* bureau */
	.et-db #et-boc .et-l #popup_ebook.et_pb_row_dov_15889_1 {
		transform: translateX(-50%) translateY(50%) !important;
		padding: 2rem !important;
	}
	.et-db #et-boc .et-l #popup_ebook.et_pb_row_dov_240953_1 {
		transform: translateX(-50%) translateY(35%) !important;
		padding: 2rem !important;
	}
}
.phrase_accroche.taupe.popup {
	font-size: 2rem !important;
}

/* réglages du bouton dans le popup */
/* une partie est configurée dans "réglages des boutons" - lignes 158ss */
#popup_ebook .et_pb_button {
	min-width: initial !important;
	position: relative !important;
	left: 50% !important;
	transform: translateX(-50%) !important;
}    

/* réglages MOBILE */
@media only screen and (max-width: 980px) { /* tablette et smarphone */
	#popup_ebook.et_pb_row {
		margin-top: 10vh !important;	/* descendre le popup */
	}
	#popup_ebook.et_pb_row {
		max-width: 630px !important;	/* largeur max du popup */
		padding: 1.25rem !important;	/* réduire les marges internes */
	}
	#popup_ebook.et_pb_row .et_pb_column {
		margin-bottom: 0 !important;	/* réduire l'espace sous le bouton */
	}
	#popup_ebook .et_pb_button_module_wrapper > a {
    	font-size: 1rem !important;		/* font-size bouton */
	}
}

/* forcer l'affichage sur 2 colonnes sur tablette */
@media only screen and (min-width: 768px) and (max-width: 980px) {		/* tablette uniquement */
	#popup_ebook .et_pb_column_2_5 {
		width: 36.7% !important;
		margin-right: 5.5% !important;
	}
	#popup_ebook .et_pb_column_3_5 {
		width: 57.8% !important;
		margin-right: 0 !important;
	}
	#popup_ebook.et_pb_row.et_pb_equal_columns {
  		display:-webkit-box;
  		display:-ms-flexbox;
  		display:flex;
  		direction:ltr
 	}
}

@media only screen and (max-width: 767px) { /* smarphone */
	#popup_ebook img {
		margin-bottom: 1rem !important;
	}
}

/* centrer verticalement le contenu des 2 colonnes */
.centrer-verticalement {
  display: flex;
  flex-direction: column;
  justify-content: center;
/* Et les déclinaisons avec préfixes pour obtenir un résultat homogène sur les divers navigateurs  */
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
     -moz-box-orient: vertical;
     -moz-box-direction: normal;
      -ms-flex-direction: column;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
     -moz-box-pack: center;
      -ms-flex-pack: center;
}


/*** réglages de la section eBook (page Prestations) ***/
/* séparateur entre cette section et le contenu "normal" de la page */
#section_ebook .et_pb_divider {
	height: 3px;
	margin-bottom: 3rem !important;
}
#section_ebook .et_pb_divider::before {
  content: "";
  width: 10%;
  height: 1px;
  border-top: 3px solid #65575f !important;	/* taupe */
  position: absolute;
  left: 50%;
  transform: translatex(-50%);
  top: 0;
  z-index: 10;
}


/*** réglage du bloc de texte contenant le lien de téléchargement ***/
#section_ebook .with_frm_style .frm_message, .frm_success_style {
  margin: 5px 0 15px;
  border: 1px solid #c8b9c1 !important;	/* taupe 65% */
  background-color: #d5c9cf !important;	/* taupe 50% */;
  color: #fff !important;
  border-radius: 0 !important;
}
#section_ebook .with_frm_style .frm_message p {
  	color: #fff !important;
	font-weight: bold !important;
}
#section_ebook .frm_message a.lien_ebook {
	font-weight: bold !important;
	font-size: 1.5rem !important;
	line-height: 1.4em !important;
	color: #65575f !important;
	padding-left: 40px !important;
}
#section_ebook .frm_message a.lien_ebook:before {
	font-family: ETmodules !important; 
	content: "A" !important;
	line-height: inherit;
	font-size: 2rem !important;
	font-weight: 400 !important;
	color: #65575f !important;
	opacity: 1;
	margin-left: -40px;
	display: inline-block;
	position: absolute;
}
#section_ebook .frm_message a.lien_ebook span {
	text-decoration: underline !important;
}
#section_ebook .frm_message a.lien_ebook:hover span {
	text-decoration: none !important;
}






/*** ---------------------------------------------------------------------------------------------------------- ***/
/*** ---------------------------------------------------------------------------------------------------------- ***/
/***** ---------------------------------- 10) réglages du pop-up COOKIEBOT ---------------------------------- *****/
/*** ---------------------------------------------------------------------------------------------------------- ***/
/*** ---------------------------------------------------------------------------------------------------------- ***/

@media only screen and (min-width: 981px) { /* bureau */
	#CybotCookiebotDialogBody {			/* largeur du pop-up sur ORDI */
		max-width: 60% !important;
	}
}

#CybotCookiebotDialog {		/* background-color du pop-up sur ORDI + TABLETTE */
	background: rgba(255, 255, 255, 0.85) !important;
}

#CybotCookiebotDialogBodyContentText {	/* font-size du texte "Les cookies nous permettent de ..." */
	font-size: 12px !important;
	text-align: justify !important;
}

#CybotCookiebotDialogDetail {		/* background-color de "Afficher les détails" */
    background-color: rgba(255, 255, 255, 0) !important;	/* opacité 0%, sinon ça se superpose */
    padding-top: 20px !important;
}

@media only screen and (min-width: 981px) { /* bureau */
	#CybotCookiebotDialogDetailBody {	/* largeur de "Afficher les détails" sur ORDI */
		max-width: 60% !important;
	}
}

#CybotCookiebotDialogDetailBodyContentTextAbout p {	/* font-size du texte dans Afficher les détails --> onglet "A propos des cookies" */
	font-size: inherit;
}

@media only screen and (max-width: 767px) { /* smartphone */
	#CybotCookiebotDialog, #CybotCookiebotDialogDetail {	/* background-color du pop-up sur SMARTPHONE */
		background: rgba(255, 255, 255, 0.92) !important;
	}
}

/** réglages des boutons **/
#CybotCookiebotDialogBodyButtonDecline {		/* couleur du bouton "Utiliser uniquement les cookies nécessaires" */
    background-color: #666666 !important;
    border: 1px solid #666666 !important;
}
#CybotCookiebotDialogBodyButtonAccept {			/* couleur du bouton "Autoriser tous les cookies" */
    background-color: #8eb521 !important;
    border: 1px solid #8eb521 !important;
}
#CybotCookiebotDialogBodyButtons {
	padding-left: 62px !important;	
}
@media only screen and (max-width: 767px) { /* smartphone */
	#CybotCookiebotDialogBodyButtons {
	padding-left: 34px !important;	
	}
}

/** remplacer le logo original de Cookiebot par le mien **/
/* mettre une background-image dans la div qui contient normalement le logo */
#CybotCookiebotDialogPoweredbyLink {
    position: absolute;
    z-index: 2147483646;
    width: 72px !important;
    height: 60px !important;
    margin-left: 0px !important;
    margin-right: 0;
    margin-top: 12px !important;
    background-image: url(https://bubulgum.com/img/cookie_picto.png);
	background-position: center; /* image au centre */
  	background-repeat: no-repeat; /* ne pas répéter l'image */
  	background-size: cover; /* redimensionner la background-image pour la faire correspondre au conteneur */
}
@media only screen and (max-width: 767px) { /* smartphone */
	#CybotCookiebotDialogPoweredbyLink {
		width: 48px !important;
		height: 40px !important;
	}
	#CybotCookiebotDialogBodyContent {
    padding-left: 52px !important;
	}
}
/* masquer le logo original avec une display none */
#CybotCookiebotDialogPoweredbyImage {
    border: none;
    padding: 0;
    margin: 2px 0 0 3px;
    width: 46px;
    display: none;
}


/** réglages des liens + h4 dans les pages Politique de confidentialité (id-15750) + Mentions légales (id-15762) **/
/** PAGE ID à MODIFIER !!!! **/

.page-id-15750 p > a,
.page-id-15762 p > a {
	color: #ab93a0 !important;		/* taupe */
}

.page-id-15750 h4,
.page-id-15762 h4 {
	padding-bottom: 10px !important;
	margin-top: 30px !important; 
}
.page-id-15750 h1,
.page-id-15762 h1 {
	margin-top: 30px !important; 
	text-align: left !important;
}

@media only screen and (max-width: 767px) { /* smartphone */
	.page-id-15750 .et_pb_section:first-child > .et_pb_row,
	.page-id-15762 .et_pb_section:first-child > .et_pb_row {
		padding: 0 !important;
		width: 80% !important;
	}
	.page-id-15750 p,
	.page-id-15750 p > a,
	.page-id-15762 p,
	.page-id-15762 p > a {
		font-size: 0.875rem !important;
	}
}

#CookieDeclarationUserStatusPanel a,
a.modifier-consentement {
	color: #ab93a0 !important;		/* taupe */
	font-weight: bold !important;
	font-size: 1rem !important;
	line-height: 3em !important;
}

a.cookies-links {
	color: #ab93a0 !important;		/* taupe */
	font-weight: bold !important;
}

/* réglages ligne hr insérée en bas des pages Politique de confidentialité + Mentions légales */
hr.ligne-pdc-ml {
	border: 0.25px solid rgba(171,147,160, 0.34) !important;		/* taupe à 34% d'opacité */
}