@font-face {
    font-family: "Roboto";
    src: url(../fonts/Roboto-Regular.ttf);
}

@font-face {
    font-family: "Garamond";
    src: url(../fonts/EBGaramond-Regular.ttf);
}


/******************************** SIDE MENU *******************************************/
#sidebar-wrapper {
    position: fixed;
    z-index: 2;
    right: 0;
    width: 250px;
    height: 100%;
    transition: all 0.4s ease 0s;
    transform: translateX(250px);
    background: rgba(39, 68, 38, 0.7);
}

#sidebar-wrapper ul {
    list-style: none;
    padding: 5px;
}

.sidebar-nav {
    position: absolute;
    top: 60px;
    width: 250px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.sidebar-nav li.sidebar-nav-item a {
    display: block;
    text-decoration: none;
    color: white;
    font-weight: bold;
    padding: 10px 5px;
    border-radius: 5px;
}

.sidebar-nav li a:hover {
    text-decoration: none;
    color: white;
    background: rgba(224, 177, 126, 0.5);
}

.sidebar-nav li a:active,
.sidebar-nav li a:focus {
    text-decoration: none;
}

#sidebar-wrapper.active {
    right: 250px;
    width: 250px;
    transition: all 0.4s ease 0s;
}

.imgLinkPhone {
    width: 36px;
}

/**************************** MENU BURGER ******************************/
.menu-toggle {
    position: fixed;
    right: 15px;
    top: 15px;
    width: 50px;
    height: 50px;
    text-align: center;
    color: #fff;
    background: rgba(224, 177, 126, 0.7);
    line-height: 50px;
    z-index: 999;
    border-radius: 10px;
}

.menu-toggle:focus, .menu-toggle:hover {
    color: #fff;
}

.menu-toggle:hover {

    background: rgba(224, 177, 126, 0.5);
}

.scroll-to-top {
    position: fixed;
    right: 15px;
    bottom: 15px;
    display: none;
    width: 50px;
    height: 50px;
    text-align: center;
    color: white;
    background: rgba(224, 177, 126, 0.7);
    line-height: 45px;
}

.scroll-to-top:focus, .scroll-to-top:hover {
    color: white;
}

.scroll-to-top:hover {

    background: #E0B17EFF;
}

.scroll-to-top i {
    font-weight: 800;
}

/****************************************************************/
a, a:focus, a:active, a:hover {
    text-decoration: none;
}

/************ Title ***********/
.title {
    display: flex;
    flex-direction: row;
    text-align: center;
    align-items: center;
    justify-content: space-between;
}

.h1divBefore, .h1divAfter {
    flex-basis: 20%;
    height: 1px;
    background: #2A4929;
}

.title h1, #contact h1 {
    font-size: 24px;
    font-weight: bolder;
    font-family: "Garamond", sans-serif;
}


h2 {
    text-align: center;
    font-size: 22px;
    font-weight: bolder;
}

h3 {
    text-align: center;
    font-size: 18px;
    font-weight: bolder;
    margin-bottom: 15px;
}

/***** ITALIC  ****/
.title h1, #akashiques-medium-guidance-energeticienne-home h2, h3, .conseil, .paiement, .h2Naistoitoname {
    font-style: italic;
}

/***** GOLD COLOR ****/
h2, li::marker, blockquote, a, a:focus, a:active, a:hover, main span, .akashiques-medium-guidance-energeticienne-mobilText {
    color: #E0B17EFF;
}

/******** GREEN COLOR ******/
body {
    max-height: 3000px;
}

body, .ernesto, #contact a {
    color: #2A4929;
}

blockquote {
    text-align: center;
    font-size: 18px;
    font-weight: bolder;
    padding: 10px;
    line-height: 28px;
}

/*********** HEADER MOBILE ************/
.akashiques-medium-guidance-energeticienne-mobilText {
    background-color: #274426;
    font-weight: bold;
    padding: 5px;
}

.akashiques-medium-guidance-energeticienne-mobilText {
    text-align: center;
    margin-top: -1px;
}

.akashiques-medium-guidance-energeticienne-mobilText h1 {
    margin-top: 0px;
    font-size: 18px;
    font-weight: bold;
}


.akashiques-medium-guidance-energeticienne-mobilText a, main a {
    text-decoration: underline #E0B17EFF;
}

#akashiques-medium-guidance-energeticienne-navDesktop1, #akashiques-medium-guidance-energeticienne-navDesktop2 {
    display: none;
}

@keyframes pulse {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.1);
    }
    100% {
        transform: scale(1);
    }
}

#mesAteliersBanner {
    background-color: #E0B17EFF;
    padding: 5px;
    text-align: center;
    font-weight: bold;
    text-transform: uppercase;
    margin: 0;
    color: #274426;
}

