/* CSS Document */

body
{
	margin:0;
	padding: 0;
	font: x-small Verdana, Arial, Helvetica, sans-serif;
	background-color: #FFFFFF; 
}

img
{
	border-style: none;
	border-color: inherit;
	border-width: 0px;
}

a
{
	text-decoration: none;
	color:#999999;
}

a:hover
{
	color:#d92a35;
}

p
{
	color:#666666;
	font:Arial, Helvetica, sans-serif;
	font-size:14px;
	display: inline;	
}

h1
{
	float: none;
	color:#021851;
	font-weight:lighter;
	font-size:36px;
	font:Verdana, Arial, Helvetica, sans-serif;
	vertical-align: middle;
	text-align:left;	
}

h2
{
	color: #021851;
	font-weight: bold;
	font-size: 22px;
	font:Verdana, Arial, Helvetica, sans-serif;	
}

h3
{
	float: none;
	font-weight:lighter;
	font-size:36px;
	font:Verdana, Arial, Helvetica, sans-serif;
	color:#FFFFFF;
	vertical-align: middle;
	text-align:left;
}


div#conteneur
{
	width: 1250px;
	height:auto;
	margin-left:auto;
	margin-right:auto;
	text-align: center;
	background-repeat: no-repeat;
	background-color: #FFFFFF;
}


div#contenu
{
	width: 1250px;
	height: 650px;
	margin-left:auto;
	margin-right: auto;
	background: no-repeat;
}

div#header
{
	height: 90px;
	width: 1280px;
	margin-left:auto;
	margin-right:auto;
	background-color:#021851;
	font-family:Arial;
}
/* On definit la hauteur de la partie header, contenant le titre du site */

div#header a
{
	height: 90px;
	width: 1280px;
	margin-left:auto;
	margin-right:auto;
	background-color:#FFFFFF;
	font-family:Arial;
}


div#menu
{
	width:1250px;
	padding-bottom: 0;
	background-image:  url("_img/designe/fond_menu.png");
	background-repeat: repeat-x;
	margin-left:auto;
	margin-right:auto;
}
/*on d�finit le menu*/


.MenuBlanc
{
	background-image: url("_img/designe/fond_menu_texte.png");
	background-repeat: repeat-x;
	height: 40px;
	color:white;
	text-align: left;
	vertical-align: middle;
	line-height: 30px;
	font-size:13px;
}

.MenuBlancSel
{
	background-image: url("_img/designe/titre_sel.png");
	background-repeat: repeat-x;
	height: 40px;
	color:#fec502;
	font-weight: bold;
	text-align: left;
	vertical-align: middle;
	line-height: 30px;
	font-size: 13px;
}

.MenuBlanc a
{
	display: block;
	text-decoration: none;
	background-image:  url('_img/designe/fond_menu_texte.png');
	background-repeat: repeat-x;
	color:white;
	padding-right: 15px;
	padding-left: 15px;
	height: 40px;
}

.MenuBlancSel a
{
	display: block;
	text-decoration: none;
	background-image:  url('_img/designe/titre_sel.png');
	background-repeat: repeat-x;
	color:white;
	padding-right: 15px;
	padding-left: 15px;
	height: 40px;
}

.MenuBlanc a:hover
{
	color:#fec502;
	background-repeat: repeat-x;
	padding-right: 15px;
	padding-left: 15px;
}


/*Menu avec texte composé*/

.MenuBlanc2
{
	background-image: url("_img/designe/fond_menu_texte.png");
	background-repeat: repeat-x;
	height: 40px;
	color:#000000;
	text-align: left;
	vertical-align: middle;
	line-height: 30px;
	font-size:13px;
	width:112px;
}

.MenuBlanc2Sel
{
	background-image: url("_img/designe/titre_sel.png");
	background-repeat: repeat-x;
	height: 40px;
	color:#000000;
	font-weight: bold;
	text-align: left;
	vertical-align: middle;
	line-height: 30px;
	font-size: 13px;
	width:123px;
}

.MenuBlanc2 a
{
	display: block;
	text-decoration: none;
	background-image:  url('_img/designe/fond_menu_texte.png');
	background-repeat: repeat-x;
	color:#000000;
	padding-right: 15px;
	padding-left: 15px;
	height: 40px;
	width:112px;
}

