/* ============================================================
   DDP MAKER — STYLES
   ------------------------------------------------------------
   Même frame cinématographique que ddp-player / wav-inspector
   (photo + vignette + titre fusionné à la fenêtre frosted blanc).
   Les blocs dropzone / FAQ / mention légale / loading-overlay /
   boutons sont repris à l'identique de ddp-player/css/style.css
   (copier-coller volontaire — cf. leur propre avertissement de
   synchronisation). La partie « éditeur » (infos disque, silences,
   liste de pistes réordonnable, bouton de paiement) est propre à
   cette app.
   ============================================================ */

:root {
  --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:        200, 138, 76;
  --accent-bg:     rgba(200, 138, 76, 0.18);
  --accent-bg-sub: rgba(200, 138, 76, 0.10);
  --accent-bar:    rgba(200, 138, 76, 0.95);
  --accent-border: rgba(200, 138, 76, 0.60);

  --win-opacity: 0.95;
  --win-blur:    2px;
  --vignette-intensity: 0.425;  /* réduites de moitié (fond Skyline) */
  --vignette-bottom:    0.46;
  --vignette-top:       0.275;

  --dz-rest-bg: #ebe7e1;

  /* Rouge sobre (erreurs de format, suppression) — même teinte que les
     autres apps satellites (--track-delete hover, etc.) */
  --danger: #b04540;

  /* Pictos du tab Modern/Vintage du player, EMBARQUÉS (data URI) : un
     mask-image ne charge pas un fichier SVG externe quand la page est
     ouverte en local (file://) ou si le fichier manque sur le serveur.
     Sources : images/picto/vumetre.svg et waveform.svg. */
  --icon-vumetre:  url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xml%3Aspace%3D%22preserve%22%20viewBox%3D%220%200%201024%20608%22%3E%3Cpath%20d%3D%22M292%20566H135a70%2070%200%200%201-69-74V131q-1-18%205-34a68%2068%200%200%201%2067-43h753c40%200%2071%2030%2071%2070v375q-1%2037-34%2058-18%2010-38%209H604q-13%200-15-10-3-14%2013-15h290c23%200%2043-18%2044-41l1-96V128q-1-25-19-41-13-8-28-8H140q-17-1-31%209-18%2014-18%2036v372c0%2025%2020%2045%2045%2045h288q8-1%2012%204c6%209%202%2019-8%2021H292%22%2F%3E%3Cpath%20d%3D%22M761%20176q6-4%2011-4c9%201%2014%2011%2010%2019q-15%2028-28%2056l25%2010q23%209%2046%2020c7%203%207%204%2012-3l34-40q3-5%207-6%2010-3%2015%203%206%2010-2%2018l-41%2050q-9%2014-24%206a597%20597%200%200%200-210-64%20698%20698%200%200%200-208%202%20679%20679%200%200%200-199%2059q-10%206-17-3l-52-58q-6-6-2-15%204-6%2010-7%209%201%2014%208l40%2047q3%203%206%201l33-14%2029-11q9-1%204-9-12-25-22-51-3-11%207-17%2010-3%2016%208l24%2054q1%207%207%204%2036-11%2073-17c11-3%2011-2%208-13l-10-47q-1-13%209-16%2013-3%2016%2011l11%2053q1%208%207%206%2020-3%2039-4%2020-2%2039-2%206%201%206-6v-58q0-11%2011-12t14%209v61q0%207%206%206%2041%200%2081%206%205%201%206-5l8-38%204-21c3-11%2013-14%2022-7q4%204%203%2011l-12%2058q-3%208%205%208%2032%205%2063%2014c5%201%2010%205%2014%203q4-4%206-13z%22%2F%3E%3Cpath%20d%3D%22m616%20400%2070-82%2022-26q6-7%2014-6c10%202%2014%2014%207%2022l-23%2027-57%2066-108%20126-14%2017q-10%2010-21%204-9-9%200-21l60-70z%22%2F%3E%3C%2Fsvg%3E");
  --icon-waveform: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xml%3Aspace%3D%22preserve%22%20viewBox%3D%220%200%201024%20752%22%3E%3Cpath%20d%3D%22M1%20377q8-13%2025-12h170q21%200%2024%2020%206%2029%2015%2057l5%2010q4%206%208%200%204-5%206-11%208-26%2013-54%209-50%2020-98%206-28%2022-52c25-36%2074-33%2095%206q10%2019%2015%2042%2011%2050%2017%20100l10%2068q7%2046%2015%2091%205%2024%2013%2048l6%2011q4%206%208%200%205-9%208-20%207-30%2011-60l10-75%209-71%209-67%2015-87q9-61%2029-117%207-18%2020-33c23-27%2070-25%2091%209q17%2027%2023%2057%2013%2056%2020%20112l13%2097%2012%2091q6%2043%2017%2085%202%208%207%2014%204-2%204-5%2010-21%2013-43%208-44%2018-88l7-22q5-15%2021-15h166q7%200%2014%204v30q-9%204-19%203H862q-7%200-9%207l-15%2072q-5%2031-14%2060-5%2015-16%2026a37%2037%200%200%201-54-3%2090%2090%200%200%201-18-41q-12-57-19-115l-11-78-7-58q-6-50-17-101-5-31-18-60l-8-12q-16-14-31%201-10%2013-15%2030-15%2048-24%20100-8%2047-15%2095l-22%20155q-4%2044-12%2086-3%2029-16%2054-8%2019-29%2024-25%205-42-18-13-21-18-44-12-47-18-95l-12-81-18-108q-4-19-12-36-5-9-15-13-13%200-19%2011-11%2020-16%2041-10%2044-18%2088-4%2028-12%2055-4%2017-13%2031c-19%2025-53%2024-70-2q-11-20-16-42l-6-23q-1-7-7-6H22q-13%201-21-12z%22%2F%3E%3C%2Fsvg%3E");
}

