/* ==========================================================================
   STANDARD MOBILE — Mango Dragon
   Chargé EN DERNIER : ce fichier fait autorité sur le rendu téléphone.
   Établi à partir d'un audit mesuré (375 px) de toutes les pages.

   Règles du standard :
     1. Aucun défilement horizontal, aucun élément plus large que l'écran.
     2. Le contenu ne passe jamais sous les barres fixes (header / player).
     3. Cibles tactiles : 44 px visés ; 24 px minimum absolu (WCAG 2.5.8).
        Pour les commandes compactes, on agrandit la ZONE DE CLIC sans grossir
        le visuel (pseudo-élément) → aucun changement de design.
     4. Champs de formulaire >= 16 px (sinon iOS zoome tout seul au focus).
     5. Texte de contenu >= 14 px sur téléphone (les micro-libellés stylistiques
        restent petits mais jamais sous 12 px).
     6. Zoom utilisateur jamais bloqué.
   ========================================================================== */

/* --- 1. Garde-fous globaux ------------------------------------------------ */
html {
    -webkit-text-size-adjust: 100%; /* pas d'inflation surprise du texte sur iOS */
}

img, video, svg, iframe {
    max-width: 100%;
}

/* Un mot ou une URL très longue ne doit jamais élargir la page */
h1, h2, h3, h4, p, li, td, a, .content-text {
    overflow-wrap: anywhere;
}

/* --- 2. Le contenu ne passe plus sous le player fixe --------------------- */
/* Le player est en position fixed : sans cette marge, les derniers éléments
   de la page (footer, dernier bouton…) restaient cachés derrière lui. */
body {
    padding-bottom: calc(var(--player-height) + env(safe-area-inset-bottom, 0px));
}

@media (max-width: 768px) {
    body {
        /* le player mesure 64 px sous 768 px (voir player.css) */
        padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px));
    }
}

/* Encoches / barres système : le player reste au-dessus de la zone sûre */
.player-bar,
.mobile-menu-overlay {
    padding-left: env(safe-area-inset-left, 0px);
    padding-right: env(safe-area-inset-right, 0px);
}

/* --- 3. Player : aucun débordement sur petit écran ----------------------- */
/* Avant : padding 2×32 + info 120 (non compressible) + contrôles + file
   dépassaient 375 px → le bouton « file d'attente » sortait de l'écran
   (inaccessible). On rend l'info compressible et on resserre les marges. */
