/* =====================================================================
   Twitch — feuille de style (2026)
   Ambiance : une chaîne de stream le soir, lumière chaude d'écran.
   Violet Twitch, ambre de lampe, corail néon, sur fond prune profond.
   ===================================================================== */

:root {
    /* Fonds prune (jamais de noir neutre : on reste chaleureux) */
    --night:     #1c1027;
    --night-2:   #251633;
    --night-3:   #321e45;
    --line:      rgba(255, 228, 200, .10);

    /* Textes crème */
    --text:      #fff3e6;
    --text-soft: #d9c4df;
    --text-mute: #a48cb4;

    /* Teintes d'accent (une par album) */
    --violet:    #9146ff;
    --ambre:     #ffb547;
    --corail:    #ff6b8b;
    --menthe:    #3fe0b0;

    --live:      #ff4a5f;

    --r-lg: 22px;
    --r-md: 14px;
    --r-sm: 10px;
    --ease: cubic-bezier(.22, 1, .36, 1);

    --font-display: "Unbounded", "Arial Black", system-ui, sans-serif;
    --font-body:    "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 96px; }

body {
    margin: 0;
    min-height: 100vh;
    font-family: var(--font-body);
    font-size: 1.0625rem;
    line-height: 1.55;
    color: var(--text);
    background: var(--night);
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

img { display: block; max-width: 100%; }
a { color: inherit; }
code {
    padding: .1em .4em;
    border-radius: 6px;
    background: var(--night-3);
    font-size: .92em;
}

:focus-visible {
    outline: 3px solid var(--ambre);
    outline-offset: 3px;
    border-radius: 6px;
}

/* ---------------------------------------------------------------------
   Lumière d'ambiance : trois halos fixes, comme une pièce éclairée
   par l'écran et une lampe.
   --------------------------------------------------------------------- */
.ambient {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
}
.ambient span {
    position: absolute;
    border-radius: 50%;
    filter: blur(90px);
    opacity: .55;
}
.ambient span:nth-child(1) {
    width: 62vmax; height: 62vmax;
    top: -30vmax; left: -18vmax;
    background: radial-gradient(circle, var(--violet), transparent 65%);
}
.ambient span:nth-child(2) {
    width: 48vmax; height: 48vmax;
    top: -14vmax; right: -20vmax;
    background: radial-gradient(circle, var(--ambre), transparent 62%);
    opacity: .38;
}
.ambient span:nth-child(3) {
    width: 50vmax; height: 50vmax;
    bottom: -32vmax; left: 30vw;
    background: radial-gradient(circle, var(--corail), transparent 62%);
    opacity: .22;
}

.topbar, .hero, .wrap, .footer { position: relative; z-index: 1; }

/* ---------------------------------------------------------------------
   Signature Twitch : la carte se soulève vers le haut-droite et laisse
   apparaître une ombre pleine dans la teinte de l'album.
   --------------------------------------------------------------------- */
.lift {
    --tint-shadow: var(--tint, var(--violet));
    transition: transform .22s var(--ease), box-shadow .22s var(--ease);
}
.lift:hover,
.lift:focus-visible {
    transform: translate(6px, -6px);
    box-shadow: -6px 6px 0 var(--tint-shadow);
}

/* =====================================================================
   Barre de chaîne
   ===================================================================== */
.topbar {
    position: sticky;
    top: 0;
    z-index: 40;
    display: flex;
    align-items: center;
    gap: 24px;
    padding: 14px clamp(16px, 4vw, 48px);
    padding-top: max(14px, env(safe-area-inset-top));
    transition: background .3s, border-color .3s;
    border-bottom: 1px solid transparent;
}
.topbar.is-scrolled {
    background: rgba(28, 16, 39, .82);
    backdrop-filter: blur(16px) saturate(1.4);
    -webkit-backdrop-filter: blur(16px) saturate(1.4);
    border-bottom-color: var(--line);
}

.channel {
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    flex-shrink: 0;
}
.channel__avatar {
    width: 44px; height: 44px;
    padding: 2px;
    border-radius: 50%;
    background: conic-gradient(from 200deg, var(--violet), var(--corail), var(--ambre), var(--violet));
}
.channel__avatar img {
    width: 100%; height: 100%;
    border-radius: 50%;
    background: var(--night);
    object-fit: cover;
}
.channel__name {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.05rem;
    letter-spacing: -.01em;
}

.topbar__nav {
    display: flex;
    gap: 6px;
    margin-left: auto;
    overflow-x: auto;
    scrollbar-width: none;
}
.topbar__nav::-webkit-scrollbar { display: none; }

.tab {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 14px;
    border-radius: 999px;
    font-weight: 600;
    font-size: .95rem;
    text-decoration: none;
    white-space: nowrap;
    color: var(--text-soft);
    transition: background .2s, color .2s;
}
.tab:hover { background: var(--night-3); color: var(--text); }
.tab.is-active { background: var(--tint); color: var(--night); }
.tab__count {
    min-width: 24px;
    padding: 1px 7px;
    border-radius: 999px;
    font-size: .78rem;
    text-align: center;
    background: color-mix(in srgb, var(--tint) 24%, transparent);
    color: var(--text);
}
.tab.is-active .tab__count { background: rgba(28, 16, 39, .2); color: var(--night); }

/* =====================================================================
   Héros
   ===================================================================== */
.hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
    align-items: center;
    gap: clamp(32px, 5vw, 72px);
    max-width: 1280px;
    margin: 0 auto;
    padding: clamp(40px, 7vw, 96px) clamp(16px, 4vw, 48px) clamp(48px, 7vw, 96px);
}

.live {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 22px;
    padding: 6px 12px 6px 10px;
    border-radius: var(--r-sm);
    background: var(--live);
    color: #fff;
    font-weight: 700;
    font-size: .9rem;
}
.live__dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: #fff;
    animation: pulse 1.8s ease-in-out infinite;
}
@keyframes pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%      { opacity: .35; transform: scale(.7); }
}

