/* ============================================================
   Agenda Événements Pro — CSS SaaS moderne
   Police : DM Sans (corps) + Syne (titres)
   ============================================================ */

/* ─── 1. Variables (light mode) ─────────────────────────── */
:root {
  /* Couleurs principales */
  --ag-accent:        #6366f1;
  --ag-accent-dark:   #4f46e5;
  --ag-accent-light:  #e0e7ff;
  --ag-accent-rgb:    99, 102, 241;

  /* Surfaces */
  --ag-bg:            #f8f9fb;
  --ag-surface:       #ffffff;
  --ag-surface-2:     #f1f3f9;
  --ag-border:        #e5e8ef;
  --ag-border-hover:  #c7cdd9;

  /* Texte */
  --ag-text:          #0f1117;
  --ag-text-2:        #4b5563;
  --ag-text-3:        #9ca3af;
  --ag-text-inverse:  #ffffff;

  /* Typographie */
  --ag-font:          'DM Sans', system-ui, sans-serif;
  --ag-font-display:  'Syne', 'DM Sans', sans-serif;

  /* Spatiale */
  --ag-radius:        14px;
  --ag-radius-sm:     8px;
  --ag-radius-lg:     20px;
  --ag-radius-full:   9999px;

  /* Ombres */
  --ag-shadow:        0 1px 3px rgba(0,0,0,.06), 0 4px 16px rgba(0,0,0,.06);
  --ag-shadow-hover:  0 4px 8px rgba(0,0,0,.08), 0 12px 32px rgba(0,0,0,.1);
  --ag-shadow-pop:    0 20px 60px rgba(0,0,0,.16);

  /* Transitions */
  --ag-ease:          cubic-bezier(.4, 0, .2, 1);
  --ag-dur:           220ms;

  /* Container */
  --ag-container:     1280px;
  --ag-gap:           clamp(1rem, 2vw, 1.5rem);
}

/* ─── 2. Dark mode ──────────────────────────────────────── */
.agenda-dark,
[data-agenda-theme="dark"] {
  --ag-bg:            #0d0f14;
  --ag-surface:       #161a23;
  --ag-surface-2:     #1e2332;
  --ag-border:        #282e40;
  --ag-border-hover:  #3a4258;
  --ag-text:          #f0f2f8;
  --ag-text-2:        #a0aabf;
  --ag-text-3:        #606880;
  --ag-shadow:        0 1px 3px rgba(0,0,0,.3), 0 4px 16px rgba(0,0,0,.3);
  --ag-shadow-hover:  0 4px 8px rgba(0,0,0,.4), 0 12px 32px rgba(0,0,0,.4);
  --ag-shadow-pop:    0 20px 60px rgba(0,0,0,.5);
  --ag-accent-light:  rgba(99,102,241,.15);
}

/* ─── 3. Reset & base ───────────────────────────────────── */
.agenda-archive,
.agenda-single,
.agenda-wrap,
.agenda-calendar-wrap {
  font-family:    var(--ag-font);
  color:          var(--ag-text);
  background:     var(--ag-bg);
  -webkit-font-smoothing: antialiased;
  box-sizing: border-box;
}

*, *::before, *::after { box-sizing: inherit; }

/* ─── 4. Containers ─────────────────────────────────────── */
.agenda-container {
  max-width:  var(--ag-container);
  margin:     0 auto;
  padding:    0 clamp(1rem, 4vw, 2rem);
}

/* ─── 5. Hero banner (archive) ──────────────────────────── */
.agenda-hero {
  position:     relative;
  background:   linear-gradient(135deg,
                  var(--ag-surface),
                  var(--ag-surface));
  border-bottom: 1px solid var(--ag-border);
  padding:      clamp(2.5rem, 8vw, 5rem) clamp(1rem, 4vw, 2rem) clamp(2rem, 6vw, 4rem);
  text-align:   center;
  overflow:     hidden;
}

.agenda-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 80% 60% at 50% 0%,
    rgba(var(--ag-accent-rgb),.12) 0%, transparent 70%);
  pointer-events: none;
}

.agenda-hero__label {
  display:        inline-block;
  font-size:      .7rem;
  font-weight:    700;
  letter-spacing: .15em;
  text-transform: uppercase;
  color:          var(--ag-accent);
  background:     var(--ag-accent-light);
  padding:        .3em .9em;
  border-radius:  var(--ag-radius-full);
  margin-bottom:  1rem;
}

.agenda-hero__title {
  font-family:  var(--ag-font-display);
  font-size:    clamp(2rem, 5vw, 3.5rem);
  font-weight:  800;
  line-height:  1.1;
  margin:       0 0 .75rem;
  color:        var(--ag-text);
  letter-spacing: -.02em;
}

.agenda-hero__sub {
  font-size:  1.1rem;
  color:      var(--ag-text-2);
  margin:     0;
}

/* ─── 6. Dark mode toggle ───────────────────────────────── */
.agenda-darkmode-toggle {
  position:   absolute;
  top:        1.25rem;
  right:      1.25rem;
  background: var(--ag-surface);
  border:     1px solid var(--ag-border);
  border-radius: var(--ag-radius-full);
  padding:    .4rem .9rem;
  cursor:     pointer;
  display:    flex;
  align-items: center;
  gap:        .3rem;
  font-size:  1rem;
  transition: box-shadow var(--ag-dur) var(--ag-ease),
              border-color var(--ag-dur) var(--ag-ease);
  z-index:    10;
}
.agenda-darkmode-toggle:hover {
  box-shadow:   var(--ag-shadow);
  border-color: var(--ag-border-hover);
}
.agenda-darkmode-toggle__icon { line-height: 1; }
.agenda-dark .agenda-darkmode-toggle__icon--dark,
[data-agenda-theme="dark"] .agenda-darkmode-toggle__icon--dark { display: none; }
.agenda-darkmode-toggle__icon--light { display: none; }
.agenda-dark .agenda-darkmode-toggle__icon--light,
[data-agenda-theme="dark"] .agenda-darkmode-toggle__icon--light { display: inline; }

/* Mode clair : afficher lune, masquer soleil */
:not(.agenda-dark):not([data-agenda-theme="dark"]) .agenda-darkmode-toggle__icon--dark  { display: inline; }
:not(.agenda-dark):not([data-agenda-theme="dark"]) .agenda-darkmode-toggle__icon--light { display: none; }

/* ─── 7. Filtres ────────────────────────────────────────── */
.agenda-filters {
  background:   var(--ag-surface);
  border-bottom: 1px solid var(--ag-border);
  padding:      1.25rem clamp(1rem, 4vw, 2rem);
  position:     sticky;
  top:          0;
  z-index:      50;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  background:   rgba(255,255,255,.85);
}
.agenda-dark .agenda-filters,
[data-agenda-theme="dark"] .agenda-filters {
  background: rgba(22,26,35,.88);
}

.agenda-filters__inner {
  max-width: var(--ag-container);
  margin:    0 auto;
  display:   flex;
  flex-wrap: wrap;
  align-items: center;
  gap:       .75rem;
}

