/* ============================================================
   WAV TOOLS — STYLES
   ------------------------------------------------------------
   Frame cinématographique (photo + vignette + titre fusionné à
   la fenêtre frosted blanc) + tracklist Proposal B « Lignes
   dépliantes » + player audio existant ré-habillé en clair.

   Esthétique : monochrome warm-black sur fond blanc translucide.
   Aucune couleur d'accent — la sobriété fait le luxe.
   ============================================================ */


/* === TOKENS (warm-ink + window + viewport) ================== */
:root {
  /* Encre chaude (≈ #14100C) déclinée en alphas. C'est la seule
     « couleur » utilisée à l'intérieur de la fenêtre.
     ⚠ ink-40 monté à 0.50 en v15.10 : le texte secondaire de la
     liste (numéro, sous-lignes, labels de colonnes, dBFS) était
     un peu trop pâle pour être lu facilement. */
  --ink:        20, 16, 12;
  --ink-1:      rgba(20, 16, 12, 1);
  --ink-80:     rgba(20, 16, 12, 0.82);
  --ink-55:     rgba(20, 16, 12, 0.55);
  --ink-40:     rgba(20, 16, 12, 0.50);
  --ink-12:     rgba(20, 16, 12, 0.12);
  --ink-07:     rgba(20, 16, 12, 0.07);
  --hair:       rgba(20, 16, 12, 0.10);

  /* Accent chaud (orange-gris/tan) pour la ligne en lecture, les hovers
     de boutons et le fond du panneau Metadata. Évoque l'ambiance
     bois/cuivre du studio sans rentrer en concurrence visuelle avec
     l'encre noire. */
  --accent:        200, 138, 76;
  --accent-bg:     rgba(200, 138, 76, 0.18);   /* tint général du fond (un poil plus marqué) */
  --accent-bg-sub: rgba(200, 138, 76, 0.10);   /* version plus diluée (metadata) */
  --accent-bar:    rgba(200, 138, 76, 0.95);   /* barre verticale gauche, ligne sélectionnée */
  --accent-border: rgba(200, 138, 76, 0.60);   /* border au hover des boutons */

  /* Fenêtre & player : opacité + flou pilotés ensemble.
     ⚠ Le flou est volontairement BAS (2 px = design d'origine).
     Un flou plus fort (10-20 px) impose au GPU de recomposer une
     grande zone à chaque repaint et bloque l'analyse loudness qui
     tourne en parallèle sur le main thread (chaque setTimeout(0)
     du LoudnessAnalyzer attend la fin du paint avant de reprendre).
     2 px suffit pour adoucir le fond sans pénaliser les perfs. */
  /* v59 : opacité du panneau blanc montée à 0.95 (test 0.85 trop
     translucide à l'usage). Le titre WAV TOOLS suit (même variable). */
  --win-opacity: 0.95;
  --win-blur:    2px;
  /* Vignette — alignée sur le diaporama du site principal (cf.
     css/styles.css .bg-vignette). v52.1 : intensité 0.55 → 0.85 +
     surcharges haut/bas séparées, demande JC du 2026-06-04. */
  --vignette-intensity: 0.85;
  --vignette-bottom:    0.92;
  --vignette-top:       0.55;

  /* Densité (padding ligne + taille texte) — défaut « confort ». */
  --row-pad:  13px;
  --row-font: 14px;

  /* Fond opaque de la dropzone au repos (gris chaud clair). Opaque
     pour ne pas laisser apparaître l'image de fond derrière le
     panneau translucide. Demande JC du 2026-06-04. */
  --dz-rest-bg: #ebe7e1;
}

.dens-compacte { --row-pad: 8px;  --row-font: 13px; }
.dens-confort  { --row-pad: 13px; --row-font: 14px; }
.dens-aerée    { --row-pad: 20px; --row-font: 15px; }


/* === Reset minimal + body ================================== */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html, body {
  height: 100%;
  font-family: 'Montserrat', system-ui, sans-serif;
  background: #0a0908;
  color: var(--ink-1);
  -webkit-font-smoothing: antialiased;
  overflow: hidden;          /* le scroll est dans .window-scroll */
}

[hidden] { display: none !important; }


/* === STAGE : conteneur plein écran ========================= */
.stage {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
}


/* === Image de fond ========================================== */
/* L'app tools est un sous-domaine indépendant (CLAUDE.md §17). Son
   dossier `images/diaporama/` est autonome — on n'utilise PAS un
   chemin remontant vers le site principal.
   v55 : photos paysage-2 / portrait-2 optimisées WebP plein écran.
     - paysage  2560×1535  ~492 KB  (depuis JPEG 5712×3424 / 3.9 MB)
     - portrait 1600×2576  ~442 KB  (depuis JPEG 3225×5193 / 3.7 MB)
   Q80 method 6 — visuellement identique sous la vignette + le blur
   du panneau. Une seule des deux est chargée à la fois (media query
   orientation). JPEG sources conservés dans le dossier au cas où. */
.bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: url("../images/diaporama/paysage-2.webp") center 38% / cover no-repeat;
}
@media (orientation: portrait) {
  .bg {
    background-image: url("../images/diaporama/portrait-2.webp");
  }
}

/* (Diagnostic perf retiré — la cause du ralentissement était le
   clamping de setTimeout(0) dans l'analyseur, pas le compositing
   du fond. Fix appliqué dans loudness-analyzer.js v15.5 :
   `microYield()` basé sur MessageChannel.) */


/* === Vignette double gradient =============================== */
/* Calquée sur la vignette du site principal (.bg-vignette dans
   css/styles.css) — radial ellipse centre clair → bords sombres,
   doublé d'un linéaire qui renforce le haut et surtout le bas.
   Intensités pilotées par les 3 variables --vignette-* (cf. :root). */
.vignette {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(
      ellipse at center,
      transparent 25%,
      rgba(0, 0, 0, calc(var(--vignette-intensity) * 0.5)) 65%,
      rgba(0, 0, 0, var(--vignette-intensity)) 100%
    ),
    linear-gradient(
      to bottom,
      rgba(0, 0, 0, var(--vignette-top)) 0%,
      transparent 25%,
      transparent 60%,
      rgba(0, 0, 0, calc(var(--vignette-bottom) * 0.5)) 85%,
      rgba(0, 0, 0, var(--vignette-bottom)) 100%
    );
}


/* === TOPBAR : juste FR / EN à droite ======================== */
.topbar {
  position: relative;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 22px 30px 0;
}

.lang {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  letter-spacing: 0.18em;
  color: rgba(255, 255, 255, 0.85);
}

