/* =====================================================================
   Braillard — Dialogues : liste filtrable des activités (refonte 2026)
   ===================================================================== */
.br-dialogues{
  --accent: var(--br-dialogues);
  --gx: clamp(16px, 1.85vw, 32px);   /* gouttière identique à la grille 12 col du site */
  /* décalage sticky de la sidebar : doit se caler SOUS le logo mono du header
     condensé (sinon « Période » passe sous le logo). +32px avec l'admin-bar WP. */
  --filters-top: 116px;
  padding: clamp(24px, 4vh, 64px) clamp(20px, 3.24vw, 56px) clamp(60px, 8vh, 120px);
}
body.admin-bar .br-dialogues{ --filters-top: 150px; }
.br-dialogues[data-accent="origines"]{ --accent: var(--br-origines); }
.br-dialogues[data-accent="transmissions"]{ --accent: var(--br-transmissions); }
.br-dialogues[data-accent="expertises"]{ --accent: var(--br-expertises); }

.br-dialogues__heading{
  font-family: var(--br-font-display); font-style: italic; font-weight: 300;
  font-size: clamp(40px, 5vw, 64px); line-height: 1.1; color: var(--accent);
  margin: 0 0 clamp(28px, 4vh, 56px);
}

/* ---------- Grille 12 colonnes : filtres (1-3) + liste (5-12) ---------- */
.br-dialogues__body{
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: var(--gx);
  align-items: start;
}
.br-dialogues__filters{
  grid-column: 1 / span 3;
  position: sticky; top: var(--filters-top);
  /* Si la sidebar est plus haute que la fenêtre (fenêtre courte) : scroll interne
     pour garder TOUTES les options accessibles. */
  max-height: calc(100svh - var(--filters-top) - 24px);
  overflow-y: auto; overscroll-behavior: contain;
  padding-right: 6px;   /* évite que la scrollbar chevauche le contenu */
}
.br-dialogues__list{ grid-column: 5 / span 8; min-width: 0; }

/* ---------- Variante « plain » (widget « Activités par catégorie ») ----------
   Même teasers que Dialogues, mais SANS la colonne de filtres : la liste occupe
   toute la largeur de son conteneur (la colonne de contenu de la page). */
.br-dialogues--plain .br-dialogues__body{ display: block; }
.br-dialogues--plain .br-dialogues__list{ grid-column: auto; }
/* Embarqué dans une colonne de contenu : on retire l'inset horizontal de bord
   (destiné à la page Dialogues autonome) pour que les teasers s'alignent
   exactement sur le texte du corps (même retrait 35% que les paragraphes). */
.br-dialogues.br-dialogues--plain{ padding-left: 0; padding-right: 0; }

/* ---------- Filtres (accordéon) ---------- */
/* Rythme Figma : trait→titre 17px, titre→contenu 32px (body), contenu→trait 64px */
.br-filter{ border-top: 1px solid rgba(0, 0, 0, .15); padding: clamp(12px, 1.6vh, 17px) 0 clamp(40px, 6.5vh, 64px); }
.br-filter:first-of-type{ border-top: 0; padding-top: 0; }
.br-filter:last-of-type{ border-bottom: 1px solid rgba(0, 0, 0, .15); }
.br-filter__head{
  width: 100%; background: none; border: 0; cursor: pointer;
  display: flex; align-items: center; gap: 14px;   /* caret collé au titre, pas à droite */
  padding: 0; text-align: left; color: var(--br-black);
}
.br-filter__title{
  font-family: var(--br-font-body); font-weight: 500;
  font-size: clamp(22px, 2.2vw, 28px); line-height: 1;   /* Helvetica Neue Medium 28px (Figma) */
}
.br-filter__counter{   /* pastille noire entre le titre et le caret (Figma) */
  background: var(--br-black); color: var(--br-white);
  font-family: var(--br-font-body); font-size: 14px; line-height: 1;
  min-width: 24px; height: 24px; padding: 0 9px; border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center;
}
.br-filter__caret{ font-size: 22px; transition: transform .3s ease; }
.br-filter__head[aria-expanded="true"] .br-filter__caret{ transform: rotate(180deg); }   /* ouvert → ^ */

.br-filter__body{
  display: flex; flex-direction: column; gap: 12px;
  padding-top: clamp(24px, 3vh, 32px);   /* espace titre → contenu (Figma 32) */
}
.br-filter__head[aria-expanded="false"] + .br-filter__body{ display: none; }

/* Période : deux selects d'année reliés par un trait */
.br-filter__period{ display: flex; align-items: center; gap: 14px; }
.br-period{
  flex: 0 0 auto; min-width: 0; width: clamp(90px, 9vw, 121px);
  font-family: var(--br-font-body); font-size: clamp(15px, 1.1vw, 17px);
  color: var(--br-black); background: var(--br-white);
  border: 1px solid var(--br-black); border-radius: 0;
  padding: 12px 14px; cursor: pointer;
  -webkit-appearance: none; appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'><path d='M1 1l5 5 5-5' stroke='black' stroke-width='1.3'/></svg>");
  background-repeat: no-repeat; background-position: right 12px center;
}
.br-filter__period-sep{ flex: 1; height: 1px; background: var(--br-black); }