/* Search */
.agenda-filters__search {
  position:    relative;
  flex:        1 1 220px;
  min-width:   0;
}
.agenda-filters__search-icon {
  position:   absolute;
  left:       .85rem;
  top:        50%;
  transform:  translateY(-50%);
  width:      1.1rem;
  height:     1.1rem;
  color:      var(--ag-text-3);
  pointer-events: none;
}
.agenda-filters__search-input {
  width:         100%;
  padding:       .65rem .65rem .65rem 2.5rem;
  border:        1.5px solid var(--ag-border);
  border-radius: var(--ag-radius-sm);
  background:    var(--ag-surface);
  color:         var(--ag-text);
  font-family:   var(--ag-font);
  font-size:     .9rem;
  transition:    border-color var(--ag-dur) var(--ag-ease),
                 box-shadow var(--ag-dur) var(--ag-ease);
  outline:       none;
}
.agenda-filters__search-input::placeholder { color: var(--ag-text-3); }
.agenda-filters__search-input:focus {
  border-color: var(--ag-accent);
  box-shadow:   0 0 0 3px rgba(var(--ag-accent-rgb),.15);
}
.agenda-filters__search-clear {
  position:   absolute;
  right:      .6rem;
  top:        50%;
  transform:  translateY(-50%);
  background: none;
  border:     none;
  color:      var(--ag-text-3);
  cursor:     pointer;
  font-size:  1.2rem;
  line-height: 1;
  padding:    .2rem;
  opacity:    0;
  pointer-events: none;
  transition: opacity var(--ag-dur) var(--ag-ease);
}
.agenda-filters__search-input:not(:placeholder-shown) + .agenda-filters__search-clear {
  opacity: 1;
  pointer-events: auto;
}

/* Chips */
.agenda-filters__cats {
  display:    flex;
  flex-wrap:  wrap;
  gap:        .4rem;
}
.agenda-chip {
  display:        inline-flex;
  align-items:    center;
  gap:            .35rem;
  padding:        .4rem .85rem;
  border-radius:  var(--ag-radius-full);
  border:         1.5px solid var(--ag-border);
  background:     var(--ag-surface);
  color:          var(--ag-text-2);
  font-family:    var(--ag-font);
  font-size:      .82rem;
  font-weight:    500;
  cursor:         pointer;
  transition:     all var(--ag-dur) var(--ag-ease);
  white-space:    nowrap;
}
.agenda-chip:hover {
  border-color: var(--ag-accent);
  color:        var(--ag-accent);
}
.agenda-chip.is-active {
  background:   var(--ag-accent);
  border-color: var(--ag-accent);
  color:        #fff;
}
.agenda-chip__count {
  font-size:    .7rem;
  background:   rgba(255,255,255,.25);
  border-radius: var(--ag-radius-full);
  padding:      .05em .45em;
}
.agenda-chip:not(.is-active) .agenda-chip__count {
  background: var(--ag-surface-2);
  color:      var(--ag-text-3);
}

/* Compteur résultats */
.agenda-filters__results {
  margin-left:  auto;
  font-size:    .82rem;
  color:        var(--ag-text-3);
  white-space:  nowrap;
}

/* ─── 8. Grille events ──────────────────────────────────── */
.agenda-grid {
  display:    grid;
  gap:        var(--ag-gap);
  padding:    clamp(1.5rem, 4vw, 2.5rem) clamp(1rem, 4vw, 2rem);
  max-width:  var(--ag-container);
  margin:     0 auto;
}
.agenda-grid--1col { grid-template-columns: 1fr; }
.agenda-grid--2col { grid-template-columns: repeat(2, 1fr); }
.agenda-grid--3col { grid-template-columns: repeat(3, 1fr); }
.agenda-grid--4col { grid-template-columns: repeat(4, 1fr); }

/* ─── 9. Card événement ─────────────────────────────────── */
.agenda-card {
  position:     relative;
  background:   var(--ag-surface);
  border:       1px solid var(--ag-border);
  border-radius: var(--ag-radius);
  overflow:     hidden;
  display:      flex;
  flex-direction: column;
  box-shadow:   var(--ag-shadow);
  transition:   transform var(--ag-dur) var(--ag-ease),
                box-shadow var(--ag-dur) var(--ag-ease),
                border-color var(--ag-dur) var(--ag-ease);
}
.agenda-card:hover {
  transform:    translateY(-4px);
  box-shadow:   var(--ag-shadow-hover);
  border-color: var(--ag-border-hover);
}
.agenda-card__link {
  position:   absolute;
  inset:      0;
  z-index:    1;
}

/* Image */
.agenda-card__media {
  position:   relative;
  /* Hauteur fixe — la photo est toujours recadrée à cette taille,
     quelle que soit sa dimension originale (carré, portrait, paysage) */
  height:     220px;
  min-height: 220px;
  max-height: 220px;
  overflow:   hidden;
  background: var(--ag-surface-2);
  flex-shrink: 0;
}
.agenda-card__img {
  width:      100%;
  height:     100%;
  /* object-fit: cover centre et recadre sans déformer */
  object-fit: cover;
  object-position: center center;
  transition: transform 400ms var(--ag-ease);
  display:    block;
}
.agenda-card:hover .agenda-card__img { transform: scale(1.04); }
.agenda-card__img-placeholder {
  width:    100%;
  height:   100%;
  display:  flex;
  align-items: center;
  justify-content: center;
}
.agenda-card__img-placeholder svg {
  width: 3rem;
  height: 3rem;
  color: var(--ag-border);
}

/* Date badge (coin image) */
.agenda-card__date-badge {
  position:     absolute;
  top:          .75rem;
  left:         .75rem;
  background:   var(--ag-accent);
  color:        #fff;
  border-radius: var(--ag-radius-sm);
  text-align:   center;
  padding:      .35rem .6rem;
  min-width:    2.8rem;
  z-index:      2;
}
.agenda-card__date-day   { display: block; font-size: 1.3rem; font-weight: 700; line-height: 1; }
.agenda-card__date-month { display: block; font-size: .65rem; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; }

/* Badge catégorie */
.agenda-badge {
  display:        inline-block;
  padding:        .22em .75em;
  border-radius:  var(--ag-radius-full);
  font-size:      .72rem;
  font-weight:    600;
  letter-spacing: .03em;
  background:     var(--ag-badge-bg, var(--ag-accent-light));
  color:          var(--ag-badge-text, var(--ag-accent));
}
.agenda-card__cat-badge {
  position:   absolute;
  bottom:     .75rem;
  right:      .75rem;
  z-index:    2;
}

/* Corps card */
.agenda-card__body {
  padding:    1.25rem;
  display:    flex;
  flex-direction: column;
  gap:        .6rem;
  flex: 1;
}
.agenda-card__title {
  font-family:  var(--ag-font-display);
  font-size:    1.05rem;
  font-weight:  700;
  line-height:  1.3;
  margin:       0;
}
.agenda-card__title a {
  color:           var(--ag-text);
  text-decoration: none;
  transition:      color var(--ag-dur) var(--ag-ease);
  position:        relative;
  z-index:         2;
}
.agenda-card__title a:hover { color: var(--ag-accent); }

.agenda-card__meta {
  display:    flex;
  flex-direction: column;
  gap:        .3rem;
}
.agenda-card__meta-item {
  display:    inline-flex;
  align-items: center;
  gap:        .4rem;
  font-size:  .8rem;
  color:      var(--ag-text-2);
}
.agenda-card__meta-item svg {
  width: .9rem;
  height: .9rem;
  flex-shrink: 0;
  color: var(--ag-accent);
}
.agenda-card__meta-item--prix {
  font-weight: 600;
  color: var(--ag-accent);
}
.agenda-card__excerpt {
  font-size:  .85rem;
  color:      var(--ag-text-2);
  line-height: 1.6;
  margin:     0;
  flex: 1;
}
.agenda-card__footer {
  display:    flex;
  gap:        .5rem;
  flex-wrap:  wrap;
  padding-top: .5rem;
  border-top: 1px solid var(--ag-border);
  position:   relative;
  z-index:    2;
}

/* ─── 10. Boutons ───────────────────────────────────────── */
.agenda-btn {
  display:        inline-flex;
  align-items:    center;
  gap:            .4rem;
  padding:        .65rem 1.25rem;
  border-radius:  var(--ag-radius-sm);
  font-family:    var(--ag-font);
  font-size:      .88rem;
  font-weight:    600;
  text-decoration: none;
  cursor:         pointer;
  border:         1.5px solid transparent;
  transition:     all var(--ag-dur) var(--ag-ease);
  white-space:    nowrap;
}
.agenda-btn svg { width: .9rem; height: .9rem; transition: transform var(--ag-dur) var(--ag-ease); }
.agenda-btn:hover svg { transform: translateX(3px); }

