/*
Theme Name: Divi la Petite Boite
Description: Theme enfant de Divi par la Petite Boite
Author: Laurent Bouffort
Author URI: https://www.lapetiteboite.com
Template: Divi
Version: 2.0.0
*/


/* 
** CENTRER DU CONTENU VERTICALEMENT 

*/

.dc-centrer-verticalement {
	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;
}


/*
** INVERSER LE SENS DES COLONNES SUR MOBILE

*/

@media only screen and (max-width : 980px) {
	.dc-inverser-colonnes--section .dc-inverser-colonnes--ligne {
		display: -webkit-flex;
		display: -ms-flex;
		display: flex;
		-webkit-flex-direction: column-reverse;
		-ms-flex-direction: column-reverse;
		flex-direction: column-reverse;
	}
}


/*
** MENU MOBILE : en pleine largeur et le hamburger devient une croix pour fermer
*/

.et_mobile_menu {
	margin-left: -30px;
	padding: 5%;
	width: calc( 100% + 60px);
}

.mobile_nav.opened .mobile_menu_bar:before {
	content: "\4d";
}


/* 
** AUGMENTER LA LARGEUR CHAMP RÉSULTAT CAPTCHA 
** Parfois, suivant la taille du texte, certains chiffres du résultat sont masqués
*/
.et_pb_contact_right p input {
	max-width: 50px;
}


/*
** METTRE EXPOSANTS ET INDICES À LA BONNE TAILLE
** Généralement, ils sont bien trop gros…
*/
sup, sub {
    font-size: 70%;
}

/*** Forcer les majuscules, grammage et police du menu sur toutes les pages (le bundle CSS Divi varie selon le template) ***/
#top-menu > li > a {
	text-transform: uppercase;
	font-weight: 400;
	font-family: "Open Sans", Arial, sans-serif;
}

/*** Définir la largeur automatique du menu déroulant Divi ***/
@media only screen and (min-width: 981px) {
	.nav li ul {
		width: fit-content;
		display: flex;
		flex-direction: column;
	}

	.nav li li {
		white-space: nowrap;
	}

	.nav li li a {
		width: auto !important;
	}
}

/*** Logo : empêcher le chevauchement avec le menu aux résolutions intermédiaires ***/
/* Le logo_container est position:absolute sur toute la largeur du header ;
   pointer-events:none évite que la zone transparente bloque les clics sur le menu */
.logo_container {
	pointer-events: none;
}
.logo_container a {
	pointer-events: auto;
}

/* Sur les petits écrans desktop (981-1200px), le menu en majuscules (5 items)
   + le logo n'ont pas assez de place : on compresse les deux côtés pour éviter
   le chevauchement */
@media only screen and (min-width: 981px) and (max-width: 1200px) {
	#logo {
		max-height: 54% !important;
		height: 54% !important;
	}
	#top-menu > li > a {
		font-size: 13px !important;
	}
	#top-menu > li {
		padding-right: 18px !important;
	}
	#top-menu > li:last-child {
		padding-right: 0 !important;
	}
}

.wpforms-form button[type=submit] {
	background-color: #ff8100 !important;
	border-color: #ff8100 !important;
	color: #fff !important;
	transition: background 0.3s ease-in-out;
	}
	 
	.wpforms-form button[type=submit]:hover {
	background-color: #ff8100 !important;
	}
	
	

	/*ALIGNER A DROITE LES ELEMENTS DE LA BARRE DU HAUT */
	#et-info {
		float: right;
	}

	.floating {  
    animation-name: floating;
    animation-duration: 3s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
	margin:0 auto;
}


 
@keyframes floating {
    0% { transform: translate(0,  0px); }
    50%  { transform: translate(0, 15px); }
    100%   { transform: translate(0, -0px); }    
}

@media only screen and (max-width: 600px) {

.et-db #et-boc .et-l .et_pb_module div.wpforms-container .wpforms-form .wpforms-field-layout .wpforms-layout-column-50, .et-db #et-boc .et-l .et_pb_module div.wpforms-container .wpforms-form .wpforms-field-repeater .wpforms-layout-column-50 {
    width: 100% !important;
}


