/*
Theme Name:  Dermolab Pharma
Theme URI:   https://dermolabpharma.com
Description: Thème personnalisé Dermolab Pharma — Palette bleu-aqua. Couleurs entièrement éditables via le Customizer WordPress.
Version:     2.0.0
Author:      Dermolab Pharma
Author URI:  https://dermolabpharma.com
License:     Proprietary
Text Domain: dermolabpharma
*/

/* ============================================================
   TABLE DES MATIÈRES
   1.  CSS Variables
   2.  Reset & Base
   3.  Typography
   4.  Layout — Wrapper, Container
   5.  Header & Top Bar
   6.  Navigation Menu (Desktop)
   7.  Search
   8.  Hero Slider
   9.  Section Commune
   10. Section ACCÉDEZ
   11. Section DÉCOUVREZ
   12. Section RÉALISEZ
   13. Section CERTIFICATIONS
   14. Footer
   15. Mobile Side Slide
   16. Language Switcher
   17. Responsive — Tablet (768–1239px)
   18. Responsive — Mobile (< 768px)
   19. Hamburger Button
   20. Utilities / Helpers
   21. Subheader
   22. Page templates
============================================================ */

/* ─── 1. CSS Variables ─────────────────────────────────────────────────────── */
:root {
    /* === NOUVELLE PALETTE BLEU-AQUA === */
    --color-primary:        #1F4E79;   /* Logo & titres */
    --color-secondary:      #6FB3A8;   /* Éléments naturels/bio */
    --color-accent:         #A7D3E8;   /* Background doux */
    --color-cta:            #2F6F9F;   /* Boutons / CTA */
    --color-hover:          #5FA8D3;   /* Hover / accents */
    --color-aqua-light:     #8ED1C6;   /* Bleu aqua clair */

    /* Neutres */
    --color-bg-main:        #FFFFFF;
    --color-bg-body:        #F2F4F5;
    --color-bg-secondary:   #F2F4F5;
    --color-text-body:      #2c3e50;
    --color-text-light:     #FFFFFF;

    /* Footer */
    --color-footer-bg:      #1F4E79;
    --color-footer-text:    #FFFFFF;

    /* Menu */
    --color-menu-text:      #1F4E79;
    --color-menu-hover:     #5FA8D3;

    /* UI */
    --color-separator:      #2F6F9F;
    --color-link:           #2F6F9F;
    --color-link-hover:     #5FA8D3;

    /* Typo */
    --font-body:     "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --font-heading:  "Playfair Display", Georgia, "Times New Roman", serif;
    --font-menu:     "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

    /* Layout */
    --container-width: 1240px;
    --header-height:   108px;
    --transition:      0.3s ease;
}

/* ─── 2. Reset & Base ──────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

html {
    background-color: var(--color-bg-body);
    font-size: 18px;
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0; padding: 0;
    font-family: var(--font-body);
    font-size: 18px; line-height: 25px; font-weight: 400;
    color: var(--color-text-body);
    background-color: var(--color-bg-body);
    overflow-x: hidden;
}

img { max-width: 100%; height: auto; vertical-align: bottom; display: inline-block; }

a { color: var(--color-link); text-decoration: none; transition: color var(--transition); }
a:hover, a:focus { color: var(--color-link-hover); text-decoration: none; }

ul, ol { margin: 0; padding: 0; list-style: none; }
p { margin: 0 0 1em; }

/* ─── 3. Typography ────────────────────────────────────────────────────────── */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-body);
    font-weight: 600; line-height: 1.25; letter-spacing: 0; margin: 0 0 0.5em;
}
h1 { font-size: 36px; line-height: 45px; }
h2 { font-size: 36px; line-height: 45px; }
h3 { font-size: 28px; line-height: 40px; font-weight: 700; }
h4 { font-size: 19px; line-height: 25px; font-weight: 500; }
h5 { font-size: 15px; line-height: 25px; font-weight: 700; }
h6 { font-size: 14px; line-height: 25px; font-weight: 400; }

.titleBloc { font-family: var(--font-heading); font-weight: 700; font-size: 225%; line-height: 111%; }
.paragBloc  { font-family: var(--font-body);   font-weight: 400; font-size: 200%; line-height: 111%; margin-bottom: 0.8em; }