.lang-btn {
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.55);
  font: inherit;
  letter-spacing: inherit;
  cursor: pointer;
  padding: 4px 2px;
  transition: color 0.2s;
}
.lang-btn:hover         { color: #fff; }
.lang-btn.is-active     { color: #fff; cursor: default; }
.lang-sep               { color: rgba(255, 255, 255, 0.3); }


/* === HERO : titre géant + fenêtre ============================
   Empilés en colonne, ancrés en HAUT (anchor flex-start). Le titre
   et le haut de la fenêtre restent ainsi à une position fixe peu
   importe l'état du player — quand celui-ci s'ouvre, seule la
   hauteur de la fenêtre change, donc son BAS remonte. */
.hero {
  position: relative;
  z-index: 4;
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;   /* ⚠ anchor TOP */
  padding: 28px 18px 0;          /* moitié moins d'espace au-dessus du titre */
}


/* === TITRE FUSIONNÉ ========================================== */
/* La titlebox a son bord bas STRICTEMENT collé au bord haut de
   la window (flex column, gap 0). Le clip-path tronque tout ce
   qui passe DERRIÈRE la fenêtre — donc la partie basse du titre
   qui ferait double avec le panneau frosté n'apparaît pas. */
.titlebox {
  position: relative;
  z-index: 1;
  width: 100%;
  display: flex;
  justify-content: center;
  clip-path: inset(-200vh -100vw 0 -100vw);
}

.bigtitle {
  flex: none;
  margin: 0;
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
  font-size: 6.5vw;
  line-height: 0.7;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
  user-select: none;
  /* Opacité partagée avec la fenêtre (cohérence translucide). */
  color: rgba(255, 255, 255, var(--win-opacity));
  /*  --title-base : amène les fonds de capitales pile sur le bord
      haut de la window (calé pour Montserrat 600).
      --title-x    : décalage horizontal (gauche par défaut).
      --title-pos  : nudge vertical utilisateur (négatif = soulève). */
  transform: translate(-17vw, 0.03em);
}


/* === FENÊTRE DE CONTENU ===================================== */
/* v56 : un léger backdrop-filter blur(2px) est rétabli sur la fenêtre
   pour adoucir l'image de fond derrière (lisibilité du texte + cohérence
   avec le site principal). Le problème de perf qui avait conduit à le
   retirer (analyse loudness ralentie ×5–10) a été résolu en amont par le
   passage à `microYield()` basé sur MessageChannel dans
   loudness-analyzer.js (v15.5).

   v57 : le blur ET le fond translucide sont DÉPORTÉS sur un pseudo
   ::before. Posés directement sur .window, ils transformeraient
   .window en containing block pour les descendants en position:fixed
   (spec CSS) → le tooltip LUFS, qui est précisément en fixed pour
   échapper à overflow:hidden + border-radius, atterrissait alors
   complètement décalé. Sur ::before, le containing block reste celui
   du pseudo (sans descendants positionnés), donc le tooltip retrouve
   son ancrage viewport. .window reste un élément normal.

   Hauteur dynamique : la fenêtre prend toute la place disponible
   dans le hero (flex: 1). Quand le player s'ouvre, le hero rétrécit
   (parce que .player-transport prend du max-height) — la fenêtre
   suit naturellement, son BAS remonte. Le HAUT reste collé au
   bas du titre via flex-start sur le hero. */
.window {
  flex: 1 1 auto;
  min-height: 220px;
  position: relative;
  z-index: 0;
  width: min(1320px, 95vw);
  /* PAS de background ni de backdrop-filter ici — déportés sur ::before
     pour ne pas créer de containing block pour position:fixed. */
  background: transparent;
  box-shadow:
    0 -2px 60px  rgba(0, 0, 0, 0.35),
    0 40px 80px  rgba(0, 0, 0, 0.40);
  border-radius: 10px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  color: var(--ink-1);
}
/* Couche blur + fond blanc translucide. Posée en ::before absolu,
   inset 0, derrière le contenu (z-index:-1). Le backdrop-filter
   flou ce qui est PHYSIQUEMENT derrière la fenêtre (image de fond
   + vignette) AVANT que la couche blanche 90% ne soit appliquée
   → le blur reste visible à travers la translucidité.
   v60.1 : `border-radius: inherit` ajouté — bug WebKit/iOS connu où
   un enfant avec backdrop-filter n'est PAS clippé aux coins arrondis
   du parent (même avec overflow:hidden). Donner les mêmes arrondis
   au pseudo règle le problème côté Safari mobile sans rien casser
   ailleurs. */
.window::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  border-radius: inherit;
  background: rgba(255, 255, 255, var(--win-opacity));
  backdrop-filter: blur(var(--win-blur));
  -webkit-backdrop-filter: blur(var(--win-blur));   /* Safari */
}

.window-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 32px clamp(18px, 2.2vw, 30px) 28px;
}
/* Scrollbar fine, ink-12. */
.window-scroll::-webkit-scrollbar { width: 10px; }
.window-scroll::-webkit-scrollbar-thumb {
  background: var(--ink-12);
  border-radius: 10px;
  border: 3px solid transparent;
  background-clip: padding-box;
}


/* === SCREENS (intro / player) =============================== */
.screen {
  display: flex;
  flex-direction: column;
}
.screen--intro {
  gap: 0;
}
.screen--player {
  gap: 0;
}


/* ============================================================
   ÉTAT VIDE : description + dropzone + FAQ
   ============================================================ */
/* === Baseline style site Climax (deux lignes en italique) =========
   Ligne 1 : capitales BOLD italique.
   Ligne 2 : capitales REGULAR italique (sans gras).
   Lignes serrées (line-height 1.05) et alignées à droite, comme sur
   les sous-titres de sections du site Climax. */
.home-baseline {
  margin: 4px 0 28px;
  text-align: right;
  color: var(--ink-1);
  font-family: 'Montserrat', sans-serif;
  font-size: clamp(18px, 2.1vw, 24px);
  line-height: 1.05;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  /* font-style positionné sur chaque ligne individuellement (ligne 1
     italique, ligne 2 droite) — pas d'héritage à override. */
}
.home-baseline-1 {
  font-weight: 700;             /* gras */
  font-style: italic;           /* la 1ʳᵉ ligne EST en italique */
  margin: 0;
}
.home-baseline-2 {
  font-weight: 300;             /* light, sans gras */
  font-style: normal;           /* la 2ᵉ ligne N'EST PAS en italique */
  margin: 0;
  /* v50 : -25% par rapport à la ligne 1 (demande JC du 2026-06-04). */
  font-size: 0.75em;
}

/* Ancien style (compat). Non utilisé sur la home. */
.home-desc, .home-sub { display: none; }


/* === Dropzone (commune accueil / toolbar) =================== */
/* Variante .big  = bloc d'accueil (fond clair).
   Variante .slim = bandeau toolbar (fond noir inversé).

   La bordure est émulée par 4 background-gradients (un par côté) pour
   contrôler finement la taille des tirets — `border-style: dashed`
   du navigateur produit des dashes ~7-8px trop espacés. Ici :
     - dash 4px / gap 4px (pattern régulier « petits tirets-pointillés »)
     - couleur pilotée par --dz-stroke (override sur .slim pour blanc).
   Le background-color reste séparé (rempli au hover). */
.dropzone {
  --dz-stroke: var(--ink-40);
  --dz-stroke-hover: var(--ink-1);
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  cursor: pointer;
  font: inherit;
  color: var(--ink-80);
  border: none;
  border-radius: 2px;
  background-color: transparent;
  background-image:
    linear-gradient(to right,  var(--dz-stroke) 50%, transparent 50%),
    linear-gradient(to right,  var(--dz-stroke) 50%, transparent 50%),
    linear-gradient(to bottom, var(--dz-stroke) 50%, transparent 50%),
    linear-gradient(to bottom, var(--dz-stroke) 50%, transparent 50%);
  background-position: top, bottom, left, right;
  background-repeat: repeat-x, repeat-x, repeat-y, repeat-y;
  background-size: 8px 1px, 8px 1px, 1px 8px, 1px 8px;
  transition: background-color 0.2s, background-image 0.2s, transform 0.15s;
  user-select: none;
}
.dropzone.big {
  flex-direction: row;            /* SVG à gauche, texte à droite */
  gap: 20px;
  padding: 36px 32px;
  /* Centrée, largeur modérée pour qu'elle ne s'étale pas sur toute
     la fenêtre. La toolbar (état chargé) reste full-width via .slim. */
  max-width: 620px;
  margin: 0 auto;
  /* v50/v56 : fond gris clair OPAQUE au repos (l'ancien ink-07 était
     translucide et laissait apparaître l'image de fond derrière le
     panneau translucide). Le hover bascule en orange via
     .dropzone:hover plus bas. Demande JC du 2026-06-04. */
  background-color: var(--dz-rest-bg);
}
.dropzone.slim { padding: 16px 18px; }

