/* ══ RESET & VARIABLES ══════════════════════════════════════════════════════ */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

:root {
    --bg:          #0d0d1a;
    --bg2:         #1a1a2e;
    --bg3:         #16213e;
    --bg4:         #0f3460;
    --accent:      #e94560;
    --accent2:     #f5a623;
    --mickael:     #4a9eff;
    --lucie:       #ff6eb4;
    --text:        #e8e8f0;
    --muted:       #7a7a9a;
    --card-bg:     #1e1e32;
    --border:      #2a2a4a;
    --radius:      12px;
    --radius-sm:   8px;
    --shadow:      0 8px 32px rgba(0,0,0,.5);
    --trans:       .2s ease;
    --safe-top:    env(safe-area-inset-top,    0px);
    --safe-bottom: env(safe-area-inset-bottom, 0px);
    --safe-left:   env(safe-area-inset-left,   0px);
    --safe-right:  env(safe-area-inset-right,  0px);
    --bnav-h:      60px;
}

html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    height: -webkit-fill-available;
}

body {
    background:  var(--bg);
    color:       var(--text);
    font-family: -apple-system, "Helvetica Neue", "Segoe UI", system-ui, sans-serif;
    min-height:  100vh;
    min-height:  -webkit-fill-available;
    line-height: 1.6;
    overflow-x:  hidden;
    -webkit-font-smoothing: antialiased;
}

a   { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }

button {
    cursor:      pointer;
    font-family: inherit;
    -webkit-appearance: none;
    border:      none;
    background:  none;
}

input, textarea, select {
    font-family:        inherit;
    font-size:          16px;
    -webkit-appearance: none;
    border-radius:      0;
    color:              var(--text);
    background:         var(--bg3);
}

/* ══ SCROLLBAR ══════════════════════════════════════════════════════════════ */
::-webkit-scrollbar       { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--bg2); }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--accent); }

/* ══ NAVBAR TOP ═════════════════════════════════════════════════════════════ */
.navbar {
    position:    sticky;
    top:         var(--safe-top);
    z-index:     200;
    background:  rgba(13,13,26,.97);
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter:         blur(16px);
    border-bottom: 1px solid var(--border);
    display:     flex;
    align-items: center;
    gap:         .75rem;
    padding:     .65rem 1.25rem;
    flex-wrap:   wrap;
}

.logo {
    font-size:   1.3rem;
    font-weight: 800;
    color:       var(--accent);
    white-space: nowrap;
    flex-shrink: 0;
}

.nav-links {
    display:    flex;
    list-style: none;
    gap:        .15rem;
    flex-wrap:  wrap;
    flex:       1;
}
.nav-links a {
    display:       flex;
    align-items:   center;
    gap:           .3rem;
    padding:       .38rem .75rem;
    border-radius: var(--radius-sm);
    font-size:     .83rem;
    color:         var(--muted);
    transition:    all var(--trans);
    white-space:   nowrap;
}
.nav-links a:hover  { background: var(--bg3); color: var(--text); }
.nav-links a.active { background: var(--bg3); color: var(--accent); font-weight: 600; }

.badge {
    background:    var(--accent);
    color:         #fff;
    font-size:     .65rem;
    font-weight:   700;
    padding:       .1rem .4rem;
    border-radius: 20px;
    min-width:     1rem;
    text-align:    center;
}

/* Bouton retour portail */
.btn-back-app {
    display:         flex;
    align-items:     center;
    gap:             .3rem;
    padding:         .38rem .75rem;
    border-radius:   var(--radius-sm);
    font-size:       .83rem;
    font-weight:     600;
    color:           var(--muted);
    border:          1px solid var(--border) !important;
    background:      var(--bg3);
    white-space:     nowrap;
    flex-shrink:     0;
    transition:      all var(--trans);
    text-decoration: none;
}
.btn-back-app:hover { color: var(--text); border-color: var(--accent) !important; }

/* Search bar */
.search-bar {
    display:       flex;
    align-items:   center;
    background:    var(--bg3);
    border:        1px solid var(--border);
    border-radius: var(--radius-sm);
    overflow:      hidden;
    flex-shrink:   0;
}
.search-bar input {
    border:      none;
    outline:     none;
    padding:     .38rem .75rem;
    font-size:   .85rem;
    width:       180px;
    background:  transparent;
    color:       var(--text);
}
.search-bar input::placeholder { color: var(--muted); }
.search-bar button {
    padding:     .38rem .65rem;
    color:       var(--muted);
    transition:  color var(--trans);
    background:  none;
}
.search-bar button:hover { color: var(--accent); }

/* Burger */
.burger {
    display:  none;
    padding:  .4rem .6rem;
    color:    var(--text);
    font-size:1.2rem;
}

