/* ==========================================================================
   responsive.css — Correctifs header responsive
   Site : La Ruche Industrielle (thème enfant Divi « la-ruche2026 »)
   --------------------------------------------------------------------------
   Objectif :
   1. Header (#main-header) : logo + menu parfaitement alignés à toutes
      les largeurs, sans chevauchement ni passage à la ligne du menu.
   2. Bascule en menu « burger » à 980px (breakpoint natif Divi), avec
      un panneau déroulant pleine largeur, propre et scrollable.

   Ce fichier ne contient QUE des surcharges header : il peut être lié ou
   délié sans rien casser d'autre (voir instructions d'intégration en bas).

   Rappel structure Divi ciblée :
     header#main-header
       └ .container.et_menu_container         (barre blanche)
           ├ .logo_container > a > img#logo
           └ #et-top-navigation
               ├ nav#top-menu-nav > ul#top-menu > li…      (menu desktop)
               ├ #et_top_search                            (icône loupe)
               └ #et_mobile_nav_menu > .mobile_nav         (burger < 980px)
                   └ ul#mobile_menu.et_mobile_menu         (panneau, injecté en JS)
   ========================================================================== */

:root {
    /* fallback si les variables du thème enfant ne sont pas chargées */
    --rc-blue-dark: var(--color-blue-dark, #003466);
    --rc-blue-dark-alt: var(--color-blue-dark-alt, #1B3760);
    --rc-white: var(--color-white, #ffffff);
    --rc-header-h: 84px;         /* hauteur barre header (état normal) */
    --rc-header-h-fixed: 62px;   /* hauteur barre header (au scroll) */
    --rc-header-h-mobile: 64px;  /* hauteur barre header (< 980px) */

    /* --------------------------------------------------------------------
       PALIERS RESPONSIVE — alignés sur les 3 points de rupture natifs Divi.
       Toute NOUVELLE règle responsive doit utiliser exclusivement ces seuils :

         Tablette   @media (max-width: 980px)   → onglet « Tablette » du Divi Builder
         Téléphone  @media (max-width: 767px)   → onglet « Téléphone » du Divi Builder
         Petit tél. @media (max-width: 479px)   → ajustements fins (Divi interne)

       Les media queries « min-width: 981px … max-width: 1300px / 1120px » plus
       bas ne sont PAS des paliers de contenu : elles ne servent qu'à faire
       tenir le menu horizontal dans la barre. Ne rien y mettre d'autre.
       -------------------------------------------------------------------- */
    --rc-gutter-tablet: 28px;    /* marge latérale contenu — ≤ 980px */
    --rc-gutter-phone: 22px;     /* marge latérale contenu — ≤ 767px */
    --rc-gutter-phone-sm: 16px;  /* marge latérale contenu — ≤ 479px */
    --rc-stack-gap: 24px;        /* espace vertical entre colonnes empilées */
}


/* ==========================================================================
   1. BASE — commun à toutes les tailles
   ========================================================================== */

/* Divi fige parfois #main-header à une hauteur en pixels via JS (data-height*).
   On laisse la hauteur suivre le contenu ; la barre visible = .et_menu_container. */
#page-container #main-header,
#page-container #main-header.et-fixed-header {
    height: auto !important;
}

/* La barre devient une vraie ligne flex : logo à gauche, nav à droite,
   centrage vertical géré une bonne fois pour toutes. */
#page-container #main-header .container.et_menu_container {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-wrap: nowrap !important;
    gap: 24px;
    position: relative !important;         /* ancre les sous-menus / le burger */
    box-sizing: border-box;
    min-height: var(--rc-header-h);
    padding: 0 32px !important;
}
/* .container.clearfix : neutralise les pseudo-éléments qui deviendraient
   des items flex parasites (et casseraient l'alignement à droite). */
#page-container #main-header .container.et_menu_container::before,
#page-container #main-header .container.et_menu_container::after {
    display: none !important;
}

/* Logo : on sort de l'absolute positioning natif de Divi (et_header_style_left)
   pour un alignement prévisible. */
#page-container #main-header .logo_container {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    height: auto !important;
    width: auto !important;
    max-width: 55%;
    margin: 0 !important;
    padding: 0 !important;
    flex: 0 0 auto !important;
}
#page-container #main-header .logo_container .logo_helper {
    display: none !important;   /* plus nécessaire avec le flex */
}
#page-container #main-header #logo {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    transform: none !important;
    float: none !important;
    display: block !important;
    width: auto !important;
    height: auto !important;
    max-width: 240px !important;
    max-height: 52px !important;
    margin: 0 !important;
}

