@media creeen and (max-width: 640px) {
    body { /* passer body (et tous les éléments de largeur fixe) en largeur automatique */
        width: auto;
        margin: 0;
        padding: 0;
        hyphens: auto;  /* gérer les traits d'union lors des sauts de ligne  */
        word-wrap: break-word; /* gestion des mots longs : passage à la ligne forcé */
    }  
    img,table,td,textarea,blockquote,input,iframe,object,embed,video {  /* fixer une largeur maximale de 100% aux éléments potentiellement problématiques */
        max-width: 100%;
    }
    img { /* conserver le ratio des images */
        height: auto;
    }
    .suppr { 
	display:none; 
	}
	.smartphone {     /* masquer les éléments superflus */
        display: none !important;
    }
}
frameset {	/* positionnement des frames dans le cadre de body */
	padding: 0pt; border: 0pt; margin: 0pt;
	}
frame {	/* positionnement des frames dans le cadre de body */
	padding: 0pt; border: 0pt;  margin: 0pt;
	}
body.bandeau { 	/* corps du document, padding, bordure et marge */
	background-color: #ffffc0; color:#ffff00;
	padding:0pt;
	border-style:none;
	margin:0pt 3pt 0pt 3pt; 
	}
/* MENUS et SOUS-MENUS */
p.noir,b.noir  { /* fond en noir, police de caracteres, padding, bordure et marge */
	background-color:#000000; color:#ffff00;
	font-size:14pt;
	font-family:'Comic Sans MS', Arial, Helvetica, sans-serif; 
	text-align: center;
	vertical-align: text-top;
	padding:0pt;
	border-style:none;
	margin:3pt 0pt 0pt 0pt; /* haut du menu visible-gauche du menu visible-bas du menu visible-droite du menu visible */
	}
div.liste  { /* format du menu déroulant 0081FA */
	visibility:hidden;
	background-color:#0081FA; 
	font-family:'Comic Sans MS', Arial, Helvetica, sans-serif; 
	vertical-align: text-top;
	line-height:1.2em;/* hauteur de ligne réduit à 3/4 */
	padding:0pt;
	border-style:none;
	margin:7pt 5pt 0pt 0pt; /* POSITION du menu : haut du menu visible-gauche du menu visible-bas du menu visible-droite du menu visible */
 	}
a.lien:link {	/* Menu déroulant - lien pas encore visité - couleur jaune */
	background-color:#0081FA; color:#ffffff; font-size:13pt; font-family:Arial;  text-decoration:none; margin:4pt;
	}
a.lien:visited {   /* Menu déroulant - lien  a déja été visité */
	background-color:#0081FA; color:#ffff00; font-size:13pt; font-family:Arial;  text-decoration:none; margin:4pt;
	}
a.lien:hover {  /* Menu déroulant - lien survolé */
	background-color:#0081FA; color:#00ff00; font-size:13pt; font-family:Arial;  text-decoration:underline; margin:4pt;
	}
a.lien:active {  /* Menu déroulant - lien sélectionné par clic */
	background-color:#0081FA; color:#00ff00;  font-size:13pt; font-family:Arial;  text-decoration:none; margin:4pt;
	}
#obj2 {position:absolute; left:85px; top:0px; height:30px; width:120px; } /* height:30px; = hauteur du cadre noir */
#obj3 {position:absolute; left:85px; top:21px; height:71px}
#obj4 {position:absolute; left:240px; top:0px; height:30px; width:130px; }
#obj5 {position:absolute; left:240px; top:21px; height:71px}
#obj6 {position:absolute; left:405px; top:0px; height:30px; width:120px; }
#obj7 {position:absolute; left:405px; top:21px; height:71px}
#obj8 {position:absolute; left:560px; top:0px; height:30px; width:120px; }
#obj9 {position:absolute; left:560px; top:21px; height:71px}
#obj10 {position:absolute; left:715px; top:0px; height:30px; width:150px; }
#obj11 {position:absolute; left:715px; top:21px; height:71px}
#obj12 {position:absolute; left:900px; top:0px; height:30px; width:150px; }
#obj13 {position:absolute; left:900px; top:21px; height:71px}
/* AFFICHAGE DU BANDEAU */
table.bandeau {	/* fond en bleu */
	visibility:visible;
	background-color:#0039d6; color:#ffff00;
	table-layout:fixed;
	width:98%;
	padding:0pt;
	border-style:none;
	margin:10pt 0pt 0pt 0pt; /* haut du bleu-gauche du bleu-bas du bleu-droite du bleu */
	}
