:root {
  --fond: #0b0b0c;
  --carte: #1c1c1f;
  --texte: #f4f4f5;
  --doux: #a1a1aa;
  --moi: #ff8a1f;
  --autre: #3b82f6;
  --danger: #ef4444;
  color-scheme: dark;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; background: var(--fond); color: var(--texte); font: 17px/1.4 -apple-system, system-ui, sans-serif; }
body { padding: env(safe-area-inset-top) 0 calc(64px + env(safe-area-inset-bottom)); min-height: 100dvh; }
h1 { font-size: 32px; margin: 12px 0; }
h2 { margin-top: 0; }
.ecran { padding: 0 16px; }
.aide { color: var(--doux); font-size: 15px; }
.erreur { color: var(--danger); font-size: 15px; min-height: 1em; }
label { display: block; margin: 12px 0; color: var(--doux); font-size: 15px; }
input:not([type=range]):not([type=file]) {
  display: block; width: 100%; margin-top: 6px; padding: 12px; font-size: 17px;
  background: var(--carte); color: var(--texte); border: 1px solid #333; border-radius: 10px;
}
input[type=range] { width: 100%; margin-top: 8px; }
button {
  font: inherit; padding: 12px 18px; border-radius: 12px; border: 0;
  background: var(--carte); color: var(--texte); width: 100%; margin: 6px 0;
}
button.principal { background: var(--moi); color: #000; font-weight: 600; }
button.danger { background: transparent; color: var(--danger); }
button:disabled { opacity: .4; }
header { display: flex; align-items: center; justify-content: space-between; }
button.icone { width: auto; background: none; font-size: 26px; padding: 8px; }

/* Journal */
.jour h3 { font-size: 15px; color: var(--doux); text-transform: capitalize; margin: 20px 0 8px; }
.bande { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 4px; }
.vignette { flex: none; width: 92px; text-align: center; }
.vignette video, .vignette img { width: 92px; height: 140px; object-fit: cover; border-radius: 10px; border: 3px solid var(--autre); background: #222; display: block; }
.vignette.moi video, .vignette.moi img { border-color: var(--moi); }
.vignette span { font-size: 13px; font-weight: 600; color: var(--autre); }
.vignette.moi span { color: var(--moi); }
.vide { text-align: center; margin-top: 30vh; color: var(--doux); }

/* Filmer */
#filmer { padding: 0; position: fixed; inset: 0; background: #000; }
#apercu { width: 100%; height: 100%; object-fit: contain; background: #000; } /* cadre réel de la vidéo, sans zoom */
#apercu.miroir { transform: scaleX(-1); }
.commandes {
  position: absolute; left: 0; right: 0; bottom: calc(84px + env(safe-area-inset-bottom));
  display: flex; justify-content: space-around; align-items: center;
}
.rond { width: 58px; height: 58px; border-radius: 50%; background: rgba(0,0,0,.45); color: #fff; font-size: 26px; display: grid; place-items: center; margin: 0; padding: 0; }
/* Déclencheur : un anneau blanc, qui se remplit de rouge en exactement 1 s pendant la prise */
#declencheur { position: relative; width: 88px; height: 88px; border-radius: 50%; background: transparent; padding: 10px; margin: 0; }
#declencheur svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
#declencheur circle { fill: none; stroke-width: 6; }
#declencheur .piste { stroke: #fff; }
#declencheur .progres { stroke: var(--danger); stroke-linecap: round; stroke-dasharray: 289.03; stroke-dashoffset: 289.03; }
#declencheur.compte .progres { animation: tour 1s linear forwards; }
@keyframes tour { to { stroke-dashoffset: 0; } }
#declencheur span { display: grid; place-items: center; width: 100%; height: 100%; border-radius: 50%; background: #fff; color: #000; font-weight: 700; transition: transform .15s; }
#declencheur.enregistre span { background: var(--danger); color: #fff; transform: scale(.85); }
.vignette.exclu video, .vignette.exclu img { opacity: .35; border-style: dashed; }
.vignette.exclu span { color: var(--doux); font-weight: 400; }
.flottante { position: absolute; top: calc(20px + env(safe-area-inset-top)); left: 16px; right: 16px; text-align: center; }

/* Film */
.segments { display: flex; gap: 6px; }
.segments button { margin: 0; padding: 10px 6px; font-size: 15px; }
.segments button.actif { background: var(--texte); color: #000; }
#toile { width: 100%; border-radius: 14px; background: #000; display: none; margin-top: 12px; }
#toile.visible { display: block; }
#resultat { width: 100%; border-radius: 14px; margin-top: 12px; background: #000; }

/* Onglets */
nav {
  position: fixed; left: 0; right: 0; bottom: 0; display: flex;
  background: rgba(20,20,22,.92); backdrop-filter: blur(12px);
  padding: 6px 8px calc(6px + env(safe-area-inset-bottom)); z-index: 5;
}
nav button { background: none; margin: 0; color: var(--doux); font-size: 15px; }
nav button.actif { color: var(--moi); font-weight: 600; }

/* Fenêtres */
dialog { background: var(--carte); color: var(--texte); border: 0; border-radius: 18px; width: calc(100% - 32px); max-width: 480px; padding: 16px; }
dialog::backdrop { background: rgba(0,0,0,.7); }
dialog video { width: 100%; max-height: 60dvh; border-radius: 12px; background: #000; object-fit: contain; }
.boutons { display: flex; gap: 10px; }

/* Import : bouton visible et choix de la seconde sur une pellicule */
.rond.legende { position: relative; }
.rond.legende small { position: absolute; top: 62px; font-size: 11px; color: #fff; text-shadow: 0 1px 3px #000; white-space: nowrap; }
.bouton-import { display: block; text-align: center; padding: 12px; margin: 0 0 12px; border-radius: 12px; background: var(--carte); color: var(--texte); font-weight: 600; cursor: pointer; }
#pellicule { position: relative; height: 56px; margin: 8px 0; border-radius: 8px; overflow: hidden; background: #000; }
#vignettes-import { display: flex; height: 100%; }
#vignettes-import canvas { flex: 1; min-width: 0; height: 100%; object-fit: cover; opacity: .55; }
#fenetre-import { position: absolute; top: 0; bottom: 0; border: 3px solid #ff8a1f; border-radius: 6px; box-sizing: border-box; pointer-events: none; }
#debut { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; }
.reglage-fin { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 4px 0 8px; font-size: 14px; }
.reglage-fin button { width: auto; margin: 0; padding: 8px 12px; }
.reglage-fin span { white-space: nowrap; text-align: center; flex: 1; }
.reglage-fin button { flex: none; }
#validation:has(#choix-import:not([hidden])) video { max-height: 42dvh; }

/* Déplacer une seconde : appui long puis glisser */
.vignette { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
.vignette { position: relative; will-change: transform; }
.vignette.deplacee { opacity: .9; z-index: 5; transition: none !important; }
.vignette.deplacee video, .vignette.deplacee img { box-shadow: 0 6px 18px rgba(0,0,0,.6); }

/* Zoom de la caméra au pincement : la page elle-même ne zoome plus */
#filmer { touch-action: none; }
#niveau-zoom { position: absolute; top: 18px; left: 50%; transform: translateX(-50%); margin: 0; padding: 6px 12px; border-radius: 14px; background: rgba(0,0,0,.55); color: #fff; font-weight: 600; font-size: 15px; }

.vignette img { -webkit-user-drag: none; pointer-events: none; }

/* Boutons de zoom comme l'appareil photo de l'iPhone : ,5  1  2  3 */
#zooms { position: absolute; left: 50%; transform: translateX(-50%); bottom: calc(196px + env(safe-area-inset-bottom)); display: flex; gap: 8px; padding: 4px; border-radius: 22px; background: rgba(0,0,0,.35); }
#zooms button { width: 38px; height: 38px; margin: 0; padding: 0; border-radius: 50%; background: rgba(0,0,0,.45); color: #fff; font-size: 13px; font-weight: 600; }
#zooms button.actif { color: #ffd60a; font-size: 14px; }