
*{
    text-decoration: none;
}

body{
    overflow-x: hidden;
}


#accueil #reseauxsociaux{
    position: sticky;
    top: 5vh;
    width:max-content;
    margin-left:auto;
    margin-right: 5vh;
}

#accueil #reseauxsociaux a{
    display: block;
    margin: 6px;
    padding: 6px;
    background-color: blue;
}

#accueil #reseauxsociaux a span{
    display: block;
    background-color: #CC618D;
    width: 36px;
    height: 36px;
    border-radius: 100%;
}

#accueil{
    background-color: #CC618D;
    height: 100vh;
    padding: 31px;
    position: relative;
    z-index: 999;
}

#accueil section{
    background-color: white;
    border: black solid 4px;
    height: 100%;
    width: 100%;
    display:flex;
    align-items: center;
    justify-content: space-around;
}

#accueil section aside{
    background-color: white;
    width: 28%;
    border: black solid 4px;
    height: 80%;
    padding: 3%;
    color: #CC618D;
    box-shadow: 14px 14px 0px 0px rgba(204,97,141,1);
-webkit-box-shadow: 14px 14px 0px 0px rgba(204,97,141,1);
-moz-box-shadow: 14px 14px 0px 0px rgba(204,97,141,1);
display: flex;
    flex-direction: column;
    justify-content: space-between;
}

#accueil section aside p{
    font-family: Valizas;
    font-weight: 900;
    font-style: italic;
    font-size: 21px;
}

#accueil section aside .accueilspantraits{
    display: block;
    height: 3px;
    width: 100%;
    background-color: #CC618D;
    margin: 14px 0;
}

#accueil section aside h1{
    font-family: BouhR;
    font-weight: 900;
    font-size: 3vw;
    line-height: 3vw;
    margin: 0;
}

.navfillcolor{
    fill: #E69EBF;
}

/*#accueil section aside h1 #h11{
    font-size: 4vw;
    line-height: 3vw;
}

#accueil section aside h1 #h12{
    font-size: 4vw;
    line-height: 1vw;
}*/

#accueil section aside div p{
    font-weight: 600;
    font-style: italic;
    font-size: 14px;
}

#accueil section aside #accueilbutton{
    display: flex;
    flex-direction: column;
}

#accueil section aside #accueilbutton button,
#accueilbuttonmobile button{
    border: none;
    background-color: #CC618D;
    padding: 21px;
    margin: 6px;
    color: white;
    font-family: Valizas;
    font-weight: 600;
    font-style: italic;
    font-size: 18px;
    width: 100%;
    border-radius: 1080px;
    cursor: pointer;
}

#accueil section aside #accueilbutton button:hover{
    transform: scale(1.1);
}





#accueil section nav{
    width: 60%;
    height: 80%;
    display: flex;
    flex-direction: column;
    justify-content: center;
/*    background-color: pink;*/
}


#accueil section nav div{
    display: flex;
/*    background-color: blue;*/
    align-items: center;
}

#accueil section nav div h2{
    font-family: BouhR;
    font-weight: 900;
    font-size: 6vw;
    color: black;
  /*  margin-top: -2vw;
    padding: auto;*/
}

/*#lemag h2,
#apropos h2{
    font-size: 8vw;
}*/



#accueil section nav h2:hover {
  color: pink;
}

#accueil section nav h2[data-color="blue"]:hover {
  color: blue;
}

#accueil section nav h2[data-color="red"]:hover {
  color: red;
}

#accueil section nav h2[data-color="green"]:hover {
  color: black;
}







#accueil section nav div svg,
#accueil section nav div div svg{
    height: 6vw;
    display: none;
}

#accueil section nav div div{
/*    background-color: green;*/
    display: flex;
    flex-direction: column;
}

#accueil section nav div div h2,
#accueil section nav div p{
    font-family: BouhR;
    font-weight: 900;
    font-size: 4vw;
    margin-top: -1vw;
}

#accueil section nav div:hover svg{
    display: block;
}

#accueilbuttonmobile{
    display: none!important;
}
























#faitentendretavoix #hypnosevoix{
    height: 100vh;
    width: 100vw;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
/*    position: sticky;*/
    top: 0;
}

#faitentendretavoix #hypnosevoix svg{
    margin: auto;
    display: block;
    position: absolute;
    z-index: -1;
}

#faitentendretavoix #masquevoix{
    width: 92%;
    fill: white;
}

