/*
 Theme Name:   Chasse & Clé - Divi Child
 Theme URI:    https://chasseetcle.com
 Description:  Child theme pour Divi - Site Chasse & Clé
 Author:       Chasse & Clé
 Author URI:   https://chasseetcle.com
 Template:     Divi
 Version:      1.0.0
 License:      GNU General Public License v2 or later
 License URI:  http://www.gnu.org/licenses/gpl-2.0.html
 Text Domain:  chasseetcle
*/

/* ==========================================================================
   Divi overrides pour éviter les conflits avec le CSS Webflow
   ========================================================================== */

/* Désactiver le padding par défaut de Divi sur les sections qui contiennent du code Webflow */
.et_pb_section.et_pb_section {
    padding: 0 !important;
    background-color: transparent !important;
    background-image: none !important;
}

.et_pb_row.et_pb_row {
    padding: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
}

.et_pb_code_inner {
    max-width: 100% !important;
    overflow: visible !important;
}

/* Masquer le badge Webflow s'il apparaît */
.w-webflow-badge {
    display: none !important;
}

/* Neutraliser le z-index négatif du footer Webflow dans le contexte Divi.
   Dans Webflow original, z-index:-1 crée un effet parallax scroll-reveal.
   Dans Divi, chaque section a position:relative, donc z-index:-1 pousse
   le footer derrière le background blanc des sections Divi. */
.et_pb_code_inner > .footer {
    z-index: auto !important;
    position: relative !important;
}

/* Neutraliser le background-color des rows et columns Divi */
.et_pb_row.et_pb_row,
.et_pb_column {
    background-color: transparent !important;
}

/* ==========================================================================
   Fixed/Absolute positioned elements inside Divi sections

   Problem: Webflow elements like navbar (position:fixed) and blur-btn
   (position:fixed/absolute) are wrapped inside Divi sections that are
   block elements taking space in the layout flow, creating blank bands.

   Solution: Collapse the Divi section wrappers so they don't take space,
   while keeping overflow:visible so the fixed elements render correctly.
   ========================================================================== */

/* Sections containing fixed-position elements should collapse */
.et_pb_code_inner:has(> .navbar-wrap),
.et_pb_code_inner:has(> .blur-btn),
.et_pb_code_inner:has(> .case-study-progress-bar) {
    height: 0 !important;
    overflow: visible !important;
}

/* Propagate collapse up through Divi hierarchy */
.et_pb_code:has(.navbar-wrap),
.et_pb_column:has(.navbar-wrap),
.et_pb_row:has(.navbar-wrap),
.et_pb_section:has(.navbar-wrap) {
    height: 0 !important;
    min-height: 0 !important;
    overflow: visible !important;
    z-index: 999 !important;
    position: relative !important;
}

.et_pb_code:has(.blur-btn),
.et_pb_column:has(.blur-btn),
.et_pb_row:has(.blur-btn),
.et_pb_section:has(.blur-btn) {
    height: 0 !important;
    min-height: 0 !important;
    overflow: visible !important;
}

.et_pb_code:has(.case-study-progress-bar),
.et_pb_column:has(.case-study-progress-bar),
.et_pb_row:has(.case-study-progress-bar),
.et_pb_section:has(.case-study-progress-bar) {
    height: 0 !important;
    min-height: 0 !important;
    overflow: visible !important;
    z-index: 998 !important;
    position: relative !important;
}

/* Inline Scripts section should also collapse (no visual content) */
.et_pb_code_inner:has(> script:first-child) {
    height: 0 !important;
    overflow: hidden !important;
}

.et_pb_code:has(> .et_pb_code_inner > script:first-child),
.et_pb_column:has(> .et_pb_code > .et_pb_code_inner > script:first-child),
.et_pb_row:has(script:first-child),
.et_pb_section:has(> .et_pb_row > .et_pb_column > .et_pb_code > .et_pb_code_inner > script:first-child) {
    height: 0 !important;
    min-height: 0 !important;
    overflow: hidden !important;
}

/* ==========================================================================
   Animation Fallback CSS
   Ensure content is visible even if Webflow IX2 animation engine
   doesn't initialize. Original site uses opacity:0 as initial state
   for these elements, animated to 1 by IX2/GSAP.
   ========================================================================== */

