/* mise en forme du bloc page */

#bloc_page {
	width:1100px;	
	margin:auto;
	margin-top:15px;		
	display:flex;
	position:relative;
	font-family:Arial,"Comic Sans MS" ,sans-serif;

	
}

/* Couleur des elements orange */

#boxorange ,#orangevertleft,#orangevertmiddle,#orangevertmiddle2,#orangevertright {
	background-color: rgb(249,134,7);
}

/* Couleur des elements verts */

#greenhortop,#greenhortop1,#greenhormiddle ,#greenhormiddle1,#greenhormiddle2, #greenhorbottom {
	background-color: rgb(163,201,25);
}


#boxorange {
	width: 170px;
	height: 710px;
	left:0;
	position:relative;	
}


#boxorange h2 {
	transform-origin: right bottom 0;
	transform: rotate(270deg);
	letter-spacing: 20px;
	margin-top:450px;
	position:relative;
	right:50px;
	font-size:45px;	
	color:white;
	text-transform:UPPERCASE;
	font-family:"Comic Sans Ms", serif;
}

#boxorange p {
	transform-origin: right bottom 0;
	transform: rotate(270deg);
	letter-spacing: 20px;
	margin-top:450px;
	position:relative;
	right:50px;
	font-size:45px;
	font-weight:bold;	
	color:white;
	text-transform:UPPERCASE;
	font-family:"Comic Sans Ms", serif;
}

#boxorange .flocon {
	position:absolute;
	top:-300px;
	right:60px;
	margin-right:45px;
	font-size:2.5em;
}

#boxorange .poutrains {
	position:absolute;
	top:-100px;
	left:-60px;
	margin-right:10px;
	font-size:2.5em;
}

#boxorange .bousbecque {
	position:absolute;
	top:-65px;
	left:-10px;
	margin-right:-40px;
	font-size:2.5em;
}

#boxorange .carnot {
	position:absolute;
	top:-170px;
	left:-80px;
	margin-right:30px;
	font-size:2.5em;
}


#boxorange .brun {
	position:absolute;
	top:-80px;
	left:-10px;
	margin-right:-20px;
	font-size:2.5em;

}

#boxorange .pain {
	position:absolute;
	top:-330px;
	left:-10px;
	margin-right:-20px;
	font-size:2.5em;

}

#boxorange .reliance {
	position:absolute;
	top:-120px;
	left:20px;
	
	font-size:2.5em;

}

#boxorange .siege {
        margin-top:220px;
     
}

#boxorange .chrs {
        margin-top:220px;

}


#boxorange .cpe {

        position:absolute;
	top:-260px;
	left:-80px;
	margin-right:30px;
	font-size:2.5em;

}


#boxorange .diablotins {

        position:absolute;
	top:-80px;
	left:-10px;
	margin-right:-20px;
	font-size:2.5em;

}




#boxorange .item1 {
	margin-top:470px;
}

#orangevertleft{
	width:14px;	
	height:710px;
	position:absolute;
	left:187px; 
}

#orangevertmiddle {
	width:14px;	
	height:710px;
	position:absolute;
	left:590px; 
}

#orangevertmiddle2 {
	width:14px;	
	height:330px;
	position:absolute;
	left:850px; 
	top:380px;
}



#orangevertright {
	width:14px;	
	height:710px;
	position:absolute;
	left:1090px;	
}

#greenhortop {
	height:14px;	
	width:890px;
	position:absolute;
	top:40px;
	left:200px;
}


#greenhortop1 {
	height:14px;	
	width:389px;
	position:absolute;
	top:213px;
	left:201px;
}

#greenhormiddle {
	height:14px;	
	width:487px;
	position:absolute;
	top:371px;
	left:603px;
}


#greenhormiddle1 {
	height:14px;	
	width:247px;
	position:absolute;
	top:520px;
	left:604px;
}

#greenhormiddle2 {
	height:14px;	
	width:226px;
	position:absolute;
	top:590px;
	right:10px;
}


#greenhorbottom {
	height:14px;	
	width:890px;
	position:absolute;
	top:646px;
	left:200px;
}


/*

  Mise en forme du texte central 


#texte {
	width: 890px;
	height:600px;	
	margin:auto;
	margin-top:50px;
	margin-right:10px;	
	background-color: rgb(183,235,255);  couleur de base (183,221,255)
	letter-spacing: 0.5px;

}





*/