/* Bloc texte de la dropzone big (label + sub empilés à droite du SVG) */
.dropzone-text {
  display: flex;
  flex-direction: column;
  gap: 4px;
  text-align: left;
  min-width: 0;
}
.dropzone:hover,
.dropzone.is-hover {
  /* v51.1 : hover orange plus visible (0.18 → 0.32). Demande JC. */
  background-color: rgba(200, 138, 76, 0.32);
  --dz-stroke-hover: rgba(200, 138, 76, 0.9);  /* contour orange chaud */
  background-image:
    linear-gradient(to right,  var(--dz-stroke-hover) 50%, transparent 50%),
    linear-gradient(to right,  var(--dz-stroke-hover) 50%, transparent 50%),
    linear-gradient(to bottom, var(--dz-stroke-hover) 50%, transparent 50%),
    linear-gradient(to bottom, var(--dz-stroke-hover) 50%, transparent 50%);
}
/* Conteneur de l'icône WAV (sans cercle, juste un wrapper pour
   centrer le SVG). Taille doublée par rapport à la version
   précédente, suite à la demande du brief. */
.dropzone-icon {
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
.dropzone-icon img {
  width: 40px;          /* doublé (était 20 px) */
  height: 40px;
  display: block;
}
/* Slim : sur fond noir, on inverse pour avoir l'icône en blanc. */
.dropzone.slim .dropzone-icon img {
  width: 32px;          /* doublé (était 16 px) */
  height: 32px;
  filter: invert(1);
}
.dropzone-label {
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 12.5px;
  font-weight: 600;
}
.dropzone-sub {
  font-size: 13px;
  color: var(--ink-40);
  letter-spacing: 0;
  text-transform: none;
}


/* === FAQ : accordéon léger ==================================
   Titre centré + picto VU mètre pour le clin d'œil mastering.
   Wrapper centré horizontalement, largeur modérée. */
.faq {
  margin: 38px auto 0;
  max-width: 720px;
  border-top: 1px solid var(--hair);
  padding-top: 22px;
}
.faq-title {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 15px;             /* titre plus gros qu'avant (12 → 15) */
  font-weight: 600;
  color: var(--ink-1);
  margin: 0 0 18px;
  text-align: center;
}
.faq-title-icon {
  height: 28px;
  width: auto;
  flex-shrink: 0;
  display: block;
  /* Le SVG est en noir plein ; un léger filter d'opacité pour
     l'harmoniser avec le titre (couleur d'encre, pas dur noir). */
  opacity: 0.85;
}
.faq-list { list-style: none; margin: 0; padding: 0; }
.faq-item { border-bottom: 1px solid var(--hair); transition: background 0.2s; }
.faq-item:hover { background: var(--accent-bg-sub); }   /* hover orange dilué */
.faq-item.open { background: var(--accent-bg); }        /* ouvert : un peu plus marqué */

.faq-q {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  background: none;
  border: none;
  cursor: pointer;
  font: inherit;
  text-align: left;
  padding: 16px 8px;
  color: var(--ink-1);
  font-weight: 500;
  font-size: 15px;
  transition: color 0.15s;
}
.faq-caret {
  color: var(--ink-40);
  transition: transform 0.25s;
  flex: 0 0 auto;
}
.faq-item.open .faq-caret { transform: rotate(180deg); }

/* Transition grid-template-rows 0fr → 1fr : un classique CSS-only
   pour animer la hauteur d'un contenu inconnu sans JS. */
.faq-a-wrap {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.3s ease;
}
.faq-item.open .faq-a-wrap { grid-template-rows: 1fr; }

.faq-a {
  overflow: hidden;
  margin: 0;
  color: var(--ink-55);
  font-size: 14px;
  line-height: 1.6;
  max-width: 64ch;
}
.faq-item.open .faq-a { padding-bottom: 16px; }

.faq-a p { margin: 0 0 10px; }
.faq-a p:last-child { margin-bottom: 0; }
.faq-a strong { color: var(--ink-1); font-weight: 600; }
.faq-a a {
  color: var(--ink-1);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-color: var(--ink-40);
}
.faq-a a:hover { text-decoration-color: var(--ink-1); }


/* ============================================================
   ÉTAT CHARGÉ : toolbar + tracklist
   ============================================================ */
.tracklist-wrapper {
  display: flex;
  flex-direction: column;
  gap: 18px;
}


/* === Toolbar : slim dropzone (inverted) + Export + Vider ==== */
.toolbar {
  display: flex;
  gap: 14px;
  align-items: stretch;
  flex-wrap: wrap;
}
/* Slim dropzone de la toolbar.
   v50.1 : alignée sur le look de la dropzone d'accueil (fond gris clair,
   dashes ink-40, hover orange) — demande JC.
   v56  : fond opaque (--dz-rest-bg) au lieu de translucide.
   Hover : la règle générique .dropzone:hover est battue par la
   spécificité de .toolbar .dropzone.slim (0,3,0 vs 0,2,0), donc on
   doit RÉPÉTER ici le bg orange avec la même spécificité +pseudo. */
.toolbar .dropzone.slim {
  flex: 1 1 280px;
  background-color: var(--dz-rest-bg);
}
.toolbar .dropzone.slim:hover,
.toolbar .dropzone.slim.is-hover {
  background-color: rgba(200, 138, 76, 0.32);
}
/* Icône slim : on annule l'invert (qui servait quand le fond était
   noir) pour garder le picto sombre sur le nouveau fond clair. */
.toolbar .dropzone.slim .dropzone-icon img {
  filter: none;
}
.toolbar .dropzone.slim .dropzone-plus {
  border-color: var(--ink-40);
  color: var(--ink-1);
}

.toolbar-actions {
  display: flex;
  gap: 10px;
  align-items: stretch;
}

/* Boutons « ghost » blancs (Export, Vider la liste). Style strictement
   identique pour les deux — c'est volontaire (cf. handoff §Loaded). */
.ghostbtn {
  font: inherit;
  cursor: pointer;
  text-transform: uppercase;
  letter-spacing: 0.10em;
  font-size: 11.5px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
  background: none;
  border: 1px solid var(--ink-12);
  color: var(--ink-80);
  padding: 0 18px;
  border-radius: 2px;
  transition: border-color 0.2s, background 0.2s, color 0.2s;
  min-height: 48px;          /* aligné sur slim dropzone */
}
.ghostbtn:hover,
.ghostbtn.is-open {
  border-color: var(--accent-border);
  background: var(--accent-bg);
  color: var(--ink-1);
}
.ghostbtn svg {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
}


/* === Tracklist Proposal B « Lignes dépliantes » ============== */
.blist {
  list-style: none;
  margin: 0;
  padding: 0;
}
.bitem {
  border-bottom: 1px solid var(--hair);
  /* ⚠ Pas de `contain: paint` ici — il crée un containing block pour
     position:fixed, ce qui clippe le tooltip LUFS dans la ligne au
     lieu de le laisser sortir au-dessus. La perf n'en a plus besoin
     depuis qu'on a retiré le backdrop-filter de la fenêtre. */
}
.bitem.is-current .brow {
  background: var(--accent-bg);
  box-shadow: inset 3px 0 0 var(--accent-bar);
}

/* Grille de la ligne :
     # | play | titre | format | LUFS Int. | Level Max | actions | trash
   Les colonnes de mesure sont top-alignées (align-self: start) pour
   que leur label reste sur la même ligne horizontale d'une mesure
   à l'autre, peu importe leur nombre de sous-lignes. */
.brow {
  display: grid;
  grid-template-columns: 36px 28px minmax(180px, 1fr) 130px 116px 130px auto 28px;
  align-items: center;
  gap: 16px;
  cursor: pointer;
  padding: var(--row-pad) 6px;
  transition: background 0.15s;
}
.brow:hover { background: var(--ink-07); }
/* Pas de filigrane sur la source pendant le drag : le ghost du curseur
   (snapshot navigateur de la ligne) suit le pointeur et montre
   clairement ce qu'on déplace. La ligne source reste donc à pleine
   opacité — on garde juste l'indicateur d'insertion sur la cible. */
.bitem.drop-before .brow { box-shadow: inset 0 2px 0 0 var(--ink-1); }
.bitem.drop-after  .brow { box-shadow: inset 0 -2px 0 0 var(--ink-1); }

/* # + drag handle. La cellule a 2 enfants empilés (num-text + handle).
   Au repos : le numéro est visible, la poignée est invisible.
   Au survol DE LA LIGNE : le numéro s'efface, la poignée apparaît
   sous forme de 6 points (motif iOS reorder) — affordance claire
   qu'on peut saisir la ligne pour la déplacer. */
.b-n {
  font-variant-numeric: tabular-nums;
  color: var(--ink-40);
  font-size: 13px;
  position: relative;
  cursor: grab;
  user-select: none;
  display: flex;
  align-items: center;
  justify-content: center;
}
.b-n:active { cursor: grabbing; }
.b-n-text {
  transition: opacity 0.15s;
}
.b-n-handle {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s;
}
.b-n .drag-handle {
  width: 16px;
  height: 16px;
  color: var(--ink-55);
}
/* Affichage des dots de drag : seulement au survol DE LA CELLULE NUMÉRO
   (pas de toute la ligne). Le reste du temps, le numéro est visible —
   on ne perd pas l'info de position dans la liste. */
.b-n:hover .b-n-text   { opacity: 0; }
.b-n:hover .b-n-handle { opacity: 1; pointer-events: auto; }


/* Bouton suppression (poubelle) en bout de ligne à droite. Visible en
   permanence en discret (ink-40), passe au rouge sobre au hover. */
.track-delete {
  background: none;
  border: none;
  padding: 4px;
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--ink-40);
  border-radius: 3px;
  opacity: 0.55;
  transition: opacity 0.15s, color 0.15s, background 0.15s;
}
.brow:hover .track-delete { opacity: 0.75; }
.track-delete:hover {
  opacity: 1;
  color: #b04540;
  background: rgba(176, 69, 64, 0.08);
}
.track-delete svg { width: 16px; height: 16px; }

