/*--------------------------------------------------------------
13.0 Responsive
--------------------------------------------------------------*/
.boutonBlog, .boutonSite {
	box-shadow: 1px 1px #ccc, -1px -1px #fdf8e3, -1px 1px #ccc, 1px -1px #fdf8e3, 3px 3px 1px #ddd ;
					background-image: linear-gradient(135deg, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.95) 60%, rgba(0, 0, 0, 0.6));
	
}

@media all and (orientation:portrait){
	
html {
		font-size: 1em;
	}
	.pied_page {
		display: none;

}
		
	.titrePageHeader {
		position:static;
		visibility: hidden;
	}
	  .menu_mobile {
		  
		background-image: linear-gradient(45deg, #fdfbFa, #EbE6d1);
		justify-content: space-between;
		align-content:center;
		align-items:end;
		left:0px;
		top:0px;
		opacity:100;
		width:100%;
		height:14%;
		z-index:999;

	}

	
	.boutonM {
		top:0px;
		position:relative;
		width: 25%;
		height:100%;
	}
	.boutonM img{
		width:100%;
		height:100%;
	}
	
	.bouton_lire {
			display:none;
			
		}
	
		
	.menu_gauche {
		
		display:none;			

	} 
		
	.menu_droite2 {
		display:none;
		z-index:200;
		width:98%;
		left:1%;
		height:78%;
		top:15%;
		
		grid-template-columns: repeat(3, 1fr);
		align-items: space-evenly;
		align-content:space-around;
		justify-content:space-evenly;

	}
	.boutonM2{
		width:100%;
	}
	
	.fond_cadre {
		visibility:hidden;

	}
  
	/*.B_menu{
		position:fixed; width:auto;
		left:0%;
		top:1%;
		z-index:99;
		height:12%;
	}*/
	.conteneurBlog {
		left:0px;
		top:14%;
		width:100%;
		height:76%;
		visibility:hidden;
	}
	.conteneurB {
		left:0px;
		top:14%;
		width:100%;
		height:76%;
		
		/* visibility:hidden; */
	}
	.boutonBlog {
		text-decoration: none;	
		display:flex; align-items:center; justify-content:center;
		position:fixed;	z-index:99;
		height:10%; width: 100%;
		left:0px; top:90%;
		/* opacity:0.75; -moz-opacity:0.75;	-khtml-opacity:0.75;	filter:Alpha(Opacity=75); */
		font-size:1.5em;
		text-align:center;
		
	}
	.boutonSite {
		text-decoration: none;
		display:flex; align-items:center; justify-content:center;
		position:fixed; z-index:99;
		left:0px; top:90%;
		width: 100%; height:10%;
		
			/*background-image: linear-gradient(45deg, #dbd6c1, #fdf8e3 40%, #dbd6c1);*/
		/* opacity:0.75; -moz-opacity:0.75;	-khtml-opacity:0.75;	filter:Alpha(Opacity=75); */
		font-size:1.5em;
	}
	.boutonBlog > *, .boutonSite > *{
		width:100%;
		display:flex;
		align-content:stretch;
		align-items:center;
		justify-content:center;
		
	}
		.porSiteP, .porBlogP {
		display:flex;
		align-self:center;
		justify-content:center;
		width:100%;
	}
	.porSiteM, .porBlogM {
		display:none;
		
		width:100%;
	}
	.touchGIF {
			width:20%; height:auto; position: absolute; right: 5%; bottom:1%;
		}

	.floatL, .floatR{
		float:inline-end;
	}
	/* BOUTONS PAGE ACCUEIL WELCOME */
	.Btn_HoraireWelcome { /* les valeurs sont gérés en Js dans index.php */
		 position: fixed;    
					border-right: dashed;
	
	}
	.Btn_HoraireWelcome img {
		height:100%;
	}
	.Btn_EntrerSite { /* les valeurs sont gérés en Js dans index.php */
			position: fixed;	 /*width: 60%; right: 0%; height: 100%; top:0; */
	}
	.boutonNews { /* les valeurs sont gérés en Js dans index.php */
		position:fixed;		
                   border-top: double;
                    overflow:none;
                    visibility:visible;
                    z-index:999;
                    background: linear-gradient(0deg, rgba(255,235,205,1), rgba(255,250,239,0.9));
	}
	.welcome { /* les valeurs sont gérés en Js dans index.php */
		
		position:fixed;
                    overflow:none;
                    visibility:visible;
                    z-index:999;                   
					background: linear-gradient(135deg, rgba(255,255,155,1), rgba(255,250,239,1));
	}
		
/* FIN BOUTONS PAGE ACCUEIL WELCOME */
	
	/* panneau avertissement creative */
	.creative{
		position:fixed;
		visibility:hidden;
		left:0%;
                    top:70%;
                    width:100%;
                    height:15%;
                    overflow:auto;
                  /*  visibility:visible;*/
					visibility:hidden;
                    z-index:999;
                    background: linear-gradient(135deg, rgba(255,255,255,1), rgba(255,250,239,1));
	}
	/* panneau avertissement condititions d'utilisations */
	.conditions{
		
		
		position:fixed;
		left:0%;
                    top:60%;
                    width:100%;
                    height:10%;
                    overflow:auto;
					display: none;
                   /* visibility:visible; */
					visibility:hidden;
                    z-index:999;
                    background: linear-gradient(135deg, rgba(255,255,255,1), rgba(255,250,239,1));
	}
	
}

@media all and (orientation: landscape) and (max-width:1023px){
		.Btn_HoraireWelcome {
			position: absolute; 
			/* display: grid;  */
			/* align-content: center; */
						/* align-items: center; */
						/* justify-items: center; */
						/* justify-content: center; */
			
		}
		.Btn_EntrerSite {
			position: absolute; 
			/* display: flex;  */
			/* align-content: center; */
						/* align-items: center; */
						/* justify-items: center; */
						/* justify-content: center; */
		}
		.boutonNews {
			position:fixed;
			
					/* display: grid;  */
			/* align-content: center; */
						/* align-items: center; */
						/* justify-items: center; */
						/* justify-content: center; */
					   border-top: dashed;
						overflow:none;
						visibility:visible;
						z-index:999;
						background: linear-gradient(0deg, rgba(255,235,205,1), rgba(255,250,239,0.9));
		}
		.welcome {
			position:fixed;
						
						overflow:none;
						visibility:visible;
						z-index:999;
					   
						background: linear-gradient(135deg, rgba(255,255,155,1), rgba(255,250,239,1));
		}
		.boutonBlog {
			text-decoration: none;	
			display:flex; align-items:center; justify-content:center;
			position:fixed;	z-index:99;
			height:100%; width: 10%;
			left:90%; top:0px;
			opacity:0.85; -moz-opacity:0.85;	-khtml-opacity:0.85;	filter:Alpha(Opacity=85);
			font-size:1.2em;
			text-align:center;
			
			
			
		}
		.boutonSite {
			text-decoration: none;
			display:flex; align-items:center; justify-content:center;
			position:fixed; z-index:99;
			left:90%; top:0px;
			width: 10%; height:100%;
			visibility:hidden;
			opacity:0.85; -moz-opacity:0.85;	-khtml-opacity:0.85;	filter:Alpha(Opacity=85);
			font-size:1.2em;
		}
		.boutonBlog > *, .boutonSite > *{
			width:100%;
			display:flex;
			text-overflow: fade;
			align-content:stretch;
			align-items:center;
			justify-content:center;
			
		}
		
		.porSiteP, .porBlogP {
			display:flex;
			align-self:center;
			justify-content:center;		
			width:100%;
		}
		.porSiteM, .porBlogM {
			display:none;
			
			width:100%;
		}

		.bouton_lire {
			display:none;
		}
		.titrePageHeader {
			position:static;
		}
		.menu_gauche {
			
			display:none;
						

		} 
		.touchGIF {
			width:90%; height:auto; position: absolute; right: 5%;  bottom:1%;
		}

			

		.menu_droite2 {
			display:none;
			z-index:200;
			width:80%;
			right:0%;
			height:80%;
			top:12%;
			
			grid-template-columns: repeat(4, 1fr);
			align-content:space-around;
			 justify-content:space-around; 

		}
		.boutonM2{
			/* height:40%; */
			width: 75%
		}
		.fond_cadre {
			visibility:hidden;

		}
		.menu_mobile {
			background-image: linear-gradient(45deg, #fdfbFa, #EbE6d1);
			display:flex;
			flex-wrap: wrap;
			justify-content: space-between;
			align-content:center;
			align-items:space-between;
			opacity:50;
			 width:15%;
			height:100%;
			z-index:99;
			left:0;
			top:0;

		}
		.boutonM {
			top:0px;
			height:12%;
			position:relative;
			width: 100%;
			height:25%;
		}
		.boutonM img{
			width:100%;
			height:100%;
		}
		/*.B_menu{
			position:fixed; width:auto;
			left:2%;
			top:4%;
			z-index:99;
			height:18%;
		}*/
		.conteneurBlog {
			left:15%;
			top:0%;
			width:75%;
			height:100%;
			visibility:hidden;
		}
		.conteneurB {
			left:15%;
			top:0%;
			width:75%;
			height:100%;
		}
		.pied_page {
			display: none;

		}
	}



@media all and (max-aspect-ratio: 3/2) and (min-width: 1024px)  and (orientation:landscape){
	
.menu_mobile {
		display:none;
   
	}
   
	.boutonM2 {
		width:80%; 

	}
	 .boutonG {
	   width:100%; 

	}
	
	
		   
	
  }

@media all and (min-width: 1024px) and (orientation:landscape)  {
	
.menu_mobile {
		display:none;
   
	}
}
@media all (orientation:landscape) and (min-aspect-ratio: 16/10) and (min-width: 1200px) {

	
}
	
@media all and (max-aspect-ratio: 3/2)  {
	h1 {
	font-size: 1.2em;
	padding-top: 0px;
	}
}
@media all and (max-width: 1023px)  {
	h1 {
	font-size: 1em;
	padding-top: 0px;
	}
	
	
}
@media all and (min-width: 2000px)  {
	.Texte_normal {
	font-size: 1.3em;
	}
	.fond_texte {
		margin-left:6em; 
		margin-right: 6em; 
		padding: 1.5em 1.5em;
	
	}
}

/*

table, td, th { 
  border: 1px solid black;
   border-collapse: collapse;
   text-align: center;
}
 
 
th { border-bottom-width: 2px; }
tr:nth-child(even){ background-color: #eee; }
 
 
@media (max-width: 40em) {
   table, tbody { display: block; }
   tr {
      display: table;
      width: 100%;
   }
   th {
      font-size: 0;
      border: none;
      visibility: hidden;
   }
   td, th { display: table-row; }
   td:before {
      content: attr(data-headers);
      display: table-cell;
      width: 60%;
      border-right:  1px solid black;      
   }
}

*/
/* on converti tout les tableau en bloc flexible pour aligment vertical des cellules */
 @media (max-width: 500px) {
td:before { content: attr(data-title); }
table, 
thead, 
tbody, 
th, 
td, 
tr { 
display: flex;
flex-direction:column; 
}
 
thead tr { 
display:none;
}
td { 
position: relative;
border: 0px solid transparent;
padding-left: 0% !important; 
width:100%;
white-space: normal; 
}
 
td:before { 
position: relative;
top: 0px;
left: 0px;
width: 100%; 
padding-right: 15px; 
height:50%;
white-space: nowrap;
text-overflow: ellipsis !important;
overflow:hidden !important;
text-align:center;
background-color:#f8f8f8;
padding:2px;
}
} 
/* la même en ciblant avec une classe pour pas tronquer tous les tableaux sur l'ensemble du site
 @media (max-width: 500px) {
.responsive-table-line td:before { content: attr(data-title); }
.responsive-table-line table, 
.responsive-table-line thead, 
.responsive-table-line tbody, 
.responsive-table-line th, 
.responsive-table-line td, 
.responsive-table-line tr { 
display: flex;
flex-direction:column; 
}
 
.responsive-table-line thead tr { 
display:none;
}
.responsive-table-line td { 
position: relative;
border: 0px solid transparent;
padding-left: 0% !important; 
width:100%;
white-space: normal;
text-align:right; 
}
 
.responsive-table-line td:before { 
position: relative;
top: 0px;
left: 0px;
width: 100%; 
padding-right: 15px; 
height:50%;
white-space: nowrap;
text-overflow: ellipsis !important;
overflow:hidden !important;
text-align:left;
background-color:#f8f8f8;
padding:2px;
}
} 
*/