/* ── Le style de l'app. Pensé pour un téléphone, en premier. ─────────────── */
:root{
  --fond:#0f1115; --carte:#171a21; --carte2:#1e222b;
  --trait:#2a2f3a; --texte:#eef1f6; --gris:#9aa3b2;
  --accent:#19E3B1; --rouge:#ff6b6b; --vert:#3ddc84;
  --rayon:16px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
/* `display:flex` d'un bloc gagne sur le `hidden` du navigateur : on le rétablit */
[hidden]{display:none !important}
body{
  background:var(--fond); color:var(--texte);
  font:16px/1.5 -apple-system,'SF Pro Text',Segoe UI,Roboto,sans-serif;
  padding:0 0 env(safe-area-inset-bottom);
  -webkit-font-smoothing:antialiased;
}
main{max-width:640px;margin:0 auto;padding:16px 16px 64px}
h1{font-size:26px;font-weight:800;letter-spacing:-.5px;margin:8px 0 4px}
h2{font-size:19px;font-weight:700;margin:26px 0 10px}
p{margin:6px 0}
.sous{color:var(--gris);font-size:15px;margin:0 0 20px}

/* en-tête */
header{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  max-width:640px;margin:0 auto;padding:14px 16px 0;
}
.marque{font-weight:800;font-size:17px;color:var(--texte);text-decoration:none}
header nav{display:flex;gap:14px;align-items:center}
.lien-discret{
  background:none;border:0;padding:0;font:inherit;font-size:14px;
  color:var(--gris);text-decoration:none;cursor:pointer;
}
.lien-discret:hover{color:var(--texte)}

/* blocs */
.carte{
  background:var(--carte);border:1px solid var(--trait);
  border-radius:var(--rayon);padding:16px;margin-bottom:12px;
}
.carte-lien{display:block;color:inherit;text-decoration:none}
.carte-lien:active{background:var(--carte2)}
.ligne{display:flex;align-items:center;justify-content:space-between;gap:12px}
.chargement{color:var(--gris);padding:40px 0;text-align:center}
.vide{color:var(--gris);text-align:center;padding:32px 8px}

/* boutons */
button,.bouton{
  font:inherit;font-weight:650;cursor:pointer;
  border-radius:12px;border:1px solid transparent;padding:14px 18px;
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  text-decoration:none;
}
.principal{background:var(--accent);color:#06110d;width:100%}
.principal:disabled{opacity:.45;cursor:not-allowed}
.secondaire{background:var(--carte2);color:var(--texte);border-color:var(--trait);width:100%}
.danger{background:none;color:var(--rouge);border-color:transparent;padding:8px 0}
.mini{padding:8px 12px;font-size:14px;border-radius:10px;width:auto}

/* formulaires */
label{display:block;font-size:14px;color:var(--gris);margin:14px 0 6px}
input,select,textarea{
  font:inherit;width:100%;padding:13px 14px;color:var(--texte);
  background:var(--carte2);border:1px solid var(--trait);border-radius:12px;
}
input:focus,select,textarea:focus{outline:2px solid var(--accent);outline-offset:1px}
input[type=color]{padding:4px;height:48px}
.aide{font-size:13px;color:var(--gris);margin-top:6px}
form .principal{margin-top:22px}

/* étiquettes d'état */
.etat{font-size:13px;font-weight:700;padding:4px 10px;border-radius:999px;white-space:nowrap}
.etat-brouillon{background:#2a2f3a;color:#c3cad6}
.etat-attente{background:#2b2a17;color:#e8d47a}
.etat-montage{background:#152a3a;color:#7ec2ff}
.etat-prete{background:#12301f;color:var(--vert)}
.etat-echec{background:#331a1a;color:var(--rouge)}

/* emplacements de plans */
.plans{display:grid;gap:10px}
.plan{
  display:flex;align-items:center;gap:14px;
  background:var(--carte);border:1px solid var(--trait);border-radius:var(--rayon);padding:12px;
}
.plan.rempli{border-color:#2f5c4a}
.pastille{
  width:44px;height:44px;flex:0 0 44px;border-radius:12px;
  background:var(--carte2);color:var(--gris);
  display:flex;align-items:center;justify-content:center;font-weight:800;
}
.plan.rempli .pastille{background:#12301f;color:var(--vert)}
.plan .infos{flex:1;min-width:0}
.plan .titre{font-weight:650}
.plan .detail{font-size:13px;color:var(--gris)}
/* ce qu'on lui propose de filmer pour ce plan */
.plan .consigne{font-size:14px;color:var(--texte);opacity:.9;margin:2px 0 4px}
.plan input[type=file]{display:none}
.barre{height:4px;background:var(--carte2);border-radius:999px;overflow:hidden;margin-top:8px}
.barre span{display:block;height:100%;background:var(--accent);width:0;transition:width .2s}

/* vidéo finie */
video{width:100%;border-radius:var(--rayon);background:#000;display:block}

/* message flottant */
#alerte{
  position:fixed;left:16px;right:16px;bottom:20px;z-index:50;
  max-width:608px;margin:0 auto;
  background:var(--carte2);border:1px solid var(--trait);border-radius:14px;
  padding:14px 16px;box-shadow:0 12px 40px rgba(0,0,0,.5);
  transform:translateY(140%);opacity:0;visibility:hidden;
  transition:transform .25s,opacity .25s,visibility 0s .25s;
}
#alerte.visible{transform:translateY(0);opacity:1;visibility:visible;transition-delay:0s}
#alerte.erreur{border-color:#5b2b2b;background:#2a1a1a}