/* ══ MENU MOBILE ════════════════════════════════════════════════════════════ */
.mobile-menu {
    display:          flex;
    flex-direction:   column;
    position:         fixed;
    inset:            0;
    background:       rgba(13,13,26,.98);
    z-index:          300;
    padding:          2rem 1.5rem;
    gap:              .5rem;
    transform:        translateX(-100%);
    transition:       transform .3s ease;
    overflow-y:       auto;
}
.mobile-menu.open { transform: translateX(0); }

.mobile-menu a, .mobile-menu button {
    display:       flex;
    align-items:   center;
    gap:           .75rem;
    padding:       .85rem 1rem;
    border-radius: var(--radius);
    font-size:     1rem;
    color:         var(--text);
    transition:    background var(--trans);
    background:    none;
    border:        none;
    text-align:    left;
    width:         100%;
}
.mobile-menu a:hover { background: var(--bg3); }
.mobile-menu a.active { color: var(--accent); background: var(--bg3); }

.mobile-menu-close {
    align-self:  flex-end;
    font-size:   1.4rem;
    color:       var(--muted);
    cursor:      pointer;
    padding:     .25rem .5rem;
    line-height: 1;
}
.mobile-menu-back {
    color:     var(--muted) !important;
    font-size: .9rem !important;
    border-bottom: 1px solid var(--border);
    margin-bottom: .5rem;
    padding-bottom: 1rem !important;
}

/* ══ MAIN ═══════════════════════════════════════════════════════════════════ */
main {
    max-width:  1400px;
    margin:     0 auto;
    padding:    1.5rem 1.25rem calc(var(--bnav-h) + 1.5rem + var(--safe-bottom));
}

.section         { display: none; }
.section.active  { display: block; }

.section h1 {
    font-size:     1.6rem;
    font-weight:   800;
    margin-bottom: 1.25rem;
    color:         var(--text);
    display:       flex;
    align-items:   center;
    gap:           .6rem;
}
.section h1 i { color: var(--accent); }

.subtitle {
    color:         var(--muted);
    font-size:     .9rem;
    margin-bottom: 1.25rem;
}

/* ══ GRILLE DE CARTES ═══════════════════════════════════════════════════════ */
.cards-grid {
    display:               grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap:                   1rem;
}

/* ══ CARTE ══════════════════════════════════════════════════════════════════ */
.card {
    background:    var(--card-bg);
    border-radius: var(--radius);
    overflow:      hidden;
    cursor:        pointer;
    transition:    transform var(--trans), box-shadow var(--trans);
    position:      relative;
    display:       flex;
    flex-direction:column;
}
.card:hover {
    transform:  translateY(-4px);
    box-shadow: var(--shadow);
}

.card-poster {
    position:    relative;
    aspect-ratio:2/3;
    overflow:    hidden;
    flex-shrink: 0;
}
.card-poster img {
    width:      100%;
    height:     100%;
    object-fit: cover;
    transition: transform .4s ease;
    display:    block;
}
.card:hover .card-poster img { transform: scale(1.05); }

.type-badge {
    position:      absolute;
    top:           .5rem;
    left:          .5rem;
    background:    rgba(0,0,0,.75);
    color:         #fff;
    font-size:     .65rem;
    font-weight:   700;
    padding:       .2rem .45rem;
    border-radius: 20px;
    backdrop-filter: blur(4px);
    pointer-events: none;
}

.card-overlay {
    position:   absolute;
    inset:      0;
    background: linear-gradient(to top, rgba(0,0,0,.85) 0%, transparent 60%);
    display:    flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items:    center;
    gap:         .4rem;
    padding:     .75rem .5rem;
    opacity:     0;
    transition:  opacity var(--trans);
}
.card:hover .card-overlay { opacity: 1; }

.card-overlay button {
    width:         100%;
    padding:       .38rem .5rem;
    border-radius: var(--radius-sm);
    font-size:     .75rem;
    font-weight:   600;
    color:         #fff;
    transition:    background var(--trans);
    display:       flex;
    align-items:   center;
    justify-content: center;
    gap:           .3rem;
}
.btn-wl   { background: rgba(233,69,96,.85); }
.btn-seen { background: rgba(74,158,255,.85); }
.btn-suivi{ background: rgba(245,166,35,.85); width: auto !important; padding: .38rem .65rem !important; }
.btn-wl:hover    { background: var(--accent); }
.btn-seen:hover  { background: var(--mickael); }
.btn-suivi:hover { background: var(--accent2); }

.card-info {
    padding:        .65rem .75rem .75rem;
    display:        flex;
    flex-direction: column;
    gap:            .3rem;
    flex:           1;
}

.card-title {
    font-size:   .85rem;
    font-weight: 700;
    line-height: 1.3;
    display:     -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow:    hidden;
}

