* {
    box-sizing: border-box;
}

:root {
    --bg: #0b1020;
    --panel: #141b2d;
    --panel2: #1b2438;
    --text: #f5f7fb;
    --muted: #9ba8bd;
    --accent: #ffb547;
    --accent2: #ff8b3d;
    --green: #4fd19c;
    --red: #ff6b72;
    --border: rgba(255,255,255,.09);
}

html {
    color-scheme: dark;
}

body {
    margin: 0;
    background:
        radial-gradient(
            circle at top,
            #17223d 0,
            #0b1020 420px
        );
    color: var(--text);
    font-family:
        Inter,
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;
    min-height: 100vh;
}

a {
    color: inherit;
    text-decoration: none;
}

.topbar {
    min-height: 76px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 14px max(20px, calc((100% - 1220px)/2));
    border-bottom: 1px solid var(--border);
    background: rgba(11,16,32,.88);
}

.brand {
    display: flex;
    align-items: center;
    gap: 12px;
}

.brand-icon {
    font-size: 30px;
}

.brand strong,
.brand small {
    display: block;
}

.brand strong {
    font-size: 18px;
}

.brand small {
    color: var(--muted);
    margin-top: 2px;
}

nav {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.nav-link {
    padding: 10px 14px;
    border: 1px solid var(--border);
    border-radius: 10px;
}

.nav-link:hover {
    background: var(--panel2);
}

.container {
    width: min(1220px, calc(100% - 32px));
    margin: 0 auto;
    padding: 42px 0 70px;
}

.hero {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 30px;
    margin-bottom: 30px;
}

.hero h1 {
    font-size: clamp(34px, 5vw, 56px);
    line-height: 1;
    margin: 8px 0 14px;
}

.hero p {
    max-width: 650px;
    color: var(--muted);
    font-size: 17px;
    line-height: 1.6;
    margin: 0;
}

.eyebrow {
    color: var(--accent);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .16em;
}

.source-badge {
    border: 1px solid rgba(79,209,156,.25);
    background: rgba(79,209,156,.08);
    color: var(--green);
    border-radius: 999px;
    padding: 9px 13px;
    white-space: nowrap;
    font-size: 13px;
}

.month-nav {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin: 0 0 36px;
}

.month-button {
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 10px 16px;
    color: var(--muted);
}

.month-button:hover,
.month-button.active {
    background: var(--accent);
    color: #19130b;
    border-color: var(--accent);
    font-weight: 700;
}

.section-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
    margin: 25px 0 18px;
}

.section-heading h2 {
    margin: 5px 0 0;
    font-size: 28px;
}

.count {
    color: var(--muted);
}

.sessions-grid {
    display: grid;
    grid-template-columns:
        repeat(3, minmax(0, 1fr));
    gap: 18px;
}

.session-card,
.admin-card,
.form-card {
    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.035),
            rgba(255,255,255,.01)
        ),
        var(--panel);
    border: 1px solid var(--border);
    border-radius: 18px;
    box-shadow:
        0 18px 45px rgba(0,0,0,.18);
}

.session-card {
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 17px;
}

.session-card:hover {
    border-color:
        rgba(255,181,71,.28);
}

.session-top {
    display: flex;
    gap: 14px;
    align-items: flex-start;
}

.date-box {
    width: 56px;
    min-width: 56px;
    height: 60px;
    border-radius: 13px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: var(--panel2);
    border: 1px solid var(--border);
}

.date-box strong {
    font-size: 22px;
    line-height: 1;
}

.date-box span {
    color: var(--muted);
    font-size: 12px;
    margin-top: 4px;
}

.session-title {
    min-width: 0;
}

.time {
    color: var(--accent);
    font-weight: 800;
    font-size: 14px;
}

.session-title h3 {
    margin: 5px 0 0;
    font-size: 19px;
    line-height: 1.25;
}

.projection,
.registrations,
.current-people {
    border-top: 1px solid var(--border);
    padding-top: 14px;
}

.projection .label {
    display: block;
    color: var(--muted);
    font-size: 12px;
    margin-bottom: 5px;
}

.registration-title {
    display: flex;
    justify-content: space-between;
    color: var(--muted);
    font-size: 13px;
    margin-bottom: 10px;
}

