* {
    margin: 0;
    padding: 0;
}

:root {

    --titleText: rgb(63, 140, 205);
    --grayText: rgb(100, 100, 100);

}

@font-face {
    font-family: 'caviar'; font-display: swap;
    src: url('Fonts/caviardreams-webfont.woff2') format('woff2'),
      url('Fonts/caviardreams-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'kley'; font-display: swap;
    src: url('Fonts/Kleymisska.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'modern'; font-display: swap;
    src: url('Fonts/modernsans-light-webfont.woff2') format('woff2'),
      url('Fonts/modernsans-light-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'roboto'; font-display: swap;
    src: url('Fonts/roboto-regular-webfont.woff2') format('woff2'),
      url('Fonts/roboto-regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'robotol'; font-display: swap;
    src: url('Fonts/roboto-thin-webfont.woff2') format('woff2'),
      url('Fonts/roboto-thin-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'baskerville'; font-display: swap;
    src: url('Fonts/baskerville-old-face-webfont.woff2') format('woff2'),
      url('Fonts/baskerville-old-face-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'annabelle'; font-display: swap;
    src: url('Fonts/annabelle-webfont.woff2') format('woff2'),
      url('Fonts/annabelle-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

html {
    scroll-behavior: smooth;
}

body {

    font-size: 1.4rem;
    color: var(--grayText);
    font-family: 'caviar';
    background-color: rgb(255, 255, 255);

}

a {
    text-decoration: none;
    color: var(--grayText);
}

h1 {

    color: var(--titleText);
    text-align: center;
    padding-bottom: 60px;
    font-family: 'baskerville';
    font-weight: 800;
    font-size: 2.7rem;
    text-transform:uppercase;

}

h2 {

    color: var(--titleText);
    text-align: center;
    padding-bottom: 10px;
    font-family: 'baskerville';
    font-size: 1.5rem;
    text-transform:uppercase;

}

hr {

    max-width: 600px;
    width: 99%;
    margin: auto;
    border-top: 2px dashed;
    border-bottom: none;

}

.kleyFont{

    font-family: 'kley';
    font-size: 2.5rem;

}

.modernFont{

    font-family: 'modern';
    font-size: 2rem;
    font-weight: 400;

}

.signature {

    font-family: 'annabelle';
    font-size: 1.4rem;
    text-align: center;

}

.container {
    max-width: 1200px;
    margin: auto;
}

.centertext {
    color: rgb(20, 20, 20);
    text-align: center;
    font-size: 1.8rem;
}

.paddingTop100 {

    padding-top: 100px;

}

.paddingTop20 {

    padding-top: 20px;
}

.paddingTop40 {

    padding-top: 40px;
}

.textCenter {

    text-align: center;

}

.video-button {

    background-color: rgba(1, 1, 1, 0);
    border: none;
    cursor: pointer;
}

.hidden {

    display: none !important;

}

.active {

    border-bottom: 3px var(--titleText) solid;

}

.imagetop {
    padding-top: 100px;
}

#bandeau  {

    position: fixed;
    width: 100%;
    height: 100px;
    box-shadow: 0 0 10px rgb(71, 71, 71);
    background-color: white;
    z-index: 2000;
    font-weight: 100;
    
}

#bandeauflex {

    display: flex;
    justify-content: space-between;
    max-width: 1200px;
    width: 100%;
}

#bandeau #logo {

    padding-top: 10px;
    padding-left: 10px;
    min-width: 170px;
    min-height: 80%;
}

#bandeau #logo img {

    float: left;
    width: 140px;
    padding-top: 4px;

}


@-webkit-keyframes text2Anim { from { opacity: 0;} to {  opacity: 1;}}
@keyframes text2Anim { from {  opacity: 0} to {  opacity: 1;}}

#bandeau #menupc {

    display: block;
    min-width: 400px;
    height: 100px;

    -webkit-animation: 1.5s ease-in-out 0s text2Anim;
    animation: 1.5s ease-in-out 0s text2Anim;
    
}

#bandeau #buttonBurger {

    margin-top: 10px;
    width: 60px;
    height: 60px;

}

#bandeau #iconeBurger {

    width: 60px;
    height: 60px;

}

#menumobile {

    display: none;
    width: 180px;
    background-color: rgba(0, 0, 0, 0.747);
    position: absolute;
    top: 80px;
    right: 0px;

    -webkit-animation: 0.5s ease-in-out 0s menumove;
    animation: 0.5s ease-in-out 0s menumove;

}

