/**
 * Kit AD83 — Styles des shortcodes du plugin afWork Core (css/af_kit_ad83-shortcodes.css)
 *
 * Couleurs et polices : variables --af-kit-* (css/af_kit_ad83-base.css), renseignées par le thème.
 * Polices : Montserrat = titres / labels / boutons, Open Sans = contenus.
 * Icônes : Phosphor Light (police « Phosphor-Light », chargée par le thème).
 *
 * Sommaire :
 *  0. Commun (zones de contenu, paragraphes vides de wpautop, focus visibles)
 *  1. [bouton]
 *  2. [accordeon]
 *  3. [rang] [un_demi] [un_tiers] [deux_tiers] [un_quart] [trois_quart]
 *  4. [af_pdf]
 *  5. [og_embed]
 *  6. [iframe] (+ [embed] natif)
 *  7. [wk_search]
 *  8. [wk_share_panel]
 *  9. [af_rss]
 * 10. [wk_slider]
 * 11. [wk_query_definition] [wk_query_filters] [wk_filter] [wk_query_results]
 * 12. Responsive (≤ 768 px)
 *
 * Non stylables (texte brut sans balise) : [wk_reading_time], [af_url], [af_format].
 */

/* ==========================================================================
   0. Commun
   ========================================================================== */

/* wpautop entoure les shortcodes « bloc » de <p> vides et de <br> parasites. */
.af_event_content p:empty,
.af_accordeon + br,
.af_accordeon .card-body > p:empty {
  display: none;
}

/* Focus clavier visible (style.css neutralise l'outline des liens) */
.af_accordeon .card-header button:focus-visible,
.af_embed a:focus-visible,
.af-rss a:focus-visible,
.wk-share-panel a:focus-visible,
.af_event_content a.af_button:focus-visible,
.af_event_content a.fl-button:focus-visible,
form[role="search"]:not([class]) input:focus-visible,
form[role="search"]:not([class]) button:focus-visible,
.wk_query_filters button:focus-visible,
.wk_query_filters select:focus-visible,
.wk_pagination a:focus-visible,
.swiper-outer-wrapper .swiper-pagination-bullet:focus-visible,
.swiper-outer-wrapper .swiper-button-prev:focus-visible,
.swiper-outer-wrapper .swiper-button-next:focus-visible {
  outline: 2px solid var(--focus-ring-color, var(--af-kit-color-dark)) !important;
  outline-offset: 2px !important;
}

/* ==========================================================================
   1. [bouton] — <a class="fl-button af_button style-… size-…">
   Couleurs, tailles, rayon, survol : système global css/af_agenda-base.css.
   Correspondances : style-primaire = primaire (vert diocésain / couleur du site),
   style-secondaire = secondaire (bleu nuit), style-transparent = transparent (contour),
   style-blanc = secondaire inversé (fonds sombres), taille="compact" (size-compact) = --sm (36px).
   Ici : uniquement le placement dans un contenu et le pictogramme « lien externe ».
   ========================================================================== */
.af_event_content a.af_button,
.af_event_content a.fl-button,
.fl-rich-text a.af_button {
  margin: 0 var(--af-kit-spacing-1) var(--af-kit-spacing-1) 0;
}
/* Lien externe : pictogramme « nouvelle fenêtre » */
.af_event_content a.af_button[target="_blank"]::after {
  content: '\e5de'; /* arrow-square-out */
  font-family: "Phosphor-Light" !important;
  font-size: 1.15em;
  line-height: 1;
}
/* ==========================================================================
   2. [accordeon] — .af_accordeon > .card > .card-header h3 button + .accordeon-content
   Le JS afWork (js/af_st-main.js) gère aria-expanded et la classe .show ;
   le thème ne charge pas le CSS « collapse » de Bootstrap : on le fournit ici.
   ========================================================================== */