/* Play */
.b-play {
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
  color: var(--ink-40);
  display: grid;
  place-items: center;
  transition: color 0.15s;
}
.b-play:hover { color: var(--ink-1); }
.bitem.is-current .b-play { color: var(--ink-1); }

/* Titre */
.b-title { min-width: 0; }
.t-title {
  font-weight: 600;
  font-size: var(--row-font);
  color: var(--ink-1);
  display: flex;
  align-items: baseline;
}
.t-dur {
  font-weight: 400;
  color: var(--ink-40);
  font-variant-numeric: tabular-nums;
  font-size: 0.92em;
  margin-left: 0.35em;
}
.t-file {
  display: block;
  font-size: 11.5px;
  color: var(--ink-40);
  margin-top: 2px;
  word-break: break-all;
}

/* Cellules métriques (FORMAT / LUFS INT. / LEVEL MAX) */
.b-metric {
  display: flex;
  flex-direction: column;
  align-self: start;          /* labels alignés sur même baseline */
  font-variant-numeric: tabular-nums;
  min-width: 0;
}
.b-metric em {
  font-style: normal;
  font-size: 9.5px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ink-40);
  white-space: nowrap;
}
.b-metric .b-val {
  font-size: 15px;
  font-weight: 700;
  color: var(--ink-1);
  white-space: nowrap;
}
.b-metric .b-sub {
  font-size: 12.5px;       /* dBFS plus visible (était 11.5px) */
  color: var(--ink-40);
  white-space: nowrap;
}
.b-metric.small .b-val {
  font-size: 13px;
  font-weight: 500;
}

/* Cellule « format » : valeur sample-rate/bit puis sub-line canaux */
.b-format { /* utilise les styles .b-metric.small */ }


/* === Tooltip LUFS (info-bubble) =============================
   Le hover est posé sur la cellule entière (.b-metric.b-lufs.lufs-hover),
   pas seulement sur la valeur. align-self: stretch étend la cellule sur
   toute la hauteur de la ligne → on peut survoler le label au-dessus,
   la valeur, et l'espace vide en-dessous : la bulle apparaît dans tous
   les cas. Curseur normal (pas de `help` cursor avec un ?). */
.lufs-hover {
  position: relative;
  outline: none;
}
.b-metric.b-lufs.lufs-hover { align-self: stretch; }

/* Tooltip en position FIXED : sort du contexte de la window (qui a
   overflow:hidden + border-radius), donc plus de clipping. Les
   coordonnées --tx/--ty sont calculées en JS au hover sur le cell.
   z-index très haut pour passer au-dessus du player et de la
   fenêtre. */
.lufs-tip {
  position: fixed;
  left: var(--tx, 50%);
  top:  var(--ty, 50%);
  transform: translate(-50%, calc(-100% - 9px)) translateY(4px);
  display: flex;
  flex-direction: column;
  gap: 5px;
  background: var(--ink-1);
  color: #fff;
  padding: 11px 14px;
  border-radius: 7px;
  width: max-content;
  min-width: 168px;
  z-index: 9999;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.16s, transform 0.16s;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.32);
}
.lufs-tip::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-top-color: var(--ink-1);
}
.lufs-hover:hover .lufs-tip,
.lufs-hover:focus-visible .lufs-tip {
  opacity: 1;
  transform: translate(-50%, calc(-100% - 9px)) translateY(0);
}
.lufs-tip-head {
  /* v50.1 : titre agrandi (9 → 12px) et passé en orange chaud
     (cf. --accent) pour mieux ressortir sur le fond noir.
     Demande JC du 2026-06-04. */
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: rgba(200, 138, 76, 1);
  font-weight: 700;
}
.lufs-tip-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 18px;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}
.lufs-tip-row i {
  font-style: normal;
  color: rgba(255, 255, 255, 0.6);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.lufs-tip-row b { font-weight: 600; }
.lufs-tip-row.sep {
  margin-top: 2px;
  padding-top: 7px;
  border-top: 1px solid rgba(255, 255, 255, 0.16);
}


/* === Actions de ligne (Éditer + Plus d'infos / Replier) ==== */
.rowactions {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 4px;
  justify-self: end;
}
.rowactions .ghostbtn {
  justify-content: center;
  padding: 5px 9px;
  font-size: 10.5px;
  min-height: 0;
}
/* v50 : sur la ligne en lecture (fond orange), les boutons orange
   (Metadata dans la ligne + Éditer les métadonnées dans le panneau
   déplié) prennent un cadre orange + un fond orange à peine plus
   marqué que la ligne. C'est le cadre qui fait la lisibilité.
   v51.1 : contraste encore baissé (0.22 → 0.10) — le hover, lui,
   conserve la teinte var(--accent-bg) = 0.18 (cf. .ghostbtn:hover
   plus haut) pour donner un retour visuel au survol. Demande JC. */
.bitem.is-current .rowactions .ghostbtn,
.bitem.is-current .bmeta-edit-btn {
  border-color: var(--accent-border);
  background: rgba(200, 138, 76, 0.10);
  color: var(--ink-1);
}
.pencil { display: inline-flex; }
.chev {
  display: inline-flex;
  transition: transform 0.25s;
}
.chev.up { transform: rotate(180deg); }


/* === Détail déplié sous la ligne =========================== */
/* Animation grid-template-rows : permet d'animer une hauteur
   inconnue sans JS, identique à la FAQ d'accueil. */
.bdetail {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.32s ease;
  background: var(--accent-bg-sub);
}
.bdetail.show { grid-template-rows: 1fr; }
.bdetail-inner { overflow: hidden; padding: 0 8px; }
.bdetail.show .bdetail-inner { padding: 18px 8px 22px; }

/* === Panneau Metadata : 7 champs éditables + bouton Éditer ===
   Le panneau remplace l'ancien « Plus d'infos » truffé de mesures
   redondantes. Affiche uniquement les champs éditables (ISRC en
   tête, quel que soit le format source). Le bouton « Éditer les
   métadonnées » est placé à côté de la liste : un clic swap le
   contenu vers le formulaire d'édition. */
.bmeta {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: start;
  gap: 18px 24px;
}
.bmeta-grid {
  margin: 0;
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 8px 24px;
  min-width: 0;
}
.bmeta-grid dt {
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-55);
  white-space: nowrap;
  padding-top: 3px;
  font-weight: 600;
}
.bmeta-grid dd {
  margin: 0;
  font-size: 14px;
  color: var(--ink-1);
  font-weight: 500;
  word-break: break-word;
  min-width: 0;
}
.bmeta-grid dd.is-empty { color: var(--ink-40); font-weight: 400; }
/* ISRC en première position : on l'étiquette / la valeur sont plus appuyées
   pour bien la sortir du lot (« avec en priorité le code ISRC »). */
