@import url('/css/fonts.css');

/* ===== Tokens : centralisés dans theme.css (clair/sombre via <html data-theme>) ===== */
*{box-sizing:border-box;}
html,body{margin:0;padding:0;height:100%;overscroll-behavior:none;}
body{
  background:var(--bg);
  color:var(--text);
  font-family:var(--font-body,'Source Sans 3',system-ui,sans-serif);
}
h1,h2,h3,.dock-btn .lab,.tally-label,.brand,.coaching-head h2{
  font-family:var(--font-display,'Oswald',sans-serif);font-weight:700;letter-spacing:.005em;text-transform:uppercase;
}
/* .app = shell plein écran pour la CAPTURE caméra (verrouillé, sans scroll).
   PAS de transform ici : il ferait de .app le containing-block des éléments
   position:fixed (header/nav), qui s'ancreraient alors au bas de .app (100dvh =
   grand layout) au lieu du viewport visuel → la nav flottait avec du gris dessous.
   Accueil + Vidéos déverrouillent ce shell plus bas pour scroller le body comme
   la page Équipe (la barre Safari se replie alors normalement). */
.app{height:100dvh;width:100%;position:relative;overflow:hidden;}

/* === Accueil (menu) + Vidéos (videoroom) : on DÉVERROUILLE le shell .app pour que
   ce soit le DOCUMENT (body) qui scrolle, comme une page shell normale (Équipe).
   .app n'est plus un conteneur verrouillé/à scroll interne : height auto + overflow
   visible, et les sous-conteneurs idem. La GARANTIE de scrollabilité (qui corrige le
   bug nav du bas iOS) est centralisée dans theme.css (min-height:lvh sur le body) —
   pas ici, pour avoir une seule source de vérité. La caméra garde le shell verrouillé.
   Mobile seul : le desktop garde sa sidebar et ses zones de scroll dédiées. === */
/* === app.html : Accueil/Vidéos/Tutoriel scrollent le DOCUMENT (body), exactement comme
   les pages shell (Profil/Équipe) — UN SEUL modèle de scroll, mobile ET desktop.
   On déverrouille le shell .app (plus de hauteur figée ni overflow:hidden) et on remet
   les écrans en flux normal (position:static). La caméra/télécommande gardent le shell
   plein écran verrouillé (elles ne sont pas dans cette liste). === */
body[data-screen="menu"],
body[data-screen="videoroom"],
body[data-screen="tutorial"],
body[data-screen="profile"],
body[data-screen="team"]{height:auto;}
body[data-screen="remote"]{height:auto;}
body[data-screen="menu"] .app,
body[data-screen="videoroom"] .app,
body[data-screen="tutorial"] .app,
body[data-screen="profile"] .app,
body[data-screen="team"] .app,
body[data-screen="remote"] .app{height:auto;overflow:visible;}
body[data-screen="menu"] .mode-chooser{position:static;inset:auto;height:auto;min-height:0;overflow:visible;}
body[data-screen="videoroom"] .coaching-ui.vr2{position:static;height:auto;overflow:visible;}
body[data-screen="videoroom"] .vr-main{height:auto;flex:none;width:100%;overflow:visible;}
body[data-screen="tutorial"] .tutorial-ui{position:static;inset:auto;height:auto;overflow:visible;}
body[data-screen="tutorial"] .tutorial-body{height:auto;flex:none;overflow:visible;}
/* Télécommande : scroll DOCUMENT comme les autres écrans (fini le shell verrouillé à scroll interne qui
   cassait sur iOS + footer par-dessus). Voir [[pwa-bottom-nav-bug]]. */
body[data-screen="remote"] .remote-ui{position:static;inset:auto;height:auto;min-height:0;overflow:visible;}
/* Mobile : padding bas pour dégager la nav du bas FIXE (sur desktop c'est une sidebar). */
@media(max-width:899px){
  body[data-screen="tutorial"] .tutorial-ui{padding-bottom:calc(env(safe-area-inset-bottom,0px) + 90px);}
}
/* Desktop : la nav est une sidebar fixe de 212px → on décale le contenu (comme .has-tcnav
   des pages shell), et le body scrolle naturellement (une seule barre au bord). */
@media(min-width:900px){
  body[data-screen="menu"],
  body[data-screen="videoroom"],
  body[data-screen="tutorial"],
  body[data-screen="profile"],
  body[data-screen="team"]{padding-left:212px;}
}
/* Caméra SEULE : shell plein écran verrouillé, jamais de scroll (on bloque l'overflow du body pour
   éviter une scrollbar « fantôme » de 1px). La TÉLÉCOMMANDE, elle, scrolle le DOCUMENT comme les
   autres écrans (menu/team) → NE PAS la remettre en overflow:hidden (piège scroll déjà payé). */
body[data-screen="camera"]{overflow:hidden;}