#mesAteliersBanner a {
    display: inline-block; /* Nécessaire pour que transform fonctionne sur le lien */
    animation: pulse 2s infinite ease-in-out; /* Animation en boucle */
    color: #274426;
}

#mesAteliersBanner a:hover {
    text-decoration: underline #274426;
}

/****** PAGE ATELIER *****/
.atelierCalendar {
    background-color: #274426;
    color: #E0B17EFF;
    border-radius: 15px;
    box-shadow: rgb(204, 219, 232) 3px 3px 6px 0px inset, rgba(255, 255, 255, 0.5) -3px -3px 6px 1px inset;
    text-align: center;
    margin: 15px auto;
    padding: 5px;
}

#ateliers, #tarifAtelier {
    background-color: rgba(224, 177, 126, 0.2);
    padding: 10px;
    border-radius: 5px;
    margin-bottom: 15px;
}

#ateliers p, .atelierCalendar p {
    margin: 0;
}

#date_atelier {
    display: block;
    margin: auto;
    width: 70%;
    border: solid #E0B17EFF 3px;
    border-radius: 20px;
}


/*********** MAIN ********/
main {
    background-color: #ffffff;
}

.main-container {
    padding: 10px;
    margin-bottom: 15px;
}

main a {
    font-weight: bold;
}

main span {
    font-weight: bold;
}

nav {
    font-family: "Garamond", sans-serif;
}

.akashiques-medium-guidance-energeticienne-section {
    margin-top: 40px;
}

.ernesto {
    white-space: nowrap;
    font-weight: normal;
}

.akashiques-medium-guidance-energeticienne-section article, #akashiques-medium-guidance-energeticienne-article-pourquoi {
    padding: 10px;
    font-size: 17px;
    line-height: 28px;
}

/*********** PORTRAIT ***********/
.portraitContainer {
    max-width: 450px;
    text-align: center;
    margin: auto auto 15px auto;
}

.portrait {
    width: 75%;
    border-radius: 10px;
}

/************* CADRE OR **************/
.ImgSectionContainer {
    max-width: 700px;
    margin: auto;
}

.imgSection {
    border: solid #E0B17EFF 2px;
    width: 100%;
}

.divImgSection {
    padding: 3px;
    border: solid #E0B17EFF 6px;
}

/*********************************************  POURQUOI **************************************/

#akashiques-medium-guidance-energeticienne-article-pourquoi {
    text-align: center;
}

#akashiques-medium-guidance-energeticienne-home h2, .h2Naistoitoname {
    font-family: "Garamond", sans-serif;
    font-size: 20px;
    margin-bottom: 30px;
}

#akashiques-medium-guidance-energeticienne-article-pourquoi ul {
    border-radius: 5px;
    display: inline-block;
    text-align: left;
    background-color: rgba(224, 177, 126, 0.2);
}

#akashiques-medium-guidance-energeticienne-article-pourquoi li {
    padding: 5px;
    margin: 10px 0px;
}

.textLeft {
    text-align: left;
    padding: 10px;
}


/******************************************** PRESTATION ********************************************/
#mes-prestations article {
    margin-top: 50px;
}

.prestaArticleContainer {
    background-color: rgba(224, 177, 126, 0.2);
    padding-top: 45px;
    padding-right: 15px;
    padding-left: 15px;
    border-radius: 5px;
}

.imgTitlePresta {
    text-align: center;
}

.imgTitlePresta img {
    position: absolute;
    width: 100px;
    left: 50%;
    transform: translate(-50%, -50%);
}

.tarif {
    margin: 0px;
    font-weight: bold;
}

.tarif, .tarif a {
    color: #523253 !important;
}

.tarif a {
    text-decoration: underline #523253;
}

.conseil {
    text-align: center;
    font-size: 14px;
    padding-top: 20px;
    font-weight: normal;
}


/******** BIENSFAIT ************/
.bienfaitsUlContainer {
    background-color: rgba(224, 177, 126, 0.2);
    padding: 5px;
    border-radius: 5px;
}

.divImgBienfaitSection {
    text-align: center;
}

.imgBienfaitSection {
    width: 45%;
}

/******************* CONTACT + FORM *************************/
#contact {
    margin-bottom: 150px;
}

#contact article, #contact article h2 {
    text-align: left;
}

#contact a {
    text-decoration: none;
}

.reseauContact {
    margin: 10px 0;
}

#contact .facebook {
    color: #4267B2;
    font-size: 40px;
    margin-right: 10px;
}

.insta {
    width: 40px;
    margin-top: -18px;
}

.center h1 {
    border-left: 5px solid #E0B17EFF;
}

.center .inputbox {
    margin-bottom: 10px;
}

.center .inputbox input {
    border: 2px solid #2A4929;
    padding: 10px;
    border-radius: 10px;
}

.center .inputbox [type="submit"] {
    background: #2A4929;
    color: #fff;
    border: #fff;
}

.center .inputbox:hover [type="submit"] {
    background: #E0B17EFF;
}

