/* ============================================================
   UTOPIA DEMO — utopia-demo.css v2
   Design System Utopia · Gallia
   Fonts  : Recoleta 500 (titres) · General Sans (corps/UI)
   Colors : Blue #2B469E · Blue-900 #0F1E5C · Green #8ABF9C
   Préfixe : .ud-
   ============================================================ */

/* ── @FONT-FACE — Recoleta ──────────────────────────────────
   Placer Recoleta-Medium.woff2 + .woff dans assets/fonts/
   (Licence Latinotype – inclus dans le kit Utopia)
   ─────────────────────────────────────────────────────────── */
@font-face {
    font-family: 'Recoleta';
    src: url('../fonts/Recoleta-Medium.woff2') format('woff2'),
         url('../fonts/Recoleta-Medium.woff')  format('woff');
    font-weight:  500;
    font-style:   normal;
    font-display: swap;
}

/* ── TOKENS ────────────────────────────────────────────────── */
.ud-demo-home,
.ud-event-single,
.ud-news-single,
.ud-archive-agenda {
    /* — Palette Utopia DS Gallia — */
    --ud-blue:          #2B469E;
    --ud-blue-700:      #1E3380;
    --ud-blue-900:      #0F1E5C;
    --ud-blue-100:      #D9DFF4;
    --ud-blue-50:       #EEF1FB;
    --ud-green:         #8ABF9C;
    --ud-green-soft:    #D9ECE1;

    /* — Sémantiques — */
    --ud-bg:            #F7F8FD;
    --ud-surface:       #FFFFFF;
    --ud-ink:           #1C2140;
    --ud-muted:         #5E6B99;
    --ud-border:        rgba(43, 70, 158, 0.10);
    --ud-border-strong: rgba(43, 70, 158, 0.18);

    /* — Ombres — */
    --ud-shadow-xs: 0 1px 4px  rgba(15, 30, 92, 0.06);
    --ud-shadow-sm: 0 4px 20px rgba(15, 30, 92, 0.08);
    --ud-shadow-md: 0 8px 40px rgba(15, 30, 92, 0.13);

    /* — Géométrie — */
    --ud-radius:    10px;
    --ud-radius-lg: 16px;
    --ud-radius-xl: 24px;
    --ud-ease:      cubic-bezier(0.32, 0.72, 0, 1);

    /* — Polices DS — */
    --ud-font-display: 'Recoleta', Georgia, serif;
    --ud-font-body:    'General Sans', 'Helvetica Neue', Arial, sans-serif;

    /* — Échelle typographique DS Utopia — */
    --ud-size-display: clamp(44px, 7vw,   90px);
    --ud-size-h1:      clamp(40px, 5vw,    76px);
    --ud-size-h2:      clamp(34px, 4.4vw,  62px);
    --ud-size-h3:      26px;
    --ud-size-h4:      19px;
    --ud-size-body:    17px;
    --ud-size-small:   15px;
    --ud-size-label:   13px;
    --ud-size-eyebrow: 12px;
}



/* ── RESET / BASE ───────────────────────────────────────────── */
.ud-demo-home *,
.ud-event-single *,
.ud-news-single *,
.ud-archive-agenda * { box-sizing: border-box; }