.hero__title {
    margin: 0;
    font-family: var(--font-display);
    font-weight: 800;
    font-size: clamp(2.8rem, 8vw, 6.5rem);
    line-height: .88;
    letter-spacing: -.055em;
    /* Le mot est éclairé comme par l'écran : violet en bas, ambre en haut */
    background: linear-gradient(170deg, var(--ambre) 0%, var(--corail) 42%, var(--violet) 88%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    filter: drop-shadow(0 18px 40px rgba(145, 70, 255, .35));
}
.hero__subtitle {
    margin: 26px 0 0;
    max-width: 30ch;
    font-size: clamp(1.15rem, 2vw, 1.4rem);
    font-weight: 500;
    line-height: 1.4;
    color: var(--text);
}
.hero__meta {
    margin: 12px 0 0;
    color: var(--text-mute);
    font-size: .98rem;
}

/* Les albums, présentés comme des jaquettes de catégories ------------- */
.boxarts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: clamp(14px, 2vw, 24px);
    margin: 0;
    padding: 0;
    list-style: none;
}
.boxart:nth-child(even) { transform: translateY(36px); }

.boxart__link {
    display: flex;
    flex-direction: column;
    height: 100%;
    border-radius: var(--r-lg);
    overflow: hidden;
    text-decoration: none;
    background: var(--night-2);
    border: 1px solid var(--line);
}
.boxart__plate {
    position: relative;
    display: grid;
    place-items: center;
    aspect-ratio: 3 / 4;
    padding: 18px;
    background:
        radial-gradient(circle at 50% 62%, color-mix(in srgb, var(--tint) 55%, transparent), transparent 68%),
        linear-gradient(180deg, var(--night-3), var(--night-2));
}
.boxart__plate img {
    position: absolute;
    inset: 18px;
    width: calc(100% - 36px);
    height: calc(100% - 36px);
    object-fit: contain;
    filter: drop-shadow(0 18px 28px rgba(10, 4, 16, .55));
    transition: transform .4s var(--ease);
}
.boxart__link:hover .boxart__plate img { transform: scale(1.05); }