/* ─── 4. Layout ─────────────────────────────────────────────────────────────── */
#Wrapper { background-color: var(--color-bg-main); overflow: hidden; position: relative; }

.container { max-width: var(--container-width); margin: 0 auto; padding: 0 20px; width: 100%; }
.section_wrapper { max-width: var(--container-width); margin: 0 auto; padding: 0 20px; }

.clearfix::after { content: ''; display: table; clear: both; }

.section-row { display: flex; align-items: center; flex-wrap: wrap; gap: 30px; }

/* ─── 5. Header & Top Bar ──────────────────────────────────────────────────── */
#Header_wrapper { position: relative; z-index: 1000; }
#Header { background: var(--color-bg-main); }
.header_placeholder { height: 0; }

#Top_bar {
    background: var(--color-bg-main);
    box-shadow: 0 1px 4px rgba(31,78,121,0.10);
    position: relative; z-index: 999;
}

/* Sticky */
.sticky-header #Top_bar { position: fixed; top: 0; left: 0; right: 0; transition: box-shadow var(--transition); }
.sticky-header #Top_bar.sticky { box-shadow: 0 2px 12px rgba(31,78,121,0.18); }
.sticky-header .header_placeholder { height: var(--header-height); }

#Top_bar > .container { display: flex; align-items: center; height: var(--header-height); padding: 0 20px; }
#Top_bar .column.one { flex: 1; display: flex; align-items: center; justify-content: space-between; }

.top_bar_left { display: flex; align-items: center; gap: 40px; flex: 1; min-width: 0; }

/* Logo */
.logo { flex-shrink: 0; }
.logo a { display: inline-block; line-height: 1; }
.logo img { height: 70px; width: auto; display: block; }
.logo-text { font-family: var(--font-heading); font-size: 24px; font-weight: 700; color: var(--color-primary); }

/* ─── 6. Navigation Menu (Desktop) ─────────────────────────────────────────── */
.menu_wrapper { flex: 1; display: flex; align-items: center; min-width: 0; }

/* Hamburger — hidden on desktop */
.responsive-menu-toggle {
    display: none;
    background: none; border: none; cursor: pointer;
    padding: 8px; color: var(--color-primary); line-height: 1;
    -webkit-tap-highlight-color: transparent;
}
.hamburger-icon { font-size: 28px; line-height: 1; display: block; }
.icon-menu-fine { display: none; }

#menu { width: 100%; }

#menu ul.menu-main {
    display: flex; align-items: center; gap: 0; margin: 0; padding: 0;
}

#menu ul.menu-main > li { position: relative; }

#menu ul.menu-main > li > a {
    font-family: var(--font-menu); font-size: 15px; font-weight: 700;
    color: var(--color-menu-text); padding: 10px 14px; display: block;
    white-space: nowrap; transition: color var(--transition);
    text-transform: uppercase; letter-spacing: 0;
}
#menu ul.menu-main > li > a span { position: relative; }
#menu ul.menu-main > li > a span::after {
    content: ''; position: absolute; bottom: -3px; left: 0; right: 0;
    height: 2px; background: var(--color-hover);
    transform: scaleX(0); transform-origin: left center; transition: transform var(--transition);
}
#menu ul.menu-main > li:hover > a span::after,
#menu ul.menu-main > li.current-menu-item > a span::after { transform: scaleX(1); }
#menu ul.menu-main > li:hover > a,
#menu ul.menu-main > li.current-menu-item > a { color: var(--color-hover); }

/* Sub-menu */
#menu ul.sub-menu {
    position: absolute; top: 100%; left: 0;
    background: var(--color-bg-main); min-width: 240px;
    box-shadow: 0 6px 20px rgba(31,78,121,0.15);
    opacity: 0; visibility: hidden; transform: translateY(8px);
    transition: opacity var(--transition), transform var(--transition), visibility var(--transition);
    z-index: 9999; border-top: 3px solid var(--color-cta);
}
#menu ul.menu-main > li:hover > ul.sub-menu { opacity: 1; visibility: visible; transform: translateY(0); }
#menu ul.sub-menu li a {
    font-family: var(--font-menu); font-size: 14px; font-weight: 400;
    color: var(--color-primary); padding: 10px 18px; display: block;
    transition: background var(--transition), color var(--transition);
    border-bottom: 1px solid var(--color-bg-body);
}
#menu ul.sub-menu li a:hover { background: var(--color-accent); color: var(--color-primary); }

