:root {
    --member-header: #0f1c2b;
    --member-border: #dfe6ee;
    --member-bg: #f5f7fa;
    --member-text: #1d2a38;
    --member-muted: #6c7a89;

    --member-blue: #0d6efd;
    --member-blue-soft: #eaf3ff;

    --member-green: #198754;
    --member-green-soft: #eaf7ef;

    --member-yellow: #a86d00;
    --member-yellow-soft: #fff7df;

    --member-grey-soft: #f2f6fb;
}

/* -------------------------------------------------------
   Base
------------------------------------------------------- */

body {
    background: var(--member-bg);
    color: var(--member-text);
}

a {
    text-decoration: none;
}

/* -------------------------------------------------------
   Header / navigation
------------------------------------------------------- */

.member-header {
    background: var(--member-header);
    color: #fff;
    box-shadow: 0 2px 12px rgba(15, 28, 43, 0.12);
}

.member-header .navbar {
    padding-top: 0.8rem;
    padding-bottom: 0.8rem;
}

.member-brand {
    color: #fff;
    text-decoration: none;
    line-height: 1.05;
}

.member-brand:hover {
    color: #fff;
}

.member-brand-title {
    display: block;
    font-size: 1.25rem;
    font-weight: 700;
}

.member-brand-subtitle {
    display: block;
    margin-top: 0.15rem;
    font-size: 0.72rem;
    color: rgba(255, 255, 255, 0.7);
}

.member-header .nav-link,
.member-header .dropdown-toggle {
    color: rgba(255, 255, 255, 0.82);
    font-weight: 600;
}

.member-header .nav-link:hover,
.member-header .nav-link:focus,
.member-header .dropdown-toggle:hover,
.member-header .dropdown-toggle:focus {
    color: #fff;
}

.member-header .nav-link i {
    margin-right: 0.4rem;
}

.member-user {
    line-height: 1.05;
}

.member-user-name {
    display: block;
    color: #fff;
    font-weight: 700;
}

.member-user-role {
    display: block;
    margin-top: 0.15rem;
    color: rgba(255, 255, 255, 0.65);
    font-size: 0.75rem;
}

/* -------------------------------------------------------
   Cartes
------------------------------------------------------- */

.member-card {
    height: 100%;
    overflow: hidden;

    background: #fff;
    border: 1px solid var(--member-border);
    border-radius: 1rem;

    padding: 1.35rem;

    box-shadow: 0 6px 20px rgba(15, 28, 43, 0.05);
}

.member-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 1rem;

    margin: -1.35rem -1.35rem 1.35rem;
    padding: 1rem 1.35rem;

    border-bottom: 1px solid var(--member-border);
    border-radius: 1rem 1rem 0 0;
}