/*
#texte h3 {
	margin-bottom:30px;
}
#texte p {
	font-family:"Comic Sans Ms", sans-serif;
	padding-left:20px;
	padding-top:15px;	

}

#texte #top {
	position:absolute;
	width:100px;
	height:100px;
	top:20px;
	left:740px;
	
}


#texte #bottom {
	position:absolute;
	width:100px;
	height:100px;
	top:510px;
	left:210px;
	
}


#textscroll {
	width: 890px;
	height:600px;	
	margin:auto;
	margin-top:50px;
	margin-right:10px;
	 background-color:	rgb(183,235,255)	/*rgb(219,247,215);	
	 
	
}

#textscroll p {
	font-family:"Comic Sans Ms", sans-serif;
	padding:6px 0;
}

/* Titres page asso 


#textscroll h1  {
	
	color:rgb(63,165,235);	
	text-align:center;
	text-shadow:3px 3px white;	
	font-size:28px;

}


#textscroll h2 {
	padding:10px;
	color:rgb(30,165,235);
	font-size:21px;
	font-family:"verdana ,Tahoma , sans-serif";

}


#textscroll h4 {
	text-align:center;
	font-size:20px;
}



#textscroll span {
	padding-left: 10px;

}





.colorblue {
	color:orange;
}








/* paragraphes page asso_valeurs, asso_role....


 p.association {
	font-size:17px;	
	margin-left:10px;



}
#textscroll span {
	text-decoration:none;
}



/*  Mise en forme page asso environnement et developpement 






.descriptionsecond {
	width:390px;
	position:absolute;
	top:135px;
	margin-left:410px;
}

.descriptionsecond p{
	font-size:15px;
	position:relative;
	top:50px;
	text-align:justify;
	
}
*/



/* contenu du texte central (index...) */


#texte {	
	width: 950px;
	height:650px;
	font-family:arial , verdana , sans-serif;

}


/* Mise en forme du cadre central */

#container {
	display:flex;
	flex-direction:row;
	width:auto;
	height:auto;
	flex-wrap:wrap;
}


#subcontainer1 {	
	margin-top:45px;
	margin-left:20px;	
	display:flex;
	
}


.presentation {
	background: rgb(200,201,25);
	height:175px;
	width:405px;
}

.presentation h3 {
	text-align:center;
	padding-top:50px;	
	font-size:22px;
	padding: 45px 25px;

}



.presentation a {

	color:white;
	text-decoration:none;
	text-align:center;
	
}




.cadredroit a, .cadremilieu a, .plan a{
	color:white;
	text-decoration:none;
	text-align:center;
	}

.presentation a:hover, .cadremilieu a:hover{
	text-decoration:underline;
	color:rgb(63,165,235);
}



.cadredroit a:hover, .plan a:hover {
	text-decoration:underline;
	color:rgb(200,201,25);
}

.cadredroit  {
	background: rgb(63,165,235);	
	width:503px;
	height:328px;	
}

.cadredroit h3 {
	text-align:center;
	margin-top:80px;
	font-size:22px;
}

#hidden  {
	text-align:center;
	color:white;
	margin-top:120px;
	font-size:25px;

}

#hidden .title:hover {
	text-decoration:none;
	color:white;
}

.cadredroit .show {
	text-align:center;
	margin-top: 60px;
	font-size:22px;
}

#subcontainer2 {	
	
	
	margin-left:20px;
	display:flex;


}


.image {
	background: none;
	width:407px;
	height:430px;
	margin-top:-150px;
}

.image img {
	width:100%;
	height:100%;
}

.cadremilieu {

	background: rgb(200,201,25);
	
	height:150px;
	width:260px;

}

.cadremilieu h3 {
	text-align:center;
	padding-top:50px;
	color:white;
}

.cadretelechargement {
	background: rgb(63,165,235);
	width:239px;
	height:225px;
	margin-top:-5px;
}


#subcontainer3 {	
	display:flex;  
	margin-left:20px;
}


.videgauche {
	background-color:none;
	width:407px;
}

.plan {
	background-color:rgb(63,165,235);
	width:260px;
	height:125px;
	margin-top:-125px;
}

.plan h3 {
	text-align:center;
	padding-top:30px;

}

.videdroit {
	background-color:rgb(200,201,25);
	width:239px;
	height:55px;
	margin-top:-55px;
}


.livret {
	background-color:orange;
	float:right;
	width:280px;

	display:none;


}

.bilan {
	display:none;
}

#boxorange .paej
{ 
	
        position:absolute;
	top:-170px;
	left:-5px;
	
	font-size:2.5em;

}