/* 01-layout.css — overrides layout core Enfold 4.5.4 portés sur 7.1.4
 *
 * COUVRE toutes les pages (home, /competence/*, /portfolio-item/*, équipe) car
 * les règles visent le layout responsive Enfold fondamental : flex_column.av_X
 * et flex_cell.av_X doivent collapser à 100% width sur mobile.
 *
 * Pages qui en bénéficient directement :
 *   - /competence/droit-bancaire/ (toggles dans la colonne droite)
 *   - /avocats-equipe/ (grille portfolio team)
 *   - /portfolio-item/<avocat>/ (fiches avocats)
 *   - / (home Publications, Conférences, layouts grid_row)
 *
 * Symptôme observé :
 * Sur /competence/droit-bancaire/ mobile 390, les toggles (Réglementation, Financements,
 * Contentieux, Placements) apparaissent dans une colonne étroite à droite de l'écran
 * au lieu d'être en pleine largeur empilés. Le `flex_column av_one_half` parent ne
 * collapse pas à 100% de largeur sur mobile sur Enfold 7.1.4.
 *
 * Diagnostic :
 * - Les deux colonnes (description à gauche, toggles à droite) restent en 50/50
 *   sur mobile au lieu de stacker verticalement.
 * - La règle Enfold stock `.responsive #top #wrap_all .flex_column { width: 100% }`
 *   à @media (max-width:767px) existe (grid.css L230) et devrait appliquer —
 *   mais quelque chose dans le merged-styles dynamique Enfold 7.1.4 la neutralise
 *   (probablement un override CSS-var ou une règle générée par l'options panel).
 *
 * Source 4.5.4 référence : 4.5.4 n'avait pas de problème car il n'utilisait pas
 * l'avia-merged-styles-*.css généré dynamiquement qui inclut des rules basées
 * sur les CSS variables 7.1.4.
 *
 * Fix : forcer le stacking mobile avec spécificité suffisante, ciblé au
 * contexte `.avia-section` (portée Enfold layout) pour ne pas toucher les
 * plugins tiers.
 */

