@CHARSET "UTF-8";

/***********************************
  gestion de la disposition du site 
 ***********************************/

*{
	/* purger les valeurs de marges qui pourraient subsister */
	margin:0;
	padding:0;
}


/**** gestion des écrans ****/

/* NB : bandeau chargé par le programme PHP, en fonction de l'écran */

/* téléphones (par défaut) */
[class*="col-"] {
	width: 90%;
}
h1 {
	background-color: LightGrey;
	font: bold 1.5em verdana, arial;
}
/* tablettes */
@media only screen and (min-width: 600px) {
	body {
		width: 600px;
		
		/*** centrage ***/
		position: absolute;
		left: 50% ;			/* on va à la moité de l'écran ... */
		margin-left: -300px;	/* ... puis on revient de la moitié des 600 px */
	}
	/* on tient compte d'un padding de 1% */
	.col-resumes {width: 23%;}
    .col-choix {width: 73%;}
    .col-texte {width: 73%;}
    .col-tdm {width: 23%%;}
    h1 {
    	margin-top: -22px;
		background-color: White;
		font: bold 1.9em verdana, arial;
    }
    .col-texte h1 {
    	margin-top: 0px;
    	margin-bottom: 10px;
		background-color: Grey;
		font: bold 1.5em verdana, arial;
	}
}
/* ordinateurs */
@media only screen and (min-width: 800px) {
	body {
		width: 800px;
		
		/*** centrage ***/
		position: absolute;
		left: 50% ;			/* on va à la moité de l'écran ... */
		margin-left: -400px;	/* ... puis on revient de la moitié des 800 px */
	}
	/* on tient compte d'un padding de 1% */
	.col-resumes {width: 18%;}
    .col-choix {width: 58%;}
    .col-texte {width: 58%;}
    .col-tdm {width: 18%;}
    h1 {
    	margin-top: -25px;
		background-color: White;
		font: bold 2.6em verdana, arial;
    }
    .col-texte h1 {
    	margin-top: 0px;
    	margin-bottom: 10px;
		background-color: LightGrey;
		font: bold 1.5em verdana, arial;
	}
} 

.pied-de-page {
	/* supprimer le float des colonnes */
	clear: both;
	width: 98%;
	text-align: center;
	background-color: LightGrey;
}

/**** disposition par defaut ****/

/* les colonnes se placent côte-à-côte, de gauche à droite */
[class*="col-"] {
	float: left;
	padding: 1%;
}

.col-resumes {
	font: normal 0.9em verdana, sans-serif;
	text-align: right;
}
.col-resumes h2 {
	padding-top: 10px;
	font: italic normal 1.2em verdana, sans-serif;
	color: #7D775C;
}

ul{
    list-style-type: none;
}

.col-texte p{
    text-indent: 50px;
}

.col-choix p, .col-texte p{
	padding-bottom: 5px;
	text-align: justify;
	font: normal 1.0em verdana, sans-serif;
}
.col-texte ul{
    list-style-type: circle;
    padding-left: 15px;
}
.col-choix q, .col-texte q{
	font: normal italic 1.0em verdana, sans-serif;
}
.col-choix h2 {
	padding-top: 10px;
	padding-bottom: 10px;
	font: italic normal 1.4em verdana, sans-serif;
	color: #7D775C;
}
.col-choix a {
	margin-left: 30px;
	font: italic  1.0em verdana, sans-serif;
	color: #7D775C;
}

.col-tdm {
	text-align: left;
	font: 0.9em verdana, sans-serif;
}
.col-tdm h2 {
	padding-top: 10px;
	font: italic normal 1.2em verdana, sans-serif;
	color: #7D775C;
}
.col-tdm h3 {
	font: italic normal 1.0em verdana, sans-serif;
	color: #7D775C;
}
.col-tdm a {
	font: italic bold 0.9em verdana, sans-serif;
	color: #7D775C;
}

body {
	/* Vous avez demandé la Police ? Ne quittez pas ! */
	font: normal 0.8em verdana, sans-serif;
	color: #454545;
	
	/* faciliter la lecture par un fond uni (smartphones not.) */
	background-color: White;
}
table {
	/* Vous avez demandé la Police ? Ne quittez pas ! */
	font: normal 90% verdana, sans-serif;
	color: #454545;
	
	/* faciliter la lecture par un fond uni (smartphones not.) */
	background-color: #DFDFDF;
	margin: auto;	/* centrage du tableau */
    border-collapse: collapse;
}
td {
	padding: 2px;
}
table, th, td {
	border: 1px solid Grey;
}

/* tout est lien donc on efface le lien */
a {
	text-decoration: none;
	color: #454545;
}

h1{
	color: White;
	text-align: center;
}

h2{
	font: italic normal 1.4em verdana, arial;
	color: #454545;
	padding-top: 5px;
	padding-bottom: 5px;
}

h3{
	font: italic normal 1.2em verdana, arial;
	color: #454545;
	padding-top: 5px;
	padding-bottom: 5px;
}

p{
	padding-bottom: 5px;
}