/* Conteneur de navigation : flex, aligné à droite, ne déborde jamais. */
#page-container #main-header #et-top-navigation {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    float: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Icône recherche (loupe) : rentrée dans la barre + centrée verticalement
   sur la même ligne que les items de menu (commun desktop / mobile). */
#page-container #main-header #et_top_search {
    display: flex !important;
    align-items: center !important;
    align-self: center !important;
    height: auto !important;
    width: auto !important;
    float: none !important;
    padding: 0 !important;
}
#page-container #main-header #et_top_search #et_search_icon {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: static !important;
    height: auto !important;
    margin: 0 !important;
    line-height: 1 !important;
}
#page-container #main-header #et_top_search #et_search_icon:before {
    position: static !important;
    top: 0 !important;
    right: auto !important;
    left: auto !important;
    display: block !important;
    line-height: 1 !important;
    font-size: 18px !important;
}


/* ==========================================================================
   2. DESKTOP ≥ 981px — menu horizontal sur UNE seule ligne
   ========================================================================== */
@media only screen and (min-width: 981px) {

    #page-container #main-header nav#top-menu-nav {
        float: none !important;
        min-width: 0 !important;
    }

    #page-container #main-header #top-menu {
        display: flex !important;
        flex-wrap: nowrap !important;        /* JAMAIS de retour à la ligne */
        align-items: center !important;
        justify-content: flex-end !important;
        float: none !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* Items de 1er niveau */
    #page-container #main-header #top-menu > li {
        display: flex !important;
        align-items: center !important;
        padding: 0 !important;
        margin: 0 !important;
        position: relative !important;       /* ancre le sous-menu sous l'item */
    }
    #page-container #main-header #top-menu > li + li {
        margin-left: 22px !important;
    }
    #page-container #main-header #top-menu > li > a {
        display: block !important;
        padding: 18px 0 !important;          /* pont de survol vers le sous-menu */
        line-height: 1 !important;
        font-size: 14px !important;
        letter-spacing: 0 !important;
        white-space: nowrap !important;      /* le libellé de 1er niveau ne se coupe pas... */
    }

    /* ...mais le sous-menu, lui, empile ses liens verticalement
       (on annule l'héritage de white-space:nowrap et tout width parasite). */
    #page-container #main-header #top-menu li ul.sub-menu {
        white-space: normal !important;
    }
    #page-container #main-header #top-menu li ul.sub-menu > li {
        display: block !important;
        width: 100% !important;
        float: none !important;
        white-space: normal !important;
    }
    #page-container #main-header #top-menu li ul.sub-menu > li > a {
        display: block !important;
        width: auto !important;
        white-space: normal !important;
    }
    /* place pour la flèche « ▾ » des items à sous-menu */
    #page-container #main-header #top-menu > li.menu-item-has-children > a {
        padding-right: 16px !important;
    }
    #page-container #main-header #top-menu > li.menu-item-has-children > a:after {
        right: 0 !important;
        top: 50% !important;
        margin-top: -0.5em !important;
    }

    /* Sous-menus : collés sous l'item, largeur fixe, jamais hors écran */
    #page-container #main-header #top-menu > li > ul.sub-menu {
        top: 100% !important;
        left: 0 !important;
        margin-top: 0 !important;
    }
    /* les derniers items s'ouvrent vers la gauche pour ne pas déborder à droite */
    #page-container #main-header #top-menu > li.menu-item-has-children:nth-last-child(-n+3) > ul.sub-menu {
        left: auto !important;
        right: 0 !important;
    }

    /* Bouton « Adhérer » : on retire le hack margin-top négatif du thème enfant
       et on le recentre verticalement. */
    #page-container #main-header #top-menu > li.btn {
        margin-left: 26px !important;
    }
    #page-container #main-header #top-menu > li.btn > a {
        margin-top: 0 !important;
        padding: 10px 18px !important;
        line-height: 1 !important;
    }

    /* Icône recherche : espace à gauche + on la rentre par rapport au bord
       arrondi de la barre (marge droite). */
    #page-container #main-header #et_top_search {
        margin: 0 12px 0 22px !important;
    }

    /* État « collé » (scroll) : header plus compact, toujours aligné */
    #page-container #main-header.et-fixed-header .container.et_menu_container {
        min-height: var(--rc-header-h-fixed);
    }
    #page-container #main-header.et-fixed-header #logo {
        max-height: 40px !important;
    }
    #page-container #main-header.et-fixed-header #top-menu > li > a {
        padding-top: 14px !important;
        padding-bottom: 14px !important;
    }
}

