/* Échec de l'agrandissement. Renvoi du contenu non agrandi.
(4,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(7,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(11,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(12,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(14,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(15,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(16,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(18,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(24,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(25,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(27,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(28,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(33,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(34,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(40,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(41,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(42,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(43,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(92,22): run-time error CSS1039: Token not allowed after unary operator: '-bg-color'
(93,17): run-time error CSS1039: Token not allowed after unary operator: '-mauve'
(106,42): run-time error CSS1039: Token not allowed after unary operator: '-mauve2'
(106,67): run-time error CSS1039: Token not allowed after unary operator: '-blanc'
(107,30): run-time error CSS1039: Token not allowed after unary operator: '-mauve'
(107,50): run-time error CSS1039: Token not allowed after unary operator: '-blanc'
(153,34): run-time error CSS1039: Token not allowed after unary operator: '-font-color2'
(162,22): run-time error CSS1039: Token not allowed after unary operator: '-bg-color'
(163,17): run-time error CSS1039: Token not allowed after unary operator: '-font-color'
(167,22): run-time error CSS1039: Token not allowed after unary operator: '-bg-color-reverse'
(168,17): run-time error CSS1039: Token not allowed after unary operator: '-font-color'
(173,28): run-time error CSS1039: Token not allowed after unary operator: '-bg-texture'
(176,17): run-time error CSS1039: Token not allowed after unary operator: '-font-color'
(177,22): run-time error CSS1039: Token not allowed after unary operator: '-bg-texture'
(178,46): run-time error CSS1039: Token not allowed after unary operator: '-blanc'
(178,63): run-time error CSS1039: Token not allowed after unary operator: '-bg-texture'
(183,28): run-time error CSS1039: Token not allowed after unary operator: '-bg-texture'
(186,17): run-time error CSS1039: Token not allowed after unary operator: '-font-color'
(187,22): run-time error CSS1039: Token not allowed after unary operator: '-bg-texture'
(188,46): run-time error CSS1039: Token not allowed after unary operator: '-bg-texture'
(188,68): run-time error CSS1039: Token not allowed after unary operator: '-blanc'
(188,86): run-time error CSS1039: Token not allowed after unary operator: '-bg-texture'
(192,56): run-time error CSS1039: Token not allowed after unary operator: '-height-separator'
(192,98): run-time error CSS1039: Token not allowed after unary operator: '-bg-color'
(193,34): run-time error CSS1039: Token not allowed after unary operator: '-height-separator'
(195,41): run-time error CSS1039: Token not allowed after unary operator: '-height-separator'
(251,106): run-time error CSS1039: Token not allowed after unary operator: '-font-color'
(252,64): run-time error CSS1039: Token not allowed after unary operator: '-white'
(258,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(273,61): run-time error CSS1039: Token not allowed after unary operator: '-font-color2'
(349,16): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(375,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(391,23): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(421,43): run-time error CSS1039: Token not allowed after unary operator: '-bg-color'
 */
:root {
    /*PURE COLOR*/
    /*--url-texture-sable:url('Images/abrasive-beige-surface.jpg');*/
    --url-texture-sable:url('Images/sable.jpeg');
    
    --brun: #bc988a;
    --blanc: #fafafa;



    --beige:#e3dac1;
    --bleu:#1e547d;

    --mauve:#2d0a31;
    --mauve2:#806985;
    --rose:#efd7f5;

    --facebook-color:#4267b2;



    /*-------------------------------- REAL VARIABLE -----------------------------*/

    --bg-color: var(--blanc);
    --bg-color-reverse: var(--rose);

    --bg-url-texture:var(--url-texture-sable);
    --bg-texture:var(--rose);




    --font-color: var(--mauve);
    --font-color2: var(--mauve2);





    --screen-breaker-small: 800px;
    --screen-breaker-medium: 1200px;
    --screen-breaker-big: 1600px;
    --screen-breaker-ultra-big: 2000px;
}


/*=============================== only for testing =============================================*/
.todo {
    background:yellow;
    border:2px dashed red;
    color:black;
}



/*=============================== font size =============================================*/


