/*
Theme Name: sylvainbouclainvilletheme
Theme URI: https://sylvainbouclainville.com/wp-content/themes/sylvainbouclainvilletheme
Author: Sylvain bouclainville
Author URI: https://sylvainbouclainville.com/
Description: Mon premier thème !
Requires at least:WordPress 5.8
Tested up to: 5.8
Requires PHP: 5.6
Version:1.0
You will find the real stylesheet in style.css
*/
/*evite que ca parte en couille*/
* {
    box-sizing: border-box;
}
body, html {
    margin: 0;
    padding: 0;
    overflow-x: hidden; /* Ajoutez ceci pour forcer la désactivation du défilement horizontal */
}
/*lien d'evitement*/
.screenreader-text {
	position: absolute;
	left: -999px;
	width: 1px;
	height: 1px;
	top: auto;
  }
  .screenreader-text:focus {
	color: black;
	display: inline-block;
	height: auto;
	width: auto;
	position: static;
	margin: auto;
  }
/*charge les fonts de theme font*/
@font-face {
	font-family: 'sylvainbouclainville';
	src:  url('https://sylvainbouclainville.com/wp-content/themes/sylvainbouclainvilletheme/fonts/sylvainbouclainville.eot');
	src:  url('https://sylvainbouclainville.com/wp-content/themes/sylvainbouclainvilletheme/fonts/sylvainbouclainville.eot?6p2eqf#iefix') format('embedded-opentype'),
	  url('https://sylvainbouclainville.com/wp-content/themes/sylvainbouclainvilletheme/fonts/sylvainbouclainville.ttf') format('truetype'),
	  url('https://sylvainbouclainville.com/wp-content/themes/sylvainbouclainvilletheme/fonts/sylvainbouclainville.woff') format('woff'),
	  url('https://sylvainbouclainville.com/wp-content/themes/sylvainbouclainvilletheme/fonts/sylvainbouclainville.svg') format('svg');
	font-weight: normal;
	font-style: normal;
	font-display: block;
  }
  
.sylvain {
		font-family: 'sylvainbouclainville' !important;

	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
  }
  .sylvain:hover:before{
color:#e8ff84  }

  .sb-bouclainvillelogo:before {
	content: "\e90b";
	font-size: 3em;
  }
 .acceuil:before{
color:black;
  }
  .sb-twiter:before {
	content: "\e905";
  }
  .sb-tiktok:before {
	content: "\e904";
  }
  .sb-collectifjardiniers:before {
	content: "\e906";
  }
  .sb-serrage-de-main:before {
	content: "\e903";
  }
  .sb-cadre1:before {
	content: "\e902";
  }
  .sb-certificat:before {
	content: "\e901";
  }
  .sb-balance:before {
	content: "\e900";
  }
  .sb-cb:before {
	content: "\e919";
  }
  .sb-colis:before {
	content: "\e918";
  }
  .sb-play:before {
	content: "\e912";
  }
  .sb-cart:before {
	content: "\e93a";
  }
  .sb-envelop:before {
	content: "\e945";
	font-size: 2em;
  }
  .sb-history:before {
	content: "\e94d";
  }
  .sb-bubbles:before {
	content: "\e96c";
  }
  .sb-clipboard:before {
	content: "\e9b8";
  }
  .sb-earth:before {
	content: "\e9ca";
  }
  .sb-man-woman:before {
	content: "\e9de";
  }
  .sb-cross:before {
	content: "\ea0f";
  }
  .sb-checkmark:before {
	content: "\ea10";
  }
  .sb-loop2:before {
	content: "\ea2e";
  }
  .sb-facebook2:before {
	content: "\ea91";
	font-size: 2em;
  }
  .sb-instagram:before {
	content: "\ea92";
	font-size: 2em;
  }
  .sb-youtube:before {
	content: "\ea9d";
	font-size: 2.5em;
	position: relative;
	top:-2px
  }

  .sb-twitch:before {
	content: "\ea9f";
	font-size: 2em;
  }
  .sb-tumblr2:before {
	content: "\eaba";
  }

  .iboucla{
	  font-family: 'bouclainvillefont' !important;}
  .iboucl-cart:before {
	content: "\e93a";
  }
  .iboucl-menu:before {
	content: "\e9bd";
	font-size: 2em;
  }
  .iboucl-logoavion2:before {
	content: "\e901";
	font-size: 3.2em;
  }
  .iboucl-earth:before {
	content: "\e9ca";
  }
  .iboucl-home:before {
	content: "\e900";
  }
  .activer{
	  color:#e8ff84;
  }
/*header barre d admin*/


#wpadminbar  {
top: 400px; /* on prend en compte le décalage */
}
/*empeche les images plus grandes que l ecran (ajuste la hauteur ensuite*/
img{
	max-width: 100%;
	height: auto;
}

