/* DEBUT Fonts : "Caveat Brush", "Source Serif 4" et "Dancing Script" */
@import url('https://fonts.googleapis.com/css2?family=Caveat+Brush&family=Dancing+Script:wght@400..700&family=Source+Serif+4:ital,opsz,wght@0,8..60,200..900;1,8..60,200..900&display=swap');
.source-serif-4-regular {
         font-family: "Source Serif 4", serif;
         font-optical-sizing: auto;
         font-weight: 400;
         font-style: normal;
}
.caveat-brush-regular {
    font-family: "Caveat Brush", cursive;
    font-weight: 400;
    font-style: normal;
}
.dancing-script-regular {
     font-family: "Dancing Script", cursive;
     font-optical-sizing: auto;
     font-weight: 400;
     font-style: normal;
}
.dancing-script-900 {
    font-family: "Dancing Script", cursive;
    font-optical-sizing: auto;
    font-weight: 900;
    font-style: normal;
}
/* FIN Fonts */



/* REGLES GENERALES */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
html, body {
    min-height: 100% !important;
    position: relative;
    background: #ece5e5;
}
body {
    font-family: "Source Serif 4", serif;
}
/* FIN REGLES GENERALES */




/* DEBUT RACCOURCIS FLEX */
    .flex-row {
        display: flex;
        flex-direction: row;
    }
    .flex-col {
        display: flex;
        flex-direction: column;
    }
/* FIN RACCOURCIS FLEX */




/* VARIABLES */
:root {
    --color-1: #8D6E63;
    --color-2: white;
    --bc-naturo-1: #E4FCF9;
    --bc-reflexo-1: #F1FDE4;

    --bg-color-1: #E3EED7;/* #top-info-page */

    --scroll-width: 0%; /* progress bar valeur de départ */

    --font-size-h1-1: 68px;
    --font-size-h1-2 : 35px;
}



/* DEBUT COULEURS */
.colorBrown-1 {
    color: var(--color-1);
}
.colorWhite {
    color: var(--color-2);
}
.colorBrown-1-f {
    /* Filter générateur : https://codepen.io/sosuke/pen/Pjoqqp */
    /* Où bien changer le svg : https://stackoverflow.com/questions/24933430/img-src-svg-changing-the-styles-with-css */
    filter: invert(44%) sepia(15%) saturate(673%) hue-rotate(330deg) brightness(99%) contrast(86%);
    transition: 0.3s all;
}
.colorBrown-1-f:hover {
    filter: invert(82%) sepia(9%) saturate(393%) hue-rotate(332deg) brightness(96%) contrast(87%);
}

/* FIN COULEURS */

/* DEBUT FONT SIZE */

/* FIN Font SIZE */

/* DEBUT AUTRES */
.remove-link-style {
    color: black;
    text-decoration: none;
}
.font-w-500 {
    font-weight: 500;
}
.style-bar-1 {
    width: 35%;
    display: block;
    height: 5px;
    background-color: #108080;
    margin: 5px 0px;
}
.img-size-1 {
    width: 35px;
    height: 35px;
}
.img-size-2 {
    width: 50px;
    height: 50px;
}
.img-responsive-0 {
    width: 100%;
    height: auto;
}
.letter-spacing-0-5 {
    letter-spacing: 0.5px;
}
.core-menu, .sub-menu, .sub-menu-mobile {
    list-style-type: none;
}
.menu-item {
    display: inline-block;
    margin-right: 30px;
}
.underline-style-0 {
    text-decoration: none;
}
.menu-item .underline-style-1 {
    color: black;

    text-decoration: underline 0.15em rgba(0, 0, 0, 0);
    text-underline-offset: 5px;
    transition: text-decoration-color 300ms;
}
.menu-item .underline-style-1:hover {
    text-decoration-color: var(--color-1);
}
.opacity0 {
    opacity: 0% !important;
}
.opacity100 {
    opacity: 100% !important;
}
.zIndex100 {
    z-index: 100 !important ;
}
.zIndex999 {
    z-index: 999 !important ;
}
.pointer-style {
    cursor: pointer;
}
.presentation-content {
    letter-spacing: 1px;
    line-height: 40px;
    background-color: var(--color-2);
    border-radius: 35px;
    padding: 60px;
}
.presentation-content-2 {
    background-color: white;
    padding: 40px;
    line-height: 40px;
    border-radius: 20px;
}
.marginTop-50 {
    margin-top: 50px;
}
.tAlignCenter {
    text-align: center;
}
/* FIN AUTRES */


/* DEBUT Bouton "En savoir plus" */
.btn-style-0 {
    background-color: #C6BF86;
    transition: background-color 0.2s ease-in;
    border-radius: 5px;
    border: none;

    width: 200px;
}

