/* ===================== NAVBAR ===================== */

      .navbar {
        position: sticky;
        top: 0;
        z-index: 40;
        backdrop-filter: blur(14px);
        background: rgba(5, 8, 22, 0.96);
        border-bottom: 1px solid rgba(255, 255, 255, 0.06);
      }

      .navbar-inner {
        width: 100%;
        margin: 0;
        padding: 10px 24px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 16px;
      }

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

      .brand-logo {
        width: 26px;
        height: 26px;
        border-radius: 8px;
        background: radial-gradient(circle at 30% 0%, #ffb347, #ff6b35);
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: 800;
        font-size: 0.85rem;
        color: #050816;
      }

      .brand-text {
        display: flex;
        flex-direction: column;
      }

      .brand-name {
        font-weight: 600;
        font-size: 1rem;
        letter-spacing: -0.03em;
      }

      .brand-sub {
        font-size: 0.7rem;
        color: var(--text-muted);
      }

      .nav-links {
        display: flex;
        gap: 12px;
        align-items: center;
        flex-wrap: wrap;
        flex: 1;
        justify-content: center;
      }
      .nav-balance { width: 170px; flex: 0 0 170px; }

      .nav-link {
        font-size: 0.85rem;
        color: var(--text-muted);
        text-decoration: none;
        padding: 6px 10px;
        border-radius: 999px;
        border: 1px solid transparent;
        cursor: pointer;
        display: inline-flex;
        align-items: center;
        justify-content: center;
      }

      .nav-link:hover {
        color: var(--text);
        border-color: rgba(255, 255, 255, 0.12);
        background: rgba(255, 255, 255, 0.02);
      }

      .nav-link.primary {
        border-color: rgba(255, 107, 53, 0.8);
        color: #fff;
        background: linear-gradient(135deg, #ff7b3a, #ff4b5c);
      }

      .nav-link.primary:hover {
        filter: brightness(1.05);
      }

      .nav-link.danger {
        border-color: rgba(255, 75, 92, 0.55);
        color: #fff;
        background: rgba(255, 75, 92, 0.12);
      }

      /* Bloc de recherche dans la navbar */
      .nav-search {
        display: flex;
        align-items: center;
        gap: 4px;
        padding: 4px 8px;
        border-radius: 999px;
        background: rgba(6, 11, 27, 0.85);
        border: 1px solid rgba(255, 255, 255, 0.12);
      }

      .nav-search input {
        border: none;
        outline: none;
        background: transparent;
        color: var(--text);
        font-size: 0.85rem;
        width: 170px;
      }

      .nav-search input::placeholder {
        color: #6b7390;
      }

      .nav-search button {
        border: none;
        background: transparent;
        color: var(--text-muted);
        cursor: pointer;
        font-size: 1rem;
        padding: 4px 6px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
      }

      .nav-search button:hover {
        color: #ffffff;
      }

      @media (max-width: 600px) {
        .navbar-inner {
          flex-wrap: wrap;
          gap: 10px;
        }

        .nav-search input {
          width: 140px;
        }

        :root {
          --card-width: 190px;
          --card-width-hover: 190px;
        }
      }

      /* ===================== CARTES FILM ===================== */

      .movie-card,
      .reco-card {
        position: relative;
        overflow: visible;
        display: flex;
        flex-direction: column;
        align-items: stretch;
        width: var(--card-width);
        min-width: var(--card-width);
        flex: 0 0 var(--card-width);
        padding: 8px 8px 10px;
        border-radius: 12px;
        border: 1px solid rgba(255, 255, 255, 0.06);
        background: radial-gradient(circle at top left, #151c3c 0, #060a18 52%);
        box-shadow: 0 10px 24px rgba(0, 0, 0, 0.4);
        text-align: left;
        transition:
          box-shadow 0.18s ease-out,
          transform 0.18s ease-out;
        transform-origin: bottom center;
        will-change: transform;
      }

      .movie-card:hover,
      .movie-card:focus-within,
      .reco-card:hover,
      .reco-card:focus-within {
        box-shadow: 0 26px 60px rgba(0, 0, 0, 0.95);
        z-index: 140;
        transform: translateY(-12px) scale(1.14);
      }

      .movie-poster,
      .reco-poster-wrap {
        position: relative;
        width: 100%;
        height: var(--poster-height);
        border-radius: 10px;
        overflow: hidden;
        background: #151a2c;
        flex-shrink: 0;
      }

      .movie-poster img,
      .reco-poster-wrap img,
      .movie-poster iframe,
      .reco-poster-wrap iframe,
      .movie-poster video,
      .reco-poster-wrap video {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
        border: 0;
      }

      .movie-info {
        position: absolute;
        left: 0;
        width: 100%;
        margin-left: 0;
        top: calc(8px + var(--poster-height) - 1px);
        padding: 11px 10px 12px;
        border-radius: 0 0 12px 12px;
        border: 1px solid var(--hover-panel-border);
        border-top: none;
        background: var(--bg);
        box-shadow:
          0 18px 36px rgba(0, 0, 0, 0.72),
          inset 0 1px 0 rgba(255, 255, 255, 0.06);
        color: #f5f7ff;
        opacity: 0;
        transform: translateY(-5px) scale(0.985);
        transition:
          opacity 0.2s ease-out,
          transform 0.2s ease-out;
        pointer-events: none;
        z-index: 90;
        overflow: hidden;
        box-sizing: border-box;
      }

      .movie-info::before {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        top: -14px;
        height: 14px;
        background: linear-gradient(to bottom, rgba(5, 8, 22, 0), var(--bg));
        pointer-events: none;
      }

      .movie-card:hover .movie-info,
      .movie-card:focus-within .movie-info,
      .reco-card:hover .movie-info,
      .reco-card:focus-within .movie-info {
        opacity: 1;
        transform: translateY(0) scale(1);
      }

      .movie-info-title {
        font-size: 0.8rem;
        color: #ffffff;
        font-weight: 600;
        line-height: 1.25;
        margin-bottom: 4px;
      }

      .movie-info-line {
        font-size: 0.76rem;
        color: #9aa3bd;
        line-height: 1.25;
        margin-bottom: 4px;
      }

      .movie-info-line:last-child {
        margin-bottom: 0;
      }

      .movie-info-cast {
        font-size: 0.66rem;
        color: #b8c6ea;
        line-height: 1.3;
        margin-top: 3px;
        display: -webkit-box;
        line-clamp: 1;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
        overflow: hidden;
      }

      .movie-info-meta {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        margin-bottom: 5px;
      }

      .movie-info-pill {
        font-size: 0.64rem;
        line-height: 1.2;
        color: #8f98b3;
        background: transparent;
        border: none;
        border-radius: 0;
        padding: 0;
        white-space: nowrap;
        flex: 0 0 auto;
      }

      .movie-info-synopsis {
        font-size: 0.7rem;
        color: #cbd7f7;
        line-height: 1.32;
        margin-top: 4px;
        display: -webkit-box;
        line-clamp: 3;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
      }

      .movie-content,
      .reco-content {
        display: none;
      }

      .movie-bottom,
      .reco-bottom {
        display: none !important;
      }

      /* ===================== CARROUSEL ===================== */

      .carousel-wrapper {
        position: relative;
        width: 100%;
        overflow: visible;
        padding: 20px 0;
      }

      .carousel-track {
        display: flex;
        gap: 16px;
        padding: 6px 40px 42px;
        overflow-x: auto;
        overflow-y: visible;
        scroll-behavior: smooth;
        scrollbar-width: none;
        -ms-overflow-style: none;
      }

      .carousel-track::-webkit-scrollbar {
        display: none;
      }

      .carousel-btn {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        z-index: 50;
        width: 50px;
        height: 80px;
        border: none;
        background: rgba(0, 0, 0, 0.35);
        backdrop-filter: blur(4px);
        color: white;
        font-size: 2.4rem;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        opacity: 0;
        transition: opacity 0.25s;
      }

      .carousel-btn.left {
        left: 0;
      }

      .carousel-btn.right {
        right: 0;
      }

      .carousel-wrapper:hover .carousel-btn {
        opacity: 1;
      }

      .carousel-wrapper::before,
      .carousel-wrapper::after {
        content: "";
        position: absolute;
        top: 0;
        width: 60px;
        height: 100%;
        z-index: 40;
        pointer-events: none;
      }

      .carousel-wrapper::before {
        left: 0;
        background: linear-gradient(to right, rgba(5, 8, 22, 0.9), transparent);
      }

      .carousel-wrapper::after {
        right: 0;
        background: linear-gradient(to left, rgba(5, 8, 22, 0.9), transparent);
      }

      .genre-section {
        margin-bottom: 18px;
      }

      .genre-section-hidden {
        display: none;
      }

      .show-more-genres-btn {
        margin-top: 8px;
        align-self: center;
      }

      /* ===================== PANNEAU GLOBAL SOUS LES CARTES ===================== */

      #moviePanel {
        position: fixed;
        inset: 0;
        z-index: 9999;
        display: none;
        align-items: flex-end;
        justify-content: center;
        pointer-events: auto;
        background:
          radial-gradient(
            1200px 520px at 50% 100%,
            rgba(45, 95, 200, 0.12),
            rgba(2, 6, 18, 0)
          ),
          rgba(2, 6, 18, 0.72);
        backdrop-filter: blur(6px);
        padding: 26px 14px 0;
      }

      #moviePanel-inner {
        width: min(900px, 88vw);
        max-height: calc(100vh - 26px);
        margin-top: 0;
        border-radius: 18px;
        background: rgba(5, 8, 22, 0.98);
        border: 1px solid rgba(255, 255, 255, 0.18);
        box-shadow:
          0 30px 90px rgba(0, 0, 0, 0.72),
          0 0 0 1px rgba(124, 171, 255, 0.14) inset,
          0 0 80px rgba(68, 132, 255, 0.14);
        backdrop-filter: blur(14px);
        color: var(--text-muted);
        font-size: 0.8rem;
        overflow: auto;
        display: flex;
        flex-direction: column;
        transform: translateY(-20px) scale(0.985);
        animation: moviePanelFloatIn 0.2s ease-out forwards;
      }

      #moviePanel-close {
        position: absolute;
        top: 16px;
        right: 16px;
        z-index: 4;
        width: 42px;
        height: 42px;
        border: 1px solid rgba(255, 255, 255, 0.2);
        border-radius: 999px;
        background: rgba(5, 8, 22, 0.76);
        color: #fff;
        font-size: 1.35rem;
        line-height: 1;
        cursor: pointer;
        backdrop-filter: blur(12px);
        box-shadow: 0 10px 28px rgba(0, 0, 0, 0.35);
        transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
      }

      #moviePanel-close:hover,
      #moviePanel-close:focus-visible {
        transform: translateY(-1px);
        border-color: rgba(255, 106, 42, 0.65);
        box-shadow: 0 0 24px rgba(255, 106, 42, 0.22);
        outline: none;
      }

      @keyframes moviePanelFloatIn {
        from {
          opacity: 0;
          transform: translateY(10px) scale(0.975);
        }
        to {
          opacity: 1;
          transform: translateY(-20px) scale(1);
        }
      }

      .moviePanel-top {
        border-radius: 18px 18px 0 0;
        flex: 0 0 auto;
      }

      #moviePanel-trailer {
        position: relative;
        width: 100%;
        aspect-ratio: 16 / 9;
        height: clamp(240px, 50vh, 560px);
        max-height: 60vh;
        border-radius: 0;
        overflow: hidden;
        background: #000;
        display: none;
      }

      #moviePanel-trailer iframe,
      #moviePanel-trailer video {
        width: 100%;
        height: 100%;
        display: block;
        border: 0;
        object-fit: cover;
      }

      #moviePanel-poster {
        width: 100%;
        aspect-ratio: 16 / 9;
        height: clamp(240px, 50vh, 560px);
        max-height: 60vh;
        overflow: hidden;
        background: #000;
        position: relative;
        display: none;
      }

      #moviePanel-poster img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
        transform: scale(1);
        transition: transform 1s ease-out;
      }

      #moviePanel-poster img.zooming {
        transform: scale(1.06);
      }

      .moviePanel-bottom {
        padding: 14px 18px 16px;
        flex: 0 0 auto;
        min-height: 0;
        display: flex;
        flex-direction: column;
      }

      #moviePanel-title {
        font-size: 1rem;
        font-weight: 600;
        color: var(--text);
        margin-bottom: 2px;
      }

      #moviePanel-meta {
        font-size: 0.78rem;
        color: var(--text-muted);
        margin-bottom: 6px;
      }

      #moviePanel-desc {
        font-size: 0.8rem;
        line-height: 1.5;
        margin-bottom: 10px;
        padding-right: 0;
        white-space: pre-wrap;
        overflow: visible;
      }

      .moviePanel-tabs {
        display: flex;
        gap: 8px;
        margin: 4px 0 8px;
      }

      .moviePanel-tab-btn {
        border: 1px solid rgba(255, 255, 255, 0.2);
        background: rgba(255, 255, 255, 0.06);
        color: #d9e2ff;
        border-radius: 8px;
        padding: 6px 10px;
        font-size: 0.76rem;
        cursor: pointer;
      }

      .moviePanel-tab-btn.active {
        border-color: rgba(255, 255, 255, 0.44);
        background: rgba(255, 255, 255, 0.16);
        color: #fff;
      }

      .moviePanel-tab-content[hidden] {
        display: none !important;
      }

      .moviePanel-footer {
        margin-top: 8px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
      }

      .streaming-pref-modal {
        position: fixed;
        inset: 0;
        z-index: 10050;
        display: none;
        align-items: center;
        justify-content: center;
        padding: 16px;
        background: rgba(2, 6, 18, 0.74);
        backdrop-filter: blur(6px);
      }

      .streaming-pref-card {
        width: min(720px, 96vw);
        max-height: 90vh;
        overflow: auto;
        border-radius: 14px;
        border: 1px solid rgba(255, 255, 255, 0.14);
        background: rgba(7, 10, 24, 0.98);
        box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55);
        padding: 16px;
      }

      .streaming-pref-title {
        font-size: 1.05rem;
        font-weight: 700;
        margin-bottom: 6px;
      }

      .streaming-pref-sub {
        color: #a8b2cf;
        font-size: 0.84rem;
        margin-bottom: 12px;
      }

      .streaming-pref-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
      }

      .streaming-pref-option {
        border-radius: 12px;
        border: 1px solid rgba(255, 255, 255, 0.12);
        background: rgba(255, 255, 255, 0.04);
        color: #e7edff;
        padding: 10px;
        display: flex;
        align-items: center;
        gap: 10px;
        cursor: pointer;
      }

      .streaming-pref-option input {
        accent-color: #ff5a3d;
      }

      .provider-section {
        margin-top: 10px;
        border-top: 1px solid rgba(255, 255, 255, 0.08);
        padding-top: 10px;
      }

      .provider-section-title {
        font-size: 0.76rem;
        color: #9fa9ca;
      }

      .provider-user-list,
      .provider-availability-list {
        display: flex;
        flex-wrap: wrap;
        gap: 7px;
        margin-top: 6px;
      }

      .provider-badge {
        display: inline-flex;
        text-decoration: none;
        cursor: pointer;
        align-items: center;
        justify-content: flex-start;
        width: 38px;
        height: 38px;
        padding: 6px;
        border-radius: 999px;
        border: 1px solid rgba(255, 255, 255, 0.22);
        background: rgba(255, 255, 255, 0.05);
        color: #f3f6ff;
        position: relative;
        overflow: hidden;
        white-space: nowrap;
        transition: width 0.2s ease, background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, padding-right 0.2s ease;
      }
      .provider-badge:hover,
      .provider-badge:focus-visible,
      .provider-badge:focus-within,
      .provider-badge.expanded {
        width: 220px;
        padding-right: 10px;
        background: rgba(255, 255, 255, 0.1);
        border-color: rgba(255, 255, 255, 0.38);
      }
      .provider-badge.with-label {
        width: auto;
        min-height: 34px;
        height: auto;
        padding: 5px 9px;
        justify-content: flex-start;
        gap: 6px;
        overflow: visible;
        transition: none;
      }
      .provider-badge.with-label:hover,
      .provider-badge.with-label:focus-visible,
      .provider-badge.with-label:focus-within {
        width: auto;
      }
      .provider-icon {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 18px;
        height: 18px;
        border-radius: 999px;
        font-size: 0.62rem;
        font-weight: 700;
        color: #fff;
      }
      .provider-logo {
        width: 24px;
        height: 24px;
        object-fit: contain;
        border-radius: 6px;
        background: #fff;
        padding: 2px;
        box-sizing: border-box;
        display: inline-block;
      }
      .provider-hover-text {
        position: absolute;
        left: 40px;
        right: 10px;
        top: 50%;
        transform: translateY(-50%) translateX(-6px);
        opacity: 0;
        pointer-events: none;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        transition: opacity 0.16s ease, transform 0.2s ease;
        font-size: 0.72rem;
        color: #eef3ff;
      }
      .provider-badge:hover .provider-hover-text,
      .provider-badge:focus-visible .provider-hover-text,
      .provider-badge:focus-within .provider-hover-text,
      .provider-badge.expanded .provider-hover-text {
        opacity: 1;
        transform: translateY(-50%) translateX(0);
      }
      .provider-badge.with-label .provider-hover-text {
        opacity: 1;
        max-width: 260px;
      }

      .provider-badge.owned {
        border-color: rgba(76, 214, 151, 0.75);
        box-shadow: 0 0 0 1px rgba(76, 214, 151, 0.25) inset;
      }
      .provider-actions {
        margin-top: 10px;
      }
      .provider-edit-btn {
        border: 1px solid rgba(255, 255, 255, 0.22);
        background: rgba(255, 255, 255, 0.06);
        color: #fff;
        border-radius: 8px;
        padding: 6px 10px;
        cursor: pointer;
      }
      .provider-pref-modal {
        position: fixed;
        inset: 0;
        z-index: 12050;
        background: rgba(5, 10, 24, 0.78);
        display: none;
        align-items: center;
        justify-content: center;
        padding: 18px;
      }
      .provider-pref-card {
        width: min(620px, 100%);
        border-radius: 14px;
        border: 1px solid rgba(255, 255, 255, 0.14);
        background: #111a30;
        padding: 16px;
      }
      .provider-pref-grid {
        margin-top: 12px;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
      }
      .provider-pref-option {
        display: flex;
        align-items: center;
        gap: 8px;
      }


      .provider-badge.available {
        border-color: rgba(39, 209, 132, 0.5);
        background: rgba(39, 209, 132, 0.14);
      }

      .provider-badge.unavailable {
        opacity: 0.72;
      }

      .provider-empty {
        margin-top: 6px;
        font-size: 0.77rem;
        color: #8f9abc;
      }

      .provider-actions {
        margin-top: 8px;
      }

      .provider-actions .btn {
        min-height: 34px;
        padding: 7px 10px;
        font-size: 0.78rem;
      }

      .moviePanel-similar {
        margin-top: 6px;
        display: grid;
        grid-template-columns: repeat(5, minmax(0, 1fr));
        gap: 5px;
      }

      .moviePanel-cast-grid {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 8px;
        margin-bottom: 10px;
      }

      .moviePanel-cast-item {
        border: 1px solid rgba(255, 255, 255, 0.12);
        background: rgba(255, 255, 255, 0.03);
        border-radius: 10px;
        padding: 6px;
        display: grid;
        gap: 6px;
      }

      .moviePanel-cast-photo {
        width: 100%;
        aspect-ratio: 2 / 3;
        border-radius: 8px;
        overflow: hidden;
        background: #101522;
      }

      .moviePanel-cast-photo img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
      }

      .moviePanel-cast-empty {
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.08rem;
        color: #d4ddf6;
        background: linear-gradient(135deg, #1b2542, #111a30);
      }

      .moviePanel-cast-name {
        font-size: 0.7rem;
        line-height: 1.25;
        color: #d9e2ff;
        display: -webkit-box;
        line-clamp: 2;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
      }

      .moviePanel-similar-label {
        margin-top: 10px;
        margin-bottom: 4px;
        font-size: 0.92rem;
        font-weight: 600;
        color: #eef3ff;
      }

      .moviePanel-similar-item {
        border: 1px solid rgba(255, 255, 255, 0.12);
        background: rgba(255, 255, 255, 0.03);
        border-radius: 10px;
        padding: 5px;
        cursor: pointer;
        display: flex;
        flex-direction: column;
        gap: 6px;
        color: var(--text);
        transition:
          transform 0.16s ease-out,
          box-shadow 0.16s ease-out,
          border-color 0.16s ease-out,
          background 0.16s ease-out;
      }

      .moviePanel-similar-item:hover {
        border-color: rgba(255, 255, 255, 0.25);
        background: rgba(255, 255, 255, 0.06);
        transform: translateY(-3px) scale(1.02);
        box-shadow: 0 12px 26px rgba(0, 0, 0, 0.45);
      }

      .moviePanel-similar-poster {
        width: 100%;
        aspect-ratio: 2 / 3;
        border-radius: 8px;
        overflow: hidden;
        background: #101522;
      }

      .moviePanel-similar-poster img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
      }

      .moviePanel-similar-title {
        font-size: 0.7rem;
        line-height: 1.25;
        color: #d9e2ff;
        display: -webkit-box;
        line-clamp: 2;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
      }

      .moviePanel-similar-empty {
        grid-column: 1 / -1;
        font-size: 0.75rem;
        color: var(--text-muted);
      }

      #moviePanel-approval {
        font-size: 0.78rem;
        color: var(--text-muted);
        font-weight: 500;
      }

      #moviePanel-actions {
        display: flex;
        justify-content: flex-end;
        gap: 8px;
      }

      #moviePanel-intent-actions {
        display: flex;
        justify-content: flex-start;
        gap: 8px;
        margin-bottom: 8px;
        flex-wrap: wrap;
      }

      .btn-intent-watch,
      .btn-intent-skip {
        border: 1px solid rgba(255, 255, 255, 0.26);
        border-radius: 999px;
        padding: 8px 14px;
        font-size: 0.76rem;
        font-weight: 700;
        cursor: pointer;
        color: #fff;
        letter-spacing: 0.01em;
        transition: transform 0.16s ease, box-shadow 0.16s ease, filter 0.16s ease;
      }

      .btn-intent-watch {
        background: linear-gradient(135deg, rgba(40, 178, 103, 0.34), rgba(20, 112, 80, 0.34));
        border-color: rgba(80, 219, 149, 0.68);
      }

      .btn-intent-skip {
        background: linear-gradient(135deg, rgba(207, 72, 72, 0.3), rgba(133, 44, 44, 0.3));
        border-color: rgba(255, 128, 128, 0.62);
      }

      .btn-intent-watch:hover,
      .btn-intent-skip:hover {
        transform: translateY(-1px);
        filter: brightness(1.06);
        box-shadow: 0 8px 16px rgba(0, 0, 0, 0.22);
      }

      .intent-reasons {
        display: flex;
        flex-wrap: wrap;
        gap: 7px;
        margin: 0 0 8px;
      }

      .intent-reason-btn {
        border: 1px solid rgba(255, 255, 255, 0.2);
        background: rgba(255, 255, 255, 0.06);
        color: #e8eeff;
        border-radius: 999px;
        padding: 6px 10px;
        font-size: 0.73rem;
        font-weight: 600;
        cursor: pointer;
        transition: transform 0.14s ease, background 0.14s ease, border-color 0.14s ease;
      }

      .intent-reason-btn:hover {
        transform: translateY(-1px);
        background: rgba(255, 255, 255, 0.12);
        border-color: rgba(255, 255, 255, 0.36);
      }

      @media (max-width: 600px) {
        #moviePanel {
          padding: 14px 0 0;
        }

        #moviePanel-inner {
          width: 100vw;
          max-height: calc(100vh - 14px);
          border-radius: 16px 16px 0 0;
          transform: translateY(0) scale(1);
        }

        #moviePanel-trailer,
        #moviePanel-poster {
          height: clamp(210px, 42vh, 330px);
        }

        .moviePanel-bottom {
          padding: 12px 12px 14px;
        }

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

        #moviePanel-actions {
          width: 100%;
          justify-content: flex-end;
        }

        #moviePanel-intent-actions {
          width: 100%;
          justify-content: flex-start;
        }

        #moviePanel-approval {
          width: 100%;
        }

        .moviePanel-cast-grid {
          grid-template-columns: repeat(3, minmax(0, 1fr));
        }

        .moviePanel-similar {
          grid-template-columns: repeat(4, minmax(0, 1fr));
        }
      }

      /* Effet zoom sur les affiches des cartes */
      .movie-poster img,
      .reco-poster-wrap img {
        transition: none;
      }

      .movie-card:hover .movie-poster img,
      .reco-card:hover .reco-poster-wrap img {
        transform: none;
      }

      /* ===================== AUTH MODAL ===================== */
      #authModal {
        position: fixed;
        inset: 0;
        z-index: 99999;
        display: none;
        align-items: center;
        justify-content: center;
        background: rgba(0, 0, 0, 0.55);
        backdrop-filter: blur(6px);
        padding: 16px;
      }

      .auth-card {
        width: min(520px, 96vw);
        border-radius: 18px;
        border: 1px solid rgba(255, 255, 255, 0.12);
        background: rgba(5, 10, 26, 0.98);
        box-shadow: 0 18px 42px rgba(0, 0, 0, 0.75);
        overflow: hidden;
      }

      .auth-head {
        padding: 14px 14px 10px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.08);
      }

      .auth-head strong {
        font-size: 0.95rem;
      }

      .auth-close {
        border: 1px solid rgba(255, 255, 255, 0.12);
        background: rgba(255, 255, 255, 0.04);
        color: var(--text);
        border-radius: 999px;
        padding: 6px 10px;
        cursor: pointer;
      }

      .auth-body {
        padding: 14px;
        display: grid;
        gap: 10px;
      }

      .auth-row {
        display: grid;
        gap: 6px;
      }

      .auth-row label {
        font-size: 0.78rem;
        color: var(--text-muted);
      }

      .auth-row input {
        width: 100%;
        border-radius: 12px;
        border: 1px solid rgba(255, 255, 255, 0.12);
        background: rgba(255, 255, 255, 0.04);
        color: var(--text);
        padding: 10px 12px;
        outline: none;
      }

      .auth-actions {
        display: flex;
        gap: 10px;
        flex-wrap: wrap;
        margin-top: 6px;
      }

      .auth-status {
        font-size: 0.82rem;
        color: var(--text-muted);
        min-height: 1.2em;
      }

      .auth-note {
        font-size: 0.78rem;
        color: var(--text-muted);
        line-height: 1.35;
        border-top: 1px solid rgba(255, 255, 255, 0.08);
        padding: 12px 14px 14px;
      }

      .auth-note strong {
        color: var(--text);
      }