.member-card-titleline {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.member-card-kicker {
    margin-bottom: 0;

    color: var(--member-muted);

    font-size: 0.78rem;
    font-weight: 700;

    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.member-card-icon {
    flex: 0 0 auto;

    font-size: 1.45rem;
    line-height: 1;

    color: var(--member-blue);
}

.member-card-icon-dark {
    color: #111827;
}

.member-card-header-link {
    flex: 0 0 auto;

    color: var(--member-blue);

    font-size: 0.82rem;
    font-weight: 600;
}

.member-card-header-link:hover {
    color: #0a58ca;
}

/* -------------------------------------------------------
   Couleurs des en-têtes
------------------------------------------------------- */

.member-card-blue .member-card-header {
    background: var(--member-blue-soft);
}

.member-card-agenda .member-card-header {
    background: var(--member-grey-soft);
}

.member-card-green .member-card-header {
    background: var(--member-green-soft);
}

.member-card-warning .member-card-header {
    background: var(--member-yellow-soft);
}

.member-card-info .member-card-header {
    background: var(--member-grey-soft);
}

.member-card-blue .member-card-icon {
    color: var(--member-blue);
}

.member-card-green .member-card-icon {
    color: var(--member-green);
}

.member-card-warning .member-card-icon {
    color: var(--member-yellow);
}

.member-card-info .member-card-icon {
    color: var(--member-text);
}

/* -------------------------------------------------------
   Prochain événement
------------------------------------------------------- */

.member-event-main {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
}

.member-event-date {
    flex: 0 0 78px;

    width: 78px;
    min-height: 96px;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    border: 1px solid #e2ebf7;
    border-radius: 0.65rem;

    background: #f7faff;
    color: var(--member-blue);
}

.member-event-day {
    font-size: 1.9rem;
    font-weight: 700;
    line-height: 1;
}

.member-event-month {
    margin-top: 0.35rem;

    font-size: 0.75rem;
    font-weight: 700;

    letter-spacing: 0.06em;
}

.member-event-info {
    flex: 1;
    min-width: 0;
}

.member-event-info h2 {
    font-weight: 700;
}

.member-event-meta {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;

    color: var(--member-muted);
    font-size: 0.9rem;
}

/* -------------------------------------------------------
   Liste agenda
------------------------------------------------------- */

.member-event-list {
    display: flex;
    flex-direction: column;
}

.member-event-list-item {
    display: flex;
    align-items: center;

    gap: 1rem;

    padding: 0.9rem 0;

    border-top: 1px solid var(--member-border);
}

.member-event-list-item:first-child {
    border-top: 0;
}

.member-event-list-date {
    flex: 0 0 58px;

    display: flex;
    flex-direction: column;

    font-size: 0.88rem;
}

.member-event-list-date span {
    color: var(--member-muted);
    font-size: 0.78rem;
}

.member-event-list-content {
    flex: 1;
    min-width: 0;
}

/* -------------------------------------------------------
   Listes information / activité
------------------------------------------------------- */

.member-info-list {
    display: flex;
    flex-direction: column;
}

.member-info-item {
    display: flex;
    align-items: center;

    gap: 0.75rem;

    min-height: 48px;
    padding: 0.75rem 0;

    border-top: 1px solid var(--member-border);
}

.member-info-item:first-child {
    border-top: 0;
    padding-top: 0;
}

.member-info-content {
    flex: 1;
    min-width: 0;
}

.member-info-chevron {
    color: var(--member-muted);
}

/* -------------------------------------------------------
   Boutons
------------------------------------------------------- */

.member-card .btn {
    border-radius: 0.55rem;
}

.member-card-green .btn-success {
    background: var(--member-green);
    border-color: var(--member-green);
}

.member-card-green .btn-success:hover,
.member-card-green .btn-success:focus {
    background: #157347;
    border-color: #146c43;
}

/* -------------------------------------------------------
   Responsive
------------------------------------------------------- */

@media (max-width: 991.98px) {

    .member-header .navbar-collapse {
        padding-top: 0.8rem;
    }

    .member-card-header {
        align-items: flex-start;
    }

}

@media (max-width: 575.98px) {

    .member-card {
        padding: 1rem;
        border-radius: 0.85rem;
    }

    .member-card-header {
        margin: -1rem -1rem 1rem;
        padding: 0.9rem 1rem;

        border-radius: 0.85rem 0.85rem 0 0;
    }

    .member-card-header-link {
        font-size: 0.72rem;
    }

    .member-event-main {
        gap: 0.85rem;
    }

    .member-event-date {
        flex: 0 0 70px;

        width: 70px;
        min-height: 88px;
    }

    .member-event-day {
        font-size: 1.7rem;
    }

    .member-event-info h2 {
        font-size: 1rem;
    }

    .member-event-list-item {
        gap: 0.75rem;
    }

    .member-card-kicker {
        font-size: 0.7rem;
    }

}
/* ======================================================
   PRÉSENCE
====================================================== */

.member-attendance-item {
    align-items: flex-start;
}

.member-attendance-buttons {
    display: flex;
    flex-wrap: wrap;

    gap: 0.5rem;

    margin-top: 0.8rem;
}

.member-attendance-buttons form {
    margin: 0;
}

.member-attendance-buttons .btn {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    gap: 0.4rem;

    min-width: 105px;

    font-weight: 600;
}
/* ======================================================
   PRÉSENCE DANS L'AGENDA
====================================================== */

.member-event-with-attendance {
    display: block;
}

.member-event-list-main {
    display: flex;
    align-items: center;
    gap: 1rem;

    color: var(--member-text);
}

.member-event-list-main:hover {
    color: var(--member-blue);
}

.member-event-attendance {
    display: flex;
    gap: 0.45rem;

    margin-top: 0.7rem;
    margin-left: 74px;
}

.member-event-attendance form {
    margin: 0;
}

.member-event-attendance .btn {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;

    font-size: 0.76rem;
    font-weight: 600;

    padding: 0.28rem 0.6rem;
}

@media (max-width: 575.98px) {

    .member-event-attendance {
        margin-left: 0;
        margin-top: 0.65rem;
    }
}
.member-page-container {
    width: 100%;
    max-width: 1480px;
    margin: 0 auto;
    padding: 2rem 1.5rem;
}

@media (max-width: 767.98px) {
    .member-page-container {
        padding: 1.25rem 1rem;
    }
}
/* ======================================================
   AGENDA
====================================================== */
.agenda-card {
    min-height: 0;
    height: auto;
    flex: none;
}

.agenda-list {
    display: flex;
    flex-direction: column;
}

.agenda-item {
    display: flex;
    align-items: center;
    gap: 1rem;

    padding: 1rem 0;

    border-bottom: 1px solid var(--member-border);
}

.agenda-item:last-child {
    border-bottom: 0;
}

.agenda-item-main {
    display: flex;
    align-items: center;
    gap: 1rem;

    flex: 1;

    color: var(--member-text);
    text-decoration: none;
}

.agenda-item-main:hover {
    color: var(--member-blue);
}

.agenda-item-date {
    min-width: 64px;

    text-align: center;

    padding: 0.45rem 0.6rem;

    border-radius: 10px;

    background: var(--member-blue-soft);
}

.agenda-item-date strong {
    display: block;

    font-size: 1rem;
}

.agenda-item-date span {
    display: block;

    font-size: 0.75rem;

    color: var(--member-muted);
}

.agenda-item-date-muted {
    background: var(--member-grey-soft);
}

.agenda-item-content {
    min-width: 0;
}

.agenda-item-title {
    display: block;

    font-size: 0.95rem;

    margin-bottom: 0.25rem;
}

.agenda-item-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.8rem;

    font-size: 0.82rem;

    color: var(--member-muted);
}

.agenda-item-attendance {
    display: flex;
    gap: 0.45rem;
}

.agenda-item-attendance form {
    margin: 0;
}

.member-empty {
    padding: 1rem 0;

    color: var(--member-muted);
}

@media (max-width: 767.98px) {

    .agenda-item {
        align-items: flex-start;
        flex-direction: column;
    }

    .agenda-item-main {
        width: 100%;
    }

    .agenda-item-attendance {
        margin-left: 80px;
    }

}

@media (max-width: 575.98px) {

    .agenda-item-attendance {
        margin-left: 0;
    }

}

/* ======================================================
   MÉDIAS D'UN CONCERT
====================================================== */

.event-media-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
}

