@charset "utf-8";

/* HEADER */	
	#main-header {
	background-image:url(../images/photo_class.jpg);
	background-position:0;
	position: relative;
	-webkit-background-size: cover;
  	-moz-background-size: cover;
	background-size: cover;
	min-height: 500px;
	display: block;
	border: 0px;
	margin: 0 auto;
	margin-top:0px; 
	}
	#header-trait {
	margin-left:auto;
	margin-right: auto;
	background: -webkit-linear-gradient( left,  #02a2b2, white);
	background: -moz-linear-gradient( left, #02a2b2, white);
	background: -ms-linear-gradient( left, #02a2b2, white);
	background: -o-linear-gradient( left, #02a2b2, white);
	background: linear-gradient( to right, #02a2b2, white);
	margin-bottom:50px;
	width:70%;
	height:3px;
	}
	#header-content {
	overflow: hidden;
    width:980px;
    margin-left: auto;
    margin-right: auto;
	padding-top:80px;
	padding-bottom: 50px;
	text-align: center;
	}
	#header-content .header1 {
	background-color:rgba(255, 255, 255, 0.8);
	margin-top: -10px;
	}
	#main-content {
	background-color: #fbfbfb;
	display: block;
	}
	.souligne {
	 text-decoration: underline;
	}
	.eleves-content {
    float: left;
    width: 425px;
    margin-right: 130px;
	text-align:left;
	}
	.eleves-content-bis{
    float: left;
    width: 420px;
    margin: 0px;
	text-align:left;
	}
	a.top {
	position: relative;
	top:-70px;
	display: block;
	height: 0;
	width:0;
	}

/* BLOC 2 - OEUVRES CONCERNEES */
	#main-content {
	background-color: #fbfbfb;
	display: block;
	}
	#bloc2 {
	background-color: #fbfbfb;
	padding-top: 20px;
	}
	#bloc2-content {
	overflow: hidden;
    width:980px;
    margin-left: auto;
    margin-right: auto;
	padding-bottom: 25px;
	}
	#bloc2-content .oeuvres-content {
	display:inline-block;
	width: 205px;
	padding-top: 10px;
	padding-right: 20px;
	text-align:center;
	}
	#bloc2-content .oeuvres-content1 {
	display:inline-block;
	width: 225px;
	padding-top: 10px;
	padding-right: 20px;
	text-align:center;
	}
	#bloc2-content .oeuvres-content-droite {
	width: 200px;
	display:inline-block;
	padding-top: 10px;
	padding-right: 20px;
	text-align:center;
	}
	#bloc2-content .oeuvres-content-gauche {
	width: 210px;
	display:inline-block;
	padding-top: 10px;
	padding-right: 30px;
	text-align:center;
	}
	#bloc2-content .oeuvres-content .img {
    width: 164px;
	}

/* BLOC 3 - COPIER */
	#main-content {
	background-color: #41cedb;
	display: block;
	}
	#bloc3 {
	background-color: #09bacc;
	padding-top: 20px;
	}
	#bloc3-content {
	overflow: hidden;
    width:980px;
    margin-left: auto;
    margin-right: auto;
	padding-bottom: 25px;
	}
	#bloc3-content .oeuvres-content-gauche {
	width: 180px;
	display:inline-block;
	padding-top: 10px;
	padding-right: 30px;
	text-align:center;
	}
	#bloc3-content .oeuvres-content {
	display:inline-block;
	width: 240px;
	padding-top: 10px;
	padding-right: 20px;
	text-align:center;
	}
	#bloc3-content .oeuvres-content1 {
	display:inline-block;
	width: 240px;
	padding-top: 10px;
	padding-right: 20px;
	text-align:center;
	}
	#bloc3-content .oeuvres-content-droite {
	width: 180px;
	display:inline-block;
	padding-top: 10px;
	padding-right: 20px;
	text-align:center;
	}
	
	#bloc3-content .oeuvres-content .img {
    width: 164px;
	}

	/*#bloc3-content {
	overflow: hidden;
    width:980px;
    margin-left: auto;
    margin-right: auto;
	padding-bottom: 25px;
	}
	#bloc3-content .oeuvres-content-right {
	display:inline-block;
	width: 275px;
	text-align: center;
	padding-top: 10px;
	}
	#bloc3-content .oeuvres-content-centre {
	display:inline-block;
	width: 295px;
	padding-left: 96px;
	padding-right: 70px;
	text-align: center;
	padding-top: 10px;
	}
	#bloc3-content .oeuvres-content-left {
	display:inline-block;
	width: 220px;
	padding-top: 10px;
	text-align: center;
	}
*/
	

