/*/////////////////////////////////////////////////////////////////////////////////////////////////////////// 
1  -  INFORMATIONS SUR LE SCRIPT ////////////////////////////////////////////////////////////////////////////
///////////////////////////////////////////////////////////////////////////////////////////////////////////// 
	

	A - DESCRIPTION ///////////////////////////////////////////////////

		Bibliothèque de styles CSS spécifiques à wikimaginot
	
	B - VARIABLES UTILISEES ( GET ou SESSION) /////////////////////////

		Aucune

	C - DATE ET MISES A JOUR //////////////////////////////////////////

	 	2024-01-29 	PLA 	Rajout styles menu carto
		2024-01-29 	PLA 	Rajout fond transparent balise img (à tester)
		2024 02 22 	PLA		Modification couleur imgCredits (fond et texte)
		2026 01 27	PLA		Modification classe wrapper body et footer pour positionnement correct du footer
		

/* //////////////////////////////////////////////////////////////////////  
2 -  JEU DE CARACTERES BIBLIOTHEQUE
////////////////////////////////////////////////////////////////////// */ 

			@charset "UTF-8";


/* ////////////////////////////////////////////////////////////////////// */ 
/*  VALEURS GLOBALES PAR DEFAUT 
/* ////////////////////////////////////////////////////////////////////// */ 


			*	{
				padding: 0;
				margin: 0;
				}


		/* Conteneur body -----------------------*/

			body, html {
				min-height: 100vh;
				display: flex;
				flex-direction: column;
				color: #777;
				line-height: 1.8;
				}


		/* Conteneur wrapper --------------------*/
			
				.wrapper{
					flex: 1 0 auto;
					display: flex;
					flex-direction: column;
				}


		/*  Footer -----------------------------*/

			/* classe pied de page - index */
				.footer-index {
					margin-top: auto;
					padding:32px 32px;
					background-color:rgb(235, 234, 246);
					text-align: center; 
					box-shadow: 0px 0px 7px 0px #3ca0e7;
				}

			/* classe pied de page autres pages */

				.footer{
					margin-top: auto;
					padding: 32px;
					background-color: rgb(235, 234, 246);
					text-align: center;
					box-shadow: 0px 0px 7px 0px #3ca0e7;
				}


		/* IMAGES DE FOND PAGES -------------*/

			.bkg {
				background-image:url("../_imgs/bkgd/V70-content-bkg.jpg");
				background-attachment:fixed;
				background-repeat:no-repeat;
				background-position:center;
				}


		/* LIENS ---------------------------- */ 

			A:link {
				text-decoration: none; 
				color :blue;
				}

			A:visited {
				text-decoration: none;
				color :blue;
				}

			A:active {
				text-decoration: none;
				}

			A:hover {
				text-decoration: none; 
				color: orange;
				}	


		/* LISTES ---------------------------- */ 

			ul {
				list-style-position: outside;
				}

			li { 
				margin-left: 20px;
				padding-left: 0px;
				}

		/* ANCRES -----------------------------*/

			/* decalage depuis haut de page (saute menu)*/

			a.anchor {
				display: block;
				position: relative;
				top: -40px; /* hauteur du menu */
				visibility: hidden;
			}			


			

/* ////////////////////////////////////////////////////////////////////// */ 
/*  IMAGES                                                          	*/ 
/* ////////////////////////////////////////////////////////////////////// */ 

	

		/* Images ----------------------------- */

			img {
				border: 0;
				max-width: 100%;
				max-height: 100%;
				background-color : transparent
			}


		/*  Photo profil -----------------------*/

			.zoom {
				transition: transform .2s;
			}

			.zoom:hover {
				-ms-transform: scale(2); /* IE 9 */
				-webkit-transform: scale(2); /* Safari 3-8 */
				transform: scale(3); 
			}

		/* Photo dans fils------------------------*/

			.photo_fils {
				margin:10px; 
				padding-bottom: 35px;
				max-height:200px;
				display:inline-block;
				text-align:center; 
				border:none;
				cursor:default;
			}

			.photo_fils_info { 
				padding: 10px 0px 5px 0px ;
				border: 1px solid #4CAF50;
				text-align:center; 
			}



