/* Plan de travail par version.
   Balisage a soi, donc aucune regle d'origine a battre : pas de forcage de
   specificite dans ce fichier, la verification attend zero occurrence.
   Aucune largeur en dur pour la grille : minmax() et le contenu se dimensionne.
   Un seul bloc @media par palier.
   Voir docs/superpowers/specs/2026-08-02-plan-de-travail-par-version-design.md

   Disposition : a gauche le seul lecteur visible et, dessous, trois deplis
   alignes ; a droite une fiche etroite sur toute la hauteur, qui porte le
   numero, le coeur, les plateformes et l'action principale. */

.version-workspace{
  display:grid;
  grid-template-columns:minmax(0,3fr) minmax(0,1fr);
  gap:clamp(14px,2vw,28px);
  margin:clamp(18px,3vw,30px) 0;
  padding:clamp(14px,2vw,26px);
  border:1px solid var(--line);
  border-radius:16px;
  background:linear-gradient(140deg,rgba(216,168,78,.07),transparent 42%),var(--panel);
  box-shadow:var(--shadow);
}

/* La colonne de gauche : le lecteur, puis la rangee de deplis. */
.version-workspace-main{
  display:grid;
  align-content:start;
  gap:clamp(10px,1.4vw,16px);
  min-width:0;
}

.version-workspace .version-number{
  margin:0;
  font:800 15px Manrope,sans-serif;
  letter-spacing:.02em;
  color:var(--accent);
}

.version-workspace-title{
  margin:0;
  min-width:0;
  font:700 clamp(15px,1.3vw,18px) Manrope,sans-serif;
  letter-spacing:-.01em;
  line-height:1.3;
  overflow-wrap:anywhere;
}

/* Consequence lue en base : jamais un bouton, jamais cliquable. */
.version-workspace .version-published{
  display:inline-flex;
  align-items:center;
  padding:3px 10px;
  border:1px solid rgba(89,189,131,.45);
  border-radius:999px;
  background:rgba(89,189,131,.12);
  color:var(--green);
  font-size:11px;
  font-weight:700;
  letter-spacing:.04em;
  text-transform:uppercase;
  white-space:nowrap;
}

/* Quand la marque porte des logos, il n'y a plus de mot a mettre en capitales :
   la pastille se resserre autour d'eux. La taille des logos vient de
   styles.css, qui la marque prioritaire ; la reprendre ici demanderait de
   forcer la priorite. */
.version-workspace .version-published-platforms{
  gap:7px;
  padding:3px 8px;
}

.version-published-platform{
  display:inline-flex;
  align-items:center;
}

/* La fiche etroite de droite. Le seul endroit de l'ecran qui doit sauter aux
   yeux : un fond et une bordure a elle, et l'action de publication dedans. */
.version-workspace-card{
  display:flex;
  flex-direction:column;
  align-items:stretch;
  gap:12px;
  min-width:0;
  padding:clamp(12px,1.4vw,18px);
  border:1px solid rgba(216,168,78,.3);
  border-radius:14px;
  background:rgba(216,168,78,.05);
}

.version-workspace-card-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  min-width:0;
}

/* Le coeur : « j'aime cette version ». Balisage a soi, donc rien a battre. */
.version-workspace-like{
  display:inline-grid;
  place-items:center;
  flex:none;
  width:34px;
  height:34px;
  padding:0;
  border:1px solid var(--line);
  border-radius:999px;
  background:transparent;
  color:var(--muted);
  cursor:pointer;
}

.version-workspace-like svg{width:17px;height:17px}
.version-workspace-like:hover{border-color:var(--accent);color:var(--accent)}
.version-workspace-like.is-liked{border-color:rgba(216,168,78,.55);color:var(--accent)}
.version-workspace-like.is-liked svg{fill:currentColor}

.version-workspace-card-published{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px;
  margin:0;
  min-width:0;
}

.version-workspace-card-published-label{
  color:var(--muted);
  font-size:12px;
  letter-spacing:.02em;
}

/* Etat « generation en cours » */
.version-workspace-progress{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:clamp(12px,2vw,22px);
  min-width:0;
}

.version-workspace-dial{
  --version-workspace-progress:0%;
  position:relative;
  width:clamp(88px,11vw,132px);
  aspect-ratio:1;
  flex:none;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:conic-gradient(var(--accent) var(--version-workspace-progress),rgba(255,255,255,.08) 0);
}

.version-workspace-dial::before{
  content:"";
  position:absolute;
  inset:11%;
  border-radius:50%;
  background:var(--panel);
}