.ud-demo-home,
.ud-event-single,
.ud-news-single,
.ud-archive-agenda {
    font-family:             var(--ud-font-body);
    font-size:               var(--ud-size-body);
    color:                   var(--ud-ink);
    background:              var(--ud-bg);
    line-height:             1.65;
    -webkit-font-smoothing:  antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ── CONTAINER ──────────────────────────────────────────────── */
.ud-container {
    width:         100%;
    max-width:     1160px;
    margin-left:   auto;
    margin-right:  auto;
    padding-left:  clamp(16px, 4vw, 40px);
    padding-right: clamp(16px, 4vw, 40px);
}

/* ── EYEBROW ────────────────────────────────────────────────── */
/* General Sans · 500 · 12px · uppercase · ls .14em */
.ud-eyebrow {
    display:        inline-block;
    font-family:    var(--ud-font-body);
    font-size:      var(--ud-size-eyebrow);
    font-weight:    500;
    letter-spacing: .14em;
    text-transform: uppercase;
    color:          var(--ud-green);
    background:     var(--ud-green-soft);
    border:         1px solid rgba(138, 191, 156, 0.55);
    padding:        4px 12px;
    border-radius:  99px;
    margin-bottom:  16px;
    line-height:    1.8;
}

/* ── SECTION HEADER ─────────────────────────────────────────── */
.ud-section-header { margin-bottom: 48px; }

.ud-section-header h2 {
    font-family:    var(--ud-font-display);
    font-size:      var(--ud-size-h2);
    font-weight:    500;
    line-height:    1.1;
    letter-spacing: -.015em;
    color:          var(--ud-blue-900);
    margin:         0 0 14px;
}

.ud-section-header p {
    font-family: var(--ud-font-body);
    font-size:   var(--ud-size-small);
    color:       var(--ud-muted);
    max-width:   520px;
    margin:      0;
    line-height: 1.6;
}

/* ── SECTIONS ───────────────────────────────────────────────── */
.ud-section { padding: clamp(56px, 8vw, 96px) 0; }
.ud-section + .ud-section { border-top: 1px solid var(--ud-border); }

/* ═══════════════════════════════════════════════════════════
   HERO — homepage
   ═══════════════════════════════════════════════════════════ */
.ud-hero {
    position:   relative;
    background: var(--ud-blue-900);
    padding:    clamp(72px, 10vw, 120px) 0 clamp(60px, 8vw, 96px);
    overflow:   hidden;
}

.ud-hero__decoration {
    position:       absolute;
    inset:          0;
    pointer-events: none;
    background:
        radial-gradient(ellipse 70% 90% at 110%  50%, rgba(138,191,156,.13) 0%, transparent 60%),
        radial-gradient(ellipse 40% 60% at -10%  80%, rgba(138,191,156,.07) 0%, transparent 60%),
        radial-gradient(ellipse 50% 50% at  50% 120%, rgba(43, 70, 158,.20) 0%, transparent 60%);
}

.ud-hero__inner {
    position: relative;
    z-index:  1;

}

.ud-hero .ud-eyebrow {
    color:        var(--ud-green);
    background:   rgba(138,191,156,.15);
    border-color: rgba(138,191,156,.40);
}

/* Display — Recoleta 500 clamp(44,7vw,104) */
.ud-hero__title {
    font-family:    var(--ud-font-display);
    font-size:      var(--ud-size-display);
    font-weight:    500;
    line-height:    1.05;
    letter-spacing: -.02em;
    color:          var(--ud-surface);
    margin:         0 0 24px;
}
.ud-hero__title .ud-accent {
    color:      var(--ud-green);
    font-style: italic;
}

.ud-hero__subtitle {
    font-family: var(--ud-font-body);
    font-size:   var(--ud-size-body);
    color:       rgba(255,255,255,.65);

    margin:      0;
    line-height: 1.7;
}

/* ═══════════════════════════════════════════════════════════
   PAGES TABLE
   ═══════════════════════════════════════════════════════════ */
.ud-pages-section { background: var(--ud-bg); }

.ud-pages-table-wrapper {
    overflow-x:    auto;
    border:        1px solid var(--ud-border-strong);
    border-radius: var(--ud-radius-lg);
    background:    var(--ud-surface);
    box-shadow:    var(--ud-shadow-xs);
    -webkit-overflow-scrolling: touch;
}

.ud-pages-table {
    width:           100%;
    border-collapse: collapse;
    font-family:     var(--ud-font-body);
    font-size:       var(--ud-size-small);
}

.ud-pages-table thead tr {
    border-bottom: 1px solid var(--ud-border-strong);
}

.ud-pages-table thead th {
    padding:        14px 20px;
    text-align:     left;
    font-family:    var(--ud-font-body);
    font-size:      var(--ud-size-eyebrow);
    font-weight:    500;
    letter-spacing: .12em;
    text-transform: uppercase;
    color:          var(--ud-muted);
    white-space:    nowrap;
    background:     var(--ud-blue-50);
}
.ud-pages-table thead th:first-child { border-radius: var(--ud-radius-lg) 0 0 0; }
.ud-pages-table thead th:last-child  { border-radius: 0 var(--ud-radius-lg) 0 0; }

.ud-pages-table tbody tr {
    border-bottom: 1px solid var(--ud-border);
    transition:    background .2s var(--ud-ease);
}
.ud-pages-table tbody tr:last-child  { border-bottom: none; }
.ud-pages-table tbody tr:hover       { background: var(--ud-blue-50); }
.ud-pages-table tbody tr.ud-my-row   { background: rgba(138,191,156,.08); }
.ud-pages-table tbody tr.ud-my-row:hover { background: rgba(138,191,156,.14); }

.ud-pages-table tbody td {
    padding:        13px 20px;
    vertical-align: middle;
    color:          var(--ud-ink);
}

.ud-page-title {
    display:     flex;
    align-items: center;
    gap:         10px;
}
.ud-page-title a {
    font-family:     var(--ud-font-body);
    font-size:       var(--ud-size-small);
    font-weight:     500;
    color:           var(--ud-blue);
    text-decoration: none;
    transition:      color .2s;
}
.ud-page-title a:hover { color: var(--ud-green); }

/* Label General Sans 500 13px */
.ud-mine-badge {
    font-family:    var(--ud-font-body);
    font-size:      var(--ud-size-label);
    font-weight:    500;
    letter-spacing: .05em;
    text-transform: uppercase;
    background:     var(--ud-green);
    color:          var(--ud-surface);
    padding:        2px 9px;
    border-radius:  99px;
    white-space:    nowrap;
}

.ud-author, .ud-date {
    font-family: var(--ud-font-body);
    font-size:   var(--ud-size-label);
    color:       var(--ud-muted);
}

.ud-table-actions { display: flex; align-items: center; gap: 8px; }

/* Bouton SM — General Sans 500 label */
.ud-btn-sm {
    display:         inline-block;
    padding:         6px 14px;
    border-radius:   6px;
    font-family:     var(--ud-font-body);
    font-size:       var(--ud-size-label);
    font-weight:     500;
    text-decoration: none;
    transition:      all .2s var(--ud-ease);
    border:          1px solid var(--ud-border-strong);
    color:           var(--ud-ink);
    background:      var(--ud-surface);
    white-space:     nowrap;
}
.ud-btn-sm:hover {
    background:  var(--ud-blue-900);
    border-color: var(--ud-blue-900);
    color:       var(--ud-surface);
    transform:   translateY(-1px);
}
.ud-btn-sm--edit {
    background:   var(--ud-blue-50);
    border-color: transparent;
    color:        var(--ud-blue);
}
.ud-btn-sm--edit:hover {
    background:   var(--ud-blue);
    border-color: var(--ud-blue);
    color:        var(--ud-surface);
}

/* ── EMPTY STATE ────────────────────────────────────────────── */
.ud-empty-state {
    text-align:    center;
    padding:       60px 24px;
    color:         var(--ud-muted);
    font-family:   var(--ud-font-body);
    font-size:     var(--ud-size-small);
    border:        1px dashed var(--ud-border-strong);
    border-radius: var(--ud-radius-lg);
}
.ud-empty-state p { margin-bottom: 20px; }

/* Bouton principal */
.ud-btn {
    display:         inline-block;
    padding:         11px 26px;
    background:      var(--ud-blue);
    color:           var(--ud-surface);
    border-radius:   var(--ud-radius);
    font-family:     var(--ud-font-body);
    font-size:       var(--ud-size-small);
    font-weight:     600;
    text-decoration: none;
    transition:      all .25s var(--ud-ease);
    border:          none;
}
.ud-btn:hover {
    background: var(--ud-blue-700);
    transform:  translateY(-2px);
    box-shadow: var(--ud-shadow-sm);
    color:      var(--ud-surface);
}

/* ═══════════════════════════════════════════════════════════
   EVENTS SLIDER
   ═══════════════════════════════════════════════════════════ */
.ud-events-section {
    background: var(--ud-blue-900);
    padding:    clamp(56px, 8vw, 96px) 0;
}

.ud-events-section .ud-eyebrow {
    color:        var(--ud-green);
    background:   rgba(138,191,156,.15);
    border-color: rgba(138,191,156,.40);
}
.ud-events-section .ud-section-header h2 { color: var(--ud-surface); }
.ud-events-section .ud-section-header p  { color: rgba(255,255,255,.55); }

.ud-slider-container {
    position: relative;
	width: 100%;
    max-width: 1160px;
    margin-left: auto;
    margin-right: auto;
    padding-left: clamp(16px, 4vw, 40px);
    padding-right: clamp(16px, 4vw, 40px);
}

.ud-slider {
    display:    flex;
    gap:        24px;
    transition: transform .6s var(--ud-ease);
    cursor:     grab;
    will-change: transform;
    user-select: none;
    -webkit-user-select: none;
}
.ud-slider.ud-dragging { cursor: grabbing; transition: none; }

/* ── EVENT CARD ─────────────────────────────────────────────── */
.ud-event-card {
    position:            relative;
    flex:                0 0 clamp(280px, 33vw, 380px);
    min-height:          clamp(340px, 44vw, 440px);
    border-radius:       var(--ud-radius-xl);
    overflow:            hidden;
    background-color:    var(--ud-blue-700);
    background-size:     cover;
    background-position: center;
    display:             flex;
    flex-direction:      column;
    justify-content:     flex-end;
    transition:          transform .4s var(--ud-ease), box-shadow .4s var(--ud-ease);
    box-shadow:          0 8px 32px rgba(0,0,0,.25);
}
.ud-event-card:hover {
    transform:  translateY(-6px);
    box-shadow: 0 20px 60px rgba(0,0,0,.35);
}

.ud-event-card__overlay {
    position:   absolute;
    inset:      0;
    background: linear-gradient(
        to bottom,
        rgba(10,18,55,.08) 0%,
        rgba(10,18,55,.45) 40%,
        rgba(10,18,55,.92) 100%
    );
    z-index: 1;
}

/* Date badge — Recoleta */
.ud-event-card__date-badge {
    position:       absolute;
    top:            20px;
    right:          20px;
    z-index:        2;
    background:     var(--ud-surface);
    border-radius:  10px;
    min-width:      52px;
    text-align:     center;
    padding:        8px 10px 6px;
    box-shadow:     0 4px 14px rgba(0,0,0,.16);
    display:        flex;
    flex-direction: column;
    align-items:    center;
    line-height:    1;
    gap:            3px;
}
.ud-date-day {
    font-family: var(--ud-font-display);
    font-size:   26px;
    font-weight: 500;
    color:       var(--ud-blue-900);
    display:     block;
}
.ud-date-month {
    font-family:    var(--ud-font-body);
    font-size:      var(--ud-size-eyebrow);
    font-weight:    500;
    letter-spacing: .12em;
    text-transform: uppercase;
    color:          var(--ud-green);
    display:        block;
}

.ud-event-card__content {
    position: relative;
    z-index:  2;
    padding:  clamp(20px, 3vw, 28px);
}

.ud-event-card__link-overlay {
    position: absolute;
    inset:    0;
    z-index:  0;
}

/* Dates — Eyebrow style */
.ud-event-card__dates {
    font-family:    var(--ud-font-body);
    font-size:      var(--ud-size-eyebrow);
    font-weight:    500;
    letter-spacing: .10em;
    text-transform: uppercase;
    color:          var(--ud-green);
    margin-bottom:  8px;
}

/* H3 — Recoleta 500 26px */
.ud-event-card__title {
    font-family:  var(--ud-font-display);
    font-size:    clamp(18px, 2.4vw, 26px);
    font-weight:  500;
    line-height:  1.2;
    color:        var(--ud-surface);
    margin:       0 0 14px;
}

.ud-event-card__meta {
    display:     flex;
    flex-wrap:   wrap;
    gap:         6px 18px;
    margin-bottom: 20px;
}
.ud-event-card__meta span {
    font-family: var(--ud-font-body);
    font-size:   var(--ud-size-small);
    color:       rgba(255,255,255,.75);
}

.ud-event-card__cta {
    display:         inline-flex;
    align-items:     center;
    gap:             8px;
    font-family:     var(--ud-font-body);
    font-size:       var(--ud-size-label);
    font-weight:     600;
    letter-spacing:  .06em;
    text-transform:  uppercase;
    color:           var(--ud-green);
    text-decoration: none;
    position:        relative;
    z-index:         1;
    transition:      gap .25s var(--ud-ease);
}
.ud-event-card__cta:hover { gap: 14px; color: var(--ud-green); }
.ud-cta-arrow { transition: transform .25s var(--ud-ease); }
.ud-event-card__cta:hover .ud-cta-arrow { transform: translateX(4px); }

/* ── NAV SLIDER ─────────────────────────────────────────────── */
.ud-slider-nav {
    position:       absolute;
    bottom:         0;
    left:           0; right: 0;
    display:        flex;
    align-items:    center;
    justify-content: center;
    gap:            16px;
    padding:        0 clamp(16px, 4vw, 40px);
}

.ud-slider-btn {
    width:          40px; height: 40px;
    border-radius:  50%;
    border:         1px solid rgba(255,255,255,.20);
    background:     rgba(255,255,255,.08);
    color:          var(--ud-surface);
    font-size:      22px;
    cursor:         pointer;
    display:        flex;
    align-items:    center;
    justify-content: center;
    transition:     all .2s var(--ud-ease);
    /* Touch-friendly */
    min-width:  40px;
    min-height: 40px;
}
.ud-slider-btn:hover {
    background:   var(--ud-green);
    border-color: var(--ud-green);
}

.ud-slider-dots { display: flex; align-items: center; gap: 8px; }
.ud-dot {
    width:         8px; height: 8px;
    border-radius: 50%;
    border:        none;
    background:    rgba(255,255,255,.30);
    cursor:        pointer;
    padding:       0;
    transition:    all .25s var(--ud-ease);
    min-width:     8px;
    min-height:    8px;
}
.ud-dot.ud-dot--active {
    background:    var(--ud-green);
    width:         24px;
    border-radius: 4px;
}

/* ═══════════════════════════════════════════════════════════
   ACTUALITÉS GRID
   ═══════════════════════════════════════════════════════════ */
.ud-news-section { background: var(--ud-bg); }

.ud-news-grid {
    display:               grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
    gap:                   clamp(16px, 2.5vw, 28px);
}

.ud-news-card {
    background:     var(--ud-surface);
    border-radius:  var(--ud-radius-lg);
    overflow:       hidden;
    border:         1px solid var(--ud-border);
    box-shadow:     var(--ud-shadow-xs);
    display:        flex;
    flex-direction: column;
    transition:     transform .35s var(--ud-ease), box-shadow .35s var(--ud-ease);
}
.ud-news-card:hover {
    transform:  translateY(-4px);
    box-shadow: var(--ud-shadow-md);
}

.ud-news-card__image {
    aspect-ratio: 16 / 9;
    overflow:     hidden;
}
.ud-news-card__image img {
    width:      100%; height: 100%;
    object-fit: cover;
    display:    block;
    transition: transform .5s var(--ud-ease);
}
.ud-news-card:hover .ud-news-card__image img { transform: scale(1.04); }

.ud-news-card__body {
    padding:        clamp(18px, 2.5vw, 24px);
    flex:           1;
    display:        flex;
    flex-direction: column;
}

/* Eyebrow */
.ud-news-card__date {
    font-family:    var(--ud-font-body);
    font-size:      var(--ud-size-eyebrow);
    font-weight:    500;
    letter-spacing: .12em;
    text-transform: uppercase;
    color:          var(--ud-green);
    margin-bottom:  10px;
}

/* H3 — Recoleta 500 26px → ici on réduit un peu pour la card */
.ud-news-card__title {
    font-family:  var(--ud-font-display);
    font-size:    clamp(18px, 2vw, var(--ud-size-h3));
    font-weight:  500;
    line-height:  1.25;
    color:        var(--ud-blue-900);
    margin:       0 0 12px;
}
.ud-news-card__title a { color: inherit; text-decoration: none; transition: color .2s; }
.ud-news-card__title a:hover { color: var(--ud-green); }

.ud-news-card__excerpt {
    font-family:        var(--ud-font-body);
    font-size:          var(--ud-size-small);
    color:              var(--ud-muted);
    line-height:        1.65;
    margin:             0 0 20px;
    flex:               1;
    display:            -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow:           hidden;
}

.ud-news-card__more {
    display:         inline-flex;
    align-items:     center;
    gap:             6px;
    font-family:     var(--ud-font-body);
    font-size:       var(--ud-size-label);
    font-weight:     600;
    letter-spacing:  .06em;
    text-transform:  uppercase;
    color:           var(--ud-blue);
    text-decoration: none;
    transition:      gap .2s var(--ud-ease), color .2s;
    margin-top:      auto;
}
.ud-news-card__more:hover { color: var(--ud-green); gap: 10px; }

/* ═══════════════════════════════════════════════════════════
   SINGLE ÉVÉNEMENT
   ═══════════════════════════════════════════════════════════ */
.ud-event-single { background: var(--ud-bg); min-height: 100vh; }

.ud-event-hero {
    position:    relative;
    min-height:  clamp(360px, 50vw, 520px);
    display:     flex;
    align-items: flex-end;
    background-color:    var(--ud-blue-900);
    background-size:     cover;
    background-position: center;
}
.ud-event-hero--plain {
    background-image:
        radial-gradient(ellipse 70% 90% at 110%  50%, rgba(138,191,156,.14) 0%, transparent 60%),
        radial-gradient(ellipse 40% 60% at -10%  80%, rgba(138,191,156,.07) 0%, transparent 60%);
}

.ud-event-hero__overlay {
    position:   absolute; inset: 0;
    background: linear-gradient(
        to bottom,
        rgba(10,18,55,.06) 0%,
        rgba(10,18,55,.80) 100%
    );
}

.ud-event-hero__content {
    position: relative;
    z-index:  1;
    padding:  clamp(48px, 6vw, 80px) clamp(16px, 4vw, 40px) clamp(40px, 5vw, 60px);
}

.ud-event-hero .ud-eyebrow {
    color:        var(--ud-green);
    background:   rgba(138,191,156,.15);
    border-color: rgba(138,191,156,.40);
}

/* H1 — Recoleta 500 clamp(40,5vw,76) */
.ud-event-hero__title {
    font-family:    var(--ud-font-display);
    font-size:      var(--ud-size-h1);
    font-weight:    500;
    line-height:    1.08;
    letter-spacing: -.018em;
    color:          var(--ud-surface);
    margin:         0 0 20px;
    max-width:      800px;
}

.ud-event-hero__meta {
    display:   flex;
    flex-wrap: wrap;
    gap:       8px 24px;
}
.ud-event-hero__date,
.ud-event-hero__time,
.ud-event-hero__place {
    font-family: var(--ud-font-body);
    font-size:   var(--ud-size-small);
    color:       rgba(255,255,255,.80);
    display:     flex;
    align-items: center;
    gap:         6px;
}
.ud-event-hero__date { font-weight: 600; color: var(--ud-surface); }

/* ── BODY LAYOUT ────────────────────────────────────────────── */
.ud-event-body {
    padding: clamp(40px, 6vw, 72px) clamp(16px, 4vw, 40px) clamp(56px, 8vw, 96px);
}

.ud-event-content-grid {
    display:               grid;
    grid-template-columns: 1fr 320px;
    gap:                   clamp(32px, 5vw, 64px);
    align-items:           start;
}

/* H2 — Recoleta 500 */
.ud-event-description h2 {
    font-family:    var(--ud-font-display);
    font-size:      var(--ud-size-h3);
    font-weight:    500;
    color:          var(--ud-blue-900);
    margin:         0 0 24px;
    line-height:    1.25;
}

.ud-event-text {
    font-family: var(--ud-font-body);
    font-size:   var(--ud-size-body);
    line-height: 1.75;
    color:       var(--ud-ink);
}
.ud-event-text p { margin-bottom: 1.2em; }
.ud-event-text h2, .ud-event-text h3 {
    font-family: var(--ud-font-display);
    font-weight: 500;
    color:       var(--ud-blue-900);
    margin:      1.5em 0 .6em;
}

/* ── SIDEBAR ────────────────────────────────────────────────── */
.ud-event-sidebar {
    position:       sticky;
    top:            100px;
    display:        flex;
    flex-direction: column;
    gap:            20px;
}

.ud-info-card {
    background:    var(--ud-surface);
    border:        1px solid var(--ud-border);
    border-radius: var(--ud-radius-lg);
    padding:       clamp(20px, 3vw, 28px);
    box-shadow:    var(--ud-shadow-xs);
}

/* H4 — General Sans 600 19px */
.ud-info-card h3 {
    font-family:    var(--ud-font-body);
    font-size:      var(--ud-size-h4);
    font-weight:    600;
    color:          var(--ud-blue-900);
    margin:         0 0 20px;
    padding-bottom: 16px;
    border-bottom:  1px solid var(--ud-border);
    line-height:    1.3;
}

.ud-info-item {
    display:    flex;
    gap:        14px;
    padding:    14px 0;
    border-bottom: 1px solid var(--ud-border);
}
.ud-info-item:last-child { border-bottom: none; padding-bottom: 0; }

.ud-info-icon {
    width:          36px; height: 36px;
    border-radius:  8px;
    background:     var(--ud-blue-50);
    display:        flex;
    align-items:    center;
    justify-content: center;
    font-size:      16px;
    flex-shrink:    0;
}

/* Eyebrow label */
.ud-info-label {
    font-family:    var(--ud-font-body);
    font-size:      var(--ud-size-eyebrow);
    font-weight:    500;
    letter-spacing: .10em;
    text-transform: uppercase;
    color:          var(--ud-muted);
    margin-bottom:  3px;
}
/* Body small */
.ud-info-value {
    font-family: var(--ud-font-body);
    font-size:   var(--ud-size-small);
    color:       var(--ud-ink);
    line-height: 1.5;
}

.ud-map-card {
    border-radius: var(--ud-radius-lg);
    overflow:      hidden;
    border:        1px solid var(--ud-border);
    min-height:    200px;
    background:    var(--ud-surface);
}
.ud-map-card.ud-map-link {
    min-height: auto;
    padding:    18px 20px;
}
.ud-map-card.ud-map-link a {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    color:           var(--ud-blue);
    font-family:     var(--ud-font-body);
    font-size:       var(--ud-size-small);
    font-weight:     500;
    text-decoration: none;
    transition:      color .2s;
}
.ud-map-card.ud-map-link a:hover { color: var(--ud-green); }

.ud-back-link {
    display:         inline-flex;
    align-items:     center;
    gap:             6px;
    font-family:     var(--ud-font-body);
    font-size:       var(--ud-size-small);
    font-weight:     500;
    color:           var(--ud-muted);
    text-decoration: none;
    transition:      color .2s;
}
.ud-back-link:hover { color: var(--ud-blue); }

/* ═══════════════════════════════════════════════════════════
   SINGLE ACTUALITÉ
   ═══════════════════════════════════════════════════════════ */
.ud-news-single { background: var(--ud-bg); min-height: 100vh; }

.ud-news-hero {
    position:   relative;
    background: var(--ud-blue-900);
    padding:    clamp(72px, 10vw, 108px) 0 clamp(56px, 8vw, 80px);
    overflow:   hidden;
}
.ud-news-hero__bg {
    position: absolute; inset: 0; pointer-events: none;
    background:
        radial-gradient(ellipse 70% 90% at 110%  50%, rgba(138,191,156,.12) 0%, transparent 60%),
        radial-gradient(ellipse 40% 60% at -10%  80%, rgba(138,191,156,.06) 0%, transparent 60%);
}
.ud-news-hero__content { position: relative; z-index: 1; }

.ud-news-hero .ud-eyebrow {
    color:        var(--ud-green);
    background:   rgba(138,191,156,.15);
    border-color: rgba(138,191,156,.40);
}

.ud-news-meta {
    display:     flex;
    align-items: center;
    flex-wrap:   wrap;
    gap:         12px;
    margin-bottom: 20px;
}
.ud-news-meta__date, .ud-news-meta__author {
    font-family: var(--ud-font-body);
    font-size:   var(--ud-size-small);
    color:       rgba(255,255,255,.60);
}
.ud-news-meta__sep {
    width:         4px; height: 4px;
    border-radius: 50%;
    background:    rgba(255,255,255,.30);
}

/* H1 — Recoleta 500 */
.ud-news-hero__title {
    font-family:    var(--ud-font-display);
    font-size:      var(--ud-size-h1);
    font-weight:    500;
    line-height:    1.08;
    letter-spacing: -.018em;
    color:          var(--ud-surface);
    margin:         0;
    max-width:      820px;
}

.ud-news-cover {
    max-width:   820px;
    margin:      -48px auto 0;
    padding:     0 clamp(16px, 4vw, 40px);
    position:    relative;
    z-index:     2;
}
.ud-news-cover img {
    width:         100%;
    border-radius: var(--ud-radius-xl);
    display:       block;
    box-shadow:    var(--ud-shadow-md);
    aspect-ratio:  16 / 7;
    object-fit:    cover;
}

.ud-news-body {

    margin:    0 auto;
    padding:   clamp(48px, 7vw, 72px) clamp(16px, 4vw, 40px) clamp(56px, 8vw, 96px);
}

.ud-news-footer {
    margin-top:  48px;
    padding-top: 28px;
    border-top:  1px solid var(--ud-border);
    display:     flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap:   wrap;
    gap:         16px;
}

/* ═══════════════════════════════════════════════════════════
   ARCHIVE AGENDA
   ═══════════════════════════════════════════════════════════ */
.ud-archive-agenda { background: var(--ud-bg); min-height: 100vh; }

.ud-archive-header {
    background:  var(--ud-blue-900);
    padding:     clamp(64px, 9vw, 100px) 0 clamp(52px, 7vw, 72px);
    position:    relative;
    overflow:    hidden;
}
.ud-archive-header__bg {
    position: absolute; inset: 0; pointer-events: none;
    background: radial-gradient(ellipse 70% 90% at 110% 50%, rgba(138,191,156,.12) 0%, transparent 60%);
}
.ud-archive-header__content { position: relative; z-index: 1; }

.ud-archive-header .ud-eyebrow {
    color:        var(--ud-green);
    background:   rgba(138,191,156,.15);
    border-color: rgba(138,191,156,.40);
}

/* H1 — Recoleta 500 */
.ud-archive-header h1 {
    font-family:    var(--ud-font-display);
    font-size:      var(--ud-size-h1);
    font-weight:    500;
    line-height:    1.08;
    letter-spacing: -.018em;
    color:          var(--ud-surface);
    margin:         0;
}

.ud-archive-grid {
    display:               grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
    gap:                   clamp(16px, 2.5vw, 28px);
    padding:               clamp(40px, 6vw, 72px) 0 clamp(56px, 8vw, 96px);
}

.ud-archive-card {
    background:     var(--ud-surface);
    border-radius:  var(--ud-radius-lg);
    overflow:       hidden;
    border:         1px solid var(--ud-border);
    box-shadow:     var(--ud-shadow-xs);
    display:        flex;
    flex-direction: column;
    transition:     transform .35s var(--ud-ease), box-shadow .35s var(--ud-ease);
}
.ud-archive-card:hover {
    transform:  translateY(-4px);
    box-shadow: var(--ud-shadow-md);
}
.ud-archive-card__img {
    aspect-ratio: 16 / 9;
    overflow:     hidden;
    background:   var(--ud-blue-50);
}
.ud-archive-card__img img {
    width: 100%; height: 100%; object-fit: cover; display: block;
    transition: transform .5s var(--ud-ease);
}
.ud-archive-card:hover .ud-archive-card__img img { transform: scale(1.04); }

.ud-archive-card__body {
    padding:        clamp(18px, 2.5vw, 24px);
    flex:           1;
    display:        flex;
    flex-direction: column;
}

.ud-archive-card__dates {
    font-family:    var(--ud-font-body);
    font-size:      var(--ud-size-eyebrow);
    font-weight:    500;
    letter-spacing: .12em;
    text-transform: uppercase;
    color:          var(--ud-green);
    margin-bottom:  8px;
}

/* H3 — Recoleta 500 */
.ud-archive-card__title {
    font-family: var(--ud-font-display);
    font-size:   clamp(18px, 2vw, var(--ud-size-h3));
    font-weight: 500;
    color:       var(--ud-blue-900);
    margin:      0 0 12px;
    line-height: 1.3;
}
.ud-archive-card__title a { color: inherit; text-decoration: none; transition: color .2s; }
.ud-archive-card__title a:hover { color: var(--ud-green); }

.ud-archive-card__meta {
    display:     flex;
    flex-wrap:   wrap;
    gap:         6px 16px;
    font-family: var(--ud-font-body);
    font-size:   var(--ud-size-small);
    color:       var(--ud-muted);
    flex:        1;
    align-content: flex-start;
}

.ud-archive-card__cta {
    margin-top:      auto;
    padding-top:     16px;
    display:         inline-flex;
    align-items:     center;
    gap:             6px;
    font-family:     var(--ud-font-body);
    font-size:       var(--ud-size-label);
    font-weight:     600;
    letter-spacing:  .06em;
    text-transform:  uppercase;
    color:           var(--ud-blue);
    text-decoration: none;
    transition:      gap .2s, color .2s;
}
.ud-archive-card__cta:hover { color: var(--ud-green); gap: 10px; }

/* ═══════════════════════════════════════════════════════════
   SCROLL ANIMATIONS
   ═══════════════════════════════════════════════════════════ */
.ud-reveal {
    opacity:    0;
    transform:  translateY(20px);
    transition: opacity .7s cubic-bezier(0.16, 1, 0.3, 1),
                transform .7s cubic-bezier(0.16, 1, 0.3, 1);
}
.ud-reveal.ud-revealed { opacity: 1; transform: translateY(0); }
.ud-reveal-delay-1 { transition-delay:  80ms; }
.ud-reveal-delay-2 { transition-delay: 160ms; }
.ud-reveal-delay-3 { transition-delay: 240ms; }
.ud-reveal-delay-4 { transition-delay: 320ms; }

/* ═══════════════════════════════════════════════════════════
   RESPONSIVE — ≤ 1024px (tablette)
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
    .ud-event-content-grid {
        grid-template-columns: 1fr 280px;
    }
}

/* ═══════════════════════════════════════════════════════════
   RESPONSIVE — ≤ 768px (tablette portrait / mobile paysage)
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 768px) {

    /* Hero */
    .ud-hero__title { line-height: 1.08; }
    .ud-hero__subtitle { font-size: var(--ud-size-small); }

    /* Single event : sidebar passe sous le contenu */
    .ud-event-content-grid {
        grid-template-columns: 1fr;
        gap: 32px;
    }
    .ud-event-sidebar { position: static; }

    /* Table : masquer colonnes "Modifiée le" */
    .ud-pages-table thead th:nth-child(4),
    .ud-pages-table tbody td:nth-child(4) { display: none; }

    /* Slider card un peu plus large */
    .ud-event-card { flex: 0 0 min(90vw, 340px); }

    /* Cover actualité : moins de décalage */
    .ud-news-cover { margin-top: -28px; }
}