.af_accordeon {
  /* Version neutre (grise). Version couleur plus tard : --af-accordion-accent: var(--af-kit-color-primary-dark) ;
     --af-accordion-open-bg: var(--af-kit-color-green-50) ; --af-accordion-open-border: var(--color-green-200). */
  --af-accordion-accent: var(--af-kit-color-neutral-600);
  --af-accordion-open-bg: var(--af-kit-color-neutral-100);
  --af-accordion-open-border: var(--af-kit-color-neutral-300);
  --af-accordion-title: var(--af-kit-color-dark);
  margin: 0 0 var(--af-kit-spacing-1);
}
.af_accordeon + .af_accordeon {
  margin-top: 0;
}
.af_accordeon .card {
  background: var(--af-kit-color-neutral-0);
  border: 1px solid var(--af-kit-color-neutral-200);
  border-radius: var(--af-kit-radius-lg);
  overflow: hidden;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.af_accordeon .card:has(button[aria-expanded="true"]) {
  border-color: var(--af-accordion-open-border);
  box-shadow: 0 4px 20px var(--af-kit-overlay-black-50);
}
.af_accordeon .card-header {
  padding: 0;
  margin: 0;
  background: none;
  border: 0;
}
.af_accordeon .card-header h3 {
  margin: 0 !important;
  padding: 0;
  font-size: inherit !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
}
.af_accordeon .card-header button {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--af-kit-spacing-2);
  width: 100%;
  margin: 0;
  padding: var(--af-kit-spacing-3) var(--af-kit-spacing-4) var(--af-kit-spacing-3) var(--af-kit-spacing-3);
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  color: var(--af-accordion-title);
  font-family: var(--af-kit-font-title);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.35;
  text-align: left;
  text-decoration: none;
  text-transform: none;
  letter-spacing: 0;
  white-space: normal;
  cursor: pointer;
}
.af_accordeon .card-header button::after {
  content: '\e136'; /* caret-down */
  position: absolute;
  right: var(--af-kit-spacing-3);
  top: 50%;
  font-family: "Phosphor-Light" !important;
  font-size: 1.25rem;
  line-height: 1;
  color: var(--af-accordion-accent);
  transform: translateY(-50%);
  transition: transform .25s ease;
}
.af_accordeon .card-header button[aria-expanded="true"]::after {
  transform: translateY(-50%) rotate(180deg);
}
.af_accordeon .card-header button:hover,
.af_accordeon .card-header button[aria-expanded="true"] {
  color: var(--af-accordion-title);
  background: var(--af-accordion-open-bg);
  text-decoration: none;
}
.af_accordeon .accordeon-content.collapse:not(.show) {
  display: none;
}
.af_accordeon .card-body {
  padding: var(--af-kit-spacing-2) var(--af-kit-spacing-3) var(--af-kit-spacing-3);
  font-family: var(--af-kit-font-text);
  color: var(--af-kit-color-neutral-800);
}
.af_accordeon .card-body > :last-child {
  margin-bottom: 0;
}
.af_accordeon .card-body ul {
  margin: var(--af-kit-spacing-2) 0 0;
  padding-left: var(--af-kit-spacing-3);
}
.af_accordeon .card-body li + li {
  margin-top: var(--af-kit-spacing-0);
}
.af_accordeon .card-body img {
  border-radius: var(--af-kit-radius-md);
}
/* La carte coupe le débordement : focus tracé à l'intérieur du bouton */
.af_accordeon .card-header button:focus-visible {
  outline-offset: -3px !important;
}
@media (prefers-reduced-motion: reduce) {
  .af_accordeon .card-header button::after { transition: none; }
}

/* ==========================================================================
   3. Colonnes — [rang] = .container > .row ; colonnes = .col-sm-6 / .col-md-*
   Grille Bootstrap 4 de BB Theme. On neutralise la largeur du .container
   dans un contenu et on règle les gouttières sur les jetons.
   ========================================================================== */
.af_event_content .container:has(> .row > [class*="col-md-"]),
.fl-rich-text .container:has(> .row > [class*="col-md-"]) {
  width: auto;
  max-width: none;
  margin: 0 0 var(--af-kit-spacing-3);
  padding: 0;
}
.af_event_content .container > .row:has(> [class*="col-md-"]),
.fl-rich-text .container > .row:has(> [class*="col-md-"]) {
  margin: 0 calc(-1 * var(--af-kit-spacing-2));
  row-gap: var(--af-kit-spacing-3);
}
.af_event_content .row > [class*="col-md-"],
.fl-rich-text .row > [class*="col-md-"] {
  padding: 0 var(--af-kit-spacing-2);
}
.af_event_content .row > [class*="col-md-"] > p:last-of-type,
.fl-rich-text .row > [class*="col-md-"] > p:last-of-type {
  margin-bottom: 0;
}

