﻿*
{	
	text-decoration: none;
	list-style: none;
}

body 
{	
	margin: 0 auto;
    padding: 0;
	text-decoration: none;
	list-style: none;
	
	max-width: 100%;

	background: #999;
}
					
/* ---------- Media SCREEN ------------ */	

	@media screen and (min-width: 990px) 
		{
			#haut	
			{	
				position: relative;
				margin: auto;
				max-width: 70%;
				padding-top: 10px;		
				border-bottom: 2px solid #ccf;
				border-right: 2px solid #000;									
				background-color: #222;			
			}
			
			#corps
			{		
				margin: auto;
				max-width: 70%;	
				min-width: 320px;				
				background-color: #fff;		
				box-shadow: 5px 5px 5px #666;	
			}			
			
			#bas	
			{	
				margin: auto;
				max-width: 70%;
				padding-top: 10px;								
				background-color: #222;	
				border-top: 2px solid #ccf;
				border-bottom: 2px solid #ccf;			
			}				
			
			.menuburg
			{
				display: none;			
			}	
			
			.navbar
			{
				display: flex;
				justify-content: center;		
			}	

			.navbar a
			{
				font-family: verdana, arial;
				font-size: 14px;
				color: #ffb755;
				padding: 4px 5px;
				border-top: 1px solid #222;
				border-bottom: 1px solid #222;
				border-radius: 15%;
			}	

			.navbar a:hover
			{
				font-family: verdana, arial;
				font-size: 14px;
				padding: 4px 5px;
				background-color: #060;
				color: #f1f1f1;
				border-top: 0px solid #f00;
				border-bottom: 1px solid #f1f1f1;
				border-radius: 15% 15% 0 0;	
			}
 
			.navbar .navliens ul
			{
				display: flex;
			}	

			.navbar .navliens ul li
			{
				margin: 4px 5px;
			}	

			.navbar .navliens ul li.active a
			{
				padding: 4px 5px;
				background-color: #000;
				color: #0f0;
				border-bottom: 1px solid #0f0;
				border-radius: 15% 15% 0 0;	
			}

			.navbar .navliens ul li.active2 a
			{
				padding: 4px 5px;
				background-color: #000;
				color: #0df;
				border-bottom: 1px solid #0df;
				border-radius: 15% 15% 0 0;	
			}
				
			.espacenav1
			{
				display: block;	
				height: 0;				
			}	
				
			.espacenav2
			{
				display: block;	
				height: 5px;				
			}
		}
		
	@media screen and (max-width: 989px) 
		{			
			#haut	
			{	
				margin: auto;
				max-width: 100%;
				padding-top: 10px;		
				border-bottom: 2px solid #ccf;
				border-right: 2px solid #000;									
				background-color: #222;			
			}	
			
			#corps
			{		
				margin: auto;
				max-width: 100%;	
				min-width: 320px;				
				background-color: #fff;		
				box-shadow: 5px 5px 5px #666;	
			}	
			
			#bas	
			{	
				margin: auto;
				max-width: 100%;
				padding-top: 10px;								
				background-color: #222;	
				border-top: 2px solid #ccf;
				border-bottom: 2px solid #ccf;	
			}	
			
			.navbar
			{
				padding: 0px;				
			}	
			
			.navbar .menuburg
			{
				display: block;	
				z-index: 2;
			}				
			
			.navliens
			{	
				top: 0px;
				left: 0;
				position: fixed;					
				background-color: rgba(0, 0, 0, 0.450);
				backdrop-filter: blur(10px);			
				width: 100%;
				height: 100vh;	
				display: flex;
				justify-content: center;
				align-items: center;
				margin-left: -100%;
				transition: all 0.5s ease;
				z-index: 3;
			}			
			
			.navliens ul
			{
				display: flex;	
				flex-direction: column;	
				align-items: center;		
			}	
			
			.navbar .navliens ul li
			{
				margin: 15px 0;	
				font-family: verdana, arial;
				text-decoration: none;
				color: #333;
				font-size: 25px;				
			}

			.navbar .navliens ul li.active a
			{
				color: #fff;
			}
						
			.menuburg
			{	
				display: block;
				position: absolute;
				margin: 10px;
				right: 2px;
				top: 2px;
				border-radius: 15%;
			}	
				
			.espacenav1, .espacenav2
			{
				display: block;	
				height: 5px;				
			}	

			.navbar a
			{
				font-family: verdana, arial;
				font-size: 30px;
				color: #ffb755;	
				padding: 0;	
				border: 0;
			}
			
			.mobilmenu
			{
				margin-left: 35px;
			}	
			
			.navliens.mobilmenu
			{
				margin-left: 0;
			}	
		}
			
/* -- Plan de Site -- */	
			
			#Plan	
			{	
				float: right;
				height: 20px;	
				padding-top: 0px;
				padding-left: 10px;
				margin-right: 10px;	
				font-family: verdana, arial;
				font-size: 12px;
				color:  #ccc;
				border-bottom: 0px solid #ccf;								
				background-color: #222;			
			}			
			
			.menu	
			{	
				font-family: verdana, arial;
				font-size: 12px;
				color:  #b1f6f2;
				text-decoration: none;
				font-style: none;
				font-weight: normal;			
			}			

			.Plan0 
			{
				display: block;			
				width: 90%;
				padding-left: 5px;
				padding-right: 5px;
				padding-top: 5px;
				padding-bottom: 5px;
								
				font-family: verdana, arial;
				font-size: 14px;
				color:  #000;
				text-decoration: none;
				text-align: left;
				font-style: italic;
				font-weight: normal;
			}	

			.Plan1 /* -- Plan de site -- */
			{
				display: block;			
				width: 90%;
				
				padding-left: 5px;
				padding-right: 5px;
				padding-top: 5px;
				padding-bottom: 5px;
				
				border: 0px solid #000;	
				background-color: #eee;
				
				font-family: verdana, arial;
				font-size: 14px;
				color:  #900;
				text-decoration: none;
				text-align: center;
				font-style: none;
				font-weight: bold;
			}	

			.Plan1:hover 
			{		
				width: 90%;
				color:  #000;
				background-color: #ff9;
				border: 0px solid #000;	
			}		

			.Plan2 /* -- Plan de site -- */
			{
				display: block;			
				width: 90%;
				padding-left: 5px;
				padding-right: 5px;
				padding-top: 5px;
				padding-bottom: 5px;
				
				border: 0px solid #000;	
				background-color: #eee;
				
				font-family: verdana, arial;
				font-size: 14px;
				color:  #009;
				text-decoration: none;
				text-align: center;
				font-style: none;
				font-weight: bold;
			}	

			.Plan2:hover 
			{
				width: 90%;
				color:  #000;
				background-color: #9ff;
				border: 0px solid #000;	
			}			

			.Plan3 /* -- Plan de site -- */
			{
				display: block;			
				width: 90%;
				padding-left: 5px;
				padding-right: 5px;
				padding-top: 5px;
				padding-bottom: 5px;
				
				border: 0px solid #000;
				background-color: #eee;	
				
				font-family: verdana, arial;
				font-size:12px;
				color:  #090;
				text-decoration: none;
				text-align: center;
				font-style: none;
				font-weight: bold;
			}	

			.Plan3:hover 
			{
				width: 90%;
				color:  #000;
				background-color: #9f9;
				border: 0px solid #000;	
			}		
			
/* -- HAUT commun à toutes les pages -- */	
			
			.page
			{				
				font-family: verdana, arial;
				font-size: 14px;
				color:  #ccc;
				text-decoration: none;
				font-style: none;
				font-weight: normal;
				padding: 3px;
			}	
			
			.BasTexteFixe
			{			
				display: block;
				height: 15px;
				width: auto;
				padding: 2px 8px;
				font-family: verdana, arial;
				font-size: 14px;
				text-decoration: none;
				font-style: none;
				font-weight: normal;
				color:  #eee;
				background-color: #222;
				border: 0px solid #999;
			}	
			
			.BasTexte
			{			
				display: block;
				height: 15px;
				width: auto;
				padding: 2px 8px;
				font-family: verdana, arial;
				font-size: 14px;
				text-decoration: none;
				font-style: none;
				font-weight: normal;
				color:  #ccc;
				background-color: #222;
				border: 1px solid #222;
			}	
			
			.BasTexte:hover
			{	
				color:  #ffbb55;
				background-color: #633;
			}	
			
/* -- Page Documents -- */	

			.DocsBox
			{	
				display: flex;
				justify-content: space-evenly;
				align-items: center;
				flex-direction: row;
				flex-basis: 100%;
				flex-wrap: wrap;		
			}

			.DocsBoxCadre
			{	
				display: flex;	
				width: 300px;
				gap: 10px;	
				border: 1px solid #222;		
				flex-grow: 3;				
			}

			.Docs
			{				
				font-family: verdana, arial;
				font-size: 16px;
				color:  #366;
				text-decoration: none;
				font-style: none;
				font-weight: bold;
				border: 0px solid #222;
			}
			
			.DocOver
			{	
				max-width: 300px;
				display: block;
				padding-top: 20px;
				padding-bottom: 20px;
				padding-left: 20px;
				padding-right: 20px;
				border: 1px solid #333;
				background-color: #eee;
			}	
			
			.DocOver:hover
			{				
				color:  #333;
				background-color:  #ff9;
				border: 1px solid #222;
			}	
			
			