.version-workspace-dial span{
  position:relative;
  font:700 clamp(15px,1.6vw,20px) Manrope,sans-serif;
}

.version-workspace-progress-copy{
  display:grid;
  gap:4px;
  min-width:0;
}

.version-workspace-progress-copy strong{font:700 16px Manrope,sans-serif}
.version-workspace-progress-copy span{color:var(--muted);font-size:13px;line-height:1.5}

/* Etats « chanson prete », « video prete » et « publiee » : un seul lecteur.
   L'element ne change pas d'un etat a l'autre, seuls src et poster changent. */
.version-workspace-player{
  display:grid;
  gap:12px;
  min-width:0;
}

.version-workspace-media{
  display:block;
  width:100%;
  max-width:100%;
  height:auto;
  aspect-ratio:16/9;
  border-radius:12px;
  border:1px solid var(--line);
  background:#000;
  object-fit:contain;
}

/* Le bandeau « image seule ». Il ne parait que quand l'artefact de repli est
   arme : il n'existe aucun etat « tout va bien » a afficher. Pose contre le
   lecteur, il dit ce qu'on regarde et porte le retour vers la vraie video. */
.version-workspace-image-only{
  display:flex;
  flex-flow:row wrap;
  align-items:center;
  gap:10px 14px;
  min-width:0;
  padding:10px 14px;
  border:1px solid rgba(216,168,78,.45);
  border-radius:12px;
  background:rgba(216,168,78,.10);
}

.version-workspace-image-only>i{
  display:inline-flex;
  flex:0 0 auto;
  color:var(--accent);
}

.version-workspace-image-only svg{width:18px;height:18px}

.version-workspace-image-only-body{
  flex:1 1 220px;
  min-width:0;
}

.version-workspace-image-only-title{
  margin:0;
  font:700 14px Manrope,sans-serif;
  line-height:1.35;
  color:var(--ink);
  overflow-wrap:anywhere;
}

.version-workspace-image-only-reason{
  margin:4px 0 0;
  font-size:12.5px;
  line-height:1.45;
  color:var(--muted);
  overflow-wrap:anywhere;
}

.version-workspace-image-only-restore{
  flex:0 0 auto;
  background:var(--panel);
}

.version-workspace-option{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 12px;
  border:1px solid var(--line);
  border-radius:10px;
  background:transparent;
  color:var(--ink);
  font-size:13px;
  line-height:1.2;
  text-decoration:none;
}

.version-workspace-option:hover{border-color:var(--accent);color:var(--accent)}
.version-workspace-option svg{width:16px;height:16px}

/* Les trois deplis. Les boutons tiennent une rangee sous le lecteur, les
   panneaux s'ouvrent dessous sur toute la largeur de la colonne : un panneau
   large n'a pas a etirer le bouton qui l'ouvre. */
.version-workspace-folds{
  display:grid;
  gap:12px;
  min-width:0;
}

.version-workspace-fold-bar{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  min-width:0;
}

.version-workspace-fold-toggle{
  flex:1 1 auto;
  justify-content:space-between;
  min-width:0;
  min-height:40px;
  cursor:pointer;
}

.version-workspace-fold-toggle.is-open{border-color:var(--accent);color:var(--accent)}
.version-workspace-fold-toggle.is-open svg{transform:rotate(180deg)}

.version-workspace-fold-label{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.version-workspace-fold-lead{
  display:inline-flex;
  align-items:center;
  flex:none;
}

/* La miniature actuelle, en petit, sur le bouton qui la change : replie, le
   depli dit deja quelle image porte la video. */
.version-workspace-fold-thumb{
  display:block;
  width:auto;
  height:22px;
  aspect-ratio:16/9;
  border-radius:5px;
  border:1px solid var(--line);
  object-fit:cover;
}

.version-workspace-fold-panels{
  display:grid;
  gap:12px;
  min-width:0;
}

.version-workspace-fold-panel{
  min-width:0;
}

/* Les paroles, desormais dans le depli « Details » : plus de colonne a elles. */
.version-workspace-lyrics{
  display:grid;
  gap:10px;
  min-width:0;
  padding:clamp(12px,1.6vw,18px);
  border:1px solid var(--line);
  border-radius:12px;
  background:rgba(255,255,255,.02);
}

.version-workspace-lyrics-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:10px;
  min-width:0;
}

.version-workspace-lyrics-head .eyebrow{margin:0}
.version-workspace-lyrics-head h3{margin:2px 0 0;font:700 16px Manrope,sans-serif;overflow-wrap:anywhere}