/* Language switcher in nav */
.wpml-ls-menu-item > a { font-size: 13px !important; font-weight: 700 !important; }

/* ─── 7. Language Switcher Standalone ──────────────────────────────────────── */
.lang-switcher-wrap {
    display: flex; align-items: center; gap: 6px;
    flex-shrink: 0; margin-left: 8px;
}
.lang-switcher-wrap a {
    font-family: var(--font-menu); font-size: 13px; font-weight: 700;
    color: var(--color-primary); padding: 4px 8px;
    border: 1.5px solid var(--color-cta); border-radius: 4px;
    transition: background var(--transition), color var(--transition);
    text-transform: uppercase; line-height: 1;
}
.lang-switcher-wrap a:hover,
.lang-switcher-wrap a.lang-active {
    background: var(--color-cta); color: #fff;
}

/* ─── 8. Search ─────────────────────────────────────────────────────────────── */
.search_wrapper { flex-shrink: 0; position: relative; display: flex; align-items: center; }
.icon_search { cursor: pointer; display: block; }
.icon_search .path { stroke: var(--color-primary); transition: stroke var(--transition); }
.icon_search:hover .path { stroke: var(--color-hover); }

.form-searchform { display: flex; align-items: center; position: relative; }
.form-searchform .field {
    width: 0; padding: 0; border: none; outline: none;
    font-family: var(--font-body); font-size: 16px; background: transparent;
    transition: width var(--transition), padding var(--transition), border var(--transition);
    border-bottom: 2px solid transparent;
    overflow: hidden;
}
.form-searchform .field.active {
    width: 200px; padding: 4px 8px;
    border-bottom: 2px solid var(--color-cta);
    background: var(--color-bg-body);
}
.form-searchform .display-none { display: none; }
.mfn-close-icon {
    cursor: pointer; font-size: 14px; color: var(--color-primary);
    padding: 4px; opacity: 0.6; transition: opacity var(--transition);
}
.mfn-close-icon:hover { opacity: 1; }

/* ─── 9. Hero Slider ─────────────────────────────────────────────────────────── */
.mfn-main-slider { width: 100%; overflow: hidden; }

.hero-slider-wrapper {
    position: relative;
    overflow: hidden;
    width: 100%;
    /* Responsive height: clamp between 420px and 85vh */
    height: clamp(420px, 62vw, 85vh);
    background: var(--color-bg-secondary);
}

/* Each slide fills the wrapper absolutely so height is never 0 */
.hero-slide {
    position: absolute;
    inset: 0;                    /* top/right/bottom/left: 0 */
    width: 100%;
    height: 100%;
    cursor: pointer;
    user-select: none;
    /* Fade transition */
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.8s ease, visibility 0.8s ease;
    z-index: 0;
}
.hero-slide.active {
    opacity: 1;
    visibility: visible;
    z-index: 1;
}

/* Background image fills the slide */
.hero-slide-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    /* Subtle Ken Burns zoom */
    animation: heroZoom 8s ease-in-out infinite alternate;
}
@keyframes heroZoom {
    from { transform: scale(1); }
    to   { transform: scale(1.04); }
}

/* Overlay gradient for text legibility */
.hero-slide-content {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 0 60px 60px;
    background: linear-gradient(
        to bottom,
        rgba(0,0,0,0)    30%,
        rgba(10,30,60,.55) 100%
    );
    z-index: 2;
}

.hero-slide-subtitle {
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.12em;
    color: rgba(255,255,255,0.85);
    text-transform: uppercase;
    margin-bottom: 14px;
}

.hero-slide-title {
    font-family: var(--font-body);
    font-size: clamp(26px, 3.2vw, 48px);
    font-weight: 700;
    line-height: 1.15;
    color: #ffffff;
}
.textSliderShadow {
    text-shadow: 0 2px 14px rgba(0,0,0,0.45), 0 0 6px rgba(167,211,232,0.4);
}

/* Bullet navigation */
.hero-slider-bullets {
    position: absolute;
    bottom: 22px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 10px;
    z-index: 10;
}
.hero-bullet {
    width: 11px; height: 11px; border-radius: 50%;
    background: rgba(255,255,255,0.45);
    border: 2px solid rgba(255,255,255,0.7);
    cursor: pointer;
    padding: 0;
    transition: background var(--transition), transform var(--transition);
}
.hero-bullet.active {
    background: var(--color-aqua-light);
    border-color: var(--color-aqua-light);
    transform: scale(1.35);
}