.card-date {
    font-size: .72rem;
    color:     var(--muted);
    display:   flex;
    align-items: center;
    gap:       .25rem;
}

/* Notes sur les cartes vus */
.card-notes {
    display: flex;
    gap:     .4rem;
    flex-wrap: wrap;
    margin-top: .1rem;
}
.note {
    font-size:     .72rem;
    font-weight:   700;
    padding:       .15rem .45rem;
    border-radius: 20px;
    display:       flex;
    align-items:   center;
    gap:           .25rem;
}
.note.mkl { background: rgba(74,158,255,.15); color: var(--mickael); }
.note.luc { background: rgba(255,110,180,.15); color: var(--lucie); }

/* ══ PLEX CHIP ══════════════════════════════════════════════════════════════ */
.wl-plex-row {
    margin-top: .3rem;
}

.plex-chip {
    display:       inline-flex;
    align-items:   center;
    gap:           .4rem;
    padding:       .32rem .75rem;
    border-radius: 20px;
    font-size:     .75rem;
    font-weight:   600;
    border:        1px solid var(--border);
    color:         var(--muted);
    background:    rgba(255,255,255,.04);
    transition:    all var(--trans);
    cursor:        pointer;
    width:         100%;
    justify-content: center;
}
.plex-chip i { font-size: .7rem; }
.plex-chip:hover {
    border-color: var(--accent2);
    color:        var(--accent2);
    background:   rgba(245,166,35,.08);
}
.plex-chip.on {
    background:  rgba(39,174,96,.15);
    border-color:rgba(39,174,96,.5);
    color:       #27ae60;
}
.plex-chip.on:hover {
    background:  rgba(233,69,96,.12);
    border-color:rgba(233,69,96,.5);
    color:       var(--accent);
}

/* Bouton retirer watchlist */
.btn-remove {
    display:       flex;
    align-items:   center;
    justify-content: center;
    gap:           .35rem;
    padding:       .32rem .75rem;
    border-radius: var(--radius-sm);
    font-size:     .72rem;
    font-weight:   600;
    color:         var(--muted);
    border:        1px solid var(--border);
    background:    transparent;
    transition:    all var(--trans);
    width:         100%;
    margin-top:    .3rem;
}
.btn-remove:hover {
    background:   rgba(233,69,96,.12);
    border-color: var(--accent);
    color:        var(--accent);
}

/* Boutons vus */
.vu-actions {
    display: flex;
    gap:     .4rem;
    margin-top: .3rem;
}
.btn-edit-vu, .btn-delete-vu {
    flex:          1;
    display:       flex;
    align-items:   center;
    justify-content: center;
    gap:           .3rem;
    padding:       .32rem .5rem;
    border-radius: var(--radius-sm);
    font-size:     .72rem;
    font-weight:   600;
    border:        1px solid var(--border);
    background:    transparent;
    color:         var(--muted);
    transition:    all var(--trans);
}
.btn-edit-vu:hover   { background: rgba(74,158,255,.12);  border-color: var(--mickael); color: var(--mickael); }
.btn-delete-vu:hover { background: rgba(233,69,96,.12);   border-color: var(--accent);  color: var(--accent); }
.btn-delete-vu { flex: 0 0 auto; padding: .32rem .55rem; }

/* ══ WATCHLIST TOOLBAR ══════════════════════════════════════════════════════ */
.watchlist-toolbar {
    display:       flex;
    align-items:   center;
    gap:           .75rem;
    margin-bottom: 1.25rem;
    flex-wrap:     wrap;
}

.filter-bar {
    display:  flex;
    gap:      .4rem;
    flex-wrap:wrap;
}

.filter {
    padding:       .38rem .9rem;
    border-radius: 20px;
    font-size:     .8rem;
    font-weight:   600;
    border:        1px solid var(--border);
    color:         var(--muted);
    background:    transparent;
    transition:    all var(--trans);
    display:       flex;
    align-items:   center;
    gap:           .35rem;
    cursor:        pointer;
}
.filter:hover  { border-color: var(--accent); color: var(--text); }
.filter.active {
    background:   var(--accent);
    border-color: var(--accent);
    color:        #fff;
}

/* Bouton tri date */
.wl-sort-btn {
    display:       flex;
    align-items:   center;
    gap:           .4rem;
    padding:       .38rem .9rem;
    border-radius: 20px;
    font-size:     .8rem;
    font-weight:   600;
    border:        1px solid var(--border);
    color:         var(--muted);
    background:    transparent;
    transition:    all var(--trans);
    cursor:        pointer;
    margin-left:   auto;
    white-space:   nowrap;
}
.wl-sort-btn:hover {
    border-color: var(--accent2);
    color:        var(--accent2);
}
.wl-sort-btn i { font-size: .8rem; }

