@import url("https://fonts.googleapis.com/css?family=Montserrat&display=swap");
@import url("https://fonts.googleapis.com/css?family=Nunito&display=swap");

:root {
	--font-menu-mobile: "Montserrat", sans-serif;
	--font-menu-desktop: "Nunito", sans-serif;
	--font-text: "system-ui", sans-serif;
 
 
 
	--brown-light: #f3f2e7;
 	--brown-middle: #F1F0DE;
 	--brown-dark: #5b4848;
	
	--white: #fefefe;
	--black: #6E6D6D;

	--blue:  #5fa9ee;
	--red:   #F00;	
	--gris: #c1c4c8;
	--blanc: #4a536e;
	--grisclair: #f3f4f7;
	--grisbleu: #ffffff;
	--grisfonce: #5f626b; 


 
	--menu-line-height: 30px;
   
	--post-logo-size-desktop: 60px;
	--post-logo-size-mobile: 70px;
    
}

@media (prefers-color-scheme: light) {

	:root {
		--fond-site: var(--brown-light);
		--fond-main: var(--brown-middle);

		--text:	var(--black);		
		--text-h1:	var(--black);
		--text-h2:	var(--black);

		--fond-post: var(--white);
		--text-post: var(--black);
		
		--link: var(--brown-dark);
		--link-hover: var(--red);
		
	}
	
	.on-dark { display: none; }
	.on-light { /*display: block;*/ }

	
	
	
}

@media (prefers-color-scheme: dark) {
	:root {
		--fond-site: #525257;
		--fond-main: #525359;
		

		--text: var(--white);
		--text-h1:	var(--white);
		--text-h2:	var(--white);
		
		--fond-post: var(--black);
		--text-post: var(--white);

		--link: var(--white);
		--link-hover: var(--red);
		
	}

	.on-dark { filter: invert(100%); } 
	.on-light { display: none; }

	img {
			
	}

} 

.clr {
	clear: both;
}

/* Themes light or dark */





@media (prefers-color-scheme: dark) {

}

/* Pour que les elements soient alignés */
.inline {
	display: inline-block;
	margin-right:10px;
}

/**************************************************************************************/
/******************************* STRUCTURE BODY ***************************************/

body {
	font-family: var(--font-text);
	margin: 0;
	padding: 4px;
	font-size: 100%;                 /* Default */
	color: var(--text);
	background:  var(--fond-site);
	text-align: center;
	-webkit-text-size-adjust: 100%;
}


	/***************************** FOOTER *************************************/	
		
/*	#footer {
		margin: 0 auto;
		width: 906px;
		height: 10px;
		text-align: center;
		vertical-align: top;
		padding: 0 10px;
	}	*/

	#footer {
		margin: 0;
		padding: 30px 0 10px 0;  /* haut | droit | bas | gauche */
		/*height: 100px;*/
		text-align: center;
		vertical-align: top;
		
	}
	
	
	#footer li {
	   display: inline;
	}
	

/****************************************************************************************/
/************************************* DESKTOP ******************************************/

@media (min-width: 1236px) {
	
	/***************************** MENU HAUT **********************************/

	#tabmenu {
		height: 30px;
		z-index: 199;
		position: relative;
		font-size: 0.9em;
		font-weight: 400; /* normal */
		font-family: var(--font-menu-desktop);
				
	}

	#tabmenu ul {
	  margin: 0;
	  padding: 0;
	  list-style:none;
	}

	#tabmenu li {
		float: left;
		margin: 0;
		padding: 0;
	}

	#tabmenu a {
	  float:left;
	  display:block;
	  padding: 0 20px;    /* vertical | horizontal */
	  text-decoration: none;
	}



	
	/***************************** HEADER *************************************/