.MenuBlanc2Sel a
{
	display: block;
	text-decoration: none;
	background-image:  url('_img/designe/titre_sel.png');
	background-repeat: repeat-x;
	color:#000000;
	padding-right: 15px;
	padding-left: 15px;
	height: 40px;
	width:125px;
}

.MenuBlanc2 a:hover
{
	color:#021851;
	background-repeat: repeat-x;
	padding-right: 15px;
	padding-left: 15px;
	width:112px;
}

/*Fin menu avec texte compose*/


.MenuSepara
{
	background-image:  url("_img/designe/fond_menu.png");
	background-repeat: no-repeat;
	width: 4px;
}

.MenuLeft
{
	background-image:  url("_img/designe/fond_menu.png");
	background-repeat: repeat-x;
	padding-left: 54px;
}


/* On ajoute un petit élément décoratif sur le côté de la page et on crée un espace à gauche et à droite du contenu */

div#fondref
{
	background-color: #E2E2E2;
}

#titreref
{
	background-image: url(_img/designe/cadre_1.png);
	background-repeat: no-repeat;
	margin-left: 20px;
	padding-left: 10px;
	height: 20px;
	font-weight: bold;
	font-size: x-small;
	line-height: 17px;
	margin-top: 20px;
}

#cadrecontact
{
	width: 1197px;
	height:620px;
	background-image:url(_img/designe/CadreContact.jpg);
	background-repeat:no-repeat;
	display: block;
	text-align: justify;
	margin-top: 20px;
	margin-left:54px;
	margin-right:auto;
}

#cadrecontactintgauche
{
	width: 860px;
	height: 610px;
	padding-top: 10px;
	padding-left: 10px;
	float:left;
}

#cadrecontactintdroite
{
	width: 280px;
	height: 590px;
	padding-top: 10px;
	float:left;
	background-color: #FFFFFF;
}

#cadre1
{
	width: 830px;
	height : auto;
	display: block;
	text-align: justify;
	line-height: 14px;
	margin: auto;
}


.marque 
{
	color: #CC3300;
	font-weight: bold;
}
.marque a
{
	text-decoration: none;
	color: #CC3300;
}
.marque a:hover
{
	text-decoration: underline;
}

div#topfooter
{
	width:auto;
	height:36px;
	margin-left:auto;
	margin-right:auto;
	background-image: url('_img/designe/fond_menu_texte.png');
	background-repeat: repeat-x;
}

.footer
{
	width:auto;
	height:130px;
	margin-left:auto;
	margin-right:auto;
	text-align: center;
	font-size:11px;
	background-color: #999999;
    border-top: 10px solid transparent;
    overflow: hidden;
	font-weight: bold;
	line-height: 35px;
	color:#FFFFFF;
}

/* Mise en forme de la partie pied de page, rien d'extra-ordinaire */

pre
{
	overflow: auto ;
	background: #dea ;
	border: 2px solid #9b2 ;
	padding: 5px 0 0 5px ;
	font-size: 1.2em ;
}

/* En passant on définit l'overflow de la balise pre à auto pour permettre d'afficher des barres de d�filement si le texte contenu dans cette balise est trop grand */
* html pre
{
	width: 636px ;
}
/* On doit donner une largeur au pre à cause d'Internet Explorer, on ne va donc l'appliquer qu'� Internet Explorer en utilisant un "hack", la combinaison " * html " permet de n'appliquer ce qui suis qu'� Internet Explorer */



#cadreindex{
	width:1250px;
	height:auto;
	margin-left:auto;
	background-color: #FFFFFF;
}


#cadre2 {
	width: 374px;
	text-align: center;
	line-height: 18px;
	margin-top: 20px;
	margin-right: 20px;
	margin-bottom: 0px;
	margin-left: 0px;
	float: right;
	font-size: 8px;
}


#cadreinfosolutions{
	width:730px;
	height:750px;
	float:left;
	margin-left:140px;
}


#cadreinfo1{
	width:340px;
	height:350px;
	float:left;
	margin-left:4%;
	text-align:left;
	background-color: #FFFFFF;
}

