/* ============================================================
   RESPONSIVE — App-like mobile experience

   Philosophy: mobile = full-width cards, bigger text, bigger touch
   targets, zero wasted space. Looks like a native app.
   ============================================================ */

/* ════════════════════════════════════════
   MOBILE (≤ 640px) — App-like layout
   ════════════════════════════════════════ */
@media (max-width: 640px) {

    /* --- Global --- */
    main { padding-top: 4px !important; }

    /* --- Cards: full-width, no border-radius on edges --- */
    .card {
        border-radius: var(--r-md);
        padding: var(--s-4);
    }

    /* --- Track lists: bigger covers, bigger text --- */
    .rpv-track {
        grid-template-columns: 20px 44px 1fr auto;
        gap: 10px;
        padding: 10px var(--app-gutter);
        border-radius: var(--r-md);
    }
    .rpv-track-icon {
        width: 44px; height: 44px;
        font-size: 14px;
        border-radius: var(--r-md);
    }
    .rpv-track-title { font-size: var(--fs-body); font-weight: 700; }
    .rpv-track-artist { font-size: var(--fs-small); }
    .rpv-track-time { font-size: var(--fs-meta); padding: var(--s-1) 10px; }

    /* --- List items: bigger --- */
    .list-item {
        padding: var(--s-3) var(--app-gutter);
        gap: var(--s-3);
        border-radius: var(--r-md);
    }
    .list-item .cover {
        width: 48px; height: 48px;
        border-radius: var(--r-sm);
    }
    .list-item .meta .t { font-size: var(--fs-body); }
    .list-item .meta .a { font-size: var(--fs-small); }

    /* --- Buttons: touch-friendly (44px min) --- */
    .btn {
        padding: 12px 20px;
        font-size: 15px;
        min-height: var(--touch-min);
        border-radius: var(--r-md);
    }
    .btn-sm {
        padding: 8px 14px;
        font-size: 13px;
        min-height: var(--touch-sm);
    }
    .btn-play {
        width: 56px; height: 56px;
        font-size: 20px;
    }

    /* --- Inputs: bigger touch targets --- */
    .inp {
        padding: 12px 14px;
        font-size: 16px; /* prevents iOS zoom on focus */
        min-height: var(--touch-min);
        border-radius: var(--r-md);
    }

    /* --- Tables mobile --- */
    .table thead { display: none; }
    .table, .table tbody { display: block; width: 100%; }
    .table tr {
        display: flex;
        align-items: center;
        padding: 10px var(--app-gutter);
        margin: 0;
        border-bottom: 1px solid rgba(255,255,255,0.05);
        min-height: var(--touch-min);
    }
    .table td {
        display: none;
        padding: 0 !important;
        border: none !important;
    }
    .table td:first-child {
        display: block;
        flex: 1;
        min-width: 0;
        overflow: hidden;
        line-height: 1.3;
    }
    .table td:first-child strong {
        display: block;
        font-size: var(--fs-body);
        font-weight: 600;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .table td:first-child .mobile-artist {
        display: block !important;
        font-size: var(--fs-small);
        color: var(--text-3);
    }
    .table td:not(:first-child):not(:last-child) {
        display: none !important;
    }
    .table td:last-child {
        display: flex;
        flex: 0 0 auto;
        margin-left: 8px;
    }
    .table td:last-child .btn,
    .table td:last-child button {
        width: var(--touch-min) !important;
        height: var(--touch-min) !important;
        padding: 0 !important;
        border-radius: 50% !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-size: 14px !important;
        min-width: 0 !important;
    }

    /* --- Alphabet filter: bigger touch targets --- */
    .alphabet-filter { gap: 4px !important; flex-wrap: wrap; }
    .alphabet-button {
        padding: 6px 9px !important;
        font-size: 12px !important;
        min-height: 32px;
        min-width: 32px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    /* --- Accordéon artiste --- */
    li.rpv-track.rpv-artist-accordion .rpv-track-head {
        grid-template-columns: 20px 48px 1fr 24px;
        gap: 10px;
        padding: 12px var(--app-gutter);
    }
    .rpv-artist-accordion .rpv-track-cover {
        width: 48px; height: 48px;
    }
    .rpv-artist-accordion .rpv-track-title { font-size: var(--fs-body); }
    .rpv-artist-accordion .rpv-track-artist { font-size: var(--fs-small); }
    li.rpv-track.rpv-artist-accordion .rpv-track-time { display: none !important; }

    /* --- Demander button --- */
    .rpv-btn-demander {
        padding: 8px 14px !important;
        font-size: 12px !important;
        min-height: var(--touch-sm);
    }

    /* --- Section titles --- */
    .section-title,
    .t-h2,
    [class*="ded-header"],
    [class*="section-header"] {
        font-size: 17px !important;
    }
}

/* ════════════════════════════════════════
   TABLET (641px – 1023px) — Hybrid layout
   ════════════════════════════════════════ */
@media (min-width: 641px) and (max-width: 1023px) {
    .container {
        padding-left: var(--s-5);
        padding-right: var(--s-5);
    }

    .rpv-track {
        padding: 10px 14px;
    }
    .rpv-track-icon { width: 40px; height: 40px; }
    .list-item .cover { width: 44px; height: 44px; }
}

/* ════════════════════════════════════════
   DESKTOP (≥ 1025px) — Mise en page PC
   ════════════════════════════════════════ */
@media (min-width: 1025px) {

    /* Conteneur centré */
    .container {
        padding-left: var(--app-gutter);
        padding-right: var(--app-gutter);
    }

    /* Pistes musicales — plus grandes */
    .rpv-track {
        padding: 14px var(--app-gutter);
        gap: 14px;
    }
    .rpv-track-icon  { width: 52px; height: 52px; font-size: 16px; }
    .rpv-track-title  { font-size: var(--fs-track-title); }
    .rpv-track-artist { font-size: var(--fs-track-artist); }
    .rpv-track-time   { font-size: 13px; padding: 3px 12px; }

    /* List items */
    .list-item { padding: 14px 20px; gap: 16px; }
    .list-item .cover { width: 56px; height: 56px; }
    .list-item .meta .t { font-size: var(--fs-track-title); }
    .list-item .meta .a { font-size: var(--fs-track-artist); }

    /* Boutons */
    .btn    { font-size: 15px; padding: 12px 22px; }
    .btn-sm { font-size: 13px; padding: 8px 16px; }

    /* Inputs */
    .inp { font-size: 15px; padding: 12px 16px; }

    /* Accordéon artiste — plus grand */
    li.rpv-track.rpv-artist-accordion .rpv-track-head {
        grid-template-columns: 24px 56px 1fr 28px;
        gap: 14px;
        padding: 14px var(--app-gutter);
    }
    .rpv-artist-accordion .rpv-track-cover { width: 56px; height: 56px; }
    .rpv-artist-accordion .rpv-track-title  { font-size: var(--fs-track-title); }
    .rpv-artist-accordion .rpv-track-artist { font-size: var(--fs-track-artist); }

    /* Titres de section */
    .section-title,
    .t-h2,
    [class*="ded-header"],
    [class*="section-header"] { font-size: 22px; }

    /* Bouton Demander — plus grand et lisible */
    .rpv-btn-demander {
        padding: 9px 18px !important;
        font-size: 14px !important;
        min-height: 38px;
        border-radius: var(--r-pill) !important;
    }
    .rpv-btn-demander i { font-size: 12px !important; margin-right: 5px !important; }

    /* Accordéon — flèche plus grande */
    .rpv-accordion-chev {
        width: 40px; height: 40px;
        font-size: 1rem;
    }

    /* Accordéon artiste — ligne plus grande sur PC */
    li.rpv-track.rpv-artist-accordion .rpv-track-head,
    div.rpv-artist-accordion .rpv-track-head {
        grid-template-columns: 32px 56px 1fr auto 40px;
        gap: 14px;
        padding: 16px 20px;
    }
    .rpv-artist-accordion .rpv-track-cover { width: 56px; height: 56px; }
    .rpv-artist-accordion .rpv-track-title  { font-size: 16px; }
    .rpv-artist-accordion .rpv-track-artist { font-size: 13px; }
    .rpv-artist-accordion .rpv-track-rank   { font-size: 1.1rem; }
    .rpv-artist-accordion .rpv-track-time   { font-size: 13px; padding: 6px 14px; }

    /* Alphabet filter */
    .alphabet-button { padding: 7px 12px; font-size: 13px; }

    /* Pages principales : plus de padding en haut */
    .rpv-main,
    .home-main,
    .cls-main { padding-top: var(--s-5); }

    /* Cards */
    .card { padding: var(--s-5); border-radius: var(--r-lg); }
}

/* ════════════════════════════════════════
   TOUCH DEVICES — Always visible actions
   ════════════════════════════════════════ */
@media (hover: none) {
    .top-podium-demand-btn { opacity: 1 !important; }
    .top-list-demand { opacity: 1 !important; }
    .nou-request-btn { opacity: 1 !important; }
    .rpv-btn-demander { opacity: 1 !important; }
}

/* ════════════════════════════════════════
   SMALL PHONES (≤ 380px) — Extra compact
   ════════════════════════════════════════ */
@media (max-width: 380px) {
    .rpv-track { grid-template-columns: 16px 40px 1fr auto; gap: 8px; }
    .rpv-track-icon { width: 40px; height: 40px; }
    .rpv-track-title { font-size: var(--fs-small); }

    .hero-row { gap: 8px !important; }
}

/* ============================================================
 * CORRECTIFS MOBILES CIBLES — 2026-05-07
 * ============================================================ */

/* Fix 1 — Notch / Dynamic Island sur pages avec header haut */
@media (max-width: 720px) {
    .page-demandes .page-header,
    .page-demandes > header:first-of-type,
    body.page-demandes > main > *:first-child {
        padding-top: max(12px, env(safe-area-inset-top, 0px));
    }
}

/* Fix 2 — Tableau classement : tronquer le nom artiste */
@media (max-width: 640px) {
    .classement-table .artist-col,
    .classement-table td:nth-child(3) {
        max-width: 120px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
}

/* Fix 3 — Tres petits ecrans (<=360px) : alleger le player bar sticky */
@media (max-width: 360px) {
    .rpv-player-cover { display: none !important; }
    .rpv-player-inner { padding: 0 8px; gap: 6px; }
    .rpv-player-title { font-size: 12px; }
    .rpv-player-vol   { display: none !important; }
}