.btn-style-1 {
    background-color: #C6BF86;
    transition: background-color 0.2s ease-in;
    border-radius: 5px;
    border: none;

    width: 170px;
}
/* button sans link dedans (Holistiques) */
.btn-style-1-bis {
    background-color: #C6BF86;
    transition: background-color 0.2s ease-in;
    border-radius: 5px;
    border: none;

    width: 170px;
    display: block;
    padding: 5px;

    color: white;
    text-decoration: none;
    font-weight: 500;
}
.btn-style-0 a {
    display: block;
    padding: 20px;

    color: white;
    text-decoration: none;
    font-weight: 500;
}
.btn-style-1 a {
    display: block;
    padding: 5px;

    color: white;
    text-decoration: none;
    font-weight: 500;
}


.btn-style-0:hover, .btn-style-1:hover  {
    background-color: #A37700;
}
/* FIN Bouton "En savoir plus */


/* i.e : "Bienvenue" et "Témoignages" */
.bigTitle-40 {
    font-size: 40px;
}
.bigTitle-65 {
    font-size: 65px;
}
.bigTitle-35 {
    font-size: 35px;
}
/* i.e. "Témoigniages" */
.title-0-style.caveat-brush-regular {
    text-transform: uppercase;
}
/* i.e : mes pratiques holistiques ; Mon accompagnement ... */
.title-1-style.caveat-brush-regular {
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #B68500;
}
.title-1b-style.caveat-brush-regular {
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #4D0072;
}
/* i.e : "Naturopathie" et "Réflexologie" sous "Mes pratiques holistiques" */
.title-2-style.caveat-brush-regular {
    color: #686767;
}
/* i.e : Qui suis-je ? */
.title-3-style.caveat-brush-regular {
    color: #094848;
    text-transform: uppercase;
    letter-spacing: 3px;
}
.title-4-style.caveat-brush-regular {
    color: white;
    letter-spacing: 3px;
    font-weight: 500;
    text-align: center;
    font-size: 24px;
}



/* i.e. localisation, horaire, téléphone ... */
.iconColor-1 {
    background-color: #4D0072;
}
/* Box shadow standard */
.common-box-shadow {
    -webkit-box-shadow: 5px 5px 15px 3px rgba(0,0,0,0.53);
    box-shadow: 5px 5px 15px 3px rgba(0,0,0,0.53);
}

/* "naturopathie" et "réflexologie" */
.important-text-1 {
    color: #035EFA;
}

/* Style pour les catégories articles de blog */
.categ-style-1 {
    color: #3D0072;
    font-style: italic;
}



/* Mise en valeur texte */
/* i.e. bzh web création */
.highlighted-style-0 {
    color: white !important;
}
/* i.e. Naturopathie et Réflexologie */
.highlighted-style-1 {
    color: #035EFA;
}
.highlighted-style-2 {
    color: #035EFA;
    text-decoration: underline;
}
.highlighted-style-regular {
    font-weight: normal;
}
.highlighted-style-bold {
    font-weight: bold;
}


/* DEBUT Style du bouton "Lire article" + effet au hover */
.btn-lireArticle-1 {
    background-color: white;
    border: 2px solid #FE6A00;
}
.btn-lireArticle-1 a {
    display: block;
    text-decoration: none;
    transition: text-decoration 0.2s ease-in;
    padding: 15px 25px;
    font-weight: 500;
    color : #FE6A00;

    position: relative; /* important pour l'effet du hover */
    /*overflow: hidden;*/
}
.btn-lireArticle-1 a::after {
    content: '';
    position: absolute;
    bottom: 0px;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: #FE6A00;
    transform: translateX(-100%);/* l'axe X est invisible (départ du coin gauche) */
    transition: transform 0.2s ease-in;
}
.btn-lireArticle-1 a:hover::after {
    transform: translateX(0); /* l'axe X devient visible et prend toute la longueur */
}
/* FIN bouton "Lire article" */



/* DEBUT Effet de zoom sur les images des articles */
.article-img-zoom img {
    transition: transform 0.5s ease;
    width: 100%;
    height: 100%;
}
.article-img-zoom {
    overflow: hidden;
    width: 100%;
    height: 100%;
}
.article-img-zoom img:hover {
    transform: scale(1.1);
}
/* FIN Effet de zoom */



/* DEBUT Effet box-shadow container "Naturopathie" et "Réflexologie" */
.natu-style-1, .reflex-style-1 {
    transition: box-shadow 0.5s ease;
}
.natu-style-1 {
    box-shadow: 5px 5px 15px 3px rgba(141, 217, 207, 0.53);
}
.reflex-style-1 {
    box-shadow: 5px 5px 15px 3px rgba(216, 227, 204, 0.53);
}
/* FIN Effet box-shadow */


