html, body {
background-image:url('images/fondmer.jpg');
 
}

@media (max-width: 640px) {
	* {
		box-sizing: border-box;
	}
	
	/* passer body (et tous les éléments de largeur fixe) en largeur automatique */

	
	
	/* fixer une largeur maximale de 100% aux éléments potentiellement problématiques */

	img,
	table,
	td,
	blockquote,
	code,
	pre,
	textarea,
	input,
	iframe,
	object,
	embed,
	video {
		max-width: 100%;
	}
	
	/* conserver le ratio des images */

	img {
		height: auto;
	}
	
	/* gestion des mots longs */

	textarea,
	table,
	td,
	th,
	code,
	pre,
	samp {
		-webkit-hyphens: auto; /* césure propre */
		-moz-hyphens: auto;
		hyphens: auto;
		word-wrap: break-word; /* passage à la ligne forcé */
	}
	
	code,
	pre,
	samp {
		white-space: pre-wrap; /* passage à la ligne spécifique pour les éléments à châsse fixe */
	}
	
	/* Passer à une seule colonne (à appliquer aux éléments multi-colonnes) */

	.element1,
	.element2 {
		float: none;
		width: auto;
	}
	
	/* masquer/afficher les éléments  */

	.u-mobile {          display: block;          display: revert !important; /* affichage des éléments */        }        .u-no-mobile {          display: none !important; /* masquage des éléments */        }
	
	/* Un message personnalisé */

	body:before {
		content: "Version mobile du site";
		
		width: auto;
		margin: 10;
		padding: 0;
		text-align: center;
		font-style: italic;
		color: #777;
		
	}
}


#menuhaut{
float:center;
}

#menubas {

background-color:#CCFFFF;
float: left;
width: 100%;
margin-left:10;
font-size : 120%; 
font-family : comic, Verdana,  Arial, Helvetica, Geneva, sans-serif;

}

#contenu {
float: left;
width: 100%;
margin-right:20px;
margin-left:10px;
font-color:#000080;
font-size : 130%; 
width: 100%;

 
}

#intro {
<--display:inline;-->
     margin-top:10px
     margin-left:10px;    
     font-color:#000080;
     border: 2px solid #ccc;
     float: left;
     width: 100%;
font-size : 130%; 
font-family : comic, Verdana, Arial, Helvetica, Geneva, sans-serif;
color : #006633; 
}
#desc{
    
     border: 4px solid #008b8b; 
     display:inline;
     margin-top:10px
     margin-left:20px;    
     font-color:black; 
     padding-left:20px;   
     float: left;
     width: 100%;
}

#imgd {
    margin: 10px;
    float: right;
   
}

#imgg {
    margin: 10px;
    float: left;
   
}


p {
float: left;
     width: 100%;

font-size : 130%; 
font-family : Verdana, comic, Arial, Helvetica, Geneva, sans-serif; 
color : black; 
}


ul, li, td {
font-size : 120%; 
font-family :  Verdana, Arial, Helvetica, Geneva, sans-serif; 
color : blue; 
 
}

h1 {
font-size : 200%; 
font-family :  Verdana, Arial, Helvetica, Geneva, sans-serif;
color : navy; 
text-align: center;
}

h2 {
font-size : 150%; 
font-family :  Verdana, Arial, Helvetica, Geneva, sans-serif; 
color : #990000; 
padding-left:15px;
}

date {
font-size : 140%; 
font-family :  comic,Verdana,  Arial, Helvetica, Geneva, sans-serif; 
color : #990000;
text-align: right; 
padding-right:20px;
}
a:link {color: green; text-decoration:underline;}
a:visited {color: black; text-decoration:underline;}
a:hover {color:red; text-decoration:none;}

.haut {
font-size: 120%;
text-align:right;
}