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


a:link {color: green; text-decoration:underline;}
a:visited {color: black; text-decoration:underline;}
a:hover {color:red; text-decoration:none;}

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

	body {
		width: auto;
		margin: 0;
		padding: 0;
	}
	
	/* 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";
		display: block;
		text-align: center;
		font-style: italic;
		color: 
#777;
	}
}
#menu {
width:190px;
background-color:#CCCCCC;
float:left;
}

#menubas {
background-color:#CCCCCC;
margin-left:0;
}
#contenu {
width:1030px;
margin-left:20px;
font-size : 125%; 
font-family : Verdana, comic, Arial, Helvetica, Geneva, sans-serif; 
color : black; 
background-image:
url('images/arbre.jpg');

}

#contenu2{
width:1030px;
margin-left:50px;
margin-right:50px;
font-size : 120%; 
font-family : Verdana, comic, Arial, Helvetica, Geneva, sans-serif; 
color : black; 

#bloc {
background-color:#006666;
    margin: 0px;
    border: 2px solid #ccc;
    float: left;
    width: 100%;
}
#img {
    margin: 10px;
    border: 4px solid #660066;
    float: left;
   
}

#desc{
     display:inline;
     margin-top:10px
     margin-left:10px;    
     font-color:#000080;

}



p {
font-size : 125%; 
font-family : Verdana, comic, Arial, Helvetica, Geneva, sans-serif; 
color : black; 
margin-left:0;
}

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

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

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

h4 {
font-size : 130%; 
font-family :  Verdana, Arial, Helvetica, Geneva, sans-serif; 
color :#9900ff; 
padding-left:15px;
}

h5 {
font-size : 100%; 
font-family :  Verdana, Arial, Helvetica, Geneva, sans-serif; 
color :#000066; 
padding-left:15px;
}
.haut {
text-align:right;
}

a:link {color: #336666; text-decoration:underline;}
a:visited {color: #660000; text-decoration:underline;}
a:hover {color:blue; text-decoration:none;}




a.bouton1:link{
width:100px;
height:58px;
text-decoration:none;
text-align:center;
font-size:34px;
font-weight:bold;
background-image:url('boutons/accueil1.gif');
background-repeat:no-repeat;
padding:5px;
}

a.bouton1:visited{
width:100px;
height:58px;
text-decoration:none;
text-align:center;
font-size:34px;
font-weight:bold;
background-image:url('boutons/accueil3.gif');
background-repeat:no-repeat;
padding:5px;

}

a.bouton1:hover{
border:2px inset silver; 
width:100px;
height:58px;
text-decoration:none;
text-align:center;
font-size:34px;
font-weight:bold;
background-image:url('boutons/accueil2.gif');
background-repeat:no-repeat;
padding:5px;

}
.bouton1{text-align:center;padding:5px;}

a.bouton2:link{
width:100px;
height:58px;
text-decoration:none;
text-align:center;
font-size:34px;
font-weight:bold;
background-image:url('boutons/famille1.gif');
background-repeat:no-repeat;
padding:5px;
}

a.bouton2:visited{
width:100px;
height:58px;
text-decoration:none;
text-align:center;
font-size:34px;
font-weight:bold;
background-image:url('boutons/famille3.gif');
background-repeat:no-repeat;
padding:5px;
}

a.bouton2:hover{
border:2px outset silver; 
width:100px;
height:58px;
text-decoration:none;
text-align:center;
font-size:34px;
font-weight:bold;
background-image:url('boutons/famille2.gif');
background-repeat:no-repeat;
padding:5px;
}
.bouton2{text-align:center;padding:5px;}


a.bouton3:link{
width:100px;
height:58px;
text-decoration:none;
text-align:center;
font-size:34px;
font-weight:bold;
background-image:url('boutons/loisirs1.gif');
background-repeat:no-repeat;
padding:5px;}

a.bouton3:visited{
width:100px;
height:58px;
text-decoration:none;
text-align:center;
font-size:34px;
font-weight:bold;
background-image:url('boutons/loisirs3.gif');
background-repeat:no-repeat;
padding:5px;}

a.bouton3:hover{
border:2px outset silver; 
width:100px;
height:58px;
text-decoration:none;
text-align:center;
font-size:34px;
font-weight:bold;
background-image:url('boutons/loisirs2.gif');
background-repeat:no-repeat;
padding:5px;}

.bouton3{text-align:center;padding:5px;}

a.bouton4:link{
width:100px;
height:58px;
text-decoration:none;
text-align:center;
font-size:34px;
font-weight:bold;
background-image:url('boutons/serieux1.gif');
background-repeat:no-repeat;
padding:5px;}

a.bouton4:visited{
width:100px;
height:58px;
text-decoration:none;
text-align:center;
font-size:34px;
font-weight:bold;
background-image:url('boutons/serieux3.gif');
background-repeat:no-repeat;
padding:5px;}

a.bouton4:hover{
border:2px outset silver; 
width:100px;
height:58px;
text-decoration:none;
text-align:center;
font-size:34px;
font-weight:bold;
background-image:url('boutons/serieux2.gif');
background-repeat:no-repeat;
padding:5px;}

.bouton4{text-align:center;padding:5px;}

a.bouton5:link{
width:100px;
height:58px;
text-decoration:none;
text-align:center;
font-size:34px;
font-weight:bold;
background-image:url('boutons/dtdr1.gif');
background-repeat:no-repeat;
padding:5px;}

a.bouton5:visited{
width:100px;
height:58px;
text-decoration:none;
text-align:center;
font-size:34px;
font-weight:bold;
background-image:url('boutons/dtdr3.gif');
background-repeat:no-repeat;
padding:5px;}

a.bouton5:hover{
border:2px outset silver; 
width:100px;
height:58px;
text-decoration:none;
text-align:center;
font-size:34px;
font-weight:bold;
background-image:url('boutons/dtdr2.gif');
background-repeat:no-repeat;
padding:5px;}

.bouton5{text-align:center;padding:5px;}

a.bouton6:link{
width:100px;
height:58px;
text-decoration:none;
text-align:center;
font-size:34px;
font-weight:bold;
background-image:url('boutons/photos1.gif');
background-repeat:no-repeat;
padding:5px;}

a.bouton6:visited{
width:100px;
height:58px;
text-decoration:none;
text-align:center;
font-size:34px;
font-weight:bold;
background-image:url('boutons/photos3.gif');
background-repeat:no-repeat;
padding:5px;}

a.bouton6:hover{
border:2px outset silver; 
width:100px;
height:58px;
text-decoration:none;
text-align:center;
font-size:34px;
font-weight:bold;
background-image:url('boutons/photos2.gif');
background-repeat:no-repeat;
padding:5px;}

.bouton6{text-align:center;padding:5px;}

a.bouton7:link{
width:100px;
height:58px;
text-decoration:none;
text-align:center;
font-size:34px;
font-weight:bold;
background-image:url('boutons/qui1.gif');
background-repeat:no-repeat;
padding:5px;}

a.bouton7:visited{
width:100px;
height:58px;
text-decoration:none;
text-align:center;
font-size:34px;
font-weight:bold;
background-image:url('boutons/qui3.gif');
background-repeat:no-repeat;
padding:5px;}

a.bouton7:hover{
border:2px outset silver; 
width:100px;
height:58px;
text-decoration:none;
text-align:center;
font-size:34px;
font-weight:bold;
background-image:url('boutons/qui2.gif');
background-repeat:no-repeat;
padding:5px;}

.bouton7{text-align:center;padding:5px;}