/* ////////////////////////////////////////////////////////////////////// */ 
/*  MENUS	                                                           	*/ 
/* ////////////////////////////////////////////////////////////////////// */ 


	/* BOUTOINN NEUTRE */

			.menu_btn{
				background-color:rgb(252, 252, 252);
				border:none;
				cursor: pointer;	
				vertical-align:default;
				padding: 0px 5px 0px 5px;
			}

			.menu_btn:hover{
				text-decoration: none;
					color :rgb(136, 136, 244);
			}
			

	/* MENU HORIZONTAL STANDARD*/

		/* Div logo au dessus du menu */
			.menu_logo{
				background-color:rgb(235, 234, 246);	
			}

			nav.primary-navigation {
				width:100%;
				position: sticky;
    			top: 0px;
				z-index: 1;
				margin: 0 auto ;
				display: inline-block;
				text-align: left;
				vertical-align:middle;
				font-size: 14px;
				background: white;
				box-shadow: 0px 0px 7px 0px #3ca0e7;
				
			}
	  
			nav.primary-navigation ul li {
				list-style: none;
				margin: 0 auto;
				/*border-left: 2px solid #3ca0e7;*/
				display: inline-block;
				padding: 7px 10px 7px 10px;
				position: relative;
				text-decoration: none;
				text-align: center;
			}
			  
			nav.primary-navigation li a {
				color:indigo;
				
			}
			  
			nav.primary-navigation li a:hover {
				color: #3ca0e7;
			}
			  
			nav.primary-navigation li:hover {
				cursor: pointer;
			}
			  
			nav.primary-navigation ul li ul {
				visibility: hidden;
				opacity: 0;
				position: absolute;
				padding-left: 0;
				
				left: 0;
				display: none;
				background: white;
				z-index: 100;
			}
			  
			nav.primary-navigation ul li:hover > ul,
			nav.primary-navigation ul li ul:hover {
				visibility: visible;
				opacity: 1;
				display: block;
				min-width: 200px;
				text-align: left;
				padding-top: 20px;
				box-shadow: 0px 3px 5px -1px #3ca0e7;
			}
			  
			nav.primary-navigation ul li ul li {
				clear: both;
				width: 100%;
				padding: 0px 10px 0px 20px;
				text-align: left;
				margin-bottom: 10px;
				border-style: none;
			}
			  
			nav.primary-navigation hr {  
				  margin: 5px 30px 5px 20px;
				  border-color: blue;
				  cursor: none;
			}
			  
			nav.primary-navigation ul li ul li a:hover {
				padding-left: 10px;
				border-left: 2px solid #3ca0e7;
				transition: all 0.3s ease;
			}
			  
			ul li ul li a {
				transition: all 0.5s ease;
			}



	/* MENU HORIZONTAL CARTOGRAPHIE*/

		nav.carto {
			width:100%;
			top: 0px;
			z-index: 1;
			margin: 0 auto ;
			display: inline-block;
			text-align: left;
			vertical-align:middle;
			font-size: 14px;
			background: white;
			box-shadow: 0px 0px 7px 0px #3ca0e7;
			
		}
  
		nav.carto ul li {
			list-style: none;
			margin: 0 auto;
			/*border-left: 2px solid #3ca0e7;*/
			display: inline-block;
			padding: 12px 10px 7px 10px;
			position: relative;
			text-decoration: none;
			text-align: center;
		}
		  
		nav.carto li a {
			color:indigo;
			
		}
		  
		nav.carto li a:hover {
			color: #3ca0e7;
		}
		  
		nav.carto li:hover {
			cursor: pointer;
		}
		  

		
	/* MENU VERTICAL*/

		/* barre horizontale */
			#navVert hr {
				margin: 6px 0;      /* Ajustez selon l'aspect souhaité */
				border: 0;
				border-top: 1px solid #ccc;  /* Ligne personnalisée si besoin */
				}

		/* Dropdown menu */
			.dropdownmenu {
				background-color: rgb(179, 222, 238);
				width: 200px; /* Largeur du menu */
				padding-bottom : 20px;
			}
			.dropdownmenu,
			.dropdownmenu ul {
				/* Suppression des puces et des marges pour les listes du menu et des sous-menus */
				list-style-type: none;
				margin: 0px;
				padding-bottom: 20px;
					
			}
			.dropdownmenu ul {
				/* Masquage des sous-menu par defaut */
				display: none;
				z-index:999;
				border-left: 2px solid #3ca0e7;
				
			}
			.dropdownmenu li {
				/* Positionnement relative des elements de menu pour pouvoir positionner les sous-menu correctement en absolu */
				position: relative;
			}
			.dropdownmenu a {
				/* On transforme les liens en bloc pour pouvoir les dimensionner */
				display: block;
				/* Dimensions des liens */
				width: 200px;
				height: 30px;
				line-height: 30px; /* Doit etre equivalent a la hauteur du menu pour centrer le texte verticalement */
				padding: 6px 10px ;
				text-align: center;
			}
			.dropdownmenu li:hover ul {
				/* Affichage du soumenu au survol */
				display: block;
				/* Positionnement du sous-menu */
				position: absolute;
				top: 0px;
				left: 160px; /* Decalage du sous-menu de la largeur du menu */
				
			}
			.dropdownmenu ul a {
				/* Changement de l'affichage des liens des sous-menus pour ne pas les afficher en inline-block comme les liens de menu, ils seront donc verticaux */
				display: block;
			}
			
			/* Gestion des couleurs */
			.dropdownmenu li {
				background-color: rgb(179, 222, 238); /* Couleur d'arriere-plan du menu */
				margin : 0px;
			}

			.dropdownmenu li a {
				color: black; /* Couleur du texte du menu */
			}

			.dropdownmenu li:hover {
				background-color: rgb(179, 222, 238); /* Couleur d'arriere-plan du menu au survol */
			}

			.dropdownmenu li:hover a {
				color: black; /* Couleur du texte du menu au survol */
			}
			
			.dropdownmenu ul li {
				background-color: rgb(179, 222, 238); /* Couleur d'arriere-plan des sous-menu */
				
			}
			
			.dropdownmenu ul {
				background-color: rgb(179, 222, 238); /* Couleur d'arriere-plan des sous-menu au survol */
				}
			
			.dropdownmenu ul li:hover {
				background-color: rgb(179, 222, 238); /* Couleur d'arriere-plan des sous-menu au survol */
			}
			.dropdownmenu ul li a {
				color: black; /* Couleur du texte des sous-menu */
			
			}
			.dropdownmenu ul li:hover a {
				color: blue; /* Couleur du texte des sous-menu au survol */
			}