@media (prefers-color-scheme: dark) { 
	#header_top, #header_middle, #header_bottom, #content_bottom {
		filter: invert(70%); 
	}

	
	.be-dark {
		
	backdrop-filter: invert(70%);	
		
	}
	
	.module  {
		filter: invert(80%); 
	}	
	
}		
	
	/* Fond arrondu partie haute */
	#header_top {		
		background: url(../images/header/header_top.jpg) top center no-repeat;
		margin: 0 auto;
		width: 1216px;
	/*	height: 129px;  */
		height: 10px;
	}

	/* Fond menu horizontal de l'header */
	#header_content {		
		width: 1136px;
		margin: 0;
		text-align: center;
		padding: 5px 20px 0 20px;
		overflow: hidden;
	}
	
	/* Partie haute de l'image header */
	#header_middle {
		background: url(header_middle.jpg) top center no-repeat;
		width: 1216px;
		height: 6px;
		margin: 0 auto;
		font-size: 0;
	}

	/* Fond de l'image header */
	#header_image {
		background: url(../images/header/header_image.jpg) top center repeat-y;
		backdrop-filter: invert(70%);
		margin: 0 auto;
		width: 1216px;
	}

	/* Partie basse de l'imag header */
	#header_bottom {
		background: url(header_bottom.jpg) top center no-repeat;
		margin: 0 auto;
		height: 9px;
		width: 1216px;
		font-size: 0;
	}		
	
	/* IMAGE HEADER */
	/* Image correspondant à la page */
	/*  Div ID pour un element particulier    */
	#image_index {
		background: url(titre_blog.jpg) top center no-repeat;
		width: 1198px;
		height: 208px;
		margin: 0 auto;
		text-align: left;
	}

	#image_accueil {
		background: url(titre_blog.jpg) top center no-repeat;
		width: 1198px;
		height: 208px;
		margin: 0 auto;
		text-align: left;
	}

	#image_blog {
		background: url(titre_blog.jpg) top center no-repeat;
		width: 1198px;
		height: 208px;
		margin: 0 auto;
		text-align: left;
	}

	#image_login {
		background: url(titre_blog.jpg) top center no-repeat;
		width: 1198px;
		height: 208px;
		margin: 0 auto;
		text-align: left;
	}

	#image_football {
		background: url(titre_football.jpg) top center no-repeat;
		width: 1198px;
		height: 208px;
		margin: 0 auto;
		text-align: left;
	}

	#image_forum {
		background: url(titre_forum.jpg) top center no-repeat;
		width: 1198px;
		height: 208px;
		margin: 0 auto;
		text-align: left;
	}

	#image_piliers {
		background: url(titre_piliers.jpg) top center no-repeat;
		width: 1198px;
		height: 208px;
		margin: 0 auto;
		text-align: left;
	}
	#image_musique {
		background: url(titre_musique.jpg) top center no-repeat;
		width: 1198px;
		height: 208px;
		margin: 0 auto;
		text-align: left;
	}

	#image_photos {
		background: url(titre_photos.jpg) top center no-repeat;
		width: 1198px;
		height: 208px;
		margin: 0 auto;
		text-align: left;
	}

	#image_president {
		background: url(titre_presidentielles.jpg) top center no-repeat;
		width: 1198px;
		height: 208px;
		margin: 0 auto;
		text-align: left;
	}
	#image_powerballe {
		background: url(titre_powerballe.jpg) top center no-repeat;
		width: 1198px;
		height: 208px;
		margin: 0 auto;
		text-align: left;
	}
	#image_telechargement {
		background: url(titre_telechargement.jpg) top center no-repeat;
		width: 1198px;
		height: 208px;
		margin: 0 auto;
		text-align: left;
	}

	#image_osm {
		background: url(titre_osm.jpg) top center no-repeat;
		width: 1198px;
		height: 208px;
		margin: 0 auto;
		text-align: left;
	}


	
	/*************************** CORPS *************************************/

	.center {
		text-align: center;
		margin: 0 auto;
		padding: 0;
		width: 1216px;
	}

	#wrapper {
		margin: 0 auto;
		width: 1176px;
		text-align: left;		 /* ??? */ 
		background: url(content.gif) top repeat-y;
	}

	#content {
		width: 1136px;
		min-height:600px;
		margin: 0 auto;
		text-align: center;
		padding: 10px 20px 10px 20px;		/* haut | droit | bas | gauche */
		overflow: hidden;
	}

	#main_full {
		width: 936px;				 /* ex 926 */
		padding: 0 10px 0 10px;     /* haut | droit | bas | gauche */
		text-align: left;
		/*margin-left:200px;*/
		overflow: hidden;
	}

	#main {
		width: 936px;
		padding: 0 6px;             /* vertical | horizontal */
		text-align: left;
		/*margin-left:200px;*/
		overflow: hidden;
	}

	#navigation {
		width: 900px;
		text-align: center;
		padding: 10px 18px 10px 18px;  /* haut | droit | bas | gauche */
	}

	#content_bottom {
		background: url(content_bottom.jpg) top center no-repeat;
		height: 10px;
		margin-bottom: 10px; 
	}



	/**************************** MENU GAUCHE *********************************/

	#leftmenu {
		margin: 0;
		width: 180px; /* 180  */
		float: left;
		text-align: left;
		padding: 0;
		overflow: hidden;
	}

	#mainmenu {
		margin: 0;
		padding: 0;
		width: 100%;
	}

	.navbar {
	  padding: 0;
	  margin: 0;
	}

	.navbar li {
	  padding: 0;
	  margin: 0;
	}

	.navbar li ul {
	  margin: 0;
	  padding: 0;
	}

	/* Texte du Menu */
	.navbar li ul li {
		margin-left: 14px;
		min-height: 25px;
		font-size: 0.9em;
		font-weight: 400; /* normal */
		font-family: var(--font-menu-desktop);
	}

	.navbar li ul li a{
		text-decoration: none;
	}
	
	/* Texte dans l'image du menu */
	.module {
		color: #666;
		font-family: var(--font-menu-desktop);
		font-size: medium;
		text-align: left;
		height: 30px;
		text-decoration: none;
		padding: 0 0 4px 10px;
		background: url(bouton.jpg) top center no-repeat;
		font-weight: 400;
		line-height: 31px;
		margin: 10px 0 5px 0;   /* haut | droit | bas | gauche */
		padding-left: 15px;
		text-transform: uppercase;
	}

