/* ##########################################################################
   BLOC 30 — AGENDA CONFÉRENCES (page listing)
   Dernière MàJ : 28/02/2026
   - Scopé sous .sep-confs-page
   - Thématisation par module via "Classe du module" :
     * À venir   : sep-agenda sep-agenda--next
     * 2026      : sep-agenda sep-agenda--y2026
     * 2027      : sep-agenda sep-agenda--y2027
     * Archives  : sep-agenda sep-agenda--archives
   ########################################################################## */

.sep-confs-page{
  max-width: 1100px;
  margin: 0 auto;
  padding: 1.25rem;
  font-size: .98rem; /* un peu moins massif */
}

.sep-confs-hero{ margin-bottom: 1.25rem; }

.sep-confs-page .sep-kicker{
  margin: 0 0 .35rem 0;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  opacity: .75;
}

.sep-confs-title{
  margin: 0 0 .5rem 0;
  font-size: clamp(1.55rem, 3vw, 2.15rem);
  line-height: 1.15;
}

.sep-confs-lead{
  margin: 0;
  max-width: 70ch;
  opacity: .9;
}

/* -------------------------------------------------------------------------
   Cadre de section (style proche des "infos pratiques")
   ------------------------------------------------------------------------- */
.sep-confs-block{
  margin-top: 1.25rem;
  padding: 1rem;
  border-radius: var(--sep-radius-lg, 18px);
  border: 1px solid rgba(27,19,39,.10);
  background: linear-gradient(180deg, rgba(27,19,39,.02), rgba(255,255,255,1));
  box-shadow: 0 10px 26px rgba(27,19,39,.06);
}

.sep-confs-h2{
  margin: 0 0 .75rem 0;
  font-size: 1.15rem;
  font-weight: 800;
  letter-spacing: -0.01em;
}

.sep-confs-sub{
  margin: .25rem 0 0 0;
  opacity: .85;
}

/* -------------------------------------------------------------------------
   Thèmes par module (via "Classe du module")
   ------------------------------------------------------------------------- */