/* ////////////////////////////////////////////////////////////////////// */ 
/*  TEXTE   	             	*/ 
/* ////////////////////////////////////////////////////////////////////// */ 


		/* valeurs par défaut --------------------------*/
				body {
					font-family: "Verdana", "Calibri", sans-serif;
					color: #222;
					font-size: 14px; /*taille de base pour 1 em*/
					font-style: normal;
					font-weight: normal;
					line-height: 130%;

					}

				p {	font-size: 100%; 
					font-style: normal;
					font-weight: normal;}

				h1 {
					font-size: 220%;
					
					font-weight: bold;
					color: #007;
					line-height: normal;
					text-indent: 0pt;
					white-space: normal;
					letter-spacing: normal;
					word-spacing: normal;
					}

				h2 {
					font-size: 170%;
					
					font-weight: bold;
					color: #007;
					line-height: normal;
					border: none;
					text-indent: 0pt;
					white-space: normal;
					letter-spacing: normal;
					word-spacing: normal;
					}

				h3 {
					font-size: 130%;
					
					font-weight: bold;
					color: #007;
					line-height: normal;
					text-indent: 0pt;
					white-space: normal;
					letter-spacing: normal;
					word-spacing: normal;
					}

				h4 {
					font-size: 120%;
				
					font-weight: bold;
					color: #444;
					line-height: normal;
					text-indent: 0pt;
					white-space: normal;
					letter-spacing: normal;
					word-spacing: normal;
					}

				pre {
					font-size: 80%;
					color: #222;
					font-style: italic;
					font-weight: normal;
					line-height: normal;
					}

					
 		/* ALIGNEMENT TEXTE -----------------------*/

				.txt_align1{
					position: relative;
					height : auto;
					max-width: 100%;
					padding : 0 20px 0 20px;	
					}

				.txt_align2{
					position: relative;
					height : auto;
					max-width: 100%;
					padding : 0 20px  0 40px;
					}

				.txt_align3{
					position: relative;
					height : auto;
					max-width: 100%;
					padding : 0 20px 0 60px;	
					}

				.txt_align4{
					  position: relative;
					  height : auto;
					  padding : 0 20px 0 80px;	
					  }

				.txt_align5{
					  position: relative;
					  height : auto;
					  padding : 0 20px 0 100px;	
					  }

				.txt_align6{
					  position: relative;
					  height : auto;
					  padding : 0 20px 0 120px;	
					  }

				.txt_align7{
					position: relative;
					height : auto;
					padding : 0 20px 0 140px;	
					}	 

	