/*	.module a {
		text-decoration: none;
		color: #666;
		font-family: var(--font-menu);
		font-size: 14px;
		font-weight: normal;
		text-transform: uppercase;
	}
*/

	.titre_page_nav img {
		height: 64px;
	}

	.titre_page_logo {
		height: 40px;
		position: absolute;
		 bottom: 0;
		 right:0;
	}

	.titre_page_logo img {
		height: 100%;
	}
	
	/* masquer/afficher les éléments  */

	.desktop { 
		display: block;
		display: revert !important; /* affichage des éléments */
	}
		   
	.no-desktop { display: none !important; /* masquage des éléments */ 
	}
	
	/* Ne pas afficher le mini menu */
	.minimenu { display: none !important; /* masquage des éléments */ 
	}
	
	
	/*    TAILLES ELEMENTS POST   */


	
	#post_logo_photo { 
		background: url(../images/post/post_photo.png) no-repeat; 
		background-size: var(--post-logo-size-desktop);
	}

	
	#post_logo_video {
		background: url(../images/post/post_video.png) no-repeat;
		background-size: var(--post-logo-size-desktop);
	}

	#post_logo_audio {
		background: url(../images/post/post_audio.png) no-repeat;
		background-size: var(--post-logo-size-desktop);
	}

	#post_logo_fichier {
		background: url(../images/post/post_fichier.png) no-repeat;
		background-size: var(--post-logo-size-desktop);
	}		

	#post_logo_citation {
		background: url(../images/post/post_citation.png) no-repeat;
		background-size: var(--post-logo-size-desktop);
	}	

	#post_logo_lien {
		background: url(../images/post/post_lien.png) no-repeat;
		background-size: var(--post-logo-size-desktop);
	}

	#post_logo_texte {
		background: url(../images/post/post_texte.png) no-repeat;
		background-size: var(--post-logo-size-desktop);

	}	

	.post_logo {
		width: var(--post-logo-size-desktop);  
		height: var(--post-logo-size-desktop);
		/*background: url(../images/post/post_photo.png) no-repeat;
		background-size: var(--post-logo-size-desktop);*/
	}
	
	.post_logo img{
		width: var(--post-logo-size-desktop);
		height: var(--post-logo-size-desktop);
	}	


	.check {
		/*vertical-align: bottom;*/
		max-width:14px;
		max-height:14px;
		padding-left: 2px;
		padding-right: 2px;
		border: 0;
	}
	
	.post_lien img {	
		max-height:20px;
	}
	
	
	
}


/****************************************************************************************/
/*************************************** MOBILE *****************************************/

