/* ============================================================
   Beaux-midis — [beaux_midis]
   Palette UdeM : bleu #0057ac · marine #0b113a · jaune #ffca40 · vert #52b782
   ============================================================ */
.bm-wrap{
  --bm-bleu:#0057ac; --bm-navy:#0b113a; --bm-jaune:#ffca40; --bm-vert:#52b782;
  --bm-bleu-clair:#e5f0f8; --bm-gris:#f4f5f7; --bm-bord:#e3e6ec;
  font-family:"Figtree", system-ui, sans-serif;
  color:var(--bm-navy);
  max-width:1080px;
  margin-inline:auto;
}
.bm-intro{ font-size:1.05rem; line-height:1.6; max-width:70ch; margin-bottom:1.75rem; }
.bm-intro a{ color:var(--bm-bleu); text-decoration:underline; text-underline-offset:2px; }

/* ---- Barre de filtres (pilules + déroulants, même charte que le filtre services) ---- */
.bm-filtres{
  display:flex; flex-wrap:wrap; align-items:center; gap:.6rem;
  margin-bottom:.75rem;
}

/* Champ recherche */
.bm-search{
  display:inline-flex; align-items:center; gap:.5rem;
  border:1.5px solid #c8d4e0; border-radius:999px;
  background:#fff; padding:.4rem .9rem .4rem 1rem;
  flex:1 1 260px; min-width:220px; max-width:360px;
  transition:border-color .15s, box-shadow .15s;
}
.bm-search:focus-within{ border-color:var(--bm-bleu); box-shadow:0 0 0 3px rgba(0,87,172,.14); }
.bm-search svg{ flex:none; width:16px; height:16px; color:#8a9ab0; }
.bm-search input{
  font:inherit; font-size:1rem; color:var(--bm-navy);
  width:100%; padding:.05rem 0; margin:0;
  -webkit-appearance:none; appearance:none;
  border:0 !important; outline:0 !important; box-shadow:none !important;
  background:transparent !important; min-height:0;
}
.bm-search input:focus{ border:0 !important; outline:0 !important; box-shadow:none !important; }
.bm-search input::placeholder{ color:#8a9ab0; }
/* Retire la croix native de type=search (Chrome) qui alourdit le champ */
.bm-search input::-webkit-search-decoration,
.bm-search input::-webkit-search-cancel-button{ -webkit-appearance:none; }

/* Bouton pilule */
.bm-pill-btn{
  display:inline-flex; align-items:center; gap:.5rem;
  border:1.5px solid #c8d4e0; border-radius:999px;
  padding:.45rem 1rem; font:inherit; font-size:1rem; font-weight:500;
  line-height:1.4; color:var(--bm-navy); background:#fff;
  cursor:pointer; user-select:none; white-space:nowrap;
  transition:border-color .15s, background .15s, color .15s;
}
.bm-pill-btn:hover{ border-color:var(--bm-navy); }
.bm-pill-btn.active{ background:var(--bm-navy); border-color:var(--bm-navy); color:#fff; }
.bm-pill-btn.open{ border-color:var(--bm-navy); background:var(--bm-bleu-clair); color:var(--bm-navy); }
.bm-pill-btn.active.open{ background:var(--bm-navy); color:#fff; }
.bm-pill-arrow{
  width:8px; height:8px; flex-shrink:0; display:inline-block;
  border-right:2px solid currentColor; border-bottom:2px solid currentColor;
  transform:rotate(45deg); margin-top:-3px;
  transition:transform .15s, margin-top .15s;
}
.bm-pill-btn.open .bm-pill-arrow{ transform:rotate(-135deg); margin-top:3px; }

/* Panneau déroulant */
.bm-dropdown-wrap{ position:relative; }
.bm-dropdown-panel{
  display:none; position:absolute; top:calc(100% + 6px); left:0;
  background:#fff; border:1px solid #d0d8e4; border-radius:12px;
  box-shadow:0 4px 16px rgba(11,17,58,.12);
  min-width:220px; padding:.5rem 0; z-index:100;
}
.bm-dropdown-panel.open{ display:block; }
.bm-dropdown-panel::-webkit-scrollbar{ width:8px; }
.bm-dd-item{
  display:block; width:100%; text-align:left;
  border:0; background:transparent; font:inherit; font-size:1rem;
  padding:.55rem 1.1rem; color:var(--bm-navy); cursor:pointer;
  transition:background .1s;
}
.bm-dd-item:hover{ background:var(--bm-bleu-clair); }
.bm-dd-item.is-selected{ background:var(--bm-bleu-clair); font-weight:600; }
.bm-dd-item.is-selected::after{ content:"✓"; float:right; color:var(--bm-bleu); }

/* Panneau année (liste plus longue → scroll) */
.bm-dropdown-panel--annee{ max-height:280px; overflow-y:auto; }

/* Bouton réinitialiser */
.bm-btn-reset{
  display:none; align-items:center; gap:.3rem;
  border:1.5px solid #e0e0e0; border-radius:999px;
  padding:.45rem .875rem; font:inherit; font-size:.8rem; font-weight:600;
  color:#8a9ab0; background:transparent; cursor:pointer;
  transition:border-color .15s, color .15s;
}
.bm-btn-reset:hover{ border-color:#f04e24; color:#f04e24; }
.bm-btn-reset.visible{ display:inline-flex; }

.bm-count{ font-size:.85rem; color:#6b7a99; margin:.5rem 0 1.25rem; }
.bm-count strong{ color:var(--bm-navy); }

/* ---- Accordéon par année (details natifs) ---- */
.bm-annees{ display:flex; flex-direction:column; gap:.75rem; }
.bm-annee{ border:1px solid var(--bm-bord); border-radius:14px; overflow:hidden; background:#fff; }
.bm-annee[hidden]{ display:none; }
.bm-annee > summary{
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:1rem 1.2rem; cursor:pointer; list-style:none;
  font-family:"Lora", Georgia, serif; font-weight:600; font-size:1.15rem; color:var(--bm-navy);
  background:var(--bm-gris);
}
.bm-annee > summary::-webkit-details-marker{ display:none; }
.bm-annee > summary::after{
  content:""; flex:none; width:.75em; height:.75em; margin-left:auto;
  border-right:2.5px solid var(--bm-bleu); border-bottom:2.5px solid var(--bm-bleu);
  transform:rotate(45deg); transition:transform .2s ease;
}
.bm-annee[open] > summary::after{ transform:rotate(-135deg); }
.bm-annee-titre{ flex:none; }
.bm-annee-nb{
  font-family:"Figtree", sans-serif; font-weight:600; font-size:.78rem;
  color:var(--bm-bleu); background:var(--bm-bleu-clair);
  padding:.2rem .6rem; border-radius:999px; margin-left:.25rem;
}
.bm-table-wrap{ overflow-x:auto; }
.bm-table-wrap:focus-visible{ outline:2px solid var(--bm-bleu); outline-offset:-2px; }

/* ---- Tableau (desktop) ---- */
.bm-table{ width:100%; border-collapse:collapse; font-size:.94rem; }
.bm-table thead th{
  text-align:left; font-weight:600; font-size:.78rem; text-transform:uppercase;
  letter-spacing:.03em; color:#5a6472; padding:.7rem 1rem;
  border-bottom:2px solid var(--bm-bord); white-space:nowrap;
}
.bm-table td{ padding:.85rem 1rem; border-bottom:1px solid var(--bm-bord); vertical-align:top; }
.bm-table tbody tr:last-child td{ border-bottom:none; }
.bm-table tbody tr:hover{ background:#fafbfc; }
.bm-row[hidden]{ display:none; }
.bm-c-titre{ font-weight:600; max-width:34ch; }
.bm-c-titre a{ color:var(--bm-bleu); text-decoration:none; }
.bm-c-titre a:hover{ text-decoration:underline; }
.bm-c-conf{ color:#3a4453; max-width:22ch; }
.bm-c-date{ white-space:nowrap; color:#3a4453; font-variant-numeric:tabular-nums; }
.bm-c-mod{ color:#3a4453; font-size:.9rem; }
.bm-vide{ color:#aab2bf; }

/* ---- Badges (colonnes Langue / Discipline séparées, cellules = vraies td) ---- */
.bm-c-langue, .bm-c-disc{ white-space:normal; }
.bm-badge{
  display:inline-block; font-size:.74rem; font-weight:600; line-height:1.4;
  padding:.15rem .55rem; border-radius:999px; white-space:nowrap;
}
.bm-c-disc .bm-badge{ margin:1px 4px 1px 0; }
.bm-lang-fr{ background:var(--bm-bleu-clair); color:#0a4c86; }
.bm-lang-en{ background:#fff3d1; color:#8a6100; }
.bm-disc-ortho{ background:#e3f4ea; color:#1f7a49; }
.bm-disc-audio{ background:#e5f0f8; color:#0a4c86; }

/* ---- Liens ressources (vidéo + programme PDF) ---- */
.bm-res{ display:flex; flex-direction:column; align-items:flex-start; gap:.3rem; }
.bm-video-lien, .bm-doc-lien{
  display:inline-flex; align-items:center; gap:.35rem; white-space:nowrap;
  color:var(--bm-bleu); font-weight:600; font-size:.9rem; text-decoration:none;
}
.bm-video-lien:hover, .bm-doc-lien:hover{ text-decoration:underline; }
.bm-video-ico{ font-size:.75em; }
.bm-doc-ico{ font-size:.9em; }

.bm-empty{
  padding:2rem; text-align:center; color:#5a6472; font-size:1.05rem;
  background:var(--bm-gris); border-radius:14px;
}

/* ============================================================
   MOBILE — le tableau devient des cartes empilées
   ============================================================ */
@media (max-width:781px){
  .bm-search{ flex:1 1 100%; max-width:none; }
  .bm-dropdown-wrap{ flex:1 1 auto; }
  .bm-pill-btn{ width:100%; justify-content:space-between; }
  .bm-dropdown-panel{ min-width:0; width:100%; }

  .bm-table thead{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }
  /* box-sizing:border-box indispensable : avec width:100% en content-box, le
     padding des cellules s'ajoutait à la largeur → chaque carte dépassait la
     largeur du tableau (barre de défilement horizontale dans l'accordéon). */
  .bm-table, .bm-table tbody, .bm-table tr, .bm-table td{
    display:block; width:100%; box-sizing:border-box;
  }
  .bm-table tr.bm-row{
    border:1px solid var(--bm-bord); border-radius:12px; margin:.75rem; padding:.35rem .25rem;
    /* width:auto (et non 100%) : en bloc, 100% + marges latérales = débordement */
    width:auto;
  }
  .bm-table tbody tr:hover{ background:transparent; }
  .bm-table td{
    display:grid; grid-template-columns:44% 1fr; gap:.5rem; align-items:start;
    padding:.5rem .85rem; border-bottom:1px solid #eef0f4;
  }
  .bm-table td:last-child{ border-bottom:none; }
  .bm-table td::before{
    /* Fluide : à 360px, .68rem faisait encore passer « Conférencier·ère » sur 2 lignes */
    content:attr(data-th); font-size:clamp(.6rem, 2.7vw, .68rem);
    font-weight:600; text-transform:uppercase;
    letter-spacing:.02em; color:#8a93a3;
    min-width:0; overflow-wrap:anywhere;
  }
  /* Étiquette raccourcie : « Conférencier·ère(s) » se coupait en plein mot
     (CONFÉRENCIER·È / RE(S)). Sans le (s) elle tient sur une ligne. */
  .bm-table td.bm-c-conf::before{ content:"Conférencier·ère"; }
  .bm-c-titre{ max-width:none; font-size:1rem; }
  .bm-c-conf, .bm-c-titre{ max-width:none; }

  /* Titre : étiquette AU-DESSUS plutôt qu'à gauche. Les autres valeurs sont
     courtes et tiennent bien à droite de leur étiquette ; le titre, lui, est
     souvent long — sur 60 % de la largeur il se cassait en 4-5 lignes étroites
     et débordait. Sur toute la largeur il respire et la carte ne déborde plus. */
  .bm-table td.bm-c-titre{ display:block; padding-top:.6rem; }
  .bm-table td.bm-c-titre::before{
    display:block; margin-bottom:.2rem;
  }
  .bm-c-titre a{ overflow-wrap:anywhere; }

  /* Badges : en grille ils s'étiraient sur toute la colonne (fond pleine largeur).
     Ces 2 cellules passent en flex → la pastille garde la largeur du mot. */
  .bm-table td.bm-c-langue, .bm-table td.bm-c-disc{
    display:flex; flex-wrap:wrap; align-items:center; gap:.4rem;
  }
  .bm-table td.bm-c-langue::before, .bm-table td.bm-c-disc::before{
    flex:0 0 44%; box-sizing:border-box; padding-right:.5rem;
  }
  .bm-c-disc .bm-badge{ margin:0; }
}

@media (prefers-reduced-motion:reduce){
  .bm-annee > summary::after{ transition:none; }
}