/*
 * Braillard — Sous-menu de page (colonne gauche des pages de contenu)
 * Figma : items @ col 1 (x56), ~24px, pitch ~45px.
 */
.br-subnav { font-family: var(--br-font-body); }

.br-subnav__heading {
  display: block;
  font-size: clamp(18px, 1.39vw, 24px);
  font-weight: 500;
  color: var(--br-black);
  text-decoration: none;
  margin: 0 0 16px;
  opacity: 1;
}
.br-subnav__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.br-subnav__item a {
  font-size: clamp(18px, 1.39vw, 24px);
  line-height: 1.2;
  font-weight: 400;
  color: var(--br-black);
  opacity: 1;
  text-decoration: none;
  transition: opacity 0.2s ease;
}
.br-subnav__item.is-active a { font-weight: 500; }
.br-subnav__item a:hover { opacity: 0.55; }
.br-subnav--placeholder { color: #9a948d; font-style: italic; }

/* Niveau 3 = ancres, imbriquées sous la page active (niveau 2). Indentées, plus discrètes. */
.br-subnav__anchors { list-style: none; margin: .55em 0 .2em; padding: 0 0 0 1em; display: flex; flex-direction: column; gap: 12px; }
.br-subnav__anchor a {
  font-size: clamp(15px, 1.05vw, 18px); line-height: 1.2; font-weight: 400;
  color: #8a857e; text-decoration: none; transition: color .2s ease, opacity .2s ease;
}
.br-subnav__anchor a:hover { color: var(--br-black); opacity: 1; }
.br-subnav__anchor.is-active a { color: var(--br-black); font-weight: 500; }

/* =====================================================================
   Page de contenu : subnav sticky en OVERLAY + modules pleine largeur
   (modèle inséré ; ciblage par :has() car _css_classes ne se rend pas
   depuis un modèle inséré). Subnav col 1-3 (z haut) au-dessus des modules
   pleine largeur dont le contenu est décalé à droite.
   ===================================================================== */
.e-con:has(> .e-con .br-subnav){
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: clamp(16px, 1.85vw, 32px);
  padding-inline: clamp(20px, 4vw, 56px);
  align-items: start;
}
.e-con:has(> .e-con .br-subnav) > .e-con:has(.br-subnav){
  grid-column: 1 / 4;
  grid-row: 1;
  align-self: stretch;
  z-index: 5;
  padding: 0;
}
.e-con:has(> .e-con .br-subnav) > .e-con:not(:has(.br-subnav)){
  grid-column: 1 / -1;
  grid-row: 1;
  min-width: 0;
  padding: 0;
}
.e-con:has(> .e-con .br-subnav) > .e-con:not(:has(.br-subnav)) > .e-con{
  width: 100vw;
  margin-left: calc(50% - 50vw);
  padding-left: 35%;
  padding-right: clamp(20px, 4vw, 56px);
  box-sizing: border-box;
}
/* Widget posé DIRECTEMENT (sans conteneur) dans la colonne de droite :
   même traitement que les modules (plein-cadre, contenu décalé, marge droite = 56px)
   -> il ne passe plus sous le sous-menu ET va jusqu'au bord droit comme le reste. */
.e-con:has(> .e-con .br-subnav) > .e-con:not(:has(.br-subnav)) > .elementor-widget{
  width: 100vw;
  max-width: none;              /* Elementor plafonne les widgets à 100% -> on lève le plafond */
  margin-left: calc(50% - 50vw);
  padding-left: 35%;
  padding-right: clamp(20px, 4vw, 56px);
  box-sizing: border-box;
}
/* Sections .br-actu (Actualité / Trombinoscope) dans une page de contenu :
   le décalage ET l'espacement vertical sont gérés par la colonne / le conteneur
   Elementor -> on annule le padding propre de la section (sinon gros espace en
   haut/bas + double retrait horizontal). */
.e-con:has(> .e-con .br-subnav) .br-actu{ padding: 0; }

.e-con:has(> .e-con .br-subnav) > .e-con:has(.br-subnav) > .elementor-widget{
  position: sticky;
  align-self: start;
}
.br-subnav{ transition: color .3s ease; }
.br-subnav__heading{ transition: color .25s ease; }
.br-subnav__item a{ transition: color .25s ease, opacity .2s ease; }
.br-subnav__heading.is-on-dark{ color: #fff; }
.br-subnav__item.is-on-dark a{ color: #fff; opacity: 1; }

.elementor-widget-theme-post-featured-image img{ width: 100%; height: auto; display: block; }

/* BANDEAU (widget braillard-band) BORD-À-BORD dans une page de contenu (modèle subnav) :
   le retrait 35% générique pousserait le fond noir vers la droite -> on l'annule pour
   que le fond couvre tout le viewport (width:100vw hérité de la règle générique), et on
   ré-aligne le CONTENU du bandeau à 35% comme les autres modules.
   ⚠️ Poser le widget en ENFANT DIRECT de la colonne contenu. */
.e-con:has(> .e-con .br-subnav) > .e-con:not(:has(.br-subnav)) > .elementor-widget-braillard-band{
  padding-left: 0;
  padding-right: 0;
}
.e-con:has(> .e-con .br-subnav) > .e-con:not(:has(.br-subnav)) > .elementor-widget-braillard-band .br-band__title,
.e-con:has(> .e-con .br-subnav) > .e-con:not(:has(.br-subnav)) > .elementor-widget-braillard-band .br-band__text,
.e-con:has(> .e-con .br-subnav) > .e-con:not(:has(.br-subnav)) > .elementor-widget-braillard-band .br-band__link{
  /* 35% du bandeau full-bleed (100vw) ≠ retrait des modules (35% de la
     COLONNE = 100vw - 2×56px de paddings wrapper) → 39px de décalage à
     gauche des autres sections. 39.2px = 35% × 112px. */
  margin-left: calc(35% - 39.2px) !important;
  max-width: 640px !important;
}
.e-con:has(> .e-con .br-subnav) > .e-con:not(:has(.br-subnav)) > .elementor-widget-braillard-band .br-band__text{ margin-top: clamp(24px, 2.6vw, 36px) !important; }
.e-con:has(> .e-con .br-subnav) > .e-con:not(:has(.br-subnav)) > .elementor-widget-braillard-band .br-band__link{ margin-top: clamp(28px, 3vw, 44px) !important; }

@media (max-width: 900px){
  .e-con:has(> .e-con .br-subnav){ display: block; }
  .e-con:has(> .e-con .br-subnav) > .e-con:not(:has(.br-subnav)) > .e-con{ width: auto; margin-left: 0; padding-left: 0; padding-right: 0; }
  .e-con:has(> .e-con .br-subnav) > .e-con:not(:has(.br-subnav)) > .elementor-widget{ width: auto; margin-left: 0; padding-left: 0; padding-right: 0; }
  .e-con:has(> .e-con .br-subnav) > .e-con:not(:has(.br-subnav)) > .elementor-widget-braillard-band .br-band__title,
  .e-con:has(> .e-con .br-subnav) > .e-con:not(:has(.br-subnav)) > .elementor-widget-braillard-band .br-band__text,
  .e-con:has(> .e-con .br-subnav) > .e-con:not(:has(.br-subnav)) > .elementor-widget-braillard-band .br-band__link{ margin-left: 0 !important; }
}