html {font-size: 100%;}

body {
/*	background: #f9f9f9; */
/*  Essai pour voir effet sur cpm :*/
	background: #2C2F22 ;


	margin: 0px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
/*	font-size:smaller;  */
	font-size:0.8em;
	line-height: 1.4;
	color:#333;
}

a {
	color:#445;
}

a:hover, a:focus {
	text-decoration: none;
	color: #222;
}
a img {border: none;}

/* Listes */
ul, ol {
	margin: .75em 0 .75em 24px;
	padding: 0;
}

li {
	margin: 0;
	padding: 0;
}

h1 {
    text-shadow: 1px 1px 1px #aaa;
    }

/* globalssskycrap : pour le responsive sans skycraper en haut de sidebar, globalsssideb : pour page sans sidebar*/
#global, #globalssskycrap, #globalsssideb {
	background: #ffffff url(images/Carreaux2.jpg);

	padding: 0px 0px 0px 0px;
	-webkit-border-bottom-right-radius: 4px;
	-webkit-border-bottom-left-radius: 4px;
	-moz-border-radius-bottomright: 4px;
	-moz-border-radius-bottomleft: 4px;
	border-bottom-right-radius: 4px;
	border-bottom-left-radius: 4px;
	-webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), 0 0 1em rgba(0, 0, 0, .35); /* 20 */
	-moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), 0 0 1em rgba(0, 0, 0, .35); /* 20 */
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), 0 0 1em rgba(0, 0, 0, .35); /* 20 */
}

/* --- POSITIONNEMENT --- */
/* Page */

#global, #globalssskycrap, #globalsssideb {
	width: 1010px;
	margin: 0 auto;
	margin-bottom: 15px;
	height : 100%;	
	overflow: hidden;
}

/* Contenu principal */

#principal {
	margin-left: 210px; 
	padding: 10px 10px 10px 9px;
	text-align:justify;
}
#principal > :first-child {
	margin-top: 10px;	
}
#principal li {
	line-height: 1.5;
}

/* menu du cote */

#sidebar {
	margin: 8px;
	width: 200px;
	float: left;
	line-height: 150%;
	font-size: .9em;
}

#sidebar ul {
	margin: 0;
}

#sidebar ul li {
	background: #109010;
	background-image:linear-gradient(#0A5C0A, #109010);
	background-image:-webkit-linear-gradient(#0A5C0A, #109010);
	border-top-left-radius: 8px;
	border-top-right-radius: 8px;
	border-bottom-left-radius: 8px;
	border-bottom-right-radius: 8px; 
	list-style-type: none;
	margin: 0 0 20px 0;
}

#sidebar ul li h4 {
	background: #010C73;
	background-image:linear-gradient(#02119E, #010740);
	background-image:-webkit-linear-gradient(#02119E, #010740);
	border-top-left-radius: 8px;
	border-top-right-radius: 8px;
	height: 33px;
	color: #ffffff;
	font-size: 1.1em;
	font-weight:bold;	
	text-align:center;
	line-height: 33px;
	padding: 0 10px;
	margin: 0;
}

#sidebar ul li ul {
	margin: 0;
	padding: 12px;
	color: #ffffff;;
}

#sidebar a {
	color: #f9F9F9;
	text-decoration: none;
}

#sidebar a:hover {color: #900000;}

input {
	margin: 2px;
	padding: 2px;
	font-size: 1.0em;
	vertical-align: top;
	background: #f5f5f5;
	color: #000;
	border: solid 1px #555;
	border-radius:2px;
	}
input:hover{ 
	background: #ddd;
	}
		
input[type="submit"]{
	padding: 3px 15px;	
}

/* Colonnes doubles - simples */

#conteneur
{width:100%;}
#colonne1
{
	width:59%;
	float:left;
	padding-right:2%;
}
#colonne2
{
	width:39%;
	float:right;
}
#bas
{clear:right;}

/* Pour plan de fiche en haut de page */
#plan {
border-style:solid;
border-width: 1px;
border-color:#900;
border-radius: 4px;
background-color:#fafafa;
padding: 1em 2em;
}

/* Pour liens vers autres fiches en de page */
#liens-bas-de-page{
padding-left:1em;
line-height: 1.6;
font-size:1.05em;
}

/* Flexbox pour colonnes en responsive */
.flexbox,
.flexbox > div {
display: -ms-flex;
display: -webkit-flex;
display: flex;
}
.flexbox > div {
  width: auto;
  padding: 0px;
  margin: 0px;
}

