/* @layer-wrap:site.elements */
@layer site.elements {
/* Version: 18-10-2026-elements */
/* Éléments de contenu — events (venu de design/matrices/base.css, lot C1 de plan-elements-contenu.md ;
   ordre de chargement : portfolios_content_element_sheets()). */

/* ==========================================================================
   6. Agenda
   Balisage : ul#agenda-list[data-events-layout] > a.agenda-item
              > ul > li.date (p.date-day, p.date-month, p année) + ul (h3, description, lieu, heure)
   (`cards` = rendu historique, agenda.css)
   ========================================================================== */

#portfolio_page #agenda-list[data-events-layout] {
    margin: 0;
    padding: 0;
    list-style: none;
}

/* Lignes compactes : date en ligne, filets fins */
#portfolio_page #agenda-list[data-events-layout="list"] .agenda-item {
    align-items: center;
    margin: 0;
    padding: calc(1rem * var(--pf-density-pad, 1)) 0;
}

#portfolio_page #agenda-list[data-events-layout="list"] .agenda-item .date {
    flex-direction: row;
    gap: calc(0.4em * var(--pf-density-gap, 1));
    min-width: 11rem;
    min-height: 0;
    margin-right: 1.5rem;
    padding: 0;
    background: transparent;
}

#portfolio_page #agenda-list[data-events-layout="list"] .agenda-item .date,
#portfolio_page #agenda-list[data-events-layout="list"] .agenda-item .date p {
    color: var(--portfolios-badge-text-color, var(--portfolios-badge-color, var(--portfolios-text-main-color, inherit)));
}

#portfolio_page #agenda-list[data-events-layout="list"] .agenda-item ul li:not(.date) {
    margin-bottom: 0.35rem;
}

#portfolio_page #agenda-list[data-events-layout="list"] .agenda-item .agenda-item-description {
    margin-bottom: 0.35rem;
}

#portfolio_page #agenda-list[data-events-layout="list"] .agenda-item .agenda-item-open {
    position: static;
    margin-left: auto;
}

/* Frise chronologique : axe vertical, pastille par date */
#portfolio_page #agenda-list[data-events-layout="journal"] {
    position: relative;
    padding-left: calc(2rem * var(--pf-density-pad, 1));
}

#portfolio_page #agenda-list[data-events-layout="journal"]::before {
    content: "";
    position: absolute;
    top: 0.5rem;
    bottom: 0.5rem;
    left: 0.45rem;
    width: 2px;
    background: var(--pf-accent);
    opacity: 0.4;
}

#portfolio_page #agenda-list[data-events-layout="journal"] .agenda-item {
    flex-direction: column;
    margin-bottom: 2rem;
    padding: 0 0 0 calc(1rem * var(--pf-density-pad, 1));
}

#portfolio_page #agenda-list[data-events-layout="journal"] .agenda-item::before {
    content: "";
    position: absolute;
    top: 0.35rem;
    left: -1.95rem;
    width: 0.9rem;
    height: 0.9rem;
    border-radius: 50%;
    background: var(--pf-accent);
    box-shadow: 0 0 0 4px var(--pf-surface);
}

#portfolio_page #agenda-list[data-events-layout="journal"] .agenda-item .date {
    flex-direction: row;
    justify-content: flex-start;
    gap: calc(0.4em * var(--pf-density-gap, 1));
    min-width: 0;
    min-height: 0;
    margin: 0 0 0.5rem;
    padding: 0;
    background: transparent;
    font-size: var(--portfolios-badge-size, 0.9em);
    letter-spacing: 0.06em;
    text-transform: var(--portfolios-badge-transform, uppercase);
}

#portfolio_page #agenda-list[data-events-layout="journal"] .agenda-item .date,
#portfolio_page #agenda-list[data-events-layout="journal"] .agenda-item .date p {
    color: var(--portfolios-badge-text-color, var(--portfolios-badge-color, var(--pf-accent)));
}

#portfolio_page #agenda-list[data-events-layout="journal"] .agenda-item .agenda-item-open {
    top: 0;
    right: 0;
    bottom: auto;
}

/* Feuillets de calendrier : cartes en grille, page de calendrier en tête */
#portfolio_page #agenda-list[data-events-layout="bento"] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
    gap: var(--layout-gap, 20px);
}

#portfolio_page #agenda-list[data-events-layout="bento"] .agenda-item {
    flex-direction: column;
    margin: 0;
    padding: 0 0 calc(1.5rem * var(--pf-density-pad, 1));
    overflow: hidden;
}

#portfolio_page #agenda-list[data-events-layout="bento"] .agenda-item .date {
    width: 100%;
    min-height: 0;
    margin: 0 0 1.25rem;
    padding: calc(0.5rem * var(--portfolios-badge-pad, 1)) calc(1rem * var(--portfolios-badge-pad, 1)) calc(1rem * var(--portfolios-badge-pad, 1));
    border-radius: var(--portfolios-badge-radius, 0);
}

#portfolio_page #agenda-list[data-events-layout="bento"] .agenda-item .date-month {
    order: -1;
    width: calc(100% + 2rem);
    margin: 0 -1rem 0.5rem;
    padding: calc(0.3rem * var(--pf-density-pad, 1));
    text-align: center;
    background: color-mix(in srgb, var(--pf-accent) 70%, var(--pf-ink));
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

