/*Reset CSS*/
/* tous les "webkits" désactivés car non validés par W3C*/
*{
    margin: 0px;
    padding: 0px;
    /*color: #5c5681;*/
    /*font-family: Avenir, sans-serif;
    background-color: #89cabc;*/
}
.conteneur{
    display: flex;
    align-items: center;
    flex-direction: column;
    width: 80%;
    /*background-color: rgba(136,174,245,0.1);*/
    margin: auto;
}
header{
    display: flex;
    justify-content: space-between;
    width: 100%;
    height: auto;
    margin: auto;
    /* position: -webkit-sticky; */
    position: sticky;
    top: 0;
    z-index: 1;
    text-align: center;
    margin-bottom: 30px;
}
.home{
    margin: auto 0px;
    color: rgb(154,149,176);
    font-size: 2em;
}
.home img{
    width: 30px;
}
/* .logo{
    position: -webkit-sticky;
    position: sticky;
    top: 4.2em;
} */
.logo img{
    margin: 10px 0px 20px 0px;
    object-fit: cover;
}
.boncadeau{
    text-align: center;
}

h1{
    color: #74437e;
    font-size: 1.8em;
	text-align: center;
    margin-top: 1.5em;
    margin-bottom: 2em;
}
h2{
    color: darkmagenta;
    padding: 0px 0px 5px 20px;
}

/* h4 et h5 pour les mentions légales */
h4{
    font-size: 1.5em;
    color: rgb(154,149,176);
    text-decoration: underline;
}
h5{
    font-size: 1.2em;
    color: rgb(154,149,176);
}
p{
	font-size: 1.2em;
	padding: 0.8em 1em;
    text-align: justify;
    color: #5c5681;
}
.pcentre{
    text-align: center;
    font-weight: bold;
}
ul{
    color: #5c5681;
    list-style-type:none;
    padding-left: 40px;
    font-size: 1.2em;
    /*padding: 15px 20px;*/
}
span{
    color: darkmagenta;
    padding-right: 8px;
}

.credits {
    text-align: left;
    font-size: 12px;
    padding: 0;
}
.credits a {
    color: #a2adb8;
    font-style: italic;
} 
                                                                /* PAGE WORKSHOP */
.flex-workshop{
    display: flex;
    width: 100%;
}
.workshop-texte{
    display: flex;
    flex-direction: column;
    width: 75%;
    margin-right: 1em;
}
.workshop-img{
    display: flex;
    flex-direction: column;
    width: 25%;
}
.workshop-img img{
    border-radius: 20% 0;
    opacity: 70%;
}
.workshop-img img:hover{
    opacity: 100%;
}
                            /* lien mail*/
.workshop-texte span{
    color: darkmagenta;
}
.workshop-texte span.mail:before{
    content: ' \2709';
    font-size: 1.3em;
}
.workshop-texte a{
    text-decoration: underline;
    color: rgb(139,0,139);
    font-size: 1em;
}
.workshop-texte a:hover{
    opacity: 0.5;
    text-decoration: none;
}
.workshop-texte a img:hover{
    opacity: 0.5;
}

                                                                    /* EXERGUE */
.exergue{
    margin: 1em 0em;
    color: darkmagenta;
    font-style: oblique;
    font-size: 1.2em;
}
/* concerne citation blessing et fermeture en display none responsive*/
.exergue2{
    text-align: center;
    margin: 1.5em 0em;
    color: darkmagenta;
    font-style: oblique;
    font-size: 1.2em;
}
                                                                    /* DEPLACEMENT */

.deplacement{
    margin: 1.8em 0 1em 0;
    color: darkmagenta;
    font-style: oblique;
    font-size: 1em;
    text-align: center;
    padding: 0 0.5em;
}
.deplacement1{
    margin: 1.8em 1em 1em 1em;
    color: darkmagenta;
    font-style: oblique;
    font-size: 1em;
    text-align: center;
}

                                                                        /* NAVIGATION */

/* code trouvé chez Pierre GIRAUD https://www.pierre-giraud.com/html-css-apprendre-coder-cours/creation-menu-flexbox/ */
/*le 04/04/2021 j'ai remplacé les balises "button" par des div à cause de la validation w3.org qui n'admet pas des liens dans cette balise*/
nav{
    display: flex;
    width: 100%;
    border-bottom: 1px solid rgb(186, 182, 205);
    background-color: white;
    }
/* nav div{
    border-left: 1px solid rgb(154,149,176);
} */
    /* pour supprimer la 1ère bordure 
    = le button du 1er div de nav
    nav div:first-child div{
    border: none;
    }*/
    /*pour ajouter la dernière bordure 
    = le button du dernier div de nav*/
/* nav div:last-child div{
    border-right: solid 1px rgb(154,149,176);
    } */
