@charset "utf-8";

/*variables*/
:root {
	--policeGlobale:Arial, Helvetica, sans-serif;
	--taillePoliceGlobale: 100%;
	--taillePoliceOreilleDroite: 70;
	
	--hauteurBanniere: 213px;
	--largeurBanniere: 950px;
	--largeurOreilleGauche: 500px;
	--largeurOreilleDroite: 400px;
	--largeurEncartGauche: 500px;
	--hauteurFiltre: 40px;
	--hauteurRetours: 40px;
	--hauteurPiedPage: 30px;
}

#banniere {/*style applicable aux éléments ayant cette id*/
position:absolute;
width: calc(100% - var(--largeurOreilleDroite)); /*calc(100% - var(--largeurOreilleGauche));*/
height:var(--hauteurBanniere);
left: 0px; /*var(--largeurOreilleGauche) ; *//*calc( ( 100% - 950px ) / 2 );*/ /*350px ;*/
top: 0px;
z-index: 1;
}

#bannierezold {/*style applicable aux éléments ayant cette id*/
position:fixed;
width:950px;
height:213px;
left: calc((100% - 950px) / 2 ) ;
top: 0px;

}

body {
width:100%;
height : 100%;
margin:0px;
padding:0px;
background-color: white; /*yellow;
background-image: linear-gradient(blue, green);*/

}

.boutonListe{/*style applicable à tous les éléments d une même classe*/
/*height: 90px;*/
/*width:100%;*/
/*font-size : var(--taillePoliceGlobale);*/
text-align: center;
background-color: #F5ECCE;
/*font-family: var(--policeGlobale);*/
border-radius: 10px;
border-width: thick;
border-color: #79edf3;
}
.centre{/*style applicable à tous les éléments d une même classe*/
/*height: 90px;*/
/*width:100%;*/
/*font-size : var(--taillePoliceGlobale);*/
text-align: center;

}  

/*contenu en bas partie droite*/
#contenuDroit {
position:absolute;
display: table;
width: calc(100% - var(--largeurEncartGauche)) ; /*950px;*/
height: calc(100% - var(--hauteurBanniere) - var(--hauteurFiltre) - var(--hauteurPiedPage) - var(--hauteurRetours) );
left: var(--largeurEncartGauche); /*350px ;*/
top: calc( var(--hauteurBanniere) + var(--hauteurFiltre) + var(--hauteurRetours) ) ;
/*background-color: rgb(250,180,0);*/
font-weight: bold;
font-family: Comic Sans MS , Arial, Verdana, sans-serif;
font-size : 28px;
color: black;
overflow:auto;
margin:0;
padding:0;
/*background: url(../images-fonds/fondContenu.jpg) fixed; */
background-repeat:no-repeat;
background-position:center center;
background-color: #FBF2EF;
text-align:center;
-webkit-background-size: cover; /* pour anciens Chrome et Safari */
background-size: cover; /* version standardisée */
/*text-shadow: black 0.1em 0.1em 0.2em;
*/
/*text-shadow: 0 0 0.2em #000, 0 0 0.2em #000, 0 0 0.2em #000, 0 0 0.2em #000, 0 0 0.2em #000, 0 0 0.2em #000, 0 0 0.2em #000;*/

}
#contenuDroit span{/*style applicable aux éléments ayant cette id*/
	/* Aligne le texte verticalement au milieu */
	vertical-align:middle;
	display: table-cell;
}
/*contenu en bas sur toute la largeur*/
#contenu {/*style applicable aux éléments ayant cette id*/
position:absolute;
width: calc(100% - 80px);/* calc(var(--largeurBanniere) + var(--largeurOreilleGauche) + var(--largeurOreilleDroite) - 15px); 950px;*/
height: calc(100% - var(--hauteurBanniere) - var(--hauteurFiltre) - var(--hauteurRetours) - var(--hauteurPiedPage)  - 50px);
left: 0px; /*350px ;*/
top: calc( var(--hauteurBanniere) + var(--hauteurFiltre) + var(--hauteurRetours) ) ;
/*background-color: rgb(250,180,0);*/
font-weight: bold;
font-family: Comic Sans MS , Arial, Verdana, sans-serif;
font-size : 28px;
color: black;
overflow:auto;
margin:0;
padding:40;
/*background: url(../images-fonds/fondContenu.jpg) fixed; */
background-repeat:no-repeat;
background-position:center center;
background-color: #FBF2EF;
text-align:center;
-webkit-background-size: cover; /* pour anciens Chrome et Safari */
background-size: cover; /* version standardisée */
/*text-shadow: black 0.1em 0.1em 0.2em;
*/
/*text-shadow: 0 0 0.2em #000, 0 0 0.2em #000, 0 0 0.2em #000, 0 0 0.2em #000, 0 0 0.2em #000, 0 0 0.2em #000, 0 0 0.2em #000;*/

}