#portfolio_page #agenda-list[data-events-layout="bento"] .agenda-item .date-day {
    font-size: 3em;
    line-height: 1;
}

#portfolio_page #agenda-list[data-events-layout="bento"] .agenda-item > ul:not(:first-child) {
    padding: 0 calc(1.25rem * var(--pf-density-pad, 1));
}

#portfolio_page #agenda-list[data-events-layout="bento"] .agenda-item .agenda-item-open {
    right: 1.25rem;
    bottom: 1.25rem;
}

/* Affiches : jour en très grand, typographie d'affiche */
#portfolio_page #agenda-list[data-events-layout="feature"] .agenda-item {
    align-items: stretch;
    /* Les thèmes posent contour, ombre ou fond sur l'affiche : le texte ne touche pas ses bords. */
    padding: calc(1.25rem * var(--pf-density-pad, 1)) calc(1.5rem * var(--pf-density-pad, 1));
    margin-bottom: 2.5rem;
}

#portfolio_page #agenda-list[data-events-layout="feature"] .agenda-item .date {
    align-items: flex-start;
    justify-content: flex-start;
    min-width: 12rem;
    min-height: 0;
    padding: 0;
    background: transparent;
}

#portfolio_page #agenda-list[data-events-layout="feature"] .agenda-item .date,
#portfolio_page #agenda-list[data-events-layout="feature"] .agenda-item .date p {
    color: var(--portfolios-badge-text-color, var(--portfolios-badge-color, var(--portfolios-text-main-color, inherit)));
}

#portfolio_page #agenda-list[data-events-layout="feature"] .agenda-item .date-day {
    font-size: clamp(3.5rem, 9vw, 7rem);
    line-height: 0.85;
    letter-spacing: -0.04em;
}

#portfolio_page #agenda-list[data-events-layout="feature"] .agenda-item .date-month {
    text-transform: uppercase;
    letter-spacing: 0.12em;
}

#portfolio_page #agenda-list[data-events-layout="feature"] .agenda-item ul li:not(.date) :is(h2, h3) {
    font-size: calc(var(--portfolios-heading-secondary-size) * 1.4);
    line-height: 1.1;
    text-transform: var(--portfolios-title-transform, uppercase);
}

#portfolio_page #agenda-list[data-events-layout="feature"] .agenda-item .agenda-item-open {
    top: 1.25rem;
    right: 0;
    bottom: auto;
}

/* Texte seul : pas de pavé daté, date en petite ligne au-dessus du titre */
#portfolio_page #agenda-list[data-events-layout="minimal"] .agenda-item {
    flex-direction: column;
    padding: 0;
    margin-bottom: 2rem;
}

#portfolio_page #agenda-list[data-events-layout="minimal"] .agenda-item .date {
    flex-direction: row;
    justify-content: flex-start;
    gap: calc(0.35em * var(--pf-density-gap, 1));
    min-width: 0;
    min-height: 0;
    margin: 0 0 0.35rem;
    padding: 0;
    background: transparent;
    font-size: var(--portfolios-badge-size, 0.85em);
    opacity: 0.65;
}

#portfolio_page #agenda-list[data-events-layout="minimal"] .agenda-item .date,
#portfolio_page #agenda-list[data-events-layout="minimal"] .agenda-item .date p {
    color: var(--portfolios-badge-text-color, var(--portfolios-badge-color, var(--portfolios-text-main-color, inherit)));
    font-weight: normal;
}

#portfolio_page #agenda-list[data-events-layout="minimal"] .agenda-item ul li svg,
#portfolio_page #agenda-list[data-events-layout="minimal"] .agenda-item .agenda-item-open {
    display: none;
}

#portfolio_page #agenda-list[data-events-layout="minimal"] .agenda-item ul li:not(.date) {
    margin-bottom: 0.25rem;
}

#portfolio_page #agenda-list[data-events-layout="minimal"] .agenda-item .agenda-item-description {
    font-weight: normal;
    margin-bottom: 0.25rem;
}

@media (max-width: 1100px) {
    /* Empilé : le centrage vertical de l'ordinateur (align-items) centrerait tout à l'horizontale. Aligné à
       gauche, centré seulement quand le titre de la section l'est. */
    #portfolio_page #agenda-list:is([data-events-layout="list"], [data-events-layout="feature"]) .agenda-item {
        flex-direction: column;
        align-items: stretch;
    }

    #portfolio_page #agenda-list:is([data-events-layout="list"], [data-events-layout="feature"]) .agenda-item .date {
        justify-content: flex-start;
        min-width: 0;
        margin: 0 0 0.5rem;
    }

    #portfolio_page section:has(.title-align-center) #agenda-list:is([data-events-layout="list"], [data-events-layout="feature"]) .agenda-item {
        align-items: center;
        text-align: center;
    }

    #portfolio_page section:has(.title-align-center) #agenda-list:is([data-events-layout="list"], [data-events-layout="feature"]) .agenda-item :is(.date, ul li:not(.date)) {
        justify-content: center;
    }
}
}