input[type=email]:focus {
    border: solid #E0B17EFF 6px;
}

input[type=email] {
    width: 60%;
    padding: 12px 20px;
    margin: 8px 0;
    box-sizing: border-box;
    border: 3px solid #2A4929;
    -webkit-transition: 0.5s;
    transition: 0.3s;
    outline: none;
}

input[type=email] {
    border: solid #E0B17EFF 6px;
}


@media screen and (min-width: 601px) {
    .title h1 {
        font-size: 26px;
    }

    .h1divBefore, .h1divAfter {
        flex-basis: 24%;
    }

    .akashiques-medium-guidance-energeticienne-mobilText {
        display: none;
    }
}

@media screen and (min-width: 768px) {
    .atelierCalendar {
        width: 60%;
    }

    main {
        background-image: url("../images/naistoitoname-background-angel.jpg");
        background-size: contain !important;
        background-repeat: no-repeat;
        background-attachment: fixed !important;
        background-position: center top 255px;

    }

    .main-container {
        padding: 0px 165px;
    }

    .title h1, #contact h1 {
        font-size: 28px;

    }

    #mes-prestations h2 {
        font-size: 26px;
    }

    #akashiques-medium-guidance-energeticienne-home h2, .h2Naistoitoname {
        font-size: 24px;
    }

    h3, .akashiques-medium-guidance-energeticienne-section article, #akashiques-medium-guidance-energeticienne-article-pourquoi, blockquote {
        font-size: 19px;
    }
}

@media screen and (min-width: 1025px) {
    .menu-toggle {
        display: none;
    }

    #akashiques-medium-guidance-energeticienne-banner {

        text-align: center;
    }

    .sticky {
        position: fixed;
        top: 0;
        width: 100%;
        margin-top: -10px
    }

    main {
        background-position: center top 360px;
    }

    .marginTopMain {
        margin-top: 350px;
    }

    .main-container {
        padding: 0px 170px;
    }

    /************************** NAVBAR  **********************/
    #akashiques-medium-guidance-energeticienne-navDesktop ul {
        font-weight: bold;
        margin: 0px;
        font-size: 16px;
        list-style: none;
        text-transform: uppercase;
        padding: 10px 0;
    }

    #akashiques-medium-guidance-energeticienne-navDesktop1 {
        display: block;
        z-index: 1;
    }

    .firstNavUl {
        padding: 10px;
        display: flex;
        flex-direction: row;
        justify-content: space-around;
        background-color: white;
    }

    #akashiques-medium-guidance-energeticienne-navDesktop2 {
        position: absolute;
        border-left: solid #E0B17EFF 2px;
        background-color: white;
        align-items: center;
    }

    #akashiques-medium-guidance-energeticienne-navDesktop2 ul {
        text-align: left;
        padding: 5px;
        align-items: center;
    }

    #akashiques-medium-guidance-energeticienne-navDesktop2 li {
        padding: 8px 0;
    }

    #akashiques-medium-guidance-energeticienne-navDesktop1 ul li, #prestationDiv {
        flex-basis: 15%;
        min-width: max-content;
    }

    .navLinks, #prestationNav {
        padding: 8px;
        text-align: center;
        border-left: solid #E0B17EFF 2px;
    }

    .homeLink {
        border-left: unset;
    }

    .portraitContainer {
        margin: 10px;
        width: 25%;
        float: right;
    }

    .portrait {
        width: 100%;
    }

    #qui-suis-je .h2Naistoitoname {
        text-align: left;
    }

    /******************** PRESTATION *************************/
    #prestationDiv ul li a {
        padding: 10px;
        border-radius: 5px;
    }

    .navLinks a:hover, .prestationNavA:hover {
        border-top: solid #E0B17EFF 2px;
    }

    #prestationNav .fa-chevron-down {
        margin-left: 5px;
    }

    #prestationDiv ul li a:hover {
        background-color: #2A4929;
    }

    .imgLink {
        width: 35px;
    }

    .title h1 {
        font-size: 27px;
    }

    .h1divBefore, .h1divAfter {
        flex-basis: 25%;
    }
}

@media screen and (min-width: 1500px) {
    #akashiques-medium-guidance-energeticienne-navDesktop a {
        font-size: 18px;
    }

    .main-container {
        padding: 0px 400px;
        font-size: 20px;
    }

    .akashiques-medium-guidance-energeticienne-section article, blockquote {
        font-size: 20px;
    }

    .title h1 {
        font-size: 32px;
    }

    h2 {
        font-size: 26px;
    }

    h3 {
        font-size: 20px;
    }

    .h1divBefore, .h1divAfter {
        flex-basis: 30%;
    }

    .bienfaitsUl {
        display: flex;
        justify-content: space-between;
    }
}

@media screen and (min-width: 1700px) {
    #mes-prestations article {
        padding: 0 200px;
    }
}