.bmeta-grid .bmeta-isrc-label { color: var(--ink-1); }
.bmeta-grid .bmeta-isrc-value {
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
  font-weight: 600;
}
.bmeta-actions {
  display: flex;
  align-items: flex-start;
}
.bmeta-actions .ghostbtn {
  white-space: nowrap;
  min-height: 0;
  padding: 8px 14px;
}
.bmeta-empty {
  font-size: 13px;
  color: var(--ink-55);
  font-style: italic;
  padding: 6px 0;
}

/* Petit séparateur tête de bloc (titre « Métadonnées éditables »). */
.bmeta-head {
  grid-column: 1 / -1;
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-55);
  margin-bottom: 4px;
  font-weight: 600;
}

/* Anciens styles .bformat / .bformat-cell retirés : le panneau ne montre
   plus de résumé mesures/format (déjà visible sur la ligne). */


/* Section / dt-dd dans le panneau dépliable (BWF, CART, etc.) */
.bdetail-section {
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-55);
  margin: 14px 0 10px;
  padding-top: 12px;
  border-top: 1px solid var(--hair);
}
.bdetail-section:first-child {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}
.bdetail-body {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 6px 24px;
  font-size: 12px;
}
.bdetail-body dt {
  color: var(--ink-55);
  white-space: nowrap;
  padding-top: 2px;
}
.bdetail-body dd {
  margin: 0;
  color: var(--ink-1);
  line-height: 1.45;
  word-break: break-word;
}

/* Bloc 2 colonnes pour LIST/INFO + ID3v2 (auto-fit → 1 col mobile) */
.btags-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 18px 32px;
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--hair);
}
.btags-col { min-width: 0; }
.btags-col .bdetail-section {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
  margin-bottom: 10px;
}

/* Données brutes & diagnostic (XML, chunks…) */
.braw {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--hair);
}
.braw-summary {
  list-style: none;
  cursor: pointer;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-55);
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 0;
  user-select: none;
  transition: color 0.15s;
}
.braw-summary::-webkit-details-marker { display: none; }
.braw-summary:hover { color: var(--ink-1); }
.braw-summary::after {
  content: '+';
  font-size: 14px;
  font-weight: 300;
  margin-left: auto;
  color: var(--ink-40);
  transition: transform 0.2s;
  line-height: 1;
}
.braw[open] > .braw-summary::after {
  transform: rotate(45deg);
  color: var(--ink-1);
}
.raw-xml {
  white-space: pre-wrap;
  word-break: break-all;
  font-size: 11px;
  max-height: 220px;
  overflow: auto;
  margin: 8px 0 0;
  font-family: 'Courier New', monospace;
  color: var(--ink-80);
  background: rgba(255, 255, 255, 0.5);
  padding: 8px 10px;
  border-radius: 3px;
  border: 1px solid var(--ink-12);
}


/* === Panneau d'édition des métadonnées ======================
   Le padding est fourni par .bdetail-inner — pas besoin de doubler. */
.bedit {
  /* pas de padding/background propres : on s'inscrit dans .bdetail-inner */
}
.bedit-header {
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-55);
  margin-bottom: 16px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--hair);
  font-weight: 600;
}
.bedit-grid {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 10px 18px;
  align-items: center;
  margin-bottom: 14px;
}
.edit-label {
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-55);
}
.edit-input {
  background: rgba(255, 255, 255, 0.85);
  border: 1px solid var(--ink-12);
  color: var(--ink-1);
  font-family: inherit;
  font-size: 13px;
  padding: 8px 12px;
  border-radius: 2px;
  width: 100%;
  outline: none;
  transition: border-color 0.15s, background 0.15s;
}
.edit-input:focus {
  border-color: var(--ink-1);
  background: #fff;
}
.edit-input.is-invalid {
  border-color: #b04540;
  background: rgba(176, 69, 64, 0.06);
}
.bedit-hint {
  font-size: 11px;
  margin: -6px 0 14px;
  min-height: 14px;
  letter-spacing: 0.02em;
  color: var(--ink-55);
}
.bedit-hint.is-ok    { color: #2e7a4a; }
.bedit-hint.is-error { color: #b04540; }

.bedit-info {
  font-size: 11px;
  line-height: 1.55;
  color: var(--ink-55);
  padding: 10px 12px;
  background: rgba(255, 255, 255, 0.55);
  border-left: 2px solid var(--ink-40);
  border-radius: 2px;
  margin-bottom: 16px;
}
.bedit-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.solidbtn {
  font: inherit;
  cursor: pointer;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 11.5px;
  font-weight: 600;
  background: var(--ink-1);
  color: #fff;
  border: 1px solid var(--ink-1);
  padding: 9px 18px;
  border-radius: 2px;
  transition: opacity 0.2s;
}
.solidbtn:hover:not(:disabled) { opacity: 0.82; }
.solidbtn:disabled {
  background: var(--ink-12);
  border-color: var(--ink-12);
  color: var(--ink-40);
  cursor: not-allowed;
}


/* ============================================================
   LOADING OVERLAY
   ============================================================ */
.loading-overlay {
  position: fixed;
  inset: 0;
  background: rgba(10, 9, 8, 0.78);
  backdrop-filter: blur(10px) saturate(1.1);
  -webkit-backdrop-filter: blur(10px) saturate(1.1);
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: tools-fade-in 0.2s ease-out;
}
.loading-overlay[hidden] { display: none; }
@keyframes tools-fade-in { from { opacity: 0; } to { opacity: 1; } }

.loading-content {
  text-align: center;
  max-width: 400px;
  padding: 24px;
  color: #fff;
}
.loading-spinner {
  width: 42px;
  height: 42px;
  border: 2px solid rgba(255, 255, 255, 0.15);
  border-top-color: rgba(255, 255, 255, 0.9);
  border-radius: 50%;
  margin: 0 auto 24px;
  animation: tools-spin 0.9s linear infinite;
}
@keyframes tools-spin { to { transform: rotate(360deg); } }
.loading-text {
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.85);
  font-weight: 500;
}


/* ============================================================
   FOOTBAR
   ============================================================ */
.footbar {
  position: relative;
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 9px 0 12px;
  font-size: 10.5px;
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.6);
}
.foot-by { color: rgba(255, 255, 255, 0.4); }


