/* ==========================================================================
   Bobyne — feuille de style de l'application.

   Ordre de chargement : polices auto-hébergées (Roboto, @font-face), puis le
   design system (tokens avant composants). Les fichiers du design system sont
   copiés depuis doc/design-system/ ; ils sont la source unique du visuel et ne
   doivent contenir aucune valeur en dur hors de tokens.css.
   ========================================================================== */
@import url("fonts-F1i3jR0.css");
@import url("design-system/tokens-euxncYW.css");
@import url("design-system/components-apWlpqF.css");

/* ---- Compléments propres à l'intégration Symfony (pas des tokens) ---- */

/* Lien d'évitement pour l'accessibilité clavier. */
.skip-link {
    position: absolute;
    left: var(--space-2);
    top: -48px;
    z-index: 30;
    padding: var(--space-2) var(--space-4);
    border-radius: var(--radius-sm);
    background: var(--color-ink);
    color: var(--color-pop);
    font-weight: var(--weight-bold);
    transition: top var(--duration);
}
.skip-link:focus { top: var(--space-2); }

/* Repli image manquante pour une affiche/vignette (fond teinté neutre). */
.poster--empty,
.thumb--empty { background: var(--color-surface-2); }

/* ---- Heatmap : lisibilité (libellés de saison, épisodes non notés) ---- */

/* Épisode non noté : case neutre, pour garder la grille contiguë. */
.cell--empty { background: var(--color-surface-2); }

/* Version agrandie (fiche série) : une ligne par saison, avec son libellé. */
.heatmap--labeled { gap: var(--space-2); }
.heatmap-season-row {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
}
.heatmap-season {
    flex: none;
    width: 76px;
    padding-top: 3px;
    font-size: var(--text-sm);
    font-weight: var(--weight-bold);
    color: var(--color-muted);
}

/* Numéro d'épisode dans les grandes cases ; lisible sur toutes les couleurs. */
.heatmap--labeled .cell-lg {
    display: grid;
    place-items: center;
    font-size: 11px;
    font-weight: var(--weight-bold);
    color: #fff;
    text-shadow: 0 1px 1px rgba(0, 0, 0, .45);
}
.heatmap--labeled .cell-lg.cell--empty {
    color: var(--color-muted);
    text-shadow: none;
}

@media (max-width: 599px) {
    .heatmap-season-row { flex-direction: column; gap: var(--space-1); }
    .heatmap-season { padding-top: 0; }
}

/* Grille statique (pages liste) : mêmes cartes que les rangées, sans scroll.
   S'étire pour remplir les grands écrans (4K) en gardant des cartes lisibles. */
.grid-posters {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 18px var(--space-4);
}

/* Bouton « Charger plus » (formulaire) centré sous la grille. */
.load-more-wrap {
    display: flex;
    justify-content: center;
    margin-top: var(--space-8);
    min-height: 46px; /* réserve la place même quand le bouton disparaît */
}
.load-more-form { margin: 0; }

/* Grille de franchises : cartes 16:9, plus larges. */
.grid-franchises { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }

/* ---- Galerie d'images + lightbox ---- */
.gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: var(--space-3);
}
.gallery-thumb {
    padding: 0;
    border: 0;
    cursor: zoom-in;
    overflow: hidden;
    border-radius: var(--radius-md);
    aspect-ratio: var(--ratio-backdrop);
    background: var(--color-surface);
    box-shadow: var(--shadow-1);
    transition: translate var(--duration), box-shadow var(--duration);
}
.gallery-thumb img { width: 100%; height: 100%; object-fit: cover; }
.gallery-thumb:hover { translate: 0 var(--lift); box-shadow: var(--shadow-2); }