/* --- Largeurs intermédiaires : on resserre pour que tout tienne jusqu'à 981px --- */
@media only screen and (min-width: 981px) and (max-width: 1300px) {
    #page-container #main-header .container.et_menu_container { padding: 0 20px !important; gap: 16px; }
    #page-container #main-header #logo { max-width: 200px !important; max-height: 46px !important; }
    #page-container #main-header #top-menu > li > a { font-size: 13px !important; }
    #page-container #main-header #top-menu > li + li { margin-left: 15px !important; }
    #page-container #main-header #top-menu > li.btn { margin-left: 18px !important; }
    #page-container #main-header #top-menu > li.btn > a { padding: 9px 14px !important; }
    #page-container #main-header #et_top_search { margin-left: 14px !important; }
}

@media only screen and (min-width: 981px) and (max-width: 1120px) {
    #page-container #main-header #logo { max-width: 168px !important; max-height: 42px !important; }
    #page-container #main-header #top-menu > li > a { font-size: 12px !important; letter-spacing: -0.2px !important; }
    #page-container #main-header #top-menu > li + li { margin-left: 11px !important; }
    #page-container #main-header #top-menu > li.btn { margin-left: 12px !important; }
    #page-container #main-header #top-menu > li.btn > a { padding: 8px 12px !important; }
    #page-container #main-header #et_top_search { margin: 0 6px 0 12px !important; }
}


/* ==========================================================================
   3. MOBILE / TABLETTE ≤ 980px — menu burger
   ========================================================================== */
@media only screen and (max-width: 980px) {

    #page-container #main-header .container.et_menu_container {
        min-height: var(--rc-header-h-mobile);
        padding: 0 20px !important;
        gap: 12px;
    }

    /* Logo */
    #page-container #main-header .logo_container { max-width: none !important; }
    #page-container #main-header #logo {
        max-width: 190px !important;
        max-height: 42px !important;
    }

    /* On masque le menu desktop, on montre le burger */
    #page-container #main-header nav#top-menu-nav,
    #page-container #main-header #top-menu {
        display: none !important;
    }

    #page-container #main-header #et-top-navigation {
        width: auto !important;
        flex: 0 0 auto !important;
    }

    #page-container #main-header #et_top_search {
        margin: 0 10px 0 0 !important;
    }

    /* Bouton burger : cible tactile ≥ 44px, bien centré */
    #page-container #main-header #et_mobile_nav_menu {
        position: static !important;
        float: none !important;
        display: flex !important;
        align-items: center !important;
        margin: 0 !important;
    }
    #page-container #main-header #et_mobile_nav_menu .mobile_nav {
        display: flex !important;
        align-items: center !important;
        line-height: 1 !important;
    }
    #page-container #main-header #et_mobile_nav_menu .mobile_nav .select_page {
        display: none !important;
    }
    #page-container #main-header .mobile_menu_bar {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 44px !important;
        height: 44px !important;
        padding: 0 !important;
    }
    #page-container #main-header .mobile_menu_bar:before {
        position: static !important;
        top: 0 !important;
        left: 0 !important;
        font-size: 30px !important;
        line-height: 1 !important;
        color: var(--rc-blue-dark-alt) !important;
    }

    /* Panneau déroulant : pleine largeur, sous la barre, scrollable */
    #page-container #main-header .et_mobile_menu,
    #page-container #main-header #mobile_menu {
        position: absolute !important;
        top: 100% !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        background: var(--rc-white) !important;
        border-top: 2px solid var(--rc-blue-dark) !important;
        box-shadow: 0 14px 22px rgba(0, 0, 0, 0.12) !important;
        max-height: calc(100vh - var(--rc-header-h-mobile)) !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        -webkit-overflow-scrolling: touch;
        border-radius: 0 0 16px 16px;      /* épouse la barre header arrondie */
    }

    /* Liens : pleine largeur, tap-target confortable, hiérarchie lisible */
    #page-container #main-header .et_mobile_menu li a {
        display: block !important;
        padding: 14px 20px !important;
        font-size: 15px !important;
        line-height: 1.3 !important;
        color: var(--rc-blue-dark-alt) !important;
        border-bottom: 1px solid rgba(0, 0, 0, 0.06) !important;
        width: auto !important;             /* annule toute largeur fixe héritée */
        white-space: normal !important;     /* les libellés longs passent à la ligne */
        overflow-wrap: anywhere !important;
    }
    #page-container #main-header .et_mobile_menu > li:last-child > a {
        border-bottom: 0 !important;
    }
    #page-container #main-header .et_mobile_menu li.menu-item-has-children > a {
        font-weight: 700 !important;
        background: rgba(0, 0, 0, 0.03) !important;
    }
    /* sous-niveaux : indentation progressive */
    #page-container #main-header .et_mobile_menu li li a { padding-left: 36px !important; }
    #page-container #main-header .et_mobile_menu li li li a { padding-left: 52px !important; }
    #page-container #main-header .et_mobile_menu li li a {
        font-weight: 400 !important;
        background: transparent !important;
        font-size: 14px !important;
    }

    /* Bouton « Adhérer » dans le menu mobile : traité comme un item plein */
    #page-container #main-header .et_mobile_menu li.btn a {
        border: 0 !important;
        border-radius: 0 !important;
        margin: 0 !important;
        padding: 14px 20px !important;
        background: rgba(0, 0, 0, 0.03) !important;
        font-weight: 700 !important;
    }

    /* La recherche Divi qui glisse depuis le header : plein largeur propre */
    #page-container #main-header .et_search_outer { width: 100% !important; }
    #page-container #main-header .et-search-form,
    #page-container #main-header .et_search_form_container input {
        width: 100% !important;
        max-width: 100% !important;
    }
}

