/* © 2026 Roland Dehghan Kamaragi — Tous droits réservés */
/* Posturalis — style clair & direct : gros boutons, cartes blanches, rouge/marine */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg:        #F0F2F6;
  --panel:     #FFFFFF;
  --panel-alt: #F5F7FA;
  --line:      #E1E5EC;
  --line-bright: #E4231C33;

  --accent:         #E4231C;
  --accent-bright:  #C81810;
  --critical:       #DC2626;
  --critical-bg:    #FDEDED;

  --info:       #2563EB;
  --info-bg:    #EAF1FE;
  --success:    #16A34A;
  --success-bg: #EAFBF1;
  --warn:       #D97706;
  --warn-bg:    #FEF6E7;
  --accent-bg:  #FDECEA;
  --navy-bg:    #EEF1F7;

  --ink:        #14213D;
  --ink-muted:  #5B6472;
  --ink-faint:  #8B93A1;

  --radius:    16px;
  --radius-sm: 12px;
  --font-display: 'Inter', 'Segoe UI', sans-serif;
  --font-body:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', Consolas, monospace;
}
a {
 text-decoration: none;
}
body {
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--ink);
  min-height: 100vh;
  font-size: 16px;
}

/* ── Header ── */
.header {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 18px 28px;
  background: var(--panel);
  border-bottom: 1px solid var(--line);
  box-shadow: 0 2px 8px rgba(20,33,61,0.04);
}
.header-left { display: flex; align-items: center; gap: 12px; }
.header-center { display: flex; justify-content: center; }
.header-qr {
  display: flex; padding: 5px; border-radius: 10px;
  background: var(--panel); box-shadow: 0 2px 8px rgba(20,33,61,0.08);
  border: 1px solid var(--line); transition: transform 0.15s, box-shadow 0.15s;
}
.header-qr:hover { transform: translateY(-1px); box-shadow: 0 4px 14px rgba(20,33,61,0.14); }
.header-qr img { display: block; width: 44px; height: 44px; border-radius: 4px; }
@media (max-width: 700px) { .header-center { display: none; } }
h1 {
  font-family: var(--font-display);
  display: inline-flex;
  align-items: center;
  gap: 14px;

  margin: 0;
  padding: 8px 16px;

  background: linear-gradient(135deg, #15171a, #25282c);
  color: #f5f3ee;

  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.025em;
  line-height: 1.2;

  border-left: 3px solid #c62828;
  border-radius: 4px;

  box-shadow:
    0 4px 14px rgba(0, 0, 0, 0.12),
    inset 0 1px 0 rgba(255,255,255,0.06);
}

h1::after {
  content: '';
  display: block;

  width: 22px;
  height: 2px;

  background: #c62828;
  border-radius: 2px;

  opacity: 0.9;
}
@media (max-width: 700px) { h1::after { display: none; } }

.header-right { display: flex; align-items: center; gap: 14px; justify-self: end; }
.badge { font-family: var(--font-body); font-size: 13px; font-weight: 800; padding: 6px 14px; border-radius: 10px; background: var(--panel-alt); color: var(--ink-muted); border: 1.5px solid var(--line); }
.badge.live { background: var(--accent); color: #fff; border-color: var(--accent); }
.fps { font-family: var(--font-mono); font-size: 13px; font-weight: 600; color: var(--ink-muted); font-variant-numeric: tabular-nums; min-width: 58px; text-align: right; }

/* ── Layout ── */
.main { display: grid; grid-template-columns: 1fr 340px; gap: 22px; padding: 24px 28px; max-width: 1240px; margin: 0 auto; }
@media (max-width: 900px) { .main { grid-template-columns: 1fr; } }

.btn-help {
  padding: 10px 18px; font-size: 14px; border-radius: 10px;
  border: 2px solid var(--line) !important; background: var(--panel); color: var(--ink);
  font-family: var(--font-body); font-weight: 700; cursor: pointer; white-space: nowrap;
  transition: all 0.15s;
}
.btn-help:hover { border-color: var(--accent) !important; color: var(--accent); }

.btn-install {
  padding: 10px 18px; font-size: 14px; border-radius: 10px;
  border: 2px solid var(--accent); background: var(--panel); color: var(--accent);
  font-family: var(--font-body); font-weight: 700; cursor: pointer; white-space: nowrap;
  transition: all 0.15s;
}
.btn-install:hover { background: var(--accent); color: #fff !important; }

.app-footer { text-align: center; font-family: var(--font-body); font-size: 12.5px; font-weight: 600; color: var(--ink-faint); padding: 18px 24px 22px; }

@media (max-width: 480px) {
  .header { padding: 12px 14px; flex-wrap: wrap; gap: 8px; }
  h1 { font-size: 17px; }
  .header-right { gap: 6px; }
  .fps { display: none; }
  .btn-help, .btn-install { padding: 8px 12px; font-size: 12px; }
  .tabs { padding: 8px 12px; }
  .main { padding: 12px; gap: 14px; }
  .metrics-grid { grid-template-columns: 1fr 1fr; }
  .help-modal { max-height: 92vh; }
  .help-tabs { gap: 0; }
  .help-tab { padding: 8px 9px; font-size: 12px; }
  .controls-main { flex-direction: column; gap: 10px; }
  .btn-primary { width: 100%; justify-content: center; font-size: 17px !important; padding: 17px 24px !important; }
  .btn-stop { width: 100%; }
  .tabs-controls .btn-start-hero { height: auto !important; padding: 15px 24px !important; font-size: 16px !important; }
  .tabs-controls .btn-stop { height: auto !important; padding: 15px 24px !important; font-size: 16px !important; }
  .controls-settings { flex-direction: column; align-items: stretch; }
  .controls-settings .select, .controls-settings .btn { width: 100%; }
}

/* ── Vidéo ── */
.video-section { display: flex; flex-direction: column; gap: 16px; }
/* Vertical par défaut (mobile) : la caméra est ouverte en portrait
   (720x1280 idéal, cf app.js/bilan.js) pour maximiser le champ vertical
   (tête aux pieds). Un conteneur horizontal forçait à rogner/letterbox
   l'image et à reculer énormément pour tenir en cadre. On ne repasse en
   16:9 que sur desktop, où les webcams sont natives paysage. */
/* --ar = format réel de la caméra, posé par app.js dès que le flux est connu.
   Le cadre épouse ce format et l'image n'est jamais rognée : l'utilisateur
   voit exactement ce que le modèle analyse, donc s'il voit ses pieds à
   l'écran, l'app les voit aussi. Avant le flux, valeur par défaut ci-dessous. */
.video-container {
  --ar: 16 / 9;
  /* Le cadre entier (donc les pieds) doit tenir à l'écran sous l'en-tête et
     les menus (~215 px) — sans plancher trop haut qui le ferait déborder
     sur une fenêtre de PC basse, ni le laisser devenir minuscule. */
  --h-max: max(340px, min(75vh, calc(100vh - 215px)));
  position: relative; background: #000;
  aspect-ratio: var(--ar);
  width: min(100%, calc(var(--h-max) * var(--ar)));
  margin: 0 auto;
  border-radius: var(--radius); overflow: hidden;
  border: 1px solid var(--line);
  box-shadow: 0 10px 28px rgba(20,33,61,0.12);
}
.video-container::before, .video-container::after, .video-container .hud-corner {
  content: ''; position: absolute; width: 12px; height: 12px; border-radius: 50%;
  z-index: 5; pointer-events: none; background: var(--accent); box-shadow: 0 0 6px rgba(228,35,28,0.6);
}
.video-container::before { top: 12px; left: 12px; }
.video-container::after   { bottom: 12px; right: 12px; }
.hud-corner.tr { top: 12px; right: 12px; }
.hud-corner.bl { bottom: 12px; left: 12px; }
@media (prefers-reduced-motion: reduce) {
  .countdown-number.pop { animation: none; }
}

video { width: 100%; height: 100%; object-fit: contain; display: block; transform: scaleX(-1); }
canvas#overlay, canvas#overlay-bilan { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; transform: scaleX(-1); }

/* Mobile : cadre vertical par défaut (téléphone tenu droit), un peu moins
   haut pour laisser voir les commandes. Le format réel remplace --ar. */
@media (max-width: 900px) {
  .video-container { --ar: 9 / 16; --h-max: max(340px, min(68vh, calc(100vh - 200px))); }
}
.video-container video,
.video-container canvas#overlay,
.video-container canvas#overlay-bilan {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: contain; transform: scaleX(-1);
}
/* Webcam horizontale + exercice debout : le cadre est en 9:16 et la vidéo
   en montre la bande centrale — la même que celle envoyée au modèle (app.js). */
.video-container.is-cropped video { object-fit: cover; object-position: center; }
/* « safe center » + défilement : si le texte ne tient pas, il défile au lieu
   d'être coupé en haut (avec un simple center, le haut sortait du cadre). */
.placeholder { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: safe center; gap: 16px; color: #fff; background: #000; padding: 20px; overflow-y: auto; text-align: center; }
.placeholder > * { flex-shrink: 0; }
.placeholder svg { opacity: 0.7; }
.placeholder p { font-size: 15px; font-family: var(--font-body); font-weight: 600; opacity: 0.9; }
.placeholder-start { min-width: min(260px, 100%); padding: 14px 24px; font-size: 16px; }
.placeholder-error {
  max-width: 440px; padding: 12px 16px; border-radius: var(--radius-sm);
  background: #FEF2F2; color: #7F1D1D; border: 2px solid #F87171;
  font-size: 14px; line-height: 1.5; text-align: left; font-weight: 500;
}
.placeholder-error[hidden] { display: none; }
.placeholder-error b { color: #991B1B; }
.placeholder-error a { color: #B91C1C; font-weight: 700; text-decoration: underline; }
.placeholder-permission {font-size: 12px !important; opacity: 0.75 !important; }
.placeholder-tips {
  max-width: 400px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.16);
  border-radius: var(--radius-sm);
  padding: 14px 18px;
  font-size: 13.5px;
  line-height: 1.55;
  color: rgba(255,255,255,0.82);
  text-align: center;
}

/* ── Alerte clignotante : message corps entier + sélecteur d'exercice ── */
@keyframes blink-attention {
  0%, 45%  { opacity: 1; }
  50%, 95% { opacity: 0.25; }
  100%     { opacity: 1; }
}
.tips-highlight {
  font-size: 15px;
  font-weight: 600 !important;
  color: #ffae00;
  text-shadow: 0 0 8px rgb(255, 166, 0);
}

/* ── Controls : hiérarchie forte entre bouton principal et secondaires ── */
.controls { display: flex; flex-direction: column; gap: 14px; }

.controls-main {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
}

.controls-settings {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.btn {
  padding: 13px 24px;
  border-radius: 12px;
  border: 2px solid var(--line);
  background: var(--panel);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(20,33,61,0.06);
  transition: transform 0.12s, background 0.15s, border-color 0.15s;
}
.btn:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }
.btn:active:not(:disabled) { transform: scale(0.98); }
.btn:disabled { opacity: 0.4; cursor: not-allowed; }

/* Boutons Démarrer / Arrêter — gros, nets, aucune ambiguïté */
.btn-primary, .btn-stop {
  padding: 17px 38px;
  border-radius: 14px;
  font-size: 17px;
  font-weight: 800;
  letter-spacing: 0.2px;
  background: var(--accent);
  border: none;
  color: #fff;
  box-shadow: 0 4px 14px rgba(228,35,28,0.3);
  transition: all 0.15s ease;
}
.btn-primary:hover:not(:disabled), .btn-stop:hover:not(:disabled) { background: var(--accent-bright); box-shadow: 0 6px 18px rgba(228,35,28,0.38); color: #E1E5EC !important; }
.btn-primary:active:not(:disabled), .btn-stop:active:not(:disabled) { transform: scale(0.98); }
.btn-primary:disabled, .btn-stop:disabled { opacity: 0.4; box-shadow: none; }

.select {
  appearance: none;
  -webkit-appearance: none;
  height: 52px;
  padding: 0 50px 0 20px;
  border-radius: 14px;
  border: none;
  background-color: var(--panel);
  background-image:
    radial-gradient(circle, var(--accent-bg) 62%, transparent 64%),
    url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23E4231C' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat, no-repeat;
  background-position: right 6px center, right 14px center;
  background-size: 34px 34px, 16px;
  box-shadow: 0 3px 12px rgba(20,33,61,0.09);
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 700;
  color: var(--ink);
  cursor: pointer;
  width: 100%;
  max-width: 240px;
  min-width: 160px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: box-shadow 0.2s ease, transform 0.15s ease;
}
.select:hover { box-shadow: 0 6px 20px rgba(20,33,61,0.14); transform: translateY(-1px); }
.select:focus { outline: none; box-shadow: 0 0 0 4px rgba(228,35,28,0.16), 0 6px 20px rgba(20,33,61,0.14); }
.select:focus-visible { outline: none; }
.select option { background: var(--panel); color: var(--ink); font-family: var(--font-body); font-weight: 600; padding: 10px; }
.select optgroup { background: var(--panel-alt); color: var(--ink-muted); font-family: var(--font-display); font-weight: 700; font-style: normal; }

/* ── Menu déroulant "maison" (remplace le rendu natif moche du <select>) ── */
.native-select-hidden { display: none !important; }

.custom-select { position: relative; width: 100%; max-width: 240px; min-width: 160px; }
.tabs-controls .custom-select { width: auto; max-width: 200px; min-width: 170px; }

.custom-select-trigger {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  width: 100%; height: 52px; padding: 0 8px 0 20px;
  border: none; border-radius: 14px;
  background: var(--panel);
  box-shadow: 0 3px 12px rgba(20,33,61,0.09);
  font-family: var(--font-body); font-size: 15px; font-weight: 700; color: var(--ink);
  cursor: pointer; text-align: left;
  transition: box-shadow 0.2s ease, transform 0.15s ease;
}
.tabs-controls .custom-select-trigger { height: 46px; }
.custom-select-trigger:hover { box-shadow: 0 6px 20px rgba(20,33,61,0.14); transform: translateY(-1px); }
.custom-select.open .custom-select-trigger { box-shadow: 0 0 0 4px rgba(228,35,28,0.16), 0 6px 20px rgba(20,33,61,0.14); }

.custom-select-value { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }

.custom-select-arrow {
  flex-shrink: 0; width: 32px; height: 32px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--accent-bg); color: var(--accent);
  transition: transform 0.25s ease, background 0.2s ease, color 0.2s ease;
}
.custom-select.open .custom-select-arrow { transform: rotate(180deg); background: var(--accent); color: #fff; }

.custom-select-panel {
  position: absolute; top: calc(100% + 8px); left: 0; right: 0; z-index: 40;
  background: var(--panel); border-radius: 14px;
  box-shadow: 0 16px 40px rgba(20,33,61,0.18);
  padding: 8px; max-height: 320px; overflow-y: auto;
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s;
}
.custom-select.open .custom-select-panel { opacity: 1; visibility: visible; transform: translateY(0); }
.custom-select-panel::-webkit-scrollbar { width: 8px; }
.custom-select-panel::-webkit-scrollbar-thumb { background: var(--line); border-radius: 8px; }
.custom-select-panel::-webkit-scrollbar-track { background: transparent; }

.custom-select-group {
  font-family: var(--font-body); font-size: 11.5px; font-weight: 800; text-transform: uppercase;
  letter-spacing: 0.05em; color: var(--ink-faint); padding: 10px 12px 6px;
}
.custom-select-option {
  padding: 11px 14px; border-radius: 10px; font-family: var(--font-body); font-size: 14.5px;
  font-weight: 600; color: var(--ink); cursor: pointer; transition: background 0.12s, color 0.12s;
}
.custom-select-option:hover { background: var(--accent-bg); color: var(--accent-bright); }
.custom-select-option.selected { background: var(--accent); color: #fff; font-weight: 700; }

@media (max-width: 700px) {
  .tabs-controls .custom-select { flex: 1; min-width: 0; max-width: none; }
}
.status-msg { font-size: 13.5px; color: var(--ink-muted); min-height: 20px; font-weight: 600; }

/* ── Positionnement / compteur / compte à rebours / fin de série ── */
.position-overlay {
  position: absolute; inset: 0; z-index: 6; background: rgba(20,33,61,0.85);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
  color: #fff; text-align: center; padding: 20px;
}
.position-overlay svg { color: var(--accent); width: 48px; height: 48px; }
.position-hint { font-family: var(--font-body); font-size: 16px; font-weight: 800; color: #fff; }
.position-hint.ok { color: #4ADE80; }

/* ── CHRONO — identique en mode Exercices et en mode Bilan ──────────────
   Un cadran qui se vide, le temps restant en gros, et le compteur à côté.
   Placé en haut au centre de la vidéo, lisible à deux mètres. */
.chrono {
  position: absolute; top: 12px; left: 50%; transform: translateX(-50%); z-index: 6;
  display: flex; align-items: center; gap: 14px;
  background: rgba(20,33,61,0.92); border: 2px solid var(--accent);
  border-radius: 14px; padding: 8px 18px 8px 10px;
  box-shadow: 0 6px 20px rgba(0,0,0,0.35);
}
.chrono-dial { position: relative; width: 58px; height: 58px; flex-shrink: 0; }
.chrono-dial svg { width: 58px; height: 58px; transform: rotate(-90deg); }
.chrono-bg  { fill: none; stroke: rgba(255,255,255,0.16); stroke-width: 7; }
.chrono-arc {
  fill: none; stroke: var(--accent); stroke-width: 7; stroke-linecap: round;
  stroke-dasharray: 226.2; stroke-dashoffset: 0;
  transition: stroke-dashoffset .3s linear, stroke .3s;
}
.chrono.is-urgent .chrono-arc { stroke: #FF3B5C; }
.chrono.is-urgent .chrono-num { color: #FF3B5C; }
.chrono-num {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-size: 15px; font-weight: 900; color: #fff;
  font-variant-numeric: tabular-nums;
}
.chrono-side { display: flex; flex-direction: column; line-height: 1; }
.chrono-big {
  font-family: var(--font-display); font-size: 26px; font-weight: 900; color: #fff;
  font-variant-numeric: tabular-nums;
}
.chrono-big small { font-size: 15px; opacity: .7; }
.chrono-lbl {
  font-family: var(--font-body); font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .08em; color: rgba(255,255,255,0.55); margin-top: 3px;
}
.chrono-tempo {
  font-family: var(--font-mono); font-size: 16px; font-weight: 700; color: var(--accent);
  font-variant-numeric: tabular-nums; margin-top: 6px;
  transition: color .15s, transform .15s;
}
.chrono-tempo.tempo-flash { color: #fff; transform: scale(1.08); }
@media (max-width: 640px) {
  .chrono { gap: 10px; padding: 6px 14px 6px 8px; }
  .chrono-dial, .chrono-dial svg { width: 48px; height: 48px; }
  .chrono-num { font-size: 13px; }
  .chrono-big { font-size: 21px; }
  .chrono-tempo { font-size: 13px; }
}

.countdown-overlay {
  position: absolute; inset: 0; z-index: 7; background: rgba(20,33,61,0.9);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
}
.countdown-number { font-family: var(--font-display); font-size: 84px; font-weight: 700; color: #fff; }
.countdown-number.pop { animation: pop 0.8s ease; }
@keyframes pop { 0% { transform: scale(0.5); opacity: 0; } 40% { transform: scale(1.15); opacity: 1; } 100% { transform: scale(1); } }
.countdown-hint { font-family: var(--font-body); font-size: 16px; font-weight: 800; color: #fff; }

.series-done {
  position: absolute; inset: 0; z-index: 7; background: rgba(20,33,61,0.95);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; text-align: center; padding: 20px;
}
.series-done-emoji { font-size: 46px; }
.series-done-title { font-family: var(--font-display); font-size: 23px; font-weight: 700; color: #fff; }
.series-done-sub { font-size: 15px; font-weight: 600; color: rgba(255,255,255,0.75); margin-bottom: 10px; }

/* ── Sidebar ── */
.sidebar { display: flex; flex-direction: column; gap: 18px; }
.metrics-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.metric { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 14px; box-shadow: 0 2px 6px rgba(20,33,61,0.05); transition: border-color 0.2s, background 0.2s, transform 0.15s; }
.metric-label { font-family: var(--font-body); font-size: 11.5px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink-muted); margin-bottom: 5px; }
.metric-value { font-family: var(--font-mono); font-size: 29px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--ink); transition: color 0.3s; }
.metric-value.good { color: var(--success); }
.metric-value.warn { color: var(--warn); }
.metric-value.bad  { color: var(--critical); }
.metric:has(.metric-value.good) { background: var(--success-bg); border-color: #CDEEDA; }
.metric:has(.metric-value.warn) { background: var(--warn-bg); border-color: #F7E2BE; }
.metric:has(.metric-value.bad)  { background: var(--critical-bg); border-color: #F6D0D0; }
.metric.flash { border-color: var(--critical); transform: scale(1.03); }

/* ── Errors panel ── */
.errors-panel, .instructions-panel, .body-schema-panel { background: var(--panel); border: 1px solid var(--line); border-left: 4px solid var(--line); border-radius: var(--radius); padding: 18px 20px; box-shadow: 0 2px 8px rgba(20,33,61,0.05); }
.errors-panel { border-left-color: var(--critical); }
.instructions-panel { border-left-color: var(--info); }
.body-schema-panel { border-left-color: var(--ink-faint); }
.errors-title { font-family: var(--font-display); font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--critical); margin-bottom: 12px; }
.error-item { display: flex; align-items: flex-start; gap: 9px; font-size: 14.5px; font-weight: 500; padding: 8px 0; border-bottom: 1px solid var(--panel-alt); line-height: 1.45; color: var(--ink); }
.error-item:last-child { border-bottom: none; }
.error-tip { font-size: 13px; color: var(--ink-muted); font-style: italic; line-height: 1.45; margin-top: 3px; }
.dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; margin-top: 4px; }
.dot.red   { background: var(--critical); }
.dot.amber { background: #D97706; }
.dot.green { background: #16A34A; }
.dot.blue  { background: var(--accent); }
.dot.info  { background: var(--ink-faint); }
.no-data { font-size: 14px; color: var(--ink-faint); font-style: italic; }

/* ── Score ── */
.score-panel { background: linear-gradient(135deg, var(--accent-bg) 0%, var(--panel) 60%); border: 1px solid var(--line); border-left: 5px solid var(--accent); border-radius: var(--radius); padding: 18px 20px; display: flex; flex-direction: column; gap: 10px; box-shadow: 0 4px 14px rgba(228,35,28,0.08); }
.score-label { font-family: var(--font-display); font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; color: var(--ink-muted); }
.score-bar-track { height: 12px; background: var(--panel-alt); border-radius: 10px; overflow: hidden; }
.score-bar-fill { height: 100%; border-radius: 10px; background: var(--accent); transition: width 0.4s ease, background 0.4s; }
.score-value { font-family: var(--font-mono); font-size: 38px; font-weight: 800; color: var(--accent-bright); font-variant-numeric: tabular-nums; }

/* ── Tabs ── */
.tabs { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; background: var(--panel-alt); border-bottom: 1px solid var(--line); padding: 14px 28px; }
.tabs-left { display: flex; align-items: center; gap: 8px; }
.tabs-controls { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.tabs-controls .select { width: auto; flex: 0 0 auto; height: 46px; min-width: 170px; max-width: 200px; }

.tabs-controls .btn-start-hero {
  height: 46px;
  padding: 0 28px;
  font-size: 15px;
  animation: startPulse 2.2s ease-in-out infinite;
}
.tabs-controls .btn-stop {
  height: 46px;
  padding: 0 24px;
  font-size: 15px;
}
@keyframes startPulse {
  0%, 100% { box-shadow: 0 4px 14px rgba(228,35,28,0.3); }
  50% { box-shadow: 0 4px 22px rgba(228,35,28,0.55); }
}
@media (prefers-reduced-motion: reduce) {
  .tabs-controls .btn-start-hero { animation: none; }
}
.tab {
  display: flex; align-items: center; justify-content: center;
  height: 46px; padding: 0 22px; border: none; border-radius: 10px;
  background: transparent; font-family: var(--font-display); font-size: 15.5px; font-weight: 700;
  color: var(--ink-muted); cursor: pointer; transition: color 0.15s, background 0.15s;
}
.tab:hover { color: var(--ink); background: rgba(20,33,61,0.06); }
.tab.active { color: #fff; background: var(--accent); box-shadow: 0 4px 12px rgba(228,35,28,0.28); }

@media (max-width: 700px) {
  .tabs { padding: 12px 14px; }
  .tabs-controls { width: 100%; }
  .tabs-controls .select { flex: 1; min-width: 0; max-width: none !important; }
  .tabs-controls .btn-start-hero { width: 100%; justify-content: center; }
  .tabs-controls .btn-stop { width: 100%; justify-content: center; }

  .header {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 14px 16px;
  }
  .header-left { justify-content: center; }
  .header-right { flex-wrap: wrap; justify-content: center; row-gap: 8px; }
}

/* ── Barre de progression capture ── */
.capture-bar { position: absolute; bottom: 14px; left: 14px; right: 14px; background: rgba(20,33,61,0.92); border-radius: 12px; padding: 12px 16px; display: flex; flex-direction: column; gap: 7px; box-shadow: 0 4px 16px rgba(0,0,0,0.3); }
.capture-label { font-family: var(--font-body); font-size: 14px; color: #fff; font-weight: 800; }
.capture-track { height: 9px; background: rgba(255,255,255,0.2); border-radius: 6px; overflow: hidden; }

/* ── Disclaimer ── */
.disclaimer { font-size: 13px; font-weight: 700; color: var(--critical); background: rgba(220,38,38,0.08); border: 1.5px solid var(--critical); border-radius: 10px; padding: 10px 15px; line-height: 1.5; }

/* ── Bouton analyser (override manuel — distinct du bouton principal) ── */
.btn-analyze { background: var(--panel); border: 2px solid var(--accent) !important; color: var(--accent) !important; margin-left: auto; font-weight: 700; }
.btn-analyze:hover:not(:disabled) { background: var(--accent); color: #fff !important; }

/* ── Instructions ── */
.instructions-list { list-style: none; padding-left: 0; display: flex; flex-direction: column; gap: 11px; counter-reset: step; }
.instructions-list li { font-size: 14.5px; color: var(--ink-muted); font-weight: 500; line-height: 1.55; padding-left: 30px; position: relative; counter-increment: step; }
.instructions-list li::before {
  content: counter(step); position: absolute; left: 0; top: -1px;
  font-family: var(--font-display); font-size: 12.5px; font-weight: 700; color: #fff;
  background: var(--accent); border-radius: 50%; width: 22px; height: 22px; display: flex; align-items: center; justify-content: center;
}
.instructions-list li strong { color: var(--ink); font-weight: 700; }

/* ── Findings bilan ── */
.finding-item { padding: 10px 0; border-bottom: 1px solid var(--panel-alt); }
.finding-item:last-child { border-bottom: none; }
.finding-header { display: flex; align-items: center; gap: 9px; margin-bottom: 5px; }
.finding-header strong { font-size: 14.5px; flex: 1; color: var(--ink); font-weight: 700; }
.finding-view { font-family: var(--font-body); font-size: 11px; font-weight: 800; background: var(--panel-alt); color: var(--ink-muted); padding: 3px 9px; border-radius: 8px; }
.finding-detail { font-size: 13px; color: var(--ink-muted); line-height: 1.5; padding-left: 19px; }
.finding-tip { font-size: 13px; color: var(--ink-muted); font-style: italic; line-height: 1.5; padding-left: 19px; margin-top: 4px; }
.bilan-synthesis { font-size: 14.5px; color: var(--ink); line-height: 1.55; background: var(--panel-alt); border-radius: var(--radius-sm); padding: 13px 15px; margin-bottom: 16px; font-weight: 600; }

/* ── Schéma corporel ── */
.body-schema-panel { display: flex; flex-direction: column; align-items: center; gap: 10px; }
#body-schema { border: 1px solid var(--line); border-radius: 12px; background: #fff; }
.bilan-results { display: flex; flex-direction: column; gap: 14px; }

/* ── Rapport de série ── */
.report-panel {
  background: var(--panel);
  border: 1px solid var(--line);
  border-left: 4px solid var(--ink);
  border-radius: var(--radius);
  padding: 16px 18px;
  box-shadow: 0 2px 8px rgba(20,33,61,0.05);
}
.report-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.report-count {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  color: #fff;
  background: var(--ink);
  padding: 2px 9px;
  border-radius: 8px;
}
#report-list { display: flex; flex-direction: column; gap: 8px; max-height: 320px; overflow-y: auto; }
.report-row {
  background: var(--panel-alt);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  font-size: 12.5px;
}
.report-row-head { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.report-row-head strong { color: var(--ink); font-size: 13px; }
.report-time { font-family: var(--font-mono); font-size: 10.5px; color: var(--ink-faint); }
.report-score { font-family: var(--font-mono); font-weight: 700; margin-left: auto; }
.report-angles { font-family: var(--font-mono); font-size: 11.5px; color: var(--ink-muted); margin-bottom: 5px; }
.report-tempo { font-family: var(--font-mono); font-size: 11.5px; color: var(--accent); margin-bottom: 5px; font-weight: 700; }
.report-ok { color: #16A34A; font-size: 12px; font-weight: 600; }
.report-tag {
  display: inline-block;
  font-size: 10.5px;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: 8px;
  margin: 2px 3px 0 0;
}
.report-tag.red   { background: rgba(220,38,38,0.12); color: var(--critical); }
.report-tag.amber { background: rgba(217,119,6,0.12); color: #D97706; }
.report-tag.info  { background: var(--panel-alt); color: var(--ink-muted); }

/* ── Panel analyse automatique ── */
.analysis-panel { background: linear-gradient(135deg, var(--accent-bg) 0%, var(--panel) 55%); border: 2px solid var(--accent); box-shadow: 0 10px 28px rgba(228,35,28,0.14); border-radius: var(--radius); padding: 18px 20px; }
.analysis-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 9px; }
.analysis-label { font-family: var(--font-display); font-size: 14px; font-weight: 700; color: var(--accent); }
.analysis-time { font-family: var(--font-mono); font-size: 12px; color: var(--ink-faint); }
.analysis-score { font-family: var(--font-mono); font-size: 48px; font-weight: 800; line-height: 1; margin: 9px 0; color: var(--ink); font-variant-numeric: tabular-nums; }
.analysis-score span { font-size: 19px; font-weight: 500; color: var(--ink-muted); }
.analysis-synthesis { font-size: 14.5px; color: var(--ink); line-height: 1.55; background: var(--panel-alt); border-radius: var(--radius-sm); padding: 11px 13px; margin: 9px 0; font-weight: 600; }
.analysis-errors { margin: 9px 0; border-top: 1px solid var(--panel-alt); padding-top: 9px; }
.analysis-metrics { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 9px; padding-top: 9px; border-top: 1px solid var(--panel-alt); }
.analysis-metrics span { font-family: var(--font-mono); font-size: 12.5px; color: var(--ink-muted); background: var(--panel-alt); padding: 4px 10px; border-radius: 8px; }
.analysis-metrics strong { color: var(--accent); }

/* ── Modal Aide ── */
.help-overlay { position: fixed; inset: 0; background: rgba(20,33,61,0.55); z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 20px; }
.help-modal { background: var(--panel); border: 1px solid var(--line); border-radius: 20px; width: 100%; max-width: 580px; max-height: 85vh; display: flex; flex-direction: column; overflow: hidden; box-shadow: 0 24px 60px rgba(20,33,61,0.25); }
.help-header { display: flex; align-items: center; justify-content: space-between; padding: 20px 24px; background: var(--accent); }
.help-header h2 { font-family: var(--font-display); font-size: 17px; font-weight: 700; color: #fff; }
.help-close { border: none; background: rgba(255,255,255,0.22); font-size: 15px; color: #fff; cursor: pointer; padding: 6px 11px; border-radius: 8px; }
.help-close:hover { background: rgba(255,255,255,0.38); }
.help-tabs { display: flex; gap: 4px; padding: 14px 22px 0; border-bottom: 1px solid var(--panel-alt); overflow-x: auto; }
.help-tab { padding: 10px 15px; border: none; border-radius: 10px 10px 0 0; background: transparent; font-family: var(--font-body); font-size: 14px; font-weight: 800; color: var(--ink-muted); cursor: pointer; white-space: nowrap; }
.help-tab:hover { background: var(--panel-alt); color: var(--ink); }
.help-tab.active { color: var(--accent); background: var(--panel-alt); }
.help-body { padding: 22px 24px 24px; overflow-y: auto; }
.help-pane { display: none; }
.help-pane.active { display: block; }
.help-list, .help-steps { padding-left: 22px; display: flex; flex-direction: column; gap: 11px; }
.help-list li, .help-steps li { font-size: 15px; font-weight: 500; line-height: 1.55; color: var(--ink); }
.help-steps { list-style: decimal; }
.help-list { list-style: disc; }
/* ── Un seul bouton à la fois : Démarrer au repos, Arrêter en cours ── */
.tabs-controls .btn-stop { display: none; }
body.is-running .tabs-controls .btn-stop { display: inline-flex; align-items: center; justify-content: center; }
body.is-running .tabs-controls .btn-start-hero { display: none; }

/* ── Options avancées (protocole de recherche), repliées par défaut ── */
.advanced-options {
  align-self: center; width: 100%; max-width: 520px;
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-sm);
  font-size: 14px; color: var(--ink-muted);
}
.advanced-options summary {
  cursor: pointer; padding: 12px 16px; font-weight: 700; list-style-position: inside;
  min-height: 44px; display: list-item;
}
.advanced-options[open] summary { border-bottom: 1px solid var(--line); }
.advanced-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 14px 16px 16px; }
.advanced-fields label { display: flex; flex-direction: column; gap: 6px; font-size: 12.5px; font-weight: 700; color: var(--ink-muted); }
.input {
  height: 44px; padding: 0 12px; border-radius: 10px; border: 1.5px solid var(--line);
  background: var(--panel); color: var(--ink); font-family: var(--font-body); font-size: 16px; font-weight: 600;
  width: 100%; min-width: 0;
}
.input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(228,35,28,0.16); }

/* ── Mobile : tout ce qui précède la vidéo doit tenir en peu de hauteur ── */
@media (max-width: 700px) {
  .header {
    flex-direction: row; justify-content: space-between; align-items: center;
    padding: 10px 16px; gap: 10px;
  }
  .header-logo img { height: 30px; width: auto; display: block; }
  .header-right { flex-wrap: nowrap; gap: 8px; }
  .badge:not(.live) { display: none; }
  .badge { padding: 5px 10px; font-size: 12px; }
  .btn-help, .btn-install { padding: 8px 12px; font-size: 13px; min-height: 40px; }

  /* Un seul onglet : inutile de lui consacrer une ligne sur téléphone. */
  .tabs-left { display: none; }
  .tabs { padding: 10px 16px; gap: 10px; }
  .tabs-controls { display: grid !important; grid-template-columns: 3fr 2fr; gap: 8px; }
  .tabs-controls .custom-select { width: 100%; min-width: 0; max-width: none; }
  .tabs-controls .custom-select-trigger { height: 46px; padding: 0 6px 0 14px; font-size: 14.5px; }
  .tabs-controls .custom-select-arrow { width: 28px; height: 28px; }
  .tabs-controls .btn-start-hero,
  .tabs-controls .btn-stop { grid-column: 1 / -1; width: 100%; }
  .tabs-controls .btn-start-hero { padding: 13px 20px !important; font-size: 16px !important; }
  body.is-running .tabs-controls .btn-stop { padding: 13px 20px !important; font-size: 16px !important; height: auto !important; }

  .main { padding: 12px 16px; }
  .advanced-fields { grid-template-columns: 1fr; }
  .custom-select-panel { max-height: 55vh; }
}

/* Placeholder : sur petit écran, le conteneur vidéo est étroit — on resserre
   le texte pour que le bouton « Essayer » ne soit jamais coupé. */
@media (max-width: 900px) {
  .placeholder { gap: 10px; padding: 16px; }
  .placeholder > svg { width: 36px; height: 36px; flex-shrink: 0; }
  .placeholder p { font-size: 14px; }
  .placeholder-tips { font-size: 12.5px; padding: 10px 12px; line-height: 1.45; }
  .tips-highlight { font-size: 13px; }
}
@media (max-height: 700px) and (max-width: 900px) {
  .placeholder-tips { display: none; }
}
/* Fenêtre de PC basse : accueil resserré pour que tout tienne sans défiler. */
@media (max-height: 760px) and (min-width: 901px) {
  .placeholder { gap: 10px; padding: 14px 20px; }
  .placeholder > svg { display: none; }
  .placeholder-start { padding: 11px 22px !important; }
  .placeholder-tips { font-size: 12.5px; line-height: 1.45; padding: 10px 14px; max-width: 460px; }
  .tips-highlight { font-size: 13px; }
}

.help-disclaimer { margin-top: 18px; font-size: 13px; font-weight: 700; color: var(--critical); background: rgba(220,38,38,0.08); border: 1.5px solid var(--critical); border-radius: 10px; padding: 10px 15px; line-height: 1.5; }