/*
 Theme Name: Astra Child
 Template: astra
 Version: 1.0
*/

/****** VERSION DESKTOP ******/

/**HEADER NAVIGATION**/
/**header background and position **/
.ast-primary-header-bar{
    position: absolute; 
    top: 0;
    left: 0;
    right: 0;
    z-index: 2; 
    animation-duration: 0.5s;
    background-color: rgba(249, 217, 193, 0.77);
}

/* Shiny golden ribbon */ 
.ast-primary-header-bar::after{
  content: "";
  display: block;
  height: 0.31rem;
  width: 100%;
  background: linear-gradient(
    135deg,
    #b97c1b 0%,
    #ebb728 15%,
    #f7e9ad 35%,   /* First reflection */
    #ebb728 50%,
    #f7e9ad 75%,   /*Second reflection */
    #ebb728 85%,
    #b97c1b 100%
  );
  position: relative;
  bottom: 0;
  left: 0;
  z-index: 10;
}

/** hero banner button **/

.bouton_bann a{
  padding: 0.8rem 1.5rem;
  background-color: transparent!important;
  color: black;
  font-weight: bold;
  border: 2px solid transparent!important;
  border-radius: 40px;
  background-image: 
	  linear-gradient(#e8cab4, #f9d9c1), /* contenu du bouton */
      linear-gradient(
      135deg,
      #b97c1b,
      #ebb728 30%,
      #f7e9ad 50%,   /* reflet central */
      #ebb728 70%,
      #b97c1b
      )!important; /* contour doré */
  background-origin: border-box !important;
  background-clip: padding-box, border-box;
  box-shadow: 0 0 5px rgba(255, 215, 0, 0.4)!important; /* glow optionnel */
  transition: all 0.3s ease!important;
  cursor: pointer;
}

.bouton_bann a:hover {
	 background-image: 
	  linear-gradient(#b97c1b, #b97c1b), /* contenu du bouton */
      linear-gradient(
      135deg,
      #b97c1b,
      #ebb728 30%,
      #f7e9ad 50%,   /* reflet central */
      #ebb728 70%,
      #b97c1b
      )!important; /* contour doré */
    color: white;
	transition: all 0.3s ease!important;
}

.bloc-contain-rs-contact{
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
	}

.bloc-rs-gauche{
	width: 30%;
}
.bloc-contact-droite{
	width: 50%;
}
.lien-rs img{
	display:block;
	margin: 0 auto;
	width: 20%;
}

/**FORMULAIRE DE CONTACT **/

#contactform {
  background-color: rgba(255, 255, 255, 0.8);
  padding-top: 3%;
  padding-bottom: 3%;
  padding-left: 5%;
  padding-right: 5%;
  border-radius : 5px;
}

#contactform input{
	background-color: #F1E9D3;
}
#contactform textarea{
	background-color: #F1E9D3;
}

/** bouton envoyer du formulaire **/

.formbutton {
  background-color: #D6C27A!important;
  color: black;
  padding-top: 12px!important;
  padding-bottom: 12px!important;
  padding-left: 30px!important;
  padding-right: 30px;
  font-size: 14px!important;
  letter-spacing: 1px;
  text-transform: uppercase!important;
  border-radius: 3px!important;
  border: 2px solid #D6C27A!important;
  margin-right: auto!important;
  margin-left: 0!important;
  text-align: left!important;
  transition: all 0.3s ease!important;
}

.formbutton :hover{
	background-color: #F1E9D3!important;
	color: black!important;
	transition: all 0.3s ease!important;
}