@media only screen and (max-width: 767px) {
    /* Stacking des colonnes 50/50 dans les sections Enfold sur mobile.
     * Le `.responsive` + `#top #wrap_all` + `.avia-section` ciblé +
     * `.flex_column` donne (1,5,0) = 150 de spécificité, supérieur aux
     * overrides dynamic avia-merged-styles. */
    /* Sélecteur simplifié : #top est le body, on se passe de .avia-section
     * (parfois en dehors de #wrap_all dans le DOM 7.1.4) pour couvrir tous
     * les cas. Spécificité (1,2,0) suffisante pour battre les rules Enfold
     * dynamiques de post-specific CSS qui n'ont qu'une classe UUID. */
    #top .flex_column.av_one_half,
    #top .flex_column.av_one_fourth,
    #top .flex_column.av_one_third,
    #top .flex_column.av_two_fifth,
    #top .flex_column.av_three_fifth,
    #top .flex_column.av_one_fifth,
    #top .flex_column.av_four_fifth,
    #top .flex_column.av_two_third,
    #top .flex_column.av_three_fourth {
        width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        float: none !important;
        clear: both !important;
    }

    /* Pour les layouts `av-layout-grid` / `av-flex-cells` (utilisés dans
     * certaines sections comme Publications home), même traitement au niveau
     * flex_cell. `.no_margin` est déjà couvert par Enfold stock (grid.css)
     * mais les variants UUID-classed 7.1.4 peuvent passer à côté. */
    #top .flex_cell.av_one_half,
    #top .flex_cell.av_two_fifth,
    #top .flex_cell.av_three_fifth,
    #top .flex_cell.av_one_fifth,
    #top .flex_cell.av_four_fifth,
    #top .flex_cell.av_one_fourth,
    #top .flex_cell.av_three_fourth,
    #top .flex_cell.av_one_third,
    #top .flex_cell.av_two_third {
        width: 100% !important;
        display: block !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    /* NE PAS forcer display:block sur .av-layout-grid-container.av-flex-cells :
     * cela casse l'Enfold content slider (Conférences + Publications home)
     * qui utilise le parent en `display: table` pour la gestion des slides.
     * Les flex_cell à width:100% ci-dessus suffisent à faire stacker.
     *
     * Si on constate qu'une section ne stack pas, ajouter son conteneur
     * spécifiquement ici, pas l'ensemble. */

    /* BUG Enfold 7.1.4 dynamic CSS per-post : `avia_posts_css/post-1194.css`
     * (et 1444 EN) définit `.flex_cell.av-jxnfor78-... { padding: 30px 0px 30px 120px !important }`
     * pour créer un gutter gauche de 120px sur DESKTOP. Mais cette règle
     * n'est PAS scopée en @media : elle s'applique aussi sur mobile, poussant
     * le contenu à 31% du viewport (390px × 120/390 = ~30.7%). Diagnostic
     * confirmé par DevTools user le 2026-04-21 (screenshot DevTools).
     *
     * Ce n'était PAS un problème en 4.5.4 car 4.5.4 ne générait pas de
     * dynamic_avia per-post CSS avec UUID selector.
     *
     * Fix : neutraliser les paddings >= 60px sur flex_cell à mobile pour
     * restaurer un layout sans gutter décoratif. On cible par classe UUID
     * spécifique au cas où d'autres flex_cell ont besoin de garder leur
     * padding. Approche plus large : tous les flex_cell avec padding-left
     * supérieur à 60px sur mobile se retrouvent à padding-left: 0. */
    /* Spécificité (2, 4, 1) pour battre la règle dynamique Enfold 7.1.4
     * qui a (2, 3, 0). `html.responsive` ajoute 1 classe + 1 élément et
     * force le gain de cascade.
     *
     * Padding : 20px 30px (pas 0 — sinon le contenu colle au bord du viewport
     * mobile. Feedback user 2026-04-21). On conserve un petit gutter
     * latéral de ~8% du viewport, consistant avec les autres sections. */
    html.responsive #top #wrap_all .flex_cell.av-jxnfor78-ec0b2e957a36b92ec99384c044b0bcfb,
    html.responsive #top #wrap_all .flex_cell.av-jxnfp01q-4b06c4034bb3df804322df30bd938049 {
        padding: 20px 30px 20px 30px !important;
    }

    /* BUG pages /competence/* : le `.container.av-section-cont-open` (class
     * Enfold 7.1.4) garde un `padding: 0 50px` de `.container` stock.
     *
     * Diagnostic CDP (2026-04-21, viewport 485px mobile) : les sections
     * `avia-section main_color` sont rendues DIRECTEMENT sous `body#top`,
     * PAS dans `#wrap_all` (seuls header + logo sont dans #wrap_all).
     *
     * Différence structurelle 4.5.4 → 7.1.4 :
     *   - 4.5.4 : `.container { max-width: 85%; margin: 0 auto; padding: 0 }`
     *     → 7.5% gutter de chaque côté, contenu centré, pas de padding
     *   - 7.1.4 : `.container { padding: 0 50px; max-width: none }`
     *     → 50px gutter fixe (26% du viewport 390 = content à 48% only!)
     *
     * Source 4.5.4 : dump prod CDP `margin-left: 36.375px`, `max-width: 85%`
     * sur tous les `.container` (header, contenu, footer).
     *
     * Fix : restaurer le comportement 4.5.4 sur mobile (max-width 85% +
     * margin auto + padding 0). Ça réplique le gutter ~7.5% de prod et
     * centre le contenu proprement. */
    html.responsive #top .container,
    html.responsive #top .container.av-section-cont-open,
    html.responsive #top .container.caption_container {
        max-width: 85% !important;
        margin-left: auto !important;
        margin-right: auto !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    /* BUG Enfold 7.1.4 hero slideshow caption sur pages /competence/* :
     *
     * Contexte (diagnostic CDP + DB 2026-04-21) :
     *   - La DB staging (dump prod 2026-04-14) ne contient qu'UN shortcode
     *     [av_slideshow_full] avec caption_pos='caption_right' et un titre
     *     "Droit bancaire et financier" + description "Depuis plus de 30 ans…"
     *     + bouton "Vos interlocuteurs". Enfold 7.1.4 rend ce shortcode avec
     *     la caption en OVERLAY sur l'image (text-align: right par caption_right).
     *   - Prod ACTUELLE (2026-04-21) a 2 sliders dans le HTML rendu (full_slider_1
     *     desktop + full_slider_2 mobile avec av-desktop-hide). La DB prod a
     *     dû être MAJ post-2026-04-14 pour ajouter le second slider mobile.
     *     L'état staging correspond donc à l'ancienne DB prod, pas à la nouvelle.
     *   - User (2026-04-21) : "on affiche un texte qu'eux-mêmes n'affichent pas
     *     sur le site officiel". Prod mobile ne montre QUE l'image sur le slider.
     *
     * Fix CSS : sur mobile, reposition la caption pour qu'elle s'affiche en
     * flux normal SOUS l'image. On garde le contenu (titre + description +
     * bouton) pour ne pas perdre d'info, mais on le rend lisible (sort de
     * l'overlay blanc sur image).
     *
     * Technique : flex-direction: column-reverse sur `.avia-slide-wrap` pour
     * inverser l'ordre visuel (img en source avant caption, mais rendue en
     * dessous). Reset position/color sur la caption pour qu'elle soit lisible
     * sur fond clair. */

    /* Ordre visuel inversé : image en haut, caption en dessous */
    html.responsive #top .avia-fullwidth-slider .avia-slide-wrap {
        display: flex !important;
        flex-direction: column-reverse !important;
    }

    /* Sortir la caption de l'overlay absolute */
    html.responsive #top .avia-fullwidth-slider .av-slideshow-caption,
    html.responsive #top .avia-fullwidth-slider .slideshow_caption,
    html.responsive #top .avia-fullwidth-slider .slideshow_inner_caption,
    html.responsive #top .avia-fullwidth-slider .slideshow_align_caption {
        position: static !important;
        top: auto !important;
        left: auto !important;
        right: auto !important;
        bottom: auto !important;
        transform: none !important;
        display: block !important;
        width: auto !important;
        max-width: none !important;
        height: auto !important;
        color: inherit !important;
        background: transparent !important;
        text-shadow: none !important;
        table-layout: auto !important;
        vertical-align: baseline !important;
    }

    /* Padding autour du bloc caption (marge verticale avec l'image) */
    html.responsive #top .avia-fullwidth-slider .av-slideshow-caption {
        padding: 20px 0 10px 0 !important;
    }

    /* Container interne : conserve le gutter 85% (cohérence avec §1.3) */
    html.responsive #top .avia-fullwidth-slider .container.caption_container {
        max-width: 85% !important;
        margin-left: auto !important;
        margin-right: auto !important;
        padding: 0 !important;
    }

    /* Reset styling dark-on-image : color inherit + text-shadow none pour
     * lisibilité sur fond blanc (pas sur image sombre). */
    html.responsive #top .avia-fullwidth-slider .avia-caption-title,
    html.responsive #top .avia-fullwidth-slider .avia-caption-content,
    html.responsive #top .avia-fullwidth-slider .avia-caption-content p,
    html.responsive #top .avia-fullwidth-slider .slideshow_align_caption {
        color: inherit !important;
        text-shadow: none !important;
    }

    /* Titre caption — matcher la styling du `<h2 class="av-special-heading-tag">`
     * de prod (28px, 500, center, text-transform none, color rgb(68,82,95)).
     * Staging par défaut : 20px + uppercase + left. */
    html.responsive #top .avia-fullwidth-slider .avia-caption-title {
        font-size: 28px !important;
        font-weight: 500 !important;
        line-height: 1.1 !important;
        text-transform: none !important;
        text-align: center !important;
        margin-bottom: 15px !important;
    }

    /* Description : left-aligned (matche prod `<p>` dans textblock mobile qui
     * a `text-align: start` en 14px/400). Le titre reste centré, la desc à
     * gauche — c'est le rendu prod vérifié via CDP 2026-04-21. */
    html.responsive #top .avia-fullwidth-slider .avia-caption-content,
    html.responsive #top .avia-fullwidth-slider .avia-caption-content p {
        text-align: left !important;
        font-size: 14px !important;
        font-weight: 400 !important;
        line-height: 1.55 !important;
    }

    /* Bouton "Vos interlocuteurs" : prod mobile ne l'affiche pas. Hide. */
    html.responsive #top .avia-fullwidth-slider .avia-slideshow-button,
    html.responsive #top .avia-fullwidth-slider .avia-slide-wrap .avia-button {
        display: none !important;
    }

    /* Slider lui-même : height auto sur mobile pour absorber le bloc caption
     * ajouté en dessous (Enfold 7.1.4 fixe une hauteur qui coupe sinon). */
    html.responsive #top .avia-fullwidth-slider,
    html.responsive #top .avia-fullwidth-slider .avia-slideshow,
    html.responsive #top .avia-fullwidth-slider .avia-slideshow-inner,
    html.responsive #top .avia-fullwidth-slider .avia-slideshow-inner > li {
        height: auto !important;
    }
}


