/* ###################################################################################################
   #                                         CHARTE GRAPHIQUE                                        #
   ################################################################################################### */
	:root {
		--couleurFond_BarreTitre: 		#FFFFFF;
		--couleurFond_Page: 			#FFFFFF;
		--couleurFond_PiedPage: 		#FFFFFF;
		
		--couleurTitre: 				#000000;
		--couleurTexte: 				#000000;
		--couleurTexte_Carousel: 		#000000;
		--couleurNavigation_Carousel: 	#000000;
		--couleurIndication_Carousel: 	#000000;
		--couleurTexte_PiedPage : 		#000000;
		
		--TaillePoliceTitre : 5em;			/* Taille idéale pour format Full HD (1920x1080px) soit 5*16=80px */
		--TaillePolicePiedPage : 1.25em;	/* Taille idéale pour format Full HD (1920x1080px) soit 1.25*16=20px */
		--TaillePoliceTitreJSON : 2em;		/* Taille idéale pour format Full HD (1920x1080px) soit 2*16=32px */
		--TaillePoliceTxtJSON: 1.4em;		/* Taille idéale pour format Full HD (1920x1080px) soit 1.4*16=224px */
	}
	
	body {
		background-color: var(--couleurFond_Page);
		
	}
	.barreTitre{
		background-color: var(--couleurFondBarreTitre);
	}
	.titre {
		font-family: Vladimir Script, sans-serif;
		color: var(--couleurTitre);
	}
	.txtPiedPage{
		font-family:policePiedPage;
	}
	code
	{
		background-color: transparent;
	}
	code,a,p,h1,h2,h3,h4 {
		font-family: Lato, sans-serif;
		color: var(--couleurTexte);
	}
	footer {
		background-color: var(--couleurFond_PiedPage);
		color: var(--couleurTexte_PiedPage);
	}
/* ################################################################################################### */





/* ###################################################################################################
   #                                     DISPOSITION DES ELEMENTS                                    #
   ################################################################################################### */
   
	/* Affichage sur ecran large et plus (largeur minimum = 992 px inclus) */
	@media (orientation: landscape) and (min-width: 992px)  {
		body {
			margin: 0;
			display: flex;
			flex-direction: column;
			min-height: 100vh;
		}
		main { flex: 1; }

		header { height: 25vh;  }
		
		/*#celluleJSON, #celluleCarousel { height: 34.5vh;}*/
		
		.carousel .item { height: 34.5vh}
		
		.celluleGraph {
			height: 38vh;
			/*width: calc(34.5vh*1.8);	/*format 16/9 eme par rapport à la hauteur fixée */
			/*width: calc(100vw*0.5);		/* 49% de la largeur (vw : viewport width) */
		}
	}
	
	@media (orientation: portrait) and (min-width: 992px)  {
		.carousel .item { height: calc(48vw/1.8); }
		
		.celluleGraph {
			--largeur : 48vw;
			width: var(--largeur);		/* 49% de la largeur (vw : viewport width) */
			height: calc(var(--largeur)/1.8);	/*format 16/9 eme par rapport à la hauteur fixée */
		}
		
		
	}
	
	/* Affichage sur ecran small ou medium (largeur affichage < 900px) */
	@media (orientation: landscape) and (max-width: 991px)  {
		.carousel .item { height: 90vh;}
		/*.celluleGraph 	{ width: 100vw; height: calc(100vw/1.5);} /*=> géré par JS/affichage-graphique.js*/
	}
	
	@media (orientation: portrait) and (max-width: 991px) {
		.carousel .item { height: calc(100vw/1.8);}
		/*.celluleGraph 	{ width: 100vw; height: calc(100vw/1.5);} /*=> géré par JS/affichage-graphique.js*/
	}
	
	.ruche {
		  max-width:100%;
		}
	@media (max-width: 991px) {
		.ruche {
		  max-width:30%;
		}
	}  
/* ################################################################################################### */	


 

/* ###################################################################################################
   #                                         TAILLES POLICES                                         #
   ################################################################################################### */

