/* Procédure de démarrage de la page (CSS) */

/* --- - mise en forme de Tout les Balises Html de la page  ---- */
*, :before, :after {box-sizing:border-box;}
body{margin:0;margin:0;font-family:'Montserrat'; sans-serif;}
a {text-decoration:none;color:#FF7D12;font-size:16px;font-weight:bold;}
a:hover{color:#2424FF;}
ul {padding:0;margin:0;}
ul li {list-style:none;margin:0;padding:0;text-align:center;}
input,textarea,select {padding:6px;margin-bottom:5px;border:1px solid black;border-radius:2px;}
label{display:inline-block;width:90%;}
form{text-align:left; margin:0;padding:0 0 0 3em;}


/* mise en forme div Mentions légales */
.centrerDiv { 
    display:flex;
    flex-wrap: wrap;
    flex-direction:row;
    justify-content:center;
    align-items: center;
    align-content: center;}
.mentionlegale{   
    width:80%;margin:50px;padding:50px;
   -webkit-box-shadow: 19px -7px 39px 0px rgba(0,0,0,0.75);
   -moz-box-shadow: 19px -7px 39px 0px rgba(0,0,0,0.75);
    box-shadow: 19px -7px 39px 0px rgba(0,0,0,0.75);}
/* ------------------FIN Mention légales -------------------- */
/* ------------------procedure des class -------------------- */
.imageuser {width:3em;height:3em;position:absolute;right:0.1em;top:2em;}
/* les étoiles d'evaluation de site parimis*/
.Etoile {font-size:18px;color:#00695C;display:inline-block;}
.lblevaluer {font-size:16px;display:inline-block;font-weight:bold;}
.planmaps {width:95%;height:800px;text-align:center;}
.iframevideo {width:95%;height:400px;text-align:center;}/* video youtube dans le site */
.footerfrm {text-align:center; margin:0;padding:0;}/* formulaire footer (zone de recherche + inscrire a la newsletter )*/
.centrerlien {text-align: center} /* DIV permet de centrer les éléments*/
.reduction{padding: 12px 15px;border-radius:50%;background:#A80077;color:white;font-weight:bold;}
.Btntotop {display:none;
           position: fixed;
           bottom:20px;
           right:20px;
           background: #000;
           color: #fff;
           border-radius:50%;
           padding: 12px 15px;
           cursor: pointer;
  }/* Boutton to top */


.StyleTableau { margin:auto;width:99%;border: 1px solid grey;}
.StyleTableau td{text-align: center;}
.StyleTableau td:nth-child(3){text-align: right;}
.StyleTableau tr:first-child{background:rgb(255,127,80,.8);color:#00009E;}
.StyleTableau td {background:rgb(255,127,80,.4);}

.StyleTableau td:hover{background:yellow;}

.style1 {position:relative;padding:.4em;text-align:center;}
.style1 h1  {font-size:18px;color:#00009E;margin:0;padding:0;background:#FFC375;border-radius:5px ;}
.style1 h2  {width:95%;font-size:16px;display:inline-block;margin:0;padding:0;text-align:left;font-weight:bold;}
.style1 h3  {width:95%;font-size:14px;display:inline-block;margin:0;padding:0;text-align:left}
.style1 h4  {width:95%;font-size:12px;display:inline-block;margin:0;padding:0;text-align:left}
.style1 p   {width:95%;display:inline-block;font-size:12px;padding:.4em;margin:0;text-align:justify;}
.style1 img {width:95%;height:70%;padding:0;display:inline;}

.style2 {padding:.4em;text-align:center;}
.style2 h1  {font-size:18px;color:#00009E;margin:0;padding:0;background:#FFC375;;border-radius:5px;}
.style2 h2  {width:95%;font-size:16px;display:inline-block; margin:0;padding:0;text-align:left;}
.style2 h3  {width:95%;font-size:14px;display:inline-block; margin:0;padding:0;text-align:left}
.style2 h4  {width:95%;font-size:12px;display:inline-block; margin:0;padding:0;text-align:left}
.style2 p   {width:95%;display:inline-block;font-size:12px;padding:.4em;margin:0;text-align:justify;}
.style2 img {width:95%;height:70%;display:inline;}
/* Vise les liens Colone droite : "Boutton"  Appelle et réservation */
.cold .style2 a{text-align:center;padding-top:13px;margin:5px;display:inline-block;width:250px;height:45px;
border:1px solid #FF7D12;}

/*.cold .style2 a {
                  text-align:center;padding-top:13px;margin:5px;display:inline-block;
                  background:#0D47A1;border-radius:5px;width:250px;height:45px;
                } */
/*--------------------Header---------------- */
.header{margin:5px 5px 10px 5px;background:#424242;}
/* création et affichage *** menu burger et titre page**** */
.togglemenu {display:block; width:30px;height:30px;color:white;font-size:16px;margin-right:0.5em}
 #menuprinc {display:none;text-align:center;} /* cacher menu principale page */
 #menuprinc.active {display:block;} /* class active  utilisé dans jquery toogleclass */
 .titreheader.desactive {display:none;} /* class active  utilisé dans jquery toogleclass */
/* cacher titre page */
.titreheader {display:inline;font-weight:bold;font-size:30px;color:white;}
.piedheader  {width:100%;}
.piedheader img{width:100%;height:300px}
.enteteheader { 
    display:flex;
    flex-wrap:nowrap;
    flex-direction:row;
    justify-content: space-between;
    align-items: center;
    }
/*------------------FIN--Header---------------- */

.colg {margin:0;padding:0;}
/*.lien colone gauche  */
.colg a {padding:4px 0 4px 5px;display:inline-block;width:100%;color:#0D47A1;}

.main {text-align:justify;vertical-align:top;}

/*--------------------Footer---------------- */
.footer {width:100%;background:#BDBDBD;text-align:center;}
.footer p {margin:0;padding:0;font-weight:bold;font-size:12px;}
.footer .liensutile {width:100%;height:80px;background:#616161;padding:1em;}
.footer .contactez {width:100%;font-size:18px; margin:0;padding:.5em;}
/* Visé les lien réseaux sociaux dans (fouter et main)*/
.reseausoc ul li a{ display:inline-block;width:3em;height:3em;background:#A80077;color:white;border-radius:50%;padding-top: .5em;}
.reseausoc ul li { display:inline-block;}
.reseausoc {width:100%;padding: .5em;}


/* ----disposition des colones  ---- */
.colg, .main, .cold{vertical-align:top;}
.globalmain{display:flex;flex-wrap:wrap;margin:0;padding:0;}
.header{width:100%}
.colg{width:100%;}
.main{width:100%;}
.cold{width:100%;}
.footer{display: flex;flex-wrap:wrap;}


/* *************Format Tablette ****************************** */
@media (min-width:740px){
	
  .footer ul li,.header ul li  {display:inline-block;padding:0 .4em 0 .4em}
  .footer .reseausoc {width:50%;}
  .footer .contactez {width:50%;}
  /*.footer .liensutile  {height:100px;line-height:100px;vertical-align: middle;}*/
  .colg, .main{vertical-align:top;}
  .colg{width:40%;}
  .main{width:60%;}
  .cold{width:100%;}
  
 
  .titreheader{display:inline;}/* afficher titre page */
   #menuprinc {display:none;} /* cacher menu principale */
  .togglemenu {display:block;}/* afficher Menu burger  */
}
/* *************Format Ecran ****************************** */
@media  (min-width:1024px){

  .footer ul li,.header ul li  {display:inline-block;padding:0 .9em 0 .9em}
  .footer .reseausoc {width:50%;} 
  .footer .contactez {width:50%;}
  
  .footer{padding-top:.5rem;}
  .colg{width:30%;}
  .main{width:40%;}
  .cold{width:30%;}

 
  .titreheader {display:inline;}/* afficher titre page */
  #menuprinc {display:block;} /* afficher menu principale */
  .togglemenu {display:none;}/* cacher Menu burger  */

}



/* **************************       
-- **** Debut slide jQuery ****
****************************** 
*/
        /*jssor slider loading skin spin css*/
        .jssorl-009-spin img {
            animation-name: jssorl-009-spin;
            animation-duration: 1.6s;
            animation-iteration-count: infinite;
            animation-timing-function: linear;
        }

        @keyframes jssorl-009-spin {
            from { transform: rotate(0deg); }
            to { transform: rotate(360deg); }
        }
        
        /*jssor slider bullet skin 032 css*/
        .jssorb032 {position:absolute;}
        .jssorb032 .i {position:absolute;cursor:pointer;}
        .jssorb032 .i .b {fill:#fff;fill-opacity:0.7;stroke:#000;stroke-width:1200;stroke-miterlimit:10;stroke-opacity:0.25;}
        .jssorb032 .i:hover .b {fill:#000;fill-opacity:.6;stroke:#fff;stroke-opacity:.35;}
        .jssorb032 .iav .b {fill:#000;fill-opacity:1;stroke:#fff;stroke-opacity:.35;}
        .jssorb032 .i.idn {opacity:.3;}
        
        /*jssor slider arrow skin 051 css*/
        .jssora051 {display:block;position:absolute;cursor:pointer;}
        .jssora051 .a {fill:none;stroke:#fff;stroke-width:360;stroke-miterlimit:10;}
        .jssora051:hover {opacity:.8;}
        .jssora051.jssora051dn {opacity:.5;}
        .jssora051.jssora051ds {opacity:.3;pointer-events:none;}
       
/* **************************       
-- **** Fin  slide jQuery ****
****************************** 
*/