/* ========================================================================
 * Togglecontainer : neutraliser le display:flex ajouté en 7.1.4 qui peut
 * affecter les margins et le layout des single_toggle enfants.
 * Source 4.5.4 : toggles.css (pas de display sur .togglecontainer, default block)
 * ======================================================================== */

#top .togglecontainer {
    display: block;
}

/* Le `.togglecontainer .taglist` en 7.1.4 est `display: flex; flex-wrap: wrap`.
 * En 4.5.4 : default inline. Pour le site FBT, on n'utilise pas de taglist,
 * donc pas critique. Skip. */


/* ========================================================================
 * Mobile burger menu — empêcher l'overlay de parasiter le header.
 *
 * Symptôme (iPhone Safari, 2026-04-21/22, user feedback IMG_0881 sur
 * /competence/*) : quand on tape le burger, le header "part en vrille" —
 * logo et icônes deviennent illisibles sur un fond très sombre.
 *
 * Cause : Enfold 7.1.4 (et 4.5.4 prod) garde le `#header` avec
 * `background: transparent` et pose un `.av-burger-overlay-bg`
 * (background:#000, opacity:0.9) en `position:fixed; top:0; height:100%`.
 * Le header (z-index 501) reste devant l'overlay (z-index 3) MAIS sa
 * transparence laisse voir l'overlay sombre derrière → logo noir sur
 * fond noir = quasi invisible + icônes passent en blanc via
 * `.av-burger-overlay-active` → rendu "vrille".
 *
 * Note : prod a exactement ce même bug (confirmé 2026-04-22 via
 * comparaison screenshot user). Décision projet : sur staging, on
 * AMÉLIORE le rendu vs prod (on ne cherche pas le pixel-match sur ce
 * point précis car le rendu prod est objectivement cassé).
 *
 * Fix :
 *   1. Rendre le header opaque blanc pendant que l'overlay est actif
 *   2. Commencer l'overlay sous le header (top: header-height) au lieu
 *      de tout recouvrir
 *   3. Repasser le X burger + search icon en sombre (lisible sur header blanc)
 *
 * Scope : règles globales (pas dans un @media) car le burger apparaît
 * sur mobile ET tablet selon `html_mobile_menu_tablet`.
 * ======================================================================== */