/* ============================================================
   PLAYER AUDIO — BARRE DE TRANSPORT
   ------------------------------------------------------------
   Le player est invisible tant qu'aucune track n'est mise en
   lecture (.stage.has-player désactivé). Au premier play :
     - .stage gagne la classe .has-player
     - la fenêtre rétrécit (cf. .window transition)
     - le player fade-in + slide-up dans la même animation
   Les deux transitions partagent la même durée + easing pour
   rester synchronisées à l'œil.

   Structure HTML inchangée (onglets MODERN/VINTAGE, contrôles,
   VU mètres, waveform, LCD). Le mode MODERN reçoit la peau claire
   (frosted blanc cohérent avec la fenêtre) — le mode VINTAGE
   garde son look TASCAM CD-601 (le sombre = identité « vieux
   matos », volontaire).
   ============================================================ */

.player-transport {
  position: relative;
  z-index: 4;
  width: min(1320px, 95vw);
  background: rgba(255, 255, 255, calc(var(--win-opacity) * 0.96));
  /* backdrop-filter retiré (perf — cf. note sur .window) */
  border-radius: 10px;
  padding: 8px 16px;
  display: grid;
  /*  Colonne controls fixée à 180 px (juste la largeur des 4 boutons
      + le label en dessous, ellipsé si trop long) → la waveform prend
      TOUT l'espace restant entre les contrôles et le VU.
      Le VU garde une largeur fixe pour rester lisible.
      Le toggle Modern/Vintage est positionné en absolute (dépasse à
      gauche du frame), donc plus de colonne « tabs » dans la grille. */
  grid-template-columns: 180px 1fr 300px;
  grid-template-areas: "controls-stack wave meters";
  align-items: center;
  gap: 10px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.35);
  color: var(--ink-1);

  /* État caché : 0 hauteur (le player ne réserve pas d'espace au-dessus
     du footer tant qu'aucune track ne joue). Animation : max-height
     synchronisée avec la transition de hauteur de la fenêtre.
     ⚠ Pas d'overflow:hidden : le toggle Modern/Vintage est positionné
     en absolute et dépasse à gauche, donc il faut le laisser visible. */
  max-height: 0;
  margin: 0 auto;
  opacity: 0;
  visibility: hidden;
  transform: translateY(28px);
  pointer-events: none;
  transition:
    max-height  0.45s cubic-bezier(0.16, 1, 0.3, 1),
    margin-top  0.45s cubic-bezier(0.16, 1, 0.3, 1),
    opacity     0.45s cubic-bezier(0.16, 1, 0.3, 1),
    transform   0.45s cubic-bezier(0.16, 1, 0.3, 1),
    visibility  0s linear 0.45s;
}
.stage.has-player .player-transport {
  /* max-height monté de 220 → 320 px : laisse de la marge pour le mode
     vintage (≈138 px) sans risquer un clip si un padding/border change.
     flex-shrink: 0 : protège contre le serrage du flex parent (.stage)
     sur les petits viewports — le player garde toujours sa taille
     naturelle. */
  max-height: 320px;
  flex-shrink: 0;
  margin: 14px auto 0;
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
  transition:
    max-height  0.45s cubic-bezier(0.16, 1, 0.3, 1),
    margin-top  0.45s cubic-bezier(0.16, 1, 0.3, 1),
    opacity     0.45s cubic-bezier(0.16, 1, 0.3, 1),
    transform   0.45s cubic-bezier(0.16, 1, 0.3, 1),
    visibility  0s linear 0s;
}

/* Aires (mode MODERN) — plus de colonne tabs (toggle en absolute) */
.player-transport:not(.vintage) .pt-controls-stack { grid-area: controls-stack; }
.player-transport:not(.vintage) .pt-info           { grid-area: wave; }
.player-transport:not(.vintage) .pt-meters         { grid-area: meters; }

.player-transport:not(.vintage) .pt-controls-stack {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  min-width: 0;
  width: 100%;             /* remplit sa colonne grid */
}
.player-transport:not(.vintage) .pt-track-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-1);       /* noir plein (numéro + titre du morceau) */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 100%;             /* indispensable pour que ellipsis fonctionne */
  max-width: 100%;
  letter-spacing: 0.02em;
}


/* === Toggle Modern / Vintage (tab graphique qui dépasse à gauche) =
   Un seul bouton qui dépasse du player vers la gauche. Au clic, il
   bascule le mode et l'icône change pour refléter le mode courant
   (VU mètre en modern, waveform en vintage).
   Le bord DROIT du tab est exactement aligné sur le bord GAUCHE du
   player (left: -width), donc pas de chevauchement transparent. */
.pt-mode-toggle {
  --pt-mode-w: 28px;
  position: absolute;
  left: calc(var(--pt-mode-w) * -1);   /* bord droit collé au bord gauche du player */
  top: 50%;
  transform: translateY(-50%);
  width: var(--pt-mode-w);
  height: 36px;                        /* discret : ~moitié des 60 px d'origine */
  border: none;
  border-radius: 5px 0 0 5px;          /* arrondi côté gauche uniquement */
  background: rgba(255, 255, 255, calc(var(--win-opacity) * 0.96));
  box-shadow: -4px 0 12px rgba(0, 0, 0, 0.18);
  cursor: pointer;
  display: grid;
  place-items: center;
  padding: 0;
  z-index: 5;
}

/* Picto rendu via mask-image : couleur pilotée par background-color
   (donc on peut le passer en orange au hover sans toucher au SVG).
   ⚠ Chemin : depuis le fichier CSS (tools/css/style.css), on remonte
   d'un cran avec « ../images/picto/X.svg ». Les URLs dans une custom
   property se résolvent par rapport au CSS qui la consomme. */
.pt-mode-icon {
  width: 22px;
  height: 22px;
  display: block;
  pointer-events: none;
  background-color: var(--ink-1);
  -webkit-mask-image: var(--mode-icon, url("../images/picto/vumetre.svg"));
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: contain;
          mask-image: var(--mode-icon, url("../images/picto/vumetre.svg"));
          mask-repeat: no-repeat;
          mask-position: center;
          mask-size: contain;
  transition: background-color 0.15s;
}
.pt-mode-toggle:hover .pt-mode-icon {
  background-color: rgba(200, 138, 76, 1);   /* orange chaud (cf. --accent) */
}

/* Mode vintage : tab assorti au look TASCAM sombre. Picto en blanc
   cassé sur fond sombre, orange chaud au hover (même couleur). */
.player-transport.vintage .pt-mode-toggle {
  background: #1a1a1a;
  box-shadow: -4px 0 12px rgba(0, 0, 0, 0.45);
}
.player-transport.vintage .pt-mode-icon {
  background-color: rgba(245, 240, 225, 0.85);
}
.player-transport.vintage .pt-mode-toggle:hover .pt-mode-icon {
  background-color: rgba(200, 138, 76, 1);
}


/* === Boutons de transport (cercles sobres) ================== */
.pt-controls {
  display: flex;
  align-items: center;
  gap: 6px;
}
.pt-btn {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid var(--ink-12);
  background: none;
  color: var(--ink-80);
  cursor: pointer;
  font-size: 13px;
  font-family: inherit;
  display: grid;
  place-items: center;
  padding: 0;
  flex-shrink: 0;
  transition: border-color 0.2s, background 0.2s, color 0.2s, transform 0.1s;
}
.pt-btn:hover {
  border-color: var(--ink-1);
  color: var(--ink-1);
}
.pt-btn:active { transform: scale(0.94); }
/* Play : noir solide, glyphe blanc */
.pt-play {
  background: var(--ink-1);
  color: #fff;
  border-color: var(--ink-1);
}
.pt-play:hover {
  background: rgba(20, 16, 12, 0.85);
  color: #fff;
  border-color: var(--ink-1);
}

.pt-track-label {
  font-size: 13px;
  color: var(--ink-80);
  letter-spacing: 0.01em;
  line-height: 1.2;
}