/* -- CORPS -- */	

	@media screen and (min-width: 780px) 
		{
			#corps
			{		
				margin: auto;
				max-width: 70%;	
				min-width: 320px;				
				background-color: #fff;		
				box-shadow: 5px 5px 5px #666;	
			}	
		}	
	
	@media screen and (max-width: 779px) 
		{
			#corps
			{		
				margin: auto;
				max-width: 100%;	
				min-width: 320px;				
				background-color: #fff;		
				box-shadow: 5px 5px 5px #666;	
			}
		}	
			
			.titrecorps
			{
				font-family: verdana, arial;
				font-size: 20px;
				color:  #933;
				text-decoration: none;
				font-style: normal;
				font-weight: none;	
			}
			
			.titrecorpscompetence
			{
				display: block;
				font-family: verdana, arial;
				font-size: 18px;
				color:  #933;
				padding: 20px;
				text-decoration: none;
				font-style: normal;
				font-weight: none;	
			}
			
			.PageGliss
			{
				display: flex;
				justify-content: center;
				align-items: center;
				align-self: safe;
				width: 20px;
				height: 20px;
				border-radius: 50%;
				font-family: verdana, arial;
				font-size: 22px;
				font-weight: normal;	
				text-decoration: none;
				color:  #ccc;
				padding: 10px;
				background-color: #aaa;
				
			}	

/* -- LARGEUR LOGO IMAGE -- */			
		
			.logoover 
			{
				max-width: 300px;
				display: block;
				padding-top: 20px;
				padding-bottom: 20px;
				padding-left: 20px;
				padding-right: 20px;
				border: 1px solid #eee;
				background-color: #eee;
			}

			.logoover:hover 
			{
				max-width: 300px;
				padding-top: 20px;
				padding-bottom: 20px;
				border: 1px solid #000;
				background-color: #66996655;
			}		
			
			.lienover /* -- Page liens -- */		
			{
				display: block;
				border: 1px solid #fff;
				padding-top: 10px;
				padding-bottom: 10px;
			}

			.lienover:hover 
			{
				max-width: 500px;
				border: 1px solid #000;
				background-color: #66996655;
			}	
			
/* -- BOX IMAGE ------- */	

			.boximage
			{
				display: flex;
				flex-basis: 300px;
				gap: 10px;
				flex-wrap: wrap;
				justify-content: center;
			}

			.fleximage
			{
				border: 1px solid #333;	
				box-shadow: 3px 3px 5px #999;
				width: 300px;				
			}		
			
/* -- TITRES -- */	
			
			.TitreAcces 
			{
				font-family: verdana, arial;
				font-size: 14px;
				color:  #881421;
				text-decoration: none;
				font-style: none;
				font-weight: bold;
			}	
			
			.TitreAccueil 
			{
				font-family: verdana, arial;
				font-size: 14px;
				color:  #000;
				text-decoration: none;
				font-style: none;
				font-weight: bold;
			}	
			
			.TitreAudacity
			{
				font-family: verdana, arial;
				font-size: 14px;
				color:  #0000ff;
				text-decoration: none;
				font-style: none;
				font-weight: bold;
			}					
			
			.TitreBd 
			{
				font-family: verdana, arial;
				font-size: 14px;
				color:  #d8aa39;
				text-decoration: none;
				font-style: none;
				font-weight: bold;
			}		
			
			.TitreBureautique 
			{
				font-family: verdana, arial;
				font-size: 14px;
				color:  #9332bf;
				text-decoration: none;
				font-style: none;
				font-weight: bold;
			}				
			
			.TitreCubase 
			{
				font-family: verdana, arial;
				font-size: 14px;
				color:  #0c538a;
				text-decoration: none;
				font-style: none;
				font-weight: bold;
			}		
			
			.TitreExcel 
			{
				font-family: verdana, arial;
				font-size: 14px;
				color:  #393;
				text-decoration: none;
				font-style: none;
				font-weight: bold;
			}
			
			.TitreEpi 
			{
				display: block;
				width: auto;
				padding-left: 0px;		
				padding-right: 0px;		
				font-family: verdana, arial;
				font-size: 14px;
				color:  #c00;
				text-decoration: none;
				font-style: none;
				font-weight: bold;
			}		
			
			.TitreFLStudio 
			{
				font-family: verdana, arial;
				font-size: 14px;
				color:  #ff7c29;
				text-decoration: none;
				font-style: none;
				font-weight: bold;
			}		
			
			.TitreFormateur 
			{
				font-family: verdana, arial;
				font-size: 15px;
				color:  #eb7b17;
				text-decoration: none;
				font-style: none;
				font-weight: bold;
			}			
			
			.TitreGimp
			{
				font-family: verdana, arial;
				font-size: 15px;
				color:  #655e4c;
				text-decoration: none;
				font-style: none;
				font-weight: bold;
			}	
			
			.TitreH0B0 /* -- H0B0 -- */
			{
				display: block;
				width: auto;
				padding-left: 0px;		
				padding-right: 0px;		
				font-family: verdana, arial;
				font-size: 14px;
				color:  #f39c12;
				text-decoration: none;
				font-style: none;
				font-weight: bold;
			}				
			
			.TitreInformatique /* -- Informatique -- */
			{
				font-family: verdana, arial;
				font-size: 14px;
				color:  #4d42ba;
				text-decoration: none;
				font-style: none;
				font-weight: bold;
			}					
			
			.TitreInkscape
			{
				font-family: verdana, arial;
				font-size: 14px;
				color:  #cb81d0;
				text-decoration: none;
				font-style: none;
				font-weight: bold;
			}					
			
			.TitreLivreDisque /* -- ST -- */
			{
				font-family: verdana, arial;
				font-size: 14px;
				color:  #b72d2d;
				text-decoration: none;
				font-style: none;
				font-weight: bold;
			}			
			
			.TitreMindmap /* -- MindMapping -- */
			{
				font-family: verdana, arial;
				font-size: 14;
				color:  #b96b1b;
				text-decoration: none;
				font-style: none;
				font-weight: bold;
			}				
			
			.TitreMuseScore /* -- MindMapping -- */
			{
				font-family: verdana, arial;
				font-size: 14;
				color:  #196fb8;
				text-decoration: none;
				font-style: none;
				font-weight: bold;
			}			
			
			.TitreMusique /* -- Musique -- */
			{
				font-family: verdana, arial;
				font-size: 14px;
				color:  #b2641a;
				text-decoration: none;
				font-style: none;
				font-weight: bold;
			}			
			
			.TitreNombres /* -- Formation SST -- */
			{
				font-family: verdana, arial;
				font-size: 14px;
				color:  #060;
				text-decoration: none;
				font-style: none;
				font-weight: bold;
			}				
			
			.TitreOneNote /* -- OneNote -- */
			{
				font-family: verdana, arial;
				font-size: 14px;
				color:  #7719aa;
				text-decoration: none;
				font-style: none;
				font-weight: bold;
			}				
			
			.TitrePowerpoint /* -- Powerpoint -- */
			{
				font-family: verdana, arial;
				font-size: 14px;
				color:  #c83f27;
				text-decoration: none;
				font-style: none;
				font-weight: bold;
			}				
			
			.TitreRubik /* -- ST -- */
			{
				font-family: verdana, arial;
				font-size: 14px;
				color:  #990000;
				text-decoration: none;
				font-style: none;
				font-weight: bold;
			}						
			
			.TitreSketchup /* -- ST -- */
			{
				font-family: verdana, arial;
				font-size: 14px;
				color:  #eb2a2d;
				text-decoration: none;
				font-style: none;
				font-weight: bold;
			}			
			
			.TitreSSTCompetences /* -- Accueil - SST -- */
			{
				display: block;
				width: auto;
				padding-left: 40px;		
				padding-right: 0px;		
				font-family: verdana, arial;
				font-size: 14px;
				color:  #eb7b17;
				text-decoration: none;
				font-style: none;
				font-weight: bold;
			}			
			
			.TitreSST /* -- Formation SST -- */
			{
				font-family: verdana, arial;
				font-size: 14px;
				color:  #393;
				text-decoration: none;
				font-style: none;
				font-weight: bold;
			}						
			
			.TitreVsdc /* -- ST -- */
			{
				font-family: verdana, arial;
				font-size: 14px;
				color:  #138f8f;
				text-decoration: none;
				font-style: none;
				font-weight: bold;
			}							
			
			.TitreWord /* -- ST -- */
			{
				font-family: verdana, arial;
				font-size: 14px;
				color:  #103f91;
				text-decoration: none;
				font-style: none;
				font-weight: bold;
			}			
			