/* zoom 10% Full HD */
@media screen and (max-width: 1200em) {
	.titre		{	font-size: calc(var(--TaillePoliceTitre)/0.1);	}
	.txtPiedPage{	font-size: calc(var(--TaillePolicePiedPage)/0.1);	}
	.titreJSON	{	font-size: calc(var(--TaillePoliceTitreJSON)/0.1);	}
	.txtJSON	{	font-size: calc(var(--TaillePoliceTxtJSON)/0.1);	}
}

				/* zoom 10% "VGA" */
				@media screen and (max-width: 800em) {
					.titre		{	font-size: calc(var(--TaillePoliceTitre)/1.5/0.1);	}
					.txtPiedPage{	font-size: calc(var(--TaillePolicePiedPage)/1.5/0.1);	}
					.titreJSON	{	font-size: calc(var(--TaillePoliceTitreJSON)/1.5/0.1);	}
					.txtJSON	{	font-size: calc(var(--TaillePoliceTxtJSON)/1.5/0.1);	}
				}

/* zoom 20% Full HD */
@media screen and (max-width: 600em) {
	.titre		{	font-size: calc(var(--TaillePoliceTitre)/0.2);	}
	.txtPiedPage{	font-size: calc(var(--TaillePolicePiedPage)/0.2);	}
	.titreJSON	{	font-size: calc(var(--TaillePoliceTitreJSON)/0.2);	}
	.txtJSON	{	font-size: calc(var(--TaillePoliceTxtJSON)/0.2);	}
}

/* zoom 30% Full HD */
@media screen and (max-width: 400em) {
	.titre		{	font-size: calc(var(--TaillePoliceTitre)/0.3);	}
	.txtPiedPage{	font-size: calc(var(--TaillePolicePiedPage)/0.3);	}
	.titreJSON	{	font-size: calc(var(--TaillePoliceTitreJSON)/0.3);	}
	.txtJSON	{	font-size: calc(var(--TaillePoliceTxtJSON)/0.3);	}
}

				/* zoom 20% "VGA" 
				@media screen and (max-width: 400em) {
					.titre		{	font-size: calc(var(--TaillePoliceTitre)/1.5/0.2);	}
					.txtPiedPage{	font-size: calc(var(--TaillePolicePiedPage)/1.5/0.2);	}
					.titreJSON	{	font-size: calc(var(--TaillePoliceTitreJSON)/1.5/0.2);	}
					.txtJSON	{	font-size: calc(var(--TaillePoliceTxtJSON)/1.5/0.2);	}
				}*/

/* zoom 40% Full HD */
@media screen and (max-width: 300em) {
	.titre		{	font-size: calc(var(--TaillePoliceTitre)/0.4);	}
	.txtPiedPage{	font-size: calc(var(--TaillePolicePiedPage)/0.4);	}
	.titreJSON	{	font-size: calc(var(--TaillePoliceTitreJSON)/0.4);	}
	.txtJSON	{	font-size: calc(var(--TaillePoliceTxtJSON)/0.4);	}
}				
				
				/* zoom 30% "VGA" */
				@media screen and (max-width: 266.67em) {
					.titre		{	font-size: calc(var(--TaillePoliceTitre)/1.5/0.3);	}
					.txtPiedPage{	font-size: calc(var(--TaillePolicePiedPage)/1.5/0.3);	}
					.titreJSON	{	font-size: calc(var(--TaillePoliceTitreJSON)/1.5/0.3);	}
					.txtJSON	{	font-size: calc(var(--TaillePoliceTxtJSON)/1.5/0.3);	}
				}			
				
/* zoom 50% Full HD */
@media screen and (max-width: 240em) {
	.titre		{	font-size: calc(var(--TaillePoliceTitre)/0.5);	}
	.txtPiedPage{	font-size: calc(var(--TaillePolicePiedPage)/0.5);	}
	.titreJSON	{	font-size: calc(var(--TaillePoliceTitreJSON)/0.5);	}
	.txtJSON	{	font-size: calc(var(--TaillePoliceTxtJSON)/0.5);	}
}
				