/* DEBUT EFFET Rotation 360deg image */
.img-rotation-ctn-1 {
    /*
    width: 200px;
    height: 200px;
     */
    border-radius: 50%;
    transition: transform 0.5s ease-in-out; /* This will add a smooth transition to the rotation */
}
.img-rotation-ctn-1:hover {
    transform: rotate(360deg); /* This will rotate the image 360 degrees when it's hovered over */
}
.img-rotation-ctn-1 img {
    /*
    width: 100%;
    height: 100%;
     */
    object-fit: cover; /* This will crop the image to fit the container */
}
/* FIN Rotation 360deg */


/* DEBUT DIVIDERS */
#intro-section {
    background-color: #ECE5E5;
}
#mes-infos-section {
    background-color: #FFCCB6;
}
#qui-suis-je-section {
    background-color: #EECFCF;
}
/* FIN DIVIDERS */

/* DEBUT Bannière divider */
header {
    height: 1000px !important;
    position: relative;
    /*background-image: url("../img/calendula.jpg");*/
    background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(194, 126, 67, 0.5)), url("../img/calendula.jpg");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;

    /*
    animation: kenBurns 60s ease forwards;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
    transform-origin: bottom left;
    animation-fill-mode: forwards;
    animation-iteration-count: infinite;

     */
}
.wave-container::before {
    content: "";
    width: 100%;
    height: 130px;
    position: absolute;
    bottom: -0.3%;
    left: 0;
    background-size: auto;
    background-repeat: repeat no-repeat;
    background-position: 20vw bottom;
    background-image: url("data:image/svg+xml;utf8,<svg viewBox='0 0 1200  134' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M0 98L50 92C100 86 200 74 300 50C400 26 500 -10 600 2C700 14 800 74 900 98C1000 122 1100 110 1150 104L1200 98V134H1150C1100 134 1000 134 900 134C800 134 700 134 600 134C500 134 400 134 300 134C200 134 100 134 50 134H0V98Z' fill='%23ece5e5'/></svg>");
}
@media(max-width:850px) {
    .wave-container::before {
        height: 65px
    }
}
/* FIN bannière divider */
/* DEBUT Intro divider */
.custom-shape-divider-bottom-2 {
    position: relative;
    bottom: 0;
    left: 0;
    width: 100%;
    overflow: hidden;
    line-height: 0;
}
.custom-shape-divider-bottom-2 svg {
    position: relative;
    display: block;
    width: calc(100% + 1.3px);
    height: 100px;
}
.custom-shape-divider-bottom-2 .shape-fill {
    fill: #FFFFFF;
}
/* FIN Intro divider */
/* DEBUT Mes pratiques */
.custom-shape-divider-bottom-3 {
    position: relative;
    bottom: -2px; /* vérifier */
    left: 0;
    width: 100%;
    overflow: hidden;
    line-height: 0;
    transform: rotate(180deg);
}
.custom-shape-divider-bottom-3 svg {
    position: relative;
    display: block;
    width: calc(100% + 1.3px);
    height: 65px;
}
.custom-shape-divider-bottom-3 .shape-fill {
    fill: #FFCCB6;
}
#intro-section {
    position: relative;
}
/* FIN Mes pratiques */
/* DEBUT qui-suis-je divider */
.custom-shape-divider-top-4 {
    position: relative;
    top: 0;
    left: 0;
    width: 100%;
    overflow: hidden;
    line-height: 0;
}
.custom-shape-divider-top-4 svg {
    position: relative;
    display: block;
    width: calc(100% + 1.3px);
    height: 65px;
    background: #EECFCF;
}
.custom-shape-divider-top-4 .shape-fill {
    fill: #FFCCB6;
}
/* FIN qui-suis-je divider */


/* DEBUT EFFETS */

@keyframes kenBurns {
    0% {
        transform: scale(1) translate(0, 0);
    }
    50% {
        transform: scale(1.2) translate(-10px, -10px);
    }
    100% {
        transform: scale(1) translate(0, 0);
    }
}


/* Effet apparition #intro-section */
/* Assurez-vous que chaque section est invisible au départ */
#intro-section,
#derniers-articles-section,
#banner-ctn {
    opacity: 0; /* Invisible */
    transform: translateY(30px); /* Déplacement vers le bas */
    transition: opacity 1s ease-out, transform 1s ease-out; /* Transition en douceur */
}

#intro-section.visible,
#derniers-articles-section.visible,
#banner-ctn.visible {
    opacity: 1; /* Complètement visible */
    transform: translateY(0); /* Position normale */
}
/* Effet de PARALLAXE */
/* prendre-rdv-section */
.prendre-rdv-parallaxe {
    background-image: url('../img/sunset.jpg');
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    height: 60vh;
}
/* FIN EFFETS DE PARALLAXE */

