/*
Theme Name: Divi Child CnW
Description: Divi child theme
Version: 1.0.0
Author: ComnWeb
Author URI: https://comnweb.fr/
Theme URI: https://www.elegantthemes.com/
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Template: Divi
*/

/*
Theme Name: ComnWeb Divi Child
Theme URI: https://comnweb.fr/
Description: Thème enfant Divi standard de ComnWeb.
Author: ComnWeb
Author URI: https://comnweb.fr/
Template: Divi
Version: 1.0.0
Text Domain: comnweb-divi-child
*/


/*========================================
=              VARIABLES                 =
========================================*/

:root {

/* Colors */
--primary-color: #FF5F5F;
--primary-color-light: #FFE7E7;
--primary-color-dark: #D94B4B;

--secondary-color: #F5EEEA;

--heading-text-color: #20201F;
--body-text-color: #5D5B59;
--muted-text-color: #969694;
--link-color: #FF5F5F;

--background-subtle: #FFF7F5;
--background-warm: #F5EEEA;

--border-light: #E4DEDA;

--white: #ffffff;

/* Fonts */
--font-heading: "Manrope", sans-serif;
--font-body: "Manrope", sans-serif;

/* Text sizes */
--text-xs: 0.79rem;
--text-s: clamp(0.89rem, 0.07vw + 0.87rem, 0.94rem);
--text-m: clamp(1rem, 0.19vw + 0.96rem, 1.13rem);
--text-l: clamp(1.13rem, 0.34vw + 1.06rem, 1.35rem);
--text-xl: clamp(1.27rem, 0.54vw + 1.16rem, 1.62rem);

--h4: clamp(1.25rem, 0.19vw + 1.21rem, 1.38rem);
--h3: clamp(1.56rem, 0.41vw + 1.48rem, 1.83rem);
--h2: clamp(1.95rem, 0.75vw + 1.8rem, 2.44rem);
--h1: clamp(2.44rem, 1.25vw + 2.19rem, 3.26rem);
--title: clamp(3.05rem, 2.49rem + 2.79vw, 4.88rem);

/* Spacing */
--spacing-xxs: clamp(5px, 0.48vw + 3.47px, 10px);
--spacing-xs: clamp(10px, 0.96vw + 6.94px, 20px);
--spacing-s: clamp(15px, 1.43vw + 10.41px, 30px);
--spacing-m: clamp(20px, 1.91vw + 13.88px, 40px);
--spacing-l: clamp(30px, 2.87vw + 20.82px, 60px);
--spacing-xl: clamp(40px, 3.82vw + 27.76px, 80px);
--spacing-2xl: clamp(60px, 5.74vw + 41.64px, 120px);
--spacing-3xl: clamp(120px, 11.47vw + 83.29px, 240px);
}


/*========================================
=              GLOBAL                    =
========================================*/

/*---------- POST CONTENT ----------*/

.cnw-post-content h2 {
    margin-top: 30px;
    margin-bottom: 8px;
}

.cnw-post-content h3 {
    margin-top: 15px;
    margin-bottom: 8px;
}

.cnw-post-content li {
    margin-bottom: 16px;
}

.post-content-inner {
    margin-bottom: 16px;
}


/*---------- FORM MESSAGES ----------*/

.et-pb-contact-message {
    color: var(--secondary-color);
    font-family: var(--font-body);
    font-size: 16px;
}


/*---------- BLURB ----------*/

.et_pb_blurb_position_left .et_pb_blurb_container {
    padding-left: 0;
}


/* ==========================================================================
   Talents Groupe — Video
   ========================================================================== */

.tg-video {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: var(--heading-text-color);
}

.tg-video video {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.tg-video__overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    background: rgba(32, 32, 31, 0.20);
    cursor: pointer;
    transition: background-color 0.25s ease;
}

.tg-video__overlay:hover {
    background: rgba(32, 32, 31, 0.35);
}

.tg-video__play {
    position: relative;
    width: 80px;
    height: 58px;
    border-radius: 14px;
    background: #fff;
}