html {
    font-size: 16px;
}





@media screen and (min-width: 320px) {
    html {
        font-size: calc(0.7em + 1vmin);
    }
}


@media screen and (min-width: 1000px) {
    html {
        font-size: 22px;
    }
}


/*=============================== header structure =============================================*/

header{display:flex;}
header ul{margin:0 auto;}




/*=============================== body structure =============================================*/

body {
    background: var(--bg-color);
    color: var(--mauve);
    font-family: "Montserrat",sans-serif;
    

    margin:0;
}


body > .content {


}

a.btn{padding:1rem 2rem;background: var(--mauve2);    color: var(--blanc);box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;border-radius:5px;margin:1rem;display:inline-block;transition:all .3s ease-in-out;}
a.btn:hover{background: var(--mauve);color: var(--blanc);}


/*Changement de structure ecran medium*/
/*@media screen and (min-width : 1200px) {
    body > .content {
        width: 800px;
    }
}*/


/*Changement de structure ecran big*/
/*@media screen and (min-width : 1600px) {
    body > .content {
        width: 1200px;
    }
}*/




@media screen and (min-width : 1200px) {
    .content {
        width: 1200px;
        height: 100%;
        margin: 0 auto;
    }
}








/*=============================== generic elements =============================================*/

ul {list-style: none;padding:0;margin:0;}
a {text-decoration:none;    }

/*------------------------------------------------------------------------------*/

header {flex-flow: column nowrap;align-items: center;justify-content: space-between;}
header .logo {height: 10vh; max-width:100%;   transform: rotate(180deg);    }
header .logo svg {height: 100%;width:100%;}
header .logo svg path{fill: var(--font-color2);}

/*------------------------------------------------------------------------------*/
footer{padding:1rem 0;}
footer p{margin:0;text-align:center;}
footer a.btn.rdv{padding:.2rem .5rem;}
/*------------------------------------------------------------------------------*/

.bg-solid {
    background: var(--bg-color);
    color: var(--font-color);
}

.bg-solid-reverse {
    background: var(--bg-color-reverse);
    color: var(--font-color);
}
/*------------------------------------------------------------------------------*/
.bg-linear {
    position:relative;
    background-color: var(--bg-texture);
    background-position: center;
    background-repeat: repeat;
    color: var(--font-color);
    background: var(--bg-texture);
    background: linear-gradient(180deg, var(--blanc) 5%, var(--bg-texture) 80%);
}

.bg-linear-double {
    position: relative;
    background-color: var(--bg-texture);
    background-position: center;
    background-repeat: repeat;
    color: var(--font-color);
    background: var(--bg-texture);
    background: linear-gradient(180deg, var(--bg-texture) 5%, var(--blanc) 50%, var(--bg-texture) 80%);
}

/*------------------------------------------------------------------------------*/
svg.separator {position: absolute;left: 0;height: var(--height-separator);width: 100%;fill: var(--bg-color);}
.separator-top{padding-top: var(--height-separator)!important;}
.separator-top svg.separator.top {top: -1px;}/*-1 counter bug smallscreen*/
.separator-bottom {padding-bottom: var(--height-separator)!important;}
.separator-bottom svg.separator.bottom {bottom: -1px;}/*-1 counter bug smallscreen*/



/*=============================== Text font =============================================*/


@font-face {
    font-family: 'montserrat';
    src: url('Font/Montserrat/Montserrat-VariableFont_wght.ttf');
    /*url('/Content/Font/Montserrat/Montserrat-Italic-VariableFont_wght.ttf'), font-weight: normal;    /*italic*/
    font-style: normal;
}

@font-face {
    font-family: 'playfair';
    src: url('Font/Playfair_Display/PlayfairDisplay-VariableFont_wght.ttf');
    /*url('/Content/Font/Playfair_Display/PlayfairDisplay-Italic-VariableFont_wght.ttf'), font-weight: normal;*/ /*italic*/
    font-style: normal;
}

