/*------------------------------------------------------------------------------------------
Structure de l'index                                                                        
                                                                                            
DIV #page .site .centreh                         : toute la page
	LABEL #vertical-panel-label                    : 
	INPUT #vertical-panel-input (checkbox)         : 
	DIV   #onglets                                 :          
	SPAN  .accueil-label                           : 
	DIV   #menumenu                                : zone de recherche et les menus
		HEADER   #headermenu                         : 
	DIV   #site-content                            : 		
		ASIDE #box                                   : 	
			INPUT  #lateral-panel-input (checkbox)     : 
			LABEL  #lateral-panel-label .centreh       : 
			IFRAME #sommaire                           : 
		SECTION  #secprince .boxprince               : 
			INPUT  #principal-panel-input (checkbox)   : 
			LABEL  #principal-title                    : 
			IFRAME #principal                          : 
--------------------------------------------------------------*/

:root {
	--coul-fondmenu: #00A000;
	--coul-fondsomm: #006000;
	
	--LargeurPanneaux: 480px;
	--StockageLatPan: 780px;
	--DebutLatPanLab2V: 865px;	
	--LargeurOngletMenu: 60px;
	--LargeurOngletSommmaire3V: 170px;
	--HauteurOnglets: 64px;
	--DecalageLatPanLab : -64px;
	--HauteurOngletsImage : 48px;
	--MargeOngletsImage: 8px 6px 0 6px; 
	--IconeMenuTop: 4px;
	--IconeMenuLeft: 6px;

/*	--Radius: 15px 15px 0 0; */
	--Radius: none;
	
}

@media screen and (min-width: 60em) {
	:root {
		--LargeurOngletMenu: 40px;
		--LargeurOngletSommmaire3V: 170px;
		--HauteurOnglets: 32px;
		--DecalageLatPanLab : -32px;
		--HauteurOngletsImage : 24px;
		--MargeOngletsImage: 6px 6px 0 6px; 
		--IconeMenuTop: 4px;
  	--IconeMenuLeft: 8px;
	}
}


/*--------------------------------------------------------------
## pas media querie tout support                                
--------------------------------------------------------------*/

#site-content {
	background-color:#FFF;
}

/*logo accueil lien */
.accueil-label {
	display: none;
	position:absolute;
	top:0;
	left:0;
}
/* logo un peu plus petit et centré avec un espace de 2px - FH 2020-12-09 */
.accueil-label img {
  width: var(--HauteurOngletsImage);
  margin: var(--MargeOngletsImage);
}

/*place pour onglets*/
#site-content {
	margin-top :0px;/* 4/12 10px;/*place pour les onglets border radius*/
	margin-left:0px;
	/* height:calc(100vh - 11px); la hauteur est parametre ligne 286   */
}
/*contenant de l'iframe*/
#secprince {
  /* height: calc(100vh - 35px);la hauteur est parametre ligne 286 */
  width: var(--LargeurPanneaux);
  overflow: hidden; /*pour cacher la barre de défilement verticale de liframe voir ci-dessous */
}
/*iframe*/
#principal {
  height: 100%;
  width: 110%;/*105%; /*pour cacher la barre de défilement verticale ascenseur*/
  overflow: auto;
	margin-top: 0px;
}

#box {/*l identifiant de laside contenant de l'iframe SOMMAIRE*/
  z-index: 9998;
  position: absolute;
  top: var(--HauteurOnglets);
  left: 0;
  /* height: calc(100vh - 35px);la hauteur est parametre ligne 286 */
  width: var(--LargeurPanneaux);
  margin: 0;
  padding : 0;
}

/* Polices et comportement en commun des titres
des volets principal et latéral */

#principal-title,
#lateral-panel-label {
	display: block;
	overflow: hidden;
	height: var(--HauteurOnglets);
	line-height: var(--HauteurOnglets);
	text-decoration:none;
	text-overflow: ellipsis;
	text-align: center;
	white-space: nowrap;
	word-wrap: normal;
	cursor: pointer;
	font-family: 'Roboto Condensed';
  font-size: 150%;
}
/*habillage languette icone */
#lateral-panel-label img,
#principal-title img {
	vertical-align: middle;
  width: var(--HauteurOngletsImage);
	margin: var(--MargeOngletsImage);
	float:left;
}
#lateral-panel-input {
  position: absolute;
  left:-999em;
}
#lateral-panel-label {
	padding: 0;
	position:absolute;
	top: var(--DecalageLatPanLab);					
	left: var(--StockageLatPan);						/* position de stockage */
	width: var(--LargeurOngletSommmaire3V);	/* 160px */
	border-radius: var(--Radius);
	color:white;
	background-color: var(--coul-fondsomm);
}