.tg-video__play::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 52%;
    transform: translate(-50%, -50%);
    width: 0;
    height: 0;
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    border-left: 16px solid var(--heading-text-color);
}

.tg-video.is-playing .tg-video__overlay {
    display: none;
}

@media (max-width: 767px) {
    .tg-video__play {
        width: 68px;
        height: 50px;
        border-radius: 12px;
    }

    .tg-video__play::after {
        border-top-width: 8px;
        border-bottom-width: 8px;
        border-left-width: 13px;
    }
}


/* ==========================================================
   TALENTS — RESPONSIVE HEADER + MOBILE FULLSCREEN MENU

   STRUCTURE DIVI
   ----------------------------------------------------------
   Row            : .header-main
   Column Logo    : .header-logo
   Column Menu    : .header-nav
   Column CTA     : .header-cta
   Menu Module    : .header-menu

   FONCTIONS
   ----------------------------------------------------------
   - Header Flex responsive
   - Breakpoint mobile à 1152px
   - Menu fullscreen animé
   - Apparition progressive des liens
   - Hamburger → croix
   - Logo et CTA gérés dans Divi
   - Aucun JavaScript nécessaire
   ========================================================== */


/* ==========================================================
   1. STRUCTURE DU HEADER
   ========================================================== */

.header-main {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;

    gap: clamp(10px, 2vw, 28px);
}


/* Logo */

.header-main .header-logo {
    flex: 0 0 auto;

    width: auto;
    margin: 0;
}


/* Navigation */

.header-main .header-nav {
    flex: 1 1 auto;

    width: auto;
    min-width: 0;
    margin: 0;
}


/* CTA */

.header-main .header-cta {
    flex: 0 0 auto;

    width: auto;
    margin: 0;
}


/* Menu */

.header-main .header-menu,
.header-main .header-menu .et_pb_menu_inner_container {
    width: 100%;
}

.header-main .header-menu .et_pb_menu__wrap {
    justify-content: flex-end;
}


/* CTA : empêche le retour à la ligne */

.header-main .header-cta .et_pb_button {
    white-space: nowrap;
}


/* ==========================================================
   2. TABLETTE + MOBILE
   Breakpoint choisi : 1152px
   ========================================================== */

