/* ============================================================================
   Timeline Agregateur Actus
   Style « tour de contrôle » : fond sombre, cartes claires, codes couleur
   ============================================================================ */

.agg-timeline {
    --bg:            #0f1621;
    --card-bg:       #1a2433;
    --card-hover:    #243347;
    --text:          #e6ecf5;
    --text-muted:    #8b9cb3;
    --border:        #2c3a4d;

    --ton-positif:   #2ecc71;
    --ton-negatif:   #e74c3c;
    --ton-neutre:    #7f8c8d;

    --pole-politique:     #4a7ab5;
    --pole-societe:       #8e5ea8;
    --pole-international: #2d9e9e;
    --pole-economie:      #c99b30;
    --pole-culture:       #c96a8e;
    --pole-sport:         #4a9e5a;
    --pole-technologie:   #5b9bd5;
    --pole-environnement: #6eb86e;
    --pole-sante:         #c96a6a;
    --pole-justice:       #9b5a9e;
    --pole-medias:        #7f8c8d;
    --pole-faits-divers:  #c9782c;

    background: var(--bg);
    color: var(--text);
    padding: 20px;
    border-radius: 8px;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* ---------------------------------------------------------------------------
   Toolbar (filtres + statut)
   --------------------------------------------------------------------------- */

.agg-timeline__toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border);
}

.agg-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.agg-filter {
    background: transparent;
    color: var(--text-muted);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 4px 12px;
    font-size: 12px;
    cursor: pointer;
    transition: all 0.15s ease;
    font-family: inherit;
}

.agg-filter:hover {
    background: var(--card-bg);
    color: var(--text);
}

.agg-filter.is-active {
    background: var(--text);
    color: var(--bg);
    border-color: var(--text);
}

.agg-filter[data-pole]::before {
    content: '';
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--pole-color, var(--text-muted));
    margin-right: 6px;
    vertical-align: middle;
}

.agg-timeline__status {
    margin-left: auto;
    font-size: 12px;
    color: var(--text-muted);
    display: flex;
    gap: 12px;
}

.agg-status__count strong {
    color: var(--text);
}

/* ---------------------------------------------------------------------------
   Grille de vignettes
   --------------------------------------------------------------------------- */

.agg-timeline__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
}

@media (max-width: 1200px) {
    .agg-timeline__grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 900px) {
    .agg-timeline__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
    .agg-timeline__grid { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------------------------
   Carte article
   --------------------------------------------------------------------------- */

.agg-card {
    background: var(--card-bg);
    border-radius: 8px;
    overflow: hidden;
    cursor: pointer;
    transition: transform 0.15s ease, background 0.15s ease;
    display: flex;
    flex-direction: column;
    border-left: 3px solid var(--pole-color, var(--border));
    position: relative;
}

.agg-card:hover {
    transform: translateY(-2px);
    background: var(--card-hover);
}

.agg-card__image {
    aspect-ratio: 16 / 9;
    background: var(--border);
    position: relative;
    overflow: hidden;
}

.agg-card__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.3s ease;
}

.agg-card:hover .agg-card__image img {
    transform: scale(1.05);
}

.agg-card__image--placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--pole-color, #2c3a4d) 0%, var(--border) 100%);
    color: rgba(255, 255, 255, 0.7);
    font-size: 28px;
    font-weight: bold;
    text-transform: uppercase;
}