/* ══ PAGINATION ═════════════════════════════════════════════════════════════ */
.pagination-bar {
    display:       flex;
    align-items:   center;
    gap:           1rem;
    margin-bottom: 1rem;
}
.pagination-bar button {
    padding:       .4rem .9rem;
    border-radius: var(--radius-sm);
    background:    var(--bg3);
    border:        1px solid var(--border);
    color:         var(--text);
    font-size:     .85rem;
    transition:    all var(--trans);
}
.pagination-bar button:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }
.pagination-bar button:disabled { opacity: .4; cursor: not-allowed; }
#upcoming-page-label { font-size: .85rem; color: var(--muted); }

/* ══ TABS SÉRIES ════════════════════════════════════════════════════════════ */
.tabs {
    display:       flex;
    gap:           .5rem;
    margin-bottom: 1.25rem;
    flex-wrap:     wrap;
}
.tab {
    padding:       .45rem 1.1rem;
    border-radius: 20px;
    font-size:     .85rem;
    font-weight:   600;
    border:        1px solid var(--border);
    color:         var(--muted);
    background:    transparent;
    transition:    all var(--trans);
}
.tab:hover  { border-color: var(--accent); color: var(--text); }
.tab.active {
    background:   var(--accent);
    border-color: var(--accent);
    color:        #fff;
}

/* ══ CALENDRIER ═════════════════════════════════════════════════════════════ */
.month-tabs {
    display:       flex;
    gap:           .5rem;
    flex-wrap:     wrap;
    margin-bottom: 1.25rem;
}
.btn-month {
    padding:       .38rem .9rem;
    border-radius: 20px;
    font-size:     .82rem;
    font-weight:   600;
    border:        1px solid var(--border);
    color:         var(--muted);
    background:    transparent;
    transition:    all var(--trans);
    text-transform:capitalize;
}
.btn-month:hover  { border-color: var(--accent); color: var(--text); }
.btn-month.active {
    background:   var(--accent);
    border-color: var(--accent);
    color:        #fff;
}

.card-wrapper {
    position: relative;
}
.cal-badge {
    position:      absolute;
    top:           -.5rem;
    left:          50%;
    transform:     translateX(-50%);
    background:    var(--accent2);
    color:         #000;
    font-size:     .65rem;
    font-weight:   800;
    padding:       .15rem .5rem;
    border-radius: 20px;
    z-index:       2;
    white-space:   nowrap;
    pointer-events:none;
}

/* ══ SECTION PATHÉ ══════════════════════════════════════════════════════════ */
.pathe-grid {
    display:               grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap:                   1.25rem;
    margin-top:            .5rem;
}

.pathe-card {
    background:    var(--card-bg);
    border:        1px solid var(--border);
    border-radius: var(--radius);
    padding:       1.25rem;
    display:       flex;
    flex-direction:column;
    gap:           1rem;
    transition:    transform var(--trans), box-shadow var(--trans), border-color var(--trans);
}
.pathe-card:hover {
    transform:    translateY(-3px);
    box-shadow:   var(--shadow);
    border-color: var(--accent);
}

.pathe-header {
    display:     flex;
    align-items: center;
    gap:         .85rem;
}
.pathe-icon {
    font-size:     2rem;
    width:         52px;
    height:        52px;
    display:       flex;
    align-items:   center;
    justify-content: center;
    background:    var(--bg3);
    border-radius: var(--radius-sm);
    flex-shrink:   0;
}
.pathe-header h2 {
    font-size:   1rem;
    font-weight: 700;
    line-height: 1.3;
}
.pathe-ville {
    font-size: .78rem;
    color:     var(--muted);
    margin-top:.15rem;
}

.pathe-info {
    display:       flex;
    flex-direction:column;
    gap:           .4rem;
}
.pathe-info p {
    font-size:   .82rem;
    color:       var(--muted);
    display:     flex;
    align-items: center;
    gap:         .5rem;
}
.pathe-info p i {
    color:      var(--accent);
    width:      14px;
    flex-shrink:0;
}

.pathe-actions {
    display:  flex;
    gap:      .6rem;
    flex-wrap:wrap;
    margin-top: auto;
}