/* === VU mètres ============================================== */
.pt-meters {
  display: flex;
  justify-content: center;
  gap: 24px;
  align-items: flex-end;
}
.pt-vu {
  width: 140px;
  height: 140px;
  display: block;
  flex-shrink: 0;
}
.player-transport:not(.vintage) .pt-vu { display: none; }


/* === VU digital (mode MODERN, clair) ========================
   v15.8 : bars 9→14 px (+50% supplémentaires). Bien lisibles
   maintenant qu'on a la place dans la colonne 300 px. */
.pt-vu-digital {
  --vud-color-low:  var(--ink-40);
  --vud-color-high: var(--ink-1);
  --vud-color-clip: #b04540;
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
}
.player-transport.vintage .pt-vu-digital { display: none; }

.vud-row { display: flex; align-items: center; gap: 10px; }
.vud-label {
  font-family: 'Montserrat', sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: var(--ink-55);
  width: 10px;
  text-align: center;
}
.vud-track {
  position: relative;
  flex: 1 1 auto;
  height: 14px;            /* +50% supplémentaires (était 9 px) */
  background: var(--ink-12);
  border-radius: 7px;
  overflow: hidden;
}
.vud-fill {
  position: absolute;
  inset: 0;
  background: linear-gradient(to right,
    var(--vud-color-low)  0%,
    var(--vud-color-low)  var(--vud-green-pct, 87.5%),
    var(--vud-color-high) var(--vud-green-pct, 87.5%),
    var(--vud-color-high) 100%
  );
  --vu-pct: 0%;
  clip-path: inset(0 calc(100% - var(--vu-pct)) 0 0);
  transition: clip-path 40ms linear;
  will-change: clip-path;
}
.vud-clip {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--ink-12);
  flex-shrink: 0;
  transition: background 0.12s, box-shadow 0.12s;
}
.vud-clip.is-on {
  background: var(--vud-color-clip);
  box-shadow: 0 0 4px rgba(176, 69, 64, 0.5);
}
.vud-scale {
  position: relative;
  height: 11px;
  margin: 2px 18px 0;
  font-family: 'Montserrat', sans-serif;
  font-size: 8.5px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--ink-40);
}
.vud-tick {
  position: absolute;
  left: var(--p, 0%);
  top: 0;
  white-space: nowrap;
  transform: translateX(-50%);
}
.vud-tick:first-child { transform: translateX(0); }
.vud-tick:last-child  { transform: translateX(-100%); }


/* === Waveform + compteur ==================================== */
.pt-info {
  position: relative;
  min-width: 0;
  width: 100%;
  border-radius: 4px;
  overflow: hidden;
  padding: 6px 0;          /* respiration verticale autour de la waveform */
}
.pt-time-current {
  position: absolute;
  top: 4px;
  right: 6px;
  z-index: 2;
  font-size: 11px;
  font-family: 'Courier New', monospace;
  font-variant-numeric: tabular-nums;
  color: var(--ink-1);
  background: rgba(255, 255, 255, 0.78);
  padding: 2px 7px;
  border-radius: 2px;
  pointer-events: none;
}
.pt-waveform {
  width: 100%;
  height: 72px;          /* prend plus de hauteur dans le player */
  display: block;
  cursor: pointer;
  background: transparent;
}
.pt-waveform:focus-visible {
  outline: 1px solid var(--ink-40);
  outline-offset: 2px;
}


/* LCD (vintage uniquement) : par défaut caché. */
.pt-lcd { display: none; }


/* ============================================================
   MODE VINTAGE — look TASCAM CD-601 mkII (sombre, volontaire)
   ------------------------------------------------------------
   Layout compact, hauteur calée sur les VU mètres (≤ 120 px).
     [ tabs ] [ 2x2 boutons ] [ LCD: titre + compteur + waveform ] [ VU L | VU R ]
   ============================================================ */
.player-transport.vintage {
  display: grid;
  grid-template-columns: auto 1fr auto;
  /* Pas de grid-template-rows fixée : le container s'ajuste à la
     hauteur du plus grand item (les VU vintage = 120 px) + le padding.
     Le toggle Modern/Vintage est en absolute (dépasse à gauche), donc
     plus de colonne « tabs » ici non plus. */
  grid-template-areas: "controls lcd meters";
  gap: 8px 14px;
  padding: 8px 14px;
  background: #1a1a1a;
  color: rgba(245, 240, 225, 0.92);
  border: 1px solid #050505;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.07),
    inset 0 -1px 0 rgba(0, 0, 0, 0.55),
    0 6px 18px rgba(0, 0, 0, 0.5);
  align-items: stretch;
}
/* (Anciens styles .pt-tabs / .pt-tab retirés en v15.13 : remplacés
   par .pt-mode-toggle, un seul bouton-tab graphique en absolute.) */

/* VU mètres : 2 ronds compacts (120 px) côte à côte. La hauteur du player
   se cale sur celle des VU (alignement stretch sur la grille). */
.player-transport.vintage .pt-meters {
  grid-area: meters;
  display: flex;
  flex-direction: row;
  gap: 8px;
  align-items: center;
  margin: 0;
}
.player-transport.vintage .pt-vu {
  width: 120px;
  height: 120px;
}

/* Contrôles en 2 lignes × 2 colonnes (play/stop EN HAUT, prev/next EN
   BAS). Le bloc entier est étiré sur la hauteur de la grille (120 px)
   pour s'aligner visuellement avec le LCD et les VU. */
.player-transport.vintage .pt-controls-stack { display: contents; }
.player-transport.vintage .pt-track-label    { display: none; }
.player-transport.vintage .pt-info           { display: none; }
.player-transport.vintage .pt-controls {
  grid-area: controls;
  display: grid;
  grid-template-columns: 64px 64px;
  grid-template-rows:    1fr 1fr;
  grid-template-areas:
    "play stop"
    "prev next";
  gap: 6px;
  align-self: stretch;     /* prend toute la hauteur du grid-row (= 120 px) */
}
.player-transport.vintage .pt-prev { grid-area: prev; }
.player-transport.vintage .pt-next { grid-area: next; }
.player-transport.vintage .pt-play { grid-area: play; }
.player-transport.vintage .pt-stop { grid-area: stop; }

