html {

    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
}

body {
    margin:0;
	font-family:Calibri, Candara, Segoe, "Segoe UI", Optima, Arial, sans-serif;
	font-size:1em;
	line-height:1.4;
	color:#ffffff;
	background-color:#000000;
}

a:focus {
    outline: thin dotted;
}
a:active, a:hover {
    outline: 0;
}
a.icon_precedente_gauche {
    font-size: 2em;
    margin: 0.67em 270px 0.67em 0px;
}
@media screen and (max-width: 1200px) { /* ok , pour usage mobile */
	a.icon_precedente_gauche {
		font-size: 2em;
		margin: 0.67em 20px 0.67em 0px; /* espace entre icone 'fleche gauche' et texte du titre */
	}
}
a.icon_precedente_droit {
    font-size: 2em;
    margin: 0.67em 0px 0.67em 270px;
}
@media screen and (max-width: 1200px) { /* ok , pour usage mobile */
	a.icon_precedente_droit {
		display: none; /* n'affiche plus l'icone 'fleche' de droite */
	}
}

h1 {  font-size:200%;}
@media screen and (max-width: 1200px) { /* ok , pour usage mobile */
  h1 { font-size:170%; }
}
@media screen and (max-width: 900px) { /* ok , pour usage mobile */
  h1 {  font-size:144%; }
}

h2 {  font-size:178%;}
@media screen and (max-width: 1200px) { /* ok , pour usage mobile */
  h2 { font-size:151%; }
}
@media screen and (max-width: 900px) { /* ok , pour usage mobile */
  h2 {  font-size:128%; }
}

h3 {  font-size:156%;}
@media screen and (max-width: 1200px) { /* ok , pour usage mobile */
  h3 { font-size:133%; }
}
@media screen and (max-width: 900px) { /* ok , pour usage mobile */
  h3 { font-size:113%; }
}

h4 {  font-size:134%;}
@media screen and (max-width: 1200px) { /* ok , pour usage mobile */
  h4 { font-size:114%; }
}
@media screen and (max-width: 900px) { /* ok , pour usage mobile */
  h4 { font-size:97%; }
}

h5 {  font-size:112%;}
@media screen and (max-width: 1200px) { /* ok , pour usage mobile */
  h5 { font-size:95%; }
}
@media screen and (max-width: 900px) { /* ok , pour usage mobile */
  h5 { font-size:81%; }
}

h6 {  font-size:90%;}
@media screen and (max-width: 1200px) { /* ok , pour usage mobile */
  h6 { font-size:77%; }
}
@media screen and (max-width: 900px) { /* ok , pour usage mobile */
  h6 { font-size:65%; }
}

h1, h2, h3, h4, h5, h6 {
	font-weight:normal;
	margin:0.2em 0;
}

img {
	vertical-align: middle;
}

a { 
	color:#ffffff; 
	text-decoration:none; 
}
a:hover, a:focus { 
	text-decoration:underline; 
}

a img {	
	border:0; 
	text-decoration:none; 
}

p {
	margin: 0.5em 0;
}

div img {
	max-width: 100%; /* les images ne dépasseront pas en largeur de l'écran (pas de scroll horizontal nécessaire pour mobiles) */
	height: auto; /* garde le rapport xy de l'image */
}

.headln {
	margin: 0 auto;
	text-align: center;
}