/* ==========================================================================
   4. [af_pdf] — iframe.af_pdf + lien « Ouvrir en pleine page » (styles inline)
   ========================================================================== */
iframe.af_pdf {
  display: block;
  width: 100%;
  border: 1px solid var(--af-kit-color-neutral-200) !important;
  border-radius: var(--af-kit-radius-lg);
  background: var(--af-kit-color-neutral-100);
}
iframe.af_pdf + a {
  display: inline-flex !important;
  align-items: center;
  gap: var(--af-kit-spacing-1);
  margin: var(--af-kit-spacing-2) 0 var(--af-kit-spacing-3);
  font-family: var(--af-kit-font-title);
  font-size: 0.875rem !important;
  font-weight: 400;
  color: var(--af-kit-color-text);
  text-decoration: none;
}
iframe.af_pdf + a::before {
  content: '\e702'; /* file-pdf */
  font-family: "Phosphor-Light" !important;
  font-size: 1.3em;
  line-height: 1;
}
iframe.af_pdf + a:hover {
  color: var(--af-kit-color-dark);
  text-decoration: underline;
}
iframe.af_pdf + a:focus-visible {
  outline: 2px solid var(--af-kit-color-primary-dark) !important;
  outline-offset: 2px !important;
}

/* ==========================================================================
   5. [og_embed] — .af_embed.post : carte de prévisualisation d'un lien externe
   Desktop : image à gauche, texte à droite. Mobile : empilé.
   ========================================================================== */
.af_embed {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
  grid-template-areas:
    "img head"
    "img title"
    "img text"
    "img cta";
  grid-template-rows: auto auto 1fr auto;
  column-gap: var(--af-kit-spacing-3);
  margin: 0 0 var(--af-kit-spacing-3);
  padding: 0 var(--af-kit-spacing-3) 0 0;
  background: var(--af-kit-color-neutral-0);
  border: 1px solid var(--af-kit-color-neutral-200);
  border-radius: var(--af-kit-radius-lg);
  overflow: hidden;
  transition: box-shadow .2s ease;
}
.af_embed:hover {
  box-shadow: 0 4px 20px var(--af-kit-overlay-black-100);
}
.af_embed > img:not(.favicon) {
  grid-area: img;
  width: 100%;
  height: 100%;
  min-height: 180px;
  object-fit: cover;
  border-radius: 0 !important;
  margin: 0;
  background: var(--af-kit-color-neutral-100);
}
.af_embed .card-header {
  grid-area: head;
  display: flex;
  align-items: center;
  gap: var(--af-kit-spacing-1);
  margin: 0;
  padding: var(--af-kit-spacing-3) 0 0;
  background: none;
  border: 0;
}
.af_embed .card-header .favicon {
  width: 18px;
  height: 18px;
  border-radius: var(--af-kit-radius-sm) !important;
  object-fit: contain;
}
.af_embed .site-name {
  font-family: var(--af-kit-font-title);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: .5px;
  text-transform: uppercase;
  color: var(--af-kit-color-neutral-600);
}
.af_embed h3 {
  grid-area: title;
  margin: var(--af-kit-spacing-1) 0 !important;
  font-family: var(--af-kit-font-title);
  font-size: 1.05rem !important;
  font-weight: 700;
  line-height: 1.35;
  text-transform: none !important;
  letter-spacing: 0 !important;
  color: var(--af-kit-color-text);
}
.af_embed p {
  grid-area: text;
  margin: 0 0 var(--af-kit-spacing-2);
  font-family: var(--af-kit-font-text);
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--af-kit-color-neutral-700);
}
/* Bouton « Lire l'article » : classe .af_button du système global */
.af_embed a.af_button {
  grid-area: cta;
  justify-self: start;
  margin: 0 0 var(--af-kit-spacing-3) !important;
}

/* ==========================================================================
   6. [iframe] (iframe sans classe, aspect-ratio inline) et [embed] natif
   ========================================================================== */