.boxart__body {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 14px 18px 18px;
}
.boxart__name {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.3rem;
    letter-spacing: -.02em;
}
.boxart__count {
    color: var(--text-mute);
    font-size: .95rem;
}
.boxart__count::before {
    content: "";
    display: inline-block;
    width: 8px; height: 8px;
    margin-right: 8px;
    border-radius: 50%;
    background: var(--tint);
    vertical-align: 1px;
}

/* Une seule séquence d'arrivée, à l'ouverture de la page */
@media (prefers-reduced-motion: no-preference) {
    .hero__intro > * { animation: rise .8s var(--ease) both; }
    .hero__intro > :nth-child(2) { animation-delay: .06s; }
    .hero__intro > :nth-child(3) { animation-delay: .14s; }
    .hero__intro > :nth-child(4) { animation-delay: .2s; }
    .boxart { animation: rise .9s var(--ease) both; animation-delay: calc(.25s + var(--i, 0) * .1s); }
    .boxart:nth-child(2) { --i: 1; }
    .boxart:nth-child(3) { --i: 2; }
    .boxart:nth-child(4) { --i: 3; }
}
@keyframes rise {
    from { opacity: 0; translate: 0 24px; }
    to   { opacity: 1; translate: 0 0; }
}

/* =====================================================================
   Albums
   ===================================================================== */
.wrap {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 clamp(16px, 4vw, 48px) 40px;
}
.wrap--album { padding-top: clamp(24px, 4vw, 48px); }

.album {
    margin-top: clamp(40px, 6vw, 72px);
    padding: clamp(20px, 3vw, 36px);
    border-radius: 30px;
    background: linear-gradient(180deg, rgba(50, 30, 69, .62), rgba(37, 22, 51, .5));
    border: 1px solid var(--line);
    box-shadow: inset 0 1px 0 rgba(255, 228, 200, .06);
}
.album--full { margin-top: 0; }

.album__head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 6px 16px;
    margin-bottom: 24px;
}
.album__title {
    margin: 0;
    font-family: var(--font-display);
    font-weight: 800;
    font-size: clamp(1.8rem, 4vw, 2.6rem);
    letter-spacing: -.035em;
    line-height: 1;
}
.album__title::before {
    content: "";
    display: inline-block;
    width: .32em; height: .32em;
    margin-right: .35em;
    border-radius: 50%;
    background: var(--tint);
    box-shadow: 0 0 0 6px color-mix(in srgb, var(--tint) 22%, transparent);
    vertical-align: .18em;
}
.album__title--big { font-size: clamp(2.4rem, 7vw, 4.4rem); }
.album__count { color: var(--text-mute); }
.album__more {
    margin-left: auto;
    padding: 10px 18px;
    border-radius: 999px;
    font-weight: 600;
    text-decoration: none;
    background: var(--tint);
    color: var(--night);
    transition: filter .2s;
}
.album__more:hover { filter: brightness(1.1); }

.back {
    display: inline-block;
    margin-bottom: 18px;
    color: var(--text-soft);
    text-decoration: none;
    font-weight: 600;
}
.back:hover { color: var(--text); }

/* Grille d'images ----------------------------------------------------- */
.gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr));
    gap: clamp(14px, 2vw, 22px);
    margin: 0;
    padding: 0;
    list-style: none;
}