#ecranSite{/*style applicable aux éléments ayant cette id*/
position:absolute;
width : 100%; /*1650px;*/
height:100%;
/*left: calc((100% - 1650px) / 2 ) ;*/
top: 0px;
min-width: 500px;
}

#encartDroit{/*style applicable aux éléments ayant cette id*/
position:absolute;/*absolute : position par rapport à la div ; fixed : par rapport à la fenetre*/
display: table;
width:300px;
height:calc(100% / 2);
/*display: table;*/
left: 1350px ;
top: calc( var(--hauteurBanniere) + var(--hauteurFiltre) ) ;
background-color: orange;
font-family:Comic Sans MS;
font-weight: bold;
font-size : 24px;
text-align: center;
overflow:auto;
}
#encartDroit span {
/* Aligne le texte verticalement au milieu */
vertical-align:middle;
display: table-cell;
}
#encartGauche{
position:absolute;/*absolute : position par rapport à la div ; fixed : par rapport à la fenetre*/

width: var(--largeurEncartGauche) ; /*300px;*/
height:calc(100% - var(--hauteurBanniere) - var(--hauteurFiltre) - var(--hauteurPiedPage) - var(--hauteurRetours));
/*display: table;*/
left: 0 ;
top: calc( var(--hauteurBanniere) + var(--hauteurFiltre) + var(--hauteurRetours) ) ;
background-color: orange;
font-family:Comic Sans MS;
font-weight: bold;
font-size : 24px;
text-align: center;
overflow:auto;

}


/*filtre en haut noir*/
#filtreHoriz {/*style applicable aux éléments ayant cette id*/
position:absolute;
width:100%; /*950px;*/
min-width: var(--largeurEncartGauche);
height:var(--hauteurFiltre);
left: 0px; /*350px ;*/
top: var(--hauteurBanniere);
background-color: red;
/*link {color: black;};*/
font-family:Comic Sans MS;
font-weight: bold;
font-size : 18px;
text-align: center;
z-index: 10;
}
/*filtre en haut noir*/
#filtreVertic {/*style applicable aux éléments ayant cette id*/
position:absolute;
width:100%; /*950px;*/
min-width: var(--largeurEncartGauche);
height:var(--hauteurFiltre);
left: 0; /*350px ;*/
top: var(--hauteurBanniere);
background-color: black;
/*link {color: black;};*/
font-family:Comic Sans MS;
font-weight: bold;
font-size : 18px;
text-align: center;
z-index: 1;
}
@media all and (max-width: 1200px)
{

	#filtreHoriz {
		display: none;
	}
	#banniere {
		display: none;
	}
	#contenuDroit {
		display: none;
	}
	#encartGauche {
		width: 100%;
		min-width: var(--largeurEncartGauche);
	}
}

/*filtre en haut noir*/
#filtreSansRetours {/*style applicable aux éléments ayant cette id*/
position:absolute;
width:100%; /*950px;*/
height: calc( var(--hauteurFiltre) + var(--hauteurRetours) );
left: 0; /*350px ;*/
top: var(--hauteurBanniere);
background-color: black;
/*link {color: black;};*/
font-family:Comic Sans MS;
font-weight: bold;
font-size : 18px;
text-align: center;
}

html, footer {
width:100%;
height : 100%;
margin:0px;
padding:0px;
background-color: yellow;
background-image: linear-gradient(blue, green);
overflow-x:auto;
}

#oreilleDroite {/*style applicable aux éléments ayant cette id*/
position:absolute;
display: table;
width:  100%;
/*min-width: 500px;*/
height:var(--hauteurBanniere);
left: 0px ; /*350px ;*/
top: 0px;

font-family:var(--policeGlobale);
font-size:var(--taillePoliceOreilleDroite);

text-align: right;
overflow:auto;
z-index: 20;
/*font-weight: bold;*/
}
#oreilleDroite span{/*style applicable aux éléments ayant cette id*/
	/* Aligne le texte verticalement au milieu */
	vertical-align:middle;
	display: table-cell;
}



#oreilleGauche {/*style applicable aux éléments ayant cette id*/
position:absolute;
display: table;
width:  var(--largeurOreilleGauche); /*calc( 100% -   var(--largeurBanniere) ); *//*min( calc( 100% - var(largeurBanniere) , 200px ) ;*/
/*min-width: 500px;*/
height:var(--hauteurBanniere);
left: 0px ; /*350px ;*/
top: 0px;

