/* ════════════════════════════════════════════════════════════════
   Couvrelles Event Helpers — CSS front
   À enqueue via class-assets.php sur les pages concernées.
   ════════════════════════════════════════════════════════════════ */

:root {
  --c-primary:  #b7995d;
  --c-accent:   #6b5f3a;
  --c-dark:     #101828;
  --c-text:     #364153;
  --c-bodysoft: #4a5565;
  --c-muted:    #6a7282;
  --c-border:   #e5e7eb;
  --c-graybg:   #f9fafb;
}

/* ─── HERO INTERNAL (aligné gauche + gradient 3-stops) ─────────── */
.hero-internal {
  position: relative;
  overflow: hidden;
}
.hero-internal::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(0,0,0,0.8) 0%,
    rgba(0,0,0,0.4) 50%,
    rgba(0,0,0,0) 100%
  );
  z-index: 1;
  pointer-events: none;
}
.hero-internal > * { position: relative; z-index: 2; }
.hero-internal-inner {
  max-width: 1280px;
  width: 100%;
  margin: 0 auto;
}
.hero-internal .hero-title {
  color: #fff !important;
  text-align: left !important;
}
.hero-internal .hero-subtitle p {
  color: rgba(255,255,255,0.95);
  text-align: left !important;
  margin: 0;
}

/* ─── ÉTIQUETTE (badge catégorie) ──────────────────────────────── */
.hero-etiquette {
  display: inline-block;
  padding: 4px 12px;
  background: var(--c-primary);
  color: #fff;
  font-family: 'Urbanist', sans-serif;
  font-weight: 600;
  font-size: 14px;
  line-height: 22px;
  letter-spacing: 0.35px;
  text-transform: uppercase;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
.hero-etiquette a { color: inherit !important; text-decoration: none !important; }




/* ═══════════════════════════════════════════════════════════════════
   TIMELINE PATRIMOINE — v4 (zero-wrapper, uniquement classes connues)
   Classes présentes dans le DOM : tl-badge, tl-card-desc, tl-card-title,
   tl-image-img, tl-link, tl-section-h2
   ═══════════════════════════════════════════════════════════════════ */

/* LA CARD : tout container Elementor qui porte directement un .tl-badge
   (le badge est ton seul marqueur fiable de "ceci est une card timeline") */
.e-con:has(> .tl-badge),
.e-con-inner:has(> .tl-badge),
.e-con:has(> .e-con-inner > .tl-badge) {
  position: relative !important;
  overflow: visible !important;
  background: #ffffff !important;
  padding: 32px !important;
  border-radius: 10px !important;
  box-shadow: 0 4px 20px rgba(0,0,0,0.10) !important;
  max-width: 544px !important;
  z-index: 2;
}

/* L'ITEM (row card+image) : container parent qui contient à la fois
   une card (avec badge) et une image. Repérable par :has() avec
   deux conditions. */
.e-con:has(.tl-badge):has(.tl-image-img) {
  position: relative;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 24px;
  min-height: 320px;
  z-index: 1;
}

/* Le dot central : posé sur l'item */
.e-con:has(.tl-badge):has(.tl-image-img)::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 20px; height: 20px;
  background: #b7995d;
  border: 14px solid #f9fafb;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  box-sizing: content-box;
  box-shadow: 0 1px 3px rgba(0,0,0,0.10), 0 1px 2px rgba(0,0,0,0.10);
  z-index: 3;
  pointer-events: none;
}

/* LA LIGNE VERTICALE : posée sur le container qui CONTIENT plusieurs items.
   Un tel container a plusieurs .tl-badge en descendance. */
.e-con:has(.tl-badge ~ * .tl-badge),
.e-con:has(> .e-con-inner > .e-con .tl-badge) {
  position: relative;
}
.e-con:has(.tl-badge ~ * .tl-badge)::before {
  content: '';
  position: absolute;
  top: 0; bottom: 0;
  left: 50%;
  width: 2px;
  background: rgba(183, 153, 93, 0.35);
  transform: translateX(-50%);
  z-index: 0;
  pointer-events: none;
}

