/* ==========================================================================
							   Style Général
	   ========================================================================== */
body {
	font-family: 'trebuchet MS';
	background-image: linear-gradient(white 40%, #E3B055 80%, white 95%);
	/*background-image: url(images/fond_maron.jpg);*/
	/*background-image: linear-gradient(90deg, #166089 1%, #fff 33%,#fff 66%, #ea0909 99%);*/
	--cadre_activite_width:180px; /*ancien 250 */
	--cadre_activite_height:150px; /*ancien 200 */
}
h1 {
	font-size: x-large;
	text-align:center;
	color: #000099;/* bleu */
	text-shadow: 0.5px 0.5px 0.5px #75bef3;
	font-weight: normal;
}
h2 {
	font-size: 1.2em;
	font-style: italic;
	text-align:center;
	color: #000099; /* bleu */
}
h3 {
	font-size: 1.2em;
	text-align:center;
	color: #000099; /* bleu */
}
h4 {
	font-size: xx-large;
	text-align:center;
	font-style: none;
	color: #990000;/* marron */
}
h5 {
	font-size: x-large;
	font-weight:normal;
	color: #990000;/* marron */
	margin:0px;
	padding:0px;
}
h6 {
	font-size: x-large;
	font-weight:normal;
	color: #086B1B;/* vert */
	margin:0px;
	padding:0px;
}
.intro /*Gros titre BLEU*/ {
	font-size: large;
	text-align:center;
	color: #000099;	
}
.alert {
	color:red;
}
.danger, .success {
	display: block;
	width: 500px;
	border: 1px solid red;
	text-align: center;
	margin: auto;
	border-radius: 15px;
	background-color: rgba(255,0,0,0.1);
}
.success{
	color: green;
	border: 1px solid green;
	background-color: rgba(24,230,127,0.1);
}

em {
	color:black;
	font-size: 14px; 
}
p,news ul li {
	font-size: medium;
	text-align: justify;	
}

a {
	color: #990000;
	text-decoration: none;
}
a:active, a:focus{
      outline:none;
}
a:hover, news ul a:hover {
	color: #9ca0ae; 
}
article {
	display:block;
	width: 50%;
	padding: 1px 10px 10px 10px;
	margin-left: 34%;
	vertical-align: top;
}
article img {
	vertical-align: middle;
}
news {
	float: left;
	width: 33%;
	border: 1px solid #999999;
	border-radius: 10px;
	background: rgba(255,255,255,0.6);	
	padding-right: 10px;
	/*padding: 1px 10px 10px 1px;*/
	margin-left: 5%;
}
news ul {
    padding-left: 25px;
}

img {transition: opacity 0.2s;}
.icone_user img:hover {opacity: 0.3;}
.imageflottante{float: right;margin:10px;}

introduction {
	display: block;
	font-size: x-large;
	text-align:center;
	color: #000099; /* bleu */
    }

section {
	display: inline-block;
	vertical-align: top;
}


/* ==========================================================================
	   							Différents Cadres
 ========================================================================== */

cadre_titre, cadre_titre3 {
	color:#FFFFFF;
	font-size: large;
        width: 500px;
	border: 1px solid #999999;
	border-radius: 10px;
	/*box-shadow: 0px 2px 5px #1c1a19;*/
	padding: 10px;
	margin-top: 50px;
	display: block;
	background-color:#CCCCCC;
}
cadre {
	font-size: large;
    width: 500px;
	border: 1px solid #999999;
	border-radius: 10px;
	padding: 10px;
	margin-top: 5px;
	display: block;
}

cadre_titre3 {
	valign:middle;
        width: 270px;
	padding-top: 5px;
	margin-top: 20px;
	margin-left: 10px;
}
cadre_titre3 a {font-size: large;color:#FFFFFF;}
cadre_titre3 a:hover {color:red;}

cadre3 {
	text-align:left;
	font-size: large;
        width: 270px;
	border: 1px solid #999999;
	border-radius: 10px;
	margin-left: 10px;
	margin-top: 5px;
	padding: 10px;
	display: block;
}


/* ==========================================================================
	   					Cadre activité (Ex. acivités dans Animaux)
 ========================================================================== */

cadre_activite{
	width: var(--cadre_activite_width); /*ancien 250*/
	height: var(--cadre_activite_height); /*ancien 200*/
	display: inline-block;
	position:relative;
	vertical-align: top;
	padding:5px;
	margin:5px;
	border: 1px solid #999999;
	border-radius:10px;
	overflow: hidden;
}
cadre_activite img {
	max-width: var(--cadre_activite_width);
	max-height: calc(var(--cadre_activite_height) - 50px);
}
.remarque, cadre_activite h1 {
	font-size: small;
	font-weight:normal;
	text-align:center;
	margin:5px;
	color: #000099;
}

niv6e, niv5e, niv4e, niv3e, niv2e, niv1stmg, nivts, nivtstmg, nivtes, nivtsti2d, nivmulti, niv1s {
	height: 20px;	
	font-size: 0.8em;
	text-align:left;
	color: #000099; /* bleu */
	position:relative;
	top:-22px;
	display: inline-block;
	padding-left:5px;padding-right:5px;
	border: 1px solid #999999;
	border-radius:10px 5px 20px 5px;
	background-image: linear-gradient(white 20%, #99FF00 90%);
	transition: top 0.7s;
}
nivtsti2d{left:-90px;background-image: linear-gradient(white 20%, #E7B8FF 90%);}
nivtes{background-image: linear-gradient(white 20%, #F6E2A1 90%);}
nivmulti{background-image: linear-gradient(white 20%, #CCCCCC 90%);}
niv6e, nivts{background-image: linear-gradient(white 20%, #D6DFFB 90%);}
niv5e, nivtstmg, niv1stmg {background-image: linear-gradient(white 20%, #EDAFF9 90%);}
niv4e, niv1S{background-image: linear-gradient(white 20%, #F9E4D8 90%);}
niv3e, niv2e{background-image: linear-gradient(white 20%, #DCF9B0 90%);}

.description {
	width: var(--cadre_activite_width);
	height: calc(var(--cadre_activite_height) + 5px);
	font-weight: auto;
	font-size: 0.7em;
	-webkit-hyphens: auto;
  	-ms-hyphens: auto;
  	hyphens: auto; /* Césure automatique */
	color:#000;
	text-align:justify;
	display: inline-block;
	position: absolute;
	top: calc(var(--cadre_activite_height) + 10px);
	left:5px;
	border: 1px solid #999999;
	border-radius:10px;
	background-color: rgba(230,230,230,0.8);
	transition: top 0.7s;
}
.description em {
	font-size: 0.8em;
}
.logo img {
	height: 25px;
}
.logo {
	height:25px;
	display:inline-block;
	text-align:right;
	position:relative;
	top: 3px;
	left:calc(var(--cadre_activite_width) - 118px);
	opacity:1;
	transition: top, opacity, 0.7s;
}

infobule .info {
	font-size: 0.7em;	
}
infobule:hover .info {
	top:calc(15px - var(--cadre_activite_height));
	opacity: 1;
}
infobule img {
	opacity: 0;
}
.info {
	display:block;
	position:relative;
	top:5px;
	padding:5px;
	opacity: 0;
	color:black;
	border: 2px solid #999999;
	border-radius:30px 10px 30px 10px;
	background-color: #CCCCCC;
	transition: opacity, top, 0.7s;
}

cadre_activite:hover .description {top: 5px;}
cadre_activite:hover img {opacity: 0.3;}
cadre_activite:hover .description img {opacity: 1;}
cadre_activite:hover niv2e {top:-7px;}
cadre_activite:hover niv3e {top:-7px;}
cadre_activite:hover niv4e {top:-7px;}
cadre_activite:hover niv5e {top:-7px;}
cadre_activite:hover niv6e {top:-7px;}
cadre_activite:hover niv1s {top:-7px;}
cadre_activite:hover nivts {top:-7px;}
cadre_activite:hover nivtstmg {top:-7px;}
cadre_activite:hover niv1stmg {top:-7px;}
cadre_activite:hover nivtes {top:-7px;}
cadre_activite:hover nivtsti2d {top:-7px;}
cadre_activite:hover nivmulti {top:-7px;}
cadre_activite:hover .logo {top:calc(20px - var(--cadre_activite_height));}
cadre_activite:hover .logo img {opacity:1;}
cadre_activite:hover .logo {opacity:1;}


/* ==========================================================================
	   							header
 ========================================================================== */

.icone li {
    width: 90px;
    /*height: 25px;*/
	text-align:center;
	margin-left:5px;
	padding: 2px 0px;
	/*padding-top:4px;*/
    display: inline-block;
	border: 1px solid #999999;
	border-radius: 10px;
    background-color: #EEEEEE/*#DADAFA*/;
	transition:border-color, background-color, 0.2s;
}
@media (max-width: 1010px){
.icone li {
	width: 80px;
	margin-left: 2px;
	}
}

.icone li:hover, .supermenu:hover  {
	border-color: maroon;
    background-color: #FFFFFF;
}

ul.icone {
	padding-left: 0px;
}
.icone .icone-0, .icone .icone-0:hover {
	border: none;
	background-position: left top;
	background: url("") no-repeat;
	width: 120px;
}

.supermenu {
	display: block;
	position: absolute;
	right: 25px;
	top: 30px;
	width: 30px;
	height: 30px;
	border: 1px solid #999999;
	border-radius: 10px;
	padding: 2px 5px;
}

.supermenu img {
	width: 30px;
}

.supermenu>.sousmenu {
	display: inline-block;
	position: absolute;
	text-align:left;
    background-color: #FFFFFF;
	border-radius: 10px;
	left: -200px;
	top: 40px;
	width: 200px;
	max-height: 0px;
	overflow: hidden;
	opacity: 0;
	list-style-type: none;
	z-index: 1;
	transition: opacity 1s, max-height 0.1s;
}

.supermenu>.sousmenu.active {
	opacity: 0.9;
	max-height: 500px;
	padding: 10px 20px;
	box-shadow: 2px 1px 5px #1c1a19;
	border: 1px solid #999999;
}
.play {
	display: block;
	background-image: url(../images/play.png);
	background-size: 30px;
	background-repeat: no-repeat;
	background-position: center;
	margin-top: 10px;
	width: 100%;
	height: 30px;
}
.play.active {
	background-image: url(../images/pause.png);
}
.logo_livre, .logo_livre2{
	color: #2121a7;
	font-weight: bold;
	text-shadow: 0.5px 0.5px 0.5px #75bef3;
	display: inline-block;
	position:relative;
	left:10px;
	top:10px;
	-webkit-animation:logo_livre 4s;
	-moz-animation:logo_livre 4s;
	-ms-animation:logo_livre 4s;
	-o-animation:logo_livre 4s;
	animation:logo_livre 4s alternate infinite;
}
.logo_livre2{
	left:10px;
	top:5px;
	animation:logo_livre 4s alternate-reverse infinite;
}
@-webkit-keyframes logo_livre{
	from {left:-20px;}
	to {left:12px;}
}
@-moz-keyframes logo_livre{
	from {left:-20px;}
	to {left:12px;}
}
@-ms-keyframes logo_livre{
	from {left:-20px;}
	to {left:12px;}
}
@-o-keyframes logo_livre{
	from {left:-20px;}
	to {left:12px;}
}
@keyframes logo_livre{
	from {left:-20px;}
	to {left:12px;}
}

.icone_user li {
	width: 40px;
	height: 40px;
	display: inline-block;
	background: #FFFFFF;
	border: 1px solid #999999;
	border-radius: 10px;
	transition:border-color 0.1s;
}
.icone_user li:hover{border-color: maroon;}
.icone_user > .icone_zik {
	height: 25px;
	width: 25px;
	background: transparent;
	overflow: hidden;
	border: 0px solid #999999;
}

audio{
	position: relative;
	left: -10px;
	top: -7px;
}

.icone_user {
	float: right;
    width: 95px;
    display: inline-block;
	vertical-align: top;
	text-align: center;
	padding: 1px;
}

mot_cle, cadre_menu {display: none;}

@media (max-width: 540px){
.supermenu {
	top: 105px;
}
.supermenu>.sousmenu {
	width: 80vw;
	left: -80vw;
	font-size: 1.4em;
}
}


/* ==========================================================================
						   Espace perso / Compte
   ========================================================================== */
.login {
	background: rgba(255,255,255,0.5);
} 
.menu-compte {
	text-align:left;
	width: 300px;
	display: inline-block;
	margin-top: 10px; 
}
.menu-compte h1 {
	font-size: large; 
}
.menu-compte img {
	width: 50px;
	height: 50px;
	float: left;
}
.menu-compte input[type="text"], .menu-compte input[type="password"] {
	width: 195px;
	text-align: left;
	color: #000099;
	background-color: rgba(0,0,255,0.1);
}
.menu-compte input[type="password"] {
	width: 45%;
	margin-left: 10px;
	border: 1px solid #999;
	border-radius: 5px;
}
.menu-compte input[type="submit"] {
	width: 33%;
	color: #000099;
	border-radius: 5px;
	border: 1px solid #000099;
	background-color: rgba(0,0,255,0.5);
	margin-left: 33%;
	margin-top: 5px;
}
.menu-compte input[type="submit"].center {
	margin-left: 10%;
}
.menu-compte select {
	width: 45%;
	color: #000099;
	border-radius: 5px;
	border: 1px solid #000099;
	background-color: rgba(0,0,255,0.2);
}


/* ==========================================================================
						   Footer
   ========================================================================== */
footer {
	margin-top: 5px;
	font-size: 12px;
	text-align: center;
	color: #000099;
}

footer img {
	vertical-align: middle;
}

@media (max-width: 540px){ 

footer {
	margin-top: 0px;
	overflow: hidden;
	max-height: 0px;
}
}

/* ==========================================================================
						   Cadre Menu (collège / Lycée)
   ========================================================================== */

.menu {
	position: relative;
	display: inline-block;
	background: rgba(255,255,255,0.6);
	margin-left: 20px;
	border: 1px solid #999999;	
	border-radius: 10px;
	box-shadow: 2px 1px 5px #1c1a19;
	width: 30%;
	overflow: hidden;
}
.menu a {
	color: inherit;
	font-size: large;
}

.menu h1, .menu h2, .menu h6, .menu h3 {
	width: 85%;
	height: 1em;
	border-bottom: 1px solid #000099;
	text-align: left;
	margin: 7px;
	margin-left: 10px;
	text-shadow: none; 
}
.menu h2, .menu h3 {
	color: #990000;
	border-bottom: 1px solid #990000;
	font-style:normal;
	font-weight: normal;
	padding-bottom: 5px;
}
.menu h6 {
	color: #086B1B;
	border-bottom: 1px solid #086B1B;
}
.menu h3 {
	color: #e67300;
	border-bottom: 1px solid #e67300;
}
.menu img {
	display: block;
	position: absolute;
	opacity: 0.5;
	right: -200px;
	top: 60px;
	transition:right 0.3s;
}

/*.menu .bas {
	top: -800%;
}*/

.menu h1:hover img, .menu h2:hover img, .menu h6:hover img, .menu h3:hover img {	
	right: 0px;
}

/*.menu h2:hover img {	
	right: 0px;
}*/

@media (max-width: 960px){
.menu{
	width: 40%;
}
}
@media (max-width: 770px){
.menu{
	width: 48%;
	margin-left: 5px;
}
.menu a {
	font-size: medium;
}
}
@media screen and (max-width: 540px){
.menu {
	width: 95%;
}
}
@media screen and (min-width: 1300px){
.menu h1:hover img {
	right: 100px;
}
}

.activite li {
	width: 250px;
	height: 300px;
	display: inline-block;
	vertical-align: top;
	padding:5px;
	margin-left:5px;
	border: 1px solid #999999;
	text-align:center;
	border-radius:10px;
	background: url("images/fond_maron_tableau.jpg");
}
.activite .activite-1 {
	vertical-align: top;
	padding:5px;
	margin-left:2%;
	}

/* ==========================================================================
   							Onglets
   ========================================================================== */
.onglet {
	display: block;
}
.onglet li {
	display: inline-block;
	border-radius: 5px;
	padding: 5px;
	background: #eee;
}
.onglet li:after {
	content: '';
	display: block;
	background-color: #314159;
	max-width: 1px;
	height: 1px;
	opacity: 0;
	transition : max-width 0.5s, opacity 0.3s;
}
.onglet:hover:after {
	max-width: 250px;
	opacity: 1;
}
.onglet.active {
	background-color: #314159;
	transition: background 1s;
}
.onglet.active a {
	color: #fff;
}
.onglet_content li {
	display: none;
	columns: 1;
	/*background: #fff;*/
	font-size: 0.8em;
}
.onglet_content .active {
	display: block;
}
.onglet_content iframe {
	width: 100%;
}

.fade {
	opacity: 0;
	transition: opacity 0.1s;
}
.fade.in {
	opacity: 1;
	transition: opacity 0.5s;
}
.onglet_content>.col_3 {
	columns: 3;
}
.onglet_content>li>.col_3 {
	columns: 3;
}
.onglet_content>.col_2 {
	columns: 2;
}
.onglet_content>li>.col_2 {
	columns: 2;
}

@media (max-width: 540px){
.onglet_content.col_2 {
	columns: 1;
}
}


/* ==========================================================================
								   Exercices
  ========================================================================== */
iframe{
	width:800px;
	height:450px;
	border-radius:10px 50px 10px 10px;
	box-shadow: 0px 2px 5px #1c1a19;
	background-image: linear-gradient(#eee 40%, #eee 80%);
}
cadre iframe {width:490px;height:280px;}

.icone.sous_menu{
	width: 300px;
}

input[type="text"], textarea {
    border: 1px solid #999999;
    margin-bottom: 5px;
    color: #660000;
	text-align:center;
	border-radius:5px;
}
input[class="alert"] {
    border: 1px solid red;
	border-radius:15px;
	background-color: rgba(255,0,0,0.1);
}
input[type="text"]:focus, textarea:focus {
	box-shadow: 0px 1px 3px #660000;
	transition: 0.2s;
}
input[type="button"] {
	font-weight: bold;
    border: 1px solid #999999;
	border-radius:5px;
    color: #900;
    display: block;
    margin: auto;
}
input[type="button"]+img {
	vertical-align: middle;
}
#inl_block {
	display: inline-block;
	margin: 5px;
}

input[value="Suite"] {
	color:#126E20;
    border: 1px solid #999999;
	border-radius:5px;
	background-color: #9AD89A;
}
input[type="note"]  {
	width:40px;
	height:40px;
    color: red;
	text-align:center;
    border: 1px solid red;
	border-radius:30px;
	background-color: #F9E6E6;
}

div.rappel  {
	display: block;
	position: absolute;
	background-color: #314159;
	bottom: 40px;
	padding: 5px 20px 5px 20px;
	width: 90%;
	z-index: -1;
	color: #fff;
	border-radius: 10px;
	border: 1px solid #000;
	opacity: 0;
	transition: opacity 1s;
}

div.rappel h1  {
	margin-top: 5px;
}

button.rappel{
	display: block;
	position: absolute;
	height: 30px;
	width: 80px;
	right: 70px;
	bottom: 10px;
	font-weight: bold;
	border-radius: 10px;
	background: #314159;
	opacity: 0.5;
	transition: opacity 0.3s;
}
button.rappel:hover {
	opacity: 1;
}

.rappel>h1 {color:#fff;}
.rappel.active {
	z-index: 10;
	opacity: 0.9;
}
.curent_note{
	display: block;
	color: #314159;
	position: absolute;
	bottom: 15px;
	left: 80px;
	opacity: 0.5;
}
.precedent, .suivant, .numpage{
	display: inline-block;
	position:absolute;
	left:10px;
	top:400px;
	height:48px;
	width:48px;
	background-image: url(../images/flecheg.png);
}	
.suivant{
	left:742px;
	background-image: url(../images/fleched.png);
}
.numpage{	
	left:370px;
	top:420px;
	width:60px;
	height:23px;
	text-align:center;
	color:green;
    	border: 1px solid #999999;
	border-radius:10px;
	background-image: none;
	opacity: 0.3;
}
.pointvert, .pointrouge {
	display: inline-block;
	width:5px;
	height:5px;
	margin-left:5px;
	margin-right:5px;
	margin-top: 3px;
	border: 3px solid #2C8F2C;
	border-radius:5px;
	background-color:#53E444;
}
.pointrouge {
	background-color:red;
	border: 3px solid #B11717;
}

.billet_num {
	display: block;
	position: relative;
	content: '';
	height: 0;
	width: 150px;
	top: -190px;
	left: 100px;
}

.avion {
	position: absolute;
	top: -50px;
	left: -350px;
	-webkit-animation:avion 5s forwards 1s;
	-moz-animation:avion 5s forwards 1s;
	-ms-animation:avion 5s forwards 1s;
	-o-animation:avion 5s forwards 1s;
	animation:avion 5s forwards 1s;
}

@-webkit-keyframes avion {
	from {left:-350px;top: -50px;}
	to {left:450px; top: 240px;}
}
@-moz-keyframes avion {
	from {left:-350px;top: -50px;}
	to {left:450px; top: 240px;}
}
@-ms-keyframes avion {
	from {left:-350px;top: -50px;}
	to {left:450px; top: 240px;}
}
@-o-keyframes avion {
	from {left:-350px;top: -50px;}
	to {left:450px; top: 240px;}
}
@keyframes avion {
	from {left:-350px;top: -50px;}
	to {left:450px; top: 240px;}
}

.verre_mesureur {
	overflow: hidden;
	border: 4px solid #000;
	border-radius: 100px 0px 15px 15px;
	width: 150px;
	height: 250px;
}
.verre_mesureur>.niv {
	width: 150px;
	height: 50px;
	transition: height 0.4s;
	border-bottom: 1px solid #000;
}
.niv:nth-child(1) {
	height: 40px;
}
.niv:nth-child(2) {
	height: 80px;
}
.niv:nth-child(3) {
	height: 60px;
}
.niv:nth-child(4) {
	height: 40px;
}
.niv:nth-child(5) {
	height: 30px;
}
.verre_mesureur>.niv>.niv_content {
	display: block;
	position: relative;
	background: #314159;
	width: 150px;
	height: 0px;
	top: 80px;
	transition: height 0.4s, top 0.4s;
}
.niv>.niv_content.active {
	height: 80px;
	top: 0;
}

.arbre {
	position: relative;
	display: block;
  	width:240px;
  	height:185px;
  	margin-right: 30px;
    background: url(http://maths-au-quotidien.fr/images/arbre_fond.gif);
}

.level1,.level2,.level0-1,.level1-2{
	display: block;
	position:absolute;
	left:90px;
  	text-align:center;
    width: 50px;
  	height: 20px;
	/*border: 1px solid black;
  background:white;*/
}
.level2{left:220px;}
.level0-1{left:20px;top:40px;}
.level1-2{left:160px;top:5px;}

/* ==========================================================================
								   Rechercher
  ========================================================================== */
.search>input {
	color: #fff;
	width: 30px; 
	height: 30px;
	border: 0px solid #000;
	background-image: url('images/search0.png');
	background-repeat: no-repeat;
	background-color: rgba(49,65,89,0);
	background-size: 30px;
	transition: width 2s, background-color 4s;
	text-align: left;
}

.search>input:focus {
	background-color: #314159;
	color: #fff;
	width: 200px;
	padding-left: 35px;
	transition: width 0.3s , background-color 0.3s;
}

.search>input::placeholder {
	opacity: 0;
}

.search>input:focus::placeholder {
	opacity: 1;
}

.icone.search {
	/*background-color: rgba(49,65,89,0);*/
	width: auto;
	height: 30px;
}

.result {
	border: 3px solid #314159;
	border-radius: 10px 50px;
	padding: 10px 15px;
	background: #eee;
}
/* ==========================================================================
	   								Imagiciel
   ========================================================================== */

@-webkit-keyframes imagiciel_anime{
	from {left:-200px; opacity:0;}
	60% {left:300px; opacity:1;}
	to {left:400px; opacity:0;}
}
@-moz-keyframes imagiciel_anime{
	from {left:-200px; opacity:0;}
	60% {left:300px; opacity:1;}
	to {left:400px; opacity:0;}
}
@-ms-keyframes imagiciel_anime{
	from {left:-200px; opacity:0;}
	60% {left:300px; opacity:1;}
	to {left:400px; opacity:0;}
}
@-o-keyframes imagiciel_anime{
	from {left:-200px; opacity:0;}
	60% {left:300px; opacity:1;}
	to {left:400px; opacity:0;}
}
@keyframes imagiciel_anime{
	from {left:-200px; opacity:0;}
	60% {left:300px; opacity:1;}
	to {left:400px; opacity:0;}
}
.imagiciel1,.imagiciel2,.imagiciel3,.imagiciel4,.imagiciel5,.imagiciel6,.imagiciel7,.imagiciel8,.imagiciel9,.imagiciel10,.imagiciel11,.imagiciel12,.imagiciel13,.imagiciel14,.imagiciel15,.imagiciel16,.imagiciel17,.imagiciel18,.imagiciel19,.imagiciel20,.imagiciel21,.imagiciel22,.imagiciel23,.imagiciel24,.imagiciel25,.imagiciel26,.imagiciel27,.imagiciel28,.imagiciel29,.imagiciel30,.imagiciel31,.imagiciel32,.imagiciel33,.imagiciel34,.imagiciel35,.imagiciel36,.imagiciel37,.imagiciel38,.imagiciel39,.imagiciel40,.imagiciel41,.imagiciel42,.imagiciel43,.imagiciel44,.imagiciel45,.imagiciel46,.imagiciel47,.imagiciel48,.imagiciel49,.imagiciel50,.imagiciel51,.imagiciel52,.imagiciel53,.imagiciel54,.imagiciel55,.imagiciel56,.imagiciel57,.imagiciel58,.imagiciel59,.imagiciel60 {
	display: inline-block;
	position:absolute;
	left:-220px;
	height: 100px;
	opacity:0;
	-webkit-animation:imagiciel_anime 5s;
	-moz-animation:imagiciel_anime 5s;
	-ms-animation:imagiciel_anime 5s;
	-o-animation:imagiciel_anime 5s;
	animation:imagiciel_anime 5s;
}
imagiciel img:hover{opacity:0;}

.imagiciel2{animation-delay:2s;}
.imagiciel3{animation-delay:4s;}
.imagiciel4{animation-delay:6s;}
.imagiciel5{animation-delay:8s;}
.imagiciel6{animation-delay:10s;}
.imagiciel7{animation-delay:12s;}
.imagiciel8{animation-delay:14s;}
.imagiciel9{animation-delay:16s;}
.imagiciel10{animation-delay:18s;}
.imagiciel11{animation-delay:20s;}
.imagiciel12{animation-delay:22s;}
.imagiciel13{animation-delay:24s;}
.imagiciel14{animation-delay:26s;}
.imagiciel15{animation-delay:28s;}
.imagiciel16{animation-delay:30s;}
.imagiciel17{animation-delay:32s;}
.imagiciel18{animation-delay:34s;}
.imagiciel19{animation-delay:36s;}
.imagiciel20{animation-delay:38s;}
.imagiciel21{animation-delay:40s;}
.imagiciel22{animation-delay:42s;}
.imagiciel23{animation-delay:44s;}
.imagiciel24{animation-delay:46s;}
.imagiciel25{animation-delay:48s;}
.imagiciel26{animation-delay:50s;}
.imagiciel27{animation-delay:52s;}
.imagiciel28{animation-delay:54s;}
.imagiciel29{animation-delay:56s;}
.imagiciel30{animation-delay:58s;}
.imagiciel31{animation-delay:60s;}
.imagiciel32{animation-delay:62s;}
.imagiciel33{animation-delay:64s;}
.imagiciel34{animation-delay:66s;}
.imagiciel35{animation-delay:68s;}
.imagiciel36{animation-delay:70s;}
.imagiciel37{animation-delay:72s;}
.imagiciel38{animation-delay:74s;}
.imagiciel39{animation-delay:76s;}
.imagiciel40{animation-delay:78s;}
.imagiciel41{animation-delay:80s;}
.imagiciel42{animation-delay:82s;}
.imagiciel43{animation-delay:84s;}
.imagiciel44{animation-delay:86s;}
.imagiciel45{animation-delay:88s;}
.imagiciel46{animation-delay:90s;}
.imagiciel47{animation-delay:92s;}
.imagiciel48{animation-delay:94s;}
.imagiciel49{animation-delay:96s;}
.imagiciel50{animation-delay:98s;}
.imagiciel51{animation-delay:100s;}
.imagiciel52{animation-delay:102s;}
.imagiciel53{animation-delay:104s;}
.imagiciel54{animation-delay:106s;}
.imagiciel55{animation-delay:108s;}
.imagiciel56{animation-delay:110s;}
.imagiciel57{animation-delay:112s;}
.imagiciel58{animation-delay:114s;}
.imagiciel59{animation-delay:116s;}
.imagiciel60{animation-delay:118s;}



/* ==========================================================================
						   Maths
   ========================================================================== */

.fraction{
  display: inline-block;
  width: auto;
  vertical-align: middle;
  text-align: center;
}
.num{
  display: block;
  position: relative;
  border-bottom: 2px solid #000;
  padding-bottom: 5px;
}
.den{
  display: block;
  position: relative;  
  margin-top: 3px;
}
.fraction em {
	font-size: initial;
}

{
	/* ==========================================================================
							   Tablette
	   ========================================================================== */
}

@media (max-width: 770px){

flash {display:none}

iframe {width: 100%;height: 450px;}

header {
	display: inline-block;
	width: 95%;	
}

.icone li{
	/*width: 89px;*/
	/*height: 26px;*/
	margin-top: 5px;
}

.icone li a {font-size: large;}

.icone_user li {
	width: 80px;
	margin-left: 15px;
	/*margin-top: 10px;*/
	padding: 5px;
}
.icone_user, .icone
{
	float: left;
    	width: 100%;
    	display: inline-block;
	vertical-align: top;
	text-align: center;
	padding: 5px;	
}
.icone_user img { 
    	width: 40px;
    	height: 40px;
}
.icone_user .icone_zik {display:none}
.icone  .icone-0 {display:none}

/*introduction {width:95%;font-size: xx-large;}*/

.intro {font-size: x-large;text-align:justify;}

news {
	font-size: x-large;
    width: 95%;
	margin-left: 1%;
	margin-right: 30px;
    }
section {width:95%;}

cadre_titre, cadre_titre3 {
	font-size: x-large;
    width: 95%;
	padding: 5px;
	margin-left: 1%;
	margin-right: 1%;
	margin-top: 1%;
}
cadre, cadre3 {
	font-size: large;
    width: 100%;
	margin-left: 1px;
	margin-right: 1px;
}

cadre_titre3 a {font-size: xx-large;color:#FFFFFF;}
cadre_titre3 a:hover {font-size: xx-large; color:#9900FF;}


niv6e, niv5e, niv4e, niv3e, niv2e, niv1stmg, nivts, nivtstmg, nivtes, nivtsti2d, nivmulti, niv1s {
	/*left:-80px;*/
	font-size: 0.9em;
}

cadre_menu {
	width: 225px;
	height: 250px;	
	display: inline-block;
	margin-left: 2px;
	margin-top: 5px;
	padding-left: 1px; 
	border: 1px solid #999999;
	border-radius: 10px;
}
cadre_menu a {font-size:xx-large;color:#000099;}
cadre_menu a:hover {font-size: xx-large;color:red;}

cadre_menu_gauche,cadre_menu_droite {padding:10px 0px 10px 0px;width: 46%;}
cadre_menu_droite {left:550px;}

article, footer {
    width: 100%;
	float: left;   
	/*font-size: xx-large;*/
	margin-left: 1%;
	padding-left: 1px;     
    }
footer {display: inlines-block;}

menu_flash {display: none}

section-menu {display: block;margin-top: 10px;}

.menu li {
	width: 230px;
	height: 200px;
	font-size: xx-large;
	color:#000099; /* bleu */
	display: inline-block;
	margin-left: 20px;
	margin-top: 20px;
	padding-left: 1px; 
	border: 1px solid #999999;
	border-radius: 10px;		
	}
.menu-compte li {
	text-align:left;
	width: 500px;
	font-size: xx-large;
	color:#000099; /* bleu */
	display: inline-block;
	margin-left: 1px;
	margin-top: 30px;
	padding-left: 1px;  
	}
}


{
	/* ==========================================================================
						   Smartphone
	   ========================================================================== */
}

@media (max-width: 540px){     /*AU LIEU DE 480px*/

header {width: 100%;}
imagiciel {display: none;}

.icone li {
	width:28%;
	margin: 0px 1px 5px 1px;
	padding:5px;
	font-size:large;
	/*margin-bottom:5px;*/
	/*height:20px;*/
}
.icone_user li {
	width:28%;
	height:40px;
	margin:1px;
	padding:5px;
	font-size:large;
}

img{max-width: 100%
}
cadre {
	font-size: large;
	padding: 0px;
}

cadre_activite{width:45%;height:260px;margin: 0px;}
cadre_activite h1 {font-size:large;}
.description {
	height:265px;
	font-size: small;
	top:270px;
}
section {
	width: 100% /*530px;
	display: block;
	margin-top: 5px;
	margin-left: 1px;
	padding-left: 1px;   
	float: left;*/	
}
iframe{
	height: 95vh;
	border-radius:10px 10px 10px 10px;
}
.imageflottante{width: 40%;height: 40%;}
.suivant{
	left:85%;
}
.precedent, .suivant, .numpage{
	top:90vh;
}	
.numpage{
	left:42%;
}	


/***************************  modifs sûres ***************************/

/*.icone li a {font-size:xx-large;}*/


/*.intro {font-size: xx-large;width:530px;}*/


.logo, .logo2 {
	position: absolute;
	top:89%;
	left:80%;
}

.logo2 {
	left:60%;
}

cadre_activite:hover .logo {top:0%;} 

.info {
	top:40px;
}

/*cadre,*/ cadre3 {
	display: block;
	font-size: xx-large;
    width: 100%;
	border: 1px solid #999999;
	border-radius: 10px;
	padding: 10px;
	margin-left: 1%;
	margin-right: 1%;
	background-color: #FFFFFF;
}

cadre_titre3 a {font-size: xx-large;color:#FFFFFF;}
cadre_titre3 a:hover {font-size:xx-large;color:#9900FF;}


cadre_menu {
	width: 250px;
	height: 250px;	
	display: inline-block;
	margin-top: 5px;
	padding-left: 1px; 
	border: 1px solid #999999;
	border-radius: 10px;
}

cadre_menu_gauche, cadre_menu_droite {
	width:100%;
	margin: 1px;
}

niv6e, niv5e, niv4e, niv3e, niv2e, niv1stmg, nivts, nivtstmg, nivtes, nivtsti2d, nivmulti, niv1s {
	left:0px;
	top:-30px;
	height:27px;
	font-size: 0.9em;
}
#menu, #menu2, #menu3, #menu4{
	width: 95%;
	height:50px;
	font-size:x-large;
}
article, footer {
	margin-left: 1%;
	padding-left: 1px;     
	float: left;   	
    }
.menu li {
	width: 500;
	height: 200px;
	font-size: xx-large;
	color:#000099; /* bleu */
	display: inline-block;
	margin-left: 1px;
	margin-top: 5px;
	padding-left: 1px; 
	border: 1px solid maroon;
	border-radius: 10px;
	box-shadow: 0px 2px 5px #1c1a19; 
	background: url("") no-repeat;
	}
.menu-compte li {
	right: 0;
	width: 100%;
	font-size: xx-large;
	color:#000099; /* bleu */
	display: inline-block;
	margin-top: 10px;
	margin-left: 1px;
	padding-left: 1px;  
	}
.activite li {
	width: 45%;
	display: inline-block;
	vertical-align: top;
	position:left;
	padding: 5px;
	margin-left:1px;
	margin-top: 5px;
	border:1px solid #999999;
	text-align:center;
	border-radius:10px;
}
cadre ul, section-menu ul, section-menu li {
        margin-left: 0;
        padding-left: 0px;
    }
}