@media (max-width: 1235px) {
	
	body {
		font-size: 2em;
	}
	
	.big {
		zoom: 2.5;
	}
	
	/************************ MENU GAUCHE en HAUT *******************************/


	
	/******** MENU **********/

	#mainmenu  {
		margin: 0;
		padding: 0;
		width: 100%;
		height: 127px; /* A AJUSTER en fonction de la police (90 si system-ui, 80 si Montserrat) */
		z-index: 99; /* pour que le menu de navigation soit placé au sommet d'autres éléments. */
		position: relative;
		text-align: left;
		background-color: #444444;
		color: white;
		font-family: var(--font-menu-mobile);
		/*font-size: 100%;  /* On remet à 0 */
		/*font-size: 2.5em;*/
		font-size: 48px;
	}
	
	.minimenuright {
		margin: 5px 10px; /* A AJUSTER pour recentrer */
		padding: 0;
		float: right;
		display: flex;
		align-items: center;
	}
	
	.minimenuright img {
		padding: 10px 20px;
		height: 100px;
	}
	
	/* Barre titre Menu */
	.minimenuleft {
		/*width: 500px;   /* largeur des elements du menu */
		cursor: default;
		overflow: hidden;
		float: left;
		/*padding: 5px 10px;*/
	}

	.navbar {
	 /* width: 100%;
	  height: 100%;*/
	  padding: 0;
	  margin: 0;
	  position: absolute; /* pour que le menu déroulant ne tirent pas d'autres éléments vers le bas */
	}
	
	.minimenutext {
		padding: 17px 10px;   /* Permet de regler l'alignement vertical */
		font-size: 1.5em; /* MENU a une taille double que les elements du menu  */
		display: flex;
		align-items: center;
	}

	.minimenutext img {
		padding: 10px 30px;  /* Permet de regler l'alignement horozontal */
		height: 60px;
	}	

	/* Ligne du Menu */
	.navbar li {
	  border-top: 1px solid #c9d4d8;

	  width: 700px;   /* largeur des elements du menu */
	  list-style: none;
	  color: white;
	  padding: 0;
	  margin: 0;
	  background-color: #777777;
	}

	/* Ligne du Menu non cliquable */
	.module {
		/*border-left: 1px solid #ccc9c9;*/

		display: block;

		/*line-height: auto; /* espacement des lignes d'un paragraphe */
		margin: 0;  /* haut | droit | bas | gauche */
		padding: 0;
		/*height: auto;*/
		padding: var(--menu-line-height) 0 var(--menu-line-height) 10px;  /* A AJUSTER pour les hauteur de ligne */
	
		text-transform: uppercase;
		font-weight: bold;
		text-decoration: none;
		color: white;
	}

	/* Box déroulés */
	.navbar a {
		/*border-left: 1px solid #ccc9c9; */
		display: block;
		margin: 0;
		padding: var(--menu-line-height) 0 var(--menu-line-height) 30px;   /* A AJUSTER pour les hauteur de ligne */
		line-height: auto;
	}

	/* afficher le menu à cliquer */
	.navbar:hover li ul {
	  display: block;
	}
	
	.navbar:hover li {
	  display: block;
	}
	
	.navbar li:hover {
	  /*background-color: #444444;*/
	  cursor: default;		
	}
	
	/* masquer le menu à cliquer */ 
	.navbar li {
	  display: none;
	  height: auto;
	  margin: 0;
	  padding: 0;
	}
	
	/* masquer le menu à cliquer */ 
	.navbar li ul {
	  display: none;
	  height: auto;
	  margin: 0;
	  padding: 0;
	}
	/* afficher le menu à cliquer */
	.navbar li:hover ul {
	  display: block;
	}

	/* box du menu à cliquer*/
	.navbar li ul li {
	  background-color: #666666;
	}

	/*Lien du menu à cliquer*/
	.navbar li ul li a {
		text-decoration: none;
		color: white;	
	}
	.navbar li ul li a:hover {
	  background-color: #a3a1a1;
	  color: var(--link-hover);
	}
	


	#main_full {
		padding: 0 10px 0 10px;     /* haut | droit | bas | gauche */
	}
	
	
	.titre_page_nav img, .titre_page_nav_right img{
		width: 128px;
	}
	
	
	/* masquer/afficher les éléments  */

	.mobile { 
		display: block;
		display: revert !important; /* affichage des éléments */
	}
		   
	.no-mobile { display: none !important; /* masquage des éléments */ 
	}

	
	
	/*    TAILLES ELEMENTS POST   */
	
		
	#post_logo_photo {
		background: url(../images/post/post_photo.png) no-repeat;
		background-size: var(--post-logo-size-mobile);
	}

	#post_logo_video {
		background: url(../images/post/post_video.png) no-repeat;
		background-size: var(--post-logo-size-mobile);
	}

	#post_logo_audio {
		background: url(../images/post/post_audio.png) no-repeat;
		background-size: var(--post-logo-size-mobile);
	}

	#post_logo_fichier {
		background: url(../images/post/post_fichier.png) no-repeat;
		background-size: var(--post-logo-size-mobile);
	}		

	#post_logo_citation {
		background: url(../images/post/post_citation.png) no-repeat;
		background-size: var(--post-logo-size-mobile);
	}	

	#post_logo_lien {
		background: url(../images/post/post_lien.png) top 10px left 10px no-repeat;
		background-size: var(--post-logo-size-mobile);
	}

	#post_logo_texte {
		background: url(../images/post/post_texte.png) no-repeat;
		background-size: var(--post-logo-size-mobile);
	}		

	.post_logo {
		width: var(--post-logo-size-mobile);  
		height: var(--post-logo-size-mobile);	
	}
	
	.post_logo img{
		width: var(--post-logo-size-mobile);
		height: var(--post-logo-size-mobile);
	}	

	.check {
		max-width:24px;
		max-height:24px;
		padding-left: 2px;
		padding-right: 2px;
		border: 0;
	}	
	
	.post_lien img {	
    max-height:30px;
	}
		
		

	
}




#main_full {
	background-color: var(--fond-main);
}







/****************************************************************************************/
/********************************** FORMAT TEXTE ****************************************/

/* Tableaux */
td {
	padding:0;
	margin:0;
}


/* Listes */
ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

li {
	line-height: 20px;
	padding-left: 12px;
	padding-top: 0px;
	list-style: none;
}

.start {
	padding: 100px;
	text-align: center;
}

.start ul li {
  display: inline-block;
  text-align: center;
}

.start ul li div {
	width: 120px;
	padding: 0 20px;
	vertical-align: center;

}

.start ul li div img {
	width: 100px;
}