/* Principe (v22-7) : ne JAMAIS modifier les ancêtres DOM de
 * `.av-burger-overlay` (qui vit à l'intérieur de #header). Toute
 * modification sur #header (background-color, z-index, transform) crée
 * un stacking context qui piège le position:fixed de l'overlay sur iOS
 * Safari → overlay qui ne couvre plus la viewport, slider/contenu qui
 * repassent devant.
 *
 * Solution minimale, robuste, agnostique des composants de page :
 *   1. z-index max int32 sur l'overlay → bat n'importe quel élément
 *      Enfold, plugin, shortcode, slider, peu importe la page.
 *   2. opacity 1 sur le bg → pas de bleed-through de la slider image
 *      (staging utilise BANCAIRE-ok-1.png clair là où prod utilise
 *      BANCAIRE-ok-2.png darker).
 *
 * Géométrie stock Enfold conservée (top:0, height:100% → couvre le
 * viewport entier, y compris header). Logo masqué par l'overlay
 * pendant le menu — identique prod, pas de "vrille" dark-on-dark.
 * X + search icon restent en style stock Enfold (blanc sur dark overlay). */
/* Problème (v22-5 à v22-9) : sur /competence/*, le rendu iPhone/CDP
 * montre le slider hero PAR-DESSUS l'overlay burger malgré les règles
 * de z-index CSS qui disent l'inverse.
 *
 * Cause racine identifiée via document.elementFromPoint + inspection
 * des stacking contexts :
 *   1. Enfold met `#header { z-index: 0 }` quand overlay actif
 *      (layout.min.css) → stacking context sur #header qui clippe les
 *      position:fixed descendants sur iOS Safari.
 *   2. `.avia-slideshow-slide` a `transform` + `z-index:3` → crée un
 *      compositor layer GPU qui rend au-dessus du rendu main thread.
 *      L'overlay (sans transform) reste sur le main layer → paint en
 *      dessous de la slide.
 *
 * Fix en 3 règles :
 *   (a) Annuler le stacking context iOS-piège sur #header.
 *   (b) Lever `.main_menu` (conteneur de l'overlay côté Enfold) à
 *       z-index max int32 — tout le sous-arbre burger/search/overlay
 *       passe au-dessus de tout compositor layer de la page. Hiérarchie
 *       interne stock Enfold préservée : burger-btn z:150 (via
 *       .menu-item-avia-special), overlay z:100, search z:100.
 *   (c) opacity 1 (stock 0.9) pour empêcher bleed-through slider. */