/* -- TEXTES -- */				

			.TexteBureautique
			{
				display: block;
				width: auto;
				padding-left: 10px;		
				padding-right: 0px;
				font-family: verdana, arial;
				font-size: 14px;
				color:  #333;
				text-decoration: none;
				font-style: none;
				font-weight: normal;
			}								

			.Texte1 /* -- Accueil -- */
			{
				font-family: verdana, arial;
				font-size: 14px;
				color:  #333;
				text-decoration: none;
				font-style: none;
				font-weight: normal;
			}			

			.Texte2 
			{
				display: block;
				width: auto;
				padding-left: 10px;		
				padding-right: 0px;
				font-family: verdana, arial;
				font-size: 14px;
				color:  #000;
				text-decoration: none;
				font-style: none;
				font-weight: normal;
			}		

			.Texte3 
			{
				display: block;
				width: auto;
				padding-left: 20px;		
				padding-right: 0px;
				font-family: verdana, arial;
				font-size: 14px;
				color:  #000;
				text-decoration: none;
				font-style: none;
				font-weight: normal;
			}

/* -- BOUTONS -- */	
				
			.BoutonAudacity 
			{
				display: block;
				padding-top: 8px;
				padding-bottom: 8px;
				margin: auto;
				width: 200px;
				font-family: verdana, arial;
				font-size: 16px;
				color:  #fff;
				text-align: center;
				background-color: #0000ff;
				text-decoration: none;
				border: 1px solid #000;		
				border-radius: 0px;				
				box-shadow: 5px 5px 5px #ccc;	
			}
			
			.BoutonAudacity:hover
			{
				background-color: #ccc;
				color:  #000;
			}	
				
			.BoutonBd
			{
				display: block;
				padding-top: 8px;
				padding-bottom: 8px;
				margin: auto;
				width: 200px;
				font-family: verdana, arial;
				font-size: 16px;
				color:  #fff;
				text-align: center;
				background-color: #d8aa39;
				text-decoration: none;
				border: 1px solid #000;		
				border-radius: 0px;				
				box-shadow: 5px 5px 5px #ccc;	
			}
			
			.BoutonBd:hover
			{
				background-color: #fff;
				color:  #b96b1b;
			}							
				
			.BoutonBureautique
			{
				display: block;
				padding-top: 8px;
				padding-bottom: 8px;
				margin: auto;
				width: 200px;
				font-family: verdana, arial;
				font-size: 16px;
				color:  #fff;
				text-align: center;
				background-color: #9332bf;
				text-decoration: none;
				border: 1px solid #000;		
				border-radius: 0px;				
				box-shadow: 5px 5px 5px #ccc;	
			}
			
			.BoutonBureautique:hover
			{
				background-color: #fff;
				color:  #b96b1b;
			}							
				
			.BoutonCubase
			{
				display: block;
				padding-top: 8px;
				padding-bottom: 8px;
				margin: auto;
				width: 200px;
				font-family: verdana, arial;
				font-size: 16px;
				color:  #fff;
				text-align: center;
				background-color: #0c538a;
				text-decoration: none;
				border: 1px solid #000;		
				border-radius: 0px;				
				box-shadow: 5px 5px 5px #ccc;	
			}
			
			.BoutonCubase:hover
			{
				background-color: #fff;
				color:  #b96b1b;
			}	
			
			.BoutonDocs 
			{
				display: block;
				padding-top: 8px;
				padding-bottom: 8px;
				margin: auto;
				width: 200px;
				font-family: verdana, arial;
				font-size: 16px;
				color:  #000;
				text-align: center;
				background-color: #cdc;
				text-decoration: none;
				border: 1px solid #000;		
				border-radius: 0px;				
				box-shadow: 5px 5px 5px #ccc;	
			}
			
			.BoutonDocs:hover 
			{
				background-color: #ccc;
				color:  #339;
			}	
				
			.BoutonEpi
			{
				display: block;
				padding-top: 8px;
				padding-bottom: 8px;
				margin: auto;
				width: 200px;
				font-family: verdana, arial;
				font-size: 16px;
				color:  #fff;
				text-align: center;
				background-color: #cb4335;
				text-decoration: none;
				border: 1px solid #000;		
				border-radius: 0px;				
				box-shadow: 5px 5px 5px #ccc;	
			}
			
			.BoutonEpi:hover
			{
				background-color: #fff;
				color:  #cb4335;
			}
				
			.BoutonExcel
			{
				display: block;
				padding-top: 8px;
				padding-bottom: 8px;
				margin: auto;
				width: 200px;
				font-family: verdana, arial;
				font-size: 16px;
				color:  #fff;
				text-align: center;
				background-color: #107c42;
				text-decoration: none;
				border: 1px solid #000;		
				border-radius: 0px;				
				box-shadow: 5px 5px 5px #ccc;	
			}
			
			.BoutonExcel:hover
			{
				background-color: #fff;
				color:  #107c42;
			}							
				
			.BoutonFLStudio
			{
				display: block;
				padding-top: 8px;
				padding-bottom: 8px;
				margin: auto;
				width: 200px;
				font-family: verdana, arial;
				font-size: 16px;
				color:  #fff;
				text-align: center;
				background-color: #ff7c29;
				text-decoration: none;
				border: 1px solid #000;		
				border-radius: 0px;				
				box-shadow: 5px 5px 5px #ccc;	
			}
			
			.BoutonFLStudio:hover
			{
				background-color: #fff;
				color:  #b96b1b;
			}						
				
			.BoutonGimp
			{
				display: block;
				padding-top: 8px;
				padding-bottom: 8px;
				margin: auto;
				width: 200px;
				font-family: verdana, arial;
				font-size: 16px;
				color:  #fff;
				text-align: center;
				background-color: #655e4c;
				text-decoration: none;
				border: 1px solid #000;		
				border-radius: 0px;				
				box-shadow: 5px 5px 5px #ccc;	
			}
			
			.BoutonGimp:hover
			{
				background-color: #fff;
				color:  #b96b1b;
			}	
				
			.BoutonH0b0
			{
				display: block;
				padding-top: 8px;
				padding-bottom: 8px;
				margin: auto;
				width: 200px;
				font-family: verdana, arial;
				font-size: 16px;
				color:  #fff;
				text-align: center;
				background-color: #f9b332;
				text-decoration: none;
				border: 1px solid #000;		
				border-radius: 0px;				
				box-shadow: 5px 5px 5px #ccc;	
			}
			
			.BoutonH0b0:hover
			{
				background-color: #fff;
				color:  #f39c12;
			}				
				
			.BoutonInformatique
			{
				display: block;
				padding-top: 8px;
				padding-bottom: 8px;
				margin: auto;
				width: 200px;
				font-family: verdana, arial;
				font-size: 16px;
				color:  #fff;
				text-align: center;
				background-color: #4d42ba;
				text-decoration: none;
				border: 1px solid #000;		
				border-radius: 0px;				
				box-shadow: 5px 5px 5px #ccc;	
			}
			
			.BoutonInformatique:hover
			{
				background-color: #fff;
				color:  #b96b1b;
			}		
				
			.BoutonInkscape
			{
				display: block;
				padding-top: 8px;
				padding-bottom: 8px;
				margin: auto;
				width: 200px;
				font-family: verdana, arial;
				font-size: 16px;
				color:  #fff;
				text-align: center;
				background-color: #cb81d0;
				text-decoration: none;
				border: 1px solid #000;		
				border-radius: 0px;				
				box-shadow: 5px 5px 5px #ccc;	
			}
			
			.BoutonInkscape:hover
			{
				background-color: #fff;
				color:  #b96b1b;
			}
				
			.BoutonLudique
			{
				display: block;
				padding-top: 8px;
				padding-bottom: 8px;
				margin: auto;
				width: 200px;
				font-family: verdana, arial;
				font-size: 16px;
				color:  #fff;
				text-align: center;
				background-color: #d2b380;
				text-decoration: none;
				border: 1px solid #000;		
				border-radius: 0px;				
				box-shadow: 5px 5px 5px #ccc;	
			}
			
			.BoutonLudique:hover
			{
				background-color: #fff;
				color:  #b96b1b;
			}	
			
			.BoutonLiens 
			{
				display: block;
				padding-top: 8px;
				padding-bottom: 8px;
				margin: auto;
				width: 200px;
				font-family: verdana, arial;
				font-size: 16px;
				color:  #000;
				text-align: center;
				background-color: #cdc;
				text-decoration: none;
				border: 1px solid #000;		
				border-radius: 0px;				
				box-shadow: 5px 5px 5px #ccc;	
			}
			
			.BoutonLiens:hover 
			{
				background-color: #ccc;
				color:  #339;
			}			
				
			.BoutonLivreDisque
			{
				display: block;
				padding-top: 8px;
				padding-bottom: 8px;
				margin: auto;
				width: 200px;
				font-family: verdana, arial;
				font-size: 16px;
				color:  #fff;
				text-align: center;
				background-color: #b72d2d;
				text-decoration: none;
				border: 1px solid #000;		
				border-radius: 0px;				
				box-shadow: 5px 5px 5px #ccc;	
			}
			
			.BoutonLivreDisque:hover
			{
				background-color: #fff;
				color:  #b96b1b;
			}					
			
			.BoutonMenu /* -- Accueil - Retour -- */
			{
				display: block;
				padding-top: 8px;
				padding-bottom: 8px;
				margin: auto;
				width: 100px;
				font-family: verdana, arial;
				font-size: 16px;
				color:  #000;
				text-align: center;
				background-color: #cdc;
				text-decoration: none;
				border: 1px solid #000;		
				border-radius: 0px;				
				box-shadow: 5px 5px 5px #ccc;	
			}
			
			.BoutonMenu:hover /* -- Accueil - Retour -- */
			{
				background-color: #ccc;
				color:  #000;
			}							
				
			.BoutonMindmap
			{
				display: block;
				padding-top: 8px;
				padding-bottom: 8px;
				margin: auto;
				width: 200px;
				font-family: verdana, arial;
				font-size: 16px;
				color:  #fff;
				text-align: center;
				background-color: #b96b1b;
				text-decoration: none;
				border: 1px solid #000;		
				border-radius: 0px;				
				box-shadow: 5px 5px 5px #ccc;	
			}
			
			.BoutonMindmap:hover
			{
				background-color: #fff;
				color:  #b96b1b;
			}									
				
			.BoutonMuseScore
			{
				display: block;
				padding-top: 8px;
				padding-bottom: 8px;
				margin: auto;
				width: 200px;
				font-family: verdana, arial;
				font-size: 16px;
				color:  #fff;
				text-align: center;
				background-color: #196fb8;
				text-decoration: none;
				border: 1px solid #000;		
				border-radius: 0px;				
				box-shadow: 5px 5px 5px #ccc;	
			}
			
			.BoutonMuseScore:hover
			{
				background-color: #fff;
				color:  #b96b1b;
			}													
				
			.BoutonMusique
			{
				display: block;
				padding-top: 8px;
				padding-bottom: 8px;
				margin: auto;
				width: 200px;
				font-family: verdana, arial;
				font-size: 16px;
				color:  #fff;
				text-align: center;
				background-color: #b2641a;
				text-decoration: none;
				border: 1px solid #000;		
				border-radius: 0px;				
				box-shadow: 5px 5px 5px #ccc;	
			}
			
			.BoutonMusique:hover
			{
				background-color: #fff;
				color:  #b96b1b;
			}				
				
			.BoutonNombres
			{
				display: block;
				padding-top: 8px;
				padding-bottom: 8px;
				margin: auto;
				width: 200px;
				font-family: verdana, arial;
				font-size: 16px;
				color:  #fff;
				text-align: center;
				background-color: #060;
				text-decoration: none;
				border: 1px solid #000;		
				border-radius: 0px;				
				box-shadow: 5px 5px 5px #ccc;	
			}	
			
			.BoutonNombres:hover
			{
				background-color: #fff;
				color:  #060;
			}	
				
			.BoutonRubik
			{
				display: block;
				padding-top: 8px;
				padding-bottom: 8px;
				margin: auto;
				width: 200px;
				font-family: verdana, arial;
				font-size: 16px;
				color:  #fff;
				text-align: center;
				background-color: #990000;
				text-decoration: none;
				border: 1px solid #000;		
				border-radius: 0px;				
				box-shadow: 5px 5px 5px #ccc;	
			}
			
			.BoutonRubik:hover
			{
				background-color: #fff;
				color:  #990000;
			}
				
			.BoutonSketchup
			{
				display: block;
				padding-top: 8px;
				padding-bottom: 8px;
				margin: auto;
				width: 200px;
				font-family: verdana, arial;
				font-size: 16px;
				color:  #fff;
				text-align: center;
				background-color: #eb2a2d;
				text-decoration: none;
				border: 1px solid #000;		
				border-radius: 0px;				
				box-shadow: 5px 5px 5px #ccc;	
			}
			
			.BoutonSketchup:hover
			{
				background-color: #fff;
				color:  #b96b1b;
			}
				
			.BoutonSt
			{
				display: block;
				padding-top: 8px;
				padding-bottom: 8px;
				margin: auto;
				width: 200px;
				font-family: verdana, arial;
				font-size: 16px;
				color:  #fff;
				text-align: center;
				background-color: #060;
				text-decoration: none;
				border: 1px solid #000;		
				border-radius: 0px;				
				box-shadow: 5px 5px 5px #ccc;	
			}
			
			.Boutonst:hover
			{
				background-color: #fff;
				color:  #229954;
			}	
				
			.BoutonSst
			{
				display: block;
				padding-top: 8px;
				padding-bottom: 8px;
				margin: auto;
				width: 200px;
				font-family: verdana, arial;
				font-size: 16px;
				color:  #fff;
				text-align: center;
				background-color: #229954;
				text-decoration: none;
				border: 1px solid #000;		
				border-radius: 0px;				
				box-shadow: 5px 5px 5px #ccc;	
			}
			
			.Boutonsst:hover
			{
				background-color: #fff;
				color:  #229954;
			}	
				
			.BoutonPowerpoint
			{
				display: block;
				padding-top: 8px;
				padding-bottom: 8px;
				margin: auto;
				width: 200px;
				font-family: verdana, arial;
				font-size: 16px;
				color:  #fff;
				text-align: center;
				background-color: #c83f27;
				text-decoration: none;
				border: 1px solid #000;		
				border-radius: 0px;				
				box-shadow: 5px 5px 5px #ccc;	
			}
			
			.BoutonPowerpoint:hover
			{
				background-color: #fff;
				color:  #c83f27;
			}			
				
			.BoutonVsdc
			{
				display: block;
				padding-top: 8px;
				padding-bottom: 8px;
				margin: auto;
				width: 200px;
				font-family: verdana, arial;
				font-size: 16px;
				color:  #fff;
				text-align: center;
				background-color: #138f8f;
				text-decoration: none;
				border: 1px solid #000;		
				border-radius: 0px;				
				box-shadow: 5px 5px 5px #ccc;	
			}
			
			.BoutonVsdc:hover
			{
				background-color: #fff;
				color:  #103f91;
			}	
				
			.BoutonWord
			{
				display: block;
				padding-top: 8px;
				padding-bottom: 8px;
				margin: auto;
				width: 200px;
				font-family: verdana, arial;
				font-size: 16px;
				color:  #fff;
				text-align: center;
				background-color: #103f91;
				text-decoration: none;
				border: 1px solid #000;		
				border-radius: 0px;				
				box-shadow: 5px 5px 5px #ccc;	
			}
			
			.BoutonWord:hover
			{
				background-color: #fff;
				color:  #103f91;
			}
			