#faitentendretavoix #hypnosevoix svg:nth-child(2){
    width: 40vw;
    fill: #FA9DC0;
  animation: rotating 120s linear infinite;
}
#faitentendretavoix #hypnosevoix svg:nth-child(3){
    width: 50vw;
    fill: #394F92;
  animation: rotating 210s linear infinite reverse;
}
#faitentendretavoix #hypnosevoix svg:nth-child(4){
    width: 62vw;
    fill: #E3A82F;
  animation: rotating 90s linear infinite;
}
#faitentendretavoix #hypnosevoix svg:nth-child(5){
    width: 76vw;
    fill: #5292C4;
  animation: rotating 360s linear infinite reverse;
}
#faitentendretavoix #hypnosevoix svg:nth-child(6){
    width: 93vw;
    fill: #CD608E;
  animation: rotating 60s linear infinite;
}
#faitentendretavoix #hypnosevoix svg:nth-child(7){
    width: 113vw;
    fill: #394F92;
  animation: rotating 90s linear infinite reverse;
}






@keyframes rotating {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

#faitentendretavoix img{
    width: 25vw;
    -webkit-animation: pulsate-bck 2s ease-in-out infinite both;
            animation: pulsate-bck 2s ease-in-out infinite both;
}

@-webkit-keyframes pulsate-bck {
  0% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
  50% {
    -webkit-transform: scale(0.9);
            transform: scale(0.9);
  }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}
@keyframes pulsate-bck {
  0% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
  50% {
    -webkit-transform: scale(0.9);
            transform: scale(0.9);
  }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}













#faitentendretavoix article{
    background-color: white;
    display: block;
    width: 100%;
    margin: auto;
    padding: 10vh 30% 0 30%;
}


#faitentendretavoix article p{
    font-size: 16px;
    color: black;
    font-family: Valizas;
    font-weight: 500;
    font-style: italic;
    padding: 12px 0;
}

#faitentendretavoix article div p{
    text-align: center;
}

#faitentendretavoix article div p:nth-child(1){
    font-weight: 600;
}
#faitentendretavoix article div p:nth-child(2){
    font-weight: 700;
}
#faitentendretavoix article div p:nth-child(3){
    font-weight: 800;
}
#faitentendretavoix article div p:nth-child(4){
    font-weight: 900;
}

#faitentendretavoixmobile{
                    display: none;
                }

#faitentendretavoixmobile{
    font-family: Valizas;
    width: 80%;
    margin: auto;
    padding: 10vh 36px 0 36px;
}

#faitentendretavoixmobile p{
    font-size: 16px;
    padding: 12px 0;
    text-align: justify;
}


/*****--**-----*****--|COPYWRITING ACCUEIL TABLETTE|-*****-----**--*****/
        @media (max-width: 960px){
                #faitentendretavoix{
                    display: none;
                }

                #faitentendretavoixmobile{
                    display: block;
                }

                #accueil section{
                    flex-direction: column;
                    justify-content: center;
                }

                #accueil section aside h1 {
                    font-size: 7vw;
                    line-height: 7vw;
                }

                #accueil section aside #accueilbutton {
                    margin-top: 2vh;
                }

                #accueil section aside {
                    width: 90%;
                    height: auto;
                    margin-bottom: 2vh;
                }

                #accueil section nav {
                    height: auto;
                    width: 90%;
                }

                #accueil section nav div h2 {
                    font-size: 11vw;
                    line-height: 11vw;
                }

          }
     /*****--**-----*****--|COPYWRITING ACCUEIL TABLETTE|-*****-----**--*****/

     /*****--**-----*****--|COPYWRITING ACCUEIL MOBILE|-*****-----**--*****/
           @media (max-width: 576px){

            #accueil{
                padding: 12px;
            }

            #faitentendretavoixmobile {
            width: 80%;
            padding: 5vh 0 0 0;
          }

          #accueil section aside {
            margin-top: -15vw;
            background-color: transparent;
            border: none;
            height: 80%;
            padding: 0 3%;
            box-shadow: none;
            -webkit-box-shadow: none;
            -moz-box-shadow: none;
            justify-content: inherit;
            margin: 0;
        }

#accueil section nav div h2 {
    font-size: 13vw;
    line-height: 12vw;
      }


      #accueilbutton{
        display: none!important;
      }

      #accueilbuttonmobile{
        display: block!important;
        width: 90%;
    margin-right: 11px;
    margin-bottom: 3vh;
      }

      #accueil section nav {
    padding-bottom: 8vw;
    padding-left: 3vw;
  }
}
     /*****--**-----*****--|COPYWRITING ACCUEIL MOBILE|-*****-----**--****/






