/* Effet bar de progression #top-info-page */
.progress-bar::before {
    content: "";
    /* toujours visible + départ en haut à gauche à 0% (cf. --scroll-width) */
    position: fixed;
    top: 0;
    left: 0;
    height: 4px;
    background-color: #5FBABA; /* Couleur de la barre */
    z-index: 10; /* Assurez-vous que la barre soit au-dessus de tout */
}
.progress-bar::before {
    width: var(--scroll-width, 0%); /* Utilise la variable CSS pour la largeur */
}

/* KEYFRAMES */
/* Effet affichage sous menu */
@keyframes FadeInUp {
    0% {
        transform: translate3d(0, 40px, 0);
    }
    to {
        transform: translateZ(0);
    }
}
/* FIN Effet affichage sous menu */
/* FIN KEYFRAMES */

/* DEBUT Effet sur menu burger */
.bar:first-child {
    transform-origin: center;
}
.bar:nth-child(2) {
    transform-origin: center;
    opacity: 1;
}
.bar:last-child {
    transform-origin: center;
}
.bars.cross .bar:first-child {
    transform: rotate(45deg) translate(4px, 5px);
}
.bars.cross .bar:nth-child(2) {
    opacity: 0;
}
.bars.cross .bar:last-child {
    transform: rotate(-45deg) translate(4px, -5px);
}
/* FIN Effet sur menu burger */

/* FIN EFFETS */



/* LES HEADERS */
/* Partie haute info */
#top-info-page.hidden {
    transform: translateY(-100%);
}

#top-info-page, #desktop-nav-ctn {
    z-index: 10;
}

.fixed-1 {
    position: fixed;
    width: 100%;
    top: 0px;
}


#top-info-page {
    background-color: var(--bg-color-1);
    justify-content: space-between;
    padding: 0px 50px;
    transition: 0.5s;
    font-size: 14px;
    min-height: 50px;
}
#top-info-page-1 {
    align-self: center;

}
#top-info-page-2 {
    align-items: center;
}
#top-info-page-2 a:first-of-type {
    margin-left: 40px;
    margin-right: 20px;
}
/* DEBUT Partie menu Desktop && Mobile */
#desktop-nav-ctn {
    justify-content: space-around;
    background-color: #F5F5F5;
    padding-top: 5px;

    opacity: 70%;
    transition: 0.5s;
}
#desktop-nav-ctn:hover {
    opacity: 1;
}
.mobile-menu-style {
    cursor: pointer;
    border: none;
    background-color: #F5F5F5;
}
#mobile-menu-btn {
    display: none;
}
.bar {
    display: flex;
    flex-flow: column nowrap;
    width: 20px;
    height: 2px;
    border-radius: 50em;
    margin-bottom: 4.4px;
    position: relative;
    background-color: black;

    transition: transform 0.3s ease-in-out;
}

#desktop-nav a {
    font-weight: 600;
}
.menu-item-has-children {
    position: relative;
}
.menu-item-has-children:hover > ul {
    opacity: 1;
    top: 86px;
    visibility: visible; /* permet de rendre le survol fonctionnel  */
}

.menu-item-has-children > ul {
    opacity: 0;
    transition: top 0.2s ease-in-out, opacity 0.2s ease-in-out;
    visibility: hidden; /* permet de rendre le survol non fonctionnel (on veut afficher le sous menu qu'à travers le menu en hover) */
}
.menu-item {
    height: 100%;
    display: flex;
    align-content: center;
}
.menu-item a {
    height: 100%;
    align-content: center;
}

.core-menu {
    height: 100%;
    align-items: center;
}
.sub-menu {
    position: absolute;
    top: 110px; /* -> 50px apparition */
    background-color: white;
    width: 220px;

    /*opacity: 0%;*/
}
.sub-menu li {
    transition: background-color 0.5s;
}
.sub-menu a {
    color: black;
    width: 100%;
    display: block;
    height: 100%;
}
.sub-menu a:first-child, .sub-menu a:last-child {
    padding: 10px 20px;
}

.sub-menu li:first-child:hover {
    background-color: var(--bc-naturo-1);<!--#E4FCF9;-->
}
.sub-menu li:last-child:hover {
    background-color: var(--bc-reflexo-1);<!--#F1FDE4;-->
}
.first-item-menu {
    color: brown;
}

