/*
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: #c69a46;
    --primary-color-light: #f3e8d2;
    --primary-color-dark: #9f772e;

    --secondary-color: #505050;
    --secondary-color-light: #686868;
    --secondary-color-muted: #908989;

    --heading-text-color: #3f3f3f;
    --body-text-color: #666666;
    --muted-text-color: #908989;
    --link-color: #9f772e;

    --background-subtle: #f8f7f4;
    --background-warm: #fbf6eb;

    --border-light: #e4e1db;
    --border-subtle: #efede8;

    --white: #ffffff;

    /* Accent */
    --accent-color: #c69a46;
    --accent-color-light: #f3e8d2;

    /* Fonts */
    --font-heading: "Space Grotesk", sans-serif;
    --font-body: "Inter", sans-serif;

    /* Text sizes */
    --text-xs: clamp(0.72rem, calc(12.642px - 0.000833 * (100vw - 360px)), 0.7901rem);
    --text-s: clamp(0.8889rem, calc(0.000132 * (100vw - 360px) + 14.2222px), 0.9rem);
    --text-m: clamp(1rem, calc(0.001484 * (100vw - 360px) + 16px), 1.125rem);
    --text-l: clamp(1.125rem, calc(0.00334 * (100vw - 360px) + 18px), 1.4063rem);
    --text-xl: clamp(1.2656rem, calc(0.005844 * (100vw - 360px) + 20.25px), 1.7578rem);
    --text-2xl: clamp(1.4238rem, calc(0.009184 * (100vw - 360px) + 22.7813px), 2.1973rem);
    --text-3xl: clamp(1.6018rem, calc(0.013593 * (100vw - 360px) + 25.6289px), 2.7466rem);
    --text-4xl: clamp(1.802rem, calc(0.019369 * (100vw - 360px) + 28.8325px), 3.4332rem);

    /* Spacing */
    --space-0: 0;
    --space-xs: clamp(0.573rem, calc(12.642px - 0.002578 * (100vw - 360px)), 0.7901rem);
    --space-s: clamp(0.8889rem, calc(0.000453 * (100vw - 360px) + 14.2222px), 0.9271rem);
    --space-m: clamp(1rem, calc(0.005937 * (100vw - 360px) + 16px), 1.5rem);
    --space-l: clamp(1.125rem, calc(0.01546 * (100vw - 360px) + 18px), 2.427rem);
    --space-xl: clamp(1.2656rem, calc(0.031599 * (100vw - 360px) + 20.25px), 3.9269rem);
    --space-2xl: clamp(1.4238rem, calc(0.058537 * (100vw - 360px) + 22.7813px), 6.3537rem);
    --space-3xl: clamp(1.6018rem, calc(0.103047 * (100vw - 360px) + 25.6289px), 10.2803rem);
}


/*========================================
=              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 — 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(--secondary-color) !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(--secondary-color) !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) + 32px)
            clamp(32px, 8vw, 72px)
            48px !important;

        background: var(--white) !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: 20px 0 !important;

        font-family: var(--font-heading);
        font-size: clamp(1.35rem, 5vw, 1.75rem) !important;
        font-weight: 500;

        color: var(--secondary-color) !important;

        background: transparent !important;
        border-bottom: 1px solid var(--border-light) !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: 6px !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;
    }

}



/*========================================
=              COMPONENTS                =
========================================*/

/*---------- HERO BADGE ----------*/

.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;

    padding: 0.4rem 1rem;
    margin-bottom: 1.5rem;

    background: var(--white);
    border: 1px solid var(--border-light);
    border-radius: 100px;

    color: var(--body-text-color);
    font-size: 0.82rem;
    font-weight: 500;

    box-shadow: 0 1px 3px rgba(0, 64, 141, 0.06);
}

.hero-badge .dot {
    width: 6px;
    height: 6px;

    background: var(--primary-color);
    border-radius: 50%;
}