.dropbtn {
    font-size: 20px;
    background-color: white;
    border: none;
    cursor: pointer;
    margin: 0px;
    width: 100%; /* Permet que le button soit entièrement cliquable */
}
.dropbtn a{
    text-decoration: none;
    color: rgb(154,149,176);
    display: block; /* j'ai ajouté cette propriété pour rendre toute la surface cliquable ; le survol était ok mais pas le clic*/
    padding: 10px;
    span {
        font-size: 13px;
        color: inherit;
        margin-left: 3px;
    }
}
.dropdown {
    position: relative;
    display: inline-block;
    /* width: 100%; /* permet que le déroulé soit à 100% du button*/
    height: auto;
}
.dropdown + .dropdown {
    margin-left: 1em;
}
.dropdown a:hover{
    color: rgb(243,237,244);
    background-color:rgb(208,193,211);
}
.dropdown-content {
    display: none;
    position: absolute;
    text-align: left;
    min-width: 300px;
    z-index: 1;
    width: 100%; /* permet que le déroulé soit à 100% du button*/
    border:1px solid rgb(154,149,176);
    left: 1px;
    border-top-width: 0;
    border-bottom-width: 0;
}
.dropdown-content a {
    display: block;
    color: rgb(154, 149, 176);
    font-size: 20px;
    background-color: white;
    padding: 12px 0px 12px 6px;
    text-decoration: none;
    border-top: solid 1px rgb(154,149,176);
}
/* pour mettre la bordure du bas du dernier lien du menu déroulant*/
.dropdown-content a:last-child{
    border-bottom: solid 1px rgb(154,149,176);
}
.dropdown-content a:hover {
    /*background-color: rgb(204, 201, 219);*/
    color: rgb(243,237,244); /*ne marche pas*/
}
.dropdown:hover .dropdown-content {
    display: block;
    color: rgb(204, 201, 219);/*ne marche pas*/
}
/*.dropdown:hover .dropbtn {
    background-color: rgb(208,193,211);
    transition: 1s;
}*/
                                                       /* PAGE ACTIVE */
.active{
    background-color: rgb(226,223,240);
    color: black;
}
.activesousmenu{
    color: rgb(139,0,139); /*darkmagenta*/
}

                                                                    /* VIGNETTES */
.gauche{
    display: flex;
    flex-direction: column;
    border-radius: 0% 50%;
}
.gauchefixe{
    display: flex;
    flex-direction: column;
    border-radius: 0% 50%;
    /*border: #74437e 1px solid;*/
    box-shadow: rgb(186, 182, 205) 10px 8px 8px;
}
.milieu{
    display: flex;
    flex-direction: column;
    border-radius: 50%;
}
.milieufixe{
    display: flex;
    flex-direction: column;
    border-radius: 50%;
    /*border: #74437e 1px solid;*/
    box-shadow: rgb(186, 182, 205) 10px 8px 8px;
}
.droite{
    display: flex;
    flex-direction: column;
    border-radius: 50% 0% ;
}
.droitefixe{
    display: flex;
    flex-direction: column;
    border-radius: 50% 0%;
    /*border: #74437e 1px solid;*/
    box-shadow: rgb(186, 182, 205) 10px 8px 8px;
}

                                                    /* page accueil 2 */

.flex-accueiltitre{
    display: flex;
    justify-content: space-between;
    width: 100%;
    margin: auto;
}
.accueiltitregauche{
    display: flex;
    width: auto;
}
.accueiltitremilieu{
    display: flex;
    width: auto;
    align-items: center;
}
.accueiltitredroite{
    display: flex;
    width: auto;
}
.flex-accueiltitre img {
    width:100%;
    height: auto;
    margin: auto;
    border-radius: 50%;
}
/* PARTIE PRINCIPALE EN TROIS SECTIONS */
.flex-principal{
    display: flex;
    flex-direction: column;
    width: 100%;
    margin:auto;
}
/* SECTION 1 : image à gauche / texte à droite */
.section1{
    display: flex;
    width: 100%;
    margin-top: 2em;
}
.section1 img{
    width: 20%;
}
.section1.texte1{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 80%;
}
/* SECTION 2 : texte / image / texte / image*/
.section2{
    display: flex;
    width: 100%;
    margin-top: 2em;
}
.section2 img{
    width: 90%;
    /*height: auto;*/
    margin: 0px 1.5em;
}
.section2.texte2{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 10%;
    height: auto;
}
/* SECTION 3 : texte à gauche / image à droite */
.section3{
    display: flex;
    width: 100%;
    margin-top: 2em;
}
.section3 img{
    width: 40%;
}
.section3.texte3{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 60%;
}

                                                    /* page accueil */