.version-workspace-lyrics-copy{
  display:inline-flex;
  align-items:center;
  gap:7px;
  flex:none;
  padding:6px 10px;
  border:1px solid var(--line);
  border-radius:9px;
  background:transparent;
  color:var(--muted);
  font-size:12px;
}

.version-workspace-lyrics-copy:hover{border-color:var(--accent);color:var(--accent)}
.version-workspace-lyrics-copy svg{width:14px;height:14px}

.version-workspace-lyrics-text{
  margin:0;
  max-height:min(48vh,520px);
  overflow:auto;
  font:400 13px/1.75 Inter,sans-serif;
  color:#cfd3da;
  white-space:pre-wrap;
  overflow-wrap:anywhere;
}

/* Le Short vertical, derriere son depli : plus petit que le paysage, jamais en
   concurrence avec lui. */
.version-workspace-short{
  display:grid;
  justify-items:start;
  gap:6px;
  margin:0;
  min-width:0;
}

/* La hauteur commande, le rapport 9/16 en deduit la largeur. */
.version-workspace-short-media{
  display:block;
  width:auto;
  max-width:100%;
  height:clamp(260px,30vw,360px);
  aspect-ratio:9/16;
  border-radius:12px;
  border:1px solid var(--line);
  background:#000;
  /* L'affiche est la miniature du projet, qui n'est pas verticale : `contain`
     la posait au milieu de bandes noires. `cover` la recadre au centre sans la
     deformer, et ne touche pas la video elle-meme, deja au format du cadre. */
  object-fit:cover;
}

.version-workspace-short-label{
  margin:0;
  color:var(--muted);
  font-size:12px;
  letter-spacing:.03em;
}

/* Publier, ou voir la publication : dans la fiche, une colonne, un chemin par
   plateforme. Les boutons prennent la largeur de la fiche. */
.version-workspace-publications{
  display:flex;
  flex-direction:column;
  align-items:stretch;
  gap:8px;
  min-width:0;
}

.version-workspace-publish{cursor:pointer}
.version-workspace-publish[disabled]{cursor:default;opacity:.55}

/* La premiere publication actionnable reste alignee avec les autres plateformes :
   pas de jaune special pour YouTube, meme au survol. */
.version-workspace-publish-lead{
  justify-content:flex-start;
  min-height:44px;
  border-color:rgba(255,255,255,.09);
  background:#15171b;
  color:#f4f1e8;
  font-weight:800;
}

.version-workspace-publish-lead:hover{
  border-color:rgba(216,168,78,.62);
  background:#15171b;
  color:var(--accent);
}

/* Le contenu du depli « Details » : les paroles, puis les actions existantes. */
.version-workspace-details-panel{
  display:grid;
  gap:12px;
  min-width:0;
}

/* ---- Le bloc de version -------------------------------------------------
   Un bloc sert a trois choses : reconnaitre une version, la choisir, et lancer
   sur elle les gestes frequents. Le balisage est celui deja en place
   (`.workflow-inline-player`), rien n'est refait ; ces regles n'exercent
   sur styles.css aucune priorite forcee : elles sont seulement plus precises. */

/* Les trois signaux sur une ligne : le numero, le coeur, l'etat de
   publication. `.inline-player-meta span` met tout en bloc et tronque ; ce
   selecteur, plus precis, rend la ligne a la mise en rang. */
.song-version-inline-player .inline-player-version{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px;
  min-width:0;
  overflow:visible;
}

/* Le nom, le type et le compte de videos suivent les signaux, et cedent la
   place en premier quand la ligne manque de largeur. */