/* Responsive heights */
@media (max-width: 1023px) {
    .hero-slider-wrapper { height: clamp(320px, 55vw, 600px); }
    .hero-slide-content  { padding: 0 36px 44px; }
    .hero-slide-subtitle { font-size: 11px; }
}
@media (max-width: 767px) {
    .hero-slider-wrapper { height: clamp(260px, 72vw, 460px); }
    .hero-slide-content  { padding: 0 20px 36px; }
    .hero-slide-subtitle { display: none; }
    .hero-slide-title    { font-size: clamp(20px, 5.5vw, 30px); }
    .hero-slider-bullets { bottom: 12px; }
}

/* Subtitle band (legacy) */
.slider-subtitle-band {
    background: var(--color-accent); color: var(--color-primary);
    padding: 8px 20px; font-size: 16px; font-weight: 600; text-align: center;
}

/* ─── 10. Section Commune ───────────────────────────────────────────────────── */
.section { padding: 60px 0; }
.section.has_content { padding: 40px 0; }
.section-page-footer { padding: 20px 0; }

/* Subheader */
#Subheader {
    width: 100%; background-color: var(--color-accent);
    padding: 84px 0;
    background-repeat: no-repeat; background-position: center center; background-size: cover;
}
@media (min-width: 768px)  { #Subheader { padding: 126px 0; } }
@media (min-width: 992px)  { #Subheader { padding: 189px 0; } }
@media (min-width: 1200px) { #Subheader { padding: 269px 0; } }

/* VC grid helpers */
.vc_row { width: 100%; display: flex; flex-wrap: wrap; margin-left: 0 !important; margin-right: 0 !important; }
.vc_row.vc_inner { margin: 0; }
.wpb_column { padding: 0 15px; }
.vc_col-sm-12 { flex: 0 0 100%; max-width: 100%; }
.vc_col-sm-9  { flex: 0 0 75%; max-width: 75%; }
.vc_col-sm-8  { flex: 0 0 66.66%; max-width: 66.66%; }
.vc_col-sm-7  { flex: 0 0 58.33%; max-width: 58.33%; }
.vc_col-sm-6  { flex: 0 0 50%; max-width: 50%; }
.vc_col-sm-5  { flex: 0 0 41.66%; max-width: 41.66%; }
.vc_col-sm-4  { flex: 0 0 33.33%; max-width: 33.33%; }
.vc_col-sm-3  { flex: 0 0 25%; max-width: 25%; }

.vc_col-sm-offset-4 { margin-left: 33.33%; }
.vc_col-sm-offset-3 { margin-left: 25%; }
.vc_col-sm-offset-2 { margin-left: 16.66%; }
.vc_col-sm-offset-1 { margin-left: 8.33%; }
.vc_col-lg-offset-3 { margin-left: 25%; }

/* ─── 11. Section ACCÉDEZ ───────────────────────────────────────────────────── */
.section-accedez { background: var(--color-bg-main); padding: 60px 0; }
.section-accedez h2 { color: var(--color-primary); }

.accedez-photos-row {
    display: flex; align-items: flex-start; margin: 0 !important; padding: 0;
    position: relative; z-index: 5; margin-top: -35px !important;
}
.accedez-photos-row .wpb_column { flex: 0 0 25%; max-width: 25%; }
.accedez-photos-row .wpb_column:first-child { flex: 0 0 16.66%; max-width: 16.66%; }
.accedez-photos-row .wpb_column:nth-child(2),
.accedez-photos-row .wpb_column:nth-child(3),
.accedez-photos-row .wpb_column:nth-child(4) { flex: 0 0 27.78%; max-width: 27.78%; }
.accedez-photos-row .vc_column-inner { padding: 0 5px; }
.accedez-photos-row img { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; }

.blocImgSecond-img { width: 100%; height: auto; display: block; margin-bottom: 0; }
@media (min-width: 768px)  { .blocImgSecond-img { margin-bottom: -26%; } }
@media (min-width: 992px)  { .blocImgSecond-img { margin-bottom: -26%; } }
@media (min-width: 1200px) { .blocImgSecond-img { margin-bottom: -38%; } }
@media only screen and (max-width: 767px) { .accedez-photos-row { display: none !important; } }

/* ─── 12. Section DÉCOUVREZ ─────────────────────────────────────────────────── */
.section-decouvrez { background: var(--color-secondary); padding: 70px 0; }
.section-decouvrez h2, .section-decouvrez h3 { color: #fff; }
.section-decouvrez p { color: rgba(255,255,255,0.92); }

/* ─── 13. Section RÉALISEZ ──────────────────────────────────────────────────── */
.section-realisez { background: var(--color-bg-secondary); padding: 60px 0; }
.section-realisez h2 { color: var(--color-primary); }

/* ─── 14. Section CERTIFICATIONS ───────────────────────────────────────────── */
.section-certifications { background: var(--color-bg-main); padding: 40px 0; border-top: 1px solid var(--color-accent); }
.section-certifications img { max-height: 80px; width: auto; opacity: 0.85; transition: opacity var(--transition); }
.section-certifications img:hover { opacity: 1; }

/* ─── 15. Footer ────────────────────────────────────────────────────────────── */
#Footer {
    background-color: var(--color-footer-bg);
    color: var(--color-footer-text);
}
#Footer .widgets_wrapper { padding: 48px 0 36px; }
#Footer .container { display: flex; flex-wrap: wrap; gap: 20px; }
#Footer .column { padding: 0 15px; }
#Footer .mobile-one.tablet-one-second.one-second { flex: 0 0 50%; max-width: 50%; }
#Footer .mobile-one.tablet-one-fourth.one-fourth { flex: 0 0 25%; max-width: 25%; }

.footer-widget p, .footer-widget a { color: var(--color-footer-text); font-size: 15px; }
.footer-widget a:hover { color: var(--color-aqua-light); }
.footer-widget strong { color: var(--color-aqua-light); }
.footer-group-logo img { opacity: 0.85; filter: brightness(0) invert(1); max-width: 140px; }
.footer-group-logo img:hover { opacity: 1; }

/* ─── 16. Mobile Side Slide ──────────────────────────────────────────────────── */
#Side_slide {
    position: fixed; top: 0;
    right: -300px; width: 300px; height: 100vh;
    background: var(--color-bg-main);
    box-shadow: -4px 0 24px rgba(31,78,121,0.18);
    transition: right 0.35s cubic-bezier(0.4,0,0.2,1);
    z-index: 1100; overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}
#Side_slide.open { right: 0; }

#Side_slide .close-wrapper {
    display: flex; justify-content: flex-end;
    padding: 18px 18px 10px;
    border-bottom: 1px solid var(--color-accent);
}
#Side_slide .close {
    color: var(--color-primary); font-size: 22px; cursor: pointer;
    background: none; border: none; padding: 4px; line-height: 1;
    transition: color var(--transition);
}
#Side_slide .close:hover { color: var(--color-hover); }
.icon-cancel-fine { display: none; }