/* --- Petits téléphones (palier Divi : 479px) --- */
@media only screen and (max-width: 479px) {
    #page-container #main-header .container.et_menu_container { padding: 0 14px !important; }
    #page-container #main-header #logo { max-width: 150px !important; max-height: 38px !important; }
    #page-container #main-header #et_top_search { margin-right: 8px !important; }
    /* indentation resserrée pour garder de la largeur au texte */
    #page-container #main-header .et_mobile_menu li a { padding-left: 16px !important; padding-right: 16px !important; }
    #page-container #main-header .et_mobile_menu li li a { padding-left: 30px !important; }
    #page-container #main-header .et_mobile_menu li li li a { padding-left: 42px !important; }
}


/* ==========================================================================
   5. MODULES CHIFFRES  (.et_pb_number_counter) — nombre lisible & responsive
   --------------------------------------------------------------------------
   Problème corrigé : dans les cartes étroites (~215px), un nombre à 4 chiffres
   (« 7500 ») se coupait en deux lignes et débordait sur le libellé en dessous.
   ========================================================================== */

/* 1. Le nombre ne se coupe JAMAIS en plusieurs lignes */
#page-container .et_pb_number_counter .percent,
#page-container .et_pb_number_counter .percent p,
#page-container .et_pb_number_counter .percent-value,
#page-container .et_pb_number_counter .percent-sign {
    white-space: nowrap !important;
    word-wrap: normal !important;
    overflow-wrap: normal !important;
    word-break: keep-all !important;
    hyphens: none !important;
}

/* 2. La zone du nombre suit sa hauteur réelle -> plus de chevauchement
      avec le titre situé dessous. */
#page-container .et_pb_number_counter .percent {
    height: auto !important;
    min-height: 0 !important;
    line-height: 1.1 !important;
    overflow: visible !important;
}
#page-container .et_pb_number_counter.et_pb_with_title .percent {
    margin-bottom: 10px !important;
}
#page-container .et_pb_number_counter h3.title,
#page-container .et_pb_number_counter .title {
    white-space: normal !important;
    overflow-wrap: anywhere !important;
}

/* 3. Taille du nombre : assez grande pour l'impact, assez petite pour tenir
      dans la carte. Ajuster ces 3 valeurs si besoin. */
#page-container .et_pb_number_counter .percent p {
    font-size: 56px !important;
    line-height: 1.1 !important;
    display: block !important;
}
/* [RESPONSIVE-2026] seuils réalignés sur les paliers Divi (980 / 767).
   Anciennes valeurs :
   @media (max-width: 1100px) { … .percent p { font-size: 48px } }
   @media (max-width: 600px)  { … .percent p { font-size: 44px } }            */
@media only screen and (max-width: 980px) {
    #page-container .et_pb_number_counter .percent p { font-size: 48px !important; }
}
@media only screen and (max-width: 767px) {
    #page-container .et_pb_number_counter .percent p { font-size: 44px !important; }
}

/* Colonnes Divi étroites : on réduit encore d'un cran */
#page-container .et_pb_column_1_3 .et_pb_number_counter .percent p,
#page-container .et_pb_column_1_4 .et_pb_number_counter .percent p,
#page-container .et_pb_column_1_5 .et_pb_number_counter .percent p,
#page-container .et_pb_column_1_6 .et_pb_number_counter .percent p {
    font-size: 44px !important;
}


/* ==========================================================================
   6. GARDE-FOUS
   ========================================================================== */

