/* GOOGLE FONT - VALLEY SANS *//*
Theme Name: Zen-Hypnose Divi Child
Theme URI: https://zen-hypnose.fr/
Description: Thème enfant Divi personnalisé pour Zen-Hypnose.
Author: YoD Communication
Author URI: https://yod-communication.fr/
Template: Divi
Version: 1.0.0
Text Domain: zen-hypnose-divi-child
*/

/* Les styles principaux sont chargés depuis assets/css/custom.css */


body,
p,
h1,
h2,
h3,
h4,
h5,
h6,
a,
li,
.et_pb_module,
.et_pb_text,
.et_pb_button,
.et_pb_menu,
input,
textarea,
select,
button {
    font-family: 'Valley Sans', sans-serif !important;
}

:root {
    --module-gutter: 0px !important;
}


.footer-contact {
    display: flex;
    flex-direction: column;
    gap: 18px;
    color: #fff;
    font-size: 15px;
    line-height: 1.5;
}

.footer-contact-item {
    display: flex;
    align-items: flex-start;
    gap: 15px;
}

.footer-icon {
    font-family: "ETmodules";
    color: #d4a44a;
    font-size: 21px;
    line-height: 1;
    width: 24px;
    flex: 0 0 24px;
    margin-top: 2px;
}

.footer-contact a {
    color: #fff !important;
    text-decoration: none;
}

.footer-contact a:hover {
    color: #d4a44a !important;
}

.footer-facebook {
    font-size: 23px;
}



/* =========================================
   MENU VERTICAL DU FOOTER
   ========================================= */

/* Force l'affichage du menu classique */
.footer-menu .et_pb_menu__menu {
    display: flex !important;
}

/* Désactive complètement le menu hamburger */
.footer-menu .et_mobile_nav_menu {
    display: none !important;
}

/* Aligne le menu complètement à gauche */
.footer-menu .et_pb_menu__wrap {
    justify-content: flex-start !important;
}

/* Liste principale en vertical */
.footer-menu .et-menu {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;

    margin: 0 !important;
    padding: 0 !important;
}

/* Chaque élément du menu */
.footer-menu .et-menu > li {
    display: block !important;
    width: 100%;

    margin: 0 !important;
    padding: 0 !important;
}

/* Liens */
.footer-menu .et-menu > li > a {
    display: inline-block !important;

    margin: 0 !important;
    padding: 4px 0 !important;

    line-height: 1.4;
}

/* =========================================
   TABLETTE + MOBILE
   On conserve exactement le même menu
   ========================================= */

@media (max-width: 980px) {

    .footer-menu .et_pb_menu__menu {
        display: flex !important;
    }

    .footer-menu .et_mobile_nav_menu {
        display: none !important;
    }

    .footer-menu .et_pb_menu__wrap {
        justify-content: flex-start !important;
    }

    .footer-menu .et-menu {
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;

        margin: 0 !important;
        padding: 0 !important;
    }

    .footer-menu .et-menu > li {
        display: block !important;
        width: 100%;

        margin: 0 !important;
        padding: 0 !important;
    }
}

/* =========================================
   BOUTON "PRENDRE RDV" DU MENU
   ========================================= */

.et-menu .btn-prendre-rdv {
    display: flex !important;
    align-items: center !important;
    margin-left: 20px !important;
    padding: 0 !important;
}

.et-menu .btn-prendre-rdv > a {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px;

    padding: 13px 24px !important;

    background: linear-gradient(
        110deg,
        #b9862d 0%,
        #d4a44a 50%,
        #b9862d 100%
    );

    color: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, 0.55);
    border-radius: 50px;

    font-weight: 600 !important;
    line-height: 1.2 !important;
    white-space: nowrap;

    box-shadow: 0 4px 12px rgba(185, 134, 45, 0.18);

    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease,
        background 0.25s ease;
}


/* ICÔNE AGENDA */
.et-menu .btn-prendre-rdv > a::before {
    content: "\e023";

    font-family: "ETmodules" !important;
    font-size: 20px;
    font-weight: normal !important;
    line-height: 1;

    color: #ffffff;
}


/* HOVER */
.et-menu .btn-prendre-rdv > a:hover {
    color: #ffffff !important;

    background: linear-gradient(
        110deg,
        #a97928 0%,
        #c9963e 50%,
        #a97928 100%
    );

    transform: translateY(-2px);

    box-shadow: 0 7px 18px rgba(185, 134, 45, 0.28);

    opacity: 1 !important;
}


/* EMPÊCHE DIVI D'AJOUTER DES EFFETS INDÉSIRABLES */
.et-menu .btn-prendre-rdv > a::after {
    display: none !important;
}

@media (max-width: 980px) {

    .et_mobile_menu .btn-prendre-rdv {
        padding: 10px 20px !important;
    }

    .et_mobile_menu .btn-prendre-rdv > a {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 10px;

        background: #d4a44a;
        color: #ffffff !important;

        border-radius: 50px;
        padding: 13px 20px !important;
    }

    .et_mobile_menu .btn-prendre-rdv > a::before {
        content: "\e023";
        font-family: "ETmodules" !important;
        font-size: 20px;
        color: #ffffff;
    }
}

