/* =====================================================================
   Braillard — Modèle de page de contenu PAR CLASSES (conteneurs V3 .e-con)
   Menu sticky à gauche (overlay) + contenu décalé à droite + modules
   bord-à-bord en OPT-IN. À poser dans l'éditeur : Avancé → CSS Classes.

     .br-pg          -> sur le conteneur PARENT (devient la grille 12 col)
       .br-pg-nav    -> sur le conteneur du MENU (col 1-3, sticky, par-dessus)
       .br-pg-main   -> sur le conteneur du CONTENU (col 1/-1, pleine largeur)
         (chaque module = un conteneur ; son contenu est décalé à droite)
         .br-pg-bleed-> sur un module pour le passer BORD À BORD (fond pleine largeur)

   Variable : --br-pg-top (décalage haut du sticky, défaut 120px)
             --br-pg-inset (décalage du contenu, défaut 35%)
   ===================================================================== */

.br-pg{
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: clamp(16px, 1.85vw, 32px);
  padding-inline: clamp(20px, 4vw, 56px);
  align-items: start;
  --br-pg-inset: 35%;
}

/* Colonne MENU : col 1-3, pleine hauteur (course du sticky), au-dessus */
.br-pg > .br-pg-nav{
  grid-column: 1 / 4;
  grid-row: 1;
  align-self: stretch;
  z-index: 5;
  padding: 0;
}
/* le widget du menu colle au scroll */
.br-pg-nav > .elementor-widget,
.br-pg-nav > .elementor-element{
  position: sticky;
  top: var(--br-pg-top, 120px);
  align-self: start;
}

/* Colonne CONTENU : pleine largeur de la grille, MÊME rangée (superposée au menu) */
.br-pg > .br-pg-main{
  grid-column: 1 / -1;
  grid-row: 1;
  min-width: 0;
  z-index: 1;
  padding: 0;
}
/* Chaque module : contenu décalé à droite pour dégager le menu */
.br-pg-main > .e-con{
  padding-left: var(--br-pg-inset, 35%);
}
/* OPT-IN bord à bord : le module prend toute la largeur du viewport
   (le contenu reste décalé, aligné avec les modules normaux) */
.br-pg-main > .br-pg-bleed{
  width: 100vw;
  margin-left: calc(50% - 50vw);
  padding-left: var(--br-pg-inset, 35%);
  padding-right: clamp(20px, 4vw, 56px);
  box-sizing: border-box;
}

/* Cas du BANDEAU (widget braillard-band) en bord-à-bord : son fond noir est
   porté par .br-band (interne) → le widget remplit toute la largeur sans
   décalage, et c'est le contenu (.br-band__*) qu'on ré-aligne en un bloc. */
.br-pg-main > .br-pg-bleed.elementor-widget-braillard-band{
  padding-left: 0;
  padding-right: 0;
}
.br-pg-main > .br-pg-bleed .br-band__title,
.br-pg-main > .br-pg-bleed .br-band__text,
.br-pg-main > .br-pg-bleed .br-band__link{
  margin-left: var(--br-pg-inset, 35%) !important;
  max-width: 640px !important;
}
.br-pg-main > .br-pg-bleed .br-band__text{ margin-top: clamp(24px, 2.6vw, 36px) !important; }
.br-pg-main > .br-pg-bleed .br-band__link{ margin-top: clamp(28px, 3vw, 44px) !important; }
.br-pg-main > .br-pg-bleed .br-band__arrow svg{ width: clamp(70px, 7vw, 105px) !important; }

/* Responsive : on empile, plus de décalage ni de full-bleed */
@media (max-width: 900px){
  .br-pg{ display: block; }
  .br-pg-nav{ margin-bottom: 28px; }
  .br-pg-main > .e-con{ padding-left: 0; }
  .br-pg-main > .br-pg-bleed{ width: auto; margin-left: 0; padding-left: 0; padding-right: 0; }
}