.af_event_content iframe:not(.af_pdf),
.fl-rich-text iframe[referrerpolicy="strict-origin-when-cross-origin"] {
  display: block;
  max-width: 100%;
  margin: 0 0 var(--af-kit-spacing-3);
  border: 1px solid var(--af-kit-color-neutral-200) !important;
  border-radius: var(--af-kit-radius-lg);
  background: var(--af-kit-color-neutral-100);
}

/* ==========================================================================
   7. [wk_search] — form[role=search] sans classe : champ + bouton loupe
   L'icône d'origine (.wk-icon.icon-magnifying-glass) n'existe pas dans le
   thème : remplacée par la loupe Phosphor.
   ========================================================================== */
form[role="search"]:not([class]) {
  display: flex;
  align-items: stretch;
  max-width: 560px;
  margin: 0 0 var(--af-kit-spacing-3);
  background: var(--af-kit-color-neutral-0);
  border: 1px solid var(--af-kit-color-neutral-200);
  border-radius: var(--af-kit-radius-xl);
  overflow: hidden;
  transition: border-color .2s ease, box-shadow .2s ease;
}
form[role="search"]:not([class]):focus-within {
  border-color: var(--af-kit-color-primary-dark);
  box-shadow: 0 0 0 3px rgba(var(--af-kit-color-primary-rgb), .2);
}
form[role="search"]:not([class]) input[type="search"] {
  flex: 1 1 auto;
  min-width: 0;
  height: 46px;
  margin: 0;
  padding: 0 var(--af-kit-spacing-3);
  background: transparent;
  border: 0 !important;
  border-radius: 0;
  box-shadow: none !important;
  font-family: var(--af-kit-font-text);
  font-size: 0.95rem;
  color: var(--af-kit-color-text);
}
form[role="search"]:not([class]) input[type="search"]::placeholder {
  color: var(--af-kit-color-neutral-600);
  opacity: 1;
}
form[role="search"]:not([class]) button[type="submit"] {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 38px;
  margin: 4px;
  padding: 0;
  background: var(--af-kit-color-primary-dark);
  border: 0;
  border-radius: var(--af-kit-radius-xl);
  color: var(--af-kit-color-neutral-0);
  cursor: pointer;
  transition: background-color .2s ease;
}
form[role="search"]:not([class]) button[type="submit"]:hover {
  background: var(--af-kit-color-dark);
}
form[role="search"]:not([class]) button[type="submit"] i {
  display: none;
}
form[role="search"]:not([class]) button[type="submit"]::before {
  content: '\e30c'; /* magnifying-glass */
  font-family: "Phosphor-Light" !important;
  font-size: 1.25rem;
  line-height: 1;
}

/* ==========================================================================
   8. [wk_share_panel] — .wk-share-panel (masqué inline par le plugin, aucun JS
   ne l'ouvre sur l'agenda) : affiché en rangée de pastilles dans un contenu.
   Icônes Font Awesome remplacées par Phosphor (selon l'URL du lien).
   ========================================================================== */
.af_event_content .wk-share-panel,
.fl-rich-text .wk-share-panel {
  display: flex !important;
}
.wk-share-panel {
  flex-wrap: wrap;
  gap: var(--af-kit-spacing-1);
  margin: 0 0 var(--af-kit-spacing-3);
}
.wk-share-panel br,
.wk-share-panel a > i {
  display: none;
}
.wk-share-panel a {
  display: inline-flex;
  align-items: center;
  gap: var(--af-kit-spacing-1);
  padding: var(--af-kit-spacing-1) var(--af-kit-spacing-2);
  background: var(--af-kit-color-neutral-0);
  border: 1px solid var(--af-kit-color-neutral-200);
  border-radius: var(--af-kit-radius-xl);
  font-family: var(--af-kit-font-title);
  font-size: 0.8rem;
  font-weight: 600;
  line-height: 1.2;
  color: var(--af-kit-color-dark) !important;
  text-decoration: none !important;
  transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}