/* ==========================================================
   ZEN-HYPNOSE
   HEADER FIXE APRÈS 150PX DE SCROLL

   Classe à placer sur la SECTION Divi :
   header-zen
   ========================================================== */


/* ==========================================================
   1. HEADER NORMAL
   ========================================================== */

.header-zen {
    position: relative;
    width: 100%;
    z-index: 99999;
}


/* ==========================================================
   2. HEADER FIXE
   ========================================================== */

.header-zen.header-fixed {
    position: fixed !important;

    top: 0;
    left: 0;
    right: 0;

    width: 100% !important;

    background: #f5f0ea !important;
    background-color: #f5f0ea !important;

    z-index: 999999 !important;

    box-shadow: 0 5px 20px rgba(36, 55, 48, 0.10);

    /*
     * Pas de transition permanente.
     * L'animation est gérée uniquement
     * par header-enter / visible / leave.
     */
    transition: none !important;
}


/* ==========================================================
   3. FOND DIVI
   Force le fond même si Divi injecte un rgba transparent
   ========================================================== */

body .et-l--header
.et_builder_inner_content
.header-zen.header-fixed {
    background: #f5f0ea !important;
    background-color: #f5f0ea !important;
}


/* Ciblage supplémentaire de la section Theme Builder */
body .et-l--header
.et_builder_inner_content
.et_pb_section.et_pb_section_0_tb_header.header-fixed {
    background: #f5f0ea !important;
    background-color: #f5f0ea !important;
}


/* Même fond sur tous les éléments internes */
body .et-l--header
.header-zen.header-fixed .et_pb_row,

body .et-l--header
.header-zen.header-fixed .et_pb_column,

body .et-l--header
.header-zen.header-fixed .et_pb_menu,

body .et-l--header
.header-zen.header-fixed .et_pb_menu_inner_container,

body .et-l--header
.header-zen.header-fixed .et_pb_menu__wrap {
    background: #f5f0ea !important;
    background-color: #f5f0ea !important;
}


/* ==========================================================
   4. ANIMATION D'ENTRÉE
   ========================================================== */

/*
 * État initial :
 * le header est placé juste au-dessus de l'écran.
 */
.header-zen.header-fixed.header-enter {
    transform: translate3d(0, -100%, 0);
    opacity: 0;
}


/*
 * Le header descend vers sa position.
 */
.header-zen.header-fixed.header-visible {
    transform: translate3d(0, 0, 0);
    opacity: 1;

    transition:
        transform 0.32s cubic-bezier(0.22, 1, 0.36, 1),
        opacity 0.20s ease-out !important;

    will-change: transform, opacity;
}


/* ==========================================================
   5. ANIMATION DE SORTIE
   ========================================================== */

.header-zen.header-fixed.header-leave {
    transform: translate3d(0, -100%, 0);
    opacity: 0;

    transition:
        transform 0.25s ease-in,
        opacity 0.18s ease-in !important;

    will-change: transform, opacity;
}


/* ==========================================================
   6. BARRE ADMIN WORDPRESS
   ========================================================== */

body.admin-bar .header-zen.header-fixed {
    top: 32px !important;
}


/* WordPress utilise une barre de 46px sur petit écran */
@media (max-width: 782px) {

    body.admin-bar .header-zen.header-fixed {
        top: 46px !important;
    }

}


/* ==========================================================
   7. VERSION COMPACTE DU HEADER FIXE
   AUCUNE ANIMATION SUR CES ÉLÉMENTS
   ========================================================== */

.header-zen.header-fixed .et_pb_row {
    padding-top: 5px !important;
    padding-bottom: 5px !important;
}


/* LOGO */

.header-zen.header-fixed .et_pb_menu__logo img,
.header-zen.header-fixed .et_pb_image img {
    max-height: 50px !important;
    width: auto !important;

    transition: none !important;
}


/* MENU */

.header-zen.header-fixed .et-menu > li > a {
    padding-top: 10px !important;
    padding-bottom: 10px !important;

    transition: none !important;
}


/* ==========================================================
   8. BOUTON PRENDRE RDV
   ========================================================== */

.header-zen.header-fixed .btn-prendre-rdv > a {
    padding: 10px 18px !important;
    font-size: 14px !important;

    transition: none !important;
}


/* On conserve éventuellement un hover
   mais sans animation */

.header-zen.header-fixed
.btn-prendre-rdv > a:hover {
    transform: none !important;
}


/* ==========================================================
   9. PLACEHOLDER
   Empêche le contenu de sauter lorsque le header devient fixed
   ========================================================== */

.header-zen-placeholder {
    display: none;
    width: 100%;
    height: 0;
}

.header-zen-placeholder.active {
    display: block;
}


/* ==========================================================
   10. OPTIMISATION MOBILE
   ========================================================== */

