/*Mise en page de la boite pour qu'elle s'agrandisse en fonction du contenu*/

#conteneur{
min-width:750px;/*largeur minimum*/
width:90%; /*largeur du calque conteneur*/
height:auto; /* hauteur du conteneur. il est important de mettre ce paramètre sur auto pour que sa hauteur s'adapte au contenu*/
margin:auto; /*permet de centrer ce claque au milieu de la page. Ce paramètre est optionnel*/
}

#entete{
width:100%; /*largeur de l'image*/
height:20px; /*c'est la hauteur de l'image. A vous de vérifier la hauteur de votre image*/
min-width:750px;/*largeur minimum*/
}

#hautgauche{
width:50%;/*largeur de la div*/
float:left;/*permet d'aligner deux div*/
}


#milieu{
overflow:hidden;/*Si le contenu (texte, image) est plus grans que la div, il sera coupé (évite le chevauchement des textes)*/
margin-top:117px;/*marge du haut avec la div du dessus*/
width:100%;/*largeur de la div*/
min-height:400px;/* hauteur du calque du milieu. c'est celui qui va s'agrandir en fonction du contenu*/
min-width:750px;/*largeur minimum*/
background-image:url(design/milieugauche.png);/*lien image du milieugauche*/
background-repeat:repeat-y; /*répétition de l'image sur l'axe des Y c'est à dire verticalement*/
}

#milieugauche{
padding-top:5px;/*marge haute interne à la div*/
overflow:hidden;/*Si le contenu (texte, image) est plus grand que la div, il sera coupé (évite le chevauchement des textes)*/
width:20%;/*largeur de la div*/
height:auto;/*hauteur automatiquement ajusté au contenu*/
float:left;/*permet d'aligner deux div*/
min-height:400px;/*hauteur minimum*/
padding-left:30px;/*marge gauche interne à la div*/
min-width:150px;/*largeur minimum*/
text-align:center;/*centre le texte*/
}

#corps{
overflow:hidden;/*Si le contenu (texte, image) est plus grand que la div, il sera coupé (évite le chevauchement des textes)*/
width:96%;/*largeur de la div*/
height:auto;/*hauteur automatiquement ajusté au contenu*/
margin:auto;/*permet de centrer la div*/
margin-right:13px;/*marge externe droite*/
min-height:400px;/*hauteur minimum*/
padding:5px;
}

#milieudroit{
padding-top:5px;/*marge haute interne à la div*/
overflow:hidden;/*Si le contenu (texte, image) est plus grand que la div, il sera coupé (évite le chevauchement des textes)*/
width:75%;/*largeur de la div*/
background-image:url(design/milieudroit.png);/*lien image du milieudroit*/
background-position:right;/*position de l'image de fond*/
background-repeat:repeat-y; /*répétition de l'image sur l'axe des Y c'est à dire verticalement*/
float:right;/*permet d'aligner deux div*/
height:auto;/*hauteur automatiquement ajusté au contenu*/
min-height:400px;/*hauteur minimum*/
}


#piedpage{
width:100%;/*largeur de la div*/
height:31px;/*hauteur de la div*/
min-width:750px;/*largeur minimum*/
background-image:url(design/basdroit.png);/*lien image de fond*/
background-repeat:no-repeat;/*evite la répétition de l'image de fond*/
background-position:right;/*position de l'image de fond*/
position:relative;/*position de la div*/
}

#basgauche{
float:left;/*permet d'aligner deux div*/
position:relative/*position de la div*/
}

#basmilieu{
width:96%;/*largeur de la div*/
min-width:662px;/*largeur minimum*/
float:left;/*permet d'aligner deux div*/
height:31px;/*hauteur de la div*/
text-align:right;/*texte aligné à droite*/
font-size:70%;/*taille du texte*/
background-image:url(design/basmilieu.png);/*lien image de fond*/
background-repeat:repeat-x;/*répétition de l'image sur l'axe des x c'est à dire horizontalement*/
background-position:bottom center;/*position de l'image de fond*/
text-indent:0;/*indentation du texte*/
position:relative;/*position de la div*/
}


#gras{
font-weight:bold;/*met le texte en gras*/
}

h1{
text-align:center;/*centre le texte*/
}

h2{
text-align:center;/*centre le texte*/
}

h3{
text-align:center;/*centre le texte*/
}

a{
color:black;/*couleur du texte*/
text-decoration:none;/*le lien n'est pas souligné*/
}

#centrer{
text-align:center;/*centre le texte*/
}

#mail{
width:400px;/*largeur de la textbox*/
}

#message{
width:400px;/*largeur de la zone de texte multilignes*/
height:150px;/*hauteur de la zone de texte multilignes*/
}

#alerte{
text-align:center;/*centre le texte*/
color:red;/*couleur du texte*/
font-weight:bold;/*met le texte en gras*/
}

legend{
color:#2f4ca5;/*couleur du texte*/
}