/* ==========================================================================
   Programme 2026 - shared styles for pollen_prog_anchors, _tableau, _jours
   ========================================================================== */

html {
    scroll-behavior: smooth;
}

/* --------------------------------------------------------------------------
   A - Anchors (day navigation pills)
   -------------------------------------------------------------------------- */

.pollen-prog-anchors {
    display: flex;
    flex-wrap: wrap;
    gap: var(--at-space--m, 1.2rem);
    align-items: center;
    justify-content: center;
    padding: 1rem 0;
}

.pollen-prog-anchors__group {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
}

.pollen-prog-anchors__group-label {
    font-size: 0.75em;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--black-t-8, rgba(17, 17, 17, 0.8));
    white-space: nowrap;
    margin-right: 0.15rem;
}

.pollen-prog-anchors__pill {
    display: inline-block;
    border-radius: var(--at-radius--l);
    font-weight: 500;
    padding: calc(var(--at-space--2xs)/2) calc(var(--at-space--xs));
    text-decoration: none;
    color: var(--black, #111);
    cursor: pointer;
}

/* bgcolor by data-color-index: 0=violet, 1=orange, 2=jaune */

.pollen-prog-anchors__pill[data-color-index="0"] {
    background-color: var(--violet-2026, #c000ff) !important;
    color: var(--white, #fff);
}

.pollen-prog-anchors__pill[data-color-index="1"] {
    background-color: var(--orange-2026, #f74b01) !important;
    color: var(--white, #fff);
    text-shadow: 0 0 2px var(--black-t-8, rgba(17, 17, 17, 0.8));
}

.pollen-prog-anchors__pill[data-color-index="2"] {
    background-color: var(--yellow-2026, #ffea00) !important;
    color: var(--black, #111);
}

/* Hover: fill with the border colour */

.pollen-prog-anchors__pill[data-color-index="0"]:hover {
    background-color: var(--violet-2026, #c000ff);
    color: #fff;
}

.pollen-prog-anchors__pill[data-color-index="1"]:hover {
    background-color: var(--orange-2026, #f74b01);
    color: #fff;
}

.pollen-prog-anchors__pill[data-color-index="2"]:hover {
    background-color: var(--yellow-2026, #ffea00);
    color: var(--black, #111);
}

/* --------------------------------------------------------------------------
   B - Tableau (3-column schedule grid)
   -------------------------------------------------------------------------- */

.pollen-prog-tableau {
    display: flex;
    flex-wrap: wrap;
    gap: 2rem;
    align-items: flex-start;
}

.pollen-prog-tableau__col {
    flex: 1 1 280px;
}

/* Column header - coloured bar per discipline */

.pollen-prog-tableau__head {
    font-weight: 700;
    font-size: var(--at-text--s, 1.5em);
    padding: 0.6rem 1rem;
    margin: 0 0 1rem;
    color: var(--black, #111);
}

.pollen-prog-tableau__col[data-discipline="musique"]      .pollen-prog-tableau__head {
    background-color: var(--yellow-2026, #ffea00);
}

.pollen-prog-tableau__col[data-discipline="arts-vivants"] .pollen-prog-tableau__head {
    background-color: var(--orange-2026, #f74b01);
    color: #fff;
}

.pollen-prog-tableau__col[data-discipline="arts-visuels"] .pollen-prog-tableau__head {
    background-color: var(--violet-2026, #c000ff);
    color: #fff;
}

/* Day group inside a column */
.pollen-prog-tableau__day-group {
    margin-bottom: 1.25rem;
}

/* Day pill - small color tag */
.pollen-prog-tableau__day-pill {
    display: inline-block;
    background-color: var(--black, #111);
    color: #fff;
    font-size: var(--at-text--s, 0.9em);
    font-weight: 600;
    padding: 0.2rem 0.65rem;
    border-radius: 0 999px 999px 0;
    letter-spacing: 0.02em;
}


div[data-discipline="musique"] .pollen-prog-tableau__day-pill {
    background-color: var(--yellow-2026, #ffea00);
    color: var(--black, #111);
}
div[data-discipline="arts-vivants"] .pollen-prog-tableau__day-pill {
    background-color: var(--orange-2026, #f74b01);
    color: #fff;
}
div[data-discipline="arts-visuels"] .pollen-prog-tableau__day-pill {
    background-color: var(--violet-2026, #c000ff);
    color: #fff;
}

/* Left border on event list to visually link it to the header and day pill */
div[data-discipline="musique"] .pollen-prog-tableau__events{
    border-left: 2px solid var(--yellow-2026, #ffea00);
}
div[data-discipline="arts-vivants"] .pollen-prog-tableau__events {
    border-left: 2px solid var(--orange-2026, #f74b01);
}
div[data-discipline="arts-visuels"] .pollen-prog-tableau__events, .pollen-prog-tableau__continuous ul {
    border-left: 2px solid var(--violet-2026, #c000ff);
}
/* Event list */

.pollen-prog-tableau__events,
.pollen-prog-tableau__continuous ul {
    list-style: none;
    margin: 0;
    padding: 0;
    line-height: 1.7;
}

.pollen-prog-tableau__events li,
.pollen-prog-tableau__continuous li {
    margin-bottom: 0.2rem;
    padding-left: var(--at-space--xs, 0.5rem);
}

.pollen-prog-tableau__events a,
.pollen-prog-tableau__continuous a {
    color: var(--black, #111);
    text-decoration: none;
    font-weight: 500;
}

.pollen-prog-tableau__col[data-discipline="musique"] .pollen-prog-tableau__events a:hover,
.pollen-prog-tableau__col[data-discipline="musique"] .pollen-prog-tableau__continuous a:hover {
    text-decoration: underline;
    text-decoration-color: var(--yellow-2026, #ffea00);
    text-underline-offset: 3px;
}

.pollen-prog-tableau__col[data-discipline="arts-vivants"] .pollen-prog-tableau__events a:hover,
.pollen-prog-tableau__col[data-discipline="arts-vivants"] .pollen-prog-tableau__continuous a:hover {
    text-decoration: underline;
    text-decoration-color: var(--orange-2026, #f74b01);
    text-underline-offset: 3px;
}

.pollen-prog-tableau__col[data-discipline="arts-visuels"] .pollen-prog-tableau__events a:hover,
.pollen-prog-tableau__col[data-discipline="arts-visuels"] .pollen-prog-tableau__continuous a:hover {
    text-decoration: underline;
    text-decoration-color: var(--violet-2026, #c000ff);
    text-underline-offset: 3px;
}

.pollen-prog-tableau__events .origine,
.pollen-prog-tableau__continuous .origine {
    font-size: 0.65em;
    opacity: 0.7;
    margin-left: 0.25em;
    font-weight: 600;
}

.pollen-prog-tableau__events .sous-titre,
.pollen-prog-tableau__continuous .sous-titre {
    display: block;
    font-size: var(--at-text--xs);
    opacity: 0.8;
    font-style: italic;
    line-height: 1.3;
    margin-top: 0.05rem;
}

/* DJ disk icon - spinning container + pulsing image */

.pollen-prog-dj-icon {
    display: inline-block;
    width: 1em;
    height: 1em;
    margin-right: 0.35em;
    vertical-align: middle;
    transform-origin: center;
    animation: pollen-spin 4s linear infinite;
}

.pollen-prog-dj-icon img {
    display: block;
    width: 100%;
    height: 100%;
    transform-origin: center;
    animation: pollen-pulse 1s ease-in-out infinite;
}

@keyframes pollen-spin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

@keyframes pollen-pulse {
    0%, 80%, 100% { transform: scale(1); }
    90%           { transform: scale(1.15); }
}

/* Continuous sub-section */

.pollen-prog-tableau__continuous {
    margin-top: 1.5rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(0, 0, 0, 0.12);
}
/*
.pollen-prog-tableau__continuous h4 {
    font-size: var(--at-text--xs);
    text-transform: uppercase;
    margin: 0 0 0.6rem;
    background-color: var(--violet-2026, #c000ff);
    color: var(--white, #fff);
}*/

/* Empty column */

.pollen-prog-tableau__empty {
    color: #aaa;
    font-size: var(--at-text--s, 0.9rem);
    font-style: italic;
}

/* --------------------------------------------------------------------------
   C - Jours (chronological per-day card grid)
   -------------------------------------------------------------------------- */

.pollen-prog-jours__day {
    margin-bottom: 3rem;
    scroll-margin-top: 100px;
}

.pollen-prog-jours__day-head {
    margin-bottom: 1.25rem;
}

.pollen-prog-jours__day-head h2 {
    font-weight: 700;
    margin: 0 0 0.25rem;
}

.pollen-prog-jours__day-head .horaires {
    opacity: 0.6;
    margin: 0;
}

.pollen-prog-jours__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
}

.pollen-prog-jours__grid > * {
    min-width: 0;
    width: 100%;
}

.pollen-prog-jours__continuous .pollen-prog-jours__grid {
    grid-template-columns: repeat(4, 1fr);
}

@media (max-width: 1024px) {
    .pollen-prog-jours__grid,
    .pollen-prog-jours__continuous .pollen-prog-jours__grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 640px) {
    .pollen-prog-jours__grid,
    .pollen-prog-jours__continuous .pollen-prog-jours__grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Continuous bandeau - tinted violet background */

.pollen-prog-jours__continuous {
    margin-bottom: 3rem;
    padding: 2rem;
    background-color: color-mix(in srgb, var(--violet-2026, #c000ff) 8%, transparent);
    border-radius: 4px;
}

.pollen-prog-jours__continuous h3 {
    font-size: var(--at-text--m);
    font-weight: 600;
    margin: 0 0 1.25rem;
    color: var(--violet-2026, #c000ff);
}

/* --------------------------------------------------------------------------
   D - DJ-set inline strip (below card grid, one per DJ per day)
   -------------------------------------------------------------------------- */

.pollen-prog-jours__dj-list {
    margin-top: 1.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
}

.pollen-prog-jours__dj-strip {
    display: inline-flex;
    align-items: center;
    gap: 1rem;
    text-align: center;
    color: var(--black, #111);
    text-decoration: none;
    transition: transform 0.2s ease;
}

.pollen-prog-jours__dj-strip:hover {
    transform: scale(1.06);
}

.pollen-prog-jours__dj-strip .pollen-prog-dj-icon {
    margin: 0;
}

.pollen-prog-jours__dj-info {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.1rem;
}

.pollen-prog-jours__dj-time {
    font-weight: 700;
}

.pollen-prog-jours__dj-title {
    color: var(--black, #111);
    text-decoration: underline;
    text-decoration-color: var(--yellow-2026, #ffea00);
    text-underline-offset: 3px;
    text-decoration-thickness: 6px;
    font-weight: 600;
}


.pollen-prog-jours__dj-title .origine {
    font-size: 0.65em;
    opacity: 0.7;
    padding-left: 0.25em;
    font-weight: 600;
}

.pollen-prog-jours__dj-sous-titre {
    font-size: var(--at-text--xs);
    opacity: 0.8;
    font-style: italic;
}