/*image mis en avant*/
.imagesfrontpage{
	display:none;
}
/*retire le soulignement des liens*/
body{
	overflow-x: hidden;
}
a{
color:#c9a162;
	text-decoration:inherit;	
}
a:visited{
	opacity: 0.8;
}
a:hover, .politique a:hover{
	color:#e8ff84;
}
.is-layout-flow p a{
	background-color: black;
	padding:2px
}
.creditsalignésvp a:hover{
	color:#e8ff84!important;
}
::selection {
	color: #e8ff84;
	background: black;
  }
p{
	color:black;
}
h1{
	text-align: center;
	background-image: url('https://lieux.sylvainbouclainville.com/wp-content/themes/sylvainbouclainvilletheme/img/fire.jpg');
	background-clip: text;
-webkit-background-clip: text;
color: transparent;
text-shadow:2px 3px #0003;
}
body{
	max-width: 100%!important;
}
.flex {
	display: flex!important;
	flex-direction: row;
}
.pr4{
	padding-right: 4px;
}
.p30{
	padding:30px
}
/*les boutons*/
.editor-styles-wrapper :where(.wp-element-button, .editor-styles-wrapper .wp-block-button__link), :root :where(.wp-element-button, .wp-block-button__link){
	background-color: black;
}
/*back to top*/

#myBtn {
	display: none; 
	position: fixed;
	bottom: 20px;
	right: 30px;
	z-index: 99;
	color:#fff;
	background-color:black;
cursor: pointer; 
	padding: 15px; 
	border-radius: 10px; 
	font-size: 18px; 
	box-shadow: 2px 2px 2px white;
	z-index:100;
  }
  
  #myBtn:before{
	  content: "\25b2";
  }
  #myBtn:hover {
color:#e8ff84; 
opacity: 0.9;
  }
 

/*modifie le logo max width est en important car sinon woocomerce ecase ce css*/
.sb-bouclainvillelogo {
	max-width:40px;
	position:fixed;
	top:0px;
	right:20px;
	z-index:100;
}
.iboucl-logoavion2:before{
	position:fixed;
	top:10px;
	right:20px;
	z-index:100;
}
/*interface de conection/deconection admin wp*/

.wpadmindeconection{
	z-index:100;
	position:fixed;
	left:85%;
	top:0px;
}