#Side_slide .menu_wrapper { padding: 10px 0; }
#Side_slide ul.mobile-menu { padding: 0; margin: 0; }
#Side_slide ul.mobile-menu li { border-bottom: 1px solid var(--color-bg-secondary); }
#Side_slide ul.mobile-menu li a {
    display: block; padding: 14px 24px;
    font-family: var(--font-menu); font-size: 15px; font-weight: 600;
    color: var(--color-primary); text-transform: uppercase;
    transition: background var(--transition), color var(--transition);
}
#Side_slide ul.mobile-menu li a:hover { background: var(--color-accent); color: var(--color-cta); }

/* Sub-menu mobile */
#Side_slide ul.mobile-menu li ul.sub-menu { padding-left: 0; background: var(--color-bg-secondary); }
#Side_slide ul.mobile-menu li ul.sub-menu li a {
    padding: 11px 36px; font-size: 14px; font-weight: 400;
    color: var(--color-cta); text-transform: none;
}
#Side_slide ul.mobile-menu li ul.sub-menu li a:hover { background: var(--color-accent); color: var(--color-primary); }

/* Language switcher in side slide */
#Side_slide .lang-switcher-wrap {
    padding: 16px 24px; border-top: 1px solid var(--color-accent);
    justify-content: flex-start;
}

/* Body overlay */
#body_overlay {
    display: none; position: fixed; inset: 0;
    background: rgba(31,78,121,0.45); z-index: 1050;
    backdrop-filter: blur(2px);
}
#body_overlay.active { display: block; }