.main-title {
    margin-bottom: 20px;
}
.page-intro {
    font-size: 20px;
    text-align: center;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

.flex-accueil{
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    margin-top: 0px;
    /*margin-bottom: 40px;*/
}
.leftaccueil {
    display: flex;
    width: 15%;
    height: auto;
    /*margin: auto;*/
    box-sizing:border-box;
    justify-content: left;
}
.leftaccueil img{
    display: flex;
    width: 100%;
    /*margin: auto;*/
}
.middleaccueil{
    display: flex;
    flex-direction: column;
    width: 65%;
    margin: 0px 20px 0px 20px;
}
.middleaccueil img{
    margin-left: 50%;
    margin-top: 50px;
    width: 40px;
}
.rightaccueil{
    display: flex;
    width: 15%;
    justify-content: right;
}
.rightaccueil img{
    display: flex;
    width: 100%;
    /*margin: auto;*/
}
.bebeplume img{
    width: 300px;
}
.flex-FB{
    display: flex;
    margin: 0em 0em 0em 0em;
}
.logors img{
    width: 25px;
    padding-left: 20px;
    list-style-type:none;
}
div a img:hover{
    opacity: 0.5;
}
.exergueFB{
    color: darkmagenta;
    font-style: oblique;
    font-size: 1.2em;
    margin-top: 1.5em;
}
.logors img{
    margin-top: 1.5em;
}
                                                /* page accueil avec diaporama */
.flex-index{
    display: flex;
    flex-direction: column;
    /* justify-content: space-between; */
    align-items: center;
    width: 100%;
    margin-top: 0px;
    /*margin-bottom: 40px;*/
}
.mecontacter{
    display:inline-block;
    text-align: center;
    margin: auto;
    padding: 0.5em;
    color: white;
    background-color: darkmagenta;
    text-decoration: none;
    font-weight: 100;
}
.mecontacter:hover{
    color: darkmagenta;
    background-color: white;
    border-radius: 50%;
    padding: 0.5em;
    opacity: 0.5;
}
.margebas{
    margin-bottom: 2em;
}
                                                /* DIAPORAMA dans .droite */
.mySlides {display: none}
img {vertical-align: middle;max-width: 100%;}
.slideshow-container {
max-width: 1000px;
position: relative;
margin-bottom: 2em;
}
/* Number text (1/3 etc) */
.numbertext {
color: #ffffff;
font-size: 12px;
padding: 8px 12px;
position: absolute;
top: 0;
}
/* Fading animation */
.fade {
/* -webkit-animation-name: fade;
-webkit-animation-duration: 1.5s; */
animation-name: fade;
animation-duration: 1.5s;
}
@-webkit-keyframes fade {
from {opacity: .4} 
to {opacity: 1}
}
@keyframes fade {
from {opacity: .4} 
to {opacity: 1}
}
                                                    /* AUTOUR DE MAMAN / AUTOUR DE BEBE / RITUELS */
                                                     /* AUTOUR DE BEBE ET RITUELS Les vignettes sont définies en haut
                                                     à vérifier...*/

.flex-conteneur{
    display: flex;
    justify-content: space-around;
    align-items: center;
    width: 100%;
    margin-top: 20px;
    /*line-height: 0px; j'avais mis ça pour caler la photo mais il faut le supprimer sinon le texte se chevauche*/
}
.sousconteneur{
    display: flex;
    justify-content: center;
    width: auto;
    position: relative;
    margin: 0px;
    padding: 0px;
    background-color: rgb(226,223,240);
}
.sousconteneur div{
    color: rgb(255, 255, 255);
    position:absolute;
    top: 80%;
    padding: 20px;
    font-size: 1.5em;
    border: white 1px solid;
    background-color:rgba(139, 0, 139,0.8);
    text-align: center;
}
.sousconteneur img {
    width:100%;
    height: auto;
    margin: auto;
}
.sousconteneur a:hover{
    opacity: 0.3;
    transition: 1s;
}

                                                            /* PAGES PRESTATIONS */ 
/*texte à gauche / image à droite */
.flex-prest{
    display: flex;
    width: 100%;
}
/* texte à gauche / image à droite */
.flex-prest1{
    display: flex;
    width: 100%;
}

/* commun aux deux flex*/
.prest-texte{
    display: flex;
    flex-direction: column;
    width: 75%;
    margin-right: 2em;
}
.prest-texte a{
    color: darkmagenta;
    text-decoration: none;
}
.prest-texte a:hover{
    color:inherit;
    text-decoration: underline;
}
.prest-img{
    display: flex;
    flex-direction: column;
    width: 25%;
}
.prest-img img{
    border-radius: 20% 0;
    opacity: 70%;
}
.prest-img img:hover{
    opacity: 100%;
}

.prest-tarif{
    display: flex;
    justify-content: space-around;
    width: 100%;
    border: 1px solid #5c5681;
    margin-bottom: 2em;
}
.prest-tarif h2{
    text-align: center;
    font-size: 1.5em;
    padding: 20px 0px 15px 0px;
    span {
        display: block;
        font-size: 1.1rem;
    }
}
.prest-tarif ul{
    text-align: center;
    padding: 0em;
    margin: 0em;
}
.prest-tarifrituel{
    display: flex;
    padding-right: 1em;
}                
.prest-tarifrituel h2{
    text-align: center;
    font-size: 1.1em;
    padding: 20px 0px 15px 0px;
}
.prest-tarifrituel ul{
    text-align: center;
    padding: 0px;
    margin: 0px;
}
.rituelcitationtarif{
    display: flex;
    justify-content: space-between;
    padding-left: 1em;
}
/* image en haut, texte en bas page accompagnement */
.flex-prest2{
    display: flex;
    flex-direction: column;
    width: 100%;
    justify-content: center;
    align-items: center;
}
.prest-img2{
    display: flex;
    justify-content: center;
    width: 100%;
    margin-bottom: 1.5em;
}
.prest-img2 img{
    border-radius: 20% 0%;
    opacity: 70%;
}
.prest-img2 img:hover{
    opacity: 100%;
}

.prest-texte2{
    display: flex;
    flex-direction: column;
    width: 100%;
}
.afmb{
    display: flex;
    width: 30%;
    margin: 1em auto;
}
                                                       /* CUISINE */

.h2recettes{
    margin: 1.8em 0em 0em 0em;
}
.gauchecuisine,
.droitecuisine {
    margin: 1.5em 1em 0;
}
.droitecuisine{
    display: flex;
    flex-direction: column;
    width: 50%;
    height: auto;
    box-sizing:border-box;
    justify-content: left;
}
.col-1-3 {
    width: 33.333%;
    isplay: flex;
    flex-direction: column;
    height: auto;
    box-sizing:border-box;
    justify-content: left;
}
.droitecuisine .prest-tarif p.exergue2,
.gauchecuisine .prest-tarif p.exergue2 {
    margin: 0;
}
.gauchecuisine{
    display: flex;
    width: 50%;
    flex-direction: column;
    justify-content: center;
}
.labelmoisdor{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.labelmoisdor img{
    display: flex;
    width: 10%;
}
/* Lien vers workshop*/
.droitecuisine a{
    text-decoration: underline;
    font-size: 1.2em;
    text-align: center;
    color: rgb(139,0,139);
    /*color: #5c5681;*/
}
.droitecuisine a:hover{
    text-decoration: none;
    opacity: 0.5;
}
                                                                /* SOINS FEMININS */
.flex-soins{
    display: flex;
    justify-content: space-around;
    width: 100%;
    margin: 1em 0 2em;
}
.flex-soins h2{
    text-align: center;
    font-size: 1.1em;
    padding: 20px 0px 15px 0px;
}
.flex-soins ul{
    text-align: center;
    padding: 0px;
    margin: 0px;
}
.flex-soins p{
    font-size: 1.1em;
    font-style: italic;
}
/* Pour les trois photos fixes : voir aussi en haut les vignettes*/
.flex-soins img {
    width:100%;
    height: auto;
    margin: auto;
    /*border-radius: 50% 0px 50% 0px;*/
}
.leftsoins{
    /*display: flex;
    flex-direction: column;*/
    width: calc(100% / 3);
}
.middlesoins{
    /*display: flex;
    flex-direction: column;*/
    width:calc(100% / 3);
}
.rightsoins{
   /*display: flex;
    flex-direction: column;*/
    width:calc(100% / 3);
}
/* version mobile*/
.flex-soinsmobile{
    display: flex;
    justify-content: space-around;
    width: 100%;
}
.flex-soinsmobile h2{
    text-align: center;
    font-size: 1.1em;
    padding: 0em 0.5em 0.8em 0.5em;
}
.flex-soinsmobile ul{
    text-align: center;
    padding: 0px;
    margin: 0px;
}
.flex-soinsmobile p{
    font-size: 1.1em;
    font-style: italic;
}
.leftsoinsmobile{
    width: 45%;
}
.rightsoinsmobile{
    width: 45%;
}
                                                                /* TARIF */

/* code d'origine de w3school*/
.accordion {
    background-color: rgba(139,0,139,0.5); /*#eee;*/
    /*color:#444;*/
    color:#74437e; /*ne marche qu'en exadecimal*/
    cursor: pointer;
    padding: 18px;
    width: 100%;
    border-bottom: gray 1px solid; /*ajouté*/
    text-align: center;
    outline: none;
    font-size: 30px;
    transition: 0.4s;
    }
    
.accordion:hover {
    /*background-color: #ccc;*/
    background-color: #74437e;
    color: #e6cbe6;
}
.active{
    background-color: #74437e;
    color: #e6cbe6;
}

.accordion:hover .awasome,
.accordion.active .awasome {
    color: #e6cbe6;
    border-color: #e6cbe6;
}

.accordion:after {
    content: '\002B'; /* correspond au signe +*/
    /*color: #777;*/
    color:#74437e; /*ne marche que sur les deux signes*/
    font-weight: bold;
    float: right;
    margin-left: 5px;
    color: rgb(230, 203, 230);
}
    
.active:after {
    content: "\2212"; /* correspond au signe -*/
}
.panel {
padding: 0px 18px;
background-color: white;
max-height: 0;
overflow: hidden;
transition: max-height 0.2s ease-out;
}
/* Mes modifications*/
.flex-tarif{
    display: flex;
    flex-direction: column;
    width: 60%;
}
.titre{
    color: darkmagenta;
    font-size: 1.1em;
    padding: 10px 0px 5px 0px;
}
.titre .soustitre li{
    color: rgb(211, 95, 211);
    font-size: 0.8em;
    /*list-style-type:disc;
    text-indent: 2em;*/
}
/*flèche*/
.soustitre li ~ div::before{
    content: ' \21AA'; 
}
.soustitre li ~ div {
    font-size: 0.8em;
    padding-left: 1em;
}
ul.soustitre li:before{
    content: '\2666  '; /*losange et espace*/
    /*font-size: 1.3em; on peut même modifier la taille*/
    color:darkmagenta; /*et la couleur*/
}
ul.soustitre .prix li{
    color: rgba( 92, 86,129,1);
    font-size: 0.8em;
}
ul.soustitre .prix li:before{
    content: ' \21AA'; /*flèche*/
    font-size: 1em;
    color: rgba( 92, 86,129,1);
}
.panel > ul{
    margin-top: 20px;
    margin-bottom: 20px;
}
button.accordion{
    margin: 0px;
}
.awasome{
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 2em;
    color: darkmagenta;
    width: 40px;
    height: 40px;
    border-radius: 60%;
    border: solid darkmagenta 2px;
    margin: 0px auto;
    padding: 5px 0px;
    /*padding-bottom: 50px; ne marche pas*/
    /*il semblerait que tous les styles ne s'appliquent pas directement à l'icone dans i.
    Il faut passer par un block parent*/
    position: relative;
    left: -10px;
    margin-bottom: 10px;
}

                                                    /* page MIEUX ME CONNAITRE*/

.flex-meconnaitrehaut{
    display: flex;
    width: 100%;
}
.leftmeconnaitrehaut{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 20%;
}
.rightmeconnaitrehaut {
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 80%;
}
.flex-meconnaitrebas{
    display: flex;
    width: 100%;
}
.leftmeconnaitrebas {
    width: calc(100% / 3);
    margin-top: 1.7em;
}
.middlemeconnaitrebas{
    width: calc(100% / 3);
    margin-top: 1.7em;
}
.rightmeconnaitrebas{
    width: calc(100% / 3);
    margin-top: 1.7em;
}
.meconnaitrebas h2 p{
    padding-left: 0px;
}
                                                /*   IMAGE MIEUX ME CONNAITRE */

/*portrait Priscilla*/
.flex-meconnaitrehaut img{
    display: flex;
    width: 100%;
    height: auto;
}


                                                /* page CONTACT */
.flex-contact{
    display: flex;
    justify-content: space-between;
    width: 80%;
    margin-bottom: 50px;
}
.leftcontact {
    display: flex;
    flex-direction: column;
    align-items: center;
    /* justify-content: center; */
    width: 40%;
    margin: auto;
}
.rightcontact{
    display: flex;
    flex-direction: column;
    align-items: center;
    /* justify-content: center; */
    width: 50%;
    margin: auto;
    /* padding: 20px; */
}
.rightcontact iframe{
    display: flex;
    justify-content: center;
    width: 100%;
}

.googleavis{
    display: flex;
    justify-content: center;
    margin-top: 2em;
}
form{
    background-color: rgb(226,223,240) ;
    /*padding-left: 30px;*/
    border-radius: 20px;
    width: 100%;
}
input{
    /* Pour que tous les champs texte aient la même dimension */
    width: 90%;
    height: 30px;
    border-radius: 6px;
    border: none;
    outline: none;
    margin: 5px 0px 5px 15px;
}
input[type="submit"]{
    background-color:rgb(159, 156, 177);
    color: #fff;
    font-weight: bolder;
}
label {
    /* Pour être sûrs que toutes les étiquettes ont même taille et sont correctement alignées */
    display: inline-block;
    width: 90%;
    text-align: left;
    margin: 5px 0px 5px 15px;
    background-color: rgb(230, 203, 230);
}
textarea {
    /* Pour aligner les champs texte multi‑ligne avec leur étiquette */
    vertical-align: top;
    width:90%;
    height:200px;
    border: none;
    outline: none;
    border-radius: 6px;
    margin: 5px 0px 5px 15px;
}
                                                /* PARTENAIRES */
.flex-liens{
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    width: 70%;
    margin: auto;
}
.flex-liens div{
    margin: 5px 0px;
}
.flex-liens h2{
    text-align: center;
    margin: 20px 0px;
}
.flex-liens h2.h2ssmarge{
    margin-top: 0px;
}
/*.flex-liens a:hover{
    opacity: 50%;
}*/
.liens{
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0px 0px;
    width: 100%;
}
.liens div{
    display: block;
    border: 1px solid gray;
    box-shadow: 5px 5px 10px gray;
    width: calc(100 / 3);
    /*height: 300px;*/
    margin: 0px 5px;
    padding: 0px;
    position: relative;
}
.zoom div{
    background: darkmagenta;
    margin-top: 0px;
}
.zoom div img{
    opacity: 1;
	/* -webkit-transition: .3s ease-in-out; */
	transition: .3s ease-in-out;
    /* -webkit-transform: scale(1); */
	transform: scale(1);
}
.zoom div:hover img {
    opacity: .5;
    /* -webkit-transform: scale(1.1); */
	transform: scale(1.1);
}
                                                        /* MENTIONS LEGALES */
.menleg{
    display: flex;
    flex-direction: column;
    width: 100%;
}
.loi{
    font-size: 1em;
}
.loi span{
    font-size: 0.9em;
    font-style: oblique;
    color: rgb(154,149,176);
}
.loi a{
    color: rgb(154,149,176);
    text-decoration: underline;
    padding: 0;
    margin: 0;
}
.loi a:hover{
    opacity: 0.8;
    text-decoration: none;
}
.loi p{
    padding: 0.6em;
}
.loi ul{
    margin-bottom: 0;
}
.loi li{
    list-style-type: square;
}
.loi h3{
    font-size: 1.8em;
    color: rgb(154,149,176);
    text-align: center;
}
.loi em{
    font-size: 0.8em;
    opacity: 0.8;
}
/*-------------------------------------------------------- RESPONSIVE ----------------------------------- */
div.logomobile{
    display: none;
    margin-top: 70px;
}
#menuToggle{
    display: none;
}
div.flex-soinsmobile{
    display: none;
}
div.flex-soinsmobilephotos{
    display: none;
}
.footermobile{
    display: none;
}
.flex-liensmobile{
    display: none;
}
/* concerne le padding du dernier p de soins féminins */

@media all and (max-width:800px){
.conteneur{
    width: 100%;
}
footer{
    display: none;
}
.footermobile{
    display: flex;
    flex-direction: column;
    align-items: center;
}
.flex-prest .boncadeau img{
    width: auto;
}
.flex-prest1 .boncadeau img{
    width: auto;
}
div.deplacement{
    margin: 1.5em 0 1em 0;
    padding: 0em 1em;
}
div.deplacement1{
    margin: 3em 0em 1em 0em;
    padding: 0em 1em;
}
div.exergue{
    display: none;
}
/* concerne pages atelier massage bébé et massage shantala*/
div.exergue2{
    font-size: 1em;
}
.logo{
    display: none;
}
header{
    display: none;
}
div.logomobile{
    display:flex;
    justify-content: center;
}
div.logomobile img{
    max-width: 100%;
    height: auto;
}
h1{
    margin: 1.5em 0 1.5em 0;
    font-size: 1.3em;
}
h2{
    margin:10px 0px 10px 0px;
    font-size: 1.1em;
}
.rightaccueil, .leftaccueil img{
    display: none;
}
.middleaccueil{
    width: 100%;
    margin: 0px;
    padding: 0px;
}
                        /* responsive accueil diaporama */
.margebas{
    margin-bottom: 1em;
}
.exergueFB{
    font-size: 1em;
    text-align: center;
    /* margin-top: 1.5em; */
}
/* .logors img{
    margin-top: 1.5em;
} */


                        /* responsive page AUTOUR DE MAMAN / AUTOUR DE BEBE / RITUELS  marges à vérifier */
.flex-conteneur{
    display: flex;
    /* flex-direction: column;
    align-items: center;  */
    width: 100%;
    margin-bottom: 2em;
}
.sousconteneur div{
    width: 80%;
    top: 95%;
    font-size: .9em;
    padding: 0.5em;
}


                        /* responsive PAGES PRESTATIONS */
.flex-prest{
    display: flex;
    flex-direction: column-reverse;
    align-items: center;
    max-width: 100%;
}
.flex-prest1{
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 100%;
}
.flex-prest img{
    opacity: 1;
    width: 100%;
    margin: auto;
}
.flex-prest1 img{
    opacity: 1;
    width: 100%;
    margin: auto;
}
.prest-img{
    width: 100%;
}
.prest-texte{
    width: 90%;
    margin-right: 0;
}                      
.prest-tarif{
    display: flex;
    flex-direction: column;
}
.prest-tarif h2{
    margin: 0.5em 0em 0em 0em;
}
                          /* diaporama CUISINE */
.gauchecuisine, .droitecuisine{
    width: 100%;
}
.labelmoisdor img{
    display: flex;
    width: 40%;
}

                            /* responsive PAGE WORKSHOP */
.flex-workshop{
    display: flex;
    flex-direction: column-reverse;
    align-items: center;
    max-width: 100%;
}
.workshop-texte{
    width: 90%;
    margin-right: 0;
}
.workshop-img{
    width: 100%;
}
.workshop-img img{
    opacity: 1;
}
                        
                            /* photo accompagnement */
.flex-prest2 img{
    width: 100%;
    opacity: 1;
}

                        /* responsive page RITUEL BLESSING et FERMETURE */
.rituelcitationtarif{
    display: flex;
    justify-content: center;
}
.rituelcitationtarif h2{
    margin: 0.5em 0em 0em 0em;
}
div.flex-blessing2{
    display: flex;
    justify-content: center;
}
div.flex-fermeture2{
    display: flex;
    justify-content: center;
}

                        /* responsive PAGE SOINS ok */
div.flex-soins{
    display: none;
}
div.flex-soinsmobile{
    display: flex;
    width: 100%;
    /*justify-content: space-between;*/
}
div.leftsoinsmobile, .rightsoinsmobile{
    margin: 0;
    padding: 0;
    width: 100%;
}
div.leftsoinsmobile, .rightsoinsmobile p{
    text-align: left;
}
div.flex-soinsmobilephotos{
    display: flex;
}
div.flex-soinsmobilephotos img{
    max-width:100%;
    height: auto;
    margin: auto;
}
.padnul{
    padding-bottom: 0em;
}
                        /* responsive page TARIF*/
.flex-tarif{
    display: flex;
    width: 90%;
    font-size: small;
}
.titre .soustitre li{
    padding-left: 1em;
}
div.panel ul{
    padding-left: 0px;
}
                        /* responsive page MIEUX ME CONNAITRE OK */
.flex-meconnaitrehaut{
    display: flex;
    flex-direction: column;
    width: 100%;
    margin: auto;
}
.leftmeconnaitrehaut, .rightmeconnaitrehaut{
    display: flex;
    width: 100%;
    margin: 0em auto auto auto;
}
.flex-meconnaitrebas{
    display: flex;
    flex-direction: column;
    width: 100%;
}
.leftmeconnaitrebas, .middlemeconnaitrebas, .rightmeconnaitrebas{
    display: flex;
    flex-direction: column;
    width: 100%;
    margin-top: 0em;
}
                            /* responsive IMAGE MIEUX ME CONNAITRE */
/* Portrait Priscilla */
.leftmeconnaitrehaut img{
    margin-bottom: 1.7em;
}

                            /* responsive page CONTACT OK */
.flex-contact{
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    margin: auto;
}
.leftcontact{
    width: 90%;
    margin: 20px 0px;
}
.rightcontact{
    width: 100%;
    padding: 0px;
}
.rightcontact iframe{
    width: 90%;
    margin: auto;
}
                            /* responsive page PARTENAIRES */

.flex-liens{
    display: none;
}
.zoom{
    display: none;
}
.flex-liensmobile{
    display: flex;
    flex-direction: column;
    /*flex-wrap: wrap;*/
    width: 100%;
    margin: auto;
}
.flex-liensmobile div{
    margin: 0.5em auto;
}
.flex-liensmobile h2{
    text-align: center;
    margin: 20px 0px;
}
.flex-liensmobile h2.h2ssmarge{
    margin-top: 0px;
}
.flex-liensmobile img{
    width: 100%;
    height: auto;
}
.liensmobile{
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0px 0px;
    width: 90%;
}
.liensmobile div{
    display: block;
    border: 1px solid gray;
    box-shadow: 5px 5px 10px gray;
    width: calc(90% / 2);
    /*height: 300px;*/
    margin: 0px 5px;
    padding: 0px;
    position: relative;
}
                        /* responsive page MENTIONS LEGALES */
.loi{
    display: none;
}

/* .zoommobile div{
    background: darkmagenta;
    margin-top: 0px;
}
.zoommobile div img{
    opacity: 1;
	-webkit-transition: .3s ease-in-out;
	transition: .3s ease-in-out;
    -webkit-transform: scale(1);
	transform: scale(1);
}
.zoommobile div:hover img {
    opacity: .5;
    -webkit-transform: scale(1.1);
	transform: scale(1.1);
} */
                                                    /* menu burger */
#menuToggle{
   display: block;
   position: relative;
   top: 50px;
   left: 50px;
   z-index: 1;
   /* -webkit-user-select: none; */
   user-select: none;
 }
 
 #menuToggle a{
   text-decoration: none;
   /* color: #5c5681; */
   transition: color 0.3s ease;
 }
 #menuToggle a:hover{
   color: white;
 }
 #menuToggle input{
   display: block;
   width: 40px;
   height: 32px;
   position: absolute;
   top: -7px;
   left: -5px;
   cursor: pointer;
   opacity: 0; /* hide this */
   z-index: 2; /* and place it over the hamburger */
   /* -webkit-touch-callout: none; */
 }
 /*
  * Just a quick hamburger
  */
 #menuToggle span{
   display: block;
   width: 33px;
   height: 4px;
   margin-bottom: 5px;
   position: relative;
   background-color:rgb(175,169,195);
   border-radius: 3px;
   z-index: 1;
   transform-origin: 4px 0px;
   transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
               background 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
               opacity 0.55s ease;
 }
 #menuToggle span:first-child{
   transform-origin: 0% 0%;
 }
 #menuToggle span:nth-last-child(2){
   transform-origin: 0% 100%;
 }
 /* 
  * Transform all the slices of hamburger
  * into a crossmark.
  */