.people {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.person {
    background: rgba(79,209,156,.10);
    border: 1px solid rgba(79,209,156,.18);
    color: #bdf3dc;
    padding: 6px 9px;
    border-radius: 999px;
    font-size: 12px;
}

.person.empty {
    background: transparent;
    border: 1px dashed var(--border);
    color: #738096;
}

.primary-button,
.secondary-button,
.full-button {
    min-height: 44px;
    border-radius: 11px;
    padding: 11px 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 14px;
    border: 0;
    cursor: pointer;
    font-family: inherit;
}

.primary-button {
    background:
        linear-gradient(
            135deg,
            var(--accent),
            var(--accent2)
        );
    color: #201509;
}

.primary-button:hover {
    filter: brightness(1.06);
}

.secondary-button {
    width: 100%;
    margin-top: 8px;
    background: transparent;
    border: 1px solid var(--border);
    color: var(--muted);
}

.full-button {
    background: var(--panel2);
    color: var(--muted);
}

.special-section {
    margin-top: 52px;
}

.special-card {
    position: relative;
}

.special-tag {
    display: inline-flex;
    width: fit-content;
    color: var(--accent);
    background: rgba(255,181,71,.10);
    border: 1px solid rgba(255,181,71,.18);
    border-radius: 999px;
    padding: 5px 9px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .06em;
}

.form-page {
    max-width: 680px;
    margin: 10px auto;
}

.back-link {
    display: inline-block;
    color: var(--muted);
    margin-bottom: 18px;
}

.back-link:hover {
    color: var(--text);
}

.form-card {
    padding: 30px;
}

.form-card.small {
    max-width: 500px;
    margin: 0 auto;
}

.form-card h1 {
    margin: 7px 0 12px;
}

.form-card p {
    color: var(--muted);
    line-height: 1.55;
}

.session-summary {
    display: flex;
    gap: 8px;
    margin-bottom: 22px;
    color: var(--muted);
}

form {
    display: flex;
    flex-direction: column;
    gap: 9px;
}

label {
    margin-top: 10px;
    font-size: 13px;
    font-weight: 700;
}

select,
input {
    width: 100%;
    min-height: 48px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: #0d1425;
    color: var(--text);
    padding: 0 13px;
    font: inherit;
}

select:focus,
input:focus {
    outline: 2px solid rgba(255,181,71,.25);
    border-color: var(--accent);
}

form .primary-button {
    margin-top: 14px;
    width: 100%;
}

.muted {
    color: var(--muted);
}

.flash {
    padding: 13px 16px;
    border-radius: 11px;
    margin-bottom: 20px;
}

.flash.success {
    color: #bdf3dc;
    background: rgba(79,209,156,.1);
    border: 1px solid rgba(79,209,156,.2);
}

.flash.error {
    color: #ffc1c5;
    background: rgba(255,107,114,.1);
    border: 1px solid rgba(255,107,114,.2);
}

.admin-list {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.admin-card {
    padding: 22px;
}

.admin-session-title h2 {
    margin: 5px 0 8px;
}

.admin-columns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 22px;
    margin-top: 20px;
}

.admin-block {
    border-top: 1px solid var(--border);
    padding-top: 16px;
}

.admin-block h3 {
    margin: 0 0 12px;
}

.google-value {
    color: var(--muted);
    font-size: 13px;
    margin-bottom: 10px;
}

.google-value strong {
    color: var(--text);
}

.admin-people {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.admin-person {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    background: var(--panel2);
    border-radius: 10px;
    padding: 9px 11px;
}

.admin-person form {
    display: block;
}

.delete-button {
    border: 0;
    background: rgba(255,107,114,.12);
    color: #ffc1c5;
    border-radius: 8px;
    padding: 7px 10px;
    cursor: pointer;
}

.slots-admin {
    margin-top: 15px;
    color: var(--muted);
    font-size: 13px;
}

.empty-state {
    grid-column: 1 / -1;
    padding: 40px;
    text-align: center;
    color: var(--muted);
    border: 1px dashed var(--border);
    border-radius: 16px;
}

footer {
    text-align: center;
    color: #68758b;
    font-size: 12px;
    padding: 25px;
    border-top: 1px solid var(--border);
}

@media (max-width: 950px) {

    .sessions-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    .admin-columns {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 640px) {

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

    .container {
        width: min(100% - 22px, 1220px);
        padding-top: 28px;
    }

    .hero {
        display: block;
    }

    .source-badge {
        display: inline-flex;
        margin-top: 18px;
    }

    .sessions-grid {
        grid-template-columns: 1fr;
    }

    .section-heading {
        align-items: flex-start;
    }

    .session-card {
        padding: 17px;
    }

    .form-card {
        padding: 21px;
    }

    .hero h1 {
        font-size: 38px;
    }
}


/* ==========================================================
   V1.3 - SEMAINE CINEMATOGRAPHIQUE
   ========================================================== */

.week-days {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 8px;
    margin: 0 0 22px;
}

.week-day {
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: 12px;
    text-align: center;
    padding: 10px 5px;
}

.week-day span {
    display: block;
    color: var(--muted);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .08em;
}

.week-day strong {
    display: block;
    margin-top: 4px;
    font-size: 19px;
}


.week-navigation {
    display: grid;
    grid-template-columns: 180px 1fr 180px;
    align-items: center;
    gap: 15px;
    margin-bottom: 38px;
}

.week-navigation > div:last-child {
    text-align: right;
}

.week-select {
    display: flex;
    justify-content: center;
    gap: 7px;
    flex-wrap: wrap;
}

.week-pill {
    padding: 8px 12px;
    border-radius: 999px;
    border: 1px solid var(--border);
    color: var(--muted);
    font-size: 12px;
}

.week-pill:hover {
    color: var(--text);
    background: var(--panel2);
}

.week-pill.active {
    color: #211609;
    background: var(--accent);
    border-color: var(--accent);
    font-weight: 800;
}

.secondary-link {
    color: var(--muted);
    font-size: 13px;
}

.secondary-link:hover {
    color: var(--text);
}


/* ==========================================================
   V1.3 - SEANCES PASSEES
   ========================================================== */

.session-past {
    opacity: .48;
    filter: grayscale(.7);
}

.session-past:hover {
    border-color: var(--border);
}

.past-label {
    display: inline-flex;
    margin-top: 7px;
    padding: 4px 8px;
    border-radius: 999px;
    background: rgba(255,255,255,.06);
    border: 1px solid var(--border);
    color: var(--muted);
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
}

.past-button {
    min-height: 44px;
    border-radius: 11px;
    padding: 11px 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 13px;
    color: #798398;
    background: rgba(255,255,255,.035);
    border: 1px solid var(--border);
}


/* ==========================================================
   V1.3 - MOBILE
   ========================================================== */

@media (max-width: 760px) {

    .week-navigation {
        grid-template-columns: 1fr 1fr;
    }

    .week-select {
        grid-column: 1 / -1;
        grid-row: 1;
        justify-content: flex-start;
        overflow-x: auto;
        flex-wrap: nowrap;
        padding-bottom: 4px;
    }

    .week-pill {
        white-space: nowrap;
    }

    .week-navigation > div:first-child {
        grid-column: 1;
        grid-row: 2;
    }

    .week-navigation > div:last-child {
        grid-column: 2;
        grid-row: 2;
    }

    .week-days {
        gap: 4px;
    }

    .week-day {
        padding: 8px 2px;
    }

    .week-day span {
        font-size: 9px;
    }

    .week-day strong {
        font-size: 16px;
    }
}


/* ==========================================================
   V1.4 - ROSE CINEBESSIERES
   ========================================================== */

:root {
    --accent: #ff4f9a;
    --accent-hover: #ff72ad;
    --accent-soft: rgba(255, 79, 154, .13);
}


/* Boutons principaux */

.primary-button {
    background: var(--accent) !important;
    border-color: var(--accent) !important;
    color: #ffffff !important;
}

.primary-button:hover {
    background: var(--accent-hover) !important;
}


/* ==========================================================
   MODE ADMIN
   ========================================================== */

.admin-mode {
    color: var(--accent);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .06em;
}

.admin-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;

    margin-bottom: 24px;
    padding: 14px 18px;

    border-radius: 14px;

    background: var(--accent-soft);
    border: 1px solid rgba(255,79,154,.4);
}

.admin-banner strong {
    display: block;
    color: var(--accent);
}

.admin-banner span {
    display: block;
    margin-top: 3px;
    color: var(--muted);
    font-size: 12px;
}

.admin-banner a {
    color: var(--accent);
    white-space: nowrap;
}


/* ==========================================================
   FILTRE JOURS
   ========================================================== */

.all-week-button {
    display: inline-flex;

    margin-bottom: 10px;
    padding: 7px 13px;

    border-radius: 999px;

    border: 1px solid var(--border);

    color: var(--muted);
    font-size: 12px;
    font-weight: 700;
}

.all-week-button:hover,
.all-week-button.active {
    background: var(--accent);
    border-color: var(--accent);
    color: white;
}


.week-day {
    text-decoration: none;
    cursor: pointer;
    transition:
        transform .15s ease,
        border-color .15s ease,
        background .15s ease;
}

.week-day:hover {
    transform: translateY(-2px);
    border-color: var(--accent);
}

.week-day.selected {
    background: var(--accent-soft);
    border-color: var(--accent);
}

.week-day.selected span,
.week-day.selected strong {
    color: var(--accent);
}


.week-pill.active {
    background: var(--accent) !important;
    border-color: var(--accent) !important;
    color: white !important;
}


/* ==========================================================
   BENEVOLES CLIQUABLES
   ========================================================== */

.person-form {
    display: inline-flex;
    margin: 0;
}

.person-form button.person {
    font-family: inherit;
    cursor: pointer;
}

.volunteer-person-button {
    transition:
        border-color .15s ease,
        background .15s ease;
}

.volunteer-person-button:hover {
    border-color: var(--accent);
    background: var(--accent-soft);
}


/* Admin : clic = projectionniste */

.admin-person-button {
    border-color: rgba(255,79,154,.45) !important;
}

.admin-person-button:hover {
    background: var(--accent) !important;
    color: white !important;
}

.admin-arrow {
    margin-left: 5px;
    color: var(--accent);
}

.admin-person-button:hover .admin-arrow {
    color: white;
}


/* ==========================================================
   PROJECTIONNISTES
   ========================================================== */

.projection-people {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-top: 7px;
}

.projection-person {
    position: relative;

    display: inline-flex;
    align-items: center;

    min-height: 34px;
    padding: 7px 31px 7px 11px;

    border-radius: 10px;

    background: var(--accent-soft);
    border: 1px solid rgba(255,79,154,.4);

    color: var(--accent);
    font-size: 13px;
    font-weight: 800;
}

.projection-person form {
    margin: 0;
}

.projection-remove {
    position: absolute;
    top: 3px;
    right: 4px;

    width: 22px;
    height: 22px;

    border: 0;
    border-radius: 50%;

    background: transparent;
    color: var(--accent);

    font-size: 18px;
    line-height: 18px;

    cursor: pointer;
}

.projection-remove:hover {
    background: var(--accent);
    color: white;
}


/* ==========================================================
   FORMULAIRE
   ========================================================== */

.form-separator {
    margin: 15px 0;
    text-align: center;
    color: var(--muted);
    font-size: 12px;
}

.form-submit {
    width: 100%;
    margin-top: 22px;
}


/* ==========================================================
   MOBILE
   ========================================================== */

@media (max-width: 760px) {

    .admin-banner {
        align-items: flex-start;
        flex-direction: column;
    }

    .week-days {
        grid-template-columns:
            repeat(7, minmax(42px, 1fr));
        overflow-x: auto;
    }

}


/* ==========================================================
   V1.4.1 - ACCENT DORE CINEMA
   Plus doux que le rose de la V1.4
   ========================================================== */

:root {
    --accent: #D9A441;
    --accent-hover: #E4B85F;
    --accent-soft: rgba(217, 164, 65, .12);
}


/* Neutralisation des anciens rgba roses */

.admin-banner {
    background: rgba(217, 164, 65, .10) !important;
    border-color: rgba(217, 164, 65, .35) !important;
}

.admin-person-button {
    border-color: rgba(217, 164, 65, .40) !important;
}

.projection-person {
    background: rgba(217, 164, 65, .10) !important;
    border-color: rgba(217, 164, 65, .35) !important;
}


/* Jour sélectionné */

.week-day.selected {
    background: rgba(217, 164, 65, .10) !important;
    border-color: #D9A441 !important;
}

.week-day.selected span,
.week-day.selected strong {
    color: #D9A441 !important;
}


/* Boutons */

.primary-button {
    background: #D9A441 !important;
    border-color: #D9A441 !important;
    color: #17130c !important;
}

.primary-button:hover {
    background: #E4B85F !important;
}


/* Semaine sélectionnée */

.week-pill.active {
    background: #D9A441 !important;
    border-color: #D9A441 !important;
    color: #17130c !important;
}


/* Toute la semaine */

.all-week-button:hover,
.all-week-button.active {
    background: #D9A441 !important;
    border-color: #D9A441 !important;
    color: #17130c !important;
}


/* ==========================================================
   V1.4.2 - ACTIONS ADMIN SUR BENEVOLE
   ========================================================== */

.admin-volunteer {
    display: inline-flex;
    align-items: stretch;
    gap: 3px;
}

.admin-delete-form {
    display: inline-flex;
    margin: 0;
}

.admin-volunteer-delete {
    width: 30px;
    min-height: 34px;

    border-radius: 9px;
    border: 1px solid rgba(220, 90, 90, .30);

    background: rgba(220, 90, 90, .07);
    color: #c87878;

    font-size: 17px;
    font-weight: 700;

    cursor: pointer;

    transition:
        background .15s ease,
        color .15s ease,
        border-color .15s ease;
}

.admin-volunteer-delete:hover {
    background: rgba(220, 90, 90, .18);
    border-color: rgba(220, 90, 90, .55);
    color: #e39191;
}


/* ==========================================================
   V1.5 - INDICATEURS SEMAINE
   ========================================================== */

.week-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: -8px 0 22px;
}

.week-stat {
    display: flex;
    align-items: center;
    gap: 10px;

    min-height: 58px;
    padding: 10px 15px;

    border-radius: 13px;

    background: var(--panel);
    border: 1px solid var(--border);
}

.week-stat-icon {
    font-size: 21px;
}

.week-stat strong {
    display: block;
    font-size: 18px;
}

.week-stat span:not(.week-stat-icon) {
    display: block;
    margin-top: 1px;
    color: var(--muted);
    font-size: 11px;
}

.week-stat.warning {
    background:
        rgba(217, 164, 65, .08);
    border-color:
        rgba(217, 164, 65, .35);
}

.week-stat.warning strong {
    color: #D9A441;
}

.week-stat.success {
    background:
        rgba(90, 170, 120, .07);
    border-color:
        rgba(90, 170, 120, .25);
}


/* ==========================================================
   V1.5 - MODAL
   ========================================================== */

body.modal-open {
    overflow: hidden;
}

.modal-overlay[hidden] {
    display: none !important;
}

.modal-overlay {
    position: fixed;
    inset: 0;

    z-index: 9999;

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

    padding: 18px;

    background:
        rgba(4, 7, 12, .78);

    backdrop-filter:
        blur(7px);
}

.signup-modal {
    position: relative;

    width: min(
        100%,
        440px
    );

    padding: 28px;

    border-radius: 20px;

    background: var(--panel);
    border: 1px solid var(--border);

    box-shadow:
        0 25px 80px
        rgba(0,0,0,.45);
}

.signup-modal h2 {
    margin:
        5px 35px 5px 0;
}

.modal-session-info {
    margin:
        0 0 24px;

    color: var(--muted);
}

.modal-close {
    position: absolute;

    top: 12px;
    right: 12px;

    width: 34px;
    height: 34px;

    border: 0;
    border-radius: 50%;

    background:
        rgba(255,255,255,.05);

    color: var(--muted);

    font-size: 22px;

    cursor: pointer;
}

.modal-close:hover {
    background:
        rgba(255,255,255,.10);

    color: var(--text);
}

.signup-modal select,
.signup-modal input {
    width: 100%;
}

.modal-submit {
    width: 100%;
    margin-top: 22px;
}

.modal-error {
    margin-bottom: 16px;
    padding: 10px 12px;

    border-radius: 10px;

    background:
        rgba(210, 80, 80, .10);

    border:
        1px solid
        rgba(210, 80, 80, .25);

    color: #e18c8c;

    font-size: 12px;
}


/* ==========================================================
   V1.5 - TOAST
   ========================================================== */

.app-toast[hidden] {
    display: none !important;
}

.app-toast {
    position: fixed;

    left: 50%;
    bottom: 25px;

    z-index: 10000;

    transform:
        translateX(-50%);

    max-width:
        calc(100vw - 30px);

    padding:
        11px 17px;

    border-radius:
        999px;

    background:
        #D9A441;

    color:
        #17130c;

    font-size:
        13px;

    font-weight:
        800;

    box-shadow:
        0 12px 35px
        rgba(0,0,0,.35);
}

.app-toast.error {
    background:
        #b95858;

    color:
        white;
}


/* ==========================================================
   V1.5 - BOUTONS JS
   ========================================================== */

button.person {
    font-family: inherit;
}

.js-open-signup {
    width: 100%;
    cursor: pointer;
}


/* ==========================================================
   MOBILE
   ========================================================== */

@media (max-width: 600px) {

    .week-stats {
        display: grid;
        grid-template-columns:
            1fr 1fr;
    }

    .week-stat {
        padding:
            9px 10px;
    }

    .week-stat strong {
        font-size:
            16px;
    }

    .signup-modal {
        padding:
            23px 18px;
    }
}


/* ==========================================================
   V1.5.1 - AFFICHE TMDB
   Format proche de DCP Remote / génération playlist
   ========================================================== */

.session-top-poster {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    gap: 14px;
}

.session-heading-left {
    display: flex;
    align-items: flex-start;

    gap: 12px;

    flex: 1 1 auto;

    min-width: 0;
}

.session-heading-left .session-title {
    min-width: 0;
}


/* ----------------------------------------------------------
   AFFICHE
   ---------------------------------------------------------- */

.session-poster {
    flex: 0 0 74px;

    width: 74px;
    height: 110px;

    margin-left: auto;

    border-radius: 8px;

    overflow: hidden;

    background:
        rgba(255,255,255,.035);

    border:
        1px solid
        rgba(255,255,255,.09);

    box-shadow:
        0 4px 14px
        rgba(0,0,0,.20);
}

.session-poster img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
}