@-webkit-keyframes menumove { from { margin-right:-30%; opacity: 0;} to { margin-right: 0%; opacity: 1;}}
@keyframes menumove { from { margin-right:-30%; opacity: 0} to { margin-right: 0%; opacity: 1;}}

#bandeau #menumobile li {

    border-bottom: 1px dashed white;
    width: 180px;
    text-align: center;
}

#bandeau #menumobile li a {

    font-family: 'baskerville';
    display: inline-block;
    color: rgb(201, 201, 201);
    font-size: 1.8rem;
    width: 100%;
    height: 100%;
    padding: 10px 0 10px 0;
    transition: 0.5s;
    text-transform: capitalize;

}

#bandeau #menumobile li a:hover {


    background-color: white;
    color: black;

}


#bandeau #menumobile #menumobileflex {

    display: flex;
    flex-direction: column;
    list-style: none;
    align-items: center;

}

#bandeau #menumobile img {

    height: 30px;
}

#bandeau #menupc #menupcflex {

    display: flex;
    flex-direction: row;
    list-style: none;
    align-items: center;
    height: 100%;
   

}

#bandeau #menupc #menupcflex li {

    align-items: center;
    padding: 0 4% 0 4%;
    height: 100%;
    

}
    
#bandeau #menupc #menupcflex li a {

    font-family: 'baskerville';
    display: inline-block;
    width: 100%;
    transition: 0.5s;
    font-size: 2rem;
    margin-top: 30px;
    text-transform: capitalize;

}

#bandeau #menupc #menupcflex li a:hover {

    scale: 1.2;
    transition: 0.5s;

}

#bandeau #sound-button-pc {

    margin-top: 10px ;
    
}


#bandeau #iconesMobile {

    display: none;
    justify-content: space-between;
    align-items: center;
    width: 80px;
}

#bandeau .mobileMention {

    margin-right: 0px !important;

}

#bandeau .sound-button img {

    height: 30px;
    margin-top: 25px;
    
}

/* SECTION APROPOS */

#apropos {

    padding-top: 130px;
    margin-top: -20px;

}

#apropos #aproposFlex {

    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    max-width: 95%;
    margin-top: 20px;
    
}

#apropos #aproposFlex img {

    max-width: 650px;
    min-width: 30%;
    margin-bottom: 90px;

}

#apropos #aproposFlex div {

    max-width: 400px;
    min-width: 40%;
    padding-left: 5%;
}

#apropos #aproposFlex div p:last-child{

    padding-top: 10%;
}

#apropos .signature {

    font-family: 'annabelle';
    font-size: 1.6rem;
    text-align: center;

}
/* SECTION TARIFS */

#tarifs {

    padding-top: 140px;
    
}

#tarifs #coursPerso {

    font-family: 'modern';
    font-size: 2rem;

}

#tarifs #jours {

    font-size: 2rem;

}

#tarifs #tarifHr {

    
    margin-top: 30px;
    margin-bottom: 30px;

}

#tarifs #flexCommentaires {

    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    width: 80%;
}

#tarifs #flexCommentaires div{

    padding: 2%;
    max-width: 350px;
    font-size: 1.2rem;
    text-align: center;
    margin-top: 10px;
}

#tarifs #commentaires img{

    width: 120px;
    

}

#tarifs #commentaires p{

    padding-top: 10px;
    
}

/* SECTION CONTACT */

#contact {

    padding-top: 140px;
    
}

#contact #confirmMess {

    text-align: center;
    color: rgb(35, 141, 44);
    font-size: 1.5rem;
    font-weight: 600;
}

#contact #flexContact input::placeholder, #contact #flexContact textarea::placeholder {
    color: rgb(133, 133, 133);
}