*, *::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;
}
[hidden] { display: none !important; }

.stage { position: fixed; inset: 0; display: flex; flex-direction: column; }

/* Fond : diffuseur « Skyline » en bois — même image en paysage et en
   portrait (texture, le recadrage « cover » suffit). Essais écartés le
   25/09/2026 : cd-reflets.webp et cd-argent.webp (archivés le 28/09/2026
   dans SAV/v129_…_ddp-maker-fonds-inutilises/). */
.bg {
  position: absolute; inset: 0; z-index: 0;
  /* 2026-09-28 : réencodé qualité 80 (362 → 196 Ko). ?v= à augmenter si
     l'image change : le .htaccess la met en cache un an. */
  background: url("../images/diaporama/skyline.webp?v=2") center / cover no-repeat;
}

.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 {
  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 {
  position: relative; z-index: 4; flex: 1 1 auto; min-height: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
  padding: 16px 18px 0;
}

.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;
  color: rgba(255,255,255, var(--win-opacity));
  transform: translate(-10vw, 0.03em);
}

.window {
  flex: 1 1 auto; min-height: 220px; position: relative; z-index: 0;
  width: min(1320px, 95vw); 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);
}
.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));
}
.window-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; padding: 22px clamp(18px, 2.2vw, 30px) 22px; }
.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; }

.screen { display: flex; flex-direction: column; gap: 0; }

.home-baseline { margin: 2px 0 16px; 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; }
.home-baseline-1 { font-weight: 700; font-style: italic; margin: 0; }
.home-baseline-2 { font-weight: 300; font-style: normal; margin: 0; font-size: 0.75em; }

.home-intro { margin: 0 auto 18px; color: var(--ink-55); font-size: 13.5px; line-height: 1.5; width: 90%; max-width: none; text-align: justify; text-align-last: center; }
@media (max-width: 760px) { .home-intro { width: 100%; text-align-last: left; } }

/* === Dropzone (identique ddp-player, variante "big" uniquement) === */
.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;
}
/* 2026-09-28 : hauteur x2 (84 → 168 px), demande JC — padding vertical était 22px. Mobile inchangé (règle @media plus bas). */
.dropzone.big { flex-direction: row; gap: 20px; padding: 64px 28px; max-width: 620px; margin: 0 auto; background-color: var(--dz-rest-bg); }
.dropzone.slim { padding: 12px 16px; max-width: none; }
.dropzone-text { display: flex; flex-direction: column; gap: 4px; text-align: left; min-width: 0; }
.dropzone:hover, .dropzone.is-hover {
  background-color: rgba(200, 138, 76, 0.32);
  --dz-stroke-hover: rgba(200, 138, 76, 0.9);
  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%);
}
.dropzone-icon { display: grid; place-items: center; flex-shrink: 0; }
.dropzone-icon img { width: 40px; height: 40px; display: block; }
.dropzone.slim .dropzone-icon img { width: 26px; height: 26px; }
.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 (identique ddp-player) === */
.faq { margin: 20px auto 0; max-width: 720px; border-top: 1px solid var(--hair); padding-top: 16px; }
.faq-title { display: flex; align-items: center; justify-content: center; gap: 12px; text-transform: uppercase; letter-spacing: 0.18em; font-size: 15px; font-weight: 600; color: var(--ink-1); margin: 0 0 12px; text-align: center; }
.faq-title-icon { height: 28px; width: auto; flex-shrink: 0; display: block; 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-q-heading { margin: 0; font: inherit; font-weight: inherit; }
.faq-item:hover { background: var(--accent-bg-sub); }
.faq-item.open { background: var(--accent-bg); }
.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); }
.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 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); }