#mobile-menu-ctn {
    position: fixed; /* !! */
    top: 0;
    transition: all 0.3s;
    background-color: white;
    width: 100%;
    height: 100%;
    opacity: 100%;
    z-index: -1;

    padding: 20px 50px;
}
#mobile-menu-ctn li.visible {
    animation-name: FadeInUp !important;
    animation-timing-function: cubic-bezier(.22,1,.36,1);
    animation-duration: 0.5s;
}
#mobile-menu-btn-2 {
    position: relative;
    background-color: white;
}
#mobile-nav-ctn-1 {
    justify-content: space-between;
}
#mobile-nav-ctn-2 {
    margin-top: 20px;
}
.menu-item-mobile a {
    text-decoration: none;
    color: black;
}
.menu-item-mobile {
    margin-bottom: 10px;
}
#mobile-nav-ctn .btn-style-0 {
    align-self: center;
    margin-top: 70px;
}
#mobile-nav-ctn {
    display: flex;
    flex-direction: column;
}
/* DEBUT EFFET TOGGLE MENU MOBILE */
/* transition sur la hauteur (0px -> 100px) pour afficher sous menu mobile */
.mobile-menu-toggle {
    margin-left: 10px;
    transition: transform 0.3s;
    display: inline-block; /* !! */
}
/* passe le '>' à 'v' */
.mobile-menu-toggle.open {
    transform: rotate(90deg);
}
.sub-menu-mobile {
    transition: max-height 0.3s ease-out;
    max-height: 0px;
    overflow: hidden;

    animation-name: uicoreFadeInUp;
    animation-timing-function: cubic-bezier(.22, 1, .36, 1);
    animation-duration: 0.45s;
}
.sub-menu-mobile.open {
    display: block;
    max-height: 100px; /* Ajustez selon la hauteur */
}
.sub-menu-mobile li {
    margin-left: 20px;
    margin-bottom: 10px;
}
.menu-item-has-children-mobile ul {
    margin: 5px;
}
/* FIN EFFET TOGGLE MENU MOBILE */
/* FIN Partie menu Desktop && Mobile */