font-family:var(--policeGlobale);
font-size:var(--taillePoliceOreilleDroite);
/*font-weight: bold;*/
z-index: 10;
}

#oreilleGauche span{/*style applicable aux éléments ayant cette id*/
	/* Aligne le texte verticalement au milieu */
	vertical-align:middle;
	display: table-cell;
}

@media all and (max-width: 880px)
{

	#oreilleDroite {
		display: none;
	}
	


}

/*footer en bas de page*/
#piedPage {/*style applicable aux éléments ayant cette id*/
position:absolute;

width: 100% ; /*950px;*/
height: var( --hauteurPiedPage) ;
left: 0px ;
top: calc(100% - var(--hauteurPiedPage));




background-color: black;
link {color: black;};
font-family:Comic Sans MS;
font-weight: bold;
font-size : 18px;
text-align: center;
}


/*retour à l accueil ou à la page préc en haut noir*/
#retours {/*style applicable aux éléments ayant cette id*/
position:absolute;
width:100%;
min-width: var(--largeurEncartGauche);
height: var(--hauteurRetours) ;
left: 0px ;
top: calc( var(--hauteurBanniere) + var(--hauteurFiltre) );
background-color: blue;
/*link {color: black;};*/
font-family:Comic Sans MS;
font-weight: bold;
font-size : 18px;
text-align: center;
}



/*
@media screen and (max-width: 1650px) {
	#ecranSite {
    left:0px ;
  }
}
*/
.select{
	height:30px;
	font-family:var(--policeGlobale);/*Comic Sans MS;*/
	font-weight: bold;
	font-size : var(--taillePoliceGlobale);
	text-align: center;
	color: yellow;
	background-color: black;
}



.imgArticle{/*style applicable à tous les éléments d une même classe*/
    display: block;
    margin-left: auto;
    margin-right: auto ;

} 
.filmArticle{/*style applicable à tous les éléments d une même classe*/
    display: block;
    margin-left: auto;
    margin-right: auto ;
	/*width:900px;
	height:600px;*/
} 
.jaune{/*style applicable à tous les éléments d une même classe*/
color: yellow;
text-decoration:none; /* pour ne pas souligner les liens  */
} 
.noir{/*style applicable à tous les éléments d une même classe*/
color: black;
text-decoration:none; /* pour ne pas souligner les liens  */
} 
.rouge{/*style applicable à tous les éléments d une même classe*/
color: red;
text-decoration:none; /* pour ne pas souligner les liens  */
} 
.orangeClair{/*style applicable à tous les éléments d une même classe*/
color: red;
background-color: rgb(255, 255, 128);
text-decoration:none; /* pour ne pas souligner les liens  */
} 
.blanc{/*style applicable à tous les éléments d une même classe*/
background-color:  white;
text-decoration:none; /* pour ne pas souligner les liens  */
} 
.bouton{/*style applicable à tous les éléments d une même classe*/
height: 40px;
font-size : 24px;
text-align: center;
text-decoration:none; /* pour ne pas souligner les liens  */
} 
.boutonRouge{/*style applicable à tous les éléments d une même classe*/
height: 60px;
font-size : 24px;
text-align: center;
background-color: rgb(255,0,0);
} 

/*choix en haut orange*/
.choixOrange {/*style applicable à tous les éléments d une même classe*/
position:fixed;
width:940px;
height:80px;
left: calc((100% - 950px) / 2 ) ;
top: 209px;
background-color: rgb(255,165,0);
link {color: black;};
font-family:Comic Sans MS;
font-weight: bold;
font-size : 24px;
text-align: center;
}
/*choix en haut vert*/
.choixVert {/*style applicable à tous les éléments d une même classe*/
position:fixed;
width:940px;
height:40px;
left: calc((100% - 950px) / 2 ) ;
top: 289px;
background-color: rgb(0,250,0);
link {color: black;};
font-family:Comic Sans MS;
font-weight: bold;
font-size : 24px;
text-align: center;
}

/*vignette*/
.vignette {/*style applicable à tous les éléments d une même classe*/
border: 4px solid white;
}

#gauche {
position:fixed;
width:300px;
height:calc(100% - 210px);
overflow:scroll;
left: calc((100% - 950px) / 2 ) ;
top: 209px;
background-color: orange;

}



/*contenu en bas à droite
#contenu {
position:fixed;
width:640px;
height:100%;
left: calc(100% / 4 + 300px) ;
top: 209px;
background-color: white;
}
*/