/*faire que l icone du menu burger sois visible*/

 .main-navigation{
     display: flex;
 width: 100%;
 align-items: center;
 justify-content: space-around;
 }
 ul li a {
     font-size: 25px;
 }
 
 ul{
     list-style: none;
 }
 #social-menu0{
     display: flex;
     flex-direction: row;
     justify-content: space-around;
 position: relative;
 top:20px;
 flex-wrap: wrap;
 }
 .flexmenu{
   min-height: 70px;
     background-color: black;
 }
  
     ul li a {
        padding-right: 10px;
		z-index: 2;
     
     }
     .nav .nav--main{
         display: none;
     }

 .menuresponsive2{
display:none;
z-index: 2;
	 }
	 .menuresponsive2 ul{
		z-index: 2;
	 }
	 .menuresponsive2.open {
		display: flex;
		padding: 0 40px 10px;
	}
     .hamburger{
         position: fixed;
         top: 0;
        left:10px;
         height: 40px;
         width: 40px;
         border: none;
         outline: none;
         cursor: pointer;
         display: flex;
         justify-content: center;
         align-items: center;
        margin:0 10px 40px 0;
		background-color: transparent!important;
		z-index: 2;
     }
     .line{
         position: absolute;
         display: block;
         width: 100%;
         height: 2px;
         background: black;
         transition: transform 0.3s ease-out,
         opacity 0.3s ease-out;
         pointer-events: none;
     }
     .l1 {
         transform: translateY(-10px);
  
     }
     .l3 {
         transform: translateY(10px);
     
     }
     .hamburger.open .l1 {
         transform: translateY(0px) rotate(135deg);
         margin: 30px;
         
     }
     .hamburger.open .l1, .hamburger.open .l3 {
         background: red;
     }
     .hamburger.open:hover{
 width:30px;
     }
     .hamburger.open .l2 {
         opacity: 0;
         transition: opacity 0s ease-out;
         margin: 30px;
     }
     .hamburger:hover {
         width: 30px;
     }
     .l2:hover{
         width: 60%;
     }
     .hamburger.open .l3 {
         transform: translateY(0px) rotate(-135deg);
         margin: 30px;
     }
     
     .main-navigation {
         position: fixed;
         right: 0;
         justify-content: flex-start 
     }
 
     .main-navigation div ul{
         display: none;
  }
    
      .social-navigation0.open div ul li {
 padding:0 0 20px 0;
 margin-left: 10px;
     }
     .social-navigation0{
         display: none;
         }
      
         .social-navigation0.open{
         display:flex;
         animation: glissement;
         animation-duration: 0.3s;
 background-color: black;
         justify-content: space-between;
         margin-bottom: 20px;
  min-height: 80px;
        padding-top: 40px;
     }
     .social-navigation0.open div ul{
         display: block;
        
     }
     .site-header{
         transform: translate(0, 0);
     }
     #social-menu0{
         top: 30px;
     }

 
 @keyframes glissement {
     from {
       margin-right: 100%;
       width: 300%;
     }
   
     to {
       margin-right: 0%;
       width: 100%;
     }
   }
   /*footer*/
   .hamburgerfooter{
     display: inline-block;
     width: 40px;
   }
   .line2 {
     position: relative;
     display: block;
     width: 40px;
     height: 2px;
     background: #DDDDFF;
 }
 .hamburgerfooter span{
     margin-bottom: 10px;
 }
 .positionff{
     position: relative;
     top: -45px;
     left: 60px;
   }
   .navigationfootermobile{
     margin:0
   }
   .navigationfooter, .navigationfootermobile{
     display: flex;
     justify-content: space-between;
 width: 100%;
 flex-wrap: wrap;
   }
 
   .navigationfooter li a, .navigationfootermobile li a{
     margin: 0px 20px 0 20px;
   }
   .navigationfootermobile li{
     margin-bottom: 15px;
   }
   /*formulaire*/
   .wpcf7{
	padding:30px
   }
   .wp-block-quote{
	display: none;
   }
   .wi100 img{
	width: 100%!important;
   }
   @media (max-width: 801px){
     .navigationfootermobile{
         display: flex;
         justify-content: start;
         flex-direction: column;
     width: 100%;
     flex-wrap: wrap;
     height: 250px;
   }}
   @media (max-width: 380px){
     .navigationfootermobile{ height: auto;}
   }

/*front page >lecture tous les articles recents en page d acceuil*/

.floatrightcontent{
	position:relative;
	left:100px;
		display:flex;
		flex-direction:row;
	}
	.flexfrontpage{
		display:flex;
		flex-direction:row;
		height:400px;

	
		overflow:hidden;
	}