.ColonneG {
	text-align: left;
	float: left;
	width: 65%;
}
.ColonneD {
	text-align: left;
	float: right;
	width: auto;
}
.group:after {
    content:"";
    display: table;
}

img {
    max-width: 100%;
    height: auto;
}


/* bas de page */

#footer {
    margin-left: auto;
    margin-right: auto; /* permet de centrer le bloc */
    padding: 0.5em;
}

#audio {
width:40%; margin:auto;
}

#audio2 {
width:35%;
}

/* Mise en page */

.titre {
	font-weight: bold;
	color: #104070;
	font-size: 130%;
	text-shadow: 1px 1px 1px #999;
}
.titre1 {
	font-size: 115%;
	font-weight: bold;
	color: #006000;
	text-decoration: underline;
}

.titre2 {
	font-weight: bold;
	color: #990000;
}

.fond-texte {
  display: inline-block; /*   pour que la largeur s'ajuste au texte */
  border-style:double;
  border-Width: 3pt;
  border-color:#daa0a0;
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  border-radius: 6px;
  margin-left: auto;
  margin-right: auto; /* permet de centrer le bloc */
  padding: 30px;
  background-color: rgba(255, 255, 255, 0.7);
  box-shadow: 1px 2px 6px #333;
  -webkit-shadow: 1px 2px 6px #333;
}

/* bas de la page */
#basdepage {
	background: #f9f9f9;
	text-align: center;
	padding-top: 4px;
	padding-bottom: 21px;
	width: 1010px;
	margin: 0 auto;
	overflow: hidden;
	-webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), 0 0 1em rgba(0, 0, 0, .35); /* 20 */
	-moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), 0 0 1em rgba(0, 0, 0, .35); /* 20 */
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), 0 0 1em rgba(0, 0, 0, .35); /* 20 */
	-webkit-border-top-left-radius: 4px;
	-webkit-border-top-right-radius: 4px;
	-moz-border-radius-topleft: 4px;
	-moz-border-radius-topright: 4px;
	border-top-left-radius: 4px;
	border-top-right-radius: 4px;
	clear:both;
	}

#basdepage a {color: #333;}

/* pour pub de la sidebar */
.pub-sidebar { width: 300px; height: 250px; }
@media(min-width: 700px) { .pub-sidebar { width: 160px; height: 600px; } }



/* responsive design - réglé pour que ne s'applique qu'au mobile (pas au tablette (768px) et ordinateurs de bureau)*/
@media screen and (max-device-width: 700px) {
     
body {
	font-size:0.9em;
    }

#global, #globalssskycrap, #globalsssideb {
	width: 100%;
	position: relative;
}

#global {padding-bottom: 107em;} /* hauteur à régler en fonction de sidebar*/
#globalssskycrap {padding-bottom: 84em;} /* pour sidebar ss skycraper*/
#globalsssideb {padding-bottom: 1em;} /* pour page sans sidebar*/

#basdepage {width: 100%;}

#principal {
   width: 95%;
   margin-left: 0px; 
   margin-bottom: 22em;
   float: none;
   position: relative;
   text-align:left;
   line-height: 1.6;
}

#sidebar {
	font-size: 1em;
	width: 100%;
	float: none;
	position: absolute;
	margin: auto;
	bottom: 28em; /*A modifier pour placement pub du bas de page*/
}

#sidebar ul {
	margin-right: 10px;
	margin-left: 10px;
}

#sidebar ul li ul {
	text-align:center;
}

/* Flexbox pour colonnes en responsive - retour a la ligne possible*/
.flexbox,
.flexbox > div {
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}

.ColonneG, .ColonneD, #colonne1, #colonne2 {
	float: none;
	width: auto;
}

#footer {
     width: 95%;
     float: none;
     position: absolute; bottom:0em;
     }

#audio {
width:80%; margin:auto;
}

#audio2 {
width:80%; margin:auto;
}

.pub-horizontale {
     position: relative; left:-10px; /* annule margin de la page -> pub prend toute largeur */
}

h1 {
    margin-top: 0px;
    margin-bottom: 0px;
    padding-top: 8px;
    padding-bottom: 5px;
    }

h2, h3 {
    margin-top: 0px;
    margin-bottom: 0px;
    padding-top: 4px;
    padding-bottom: 4px;
    }

.fond-texte {
    padding: 10px; /* moins de padding pour les textes sur mobiles */
}

/* video responsive youtube (cf deroulement)*/
.video {
position: relative;
padding-bottom: 67.5%; /* 16:9 */
padding-top: 25px;
height: 0;
}
.video iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
} /* fermeture media screen */