.song-version-inline-player .inline-player-version .version-rest{
  flex:1 1 auto;
  margin-top:0;
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* Le coeur : le seul des trois signaux qui se clique. Meme bouton que dans la
   fiche du plan de travail, en plus petit pour tenir dans la ligne. */
.song-version-inline-player .inline-player-version .version-workspace-like{
  width:28px;
  height:28px;
}

.song-version-inline-player .inline-player-version .version-workspace-like svg{
  width:15px;
  height:15px;
}

/* L'etat de publication : une information, jamais un bouton. */
.song-version-inline-player .inline-player-version .version-published{
  display:inline-flex;
  align-items:center;
  gap:7px;
  margin-top:0;
  padding:3px 8px;
  border:1px solid rgba(89,189,131,.45);
  border-radius:999px;
  background:rgba(89,189,131,.12);
  color:var(--green);
  font-size:11px;
  font-weight:700;
  letter-spacing:.04em;
  text-transform:uppercase;
  white-space:nowrap;
}

.song-version-inline-player .inline-player-version .version-published-platform{
  display:inline-flex;
  align-items:center;
  margin-top:0;
  padding:0;
  border:0;
  background:none;
}

/* La rangee des gestes frequents : lire (le rond du transport), le MP3, le
   remix. n 608 -- le depli qui la fermait a droite n'existe plus, et avec lui
   les regles de son bouton. */
.song-card-frequent-actions{
  align-items:center;
}

/* Le contenu du depli : les paroles, les actions rares, les medias -- dont les
   boutons « Publier sur ». Le cadre vient de `.song-card-media-panel`, deja en
   place ; il n'y a que l'ordre a poser. */
.song-card-details-panel > .version-workspace-lyrics{
  order:-1;
}

/* Le panneau historique ne vit que pendant une production. Masque par une
   classe posee sur la vue : les elements restent dans le document.
   La cible est la grille, jamais `#flow` seul : styles.css lui impose un
   `display:grid` marque prioritaire, et le masquer directement demanderait de
   forcer la priorite a son tour -- ce que cette feuille ne fait jamais. La
   grille porte les deux moities du panneau historique, le rond des etapes et
   les paroles. */
#view-project.version-workspace-hides-history .project-workflow-grid{display:none}

/* Un bloc de version amene sa version dans le plan de travail (tache 5). */
.is-clickable{cursor:pointer}

/* Sous ce palier, la fiche n'a plus la place d'etre une colonne lisible : elle
   passe SOUS le lecteur, sur toute la largeur, et se couche en bandeau plutot
   que de se comprimer. */
@media(max-width:1100px){
  .version-workspace{grid-template-columns:minmax(0,1fr)}
  .version-workspace-card{flex-flow:row wrap;align-items:center;gap:10px 16px}
  .version-workspace-card-head{flex:0 0 auto}
  .version-workspace-title{flex:1 1 auto}
  .version-workspace-publications{flex:1 1 auto;min-width:0;flex-flow:row wrap;align-items:center;justify-content:flex-end}
  .version-workspace-lyrics-text{max-height:min(38vh,420px)}
}

/* Trop etroit pour un bandeau : la fiche redevient une pile et chaque depli
   prend sa ligne, pour rester cliquable au pouce. */
@media(max-width:600px){
  .version-workspace{border-radius:12px}
  .version-workspace-image-only{flex-direction:column;align-items:flex-start}
  .version-workspace-image-only-body{flex:0 0 auto;width:100%}
  .version-workspace-image-only-restore{width:100%;justify-content:center}
  .version-workspace-progress{gap:12px}
  .version-workspace-card{flex-direction:column;align-items:stretch}
  .version-workspace-publications{flex-flow:column nowrap;align-items:stretch}
  .version-workspace-fold-toggle{flex:1 1 100%}
}


/* 20260818 short fold first-open layout fix */
.version-workspace-panel-short{
  display:grid;
  justify-items:center;
}
.version-workspace-panel-short .version-workspace-short{
  display:grid;
  justify-items:center;
  width:100%;
  max-width:100%;
}
.version-workspace-panel-short .version-workspace-short-frame{
  width:min(360px,100%);
  aspect-ratio:9/16;
  border-radius:14px;
  overflow:hidden;
  background:#050506;
  box-shadow:0 22px 70px rgba(0,0,0,.42),0 0 0 1px rgba(255,255,255,.08);
}
.version-workspace-panel-short .version-workspace-short-media{
  width:100%;
  height:100%;
  max-width:100%;
  aspect-ratio:9/16;
  object-fit:contain;
  background:#000;
}
.version-workspace-panel-short .version-workspace-short-label{
  width:min(360px,100%);
  text-align:center;
}
@media(max-width:640px){
  .version-workspace-panel-short .version-workspace-short-frame,
  .version-workspace-panel-short .version-workspace-short-label{width:min(320px,100%)}
}


/* 20260818 version Short disk player */
.version-workspace-short-frame.uses-disk-preview > video{
  position:absolute!important;
  inset:0!important;
  opacity:0!important;
  pointer-events:none!important;
}
.version-workspace-short-frame.uses-disk-preview .vertical-disk-thumb{
  display:grid!important;
  width:100%!important;
  max-width:100%!important;
  height:100%!important;
  border:0!important;
  border-radius:14px!important;
  box-shadow:none!important;
}
.version-workspace-short-frame.uses-disk-preview .vertical-disk-thumb .disk-record{
  animation-play-state:paused;
}
.version-workspace-short-frame.uses-disk-preview .vertical-disk-thumb.is-playing .disk-record{
  animation-play-state:running;
}