.lightbox {
    position: fixed;
    inset: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-6);
    background: rgba(10, 11, 18, .92);
}
.lightbox[hidden] { display: none; }
.lightbox-image {
    max-width: min(1200px, 94vw);
    max-height: 88vh;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-2);
}
.lightbox-btn {
    position: absolute;
    display: grid;
    place-items: center;
    border: 0;
    cursor: pointer;
    color: var(--color-ink);
    background: var(--color-pop);
    border-radius: var(--radius-sm);
    transition: background var(--duration), color var(--duration);
}
.lightbox-btn:hover { background: #fff; }
.lightbox-close { top: var(--space-4); right: var(--space-4); width: 40px; height: 40px; font-size: 24px; }
.lightbox-prev, .lightbox-next { top: 50%; translate: 0 -50%; width: 48px; height: 64px; font-size: 32px; }
.lightbox-prev { left: var(--space-4); }
.lightbox-next { right: var(--space-4); }

@media (max-width: 599px) {
    .gallery-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
}

/* ---- Navigation mobile : barre d'onglets fixée en bas (style application) ----
   Remplace, sous 900 px, la barre latérale/horizontale du design system par une
   tab bar ancrée en bas de l'écran, façon application mobile. */
@media (max-width: 899px) {
    .sidebar {
        position: fixed;
        inset: auto 0 0 0;            /* collée en bas, pleine largeur */
        top: auto;
        z-index: 20;
        height: auto;
        padding: 0;
        overflow: visible;
        background: var(--color-bg);
        border: 0;
        border-top: 1px solid var(--color-line);
        box-shadow: var(--shadow-1);
        padding-bottom: env(safe-area-inset-bottom, 0px); /* encoche iPhone */
    }
    .sidebar .nav {
        display: flex;
        gap: 0;
    }
    .sidebar .nav a {
        flex: 1 1 0;
        min-width: 0;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 3px;
        margin: 0;
        padding: 8px 2px 7px;
        border-radius: 0;
        font-size: 10px;
        font-weight: var(--weight-medium);
        color: var(--color-muted);
    }
    .sidebar .nav a:hover { background: transparent; }
    .sidebar .nav a svg { width: 23px; height: 23px; }
    .sidebar .nav .nav-label {
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    /* Onglet actif : libellé marqué + liseré jaune en haut de l'onglet. */
    .sidebar .nav a[aria-current="page"] {
        background: transparent;
        color: var(--color-text);
        font-weight: var(--weight-bold);
        box-shadow: inset 0 2px 0 var(--color-pop);
    }
    /* Laisser respirer le contenu au-dessus de la barre du bas. */
    .main { padding-bottom: calc(68px + env(safe-area-inset-bottom, 0px)); }
    .footer { margin-bottom: calc(68px + env(safe-area-inset-bottom, 0px)); }
}

/* ---- Listing des épisodes (fiche série) ---- */
.episode-seasons { overflow-x: auto; max-width: 100%; scrollbar-width: none; }
.episode-seasons::-webkit-scrollbar { display: none; }
.episode-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); }
.episode-row {
    display: grid;
    grid-template-columns: 170px 1fr;
    gap: var(--space-4);
    padding: var(--space-2);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    transition: background var(--duration);
}
.episode-row:hover { background: var(--color-surface-2); }
.episode-still {
    position: relative;
    aspect-ratio: var(--ratio-backdrop);
    border-radius: var(--radius-sm);
    background-color: var(--color-surface-2);
    background-size: cover;
    background-position: center;
}
.episode-note {
    position: absolute;
    left: 6px;
    top: 6px;
    padding: 1px 7px;
    border-radius: var(--radius-sm);
    font-size: var(--text-xs);
    font-weight: var(--weight-bold);
    color: #fff;
}
.episode-body strong { display: block; font-weight: var(--weight-bold); line-height: 1.3; }
.episode-overview { margin: 6px 0 0; font-size: var(--text-sm); color: var(--color-muted); }
@media (max-width: 599px) { .episode-row { grid-template-columns: 110px 1fr; } }

/* ---- Casting et équipe (page crédits complets) ---- */
.crew-list {
    list-style: none;
    margin: 0;
    padding: 0;
    columns: 3 220px;
    column-gap: var(--space-8);
}
.crew-list li {
    break-inside: avoid;
    margin-bottom: var(--space-3);
}
.crew-list li a { display: inline; }
.crew-list .text-muted { display: block; font-size: var(--text-sm); }

/* Repli e-mail sans JS : affiché à l'endroit, inversé dans la source. */
.email-rev { unicode-bidi: bidi-override; direction: rtl; }

/* Signature du footer : « Créé à Lyon avec ❤️ », sur la ligne en dessous. */
.footer-love { display: block; margin-top: var(--space-1); white-space: nowrap; }
.footer-heart {
    font-size: 1.3em;
    vertical-align: -0.12em;
}

/* ---- Partage ---- */
.share {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-top: var(--space-5);
}
.share-label { margin-right: var(--space-1); }
.detail-hero .share-label { color: var(--color-on-image-muted); }

/* Carte de genre : affiche du film le plus populaire + nom en incrustation. */
.genre-card { display: block; }
.genre-card .poster {
    align-items: flex-end;
    box-shadow: var(--shadow-1);
    transition: translate var(--duration), box-shadow var(--duration);
}
.genre-card .poster::after {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--overlay-image);
}
.genre-card:hover .poster { box-shadow: var(--shadow-2); translate: 0 var(--lift); }
.genre-card-label {
    position: relative;
    z-index: 1;
    font: var(--weight-bold) var(--text-xl)/1.05 var(--font-title);
    letter-spacing: var(--tracking-title);
}

/* Fiche œuvre : en-tête sur backdrop. */
.detail-hero {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    border-radius: var(--radius-lg);
    padding: clamp(20px, 4vw, 40px);
    color: var(--color-on-image);
    background: var(--detail-backdrop, var(--color-ink)) center / cover no-repeat;
}
.detail-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: var(--overlay-hero);
}
.detail-grid {
    display: grid;
    grid-template-columns: 220px minmax(0, 1fr);
    gap: var(--space-8);
    align-items: start;
}
.detail-grid .poster { max-width: 220px; }
.detail-meta { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: var(--space-3) 0; }
.detail-overview { max-width: 70ch; }
.chips-row { display: flex; flex-wrap: wrap; gap: var(--space-2); }

@media (max-width: 599px) {
    .detail-grid { grid-template-columns: 1fr; }
    .detail-grid .poster { max-width: 160px; }
}