/* ── Layout ── */
body { background: #f8f9fa; }

.app-layout {
    display: flex;
    min-height: calc(100vh - 60px);
}

/* ── Sidebar ── */
.sidebar {
    width: 280px;
    min-width: 280px;
    background: #fff;
    border-right: 1px solid #dee2e6;
    padding: 1rem 0;
    position: sticky;
    top: 0;
    height: calc(100vh - 60px);
    overflow-y: auto;
}

.sidebar-title {
    font-size: .7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: #6c757d;
    padding: .25rem 1.25rem .75rem;
}

.period-btn {
    display: flex;
    align-items: center;
    gap: .75rem;
    width: 100%;
    padding: .55rem 1.25rem;
    background: none;
    border: none;
    text-align: left;
    cursor: pointer;
    transition: background .15s;
    text-decoration: none;
    color: #212529;
}

.period-btn:hover  { background: #f0f0f0; color: #212529; }
.period-btn.active { background: #e9ecef; font-weight: 600; color: #212529; }

.period-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}

.period-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex: 1;
    min-width: 0;
}

.period-name {
    font-size: .875rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.period-count {
    font-size: .75rem;
    color: #6c757d;
    background: #e9ecef;
    border-radius: 10px;
    padding: .1rem .5rem;
    margin-left: .5rem;
    flex-shrink: 0;
}

.sidebar-total {
    font-size: .75rem;
    color: #6c757d;
    padding: .75rem 1.25rem 0;
    border-top: 1px solid #dee2e6;
    margin-top: .5rem;
}

/* ── Main content ── */
.main-content {
    flex: 1;
    min-width: 0;
    padding: 1.5rem;
}

/* ── Filters bar ── */
.filters-bar {
    display: flex;
    gap: .75rem;
    flex-wrap: wrap;
    align-items: center;
    margin-bottom: 1.25rem;
}

.filters-bar input,
.filters-bar select {
    font-size: .875rem;
}

/* ── Period banner ── */
.period-banner {
    border-left: 4px solid;
    border-radius: .375rem;
    padding: .75rem 1rem;
    margin-bottom: 1.25rem;
    font-size: .875rem;
}

.period-banner-name {
    font-weight: 700;
    font-size: 1rem;
    margin-bottom: .2rem;
}

/* ── Works grid ── */
.works-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 1rem;
}

/* ── Work card ── */
.work-card {
    background: #fff;
    border-radius: .5rem;
    border: 1px solid #dee2e6;
    border-left: 4px solid var(--card-color, #6366f1);
    padding: 1rem;
    transition: box-shadow .15s, transform .15s;
}

.work-card:hover {
    box-shadow: 0 4px 12px rgba(0,0,0,.1);
    transform: translateY(-2px);
}

.card-title {
    font-weight: 600;
    font-size: .95rem;
    margin-bottom: .25rem;
    line-height: 1.3;
}

.card-author {
    font-size: .8rem;
    color: #6c757d;
    margin-bottom: .6rem;
}

.card-meta {
    display: flex;
    flex-wrap: wrap;
    gap: .3rem;
    margin-bottom: .6rem;
}

.tag {
    display: inline-block;
    font-size: .7rem;
    padding: .15rem .5rem;
    border-radius: 20px;
    font-weight: 500;
    white-space: nowrap;
}

.tag-type  { background: #e9ecef; color: #495057; }
.tag-year  { background: #fff3cd; color: #664d03; }
.tag-period { font-size: .7rem; }

.card-desc {
    font-size: .8rem;
    color: #495057;
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ── Empty state ── */
.empty-state {
    text-align: center;
    padding: 4rem 2rem;
    color: #6c757d;
}

/* ── Results header ── */
.results-header {
    display: flex;
    align-items: baseline;
    gap: .75rem;
    margin-bottom: 1rem;
}

.results-title  { font-size: 1.25rem; font-weight: 700; }
.results-count  { font-size: .875rem; color: #6c757d; }

mark {
    background: #fff3cd;
    padding: 0 .1rem;
    border-radius: 2px;
}

/* ── Responsive ── */
@media (max-width: 768px) {
    .app-layout { flex-direction: column; }
    .sidebar    { width: 100%; min-width: 0; height: auto; position: static; border-right: none; border-bottom: 1px solid #dee2e6; }
    .works-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   Modal Oeuvre (detail + swipe)
   ============================================================ */
.oeuvre-modal {
    position: fixed; inset: 0;
    z-index: 2000;
    display: flex; align-items: center; justify-content: center;
    padding: 2rem 5rem;
    animation: fadeIn .2s ease;
}
.oeuvre-modal.d-none { display: none; }
@keyframes fadeIn { from {opacity:0} to {opacity:1} }

.oeuvre-modal-bg {
    position: absolute; inset: 0;
    background: rgba(15, 20, 30, .72);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    cursor: pointer;
}

.oeuvre-modal-card {
    --card-color: #6366f1;
    position: relative;
    z-index: 1;
    max-width: 760px; width: 100%;
    max-height: 100%;
    background: #fff;
    border-radius: 1rem;
    box-shadow: 0 30px 80px rgba(0,0,0,.5);
    display: flex; flex-direction: column;
    overflow: hidden;
    animation: slideUpFade .3s cubic-bezier(.36,1.3,.6,1);
    touch-action: pan-y;
}
@keyframes slideUpFade { from {transform:translateY(30px); opacity:0} to {transform:translateY(0); opacity:1} }

/* Bande de couleur periode a gauche */
.oeuvre-modal-card::before {
    content: "";
    position: absolute;
    top: 0; left: 0; bottom: 0;
    width: 6px;
    background: var(--card-color);
}

.oeuvre-modal-inner {
    padding: 2.5rem 2.75rem 2rem 3rem;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.slide-in-right,
.slide-in-left { animation: slideSwap .25s ease; }
@keyframes slideSwap { from {opacity:0} to {opacity:1} }

.oeuvre-meta-row {
    display: flex; flex-wrap: wrap; gap: .5rem;
    margin-bottom: 1.25rem;
}
.oeuvre-meta-row .tag {
    font-size: .8rem; font-weight: 600;
    padding: .3rem .75rem; border-radius: 999px;
    background: #f1f3f5; color: #495057;
}
.oeuvre-meta-row .tag-type   { background: #e7f1ff; color: #1c64c3; }
.oeuvre-meta-row .tag-year   { background: #fff4e6; color: #b35900; font-variant-numeric: tabular-nums; }

.oeuvre-title {
    margin: 0 0 .35rem 0;
    font-size: 1.85rem; font-weight: 700;
    line-height: 1.2; color: #1a1d23;
    letter-spacing: -.01em;
}
.oeuvre-author {
    margin-bottom: 1.5rem;
    font-size: .95rem; font-style: italic;
    color: #868e96;
}
.oeuvre-desc {
    font-size: 1.02rem;
    line-height: 1.7;
    color: #343a40;
    white-space: pre-wrap;
    word-break: break-word;
}
.oeuvre-desc mark { background: #fff3a0; padding: 0 2px; border-radius: 3px; }

.oeuvre-counter {
    margin-top: 2rem;
    text-align: center;
    font-variant-numeric: tabular-nums;
    color: #adb5bd;
    font-size: .85rem;
    letter-spacing: .05em;
}

.oeuvre-close {
    position: absolute; top: .75rem; right: 1rem;
    background: transparent; border: 0; color: #adb5bd;
    font-size: 1.75rem; line-height: 1; cursor: pointer;
    padding: .25rem .6rem; border-radius: .4rem;
    transition: color .15s, background .15s;
    z-index: 3;
}
.oeuvre-close:hover { color: #212529; background: #f1f3f5; }

/* Fleches nav sur l overlay, HORS de la carte */
.oeuvre-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255,255,255,.1);
    border: 2px solid rgba(255,255,255,.25);
    color: #fff;
    width: 52px; height: 52px; border-radius: 50%;
    font-size: 2rem; line-height: 0;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    padding: 0; padding-bottom: 4px;
    transition: all .18s ease;
    z-index: 2;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}
.oeuvre-nav:hover {
    background: rgba(255,255,255,.95);
    color: #212529;
    border-color: rgba(255,255,255,.95);
    transform: translateY(-50%) scale(1.08);
}
.oeuvre-nav:active { transform: translateY(-50%) scale(.95); }
.oeuvre-nav.prev { left: 1rem; }
.oeuvre-nav.next { right: 1rem; }
.oeuvre-nav:disabled {
    opacity: .25; cursor: not-allowed;
    pointer-events: none;
}

.work-card { cursor: pointer; }

@media (max-width: 820px) {
    .oeuvre-modal { padding: 1rem .5rem; }
    .oeuvre-nav { width: 42px; height: 42px; font-size: 1.6rem; }
    .oeuvre-nav.prev { left: .25rem; }
    .oeuvre-nav.next { right: .25rem; }
    .oeuvre-modal-inner { padding: 2rem 1.5rem 1.5rem 2rem; }
    .oeuvre-title { font-size: 1.4rem; }
    .oeuvre-desc { font-size: .98rem; }
}

@media (max-width: 480px) {
    .oeuvre-nav {
        background: rgba(255,255,255,.85);
        color: #212529;
        border-color: transparent;
    }
}

/* ============================================================
   Images oeuvres (carte + modal)
   ============================================================ */
.card-thumb,
.card-thumb-placeholder {
    display: block;
    width: calc(100% + 2rem + 4px);
    margin: -1rem -1rem .75rem calc(-1rem - 4px);
    border-radius: .5rem .5rem 0 0;
    background: linear-gradient(135deg,
                color-mix(in srgb, var(--card-color, #6366f1) 35%, #fff),
                color-mix(in srgb, var(--card-color, #6366f1) 15%, #fff));
}
.card-thumb {
    height: 150px;
    object-fit: cover;
    object-position: center;
}
.card-thumb-placeholder {
    height: 90px;
    display: flex; align-items: center; justify-content: center;
    color: rgba(255,255,255,.7);
    font-size: 1.8rem;
}

/* Dans le modal */
.oeuvre-modal-image {
    margin: -2.5rem -2.75rem 1.5rem -3rem;
    min-height: 200px;
    max-height: 55vh;
    overflow: hidden;
    background: linear-gradient(135deg,
                color-mix(in srgb, var(--card-color) 45%, #1a1d23),
                color-mix(in srgb, var(--card-color) 15%, #1a1d23));
    display: flex; align-items: center; justify-content: center;
    padding: 1rem;
}
.oeuvre-modal-image img {
    max-width: 100%;
    max-height: 55vh;
    object-fit: contain;
    display: block;
    border-radius: .3rem;
    box-shadow: 0 8px 24px rgba(0,0,0,.35);
}
.oeuvre-modal-image.placeholder {
    color: rgba(255,255,255,.5);
    font-size: 3rem;
}

@media (max-width: 820px) {
    .oeuvre-modal-image {
        margin: -2rem -1.5rem 1rem -2rem;
        min-height: 160px;
        max-height: 45vh;
        padding: .75rem;
    }
    .oeuvre-modal-image img { max-height: 45vh; }
}

/* ============================================================
   MOBILE — refonte globale (≤ 768px)
   ============================================================ */
html { -webkit-text-size-adjust: 100%; }
body { text-rendering: optimizeLegibility; }

@media (max-width: 768px) {
    /* ---- Navbar ---- */
    .navbar {
        padding: .5rem .75rem !important;
        gap: .35rem !important;
        flex-wrap: wrap;
    }
    .navbar-brand { font-size: .95rem; max-width: 60%; }
    .navbar-brand i { display: none; }
    .navbar .btn-sm { font-size: .75rem; padding: .3rem .6rem; }
    .navbar .ms-auto { gap: .4rem !important; flex-wrap: wrap; justify-content: flex-end; }
    .navbar .ms-auto .text-light.small { font-size: .75rem; }

    /* ---- Sidebar → pills horizontales ---- */
    .app-layout { flex-direction: column; }
    .sidebar {
        width: 100%; min-width: 0;
        position: sticky; top: 0; z-index: 100;
        height: auto; max-height: none;
        padding: 0;
        background: #fff;
        border-right: none;
        border-bottom: 1px solid #dee2e6;
        box-shadow: 0 1px 3px rgba(0,0,0,.04);
    }
    .sidebar-title { display: none; }
    .sidebar {
        display: flex;
        overflow-x: auto;
        gap: .4rem;
        padding: .5rem .75rem;
        scrollbar-width: none;
    }
    .sidebar::-webkit-scrollbar { display: none; }

    .period-btn {
        flex-shrink: 0;
        padding: .35rem .75rem;
        border-radius: 999px;
        background: #f0f2f5;
        white-space: nowrap;
        gap: .4rem;
    }
    .period-btn.active {
        background: #212529;
        color: #fff;
    }
    .period-btn.active .period-name,
    .period-btn.active .period-count { color: #fff; }
    .period-btn.active .period-count { background: rgba(255,255,255,.2); }
    .period-btn .period-info { gap: .3rem; }
    .period-btn .period-name { font-size: .8rem; }
    .period-dot { width: 8px; height: 8px; }
    .sidebar-total { display: none; }

    /* ---- Main content ---- */
    .main-content { padding: .9rem .75rem; }

    /* ---- Filtres : barre compacte ---- */
    .filters-bar { gap: .5rem; margin-bottom: 1rem; }
    .filters-bar input,
    .filters-bar select {
        flex: 1 1 100%;
        font-size: 16px; /* evite le zoom iOS */
    }
    .filters-bar button { flex-shrink: 0; }

    /* ---- Banniere periode ---- */
    .period-banner-name { font-size: .95rem; }
    .period-banner { font-size: .8rem; }

    /* ---- Results header ---- */
    .results-header { flex-wrap: wrap; gap: .25rem; }
    .results-header h2 { font-size: 1.3rem; }

    /* ---- Grid une colonne mais confortable ---- */
    .works-grid {
        grid-template-columns: 1fr;
        gap: .85rem;
    }
    .card-title { font-size: 1rem; }
    .card-thumb { height: 180px; }
    .card-desc { -webkit-line-clamp: 4; font-size: .85rem; }

    /* ---- Footer nav + quiz ---- */
    .quiz-wrap { padding: 0 .6rem; margin: 1rem auto 2rem; }

    /* Wheel : scale en CSS (canvas rendu interne 440, affichage adapte) */
    #wheel {
        width: min(100%, 360px) !important;
        height: auto !important;
        max-width: 100%;
    }

    /* Layout quiz : tout en colonne */
    .quiz-wrap .d-flex.gap-4.flex-wrap { gap: 1.25rem !important; }
    .roster-panel {
        max-width: 100%;
        width: 100%;
        min-width: 0;
        order: 3;
    }
    .roster-panel #roster-list {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: .25rem .5rem;
    }

    /* Scores table */
    #scores-table th:first-child,
    #scores-table td:first-child { padding-left: .5rem; }
    #scores-table td span.text-muted { display: none; }

    /* Overlay question */
    .q-overlay { padding: .5rem; }
    .q-card { padding: 1.25rem; max-width: 100%; }
    .q-enonce { font-size: 1rem; }
    .q-btn { font-size: .9rem; padding: .65rem .8rem; }

    /* Spin button pleine largeur */
    .spin-btn { min-width: 100%; }

    /* Header quiz (retour + titre + reset) : se reorganise */
    #view-quiz > .d-flex.align-items-center.gap-3.mb-4 {
        gap: .5rem !important;
    }
    #quiz-group-title { font-size: 1.2rem; width: 100%; order: 2; margin: 0; }
}

@media (max-width: 480px) {
    /* Encore plus compact sur tres petits ecrans */
    .navbar-brand { font-size: .85rem; }
    .navbar .btn-sm { padding: .25rem .5rem; }
    .navbar .ms-auto .text-light.small strong { max-width: 80px; display: inline-block; vertical-align: bottom; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

    .card-thumb { height: 150px; }
    .oeuvre-title { font-size: 1.25rem; }
    .oeuvre-desc  { font-size: .95rem; }

    #wheel { width: min(100%, 300px) !important; }

    .period-btn { padding: .3rem .6rem; }
    .period-btn .period-name { font-size: .75rem; }
    .period-count { font-size: .7rem; padding: .05rem .4rem; }
}

/* Video YouTube dans le modal oeuvre */
.oeuvre-video { margin-top: 1.5rem; }
.yt-wrap {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
    border-radius: .5rem;
    background: #000;
    box-shadow: 0 4px 16px rgba(0,0,0,.15);
}
.yt-wrap iframe {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    border: 0;
}