/*---------- SECTION LABELS ----------*/

.section-label,
.section-label-2 {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;

    margin-bottom: 1rem;

    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.section-label {
    color: var(--primary-color);
}

.section-label-2 {
    color: var(--primary-color-light);
}

.section-label .line,
.section-label-2 .line {
    width: 24px;
    height: 2px;
}

.section-label .line {
    background: var(--primary-color);
}

.section-label-2 .line {
    background: var(--primary-color-light);
}


/*---------- QUOTE AVATAR ----------*/

.quote-avatar {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 48px;
    height: 48px;

    background: linear-gradient(
        135deg,
        var(--primary-color),
        var(--primary-color-dark)
    );

    border-radius: 50%;

    color: var(--white);
    font-family: var(--font-heading);
    font-size: 1.1rem;
    font-weight: 700;
}


/*---------- STEP NUMBER ----------*/

.step-number {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 40px;
    height: 40px;
    margin: 0 auto 1rem;

    background: var(--primary-color);
    border-radius: 50%;

    color: var(--white);
    font-family: var(--font-heading);
    font-size: 1rem;
    font-weight: 700;
}


/*---------- TESTIMONIAL STARS ----------*/

.testimonial-stars,
.testimonial-stars-light {
    margin-bottom: 1rem;

    font-size: 0.9rem;
    letter-spacing: 2px;
}

.testimonial-stars {
    color: var(--primary-color);
}

.testimonial-stars-light {
    color: var(--primary-color-light);
}

/*---------- FICHE META ----------*/

.fiche-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

/*---------- FLOATING PROOF BAR ----------*/

.proof-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;

    z-index: 999999;

    opacity: 0;
    visibility: hidden;
    transform: translateY(120%);

    transition:
        transform 0.35s ease,
        opacity 0.35s ease,
        visibility 0.35s ease;

    pointer-events: none;
}

.proof-bar.visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);

    pointer-events: auto;
}


/*========================================
=              ENTREPRISES               =
========================================*/

/*---------- MÉTIER PILL ----------*/

.metier-pill {
    display: flex;
    align-items: center;
    gap: 0.6rem;

    padding: 0.8rem 1rem;

    background: var(--background-warm);
    border: 1px solid var(--border-subtle);
    border-radius: 8px;

    color: var(--secondary-color);
    font-size: 0.88rem;
    font-weight: 500;

    transition:
        background-color 0.2s ease,
        border-color 0.2s ease;
}

.metier-pill:hover {
    background: var(--primary-color-light);
    border-color: var(--primary-color);
}

.metier-pill .pill-dot {
    width: 8px;
    height: 8px;
    flex: 0 0 8px;

    background: var(--primary-color);
    border-radius: 50%;
}


/*========================================
=              FICHES MÉTIERS            =
========================================*/

/*---------- SALARY BAR ----------*/

.salary-bar {
    height: 4px;
    margin-top: 0.3rem;

    background: rgba(255, 255, 255, 0.1);
    border-radius: 2px;
}

.salary-bar-fill {
    height: 100%;

    background: linear-gradient(
        90deg,
        var(--primary-color),
        var(--primary-color-dark)
    );

    border-radius: 2px;
}


/*========================================
=              RESPONSIVE                =
========================================*/

@media (max-width: 767px) {

    .proof-bar {
        display: none !important;
    }

}

@media (max-width: 405px) {

    .hero-badge {
        padding: 0.4rem 1rem;
        font-size: 0.6rem;
    }

}

@media (max-width: 1380px) and (min-width: 981px) {

    .fiche-meta {
        flex-direction: column;
        align-items: flex-start;
    }

}

/*========================================
=              HERO HOME                 =
========================================*/

@media (max-width: 1380px) {

    .hero-main {
        flex-direction: column;
    }

    .hero-main > .et_pb_column {
        width: 100% !important;
        margin-right: 0 !important;
    }

}