/*definitions des couleurs*/
:root
{
	--couleurfonce:#c0a381;
	--couleurmedium:#411717;
	--couleurpale:#e6dac6;
}

body    
{
	color: var(--couleurmedium);
	background-color: var(--couleurfonce);
}

/*cadre au dessus du menu*/
#titre
{
	min-width: 818px;
	width:80%;
	height:200px;
	margin-left:auto; 
	margin-right:auto;
	padding-top : 10px;
	padding-bottom : 10px;
	padding-left : 10px;
	padding-right : 10px;
	background-color: var(--couleurpale);
} 


#contact
{
	height:50px;
	width:80%;
	display:flex;
	justify-content: center;
	text-align: center;
}

.contact_box
{
	padding-left : 10px;
	padding-right : 10px;
}
#boite
{
	display:flex;
	justify-content: flex-start;
	text-align: center;
	/* background-color: royalblue; */
}

/*boite flottante a gauche*/
#boitephoto
{

	/* background-color: purple; */
	height :200px ;
	width : 200px;
}

#photo
{
	clip-path: ellipse(50% 50%);
}

#boitenom
{
	/* display: flex; */
	display: table-cell;
	vertical-align: middle;
	/* justify-content: center;
	 *         align-items: center;  */
/* position : relative; */
height:200px;
width:100%;
/* background-color: coral; */
		    }

		    #nom
		    {    
			    /* position : absolute; */
			    /* /* top: 50%;  */
			    /* left: 100%;  */
			    /* transform: translate(-50%,-50%); */

			    padding-top : 68px;
			    height:auto;
			    font-weight:bold;
			    font-size:64px;
			    padding-left: 10px;
			    /* background-color: redvar(--couleurpale); */
		    } 
		    /*menu*/
		    nav
		    {
			    min-width:820px;
			    text-align:center;
			    width: 100%;
			    margin: 0px auto 0px auto;
			    background-color: var(--couleurfonce);
			    position: sticky;
			    padding-left : 0;
			    padding-right : 0;
			    padding-top : 5px;
			    padding-bottom : 5px;
			    top: -1px;
		    }
		    nav ul{
			    list-style-type: none;
			    margin: 0px auto 0px auto;
		    }

		    nav ul li{
			    display: inline-block;
			    text-align: center;
			    position: relative;
		    }
		    nav ul::after{
			    content: "";
			    display: table;
			    clear: both;
		    }


		    .sous{
			    display: none;
			    box-shadow: 0px 1px 2px #CCC;
			    background-color: var(--couleurmedium);
			    position: absolute;
			    width: 120%;
			    z-index: 1000;
		    }
		    nav > ul li:hover .sous{
			    display: block;
			    margin-top : 0px;
			    padding-left : 0 ;
			    border-radius: 18px;
			    -webkit-border-radius: 11px;
			    -moz-border-radius: 11px;
		    }

		    .sous li{
			    float: left;
			    width: 100%;
			    text-align: center;
			    border-radius: 18px;
			    min-width: 40px;
			    -webkit-border-radius: 11px;
			    -moz-border-radius: 11px;
		    }


		    .sous a{
			    /* padding: 10px; */
			    /* border-bottom: none; */

		    }

		    .sous a:hover{
			    /* border-bottom: none; */
			    background-color: var(--couleurpale);
		    }

		    .deroulant > a::after{
			    content:" â–¼";
			    font-size: 12px;
		    }

		    a.bouton3
		    {
			    padding: 4px 4px; 
			    background: var(--couleurmedium); 
			    color: var(--couleurfonce); 
			    font-weight: bold;
			    /*border: 2px solid #B0D8E8;*/
			    display: inline-block;
			    border-radius: 18px;
			    -webkit-border-radius: 11px;
			    -moz-border-radius: 11px;
			    -webkit-transition: all 0.5s ease-out 0s;
			    -moz-transition: all 0.5s ease-out 0s;
			    transition: all 0.5s ease-out 0
		    }
		    a.bouton3:hover 
		    {
			    background: var(--couleurpale); 
			    color: var(--couleurfonce);
		    }

		    /*bouton pour aller sur une autre page*/
		    a.bouton1 
		    {
			    padding: 10px 15px; 
			    background: var(--couleurfonce); 
			    color: var(--couleurmedium); 
			    font-weight: bold;
			    /*border: 2px solid #B0D8E8;*/
			    margin: 3px 3px 3px 3px;
			    display: inline-block;
			    font-size: 18px;
			    border-radius: 18px;
			    -webkit-border-radius: 11px;
			    -moz-border-radius: 11px;
			    -webkit-transition: all 0.5s ease-out 0s;
			    -moz-transition: all 0.5s ease-out 0s;
			    transition: all 0.5s ease-out 0
		    }
		    a.bouton1:hover 
		    {
			    background: var(--couleurmedium); 
			    color: var(--couleurfonce);
		    }

		    /*bouton quand on est sur la page*/
		    a.bouton2 
		    {
			    padding: 10px 15px; 
			    background: var(--couleurmedium); 
			    margin: 3px 3px 3px 3px;
			    display: inline-block;
			    color: var(--couleurfonce); 
			    font-weight: bold;
			    font-size: 18px;
			    border-radius: 18px;
			    -webkit-border-radius: 11px;
			    -moz-border-radius: 11px;
		    }

		    /*Evite que le menu n'ait une hauteur nulle*/
		    nav ul::after{
			    content: "";
			    display: table;
			    clear: both;
		    }




		    /*style du contenu de la page*/
		    .conteneur
		    {
			    min-width: 818px;
			    width:80%;
			    text-align:justify;
			    margin-left:auto; 
			    margin-right:auto; 
			    padding:10px 10px 10px 10px;
			    background-color: var(--couleurpale);
			    overflow: auto;
		    }

		    /*boite flottante a droite*/
		    .rightbox
		    {
			    float : right;
			    margin-left:20pt;
		    }




		    /*mise en forme des traits qui separent les différentes sections*/
		    hr 
		    {
			    height:2px;
			    width:100%;
			    background-color:var(--couleurfonce);
			    align:left;
			    margin-top:5pt;
			    border:0;
		    }

		    /*coloration des liens*/
		    a 
		    {
			    color: var(--couleurmedium);
		    }


		    table
		    {
			    border-collapse: collapse; /* Les bordures du tableau seront collées (plus joli) */
		    }
		    td
		    {
			    border: 1px solid black;
			    text-align: center; 
			    vertical-align: middle; 
		    }

		    #vignettesvideo td 
		    {
			    border : none;
			    width: 220px;
			    height: 160px;
		    }


		    .vignette span
		    { 
			    display: none; /* On masque le span par défaut */
		    }
		    a.vignette:hover
		    {
			    border: 0; /* Pour que ce soit fonctionnel sous IE */
		    }
		    a.vignette:hover span /* On définit où va s'afficher l'image au passage de la souris */
		    { 
			    display: block; 
			    position : fixed;
			    top: 70px;
			    left: 50%;
			    transform: translateX(-50%);

		    }