/* Studio — palette reprise du prototype de prompteur. */

:root{
  --ink:#0b0c0e;
  --panel:#131519;
  --line:rgba(255,255,255,.14);
  --text:#f2f3f5;
  --dim:#9aa1ab;
  --mark:#ffc14d;
  --erreur:#ff3b30;
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}

html,body{
  min-height:100%;margin:0;background:var(--ink);color:var(--text);
  font:400 15px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;
}

body.nu{display:grid;place-items:center;min-height:100vh}

/* ---------- Barre de titre ---------- */
.barre{
  position:sticky;top:0;z-index:20;background:var(--ink);
  display:flex;align-items:center;gap:10px;
  padding:calc(env(safe-area-inset-top) + 12px) 14px 12px;
  border-bottom:1px solid var(--line);
}
.barre-titre{
  flex:1;text-align:center;font-size:15px;font-weight:600;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
/* Le chevron et l'action de droite ont la même largeur : le titre reste
   centré même quand un seul des deux est présent. */
.retour{
  width:56px;flex:none;font-size:26px;line-height:1;color:var(--mark);
  text-decoration:none;padding:2px 0;
}
.retour.vide{visibility:hidden}
.retour.plus{text-align:right;font-size:22px;letter-spacing:.05em}
.barre form{width:56px;flex:none;text-align:right}
.barre .lien{font-size:13px}

main{padding:20px 20px calc(env(safe-area-inset-bottom) + 24px)}


/* ---------- Carte ---------- */
.carte{max-width:420px;margin:0 auto;padding:4px}
/* Sépare une action principale d'un recours, sans hiérarchie de titre. */
.sep{border:0;border-top:1px solid var(--line);margin:22px 0}
.carte h1{margin:0 0 6px;font-size:22px;font-weight:650;letter-spacing:-.01em}
.dim{color:var(--dim);font-size:14px;margin:0 0 20px}

/* ---------- Formulaire ---------- */
label{display:block;font-size:12px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--dim);margin:16px 0 6px}
input[type=text],input[type=password]{
  width:100%;background:var(--panel);border:1px solid var(--line);border-radius:12px;
  padding:14px;color:var(--text);font-size:16px;outline:none;   /* 16px : iOS ne zoome pas */
}
input:focus{border-color:var(--mark)}

button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}
.go{
  display:block;width:100%;margin-top:24px;background:var(--mark);color:#151004;
  font-weight:650;padding:15px;border-radius:12px;text-align:center;
  text-decoration:none;   /* .go sert aussi à des liens : sinon ils se soulignent */
}
.lien{color:var(--dim);font-size:13px;text-decoration:none;padding:0}
.lien:hover{color:var(--text)}

.erreur{
  color:var(--erreur);font-size:13px;margin:0 0 4px;
  border:1px solid rgba(255,59,48,.35);border-radius:10px;padding:10px 12px;
}

/* ---------- Messages d'une page à l'autre ---------- */
.flash{
  max-width:560px;margin:0 auto 16px;padding:11px 14px;font-size:13px;
  color:var(--mark);border:1px solid rgba(255,193,77,.35);border-radius:10px;
  background:rgba(255,193,77,.06);
}

/* Adresse jointe à un message. Le champ prend toute la place restante et le
   bouton garde la sienne : sur un écran étroit, c'est le bouton qu'on cherche
   du pouce, pas l'adresse. La police à chasse fixe évite de confondre un 1
   et un l si on relit l'adresse. */
.copiable{max-width:560px;margin:-8px auto 16px;display:flex;gap:8px;align-items:stretch}
.copiable input{
  flex:1;min-width:0;padding:10px 12px;font-size:12px;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  color:var(--dim);background:var(--card);border:1px solid var(--line);
  border-radius:10px;
}
/* .ghost impose width:100% — utile partout ailleurs, où ces boutons sont
   empilés en pleine largeur. Ici il pousserait le champ à zéro et
   déborderait de l'écran : le bouton reprend sa largeur naturelle. */
.copiable button{flex:0 0 auto;width:auto;white-space:nowrap;margin:0;padding:13px 14px}
.copiable-note{max-width:560px;margin:-8px auto 16px;color:var(--dim);font-size:12px}

/* ---------- Liste des scripts ---------- */
.liste,.formulaire{max-width:560px;margin:0 auto}

.entete{display:flex;align-items:center;justify-content:flex-end;gap:12px;margin-bottom:16px}
.go.compact{width:auto;margin:0;padding:10px 18px;font-size:14px}

