/*-----------------------------------------------------*\
	BASE
\*-----------------------------------------------------*/
*{margin:0;padding:0;:none;margin: auto;}


html, body{

		/*height:100%;width:100%;font:1em "Helvetica Neue",Helvetica,"Trebuchet MS",Arial,Verdana,sans-serif;
	/*height:100%;background:#111;font:1em "Helvetica Neue",Helvetica,"Trebuchet MS",Arial,Verdana,sans-serif;*/
	/*background-size: cover;  Dimensionne en proportion affiche l'image en commencant par le haut version standardisée */

}	
body{
			height:100%;width:100%;font:1em "Helvetica Neue",Helvetica,"Trebuchet MS",Arial,Verdana,sans-serif;
	/*background: url(../images/picjumbo3.png) no-repeat center fixed; center fixed : ne rogne pas, conserve au mieux le centre image 
background-size: cover;	*/
}	
#idfixed {
	height:100%;width:100%;font:1em "Helvetica Neue",Helvetica,"Trebuchet MS",Arial,Verdana,sans-serif;
	background: url(../images/picjumbo3-1.png);
    background-position: 100% 100%;/**/
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;/**/
    display:none;
    /* position:fixed;*/
    /*width:100%;
    height:100%;
    left:0;
    top:0;*/z-index:-1;
}

.br1{
	/* : 1px solid blue;*/ 
}
.container{
	display:inline-block;
		/*display: none;*/
	overflow:hidden; /*Evite la ligne blanche en haut :  les blocs (H1<> , p<>) ont des margins (mais attention on ne verra plus le 1er H1 car collé en haut derriere le menu : donc ajouter une marge de haut à .site-content CI-DESOUS > H1 bonjour! réapparait) */
	height:100%;width:100%;
	margin:0; /* 20pxgauche*/
} 

/*#content1_1 CADRE ZONE DE TEXTE
{
}*/

.site-content{padding-top:66px;}/**/

/*-----------------------------------------------------*\
	HEADER
\*-----------------------------------------------------*/
.header{
    position: fixed; /*Reste en haut même en scrollan*/
	left:0;
	right:0;
	height:66px;
	line-height:66px;
	color:#FFF;
	/*background-color:#0072c6; BLEU
	  background:#09F; */
}
.header__logo{
	font-weight:bold;
	padding:0 25px;
	float:left; /* Permet d'aligner (remonter) le bloc menu avec le logo*/
}

.menu_2{display: none;}


#bloc_Logo_tosa{  /*BLOC MENEU DE GAUCHE BLEU CLAIR autour (derrière) du menu */
	margin-left:1%;
	width:90%/*; 19 */
}
#bloc_Logo_handi{  /*BLOC MENEU DE GAUCHE BLEU CLAIR autour (derrière) du menu */
	
	/* 19 ;;margin-left:25%;*/
	
	/* centrer image*/
	  display: block; 
	  margin-left: auto;
	  margin-right: auto;
	  width:35%;
  	/* centrer image*/
  
  border: 3px solid #73AD21;


}

.tow_blocs{  /*BLOC entourant le logo tosa + menu logiciels */
	display: inline-block;
	position:relative;
	margin:0;
	left:1%;/**/
	width:20%;/* 19 */
	/*background-color:#0072c6;  BLOC VERTICAL BLEU transparent: donne un petit trait bleu clairen bas*/
	vertical-align: top;
	margin-top:2%;
    padding-left:2%;
	padding-top:2%;
    padding-bottom:3%;
}
.content1_1/* CADRE ZONE DE TEXTE BLEU : "La Formation*/
{  
	width:60%;/* 58 62.3%;*/
	display: inline-block; 
	margin-top:1%;
	margin-left:3%;
	margin-right:3%;
	
	padding-top:4%;
		padding-left:4%;
		padding-right:4%;
    padding-bottom:4%;
	
    background-color: rgba(84,192,205,0.6);
}

.content1_2/* CADRE ZONE DE TEXTE "NOTRE DÉMARCHE PÉDAGOGIQUE"*/
{  
	width:74%;/* 55 62.3%;*/
	display: inline-block; 
	margin-top:3%;
	margin-left:8.5%; /*20 30.25%;*/
	margin-right:3%;
	padding-top:4%;
    padding-left:4%;
	padding-right:4%;
    padding-bottom:4%;
    /*background-color: rgba(84,192,205,0.6);*/
	background-color: rgba(84,192,205,0.8)
}