nav div#menuToggle span{
    border-left: none;
}
 #menuToggle input:checked ~ span{
   opacity: 1;
   transform: rotate(45deg) translate(-5px, -4px);
   background: #232323;
 }
 /*
  * But let's hide the middle one.
  */
 #menuToggle input:checked ~ span:nth-last-child(3){
   opacity: 0;
   transform: rotate(0deg) scale(0.2, 0.2);
 }
 /*
  * Ohyeah and the last one should go the other direction
  */
 #menuToggle input:checked ~ span:nth-last-child(2){
   transform: rotate(-45deg) translate(0, -1px);
 }
 /*
  * Make this absolute positioned
  * at the top left of the screen
  */
 #menu{
   position: absolute;
   width: 330px;
   margin: -100px 0 0 -50px;
   padding: 125px 10px 50px 30px;
   /* padding-top: 125px; */
   background-color: rgb(175,169,195);
   background-image: url(images/logodoula_300x300_opa-40.png);
   background-repeat:no-repeat;
   background-position:center;
   /*background: #ededed;*/
   list-style-type: none;
   /* -webkit-font-smoothing: antialiased; */
   /* to stop flickering of text in safari */
   transform-origin: 0% 0%;
   transform: translate(-100%, 0);
   transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0);
 }
 /*une couleur par défaut s'appliquait...*/
 #menu li a{
    color: rgb(96, 11, 165);
}
/*insère le losange*/
#menu li a:before{
    content: ' \2666';
    color: rgb(96, 11, 165);
}
#menu li{
    padding: 0.2em 0;
}
 #menu .sousmenu li a{
     color: darkmagenta;
     font-size: 0.8em;
 }
 ul.sousmenu{
    padding-left: .8em;
}
 /*insère la flèche*/
 /* .sousmenu li a:before{
    content: ' \21AA'; 
    color: darkmagenta;
    font-size: 0.8em;
} */

 /*insère la flèche*/