.agenda-btn--primary {
  background:   var(--ag-btn-inscr, var(--ag-accent));
  color:        var(--ag-accent-text, #fff);
  border-color: var(--ag-btn-inscr, var(--ag-accent));
}
.agenda-btn--primary:hover {
  background:   var(--ag-accent-dark);
  border-color: var(--ag-accent-dark);
  color:        var(--ag-accent-text, #fff);
}
.agenda-btn--outline {
  background:   transparent;
  color:        var(--ag-accent);
  border-color: var(--ag-accent);
}
.agenda-btn--outline:hover {
  background: var(--ag-accent-light);
}
.agenda-btn--ghost {
  background:   transparent;
  color:        var(--ag-text-2);
  border-color: var(--ag-border);
}
.agenda-btn--ghost:hover {
  background:   var(--ag-surface-2);
  border-color: var(--ag-border-hover);
  color:        var(--ag-text);
}
.agenda-btn--sm    { padding: .45rem .9rem; font-size: .8rem; }
.agenda-btn--full  { width: 100%; justify-content: center; }

/* ─── 11. Page single ───────────────────────────────────── */
.agenda-single {
  background:     var(--ag-bg);
}

/*
 * Spacer universel — DIV physique en bas du template.
 * Hauteur pilotée par le réglage "Espace avant le footer".
 */
.agenda-single__spacer {
  display:    block !important;
  height:     var(--ag-footer-spacing, 60px) !important;
  width:      100% !important;
  visibility: hidden;
  pointer-events: none;
}

/*
 * Supprimer les paddings/marges des wrappers thème qui écrasent l'espace.
 * WordPress ajoute la class "single-evenement" sur <body> automatiquement.
 */
body.single-evenement article.agenda-single {
  padding-bottom: 0 !important;
  margin-bottom:  0 !important;
  overflow: visible !important;
}

/* Thèmes courants : Astra, OceanWP, GeneratePress, Divi, Hello, Blocksy */
body.single-evenement .entry-content,
body.single-evenement .entry-content-wrap,
body.single-evenement .post-content,
body.single-evenement main > article,
body.single-evenement .site-main > article,
body.single-evenement #main > article,
body.single-evenement #content > article {
  padding-bottom: 0 !important;
  margin-bottom:  0 !important;
}

/* Hero — hauteur augmentée + image pleine résolution */
.agenda-single__hero {
  position:   relative;
  min-height: clamp(420px, var(--ag-hero-height, 62vh), 780px);
  display:    flex;
  align-items: flex-end;
  overflow:   hidden;
}
.agenda-single__hero-img {
  position:              absolute;
  inset:                 0;
  background-size:       cover;           /* image couvre tout */
  background-position:   center 30%;      /* cadrage haut : sujet pas coupé */
  background-repeat:     no-repeat;
  image-rendering:       auto;            /* qualité max */
  transition:            transform 700ms var(--ag-ease);
  /* Forcer le navigateur à utiliser la haute résolution */
  will-change:           transform;
}
.agenda-single__hero:hover .agenda-single__hero-img { transform: scale(1.03); }
.agenda-single__hero-overlay {
  position:   absolute;
  inset:      0;
  background: linear-gradient(
    to top,
    var(--ag-hero-overlay, rgba(0,0,0,.82)) 0%,
    rgba(0,0,0,.25) 50%,
    rgba(0,0,0,.05) 80%,
    transparent 100%
  );
}
.agenda-single__hero-content {
  position:   relative;
  z-index:    2;
  padding:    3rem clamp(1.5rem, 5vw, 4rem);
  width:      100%;
  /* Padding bas plus généreux pour aérer les métadonnées */
  padding-bottom: 3.5rem;
}
.agenda-single__title {
  font-family:  var(--ag-font-display);
  font-size:    clamp(2rem, 4.5vw, 3.4rem);
  font-weight:  800;
  color:        #fff;
  margin:       .75rem 0 1.25rem;
  line-height:  1.15;
  text-shadow:  0 2px 16px rgba(0,0,0,.4);
  max-width:    900px;
}
.agenda-single__meta-bar {
  display:    flex;
  flex-wrap:  wrap;
  gap:        .75rem 1.5rem;
  /* Ligne séparatrice subtile au-dessus des métas */
  padding-top: 1rem;
  border-top:  1px solid rgba(255,255,255,.2);
}
.agenda-single__meta-item {
  display:     inline-flex;
  align-items: center;
  gap:         .45rem;
  color:       rgba(255,255,255,.92);
  font-size:   .92rem;
  font-weight: 500;
}
.agenda-single__meta-item svg { width: 1rem; height: 1rem; flex-shrink: 0; }

/* Body 2 colonnes */
.agenda-single__body {
  display:    grid;
  grid-template-columns: 1fr 360px;
  gap:        3rem;
  max-width:  var(--ag-container);
  margin:     3rem auto 0;
  padding:    0 clamp(1.5rem, 4vw, 3rem);
  align-items: start;
}
.agenda-single__content {
  font-size:  var(--ag-font-size-body, 1rem);
  line-height: 1.8;
  color:      var(--ag-text);
}
.agenda-single__content h2, .agenda-single__content h3 {
  font-family: var(--ag-font-display);
  color: var(--ag-text);
}

/* Sidebar card */
.agenda-single__card {
  background:     var(--ag-surface);
  border:         1px solid var(--ag-border);
  border-radius:  var(--ag-radius);
  padding:        1.5rem;
  display:        flex;
  flex-direction: column;
  gap:            1rem;
  box-shadow:     var(--ag-shadow);
  position:       sticky;
  top:            5rem;
}
.agenda-single__card-title {
  font-family:  var(--ag-font-display);
  font-size:    1rem;
  font-weight:  700;
  color:        var(--ag-text);
  margin:       0;
  padding-bottom: .75rem;
  border-bottom: 1px solid var(--ag-border);
}

/* Detail list — utilise les variables de couleur des réglages */
.agenda-details-list {
  display:    grid;
  grid-template-columns: auto 1fr;
  gap:        .55rem .9rem;
  margin:     0;
}
.agenda-details-list dt {
  font-size:      .72rem;
  font-weight:    700;
  text-transform: uppercase;
  letter-spacing: .07em;
  color:          var(--ag-details-label, var(--ag-text-3));
  padding-top:    .15rem;
  white-space:    nowrap;
}
.agenda-details-list dd {
  font-size:   .9rem;
  font-weight: 500;
  color:       var(--ag-details-value, var(--ag-text));
  margin:      0;
}

/* ─── 12. Calendrier ────────────────────────────────────── */
.agenda-calendar-wrap {
  position: relative;
  padding:  clamp(1rem, 4vw, 2rem) clamp(1rem, 4vw, 2rem);
  max-width: var(--ag-container);
  margin:   0 auto;
}
.agenda-calendar {
  background:    var(--ag-surface);
  border:        1px solid var(--ag-border);
  border-radius: var(--ag-radius-lg);
  overflow:      hidden;
  box-shadow:    var(--ag-shadow);
}

/* Nav bar */
.agenda-calendar__nav {
  display:        flex;
  align-items:    center;
  justify-content: space-between;
  padding:        1.25rem 1.5rem;
  /* Fond = couleur accent (personnalisable), avec contraste assuré */
  background:     var(--ag-accent);
  border-bottom:  1px solid rgba(0,0,0,0.1);
  gap:            1rem;
}
.agenda-calendar__nav-btn {
  width:          2.6rem !important;
  height:         2.6rem !important;
  border-radius:  var(--ag-radius-sm) !important;
  border:         2px solid rgba(255,255,255,0.75) !important;
  background:     rgba(255,255,255,0.28) !important;
  color:          #fff !important;
  cursor:         pointer !important;
  display:        flex !important;
  align-items:    center !important;
  justify-content: center !important;
  transition:     all var(--ag-dur) var(--ag-ease) !important;
  flex-shrink:    0 !important;
  visibility:     visible !important;
  opacity:        1 !important;
}
.agenda-calendar__nav-btn svg {
  width:   1.3rem !important;
  height:  1.3rem !important;
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  stroke:  #fff !important;
  fill:    none !important;
}
.agenda-calendar__nav-btn:hover {
  background:   rgba(255,255,255,0.95) !important;
  border-color: rgba(255,255,255,0.95) !important;
  color:        var(--ag-accent) !important;
  transform:    scale(1.08) !important;
}
.agenda-calendar__nav-center {
  display:    flex;
  flex-direction: column;
  align-items: center;
  gap:        .4rem;
}
.agenda-calendar__title {
  font-family:    var(--ag-font-display);
  font-size:      clamp(1.1rem, 2.5vw, 1.4rem);
  font-weight:    800;
  /* Blanc sur fond accent = toujours lisible */
  color:          #fff;
  margin:         0;
  text-transform: capitalize;
  text-shadow:    0 1px 4px rgba(0,0,0,0.15);
}
.agenda-calendar__today-btn {
  font-size:    .72rem;
  font-weight:  700;
  padding:      .25rem .8rem;
  border-radius: var(--ag-radius-full);
  border:       2px solid rgba(255,255,255,0.7);
  background:   rgba(255,255,255,0.18);
  color:        #fff;
  cursor:       pointer;
  transition:   all var(--ag-dur) var(--ag-ease);
}
.agenda-calendar__today-btn:hover {
  background:   rgba(255,255,255,0.95);
  border-color: rgba(255,255,255,0.95);
  color:        var(--ag-accent);
}

/* En-têtes jours (LUN MAR...) — fond légèrement plus sombre que la nav */
.agenda-calendar__header {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  background: rgba(0,0,0,0.12);
  border-bottom: 1px solid rgba(0,0,0,0.08);
}
.agenda-calendar__dow {
  padding:    .65rem .5rem;
  text-align: center;
  font-size:  .68rem;
  font-weight: 800;
  letter-spacing: .09em;
  text-transform: uppercase;
  color:      rgba(255,255,255,0.85);
}

/* Grille jours */
.agenda-calendar__grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap:     1px;
  background: var(--ag-border);
}