/* zoom 60% Full HD */
@media screen and (max-width: 200em) {
	.titre		{	font-size: calc(var(--TaillePoliceTitre)/0.6);	}
	.txtPiedPage{	font-size: calc(var(--TaillePolicePiedPage)/0.6);	}
	.titreJSON	{	font-size: calc(var(--TaillePoliceTitreJSON)/0.6);	}
	.txtJSON	{	font-size: calc(var(--TaillePoliceTxtJSON)/0.6);	}
}

				/* zoom 40% "VGA" 
				@media screen and (max-width: 200em) {
					.titre		{	font-size: calc(var(--TaillePoliceTitre)/1.5/0.4);	}
					.txtPiedPage{	font-size: calc(var(--TaillePolicePiedPage)/1.5/0.4);	}
					.titreJSON	{	font-size: calc(var(--TaillePoliceTitreJSON)/1.5/0.4);	}
					.txtJSON	{	font-size: calc(var(--TaillePoliceTxtJSON)/1.5/0.4);	}
				}*/

/* zoom 70% Full HD */
@media screen and (max-width: 171.43em) {
	.titre		{	font-size: calc(var(--TaillePoliceTitre)/0.7);	}
	.txtPiedPage{	font-size: calc(var(--TaillePolicePiedPage)/0.7);	}
	.titreJSON	{	font-size: calc(var(--TaillePoliceTitreJSON)/0.7);	}
	.txtJSON	{	font-size: calc(var(--TaillePoliceTxtJSON)/0.7);	}
}				

				/* zoom 50% "VGA" */
				@media screen and (max-width: 160em) {
					.titre		{	font-size: calc(var(--TaillePoliceTitre)/1.5/0.5);	}
					.txtPiedPage{	font-size: calc(var(--TaillePolicePiedPage)/1.5/0.5);	}
					.titreJSON	{	font-size: calc(var(--TaillePoliceTitreJSON)/1.5/0.5);	}
					.txtJSON	{	font-size: calc(var(--TaillePoliceTxtJSON)/1.5/0.5);	}
				}

/* zoom 80% Full HD */
@media screen and (max-width: 150em) {
	.titre		{	font-size: calc(var(--TaillePoliceTitre)/0.8);	}
	.txtPiedPage{	font-size: calc(var(--TaillePolicePiedPage)/0.8);	}
	.titreJSON	{	font-size: calc(var(--TaillePoliceTitreJSON)/0.8);	}
	.txtJSON	{	font-size: calc(var(--TaillePoliceTxtJSON)/0.8);	}
}

/* zoom 90% Full HD */
@media screen and (max-width: 133.33em) {
	.titre		{	font-size: calc(var(--TaillePoliceTitre)/0.9);	}
	.txtPiedPage{	font-size: calc(var(--TaillePolicePiedPage)/0.9);	}
	.titreJSON	{	font-size: calc(var(--TaillePoliceTitreJSON)/0.9);	}
	.txtJSON	{	font-size: calc(var(--TaillePoliceTxtJSON)/0.9);	}
	.titreJSON	{	font-size: calc(var(--TaillePoliceTitreJSON)/0.9);	}
	.txtJSON	{	font-size: calc(var(--TaillePoliceTxtJSON)/0.9);	}
}			

				/* zoom 60% "VGA" 
				@media screen and (max-width: 133.33em) {
					.titre		{	font-size: calc(var(--TaillePoliceTitre)/1.5/0.6);	}
					.txtPiedPage{	font-size: calc(var(--TaillePolicePiedPage)/1.5/0.6);	}
					.titreJSON	{	font-size: calc(var(--TaillePoliceTitreJSON)/1.5/0.6);	}
					.txtJSON	{	font-size: calc(var(--TaillePoliceTxtJSON)/1.5/0.6);	}					
				}*/