/* Après 10 tentatives de stacking/z-index/compositor, la seule approche
 * robuste sur /competence/* (slider hero + compositor GPU) est de
 * retirer la concurrence : quand le burger est ouvert, on CACHE le
 * contenu principal. L'overlay n'a plus à se battre contre les
 * compositor layers de slide/transform — ils ne sont plus peints.
 *
 * visibility:hidden (pas display:none) préserve le layout donc pas de
 * flash à l'ouverture/fermeture, et préserve la position scroll. Le
 * header (avec l'overlay dedans) reste visible → menu et X cliquables. */
/* Masque tout enfant direct de <body> sauf #wrap_all (qui contient le
 * header et son overlay). Sur /competence/* les sections (slider,
 * .avia-section, footer) sont enfants directs de body — pas de #main
 * dans ce template. Règle universelle : seul #wrap_all reste visible,
 * donc peu importe la structure DOM propre à chaque template.
 *
 * display:none (pas visibility:hidden) pour iOS Safari : WebKit mobile
 * rend parfois les descendants `transform`-és (compositor layer GPU)
 * malgré visibility:hidden sur l'ancêtre — cas observé sur
 * /competence/* où `.avia-slideshow-slide` a un transform qui échappe
 * à la suppression de paint. display:none supprime de l'arbre de rendu
 * au niveau le plus haut : pas de layout, pas de peinture, pas de
 * compositor layer. Garantie cross-browser. */
html.av-burger-overlay-active body > *:not(#wrap_all):not(script):not(style):not(link):not(meta):not(noscript) {
    display: none !important;
}

/* Défense en profondeur : neutralise les transforms sur tout slideshow
 * Enfold pendant que l'overlay est actif. Même si un slideshow se
 * retrouvait à l'intérieur de #wrap_all (ou si un plugin nested en
 * crée un), kill les compositor layers GPU qui pourraient rendre
 * au-dessus de l'overlay sur iOS Safari. */
html.av-burger-overlay-active .avia-slideshow-slide,
html.av-burger-overlay-active .avia-fullwidth-slider,
html.av-burger-overlay-active .avia-slideshow {
    transform: none !important;
}

/* opacity 1 sur le bg pour garantir qu'aucune transparence ne laisse
 * passer de fantôme quand l'ouverture/fermeture est animée. */
html.av-burger-overlay-active .av-burger-overlay-bg {
    opacity: 1 !important;
}