/* Main content wrappers - CRITICAL for page visibility */
.fade-in-wrapper,
.listing-title-wrap,
.listing-img-tabs-wrapper {
    opacity: 1 !important;
}

/* Hero elements */
.hero-monogram,
.hero-v2-monogram,
.hero-2-titles,
.hero-section-bg {
    opacity: 1 !important;
}

/* Sliders */
.listings-slider.w-slider {
    opacity: 1 !important;
}

/* Timeline images (scroll-triggered in original) */
.timeline-img._2,
.timeline-img._3,
.timeline-img._4,
.timeline-img._5,
.timeline-img._6,
.timeline-img._7 {
    opacity: 1 !important;
}

/* Remove animation initial transform states */
.scroll-indicator {
    transform: none !important;
}

/* Divi waypoint animation override - disable Divi's own opacity:0 system */
.et_pb_section .et-waypoint,
.et_pb_section .et-waypoint.et_pb_code {
    opacity: 1 !important;
    -webkit-animation: none !important;
    animation: none !important;
}

/* Override any Divi before-scroll-animation opacity */
.et-pb-before-scroll-animation {
    opacity: 1 !important;
}

/* ==========================================================================
   Divi Typography & Color Overrides
   Divi sets its own defaults for body, headings, links, etc.
   These conflict with the Webflow design system which uses:
     - body color: #ebe3dd (sand-storm) on dark background #16110e
     - body font: Questrial 18px/1.2 weight 400
     - headings font: Coconat, various sizes
     - links: inherit parent color (no blue)
   ========================================================================== */