/* === Mention légale DDP® (licence DCA — obligatoire) === */
.legal-notice { margin: 24px auto 0; max-width: 720px; padding-top: 14px; border-top: 1px solid var(--hair); display: flex; align-items: center; justify-content: center; gap: 10px; text-align: center; }
.legal-notice-logo { height: 18px; width: auto; flex-shrink: 0; display: block; }
.legal-notice-text { margin: 0; color: var(--ink-40); font-size: 10.5px; line-height: 1.4; }

/* === Boutons communs === */
.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: 44px;
}
.ghostbtn:hover { border-color: var(--accent-border); background: var(--accent-bg); color: var(--ink-1); }
.ghostbtn svg { flex: 0 0 auto; width: 16px; height: 16px; }
.ghostbtn.danger:hover { border-color: rgba(176,69,64,0.5); background: rgba(176,69,64,0.08); color: var(--danger); }

.solidbtn {
  font: inherit; cursor: pointer; text-transform: uppercase; letter-spacing: 0.1em;
  font-size: 13px; font-weight: 700; background: var(--ink-1); color: #fff;
  border: 1px solid var(--ink-1); padding: 14px 26px; border-radius: 3px; transition: opacity 0.2s;
}
.solidbtn:hover:not(:disabled) { opacity: 0.85; }
.solidbtn:disabled { background: var(--ink-12); border-color: var(--ink-12); color: var(--ink-40); cursor: not-allowed; }

/* ============================================================
   ÉCRAN ÉDITEUR
   ------------------------------------------------------------
   Pensé pour l'écran d'ordinateur (le mobile « dépanne ») : on
   occupe toute la largeur de la fenêtre, chaque piste tient sur
   UNE ligne (n° · titre · ISRC · durée · pregap · actions).
   ============================================================ */
.editor { display: flex; flex-direction: column; gap: 18px; padding-bottom: 8px; }

/* Délimiteur de section (les titres « Informations du disque » et
   « Pistes » ont été retirés à la demande de JC, le trait reste). */
.editor-section-divider { margin-bottom: 14px; border-bottom: 1px solid var(--hair); }

/* --- Champ « app » : petit libellé + saisie sans cadre, soulignée.
   Utilisé dans l'éditeur à la place des inputs de formulaire (ISRC,
   pregap, UPC, champs repliés de la carte disque). */
.app-field { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.app-label {
  font-size: 9.5px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ink-40); font-weight: 600; white-space: nowrap;
}
.app-input {
  background: none; border: none; border-bottom: 1px solid var(--ink-12);
  font-family: inherit; font-size: 13.5px; color: var(--ink-1); padding: 2px 1px 3px;
  outline: none; width: 100%; font-variant-numeric: tabular-nums; letter-spacing: 0.03em;
  transition: border-color 0.15s;
}
.app-input::placeholder { color: var(--ink-40); }
.app-input:focus { border-bottom-color: rgba(200,138,76,0.85); }
.app-input.is-invalid { border-bottom-color: var(--danger); color: var(--danger); }

/* --- Étiquette de disque -----------------------------------------
   Carte sombre : CD qui tourne · titre/artiste · UPC à droite ·
   bouton TXT qui déplie les champs secondaires (référence, CD-Text
   compositeur/auteur) — même principe que le TXT des pistes. */