/* -- SAVOIR PLUS -- */				
			
			.savoirplus
			{
				font-family: verdana, arial;
				font-size: 12px;
				color:  #c00;
				text-decoration: none;
				font-style: italic;
				font-weight: normal;
			}	
			
/* -- REMISILA -- */				
			
			.remisila
			{	
				display: block;
				margin-bottom: 10px;
				font-family: verdana, arial;
				font-size: 12px;
				font-style: italic;
				font-weight: normal;
				color:  #ccc;
			}			
			
			.remisila2021
			{
				font-family: verdana, arial;
				font-size: 10px;
				color:  #666;
				text-decoration: none;
				font-style: italic;
				font-weight: normal;
			}
	
/* -- CONTENUS 1 ----------------------------- */	
	
		.contenu1 /*-- Texte des titres colonnes --*/
			{
			  background-color: #fff;
			  border-left: solid 0px #666;
			  border-top: solid 0px #666;
			  border-right: solid 0px #666;
			  border-bottom: solid 0px #666;
			  font-family: verdana, arial;
			  font-size: 14px;
			  margin-bottom: -1px;
			  padding: 10px;
			  color: #000;
			  text-align: left;
			  padding-top: 5px;
			}

		.contenu1:hover 
			{
			  background-color: #eee;
			}	
	
		.contenu1 
			> input[type="checkbox"] {
			  display: none;
			}
	
		.contenu1
			> label {
			  display: block;
			  width: 100%;
			  color: #393;
			  font-weight: bold;
			  border-bottom: solid 1px #ccc;
			  padding-top: 10px;
			  padding-bottom: 10px;
			}
	
		.contenu1 
			> label:before {
			  content: ' ▼ ';
			  font-size: 14px;
			  color: #000;
			}
	
		.contenu1
			> label + div {
			  display: none;
			}
	
		.contenu1 /*-- Cadre interne --*/
			> div {
			  margin-top: 5px;
			  background-color: #eee;
			  border-left: solid 1px #ccc;
			  border-right: solid 1px #ccc;
			  border-bottom: solid 1px #ccc;
			  width: 100%;
			  text-align: left;	
			  padding-top: 0px;
			}
	
		.contenu1
			> input[type="checkbox"]:checked + label + div {
			  display: block;
			}
	
		.contenu1
			> input[type="checkbox"]:checked + label::before {
			  content: ' ▲ '; 
			  font-size: 14px;
			  color: #c33;
			}	
	