/*l'iframe*/
#sommaire {
	width: 100%;                  /* largeur 100% de son parent */
	height: 100%;                 /* hauteur 100% de son parent */
	margin: 0;
	padding: 0;
	/*cacher et bloquer  la scrollBar horizontal */
	overflow-x: hidden;
}

#sommaire {
	/* box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3); */
	transition: all .5s;
	-webkit-transition: all .5s;
}

/**************************/
/*2 header menu  vertical */
/**************************/

/*Nous allons commencer par positionner et dimensionner la <div > du menu qui est le bloc de référence.*/
/*l identifiant */
#menumenu {
	z-index: 9999;                  /* pour être au dessus des autres éléments */
	position: absolute;                /* ne suit pas le scroll de la page et sert de réfèrent */
	top: var(--HauteurOnglets);                         /* 0position en haut */
	left: 0;                    /* à gauche */
	width: var(--LargeurPanneaux);
	/* height: calc(100vh - 35px);la hauteur est parametre ligne 286 */
}


/*l'<input id="vertical-panel-input">, c'est le contrôleur de l'action,
nous le déplaçons pour qu'il ne soit pas visible dans la page.*/
#vertical-panel-input {
	position: absolute;           /* pour sortir l'élément du flux */
	left: -999em;                 /* position hors de la fenêtre */
}

/*l'élément <label id="vertical-panel-label"> est la liaison entre l'utilisateur et l'<input id="lateral-panel-input">.*/
#vertical-panel-label {
	z-index: 1;               		    /* on le met au dessus */
	position: absolute;       		    /* par rapport a la div page */
	top: 0;                   		    /* position en haut */
/*	left:36px; */            			  /* alignement sur le bord droit du parent */
	left:0px;                  			  /* alignement sur le bord droit du parent */
	width: var(--LargeurOngletMenu);  /* dimensions respectables */
	height: var(--HauteurOnglets);
	cursor: pointer;
}

/*le menu*/
#headermenu {
	z-index: 30;                  /* un peu au-dessus du trait */
	position: absolute;           /* pour sortir l'élément du flux, il va bouger */
	top: 0;                       /* position en haut */
	left: 0;                      /* alignement sur bord gauche du parent */
	width: calc(100%) ;     /* largeur 100% de son parent + le bord */
	height: calc(100%);                 /* hauteur 100% de son parent */
}

/*menu aligne à gauche*/
#navigation-site,
.menu-toggle {
	justify-content: flex-start;
	align-content: flex-start;
	background-color: var(--coul-fondmenu);
	/*border : 1px blue solid;*/
}

/*mouvement*/
#vertical-panel-input:checked ~ #menumenu {
	transform: translateY(0%);    /* translation vers le bas */
	-webkit-transform: translateY(0%);
	-moz-transform: translateY(0%);
}

#vertical-panel-label, #menumenu {
	/* box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3); */
	transition: all .5s;
	-webkit-transition: all .5s;
}

/*habillage languette*/
#vertical-panel-label:before {
  /* content:url(/icones/SVG_menu.svg); */	/* onglet toujours vert */
	content:url(/icones/SVG_menu_blanc.svg);
  position: absolute;
  top: var(--IconeMenuTop);
  left: var(--IconeMenuLeft);
  width: var(--HauteurOngletsImage);
  height: var(--HauteurOngletsImage);
}

#vertical-panel-label {
	line-height:26px;
	text-align:center;
	background-color: var(--coul-fondmenu);
	border-radius: var(--Radius);
}
#vertical-panel-input:checked ~ #vertical-panel-label {
	background-color: var(--coul-fondmenu);
	color:white;
}

/***************/
/* 3/ principal*/
/***************/
#principal-panel-input {
  position: absolute;           /* pour sortir l'élément du flux */
  left: -999em;                 /*-999em position hors de la fenêtre */
}

/*titre onglet principal*/
#principal-title {
	z-index: 1;                   /* on le met au dessus */
	position: absolute;           /* par ra  pport a divpage */
	top: 0px;                     /* position en haut */
	left: 230px;                   /* 113 + 150 px + bordures  */
	width: 242px;                 /* 270 moins 8 pour ne pas coller à droite */
	border-radius: var(--Radius);
	border: none;
	color:black;
	background-color:white;
}