#cadreinfo2{
	width:370px;
	height:350px;
	float:left;
	margin-left:100px;
	text-align:left;
	background-color: #FFFFFF;
}

#cadreinfo3{
	width:310px;
	height:350px;
	float:right;
	text-align:left;
	background-color: #FFFFFF;
}

#cadreinfo4{
	width:540px;
	height:350px;
	float:left;
	margin-left:4%;
	text-align:left;
	background-color: #FFFFFF;
}

#cadreinfo5{
	width:610px;
	height:650px;
	float:right;
	text-align:left;
	background-color: #FFFFFF;
}

#titreinfo2 {
	background-image:  url("_img/bandegrise.jpg");
	font-size: large;
	text-align: justify;
	line-height: 43px;
	height:43px;
	margin-top: 20px;
}

#imgSiteMobile
{
    display: none;
    width: 100%;
    height: auto;
}

#cadreSiteMobileIndex
{
    display: none;
	background-color: #FFFFFF;
}



/*#####################################################################################*/
/*##################################### Drop Down Menu ################################*/
/*#####################################################################################*/

.dropdown
{
    display: none;
}

*:focus { outline: none; }

.dropdown {
    position: relative;
    text-align: center;
    width: 100%;
}

.dropdown > button {
    position: relative;
    border: 0;
    padding: 15px 50px 15px 30px;
    overflow: hidden;
    background: none;
    color: white;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: .03em;
    line-height: normal;
    text-transform: uppercase;
    z-index: 2;
    width: 100%;
}

