/* ────────────────────────────────────────────────────────────────────────
   FLYWAY V2 — design preview
   Direction : inspiration iOS / Apple HIG (cf. capture fournie par l'utilisateur)
   - fond clair, cartes blanches, grands rayons, ombres douces
   - police système (-apple-system → SF Pro sur les appareils Apple)
   - couleurs "system" iOS pour les statuts et les avatars
   - accent Flyway (chartreuse) conservé pour la continuité de marque
   Données de cette page : DEMO uniquement (pas encore branché sur l'API).
   ──────────────────────────────────────────────────────────────────────── */

/* Thème CLAIR (défaut) — poste de pilotage : dashboard, carte, planning. */
:root{
  color-scheme: light;

  --bg: #F4F4F1;            /* blanc cassé chaud, pas gris-bleu */
  --bg-elevated: #FAFAF8;
  --surface: #FFFFFF;
  --surface-2: #FBFBF9;
  --border: rgba(20,20,18,.08);
  --border-strong: rgba(20,20,18,.16);
  --text: #16160F;
  --muted: #86867C;
  --muted-2: #B0B0A6;
  --overlay: rgba(250,250,248,.86);

  --accent: #E8FF47;       /* accent de marque Flyway, utilisé avec parcimonie */
  --accent-ink: #14161F;   /* texte sur fond accent */

  --blue: #0A84FF;
  --green: #34C759;
  --orange: #FF9F0A;
  --pink: #FF375F;
  --purple: #AF52DE;
  --teal: #30B0C7;
  --red: #FF3B30;

  --r-lg: 14px;             /* resserré : les gros rayons font « template » */
  --r-md: 10px;
  --r-sm: 6px;

  --shadow-card: 0 1px 2px rgba(20,20,18,.05);
  --shadow-pop:  0 8px 28px -10px rgba(20,20,18,.28);

  /* Barlow Condensed revient de la V1 sur les titres seulement : il réancre
     l'identité Flyway et donne le contraste typographique qui manquait. Les
     données restent en police système, plus lisible en petit corps. */
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", "Segoe UI", system-ui, sans-serif;
  --font-display: "Barlow Condensed", -apple-system, BlinkMacSystemFont, "SF Pro Display", system-ui, sans-serif;
}

/* Thème SOMBRE — utile de nuit et sur le terrain. Les couleurs "system" iOS
   sont légèrement remontées en luminosité, comme le fait iOS en mode sombre. */
:root[data-theme="dark"]{
  color-scheme: dark;

  --bg: #100F0D;
  --bg-elevated: #181714;
  --surface: #1C1B18;
  --surface-2: #232220;
  --border: rgba(255,255,255,.10);
  --border-strong: rgba(255,255,255,.20);
  --text: #F5F4EF;
  --muted: #8F8E84;
  --muted-2: #5E5D55;
  --overlay: rgba(22,21,18,.86);

  --blue: #4DA3FF;
  --green: #4FD96B;
  --orange: #FFB340;
  --pink: #FF6482;
  --purple: #C57FEE;
  --teal: #5AC8E8;
  --red: #FF6961;

  --shadow-card: 0 1px 2px rgba(0,0,0,.40), 0 10px 28px -8px rgba(0,0,0,.55);
  --shadow-pop:  0 4px 14px rgba(0,0,0,.50), 0 20px 40px -12px rgba(0,0,0,.65);
}

/* Suit le réglage système tant que l'utilisateur n'a pas choisi explicitement. */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    color-scheme: dark;
    --bg: #100F0D;
    --bg-elevated: #181714;
    --surface: #1C1B18;
    --surface-2: #232220;
    --border: rgba(255,255,255,.10);
    --border-strong: rgba(255,255,255,.20);
    --text: #F5F4EF;
    --muted: #8F8E84;
    --muted-2: #5E5D55;
    --overlay: rgba(22,21,18,.86);
    --blue: #4DA3FF;
    --green: #4FD96B;
    --orange: #FFB340;
    --pink: #FF6482;
    --purple: #C57FEE;
    --teal: #5AC8E8;
    --red: #FF6961;
    --shadow-card: 0 1px 2px rgba(0,0,0,.40), 0 10px 28px -8px rgba(0,0,0,.55);
    --shadow-pop:  0 4px 14px rgba(0,0,0,.50), 0 20px 40px -12px rgba(0,0,0,.65);
  }
}