/* ----------------------------------------------------------
   PAS D'AFFICHE
   ---------------------------------------------------------- */

.poster-placeholder {
    display: flex;

    width: 100%;
    height: 100%;

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

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.035),
            rgba(255,255,255,.015)
        );

    color: var(--muted);
}

.poster-placeholder span {
    font-size: 23px;

    opacity: .45;
}


/* ----------------------------------------------------------
   SEANCE PASSEE
   ---------------------------------------------------------- */

.session-past .session-poster {
    opacity: .48;

    filter:
        grayscale(.55);
}


/* ----------------------------------------------------------
   MOBILE
   ---------------------------------------------------------- */

@media (max-width: 600px) {

    .session-top-poster {
        gap: 9px;
    }

    .session-heading-left {
        gap: 8px;
    }

    .session-poster {
        flex-basis: 64px;

        width: 64px;
        height: 95px;

        border-radius: 7px;
    }
}


/* ==========================================================
   V1.5.2 - PETITE AFFICHE
   ========================================================== */

.session-poster {
    flex: 0 0 58px !important;

    width: 58px !important;
    height: 86px !important;

    border-radius: 7px !important;
}

.poster-button {
    display: block;

    width: 100%;
    height: 100%;

    margin: 0;
    padding: 0;

    border: 0;
    border-radius: inherit;

    overflow: hidden;

    background: transparent;

    cursor: zoom-in;
}

