* { box-sizing:border-box; margin:0; padding:0; }
body { font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  background:#0a0a0a; color:#e0e0e0; min-height:100vh; padding:14px 14px 40px; }
.app { max-width:1800px; margin:0 auto; }
h1 { font-size:11px; font-weight:700; letter-spacing:2.5px; color:#888;
  text-transform:uppercase; }

/* ═══════════════════════════════════════════
   VIEW ROUTING
═══════════════════════════════════════════ */
.view { display:none; }
.view.active { display:block; }

/* Le rink-frame est déplacé entre les slots des vues.
   Caché par défaut, visible uniquement à l'intérieur d'une vue active. */
#rink-frame { display:none; }
.view.active #rink-frame { display:block; }

.view-header { display:flex; align-items:center; gap:12px;
  margin-bottom:16px; padding-bottom:12px; border-bottom:1px solid #2a2a2a; }
.view-header h1, .view-header h2 { flex:1; }
.view-header h2 { font-size:12px; font-weight:700; letter-spacing:2.5px;
  color:#888; text-transform:uppercase; }

.back-btn { padding:7px 12px; background:#202020; border:1px solid #3a3a3a;
  border-radius:0; color:#ddd; font-size:12px; cursor:pointer;
  transition:all .15s; font-weight:600; }
.back-btn:hover { background:#252525; }

.coach-toggle { padding:6px 12px; background:#202020; border:1px solid #3a3a3a;
  border-radius:0; color:#888; font-size:11px; font-weight:600;
  cursor:pointer; transition:all .15s; letter-spacing:.5px;
  text-decoration:none; display:inline-flex; align-items:center; }
.coach-toggle:hover { color:#fff; }
.coach-toggle.on { background:#2a3050; border-color:#d4a040; color:#f0c060; }
/* Bouton CTA « Coach area » (en-tête liste) : pill plein accent + flèche */
.coach-toggle--cta {
  gap:8px; padding:8px 16px; font-size:12px;
  background:var(--v2-accent); border-color:var(--v2-accent); color:#fff;
}
.coach-toggle--cta:hover { background:#6e7782; border-color:#6e7782; color:#fff; }
.coach-toggle--cta .coach-toggle__arrow { display:inline-flex; align-items:center; }
.coach-toggle--cta .coach-toggle__arrow svg { width:14px; height:14px; }

/* Lien login : visible seulement hors mode coach (le bouton logout, marqué
   .coach-only, prend le relais quand un coach est connecté) */
body.coach-mode #login-link { display:none; }

/* Elements visibles seulement en mode coach */
.coach-only { display:none !important; }
body.coach-mode .coach-only { display:inline-flex !important; }
body.coach-mode .coach-only.sbtn,
body.coach-mode .coach-only.obtn { display:inline-block !important; }

/* ═══════════════════════════════════════════
   VUE LOGIN — formulaire coach
═══════════════════════════════════════════ */
/* ═══════════════════════════════════════════
   LOGIN v2 — éditorial fond blanc, inspiré 400ft
═══════════════════════════════════════════ */
.view-login--v2.active {
  display:flex; align-items:center; justify-content:center;
  position:fixed; inset:0;
  background:#FFFFFF; color:#0B0B0B;
  z-index:100; overflow-y:auto;
  padding:48px 24px;
}
.login-v2__back {
  position:absolute; top:24px; left:32px;
  font-family:'Manrope', system-ui, sans-serif;
  font-size:12px; font-weight:600; letter-spacing:.02em;
  color:#333; text-decoration:none;
  padding:8px 14px; border:1px solid #ddd; background:transparent;
  transition:all .15s;
}
.login-v2__back:hover { background:#5b6470; border-color:#5b6470; color:#fff; }

.login-v2__inner {
  width:100%; max-width:480px;
  display:flex; flex-direction:column; gap:24px;
}
/* Logo au-dessus du form login/signup. Cliquable (renvoie sur /). */
.login-v2__brand {
  display:inline-block; line-height:0;
  margin-bottom:-8px;  /* compense le gap du flex pour rapprocher du kicker */
}
.login-v2__brand img {
  height:200px; width:auto; display:block;
}
/* Variante login épuré : logo seul, centré et agrandi (sélecteur plus
   spécifique que la règle mobile pour rester gros sur petit écran aussi). */
.login-v2__brand--big { align-self:center; margin-bottom:0; }
.view-login--v2 .login-v2__brand--big img { height:clamp(200px, 40vh, 360px); }
.login-v2__kicker {
  font-family:'Manrope', system-ui, sans-serif;
  font-size:11px; letter-spacing:.18em; text-transform:uppercase;
  color:#5b6470;
}
.login-v2__heading { align-self:center; text-align:center; }
.login-v2__title {
  font-family:'Manrope', system-ui, sans-serif;
  font-size:28px; line-height:1.05; letter-spacing:.01em;
  text-transform:uppercase; color:#0B0B0B;
  margin:0; font-weight:800;
}
.login-v2__owner {
  font-family:'Manrope', system-ui, sans-serif;
  font-size:14px; letter-spacing:.08em; text-transform:uppercase;
  color:#5b6470; margin:8px 0 0; font-weight:600;
}
.login-v2__title em {
  font-family:'Manrope', system-ui, sans-serif;
  font-style:italic; font-weight:400;
  color:#5b6470; letter-spacing:-.025em;
}
.login-v2__sub {
  font-family:'Manrope', system-ui, sans-serif;
  font-size:15px; line-height:1.5; color:#1F1F1F;
  margin:0 0 8px;
}
.login-v2__form {
  display:flex; flex-direction:column; gap:20px;
  border-top:2px solid #0B0B0B; padding-top:28px;
}
.login-v2__field { display:flex; flex-direction:column; gap:6px; }
.login-v2__field span {
  font-family:'Manrope', system-ui, sans-serif;
  font-size:10px; letter-spacing:.16em; text-transform:uppercase;
  color:#7A7A7A;
}
.login-v2__field input {
  background:transparent;
  border:0; border-bottom:1.5px solid #DCDCDC;
  border-radius:0;
  color:#0B0B0B;
  padding:10px 0; font-size:16px;
  font-family:'Manrope', system-ui, sans-serif;
  transition:border-color .15s;
}
.login-v2__field input:focus { outline:none; border-bottom-color:#0B0B0B; }

.login-v2__submit {
  display:inline-flex; align-items:center; gap:12px;
  justify-content:center;
  padding:16px 22px; margin-top:8px;
  background:#0B0B0B; color:#FFFFFF; border:1.5px solid #0B0B0B;
  font-family:'Manrope', system-ui, sans-serif;
  font-weight:700; font-size:13px;
  letter-spacing:.08em; text-transform:uppercase;
  cursor:pointer; transition:all .15s;
}
.login-v2__submit:hover { background:#5b6470; border-color:#5b6470; }
.login-v2__arrow { display:inline-flex; align-items:center; }
.login-v2__arrow svg { width:14px; height:14px; stroke:currentColor; fill:none; stroke-width:2.2; stroke-linecap:square; }

.login-v2__error {
  color:#5b6470; font-size:13px; min-height:1em; margin:0;
  font-family:'Manrope', system-ui, sans-serif;
  letter-spacing:.02em;
}

.login-v2__alt {
  font-family:'Manrope', system-ui, sans-serif;
  font-size:13px; color:#555; margin:8px 0 0;
  letter-spacing:.01em;
}
.login-v2__alt a {
  color:#0B0B0B; font-weight:700;
  border-bottom:1.5px solid #0B0B0B;
  text-decoration:none; padding-bottom:1px;
  transition:color .15s, border-color .15s;
}
.login-v2__alt a:hover { color:#5b6470; border-color:#5b6470; }

.login-v2__hint {
  font-style:normal; font-weight:400; opacity:.6;
  font-size:11px; letter-spacing:.01em; margin-left:6px;
}

@media (max-width: 600px) {
  .login-v2__title { font-size:64px; }
  .login-v2__back { top:16px; left:16px; }
}

/* ═══════════════════════════════════════════
   VUE DRILLS — grille de cartes
═══════════════════════════════════════════ */
.drills-actions { display:flex; gap:8px; margin-bottom:16px; flex-wrap:wrap; }

.drills-grid { display:grid; gap:12px;
  grid-template-columns:repeat(auto-fill, minmax(280px, 1fr)); }

.dcard { background:#181818; border:1px solid #333;
  padding:12px; cursor:pointer; transition:all .15s; position:relative;
  display:flex; flex-direction:column; gap:8px; }
.dcard:hover { background:#242424; border-color:#666; transform:translateY(-1px); }
.dcard__header { display:flex; align-items:flex-start; gap:8px; }
.dcard__name { flex:1; font-size:17px; font-weight:800; color:#fff;
  line-height:1.25; letter-spacing:-0.01em; }
.dcard__preview { background:#dce9f5; border:1px solid #2a2a2a;
  overflow:hidden; aspect-ratio: 2 / 1; }
/* La demi-glace SVG est centrée et letterboxée dans le même ratio 2/1
   (via preserveAspectRatio="xMidYMid meet"), donc toutes les cartes ont
   la même hauteur quelque soit la direction de la glace. */
.dcard__svg { display:block; width:100%; height:100%; }
.dcard__meta { display:flex; gap:5px; flex-wrap:wrap; }
.dcard__chip { font-size:9px; color:#ddd; background:#222;
  border:1px solid #444; padding:2px 7px; font-weight:700;
  letter-spacing:.5px; text-transform:uppercase; }
.dcard__chip--net { color:#c89060; background:#2a1f18; border-color:#5a3a28; }
.dcard__chip--kind-play  { color:#9bb6d4; background:#19222e; border-color:#2c4359; }
.dcard__chip--kind-drill { color:#b69ad4; background:#1f1929; border-color:#3f2c59; }
.dcard__chip--coach      { color:#9bd4a3; background:#192a1d; border-color:#2c5934;
  text-transform:none; letter-spacing:0; font-weight:600; }

/* Cartes de drills appartenant à un AUTRE coach : viewer-only, on enlève
   le hover "actionable" et on garde un curseur normal. */
body.coach-mode .dcard--readonly { opacity:.95; }

.drills-filter { display:flex; align-items:center; gap:10px;
  margin-bottom:16px; flex-wrap:wrap; }
.drills-filter__label { font-size:11px; font-weight:700; letter-spacing:.5px;
  text-transform:uppercase; color:#888; }
.drills-filter__select { background:#202020; color:#ddd; border:1px solid #3a3a3a;
  padding:6px 10px; font-family:inherit; font-size:13px; border-radius:0;
  cursor:pointer; min-width:180px; }
.drills-filter__select:focus { outline:none; border-color:#5a5a5a; }
.dcard__stats { font-size:10px; color:#888; letter-spacing:.5px;
  text-transform:uppercase; font-weight:600; }
.dcard__desc { font-size:11px; color:#aaa; line-height:1.5;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
  overflow:hidden; }
.dcard__date { font-size:10px; color:#666; font-style:italic; }
.dcard__del { font-size:14px; color:#444; cursor:pointer; padding:4px 8px;
  opacity:0; transition:all .15s; flex-shrink:0; }
.dcard:hover .dcard__del { opacity:1; }
.dcard__del:hover { background:#2e1414; color:#d08080; }

.drills-empty { grid-column:1/-1; text-align:center; padding:40px 20px;
  color:#666; font-size:13px; }

/* ═══════════════════════════════════════════
   VUE CONSULTATION
═══════════════════════════════════════════ */
.drill-header-bar { gap:12px; }
.drill-title-block { flex:1; display:flex; align-items:center; gap:10px;
  flex-wrap:wrap; }
.drill-title-block h2 { font-size:16px; font-weight:700; color:#fff;
  text-transform:none; letter-spacing:normal; flex:initial; }
.drill-title-block .dzone { font-size:10px; color:#ddd; background:#1f1f1f;
  padding:3px 8px; border-radius:0; font-weight:700; letter-spacing:.5px; }

/* Vue consultation pleine largeur (la sidebar a été remplacée par un dropdown) */
.drill-main--full { width:100%; }

/* Sélecteur de drill dans le header de consultation */
.drill-switcher { background:#202020; border:1px solid #3a3a3a;
  border-radius:0; color:#ddd; padding:7px 10px; font-size:12px;
  cursor:pointer; max-width:240px; font-family:inherit; }
.drill-switcher:hover { background:#252525; border-color:#666; }
.drill-switcher:focus { outline:none; border-color:#888; }

.drill-description { font-size:12px; color:#7090a8; padding:10px 14px;
  background:#181818; border:1px solid #2a2a2a; border-radius:0;
  margin-bottom:8px; line-height:1.5; }
.drill-description:empty { display:none; }

/* En consultation, on cache les contrôles qui n'ont de sens qu'en édition :
   - le hint (instructions outil)
   - le bouton de bascule de vue (la vue est figée par le drill sauvegardé) */
#view-drill .hint,
#view-drill #view-toggle-btn { display:none; }

/* ═══════════════════════════════════════════
   VUE ÉDITION — extras
═══════════════════════════════════════════ */
/* Description sur 2 lignes, compacte */
.drill-description-input { width:100%; background:#181818;
  border:1px solid #2a2a2a; border-radius:0; color:#bbb;
  padding:6px 12px; font-size:12px; font-family:inherit; line-height:1.4;
  margin-bottom:8px; resize:vertical; min-height:44px; }
.drill-description-input:focus { outline:none; border-color:#888; }

/* Header de la vue édition : compact, tout sur une ligne */
.view-header--edit { gap:8px; flex-wrap:wrap; }
.view-header--edit .drill-name { flex:1; min-width:200px; }

.drill-name { flex:1; background:#202020; border:1px solid #3a3a3a;
  border-radius:0; color:#fff; padding:8px 14px; font-size:14px; font-weight:600; }
.drill-name:focus { outline:none; border-color:#888; }
.net-btn { padding:8px 12px; background:#202020; border:1px solid #3a3a3a;
  border-radius:0; color:#999; font-size:10px; font-weight:700;
  cursor:pointer; letter-spacing:.8px; white-space:nowrap; transition:all .15s; }
.net-btn:hover { color:#fff; }

.toolbar { display:flex; gap:5px; margin-bottom:8px; flex-wrap:wrap; align-items:center; }
.tbtn { padding:7px 13px; cursor:pointer; background:#202020; border:1px solid #3a3a3a;
  border-radius:0; color:#888; font-size:12px; font-weight:500;
  transition:all .15s; white-space:nowrap; }
.tbtn:hover { background:#252525; color:#fff; }
.tbtn.on { background:#1f1f1f; border-color:#666; color:#ddd; }
.tbtn.red:hover { background:#2e1414; border-color:#6a2020; color:#d08080; }
.tsep { width:1px; height:26px; background:#3a3a3a; flex-shrink:0; }

/* Séparateur entre les deux équipes dans la palette */
.palette-sep { width:1px; height:22px; background:#3a3a3a; margin:0 6px;
  display:inline-block; vertical-align:middle; }

/* ═══════════════════════════════════════════
   MODE CANVAS — vue plein écran avec overlays
   (édition et consultation utilisent ce mode)
═══════════════════════════════════════════ */
.view--canvas.active {
  display:flex;
  flex-direction:column;
  position:fixed;
  inset:0;
  background:#0a0a0a;
  z-index:100;
  overflow:hidden;
}

/* Top header — DANS LE FLOW (pas overlay), prend sa hauteur de contenu */
.canvas-top {
  position:relative;
  flex:0 0 auto;
  z-index:1;
  background:#181818;
  border:none;
  border-bottom:1px solid #2a2a2a;
  border-radius:0;
  padding:10px 14px;
  margin:0;
  box-shadow:none;
}
.canvas-top .view-header { border-bottom:none; margin-bottom:0; padding-bottom:0; }
.canvas-top .drill-description-input { margin:8px 0 0; }
.canvas-top .drill-description { margin:8px 0 0; padding:0; }
.canvas-top .drill-description:empty { display:none; }

/* Rink slot : flex:1, prend tout l'espace restant.
   Padding 100px haut/bas pour laisser de l'air autour du rink — le SVG
   scale pour entrer dans cette zone réduite, ce qui force la demi-glace
   à être HEIGHT-constrained (centrée horizontalement avec letterbox). */
.rink-slot--canvas {
  position:relative;
  flex:1;
  min-height:0;
  width:100%;
  padding:50px 10px;
  box-sizing:border-box;
  overflow:hidden;
}

/* Barre « Finish / Cancel » — position FIXE en bas-centre de l'écran, visible
   seulement pendant le tracé (toggle display via drawing.js). En position fixe
   au niveau du body → jamais masquée par le conteneur du rink, indispensable au
   tactile où il n'y a ni Entrée ni Esc. */
.finish-bar {
  display:none;  /* affiché par drawing.js pendant le tracé */
  position:fixed; left:50%; bottom:22px; transform:translateX(-50%);
  z-index:1000; gap:10px; align-items:center;
  padding:8px; border-radius:12px;
  background:rgba(20,20,20,.92);
  box-shadow:0 8px 28px rgba(0,0,0,.5);
}
.finish-bar__done, .finish-bar__cancel {
  font-family:'Manrope', system-ui, sans-serif; font-size:15px; font-weight:700;
  border-radius:8px; cursor:pointer;
  display:inline-flex; align-items:center; gap:8px;
  padding:13px 22px; transition:all .15s;
}
.finish-bar__done { border:none; background:var(--v2-accent); color:#fff; }
.finish-bar__done:hover { background:#6e7782; }
.finish-bar__done svg { width:18px; height:18px; }
.finish-bar__cancel { background:transparent; color:#bbb; border:1px solid #444; }
.finish-bar__cancel:hover { color:#fff; border-color:#777; }

/* Rink-frame en block normal (pas absolute) — respecte le padding du parent */
.view--canvas #rink-frame {
  position:relative;
  width:100%;
  height:100%;
}
.view--canvas .rink-wrap {
  position:relative;
  width:100%;
  height:100%;
  background:transparent;
  border:none; border-radius:0;
  margin:0;
  overflow:hidden;
}
.view--canvas #rink {
  display:block;
  width:100%;
  height:100%;
}
.view--canvas .hint { display:none; }

/* Anim-bar en overlay flottant au bas (position fixe par rapport au viewport) */
.view--canvas .anim-bar {
  position:fixed;
  bottom:12px; left:50%;
  transform:translateX(-50%);
  z-index:50;
  background:rgba(20, 20, 20, 0.92);
  border:1px solid #3a3a3a;
  border-radius:0;
  padding:6px;
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  box-shadow:0 4px 12px rgba(0,0,0,.4);
  margin:0;
}

/* Toolbox overlay — dans le rink-slot, top-left de la zone rink */
.view--canvas .edit-toolbox {
  position:absolute;
  top:10px; left:10px;
  z-index:50;
}

/* Filter banner overlay */
.view--canvas .filter-banner.show {
  position:absolute;
  top:10px;
  left:70px;
  right:auto;
  z-index:55;
  background:rgba(20, 20, 20, 0.92);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
}

/* Consultation : pas d'édition tools */
#view-drill .edit-toolbox,
#view-drill .filter-banner { display:none !important; }

/* Ajustements mobiles */
@media (max-width: 720px) {
  .canvas-top { padding:8px 10px; }
  .canvas-top .view-header { flex-wrap:wrap; gap:6px; }
  .rink-slot--canvas { padding:25px 5px 40px; }
  .view--canvas .anim-bar {
    left:5px; right:5px; transform:none;
    flex-wrap:wrap; justify-content:center;
  }
  .ttool { width:32px; height:32px; font-size:16px; }
  .view--canvas .edit-toolbox { padding:4px; gap:4px; }
}

/* Garder l'ancien .edit-canvas en fallback si jamais réutilisé */
.edit-canvas { position:relative; }

/* Toolbox vertical flottant, style Photoshop (overlay top-left) */
.edit-toolbox {
  position:absolute;
  top:10px; left:10px;
  z-index:50;
  display:flex; flex-direction:column;
  gap:5px; padding:6px;
  background:rgba(20, 20, 20, 0.92);
  border:1px solid #3a3a3a;
  border-radius:0;
  box-shadow:0 4px 12px rgba(0,0,0,.4);
  backdrop-filter:blur(4px);
  -webkit-backdrop-filter:blur(4px);
}

/* Handle de drag (pour repositionner les barres flottantes) */
.drag-handle {
  width:24px; height:8px;
  background:#3a3a3a;
  border-radius:0;
  margin:0 auto 4px;
  cursor:move;
  user-select:none;
  display:flex; align-items:center; justify-content:center;
  color:#aaa; font-size:10px; font-weight:700;
  line-height:1; padding:0;
  transition:background .15s;
}
.drag-handle:hover { background:#666; color:#fff; }
/* Handle horizontal (pour la barre anim-bar qui est horizontale) */
.drag-handle--h {
  width:8px; height:24px;
  margin:auto 4px auto 0;
  writing-mode:vertical-rl;
}

.ttool {
  width:34px; height:34px;
  display:flex; align-items:center; justify-content:center;
  background:#202020;
  border:1px solid #3a3a3a;
  border-radius:0;
  color:#aaa;
  font-size:18px; font-weight:600;
  cursor:pointer;
  transition:all .15s;
  padding:0;
  user-select:none;
}
.ttool:hover { background:#252525; color:#fff; }
.ttool.on    { background:#1f1f1f; border-color:#666; color:#ddd; }
.ttool--red:hover { background:#2e1414; border-color:#6a2020; color:#d08080; }
.ttool--add { font-size:22px; font-weight:700; color:#fff; }
.ttool--text { font-size:10px; letter-spacing:0.5px; font-weight:700; }
.ttool-sep { width:24px; height:1px; background:#3a3a3a; margin:2px auto; }

/* Icônes SVG monolignes dans les boutons d'outil. Stroke=currentColor pour
   suivre la couleur du bouton (hover, active, dark mode). */
.ttool__ico { width:18px; height:18px; display:block; }
.ttool--add .ttool__ico { width:20px; height:20px; }

/* Bouton collapse/expand du canvas-top — toujours à l'extrême droite */
.canvas-top__toggle {
  background:#202020;
  border:1px solid #3a3a3a;
  color:#888;
  width:28px; height:28px;
  font-size:11px;
  cursor:pointer;
  transition:all .15s;
  flex-shrink:0;
  padding:0;
  margin-left:auto;
}
.canvas-top__toggle:hover { color:#ddd; background:#2a2a2a; }

/* État collapsed : on cache UNIQUEMENT la description.
   Le header reste strictement identique (mêmes contrôles, mêmes tailles,
   même padding) pour qu'aucun élément ne bouge à la fermeture. */
.canvas-top.collapsed > *:not(.view-header) { display:none; }

/* Popup des joueurs (apparaît à droite du bouton +) */
.players-add-wrap { position:relative; }
.players-popup {
  display:none;
  position:absolute;
  left:calc(100% + 8px);
  top:0;
  background:rgba(20, 20, 20, 0.95);
  border:1px solid #3a3a3a;
  border-radius:0;
  /* padding-top élargi pour laisser la place au bouton ✕ en position absolute
     (sinon il chevauche la 1ère rangée de boutons quand il n'y a pas de titre,
     ex: mode drill qui n'a plus de section 'Our team'). */
  padding:30px 10px 10px;
  z-index:60;
  box-shadow:0 4px 12px rgba(0,0,0,.5);
  backdrop-filter:blur(4px);
  -webkit-backdrop-filter:blur(4px);
  min-width:280px;
}
.players-popup.open { display:block; }

/* Bouton X de fermeture, en haut à droite du popup */
.players-popup__close {
  position:absolute; top:6px; right:6px;
  width:22px; height:22px; padding:0;
  background:transparent; border:1px solid transparent;
  color:#666; font-size:12px; cursor:pointer;
  transition:all .15s;
}
.players-popup__close:hover { color:#fff; border-color:#555; background:#252525; }
/* Décale juste les titres pour ne pas passer sous le X ; les rows gardent toute la largeur */
.players-popup .players-popup-title { padding-right:24px; }
.players-popup-section { margin-bottom:14px; }
.players-popup-section:last-child { margin-bottom:0; }
.players-popup-title { font-size:11px; font-weight:700;
  color:#ddd; letter-spacing:1px; text-transform:uppercase;
  margin-bottom:8px; padding-bottom:5px;
  border-bottom:1px solid #3a3a3a; }
.players-popup-title--them { color:#c89060; border-bottom-color:#5a3a28; }
/* nowrap : les 6 positions tiennent toujours sur une seule ligne */
.players-popup-row { display:flex; flex-wrap:nowrap; gap:5px; }
.players-popup-row .padd { flex:1 1 0; padding:4px 6px; text-align:center; }

.palette { display:flex; gap:5px; margin-bottom:8px; align-items:center; flex-wrap:wrap; }
.plabel { font-size:11px; color:#777; }
.padd { padding:4px 11px; cursor:pointer; background:#202020; border:1px solid #3a3a3a;
  border-radius:0; color:#aaa; font-size:11px; font-weight:600; transition:all .15s; }
.padd:hover { background:#252525; color:#fff; border-color:#666; }

/* Palette adversaire — teinte ambre/rouge pour bien distinguer */
.plabel--them { color:#a86430; }
.padd--them { color:#c89060; border-color:#5a3a28; background:#1d1612; }
.padd--them:hover { background:#2a1f18; color:#e8b888; border-color:#a86430; }

/* Position déjà placée — fond plus clair + petite pastille verte en haut-droite */
.padd.exists { background:#3a3a3a; border-color:#888; color:#fff; position:relative; }
.padd.exists::after {
  content:''; position:absolute; top:-3px; right:-3px;
  width:7px; height:7px; background:#7fc97a; border:1px solid #181818;
  border-radius:50%; pointer-events:none;
}
.padd.exists:hover { background:#2e1414; border-color:#6a2020; color:#d08080; }
.padd--them.exists { background:#5a3a28; border-color:#c89060; color:#fff; }
.padd--them.exists:hover { background:#2e1414; border-color:#6a2020; color:#d08080; }

.rink-wrap { background:#181818; border-radius:0; border:1px solid #2a2a2a;
  margin-bottom:6px; overflow:hidden; }
#rink { width:100%; display:block;
  user-select:none; -webkit-user-select:none; -moz-user-select:none;
  /* Tactile : empêche le scroll/zoom du navigateur pendant qu'on trace,
     pour que le glissé du doigt/stylet dessine (Pointer Events). */
  touch-action:none; -ms-touch-action:none; }
#rink.drawing { cursor:crosshair; }

/* La couche de preview ne doit pas intercepter les clics — sinon le dblclick
   ne se déclenche pas (cibles différentes entre 2 clics car re-rendu). */
#preview-layer, #puck-layer { pointer-events:none; }

.hint { text-align:center; font-size:11px; color:#777;
  min-height:18px; margin-bottom:6px; letter-spacing:.2px; }

.filter-banner { display:none; align-items:center; gap:8px; justify-content:center;
  padding:6px 12px; margin-bottom:6px; background:#1a3050;
  border:1px solid #666; border-radius:0; font-size:12px; color:#ddd; }
.filter-banner.show { display:flex; }
.filter-banner button { background:none; border:1px solid #666; color:#ddd;
  border-radius:0; padding:2px 10px; font-size:11px; cursor:pointer; }
.filter-banner button:hover { background:#2a4a6a; }
.filter-banner__del { border-color:#7a3030 !important; color:#d08080 !important; }
.filter-banner__del:hover { background:#3a1818 !important; }

/* Animation bar */
.anim-bar { display:flex; gap:6px; align-items:center; justify-content:center;
  padding:8px 10px; margin-bottom:8px; background:#181818;
  border:1px solid #2a2a2a; border-radius:0; flex-wrap:wrap; }
.anim-play { padding:7px 16px; cursor:pointer; border-radius:0; font-size:12px;
  font-weight:600; transition:all .15s; background:#1f1f1f;
  border:1px solid #666; color:#ddd; }
.anim-play:hover { background:#2a2a2a; }
.anim-play.active { background:#2a5080; border-color:#5a9ae8; }
.anim-step { padding:7px 14px; cursor:pointer; border-radius:0; font-size:12px;
  font-weight:500; transition:all .15s; background:#202020;
  border:1px solid #3a3a3a; color:#888; }
.anim-step:hover { background:#252525; color:#fff; }
.anim-play--simul { background:#2a3050; border-color:#5a6aa0; color:#a0b8e8; }
.anim-play--simul:hover { background:#363f68; }
.anim-play--simul:disabled { opacity:.4; cursor:default; }
/* min-width retiré : le bouton speed garde la même largeur que les autres
   (auto-fit sur "½×" / "1×" / "2×" / "¼×"). */
.anim-step--toggle.on { background:#1f1f1f; border-color:#666; color:#ddd; }
.step-display { font-size:13px; font-weight:700; color:#aaa; min-width:60px;
  text-align:center; background:#202020; border:1px solid #3a3a3a;
  border-radius:0; padding:6px 10px; }
.anim-nav { background:#202020; border:1px solid #3a3a3a; color:#ddd;
  padding:7px 14px; cursor:pointer; border-radius:0; font-size:14px;
  font-weight:700; transition:all .15s; }
.anim-nav:hover { background:#252525; }
.anim-nav:disabled { opacity:.3; cursor:default; }
.anim-sep { width:1px; height:26px; background:#3a3a3a; }

.sbtn { padding:9px 18px; cursor:pointer; background:#1f1f1f;
  border:1px solid #666; border-radius:0; color:#ddd;
  font-size:13px; font-weight:600; transition:all .15s; }
.sbtn:hover { background:#2a2a2a; }
.obtn { padding:9px 13px; cursor:pointer; background:#202020;
  border:1px solid #3a3a3a; border-radius:0; color:#888;
  font-size:12px; transition:all .15s; }
.obtn:hover { background:#252525; color:#fff; }

.drills-panel { background:#181818; border:1px solid #2a2a2a; border-radius:0; padding:12px; }
.dpanel-title { font-size:10px; font-weight:700; color:#777;
  letter-spacing:1.2px; text-transform:uppercase; margin-bottom:10px; }
.drill-empty { font-size:12px; color:#2e4050; padding:4px 0; }
.ditem { display:flex; align-items:center; gap:8px; padding:8px 10px; margin-bottom:4px;
  background:#202020; border-radius:0; cursor:pointer;
  transition:background .15s; border:1px solid transparent; }
.ditem:hover { background:#252525; }
.ditem.active { border-color:#666; }
.dname { flex:1; font-size:13px; color:#bbb; }
.dzone { font-size:10px; color:#777; font-weight:700;
  background:#1a2d40; padding:2px 7px; border-radius:0; }
.ddel { font-size:13px; color:#555; cursor:pointer;
  padding:2px 7px; border-radius:0; transition:all .15s; }
.ddel:hover { background:#2e1414; color:#d08080; }

.toast { position:fixed; bottom:20px; left:50%; transform:translateX(-50%);
  background:#1f1f1f; border:1px solid #666; color:#ddd;
  padding:7px 20px; border-radius:0; font-size:12px; font-weight:600;
  opacity:0; transition:opacity .25s; pointer-events:none; z-index:9999; }
.toast.show { opacity:1; }

@keyframes dashFlow { to { stroke-dashoffset:-18; } }
@keyframes pulseRing { 0%,100%{r:21;opacity:.7} 50%{r:24;opacity:.3} }

/* ═══════════════════════════════════════════
   LISTING v2 — chrome éditorial pour / ET /admin
   Les différences coach/public sont gérées par les classes .coach-only
   (visibles en admin) + des overrides ciblés en body.coach-mode.
═══════════════════════════════════════════ */
/* Background blanc full viewport en mode admin sur la vue liste UNIQUEMENT.
   :has() détecte qu'on est dans #view-drills.active actif → on override le
   body+app. Quand on est ailleurs (editor) le :has() ne match pas, body
   reste son padding/background normal. Pas de position:fixed (qui créait
   un stacking context bloquant). */
body:has(#view-drills.active) { background:#FFFFFF; padding:0; }
body:has(#view-drills.active) .app { max-width:none; margin:0; }
#view-drills.active {
  display:block;
  background:#FFFFFF; color:#0B0B0B;
  min-height:100vh;
}

/* Header bar : brand left, logout right */
#view-drills .view-header {
  display:flex; align-items:center; justify-content:flex-end; gap:10px;
  padding:14px 48px;
  border-bottom:1px solid #E5E5E5; margin-bottom:0;
  max-width:none;
}
/* Titre coach dans la barre de header (poussé à gauche, boutons à droite). */
#view-drills .view-header__title {
  margin:0 auto 0 0;
  font-family:'Manrope', system-ui, sans-serif;
  font-size:32px; font-weight:800; letter-spacing:.01em;
  text-transform:uppercase; color:#0B0B0B; line-height:1;
}
#view-drills .view-header h1 {
  font-family:'Manrope', system-ui, sans-serif;
  font-size:24px; letter-spacing:.02em;
  text-transform:uppercase; color:#0B0B0B;
  font-weight:400; line-height:1;
  flex:initial; margin:0;
}

/* ─── Logo brand dans le header (vue liste) ─── */
#view-drills .brand {
  display:inline-flex; align-items:center;
  text-decoration:none; color:#0B0B0B;
  margin-right:auto;  /* pousse les liens nav vers la droite (mode admin) */
}
#view-drills .brand__img {
  height:88px; width:auto; display:block;
}

/* ─── PUBLIC mode : logo XL centré dans le header pour impact marketing ─── */
/* Mode public : plus de logo XL → header compact. Le header de base (flex-end)
   garde le bouton « Coach area » à droite. En admin, le titre a margin-right:auto
   → titre à gauche, Profile/Logout à droite. */

/* Boutons coach-toggle icon-only (ex: login) — carrés, juste l'icône */
#view-drills .coach-toggle--icon {
  width:42px; height:42px; padding:0;
  display:inline-flex; align-items:center; justify-content:center;
}
#view-drills .coach-toggle--icon svg {
  width:20px; height:20px; display:block;
}
/* Texte de fallback : visible seulement si l'image est manquante (l'onerror
   ajoute la classe brand--text-fallback sur le <a>). */
#view-drills .brand__text {
  display:none;
  font-family:'Manrope', system-ui, sans-serif;
  font-size:24px; letter-spacing:.02em;
  text-transform:uppercase; font-weight:400; line-height:1;
}
#view-drills .brand--text-fallback .brand__text { display:inline; }
/* Le lien "Design v2 →" est obsolète maintenant que v2 est partout */
#view-drills [href="/v2"] { display:none; }

/* Login link (visible en public) et Logout/Profile (visible en admin) :
   même look éditorial outline noir. Leur show/hide est géré ailleurs
   (.coach-only pour logout/profile, body.coach-mode #login-link pour cacher en admin). */
#view-drills #login-link,
#view-drills #profile-link,
#view-drills #logout-btn {
  font-family:'Manrope', system-ui, sans-serif;
  font-size:11px; letter-spacing:.16em; text-transform:uppercase;
  background:transparent; border:1.5px solid #0B0B0B; color:#0B0B0B;
  padding:10px 18px; font-weight:600;
  text-decoration:none;
}
#view-drills #login-link:hover,
#view-drills #profile-link:hover,
#view-drills #logout-btn:hover {
  background:#0B0B0B; color:#FFFFFF;
}

/* Hero — bande compacte avec eyebrow + menu admin. Le gros titre éditorial
   a été supprimé car redondant avec le logo dans le header. */
#view-drills .view-header::after { content:none; }
/* Hero compact partout — le logo dans le header (.brand) porte l'identité,
   donc on n'a plus besoin du gros titre 'Plays.' redondant. L'eyebrow
   ('Play library' / 'Coach area · <nom>') reste comme contexte de page. */
#view-drills .drills-hero {
  padding:18px 48px;
  background:#FFFFFF;
  border-bottom:1px solid #E5E5E5;
}
/* En public, on cache complètement le hero (pas de "Play library" qui prenait
   de la hauteur pour rien, le logo dans le header porte déjà l'identité). */
body:not(.coach-mode) #view-drills .drills-hero { display:none; }
#view-drills .drills-hero__row {
  display:flex; align-items:center; justify-content:space-between;
  gap:18px;
}
#view-drills .drills-hero__eyebrow {
  display:block;
  font-family:'Manrope', system-ui, sans-serif;
  font-size:28px; font-weight:800; letter-spacing:.01em; text-transform:uppercase;
  color:#0B0B0B;
}

/* ─── Menu compact admin (Export/Import) ─── */
#view-drills .drills-hero__menu {
  position:relative;
}
#view-drills .drills-hero__menu-btn {
  width:32px; height:32px; padding:0;
  background:transparent; border:1.5px solid #0B0B0B; color:#0B0B0B;
  border-radius:0; cursor:pointer;
  font-size:22px; line-height:1;
  display:inline-flex; align-items:center; justify-content:center;
  transition:all .15s;
}
#view-drills .drills-hero__menu-btn:hover {
  background:#0B0B0B; color:#FFFFFF;
}
#view-drills .drills-hero__menu-panel {
  display:none;
  position:absolute; right:0; top:calc(100% + 6px);
  min-width:180px;
  background:#FFFFFF; border:1.5px solid #0B0B0B;
  z-index:50;
}
#view-drills .drills-hero__menu-panel.open { display:block; }
#view-drills .drills-hero__menu-panel button {
  display:block; width:100%;
  background:transparent; border:0;
  text-align:left; padding:12px 16px;
  font-family:'Manrope', system-ui, sans-serif;
  font-size:12px; font-weight:600;
  letter-spacing:.04em;
  color:#0B0B0B; cursor:pointer;
}
#view-drills .drills-hero__menu-panel button:hover {
  background:#F2F2F2; color:#5b6470;
}

/* Grille de cards éditoriale */
#view-drills .drills-grid {
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(320px, 1fr));
  gap:0;
  padding:0 48px 96px;
  border-top:1px solid #E5E5E5;
  counter-reset: dnum;
}
/* Grille à l'intérieur d'une section (admin OU public) : même pattern
   éditorial que la grille publique standalone d'origine. */
#view-drills .drills-grid--section {
  padding:0;
  border-top:none;
}

/* Listing unifié (admin + public) — sections empilées verticalement.
   Le wrapper .drills-listing n'a pas besoin de display particulier (block
   par défaut), donc pas de bagarre avec la règle générique .coach-only. */
#view-drills .drills-section {
  padding:18px 48px 48px;
  border-bottom:1px solid #E5E5E5;
}
#view-drills .drills-section:last-child { border-bottom:none; }
#view-drills .drills-section__header {
  display:flex; align-items:center; justify-content:space-between;
  gap:18px; margin-bottom:20px;
  padding-bottom:16px; border-bottom:1px solid #E5E5E5;
}
#view-drills .drills-section__heading {
  display:flex; align-items:baseline; gap:14px;
}
#view-drills .drills-section__title {
  font-family:'Manrope', system-ui, sans-serif;
  font-size:32px; line-height:1; letter-spacing:.01em;
  text-transform:uppercase; color:#0B0B0B;
  margin:0; font-weight:400;
}
#view-drills .drills-section__count {
  font-family:'Manrope', system-ui, sans-serif;
  font-size:11px; letter-spacing:.18em; color:#5b6470;
  font-weight:700;
}
/* Bouton "+ New" dans le header de section : style éditorial outline noir
   cohérent avec les autres boutons d'action du chrome admin. */
#view-drills .drills-section__action {
  font-family:'Manrope', system-ui, sans-serif;
  font-weight:700; font-size:12px;
  letter-spacing:.08em; text-transform:uppercase;
  padding:12px 20px;
  background:transparent; border:1.5px solid #0B0B0B; color:#0B0B0B;
  border-radius:0; cursor:pointer; transition:all .15s;
  flex-shrink:0;
}
#view-drills .drills-section__action:hover {
  background:#0B0B0B; color:#FFFFFF;
}

/* Visibilité mode public vs coach :
   - .public-only visible en mode public (par défaut), caché en coach-mode
   - .coach-only visible en coach-mode (override globalement géré ailleurs) */
body.coach-mode #view-drills .public-only { display:none; }

/* Filtre coach — barre éditoriale entre actions et grille.
   Mêmes paddings horizontaux que .drills-grid pour alignement parfait. */
#view-drills .drills-filter {
  padding:20px 48px;
  margin:0; max-width:none;
  display:flex; align-items:center; gap:12px;
  background:#FFFFFF;
  border-bottom:1px solid #E5E5E5;
}
#view-drills .drills-filter__label {
  font-family:'Manrope', system-ui, sans-serif;
  font-size:11px; letter-spacing:.18em; text-transform:uppercase;
  color:#666; font-weight:600;
}
#view-drills .drills-filter__select {
  background:#FFFFFF; color:#0B0B0B;
  border:1.5px solid #0B0B0B; border-radius:0;
  padding:10px 14px; padding-right:32px;
  font-family:'Manrope', system-ui, sans-serif;
  font-size:12px; font-weight:600;
  letter-spacing:.04em;
  cursor:pointer;
  appearance:none; -webkit-appearance:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%230B0B0B' stroke-width='2'><path d='M1 1l5 5 5-5'/></svg>");
  background-repeat:no-repeat;
  background-position:right 12px center;
  background-size:10px;
}
#view-drills .drills-filter__select:focus {
  outline:none; border-color:#5b6470; color:#5b6470;
}
#view-drills .dcard {
  counter-increment: dnum;
  background:#FFFFFF; border:0;
  border-right:1px solid #E5E5E5;
  border-bottom:1px solid #E5E5E5;
  padding:32px 24px;
  display:flex; flex-direction:column; gap:14px;
  cursor:pointer; transition:background .2s;
  position:relative;
}
#view-drills .dcard:hover {
  background:#F2F2F2; transform:none;
  border-color:#E5E5E5;
}
#view-drills .dcard:hover .dcard__name { color:#5b6470; }

/* Numéro éditorial via counter, en haut-gauche */
#view-drills .dcard::before {
  content: counter(dnum, decimal-leading-zero);
  font-family:'Manrope', system-ui, sans-serif;
  font-size:48px; line-height:.9;
  color:#5b6470; letter-spacing:-.005em;
}

#view-drills .dcard__header {
  display:flex; justify-content:space-between; align-items:flex-start;
  gap:12px; order:2;
}
#view-drills .dcard__name {
  font-family:'Manrope', system-ui, sans-serif;
  font-size:28px; font-weight:400; line-height:1;
  letter-spacing:-.005em; text-transform:uppercase;
  color:#0B0B0B; transition:color .15s;
}
#view-drills .dcard__del {
  color:#7A7A7A; opacity:0; font-size:16px;
  transition:all .15s;
}
#view-drills .dcard:hover .dcard__del { opacity:1; }
#view-drills .dcard__del:hover { color:#5b6470; }

#view-drills .dcard__preview {
  background:#F2F2F2; border:1px solid #E5E5E5;
  order:3;
}
#view-drills .dcard__meta {
  order:4; gap:8px;
}
#view-drills .dcard__chip {
  font-family:'Manrope', system-ui, sans-serif;
  font-size:10px; letter-spacing:.14em;
  background:transparent; border:1px solid #DCDCDC; color:#0B0B0B;
  padding:3px 9px; font-weight:500;
}
#view-drills .dcard__chip--net {
  background:transparent; color:#5b6470; border-color:#5b6470;
}
#view-drills .dcard__stats {
  font-family:'Manrope', system-ui, sans-serif;
  font-size:11px; letter-spacing:.12em; color:#7A7A7A;
  text-transform:uppercase; font-weight:500;
  padding-top:12px; border-top:1.5px solid #5b6470;
  order:5;
}
#view-drills .dcard__desc {
  font-family:'Manrope', system-ui, sans-serif;
  font-size:13px; line-height:1.5; color:#1F1F1F;
  order:6;
}

#view-drills .drills-empty {
  grid-column:1/-1;
  padding:96px 0; text-align:center;
  font-family:'Manrope', system-ui, sans-serif;
  font-size:56px; line-height:1;
  text-transform:uppercase; color:#7A7A7A;
}

/* Responsive */
@media (max-width: 720px) {
  #view-drills .view-header { padding:14px 20px; }
  #view-drills .drills-filter { padding:16px 20px; flex-wrap:wrap; }
  #view-drills .drills-grid { padding:0 20px 64px; }
  #view-drills .drills-section { padding:24px 20px 48px; }
  #view-drills .drills-section__title { font-size:28px; }
  #view-drills .drills-section__header { flex-wrap:wrap; gap:12px; }
  #view-drills .drills-section__action { width:100%; }
}

/* ═══════════════════════════════════════════
   VIEWER + EDITOR v2 — chrome éditorial, light par défaut
   Variables CSS pour basculer light/dark via body.dark-mode.
   N'affecte que les vues canvas (viewer + editor), pas la liste.
═══════════════════════════════════════════ */
:root {
  --v2-font-display: 'Manrope', system-ui, sans-serif;
  --v2-font-body:    'Manrope', system-ui, sans-serif;
  --v2-font-mono:    'Manrope', system-ui, sans-serif;
  --v2-font-serif:   'Manrope', system-ui, sans-serif;
  --v2-accent:       #5b6470;
  --v2-accent-soft:  #aab2bd;

  /* Light mode (par défaut) — coordonné avec le listing v2 blanc */
  --v2-bg:           #FFFFFF;
  --v2-bg-soft:      #F8F8F8;
  --v2-bg-tint:      #F2F2F2;  /* rink area, surfaces secondaires */
  --v2-text:         #0B0B0B;
  --v2-text-muted:   #7A7A7A;
  --v2-text-faint:   #555555;
  --v2-border:       #E5E5E5;
  --v2-border-soft:  #EEEEEE;
  /* HUD flottants (anim-bar, toolbox) en dark même en mode light : c'est un
     contrôle, il doit se distinguer du fond — comme un calque Photoshop. */
  --v2-hud-bg:       rgba(11,11,11,0.94);
  --v2-hud-text:     #FFFFFF;
  --v2-hud-text-muted:#bbbbbb;
  --v2-hud-border:   #2a2a2a;
}

/* Dark mode global (toggle via body.dark-mode) */
body.dark-mode {
  --v2-bg:           #0a0a0a;
  --v2-bg-soft:      #111111;
  --v2-bg-tint:      #1a1a1a;
  --v2-text:         #FFFFFF;
  --v2-text-muted:   #888888;
  --v2-text-faint:   #666666;
  --v2-border:       #2a2a2a;
  --v2-border-soft:  #1f1f1f;
}

/* Force le background de la vue canvas via variable (override le #0a0a0a fixe
   de .view--canvas.active hérité de v1) */
.view-drill--v2.active,
.view-edit--v2.active { background:var(--v2-bg); color:var(--v2-text); }
.view-drill--v2 .rink-slot--canvas,
.view-edit--v2 .rink-slot--canvas { background:var(--v2-bg); }

.view-drill--v2 .canvas-top {
  background:var(--v2-bg);
  border-bottom:1px solid var(--v2-border);
  padding:18px 28px 16px;
}

.view-drill--v2 .drill-header-bar {
  display:grid;
  /* Ordre HTML : [drill-title-block grows] [drill-header-tools auto, right] */
  grid-template-columns:1fr auto;
  gap:24px;
  align-items:start;
}

/* Back link : mono uppercase discret, accent au hover */
.view-drill--v2 .back-btn--v2 {
  background:transparent; border:1px solid var(--v2-border);
  font-family:'Manrope', system-ui, sans-serif; font-size:12px; font-weight:600;
  letter-spacing:.02em; text-transform:none;
  color:var(--v2-text); padding:8px 14px; cursor:pointer;
  align-self:center;
  transition:all .15s;
}
.view-drill--v2 .back-btn--v2:hover { background:var(--v2-accent); border-color:var(--v2-accent); color:#fff; }

/* Bloc titre : eyebrow zone (mono burgundy) + titre Bebas + description Manrope */
.view-drill--v2 .drill-title-block {
  flex:initial;
  display:grid;
  gap:6px;
  min-width:0;
}
.view-drill--v2 .drill-title-block .dzone {
  font-family:var(--v2-font-body); font-size:11px;
  letter-spacing:.04em; text-transform:uppercase;
  color:var(--v2-text-muted); background:transparent;
  padding:0; font-weight:600;
}
body.dark-mode .view-drill--v2 .drill-title-block .dzone { color:var(--v2-text-muted); }
.view-drill--v2 .drill-title-block h2 {
  font-family:var(--v2-font-body); font-size:22px; line-height:1.2;
  letter-spacing:0; color:var(--v2-text);
  margin:0; text-transform:none; font-weight:700;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.view-drill--v2 .drill-title-block .drill-description {
  font-family:var(--v2-font-body); font-size:13px; line-height:1.4;
  color:var(--v2-text-muted); margin:2px 0 0; padding:0;
  background:transparent; border:none;
  display:-webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical;
  overflow:hidden;
}
.view-drill--v2 .drill-title-block .drill-description:empty { display:none; }

/* Tools à droite : switcher + edit button alignés */
.view-drill--v2 .drill-header-tools {
  display:flex; gap:10px; align-items:center;
  align-self:center;
}
.view-drill--v2 .drill-switcher {
  font-family:var(--v2-font-mono); font-size:11px;
  letter-spacing:.1em; text-transform:uppercase;
  background:var(--v2-bg); border:1px solid var(--v2-border); color:var(--v2-text);
  padding:8px 12px; max-width:220px;
}
.view-drill--v2 .drill-switcher:hover { border-color:var(--v2-text); }

/* Bouton Edit : éditorial primary contrasté, hover burgundy */
.view-drill--v2 .drill-header-tools .sbtn {
  font-family:var(--v2-font-body); font-weight:700; font-size:11px;
  letter-spacing:.08em; text-transform:uppercase;
  padding:10px 16px;
  background:var(--v2-text); color:var(--v2-bg); border:1.5px solid var(--v2-text);
  transition:all .15s; cursor:pointer;
}
.view-drill--v2 .drill-header-tools .sbtn:hover {
  background:var(--v2-accent); color:#fff; border-color:var(--v2-accent);
}

/* Anim-bar : HUD dark constant (même en mode light) pour ressortir comme un
   contrôle, typo v2 */
/* Anim-bar : éditorial bg+border via variables (flip automatique en dark mode).
   color-mix garde une légère transparence sans casser le swap light/dark. */
.view-drill--v2 .anim-bar,
.view-edit--v2 .anim-bar {
  background:color-mix(in srgb, var(--v2-bg) 96%, transparent);
  border:1.5px solid var(--v2-text);
  color:var(--v2-text);
  box-shadow:0 4px 14px rgba(0,0,0,.08);
  backdrop-filter:blur(4px);
  -webkit-backdrop-filter:blur(4px);
}
.view-drill--v2 .anim-bar .anim-play--simul,
.view-edit--v2 .anim-bar .anim-play--simul {
  font-family:var(--v2-font-body); font-weight:700;
  letter-spacing:.08em; text-transform:uppercase; font-size:11px;
  background:transparent; color:var(--v2-text);
  border:1px solid var(--v2-text);
}
.view-drill--v2 .anim-bar .anim-step,
.view-edit--v2 .anim-bar .anim-step {
  font-family:var(--v2-font-mono); font-size:10px;
  letter-spacing:.14em; text-transform:uppercase;
  background:transparent; color:var(--v2-text); border:1px solid var(--v2-text);
}
.view-drill--v2 .anim-bar .anim-step:hover,
.view-edit--v2 .anim-bar .anim-step:hover {
  background:var(--v2-bg-tint); color:var(--v2-text);
}
.view-drill--v2 .anim-bar .step-display,
.view-edit--v2 .anim-bar .step-display {
  font-family:var(--v2-font-mono); font-size:11px;
  letter-spacing:.1em; color:var(--v2-text);
  /* Override le background/border dark hardcodés de la règle de base v1 :
     on hérite du fond transparent de l'anim-bar (blanc light / noir dark). */
  background:transparent; border:0; padding:0 8px;
}
.view-drill--v2 .anim-bar .anim-step.on,
.view-edit--v2 .anim-bar .anim-step.on {
  background:var(--v2-text); color:var(--v2-bg); border-color:var(--v2-text);
}

/* Boutons nav ◀ ▶ : carrés, même hauteur visuelle que les autres boutons
   éditoriaux de la barre (anim-step ≈ 28px de haut). Bordure via var(--v2-text)
   → contour visible dans les 2 modes (noir light, blanc dark). */
.view-drill--v2 .anim-bar .anim-nav,
.view-edit--v2 .anim-bar .anim-nav {
  background:transparent; color:var(--v2-text); border:1px solid var(--v2-text);
  width:28px; height:28px; padding:0;
  display:inline-flex; align-items:center; justify-content:center;
  font-size:11px; line-height:1;
  cursor:pointer; transition:all .15s;
}
.view-drill--v2 .anim-bar .anim-nav:hover:not(:disabled),
.view-edit--v2 .anim-bar .anim-nav:hover:not(:disabled) {
  background:var(--v2-bg-tint); border-color:var(--v2-text);
}
.view-drill--v2 .anim-bar .anim-nav:disabled,
.view-edit--v2 .anim-bar .anim-nav:disabled {
  opacity:.35; cursor:default;
}
.view-drill--v2 .anim-bar .anim-play--simul:not(:disabled):hover,
.view-edit--v2 .anim-bar .anim-play--simul:not(:disabled):hover {
  background:var(--v2-accent); color:#FFFFFF; border-color:var(--v2-accent);
}

/* Drag handle (la petite bande ⋮⋮ pour drag les barres flottantes) :
   discrète, basée sur les variables — visible dans les deux modes. */
.view-drill--v2 .drag-handle,
.view-edit--v2 .drag-handle {
  background:var(--v2-border);
  color:var(--v2-text-faint);
}
.view-drill--v2 .drag-handle:hover,
.view-edit--v2 .drag-handle:hover {
  background:var(--v2-text); color:var(--v2-bg);
}

/* Responsive : mobile, le grid passe en colonne */
@media (max-width: 720px) {
  .view-drill--v2 .drill-header-bar {
    grid-template-columns:1fr;
    gap:14px;
  }
  .view-drill--v2 .drill-title-block h2 { font-size:28px; }
  .view-drill--v2 .drill-header-tools { justify-content:flex-start; }
  .view-drill--v2 .drill-switcher { max-width:none; flex:1; }
}

/* ═══════════════════════════════════════════
   EDITOR v2 — chrome éditorial autour du rink, light par défaut
   Le rink SVG ne change pas. Variables CSS pour basculer light/dark.
═══════════════════════════════════════════ */

.view-edit--v2 .canvas-top {
  background:var(--v2-bg);
  border-bottom:1px solid var(--v2-border);
  padding:18px 28px 14px;
}

/* Header de l'éditeur en grid : back | name (flex) | save | toggle */
.view-edit--v2 .view-header--edit {
  display:grid;
  /* Ordre HTML : [drill-name input] [back-btn] [sbtn save] [▲ toggle]
     L'input doit grow (1fr), les 3 actions collées à droite (auto). */
  grid-template-columns:1fr auto auto auto;
  gap:18px; align-items:center;
}

.view-edit--v2 .back-btn {
  background:transparent; border:1px solid var(--v2-border);
  font-family:'Manrope', system-ui, sans-serif; font-size:12px; font-weight:600;
  letter-spacing:.02em; text-transform:none;
  color:var(--v2-text); padding:8px 14px; cursor:pointer;
  transition:all .15s;
}
.view-edit--v2 .back-btn:hover { background:var(--v2-accent); border-color:var(--v2-accent); color:#fff; }

/* Title input : grand, fond transparent, underline accent */
.view-edit--v2 .drill-name {
  background:transparent;
  border:0; border-bottom:1.5px solid var(--v2-border);
  border-radius:0;
  font-family:var(--v2-font-display);
  font-size:32px; line-height:1; font-weight:400;
  letter-spacing:-.005em; text-transform:uppercase;
  color:var(--v2-text); padding:6px 0;
  flex:initial; min-width:0;
  transition:border-color .15s;
}
.view-edit--v2 .drill-name:focus {
  outline:none; border-bottom-color:var(--v2-accent);
}
.view-edit--v2 .drill-name::placeholder { color:var(--v2-text-faint); text-transform:uppercase; }

/* Save button : éditorial primary contrasté, hover burgundy */
.view-edit--v2 .view-header--edit .sbtn {
  font-family:var(--v2-font-body); font-weight:700; font-size:11px;
  letter-spacing:.08em; text-transform:uppercase;
  padding:10px 16px;
  background:var(--v2-text); color:var(--v2-bg);
  border:1.5px solid var(--v2-text); border-radius:0;
  cursor:pointer; transition:all .15s;
}
.view-edit--v2 .view-header--edit .sbtn:hover {
  background:var(--v2-accent); color:#fff; border-color:var(--v2-accent);
}

/* Collapse toggle : minimal */
.view-edit--v2 .canvas-top__toggle {
  background:transparent; border:1px solid var(--v2-border);
  color:var(--v2-text-muted); padding:0;
}
.view-edit--v2 .canvas-top__toggle:hover { color:var(--v2-text); background:var(--v2-bg-tint); }

/* Description textarea : style underline cohérent avec le title */
.view-edit--v2 .drill-description-input {
  background:transparent;
  border:0; border-bottom:1px solid var(--v2-border-soft);
  border-radius:0;
  font-family:var(--v2-font-body);
  font-size:13px; line-height:1.4; color:var(--v2-text);
  padding:6px 0; margin-top:10px;
  resize:vertical;
}
.view-edit--v2 .drill-description-input:focus {
  outline:none; border-bottom-color:var(--v2-text);
}
.view-edit--v2 .drill-description-input::placeholder { color:var(--v2-text-faint); }

/* Toolbox : carte flottante éditoriale via variables (light/dark via body.dark-mode).
   color-mix garde une légère transparence sans casser le swap. */
.view-edit--v2 .edit-toolbox {
  background:color-mix(in srgb, var(--v2-bg) 96%, transparent);
  border:1.5px solid var(--v2-text);
  font-family:var(--v2-font-mono);
  color:var(--v2-text);
  box-shadow:0 4px 14px rgba(0,0,0,.08);
  backdrop-filter:blur(4px);
  -webkit-backdrop-filter:blur(4px);
}
.view-edit--v2 .ttool {
  background:transparent; border:1px solid var(--v2-text); color:var(--v2-text);
  font-family:var(--v2-font-mono);
  transition:all .15s;
}
.view-edit--v2 .ttool:hover {
  background:var(--v2-bg-tint); border-color:var(--v2-text); color:var(--v2-text);
}
.view-edit--v2 .ttool.on {
  background:var(--v2-text); border-color:var(--v2-text); color:var(--v2-bg);
}
.view-edit--v2 .ttool--text {
  font-family:var(--v2-font-mono); font-size:10px;
  letter-spacing:.14em; text-transform:uppercase; font-weight:600;
}
.view-edit--v2 .ttool--red {
  border-color:var(--v2-text); color:var(--v2-text);
}
.view-edit--v2 .ttool--red:hover {
  background:var(--v2-accent); border-color:var(--v2-accent); color:#FFFFFF;
}
.view-edit--v2 .ttool-sep { background:var(--v2-text); opacity:.25; }

/* Popup d'ajout de joueurs : carte éditoriale via variables. */
.view-edit--v2 .players-popup {
  background:color-mix(in srgb, var(--v2-bg) 98%, transparent);
  border:1.5px solid var(--v2-text);
  box-shadow:0 6px 20px rgba(0,0,0,.12);
  backdrop-filter:blur(4px);
  -webkit-backdrop-filter:blur(4px);
}
.view-edit--v2 .players-popup__close {
  color:var(--v2-text-faint); border-color:transparent;
}
.view-edit--v2 .players-popup__close:hover {
  background:var(--v2-text); color:var(--v2-bg); border-color:var(--v2-text);
}
.view-edit--v2 .players-popup-title {
  font-family:var(--v2-font-mono); font-size:10px;
  letter-spacing:.16em; text-transform:uppercase;
  color:var(--v2-text-faint); border-bottom:1px solid var(--v2-border);
}
.view-edit--v2 .players-popup-title--them {
  color:var(--v2-accent); border-bottom-color:var(--v2-accent-soft);
}
.view-edit--v2 .padd {
  background:transparent; border:1px solid var(--v2-text);
  color:var(--v2-text);
  font-family:var(--v2-font-mono); font-weight:600;
  letter-spacing:.04em;
}
.view-edit--v2 .padd:hover {
  background:var(--v2-bg-tint); border-color:var(--v2-text); color:var(--v2-text);
}
.view-edit--v2 .padd--them {
  color:var(--v2-accent); border-color:var(--v2-accent-soft); background:transparent;
}
.view-edit--v2 .padd--them:hover {
  background:color-mix(in srgb, var(--v2-accent) 10%, transparent);
  color:var(--v2-accent); border-color:var(--v2-accent);
}
.view-edit--v2 .padd.exists {
  background:var(--v2-text); border-color:var(--v2-text); color:var(--v2-bg);
}
.view-edit--v2 .padd--them.exists {
  background:var(--v2-accent); border-color:var(--v2-accent); color:#FFFFFF;
}

/* Filter banner : carte éditoriale blanche avec accent rouge. */
.view-edit--v2 .filter-banner {
  background:rgba(255,255,255,0.98);
  border:1.5px solid var(--v2-accent);
  font-family:var(--v2-font-mono);
  letter-spacing:.04em;
  color:var(--v2-text);
  box-shadow:0 4px 14px rgba(0,0,0,.08);
}
.view-edit--v2 .filter-banner #filter-text { color:var(--v2-text-faint); font-size:11px; }
.view-edit--v2 .filter-banner strong { color:var(--v2-accent); }
.view-edit--v2 .filter-banner button {
  font-family:var(--v2-font-mono); font-size:10px;
  letter-spacing:.14em; text-transform:uppercase;
  background:transparent; color:var(--v2-text); border:1px solid #D4D4D4;
}
.view-edit--v2 .filter-banner button:hover {
  background:var(--v2-bg-tint); border-color:var(--v2-text);
}
.view-edit--v2 .filter-banner .filter-banner__del {
  border-color:var(--v2-accent) !important; color:var(--v2-accent) !important;
}
.view-edit--v2 .filter-banner .filter-banner__del:hover {
  background:var(--v2-accent) !important; color:#FFFFFF !important;
}

/* Anim-bar dans l'éditeur : redondant avec le bloc unifié plus haut, on
   garde juste les overrides spécifiques à la simul-bar. */
/* Bloc supprimé : règles redondantes qui écrasaient la définition unifiée
   plus haut (cf. lignes ~1110-1130). En particulier, le `.step-display`
   ici remettait `--v2-text-faint` (gris medium) ce qui rendait "1 / 4"
   illisible en dark mode. */

/* Hint au-dessus du rink : mono discret */
.view-edit--v2 .hint {
  font-family:var(--v2-font-mono); font-size:10px;
  letter-spacing:.14em; text-transform:uppercase;
  color:#666;
}