/* -- CONTENUS 2 ----------------------------- */	
	
		.contenu2 /*-- Texte des titres colonnes --*/
			{
			  background-color: #fff;
			  border-left: solid 0px #666;
			  border-top: solid 0px #666;
			  border-right: solid 0px #666;
			  border-bottom: solid 0px #666;
			  font-family: verdana, arial;
			  font-size: 14px;
			  margin-bottom: -1px;
			  padding: 10px;
			  color: #000;
			  text-align: left;
			  padding-top: 5px;
			}

		.contenu2:hover 
			{
			  background-color: #eee;
			}	
	
		.contenu2 
			> input[type="checkbox"] {
			  display: none;
			}
	
		.contenu2
			> label {
			  display: block;
			  width: 100%;
			  color: #393;
			  font-weight: bold;
			  border-bottom: solid 1px #ccc;
			  padding-top: 10px;
			  padding-bottom: 10px;
			}
	
		.contenu2 
			> label:before {
			  content: '▼ ';
			  font-size: 14px;
			  color: #000;
			}
	
		.contenu2
			> label + div {
			  display: none;
			}
	
		.contenu2 /*-- Cadre interne --*/
			> div {
			  margin-top: 10px;
			  background-color: #eee;
			  border: solid 0px #666;
			  width: 100%;
			  text-align: left;		
			  border-left: solid 1px #ccc;
			  border-right: solid 1px #ccc;
			  border-bottom: solid 1px #ccc;
			}
	
		.contenu2
			> input[type="checkbox"]:checked + label + div {
			  display: block;
			}
	
		.contenu2
			> input[type="checkbox"]:checked + label::before {
			  content: '▲ ';
			  font-size: 14px;
			  color: #c33;
			}	
	
	
/* -- CONTENUS 3 ------------------------------ */		
	
		.contenu3 /*-- Texte des titres colonnes --*/
			{
			  background-color: #fff;
			  border-left: solid 0px #666;
			  border-top: solid 0px #666;
			  border-right: solid 0px #666;
			  border-bottom: solid 0px #666;
			  font-family: verdana, arial;
			  font-size: 14px;
			  margin-bottom: -1px;
			  padding: 10px;
			  color: #000;
			  text-align: left;
			  padding-top: 5px;
			}

		.contenu3:hover 
			{
			  background-color: #eee;
			}	
	
		.contenu3 
			> input[type="checkbox"] {
			  display: none;
			}
	
		.contenu3
			> label {
			  display: block;
			  width: 100%;
			  color: #393;
			  font-weight: bold;
			  border-bottom: solid 1px #ccc;
			  padding-top: 10px;
			  padding-bottom: 10px;
			}
	
		.contenu3 
			> label:before {
			  content: '▼ ';
			  font-size: 14px;
			  color: #000;
			}
	
		.contenu3
			> label + div {
			  display: none;
			}
	
		.contenu3 /*-- Cadre interne --*/
			> div {
			  margin-top: 10px;
			  background-color: #eee;
			  border: solid 0px #666;
			  width: 100%;
			  text-align: left;		
			  border-left: solid 1px #ccc;
			  border-right: solid 1px #ccc;
			  border-bottom: solid 1px #ccc;
			}
	
		.contenu3
			> input[type="checkbox"]:checked + label + div {
			  display: block;
			}
	
		.contenu3
			> input[type="checkbox"]:checked + label::before {
			  content: '▲  ';
			  font-size: 14px;
			  color: #c33;
			}	
	
	
/* -- CONTENUS 4 ----------------------------- */		
	
		.contenu4 /*-- Texte des titres colonnes --*/
			{
			  background-color: #fff;
			  border-left: solid 0px #666;
			  border-top: solid 0px #666;
			  border-right: solid 0px #666;
			  border-bottom: solid 0px #666;
			  font-family: verdana, arial;
			  font-size: 14px;
			  margin-bottom: -1px;
			  padding: 10px;
			  color: #000;
			  text-align: left;
			  padding-top: 5px;
			}

		.contenu4:hover 
			{
			  background-color: #eee;
			}	
	
		.contenu4 
			> input[type="checkbox"] {
			  display: none;
			}
	
		.contenu4
			> label {
			  display: block;
			  width: 100%;
			  color: #393;
			  font-weight: bold;
			  border-bottom: solid 1px #ccc;
			  padding-top: 10px;
			  padding-bottom: 10px;
			}
	
		.contenu4 
			> label:before {
			  content: '▼ ';
			  font-size: 14px;
			  color: #000;
			}
	
		.contenu4
			> label + div {
			  display: none;
			}
	
		.contenu4 /*-- Cadre interne --*/
			> div {
			  margin-top: 10px;
			  background-color: #eee;
			  border: solid 0px #666;
			  width: 100%;
			  text-align: left;		
			  border-left: solid 1px #ccc;
			  border-right: solid 1px #ccc;
			  border-bottom: solid 1px #ccc;
			}
	
		.contenu4
			> input[type="checkbox"]:checked + label + div {
			  display: block;
			}
	
		.contenu4
			> input[type="checkbox"]:checked + label::before {
			  content: '▲  ';
			  font-size: 14px;
			  color: #c33;
			}	
	
	
/* -- CONTENUS 5 ------------------------------ */		
	
		.contenu5 /*-- Texte des titres colonnes --*/
			{
			  background-color: #fff;
			  border-left: solid 0px #666;
			  border-top: solid 0px #666;
			  border-right: solid 0px #666;
			  border-bottom: solid 0px #666;
			  font-family: verdana, arial;
			  font-size: 14px;
			  margin-bottom: -1px;
			  padding: 10px;
			  color: #000;
			  text-align: left;
			  padding-top: 5px;
			}

		.contenu5:hover 
			{
			  background-color: #eee;
			}	
	
		.contenu5 
			> input[type="checkbox"] {
			  display: none;
			}
	
		.contenu5
			> label {
			  display: block;
			  width: 100%;
			  color: #393;
			  font-weight: bold;
			  border-bottom: solid 1px #ccc;
			  padding-top: 10px;
			  padding-bottom: 10px;
			}
	
		.contenu5 
			> label:before {
			  content: '▼ ';
			  font-size: 14px;
			  color: #000;
			}
	
		.contenu5
			> label + div {
			  display: none;
			}
	
		.contenu5 /*-- Cadre interne --*/
			> div {
			  margin-top: 10px;
			  background-color: #eee;
			  border: solid 0px #666;
			  width: 100%;
			  text-align: left;		
			  border-left: solid 1px #ccc;
			  border-right: solid 1px #ccc;
			  border-bottom: solid 1px #ccc;
			}
	
		.contenu5
			> input[type="checkbox"]:checked + label + div {
			  display: block;
			}
	
		.contenu5
			> input[type="checkbox"]:checked + label::before {
			  content: '▲  ';
			  font-size: 14px;
			  color: #c33;
			}		
	
/* -- CONTENUS 6 ----------------------------- */		
	
		.contenu6 /*-- Texte des titres colonnes --*/
			{
			  background-color: #fff;
			  border-left: solid 0px #666;
			  border-top: solid 0px #666;
			  border-right: solid 0px #666;
			  border-bottom: solid 0px #666;
			  font-family: verdana, arial;
			  font-size: 14px;
			  margin-bottom: -1px;
			  padding: 10px;
			  color: #000;
			  text-align: left;
			  padding-top: 5px;
			}

		.contenu6:hover 
			{
			  background-color: #eee;
			}	
	
		.contenu6 
			> input[type="checkbox"] {
			  display: none;
			}
	
		.contenu6
			> label {
			  display: block;
			  width: 100%;
			  color: #393;
			  font-weight: bold;
			  border-bottom: solid 1px #ccc;
			  padding-top: 10px;
			  padding-bottom: 10px;
			}
	
		.contenu6 
			> label:before {
			  content: '▼ ';
			  font-size: 14px;
			  color: #000;
			}
	
		.contenu6
			> label + div {
			  display: none;
			}
	
		.contenu6 /*-- Cadre interne --*/
			> div {
			  margin-top: 10px;
			  background-color: #eee;
			  border: solid 0px #666;
			  width: 100%;
			  text-align: left;		
			  border-left: solid 1px #ccc;
			  border-right: solid 1px #ccc;
			  border-bottom: solid 1px #ccc;
			}
	
		.contenu6
			> input[type="checkbox"]:checked + label + div {
			  display: block;
			}
	
		.contenu6
			> input[type="checkbox"]:checked + label::before {
			  content: '▲  ';
			  font-size: 14px;
			  color: #c33;
			}	
	