.wk-share-panel a:hover {
  background: var(--af-kit-color-dark);
  border-color: var(--af-kit-color-dark);
  color: var(--af-kit-color-neutral-0) !important;
}
.wk-share-panel a::before {
  font-family: "Phosphor-Light" !important;
  font-size: 1.15rem;
  line-height: 1;
  color: var(--af-kit-color-primary-dark);
  content: '\e408'; /* share-network (repli) */
}
.wk-share-panel a:hover::before { color: inherit; }
.wk-share-panel a[href*="facebook.com"]::before { content: '\e226'; }
.wk-share-panel a[href*="x.com"]::before        { content: '\e4bc'; }
.wk-share-panel a[href*="linkedin.com"]::before { content: '\e2ee'; }
.wk-share-panel a[href*="whatsapp.com"]::before { content: '\e5d0'; }
.wk-share-panel a[href^="mailto:"]::before      { content: '\e218'; }

/* ==========================================================================
   9. [af_rss] — .af-rss > .af-rss-item (h3 > a, .af-rss-date, .af-rss-content)
   ========================================================================== */
.af-rss {
  margin: 0 0 var(--af-kit-spacing-3);
  background: var(--af-kit-color-neutral-0);
  border: 1px solid var(--af-kit-color-neutral-200);
  border-radius: var(--af-kit-radius-lg);
  overflow: hidden;
}
.af-rss-item {
  position: relative;
  padding: var(--af-kit-spacing-3);
  transition: background-color .2s ease;
}
.af-rss-item + .af-rss-item {
  border-top: 1px solid var(--af-kit-color-neutral-200);
}
.af-rss-item:hover {
  background: var(--af-kit-color-neutral-50);
}
.af-rss-item h3 {
  margin: 0 0 var(--af-kit-spacing-0) !important;
  font-family: var(--af-kit-font-title);
  font-size: 1rem !important;
  font-weight: 700;
  line-height: 1.35;
  text-transform: none !important;
  letter-spacing: 0 !important;
}
.af-rss-item h3 a {
  color: var(--af-kit-color-text) !important;
  text-decoration: none !important;
}
.af-rss-item h3 a:hover {
  color: var(--af-kit-color-primary-dark) !important;
}
.af-rss-date {
  display: flex;
  align-items: center;
  gap: var(--af-kit-spacing-0);
  margin: 0 0 var(--af-kit-spacing-1) !important;
  font-family: var(--af-kit-font-title);
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--af-kit-color-neutral-600);
}
.af-rss-date::before {
  content: '\e10a'; /* calendar-blank */
  font-family: "Phosphor-Light" !important;
  font-size: 1.1em;
  color: var(--af-kit-color-primary-dark);
}
.af-rss-content {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
  font-family: var(--af-kit-font-text);
  font-size: 0.88rem;
  line-height: 1.6;
  color: var(--af-kit-color-neutral-700);
}
.af-rss-content img {
  display: none;
}
.af-rss > p {
  margin: 0;
  padding: var(--af-kit-spacing-3);
  color: var(--af-kit-color-neutral-600);
}

/* ==========================================================================
   10. [wk_slider] — .swiper-outer-wrapper > .swiper (Swiper 14)
   Limité aux zones de contenu : les sliders des mises en page BB
   (ex. .wk_slider-nt_homesplit) gardent leurs styles dans style.css.
   ========================================================================== */