/* format Full HD - Idéal (1920x1080px)=>(120x67.5em) and (min-aspect-ratio: 16/9) */
@media screen and (max-width: 120em) {
	.titre		{	font-size: var(--TaillePoliceTitre);		}		/* étape 1 : idéal 100px 100/16 => var(--TaillePoliceTitre) */
	.txtPiedPage{	font-size: var(--TaillePolicePiedPage);		}		/* étape 1 : idéal 30px 30/16 => var(--TaillePolicePiedPage) */
	.titreJSON	{	font-size: var(--TaillePoliceTitreJSON);	}
	.txtJSON	{	font-size: var(--TaillePoliceTxtJSON);		}
}

				/* zoom 70% "VGA" 
				@media screen and (max-width: 114.29em) {
					.titre		{	font-size: calc(var(--TaillePoliceTitre)/1.5/0.7);	}
					.txtPiedPage{	font-size: calc(var(--TaillePolicePiedPage)/1.5/0.7);	}
					.titreJSON	{	font-size: calc(var(--TaillePoliceTitreJSON)/1.5/0.7);	}
					.txtJSON	{	font-size: calc(var(--TaillePoliceTxtJSON)/1.5/0.7);	}
				}*/

/* zoom 110% Full HD */
@media screen and (max-width: 109.09em) {
	.titre		{	font-size: calc(var(--TaillePoliceTitre)/1.3);	}
	.txtPiedPage{	font-size: calc(var(--TaillePolicePiedPage)/1.3);	}
	.titreJSON	{	font-size: calc(var(--TaillePoliceTitreJSON)/1.3);	}
	.txtJSON	{	font-size: calc(var(--TaillePoliceTxtJSON)/1.3);	}
}
				
/* zoom 120% Full HD 
@media screen and (max-width: 100em) {
	.titre		{	font-size: calc(var(--TaillePoliceTitre)/1.2);	}
	.txtPiedPage{	font-size: calc(var(--TaillePolicePiedPage)/1.2);	}
	.titreJSON	{	font-size: calc(var(--TaillePoliceTitreJSON)/1.2);	}
	.txtJSON	{	font-size: calc(var(--TaillePoliceTxtJSON)/1.2);	}
}*/

				/* zoom 80% "VGA" 
				@media screen and (max-width: 100em) {
					.titre		{	font-size: calc(var(--TaillePoliceTitre)/1.5/0.8);	}
					.txtPiedPage{	font-size: calc(var(--TaillePolicePiedPage)/1.5/0.8);	}
					.titreJSON	{	font-size: calc(var(--TaillePoliceTitreJSON)/1.5/0.8);	}
					.txtJSON	{	font-size: calc(var(--TaillePoliceTxtJSON)/1.5/0.8);	}
				}*/

/* zoom 130% Full HD */
@media screen and (max-width: 92.31em) {
	.titre		{	font-size: calc(var(--TaillePoliceTitre)/1.3);	}
	.txtPiedPage{	font-size: calc(var(--TaillePolicePiedPage)/1.3);	}
	.titreJSON	{	font-size: calc(var(--TaillePoliceTitreJSON)/1.3);	}
	.txtJSON	{	font-size: calc(var(--TaillePoliceTxtJSON)/1.3);	}
}

				/* zoom 90% "VGA" */
				@media screen and (max-width: 88.89em) {
					.titre		{	font-size: calc(var(--TaillePoliceTitre)/1.5/0.9);	}
					.txtPiedPage{	font-size: calc(var(--TaillePolicePiedPage)/1.5/0.9);	}
					.titreJSON	{	font-size: calc(var(--TaillePoliceTitreJSON)/1.5/0.9);	}
					.txtJSON	{	font-size: calc(var(--TaillePoliceTxtJSON)/1.5/0.9);	}
				}

/* zoom 140% Full HD */
@media screen and (max-width: 85.71em) {
	.titre		{	font-size: calc(var(--TaillePoliceTitre)/1.4);	}
	.txtPiedPage{	font-size: calc(var(--TaillePolicePiedPage)/1.4);	}
	.titreJSON	{	font-size: calc(var(--TaillePoliceTitreJSON)/1.4);	}
	.txtJSON	{	font-size: calc(var(--TaillePoliceTxtJSON)/1.4);	}
}
				
