@font-face {
     font-family: 'times-new-roman';
    /* src: url(‘/polices/times-new-roman.ttf’) format(‘ttf’) */
 }

 body {
     font-family: Times, "Times New Roman", Georgia, serif;
 }

 html {
     --police: #502404;
     --grisclair: #eee;
     --grismoyen: #ddd;
     --grisfonce: #676767;
     --vert: #78b0ad;
     --white: white;
     --black: black;
 }

 /*  *******************  Reset CSS   *********************  */

 br {
     margin: 0;
 }

 html,
 rt body,
 textarea,
 figure,
 label,
 p,
 h1,
 h2,
 h3,
 h4,
 h5 {
     margin: 0;
     padding: 0;
     color: var(--black);
 }

 body {
     overflow: hidden visible;
     width: 100%;
     background-color: var(--grisfonce);
     height: 80vh;
 }

 /*  *******************  Fin reset CSS   **************  */


 /*     ***************    Fontes    ***************    */

 .hometitre {
     color: var(--police);
     font-size: 4vw;
     font-family: time new roman;
     margin-left: 5vw;
 }

 h1 {
     color: var(--police);
     font-size: clamp(1.4rem, -1rem + 3.7vw, 2.0rem);
 }

 h2 {
     color: var(--vert);
     font-size: clamp(1.1rem, -1rem + 2.1vw, 1.8rem);
     margin: 3% 0 2% 0;
     border-bottom: 1px solid var(--vert);
 }

 h3 {
     color: var(--police);
     font-size: clamp(0.9rem, -1rem + 2.1vw, 2.0rem);
 }

 h4 {
     color: var(--police);
     font-size: clamp(0.7rem, -1rem + 1.8vw, 1.6rem);
     margin: 1rem; /* 0% 2.5% 0%; */
 }

 p {
     color: var(--police);
     font-size: clamp(0.8rem, -1rem + 1.8vw, 1.0rem);
 }

 h4 a,
 p a {
     color: var(--white);
     text-decoration: none;
 }

 /*    ****************** Couleurs Chemin *********  */

 .cheminfooter {
     background-color: var(--vert);
 }

 /*    ****************** Header  *********  */

 #header {
     left: 0;
     top: 0;
     position: fixed;
     width: 100%;
     z-index: 2;
     display: -webkit-box;
     display: -ms-flexbox;
     display: flex;
     -webkit-box-orient: vertical;
     -webkit-box-direction: normal;
     -ms-flex-direction: column;
     flex-direction: column;
 }

 .menu {
     display: flex;
     height: 6vh;
 }

 .option {
     margin-top: 0vh;
     width: 20%;
     text-align: center;
 }

 .logo {
     margin-top: 12vw;
     width: 100%;
     height: auto;
     display: flex;
     flex-direction: column;
 }

 .option a:hover {
     border-bottom: 2px solid var(--police);
 }

 .option h4 {
     color: var(--white);
     line-height: 2vh;
 }

 .perso{
     margin-right : 4%;
 }

 .persohome {
     margin-left : 4%;
 }

 .perso a img, .persohome img {
     height : 6vh;
 } 

 .main-nav1 {
     display: -webkit-box;
     display: -ms-flexbox;
     display: flex;
     -webkit-box-orient: horizontal;
     -webkit-box-direction: normal;
     -ms-flex-direction: row;
     flex-direction: column;
     -webkit-box-pack: justify;
     -ms-flex-pack: justify;
     justify-content: space-between;
     background-color: var(--vert);
     -webkit-box-align: center;
     -ms-flex-align: center;
    /* align-items: center; */
 }

 .menubas {
     width: 100%;
     margin-left: clamp(1px, 5%, 30vw);
     display: -webkit-box;
     display: -ms-flexbox;
     display: flex;
     -webkit-box-pack: justify;
     -ms-flex-pack: justify;
     -webkit-box-orient: horizontal;
     -webkit-box-direction: normal;
     -ms-flex-direction: row;
     flex-direction: column;
 }

 .menubas a img {
     width: 100%;
 }

 .baseline {
     margin-top: clamp(1%, 8vh, 10%);
     width: 100%;
 }

 /*   *********** Mise en page générale  ******** */

 #homepagecolumn {
     width: 100%;
     display: flex;
     flex-direction: column;
     flex-wrap: wrap;
     padding-left: 3vw;
 }

/*    MENU BURGER */

.hamburger-menu{
    display : none;
}