/* ////////////////////////////////////////////////////////////////////// */ 	
/*  CARTOGRAPHIE  		*/ 
/* ////////////////////////////////////////////////////////////////////// */ 

				#viewerDiv{
					width: 100%;
					flex: 1 1 auto;
					min-height: 0;
					padding-top: 50px;
					box-sizing: border-box;
				}


/* ////////////////////////////////////////////////////////////////////// */ 
/*    PHOTOS - SLIDE  	*/ 
/* ////////////////////////////////////////////////////////////////////// */ 

		/* PHOTOS ------------ */

				.photo {
					display:inline-block;
					vertical-align:top;
					text-align:center; 
					overflow:hidden;
					border:none;
					}

				 .photo_legende {
					width: 100%;
					text-align:center; 
					overflow:hidden;
					font-style: italic;
					font-size:small;
					}


		/* WIKISLIDE ----------------*/


				.modalSlide , .modalImg {
					display:none;
					padding: 30px 80px 30px 80px;
					max-width: 100%;
					max-height: 100%;
					}


				.imgSlide , .imgImg {
					display:none;
       		 		width:100%;
              		margin-left:auto;
					margin-right:auto;
					position:relative;
					top:50%;
					transform: translate(00%,-50%);
					}

    			.imgLegende {
					position: absolute; 
					bottom: 0px;
					padding: 5px 10px 5px 10px;
					color:white;
					background-color:darkgray;
					opacity: 0.9;
					}
    
			    .imgCredits{
					position: absolute;
					bottom: 0px;
					width: 100%;
					padding:2px;
					text-align:center;
					color:rgb(3, 1, 50);
					font-style: italic; 
					background-color:darkgray;
					opacity: 0.9;
					}

    			.imgBtn {
					position: absolute; 
					top: 0px;
					right:0px;
					padding: 5px 10px 5px 10px;
					cursor:copy;
					pointer-events:auto;
					}

			    .imgSrc {
					max-width:100vw;
					max-height:100vh;
					cursor:not-allowed;
   					}
    
				.imgCov {
					width:100%;
					height:100%;
					cursor:not-allowed;
					}

				.divCov {
					position: absolute;
					bottom: 0px;
					width:100%;
					height:100%;
					}

				.slideBtn{ 
					position:absolute;
					}