.af_event_content .swiper-outer-wrapper,
.fl-rich-text .swiper-outer-wrapper {
  margin: 0 0 var(--af-kit-spacing-3);
}
.af_event_content .swiper-outer-wrapper .swiper,
.fl-rich-text .swiper-outer-wrapper .swiper {
  padding-bottom: var(--af-kit-spacing-4); /* place pour les puces */
}
.af_event_content .swiper-slide figure,
.fl-rich-text .swiper-slide figure {
  margin: 0;
}
.af_event_content .swiper-slide img,
.fl-rich-text .swiper-slide img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--af-kit-radius-lg) !important;
}
.af_event_content .swiper-slide figcaption,
.fl-rich-text .swiper-slide figcaption {
  margin-top: var(--af-kit-spacing-1);
  font-family: var(--af-kit-font-title);
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--af-kit-color-dark);
}
.af_event_content .swiper-outer-wrapper .swiper-pagination,
.fl-rich-text .swiper-outer-wrapper .swiper-pagination {
  bottom: 0 !important;
}
.af_event_content .swiper-outer-wrapper .swiper-pagination-bullet,
.fl-rich-text .swiper-outer-wrapper .swiper-pagination-bullet {
  width: 10px;
  height: 10px;
  background: var(--af-kit-color-neutral-400);
  opacity: 1;
  transition: width .2s ease, background-color .2s ease;
}
.af_event_content .swiper-outer-wrapper .swiper-pagination-bullet-active,
.fl-rich-text .swiper-outer-wrapper .swiper-pagination-bullet-active {
  width: 24px;
  border-radius: var(--af-kit-radius-xl);
  background: var(--af-kit-color-primary-dark);
}
/* Flèches : pastilles blanches lisibles sur toute image */
.af_event_content .swiper-outer-wrapper .swiper-button-prev,
.af_event_content .swiper-outer-wrapper .swiper-button-next,
.fl-rich-text .swiper-outer-wrapper .swiper-button-prev,
.fl-rich-text .swiper-outer-wrapper .swiper-button-next {
  z-index: 10;
  width: 40px;
  height: 40px;
  margin-top: calc(-1 * var(--af-kit-spacing-4));
  padding: 0;
  background: var(--af-kit-color-neutral-0);
  border-radius: var(--af-kit-radius-xl);
  box-shadow: 0 2px 10px var(--af-kit-overlay-black-200);
}
.af_event_content .swiper-outer-wrapper .swiper-button-prev svg,
.af_event_content .swiper-outer-wrapper .swiper-button-next svg,
.fl-rich-text .swiper-outer-wrapper .swiper-button-prev svg,
.fl-rich-text .swiper-outer-wrapper .swiper-button-next svg {
  display: none;
}
.af_event_content .swiper-outer-wrapper .swiper-button-prev::after,
.af_event_content .swiper-outer-wrapper .swiper-button-next::after,
.fl-rich-text .swiper-outer-wrapper .swiper-button-prev::after,
.fl-rich-text .swiper-outer-wrapper .swiper-button-next::after {
  font-size: 20px !important;
  color: var(--af-kit-color-dark) !important;
}
.af_event_content .swiper-outer-wrapper .swiper-button-prev:hover,
.af_event_content .swiper-outer-wrapper .swiper-button-next:hover,
.fl-rich-text .swiper-outer-wrapper .swiper-button-prev:hover,
.fl-rich-text .swiper-outer-wrapper .swiper-button-next:hover {
  background: var(--af-kit-color-dark);
  backdrop-filter: none;
}
.af_event_content .swiper-outer-wrapper .swiper-button-prev:hover::after,
.af_event_content .swiper-outer-wrapper .swiper-button-next:hover::after,
.fl-rich-text .swiper-outer-wrapper .swiper-button-prev:hover::after,
.fl-rich-text .swiper-outer-wrapper .swiper-button-next:hover::after {
  color: var(--af-kit-color-neutral-0) !important;
}
.af_event_content .swiper-outer-wrapper .swiper-button-disabled,
.fl-rich-text .swiper-outer-wrapper .swiper-button-disabled {
  opacity: 0;
  pointer-events: none;
}

/* ==========================================================================
   11. [wk_query_*] — filtres (.wk_query_filters), résultats
   (.wk_query_results_inner : cartes af_card), pagination (.wk_pagination)
   ========================================================================== */
.wk_query_filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--af-kit-spacing-1);
  margin: 0 0 var(--af-kit-spacing-3);
}
.wk_query_filters + br {
  display: none;
}
.wk_filter_button {
  height: 40px;
  margin: 0;
  padding: 0 var(--af-kit-spacing-3);
  background: var(--af-kit-color-neutral-0);
  border: 1px solid var(--af-kit-color-neutral-200);
  border-radius: var(--af-kit-radius-xl);
  font-family: var(--af-kit-font-title);
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--af-kit-color-dark);
  cursor: pointer;
  transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}