.imageListe {/*style applicable à tous les éléments d une même classe*/
box-shadow: 0 0 0.2em #FFF, 0 0 0.2em #FFF, 0 0 0.2em #FFF, 0 0 0.2em #FFF, 0 0 0.2em #FFF, 0 0 0.2em #FFF;
}
/*article en bas sur toute la largeur*/
#article {
position:absolute;
width:930px;
height:calc(100% - 353px);
left: 350px ;
top: 323px;
background-color: rgb(255,220,160);
overflow:auto;
margin:0px;
padding:10px;
font-weight: bold;
font-family: Comic Sans MS , Arial, Verdana, sans-serif;
font-size : 28px;
color: blue;
}
#articleZOLD {/*style applicable aux éléments ayant cette id*/
position:absolute;
width:930px;
height:calc(100% - 293px);
left: 350px ;
top: 323px;
margin:0px;
padding:10px;
background-color: rgb(255,220,160);
font-weight: bold;
font-family: Comic Sans MS , Arial, Verdana, sans-serif;
font-size : 28px;
color: blue;
overflow:auto;
}

#contenuFiltre {/*style applicable aux éléments ayant cette id*/
position:absolute;
width:950px;
height:calc(100% - 333px);
left: 350px ;
top: 323px;
/*background-color: rgb(250,180,0);*/
font-weight: bold;
font-family: Comic Sans MS , Arial, Verdana, sans-serif;
font-size : 28px;
color: black;
text-decoration:none; /* pour ne pas souligner les liens  */
overflow-y:scroll;
overflow-x:hidden;
margin:0;
padding:0;
/*background-color: rgb(255,220,160);*/
background: url(../../zoneZDONNEES/images-fonds/fondFiltre.jpg) fixed; 
background-repeat:no-repeat;
background-position:center center;
text-align:center;
-webkit-background-size: cover; /* pour anciens Chrome et Safari */
background-size: cover; /* version standardisée */
}


.articleParagr {/*style applicable à tous les éléments d une même classe*/
font-weight: bold;
font-family: Comic Sans MS , Arial, Verdana, sans-serif;
font-size : 28px;
color: blue;
}
.articleTitre {/*style applicable à tous les éléments d une même classe*/
font-weight: bold;
font-family: Comic Sans MS , Arial, Verdana, sans-serif;
font-size : 32px;
color: blue;

text-align: center;

}

/*contenu en bas sur toute la largeur, sans filtre ni choix*/
#contenuHaut {/*style applicable aux éléments ayant cette id*/
position:absolute;
width:950px;
height:calc(100% - 209px);
left: 350px ;
top: 209px;
background-color: rgb(250,180,0);
font-weight: bold;
font-family: Comic Sans MS , Arial, Verdana, sans-serif;
font-size : 28px;

}

/*contenu en bas sur toute la largeur, sans filtre ni choix*/
#contenuHautEnvoiDoc {/*style applicable aux éléments ayant cette id*/
position:absolute;
width:950px;
height:calc(100% - 209px);
left: 350px ;
top: 209px;
background-color: rgb(250,180,0);
font-weight: bold;
font-family: Comic Sans MS , Arial, Verdana, sans-serif;
font-size : 28px;
overflow-y:scroll;
overflow-x:hidden;
}





#content {/*style applicable aux éléments ayant cette id*/
margin: auto;
background-color: #ccc;
padding:20px 5px;
position:fixed;
width: 620px;/*calc(100% / 4 + 310);600px;//uniquement en px //calc permet un dimensionnement relatif à la taille de l'écran*/
height:100%;
top:209px;
left: calc((100% - 950px) / 2 + 300px) ;
text-align: center;
/*border:1px solid blue;*/

}

#message{/*style applicable aux éléments ayant cette id*/
text-align: center;
font-weight: bold;
font-family: Comic Sans MS , Arial, Verdana, sans-serif;
font-size : 22px;
 border-width:4px;
 border-style:dotted;
 border-color:black;
left: calc((100% - 950px) / 2 + 300px) ;
background-color: rgb(201, 200, 0);
}

.texte{/*style applicable à tous les éléments d une même classe*/
text-align: center;
font-weight: bold;
font-family: Comic Sans MS , Arial, Verdana, sans-serif;
font-size : 22px;
 border-width:4px;
 border-style:dotted;
 border-color:black;
width:  600px ;
height: 200px ;
background-color: rgb(201, 200, 0);
}

.texteSimple{/*style applicable à tous les éléments d une même classe*/
text-align: center;
font-weight: bold;
font-family: Comic Sans MS , Arial, Verdana, sans-serif;
font-size : 22px;

}

#resultat{/*style applicable aux éléments ayant cette id*/

width: 930px;

height: 350px;

border: 1px solid black; 

padding: 5px;

overflow: auto; 
font-weight: bold;
font-family: Comic Sans MS , Arial, Consolas, sans-serif;
font-size : 18px;

background-color: #ffffff;

}