/* zoom 150% Full HD */
@media screen and (max-width: 80em) {
	.titre		{	font-size: calc(var(--TaillePoliceTitre)/1.5);	}
	.txtPiedPage{	font-size: calc(var(--TaillePolicePiedPage)/1.5);	}
	.titreJSON	{	font-size: calc(var(--TaillePoliceTitreJSON)/1.5);	}
	.txtJSON	{	font-size: calc(var(--TaillePoliceTxtJSON)/1.5);	}
}			
				
				/* format "VGA" - Idéal (1280x960px)=>(80x60em) /t FullHD : facteur : 120/80=1.5 
				@media screen and (max-width: 80em) {
					.titre		{	font-size: calc(var(--TaillePoliceTitre)/1.5);	}
					.txtPiedPage{	font-size: calc(var(--TaillePolicePiedPage)/1.5);	}
					.titreJSON	{	font-size: calc(var(--TaillePoliceTitreJSON)/1.5);	}
					.txtJSON	{	font-size: calc(var(--TaillePoliceTxtJSON)/1.5);	}
				}*/
				
/* zoom 160% Full HD */
@media screen and (max-width: 75em) {
	.titre		{	font-size: calc(var(--TaillePoliceTitre)/1.6);	}
	.txtPiedPage{	font-size: calc(var(--TaillePolicePiedPage)/1.6);	}
	.titreJSON	{	font-size: calc(var(--TaillePoliceTitreJSON)/1.6);	}
	.txtJSON	{	font-size: calc(var(--TaillePoliceTxtJSON)/1.6);	}
}

/* ############################################################ EXTRA LARGE (>= 1200 px - 75em) ############################################################ */

				/* zoom 110% "VGA" */
				@media screen and (max-width: 72.73em) {
					.titre		{	font-size: calc(var(--TaillePoliceTitre)/1.5/1.1);	}
					.txtPiedPage{	font-size: calc(var(--TaillePolicePiedPage)/1.5/1.1);	}
					.titreJSON	{	font-size: calc(var(--TaillePoliceTitreJSON)/1.5/1.1);	}
					.txtJSON	{	font-size: calc(var(--TaillePoliceTxtJSON)/1.5/1.1);	}
				}

/* zoom 170% Full HD */
@media screen and (max-width: 70.59em) {
	.titre		{	font-size: calc(var(--TaillePoliceTitre)/1.7);	}
	.txtPiedPage{	font-size: calc(var(--TaillePolicePiedPage)/1.7);	}
	.titreJSON	{	font-size: calc(var(--TaillePoliceTitreJSON)/1.7);	}
	.txtJSON	{	font-size: calc(var(--TaillePoliceTxtJSON)/1.7);	}
}

/* zoom 180% Full HD */
@media screen and (max-width: 66.67em) {
	.titre		{	font-size: calc(var(--TaillePoliceTitre)/1.8);	}
	.txtPiedPage{	font-size: calc(var(--TaillePolicePiedPage)/1.8);	}
	.titreJSON	{	font-size: calc(var(--TaillePoliceTitreJSON)/1.8);	}
	.txtJSON	{	font-size: calc(var(--TaillePoliceTxtJSON)/1.8);	}
}

				/* zoom 120% "VGA" 
				@media screen and (max-width: 66.67em) {
					.titre		{	font-size: calc(var(--TaillePoliceTitre)/1.5/1.2);	}
					.txtPiedPage{	font-size: calc(var(--TaillePolicePiedPage)/1.5/1.2);	}
					.titreJSON	{	font-size: calc(var(--TaillePoliceTitreJSON)/1.5/1.2);	}
					.txtJSON	{	font-size: calc(var(--TaillePoliceTxtJSON)/1.5/1.2);	}
				}*/

/* zoom 190% Full HD */
@media screen and (max-width: 63.16em) {
	.titre		{	font-size: calc(var(--TaillePoliceTitre)/1.9);		}
	.txtPiedPage{	font-size: calc(var(--TaillePolicePiedPage)/1.9);	}
	.titreJSON	{	font-size: calc(var(--TaillePoliceTitreJSON)/1.9);	}
	.txtJSON	{	font-size: calc(var(--TaillePoliceTxtJSON)/1.9);	}
}