aside,
nav{
    z-index: 999;
}









#indexsection1{
    min-height: 100vh;
    display: flex;
    position: relative;
}

#indexsection1 h2{
    font-size: 8vw;
    font-family: BouhC;
    line-height: 7vw;
    transform: rotate(-25deg);
    width: fit-content;
    margin: auto;
    transition: 3s;
}

#indexsection1 p{
    position: absolute;
    bottom: 4vh;
    left: 4vh;
    max-width: 420px;
    font-family: Valizas;
    font-size: 16px;
    width: 80%;
}

#indexsection1:hover h2{
    color: #CC618D;
}









    /*****--**-----*****--|COPYWRITING ACCUEIL TABLETTE|-*****-----**--*****/
        @media (max-width: 960px){
                #indexsection1{
                    min-height: 60vh;
                }

                #indexsection1{
                    margin-top: -10vh;
                }

                #indexsection1 h2 {
                    font-size: 13vw;
                    line-height: 11vw;
                }

                #indexsection1 #h2tourne1{
                    padding-bottom: 10vh;
                }
          }
     /*****--**-----*****--|COPYWRITING ACCUEIL TABLETTE|-*****-----**--*****/

     /*****--**-----*****--|COPYWRITING ACCUEIL MOBILE|-*****-----**--*****/
           @media (max-width: 576px){
            }
     /*****--**-----*****--|COPYWRITING ACCUEIL MOBILE|-*****-----**--****/



















.indexsection2{
    height: 40vh;
    color: white;
    font-family: Valizas;
    display: flex;
    align-items: center;
    justify-content: center;
}

.indexsection2 h2{
    font-size: 3vw;
    font-weight: 900;
    background-color: white;
    padding: 12px 3vw;
    margin-left: -2vw;
    width: fit-content;
    transform: rotate(-2deg)
}

.indexsection2 p{
    font-size: 14px;
    max-width: 510px;
    padding: 6px 0 0 24px;
    line-height: 18px;
}

.indexsection2:hover h2{
    -webkit-animation: heartbeat 1.5s ease-in-out infinite both;
            animation: heartbeat 1.5s ease-in-out infinite both;
}

@-webkit-keyframes heartbeat {
  from {
    -webkit-transform: scale(1) rotate(-2deg);
            transform: scale(1) rotate(-2deg);
    -webkit-transform-origin: center center;
            transform-origin: center center;
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }
  10% {
    -webkit-transform: scale(0.91) rotate(-2deg);
            transform: scale(0.91) rotate(-2deg);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }
  17% {
    -webkit-transform: scale(0.98) rotate(-2deg);
            transform: scale(0.98) rotate(-2deg);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }
  33% {
    -webkit-transform: scale(0.87) rotate(-2deg);
            transform: scale(0.87) rotate(-2deg);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }
  45% {
    -webkit-transform: scale(1) rotate(-2deg);
            transform: scale(1) rotate(-2deg);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }
}
@keyframes heartbeat {
  from {
    -webkit-transform: scale(1) rotate(-2deg);
            transform: scale(1) rotate(-2deg);
    -webkit-transform-origin: center center;
            transform-origin: center center;
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }
  10% {
    -webkit-transform: scale(0.91) rotate(-2deg);
            transform: scale(0.91) rotate(-2deg);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }
  17% {
    -webkit-transform: scale(0.98) rotate(-2deg);
            transform: scale(0.98) rotate(-2deg);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }
  33% {
    -webkit-transform: scale(0.87) rotate(-2deg);
            transform: scale(0.87) rotate(-2deg);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }
  45% {
    -webkit-transform: scale(1) rotate(-2deg);
            transform: scale(1) rotate(-2deg);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }
}


/*****--**-----*****--|COPYWRITING ACCUEIL TABLETTE|-*****-----**--*****/
        @media (max-width: 960px){
                .indexsection2{
                    height: 30vh;
                }

                .indexsection2 h2 {
                    font-size: 51px;
                }

                .indexsection2 p {
                    font-size: 16px;
                }
          }
     /*****--**-----*****--|COPYWRITING ACCUEIL TABLETTE|-*****-----**--*****/

     /*****--**-----*****--|COPYWRITING ACCUEIL MOBILE|-*****-----**--*****/
           @media (max-width: 576px){
            .indexsection2 h2 {
                font-size: 6vw;
                margin-bottom: 6px;
            }

            .indexsection2 p{
                width: 80vw;
                padding: 0;
                text-align: justify;
            }
          }
     /*****--**-----*****--|COPYWRITING ACCUEIL MOBILE|-*****-----**--****/

