.poster-button img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    transition:
        transform .16s ease,
        opacity .16s ease;
}

.poster-button:hover img {
    transform: scale(1.035);
    opacity: .92;
}


/* ==========================================================
   V1.5.2 - HEURE + VO
   ========================================================== */

.session-time-line {
    display: flex;
    align-items: center;

    gap: 7px;

    margin-bottom: 2px;
}

.session-time-line .time {
    margin: 0;
}

.version-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-width: 27px;

    padding: 2px 6px;

    border-radius: 6px;

    background:
        rgba(217, 164, 65, .12);

    border:
        1px solid
        rgba(217, 164, 65, .38);

    color:
        #D9A441;

    font-size: 10px;
    font-weight: 800;

    line-height: 1.2;

    letter-spacing: .05em;
}


/* ==========================================================
   V1.5.2 - MODAL AFFICHE
   Même largeur maximale que l'inscription.
   ========================================================== */

.poster-modal {
    position: relative;

    width: min(
        100%,
        440px
    );

    max-height:
        calc(100vh - 36px);

    padding: 24px;

    border-radius: 20px;

    background: var(--panel);

    border:
        1px solid
        var(--border);

    box-shadow:
        0 25px 80px
        rgba(0,0,0,.45);

    overflow: auto;
}

.poster-modal h2 {
    margin:
        5px 40px 18px 0;

    font-size: 19px;
}