/* ═══════════════════════════════════════════════════════════
   RESPONSIVE — ≤ 480px (mobile portrait)
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 480px) {

    /* Table : masquer aussi "Créée le" */
    .ud-pages-table thead th:nth-child(3),
    .ud-pages-table tbody td:nth-child(3) { display: none; }

    /* Card slider presque plein écran */
    .ud-event-card { flex: 0 0 calc(100vw - 32px); }

    /* Grille 1 col forcée */
    .ud-news-grid,
    .ud-archive-grid { grid-template-columns: 1fr; }

    /* Cover sans décalage sur mobile */
    .ud-news-cover { margin-top: 0; }

    /* Table actions : afficher uniquement "Voir" */
    .ud-btn-sm--edit { display: none; }

    /* Section header title wrap propre */
    .ud-section-header h2 { word-break: break-word; }
    .ud-event-hero__title { word-break: break-word; }
    .ud-news-hero__title  { word-break: break-word; }
    .ud-archive-header h1 { word-break: break-word; }

    /* Meta hero en colonne */
    .ud-event-hero__meta { flex-direction: column; gap: 6px; }
}

/* ═══════════════════════════════════════════════════════════
   ACCESSIBILITÉ — focus visible
   ═══════════════════════════════════════════════════════════ */
.ud-btn:focus-visible,
.ud-btn-sm:focus-visible,
.ud-event-card__cta:focus-visible,
.ud-news-card__more:focus-visible,
.ud-back-link:focus-visible,
.ud-slider-btn:focus-visible,
.ud-dot:focus-visible {
    outline: 2px solid var(--ud-green);
    outline-offset: 3px;
    border-radius: 4px;
}