/* ############################################################     LARGE (>= 992 px - 62em)    ############################################################ */

/* Medium Format - facteur : 120/62=1.93 */
@media screen and (max-width: 62em) {
	.titre		{	font-size: calc(var(--TaillePoliceTitre)/1);		}
	.txtPiedPage{	font-size: calc(var(--TaillePolicePiedPage)/1);	}
	.titreJSON	{	font-size: calc(var(--TaillePoliceTitreJSON)/0.75);	}
	.txtJSON	{	font-size: calc(var(--TaillePoliceTxtJSON)/0.75);	}
}

/* ############################################################    MEDIUM (>= 768 px - 48em)    ############################################################ */		

/* Small Format - facteur : 120/48=2.5 */
@media screen and (max-width: 48em) {
	.titre		{	font-size: calc(var(--TaillePoliceTitre)/1.5);		}
	.txtPiedPage{	font-size: calc(var(--TaillePolicePiedPage)/1.5);		}
	.titreJSON	{	font-size: calc(var(--TaillePoliceTitreJSON)/1);	}
	.txtJSON	{	font-size: calc(var(--TaillePoliceTxtJSON)/1);		}
}						
				
/* ############################################################    SMALL (>= 576 px - 36em)     ############################################################ */
/* ############################################################  EXTRA SMALL (< 576 px - 36em)  ############################################################ */
				
/* Extra Small Format - facteur : 120/36=3.33 */
@media screen and (max-width: 36em) {
	.titre		{	font-size: calc(var(--TaillePoliceTitre)/2.5);		}
	.txtPiedPage{	font-size: calc(var(--TaillePolicePiedPage)/2.5);	}
	.titreJSON	{	font-size: calc(var(--TaillePoliceTitreJSON)/1.5);	}
	.txtJSON	{	font-size: calc(var(--TaillePoliceTxtJSON)/1.5);	}
}


/*				
	Small Format (≥576px) 			Max container width			540px	=> 33.75em
	Medium Format (≥768px) 										720px	=> 45em
	Large Format (≥992px) 										960px	=> 60em
	Extra large Format (≥1200px)								1140px	=> 71,25em
*/	 	 	 					

				

  
   
/* ###################################################################################################
   #                                             CAROUSEL                                            #
   ################################################################################################### */
	.carousel-inner img {
		/*-webkit-filter: grayscale(90%);
		filter: grayscale(90%);  	 photos en nuance de gris */ 
		width: 90%; 				/* largeur du carousel */
		margin: auto;
	}
	.carousel-caption h3 {
		color: var(--couleurTexte_Carousel);
	}
	.carousel-caption {
		top: -40px;
		bottom: auto;
	}
	@media (max-width: 600px) {
		.carousel-caption {
		  display: none; 			/* Cache les textes du carousel si largeur écran inf. 600 px */
		}
	}
	
	.carousel-control.right, .carousel-control.left {
		background-image: none;
		color: var(--couleurNavigation_Carousel);
	}
	.carousel-indicators li {
		border-color: var(--couleurIndication_Carousel);
	}
	.carousel-indicators li.active {
		background-color: var(--couleurIndication_Carousel);
	}
	
	
/* ################################################################################################### */

/* ###################################################################################################
   #                                           CELLULE JSON                                          #
   ################################################################################################### */
   .ruche {
		  max-width:100%;
		}
   @media (max-width: 800px) {
		.ruche {
		  max-width:30%;
		}
	}
   
   
   
/* ################################################################################################### */

/* ###################################################################################################
   #                                              CANVAS                                             #
   ################################################################################################### */

   canvas {
            -moz-user-select: none;
            -webkit-user-select: none;
            -ms-user-select: none;
        }
   
   
/* ################################################################################################### */

/* ###################################################################################################
   #                                           PIED DE PAGE                                          #
   ################################################################################################### */
	footer {
		padding: 10px;
	}
	.form-control {
		border-radius: 0;
	}
	textarea {
		resize: none;
	}
	#licenceCC {
		width:5%
	}
	@media (max-width: 600px) {
		#licenceCC {
			width:15%
		}
	}
/* ################################################################################################### */