@media (max-width: 980px) {

    .header-zen.header-fixed .et_pb_row {
        padding-top: 4px !important;
        padding-bottom: 4px !important;
    }

    .header-zen.header-fixed .et_pb_menu__logo img,
    .header-zen.header-fixed .et_pb_image img {
        max-height: 160px !important;
    }

}



/* SOUS-MENU PLUS LARGE */
.header-zen .et-menu li ul.sub-menu {
    width: 320px !important;
}

/* Les liens prennent toute la largeur */
.header-zen .et-menu li ul.sub-menu li,
.header-zen .et-menu li ul.sub-menu li a {
    width: 100% !important;
}

/* Plus d'espace intérieur */
.header-zen .et-menu li ul.sub-menu li a {
    padding: 10px 20px !important;
}

/* Évite les retours à la ligne inutiles */
.header-zen .et-menu li ul.sub-menu li a {
    white-space: normal;
}







/* ==========================================================
   CONTENU GUTENBERG AFFICHÉ DANS DIVI
   ========================================================== */

.et_pb_post_content {
    line-height: 1.7;
}


/* PARAGRAPHES */
.et_pb_post_content p {
    margin: 0 0 24px 0 !important;
    padding: 0 !important;
}


/* TITRES */
.et_pb_post_content h1,
.et_pb_post_content h2,
.et_pb_post_content h3,
.et_pb_post_content h4,
.et_pb_post_content h5,
.et_pb_post_content h6 {
    padding-bottom: 0 !important;
}


/* H2 */
.et_pb_post_content h2 {
    margin-top: 50px !important;
    margin-bottom: 18px !important;
}


/* H3 */
.et_pb_post_content h3 {
    margin-top: 38px !important;
    margin-bottom: 15px !important;
}


/* H4 */
.et_pb_post_content h4 {
    margin-top: 30px !important;
    margin-bottom: 12px !important;
}


/* Premier élément */
.et_pb_post_content > h1:first-child,
.et_pb_post_content > h2:first-child,
.et_pb_post_content > h3:first-child {
    margin-top: 0 !important;
}


/* IMAGE */
.et_pb_post_content figure,
.et_pb_post_content .wp-block-image {
    margin-top: 30px !important;
    margin-bottom: 40px !important;
}


/* IMAGE JUSTE APRÈS UN TITRE */
.et_pb_post_content h2 + figure,
.et_pb_post_content h3 + figure,
.et_pb_post_content h2 + .wp-block-image,
.et_pb_post_content h3 + .wp-block-image {
    margin-top: 22px !important;
}


/* LISTES */
.et_pb_post_content ul,
.et_pb_post_content ol {
    margin-top: 10px !important;
    margin-bottom: 28px !important;
    padding-left: 28px !important;
}

.et_pb_post_content li {
    margin-bottom: 8px;
}


/* CITATIONS */
.et_pb_post_content blockquote,
.et_pb_post_content .wp-block-quote {
    margin: 40px 0 !important;
    padding: 20px 30px !important;

    border-left: 3px solid #d4a44a;
}


/* GROUPES / COLONNES GUTENBERG */
.et_pb_post_content .wp-block-group,
.et_pb_post_content .wp-block-columns {
    margin-top: 35px !important;
    margin-bottom: 40px !important;
}


/* SÉPARATEURS */
.et_pb_post_content hr,
.et_pb_post_content .wp-block-separator {
    margin: 50px 0 !important;
}


/* ==========================================================
   MOBILE
   ========================================================== */

@media (max-width: 767px) {

    .et_pb_post_content p {
        margin-bottom: 20px !important;
    }

    .et_pb_post_content h2 {
        margin-top: 40px !important;
        margin-bottom: 15px !important;
    }

    .et_pb_post_content h3 {
        margin-top: 32px !important;
        margin-bottom: 12px !important;
    }

    .et_pb_post_content figure,
    .et_pb_post_content .wp-block-image {
        margin-top: 25px !important;
        margin-bottom: 32px !important;
    }

}

/* =========================================
   COLONNE DE CONTENU DIVI
   ========================================= */

.colonne-contenu {
    display: flex !important;
    flex-direction: column !important;

    /* Très important : ne pas répartir les modules */
    justify-content: center !important;

    /* On contrôle nous-mêmes l'espacement */
    gap: 0 !important;
}


/* Supprime les espacements Divi entre modules */
.colonne-contenu .et_pb_module {
    margin-bottom: 0 !important;
}


/* Petit surtitre */
.colonne-contenu .et_pb_text:nth-child(1) {
    margin-bottom: 12px !important;
}


/* Titre */
.colonne-contenu .et_pb_text:nth-child(2) {
    margin-bottom: 22px !important;
}


/* Paragraphes */
.colonne-contenu .et_pb_text:nth-child(3),
.colonne-contenu .et_pb_text:nth-child(4),
.colonne-contenu .et_pb_text:nth-child(5) {
    margin-bottom: 16px !important;
}


/* Bouton */
.colonne-contenu .et_pb_button_module_wrapper {
    margin-top: 14px !important;
}