.poster-large-container {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 100%;
}

.poster-large-container img {
    display: block;

    width: auto;

    /*
       Le poster ne dépassera jamais
       la fenêtre d'inscription.
    */

    max-width: 100%;

    max-height:
        calc(100vh - 155px);

    object-fit: contain;

    border-radius: 11px;

    box-shadow:
        0 8px 30px
        rgba(0,0,0,.30);
}


/* ==========================================================
   MOBILE
   ========================================================== */

@media (max-width: 600px) {

    .session-poster {
        flex-basis:
            52px !important;

        width:
            52px !important;

        height:
            77px !important;
    }

    .poster-modal {
        width: min(
            100%,
            440px
        );

        padding:
            20px 16px;
    }

    .poster-large-container img {
        max-height:
            calc(100vh - 145px);
    }
}


/* ==========================================================
   V1.5.3 - SEANCE SANS BENEVOLE
   ========================================================== */

.registration-title.no-volunteer {
    color: #D9A441;
}

.missing-volunteer-warning {
    display: inline-block;

    margin-right: 3px;

    font-size: 14px;

    line-height: 1;
}

.missing-volunteer-warning[hidden] {
    display: none !important;
}


/*
   Petit rappel visuel sur la zone bénévoles,
   sans rendre toute la carte agressive.
*/