.agg-card__ton {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: 2px solid var(--card-bg);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.agg-card__ton--positif { background: var(--ton-positif); }
.agg-card__ton--negatif { background: var(--ton-negatif); }
.agg-card__ton--neutre  { background: var(--ton-neutre); }

.agg-card__body {
    padding: 12px;
    display: flex;
    flex-direction: column;
    flex: 1;
    gap: 8px;
}

.agg-card__titre {
    font-size: 14px;
    font-weight: 600;
    line-height: 1.35;
    color: var(--text);
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.agg-card__extrait {
    font-size: 12px;
    line-height: 1.5;
    color: var(--text-muted);
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.agg-card__meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: auto;
    padding-top: 8px;
    border-top: 1px solid var(--border);
    font-size: 11px;
    color: var(--text-muted);
}

.agg-card__source {
    color: var(--text);
    font-weight: 500;
}

.agg-card__heure {
    font-variant-numeric: tabular-nums;
}

/* ---------------------------------------------------------------------------
   Loader, empty, pagination
   --------------------------------------------------------------------------- */

.agg-timeline__loader {
    text-align: center;
    padding: 30px;
}

.agg-spinner {
    display: inline-block;
    width: 30px;
    height: 30px;
    border: 3px solid var(--border);
    border-top-color: var(--text);
    border-radius: 50%;
    animation: agg-spin 0.8s linear infinite;
}

@keyframes agg-spin {
    to { transform: rotate(360deg); }
}

.agg-timeline__empty {
    text-align: center;
    padding: 40px;
    color: var(--text-muted);
    font-style: italic;
}

.agg-timeline__pagination {
    text-align: center;
    margin-top: 20px;
}

.agg-load-more {
    background: var(--card-bg);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 10px 24px;
    font-size: 13px;
    cursor: pointer;
    font-family: inherit;
    transition: background 0.15s ease;
}

.agg-load-more:hover {
    background: var(--card-hover);
}

.agg-load-more:disabled {
    opacity: 0.5;
    cursor: wait;
}

/* ---------------------------------------------------------------------------
   Modal
   --------------------------------------------------------------------------- */

.agg-modal {
    position: fixed;
    inset: 0;
    z-index: 999999;
    display: flex;
    align-items: center;
    justify-content: center;
}

.agg-modal[hidden] { display: none; }

.agg-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(4px);
}

.agg-modal__panel {
    position: relative;
    background: var(--card-bg);
    color: var(--text);
    max-width: 780px;
    width: 92%;
    max-height: 90vh;
    overflow-y: auto;
    border-radius: 10px;
    padding: 24px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}

.agg-modal__close {
    position: absolute;
    top: 12px;
    right: 12px;
    background: transparent;
    color: var(--text-muted);
    border: none;
    font-size: 28px;
    line-height: 1;
    cursor: pointer;
    padding: 4px 10px;
    border-radius: 4px;
}

.agg-modal__close:hover {
    background: var(--border);
    color: var(--text);
}

.agg-modal__content {
    font-size: 14px;
    line-height: 1.6;
}

.agg-modal__image {
    width: 100%;
    max-height: 320px;
    object-fit: cover;
    border-radius: 6px;
    margin-bottom: 16px;
}

.agg-modal__title {
    font-size: 22px;
    line-height: 1.3;
    font-weight: 600;
    margin: 0 0 12px;
}

.agg-modal__extrait {
    font-size: 15px;
    line-height: 1.6;
    color: var(--text-muted);
    margin-bottom: 20px;
}

.agg-modal__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    padding: 12px 0;
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    margin-bottom: 16px;
    font-size: 13px;
}

.agg-modal__meta span {
    color: var(--text-muted);
}

.agg-modal__meta strong {
    color: var(--text);
}

.agg-modal__cta {
    display: inline-block;
    background: var(--text);
    color: var(--bg);
    text-decoration: none;
    padding: 10px 20px;
    border-radius: 6px;
    font-weight: 600;
    font-size: 13px;
    transition: opacity 0.15s ease;
}

.agg-modal__cta:hover {
    opacity: 0.85;
    color: var(--bg);
}

/* Placeholder publicitaire (à remplacer par ton code pub) */
.agg-modal__ad {
    background: var(--bg);
    border: 1px dashed var(--border);
    border-radius: 6px;
    padding: 20px;
    text-align: center;
    color: var(--text-muted);
    font-size: 12px;
    margin: 16px 0;
}

/* ============================================================================
   Widgets additionnels : ticker, météo, top
   ============================================================================ */

/* ---------------------------------------------------------------------------
   Ticker (bandeau défilant)
   --------------------------------------------------------------------------- */