.imagemisenavant{
	padding-right: 20px;
}

/*post gallerie content*/
/*desk*/

 .droite{
	position:absolute;
	right:200px;
	top:154px;
		}
 .gauche{
			position: absolute ;
	left:380px;
	top:154px;
		}

/* a supprimer si ca sert pas

	.floatrightcontent p, div{
		padding-right:10px
	}
*/	
.center{
	text-align:center;
padding-bottom: 0!important;
}
.h2frontpage{
	
	width:100%;
	display:flex;;
}
/*header ensemble*/



#site__header__id{
	z-index:1000;
	display:flex;
	flex-direction:row;
	position:fixed;
	top:17px;
background-color:black;

}

#site__header__id, ul li{

	list-style:none;

	
}

nav ul{
	
	margin:0;
}
nav ul li {
    float:left;
    width: 150px;
    position: relative;
	z-index: 2;
  
    }

nav ul li a{
	padding:	7px 15px;

	margin-left: -20px;

position: inherit;
	display: inline-block;
	height: 27px;
}
nav ul li a:hover{
color:#e8ff84
}
.menu-item .current-menu-item a, [aria-current], .current-menu-item{
	color:#ffd!important;
	background: black;

}
nav ul ul{
	position:absolute;
	left:999em;
	background-color:black;
}
nav ul li:hover ul{
	left:auto;
}
nav ul li ul li{
	float:none;

}
.sub-menu li a{
	color:black;
	height: 50px;
}
nav ul li ul li a:hover{
display:block;

}
nav ul li:hover ul li a{
	background-color:#ffd;
width: 190px;
}
nav ul li:hover ul li a:hover{
	background-color:black;
	
}
[aria-current]::after{
	content: '';
    position: absolute;
    left: 20px;
  
    width: 70%;
    height: 2px;
    background-color: white;
 top:33px;
}
.menu-item::after {
    content: '';
    position: absolute;
    left: 0;
  
    width: 0;
    height: 2px;
    background-color: white;
    transition: width 0.4s ease; /* Transition pour l'animation de soulignement */
	top:33px
}
.menu-item:hover::after {
    width: 50%; /* Le soulignement s'étend sur toute la largeur au survol */
}
.sub-menu .menu-item::after{
	content: '';
    position:absolute;
    left: 0;
    bottom: 6px;
    width: 0;
    height: 2px;  
	background-color: white;
    transition: width 0.4s ease;
	display: inline-block;
}
.sub-menu .menu-item:hover::after{
	width: 70%;
	z-index: 3;
}
#menuresponsive2{
	position:fixed;
	top:0px
}

/*sidebare*/
/*les mini body n existent que si u sidebar est active et a pour but de reduire la taille du body pour pas que la bare laterale 'ecrase' la page*/
#minibody1{
	width: 85%!important;
}
#minibody2{
	width: 85%!important;
}
#minibody3{
	width: 90%!important;
	position: absolute;
	right: 0!important;
}
.my-sidebare-menu{
	display:block;
	background-color:black;
min-height:100%;
	z-index:1000;
	position:fixed;

right:0px;
padding-top:15%;
}


.le_menu_sidebare{
	background-color:#103015;
min-height:100%;
	z-index:1000;
	position:fixed;

right:0px;
padding-top:15%;

}
.le_menu_sidebare, ul li a{
	top:0%;
}
.le_menu_sidebare, .children{

	margin:0;
	padding:0;
}
	/*widget sidebare droite*/
	.sidebar2{
		width:40px;
				position:fixed;
				display:block;
				top:40px;
			right:0px;
	padding-top:50px;
	color:white;
	height:100%;
	width:auto;
				z-index:1000;
}
	#sidebar-primary{

		padding-top:80px;
			}		
			.iconbarrelaterale2{
				width:40px;
				position:fixed;
				display:block;
				top:40px;
				left:50px;
				z-index:1000;
			}
			/*widget bare laterale gauche*/
			.iconbarrelaterale1{
				width:40px;
				position:fixed;
				display:block;
				top:50px;
				right:50px;
				z-index:1000;
			}
			.sidebar2 div table, .sidebar2 div p{
				color:white;
			}