/* Cellules carrées fixes — 100px de côté, jamais étirées */
.agenda-calendar__cell {
  background:  var(--ag-surface);
  position:    relative;
  width:       100%;
  height:      100px;
  min-height:  100px;
  max-height:  100px;
  overflow:    hidden;
  transition:  background var(--ag-dur) var(--ag-ease);
  box-sizing:  border-box;
}

/* Contenu positionné en absolu — remplit exactement le carré */
.agenda-calendar__cell-inner {
  position:    absolute;
  top:         0;
  left:        0;
  right:       0;
  bottom:      0;
  padding:     .3rem .25rem .2rem .3rem;
  display:     flex;
  flex-direction: column;
  gap:         .1rem;
  overflow:    hidden;
  box-sizing:  border-box;
}

/* Numéro du jour — compact */
.agenda-calendar__day-num {
  flex-shrink:  0;
  font-size:    .7rem;
  font-weight:  700;
  color:        var(--ag-text-2);
  line-height:  1.2;
  margin-bottom: .1rem;
}

/* Jour actuel — cercle coloré autour du numéro */
.agenda-calendar__cell--today .agenda-calendar__day-num {
  background:   var(--ag-accent);
  color:        #fff;
  border-radius: 50%;
  width:        1.4rem;
  height:       1.4rem;
  display:      inline-flex;
  align-items:  center;
  justify-content: center;
  font-size:    .65rem;
  line-height:  1;
}

/* Zone événements — prend le reste de la hauteur disponible */
.agenda-calendar__events {
  display:        flex;
  flex-direction: column;
  gap:            .1rem;
  overflow:       hidden;
  flex:           1;
  min-height:     0;
}

/* Pastille événement dans calendrier */
.agenda-cal-event {
  display:      flex;
  align-items:  center;
  gap:          .2rem;
  padding:      .12rem .3rem;
  border-radius: 4px;
  background:   var(--ag-accent-light);
  color:        var(--ag-accent);
  font-size:    .6rem;
  font-weight:  600;
  cursor:       pointer;
  overflow:     hidden;
  white-space:  nowrap;
  text-overflow: ellipsis;
  transition:   all var(--ag-dur) var(--ag-ease);
  border:       1px solid transparent;
  line-height:  1.3;
  /* Empêche la pastille de grandir */
  flex-shrink:  0;
  max-width:    100%;
  min-width:    0;
}
.agenda-cal-event:hover {
  background:   var(--ag-accent);
  color:        #fff;
}
.agenda-cal-event__dot {
  width:        5px;
  height:       5px;
  border-radius: 50%;
  background:   currentColor;
  flex-shrink:  0;
}
/* Le label de l'événement tronqué avec ellipsis */
.agenda-cal-event__label {
  overflow:     hidden;
  text-overflow: ellipsis;
  white-space:  nowrap;
  min-width:    0;
}
.agenda-cal-event__more {
  font-size:  .58rem;
  color:      var(--ag-text-3);
  padding:    0 .2rem;
  cursor:     pointer;
  flex-shrink: 0;
  line-height: 1.4;
}
.agenda-cal-event__more:hover { color: var(--ag-accent); }

/* Loader */
.agenda-calendar__loading {
  grid-column: 1 / -1;
  display:     flex;
  align-items: center;
  justify-content: center;
  gap:         .75rem;
  padding:     3rem;
  color:       var(--ag-text-3);
  font-size:   .9rem;
}
.agenda-spinner {
  width:       1.5rem;
  height:      1.5rem;
  border:      2px solid var(--ag-border);
  border-top-color: var(--ag-accent);
  border-radius: 50%;
  animation:   agenda-spin .7s linear infinite;
}
@keyframes agenda-spin { to { transform: rotate(360deg); } }