/* -- CONTENUS 7 ----------------------------- */		
	
		.contenu7 /*-- Texte des titres colonnes --*/
			{
			  background-color: #fff;
			  border-left: solid 0px #666;
			  border-top: solid 0px #666;
			  border-right: solid 0px #666;
			  border-bottom: solid 0px #666;
			  font-family: verdana, arial;
			  font-size: 14px;
			  margin-bottom: -1px;
			  padding: 10px;
			  color: #000;
			  text-align: left;
			  padding-top: 5px;
			}

		.contenu7:hover 
			{
			  background-color: #eee;
			}	
	
		.contenu7 
			> input[type="checkbox"] {
			  display: none;
			}
	
		.contenu7
			> label {
			  display: block;
			  width: 100%;
			  color: #393;
			  font-weight: bold;
			  border-bottom: solid 1px #ccc;
			  padding-top: 10px;
			  padding-bottom: 10px;
			}
	
		.contenu7 
			> label:before {
			  content: '▼ ';
			  font-size: 14px;
			  color: #000;
			}
	
		.contenu7
			> label + div {
			  display: none;
			}
	
		.contenu7 /*-- Cadre interne --*/
			> div {
			  margin-top: 10px;
			  background-color: #eee;
			  border: solid 0px #666;
			  width: 100%;
			  text-align: left;		
			  border-left: solid 1px #ccc;
			  border-right: solid 1px #ccc;
			  border-bottom: solid 1px #ccc;
			}
	
		.contenu7
			> input[type="checkbox"]:checked + label + div {
			  display: block;
			}
	
		.contenu7
			> input[type="checkbox"]:checked + label::before {
			  content: '▲  ';
			  font-size: 14px;
			  color: #c33;
			}	
	
/* -- CONTENUS 8 ----------------------------- */		
	
		.contenu8 /*-- Texte des titres colonnes --*/
			{
			  background-color: #fff;
			  border-left: solid 0px #666;
			  border-top: solid 0px #666;
			  border-right: solid 0px #666;
			  border-bottom: solid 0px #666;
			  font-family: verdana, arial;
			  font-size: 14px;
			  margin-bottom: -1px;
			  padding: 10px;
			  color: #000;
			  text-align: left;
			  padding-top: 5px;
			}

		.contenu8:hover 
			{
			  background-color: #eee;
			}	
	
		.contenu8 
			> input[type="checkbox"] {
			  display: none;
			}
	
		.contenu8
			> label {
			  display: block;
			  width: 100%;
			  color: #393;
			  font-weight: bold;
			  border-bottom: solid 1px #ccc;
			  padding-top: 10px;
			  padding-bottom: 10px;
			}
	
		.contenu8 
			> label:before {
			  content: '▼ ';
			  font-size: 14px;
			  color: #000;
			}
	
		.contenu8
			> label + div {
			  display: none;
			}
	
		.contenu8 /*-- Cadre interne --*/
			> div {
			  margin-top: 10px;
			  background-color: #eee;
			  border: solid 0px #666;
			  width: 100%;
			  text-align: left;		
			  border-left: solid 1px #ccc;
			  border-right: solid 1px #ccc;
			  border-bottom: solid 1px #ccc;
			}
	
		.contenu8
			> input[type="checkbox"]:checked + label + div {
			  display: block;
			}
	
		.contenu8
			> input[type="checkbox"]:checked + label::before {
			  content: '▲ '; 
			  font-size: 14px;
			  color: #c33;
			}	
	
/* -- CONTENUS 9 ----------------------------- */		
	
		.contenu9 /*-- Texte des titres colonnes --*/
			{
			  background-color: #fff;
			  border-left: solid 0px #666;
			  border-top: solid 0px #666;
			  border-right: solid 0px #666;
			  border-bottom: solid 0px #666;
			  font-family: verdana, arial;
			  font-size: 14px;
			  margin-bottom: -1px;
			  padding: 10px;
			  color: #000;
			  text-align: left;
			  padding-top: 5px;
			}

		.contenu9:hover 
			{
			  background-color: #eee;
			}	
	
		.contenu9 
			> input[type="checkbox"] {
			  display: none;
			}
	
		.contenu9
			> label {
			  display: block;
			  width: 100%;
			  color: #393;
			  font-weight: bold;
			  border-bottom: solid 1px #ccc;
			  padding-top: 10px;
			  padding-bottom: 10px;
			}
	
		.contenu9 
			> label:before {
			  content: '▼ ';
			  font-size: 14px;
			  color: #000;
			}
	
		.contenu9
			> label + div {
			  display: none;
			}
	
		.contenu9 /*-- Cadre interne --*/
			> div {
			  margin-top: 10px;
			  background-color: #eee;
			  border: solid 0px #666;
			  width: 100%;
			  text-align: left;		
			  border-left: solid 1px #ccc;
			  border-right: solid 1px #ccc;
			  border-bottom: solid 1px #ccc;
			}
	
		.contenu9
			> input[type="checkbox"]:checked + label + div {
			  display: block;
			}
	
		.contenu9
			> input[type="checkbox"]:checked + label::before {
			  content: '▲ '; 
			  font-size: 14px;
			  color: #c33;
			}		
	
/* -- CONTENUS 10 ----------------------------- */		
	
		.contenu10 /*-- Texte des titres colonnes --*/
			{
			  background-color: #fff;
			  border-left: solid 0px #666;
			  border-top: solid 0px #666;
			  border-right: solid 0px #666;
			  border-bottom: solid 0px #666;
			  font-family: verdana, arial;
			  font-size: 14px;
			  margin-bottom: -1px;
			  padding: 10px;
			  color: #000;
			  text-align: left;
			  padding-top: 5px;
			}

		.contenu10:hover 
			{
			  background-color: #eee;
			}	
	
		.contenu10 
			> input[type="checkbox"] {
			  display: none;
			}
	
		.contenu10
			> label {
			  display: block;
			  width: 100%;
			  color: #393;
			  font-weight: bold;
			  border-bottom: solid 1px #ccc;
			  padding-top: 10px;
			  padding-bottom: 10px;
			}
	
		.contenu10 
			> label:before {
			  content: '▼ ';
			  font-size: 14px;
			  color: #000;
			}
	
		.contenu10
			> label + div {
			  display: none;
			}
	
		.contenu10 /*-- Cadre interne --*/
			> div {
			  margin-top: 10px;
			  background-color: #eee;
			  border: solid 0px #666;
			  width: 100%;
			  text-align: left;		
			  border-left: solid 1px #ccc;
			  border-right: solid 1px #ccc;
			  border-bottom: solid 1px #ccc;
			}
	
		.contenu10
			> input[type="checkbox"]:checked + label + div {
			  display: block;
			}
	
		.contenu10
			> input[type="checkbox"]:checked + label::before {
			  content: '▲ '; 
			  font-size: 14px;
			  color: #c33;
			}		
	
/* -- CONTENUS 11 ----------------------------- */		
	
		.contenu11 /*-- Texte des titres colonnes --*/
			{
			  background-color: #fff;
			  border-left: solid 0px #666;
			  border-top: solid 0px #666;
			  border-right: solid 0px #666;
			  border-bottom: solid 0px #666;
			  font-family: verdana, arial;
			  font-size: 14px;
			  margin-bottom: -1px;
			  padding: 10px;
			  color: #000;
			  text-align: left;
			  padding-top: 5px;
			}

		.contenu11:hover 
			{
			  background-color: #eee;
			}	
	
		.contenu11 
			> input[type="checkbox"] {
			  display: none;
			}
	
		.contenu11
			> label {
			  display: block;
			  width: 100%;
			  color: #393;
			  font-weight: bold;
			  border-bottom: solid 1px #ccc;
			  padding-top: 10px;
			  padding-bottom: 10px;
			}
	
		.contenu11 
			> label:before {
			  content: '▼ ';
			  font-size: 14px;
			  color: #000;
			}
	
		.contenu11
			> label + div {
			  display: none;
			}
	
		.contenu11 /*-- Cadre interne --*/
			> div {
			  margin-top: 10px;
			  background-color: #eee;
			  border: solid 0px #666;
			  width: 100%;
			  text-align: left;		
			  border-left: solid 1px #ccc;
			  border-right: solid 1px #ccc;
			  border-bottom: solid 1px #ccc;
			}
	
		.contenu11
			> input[type="checkbox"]:checked + label + div {
			  display: block;
			}
	
		.contenu11
			> input[type="checkbox"]:checked + label::before {
			  content: '▲ '; 
			  font-size: 14px;
			  color: #c33;
			}		
	