.wk_filter_button:hover {
  border-color: var(--af-kit-color-primary-dark);
  color: var(--af-kit-color-primary-dark);
}
.wk_filter_button.active {
  background: var(--af-kit-color-primary-dark);
  border-color: var(--af-kit-color-primary-dark);
  color: var(--af-kit-color-neutral-0);
}
.wk_filter_select {
  height: 40px;
  min-width: 180px;
  margin: 0;
  padding: 0 36px 0 var(--af-kit-spacing-3);
  background-color: var(--af-kit-color-neutral-0);
  background-image: linear-gradient(45deg, transparent 50%, var(--af-kit-color-neutral-600) 50%),
                    linear-gradient(135deg, var(--af-kit-color-neutral-600) 50%, transparent 50%);
  background-position: calc(100% - 19px) 50%, calc(100% - 14px) 50%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  border: 1px solid var(--af-kit-color-neutral-200);
  border-radius: var(--af-kit-radius-xl);
  -webkit-appearance: none;
  appearance: none;
  font-family: var(--af-kit-font-title);
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--af-kit-color-neutral-700);
  cursor: pointer;
}
.wk_filter_select:hover {
  border-color: var(--af-kit-color-primary-dark);
}
.wk_query_results {
  margin: 0 0 var(--af-kit-spacing-3);
}
.wk_query_results_inner {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--af-kit-spacing-3);
}
.wk_query_results_inner > script {
  display: none;
}
.wk_query_results_inner > p {
  grid-column: 1 / -1;
  margin: 0;
  padding: var(--af-kit-spacing-3);
  background: var(--af-kit-color-neutral-100);
  border-radius: var(--af-kit-radius-lg);
  color: var(--af-kit-color-neutral-700);
}
.wk_pagination_container {
  display: flex;
  justify-content: center;
  margin-top: var(--af-kit-spacing-3);
}
/* Aucune carte rendue (gabarit af_card vide) : pas de bouton « afficher plus » orphelin */
.wk_query_results:not(:has(.wk_query_results_inner > :not(script))) .wk_pagination_container {
  display: none !important;
}
/* « afficher plus » : classe .fl-button du système global de boutons */
.wk_pagination a.loadmore {
  margin: 0 !important;
  text-decoration: none !important;
}

/* ==========================================================================
   12. Responsive (≤ 768 px — breakpoint BB)
   ========================================================================== */
@media (max-width: 768px) {
  .af_accordeon .card-header button {
    padding: var(--af-kit-spacing-2) var(--af-kit-spacing-4) var(--af-kit-spacing-2) var(--af-kit-spacing-2);
    font-size: 0.95rem;
  }
  .af_accordeon .card-header button::after {
    right: var(--af-kit-spacing-2);
  }
  .af_accordeon .card-body {
    padding: var(--af-kit-spacing-1) var(--af-kit-spacing-2) var(--af-kit-spacing-2);
  }

  iframe.af_pdf {
    height: 60vh !important;
  }

  .af_embed {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "img" "head" "title" "text" "cta";
    grid-template-rows: auto;
    padding: 0;
  }
  .af_embed > img:not(.favicon) {
    width: 100%;
    height: auto;
    min-height: 0;
    aspect-ratio: 16 / 9;
  }
  .af_embed > :not(img),
  .af_embed a.af_button {
    margin-left: var(--af-kit-spacing-2) !important;
    margin-right: var(--af-kit-spacing-2) !important;
  }
  .af_embed .card-header {
    padding-top: var(--af-kit-spacing-2);
  }

  form[role="search"]:not([class]) {
    max-width: none;
  }

  .af-rss-item {
    padding: var(--af-kit-spacing-2);
  }

  .af_event_content .swiper-outer-wrapper .swiper-button-prev,
  .af_event_content .swiper-outer-wrapper .swiper-button-next,
  .fl-rich-text .swiper-outer-wrapper .swiper-button-prev,
  .fl-rich-text .swiper-outer-wrapper .swiper-button-next {
    width: 34px;
    height: 34px;
  }

  .wk_filter_select {
    flex: 1 1 0;
    min-width: 0;
  }
  .af_event_content .container > .row:has(> [class*="col-md-"]),
  .fl-rich-text .container > .row:has(> [class*="col-md-"]) {
    row-gap: var(--af-kit-spacing-2);
  }
  .wk_query_results_inner {
    grid-template-columns: minmax(0, 1fr);
  }
}