/* BLOC 4 - diffuser */
	#bloc4{
	background-color:#FFF;
	padding-top: 20px;
	}
	#bloc4-content {
	overflow: hidden;
    width:980px;
  	margin-left: auto;
    margin-right: auto;
	padding-bottom: 25px; 
	}
	#bloc4-content .diffuser-content-right {
	display:inline-block;
	width: 290px;
	padding-top: 10px;
	text-align: center;
	}
	#bloc4-content .diffuser-content-centre {
	display:inline-block;
	width: 310px;
	padding-left: 80px;
	padding-right: 50px;
	padding-top: 10px;
	text-align: center;
	}
	#bloc4-content .diffuser-content-left {
	display:inline-block;
	width: 237px;
	padding-top: 10px;
	text-align: center;
	}
	#diffuser1-bg {
	margin-bottom: 10px;
	text-align: center;
	}
	#diffuser2-bg {
	margin-bottom: 10px;
	}
	#diffuser3-bg {
	margin-bottom: 10px;
	text-align: center;
	}
	#bloc4-content ul {
	list-style: none;
	padding-inline-start: 0px;
    margin-top: -10px;
	}
	#bloc4-content .blanc  {
	padding-top: 30px;
	}

/*BLOC 5 - pedagogique */
	#bloc5{
	background-color:#E1E1E1;
	margin-top: 0px;
	padding-top: 10px;
	}
	#bloc5-content {
	overflow: hidden;
    width:980px;
    margin-left: auto;
    margin-right: auto;
	text-align:left;
	padding-bottom: 10px;
	}

	#bloc5-content .internet {
	display:inline-block;
	float: left;
	width: 240px;
	padding-left: 0px;
	padding-right: 30px;
	padding-top: 10px;
	text-align: center;
	}

	#bloc5-content .copier {
	overflow: hidden;
    margin-left: auto;
    margin-right: auto;
	text-align:left;
	padding-bottom: 15px;
	}

	#bloc5-content .copier-content-centre{
	padding-top: 70px; 
	margin-left: -100px;
   	} 

/* BLOC 6 - conditions */
	#bloc6{
	background-color:#fff;	
	padding-top: 20px;
	}

	#bloc6-content {
	overflow: hidden;
    width:980px;
    margin-left: auto;
    margin-right: auto;
	padding-bottom:10px;
	}

	#bloc6-content .conditions-content{
    float: left;
	padding-left: 0px;
    width: 240px;
	/*margin-right: 40px;*/
	padding-top: 10px; 
	/*padding-bottom: 30px;*/
	text-align: center;
   	} 
	#bloc6-content .conditions-content-centre{
    float: left;
    width: 240px;
	margin-right: 86px;
	margin-left: 86px;
	padding-top: 10px; 
	text-align: center;
   	} 
	#bloc6-content .conditions-content-droite {
    float: left;
	width: 325px;
	padding-top: 10px;
	text-align: center;
	} 
	#bloc6-content .content-titre {
    text-align: center; 
	} 
	#bloc6-content .image-conditions {
	margin: auto;
	}

/* BLOC 7 - droit */	
	#bloc7 {
	background-color:#fbfbfb;
	margin-top: 0px;
	padding-top: 20px;
	}
	#bloc7-content {
	overflow: hidden;
    width:980px;
    margin-left: auto;
    margin-right: auto;
	padding-bottom: 40px;
	text-align:left;
	}
	#bloc7-content a{
	font-weight:600;
	color:#000;
	text-decoration: underline;
	}
	#bloc7-content a:hover{
	color: #01A4B8;
	font-weight: 600;
	text-decoration: underline;
	}

	.droit-content {
 	float: left;
    width: 980px;
	padding-left: 0;
	margin-top: 0;
	}
	.droit-content1  {
	list-style: none;
	background-color: #c9d0ca;
	}
	.image-droit {
 	float: left;
    margin-top: -30px;
    padding-bottom: 20px;
	}
	.titre-droit {
	float: left;
	width: 960px;
 	display: block;
	}

	/*#bloc7 {
	background-color:#09bacc;
	margin-top: 0px;
	padding-top: 20px;
	}
	#bloc7-content {
	overflow: hidden;
    width:980px;
    margin-left: auto;
    margin-right: auto;
	padding-bottom:40px;
	text-align:left;
	}
	.droit-content {
    float: left;
    width: 980px;
	padding-left: 0;
	margin-top: 0;
	}
	.droit-content1  {
    list-style: none;	
    background-color: #D3D3D3;  
    margin-top: 10px;
	}
	.image-droit {
 	float: left;
  	padding-right: 15px;
	position: relative;
	margin-top: -20px;
	}
	.titre-droit {
	float: left;
	width: 960px;
 	display: block;
	padding-bottom:20px;
	}*/