/* --- BODY: Reset Divi defaults (Open Sans 14px #666) to Webflow values --- */
body,
body.et_divi_theme,
#page-container {
    font-family: Questrial, Arial, sans-serif !important;
    font-size: 18px !important;
    color: var(--sand-storm, #ebe3dd) !important;
    font-weight: 400 !important;
    line-height: 1.2 !important;
    background-color: var(--black-licorice, #16110e) !important;
}

/* --- HEADINGS: Reset Divi defaults (#333, Open Sans, smaller sizes) --- */
h1, h2, h3, h4, h5, h6,
.et_pb_module h1, .et_pb_module h2, .et_pb_module h3,
.et_pb_module h4, .et_pb_module h5, .et_pb_module h6 {
    color: inherit !important;
    font-weight: 400 !important;
    line-height: 1.2 !important;
    padding-bottom: 0 !important;
}

h1 {
    font-family: Coconat, Arial, sans-serif !important;
    font-size: 56px !important;
    letter-spacing: -.5px !important;
}

h2 {
    font-family: Coconat, Arial, sans-serif !important;
    font-size: 48px !important;
    letter-spacing: -.48px !important;
}

h3 {
    font-family: Coconat, Arial, sans-serif !important;
    font-size: 40px !important;
    letter-spacing: -.4px !important;
}

h4 {
    font-family: Coconat, Arial, sans-serif !important;
    font-size: 36px !important;
    letter-spacing: -.36px !important;
}

h5 {
    font-family: Coconat, Arial, sans-serif !important;
    font-size: 32px !important;
    letter-spacing: .32px !important;
}

h6 {
    font-family: Coconat, Arial, sans-serif !important;
    font-size: 28px !important;
    letter-spacing: .28px !important;
}

/* --- HEADINGS: Responsive sizes (Divi desktop !important overrides Webflow mobile) --- */
@media (max-width: 991px) {
    h1 { font-size: 48px !important; }
    h2 { font-size: 40px !important; }
    h3 { font-size: 34px !important; }
    h4 { font-size: 30px !important; }
}

@media (max-width: 767px) {
    h1 { font-size: 36px !important; }
    h2 { font-size: 32px !important; }
    h3 { font-size: 28px !important; }
    h4 { font-size: 24px !important; }
    h5 { font-size: 20px !important; }
    h6 { font-size: 18px !important; }
}

@media (max-width: 479px) {
    h1 { font-size: 32px !important; }
    h2 { font-size: 28px !important; }
    h3 { font-size: 24px !important; }
    h4 { font-size: 22px !important; }
    h5 { font-size: 18px !important; }
    h6 { font-size: 16px !important; }
}

/* --- LINKS: Remove Divi blue (#2ea3f2), inherit from parent --- */
a,
a:hover {
    color: inherit !important;
    text-decoration: none !important;
}

/* --- PARAGRAPHS: Remove Divi's extra 1em padding-bottom --- */
p {
    padding-bottom: 0 !important;
}

/* --- Divi layout color overrides: ALL variants (light, dark, tablet, phone) --- */
.et_pb_bg_layout_dark,
.et_pb_bg_layout_dark h1,
.et_pb_bg_layout_dark h2,
.et_pb_bg_layout_dark h3,
.et_pb_bg_layout_dark h4,
.et_pb_bg_layout_dark h5,
.et_pb_bg_layout_dark h6 {
    color: var(--sand-storm, #ebe3dd) !important;
}

/* Light layout: Divi sets #666 for body text and #333 for headings — override both */
.et_pb_bg_layout_light {
    color: var(--sand-storm, #ebe3dd) !important;
}
.et_pb_bg_layout_light h1,
.et_pb_bg_layout_light h2,
.et_pb_bg_layout_light h3,
.et_pb_bg_layout_light h4,
.et_pb_bg_layout_light h5,
.et_pb_bg_layout_light h6 {
    color: inherit !important;
}

/* Responsive tablet variants */
.et_pb_bg_layout_light_tablet,
.et_pb_bg_layout_light_tablet h1,
.et_pb_bg_layout_light_tablet h2,
.et_pb_bg_layout_light_tablet h3,
.et_pb_bg_layout_light_tablet h4,
.et_pb_bg_layout_light_tablet h5,
.et_pb_bg_layout_light_tablet h6,
.et_pb_bg_layout_dark_tablet,
.et_pb_bg_layout_dark_tablet h1,
.et_pb_bg_layout_dark_tablet h2,
.et_pb_bg_layout_dark_tablet h3,
.et_pb_bg_layout_dark_tablet h4,
.et_pb_bg_layout_dark_tablet h5,
.et_pb_bg_layout_dark_tablet h6 {
    color: var(--sand-storm, #ebe3dd) !important;
}

/* Responsive phone variants */
.et_pb_bg_layout_light_phone,
.et_pb_bg_layout_light_phone h1,
.et_pb_bg_layout_light_phone h2,
.et_pb_bg_layout_light_phone h3,
.et_pb_bg_layout_light_phone h4,
.et_pb_bg_layout_light_phone h5,
.et_pb_bg_layout_light_phone h6,
.et_pb_bg_layout_dark_phone,
.et_pb_bg_layout_dark_phone h1,
.et_pb_bg_layout_dark_phone h2,
.et_pb_bg_layout_dark_phone h3,
.et_pb_bg_layout_dark_phone h4,
.et_pb_bg_layout_dark_phone h5,
.et_pb_bg_layout_dark_phone h6 {
    color: var(--sand-storm, #ebe3dd) !important;
}

/* --- Force color inheritance through ALL Divi wrapper elements --- */
.et_pb_section,
.et_pb_row,
.et_pb_column,
.et_pb_module,
.et_pb_code,
.et_pb_code_inner {
    color: inherit !important;
}

/* --- Prevent Divi from shrinking headings in narrow columns --- */
.et_pb_column_1_3 h1, .et_pb_column_1_4 h1, .et_pb_column_1_5 h1,
.et_pb_column_1_6 h1, .et_pb_column_2_5 h1 {
    font-size: 56px !important;
}
.et_pb_column_1_3 h2, .et_pb_column_1_4 h2, .et_pb_column_1_5 h2,
.et_pb_column_1_6 h2, .et_pb_column_2_5 h2 {
    font-size: 48px !important;
}
.et_pb_column_1_3 h3, .et_pb_column_1_4 h3, .et_pb_column_1_5 h3,
.et_pb_column_1_6 h3, .et_pb_column_2_5 h3 {
    font-size: 40px !important;
}
.et_pb_column_1_3 h4, .et_pb_column_1_4 h4, .et_pb_column_1_5 h4,
.et_pb_column_1_6 h4, .et_pb_column_2_5 h4 {
    font-size: 36px !important;
}

/* --- FORM ELEMENTS: Match Webflow styling --- */
input.text, input[type="text"], input[type="email"], input[type="tel"],
input[type="password"], textarea, select {
    background-color: transparent !important;
    border: 2px solid var(--_utility-library---border-color-2, #39332e) !important;
    color: var(--sand-storm, #ebe3dd) !important;
    font-family: Questrial, Arial, sans-serif !important;
    font-size: 16px !important;
    border-radius: 80px !important;
}

/* --- LISTS: Reset Divi's line-height override on lists --- */
#left-area ul, .entry-content ul,
#left-area ol, .entry-content ol,
ul, ol {
    line-height: inherit !important;
}

/* --- Divi module text: ensure color inheritance --- */
.et_pb_text,
.et_pb_text p,
.et_pb_text h1, .et_pb_text h2, .et_pb_text h3,
.et_pb_text h4, .et_pb_text h5, .et_pb_text h6 {
    color: inherit !important;
    font-family: inherit !important;
}

/* --- Divi blockquote: remove Divi's defaults --- */
blockquote {
    border-left: none !important;
    padding-left: 0 !important;
    margin: 0 !important;
}

/* --- Divi image max-width: prevent Divi from constraining images --- */
.et_pb_code_inner img {
    max-width: 100%;
    height: auto;
}

/* ==========================================================================
   V3 Granular Splitting — wf-relative stacking context
   The home-v2-construction page uses .fade-in-wrapper.relative which creates
   a stacking context (z-index:0, position:relative) needed for the footer
   parallax effect. Since V3 removes the wrapper, we transfer this to the
   Divi Section via module_class="wf-relative".
   ========================================================================== */
.et_pb_section.wf-relative {
    z-index: 0 !important;
    position: relative !important;
}

/* ==========================================================================
   Mobile Responsive Fixes
   - Hero section text overlap fix (sticky → relative)
   - French text overflow (longer words than English originals)
   - Listing card, FAQ, CTA, section title size adjustments
   ========================================================================== */
@media (max-width: 767px) {
    /* Hero: sticky fix */
    .paragraph-big---serif.about-hero-sticky {
        position: relative !important;
        top: auto !important;
        transform: none !important;
        margin-top: 40px !important;
    }

    .hero-title {
        font-size: 40px !important;
        line-height: 1.15 !important;
    }

    /* Long French text: prevent overflow on all title classes */
    .title-v1, .title-v2, .title-v3, .title-v4, .title-v5, .title-v6,
    .cta-title, .listing-card-title, .case-study-title, .project-listing-title {
        word-break: break-word !important;
        overflow-wrap: break-word !important;
        hyphens: auto !important;
        -webkit-hyphens: auto !important;
    }

    /* FAQ accordion titles — long French questions */
    .title-v6.mobile-smaller {
        font-size: 18px !important;
        line-height: 1.3 !important;
    }

    /* Listing card titles — override h3 global to proper card size */
    .listing-card-title {
        font-size: 20px !important;
        line-height: 1.25 !important;
    }

    /* CTA title */
    .cta-title {
        font-size: 32px !important;
        line-height: 1.2 !important;
    }

    /* Section titles */
    .title-v1 {
        font-size: 36px !important;
        line-height: 1.15 !important;
    }
}

@media (max-width: 479px) {
    /* Hero: further reduce */
    .paragraph-big---serif.about-hero-sticky {
        margin-top: 32px !important;
        font-size: 20px !important;
    }

    .hero-title {
        font-size: 32px !important;
    }

    /* Listing card titles */
    .listing-card-title {
        font-size: 18px !important;
        line-height: 1.25 !important;
    }

    /* FAQ titles */
    .title-v6.mobile-smaller {
        font-size: 16px !important;
        line-height: 1.3 !important;
    }

    /* CTA */
    .cta-title {
        font-size: 28px !important;
        line-height: 1.15 !important;
    }

    /* Section titles */
    .title-v1 {
        font-size: 32px !important;
        line-height: 1.15 !important;
    }

    /* Team card names */
    .title-v4.dark.team-card {
        font-size: 24px !important;
    }

    /* Service card titles */
    .title-v6.dark.service-cards {
        font-size: 18px !important;
    }
}

/* --- Ensure Webflow CSS custom properties are available at :root --- */
:root {
    --black-licorice: #16110e;
    --sand-storm: #ebe3dd;
    --brunswick-green: #1d4b45;
    --silver: #c1bbaf;
    --burnt-sienna: #95482c;
}