.disclabel-card { background: var(--ink-1); border-radius: 10px; padding: 20px 26px; }
.disclabel-main { display: flex; align-items: center; gap: 20px; }
.disclabel-disc {
  flex: 0 0 auto; width: 56px; height: 56px;
  display: block;
  animation: disclabel-spin 20s linear infinite;
}
@media (prefers-reduced-motion: reduce) {
  .disclabel-disc { animation: none; }
}
@keyframes disclabel-spin { to { transform: rotate(360deg); } }
.disclabel-disc img { width: 100%; height: 100%; display: block; filter: invert(1); opacity: 0.92; }
.disclabel-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 auto; }
.disclabel-title-input {
  background: none; border: none; border-bottom: 1px solid rgba(255,255,255,0.16);
  color: #fff; font-family: 'Montserrat', sans-serif; font-size: 21px; font-weight: 700;
  letter-spacing: 0.01em; padding: 3px 1px 6px; width: 100%; outline: none;
  transition: border-color 0.15s;
}
.disclabel-title-input::placeholder { color: rgba(255,255,255,0.32); font-weight: 500; }
.disclabel-title-input:focus { border-bottom-color: rgba(200,138,76,0.85); }
.disclabel-artist-input {
  background: none; border: none; color: rgba(255,255,255,0.72);
  font-family: 'Montserrat', sans-serif; font-size: 12.5px; font-weight: 500;
  letter-spacing: 0.04em; padding: 5px 1px 0; width: 100%; outline: none;
  /* 2026-09-28 : plus de text-transform: uppercase — la casse affichée doit
     être celle saisie, pour que l'utilisateur vérifie ses majuscules (JC). */
}
.disclabel-artist-input::placeholder { color: rgba(255,255,255,0.28); }
.disclabel-artist-input:focus { color: #fff; }
/* Ligne « Titre : [saisie] » / « Artiste : [saisie] » : le libellé reste
   visible devant le champ, même rempli (demande JC 2026-09-28). */
.disclabel-line { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.disclabel-line input { flex: 1 1 auto; min-width: 0; }
.disclabel-key {
  flex: 0 0 auto; font-size: 10.5px; font-weight: 600; letter-spacing: 0.12em;
  text-transform: uppercase; color: rgba(255,255,255,0.45);
}

/* Colonne de droite : UPC calé sur le haut de la carte (même ligne que
   le titre de l'album) + bouton « + d'infos » en dessous, calé à droite. */
.disclabel-main { align-items: flex-start; }
.disclabel-disc { align-self: center; }
.disclabel-side { flex: 0 0 230px; display: flex; flex-direction: column; align-items: flex-end; gap: 10px; }
.disclabel-upc { width: 100%; }
.upc-row { display: flex; align-items: center; gap: 10px; }
.upc-icon { flex: 0 0 auto; width: 30px; height: 20px; color: rgba(255,255,255,0.7); }

/* --- Bouton « + d'infos ▾ » (carte disque + chaque piste) ---------
   Encadré, fond légèrement contrasté pour être repéré ; le chevron
   pivote vers le haut quand les champs sont dépliés. */
.more-btn {
  display: inline-flex; align-items: center; gap: 7px; flex: 0 0 auto;
  font: inherit; font-size: 10.5px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
  white-space: nowrap; cursor: pointer; height: 30px; padding: 0 11px; border-radius: 6px;
  background: rgba(255,255,255,0.75); border: 1px solid var(--ink-12); color: var(--ink-80);
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.more-btn:hover, .more-btn[aria-expanded="true"] { background: var(--accent-bg); border-color: var(--accent-border); color: var(--ink-1); }
.more-btn-caret { flex: 0 0 auto; transition: transform 0.25s; }
.more-btn[aria-expanded="true"] .more-btn-caret { transform: rotate(180deg); }
/* Variante sur la carte sombre du disque */
.more-btn--dark { background: rgba(255,255,255,0.1); border-color: rgba(255,255,255,0.22); color: rgba(255,255,255,0.85); }
.more-btn--dark:hover, .more-btn--dark[aria-expanded="true"] { background: rgba(200,138,76,0.25); border-color: var(--accent-border); color: #fff; }

/* Liste de genres : même allure que les champs « app » (sans cadre). */
.app-select {
  appearance: none; -webkit-appearance: none; cursor: pointer; border-radius: 0; padding-right: 16px;
  /* petit chevron à droite (la flèche native est masquée par appearance: none) */
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23999' stroke-width='1.3'/%3E%3C/svg%3E") right 2px center / 9px 6px no-repeat;
}
.disclabel-card .app-select option { color: var(--ink-1); }

/* --- Champs obligatoires ----------------------------------------
   Repérés par un « * » dans leur libellé + légende sous la carte.
   Vides au moment de l'export → soulignés en rouge (.is-missing). */
.required-legend { margin-top: 8px; font-size: 11px; color: var(--ink-55); }
.required-legend b { color: rgba(200,138,76,1); font-weight: 700; }
.disclabel-title-input.is-missing,
.disclabel-artist-input.is-missing { border-bottom: 1px solid var(--danger); }
.disclabel-title-input.is-missing::placeholder,
.disclabel-artist-input.is-missing::placeholder { color: #e08a84; }
.trow-title-input.is-missing { border-bottom-color: var(--danger); }
.trow-title-input.is-missing::placeholder { color: var(--danger); }
/* Champs « app » posés sur le fond sombre de la carte */
.disclabel-card .app-label { color: rgba(255,255,255,0.45); }
.disclabel-card .app-input { color: #fff; border-bottom-color: rgba(255,255,255,0.16); font-size: 15px; }
.disclabel-card .app-input::placeholder { color: rgba(255,255,255,0.28); }
/* Code invalide (UPC à la clé fausse…) : sans cette règle, le blanc de la
   carte l'emportait sur le rouge de .app-input.is-invalid — l'erreur était
   détectée mais invisible. Rouge éclairci pour rester lisible sur le noir. */
.disclabel-card .app-input.is-invalid { color: #ef8a82; border-bottom: 1px solid #ef8a82; }
.disclabel-card .t-iconbtn { border-color: rgba(255,255,255,0.2); color: rgba(255,255,255,0.7); }
.disclabel-card .t-iconbtn:hover,
.disclabel-card .t-iconbtn[aria-expanded="true"] { border-color: var(--accent-border); background: rgba(200,138,76,0.25); color: #fff; }

.disc-more-wrap { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.25s ease; }
.disc-more-wrap.show { grid-template-rows: 1fr; }
.disc-more-inner { overflow: hidden; }
.disc-more-wrap.show .disc-more-inner {
  padding: 18px 0 2px 76px; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px 28px;
}

/* --- Barre d'actions (en haut ET en bas de la liste) --------------
   Même composition que la toolbar de WAV Inspector : slim dropzone
   (glisser-déposer ou clic) + Exporter + Vider. */
.editor-toolbar { display: flex; gap: 14px; align-items: stretch; flex-wrap: wrap; }
.editor-toolbar .dropzone.slim { flex: 1 1 280px; background-color: var(--dz-rest-bg); min-height: 48px; }
.editor-toolbar .dropzone.slim:hover,
.editor-toolbar .dropzone.slim.is-hover { background-color: rgba(200, 138, 76, 0.32); }
.editor-toolbar-actions { display: flex; gap: 10px; align-items: stretch; }
.editor-toolbar .ghostbtn { min-height: 48px; }
.editor-toolbar .solidbtn { padding: 0 24px; min-height: 48px; display: inline-flex; align-items: center; gap: 10px; }
/* Picto DDP (copié de ddp-player/images/picto/ddp.svg, tracé noir) :
   inversé en blanc sur le bouton noir. */
.btn-ddp-icon { width: 26px; height: 26px; display: block; filter: invert(1); }
/* Picto disquette : même taille que ceux de la zone de dépôt et de l'export */
.ghostbtn svg.btn-save-icon { width: 26px; height: 26px; }
/* Conteneur d'un bouton PayPal (rendu par le SDK JS, un par barre). */
.editor-toolbar .paypal-slot { width: 260px; max-width: 100%; }

/* --- Liste des pistes : cartes « app » sur une seule ligne -------- */
.tracklist { list-style: none; margin: 0; display: flex; flex-direction: column; gap: 8px; }

.trow-card {
  background: var(--dz-rest-bg);
  border-radius: 10px;
  padding: 12px 18px;
  width: 100%;
  transition: box-shadow 0.15s, background 0.15s;
}
.trow-card.drop-before { box-shadow: inset 0 2px 0 0 var(--ink-1); }
.trow-card.drop-after  { box-shadow: inset 0 -2px 0 0 var(--ink-1); }
/* Piste en cours d'écoute (équivalent de la ligne en lecture de WAV Inspector) */
.trow-card.is-current { background: #eadccb; }

.trow-main {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr) 150px 60px 230px auto;
  grid-template-areas: "num title isrc dur pregap actions";
  align-items: center;
  column-gap: 22px;
}
.trow-num     { grid-area: num; }
.trow-fields  { grid-area: title; }
.trow-isrc    { grid-area: isrc; }
.trow-pregap  { grid-area: pregap; }
.trow-dur     { grid-area: dur; }
.trow-actions { grid-area: actions; }

.trow-num {
  text-align: center; line-height: 1;
  font-family: 'Montserrat', sans-serif; font-size: 32px; font-weight: 700;
  color: var(--ink-40); font-variant-numeric: tabular-nums;
  cursor: grab; user-select: none;
}
.trow-num:active { cursor: grabbing; }
.trow-card.is-current .trow-num { color: var(--ink-1); }

.trow-fields { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.trow-title-input {
  background: none; border: none; border-bottom: 1px solid var(--ink-12);
  font-family: 'Montserrat', sans-serif; font-size: 16px; font-weight: 600; color: var(--ink-1);
  padding: 2px 1px 5px; width: 100%; outline: none; transition: border-color 0.15s;
}
.trow-title-input::placeholder { color: var(--ink-40); font-weight: 500; }
.trow-title-input:focus { border-bottom-color: rgba(200,138,76,0.85); }
.trow-filename { font-size: 10.5px; color: var(--ink-40); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 2px; }

/* Pregap « app » : deux petites saisies soulignées (s + ms), sans
   cadre ni flèches +/- ; bouton d'écoute de la transition à droite. */
.trow-pregap[title] { cursor: help; }
.pregap-row { display: flex; align-items: center; gap: 6px; }
.pregap-inputs { display: inline-flex; align-items: baseline; gap: 4px; }
.pregap-inputs .app-input { text-align: right; padding-right: 2px; }
.pregap-sec-input { width: 3.2ch; }
.pregap-ms-input  { width: 4.2ch; }
.pregap-inputs .unit { font-size: 10px; color: var(--ink-40); margin-right: 6px; }

.dur-value { font-size: 13.5px; color: var(--ink-1); font-variant-numeric: tabular-nums; padding: 2px 0 3px; }

.trow-actions { display: flex; align-items: center; gap: 6px; }
.t-iconbtn {
  background: none; border: 1px solid var(--ink-12); padding: 4px; width: 28px; height: 28px;
  display: flex; align-items: center; justify-content: center; cursor: pointer; color: var(--ink-55);
  border-radius: 3px; transition: border-color 0.15s, color 0.15s, background 0.15s; flex: 0 0 auto;
}
.t-iconbtn:hover { border-color: var(--accent-border); background: var(--accent-bg); color: var(--ink-1); }
.t-iconbtn[aria-expanded="true"] { border-color: var(--accent-border); background: var(--accent-bg); color: var(--ink-1); }
/* Boutons d'écoute (▶ et transition) : ronds, plus gros et plus
   contrastés que les autres icônes — ce sont les actions à repérer
   au premier coup d'œil. ▶ plein (noir), transition en contour. */
.t-roundbtn {
  width: 36px; height: 36px; border-radius: 50%; padding: 0; flex: 0 0 auto;
  display: grid; place-items: center; cursor: pointer;
  background: rgba(255,255,255,0.7); border: 1.5px solid var(--ink-80); color: var(--ink-1);
  transition: background 0.15s, border-color 0.15s, color 0.15s, transform 0.1s;
}
.t-roundbtn:hover { background: var(--accent-bg); border-color: rgba(200,138,76,1); }
.t-roundbtn:active { transform: scale(0.94); }
.t-play-btn { background: var(--ink-1); border-color: var(--ink-1); color: #fff; }
.t-play-btn svg { margin-left: 2px; }   /* recentrage optique du triangle */
.t-play-btn:hover { background: rgba(200,138,76,1); border-color: rgba(200,138,76,1); color: #fff; }
.pregap-row { gap: 10px; }

.t-delete {
  background: none; border: none; padding: 4px; width: 28px; height: 28px; display: flex;
  align-items: center; justify-content: center; cursor: pointer; color: var(--ink-40);
  border-radius: 3px; opacity: 0.6; transition: opacity 0.15s, color 0.15s, background 0.15s; flex: 0 0 auto;
}
.trow-card:hover .t-delete { opacity: 0.85; }
.t-delete:hover { opacity: 1; color: var(--danger); background: rgba(176,69,64,0.08); }
.t-delete svg { width: 15px; height: 15px; }

.tracklist-empty { padding: 24px 4px; text-align: center; color: var(--ink-40); font-size: 13px; font-style: italic; list-style: none; }

/* --- Panneau CD-Text par piste (déplié, dans la carte) ----------- */
.t-cdtext-wrap {
  display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.25s ease;
}
.t-cdtext-wrap.show { grid-template-rows: 1fr; }
.t-cdtext-inner { overflow: hidden; }
.t-cdtext-wrap.show .t-cdtext-inner {
  padding: 14px 0 2px 74px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px 28px;
}

/* --- Bandeau d'avertissement format (fichiers refusés) --- */
.format-warning {
  border: 1px solid rgba(176,69,64,0.35); background: rgba(176,69,64,0.06);
  border-radius: 4px; padding: 14px 16px; margin-top: 10px;
}
.format-warning-title { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--danger); margin-bottom: 8px; }
.format-warning-intro { font-size: 12.5px; color: var(--ink-80); margin-bottom: 8px; }
.format-warning ul { margin: 0; padding-left: 18px; }
.format-warning li { font-size: 12px; color: var(--ink-55); margin-bottom: 3px; }
.format-warning li b { color: var(--ink-1); }

/* --- Notes sous la barre d'actions du bas --- */
.editor-notes { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; padding-top: 4px; }
.editor-export-price-note { font-size: 11.5px; color: var(--ink-40); max-width: 60ch; }
.editor-verify-note { font-size: 12px; color: var(--ink-55); }
.editor-verify-note a { color: var(--ink-1); text-decoration: underline; text-underline-offset: 2px; }

.editor-error { color: var(--danger); font-size: 13px; font-weight: 500; text-align: center; }

/* ============================================================
   PROJET (.ddpmaker) + SAUVEGARDE AUTOMATIQUE
   ============================================================ */
/* Accueil : bandeau « travail en cours retrouvé » + lien « ouvrir » */
.autosave-banner {
  max-width: 620px; margin: 0 auto 12px; width: 100%;
  display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap;
  padding: 12px 16px; border-radius: 8px; background: var(--accent-bg); border: 1px solid var(--accent-border);
  font-size: 13px; color: var(--ink-80);
}
.autosave-actions { display: flex; gap: 8px; }
.autosave-actions .solidbtn, .autosave-actions .ghostbtn { min-height: 36px; padding: 0 16px; font-size: 11px; }
.open-project { margin: 12px auto 0; text-align: center; font-size: 12.5px; color: var(--ink-55); }
.open-project-btn {
  background: none; border: none; padding: 0; cursor: pointer; font: inherit; font-weight: 600;
  color: var(--ink-1); text-decoration: underline; text-underline-offset: 2px; text-decoration-color: var(--ink-40);
}
.open-project-btn:hover { text-decoration-color: rgba(200,138,76,1); }

/* Éditeur : pistes d'un projet rouvert dont le WAV reste à redéposer */
.pending-banner {
  margin-bottom: 10px; padding: 10px 14px; border-radius: 8px; font-size: 12.5px;
  background: var(--accent-bg); border: 1px solid var(--accent-border); color: var(--ink-80);
}
.trow-card.is-pending { background: transparent; box-shadow: inset 0 0 0 1px var(--accent-border); }
/* WAV survolant une carte en attente : on peut le lâcher dessus */
.trow-card.is-pending.is-file-hover { background: rgba(200,138,76,0.32); box-shadow: inset 0 0 0 2px rgba(200,138,76,0.9); }
.trow-card.is-pending .trow-filename b { color: rgba(170,105,45,1); font-weight: 700; }
.t-roundbtn:disabled { opacity: 0.3; cursor: not-allowed; }
.t-roundbtn:disabled:hover { background: var(--ink-1); border-color: var(--ink-1); }
.t-transition-btn:disabled:hover { background: rgba(255,255,255,0.7); border-color: var(--ink-80); }

/* Fenêtre « Enregistrer le projet » */
.app-dialog {
  margin: auto; max-width: 460px; width: calc(100% - 32px); border: none; border-radius: 10px;
  padding: 26px 28px 22px; color: var(--ink-1); font-family: 'Montserrat', sans-serif;
  box-shadow: 0 30px 80px rgba(0,0,0,0.45);
}
.app-dialog::backdrop { background: rgba(10,9,8,0.6); }
.app-dialog-title { font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 700; margin-bottom: 14px; }
.app-dialog-text { font-size: 13.5px; line-height: 1.55; color: var(--ink-80); }
.app-dialog-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 22px; }
.app-dialog-actions .solidbtn { padding: 0 22px; min-height: 44px; }

/* --- Mobile (dépannage) : la ligne de piste se replie ------------- */
@media (max-width: 880px) {
  .trow-main {
    grid-template-columns: 40px minmax(0, 1fr) auto;
    grid-template-areas:
      "num title  actions"
      ".   isrc   dur"
      ".   pregap pregap";
    row-gap: 10px; column-gap: 12px;
  }
  .trow-num { font-size: 24px; }
  .disclabel-main { flex-wrap: wrap; }
  .disclabel-side { flex: 1 1 100%; }
  .disc-more-wrap.show .disc-more-inner,
  .t-cdtext-wrap.show .t-cdtext-inner { padding-left: 0; grid-template-columns: 1fr; }
  .editor-toolbar-actions { flex-wrap: wrap; }
}



/* ============================================================
   ⚠ BLOC COPIÉ À L'IDENTIQUE de wav-inspector/css/style.css
   (player + VU + LCD + mode vintage). Toute modification du
   player de WAV Inspector doit être reportée ici, et inversement.
   ============================================================ */
/* ============================================================
   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, var(--icon-vumetre));
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: contain;
          mask-image: var(--mode-icon, var(--icon-vumetre));
          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;
}


/* Player en mobile/portrait — copié de wav-inspector (même seuil 880px). */
@media (max-width: 880px) {
  /* === 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; }
}


/* ============================================================
   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: ddpm-fade-in 0.2s ease-out;
}
.loading-overlay[hidden] { display: none; }
@keyframes ddpm-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: ddpm-spin 0.9s linear infinite; }
@keyframes ddpm-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; }
.loading-progress {
  width: 220px; height: 3px; background: rgba(255,255,255,0.15); border-radius: 2px;
  margin: 16px auto 0; overflow: hidden;
}
.loading-progress-bar { height: 100%; background: rgba(200,138,76,0.9); width: 0%; transition: width 0.25s; }


/* ============================================================
   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); }
.footbar { flex-wrap: wrap; }
.foot-by a, .foot-link { color: rgba(255,255,255,0.6); text-decoration: none; transition: color 0.15s; }
.foot-by a:hover, .foot-link:hover { color: #fff; }

/* Case CGV + renonciation au droit de rétractation (sous chaque barre) */
.terms-check { display: flex; align-items: flex-start; gap: 9px; margin-top: -6px;
  font-size: 12px; line-height: 1.5; color: var(--ink-55); cursor: pointer; }
.terms-check input { margin-top: 3px; flex: 0 0 auto; accent-color: var(--ink-1); cursor: pointer; }
.terms-check a { color: var(--ink-1); text-decoration: underline; text-underline-offset: 2px; }
.terms-check.is-missing { color: var(--danger); }

/* ============================================================
   PAGES LÉGALES (mentions-legales.html, cgv.html)
   Texte dans content/legal.*.js — cf. js/legal-page.js.
   ============================================================ */
.bigtitle-link { text-decoration: none; }
.legal { max-width: 760px; margin: 0 auto; padding: 6px 0 24px; color: var(--ink-80); }
.legal-back { display: inline-block; font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase;
  font-weight: 600; color: var(--ink-55); text-decoration: none; margin-bottom: 18px; }
.legal-back:hover { color: var(--ink-1); }
.legal-title { font-size: 22px; font-weight: 700; letter-spacing: 0.02em; color: var(--ink-1); margin-bottom: 4px; }
.legal-updated { font-size: 11.5px; color: var(--ink-40); margin-bottom: 18px; }
.legal-notice { font-size: 12.5px; font-style: italic; color: var(--ink-55); margin-bottom: 14px; }
.legal-body h2 { font-size: 12.5px; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 700;
  color: var(--ink-1); margin: 24px 0 8px; padding-bottom: 6px; border-bottom: 1px solid var(--hair); }
.legal-body p, .legal-body li { font-size: 13.5px; line-height: 1.65; }
.legal-body p { margin-bottom: 10px; }
.legal-body ul { margin: 0 0 10px 20px; }
.legal-body li { margin-bottom: 6px; }
.legal-body b { color: var(--ink-1); }


/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 640px) {
  .bigtitle { font-size: 11vw; transform: translate(-2vw, 0.03em); }
  .dropzone.big { flex-direction: column; text-align: center; padding: 22px 16px; }
  .dropzone-text { text-align: center; }
  .disclabel-main { flex-direction: column; text-align: center; }
  .disclabel-title-input, .disclabel-artist-input { text-align: center; }
}