/* moins de marge à droite plus en haut */
.PAGEPRINCIPALE .chronique {
	margin-left: 30px;
	margin-top: 77px;
}



#onglets {
	width: var(--LargeurPanneaux);
	height: var(--HauteurOnglets);
	background-color:white;
	position: absolute;
	top: 0;
	left: 0;
}
#box {
	transform: translateX(-150%);
	-webkit-transform: translateX(-150%);
	-moz-transform: translateX(-150%);
}
#lateral-panel-input:checked ~ #sommaire {
	transform: translateX(150%);
	-webkit-transform: translateX(150%);
	-moz-transform: translateX(150%);
}

#menumenu {
	transform: translateY(-299%);
	-webkit-transform:  translateY(-299%);
	-moz-transform: translateY(-299%);
}

/*------------------------------------------------------------*/
/*                                                            */
/*   dimensions initiales : zoom 0.6 pour très petit device   */
/*                                                            */
/*------------------------------------------------------------*/

html { zoom: 0.6; }
#site-content, #box, #menumenu { height: calc( (100vh / 0.6) - var(--HauteurOnglets) );	/* ( hauteur écran / zoom ) - hauteur onglet; */ }
#secprince, #principal { height: calc(100vh / 0.6);																			/* ( hauteur écran / zoom ) */ }

/*--------------------------------------------------------------
## media querie  1em = 16px >=360px 22.5em = 75%                
--------------------------------------------------------------*/
@media screen and (min-width: 22.5em) {
  /*zoom 360/480*/
	html { zoom: 0.75; }
	#site-content, #box, #menumenu { height: calc( (100vh / 0.75) - var(--HauteurOnglets) );	/* ( hauteur écran / zoom ) - hauteur onglet; */ }
	#secprince, #principal { height: calc(100vh / 0.75);																			/* ( hauteur écran / zoom ) */ }
}
/*--------------------------------------------------------------
## media querie  1em = 16px >=375px 24.4375em = 78.125%         
--------------------------------------------------------------*/
@media screen and (min-width: 24.4375em) {
  /*zoom 375/480*/
	html { zoom: 0.78125; }
	#site-content, #box, #menumenu { height: calc( (100vh / 0.78125) - var(--HauteurOnglets) );	/* ( hauteur écran / zoom ) - hauteur onglet; */ }
	#secprince, #principal { height: calc(100vh / 0.78125);																			/* ( hauteur écran / zoom ) */ }
}
/*--------------------------------------------------------------
## media querie  1em = 16px >=430px 26.875em = 1 colonne        
--------------------------------------------------------------*/
@media screen and (min-width: 26.875em) {
  /*zoom 430/480*/
	html { zoom: 0.89583; }
	#site-content, #box, #menumenu { height: calc( (100vh / 0.89583) - var(--HauteurOnglets) );	/* ( hauteur écran / zoom ) - hauteur onglet; */ }
	#secprince, #principal { height: calc(100vh / 0.89583);																			/* ( hauteur écran / zoom ) */ }
}

/*--------------------------------------------------------------
## media querie  1em = 16px >=480px 30em = 1 colonne            
--------------------------------------------------------------*/