.moduletable.sep-agenda{
  --agenda-accent: var(--sep-accent, #6d28d9);
  --agenda-tint: rgba(109,40,217,.08);
}

.moduletable.sep-agenda--next{
  --agenda-accent: var(--sep-accent, #6d28d9);
  --agenda-tint: rgba(109,40,217,.08);
}

.moduletable.sep-agenda--y2026{
  --agenda-accent: var(--sep-p1-accent, var(--sep-accent, #6d28d9));
  --agenda-tint: var(--sep-p1-tint, rgba(109,40,217,.08));
}

.moduletable.sep-agenda--y2027{
  --agenda-accent: var(--sep-p2-accent, var(--sep-accent, #6d28d9));
  --agenda-tint: var(--sep-p2-tint, rgba(109,40,217,.08));
}

/* Archives : thème plus neutre (facile à lire) */
.moduletable.sep-agenda--archives{
  --agenda-accent: rgba(100,116,139,.95);   /* gris ardoise */
  --agenda-tint: rgba(100,116,139,.09);
}

/* -------------------------------------------------------------------------
   Cartes agenda : "À venir" + lignes de liste
   - Version thémée si le module a sep-agenda
   - Fallback discret si tu oublies sep-agenda
   ------------------------------------------------------------------------- */
.sep-confs-page .sep-conf-next,
.sep-confs-page .sep-conf-row{
  border-radius: var(--sep-radius-lg, 18px);
  border: 1px solid rgba(27,19,39,.10);
  background: #fff;
  box-shadow: 0 12px 30px rgba(27,19,39,.08);
}

.moduletable.sep-agenda .sep-conf-next,
.moduletable.sep-agenda .sep-conf-row{
  position: relative;
  overflow: hidden;
  border-radius: var(--sep-radius-lg, 18px);
  border: 1px solid rgba(27,19,39,.10);
  background: linear-gradient(180deg, var(--agenda-tint), #fff 70%);
  box-shadow: 0 12px 30px rgba(27,19,39,.08);
}

/* Bordure teintée si supportée */
@supports (color: color-mix(in srgb, #000 50%, transparent)){
  .moduletable.sep-agenda .sep-conf-next,
  .moduletable.sep-agenda .sep-conf-row{
    border-color: color-mix(in srgb, var(--agenda-accent) 28%, transparent);
  }
}

/* Barre d’accent (repère visuel immédiat) */
.moduletable.sep-agenda .sep-conf-next::before,
.moduletable.sep-agenda .sep-conf-row::before{
  content:"";
  position:absolute;
  inset: 0 0 auto 0;
  height: 4px;
  background: var(--agenda-accent);
}

/* -------------------------------------------------------------------------
   Carte "À venir"
   ------------------------------------------------------------------------- */
.sep-conf-next{
  padding: 1rem 1.05rem 1.05rem;
}

.sep-conf-next__title{
  margin: .45rem 0 .25rem 0;
  font-size: 1.05rem;
  font-weight: 800;
}

.sep-conf-next__meta{
  margin: 0 0 .9rem 0;
  color: var(--sep-muted, rgba(27,19,39,.72));
}

.sep-conf-next__actions{
  display: flex;
  gap: .75rem;
  flex-wrap: wrap;
}

/* Label "Prochaine conférence" (scopé agenda) */
.sep-confs-page .sep-chip{
  display: inline-flex;
  align-items: center;
  padding: .35rem .65rem;
  border-radius: 999px;
  font-weight: 800;
  font-size: .82rem;
  background: var(--agenda-tint, rgba(0,0,0,.06));
  border: 1px solid rgba(27,19,39,.12);
}

/* -------------------------------------------------------------------------
   Liste (2026/2027/archives si tu réutilises seplist)
   ------------------------------------------------------------------------- */
.sep-conf-list{
  display: grid;
  gap: .75rem;
}

.sep-conf-row{
  padding: .85rem .95rem;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}

.sep-conf-row__title{
  margin: 0 0 .25rem 0;
  font-size: 1.02rem;
  font-weight: 800;
  line-height: 1.25;
}

.sep-conf-row__meta{
  margin: 0;
  color: var(--sep-muted, rgba(27,19,39,.72));
}

.sep-conf-row__actions{ flex: 0 0 auto; }

/* Titres cliquables : repère clair */
.sep-confs-page .sep-conf-row__title a,
.sep-confs-page .sep-conf-next__title a{
  color: var(--sep-ink, #111);
  text-decoration: underline;
  text-decoration-thickness: .08em;
  text-underline-offset: .18em;
  text-decoration-color: rgba(0,0,0,.25); /* fallback */
}

@supports (color: color-mix(in srgb, #000 50%, transparent)){
  .sep-confs-page .sep-conf-row__title a,
  .sep-confs-page .sep-conf-next__title a{
    text-decoration-color: color-mix(in srgb, var(--agenda-accent, #6d28d9) 55%, transparent);
  }
}

.sep-confs-page .sep-conf-row__title a:hover,
.sep-confs-page .sep-conf-next__title a:hover{
  color: var(--agenda-accent, #6d28d9);
}

/* -------------------------------------------------------------------------
   Boutons : vrais boutons (senior-friendly)
   ------------------------------------------------------------------------- */
.sep-confs-page .sep-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;

  min-height: 44px;
  padding: .65rem 1.0rem;
  border-radius: var(--sep-ui-radius-btn, 14px);
  border: 1px solid rgba(27,19,39,.18);
  text-decoration: none;
  font-weight: 800;
  font-size: .95rem;
  line-height: 1;

  cursor: pointer;
  user-select: none;
}

.sep-confs-page .sep-btn--solid{
  background: var(--agenda-accent, #6d28d9);
  border-color: var(--agenda-accent, #6d28d9);
  color: #fff;
}

.sep-confs-page .sep-btn--solid:hover,
.sep-confs-page .sep-btn--solid:focus-visible{
  filter: brightness(.96);
}

.sep-confs-page .sep-btn--ghost{
  background: #fff;
  color: var(--sep-ink, #111);
}

.sep-confs-page .sep-btn--ghost:hover,
.sep-confs-page .sep-btn--ghost:focus-visible{
  border-color: var(--agenda-accent, #6d28d9);
  box-shadow: 0 0 0 4px rgba(109,40,217,.14);
}

/* Focus clavier (accessibilité) */
.sep-confs-page .sep-conf-row a:focus-visible,
.sep-confs-page .sep-conf-next a:focus-visible{
  outline: 3px solid rgba(0,0,0,.35);
  outline-offset: 3px;
  border-radius: 12px;
}

/* Etat "vide" */
.sep-confs-page .sep-empty{
  margin: 0;
  padding: .85rem 1rem;
  border-radius: 14px;
  background: rgba(0,0,0,.04);
  opacity: .9;
}

/* Mobile : actions en pleine largeur */
@media (max-width: 520px){
  .sep-conf-row{ flex-direction: column; }
  .sep-conf-row__actions{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .6rem;
    width: 100%;
  }
}

/* --- Archives : années repliables --- */
.sep-archives{ display: grid; gap: .75rem; }

.sep-arch-year{
  border-radius: var(--sep-radius-lg, 18px);
  border: 1px solid rgba(27,19,39,.10);
  background: #fff;
  overflow: hidden;
}

.sep-arch-summary{
  cursor: pointer;
  padding: .85rem 1rem;
  font-weight: 850;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  user-select: none;
}

.sep-arch-summary::-webkit-details-marker{ display: none; }

.sep-arch-summary::after{
  content: "▾";
  opacity: .7;
  transform: translateY(-1px);
  transition: transform .18s ease;
}

.sep-arch-year[open] .sep-arch-summary::after{
  transform: rotate(180deg) translateY(1px);
}

.sep-arch-summary__count{
  min-width: 2.2rem;
  text-align: center;
  padding: .2rem .5rem;
  border-radius: 999px;
  background: rgba(0,0,0,.06);
  border: 1px solid rgba(0,0,0,.10);
  font-size: .85rem;
  font-weight: 850;
}

.sep-arch-body{
  padding: .75rem 1rem 1rem;
  background: linear-gradient(180deg, var(--agenda-tint, rgba(0,0,0,.04)), #fff 70%);
}

/* =========================
   AGENDA — Ajustements finesse
   ========================= */

/* arrondis moins importants + plus d’air entre les cards */
/* RÉGLAGE RAPIDE : variables agenda → voir :root (BLOC 00) :
   - --sep-agenda-radius
   - --sep-agenda-gap
*/
/* cadre de section : un peu moins arrondi */
.sep-confs-block{
  border-radius: calc(var(--sep-agenda-radius) + 2px);
}

/* espace entre les lignes de conf */
.sep-conf-list{
  gap: var(--sep-agenda-gap);
}

/* cards (à venir + lignes) : arrondi + fond gradient très léger */
.moduletable.sep-agenda .sep-conf-next,
.moduletable.sep-agenda .sep-conf-row{
  border-radius: var(--sep-agenda-radius);
  background: linear-gradient(180deg, color-mix(in srgb, var(--agenda-tint) 80%, transparent), #fff 72%);
  box-shadow: 0 10px 24px rgba(27,19,39,.07);
}

/* barre d’accent un poil plus fine */
.moduletable.sep-agenda .sep-conf-next::before,
.moduletable.sep-agenda .sep-conf-row::before{
  height: 3px;
}

/* =========================
   AGENDA — Carte "À venir" compacte
   ========================= */

/* padding réduit */
.moduletable.sep-agenda--next .sep-conf-next{
  padding: .8rem .9rem .9rem;
}

/* titre légèrement plus petit */
.moduletable.sep-agenda--next .sep-conf-next__title{
  font-size: 1.0rem;
  margin: .35rem 0 .15rem 0;
}

/* meta plus courte visuellement */
.moduletable.sep-agenda--next .sep-conf-next__meta{
  margin: 0 0 .65rem 0;
  font-size: .95rem;
}

/* badge plus discret */
.moduletable.sep-agenda--next .sep-chip{
  padding: .28rem .55rem;
  font-size: .78rem;
}

/* boutons : un peu moins “hauts” mais toujours accessibles */
.moduletable.sep-agenda--next .sep-btn{
  min-height: 40px;
  padding: .55rem .9rem;
  border-radius: 12px;
}

.sep-confs-block{
  margin-top: 1.5rem;
}