/*****--**-----*****--|ACCUEIL COUTEAU-SUISSE|-*****-----**--*****/
    #indexsection3{
        background-color: black;
        color: white;
        font-family: Valizas;
        text-align: center;
        padding: 5vh 0;
    }

    #indexsection3 div{
        display: flex;
        margin: auto;
        width: 50%;
        align-items: center;
        padding: 10vh 0;
    }

    #indexsection3 div img{
        padding: 36px;
        width: 60%;
    }

    #indexsection3 div div{
        display: block;
        width: 100%;
        padding: 0;
    }

    #indexsection3 div div p{
        font-weight: 500;
        padding: 6px 0;
        text-align: left;
        line-height: 21px;
    }

    #indexsection3 a{
        text-decoration:none;
        color: white;
    }

    #indexsection3 a p{
        background-color: #c76188;
        padding: 24px 36px;
        font-weight: 900;
        font-size: 36px;
        text-transform: uppercase;
        width: fit-content;
        margin: 0 auto 10vh auto;
        transition: 0.3s;
    }

    #indexsection3 a:hover p{
        transform: scale(1.1);
    }
     /*****--**-----*****--|ACCUEIL COUTEAU-SUISSE TABLETTE|-*****-----**--*****/
          @media (max-width: 960px){
                #indexsection3 div{
                    width: 70%;
                }

                #indexsecction3 div img{
                    width: 50%;
                }
          }
     /*****--**-----*****--|ACCUEIL COUTEAU-SUISSE TABLETTE|-*****-----**--*****/

     /*****--**-----*****--|ACCUEIL COUTEAU-SUISSE MOBILE|-*****-----**--*****/
           @media (max-width: 576px){
            #indexsection3 div{
                flex-direction: column-reverse;
                padding: 0 0 10vh 0;
            }

            #indexsection3 div img{
                padding: 36px;
                width: 70%;
            }

            #indexsection3 a p {
                background-color: #c76188;
                padding: 24px 0;
            }
          }
     /*****--**-----*****--|ACCUEIL COUTEAU-SUISSE MOBILE|-*****-----**--***
/*****--**-----*****--|ACCUEIL COUTEAU-SUISSE|-*****-----**--*****/




/*****--**-----*****--|ACCUEIL POURQUOI MOI|-*****-----**--*****/
    .indexsection4{
        font-family: Valizas;
        padding: 10vh 5vh;
        color: white;
    }

    .indexsection4 h3{
        font-size: 26px;
        margin-top: -5vh;
    }

    .indexsection4 .indexsection4colonne{
        display: flex;
        padding: 10vh 15% 48px 15%;
    }

    .indexsection4 .indexsection4colonne div{
        width: 50%;
    }

    .indexsection4 .indexsection4colonne div p{
        padding: 16px 32px;
        font-size: 14px;
    }

    .indexsection4 .indexsection4colonne div ul{
        width: 90%;
        padding-left: 10%;
        text-align: justify;
    }

    .indexsection4 .indexsection4colonne div ul li{
        font-size: 12px;
        line-height: 12px;
        padding: 6px 0;
    }

    .indexsection4 .indexsection4colonne div a{
        text-decoration: none;
        color: black;
    }

    .indexsection4 .indexsection4colonne div a p{
        background-color: white;
        padding: 16px 32px;
        font-size: 32px;
        font-weight: 900;
        text-transform: uppercase;
        text-align: center;
        margin-top: 36px;
        transition: 0.2s;
    }

    .indexsection4 .indexsection4colonne div a:hover p{
        transform: scale(1.1);
    }
    /*****--**-----*****--|ACCUEIL POURQUOI MOI TABLETTE|-*****-----**--*****/
          @media (max-width: 960px){
            .indexsection4 .indexsection4colonne {

                padding: 5vh 10% 0 10%;
            }
          }
    /*****--**-----*****--|ACCUEIL POURQUOI MOI TABLETTE|-*****-----**--*****/

    /*****--**-----*****--|ACCUEIL POURQUOI MOI MOBILE|-*****-----**--*****/
           @media (max-width: 576px){
            .indexsection4 {
                padding: 10vh 3vh 3vh 3vh;
            }

            .indexsection4 .indexsection4colonne{
                padding: 21px 0;
                flex-direction: column;
            }

            .indexsection4 .indexsection4colonne div {
                width: 100%;
            }

            .indexsection4 .indexsection4colonne div p {
                padding: 16px 21px;
            }

            .indexsection4 .indexsection4colonne div ul li {
                padding: 3px 0;
            }
          }
    /*****--**-----*****--|ACCUEIL POURQUOI MOI MOBILE|-*****-----**--****
/*****--**-----*****--|ACCUEIL POURQUOI MOI|-*****-----**--*****/