.registration-title.no-volunteer + .people {
    border-color:
        rgba(217, 164, 65, .30);
}


/* ==========================================================
   V1.6 - ERGONOMIE
   ========================================================== */


/* ----------------------------------------------------------
   VO PLUS VISIBLE
   ---------------------------------------------------------- */

.version-badge {
    background: rgba(220, 53, 69, .14) !important;
    border-color: rgba(220, 53, 69, .55) !important;
    color: #ff5b69 !important;
}


/* ----------------------------------------------------------
   BARRE OUTILS
   ---------------------------------------------------------- */

.planning-tools {
    display: flex;
    align-items: center;
    gap: 10px;

    margin: 14px 0 10px;
}

.movie-search {
    flex: 1;

    display: flex;
    align-items: center;

    min-width: 0;

    padding: 0 13px;

    border-radius: 12px;

    border:
        1px solid
        rgba(255,255,255,.12);

    background:
        rgba(255,255,255,.055);
}

.movie-search-icon {
    flex: 0 0 auto;

    margin-right: 8px;

    opacity: .7;
}

.movie-search input {
    width: 100%;

    padding: 11px 0;

    border: 0;
    outline: 0;

    background: transparent;

    color: inherit;

    font: inherit;
}

.movie-search input::placeholder {
    color: currentColor;
    opacity: .48;
}


.theme-toggle {
    flex: 0 0 44px;

    width: 44px;
    height: 44px;

    border-radius: 12px;

    border:
        1px solid
        rgba(255,255,255,.12);

    background:
        rgba(255,255,255,.055);

    color: inherit;

    font-size: 19px;

    cursor: pointer;
}


.theme-toggle:hover {
    background:
        rgba(217,164,65,.14);
}


/* ----------------------------------------------------------
   INDICATEUR CLIQUABLE
   ---------------------------------------------------------- */

#week-missing-stat {
    cursor: pointer;

    user-select: none;

    transition:
        transform .15s ease,
        box-shadow .15s ease;
}

#week-missing-stat:hover {
    transform: translateY(-1px);
}

#week-missing-stat.filter-active {
    box-shadow:
        0 0 0 2px
        rgba(217,164,65,.58);

    background:
        rgba(217,164,65,.13);
}


.filter-status {
    margin: 5px 0 10px;

    font-size: 12px;

    opacity: .72;
}


/* ----------------------------------------------------------
   FILTRAGE
   ---------------------------------------------------------- */

.session-card.v16-filter-hidden {
    display: none !important;
}


/* ----------------------------------------------------------
   THEME CLAIR
   ---------------------------------------------------------- */

html[data-theme="light"] {
    color-scheme: light;
}

html[data-theme="light"] body {
    background: #f3f4f6 !important;
    color: #202124 !important;
}

html[data-theme="light"] .session-card,
html[data-theme="light"] .week-stat,
html[data-theme="light"] .day-button,
html[data-theme="light"] .movie-search,
html[data-theme="light"] .theme-toggle {
    background: #ffffff !important;

    color: #202124 !important;

    border-color:
        rgba(0,0,0,.10) !important;
}

html[data-theme="light"] .session-card {
    box-shadow:
        0 2px 10px
        rgba(0,0,0,.06);
}

html[data-theme="light"] .movie-search input {
    color: #202124 !important;
}

html[data-theme="light"] .session-past {
    opacity: .58;
}

html[data-theme="light"] .modal-content,
html[data-theme="light"] .poster-modal-content {
    background: #ffffff !important;
    color: #202124 !important;
}

html[data-theme="light"] select,
html[data-theme="light"] input {
    color: #202124;
}


/* ----------------------------------------------------------
   MOBILE
   ---------------------------------------------------------- */

@media (max-width: 600px) {

    .planning-tools {
        gap: 7px;
    }

    .movie-search {
        padding-left: 10px;
        padding-right: 10px;
    }

    .theme-toggle {
        flex-basis: 42px;

        width: 42px;
        height: 42px;
    }
}


/* ==========================================================
   V1.6.1 - THEME CLAIR COMPLET
   ========================================================== */

html[data-theme="light"] {
    --bg: #f4f5f7 !important;
    --panel: #ffffff !important;
    --panel2: #f0f1f3 !important;

    --text: #202124 !important;
    --muted: #687078 !important;

    --border:
        rgba(0,0,0,.11) !important;

    color-scheme: light;
}


html[data-theme="light"] body {
    background: #f4f5f7 !important;
    color: #202124 !important;
}


/* CARTES */

html[data-theme="light"] .session-card,
html[data-theme="light"] .admin-card,
html[data-theme="light"] .form-card {
    background: #ffffff !important;

    color: #202124 !important;

    border-color:
        rgba(0,0,0,.11) !important;

    box-shadow:
        0 5px 18px
        rgba(0,0,0,.07) !important;
}


/* DATE */

html[data-theme="light"] .date-box {
    background: #f0f1f3 !important;

    border-color:
        rgba(0,0,0,.10) !important;

    color: #202124 !important;
}

html[data-theme="light"] .date-box strong {
    color: #202124 !important;
}