@media screen and (min-width: 30em) {
	
	#IndexGeneral{
		background-color:#B0D0A0;
	}
	
  /*zoom 480/480*/
  html {zoom:1;}
	#site-content, #box, #menumenu { height: calc( (100vh / 1) - var(--HauteurOnglets) );	/* ( hauteur écran / zoom ) - hauteur onglet; */ }
	#secprince, #principal { height: calc(100vh / 1);																			/* ( hauteur écran / zoom ) */ }

	/*Centrage des éléments absolute*/
	.centreh {		/*pour centrer le site   #page */
		position: absolute;
		/* top: 50%; */			/* Supprimé par FH 26/15/2020 */
		left: 50%;
		/* transform: translate(-50%, -50%); */ /* décalage de 50% de sa propre taille */		/* Supprimé par FH 26/15/2020 */
		transform: translate(-50%); /* décalage horizontal de 50% de sa propre taille */
	}
	/*la hauteur ci-desssous override les paramtres de la ligne 286 */
	#site-content {
		height: calc(100vh - 0px);		/*19*/
	}
	#box, #menumenu {
		height: calc(100vh - 32x); 
	}
	#secprince { 										/*hauteur centre*/
		height: calc(100vh - 1px);
	}
	
	
	#site-content {
		width: var(--LargeurPanneaux);
		border: none;
		border-radius: var(--Radius);
	}
	
	.MENUCADREHAUT .bouton a,
	.MENUCADREHAUT .bouton span.invalide {
		/* width:148px; */
	}
	#lateral-panel-label {
		position:absolute;
		/* top:-16px;/*4/12*/						/* suppression FH 26/12/2020 */
		top: var(--DecalageLatPanLab);	/*4/12*/						/* suspect FH */
		left: var(--DebutLatPanLab2V);
	}

}
/* fin @media screen and (min-width: 30em) */



		/*--------------------------------------------------------------
		## media querie  1em = 16px >=960px 60em = 2 colonnes           
		--------------------------------------------------------------*/
		@media screen and (min-width: 60em) {
	
			#site-content {
				width:960px;
			}
			
			/*sommaire*/
			#lateral-panel-label {
				padding: 0;
				position: absolute;           /* pour sortir l'élément du flux */
				/* top:-16px;/*4/12*/					/* suppression FH 26/12/2020 */
				top: var(--DecalageLatPanLab);/*4/12*/						/* suspect FH */
				left: 259px;
				width: 442px;
			}
			/*sommaire pas de mouvement*/
			#box {
				transform: translateX(0%);
				-webkit-transform: translateX(0%);
				-moz-transform: translateX(0%);
			}
			#lateral-panel-input:checked ~ #sommaire {
				transform: translateX(0%);
				-webkit-transform: translateX(0%);
				-moz-transform: translateX(0%);
			}
			/*contenant de l'iframe*/
			#secprince { 
				position:absolute;
				top:0;
				left: var(--LargeurPanneaux);
			}
			/*titre onglet principal*/
			#principal-title {
				display:none;
				top:0;
				left: 0px;																	/* pour tenir compte du léger chevauchement des bords */
				width: var(--LargeurPanneaux);
				cursor: auto;	/*pas actif*/
			}
			#principal {
				/* on se positionne en haut */
				position:absolute;
				top:-60px;
				height: calc( 100vh + 60px);
			}
			
			/* on déplace le menu vers le haut ceci nest pas un doublon */
			#menumenu {
				transform: translateY(-299%);
				-webkit-transform:  translateY(-299%);
				-moz-transform: translateY(-299%);
			}
			
		}		/* fin @media screen and (min-width: 60em) */
		
				/*--------------------------------------------------------------
				## media querie  1em = 16px >=1440px 90em = 3 colonnes
				--------------------------------------------------------------*/
				@media screen and (min-width: 90em) {
						
						/* logo accueil lien */
						.accueil-label {
							position:absolute;
							top:0;
							left:0;
							width: 478px;
							height: 30px;
						}
						.accueil-label img {
							display: none;
						}
						
						#site-content {
							width:1440px;
						}
						/*titre onglet principal*/
						#principal-title {
							width: var(--LargeurPanneaux);	
						}
						#box {
							position: absolute;                /* ne suit pas le scroll de la page et sert de réfèrent */
							top: var(--HauteurOnglets);                         /*position en haut */
							top: 0px;                         /*position en haut */
							left:960px;                        /* à gauche */
							height: 100vh;
						}
						
						/*sommaire*/
						#lateral-panel-label {
							display: none;
							padding: 0;
							position: absolute;
							top: var(--DecalageLatPanLab);/*4/12*/						/* suspect FH */
							left:240px;/*240px;/*1200px;*/
							width: var(--LargeurPanneaux);
							background-color: var(--coul-fondsomm);
							color:white;
							cursor: auto;/*pas actif*/
						}
						
						/* on ne déplace pas le menu à gauche  */
						#menumenu {
							transform: translateY(0%);
							-webkit-transform: translateY(0%);
							-moz-transform: translateY(0%);
							/*decalage vers le haut*/
							top: 0px;
							box-shadow:none;	/*pas d ombre*/
							height:100vh;
						}
						.MENUCADREHAUT { 		/* on ajoute un border radius à menu qui est remonté */
							border-radius: var(--Radius);
						}
						#site-content { 		/* pas de bordure à gauche*/
							border-radius: var(--Radius);
						}
						
						/* on n'affiche pas l'icone du menu */
						#vertical-panel-label {
							display:none;
						}
				}		/* fin @media screen and (min-width: 90em) */

/*--------------------------------------------------------------
## MOBILE FIRST fin                                             
--------------------------------------------------------------*/