@font-face {
    font-family: 'dagelland';
    src: url('Font/learning-curve-bv-font/LearningCurve-2wJ3.ttf');
    /*url('/Content/Font/dagelland-font_Display/dagelland-fontDisplay-Italic-VariableFont_wght.ttf'), font-weight: normal;*/ /*italic*/
    font-style: normal;
}



/*=============================== Icomoon font =============================================*/

@font-face {
    font-family: 'icomoon';
    src: url('~/../Font/icomoon.eot?qm0qed');
    src: url('~/../Font/icomoon.eot?#iefixqm0qed') format('embedded-opentype'), url('~/../Font/icomoon.woff?qm0qed') format('woff'), url('~/../Font/icomoon.ttf?qm0qed') format('truetype'), url('~/../Font/icomoon.svg?qm0qed#icomoon') format('svg');
    font-weight: normal;
    font-style: normal;
}

*:before, *:after {
    font-family: 'icomoon';
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    /* Better Font Rendering =========== */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
#menu{display:flex;flex-flow:row nowrap;margin:3rem 0;}

#menu li {display: flex;flex-flow: row nowrap;align-items: center;}
#menu li + li:before {content: '';height: 5px;aspect-ratio: 1/1;border-radius: 50%;background-color:var(--font-color);display: block;}
#menu li a {font-family: 'montserrat';margin:0 1rem;color:var(--white);}

/*=============================== generic =============================================*/


#home {
    --height-separator:15vh;


}



#home h1 {font-size: 5em;font-family:'dagelland';margin-top:2rem;margin-bottom:0;}
#home h2 {font-size: 2em;margin-top:0;margin-bottom:4rem;}



#home section {position:relative;    }

#home section .wrapper-text {padding: 1rem;}
#home section .wrapper-text p{text-align:justify;color:var(--font-color2);white-space:pre-line;}
#home section .wrapper-text ul {font-size:.7em;  margin-left:1rem;  }
#home section .wrapper-text ul li::before{content:'*';margin-right:.5rem; }


/*#home .bg-texture .content div.wrapper-text{backdrop-filter: blur(2px);}*/





    




/*------------------------- main section--------------  */

#home #main .content{display:flex;justify-content:center;align-items:center;}
#home #main .content div.wrapper-text {max-width: 600px;}
    






/*------------------------- sucre section--------------  */

#home #sucre .content{display:flex;flex-flow: row nowrap;}
/*#home #sucre .content div.wrapper-svg{flex:1;}*/
#home #sucre .content div.wrapper-svg svg{height:100%;width:100%;}
#home #sucre .content div.wrapper-text {max-width: 400px;margin-left: auto;}





/*------------------------- soin section--------------  */
#home #soins{height:auto;}
#home #soins h2{text-align:center;}
#home #soins .content .wrapper-services{display:flex;flex-flow:row wrap;justify-content:center;align-items:stretch;}
#home #soins .content .wrapper-services .services{padding:.5rem;margin:.5rem;min-width:300px;flex:1;}

#home #soins .content .wrapper-services .services p{font-size:.9em;}




/*------------------------- soin section--------------  */
#home #information {
    height: auto;
}


/*------------------------- fake-footer--------------  */
#home #fake-footer {height:10vh;}






/*=============================== home structure >= small screen =============================================*/
@media screen and (min-width : 800px) {
    #home #soins .content .wrapper-services .services{ flex:1;}


    
}




    /*=============================== home structure >= medium screen =============================================*/
    @media screen and (min-width : 1200px) {
        #home {--height-separator: 25vh; }

    /*#home #main {
        height: 50vh;
    }*/
    #home #sucre {}
    #home #soins {}
    #home #soins .content .wrapper-services .services{ flex:1;margin-bottom:2rem;}
    
    #home #soins .content .wrapper-services .services h3{margin-bottom:2rem;}

    #home #contact .col {max-width:500px;}  
}









/*=============================== generic =============================================*/

#prix {
    padding: 1rem;
    --height-separator: 10vh;
}

#prix .nme{}
#prix .prix-trd{}
#prix .prix-sucre{}
#prix .prix-suppl{}
#prix .duree{}
#prix .cmt{font-style:italic;font-size:.8em;opacity:.7;display:block;text-align:left!important;}

