/*
 Theme Name:     Divi Child
 Theme URI:      https://www.elegantthemes.com/gallery/divi/
 Description:    Divi Child Theme
 Author:         Elegant Themes
 Author URI:     https://www.elegantthemes.com
 Template:       Divi
 Version:        1.0.0
*/


/* =Theme customization starts here
------------------------------------------------------- */
/***************lire plus**************/

 details{
  display:inline;
}

details {
  position:relative;
}

details summary {
 color: #BB2B1B;
    display: block;
    cursor: pointer;
    font-size: 16px !important;
    font-weight: 500;
 padding-top: 10px;
}

details summary:focus {
  outline:none;
}

details[open] {
  display:block;
  padding-bottom:25px;
  /*padding-top:10px;*/
  animation: open .2s linear;
}

details[open] summary {
  position:absolute;
  bottom: 0;
  left:0;
}

details[open] #close {
    position: relative;
    top: 10px;
}

details #open{padding-left:5px;text-align:center;}

/*details #open:after{
 display: inline-block;
    position: relative;
    top: 1px;
    margin-left: 8px;
    content: '\e867';
    font-family: "mfn-icons";
}*/

details #open.arrow_carrot-right:after {
    font-family: 'ETmodules';
    display: inline-block;
    position: relative;
    top: 1px;
    margin-left: 8px;
    content: "\35";
}
details #close.arrow_carrot-right:after {
    font-family: 'ETmodules';
    display: inline-block;
    position: relative;
    top: 1px;
    margin-left: 8px;
    content: "\35";
    transform: rotate(-90deg);
}
 details #close:after {
    display: inline-block;
    position: relative;
    top: 0px;
    margin-left: 10px;
    content: '\e867';
    font-family: "mfn-icons";
    transform: rotate(180deg);
}

details[open] #open{display:none;}

details #close{display:none;}

details[open] #close{display:block;}

::-webkit-details-marker {display: none;}

@keyframes open {
  0% {
    opacity: 0;
    transform: translateY(-10px);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
/*Fin lire plus*/

/******************** Menu footer ********************/
.menu-vertical {
	list-style: none !important;
	padding: 0 !important;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
	width: fit-content; /* ou 100% si tu veux prendre toute la largeur */
}

.menu-vertical li a {
	display: block;
	padding: 8px 12px;
	background-color: #e0e0e0;
	color: #333;
	text-decoration: none;
	border-radius: 4px;
	position: relative;
	transition: background-color 0.3s ease, color 0.3s ease;
	overflow: hidden;
}

.menu-vertical li a::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 0%;
	height: 3px;
	background-color: #fcc700;
	transition: width 0.3s ease;
}

.menu-vertical li a:hover {
	background-color: #fcc700;
	color: #000;
}

.menu-vertical li a:hover::after {
	width: 100%;
}

/****************** fin de style menu *********************/
.commande a {
    padding: 12px 12px !important;
    background-color: #fcc700;
}

/********************* respo ************************/
@media only screen and (max-width: 980px) and (min-width: 768px){
	.disp {
		display: block !important;
		height: 400px !important;
	}
	.none {
		display: none !important;
	}
	.commande a {
    width: 30% !important;
	padding: 8px 12px !important;
}
}

@media only screen and (max-width: 767px){
	.disp {
		display: block !important;
		height: 222px !important;
	}
	.none {
		display: none !important;
	}
	.commande a {
    	width: 60% !important;
		padding: 5px 12px !important;
}
	.text {
    margin-top: -34px !important;
}


}
@media only screen and (min-width: 981px){
	.flex {
		flex-direction: row-reverse !important;
	}
}
/*******************************************/
.fixed-button.btn-facebook {
    position: fixed;
    bottom: 370px;
    right: 0px;
    background-color: #fcc700;
    color: white;
	font-size: 26px !important;
    padding: 14px 17px;
    border-radius: 50px;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 8px;
    z-index: 9999;
    font-weight: bold;
    box-shadow: 0 4px 6px rgba(0,0,0,0.2);
    transition: background-color 0.3s ease;
}

.fixed-button.btn-facebook:hover {
    background-color: #fdda57;
}

.fixed-button .icon-facebook {
    font-size: 18px;
}

/*****************commen en ligne *****************/
.btn-commande-en-ligne {
  position: fixed;
  bottom: 310px; /* un peu au-dessus du bouton Facebook */
  right: 0px;
  background-color: #fcc700; /* vert (modifiable) */
  color: white;
  font-size: 18px;
  padding: 12px 14px;
  border-radius: 50%;
  text-align: center;
  text-decoration: none;
  z-index: 1000;
  box-shadow: 0 4px 8px rgba(0,0,0,0.3);
  transition: background-color 0.3s ease;
}

.btn-commande-en-ligne:hover {
  background-color: #fdda57; /* vert plus foncé */
}