.dropdown > button[aria-expanded="true"] { color: #021851; }

.dropdown > button[aria-expanded="true"]:before {
    -webkit-transform: translateY(calc(100% - 3px));
    -ms-transform: translateY(calc(100% - 3px));
    transform: translateY(calc(100% - 3px));
}

.dropdown > button[aria-expanded="true"]:after {
    border-width: 0 5px 5px 5px;
    border-color: transparent transparent #021851 transparent;
}

.dropdown > button:before {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: #021851;
    z-index: -1;
    -webkit-transition: all 0.3s cubic-bezier(1, 0.1, 0, 0.9);
    transition: all 0.3s cubic-bezier(1, 0.1, 0, 0.9);
    -webkit-transform: translateZ(0) translateY(0);
    transform: translateZ(0) translateY(0);
}

.dropdown > button:after {
    content: '';
    position: absolute;
    top: 50%;
    right: 30px;
    display: block;
    margin-top: -3px;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 5px 5px 0 5px;
    border-color: white transparent transparent transparent;
    opacity: 1;
    -webkit-transition: all 0.3s ease;
    transition: all 0.3s ease;
}

.dropdown > button:focus:before { background: #021851; }

.dropdown button + ul {
    position: absolute;
    overflow: hidden;
    top: 100%;
    left: 0;
    right: 0;
    margin: 0;
    padding: 0;
    background: #f1f1f1;
    list-style: none;
    -webkit-transition: all 0.3s cubic-bezier(1, 0.1, 0, 0.9) 0.2s;
    transition: all 0.3s cubic-bezier(1, 0.1, 0, 0.9) 0.2s;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    max-height: 350px;
    visibility: visible;
    z-index: 1;
}

.dropdown button + ul[aria-hidden='true'] {
    max-height: 0;
    visibility: hidden;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
}

.dropdown button + ul li a {
    display: block;
    color: #1e1e1e;
    padding: 10px 30px;
    font-weight: 400;
    text-decoration: none;
    font-size: 14px;
    -webkit-transition: all 0.3s ease;
    transition: all 0.3s ease;
}

.dropdown button + ul li a:hover, .dropdown button + ul li a:focus { background: #dedede; }


/*###########################################################################################*/
/*################################## Fin Drop Down Menu #####################################*/
/*########################################################################################### */


/*####################################################################################################################*/
/*################################################ Partie Responsive #################################################*/
/*####################################################################################################################*/

@media screen and (max-width: 1280px) {

    /*####################################################################################################################*/
    /*################################################ Page Index ########################################################*/
    /*####################################################################################################################*/

    div#header {
        width: 100%;
        height: auto;
    }

    #imgLogo {
        width: 10%;
    }

    #imgContact {
        width: 70%;
        height: auto;
    }

    div#header a {
        width: 100%;
    }

    div#conteneur
    {
        width: 100%;
		height: auto;
		background-color: #FFFFFF;
    }

    #cadreindex
    {
        width: 100% !important;
        height: auto;
		background-color: #FFFFFF;
    }

    .dropdown
    {
        display: inline-block;
    }

    #menu
    {
        display: none;
    }

    #imgSiteMobile
    {
        display: block;
    }

    #cadreinfo1
     {
        width: 45%;
        height: auto;
		background-color: #FFFFFF;
     }

    #cadreinfo1 table
    {
        width: 100%;
    }

    #cadreinfo1 td
    {
        width: 85%;
    }

    #cadreinfo1 img
    {
        width: 50%;
        height: auto;
        margin-left: auto;
        margin-right: auto;
        display: block;
    }

    #cadreinfo2
    {
        width: 45%;
        float: left;
        margin-left: 2%;
        height: auto;
		background-color: #FFFFFF;
    }

    #cadreinfo2 img
    {
        width: 50%;
        height: auto;
        margin-left: auto;
        margin-right: auto;
        display: block;
    }

    #cadreinfo2 table
    {
        width: 100%;
    }

    #cadreinfo2 td
    {
        width: 85%;
    }

    .footer
    {
        width: 100%;
        height: auto;
    }

    #cadreinfo3
    {
        display: none;
		background-color: #FFFFFF;
    }

    #cadreSiteMobileIndex
    {
        display: block;
        width: 95%;
        margin: 2%;
        height: auto;
		background-color: #FFFFFF;
    }

    #Accompagnements
    {
        width: 45%;
        display: inline-block;
        float: left;
        text-align: left;
    }

    #Accompagnements table
    {
        width: 100%;
    }

    #Accompagnements td
    {
        width: 85%;
    }

    #Desserts
    {
        width: 45%;
        display: inline-block;
        float: left;
        text-align: left;
        margin-bottom: 5%;
    }

    #Desserts table
    {
        width: 100%;
    }

    #Desserts td
    {
        width: 85%;
    }

    /*####################################################################################################################*/
    /*################################################ Page Spécialités ###################################################*/
    /*####################################################################################################################*/


    #cadreinfo4
    {
        width: 95%;
        float: left;
        margin-left: 2%;
        height: auto;
		background-color: #FFFFFF;
        margin-bottom: 5%;
    }

    #cadreinfo4 img
    {
        width: 45%;
        height: auto;
        margin-left: auto;
        margin-right: auto;
        display: block;
    }

    #cadreinfo4 table
    {
        width: 100%;
    }

    #cadreinfo4 td
    {
        width: 85%;
    }

    #cadreinfo5
    {
        display: none;
		background-color: #FFFFFF;
    }

    /*####################################################################################################################*/
    /*################################################ Page Contact ######################################################*/
    /*####################################################################################################################*/

    div#contenu
    {
        width: 100%;
        height: auto;
    }

    #cadrecontact
    {
        width: 95%;
        margin-left: 2%;
        background-image: none;
    }

    #cadrecontactintgauche
    {
        width: 100%;
    }

    #cadrecontactintgauche iframe
    {
        width: 80%;
        margin-left: auto;
        margin-right: auto;
        display: block;
    }

    #cadrecontactintdroite
    {
        width: 100%;
        text-align: center;
        margin-left: auto;
        margin-right: auto;
        display: block;
        margin-bottom: 5%;
    }

    #cadrecontactintdroite img
    {
        width: 40%;
        height: auto;
    }

}

@media screen and (max-width: 724px) {

    /*####################################################################################################################*/
    /*################################################ Page Index ########################################################*/
    /*####################################################################################################################*/

    #cadreinfo1
    {
        width: 100%;
        margin-left: 2%;
		background-color: #FFFFFF;
    }

    #cadreinfo2
    {
        width: 100%;
		background-color: #FFFFFF;
    }

    #cadreSiteMobileIndex
    {
        width: 100%;
		background-color: #FFFFFF;
		
    }

    #Accompagnements
    {
        width: 100%;
    }

    #Desserts
    {
        width: 100%;
    }


}