#contact #flexContact #introContact {

    font-size: 1.2rem;
    font-weight: 100;
    font-style: italic;
    font-family: 'modern';
    margin-bottom: 15px;
}

#contact #flexContact {

    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    width: 100%;
}

#contact #flexContact input, #contact #flexContact textarea{

    font-family: 'caviar';
    font-size: 1.2rem;
    padding: 2px;
    background-color: rgb(231, 231, 231);
    border: none;

}

#contact #flexContact textarea {

    max-width: 390px;
    max-height: 350px;
    width: 300px;
    min-height: 130px;
    min-width: 300px;

}

#contact #flexContact input:focus, #contact #flexContact textarea:focus{

    border: none;
    outline: rgb(145, 145, 145) solid 1px;
}

#contact #flexContact .flexElementContact {

    max-width: 550px;
    padding: 20px;
    
}

#contact #flexContact .labelDefaut {

    font-family: 'roboto';
    font-weight: 500;
    font-size: 1.2rem;
    width: 550px;
    padding: 10px;

}

#contact #flexContact .inlineblock label {

    display: inline-block;
    width: 150px;
    vertical-align: top;
}


#contact #flexContact .labelDefaut input {

    width: 300px;

}


#contact #flexContact #blockElement input {

    accent-color: rgb(102, 102, 102);
    outline: none;
}

#contact #flexContact #boutonsForm {

    margin-top: 20px;
    text-align: center;
    margin-left: 80px;

}

#contact #flexContact #boutonsForm .boutonform {

    
    font-family: 'roboto';
    width: 150px;
    height: 40px;
    border-radius: 7px;
    cursor: pointer;
    color: rgb(100, 100, 100);
    
    

}

#contact #flexContact #boutonsForm .boutonform:hover {

    transition: 0.5s;
    background-color: rgb(73, 73, 73);
    color: white;

}

#contact #flexContact #linkContact a {

    display: block;
    margin: 20px 20% 0 20%;
    width: 240px;
    
}
#contact #flexContact #linkContact a:first-child {

    padding-top: 20px;

}

#contact #flexContact #contactInfos p {

    text-align: center;
    font-family: 'roboto';
    font-size: 1.3rem;
    margin-top: 15px;

}

#contact #flexContact #linkContact a p {

    display: inline-block;
    width: 100px;
    font-family: 'roboto';
    font-size: 1.5rem;
    padding-left: 20px;
    vertical-align: top;
}

#contact #flexContact #linkContact img{

    width: 40px;

}

/* FOOTER */

footer {

    margin-top: 70px;
    background-color: rgb(231, 231, 231);

}

footer div {

    padding-right: 10px;
    text-align: right;
    font-family: 'robotol';
    font-size: 1.5rem;
    

}

footer hr {

    max-width: 99%;
    margin-top: 35px;
    width: 99%;
    border-top: 1px dashed;
    
}

footer p {

    text-align: center;
    font-size: 1.2rem;
    padding-top: 1px;
}

footer #linkFoot {

    margin-top: -25px;
}

footer #linkFoot a {

    display: inline-block;
    font-size: 1.2rem;
    margin-left: 40px;
    transition: 0.5s;
}

footer #linkFoot a:hover {

    scale: 1.2;
    transition: 0.5s;


}

footer #linkFoot img {

    width: 30px;
    vertical-align: bottom;

}

footer #icons {

    text-align: left;
    padding-top: 35px;
    padding-left: 20px;
    font-size: 0.9rem;
    font-family: sans-serif;
    
}

footer a:hover {

    color: black;

}

/* PAGE MENTION LEGALE */

#mentionlegale {

    font-family: 'robotol';
    font-size: 1.5rem;
}

#mentionlegale #textlegale {

    padding: 140px 15px 0 15px;
    max-width: 1000px;


}

#mentionlegale h1 {

    font-family: 'roboto';
    color: rgb(99, 99, 99);
    font-size: 2.5rem;

}

#mentionlegale h2 {

    font-family: 'roboto';
    color: rgb(99, 99, 99);
    padding-top: 50px;
    margin-bottom: 20px;
    font-size: 1.6rem;

}

/* ANIMATION AU SCROLL */

