/**
 * @file
 * Styles for SSE Platform content types (Actions, Sessions).
 * Uses semantic tokens from tokens.css for light/dark mode support.
 */

@layer components {

/* Action Full View */
.sse-action {
  margin-bottom: 2rem;
}

/* Action header layout */
.sse-action__header {
  background-color: var(--color-surface);
  padding: 1.5rem;
  border-radius: var(--radius-lg, 8px);
  margin-bottom: 2rem;
}

/* Header as a single row: image 1/3, info 2/3 */
.sse-action__header-row {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 1.5rem;
  align-items: start;
}

@media (max-width: 56rem) {
  .sse-action__header-row {
    grid-template-columns: 1fr;
  }
}

.sse-action__media {
  position: relative;
}

.sse-action__meta {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.sse-action__type .badge--action-type {
  display: inline-block;
  padding: 0.25rem 0.75rem;
  background-color: var(--color-link);
  color: var(--color-bg);
  border-radius: 1rem;
  font-size: 0.875rem;
  font-weight: 600;
  text-transform: uppercase;
}

.sse-action__thematic {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.sse-action__sessions-summary {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 1.125rem;
  padding: 0.75rem;
  background-color: var(--color-elevated);
  border-radius: var(--radius-md, 6px);
}

.sse-action__next-session {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  padding: 0.5rem;
  background-color: var(--color-elevated);
  border-radius: var(--radius-md, 6px);
  border-left: var(--border-width-accent, 3px) solid var(--color-link);
}

.sse-action__description {
  margin-bottom: 2rem;
  font-size: 1.125rem;
  line-height: 1.6;
}

.sse-action__location {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.sse-action__location .sse-location-modal-link {
  color: var(--color-link);
  text-decoration: none;
}

/* Teaser and Card view modes - consistent header styling */
.node--view-mode-teaser .sse-action__header,
.node--view-mode-card .sse-action__header {
  background-color: var(--color-surface);
  border: 1px solid var(--color-border, rgba(0, 0, 0, 0.1));
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.node--view-mode-teaser:hover .sse-action__header,
.node--view-mode-card:hover .sse-action__header {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.node--view-mode-teaser .node__title,
.node--view-mode-card .node__title {
  margin-top: 0;
  margin-bottom: 1rem;
  font-size: 1.5rem;
}

.node--view-mode-teaser .node__title a,
.node--view-mode-card .node__title a {
  color: var(--color-text);
  text-decoration: none;
}

.node--view-mode-teaser .node__title a:hover,
.node--view-mode-card .node__title a:hover {
  color: var(--color-link);
}

/* CTA button in teaser/card */
.sse-action__cta {
  margin-top: 0.5rem;
}

.sse-action__cta .button {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  text-decoration: none;
}

/* Listing context spacing */
.view-sse-actions-listing .views-row {
  margin-bottom: 0.2rem;
}

.view-sse-actions-listing .node--view-mode-teaser {
  height: 100%;
}

/* Default image styling */
.sse-action-image--default {
  opacity: 0.6;
  background-color: var(--color-elevated);
  padding: 1rem;
}

/* ────────────────────────────────────────────────────────────────────
   Action listing card (DS homepage card): cover image on top, uppercase
   thematic eyebrow, bold title, calendar/next meta, brand CTA button.
   ──────────────────────────────────────────────────────────────────── */
.sse-action-card {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--color-surface);
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--transition-base), transform var(--transition-base);
}
.sse-action-card:hover {
  box-shadow: var(--shadow-card-hover);
  transform: translateY(-2px);
}

.sse-action-card__cover {
  display: block;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: linear-gradient(135deg, var(--brand-500), var(--brand-800));
}
.sse-action-card__cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.sse-action-card__cover-fallback {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  color: rgba(255, 255, 255, 0.9);
}

/* Type badge at the top of the card body — a colored DS badge (semantic
   variant per type) so the action type reads clearly on any cover. */
.sse-action-card__type {
  display: flex;
  position: relative;
  z-index: 2; /* above the stretched title link */
}

/* Type pills (.sse-type-badge) — solid, high-contrast fills with white text.
   The default semantic badge tokens are pastel bg + colored text, which loses
   contrast in dark mode; type pills override them with saturated solids that
   stay ≥4.5:1 in both light and dark. align-self stops the pill stretching to
   full width inside the slider card's flex-column header. Two-class selectors
   (0,2,0) beat the single-class .sse-badge--* variants. */
.sse-badge.sse-type-badge {
  align-self: flex-start;
  width: auto;
  border: 0;
  color: #fff;
}
.sse-badge.sse-type-badge.sse-badge--action  { background: #1d4ed8; } /* blue 700 — formation */
.sse-badge.sse-type-badge.sse-badge--info    { background: #0e7490; } /* cyan 700 — atelier */
.sse-badge.sse-type-badge.sse-badge--warning { background: #b45309; } /* amber 700 — conférence */
.sse-badge.sse-type-badge.sse-badge--success { background: #047857; } /* emerald 700 — cycle */
.sse-badge.sse-type-badge.sse-badge--danger  { background: #b91c1c; } /* red 700 — escape game */
.sse-badge.sse-type-badge.sse-badge--default { background: #475569; } /* slate 600 — autre */

.sse-action-card__body {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  padding: var(--sp1-5) var(--sp);
  flex: 1;
}

.sse-action-card__eyebrow {
  font-size: var(--font-size-xxs);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--letter-spacing-caps);
  text-transform: uppercase;
  color: var(--color-fg);
}

/* Higher specificity (2 classes) so it beats `.node--view-mode-card
   .node__title { font-size: 1.5rem }` above, which otherwise wins. */
.sse-action-card .sse-action-card__title {
  margin: 0;
  font-size: var(--font-size-l);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-snug);
}
.sse-action-card__title a {
  color: var(--color-fg);
  text-decoration: none;
  background-image: none; /* opt out of the global animated underline */
}
/* Whole-card click target via stretched title link */
.sse-action-card__title a::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}

.sse-action-card__meta,
.sse-action-card__next,
.sse-action-card__animator,
.sse-action-card__webinar {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex-wrap: wrap;
  font-size: var(--font-size-s);
  color: var(--color-fg-muted);
}

.sse-action-card__cta {
  position: relative;
  z-index: 2; /* stay clickable above the stretched title link */
  margin-top: auto;
  padding-top: 0.4rem;
}

/* ────────────────────────────────────────────────────────────────────
   Homepage hero (DS): full-bleed brand gradient band with white intro.
   The page node's field_content block becomes the hero on the front page.
   ──────────────────────────────────────────────────────────────────── */
.path-frontpage .block-field-blocknodepagefield-content {
  background: linear-gradient(135deg, var(--brand-700), var(--brand-900));
  padding: 56px 24px;
  border-radius: 0;
}
.path-frontpage .block-field-blocknodepagefield-content .field--name-field-content {
  max-width: var(--max-width, 1350px);
  margin-inline: auto;
  color: #fff;
}
.path-frontpage .block-field-blocknodepagefield-content :is(p, h1, h2, h3, strong, li) {
  color: #fff;
}
.path-frontpage .block-field-blocknodepagefield-content p {
  font-size: var(--font-size-l, 18px);
  line-height: var(--line-height-base, 1.6);
  max-width: 64ch;
}
/* First paragraph reads as the hero headline */
.path-frontpage .block-field-blocknodepagefield-content .field--name-field-content > p:first-child {
  font-size: var(--font-size-3xl, 36px);
  font-weight: var(--font-weight-black, 800);
  line-height: var(--line-height-tight, 1.2);
  letter-spacing: -0.015em;
  max-width: 22ch;
  margin-block-start: 0;
}
.path-frontpage .block-field-blocknodepagefield-content a {
  color: #fff;
  text-decoration: underline;
}

/* Parent event banner on action page */
.sse-action__event-banner {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.75rem 1rem;
  margin-bottom: 1.5rem;
  background-color: var(--color-elevated);
  border: 1px solid var(--color-border);
  border-left: 4px solid var(--color-link);
  border-radius: 6px;
}

.sse-action__event-banner-thumb {
  flex-shrink: 0;
  display: block;
  width: 56px;
  height: 56px;
  border-radius: 6px;
  overflow: hidden;
}

.sse-action__event-banner-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.sse-action__event-banner-info {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
}

.sse-action__event-banner-label {
  font-size: 0.8rem;
  color: var(--color-fg-subtle);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  font-weight: 600;
}

.sse-action__event-banner-link {
  color: var(--color-link);
  text-decoration: none;
  font-weight: 700;
  font-size: 1.05rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sse-action__event-banner-link:hover {
  text-decoration: underline;
  color: var(--color-link-hover);
}

/* Action header in session context */
.sse-action__header--in-session {
  margin-bottom: 2rem;
  border-bottom: 2px solid var(--color-border, rgba(0, 0, 0, 0.1));
  padding-bottom: 1.5rem;
}

.sse-action__header--in-session .sse-action__title {
  margin: 0 0 0.75rem 0;
  font-size: 1.75rem;
}

.sse-action__header--in-session .sse-action__title a {
  color: var(--color-text);
  text-decoration: none;
}

.sse-action__header--in-session .sse-action__title a:hover {
  color: var(--color-link);
}

/* Session-specific header */
.sse-session__meta--full-width {
  width: 100%;
}

.sse-session__meta h3,
.sse-session__header-row > h3 {
  margin-top: 0;
  margin-bottom: 0.75rem;
  font-size: 1.15rem;
  color: var(--color-fg-muted, var(--color-text));
}

.sse-session__date-prominent,
.sse-session__duration,
.sse-session__location-block,
.sse-session__capacity {
  padding: 0.75rem;
  background-color: var(--color-elevated);
  border-radius: 4px;
  margin-bottom: 0.75rem;
}

.sse-session__date-prominent,
.sse-session__duration,
.sse-session__location,
.sse-session__location-details,
.sse-session__capacity {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.sse-session__location {
  margin-bottom: 0.25rem;
}

.sse-session__location-details {
  font-size: 0.9rem;
  color: var(--color-fg-muted);
  border-top: 1px solid var(--color-border);
  padding-top: 0.5rem;
  margin-top: 0.5rem;
}

.sse-session__date-prominent {
  font-size: 1.125rem;
  background-color: var(--color-elevated);
  border-left: 3px solid var(--color-link);
}

.sse-action__location .sse-location-modal-link:hover {
  text-decoration: underline;
}

.sse-action__location .sse-location-modal-button {
  margin-inline-start: 0.5rem;
}

.sse-action__animator,
.sse-action__webinar {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.sse-action__sessions h3 {
  color: var(--color-link);
  border-bottom: 2px solid var(--color-link);
  padding-bottom: 0.5rem;
  margin-bottom: 1.5rem;
}

.sse-sessions-list {
  display: grid;
  gap: 1.5rem;
  margin-top: 1rem;
}

.sse-session-card {
  border: 1px solid var(--color-border);
  border-radius: 8px;
  padding: 1.5rem;
  background-color: var(--color-surface);
  box-shadow: 0 2px 4px color-mix(in oklab, var(--color-fg) 10%, transparent);
  transition: box-shadow 0.3s ease;
}

.sse-session-card:hover {
  box-shadow: 0 4px 12px color-mix(in oklab, var(--color-fg) 15%, transparent);
}

.sse-session__title {
  margin-bottom: 1rem;
}

.sse-session__title a {
  color: var(--color-link);
  text-decoration: none;
}

.sse-session__title a:hover {
  text-decoration: underline;
}

.sse-session__date,
.sse-session__location,
.sse-session__capacity {
  margin-bottom: 0.75rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.sse-session__register {
  margin-top: 1rem;
  text-align: center;
}

/* Session Full View */
.sse-session__header {
  background-color: var(--color-surface);
  padding: 1.5rem;
  border-radius: 8px;
  margin-bottom: 2rem;
}

/* Header as a single row: info taking full width */
.sse-session__header-row {
  display: block;
  width: 100%;
}

/* Two-column layout when description exists */
/* Multi-day warning banner on full session page */
.sse-session__multiday-warning {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  margin: 0 0 1rem 0;
  padding: 0.75rem 1rem;
  border-radius: 8px;
  background: color-mix(in oklab, var(--color-warning, #cc8800) 12%, transparent);
  border: 1px solid color-mix(in oklab, var(--color-warning, #cc8800) 45%, transparent);
  color: var(--color-fg, #333);
}
.sse-session__multiday-warning-icon {
  font-size: 1.25rem;
  line-height: 1.2;
  flex-shrink: 0;
}
.sse-session__multiday-warning-body {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  font-size: 0.95rem;
}
.sse-session__multiday-warning-body strong {
  color: var(--color-warning-strong, var(--color-warning, #b36b00));
}

/* Session-full warning: displayed below the capacity info when the occurrence
   has reached its maximum number of confirmed registrations. */
.sse-session__full-warning {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  margin: 0.5rem 0 1rem 0;
  padding: 0.75rem 1rem;
  border-radius: 8px;
  background: color-mix(in oklab, var(--color-danger, #c1121f) 10%, transparent);
  border: 1px solid color-mix(in oklab, var(--color-danger, #c1121f) 55%, transparent);
  color: var(--color-fg, #333);
}
.sse-session__full-warning-icon {
  font-size: 1.25rem;
  line-height: 1.2;
  flex-shrink: 0;
}
.sse-session__full-warning-body {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  font-size: 0.95rem;
}
.sse-session__full-warning-body strong {
  color: var(--color-danger-strong, var(--color-danger, #c1121f));
  font-size: 1rem;
}

.sse-session__header-row--two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  align-items: start;
}

.sse-session__details-col,
.sse-session__description-col {
  min-width: 0;
}

@media (max-width: 56rem) {
  .sse-session__header-row--two-col {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
}

.sse-session__media {
  position: relative;
}

.sse-action-link--media {
  display: block;
}

.sse-action-image {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 8px;
  box-shadow: 0 4px 12px color-mix(in oklab, var(--color-fg) 12%, transparent);
}

.sse-session__meta .sse-action-link--title {
  display: inline-block;
  margin-bottom: 0.5rem;
  color: var(--color-link);
  text-decoration: none;
  font-weight: 700;
  font-size: 1.125rem;
}

/* Dates block: prominent, accent border, each date on its own line */
.sse-session__dates-block {
  padding: 0.75rem 1rem;
  background-color: var(--color-elevated);
  border: 1px solid var(--color-border);
  border-left: 3px solid var(--color-link);
  border-radius: 6px;
  box-shadow: 0 1px 3px color-mix(in oklab, var(--color-fg) 8%, transparent);
  font-size: 2rem;
  margin-bottom: 0.75rem;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.35rem;
  /* `auto` is not a valid line-height value: the declaration was invalid and
     dropped, so the 2rem date inherited the body line-height and wrapped with
     enormous leading on narrow screens. */
  line-height: 1.25;
}

.sse-session__dates-block strong {
  font-size: 2rem;
}

.sse-session__dates-list {
  list-style: none;
  margin: 0.25rem 0 0;
  padding: 0;
  width: 100%;
}

.sse-session__dates-list li {
  padding: 0.2rem 0;
  font-weight: 600;
  font-size: 1rem;
  border-bottom: 1px solid color-mix(in oklab, var(--color-border) 50%, transparent);
}

.sse-session__dates-list li:last-child {
  border-bottom: none;
}

/* Session info line: stack items vertically in details column */
.sse-session__info-line {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.sse-session__info-item {
  display: flex;
  align-items: center;
  /* Wrap onto multiple lines on narrow/mobile viewports instead of forcing
     the icon/label/value/button onto a single squeezed line (which, combined
     with the site-wide hyphenation bug, used to break labels and the
     "Localiser" button mid-word — see olivero-overrides.css). */
  flex-wrap: wrap;
  gap: 0.35rem;
  font-size: 0.9rem;
  white-space: normal;
  padding: 0.4rem 0.75rem;
  background-color: var(--color-elevated);
  border: 1px solid var(--color-border);
  border-radius: 6px;
  box-shadow: 0 1px 2px color-mix(in oklab, var(--color-fg) 6%, transparent);
}

/* Keep the label and button intact as single units when the row wraps,
   rather than letting them shrink/break inside a squeezed flex line. */
.sse-session__info-item > strong {
  white-space: nowrap;
}

.sse-session__info-item .button--small {
  padding: 0.1rem 0.4rem;
  font-size: 0.75rem;
  margin-inline-start: 0.15rem;
  white-space: nowrap;
  flex-shrink: 0;
}

/* Description: full width below the info line, or in right column */
.sse-session__description-full {
  font-size: 0.95rem;
  line-height: 1.6;
  font-family: inherit;
}

/* When description is below info (single column fallback on mobile) */
.sse-session__header-row:not(.sse-session__header-row--two-col) .sse-session__description-full {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--color-border);
}

/* When in right column, add left border accent */
.sse-session__description-col .sse-session__description-full {
  padding-left: 1.5rem;
  border-left: 3px solid var(--color-link);
}

@media (max-width: 56rem) {
  .sse-session__description-col .sse-session__description-full {
    margin-top: 1rem;
    padding-top: 1rem;
    padding-left: 0;
    border-left: none;
    border-top: 1px solid var(--color-border);
  }
}

/* Force CKEditor output inside description to inherit site font */
.sse-session__description-full *,
.sse-session__description-full p,
.sse-session__description-full li,
.sse-session__description-full span {
  font-family: inherit !important;
}


.sse-session__location-details {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}

.sse-session__location .sse-location-modal-button {
  margin-inline-start: 0.5rem;
}

.sse-session__action {
  margin-bottom: 1rem;
}

.sse-session__action-label {
  font-weight: 600;
  color: var(--color-fg-muted);
}

.sse-session__date-prominent {
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--color-link);
  margin-bottom: 1rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.sse-session__location,
.sse-session__capacity {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}

.sse-session__registration {
  background-color: inherit;
  border: 2px solid var(--color-success-fg);
  border-radius: 8px;
  padding: 2rem;
  margin: 2rem 0;
}

.sse-session__registration h3 {
  color: inherit;
  margin-bottom: 1rem;
  text-align: center;
}

.sse-session__no-registration .alert--info {
  background-color: var(--color-info-bg);
  border: 1px solid var(--color-info-fg);
  color: var(--color-info-fg);
  padding: 1rem;
  border-radius: 4px;
  text-align: center;
}

.sse-session__map {
  margin-top: 2rem;
}

.map-container {
  height: 300px;
  border-radius: 8px;
  overflow: hidden;
}

/* Action Teaser View */
.sse-action-teaser {
  border: 1px solid var(--color-border);
  border-radius: 8px;
  padding: 1.5rem;
  background-color: var(--color-surface);
  margin-bottom: 1.5rem;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.sse-action-teaser:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px color-mix(in oklab, var(--color-fg) 15%, transparent);
}

.sse-action-teaser__type {
  margin-bottom: 0.75rem;
}

.sse-action-teaser__title {
  margin-bottom: 0.75rem;
}

.sse-action-teaser__title a {
  color: var(--color-link);
  text-decoration: none;
}

.sse-action-teaser__title a:hover {
  text-decoration: underline;
}

.sse-action-teaser__thematic {
  color: var(--color-fg-muted);
  font-style: italic;
  margin-bottom: 0.75rem;
}

.action-upcoming-info {
  margin-bottom: 1rem;
}

.upcoming-count {
  margin-bottom: 0.25rem;
}

.next-session-date {
  font-size: 0.95rem;
  color: var(--color-fg-muted);
}

.session-location {
  margin-bottom: 1rem;
}

.session-registration {
  margin-top: auto;
}

.sse-action-teaser__description {
  margin-bottom: 1rem;
  line-height: 1.5;
}

.sse-action-teaser__sessions-info {
  background-color: var(--color-elevated);
  padding: 1rem;
  border-radius: 4px;
  margin-bottom: 1rem;
}

.sessions-count {
  font-weight: 600;
  color: var(--color-link);
  margin-bottom: 0.5rem;
}

.next-session {
  font-size: 0.9rem;
  color: var(--color-fg-muted);
}

.no-sessions {
  color: var(--color-fg-subtle);
  font-style: italic;
}

.sse-action-teaser__actions {
  text-align: center;
}

/* Session Teaser View */
.sse-session-teaser {
  border: 1px solid var(--color-border);
  border-radius: 6px;
  padding: 1rem;
  background-color: var(--color-surface);
  margin-bottom: 1rem;
}

.sse-session-teaser__title {
  margin-bottom: 0.5rem;
  font-size: 1rem;
}

.sse-session-teaser__title a {
  color: var(--color-link);
  text-decoration: none;
}

.sse-session-teaser__date {
  font-weight: 600;
  margin-bottom: 0.5rem;
}

.sse-session-teaser__location {
  color: var(--color-fg-muted);
  margin-bottom: 0.5rem;
}

.sse-session-teaser__capacity {
  margin-bottom: 0.75rem;
}

.capacity-info {
  font-weight: 600;
}

.sse-session-teaser__register {
  text-align: center;
}

.registration-closed {
  color: var(--color-danger-fg);
  font-weight: 600;
  font-style: italic;
}

/* Session location in teaser cards */
.session-location {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-bottom: 0.5rem;
}

.session-location .sse-location-modal-link {
  color: var(--color-link);
  text-decoration: none;
}

.session-location .sse-location-modal-link:hover {
  text-decoration: underline;
}

.session-location .sse-location-modal-button {
  margin-inline-start: 0.25rem;
  padding: 0.25rem 0.5rem;
  font-size: 0.75rem;
}

/* Buttons */
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.75rem 1.5rem;
  background-color: var(--color-link);
  color: var(--color-bg);
  font-family: var(--font-sans);
  text-decoration: none;
  border-radius: var(--radius-sm, 4px);
  font-weight: var(--font-weight-semibold, 600);
  line-height: 1.2;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background-color var(--transition-base), color var(--transition-base), border-color var(--transition-base);
}

/* Trailing CTA icon glyph */
.button__icon {
  font-size: 1.1em;
  line-height: 1;
}

.button:hover {
  background-color: var(--color-link-hover);
  color: var(--color-bg);
  text-decoration: none;
}

.button--small {
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
}

.button--primary {
  background-color: var(--brand-600);
  color: var(--neutral-0); /* Always white text in light mode */
  border: 1px solid var(--brand-700);
}

.button--primary:hover {
  background-color: var(--brand-700);
  color: var(--neutral-0);
  border-color: var(--brand-800);
}

/* Dark mode: bright button with dark text */
html[data-theme="dark"] .button--primary {
  background-color: var(--brand-500);
  color: var(--neutral-950); /* Dark text on bright button */
  border-color: var(--brand-400);
}

html[data-theme="dark"] .button--primary:hover {
  background-color: var(--brand-400);
  color: var(--neutral-950);
  border-color: var(--brand-300);
}

.button--secondary {
  background-color: transparent;
  color: var(--color-link);
  border: 1px solid var(--color-link);
}

.button--secondary:hover {
  background-color: var(--color-link);
  color: var(--color-bg);
  text-decoration: none;
}

html[data-theme="dark"] .button--secondary {
  color: var(--brand-400);
  border-color: var(--brand-400);
}

html[data-theme="dark"] .button--secondary:hover {
  background-color: var(--brand-400);
  color: var(--neutral-950);
}

/* Ghost — quiet text button that fills with surface on hover */
.button--ghost {
  background-color: transparent;
  color: var(--color-fg);
  border-color: transparent;
}
.button--ghost:hover {
  background-color: var(--color-elevated);
  color: var(--color-fg);
}

/* Danger — destructive action */
.button--danger {
  background-color: var(--color-danger-fg);
  color: var(--color-bg);
  border-color: transparent;
}
.button--danger:hover {
  background-color: var(--red-900);
  color: var(--color-bg);
}

/* Size aliases */
.button--lg {
  padding: 0.875rem 1.75rem;
  font-size: var(--font-size-l, 18px);
}

.button--disabled,
.button:disabled,
.button[disabled] {
  background-color: var(--color-fg-subtle);
  cursor: not-allowed;
  pointer-events: none;
  opacity: 0.6;
}

/* Past session card styling */
.sse-card--past {
  opacity: 0.6;
  filter: grayscale(50%);
}

.sse-card--past .sse-card__title,
.sse-card--past .sse-card__content {
  color: var(--color-fg-muted);
}

/* Icons */
.icon-calendar:before,
.icon-location:before,
.icon-users:before {
  content: "📅";
  margin-right: 0.5rem;
}

.icon-location:before {
  content: "📍";
}

/* Special location kinds: online (💻) and itinerant / no fixed venue (🚐). */
.icon-online:before,
.icon-itinerant:before {
  margin-right: 0.5rem;
}

.icon-online:before {
  content: "💻";
}

.icon-itinerant:before {
  content: "🚐";
}

.icon-users:before {
  content: "👥";
}

.icon-hourglass:before {
  content: "\231B";
  margin-right: 0.5rem;
}

.sse-session__action-teaser .node__title {
  display: none;
}

/* Multi-day session dates list */
.sse-session__dates-list {
  list-style: none;
  padding: 0;
  margin: 0.25rem 0 0 0;
  width: 100%;
}

.sse-session__dates-list li {
  padding: 0.25rem 0;
  border-bottom: 1px solid var(--color-border, #eee);
}

.sse-session__dates-list li:last-child {
  border-bottom: none;
}

/* Multi-day badge on teaser cards */
.session-multiday-badge {
  display: inline-block;
  background-color: var(--color-link, #0073e6);
  color: #fff;
  font-size: 0.75rem;
  padding: 0.1rem 0.5rem;
  border-radius: 10px;
  margin-left: 0.5rem;
  vertical-align: middle;
}

/* Registration intro text for multi-day */
.sse-session__registration-intro {
  text-align: center;
  font-style: italic;
  color: var(--color-fg-muted);
  margin-bottom: 1rem;
}

/* Stacked multi-day card in sessions-by-action view */
.session-date-stack {
  position: relative;
}

.session-date-stack__cards {
  position: relative;
}

.session-date-stack__card {
  display: none;
}

.session-date-stack__card--active {
  display: block;
}

/* Fake stack depth: subtle shadow behind active card */
.session-date-stack .session-date-stack__cards::after {
  content: '';
  position: absolute;
  top: 4px;
  left: 4px;
  right: -4px;
  bottom: -4px;
  background: var(--color-elevated, #f5f5f5);
  border: 1px solid var(--color-border, #ddd);
  border-radius: 6px;
  z-index: -1;
  pointer-events: none;
}

/* Days badge: absolute top-right, doesn't affect card layout */
.session-date-stack__days-badge {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  z-index: 2;
  background: var(--color-info-bg, #e8f4fd);
  color: var(--color-info-text, #1565c0);
  border: 1px solid var(--color-info-border, #90caf9);
  border-radius: 1rem;
  padding: 0.15rem 0.6rem;
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.4;
}

/* Nav arrows: inside the card, at the bottom */
.session-date-stack__nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.4rem 0 0.25rem;
  position: relative;
  z-index: 2;
}

.session-date-stack__prev,
.session-date-stack__next {
  background: none;
  border: 1px solid var(--color-border, #ccc);
  border-radius: 50%;
  width: 24px;
  height: 24px;
  padding: 0;
  cursor: pointer;
  font-size: 1rem;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-link);
  transition: background-color 0.15s, color 0.15s;
}

.session-date-stack__prev:hover,
.session-date-stack__next:hover {
  background: var(--color-link);
  color: #fff;
  border-color: var(--color-link);
}

.session-date-stack__indicator {
  font-size: 0.8rem;
  color: var(--color-fg-muted);
  min-width: 3em;
  text-align: center;
}

/* Responsive */
@media (min-width: 768px) {
  .sse-sessions-list {
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  }
}

/* Capacity status indicators */
.capacity-info.full {
  color: var(--color-danger-fg);
}

.capacity-info.warning {
  color: var(--color-warning-fg);
}

.capacity-info.available {
  color: var(--color-success-fg);
}

/* ========================================
   Layout Builder Section Width Styles (UI Styles)
   ======================================== */

/*
 * These styles work with UI Styles module to allow choosing section width
 * in Layout Builder. Classes are applied to sections.
 *
 * Structure: .section--X > .layout > .layout__region > .block
 *
 * IMPORTANT: We must override Olivero's default constraints and its
 * .wide-content negative margin behavior.
 */

/* Reset Olivero's wide-content negative margins in Layout Builder context */
.layout-builder .wide-content,
.block--layout-builder .wide-content,
[class*="section--"] .wide-content,
.block-views .wide-content,
.views-element-container.wide-content {
  margin-inline-start: 0 !important;
  margin-inline-end: 0 !important;
  width: 100% !important;
}

/* Fix for views blocks in Layout Builder - prevent Olivero grid breakout */
.block-views,
.block-views-block-,
[class*="block-views-block"] {
  /* Reset any inherited negative margins */
  margin-inline: 0 !important;
}

/* Views element containers should not use Olivero's wide-content behavior */
.views-element-container {
  /* Reset negative margin behavior from Olivero */
  margin-inline-start: 0;
  margin-inline-end: 0;
}

/* Base section styles - ensure sections can expand */
.layout-builder__section,
.block--layout-builder {
  width: 100%;
}

/* ----------------------
   Full Width Section
   ---------------------- */
/* When applied to a Layout Builder section wrapper */
.layout-builder__section.section--full,
.layout.section--full {
  width: 100vw;
  max-width: 100vw;
  padding-left: 0;
  padding-right: 0;
}

.section--full .layout,
.section--full .layout__region,
.section--full .block {
  max-width: none !important;
  width: 100%;
}

/* …but block-level width classes must still cap + CENTER their content inside a
   full-width section — that's the whole point of "section full + block wide".
   The reset above (max-width:none!important) otherwise strips their cap, so the
   block spans full width and `margin:auto` has nothing to center against,
   making the content read as left-aligned. Restore the cap + centering with
   higher specificity (.block.<width> = (0,3,0) beats .section--full .block at
   (0,2,0)). */
.section--full .block.wide-content-block,
.section--full .wide-content-block {
  max-width: 1440px !important;
  margin-inline: auto !important;
}
.section--full .block.narrow-content-block,
.section--full .narrow-content-block {
  max-width: 800px !important;
  margin-inline: auto !important;
}

/* When applied directly to a block (via block wrapper styles) */
.block.section--full,
.block-layout-builder.section--full {
  /*
   * Full-bleed band, container-aligned content.
   *
   * The band itself spans the viewport (minus the scrollbar — plain 100vw is
   * wider than the client area and was causing horizontal page scroll), with
   * the matching negative margin so it starts at the left edge instead of at
   * its parent's content edge.
   *
   * Its *content* still has to line up with the rest of the page, otherwise a
   * block that breaks out of .container ends up flush against the screen edge
   * (the footer menu did exactly that). The padding therefore resolves to the
   * page gutter on narrow screens, and to "gutter + whatever .container is
   * inset by" once the viewport is wider than --max-width.
   */
  --sse-bleed: calc(100vw - var(--scrollbar-width, 0px));

  width: var(--sse-bleed) !important;
  max-width: var(--sse-bleed) !important;
  margin-inline: calc(50% - var(--sse-bleed) / 2) !important;
  padding-inline: max(
    var(--container-padding, 1.125rem),
    calc((var(--sse-bleed) - var(--max-width, 84.375rem)) / 2 + var(--container-padding, 1.125rem))
  );
}

/*
 * The site-branding block carries section--full, but the header's inner
 * .container is already full-width and manages its own gutter (which shrinks
 * in the sticky state). Breaking out of it only pinned the logo to the very
 * top-left corner, so keep this one block inside its container.
 */
.site-header .site-branding.section--full {
  width: 100% !important;
  max-width: 100% !important;
  margin-inline: 0 !important;
  padding-inline: 0;
}

/* Views containers inside full-width sections */
.section--full .views-element-container {
  max-width: none !important;
  margin-inline: 0 !important;
  width: 100%;
}

/* Views block with full-width directly applied */
.block-views.section--full .views-element-container,
.section--full.views-element-container {
  width: 100%;
}

/* ----------------------
   Wide Section (1440px)
   ---------------------- */
/* When applied to a section wrapper */
.layout-builder__section.section--wide,
.layout.section--wide {
  width: 100%;
  max-width: 100%;
}

.section--wide .layout {
  max-width: 1440px;
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--container-padding, 1rem);
  padding-right: var(--container-padding, 1rem);
}

.section--wide .layout__region {
  width: 100%;
}

/* When applied directly to a block */
.block.section--wide,
.block-layout-builder.section--wide {
  max-width: 1440px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  width: 100%;
}

/* Views containers inside wide sections */
.section--wide .views-element-container {
  margin-inline: 0 !important;
  width: 100%;
}

/* ----------------------
   Narrow Section (800px)
   ---------------------- */
/* When applied to a section wrapper */
.layout-builder__section.section--narrow,
.layout.section--narrow {
  width: 100%;
}

.section--narrow .layout {
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--container-padding, 1rem);
  padding-right: var(--container-padding, 1rem);
}

.section--narrow .layout__region {
  width: 100%;
}

/* When applied directly to a block */
.block.section--narrow,
.block-layout-builder.section--narrow {
  max-width: 800px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  width: 100%;
}

/* ----------------------
   Block-level width classes (for blocks inside any section)
   Applied by UI Styles to individual blocks
   ---------------------- */
.block.wide-content-block {
  max-width: 1440px;
  margin-left: auto;
  margin-right: auto;
}

.block.narrow-content-block {
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
}

.block.full-content-block {
  width: 100%;
}

/* ----------------------
   Generic width classes (UI Styles on any element)
   ---------------------- */
.section--wide {
  max-width: 1440px;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  padding-left: var(--container-padding, 1rem);
  padding-right: var(--container-padding, 1rem);
}

.section--narrow {
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  padding-left: var(--container-padding, 1rem);
  padding-right: var(--container-padding, 1rem);
}

.wide-content-block {
  max-width: 1440px;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
}

.narrow-content-block {
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
}

.full-content-block {
  width: 100%;
  max-width: none;
}

/* ----------------------
   Default Section (inherits container width)
   ---------------------- */
/* When applied to a section wrapper */
.layout-builder__section.section--default,
.layout.section--default,
.section--default {
  width: 100%;
  max-width: 100%;
}

.section--default .layout {
  max-width: var(--max-width, 1350px);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--container-padding, 1rem);
  padding-right: var(--container-padding, 1rem);
}

/* When applied directly to a block */
.block.section--default,
.block-layout-builder.section--default {
  max-width: var(--max-width, 1350px);
  margin-left: auto;
  margin-right: auto;
  width: 100%;
}

/* ----------------------
   Section Spacing Options
   ---------------------- */
.section--spacing-none {
  padding-block: 0;
}

.section--spacing-small {
  padding-block: var(--sp, 1rem);
}

.section--spacing-medium {
  padding-block: var(--sp2, 2rem);
}

.section--spacing-large {
  padding-block: var(--sp4, 4rem);
}

/* Block default class (no-op, inherits from section) */
.block--default {
  /* Intentionally empty - inherits section behavior */
}

/* 1) Scale the logo image. Olivero's markup uses .site-branding__logo img */
.site-branding__logo img {
  /* Use one of these patterns; clamp() is safest across breakpoints */
  max-height: clamp(48px, 8vw, 96px);
  height: auto;
  width: auto;
}

/* Splide Slider Fixes */
.splide__slider {
  min-height: 200px;
}

.splide__track {
  overflow: hidden;
}

.splide__list {
  display: flex !important;
}

.splide__slide {
  min-height: 150px;
  flex-shrink: 0;
}

/* Ensure node content renders properly in slides */
.splide__slide .node--view-mode-teaser {
  height: 100%;
  width: 100%;
}

.splide__slide .node__content {
  display: block;
}

/* Ensure session teasers and all fields are visible in slider */
.splide__slide .sse-session-teaser {
  display: block;
  height: 100%;
}

.splide__slide .field {
  display: block;
}

/* Ensure inline styles don't hide content */
.splide__slide[style] {
  display: block !important;
}

/* Single-item carousels: respect the grid columns.
   When a Splide view has only one slide, the contrib module's unsplide() reset
   (count < 2) clamps the base perPage to 1 but leaves the breakpoints at
   perPage 2/3. Combined with mediaQuery:max this makes the lone slide span the
   full track width on desktop (looks enormous) while the tablet breakpoint
   still shows it at half width. Cap the lone slide to one column on >= tablet
   so it lines up with a populated row instead of stretching full-bleed.
   Scoped to :only-child so multi-slide carousels (which get correct per-page
   widths) are never affected. Column math mirrors the optionset gap (36px). */
@media (min-width: 992px) {
  .splide__list > .splide__slide:only-child {
    max-width: calc((100% - 2 * 36px) / 3) !important;
  }
}
@media (min-width: 769px) and (max-width: 991px) {
  .splide__list > .splide__slide:only-child {
    max-width: calc((100% - 1rem) / 2) !important;
  }
}

/* /lieu index — grid of location cards. */
.sse-locations-index {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: var(--sp2, 16px);
  max-width: var(--max-width, 1350px);
  margin-inline: auto;
  padding-inline: 24px;
}
.sse-location-card {
  padding: 16px 18px;
  border: 1px solid var(--color-border, #444);
  border-radius: var(--radius-lg, 12px);
  background: var(--sse-card-body, transparent);
  transition: border-color var(--transition-base), box-shadow var(--transition-base);
}
.sse-location-card:hover {
  border-color: var(--color-link);
  box-shadow: var(--shadow-sm);
}
.sse-location-card__title {
  font-weight: var(--font-weight-semibold, 600);
  font-size: var(--font-size-l, 18px);
  text-decoration: none;
}
.sse-location-card__addr {
  margin: 6px 0 0;
  font-size: var(--font-size-s, 14px);
  color: var(--color-fg-subtle, #999);
}

/* "Actions à ce lieu" section on sse_location term pages — constrain to the
   page container width (the embedded actions view otherwise spans full width). */
.sse-location-related-actions {
  max-width: var(--max-width, 1350px);
  margin-inline: auto;
  padding-inline: 24px;
  margin-block: var(--sp3, 32px);
}
.sse-location-related-actions__title {
  margin-block-end: var(--sp2, 16px);
}

/* Better Exposed Filters - Checkboxes styling */
.bef-checkboxes .form-item {
  margin-bottom: 0.5rem;
}

.bef-checkboxes input[type="checkbox"] {
  margin-right: 0.5rem;
}

.bef-checkboxes label {
  display: inline;
  font-weight: normal;
}

/* Thematique Cards - Using SDC card component with Views Grid Responsive Display */
/* The grid_responsive plugin handles the grid layout via inline styles */
/* We style the SDC card component with subtle hover effects */

/* Style the card component inside grid items - matching the sessions list hover effect */
.view-sse-thematiques-cards .card {
  height: 100%;
  transition: box-shadow 0.3s ease, transform 0.3s ease;

  /* Force vertical layout for thematique cards - prevent container query issues */
  container-type: normal !important;
}

/* Force vertical layout for all thematique cards */
.view-sse-thematiques-cards .card__inner {
  flex-direction: column !important;
}

/* Ensure card__content fills properly in vertical layout */
.view-sse-thematiques-cards .card__content {
  flex: 1 !important;
  display: flex !important;
  flex-direction: column !important;
}

/* Ensure images are auto height in vertical layout */
.view-sse-thematiques-cards .card__image img {
  height: auto !important;
  transition: opacity 0.3s ease;
}

.view-sse-thematiques-cards .card:hover {
  box-shadow: 0 4px 12px color-mix(in oklab, var(--color-fg) 15%, transparent);
  transform: translateY(-2px);
}

.view-sse-thematiques-cards .card:hover .card__image img {
  opacity: 0.9;
}

/* Ensure card title link inherits proper styling */
.view-sse-thematiques-cards .card__title a {
  color: inherit;
  text-decoration: none;
}

.view-sse-thematiques-cards .card__title a:hover {
  text-decoration: underline;
}

/* ======================================
   Highlight view mode (node--*--highlight)
   Grid: 1/3 image | 2/3 content
   ====================================== */

.sse-highlight {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl, 15px);
  overflow: hidden;
  background-color: var(--sse-card-body);
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--transition-base);
}

.sse-highlight:hover {
  box-shadow: var(--shadow-card-hover);
}

.sse-highlight__title {
  margin: 0;
  font-size: var(--font-size-xl, 24px);
  font-weight: var(--font-weight-bold, 700);
  line-height: var(--line-height-snug, 1.4);
}

.sse-highlight__title a {
  color: var(--color-fg);
  text-decoration: none;
  background-image: none; /* opt out of the global animated underline */
}

.sse-highlight__title a:hover {
  color: var(--color-link);
}

/* 1/3 – 2/3 grid layout */
.sse-highlight__layout {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 0;
  align-items: stretch;
}

@media (max-width: 48rem) {
  .sse-highlight__layout {
    grid-template-columns: 1fr;
  }
}

/* Image column */
.sse-highlight__image {
  overflow: hidden;
  min-height: 160px;
}

.sse-highlight__image a {
  display: block;
  height: 100%;
}

.sse-highlight__image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  aspect-ratio: 4 / 3;
}

.sse-highlight__image--default {
  opacity: 0.5;
  background-color: var(--color-elevated);
  padding: 1.5rem;
  object-fit: contain !important;
}

/* Content column */
.sse-highlight__body {
  padding: var(--sp1-5) var(--sp2);
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.sse-highlight__excerpt {
  font-size: var(--font-size-base, 16px);
  line-height: var(--line-height-base, 1.6);
  color: var(--color-fg-muted);
  /* truncate if over 4 lines */
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.sse-highlight__dates {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: var(--font-size-s, 14px);
  color: var(--color-fg-muted);
  font-weight: var(--font-weight-semibold, 600);
}

/* Actions list (sse_event only) */
.sse-highlight__actions {
  font-size: 0.875rem;
}

.sse-highlight__actions-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.sse-highlight__actions-list li::before {
  content: "→ ";
  color: var(--color-link);
}

.sse-highlight__actions-list a {
  color: var(--color-link);
  text-decoration: none;
}

.sse-highlight__actions-list a:hover {
  text-decoration: underline;
}

.sse-highlight__link {
  margin-top: auto;
  padding-top: 0.25rem;
}

/* Stack of highlight cards in the block (plain div container, no ul) */
.sse-featured-actions {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

/* ════════════════════════════════════════════════════════════════════
   sse_platform:card + badge — DS styling mirrored into the theme's global
   stylesheet. The module's SDC component libraries do not reliably attach
   through the views render cache, so the canonical look is guaranteed here.
   ════════════════════════════════════════════════════════════════════ */
.sse-card {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--color-surface);
  color: var(--color-fg);
  border-radius: var(--radius-xl, 15px);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  font-family: var(--font-sans);
  transition: background-color var(--transition-base), box-shadow var(--transition-base), transform var(--transition-base);
}
.sse-card--clickable:hover {
  background: var(--color-elevated);
  box-shadow: var(--shadow-card-hover);
  transform: translateY(-2px);
}

/* Cover image — fixed 16/10 ratio so it never blows up inside the carousel */
.sse-card__image {
  display: block;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  pointer-events: none;
}
.sse-card__image img,
.sse-card__illustration {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Brand-gradient cover fallback when the card has no image */
.sse-card--clickable:not(:has(.sse-card__image)) .sse-card__header::before {
  content: "";
  display: block;
  margin: calc(-1 * var(--sp1-5)) calc(-1 * var(--sp)) var(--sp1-5);
  aspect-ratio: 16 / 10;
  background: linear-gradient(135deg, var(--brand-500), var(--brand-800));
}

.sse-card__header {
  display: flex;
  flex-direction: column;
  gap: var(--sp0-5);
  padding: var(--sp1-5) var(--sp) 0;
}
.sse-card__content {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  flex: 1;
  padding: var(--sp0-5) var(--sp) var(--sp1-5);
  font-size: var(--font-size-s);
  color: var(--color-fg-muted);
}

.sse-card__pretitle {
  font-size: var(--font-size-xxs);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--letter-spacing-caps);
  text-transform: uppercase;
  color: var(--color-fg);
}
.sse-card__title {
  margin: 0;
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-snug);
}
.sse-card__title a {
  color: var(--color-fg);
  text-decoration: none;
  background-image: none;
}
.sse-card--clickable .sse-card__title a::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}
.sse-card__subtitle {
  font-size: var(--font-size-s);
  color: var(--color-fg-muted);
  letter-spacing: var(--letter-spacing-wide);
}

.sse-card .session-registration,
.sse-card .action-upcoming-info {
  margin: 0;
}
.sse-card .session-registration {
  margin-top: auto;
  padding-top: 0.4rem;
}

/* Corner CTA arrow — only when the card has no explicit button */
.sse-card__cta {
  position: absolute;
  inset-block-end: 0;
  inset-inline-end: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--sp2);
  height: var(--sp2);
  background: var(--color-link);
  color: var(--color-bg);
  font-size: 1rem;
  line-height: 1;
  pointer-events: none;
}
.sse-card--cta-button .sse-card__cta {
  display: none;
}
.sse-card--cta-button .sse-card__content a,
.sse-card--cta-button .sse-card__content .button {
  position: relative;
  z-index: 2;
}

/* Session-teaser lighter variant */
.sse-card.sse-session-teaser {
  border: 1px solid var(--color-border);
  border-inline-start: var(--border-width-accent, 3px) solid var(--color-link);
  border-radius: var(--radius-lg, 8px);
}

/* Badge (mirrors components/badge/css/badge.css) */
.sse-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.25rem 0.75rem;
  border-radius: var(--radius-pill, 999px);
  border: 1px solid transparent;
  font-family: var(--font-sans);
  font-size: var(--font-size-s, 14px);
  font-weight: var(--font-weight-semibold, 600);
  line-height: 1.4;
  white-space: nowrap;
}
.sse-badge--sm { padding: 0.1rem 0.5rem; font-size: var(--font-size-xxs, 12px); }
.sse-badge--lg { font-size: var(--font-size-l, 18px); }
.sse-badge--uppercase { text-transform: uppercase; letter-spacing: 0.03em; }
.sse-badge--default { background: var(--color-surface); color: var(--color-fg); border-color: var(--color-border); }
.sse-badge--success { background: var(--color-success-bg); color: var(--color-success-fg); }
.sse-badge--info { background: var(--color-info-bg); color: var(--color-info-fg); }
.sse-badge--warning { background: var(--color-warning-bg); color: var(--color-warning-fg); }
.sse-badge--danger { background: var(--color-danger-bg); color: var(--color-danger-fg); }
.sse-badge--action { background: var(--color-link); color: var(--color-bg); }

} /* End @layer components */

/* ════════════════════════════════════════════════════════════════════
   The blocks below are intentionally UNLAYERED: FullCalendar ships its CSS
   outside any cascade layer, so layered overrides would lose to it.
   ════════════════════════════════════════════════════════════════════ */

/* ════════════════════════════════════════════════════════════════════
   FullCalendar v4 — DS month grid + event pills.
   (This site loads @fullcalendar v4.4.2, so selectors use v4 class names:
   .fc-day-header / .fc-day-number / .fc-day-grid-event / .fc-time / .fc-title.)
   ════════════════════════════════════════════════════════════════════ */

/* Column header (day names) */
.fc .fc-day-header {
  background: var(--color-elevated);
  padding: 9px 0;
  border-color: var(--color-border);
}
.fc .fc-day-header > span,
.fc .fc-day-header > a {
  text-transform: uppercase;
  font-size: var(--font-size-xxs);
  font-weight: var(--font-weight-bold);
  letter-spacing: 1px;
  color: var(--color-fg-muted);
  text-decoration: none;
}

/* Day numbers */
.fc .fc-day-number {
  padding: 6px 8px;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  color: var(--color-fg-muted);
  text-decoration: none;
}

/* Today highlight + grid borders */
.fc .fc-day.fc-today,
.fc .fc-day-top.fc-today {
  background: color-mix(in oklab, var(--color-link) 7%, transparent);
}
.fc-unthemed td,
.fc-unthemed th {
  border-color: var(--color-border);
}

/* Event pills */
.fc .fc-day-grid-event {
  margin: 2px 6px 1px;
  padding: 0;
  border: none;
  border-radius: 5px;
  overflow: hidden;
}
.fc .fc-event,
.fc .fc-event:hover {
  color: #fff;
  text-decoration: none;
}
.fc .fc-event .fc-content {
  display: flex;
  gap: 5px;
  align-items: baseline;
  padding: 3px 8px;
}
.fc .fc-event .fc-time {
  flex: none;
  font-weight: var(--font-weight-bold);
  font-size: 11.5px;
}
.fc .fc-event .fc-title {
  font-size: 11.5px;
  font-weight: var(--font-weight-semibold);
  line-height: 1.25;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ════════════════════════════════════════════════════════════════════
   Thématiques cards — keep the real illustration but add a brand gradient
   overlay (subtle blue tint + bottom scrim) for a polished, unified look.
   ════════════════════════════════════════════════════════════════════ */
.view-id-sse_thematiques_cards .card__image {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
}
.view-id-sse_thematiques_cards .card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.view-id-sse_thematiques_cards .card__image::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, transparent 45%, color-mix(in oklab, var(--neutral-950) 35%, transparent) 100%),
    linear-gradient(135deg, color-mix(in oklab, var(--brand-500) 22%, transparent), transparent 55%);
  pointer-events: none;
}

/* ════════════════════════════════════════════════════════════════════
   Capacity progress bar (DS) — reusable: registered / capacity.
   Track = elevated pill, fill = brand width %, danger when full.
   ════════════════════════════════════════════════════════════════════ */
.sse-capacity-bar {
  height: 8px;
  margin-top: 4px;
  border-radius: var(--radius-pill, 999px);
  background: var(--color-elevated);
  overflow: hidden;
}
.sse-capacity-bar__fill {
  height: 100%;
  border-radius: var(--radius-pill, 999px);
  background: var(--color-link);
  transition: width var(--transition-slow, 0.3s ease);
}
.sse-capacity-bar.is-full .sse-capacity-bar__fill {
  background: var(--color-danger-fg);
}

/* ════════════════════════════════════════════════════════════════════
   Thématique (taxonomy term) page — DS hero band + actions grid.
   Hero is a flat brand gradient band with an eyebrow, the term name and its
   description (no image). The tagged actions render below as a 3-up card grid
   with a type-filter pill bar. The default page-title block is hidden — the
   hero carries the title.
   ════════════════════════════════════════════════════════════════════ */
.path-taxonomy .block-page-title-block {
  display: none;
}

.sse-thematique__hero {
  /* Full-bleed background: break out of the content container edge-to-edge. */
  width: 100vw;
  margin-inline: calc(50% - 50vw);
  margin-block: 0 var(--sp2);
  padding-block: 48px;
  padding-inline: var(--sp2);
  border-radius: 0;
  background: linear-gradient(135deg, var(--brand-600), var(--brand-900));
  color: #fff;
}
.sse-thematique__hero-inner {
  /* Inner content constrained to the wide width, centered. */
  max-width: var(--max-width-wide, 1440px);
  margin-inline: auto;
}
.sse-thematique__eyebrow {
  margin: 0 0 0.5rem;
  font-size: var(--font-size-xxs, 12px);
  font-weight: var(--font-weight-bold, 700);
  letter-spacing: var(--letter-spacing-caps, 2.4px);
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.85);
}
.sse-thematique__title {
  margin: 0;
  color: #fff;
  font-size: var(--font-size-3xl, 36px);
  font-weight: var(--font-weight-black, 800);
  line-height: var(--line-height-tight, 1.2);
  letter-spacing: -0.015em;
}
.sse-thematique__intro {
  margin-top: 0.75rem;
  font-size: var(--font-size-l, 18px);
  line-height: var(--line-height-base, 1.6);
  color: rgba(255, 255, 255, 0.9);
}
.sse-thematique__intro :is(p, a) {
  color: inherit;
}

/* Actions section (rendered by the taxonomy_term view) */
.sse-thematique-actions__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 0.75rem;
}
.sse-thematique-actions__title {
  margin: 0;
  font-size: var(--font-size-2xl, 28px);
  font-weight: var(--font-weight-bold, 700);
}
.sse-thematique-actions__count {
  font-size: var(--font-size-s, 14px);
  color: var(--color-fg-muted);
}

/* Type-filter pills */
.sse-thematique-actions__filter {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: var(--sp1-5);
}
.sse-type-pill {
  padding: 6px 16px;
  border: 1px solid var(--color-border-dark);
  border-radius: var(--radius-pill, 999px);
  background: var(--color-bg);
  color: var(--color-fg);
  font-family: var(--font-sans);
  font-size: var(--font-size-xs, 13px);
  font-weight: var(--font-weight-semibold, 600);
  cursor: pointer;
  transition: background-color var(--transition-base), color var(--transition-base), border-color var(--transition-base);
}
.sse-type-pill:hover {
  border-color: var(--color-link);
  color: var(--color-link);
}
.sse-type-pill.is-active {
  background: var(--color-link);
  border-color: var(--color-link);
  color: var(--color-bg);
}
.sse-type-pill:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
}

/* 3-up responsive card grid — shared by the thematic listing and the
   public /actions listing (sse_actions_listing view). */
.sse-thematique-actions__grid,
.sse-actions-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp2);
}
.sse-thematique-actions__grid .views-row,
.sse-actions-grid .views-row {
  min-width: 0;
}
@media (max-width: 900px) {
  .sse-thematique-actions__grid,
  .sse-actions-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 600px) {
  .sse-thematique-actions__grid,
  .sse-actions-grid {
    grid-template-columns: 1fr;
  }
}

/* ════════════════════════════════════════════════════════════════════
   Actions (/actions) & Events (/evenements) listings — full-bleed brand hero
   for the page title, for UI parity with action/event node pages and thematic
   pages, plus a tightened filter → grid rhythm.
   ════════════════════════════════════════════════════════════════════ */
/* The full-bleed banner is blocked at two levels by the ui_styles width
   system, both of which we must neutralise on /actions:

   1. The highlighted REGION itself carries `section--wide`, whose generic rule
      caps it at 1440px and centers it — so everything inside (incl. the title
      block) is trapped in a 1440px box. Uncap the region so its block can
      bleed. (The other child, the messages block, stays centered via its own
      grid-column placement.)
   2. The page-title BLOCK also carries `section--wide`, with !important caps:
        .block.section--wide { max-width:1440px!important; margin-inline:auto!important }
      Defeat those with our own !important (the .section--wide in the selector
      raises specificity to (0,3,0) to beat .block.section--wide at (0,2,0)),
      and span all grid columns (grid-column: 1 / -1) so the bleed starts at
      the region's left edge instead of overflowing right. */
/* The breadcrumb is the only real child of .region--hero, but BigPipe appends
   a placeholder after it, so it loses :last-child — Olivero's
   `.region--hero > *:last-child { margin-block-end: 0 }` then targets the
   placeholder, and the breadcrumb keeps the generic `.region > * {
   margin-block-end: var(--sp3) }`, leaving a large gap before the hero band.
   Zero it on these pages so the hero sits tight under the breadcrumb. */
/* Target the breadcrumb BLOCK directly (not via .region--hero) — its placement
   region differs across environments (region--hero locally, region--breadcrumb
   on preprod), so a region-scoped selector misses. The block class is stable.
   (0,2,0) beats Olivero's `.region > *` (0,1,0) that adds the --sp3 margin. */
.path-actions .block-system-breadcrumb-block,
.path-evenements .block-system-breadcrumb-block,
.page-node-type-page .block-system-breadcrumb-block,
.page-node-type-sse-action .block-system-breadcrumb-block,
.page-node-type-sse-event .block-system-breadcrumb-block,
.page-node-type-sse-session .block-system-breadcrumb-block {
  margin-block-end: 0;
}

/* Listing hero, converged on the front-page pattern: the page-title block
   becomes a full-bleed brand band, and its title is centered at 1440 by the
   `wide-content-block section--wide` inner wrapper (block--sse-theme-page-title)
   — the SAME inner container the front-page hero uses. So all heroes now align
   their content identically; only the band wrapper differs (LB section--full on
   the front page, this region block on the listings). */
/* Uncap the region so the block can bleed edge-to-edge (band is on the block). */
.path-actions .region--highlighted.section--wide,
.path-evenements .region--highlighted.section--wide,
.page-node-type-page .region--highlighted.section--wide {
  max-width: none !important;
  margin-inline: 0;
  padding-inline: 0;
}
/* Must live in @layer components: the ui_styles `.block.section--wide`
   (max-width:1440!important, margin:auto!important) is inside that layer, and a
   layered !important beats an unlayered one regardless of specificity. Inside
   the same layer our higher specificity (0,3,0 > 0,2,0) wins, so the band
   bleeds full width instead of capping at 1440. See css-layer-important-override. */
@layer components {
  .path-actions .block-page-title-block.section--wide,
  .path-evenements .block-page-title-block.section--wide,
  .page-node-type-page .block-page-title-block.section--wide {
    grid-column: 1 / -1;
    width: 100vw;
    max-width: none !important;
    margin-inline: calc(50% - 50vw) !important;
    margin-block: 0 var(--sp2);
    padding-block: clamp(40px, 6vw, 64px);
    background: linear-gradient(135deg, var(--brand-700), var(--brand-900));
  }
}
/* The inner .wide-content-block.section--wide handles the 1440 cap + centering
   + horizontal padding, so the H1 itself only carries typography. */
.path-actions .block-page-title-block .page-title,
.path-evenements .block-page-title-block .page-title,
.page-node-type-page .block-page-title-block .page-title {
  margin: 0;
  font-size: clamp(30px, 4.5vw, 44px);
  font-weight: var(--font-weight-black, 800);
  line-height: var(--line-height-tight, 1.15);
  letter-spacing: -0.015em;
}
/* Force white title on the brand band (mirror the .sse-hero technique:
   olivero-overrides forces .layout-container h1 to --color-fg !important
   inside @layer base at (1,2,1); two :not(#…) bumps push this to (2,2,1)). */
@layer base {
  .path-actions .block-page-title-block .page-title:not(#no):not(#no),
  .path-evenements .block-page-title-block .page-title:not(#no):not(#no),
  .page-node-type-page .block-page-title-block .page-title:not(#no):not(#no) {
    color: #fff !important;
  }
}

/* Collapse the gap between the exposed filter and the card grid. The
   autosubmit "Filtrer" button is JS-hidden but its .form-actions wrapper
   still reserves space; Olivero's form rhythm also adds vertical margins.
   Zero the form rhythm and set a single controlled gap below the filter. */
.view-id-sse_actions_listing .views-exposed-form .form-actions {
  display: none;
}
.view-id-sse_actions_listing .views-exposed-form,
.view-id-sse_actions_listing .views-exposed-form .form-item,
.view-id-sse_actions_listing .views-exposed-form fieldset {
  margin-block: 0;
}
.view-id-sse_actions_listing .view-filters {
  margin-block: 0 var(--sp2);
}
.view-id-sse_actions_listing .view-content {
  margin-block-start: 0;
}

/* ════════════════════════════════════════════════════════════════════
   Action card backgrounds — UNLAYERED restatement.
   On node card view (taxonomy listings, Layout Builder), unlayered Olivero/LB
   rules strip the card's surface fill and override the cover gradient. Because
   important/normal unlayered styles beat @layer components, the DS backgrounds
   must be restated here, unlayered + with extra specificity, to win.
   ════════════════════════════════════════════════════════════════════ */
.sse-action.sse-action-card {
  background: var(--sse-card-body);
  border-radius: var(--radius-xl, 15px);
  overflow: hidden;
}
.sse-action-card .sse-action-card__cover {
  background: linear-gradient(135deg, var(--brand-500), var(--brand-800));
}
.sse-action-card .sse-action-card__body {
  background: var(--sse-card-body);
}
/* Card title size — UNLAYERED restatement. The title is an <h2>, and the
   <h2>/typography sizing is unlayered, which beats the layered
   .sse-action-card__title rule (unlayered normal > layered normal). Restate
   unlayered + specific so 18px wins on the listings (the slider title is an
   <h3> and already reads fine). */
.sse-action.sse-action-card .sse-action-card__title {
  font-size: var(--font-size-l);
  line-height: var(--line-height-snug);
}

/* Highlight card (sse_event / featured-actions block) — same UNLAYERED
   restatement: the @layer background is stripped by unlayered Olivero/LB,
   leaving the 2/3 body column on the bare page. Restate the surface fill on
   the article and its body column, unlayered + specific, so it wins. */
.sse-featured-actions .sse-highlight,
.sse-event.sse-highlight,
.sse-action.sse-highlight {
  background-color: var(--sse-card-body);
  border-radius: var(--radius-xl, 15px);
  overflow: hidden;
}
.sse-highlight .sse-highlight__body {
  background-color: var(--sse-card-body);
}

/* ════════════════════════════════════════════════════════════════════
   Card bodies — visible fill that contrasts with the page.
   The light surface tokens are ≈ white, so card bodies read as white-on-white.
   --sse-card-body is a clear grey in light mode and the elevated panel in dark
   (defined per-mode in tokens.css). Unlayered + specific so it wins over the
   theme/SDC card.css surface fills and the unlayered Olivero/LB rules.
   ════════════════════════════════════════════════════════════════════ */
.sse-card,
.sse-card .sse-card__content,
.card .card__content,
.view-id-sse_thematiques_cards .card,
.view-id-sse_thematiques_cards .card .card__content {
  background-color: var(--sse-card-body);
}
.view-id-sse_thematiques_cards .card {
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-sm);
}

/* ════════════════════════════════════════════════════════════════════
   Action / Event full-page hero (DS) — full-bleed brand band carrying the
   title, badges, intro (body summary) and CTAs, followed by info chips and
   the content/sessions in the white area. Mirrors the design-system
   reference (doc/SSE-Design-System/.../FormationLanding.dc.html) and reuses
   the thématique hero full-bleed technique. The default page-title block is
   hidden — the hero carries the H1.
   ════════════════════════════════════════════════════════════════════ */
.page-node-type-sse-action .block-page-title-block,
.page-node-type-sse-event .block-page-title-block,
.page-node-type-sse-session .block-page-title-block {
  display: none;
}

.sse-hero {
  /* Full-bleed: break out of the content container edge-to-edge. 100vw counts
     the scrollbar, so subtract it — otherwise the band is a few px wider than
     the client area and the whole page gains a horizontal scrollbar. */
  --sse-bleed: calc(100vw - var(--scrollbar-width, 0px));
  width: var(--sse-bleed);
  margin-inline: calc(50% - var(--sse-bleed) / 2);
  margin-block: 0 var(--sp2);
  padding-block: clamp(40px, 6vw, 64px);
  padding-inline: var(--sp2);
  border-radius: 0;
  background: linear-gradient(135deg, var(--brand-700), var(--brand-900));
  color: #fff;
}
.sse-hero__inner {
  max-width: var(--max-width, 1350px);
  margin-inline: auto;
}

/* Two-column hero when an illustration is present: text left, image right. */
.sse-hero--has-media .sse-hero__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: center;
}
@media (min-width: 900px) {
  .sse-hero--has-media .sse-hero__inner {
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  }
}
.sse-hero__media {
  justify-self: center;
  width: 100%;
  max-width: 420px;
}
@media (min-width: 900px) {
  .sse-hero__media {
    justify-self: end;
    max-width: none;
  }
}
/* width:100% + height:auto so the <img> box always matches the rendered image
   — no object-fit letterboxing, so the border-radius hugs the visible image at
   every breakpoint (contain left rounded corners on the transparent box edges). */
.sse-hero__media img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-xl, 15px);
}
/* Single-column (mobile): show the illustration above the text. The desktop
   two-column layout (≥900px) keeps source order — text left, image right. */
@media (max-width: 899px) {
  .sse-hero--has-media .sse-hero__media {
    order: -1;
  }
}

/* Force white text on the brand band. olivero-overrides.css forces all
   ".layout-container h1…" to var(--color-fg) !important from inside @layer base,
   at specificity (1,2,1) (its :not(#toolbar-administration *) injects an id).
   A layered !important beats any unlayered !important regardless of specificity,
   so this override must live in the SAME layer and exceed (1,2,1) — the two
   :not(#…) bumps push it to (2,2,1). The hero is always a dark gradient, so
   white text is required here. */
@layer base {
  .sse-hero .sse-hero__inner :is(h1, h2, h3, p, li, strong, a):not(#no):not(#no) {
    color: #fff !important;
  }
}
.sse-hero__badges {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 18px;
}
.sse-hero__title {
  margin: 0 0 14px;
  max-width: 20ch;
  color: #fff;
  font-size: clamp(30px, 4.5vw, 44px);
  font-weight: var(--font-weight-black, 800);
  line-height: var(--line-height-tight, 1.15);
  letter-spacing: -0.015em;
}

/* Eyebrow (e.g. "Séance") above the hero title. */
.sse-hero__eyebrow {
  margin: 0 0 0.5rem;
  font-size: var(--font-size-xxs, 12px);
  font-weight: var(--font-weight-bold, 700);
  letter-spacing: var(--letter-spacing-caps, 2.4px);
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.85);
}

/* Parent-action recap chip inside the session hero — a frosted pill linking
   back to the action, carrying its type badge, title and thematic. */
.sse-hero__action-recap {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 4px;
  padding: 8px 14px;
  border-radius: var(--radius-pill, 999px);
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.28);
  color: #fff;
  text-decoration: none;
  background-image: none; /* opt out of the global animated underline */
  transition: background-color var(--transition-base);
}
.sse-hero__action-recap:hover {
  background: rgba(255, 255, 255, 0.24);
}
.sse-hero__action-recap-label {
  font-size: var(--font-size-xxs, 12px);
  font-weight: var(--font-weight-bold, 700);
  letter-spacing: var(--letter-spacing-caps, 1.5px);
  text-transform: uppercase;
  opacity: 0.85;
}
.sse-hero__action-recap-title {
  font-weight: var(--font-weight-semibold, 600);
}
.sse-hero__action-recap-thematic {
  opacity: 0.85;
}
.sse-hero__action-recap-arrow {
  font-weight: 700;
}

/* Date/time echoed in the session hero — the key info, surfaced prominently. */
.sse-hero__datetime {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 18px 0 0;
  font-size: clamp(20px, 2.6vw, 26px);
  font-weight: var(--font-weight-bold, 700);
  line-height: var(--line-height-tight, 1.15);
  color: #fff;
}
.sse-hero__datetime-icon {
  font-size: 0.9em;
  line-height: 1;
}

/* Prev/next arrows flanking the hero date — cycle through the parent action's
   sessions (chronological, wraps around) without leaving the hero. */
.sse-hero__datetime-nav {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 18px;
}
.sse-hero__datetime-nav .sse-hero__datetime {
  margin: 0;
  min-width: 0; /* allow the date to shrink between the arrows */
}
.sse-hero__datetime-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-pill, 999px);
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.28);
  color: #fff;
  font-size: 24px;
  line-height: 1;
  text-decoration: none;
  background-image: none; /* opt out of the global animated underline */
  transition: background-color var(--transition-base), transform var(--transition-base);
}
.sse-hero__datetime-arrow:hover,
.sse-hero__datetime-arrow:focus-visible {
  background: rgba(255, 255, 255, 0.28);
  transform: scale(1.06);
}
.sse-hero__datetime-arrow > span {
  display: block;
  margin-top: -2px; /* optical centering of the chevron glyph */
}
.sse-hero__datetime-counter {
  margin: 8px 0 0;
  font-size: var(--font-size-s, 14px);
  font-weight: var(--font-weight-semibold, 600);
  letter-spacing: 0.02em;
  color: rgba(255, 255, 255, 0.75);
}

/* Session hero echoes the parent action's illustration, but smaller than the
   action page's own hero media (text keeps the lead). */
.sse-hero--session-media .sse-hero__media {
  max-width: 300px;
}
@media (min-width: 900px) {
  .sse-hero--session-media .sse-hero__inner {
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  }
  .sse-hero--session-media .sse-hero__media {
    max-width: 260px;
  }
}

.sse-hero__intro {
  margin: 0 0 28px;
  max-width: 60ch;
  color: rgba(255, 255, 255, 0.85);
  font-size: var(--font-size-l, 18px);
  line-height: var(--line-height-base, 1.6);
}
.sse-hero__intro :is(p, ul, ol) {
  margin: 0 0 0.6em;
}
.sse-hero__intro :last-child {
  margin-bottom: 0;
}
.sse-hero__cta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
/* The hero sits on a dark brand band, so the secondary button's surface
   colours need to read against it (the base variant is tuned for white). */
.sse-hero .button--secondary {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.6);
  background: transparent;
}
.sse-hero .button--secondary:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: #fff;
}

/* Info chips — date/duration/location/next meta in the white area. */
.sse-infochips {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-block: 0 var(--sp2);
}
.sse-infochip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  background: var(--color-elevated);
  color: var(--color-fg);
  font-size: 15px;
  line-height: 1.3;
}
.sse-infochip__icon {
  font-size: 1.05em;
  line-height: 1;
}
.sse-infochip--next {
  border-inline-start: 3px solid var(--color-link);
}
.sse-infochip--alt-locations {
  background: transparent;
  border-style: dashed;
  color: var(--color-fg-muted);
}

/* Anchor targets clear the sticky header (html scroll-padding-top also set). */
#sessions,
#actions {
  scroll-margin-top: calc(var(--sticky-offset, 0px) + 16px);
}

/* Description block spacing in the white area. */
.sse-action__description,
.sse-event__description {
  margin-block: 0 var(--sp2);
}

/* ════════════════════════════════════════════════════════════════════
   Breadcrumb on mobile (< Olivero's 1000px desktop breakpoint).
   Full trails (Accueil › Actions › [long action title] › [current page])
   cannot fit on a phone: Olivero's default nowrap strip hides crumbs behind a
   white scroll-fade smudge, and letting them wrap produces an ugly stacked
   block. Instead we collapse the whole trail to a single "back to parent"
   link — the standard mobile pattern — showing only the immediate parent crumb
   (second-to-last) prefixed with a ‹ chevron. The full trail still renders on
   desktop (≥1000px). Unlayered so it beats core Olivero's unlayered base rules.
   ════════════════════════════════════════════════════════════════════ */
@media (max-width: 999px) {
  .breadcrumb {
    position: static;
  }
  /* Remove the white right-edge scroll fade. */
  .breadcrumb::after {
    content: none !important;
  }
  .breadcrumb__content {
    overflow: visible;
    margin: 0;
    padding-block: 0.5rem;
    /* Zeroing this (to drop Olivero's own offsets) also dropped the page
       gutter, so the ‹ chevron sat flush against the screen edge. Restore the
       same gutter the rest of the page uses. */
    padding-inline: var(--container-padding, 1.125rem);
  }
  .breadcrumb__list {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    width: auto;
    overflow: visible;
    margin-inline: 0;
    padding-block-end: 0;
    padding-inline: 0;
    white-space: normal;
  }

  /* Hide every crumb… */
  .breadcrumb__item {
    display: none !important;
  }
  /* …except the immediate parent (second-to-last), shown as the back link. */
  .breadcrumb__item:nth-last-child(2) {
    display: flex !important;
    align-items: center;
    min-width: 0;
    margin-inline: 0;
  }
  /* Repurpose Olivero's separator pseudo into a left-pointing ‹ back chevron
     (Olivero draws a top+right border square rotated 45° → points right; +180°
     flips it to point left). Set explicitly so it also appears when the parent
     is the first crumb (2-item trail), where Olivero draws no separator. */
  .breadcrumb__item:nth-last-child(2)::before {
    display: inline-block !important;
    flex: 0 0 auto;
    width: 0.5rem;
    height: 0.5rem;
    margin: 0 0.55rem 0 0 !important;
    content: "" !important;
    transform: rotate(-135deg);
    border-block-start: 2px solid currentColor;
    border-inline-end: 2px solid currentColor;
    border-inline-start: 0;
    border-block-end: 0;
  }
  /* Long parent titles truncate with ellipsis rather than overflow the row. */
  .breadcrumb__item:nth-last-child(2) .breadcrumb__link {
    display: block;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
}


/* ════════════════════════════════════════════════════════════════════
   Session full page — mobile refinements (≤ 48rem)

   The desktop layout nests three padded boxes inside each other
   (node article → details/registration card → webform), which on a 390px
   screen left the form fields barely half the viewport wide, and the
   details block used a fixed 2rem date that wrapped over three lines.
   Everything below only tightens spacing/type at narrow widths — the
   desktop composition is untouched.
   ════════════════════════════════════════════════════════════════════ */
@media (max-width: 48rem) {

  /* ── Reclaim horizontal space ─────────────────────────────────────── */
  .sse-session__header {
    padding: 1rem;
    margin-bottom: 1.25rem;
    border-radius: 10px;
  }

  /* (The matching .sse-session__date-selector rule lives in
     session-date-selector.css, which loads after this file.) */
  .sse-session__registration {
    padding: 1rem;
    margin: 1.5rem 0;
  }

  /* ── Dates block: scale the date down instead of wrapping it over
        three oversized lines. ───────────────────────────────────────── */
  .sse-session__dates-block,
  .sse-session__dates-block strong {
    font-size: clamp(1.05rem, 4.6vw, 1.5rem);
  }

  .sse-session__dates-block {
    padding: 0.7rem 0.8rem;
    line-height: 1.3;
  }

  .sse-session__dates-list li {
    font-size: 0.95rem;
  }

  /* ── Info rows (durée / lieu / détails / capacité) ─────────────────── */
  .sse-session__info-line {
    gap: 0.4rem;
  }

  .sse-session__info-item {
    /* Icon on its own column, label + value flowing beside it, so a long
       value wraps under itself rather than under the icon. */
    align-items: flex-start;
    gap: 0.25rem 0.4rem;
    padding: 0.5rem 0.625rem;
    line-height: 1.45;
  }

  .sse-session__info-item > span[class^="icon-"],
  .sse-session__info-item > span[class*=" icon-"] {
    flex: 0 0 auto;
  }

  .sse-session__info-item .button--small {
    /* Was crammed against the value; give it a full row of its own with a
       real touch target. */
    margin: 0.35rem 0 0;
    padding: 0.35rem 0.75rem;
    font-size: 0.8rem;
  }

  .sse-session__multiday-warning,
  .sse-session__full-warning {
    padding: 0.7rem 0.8rem;
    gap: 0.5rem;
  }

  /* ── Hero band ────────────────────────────────────────────────────── */
  .sse-hero {
    padding-block: 28px;
  }

  .sse-hero--session-media .sse-hero__media {
    max-width: 200px;
  }

  .sse-hero--has-media .sse-hero__inner {
    gap: 1.25rem;
  }

  /*
   * The recap chip is a pill (radius 999px) built as an inline-flex row. On a
   * phone the action title wraps over two or three lines, which turned the
   * pill into a big lozenge and stranded the "→" alone on a line of its own.
   * Flowing the parts as inline text keeps the arrow attached to the end of
   * the title, and a card radius reads correctly once it is multi-line.
   */
  .sse-hero__action-recap {
    display: block;
    padding: 8px 12px;
    border-radius: var(--radius-lg, 14px);
    line-height: 1.5;
  }

  .sse-hero__action-recap-label,
  .sse-hero__action-recap-title {
    margin-inline-end: 4px;
  }

  .sse-hero__action-recap-arrow {
    margin-inline-start: 4px;
  }

  /* Prev/next arrows flank the date: shrink both so the date keeps a
     readable measure between them instead of wrapping to three lines. */
  .sse-hero__datetime {
    margin-top: 12px;
    font-size: clamp(16px, 4.4vw, 20px);
  }

  .sse-hero__datetime-nav {
    gap: 8px;
    margin-top: 12px;
  }

  .sse-hero__datetime-arrow {
    width: 34px;
    height: 34px;
    font-size: 20px;
  }
}