/*
 * Braillard — Responsive lot A : fondations mobiles (issue #27)
 * Source : maquettes Figma 390px — site-header--mobile (126px repos / 62px
 * scrollé), barre sous-menu horizontale (3275:2268), menu mobile N1-N3
 * (3147:1077+), site-footer--mobile (3346:2537).
 * Fichier AUTONOME chargé en dernier (module 76) : n'édite pas les CSS
 * partagés (sessions parallèles). Breakpoints normalisés : 900 (bascule
 * structurelle) / 560 (mobile).
 */

:root{
  --br-m-pad: 24px;     /* marge de bord maquette mobile */
  --br-m-indent: 56px;  /* indent texte maquette mobile */
}

@media (max-width: 900px){

  /* =================================================================
     1. HEADER — logo + burger seul (langue et icônes vivent dans le
        menu overlay, conforme maquette). Crossfade wordmark→monogramme
        existant (piloté scroll) conservé, tailles réduites.
     ================================================================= */
  /* fond BLANC en mobile (retour client 13.07, maquette gabarit contenu) :
     le header desktop est transparent, mais en mobile le contenu défile
     dessous → opaque */
  .br-header{ background: var(--br-white, #fff); }
  /* header « caméléon » (module 70) : SANS OBJET en mobile — le fond étant
     opaque, burger et wordmark ne sont jamais sur du sombre ; sans ça ils
     passaient en blanc sur blanc au-dessus des sections sombres (retour
     client 13.07 : hamburger invisible). */
  .br-header.logo-on-dark .br-header__logo-full{ filter: none; }
  .br-header.actions-on-dark .br-menu-toggle{ color: var(--br-black, #000); }
  /* Connecté (barre d'admin WP) : header.css pose top:46px → le header
     sticky descend et RECOUVRE la barre sous-menu (top:91) qui semble
     « ne pas devenir fixe ». À ≤600 la barre d'admin WP est ABSOLUTE
     (elle défile avec la page) → le header peut coller à 0 ; au repos
     c'est le margin-top du html posé par WP qui fait la place. */
  @media (max-width: 600px){
    body.admin-bar .br-header{ top: 0; }
  }
  /* 601-900 : barre d'admin fixe → on décale la barre sous-menu sous
     le header (46 + 63). */
  @media (min-width: 601px){
    body.admin-bar .e-con:has(> .e-con .br-subnav) > .e-con:has(.br-subnav){ top: 109px; }
  }
  /* Logo V4 ROND (retour client 13.07) : plus de « collé au bord » (c'était
     la maquette du carré noir à x=0) — le GROS logo est calé sur le petit :
     même bord gauche 6px que le monogramme compact → le crossfade tombe
     juste. Haut/bas : 20px (l'espace du repos). Burger : retrait normal. */
  .br-header__inner{ padding: 20px var(--br-m-pad) 20px 6px; align-items: center; transition: padding .3s ease; }
  /* scrollé : état compact DÉTERMINISTE (le wordmark sort du flux, le
     monogramme devient STATIQUE, sans transform ni états intermédiaires).
     Logo V4 ROND (2026-07-13) : plus de carré au ras du coin — petit
     espace en haut/bas/gauche (6px), monogramme 51px → header = 63px
     total inchangé (le décalage admin-bar 601-900 reste calé sur 63). */
  .br-header.is-scrolled .br-header__inner{ padding-top: 6px; padding-bottom: 6px; padding-left: 6px; }
  .br-header.is-scrolled .br-header__logo{ width: 51px; }
  .br-header.is-scrolled .br-header__logo-full{ display: none; }
  .br-header.is-scrolled .br-header__logo-mono{
    position: static; width: 51px; height: 51px;
    transform: none; opacity: 1;
  }
  .br-header__actions > .br-lang,
  .br-header__actions > .br-iconbtn{ display: none; }
  .br-header__actions > .br-menu-toggle{ display: inline-flex; }
  .br-header__logo-full{ width: 250px; max-width: 64vw; }
  .br-header__logo-mono{ height: 48px; width: 48px; }

  /* =================================================================
     2. NAV CONTEXTUELLE desktop (piliers + N2) — remplacée en mobile
        par la barre sous-menu horizontale ; les piliers vivent dans
        le burger (maquette : aucune rangée piliers).
     ================================================================= */
  .br-pagenav{ display: none; }
  /* trop d'air entre le titre de page et la barre sous-menu (retour
     client : 42px = 32 du pagehead + 10 du gabarit) → 8+10 = 18px */
  .br-pagehead{ margin-bottom: 8px; }

  /* =================================================================
     3. SOUS-MENU (colonne gauche) → BARRE HORIZONTALE scrollable
        sticky (maquette 3275:2268/2368 : 64px, actif noir, autres
        estompés, défilement au doigt). Le wrapper widget est déjà
        sticky avec top = hauteur header (subnav.js).
     ================================================================= */
  .br-subnav{
    background: var(--br-white, #fff);
    border-top: 1px solid rgba(0, 0, 0, .08);    /* filets haut ET bas (maquette) */
    border-bottom: 1px solid rgba(0, 0, 0, .08);
    position: relative;
  }
  /* fondu blanc au bord droit (maquette) : signale que la barre défile —
     éteint en butée droite (.at-end, mobile-subnav.js) */
  .br-subnav::after{
    content: ""; position: absolute; top: 0; right: 0; bottom: 0; width: 56px;
    background: linear-gradient(to right, rgba(255, 255, 255, 0), var(--br-white, #fff));
    pointer-events: none;
    transition: opacity .2s ease;
  }
  .br-subnav.at-end::after{ opacity: 0; }
  /* fondu gauche : items masqués à gauche (retour client 13.07 — la barre
     est scrollée sur l'item actif au chargement) */
  .br-subnav::before{
    content: ""; position: absolute; top: 0; left: 0; bottom: 0; width: 56px;
    background: linear-gradient(to left, rgba(255, 255, 255, 0), var(--br-white, #fff));
    pointer-events: none; z-index: 1;
    opacity: 0; transition: opacity .2s ease;
  }
  .br-subnav.has-left::before{ opacity: 1; }
  .br-subnav__heading{ display: none; }        /* la barre ne montre que la liste */
  .br-subnav__anchors{ display: none; }        /* ancres N3 : réintégrées au lot C */
  .br-subnav__list{
    flex-direction: row; flex-wrap: nowrap;
    align-items: center; gap: 28px;
    height: 56px; padding: 0 var(--br-m-pad);
    overflow-x: auto;
    scrollbar-width: none; -ms-overflow-style: none;
    -webkit-overflow-scrolling: touch;
  }
  .br-subnav__list::-webkit-scrollbar{ display: none; }
  .br-subnav__item{ flex: 0 0 auto; }
  .br-subnav__item a{ font-size: 16px; line-height: 1; white-space: nowrap; }
  /* Sans item actif (mode section) : tout en noir ; dès qu'un actif
     existe : lui en noir/500, les autres estompés (maquette). */
  .br-subnav__list:has(.is-active) .br-subnav__item:not(.is-active) a{ color: #b9b3ab; }
  /* Barre blanche opaque en mobile : le bandeau sombre passe DERRIÈRE, invisible
     → jamais d'inversion. On annule le blanc de .is-on-dark (posé au survol du
     bandeau par subnav.js) sur l'item ACTIF (sélecteur très spécifique pour
     gagner quel que soit l'ordre de chargement des CSS) ; les inactifs restent
     gris via la règle ci-dessus. */
  .br-subnav__list:has(.is-active) .br-subnav__item.is-active.is-on-dark a{ color: var(--br-black); }
  .br-subnav__heading.is-on-dark{ color: var(--br-black); }
  .br-subnav--empty{ display: none; }
  /* Le gabarit passe déjà en display:block ≤900 (subnav.css) : la
     colonne arrive en premier → devient la barre.
     ⚠️ Sticky : en desktop c'est le WIDGET qui colle (subnav.js pose
     son top) dans la colonne étirée sur toute la grille. En mode bloc
     mobile, le parent du widget ne fait que la hauteur de la barre →
     le sticky du widget est inopérant. On rend donc STICKY LE
     CONTENEUR (son parent = toute la page de contenu) et on repasse
     le widget en static (son top inline devient sans effet). */
  .e-con:has(> .e-con .br-subnav) > .e-con:has(.br-subnav){
    min-height: 0;
    position: sticky;
    top: 63px;                 /* hauteur du header COMPACT (monogramme 63px collé
                                  en haut, padding 0 en is-scrolled) — quand la
                                  barre s'épingle le header est toujours compact
                                  (bascule à ~40px de scroll) */
    z-index: 60;
    background: var(--br-white, #fff);
    /* barre PLEINE LARGEUR (retour client 13.07, maquette) : sort du
       padding 20px du gabarit ; le texte reste à 24px du bord via le
       padding de la liste */
    margin-left: -20px !important;
    margin-right: -20px !important;
    width: calc(100% + 40px) !important;
    max-width: none !important;  /* le max-width Elementor du conteneur
                                    plafonnait la largeur à 100% → barre
                                    décalée, vide à droite (retour client) */
    /* espace sous la barre avant le contenu (retour client 13.07) —
       la marge vit dans le flux : pas de trou blanc quand la barre
       est épinglée */
    margin-bottom: 24px !important;
  }
  .e-con:has(> .e-con .br-subnav) > .e-con:has(.br-subnav) > .elementor-widget{
    position: static !important;
  }
  /* Exception : quand le module qui suit la barre est un bandeau bord-à-bord
     (.br-band2), le liseré blanc de 24px paraît fautif (sur desktop la barre
     chevauche le bandeau). On colle alors le bandeau sous la barre. */
  .e-con:has(> .e-con .br-subnav) > .e-con:has(.br-subnav):has(+ .e-con .br-band2){
    margin-bottom: 0 !important;
  }

  /* =================================================================
     4. FOOTER (maquette 3346:2537) : logo pleine largeur, adresse à
        gauche + tél/mail à droite, réseaux CENTRÉS dessous.
        Piliers et liens de navigation : masqués (pas dans la maquette).
     ================================================================= */
  .br-footer__pillars,
  .br-footer__links{ display: none; }
  .br-footer__contact{
    flex-direction: column !important;   /* prime sur footer.css @900 */
    align-items: stretch !important;
    gap: 28px !important;
  }
  .br-footer__addr{ order: 1; }
  .br-footer__contactinfo{ order: 2; text-align: right; }
  .br-footer__social{
    order: 3;
    display: flex; justify-content: center; gap: clamp(40px, 14vw, 64px);
    margin-top: 12px;
  }
  /* adresse et contact côte à côte (2 colonnes maquette) */
  .br-footer__contact{ display: grid !important; grid-template-columns: 1fr 1fr; }
  .br-footer__addr{ grid-column: 1; }
  .br-footer__contactinfo{ grid-column: 2; }
  .br-footer__social{ grid-column: 1 / -1; }

  /* =================================================================
     5. MENU OVERLAY plein écran (maquette 3147:1077 : pas de bande de
        site visible à gauche en mobile).
     ================================================================= */
  .br-overlay{
    left: 0; box-shadow: none;
    --br-menu-indent: 0px;              /* maquette : tout à 24px du bord */
    padding-left: var(--br-m-pad); padding-right: var(--br-m-pad);
  }
  /* barre du haut : langues à GAUCHE, icônes + X à droite (maquette) */
  .br-overlay__bar{ justify-content: space-between; }
  /* piliers : taille et respiration maquette */
  .br-pillars > li{ margin: .14em 0; }
  /* liens secondaires : COLONNE alignée à gauche (maquette), pas une rangée ;
     Donate passe DESSOUS, aligné gauche */
  .br-overlay__foot{
    /* retour client 13.07 : liens secondaires TOUT EN BAS à gauche,
       Donate en bas À DROITE (rangée alignée sur le bas) */
    flex-direction: row; align-items: flex-end; justify-content: space-between;
    gap: 28px;
    margin-top: auto;          /* poussé au FOND de l'écran (retour client) */
    padding-top: 48px;         /* écart MINIMUM avec la liste au-dessus quand
                                  elle est longue (retour client 13.07 : « Je
                                  m'inscris » touchait « Boutique ») — absorbé
                                  par le margin auto quand il y a de la place */
  }
  .br-overlay{ padding-bottom: 24px; }  /* moins d'air sous Donate */
  .br-overlay{ padding-top: 24px; }     /* icônes remontées (retour client :
                                           la barre EN/FR+icônes était à 70px) */
  /* Connecté : la barre d'admin WP recouvre le haut de l'overlay (fixe) →
     les icônes à 24px passaient DESSOUS (retour client 13.07 « les icônes
     ont disparu »). v2 (retour client 14.07 : le padding compensatoire
     rendait la position des icônes DÉPENDANTE du scroll — la barre d'admin
     absolute ≤600 défile avec la page) : l'overlay passe simplement
     AU-DESSUS de la barre d'admin (z-index > 99999) → padding 24 constant,
     position identique en haut de page comme après scroll, connecté ou non. */
  body.admin-bar .br-overlay{ z-index: 100000; }
  /* liens secondaires : MÊMES métriques que les items de liste du menu
     (retour client 13.07) — police 18px + pas de ~33px comme au-dessus */
  .br-secondary{
    display: flex; flex-direction: column; align-items: flex-start;
    gap: 8px;
  }
  .br-secondary a{ font-size: 18px; }

  /* =================================================================
     5ter. MENU MOBILE DRILL-DOWN par écrans (maquettes 3147:1151 N2 et
     3147:1188 N3, retour client 13.07 : « dès que je vais dans un
     pilier on se déplace dans ce pilier »).
     mobile-menu.js pose .br-mm-sub sur l'overlay + .br-mm-current sur
     le chemin de li ouverts, et injecte .br-mm-head (← retour, titre
     du niveau en couleur du pilier, « Ouvrir la page »).
     ================================================================= */
  /* le nav overlay est un flex ROW desktop → colonne, sinon le head
     injecté se met À CÔTÉ du ul (liste écrasée à droite) */
  .br-overlay__main{ flex-direction: column; align-items: stretch; }
  /* head d'écran : flèche retour ACCOLÉE au titre, groupe CALÉ AU BORD
     DROIT (maquette + retour client 13.07 : le bloc flottait à ~76px du
     bord au lieu d'être aligné à 24px) ; « Ouvrir la page » 14px sous le
     titre ; liste 68px plus bas */
  .br-mm-head{
    display: flex; align-items: flex-start; justify-content: flex-end;
    gap: 7px; margin: 3px 0 68px; width: 100%; flex: 0 0 auto;
    /* margin-top 3px : le TITRE du drill tombe à la MÊME hauteur que le
       pilier au niveau 1 (retour client 13.07 : « origines » sautait
       verticalement en plongeant) — continuité du slide */
  }
  .br-mm-head[hidden]{ display: none; }
  .br-mm-back{
    background: none; border: 0; padding: 0; margin: 10px 0 0; /* centre OPTIQUE de la flèche (24px) sur la 1re ligne du titre */
    color: var(--c, var(--br-black)); cursor: pointer;
  }
  .br-mm-back svg{ width: 100px; height: 24px; display: block; }
  .br-mm-title-wrap{
    display: flex; flex-direction: column; align-items: flex-end;
    gap: 14px; text-align: right; min-width: 0;
  }
  .br-mm-title{
    font-family: var(--br-font-display); font-style: italic; font-weight: 300;
    font-size: 34px; line-height: 1.1; color: var(--c, var(--br-black));
    cursor: pointer; /* cliquable : retour au niveau précédent (comme la flèche) */
  }
  .br-mm-open{
    font-family: var(--br-font-body); font-size: 14px;
    color: var(--br-black); text-decoration: underline; text-underline-offset: 3px;
  }
  .br-mm-open[hidden]{ display: none; }

  /* mode sous-niveau : seul l'écran courant est visible (le foot
     Boutique/Contact/Qui sommes-nous/Donate reste affiché — demande
     client 13.07, maquette N1) */
  .br-overlay.br-mm-sub .br-pillars > li:not(.br-mm-current){ display: none; }
  /* le titre du niveau ouvert vit dans le head → retiré de la liste */
  .br-overlay.br-mm-sub li.br-mm-current > a{ display: none; }
  /* neutralise l'accordéon grid (0fr/1fr) : le chemin ouvert est déplié
     en flux normal, sans clip ni fondu */
  .br-overlay.br-mm-sub li.br-mm-current{
    display: block !important; margin: 0;
  }
  .br-overlay.br-mm-sub li.br-mm-current > .sub-menu{
    opacity: 1 !important; overflow: visible; padding: 0 !important;
  }
  /* niveau intermédiaire (un enfant est ouvert) : seul cet enfant reste */
  .br-overlay.br-mm-sub li.br-mm-current:has(> .sub-menu > .br-mm-current) > .sub-menu > li:not(.br-mm-current){ display: none; }
  /* les sous-menus des items NON ouverts disparaissent du flux (le
     display:block ci-dessous casse l'accordéon grid 0fr qui les
     comprimait → sans ceci ils laissent un trou invisible) */
  .br-overlay.br-mm-sub .br-pillars li:not(.br-mm-current) > .sub-menu{ display: none !important; }
  /* écran affiché (current le plus profond) : liste plate des enfants,
     pas de 33px entre items (maquette Frame 1 : hauteurs 21 + 12 d'écart) */
  .br-overlay.br-mm-sub li.br-mm-current:not(:has(.br-mm-current)) > .sub-menu > li{
    display: block; margin: 0 0 12px;
    line-height: 1.15; /* le li hérite 28px sinon → pas de 40 au lieu de 33 */
  }
  /* :not(.br-mm-current) : sans lui, ce display:block (spécificité
     supérieure) écrase le display:none du lien du niveau OUVERT quand
     il est en N3 → son titre restait dans la liste (retour client) */
  .br-overlay.br-mm-sub li.br-mm-current .sub-menu > li:not(.br-mm-current) > a{
    font-size: 18px; line-height: 1.15;
    display: block; /* supprime l'espace de baseline de l'inline-block (33px pile) */
  }
  /* Tous les items en NOIR (retour client 14.07 : « pourquoi ils sont en
     couleur ? ») ; l'indicateur « a des sous-niveaux » est un CHEVRON
     discret pointé vers la DROITE (on entre dans un écran) — réutilise
     le chevron desktop (header.css), recoloré et réorienté. */
  .br-overlay.br-mm-sub li.br-mm-current .sub-menu li.menu-item-has-children > a{ color: var(--br-black, #000); }
  /* …sauf la page COURANTE : couleur du pilier (retour client 14.07,
     --c héritée du li N1). Après la règle « tout en noir » pour gagner. */
  .br-overlay.br-mm-sub li.br-mm-current .sub-menu > li.current-menu-item > a{ color: var(--c, var(--br-black)); }
  /* Anti-orphelin (retour client 14.07) : le chevron est porté par le span
     insécable du dernier mot (.br-mm-tail, posé par mobile-menu.js) — il ne
     peut plus tomber seul à la ligne. L'::after historique du lien est coupé. */
  .br-overlay.br-mm-sub .br-pillars .sub-menu li.menu-item-has-children > a::after{ content: none; }
  .br-overlay .br-pillars li.menu-item-has-children > a .br-mm-tail{ white-space: nowrap; }
  .br-overlay.br-mm-sub .br-pillars .sub-menu li.menu-item-has-children > a .br-mm-tail::after{
    content: ""; display: inline-block; width: .4em; height: .4em; margin-left: .55em;
    vertical-align: middle;
    border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
    opacity: .55;
    transform: translateY(-.1em) rotate(-45deg);
  }
  /* pas de retrait en cascade : chaque écran repart au bord (24px) */
  .br-overlay.br-mm-sub .br-pillars .sub-menu .sub-menu{ padding: 0 !important; }

  /* =================================================================
     5bis. ANTI-DÉBORDEMENT horizontal (stress-test <390 : des widgets
     Elementor à largeur FIXE — ex. 360px — débordent sur iPhone SE/mini).
     max-width borne les largeurs fixes ; overflow-x clip en ceinture
     (les full-bleed en marges négatives sortent du viewport par design).
     ================================================================= */
  .e-con .elementor-widget{ max-width: 100% !important; }
  body{ overflow-x: clip; }
  /* …SAUF les modules full-bleed par design (bandeau noir, vidéo) : le modèle
     les étire en width:100vw + marges négatives — le plafond 100% les faisait
     s'arrêter 2×pad avant le bord droit (retour client 2026-07-13, réf Figma
     mobile : bord à bord). L'overflow-x:clip ci-dessus reste la ceinture. */
  .e-con .elementor-widget-braillard-band,
  .e-con .elementor-widget-braillard-video{ max-width: none !important; }
  /* min-width:0 sur la chaîne flex Elementor : un carrousel interne (piste
     br-actu 3700px sur « Instances de la Consultation ») propageait sa
     largeur min-content aux e-cons parents (min-width:auto des flex items)
     → conteneur à 1186px, tout le contenu hors viewport (retour client
     2026-07-13). Le max-width ci-dessus ne suffit pas : c'est le MINIMUM
     qui gonfle. */
  .e-con, .e-con-inner, .e-con > .elementor-widget, .elementor-widget-container{ min-width: 0; }
  /* …et plafond des CONTENEURS IMBRIQUÉS (le plafond historique ne couvrait
     que les widgets) : même page Instances, l'e-con boxed du carrousel se
     résolvait à 1186px dans la colonne flex (largeur > parent, expérimenté :
     max-width:100% la ramène à 350). Les full-bleed du modèle sont resetés
     à width:auto par subnav.css @900 → sans risque pour eux. */
  .e-con .e-con{ max-width: 100% !important; }

  /* =================================================================
     5quater. WIDGET VIDÉO mobile (maquette client 13.07) : le visuel
     n'est PAS bord à bord — retrait 48px à gauche, plein bord à droite
     (le widget est élargi au viewport par la section 6) ; le titre
     déborde sur la marge gauche (24px du bord) ; le bouton est calé en
     BAS-GAUCHE du visuel (plus de centrage vertical).
     ================================================================= */
  .br-video__preview{
    margin-left: 48px !important;
    margin-right: 0 !important;
    /* HAUTEUR EXPLICITE (16/9 de la largeur réelle = 100vw − 48) : la
       hauteur dérivée d'aspect-ratio ne REMONTE PAS au wrapper Elementor
       (pile grid du slider) → le wrapper restait à ~100px et le module
       suivant chevauchait la vidéo (retour client). Le min-height:200
       posait le même problème en se transférant en min-width. */
    height: calc((100vw - 48px) * 9 / 16) !important;
    aspect-ratio: auto !important;
    min-height: 0 !important;
  }
  .br-video__body{ justify-content: center; padding: 24px 0; }
  .br-video__title{ margin-left: var(--br-m-pad); font-size: 22px; max-width: 88%; }
  .br-video__cta{
    position: absolute; left: 48px; bottom: 0;
    margin-left: 0 !important;
  }
  /* témoignages-vidéo : même géométrie maquette SANS toucher aux
     conteneurs (élargir .br-temvid faisait déborder le contenu du
     wrapper Elementor → chevauchement du module suivant, retour
     client). La colonne est à 20px du viewport → tout se joue en
     marges internes : 20+28=48 (visuel/CTA), 20+4=24 (textes),
     plein bord droit via -20. */
  .br-temvid .br-video{ padding-left: 0 !important; }
  .br-temvid .br-video__preview{ margin-left: 28px !important; margin-right: -20px !important; }
  .br-temvid .br-video__title{ margin-left: 4px; }
  .br-temvid .br-video__cta{ left: 28px; }
  .br-temvid__heading{ padding-left: 4px !important; }
  .br-temvid__pag{ margin-left: 4px !important; }

  /* =================================================================
     5sexies. SINGLE ACTIVITÉ : l'aside (activité suivante / retour /
     partager) passe SOUS le contenu de l'article (retour client 13.07
     — en desktop c'est la colonne de gauche).
     ================================================================= */
  body.single-activite .elementor > .e-con{ display: flex; flex-direction: column; }
  body.single-activite .elementor > .e-con > .e-con:has(.elementor-widget-braillard-event-aside){ order: 9; }
  /* marges latérales : un conteneur imbriqué ajoute 10px → contenu à 30px
     au lieu des 20px du reste du site (retour client 14.07) */
  body.single-activite .e-con .e-con{ padding-left: 0 !important; padding-right: 0 !important; }
  /* « Partager cette activité » À LA LIGNE (maquette 3368:3578, retour
     client 14.07) : event.css passait l'aside en RANGÉE ≤900 → le bloc
     partage remontait à côté de « Retour ». Colonne + cotes Figma :
     Retour → titre = 80px (gap 24 + 56), titre 20px → icônes = 16px. */
  .br-event-aside{ flex-direction: column !important; align-items: flex-start !important; gap: 24px; }
  .br-event-aside__share{ margin-top: 56px; }
  .br-event-aside__share-title{ margin: 0 0 16px; font-size: 20px; }

  /* =================================================================
     5quinquies. TYPOGRAPHIE mobile (retour client 13.07, maquette
     Theory Masterclass : titre moyen ~24px, texte courant ~16px/1.45).
     Scopé aux widgets de CONTENU (text-editor, heading) — les widgets
     maison gardent leurs tailles propres.
     ================================================================= */
  .elementor-widget-text-editor,
  .elementor-widget-text-editor p,
  .elementor-widget-text-editor li{ font-size: 16px; line-height: 1.45; }
  .elementor-widget-heading h2.elementor-heading-title,
  .elementor-widget-heading h2,
  .elementor-widget-text-editor h2{ font-size: 24px; line-height: 1.25; }
  .elementor-widget-heading h3.elementor-heading-title,
  .elementor-widget-heading h3,
  .elementor-widget-text-editor h3{ font-size: 20px; line-height: 1.3; }

  /* =================================================================
     5septies. MARGES ÉDITEUR des modules en page contenu : des marges
     verticales posées dans Elementor pour le POSITIONNEMENT DESKTOP
     (grille overlay, ex. slideshow projets-pilote margin-top:137px,
     témoignages-vidéo -20px) atterrissent sur .elementor-widget-container
     → en mobile le contenu sort de la boîte du widget et CHEVAUCHE le
     module suivant (retour client 14.07). Flux naturel en mobile.
     ================================================================= */
  .e-con:has(> .e-con .br-subnav) .elementor-widget > .elementor-widget-container{
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }
  /* Slideshow de page : même pathologie que le widget vidéo — la hauteur
     issue d'aspect-ratio ne remonte pas au wrapper Elementor (widget de
     77px pour un contenu de 217 → la photo chevauchait le texte suivant,
     retour client projets-pilote). Hauteur EXPLICITE en mobile. */
  .br-sscp__stage{
    aspect-ratio: auto !important;
    height: calc((100vw - 40px) * 9 / 16) !important;
  }

  /* =================================================================
     6. MODULES FULL-BLEED en page contenu : à ≤900 le gabarit remet
        padding 20px partout → bandeau et vidéo doivent reprendre le
        bord à bord (maquette : Rectangle 16 x=0 w=390).
     ================================================================= */
  .e-con:has(> .e-con .br-subnav) > .e-con:not(:has(.br-subnav)) > .elementor-widget-braillard-band,
  .e-con:has(> .e-con .br-subnav) > .e-con:not(:has(.br-subnav)) > .elementor-widget-braillard-video{
    margin-left: -20px !important;
    margin-right: -20px !important;
    width: calc(100% + 40px) !important;
  }
}

@media (max-width: 560px){
  /* Piliers du menu : ~34px maquette (le clamp desktop descend trop bas
     ou trop haut selon la règle — on fixe la valeur maquette). */
  .br-pillars > li > a{ font-size: 34px; }
}

/* =====================================================================
   LOT B — HOME MOBILE (maquette 3088:91)
   ===================================================================== */
@media (max-width: 900px){

  /* ---- HERO mobile : ACCORDÉON à place fixe (retour client 12.07).
     Les 4 titres gardent leur ordre (rangées impaires 1/3/5/7) ; le
     pilier actif "s'ouvre" : photo 127×93 collée au bord gauche sur SA
     rangée, texte + « En savoir plus » dans la rangée paire dessous
     (placement piloté par :has()). Les textes inactifs sont retirés du
     flux (display:none) — sinon le plus long gonfle la rangée (les
     espacements incohérents du 1er jet venaient de là). ---- */
  .br-hero{
    display: grid !important;
    gap: 0 !important;                       /* hero.css mobile posait gap:28px (flex) */
    grid-template-columns: 103px 16px 1fr;  /* 24(pad)+103+16 = titres à x=143 */
    grid-auto-rows: auto;
    align-items: end;
    padding: 28px var(--br-m-pad) 40px;
    min-height: 0 !important;
  }
  .br-hero__left, .br-hero__themes, .br-hero__right, .br-hero__content{ display: contents; }

  /* titres : ordre FIXE, maquette pitch 65 (titre 41 + 24) */
  .br-hero__theme{ grid-column: 3; align-self: end; margin: 0 0 24px !important; }
  .br-hero__theme:nth-child(1){ grid-row: 1; }
  .br-hero__theme:nth-child(2){ grid-row: 3; }
  .br-hero__theme:nth-child(3){ grid-row: 5; }
  .br-hero__theme:nth-child(4){ grid-row: 7; }
  .br-hero__theme-btn{ font-size: clamp(30px, 8.7vw, 34px) !important; transform: none !important; }
  .br-hero__theme:not(.is-active) .br-hero__theme-btn{ opacity: 1; }

  /* photo : colonne 1 collée au bord, sur la rangée du pilier ACTIF */
  .br-hero__media{
    grid-column: 1 / 3; grid-row: 1;
    width: 127px; aspect-ratio: 127 / 93;
    margin-left: calc(-1 * var(--br-m-pad));
    margin-bottom: 24px;                     /* même ligne de base que le titre (marge 24) */
    align-self: end;
  }
  .br-hero:has(.br-hero__theme:nth-child(2).is-active) .br-hero__media{ grid-row: 3; }
  .br-hero:has(.br-hero__theme:nth-child(3).is-active) .br-hero__media{ grid-row: 5; }
  .br-hero:has(.br-hero__theme:nth-child(4).is-active) .br-hero__media{ grid-row: 7; }
  .br-hero__slide{ position: absolute; }     /* slides empilées dans la media box */

  /* contenu : rangée paire SOUS le pilier actif, pleine largeur.
     Seul le texte actif reste dans le flux. */
  .br-hero__text{ display: none !important; }
  .br-hero__text.is-active{ display: flex !important; }
  .br-hero__text--welcome{ display: none !important; }
  /* IDLE mobile (retour client 14.07 — remplace l'activate(0) du 1er jet) :
     l'ACCUEIL d'abord, AU-DESSUS des piliers (2e retour : collé à la rangée
     d'origines, on croyait le pilier ouvert) — image de bienvenue rangée 1,
     texte de bienvenue rangée 2, puis les 4 piliers décalés en 3/5/7/9.
     Aucun pilier ouvert, le 1er tap ouvre. À l'activation, --idle tombe et
     les rangées standard (1/3/5/7) reprennent. */
  .br-hero--idle .br-hero__text--welcome{
    display: flex !important;
    grid-column: 1 / 4; grid-row: 2;
    margin: 4px 0 48px;
    opacity: 1; visibility: visible;
  }
  .br-hero--idle .br-hero__media{ grid-row: 1; }
  .br-hero--idle .br-hero__theme:nth-child(1){ grid-row: 3; }
  .br-hero--idle .br-hero__theme:nth-child(2){ grid-row: 5; }
  .br-hero--idle .br-hero__theme:nth-child(3){ grid-row: 7; }
  .br-hero--idle .br-hero__theme:nth-child(4){ grid-row: 9; }
  /* Transitions douces (retour client 14.07) : slide + fade à l'activation.
     Texte : monte en fondu ; photo : glisse du bord gauche en fondu (classe
     br-anim re-déclenchée par hero.js à chaque activation). */
  .br-hero__text.is-active{ animation: br-hero-in-up .38s cubic-bezier(.22, .61, .36, 1) both; }
  .br-hero__media.br-anim{ animation: br-hero-in-left .38s cubic-bezier(.22, .61, .36, 1) both; }
  .br-hero__text{
    grid-column: 1 / 4; grid-row: 2;
    margin: 4px 0 48px;                      /* maquette : lien → pilier suivant ≈ 56 */
  }
  .br-hero:has(.br-hero__theme:nth-child(2).is-active) .br-hero__text{ grid-row: 4; }
  .br-hero:has(.br-hero__theme:nth-child(3).is-active) .br-hero__text{ grid-row: 6; }
  .br-hero:has(.br-hero__theme:nth-child(4).is-active) .br-hero__text{ grid-row: 8; }
  .br-hero__more{ align-self: flex-start; margin-top: 24px; }    /* maquette : texte → lien 30 */

  /* ---- Sections home calées sur le VIEWPORT réel (retour client
     12.07 : missions/pagination coupées). Les conteneurs Elementor de
     la home sont « boxed » → les largeurs fixes internes débordaient
     ou flottaient selon la largeur d'écran. calc(50% − 50vw) étire la
     section jusqu'aux bords réels — et vaut 0 si le conteneur est déjà
     pleine largeur (inoffensif ailleurs). ---- */
  .br-hero, .br-mission, .br-actu{
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
  }
  .br-mission, .br-actu{
    padding-left: var(--br-m-pad) !important;
    padding-right: var(--br-m-pad) !important;
  }

  /* ---- Pagination du carrousel Actualité : repasse à la ligne au
     lieu de filer hors cadre (8+ pages × .0N + flèches). ---- */
  /* PAGINATIONS mobiles = FLÈCHES + COMPTEUR « courant/total » (issue #29,
     précision client 14.07 : plus de dots/numéros en mobile).
     .br-actu__nav/__dots servent aussi au trombinoscope. Les compteurs et
     flèches manquantes sont injectés par mobile-subnav.js. */
  /* lien « Toutes les actualités » sur sa propre ligne ; pagination CALÉE
     À DROITE avec moins d'air au-dessus (retour client 14.07 — le desktop
     a margin-top clamp(28..48)) */
  .br-actu__nav{ flex-wrap: wrap; row-gap: 14px; justify-content: flex-end; margin-top: 10px !important; }
  .br-actu__all{ flex: 0 0 100%; white-space: nowrap; text-align: right; }
  /* dots masqués → compteur x/y entre les flèches */
  .br-actu__dots{ display: none; }
  /* pager dialogues : numéros masqués, flèches+compteur injectés */
  .br-dialogues__pager{ display: flex; align-items: center; gap: 18px; justify-content: flex-start; flex-wrap: nowrap !important; }
  .br-dialogues__pager .br-dialogues__pnum{ display: none; }
  /* recherche : numéros WP masqués (les flèches prev/next existent) */
  .br-dialogues--search .navigation.pagination .nav-links{ display: flex; align-items: center; gap: 18px; flex-wrap: nowrap !important; }
  .br-dialogues--search .page-numbers:not(.prev):not(.next){ display: none; }
  /* compteur et flèches injectés */
  .br-mpag-count{
    font-family: var(--br-font-display); font-style: italic; font-weight: 300;
    font-size: 20px; line-height: 1; color: var(--br-black, #000);
    font-variant-numeric: tabular-nums; white-space: nowrap;
  }
  .br-mpag-arrow{
    background: none; border: 0; padding: 4px 0; cursor: pointer;
    color: var(--br-black, #000); line-height: 0;
  }
  .br-mpag-arrow svg{ width: 64px; height: 16px; display: block; }
  .br-mpag-arrow[disabled]{ opacity: .3; pointer-events: none; }

  /* ---- BANDEAU home : titre @24, texte et lien indentés @56 ---- */
  .br-band{ padding-left: var(--br-m-pad); padding-right: var(--br-m-pad); }
  .br-band__text{ margin-left: 32px !important; max-width: none; }
  .br-band__link{ margin-left: 0 !important; }

  /* ---- MISSIONS : pile verticale — numéro NOIR 56px à gauche hors image,
     bas aligné sur l'image ; image à droite jusqu'au bord, largeur UNIQUE
     247×160 (retour client 14.07 : l'alternance 247/177 du Figma est une
     ERREUR de maquette — ne pas la réintroduire) ; texte 400 indenté
     --br-m-indent (56) dessous. Carrousel JS neutralisé. ---- */
  .br-mission__viewport{ overflow: visible !important; margin: 0 !important; padding: 0 !important; cursor: default !important; }
  .br-mission__track{ display: block !important; width: auto !important; }
  .br-mission__item{ width: auto !important; margin: 0 0 56px; }
  .br-mission__media{
    position: relative;
    width: auto; aspect-ratio: auto; height: 160px;
    background: none;
    overflow: visible;
    margin-right: calc(-1 * var(--br-m-pad));  /* image jusqu'au bord droit */
  }
  .br-mission__media img{
    position: absolute; right: 0; top: 0;
    width: 247px; max-width: 70vw; height: 160px; object-fit: cover;
  }
  /* placeholder gris à droite tant que la photo n'est pas choisie */
  .br-mission__media:not(:has(img))::before{
    content: ""; position: absolute; right: 0; top: 0;
    width: 247px; max-width: 70vw; height: 160px; background: #c7c7c7;
  }
  /* Pas de dégradé sombre en mobile : le numéro est à GAUCHE (hors image),
     le dégradé pleine largeur de .br-mission__media::after déborderait sur le blanc. */
  .br-mission__media::after{ display: none !important; }
  .br-mission__num{
    left: 0; bottom: 0;               /* bas du numéro = bas de l'image */
    color: var(--br-black);           /* hors image : numéro noir */
    text-shadow: none;
    font-size: 56px;                  /* Figma : 56px (retour client 14.07) */
  }
  .br-mission__body{ margin-top: 20px; margin-left: var(--br-m-indent); }
  .br-mission__text{ font-weight: 400; } /* Figma : 400 (le 500 est desktop) */
  .br-mission__nav{ display: none !important; }

  /* =================================================================
     BOUTIQUE mobile (retours client 13.07)
     ================================================================= */
  /* 1. Alignement : les colonnes des sections Elementor legacy ajoutent
     15px de padding → photos décalées par rapport aux textes (liste
     boutique ET fiche produit). */
  body.post-type-archive-product .elementor-widget-wrap,
  body.tax-product_cat .elementor-widget-wrap,
  body.single-product .elementor-widget-wrap{
    padding-left: 0 !important; padding-right: 0 !important;
  }
  /* 2. Catégories (Affiches / Livres) : SOUS-MENU HORIZONTAL, même
     dessin que la barre sous-menu des pages contenu (pleine largeur,
     filets, défilement, actif noir / autres estompés, fondu droit). */
  .br-shopnav{
    position: sticky; top: 63px; z-index: 60;
    background: var(--br-white, #fff);
    border-top: 1px solid rgba(0, 0, 0, .08);
    border-bottom: 1px solid rgba(0, 0, 0, .08);
    margin: 0 -20px 8px;
  }
  .br-shopnav::after{
    content: ""; position: absolute; top: 0; right: 0; bottom: 0; width: 56px;
    background: linear-gradient(to right, rgba(255, 255, 255, 0), var(--br-white, #fff));
    pointer-events: none;
    transition: opacity .2s ease;
  }
  .br-shopnav.at-end::after{ opacity: 0; }
  .br-shopnav::before{
    content: ""; position: absolute; top: 0; left: 0; bottom: 0; width: 56px;
    background: linear-gradient(to left, rgba(255, 255, 255, 0), var(--br-white, #fff));
    pointer-events: none; z-index: 1;
    opacity: 0; transition: opacity .2s ease;
  }
  .br-shopnav.has-left::before{ opacity: 1; }
  .br-shopnav__list{
    display: flex !important; flex-direction: row; flex-wrap: nowrap;
    align-items: center; gap: 28px;
    height: 56px; margin: 0 !important; padding: 0 20px !important;
    overflow-x: auto;
    scrollbar-width: none; -ms-overflow-style: none;
    -webkit-overflow-scrolling: touch;
  }
  .br-shopnav__list::-webkit-scrollbar{ display: none; }
  .br-shopnav__list .br-shopnav__list{ display: contents; }  /* sous-niveaux à plat */
  .br-shopnav__item{ flex: 0 0 auto; margin: 0 !important; }
  .br-shopnav__item > a{ font-size: 16px; line-height: 1; white-space: nowrap; }
  .br-shopnav:has(.is-active) .br-shopnav__item:not(.is-active):not(.is-ancestor) > a{ color: #b9b3ab; }
  /* 3. Produits similaires : UNE seule colonne (retour client). */
  .related.products ul.products,
  .elementor-widget-woocommerce-product-related ul.products{
    grid-template-columns: 1fr !important;
  }

  /* =================================================================
     LOT C — LISTES : filtres mobiles (maquette 3351:6110). La barre
     et le CTA sont injectés par mobile-filters.js ; la sidebar
     .br-dialogues__filters devient le panneau repliable.
     ================================================================= */
  .br-mfilters__bar{
    display: flex; align-items: center; gap: 12px;
    /* collée au header COMPACT (63px), même convention que la barre sous-menu
       (retour client 2026-07-13 : à 91px, une bande de contenu passait entre
       le header et la barre) + filet haut comme la barre sous-menu */
    position: sticky; top: 63px; z-index: 55;
    width: calc(100% + 2 * var(--br-m-pad));
    margin: 0 calc(-1 * var(--br-m-pad));
    padding: 16px var(--br-m-pad);
    background: var(--br-white, #fff);
    border: 0; border-top: 1px solid rgba(0, 0, 0, .08); border-bottom: 1px solid rgba(0, 0, 0, .08);
    font-family: var(--br-font-body); font-size: 16px; font-weight: 700;
    color: var(--br-black); text-align: left;
  }
  /* la barre est un DIV : toggle (label+badge+caret) à gauche,
     « Réinitialiser » à droite (retour client 14.07) */
  .br-mfilters__toggle{
    display: flex; align-items: center; gap: 12px;
    background: none; border: 0; padding: 0; margin: 0;
    font: inherit; color: inherit; cursor: pointer;
  }
  .br-mfilters__reset{
    margin-left: auto;
    background: none; border: 0; padding: 0;
    font-family: var(--br-font-body); font-size: 14px; font-weight: 400;
    color: var(--br-black); text-decoration: underline; text-underline-offset: 3px;
    cursor: pointer;
  }
  .br-mfilters__reset[hidden]{ display: none; }
  /* 601-900 connecté : barre d'admin WP fixe → même décalage que la barre
     sous-menu (46 + 63). */
  @media (min-width: 601px){
    body.admin-bar .br-mfilters__bar{ top: 109px; }
  }
  /* FOND BLANC GARANTI sous la barre (retour client 14.07 : le panneau
     transparaissait au-dessus de « Filtres ») : panneau ouvert, le widget
     peut remonter la page → le header repasse en GRAND au-dessus de la
     barre épinglée et le contenu s'affiche dans l'interstice. On force le
     header COMPACT (63px) tant qu'un panneau filtres est ouvert. */
  body:has(.br-mfilters-open) .br-header__inner{ padding: 6px var(--br-m-pad) 6px 6px; }
  body:has(.br-mfilters-open) .br-header__logo{ width: 51px; }
  body:has(.br-mfilters-open) .br-header__logo-full{ display: none; }
  body:has(.br-mfilters-open) .br-header__logo-mono{
    position: static; width: 51px; height: 51px;
    transform: none; opacity: 1;
  }
  .br-mfilters__badge{
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 22px; height: 22px; padding: 0 6px; border-radius: 11px;
    background: var(--br-black); color: var(--br-white, #fff);
    font-size: 13px; font-weight: 500; line-height: 1;
  }
  .br-mfilters__caret{ font-size: 16px; transition: transform .25s ease; }
  .br-mfilters-open .br-mfilters__caret{ transform: rotate(180deg); }

  /* panneau : sidebar cachée par défaut, ouverte plein flux ; la liste
     s'efface pendant la sélection (le scrollToResultsTop du widget
     devient inoffensif) */
  .br-dialogues__filters{ display: none; }
  .br-mfilters-open .br-dialogues__filters{
    display: block; position: static !important;
    max-height: none !important; overflow: visible !important;
    padding: 8px 0 0 !important; margin: 0 !important;
  }
  .br-mfilters-open .br-dialogues__list{ display: none; }

  .br-mfilters__apply{
    display: block; width: 100%;
    margin: 32px 0 12px; padding: 18px;
    background: var(--br-black); color: var(--br-white, #fff);
    border: 0; cursor: pointer;
    font-family: var(--br-font-body); font-size: 17px; font-weight: 500;
  }

  /* ---- CARTES teaser (maquette teaser--mobile 3351:5726, retour client
     14.07) : rangée [image 127×127 COLLÉE au bord gauche | date 14px calée
     en BAS de l'image] puis titre 24px / texte 16px / tags, indentés 24.
     La date vit dans le DOM sous le titre (body>head) → display:contents
     sur body/head pour la remonter dans la grille. 56px entre cartes. ---- */
  .br-dialogues__list .br-teaser{
    display: grid;
    grid-template-columns: 127px minmax(0, 1fr);
    grid-template-rows: 127px auto auto auto;
    column-gap: 16px; row-gap: 16px;
    margin-left: -20px;   /* image au bord de l'écran (padding 20 du gabarit,
                             même valeur que la barre sous-menu full-bleed) */
  }
  .br-dialogues__list .br-teaser + .br-teaser{ margin-top: 56px; }
  /* les états masqués doivent battre le display:grid (même spécificité, fichier + tard) */
  .br-dialogues__list .br-teaser[hidden],
  .br-dialogues__list .br-teaser.is-paged-out{ display: none !important; }
  .br-dialogues__list .br-teaser__body,
  .br-dialogues__list .br-teaser__head{ display: contents; }
  .br-dialogues__list .br-teaser__media{
    grid-column: 1; grid-row: 1;
    width: 127px; height: 127px; aspect-ratio: auto;
  }
  .br-dialogues__list .br-teaser__date{
    grid-column: 2; grid-row: 1; align-self: end;
    font-size: 14px; line-height: 1.4;
  }
  .br-dialogues__list .br-teaser__title{
    grid-column: 1 / -1; grid-row: 2;
    margin-left: var(--br-m-pad);              /* texte à 24 (l'image est à 0) */
    font-size: 24px; font-weight: 500; line-height: normal;
  }
  .br-dialogues__list .br-teaser__excerpt{
    grid-column: 1 / -1; grid-row: 3;
    margin-left: var(--br-m-pad);
    font-size: 16px; line-height: 1.4;
  }
  .br-dialogues__list .br-teaser__tags{
    grid-column: 1 / -1; grid-row: 4;
    margin-left: var(--br-m-pad);
  }
}

/* desktop : les éléments injectés n'existent que si la page a été
   chargée ≤900, mais on blinde le resize vers le large */
@media (min-width: 901px){
  .br-mfilters__bar, .br-mfilters__apply{ display: none !important; }
}

/* =====================================================================
   LOT F — MODULES TW : harmonisation du breakpoint du sommaire fléché
   (le widget bascule à 700, le site à 900) — mêmes valeurs que son @700.
   ===================================================================== */
@media (max-width: 900px){
  .br-somm__item, .br-somm__item--alt{ --off: 0%; }
  .br-somm__row{ padding-left: 14%; }
  .br-somm__arrow{ right: calc(100% - 14% + 8px); }
}

/* Keyframes du hero mobile (slide + fade, retour client 14.07) — hors media
   query : inertes tant que rien ne les référence. */
@keyframes br-hero-in-up{
  from{ opacity: 0; transform: translateY(14px); }
  to{ opacity: 1; transform: none; }
}
@keyframes br-hero-in-left{
  from{ opacity: 0; transform: translateX(-16px); }
  to{ opacity: 1; transform: none; }
}