/* BADGE ÉPOQUE */
.tl-badge {
  position: absolute;
  top: -14px;
  display: inline-block;
  padding: 6px 16px;
  background: #b7995d;
  color: #fff;
  font-family: 'Urbanist', sans-serif;
  font-weight: 600;
  font-size: 14px;
  line-height: 20px;
  box-shadow: 0 4px 6px rgba(0,0,0,0.10), 0 2px 4px rgba(0,0,0,0.10);
  z-index: 4;
  white-space: nowrap;
  /* Positionné à droite par défaut ; si dans la 2e moitié du parent,
     surchargé plus bas */
  right: 24px;
}

/* H2 de section : fond gris découpe la ligne */
.tl-section-h2 {
  position: relative;
  z-index: 2;
}
.tl-section-h2 .elementor-heading-title {
  display: inline-block;
  padding: 0 32px;
  background: #f9fafb;
}

/* LIEN "Voir plus" */
.tl-link {
  margin: 0;
  font-family: 'Urbanist', sans-serif;
  font-weight: 600;
  font-size: 16px;
  line-height: 24px;
}
.tl-link a {
  color: #b7995d !important;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: color 0.2s ease, gap 0.2s ease;
}
.tl-link a:hover { color: #6b5f3a !important; gap: 10px; }

/* IMAGE */
.tl-image-img {
  overflow: hidden !important;
  border-radius: 10px !important;
  max-width: 544px;
}
.tl-image-img img {
  width: 100%;
  min-height: 320px;
  object-fit: cover;
  display: block;
  border-radius: 10px;
}

/* Alternance gauche/droite — par ordre nth-child d'item
   Impair = card gauche (image droite) : order normal
   Pair   = card droite (image gauche) : row-reverse */
.e-con:has(.tl-badge):has(.tl-image-img):nth-of-type(even) {
  flex-direction: row-reverse !important;
}

/* Responsive < 1025 : tout en colonne, ligne à gauche */
@media (max-width: 1024px) {
  .e-con:has(.tl-badge):has(.tl-image-img),
  .e-con:has(.tl-badge):has(.tl-image-img):nth-of-type(even) {
    flex-direction: column !important;
    padding-left: 56px !important;
  }
  .e-con:has(.tl-badge ~ * .tl-badge)::before {
    left: 20px;
    transform: none;
  }
  .e-con:has(.tl-badge):has(.tl-image-img)::after {
    left: 20px !important;
    top: 48px !important;
    border-width: 10px;
    width: 16px;
    height: 16px;
  }
  .tl-badge {
    left: 24px !important;
    right: auto !important;
  }
  .tl-image-img img { min-height: 240px; }
  .tl-section-h2 .elementor-heading-title {
    text-align: left;
    padding: 0 16px 0 0;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   PAGE ÉVÉNEMENT UNIQUE
   ═══════════════════════════════════════════════════════════════════ */
.event-h2 { position: relative; }
.event-description {
  font-family: 'Urbanist', sans-serif;
  font-weight: 400;
  font-size: 17px;
  line-height: 26px;
  color: var(--c-text);
}
.event-description p { margin: 0 0 16px 0; }
.event-description h3, .event-description h4 {
  margin-top: 24px; margin-bottom: 12px;
  font-family: 'Work Sans', sans-serif;
  font-weight: 600;
}

/* Galerie duo (2 images 366×256 côte à côte) */
.event-gallery-duo {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}
@media (max-width: 767px) {
  .event-gallery-duo { grid-template-columns: 1fr; gap: 16px; }
}
.event-gallery-duo-item img {
  width: 100%;
  height: 256px;
  object-fit: cover;
  border-radius: 10px;
  display: block;
}

/* Liste "Ce qui vous attend" */
.ce-qui-vous-attend {
  list-style: none;
  padding: 0; margin: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.ce-qui-vous-attend li {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  font-family: 'Urbanist', sans-serif;
  font-weight: 400;
  font-size: 17px;
  line-height: 26px;
  color: var(--c-text);
}
.ce-qui-vous-attend li::before {
  content: '';
  flex-shrink: 0;
  width: 26px; height: 26px;
  margin-top: 2px;
  background-color: var(--c-primary);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 18px 18px;
  border-radius: 50%;
}

/* Programme indicatif (badges ronds Ve/Sa/Di + card blanche détachée) */
.programme-indicatif {
  list-style: none;
  padding: 0; margin: 0;
  display: flex;
  flex-direction: column;
  gap: 32px;
}
.programme-indicatif li {
  display: flex;
  align-items: flex-start;
  gap: 24px;
}
/* Defensive against Elementor inline styles that occasionally reset
   `width/height: auto` on spans (the badge is otherwise an inline
   element and would collapse to text width). Every visual property
   is `!important`. */
.programme-indicatif .prog-badge,
ul.programme-indicatif li .prog-badge,
.elementor-widget-shortcode .programme-indicatif .prog-badge {
  flex-shrink: 0 !important;
  width: 48px !important;
  height: 48px !important;
  min-width: 48px !important;
  max-width: 48px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: var(--c-primary) !important;
  background-color: var(--c-primary) !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  font-family: 'Urbanist', system-ui, -apple-system, sans-serif !important;
  font-weight: 600 !important;
  font-size: 18px !important;
  line-height: 1 !important;
  border-radius: 50% !important;
  box-shadow: 0 4px 10px rgba(183, 153, 93, 0.25), 0 1px 2px rgba(16, 24, 40, 0.08) !important;
  margin-top: 0 !important;
  padding: 0 !important;
  text-align: center !important;
  box-sizing: border-box !important;
}
.programme-indicatif .prog-body {
  flex: 1;
  min-width: 0;
  background: #fff !important;
  border: 1px solid var(--c-border) !important;
  border-left: 1px solid var(--c-border) !important;
  border-radius: 12px !important;
  padding: 24px 28px !important;
  box-shadow: 0 1px 3px rgba(16, 24, 40, 0.06), 0 1px 2px rgba(16, 24, 40, 0.04);
}
.programme-indicatif .prog-body h4 {
  margin: 0 0 8px 0;
  font-family: 'Work Sans', sans-serif;
  font-weight: 700;
  font-size: 20px;
  line-height: 28px;
  color: var(--c-dark);
}
.programme-indicatif .prog-body p {
  margin: 0;
  font-family: 'Urbanist', sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  color: var(--c-bodysoft);
}
@media (max-width: 540px) {
  .programme-indicatif li { gap: 16px; }
  .programme-indicatif .prog-body { padding: 20px 20px !important; }
}

/* Sidebar Détails pratiques */
.event-sidebar { position: relative; }
@media (min-width: 1025px) {
  .event-sidebar { position: sticky; top: 100px; }
}
.event-sidebar-h3 { margin-bottom: 8px; }

.event-detail { display: flex; align-items: flex-start; gap: 16px; }
.event-detail-icon {
  flex-shrink: 0;
  width: 24px; height: 24px;
  color: var(--c-primary);
  font-size: 18px;
  line-height: 24px;
  margin-top: 4px;
  text-align: center;
}
.event-detail-body { flex: 1; }
.event-detail-label {
  margin: 0 0 4px 0;
  font-family: 'Urbanist', sans-serif;
  font-weight: 700;
  font-size: 20px;
  line-height: 28px;
  color: var(--c-dark);
}
.event-detail-value {
  margin: 0;
  font-family: 'Urbanist', sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  color: var(--c-bodysoft);
}
.event-detail-note {
  margin: 8px 0 0 0;
  font-family: 'Urbanist', sans-serif;
  font-style: italic;
  font-size: 14px;
  line-height: 20px;
  color: var(--c-muted);
}

/* CTA inscription (plein-largeur + micro-texte) */
.event-cta-wrap {
  border-top: 1px solid var(--c-border);
  padding-top: 24px;
  text-align: center;
}
/* Defensive against Elementor Site Kit / theme rules that aggressively
   reset link colour, font-size or use `-webkit-text-fill-color` for
   gradient effects (which would make our white text invisible on top
   of the gold background). The selectors below escalate specificity
   to defeat any `.elementor-element a { ... !important }` rule the
   kit might emit. */
.event-cta,
a.event-cta,
.event-cta-wrap a.event-cta,
.elementor-shortcode a.event-cta,
.elementor-widget-shortcode a.event-cta {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 12px !important;
  width: 100% !important;
  padding: 18px 24px !important;
  background: var(--c-primary) !important;
  background-color: var(--c-primary) !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  font-family: 'Urbanist', system-ui, -apple-system, sans-serif !important;
  font-weight: 600 !important;
  font-size: 18px !important;
  line-height: 24px !important;
  text-decoration: none !important;
  text-shadow: none !important;
  transition: background 0.2s ease, transform 0.15s ease !important;
  box-shadow: 0 4px 6px rgba(0,0,0,0.1), 0 2px 4px rgba(0,0,0,0.1) !important;
  border: 0 !important;
  visibility: visible !important;
  opacity: 1 !important;
}
.event-cta *,
.event-cta-wrap a.event-cta * {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  font-size: inherit !important;
  font-family: inherit !important;
}
.event-cta-icon,
.event-cta .event-cta-icon {
  color: #fff !important;
  stroke: #fff !important;
  flex-shrink: 0 !important;
  width: 18px !important;
  height: 18px !important;
}
.event-cta:hover,
.event-cta:focus,
.event-cta:focus-visible,
a.event-cta:hover,
a.event-cta:focus,
.event-cta-wrap a.event-cta:hover,
.elementor-shortcode a.event-cta:hover,
.elementor-widget-shortcode a.event-cta:hover {
  background: var(--c-accent) !important;
  background-color: var(--c-accent) !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  text-decoration: none !important;
  transform: translateY(-1px) !important;
}
.event-cta--soon, a.event-cta--soon { background: #6a7282 !important; background-color: #6a7282 !important; }
.event-cta--soon:hover,
.event-cta--soon:focus,
a.event-cta--soon:hover { background: #4a5565 !important; background-color: #4a5565 !important; }
.event-cta--full, a.event-cta--full { background: #9ca3af !important; background-color: #9ca3af !important; }
.event-cta--full:hover,
.event-cta--full:focus,
a.event-cta--full:hover { background: #6a7282 !important; background-color: #6a7282 !important; }
.event-cta--past {
  background: #e5e7eb !important;
  background-color: #e5e7eb !important;
  color: #6a7282 !important;
  -webkit-text-fill-color: #6a7282 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
}
.event-cta--past * {
  color: #6a7282 !important;
  -webkit-text-fill-color: #6a7282 !important;
}

/* Free entry — "Entrée libre". Informational, not a button (cursor
   default, no hover state). Uses a calm blue to differentiate from
   the bookable green. */
.event-cta--free,
span.event-cta--free,
.event-cta-wrap .event-cta--free {
  background: #3b82f6 !important;
  background-color: #3b82f6 !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  cursor: default !important;
  pointer-events: none !important;
}
.event-cta--free * {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
}

/* External billetterie — same gold as "open" but with the external-link
   icon. Behaves as a real link (opens in a new tab). */
.event-cta--external,
a.event-cta--external,
.event-cta-wrap a.event-cta--external,
.elementor-shortcode a.event-cta--external {
  background: var(--c-primary) !important;
  background-color: var(--c-primary) !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
}
.event-cta--external:hover,
.event-cta--external:focus,
a.event-cta--external:hover {
  background: var(--c-accent) !important;
  background-color: var(--c-accent) !important;
}
.event-cta-note {
  margin: 12px 0 0 0;
  font-family: 'Urbanist', sans-serif;
  font-size: 14px;
  line-height: 20px;
  color: var(--c-muted);
  text-align: center;
}

/* Badge de statut (archive event cards) — maquette mapping :
   - Ouvert  : vert (réservations possibles)
   - Bientôt : doré (start_date au-delà du seuil "soon")
   - Complet : navy foncé (rupture de stock)
   - En cours: ambre (commencé, date de fin pas encore atteinte)
   - Passé   : gris clair (cutoff midi franchi ET date de fin dépassée) */
.event-status-badge {
  display: inline-block;
  padding: 4px 12px;
  font-family: 'Urbanist', sans-serif;
  font-weight: 600;
  font-size: 13px;
  line-height: 16px;
  color: #fff;
}
.event-status-badge--open { background: #16a34a; }
.event-status-badge--soon { background: var(--c-primary); }
.event-status-badge--full { background: var(--c-dark); }
.event-status-badge--ongoing { background: #ea580c; }
.event-status-badge--past { background: #9ca3af; }
.event-status-badge--free { background: #3b82f6; }

/* ──────────────────────────────────────────────────────────────────
   Upcoming sessions block — `[couvrelles_upcoming_sessions]`
   Each row carries its accent colour through the `--ce-upcoming-accent`
   custom property set inline by the shortcode (read from the first
   product_tag's colour meta).
   ────────────────────────────────────────────────────────────────── */
.ce-upcoming {
  display: flex;
  flex-direction: column;
  gap: 16px;
  font-family: 'Urbanist', system-ui, -apple-system, sans-serif;
}

.ce-upcoming__row {
  --ce-upcoming-accent: var(--c-primary);
  position: relative;
  display: grid;
  /* Mêmes proportions que la variante Récollections (colonne date large,
     titre dominant, colonnes de droite au contenu) pour que les deux listes
     aient le même rythme visuel d'une page à l'autre. */
  grid-template-columns: minmax(150px, 200px) 1.6fr auto auto;
  align-items: center;
  gap: 24px;
  padding: 18px 22px 18px 26px;
  background: color-mix(in srgb, var(--ce-upcoming-accent) 6%, #fff);
  border-left: 4px solid var(--ce-upcoming-accent);
  border-radius: 10px;
  transition: background 0.2s ease, transform 0.15s ease;
}
.ce-upcoming__row:hover {
  background: color-mix(in srgb, var(--ce-upcoming-accent) 11%, #fff);
}
/* Whole-card click target (stretched link) : the title link is stretched
   to cover the entire row, while the register button stays clickable on
   top of it (higher z-index). */
.ce-upcoming__title a::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}
.ce-upcoming__btn {
  position: relative;
  z-index: 2;
}

/* Date column (left) */
.ce-upcoming__date {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--c-text);
  font-size: 14px;
  font-weight: 500;
}
.ce-upcoming__icon {
  display: inline-flex;
  color: var(--ce-upcoming-accent);
  flex-shrink: 0;
}
.ce-upcoming__date-text {
  white-space: nowrap;
}

/* Title (centre-left) */
.ce-upcoming__title {
  margin: 0 !important;
  font-size: 17px !important;
  font-weight: 700 !important;
  line-height: 1.35 !important;
  color: var(--c-dark) !important;
}
.ce-upcoming__title a {
  color: inherit !important;
  text-decoration: none !important;
}
.ce-upcoming__title a:hover {
  color: var(--c-accent) !important;
}

/* Audience (centre-right) */
.ce-upcoming__audience {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--c-bodysoft);
  font-size: 14px;
  font-weight: 500;
  min-width: 0;
}
.ce-upcoming__audience-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Register button (right) — defensive overrides match `.event-cta`. */
.ce-upcoming__btn,
a.ce-upcoming__btn,
.elementor-shortcode a.ce-upcoming__btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 10px 22px !important;
  background: var(--c-primary) !important;
  background-color: var(--c-primary) !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  font-family: inherit !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  line-height: 1.4 !important;
  text-decoration: none !important;
  border-radius: 8px !important;
  border: 0 !important;
  white-space: nowrap !important;
  transition: background 0.2s ease, transform 0.15s ease !important;
}
.ce-upcoming__btn:hover,
.ce-upcoming__btn:focus,
a.ce-upcoming__btn:hover {
  background: var(--c-accent) !important;
  background-color: var(--c-accent) !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  transform: translateY(-1px);
}

/* ── Responsive ────────────────────────────────────────────────── */

/* Tablet : compress the row, give the title more room. Le public ne DISPARAÎT
   plus (il indiquait « pour qui » — information utile) : il passe sous la ligne,
   exactement comme le lieu des récollections, pour que les deux listes se
   comportent pareil. La variante Récollections garde son public en 3e colonne
   (cf. bloc dédié plus bas). */
@media (max-width: 960px) {
  .ce-upcoming__row {
    grid-template-columns: minmax(130px, 170px) 1fr auto;
    gap: 16px;
  }
  .ce-upcoming__row:not(.ce-upcoming__row--recollection) .ce-upcoming__audience {
    grid-column: 1 / -1;
    margin-top: 4px;
  }
}

/* Mobile : stack everything vertically */
@media (max-width: 600px) {
  .ce-upcoming__row {
    grid-template-columns: 1fr;
    align-items: flex-start;
    padding: 16px 18px 16px 20px;
    gap: 10px;
  }
  .ce-upcoming__title {
    font-size: 16px !important;
    order: 1;
  }
  .ce-upcoming__date {
    order: 2;
    font-size: 13px;
  }
  .ce-upcoming__audience {
    display: inline-flex; /* sous le titre sur téléphone */
    order: 3;
    font-size: 13px;
  }
  .ce-upcoming__btn,
  a.ce-upcoming__btn {
    order: 4;
    width: 100% !important;
    margin-top: 4px;
  }
}

/* Fallback for browsers without color-mix() (mostly Safari < 16.4) :
   plain very-pale-gray background, accent stripe still shows. */
@supports not (background: color-mix(in srgb, red, white)) {
  .ce-upcoming__row {
    background: #fafafa;
  }
  .ce-upcoming__row:hover {
    background: #f4f4f4;
  }
}

/* ──────────────────────────────────────────────────────────────────
   Variante Récollections — `[couvrelles_upcoming_recollections]`
   Réutilise .ce-upcoming* ; 4 colonnes (date+heures / titre / public
   homme-femme / lieu). Aucun bouton, aucun lien (ligne non cliquable).
   L'accent (bordure + icônes) suit la couleur du public.
   ────────────────────────────────────────────────────────────────── */
.ce-upcoming--recollections .ce-upcoming__row,
.ce-upcoming__row--recollection {
  grid-template-columns: minmax(150px, 200px) 1.6fr auto 1.2fr;
}
/* Date : empile date puis heures sur deux lignes. */
.ce-upcoming__row--recollection .ce-upcoming__date {
  flex-wrap: wrap;
}
.ce-upcoming__hours {
  flex-basis: 100%;
  margin-left: 24px; /* aligné sous le texte de date, après l'icône */
  color: var(--c-bodysoft);
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
}
/* Public homme/femme : même style que l'audience des autres cartes. */
.ce-upcoming__row--recollection .ce-upcoming__audience {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--c-bodysoft);
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  min-width: 0;
}
/* Lieu : même style que l'audience. */
.ce-upcoming__lieu {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--c-bodysoft);
  font-size: 14px;
  font-weight: 500;
  min-width: 0;
}
.ce-upcoming__lieu-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-width: 960px) {
  .ce-upcoming--recollections .ce-upcoming__row,
  .ce-upcoming__row--recollection {
    grid-template-columns: minmax(130px, 170px) 1fr auto;
  }
  /* Le lieu passe sous la ligne sur tablette (info secondaire). */
  .ce-upcoming__row--recollection .ce-upcoming__lieu {
    grid-column: 1 / -1;
    margin-top: 4px;
  }
}

@media (max-width: 600px) {
  .ce-upcoming--recollections .ce-upcoming__row,
  .ce-upcoming__row--recollection {
    grid-template-columns: 1fr;
  }
  .ce-upcoming__row--recollection .ce-upcoming__audience {
    order: 2;
  }
  .ce-upcoming__row--recollection .ce-upcoming__lieu {
    order: 3;
    margin-top: 0;
    font-size: 13px;
  }
}

/* Bouton « charger plus / voir tout le calendrier » (récollections) : rendu APRÈS
   le wrapper .ce-upcoming (donc hors de sa grille de lignes) et centré sous la liste.
   C'est un <button> — le clic révèle les lignes masquées puis mène au calendrier. */
.ce-upcoming__btn--calendar {
  display: flex !important;
  width: max-content;
  max-width: 100%;
  margin: 16px auto 0 !important;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}
@media (max-width: 600px) {
  .ce-upcoming__btn--calendar {
    width: auto;
    align-self: stretch;
  }
}

/* Lignes au-delà de `limit` : masquées jusqu'à leur révélation par
   couvrelles-upcoming-more.js (« charger plus »). Rendu dès le chargement front,
   donc les produits privés y sont déjà exclus (Access\Visibility). */
.ce-upcoming__row--more {
  display: none !important;
}

/* Doublon de la description courte : le template Elementor #193 rend DEUX
   widgets woocommerce-product-short-description — celui du hero (.hero-subtitle,
   conservé) et celui-ci, juste avant la galerie duo. Ciblage par data-id
   volontaire : un sélecteur :not(.hero-subtitle) masquerait LES DEUX si la
   classe hero-subtitle venait à disparaître du template. */
.single-product .elementor-element-ef6af8e { display: none !important; }

/* Nom du lieu affiché au-dessus de l'adresse (cf. [acf field="_ce_lieu_adresse"]). */
/* Lieu : nom + adresse en deux lignes serrées ; nom NON gras. */
.event-detail-value .event-lieu { display: block; line-height: 1.3; }
.event-detail-value .event-lieu-nom,
.event-detail-value .event-lieu-adr { display: block; }
.event-detail-value .event-lieu-nom { font-weight: 400; }

/* Galerie page produit — bords carrés (pas arrondis). */
.event-gallery-duo-item img,
.event-gallery-grid img,
.event-gallery-item img {
  border-radius: 0 !important;
}

/* Note « tarif réduit » injectée sous le bloc Tarif (difficultés financières). */
.event-detail .ce-note-reduit {
  font-style: italic;
}

/* ══════════════════════════════════════════════════════════════════
   Popup « Calendrier des récollections » ([couvrelles_recollections_calendar])
   ══════════════════════════════════════════════════════════════════ */
/* ── Bouton « Voir tout le calendrier » en double ───────────────────────
   Le gabarit d'archive Elementor contient un bouton figé (non modifiable
   depuis le back-office) pointant vers /categorie-produit/evenements/ : il
   ne fait que rediriger vers l'archive fourre-tout et n'ouvre PAS le
   calendrier. Depuis la 1.5.9, [couvrelles_upcoming_sessions] rend déjà son
   propre bouton, qui lui ouvre la popup — d'où le doublon signalé sur toutes
   les pages sauf Récollections. On masque l'ancien.
   Double ciblage volontaire : par l'identifiant du widget (le gabarit est
   partagé, donc identique partout) ET par la destination du lien, pour que
   le masquage tienne si le widget est recréé avec un autre identifiant.
   Sans effet sur le « charger plus » : depuis la 1.5.6, `max` vaut `limit`
   par défaut, donc aucune ligne masquée n'attend d'être révélée. */
.elementor-element-21c2644e,
.elementor-widget-button:has(> .elementor-widget-container > .elementor-button-wrapper > a.elementor-button[href*="/categorie-produit/evenements"]),
a.elementor-button[href*="/categorie-produit/evenements"] {
  display: none !important;
}

.ce-cal-wrap { display: flex; justify-content: center; margin-top: 16px; }

/* Bouton calendrier : reprend l'allure de l'ancien bouton Elementor
   (coins quasi droits, format plus généreux) demandée par la cliente, pour
   TOUS les calendriers — sessions comme récollections. */
.ce-upcoming__btn--calendar,
.ce-upcoming__btn--calendar.ce-cal-open,
.ce-cal-open {
  border-radius: 2px !important;
  padding: 14px 28px !important;
  font-size: 16px !important;
  line-height: 1.4 !important;
}
.ce-cal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(16, 24, 40, 0.6);
  z-index: 100000;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 40px 16px;
  overflow: auto;
}
.ce-cal-overlay[hidden] { display: none; }
.ce-cal-modal {
  position: relative;
  background: #fff;
  border-radius: 12px;
  max-width: 1080px;
  width: 100%;
  padding: 28px 28px 32px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
}
/* Croix de fermeture : le thème/Elementor stylent globalement les <button>
   (fond doré, gros padding), d'où le « pavé doré » signalé. On neutralise
   explicitement — sans !important, l'habillage du thème l'emporte. */
.ce-cal-close,
.ce-cal-modal button.ce-cal-close {
  position: absolute;
  top: 6px;
  right: 10px;
  width: 40px;
  height: 40px;
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
  background-color: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  font-size: 30px !important;
  line-height: 1 !important;
  font-weight: 400 !important;
  cursor: pointer;
  color: var(--c-muted, #6a7282) !important;
  -webkit-text-fill-color: var(--c-muted, #6a7282);
}
.ce-cal-close:hover,
.ce-cal-modal button.ce-cal-close:hover {
  background: transparent !important;
  color: var(--c-dark, #101828) !important;
  -webkit-text-fill-color: var(--c-dark, #101828);
}
.ce-cal-title {
  margin: 0 0 20px;
  font-family: 'Work Sans', sans-serif;
  font-weight: 700;
  color: var(--c-dark);
}
.ce-cal-months {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 24px;
}
.ce-cal-month__title {
  text-align: center;
  font-weight: 600;
  margin-bottom: 8px;
  color: var(--c-dark);
}
.ce-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.ce-cal-wd {
  text-align: center;
  font-size: 11px;
  color: var(--c-muted);
  font-weight: 600;
  padding-bottom: 4px;
}
.ce-cal-cell {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1 / 1;
  font-size: 13px;
  color: var(--c-text);
  border-radius: 6px;
}
.ce-cal-cell--empty { visibility: hidden; }
.ce-cal-cell--event {
  position: relative;
  background: var(--c-primary);
  color: #fff !important;
  -webkit-text-fill-color: #fff;
  font-weight: 700;
  text-decoration: none !important;
}
.ce-cal-cell--event:hover { background: var(--c-accent); }
/* Activité sur plusieurs jours : les journées consécutives se lisent comme une
   plage. On carre les côtés intérieurs — début arrondi à gauche, fin arrondie
   à droite, milieu carré. Pas de marge négative : la gouttière de 2px de la
   grille reste, mais l'enchaînement des jours colorés suffit à lire la durée,
   et la grille ne peut pas déborder (rendu identique au saut de semaine). */
.ce-cal-cell--r-start { border-radius: 6px 0 0 6px; }
.ce-cal-cell--r-mid   { border-radius: 0; }
.ce-cal-cell--r-end   { border-radius: 0 6px 6px 0; }
.ce-cal-more {
  position: absolute;
  top: -4px;
  right: -4px;
  font-size: 9px;
  line-height: 1;
  background: var(--c-accent);
  color: #fff;
  border-radius: 8px;
  padding: 1px 3px;
}
.ce-cal-cell--multi { cursor: pointer; }

/* Popover : liste des événements d'une même date (titre + public + couleur),
   ouverte au survol / focus (desktop, clavier) ou au tap (.is-open, mobile). */
.ce-cal-cell--event:hover,
.ce-cal-cell--event:focus-within,
.ce-cal-cell--event.is-open { z-index: 40; }

.ce-cal-pop {
  display: none;
  position: absolute;
  top: calc(100% + 7px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 50;
  min-width: 190px;
  max-width: min(260px, 78vw);
  padding: 8px;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 12px 34px rgba(16, 24, 40, 0.24);
  text-align: left;
  cursor: default;
  font-weight: 400;
  color: var(--c-text, #1d2327);
  -webkit-text-fill-color: currentColor; /* annule le blanc forcé de la cellule */
  white-space: normal;
}
.ce-cal-cell--event:hover > .ce-cal-pop,
.ce-cal-cell--event:focus-within > .ce-cal-pop,
.ce-cal-cell--event.is-open > .ce-cal-pop { display: block; }
/* Petite flèche + pont invisible pour ne pas perdre le survol dans l'interstice. */
.ce-cal-pop::before {
  content: '';
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-bottom-color: #fff;
}
.ce-cal-pop::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 100%;
  height: 9px;
}
.ce-cal-pop__hd {
  display: block;
  font-size: 11px;
  font-weight: 700;
  color: var(--c-muted, #6a7282);
  -webkit-text-fill-color: var(--c-muted, #6a7282);
  padding: 2px 6px 6px;
  border-bottom: 1px solid #eef0f2;
  margin-bottom: 4px;
}
.ce-cal-pop__item {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 6px;
  border-radius: 7px;
  text-decoration: none !important;
  color: var(--c-text, #1d2327) !important;
  -webkit-text-fill-color: currentColor;
}
a.ce-cal-pop__item:hover,
a.ce-cal-pop__item:focus { background: #f4f1ea; }
.ce-cal-pop__dot {
  flex: 0 0 auto;
  width: 10px;
  height: 10px;
  margin-top: 3px;
  border-radius: 50%;
  background: var(--c-primary, #b7995d);
}
.ce-cal-pop__body { display: flex; flex-direction: column; line-height: 1.3; min-width: 0; }
.ce-cal-pop__title {
  font-size: 13px;
  font-weight: 600;
  color: var(--c-dark, #101828);
  -webkit-text-fill-color: var(--c-dark, #101828);
}
.ce-cal-pop__aud {
  font-size: 11px;
  color: var(--c-muted, #6a7282);
  -webkit-text-fill-color: var(--c-muted, #6a7282);
}

@media (max-width: 600px) {
  .ce-cal-modal { padding: 20px 14px; }
  .ce-cal-months { grid-template-columns: 1fr 1fr; gap: 16px; }
  .ce-cal-pop { min-width: 150px; }
}