*{ box-sizing: border-box; }
html,body{ height:100%; }
body{
  margin:0;
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img,svg{ display:block; }
button{ font-family: inherit; }
a{ color:inherit; text-decoration:none; }

/* ── Bandeau preview ─────────────────────────────────────────────────── */
.v2-banner{
  position: sticky; top:0; z-index: 500;
  display:flex; align-items:center; justify-content:center; gap:8px;
  padding: 7px 14px;
  background: var(--accent-ink);
  color: var(--accent);
  font-size: .74rem; font-weight: 600; letter-spacing: .01em;
}
.v2-banner b{ color:#fff; }

/* ── Layout racine ───────────────────────────────────────────────────── */
.app{
  display:grid;
  grid-template-columns: 84px 1fr 300px;
  min-height: calc(100vh - 32px);
}

/* ── Rail gauche (desktop) ───────────────────────────────────────────── */
.rail-left{
  display:flex; flex-direction:column; align-items:center;
  padding: 22px 0 16px;
  gap: 26px;
}
.rail-logo{
  width:40px; height:40px; border-radius: 12px;
  background: var(--accent-ink); color: var(--accent);
  display:flex; align-items:center; justify-content:center;
  font-family: var(--font-display); font-weight: 800; font-size: .95rem;
  letter-spacing: -.02em;
}
.rail-nav{ display:flex; flex-direction:column; gap:6px; }
.rail-btn{
  width:46px; height:46px; border-radius: var(--r-md);
  border:none; background:transparent; color: var(--muted);
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; transition: all .15s ease;
}
.rail-btn svg{ width:21px; height:21px; }
.rail-btn:hover{ background: rgba(20,22,35,.05); color: var(--text); }
.rail-btn.active{ background: var(--surface); color: var(--text); box-shadow: var(--shadow-card); }
.rail-btn.active svg{ color: var(--text); }
.rail-spacer{ flex:1; }
.rail-bottom{ display:flex; flex-direction:column; align-items:center; gap:14px; margin-top:auto; padding-top: 10px; }
.rail-avatar{
  width:38px; height:38px; border-radius:50%;
  background: linear-gradient(155deg, var(--purple), var(--blue));
  color:#fff; display:flex; align-items:center; justify-content:center;
  font-weight:700; font-size:.78rem;
}

/* ── Barre d'onglets (mobile) ────────────────────────────────────────── */
.tabbar{
  display:none;
  position: fixed; left:0; right:0; bottom:0; z-index: 400;
  padding: 8px 10px calc(8px + env(safe-area-inset-bottom));
  background: var(--overlay);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border-top: 1px solid var(--border);
  justify-content: space-around;
}
.tabbar-btn{
  border:none; background:transparent; color: var(--muted);
  display:flex; flex-direction:column; align-items:center; gap:3px;
  font-size:.62rem; font-weight:600; padding:4px 10px; border-radius:10px;
}
.tabbar-btn svg{ width:22px; height:22px; }
.tabbar-btn.active{ color: var(--text); }

/* ── Colonne principale ──────────────────────────────────────────────── */
.main{ padding: 22px 26px 40px; min-width:0; }
@media (max-width: 620px){ .main{ padding: 16px 14px 28px; } }

.crumb{ font-size:.82rem; color: var(--muted); margin-bottom: 6px; }
.crumb b{ color: var(--text); font-weight: 600; }

.page-head{
  display:flex; align-items:flex-start; justify-content:space-between;
  gap: 16px; margin-bottom: 22px; flex-wrap: wrap;
}
.page-title{
  font-family: var(--font-display);
  font-size: 2.3rem; font-weight: 800; letter-spacing: -.03em; margin: 0;
  text-transform: uppercase; line-height: .98;
}
.page-sub{ color: var(--muted); font-size:.86rem; margin-top:4px; }

.event-switch{
  display:flex; align-items:center; gap:10px;
  background: var(--surface); border:1px solid var(--border);
  border-radius: 999px; padding: 6px 14px 6px 6px;
  box-shadow: var(--shadow-card); cursor:pointer;
}
.event-switch .dot{
  width:32px; height:32px; border-radius:50%;
  background: conic-gradient(from 200deg, var(--purple), var(--teal), var(--orange), var(--purple));
}
.event-switch .name{ font-weight:700; font-size:.86rem; }
.event-switch .meta{ font-size:.72rem; color: var(--muted); }
.event-switch svg{ width:14px; height:14px; color: var(--muted-2); margin-left:2px; }

/* ── Colonnes kanban ─────────────────────────────────────────────────── */
.board{
  display:grid;
  grid-template-columns: repeat(4, minmax(230px, 1fr));
  gap: 18px;
}
/* Barre d'outils de l'en-tête de page (remplace un style en ligne, pour être
   réglable selon la taille d'écran). */
.head-tools{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }

/* ── Suivi cadreurs sur petit écran ─────────────────────────────────────────
   Le tableau à quatre colonnes devenait un carrousel horizontal : il fallait
   deviner qu'on pouvait glisser de côté, et la première colonne était coupée.
   On empile donc, et on masque les colonnes vides — l'essentiel tient alors
   dans un écran et un peu de défilement vertical. Le desktop ne change pas. */
@media (max-width: 1180px){
  .board{
    grid-template-columns:1fr; gap:14px;
    overflow-x:visible; padding-bottom:0; scroll-snap-type:none;
  }
  .board .col.is-empty{ display:none; }
  /* L'intitulé reste visible pendant qu'on fait défiler sa pile de cartes. */
  .board .col-head{
    position:sticky; top:0; z-index:2;
    padding:6px 0; background:var(--bg);
  }
}
@media (max-width: 620px){
  /* La carte prenait 42 % de la hauteur : les premières cartes de cadreurs
     tombaient sous la ligne de flottaison. */
  #live-map{ height:clamp(190px, 30vh, 300px); }
  .live-map-head{ padding:8px 12px; }
  .live-map-head h2{ font-size:.95rem; }
  /* En-tête resserré : un titre de 2,3 rem plus un fil d'Ariane mangeaient un
     tiers de l'écran avant même la carte. */
  .page-head{ margin-bottom:12px; gap:10px; }
  /* Les contrôles tenaient sur trois lignes : la liste prend la place qui
     reste et tout rentre sur une seule. */
  .head-tools{ width:100%; flex-wrap:nowrap; }
  .head-tools .select{ flex:1; min-width:0; }
  .head-tools .btn{ flex:none; }
  .page-title{ font-size:1.5rem; }
  .crumb{ margin-bottom:2px; }
  .live-map-wrap{ margin-bottom:12px; }
}

.col-head{
  display:flex; align-items:center; gap:8px;
  font-size:.72rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  color: var(--muted); margin-bottom: 12px; padding: 0 4px;
}
.col-head .n{
  background: rgba(20,22,35,.06); color: var(--text);
  border-radius: 999px; font-size:.68rem; font-weight:700;
  padding: 1px 7px;
}
.col-cards{ display:flex; flex-direction:column; gap:12px; }

.card{
  background: var(--surface); border-radius: var(--r-lg);
  padding: 15px 15px 14px; border: 1px solid var(--border);
  transition: border-color .14s ease;
}
.card:hover{ border-color: var(--border-strong); }

.card-top{ display:flex; align-items:center; gap:10px; margin-bottom:11px; }
.avatar{
  width:32px; height:32px; border-radius:50%; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  color:#fff; font-weight:700; font-size:.72rem;
}
.card-name{ font-family:var(--font-display); font-weight:700; font-size:1.02rem; text-transform:uppercase; letter-spacing:-.01em; flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.card-fav{ color: var(--muted-2); flex-shrink:0; }
.card-fav svg{ width:16px; height:16px; }
.card-fav.on{ color: var(--orange); }

.chip-row{ display:flex; align-items:center; gap:6px; margin-bottom:12px; flex-wrap:wrap; }
.chip{
  display:inline-flex; align-items:center; gap:4px;
  background: transparent; color: var(--muted); border:1px solid var(--border-strong);
  border-radius: var(--r-sm); padding: 3px 7px; font-size:.66rem; font-weight:600;
  letter-spacing:.03em;
}
.chip svg{ width:12px; height:12px; }

.progress-row{ display:flex; align-items:center; gap:8px; }
.progress-track{
  flex:1; height:7px; border-radius:2px; overflow:hidden;
  background:repeating-linear-gradient(-45deg, var(--border-strong) 0 2px, transparent 2px 5px), var(--bg-elevated);
}
.progress-fill{ height:100%; border-radius:2px; }
.progress-pct{ font-size:.7rem; font-weight:700; color: var(--muted); min-width: 30px; text-align:right; }

.done-row{ display:flex; align-items:center; gap:6px; color: var(--text); font-size:.76rem; font-weight:600; }
.done-row svg{ width:15px; height:15px; }

/* ── Rail droit ──────────────────────────────────────────────────────── */
.rail-right{ padding: 22px 22px 30px 0; display:flex; flex-direction:column; gap:18px; }
.panel{
  background: var(--surface); border-radius: var(--r-lg);
  padding: 17px 17px 18px; border: 1px solid var(--border);
}
.panel-title{
  font-size:.68rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase;
  color: var(--muted); margin: 0 0 13px;
}

.event-card .ev-name{ font-family: var(--font-display); font-weight:800; font-size:1.15rem; }
.event-card .ev-dates{ color: var(--muted); font-size:.78rem; margin-top:2px; }
.event-card .ev-stats{ display:flex; gap:14px; margin-top:12px; }
.event-card .ev-stat b{ display:block; font-size:1.05rem; font-family: var(--font-display); }
.event-card .ev-stat span{ font-size:.68rem; color: var(--muted); }

.bars{ display:flex; align-items:flex-end; gap:10px; height:96px; padding-top:4px; }
.bar-item{ flex:1; display:flex; flex-direction:column; align-items:center; gap:8px; height:100%; justify-content:flex-end; }
.bar-fill{ width: 20px; border-radius: 7px 7px 3px 3px; min-height:6px; }
.bar-val{ font-size:.72rem; font-weight:800; }
.bar-label{ font-size:.62rem; color: var(--muted); font-weight:600; }

.rings{ display:flex; justify-content:space-between; }
.ring-item{ display:flex; flex-direction:column; align-items:center; gap:6px; }
.ring{ width:50px; height:50px; border-radius:50%; display:flex; align-items:center; justify-content:center; position:relative; }
.ring b{ font-size:.74rem; font-family: var(--font-display); }
.ring-label{ font-size:.62rem; color: var(--muted); font-weight:600; }

.plan-list{ display:flex; flex-direction:column; gap:10px; }
.plan-item{ display:flex; align-items:center; gap:10px; }
.plan-bar{ width:3px; height:30px; border-radius:3px; flex-shrink:0; }
.plan-time{ font-size:.68rem; font-weight:700; color: var(--muted); width:80px; flex-shrink:0; line-height:1.25; }
.plan-name{ font-size:.78rem; font-weight:600; line-height:1.3; }

/* ── Responsive layout — placé en dernier pour primer sur les règles de
   base ci-dessus (.rail-left, .rail-right, .tabbar, .main, .app) ────────── */
@media (max-width: 1180px){
  .app{ grid-template-columns: 84px 1fr; }
  .rail-right{ display:none; }
}
@media (max-width: 880px){
  .app{ grid-template-columns: 1fr; padding-bottom: 78px; }
  .rail-left{ display:none; }
  .tabbar{ display:flex; }
}

/* ═══ Écran CARTE (phase 2) ════════════════════════════════════════════════
   Écran central de la V2 : la trace, les spots, et la qualification au même
   endroit. C'est là que la cheffe de projet passe l'essentiel de son temps. */

.map-app{ display:grid; grid-template-columns: 84px 1fr var(--side-w, 360px);
  grid-template-rows: 1fr auto; height:100vh; overflow:hidden; }
.map-main{ position:relative; min-width:0; display:flex; flex-direction:column; }

/* Barre du haut */
.topbar{
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  padding: 14px 18px; border-bottom:1px solid var(--border); background: var(--surface);
  z-index: 20;
}
.topbar .tb-title{ font-family:var(--font-display); font-weight:700; font-size:1.3rem; letter-spacing:-.015em; text-transform:uppercase; line-height:1.1; }
.topbar .tb-sub{ font-size:.72rem; color:var(--muted); }
.topbar .spacer{ flex:1; }

.select, .btn{
  font-family: var(--font); font-size:.82rem; color: var(--text);
  background: var(--surface); border:1px solid var(--border-strong);
  border-radius: 10px; padding: 8px 12px; cursor:pointer;
}
.select:focus, .btn:focus{ outline:2px solid var(--blue); outline-offset:1px; }
.btn:hover{ background: var(--bg-elevated); }
.btn-primary{ background: var(--text); color: var(--bg); border-color: transparent; font-weight:600; }
.btn-primary:hover{ background: var(--text); opacity:.88; }
.btn-ghost{ background:transparent; border-color: var(--border); color: var(--muted); }
.btn[disabled]{ opacity:.45; cursor:not-allowed; }
.btn-icon{ padding:8px; width:36px; height:36px; display:inline-flex; align-items:center; justify-content:center; }
.btn-icon svg{ width:17px; height:17px; }

/* Carte */
#map{ flex:1; min-height:0; background: var(--bg-elevated); }
.map-hint{
  position:absolute; left:50%; transform:translateX(-50%); bottom:18px; z-index:15;
  background: var(--overlay); backdrop-filter: blur(16px) saturate(180%);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  border:1px solid var(--border-strong); border-radius:999px;
  padding:9px 16px; font-size:.78rem; font-weight:600; color: var(--text);
  box-shadow: var(--shadow-pop); display:none;
}
.map-hint.on{ display:block; }

.spot-pin{
  width:26px; height:26px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  font-family:var(--font-display); font-weight:800; font-size:.68rem; color:#fff;
  border:2px solid rgba(255,255,255,.92); box-shadow:0 2px 8px rgba(0,0,0,.45);
}
.spot-pin.sel{ outline:3px solid var(--blue); outline-offset:2px; }

/* Anneau des parcours : une part par course, à sa couleur. Le dégradé conique
   découpe le cercle en parts égales — trois parcours donnent trois tiers. */
.spot-ring{
  width:34px; height:34px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 2px 8px rgba(0,0,0,.3);
}
/* Rattaché à aucun parcours : contour tireté. Ces spots restent affichés quoi
   qu'il arrive, autant que ça se voie. */
.spot-ring.free{
  background:none; border:2px dashed var(--muted-2); box-shadow:none;
}
.spot-ring .spot-pin{ box-shadow:none; }

/* Combien de spots sont hors des parcours affichés. Posé au-dessus de la
   légende : masquer sans le dire ferait croire à une perte. */
.map-hidden{
  position:absolute; left:14px; bottom:calc(14px + var(--prof-open, 0px)); z-index:499;
  transform:translateY(-100%); margin-bottom:6px;
  padding:4px 9px; border-radius:var(--r-sm);
  background:var(--overlay); border:1px solid var(--border);
  backdrop-filter:blur(12px);
  font-family:var(--font); font-size:.68rem; font-weight:600; color:var(--muted);
  pointer-events:none; white-space:nowrap;
}
.map-hidden[hidden]{ display:none; }

/* Panneau latéral */
.side{
  border-left:1px solid var(--border); background: var(--surface);
  display:flex; flex-direction:column; min-height:0; z-index: 20;
}
.side-head{ padding:14px 16px 10px; border-bottom:1px solid var(--border); display:flex; align-items:center; gap:8px; }
.side-head h2{ font-family:var(--font-display); font-size:.9rem; font-weight:800; text-transform:uppercase; letter-spacing:.06em; margin:0; flex:1; }
.side-body{ overflow-y:auto; padding:12px 14px 20px; flex:1; -webkit-overflow-scrolling:touch; }

.spot-row{
  display:flex; align-items:center; gap:10px; width:100%; text-align:left;
  padding:9px 10px; border-radius:12px; border:1px solid transparent;
  background:transparent; cursor:pointer; color:var(--text); margin-bottom:2px;
}
.spot-row:hover{ background: var(--bg-elevated); }
.spot-row.sel{ background: var(--bg-elevated); border-color: var(--border-strong); }
.spot-row .num{
  width:24px; height:24px; border-radius:50%; flex-shrink:0; color:#fff;
  display:flex; align-items:center; justify-content:center; font-size:.64rem; font-weight:800;
}
.spot-row .txt{ flex:1; min-width:0; }
.spot-row .nm{ display:block; font-weight:600; font-size:.84rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.spot-row .sub{ display:block; font-size:.7rem; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin-top:1px; }

/* Formulaire d'édition */
.field{ margin-bottom:11px; }
.field label{ display:block; font-size:.68rem; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--muted); margin-bottom:5px; }
.field input, .field textarea, .field select{
  width:100%; font-family:var(--font); font-size:.85rem; color:var(--text);
  background: var(--bg-elevated); border:1px solid var(--border-strong);
  border-radius:10px; padding:9px 11px;
}
.field textarea{ resize:vertical; min-height:64px; }
.field input:focus, .field textarea:focus, .field select:focus{ outline:2px solid var(--blue); outline-offset:0; border-color:transparent; }
.field-row{ display:grid; grid-template-columns:1fr 1fr; gap:9px; }

.seg{ display:flex; gap:5px; }
.seg button{
  flex:1; padding:7px 4px; border-radius:9px; border:1px solid var(--border-strong);
  background:var(--bg-elevated); color:var(--muted); font-family:var(--font);
  font-size:.72rem; font-weight:700; cursor:pointer;
}
.seg button.on{ background: var(--text); color: var(--bg); border-color:transparent; }

.tags{ display:flex; flex-wrap:wrap; gap:5px; }
.tags button{
  padding:5px 10px; border-radius:999px; border:1px solid var(--border-strong);
  background:var(--bg-elevated); color:var(--muted); font-family:var(--font);
  font-size:.72rem; font-weight:600; cursor:pointer;
}
.tags button.on{ background: var(--text); border-color:transparent; color:var(--bg); }

.covered{ display:flex; flex-wrap:wrap; gap:5px; margin-top:4px; }
.covered .who{
  font-size:.7rem; font-weight:600; padding:3px 9px; border-radius:999px;
  background: var(--bg-elevated); color: var(--muted); border:1px solid var(--border);
}

.empty{ color:var(--muted); font-size:.82rem; text-align:center; padding:28px 10px; line-height:1.5; }

/* Toast */
#toast{
  position:fixed; left:50%; bottom:26px; transform:translate(-50%, 20px);
  background: var(--text); color: var(--bg); font-size:.84rem; font-weight:600;
  padding:11px 18px; border-radius:12px; box-shadow: var(--shadow-pop);
  opacity:0; pointer-events:none; transition:all .2s ease; z-index:9000; max-width:90vw;
}
#toast.on{ opacity:1; transform:translate(-50%, 0); }

/* Leaflet : neutraliser le blanc du popup en thème sombre */
.leaflet-popup-content-wrapper, .leaflet-popup-tip{ background: var(--surface); color: var(--text); box-shadow: var(--shadow-pop); }
.leaflet-popup-content{ font-family: var(--font); font-size:.82rem; margin:10px 12px; }
.leaflet-container{ font-family: var(--font); background: var(--bg-elevated); }
.leaflet-bar a{ background: var(--surface); color: var(--text); border-color: var(--border); }
.leaflet-bar a:hover{ background: var(--bg-elevated); }

@media (max-width: 1180px){ .map-app{ --side-w: 320px; } }
@media (max-width: 980px){
  .map-app{ grid-template-columns: 1fr; grid-template-rows: 1fr auto auto; height:100vh; }
  .map-app .rail-left{ display:none; }
  .side{
    border-left:none; border-top:1px solid var(--border);
    max-height: 46vh; border-radius:18px 18px 0 0; box-shadow: var(--shadow-pop);
  }
  .map-main{ padding-bottom:0; }
  .tabbar{ display:flex; position:static; }
}

/* ═══ Écran TIMELINE / affectations ════════════════════════════════════════ */
.tl-wrap{ flex:1; min-height:0; overflow:auto; background: var(--bg); -webkit-overflow-scrolling:touch; }
.tl-inner{ min-width: var(--tl-w, 2400px); position:relative; }

.tl-ruler{
  position:sticky; top:0; z-index:12; display:flex; height:30px;
  background: var(--surface); border-bottom:1px solid var(--border);
}
.tl-ruler .tl-gutter{ width:var(--tl-gut,150px); flex-shrink:0; position:sticky; left:0; z-index:2; background:var(--surface); border-right:1px solid var(--border); }
.tl-ruler .tl-scale{ position:relative; flex:1; }
.tl-tick{ position:absolute; top:0; bottom:0; border-left:1px solid var(--border); padding-left:5px; font-size:.66rem; color:var(--muted); line-height:30px; font-variant-numeric:tabular-nums; }

.tl-row{ display:flex; border-bottom:1px solid var(--border); min-height:62px; }
.tl-label{
  width:var(--tl-gut,150px); flex-shrink:0; position:sticky; left:0; z-index:8;
  background:var(--surface); border-right:1px solid var(--border);
  display:flex; align-items:center; gap:8px; padding:0 10px;
}
.tl-label .dot{ width:9px; height:9px; border-radius:50%; flex-shrink:0; }
.tl-label .nm{ flex:1; min-width:0; font-size:.82rem; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.tl-label .del{ background:none; border:none; color:var(--muted-2); cursor:pointer; padding:2px; line-height:0; }
.tl-label .del:hover{ color:var(--red); }

.tl-lane{ position:relative; flex:1; background-image:repeating-linear-gradient(to right, var(--border) 0 1px, transparent 1px var(--tl-hour,100px)); }
.tl-lane.hot{ background-color: color-mix(in srgb, var(--accent) 22%, transparent); }

.tl-block{
  position:absolute; top:7px; bottom:7px; border-radius:9px; padding:5px 8px;
  color:#fff; font-size:.72rem; font-weight:600; overflow:hidden; cursor:grab;
  box-shadow:0 2px 8px rgba(0,0,0,.25); min-width:26px; user-select:none;
  display:flex; flex-direction:column; justify-content:center; line-height:1.25;
}
.tl-block .bn{ display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.tl-block small{ display:block; opacity:.85; font-weight:500; font-size:.66rem; font-variant-numeric:tabular-nums; white-space:nowrap; overflow:hidden; }
.tl-block.drag{ opacity:.45; }

/* Poignées de durée, une par bord. Discrètes au repos — le bloc reste lisible —
   et elles n'apparaissent qu'au survol. Zone de saisie volontairement plus
   large que le trait visible : 4 px ne s'attrapent pas à la souris. */
.tl-handle{
  position:absolute; top:0; bottom:0; width:11px; z-index:2;
  cursor:col-resize; touch-action:none;
}
.tl-handle.l{ left:0; }
.tl-handle.r{ right:0; }
.tl-handle::after{
  content:''; position:absolute; top:5px; bottom:5px; width:3px; border-radius:2px;
  background:rgba(255,255,255,.85); opacity:0; transition:opacity .12s;
}
.tl-handle.l::after{ left:3px; }
.tl-handle.r::after{ right:3px; }
.tl-block:hover .tl-handle::after,
.tl-block.resizing .tl-handle::after{ opacity:1; }
/* Sur un bloc étroit, le texte passerait sous les poignées. */
.tl-block{ --tl-pad: 8px; }
.tl-block:hover{ cursor:grab; }
.tl-block.resizing{ cursor:col-resize; box-shadow:0 3px 14px rgba(0,0,0,.4); }
.tl-block.resizing .bn, .tl-block.resizing small{ pointer-events:none; }
.tl-ghost{ position:fixed; z-index:9500; pointer-events:none; opacity:.9; transform:translate(-50%,-50%); }

/* Compétences d'un cadreur, dans la gouttière du planning. Initiales
   groupées en une seule pastille : la gouttière fait 150 px et le nom doit
   rester lisible. Le détail est dans l'infobulle et dans la fiche. */
.tl-skills{
  flex:none; padding:1px 5px; border-radius:999px;
  background:var(--border); color:var(--muted);
  font-family:var(--font); font-size:.58rem; font-weight:800; letter-spacing:.04em;
}
.tl-label .nm[data-crewedit]{ cursor:pointer; }
.tl-label .nm[data-crewedit]:hover{ text-decoration:underline; }

/* Précision sous un champ de formulaire. */
.hint{ display:block; margin-top:5px; font-size:.68rem; color:var(--muted); }

/* ── Feuille du planning automatique ────────────────────────────────────────
   Tout ce qui permet de juger la proposition avant de l'accepter : ce qui est
   placé, ce qui ne l'est pas et pourquoi, et le temps passé par cadreur. */
.auto-wrap{ max-height:52vh; overflow-y:auto; margin:4px 0 10px; }
.auto-crew, .auto-rej{
  border:1px solid var(--border); border-radius:var(--r-md);
  margin-bottom:8px; overflow:hidden;
}
.auto-rej{ border-color:var(--border-strong); }
.auto-crew-head{
  display:flex; align-items:baseline; justify-content:space-between; gap:8px;
  padding:7px 10px; background:var(--surface-2); border-bottom:1px solid var(--border);
}
.auto-crew-head b{ font-size:.82rem; }
.auto-crew-head span{ font-size:.68rem; color:var(--muted); }

.auto-row{
  display:grid; grid-template-columns:46px 1fr auto; align-items:center; gap:8px;
  padding:6px 10px; font-size:.76rem;
}
.auto-row + .auto-row{ border-top:1px solid var(--border); }
.auto-t{ font-variant-numeric:tabular-nums; font-weight:700; color:var(--muted); font-size:.72rem; }
/* Un spot obligatoire non couvert est le seul vrai échec d'une proposition. */
.auto-t.ko{ color:var(--red); }
.auto-nm{ min-width:0; }
.auto-tr{ font-size:.68rem; color:var(--muted-2); white-space:nowrap; }

.auto-tag{
  display:inline-block; margin-left:4px; padding:0 5px; border-radius:999px;
  background:var(--border); color:var(--muted);
  font-style:normal; font-size:.6rem; font-weight:700;
}
.auto-tag.free{ background:rgba(10,132,255,.14); color:var(--blue); }
/* Heure déduite du nom du spot : c'est une supposition, elle doit se relire. */
.auto-tag.warn{ background:rgba(255,159,10,.18); color:#8A5A00; }

.auto-note{ margin:4px 0; font-size:.68rem; color:var(--muted); line-height:1.4; }

/* Repère discret sur une tuile qui porte une consigne : on doit voir d'un
   coup d'œil lesquels des créneaux ont des instructions. */
.tl-note{
  flex:none; margin-left:3px; font-style:normal; font-size:.66rem;
  opacity:.75;
}

/* ── Vue Briefing ───────────────────────────────────────────────────────────
   Carte en grand, bande horaire réduite : on balaie la journée devant
   l'équipe, et ce sont les lieux qu'on regarde, pas le tableau. */
/* Disposition propre au briefing : briefing à gauche, carte aux deux tiers à
   droite, timeline en bas sur toute la largeur.

   `display:contents` sur .map-main et .side fait remonter leurs enfants comme
   enfants directs de la grille : on recompose la page sans déplacer le DOM,
   donc sans toucher aux trois autres vues.

   Limité au grand écran : en dessous de 980 px la page passe en une seule
   colonne, et imposer trois colonnes y rendrait le briefing inutilisable. Mes
   sélecteurs sont plus spécifiques que `.plan-app`, ils gagneraient même dans
   la media query — d'où cette borne explicite. */
@media (min-width: 981px) {
  .plan-app[data-view="brief"]{
    grid-template-columns:84px minmax(0,1fr) minmax(0,2fr);
    grid-template-rows:auto minmax(0,1fr) auto;
    grid-template-areas:
      "rail  top    top"
      "rail  brief  map"
      "rail  tl     tl";
  }
  .plan-app[data-view="brief"] > .rail-left{ grid-area:rail; }
  .plan-app[data-view="brief"] > .map-main,
  .plan-app[data-view="brief"] > .side{ display:contents; }
  .plan-app[data-view="brief"] .topbar{ grid-area:top; }
  .plan-app[data-view="brief"] #mod-brief{
    grid-area:brief; min-width:0; overflow-y:auto;
    border-bottom:0; border-right:1px solid var(--border);
  }
  .plan-app[data-view="brief"] #mod-map{
    grid-area:map; min-width:0; display:flex; flex-direction:column; border-bottom:0;
  }
  .plan-app[data-view="brief"] #plan-map{ flex:1; height:auto; min-height:0; }
  /* La timeline en bas : hauteur dictée par son contenu, et jamais de
     défilement horizontal — c'est tout l'intérêt du zoom ajusté. */
  .plan-app[data-view="brief"] .tl-wrap{
    grid-area:tl; flex:none; max-height:40vh;
    overflow-x:hidden; border-top:1px solid var(--border);
  }
}
/* Rien à redimensionner ni à masquer ici : la disposition est imposée. */
.plan-app[data-view="brief"] .side-grip,
.plan-app[data-view="brief"] .map-grip,
.plan-app[data-view="brief"] #mod-map .legend{ display:none; }

.plan-app[data-view="brief"] .tl-row{ min-height:40px; }
.plan-app[data-view="brief"] .tl-block{ top:4px; bottom:4px; font-size:.66rem; cursor:default; }
/* En briefing on lit, on ne déplace pas : les poignées de redimensionnement
   n'ont rien à faire là, et un glissement accidentel gâcherait le planning. */
.plan-app[data-view="brief"] .tl-handle{ display:none; }
.plan-app[data-view="brief"] .tl-wrap{ cursor:crosshair; }

/* Le curseur horaire. `pointer-events:none` est indispensable : sinon il
   intercepte le survol qu'il est censé suivre. */
.bf-cursor{
  position:absolute; top:0; bottom:0; width:0; z-index:11;
  border-left:2px solid var(--blue); pointer-events:none;
}
.bf-cursor.pinned{ border-left-color:var(--orange); }
.bf-cursor span{
  position:absolute; top:4px; left:4px; padding:1px 6px; border-radius:999px;
  background:var(--blue); color:#fff;
  font-family:var(--font); font-size:.64rem; font-weight:800;
  font-variant-numeric:tabular-nums; white-space:nowrap;
}
.bf-cursor.pinned span{ background:var(--orange); color:var(--accent-ink); }

.bf-row{
  display:grid; grid-template-columns:96px 1fr; gap:10px;
  padding:9px 14px; border-left:3px solid var(--bf,var(--border));
}
.bf-row + .bf-row{ border-top:1px solid var(--border); }
.bf-who{
  font-family:var(--font); font-size:.78rem; font-weight:700; color:var(--bf,var(--text));
  overflow:hidden; text-overflow:ellipsis;
}
.bf-what b{ display:block; font-size:.86rem; }
.bf-when{ display:block; font-size:.68rem; color:var(--muted); font-variant-numeric:tabular-nums; }
/* La consigne du créneau : c'est elle qu'on lit à voix haute en briefing. */
.bf-note{
  display:block; margin-top:5px; padding:6px 8px; border-radius:var(--r-sm);
  background:var(--bg-elevated); font-size:.76rem; line-height:1.4; white-space:pre-wrap;
}

/* Spot désigné par le survol d'une tuile : agrandi, cerné, et les autres
   estompés. Sans l'estompage, « lequel est-ce ? » reste sans réponse sur une
   carte qui porte vingt épingles. */
.pin-hot{
  transform:scale(1.45);
  box-shadow:0 0 0 3px var(--surface), 0 0 0 5px var(--blue), 0 3px 10px rgba(20,20,18,.4);
  z-index:5;
}
#plan-map.has-hot .pin:not(.pin-hot){ opacity:.32; }
.pin{ transition:transform .12s ease, opacity .12s ease; }

/* ── Moments du planning ────────────────────────────────────────────────────
   Un créneau qui n'est pas un spot : envoi des rushes, pause, brief. Hachuré
   et en pointillé pour qu'on ne le confonde jamais avec une affectation. */
.tl-moment{
  position:absolute; top:7px; bottom:7px; border-radius:9px;
  display:flex; align-items:center; gap:5px; padding:0 7px;
  border:1.5px dashed var(--accent); cursor:pointer; overflow:hidden;
  background:repeating-linear-gradient(135deg,
    color-mix(in srgb, var(--accent) 22%, transparent) 0 6px,
    transparent 6px 12px);
  color:var(--text); font-family:var(--font); font-size:.7rem; font-weight:700;
  white-space:nowrap; z-index:3;
}
.tl-moment:hover{ border-style:solid; }
/* Sans cadreur désigné : il vaut pour toute l'équipe, et apparaît dans chaque
   ligne. Plus discret, pour ne pas écraser les affectations. */
.tl-moment.is-all{ border-color:var(--muted-2); opacity:.85; }
.tm-ico{ flex:none; font-size:.82rem; line-height:1; }
.tm-lab{ overflow:hidden; text-overflow:ellipsis; }

.pool-item{ cursor:grab; }
/* Spots déjà placés ce jour-là : gardés dans la réserve pour pouvoir
   programmer un second passage, mais en retrait — ils ne sont plus du travail
   restant, et le compte du titre ne les compte pas. */
.pool-sep{
  padding:10px 10px 4px; font-family:var(--font); font-size:.64rem;
  font-weight:700; letter-spacing:.03em; text-transform:uppercase; color:var(--muted-2);
}
.pool-item.is-placed{ opacity:.58; }
.pool-item.is-placed:hover{ opacity:1; }
.pool-n{
  margin-left:auto; flex:none; padding:1px 6px; border-radius:999px;
  background:var(--border); color:var(--muted);
  font-family:var(--font); font-size:.64rem; font-weight:800;
}
.pool-item:active{ cursor:grabbing; }

.tl-empty-row{ display:flex; align-items:center; justify-content:center; color:var(--muted); font-size:.8rem; padding:26px; }

/* Les jours prennent leur propre rangée sous la barre : avec 7 jours, le zoom
   et les actions, rien ne tient sur une seule ligne. Ils défilent plutôt que
   de se replier, sinon la barre grandit en hauteur de façon imprévisible. */
/* Rangee 1 : identite + actions. Rangee 2 : les controles d'affichage
   (jours et zoom). Le ::after force le retour a la ligne entre les deux. */
.topbar::after{ content:''; flex-basis:100%; height:0; order:9; }
.daytabs{
  display:flex; gap:5px; flex-wrap:nowrap; overflow-x:auto;
  order:10; flex:0 1 auto; min-width:0; scrollbar-width:none; padding-top:2px;
}
/* Rangée 2, de gauche à droite : les jours, puis les filtres, puis le zoom
   seul à droite. Les filtres poussent le zoom avec `margin-right:auto` — c'est
   l'espace flexible, sans élément vide pour le fabriquer.
   Ils sont descendus ici parce qu'en rangée 1 ils voisinaient les actions
   (Republier, + Cadreur) et semblaient en faire partie. */
.topbar .filters-bar{ order:11; margin-right:auto; flex-shrink:0; }
.topbar .zoom{ order:12; flex-shrink:0; }
/* Le <select> prend sinon la largeur de son option la plus longue
   (« Trail du Saint-Jacques by UTMB 2026 ») et fait deborder la barre. */
.topbar .select{ max-width:190px; text-overflow:ellipsis; }
.daytabs::-webkit-scrollbar{ display:none; }
.daytab{
  padding:6px 12px; border-radius:var(--r-md); border:1px solid var(--border-strong);
  background:var(--surface); color:var(--muted); font-family:var(--font);
  font-size:.76rem; font-weight:600; cursor:pointer;
  white-space:nowrap; flex-shrink:0;
}
.daytab.on{ background:var(--text); color:var(--bg); border-color:transparent; }

/* Modale légère (édition d'un créneau, import) */
.sheet-bg{ position:fixed; inset:0; background:rgba(0,0,0,.45); z-index:9600; display:none; align-items:center; justify-content:center; padding:20px; }
.sheet-bg.on{ display:flex; }
.sheet{
  background:var(--surface); border:1px solid var(--border); border-radius:18px;
  box-shadow:var(--shadow-pop); width:100%; max-width:440px; max-height:86vh;
  overflow-y:auto; padding:20px;
}
.sheet h3{ font-family:var(--font-display); font-size:1.05rem; font-weight:800; margin:0 0 14px; }
.sheet .row{ display:flex; gap:8px; margin-top:16px; }
.sheet .row .btn{ flex:1; }

.drop{
  border:1.5px dashed var(--border-strong); border-radius:14px; padding:20px 14px;
  text-align:center; color:var(--muted); font-size:.82rem; cursor:pointer; background:var(--bg-elevated);
}
.drop.hot{ border-color:var(--blue); color:var(--text); }
.prev-row{ display:flex; gap:8px; font-size:.76rem; padding:5px 0; border-bottom:1px solid var(--border); }
.prev-row b{ flex:1; font-weight:600; }
.prev-row span{ color:var(--muted); font-variant-numeric:tabular-nums; }

/* Page d'accueil : deux colonnes seulement (pas de panneau droit). En ligne
   dans le HTML, ce réglage aurait primé sur la media query mobile et la page
   serait tombée dans la colonne étroite du rail une fois celui-ci masqué. */
.app-home{ grid-template-columns:84px 1fr; }
@media (max-width:880px){ .app-home{ grid-template-columns:1fr; } }

/* ═══ Page d'accueil ═══════════════════════════════════════════════════════
   Grammaire : blanc cassé chaud, le noir comme couleur d'interface, UN seul
   accent (le chartreuse) réservé à ce qui est en cours, rayons resserrés,
   la donnée comme matière graphique (frise de saison, barres hachurées). */

.home{ width:100%; max-width:1240px; margin:0 auto; padding:30px 28px 70px; }
@media (max-width:620px){ .home{ padding:18px 14px 40px; } }

.home-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-bottom:24px; }
.home-title{
  font-family:var(--font-display); font-size:2.6rem; font-weight:800;
  letter-spacing:-.035em; margin:0; line-height:.95; text-transform:uppercase;
}
.home-sub{ color:var(--muted); font-size:.8rem; margin-top:7px; font-variant-numeric:tabular-nums; }

/* Bouton noir : le primaire n'a pas besoin de la couleur de marque, elle est
   réservée au signal « en cours ». */
.btn-dark{
  background:var(--text); color:var(--bg); border:none; border-radius:var(--r-md);
  padding:10px 16px; font-family:var(--font); font-size:.83rem; font-weight:600; cursor:pointer;
}
.btn-dark:hover{ opacity:.88; background:var(--text); }

/* ── Frise de saison : l'année en bandeau, les événements à leur date ────── */
.season{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg);
  padding:16px 18px 12px; margin-bottom:22px;
}
.season-head{ display:flex; align-items:baseline; justify-content:space-between; margin-bottom:14px; }
.season-head .t{ font-size:.66rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); }
.season-head .y{ font-family:var(--font-display); font-weight:800; font-size:1.1rem; letter-spacing:-.01em; }
.season-track{ position:relative; height:44px; }
.season-months{ position:absolute; inset:0; display:grid; grid-template-columns:repeat(12,1fr); }
.season-months span{
  border-left:1px solid var(--border); font-size:.58rem; color:var(--muted-2);
  padding:0 0 0 4px; text-transform:uppercase; letter-spacing:.04em;
}
.season-bar{
  position:absolute; top:18px; height:15px; border-radius:3px; background:var(--muted-2);
  cursor:pointer; min-width:4px; transition:transform .12s;
}
.season-bar:hover{ transform:scaleY(1.35); }
.season-bar.is-current{ background:var(--accent); box-shadow:0 0 0 1px rgba(20,20,18,.2); }
.season-bar.is-future{ background:var(--text); }
.season-today{ position:absolute; top:10px; bottom:0; width:1.5px; background:var(--red); }
.season-today::after{
  content:'AUJ.'; position:absolute; top:-11px; left:-11px; font-size:.5rem;
  font-weight:800; color:var(--red); letter-spacing:.06em;
}