html[data-theme="light"] .date-box span {
    color: #687078 !important;
}


/* HEURE */

html[data-theme="light"] .time {
    color: #9b6b0d !important;
}


/* TEXTE */

html[data-theme="light"] .session-title h3 {
    color: #202124 !important;
}


/* STATISTIQUES NORMALES */

html[data-theme="light"] .week-stat {
    background: #ffffff !important;

    color: #202124 !important;

    border-color:
        rgba(0,0,0,.11) !important;
}

html[data-theme="light"]
.week-stat span:not(.week-stat-icon) {
    color: #687078 !important;
}


/* ALERTE SANS BENEVOLE */

html[data-theme="light"] .week-stat.warning {
    background:
        #fff7e6 !important;

    border-color:
        #d9a441 !important;
}

html[data-theme="light"] .week-stat.warning strong {
    color: #946600 !important;
}


/* TOUT EST COMPLET */

html[data-theme="light"] .week-stat.success {
    background:
        #edf8f0 !important;

    border-color:
        #5aaa78 !important;
}

html[data-theme="light"] .week-stat.success strong {
    color: #277344 !important;
}


/* ALERTE BENEVOLES DANS LA CARTE */

html[data-theme="light"]
.registration-title.no-volunteer {
    color: #946600 !important;
}

html[data-theme="light"]
.registration-title.no-volunteer + .people {
    border-color:
        rgba(217,164,65,.65) !important;
}


/* VO RESTE ROUGE */

html[data-theme="light"] .version-badge {
    background:
        #fff0f1 !important;

    border-color:
        #dc3545 !important;

    color:
        #c82333 !important;
}


/* RECHERCHE */

html[data-theme="light"] .movie-search,
html[data-theme="light"] .theme-toggle {
    background: #ffffff !important;

    border-color:
        rgba(0,0,0,.13) !important;

    color: #202124 !important;
}

html[data-theme="light"] .movie-search input {
    color: #202124 !important;
}

html[data-theme="light"]
.movie-search input::placeholder {
    color: #687078 !important;
}


/* FILTRE SANS BENEVOLE ACTIF */

html[data-theme="light"]
#week-missing-stat.filter-active {
    box-shadow:
        0 0 0 2px
        rgba(217,164,65,.55) !important;
}


/* MODALES */

html[data-theme="light"] .modal-content,
html[data-theme="light"] .poster-modal-content {
    background: #ffffff !important;

    color: #202124 !important;
}


/* CHAMPS */

html[data-theme="light"] input,
html[data-theme="light"] select,
html[data-theme="light"] textarea {
    background: #ffffff;
    color: #202124;

    border-color:
        rgba(0,0,0,.18);
}


/* SEANCES PASSEES */

html[data-theme="light"] .session-past {
    opacity: .58;
}


/* ==========================================================
   V1.6.3 - SYNOPSIS TMDB
   ========================================================== */

.poster-modal {
    max-height: 92vh;
    overflow-y: auto;
}

.poster-modal-meta {
    margin:
        -3px 0 12px;

    color: var(--muted);

    font-size: 12px;
    font-weight: 600;
}

.poster-synopsis {
    max-width: 440px;

    margin:
        18px auto 2px;

    text-align: left;
}

.poster-synopsis-label {
    display: block;

    margin-bottom: 7px;

    color: var(--accent);

    font-size: 10px;
    font-weight: 800;

    letter-spacing: .10em;
}

.poster-synopsis p {
    margin: 0;

    color: var(--muted);

    font-size: 13px;
    line-height: 1.55;
}


/* THEME CLAIR */

html[data-theme="light"]
.poster-modal-meta,

html[data-theme="light"]
.poster-synopsis p {
    color: #596169 !important;
}

html[data-theme="light"]
.poster-synopsis-label {
    color: #946600 !important;
}


/* MOBILE */

@media (max-width: 600px) {

    .poster-modal {
        max-height: 94vh;
    }

    .poster-synopsis {
        margin-top: 14px;
    }

    .poster-synopsis p {
        font-size: 12px;
        line-height: 1.5;
    }
}


/* ==========================================================
   V1.6.3 - MODE CLAIR : BENEVOLES PLUS LISIBLES
   ========================================================== */

html[data-theme="light"] .person:not(.empty) {
    background: #EAF8EF !important;
    border-color: #62C77B !important;
    color: #087A31 !important;

    font-weight: 700;
}


/* Nom cliquable du bénévole en mode admin */

html[data-theme="light"] .person:not(.empty) button,
html[data-theme="light"] .person:not(.empty) a {
    color: #087A31 !important;
    font-weight: 700;
}


/* Flèche / action éventuellement présente dans la pastille */

html[data-theme="light"] .person:not(.empty) span {
    color: #087A31 !important;
}


/* Survol */

html[data-theme="light"] .person:not(.empty):hover {
    background: #DDF4E5 !important;
    border-color: #39A95A !important;
}



/* ==========================================================
   V1.6.4 - MODALE DE CONFIRMATION
   ========================================================== */

.confirm-modal {
    position: relative;

    width: min(100%, 420px);

    padding: 28px;

    border-radius: 20px;

    background: var(--panel);

    border:
        1px solid
        var(--border);

    box-shadow:
        0 25px 80px
        rgba(0,0,0,.45);
}


.confirm-modal h2 {
    margin:
        5px 40px 10px 0;

    font-size: 20px;
}