/*****--**-----*****--|ACCUEIL POURQUOI MOI FINAL|-*****-----**--*****/
    #indexsection5{
        min-height: 100vh;
        padding: 15vh 15vw;
    }

    #indexsection5 p b{
        font-family: BouhC;
        font-size: 5vw;
        color: #ca608b;
        line-height: 4vw;
    }

    #indexsection5 p:nth-child(1){
        padding-right: 20%;
    }

    #indexsection5 p:nth-child(2){
        padding-left: 20%;
        padding-top: 42px;
    }

    #indexsection5 div{
        display: flex;
        align-items: center;
        width: 60%;
        margin: 54px auto;
    }

    #indexsection5 div img{
        width: 40%;
        padding: 36px;
        overflow: visible;
        z-index: 99;
    }

    #indexsection5 div p{
        width: 60%;
        font-family: Valizas;
        color: #ca608b;
        padding-left: 0!important;
        padding-top: 0!important;
    }
    /*****--**-----*****--|ACCUEIL POURQUOI MOI FINAL TABLETTE|-*****-----**--*****/
          @media (max-width: 960px){
            #indexsection5 {
                min-height: auto;
                padding: 10vh 10vw;
            }

            #indexsection5 div img {
                padding: 21px;
            }
          }
    /*****--**-----*****--|ACCUEIL POURQUOI MOI FINAL TABLETTE|-*****-----**--*****/

    /*****--**-----*****--|ACCUEIL POURQUOI MOI FINAL MOBILE|-*****-----**--*****/
           @media (max-width: 576px){
            #indexsection5 p b {
                font-size: 29px;
                line-height: 29px;
            }

            #indexsection5 div {
                width: 100%;
                flex-direction: column;
            }

            #indexsection5 div p {
                width: 90%;
            }
          }
    /*****--**-----*****--|ACCUEIL POURQUOI MOI FINAL MOBILE|-*****-----**--****
/*****--**-----*****--|ACCUEIL POURQUOI MOI FINAL|-*****-----**--*****/




/*****--**-----*****--|ACCUEIL TARIFS|-*****-----**--*****/
    #indexsection6{
        border: black solid 36px;
        padding: 36px;
    }

    #indexsection6 h2{
        font-family: Valizas;
        background-color: #ca608b;
        text-transform: uppercase;
        font-size: 4vw;
        line-height: 4vw;
        font-weight: 900;
        text-align: justify;
        color: white;
        padding: 36px 72px;
    }

    #indexsection6 div{
        display: flex;
        font-family: Valizas;
        font-weight: 800;
        padding: 72px;
    }

    #indexsection6 div p{
        width: 60%;
    }

    #indexsection6 div a{
        width: 40%;
        text-decoration: none;
        transform: rotate(-4deg);
        transition: 0.2s;
    }

    #indexsection6 div a p{
        color: white;
        text-align: center;
        background-color: black;
        margin: auto;
        padding: 24px 36px;
        font-size: 21px;
        text-transform: uppercase;
    }

    #indexsection6 div a:hover{
        transform: scale(1.1) rotate(-4deg);
    }

    /*****--**-----*****--|ACCUEIL TARIFS TABLETTE|-*****-----**--*****/
          @media (max-width: 960px){
            #indexsection6 div{
                flex-direction: column;
            }

            #indexsection6 div p {
                width: 100%;
            }

            #indexsection6 div a {
                width: 100%;
                transform: rotate(-2deg);
            }
          }
    /*****--**-----*****--|ACCUEIL TARIFS TABLETTE|-*****-----**--*****/

    /*****--**-----*****--|ACCUEIL TARIFS MOBILE|-*****-----**--*****/
           @media (max-width: 576px){
            #indexsection6 {
                 border: black solid 21px;
                 padding: 0;
                }

                #indexsection6 h2 {
            font-size: 21px;
            line-height: 21px;
            padding: 6px;
          }

          #indexsection6 div{
            padding: 30px;
          }

          #indexsection6 div p {
            width: 100%;
            margin-bottom: 36px;
        }
      }
    /*****--**-----*****--|ACCUEIL TARIFS MOBILE|-*****-----**--****
/*****--**-----*****--|ACCUEIL TARIFS FINAL|-*****-----**--*****/

