/* lfd-video — interface.
   Sombre, ronde, aérée. Le vert #68CE96 est celui du liseré du personnage,
   repris de la chaîne vidéo ; rien d'autre n'est inventé.
   Principe de mise en page : de l'air partout, une seule idée par bloc,
   des surfaces douces plutôt que des filets. */

:root {
  --fond:      #0B0C0E;
  --surface:   #15171A;
  --surface-2: #1C1F23;
  --surface-3: #23272C;
  --bord:      rgba(255, 255, 255, 0.07);
  --bord-fort: rgba(255, 255, 255, 0.13);
  --encre:     #F4F6F5;
  --gris:      #9AA2A6;
  --gris-2:    #6B7378;
  --vert:      #68CE96;
  --vert-doux: rgba(104, 206, 150, 0.14);
  --vert-bord: rgba(104, 206, 150, 0.35);
  --rouge:     #E2735E;

  --r-xl: 26px;
  --r-l:  20px;
  --r-m:  15px;
  --r-s:  11px;
  --r-pilule: 999px;

  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, sans-serif;
  --doux: 0.18s cubic-bezier(0.4, 0, 0.2, 1);
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
svg[hidden] { display: none; }

html, body {
  margin: 0; padding: 0;
  background: var(--fond); color: var(--encre);
  font-family: var(--sans); font-size: 16px; line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

/* une lueur très basse en haut de page : de la profondeur, pas un dégradé */
body::before {
  content: ""; position: fixed; inset: 0 0 auto 0; height: 380px; pointer-events: none;
  background: radial-gradient(90% 100% at 50% 0%, rgba(104, 206, 150, 0.07), transparent 70%);
}

main { max-width: 760px; margin: 0 auto; padding: 0 20px 150px; position: relative; }

/* ---------- en-tête ---------- */

.tete { padding: calc(env(safe-area-inset-top) + 26px) 0 4px; }

.tete-haut { display: flex; align-items: center; gap: 14px; margin-bottom: 22px; }

.rond {
  width: 44px; height: 44px; flex: none; display: grid; place-items: center;
  appearance: none; cursor: pointer; padding: 0;
  background: var(--surface); border: 1px solid var(--bord); border-radius: var(--r-pilule);
  color: var(--gris); transition: background var(--doux), color var(--doux);
}
.rond:active { background: var(--surface-3); color: var(--encre); }
.rond svg { width: 20px; height: 20px; }

.marque {
  font: 600 15px/1 var(--sans); letter-spacing: 0.16em; color: var(--gris);
}
.marque b { color: var(--vert); font-weight: 600; }

.tete h1 {
  margin: 0; font-size: 25px; font-weight: 680; letter-spacing: -0.025em; line-height: 1.22;
}
.tete .resume {
  margin: 10px 0 0; color: var(--gris); font-size: 15px;
}
.tete .resume b { color: var(--vert); font-weight: 600; }

/* ---------- réglette d'étapes ---------- */

.etapes {
  display: flex; gap: 4px; margin: 24px 0 30px; padding: 5px;
  background: var(--surface); border: 1px solid var(--bord); border-radius: var(--r-pilule);
}
.etapes button {
  flex: 1; appearance: none; cursor: pointer; padding: 11px 6px; border: 0;
  background: transparent; border-radius: var(--r-pilule);
  color: var(--gris-2); font: 600 13.5px/1 var(--sans); letter-spacing: -0.01em;
  transition: background var(--doux), color var(--doux);
}
.etapes button[data-fait="1"] { color: var(--gris); }
.etapes button[aria-current="true"] { background: var(--vert-doux); color: var(--vert); }

/* ---------- blocs ---------- */

.bloc { margin-bottom: 34px; }
.bloc h2 { margin: 0 0 8px; font-size: 19px; font-weight: 650; letter-spacing: -0.02em; }
.bloc p.aide { margin: 0 0 18px; color: var(--gris); font-size: 15px; line-height: 1.6; }

textarea, input[type="text"], input[type="number"] {
  width: 100%; display: block;
  background: var(--surface); color: var(--encre);
  border: 1px solid var(--bord); border-radius: var(--r-m);
  padding: 16px 18px; font: 16px/1.55 var(--sans); resize: vertical;
  transition: border-color var(--doux), background var(--doux);
}
textarea { min-height: 108px; }
textarea:focus, input:focus {
  outline: none; border-color: var(--vert-bord); background: var(--surface-2);
}
textarea::placeholder, input::placeholder { color: var(--gris-2); }

label.champ { display: block; margin-bottom: 22px; }
label.champ > span {
  display: block; margin-bottom: 9px; color: var(--encre);
  font: 600 15px/1.3 var(--sans); letter-spacing: -0.01em;
}

/* ---------- boutons ---------- */

.bouton {
  appearance: none; cursor: pointer; border: 0; border-radius: var(--r-pilule);
  padding: 15px 26px; font: 650 15.5px/1 var(--sans); letter-spacing: -0.01em;
  display: inline-flex; align-items: center; gap: 10px;
  transition: transform var(--doux), background var(--doux), opacity var(--doux);
}
.bouton:active { transform: scale(0.975); }
.bouton.vert { background: var(--vert); color: #06251A; }
.bouton.creux {
  background: var(--surface); color: var(--encre); border: 1px solid var(--bord);
}
.bouton.rouge { background: transparent; color: var(--rouge); padding-left: 0; }
.bouton.danger { background: var(--rouge); color: #2A0D07; }
.bouton.fantome { background: transparent; color: var(--gris); padding-left: 18px; padding-right: 18px; }
.bouton[disabled] { background: var(--surface); color: var(--gris-2); cursor: default; }
.bouton svg { width: 19px; height: 19px; }

.rangee-actions { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.note { color: var(--gris-2); font-size: 14px; }
.note.vert { color: var(--vert); }
.note.rouge { color: var(--rouge); }

/* la barre du bas : posée sous le pouce, détachée du fond par un voile */
.barre {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
  padding: 16px 20px calc(18px + env(safe-area-inset-bottom));
  background: linear-gradient(to top, var(--fond) 62%, transparent);
}
.barre .dedans { max-width: 760px; margin: 0 auto; }
.barre .bouton {
  width: 100%; justify-content: center; padding: 17px 26px; font-size: 16px;
}

/* ---------- pistes ---------- */

.pistes { display: flex; flex-direction: column; gap: 12px; }

.piste {
  display: grid; grid-template-columns: 96px 1fr auto;
  align-items: center; gap: 14px; padding: 12px;
  background: var(--surface); border: 1px solid var(--bord); border-radius: var(--r-l);
  transition: border-color var(--doux), background var(--doux);
}
.piste[data-montage="1"] { border-color: var(--vert-bord); background: var(--surface-2); }

.piste .vignette {
  position: relative; width: 96px; height: 54px; flex: none;
  border-radius: var(--r-s); overflow: hidden; background: var(--surface-3);
}
.piste .vignette img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  opacity: 0.72; transition: opacity var(--doux);
}
.piste[data-montage="1"] .vignette img { opacity: 1; }
.piste .duree {
  position: absolute; right: 6px; bottom: 6px; padding: 3px 7px;
  background: rgba(8, 10, 9, 0.78); border-radius: var(--r-pilule);
  font: 600 11.5px/1 var(--sans); color: var(--encre); letter-spacing: 0.01em;
}

.piste .corps { min-width: 0; }
.piste .titre {
  margin: 0 0 6px; font-size: 15px; font-weight: 560; line-height: 1.35;
  letter-spacing: -0.012em;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
/* une seule ligne d'informations sous le titre : les cartes gardent la même
   hauteur, et le regard descend sans accrocher */
.piste .sous {
  margin: 0; display: flex; align-items: baseline; gap: 7px;
  font-size: 13.5px; color: var(--gris); min-width: 0;
}
.piste .chaine { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.piste .etat { flex: none; color: var(--gris-2); }
.piste .etat::before { content: "· "; }
.piste .etat.vert { color: var(--vert); }
.piste .etat.rouge { color: var(--rouge); }
.piste .corps > .jeton { margin-top: 9px; }

.jeton {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; border-radius: var(--r-pilule);
  background: var(--surface-3); color: var(--gris);
  font: 600 11.5px/1 var(--sans); letter-spacing: 0.02em;
}
.jeton.vert { background: var(--vert-doux); color: var(--vert); }
.jeton.rouge { background: rgba(226, 115, 94, 0.14); color: var(--rouge); }
.jeton i { width: 5px; height: 5px; border-radius: 50%; background: currentColor; }

.bascule {
  width: 52px; height: 52px; flex: none; display: grid; place-items: center;
  appearance: none; cursor: pointer; padding: 0;
  background: var(--surface-2); border: 1px solid var(--bord); border-radius: var(--r-m);
  color: var(--gris-2); transition: all var(--doux);
}
.bascule svg { width: 22px; height: 22px; }
.piste[data-montage="1"] .bascule {
  background: var(--vert-doux); border-color: var(--vert-bord); color: var(--vert);
}
.bascule:active { transform: scale(0.94); }

/* ---------- liste des projets ---------- */

.projet {
  display: block; width: 100%; text-align: left; cursor: pointer;
  appearance: none; padding: 20px 22px; margin-bottom: 12px;
  background: var(--surface); border: 1px solid var(--bord); border-radius: var(--r-xl);
  color: var(--encre); transition: background var(--doux), transform var(--doux);
}
.projet:active { transform: scale(0.99); background: var(--surface-2); }
.projet .nom {
  font-size: 18px; font-weight: 620; letter-spacing: -0.02em; margin-bottom: 12px;
  line-height: 1.3;
}
.projet .sous { display: flex; gap: 8px; flex-wrap: wrap; }

/* ---------- journal ---------- */

.journal { display: flex; flex-direction: column; gap: 10px; }
.journal .ligne {
  display: flex; gap: 14px; align-items: baseline;
  padding: 14px 18px; background: var(--surface);
  border: 1px solid var(--bord); border-radius: var(--r-m);
}
.journal .quand {
  flex: none; font-family: var(--mono); font-size: 12px; color: var(--gris-2);
}
.journal .quoi { font-size: 14.5px; color: var(--gris); }
.journal .quoi b { color: var(--encre); font-weight: 600; }

.encart {
  padding: 22px; background: var(--surface); border: 1px solid var(--vert-bord);
  border-radius: var(--r-l);
}
.encart p { margin: 0 0 14px; color: var(--gris); font-size: 15px; line-height: 1.6; }
.encart code {
  display: block; padding: 14px 16px; background: var(--fond);
  border-radius: var(--r-m); font-family: var(--mono); font-size: 13.5px;
  color: var(--vert); word-break: break-all; line-height: 1.5;
}

.vide {
  padding: 46px 24px; text-align: center; color: var(--gris-2); font-size: 15px;
  background: var(--surface); border: 1px dashed var(--bord); border-radius: var(--r-l);
}

/* ---------- accès ---------- */

.acces { padding: 22vh 0 0; max-width: 300px; margin: 0 auto; text-align: center; }
.acces .marque { display: block; margin-bottom: 30px; }
.acces input {
  font-family: var(--mono); font-size: 30px; letter-spacing: 0.42em;
  text-align: center; padding: 20px 12px 20px 22px; border-radius: var(--r-l);
}

@media (min-width: 720px) {
  .tete h1 { font-size: 30px; }
  .piste { grid-template-columns: 128px 1fr auto; gap: 20px; padding: 14px; }
  .piste .vignette { width: 128px; height: 72px; }
  .barre .bouton { width: auto; min-width: 280px; float: right; }
  .barre .dedans::after { content: ""; display: block; clear: both; }
}


/* ---------- fenêtre ----------
   Une feuille qui monte du bas sous le pouce, centrée au-delà du téléphone.
   Elle remplace les fenêtres du navigateur, qui n'ont ni la couleur ni la
   rondeur du reste et cassent net la lecture. */

.voile {
  position: fixed; inset: 0; z-index: 60;
  display: flex; align-items: flex-end; justify-content: center;
  background: rgba(4, 6, 5, 0.66);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  opacity: 0; transition: opacity 0.22s ease;
}
.voile.ouvert { opacity: 1; }

.feuille {
  width: 100%; max-width: 480px;
  background: var(--surface); border: 1px solid var(--bord);
  border-radius: var(--r-xl) var(--r-xl) 0 0; border-bottom: 0;
  padding: 28px 22px calc(24px + env(safe-area-inset-bottom));
  transform: translateY(14px); opacity: 0;
  transition: transform 0.26s cubic-bezier(0.32, 0.9, 0.3, 1), opacity 0.2s ease;
}
.voile.ouvert .feuille { transform: translateY(0); opacity: 1; }

/* la poignée : dit que ça se referme en glissant, comme une feuille native */
.feuille::before {
  content: ""; display: block; width: 42px; height: 4px; margin: -8px auto 20px;
  border-radius: var(--r-pilule); background: var(--bord-fort);
}

.feuille h3 {
  margin: 0 0 8px; font-size: 20px; font-weight: 650; letter-spacing: -0.025em;
}
.feuille p { margin: 0 0 20px; color: var(--gris); font-size: 15px; line-height: 1.55; }
.feuille input { margin-bottom: 22px; }
.feuille .actions { display: flex; gap: 10px; justify-content: flex-end; }
.feuille .actions .bouton { flex: 1; justify-content: center; }

@media (min-width: 560px) {
  .voile { align-items: center; padding: 24px; }
  .feuille {
    border-radius: var(--r-xl); border-bottom: 1px solid var(--bord);
    padding: 30px 28px; transform: scale(0.97);
  }
  .feuille::before { display: none; }
  .voile.ouvert .feuille { transform: scale(1); }
  .feuille .actions .bouton { flex: 0 0 auto; }
  .feuille .actions .bouton.vert,
  .feuille .actions .bouton.danger { min-width: 170px; }
}