/*  Liens */
a:link, a:visited {
	text-decoration: none;
	/*text-decoration: underline;*/
	/*font-weight: bold;*/
	color: var(--link);
	outline: none;
}

a:hover {
	text-decoration: none;
	/*font-weight: bold;*/
	color: var(--link-hover);
}

/* Paragraphes */

p {
	font-size: 100%;
	margin-top: 5px;
	margin-bottom: 5px;
	color: var(--text);
}


/****************************************************************************************/
/********************************** FORMAT IMAGE ****************************************/

a img {
	border: 0;
}


/* Affichage du bouton de lecture sur les video */
a.play-button-link {
	position:relative;
	display:inline-block;
	line-height:0px;
}

a.play-button-link img.play-button {
    position: absolute;
	bottom: 22%;
	left: 40%;
	z-index: 10;
	margin: 0 0 0 -50px;
	opacity:0.6;
	display:inline-block;
	/*max-width: 20%;	*/
}

a.play-button-link:hover img.play-button {
	opacity:1.0;
}
/* *********************************************** */


/* DEBUT AFFICHAGE GALLERY */
.gallery_full {
	width:900px;
	border: 0;
	margin: 0;
	padding: 0;
}
.gallery_block {
	width:222px;
	min-height:222px;
	margin: 0;
	padding: 0;
	border: 0;
	overflow: hidden;
	display: inline-block;
	display: -moz-inline-block;
	vertical-align: middle;
	position: relative; /* important for absolute pos of child img */
}
/* pour albums */
.gallery_list {
	height:200px;
	margin: 0;
	padding: 10px 15px;
	overflow:hidden;
}
.text_list {
	margin-left: 220px;
}
/*pour images */

.gallery_thumb {
	width:200px;
	height:200px;
	margin: 0;
	padding: 10px 15px;
	overflow:hidden;
}

.gallery_image {
	/* En tout 190 de large */
	width:170px;
	height:170px;
	margin: 10px;
	padding: 0;
	position:absolute;
	/* Petite image entiere */
	background-position: center;
	background-size: cover;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	background-repeat: no-repeat;
	/*--Effets boite onbree en CSS3--*/
	-webkit-box-shadow: 0px 0px 15px #000;
	-moz-box-shadow: 0px 0px 15px #000;
	box-shadow: 0px 0px 15px #000;
	/*--Coins arrondis en CSS3--*/
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
}

.gallery_image:hover {
	width:190px;
	height:190px;
	margin: 0;
	overflow:visible;
	/*--Effets boite onbree en CSS3--*/
	-webkit-box-shadow: 0px 0px 10px #000;
	-moz-box-shadow: 0px 0px 10px #000;
	box-shadow: 0px 0px 10px #000;
}
/* FIN AFFICHAGE GALLERY */


/* AFFICHAGE IMAGES EN JQUERY */
#fade { /*--Masque opaque noir de fond--*/
	display: none; /*--masqué par défaut--*/
	background: #000;
	position: fixed; left: 0; top: 0;
	width: 100%; height: 100%;
	opacity: .80;
	z-index: 9999;
}
.popup_block{
	display: none; /*--masqué par défaut--*/
	background: #fff;
	padding: 20px;
	border: 20px solid #ddd;
	float: left;
	position: fixed;
	top: 50%; left: 50%;
	z-index: 99999;
	/*--Les différentes définitions de Box Shadow en CSS3--*/
	-webkit-box-shadow: 0px 0px 20px #000;
	-moz-box-shadow: 0px 0px 20px #000;
	box-shadow: 0px 0px 20px #000;
	/*--Coins arrondis en CSS3--*/
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
}
img.btn_close {
	position:relative;
	z-index:5;
	border:0;
	float: right;
	margin: -55px -55px 0 0;
}
/*--Gérer la position fixed pour IE6--*/
*html #fade {
position: absolute;
}
*html .popup_block {
position: absolute;
}
/* FIN AFFICHAGE IMAGES EN JQUERY */


/*********************************************************************************************/
/******************************** TITRE PAGE *************************************************/

.titre_page{
	/*position:relative;*/
	margin: 0;
	/*padding: 0 20px 10px 20px; /* haut droite bas gauche */
	padding-bottom: 10px;
	text-align: left;
}

.titre_page_location {
	padding-bottom: 10px;
	text-align: left;
	line-height: 12px;
	text-transform: uppercase;
}

.titre_page_titre {
	width: 100%;
	margin-top: 10px;
	text-align: left;
}

.titre_page_titre img {
	width: 128px;
	float: left;
	margin-right: 20px;
	margin-bottom: 20px;
}


/* LEVEL */

.titre_page_level {
	clear: both;

	/*max-width: 1150px; */
	padding-bottom: 5px;
}

.titre_page_level div {

	margin: 0 5px;
}

.titre_page_level form {
	margin: 0 5px;
}
/*
.titre_page_level a {
	text-decoration: none;
}
*/
.titre_page_level img {
	/*display: block;  plus bas */
	/*width: 40px;*/
}