/* ── Admin bar offset ────────────────────────────────────────── */
.admin-bar .ud-event-sidebar { top: 132px; }

/* ── Leaflet overrides ───────────────────────────────────────── */
.ud-map-card .leaflet-container { height: 220px; }
.leaflet-popup-content-wrapper { font-family: var(--ud-font-body) !important; }

/* ═══════════════════════════════════════════════════════════
   TOPBAR — navigation front/back office
   ═══════════════════════════════════════════════════════════ */
.ud-topbar {
    display: flex;
    position: sticky;
    top: 0;
    z-index: 200;
    background: #0F1E5C;
    border-bottom: 1px solid rgba(255, 255, 255, .08);
    backdrop-filter: blur(8px);
    align-items: center;
    min-height: 103px;
}
.admin-bar .ud-topbar { top: 32px; }
@media (max-width: 782px) { .admin-bar .ud-topbar { top: 46px; } }

.ud-topbar__inner {
    max-width:       1160px;
    margin:          0 auto;
    padding:         0 clamp(16px, 4vw, 40px);
    height:          52px;
    display:         flex;
    align-items:     center;
    gap:             32px;
}

.ud-topbar__brand {
    display:         flex;
    align-items:     center;
    gap:             8px;
    color:           #FFFFFF;
    text-decoration: none;
    font-family:     'General Sans', 'Helvetica Neue', Arial, sans-serif;
    font-size:       13px;
    font-weight:     600;
    letter-spacing:  .04em;
    opacity:         .9;
    transition:      opacity .2s;
    white-space:     nowrap;
    flex-shrink:     0;
}
.ud-topbar__brand:hover { opacity: 1; color: #FFFFFF; }
.ud-topbar__brand-icon { flex-shrink: 0; }

.ud-topbar__nav {
    display:     flex;
    align-items: center;
    gap:         4px;
    flex:        1;
}

.ud-topbar__link {
    font-family:     'General Sans', 'Helvetica Neue', Arial, sans-serif;
    font-size:       13px;
    font-weight:     500;
    color:           rgba(255,255,255,.65);
    text-decoration: none;
    padding:         6px 14px;
    border-radius:   99px;
    transition:      all .2s cubic-bezier(0.32, 0.72, 0, 1);
}
.ud-topbar__link:hover,
.ud-topbar__link.is-active {
    color:       #FFFFFF;
    background:  rgba(255,255,255,.10);
}
.ud-topbar__link.is-active {
    color:       #8ABF9C;
}

.ud-topbar__cta {
    display: block;
    padding: 11px 26px !important;
    background: #2B469E !important;
    color: #FFFFFF !important;
    border-radius: 10px !important;
    font-family:  'General Sans', 'Helvetica Neue', Arial, sans-serif !important;
    font-size: 15px !important;
    font-weight: 600;
    text-decoration: none;
    transition: all .25s cubic-bezier(0.32, 0.72, 0, 1) !important;
    border: none;
}
.ud-topbar__cta:hover {
    background:  #a0d4b0;
    color:       #0F1E5C;
    transform:   translateY(-1px);
}

/* offset pour les sections hero qui suivent le topbar */
.ud-topbar + * { scroll-margin-top: 52px; }

@media (max-width: 480px) {
    .ud-topbar__nav { display: none !important; }
    .ud-topbar__brand span { display: none; }
    .ud-topbar__inner { gap: 16px; justify-content: space-between; }
}

/* ═══════════════════════════════════════════════════════════
   FILTER BAR — archive pages
   ═══════════════════════════════════════════════════════════ */
.ud-filter-bar {
    display:     flex;
    align-items: center;
    flex-wrap:   wrap;
    gap:         8px;
    margin-bottom: 40px;
}

.ud-filter-btn {
    font-family:     var(--ud-font-body);
    font-size:       var(--ud-size-small);
    font-weight:     500;
    color:           var(--ud-blue);
    background:      var(--ud-blue-50);
    border:          1px solid var(--ud-blue-100);
    padding:         8px 20px;
    border-radius:   99px;
    cursor:          pointer;
    transition:      all .2s var(--ud-ease);
    line-height:     1.4;
}
.ud-filter-btn:hover {
    background:   var(--ud-blue-100);
    border-color: var(--ud-blue);
}
.ud-filter-btn.is-active {
    background:   var(--ud-blue);
    border-color: var(--ud-blue);
    color:        var(--ud-surface);
}

/* Compteur sur les boutons filter */
.ud-filter-btn__count {
    display:       inline-block;
    font-size:     11px;
    font-weight:   600;
    background:    rgba(255,255,255,.25);
    border-radius: 99px;
    padding:       1px 7px;
    margin-left:   4px;
    vertical-align: middle;
}
.ud-filter-btn:not(.is-active) .ud-filter-btn__count {
    background: rgba(43,70,158,.12);
    color:      var(--ud-blue);
}

/* Cards cachées par le filtre */
.ud-archive-card[hidden] { display: none !important; }

/* Empty state inline */
.ud-filter-empty {
    grid-column: 1 / -1;
    text-align:  center;
    padding:     48px 24px;
    color:       var(--ud-muted);
    font-family: var(--ud-font-body);
    font-size:   var(--ud-size-small);
    display:     none;
}
.ud-filter-empty.is-visible { display: block; }

/* "Voir tous" link sous les sections homepage */
.ud-section-footer {
    margin-top:  40px;
    text-align:  center;
}

.ud-btn-outline {
    display:         inline-flex;
    align-items:     center;
    gap:             8px;
    font-family:     var(--ud-font-body);
    font-size:       var(--ud-size-small);
    font-weight:     600;
    color:           var(--ud-blue);
    background:      transparent;
    border:          1.5px solid var(--ud-blue);
    padding:         10px 24px;
    border-radius:   var(--ud-radius);
    text-decoration: none;
    transition:      all .25s var(--ud-ease);
}
.ud-btn-outline:hover {
    background: var(--ud-blue);
    color:      var(--ud-surface);
    transform:  translateY(-2px);
    box-shadow: var(--ud-shadow-sm);
}
/* Variante claire (sur fond navy) */
.ud-btn-outline--light {
    color:        var(--ud-surface);
    border-color: rgba(255,255,255,.45);
}
.ud-btn-outline--light:hover {
    background:   var(--ud-surface);
    border-color: var(--ud-surface);
    color:        var(--ud-blue-900);
}

/* pagination */
.ud-pagination .nav-links {
    display:     flex;
    flex-wrap:   wrap;
    gap:         6px;
    justify-content: center;
}
.ud-pagination .page-numbers {
    font-family:     var(--ud-font-body);
    font-size:       var(--ud-size-small);
    font-weight:     500;
    color:           var(--ud-blue);
    background:      var(--ud-surface);
    border:          1px solid var(--ud-border-strong);
    padding:         8px 14px;
    border-radius:   var(--ud-radius);
    text-decoration: none;
    transition:      all .2s;
}
.ud-pagination .page-numbers.current,
.ud-pagination .page-numbers:hover {
    background:   var(--ud-blue);
    border-color: var(--ud-blue);
    color:        var(--ud-surface);
}

/* Badge "Passé" sur les cards agenda archive */
.ud-archive-card__img { position: relative; }
.ud-archive-card__past-badge {
    position:       absolute;
    top:            12px;
    left:           12px;
    font-family:    var(--ud-font-body);
    font-size:      var(--ud-size-eyebrow);
    font-weight:    600;
    letter-spacing: .10em;
    text-transform: uppercase;
    background:     rgba(15,30,92,.75);
    color:          rgba(255,255,255,.75);
    padding:        4px 10px;
    border-radius:  99px;
    backdrop-filter: blur(4px);
}