/* -- CONTENUS 12 ----------------------------- */		
	
		.contenu12 /*-- Texte des titres colonnes --*/
			{
			  background-color: #fff;
			  border-left: solid 0px #666;
			  border-top: solid 0px #666;
			  border-right: solid 0px #666;
			  border-bottom: solid 0px #666;
			  font-family: verdana, arial;
			  font-size: 14px;
			  margin-bottom: -1px;
			  padding: 10px;
			  color: #000;
			  text-align: left;
			  padding-top: 5px;
			}

		.contenu12:hover 
			{
			  background-color: #eee;
			}	
	
		.contenu12 
			> input[type="checkbox"] {
			  display: none;
			}
	
		.contenu12
			> label {
			  display: block;
			  width: 100%;
			  color: #393;
			  font-weight: bold;
			  border-bottom: solid 1px #ccc;
			  padding-top: 10px;
			  padding-bottom: 10px;
			}
	
		.contenu12 
			> label:before {
			  content: '▼ ';
			  font-size: 14px;
			  color: #000;
			}
	
		.contenu12
			> label + div {
			  display: none;
			}
	
		.contenu12 /*-- Cadre interne --*/
			> div {
			  margin-top: 10px;
			  background-color: #eee;
			  border: solid 0px #666;
			  width: 100%;
			  text-align: left;		
			  border-left: solid 1px #ccc;
			  border-right: solid 1px #ccc;
			  border-bottom: solid 1px #ccc;
			}
	
		.contenu12
			> input[type="checkbox"]:checked + label + div {
			  display: block;
			}
	
		.contenu12
			> input[type="checkbox"]:checked + label::before {
			  content: '▲ '; 
			  font-size: 14px;
			  color: #c33;
			}			
	
/* -- CONTENUS 13 ----------------------------- */		
	
		.contenu13 /*-- Texte des titres colonnes --*/
			{
			  background-color: #fff;
			  border-left: solid 0px #666;
			  border-top: solid 0px #666;
			  border-right: solid 0px #666;
			  border-bottom: solid 0px #666;
			  font-family: verdana, arial;
			  font-size: 14px;
			  margin-bottom: -1px;
			  padding: 10px;
			  color: #000;
			  text-align: left;
			  padding-top: 5px;
			}

		.contenu13:hover 
			{
			  background-color: #eee;
			}	
	
		.contenu13 
			> input[type="checkbox"] {
			  display: none;
			}
	
		.contenu13
			> label {
			  display: block;
			  width: 100%;
			  color: #393;
			  font-weight: bold;
			  border-bottom: solid 1px #ccc;
			  padding-top: 10px;
			  padding-bottom: 10px;
			}
	
		.contenu13 
			> label:before {
			  content: '▼ ';
			  font-size: 14px;
			  color: #000;
			}
	
		.contenu13
			> label + div {
			  display: none;
			}
	
		.contenu13 /*-- Cadre interne --*/
			> div {
			  margin-top: 10px;
			  background-color: #eee;
			  border: solid 0px #666;
			  width: 100%;
			  text-align: left;		
			  border-left: solid 1px #ccc;
			  border-right: solid 1px #ccc;
			  border-bottom: solid 1px #ccc;
			}
	
		.contenu13
			> input[type="checkbox"]:checked + label + div {
			  display: block;
			}
	
		.contenu13
			> input[type="checkbox"]:checked + label::before {
			  content: '▲ '; 
			  font-size: 14px;
			  color: #c33;
			}			
	
/* -- CONTENUS 14 ----------------------------- */		
	
		.contenu14 /*-- Texte des titres colonnes --*/
			{
			  background-color: #fff;
			  border-left: solid 0px #666;
			  border-top: solid 0px #666;
			  border-right: solid 0px #666;
			  border-bottom: solid 0px #666;
			  font-family: verdana, arial;
			  font-size: 14px;
			  margin-bottom: -1px;
			  padding: 10px;
			  color: #000;
			  text-align: left;
			  padding-top: 5px;
			}

		.contenu14:hover 
			{
			  background-color: #eee;
			}	
	
		.contenu14 
			> input[type="checkbox"] {
			  display: none;
			}
	
		.contenu14
			> label {
			  display: block;
			  width: 100%;
			  color: #393;
			  font-weight: bold;
			  border-bottom: solid 1px #ccc;
			  padding-top: 10px;
			  padding-bottom: 10px;
			}
	
		.contenu14 
			> label:before {
			  content: '▼ ';
			  font-size: 14px;
			  color: #000;
			}
	
		.contenu14
			> label + div {
			  display: none;
			}
	
		.contenu14 /*-- Cadre interne --*/
			> div {
			  margin-top: 10px;
			  background-color: #eee;
			  border: solid 0px #666;
			  width: 100%;
			  text-align: left;		
			  border-left: solid 1px #ccc;
			  border-right: solid 1px #ccc;
			  border-bottom: solid 1px #ccc;
			}
	
		.contenu14
			> input[type="checkbox"]:checked + label + div {
			  display: block;
			}
	
		.contenu14
			> input[type="checkbox"]:checked + label::before {
			  content: '▲ '; 
			  font-size: 14px;
			  color: #c33;
			}				
	
/* -- CONTENUS 15 ----------------------------- */		
	
		.contenu15 /*-- Texte des titres colonnes --*/
			{
			  background-color: #fff;
			  border-left: solid 0px #666;
			  border-top: solid 0px #666;
			  border-right: solid 0px #666;
			  border-bottom: solid 0px #666;
			  font-family: verdana, arial;
			  font-size: 14px;
			  margin-bottom: -1px;
			  padding: 10px;
			  color: #000;
			  text-align: left;
			  padding-top: 5px;
			}

		.contenu15:hover 
			{
			  background-color: #eee;
			}	
	
		.contenu15 
			> input[type="checkbox"] {
			  display: none;
			}
	
		.contenu15
			> label {
			  display: block;
			  width: 100%;
			  color: #393;
			  font-weight: bold;
			  border-bottom: solid 1px #ccc;
			  padding-top: 10px;
			  padding-bottom: 10px;
			}
	
		.contenu15 
			> label:before {
			  content: '▼ ';
			  font-size: 14px;
			  color: #000;
			}
	
		.contenu15
			> label + div {
			  display: none;
			}
	
		.contenu15 /*-- Cadre interne --*/
			> div {
			  margin-top: 10px;
			  background-color: #eee;
			  border: solid 0px #666;
			  width: 100%;
			  text-align: left;		
			  border-left: solid 1px #ccc;
			  border-right: solid 1px #ccc;
			  border-bottom: solid 1px #ccc;
			}
	
		.contenu15
			> input[type="checkbox"]:checked + label + div {
			  display: block;
			}
	
		.contenu15
			> input[type="checkbox"]:checked + label::before {
			  content: '▲ '; 
			  font-size: 14px;
			  color: #c33;
			}				
	
/* -- CONTENUS 16 ----------------------------- */		
	
		.contenu16 /*-- Texte des titres colonnes --*/
			{
			  background-color: #fff;
			  border-left: solid 0px #666;
			  border-top: solid 0px #666;
			  border-right: solid 0px #666;
			  border-bottom: solid 0px #666;
			  font-family: verdana, arial;
			  font-size: 14px;
			  margin-bottom: -1px;
			  padding: 10px;
			  color: #000;
			  text-align: left;
			  padding-top: 5px;
			}

		.contenu16:hover 
			{
			  background-color: #eee;
			}	
	
		.contenu16 
			> input[type="checkbox"] {
			  display: none;
			}
	
		.contenu16
			> label {
			  display: block;
			  width: 100%;
			  color: #393;
			  font-weight: bold;
			  border-bottom: solid 1px #ccc;
			  padding-top: 10px;
			  padding-bottom: 10px;
			}
	
		.contenu16 
			> label:before {
			  content: '▼ ';
			  font-size: 14px;
			  color: #000;
			}
	
		.contenu16
			> label + div {
			  display: none;
			}
	
		.contenu16 /*-- Cadre interne --*/
			> div {
			  margin-top: 10px;
			  background-color: #eee;
			  border: solid 0px #666;
			  width: 100%;
			  text-align: left;		
			  border-left: solid 1px #ccc;
			  border-right: solid 1px #ccc;
			  border-bottom: solid 1px #ccc;
			}
	
		.contenu16
			> input[type="checkbox"]:checked + label + div {
			  display: block;
			}
	
		.contenu16
			> input[type="checkbox"]:checked + label::before {
			  content: '▲ '; 
			  font-size: 14px;
			  color: #c33;
			}	


	
/* -- CONTENUS PLAN 1 ----------------------------- */	
	
		.contenuPlan1 /*-- Texte des titres colonnes --*/
			{
			  background-color: #fff;
			  font-family: verdana, arial;
			  font-size: 14px;
			  margin-bottom: -1px;
			  padding: 10px;
			  color: #000;
			  text-align: left;
			  padding-top: 5px;
			}

		.contenuPlan1:hover 
			{
			  background-color: #eee;
			}	
	
		.contenuPlan1 
			> input[type="checkbox"] {
			  display: none;
			}
	
		.contenuPlan1
			> label {
			  display: block;
			  width: 100%;
			  color: #393;
			  font-weight: bold;
			  border-bottom: solid 1px #ccc;
			  padding-top: 10px;
			  padding-bottom: 10px;
			}
	
		.contenuPlan1 
			> label:before {
			  content: ' ▼ ';
			  font-size: 14px;
			  color: #000;
			}
	
		.contenuPlan1
			> label + div {
			  display: none;
			}
	
		.contenuPlan1 /*-- Cadre interne --*/
			> div {
			  margin-top: 5px;
			  background-color: #eee;
			  border-left: solid 1px #ccc;
			  border-right: solid 1px #ccc;
			  border-bottom: solid 1px #ccc;
			  width: 100%;
			  text-align: left;	
			  padding-top: 0px;
			}
	
		.contenuPlan1
			> input[type="checkbox"]:checked + label + div {
			  display: block;
			}
	
		.contenuPlan1
			> input[type="checkbox"]:checked + label::before {
			  content: ' ▲ '; 
			  font-size: 14px;
			  color: #c33;
			}	
	