.agg-ticker {
    background: var(--bg, #0f1621);
    border-radius: 6px;
    padding: 10px 16px;
    overflow: hidden;
    position: relative;
}

.agg-ticker--scroll .agg-ticker__track {
    display: flex;
    gap: 40px;
    animation: agg-ticker-scroll 60s linear infinite;
    white-space: nowrap;
}

.agg-ticker--scroll:hover .agg-ticker__track {
    animation-play-state: paused;
}

@keyframes agg-ticker-scroll {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

.agg-ticker--list .agg-ticker__track {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.agg-ticker__item {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    color: var(--text, #e6ecf5);
    text-decoration: none;
    white-space: nowrap;
    flex-shrink: 0;
}

.agg-ticker--list .agg-ticker__item {
    white-space: normal;
    border-bottom: 1px solid var(--border, #2c3a4d);
    padding-bottom: 6px;
}

.agg-ticker__item:last-child {
    border-bottom: none;
}

.agg-ticker__item:hover {
    color: #fff;
}

.agg-ticker__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.agg-ticker__heure {
    color: var(--text-muted, #8b9cb3);
    font-size: 12px;
    font-variant-numeric: tabular-nums;
    flex-shrink: 0;
}

/* ---------------------------------------------------------------------------
   Météo sentimentale
   --------------------------------------------------------------------------- */

.agg-meteo {
    background: var(--card-bg, #1a2433);
    border-radius: 8px;
    padding: 20px;
    color: var(--text, #e6ecf5);
}

.agg-meteo__title {
    font-size: 14px;
    font-weight: 600;
    margin: 0 0 16px;
    color: var(--text-muted, #8b9cb3);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.agg-meteo__jauge {
    position: relative;
    height: 12px;
    border-radius: 6px;
    overflow: hidden;
    display: flex;
    margin-bottom: 12px;
    background: var(--border, #2c3a4d);
}

.agg-meteo__segment {
    height: 100%;
    transition: width 0.4s ease;
}

.agg-meteo__segment--negatif {
    background: linear-gradient(90deg, #c0392b 0%, #e74c3c 100%);
}

.agg-meteo__segment--positif {
    background: linear-gradient(90deg, #27ae60 0%, #2ecc71 100%);
}

.agg-meteo__curseur {
    position: absolute;
    top: -3px;
    width: 3px;
    height: 18px;
    background: #fff;
    border-radius: 2px;
    box-shadow: 0 0 6px rgba(255, 255, 255, 0.6);
    transform: translateX(-50%);
}

.agg-meteo__footer {
    display: flex;
    justify-content: space-between;
    font-size: 13px;
    color: var(--text-muted, #8b9cb3);
}

.agg-meteo__valeur {
    font-weight: 700;
    font-size: 20px;
    color: var(--text, #e6ecf5);
}

.agg-meteo__label {
    font-size: 12px;
}

.agg-meteo__neutres {
    font-size: 11px;
    color: var(--text-muted, #8b9cb3);
    opacity: 0.7;
    margin-top: 8px;
}

/* ---------------------------------------------------------------------------
   Top (derniers arrivés)
   --------------------------------------------------------------------------- */

.agg-top {
    background: var(--card-bg, #1a2433);
    border-radius: 8px;
    padding: 16px;
}

.agg-top__title {
    font-size: 14px;
    font-weight: 600;
    margin: 0 0 12px;
    color: var(--text-muted, #8b9cb3);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.agg-top__list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.agg-top__item {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    padding: 8px 0;
    border-bottom: 1px solid var(--border, #2c3a4d);
}

.agg-top__item:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.agg-top__badge {
    flex-shrink: 0;
    font-size: 11px;
    padding: 3px 8px;
    border-radius: 10px;
    font-weight: 600;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.agg-top__badge--positif { background: #2ecc71; }
.agg-top__badge--negatif { background: #e74c3c; }
.agg-top__badge--neutre  { background: #7f8c8d; }

.agg-top__contenu {
    flex: 1;
    min-width: 0;
}

.agg-top__titre {
    font-size: 13px;
    line-height: 1.4;
    color: var(--text, #e6ecf5);
    text-decoration: none;
    display: block;
    font-weight: 500;
}

.agg-top__titre:hover {
    color: #fff;
}

.agg-top__meta {
    font-size: 11px;
    color: var(--text-muted, #8b9cb3);
    margin-top: 3px;
}


/* ---------------------------------------------------------------------------
   FIX modal timeline : variables CSS manquantes hors de .agg-timeline
   --------------------------------------------------------------------------- */

.agg-modal {
    --bg:            #0f1621;
    --card-bg:       #1a2433;
    --card-hover:    #243347;
    --text:          #e6ecf5;
    --text-muted:    #8b9cb3;
    --border:        #2c3a4d;
    --ton-positif:   #2ecc71;
    --ton-negatif:   #e74c3c;
    --ton-neutre:    #7f8c8d;
}

.agg-modal__panel {
    background: var(--card-bg) !important;
    color: var(--text) !important;
    z-index: 2;
}

.agg-modal__backdrop {
    z-index: 1;
}

/* ---------------------------------------------------------------------------
   FINAL — Croix du modal timeline ultra-visible
   --------------------------------------------------------------------------- */

.agg-modal__close {
    position: absolute !important;
    top: 10px !important;
    right: 10px !important;
    background: #ffffff !important;
    color: #0f1621 !important;
    border: 2px solid rgba(0, 0, 0, 0.15) !important;
    width: 42px !important;
    height: 42px !important;
    padding: 0 !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 22px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    cursor: pointer !important;
    z-index: 999 !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.7) !important;
    transition: transform 0.15s ease !important;
}

.agg-modal__close:hover {
    transform: scale(1.1) !important;
    background: #e6ecf5 !important;
}

/* ---------------------------------------------------------------------------
   Archives
   --------------------------------------------------------------------------- */

.agg-archives {
    --bg:         #0f1621;
    --card-bg:    #1a2433;
    --card-hover: #243347;
    --text:       #e6ecf5;
    --text-muted: #8b9cb3;
    --border:     #2c3a4d;

    background: var(--bg);
    color: var(--text);
    padding: 20px;
    border-radius: 8px;
}

.agg-archives__header {
    margin-bottom: 16px;
}

.agg-archives__titre {
    margin: 0 0 12px;
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.agg-archives__jours {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    max-height: 220px;
    overflow-y: auto;
    padding: 4px 0;
}

.agg-archives__jour {
    background: transparent;
    color: var(--text-muted);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 6px 12px;
    font-size: 12px;
    font-family: inherit;
    cursor: pointer;
    transition: all 0.15s ease;
    text-align: left;
}

.agg-archives__jour:hover {
    background: var(--card-bg);
    color: var(--text);
}

.agg-archives__jour.is-active {
    background: var(--text);
    color: var(--bg);
    border-color: var(--text);
}

.agg-archives__jour strong {
    display: block;
    font-weight: 600;
}

.agg-archives__jour small {
    opacity: 0.7;
    font-size: 10px;
}

.agg-archives__grille {
    margin-top: 16px;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 12px;
}

.agg-archives__hint {
    color: var(--text-muted);
    font-style: italic;
    grid-column: 1 / -1;
    text-align: center;
    padding: 30px;
}

.agg-archives__card {
    background: var(--card-bg);
    border-radius: 6px;
    overflow: hidden;
    cursor: pointer;
    transition: transform 0.15s ease, background 0.15s ease;
    border-left: 3px solid var(--border);
}

.agg-archives__card:hover {
    transform: translateY(-2px);
    background: var(--card-hover);
}

.agg-archives__card-img {
    aspect-ratio: 16/9;
    background: var(--border);
    overflow: hidden;
}

.agg-archives__card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.agg-archives__card-body {
    padding: 10px;
}

.agg-archives__card-titre {
    font-size: 13px;
    font-weight: 500;
    line-height: 1.35;
    margin: 0 0 6px;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    color: var(--text);
}

.agg-archives__card-meta {
    font-size: 11px;
    color: var(--text-muted);
    display: flex;
    justify-content: space-between;
}

/* ---------------------------------------------------------------------------
   Calendrier des archives
   --------------------------------------------------------------------------- */

.agg-archives__calendrier {
    background: var(--card-bg);
    border-radius: 8px;
    padding: 16px;
    margin-bottom: 20px;
    max-width: 420px;
}

.agg-cal__barre {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}

.agg-cal__titre {
    font-size: 14px;
    font-weight: 600;
    text-transform: capitalize;
    color: var(--text);
}

.agg-cal__nav {
    display: flex;
    gap: 4px;
}

.agg-cal__nav button {
    background: transparent;
    color: var(--text-muted);
    border: 1px solid var(--border);
    border-radius: 6px;
    width: 28px;
    height: 28px;
    cursor: pointer;
    font-family: inherit;
    font-size: 14px;
    line-height: 1;
    transition: all 0.15s ease;
}

.agg-cal__nav button:hover:not(:disabled) {
    background: var(--border);
    color: var(--text);
}

.agg-cal__nav button:disabled {
    opacity: 0.3;
    cursor: default;
}

.agg-cal__grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 4px;
}

.agg-cal__jour-semaine {
    text-align: center;
    font-size: 10px;
    color: var(--text-muted);
    text-transform: uppercase;
    padding: 4px 0;
    font-weight: 600;
}

.agg-cal__jour {
    aspect-ratio: 1;
    background: transparent;
    color: var(--text-muted);
    border: 1px solid transparent;
    border-radius: 6px;
    font-size: 12px;
    font-family: inherit;
    cursor: default;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    position: relative;
    transition: all 0.15s ease;
}

.agg-cal__jour--vide {
    opacity: 0.15;
}

.agg-cal__jour--actif {
    background: rgba(102, 126, 234, 0.15);
    border-color: rgba(102, 126, 234, 0.4);
    color: var(--text);
    cursor: pointer;
    font-weight: 600;
}

.agg-cal__jour--actif:hover {
    background: rgba(102, 126, 234, 0.3);
    border-color: rgba(102, 126, 234, 0.7);
    transform: scale(1.05);
}

.agg-cal__jour--selection {
    background: var(--text) !important;
    border-color: var(--text) !important;
    color: var(--bg) !important;
}

.agg-cal__compteur {
    font-size: 9px;
    opacity: 0.7;
    line-height: 1;
}

.agg-cal__jour--selection .agg-cal__compteur {
    color: var(--bg);
    opacity: 0.6;
}

.agg-cal__jour-num {
    line-height: 1;
}

/* ---------------------------------------------------------------------------
   Calendrier repliable
   --------------------------------------------------------------------------- */

.agg-archives__toggle {
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--card-bg);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 10px 16px;
    font-size: 13px;
    font-family: inherit;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s ease;
    margin-bottom: 12px;
}

.agg-archives__toggle:hover {
    background: var(--card-hover);
    border-color: var(--text-muted);
}

.agg-archives__chevron {
    font-size: 10px;
    color: var(--text-muted);
    transition: transform 0.2s ease;
    margin-left: auto;
}

.agg-archives__toggle.is-open .agg-archives__chevron {
    transform: rotate(180deg);
}

/* Calendrier avec animation d'ouverture */
.agg-archives__calendrier {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.25s ease, opacity 0.2s ease, margin 0.2s ease;
    opacity: 0;
    margin-bottom: 0;
}

.agg-archives__calendrier:not([hidden]) {
    max-height: 500px;
    opacity: 1;
    margin-bottom: 16px;
}

/* On réduit la largeur max du calendrier */
.agg-archives__calendrier {
    max-width: 340px;
}

.agg-cal__jour {
    font-size: 11px;
}

.agg-cal__compteur {
    font-size: 8px;
}

.agg-cal__jour-semaine {
    font-size: 9px;
}

/* ---------------------------------------------------------------------------
   Bouton partager + toast
   --------------------------------------------------------------------------- */

.agg-modal__head {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 12px;
}

.agg-modal__head .agg-modal__title {
    flex: 1;
    margin: 0;
}

.agg-modal__share {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: transparent;
    color: var(--text, #e6ecf5);
    border: 1px solid var(--border, #2c3a4d);
    border-radius: 6px;
    padding: 6px 12px;
    font-size: 12px;
    font-weight: 500;
    font-family: inherit;
    cursor: pointer;
    transition: all 0.15s ease;
    white-space: nowrap;
}

.agg-modal__share:hover {
    background: var(--border, #2c3a4d);
    border-color: #38bdf8;
    color: #38bdf8;
}

.agg-modal__share svg {
    flex-shrink: 0;
}

/* Toast de feedback */
.agg-share-toast {
    position: fixed;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    background: #38bdf8;
    color: #070b12;
    padding: 12px 24px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
    z-index: 999999;
    animation: agg-toast-in 0.3s ease;
}

.agg-share-toast--out {
    animation: agg-toast-out 0.4s ease forwards;
}

@keyframes agg-toast-in {
    from { opacity: 0; transform: translateX(-50%) translateY(20px); }
    to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}

@keyframes agg-toast-out {
    from { opacity: 1; transform: translateX(-50%) translateY(0); }
    to   { opacity: 0; transform: translateX(-50%) translateY(20px); }
}

/* Adaptation mobile */
@media (max-width: 600px) {
    .agg-modal__share span {
        display: none;
    }
    .agg-modal__share {
        padding: 8px;
    }
}

/* ============================================================================
   Mobile : timeline en pleine largeur
   ============================================================================ */
@media (max-width: 767px) {

    /* 1. Le conteneur perd son padding et ses arrondis */
    .agg-timeline {
        padding: 0 !important;
        border-radius: 0 !important;
    }

    /* 2. Les cartes touchent les bords : pas d'arrondis superflus */
    .agg-card {
        border-radius: 0 !important;
    }

    /* 3. Un peu de respiration interne pour la toolbar, le loader,
          l'état vide et la pagination, sinon c'est trop collé au texte */
    .agg-timeline__toolbar,
    .agg-timeline__loader,
    .agg-timeline__empty,
    .agg-timeline__pagination {
        padding-left: 14px !important;
        padding-right: 14px !important;
    }

    /* 4. Espacement vertical entre les cartes un peu réduit */
    .agg-timeline__grid {
        gap: 10px !important;
    }
}
@media (max-width: 767px) {

    /* Sortir de tout padding du parent en calculant
       l'écart entre 50% de la largeur du parent et 50% du viewport */
    .agg-timeline {
        width: 100vw !important;
        max-width: 100vw !important;
        margin-left: calc(50% - 50vw) !important;
        margin-right: calc(50% - 50vw) !important;
        box-sizing: border-box;
    }
}