.titre_page_level a img:hover {
	box-shadow: 0 0 2px 1px rgba(0, 140, 186, 0.5);
}


/* NAVIGATION */

.titre_page_nav {
	clear: both;
	display: flex;  /* espacement dynamique */
	justify-content: space-between;  /* pour repartir sur l'espace */
	/*max-width: 1150px; */
	padding-bottom: 5px;
	position: relative;
}

.titre_page_nav div {
	display: flex;
	justify-content: center;  /* Align horizontal */
	align-items: center;      /* Align vertital */
	margin: 0 5px;
}

.titre_page_nav form {
	margin: 0 5px;
}
/*
.titre_page_nav a {
	text-decoration: none;
}*/


.titre_page_nav a img:hover {
	box-shadow: 0 0 2px 1px rgba(0, 140, 186, 0.5);
}





.titre_page_nav_right {
	float: right;
	padding-left: 20px;
	padding-top: 10px;
	text-align: right;
}

.titre_page_nav_right img{
	width: 200px;
	max-height: 128px;
}


.titre_page_texte {
	font-size: 100%;
}



h1 {
	margin: 0 0 10px 0;
	font-size: 100%;
	font-size: xxx-large;
	font-weight: bold;
	text-transform: uppercase;
	font-variant: small-caps;
	color: var(--texte-h1);
}

h2 {
	margin: 0 0 5px 0;
	font-size: 100%;
	font-size: xx-large;  -epub-text-transform: capitalize;
	font-weight: bold;
	text-transform: capitalize;
	font-variant: small-caps;
	color: var(--texte-h2);
}

h3 {
	margin: 0 0 5px 0;
	font-size: 100%;
	font-size: xx-large;
	font-weight: bold;
	font-variant: small-caps;
}

h4 {
	margin: 0;
	font-size: 100%;
	/*font-size: 1.1em;*/
}

/*
.titre_page_nav a img:hover {
	-ms-transform: scale(1.5); 
	-webkit-transform: scale(1.5); 
	transform: scale(0.8);	
}

.titre_page_nav_right a img:hover {
	-ms-transform: scale(1.5); 
	-webkit-transform: scale(1.5); 
	transform: scale(0.8);	
}
*/


/*********************************************************************************************/
/*********************************** Un POST *************************************************/

.post_block {
	position:relative;  /* Pour que les logo a l'interieur soit fixe */
	background-color: var(--fond-post);
	margin: 0;
	padding: 15px;
	border:1px solid var(--text-post);
	border-radius:5px;
	margin-bottom: 20px;
	/*border: 3px solid green;*/
}

/* HEAD */

.post_head {
	margin: 0;
	padding: 5px 5px 10px 5px;
	clear:both;
	/*border: 3px solid blue;*/
}

.post_logo {
	position: absolute;
    top: 10px;
    left: 10px;
	text-align: left;
	margin: 0;
	padding: 0;
	/*background-size: --post-logo-size;*/
}




		

/* La taille du logo depend de la resolution */


.post_time {
	position: absolute;
    top: 10px;
    right: 10px;
	color: var(--text-post);
	font-size: 80%;
	text-align: right;
}

.post_time img {
	max-width: 50px;
	max-height: 50px;
}

.post_title {
	padding: 20px 70px 0 70px;
	text-align: center;
	font-size: 125%;
	width: auto;
	display: inline-block;
	vertical-align: middle;
}

.post_title img {
	max-width: 35px;
	max-height: 35px;
	vertical-align: text-top;
}

/* MAIN */

.post_main {
	margin: 0;
	padding: 0;
	clear:both;
	/*border: 3px solid red;*/
}


.post_text {
	margin: 0;
	padding: 10px;
	/*width: auto;*/
	/*text-align: justify;*/
   /* text-align-last: center;*/
	text-align:left;
	/*display: inline-block;*/
	color: var(--text-post);
	font-size: 100%;
}


.post_photo_full {
	margin: 0;
	padding: 0;
	text-align: center;
	width: 100%;
}

.post_photo_full img {
	width: 100%;
	max-height:900px;
	-o-object-fit: contain;
	object-fit: contain;
	border: 0; 
	margin: 0;
	padding: 1px;	
}

.post_photo_full video {
	width: 100%;
	max-height:900px;
	-o-object-fit: contain;
	object-fit: contain;
	border: 0; 
	margin: 0;
	padding: 1px;	
}

.post_middle {
	margin: 0;
	padding: 5px;
	clear: both;
	overflow: hidden;   /* Pour que les float soient a l'interieur */
	vertical-align: top;
	/*border: 3px solid yellow;*/
}

.post_photo_gallery {
	clear: both;
	margin: 0;
	padding: 10px;
	text-align: center;

}