/* ── Filtres ─────────────────────────────────────────────────────────────── */
.filters{ display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin-bottom:8px; }
.search{ position:relative; flex:1; min-width:210px; }
.search input{
  width:100%; font-family:var(--font); font-size:.85rem; color:var(--text);
  background:var(--surface); border:1px solid var(--border-strong);
  border-radius:var(--r-md); padding:9px 12px 9px 34px;
}
.search input:focus{ outline:none; border-color:var(--text); }
.search svg{ position:absolute; left:11px; top:50%; transform:translateY(-50%); width:14px; height:14px; color:var(--muted-2); }

/* Contrôle segmenté — remplace les titres de groupe empilés */
.seg-tabs{ display:flex; gap:2px; background:var(--bg-elevated); border:1px solid var(--border); border-radius:var(--r-md); padding:3px; margin:18px 0 16px; width:fit-content; max-width:100%; overflow-x:auto; }
.seg-tabs button{
  border:none; background:transparent; color:var(--muted); cursor:pointer;
  font-family:var(--font); font-size:.78rem; font-weight:600; padding:7px 14px;
  border-radius:calc(var(--r-md) - 3px); white-space:nowrap;
}
.seg-tabs button.on{ background:var(--surface); color:var(--text); box-shadow:0 1px 2px rgba(20,20,18,.09); }
.seg-tabs button .c{ color:var(--muted-2); font-variant-numeric:tabular-nums; margin-left:5px; }

/* ── Carte d'événement ───────────────────────────────────────────────────── */
.ev-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(340px,1fr)); gap:12px; }

.ev-card{
  position:relative; background:var(--surface); border:1px solid var(--border);
  border-radius:var(--r-lg); padding:15px 16px 13px; transition:border-color .14s;
}
.ev-card:hover{ border-color:var(--border-strong); }
.ev-card.is-current{ border-color:var(--text); }
.ev-card .ec-open{
  position:absolute; top:13px; right:13px; color:var(--muted-2);
  opacity:0; transition:opacity .14s; line-height:0;
}
.ev-card:hover .ec-open{ opacity:1; }