.ligne{
  display:block;background:var(--panel);border:1px solid var(--line);border-radius:12px;
  padding:14px;margin-bottom:10px;text-decoration:none;color:inherit;
}
.ligne:active{border-color:var(--mark)}
.ligne-titre{display:block;font-weight:600;font-size:16px;margin-bottom:4px}
.ligne-extrait{
  display:block;color:var(--dim);font-size:13px;line-height:1.4;margin-bottom:8px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.ligne-meta{display:block;color:var(--dim);font-size:11px;letter-spacing:.04em;text-transform:uppercase}

.vide{color:var(--dim);font-size:14px;padding:22px 0;text-align:center}
.bascule{margin-top:22px;text-align:center}

/* ---------- Formulaire de script ---------- */
textarea{
  width:100%;background:var(--panel);border:1px solid var(--line);border-radius:12px;
  padding:14px;color:var(--text);font:inherit;font-size:16px;line-height:1.55;
  resize:vertical;outline:none;
}
textarea:focus{border-color:var(--mark)}

.etiquette{
  font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--dim);
  border:1px solid var(--line);border-radius:999px;padding:4px 10px;
}

.actions{display:flex;gap:10px;margin-top:14px}
.actions form{flex:1}
.ghost{
  width:100%;border:1px solid var(--line);padding:13px;border-radius:12px;
  text-align:center;color:var(--dim);font-size:14px;
  text-decoration:none;   /* .ghost sert aussi à des liens */
}
.ghost:active{border-color:var(--dim)}
.ghost.danger{color:var(--erreur);border-color:rgba(255,59,48,.3)}

.meta{color:var(--dim);font-size:12px;margin-top:16px;text-align:center}

/* ---------- Diagnostic ---------- */
h2{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--dim);
  margin:26px 0 10px;font-weight:600}
.diag{width:100%;border-collapse:collapse;font-size:14px}
.diag td{padding:10px 0;border-bottom:1px solid var(--line);vertical-align:top}
.diag td:first-child{color:var(--dim);width:45%}
.diag td:last-child{text-align:right;word-break:break-word}
.diag .oui{color:var(--mark)}
.diag .non{color:var(--erreur)}
.petit{font-size:12px;margin-top:12px}
.bascule .discret{display:block;margin-top:14px;opacity:.55;font-size:12px}

/* En mode application, pas de barre de navigateur : on récupère la place
   sous l'encoche, que le status-bar-style translucide laisse à découvert. */
@media (display-mode: standalone){
  .barre{padding-top:calc(env(safe-area-inset-top) + 8px)}
}

/* Entrée en tournage depuis la fiche d'un script */
.go.tourner{margin-top:12px;background:transparent;
  color:var(--mark);border:1px solid rgba(255,193,77,.5)}

/* ---------- Liste des prises ---------- */
.prise{
  background:var(--panel);border:1px solid var(--line);border-radius:12px;
  padding:14px;margin-bottom:14px;
}
.prise-entete{margin-bottom:10px}
.prise video{width:100%;border-radius:10px;background:#000;display:block;margin-bottom:10px}
.prise .dim.petit{margin:0 0 10px}
.note{display:flex;gap:8px;margin-bottom:10px}
.note input{flex:1;margin:0}
.ghost.compact{width:auto;padding:13px 16px;white-space:nowrap}
.prise .actions{margin-top:0}
.prise .actions .ghost{display:block;text-decoration:none;line-height:1.4}
.entete-actions{display:flex;align-items:center;gap:14px}
.prise .actions [hidden],#sorties [hidden]{display:none}
#sorties{display:flex;flex-direction:column;gap:10px}
#sorties .go{margin-top:0}
.prepare{color:var(--mark)}
.alerte{
  color:var(--erreur);font-size:13px;line-height:1.45;margin:0 0 10px;
  border:1px solid rgba(255,59,48,.35);border-radius:10px;padding:10px 12px;
}
.relance{margin-bottom:10px}

/* ---------- Projets et sections ---------- */
.jauge{
  display:block;height:3px;border-radius:2px;background:var(--line);
  margin:8px 0;overflow:hidden;
}
.jauge span{display:block;height:100%;background:var(--mark)}

.avancement{
  background:var(--panel);border:1px solid var(--line);border-radius:12px;
  padding:14px;margin-bottom:16px;
}
.avancement strong{font-size:15px;font-weight:600}
.avancement .jauge{margin-bottom:0}

.titre-bloc{
  font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--dim);
  margin:26px 0 10px;font-weight:600;
}

.section-ligne{display:flex;gap:10px;align-items:stretch;margin-bottom:10px}
.section-ordre{display:flex;flex-direction:column;gap:4px;flex:none;width:38px}
.section-ordre form{flex:1;display:flex}
.section-ordre button{
  flex:1;width:100%;background:var(--panel);border:1px solid var(--line);
  border-radius:9px;color:var(--dim);font-size:11px;
}
.section-ordre button[disabled]{opacity:.25}
.section-corps{
  flex:1;background:var(--panel);border:1px solid var(--line);border-radius:12px;
  padding:13px 14px;text-decoration:none;color:inherit;display:block;
}
.section-corps:active{border-color:var(--mark)}
.etat-bouclee{color:var(--mark)}
.etat-a_trier{color:var(--text)}

