:root { --fond: #0b1220; --panneau: #141c2e; --bord: #243049; --texte: #eef2ff; --muted: #94a3b8; --jaune: #ffd54a; --rose: #ff5fb4; --vert: #3ddc84; --orange: #ff9f3a; --accent: #4f8cff; --rayon: 16px; }
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; background: var(--fond); color: var(--texte); font: 16px/1.45 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Inter, sans-serif; -webkit-text-size-adjust: 100%; }
body { padding: max(16px, env(safe-area-inset-top)) 16px max(24px, env(safe-area-inset-bottom)); }
h1 { font-size: 1.8rem; margin: .4rem 0 .3rem; }
h2 { font-size: 1.25rem; margin: 1rem 0 .5rem; }
h3 { font-size: 1.05rem; margin: 0 0 .4rem; }
p { margin: .4rem 0; }
.muted { color: var(--muted); } .petit { font-size: .85rem; }
.erreur { color: var(--orange); background: #2a1a0a; padding: .7rem 1rem; border-radius: 12px; }
.vous { color: var(--jaune); } .pro { color: var(--rose); }

.ecran { display: none; max-width: 640px; margin: 0 auto; }
.ecran.actif { display: block; }
.ecran.large { max-width: 900px; }

.hero { text-align: center; } .hero p { color: var(--muted); }
.entete { display: flex; justify-content: space-between; align-items: center; gap: .6rem; }
.carte { background: var(--panneau); border-radius: var(--rayon); padding: .8rem 1rem 1rem; margin-top: 1rem; }
.carte label { display: block; margin: .6rem 0; color: var(--muted); font-size: .9rem; }
input[type=text], input:not([type]), input[type=password], input[type=number], select { display: block; width: 100%; margin-top: .25rem; padding: .7rem .8rem; font-size: 1rem; color: var(--texte); background: #0f172a; border: 1px solid var(--bord); border-radius: 10px; }
input[type=radio] { width: 1.1rem; height: 1.1rem; accent-color: var(--accent); }

.bouton-principal { display: block; position: relative; margin: 1.2rem 0 1rem; background: linear-gradient(135deg, var(--accent), #7c5cff); color: #fff; border-radius: var(--rayon); padding: 1.1rem 1rem; text-align: center; font-size: 1.2rem; font-weight: 700; cursor: pointer; box-shadow: 0 10px 30px rgba(79,140,255,.35); }
.bouton-principal input { position: absolute; inset: 0; opacity: 0; width: 100%; height: 100%; cursor: pointer; }
.choix { border: 1px solid var(--bord); border-radius: 12px; padding: .4rem 1rem .7rem; display: flex; gap: 1.5rem; align-items: center; margin: 0; }
.choix legend { color: var(--muted); padding: 0 .4rem; font-size: .9rem; }
.choix label { display: flex; gap: .4rem; align-items: center; margin: 0; color: var(--texte); font-size: 1rem; }
.conseils ul { margin: 0; padding: 0; list-style: none; }
.conseils li { padding: .35rem 0; border-top: 1px solid #1f2a40; } .conseils li:first-child { border-top: 0; }

.progression { height: 12px; background: #1f2a40; border-radius: 6px; overflow: hidden; margin: 1rem 0 .4rem; }
.barre { height: 100%; width: 0; background: linear-gradient(90deg, var(--accent), #7c5cff); transition: width .2s; }
.pct { text-align: center; font-variant-numeric: tabular-nums; }
.etapes { list-style: none; padding: 0; margin: 1.5rem 0; color: var(--muted); }
.etapes li { padding: .4rem 0 .4rem 1.8rem; position: relative; }
.etapes li::before { content: "○"; position: absolute; left: .3rem; }
.etapes li.encours::before { content: "◔"; color: var(--accent); } .etapes li.encours { color: var(--texte); }
.etapes li.fait::before { content: "●"; color: var(--vert); } .etapes li.fait { color: var(--texte); }
#video { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }

.cadre-video { position: relative; display: flex; justify-content: center; background: #000; border-radius: var(--rayon); overflow: hidden; }
#canvas { display: block; max-width: 100%; max-height: 80vh; height: auto; }
.continuer { display: block; width: 100%; margin-top: .6rem; padding: 1rem; font-size: 1.1rem; background: var(--jaune); color: #0b1220; }

.actions { display: flex; flex-wrap: wrap; gap: .6rem; margin: .8rem 0; }
.bouton { flex: 1 1 40%; border: 0; border-radius: 12px; padding: .9rem 1rem; font-size: 1rem; font-weight: 700; background: var(--accent); color: #fff; cursor: pointer; }
.bouton.secondaire { background: var(--bord); }
.bouton.secondaire.actif { outline: 2px solid var(--accent); }
.bouton:disabled { opacity: .45; cursor: default; }
.lien { background: none; border: 0; color: var(--accent); font-size: .95rem; cursor: pointer; padding: .6rem 0; }
.pilule { background: var(--panneau); border: 1px solid var(--bord); color: var(--texte); border-radius: 999px; padding: .5rem .9rem; font-size: .9rem; cursor: pointer; }

.bilan h3 { font-size: 1.15rem; } .bilan h3, .bilan p { margin: .3rem 0; }
.blocs { display: grid; gap: .8rem; margin-top: .6rem; }
.bloc { background: var(--panneau); border-radius: var(--rayon); overflow: hidden; display: grid; grid-template-columns: 1fr; }
.bloc img { display: block; width: 100%; height: auto; max-height: 60vh; object-fit: contain; background: #000; cursor: zoom-in; }
.bloc .corps { padding: .7rem .9rem .9rem; }
.bloc h3 small { color: var(--muted); font-weight: 400; margin-left: .4rem; }
@media (min-width: 700px) { .bloc { grid-template-columns: 260px 1fr; } .bloc img { height: 100%; max-height: none; object-fit: cover; } }
.mesure { display: grid; grid-template-columns: 14px 1fr; gap: .5rem; padding: .35rem 0; border-top: 1px solid #1f2a40; font-size: .92rem; }
.mesure .point { width: 10px; height: 10px; border-radius: 50%; margin-top: .4rem; }
.point.ok { background: var(--vert); } .point.ko { background: var(--orange); }
.mesure b, .mesure span { display: block; } .mesure .pro { font-size: .85rem; }
.coach { background: #0f172a; border-left: 3px solid #38bdf8; padding: .6rem .8rem; border-radius: 0 10px 10px 0; margin: .7rem 0 0; }
.coach b { color: #38bdf8; margin-right: .3rem; }

.courbe { display: block; width: 100%; height: 160px; margin-top: .5rem; }
.liste { margin-top: 1rem; }
.ligne-swing { display: grid; grid-template-columns: 1fr auto auto; gap: 1rem; width: 100%; text-align: left; background: var(--panneau); color: var(--texte); border: 0; border-top: 1px solid #1f2a40; padding: .8rem 1rem; font-size: 1rem; cursor: pointer; }
.ligne-swing:first-child { border-top: 0; border-radius: 12px 12px 0 0; } .ligne-swing:last-child { border-radius: 0 0 12px 12px; }

dialog { background: var(--panneau); color: var(--texte); border: 0; border-radius: var(--rayon); padding: 1rem 1.2rem; width: min(92vw, 420px); }
dialog::backdrop { background: rgba(0,0,0,.6); }
dialog label { display: block; margin: .6rem 0; color: var(--muted); font-size: .9rem; }
#dlg-image { padding: 0; width: auto; max-width: 96vw; background: #000; } #dlg-image img { display: block; max-width: 96vw; max-height: 92vh; }

.defilement { display: flex; align-items: center; gap: .6rem; margin-top: .6rem; }
.defilement input[type=range] { flex: 1; accent-color: var(--jaune); height: 28px; }
.rond { width: 44px; height: 44px; border-radius: 50%; border: 0; background: var(--bord); color: #fff; font-size: 1.1rem; cursor: pointer; flex: 0 0 auto; }
#temps { min-width: 3.6rem; text-align: right; font-variant-numeric: tabular-nums; }
.choix-ligne { display: flex; flex-wrap: wrap; gap: .6rem; }
.choix-ligne .choix { flex: 1 1 240px; }
#form-connexion .bouton { display: block; width: 100%; margin-top: .6rem; }
#form-connexion .lien { display: block; width: 100%; text-align: center; }
.champ-mdp { display: flex; gap: .4rem; align-items: stretch; margin-top: .25rem; }
.champ-mdp input { margin-top: 0; flex: 1; }
.oeil { flex: 0 0 48px; border: 1px solid var(--bord); background: #0f172a; color: var(--muted); border-radius: 10px; font-size: 1.2rem; cursor: pointer; }
.oeil.actif { color: var(--jaune); border-color: var(--jaune); }
#dlg-panneau { width: min(96vw, 560px); max-height: 92vh; overflow: auto; font-size: 1.15rem; line-height: 1.5; }
#dlg-panneau h2 { font-size: 1.6rem; margin: .2rem 0 .8rem; } #dlg-panneau h2 small { color: var(--muted); font-size: 1rem; font-weight: 400; margin-left: .5rem; }
#dlg-panneau .mesure { grid-template-columns: 16px 1fr; font-size: 1.1rem; padding: .6rem 0; }
#dlg-panneau .mesure .point { width: 13px; height: 13px; margin-top: .45rem; }
#dlg-panneau .mesure .pro { font-size: 1rem; margin-top: .15rem; }
#dlg-panneau .coach { font-size: 1.1rem; }
#dlg-panneau .bouton { display: block; width: 100%; margin-top: 1rem; }
#canvas { cursor: pointer; }
.case { display: flex !important; gap: .6rem; align-items: center; color: var(--texte) !important; font-size: 1rem !important; }
.case input { width: 1.2rem; height: 1.2rem; accent-color: var(--accent); }
.ecouter { background: none; border: 1px solid var(--bord); color: var(--texte); border-radius: 999px; padding: .4rem .9rem; font-size: .95rem; cursor: pointer; margin-top: .6rem; }
.ecouter.actif { border-color: var(--jaune); color: var(--jaune); }
#btn-voix[aria-pressed="false"] { opacity: .55; }
.deux-modes { display: grid; gap: .7rem; margin: 1.2rem 0 1rem; }
@media (min-width: 560px) { .deux-modes { grid-template-columns: 1fr 1fr; } }
.bouton-principal.mode { margin: 0; border: 0; font: inherit; font-size: 1.2rem; font-weight: 700; width: 100%; }
.bouton-principal.mode small { display: block; font-size: .85rem; font-weight: 400; opacity: .85; margin-top: .3rem; }
.bouton-principal.video { background: linear-gradient(135deg, #1f8a5b, #3ddc84); box-shadow: 0 10px 30px rgba(61,220,132,.25); }
.cadre-direct { position: relative; } #cam { display: block; max-width: 100%; max-height: 75vh; }
#canvas-direct { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.direct-etat { font-size: 1.35rem; font-weight: 700; text-align: center; margin: .8rem 0; min-height: 2.4rem; }
.direct-etat.ok { color: var(--vert); } .direct-etat.alerte { color: var(--orange); } .direct-etat.go { color: var(--jaune); font-size: 1.8rem; }
.pilules { display: flex; gap: .5rem; flex-wrap: wrap; margin: .4rem 0 .2rem; }
.pilules .pilule.actif { border-color: var(--jaune); color: var(--jaune); font-weight: 700; }
.pilules { display: flex; gap: .5rem; flex-wrap: wrap; margin: .4rem 0 .2rem; }
.pilules .pilule.actif { border-color: var(--jaune); color: var(--jaune); font-weight: 700; }
.pilules { display: flex; gap: .5rem; flex-wrap: wrap; margin: .4rem 0 .2rem; }
.pilules .pilule.actif { border-color: var(--jaune); color: var(--jaune); font-weight: 700; }
#dlg-video { padding: .6rem; width: min(96vw, 520px); background: #000; }
#dlg-video video { display: block; width: 100%; max-height: 80vh; }
#dlg-video .bouton { display: block; width: 100%; margin-top: .6rem; }
@media (max-width: 700px) { #canvas { max-height: 60vh; } }
#dlg-partage .bouton { display: block; width: 100%; margin-top: .6rem; }
#partage-url { word-break: break-all; color: var(--jaune); }