.ec-head{ display:flex; align-items:flex-start; gap:11px; margin-bottom:12px; }
.ec-mark{
  width:34px; height:34px; border-radius:9px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-display); font-weight:800; font-size:.8rem; letter-spacing:-.02em;
  background:var(--bg-elevated); color:var(--muted); border:1px solid var(--border);
}
.ev-card.is-current .ec-mark{ background:var(--accent); color:#16160F; border-color:transparent; }
.ec-titles{ flex:1; min-width:0; padding-right:18px; }
/* display:block indispensable : ce sont des <span>, ils resteraient sur la
   même ligne que le titre. */
.ec-name{
  display:block; font-family:var(--font-display); font-weight:700; font-size:1.18rem;
  letter-spacing:-.012em; line-height:1.15; text-transform:uppercase;
}
.ec-when{ display:block; font-size:.73rem; color:var(--muted); margin-top:4px; font-variant-numeric:tabular-nums; line-height:1.45; }
.ec-when .warn{ color:var(--orange); cursor:pointer; border-bottom:1px dotted currentColor; }

/* Tag d'état : monochrome par défaut. Une seule couleur dans la page, pour
   « en course » — sinon la couleur ne signifie plus rien. */
.tag{
  display:inline-flex; align-items:center; gap:5px; flex-shrink:0;
  font-size:.62rem; font-weight:700; letter-spacing:.07em; text-transform:uppercase;
  padding:4px 7px; border-radius:var(--r-sm); border:1px solid var(--border-strong);
  color:var(--muted); background:transparent; white-space:nowrap;
}
.tag-ready{ color:var(--text); border-color:var(--text); }
.tag-live{ background:var(--accent); border-color:transparent; color:#16160F; }
.tag-live .dot-live{ background:#16160F; }

/* Progression : hachures pour la part restante (cf. référence « 31 pending ») */
.ec-prog{ margin:0 0 11px; }
.ec-prog-top{ display:flex; justify-content:space-between; align-items:baseline; font-size:.7rem; margin-bottom:5px; }
.ec-prog-top b{ font-family:var(--font-display); font-size:.92rem; font-weight:700; }
.ec-prog-top span{ color:var(--muted); }
.ec-prog-track{
  height:7px; border-radius:2px; overflow:hidden;
  background:repeating-linear-gradient(-45deg,
    var(--border-strong) 0 2px, transparent 2px 5px), var(--bg-elevated);
}
.ec-prog-fill{ height:100%; background:var(--text); border-radius:2px; }
.ev-card.is-current .ec-prog-fill{ background:var(--accent); }

.ec-foot{
  display:flex; align-items:center; gap:14px; padding-top:11px;
  border-top:1px solid var(--border); font-size:.73rem; color:var(--muted);
}
.ec-foot b{ color:var(--text); font-weight:600; font-variant-numeric:tabular-nums; }
.ec-foot .who{ margin-left:auto; display:inline-flex; align-items:center; gap:6px; color:var(--text); }
.ec-foot .who i{
  width:19px; height:19px; border-radius:50%; background:var(--bg-elevated);
  border:1px solid var(--border); display:inline-flex; align-items:center; justify-content:center;
  font-style:normal; font-size:.56rem; font-weight:800; color:var(--muted);
}

.ec-links{ display:flex; gap:14px; margin-top:11px; }
.ec-links a, .ec-links button{
  background:none; border:none; padding:0; cursor:pointer; font-family:var(--font);
  font-size:.73rem; font-weight:600; color:var(--muted); border-bottom:1px solid transparent;
}
.ec-links a:hover, .ec-links button:hover{ color:var(--text); border-bottom-color:var(--text); }

/* ── Reprendre ───────────────────────────────────────────────────────────── */
.resume{
  display:flex; align-items:center; gap:14px; width:100%; text-align:left;
  background:var(--text); color:var(--bg); border:none; border-radius:var(--r-lg);
  padding:15px 18px; margin-bottom:20px; cursor:pointer;
}
.resume:hover{ opacity:.92; background:var(--text); }
.resume .rz-lab{ font-size:.6rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase; opacity:.55; }
.resume .rz-name{ font-family:var(--font-display); font-weight:700; font-size:1.25rem; text-transform:uppercase; letter-spacing:-.015em; margin-top:3px; }
.resume .rz-when{ font-size:.72rem; opacity:.6; margin-top:2px; }
.resume .rz-go{ margin-left:auto; flex-shrink:0; opacity:.8; }


/* ── Timeline : zoom et largeurs ajustables ───────────────────────────────── */
.zoom{ display:flex; align-items:center; border:1px solid var(--border-strong); border-radius:var(--r-md); overflow:hidden; }
.zoom button{
  border:none; background:var(--surface); color:var(--muted); cursor:pointer;
  font-family:var(--font); font-size:.95rem; line-height:1; padding:8px 11px;
}
.zoom button:hover{ background:var(--bg-elevated); color:var(--text); }
.zoom .val{
  font-size:.72rem; font-weight:700; color:var(--text); padding:0 9px;
  font-variant-numeric:tabular-nums; min-width:44px; text-align:center;
  border-left:1px solid var(--border); border-right:1px solid var(--border);
}

/* Poignée de redimensionnement de la colonne des cadreurs */
.tl-grip{
  position:absolute; top:0; bottom:0; right:-3px; width:7px; cursor:col-resize;
  z-index:9;
}
.tl-grip::after{
  content:''; position:absolute; inset:0 3px; background:transparent; transition:background .12s;
}
.tl-grip:hover::after, .tl-grip.on::after{ background:var(--accent); }
.tl-label{ position:sticky; }
body.col-resizing{ cursor:col-resize; user-select:none; }

/* ═══ Planning modulaire : tableau · carte · analyse ═══════════════════════ */
/* --side-w porte la largeur du panneau : chaque vue a sa valeur par defaut,
   mais un glissement de la poignee pose la valeur en inline, qui prime. */
.plan-app[data-view="table"]{ --side-w:340px; }
.plan-app[data-view="map"]  { --side-w:400px; }
.plan-app[data-view="full"] { --side-w:430px; }
.plan-app{ grid-template-columns:84px 1fr var(--side-w,360px); }
@media (max-width:1180px){ .plan-app{ grid-template-columns:84px 1fr minmax(0, var(--side-w,320px)); } }
@media (max-width:980px){ .plan-app{ grid-template-columns:1fr; } }

.plan-app .side{ position:relative; }
/* Poignee gauche du panneau : on tire vers la gauche pour elargir. */
/* Poignee de largeur du panneau. Meme traitement que celle de la bande
   cinema : reperes dessines a l'interieur du panneau, jamais dans un
   debordement sur la carte (Leaflet monte a z-index 400 et passerait devant),
   et une poignee visible au repos plutot qu'un trait d'un pixel au survol.
   Largeur contenue dans le padding du panneau, pour ne rien intercepter. */
.side-grip{ position:absolute; left:0; top:0; bottom:0; width:9px; cursor:col-resize; z-index:30; }
.side-grip::after{                      /* filet sur toute la hauteur, au survol */
  content:''; position:absolute; left:0; top:0; bottom:0; width:3px;
  background:transparent; transition:background .12s;
}
.side-grip:hover::after, .side-grip.on::after{ background:var(--accent); }
.side-grip::before{                     /* poignee toujours visible */
  content:''; position:absolute; left:2px; top:50%; transform:translateY(-50%);
  width:5px; height:58px; border-radius:3px; background:var(--muted-2);
  transition:background .12s, height .12s;
}
.side-grip:hover::before, .side-grip.on::before{ background:var(--accent); height:76px; }

/* Poignee sous la carte. */
.map-grip{ position:relative; height:8px; cursor:row-resize; }
.map-grip::after{ content:''; position:absolute; inset:3px 10px; border-radius:2px; transition:background .12s; }
.map-grip:hover::after, .map-grip.on::after{ background:var(--accent); }
body.row-resizing{ cursor:row-resize; user-select:none; }

.side-mod{ border-bottom:1px solid var(--border); }
.side-mod:last-child{ border-bottom:none; }
.side-mod-head{
  display:flex; align-items:center; gap:8px; padding:11px 14px 9px;
  font-size:.66rem; font-weight:800; letter-spacing:.09em; text-transform:uppercase; color:var(--muted);
}
.side-mod-head .n{ color:var(--muted-2); font-variant-numeric:tabular-nums; }
.side-mod-body{ padding:0 12px 12px; }

#plan-map{ height:var(--map-h,270px); background:var(--bg-elevated); }

/* Épingle carte : pleine = affectée ce jour-là, creuse = à placer. */
.pin{
  width:24px; height:24px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  font-family:var(--font-display); font-weight:800; font-size:.62rem; color:#fff;
  border:2px solid rgba(255,255,255,.9); box-shadow:0 1px 5px rgba(0,0,0,.45);
  cursor:grab; user-select:none;
}
.pin.free{
  background:var(--surface) !important; color:var(--muted);
  border:2px dashed var(--muted-2); box-shadow:none;
}
.pin.multi::after{
  content:''; position:absolute; inset:-4px; border-radius:50%;
  border:1.5px solid currentColor; opacity:.45;
}

.legend{ display:flex; gap:14px; padding:8px 14px 0; font-size:.68rem; color:var(--muted); }
.legend i{ width:11px; height:11px; border-radius:50%; display:inline-block; margin-right:5px; vertical-align:-1px; }
.legend .l-on i{ background:var(--text); }
.legend .l-off i{ border:1.5px dashed var(--muted-2); }

/* ── Analyse ─────────────────────────────────────────────────────────────── */
.an-row{ display:flex; align-items:center; gap:9px; padding:6px 0; font-size:.76rem; }
.an-row .nm{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.an-row .bar{ width:74px; height:6px; border-radius:2px; background:var(--bg-elevated); overflow:hidden; flex-shrink:0; }
.an-row .bar i{ display:block; height:100%; border-radius:2px; }
.an-row .v{ font-variant-numeric:tabular-nums; color:var(--muted); min-width:52px; text-align:right; font-size:.72rem; }

.an-issue{
  display:block; width:100%; text-align:left; background:transparent; cursor:pointer;
  border:1px solid var(--border-strong); border-left:3px solid var(--orange);
  border-radius:var(--r-sm); padding:8px 10px; margin-bottom:6px; font-family:var(--font);
}
.an-issue:hover{ border-color:var(--orange); }
.an-issue.hard{ border-left-color:var(--red); }
.an-issue .t{ font-size:.74rem; font-weight:600; color:var(--text); }
.an-issue .d{ font-size:.69rem; color:var(--muted); margin-top:2px; line-height:1.4; }
.an-ok{ font-size:.76rem; color:var(--muted); padding:6px 0; }

.tl-block.flash{ outline:2px solid var(--text); outline-offset:2px; }

/* ── Bloc LiveTrail du formulaire événement ─────────────────────────────── */
.lt-opt{ font-weight:600; text-transform:none; letter-spacing:0; color:var(--muted-2); }
.lt-box:not(:empty){ margin-top:8px; }
.lt-msg{ font-size:.74rem; color:var(--muted); line-height:1.45; }

.lt-found{
  display:flex; align-items:center; gap:8px;
  padding:7px 10px; border:1px solid var(--border-strong); border-bottom:0;
  border-radius:10px 10px 0 0; background:var(--bg-elevated);
}
.lt-base{ font-size:.76rem; font-weight:700; color:var(--text); }
.lt-n{ font-size:.7rem; color:var(--muted); }
.lt-all{
  margin-left:auto; border:0; background:none; cursor:pointer; padding:2px 0;
  font-family:var(--font); font-size:.7rem; font-weight:700; color:var(--blue);
}

.lt-courses{
  max-height:172px; overflow-y:auto;
  border:1px solid var(--border-strong); border-radius:0 0 10px 10px;
}
.lt-course{
  display:flex; align-items:center; gap:8px; cursor:pointer;
  padding:6px 10px; font-size:.79rem; color:var(--text);
  border-top:1px solid var(--border);
}
.lt-course:first-child{ border-top:0; }
.lt-course:hover{ background:var(--bg-elevated); }
.lt-course input{ width:auto; margin:0; accent-color:var(--blue); }

.lt-note{ margin-top:6px; font-size:.68rem; color:var(--muted); line-height:1.45; }

/* ── Infobulle de survol de la trace ────────────────────────────────────── */
/* Elle donne l'heure de passage estimée là où pointe la souris : premier
   coureur (élite) → dernier (masse), interpolés entre points de contrôle. */
.leaflet-tooltip.trace-tip{
  background:var(--surface); color:var(--text);
  border:1px solid var(--border-strong); border-radius:var(--r-md);
  box-shadow:var(--shadow-pop); padding:7px 10px;
  font-family:var(--font); font-size:.76rem; line-height:1.5; white-space:nowrap;
}
.leaflet-tooltip.trace-tip::before{ display:none; }   /* pas de flèche : le tooltip suit le curseur */
.trace-tip b{ font-weight:700; }

.tt-first{ color:var(--green); font-weight:700; font-variant-numeric:tabular-nums; }
.tt-last{ color:var(--orange); font-weight:700; font-variant-numeric:tabular-nums; }
.tt-arrow{ color:var(--muted-2); margin:0 6px; }
.tt-day{ color:var(--muted); font-weight:600; font-size:.92em; }
.tt-none{ color:var(--muted); }
.tt-hint{ color:var(--muted); font-size:.92em; }

/* ── Légende des parcours sur la carte ──────────────────────────────────── */
/* Une couleur par course : sur un événement multi-courses les tracés se
   superposent, le monochrome les rendait indistinguables. */
.map-legend{
  position:absolute; left:14px; bottom:calc(14px + var(--prof-open, 0px)); z-index:500;
  display:flex; flex-wrap:wrap; gap:3px 5px; max-width:min(54ch, calc(100% - 28px));
  padding:7px 8px; border-radius:var(--r-md);
  background:var(--overlay); border:1px solid var(--border);
  box-shadow:var(--shadow-card); backdrop-filter:blur(12px);
}
.map-legend[hidden]{ display:none; }

/* Chaque entrée est un interrupteur : sur un événement à quinze parcours,
   les tracés se recouvrent et on n'en regarde qu'un ou deux à la fois. */
.ml-item{
  display:inline-flex; align-items:center; gap:6px; white-space:nowrap;
  padding:3px 7px; border:0; border-radius:var(--r-sm);
  background:none; cursor:pointer;
  font-family:var(--font); font-size:.72rem; font-weight:600; color:var(--text);
  transition:background .12s, opacity .12s;
}
.ml-item:hover{ background:var(--bg-elevated); }
.ml-item i{ width:14px; height:3px; border-radius:2px; flex:none; transition:opacity .12s; }

/* Chaque parcours porte deux gestes : cliquer le nom ouvre son profil,
   cliquer l'œil l'affiche ou le masque. */
.ml-cell{ display:inline-flex; align-items:center; border-radius:var(--r-sm); }
.ml-cell.is-sel{ background:var(--bg-elevated); box-shadow:inset 0 0 0 1px var(--border-strong); }
.ml-cell.is-off{ opacity:.42; }
.ml-cell.is-off i{ opacity:.3; }
.ml-cell.is-off:hover{ opacity:.72; }
.ml-cell.is-sel .ml-item{ font-weight:700; }

.ml-eye{
  display:inline-flex; align-items:center; justify-content:center; flex:none;
  width:22px; height:20px; padding:0; border:0; border-radius:var(--r-sm);
  background:none; color:var(--muted-2); cursor:pointer;
}

/* Bouton de style d'un parcours, dans la légende de la carte. */
.ml-style{
  display:flex; align-items:center; justify-content:center;
  width:22px; height:22px; padding:0; border:0; border-radius:var(--r-sm);
  background:none; color:var(--muted-2); cursor:pointer;
}
.ml-style svg{ width:13px; height:13px; }
.ml-style:hover{ background:var(--bg-elevated); color:var(--text); }

/* Nuancier de la feuille de style : la palette de l'app, plus un sélecteur
   libre pour les cas où l'organisateur impose une couleur. */
.sw-grid{ display:grid; grid-template-columns:repeat(10, 1fr); gap:5px; }
.sw{
  height:26px; border:2px solid transparent; border-radius:var(--r-sm);
  cursor:pointer; padding:0;
}
.sw.on{ border-color:var(--text); box-shadow:0 0 0 2px var(--surface) inset; }
.ml-eye svg{ width:14px; height:14px; }
.ml-eye:hover{ background:var(--bg-elevated); color:var(--text); }

.ml-all{
  margin-left:2px; padding:3px 7px; border:0; border-radius:var(--r-sm);
  background:none; cursor:pointer;
  font-family:var(--font); font-size:.68rem; font-weight:700; color:var(--blue);
}
.ml-all:hover{ background:var(--bg-elevated); }

@media (max-width: 820px){
  .map-legend{ left:10px; bottom:10px; max-height:38vh; overflow-y:auto; }
  .ml-item{ font-size:.68rem; }
}

/* ── Panneau : onglets Spots / Repérage ─────────────────────────────────── */
/* Les POI de repérage sont des candidats, pas des spots. Les deux listes
   restent donc séparées, et les cartes n'ont rien du gabarit d'un spot. */
.side-head h2:has(.sd-tab){ display:flex; gap:3px; }
.sd-tab{
  border:0; background:none; cursor:pointer; padding:3px 8px; border-radius:var(--r-sm);
  font-family:var(--font-display); font-size:.9rem; font-weight:800;
  letter-spacing:.02em; text-transform:uppercase; color:var(--muted-2);
}
.sd-tab:hover{ color:var(--muted); }
.sd-tab.on{ color:var(--text); background:var(--bg-elevated); }
.sd-tab .c{ font-family:var(--font); font-size:.72rem; font-weight:700;
  color:var(--muted-2); margin-left:4px; font-variant-numeric:tabular-nums; }
.sd-tab.on .c{ color:var(--muted); }

/* ── Carte d'un point de repérage ───────────────────────────────────────── */
.poi-card{
  display:flex; gap:10px; align-items:flex-start;
  padding:9px; margin-bottom:7px; cursor:pointer;
  border:1px solid var(--border); border-left:3px solid var(--orange);
  border-radius:var(--r-md); background:var(--surface);
  transition:background .12s, border-color .12s;
}
.poi-card:hover{ background:var(--bg-elevated); }
.poi-card.sel{ border-color:var(--blue); border-left-color:var(--blue); }

.poi-thumb{ width:58px; height:58px; flex:none; border-radius:var(--r-sm); overflow:hidden; background:var(--bg-elevated); }
.poi-thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.poi-thumb span{ display:block; width:100%; height:100%; opacity:.22; }

.poi-body{ min-width:0; flex:1; }
.poi-name{ font-size:.82rem; font-weight:700; color:var(--text); line-height:1.3; }
.poi-meta{
  display:flex; flex-wrap:wrap; align-items:center; gap:3px 8px;
  margin-top:3px; font-size:.7rem; color:var(--muted);
}
.poi-cat{ font-weight:700; text-transform:uppercase; letter-spacing:.04em; font-size:.65rem; }
.poi-dots{ display:inline-flex; gap:2px; }
.poi-dots i{ width:5px; height:5px; border-radius:50%; background:var(--border-strong); }
.poi-dots i.on{ background:var(--orange); }

.poi-extract:not(:empty){ margin-top:5px; font-size:.72rem; color:var(--muted); line-height:1.45; }
.poi-actions{ display:flex; align-items:center; gap:10px; margin-top:7px; }
.btn.btn-sm{ padding:4px 10px; font-size:.72rem; }
.poi-done{ font-size:.72rem; font-weight:700; color:var(--green); }
.poi-wiki{ font-size:.72rem; font-weight:600; color:var(--blue); text-decoration:none; }
.poi-wiki:hover{ text-decoration:underline; }

/* ── Vue au sol (Street View embarqué) ──────────────────────────────────── */
.sv-host:not(:empty){ margin-top:8px; }
.sv-wrap{ border:1px solid var(--border-strong); border-radius:var(--r-md); overflow:hidden; background:var(--bg-elevated); }
.sv-frame{ display:block; width:100%; height:190px; border:0; }
.sv-foot{
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  padding:5px 8px; font-size:.66rem; color:var(--muted);
  border-top:1px solid var(--border);
}
.sv-foot a{ color:var(--blue); font-weight:600; text-decoration:none; white-space:nowrap; }
.sv-foot a:hover{ text-decoration:underline; }

.poi-sv-btn{
  border:1px solid var(--border-strong); background:var(--bg-elevated); cursor:pointer;
  padding:3px 9px; border-radius:var(--r-sm);
  font-family:var(--font); font-size:.7rem; font-weight:600; color:var(--muted);
}
.poi-sv-btn:hover{ color:var(--text); }
.poi-sv-btn.on{ background:var(--text); color:var(--bg); border-color:transparent; }

/* ── Parcours couverts par un spot ──────────────────────────────────────── */
/* Un lieu sert souvent plusieurs courses, à des kilomètres et des heures
   différents. Chaque ligne porte les siens. */
.sc-wait{ font-size:.74rem; color:var(--muted); line-height:1.45; padding:2px 0; }
.sc-row{
  display:flex; align-items:center; gap:8px; cursor:pointer;
  padding:7px 9px; margin-bottom:5px;
  border:1px solid var(--border); border-radius:var(--r-md);
  background:var(--bg-elevated); opacity:.62; transition:opacity .12s, border-color .12s;
}
.sc-row.on{ opacity:1; border-color:var(--border-strong); background:var(--surface); }
.sc-row input{ width:auto; margin:0; accent-color:var(--blue); flex:none; }
.sc-row i{ width:3px; height:26px; border-radius:2px; flex:none; }
.sc-body{ min-width:0; flex:1; display:block; }
.sc-name{ display:block; font-size:.78rem; font-weight:600; color:var(--text); }
.sc-meta{ display:block; font-size:.68rem; color:var(--muted); margin-top:1px; }
.sc-dist{ font-size:.68rem; font-weight:700; color:var(--green); flex:none; font-variant-numeric:tabular-nums; }
.sc-dist.far{ color:var(--muted-2); }
.sc-note{ font-size:.66rem; color:var(--muted); line-height:1.45; margin-top:4px; }

/* ── Menu contextuel de la carte ────────────────────────────────────────── */
.ctx-menu{
  position:fixed; z-index:9800; min-width:210px; padding:4px;
  background:var(--surface); border:1px solid var(--border-strong);
  border-radius:var(--r-md); box-shadow:var(--shadow-pop);
}
.ctx-menu[hidden]{ display:none; }
.ctx-head{
  padding:5px 9px 6px; font-size:.66rem; color:var(--muted);
  font-variant-numeric:tabular-nums; border-bottom:1px solid var(--border); margin-bottom:4px;
}
.ctx-item{
  display:flex; align-items:center; gap:8px; width:100%;
  padding:7px 9px; border:0; border-radius:var(--r-sm); background:none; cursor:pointer;
  font-family:var(--font); font-size:.8rem; font-weight:600; color:var(--text); text-align:left;
}
.ctx-item:hover{ background:var(--bg-elevated); }
.ctx-item svg{ width:16px; height:16px; flex:none; color:var(--muted); }

/* Repère du point observé en vue au sol */
.sv-pin{
  width:22px; height:22px; border-radius:50%;
  background:var(--blue); border:3px solid #fff;
  box-shadow:0 0 0 2px rgba(10,132,255,.35), var(--shadow-card);
}
.sv-coord{
  font-size:.72rem; color:var(--muted); font-variant-numeric:tabular-nums;
  margin-bottom:8px;
}

/* ── Colonne de droite redimensionnable + vue au sol pleine largeur ─────── */
/* La bande « cinéma » traverse toute la page sous la carte et le panneau.
   La grille et sa variable de largeur sont définies plus haut, avec les media
   queries : les redéfinir ici les écraserait, source d'ordre oblige. */
.side{ position:relative; }
body.col-resizing{ cursor:col-resize; user-select:none; }

.sv-theater{
  grid-column: 1 / -1; grid-row: 2;
  position:relative; display:flex; flex-direction:column;
  height: var(--sv-h, 300px); min-height:0;
  border-top:1px solid var(--border); background:var(--surface);
  /* Au-dessus de Leaflet : ses panneaux sont a 400 et ses controles a 1000.
     A 25, la poignee qui deborde sur la carte etait recouverte, donc ni
     visible au survol ni cliquable dans sa partie haute. */
  z-index:1100;
}
.sv-theater[hidden]{ display:none; }

/* La separation se saisit sur toute la largeur, panneau lateral compris :
   c'est elle qui arbitre la hauteur entre le panneau et le panorama.
   z-index au-dessus du panneau (20), sinon la moitie droite serait morte. */
.svt-grip{ position:absolute; top:-7px; left:0; right:0; height:16px; cursor:row-resize; z-index:30; }
/* Les reperes visuels sont dessines SOUS le bord haut de la bande, jamais dans
   la partie qui deborde sur la carte. */
.svt-grip::after{                       /* trait sur toute la largeur, au survol */
  content:''; position:absolute; left:0; right:0; top:8px; height:3px;
  background:transparent; transition:background .12s;
}
.svt-grip:hover::after, .svt-grip.on::after{ background:var(--accent); }
.svt-grip::before{                      /* poignee toujours visible */
  content:''; position:absolute; left:50%; transform:translateX(-50%); top:8px;
  width:58px; height:5px; border-radius:3px; background:var(--muted-2);
  transition:background .12s, width .12s;
}
.svt-grip:hover::before, .svt-grip.on::before{ background:var(--accent); width:76px; }

.svt-head{
  display:flex; align-items:center; gap:10px; flex:none;
  padding:8px 14px; border-bottom:1px solid var(--border);
}
.svt-title{
  font-family:var(--font-display); font-size:.86rem; font-weight:800;
  text-transform:uppercase; letter-spacing:.06em;
}
.svt-frame{ flex:1; width:100%; border:0; min-height:0; display:block; }

/* Bascule panneau / pleine largeur */
.sv-bar{ display:flex; align-items:center; gap:8px; margin-bottom:8px; }
.sv-bar .sv-coord{ margin:0; flex:1; }
.sv-mode{
  display:inline-flex; align-items:center; justify-content:center;
  width:30px; height:28px; flex:none; padding:0;
  border:1px solid var(--border-strong); border-radius:var(--r-sm);
  background:var(--bg-elevated); color:var(--muted); cursor:pointer; text-decoration:none;
}
.sv-mode:hover{ color:var(--text); }
.sv-mode svg{ width:16px; height:16px; }
.sv-mode-sm{ width:26px; height:22px; }
.sv-mode-sm svg{ width:14px; height:14px; }
.sv-foot .spacer{ flex:1; }

@media (max-width: 820px){
  .sv-theater{ height:min(var(--sv-h, 300px), 46vh); }
}

/* Outils du mode cinéma : groupés à l'extrême droite, la fermeture en rouge
   comme les autres actions destructives de l'app. */
.svt-tools{ display:flex; align-items:center; gap:6px; margin-left:8px; }
.sv-mode.is-close{ color:var(--red); border-color:color-mix(in srgb, var(--red) 40%, var(--border-strong)); }
.sv-mode.is-close:hover{ background:color-mix(in srgb, var(--red) 12%, var(--bg-elevated)); color:var(--red); }

/* Poignee de hauteur du panorama dans le panneau lateral. */
.sv-grip{ position:relative; height:14px; cursor:row-resize; margin-top:2px; }
.sv-grip::after{
  content:''; position:absolute; left:0; right:0; top:6px; height:3px;
  background:transparent; transition:background .12s;
}
.sv-grip:hover::after, .sv-grip.on::after{ background:var(--accent); }
.sv-grip::before{
  content:''; position:absolute; left:50%; transform:translateX(-50%); top:5px;
  width:58px; height:5px; border-radius:3px; background:var(--muted-2);
  transition:background .12s, width .12s;
}
.sv-grip:hover::before, .sv-grip.on::before{ background:var(--accent); width:82px; }

/* Poignee d'angle : largeur du panneau et hauteur du panorama d'un seul geste.
   Placee a l'intersection des deux poignees, en bas a gauche du panorama. */
.sv-corner{
  position:absolute; left:-12px; top:0; width:28px; height:16px;
  cursor:nesw-resize; z-index:2;
}
.sv-corner::before{
  content:''; position:absolute; left:8px; top:2px; width:11px; height:11px;
  border-left:2px solid var(--muted-2); border-bottom:2px solid var(--muted-2);
  border-bottom-left-radius:4px; transition:border-color .12s;
}
.sv-corner:hover::before, .sv-corner.on::before{ border-color:var(--accent); }
body.corner-resizing{ cursor:nesw-resize; user-select:none; }

/* Plusieurs evenements LiveTrail peuvent correspondre au nom saisi. */
.lt-alts{ display:flex; flex-wrap:wrap; align-items:center; gap:5px; margin-bottom:7px; }
.lt-alts > span{ font-size:.68rem; color:var(--muted); width:100%; }
.lt-alts button{
  padding:3px 9px; border-radius:999px; border:1px solid var(--border-strong);
  background:var(--bg-elevated); color:var(--muted); cursor:pointer;
  font-family:var(--font); font-size:.7rem; font-weight:600;
}
.lt-alts button b{ font-weight:700; color:var(--muted-2); margin-left:3px; }
.lt-alts button.on{ background:var(--text); color:var(--bg); border-color:transparent; }
.lt-alts button.on b{ color:var(--bg); opacity:.7; }
.tt-est{ display:block; margin-top:2px; font-size:.9em; color:var(--muted); font-style:italic; }

/* Une ligne par parcours quand plusieurs se superposent sous le curseur. */
.trace-tip .tt-row + .tt-row{
  margin-top:6px; padding-top:6px; border-top:1px solid var(--border);
}
.trace-tip .tt-hint{ margin-top:6px; }

/* ── Horaires des parcours ──────────────────────────────────────────────── */
.sched-list{ max-height:46vh; overflow-y:auto; margin-bottom:4px; }
.sched-row{
  padding:9px 10px; margin-bottom:7px;
  border:1px solid var(--border); border-radius:var(--r-md); background:var(--bg-elevated);
}
.sched-head{ display:flex; align-items:center; gap:7px; margin-bottom:7px; flex-wrap:wrap; }
.sched-head i{ width:3px; height:15px; border-radius:2px; flex:none; }
.sched-name{ font-size:.79rem; font-weight:700; color:var(--text); flex:1; min-width:0; }

/* Pastille de couleur du tracé : le sélecteur natif recouvre la pastille, qui
   reste le seul repère visible. Plus large que la barre de la légende, sinon
   la cible est trop petite pour être cliquée. */
.sched-swatch{ position:relative; flex:none; width:16px; height:16px; cursor:pointer; }
.sched-swatch input[type="color"]{
  position:absolute; inset:0; width:100%; height:100%;
  opacity:0; cursor:pointer; border:0; padding:0;
}
.sched-head .sched-swatch i{
  display:block; width:16px; height:16px; border-radius:5px;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.18);
  pointer-events:none;
}
.sched-stats{
  font-size:.68rem; font-weight:600; color:var(--muted); flex:none;
  font-variant-numeric:tabular-nums;
}
.sched-reset{
  flex:none; border:0; background:none; cursor:pointer; padding:1px 4px;
  border-radius:var(--r-sm);
  font-family:var(--font); font-size:.62rem; font-weight:700;
  letter-spacing:.04em; text-transform:uppercase; color:var(--blue);
}
.sched-reset:hover{ background:var(--surface); }
.sched-reset[hidden]{ display:none; }

/* Totaux dans la légende, affichés seulement quand il y a peu de parcours. */
.ml-stats{
  font-style:normal; font-size:.66rem; font-weight:600; color:var(--muted);
  font-variant-numeric:tabular-nums; margin-left:2px;
}
.sched-lt{
  font-size:.62rem; font-weight:700; text-transform:uppercase; letter-spacing:.05em;
  color:var(--green); flex:none;
}
.sched-fields{ display:grid; grid-template-columns:1.3fr 1fr .8fr .8fr; gap:6px; }
.sched-fields label{
  display:flex; flex-direction:column; gap:3px;
  font-size:.62rem; font-weight:700; letter-spacing:.04em;
  text-transform:uppercase; color:var(--muted);
}
.sched-fields input{
  width:100%; font-family:var(--font); font-size:.76rem; color:var(--text);
  background:var(--surface); border:1px solid var(--border-strong);
  border-radius:var(--r-sm); padding:5px 6px;
}
.sched-fields input:focus{ outline:2px solid var(--blue); outline-offset:0; border-color:transparent; }

@media (max-width: 560px){
  .sched-fields{ grid-template-columns:1fr 1fr; }
}

/* ── Sélecteur de fond de carte ──────────────────────────────────────────── */
/* Reprise des calques de la V1 (dont IGN et SCAN 25) : préparer un spot
   demande de lire un sentier, un accès et une courbe de niveau, ce que le fond
   OSM ne donne pas. Posé en overlay Leaflet, même matière que la légende. */
.leaflet-layer-picker{
  font-family:var(--font);
  background:var(--overlay); border:1px solid var(--border);
  border-radius:var(--r-md); box-shadow:var(--shadow-card);
  backdrop-filter:blur(12px);
  overflow:hidden;
}
.lp-toggle{
  display:flex; align-items:center; gap:6px;
  padding:7px 10px; border:0; background:none; cursor:pointer;
  font-family:var(--font); font-size:.72rem; font-weight:700; color:var(--text);
}
.lp-toggle svg{ width:16px; height:16px; flex:none; color:var(--muted); }
.lp-toggle:hover{ background:var(--bg-elevated); }
.leaflet-layer-picker.is-compact .lp-toggle span{ display:none; }
.leaflet-layer-picker.is-compact .lp-toggle{ padding:7px; }

.lp-menu{ display:none; border-top:1px solid var(--border); padding:4px; }
.leaflet-layer-picker.open .lp-menu{ display:block; }

.lp-item{
  display:grid; grid-template-columns:auto 1fr; grid-template-rows:auto auto;
  align-items:center; gap:0 8px; width:100%; min-width:150px;
  padding:5px 8px; border:0; border-radius:var(--r-sm);
  background:none; cursor:pointer; text-align:left;
  font-family:var(--font); color:var(--text);
}
.lp-item:hover{ background:var(--bg-elevated); }
.lp-item i{
  grid-row:1 / span 2; width:8px; height:8px; border-radius:50%;
  border:1.5px solid var(--border-strong); background:none;
}
.lp-item.on i{ border-color:var(--blue); background:var(--blue); }
.lp-item b{ font-size:.75rem; font-weight:600; }
.lp-item.on b{ font-weight:700; }
.lp-item em{ font-size:.66rem; font-style:normal; color:var(--muted); }

/* Le menu déborderait de la carte du planning, étroite et basse. */
.leaflet-layer-picker.is-compact .lp-menu{
  position:absolute; right:0; top:100%;
  background:var(--overlay); border:1px solid var(--border); border-radius:var(--r-md);
  box-shadow:var(--shadow-pop); backdrop-filter:blur(12px);
}
/* ── Recherche d'un lieu sur la carte ───────────────────────────────────────
   Même langage que le sélecteur de calques : fond translucide flouté, bord
   discret, pour se poser sur la carte sans la masquer. Largeur fixe : les noms
   de lieux sont longs et une barre élastique sauterait à chaque frappe. */
/* Leaflet empile ses contrôles : `.leaflet-control` est en float:left avec
   clear:both, donc chacun passe à la ligne. On lève le clear pour que la barre
   se range à DROITE des boutons de zoom, sur la même ligne — leur margin-top
   commun de 10px les aligne par le haut. */
.leaflet-map-search{
  clear:none;
  font-family:var(--font); width:300px;
  /* Garde la place du zoom à gauche (~50px) et du sélecteur de calques à droite. */
  max-width:calc(100vw - 170px);
}

.ms-bar{
  display:flex; align-items:center; gap:7px; padding:0 8px;
  background:var(--overlay); border:1px solid var(--border);
  border-radius:var(--r-md); box-shadow:var(--shadow-card);
  backdrop-filter:blur(12px);
}
.ms-bar:focus-within{ border-color:var(--border-strong); }
.ms-ico{ display:flex; flex:none; color:var(--muted); }
.ms-ico svg{ width:15px; height:15px; }
/* Recherche en cours : l'icône tourne, sans ajouter d'élément à la barre. */
.leaflet-map-search.is-busy .ms-ico{ color:var(--blue); animation:msSpin .9s linear infinite; }
@keyframes msSpin{ to{ transform:rotate(360deg) } }

.ms-input{
  flex:1; min-width:0; padding:8px 0; border:0; background:none; outline:none;
  font-family:var(--font); font-size:.78rem; color:var(--text);
}
.ms-input::placeholder{ color:var(--muted-2); }

.ms-clear{
  flex:none; width:18px; height:18px; padding:0; border:0; border-radius:50%;
  background:var(--border); color:var(--muted);
  font-size:.8rem; line-height:1; cursor:pointer;
}
.ms-clear:hover{ background:var(--border-strong); color:var(--text); }

.ms-results{
  margin-top:4px; padding:4px; max-height:300px; overflow-y:auto;
  background:var(--overlay); border:1px solid var(--border);
  border-radius:var(--r-md); box-shadow:var(--shadow-pop);
  backdrop-filter:blur(12px);
}
.ms-item{
  display:block; width:100%; padding:6px 8px; border:0; border-radius:var(--r-sm);
  background:none; cursor:pointer; text-align:left;
  font-family:var(--font); color:var(--text);
}
.ms-item:hover,
.ms-item.on{ background:var(--bg-elevated); }
.ms-item b{ display:block; font-size:.76rem; font-weight:600; }
.ms-item em{
  display:block; font-size:.67rem; font-style:normal; color:var(--muted);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.ms-empty{ padding:8px; font-size:.72rem; color:var(--muted); text-align:center; }

/* ── Mesure de distances ────────────────────────────────────────────────────
   Le bouton se range à GAUCHE du sélecteur de calques : même idée que la barre
   de recherche à droite du zoom, on lève le clear pour rester sur une ligne.
   En float:right, le premier contrôle ajouté (Calques) reste le plus à droite. */
.leaflet-measure{
  clear:none;
  display:flex; align-items:stretch; gap:1px;
  font-family:var(--font);
  background:var(--overlay); border:1px solid var(--border);
  border-radius:var(--r-md); box-shadow:var(--shadow-card);
  backdrop-filter:blur(12px); overflow:hidden;
}
.mz-toggle{
  display:flex; align-items:center; gap:6px;
  padding:7px 10px; border:0; background:none; cursor:pointer;
  font-family:var(--font); font-size:.72rem; font-weight:700; color:var(--text);
}
.mz-toggle svg{ width:16px; height:16px; flex:none; color:var(--muted); }
.mz-toggle:hover{ background:var(--bg-elevated); }
/* Mode actif : on le signale franchement, le curseur devient une croix et tout
   clic sur la carte pose un point — il ne faut pas pouvoir l'oublier. */
.mz-toggle.on{ background:var(--blue); color:#fff; }
.mz-toggle.on svg{ color:#fff; }
.mz-toggle.on:hover{ background:var(--blue); }

.mz-route{
  display:flex; align-items:center; gap:6px;
  padding:7px 10px; border:0; border-left:1px solid var(--border);
  background:none; cursor:pointer;
  font-family:var(--font); font-size:.72rem; font-weight:700; color:var(--text);
}
.mz-route svg{ width:16px; height:16px; flex:none; color:var(--muted); }
.mz-route:hover{ background:var(--bg-elevated); }
/* Orange pour l'itinéraire, bleu pour la mesure : les deux chiffres ne sont
   pas de même nature (route réelle contre vol d'oiseau), la couleur le dit. */
.mz-route.on{ background:var(--orange); color:var(--accent-ink); }
.mz-route.on svg{ color:var(--accent-ink); }
.mz-route.on:hover{ background:var(--orange); }

.mz-clear{
  padding:7px 9px; border:0; border-left:1px solid var(--border);
  background:none; cursor:pointer;
  font-family:var(--font); font-size:.68rem; font-weight:600; color:var(--muted);
}
.mz-clear:hover{ background:var(--bg-elevated); color:var(--text); }

/* Leaflet pose `color` en attribut SVG de présentation, où var(--…) n'est pas
   interprété : la couleur du trait se met donc ici, via className. */
.meas-line{ stroke:var(--blue); }
.meas-ghost{ stroke:var(--blue); opacity:.6; }
.meas-dot{ stroke:var(--blue); fill:var(--surface); }

/* Neutralise le fond blanc et le bord gris que Leaflet donne à tout divIcon. */
.meas-label-wrap{ background:none; border:0; width:auto !important; height:auto !important; }
.meas-label{
  display:inline-flex; align-items:center; gap:4px;
  /* Ancre au point, décalée à droite et centrée verticalement : l'étiquette ne
     recouvre jamais le dernier sommet. */
  transform:translate(10px, -50%);
  padding:3px 3px 3px 8px; border-radius:999px;
  background:var(--blue); color:#fff;
  font-size:.7rem; font-weight:700; white-space:nowrap;
  box-shadow:0 2px 8px rgba(20,20,18,.3);
}
/* Deux lignes : la distance, puis le relief et le temps quand on les a. La
   seconde ligne n'apparaît que remplie, pour ne pas réserver du vide. */
.meas-txt{ display:flex; flex-direction:column; line-height:1.15; }
.meas-txt b{ font-weight:800; }
.meas-txt em{ font-style:normal; font-weight:600; font-size:.63rem; opacity:.85; }

/* Itinéraire routier : trait plein et plus épais que les mesures à vol
   d'oiseau, pour qu'on ne confonde jamais les deux. */
.meas-road{ stroke:var(--orange); }
.meas-road.is-ko{ stroke:var(--red); }
.meas-roaddot{ stroke:var(--orange); fill:var(--surface); }
.meas-label.is-road{ background:var(--orange); color:var(--accent-ink); }
/* Trajet impossible dans le temps imparti : ça doit sauter aux yeux. */
.meas-label.is-road.is-ko{ background:var(--red); color:#fff; }
.meas-label.is-road .meas-del{ background:rgba(20,22,31,.18); color:var(--accent-ink); }
.meas-label.is-road.is-ko .meas-del{ background:rgba(255,255,255,.25); color:#fff; }
.meas-label.is-road .meas-del:hover{ background:#fff; color:var(--orange); }
.meas-ico{ display:flex; flex:none; }
.meas-ico svg{ width:14px; height:14px; }

.meas-del{
  width:17px; height:17px; flex:none; padding:0; border:0; border-radius:50%;
  background:rgba(255,255,255,.22); color:#fff;
  font-size:.82rem; line-height:1; cursor:pointer;
}
.meas-del:hover{ background:#fff; color:var(--blue); }
/* Pendant le tracé, l'étiquette ne doit pas voler le clic destiné à poser un
   point par-dessus une mesure déjà faite. */
.meas-drawing .meas-label{ pointer-events:none; }

/* ── Le lieu trouvé ──────────────────────────────────────────────────────── */
/* Leaflet donne un fond blanc et un bord gris à tout divIcon
   (`.leaflet-div-icon`) : sans ça, la pastille ronde apparaît dans un carré. */
.ms-pin-wrap{ background:none; border:0; }
.ms-pin{
  width:26px; height:26px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:var(--blue); color:#fff;
  border:2px solid var(--surface); box-shadow:0 2px 8px rgba(20,20,18,.35);
}
.ms-pin svg{ width:13px; height:13px; }

.ms-pop b{ display:block; font-size:.82rem; }
.ms-pop-ctx{ display:block; font-size:.72rem; color:var(--muted); margin-top:1px; }
.ms-pop-gps{ display:block; font-size:.68rem; color:var(--muted-2); margin-top:3px; font-variant-numeric:tabular-nums; }
.ms-pop-acts{ display:flex; flex-wrap:wrap; gap:4px; margin-top:8px; }
.ms-act{
  display:flex; align-items:center; gap:4px;
  padding:5px 8px; border:1px solid var(--border); border-radius:var(--r-sm);
  background:var(--surface-2); cursor:pointer;
  font-family:var(--font); font-size:.7rem; font-weight:600; color:var(--text);
}
.ms-act:hover{ background:var(--bg-elevated); border-color:var(--border-strong); }
.ms-act svg{ width:13px; height:13px; flex:none; color:var(--muted); }

.leaflet-layer-picker.is-compact{ overflow:visible; position:relative; }

@media (max-width: 820px){
  .lp-toggle span{ display:none; }
  .lp-toggle{ padding:8px; }
}


/* ── Profil altimétrique ────────────────────────────────────────────────── */
/* Un spot ne se juge pas qu'à sa position sur la carte : sommet, fond de
   vallée ou pleine montée, ce n'est pas le même plan. Le profil reprend la
   trace sélectionnée et y pose les spots du parcours, à leur kilomètre. */
.profile{
  position:relative; flex:none; display:flex; flex-direction:column;
  height:var(--prof-h, 170px); min-height:0;
  background:var(--surface); border-top:1px solid var(--border);
}
.profile[hidden]{ display:none; }

.prof-grip{
  position:absolute; top:-3px; left:0; right:0; height:7px; z-index:6;
  cursor:row-resize;
}
.prof-grip::after{
  content:''; position:absolute; top:3px; left:50%; width:38px; height:3px;
  transform:translateX(-50%); border-radius:2px; background:var(--border-strong);
  opacity:0; transition:opacity .14s;
}
.prof-grip:hover::after, .prof-grip.on::after{ opacity:1; }

.prof-head{
  flex:none; display:flex; align-items:center; gap:8px;
  padding:7px 12px; border-bottom:1px solid var(--border);
}
.prof-head i{ width:10px; height:10px; border-radius:50%; flex:none; }
.prof-head b{
  font-family:var(--font-display); font-size:.95rem; font-weight:700;
  letter-spacing:.01em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.prof-stats{
  font-size:.7rem; font-weight:600; color:var(--muted); flex:none;
  font-variant-numeric:tabular-nums;
}
/* Lecture au survol : à droite, pour ne pas faire sauter le nom du parcours. */
.prof-read{
  margin-left:auto; font-size:.72rem; color:var(--text); flex:none;
  font-variant-numeric:tabular-nums; white-space:nowrap;
  overflow:hidden; text-overflow:ellipsis;
}
.prof-read b{ font-family:var(--font); font-size:.72rem; font-weight:700; }
.prof-read .pr-sep{ color:var(--muted-2); margin:0 5px; }
.prof-read .pr-ter{ font-weight:700; }
.prof-read .pr-ter.sommet{ color:var(--orange); }
.prof-read .pr-ter.vallee{ color:var(--teal); }

.prof-chart{ flex:1; min-height:0; position:relative; }
.prof-chart svg{ display:block; width:100%; height:100%; }
.prof-chart .pc-empty{
  display:flex; align-items:center; justify-content:center; height:100%;
  padding:0 16px; text-align:center;
  font-size:.8rem; color:var(--muted);
}
.pc-empty .btn{ margin:9px 0 6px; }
.pc-empty em{
  display:block; font-style:normal; font-size:.7rem; color:var(--muted-2);
  max-width:56ch; margin:0 auto;
}
.sched-elev{
  flex:none; border:0; background:none; cursor:pointer; padding:1px 4px;
  border-radius:var(--r-sm);
  font-family:var(--font); font-size:.62rem; font-weight:700;
  letter-spacing:.04em; text-transform:uppercase; color:var(--blue);
}
.sched-elev:hover{ background:var(--surface); }
.sched-elev:disabled{ color:var(--muted-2); cursor:default; }

.pc-grid{ stroke:var(--border); stroke-width:1; }
.pc-axis{ fill:var(--muted-2); font-size:9.5px; font-family:var(--font); }
.pc-area{ opacity:.17; }
.pc-line{ fill:none; stroke-width:1.8; stroke-linejoin:round; }
.pc-stem{ stroke:var(--border-strong); stroke-width:1; stroke-dasharray:2 2; }
.pc-dot{ stroke:var(--surface); stroke-width:1.6; }
.pc-num{ fill:#fff; font-size:8px; font-weight:700; font-family:var(--font); text-anchor:middle; }
.pc-glyph{ font-size:9px; text-anchor:middle; font-family:var(--font); }
.pc-glyph.sommet{ fill:var(--orange); }
.pc-glyph.vallee{ fill:var(--teal); }
.pc-cursor{ stroke:var(--text); stroke-width:1; opacity:.5; }
.pc-hit{ fill:transparent; cursor:crosshair; }

@media (max-width: 820px){
  .profile{ height:min(var(--prof-h, 170px), 34vh); }
  .prof-stats{ display:none; }
}


/* Petite action posée dans l'étiquette d'un champ (retrouver l'adresse…). */
.field label .f-act{
  float:right; border:0; background:none; cursor:pointer; padding:0 2px;
  font-family:var(--font); font-size:.62rem; font-weight:700;
  letter-spacing:.04em; text-transform:uppercase; color:var(--blue);
}
.field label .f-act:hover{ text-decoration:underline; }
.field label .f-act:disabled{ color:var(--muted-2); cursor:default; text-decoration:none; }


/* ── Rayon d'action et couverture ───────────────────────────────────────── */
/* Sous le profil, une bande montre la portion de course couverte par chaque
   spot. Ce qui reste en creux, ce sont les trous. */
.pc-cover-bg{ fill:var(--border); }
.pc-cover{ opacity:.75; }
.pc-cover.sel{ opacity:1; stroke:var(--text); stroke-width:1; }
.pc-gap{
  fill:var(--muted); font-size:8px; font-family:var(--font); font-weight:600;
}

/* Rappel sous les champs de l'éditeur : la portion de parcours couverte. */
.cover-hint{
  margin:-4px 0 12px; font-size:.72rem; color:var(--muted);
  font-variant-numeric:tabular-nums;
}
.cover-hint:empty{ display:none; }


/* ── Écran Coureurs ─────────────────────────────────────────────────────── */
/* La recherche interroge LiveTrail en direct ; les résultats sont des
   candidats, la liste du dessous les coureurs réellement suivis. */
.rs-search{ margin:4px 0 10px; max-width:640px; }
.rs-hint{ font-size:.75rem; color:var(--muted); margin-top:6px; min-height:1.1em; }

.rs-list{
  display:flex; flex-direction:column; gap:2px; margin-bottom:22px;
  max-width:860px; padding:6px; border-radius:var(--r-lg);
  background:var(--bg-elevated); border:1px solid var(--border);
}
.rs-row{
  display:grid; grid-template-columns:34px 1fr auto; gap:11px; align-items:center;
  padding:7px 9px; border-radius:var(--r-md);
}
.rs-row:hover{ background:var(--surface); }
.rs-row.is-on{ opacity:.55; }
.rs-face, .rk-face{
  width:34px; height:34px; border-radius:50%; overflow:hidden; flex:none;
  background:var(--border); display:flex; align-items:center; justify-content:center;
  font-family:var(--font-display); font-weight:800; font-size:.72rem; color:var(--muted);
}
.rs-face img, .rk-face img{ width:100%; height:100%; object-fit:cover; }
.rs-body{ min-width:0; }
.rs-name, .rk-name{ display:block; font-size:.88rem; font-weight:600; }
.rs-doss{
  display:inline-block; margin-right:7px; padding:1px 6px; border-radius:100px;
  background:var(--text); color:var(--bg);
  font-family:var(--font-display); font-size:.72rem; font-weight:700;
  font-variant-numeric:tabular-nums;
}
.rs-sx{
  display:inline-block; margin-left:6px; font-style:normal;
  font-size:.66rem; font-weight:700; color:var(--muted);
  border:1px solid var(--border-strong); border-radius:100px; padding:0 5px;
}
.rs-meta, .rk-meta{
  display:block; font-size:.74rem; color:var(--muted);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.rs-done{ font-size:.72rem; font-weight:600; color:var(--green); white-space:nowrap; }
.rs-warn{ font-size:.72rem; font-weight:600; color:var(--orange); white-space:nowrap; cursor:help; }

.sec-head{
  display:flex; align-items:baseline; gap:10px; flex-wrap:wrap;
  padding-bottom:7px; margin-bottom:10px; border-bottom:1px solid var(--border);
  max-width:860px;
}
.sec-head h2{ font-family:var(--font-display); font-size:1.1rem; font-weight:700; margin:0; }
.sec-note{ font-size:.74rem; color:var(--muted); }

/* Classement vivant : le rang vient du point le plus avancé constaté, pas du
   classement officiel. Quand les deux divergent on le dit sous la ligne. */
.rk-list{ display:flex; flex-direction:column; gap:3px; max-width:860px; }
.rk-row{
  display:grid; grid-template-columns:30px 34px minmax(0,1.4fr) minmax(0,1.3fr) auto 30px 30px;
  gap:11px; align-items:center;
  padding:8px 10px; border-radius:var(--r-md);
  background:var(--surface); border:1px solid var(--border);
}
.rk-row.diverges{ border-color:color-mix(in srgb, var(--orange) 45%, transparent); }
.rk-rank{
  font-family:var(--font-display); font-weight:800; font-size:1.05rem;
  color:var(--muted); text-align:center; font-variant-numeric:tabular-nums;
}
.rk-id{ min-width:0; }
.rk-prog{ min-width:0; display:flex; flex-direction:column; gap:1px; }
.rk-km{ font-family:var(--font-display); font-weight:700; font-size:.86rem; font-variant-numeric:tabular-nums; }
.rk-at{ font-size:.72rem; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.rk-src{
  font-size:.62rem; font-weight:700; letter-spacing:.05em; text-transform:uppercase;
  color:var(--muted-2);
}
.rk-src.terrain{ color:var(--orange); }
.rk-none{ font-size:.75rem; color:var(--muted-2); }
.rk-crew{ font-size:.74rem; color:var(--muted); white-space:nowrap; cursor:help; }
.rk-crew i{ font-style:normal; color:var(--muted-2); }
.rk-del{
  width:28px; height:28px; border:0; border-radius:var(--r-sm);
  background:none; color:var(--muted-2); cursor:pointer;
  display:flex; align-items:center; justify-content:center;
}

/* Lien public d'un coureur (Instagram, Strava…) : LiveTrail ne fournit pas
   toujours de photo, et le cadreur doit pouvoir reconnaître la personne.
   Éteint quand il n'y a pas de lien, pour qu'on voie qui en a un. */
.rk-link{
  width:28px; height:28px; border:0; border-radius:var(--r-sm);
  background:none; color:var(--muted-2); cursor:pointer;
  display:flex; align-items:center; justify-content:center;
}
.rk-link svg{ width:15px; height:15px; }
.rk-link:hover{ background:var(--bg-elevated); color:var(--text); }
.rk-link.on{ color:var(--blue); }
.rk-del svg{ width:14px; height:14px; }
.rk-del:hover{ background:var(--bg-elevated); color:var(--red); }
.rk-diverge{
  margin:-1px 0 3px 10px; padding:5px 10px;
  font-size:.73rem; color:var(--orange);
  background:color-mix(in srgb, var(--orange) 10%, transparent);
  border-radius:0 0 var(--r-md) var(--r-md); max-width:860px;
}

@media (max-width: 820px){
  .rk-row{ grid-template-columns:26px 32px minmax(0,1fr) 28px; row-gap:6px; }
  .rk-prog{ grid-column:3 / 5; }
  .rk-crew{ grid-column:3 / 5; }
}


/* ── État de la synchro LiveTrail ───────────────────────────────────────── */
/* Un suivi qui ne remonte rien doit dire pourquoi. Le bandeau est vert quand
   le poller tourne, ambre quand une condition manque — avec la liste. */
.sy{
  max-width:860px; margin:0 0 20px;
  padding:12px 14px; border-radius:var(--r-lg);
  background:var(--surface); border:1px solid var(--border); box-shadow:var(--shadow);
}
.sy.ko{ border-color:color-mix(in srgb, var(--orange) 45%, transparent); }
.sy-head{ display:flex; align-items:center; gap:9px; flex-wrap:wrap; }
.sy-head b{ font-family:var(--font-display); font-size:1rem; font-weight:700; }
.sy-dot{ width:9px; height:9px; border-radius:50%; background:var(--orange); flex:none; }
.sy.ok .sy-dot{ background:var(--green); animation:syPulse 2.2s infinite; }
@keyframes syPulse{ 0%,100%{opacity:1} 50%{opacity:.35} }
.sy-when{ font-size:.74rem; color:var(--muted); }
.sy-why{ margin:9px 0 0; padding-left:18px; }
.sy-why li{ font-size:.8rem; color:var(--orange); margin-bottom:3px; }
.sy-courses{ display:flex; flex-wrap:wrap; gap:5px; margin-top:10px; }
.sy-c{
  font-size:.72rem; color:var(--muted); padding:2px 8px; border-radius:100px;
  background:var(--bg-elevated); border:1px solid var(--border);
}
.sy-c.now{ color:var(--green); border-color:color-mix(in srgb, var(--green) 40%, transparent); }
.sy-tally{ font-size:.73rem; color:var(--muted-2); margin-top:8px; font-variant-numeric:tabular-nums; }
@media (prefers-reduced-motion:reduce){ .sy.ok .sy-dot{ animation:none; } }


/* ── Carte du direct (Suivi cadreurs) ───────────────────────────────────── */
/* Cadreurs et coureurs sur le même fond : c'est la question du PC course,
   « est-ce que ça se croise comme prévu », et elle ne se lit pas dans deux
   listes séparées. */
.live-map-wrap{
  margin:0 0 20px; border-radius:var(--r-lg); overflow:hidden;
  background:var(--surface); border:1px solid var(--border); box-shadow:var(--shadow);
}
.live-map-head{
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  padding:10px 14px; border-bottom:1px solid var(--border);
}
.live-map-head h2{ font-family:var(--font-display); font-size:1.05rem; font-weight:700; margin:0; }
.lm-legend{ display:flex; align-items:center; gap:6px; font-size:.72rem; color:var(--muted); flex-wrap:wrap; }
.lm-legend i{ width:10px; height:10px; border-radius:50%; display:inline-block; margin-left:8px; }
.lm-legend i:first-child{ margin-left:0; }
.lm-k-crew{ background:var(--purple); }
.lm-k-off{ background:var(--muted-2); }

/* Légende des parcours sur la carte du direct : trois traces de couleur ne
   disent pas laquelle est le 20, le 50 ou le 80 km. Les couleurs sont celles
   de la carte de préparation et des affectations. */
.lm-courses{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-left:6px; }
.lm-course{ display:inline-flex; align-items:center; gap:5px; font-size:.72rem; color:var(--muted); }
.lm-course i{ width:14px; height:3px; border-radius:2px; margin:0; flex:none; }
.lm-k-run{ background:var(--surface); box-shadow:inset 0 0 0 2px var(--orange); }
#live-map{ height:clamp(260px, 42vh, 460px); }

/* Pastille cadreur : ses initiales, à sa couleur de planning. */
.lm-crew{
  width:30px; height:30px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-display); font-weight:800; font-size:.7rem; color:#fff;
  border:2px solid var(--surface); box-shadow:0 2px 7px rgba(0,0,0,.35);
}
.lm-crew.off{ background:var(--muted-2) !important; opacity:.75; }

/* Pastille coureur : sa photo si on l'a, sinon son dossard. Le liseré orange
   signale une position vue par un cadreur plutôt que par LiveTrail. */
.lm-run{
  width:26px; height:26px; border-radius:50%; overflow:hidden; position:relative;
  display:flex; align-items:center; justify-content:center;
  background:var(--surface); color:var(--text);
  font-family:var(--font-display); font-weight:800; font-size:.62rem;
  border:2px solid var(--blue); box-shadow:0 2px 7px rgba(0,0,0,.35);
}

/* Position estimée entre deux postes de pointage : liseré plus clair et halo
   qui respire, pour qu'on ne la prenne pas pour un pointage constaté. Même
   distinction que dans le roadbook cadreur. */
.lm-run.pred{ border-style:dashed; }
.lm-moving{ animation:lmPulse 2.4s ease-in-out infinite; }
@keyframes lmPulse{ 0%,100%{ opacity:1 } 50%{ opacity:.62 } }
.lm-run.seen{ border-color:var(--orange); }
.lm-run img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }


/* ── Zone de suppression ────────────────────────────────────────────────── */
/* Posée en bas de la fiche, séparée du reste et dans une autre couleur : on ne
   tombe pas dessus en voulant enregistrer. La confirmation porte le nom de
   l'événement, parce que l'erreur réelle est de supprimer le mauvais. */
.danger{
  margin-top:22px; padding:14px;
  border:1px solid color-mix(in srgb, var(--red) 40%, transparent);
  border-radius:var(--r-md);
  background:color-mix(in srgb, var(--red) 7%, transparent);
}
.danger-head{
  font-family:var(--font-display); font-weight:700; font-size:.92rem;
  color:var(--red); margin-bottom:5px;
}
.danger-txt{ font-size:.76rem; color:var(--muted); line-height:1.5; margin-bottom:11px; }
.danger-txt b{ color:var(--text); }
.danger-row{ display:flex; gap:8px; flex-wrap:wrap; }
.btn-danger{
  background:var(--red); color:#fff; border:1px solid transparent;
}
/* `.btn:hover` est plus spécifique que `.btn-danger` : sans ce bloc, le survol
   remettait un fond clair sous le texte blanc et le bouton devenait invisible. */
.btn.btn-danger:hover{ background:var(--red); color:#fff; filter:brightness(1.1); }
.btn.btn-danger:disabled, .btn.btn-danger[disabled]{
  background:var(--red); color:#fff; opacity:.55; cursor:default; filter:none;
}


/* ── Filtres de la vue Affectations ─────────────────────────────────────── */
/* Deux menus à cases : on filtre souvent sur deux cadreurs ou deux parcours,
   pas sur un seul. Le bouton porte le compte quand le filtre est actif — un
   écran filtré doit le dire, sinon on cherche des spots qui ne manquent pas. */
.filters-bar{ display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.flt{ position:relative; }
.flt-btn{
  display:inline-flex; align-items:center; gap:5px;
  padding:6px 10px; border-radius:var(--r-md);
  border:1px solid var(--border); background:var(--surface); color:var(--text);
  font-family:var(--font); font-size:.78rem; font-weight:600; cursor:pointer;
  white-space:nowrap;
}
.flt-btn svg{ width:13px; height:13px; color:var(--muted-2); }
.flt-btn:hover{ background:var(--bg-elevated); }
.flt-btn.on{ background:var(--text); color:var(--bg); border-color:transparent; }
.flt-btn.on svg{ color:var(--bg); }

.flt-menu{
  display:none; position:absolute; top:calc(100% + 5px); left:0; z-index:900;
  min-width:210px; max-height:46vh; overflow-y:auto;
  padding:5px; border-radius:var(--r-md);
  background:var(--surface); border:1px solid var(--border-strong);
  box-shadow:var(--shadow-pop);
}
.flt.open .flt-menu{ display:block; }
.flt-item{
  display:flex; align-items:center; gap:8px;
  padding:6px 8px; border-radius:var(--r-sm); cursor:pointer;
  font-size:.8rem; white-space:nowrap;
}
.flt-item:hover{ background:var(--bg-elevated); }
.flt-item input{ margin:0; cursor:pointer; flex:none; }
.flt-item i{ width:9px; height:9px; border-radius:50%; flex:none; }
.flt-item span{ overflow:hidden; text-overflow:ellipsis; }
.flt-empty{ padding:8px; font-size:.76rem; color:var(--muted); }
.flt-clear, .flt-reset{
  border:0; background:none; cursor:pointer; padding:6px 8px;
  font-family:var(--font); font-size:.74rem; font-weight:700; color:var(--blue);
  width:100%; text-align:left; border-radius:var(--r-sm);
}
.flt-clear:hover, .flt-reset:hover{ background:var(--bg-elevated); }
.flt-reset{ width:auto; }

/* Ce que le filtre retire du vivier, dit explicitement. */
.pool-hidden{
  font-family:var(--font); font-size:.68rem; font-weight:600;
  color:var(--orange); margin-left:6px;
}

@media (max-width: 1100px){
  .flt-btn{ padding:6px 8px; font-size:.74rem; }
}


/* ── Points de pointage LiveTrail ───────────────────────────────────────── */
/* Proposés comme candidats, pas imposés : sur beaucoup d'événements le ravito
   EST le spot de tournage, mais pas toujours. Même grammaire que le repérage. */
.cp-intro{
  font-size:.76rem; color:var(--muted); line-height:1.5;
  padding:10px 12px; margin-bottom:10px;
  background:var(--bg-elevated); border:1px solid var(--border); border-radius:var(--r-md);
}
.cp-card{
  padding:11px 12px; margin-bottom:7px; border-radius:var(--r-md);
  background:var(--surface); border:1px solid var(--border); cursor:pointer;
}
.cp-card:hover{ border-color:var(--border-strong); background:var(--bg-elevated); }
.cp-card.sel{ box-shadow:0 0 0 2px var(--blue); }
.cp-card.is-on{ opacity:.6; }
.cp-head{ display:grid; grid-template-columns:38px minmax(0,1fr); gap:10px; align-items:center; }
.cp-km{
  font-family:var(--font-display); font-weight:800; font-size:.92rem;
  color:var(--muted); text-align:center; font-variant-numeric:tabular-nums;
  background:var(--bg-elevated); border-radius:var(--r-sm); padding:5px 0;
}
.cp-name{ display:block; font-weight:600; font-size:.88rem; }
.cp-meta{ display:block; font-size:.72rem; color:var(--muted); margin-top:1px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cp-bh{
  font-size:.72rem; font-weight:600; color:var(--orange); margin-top:7px;
}
.cp-actions{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-top:9px; }

/* Repère sur la carte : un losange gris, pas un pion. */
.cp-pin{
  width:10px; height:10px; margin:2px; transform:rotate(45deg);
  background:var(--surface); border:2px solid var(--muted);
  box-shadow:0 1px 3px rgba(0,0,0,.3);
}


/* ── Pictogramme d'un spot ──────────────────────────────────────────────── */
/* Le picto dit ce qu'on vient faire là ; le numéro reste, en pastille d'angle,
   parce que le panneau et la bande du profil le citent. */
/* L'encre du pictogramme est posée en style inline par pinIcon, depuis le
   catalogue : un fond fluo (cyan, orange, vert) ne porte pas le blanc. On ne
   force donc plus la couleur ici, qui l'emporterait sur rien mais brouillerait
   la lecture du code. */
.spot-pin.has-ico svg{ display:block; }
.spot-n{
  position:absolute; right:-3px; bottom:-3px;
  min-width:13px; height:13px; padding:0 2px; border-radius:7px;
  background:var(--surface); color:var(--text);
  font-family:var(--font); font-size:.52rem; font-weight:700; line-height:13px;
  text-align:center; box-shadow:0 1px 2px rgba(0,0,0,.35);
}

/* Un spot peut être drone ET sol. Le picto drone seul laisserait croire qu'il
   n'y a que le drone à faire : cette pastille dit ce qui reste (S = sol,
   P = photo, F = fpv). Coin opposé au numéro, et fond sombre pour qu'on ne la
   confonde pas avec lui. L'infobulle de la pastille donne la liste complète. */
.spot-x{
  position:absolute; left:-3px; top:-3px;
  min-width:13px; height:13px; padding:0 2px; border-radius:7px;
  background:#14161F; color:#fff;
  font-family:var(--font); font-size:.52rem; font-weight:800;
  line-height:13px; text-align:center; letter-spacing:.02em;
  box-shadow:0 1px 2px rgba(0,0,0,.35);
}
.spot-pin{ position:relative; }

.picto{ display:flex; gap:5px; flex-wrap:wrap; }
.picto button{
  min-width:38px; height:52px; padding:4px 7px; border-radius:var(--r-sm); cursor:pointer;
  border:1px solid var(--border); background:var(--bg-elevated); color:var(--muted);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px;
}
.picto button:hover{ border-color:var(--border-strong); color:var(--text); }
/* La pastille active prend la couleur du type : c'est exactement celle qu'aura
   le pion sur la carte, donc le choix se fait sans aller vérifier. */
.picto button.on{ background:var(--text); color:var(--bg); border-color:transparent; }
.picto .pk-ic.on{ background:var(--ic); color:#fff; }
.picto .pk-ic em{
  font-style:normal; font-size:.56rem; font-weight:700; letter-spacing:.02em;
  text-transform:uppercase; opacity:.85;
}
.picto .pk-ic svg{ flex:none; }
.pk-none{ font-family:var(--font-display); font-weight:700; font-size:.9rem; }

/* ── Parking rattaché ───────────────────────────────────────────────────── */
.pk-empty{
  font-size:.78rem; color:var(--muted); line-height:1.5;
  padding:10px 12px; border-radius:var(--r-md);
  background:var(--bg-elevated); border:1px dashed var(--border-strong);
}
.pk-empty span{ color:var(--muted-2); font-size:.74rem; }
.pk{
  padding:11px 12px; border-radius:var(--r-md);
  background:var(--bg-elevated); border:1px solid var(--border);
}
.pk-nom{ font-weight:600; font-size:.85rem; margin-bottom:8px; }
.pk-chiffres{ display:flex; gap:14px; flex-wrap:wrap; }
.pk-chiffres span{
  display:flex; flex-direction:column; font-size:.64rem; color:var(--muted);
  text-transform:uppercase; letter-spacing:.05em; font-weight:600;
}
.pk-chiffres b{
  font-family:var(--font-display); font-size:1.05rem; font-weight:700; color:var(--text);
  letter-spacing:0; text-transform:none; font-variant-numeric:tabular-nums;
}
.pk-chiffres .up b{ color:var(--orange); }
.pk-note{ font-size:.68rem; color:var(--muted-2); margin-top:9px; line-height:1.45; }
.pk-actions{ display:flex; gap:8px; align-items:center; margin-top:10px; flex-wrap:wrap; }
.pk-del{
  border:0; background:none; cursor:pointer; padding:2px 4px; border-radius:var(--r-sm);
  font-family:var(--font); font-size:.7rem; font-weight:700; color:var(--red);
}
.pk-del:hover{ background:var(--surface); }


/* ── Parking sur la carte ───────────────────────────────────────────────── */
/* Pastille sobre, reliée à son spot par un trait tireté : sans le trait on voit
   deux points sans comprendre qu'ils vont ensemble, alors que c'est le lien qui
   porte l'information — la distance et la montée. */
/* Le trait parking → spot. Déclaré ici et non via l'option `color` de Leaflet,
   qui l'écrirait en attribut SVG où les variables CSS ne s'appliquent pas. */
.park-link{ stroke:var(--muted); opacity:.75; }

.park-pin{
  width:26px; height:26px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:var(--surface); color:var(--text);
  border:2px solid var(--border-strong); box-shadow:0 2px 6px rgba(0,0,0,.3);
}

/* Spots « parking » proposés au rattachement. */
.pk-sug{ margin-top:9px; }
.pk-sug-head{
  font-size:.62rem; font-weight:700; letter-spacing:.07em; text-transform:uppercase;
  color:var(--muted-2); margin-bottom:5px;
}
.pk-sug-row{
  display:grid; grid-template-columns:26px minmax(0,1fr) auto; gap:9px; align-items:center;
  width:100%; padding:7px 9px; margin-bottom:4px; border-radius:var(--r-sm);
  background:var(--surface); border:1px solid var(--border);
  cursor:pointer; text-align:left; font-family:var(--font); color:var(--text);
}
.pk-sug-row:hover{ border-color:var(--border-strong); }
.pk-sug-row:disabled{ opacity:.6; cursor:default; }
.pk-sug-ico{
  width:26px; height:26px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:var(--bg-elevated); color:var(--muted);
}
.pk-sug-txt{ min-width:0; }
.pk-sug-txt b{ display:block; font-size:.82rem; font-weight:600;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pk-sug-txt em{ display:block; font-style:normal; font-size:.7rem; color:var(--muted); }
.pk-sug-go{ font-size:.72rem; font-weight:700; color:var(--blue); white-space:nowrap; }


/* ── Point allumé au survol de sa fiche ─────────────────────────────────── */
/* Sur un parcours à quarante points, lire un nom dans la liste ne dit pas où
   c'est : c'est l'aller-retour liste ↔ carte qui coûte du temps. */
.cp-pin{ transition:transform .12s, background .12s, border-color .12s; }

/* Spot allumé depuis la liste : il grossit et prend un halo. Plus discret que
   le losange du pointage, parce qu'un pion est déjà bien plus visible. */
.spot-ring{ transition:transform .12s, box-shadow .12s; }
.is-hot .spot-ring{
  transform:scale(1.3);
  box-shadow:0 0 0 5px color-mix(in srgb, var(--text) 20%, transparent),
             0 3px 10px rgba(0,0,0,.35);
}
@media (prefers-reduced-motion:reduce){
  .spot-ring{ transition:none; }
  .is-hot .spot-ring{ transform:scale(1.15); }
}

.is-hot .cp-pin, .cp-pin.is-hot{
  transform:rotate(45deg) scale(1.9);
  background:var(--text); border-color:var(--text);
  box-shadow:0 0 0 4px color-mix(in srgb, var(--text) 22%, transparent);
}
@media (prefers-reduced-motion:reduce){
  .cp-pin{ transition:none; }
  .is-hot .cp-pin, .cp-pin.is-hot{ transform:rotate(45deg) scale(1.5); }
}

/* ── Page publique de partage (/p/<jeton>) ─────────────────────────────────
   Les roadbooks de toute l'équipe, pour les cadreurs. Pas de rail, pas de
   menu : une colonne lisible au pouce, le jour de la course. Elle hérite des
   mêmes variables que le poste de pilotage, donc du thème clair / sombre. */
.share{
  max-width: 560px; margin: 0 auto;
  padding: 28px 16px calc(40px + env(safe-area-inset-bottom));
}
.share-brand{
  font-family: var(--font-display); font-weight: 800; font-size: .9rem;
  letter-spacing: .18em; color: var(--muted-2); margin-bottom: 14px;
}
.share-head{ margin-bottom: 18px; }
.share-head-row{ display: flex; align-items: flex-start; gap: 12px; }
.share-head-text{ flex: 1; min-width: 0; }
.share-head .page-title{ font-size: 1.9rem; }
.share-head-actions{ display: flex; gap: 6px; flex-shrink: 0; }

.daytab-n{
  display: inline-block; margin-left: 4px; padding: 0 5px;
  border-radius: 999px; font-size: .66rem; font-weight: 700;
  background: color-mix(in srgb, currentColor 14%, transparent);
}
.share .daytabs{ margin-bottom: 16px; }

.share-group{
  font-size: .72rem; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--muted);
  margin: 20px 0 10px 2px;
}
.share-group:first-child{ margin-top: 4px; }
.share-list{ display: flex; flex-direction: column; gap: 10px; }

/* Toute la carte est le lien : sur un téléphone, viser un petit « Ouvrir »
   avec des gants de moto ne marche pas. */
.share-card{
  display: flex; align-items: center; gap: 12px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-lg); padding: 13px 12px 13px 14px;
  box-shadow: var(--shadow-card);
  transition: border-color .14s ease, transform .14s ease;
}
.share-card:hover{ border-color: var(--border-strong); }
.share-card:active{ transform: scale(.985); }
.share-card:focus-visible{ outline: 2px solid var(--blue); outline-offset: 2px; }
.share-card .avatar{ width: 40px; height: 40px; font-size: .84rem; }

.share-card-body{ flex: 1; min-width: 0; display: block; }
.share-card-name{
  display: block; font-family: var(--font-display); font-weight: 700;
  font-size: 1.12rem; text-transform: uppercase; letter-spacing: -.01em;
  line-height: 1.15; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.share-card-meta{ display: block; font-size: .78rem; color: var(--muted); margin-top: 2px; }
.share-card .chip-row{ margin: 6px 0 0; }

.share-copy{
  flex-shrink: 0; width: 34px; height: 34px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent; border: 1px solid transparent; border-radius: var(--r-md);
  color: var(--muted-2); cursor: pointer;
}
.share-copy:hover{ background: var(--bg-elevated); color: var(--text); border-color: var(--border); }
.share-copy svg{ width: 15px; height: 15px; }
.share-chevron{ width: 17px; height: 17px; color: var(--muted-2); flex-shrink: 0; }

.share-foot{
  margin: 26px 2px 0; font-size: .76rem; line-height: 1.5; color: var(--muted-2);
}

/* QR projeté au briefing : fond blanc fixe, pas de thème — un QR sombre sur
   fond sombre ne se scanne pas. */
.share-qr-sheet{ max-width: 380px; text-align: center; }
.share-qr{
  background: #fff; border-radius: var(--r-md); padding: 14px;
  display: flex; justify-content: center;
}
.share-qr svg{ width: 100%; height: auto; max-width: 300px; }
.share-qr-url{
  margin-top: 12px; font-size: .74rem; color: var(--muted);
  word-break: break-all; line-height: 1.4;
}

/* Fenêtre « Partager » côté chef de projet (cf. js/share.js) */
.share-cp-sheet{ max-width: 420px; }
.share-cp-note{ font-size: .8rem; color: var(--muted); line-height: 1.5; margin-bottom: 12px; }
.share-cp-note b{ color: var(--text); }
.share-cp-link{
  background: var(--bg-elevated); border: 1px solid var(--border);
  border-radius: var(--r-md); padding: 10px 12px;
  font-size: .78rem; word-break: break-all; line-height: 1.4;
  user-select: all; /* un tap sélectionne tout le lien */
}
.share-cp-qr{
  margin-top: 16px; background: #fff; border-radius: var(--r-md); padding: 12px;
  display: flex; justify-content: center;
}
.share-cp-qr svg{ width: 100%; height: auto; max-width: 240px; }

/* Recherche de la page de partage : pleine largeur, au-dessus des onglets de
   jour — c'est le premier geste d'un cadreur dans une équipe nombreuse. */
.share-search{ display: block; margin-bottom: 10px; }
.share-search input{ padding-top: 11px; padding-bottom: 11px; font-size: .92rem; }


/* ── Vérification des tracés LiveTrail ──────────────────────────────────── */
/* « La trace a changé » ne permet pas de décider. On montre l'écart et surtout
   ce qu'il coûte en spots déplacés — c'est là-dessus qu'on tranche. */
.drop-check{ border-style:solid; }
.tk-intro{
  font-size:.8rem; color:var(--muted); line-height:1.5; margin-bottom:12px;
}
.tk-row{
  display:flex; align-items:baseline; gap:8px; justify-content:space-between;
  padding:8px 10px; margin-bottom:5px; border-radius:var(--r-sm);
  background:var(--bg-elevated); font-size:.82rem;
}
.tk-row span{ font-size:.74rem; color:var(--muted); }
.tk-row.ok span{ color:var(--green); }
.tk-card{
  padding:12px; margin-bottom:9px; border-radius:var(--r-md);
  background:var(--surface);
  border:1px solid color-mix(in srgb, var(--orange) 45%, transparent);
}
.tk-head{ display:flex; align-items:baseline; gap:9px; flex-wrap:wrap; }
.tk-head b{ font-family:var(--font-display); font-size:1rem; font-weight:700; }
.tk-when{ font-size:.72rem; color:var(--orange); font-weight:600; }
.tk-metr{
  display:flex; gap:16px; flex-wrap:wrap; margin-top:7px;
  font-size:.84rem; font-variant-numeric:tabular-nums;
}
.tk-metr i{ font-style:normal; color:var(--muted-2); margin:0 2px; }
.tk-metr b{ font-weight:700; }
.tk-imp{ font-size:.78rem; color:var(--muted); line-height:1.55; margin-top:9px; }
.tk-imp b{ color:var(--text); }
.tk-off{ color:var(--orange); }