/*widget lateral */
#sidebar-primary{
	position:fixed;
	display:flex;
	flex-direction:column!important;
	flex-wrap:wrap;
	left:0;
	z-index:100;
	top:50px;
	background-color:black;
	padding-bottom:100%;
}

#sidebar-primary, ul li a{
	top:0%;
}








/*zone de widget du footer*/

#widgetfooterid{

		display:flex;
		flex-direction:row!important;
	flex-wrap: wrap;
		margin-bottom:50px;
		padding:0px;
	justify-content:space-between;
	width: 95%;

		
		
	
	}

#site__footer__id{
	display:flex;
	flex-direction:row;
	flex-wrap: wrap;
	align-items: center
}
.footer_perso_image{
	width: 300px!important;
}

#respond{
	position:absolute;
	right:0;
}
/*bloginfo description */
.slogandusite{
	color:#777;

font-family: 'Dancing Script', cursive;


}

.sloganer{


	position:relative;
   bottom:-170px;
   text-align:right;
	width:95%;
}
.sloganerheader{
	text-align:right;
	font-family: 'Dancing Script', cursive;
	color:#777;
	font-size:80%;
	width:100%;
}
/*menu footer*/
.menu-menu-container .my-footer-menu li a {
	height: 27px;
	padding:	5px 5px;
	display:block;
	
}
.my-footer-menu .sub-menu {
	display:none;
}

.my-footer-menu{

	max-width:100%;
	padding-right:7px;
	display:flex;
	flex-direction: row;
	position:absolute;
	padding-top:20px;
	margin-top:100px
}
/*menu footer quand il y a pas de footer*/
.my-footer-menu-pasbouger{
	display:flex;
	flex-direction: row;
	max-width:100%;
	position:relative;
	bottom:-130px;
}
.my-footer-menu-pasbouger .sub-menu {
	display:none;
}
.menu-menu-container .my-footer-menu-pasbouger li a {
	height: 27px;
	padding:	5px 5px;
	display:block;
	
}
/*les comentaires */
#respond{
	position:relative;
	left:0;
	padding-top:200px;
}
#comment{
	width:200px;
}
.margedroite{
	padding-left: 2rem;
}
.comment-author{
display:flex;
flex-direction: row;
justify-content: flex-start;
}
.comment-author  .avatar{
	width: 70px;
	border-radius: 50%;
	padding-right: 10px;
}
.comment-author .says{
	padding-right: 3px;
}
.comment-author .edit-link{
	position: absolute;
	right: 10%;
}
.margedroite3px{
	padding-right: 3px;
}

.fn{/*espace entre le nom de l auteur et le commentaire*/
	padding-right:4px ;
}
.contenu_commentaire{
	position:absolute;
padding-left:10%!important;
	padding-top:25px;
}
.reply_comment{
	padding-bottom: 25px;
	padding-top:5px;
	padding-left:10px;
}
/*footer personalisable*/
.footer_perso{
	position: relative;
	display:inline-block;
background-color:black;

padding-left:10px;

bottom:-200px;
width: 100%;
height: 200px;
}

.creditsalignésvp{
	display:flex;
	width:90%;
	justify-content:space-between;
	z-index: 100;
}
#titrepersofooter{
	font-size:1.4em;
}
/*personalise l'image du footer personalisable*/
.iconesresauxfooter{
	position: absolute;
  display: flex;
  flex-direction: row;
  align-items: center;
  left:50px
		}
		.iconesresauxfooter a{
			margin-right: 20px;
		}