.ligne.statique{display:block}
.rattacher{display:flex;gap:8px;margin-top:10px}
.rattacher select{
  flex:1;background:var(--ink);border:1px solid var(--line);border-radius:10px;
  color:var(--text);font:inherit;font-size:14px;padding:10px;
}
.entete.haut{justify-content:flex-end;margin:18px 0 0}

.prise.retenue{border-color:rgba(255,193,77,.55)}
.fanion{
  display:inline-block;font-size:11px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--mark);border:1px solid rgba(255,193,77,.5);border-radius:999px;
  padding:3px 9px;margin-bottom:8px;
}
.fil{color:var(--text);text-decoration:none;border-bottom:1px solid var(--line)}
.prise .go{margin-top:0;margin-bottom:10px}

/* Écran « ⋯ » : des entrées décrites, pas des icônes à deviner. */
.carte .ligne{margin-bottom:12px}
.deconnexion{margin-top:22px}
.carte .ligne-extrait{white-space:normal;overflow:visible;line-height:1.45}
.prise.sans{border-style:dashed;opacity:.75}
.rang{
  display:inline-block;min-width:22px;height:22px;line-height:22px;text-align:center;
  background:var(--line);border-radius:6px;font-size:12px;margin-right:8px;
  color:var(--dim);font-weight:600;vertical-align:middle;
}
.avancement .ligne-meta{display:block;margin-top:8px}

/* ---------- Marquages : favori et au montage ---------- */
/* Le <label> englobe la case et son texte : la surface tactile fait toute la
   ligne, 44 px de haut. Une case seule fait 20 px — on ne la vise pas au
   doigt sur un téléphone. */
.marquages{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:12px 0 4px}
.marquage{
  display:flex;align-items:center;gap:10px;flex:1 1 auto;
  min-height:44px;padding:8px 12px;
  background:var(--panel);border:1px solid var(--line);border-radius:12px;
  cursor:pointer;user-select:none;font-size:15px;white-space:nowrap;
}
.marquage input{width:22px;height:22px;flex:none;accent-color:var(--mark);margin:0}
.marquage input:disabled{opacity:.5}
.marquage:has(input:checked){border-color:var(--mark);color:var(--mark)}
.marquage-etat{flex:1 0 100%;font-style:normal;font-size:13px;color:var(--dim);min-height:1em}
.marquage-etat.erreur{color:var(--erreur)}

/* Liserés : la case dit l'action, le bord dit l'état quand on parcourt une
   liste sans lire chaque ligne. Les deux marquages sont indépendants, donc
   distincts à l'œil. */
.prise.favori{border-color:rgba(255,193,77,.35)}
.prise.au-montage{border-color:rgba(255,193,77,.75)}

/* ---------- Ordre des sections ---------- */
.section-ordre button{
  min-width:44px;min-height:44px;                 /* pouce, pas souris */
  background:var(--panel);color:var(--text);
  border:1px solid var(--line);border-radius:10px;
  font-size:15px;line-height:1;cursor:pointer;padding:0;
}
.section-ordre button:disabled{opacity:.3;cursor:default}
.ordre-etat{display:block;font-style:normal;font-size:13px;color:var(--dim);min-height:1em;margin:0 0 6px}
.ordre-etat.erreur{color:var(--erreur)}

/* ---------- Traitements ---------- */
.traitement{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:10px}
.traitement button{min-height:44px}      /* pouce, pas souris */
.traitement-etat{flex:1 1 auto;font-style:normal;font-size:13px;color:var(--dim)}
.traitement-etat.erreur{color:var(--erreur)}
.traitement .alerte{flex:1 0 100%;margin:0}
.prise[data-statut="en_cours"],
.prise[data-statut="en_attente"]{border-color:rgba(255,193,77,.4)}

/* ---------- Chaîne de traitements ---------- */
.traitement{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.traitement .marquage{flex:1 1 45%}
.traitement-actions{display:flex;align-items:center;gap:12px;flex:1 0 100%;margin-top:4px}
.traitement-actions button{min-height:44px;flex:0 0 auto}   /* pouce, pas souris */

/* ---------- Tunnel de montage ---------- */
.etape-num{
  display:flex;align-items:center;justify-content:center;
  min-width:44px;min-height:44px;flex:none;      /* pouce, pas souris */
  font-size:20px;color:var(--mark);
}
.section-ligne.etape-faite    .ligne-meta{color:var(--mark)}
.section-ligne.etape-en_cours{border-color:rgba(255,193,77,.55)}
.section-ligne[href]{text-decoration:none;color:inherit}