@media (max-width: 1152px) {


    /* ---------------------------------------------------------
       CONFIGURATION
       --------------------------------------------------------- */

    :root {
        --talents-mobile-header-height: 78px;
    }


    /* ---------------------------------------------------------
       STRUCTURE RESPONSIVE
       --------------------------------------------------------- */

    .header-main {
        position: relative;

        gap: 16px;

        overflow: visible !important;
    }


    .header-main .header-logo {
        flex: 0 0 auto;

        width: auto !important;
        margin: 0 !important;
    }


    .header-main .header-nav {
        flex: 1 1 auto;

        width: auto !important;
        min-width: 0;
        margin: 0 !important;
    }


    .header-main .header-cta {
        flex: 0 0 auto;

        width: auto !important;
        margin: 0 !important;
    }


    /* ---------------------------------------------------------
       BASCULE DESKTOP → MOBILE
       --------------------------------------------------------- */

    .header-menu .et_pb_menu__menu {
        display: none !important;
    }

    .header-menu .et_pb_menu__wrap {
        align-items: center !important;
    }

    .header-menu .et_mobile_nav_menu {
        display: flex !important;
        align-items: center !important;
        align-self: center !important;

        margin: 0 !important;
    }

    .header-menu .mobile_nav {
        display: flex !important;
        align-items: center !important;
    }

    .header-menu .mobile_menu_bar {
        position: relative;

        display: flex !important;
        align-items: center !important;

        z-index: 10001;
    }


    /* ---------------------------------------------------------
       HAMBURGER / CLOSE
       --------------------------------------------------------- */

    .header-menu
    .et_mobile_nav_menu
    .mobile_nav
    .mobile_menu_bar::before {
        color: var(--white) !important;

        transition:
            transform 0.25s ease,
            opacity 0.2s ease;
    }

    .header-menu
    .et_mobile_nav_menu
    .mobile_nav.opened
    .mobile_menu_bar::before {
        content: "\4d";

        color: var(--white) !important;

        transform: rotate(90deg);
    }


    /* ---------------------------------------------------------
       FULLSCREEN PANEL
       --------------------------------------------------------- */

    .header-menu .et_mobile_menu {
        position: fixed !important;
        inset: 0 !important;

        display: block !important;

        width: 100vw !important;

        height: 100vh !important;
        height: 100dvh !important;

        margin: 0 !important;

        padding:
        calc(var(--talents-mobile-header-height) + var(--spacing-m))
        var(--spacing-m)
        var(--spacing-l) !important;

        background: var(--heading-text-color) !important;

        border: 0 !important;
        border-radius: 0 !important;
        box-shadow: none !important;

        overflow-y: auto;

        opacity: 0;
        visibility: hidden;
        pointer-events: none;

        transform: translateY(-12px);

        transition:
            opacity 0.25s ease,
            transform 0.3s ease,
            visibility 0s linear 0.3s;

        z-index: 9999;
    }


    /* ---------------------------------------------------------
       RESET DES STYLES DIVI
       --------------------------------------------------------- */

    .header-menu .et_mobile_menu,
    .header-menu .et_mobile_menu ul,
    .header-menu .et_mobile_menu li {
        list-style: none !important;

        margin: 0 !important;
    }

    .header-menu .et_mobile_menu ul,
    .header-menu .et_mobile_menu li {
        padding-left: 0 !important;
    }

    .header-menu .et_mobile_menu li::marker {
        content: "";
    }

    .header-menu .et_mobile_menu li,
    .header-menu .et_mobile_menu li a {
        text-align: left !important;
    }


    /* ---------------------------------------------------------
       PANEL OUVERT
       --------------------------------------------------------- */

    .header-menu .mobile_nav.opened .et_mobile_menu {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;

        transform: translateY(0);

        transition-delay: 0s;
    }


    /* ---------------------------------------------------------
       MENU ITEMS
       --------------------------------------------------------- */

    .header-menu .et_mobile_menu > li {
        opacity: 0;

        transform: translateY(14px);

        transition:
            opacity 0.3s ease,
            transform 0.3s ease;
    }

    .header-menu .mobile_nav.opened .et_mobile_menu > li {
        opacity: 1;

        transform: translateY(0);
    }


    /* Apparition progressive des liens */

    .header-menu .mobile_nav.opened .et_mobile_menu > li:nth-child(1) {
        transition-delay: 0.05s;
    }

    .header-menu .mobile_nav.opened .et_mobile_menu > li:nth-child(2) {
        transition-delay: 0.09s;
    }

    .header-menu .mobile_nav.opened .et_mobile_menu > li:nth-child(3) {
        transition-delay: 0.13s;
    }

    .header-menu .mobile_nav.opened .et_mobile_menu > li:nth-child(4) {
        transition-delay: 0.17s;
    }

    .header-menu .mobile_nav.opened .et_mobile_menu > li:nth-child(5) {
        transition-delay: 0.21s;
    }


    /* ---------------------------------------------------------
       MENU LINKS
       --------------------------------------------------------- */

    .header-menu .et_mobile_menu li a {
    padding: var(--spacing-s) 0 !important;

    font-family: var(--font-heading);
    font-size: var(--h3) !important;
    font-weight: 500;

    color: var(--white) !important;

    background: transparent !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.14) !important;

    opacity: 1 !important;

    transition:
        color 0.2s ease,
        padding-left 0.2s ease;
}

    .header-menu .et_mobile_menu li a:hover,
    .header-menu .et_mobile_menu li a:focus-visible {
    padding-left: var(--spacing-xxs) !important;

    color: var(--primary-color) !important;
    background: transparent !important;
}


    /* ---------------------------------------------------------
       LOCK PAGE SCROLL
       --------------------------------------------------------- */

    body:has(.header-menu .mobile_nav.opened) {
        overflow: hidden;
    }

}


/* ==========================================================
   3. MOBILE
   ========================================================== */

@media (max-width: 767px) {

    .header-main {
        gap: 10px;
    }

}