#prix .symbol {opacity:.7;font-size:.7em;margin-left:3px;}

#prix svg {display:none;    }

/*=============================== generic structure =============================================*/

#prix .service-group {--height-separator: 5vh;}
#prix .service-group{margin-top:2rem;}
#prix .service-group h3{margin:0;margin-bottom:1rem;}
    


#prix .service-group .service {display: flex;flex-flow: row nowrap;align-items:center;padding:0.5rem 0rem;}
#prix .service-group .service.can-wrap{flex-wrap:wrap;}
#prix .service-group .service:hover{background:rgba(200,200,200,.3);}
#prix .service-group .service >span + span{margin-left:1rem;min-width:30px;text-align:right;}
#prix .service-group .service .nme{margin-right:auto;}
#prix .service-group .service .cmt{width:100%;margin:0;}

#prix .service-group .info-head{display:flex;flex-flow:row nowrap;margin-bottom:.5rem;opacity:.7;font-size:.5em;}
#prix .service-group .info-head >span:first-child{margin-left:auto;}
#prix .service-group .info-head >span+span:before{content:'/';opacity:.7;margin:0 5px;}

/*=============================== prix structure >= medium screen =============================================*/
@media screen and (min-width : 1200px) {
    
    #prix >ul{display:flex;flex-flow:row wrap;}
    #prix .service-group{flex:1;min-width:450px;margin:.5rem;padding:1rem;/*background:rgba(0,0,0,.1);*/}
    #prix .service-group.long-name{flex:2;}
    #prix .service-group {margin:1rem;}
    #prix .service-group ul {margin-bottom:1rem;  }
    #prix .service-group .service >span + span{min-width:50px;}

    #prix svg {display: block;}
}
@media screen and (max-width : 1200px) {
    #prix .service-group {background:var(--bg-color);}
}
@media screen and (max-width : 800px) {
    #prix .service-group .info-head {font-size: .7em;}
}

#contact{display:flex;flex-flow:row wrap;justify-content:space-between;}
#contact .col{flex:1;min-width:250px;padding: 1rem 0;}
    
#contact .row + .row{margin-top:2rem;}

#contact .row h3{margin-bottom:.5rem;font-size:1.1em;padding:0 1rem;}
#contact .row .lbl::before{margin-right: 5px;opacity:.7;}
#contact .row .lbl-schudele:before{content:"\e649";}
#contact .row .lbl-adress:before{content:"\e642";}
#contact .row .lbl-phone:before{content:"\e63c";}
#contact .row .lbl-email:before{content:"\e7c7"}
#contact .row .val{padding:1rem;}
/*#contact .row .val+.val{margin-top:1rem;}*/
#contact .row .val:not(.close):hover{background:rgba(50,50,50,.1);}

#contact .row.row-schedule{}
#contact .row.row-schedule .val{display:flex;flex-flow:row nowrap;justify-content:space-between;}
#contact .row.row-schedule .val.close{opacity:.5;}







/*#contact .wrapper .info .row:not(.row-adress) .val{padding:3px 8px;}
#contact .wrapper .info .row.row-adress .val{display:flex;flex-flow:row;}
#contact .wrapper .info .row.row-adress .val >div{padding:3px 8px;}
#contact .wrapper .info .row.row-adress .val ul{.CleanUl();border-left:2px solid @secondColor;}
#contact .wrapper .info .row.row-adress .val ul li{padding:3px 8px;font-size:.7em;color:#999;}*/

#contact .row {}
#contact .row  a{text-decoration:none;}
#contact .row  a:before{font-size:2em;}
/*#contact .row  a.facebook:before{content:"\e8bb";color:var(--facebook-color);}*/



#contact .line{flex-basis:100%;display:flex;align-items:center;justify-content:center;padding:3rem;}
#contact .line a.rdv{font-size:1.2em;}


/*Changement de structure ecran > small*/
/*@media screen and (min-width : 800px) {
    body > #contact.content {
        width: 600px;
    }
}*/

/*Changement de structure ecran > medium*/
@media screen and (min-width : 1200px) {
    body > #contact.content {width: 1000px;}
}