.post_photo_gallery img {
	text-align: center;
    max-height:120px;	
	/*margin: 1px;*/
	margin: 0;
	padding: 1px;
	border: 0;  
}


.post_video {
	text-align: center;
	padding: 0;
	margin: 0;
}


/* COMMENT */

.post_comment {
	position:relative;
	margin: 0;
	padding: 10px 5px 0px 5px;
	clear: both;
	overflow: hidden;   /* Pour que les float soient a l'interieur */
	vertical-align: top;
	/*border: 3px solid yellow;*/
}

.post_comment_logo {
	position: absolute;
    top: 0px;
    left: 10px;
	text-align: left;
	margin: 0;
	padding: 0;
	
}

.post_comment_logo img {
	width: 50px;
}



.post_comment_main {
	padding: 0 70px;
	width: auto;
}


/* FOOT */

.post_foot {
	margin: 0;
	padding: 10px 5px 0px 5px;
	clear: both;
	overflow: hidden;   /* Pour que les float soient a l'interieur */
	vertical-align: top;
	/*border: 3px solid yellow;*/
}

.post_foot h4 {
	padding-top: 10px;
	padding-bottom: 5px;
}

.post_lien {
	margin: 0;
	float: left;
	padding-left: 5px;
	text-align: left;
	font-size: 85%;
	/*border: 3px solid blue;*/
}

.post_lien img {
	vertical-align: middle;
    /*max-height:20px;*/
	padding-right: 5px;
	border: 0;
}

.post_fin {
	margin: 0;
	float: right;
    padding-right: 5px;
	font-size: 80%;
	text-align: right;
	color: var(--text-post);
	/*border: 3px solid red;*/
}




/* ????????????????? */
.post_sign {
	text-align: right;
}

.post_photo {
	margin: 0;
	padding: 0;
	text-align: center;
	/*position: relative;*/
/*	max-height:600px;*/
	width: 100%;
	/*border: 3px solid purple;*/

}


/* Image principale ou image seule */
.post_img1 {
	/*max-width: 860px;*/
	max-width: 100%;
    max-height:1000px; /* TES pour mobile   */ 
	margin: 4px 0px;  /* haut bas ; gauche droite */
/*border: 3px solid red;*/

overflow: hidden;
/*position: absolute;*/
/*	top: 50%;
	transform: translate(0, -50%);
	-webkit-transform: translate(0, -50%);
	-moz-transform: translate(0, -50%);
	-ms-transform: translate(0, -50%);*/


}



/*images secondaires sur tumblr */

.post_miniset {
	clear:both;
	text-align: center;
/*	border: 3px solid yellow; */
}

.post_img2 {
    max-height:120px;	
	margin: 1px;
	border: 0;     /* partout */
}

/* Bas du post */

.post_down {
	display: inline-block;
	width: 100%;
	clear: both;
	margin: 5px 0 0 0;
}



.post_playlist {
	width: 100%;
	text-align: left;
    bottom: 10px;
    right: 20px;
	/*font-size: 12px;
	color: #000;*/
}

/*********************************************************************************************/
/****************************** POUR LES CONTROLS ********************************************/

/* lecture audio */
.controls img:hover {
	box-shadow: 0 0 2px 1px rgba(0, 140, 186, 0.5);
	-ms-transform: scale(1.5); /* IE 9 */
	-webkit-transform: scale(1.5); /* Safari 3-8 */
	transform: scale(0.8);
	cursor: pointer;
}

@media (min-width: 1236px) {
	
	.controls img {
		width:64px;
	}
	
	
}

@media (max-width: 1235px) {
	
	.controls img {
		width:128px;
	}	
	
}




/* navigation */
.navnot {
	opacity: 0.3;
}
.navimg a {
	opacity: 5;
	cursor: pointer;
}
.navimg a img:hover {
	box-shadow: 0 0 2px 1px rgba(0, 140, 186, 0.5);
	-ms-transform: scale(1.5); /* IE 9 */
	-webkit-transform: scale(1.5); /* Safari 3-8 */
	transform: scale(0.8);
	cursor: pointer;
}


/*********************************************************************************************/
/************************ FORMULAIRES avec HoneyPot ******************************************/

.leurre{
	display:none;
}

.form{
	padding: 0; /* passé de 40 a 20 pour les photros */	
	width: auto;
	margin: 0;  /* pour que ce soit centré */
	padding-bottom: 10px;
	
	/*border: 3px solid red;*/
}

.formcontent{
	margin: 0;
	padding: 0;
	text-align: center;
	width: 100%;
	
	/*border: 3px solid blue;*/
}

.formboxcenter{
	text-align: center;
}

.formboxright{
	text-align: right;
	width: fit-content;
	display:inline-block;
}

.formboxleft{
	text-align: left;
	/*width: fit-content;*/
	width: 100%;
	display:inline-block;
}