.player-transport.vintage .pt-btn {
  background: linear-gradient(180deg, #4a4a4a 0%, #2a2a2a 100%);
  border: 1px solid #0a0a0a;
  border-radius: 4px;
  color: rgba(245, 240, 225, 0.92);
  width: 100%;             /* remplit la cellule du sous-grid */
  height: 100%;
  font-size: 13px;
  font-weight: 600;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    inset 0 -1px 0 rgba(0, 0, 0, 0.35),
    0 2px 3px rgba(0, 0, 0, 0.45);
  transition: all 0.08s;
}
.player-transport.vintage .pt-btn:hover {
  background: linear-gradient(180deg, #565656 0%, #353535 100%);
  color: #fff;
}
.player-transport.vintage .pt-btn:active {
  background: linear-gradient(180deg, #2a2a2a 0%, #404040 100%);
  transform: translateY(1px);
}
.player-transport.vintage .pt-play { font-size: 14px; }
.player-transport.vintage .pt-stop { font-size: 13px; }

/* LCD aligné sur la hauteur des VU (120 px via grid-template-rows).
   Padding cohérent avec celui du frame extérieur pour que le contenu
   soit visuellement à la même hauteur que les autres blocs. */
.player-transport.vintage .pt-lcd {
  grid-area: lcd;
  /* Pas de height fixe : le LCD est stretché par align-items: stretch
     du grid container → il prend la hauteur du grid-row (= 120 px, fixée
     par les VU). */
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 8px 14px;       /* identique au padding du frame extérieur */
  background: linear-gradient(180deg, #060606, #141414);
  border: 2px solid #232323;
  border-radius: 4px;
  color: #ffffff;
  text-shadow: 0 0 6px rgba(255, 255, 255, 0.45);
  box-shadow:
    inset 0 2px 4px rgba(0, 0, 0, 0.6),
    inset 0 -1px 0 rgba(0, 0, 0, 0.4);
  overflow: hidden;
  min-width: 0;
}
.lcd-info-row {
  display: flex;
  align-items: baseline;
  gap: 6px;
  padding: 0;
  flex: 0 0 auto;
}
.lcd-digit {
  font-family: 'Doto', 'VT323', 'Share Tech Mono', monospace;
  font-weight: 700;
  font-feature-settings: "tnum" 1;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}
.lcd-track {
  font-size: 16px;
  line-height: 1;
  min-width: 1.6em;
  display: inline-block;
}
.lcd-time {
  font-size: 17px;
  line-height: 1;
  letter-spacing: 0.04em;
}
.lcd-name-wrap {
  flex: 1 1 0;
  min-width: 0;
  overflow: hidden;
}
.lcd-name {
  display: inline-block;
  white-space: nowrap;
  font-size: 17px;
  line-height: 1.1;
  letter-spacing: 0.04em;
  will-change: transform;
}
.lcd-name.is-scrolling {
  padding-right: 3em;
  animation: lcd-marquee var(--scroll-dur, 12s) linear infinite;
}
.lcd-name.is-scrolling::after {
  content: attr(data-text);
  padding-left: 3em;
}
@keyframes lcd-marquee {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
.lcd-waveform-slot {
  flex: 1 1 auto;
  min-height: 32px;
  display: flex;
  align-items: stretch;
}
.lcd-waveform-slot .pt-waveform {
  flex: 1;
  height: 100%;
  width: 100%;
  background: transparent;
}


/* ============================================================
   RESPONSIVE — mobile / portrait
   ------------------------------------------------------------
   - Titre divisé par ~2 pour rentrer dans l'écran
   - Liste : données sur 2 lignes seulement (pas d'effet « cartes »)
   - Player : seulement le mode MODERN (pas de vintage, pas de toggle,
     pas de VU mètre digital), 2 lignes :
       L1 : contrôles + n°/titre track
       L2 : waveform
   - Panneau Metadata : bouton Éditer EN BAS de la liste (pas à droite)
   ============================================================ */
@media (max-width: 880px) {

  /* === Titre géant — divisé par ~2 pour rentrer dans l'écran ===
     v50 : +25% en mobile/portrait (demande JC du 2026-06-04). */
  .bigtitle {
    font-size: clamp(42px, 10vw, 75px);
    transform: translate(-1vw, 0.03em);
  }
  .topbar { padding: 16px 18px 0; }

  /* === Toolbar : on cache les boutons Export + Vider (fonctions
     secondaires, prennent trop de place sur petit écran). La slim
     dropzone (Glissez ou cliquez…) reste seule. */
  .toolbar-actions { display: none; }

  /* === Tracklist : 3 lignes structurées (pas d'effet « carte ») ===
     ┌──── ────────────────────────────────────────┐
     │ [#]  Titre (3:24) · filename                │
     │ [▶]  -9.7 LUFS    +0.4 dBTP                 │
     │      44,1·24 Stéréo  [Metadata▼] [🗑]       │
     └─────────────────────────────────────────────┘
     # en haut à gauche, play en dessous (col fixe 28 px).
     Le contenu prend tout le reste, ligne par ligne. */
  .brow {
    grid-template-columns: 28px minmax(0, 1fr) auto auto;
    grid-template-rows: auto auto auto;
    grid-template-areas:
      "n    title title title"
      "play lufs  lvl   ."
      ".    fmt   acts  trash";
    column-gap: 10px;
    row-gap: 4px;
    padding: 10px 4px;
  }
  .b-n          { grid-area: n;     align-self: start;  padding-top: 2px; }
  .b-play       { grid-area: play;  align-self: start; }
  .b-title      { grid-area: title; align-self: center; min-width: 0; }
  .rowactions   { grid-area: acts;  align-self: center; justify-self: end; }
  .track-delete { grid-area: trash; align-self: center; }
  .brow > .b-format { grid-area: fmt;  align-self: center; }
  .brow > .b-lufs   { grid-area: lufs; align-self: center; }
  .brow > .b-level  { grid-area: lvl;  align-self: center; }

  /* Sur mobile, on garde le pattern desktop : label en haut (em),
     valeur principale, sous-valeur (dBFS pour Level Max, Stéréo pour
     Format). Juste un peu plus serré qu'en desktop pour gagner de la
     hauteur. */
  .brow .b-metric          { font-size: 12px; }
  .brow .b-metric em       { font-size: 9px; letter-spacing: 0.08em; }
  .brow .b-metric .b-val   { font-size: 13px; font-weight: 600; }
  .brow .b-metric .b-sub   { font-size: 11px; }
  .brow .b-lufs   .b-val   { font-weight: 700; }

  /* === Panneau Metadata : bouton Éditer EN BAS =============== */
  .bmeta {
    grid-template-columns: 1fr;
  }
  .bmeta-actions {
    justify-content: flex-start;
  }

  /* === Player : MODERN ONLY (pas de vintage en mobile) =======
     - Force le layout modern même si .vintage est présente
     - Cache le toggle, les VU digital et analogiques, le LCD
     - 2 lignes : (1) controls + n° + titre   (2) waveform
     ⚠ On utilise .player-transport.player-transport (la classe
     répétée) pour battre la specificité des règles desktop
     .player-transport:not(.vintage) (qui sinon repassent en
     flex-direction: column). */
  .pt-mode-toggle { display: none !important; }

  .player-transport.player-transport,
  .player-transport.player-transport.vintage {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
    grid-template-areas:
      "controls-stack"
      "wave";
    gap: 6px 0;
    padding: 8px 12px;
    background: rgba(255, 255, 255, calc(var(--win-opacity) * 0.96));
    color: var(--ink-1);
    border: none;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.35);
  }
  .player-transport.player-transport .pt-meters,
  .player-transport.player-transport .pt-vu,
  .player-transport.player-transport .pt-vu-digital,
  .player-transport.player-transport .pt-lcd {
    display: none !important;
  }

  /* Controls + label : flex row, tout sur UNE ligne. */
  .player-transport.player-transport .pt-controls-stack {
    grid-area: controls-stack;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
    min-width: 0;
    width: 100%;
  }
  .player-transport.player-transport .pt-controls {
    flex: 0 0 auto;
    display: flex;
    flex-direction: row;
    gap: 5px;
    /* Annule le sous-grid 2x2 hérité du mode vintage si la classe
       traînait encore avant le JS forceModern. */
    grid-template-columns: none;
    grid-template-rows: none;
    grid-template-areas: none;
  }
  .player-transport.player-transport .pt-track-label {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 12px;
    font-weight: 600;
    color: var(--ink-1);
    display: block;
  }
  /* Boutons : reset look modern même si .vintage traînait, et un
     poil plus petits pour gagner de la place. */
  .player-transport.player-transport .pt-btn {
    background: none;
    border: 1px solid var(--ink-12);
    border-radius: 50%;
    width: 32px;
    height: 32px;
    color: var(--ink-80);
    box-shadow: none;
    font-size: 12px;
    flex-shrink: 0;     /* ne pas se faire écraser par le label */
  }
  .player-transport.player-transport .pt-btn:hover {
    border-color: var(--ink-1);
    color: var(--ink-1);
    background: none;
  }
  .player-transport.player-transport .pt-play {
    background: var(--ink-1);
    color: #fff;
    border-color: var(--ink-1);
    width: 36px;
    height: 36px;
  }

  /* Waveform : pleine largeur, hauteur réduite */
  .player-transport.player-transport .pt-info {
    grid-area: wave;
    width: 100%;
    padding: 0;
  }
  .pt-waveform { height: 48px; }
}