.card__btn {
    display: flex;
    flex-direction: column;
    width: 100%;
    padding: 0;
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    overflow: hidden;
    background: var(--night-2);
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: zoom-in;
}
.card__btn { text-decoration: none; }
a.card__btn { cursor: pointer; }
.card__plate {
    position: relative;
    display: grid;
    place-items: center;
    aspect-ratio: 1;
    padding: 14px;
    /* Plaque éclairée : les images détourées flottent dans la lumière */
    background:
        radial-gradient(circle at 50% 60%, color-mix(in srgb, var(--tint) 34%, transparent), transparent 70%),
        var(--night-3);
}
.card__plate img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: drop-shadow(0 12px 20px rgba(10, 4, 16, .5));
}
.card__name {
    padding: 11px 14px 13px;
    font-weight: 600;
    font-size: .96rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.empty {
    margin: 0;
    padding: 28px;
    border-radius: var(--r-md);
    border: 1px dashed rgba(255, 228, 200, .22);
    color: var(--text-soft);
    text-align: center;
}

/* Pagination ---------------------------------------------------------- */
.pager {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-top: 36px;
}
.pager__pages { display: flex; gap: 6px; }
.pager__num, .pager__edge {
    display: inline-grid;
    place-items: center;
    min-width: 42px;
    height: 42px;
    padding: 0 14px;
    border-radius: 999px;
    font-weight: 600;
    text-decoration: none;
    background: var(--night-3);
    color: var(--text-soft);
    transition: background .2s, color .2s;
}
.pager__num:hover, .pager__edge:hover { background: var(--violet); color: #fff; }
.pager__num.is-current { background: var(--tint); color: var(--night); }
.pager__gap { align-self: center; color: var(--text-mute); }
.is-disabled { opacity: .35; pointer-events: none; }

/* Badge sur les logos : ils ouvrent un set ------------------------------ */
.card__badge {
    position: absolute;
    right: 10px;
    bottom: 10px;
    padding: 5px 11px;
    border-radius: 999px;
    background: var(--tint, var(--violet));
    color: var(--night);
    font-size: .8rem;
    font-weight: 700;
    opacity: 0;
    translate: 0 6px;
    transition: opacity .2s, translate .2s var(--ease);
}
a.card__btn:hover .card__badge,
a.card__btn:focus-visible .card__badge { opacity: 1; translate: 0 0; }
@media (hover: none) {
    .card__badge { opacity: 1; translate: 0 0; }
}

/* =====================================================================
   Page d'un set : logo à gauche, images liées à droite
   ===================================================================== */
.setpage__head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 20px;
    margin-bottom: clamp(20px, 3vw, 32px);
}
.setpage__title {
    margin: 0;
    font-family: var(--font-display);
    font-weight: 800;
    font-size: clamp(1.9rem, 4.5vw, 3rem);
    letter-spacing: -.035em;
    line-height: 1.05;
}
.setpage__meta { margin: 0; color: var(--text-mute); }
.setpage__nav { display: flex; gap: 8px; margin-left: auto; }

.set {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.4fr);
    gap: clamp(16px, 2.4vw, 28px);
    align-items: start;
}
.set__linked {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
    gap: clamp(16px, 2.4vw, 28px);
}
.set__panel {
    min-width: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.set__label {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.05rem;
    letter-spacing: -.01em;
}
.set__label::before {
    content: "";
    width: 10px; height: 10px;
    border-radius: 50%;
    background: var(--tint);
    box-shadow: 0 0 0 5px color-mix(in srgb, var(--tint) 22%, transparent);
}
.set__btn { border-radius: var(--r-lg); }
.set__plate { padding: clamp(16px, 2.5vw, 28px); }
.set__panel--main .set__plate {
    background:
        radial-gradient(circle at 50% 58%, color-mix(in srgb, var(--tint) 45%, transparent), transparent 70%),
        var(--night-3);
}
.set__btn .card__name { color: var(--text-mute); font-weight: 500; font-size: .88rem; }

.set__missing {
    display: grid;
    place-content: center;
    gap: 6px;
    aspect-ratio: 1;
    padding: 20px;
    border-radius: var(--r-lg);
    border: 2px dashed color-mix(in srgb, var(--tint) 45%, transparent);
    background: color-mix(in srgb, var(--tint) 6%, transparent);
    color: var(--text-soft);
    text-align: center;
    font-size: .95rem;
}
.set__missing p { margin: 0; }
.set__missing code { word-break: break-all; }

/* Bandeau de tous les logos ------------------------------------------- */
.strip { margin-top: clamp(36px, 5vw, 56px); }
.strip__title {
    margin: 0 0 14px;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.05rem;
    color: var(--text-soft);
}
.strip__list {
    display: flex;
    gap: 12px;
    margin: 0;
    padding: 4px 4px 12px;
    list-style: none;
    overflow-x: auto;
}
.strip__item {
    display: grid;
    place-items: center;
    width: 92px;
    height: 92px;
    padding: 8px;
    border-radius: var(--r-md);
    background: var(--night-3);
    border: 2px solid transparent;
    opacity: .6;
    transition: opacity .2s, border-color .2s;
}
.strip__item:hover { opacity: 1; }
.strip__item.is-current { opacity: 1; border-color: var(--violet); }
.strip__item img { width: 100%; height: 100%; object-fit: contain; }

@media (max-width: 860px) {
    .set { grid-template-columns: 1fr; }
    .set__linked { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .setpage__nav { margin-left: 0; }
}

/* =====================================================================
   Pied de page
   ===================================================================== */
.footer {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 48px 20px calc(48px + env(safe-area-inset-bottom));
    color: var(--text-mute);
    font-size: .95rem;
    text-align: center;
}
.footer p { margin: 0; }
.footer img { border-radius: 50%; }
.heart { color: var(--corail); }

/* =====================================================================
   Visionneuse
   ===================================================================== */
.lightbox {
    position: fixed;
    inset: 0;
    z-index: 100;
    display: grid;
    place-items: center;
    padding: 24px;
    background:
        radial-gradient(circle at 50% 55%, rgba(145, 70, 255, .28), transparent 60%),
        rgba(20, 10, 28, .94);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    opacity: 0;
    visibility: hidden;
    transition: opacity .25s, visibility .25s;
}
.lightbox.is-open { opacity: 1; visibility: visible; }
.lb-lock { overflow: hidden; }

.lb__stage {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    width: 100%;
    height: 100%;
    margin: 0;
    justify-content: center;
}
.lb__img {
    max-width: min(1100px, 100%);
    max-height: calc(100vh - 140px);
    object-fit: contain;
    filter: drop-shadow(0 30px 60px rgba(0, 0, 0, .5));
    transition: opacity .16s, transform .16s;
}
.lb__img.is-swapping { opacity: 0; transform: scale(.97); }

.lb__caption {
    display: flex;
    gap: 14px;
    align-items: center;
    font-weight: 600;
}
.lb__counter {
    padding: 3px 10px;
    border-radius: 999px;
    background: var(--night-3);
    color: var(--text-soft);
    font-size: .88rem;
}

.lb__btn {
    position: absolute;
    z-index: 2;
    display: grid;
    place-items: center;
    width: 52px; height: 52px;
    border: 0;
    border-radius: 50%;
    background: rgba(50, 30, 69, .85);
    color: var(--text);
    font-size: 1.3rem;
    cursor: pointer;
    transition: background .2s;
}
.lb__btn:hover { background: var(--violet); }
.lb__close { top: 18px; right: 18px; font-size: 1.9rem; }
.lb__prev { left: 18px; top: 50%; translate: 0 -50%; }
.lb__next { right: 18px; top: 50%; translate: 0 -50%; }
.is-single .lb__nav, .is-single .lb__counter { display: none; }

/* =====================================================================
   Responsive & mouvement
   ===================================================================== */
@media (max-width: 860px) {
    .hero { grid-template-columns: 1fr; }
    .boxart:nth-child(even) { transform: none; }
}
@media (max-width: 560px) {
    .channel__name { display: none; }
    .boxarts { grid-template-columns: 1fr 1fr; }
    .boxart:nth-child(3):last-child { grid-column: 1 / -1; }
    .boxart:nth-child(3):last-child .boxart__plate { aspect-ratio: 2 / 1; }
    .boxart__plate { aspect-ratio: 1; }
    .album__more { margin-left: 0; }
    .lb__nav { top: auto; bottom: 18px; translate: none; }
    .lb__img { max-height: calc(100vh - 200px); }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation: none !important;
        transition: none !important;
    }
}

@media (max-width: 560px) {
    .gallery:not(.set) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}