/* DEBUT BANNER */
#banner-content {
    display: flex;
    flex-direction: column;
    align-items: center;
}
h1 {
    font-size: var(--font-size-h1-1);
    text-align: center;
}
#banner-buttons button:first-child {
    margin-right: 25px;
}
/* FIN BANNER */
/* FIN MENU */

    /* LES SECTIONS */

    /* DEBUT "#intro-section" */
    #intro-presentation-title h2 {
        align-self: center;
        margin-right: 50px;
    }
    #intro-section-p1 {
        justify-content: center;
        margin-left: 20%;
        margin-right: 20%;
    }
    #intro-presentation-content {
        min-width: 640px;
    }
    #intro-photo-ctn-2 {
        display: none;
        /*width: 500px;*/
        border-radius: 20px;
    }
    #intro-photo-ctn-2 img {
    }
    /* FIN "#intro-section" */



    /* DEBUT "#mes-pratiques-section" */

    #mes-pratiques-naturopathie-ctn, #mes-pratiques-reflexologie-ctn {
        padding: 50px;
        border-radius: 20px;
        min-width: 540px;
        max-width: 800px;
    }
    #mes-pratiques-naturopathie-ctn {
        background-color: var(--bc-naturo-1);
        margin-right: 50px;
    }
    #mes-pratiques-reflexologie-ctn {
        background-color: var(--bc-reflexo-1);
    }
    #mes-pratiques-section {
        align-items: center;
        margin-left: 20%;
        margin-right: 20%;
        background-color: white;
        border-radius: 40px;
    }
    #mes-pratiques-ctn {
        justify-content: space-around;
        width: 100%;
        margin-top: 50px;
        margin-bottom: 50px;

    }
    #mes-pratiques-ctn p {
        line-height: 45px;
    }
    #mes-pratiques-ctn button { align-self: flex-end;}
    /* FIN "#mes-pratiques-section" */


    /* DEBUT #mes-infos-section */
    #mon-cabinet-ctn-1, #se-rencontrer-ctn-1 {

    }
    #se-rencontrer-ctn {
        margin-top: 50px;
    }
    #se-rencontrer-ctn img {
        margin-right: 25px;
    }
    #mes-infos-generales-ctn {
        max-width: 800px;
    }
    #mes-infos-ctn {
        justify-content: center;

        flex-wrap: wrap;
        padding-top: 40px;
    }
    #se-recontrer-rs h3 {
        margin-top: 30px
    }
    #se-rencontrer-ctn-1, #mon-cabinet-ctn-1 {
        margin-left: 10px;
        margin-right: 10px;
    }
    #mes-infos-googlemap-ctn {
        align-items: center;
        justify-content: center;
        margin-right: 50px;
    }
    #mes-infos-googlemap-ctn img{
        max-height: 500px;
        border-radius: 10px;
    }

    #mes-infos-googlemap-ctn button {
        margin-top: 25px;
        margin-bottom: 25px;
    }
    #se-recontrer-rs {
        text-align: center;
    }
    #mon-cabinet-ctn h2, #se-rencontrer-ctn h2 {
        margin-bottom: 8px;
    }
    #se-rencontrer-horaire span {
        display: inline-block;
    }
    .infoAdresse {
        display: flex;
        justify-content: space-evenly;
        flex-wrap: wrap;
    }
    .infoAdresse img {
        height: auto;
        width: 100%;
        max-width: 100px;

    }
    /* FIN #mes-infos-section */

    /* DEBUT QUI SUIS JE SECTION */
    #qui-suis-je-ctn-parcours {
        margin-left: 20%;
        margin-right: 20%;
        margin-top: 50px;
        width: 100%;

        justify-content: center;
    }
    #qui-suis-je-photo p {
        margin-top: 10px;
    }
    #qui-suis-je-ctn-1 {
        border-bottom: 7px solid #108080;
    }
    #qui-suis-je-ctn-2 {
        max-width: 800px;
        margin-left: 10px;
        margin-right: 10px;
    }
    #qui-suis-je-section {
        align-items: center;
    }

    #qui-suis-je-photo img {
        width: 800px;
        height: 600px;
        margin-right: 20px;
    }
    #qui-suis-je-ctn-2 p {
        margin-bottom: 10px;
    }
    #qui-suis-je-affiliations-logos {
        margin-top: 20px;
        justify-content: space-around;
    }
    #qui-suis-je-ctn-accompagnement {
        max-width: 1500px;
        margin: 50px 10px;
        padding: 50px;
    }

    #qui-suis-je-ctn-accompagnement p {
        margin-bottom: 10px;
    }
    /* FIN QUI SUIS JE SECTION */


    /* DEBUT QUI SUIS JE SECTION */
        #prendre-rdv-section {
            display: flex;
            justify-content: center;
            align-items: center;
        }
        #prendre-rdv-ctn {
            background-color: white;
            max-width: 1700px;

            align-items: center;

            width: 100%; /* Assure que l'élément prend toute la largeur disponible */
            margin: 0 auto; /* Centre l'élément horizontalement */
            padding: 20px; /* Ajuste le padding si nécessaire */
            box-sizing: border-box;
        }
    /* FIN "prendre-rdv-section" */
    /* FIN QUI SUIS JE SECTION */



    /* DEBUT "#temoignages-section" */
    #temoignages-section {
        background-color: white;
        align-items: center;

        margin-top: 50px;
        margin-bottom: 50px;
    }
    #temoignages-section h2:first-of-type {
        margin-bottom: 40px;
    }
    .auteur-commentaire {
        color: #BCA673;
        font-weight: 600;
    }
    .large-quotes {
        position: relative;
        padding: 25px;
    }
    .large-quotes::before {
        content: "“"; /* Guillemets ouvrants */
        font-size: 100px;
        position: absolute;
        top: -10px;
        left: -10px;
        color: #BCA673;
    }
    .large-quotes::after {
        content: "”"; /* Guillemets fermants */
        font-size: 50px;
        position: absolute;
        bottom: -10px;
        right: -10px;
        color: #BCA673;
    }
    .style-bar-2 {
        width: 60%;
        height: 15px;
        background: 5px;
        background-color: rgba(0, 0, 0, 0);
        background-color: #D9D9D9;
        text-align: center;
        margin: 0 auto 50px;
    }
    /* FIN "#temoignages-section" */

    /* DEBUT DERNIERS ARTICLES */
    #derniers-articles-section {
        margin-bottom: 50px;
    }
    #derniers-articles-section h2 {
        margin-bottom: 30px;
    }
    #articles-ctn {
        justify-content: center;
    }
    .articles {
        transition: transform 0.5s ease, filter 0.5s ease; /* Transition douce pour le zoom et l'assombrissement */
        overflow: hidden; /* Empêche l'image de déborder */
        position: relative; /* Nécessaire pour les pseudo-éléments */
    }
    .articles::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-image: inherit;
        background-size: inherit;
        background-position: inherit;
        z-index: 1;
        transition: inherit;
        filter: brightness(1); /* Pas de changement de luminosité par défaut */
    }

    .articles:hover::before {
        transform: scale(1.1); /* Zoom de l'image à 110% */
        filter: brightness(0.7); /* Assombrit l'image à 70% de sa luminosité */
    }

    .articles h3, .articles span {
        position: relative;
        z-index: 2; /* Assure que le texte reste visible au-dessus de l'image */
    }
    .articles a {
        z-index: 10; /* S'assure que le texte est au-dessus de l'effet de fond */
        color: inherit; /* Assure que le texte conserve sa couleur d'origine */
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        text-decoration: none;
        color: white;
        padding: 20px;
        height: 100%;
    }
    .articles span {
        font-size: 30px;
        margin-top: 20px;
    }
    #articles-1 {
        background-image: url('../img/mother.jpg');
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;

        width: 500px;
        height: 500px;
        margin-right: 30px;
    }
    #articles-2 {
        background-image: url('../img/tranquility.jpg');
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;

        width: 500px;
        height: 235px;

        margin-bottom: 30px;
    }
    #articles-3 {
        background-image: url('../img/unhappy.jpg');
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;

        width: 500px;
        height: 235px;
    }
    #articles-4 {
        background-image: url('../img/pregnant.jpg');
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;

        width: 500px;
        height: 500px;

        margin-left: 30px;
    }
    #articles-ctn {
        flex-wrap: wrap;
    }

    /* FIN  DERNIERS ARTICLES */

    /* FIN LES SECTIONS */

    /* DEBUT index footer */
    #index-footer {
        background-color: #F2E8FE;
    }
    #index-footer p {
        line-height: 25px;
    }
    #index-footer-content-1 {

    }
    #index-footer-ctn-1 {
        justify-content: space-evenly;
        flex-wrap: wrap;
    }
    #index-footer-ctn-2 {
        background-color: #A28DBA;
        justify-content: space-evenly;
        align-items: center;
        height: 80px;
        flex-wrap: wrap;
    }
    .index-footer-title {
        display: flex;
        margin-bottom: 20px;
        align-items: center;
    }
    .index-footer-title img {
        margin-right: 10px;
        width: 70px;
    }
    .footer-part {
        width: 250px;
        margin: 20px 10px;
    }
    #index-footer-mecontacter span {
        margin-top: 20px;
        justify-content: space-evenly;
    }

    #index-footer-ctn-2 a {
        text-decoration: none;
        color: black;
    }
    #index-footer-ctn-2 ul {
        list-style-type: none;
    }
    #index-footer-ctn-2 li {
        padding-left: 10px;
    }

    #index-footer-content-2 {
        margin-left: 10px;
    }

    /* FIN index footer */


    /* Carousel */
    .swiper {
        width: 100%;
        height: 100%;
    }
    .swiper-slide {
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 22px;
        background-color: white;
    }

    .swiper-slide p {
        max-width: 1000px; /* Limite la largeur du texte des témoignages */
        text-align: center; /* Centre le texte à l'intérieur des paragraphes */
        margin: 0 auto; /* Centre le bloc p dans la slide */
        height: 400px;
    }
    #swiper-btn-1, #swiper-btn-2 {
        top: 300px;
    }
    /*
    .swiper-button-prev, .swiper-button-next {
        margin-top: 100px !important;
        position: relative;
    }
    */
    .swiper-button-next {
        color: #7C4DFF !important;
    }
    /* FIN Carousel */




    /* DEBUT @MEDIA */

    /* DEBUT MENU @MEDIA */
    @media screen and (max-width: 930px) {
        #desktop-nav {
            display: none;
        }
        #mobile-menu-btn {
            display: initial;
        }
    }
    @media screen and (max-width: 900px) {
        #top-info-page {
            flex-direction: column;
            text-align: center;
            padding: 0px;
        }
        #top-info-page-2 {
            justify-content: center;
        }
    }

    @media screen and (max-width: 440px) {
        #top-info-page {
            font-size: 9px;

        }
        #top-info-page-1 {
            line-height: 18px;
        }
        #top-info-page-2 img  {
            width: 20px;
        }
        #mobile-menu-ctn { padding: 20px 40px }
    }

    /* 2K */
    @media screen and (min-width: 2000px) {
        .wave-container {
            height: 60vh;
        }
        #top-info-page {
            justify-content: space-around;
        }
        #desktop-nav ul {
            text-transform: uppercase;
        }
    }
    /* 4k */
    @media screen and (min-width: 3000px) {
        #top-info-page {
            justify-content: space-evenly;
        }
        #desktop-nav-ctn {
            justify-content: space-evenly;
        }
    }

    /* FIN MENU MEDIA */

    /* DEBUT Banner */

    @media screen and (max-width: 1450px) {
        #intro-photo-ctn img {
            width: 400px;
            height: 600px;
        }
    }
    @media screen and (max-width: 1060px) {
        #intro-photo-ctn-2 {
            display: initial;
            margin-bottom: 25px;
        }
        #intro-presentation-ctn {
            align-items: center;
            display: flex;
            flex-direction: column;

            width: 100%;
        }
        /*
        #intro-photo-ctn-2 img {
            width: 500px;
        }

         */
        #intro-presentation-title {
            justify-content: center;
        }
        #intro-photo-ctn {
            display: none;
        }
    }
    @media screen and (max-width: 660px) {
        #intro-section-p1 {
            margin-left: 5%;
            margin-right: 5%;
        }
        #intro-presentation-content {
            max-width: 640px;
            min-width: initial;
        }
        #intro-presentation-content {

        }

    }
    @media screen and (max-width: 590px) {
        #intro-photo-ctn-2 img {

        }
    }
    @media screen and (max-width: 590px) {
        #banner-content h1 {
            font-size: var(--font-size-h1-2);
        }
        .wave-container {
            height: 65vh !important;
        }
    }
    @media screen and (max-width: 500px) {
        #intro-presentation-content {
            padding: 20px;
        }
        #intro-presentation-title h2 {
            margin-right: 5px;
            font-size: 40px;
        }
        #intro-presentation-title img {
            width: 100%;
            height: auto;
        }
    }
    @media screen and (max-width: 430px) {
        #banner-buttons {
            display: flex;
            flex-direction: column;
            align-items: center;
        }
        #banner-buttons button:first-child {
            margin-right: 0px;
            margin-bottom: 25px;
        }
    }


    /* 2K */
    @media screen and (min-width: 2000px) {
        #intro-section-p1 {
            margin-left: 20%;
            margin-right: 20%;
        }
    }
    /* FIN 2K */

    /* 4K */
    @media screen and (min-width: 3000px) {
        #intro-section-p1 {
            margin-left: 25%;
            margin-right: 25%;
        }
    }
    /* FIN 4K */

    /* FIN Banner */

    /* DEBUT MES PRATIQUES HOLISTIQUES */

    @media screen and (max-width: 1170px) {
        #mes-pratiques-naturopathie-ctn {
            margin-right: 0px;
            margin-bottom: 50px;
        }
        #mes-pratiques-ctn {
            flex-wrap: wrap;
        }
    }
    @media screen and (max-width: 560px) {
        #mes-pratiques-naturopathie-ctn, #mes-pratiques-reflexologie-ctn {
            min-width: auto;
            padding: 10px !important;
        }
        #mes-pratiques-section {
            margin-left: 5%;
            margin-right: 5%;
        }
    }

    /* FIN MES PRATIQUES */

    /* DEBUT #mes-infos-section */
    @media screen and (max-width: 1060px) {
        #mes-infos-googlemap-ctn {
            margin-right: 0px;
        }
    }
    @media screen and (max-width: 857px) {
        #se-rencontrer-ctn-1 {
            text-align: center;
        }
    }

    /* FIN #mes-infos-section */

    /* DEBUT QUI SUIS JE SECTION */
    @media screen and (max-width: 1660px) {
        #qui-suis-je-ctn-parcours {
            flex-wrap: wrap;
            justify-content: center;
        }
        #qui-suis-je-photo img {
            width: 100%;
            height: auto;
            max-width: 800px;

        }
        #qui-suis-je-ctn-2 {
            margin-top: 40px;
        }
        #qui-suis-je-affiliations-logos img {
            width: 100%;
            height: auto;
            /*max-width: 150px;*/
            max-width: 250px;
        }

    }
    @media screen and (max-width: 1598px) {
        #qui-suis-je-photo img {
            margin-right: 0px;
        }
    }
    @media screen and (max-width: 400px) {
        #qui-suis-je-ctn-2, #qui-suis-je-ctn-accompagnement {
            padding: 20px;
        }
    }
    /* FIN QUI SUIS JE SECTION */

    /* DEBUT prendre-rdv-section */
    @media screen and (max-width: 460px) {
        .prendre-rdv-parallaxe {
            height: 65vh; /* Augmente légèrement la hauteur pour conserver l'effet de parallaxe */
        }
    }
    /* FIN prendre-rdv-section */

    /* DEBUT TEMOIGNAGE */
    @media screen and (min-width: 1100px) {
        #swiper-btn-1, #swiper-btn-2 {
            top: 50px;
        }
    }
    @media screen and (max-width: 460px) {
        #swiper-btn-1, #swiper-btn-2 {
            top: 400px;
        }
        .swiper-slide p {
            height: 600px;
        }
    }
    @media screen and (max-width: 380px) {
        #swiper-btn-1, #swiper-btn-2 {
            top: 500px;
        }
    }
    /* FIN TEMOIGNAGE*/

    /* DEBUT DERNIERS ARTICLES */
    @media screen and (max-width: 1560px) {
        #articles-4 {
            margin-top: 20px;
            margin-left: 0px;
            width: 800px;
        }
    }
    @media screen and (max-width: 1020px) {
        #articles-1 {
            margin-right: 0px !important;
        }
        #articles-1 {
            margin-bottom: 20px;
        }
        #articles-2 {
            margin-bottom: 20px;
        }
        .articles {
            width: 100% !important;
        }
        #derniers-articles-ctn-2 {
            width: 100%;
        }

    }

    /* DEBUT Footer */
    @media screen and (max-width: 464px) {
        #index-footer-content-2 span span {
            content: "\A";
            white-space: pre;
            text-align: center;
            width: 100%;
            display: block;
        }
    }
    @media screen and (max-width: 333px) {
        #index-footer-ctn-2 span {
            font-size: 14px;
        }
    }


    /* FIN Footer */


    /* FIN DERNIERS ARTICLES */

    /* FIN @MEDIA */