.event-media-item {
    overflow: hidden;

    border: 1px solid var(--member-border);
    border-radius: 10px;

    background: var(--member-grey-soft);
}

.event-media-item img {
    display: block;

    width: 100%;
    aspect-ratio: 4 / 3;

    object-fit: cover;
}

.event-media-video {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;

    min-height: 150px;

    padding: 1rem;

    text-align: center;
}

.event-media-video i {
    font-size: 2rem;
}

@media (max-width: 767.98px) {
    .event-media-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 575.98px) {
    .event-media-grid {
        grid-template-columns: 1fr;
    }
}
/* ======================================================
   MODÉRATION DES MÉDIAS
====================================================== */

.media-review-list {
    display: flex;
    flex-direction: column;
}

.media-review-item {
    display: flex;
    align-items: center;
    gap: 1rem;

    padding: 1rem 0;

    border-bottom: 1px solid var(--member-border);
}

.media-review-item:last-child {
    border-bottom: 0;
}

.media-review-preview {
    flex: 0 0 110px;
}

.media-review-preview img,
.media-review-video {
    display: block;

    width: 110px;
    height: 82px;

    object-fit: cover;

    border-radius: 8px;

    background: var(--member-grey-soft);
}

.media-review-video {
    display: flex;
    align-items: center;
    justify-content: center;

    font-size: 2rem;
}

.media-review-content {
    overflow-wrap: anywhere;
    flex: 1;
    min-width: 0;
}

.media-review-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.media-review-actions form {
    margin: 0;
}

@media (max-width: 767.98px) {

    .media-review-item {
        align-items: flex-start;
        flex-wrap: wrap;
    }

    .media-review-content {
        flex: 1 1 calc(100% - 130px);
    }

    .media-review-actions {
        width: 100%;
        padding-left: 126px;
    }
}