/*
.forminput{ /* tous les elements
	margin: 10px 0 10px 0;
	padding: 0;	
	/*width: 300px;*/
	/*height: 30px;*/
	/*font-family: system-ui;
	font-size: medium;  
}*/

/* com nom */
.formfield{
	box-sizing: border-box; /* MAGIQUE: pour que la longueur max tienne compte du padding */
	background-color: var(--fond-post);
	border: 1px solid var(--text-post);
	border-radius: 4px;
	margin: 10px;
	padding: 10px 30px;
	min-width: 300px;
	min-height: 30px;
	text-align: left;
	font-family: var(--font-text);
	font-size: 100%;	
}

.formfile{
	margin: 0;
	padding: 4px 4px;
	min-width: 100%;
	min-height: 30px;
	text-align: left;
	font-family: var(--font-text);
	font-size: 100%;
}

.formcheckbox{
	margin: 10px;
	padding: 2px 10px;
	width: 30px;
	height: 30px;
	text-align: left;
	vertical-align: middle;
	font-family: var(--font-text);
	font-size: 100%;
	
}

.formtext{
	margin: 10px 0;
	padding: 5px 10px;
	width: 100%;
	box-sizing: border-box; /* MAGIQUE: pour que la longueur max tienne compte du padding */
	height: 200px;
	text-align: left;
	font-family: var(--font-text);
	font-size: 100%;
	resize: none;
}

/* commentraires */
.formtextmini{
	box-sizing: border-box; /* MAGIQUE: pour que la longueur max tienne compte du padding */
	background-color:var(--fond-post);
	border: 1px solid var(--text-post);
	border-radius: 4px;
	margin: 10px 0;
	padding: 5px 10px;
	width: 100%;
	height: 100px;
	text-align: left;
	font-family: var(--font-text);
	font-size: 100%;
	resize: none;
}

.formsubmit{
	margin: 10px;
	padding: 10px 30px;
	min-width: 120px;
	min-height: 30px;
	text-align: center;
	font-family: var(--font-text);
	font-size: 100%;
}

::placeholder {
  color: var(--text-post);
  opacity: 1; /* Firefox */
}





/*********************************************************************************************/
/*********************************** MENU DEROULANT ******************************************/

/* Reset first 
*,
*::before,
*::after {
  box-sizing: border-box;
}
*/
/*
:root {
  --select-border: #777;
  --select-focus: blue;
  --select-arrow: var(--select-border);
}
*/
  
.select {
  width: 95%;
  min-width: 12ch;
  max-width: 30ch;
  border: 1px solid #777;
  border-radius: 0.25em;  /* proportionnel au font size */
  margin-top: 0.8em;  /* Espace superieur */
  padding: 0.3em 0em;
  padding-bottom: 0.1em; /* pour lever le texte */
  /*font-size: 1.25rem;*/
  font-size: 100%;
  cursor: pointer;
  line-height: 1.3;
  background-color: #fff;
  background-image: linear-gradient(to top, #f9f9f9, #fff 33%);
    
  display: grid;
  grid-template-areas: "select";
  align-items: center;
}

select {
  /* A reset of styles, including removing the default dropdown arrow*/
  appearance: none;
  /* Additional resets for further consistency*/
  background-color: transparent;
  border: none;
  margin: 0;
  width: 100%;
  font-family: inherit;
  font-size: inherit;
  cursor: inherit;
  line-height: inherit;
  text-align: center;
  
  outline: none;
 
}




.select::after {
  /* La fleche */
  content: "";
  width: 1em;
  height: 0.5em;
  background-color: #777;
  clip-path: polygon(60% 0%, 0% 0%, 30% 100%); /* haut-droite (droite 80 haut 0) ; haut-gauche (gauche 0 haut 0) ; bas (centre 40 bas 100 )  */
}

select , .select:after {
  /* Case de la fleche */	
  grid-area: select;
  justify-self: end;
}

/* WAVEFORM */

 .waveform ::part(wrapper) {
	--box-size: 10px;
	/*background-image: 
	  linear-gradient(transparent calc(var(--box-size) - 1px), blue var(--box-size), transparent var(--box-size)), 
	  linear-gradient(90deg, transparent calc(var(--box-size) - 1px), blue var(--box-size), transparent var(--box-size));*/
	background-size: 100% var(--box-size), var(--box-size) 100%;
  }

  .waveform ::part(cursor) {
	height: 100px;
	top: 28px;
	border-radius: 4px;
	border: 1px solid Blue;
  }

  .waveform ::part(cursor):after {
	content: '🏄';
	font-size: 1.5em;
	position: absolute;
	left: 0;
	top: -28px;
	transform: translateX(-50%);
  }
  
   .waveform ::part(region) {
	/*background-color: rgba(0, 100, 0, 0.25) !important;*/
	font-size: 1.5em;
	padding-top: 42px;  /* Pour etre centré verticalement */ 
	text-shadow: 0 0 2px #fff;
  }