.et-db #et-boc .et-l .et_pb_module div.wpforms-container .wpforms-form .wpforms-field-layout .wpforms-layout-column-25, .et-db #et-boc .et-l .et_pb_module div.wpforms-container .wpforms-form .wpforms-field-repeater .wpforms-layout-column-25 {
    width: 100% !important;
}
	}

	/* Case CGV checkout */
.cgv-checkbox {
    margin: 20px 0 !important;
    padding: 15px;
    background: #FDFBF7;
    border: 1px solid #e0d9cf;
    border-radius: 6px;
}

.cgv-checkbox label {
    font-size: 14px;
    color: #333;
}

.cgv-checkbox a {
    color: #E66F27;
    text-decoration: underline;
    font-weight: 600;
}

.cgv-checkbox a:hover {
    color: #D4A853;
}

.cgv-checkbox .required {
    color: #E66F27;
}

/* ==========================================================================
   BADGE "RETRAIT SUR PLACE" — hero de la home (cliquable + pulse)
   ========================================================================== */
body.home #et-main-area .et_pb_section:first-of-type {
    position: relative;
}
.bb-home-badge {
    position: absolute;
    top: 60px;
    right: 24px;
    z-index: 10;
    display: inline-block;
    background: #ff8100;
    color: #fff !important;
    font-family: "Open Sans", Arial, sans-serif;
    font-weight: 700;
    font-size: 14px;
    line-height: 1;
    padding: 12px 20px;
    border-radius: 999px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.28);
    text-transform: uppercase;
    letter-spacing: 0.4px;
    text-decoration: none !important;
    animation: bb-badge-pulse 1.6s ease-in-out infinite;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.bb-home-badge:hover {
    transform: scale(1.06);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
    color: #fff !important;
}
@keyframes bb-badge-pulse {
    0%, 100% {
        box-shadow: 0 4px 14px rgba(0, 0, 0, 0.28), 0 0 0 0 rgba(255, 129, 0, 0.7);
    }
    50% {
        box-shadow: 0 4px 14px rgba(0, 0, 0, 0.28), 0 0 0 14px rgba(255, 129, 0, 0);
    }
}
@media only screen and (max-width: 600px) {
    .bb-home-badge {
        top: 32px;
        right: 12px;
        font-size: 11px;
        padding: 8px 14px;
    }
}
@media (prefers-reduced-motion: reduce) {
    .bb-home-badge {
        animation: none;
    }
}

/* ==========================================================================
   MENU — bouton "Contact" mis en valeur (fond orange)
   ========================================================================== */

#top-menu li.menu-item-1263 > a,
#et-top-navigation .menu-item-1263 > a,
.et_pb_menu li.menu-item-1263 > a,
nav .menu-item-1263 > a {
    background-color: #d4801a !important;
    color: #ffffff !important;
    padding: 8px 22px !important;
    border-radius: 6px !important;
    display: inline-block !important;
    line-height: 1.2 !important;
    font-weight: 700 !important;
    letter-spacing: 0.3px !important;
    transition: background-color 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease !important;
    box-shadow: 0 2px 6px rgba(212,128,26,0.25);
}

#top-menu li.menu-item-1263 > a:hover,
#et-top-navigation .menu-item-1263 > a:hover,
.et_pb_menu li.menu-item-1263 > a:hover,
nav .menu-item-1263 > a:hover {
    background-color: #a85a00 !important;
    color: #ffffff !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 10px rgba(212,128,26,0.35);
}

/* Divi ajoute un padding en haut du <li> qui décentre le bouton — on compense */
#top-menu li.menu-item-1263,
#et-top-navigation .menu-item-1263,
.et_pb_menu li.menu-item-1263,
nav .menu-item-1263 {
    display: inline-flex;
    align-items: center;
}

/* Sur mobile (menu déroulant Divi), on garde un rendu bouton plus discret */
@media (max-width: 980px) {
    #mobile_menu li.menu-item-1263 > a,
    .et_mobile_menu li.menu-item-1263 > a {
        background-color: #d4801a !important;
        color: #ffffff !important;
        border-radius: 6px !important;
        margin: 6px 12px !important;
        padding: 10px 16px !important;
        display: inline-block !important;
        font-weight: 700 !important;
    }
}