/* BLOC 8 - Loi */	

#bloc8 {
	background-color:#09bacc;
	margin-top: 0px;
	padding-top: 20px;
	}
	#bloc8-content {
	overflow: hidden;
    width:980px;
    margin-left: auto;
    margin-right: auto;
	padding-bottom:40px;
	text-align:left;
	}
	.loi-content {
    float: left;
    width: 980px;
	padding-left: 0;
	margin-top: 0;
	}
	.loi-content1  {
    list-style: none;	
    background-color: #D3D3D3;  
    margin-top: 10px;
	}
	.image-loi {
 	float: left;
  	padding-right: 15px;
	position: relative;
	margin-top: -18px;
	}
	.titre-loi {
	float: left;
	width: 960px;
 	display: block;
	padding-bottom:20px;
	}



/* BLOC 9 - FAQ */	
	#bloc9 {
	background-color:#09bacc;
	margin-top: 0px;
	padding-top: 20px;
	}
	#bloc9-content {
	overflow: hidden;
    width:980px;
    margin-left: auto;
    margin-right: auto;
	padding-bottom:40px;
	text-align:left;
	}
	.faq-content {
    width: 980px;
	padding-left: 0;
	padding-top: 0; 
	list-style-type: none;
	}
	.faq-titre  {
	list-style: none;
	background-color: #e2e3e3; 
	}
	.image-faq {
	float: left;
	display: block;
	margin: auto;
	}
	.soustitre-faq{
	float: left;
    width: 980px;
	margin-bottom: 10px;
	font-weight: 600; 
	}

/* BLOC 10 - BAS DE PAGE */	
	#bas-page{
	background-color:#006a8f;
	margin-top: 0px;
		width:auto;
	}
	#bas-page-content {
   width: 960px;
    width:980px;
    margin-left: auto;
    margin-right: auto;
	padding-top: 20px; 
	padding-bottom: 20px;
	text-align:left;
	}
	#bas-page-droite{
	width: auto;
	font-size: 15px;
	color: #FFFFFF;
	padding-top: 10px;
	padding-bottom: 20px; 
	}
	#bas-page-mail{
	width: 960px;
	color: #FFFFFF;
	padding-top: 0px;
	padding-bottom: 10px; 
	}
	#contact {
	width: 900px;
	padding-top: 20px;
	padding-bottom: 10px;
	}
	#contact-bleu {
	clear: both;
	padding-top: 20px;
	}


.goto {
	color: #000;
	text-decoration: underline;
	font-weight: 600;
	}
.goto:hover{
	color: #6AE2EE;
	}
.goto1 {
	color: #000;
	text-decoration: underline;
	font-style: italic
	}
.goto1:hover{
	color: #fff;
	}
.goto2 {
	color: #000;
	text-decoration: underline;
	font-style: italic
	}
.goto2:hover{
	color: #fff;
	}
.goto3 {
	color: #000;
	text-decoration: underline;
	font-style: italic
	}
.goto3:hover{
	color: #fff;
	}
.goto4 {
	color: #000;
	text-decoration: underline;
	font-style: italic
	}
.goto4:hover{
	color: #fff;
	}

.goto5 {
	color: #000;
	text-decoration: underline;
	}
.goto5 a{
	color: #000;
	text-decoration: underline;
	}
.goto5:hover{
	color: #02a2b2;
		text-decoration: underline;
	}
.goto6 {
	color: #000;
	text-decoration: underline;
	}
.goto6 a{
	color: #000;
	text-decoration: underline;
	}
.goto6:hover{
	color: #02a2b2;
		text-decoration: underline;
	}
.goto7{
	color: #000;
	text-decoration: underline;
	}
.goto7 a{
	color: #000;
	text-decoration: underline;
	}
.goto7:hover{
	color: #02a2b2;
		text-decoration: underline;
	}
.goto8{
	color: #000;
	text-decoration: underline;
	font-style: italic
	}
.goto8 a{
	color: #000;
	text-decoration: underline;
	font-style: italic
	}
.goto8:hover{
	color: #fff;
	}