#menu__toggle {
  opacity: 0;
}
#menu__toggle:checked + .menu__btn > span {
  transform: rotate(45deg);
}
#menu__toggle:checked + .menu__btn > span::before {
  top: 0;
  transform: rotate(0deg);
}
#menu__toggle:checked + .menu__btn > span::after {
  top: 0;
  transform: rotate(90deg);
}
#menu__toggle:checked ~ .menu__box {
  left: 0 !important;
}
.menu__btn {
  position: fixed;
  top: 20px;
  left: 15px;
  width: 26px;
  height: 26px;
  cursor: pointer;
  z-index: 1;
}
.menu__btn > span,
.menu__btn > span::before,
.menu__btn > span::after {
  display: block;
  position: absolute;
  width: 100%;
  height: 2px;
  background-color: #616161;
  transition-duration: .25s;
}
.menu__btn > span::before {
  content: '';
  top: -8px;
}
.menu__btn > span::after {
  content: '';
  top: 8px;
}
.menu__box {
    display: block;
    position: fixed;
    top: 0;
    left: -100%;
    width: 300px;
    height: 40vh; /* 100%; */
    margin: 0;
    padding: 80px 0;
    list-style: none;
    background-color: #ECEFF1;
    box-shadow: 2px 2px 6px rgba(0, 0, 0, .4);
    transition-duration: .25s;
}
.menu__item {
  display: block;
  padding: 6px 10px;
  color: #333;
  font-family: 'Roboto', sans-serif;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  transition-duration: .25s;
}
.menu__item:hover {
  background-color: #CFD8DC;
}
/* FIN BURGER */


 /*   ******************* Home Page ******************** */

 .baseline h2 {
     color: black;
 }

 #partie2,
 #partie3,
 #partie5 {
     width: 83vw;
     margin-left: auto;
     margin-right: auto;
     display: -webkit-box;
     display: -ms-flexbox;
     display: flex;
     -webkit-box-orient: horizontal;
     -webkit-box-direction: normal;
     -ms-flex-direction: row;
     flex-direction: row;
     flex-wrap: wrap;
     -webkit-box-pack: justify;
     -ms-flex-pack: justify;
     justify-content: space-between;
     margin-top: 6%;
     background-color: var(--white);
     padding: 1.5%;
     border-radius: 10px;
 }

 .partiegauche{
     width: clamp(280px, 40%, 88vw);
     text-align: justify;
     margin-left: auto;
     margin-right : auto;
 }

 .partiedroite{
     width: clamp(280px, 40%, 88vw);
     margin-left: auto;
     margin-right: auto;
     align-items: center;
     margin-bottom : 1vh;
 }

 .troisphotos {
     width: clamp(280px, 40%, 88vw);
     margin-left: auto;
     margin-right: auto;
 }

.troisphotos img{
    padding : 1%;
}

 .image {
     margin-left : auto;
     margin-right : auto;
     padding : 3%;
 }



#droitepassants{
    min-width : 90%;
    display : flex;
    flex-direction: row;    
}

#droitepassants1{
   width : 30%;
}

#droitepassants2{
    width : 60%;
    margin-right : 10%;

}