.btn-pathe {
    flex:          1;
    display:       inline-flex;
    align-items:   center;
    justify-content: center;
    gap:           .4rem;
    padding:       .5rem .75rem;
    border-radius: var(--radius-sm);
    font-size:     .8rem;
    font-weight:   700;
    background:    var(--accent);
    color:         #fff;
    text-decoration: none;
    transition:    background var(--trans), transform var(--trans);
    border:        none;
    cursor:        pointer;
    white-space:   nowrap;
}
.btn-pathe:hover     { background: #c73652; transform: scale(1.02); }
.btn-pathe-alt       { background: var(--bg4); }
.btn-pathe-alt:hover { background: #1a4d80; transform: scale(1.02); }

/* ══ SUIVI SÉRIES ═══════════════════════════════════════════════════════════ */
.suivi-grid {
    display:       flex;
    flex-direction:column;
    gap:           1rem;
}

.suivi-card {
    background:    var(--card-bg);
    border:        1px solid var(--border);
    border-radius: var(--radius);
    padding:       1rem 1.15rem;
    display:       flex;
    gap:           1rem;
    align-items:   flex-start;
    transition:    border-color var(--trans);
}
.suivi-card:hover { border-color: rgba(233,69,96,.4); }

.suivi-poster {
    width:         72px;
    height:        108px;
    object-fit:    cover;
    border-radius: var(--radius-sm);
    flex-shrink:   0;
}

.suivi-info {
    display:        flex;
    flex-direction: column;
    gap:            .5rem;
    flex:           1;
    min-width:      0;
}

.suivi-header {
    display:     flex;
    align-items: flex-start;
    gap:         .5rem;
}
.suivi-title {
    font-size:   1rem;
    font-weight: 700;
    line-height: 1.3;
    flex:        1;
    min-width:   0;
}
.btn-remove-suivi {
    padding:       .25rem .45rem;
    border-radius: var(--radius-sm);
    color:         var(--muted);
    font-size:     .85rem;
    flex-shrink:   0;
    transition:    all var(--trans);
    background:    none;
    border:        none;
    cursor:        pointer;
}
.btn-remove-suivi:hover { color: var(--accent); background: rgba(233,69,96,.1); }

.suivi-meta {
    display:  flex;
    gap:      .4rem;
    flex-wrap:wrap;
}
.suivi-tag {
    display:       inline-flex;
    align-items:   center;
    gap:           .3rem;
    font-size:     .72rem;
    font-weight:   600;
    padding:       .18rem .55rem;
    border-radius: 20px;
    background:    var(--bg3);
    color:         var(--muted);
    border:        1px solid var(--border);
}
.suivi-status { color: var(--text); }

.suivi-next {
    background:    var(--bg3);
    border:        1px solid var(--border);
    border-radius: var(--radius-sm);
    padding:       .65rem .85rem;
    display:       flex;
    flex-direction:column;
    gap:           .3rem;
}
.suivi-next.new-season {
    border-color: var(--accent2);
    background:   rgba(245,166,35,.07);
}

.suivi-next-label {
    font-size:   .72rem;
    font-weight: 700;
    color:       var(--muted);
    text-transform: uppercase;
    letter-spacing: .04em;
}
.suivi-next.new-season .suivi-next-label { color: var(--accent2); }

.suivi-next-info {
    display:     flex;
    align-items: center;
    gap:         .5rem;
    flex-wrap:   wrap;
}
.episode-code {
    font-size:     .82rem;
    font-weight:   800;
    background:    var(--bg4);
    color:         var(--mickael);
    padding:       .15rem .5rem;
    border-radius: var(--radius-sm);
}
.episode-name {
    font-size:  .82rem;
    color:      var(--text);
    font-style: italic;
}

.suivi-next-date {
    font-size:   .78rem;
    color:       var(--accent2);
    font-weight: 600;
    display:     flex;
    align-items: center;
    gap:         .35rem;
}

.suivi-pending {
    font-size:   .8rem;
    color:       var(--muted);
    display:     flex;
    align-items: center;
    gap:         .4rem;
    padding:     .5rem .75rem;
    background:  var(--bg3);
    border-radius:var(--radius-sm);
    border:      1px solid var(--border);
}

/* ══ MODAL ══════════════════════════════════════════════════════════════════ */
.modal {
    display:         none;
    position:        fixed;
    inset:           0;
    background:      rgba(0,0,0,.75);
    z-index:         400;
    align-items:     center;
    justify-content: center;
    padding:         1rem;
    overflow-y:      auto;
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter:         blur(6px);
}
.modal.open { display: flex; }

.modal-content {
    background:    var(--bg2);
    border:        1px solid var(--border);
    border-radius: var(--radius);
    width:         100%;
    max-width:     860px;
    max-height:    90vh;
    overflow-y:    auto;
    position:      relative;
    box-shadow:    var(--shadow);
    animation:     modalIn .25s ease;
}

@keyframes modalIn {
    from { opacity: 0; transform: scale(.96) translateY(12px); }
    to   { opacity: 1; transform: scale(1)   translateY(0); }
}

.modal-close {
    position:      absolute;
    top:           .75rem;
    right:         .75rem;
    z-index:       10;
    width:         32px;
    height:        32px;
    border-radius: 50%;
    background:    rgba(255,255,255,.08);
    color:         var(--text);
    font-size:     1rem;
    display:       flex;
    align-items:   center;
    justify-content: center;
    transition:    background var(--trans);
    border:        none;
    cursor:        pointer;
}
.modal-close:hover { background: var(--accent); }

/* ══ MODAL DÉTAIL ═══════════════════════════════════════════════════════════ */
.detail {
    display:    flex;
    gap:        2rem;
    padding:    1.5rem;
    min-height: 300px;
    border-radius: var(--radius);
}
.detail-poster {
    flex-shrink: 0;
    width:       200px;
}
.detail-poster img {
    width:         100%;
    border-radius: var(--radius);
    box-shadow:    var(--shadow);
}
.no-poster {
    width:         200px;
    aspect-ratio:  2/3;
    background:    var(--bg3);
    border-radius: var(--radius);
    display:       flex;
    align-items:   center;
    justify-content: center;
    color:         var(--muted);
    font-size:     .85rem;
}

.detail-info {
    flex: 1;
    min-width: 0;
    display:   flex;
    flex-direction: column;
    gap:       .6rem;
}
.detail-info h2 {
    font-size:   1.6rem;
    font-weight: 800;
    line-height: 1.2;
}
.detail-date {
    font-size:   .85rem;
    color:       var(--muted);
    display:     flex;
    align-items: center;
    gap:         .35rem;
}
.detail-date i { color: var(--accent); }

.genres {
    display:  flex;
    gap:      .4rem;
    flex-wrap:wrap;
}
.tag {
    font-size:     .72rem;
    font-weight:   700;
    padding:       .2rem .55rem;
    border-radius: 20px;
    background:    var(--bg4);
    color:         var(--mickael);
    border:        1px solid rgba(74,158,255,.2);
}

.tmdb-note {
    font-size:   .88rem;
    font-weight: 700;
    color:       var(--accent2);
    display:     flex;
    align-items: center;
    gap:         .35rem;
}

.overview {
    font-size:   .88rem;
    line-height: 1.65;
    color:       rgba(232,232,240,.85);
    max-height:  180px;
    overflow-y:  auto;
}

.detail-meta {
    font-size: .82rem;
    color:     var(--muted);
}
.detail-meta strong { color: var(--text); }

.trailer-wrap {
    position:       relative;
    padding-bottom: 56.25%;
    height:         0;
    overflow:       hidden;
    border-radius:  var(--radius-sm);
    margin-top:     .25rem;
}
.trailer-wrap iframe {
    position: absolute;
    inset:    0;
    width:    100%;
    height:   100%;
    border:   none;
}

.detail-actions {
    display:  flex;
    gap:      .6rem;
    flex-wrap:wrap;
    margin-top: auto;
    padding-top: .5rem;
}

.btn-primary, .btn-secondary, .btn-danger {
    display:       inline-flex;
    align-items:   center;
    gap:           .4rem;
    padding:       .55rem 1.1rem;
    border-radius: var(--radius-sm);
    font-size:     .85rem;
    font-weight:   700;
    transition:    all var(--trans);
    border:        none;
    cursor:        pointer;
}
.btn-primary   { background: var(--accent);  color: #fff; }
.btn-secondary { background: var(--bg4);     color: var(--text); }
.btn-danger    { background: rgba(233,69,96,.15); color: var(--accent); border: 1px solid rgba(233,69,96,.3); }

.btn-primary:hover   { background: #c73652; }
.btn-secondary:hover { background: #1a4d80; }
.btn-danger:hover    { background: rgba(233,69,96,.3); }

.full-width { width: 100%; justify-content: center; }

/* ══ MODAL NOTE ═════════════════════════════════════════════════════════════ */
.modal-note-content {
    max-width: 520px;
    padding:   1.5rem;
}
.modal-note-content h2 {
    font-size:     1.1rem;
    font-weight:   800;
    margin-bottom: 1rem;
    display:       flex;
    align-items:   center;
    gap:           .5rem;
    color:         var(--accent2);
}

.note-titre-preview {
    font-size:     .95rem;
    font-weight:   700;
    text-align:    center;
    padding:       .5rem;
    background:    var(--bg3);
    border-radius: var(--radius-sm);
    margin-bottom: .75rem;
    color:         var(--text);
}

.note-person {
    border-radius: var(--radius-sm);
    padding:       .85rem 1rem;
    margin-bottom: .6rem;
    border:        1px solid var(--border);
}
.mickael-bg { background: rgba(74,158,255,.06); border-color: rgba(74,158,255,.2); }
.lucie-bg   { background: rgba(255,110,180,.06); border-color: rgba(255,110,180,.2); }

.person-label {
    display:       flex;
    align-items:   center;
    gap:           .4rem;
    font-size:     .82rem;
    font-weight:   700;
    margin-bottom: .5rem;
    color:         var(--text);
}
.mickael-bg .person-label i { color: var(--mickael); }
.lucie-bg   .person-label i { color: var(--lucie); }

.note-row {
    display: flex;
    gap:     .5rem;
    margin-bottom: .4rem;
}
.note-row input {
    flex:          1;
    padding:       .45rem .75rem;
    border-radius: var(--radius-sm);
    border:        1px solid var(--border);
    font-size:     .88rem;
    background:    var(--bg);
    color:         var(--text);
    outline:       none;
}
.note-row input:focus { border-color: var(--accent); }

.note-person textarea {
    width:         100%;
    padding:       .45rem .75rem;
    border-radius: var(--radius-sm);
    border:        1px solid var(--border);
    font-size:     .82rem;
    background:    var(--bg);
    color:         var(--text);
    resize:        vertical;
    outline:       none;
    display:       block;
}
.note-person textarea:focus { border-color: var(--accent); }

.note-meta {
    display:       flex;
    align-items:   center;
    gap:           1rem;
    flex-wrap:     wrap;
    padding:       .65rem 0;
    border-top:    1px solid var(--border);
    margin-bottom: .75rem;
}

.checkbox-label {
    display:     flex;
    align-items: center;
    gap:         .5rem;
    font-size:   .85rem;
    cursor:      pointer;
    user-select: none;
}
.checkbox-label input[type="checkbox"] {
    width:  16px;
    height: 16px;
    accent-color: var(--accent);
    cursor: pointer;
}

.date-field {
    display:    flex;
    flex-direction: column;
    gap:        .25rem;
    flex:       1;
    min-width:  140px;
}
.date-field label { font-size: .75rem; color: var(--muted); }
.date-field input[type="date"] {
    padding:       .38rem .65rem;
    border-radius: var(--radius-sm);
    border:        1px solid var(--border);
    font-size:     .85rem;
    background:    var(--bg3);
    color:         var(--text);
    outline:       none;
    width:         100%;
}
.date-field input[type="date"]:focus { border-color: var(--accent); }

/* ══ MODAL CONFIRM ══════════════════════════════════════════════════════════ */
.modal-confirm-content {
    max-width: 380px;
    padding:   1.75rem 1.5rem;
    text-align:center;
}
#confirm-text {
    font-size:     1rem;
    font-weight:   600;
    margin-bottom: 1.25rem;
    line-height:   1.5;
}
.confirm-actions {
    display:         flex;
    gap:             .75rem;
    justify-content: center;
}

/* ══ BOTTOM NAV ═════════════════════════════════════════════════════════════ */
.bottom-nav {
    display:          none;
    position:         fixed;
    bottom:           0;
    left:             0;
    right:            0;
    height:           calc(var(--bnav-h) + var(--safe-bottom));
    background:       rgba(13,13,26,.97);
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter:         blur(16px);
    border-top:       1px solid var(--border);
    z-index:          200;
    padding:          0 .25rem;
    padding-bottom:   var(--safe-bottom);
    align-items:      center;
    justify-content:  space-around;
}

.bnav-btn {
    display:        flex;
    flex-direction: column;
    align-items:    center;
    gap:            .2rem;
    padding:        .35rem .5rem;
    border-radius:  var(--radius-sm);
    font-size:      .62rem;
    font-weight:    600;
    color:          var(--muted);
    transition:     color var(--trans);
    position:       relative;
    background:     none;
    border:         none;
    cursor:         pointer;
    text-decoration:none;
    min-width:      48px;
    text-align:     center;
}
.bnav-btn i       { font-size: 1.15rem; }
.bnav-btn.active  { color: var(--accent); }
.bnav-btn:hover   { color: var(--text); }
.bnav-back        { color: var(--muted) !important; }
.bnav-back:hover  { color: var(--text) !important; }

.bnav-badge {
    position:      absolute;
    top:           .1rem;
    right:         .1rem;
    background:    var(--accent);
    color:         #fff;
    font-size:     .55rem;
    font-weight:   700;
    min-width:     16px;
    height:        16px;
    border-radius: 8px;
    display:       flex;
    align-items:   center;
    justify-content: center;
    padding:       0 .25rem;
}

/* ══ LOADER ═════════════════════════════════════════════════════════════════ */
.loader-overlay {
    position:        fixed;
    inset:           0;
    background:      rgba(13,13,26,.6);
    z-index:         500;
    display:         flex;
    align-items:     center;
    justify-content: center;
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter:         blur(4px);
}
.loader-spinner {
    width:        44px;
    height:       44px;
    border:       4px solid var(--border);
    border-top-color: var(--accent);
    border-radius:50%;
    animation:    spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ══ TOAST ══════════════════════════════════════════════════════════════════ */
.toast {
    position:      fixed;
    bottom:        calc(var(--bnav-h) + 1rem + var(--safe-bottom));
    left:          50%;
    transform:     translateX(-50%) translateY(12px);
    background:    var(--bg2);
    border:        1px solid var(--border);
    color:         var(--text);
    padding:       .6rem 1.25rem;
    border-radius: 20px;
    font-size:     .85rem;
    font-weight:   600;
    z-index:       600;
    opacity:       0;
    transition:    opacity .3s ease, transform .3s ease;
    white-space:   nowrap;
    pointer-events:none;
    box-shadow:    var(--shadow);
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.toast-success { border-color: rgba(39,174,96,.5);   color: #2ecc71; }
.toast-warn    { border-color: rgba(245,166,35,.5);  color: var(--accent2); }
.toast-info    { border-color: rgba(74,158,255,.4);  color: var(--mickael); }

/* ══ EMPTY ══════════════════════════════════════════════════════════════════ */
.empty {
    grid-column: 1 / -1;
    text-align:  center;
    color:       var(--muted);
    font-size:   .9rem;
    padding:     3rem 1rem;
    line-height: 1.8;
}

/* ══ RESPONSIVE ═════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
    .nav-links,
    .search-bar,
    .btn-back-app span { display: none; }
    .burger            { display: block; }
    .bottom-nav        { display: flex; }

    main { padding-top: 1rem; }

    .section h1 { font-size: 1.3rem; }

    .cards-grid {
        grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
        gap: .75rem;
    }

    .detail {
        flex-direction: column;
        align-items:    center;
        padding:        1rem;
        gap:            1rem;
    }
    .detail-poster { width: 140px; }
    .detail-info h2 { font-size: 1.25rem; text-align: center; }
    .detail-actions { justify-content: center; }

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

    .suivi-card {
        flex-direction: row;
        gap:            .75rem;
    }
    .suivi-poster {
        width:  56px;
        height: 84px;
    }

    .watchlist-toolbar {
        flex-direction: column;
        align-items:    flex-start;
    }
    .wl-sort-btn { margin-left: 0; }

    .modal-content { max-height: 95vh; }
    .modal-note-content { padding: 1rem; }
}

@media (max-width: 480px) {
    .cards-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: .6rem;
    }
    .card-title  { font-size: .78rem; }
    .card-date   { font-size: .65rem; }
    .plex-chip   { font-size: .68rem; padding: .28rem .55rem; }
    .btn-remove  { font-size: .65rem; }

    .pathe-card  { padding: 1rem; }
    .pathe-header h2 { font-size: .9rem; }
    .btn-pathe   { font-size: .75rem; padding: .45rem .6rem; }

    .suivi-poster {
        width:  48px;
        height: 72px;
    }
    .suivi-title { font-size: .88rem; }
}

/* ══ SEARCH MOBILE ══════════════════════════════════════════════════════════ */
.mobile-search {
    display:       flex;
    gap:           .5rem;
    padding:       .75rem 0;
    border-bottom: 1px solid var(--border);
    margin-bottom: .5rem;
}
.mobile-search input {
    flex:          1;
    padding:       .55rem .85rem;
    border-radius: var(--radius-sm);
    border:        1px solid var(--border);
    background:    var(--bg3);
    color:         var(--text);
    font-size:     1rem;
    outline:       none;
}
.mobile-search input:focus { border-color: var(--accent); }
.mobile-search button {
    display:       flex;
    align-items:   center;
    gap:           .4rem;
    padding:       .55rem 1rem;
    border-radius: var(--radius-sm);
    background:    var(--accent);
    color:         #fff;
    font-size:     .85rem;
    font-weight:   700;
    border:        none;
    cursor:        pointer;
    white-space:   nowrap;
    transition:    background var(--trans);
}
.mobile-search button:hover { background: #c73652; }
/* ══ BOUTON YGG ═════════════════════════════════════════════════════════════ */
.btn-ygg {
    display:         flex;
    align-items:     center;
    justify-content: center;
    gap:             .35rem;
    padding:         .32rem .75rem;
    border-radius:   var(--radius-sm);
    font-size:       .72rem;
    font-weight:     600;
    color:           var(--mickael);
    background:      rgba(74,158,255,.08);
    border:          1px solid rgba(74,158,255,.3);
    text-decoration: none;
    transition:      all var(--trans);
    width:           100%;
    margin-top:      .3rem;
}
.btn-ygg:hover {
    background:   rgba(74,158,255,.18);
    border-color: var(--mickael);
}
.btn-ygg i { font-size: .7rem; }