#menu .sousmenu li a:before{
    content: ' \21AA';
    color: darkmagenta;
    font-size: 0.8em;
}
 /*
  * And let's slide it in from the left
  */
 #menuToggle input:checked ~ ul{
   transform: none;
 }
}

                                                        /* COULEURS
violet foncé : 9F9CB1 (159,156,177)
violet moyen : BAB6CD (186,182,205)
violet clair : E2DFF0 (226,223,240)
mauve : D0C1D3 (208,193,211)
*/
/* CSS - Cascading Style Sheet */
/* Palette color codes */
/* Palette URL: http://paletton.com/#uid=1470u0k4nw60gVx1OIG7RrAclnl */

/* Feel free to copy&paste color codes to your application */


/* As hex codes */

.color-primary-0 { color: #9F9CB1 }	/* Main Primary color */
.color-primary-1 { color: #F0F0F2 }
.color-primary-2 { color: #C9C8D2 }
.color-primary-3 { color: #7C7898 }
.color-primary-4 { color: #5C5681 }



/* As RGBa codes */

.rgba-primary-0 { color: rgba(159,156,177,1) }	/* Main Primary color */
.rgba-primary-1 { color: rgba(240,240,242,1) }
.rgba-primary-2 { color: rgba(201,200,210,1) }
.rgba-primary-3 { color: rgba(124,120,152,1) }
.rgba-primary-4 { color: rgba( 92, 86,129,1) }


/* Generated by Paletton.com © 2002-2014 */
/* http://paletton.com */
/* CSS - Cascading Style Sheet */
/* Palette color codes */
/* Palette URL: http://paletton.com/#uid=14Q0u0k2OKP00++0MUx5+zUausE */

/* Feel free to copy&paste color codes to your application */


/* As hex codes */

.color-primary-0 { color: #D0C1D3 }	/* Main Primary color */
.color-primary-1 { color: #FFFFFF }
.color-primary-2 { color: #ECE8ED }
.color-primary-3 { color: #AD92B3 }
.color-primary-4 { color: #8E6696 }



/* As RGBa codes */

.rgba-primary-0 { color: rgba(208,193,211,1) }	/* Main Primary color */
.rgba-primary-1 { color: rgba(255,255,255,1) }
.rgba-primary-2 { color: rgba(236,232,237,1) }
.rgba-primary-3 { color: rgba(173,146,179,1) }
.rgba-primary-4 { color: rgba(142,102,150,1) }



/* Generated by Paletton.com © 2002-2014 */
/* http://paletton.com */



/* ADD ANGELE */

.iframe-wrapper {
    position: relative;
    margin: 20px auto;
    overflow: hidden; 
    padding-top: 56.25%; 
}

.iframe-wrapper iframe {
    position: absolute; 
  top: 0; 
  left: 0; 
  width: 100%; 
  height: 100%; 
  border: 0; 
}