@media screen and (max-width: 480px) {

    /*####################################################################################################################*/
    /*################################################ Page Index ########################################################*/
    /*####################################################################################################################*/

    .dropdown
    {
        display: inline-block;
    }

    #menu
    {
        display: none;
    }

    #imgLogo {
        width: 100%;
    }

    #imgContact {
        width: 20%;
        height: 100%;
    }

    #cadrecontactintdroite img
    {
        width: 80%;
        height: auto;
    }

}


/*####################################################################################################################*/
/*################################################ Responsive Mobile #################################################*/
/*####################################################################################################################*/


@media only screen and (max-device-width: 736px) {

    /*###########################################################################################*/
    /*##################################### Media Query Index ###################################*/
    /*###########################################################################################*/
    #imgLogo {
        width: 100%;
        position: absolute;
        z-index: 4;
    }

    #imgContact {
        margin-right: 0%;
        float: right;
        width: 60%;
        z-index: 2;
    }

	#imgTripAdvisor {
        width: 30%;
    }

    .dropdown {
        margin-top: 6%;
        display: inline-block;
        margin-left: 0;
        margin-right: 0;
    }

    .dropdown > button {
        font-size: 50px;
        height: 100px;
    }

    .dropdown button + ul li a {

        font-size: 50px;
    }

    .dropdown button + ul {

        max-height: 700px;
    }

    #conteneur h1
    {
        font-size: 50px;
    }

    #conteneur h2
    {
        font-size: 40px;
    }

    #conteneur p
    {
        font-size: 35px;
        line-height: 42px;
    }

    #cadreinfo1
    {
        width: 95%;
        margin-left: 2%;
    }

    #cadreinfo2
    {
        width: 95%;
    }

    #Accompagnements
    {
        width: 100%;
    }

    #Desserts
    {
        width: 100%;
    }

    #contenu h1
    {
        font-size: 50px;
    }

    #contenu h2
    {
        font-size: 40px;
    }

    #contenu p
    {
        font-size: 35px;
        line-height: 42px;
    }


    #cadrecontactintdroite
    {
        height: auto;
    }

    #cadrecontactintgauche
    {
        height: auto;
    }

    #cadrecontact
    {
        height: auto;
    }




}

/*###########################################################################################*/
/*################################## Media Query Mobile Paysage #############################*/
/*###########################################################################################*/



@media only screen and (max-device-width: 736px)and (orientation: landscape) {

    /*###########################################################################################*/
    /*##################################### Media Query Index ###################################*/
    /*###########################################################################################*/


    #imgLogo {
        width: 15%;
        position: absolute;
        z-index: 4;
    }

	#imgTripAdvisor {
        position: absolute;
    }

    #imgContact {
        margin-right: 0%;
        float: right;
        position: absolute;
        z-index: 2;
    }

    #conteneur
    {
        width: 100%;
		background-color: #FFFFFF;
    }
    body
    {
        width: 100%;
    }

    .dropdown
    {
        display: inline-block;
        width: 100%;
        margin-top: 10%;
    }

    .dropdown > button
    {
        font-size: 20px;
        height: 50px;
    }

    .dropdown button + ul li a {

        font-size: 20px;
    }

    .dropdown button + ul {

        max-height: 700px;
    }

    #conteneur h1
    {
        font-size: 30px;
    }

    #conteneur h2
    {
        font-size: 20px;
    }

    #conteneur p
    {
        font-size: 15px;
        line-height: 22px;
    }

    #cadreinfo1
    {
        width: 95%;
    }

    #cadreinfo2
    {
        width: 95%;
    }

    #Accompagnements
    {
        width: 100%;
    }

    #Desserts
    {
        width: 100%;
    }

    #cadreSiteMobileIndex img
    {
        display: block;
        width: 50%;
        margin: auto;
		background-color: #FFFFFF;
    }

    #contenu h1
    {
        font-size: 30px;
    }

    #contenu h2
    {
        font-size: 20px;
    }

    #contenu p
    {
        font-size: 15px;
        line-height: 22px;
    }

    #cadrecontactintdroite
    {
        height: auto;
    }

    #cadrecontactintgauche
    {
        height: auto;
    }

    #cadrecontact
    {
        height: auto;
    }


}