.confirm-modal-message {
    margin:
        0 0 24px;

    color: var(--muted);

    font-size: 14px;
    line-height: 1.55;
}


.confirm-modal-message strong {
    color: var(--text);
}


.confirm-modal-actions {
    display: flex;

    justify-content:
        flex-end;

    gap: 10px;
}


.confirm-cancel,
.confirm-action {
    min-height: 42px;

    padding:
        9px 18px;

    border-radius: 11px;

    font: inherit;
    font-weight: 700;

    cursor: pointer;
}


.confirm-cancel {
    background:
        var(--panel2);

    border:
        1px solid
        var(--border);

    color:
        var(--text);
}


.confirm-cancel:hover {
    filter:
        brightness(1.08);
}


.confirm-action {
    background:
        #B94141;

    border:
        1px solid
        #D45A5A;

    color:
        #ffffff;
}


.confirm-action:hover {
    background:
        #C94B4B;
}


/* Action non destructive */

.confirm-action.role-action {
    background:
        #D9A441;

    border-color:
        #E4B85F;

    color:
        #17130A;
}


.confirm-action.role-action:hover {
    background:
        #E4B85F;
}


/* ----------------------------------------------------------
   THEME CLAIR
   ---------------------------------------------------------- */

html[data-theme="light"]
.confirm-modal {
    background:
        #ffffff;
}


html[data-theme="light"]
.confirm-modal-message {
    color:
        #596169;
}


html[data-theme="light"]
.confirm-cancel {
    background:
        #F0F1F3;

    color:
        #202124;

    border-color:
        rgba(0,0,0,.14);
}


/* ----------------------------------------------------------
   MOBILE
   ---------------------------------------------------------- */

@media (max-width: 600px) {

    .confirm-modal {
        width:
            min(100%, 420px);

        padding:
            23px 18px;
    }

    .confirm-modal-actions {
        flex-direction:
            column-reverse;
    }

    .confirm-cancel,
    .confirm-action {
        width: 100%;
    }
}



/* ==========================================================
   DATE DES SÉANCES — JOUR / NUMÉRO / MOIS
   ========================================================== */

.date-box {
    min-width: 52px;
    height: 68px;

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

    padding: 4px 6px;

    border-radius: 11px;

    line-height: 1;
}

.date-box .date-weekday {
    display: block;

    margin: 0 0 3px;

    font-size: 10px;
    line-height: 1;

    font-weight: 700;

    color: var(--muted);

    text-transform: none;
    white-space: nowrap;
}

.date-box strong {
    display: block;

    margin: 0;

    font-size: 22px;
    line-height: 1;

    font-weight: 800;
}

.date-box > span {
    display: block;

    margin-top: 4px;

    font-size: 10px;
    line-height: 1;

    color: var(--muted);

    white-space: nowrap;
}



/* ==========================================================
   TMDB - RÉALISATION + CASTING
   ========================================================== */

.poster-credits {
    max-width: 440px;
    margin: 14px auto 16px;
    text-align: left;
}

.poster-credit-block {
    margin-top: 11px;
}

.poster-credit-block:first-child {
    margin-top: 0;
}

.poster-credit-label {
    display: block;
    margin-bottom: 5px;

    color: var(--accent);

    font-size: 10px;
    font-weight: 800;
    letter-spacing: .10em;
}

.poster-credit-block p {
    margin: 0;

    color: var(--muted);

    font-size: 13px;
    line-height: 1.5;
}

html[data-theme="light"]
.poster-credit-block p {
    color: #596169 !important;
}

html[data-theme="light"]
.poster-credit-label {
    color: #946600 !important;
}

@media (max-width: 600px) {

    .poster-credits {
        margin-top: 12px;
        margin-bottom: 14px;
    }

    .poster-credit-block p {
        font-size: 12px;
        line-height: 1.45;
    }
}



/* ==========================================================
   TMDB - BANDE-ANNONCE
   ========================================================== */

.poster-trailer {
    max-width: 440px;
    margin: 14px auto 16px;
}

.poster-trailer-button {
    width: 100%;

    padding: 11px 15px;

    border:
        1px solid
        var(--accent);

    border-radius: 10px;

    background:
        var(--accent);

    color: #171717;

    font-size: 12px;
    font-weight: 800;

    letter-spacing: .04em;

    cursor: pointer;

    transition:
        background .15s ease,
        transform .15s ease;
}

.poster-trailer-button:hover {
    background: #E4B85F;
    transform: translateY(-1px);
}

.trailer-modal {
    position: relative;

    width:
        min(
            calc(100% - 28px),
            850px
        );

    padding: 46px 14px 14px;

    border-radius: 20px;

    background: var(--panel);

    border:
        1px solid
        var(--border);

    box-shadow:
        0 25px 80px
        rgba(0,0,0,.55);
}

.trailer-video-container {
    position: relative;

    width: 100%;

    aspect-ratio: 16 / 9;

    overflow: hidden;

    border-radius: 12px;

    background: #000;
}

.trailer-video-container iframe {
    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    border: 0;
}

html[data-theme="light"]
.trailer-modal {
    background: #ffffff;
}

@media (max-width: 600px) {

    .poster-trailer {
        margin:
            12px auto 14px;
    }

    .poster-trailer-button {
        padding:
            10px 12px;

        font-size: 11px;
    }

    .trailer-modal {
        width:
            calc(100% - 18px);

        padding:
            42px 8px 8px;

        border-radius: 15px;
    }
}