/* ================================================================
   Sourdosphère — events.css
   ================================================================ */

.events-page { display: flex; flex-direction: column; gap: 1.1rem; }

/* Hero */
.events-hero {
    background: var(--green-dark);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    flex-wrap: wrap;
}
.events-hero__title { font-size: 1.3rem; font-weight: 700; color: #fff; margin: 0 0 0.25rem; }
.events-hero__sub   { font-size: 0.85rem; color: rgba(255,255,255,0.65); margin: 0; }

/* ── Badges catégories ────────────────────────────────────────── */
.event-cat-badge {
    font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: 20px;
    display: inline-flex; align-items: center; gap: 4px;
}
.event-cat--cafe-signe  { background: #FAEEDA; color: #633806; }
.event-cat--cinema      { background: #1a1a18; color: #fff; }
.event-cat--conference  { background: #E6F1FB; color: #0C447C; }
.event-cat--atelier     { background: #EAF3DE; color: #27500A; }
.event-cat--spectacle   { background: #EEEDFE; color: #3C3489; }
.event-cat--sport       { background: #FCEBEB; color: #7a1f1f; }
.event-cat--autre       { background: var(--gray-light); color: var(--gray-text); }

/* ── Carte événement ──────────────────────────────────────────── */
.event-card {
    display: flex; align-items: flex-start; gap: 1rem;
    background: var(--white); border: 1px solid var(--gray-border);
    border-radius: var(--radius-lg); padding: 1rem 1.25rem;
    text-decoration: none; color: var(--black);
    transition: box-shadow 0.15s, border-color 0.15s;
    margin-bottom: 0.65rem;
}
.event-card:hover { box-shadow: var(--shadow-sm); border-color: var(--green-border); text-decoration: none; }
.event-card--past { opacity: 0.65; }

/* Calendrier visuel */
.event-card__cal {
    width: 56px; min-width: 56px;
    display: flex; flex-direction: column; align-items: center;
    background: var(--green-dark); border-radius: var(--radius-md);
    overflow: hidden; flex-shrink: 0;
}
.event-card__cal-month {
    background: var(--green-mid); color: #fff;
    font-size: 10px; font-weight: 700; letter-spacing: 0.5px;
    width: 100%; text-align: center; padding: 3px 0;
}
.event-card__cal-day {
    color: #fff; font-size: 1.6rem; font-weight: 700; line-height: 1.2;
    padding: 4px 0 2px;
}
.event-card__cal-today {
    background: #1D9E75; color: #fff;
    font-size: 9px; font-weight: 700; width: 100%; text-align: center; padding: 2px 0;
}
.event-card__cal-past {
    background: var(--gray-mid); color: #fff;
    font-size: 9px; font-weight: 700; width: 100%; text-align: center; padding: 2px 0;
}

/* Contenu */
.event-card__content { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.4rem; }
.event-card__header  { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.event-card__title   { font-size: 1rem; font-weight: 600; color: var(--black); margin: 0; }
.event-card__desc    { font-size: 0.875rem; color: var(--gray-mid); line-height: 1.5; }

.event-card__footer {
    display: flex; align-items: center; justify-content: space-between;
    flex-wrap: wrap; gap: 0.5rem;
    padding-top: 0.5rem; border-top: 1px solid var(--gray-light);
    margin-top: 0.15rem;
}
.event-card__meta { display: flex; align-items: center; gap: 0.65rem; flex-wrap: wrap; }
.event-card__meta-item {
    display: flex; align-items: center; gap: 4px;
    font-size: 0.78rem; color: var(--gray-mid);
}
.event-card__participants--active { color: var(--green-mid); font-weight: 500; }
.event-card__author {
    display: flex; align-items: center; gap: 5px;
    font-size: 0.78rem; color: var(--gray-mid); margin-left: auto;
}
.event-card__avatar { border-radius: 50%; object-fit: cover; }

/* Photo miniature droite */
.event-card__photo {
    width: 80px; height: 80px; flex-shrink: 0;
    border-radius: var(--radius-sm); overflow: hidden;
    border: 1px solid var(--gray-border);
}
.event-card__photo img { width: 100%; height: 100%; object-fit: cover; }

/* ── Détail événement ─────────────────────────────────────────── */
.event-detail__photo {
    border-radius: var(--radius-md); overflow: hidden;
    border: 1px solid var(--gray-border);
}
.event-detail__photo img { width: 100%; max-height: 400px; object-fit: cover; display: block; }

.event-detail__organizer-label {
    font-size: 0.78rem; color: var(--gray-mid);
    font-weight: 500; margin-bottom: 0.5rem;
    text-transform: uppercase; letter-spacing: 0.4px;
}
.event-today-tag {
    background: var(--green-mid); color: #fff;
    font-size: 11px; font-weight: 700; padding: 2px 8px;
    border-radius: 20px; margin-left: 6px;
}
.event-btn--participating { border-color: var(--green-mid); color: var(--green-mid); }
.event-btn--participating:hover { background: var(--danger-light); border-color: var(--danger); color: var(--danger); }

/* ── Formulaire catégorie ─────────────────────────────────────── */
.event-cat-grid {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.65rem;
}
.event-cat-card {
    display: flex; flex-direction: column; align-items: center;
    gap: 0.4rem; padding: 0.85rem 0.5rem;
    border: 1.5px solid var(--gray-border); border-radius: var(--radius-md);
    cursor: pointer; text-align: center; font-size: 0.82rem; color: var(--gray-text);
    transition: border-color 0.15s, background 0.15s;
    background: var(--white);
}
.event-cat-card input { display: none; }
.event-cat-card:hover { border-color: var(--green-mid); background: var(--green-light); color: #0F6E56; }
.event-cat-card--selected { border-color: var(--green-dark); background: var(--green-light); color: #0F6E56; font-weight: 600; }
.event-cat-card__icon { font-size: 1.5rem; line-height: 1; }

.event-accessibility {
    background: var(--gray-bg); border-radius: var(--radius-md); padding: 1rem;
}
.event-accessibility__title {
    font-size: 0.85rem; font-weight: 600; color: var(--gray-text); margin-bottom: 0.65rem;
}

/* ── Responsive ───────────────────────────────────────────────── */
@media (max-width: 768px) {
    .event-cat-grid { grid-template-columns: repeat(4, 1fr); }
    .event-card__photo { width: 64px; height: 64px; }
}
@media (max-width: 520px) {
    .event-cat-grid { grid-template-columns: repeat(2, 1fr); }
    .event-card { flex-wrap: wrap; }
    .event-card__photo { display: none; }
}