.reveal-loaded .reveal [class*="reveal-"] {
    opacity: 0;
    transform: translateY(60px);
}

.reveal-loaded [class*="reveal"]{
    transition: 1s cubic-bezier(.5, 0, 0, 1);
}

/* On ajoute du délai */

.reveal-loaded .reveal-1 {
    transition-delay: .2s;
}

.reveal-loaded .reveal-2 {
    transition-delay: .4s;
}

.reveal-loaded .reveal-3 {
    transition-delay: .5s;
}

.reveal-loaded .reveal-4 {
    transition-delay: .6s;
}

.reveal-loaded .reveal-5 {
    transition-delay: .7s;
}

.reveal-loaded .reveal-6 {
    transition-delay: .8s;
}

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

    #apropos #aproposFlex img {

        min-width: 22%;
        
    }

}

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

    body {

        font-size: 1.2rem;

    }

    

}

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

    #apropos #aproposFlex img {

        min-width: 20%;
        max-width: 500px;
        
    }
    

}

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

    body {

        font-size: 1.1rem;

    }

}

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

    .centertext {

        font-size: 1.4rem;

    }


    .imagetop {
        padding-top: 80px;
    }

    #menumobile {

        display: block;

    }

    #bandeau #menupc {

        display: none;

    }

    #bandeau #iconesMobile {

        display: flex;

    }

    #bandeau  {

        height: 80px;           
    }

    #bandeau #logo {

        min-width: 130px;

    }
    
    #bandeau #logo img {
    
        width: 100px;
        padding-top: 2px;
    
    }
    


    #apropos #aproposFlex img {

       max-width: 400px;
       margin-bottom: 50px;

    }
    
    #apropos #aproposFlex div {

        max-width: 550px;
        min-width: 50%;
        padding-left: 5%;
    }
    
}

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

    .imagetop {
        padding-top: 60px;
    }

    .centertext {

        font-size: 1rem;

    }

    #bandeau  {

        height: 60px;           
    }

    #bandeau #logo {

        min-width: 100px;
        padding-top: 5px;

    }
    
    #bandeau #logo img {
    
        width: 80px;
        padding-top: 0px;
    
    }
    

    #bandeau #buttonBurger {

        margin-top: 5px;
        width: 40px;
        height: 40px;
    
    }
    
    #bandeau #iconeBurger {
    
        width: 40px;
        height: 40px;
    
    }


    #bandeau #iconesMobile {
  
        width: 60px;
        
    }

    #menumobile {

        top: 60px;

    }
    
    h1 {
    
        
        font-size: 2.3rem;
        text-transform:uppercase;
        padding-bottom: 30px;
    
    }
    
    h2 {
           
        font-size: 1.3rem;
        
    
    }

    #apropos #aproposFlex {

        margin-top: 0px;

    }

    #apropos {

       padding-top: 90px;
       margin-top: -10px;

    }

    #tarifs, #contact {

        padding-top: 70px;

    }

    .modernFont {

        font-size: 1.8rem;
    }

    #tarifs #coursPerso {

        font-size: 1.6rem;

    }

    #tarifs #jours {

        font-size: 1.6rem;

    }

    #contact #flexContact .flexElementContact {

        max-width: 380px;

    }

    #contact #flexContact .labelDefaut {

        width: 380px;
        font-size: 1rem;

    }

    #contact #flexContact .inlineblock label {

        width: 115px;

    }

    #contact #flexContact .labelDefaut input {

        width: 250px;

    }

    #contact #flexContact textarea {
        max-width: 250px;
        max-height: 250px;
        width: 250px;
        min-height: 130px;
        min-width: 250px;
      }

      #contact #flexContact input, #contact #flexContact textarea {

        font-size: 1rem;

      }

      #contact #flexContact #boutonsForm {

        margin-left: 40px;

      }

      #contact #flexContact #linkContact a {

        margin: 20px 10% 0 10%;

      }

      #contact #flexContact #linkContact a p {

        font-size: 1rem;
        margin-top: 10px;

      }

      #contact #flexContact .flexElementContact iframe {

        width: 380px;
        height: 380px;

      }

      #contact #flexContact #contactInfos p {

        font-size: 1.1rem;

      }

      footer {

        margin-top: 50px;

      }

      footer #linkFoot {

        display: flex;
        flex-direction: column;
        align-items: end;

      }

      footer #linkFoot a {

        padding-top: 5px;
        width: 190px;

      }

      footer p {

        font-size: 1rem;
       
      }

      footer #icons {

        padding-top: 20px;
        font-size: 0.8rem;

      }

      footer hr {

        margin-top: 24px;

      }

}

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

    #apropos #aproposFlex img {

        max-width: 320px;
        margin-top: 20px;

    }
    
    h1 {
    
        
        font-size: 2.2rem;
        text-transform:uppercase;
        padding-bottom: 20px;
    
    }
    
    h2 {
           
        font-size: 1.2rem;
        
    
    }

    #apropos {

        padding-top: 70px;
        margin-top: 0px;

    }

    #tarifs, #contact {

        padding-top: 70px;

    }

    .modernFont {

        font-size: 1.6rem;
    }

    .centertext {

        font-size: 0.8rem;
        
    }

    #tarifs #coursPerso {

        font-size: 1.2rem;

    }

    #tarifs #jours {

        font-size: 1.2rem;
        padding: 0 10px 0 10px;

    }

    #tarifs #flexCommentaires div {

        padding: 1%;
        font-size: 1rem;
        margin-top: 8px;

      }

    #contact #flexContact .flexElementContact {

        max-width: 280px;

    }

    #contact #flexContact .labelDefaut {

        width: 220px;
        padding: 5px;

    }

    #contact #flexContact .inlineblock label {

        width: 110px;

    }

    #contact #flexContact .labelDefaut input {

        width: 220px;

    }

    #contact #flexContact textarea {
        max-width: 220px;
        max-height: 200px;
        width: 220px;
        min-height: 130px;
        min-width: 220px;
      }


      #contact #flexContact #boutonsForm {

        margin-left: 0px;

      }

      #contact #flexContact #linkContact img {

        width: 30px;

      }

      #contact #flexContact #linkContact a {

        margin: 20px 5% 0 5%;

      }

      #contact #flexContact #linkContact a p {

        font-size: 0.8rem;
        margin-top: 5px;

      }

      #contact #flexContact .flexElementContact iframe {

        width: 250px;
        height: 250px;

      }

      #contact #confirmMess {

        font-size: 1rem;
        font-weight: 600;
        
    }

      footer #linkFoot {

        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;

      }

      footer #linkFoot a {

        padding-top: 5px;
        width: 190px;
        padding-left: 0px;
        margin-left: 0;

      }

      #contact #flexContact #contactInfos p {

        font-size: 0.8rem;

      }

      footer {

        margin-top: 40px;
        
      }

      footer p {

        font-size: 0.6rem;
       
      }

      footer div {

        padding-right: 0;

      }

      footer #icons {

        
        font-size: 0.7rem;
        text-align: center;
        position: relative;
        top: 70px;
        padding-left: 0;

      }

      footer hr {

        margin-top: 35px;

      }
      
      #contact #flexContact #boutonsForm .boutonform {

        width: 110px 

      }

      #contact #flexContact #introContact {
        font-size: 1rem;
        margin-left: 10px;

      }


      #mentionlegale {

        font-size: 1rem;

        }
    
        #mentionlegale h1 {
    
        font-size: 1.5rem;
    
        }
    
        #mentionlegale h2 {
    
        font-size: 1.2rem;
    
        }

        #bandeau .mobileMention {

            width: 55px !important;
            
        }


}

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

    #bandeau #logo {

        padding-left: 0px;
        padding-top: 7px;
        min-width: 185px;

    }

    #bandeau #logo .logoText1 {

        position: relative;
        left: -10px;
        font-size: 0.8rem;
        padding-top: 5px;

    }

    #bandeau #logo .logoText2 {

        font-size: 1.2rem;
        position: relative;
        margin-top: 0px;
        left: -10px;
        
    }

    #bandeau #buttonBurger {

        margin-top: 8px;

    }

}