/* -- CONTENUS PLAN 2 ----------------------------- */	
	
		.contenuPlan2 /*-- Texte des titres colonnes --*/
			{
			  background-color: #fff;
			  border-left: solid 0px #666;
			  border-top: solid 0px #666;
			  border-right: solid 0px #666;
			  border-bottom: solid 0px #666;
			  font-family: verdana, arial;
			  font-size: 14px;
			  margin-bottom: -1px;
			  padding: 10px;
			  color: #000;
			  text-align: left;
			  padding-top: 5px;
			}

		.contenuPlan2:hover 
			{
			  background-color: #eee;
			}	
	
		.contenuPlan2 
			> input[type="checkbox"] {
			  display: none;
			}
	
		.contenuPlan2
			> label {
			  display: block;
			  width: 100%;
			  color: #393;
			  font-weight: bold;
			  border-bottom: solid 1px #ccc;
			  padding-top: 10px;
			  padding-bottom: 10px;
			}
	
		.contenuPlan2 
			> label:before {
			  content: '▼ ';
			  font-size: 14px;
			  color: #000;
			}
	
		.contenuPlan2
			> label + div {
			  display: none;
			}
	
		.contenuPlan2 /*-- Cadre interne --*/
			> div {
			  margin-top: 10px;
			  background-color: #eee;
			  border: solid 0px #666;
			  width: 100%;
			  text-align: left;		
			  border-left: solid 1px #ccc;
			  border-right: solid 1px #ccc;
			  border-bottom: solid 1px #ccc;
			}
	
		.contenuPlan2
			> input[type="checkbox"]:checked + label + div {
			  display: block;
			}
	
		.contenuPlan2
			> input[type="checkbox"]:checked + label::before {
			  content: '▲ ';
			  font-size: 14px;
			  color: #c33;
			}	
	
	
/* -- CONTENU PLAN 3 ------------------------------ */		
	
		.contenuPlan3 /*-- Texte des titres colonnes --*/
			{
			  background-color: #fff;
			  border-left: solid 0px #666;
			  border-top: solid 0px #666;
			  border-right: solid 0px #666;
			  border-bottom: solid 0px #666;
			  font-family: verdana, arial;
			  font-size: 14px;
			  margin-bottom: -1px;
			  padding: 10px;
			  color: #000;
			  text-align: left;
			  padding-top: 5px;
			}

		.contenuPlan3:hover 
			{
			  background-color: #eee;
			}	
	
		.contenuPlan3 
			> input[type="checkbox"] {
			  display: none;
			}
	
		.contenuPlan3
			> label {
			  display: block;
			  width: 100%;
			  color: #393;
			  font-weight: bold;
			  border-bottom: solid 1px #ccc;
			  padding-top: 10px;
			  padding-bottom: 10px;
			}
	
		.contenuPlan3 
			> label:before {
			  content: '▼ ';
			  font-size: 14px;
			  color: #000;
			}
	
		.contenuPlan3
			> label + div {
			  display: none;
			}
	
		.contenuPlan3 /*-- Cadre interne --*/
			> div {
			  margin-top: 10px;
			  background-color: #eee;
			  border: solid 0px #666;
			  width: 100%;
			  text-align: left;		
			  border-left: solid 1px #ccc;
			  border-right: solid 1px #ccc;
			  border-bottom: solid 1px #ccc;
			}
	
		.contenuPlan3
			> input[type="checkbox"]:checked + label + div {
			  display: block;
			}
	
		.contenuPlan3
			> input[type="checkbox"]:checked + label::before {
			  content: '▲  ';
			  font-size: 14px;
			  color: #c33;
			}	
	
	
/* -- CONTENU PLAN 4 ----------------------------- */		
	
		.contenuPlan4 /*-- Texte des titres colonnes --*/
			{
			  background-color: #fff;
			  border-left: solid 0px #666;
			  border-top: solid 0px #666;
			  border-right: solid 0px #666;
			  border-bottom: solid 0px #666;
			  font-family: verdana, arial;
			  font-size: 14px;
			  margin-bottom: -1px;
			  padding: 10px;
			  color: #000;
			  text-align: left;
			  padding-top: 5px;
			}

		.contenuPlan4:hover 
			{
			  background-color: #eee;
			}	
	
		.contenuPlan4 
			> input[type="checkbox"] {
			  display: none;
			}
	
		.contenuPlan4
			> label {
			  display: block;
			  width: 100%;
			  color: #393;
			  font-weight: bold;
			  border-bottom: solid 1px #ccc;
			  padding-top: 10px;
			  padding-bottom: 10px;
			}
	
		.contenuPlan4 
			> label:before {
			  content: '▼ ';
			  font-size: 14px;
			  color: #000;
			}
	
		.contenuPlan4
			> label + div {
			  display: none;
			}
	
		.contenuPlan4 /*-- Cadre interne --*/
			> div {
			  margin-top: 10px;
			  background-color: #eee;
			  border: solid 0px #666;
			  width: 100%;
			  text-align: left;		
			  border-left: solid 1px #ccc;
			  border-right: solid 1px #ccc;
			  border-bottom: solid 1px #ccc;
			}
	
		.contenuPlan4
			> input[type="checkbox"]:checked + label + div {
			  display: block;
			}
	
		.contenuPlan4
			> input[type="checkbox"]:checked + label::before {
			  content: '▲  ';
			  font-size: 14px;
			  color: #c33;
			}	
	
	
/* -- CONTENUS PLAN 5 ------------------------------ */		
	
		.contenuPlan5 /*-- Texte des titres colonnes --*/
			{
			  background-color: #fff;
			  border-left: solid 0px #666;
			  border-top: solid 0px #666;
			  border-right: solid 0px #666;
			  border-bottom: solid 0px #666;
			  font-family: verdana, arial;
			  font-size: 14px;
			  margin-bottom: -1px;
			  padding: 10px;
			  color: #000;
			  text-align: left;
			  padding-top: 5px;
			}

		.contenuPlan5:hover 
			{
			  background-color: #eee;
			}	
	
		.contenuPlan5 
			> input[type="checkbox"] {
			  display: none;
			}
	
		.contenuPlan5
			> label {
			  display: block;
			  width: 100%;
			  color: #393;
			  font-weight: bold;
			  border-bottom: solid 1px #ccc;
			  padding-top: 10px;
			  padding-bottom: 10px;
			}
	
		.contenuPlan5 
			> label:before {
			  content: '▼ ';
			  font-size: 14px;
			  color: #000;
			}
	
		.contenuPlan5
			> label + div {
			  display: none;
			}
	
		.contenuPlan5 /*-- Cadre interne --*/
			> div {
			  margin-top: 10px;
			  background-color: #eee;
			  border: solid 0px #666;
			  width: 100%;
			  text-align: left;		
			  border-left: solid 1px #ccc;
			  border-right: solid 1px #ccc;
			  border-bottom: solid 1px #ccc;
			}
	
		.contenuPlan5
			> input[type="checkbox"]:checked + label + div {
			  display: block;
			}
	
		.contenuPlan5
			> input[type="checkbox"]:checked + label::before {
			  content: '▲  ';
			  font-size: 14px;
			  color: #c33;
			}		
			

	
/*------------------------------------------------------------------*/
/*------------------------------------------------------------------*/
/*--- MENU ---------------------------------------------------------*/
/*------------------------------------------------------------------*/
/*------------------------------------------------------------------*/

		.boutonplan1, .boutonplan2, .boutonplan3, .boutonplan4
		{
			display: block;
			font-size: 16px;
			font-family: arial, helvetica, sans-serif;
			font-weight: normal;
			text-decoration: none;		
			
			text-align: center;	
			padding: 10px;
			
			border-radius: 4px;
			border-bottom: 1px solid #666;
			border-right: 1px solid #666;	
		}		
		
		.boutonplan1:hover, 
		.boutonplan2:hover, 
		.boutonplan3:hover, 
		.boutonplan4:hover
		{
			background: #366;
			color:  #fff;
		}
		
		.boutonplan1
		{
			width: 300px;
			background: #afeeee;
			color:  #333;	
		}

		.boutonplan2
		{
			width: 280px;
			background: #dda0dd;
			color:  #333;	
		}

		.boutonplan3
		{
			width: 260px;
			background: #90ee90;
			color:  #333;	
		}

		.boutonplan4
		{
			width: 240px;
			background: #aabbaa;
			color:  #333;	
		}