.liensreseauxsociaux{
	z-index: 100;

	
}

.footer_perso_texte{
	position: absolute;
	right:200px;
top:20%;
	
}
.footer_perso_texte p{
color:white;
	
}

.footer_perso_texte2{
position:relative,
}
.footer_perso_texte h2 {
	font-size:1.7rem;
	position: relative;
	top:-35px;


}
.footer_perso_texte p {
	position: relative;
	top:-20px;
	font-size:.9rem;

}

/*credits*/
.credits_en_bas{
	display:flex;
	flex-direction: row;
	flex-wrap:wrap;
	align-items: baseline;

	position: relative;
	top:80px;
	width: 80%;
	height: 40px;
	justify-content: space-around;
	padding-right: 10px;
	

}



  /*les formats d'articles */
  .en-passant-aside{
	  font-size:125%;
	  background-color:#103015;
	  padding:20px;
	  border-radius: 5px;
	  box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.25);
  }
  .enpassant-p{
	  font-size:65%;
	  margin-bottom:0;
	  color:yellow;
  }


/*format d articles lien*/
.format-link{
	background-color:black;
	padding:20px;
	border-radius: 5px;
	box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.25);
}
.format-link-a{
	font-size:150%;
}
/*format galerie */
.format-galerie{
	background-color:black;
	padding:20px;
}
.format-galerie p{
	color:white;
}
.format-galerie dd{
	color:white;
}
.format-galerie h2{
	color:white;
}
/*categorie */
.flextacategorie{
	display:flex;
	flex-direction: row!important;
	overflow-y:hidden;
	overflow-x:scroll;
	padding-top:45px;
}
.articlesdanslacategorie{
	display:inline-block;
	width:300px;
	padding-right:40px!important;
}
.articlesdanslacategorie img{
	width:250px;
	margin-right:50px!important;
}
.articlesdanslacategorie h2{
	font-size:15px;
width:250px;
		margin-right:40px;
	padding-right:30px;
}
/*les 3 articles les plus recents present dans footer.php */
.plusdecontenusclass{
	position:relative;
	max-width:100%;
	padding-top:100px;
display:flex;
	flex-direction:row;
	flex-wrap:wrap;
justify-content:space-around
}

#plusdecontenusid{

	width: 100%;
	display:block;
	flex-direction: row;
	flex-wrap: wrap;

	margin-top:50px;
}
.blockvous{

		color:white;

	padding-left:10px;
	box-shadow:0px 0px 0px 17px black;
		height:400px;
		max-width:150px;
		text-align:center;

	

}
.blockvous p{
	color:white;
}
#idblockvousarticlesbas-page1{
	margin-right:-10px;
}
#idblockvousarticlesbas-page2{
	margin-right:-10px;
}
.articlesbas-page{
	max-width:150px ;
}

.plusdecontenusclass img{
	position:relative;
	max-width:150px;
	margin:0;
	padding:0;
	bottom:0;
}
#liensuivantid{

	color:white;

}
#lienprecedentid{
	
	color:white;
}
.lienssuivprecedent{
	display:flex;
	flex-direction:row;
	justify-content:space-between;
	padding-top:50px;
	padding-bottom:80px;
}

/*a propos de l'auteur( articles dans content-single.php)*/
.a_propos_de_l_auteur{
	display: flex;
	flex-direction: row;
	height:100%;
	background-color:#777;
	padding:20px;
	margin-bottom:50px;
}
.a_propos_de_l_auteur_image{
	float:left;
	width:25%;
	position:relative;
}
.a_propos_de_l_auteur_image img{
	display:block;
}
.a_propos_de_l_auteur_image p{
	
bottom:0;
left:0;
right:0;
background-color:rgba(0, 0, 0, 0.5);
margin-top:-20px;
text-align:center;
font-weight: bold;
width:150px;
color:white;

}

.a_propos_de_l_auteur_texte{
	float:right;
	width:68%;
}
/*bare de recherche et loupe*/