/* ─── 17. Responsive — Tablet 768–1239px ───────────────────────────────────── */
@media (max-width: 1239px) {
    /* Show hamburger, hide desktop nav */
    .responsive-menu-toggle { display: flex !important; align-items: center; }
    .menu_wrapper #menu { display: none !important; }

    /* Adjust header layout */
    .top_bar_left { gap: 16px; }
    #Top_bar > .container { height: 80px; }
    .sticky-header .header_placeholder { height: 80px; }
    --header-height: 80px;
    .logo img { height: 55px; }
}

@media (min-width: 768px) and (max-width: 1239px) {
    /* Footer cols */
    #Footer .mobile-one.tablet-one-second.one-second { flex: 0 0 50%; max-width: 50%; }
    #Footer .mobile-one.tablet-one-fourth.one-fourth { flex: 0 0 50%; max-width: 50%; }

    /* VC columns responsive */
    .vc_col-sm-6  { flex: 0 0 100%; max-width: 100%; }
    .vc_col-sm-4  { flex: 0 0 50%; max-width: 50%; }
    .vc_col-sm-3  { flex: 0 0 50%; max-width: 50%; }
    .vc_col-sm-offset-4 { margin-left: 0; }
    .vc_col-sm-offset-2 { margin-left: 0; }
}

/* ─── 18. Responsive — Mobile < 768px ──────────────────────────────────────── */
@media (max-width: 767px) {
    :root { --header-height: 70px; }
    #Top_bar > .container { height: 70px; }
    .sticky-header .header_placeholder { height: 70px; }
    .logo img { height: 46px; }

    /* Stack all VC columns */
    .vc_col-sm-12, .vc_col-sm-9, .vc_col-sm-8, .vc_col-sm-7,
    .vc_col-sm-6,  .vc_col-sm-5, .vc_col-sm-4, .vc_col-sm-3 {
        flex: 0 0 100% !important; max-width: 100% !important;
        margin-left: 0 !important;
    }
    .vc_col-sm-offset-4, .vc_col-sm-offset-3,
    .vc_col-sm-offset-2, .vc_col-sm-offset-1,
    .vc_col-lg-offset-3 { margin-left: 0 !important; }

    /* Footer stack */
    #Footer .column { flex: 0 0 100% !important; max-width: 100% !important; }

    /* Buttons full width */
    .vc_btn3-container.vc_btn3-center a.vc_btn3 { display: block; width: 90%; margin: 0 auto; }

    /* vc_hidden-xs */
    .vc_hidden-xs { display: none !important; }

    /* Subheader */
    #Subheader { padding: 60px 0; }

    /* Hero */
    .hero-caption h2 { font-size: 24px; }
    .hero-caption { padding: 20px 20px 16px; }

    h1, h2 { font-size: 26px; line-height: 32px; }
    h3 { font-size: 22px; }
}

/* ─── 19. Hamburger Button Styles ───────────────────────────────────────────── */
/* Animated hamburger icon */
.responsive-menu-toggle { position: relative; z-index: 1002; }
.hamburger-icon {
    display: flex; flex-direction: column; justify-content: space-between;
    width: 26px; height: 20px; cursor: pointer;
}
.hamburger-icon::before,
.hamburger-icon::after {
    /* We use text content ☰ for simplicity — works without icon fonts */
    display: none;
}