/* Champ de recherche (filtre texte instantané, dans la sidebar) */
.br-dialogues__search{
  width: 100%; box-sizing: border-box; margin: 0;
  font-family: var(--br-font-body); font-size: clamp(15px, 1.1vw, 17px);
  color: var(--br-black); background-color: var(--br-white);
  border: 1px solid var(--br-black); border-radius: 0;
  padding: 12px 42px 12px 14px; -webkit-appearance: none; appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6'><circle cx='11' cy='11' r='7'/><line x1='16.5' y1='16.5' x2='21' y2='21'/></svg>");
  background-repeat: no-repeat; background-position: right 13px center;
}
.br-dialogues__search::placeholder{ color: #8a857e; }
.br-dialogues__search:focus{ outline: 2px solid var(--accent); outline-offset: 2px; }
/* le bloc recherche n'a pas de titre/accordéon : espace bas plus court */
.br-filter--search{ padding-bottom: clamp(24px, 3.5vh, 40px); }

/* Cases à cocher */
.br-check{ display: flex; align-items: center; gap: 16px; cursor: pointer; }
.br-check input{ position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.br-check__box{
  width: 20px; height: 20px; flex-shrink: 0; position: relative;
  background: var(--br-white); border: 1px solid var(--br-black);
  box-shadow: 0 2px 4px rgba(0, 0, 0, .1); transition: background .15s ease, border-color .15s ease;
}
.br-check input:checked + .br-check__box{ border-color: var(--br-black); }
.br-check input:checked + .br-check__box::after{
  content: ""; position: absolute; left: 6px; top: 2px;
  width: 5px; height: 10px; border: solid var(--br-black); border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.br-check input:focus-visible + .br-check__box{ outline: 2px solid var(--accent); outline-offset: 2px; }
.br-check__label{
  font-family: var(--br-font-body); font-size: clamp(16px, 1.25vw, 20px);
  line-height: 1.4; color: var(--br-black);
}

.br-dialogues__reset{
  margin-top: clamp(18px, 2.4vh, 26px); background: none; border: 0; cursor: pointer;
  font-family: var(--br-font-body); font-size: 15px; color: var(--accent);
  text-decoration: underline; text-underline-offset: 3px; padding: 0;
}

/* ---------- Cartes (teasers) : image (3 col) + texte (5 col) ---------- */
.br-teaser{
  display: grid;
  grid-template-columns: 380fr 654fr;   /* = 3 col / 5 col de la grille, gouttière incluse */
  column-gap: var(--gx);
  align-items: start;
}
.br-teaser + .br-teaser{ margin-top: clamp(32px, 3.6vw, 56px); }
.br-teaser[hidden]{ display: none; }

.br-teaser__media{
  position: relative; display: block; overflow: hidden;
  width: 100%; aspect-ratio: 380 / 280;      /* fallback avant que le JS pose le ratio réel */
  max-height: 380px;                          /* plafond de hauteur (retour client #36) */
  background-color: transparent;             /* pas de fond gris autour de l'image (retour client #36) */
  /* image ENTIÈRE (non rognée), calée en haut à droite (issue #36) */
  background-size: contain; background-position: top right; background-repeat: no-repeat;
}
/* Voile sombre retiré en mode « contain » : il assombrissait les bandes grises
   résiduelles (il servait la lisibilité des images « cover » plein cadre, sans
   objet ici — le teaser n'a pas de texte par-dessus l'image). */

.br-teaser__body{
  min-width: 0;
  display: flex; flex-direction: column; gap: clamp(14px, 1.7vw, 30px);
  padding-top: 2px;
}
.br-teaser__head{ display: flex; flex-direction: column; gap: 12px; }
.br-teaser__title{
  font-family: var(--br-font-body); font-weight: 500;
  font-size: clamp(20px, 1.95vw, 28px); line-height: 1.1; color: var(--br-black);
  text-decoration: none; transition: color .2s ease;
}
.br-teaser__title:hover{ color: var(--accent); }
.br-teaser__date{
  font-family: var(--br-font-body); font-size: clamp(14px, 1.05vw, 16px);
  line-height: 1.4; color: #5f5a54;
}
.br-teaser__excerpt{
  font-family: var(--br-font-body); font-size: clamp(14px, 1.05vw, 16px);
  line-height: 1.4; color: var(--br-black);
}
.br-teaser__excerpt p{ margin: 0; }

.br-teaser__tags{ display: flex; flex-wrap: wrap; gap: 12px; }
.br-teaser__tag{
  background: var(--accent); color: var(--br-white);
  font-family: var(--br-font-body); font-weight: 500; font-size: clamp(13px, .95vw, 15px);
  line-height: 1; padding: 6px 8px;
}

.br-dialogues__empty{
  font-family: var(--br-font-body); font-size: clamp(16px, 1.2vw, 20px);
  color: #5f5a54; padding: clamp(24px, 5vh, 48px) 0;
}

/* ---------- Responsive ---------- */
@media (max-width: 980px){
  .br-dialogues__body{ display: block; }
  .br-dialogues__filters{ position: static; max-height: none; overflow: visible; padding-right: 0; margin-bottom: clamp(28px, 5vh, 48px); }
}
@media (max-width: 560px){
  .br-teaser{ grid-template-columns: 1fr; row-gap: 16px; }
  .br-teaser__media{ aspect-ratio: 16 / 10; }
}

/* ===== Pagination (variante --plain avec data-per-page) ===== */
.br-teaser.is-paged-out{ display: none; }
.br-dialogues__pager{
  display: flex; flex-wrap: wrap; gap: clamp(12px, 1.2vw, 20px);
  justify-content: flex-end;
  padding: clamp(16px, 1.6vw, 28px) 0 0;
}
.br-dialogues__pager .br-dialogues__pnum{
  background: none; border: 0; cursor: pointer; padding: 0 2px;
  font-family: var(--br-font-display); font-style: italic; font-weight: 300;
  font-size: clamp(20px, 1.75vw, 30px); line-height: 1;
  color: #b9b3ab; transition: color .2s ease;
}
.br-dialogues__pager .br-dialogues__pnum:hover,
.br-dialogues__pager .br-dialogues__pnum.is-active{ color: var(--br-black, #000); }