.barrederecherchediv{

	display: block;
	position: relative;
	right: -330px;

	top: -100px;

}
	#loupe{
		position:relative;
			left:0px;
			top:0px;
			width:20px;
			
		}

  /*responsive tablette*/
  @media screen and (max-width: 900px){
	#site__header__id{
		display:none;}
	#footer3{
		display:none;
	}
		 #footer4{
		display:none;
	}

	.lienclasse{
		display:none;
	}
	
	 #iddarticlesbas-page2{
			display:none
		}
	 #iddarticlesbas-page1{
			display:none
		}
	#commentaireid{
		display:none;
	}
	/*page d acceuil*/
	.blockspagetexte{
		margin:0!important;
	
	}
	/*les credits en mode tablette (politique de confidentialité mentions legales et remerciements)*/
	.credits_en_bas{
		display:flex;
		flex-direction:column;
		justify-content:flex-start;
		flex-wrap:wrap;
		left:50px;
		margin-bottom:10px;
		padding-top:10px;
	}
	.creditsalignésvp a {
		margin-top: 20px;
	}
	.creditsalignésvp{	
		width:120px;
	 }
	 .footer_perso{
		height:400px;
	
	
		margin-bottom:-170px;
	}

	.footer_perso_texte{
		top:15px
	}


	/*repositione la loupe et la bare de recherche tablette*/

	#loupe{
		position:absolute;
	   left:0px;
		top:0px
	}
	#barederecherche{
		position:relative;


}
	/*menu resposive*/
	#iconemenuresponsive{
		display:block;
	}
	#menuresponsive2{
			position:fixed;
			bottom:0;
		flex-direction: column;
		   min-width:100%;
		      text-align:center;
			  padding: 0 10px 10px;
		}
		.sub-menu .menu-item::after, .menu-item::after{
			left:20px
		}
	.sub-menu{
		margin-left: 28px;
		margin-top: 8px;
	}
	

			   #menuheaderresponsive{
				position:fixed;
				display:flex;
				flex-direction:column;
				width:100%;
				height:100%;
				top:50%;
				left:10px;
				background-color:#103015;
			}
			/*logo*/
			.hamburger.open .sb-bouclainvillelogo{
				background-color: white;
				border-radius: 50%;
			}
			/*footer des 3 articles*/
	.plusdecontenusclass{
		 position:relative;
		 margin-bottom:-50px;
		 padding-top:100px;
	 }
	 #widgetfooterid{
		  position:relative;
		 margin-bottom:-80px;
		 padding-top:320px;
	 }
		
			.creditsalignésvp{
				z-index:100;
				flex-direction:column;
			   width:120px;
			}
			
			.sloganer{
				position:relative;
				left:100px;
				width:80%;
			}
			.my-footer-menu{
				display:flex;
				flex-direction: row!important;
		
			}
			.footer_perso_texte{
				top:50px
			}		

			
  }
  @media screen and (max-width: 630px){
nav ul li{
	float: none;

}
.sub-menu .menu-item{
	width: 200px;
	background-color: white;
}
nav ul ul {
	position: relative;
	left: 0em;
	
  }
  nav ul li:hover ul li a:hover {

	
  }
  .creditsalignésvp a{
margin-top: 30px;
  }
  .creditsalignésvp{
	left:50px;
	position: relative;
  }
  .sloganer{
left:0
  }
  }
  @media screen and (max-width: 550px){
/*menu responsive lorsqu on clique sur le men burger que le menu sois bien en bas*/
	#menuresponsive2{
	
		bottom:0;
		
		}
		/*slogan blog description*/

		#respond{
		
			position:relative;
			left:0;
		}
		#comment{
			width:200px;
		}
		.a_propos_de_l_auteur{
			display:none;
		}