/* Aucun débordement horizontal induit par le header */
#page-container #main-header,
#page-container #main-header .container.et_menu_container {
    max-width: 100%;
}
#page-container #main-header * { box-sizing: border-box; }

/* Si la barre d'admin WordPress est visible (connecté), le header fixe
   reste sous la barre — Divi le gère déjà, on ne force rien ici. */


/* ==========================================================================
   7. GOUTTIÈRES DE CONTENU — ne jamais coller au bord de l'écran
   --------------------------------------------------------------------------
   Divi donne à ses lignes une largeur de 80 % (10 % de marge de chaque côté)
   sur desktop, mais ce thème force beaucoup de .et_pb_row en width:100%,
   ce qui annule cette marge. En dessous de 980px on garantit donc une
   gouttière latérale MINIMALE et HOMOGÈNE sur toutes les lignes, pilotée par
   les 3 paliers Divi et les jetons --rc-gutter-* (cf. :root en haut).

   Portée : uniquement #main-content (le header et le footer ont leurs
   propres règles). Les lignes internes (.et_pb_row_inner) ne sont pas
   re-padées pour éviter les marges qui s'additionnent.
   ========================================================================== */
@media only screen and (max-width: 980px) {
    #main-content .et_pb_section > .et_pb_row:not(.et_pb_row_inner),
    #main-content .et_pb_row.rowImg,
    #main-content .et_pb_row.rowImgDroite,
    #main-content .et_pb_row.rowImgGauche {
        box-sizing: border-box !important;
        padding-left: var(--rc-gutter-tablet) !important;
        padding-right: var(--rc-gutter-tablet) !important;
    }
}
@media only screen and (max-width: 767px) {
    #main-content .et_pb_section > .et_pb_row:not(.et_pb_row_inner),
    #main-content .et_pb_row.rowImg,
    #main-content .et_pb_row.rowImgDroite,
    #main-content .et_pb_row.rowImgGauche {
        padding-left: var(--rc-gutter-phone) !important;
        padding-right: var(--rc-gutter-phone) !important;
    }
}
@media only screen and (max-width: 479px) {
    #main-content .et_pb_section > .et_pb_row:not(.et_pb_row_inner),
    #main-content .et_pb_row.rowImg,
    #main-content .et_pb_row.rowImgDroite,
    #main-content .et_pb_row.rowImgGauche {
        padding-left: var(--rc-gutter-phone-sm) !important;
        padding-right: var(--rc-gutter-phone-sm) !important;
    }
}


/* ==========================================================================
   8. LECTURE VERTICALE — formats smartphone (≤ 767px)
   --------------------------------------------------------------------------
   Objectif : sur téléphone, tout se lit de haut en bas, une colonne, sans
   décalage latéral asymétrique hérité du desktop.
   ========================================================================== */
@media only screen and (max-width: 767px) {

    /* Colonnes Divi : une seule par ligne + respiration verticale.
       (Divi empile déjà à 980px ; on fiabilise l'espacement.) */
    #main-content .et_pb_row > .et_pb_column,
    #main-content .et_pb_row_inner > .et_pb_column {
        width: 100% !important;
        margin-bottom: var(--rc-stack-gap) !important;
        float: none !important;
        margin-right:0 !important;
    }

#SectionChiffres .et_pb_number_counter_2.et_pb_number_counter{margin-top:0 !important;}

    #main-content .et_pb_row > .et_pb_column:last-child,
    #main-content .et_pb_row_inner > .et_pb_column:last-child {
        margin-bottom: 0 !important;
    }

    /* Décalages latéraux « image » (padding 20 % d'un seul côté) : neutralisés
       sur téléphone — ils gaspillent la largeur et cassent la lecture verticale.
       Sur desktop ils restent actifs (règles du thème non touchées). */
    #main-content .rowImg,
    #main-content .rowImgDroite,
    #main-content .rowImgGauche {
        padding-left: var(--rc-gutter-phone) !important;
        padding-right: var(--rc-gutter-phone) !important;
    }

    /* Blocs passés en flex-direction:row par le thème enfant : on repasse
       en colonne pour l'empilement vertical. */
    #main-content .step1 {
        flex-direction: column !important;
        align-items: stretch !important;
    }

    /* Modules texte : pas de largeur figée qui déborde ou se colle au bord. */
    #main-content .et_pb_text,
    #main-content .et_pb_blurb_description {
        max-width: 100% !important;
    }
}

@media only screen and (max-width: 479px) {
    #main-content .rowImg,
    #main-content .rowImgDroite,
    #main-content .rowImgGauche {
        padding-left: var(--rc-gutter-phone-sm) !important;
        padding-right: var(--rc-gutter-phone-sm) !important;
    }
}