.menu_1{  /*BLOC MENEU DE GAUCHE BLEU CLAIR autour (derrière) du menu */
	display: inline-block;
	position:relative;
	left:1%;/**/
	width:90%; /* 90%;19 */
	background-color:#0072c6; /* BLOC VERTICAL BLEU transparent: donne un petit trait bleu clairen bas*/
	vertical-align: top;
	margin-top:8%;
	/*margin-left:3%;*/
    padding-left:2%;
	padding-top:2%;
    padding-bottom:3%;
    background-color: rgba(84,192,205,0.6);	/* BLOC VERTICAL BLEU Uni*/
}

/*MENU BLEU DEGRADE FOND SUR PASSAGE SOURIS ****************************/	
.menu_1 ul li{/*NOUVEAU*/
width:90%;/*width:200px;*/
background:-webkit-linear-gradient(#90C,#730099);
background:-moz-linear-gradient(#90C,#730099);
background:-o-linear-gradient(#90C,#730099);
background:-ms-linear-gradient(#90C,#730099);/**/
background:linear-gradient(#3FF,#30F); /*FOND FIXE BLEU DEGRADE  */
list-style-type: none; /*Pas de puces*/
height:50px;/*HAUTEUR COULEUR BLEU HOVER 60px Trace un trait en bas*/
}
.menu_1 ul li a.menuLien{/*BLOC GRIS*/
display:block;
z-index:110;
color:white;
font-size:1.2em;
padding-left:4%;
height:40px; /*Donne le trait en bas*/
padding-top:5%;
background-color:#666;/*COULEUR FOND GRIS DE BASE*/
-webkit-transition:background 0.5s;
-moz-transition:background 0.5s;
-ms-transition:background-color 0.5s;
-o-transition:background 0.5s;
transition:background 0.5s;/*EFFET TRAINE SUR GLISSEMENT*/
text-decoration:none;/*empeche le soulignement des items*/
}
.menu_1 ul li a{/*NOUVEAU*/
text-align:left; /*Alignement du texte*/
}

/*-----------------------------------------------------*\
	la boite qui slide
\*-----------------------------------------------------*/
.menu_1 ul li div{
position:absolute;
left:2000px; /*démarrage du menu
margin-top:2px;*/

color:white;
background:rgba(0,0,0,0.6);
overflow:visible;/**/
-webkit-transition:1s left,1s width,1s opacity;
   -moz-transition:1s left,1s width,1s opacity;
     -o-transition:1s left,1s width,1s opacity;
        transition:1s left,1s width,1s opacity;
}

.menu_1 ul li:hover div{/*ARRIVEE SOUS MENU CADRE1*
/*left:30%;POINT D'ARRIVEE SOUS MENU*/
opacity:1;/*OBLIGATOIRE :  fait apparaitre SOUS MENU*/
/*width:20%; LARGEUR SOUS MENU*/
/*background:rgba(0,0,0,0.6);SERT ?*/
left:70%;/*arrivée du menu
vertical-align:top;*/
/*top:12%;*/
background:rgba(0,0,0,0.8);
top:8%;
}
.menu_1 ul li div.cadre1 { 
width:280%;
/*height:auto;  auto>Ajuste au contenu  50%>donne une taille verticale*/
/*left:0%; C'est ce qui empêche le décalage de la boite vers la droite
*/
/*padding:0%;  padding:10px; espace interne du conteneur 
margin:0%;
text-align:center;*/
top:10%;
/*left:2000px; démarrage du menu*/
-webkit-transition:1s left,1s width,1s opacity;
   -moz-transition:1s left,1s width,1s opacity;
     -o-transition:1s left,1s width,1s opacity;
        transition:1s left,1s width,1s opacity;
			font-size: 1.2vw; /* TEXTE PROPORTIONNEL*/
/* overflow: auto;   ajoute des barres de défilement si nécessaire */ 			
}
.menu_1 ul li a:hover{/* NOUVEAU*//*COULEUR EFFET DEGRADE*/
background:transparent; /*CE QUI FAIT DISPARAITRE LE FOND GRIS SUR GLISSEMENT SOURIS ET APPARAITRE LE BLEU */
-webkit-transition:background 0s;
-moz-transition:background 0s;
-o-transition:background 0s;
-ms-transition:background 0s;
transition:background 0s; /*DONNE UNE MEILLEURE TRAINEE CONTRASTEE DU GLISSEMENT*/
}

/*les elements de la boite
.menu_1 ul li div h5{font-size:2.8em;color:#099;text-align:right;}*/
.menu_1 ul li div h5{font-size:2.8em;color:#099;text-align:right;
padding-right:3%;}
/*.menu_1 ul li div p{text-indent:15px;padding-top:10px;width:100%;overflow:hidden;font-size:0.8em;font-weight:normal;text-align:justify;}
.menu_1 ul li div p{text-indent:15px;padding-top:10px;width:100%;overflow:hidden;font-size:0.8em;font-weight:normal;}
.menu_1 ul li div p.lien{text-align:right;}
.menu_1 ul li div p.lien a{color:#FFF;background:linear-gradient(#3FF,#30F);height:15px;}
.aa{color:#c10;background:linear-gradient(#3FF,#30F);height:15px;*/

/*-----------------------------------------------------*\
	MENU CHOIX LOGICIEL

/*MENU BLEU DEGRADE FOND SUR PASSAGE SOURIS ****************************/	
.menu_1 ul li div.cadre1 { /*CADRE NOIR Bureautique, PAO, etc. 
width:150%;
height:auto; /* auto>Ajuste au contenu  50%>donne une taille verticale*/
/*left:0%; C'est ce qui empêche le décalage de la boite vers la droite*/
/* top:25%; SUITE 35 
position:relative; Conserve le cadre noir au nuveau de chaque item du menu*/
top:15%;
padding:10%; /* padding:10px; espace interne du conteneur */
margin:0%; /*margin:-20%;*/

text-align:center;
-webkit-transition:1s left,1s width,1s opacity;
   -moz-transition:1s left,1s width,1s opacity;
     -o-transition:1s left,1s width,1s opacity;
        transition:1s left,1s width,1s opacity;
/*overflow: auto;    ajoute des barres de défilement si nécessaire */ 			
}
.menu_1 ul li div.boutonlogiciel { 
position:relative;/*-----------------------------------------------------*/
left:0px;
padding:1%;  /*aération interne des blocs */
margin:2% 2% 2% 2%; /* espacement (haut, droite, bas gauche)  entre les blocs */
width:40%;
height:14%;
border:1px solid #fff;
display:inline-block;
font:1em "Helvetica Neue",Helvetica,"Trebuchet MS",Arial,Verdana,sans-serif;
list-style-type: none; /*Pas de puces*/

}
.menu_1 ul li div.boutonlogiciel:hover{/* NOUVEAU*//*COULEUR EFFET DEGRADE*/
background:transparent; /*CE QUI FAIT DISPARAITRE LE FOND GRIS SUR GLISSEMENT SOURIS ET APPARAITRE LE BLEU */
-webkit-transition:background 0s;
-moz-transition:background 0s;
-o-transition:background 0s;
-ms-transition:background 0s;
transition:background 0s; /*DONNE UNE MEILLEURE TRAINEE CONTRASTEE DU GLISSEMENT*/
background:-webkit-linear-gradient(#90C,#730099);
background:-moz-linear-gradient(#90C,#730099);
background:-o-linear-gradient(#90C,#730099);
background:-ms-linear-gradient(#90C,#730099);/**/
background:linear-gradient(#3FF,#30F); /*FOND FIXE BLEU DEGRADE  */
}


.menu_1 ul li div.cadre1 a:hover{/* NOUVEAU*//*COULEUR EFFET DEGRADE*/
background:transparent; /*CE QUI FAIT DISPARAITRE LE FOND GRIS SUR GLISSEMENT SOURIS ET APPARAITRE LE BLEU */
-webkit-transition:background 0s;
-moz-transition:background 0s;
-o-transition:background 0s;
-ms-transition:background 0s;
transition:background 0s; /*DONNE UNE MEILLEURE TRAINEE CONTRASTEE DU GLISSEMENT*/
/* overflow: auto;   ajoute des barres de défilement si nécessaire */ 			

}

.menu_1 ul li div.cadre1:hover { 
/*width:800px;*/
width:200%; 
 /*overflow: auto;   ajoute des barres de défilement si nécessaire 		
  overflow-y : scroll; 	
SUITEWM overflow-y: auto;
overflow : -moz-scrollbars-vertical;*/
  

}
/*-----------------------------------------------------*\
	FIN la boite qui slide
\*-----------------------------------------------------*/

/*-----------------------------------------------------*\
	LISTE PROGRAMME
\*-----------------------------------------------------*/
.Flech12pourcListProgs {
display: inline;	
width: 5%;
vertical-align: middle;
}
.Flech12pourcListProgs:hover{/*SUISTE 2 ARRIVEE SOUS MENU CADRE1*
/*left:30%;POINT D'ARRIVEE SOUS MENU*/
/*opacity:1;OBLIGATOIRE :  fait apparaitre SOUS MENU*/
/*width:20%; LARGEUR SOUS MENU*/
/*background:rgba(0,0,0,0.6);SERT ?*/
/*aleft:70%;rrivée du menu*/
vertical-align:top;
/*top:8%;*/
width:100%; 
background:rgba(0,0,0,0.8);
}


/*-------------------------------------------------------------------------------------------------------------------------*\
/*-------------------------------------------------------------------------------------------------------------------------*\
/*-------------------------------------------------------------------------------------------------------------------------*\
	RESPONSIVE
/*-------------------------------------------------------------------------------------------------------------------------*\
/*-------------------------------------------------------------------------------------------------------------------------*\
/*-------------------------------------------------------------------------------------------------------------------------*/
/*@media only screen and (max-width: 750px)  En dessous de  750*/
@media only screen and (max-width: 760px),
(min-device-width: 768px) and (max-device-width: 1024px){ 
.menu_1{
display: none;
}
.site-pusher, .site-container{
		height:1000px;
		/*height:1000%;*/	
}	
.site-container{
	overflow:hidden; /*Evite la ligne blanche en haut :  les blocs (H1<> , p<>) ont des margins (mais attention on ne verra plus le 1er H1 car collé en haut derriere le menu : donc ajouter une marge de haut à .site-content CI-DESOUS > H1 bonjour! réapparait) */
	/*margin:0 20px; gauche
		height:100%;*/
} 

.site-pusher {
		height:1000px;
		/*height:100%;*/
	 transition-duration:0.4s; /* Délai d'apparition*/
	 transform:translateX(0px);/* pas de décalage par defaut*/
}	
.header{
	position:static;
}
.site-content{
	position:absolute;
    top: 66px;  /*La hauteur du header*/ 
    right: 0;
    left: 0;
    bottom: 0;
    padding-top: 0;
     overflow-y: scroll;/**/ 
    -webkit-overflow-scrolling: touch;  /*Inertie sur iOS  
	-webkit-transform: translateZ(0); 
	transform: translateZ(0);}*/
}	
	/* CREATION DU LOGO*/
.header__icon{
	position:relative
	display:block;
	float:left;
	width:50px;
	height:50px;
	cursor:pointer;  /*J	forcer le curseur à être la main sur le lien*/
	/*background-color:#F00;  Juste pour vérifier la taille de la zone clicable*/
}
.header__icon:after{	/* 3 petites trais*/
	content:''; /*Aucun texte*/
	position:absolute;
	width:1rem; /* = une fois la taille de la police 16px;*/
	height:0px;
	top:16px; /*Descendre les traits*/
	left:15px;
	box-shadow:0px 10px 0px 1px #FFF, 0 16px 0 1px #FFF, 0 22px 0 1px #FFF; /*faire 3 ombre portée sur le content:''; Ce qui a pour effet de créer 3 traits (mieux q'une image en terme de poids*/
}/**/

.menu_2{
display:block;
	position:absolute; /*Le positionnement absolu permet de placer un élément (réellement) n'importe où sur la page. Retire complètement l'élément concerné du flux, et le place aux coordonnées définies par les propriétés bottom, left, right ou top. Un élément A positionné en absolu à l'intérieur d'un autre élément B (lui-même positionné en absolu, fixe ou relatif) se positionnera par rapport à l'élément B, et non par rapport au coin en haut à gauche de la page.*/
	left:0;
	top:0;
	bottom:0;
	/*width:250px;*/

	transform:translateX(-250px);/* FAIRE DISPARAITRE LE MENU : il va faloir ensuite cacher automatiquement le menu en dehors de l'écran. Et lorsque on va cliquer le menu 3traits il va falloir qu'il se réaffiche : js va intervenir*/
	-webkit-transform:translateX(-250px);
	-moz-transform:translateX(-250px);
	-o-transform:translateX(-250px);
	-ms-transform:translateX(-250px);			
	 /*transition-duration:0.4s; Délai d'apparition*/
	/*background-color:#390;  VERT*/
	 background-color:#0072c6; /*BLEU*/
	 /*border: 3px solid blue;*/
}
.menu_2 a{ /*CHAQUE BLOC MENU*****************************/
	display:block;
	/*height:60px;*/
	text-align:center;
	/*line-height:40px;*/
	border-bottom:1px solid #2eaf32; /* SOULIGNEMENT BAS MENUS */
	color:#FFF;
}

/*SERT ? TOUT LE BLOC MENU*****************************/
.menu_2 ul{
/*margin:30px 0px 30px 185px;*/
width:250px;
position:relative;
border-radius:0px 15px 15px 0px;
background:transparent;
		padding:0;
		  /*border: 3px solid yellow;*/	

}
/*****************************/	

/*DEGRADE FOND SUR PASSAGE SOURIS ****************************/	
.menu_2 ul li{
/*position:relative;	
width:215px;
height:62px;
list-style:none;*/
/*background:#90C; COULEUR FOND */
background:-webkit-linear-gradient(#90C,#730099);
background:-moz-linear-gradient(#90C,#730099);
background:-o-linear-gradient(#90C,#730099);
background:-ms-linear-gradient(#90C,#730099);/**/
background:linear-gradient(#3FF,#30F); /*DEGRADE FOND BLEU*/
list-style-type: none; /*Pas de puces*/
}
/*****************************/	

/*****************************/	
.menu_2 ul li a{
height:56px;/*display:block;
width:160px;

padding-top:4px;
/*padding-left:25px;
padding-right:15px;

font-weight:bold;
text-shadow:0px 1px 0px #888;*/
background-color:#666; /*COULEUR FOND GRIS DE BASE*/
-webkit-transition:background 0.5s;
-moz-transition:background 0.5s;
-ms-transition:background-color 0.5s;
-o-transition:background 0.5s;
transition:background 0.5s;/*EFFET TRAINESUR GLISSEMENT*/
/*border:1px solid rgba(0,0,0,0.5);
border-left-width:15px;
border-top:1px solid rgba(255,255,255,0.5);*/
text-decoration:none;

}
/*****************************/	

.menu_2 ul li a:hover{ /*COULEUR EFFET DEGRADE*/
/*color:#39004D;
text-shadow:0px 1px 0px rgba(255,255,255,.3);*/
background:transparent; /*CE QUI FAIT DISPARAITRE LE FOND SUR GLISSEMENT SOURIS*/
-webkit-transition:background 0s;
-moz-transition:background 0s;
-o-transition:background 0s;
-ms-transition:background 0s;
transition:background 0s; /*DONNE UNE MEILLEURE TRAINEE CONTRASTEE DU GLISSEMENT*/
}

/*SERT ? *****************************/	
/*.menu_1 ul li a strong{
display:block;
font-size:0.8em;
font-weight:normal;}
****************************/	

/*arrondis haut et bas
.menu_1 ul li:first-child,#menu_1 ul li:first-child a{
border-radius:0px 15px 0px 0px;}

.menu_1 ul li:last-child,#menu_1 ul li:last-child a{
border-radius:0px 0px 15px 0px;}*/

/*petite fleche*/
/*.menu_1 ul li a:hover:after{
content:"";
position:absolute;
top:25px;
right:5px;
width:12px;
height:12px;
background:#39004D;
border-radius:6px;
 SERT PAS ? color:#90C; 
font-size:0.6em;
font-weight:normal;
text-indent:3px;}*/

/*.menu_1 ul li a:hover:before{
content:"";
position:absolute;
top:28px;
right:9px;
z-index:10;
width:0px;
height:0px;
border-left:3px solid #90C;
border-top:3px solid transparent;
border-bottom:3px solid transparent;}*/


.with--sidebar .site-pusher {  /* Faire apparaitre automatiquement le menu en cliquant sur le menu 3 traits*/
			transform:translateX(250px);
			-webkit-transform:translateX(250px);
			-moz-transform:translateX(250px);
			-o-transform:translateX(250px);
			-ms-transform:translateX(250px);
			}/*décalage du site vers la droite si le menu est activé (classe with--sidebar ajoutée par jquery à body */
			
	 /* .menu{transform:translateX(0px);AVANT*/
.with--sidebar .site-cache  {  /* Griser le contenu (content) */
			position:absolute; 
			top:0;
			left:0;
		    right: 0;
			bottom:0;
			background-color:rgba(0,0,0,0.6);/**/}
			
			
/***************************************************************************************/	
/*	TABLEAU PROGRAMMES		 */
/***************************************************************************************/	
			
			
			
			
			
} /*@media only screen and (max-width: 750px) {  En dessous de  750*/