/* ===== Camera stage (sits over live video — needs its own light-on-dark chrome) ===== */
.stage{position:absolute;inset:0;background:#000;}
video{width:100%;height:100%;object-fit:cover;display:block;}
canvas.overlay{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;}

.rotate-overlay{
  display:none;position:absolute;inset:0;z-index:50;background:rgba(13,12,10,.96);
  flex-direction:column;align-items:center;justify-content:center;gap:14px;text-align:center;color:#fff;padding:24px;
}
.rotate-overlay.show{display:flex;}
.rotate-back-btn{z-index:51;}
.rotate-icon{font-size:48px;animation:rotate-hint 1.6s ease-in-out infinite;}
.rotate-overlay p{font-size:14px;color:rgba(255,255,255,.85);margin:0;max-width:260px;}
@keyframes rotate-hint{0%,100%{transform:rotate(0deg);}50%{transform:rotate(90deg);}}

.stage-msg{
  position:absolute;inset:0;z-index:5;
  display:flex;flex-direction:column;align-items:center;justify-content:flex-start;
  gap:12px;text-align:center;padding:24px;
  background:var(--bg);
  /* Contenu plus haut que l'ecran (ex. telephone en PAYSAGE, peu de hauteur) : on scrolle au lieu de
     couper. Les espaceurs ::before/::after centrent verticalement quand ca tient (equivalent de
     justify-content:center, mais sans clipper le haut en cas de debordement). */
  overflow-y:auto;
  /* iOS : un overflow:auto en position:absolute DANS des ancetres overflow:hidden n'accepte le scroll
     TACTILE qu'avec ces props (marche a la souris sans, mais pas au doigt sur mobile = bug signale). */
  -webkit-overflow-scrolling:touch;
  touch-action:pan-y;
  overscroll-behavior:contain;
}
.stage-msg::before,.stage-msg::after{content:"";flex:1 0 0;}
/* PAYSAGE MOBILE (peu de hauteur) : le centrage par les espaceurs flex clippe le haut/bas dans un conteneur
   scrollable (bug flexbox) et la nav du bas masque le bouton "Activer la camera". On coupe le centrage
   (contenu depuis le HAUT, scrollable) + on degage la nav en bas -> le QR ET le bouton sont atteignables. */
/* Declencheur = HAUTEUR faible (paysage sur N'IMPORTE quel telephone, meme grand modele dont la largeur
   paysage depasse 899px). On RESERVE la place du header (haut) ET de la nav (bas) via le padding : sinon le
   contenu "tient" dans la hauteur totale (donc pas de scroll) mais le haut/bas sont CACHES derriere les
   barres fixes (bug signale). Padding -> le contenu vit dans la bande visible et scrolle s'il deborde. */
@media (orientation:landscape) and (max-height:600px){
  .stage-msg{
    justify-content:flex-start;
    padding:calc(58px + env(safe-area-inset-top,0px)) 24px calc(80px + env(safe-area-inset-bottom,0px));
  }
  .stage-msg::before,.stage-msg::after{flex:0 0 0;}
}
.stage-msg p{color:var(--muted);font-size:13px;max-width:280px;margin:0;}
.camera-code-line{font-size:13px;color:var(--text);margin-top:-4px;margin-bottom:4px;text-align:center;}
.camera-code-line b{color:var(--flag);letter-spacing:.08em;font-family:"SF Mono",Menlo,Consolas,monospace;}
.camera-code-line canvas{display:block;margin:8px auto;border-radius:var(--r);background:#fff;padding:6px;}
.remote-connect-label{font-size:12px;font-weight:700;color:var(--muted);}
.remote-connect-label [data-icon]{vertical-align:-.22em;}
.rotate-icon [data-icon]{width:1em;height:1em;}

.brand{
  position:absolute;top:calc(env(safe-area-inset-top,0px) + 10px);left:50%;transform:translateX(-50%);
  font-size:11px;letter-spacing:.04em;color:rgba(255,255,255,.65);z-index:3;pointer-events:none;
}
.brand span{color:#ffb38a;}
.mode-chooser .brand,.remote-ui .brand{position:static;transform:none;margin-bottom:6px;font-size:15px;color:var(--text);}
.mode-chooser .brand span,.remote-ui .brand span{color:var(--flag);}

.cam-menu-btn{
  position:absolute;top:calc(env(safe-area-inset-top,0px) + 12px);left:12px;z-index:8;
  width:38px;height:38px;border-radius:50%;
  background:rgba(9,13,11,.7);border:1px solid rgba(255,255,255,.2);backdrop-filter:blur(4px);
  color:var(--ink-on-dark);display:flex;align-items:center;justify-content:center;font-size:15px;cursor:pointer;
}
.icon-btn{
  appearance:none;width:42px;height:42px;border-radius:50%;
  border:1px solid rgba(255,255,255,.2);background:rgba(9,13,11,.65);backdrop-filter:blur(4px);
  color:var(--ink-on-dark);display:flex;align-items:center;justify-content:center;font-size:17px;cursor:pointer;
}
.icon-btn.lens-btn{font-family:"SF Mono",Menlo,Consolas,monospace;font-size:13px;font-weight:700;}
.icon-btn.auto-mode-btn{font-size:9px;font-weight:800;letter-spacing:.04em;}
.icon-btn:active{transform:scale(.94);}
.icon-btn:disabled{opacity:.35;}
.icon-btn:focus-visible{outline:2px solid var(--flag);outline-offset:2px;}
.icon-btn.active{background:var(--flag);border-color:var(--flag);color:#fff;}

.top-right-stack{
  position:absolute;top:calc(env(safe-area-inset-top,0px) + 12px);right:12px;z-index:3;
  display:flex;flex-direction:column;align-items:flex-end;gap:8px;
}
.timer{
  background:rgba(9,13,11,.7);padding:6px 10px;border-radius:var(--r);
  font-family:"SF Mono",Menlo,Consolas,monospace;font-size:13px;backdrop-filter:blur(4px);
  text-align:center;color:var(--ink-on-dark);
}

.tally{
  position:absolute;top:calc(env(safe-area-inset-top,0px) + 12px);left:56px;z-index:3;
  display:flex;align-items:center;gap:8px;height:38px;box-sizing:border-box;
  background:rgba(9,13,11,.7);padding:0 14px;border-radius:var(--r-pill);backdrop-filter:blur(4px);
}
.tally-dot{width:10px;height:10px;border-radius:50%;background:var(--muted);}
.tally.recording .tally-dot{background:var(--danger);animation:blink 1s steps(2,end) infinite;}
.tally.arming .tally-dot{background:var(--amber);}
@media (prefers-reduced-motion: reduce){.tally.recording .tally-dot{animation:none;}}
@keyframes blink{50%{opacity:.25;}}
.tally-label{font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-on-dark);}
.zone-indicator{display:none;margin-left:6px;color:#9db4ff;font-size:10px;font-weight:800;letter-spacing:.08em;}

.live-pill{
  position:absolute;top:calc(env(safe-area-inset-top,0px) + 56px);left:12px;z-index:3;
  display:flex;gap:10px;background:rgba(9,13,11,.7);padding:6px 12px;border-radius:var(--r-pill);
  backdrop-filter:blur(4px);font-size:12px;font-weight:700;color:var(--ink-on-dark);
}
.live-pill .item{display:flex;align-items:center;gap:5px;}
.live-pill .muted-label{color:#b9b3a4;font-weight:600;}

.zone-boxes,.draw-preview{position:absolute;inset:0;pointer-events:none;}
.zone-box{
  position:absolute;border:2px dashed var(--flag);background:rgba(255,90,31,.12);
  pointer-events:none;z-index:4;border-radius:var(--r-sm);
}
.zone-box .zone-del{
  position:absolute;top:-11px;right:-11px;width:22px;height:22px;border-radius:50%;
  background:var(--danger);color:#fff;border:none;font-size:13px;font-weight:800;
  display:flex;align-items:center;justify-content:center;cursor:pointer;pointer-events:auto;
}
.draw-preview{display:none;border:2px dashed var(--flag);background:rgba(255,90,31,.12);z-index:22;border-radius:var(--r-sm);}
.draw-layer{position:absolute;inset:0;display:none;z-index:20;cursor:crosshair;touch-action:none;}
.draw-hint{
  position:absolute;top:calc(env(safe-area-inset-top,0px) + 12px);left:50%;transform:translateX(-50%);
  z-index:21;display:none;align-items:center;gap:10px;
  background:rgba(9,13,11,.88);backdrop-filter:blur(4px);color:var(--ink-on-dark);
  padding:8px 10px 8px 14px;border-radius:var(--r-pill);font-size:12px;white-space:nowrap;
}

.toast{
  position:absolute;bottom:96px;left:50%;transform:translateX(-50%) translateY(10px);z-index:25;
  background:rgba(18,16,12,.94);border:1px solid rgba(255,255,255,.15);backdrop-filter:blur(4px);
  padding:10px 16px;border-radius:var(--r-lg);font-size:12px;font-weight:600;max-width:88vw;text-align:center;
  opacity:0;pointer-events:none;color:var(--ink-on-dark);transition:opacity .2s ease, transform .2s ease;
}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0);}
.toast.flash{border-color:var(--flag);color:#ffb38a;}

/* Décompte de fin de capture RecallMode — on attend la fin du segment en cours.
   Volontairement gros et explicite pour que ça ne ressemble pas à un bug. */
.capture-countdown{
  display:none;position:absolute;inset:0;z-index:30;
  flex-direction:column;align-items:center;justify-content:center;gap:6px;text-align:center;
  padding:24px;background:rgba(13,12,10,.82);backdrop-filter:blur(3px);color:#fff;
}
.capture-countdown.show{display:flex;}
.capture-countdown .cc-rec{
  display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:800;
  letter-spacing:.08em;color:#ffb3b3;background:rgba(214,69,69,.18);
  border:1px solid var(--danger);padding:6px 14px;border-radius:var(--r-pill);
}
.capture-countdown .cc-dot{width:10px;height:10px;border-radius:50%;background:var(--danger);animation:blink 1s steps(2,end) infinite;}
.capture-countdown .cc-title{font-size:18px;font-weight:800;margin-top:12px;}
.capture-countdown .cc-num{
  font-size:76px;font-weight:800;line-height:1;color:var(--flag);
  font-family:"SF Mono",Menlo,Consolas,monospace;margin:4px 0;
}
.capture-countdown .cc-sub{font-size:13px;color:rgba(255,255,255,.8);max-width:300px;line-height:1.4;}
@media (prefers-reduced-motion: reduce){.capture-countdown .cc-dot{animation:none;}}

.replay-capture-row{
  position:absolute;left:0;right:96px;bottom:calc(env(safe-area-inset-bottom,0px) + 20px);z-index:3;
  display:flex;justify-content:center;gap:10px;padding:0 16px;
}
.capture-pill{
  flex:1;max-width:120px;appearance:none;border:1px solid rgba(255,255,255,.2);
  background:rgba(18,16,12,.85);backdrop-filter:blur(4px);color:var(--ink-on-dark);
  border-radius:var(--r-lg);padding:8px 6px;font-size:11px;font-weight:700;
  text-transform:uppercase;letter-spacing:.03em;line-height:1.5;cursor:pointer;
}
.capture-pill b{
  display:block;font-size:14px;font-family:"SF Mono",Menlo,Consolas,monospace;
  letter-spacing:0;text-transform:none;color:#ffb38a;
}
.capture-pill:active{transform:scale(.95);background:rgba(255,90,31,.25);}
.capture-pill-plus{border-style:dashed;}
.capture-pill-plus b{color:#fff;font-size:18px;}

/* Barre du bas de l'écran caméra : démarrer / terminer l'entraînement (à gauche de la colonne). */
.cam-session-bar{
  position:absolute;left:0;right:96px;bottom:calc(env(safe-area-inset-bottom,0px) + 20px);z-index:3;
  display:flex;justify-content:center;padding:0 16px;
}
html.tc-cam-notch-right .cam-session-bar{left:96px;right:0;}
.cam-session-btn{
  appearance:none;border:none;cursor:pointer;width:100%;min-width:220px;max-width:360px;
  padding:15px 20px;border-radius:var(--r-lg);background:var(--flag);color:#fff;
  font:inherit;font-weight:800;font-size:15px;letter-spacing:.02em;text-transform:uppercase;
  box-shadow:var(--shadow);
}
.cam-session-btn.active{
  background:rgba(18,16,12,.85);color:var(--ink-on-dark);
  border:1px solid rgba(255,255,255,.28);backdrop-filter:blur(4px);box-shadow:none;
}
.cam-session-btn:active{transform:scale(.98);}
/* Options de durée (fly-out latéral) : boutons compacts, le cercle sélectionné passe en orange. */
.side-bar .dur-group .dur-opt{width:60px;max-width:60px;}
.dur-group .dur-opt .circle{width:42px;height:42px;}
.dur-group .dur-opt.on .circle{background:var(--flag);border-color:var(--flag);color:#fff;}

.bottom-bar{
  position:absolute;left:0;right:0;bottom:0;z-index:3;
  padding:14px 16px calc(env(safe-area-inset-bottom,0px) + 14px);
  display:flex;align-items:center;justify-content:center;gap:18px;
  background:linear-gradient(to top, rgba(0,0,0,.78), rgba(0,0,0,0));
}
.dock-btn{
  display:flex;flex-direction:column;align-items:center;gap:4px;
  background:none;border:none;color:var(--ink-on-dark);
  font-size:10px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
  cursor:pointer;max-width:84px;text-align:center;
}
.dock-btn .circle{
  width:46px;height:46px;border-radius:50%;
  border:1px solid rgba(255,255,255,.2);background:rgba(18,16,12,.8);backdrop-filter:blur(4px);
  display:flex;align-items:center;justify-content:center;font-size:18px;position:relative;
}
.dock-btn.rec-btn .circle{width:62px;height:62px;background:var(--flag);border-color:var(--flag);color:#fff;}
.dock-btn.rec-btn.recording .circle{background:var(--danger);border-color:var(--danger);color:#fff;}
.dock-btn:active .circle{transform:scale(.94);}
.dock-btn:disabled,.dock-btn[disabled]{opacity:.4;}
.badge{
  position:absolute;top:-2px;right:-2px;min-width:16px;height:16px;padding:0 4px;
  background:var(--flag);color:#fff;border-radius:var(--r-pill);font-size:10px;font-weight:800;
  display:flex;align-items:center;justify-content:center;
}
.badge:empty{display:none;}

/* Colonne verticale de boutons de l'écran caméra. Elle se place du côté « bas du téléphone »
   (opposé au notch) : par défaut à droite (notch à gauche), et à GAUCHE si le téléphone est tourné
   dans l'autre sens (notch à droite) via html.tc-cam-notch-right. Le notch étant centré sur le
   petit côté, il ne gêne que cette colonne (centrée verticalement) — pas les coins. */
.side-bar{
  position:absolute;top:50%;right:10px;transform:translateY(-50%);z-index:3;
  display:flex;flex-direction:column;align-items:center;gap:16px;
}
html.tc-cam-notch-right .side-bar{right:auto;left:10px;}
/* Colonne à gauche → on déplace retour + pastille PRÊT à DROITE (opposé), sinon ils se chevauchent
   avec le haut de la colonne. Le timer descend sous eux pour ne pas les recouvrir. */
html.tc-cam-notch-right .cam-menu-btn{left:auto;right:12px;}
html.tc-cam-notch-right .tally{left:auto;right:56px;}
html.tc-cam-notch-right .top-right-stack{top:calc(env(safe-area-inset-top,0px) + 58px);}
/* Largeur de colonne UNIFORME : tous les boutons occupent le même gabarit → cercles bien centrés
   et alignés verticalement, quelle que soit la taille du cercle (rec plus gros). */
.side-bar .dock-btn{width:76px;max-width:76px;text-shadow:0 1px 3px rgba(0,0,0,.6);}
.side-bar .dock-btn .circle{margin:0 auto;}
/* Groupe camera : un bouton camera qui deploie Zoom + Av/Ar vers la gauche.
   Sous-groupe en position absolue → s'ouvre sans décaler le reste de la colonne. */
.cam-group{position:relative;}
.cam-sub{
  position:absolute;right:100%;top:50%;margin-right:10px;
  display:flex;flex-direction:row;align-items:center;gap:10px;
  opacity:0;pointer-events:none;transform:translateY(-50%) translateX(14px);
  transition:opacity .2s ease, transform .28s ease;
}
.cam-group.open .cam-sub{opacity:1;pointer-events:auto;transform:translateY(-50%) translateX(0);}
/* Colonne à gauche (notch à droite) : le sous-menu se déploie vers la DROITE. */
html.tc-cam-notch-right .cam-sub{right:auto;left:100%;margin-right:0;margin-left:10px;transform:translateY(-50%) translateX(-14px);}
html.tc-cam-notch-right .cam-group.open .cam-sub{transform:translateY(-50%) translateX(0);}
.cam-group.open #camToggleBtn .circle{background:var(--flag);border-color:var(--flag);color:#fff;}
.dock-btn .circle.lens-circle{font-family:"SF Mono",Menlo,Consolas,monospace;font-size:15px;font-weight:700;}

/* Popup « Mode de capture » (Recall / Normal / Auto) */
.mode-popup-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:60;display:none;}
.mode-popup-backdrop.open{display:block;}
.mode-popup{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);z-index:61;display:none;flex-direction:column;gap:8px;width:min(340px,86vw);max-height:88vh;overflow-y:auto;background:rgba(20,22,20,.96);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.14);border-radius:var(--r-lg);padding:12px;box-shadow:var(--shadow-lg);}
.mode-popup.open{display:flex;}
.mode-opt{text-align:left;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1);border-radius:var(--r);padding:11px 13px;color:#fff;cursor:pointer;display:flex;flex-direction:row;align-items:center;gap:12px;font-family:inherit;}
.mode-opt:hover{border-color:var(--flag);}
.mode-opt.on{border-color:var(--flag);background:rgba(255,90,31,.16);}
.mode-opt-ic{flex-shrink:0;width:40px;height:40px;border-radius:50%;background:rgba(255,255,255,.06);display:flex;align-items:center;justify-content:center;color:#fff;}
.mode-opt.on .mode-opt-ic{background:rgba(255,90,31,.2);color:var(--flag);}
.mode-opt-txt{display:flex;flex-direction:column;gap:3px;min-width:0;}
.mode-opt-txt b{font-size:15px;font-weight:800;}
.mode-opt-txt em{font-style:normal;font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.05em;color:var(--flag);background:rgba(255,90,31,.18);border-radius:var(--r-sm);padding:1px 6px;margin-left:6px;}
.mode-opt-txt > span{font-size:12px;color:rgba(255,255,255,.65);line-height:1.35;}

/* ===== Buttons (paper-themed, used everywhere off-video) ===== */
/* .btn UNIFIE avec components.css (source canonique) : le SPA et les pages shell ont maintenant le MEME
   bouton (rayon, graisse, bordure token, focus orange, aplat). SPA-only conserve : .toggled. */
.btn{
  appearance:none;display:inline-flex;align-items:center;justify-content:center;gap:8px;
  border:1px solid var(--line);border-radius:var(--r);padding:10px 16px;
  font:inherit;font-weight:700;font-size:14px;line-height:1;
  background:var(--surf);color:var(--ink);cursor:pointer;text-decoration:none;
  transition:filter .12s ease, background .12s ease, transform .08s ease;
}
.btn:hover{background:var(--surface-2);}
.btn:active{transform:translateY(1px);}
.btn:disabled{opacity:.5;cursor:default;}
.btn:focus-visible{outline:2px solid var(--flag);outline-offset:2px;}
.btn.primary{background:var(--flag);color:#fff;border-color:var(--flag);}
.btn.primary:hover{background:var(--flag);filter:brightness(.96);}
.btn.danger{background:var(--danger);color:#fff;border-color:var(--danger);}
.btn.danger:hover{background:var(--danger);filter:brightness(.96);}
.btn.ghost{background:transparent;border-color:transparent;color:var(--muted);}
.btn.ghost:hover{background:var(--surface-2);color:var(--ink);}
.btn.sm{padding:7px 12px;font-size:13px;border-radius:var(--r);}
.btn.toggled{background:var(--amber);color:#fff;border-color:var(--amber);}
.btn.block{width:100%;}

.nav-back-btn{
  appearance:none;border:1px solid rgba(26,26,26,.08);background:var(--surface);color:var(--text);
  border-radius:var(--r-pill);padding:8px 16px;font-size:12px;font-weight:700;cursor:pointer;
  box-shadow:0 3px 10px rgba(26,26,26,.10);
}
/* Mobile : les boutons « Retour » n'affichent QUE la fleche (le mot est masque pour gagner de la place).
   Selecteur button/a pour battre la specificite de base quel que soit l'ordre de chargement des CSS. */
@media(max-width:899px){
  button.nav-back-btn, a.nav-back-btn{font-size:0;gap:0;padding-left:13px;padding-right:13px;}
  .nav-back-btn::before{content:"\2190";font-size:14px;font-weight:700;line-height:1;}
}
.remote-ui .nav-back-btn{position:absolute;top:calc(env(safe-area-inset-top,0px) + 16px);left:16px;z-index:5;}

/* ===== Backdrop + Drawers (Réglages / Clips) ===== */
.backdrop{position:fixed;inset:0;background:rgba(0,0,0,.5);opacity:0;pointer-events:none;transition:opacity .2s ease;z-index:40;}
.backdrop.show{opacity:1;pointer-events:auto;}
.drawer{
  position:fixed;top:0;bottom:0;right:0;width:min(420px, 92vw);
  background:var(--surface);
  transform:translateX(100%);transition:transform .25s ease;z-index:50;overflow-y:auto;
  padding:calc(env(safe-area-inset-top,0px) + 16px) calc(env(safe-area-inset-right,0px) + 18px) calc(env(safe-area-inset-bottom,0px) + 24px) 18px;
}
/* Bordure + ombre UNIQUEMENT à l'ouverture. Fermé, le tiroir est hors-écran à droite
   (translateX(100%)) mais son ombre `-8px` bavait sur le bord droit visible → bande grise
   parasite (surtout sur app.html qui garde ces vues dans le DOM, pas sur les pages shell). */
.drawer.open{transform:translateX(0);border-left:1px solid rgba(26,26,26,.08);box-shadow:-8px 0 0 rgba(0,0,0,.08);}
.drawer-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;}
.drawer-head h2{font-size:14px;margin:0;color:var(--text);}
.drawer-close{background:none;border:none;color:var(--muted);font-size:22px;line-height:1;cursor:pointer;padding:4px;}
.drawer-close:focus-visible{outline:2px solid var(--amber);}

.section{margin-bottom:22px;}
.section h3{font-size:11px;text-transform:uppercase;letter-spacing:.1em;color:var(--muted);margin:0 0 10px;font-weight:700;}
.field{margin-bottom:14px;}
.field label{display:flex;justify-content:space-between;font-size:12px;color:var(--muted);margin-bottom:6px;}
.field label b{color:var(--text);font-weight:700;}
input[type="range"]{width:100%;accent-color:var(--flag);}

.switch-row{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px;gap:12px;}
.switch-row span{font-size:13px;font-weight:600;}
.switch-row .hint{display:block;font-size:11px;color:var(--muted);font-weight:400;margin-top:2px;}
.switch{
  position:relative;width:44px;height:24px;flex-shrink:0;
  background:var(--surface-2);border:1px solid rgba(26,26,26,.08);border-radius:var(--r-pill);cursor:pointer;
}
.switch.on{background:var(--flag);border-color:var(--border);}
.switch::after{
  content:"";position:absolute;top:1px;left:1px;width:16px;height:16px;border-radius:50%;
  background:#fffdf8;border:1.5px solid var(--border);transition:left .15s ease;
}
.switch.on::after{left:23px;}
.switch:focus-visible{outline:2px solid var(--amber);outline-offset:2px;}

.select{
  width:100%;border:1px solid rgba(26,26,26,.08);background:var(--surface-2);color:var(--text);
  border-radius:var(--r-sm);padding:10px 12px;font-size:13px;font-weight:600;
}
.select:focus-visible{outline:2px solid var(--amber);outline-offset:2px;}
.select:disabled{opacity:.4;}

details.diagnostic{border:1px solid rgba(26,26,26,.08);border-radius:var(--r-lg);padding:10px 12px;background:var(--surface-2);}
details.diagnostic summary{cursor:pointer;font-size:12px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.06em;}
details.diagnostic[open] summary{margin-bottom:10px;}

.meter-row{display:flex;align-items:center;gap:10px;margin-bottom:10px;}
.meter{flex:1;height:10px;border-radius:var(--r-sm);background:var(--bg);position:relative;overflow:hidden;border:1px solid var(--border);}
.meter-fill{position:absolute;left:0;top:0;bottom:0;width:0%;background:var(--flag);transition:width .12s linear;}
.meter-threshold{position:absolute;top:-2px;bottom:-2px;width:2px;background:var(--amber);}
.meter-label{font-size:11px;color:var(--muted);min-width:70px;}
.stat-row{display:flex;justify-content:space-between;align-items:baseline;padding:7px 0;border-bottom:1px solid var(--border);}
.stat-row:last-child{border-bottom:none;}
.stat-row .label{font-size:11px;color:var(--muted);}
.stat-row .value{font-family:"SF Mono",Menlo,Consolas,monospace;font-size:12px;font-weight:700;}

.controls-grid{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:6px;}

/* Page « Créer une session » (intermédiaire avant de filmer). */
.cs-ui{display:none;padding:16px 16px calc(env(safe-area-inset-bottom,0px) + 96px);}
.cs-wrap{max-width:520px;margin:0 auto;}
/* Page « Sessions d'entraînement » : PLEINE largeur comme la page Matchs (le calendrier prend tout).
   La liste (single-colonne) reste lisible, centrée à largeur confortable. */
#sessionsListUI .cs-wrap{max-width:none;}
#sessionsListUI #slList{max-width:760px;margin:0 auto;}
/* Toggle Liste/Calendrier compact (pastilles), pas une grosse barre pleine largeur. */
#sessionsListUI .sl-viewtoggle{display:inline-flex;}
#sessionsListUI .sl-vt{flex:0 0 auto;padding:8px 20px;}
.cs-title{font-size:22px;margin:0 0 18px;}
.cs-label{display:block;font-size:13px;font-weight:800;color:var(--text);margin:16px 0 8px;}
.cs-opt-lbl{color:var(--muted);font-weight:600;font-size:12px;}
.cs-team{display:flex;align-items:center;gap:10px;border:1px solid var(--line);background:var(--surface-2);border-radius:var(--r);padding:12px 14px;font-weight:700;color:var(--text);}
.cs-toggle{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
.cs-row2{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
.cs-opt{display:flex;align-items:center;justify-content:center;gap:8px;border:1.5px solid var(--line);background:var(--surface);border-radius:var(--r);padding:16px 12px;font:inherit;font-size:14px;font-weight:700;color:var(--text);cursor:pointer;}
.cs-opt .ic-inline{width:1.2em;height:1.2em;}
.cs-opt.active{border-color:var(--flag);color:var(--flag);background:var(--soft);}
.cs-ui input[type="text"],.cs-ui input[type="date"],.cs-ui input[type="time"],.cs-ui input[type="number"],.cs-ui textarea{
  width:100%;box-sizing:border-box;border:1px solid var(--line);background:var(--surface);color:var(--text);
  border-radius:var(--r);padding:13px 14px;font:inherit;font-size:15px;min-height:50px;
}
/* Programme détaillé : lignes exercice + durée. */
.cs-exlist{display:flex;flex-direction:column;gap:8px;}
.cs-exlist:empty{display:none;}
.cs-exrow{display:grid;grid-template-columns:1fr 92px 46px;gap:8px;align-items:center;}
.cs-exrow input{min-height:46px !important;padding:10px 12px !important;font-size:14px !important;}
.cs-exdel{border:1px solid var(--line);background:var(--surface-2);color:var(--muted);border-radius:var(--r);height:46px;font-size:20px;line-height:1;cursor:pointer;}
.cs-exdel:hover{color:var(--danger);border-color:var(--danger);}
.cs-addex{width:100%;margin-top:8px;}
/* Inputs date/heure : forcer le même gabarit que les autres (sinon iOS les rend tout petits). */
.cs-ui input[type="date"],.cs-ui input[type="time"]{-webkit-appearance:none;appearance:none;display:block;line-height:1.2;}
/* Placeholder date/heure : overlay maison (les inputs natifs restent vides sur mobile).
   On masque le format natif tant que vide+non-focus, et on affiche notre faux placeholder. */
.cs-datewrap{position:relative;}
.cs-toggle3{grid-template-columns:1fr 1fr 1fr;}
.cs-toggle3 .cs-opt{font-size:12.5px;padding:14px 6px;}
.cs-ui input[type="date"]::-webkit-date-and-time-value,.cs-ui input[type="time"]::-webkit-date-and-time-value{text-align:left;}
.cs-ui input::placeholder,.cs-ui textarea::placeholder{color:var(--muted);}
.cs-ui input:focus,.cs-ui textarea:focus{outline:none;border-color:var(--flag);}
.cs-ui textarea{resize:vertical;min-height:84px;line-height:1.5;}
.cs-start{width:100%;margin-top:24px;padding:15px;font-size:16px;}
/* Champ requis non rempli (validation générique, réutilisable partout). */
.field-invalid{border-color:var(--danger) !important;box-shadow:0 0 0 2px rgba(210,69,60,.18);}

/* Vue « Calendrier des sessions » : items de session planifiée. */
.sl-item{border:1px solid var(--line);background:var(--surface);border-radius:var(--r);padding:13px 15px;margin-bottom:10px;}
.sl-item .sl-head{margin-bottom:4px;}
.sl-item .sl-when{font-size:11px;font-weight:800;color:var(--flag);text-transform:uppercase;letter-spacing:.04em;}
.sl-item .sl-title{font-size:16px;font-weight:800;color:var(--text);line-height:1.2;}
.sl-item .sl-sub{font-size:13px;color:var(--muted);margin-top:2px;}
.sl-item .sl-notes{font-size:12.5px;color:var(--muted);margin-top:6px;white-space:pre-wrap;line-height:1.4;}
.sl-item .sl-actions{display:flex;gap:8px;margin-top:12px;}
.sl-item .sl-actions .btn{flex:1;padding:9px;font-size:13px;}
/* #2 : programmes de session par coach */
.sl-prog{margin-top:12px;border-top:1px solid var(--line);padding-top:10px;}
/* Panneaux Modifier / Voir détail dans un item de session. */
.sl-panel{margin-top:10px;border-top:1px solid var(--line);padding-top:10px;}
/* Édition de séance (Modifier) : champs nom/date/heure/lieu. */
.sl-editgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:8px 0;}
.sl-editfield{display:flex;flex-direction:column;gap:3px;font-size:11px;color:var(--muted);}
.sl-editfield input{width:100%;box-sizing:border-box;padding:8px 10px;border:1px solid var(--line);border-radius:var(--r-sm);font:inherit;font-size:13px;background:var(--surface-2);color:var(--text);}
.sl-editsep{border-top:1px solid var(--line);margin:12px 0 8px;}
.sl-exlist{display:flex;flex-direction:column;gap:8px;margin:8px 0;}
.sl-exactions{display:flex;gap:8px;flex-wrap:wrap;margin-top:4px;}
.sl-progedit .sl-prog-vis{display:flex;align-items:center;gap:6px;font-size:12.5px;color:var(--muted);margin-top:8px;}
/* Tableau détail : temps à gauche, coachs en colonnes. */
.sl-progtbl-wrap{overflow-x:auto;}
.sl-progtbl{width:100%;border-collapse:collapse;font-size:12.5px;}
.sl-progtbl th,.sl-progtbl td{border:1px solid var(--line);padding:6px 9px;text-align:left;vertical-align:top;}
.sl-progtbl th{background:var(--surface-2);font-weight:800;color:var(--text);white-space:nowrap;}
.sl-progtbl th:first-child,.sl-progtbl .sl-progtbl-time{background:var(--surface-2);font-weight:800;color:var(--flag);white-space:nowrap;}
.sl-progtbl-empty{background:repeating-linear-gradient(45deg,transparent,transparent 5px,var(--surface-2) 5px,var(--surface-2) 6px);}
.sl-prog-title{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);margin-bottom:8px;}
.sl-prog-blk{background:var(--surface-2);border-radius:var(--r);padding:8px 10px;margin-bottom:8px;}
.sl-prog-who{font-size:11px;font-weight:800;color:var(--flag);margin-bottom:2px;}
.sl-prog-txt{font-size:13px;white-space:pre-wrap;line-height:1.4;}
.sl-prog-edit{width:100%;border:1px solid var(--line);border-radius:var(--r);padding:8px 10px;font-size:13px;font-family:inherit;background:var(--bg);color:var(--text);resize:vertical;}
.sl-prog .btn{margin-top:8px;}
.sl-prog-vis{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--muted);margin-top:10px;cursor:pointer;}
/* Toggle Liste / Calendrier + grille du mois. */
.sl-viewtoggle{display:flex;gap:6px;background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r);padding:3px;margin-bottom:14px;}
.sl-vt{flex:1;border:none;background:none;font:inherit;font-weight:700;font-size:13px;color:var(--muted);padding:8px;border-radius:var(--r-sm);cursor:pointer;}
.sl-vt.active{background:var(--surf);color:var(--flag);}
.sl-cal-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px;}
.sl-cal-head button{border:1px solid var(--line);background:var(--surface);border-radius:var(--r-sm);width:34px;height:34px;font-size:18px;line-height:1;cursor:pointer;color:var(--text);}
.sl-cal-title{font-weight:800;font-size:15px;text-transform:capitalize;}
/* Calendrier des entraînements : MÊME rendu que le calendrier des matchs (toutes les cases bordées). */
.sl-cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;}
.sl-cal-dow{text-align:center;font-size:11px;font-weight:800;color:var(--muted);text-transform:uppercase;padding:2px 0 4px;}
.sl-cal-day{aspect-ratio:1/1;border:1px solid var(--line);border-radius:var(--r-sm);padding:5px 6px;background:var(--surface);position:relative;overflow:hidden;font-size:13px;font-weight:700;color:var(--text);}
.sl-cal-day.other{opacity:.35;}
.sl-cal-day.sl-cal-today{border-color:var(--flag);}
.sl-cal-day.has{cursor:pointer;border-color:rgba(255,90,31,.5);}
.sl-cal-day.has:hover{background:var(--surface-2);}
.sl-cal-dnum{font-size:12px;font-weight:700;color:var(--muted);}
.sl-cal-day.has .sl-cal-dnum{color:var(--text);}
.sl-cal-ev{position:absolute;bottom:5px;left:5px;right:5px;font-size:11px;font-weight:700;line-height:1.25;color:var(--flag);background:var(--soft);border-radius:var(--r-sm);padding:2px 6px;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;}
.sl-cal-ev b{color:var(--muted);}
.sl-cal-day.sel{border-color:var(--flag);background:var(--soft);}
.sl-cal-dot{width:5px;height:5px;border-radius:50%;background:var(--flag);margin-top:3px;}
/* MOBILE : cases trop petites pour le texte → simple pastille (tap le jour = détail dessous). */
@media(max-width:640px){
  .sl-cal-grid{gap:4px;}
  .sl-cal-day{padding:4px;}
  .sl-cal-ev{display:none;}
  .sl-cal-day.has::after{content:'';position:absolute;bottom:6px;left:50%;transform:translateX(-50%);width:7px;height:7px;border-radius:50%;background:var(--flag);}
}
.sl-cal-sessions{margin-top:14px;}

/* Réglages caméra : carte sombre translucide façon popup « Mode », scrollable. Scopé à
   #settingsDrawer pour ne pas toucher le tiroir Clips. */
#settingsDrawer{
  top:50%;left:50%;right:auto;bottom:auto;width:min(340px,86vw);max-height:88vh;overflow-y:auto;
  background:rgba(20,22,20,.96);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border:1px solid rgba(255,255,255,.14);border-radius:var(--r-lg);color:#fff;
  box-shadow:var(--shadow-lg);
  transform:translate(-50%,-50%) scale(.96);opacity:0;pointer-events:none;
  transition:opacity .2s ease, transform .2s ease;
  padding:16px;
}
#settingsDrawer.open{transform:translate(-50%,-50%) scale(1);opacity:1;pointer-events:auto;}
#settingsDrawer .drawer-head h2{color:#fff;font-size:16px;font-weight:800;}
#settingsDrawer .drawer-close{color:rgba(255,255,255,.75);}
#settingsDrawer .section{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1);border-radius:var(--r);padding:14px;margin-bottom:12px;}
#settingsDrawer .section h3{color:rgba(255,255,255,.55);}
/* Sections repliables (comme le Diagnostic) : summary cliquable + chevron. */
#settingsDrawer details.section > summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;font-size:11px;text-transform:uppercase;letter-spacing:.1em;color:rgba(255,255,255,.6);font-weight:700;padding:1px 0;}
#settingsDrawer details.section > summary::-webkit-details-marker{display:none;}
#settingsDrawer details.section > summary::after{content:"";width:7px;height:7px;flex-shrink:0;border-right:2px solid rgba(255,255,255,.5);border-bottom:2px solid rgba(255,255,255,.5);transform:rotate(45deg);transition:transform .18s ease;margin-left:8px;}
#settingsDrawer details.section[open] > summary{margin-bottom:12px;}
#settingsDrawer details.section[open] > summary::after{transform:rotate(-135deg);}
#settingsDrawer .field label,#settingsDrawer .switch-row .hint,#settingsDrawer .stat-row .label,#settingsDrawer .meter-label{color:rgba(255,255,255,.6);}
#settingsDrawer .field label b,#settingsDrawer .switch-row span,#settingsDrawer .stat-row .value{color:#fff;}
#settingsDrawer .select,#settingsDrawer input[type="text"],#settingsDrawer input[type="number"]{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.16);color:#fff;}
#settingsDrawer .switch{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.16);}
#settingsDrawer .switch.on{background:var(--flag);border-color:var(--flag);}
#settingsDrawer .stat-row{border-color:rgba(255,255,255,.1);}
#settingsDrawer details.diagnostic{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.1);}
#settingsDrawer details.diagnostic summary{color:rgba(255,255,255,.6);}
#settingsDrawer .meter{background:rgba(0,0,0,.4);border-color:rgba(255,255,255,.16);}

.clips{list-style:none;margin:0;padding:0;}
.clip{border:1px solid rgba(26,26,26,.08);border-radius:var(--r-lg);padding:10px;margin-bottom:10px;background:var(--surface-2);box-shadow:0 4px 14px rgba(26,26,26,.10);}
.clip-head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:6px;}
.clip-head .t{font-size:12px;color:var(--muted);}
.clip-head .d{font-family:"SF Mono",Menlo,Consolas,monospace;font-size:13px;font-weight:700;}
.clip video{border-radius:var(--r-sm);width:100%;display:block;margin-bottom:6px;background:#000;}
.clip a{font-size:12px;color:var(--flag);text-decoration:none;font-weight:700;}
.moment-li{margin-bottom:10px;}
.moment-folder{border:1px solid rgba(26,26,26,.08);border-radius:var(--r-lg);background:var(--surface-2);overflow:hidden;box-shadow:0 4px 14px rgba(26,26,26,.10);}
.moment-folder summary{list-style:none;cursor:pointer;display:flex;align-items:baseline;gap:8px;padding:10px;}
.moment-folder summary::-webkit-details-marker{display:none;}
.moment-folder summary .chevron{color:var(--muted);font-size:11px;transition:transform .15s ease;flex-shrink:0;}
.moment-folder[open] summary .chevron{transform:rotate(90deg);}
.moment-folder summary .t{font-size:12px;color:var(--muted);flex:1;}
.moment-folder summary .d{font-family:"SF Mono",Menlo,Consolas,monospace;font-size:12px;font-weight:700;}
.moment-folder-body{padding:0 10px 10px;}
.moment-folder-body a{font-size:12px;color:var(--flag);text-decoration:none;font-weight:700;}
.empty{font-size:12px;color:var(--muted);text-align:center;padding:18px 0;}
.drawer-footnote{font-size:11px;color:var(--muted);text-align:center;margin-top:18px;}

/* ===== Mode chooser (home screen) ===== */
.mode-chooser{
  position:fixed;inset:0;z-index:60;background:var(--bg);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:14px;padding:24px;text-align:center;
}
.mode-chooser p{color:var(--muted);font-size:13px;max-width:280px;margin:0 0 18px;}

.mode-card-list{display:flex;flex-direction:column;gap:10px;width:100%;max-width:320px;}
.mode-card{
  appearance:none;border:none;background:var(--surface);color:var(--text);
  display:flex;align-items:center;gap:14px;text-align:left;
  border-radius:var(--r-lg);padding:14px 16px;cursor:pointer;
  box-shadow:0 4px 14px rgba(26,26,26,.08);transition:transform .08s ease, box-shadow .08s ease;
}
.mode-card:active{transform:scale(.98);box-shadow:0 2px 8px rgba(26,26,26,.08);}
.mode-card-icon{
  width:44px;height:44px;border-radius:var(--r);background:var(--surface-2);flex-shrink:0;
  display:flex;align-items:center;justify-content:center;font-size:20px;
}
.mode-card-text{display:flex;flex-direction:column;gap:2px;}
.mode-card-title{font-weight:800;font-size:14px;}
.mode-card-sub{font-size:11px;color:var(--muted);}
.mode-card.coming-soon{opacity:.6;}
.mode-card.coming-soon .mode-card-icon{filter:grayscale(.45);}
.soon-badge{display:inline-block;margin-left:6px;font-size:9px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:#fff;background:var(--muted);border-radius:var(--r-pill);padding:2px 7px;vertical-align:middle;}
#chooseCameraBtn .mode-card-icon{background:var(--flag);}

/* ===== Télécommande ===== */
.remote-ui{
  display:none;position:absolute;inset:0;z-index:10;
  flex-direction:column;align-items:center;height:100dvh;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;background:var(--bg);
  padding:calc(env(safe-area-inset-top,0px) + 24px) 20px calc(env(safe-area-inset-bottom,0px) + 24px);
  gap:16px;
}
.remote-connect,.remote-controls{width:100%;max-width:480px;display:flex;flex-direction:column;gap:8px;}
.remote-capture-row{display:flex;gap:8px;}
.remote-capture-row .btn b{display:block;font-size:14px;font-family:"SF Mono",Menlo,Consolas,monospace;}

/* ===== RECALL MODE (télécommande) ===== */
.recall-head{text-align:center;margin:4px 0 8px;}
.recall-title{font-family:var(--font-display,'Oswald',sans-serif);font-weight:700;font-size:34px;line-height:.92;letter-spacing:.01em;text-transform:uppercase;color:var(--text);}
.recall-title span{color:var(--flag);}
.recall-sub{font-size:12px;font-weight:800;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);margin-top:10px;}
.remote-capture-row.recall{align-items:center;justify-content:center;gap:18px;}
.recall-dial{width:172px;height:172px;border-radius:50%;border:none;background:var(--flag);color:#fff;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;cursor:pointer;font:inherit;
  box-shadow:0 12px 36px rgba(255,90,31,.42),inset 0 0 0 7px rgba(255,255,255,.18);transition:transform .12s ease;}
.recall-dial:active{transform:scale(.95);}
.recall-dial .rd-num{font-family:var(--font-display,'Oswald',sans-serif);font-weight:700;font-size:48px;line-height:1;}
.recall-dial .rd-lab{font-size:11px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;opacity:.92;}
.recall-side{display:flex;flex-direction:column;align-items:center;gap:2px;background:var(--surface-2);border:1px solid var(--border);
  border-radius:var(--r-lg);padding:16px 9px;min-width:68px;cursor:pointer;color:var(--text);font:inherit;transition:transform .12s ease;}
.recall-side:active{transform:scale(.95);}
.recall-side b{font-family:var(--font-display,'Oswald',sans-serif);font-weight:700;font-size:22px;}
.recall-side span{font-size:10px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);}
/* Durée personnalisée */
.recall-perso-btn{align-self:center;background:none;border:none;color:var(--muted);font:inherit;font-size:13px;font-weight:700;text-decoration:underline;cursor:pointer;padding:4px;}
.recall-perso{display:flex;flex-direction:column;align-items:center;gap:10px;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);padding:14px;}
.recall-perso-val{font-family:var(--font-display,'Oswald',sans-serif);font-size:30px;font-weight:700;color:var(--flag);}
.recall-perso input[type=range]{width:100%;accent-color:var(--flag);}
.recall-perso .btn{width:100%;}
.remote-scan-btn{display:flex;align-items:center;justify-content:center;gap:8px;padding:18px 16px;font-size:15px;}
.remote-or{text-align:center;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin:2px 0;}
/* Scanner QR plein écran */
.qr-scan-overlay{display:none;position:fixed;inset:0;z-index:120;background:#000;flex-direction:column;align-items:center;justify-content:center;gap:18px;padding:24px;}
.qr-scan-overlay.open{display:flex;}
.qr-scan-overlay video{width:100%;max-width:480px;max-height:70vh;object-fit:cover;border-radius:var(--r-lg);background:#000;}
.qr-scan-frame{position:absolute;width:230px;height:230px;border:3px solid var(--flag);border-radius:var(--r-lg);box-shadow:0 0 0 9999px rgba(0,0,0,.45);pointer-events:none;}
.qr-scan-hint{color:#fff;font-size:14px;font-weight:700;text-align:center;text-shadow:0 1px 4px rgba(0,0,0,.7);z-index:1;}
.qr-scan-overlay .btn{z-index:1;}
.ic-inline{display:inline-flex;width:1.15em;height:1.15em;vertical-align:-.18em;flex-shrink:0;}
.ic-inline svg{width:100%;height:100%;}
.recall-feedback{min-height:20px;text-align:center;font-size:13px;font-weight:700;}
.recall-feedback.pending{color:var(--muted);}
.recall-feedback.ok{color:var(--green);}
.recall-feedback.err{color:var(--danger);}
.remote-connect label{font-size:12px;color:var(--muted);}
#remoteCodeInput{
  width:100%;padding:14px;font-size:20px;text-align:center;letter-spacing:.1em;
  border-radius:var(--r-lg);border:1px solid rgba(26,26,26,.08);background:var(--surface);color:var(--text);
  box-shadow:0 4px 14px rgba(26,26,26,.10);
}
#remoteCodeInput:focus-visible{outline:2px solid var(--amber);}
.remote-status-badge{
  align-self:center;background:var(--surface);border:1px solid rgba(26,26,26,.08);
  border-radius:var(--r-pill);padding:8px 18px;font-size:13px;font-weight:700;
  letter-spacing:.06em;text-transform:uppercase;box-shadow:0 4px 14px rgba(26,26,26,.10);
}
.remote-controls .btn{padding:16px;font-size:15px;}
.remote-stats{display:flex;justify-content:center;gap:6px;font-size:12px;color:var(--muted);}
.remote-stats b{color:var(--text);}
/* Statut de l'appareil-caméra (batterie / signal / stockage) + réglages à distance. */
.remote-camstatus{display:flex;justify-content:center;gap:14px;flex-wrap:wrap;font-size:12px;color:var(--muted);margin:2px 0;}
.remote-camstatus b{color:var(--text);}
.remote-camstatus .sig-wrap{display:inline-flex;align-items:center;gap:5px;}
.remote-camstatus .sig{display:inline-flex;align-items:flex-end;gap:2px;height:14px;}
.remote-camstatus .sig-bar{width:3px;border-radius:1px;background:var(--line);}
.remote-camstatus .sig-bar:nth-child(1){height:4px;}
.remote-camstatus .sig-bar:nth-child(2){height:7px;}
.remote-camstatus .sig-bar:nth-child(3){height:10px;}
.remote-camstatus .sig-bar:nth-child(4){height:14px;}
.remote-camstatus .sig-bar.on{background:var(--flag);}
.remote-settings{border:1px solid var(--border);border-radius:var(--r);padding:14px;background:var(--surface);}
.remote-settings .rs-title{font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-bottom:12px;}
.rs-row{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px;}
.rs-row>span{font-size:13px;color:var(--text);font-weight:700;}
.rs-btns{display:flex;gap:6px;}
.rs-btns button{border:1.5px solid var(--border);background:var(--surface-2);color:var(--text);border-radius:var(--r);padding:10px 14px;font:inherit;font-size:13px;font-weight:700;cursor:pointer;}
.rs-btns button.on{background:var(--soft);border-color:var(--flag);color:var(--flag);}
/* Réglage indisponible dans le mode courant (ex. 2K/4K en panorama) : grisé mais toujours cliquable,
   le clic explique pourquoi au lieu de ne rien faire. */
.rs-btns button.rs-unavail{opacity:.45;border-style:dashed;}
.rs-note{font-size:12px;color:var(--flag);font-weight:700;min-height:16px;text-align:center;}
/* Capture Recall (télécommande) : gros bouton Capturer + durée présélectionnée en dessous. */
.remote-capture-row.recall{flex-direction:column;align-items:center;gap:0;padding:14px 0;}
.recall-big{width:230px;height:230px;border-radius:50%;margin:12px auto;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;background:var(--flag);color:#fff;border:none;font:inherit;cursor:pointer;box-shadow:0 8px 22px rgba(255,90,31,.3);}
.recall-big:active{transform:scale(.96);}
.recall-big .rb-lab{font-size:24px;font-weight:800;text-transform:uppercase;letter-spacing:.03em;}
.recall-big .rb-dur{font-size:17px;font-weight:700;opacity:.9;}
.recall-durs{width:100%;}
/* Petit bouton « Nouvelle capture » sous l'aperçu. */
.remote-controls .btn.rp-new{padding:8px;font-size:12px;margin-top:4px;}
/* Bouton Enregistrer (mode Normal) : rond comme le bouton rec de la caméra. */
.remote-controls .btn.rec-round{width:230px;height:230px;border-radius:50%;margin:14px auto;display:flex;align-items:center;justify-content:center;font-size:19px;font-weight:800;padding:0;}
.remote-controls .btn.rec-round.recording{background:var(--danger);border-color:var(--danger);color:#fff;}
.recall-durs{display:flex;gap:8px;margin-top:10px;}
.recall-dur{flex:1;border:1.5px solid var(--border);background:var(--surface);color:var(--text);border-radius:var(--r);padding:12px 4px;font:inherit;font-size:14px;font-weight:800;cursor:pointer;}
.recall-dur.on{background:var(--soft);border-color:var(--flag);color:var(--flag);}

/* ===== Télécommande refondue : barre du haut + gros bouton d'état unique + modale quitter ===== */
.remote-topbar{display:flex;align-items:center;gap:10px;width:100%;padding:0 0 8px;border-bottom:1px solid var(--border);margin-bottom:2px;}
.rt-conn{display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:700;color:var(--text);min-width:0;}
.rt-conn span:last-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.rt-dot{width:9px;height:9px;flex-shrink:0;border-radius:50%;background:var(--green);box-shadow:0 0 0 3px rgba(34,192,122,.18);}
.rt-dot.off{background:var(--muted);box-shadow:none;}
.rt-store{margin-left:auto;font-size:13px;color:var(--muted);font-weight:600;white-space:nowrap;}
.rt-store b{color:var(--text);}
.rt-quit{width:36px;height:36px;flex-shrink:0;border-radius:50%;border:1.5px solid var(--border);background:var(--surface-2);color:var(--text);font-size:22px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;}
.rt-quit:active{transform:scale(.94);}
/* ---- Télécommande : état de CHAQUE caméra reliée (une ligne par caméra, dès 2 caméras) ---- */
.remote-camlist{display:grid;gap:6px;width:100%;}
.remote-camlist .rcam{display:grid;grid-template-columns:auto auto 1fr;align-items:center;gap:8px;
  background:var(--surface-2);border:1px solid var(--border);border-radius:var(--r-sm);padding:7px 10px;}
.remote-camlist .rcam b{font-size:13px;color:var(--text);white-space:nowrap;}
.remote-camlist .rcam span{font-size:11.5px;color:var(--muted);text-align:right;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.remote-camlist .rcam-dot{width:9px;height:9px;border-radius:50%;background:var(--muted);flex-shrink:0;}
.remote-camlist .rcam-dot.on{background:var(--green);}
.remote-camlist .rcam-dot.rec{background:var(--danger);}
/* ---- Télécommande : qui pilote (une seule télécommande active à la fois) ---- */
.remote-holder{width:100%;border-radius:var(--r-sm);padding:10px 12px;font-size:12.5px;line-height:1.4;
  display:flex;flex-direction:column;gap:8px;text-align:center;}
.remote-holder.wait{background:var(--surface);border:2px solid var(--amber);color:var(--amber);font-weight:700;}
.remote-holder.ok{background:var(--surface);border:1px solid var(--green);color:var(--green);font-weight:700;}
.remote-holder .rh-btn{width:100%;}
/* Sans la main : les commandes sont grisées (l'aperçu et les clips restent consultables). */
.rc-locked .remote-big-action,
.rc-locked .recall-durs,
.rc-locked #remoteSettingsBtn,
.rc-locked .recall-perso{opacity:.45;pointer-events:none;}
/* Gros bouton d'état UNIQUE : Commencer (neutre) → Capturer (orange) / Enregistrer-Arrêter (rouge). */
/* Gros bouton d'état = grand CERCLE dans les 2 états. Démarrer = contour orange (creux) ; Capturer = plein orange. */
.remote-big-action{width:min(86vw,340px);aspect-ratio:1/1;border-radius:50%;border:3px solid var(--flag);background:var(--surface);color:var(--text);font:inherit;font-size:22px;font-weight:800;cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;margin:16px auto 6px;padding:20px;text-align:center;line-height:1.15;transition:transform .08s;}
.remote-big-action:active{transform:scale(.97);}
.remote-big-action:disabled{opacity:.5;cursor:default;}
.remote-big-action.capturing{background:var(--flag);border-color:var(--flag);color:#fff;box-shadow:0 12px 34px rgba(255,90,31,.36);}
.remote-big-action.capturing.recording{background:var(--danger);border-color:var(--danger);}
.remote-big-action .rba-lab{font-size:30px;text-transform:uppercase;letter-spacing:.03em;}
.remote-big-action .rba-sub{font-size:13px;font-weight:700;opacity:.92;}
/* « RECALL MODE » en marque : RECALL noir, MODE blanc (typo affichage, comme l'ancien header). */
.remote-big-action .rba-mark{font-family:var(--font-display,'Oswald',sans-serif);font-weight:700;font-size:16px;letter-spacing:.05em;line-height:1;text-transform:uppercase;color:#111;}
.remote-big-action .rba-mark span{color:#fff;}
.remote-big-action .rba-hint{font-size:11px;font-weight:600;opacity:.92;margin-top:2px;text-transform:none;letter-spacing:0;}
/* Fond + centrage GARANTIS pour les modales de la télécommande (sinon carte transparente = illisible). */
#remoteQuitModal.open,#remoteSettingsModal.open{display:flex;position:fixed;inset:0;z-index:10000;align-items:center;justify-content:center;background:rgba(0,0,0,.6);padding:20px;}
.rq-card,.rs-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);padding:20px;box-shadow:var(--shadow-lg);max-height:88vh;overflow-y:auto;}
/* Modale « Quitter la télécommande ». */
.rq-card{max-width:340px;width:calc(100% - 40px);display:flex;flex-direction:column;gap:10px;text-align:center;}
.rq-title{margin:0;font-size:18px;}
.rq-sub{margin:0 0 4px;color:var(--muted);font-size:14px;}
.rq-card .btn.block{width:100%;padding:14px;font-size:15px;}
.rq-card .btn.rq-confirm{background:var(--danger);border-color:var(--danger);color:#fff;}
/* Barre du haut : lien direct (texte, pas de "signal"). */
.rt-link{font-size:13px;font-weight:700;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;}
/* Actions COMPACTES (grille 4 : Réglages/Aperçu/Photo/Clips). */
.remote-actions{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;width:100%;margin-top:6px;}
.remote-actions .ra-btn{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;padding:10px 4px;font-size:11.5px;font-weight:700;min-height:0;}
.remote-actions .ra-btn [data-icon]{width:20px;height:20px;display:inline-flex;}
@media (max-width:360px){.remote-actions{grid-template-columns:repeat(2,1fr);}}
/* Modale RÉGLAGES caméra (remplace le tiroir). */
.rs-card{max-width:420px;width:calc(100% - 40px);}
.rs-modal-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;}
.rs-modal-head h3{margin:0;font-size:18px;}
.rs-modal-x{width:34px;height:34px;border-radius:50%;border:1.5px solid var(--border);background:var(--surface-2);color:var(--text);font-size:20px;line-height:1;cursor:pointer;}
.rs-card .remote-settings{display:flex;flex-direction:column;gap:14px;}
/* Réglages : tout CENTRÉ, options À LA LIGNE sous leur titre (sinon ça débordait). */
.rs-card .rs-row{display:flex;flex-direction:column;align-items:center;text-align:center;gap:7px;}
.rs-card .rs-row>span{font-weight:700;font-size:14px;}
.rs-card .rs-btns{display:flex;justify-content:center;flex-wrap:wrap;gap:8px;}
.rs-card .rs-note{text-align:center;}
/* LED verte clignotante (barre du haut) : couleur posée en JS selon la latence. */
.rt-led{width:10px;height:10px;flex-shrink:0;border-radius:50%;background:var(--green);animation:rtLedBlink 1.4s ease-in-out infinite;}
@keyframes rtLedBlink{0%,100%{opacity:1;}50%{opacity:.25;}}
.remote-topbar .rt-link{display:inline-flex;align-items:center;gap:7px;}
#remoteTopMs{font-size:13px;font-weight:700;color:var(--text);}
/* Rappel Recall Mode : concis, centré, discret. */
.recall-hint{font-size:12px;color:var(--muted);text-align:center;line-height:1.4;margin:-2px 0 0;}
.recall-hint b{color:var(--flag);}
/* Écart MINIMAL entre les durées et les boutons du bas (pas collé). */
.recall-durs{margin-top:8px;margin-bottom:0;}
.recall-feedback:empty{display:none;}
.remote-actions{margin-top:0 !important;}
/* « Comment ça marche ? » en bas — replié par défaut. */
.remote-howto{width:100%;border:1px solid var(--line,var(--border));border-radius:var(--r);background:var(--surface-2);overflow:hidden;}
.remote-howto>summary{list-style:none;cursor:pointer;padding:11px 14px;font-weight:700;font-size:13px;color:var(--text);}
.remote-howto>summary::-webkit-details-marker{display:none;}
.remote-howto>summary::after{content:"+";float:right;color:var(--muted);font-weight:700;}
.remote-howto[open]>summary::after{content:"–";}
.remote-howto .rh-body{padding:0 14px 12px;}
.remote-howto .rh-body p{margin:0 0 8px;font-size:12.5px;line-height:1.5;color:var(--muted);}
.remote-howto .rh-body b{color:var(--text);}

.remote-clips-list{max-height:52vh;overflow-y:auto;display:flex;flex-direction:column;gap:8px;}
/* MULTI-CAM : aperçu de tous les angles (grille). */
.remote-preview-multi{display:none;gap:6px;margin-top:8px;}
.remote-preview-multi .rpm-fig{margin:0;background:#000;border-radius:var(--r);overflow:hidden;}
.remote-preview-multi .rpm-fig img{width:100%;display:block;background:#000;min-height:70px;}
.remote-preview-multi .rpm-fig figcaption{font-size:11px;color:var(--muted);text-align:center;padding:4px 2px;}
/* Ligne de visee panorama (2 cams collees) : verticale = centre a pointer sur le milieu du terrain. */
.remote-preview-multi .rpm-aim{position:absolute;inset:0;pointer-events:none;z-index:2;}
.remote-preview-multi .rpm-aim-v{position:absolute;left:50%;top:0;bottom:0;width:2px;margin-left:-1px;background:var(--flag);opacity:.9;box-shadow:0 0 0 1px rgba(0,0,0,.35);}
.remote-preview-multi .rpm-aim-h{position:absolute;top:50%;left:0;right:0;height:1px;margin-top:-.5px;background:rgba(255,255,255,.65);}
/* Aperçu panorama assemblé (stitch rapide) dans la télécommande. */
.remote-preview-multi .rpm-pano{width:100%;height:auto;display:block;background:#000;border-radius:var(--r);}
.remote-preview-multi .rpm-loading{padding:26px 12px;text-align:center;color:var(--muted);font-size:13px;}
/* flex-shrink:0 = les clips gardent leur taille et la liste SCROLLE (au lieu de s'écraser quand il y en a beaucoup). */
.rc-row{flex-shrink:0;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:var(--surface);}
.rc-head{display:flex;align-items:center;gap:12px;width:100%;background:none;border:none;padding:11px 12px;cursor:pointer;font:inherit;color:var(--text);text-align:left;}
.rc-thumb{width:96px;height:60px;border-radius:var(--r-sm);object-fit:cover;background:#000;flex-shrink:0;}
/* Desktop : panneau télécommande + liste clips plus larges (moins à l'étroit). */
@media(min-width:900px){ .remote-controls{max-width:520px;} .remote-clips-list{max-height:460px;} }
.rc-meta{display:flex;flex-direction:column;min-width:0;flex:1;}
.rc-meta b{font-size:13px;font-weight:700;}
.rc-meta span{font-size:11.5px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.rc-play{color:var(--flag);font-size:13px;flex-shrink:0;padding-right:4px;}
.rc-preview{padding:0 8px 8px;}
.rc-preview video{width:100%;border-radius:var(--r-sm);background:#000;display:block;}

/* ===== Tutoriel ===== */
.tutorial-ui{
  display:none;position:absolute;inset:0;z-index:10;
  flex-direction:column;height:100dvh;overflow-y:auto;background:var(--bg);
  padding:calc(env(safe-area-inset-top,0px) + 16px) 16px calc(env(safe-area-inset-bottom,0px) + 16px);
}
/* Desktop : c'est .tutorial-ui (pleine largeur) qui scrolle, pas une colonne interne
   (évite l'effet "fenêtre dans une fenêtre" avec une scrollbar flottant au milieu).
   Mobile : surchargé plus haut (tout en flux document). */
.tutorial-body{flex:none;}
/* Largeur de lecture confortable (centrée) pour le tutoriel — sur mobile. */
.tutorial-ui .coaching-head,.tutorial-ui .tutorial-body{width:100%;max-width:820px;margin-left:auto;margin-right:auto;}
/* Desktop : pleine largeur comme les pages shell (Profil/Équipe), sinon une grande bande
   de fond gris reste à droite/gauche de la colonne centrée (à côté de la scrollbar). */
@media(min-width:900px){
  .tutorial-ui .coaching-head,.tutorial-ui .tutorial-body{max-width:none;}
}
.tuto-step{
  border:1px solid rgba(26,26,26,.08);border-radius:var(--r-lg);background:var(--surface);
  padding:14px;margin-bottom:14px;box-shadow:0 6px 18px rgba(26,26,26,.12);
}
.tuto-step h3{margin:0 0 8px;font-size:14px;}
.tuto-step p{margin:0 0 8px;font-size:13px;line-height:1.5;color:var(--text);}
.tuto-step p:last-child{margin-bottom:0;}
.tuto-step b{color:var(--flag);}

/* ===== Après entraînement (Coaching) ===== */
.coaching-ui{
  display:none;position:absolute;inset:0;z-index:10;
  flex-direction:column;height:100dvh;overflow:hidden;background:var(--bg);
  padding:calc(env(safe-area-inset-top,0px) + 16px) 16px calc(env(safe-area-inset-bottom,0px) + 16px);
}
.coaching-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px;position:relative;}
.coaching-head h2{font-size:16px;margin:0;flex:1;}
.coaching-head .icon-btn{
  width:36px;height:36px;background:var(--surface);border:1px solid rgba(26,26,26,.08);
  color:var(--text);backdrop-filter:none;font-size:18px;
}
.coaching-controls{display:flex;gap:8px;margin-bottom:10px;flex-wrap:wrap;}
.coaching-controls .btn{padding:7px 14px;font-size:12px;border-radius:var(--r-pill);}
.filter-chips{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:14px;}
.filter-chip{
  border:1px solid rgba(26,26,26,.08);background:var(--surface);color:var(--text);
  border-radius:var(--r-pill);padding:5px 12px;font-size:11px;font-weight:700;cursor:pointer;
}
.filter-chip.active{background:var(--flag);color:#fff;border-color:var(--border);}

.coaching-more-menu{
  display:none;position:absolute;top:48px;right:0;z-index:30;background:var(--surface);
  border-radius:var(--r-lg);box-shadow:0 8px 24px rgba(26,26,26,.16);padding:10px;gap:8px;flex-direction:column;min-width:220px;
}
.coaching-more-menu.open{display:flex;}
.coaching-more-menu .btn{font-size:12px;padding:9px 12px;}

/* ---- Flux par date + grille de miniatures ---- */
.coaching-feed{flex:1;overflow-y:auto;min-height:0;}
.date-group-header{display:flex;align-items:baseline;gap:8px;margin:18px 0 10px;}
.date-group-header:first-child{margin-top:0;}
.date-group-title{font-weight:800;font-size:14px;text-transform:capitalize;flex:1;min-width:0;}
.date-group-rename{background:none;border:none;color:var(--muted);font-size:13px;cursor:pointer;padding:2px 4px;}
.date-group-count{font-size:11px;color:var(--muted);}

.thumb-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;}
/* Tablette portrait (iPad ~768-834px) : 4 colonnes au lieu de 3 -> meilleure occupation de l'ecran large. */
@media(min-width:600px) and (max-width:899px){ .thumb-grid{grid-template-columns:repeat(4,1fr);gap:10px;} }
.thumb-tile{
  position:relative;aspect-ratio:4/3;border-radius:var(--r);overflow:hidden;background:#000;
  cursor:pointer;border:none;padding:0;box-shadow:0 4px 14px rgba(26,26,26,.10);
}
.thumb-tile video{width:100%;height:100%;object-fit:cover;display:block;pointer-events:none;}
.thumb-tile-time{
  position:absolute;left:6px;bottom:6px;color:#fff;font-size:10px;font-weight:700;
  text-shadow:0 1px 3px rgba(0,0,0,.6);
}
.thumb-tile-badge{
  position:absolute;top:6px;right:6px;background:rgba(26,26,26,.65);color:#fff;
  font-size:10px;font-weight:800;border-radius:var(--r-pill);padding:2px 7px;
}
.thumb-tile-fav{position:absolute;top:6px;left:6px;color:var(--flag);font-size:14px;text-shadow:0 1px 3px rgba(0,0,0,.5);}

/* ---- Écran détail (plein écran) ---- */
.clip-detail-overlay{
  display:none;position:fixed;inset:0;z-index:80;background:var(--bg);
  flex-direction:column;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;
  padding:calc(env(safe-area-inset-top,0px) + 16px) 16px calc(env(safe-area-inset-bottom,0px) + 16px);
}
.clip-detail-overlay.open{display:flex;}
/* Fiche clip ouverte : on bloque le scroll du fond (page longue derrière). */
html.cd-lock{overflow:hidden;}
/* L'édition d'un clip NE masque PAS le menu : on laisse la place à la nav (barre du bas mobile / sidebar desktop). */
@media(max-width:899px){ .clip-detail-overlay{ bottom:calc(env(safe-area-inset-bottom,0px) + 64px); } }
/* Clavier ouvert : la nav est cachée → la fiche remplit le bas (sinon on voit les clips dans le trou de 64px). */
@media(max-width:899px){ body.kb-open .clip-detail-overlay{ bottom:0; } }
@media(min-width:900px){ .clip-detail-overlay{ left:212px; padding:24px 28px 40px; } }
/* Sidebar repliee : l'overlay doit demarrer au bord de la sidebar (64px), sinon la Video Room derriere
   transparait dans la bande 64-212 = "doublon" signale. */
@media(min-width:900px){ html.tc-navcol .clip-detail-overlay{ left:64px; } }
/* Header global (logo + cloche) en haut de la fiche clip, comme les autres écrans.
   Rythme calé sur la Video Room : 16px sous le header, puis le bouton retour, puis 16px. */
.clip-detail-overlay{padding-top:0;}
.cd-apptop{display:flex;margin:0 -16px 16px;}
@media(min-width:900px){ .cd-apptop{display:none !important;} .clip-detail-overlay{padding-top:24px;} }
.clip-detail-head{margin-bottom:16px;}
.clip-detail-box{max-width:560px;width:100%;margin:0 auto;}
.clip-detail-box video{border-radius:var(--r-lg);width:100%;display:block;margin-bottom:14px;background:#000;}

/* ---- Favori : plus visible ---- */
.fav-btn{
  display:flex;align-items:center;justify-content:center;float:right;border:1px solid rgba(26,26,26,.08);background:var(--surface-2);
  color:var(--muted);font-size:18px;line-height:1;width:36px;height:36px;border-radius:50%;cursor:pointer;
}
.fav-btn.active{background:var(--flag);color:#fff;border-color:var(--border);}

/* ---- Chips éditables (joueurs / tags) ---- */
.chip-row{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-bottom:10px;}
.chip-row label{width:100%;font-size:11px;color:var(--muted);margin-bottom:2px;}
.editable-chip{display:inline-flex;align-items:center;gap:4px;border:1px solid rgba(26,26,26,.08);background:var(--surface-2);color:var(--flag);border-radius:var(--r-pill);padding:4px 6px 4px 12px;font-size:12px;font-weight:700;}
.editable-chip.action{color:var(--text);}
/* Maillot de l'utilisateur : chip mis en valeur (fond orange plein) pour reperer SES clips en un coup d'oeil.
   Selecteur assez specifique pour battre « .cd-root .editable-chip » (defini plus bas, meme specificite). */
.editable-chip.cd-me,.cd-root .editable-chip.cd-me{background:var(--flag);border-color:var(--flag);color:#fff;box-shadow:0 2px 8px rgba(255,90,31,.35);}
.editable-chip.cd-me button,.cd-root .editable-chip.cd-me button{color:rgba(255,255,255,.85);}
.editable-chip button{background:none;border:none;color:var(--muted);font-size:14px;cursor:pointer;padding:0 6px;line-height:1;}
.add-chip-btn{border:2px dashed var(--border);background:none;color:var(--muted);border-radius:var(--r-pill);padding:4px 11px;font-size:12px;font-weight:700;cursor:pointer;}
.add-chip-suggest{border:1px dashed var(--border);background:none;color:var(--muted);border-radius:var(--r-pill);padding:4px 11px;font-size:12px;font-weight:700;cursor:pointer;}
.add-chip-suggest:hover{border-color:var(--flag);color:var(--flag);}

/* ---- Pavé numérique (numpad) ---- */
.numpad-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:200;align-items:center;justify-content:center;padding:20px;}
.numpad-overlay.open{display:flex;}
.numpad-box{background:var(--surface);border:1px solid rgba(26,26,26,.08);border-radius:var(--r-lg);padding:20px;width:100%;max-width:280px;box-shadow:0 8px 24px rgba(26,26,26,.14);}
.numpad-display{font-family:"SF Mono",Menlo,Consolas,monospace;font-size:32px;font-weight:800;text-align:center;color:var(--flag);border:1px solid rgba(26,26,26,.08);border-radius:var(--r-lg);padding:10px;margin:8px 0 14px;background:var(--bg);}
.numpad-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;}
.numpad-grid button{border:1px solid rgba(26,26,26,.08);background:var(--surface-2);color:var(--text);border-radius:var(--r-lg);padding:14px 0;font-size:18px;font-weight:700;cursor:pointer;}
.numpad-grid button.ok{background:var(--flag);color:#fff;}

/* ---- Popup ajout de tag ---- */
.tag-popup-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:200;align-items:center;justify-content:center;padding:20px;}
.tag-popup-overlay.open{display:flex;}
.tag-popup-box{background:var(--surface);border:1px solid rgba(26,26,26,.08);border-radius:var(--r-lg);padding:20px;width:100%;max-width:320px;max-height:92vh;overflow-y:auto;box-shadow:0 8px 24px rgba(26,26,26,.14);}
/* Caméra = paysage : la popup de fin de session doit tenir à l'écran (compacte + scroll). */
@media (orientation: landscape) and (max-height: 520px){
  #sessionSummaryOverlay .tag-popup-box{max-width:440px;padding:14px 18px;}
  #sessionSummaryOverlay h2{margin:2px 0 0;font-size:17px;}
  #sessionSummaryOverlay .session-summary-stats{flex-direction:row;gap:6px;}
  #sessionSummaryOverlay .session-summary-row{flex:1;flex-direction:column;text-align:center;gap:2px;padding:8px 6px;}
  #sessionSummaryOverlay .btn{padding:9px 14px;}
  #sessionSummaryOverlay .btn.block{margin-top:6px!important;}
}
.tag-popup-box input{width:100%;border:1px solid rgba(26,26,26,.08);border-radius:var(--r);padding:9px 10px;font-size:14px;font-family:inherit;background:var(--bg);color:var(--text);margin:6px 0 12px;}
.tag-popup-box input[type=range]{border:none;padding:0;background:transparent;margin:8px 0 4px;accent-color:var(--flag);}
.custom-dur-value{font-size:34px;font-weight:800;color:var(--flag);font-family:"SF Mono",Menlo,Consolas,monospace;margin:8px 0 2px;}
.tag-popup-suggestions{display:flex;flex-wrap:wrap;gap:6px;}

.numpad{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;}
.numpad-key{padding:14px 0;font-size:18px;font-weight:700;border:1px solid rgba(26,26,26,.08);background:var(--surface-2);border-radius:var(--r);}
.numpad-key.ok{background:var(--flag);color:#fff;}
/* Popup post-capture (une fenêtre) : pouces + note + n° joueur */
.qc-thumbs{display:flex;gap:10px;margin-top:8px;}
.qc-thumb{flex:1;display:flex;flex-direction:column;align-items:center;gap:5px;padding:12px 0;border:2px solid rgba(26,26,26,.12);border-radius:var(--r-lg);background:var(--surface-2);color:var(--text);font-weight:700;font-size:13px;cursor:pointer;}
.qc-thumb svg{opacity:.65;transition:opacity .12s;}
.qc-thumb.sel svg{opacity:1;}
.qc-thumb.qc-good.sel{border-color:var(--green);color:var(--green);box-shadow:0 0 0 1px var(--green) inset;}
.qc-thumb.qc-bad.sel{border-color:var(--danger);color:var(--danger);box-shadow:0 0 0 1px var(--danger) inset;}
.qc-num-row{display:flex;align-items:center;gap:12px;margin-top:2px;}
.qc-num-row .btn{background:var(--surface-2);border-color:rgba(26,26,26,.16);}
.qc-num-val{font-weight:800;font-size:16px;color:var(--flag);}
/* Pavé numérique en PANNEAU FLOTTANT par-dessus pouces+note (pas de scroll). Compact. */
.tag-popup-box{position:relative;}
/* Overlay pile de la taille de la boîte (inset:0) : opaque, rien ne transparaît derrière. */
.qc-numpad{position:absolute;inset:0;z-index:6;background:var(--surface);border-radius:var(--r-lg);padding:20px;display:flex;flex-direction:column;justify-content:center;}
.qc-numpad .numpad{gap:7px;}
.qc-numpad .numpad-key{padding:10px 0;font-size:16px;border-radius:var(--r);}
.qc-numpad-disp{font-weight:800;font-size:17px;color:var(--flag);text-align:center;min-height:22px;margin-bottom:10px;}
.qc-numpad-hint{font-size:10px;color:var(--muted);text-align:center;margin-top:10px;}
.qc-actions{display:flex;gap:8px;margin-top:14px;}
.qc-actions .btn{flex:1;margin:0;}
.session-summary-stats{display:flex;flex-direction:column;gap:8px;text-align:left;}
.session-summary-row{display:flex;align-items:center;gap:10px;border:1px solid rgba(26,26,26,.08);border-radius:var(--r);padding:10px 14px;font-size:13px;}
.session-summary-row span:first-child{font-size:16px;}
.session-summary-row b{font-size:15px;}
.session-summary-row span:last-child{color:var(--muted);}

/* ===== Video Room — desktop ===== */
@media(min-width:900px){
  .coaching-ui{padding:32px 40px;}
  .coaching-head h2{font-size:20px;}
  .coaching-head, .coaching-controls, .filter-chips, .coaching-feed{max-width:1100px;margin-left:auto;margin-right:auto;width:100%;}
  .thumb-grid{grid-template-columns:repeat(5,1fr);gap:14px;}
  .clip-detail-box{max-width:640px;}
}
@media(min-width:1300px){
  .thumb-grid{grid-template-columns:repeat(6,1fr);}
}

/* ============================================================
   VIDEO ROOM v2 — interface desktop "dashboard" (scopée .vr2)
   ============================================================ */
.coaching-ui.vr2{flex-direction:row;padding:0;background:var(--bg);gap:0;}
.vr2{--vrsurf:var(--surface);--vrsurf2:var(--surface-2);--vrline:var(--border);--vrmuted:var(--muted);--vrtext:var(--text);--vrsoft:rgba(255,90,31,.16);}
.vr2 h1,.vr2 h2{font-family:var(--font-display,'Oswald',sans-serif);text-transform:uppercase;}
/* sidebar */
.vr-side{width:230px;flex-shrink:0;background:var(--vrsurf);border-right:1px solid var(--vrline);display:flex;flex-direction:column;padding:16px 12px;overflow-y:auto;}
.vr-brand{display:flex;align-items:center;gap:8px;padding:4px 8px 16px;}
.vr-mark{width:32px;height:32px;border-radius:var(--r-sm);background:var(--flag);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:14px;}
.vr-name{font-weight:800;font-size:16px;color:var(--vrtext);}
.vr-name span{color:var(--flag);}
.vr-nav{display:flex;flex-direction:column;gap:2px;}
.vr-navlink{display:flex;align-items:center;gap:10px;padding:9px 11px;border-radius:var(--r);color:var(--vrmuted);font-weight:600;font-size:13px;cursor:pointer;border:none;background:none;text-align:left;width:100%;font-family:inherit;}
.vr-navlink .ic{width:18px;text-align:center;}
.vr-navlink:hover{background:var(--vrsurf2);color:var(--vrtext);}
.vr-navlink.active{background:var(--vrsoft);color:var(--flag);}
.vr-side-spacer{flex:1;}
.vr-side-btn{font:inherit;font-size:12.5px;font-weight:700;color:var(--vrmuted);background:var(--vrsurf2);border:1px solid var(--vrline);border-radius:var(--r);padding:9px;cursor:pointer;width:100%;margin-bottom:10px;}
.vr-storage{padding:4px 4px 10px;}
.vr-storage-lbl{display:flex;justify-content:space-between;font-size:11px;color:var(--vrmuted);margin-bottom:6px;}
.vr2 .storage-bar{height:6px;border-radius:var(--r-pill);background:var(--vrline);overflow:hidden;margin:0;}
.vr2 .storage-fill{height:100%;background:var(--flag);border-radius:var(--r-pill);}
.vr2 .nav-back-btn{width:auto;align-self:flex-start;}
/* main */
.vr-main{flex:1;overflow-y:auto;padding:24px 28px 40px;}
.vr-topbar{margin-bottom:20px;}
.vr-topbar h1{font-size:23px;font-weight:800;margin:0;color:var(--vrtext);}
.vr-crumb{font-size:12.5px;color:var(--vrmuted);font-weight:600;margin-bottom:4px;}
.vr-crumb a{color:var(--flag);cursor:pointer;}
.vr-sub{font-size:13px;color:var(--vrmuted);margin-top:4px;}
/* stats */
.vr-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:18px;}
.vr-stat{background:var(--vrsurf);border:1px solid var(--vrline);border-radius:var(--r);padding:15px 16px;}
.vr-stat .n{font-size:25px;font-weight:800;line-height:1;color:var(--vrtext);}
.vr-stat .l{font-size:12px;color:var(--vrmuted);margin-top:6px;}
.vr-stat.good .n{color:var(--green);}.vr-stat.fix .n{color:var(--flag);}.vr-stat.show .n{color:var(--blue);}
/* Listing PAGINE : bandeau discret tant que le reste de l'historique se charge derriere. */
.vr-loadmore{padding:10px 4px;font-size:13px;color:var(--vrmuted);text-align:center;animation:vrLoadPulse 1.2s ease-in-out infinite;}
@keyframes vrLoadPulse{0%,100%{opacity:.45;}50%{opacity:1;}}
.vr-sess-stats{display:grid;grid-template-columns:1fr;gap:14px;margin:0 0 16px;}
@media(max-width:860px){ .vr-sess-stats{grid-template-columns:1fr;} }
.vss-panel{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);padding:16px;}
.vss-panel h4{font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);margin:0 0 14px;}
/* « Vu par » agrégé (stats session) en tiroir repliable. */
.vss-drawer{padding:0;}
.vss-drawer>summary{list-style:none;cursor:pointer;display:flex;align-items:center;padding:16px;user-select:none;}
.vss-drawer>summary::-webkit-details-marker{display:none;}
.vss-drawer>summary h4{margin:0;}
.vss-drawer>summary::after{content:'';width:8px;height:8px;border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);transform:rotate(-45deg);margin-left:auto;transition:transform .18s ease;}
.vss-drawer[open]>summary::after{transform:rotate(45deg);}
.vss-drawer>.vss-drawer-body{padding:0 16px 16px;}
.vss-block+.vss-block{margin-top:18px;padding-top:16px;border-top:1px solid var(--border);}
.vss-block>h4{margin:0 0 12px;}
.vss-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;}
.vss-stat .n{font-size:24px;font-weight:800;color:var(--text);line-height:1;}
.vss-stat .l{font-size:11px;color:var(--muted);margin-top:4px;}
.vss-players{margin-top:14px;font-size:13px;color:var(--muted);}
.vss-players b{font-size:18px;color:var(--text);font-weight:800;}
.vss-donut-row{display:flex;align-items:center;gap:16px;flex-wrap:wrap;}
.vss-donut{width:130px;height:130px;flex-shrink:0;}
.vss-legend{display:flex;flex-direction:column;gap:9px;flex:1;min-width:130px;}
.vss-leg{display:flex;align-items:center;gap:8px;font-size:12.5px;}
.vss-dot{width:10px;height:10px;border-radius:50%;flex-shrink:0;}
.vss-leg-l{color:var(--text);}
.vss-leg-n{margin-left:auto;color:var(--muted);font-weight:700;}
.vss-actions{display:flex;flex-direction:column;}
.vss-action{display:flex;align-items:center;justify-content:space-between;padding:7px 0;border-bottom:1px solid var(--border);font-size:13.5px;}
.vss-action:last-child{border-bottom:none;}
.vss-action-l{color:var(--text);font-weight:600;}
.vss-action-n{color:var(--text);font-weight:800;}
/* panel */
.vr-panel{background:var(--vrsurf);border:1px solid var(--vrline);border-radius:var(--r);}
.vr-panel-head{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;border-bottom:1px solid var(--vrline);flex-wrap:wrap;gap:10px;}
.vr-panel-head h2{font-size:15px;font-weight:800;margin:0;}
.vr-tools{display:flex;align-items:center;gap:10px;}
.vr-sort{font-size:12.5px;color:var(--vrmuted);font-weight:600;}
.vr-sort select{font:inherit;font-weight:700;color:var(--vrtext);border:1px solid var(--vrline);border-radius:var(--r-sm);padding:4px 7px;background:var(--vrsurf2);margin-left:4px;}
.vr-toggle{display:flex;background:var(--vrsurf2);border:1px solid var(--vrline);border-radius:var(--r-sm);padding:3px;gap:2px;}
.vr-toggle button{border:none;background:none;font:inherit;font-size:12.5px;font-weight:700;color:var(--vrmuted);padding:5px 12px;border-radius:var(--r-sm);cursor:pointer;}
.vr-toggle button.active{background:var(--vrsurf);color:var(--flag);box-shadow:var(--shadow);}
/* sessions list */
.vr-srow{display:flex;align-items:center;gap:14px;padding:11px 16px;cursor:pointer;border-bottom:1px solid var(--vrline);}
.vr-srow:last-child{border-bottom:none;}
.vr-srow:hover{background:var(--vrsurf2);}
.vr-srow .th{width:60px;height:38px;border-radius:var(--r-sm);flex-shrink:0;object-fit:cover;background:#000;}
.vr-srow .info{flex:1;min-width:0;}
.vr-srow .info b{font-size:14px;display:block;color:var(--vrtext);}
.vr-srow .info .m{font-size:12px;color:var(--vrmuted);margin-top:2px;}
.vr-srow .chips{display:flex;gap:6px;flex-shrink:0;}
.vr-chip{font-size:11.5px;font-weight:700;border-radius:var(--r-sm);padding:3px 8px;}
.vr-chip.g{background:rgba(31,157,87,.16);color:var(--green);}.vr-chip.f{background:var(--vrsoft);color:var(--flag);}.vr-chip.s{background:rgba(44,111,255,.16);color:var(--blue);}
.vr-srow .chev{color:var(--vrmuted);font-size:16px;}
/* calendar */
.vr-cal{padding:16px;}
.vr-cal-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;}
.vr-cal-head .mn{font-size:15px;font-weight:800;text-transform:capitalize;}
.vr-cal-head button{border:1px solid var(--vrline);background:var(--vrsurf);border-radius:var(--r-sm);width:30px;height:30px;cursor:pointer;color:var(--vrmuted);}
.vr-cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:7px;}
.vr-dow{font-size:11px;font-weight:700;color:var(--vrmuted);text-align:center;padding-bottom:4px;text-transform:uppercase;}
.vr-day{aspect-ratio:1/.8;border:1px solid var(--vrline);border-radius:var(--r);padding:7px 8px;background:var(--vrsurf);}
.vr-day.out{background:var(--vrsurf2);opacity:.5;}
.vr-day .num{font-size:12px;font-weight:700;color:var(--vrmuted);}
.vr-day.has{cursor:pointer;border-color:rgba(255,90,31,.45);}
.vr-day.has:hover{background:var(--vrsoft);}
.vr-day .ses{margin-top:5px;font-size:10px;font-weight:700;color:var(--flag);background:var(--vrsoft);border-radius:var(--r-sm);padding:2px 5px;display:inline-block;}
/* clip grid */
.vr-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;padding:16px;}
/* Menu « Session » de la fiche clip (déplacer le clip) : même habillage que les champs de l'app. */
.cd-sel{width:100%;appearance:none;-webkit-appearance:none;border:1px solid var(--vrline,var(--line));border-radius:var(--r);
  padding:9px 34px 9px 12px;font:inherit;font-size:13px;font-weight:600;color:var(--text);cursor:pointer;
  background-color:var(--vrsurf,var(--surf));
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%239aa0a8' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' d='M1 1.5 6 6.5 11 1.5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 12px center;}
.cd-sel:hover{border-color:var(--flag);}
.cd-sel:focus{outline:none;border-color:var(--flag);}
/* Suivi : « Marquer comme revu » + liste « demander une review » sur la même ligne. */
.cd-review-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
.cd-review-sel{width:auto;flex:1 1 180px;min-width:160px;}
/* Multi-sélection de clips (vue session) : barre d'actions + état sélectionné + coche. */
/* Corbeille : lien DISCRET, centré, en bas de la Video Room (filet de récup, pas un filtre). */
/* Bandeau « clips en cours d'envoi » : doit être IMPOSSIBLE À LOUPER quand on descend le téléphone de la
   perche (l'util. a éteint son tél en croyant la captation finie). Donc : plein orange, en HAUT (le bas est
   occupé par le gros bouton de capture), au-dessus de tout, et il reste affiché tant que le tampon local
   n'est pas vide. Sa DISPARITION est le feu vert pour éteindre. */
.cam-pending-up{position:fixed;left:50%;transform:translateX(-50%);top:calc(8px + env(safe-area-inset-top));z-index:10000;max-width:min(94vw,460px);background:var(--flag);border:2px solid #fff;color:#fff;font-size:13.5px;font-weight:800;text-align:center;padding:10px 14px;border-radius:var(--r);box-shadow:var(--shadow-lg);animation:camPendPulse 1.8s ease-in-out infinite;}
@keyframes camPendPulse{0%,100%{opacity:1;}50%{opacity:.72;}}
/* Récap de fin de séance : état d'envoi des clips. ORANGE tant qu'il reste des clips dans le tampon local,
   VERT quand tout est monté = feu vert pour éteindre. Classe propre (le SPA ne charge pas components.css,
   donc pas de `.msg` disponible ici). */
.cam-sum-pending{font-size:13px;font-weight:700;line-height:1.45;margin:10px 0;padding:9px 11px;border-radius:var(--r-sm);}
.cam-sum-pending.warn{color:var(--amber);border:1px solid var(--amber);}
.cam-sum-pending.ok{color:var(--green);border:1px solid var(--green);}
.vr-trash-foot{margin:22px 0 8px;text-align:center;}
.vr-trash-link{display:inline-flex;align-items:center;gap:7px;background:none;border:none;color:var(--muted);font:inherit;font-size:13px;font-weight:600;cursor:pointer;padding:8px 12px;border-radius:var(--r-sm);}
.vr-trash-link:hover{color:var(--flag);background:var(--surface-2);}
.vr-bulkbar{display:flex;align-items:center;gap:8px;flex-wrap:nowrap;overflow-x:auto;background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r);padding:10px 14px;margin:0 0 12px;}
.vr-bulkbar .bb-count{font-weight:800;font-size:14px;}
.vr-bulkbar .bb-spacer{flex:1;}
/* Bulkbar INLINE dans la barre d'outils session (sur la même ligne que « Sélectionner ») : pas d'encart,
   compact. La recherche (flex:1) se comprime automatiquement pour laisser la place. */
.vr-sess-filterbar .vr-bulkbar{background:none;border:none;border-radius:0;padding:0;margin:0;overflow:visible;gap:7px;}
.vr-sess-filterbar .vr-bulkbar .bb-count{font-size:12.5px;white-space:nowrap;}
.vr-sess-filterbar .vr-bulkbar .bb-spacer{display:none;}
.vr-clip.vr-selected,.vr-trow.vr-selected{outline:2px solid var(--flag);outline-offset:-2px;}
.vr-trow.vr-selected{background:var(--soft);}
.vr-tick{position:absolute;top:6px;left:6px;width:22px;height:22px;border-radius:50%;background:rgba(0,0,0,.5);border:2px solid #fff;display:flex;align-items:center;justify-content:center;color:#fff;font-size:12px;font-weight:800;z-index:3;}
.vr-clip.vr-selected .vr-tick{background:var(--flag);border-color:#fff;}
.vr-clip{border:1px solid var(--vrline);border-radius:var(--r);overflow:hidden;cursor:pointer;background:var(--vrsurf);}
.vr-clip:hover{border-color:var(--flag);}
.vr-clip .pw{position:relative;aspect-ratio:16/10;background:#000;}
.vr-clip video{width:100%;height:100%;object-fit:cover;display:block;}
.vr-clip .time{position:absolute;left:7px;bottom:7px;background:rgba(0,0,0,.6);color:#fff;font-size:11px;font-weight:700;border-radius:var(--r-sm);padding:2px 6px;}
.vr-clip .fav{position:absolute;top:7px;right:7px;color:#fff;font-size:14px;text-shadow:0 1px 3px rgba(0,0,0,.5);}
.vr-clip .cm{padding:9px 11px;display:flex;align-items:center;gap:7px;}
.vr-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0;}
.vr-dot.g{background:var(--green);}.vr-dot.f{background:var(--flag);}.vr-dot.s{background:var(--blue);}.vr-dot.n{background:var(--vrmuted);}
.vr-clip .tg{font-size:12.5px;font-weight:700;color:var(--vrtext);}
.vr-clip .pl{margin-left:auto;font-size:11.5px;font-weight:700;color:var(--vrmuted);background:var(--vrsurf2);border-radius:var(--r-sm);padding:2px 7px;}
.vr2 .empty{padding:30px;color:var(--vrmuted);}
/* responsive — mobile : sidebar en barre du haut */
@media(max-width:760px){
  .coaching-ui.vr2{flex-direction:column;}
  .vr-side{width:100%;flex-direction:row;flex-wrap:wrap;align-items:center;gap:8px;border-right:none;border-bottom:1px solid var(--vrline);padding:10px 12px;overflow:visible;}
  .vr-brand{padding:0;}
  .vr-nav{flex-direction:row;}
  .vr-side-spacer{display:none;}
  .vr-storage{display:none;}
  .vr-side-btn{width:auto;margin:0;}
  .vr2 .nav-back-btn{width:auto;margin-left:auto;}
  .vr-main{padding:16px;}
  .vr-topbar{margin-bottom:12px;}
  .vr-topbar h1{font-size:20px;}
  /* Mobile : « Séance » + « Enregistrer » = le COMBO prend toute la largeur (chaque bouton = moitié,
     ou plein si un seul est visible), sous le titre. */
  .vr-topbar-row .vr-topbar-actions{width:100%;flex-wrap:nowrap;align-items:stretch;}
  .vr-topbar-row .vr-topbar-actions .vr-meet-btn{flex:1;min-width:0;justify-content:center;text-align:center;}
  .vr-stats{grid-template-columns:repeat(2,1fr);}
  .vr-grid{grid-template-columns:repeat(2,1fr);}
}
@media(min-width:1300px){ .vr-grid{grid-template-columns:repeat(4,1fr);} }

/* ============================================================
   FICHE MOMENT v2 — lecteur + annotation (télestration)
   Thème clair, aligné sur .vr2.
   ============================================================ */
.clip-detail-overlay{background:var(--bg);}
.clip-detail-box{max-width:none;margin:0;}
.cd-root{--surf:var(--surface);--line:var(--border);--ink:var(--text);--soft:rgba(255,90,31,.16);
  color:var(--text);font-family:var(--font-body,'Source Sans 3',system-ui,sans-serif);}

.cd-topbar{display:flex;align-items:center;gap:10px;margin-bottom:16px;flex-wrap:wrap;}
.cd-topback{margin:0;flex:0 0 auto;}
.cd-topbar .cd-povbar{margin:0;}
.cd-head-left,.cd-head-right{display:flex;align-items:center;gap:10px;min-width:0;flex-wrap:wrap;}
.cd-head-right{flex:1 1 auto;}
.cd-head-right .cd-topactions{margin-left:auto;}
/* Desktop avec rail : l'entête suit la GRILLE du corps → titre aligné à droite de la colonne clips,
   POV aligné sur le bord gauche de la vidéo. */
@media(min-width:900px){
  .cd-root.has-rail .cd-topbar{display:grid;grid-template-columns:235px minmax(0,1fr);gap:18px;align-items:center;}
  .cd-root.has-rail .cd-head-left{justify-content:space-between;flex-wrap:nowrap;}
}
/* Back désormais dans le bandeau → on masque l'ancien bouton retour séparé (gagne une ligne). */
.clip-detail-head{display:none;}
.cd-title b{font-family:var(--font-display,'Oswald',sans-serif);font-size:19px;font-weight:700;text-transform:uppercase;letter-spacing:.02em;}
.cd-title span{color:var(--muted);font-size:13px;}
.cd-topactions{display:flex;align-items:center;gap:8px;}

/* Colonne détails un peu plus étroite → vidéo un peu plus grande (sans passer en théâtre). */
.cd-layout{display:grid;grid-template-columns:1.9fr 1fr;gap:18px;align-items:start;}
@media(max-width:860px){ .cd-layout{grid-template-columns:1fr;} }
/* Mode théâtre (façon YouTube) : la vidéo prend toute la largeur, les détails passent en dessous. */
.cd-root.cd-theater .cd-layout{grid-template-columns:1fr;}
.cd-root.cd-theater .cd-left{max-width:none;margin:0;width:100%;}
/* On élargit le conteneur (capé à 560px par défaut) pour que le théâtre prenne TOUTE la largeur dispo. */
.clip-detail-box.cd-theater-box{max-width:none;}
/* En théâtre on masque le rail (navigation via ‹ › du lecteur) → la vidéo remplit vraiment l'écran. */
.cd-root.cd-theater.has-rail .cd-body,.cd-root.cd-theater .cd-body{grid-template-columns:1fr;}
.cd-root.cd-theater .cd-rail{display:none;}
/* Théâtre : la vidéo garde sa TAILLE RÉELLE, centrée (pas width:100% qui la pillarbox dans un élément
   trop large → le canvas se calait sur les bandes noires et les annotations se décalaient). La couche
   zoom épouse alors exactement la vidéo → annotations alignées. */
.cd-root.cd-theater .anno-stage{display:flex;align-items:center;justify-content:center;}
.cd-root.cd-theater .anno-stage video.anno-video{width:auto;height:auto;max-width:100%;max-height:82vh;}
.cd-root.cd-theater .anno-zoomlayer{width:-moz-fit-content;width:fit-content;max-width:100%;}
.cd-theaterbtn.active{background:var(--flag);border-color:var(--flag);color:#fff;}
.cd-left{min-width:0;}

/* ---- Corps : rail des clips de la session (gauche, desktop) + disposition deux colonnes ---- */
.cd-body{display:grid;grid-template-columns:1fr;gap:18px;align-items:start;}
.cd-root.has-rail .cd-body{grid-template-columns:235px minmax(0,1fr);}
.cd-rail{position:sticky;top:0;background:var(--surf);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;max-height:80vh;display:flex;flex-direction:column;}
.cd-rail-head{font-size:11px;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);font-weight:700;padding:12px 14px;border-bottom:1px solid var(--line);flex-shrink:0;}
.cd-rail-ftoggle{width:100%;text-align:left;padding:8px 14px;border:none;border-bottom:1px solid var(--line);background:transparent;color:var(--muted);font-size:12px;font-weight:700;cursor:pointer;flex-shrink:0;}
.cd-rail-ftoggle.active{color:var(--flag);}
.cd-rail-ftoggle:hover{background:var(--soft);}
.cd-rail-filters{display:flex;flex-direction:column;gap:8px;padding:10px 12px;border-bottom:1px solid var(--line);flex-shrink:0;max-height:38vh;overflow-y:auto;}
.cd-rail-tagchips{display:flex;flex-wrap:wrap;gap:5px;}
.cd-rail-filters .vrf-chip{padding:3px 9px;font-size:11.5px;}
.cd-rail-pinput{width:100%;box-sizing:border-box;padding:6px 10px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--surface,var(--surf));color:var(--text);font-size:12.5px;}
.cd-rail-resetrow{display:flex;}
.cd-rail-clear{border-style:dashed;color:var(--muted);background:transparent;cursor:pointer;}
.cd-rail-list{overflow-y:auto;display:flex;flex-direction:column;}
.cd-rail-item{display:flex;align-items:center;gap:9px;padding:8px 10px;border:none;border-bottom:1px solid var(--line);background:none;cursor:pointer;text-align:left;position:relative;color:var(--text);font:inherit;}
.cd-rail-item:last-child{border-bottom:none;}
.cd-rail-item:hover{background:var(--surface-2);}
.cd-rail-item.active{background:var(--soft);}
.cd-rail-item.active::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--flag);}
.cd-rail-item video{width:56px;height:36px;border-radius:var(--r-sm);object-fit:cover;background:#000;flex-shrink:0;}
.cd-rail-meta{display:flex;flex-direction:column;min-width:0;}
.cd-rail-meta b{font-size:12.5px;font-weight:700;}
.cd-rail-meta span{font-size:11.5px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.cd-rail-fav{margin-left:auto;color:var(--flag);font-size:12px;flex-shrink:0;}
.cd-rail-unseen{margin-left:auto;width:8px;height:8px;border-radius:50%;background:var(--flag);flex-shrink:0;}
.cd-rail-fav + .cd-rail-unseen{margin-left:6px;}
/* Indicateur « a un commentaire » du rail : dans le flux, colle à droite. S'il est là, c'est LUI qui
   pousse (les repères favori/non-vu qui suivent gardent juste un petit écart). */
.cd-rail-cmt{margin-left:auto;flex-shrink:0;}
.cd-rail-cmt ~ .cd-rail-fav,.cd-rail-cmt ~ .cd-rail-unseen{margin-left:6px;}
/* Clips OU l'utilisateur est tagué (rail de gauche) : liseré orange discret + SON numéro (déjà affiché) en valeur. */
/* Joueur connecté dans le rail : on met en valeur UNIQUEMENT le NUMÉRO (pas la ligne : ni fond ni liseré). Demande util. */
.cd-rail-meta span.cd-rail-mynum{color:var(--flag);font-weight:800;}
@media(max-width:860px){ .cd-root.has-rail .cd-body{grid-template-columns:1fr;} .cd-rail{display:none;} }
.cd-moment-note{font-size:12.5px;color:var(--muted);background:var(--surf);border:1px solid var(--line);border-radius:var(--r);padding:12px 14px;margin-top:12px;}

/* ---- Lecteur + canvas d'annotation ---- */
.anno-stage{position:relative;border-radius:var(--r);overflow:hidden;background:#000;line-height:0;}
/* Couche zoom : contient video+canvas, transformée (translate+scale) ensemble. */
.anno-zoomlayer{position:relative;width:100%;transform-origin:0 0;line-height:0;touch-action:none;will-change:transform;}
.anno-stage video.anno-video{width:100%;height:auto;max-height:70vh;object-fit:contain;display:block;background:#000;margin:0;border-radius:0;touch-action:none;}
/* Plein ecran : promotion en couche GPU pour eviter le « stroboscope » quand on deplace (pan) une grande video
   transformee (recomposition a chaque frame -> flashs). backface-visibility + translateZ = couche stable. */
.anno-wrap.tc-fs .anno-zoomlayer{backface-visibility:hidden;-webkit-backface-visibility:hidden;}
.anno-wrap.tc-fs .anno-stage video.anno-video{backface-visibility:hidden;-webkit-backface-visibility:hidden;transform:translateZ(0);}
.anno-canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;touch-action:none;}
.anno-fs.anno-zoom:disabled{opacity:.34;cursor:default;}
.anno-fs.anno-speed{font-weight:800;font-size:12px;min-width:38px;width:auto;padding:0 8px;font-family:"Source Sans 3",system-ui,sans-serif;}
.anno-fs.anno-speed.active{background:var(--flag);border-color:var(--flag);color:#fff;}
.anno-speedwrap{position:relative;display:inline-flex;}
.anno-speedmenu{position:absolute;bottom:calc(100% + 6px);left:50%;transform:translateX(-50%);background:var(--surf);border:1px solid var(--line);border-radius:var(--r);padding:4px;display:none;flex-direction:column;gap:2px;box-shadow:var(--shadow);z-index:20;}
.anno-speedmenu.open{display:flex;}
.anno-speedopt{border:none;background:none;color:var(--text);font:inherit;font-weight:700;font-size:13px;padding:6px 16px;border-radius:var(--r-sm);cursor:pointer;white-space:nowrap;text-align:center;}
.anno-speedopt:hover{background:var(--soft);}
.anno-speedopt.active{background:var(--flag);color:#fff;}
/* Mode souris (draw-on sans outil armé) : curseur normal. Dessin (tool-armed) : bordure orange + croix. */
.anno-wrap.draw-on .anno-canvas{cursor:default;}
.anno-wrap.tool-armed .anno-stage{box-shadow:0 0 0 2px var(--flag);}
.anno-wrap.tool-armed .anno-canvas{cursor:crosshair;}
/* Barre d'annotation (calquée sur le mockup) : titre « Annotations » + rangée d'outils (boîtes blanches
   uniformes) avec « Tout effacer » à droite, puis rangée du bas (Assigner à / Toujours visible / Commenter). */
.anno-tb-bar{display:flex;flex-direction:column;gap:14px;margin-top:2px;}
/* Titres de section = MÊME style que les h4 du panneau droit (uppercase, 11px, muted, letter-spacing). */
.anno-tb-title{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);}
.anno-tb-subhint{text-transform:none;letter-spacing:0;font-weight:400;font-size:12px;color:var(--muted);margin-left:3px;}
/* Rangée d'outils */
.anno-tb-tools{display:flex;flex-wrap:wrap;align-items:center;gap:5px;}
.anno-tb-tools .anno-tools{display:flex;gap:4px;flex:0 0 auto;margin:0;}
.anno-tb-tools .anno-undoredo{gap:4px;}
/* Boutons UNIFORMES : même taille/rendu que les contrôles du lecteur (mute/dl/théâtre = 34px, radius 8). */
.anno-tb-tools .anno-tool,
.anno-tb-tools .anno-tb-sum,
.anno-tb-tools .anno-iconbtn{width:34px;height:34px;min-width:34px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--surf);color:var(--text);display:flex;align-items:center;justify-content:center;padding:0;flex:0 0 auto;cursor:pointer;}
.anno-tb-tools svg{width:16px;height:16px;}
.anno-tb-tools .anno-tool:hover,.anno-tb-tools .anno-tb-sum:hover,.anno-tb-tools .anno-iconbtn:not(:disabled):hover{border-color:var(--flag);background:var(--soft);}
.anno-tb-tools .anno-tool.active{background:var(--flag);border-color:var(--flag);color:#fff;}
.anno-tb-tools .anno-iconbtn{color:var(--text);}
.anno-tb-tools .anno-iconbtn:disabled{color:var(--muted);opacity:.5;cursor:default;}
/* Pastilles couleur/trait/texte : même boîte, avec l'indicateur de valeur courante. */
.anno-tb-pop{position:relative;flex:0 0 auto;}
.anno-tb-pop > summary{list-style:none;cursor:pointer;}
.anno-tb-pop > summary::-webkit-details-marker{display:none;}
.anno-tb-pop[open] > summary .anno-tb-sum{border-color:var(--flag);}
.anno-tb-pop > .anno-swatches{position:absolute;z-index:6;bottom:calc(100% + 8px);left:0;display:flex;flex-wrap:wrap;gap:7px;width:max-content;max-width:170px;background:var(--surface,#fff);border:1px solid var(--line);border-radius:var(--r);padding:9px;box-shadow:var(--shadow-lg);}
.anno-tb-dot{width:18px;height:18px;border-radius:50%;box-shadow:0 0 0 1px rgba(0,0,0,.1);}
.anno-tb-wdot{display:flex;align-items:center;justify-content:center;width:18px;height:18px;}
.anno-tb-wdot i{display:block;width:15px;background:var(--text);border-radius:2px;}
/* .anno-tb-tsdot / .anno-sw.txtsize retirés (2026-07-30) : l'option « Taille du texte » n'existe plus. */
.anno-tb-tools .anno-undoredo{display:flex;gap:8px;flex:0 0 auto;}
/* Tout effacer : divider à gauche + poubelle + texte ROUGE, poussé à droite. */
.anno-tb-clear{margin-left:auto;align-self:stretch;display:flex;align-items:center;}
.anno-clearall{display:flex;align-items:center;gap:7px;border:none;background:none;color:var(--danger);font-weight:600;font-size:13px;cursor:pointer;padding:5px 4px;}
.anno-clearall svg{width:16px;height:16px;}
.anno-clearall:hover{opacity:.75;}
/* Version icône seule (gagne de la place) : la poubelle, libellé via infobulle (title/data-tip). */
.anno-clearall-icon{width:34px;height:34px;justify-content:center;padding:0;border:1px solid var(--line);border-radius:var(--r-sm);}
.anno-clearall-icon:hover{opacity:1;border-color:var(--danger);background:var(--soft);}
/* Rangée du bas : Assigner à + Toujours visible + Commenter ici (styles de texte unifiés à 13.5px). */
.anno-tb-bar .anno-meta{display:flex !important;align-items:center;gap:14px;flex-wrap:wrap;margin:0;}
.anno-tb-bar .anno-meta .anno-field{display:flex;align-items:center;gap:8px;margin:0;flex:0 1 auto;}
/* Libellés de CHAMP (Assigner à / Toujours visible) : style commun, distinct des titres. */
.anno-tb-bar .anno-flabel{display:inline;margin:0;font-size:13px;font-weight:500;color:var(--text);white-space:nowrap;text-transform:none;letter-spacing:0;}
.anno-tb-bar .anno-group{width:150px;max-width:100%;min-height:0;padding:9px 11px;font-size:13.5px;border-radius:var(--r-sm);}
.anno-tb-bar .anno-pin{display:flex;align-items:center;gap:9px;font-size:13px;font-weight:500;color:var(--text);white-space:nowrap;}
.anno-cmtbtn{display:flex;align-items:center;gap:7px;border:1px solid var(--line);background:var(--surf);color:var(--text);border-radius:var(--r-sm);padding:9px 14px;font-size:13.5px;font-weight:600;cursor:pointer;}
.anno-cmtbtn svg{width:16px;height:16px;}
.anno-cmtbtn:hover{border-color:var(--flag);background:var(--soft);}
/* Mini boîte à outils flottante (au clic dans le vide) : mêmes boutons que la barre. */
.anno-minitb{position:absolute;z-index:8;display:flex;gap:6px;padding:6px;background:var(--surface,#fff);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);}
.anno-minitb .anno-tool{width:34px;height:34px;min-width:0;flex-direction:row;gap:0;font-size:0;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--surf);color:var(--text);display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0;}
.anno-minitb .anno-tool svg{width:16px;height:16px;}
.anno-minitb .anno-tool:hover{border-color:var(--flag);background:var(--soft);}
/* Indice « Cliquer pour annoter » au survol de la vidéo. */
.anno-hint{position:absolute;z-index:7;top:10px;left:50%;transform:translateX(-50%);background:rgba(20,22,26,.82);color:#fff;font-size:12px;font-weight:600;padding:6px 12px;border-radius:var(--r-pill);pointer-events:none;}
/* Anti-débordement mobile : rien ne dépasse la largeur, tout s'empile proprement. */
.anno-tb-bar,.anno-tb-tools,.anno-tb-bar .anno-meta{max-width:100%;}
.anno-minitb{max-width:calc(100% - 12px);flex-wrap:wrap;}
@media(max-width:640px){
  .anno-tb-bar .anno-group{width:100%;}
  .anno-tb-bar .anno-meta .anno-field{flex:1 1 100%;}
  .anno-tb-clear{margin-left:0;border-left:none;padding-left:0;}
  .anno-cmtbtn{flex:1 1 100%;justify-content:center;}
}
/* Encart texte inline (outil Texte) : ancré sur la vidéo, cadre + curseur clignotant, le
   clavier s'ouvre au focus. Remplace le prompt() système. La couleur = couleur choisie. */
.anno-textedit{position:absolute;z-index:6;max-width:82%;line-height:1;transform:translateY(-2px);display:flex;align-items:center;gap:6px;}
.anno-textedit-ok{display:flex;align-items:center;justify-content:center;width:24px;height:24px;flex:0 0 auto;border:none;border-radius:var(--r-sm);background:var(--flag,var(--flag));color:#fff;cursor:pointer;padding:0;box-shadow:var(--shadow);}
.anno-textedit input,.anno-textedit textarea{
  font-family:"Source Sans 3",system-ui,sans-serif;font-weight:700;line-height:1.25;
  color:inherit;background:rgba(0,0,0,.5);border:1.5px dashed currentColor;border-radius:var(--r-sm);
  padding:2px 8px;outline:none;min-width:16px;caret-color:currentColor;display:block;
}
.anno-textedit input::placeholder,.anno-textedit textarea::placeholder{color:currentColor;opacity:.5;}

/* BULLE : petite fenetre de commentaire ancree au pin. Fond solide (contrairement au texte teleste). */
/* Bulle : encart de saisie CALQUE sur le champ commentaire (.cd-comment-input) — clair et basique. */
.anno-bulle-edit{position:absolute;z-index:8;width:290px;max-width:90vw;transform:translate(14px,-8px);
  background:var(--surface);color:var(--ink);border:1px solid var(--line);
  border-radius:var(--r);padding:11px;box-shadow:var(--shadow-lg);display:flex;flex-direction:column;gap:8px;}
.anno-bulle-ta{width:100%;box-sizing:border-box;resize:vertical;min-height:40px;max-height:160px;
  font:inherit;font-size:13px;line-height:1.4;color:var(--ink);
  background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r);padding:9px 11px;outline:none;}
.anno-bulle-ta:focus{border-color:var(--flag);background:var(--surf);}
.anno-bulle-acts{display:flex;justify-content:flex-end;gap:8px;}
.anno-bulle-btn{border:1px solid var(--line);background:transparent;color:var(--ink);
  font:inherit;font-size:13px;font-weight:700;padding:6px 14px;border-radius:var(--r-sm);cursor:pointer;}
.anno-bulle-btn.primary{background:var(--flag);border-color:var(--flag);color:#fff;}
.anno-bulle-ac{display:flex;flex-direction:column;max-height:150px;overflow-y:auto;border:1px solid var(--line);border-radius:var(--r);background:var(--surface-2);}
.anno-bulle-acopt{text-align:left;background:transparent;border:none;color:var(--ink);font:inherit;font-size:13px;padding:8px 10px;cursor:pointer;}
.anno-bulle-acopt:hover{background:color-mix(in srgb,var(--flag) 14%,transparent);}
/* Bulle : carte de survol/pause = MEME rendu qu'un commentaire (contient un .cd-comment). */
.anno-bulle-pop{position:absolute;z-index:9;width:272px;max-width:82vw;transform:translate(16px,-50%);
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:11px 12px;box-shadow:var(--shadow-lg);}
.anno-bulle-pop.flip-left{transform:translate(calc(-100% - 16px),-50%);}
.anno-bulle-pop .cd-comment{gap:9px;}
/* Carte deplacable (grab) ; oeil DANS le header (au niveau du nom) ; repli = pastille cliquable ; mobile reduit. */
.anno-bulle-pop{cursor:grab;}
.anno-bulle-pop:active{cursor:grabbing;}
/* Trait fin reliant le rond "..." (annotation) a la bulle-pastille. */
.anno-bulle-line{position:absolute;z-index:8;height:0;width:0;border-top:1.5px solid var(--flag);transform-origin:0 0;pointer-events:none;opacity:.75;}
/* Bulle-pastille = toggle unique (ouvre/ferme la carte). Etat ouvert = inverse (on comprend qu'un clic ferme). */
.anno-bulle-pill{position:absolute;z-index:9;display:flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:50%;border:2px solid var(--surface);background:var(--flag);color:#fff;box-shadow:var(--shadow-lg);cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Cg stroke-linecap='round'%3E%3Cpath d='M12 3v18M3 12h18' stroke='white' stroke-width='3'/%3E%3Cpath d='M12 3v18M3 12h18' stroke='%23111' stroke-width='1.3'/%3E%3C/g%3E%3C/svg%3E") 12 12, crosshair;padding:0;}
.anno-bulle-pill:hover{filter:brightness(1.07);}
.anno-bulle-pill.open{background:var(--surface);color:var(--flag);border-color:var(--flag);}
/* (L'etat POINTILLE « + » — annotation selectionnee sans commentaire — a ete RETIRE 2026-07-30 : il
   doublonnait le bouton bulle de l'encart de selection. Seule une annotation COMMENTEE a une pastille.) */
.anno-bulle-pill svg{pointer-events:none;}
/* touch-action:none sur la pastille ET la carte : sans ca, un tap tactile qui glisse d'un cheveu declenche le
   defilement de la page, le navigateur envoie un `pointercancel` et le toggle ouvrir/fermer sautait (bug
   « des fois oui des fois non », 2026-07-30). L'unite se deplace au doigt, elle n'a pas a faire defiler. */
.anno-bulle-pill,.anno-bulle-pop{touch-action:none;}
/* Mobile : cible tactile confortable (la bulle doit s'attraper au doigt). placeBulleViz lit offsetWidth. */
@media(max-width:640px){
  .anno-bulle-pop{width:210px;max-width:76vw;padding:9px 10px;} .anno-bulle-pop .cd-comment-body{font-size:12.5px;}
  .anno-bulle-pill{width:34px;height:34px;} .anno-bulle-pill svg{width:17px;height:17px;}
}

.anno-toolbar{margin-top:6px;display:flex;flex-direction:column;gap:8px;}
/* Bandes compactes : outils + styles côte à côte, puis groupe + actions côte à côte (wrap sur mobile). */
.anno-band{display:flex;flex-wrap:wrap;gap:12px 28px;align-items:flex-start;}
.anno-band-meta{align-items:flex-end;}
/* Retour visuel « Enregistré » qui apparait a chaque trait (annotation deja sauvee, sans Terminer). */
.anno-saved{display:inline-flex;align-items:center;gap:4px;font-size:13px;font-weight:600;color:var(--green);opacity:0;transform:translateY(2px);transition:opacity .18s ease,transform .18s ease;pointer-events:none;}
.anno-saved::before{content:"";width:14px;height:14px;flex:0 0 14px;border-radius:50%;background:var(--green);-webkit-mask:no-repeat center/10px url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='white' d='M9 16.17 4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z'/></svg>");mask:no-repeat center/10px url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='white' d='M9 16.17 4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z'/></svg>");}
.anno-saved.show{opacity:1;transform:none;}
/* Outils + styles d'annotation TOUJOURS visibles (découvrabilité de l'outil). Seules les
   actions (annuler/effacer/enregistrer) restent réservées au mode dessin actif. */
.anno-actions{display:none;order:4;}
.anno-wrap.draw-on .anno-actions{display:flex;}
/* #3a/#3b : ligne groupe + toggle (entre les couleurs et les actions ; visible en mode dessin) */
.anno-meta{display:none;gap:16px;flex-wrap:wrap;align-items:flex-end;order:3;}
.anno-wrap.draw-on .anno-meta{display:flex;}
.anno-group{border:1px solid var(--line);border-radius:var(--r);padding:8px 10px;font-size:13px;font-family:inherit;background:var(--bg);color:var(--text);min-width:150px;}
.anno-pin{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--muted);}
/* #3a : barre de filtres par groupe (toujours visible sous la vidéo) */
.anno-filters{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:8px;}
/* Mobile : le titre « Afficher annotation par groupe » sur sa ligne, les boutons dessous. */
@media(max-width:640px){ .anno-filters-lbl{flex-basis:100%;margin-bottom:2px;} }
.anno-filters-lbl{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);margin-right:2px;}
.anno-filter-chip{border:1px solid var(--line);background:var(--surf);color:var(--muted);border-radius:var(--r-pill);padding:5px 11px;font-size:12px;font-weight:700;cursor:pointer;opacity:.5;}
.anno-filter-chip.on{opacity:1;border-color:var(--flag);color:var(--flag);}
.anno-filter-chip.manage{opacity:1;border-style:dashed;border-color:var(--blue);color:var(--blue);}
/* Oeil « masquer / afficher toutes les annotations » (lecture fluide) — bien visible en tete de barre. */
.anno-filter-eye{display:inline-flex;align-items:center;gap:5px;border:1px solid var(--line);background:var(--surf);color:var(--text);border-radius:var(--r-pill);padding:5px 11px 5px 9px;font-size:12px;font-weight:700;cursor:pointer;}
.anno-filter-eye svg{display:block;}
.anno-filter-eye.off{background:var(--flag);border-color:var(--flag);color:#fff;}
.anno-filter-manage{border:1px solid var(--line);background:transparent;color:var(--muted);border-radius:var(--r-pill);padding:5px 11px;font-size:12px;font-weight:700;cursor:pointer;}
.anno-filter-manage.on{border-color:var(--blue);color:var(--blue);}
/* Contrôles PERSO (barre native cachée) : play/pause + scrubber avec repères */
.anno-controls{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:5px;margin-top:8px;}
.anno-play{flex:0 0 auto;width:38px;height:38px;border-radius:50%;border:none;background:var(--flag);color:#fff;font-size:14px;cursor:pointer;display:flex;align-items:center;justify-content:center;line-height:1;}
/* Reculer/avancer + image par image : petits boutons discrets autour du bouton lecture. */
.anno-step{flex:0 0 auto;width:32px;height:32px;border-radius:var(--r-sm);border:1px solid var(--line);background:var(--surf);color:var(--text);cursor:pointer;display:flex;align-items:center;justify-content:center;line-height:1;}
.anno-step:hover{background:var(--soft);}
/* Annuler / Rétablir : flèches compactes à droite des épaisseurs. */
.anno-undoredo{display:flex;gap:6px;}
.anno-iconbtn{width:34px;height:34px;border-radius:var(--r-sm);border:1px solid var(--line);background:var(--surf);color:var(--text);font-size:18px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;}
.anno-iconbtn:hover{background:var(--soft);}
.anno-iconbtn:disabled{opacity:.4;cursor:default;}
/* Notifier un joueur depuis une annotation. */
.anno-notify{position:relative;}
.anno-notify-menu{position:absolute;z-index:20;bottom:calc(100% + 6px);left:0;min-width:200px;max-height:260px;overflow-y:auto;background:var(--surface,var(--surf));border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow-lg);padding:6px;}
.anno-notify-opt{display:block;width:100%;text-align:left;padding:8px 10px;border:none;background:transparent;color:var(--text);border-radius:var(--r-sm);font-size:13px;cursor:pointer;}
.anno-notify-opt:hover{background:var(--soft);}
.anno-notify-empty{padding:10px;color:var(--muted);font-size:12.5px;}
.anno-scrub{position:relative;flex:1 1 200px;min-width:140px;height:16px;background:var(--surf);border-radius:var(--r-sm);cursor:pointer;touch-action:none;}
.anno-scrub-fill{position:absolute;left:0;top:0;bottom:0;background:var(--flag);opacity:.35;border-radius:8px 0 0 8px;width:0;pointer-events:none;}
/* Playhead PLAT : fine ligne verticale a la position courante (precis, pas un gros rond). */
.anno-scrub-head{position:absolute;top:-2px;bottom:-2px;left:0;width:3px;margin-left:-1.5px;background:var(--flag);border-radius:1px;box-shadow:0 0 0 1px rgba(255,255,255,.65);pointer-events:none;z-index:2;}
.anno-scrub .anno-marker{position:absolute;top:3px;width:10px;height:10px;margin-left:-5px;border-radius:50%;border:2px solid #fff;box-shadow:0 1px 3px rgba(26,26,26,.35);cursor:pointer;}
.anno-scrub .anno-marker.anno{background:var(--flag);}
.anno-scrub .anno-marker.comment{background:var(--blue);}
.anno-time{flex:0 0 auto;font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums;min-width:84px;text-align:right;}
/* Mobile : la timeline passe SEULE en haut (pleine largeur), les contrôles en dessous. Placé APRÈS
   les règles de base .anno-scrub/.anno-time pour gagner (les media queries n'ajoutent pas de spécificité). */
@media(max-width:640px){
  /* Mobile : la TIMELINE sur sa propre ligne (pleine largeur), et TOUS les contrôles compacts en
     dessous (rien de masqué). Boutons petits pour tenir sur une ligne. */
  .anno-controls{flex-wrap:wrap;gap:5px;justify-content:center;}
  .anno-scrub{order:-1;flex:0 0 100%;height:16px;}
  .anno-time{order:1;font-size:11px;min-width:0;}
  .anno-step,.anno-fs,.anno-navclip{width:28px;height:28px;flex:0 0 auto;}
  .anno-play{width:32px;height:32px;flex:0 0 auto;}
  .anno-fs svg,.anno-navclip svg,.anno-step svg,.anno-play svg{width:13px;height:13px;}
}
/* Bande de repères autonome (mobile, sous le lecteur natif) */
.anno-markers{position:relative;height:16px;margin-top:8px;background:var(--surf);border-radius:var(--r-sm);}
.anno-markers .anno-marker{position:absolute;top:3px;width:10px;height:10px;margin-left:-5px;border-radius:50%;border:2px solid #fff;box-shadow:0 1px 3px rgba(26,26,26,.35);cursor:pointer;}
.anno-markers .anno-marker.anno{background:var(--flag);}
.anno-markers .anno-marker.comment{background:var(--blue);}
.anno-fs-note{font-size:11px;color:var(--muted);line-height:1.4;margin-top:8px;}
/* Pause auto : on masque les contrôles natifs sans les désactiver (le natif les force sur pause). */
video.anno-hide-controls::-webkit-media-controls{display:none !important;}
video.anno-hide-controls::-webkit-media-controls-enclosure{display:none !important;}
.anno-fs,.anno-navclip{flex:0 0 auto;width:34px;height:34px;border-radius:var(--r-sm);border:1px solid var(--line);background:var(--surf);color:var(--text);cursor:pointer;display:flex;align-items:center;justify-content:center;}
/* Clip précédent/suivant : plus repérables (couleur accent) que les contrôles neutres. */
.anno-navclip{border:1.5px solid var(--flag);color:var(--flag);width:36px;height:36px;}
.anno-navclip:hover{background:var(--flag);color:#fff;}
.anno-navclip svg{stroke-width:2.6;}
.anno-theater.active{background:var(--flag);border-color:var(--flag);color:#fff;}
/* Tooltip instantané (le title natif attend ~1s). Ancré gauche/droite pour ne JAMAIS déborder. */
.anno-controls [data-tip]{position:relative;}
.anno-controls [data-tip]:hover::after{content:attr(data-tip);position:absolute;bottom:calc(100% + 6px);left:50%;transform:translateX(-50%);background:var(--ink,#1a1d21);color:#fff;font-size:11px;font-weight:600;line-height:1.3;white-space:nowrap;max-width:220px;text-align:center;padding:5px 8px;border-radius:var(--r-sm);z-index:20;pointer-events:none;box-shadow:var(--shadow);}
.anno-controls .tip-l[data-tip]:hover::after{left:0;right:auto;transform:none;}
.anno-controls .tip-r[data-tip]:hover::after{left:auto;right:0;transform:none;}
/* Boutons de lecture : pas de sélection de texte / callout au maintien (fix « select » sur mobile). */
.anno-controls button,.anno-step,.anno-play,.anno-fs,.anno-navclip{user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;touch-action:manipulation;}
/* Théâtre masqué sur mobile (pas pertinent). */
@media(max-width:899px){ .anno-theater{display:none;} }
/* En VRAI plein écran, le théâtre n'a pas de sens (déjà pleine taille) et casse la disposition → on le masque. */
.anno-wrap:fullscreen .anno-theater,.anno-wrap.expanded .anno-theater{display:none !important;}
/* MOBILE (debout ET couché) : la barre du lecteur tenait sur trois rangs. On retire ce qui fait double
   emploi — les deux loupes (le pincement à deux doigts zoome déjà, dans le lecteur normal comme dans le
   pano) et le compteur de temps (la timeline le dit) — et l'encart d'aide au survol, qui s'ouvre au
   moindre appui sur un écran tactile et recouvre la vidéo.
   Les tailles compactes, elles, existaient déjà plus haut mais ne s'appliquaient pas : `.anno-fs`
   (34 px) et `.anno-navclip` (36 px) sont déclarés APRÈS cette media query dans le fichier, donc ils la
   battaient dans la cascade. On les redéclare ici, à leur place. */
@media(max-width:640px), (orientation:landscape) and (max-height:560px){
  .anno-controls{gap:4px;}
  .anno-zoom{display:none;}
  .anno-time{display:none;}
  .anno-controls [data-tip]:hover::after{display:none;}
  .anno-fs,.anno-navclip{width:28px;height:28px;}
  .anno-fs svg,.anno-navclip svg{width:13px;height:13px;}
}
/* Écrans étroits (Android 360, iPhone mini) : deux boutons de trop pour la ligne. On resserre juste
   ce qu'il faut, et seulement là — au-dessus de 390 px les tailles ci-dessus ne bougent pas. */
@media(max-width:389px){
  .anno-controls{gap:3px;}
  .anno-step,.anno-fs,.anno-navclip{width:26px;height:26px;}
  .anno-play{width:30px;height:30px;}
  .anno-fs.anno-speed{width:auto;min-width:30px;padding:0 5px;}
}
/* Desktop : prev/next clip du lecteur masqués (le rail latéral navigue déjà) — réaffichés en plein écran (rail caché). */
@media(min-width:900px){ .anno-navclip{display:none;} }
/* Mode théâtre (rail masqué) : on remet les boutons clip préc./suiv. dans le lecteur. */
@media(min-width:900px){ .cd-root.cd-theater .anno-navclip{display:flex;} }
/* TÉLÉPHONE EN PAYSAGE : DEUX zones, pas trois. Un téléphone large couché (900-950 px) passait
   au-dessus du seuil de 860 px et affichait rail à gauche + lecteur + détails à droite dans 400 px de
   haut : tout était écrasé. On garde la BANDE DE GAUCHE (elle sert à passer d'un clip à l'autre, c'est
   le geste du paysage) et on renvoie la colonne de DROITE sous le lecteur, comme en portrait.
   Repère = la HAUTEUR, pas la largeur : une tablette couchée (744 px et plus) garde ses trois zones, et
   le seuil reste sous une fenêtre de bureau réduite (~590 px sur un 1280x720). */
@media (orientation:landscape) and (max-height:560px){
  /* Nav passée à gauche (64 px, cf. theme.css) : les écrans du SPA se décalent comme en bureau replié,
     et plus personne ne réserve de place en bas pour une barre qui n'y est plus. */
  body[data-screen="menu"],body[data-screen="videoroom"],body[data-screen="tutorial"],
  body[data-screen="profile"],body[data-screen="team"],body[data-screen="remote"]{padding-left:var(--tcnav-w,64px);}
  body[data-screen="videoroom"] .vr-main{padding-bottom:24px;}
  body[data-screen="tutorial"] .tutorial-ui{padding-bottom:24px;}
  .clip-detail-overlay{left:var(--tcnav-w,64px);bottom:0;}
  .cd-apptop{display:none;}   /* logo + cloche : déjà dans la bande de gauche */
  /* Encoche à gauche : la bande a filé à droite (cf. theme.js / theme.css), le contenu suit. */
  html.tc-nav-right body[data-screen="menu"],html.tc-nav-right body[data-screen="videoroom"],
  html.tc-nav-right body[data-screen="tutorial"],html.tc-nav-right body[data-screen="profile"],
  html.tc-nav-right body[data-screen="team"],html.tc-nav-right body[data-screen="remote"]{padding-left:env(safe-area-inset-left,0px);padding-right:64px;}
  html.tc-nav-right .clip-detail-overlay{left:env(safe-area-inset-left,0px);right:64px;}
  .cd-layout{grid-template-columns:1fr;}                                    /* détails SOUS le lecteur */
  .cd-root.has-rail .cd-body{grid-template-columns:180px minmax(0,1fr);}    /* bande de gauche CONSERVÉE, plus étroite */
  .cd-rail{display:flex;}
  .cd-rail-item video,.cd-rail-item img,.cd-rail-item .tc-thumb-loading{width:44px;height:28px;}
  .cd-root.has-rail .anno-navclip{display:none;}                            /* la bande navigue déjà : pas de doublon */
}
/* Plein écran : boutons clip préc./suiv. bien visibles (contraste sur fond noir) + réaffichés sur desktop. */
.anno-wrap:fullscreen .anno-navclip,.anno-wrap.expanded .anno-navclip{display:flex !important;background:var(--flag);border-color:var(--flag);color:#fff;}
.anno-wrap:fullscreen,.anno-wrap.expanded{background:#000;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;padding:0;width:100vw;height:100dvh;}
/* Plein écran CSS (iOS) : on remplit le viewport visible sans l'API Fullscreen. */
.anno-wrap.expanded{position:fixed;inset:0;z-index:1000;overflow:hidden;}
/* Vrai plein écran : la vidéo remplit l'écran (réserve minimale pour la barre de contrôles). */
.anno-wrap:fullscreen .anno-stage,.anno-wrap.expanded .anno-stage,.anno-wrap.anno-fs-mode .anno-stage{flex:1 1 auto;display:flex;align-items:center;justify-content:center;width:100%;min-height:0;max-height:calc(100dvh - 52px);}
/* PLEIN ECRAN CSS du lecteur classique (marche iOS, garde annotations, contrairement au lecteur video natif). */
.anno-wrap.anno-fs-mode{position:fixed;inset:0;z-index:9999;margin:0;max-width:none;border-radius:0;background:#000;display:flex;flex-direction:column;}
/* En plein ecran : que la VIDEO (+ annotations) + la barre de lecture, comme le pano. On masque l'edition
   (barre d'outils de dessin, note plein ecran, filtres, marqueurs) qui encombrait en dessous. */
.anno-wrap.anno-fs-mode .anno-toolbar,
.anno-wrap.anno-fs-mode .anno-fs-note,
.anno-wrap.anno-fs-mode .anno-filters,
.anno-wrap.anno-fs-mode .anno-markers{display:none !important;}
.anno-wrap.anno-fs-mode .anno-controls{flex:0 0 auto;border-radius:0;padding-bottom:calc(env(safe-area-inset-bottom,0px) + 6px);}
/* Marge laterale en plein ecran (encoches / coins arrondis d'ecran) : sinon les boutons collent aux bords et
   sont rognes par l'arrondi. Les deux modes de plein ecran du clip normal. */
.anno-wrap.anno-fs-mode .anno-controls,.anno-wrap:fullscreen .anno-controls{padding-left:max(14px,env(safe-area-inset-left));padding-right:max(14px,env(safe-area-inset-right));}
/* Mode theatre INUTILE en plein ecran -> bouton masque (clip normal). */
.anno-wrap:fullscreen .anno-theater,.anno-wrap.anno-fs-mode .anno-theater{display:none !important;}
/* La video prend TOUTE la zone (comme le pano) : le stage remplit (flex:1) et la video remplit le stage. Mon
   .anno-fs-mode n'avait PAS ces regles -> la video restait plafonnee a max-height:70vh (bug). Le zoom + pan
   (.anno-zoomlayer, deja geres) permettent d'aller plus loin / de remplir la hauteur et de se deplacer. */
.anno-wrap.anno-fs-mode .anno-stage{max-height:none;flex:1 1 auto;}
.anno-wrap.anno-fs-mode .anno-stage video.anno-video{width:100%;height:100%;max-width:100vw;max-height:none;object-fit:contain;}
.anno-wrap.anno-fs-mode .anno-zoomlayer{width:100%;height:100%;}
body.tc-anno-fs .appnav,body.tc-anno-fs .apptop{display:none !important;}
.anno-fs-close{display:none;position:absolute;top:calc(env(safe-area-inset-top,0px) + 10px);right:12px;z-index:12;width:42px;height:42px;border-radius:50%;border:none;background:rgba(0,0,0,.5);color:#fff;align-items:center;justify-content:center;cursor:pointer;}
.anno-wrap.anno-fs-mode .anno-fs-close{display:flex;}
/* Plein écran : la vidéo REMPLIT l'espace (object-fit:contain) et est AGRANDIE (upscale) — width/height:auto
   ne dépassait jamais la résolution native → petite au centre. Le canvas est recalé en JS sur le rectangle
   réel de la vidéo (fit()), donc l'alignement des annotations est préservé. */
.anno-wrap:fullscreen .anno-video,.anno-wrap.expanded .anno-video{width:100%;height:100%;max-width:100vw;max-height:calc(100dvh - 52px);object-fit:contain;}
/* En théâtre/plein écran la couche zoom épouse la taille exacte de la vidéo (centrée par le flex du stage). */
.anno-wrap:fullscreen .anno-zoomlayer,.anno-wrap.expanded .anno-zoomlayer{width:100%;height:calc(100dvh - 52px);}
/* Le plein écran PRIME sur le mode théâtre (cd-theater) : si on passe en plein écran DEPUIS le théâtre,
   ses règles (plus spécifiques) cassaient la taille → on force la disposition plein écran. */
.anno-wrap:fullscreen .anno-stage,.anno-wrap.expanded .anno-stage{max-height:calc(100dvh - 52px)!important;}
.anno-wrap:fullscreen .anno-stage video.anno-video,.anno-wrap.expanded .anno-stage video.anno-video{width:100%!important;height:100%!important;max-height:calc(100dvh - 52px)!important;object-fit:contain!important;}
.anno-wrap:fullscreen .anno-zoomlayer,.anno-wrap.expanded .anno-zoomlayer{width:100%!important;height:calc(100dvh - 52px)!important;}
.anno-wrap:fullscreen .anno-controls,.anno-wrap.expanded .anno-controls{padding:0 12px 6px;}
.anno-wrap:fullscreen .anno-toolbar,.anno-wrap.expanded .anno-toolbar{display:none;}
.anno-wrap:fullscreen .anno-filters,.anno-wrap:fullscreen .anno-controls,.anno-wrap.expanded .anno-filters,.anno-wrap.expanded .anno-controls{width:min(1100px,100%);color:#fff;}
/* Timecode cliquable dans un commentaire */
.cd-comment-seek{color:var(--flag);font-weight:800;cursor:pointer;}
/* BULLE : pastille pin devant le timecode d'un commentaire lie a un pin sur la video. */
.cd-comment-pin{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--flag,var(--flag));margin-right:5px;vertical-align:middle;box-shadow:0 0 0 2px color-mix(in srgb,var(--flag,var(--flag)) 25%,transparent);}
.cd-comment-tip{font-size:11px;color:var(--muted);line-height:1.4;margin:2px 0 4px;}
/* Autocomplétion inline du champ commentaire (@ / 00:) */
.cd-ac-menu{border:1px solid var(--line);border-radius:var(--r);background:var(--surface);overflow:hidden;margin:-2px 0 6px;box-shadow:0 6px 18px rgba(26,26,26,.12);}
.cd-ac-opt{display:block;width:100%;text-align:left;border:none;background:transparent;padding:8px 12px;font-size:13px;font-weight:600;color:var(--text);cursor:pointer;}
.cd-ac-opt:hover{background:var(--surface-2);}
.anno-tools{display:flex;gap:8px;flex-wrap:wrap;}
.anno-tool{border:1px solid var(--line);background:var(--surf);border-radius:var(--r);padding:9px 11px;display:flex;flex-direction:column;align-items:center;gap:4px;font-size:11px;font-weight:700;color:var(--muted);min-width:58px;cursor:pointer;font-family:inherit;}
.anno-tool .ti{font-size:17px;line-height:1;}
.anno-tool.active{border-color:var(--flag);background:var(--soft);color:var(--flag);}
.anno-style{display:flex;gap:22px;flex-wrap:wrap;align-items:flex-end;}
.anno-flabel{font-size:11px;color:var(--muted);font-weight:700;margin-bottom:6px;text-transform:uppercase;letter-spacing:.03em;}
.anno-swatches{display:flex;gap:8px;}
.anno-sw{width:28px;height:28px;border-radius:50%;cursor:pointer;border:2px solid #fff;box-shadow:0 0 0 1px var(--line);padding:0;display:flex;align-items:center;justify-content:center;}
.anno-sw.on{box-shadow:0 0 0 2px var(--flag);}
.anno-sw.width{background:var(--surf);}
.anno-sw.width i{width:16px;background:var(--text);border-radius:2px;display:block;}
/* Encart de sélection : petite barre d'actions (Modifier + Supprimer) posée sur l'annotation. */
.anno-selbar{position:absolute;z-index:7;display:flex;gap:2px;padding:3px;background:var(--surface,#fff);border:1px solid var(--line);border-radius:var(--r-sm);box-shadow:var(--shadow);}
.anno-selbtn{width:28px;height:28px;border:none;border-radius:var(--r-sm);background:transparent;color:var(--text);cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0;}
.anno-selbtn-edit:hover{background:var(--soft);color:var(--flag);}
.anno-selbtn-del{color:var(--danger,#e5484d);}
.anno-selbtn-del:hover{background:var(--soft);}
.anno-selbtn-del:hover{background:var(--soft);}
.anno-actions{gap:8px;flex-wrap:wrap;}
.anno-actions .btn[disabled]{opacity:.55;cursor:default;}

/* ---- Panneau de détails (droite) ---- */
.cd-right.dpanel{background:var(--surf);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;}
.dtabs{display:flex;border-bottom:1px solid var(--line);}
.dtabs button{flex:1;border:none;background:none;font:inherit;font-weight:700;font-size:13px;color:var(--muted);padding:12px;cursor:pointer;}
.dtabs button.active{color:var(--flag);box-shadow:inset 0 -2px 0 var(--flag);}
.dsec{padding:10px 14px;border-bottom:1px solid var(--line);}
.dsec:last-child{border-bottom:none;}
.dsec h4{font-size:11px;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);margin:0 0 6px;}
/* Entête de section avec bouton (ex. Dossiers : titre + « Nouveau dossier » en icône). */
.dsec-head-row{display:flex;align-items:center;justify-content:space-between;gap:8px;}
.dsec-head-add{width:28px;height:28px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--surf);color:var(--text);display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0;}
.dsec-head-add:hover{border-color:var(--flag);background:var(--soft);color:var(--flag);}
/* Section « Déplacer dans une autre session » : discrète, en bas. */
/* Tiroir repliable (« Vu par ») : fermé par défaut pour ne pas encombrer la colonne. */
.dsec-drawer{padding:0;}
.dsec-drawer>summary{list-style:none;cursor:pointer;display:flex;align-items:center;padding:10px 14px;user-select:none;}
.dsec-drawer>summary::-webkit-details-marker{display:none;}
.dsec-drawer>summary h4{margin:0;}
.dsec-drawer>summary::after{content:'';width:7px;height:7px;border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);transform:rotate(-45deg);margin-left:auto;transition:transform .18s ease;}
.dsec-drawer[open]>summary::after{transform:rotate(45deg);}
.dsec-drawer>div{padding:0 14px 12px;}
/* Bandeau « offre gratuite » (accueil) pour les équipes sur le plan gratuit. */
.dash-freeplan{display:flex;align-items:center;gap:10px;text-decoration:none;background:var(--soft);border:1px solid var(--line);border-left:3px solid var(--flag);color:var(--ink);box-shadow:0 4px 16px rgba(20,23,28,.06);}
.dash-freeplan .dfp-badge{font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.04em;background:var(--flag);color:#fff;border-radius:var(--r-pill);padding:3px 9px;flex-shrink:0;}
.dash-freeplan .dfp-txt{font-size:13px;flex:1;line-height:1.4;}
.dash-freeplan .dfp-arrow{color:var(--flag);font-weight:800;flex-shrink:0;font-size:16px;}
/* Note explicative dans un tiroir de la colonne détails (ex. « Panorama (admin) »). */
.dsec-note{margin:0 0 8px;font-size:12px;line-height:1.45;color:var(--muted);}
.dsec-discreet{opacity:.85;}
.dsec-discreet h4{font-size:10.5px;}
.dsec-discreet .cd-sel{font-size:12.5px;padding:7px 9px;}
/* AI : Voir résultat + Relancer analyse sur une ligne (on annule le .dsec .btn{width:100%}). */
.ai-btnrow{display:flex;gap:8px;flex-wrap:nowrap;}
.ai-btnrow .btn{display:block;width:auto !important;flex:1 1 0;min-width:0;}
/* Sections détail plus compactes (Dossiers, Tags, Joueur, Statut, Review) : rangées plus serrées. */
.dsec .chip-row{gap:6px;}
.dsec .btn{padding:7px 10px;font-size:13px;}
.dsec .field{margin-bottom:8px;}
.cd-root .kv{display:flex;justify-content:space-between;font-size:13px;padding:3px 0;}
.cd-root .kv span{color:var(--muted);}
.cd-root .kv b{font-weight:700;}
.cd-root .chip-row{margin-bottom:0;}
.cd-root .editable-chip{background:var(--surface-2);border-color:var(--line);}
.cd-root .add-chip-btn{border-color:var(--line);color:var(--muted);}
.cd-root .coaching-comment{width:100%;min-height:110px;border:1px solid var(--line);border-radius:var(--r);padding:10px 12px;font:inherit;font-size:13px;background:var(--surface-2);color:var(--ink);resize:vertical;}
.statusrow{display:flex;gap:8px;}
.stbtn{flex:1;border:1px solid var(--line);border-radius:var(--r);padding:8px 4px;font-size:12px;font-weight:700;text-align:center;cursor:pointer;background:var(--surf);color:var(--ink);font-family:inherit;}
.stbtn.g.on{background:rgba(31,157,87,.16);color:var(--green);border-color:#1f9d57;}
.stbtn.f.on{background:var(--soft);color:var(--flag);border-color:var(--flag);}
.stbtn.s.on{background:rgba(44,111,255,.16);color:var(--blue);border-color:#2c6fff;}
.stbtn.ras.on{background:var(--surface-2);color:var(--ink);border-color:var(--muted);}
.stbtn.rev{flex:0 1 auto;}
.stbtn.rev.on{background:rgba(31,157,87,.16);color:var(--green);border-color:#1f9d57;}
/* Indicateur « clip pas encore vu par le staff ». */
/* Point orange « pas encore revu » : plus AFFICHE (vr-feed.js, 2026-07-30 « pour l'instant ») ; regles gardees pour le remettre facilement. */
.vr-unseen{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--flag);margin-right:6px;vertical-align:middle;}
.vr-unseen.card{position:absolute;top:8px;left:8px;width:9px;height:9px;margin:0;box-shadow:0 0 0 2px rgba(0,0,0,.35);}
.cd-root .coaching-save-hint{opacity:0;transition:opacity .2s;color:var(--green);font-size:12px;font-weight:700;padding:0 16px 12px;}
.cd-root .coaching-save-hint.show{opacity:1;}

/* ============================================================
   NAVIGATION — barre du haut sur l'accueil app + sous-lien sidebar
   ============================================================ */
.app-topnav{position:absolute;top:0;left:0;right:0;display:flex;justify-content:center;gap:6px;padding:calc(env(safe-area-inset-top,0px) + 10px) 12px 10px;z-index:5;}
.app-topnav .atn-item{display:inline-flex;align-items:center;gap:5px;font-size:13px;font-weight:700;color:var(--muted);text-decoration:none;padding:7px 12px;border-radius:var(--r);background:var(--surface);border:1px solid rgba(26,26,26,.06);}
.app-topnav .atn-item.active{color:var(--flag);background:var(--surface-2);}
.app-topnav .atn-item span{font-size:14px;}
.nav-badge{display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;padding:0 5px;border-radius:var(--r-pill);background:var(--flag);color:#fff;font-size:11px;font-weight:800;line-height:1;vertical-align:middle;}

/* ============================================================
   DA SOMBRE — Accueil "dashboard" + navigation unifiée
   (sidebar gauche sur PC ≥900px, barre du bas sur mobile)
   ============================================================ */
.mode-chooser{align-items:stretch;justify-content:flex-start;padding:0;overflow-y:auto;}
.dash{width:100%;max-width:760px;margin:0 auto;padding:18px 16px calc(env(safe-area-inset-bottom,0px) + 96px);display:flex;flex-direction:column;gap:14px;}
.dash-hero{display:contents;}
@media(min-width:900px){
  /* Desktop/tablette : pas de nav du bas a degager -> padding bas raisonnable (96px = reste du mobile). */
  .dash{max-width:none;margin:0;padding:24px 28px 40px;}
  /* La carte équipe ayant été déplacée dans le header, l'encart restant (prochain match) prend toute la largeur. */
  /* align-items:start + pas de height:100% : en une seule colonne, ca evitait juste que les cartes s'ETIRENT
     (gros vide sous "prochain match" en paysage iPad, hauteur reduite). Les cartes prennent leur hauteur reelle. */
  .dash-hero{display:grid;grid-template-columns:1fr;gap:14px;align-items:start;}
}
.dash-top{display:none;} /* remplacé par .apptop (mobile) / cloche sidebar (desktop) — header unifié */
.dash-bell{position:relative;font-size:20px;text-decoration:none;line-height:1;}
.dash-bell .nav-badge{position:absolute;top:-5px;right:-7px;}
.dash-label{font-size:11px;font-weight:800;letter-spacing:.08em;color:var(--muted);text-transform:uppercase;margin-top:6px;}
.dash-label-row{display:flex;align-items:center;justify-content:space-between;}
.dash-seeall{color:var(--flag);font-weight:700;font-size:12px;text-transform:none;letter-spacing:0;}
.dash-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);padding:18px;}
.dash-up-label{font-size:11px;font-weight:800;letter-spacing:.08em;color:var(--muted);margin-bottom:12px;}
.dash-up-row{display:flex;align-items:center;justify-content:space-between;gap:12px;}
.dash-up-row b{font-size:19px;display:block;line-height:1.15;}
.dash-up-sub{font-size:12.5px;color:var(--muted);display:block;margin-top:4px;}
.dash-up-mark{width:62px;height:62px;border-radius:var(--r-lg);background:var(--flag);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:22px;flex-shrink:0;background-size:cover;background-position:center;box-shadow:var(--shadow);}
.dash-up-info{min-width:0;text-align:left;}
/* Sélecteur d'équipe ultra-minimaliste : un petit lien « ⇄ Changer d'équipe »
   par-dessus lequel un <select> natif transparent ouvre le sélecteur au clic. */
.dash-up-switch{position:relative;display:inline-flex;align-items:center;margin-top:10px;}
.dash-up-switch-lbl{display:inline;font-size:12px;font-weight:700;color:var(--muted);}
.dash-up-switch:hover .dash-up-switch-lbl{color:var(--text);}
.dash-up-switch select{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer;border:none;}
.dash-up-join{margin-top:14px;padding-top:13px;border-top:1px solid var(--border);}
.dash-join-btn{display:inline-block;background:var(--flag);color:#fff;border-radius:var(--r);padding:9px 16px;font-weight:800;font-size:13px;text-decoration:none;}
/* Carte « Mon équipe » : bloc logo+nom CENTRÉ horizontalement (l'espace se fait sur les côtés,
   le logo reste collé au nom). Sur desktop, centré aussi verticalement comme la carte match. */
#teamCard #dashUpLink{justify-content:center;}
@media(min-width:900px){
  #teamCard{display:flex;flex-direction:column;}
  #teamCard .dash-up-label{text-align:center;}
  #teamCard #dashUpLink{flex:1;}
}
.qa-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
.qa{display:flex;flex-direction:column;gap:12px;align-items:flex-start;text-align:left;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);padding:16px 15px;color:var(--text);font:inherit;cursor:pointer;text-decoration:none;transition:transform .12s ease, box-shadow .12s ease, border-color .12s ease;}
.qa:hover{border-color:var(--flag);transform:translateY(-2px);box-shadow:var(--shadow);}
.qa-ic{width:46px;height:46px;border-radius:var(--r);background:var(--surface-2);color:var(--text);display:flex;align-items:center;justify-content:center;}
.qa-ic [data-icon]{width:24px;height:24px;display:inline-flex;}
.qa-txt{display:flex;flex-direction:column;gap:3px;min-width:0;}
.qa-t{font-family:var(--font-display,'Oswald',sans-serif);font-weight:700;font-size:15px;letter-spacing:.01em;text-transform:uppercase;line-height:1.15;}
.qa-sub{font-size:12.5px;font-weight:600;color:var(--muted);line-height:1.2;}
/* Actions PRINCIPALES (filmer + revoir) mises en avant : icône accent orange. */
.qa.qa-primary .qa-ic{background:var(--flag);color:#fff;}
.dash-recent{display:flex;flex-direction:column;gap:8px;}
.dr-item{display:flex;align-items:center;gap:12px;background:var(--surface);border:1px solid var(--border);border-radius:var(--r);padding:8px;cursor:pointer;}
.dr-item:hover{border-color:var(--flag);}
.dr-th{width:64px;height:42px;border-radius:var(--r-sm);overflow:hidden;background:#000;flex-shrink:0;}
.dr-th video,.dr-th img{width:100%;height:100%;object-fit:cover;display:block;}
.dr-c{flex:1;min-width:0;}
.dr-c b{font-size:13.5px;display:block;}
.dr-c span{font-size:12px;color:var(--muted);}
.dr-fav{color:var(--flag);font-size:15px;}
.dash-empty{color:var(--muted);font-size:13px;padding:8px 2px;}
/* APP VIVANTE : fil d'activite (accueil) */
.dash-activity{display:flex;flex-direction:column;gap:6px;}
.act-item{display:flex;align-items:center;gap:10px;background:var(--surface);border:1px solid var(--border);border-radius:var(--r);padding:9px 11px;cursor:pointer;}
.act-item:hover{border-color:var(--flag);}
.act-dot{width:9px;height:9px;border-radius:50%;flex-shrink:0;background:var(--muted);}
.act-dot.act-clip{background:var(--flag);}
.act-dot.act-comment{background:var(--blue,#2c6fff);}
.act-dot.act-session{background:var(--green,#2f9e44);}
.act-c{flex:1;min-width:0;display:flex;align-items:baseline;gap:8px;justify-content:space-between;}
.act-c b{font-size:13px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.act-when{font-size:11.5px;color:var(--muted);flex-shrink:0;}
.dash-help{margin-top:8px;}
.dash-help-btn{background:none;border:1px solid var(--border);color:var(--muted);border-radius:var(--r);padding:9px 14px;font:inherit;font-size:13px;font-weight:600;cursor:pointer;width:100%;}

/* Video Room LIVE : pastille « Nouveaux clips » (non disruptive) quand de nouveaux clips arrivent. */
.live-refresh-pill{position:fixed;top:64px;left:50%;transform:translateX(-50%);z-index:70;background:var(--flag);color:#fff;border:none;border-radius:var(--r-pill);padding:9px 18px;font:inherit;font-size:13px;font-weight:800;cursor:pointer;box-shadow:var(--shadow-lg);animation:liveRefreshIn .2s ease;}
.live-refresh-pill:hover{filter:brightness(.96);}
.live-refresh-pill:disabled{opacity:.7;cursor:default;}
@keyframes liveRefreshIn{from{opacity:0;transform:translate(-50%,-8px);}to{opacity:1;transform:translate(-50%,0);}}
@media(min-width:900px){ .live-refresh-pill{top:16px;} }
/* Suivi live des annotations : meme pastille, mais DANS la fiche clip — qui est un calque au-dessus
   (z-index 80). Sans ce rehaussement, la pastille serait dessinee derriere la fiche, donc invisible. */
.cd-anno-pill{z-index:84;top:72px;}
@media(min-width:900px){ .cd-anno-pill{top:22px;} }

/* Nav SPA (.appnav) : STYLE VISUEL unifie dans theme.css (partage avec .tcnav des pages shell).
   Ici = UNIQUEMENT la logique specifique au SPA : visibilite par body[data-screen] + toggle admin. */
.appnav{display:none;z-index:90;}   /* masquee par defaut, revelee par ecran (le reste vient de theme.css) */
/* La nav globale n'apparaît que sur les écrans "navigables" (pas en capture caméra/télécommande). */
body[data-screen="menu"] .appnav,
body[data-screen="videoroom"] .appnav,
body[data-screen="tutorial"] .appnav,
body[data-screen="profile"] .appnav,
body[data-screen="team"] .appnav{display:flex;}
@media(max-width:899px){ .appnav-viewas{display:none !important;} } /* toggle admin : sidebar desktop uniquement */
/* Écran CAMÉRA avant activation : on garde header + nav (pour pouvoir repartir sans s'engager).
   Ils disparaissent dès que la caméra est lancée (html.tc-cam-live) → mode immersif plein écran. */
html:not(.tc-cam-live) body[data-screen="camera"] .appnav,
html:not(.tc-cam-live) body[data-screen="camera"] .apptop{display:flex;}
/* L'ancienne sidebar Video Room est remplacée par la nav globale (gardée dans le DOM pour app.js). */
.vr-side{display:none !important;}
body[data-screen="videoroom"] .vr-main{padding-bottom:84px;}
@media(min-width:900px){
  /* Admin : petit toggle « voir en tant que » juste sous le lien Admin (aperçu coach/joueur). */
  .appnav-viewas{align-self:flex-start;margin:2px 0 0 12px;font:inherit;font-size:11px;font-weight:700;color:var(--muted);background:var(--surface-2);border:1px solid var(--border);border-radius:var(--r-sm);padding:4px 9px;cursor:pointer;}
  .appnav-viewas:hover{color:var(--text);}
  .appnav-viewas.active{background:var(--flag);border-color:var(--flag);color:#fff;}
  /* Décalage sidebar : géré par padding-left:212px sur le body (voir plus haut). Les écrans
     sont en flux normal maintenant, donc plus de left:212px en position absolue. */
  .mode-chooser .dash{padding-bottom:40px;}
  .mode-chooser .dash-top .tclogo{display:none;} /* logo déjà dans la sidebar */
  .mode-chooser .dash-top{justify-content:flex-end;}
  body[data-screen="videoroom"] .vr-main{padding-bottom:40px;}
}
/* Barre latérale repliable (SPA) — cf. theme.css pour l'etat html.tc-navcol + le bouton. */
@media(min-width:900px){
  /* Repli sidebar (64px) : le style vient de theme.css (partage tcnav/appnav) ; ici juste le
     decalage du contenu par ecran (le SPA n'a pas .has-tcnav). */
  html.tc-navcol body[data-screen="menu"],
  html.tc-navcol body[data-screen="videoroom"],
  html.tc-navcol body[data-screen="tutorial"],
  html.tc-navcol body[data-screen="profile"],
  html.tc-navcol body[data-screen="team"],
  html.tc-navcol body[data-screen="remote"]{padding-left:64px;}
}

/* ---- Header haut app.html : .dash-top (accueil mobile) + .apptop (Video Room mobile) + cloche sidebar (desktop) ---- */
/* Header en flux (sticky), comme .tctop des pages shell : il prend sa place dans le
   document et DESCEND avec le pull-to-refresh / l'overscroll (web ET PWA), au lieu de
   rester collé comme un position:fixed. Le contenu n'a donc plus besoin de réserver de
   place dessous (on retire les padding-top de compensation plus bas). */
/* Header SPA (.apptop) : visuel unifie dans theme.css ; ici juste la visibilite par ecran.
   La cloche .appnav-bell (sidebar) est dans .appnav-top, masquee en mobile avec elle (theme.css). */
.apptop{display:none;z-index:80;}   /* masque par defaut, revele par ecran */
/* Header (sticky) visible sur les écrans scrollables. Plus de padding-top de
   compensation sur le contenu : le header étant en flux, il prend déjà sa place. */
body[data-screen="menu"] .apptop,
body[data-screen="videoroom"] .apptop,
body[data-screen="tutorial"] .apptop,
body[data-screen="profile"] .apptop,
body[data-screen="team"] .apptop{display:flex;}
/* Écran de page injectée (Profil/Équipe) : conteneur scrollable comme les autres
   écrans navigables. Réserve mobile pour la nav du bas FIXE (sur desktop = sidebar). */
#shellPageScreen{min-height:60vh;}
/* Profil / Équipe chargés DANS le SPA : landing.css cape .wrap à 1080px (bave) et l'override
   body.has-tcnav ne s'applique pas ici (le SPA n'a pas has-tcnav) → pleine largeur forcée. */
#shellPageScreen .wrap{max-width:none;}
.shellpage-loading{padding:60px 16px;text-align:center;color:var(--muted);}
@media(max-width:899px){
  body[data-screen="profile"] #shellPageScreen,
  body[data-screen="team"] #shellPageScreen{padding-bottom:calc(env(safe-area-inset-bottom,0px) + 84px);}
}
@media(min-width:900px){
  .apptop{display:none !important;}
  body[data-screen="menu"] .mode-chooser{padding-top:0;} /* desktop : pas d'apptop → pas de réserve */
  body[data-screen="videoroom"] .vr-main{padding-top:24px;}
}
/* TÉLÉPHONE COUCHÉ : le header du haut disparaît aussi (logo et cloche ont rejoint la bande de gauche,
   cf. theme.css) — 50 px de hauteur rendus. Bloc placé APRÈS la visibilité par écran ci-dessus, qui est
   plus spécifique que le `.apptop{display:none}` de base. */
@media (orientation:landscape) and (max-height:560px){
  body[data-screen="menu"] .apptop,
  body[data-screen="videoroom"] .apptop,
  body[data-screen="tutorial"] .apptop,
  body[data-screen="profile"] .apptop,
  body[data-screen="team"] .apptop{display:none;}
  body[data-screen="videoroom"] .vr-main{padding-top:12px;}
  body[data-screen="profile"] #shellPageScreen,
  body[data-screen="team"] #shellPageScreen{padding-bottom:16px;}
}

/* ============================================================
   COMMENTAIRES multi-coachs (fiche clip, toujours visibles)
   ============================================================ */
.cd-comments{display:flex;flex-direction:column;gap:12px;}
.cd-comment-empty{font-size:13px;color:var(--muted);padding:4px 0;}
.cd-comment{display:flex;gap:10px;}
.cd-comment-av{width:30px;height:30px;border-radius:50%;flex-shrink:0;background:linear-gradient(135deg,#ff7a45,var(--flag));color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:13px;}
.cd-comment-main{flex:1;min-width:0;}
.cd-comment-head{display:flex;align-items:center;gap:7px;flex-wrap:wrap;font-size:12px;}
.cd-comment-head b{font-size:13px;}
.cd-you{background:var(--soft);color:var(--flag);border-radius:var(--r-sm);padding:1px 6px;font-size:10px;font-weight:800;}
.cd-role{background:var(--surface-2);color:var(--muted);border-radius:var(--r-sm);padding:1px 6px;font-size:10px;font-weight:700;}
.cd-comment-date{color:var(--muted);margin-left:2px;}
/* Actions du commentaire (POUCE, Modifier, Supprimer) : bloc colle a droite du texte et CENTRE
   verticalement, pour que les trois soient sur la meme ligne visuelle (demande util. 2026-07-30). */
.cd-comment-acts{margin-left:auto;align-self:center;flex-shrink:0;display:flex;align-items:center;gap:4px;}
.cd-comment-edit{border:none;background:none;color:var(--muted);cursor:pointer;padding:2px 3px;display:inline-flex;align-items:center;border-radius:var(--r-sm);}
.cd-comment-edit:hover{color:var(--flag);background:var(--surface-2);}
.cd-comment-del{border:none;background:none;color:var(--muted);cursor:pointer;padding:2px 3px;display:inline-flex;align-items:center;border-radius:var(--r-sm);}
.cd-comment-del:hover{color:var(--danger);background:var(--surface-2);}
.cd-comment-edit svg,.cd-comment-del svg{width:15px;height:15px;}
.cd-comment-editbox{margin-top:6px;}
.cd-comment-editbar{display:flex;gap:8px;margin-top:6px;}
.cd-comment-editbar .btn{padding:5px 12px;font-size:12.5px;}
/* #3 Vu par : liste des membres ayant regardé le clip (vue coach) */
.cd-views{display:flex;flex-direction:column;gap:9px;}
.cd-view-row{display:flex;gap:10px;align-items:center;}
.cd-view-main{flex:1;min-width:0;}
.cd-view-who{display:flex;align-items:center;gap:7px;font-size:13px;}
.cd-view-who b{font-weight:700;}
.cd-view-meta{color:var(--muted);font-size:12px;margin-top:1px;}
.cd-comment-body{font-size:13px;line-height:1.45;margin-top:2px;white-space:pre-wrap;word-break:break-word;}
/* POUCE (accuse de lecture) : A DROITE du commentaire mais A GAUCHE de Modifier / Supprimer
   (il vit dans .cd-comment-acts, pousse a droite par le flex:1 de .cd-comment-main). Pas de
   compteur : qui a pouce se lit dans l'infobulle. Pastille discrete, tokens uniquement -> tient en
   light ET dark. La FLAMME a ete retiree (2026-07-30). */
.cd-react{flex-shrink:0;align-self:center;display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;padding:0;border:1px solid var(--line);border-radius:var(--r-pill);background:var(--surface-2);color:var(--muted);font:inherit;line-height:1;cursor:pointer;}
.cd-react svg{width:15px;height:15px;flex-shrink:0;}
.cd-react:hover{color:var(--text);border-color:var(--flag);}
.cd-react:disabled{opacity:.6;cursor:default;}
.cd-react.cd-react-ro{cursor:default;}
.cd-react.cd-react-ro:hover{color:var(--muted);border-color:var(--line);}
.cd-react.on{color:var(--green);border-color:color-mix(in srgb,var(--green) 45%,transparent);background:color-mix(in srgb,var(--green) 14%,transparent);}
.cd-comment-add{display:flex;flex-direction:column;align-items:stretch;gap:8px;margin-top:12px;}
.cd-comment-add .cd-comment-send{align-self:flex-start;}
.cd-comment-input{flex:1;width:100%;box-sizing:border-box;border:1px solid var(--line);border-radius:var(--r);padding:9px 11px;font:inherit;font-size:13px;background:var(--surface-2);color:var(--ink);resize:none;overflow:hidden;min-height:40px;}
.cd-comment-input:focus{outline:none;border-color:var(--flag);background:var(--surf);}
.cd-comment-send{white-space:nowrap;}
.cd-mention-row{display:flex;flex-wrap:wrap;align-items:flex-start;gap:6px;margin-bottom:8px;flex-basis:100%;}
.cd-mention-lbl{padding-top:9px;}
.cd-mention-lbl{font-size:11.5px;color:var(--muted);font-weight:700;}
.cd-mention-chip{border:1px solid var(--line);background:var(--surface-2);color:var(--text);border-radius:var(--r-pill);padding:3px 10px;font:inherit;font-size:12px;font-weight:700;cursor:pointer;}
.cd-mention-chip.on{background:var(--soft);border-color:var(--flag);color:var(--flag);}
.cd-mention-combo{position:relative;flex:1 1 200px;min-width:160px;}
.cd-mention-search{width:100%;border:1px solid var(--line);background:var(--surface-2);color:var(--text);border-radius:var(--r);padding:8px 12px;font:inherit;font-size:13px;}
.cd-mention-search:focus{outline:none;border-color:var(--flag);}
/* Menu en FLUX NORMAL (pas absolu) : impossible à rogner par le conteneur qui scrolle, et sa
   propre zone se scrolle (max-height). Il pousse simplement le contenu en dessous quand il s'ouvre. */
.cd-mention-menu{width:100%;margin-top:6px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);max-height:220px;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:4px;}
.cd-mention-opt{display:block;width:100%;text-align:left;border:none;background:none;font:inherit;font-size:13px;font-weight:600;color:var(--text);padding:8px 10px;border-radius:var(--r-sm);cursor:pointer;}
.cd-mention-opt:hover{background:var(--soft);color:var(--flag);}
/* Joueur SANS COMPTE (ligne d'effectif non rattachée) : GRISÉ mais toujours sélectionnable — il ne
   recevra aucune notification. La raison est donnée en infobulle (title) côté JS. Chips + options. */
.cd-mention-opt.cd-noacct,.cd-mention-opt.cd-noacct:hover{color:var(--muted);}
.editable-chip.cd-noacct,.cd-root .editable-chip.cd-noacct{color:var(--muted);border-style:dashed;}
/* Pastilles sélectionnées (joueurs impliqués / demander revu) : chips avec croix, TOUJOURS
   au-dessus de l'encart de recherche (flex-basis:100% force le champ à passer dessous). */
.cd-pick-chips{display:flex;flex-wrap:wrap;gap:6px;flex-basis:100%;width:100%;}
.cd-pick-chips:empty{display:none;}
.cd-root .cd-ro{color:var(--muted);font-size:13px;}

/* ============================================================
   VIDEO ROOM — barre de filtres + tableau de sessions (DA)
   ============================================================ */
.vr-topbar-row{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;}
.vr-newbtn{display:inline-flex;align-items:center;gap:7px;background:var(--flag);color:#fff;border:none;border-radius:var(--r);padding:9px 14px;font:inherit;font-weight:700;font-size:13px;cursor:pointer;}
.vr-newbtn [data-icon]{width:18px;height:18px;}
/* Video Room : titre + bouton « Séance de visionnage » (coach) sur une ligne. */
.vr-topbar-row{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;flex-wrap:wrap;}
.vr-topbar-actions{display:flex;align-items:center;gap:8px;margin-left:auto;flex-wrap:wrap;justify-content:flex-end;}
/* Barre de la page session = même look que l'accueil (.vr-filterbar réutilisée). */
.vr-sess-filterbar{margin:0 0 12px;}
.vr-meet-btn{display:inline-flex;align-items:center;gap:7px;background:var(--flag);color:#fff;border:none;border-radius:var(--r);padding:9px 14px;font:inherit;font-size:13px;font-weight:700;cursor:pointer;}
.vr-meet-btn:hover{filter:brightness(1.05);}
.vr-meet-btn .ic-inline{width:16px;height:16px;}
/* Fenêtre du lien de visio. */
.vs-overlay{position:fixed;inset:0;z-index:10002;background:rgba(0,0,0,.6);display:flex;align-items:center;justify-content:center;padding:16px;}
.vs-box{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);max-width:460px;width:100%;padding:22px;box-shadow:var(--shadow-lg);}
.vs-box h3{font-size:18px;margin:0 0 6px;}
.vs-box p{font-size:14px;color:var(--muted);line-height:1.5;margin:0 0 14px;}
.vs-link{display:flex;gap:8px;margin-bottom:14px;}
.vs-link input{flex:1;min-width:0;border:1px solid var(--border);border-radius:var(--r);padding:9px 11px;font:inherit;font-size:13px;background:var(--surface-2);color:var(--text);}
.vs-actions{display:flex;gap:8px;flex-wrap:wrap;}
.vs-actions .btn{flex:1;}
/* Organisateur de séances de visionnage (form + liste). */
.vs-box-lg{max-width:560px;max-height:86vh;overflow:auto;}
.vs-form{background:var(--surface-2);border:1px solid var(--border);border-radius:var(--r);padding:12px;margin-bottom:14px;}
.vs-form>input{width:100%;box-sizing:border-box;border:1px solid var(--border);border-radius:var(--r);padding:9px 11px;font:inherit;font-size:14px;background:var(--surface);color:var(--text);margin-bottom:8px;}
.vs-form-row{display:flex;gap:8px;flex-wrap:wrap;}
.vs-form-row input{flex:1;min-width:120px;border:1px solid var(--border);border-radius:var(--r);padding:9px 11px;font:inherit;font-size:14px;background:var(--surface);color:var(--text);}
.vs-form-row .btn{flex:0 0 auto;}
.vs-list{display:flex;flex-direction:column;gap:8px;}
.vs-empty{font-size:13px;color:var(--muted);text-align:center;padding:14px;}
.vs-item{border:1px solid var(--border);border-radius:var(--r);padding:11px 12px;background:var(--surface-2);}
.vs-item.past{opacity:.6;}
.vs-item-info{display:flex;flex-direction:column;gap:2px;margin-bottom:8px;}
.vs-item-info b{font-size:15px;}
.vs-item-info span{font-size:12px;color:var(--muted);text-transform:capitalize;}
.vs-item-acts{display:flex;gap:6px;flex-wrap:wrap;}
.vsi-btn{border:1px solid var(--border);border-radius:var(--r-sm);padding:6px 10px;font:inherit;font-size:12px;font-weight:600;background:var(--surface);color:var(--text);cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;transition:background .12s,transform .06s,box-shadow .12s;}
.vsi-btn:hover{background:var(--soft);}
.vsi-btn:active{transform:scale(.94);box-shadow:inset 0 2px 6px rgba(0,0,0,.18);}
.vsi-btn.primary{background:var(--flag);border-color:var(--flag);color:#fff;}
.vsi-btn.primary:hover{filter:brightness(1.05);}
.vsi-btn.danger{color:var(--danger);border-color:var(--danger);}
.vsi-btn.danger:hover{background:color-mix(in srgb,var(--danger) 12%,transparent);}
/* Édition inline d'une séance (sur la ligne même). */
.vs-item.editing{display:flex;flex-direction:column;gap:8px;border-color:var(--flag);}
.vs-item.editing input{width:100%;box-sizing:border-box;border:1px solid var(--border);border-radius:var(--r-sm);padding:8px 10px;font:inherit;font-size:14px;background:var(--surface);color:var(--text);}
.vs-item.editing .vs-form-row input{width:auto;}
/* Retour visuel d'appui sur les boutons du formulaire de création. */
.vs-form .btn:active{transform:scale(.96);}
/* Tout sur UNE ligne (recherche + trier + filtres + favoris + mes clips + dossiers) ; scroll-x si trop étroit. */
.vr-filterbar{display:flex;align-items:center;gap:7px;margin:16px 0;flex-wrap:nowrap;overflow-x:auto;padding-bottom:2px;-webkit-overflow-scrolling:touch;scrollbar-width:none;}
.vr-filterbar::-webkit-scrollbar{display:none;}
.vr-filterbar > *{flex:0 0 auto;}
.vr-search{flex:1 1 90px;min-width:90px;display:flex;align-items:center;gap:8px;background:var(--surface);border:1px solid var(--border);border-radius:var(--r);padding:9px 12px;color:var(--muted);}
.vr-present-toggle{white-space:nowrap;}
.vr-search [data-icon]{width:18px;height:18px;flex-shrink:0;}
.vr-search input{flex:1;border:none;background:none;color:var(--text);font:inherit;font-size:14px;outline:none;}
.vr-search input::placeholder{color:var(--muted);}
/* Mobile : PAS de scroll horizontal illisible → la recherche prend toute la ligne, les boutons passent dessous (wrap). */
@media(max-width:640px){
  .vr-filterbar{flex-wrap:wrap;overflow-x:visible;gap:8px;}
  .vr-filterbar .vr-search{flex:1 1 100%;min-width:0;}
  .vr-filterbar .vr-sort{order:1;}
  .vr-filterbar .vr-present-toggle{order:2;}
  .vr-filterbar .vr-sess-toggle{order:3;margin-left:0;}
}
.vr-panel{overflow:hidden;}
/* Panneau de filtres (Video Room) */
.vr-filter-panel{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);padding:14px 16px;margin-bottom:14px;display:flex;flex-direction:column;gap:14px;}
/* Panneau Dossiers inline (déplié sous la barre, comme Filtres) */
.vr-folders-panel{gap:12px;}
/* Encart Dossiers COMPACT (chips, comme les tags) — crayon DANS le chip. */
.vr-folders-list{display:flex;flex-wrap:wrap;gap:8px;}
.vr-folder-row{display:inline-flex;align-items:center;}
.vr-folder-chip{display:inline-flex;align-items:stretch;border:1px solid var(--line);background:var(--surface);color:var(--text);border-radius:var(--r-pill);overflow:hidden;font-size:12.5px;font-weight:700;}
.vr-folder-chip.active{background:var(--flag);border-color:var(--flag);color:#fff;}
.vr-folder-main{display:inline-flex;align-items:center;gap:7px;border:none;background:none;color:inherit;font:inherit;font-weight:700;padding:6px 12px;cursor:pointer;}
.vr-folder-main:hover{background:var(--soft);}
.vr-folder-chip.active .vr-folder-main:hover{background:transparent;}
.vr-folder-chip.active .col-scope-tag,.vr-folder-chip.active .vr-folder-main span{color:#fff;background:rgba(255,255,255,.22);}
.vr-folder-main span{color:var(--muted);font-size:11px;padding:0 5px;border-radius:var(--r-pill);}
/* Crayon « gérer ce dossier », intégré à droite dans le chip. */
.vr-folder-editbtn{flex:0 0 auto;width:32px;border:none;border-left:1px solid var(--line);background:none;color:var(--muted);cursor:pointer;display:flex;align-items:center;justify-content:center;}
.vr-folder-editbtn:hover{color:var(--flag);background:var(--soft);}
.vr-folder-editbtn.active{background:var(--flag);color:#fff;}
.vr-folder-chip.active .vr-folder-editbtn{border-left-color:rgba(255,255,255,.3);color:#fff;}
.vr-folder-chip.active .vr-folder-editbtn:hover{background:rgba(255,255,255,.15);}
/* Actions dépliées sous le dossier (renommer / portée / supprimer). */
.vr-folder-actions{display:flex;flex-wrap:wrap;gap:8px;padding:2px 2px 4px;}
/* Lien session <-> match (sous le header de session). */
.vr-sess-match{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin:0 0 12px;}
.vr-match-chip{display:inline-flex;align-items:center;gap:6px;background:var(--surface-2,var(--soft));border:1px solid var(--border);border-radius:var(--r);padding:6px 12px;font-size:13px;color:var(--text);}
.vr-match-chip [data-icon]{width:16px;height:16px;}
.vr-match-unlink{border:1px solid var(--border);background:var(--surface);color:var(--muted);font:inherit;font-size:12.5px;font-weight:700;border-radius:var(--r-sm);padding:6px 11px;cursor:pointer;}
.vr-match-unlink:hover{color:var(--danger);border-color:var(--danger);}
.vr-match-linkrow{display:inline-flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:13px;}
.vr-match-select{font:inherit;font-size:13px;font-weight:600;color:var(--text);border:1px solid var(--border);border-radius:var(--r-sm);padding:6px 9px;background:var(--surface);cursor:pointer;}
.vr-folder-chip b{font-weight:700;}
.vr-folder-chip span{color:var(--muted);font-size:11px;flex-shrink:0;padding:0 5px;border-radius:var(--r-pill);}
.vr-folders-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
.vr-folders-back{border:none;background:none;color:var(--flag);font:inherit;font-weight:700;cursor:pointer;padding:0;}
.vr-folders-title{font-weight:700;color:var(--text);margin-right:auto;}
.vr-folders-tool{border:1px solid var(--border);background:var(--surface);color:var(--muted);font:inherit;font-size:12.5px;font-weight:700;border-radius:var(--r-sm);padding:6px 11px;cursor:pointer;}
.vr-folders-tool:hover{color:var(--text);}
.vr-folders-tool.danger{color:var(--danger);}
.vr-folders-panel .cb-grid{padding:0;}
/* Badge de portée d'un dossier (Équipe / Perso). */
.col-scope-tag{display:inline-block;font-size:9.5px;font-weight:800;text-transform:uppercase;letter-spacing:.03em;padding:1px 5px;border-radius:var(--r-sm);margin-right:6px;vertical-align:middle;}
.col-scope-tag.team{background:var(--soft);color:var(--muted);}
.col-scope-tag.perso{background:color-mix(in srgb, var(--flag) 16%, transparent);color:var(--flag);}
.col-scope-toggle{width:max-content;margin-bottom:8px;}
.vrf-group label{display:block;font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);margin-bottom:8px;}
/* Période + Joueur : empilés en mobile, SUR LA MÊME LIGNE dès qu'il y a la place (panneau moins haut).
   Grille + gap (pas de marges qui se cumulent) ; min-width:0 pour que les champs date puissent rétrécir. */
.vrf-row{display:grid;grid-template-columns:1fr;gap:14px;}
.vrf-row > .vrf-group{min-width:0;}
.vrf-row .vrf-player-input{max-width:none;}
@media (min-width:600px){ .vrf-row{grid-template-columns:1fr 1fr;align-items:start;} }
.vrf-dates{display:flex;align-items:center;gap:6px;flex-wrap:nowrap;}
.vrf-dates input{border:1px solid var(--border);border-radius:var(--r);padding:11px 8px;font:inherit;font-size:14px;min-height:46px;min-width:0;flex:1;background:var(--surface-2);color:var(--text);}
.vrf-dates input::-webkit-calendar-picker-indicator{cursor:pointer;opacity:.7;}
.vrf-dates button{border:1px solid var(--border);background:var(--surface-2);color:var(--muted);border-radius:var(--r-sm);width:30px;height:30px;cursor:pointer;font-size:16px;line-height:1;}
.vrf-chips,.vrf-tags{display:flex;flex-wrap:wrap;gap:6px;}
.vrf-chip{border:1px solid var(--border);background:var(--surface-2);color:var(--text);border-radius:var(--r-pill);padding:5px 12px;font-size:12.5px;font-weight:700;cursor:pointer;}
.vrf-chip.active{background:var(--flag);border-color:var(--flag);color:#fff;}
.vrf-reset{align-self:flex-start;border:none;background:none;color:var(--flag);font:inherit;font-size:12.5px;font-weight:700;text-decoration:underline;cursor:pointer;padding:2px;}
/* Barre de filtres dans le détail d'une session (numéro + tag). */
.vr-sess-filters{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;margin-bottom:14px;}
.vr-sessf-grp{display:flex;flex-wrap:wrap;align-items:center;gap:6px;}
.vr-sessf-lab{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);margin-right:2px;}
.vr-sessf-reset{align-self:center;}
.vr-table{width:100%;border-collapse:collapse;}
.vr-table th{text-align:left;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);padding:11px 14px;border-bottom:1px solid var(--border);}
.vr-table th.num{text-align:center;}
/* Les en-têtes triables (.tc-th-sort / .tc-sort-ar) sont stylés dans theme.css (chargé partout). */
.vr-trow{cursor:pointer;}
.vr-trow td{padding:10px 14px;border-bottom:1px solid var(--border);font-size:13.5px;vertical-align:middle;color:var(--text);}
.vr-trow:last-child td{border-bottom:none;}
.vr-trow:hover td{background:var(--surface-2);}
.vr-trow td.num{text-align:center;font-weight:700;}
.vr-td-sess{display:flex;align-items:center;gap:11px;}
.vr-td-sess .th{width:54px;height:34px;border-radius:var(--r-sm);object-fit:cover;background:#000;flex-shrink:0;}
.vr-td-sess .nm{font-weight:700;}
.vr-muted{color:var(--muted);}
.vr-tag{display:inline-block;font-size:11px;font-weight:700;background:var(--surface-2);border:1px solid var(--border);color:var(--text);border-radius:var(--r-sm);padding:2px 8px;margin-right:5px;}
.vr-tag.st{background:var(--soft);border-color:var(--soft);color:var(--flag);}
.vr-fav{color:var(--flag);}
/* Date et durée : contenu COURT et de longueur fixe -> jamais sur deux lignes. Entre 760px (où la colonne
   Date disparaît) et ~900px de large, la colonne « Joueurs présents » écrasait la date à ~83px et
   « 29 juil. 2026 » passait à la ligne. C'est la colonne joueurs, elle, qui doit céder la place. */
.vr-table .vr-col-date,.vr-table .vr-col-dur{white-space:nowrap;}
/* Joueurs présents (liste sessions + liste clips) */
.vr-col-players{max-width:340px;}
.vr-player{display:inline-block;font-size:11.5px;font-weight:700;background:var(--surface-2);border:1px solid var(--border);color:var(--text);border-radius:var(--r-sm);padding:2px 8px;margin:2px 5px 2px 0;}
.vr-player.me{background:var(--flag);border-color:var(--flag);color:#fff;}
/* Liste "joueurs présents" séparée par virgules (page d'accueil Video Room) */
.vr-present-name{font-weight:600;}
.vr-more{display:inline-block;font-size:11px;font-weight:800;background:var(--surface-2);border:1px solid var(--border);color:var(--muted);border-radius:var(--r-sm);padding:1px 7px;margin-left:2px;white-space:nowrap;}
/* Mobile : table sessions Video Room = seulement Session + Clips (on masque Date/Durée/Joueurs). */
@media(max-width:640px){ .vr-sesstable .vr-col-date,.vr-sesstable .vr-col-dur,.vr-sesstable .vr-col-players{display:none;} }
/* Mobile : on GARDE les colonnes de la liste de clips, mais on les CONTRAINT pour qu'elles ne cassent
   pas dès qu'il y a plusieurs tags/joueurs : largeurs fixes, 1 seule ligne, pastille tronquée + « +N ». */
@media(max-width:640px){
  .vr-cliptable{table-layout:fixed;width:100%;}
  .vr-cliptable .vr-col-tags{width:32%;}
  .vr-cliptable .vr-col-players{width:30%;}
  .vr-cliptable th,.vr-cliptable td{overflow:hidden;}
  .vr-cliptable .vr-col-tags,.vr-cliptable .vr-col-players{white-space:nowrap;}
  /* La pastille se tronque avec « … » pour laisser la place au « +N » (jamais coupé). */
  .vr-cliptable .vr-col-tags .vr-tag,.vr-cliptable .vr-col-players .vr-player{max-width:calc(100% - 34px);overflow:hidden;text-overflow:ellipsis;vertical-align:middle;}
  .vr-cliptable .vr-col-tags .vr-more,.vr-cliptable .vr-col-players .vr-more{vertical-align:middle;}
  .vr-cliptable .vr-col-dur{display:none;}
}
.vr-present-name.me{color:var(--flag);font-weight:800;}
/* Toggle "Où j'étais présent" */
.vr-present-toggle{border:1px solid var(--border);background:var(--surface);color:var(--muted);font:inherit;font-size:12.5px;font-weight:700;border-radius:var(--r);padding:8px 11px;cursor:pointer;}
.vr-present-toggle:hover{color:var(--text);}
.vr-present-toggle.active{background:var(--flag);border-color:var(--flag);color:#fff;}
.vr-sess-toggle{flex-shrink:0;}
/* Liste/Calendrier posé à droite dans la barre de filtres. */
.vr-filterbar .vr-sess-toggle{margin-left:6px;}
.vr-table-foot{padding:12px 14px;font-size:12px;color:var(--muted);}
/* En-tête de la vue « clips d'un dossier » : compteur + bascule de tri. */
.vr-fc-head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 12px;}
.vr-fc-count{font-size:12px;font-weight:700;color:var(--muted);}
.vr-fc-sort{border:1px solid var(--line);background:var(--surface);color:var(--text);border-radius:var(--r-sm);padding:6px 11px;font:inherit;font-size:12px;font-weight:700;cursor:pointer;}
.vr-fc-sort:hover{background:var(--soft);}
/* Filtres DANS un dossier (statut/tags + joueur) — même esprit que les filtres de session. */
.vr-fc-filters{display:flex;flex-wrap:wrap;gap:8px;align-items:center;padding:10px 12px 4px;}
.vrf-tagchip{border:1px solid var(--line);background:var(--surface);color:var(--text);border-radius:var(--r-pill);padding:6px 12px;font:inherit;font-size:12.5px;font-weight:700;cursor:pointer;}
.vrf-tagchip:hover{background:var(--soft);}
.vrf-tagchip.on{background:var(--flag);border-color:var(--flag);color:#fff;}
.vrf-player{border:1px solid var(--line);border-radius:var(--r-sm);padding:7px 11px;font:inherit;font-size:13px;background:var(--surface);color:var(--text);min-width:180px;}
.vrf-reset{border:none;background:none;color:var(--flag);font:inherit;font-size:12.5px;font-weight:700;cursor:pointer;padding:6px 4px;}
/* Barre flottante « enregistrement d'écran en cours ». */
.tc-recbar{position:fixed;bottom:18px;left:50%;transform:translateX(-50%);z-index:10050;display:flex;align-items:center;gap:10px;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-pill);padding:8px 10px 8px 14px;box-shadow:var(--shadow-lg);}
.tc-recdot{width:11px;height:11px;border-radius:50%;background:var(--danger);animation:tc-recpulse 1.1s ease-in-out infinite;}
.tc-rectime{font-weight:800;font-size:14px;font-variant-numeric:tabular-nums;color:var(--text);min-width:38px;text-align:center;}
.tc-recstop{border:none;border-radius:var(--r-pill);background:var(--danger);color:#fff;font:inherit;font-weight:700;font-size:13px;padding:7px 16px;cursor:pointer;}
@keyframes tc-recpulse{0%,100%{opacity:1;}50%{opacity:.35;}}
@media(prefers-reduced-motion:reduce){.tc-recdot{animation:none;}}
/* Halo qui suit la souris pendant l'enregistrement (rend le curseur plus repérable dans la vidéo). */
.tc-cursorhalo{position:fixed;width:26px;height:26px;border:3px solid var(--flag,var(--flag));border-radius:50%;transform:translate(-50%,-50%);pointer-events:none;z-index:10048;box-shadow:0 0 0 1.5px rgba(0,0,0,.35);opacity:.85;}
/* Watermark de marque affiché UNIQUEMENT pendant l'enregistrement d'écran (apparaît dans la vidéo). */
.tc-recwm{position:fixed;right:14px;bottom:14px;z-index:10049;pointer-events:none;font-family:"Oswald",system-ui,sans-serif;font-weight:700;font-size:18px;letter-spacing:.02em;color:#fff;opacity:.82;text-shadow:0 1px 4px rgba(0,0,0,.6);user-select:none;}
.tc-recwm span{color:var(--flag,var(--flag));}
@media(max-width:760px){
  .vr-col-dur,.vr-col-date{display:none;}
  .vr-td-sess .th{width:46px;height:30px;}
  .vr-newbtn .lab,.vr-newbtn{font-size:12px;}
  .vr-col-players{max-width:180px;}
}
/* Page session : titre + actions (Renommer/Partager) sur la même ligne. */
/* GRID : col1 = Retour (auto), col2 = contenu (1fr). Ligne 1 = titre + actions (Retour centre dessus,
   alignement PRECIS quelles que soient les hauteurs) ; ligne 2 = date ; ligne 3 = bloc match pleine largeur.
   Date + match sont en col2 -> alignes SOUS le titre. Le titre TRONQUE (…) au lieu de pousser les actions. */
.vr-sess-head{display:grid;grid-template-columns:auto 1fr;column-gap:10px;row-gap:4px;align-items:center;}
.vr-sess-head > .nav-back-btn{grid-column:1;grid-row:1;align-self:center;}
.vr-sess-titlerow{grid-column:2;grid-row:1;display:flex;align-items:center;gap:8px;min-width:0;}
.vr-sess-titlerow h1{margin:0;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.vr-sess-titlerow > .vr-side-btn,.vr-sess-titlerow > .vr-sess-stats{flex-shrink:0;}
.vr-sess-metarow{grid-column:2;grid-row:2;display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
.vr-sess-metarow .vr-sub{margin:0;}
.vr-sess-match{grid-column:1 / -1;grid-row:3;width:100%;}
.vr-sess-actions{padding:0;}
/* Filtre joueur en saisie (Video Room). */
.vrf-player-input{width:100%;max-width:280px;border:1px solid var(--border);border-radius:var(--r);padding:9px 12px;font:inherit;font-size:14px;background:var(--surface-2);color:var(--text);}
.vrf-player-input:focus{outline:none;border-color:var(--flag);}
.vrf-select{width:100%;max-width:280px;border:1px solid var(--border);border-radius:var(--r);padding:9px 12px;font:inherit;font-size:14px;font-weight:600;background:var(--surface-2);color:var(--text);cursor:pointer;}
.vrf-select:focus{outline:none;border-color:var(--flag);}
/* Mode télécommande : header + nav visibles (écran navigable). Bouton retour absolu masqué
   (le header/nav fournissent la navigation) pour ne plus chevaucher le bouton Scanner. */
body[data-screen="remote"] .apptop,
body[data-screen="remote"] .appnav{display:flex;}
/* Bouton retour de la télécommande RETIRÉ (la croix ✕ de la barre du haut gère la sortie ; il passait derrière le header). */
.remote-ui .nav-back-btn{display:none !important;}
/* PAS de compensation du header : .apptop est STICKY (en flux), il prend déjà sa place au-dessus.
   Un padding-top de 74px ici = DOUBLE marge (bug « marge énorme en haut »). Juste un petit espace. */
body[data-screen="remote"] .remote-ui{padding-top:12px;padding-bottom:calc(env(safe-area-inset-bottom,0px) + 100px);}
@media(min-width:900px){ body[data-screen="remote"]{padding-left:212px;} body[data-screen="remote"] .remote-ui{padding-top:24px;} }
/* Entête session : Retour + titre + Renommer/Partager sur une ligne ; la DATE (méta) passe en dessous. */
/* (Titre margin-right:auto + meta sous le bandeau : remplaces par .vr-sess-titlecol / .vr-sess-metarow.) */
/* Mobile : boutons du bandeau en ICÔNE seule (on masque le texte). */
@media(max-width:640px){ .vr-sess-head .vr-side-btn .btn-label{display:none;} }
/* « Relier à un match » = SELECT natif (sa flèche native, UN seul menu, pas de double fenêtre).
   « Statistiques » = bouton déroulant avec une flèche ▼ propre (triangle style select). */
.vr-sess-head .vr-sess-match,.vr-sess-head .vr-sess-stats{margin:0;display:inline-block;}
.vr-matchcombo-input,.vr-sess-matchchip{font:inherit;font-size:12.5px;font-weight:700;color:var(--vrmuted,var(--muted));background:var(--vrsurf2,var(--surface-2));border:1px solid var(--vrline,var(--border));border-radius:var(--r);padding:8px 10px;}
.vr-matchcombo{position:relative;display:inline-block;}
.vr-matchcombo-input{width:200px;max-width:230px;min-height:0;cursor:text;}
.vr-matchcombo-input:focus{outline:none;border-color:var(--flag);color:var(--text);}
.vr-matchcombo-input::placeholder{color:var(--vrmuted,var(--muted));opacity:1;font-weight:700;}
.vr-matchcombo-menu{position:absolute;top:calc(100% + 6px);right:0;z-index:30;min-width:240px;max-width:min(92vw,320px);background:var(--surface);border:1px solid var(--border);border-radius:var(--r);box-shadow:var(--shadow-lg);max-height:320px;overflow-y:auto;padding:5px;}
.vr-matchcombo-opt{display:block;width:100%;text-align:left;border:none;background:none;font:inherit;font-size:13px;color:var(--text);padding:8px 10px;border-radius:var(--r-sm);cursor:pointer;}
.vr-matchcombo-opt:hover{background:var(--soft);color:var(--flag);}
.vr-matchcombo-opt.unlink{color:var(--danger);font-weight:700;}
.vr-matchcombo-empty{padding:8px 10px;color:var(--muted);font-size:13px;}
.vr-sess-matchchip{display:inline-flex;align-items:center;gap:6px;}
.vr-sess-matchchip .ic-inline{width:15px;height:15px;}
/* Suggestion « relier au match du jour » (remplace le combo permanent) : petit bandeau Oui / Non. */
.vr-sess-match:empty{display:none;}
.vr-matchsuggest{display:flex;align-items:center;gap:8px;flex-wrap:wrap;width:100%;background:var(--soft,var(--surface-2));border:1px solid var(--vrline,var(--border));border-radius:var(--r);padding:8px 12px;}
.vr-matchsuggest-txt{flex:1;min-width:130px;font-size:12.5px;font-weight:600;color:var(--vrmuted,var(--muted));}
/* Barre « deja lie » UNIQUEMENT : icone calendrier alignee au texte. La suggestion Oui/Non reste inchangee. */
.vr-matchlinked .vr-matchsuggest-txt{display:flex;align-items:center;gap:6px;}
.vr-matchlinked .vr-matchsuggest-txt .ic-inline{width:15px;height:15px;flex-shrink:0;}
.vr-matchsuggest-yes,.vr-matchsuggest-no{font:inherit;font-size:12.5px;font-weight:700;border-radius:var(--r-sm);padding:5px 11px;cursor:pointer;border:1px solid transparent;}
.vr-matchsuggest-yes{background:var(--flag);color:#fff;}
.vr-matchsuggest-yes:hover{filter:brightness(1.05);}
.vr-matchsuggest-no{background:var(--vrsurf2,var(--surface-2));border-color:var(--vrline,var(--border));color:var(--vrmuted,var(--muted));}
.vr-matchsuggest-no:hover{border-color:var(--flag);color:var(--text);}
.vr-match-unlink{font:inherit;font-size:12px;font-weight:700;background:none;border:none;color:var(--muted);text-decoration:underline;cursor:pointer;padding:2px 4px;margin-left:2px;}
.vr-match-unlink:hover{color:var(--flag);}
/* Lien discret apres un « Non » : replie la proposition mais permet de la rouvrir (pas de cul-de-sac). */
.vr-matchsuggest-reopen{font:inherit;font-size:12px;font-weight:600;background:none;border:none;color:var(--muted);text-decoration:underline;cursor:pointer;padding:2px 0;}
.vr-matchsuggest-reopen:hover{color:var(--flag);}
.vr-sess-head .vss-drawer{position:relative;background:none;border:none;padding:0;border-radius:0;}
.vr-sess-head .vss-drawer>summary{display:inline-flex;align-items:center;gap:7px;font:inherit;font-size:12.5px;font-weight:700;color:var(--vrmuted,var(--muted));background:var(--vrsurf2,var(--surface-2));border:1px solid var(--vrline,var(--border));border-radius:var(--r);padding:9px 12px;cursor:pointer;white-space:nowrap;}
.vr-sess-head .vss-drawer>summary:hover{border-color:var(--flag);color:var(--text);}
.vr-sess-head .vss-drawer>summary .ic-inline{width:16px;height:16px;display:inline-flex;flex:0 0 auto;}
.vr-sess-head .vss-drawer>summary .vss-sumlbl{text-transform:none;letter-spacing:0;}
/* Plus de flèche ▼ sur le bouton Statistiques (demande util.) : on masque le marqueur natif + custom. */
.vr-sess-head .vss-drawer>summary::after,.vr-sess-head .vss-drawer[open]>summary::after{display:none;}
/* Hover : contour orange sur Renommer / Partager (bandeau session), comme le bouton Statistiques. */
.vr-sess-head .vr-side-btn:hover{border-color:var(--flag);color:var(--text);}
.vr-sess-head .vss-drawer[open]>.vss-drawer-body{position:absolute;top:calc(100% + 6px);right:0;z-index:30;min-width:300px;max-width:min(92vw,360px);background:var(--surface);border:1px solid var(--border);border-radius:var(--r);padding:14px;box-shadow:var(--shadow-lg);}
@media(max-width:640px){ .vr-sess-head .vss-drawer>summary .vss-sumlbl{display:none;} }
/* Boutons du bandeau fiche clip (Partager / Supprimer) : même style que la vue Session
   (.vr-side-btn), mais avec les tokens de base car les --vr* sont scopés à .vr2. */
.cd-topactions{display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:flex-end;}
.cd-headbtn{width:auto;margin:0;display:inline-flex;align-items:center;gap:6px;color:var(--muted);background:var(--surface-2);border-color:var(--border);}
.cd-headbtn:hover{border-color:var(--flag);color:var(--text);}
/* Supprimer : icône poubelle seule (carré), à côté du favori. */
.cd-iconbtn{width:40px;height:40px;display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--border);background:var(--surface-2);color:var(--muted);border-radius:var(--r);cursor:pointer;padding:0;flex-shrink:0;}
.cd-iconbtn svg{width:20px;height:20px;}
.cd-del:hover{color:var(--danger);border-color:var(--danger);}
.cd-share:hover,.cd-dlhead:hover{color:var(--flag);border-color:var(--flag);}
.cd-dlhead{text-decoration:none;}

/* MULTI-CAM : modale « rejoindre une session » (overlay leger, tokens du theme). */
.tc-modal-ov{position:fixed;inset:0;z-index:9999;background:rgba(0,0,0,.55);display:flex;align-items:center;justify-content:center;padding:24px;}
.tc-modal-card{position:relative;background:var(--surface);color:var(--text);border:1px solid var(--border);border-radius:var(--r-lg);padding:22px;max-width:360px;width:100%;box-shadow:var(--shadow-lg);}
/* Modale à CONTENU (liste, tableau) : 360 px est calibré pour un choix court, pas pour une liste d'items. */
.tc-modal-card.tc-modal-wide{max-width:560px;}
.tc-modal-title{margin:0 0 8px;padding-right:28px;}
.tc-modal-close{position:absolute;top:10px;right:10px;width:32px;height:32px;line-height:1;font-size:22px;background:none;border:0;color:var(--muted);cursor:pointer;border-radius:var(--r-sm);}
.tc-modal-close:hover{background:var(--surface-2);color:var(--text);}
.tc-modal-sub{margin:0 0 18px;color:var(--muted);font-size:14px;line-height:1.45;}
/* Consigne de placement PANORAMA (dans le popup de mode, plus en toast par-dessus le bouton Activer).
   Le côté est IMPOSÉ (1er tél = gauche, 2e = droite). UN SEUL style pour les deux phrases (demande util.) :
   même taille, même couleur ; seuls les mots-clés (GAUCHE / PAS EN SILENCIEUX) ressortent. */
.tc-pano-place{margin:0 0 12px;font-size:15px;line-height:1.5;}
/* Mots-clés (GAUCHE / PAS EN SILENCIEUX) : gras + orange, à la MÊME taille que le texte. Pas de police
   de titre ni de corps agrandi (demande util. : « la c'est abusé »). */
.tc-pano-place b{font-weight:800;color:var(--flag);}
.tc-pano-place:last-of-type{margin-bottom:18px;}
/* Corbeille 7 jours (modale Video Room) : liste des clips supprimés + Restaurer. */
/* Titre, bouton « Vider » et croix sur UNE SEULE ligne. On descend la CROIX au niveau du bouton
   (plutot que de remonter l'entete par une marge negative de compensation) : la carte a 22 px de
   padding, le bouton « sm » 30 px de haut, la croix 32 px -> top = 22 + (30-32)/2 = 21 px. Regle
   SCOPEE a la corbeille : les autres modales gardent leur croix en coin. Le glyphe « x » n'est pas
   centre dans sa boite par defaut (line-height) -> flex, sinon il flotte visiblement plus haut. */
.tc-trash-head{display:flex;align-items:center;justify-content:space-between;gap:10px;
               min-height:30px;margin:0 0 10px;padding-right:40px;}
.tc-modal-card.tc-trash-modal .tc-modal-close{top:22px;right:18px;width:29px;height:29px;
   display:flex;align-items:center;justify-content:center;font-size:24px;}
.tc-trash-note{margin:0 0 12px;font-size:13.5px;color:var(--muted);}
/* CORBEILLE — mise en page revue (30.07) : les boutons (« Supprimer définitivement » est long) mangeaient
   toute la largeur et écrasaient le texte en une colonne d'un mot par ligne. Mobile-first : vignette + infos
   sur une ligne, ACTIONS sur leur propre ligne pleine largeur ; à partir de 560 px tout revient sur une ligne. */
.tc-trash-del{flex:0 0 auto;width:29px;height:29px;display:flex;align-items:center;
              justify-content:center;background:none;border:0;border-radius:var(--r-sm);color:var(--muted);cursor:pointer;padding:0;}
.tc-trash-del:hover{color:var(--danger);background:var(--surface);}
.tc-trash-del:disabled{opacity:.5;cursor:default;}
.tc-trash-list{max-height:52vh;overflow-y:auto;display:flex;flex-direction:column;gap:8px;padding-right:4px;}
.tc-trash-empty{margin:8px 0;color:var(--muted);font-size:14px;text-align:center;}
/* Une ligne = vignette + texte (titre, puis « supprime par » DESSOUS) + la barre d'actions a droite :
   Voir, Restaurer, puis la poubelle (suppression DEFINITIVE, plus petite et sans cadre pour ne pas se
   cliquer par reflexe). La poubelle est DANS LE FLUX : c'est ce qui la met a la meme hauteur que les
   boutons, et ce qui permet a l'apercu video de s'arreter exactement a son bord droit. */
.tc-trash-row{display:flex;align-items:center;flex-wrap:wrap;gap:8px 10px;padding:8px;border:1px solid var(--border);border-radius:var(--r);background:var(--surface-2);}
.tc-trash-thumb{flex:0 0 56px;width:56px;height:38px;border-radius:var(--r-sm);background:var(--soft) center/cover no-repeat;}
.tc-trash-info{flex:1 1 120px;min-width:0;line-height:1.35;}
/* Ligne 1 : quand c'est filme, puis duree et angle A SA DROITE, meme taille (c'est la meme info,
   « ce clip-la »). Ligne 2 : ce qu'il devient dans la corbeille. */
.tc-trash-l1{display:flex;align-items:baseline;flex-wrap:wrap;gap:2px 8px;}
.tc-trash-info b{font-size:13.5px;}
.tc-trash-meta{font-size:13.5px;font-weight:400;color:var(--muted);}
.tc-trash-info > span{display:block;font-size:12px;color:var(--muted);}
.tc-trash-acts{flex:0 0 auto;display:flex;flex-direction:row;gap:6px;}
/* Apercu avant suppression definitive : le lecteur s'ouvre SOUS les boutons, sur toute la largeur. */
.tc-trash-preview{flex:1 1 100%;}
.tc-trash-preview:empty{display:none;}
.tc-trash-preview video{width:100%;max-height:46vh;display:block;border-radius:var(--r-sm);background:#000;}
.tc-trash-acts .btn{flex:0 0 auto;white-space:nowrap;padding-left:12px;padding-right:12px;}
/* Sur telephone la place manque pour tout aligner : les deux actions repassent sous le texte. */
@media (max-width:479px){
  .tc-trash-acts{flex:1 1 100%;}
  .tc-trash-acts .btn{flex:1 1 auto;}
}
.tc-modal-actions{display:flex;flex-direction:column;gap:10px;}
.tc-modal-actions .btn{width:100%;}

/* Point « session en cours » (rond orange + popup) : CSS + logique dans le module PARTAGE js/session-dot.js
   (auto-injecte), pour etre identique dans le SPA et sur les pages hors-SPA. Ne pas redefinir ici. */

/* MULTI-CAM : barre de selection d'angle (POV1/POV2...) au-dessus du lecteur de clip. */
.cd-povbar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:0 0 10px;}
.cd-povlabel{font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.03em;}
.cd-pov{border:1px solid var(--border);background:var(--surface-2,var(--surface));color:var(--text);border-radius:var(--r-pill);padding:6px 14px;font-size:13px;font-weight:600;cursor:pointer;}
.cd-pov.active{background:var(--flag);border-color:var(--flag);color:#fff;}
/* Barre au-dessus du lecteur PANO (pano/caméras/gauche/droite/assemblage) : boutons à 12px. */
.cd-pano-topbar .cd-pov{font-size:12px;padding:5px 12px;}
/* Barre pano REMONTEE sur la ligne du titre (demande util.) : plus de marge basse, reste compacte a cote des
   icones d'action. L'entete etant en flex-wrap, elle passe a la ligne proprement si l'espace manque (mobile). */
.cd-pano-topbar-inhead{margin:0 !important;}
.cd-pov-all{border-color:var(--flag);color:var(--flag);font-weight:800;}
.cd-pov-all:hover{background:var(--flag);color:#fff;}
/* ANGLE ANNOTE d'un panorama : les dessins poses sur un angle sont en coordonnees de CET angle, donc
   invisibles sur le panorama fusionne. On met l'angle concerne en avant (orange = var(--flag)) + le meme
   petit repere commentaire que les listes. `.active` (angle affiche) reste prioritaire : il est plus bas. */
.cd-pov.cd-pov-anno{border-color:var(--flag);color:var(--flag);}
.cd-pov.cd-pov-anno.active{background:var(--flag);border-color:var(--flag);color:#fff;}
.cd-pov.cd-pov-anno .vr-pov-badge{position:static;background:none;border:0;padding:0;color:inherit;}
/* Repere « des commentaires vivent sur les angles » pose a cote de « Voir les angles separement ».
   SPECIFICITE (piege paye) : le badge de liste `.vr-pov-badge.sm` (plus BAS dans le fichier, 2 classes) le
   peignait en var(--muted) -> ce repere sortait GRIS. On repasse donc par 3 classes pour gagner a coup sur :
   chip lisible (fond doux + contour) et texte ORANGE (--flag), comme demande. */
/* Badge « un angle porte des commentaires » à côté de « Voir les angles séparément » : ENTIÈREMENT orange
   (demande util. — la version fond doux + texte orange ne se voyait pas assez). Sélecteur à 3 classes pour
   battre `.vr-pov-badge.sm`, qui repeignait en --muted (piège de spécificité déjà payé). */
.vr-pov-badge.sm.cd-pano-anglemark{position:static;background:var(--flag);border:1px solid var(--flag);color:#fff;font-weight:700;}
.vr-pov-badge.sm.cd-pano-anglemark svg{stroke:#fff;}
/* Boutons d'entretien du panorama remontes dans le tiroir « Panorama (admin) » : une ligne, qui passe a
   la ligne sur mobile. Espacement par le layout (gap), pas de marge par bouton. */
.cd-pano-adminbtns{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 10px;}
/* PANORAMA dans la fiche clip : bouton bascule + vue pivot 3D (proposée si l'assemblage est prêt). */
.cd-pano3d-btn{margin:0 0 10px;}
.cd-pano3d-view{width:100%;}
/* Pano dans la fiche clip : format 16:9 comme les autres clips ; théâtre = plus grand.
   Bornage par la LARGEUR (jamais max-height, qui aplatirait le cadre en bandeau) — voir .pano-view. */
.cd-pano3d-view .pano-view{aspect-ratio:16/9;width:min(100%,calc(70vh * 16 / 9));max-height:none;}
.cd-root.cd-theater .cd-pano3d-view .pano-view{width:min(100%,calc(84vh * 16 / 9));max-height:none;}
/* Clip en préparation (pano) dans la barre gauche : bien repérable. */
.cd-rail-item.cd-rail-prep{outline:2px solid var(--flag);outline-offset:-2px;}
.cd-rail-prep-badge{position:absolute;top:4px;left:4px;background:var(--flag);color:#fff;font-size:9px;font-weight:800;border-radius:var(--r-sm);padding:1px 5px;z-index:2;}
/* Badge « en préparation » (assemblage panorama) posé sur la vignette. Surimpression sur image =
   couleurs fixes (même convention que .thumb-tile-badge), indépendantes du thème. */
.thumb-pano-badge{position:absolute;top:6px;left:6px;display:inline-flex;align-items:center;gap:5px;background:rgba(26,26,26,.65);color:#fff;font-size:10px;font-weight:800;border-radius:var(--r-pill);padding:3px 8px;z-index:3;pointer-events:none;}
.thumb-pano-spin{width:10px;height:10px;border:2px solid rgba(255,255,255,.35);border-top-color:#fff;border-radius:50%;animation:tcPanoSpin .8s linear infinite;}
.thumb-pano-spin-lg{width:26px;height:26px;border-width:3px;border-color:var(--flag);border-top-color:transparent;}
/* Vignette « en cours » (pano en assemblage / clip en encodage) rendue par vrThumbEl : un <div> qui ne matche
   PAS les selecteurs img/.th dimensionnant la vraie vignette -> on lui donne une taille par contexte. Defaut =
   56x36 (comme .cd-rail-item img, le rail de la fiche) ; dans la carte, il remplit le cadre 16/10. */
.tc-thumb-loading{display:flex;align-items:center;justify-content:center;width:56px;height:36px;border-radius:var(--r-sm);background:#000;flex-shrink:0;}
.vr-clip .pw .tc-thumb-loading{position:absolute;inset:0;width:auto;height:auto;border-radius:0;}
/* ACCUEIL : meme vignette « en cours » que partout ailleurs, dimensionnee au cadre de .dr-th (64x42).
   Sert aux panoramas encore en assemblage listes sur le tableau de bord. */
.dr-th .tc-thumb-loading{width:100%;height:100%;border-radius:0;}
/* FICHE CLIP : attente TRES courte pendant le chargement des annotations du clip (clip-annotations.php),
   avant la construction du lecteur. Meme encombrement que la video -> pas de saut de mise en page. */
.cd-anno-wait{aspect-ratio:16/9;display:flex;align-items:center;justify-content:center;background:var(--surface);border:1px solid var(--border);border-radius:var(--r);color:var(--muted);font-weight:600;font-size:13px;}
/* Loader inline du feedback de capture (telecommande) : anneau orange NET, calibre pour du texte. */
.rc-fb-spin{display:inline-block;width:14px;height:14px;border:2px solid var(--flag);border-top-color:transparent;border-radius:50%;animation:tcPanoSpin .7s linear infinite;vertical-align:-2px;margin-right:8px;}
/* Fiche pano : loading plein cadre + vues brutes (2 angles) */
.cd-pano-loading{aspect-ratio:16/9;display:flex;flex-direction:column;gap:12px;align-items:center;justify-content:center;background:var(--surface);border-radius:var(--r);color:var(--muted);font-weight:600;}
/* Vidéo brute d'un pano = bascule POV (Caméra gauche/droite), UNE vidéo à la fois → colonne.
   Le lecteur est le lecteur d'annotation COMPLET (un angle est un vrai clip, annotable par un coach) :
   sa barre de filtres et sa boîte à outils restent visibles, comme sur n'importe quel clip. Le masquage
   en plein écran reste assuré par `.anno-wrap.tc-fs .anno-filters` (plus bas), pas ici. */
.cd-pano-raw{display:flex;flex-direction:column;gap:8px;}
.cd-pano-raw-vid{width:100%;border-radius:var(--r);background:#000;}
@keyframes tcPanoSpin{to{transform:rotate(360deg);}}
.rc-head{position:relative;}

/* MULTI-CAM : visualiseur synchronisé de tous les angles (grille ; 2 cam = panorama). */
.mcv-ov{position:fixed;inset:0;z-index:10000;background:#000;display:flex;flex-direction:column;}
.mcv-title{color:#fff;font-weight:700;font-size:14px;text-align:center;padding:12px 48px;flex-shrink:0;}
.mcv-close{position:absolute;top:8px;right:10px;z-index:2;width:40px;height:40px;border:none;background:rgba(255,255,255,.12);color:#fff;font-size:24px;line-height:1;border-radius:50%;cursor:pointer;}
.mcv-grid{flex:1;min-height:0;display:grid;grid-template-columns:repeat(var(--mcv-cols,2),1fr);grid-auto-rows:1fr;gap:6px;padding:0 6px;}
.mcv-grid.mcv-pano{gap:0;padding:0;}
.mcv-cell{position:relative;min-height:0;background:#000;display:flex;align-items:center;justify-content:center;overflow:hidden;}
.mcv-cell video{width:100%;height:100%;object-fit:contain;display:block;}
.mcv-grid.mcv-pano .mcv-cell video{object-fit:cover;} /* panorama : les 2 moitiés se touchent */
.mcv-grid.mcv-swap .mcv-cell:nth-child(1){order:2;} /* inverser gauche / droite */
.mcv-grid.mcv-swap .mcv-cell:nth-child(2){order:1;}
.mcv-tag{position:absolute;bottom:8px;left:8px;background:rgba(0,0,0,.6);color:#fff;font-size:11px;font-weight:700;border-radius:var(--r-sm);padding:2px 7px;pointer-events:none;}
.mcv-bar{flex-shrink:0;display:flex;align-items:center;gap:12px;padding:12px 16px calc(12px + env(safe-area-inset-bottom));background:#000;}
/* Stitching (test, admin) : canvas d'assemblage panorama à la place de la grille. */
.mcv-stitch{flex:1;min-height:0;width:100%;object-fit:contain;background:#000;}
.mcv-stitch-btn{flex-shrink:0;border:1px solid rgba(255,255,255,.3);background:transparent;color:#fff;font:inherit;font-size:12px;font-weight:700;padding:7px 12px;border-radius:var(--r-pill);cursor:pointer;white-space:nowrap;}
.mcv-stitch-btn.on{background:var(--flag);border-color:var(--flag);}
.mcv-stitch-ctrls{display:none;align-items:center;gap:12px;flex-wrap:wrap;}
.mcv-stitch-ctrls label{display:flex;align-items:center;gap:6px;font-size:11px;color:#fff;white-space:nowrap;}
.mcv-stitch-ctrls input[type=range]{width:88px;accent-color:var(--flag);}
.mcv-play{width:44px;height:44px;flex-shrink:0;border:none;border-radius:50%;background:var(--flag);color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;}
.mcv-seek{flex:1;accent-color:var(--flag);height:6px;cursor:pointer;}

/* ADMIN — overlay de calibration panorama (homographie + redressement barillet). */
.stcal-ov{position:fixed;inset:0;z-index:12000;background:#0b0b0b;display:flex;flex-direction:column;gap:10px;padding:12px calc(12px + env(safe-area-inset-right)) calc(12px + env(safe-area-inset-bottom)) 12px;overflow:auto;}
.stcal-head{display:flex;align-items:center;gap:12px;flex-wrap:wrap;color:#fff;}
.stcal-head b{font-size:15px;}
.stcal-hint{font-size:12px;color:rgba(255,255,255,.7);flex:1;min-width:220px;}
.stcal-x{margin-left:auto;width:36px;height:36px;flex-shrink:0;border:1px solid rgba(255,255,255,.3);background:transparent;color:#fff;font-size:22px;line-height:1;border-radius:50%;cursor:pointer;}
.stcal-panes{display:flex;gap:10px;flex-wrap:wrap;}
.stcal-pane{flex:1;min-width:280px;}
.stcal-pane-t{font-size:12px;font-weight:700;color:#fff;margin-bottom:4px;}
.stcal-pane canvas{width:100%;height:auto;background:#000;border:1px solid rgba(255,255,255,.2);cursor:crosshair;display:block;}
.stcal-ctrls{display:flex;align-items:center;gap:12px;flex-wrap:wrap;color:#fff;}
.stcal-ctrls label{display:flex;align-items:center;gap:6px;font-size:12px;white-space:nowrap;}
.stcal-ctrls input[type=range]{width:140px;accent-color:var(--flag);}
.stcal-n{font-size:12px;color:rgba(255,255,255,.8);min-width:64px;}
.stcal-result{width:100%;height:auto;background:#000;border:1px solid var(--flag);}
/* Lecteur « se balader » (pan/zoom 2D) du panorama.
   CADRE AUX PROPORTIONS D'UNE VIDEO NORMALE (16:9, demande util. 2026-07-30) : un panorama est une image
   tres large (~3:1). Affiche a son rapport reel il donne un bandeau ecrase, minuscule en hauteur, avec du
   vide au-dessus et en dessous. On garde donc un cadre 16:9 et c'est le panorama qui est NAVIGABLE DEDANS
   (glisser = tourner, c'est le principe du lecteur pivot).
   PIEGE : borner par `max-height` CASSE le rapport (la largeur reste a 100%, on retombe sur une bande des
   que l'ecran est bas — paysage mobile). On borne donc par la LARGEUR, le rapport tient toujours. */
/* Rayon = var(--r), le MEME que le lecteur de clip normal (.anno-stage) : les deux lecteurs doivent etre
   identiques (le pano etait a --r-sm = 8px contre 12px, angles visiblement moins arrondis). Le plein ecran
   (.pano-fs / :fullscreen / .tc-fs) remet 0 plus bas et garde la priorite. */
/* Pas de contour : le lecteur pano doit être identique au lecteur de clip normal (.anno-stage), qui n'en a
   pas. Le contour orange faisait ressortir les panos comme s'ils étaient d'un autre type. */
/* DECOUPAGE DES COINS — `overflow:hidden` + `border-radius` NE SUFFISENT PAS ici (31.07) : le canvas
   three.js est une couche composee par le GPU (il apparait en fondu, `transition:opacity`), et selon la
   carte graphique elle est peinte SANS l'arrondi -> coins ronds tant que le canvas n'est pas la, puis
   CARRES des qu'il apparait. Poser le decoupage sur le CANVAS ne marche pas non plus : une couche GPU se
   fait decouper par son PARENT, pas par elle-meme. `clip-path` sur .pano-view s'applique a TOUT le
   sous-arbre au moment de la composition -> le GPU ne peut plus l'ignorer. (Doit etre remis a `none` en
   plein ecran, ou le cadre repasse a angles droits — voir .pano-wrap.pano-fs plus bas.)
   FIREFOX (cause reelle, 31.07) : c'est LUI qui ne decoupe ni <video> ni <canvas> avec un arrondi —
   defaut connu de longue date. Chrome, lui, decoupe correctement : d'ou l'impossibilite de reproduire
   cote test (mes 2 navigateurs sont des Chrome). Le `mask-image` ci-dessous est LE contournement pour
   Firefox : un masque OPAQUE (les deux couleurs du degrade ont alpha 1 -> aucun changement visuel) force
   le sous-arbre a passer par une couche de masquage, sur laquelle l'arrondi EST applique. */
.pano-view{position:relative;width:min(100%,calc(68vh * 16 / 9));aspect-ratio:16/9;margin-inline:auto;background:#000;overflow:hidden;border-radius:var(--r);clip-path:inset(0 round var(--r));-webkit-mask-image:radial-gradient(#fff,#000);mask-image:radial-gradient(#fff,#000);touch-action:none;cursor:grab;user-select:none;}
.pano-view:active{cursor:grabbing;}
/* PLEIN ECRAN pano = classe CSS (marche sur iOS, contrairement a requestFullscreen sur un DIV). Le wrap remplit
   l'ecran, le ResizeObserver de .pano-view recadre le rendu three.js tout seul. */
.pano-wrap.pano-fs{position:fixed;inset:0;z-index:9999;margin:0;padding:0;background:#000;display:flex;flex-direction:column;}
.pano-wrap.pano-fs .pano-view{flex:1 1 auto;width:100%;max-height:none;aspect-ratio:auto;border:none;border-radius:0;clip-path:none;-webkit-mask-image:none;mask-image:none;}
.pano-wrap.pano-fs .anno-controls{border-radius:0;padding-bottom:calc(env(safe-area-inset-bottom,0px) + 6px);}
/* Plein ecran pano : masque la nav appli (sinon elle recouvre les controles) + croix de sortie visible. */
body.tc-pano-fs .appnav,body.tc-pano-fs .apptop{display:none !important;}
.pano-fs-close{display:none;position:absolute;top:calc(env(safe-area-inset-top,0px) + 10px);right:12px;z-index:12;width:42px;height:42px;border-radius:50%;border:none;background:rgba(0,0,0,.5);color:#fff;align-items:center;justify-content:center;cursor:pointer;}
.pano-wrap.pano-fs .pano-fs-close{display:flex;}
/* Mode theatre inutile sur tel -> bouton masque sur mobile. */
@media (max-width:899px){ .pano-theatre-btn{display:none !important;} }
/* ARRONDI DES COINS (fix 31.07) : .pano-view est bien `overflow:hidden` + `border-radius`, MAIS un enfant
   promu sur sa propre couche GPU (`will-change:transform` ci-dessous, indispensable contre le stroboscope
   au pan) n'est PAS toujours decoupe par l'arrondi du parent — selon le compositeur/la carte graphique, les
   coins de la video ressortent CARRES par-dessus le cadre arrondi. On redonne donc l'arrondi aux enfants
   eux-memes. `inherit` suit automatiquement le parent, y compris en plein ecran ou il repasse a 0. */
.pano-view-vid{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;transform-origin:center center;will-change:transform;pointer-events:none;border-radius:inherit;}
/* `border-radius` NE SUFFIT PAS sur le canvas three.js : c'est une couche composee par le GPU, et selon la
   carte graphique elle est peinte SANS tenir compte de l'arrondi (du parent comme du sien). Symptome exact
   signale le 31.07 : coins ronds tant que le canvas n'est pas encore affiche (on voit le fond de .pano-view),
   puis CARRES des qu'il apparait. `clip-path` est applique a la COMPOSITION : le GPU ne peut pas l'ignorer.
   Il double `overflow:hidden` sans rien changer d'autre (aucun enfant ne deborde deja). */
/* NE PAS DEGRAISSER CES 3 REGLES (31.07, corrige et VALIDE par l'utilisateur sur Firefox).
   Elles ont l'air redondantes : elles ne le sont pas. Le decoupage des coins echoue UNIQUEMENT sur
   Firefox AVEC une vraie carte graphique. Ce cas est INTESTABLE ici : Chrome decoupe correctement, et
   Firefox en mode test (sans GPU) aussi — verifie, y compris en WebGL. On ne peut donc pas savoir
   lequel des trois agit, et retirer les « inutiles » casserait a nouveau, sans qu'aucun test ne le
   voie. Cout de les garder : nul (chacun est inerte quand il ne sert pas). On pose les 3 :
     1) clip-path sur le PARENT   (deja plus haut sur .pano-view)
     2) clip-path sur l'ENFANT    (le remede documente de Firefox pour <video>/<canvas>)
     3) will-change sur le PARENT (force .pano-view sur sa propre couche : l'arrondi est alors
        rasterise AVEC la couche, au lieu d'etre demande a une couche enfant deja composee)
   Aucun des trois n'a d'effet visible quand il n'est pas necessaire. */
.pano-view{will-change:transform;}
.pano-view>canvas,.pano-view>video{border-radius:inherit;clip-path:inset(0 round var(--r));}
.pano-wrap.pano-fs .pano-view{will-change:auto;}
.pano-wrap.pano-fs .pano-view>canvas,.pano-wrap.pano-fs .pano-view>video{clip-path:none;}
.pano-view-hint{position:absolute;left:0;right:0;bottom:0;font-size:11px;color:#fff;background:rgba(0,0,0,.45);padding:4px 8px;text-align:center;pointer-events:none;}
/* Indice de rotation 3D : icône centrée, semi-transparente, disparaît à la 1re interaction (JS). */
.pano-rot-hint{inset:0;top:0;bottom:0;background:transparent;padding:0;display:flex;align-items:center;justify-content:center;color:#fff;z-index:5;}
.pano-rot-hint svg{width:56px;height:56px;filter:drop-shadow(0 2px 10px rgba(0,0,0,.65));animation:panoRotPulse 2.6s ease-in-out infinite;}
/* Pulsation en OPACITÉ seule (pas de scale) → doux, pas saccadé. */
@keyframes panoRotPulse{0%,100%{opacity:.9;}50%{opacity:.5;}}
.pano-view-level{position:absolute;top:8px;right:8px;width:130px;z-index:3;accent-color:var(--flag);opacity:.85;touch-action:auto;cursor:pointer;}
/* Barre de contrôles du lecteur pivot : SOUS la vidéo, solide — une surimpression est invisible sur une
   image claire (payé). Surface média sombre fixe = lisible en light ET dark. */
.pano-wrap{display:flex;flex-direction:column;width:100%;}
/* Plein ecran natif pano : la vue REMPLIT tout (jusqu'en haut, pas de justify-content:center qui laissait un
   trou au-dessus), SANS le contour orange (border:none) -> meme rendu que le clip normal et que le pano CSS. */
.pano-wrap:fullscreen{background:#000;}
.pano-wrap:fullscreen .pano-view{max-height:none;width:100%;flex:1 1 auto;min-height:0;aspect-ratio:auto;border:none;border-radius:0;}
/* Barre de contrôles du pano = mêmes classes .anno-controls que le lecteur normal (sous la vidéo). En
   plein écran (fond noir), on force le texte du temps en clair pour rester lisible. */
.pano-wrap:fullscreen .anno-controls{padding:0 12px 8px;}
.pano-wrap:fullscreen .anno-time{color:#fff;}
/* Barre de controles + fleches clip du pano en plein ecran = MEME rendu que le clip normal (largeur bornee
   centree, texte clair, prev/next en couleur accent) -> les deux lecteurs paraissent identiques. */
.pano-wrap:fullscreen .anno-controls,.pano-wrap.pano-fs .anno-controls{width:min(1100px,100%);margin:0 auto;color:#fff;padding-left:max(14px,env(safe-area-inset-left));padding-right:max(14px,env(safe-area-inset-right));}
.pano-wrap:fullscreen .anno-navclip,.pano-wrap.pano-fs .anno-navclip{display:flex !important;background:var(--flag);border-color:var(--flag);color:#fff;}
/* Mode theatre INUTILE en plein ecran -> bouton masque (pano), comme le clip normal. */
.pano-wrap:fullscreen .pano-theatre-btn,.pano-wrap.pano-fs .pano-theatre-btn{display:none !important;}

/* =========================================================================================================
   PLEIN ECRAN UNIFIE (.tc-fs) : classe posee sur .anno-wrap ET .pano-wrap dans TOUS les modes (natif PC/Android
   + CSS iOS). But : les deux lecteurs ont EXACTEMENT le meme cadrage. Place APRES les regles divergentes ->
   gagne par ordre source (+ !important la ou l'ancien en avait). Modele unique : colonne [ media flex:1 ] +
   [ barre de controles hauteur naturelle, UNE seule ligne ]. -> plus d'ecart de hauteur entre clip et pano.
   ========================================================================================================= */
.anno-wrap.tc-fs,.pano-wrap.tc-fs{background:#000;}
/* Zone media = remplit tout l'espace au-dessus de la barre (meme modele flex:1 pour les deux). */
.anno-wrap.tc-fs .anno-stage{flex:1 1 auto !important;min-height:0 !important;max-height:none !important;width:100% !important;}
.pano-wrap.tc-fs .pano-view{flex:1 1 auto !important;min-height:0 !important;max-height:none !important;width:100% !important;aspect-ratio:auto !important;border:none !important;border-radius:0 !important;}
/* Clip normal : la video remplit la zone (pleine largeur via contain ; fillZoom remplit la hauteur en zoomant). */
.anno-wrap.tc-fs .anno-stage video.anno-video{width:100% !important;height:100% !important;max-width:none !important;max-height:none !important;object-fit:contain !important;}
.anno-wrap.tc-fs .anno-zoomlayer{width:100% !important;height:100% !important;}
/* Barre de controles IDENTIQUE : UNE seule ligne (jamais 2 -> scroll horizontal si trop de boutons), marges
   laterales anti-encoche/arrondi RAISONNABLES (pas de trous), fond noir, texte clair. */
.anno-wrap.tc-fs .anno-controls,.pano-wrap.tc-fs .anno-controls{flex:0 0 auto !important;flex-wrap:nowrap !important;overflow-x:auto;overflow-y:hidden;width:100% !important;max-width:none !important;margin:0 !important;border-radius:0;color:#fff;padding:6px calc(8px + env(safe-area-inset-right,0px)) calc(8px + env(safe-area-inset-bottom,0px)) calc(8px + env(safe-area-inset-left,0px)) !important;}
.anno-wrap.tc-fs .anno-time,.pano-wrap.tc-fs .anno-time{color:#fff;}
/* Fleches clip precedent/suivant visibles + couleur accent (les deux). */
.anno-wrap.tc-fs .anno-navclip,.pano-wrap.tc-fs .anno-navclip{display:flex !important;background:var(--flag);border-color:var(--flag);color:#fff;}
/* Masquer l'edition (barre d'outils, filtres, marqueurs, note) + le mode theatre en plein ecran (les deux). */
.anno-wrap.tc-fs .anno-toolbar,.anno-wrap.tc-fs .anno-filters,.anno-wrap.tc-fs .anno-markers,.anno-wrap.tc-fs .anno-fs-note,.anno-wrap.tc-fs .anno-theater,.pano-wrap.tc-fs .pano-theatre-btn,.pano-wrap.tc-fs .anno-toolbar,.pano-wrap.tc-fs .anno-filters,.pano-wrap.tc-fs .anno-theater{display:none !important;}
/* Régleur de synchro (superposition des 2 angles + curseur). Plein écran sombre = couleurs fixes. */
.pano-sync-ov{position:fixed;inset:0;z-index:1000;background:rgba(10,12,14,.94);display:flex;flex-direction:column;padding:14px;gap:12px;}
.pano-sync-head{display:flex;flex-direction:column;gap:2px;color:#fff;position:relative;padding-right:44px;}
.pano-sync-head b{font-size:16px;}
.pano-sync-head span{font-size:12.5px;color:rgba(255,255,255,.7);}
.pano-sync-x{position:absolute;top:0;right:0;width:34px;height:34px;border:none;background:rgba(255,255,255,.12);color:#fff;font-size:22px;border-radius:var(--r-sm);cursor:pointer;line-height:1;}
.pano-sync-stage{position:relative;flex:1;min-height:0;background:#000;border-radius:var(--r);overflow:hidden;}
.pano-sync-vid{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;}
.pano-sync-vid.pano-sync-top{opacity:.5;}
.pano-sync-ctrls{display:flex;align-items:center;gap:12px;flex-wrap:wrap;}
.pano-sync-slider{flex:1;min-width:180px;accent-color:var(--flag);cursor:pointer;}
.pano-sync-lbl{color:#fff;font-size:13px;font-weight:700;min-width:74px;text-align:center;font-variant-numeric:tabular-nums;}
/* Progression assemblage panorama serveur (spinner + chrono + barre). */
.pano-prog{display:flex;align-items:center;gap:14px;}
.pano-spin{width:28px;height:28px;flex-shrink:0;border:3px solid rgba(255,255,255,.25);border-top-color:var(--flag);border-radius:50%;animation:pano-spin .9s linear infinite;}
@keyframes pano-spin{to{transform:rotate(360deg);}}
.pano-prog-txt{font-size:14px;color:#fff;}
.pano-prog-sub{font-size:12px;color:rgba(255,255,255,.6);margin-top:2px;}
.pano-prog-bar{margin-top:7px;height:6px;width:240px;max-width:100%;background:rgba(255,255,255,.15);border-radius:var(--r-pill);overflow:hidden;}
.pano-prog-bar i{display:block;height:100%;width:0;background:var(--flag);transition:width .3s ease;}
/* Feedback « Connexion à la session en cours » : overlay dédié (ne touche pas à l'écran caméra). */
.cam-connecting-ov{position:fixed;inset:0;z-index:9000;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.35);}
.cam-connecting{display:flex;align-items:center;justify-content:center;gap:11px;max-width:340px;font-size:15px;color:#fff;background:rgba(0,0,0,.72);padding:14px 20px;border-radius:var(--r);}
.cam-spin{width:20px;height:20px;flex-shrink:0;border:3px solid rgba(255,255,255,.3);border-top-color:var(--flag);border-radius:50%;animation:pano-spin .9s linear infinite;}

/* JOUEUR EN ATTENTE D'AUTORISATION. Le joueur voit bien la PAGE CAMERA (elle s'ouvre derriere) ; ce
   voile explique juste qu'un coach doit valider, et l'empeche de croire que ca filme. Il se retire tout
   seul des que l'autorisation arrive (js/app.js showCameraWait). La carte reutilise .tc-modal-card, donc
   tous ses tons viennent des tokens de theme (light + dark sans rien de plus). z-index sous .tc-modal-ov
   (9999) pour que les popups « mode de capture » passent devant apres le deblocage. */
.cam-wait-ov{position:fixed;inset:0;z-index:9200;display:flex;align-items:center;justify-content:center;padding:22px;background:rgba(0,0,0,.55);}
.cam-wait-ov .tc-modal-card{max-width:330px;}
.cam-wait-row{display:flex;align-items:flex-start;gap:11px;margin-bottom:10px;font-size:15px;line-height:1.3;}
.cam-wait-ov .cam-spin{margin-top:1px;border-color:var(--line);border-top-color:var(--flag);}
.cam-wait-ov .tc-modal-sub{margin-bottom:16px;}

/* MULTI-CAM : badge « N angles » sur une carte/ligne de clip multi-cameras. */
.vr-pov-badge{display:inline-flex;align-items:center;gap:3px;font-size:11px;font-weight:700;line-height:1;background:rgba(0,0,0,.62);color:#fff;border-radius:var(--r-sm);padding:2px 5px;}
.vr-pov-badge svg{display:block;}
.pw .vr-pov-badge{position:absolute;top:6px;left:6px;z-index:2;}
.vr-pov-badge.sm{background:var(--surface-2,var(--soft));color:var(--muted);padding:1px 5px;vertical-align:middle;}
.cd-rail-pov{position:absolute;top:4px;left:4px;padding:1px 4px;font-size:10px;}
/* COMMENTAIRES : même badge, mais en BAS À DROITE de la vignette (le haut-gauche est pris par POV/pano,
   le haut-droit par le favori) → aucun chevauchement. En ligne de tableau, il reste dans le flux. */
.pw .vr-pov-badge.vr-cmt-badge{top:auto;left:auto;right:6px;bottom:6px;gap:2px;}

/* ANALYSE IA (beta) : section moment-fort dans la fiche clip. */
.ai-note{font-size:12.5px;color:var(--muted);line-height:1.45;margin:0 0 8px;}
.ai-out{margin-top:8px;}
.ai-spark-wrap{background:var(--surface-2,var(--soft));border:1px solid var(--border);border-radius:var(--r-sm);padding:6px;margin-bottom:8px;}
.ai-spark{width:100%;height:44px;display:block;}
.ai-spark .ai-bar{fill:var(--muted);opacity:.45;}
.ai-spark .ai-bar.peak{fill:var(--flag);opacity:1;}
.ai-actions{display:flex;gap:8px;flex-wrap:wrap;}
.ai-sub{color:var(--muted);font-size:11.5px;}
.ai-out .btn,.dsec .btn{display:block;width:100%;}

/* ANALYSE IA : overlay « vidéo analysée » (lecteur plein écran). */
.av-overlay{position:fixed;inset:0;z-index:10000;background:rgba(0,0,0,.82);display:flex;align-items:center;justify-content:center;padding:16px;}
.av-box{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);max-width:900px;width:100%;overflow:hidden;box-shadow:var(--shadow-lg);}
.av-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 14px;font-weight:700;font-size:14px;}
.av-head .av-close{border:1px solid var(--border);background:var(--surface-2,var(--soft));color:var(--text);border-radius:var(--r-sm);padding:6px 12px;font-size:13px;cursor:pointer;}
.av-video{display:block;width:100%;max-height:74vh;background:#000;}
.av-cap{padding:10px 14px;color:var(--muted);font-size:12.5px;}

/* ANALYSE IA : calibration terrain (placer les 4 coins). */
.fc-overlay{position:fixed;inset:0;z-index:10001;background:rgba(0,0,0,.85);display:flex;align-items:center;justify-content:center;padding:14px;}
.fc-box{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);max-width:900px;width:100%;padding:14px;box-shadow:var(--shadow-lg);}
.fc-head{display:flex;align-items:center;justify-content:space-between;gap:12px;font-weight:700;font-size:14px;margin-bottom:10px;}
.fc-head .fc-close{border:1px solid var(--border);background:var(--surface-2,var(--soft));color:var(--text);border-radius:var(--r-sm);padding:6px 12px;font-size:13px;cursor:pointer;}
.fc-stagewrap{display:flex;justify-content:center;}
.fc-stage{position:relative;background:#000;border-radius:var(--r-sm);overflow:visible;touch-action:none;}
.fc-canvas{display:block;border-radius:var(--r-sm);}
.fc-lines{position:absolute;left:0;top:0;pointer-events:none;overflow:visible;}
.fc-lines polygon{fill:rgba(255,90,31,.14);stroke:var(--flag);stroke-width:2;}
.fc-handle{position:absolute;width:30px;height:30px;margin:-15px 0 0 -15px;border-radius:50%;background:var(--flag);color:#fff;border:2px solid #fff;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:800;cursor:grab;touch-action:none;box-shadow:var(--shadow);z-index:2;}
.fc-handle:active{cursor:grabbing;}
.fc-hint{color:var(--muted);font-size:12.5px;line-height:1.4;margin:12px 2px 6px;}
.fc-actions{display:flex;}
.fc-actions .btn{width:100%;}

/* Fiche clip : boutons precedent / suivant (utiles sur mobile). */
.cd-navbtn{width:34px;height:34px;border:1px solid var(--border);background:var(--surface-2,var(--soft));color:var(--text);border-radius:var(--r-sm);font-size:20px;line-height:1;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;padding:0;}
/* Nav clip ‹ › du HAUT retirée partout : le rail (desktop) et les prev/next du lecteur (mobile) suffisent. */
.cd-sibnav{display:none;}
/* Mobile : bouton Partager du bandeau clip en ICÔNE seule. */
@media(max-width:640px){ .cd-headbtn .btn-label{display:none;} }
.cd-navbtn:disabled{opacity:.35;cursor:default;}

/* Dossiers/collections : section fiche clip + navigateur overlay. */
.col-row{display:flex;align-items:center;gap:8px;font-size:14px;cursor:pointer;}
.col-row input{width:18px;height:18px;flex-shrink:0;}
/* Dossiers (modèle « Joueurs impliqués ») : champ nom + bouton « + », puis chips retirables. */
.col-add-row{display:flex;align-items:center;gap:8px;}
.col-input{flex:1 1 auto;min-width:0;box-sizing:border-box;padding:9px 12px;border:1px solid var(--line);border-radius:var(--r-sm);font:inherit;font-size:14px;background:var(--surface-2);color:var(--text);}
.col-input:focus{outline:none;border-color:var(--flag);}
.col-addbtn{flex:0 0 auto;width:38px;height:38px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--surf);color:var(--muted);font-size:22px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;}
.col-addbtn:hover{border-color:var(--flag);color:var(--flag);background:var(--soft);}
/* Grille de vignettes des clips d'un dossier (panneau Dossiers inline). */
.cb-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:10px;padding:14px;}

/* Vignettes IMAGE (posters) : mêmes dimensions que les <video> qu'elles remplacent (perf). */
.vr-clip .pw img{width:100%;height:100%;object-fit:cover;display:block;}
.cd-rail-item img{width:56px;height:36px;border-radius:var(--r-sm);object-fit:cover;background:#000;flex-shrink:0;}

/* CORBEILLE — « Retirer partout » : geste GRAVE, distinct du menage (la poubelle). Ecrit en toutes
   lettres et en danger, jamais une icone : on ne doit pas pouvoir le confondre avec « effacer ». */
.tc-trash-remove{background:none;border:1px solid var(--danger);color:var(--danger);border-radius:var(--r-sm);
  font:inherit;font-size:12px;font-weight:700;padding:5px 9px;cursor:pointer;white-space:nowrap;}
.tc-trash-remove:hover{background:var(--danger);color:#fff;}

/* Popup « Effacer pour tout le monde » : la liste des consequences, une par ligne. On ENUMERE ce que
   le geste fait — un paragraphe se survole, une liste se lit. */
.tc-rm-list{margin:0 0 12px;padding-left:20px;color:var(--vrmuted,var(--muted));font-size:13px;line-height:1.5;}
.tc-rm-list li{margin:2px 0;}

/* Corbeille : les deux effacements sont ECRITS, jamais une icone. Neutre pour « pour l'equipe »
   (geste courant), contour danger pour « pour tout le monde » (geste rare et irreversible). */
.tc-trash-del{background:none;border:1px solid var(--vrline,var(--line));color:var(--vrmuted,var(--muted));
  border-radius:var(--r-sm);font:inherit;font-size:12px;font-weight:700;padding:5px 9px;cursor:pointer;
  white-space:nowrap;width:auto;height:auto;}
.tc-trash-del:hover{color:var(--vrtext,var(--text));border-color:var(--vrmuted,var(--muted));}

/* ============================================================
   FICHE CLIP SUR TÉLÉPHONE (debout ET couché) — trois rangées qui se cassaient en deux.
   Placé en fin de fichier : chacune de ces règles doit battre une déclaration de base située
   plus haut (filtres, barre d'outils, bandeau).
   ============================================================ */
@media(max-width:640px), (orientation:landscape) and (max-height:560px){
  /* L'œil « Annotation » restait SEUL au-dessus : le libellé « Filtrer annotation » prend toute la
     largeur sur téléphone et le repoussait. Le libellé passe donc en tête et l'œil rejoint les
     pastilles, qui se resserrent juste assez pour que les quatre tiennent sur la ligne. */
  .anno-filters{gap:5px;}
  .anno-filters-lbl{order:-1;}
  .anno-filter-eye,.anno-filter-chip,.anno-filter-manage{padding-left:9px;padding-right:9px;}

  /* La poubelle « Tout effacer » tombait seule en bas : dix boutons de 34 px ne tiennent pas dans les
     339 px disponibles. À 30 px, la rangée d'outils est d'un seul tenant. */
  .anno-tb-tools{gap:4px;}
  .anno-tb-tools .anno-tools{gap:4px;}
  .anno-tb-tools .anno-tool,.anno-tb-tools .anno-tb-sum,.anno-tb-tools .anno-iconbtn{width:30px;height:30px;min-width:30px;}
  .anno-tb-tools svg{width:15px;height:15px;}

  /* « Voir les angles séparément » et les quatre actions du bandeau (favori, télécharger, partager,
     supprimer) sur la MÊME ligne : 181 + 180 ne passaient pas, les icônes descendent à 34 px. */
  /* Pas de `nowrap` ici : en vue « angles séparés » la barre porte trois boutons, et les forcer sur la
     ligne les empilait en colonne. Avec les icônes à 34 px, les deux blocs tiennent d'eux-mêmes. */
  .cd-head-right{gap:6px;}
  .cd-topactions{gap:5px;flex-wrap:nowrap;}
  .cd-topactions .cd-iconbtn{width:34px;height:34px;}
  .cd-topactions .cd-iconbtn svg{width:17px;height:17px;}
  .cd-topactions .fav-btn{width:34px;height:34px;font-size:16px;}
  .cd-pano-topbar .cd-pov{font-size:11.5px;padding:5px 9px;}
}
/* Écrans étroits (Android 360, iPhone mini) : la rangée d'outils a besoin de 3 px de moins par bouton. */
@media(max-width:389px){
  .anno-tb-tools .anno-tool,.anno-tb-tools .anno-tb-sum,.anno-tb-tools .anno-iconbtn{width:27px;height:27px;min-width:27px;}
}