td.bandeau25 {		/* marges a gauche et a droite de la page */
	width: 25%;
	}
p.bandeau { 	/* titre gras jaune grande taille */
	font-size:12pt;
	background-color:#0039d6;  color:#ffff00; 
	padding:0pt; border-style:none;  margin:0pt;
	}
h1.bandeau, div.bandeau, tbody.bandeau, tr.bandeau, td.bandeau, td.bandeau25 { 	/* fond en bleu, titre gras jaune */
	background-color:#0039d6; color:#ffff00; 
	font-family:'Comic Sans MS', Arial, Helvetica, sans-serif;
	font-weight:bold;
	font-size:20pt; 
	padding:0pt; border-style:none;
	margin:22pt 0pt 18pt 0pt; /* haut du bleu-gauche du bleu-bas du bleu-droite du bleu */
	}
/* CORPS DU DOCUMENT */
body {	/* corps du document,police de caracteres, padding, bordure et marge */
	background: #ffffc0; color: #000000;
	font-family: 'Comic Sans MS', Arial, Helvetica, sans-serif; 
	padding:0pt;  border-style:none; margin:10pt 10pt 6pt 10pt;
	}
body,p,ul,li,dl,dd,blockquote,table,tr,td,th 
	{	/* texte normal en noir */
	font-size: 12pt; font-weight: normal;
	}
p,div,h1,h2,h3,h4,h5,h6,b,i,span.h1,span.h2,span.h3,span.h4,span.h5,span.h6
	{ /* padding, bordure et marge */
	padding:0pt;  border-style:none; margin:4pt 0pt 0pt 0pt;
	}
p,div,h1,h2,h3,h4,h5,h6,b,i,span.h1,span.h2,span.h3,span.h4,span.h5,span.h6,table,tr,th,td,ul,dl,dd,dt,blockquote
	{ /* mise en forme du texte : alignement vertical  */
	vertical-align: top;
	}
li	{ /* mise en forme du texte : alignement vertical  */
	vertical-align: middle;
	}
ul,li,dl,dd,dt,blockquote 
	{ /* marge à gauche - décalage du texte */
	padding: 0pt;  border-style: none; margin: 4pt 0pt 0pt 10pt;
	}
h1,span.h1 {		/* titre gras bleu grande taille en paragraphe ou dans le corps de texte */
	background-color: #ffffc0; color: #0000FF; font-size: 18pt; font-weight: bold; 
	}
h2,span.h2 {		/* titre gras bleu moyenne taille en paragraphe ou dans le corps de texte + marge au-dessus et à gauche */
	background-color: #ffffc0; color: #0000FF; font-size: 16pt; font-weight: bold; 
	}
h3,span.h3 {		/* texte gras bleu taille normale en paragraphe ou dans le corps de texte */
	background-color: #ffffc0; color: #0000FF; font-size: 12pt; font-weight: bold; 
	}
h4,span.h4 { 		/* texte gras noir taille normale en paragraphe ou dans le corps de texte */
	font-size: 12pt; font-weight: bold; 
	}
h5,span.h5 {		/* texte gras noir plus petit en paragraphe ou dans le corps de texte */
	font-size: 12pt; font-weight: bold; 
	}
h6,span.h6 {		/* texte noir normal plus petit en paragraphe ou dans le corps de texte */
	font-size: 12pt; font-weight: normal;  
	}
