/*
 * layout_as_evenements.css
 * Agenda événements publics — La Chapelle en Vercors
 * Palette : vert forêt #1E4D0F · calcaire #F2EFE8 · encre #1F1D17
 */


/* ── Reset skin pour ce layout ───────────────────────────────────────────── */
#page_minitools { float: none; }

.lae-wrapper a,
.lae-wrapper a:visited,
.lae-wrapper a:hover,
.lae-wrapper a:active {
    color: inherit;
    background-color: transparent;
    border-radius: 0;
    text-decoration: none;
}

/* La carte est un <a> — couleur explicite pour battre les règles YACS */
.lae-wrapper .lae-card,
.lae-wrapper .lae-card:visited,
.lae-wrapper .lae-card:active {
    color: #1F1D17;
}


/* ══ Barre de filtres ════════════════════════════════════════════════════════ */

.lae-filter-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 10px 0 18px;
    align-items: center;
}

.lae-filter-btn {
    padding: 5px 14px;
    border: 2px solid transparent;
    border-radius: 20px;
    cursor: pointer;
    font-size: .82em;
    font-weight: 600;
    line-height: 1.5;
    background: #e8ede5;
    color: #3d4a36;
    transition: background .15s, color .15s, border-color .15s;
    white-space: nowrap;
}
.lae-filter-btn:hover {
    background: #d0dbc9;
    color: #1E4D0F;
}
.lae-filter-btn.lae-filter-active {
    background: var(--lae-color, #1E4D0F);
    color: #fff;
    border-color: transparent;
}
/* Bouton "Toutes communes" actif : vert forêt */
.lae-filter-btn[data-commune=""].lae-filter-active {
    --lae-color: #1E4D0F;
}

/* Bouton "événements passés" — séparé à droite */
.lae-past-toggle {
    margin-left: auto;
    padding: 5px 14px;
    border: 2px solid #c6cfbe;
    border-radius: 20px;
    cursor: pointer;
    font-size: .82em;
    font-weight: 600;
    line-height: 1.5;
    background: transparent;
    color: #3d4a36;
    transition: background .15s, color .15s, border-color .15s;
    white-space: nowrap;
}
.lae-past-toggle:hover {
    background: #e8ede5;
    color: #1E4D0F;
}
.lae-past-toggle[aria-pressed="true"] {
    background: #3d4a36;
    border-color: #3d4a36;
    color: #fff;
}

/* Masquage par défaut (avant et hors action JS) des événements terminés */
.lae-wrapper:not(.lae-show-past) .lae-card[data-past="1"] {
    display: none;
}
.lae-wrapper:not(.lae-show-past) .lae-month-group[data-allpast="1"] {
    display: none;
}

/* Carte d'un événement terminé, une fois révélée : atténuée */
.lae-show-past .lae-card-past {
    opacity: .72;
}


/* ══ Groupe mois ═════════════════════════════════════════════════════════════ */

.lae-months {
    display: flex;
    flex-direction: column;
    gap: 28px;
}

.lae-month-group {
    /* section HTML sans style par défaut */
}

/* .chapelle-content h2 a une spécificité 0-1-1 — on monte à 0-2-0 pour gagner */
.lae-wrapper .lae-month-header {
    font-size: 1.1em;
    font-weight: 700;
    text-transform: capitalize;
    color: #fff;
    background: #1E4D0F;
    padding: 6px 14px;
    margin: 0 0 12px;
    border-radius: 3px;
    letter-spacing: .02em;
}


/* ══ Grille de cartes ════════════════════════════════════════════════════════ */

.lae-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}

@media (max-width: 900px) {
    .lae-cards { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 540px) {
    .lae-cards { grid-template-columns: 1fr; }
}


/* ══ Carte événement ═════════════════════════════════════════════════════════ */

.lae-wrapper .lae-card {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 12px 14px;
    background: #fff;
    border-left: 4px solid var(--lae-border, #1E4D0F);
    border-radius: 0 4px 4px 0;
    box-shadow: 0 1px 4px rgba(0,0,0,.08);
    transition: box-shadow .15s, transform .1s;
    color: #1F1D17;
}
.lae-wrapper .lae-card:hover {
    box-shadow: 0 4px 12px rgba(0,0,0,.15);
    transform: translateY(-2px);
    color: #1F1D17;
    background: #fff;
}


/* ── Date ─────────────────────────────────────────────────────────────────── */
.lae-card-date {
    font-size: .8em;
    font-weight: 700;
    color: var(--lae-border, #1E4D0F);
    letter-spacing: .02em;
    line-height: 1.3;
}
.lae-card-date strong { font-weight: 800; }
.lae-card-date sup { font-size: .65em; }


/* ── Titre ────────────────────────────────────────────────────────────────── */
.lae-card-title {
    font-size: .95em;
    font-weight: 600;
    color: #1F1D17;
    line-height: 1.35;
}


/* ── Badges communes + type ───────────────────────────────────────────────── */
.lae-card-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 2px;
}

.lae-badge {
    display: inline-block;
    padding: 1px 8px;
    border-radius: 3px;
    font-size: .72em;
    font-weight: 600;
    line-height: 1.6;
    white-space: nowrap;
    /* background et color injectés en inline style pour les communes */
}

/* Badge type : fond calcaire, texte encre */
.lae-badge-type {
    background: #F2EFE8;
    color: #5C5749;
}


/* ── Introduction ─────────────────────────────────────────────────────────── */
/* ── Image carte ───────────────────────────────────────────────────────────── */
.lae-card-img {
    display:         block;
    width:           calc(100% + 28px);
    height:          160px;
    object-fit:      cover;
    object-position: top;        /* garde le haut de l'image (cohérent avec la home) */
    margin:          -12px -14px 6px;
    border-radius:   0 4px 0 0;
    flex-shrink:     0;
}

.lae-card-intro {
    font-size: .78em;
    color: #5C5749;
    line-height: 1.45;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}


/* ══ État : filtre actif — cartes masquées ═══════════════════════════════════ */
/* JS pose display:none directement sur .lae-card */
/* JS pose display:none sur .lae-month-group si aucune carte visible */


/* ══ Visibilité — page non publiée ═══════════════════════════════════════════
   Carte d'un événement privé ou réservé aux membres. Invisible du public : seuls
   associés, éditeurs assignés et propriétaires arrivent jusqu'ici. La pastille
   .chapelle-flag est stylée dans chapelle.scss (Skin::visibility_flag). */

.lae-card-flag {
    display: flex;
    margin-bottom: 2px;
}

.lae-wrapper .lae-card-unpublished {
    background: repeating-linear-gradient(
        135deg,
        #FFFFFF, #FFFFFF 8px,
        #FAF7F2 8px, #FAF7F2 16px
    );
    border-top: 1px dashed rgba(139, 58, 16, .35);
    border-right: 1px dashed rgba(139, 58, 16, .35);
    border-bottom: 1px dashed rgba(139, 58, 16, .35);
}
.lae-wrapper .lae-card-unpublished:hover {
    background: repeating-linear-gradient(
        135deg,
        #FFFFFF, #FFFFFF 8px,
        #F6F1E9 8px, #F6F1E9 16px
    );
}