@media (max-width: 560px) {
    .player-container {
        padding: 0 var(--space-sm);
        gap: var(--space-sm);
    }
    .player-info {
        min-width: 0;      /* compressible */
        flex: 1 1 auto;
        overflow: hidden;
    }
    .player-meta {
        min-width: 0;
        max-width: none;
        overflow: hidden;
    }
    .player-title,
    .player-artist {
        display: block;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .player-controls,
    .player-queue-btn {
        flex: 0 0 auto;    /* jamais rognés / poussés hors écran */
    }
}

@media (max-width: 400px) {
    .player-container { gap: var(--space-xs); }
    /* Aléatoire + répétition : secondaires, masqués pour garder lecture/piste
       précédente/suivante + file d'attente accessibles sur très petit écran. */
    #player-shuffle,
    #player-repeat { display: none; }
}

/* --- 4. Cibles tactiles -------------------------------------------------- */
/* Déclencheur : petit écran OU pointeur grossier. `pointer: coarse` seul ne
   suffit pas — un navigateur desktop en fenêtre étroite se déclare `fine`,
   et les émulateurs mobiles aussi : la règle ne s'appliquait donc pas. */
@media (max-width: 768px), (pointer: coarse) {

    /* a) Commandes assez grandes pour être agrandies directement */
    .mobile-menu-toggle,
    .theme-toggle {
        min-width: 44px;
        min-height: 44px;
    }

    .filter-pill,
    .filter-reset,
    .btn {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    .nav-links .menu-item a,
    .mobile-nav-links .menu-item a {
        padding-block: var(--space-xs);
    }

    /* b) Commandes compactes : on agrandit la ZONE DE CLIC sans toucher au
          visuel (le pseudo-élément est invisible mais cliquable). */
    .player-btn,
    .release-tracklist__queue-btn,
    .social-link,
    .queue-clear,
    .slider-arrow {
        position: relative;
    }
    .player-btn::after,
    .release-tracklist__queue-btn::after,
    .social-link::after,
    .queue-clear::after,
    .slider-arrow::after {
        content: '';
        position: absolute;
        /* étend la zone tactile d'environ 6 à 11 px de chaque côté */
        inset: -8px;
    }
    /* plus petites encore → extension plus large */
    .release-tracklist__queue-btn::after { inset: -11px; }
    .social-link::after                  { inset: -10px; }

    /* c) Points du carrousel Studio : 11 px visuellement → zone tactile
          élargie SANS chevauchement entre voisins (on écarte les points). */
    .slider-dots { gap: 1.25rem; }
    .slider-dots .dot { position: relative; }
    .slider-dots .dot::after {
        content: '';
        position: absolute;
        inset: -14px -10px;   /* ~31 x 39 px cliquables, sans recouvrement */
    }
}

/* --- 5. Formulaires ----------------------------------------------------- */
/* < 16 px sur un champ = iOS zoome la page au focus (et ne dézoome pas).
   Les 4 champs étaient à 14,4 px. */
@media (max-width: 768px) {
    /* On cible AUSSI les classes : `.form-input { font-size:.9rem }` (components.css)
       a une spécificité supérieure au sélecteur d'élément `input` et gagnait. */
    input,
    select,
    textarea,
    .form-input,
    .form-textarea,
    .upload-form input,
    .upload-form textarea {
        font-size: 16px;
    }

    .form-input,
    .form-textarea {
        width: 100%;
    }

    .upload-zone {
        padding: var(--space-md) var(--space-sm);
    }
}

/* --- 5b. En-tête compact ----------------------------------------------- */
/* Audit 375 px : logo 200 px de large → en-tête 320 px + nav 81 px = 401 px
   avant la première ligne de contenu (la moitié de l'écran). */
@media (max-width: 768px) {
    .header-logo {
        width: 140px;
        max-width: 140px;
    }
    .header-subtitle {
        margin-top: var(--space-2xs);
        font-size: 0.5625rem;  /* 9 px : discret sous le logo (retour du 14 septembre) */
        letter-spacing: 0.12em;
    }
    .site-header {
        padding-top: var(--space-xs);
    }
    /* Barre de menu moins haute : 80 → 44 px, hamburger plus discret (18 px) */
    .main-nav .nav-container { height: 44px; }
    .mobile-menu-toggle      { min-width: 40px; min-height: 40px; width: 40px; height: 40px; }
    .mobile-menu-toggle .hamburger,
    .mobile-menu-toggle .hamburger::before,
    .mobile-menu-toggle .hamburger::after { width: 18px; }
    .mobile-menu-toggle .hamburger::before { top: -6px; }
    .mobile-menu-toggle .hamburger::after  { top: 6px; }

    /* Bascule clair/sombre : dans la barre, à gauche, symétrique du hamburger,
       même taille, sans cadre (retour du 14 septembre). */
    .nav-container > .theme-toggle {
        display: flex;
        left: var(--container-padding);
        right: auto;
        width: 40px;
        height: 40px;
        min-width: 40px;
        min-height: 40px;
        background: none;
        border: 0;
        border-radius: 0;
    }
    .nav-container > .theme-toggle .theme-toggle-icon::before { font-size: 18px; }
    /* Elle n'a donc plus besoin d'être dans le menu plein écran */
    .mobile-menu-overlay .mobile-theme-toggle { display: none; }
}

/* --- 5c. Lecteur : barre de progression conservée sur téléphone --------- */
/* player.css la masquait sous 768 px : impossible de voir où on en est ni
   d'avancer dans un morceau. On la garde, fine, collée au bord supérieur du
   lecteur, sur toute la largeur (les libellés de temps restent masqués). */
@media (max-width: 768px) {
    .player-progress {
        display: flex;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 3px;
        gap: 0;
    }
    .player-progress .player-time {
        display: none;
    }
    .player-progress-bar {
        height: 3px;
        border-radius: 0;
    }
    .player-progress-fill {
        border-radius: 0;
    }
    .player-progress-fill::after {
        opacity: 1;            /* le curseur reste visible : pas de survol au doigt */
        width: 8px;
        height: 8px;
        right: -4px;
    }
    /* zone tactile étendue à 24 px sans changer le visuel */
    .player-progress-bar::before {
        content: '';
        position: absolute;
        left: 0;
        right: 0;
        top: -14px;
        bottom: -8px;
    }
}

/* --- 6. Lisibilité du texte sur téléphone ------------------------------- */
/* On remonte le texte de CONTENU à >= 14 px ; les micro-libellés
   volontairement discrets sont juste sortis du « trop petit » (>= 12 px). */
@media (max-width: 768px) {
    .release-tracklist__title { font-size: 0.9375rem; }  /* 12,8 → 15 px  (contenu) */
    .release-tracklist__duration,
    .player-time             { font-size: 0.75rem; }      /* 10,4 → 12 px  (libellé) */
    .player-title            { font-size: 0.875rem; }     /* 12   → 14 px  (contenu) */
    .player-artist           { font-size: 0.8125rem; }    /* 11,2 → 13 px  */
    .tag                     { font-size: 0.75rem; }      /* 10,4 → 12 px  */
    .footer-email,
    .footer-copyright        { font-size: 0.8125rem; }    /* 12,5 → 13 px  */
    .queue-clear             { font-size: 0.8125rem; }

    /* Complément de l'audit du 9 septembre 2026 */
    .filter-pill             { font-size: 0.8125rem; }   /* 11,2 → 13 px  (on les tape) */
    .filter-group__label,
    .meta-label,
    .card-artiste__cta,
    .card-release__artist,
    .card-visual__artist,
    .band-item__label        { font-size: 0.75rem; }     /* 10,4-11,2 → 12 px */
    .form-label,
    .upload-zone__text,
    .upload-zone__formats    { font-size: 0.8125rem; }   /* 12 → 13 px */
    .btn--filled             { font-size: 0.875rem; }    /* 12,8 → 14 px : action principale */

    /* Titres de release / artiste : la nomenclature du label est longue
       (« EXOTIC FRUIT JUICES #003 – SAM MARYU – LO-FI RAP » tenait sur 5 lignes à 48 px). */
    .single-hero h1          { font-size: clamp(2rem, 9vw, 3rem); line-height: 1; }

    /* Lien e-mail du pied de page : 21 px de haut → zone tactile de 44 px */
    /* Pied de page compact (retour du 14 septembre) : zone tactile de ~32 px
       au lieu de 44, lignes serrées. */
    .footer-email            { display: inline-block; padding-block: 0.35rem; }
    .site-footer             { padding: 2px 0; }
    .footer-container        { padding: 2px var(--container-padding); gap: 0; }
    .footer-bottom           { gap: 0 1rem; }
    .footer-email,
    .footer-copyright        { font-size: 0.75rem; }
}

/* --- 7. Confort de lecture / marges ------------------------------------- */
@media (max-width: 480px) {
    :root {
        /* marges latérales plus sobres : 32 px de chaque côté = trop sur 375 px */
        --container-padding: 1.25rem;
    }
}

/* --- 7b. GIF servis en vidéo (inc/gif-video.php) ------------------------ */
.md-gif-video {
    display: block;
    width: 100%;
    height: auto;
    max-width: 100%;
}

/* --- 9. Densité téléphone (retour de Mihail, 14 septembre 2026) ---------- */
/* « Sur les trois quarts des pages c'est beaucoup trop gros » : hors accueil,
   tout est ramené grossièrement à la moitié — titres, textes, filtres —
   et les cartes passent à deux par ligne. Ce bloc est volontairement le
   dernier de la feuille pour l'emporter sur les sections 4 et 6 ci-dessus. */
@media (max-width: 640px) {
    body { font-size: 0.875rem; }                      /* 16 → 14 px */

    /* Titres : moitié de leur taille de bureau */
    h1                         { font-size: 1.75rem; }  /* 48 → 28 px */
    .page-header h1            { font-size: 2.5rem; }   /* titres d'archive (Artists, Releases…) : 40 px */
    h2                         { font-size: 1.25rem; }  /* 32 → 20 px */
    h3                         { font-size: 1rem; }     /* 24 → 16 px */
    .single-hero h1            { font-size: clamp(1.5rem, 6.5vw, 2rem); }
    section.page-header        { padding: var(--space-xs) 0 var(--space-2xs); } /* 8 px sous le menu */ /* de l'air sous le menu (layout.css met 0 avec `section.`) */
    .page-header .subtitle,
    .page-intro-content,
    .content-text              { font-size: 0.875rem; }

    /* Cartes : deux par ligne (artistes, releases, visuals) */
    .cards-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-xs);
    }
    .card-artiste__name        { font-size: 1rem; }      /* 28,8 → 16 px */
    .card-release__title,
    .card-visual__title        { font-size: 0.9375rem; } /* 24 → 15 px */
    .card-artiste__cta,
    .card-release__artist,
    .card-visual__artist       { font-size: 0.625rem; letter-spacing: 0.08em; }

    /* Filtres (genre, artiste, type, tri) : UNE ligne par groupe, défilante
       au doigt, pastilles minuscules. Retour du 14 septembre : « les cases
       prennent un max de place, on ne voit pas les images avant de
       scroller ». Ici, les quatre groupes tiennent en ~100 px. */
    .filter-bar                { gap: 0.2rem; margin-bottom: var(--space-xs); }
    .filter-group              { align-items: center; gap: 0.2rem; }
    .filter-group__pills {
        flex-wrap: nowrap;
        gap: 0.2rem;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        padding-bottom: 1px;
    }
    .filter-group__pills::-webkit-scrollbar { display: none; }
    .filter-group__label       { font-size: 0.5625rem; min-width: 2.75rem; margin-right: 0; }
    .filter-pill,
    .filter-reset {
        flex: 0 0 auto;
        font-size: 0.5625rem;                            /* 9 px */
        padding: 0.15rem 0.4rem;
        min-height: 22px;                                /* remplace les 44 px de la section 4 */
        letter-spacing: 0.04em;
        white-space: nowrap;
    }

    /* Studio : carrousel et texte plus petits */
    /* Carrousel pleine largeur, comme les visuels d'About et Contact (retour du 14 septembre) */
    .slider-nav                { gap: 0.6rem; margin: var(--space-sm) 0; }
    .slider-arrow              { width: 32px; height: 32px; }
    .slider-dots               { gap: 0.9rem; }
    .slide-detail h3           { font-size: 1.125rem; margin-bottom: var(--space-xs); }
    .slide-detail p            { font-size: 0.875rem; }  /* 21,6 → 14 px */

    /* Page de collection visuelle (retour du 14 septembre) : moins d'écart
       bandeau → texte → « Collection by », et images DEUX par ligne en
       colonnes égales, quel que soit le ratio (la galerie justifiée laissait
       des carrés seuls avec un grand vide à droite). */
    .visual-intro              { padding: var(--space-xs) 0 var(--space-xs); }
    .visual-intro__text        { font-size: 0.8125rem; line-height: 1.55; text-align: left; }
    .visual-collection__by     { font-size: 1.25rem; margin: var(--space-2xs) 0 var(--space-2xs); }
    .visual-intro__rule        { margin-top: var(--space-xs); }
    .visual-collection.section { padding-top: var(--space-xs); }
    /* Essai « trois par ligne » (retour du 14 septembre). Galerie justifiée :
       hauteur de ligne fixe (96 px), chaque image part de sa largeur
       naturelle (ratio × hauteur), puis les RECTANGLES s'étirent pour remplir
       la ligne — ils en sortent plus allongés, jamais déformés (recadrage).
       Les carrés ne s'étirent quasiment pas : ils restent carrés. */
    .visual-collection__grid,
    .visual-collection__grid--fixe {
        --v-row-h: 84px;
        display: flex;
        flex-wrap: wrap;
        align-items: stretch;
        gap: var(--space-xs);
        grid-template-columns: none;
    }
    .visual-collection__item,
    .visual-collection__grid--fixe .visual-collection__item {
        height: var(--v-row-h);
        /* largeur de départ plafonnée à ~un tiers : trois images tiennent
           toujours sur la ligne ; les rectangles regagnent ensuite leur
           allongement en absorbant l'espace restant (proportionnellement
           à leur ratio) */
        flex-basis: min(calc(var(--ar, 1) * var(--v-row-h)), 100px);
        flex-grow: var(--grow, 100);
        flex-shrink: 1;
        width: auto;
        max-width: calc(var(--ar, 1) * var(--v-row-h) * 1.9); /* pas d'image seule étirée sur toute la ligne */
        aspect-ratio: auto;
        align-self: auto;
    }
    .visual-collection__item[style*="--grow:0"] {
        flex-grow: 0.4;                      /* n'absorbe presque rien : reste carré */
        max-width: calc(var(--v-row-h) * 1.15);
    }

    /* Lightbox des collections : flèches ancrées en BAS de l'écran, toujours
       au même endroit quelle que soit la taille de l'image ; l'image est
       centrée dans l'espace au-dessus (retour du 14 septembre). */
    .md-lightbox.is-open {
        align-items: flex-start;
        padding-top: 72px;                  /* sous la croix de fermeture */
        padding-bottom: 96px;               /* place réservée aux flèches */
        box-sizing: border-box;
    }
    .md-lightbox__stage {
        height: 100%;
        max-height: none;
        align-items: center;
    }
    .md-lightbox__image { max-height: calc(100vh - 72px - 96px); }
    .md-lightbox__arrow {
        position: fixed;
        top: auto;
        bottom: calc(24px + env(safe-area-inset-bottom, 0px));
        transform: none;
        width: 44px;
        height: 44px;
    }
    .md-lightbox__arrow--prev { left: auto;  right: calc(50% + 16px); }  /* même écart qu'avant : 32 px */
    .md-lightbox__arrow--next { right: auto; left:  calc(50% + 16px); }
    .md-lightbox__arrow::after { inset: -6px; }

    /* Page release : tracklist et méta */
    .release-tracklist__title  { font-size: 0.8125rem; }
    .meta-label                { font-size: 0.625rem; }
    .tag                       { font-size: 0.6875rem; }
}

/* --- 10. Accueil : bandeaux défilants (retour du 14 septembre) ----------- */
/* Les trois bandeaux partagent UNE hauteur ; la largeur découle du ratio :
   artistes 4:5 (comme leurs cartes), releases carrées, photos 4:3. */
@media (max-width: 640px) {
    .scroll-band { --band-h: 170px; padding: var(--space-xs) 0; }
    .band-track  { gap: var(--space-xs); }
    .band-item--artist  { width: calc(var(--band-h) * 4 / 5); height: var(--band-h); aspect-ratio: auto; }
    .band-item--release { width: var(--band-h);                height: var(--band-h); }
    .band-item--photo   { width: calc(var(--band-h) * 4 / 3); height: var(--band-h); }
}

/* --- 8. Mouvement réduit ------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
    .band-track,
    .slider-photos__track {
        animation: none !important;
        transition: none !important;
    }
}