.orientation{
    min-width: 320px;
    display : flex;
}

 /*  *******************  Fin HomePage *********************  */

 /*   *************   SLIDER Home  *********  */

 div#slider figure img {
     width: 20%;
     height: auto;
     float: left;
 }

 div#slider {
     max-width: 1100px;
     min-width: 300px;
     overflow: hidden;
     margin-left: 5vw;
 }

 @keyframes slidy {
     0% {
         left: 0%;
     }

     20% {
         left: 0%;
     }

     25% {
         left: -100%;
     }

     45% {
         left: -100%;
     }

     50% {
         left: -200%;
     }

     70% {
         left: -200%;
     }

     75% {
         left: -300%;
     }

     95% {
         left: -300%;
     }

     100% {
         left: -400%;
     }
 }

 div#slider figure {
     position: relative;
     width: 500%;
     margin: 0;
     padding: 0;
     font-size: 0;
     left: 0;
     text-align: left;
     -webkit-animation: 20s slidy infinite;
     animation: 20s slidy infinite;
 }

 html {
     font-family: 'Raleway', sans-serif;
 }

 body {
     background-color: var(--grisclair);
     min-height: 100vh;
     -webkit-box-sizing: border-box;
     box-sizing: border-box;
 }

 /*    ***************Categories (pages) *********************  */

 #page {
     width: 100vw;
     display: flex;
     justify-content: space-between;
     flex-wrap: wrap;
     text-align: justify;
     min-height :120vh;
 }

 #partiegauche {
     width: 20vw;
     min-width: 280px;
     margin-left: auto;
     margin-right: auto;
     padding: 2%;
     text-align: center;
     margin-top: 5vh;
 }

 #partiedroite {
     width: 68vw;
     min-width: 300px;
     margin-left: auto;
     margin-right: auto;
     margin-top: clamp(1%, 19vh, 20%);
 }

 .service h4 {
     font-style: italic;
     text-align: center;
 }

 .service p {
     margin-bottom: 0.5vh;
 }

 #textepage h4 {
     margin-bottom: 1vh;
     margin-top: 4vh;
 }

 *[class^="chemin"] {
     height: auto;
     font-size: clamp(1.3rem, 3.5vw, 2rem);
     color: var(--white);
     padding-left: 4%;
     margin-bottom: 5vh;
     border-top-left-radius: 10px;
 }

 /*   ********** Mentions légales  ********  */

 /*  ******************   Nos valeurs  *******  */

 .nuage {}


 /*  **************  Formulaire et adresses + google Map **********************  */

 /*    ****************** boutons  *********  */

 .boutonform {
     height: 5%;
     font-size: 1.3rem;
     border: 1px solid var(--vert);
     margin-top: 1%;
     background-color: var(--white);
 }

 #formlocal {
     display: flex;
     justify-content: space-between;
     margin-right: 3vw;
     margin-bottom: 5vh;
     flex-wrap: wrap;
 }

 #formulaire {
     min-width: 300px;
 }

 #localiser {
     width: 45%;
     min-width: 280px;
 }

 .titreform {
     float: left;
     width: 100%;
     padding-right: 10px;
 }

 textarea,
 select {
     width: 100%;
     border-radius: 5px;
     border: 1px solid var(--vert);
 }

 /*label {
     min-width: 50%;
 } */


 input {
     display: inline;
     float: right;
     height: 2.5vh;
     border: 0;
     border-radius: 5px;
     margin-bottom: 2.5vh;
     min-width : 60%;
 }

 .civilite {
     display: flex;
     justify-content: space-between;
     width: 60%;
 }

 .civilite .saisie {
     min-width: 20%;
 }

 h6 {
     margin: 0;
 }

 .saisie {
     width: 100%;
     display: flex;
     justify-content: space-between;
 }

 fieldset {
     font-family: 'Quicksand', arial, sans-serif;
     border-radius: 10px;
     margin-bottom: 4%;
 }

 #objetdemande {
     height: 50%;
     width: 100%;
 }

 /*  **************  Fin Formulaire...   **********************  */

 /*  **************  Footer   **********************  */

 #footer1 {
     display: block;
     min-width: 320px;
 }

 .footerlibre {
     width: 100%;
     max-height: 12vh;
     display: flex;
     flex-direction: row;
     justify-content: space-between;
     background-color: var(--vert);
     margin-top : 3vh;
 }

 .footergauche,
 .footerdroit {
     display: flex;
     width: 25%;
 }

 .margegauche {
   width: clamp(1px, 25%, 20vw); 
 }

 .infooterlogo,
 .footersocial {
     width: 20%;
     height: auto;
     display: flex;
     flex-direction: column;
     justify-content: space-around;
 }

 .infooterlogo img {
     height: 60%;
     width: 50%;
     min-width: 65px;
 }

 .footersocial img {
     width: 15%;
     min-width: 30px;
 }

 .infooter a {
     text-decoration: none;
     color: var(--white);
 }

 /*  ***************** Contact & Création de cpte  ********  */

 #pageform {
     width: 100%;
     height: 70vh;
     display: -webkit-box;
     display: -ms-flexbox;
     display: flex;
     -webkit-box-orient: horizontal;
     -webkit-box-direction: normal;
     -ms-flex-direction: row;
     flex-direction: row;
     -webkit-box-pack: justify;
     -ms-flex-pack: justify;
     justify-content: space-between;
 }

 #formgauch {
     display: -webkit-box;
     display: -ms-flexbox;
     display: flex;
     -webkit-box-orient: vertical;
     -webkit-box-direction: normal;
     -ms-flex-direction: column;
     flex-direction: column;
 }

 .titregauch {
     margin-bottom: 3vh;
 }

 .titredroit {
     width: auto;
     margin-bottom: 3vh;
 }

 #civilite {
     margin-left: 60%;
     display: -webkit-box;
     display: -ms-flexbox;
     display: flex;
     -webkit-box-pack: justify;
     -ms-flex-pack: justify;
     justify-content: space-between;
 }

/*     *****     Media Queries     *****     */
/*********************************************/
/*********************************************/

@media screen and (max-width:700px) {
    
    .hamburger-menu{
        display : block;
    }
    
    .menu{
        display : none;
    }
    
}