/****** VERSION TABLETTE ******/
@media only screen and (min-device-width : 769px) and (max-device-width : 1200px) {
	.ast-header-break-point #masthead .ast-mobile-header-wrap .ast-primary-header-bar{
		padding-left: 0px;
  padding-right: 0px;
	}
	/**menu hamburger**/
	.ast-hfb-header.ast-header-break-point .main-header-bar-navigation {
  		width: 100%;
  		margin-top: 20%;
  		margin-left: 5%;
		padding: 20px 0;
	}
	/**menu hamburger ouvert**/
	.ast-mobile-header-wrap .ast-mobile-header-content::after{
		content: "";
  		display: block;
  		height: 0.31rem;
  		width: 100%;
  		background: linear-gradient(
    		135deg,
    		#b97c1b 0%,
   		    #ebb728 15%,
    		#f7e9ad 35%,   /* First reflection */
    		#ebb728 50%,
    		#f7e9ad 75%,   /*Second reflection */
    		#ebb728 85%,
    		#b97c1b 100%
  		);
  		position: relative;
  		bottom: 0;
  		left: 0;
  		z-index: 10;
	}	
	.ast-builder-menu-mobile .main-navigation .main-header-menu .menu-item > .menu-link {
        color: #b97c1b;
    	background: transparent;
		font-size: 2.1vh;
    }
	 .ast-builder-menu-mobile .main-navigation .main-header-menu .menu-item:hover > .menu-link{
		background-color: transparent;
	}
	.ast-builder-menu-mobile .main-navigation .main-header-menu{
		background-color: transparent;
	}
	.bloc-contain-rs-contact{
		display: flex;
		flex-direction: column!important;
		flex-wrap: wrap;
	}
	.bloc-rs-gauche{
		width: 100%;
	}
	.bloc-contact-droite{
		width: 100%;
	}
	.bloc-contain-rs-contact{
		display: flex;
		flex-direction: column!important;
		flex-wrap: wrap;
	}
}

/****** VERSION MOBILE ******/
@media only screen and (min-device-width : 320px) and (max-device-width : 768px) {
	.ast-header-break-point #masthead .ast-mobile-header-wrap .ast-primary-header-bar{
		padding-left: 0;
		padding-right: 0;
   		position: absolute; 
    	top: 0;
    	left: 0;
    	right: 0;
    	z-index: 2; 
  	    animation-duration: 0.5s;
		background-color: rgba(249, 217, 193, 0.77);
	}
	
	/**menu hamburger**/
	.ast-hfb-header.ast-header-break-point .main-header-bar-navigation {
  		width: 100%;
  		margin-top: 20%;
  		margin-left: 5%;
		padding: 20px 0;
	}
	/**menu hamburger ouvert**/
	.ast-mobile-header-wrap .ast-mobile-header-content::after{
		content: "";
  		display: block;
  		height: 0.31rem;
  		width: 100%;
  		background: linear-gradient(
    		135deg,
    		#b97c1b 0%,
   		    #ebb728 15%,
    		#f7e9ad 35%,   /* First reflection */
    		#ebb728 50%,
    		#f7e9ad 75%,   /*Second reflection */
    		#ebb728 85%,
    		#b97c1b 100%
  		);
  		position: relative;
  		bottom: 0;
  		left: 0;
  		z-index: 10;
	}
	.ast-mobile-header-wrap .ast-mobile-header-content{
		background: linear-gradient(135deg,rgb(252,190,166) 0%,rgb(255,232,206) 100%);
	}
	 .ast-builder-menu-mobile .main-navigation .main-header-menu .menu-item:hover > .menu-link{
		background-color: transparent;
	}
	.ast-builder-menu-mobile .main-navigation .main-header-menu{
		background-color: transparent;
	}
	.ast-builder-menu-mobile .main-navigation .main-header-menu .menu-item > .menu-link {
        color: #b97c1b;
    	background: transparent;
		font-size: 2.1vh;
    }
	
	.afterwhite {
  		position: relative!important;
  		background: #f0f0f0;  /*ta couleur de fond */
	}

	.afterwhite::after{
  		content: ""!important;
  		position: absolute;
  		bottom: -35px;   /* descend sous la section */
  		left: 0;
  		width: 0;
  		height: 0;
  		border-right: 100vw solid transparent;
  		border-top: 35px solid #f0f0f0;
	}

	.bloc-contain-rs-contact{
		display: flex;
		flex-direction: column!important;
		flex-wrap: wrap;
	}
	.bloc-rs-gauche{
		width: 100%;
	}
	.bloc-contact-droite{
		width: 100%;
	}
	.lien-rs img{
		display:block;
		margin: 0 auto;
		width: 35%;
	}
}