@media (max-width: 575.98px) {

    .media-review-actions {
        padding-left: 0;
    }
}
.media-review-image-button {
    display: block;
    width: 110px;
    height: 82px;

    padding: 0;
    border: 0;
    border-radius: 8px;

    overflow: hidden;
    cursor: zoom-in;
    background: transparent;
}

.media-review-image-button img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.media-review-image-button:hover {
    opacity: 0.85;
}

.media-preview-large {
    max-height: 75vh;
    width: auto;
    object-fit: contain;
}
/* ======================================================
   DASHBOARD - MÉDIAS À VALIDER
====================================================== */

.dashboard-media-list {
    display: flex;
    flex-direction: column;
}

.dashboard-media-item {
    display: flex;
    align-items: center;
    gap: 1rem;

    padding: 0.9rem 1rem;

    border-bottom: 1px solid var(--member-border);
}

.dashboard-media-item:last-child {
    border-bottom: 0;
}

.dashboard-media-preview {
    flex: 0 0 90px;
    width: 90px;
}

.dashboard-media-image-button {
    display: block;

    width: 90px;
    height: 68px;

    padding: 0;
    margin: 0;

    border: 0;
    border-radius: 8px;

    overflow: hidden;
    cursor: zoom-in;

    background: var(--member-grey-soft);
}

.dashboard-media-image-button img {
    display: block !important;

    width: 90px !important;
    height: 68px !important;

    max-width: none;

    object-fit: cover;
}

.dashboard-media-image-button:hover {
    opacity: 0.85;
}

.dashboard-media-video {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 90px;
    height: 68px;

    border-radius: 8px;

    background: var(--member-grey-soft);
}

.dashboard-media-info {
    flex: 1;
    min-width: 0;
}

.dashboard-media-actions {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0.4rem;

    flex: 0 0 auto;
}

.dashboard-media-actions form {
    display: inline-block;
    margin: 0;
}

@media (max-width: 575.98px) {

    .dashboard-media-item {
        gap: 0.75rem;
    }

    .dashboard-media-preview {
        flex-basis: 70px;
        width: 70px;
    }

    .dashboard-media-image-button,
    .dashboard-media-image-button img,
    .dashboard-media-video {
        width: 70px !important;
        height: 53px !important;
    }

}
.dashboard-media-action-label {
    margin-left: 0.25rem;
}

@media (max-width: 575.98px) {

    .dashboard-media-action-label {
        display: none;
    }

    .dashboard-media-actions .btn {
        width: 38px;
        height: 38px;
        padding: 0;

        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
}
/* Galerie événement — lightbox */

.event-media-photo {
    display: block;
    cursor: zoom-in;
}

#eventMediaModal .modal-dialog {
    width: auto;
    max-width: min(95vw, 1400px);
    margin: 1rem auto;
}

.event-media-modal-content {
    background: #111;
    max-height: calc(100vh - 2rem);
    overflow: hidden;
}

.event-media-modal-content .modal-header {
    flex: 0 0 auto;
    color: #fff;
}

.event-media-modal-content .btn-close {
    filter: invert(1);
}

#eventMediaModal .modal-body {
    display: flex;
    align-items: center;
    justify-content: center;

    min-height: 0;
    padding: 0.75rem;
    overflow: hidden;
}

.event-media-modal-image {
    display: block;

    width: auto;
    height: auto;

    max-width: 100%;
    max-height: calc(100vh - 7rem);

    object-fit: contain;
}
@media (max-width: 576px) {
    #eventMediaModal .modal-dialog {
        max-width: calc(100vw - 1rem);
        margin: 0.5rem auto;
    }

    .event-media-modal-content {
        max-height: calc(100vh - 1rem);
    }

    .event-media-modal-image {
        max-height: calc(100vh - 6rem);
    }
}
/* Compact rehearsal details without changing concert galleries. */
.rehearsal-detail .member-page { padding-top: 1rem; padding-bottom: 1rem; }
.rehearsal-detail .member-card { height: auto; padding: 1rem; min-height: 0; }
.rehearsal-detail .member-card-header { margin: -1rem -1rem .75rem; padding: .75rem 1rem; }
.rehearsal-detail .member-event-detail { display: flex; flex-wrap: wrap; gap: 1rem 2rem; }
.rehearsal-detail .member-event-detail-row { margin: 0; padding: .25rem 0; }