/* ─── 20. CTA Buttons ───────────────────────────────────────────────────────── */
a.vc_btn3 {
    display: inline-block; text-align: center; text-decoration: none;
    padding: 10px 26px; border-radius: 22px;
    font-size: 15px; font-weight: 700; letter-spacing: 0.02em;
    font-family: var(--font-menu); transition: opacity var(--transition), background var(--transition);
    cursor: pointer;
}
a.vc_btn3.vc_btn3-style-custom { background-color: var(--color-cta) !important; color: #fff !important; }
a.vc_btn3.vc_btn3-style-custom:hover { opacity: 0.88; color: #fff !important; }
.vc_btn3-container.vc_btn3-center { text-align: center; margin-bottom: 22px; }

/* ─── 21. Page — big text ───────────────────────────────────────────────────── */
.big p, p.big {
    font-size: 30px; line-height: 40px; font-weight: 300;
    color: var(--color-primary);
}
@media (max-width: 767px) {
    .big p, p.big { font-size: 18px; line-height: 26px; }
}

/* drop shadow */
.dropShadow img {
    box-shadow: 11px 11px 32px 0 rgba(0,0,0,0.16);
}

/* ─── 22. Page Expertise ────────────────────────────────────────────────────── */
.subheader-expertise { padding: 84px 0 !important; }
@media (min-width: 768px)  { .subheader-expertise { padding: 126px 0 !important; } }
@media (min-width: 992px)  { .subheader-expertise { padding: 189px 0 !important; } }
@media (min-width: 1200px) { .subheader-expertise { padding: 269px 0 !important; } }

.expertise-video-wrapper { width: 100%; line-height: 0; }
.expertise-video-wrapper video { width: 100%; height: auto; display: block; background: #000; }
.expertise-intro-text p, .expertise-glp-text p {
    font-size: 30px; line-height: 40px; font-weight: 300; color: var(--color-primary);
}
.expertise-bloc-bg { padding-bottom: 40px; }

/* ─── 23. Page Approche Personnalisée ──────────────────────────────────────── */
.subheader-approche { padding: 84px 0 !important; }
@media (min-width: 768px)  { .subheader-approche { padding: 126px 0 !important; } }
@media (min-width: 992px)  { .subheader-approche { padding: 189px 0 !important; } }
@media (min-width: 1200px) { .subheader-approche { padding: 269px 0 !important; } }

.approche-titre-row { padding-top: 30px; }
.approche-titre { font-size: 36px; line-height: 45px; font-weight: 600; color: var(--color-primary); }
.approche-main-row { display: flex; flex-wrap: wrap; gap: 0; margin-top: 20px; margin-bottom: 40px; }
.approche-img-col { flex: 0 0 50%; max-width: 50%; padding-right: 15px; position: relative; }
.approche-photo-top { margin-bottom: -25px; position: relative; z-index: 2; }
.approche-photo-top img, .approche-photo-bottom img { width: 100%; height: auto; display: block; }
.approche-bulle-row { display: flex; margin: 0 !important; padding: 0 !important; margin-top: -35% !important; }
.approche-bulle-col { flex: 0 0 66.66%; max-width: 66.66%; margin-left: 25% !important; padding: 15% !important; }
.approche-text-col { flex: 0 0 50%; max-width: 50%; padding-left: 30px; }
.approche-accroche { font-size: 30px; line-height: 40px; font-weight: 300; color: var(--color-primary); margin-bottom: 15px; }
.approche-body-text p { color: var(--color-primary); margin-bottom: 1em; }
.approche-cta-title, .approche-cta-sub { color: var(--color-secondary); line-height: 106%; font-family: var(--font-body); }
.approche-cta-title { font-size: 225%; font-weight: 700; margin-bottom: 4px; }
.approche-cta-sub   { font-size: 225%; font-weight: 400; margin-bottom: 8px; }

@media only screen and (max-width: 767px) {
    .approche-img-col, .approche-text-col { flex: 0 0 100%; max-width: 100%; padding: 0 0 20px; }
    .approche-text-col { padding-left: 0; }
    .approche-bulle-row { display: none !important; }
    .approche-accroche { font-size: 20px; line-height: 28px; }
    .approche-cta-title, .approche-cta-sub { font-size: 175%; }
    .approche-titre { font-size: 22px; }
}

/* ─── 24. Page Biologiques ──────────────────────────────────────────────────── */
.subheader-biologiques { padding: 84px 0 !important; }
@media (min-width: 768px)  { .subheader-biologiques { padding: 126px 0 !important; } }
@media (min-width: 992px)  { .subheader-biologiques { padding: 189px 0 !important; } }
@media (min-width: 1200px) { .subheader-biologiques { padding: 269px 0 !important; } }
.photoOver { margin-top: 0; }
@media (min-width: 768px)  { .photoOver { margin-top: -19%; } }
@media (min-width: 992px)  { .photoOver { margin-top: -14%; } }
@media (min-width: 1200px) { .photoOver { margin-top: -13%; } }

/* ─── 25. Pages Carrières / Contact / Equipe / Logo Corpo ───────────────────── */
.subheader-carrieres, .subheader-contact, .subheader-equipe { padding: 84px 0 !important; }
@media (min-width: 768px)  { .subheader-carrieres, .subheader-contact, .subheader-equipe { padding: 126px 0 !important; } }
@media (min-width: 992px)  { .subheader-carrieres, .subheader-contact, .subheader-equipe { padding: 189px 0 !important; } }
@media (min-width: 1200px) { .subheader-carrieres, .subheader-contact, .subheader-equipe { padding: 269px 0 !important; } }

.team .desc_wrapper h4 { display: inline; font-weight: 700; }
.team .desc_wrapper p.subtitle { font-weight: 600; color: var(--color-cta); margin-bottom: 0; display: inline-block; }
.team .desc_wrapper .desc { font-size: 19px; line-height: 25px; font-weight: 300; }
.team .desc_wrapper hr { display: none; }
.hr_color { border-top: 2px solid var(--color-secondary); margin: 8px 0; }

/* Contact form */
.wpcf7 input[type="submit"], .contact-form-fallback input[type="submit"] {
    background-color: var(--color-cta) !important;
    color: #fff; border: none; padding: 9px 24px;
    border-radius: 20px; font-size: 15px; cursor: pointer;
    font-family: var(--font-menu); font-weight: 700;
    transition: opacity var(--transition);
}
.wpcf7 input[type="submit"]:hover { opacity: 0.85; }
.grecaptcha-badge { display: block !important; }

/* Google Map */
#contact-google-map { width: 100%; height: 498px; }
#contact-google-map iframe { width: 100%; height: 498px; border: 0; display: block; }
@media (max-width: 767px) { #contact-google-map, #contact-google-map iframe { height: 300px; } }

/* ─── 26. Slider bullets (kept for specificity, defined fully in section 9) ─── */
/* No overrides needed — all bullet styles live in section 9 */

/* ─── 27. Utilities ──────────────────────────────────────────────────────────── */
.nomarginMobile50 { }
.wordspaceminus35 { letter-spacing: -0.13rem; }
.vc_hidden-lg, .vc_hidden-md, .vc_hidden-sm { }
@media (min-width: 768px)  { .vc_hidden-xs  { } }
@media (max-width: 767px)  { .vc_hidden-xs  { display: none !important; } }
@media (min-width: 992px)  { .vc_hidden-sm  { display: none !important; } }
@media (min-width: 1200px) { .vc_hidden-md  { display: none !important; } }
@media (min-width: 1200px) { .vc_hidden-lg  { display: none !important; } }
@media (max-width: 991px)  { .vc_hidden-lg, .vc_hidden-md { } }

.entry-content { width: 100%; }
.sections_group { width: 100%; }
.the_content_wrapper { padding: 30px 0; }
.wpb-content-wrapper { width: 100%; }
.vc_column-inner { padding: 0; }
.wpb_wrapper { padding: 0 8px; }

/* Avantages (Carrières) */
.avantages img { max-width: 65% !important; }
.avantages ul  { color: var(--color-cta); font-weight: 600; }
.titreAvantages  { white-space: nowrap; }
.imgIconCarrers  { margin-bottom: -35px !important; }
.imgBottomBloc   { margin-bottom: 15px !important; }
.imgBottom       { margin-bottom: -25px !important; }

/* page-pager */
.page-pager { min-height: 20px; }

/* ─── 28. Customizer Image/Video Upload Fields ──────────────────────────────── */
/* These are handled in functions.php via add_theme_support & Customizer */
/* ─── 29. Stats section — fix overlap ───────────────────────────────────────── */
.vc_row-stat .vc_column_container {
    text-align: center;
    padding-bottom: 20px;
}
.vc_row-stat .vc_column-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
}
/* The icon image uses margin-bottom:-35px inline — we need the number below it with enough top margin */
.stat-number {
    font-family: var(--font-heading);
    font-size: clamp(2.8rem, 5vw, 4.5rem);
    font-weight: 700;
    color: var(--color-primary);
    line-height: 1;
    margin-top: 50px; /* compensate the -35px img overlap + give breathing room */
    position: relative;
    z-index: 1;
}
.stat-label {
    font-family: var(--font-body);
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--color-primary);
    line-height: 1.35;
    text-align: center;
    letter-spacing: 0.04em;
    margin-top: 6px;
    position: relative;
    z-index: 1;
}
/* On mobile, reduce img negative margin effect */
@media (max-width: 767px) {
    .stat-number { margin-top: 40px; font-size: 2.4rem; }
}