/* ─── 13. Popup calendrier ──────────────────────────────── */
.agenda-popup {
  position:  fixed;
  inset:     0;
  z-index:   1000;
  display:   flex;
  align-items: center;
  justify-content: center;
  padding:   1rem;
}
.agenda-popup[hidden] { display: none; }
.agenda-popup__backdrop {
  position:   absolute;
  inset:      0;
  background: rgba(0,0,0,.5);
  backdrop-filter: blur(4px);
  animation:  agenda-fadeIn .2s ease;
}
.agenda-popup__panel {
  position:      relative;
  background:    var(--ag-surface);
  border-radius: var(--ag-radius-lg);
  box-shadow:    var(--ag-shadow-pop);
  max-width:     460px;
  width:         100%;
  max-height:    85vh;
  overflow-y:    auto;
  animation:     agenda-slideUp .25s var(--ag-ease);
  border:        1px solid var(--ag-border);
}
.agenda-popup__close {
  position:     absolute;
  top:          .75rem;
  right:        .75rem;
  background:   var(--ag-surface-2);
  border:       1px solid var(--ag-border);
  border-radius: var(--ag-radius-sm);
  width:        2rem;
  height:       2rem;
  display:      flex;
  align-items:  center;
  justify-content: center;
  cursor:       pointer;
  color:        var(--ag-text-2);
  transition:   all var(--ag-dur) var(--ag-ease);
  z-index:      1;
}
.agenda-popup__close svg { width: 1rem; height: 1rem; }
.agenda-popup__close:hover { background: var(--ag-accent); border-color: var(--ag-accent); color: #fff; }
.agenda-popup__content { padding: 1.5rem; }
.agenda-popup__event-title {
  font-family:  var(--ag-font-display);
  font-size:    1.25rem;
  font-weight:  700;
  color:        var(--ag-text);
  margin:       0 0 .75rem;
}
.agenda-popup__event-img {
  width:        100%;
  border-radius: var(--ag-radius-sm);
  aspect-ratio: 16/9;
  object-fit:   cover;
  margin-bottom: 1rem;
}
.agenda-popup__event-meta { display: flex; flex-direction: column; gap: .5rem; margin-bottom: 1rem; }
.agenda-popup__meta-item {
  display:    flex;
  align-items: center;
  gap:        .5rem;
  font-size:  .85rem;
  color:      var(--ag-text-2);
}
.agenda-popup__meta-item svg { width: 1rem; height: 1rem; color: var(--ag-accent); flex-shrink: 0; }

/* ─── 14. Pagination ────────────────────────────────────── */
.agenda-pagination {
  display:    flex;
  flex-wrap:  wrap;
  gap:        .4rem;
  justify-content: center;
  padding:    1.5rem clamp(1rem, 4vw, 2rem) 2.5rem;
  max-width:  var(--ag-container);
  margin:     0 auto;
}
.agenda-pagination a,
.agenda-pagination .page-numbers,
.agenda-page-btn {
  display:      inline-flex;
  align-items:  center;
  justify-content: center;
  min-width:    2.4rem;
  height:       2.4rem;
  padding:      0 .75rem;
  border-radius: var(--ag-radius-sm);
  border:       1.5px solid var(--ag-border);
  background:   var(--ag-surface);
  color:        var(--ag-text-2);
  font-family:  var(--ag-font);
  font-size:    .85rem;
  font-weight:  500;
  text-decoration: none;
  cursor:       pointer;
  transition:   all var(--ag-dur) var(--ag-ease);
}
.agenda-pagination a:hover,
.agenda-pagination .page-numbers:hover,
.agenda-page-btn:hover,
.agenda-pagination .current,
.agenda-page-btn.is-active {
  background:   var(--ag-accent);
  border-color: var(--ag-accent);
  color:        #fff;
}

/* ─── 15. No results ────────────────────────────────────── */
.agenda-no-results {
  grid-column: 1 / -1;
  text-align: center;
  padding: 4rem 1rem;
  color: var(--ag-text-3);
  font-size: .95rem;
}

/* ─── 16. Animations ─────────────────────────────────────── */
@keyframes agenda-fadeIn  { from { opacity: 0; } to { opacity: 1; } }
@keyframes agenda-slideUp { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes agenda-fadeInCard {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: none; }
}
.agenda-card { animation: agenda-fadeInCard .35s var(--ag-ease) both; }

/* ─── 17. Responsive ─────────────────────────────────────── */
@media (max-width: 1100px) {
  .agenda-grid--4col { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 860px) {
  .agenda-grid--3col,
  .agenda-grid--4col { grid-template-columns: repeat(2, 1fr); }

  /* Single événement : passer en colonne unique */
  .agenda-single__body {
    grid-template-columns: 1fr;
    margin-top:  1.5rem;
    gap:         1.5rem;
    padding:     0 1rem;
  }
  /* La sidebar passe en dessous et n'est plus sticky */
  .agenda-single__card {
    position:   static;
    top:        auto;
  }
  /* Spacer adapté tablette */
  .agenda-single__spacer { height: max(2.5rem, calc(var(--ag-footer-spacing, 60px) * 0.8)) !important; }

  /* Hero plus compact sur tablette */
  .agenda-single__hero {
    min-height: clamp(260px, 45vw, 420px);
  }
  .agenda-single__title {
    font-size: clamp(1.5rem, 5vw, 2.2rem);
  }
  .agenda-calendar__cell { height: 80px; min-height: 80px; max-height: 80px; }
  /* Image card légèrement plus petite sur tablette */
  .agenda-card__media { height: 180px; min-height: 180px; max-height: 180px; }
}

@media (max-width: 600px) {
  .agenda-grid--2col,
  .agenda-grid--3col,
  .agenda-grid--4col { grid-template-columns: 1fr; }

  /* Image card en pleine largeur mobile */
  .agenda-card__media { height: 220px; min-height: 220px; max-height: 220px; }

  /* Filtres en colonne sur mobile */
  .agenda-filters__inner   { flex-direction: column; align-items: stretch; gap: .6rem; }
  .agenda-filters__cats    { overflow-x: auto; flex-wrap: nowrap; padding-bottom: .25rem; }
  .agenda-filters__right   { margin-left: 0; justify-content: space-between; }
  .agenda-filters__results { margin-left: 0; }

  /* Single événement mobile */
  .agenda-single__body {
    margin-top: 1rem;
    padding:    0 .875rem;
    gap:        1.25rem;
  }
  /* Spacer plus grand sur mobile pour compenser les thèmes qui mangent les marges */
  .agenda-single__spacer { height: var(--ag-footer-spacing, 60px) !important; }

  .agenda-single__hero {
    min-height: 220px;
  }
  .agenda-single__hero-content {
    padding: 1.25rem 1rem 1.5rem;
  }
  .agenda-single__title {
    font-size:    1.4rem;
    margin-bottom: .75rem;
  }
  .agenda-single__meta-bar {
    gap: .4rem .75rem;
  }
  .agenda-single__meta-item {
    font-size: .78rem;
  }
  /* Card détails prend toute la largeur */
  .agenda-single__card {
    padding:       1.1rem;
    border-radius: var(--ag-radius-sm);
  }
  .agenda-details-list {
    gap: .4rem .65rem;
  }
  .agenda-details-list dt { font-size: .68rem; }
  .agenda-details-list dd { font-size: .85rem; }

  /* Calendrier */
  .agenda-calendar__cell { height: 60px; min-height: 60px; max-height: 60px; }
  .agenda-cal-event         { font-size: .6rem; }
  .agenda-calendar__dow     { font-size: .6rem; padding: .5rem .2rem; }
  .agenda-calendar__nav     { padding: .9rem 1rem; }
  .agenda-calendar__title   { font-size: 1rem; }
}

/* ─── 18. Wrapping pour shortcodes (si hors thème) ──────── */
.agenda-wrap {
  background: var(--ag-bg);
  min-height: 100px;
}

/* ─── 19. Vue liste ──────────────────────────────────────── */
.agenda-list-view {
  display:        flex;
  flex-direction: column;
  gap:            1px;
  background:     var(--ag-border);
  border:         1px solid var(--ag-border);
  border-radius:  var(--ag-radius);
  overflow:       hidden;
  max-width:      var(--ag-container);
  margin:         clamp(1rem,3vw,2rem) auto;
}

.agenda-list-item {
  display:        grid;
  grid-template-columns: 70px 100px 1fr auto;
  align-items:    center;
  gap:            1.25rem;
  background:     var(--ag-surface);
  padding:        1.1rem 1.5rem;
  transition:     background var(--ag-dur) var(--ag-ease);
  position:       relative;
  animation:      fadeInCard .3s var(--ag-ease) both;
}
.agenda-list-item:hover { background: var(--ag-surface-2); }

/* Date block */
.agenda-list-item__date {
  text-align:   center;
  background:   var(--ag-accent);
  color:        #fff;
  border-radius: var(--ag-radius-sm);
  padding:      .5rem .4rem;
  flex-shrink:  0;
  min-width:    60px;
}
.agenda-list-item__day   { display:block; font-size:1.6rem; font-weight:800; line-height:1; font-family:var(--ag-font-display); }
.agenda-list-item__month { display:block; font-size:.65rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; opacity:.9; }

/* Image */
.agenda-list-item__media {
  width:        100px;
  height:       68px;
  border-radius: var(--ag-radius-sm);
  overflow:     hidden;
  flex-shrink:  0;
}
.agenda-list-item__media img {
  width:    100%;
  height:   100%;
  object-fit: cover;
  display:  block;
  transition: transform 400ms var(--ag-ease);
}
.agenda-list-item:hover .agenda-list-item__media img { transform: scale(1.06); }

/* Corps */
.agenda-list-item__body {
  display:        flex;
  flex-direction: column;
  gap:            .35rem;
  min-width:      0;
  align-items:    flex-start; /* tous les enfants collent à leur taille naturelle */
}
/* Badge dans la vue liste */
.agenda-list-item__body .agenda-badge {
  display:     inline-block !important;
  width:       auto         !important;
  max-width:   fit-content  !important;
  align-self:  flex-start   !important;
  white-space: nowrap       !important;
  flex-shrink: 0;
}
.agenda-list-item__title {
  font-family:    var(--ag-font-display);
  font-size:      1rem;
  font-weight:    700;
  line-height:    1.3;
  margin:         0;
}
.agenda-list-item__title a {
  color:           var(--ag-text);
  text-decoration: none;
  transition:      color var(--ag-dur);
}
.agenda-list-item__title a:hover { color: var(--ag-accent); }

.agenda-list-item__meta {
  display:    flex;
  flex-wrap:  wrap;
  gap:        .5rem .9rem;
}
.agenda-list-item__meta-item {
  display:    inline-flex;
  align-items: center;
  gap:        .3rem;
  font-size:  .78rem;
  color:      var(--ag-text-2);
}
.agenda-list-item__meta-item svg { width:.8rem; height:.8rem; color:var(--ag-accent); flex-shrink:0; }
.agenda-list-item__meta-item--prix { font-weight:700; color:var(--ag-accent); }

.agenda-list-item__excerpt {
  font-size:  .82rem;
  color:      var(--ag-text-2);
  line-height: 1.5;
  margin:     0;
  overflow:   hidden;
  display:    -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

/* Actions */
.agenda-list-item__actions {
  display:    flex;
  flex-direction: column;
  gap:        .4rem;
  flex-shrink: 0;
}

/* Responsive liste */
@media (max-width: 768px) {
  .agenda-list-item {
    grid-template-columns: 56px 1fr;
    grid-template-rows: auto auto;
  }
  .agenda-list-item__media { display: none; }
  .agenda-list-item__actions {
    grid-column: 1 / -1;
    flex-direction: row;
  }
}

@media (max-width: 480px) {
  .agenda-list-item { padding: .9rem 1rem; }
  .agenda-list-item__date { min-width: 50px; }
  .agenda-list-item__day { font-size: 1.3rem; }
}

/* ─── 20. Filtres avancés (date range + toggle vue) ─────── */
.agenda-filters__dates {
  display:     flex;
  align-items: center;
  gap:         .4rem;
  flex-wrap:   wrap;
}
.agenda-date-label {
  display:    inline-flex;
  align-items: center;
  gap:        .3rem;
  font-size:  .78rem;
  font-weight: 600;
  color:      var(--ag-text-3);
  white-space: nowrap;
}
.agenda-date-label svg { width:.8rem; height:.8rem; }
.agenda-date-input {
  padding:     .45rem .65rem;
  border:      1.5px solid var(--ag-border);
  border-radius: var(--ag-radius-sm);
  background:  var(--ag-surface);
  color:       var(--ag-text);
  font-family: var(--ag-font);
  font-size:   .8rem;
  cursor:      pointer;
  outline:     none;
  transition:  border-color var(--ag-dur), box-shadow var(--ag-dur);
}
.agenda-date-input:focus {
  border-color: var(--ag-accent);
  box-shadow:   0 0 0 3px rgba(var(--ag-accent-rgb),.14);
}
.agenda-date-clear {
  font-size:    .75rem;
  font-weight:  600;
  color:        var(--ag-text-3);
  background:   none;
  border:       none;
  cursor:       pointer;
  padding:      .2rem .5rem;
  border-radius: var(--ag-radius-sm);
  transition:   color var(--ag-dur), background var(--ag-dur);
}
.agenda-date-clear:hover { color: var(--ag-accent); background: var(--ag-accent-light); }

/* Droite des filtres */
.agenda-filters__right {
  display:     flex;
  align-items: center;
  gap:         .75rem;
  margin-left: auto;
}

/* Toggle vue grille/liste */
.agenda-view-toggle {
  display:     flex;
  background:  var(--ag-surface-2);
  border:      1.5px solid var(--ag-border);
  border-radius: var(--ag-radius-sm);
  overflow:    hidden;
}
.agenda-view-btn {
  display:     flex;
  align-items: center;
  justify-content: center;
  width:       2.1rem;
  height:      2.1rem;
  background:  none;
  border:      none;
  color:       var(--ag-text-3);
  cursor:      pointer;
  transition:  all var(--ag-dur);
}
.agenda-view-btn svg { width: 1rem; height: 1rem; }
.agenda-view-btn:hover { color: var(--ag-accent); }
.agenda-view-btn.is-active { background: var(--ag-accent); color: #fff; }

/* Clear button de recherche (icone SVG) */
.agenda-filters__search-clear {
  position:    absolute;
  right:       .6rem;
  top:         50%;
  transform:   translateY(-50%);
  background:  none;
  border:      none;
  color:       var(--ag-text-3);
  cursor:      pointer;
  padding:     .2rem;
  display:     flex;
  opacity:     0;
  pointer-events: none;
  transition:  opacity var(--ag-dur);
}
.agenda-filters__search-clear svg { width: .75rem; height: .75rem; }
.agenda-filters__search-input:not(:placeholder-shown) ~ .agenda-filters__search-clear {
  opacity: 1;
  pointer-events: auto;
}

/* ─── 21. Suggestions autocomplete ──────────────────────── */
.agenda-suggestions {
  position:     absolute;
  top:          calc(100% + .4rem);
  left:         0;
  right:        0;
  background:   var(--ag-surface);
  border:       1.5px solid var(--ag-border);
  border-radius: var(--ag-radius);
  box-shadow:   var(--ag-shadow-hover);
  z-index:      200;
  overflow:     hidden;
  animation:    agenda-slideUp .18s var(--ag-ease);
}
.agenda-sug-item {
  display:      flex;
  align-items:  center;
  gap:          .75rem;
  padding:      .65rem 1rem;
  cursor:       pointer;
  border-bottom: 1px solid var(--ag-border);
  transition:   background var(--ag-dur);
}
.agenda-sug-item:last-child { border-bottom: none; }
.agenda-sug-item:hover,
.agenda-sug-item.is-active { background: var(--ag-surface-2); }
.agenda-sug-thumb {
  width:        38px;
  height:       38px;
  border-radius: var(--ag-radius-sm);
  object-fit:   cover;
  flex-shrink:  0;
}
.agenda-sug-info { display: flex; flex-direction: column; gap: .15rem; min-width: 0; }
.agenda-sug-title { font-size: .85rem; font-weight: 600; color: var(--ag-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.agenda-sug-date  { font-size: .72rem; color: var(--ag-text-3); }

/* ─── 22. Vue semaine calendrier ─────────────────────────── */
.agenda-calendar__view-toggle {
  display:      flex;
  background:   rgba(255,255,255,0.18);
  border:       2px solid rgba(255,255,255,0.45);
  border-radius: var(--ag-radius-full);
  overflow:     hidden;
  backdrop-filter: blur(4px);
}
.agenda-cal-view-btn {
  font-family:  var(--ag-font);
  font-size:    .72rem;
  font-weight:  700;
  padding:      .28rem .85rem;
  background:   none;
  border:       none;
  color:        rgba(255,255,255,0.8);
  cursor:       pointer;
  transition:   all var(--ag-dur);
}
.agenda-cal-view-btn.is-active {
  background: rgba(255,255,255,0.95);
  color:      var(--ag-accent);
}
.agenda-cal-view-btn:not(.is-active):hover {
  color: #fff;
  background: rgba(255,255,255,0.15);
}

.agenda-calendar__nav-controls {
  display:     flex;
  align-items: center;
  gap:         .6rem;
}

.agenda-week-grid {
  display:    grid;
  grid-template-columns: repeat(7, 1fr);
  gap:        1px;
  background: var(--ag-border);
  min-height: 380px;
}
.agenda-week-col {
  background:   var(--ag-surface);
  display:      flex;
  flex-direction: column;
}
.agenda-week-col--today .agenda-week-col__header { background: var(--ag-surface); }
.agenda-week-col__header {
  padding:      .5rem .4rem .3rem;
  text-align:   center;
  border-bottom: 1px solid var(--ag-border);
  background:   var(--ag-surface-2);
}
.agenda-week-col__dow {
  display:      block;
  font-size:    .65rem;
  font-weight:  700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color:        var(--ag-text-3);
}
.agenda-week-col__day {
  display:      block;
  font-size:    1.1rem;
  font-weight:  700;
  color:        var(--ag-text-2);
  line-height:  1.5;
}
.agenda-week-col__day.is-today {
  background:   var(--ag-accent);
  color:        #fff;
  border-radius: 50%;
  width:        1.7rem;
  height:       1.7rem;
  display:      inline-flex;
  align-items:  center;
  justify-content: center;
  font-size:    .95rem;
}
.agenda-week-col__events {
  padding:      .3rem .25rem;
  display:      flex;
  flex-direction: column;
  gap:          .25rem;
  flex:         1;
}
.agenda-week-event {
  padding:      .3rem .4rem;
  border-radius: 5px;
  background:   var(--ag-accent-light);
  color:        var(--ag-accent);
  font-size:    .68rem;
  font-weight:  600;
  cursor:       pointer;
  line-height:  1.3;
  border:       1px solid transparent;
  transition:   all var(--ag-dur);
}
.agenda-week-event:hover { background: var(--ag-accent); color: #fff; }
.agenda-week-event__time {
  display:      block;
  font-size:    .62rem;
  opacity:      .8;
  margin-bottom: .1rem;
}
.agenda-week-event__title { display: block; }
.agenda-week-empty { flex: 1; }

/* Cacher header jours en vue semaine */
.agenda-calendar__header[style*="display: none"],
.agenda-calendar__header[style*="display:none"] {
  display: none !important;
}

@media (max-width: 600px) {
  .agenda-week-grid { grid-template-columns: repeat(7, minmax(42px, 1fr)); overflow-x: auto; }
  .agenda-week-event { font-size: .6rem; padding: .2rem .3rem; }
  .agenda-week-col__dow { font-size: .55rem; }
  .agenda-filters__dates { display: none; } /* simplifié mobile */
  .agenda-filters__right { margin-left: 0; }
}

/* ─── 23. Shortcode [agenda_prochain] ───────────────────── */

/* ── Style HERO ─────────────────────────────────────────── */
.agenda-prochain--hero {
  position:     relative;
  min-height:   clamp(340px, 55vw, 600px);
  display:      flex;
  align-items:  flex-end;
  background:   var(--ag-surface-2);
  background-size:   cover;
  background-position: center 30%;
  border-radius: var(--ag-radius-lg);
  overflow:     hidden;
}
.agenda-prochain__overlay {
  position:   absolute;
  inset:      0;
  background: linear-gradient(
    to top,
    rgba(0,0,0,.88) 0%,
    rgba(0,0,0,.4)  45%,
    rgba(0,0,0,.05) 80%,
    transparent 100%
  );
}
.agenda-prochain__content {
  position:  relative;
  z-index:   2;
  padding:   clamp(1.5rem,4vw,3rem);
  width:     100%;
}
.agenda-prochain__badge { margin-bottom: .75rem; display: inline-block; }

.agenda-prochain__date-pill {
  display:        inline-flex;
  flex-direction: column;
  align-items:    center;
  background:     var(--ag-accent);
  color:          #fff;
  border-radius:  var(--ag-radius-sm);
  padding:        .4rem .7rem;
  margin-bottom:  .9rem;
  text-align:     center;
  min-width:      3rem;
}
.agenda-prochain__date-j  { font-size: 1.6rem; font-weight: 800; line-height: 1; font-family: var(--ag-font-display); }
.agenda-prochain__date-m  { font-size: .65rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; opacity: .9; }

.agenda-prochain__title {
  font-family:  var(--ag-font-display);
  font-size:    clamp(1.6rem, 4vw, 3rem);
  font-weight:  800;
  color:        #fff;
  margin:       0 0 1rem;
  line-height:  1.15;
  text-shadow:  0 2px 12px rgba(0,0,0,.35);
}
.agenda-prochain__title a { color: inherit; text-decoration: none; }
.agenda-prochain__title a:hover { text-decoration: underline; }

.agenda-prochain__meta {
  display:    flex;
  flex-wrap:  wrap;
  gap:        .5rem 1.25rem;
  margin-bottom: 1rem;
  padding-top:   .75rem;
  border-top:    1px solid rgba(255,255,255,.2);
}
.agenda-prochain__meta-item {
  display:    inline-flex;
  align-items: center;
  gap:        .35rem;
  color:      rgba(255,255,255,.9);
  font-size:  .88rem;
  font-weight: 500;
}
.agenda-prochain__meta-item svg { width: .9rem; height: .9rem; flex-shrink: 0; }
.agenda-prochain__meta-item--prix { font-weight: 700; color: #fff; }

.agenda-prochain__excerpt {
  color:       rgba(255,255,255,.82);
  font-size:   .92rem;
  line-height: 1.65;
  margin:      0 0 1.25rem;
  max-width:   640px;
}

.agenda-prochain__actions { display: flex; gap: .75rem; flex-wrap: wrap; }
.agenda-prochain__btn {
  display:       inline-flex;
  align-items:   center;
  gap:           .4rem;
  padding:       .7rem 1.4rem;
  border-radius: var(--ag-radius-sm);
  font-family:   var(--ag-font);
  font-size:     .9rem;
  font-weight:   700;
  text-decoration: none;
  cursor:        pointer;
  border:        2px solid transparent;
  transition:    all var(--ag-dur) var(--ag-ease);
}
.agenda-prochain__btn svg { width: .9rem; height: .9rem; transition: transform var(--ag-dur); }
.agenda-prochain__btn:hover svg { transform: translateX(4px); }
.agenda-prochain__btn--primary {
  background:  var(--ag-accent);
  color:       #fff;
  border-color: var(--ag-accent);
}
.agenda-prochain__btn--primary:hover { background: var(--ag-accent-dark); border-color: var(--ag-accent-dark); }
.agenda-prochain__btn--outline {
  background:  rgba(255,255,255,.15);
  color:       #fff;
  border-color: rgba(255,255,255,.6);
  backdrop-filter: blur(4px);
}
.agenda-prochain__btn--outline:hover { background: rgba(255,255,255,.25); }

/* ── Style CARD ──────────────────────────────────────────── */
.agenda-prochain--card {
  background:   var(--ag-surface);
  border:       1px solid var(--ag-border);
  border-radius: var(--ag-radius);
  overflow:     hidden;
  box-shadow:   var(--ag-shadow);
  max-width:    460px;
  transition:   transform var(--ag-dur) var(--ag-ease), box-shadow var(--ag-dur) var(--ag-ease);
}
.agenda-prochain--card:hover { transform: translateY(-4px); box-shadow: var(--ag-shadow-hover); }
.agenda-prochain__card-media {
  position:     relative;
  aspect-ratio: 16/9;
  overflow:     hidden;
}
.agenda-prochain__card-media img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 400ms var(--ag-ease);
}
.agenda-prochain--card:hover .agenda-prochain__card-media img { transform: scale(1.04); }
.agenda-prochain__card-body {
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: .6rem;
}
.agenda-prochain--card .agenda-prochain__title {
  font-family: var(--ag-font-display);
  font-size:   1.15rem;
  font-weight: 700;
  color:       var(--ag-text);
  margin:      0;
}
.agenda-prochain--card .agenda-prochain__title a { color: inherit; text-decoration: none; }
.agenda-prochain--card .agenda-prochain__title a:hover { color: var(--ag-accent); }
.agenda-prochain--card .agenda-prochain__meta { padding-top: 0; border-top: none; gap: .35rem; }
.agenda-prochain--card .agenda-prochain__meta-item { color: var(--ag-text-2); font-size: .82rem; }
.agenda-prochain--card .agenda-prochain__excerpt { color: var(--ag-text-2); font-size: .85rem; margin: 0; }

/* ── Style BANNER ────────────────────────────────────────── */
.agenda-prochain--banner {
  display:      flex;
  align-items:  center;
  gap:          0;
  background:   var(--ag-surface);
  border:       1px solid var(--ag-border);
  border-radius: var(--ag-radius);
  overflow:     hidden;
  box-shadow:   var(--ag-shadow);
  min-height:   130px;
}
.agenda-prochain__banner-img {
  width:              200px;
  flex-shrink:        0;
  align-self:         stretch;
  background-size:    cover;
  background-position: center;
}
.agenda-prochain__banner-date {
  display:        flex;
  flex-direction: column;
  align-items:    center;
  justify-content: center;
  background:     var(--ag-accent);
  color:          #fff;
  padding:        1rem .9rem;
  flex-shrink:    0;
  min-width:      70px;
  align-self:     stretch;
}
.agenda-prochain__banner-info {
  padding:    1.1rem 1.25rem;
  flex:       1;
  display:    flex;
  flex-direction: column;
  gap:        .4rem;
  min-width:  0;
}
.agenda-prochain--banner .agenda-prochain__title {
  font-family: var(--ag-font-display);
  font-size:   1rem;
  font-weight: 700;
  color:       var(--ag-text);
  margin:      0;
}
.agenda-prochain--banner .agenda-prochain__title a { color: inherit; text-decoration: none; }
.agenda-prochain--banner .agenda-prochain__title a:hover { color: var(--ag-accent); }
.agenda-prochain--banner .agenda-prochain__meta { padding: 0; border: none; gap: .3rem .9rem; }
.agenda-prochain--banner .agenda-prochain__meta-item { color: var(--ag-text-2); font-size: .8rem; }
.agenda-prochain--banner .agenda-btn { flex-shrink: 0; margin-right: 1.25rem; white-space: nowrap; }

/* Empty state */
.agenda-prochain-empty { color: var(--ag-text-3); font-size: .9rem; padding: 1rem 0; }

/* Responsive [agenda_prochain] */
@media (max-width: 600px) {
  .agenda-prochain--hero { min-height: 280px; }
  .agenda-prochain__title { font-size: 1.4rem; }
  .agenda-prochain--banner { flex-direction: column; }
  .agenda-prochain__banner-img { width: 100%; height: 160px; }
  .agenda-prochain__banner-date { flex-direction: row; gap: .5rem; min-width: auto; padding: .6rem 1rem; align-self: auto; }
  .agenda-prochain--banner .agenda-btn { margin: 0 0 1rem 1.25rem; }
}

/* ─── Shortcode [agenda_prochain] ────────────────────────── */

/* Vue compacte */
.agenda-prochain-compact {
  display:   flex;
  flex-direction: column;
  gap:       .5rem;
}
.agenda-prochain-item {
  display:         flex;
  align-items:     center;
  gap:             1rem;
  padding:         .85rem 1rem;
  background:      var(--ag-surface);
  border:          1px solid var(--ag-border);
  border-radius:   var(--ag-radius);
  text-decoration: none;
  color:           var(--ag-text);
  transition:      all var(--ag-dur) var(--ag-ease);
  box-shadow:      var(--ag-shadow);
}
.agenda-prochain-item:hover {
  transform:    translateY(-2px);
  box-shadow:   var(--ag-shadow-hover);
  border-color: var(--ag-accent);
}
.agenda-prochain-thumb {
  width:         64px;
  height:        64px;
  border-radius: var(--ag-radius-sm);
  object-fit:    cover;
  flex-shrink:   0;
}
.agenda-prochain-thumb--placeholder {
  background: var(--ag-surface-2);
  display:    flex;
  align-items: center;
  justify-content: center;
}
.agenda-prochain-info {
  display:        flex;
  flex-direction: column;
  gap:            .25rem;
  flex:           1;
  min-width:      0;
}
.agenda-prochain-title {
  font-family: var(--ag-font-display);
  font-size:   .95rem;
  font-weight: 700;
  color:       var(--ag-text);
  white-space: nowrap;
  overflow:    hidden;
  text-overflow: ellipsis;
}
.agenda-prochain-meta {
  display:   flex;
  flex-wrap: wrap;
  gap:       .25rem .75rem;
  font-size: .78rem;
  color:     var(--ag-text-2);
}
.agenda-prochain-arrow {
  color: var(--ag-accent);
  opacity: .6;
  transition: all var(--ag-dur);
}
.agenda-prochain-item:hover .agenda-prochain-arrow {
  opacity:   1;
  transform: translateX(4px);
}

/* Vue card — grille */
.agenda-prochain-grid { margin: 0; }

/* Aucun événement */
.agenda-prochain-empty {
  color:     var(--ag-text-3);
  font-size: .9rem;
  text-align: center;
  padding:   1.5rem;
}

/* ─── Alignement hauteur avec colonne voisine (ex: calendrier) ──
 * Quand [agenda_prochain view="card"] est dans une colonne Elementor
 * côte à côte avec le calendrier, la card s'étire pour remplir
 * toute la hauteur disponible.
 */

/* Le wrapper du shortcode prend 100% de la hauteur Elementor */
.elementor-widget-shortcode .agenda-prochain-grid,
.elementor-widget-shortcode .agenda-grid,
.agenda-prochain-grid,
.agenda-prochain-fill {
  height:    100%;
  display:   flex;
  flex-direction: column;
}

/* La card elle-même s'étire */
.agenda-prochain-grid .agenda-card,
.agenda-prochain-fill .agenda-card {
  flex:      1;
  height:    100%;
}

/* L'image de la card s'adapte à la hauteur restante */
.agenda-prochain-grid .agenda-card .agenda-card__media,
.agenda-prochain-fill .agenda-card .agenda-card__media {
  flex:        1;
  aspect-ratio: unset;   /* on enlève le 16/9 fixe */
  min-height:  180px;    /* minimum pour que l'image soit visible */
}

/* Le corps de la card reste en bas */
.agenda-prochain-grid .agenda-card .agenda-card__body,
.agenda-prochain-fill .agenda-card .agenda-card__body {
  flex-shrink: 0;
}

/* Compatibilité Elementor : la colonne doit transmettre sa hauteur */
.elementor-column > .elementor-widget-wrap,
.elementor-col-50 > .elementor-widget-wrap,
.elementor-col-33 > .elementor-widget-wrap {
  height: 100%;
}
.elementor-widget-shortcode {
  height: 100%;
}
.elementor-widget-shortcode > .elementor-widget-container {
  height: 100%;
}