/*footer */
	.my-footer-menu{
		display:flex;
		flex-direction: column;
	}
	
	.footer_perso{
		height:350px
	}
	
	.iconesresauxfooter{
		position:relative;
		top:30px;
		   
   }
   .footer_perso_image{
	display:none;
 }
 #footer2{
	display:none;
}
.my-footer-menu-pasbouger{
	display:flex;
	flex-direction: column;


	bottom:-130px;
}
	
#barederecherche{
	position:absolute;
top:130px;
	right:100px;
			 left:10px;
		 z-index:100;
}
/*met le slogan en haut du footer */
.sloganer{
		
	bottom:-170px;


 }
 .footer_perso_texte{


	margin-left:-380px;
	width:250px;

}
.creditsalignésvp{
	flex-direction:column;
	top:15px;
}
.my-footer-menu{
display:none;
}
  }



/*header meteo*/
.princesssnow{
	position:relative;
	top:-210px;
	margin-left: -10px;
	margin-right: -10px;
	margin-bottom: -240px;
}

/*slide header*/
 
.mySlides {
	display: none
  }

  .slideshow-container {
	max-width: 1920px;
	position: relative;
	margin: auto;
  }
  .textslide{
	height:45px;
	text-align:center;
	justify-items:center;
	background-color:#103015;
	padding-top:20px;
	margin-bottom:-15px;
	margin-top:-5px;
	font-size: 1.4em;
	
}
#soiscommelesautres{
	max-width:20%;
}

.flexleslide{
	display:flex;
	flex-direction:row;
	flex-wrap:nowrap;
	align-items:space-between;
	padding-right:1%;
margin-right:1%;
}
  /* Next & previous buttons */
  .slideprecedent,
  .slidesuivant {
	cursor: pointer;
	position: absolute;
	top: 50%;
	width: auto;
	padding: 16px;
	margin-top: -22px;
	color: white;
	font-weight: bold;
	font-size: 18px;
	transition: 0.6s ease;
	border-radius: 0 3px 3px 0;
	user-select: none;
	z-index:1000;
  }
  /* Position the "next button" to the right */
  .slidesuivant {
	right: 0;
	border-radius: 3px 0 0 3px;
  }
  .dot img{
	
	  border-radius: 12px;
  }
  .dot img:active{
	box-shadow:3px 3px 3px black
}
.dot{
	padding-right:2px;
}
  /* On hover, add a black background color with a little bit see-through */
  .slideprecedent:hover,
  .slidesuivant:hover {
	background-color: rgba(0, 0, 0, 0.8);
  }
  /* Caption text */
  .text  a {
	color: #ffffff;
	font-size: 15px;
	padding: 8px 12px;
	position: absolute;
	bottom: 8px;
	width: 100%;
	text-align: center;
  }
  /* Number text (1/3 etc) */
  .numbertext {
	color: #ffffff;
	font-size: 12px;
	padding: 8px 12px;
	position: absolute;
	top: 0;
  }

  /* Fading animation */
  .fade {
	-webkit-animation-name: fade;
	-webkit-animation-duration: 1.5s;
	animation-name: fade;
	animation-duration: 1.5s;
  }
  @-webkit-keyframes fade {
	from {
	  opacity: .4
	}
	to {
	  opacity: 1
	}
  }
  @keyframes fade {
	from {
	  opacity: .4
	}
	to {
	  opacity: 1
	}
  }
  /* On smaller screens, decrease text size */
  @media only screen and (max-width: 300px) {
	.slideprecedent,
	.slidesuivant,
	.text {
	  font-size: 11px
	}
  }
  .container {
    position: relative;
  }
  
  

  /* On hover, add a black background color with a little bit see-through */
  .slidesuivant:hover,
  .slideprecedent:hover {
    background-color: rgba(0, 0, 0, 0.8);
  }
  
  /* Add a transparency effect for thumnbail images */
  .demo {
    opacity: 0.6;
  }
  
  .active,
  .demo:hover {
    opacity: 1;
  }