table,tr,th,td 	
	{ /*  bordure et marge */
	padding: 0pt;  border-style: none; margin: 0pt;
	}
.height120 {height: 120pt;}
.height40 {height: 40pt;}
.height70 {height: 70pt;} 
table.bordure,th.bordure,td.bordure,p.bordure
	{ /* couleur du fond et police de caracteres */
	background: #ffffc0; color: #000000;
	font-family: 'Comic Sans MS', Arial, Helvetica, sans-serif;
	font-size: 12pt;
	}
table.bordure,tr.bordure,th.bordure,td.bordure { /* centrage du contenu des cellules */
	text-align: center;
	vertical-align: middle;
	}
table.bordure {	/* bordure bleu autour d'un tableau de valeurs */
    border-collapse: collapse;  /* bordures fusionnees */ 
	padding: 1pt;
	border: 1pt solid #0000FF; margin: 4pt;
	}
tr.bordure {	/* bordure bleu autour des cellules d'un tableau de valeurs */
	padding: 1pt; 
	border: 1pt solid #0000FF; margin: 0pt; font-weight: bold;
	}
th.bordure {	/* bordure autour des cellules d'un tableau de valeurs */
	padding: 1pt; 
	border: 1pt solid #0000FF; margin: 0pt; font-weight: bold;
	}
td.bordure {	/* bordure autour des cellules d'un tableau de valeurs */
	padding: 1pt; 
	border: 1pt solid #0000FF; margin: 0pt; font-weight: normal;
	}
p.bordure {		/* paragraphe avec texte gras bleu et bordure bleu */
	font-size: 12pt; background: #ffffc0; color: #0000ff; font-weight: bold;
	padding: 4pt; border: medium solid blue; margin: 4pt; 
	}
p.bordrouge {		/* paragraphe avec texte gras rouge et bordure rouge */
	font-size: 12pt; background: #ffffc0; color: #ff0000; font-weight: bold;
	padding: 4pt; border: medium solid red; margin: 4pt; 
	}
.marge {		/* marges a gauche et a droite de la page */
	width: 10%;
	}
.marge2 {		/* marges a gauche et a droite de la page */
	width: 3%;
	}
a:link {	/* lien pas encore visite - couleur bleu */
	background: #ffffc0; color: #0000ff;  
	text-decoration: none;
	}
a:visited { /* lien deja visite - couleur marron */
	background:#ffffc0; color: #663300;  
	text-decoration: none;
	}
a:hover {  /* lien survole - couleur vert */
	background:#ffffc0; color: #00ff00;  
	text-decoration: underline;
	}
a:active {  /* lien selectionne - couleur vert  */
	background:#ffffc0; color: #00ff00;  
	text-decoration: underline;
	}
img {   	/* image normale (sans bordure, marges et padding) */
	padding: 0pt; border-style: none; margin: 0pt;
	}
img.top {   	/* image normale alignée haut (sans bordure, marges et padding) */
	padding: 0pt; border-style: none; margin: 0pt;
    vertical-align:top;
    }
img.left {	/* image integree a gauche dans le texte (avec marges)*/
	padding: 0pt;
	border-style: none;
	margin-left: 0pt;
	margin-right: 6pt;
	float: left;
	}
img.right {	/* image integree a droite dans le texte (avec marges)*/
	padding: 0pt;
	border-style: none;
	margin-left: 6pt;
	margin-right: 0pt;
	float: right;
	}
.left {	/* a gauche dans le texte (avec marges)*/
	text-align: left;
	padding:0pt;
	border-style:none;
	margin:0pt 6pt 0pt 0pt;
	float:left;
	}
.right {	/* a droite dans le texte (avec marges)*/
	text-align: right;
	padding:0pt;
	border-style:none;
	margin:0pt 0pt 0pt 6pt;
	float:right;
	}
.center {	/* centre dans le texte (avec marges)*/
	padding:0pt;
	border-style:none;
	margin-left:0pt;
	margin-right:0pt;
	float:none;
	text-align: center;
	}