/* styles/theme/pinboard/trace.css
 * ══════════════════════════════════════════════════════════════════
 * VIEW TRACE — habillage pinboard.
 * Le carrelage est RÉSERVÉ aux plaques de mode et noms de station.
 * Ici on utilise :
 *   - .dip-* (pinboard/dip.css)     : brief, boutons d'action
 *   - .punch-* (pinboard/punch-card.css) : reveal score
 *   - .ld-*-like (livecount style)   : progress bar free mode
 *   - .mc-back (chrome-unified)      : bouton QUITTER
 *   - .tlp-* (ci-dessous)            : line picker (modal de sélection)
 *
 * Ce fichier ne contient que du POSITIONNEMENT et des ajustements
 * typographiques — les textures volumétriques vivent dans dip.css et
 * punch-card.css.
 * ══════════════════════════════════════════════════════════════════ */

/* ─── Map Leaflet : filtre photo doux cohérent avec landing ────── */
#view-trace.pinboard-theme .trace-map{
  filter:saturate(0.85) contrast(1.02) brightness(0.97);
}
#view-trace.pinboard-theme .trace-map .leaflet-container{
  background:#e8e8e4;
}
html[data-theme="dark"] #view-trace.pinboard-theme .trace-map{
  filter:saturate(0.9) contrast(1.05) brightness(0.85);
}
html[data-theme="dark"] #view-trace.pinboard-theme .trace-map .leaflet-container{
  background:#1a1d1c;
}

/* ─── BOUTON QUITTER : positionnement seul (style dans chrome-unified) */
#view-trace.pinboard-theme .trace-nav{
  position:absolute; top:16px; left:16px;
  z-index:50;
}

/* ─── BRIEF DE MISSION : positionnement + layout interne
 *     (le fond acier brossé vient de .dip-panel) ──────────────── */
#view-trace.pinboard-theme .trace-mission{
  position:absolute; top:90px; left:16px;
  width:max-content; min-width:380px; max-width:calc(100vw - 32px);
  z-index:40;
  display:flex; flex-direction:column; gap:10px;
  backdrop-filter:none; -webkit-backdrop-filter:none;
}
#view-trace.pinboard-theme .trace-mission-label{
  /* porte la classe .dip-dymo — l'étiquette Dymo gère son look.
   * On force juste l'alignement à gauche dans le layout du panneau. */
  align-self:flex-start;
}
#view-trace.pinboard-theme .trace-mission-line{
  display:flex; align-items:center; gap:12px;
  font-family:'Barlow Semi Condensed','Barlow',sans-serif;
  font-weight:800; font-size:22px; letter-spacing:2px;
  text-transform:uppercase;
  color:#f5efdc;
  text-shadow:0 1px 0 rgba(0,0,0,.5);
}
#view-trace.pinboard-theme .trace-mission-line .chip{
  width:30px; height:30px; font-size:14px;
  border:2px solid #f5efdc;
  box-shadow:0 2px 4px rgba(0,0,0,.5);
}
#view-trace.pinboard-theme .trace-mission-linename{
  font-family:'Archivo Narrow','Archivo',sans-serif;
  font-size:12px; letter-spacing:.4px;
  color:rgba(245,239,220,.72);
}
#view-trace.pinboard-theme .trace-mission-ends{
  display:flex; align-items:center; gap:8px;
  font-family:'Barlow Semi Condensed','Barlow',sans-serif;
  font-weight:700; font-size:14px;
  color:#f5efdc; letter-spacing:1.2px;
  text-transform:uppercase;
}
#view-trace.pinboard-theme .trace-mission-sep{
  color:#ff9a1f;
  font-weight:800;
  text-shadow:0 0 4px rgba(255,154,31,.5);
}
html[data-theme="light"] #view-trace.pinboard-theme .trace-mission-line,
html[data-theme="light"] #view-trace.pinboard-theme .trace-mission-ends{
  color:#1f1b10;
  text-shadow:none;
}
html[data-theme="light"] #view-trace.pinboard-theme .trace-mission-linename{
  color:rgba(31,27,16,.7);
}
html[data-theme="light"] #view-trace.pinboard-theme .trace-mission-line .chip{
  border-color:#1f1b10;
}

/* ─── PROGRESS BAR (free mode) : footer intégré à la console-brief.
 *     Bandeau fin juste sous l'écran CRT, dans le même cadre métal
 *     brossé que le reste du brief. Couleurs dot-matrix ambre. ──── */
#view-trace.pinboard-theme .cb-progress{
  display:flex; align-items:center; gap:10px;
  padding:8px 12px 10px;
  border-top:1px solid rgba(0,0,0,.35);
  background:linear-gradient(180deg, rgba(0,0,0,.15) 0%, rgba(0,0,0,.3) 100%);
  border-radius:0 0 2px 2px;
}
#view-trace.pinboard-theme .cb-progress[hidden]{ display:none !important; }
#view-trace.pinboard-theme .cb-progress-text{
  font-family:'Archivo Narrow','Archivo',sans-serif;
  font-weight:700; font-size:10px; letter-spacing:1.6px;
  color:rgba(26,27,28,.78); text-transform:uppercase;
  text-shadow:0 1px 0 rgba(255,255,255,.35);
  flex-shrink:0;
}
#view-trace.pinboard-theme .cb-progress-bar{
  flex:1; height:8px;
  background:#0a0a0a;
  border:1px solid rgba(0,0,0,.55);
  border-radius:2px;
  box-shadow:inset 0 0 4px rgba(0,0,0,.9);
  overflow:hidden;
  min-width:60px;
}
#view-trace.pinboard-theme .cb-progress-fill{
  height:100%;
  background:#ff9a1f;
  box-shadow:0 0 6px rgba(255,154,31,.55);
  transition:width .3s ease;
}
#view-trace.pinboard-theme .cb-progress-score{
  font-family:'Share Tech Mono','JetBrains Mono',monospace;
  font-size:12px; letter-spacing:.5px;
  color:#c77a14;
  flex-shrink:0;
}

/* ─── ACTIONS BAR : panneau métal brossé avec boutons encastrés ─ */
#view-trace.pinboard-theme .trace-actions{
  position:absolute;
  left:50%; bottom:28px;
  transform:translateX(-50%);
  z-index:40;
  display:flex; gap:14px;
  padding:18px 20px 20px;
  border:1px solid #4a463d;
  border-radius:2px;
  background:
    /* grain brossé vertical */
    repeating-linear-gradient(90deg,
      rgba(255,255,255,.14) 0 1px,
      transparent 1px 2px),
    linear-gradient(180deg, #d4cfc1 0%, #aaa498 50%, #7e796d 100%);
  box-shadow:
    0 10px 24px rgba(0,0,0,.55),
    inset 0  2px 0 rgba(255,255,255,.45),
    inset 0 -3px 6px rgba(0,0,0,.4);
  overflow:hidden;
  isolation:isolate;
  backdrop-filter:none;
}
/* 4 vis aux coins via pseudo-éléments (pas besoin de <span> en HTML) */
#view-trace.pinboard-theme .trace-actions::before,
#view-trace.pinboard-theme .trace-actions::after{
  content:'';
  position:absolute;
  width:10px; height:10px;
  border-radius:50%;
  background:radial-gradient(circle at 35% 35%,
    #8b8679 0%, #4a463d 70%, #2a2721 100%);
  box-shadow:
    inset 0 1px 1px rgba(255,255,255,.2),
    0 1px 1px rgba(0,0,0,.4);
  pointer-events:none;
  z-index:2;
}
#view-trace.pinboard-theme .trace-actions::before{ top:5px; left:5px;  box-shadow:inset 0 1px 1px rgba(255,255,255,.2), 0 1px 1px rgba(0,0,0,.4), 140px 0 0 radial-gradient(circle at 35% 35%, #8b8679 0%, #4a463d 70%); }
#view-trace.pinboard-theme .trace-actions::after{  top:5px; right:5px; }
/* (box-shadow multi-element n'est pas possible : on utilise 4 vis via
 *  background-image sur le conteneur à la place) */
#view-trace.pinboard-theme .trace-actions{
  background-image:
    /* vis TL / TR / BL / BR */
    radial-gradient(circle at 10px 10px, #8b8679 0%, #4a463d 55%, transparent 60%),
    radial-gradient(circle at calc(100% - 10px) 10px, #8b8679 0%, #4a463d 55%, transparent 60%),
    radial-gradient(circle at 10px calc(100% - 10px), #8b8679 0%, #4a463d 55%, transparent 60%),
    radial-gradient(circle at calc(100% - 10px) calc(100% - 10px), #8b8679 0%, #4a463d 55%, transparent 60%),
    repeating-linear-gradient(90deg,
      rgba(255,255,255,.14) 0 1px,
      transparent 1px 2px),
    linear-gradient(180deg, #d4cfc1 0%, #aaa498 50%, #7e796d 100%);
  background-size:10px 10px, 10px 10px, 10px 10px, 10px 10px, auto, auto;
  background-position:5px 5px, calc(100% - 5px) 5px, 5px calc(100% - 5px), calc(100% - 5px) calc(100% - 5px), 0 0, 0 0;
  background-repeat:no-repeat, no-repeat, no-repeat, no-repeat, repeat, no-repeat;
}
/* Neutralise les pseudo-éléments (remplacés par les radial-gradients
 * en background-image, plus fiables). */
#view-trace.pinboard-theme .trace-actions::before,
#view-trace.pinboard-theme .trace-actions::after{ content:none; }

/* ─── SCORE OVERLAY : rapport de tracé (listing-report) ─────────
 * Ancré en bas-droite de la vue, hors du chemin du brief console
 * (top-left) et de la barre d'actions (bottom-center). */
#view-trace.pinboard-theme .trace-score{
  position:absolute;
  right:16px; bottom:16px;
  top:auto; left:auto;
  z-index:45;
  /* les dimensions et le fond viennent de .listing-report */
}
/* Bouton "Manche suivante" : variante compacte du dip-btn, ancrée
 * au bas de la fiche avec un petit décalage pour sortir du papier
 * — comme une pastille métal posée sur la fiche. */
#view-trace.pinboard-theme .trace-score-next{
  margin-top:14px;
  align-self:flex-start;
}

/* (Line picker : désormais injecté dans le CRT du brief — cf.
 * styles/theme/pinboard/console-brief.css ::cb-crt-picker.) */

/* ══════════════════════════════════════════════════════════════
 * TRANSITIONS & MOTION — "Tracé tout Paris"
 * Langage de mouvement cohérent avec la DA pinboard :
 *   · cubic-bezier(.22,.9,.25,1)     → chute/pose papier (ease-out fort)
 *   · cubic-bezier(.34,1.56,.64,1)   → ressort métal (back-out léger)
 * Durées courtes (150–360ms), uniquement transform + opacity, stagger
 * de 45–70ms entre items sœurs. Respect prefers-reduced-motion.
 * ══════════════════════════════════════════════════════════════ */

/* (Line picker animations : déplacées dans console-brief.css avec le
 * nouveau bloc `.cb-crt-picker` — le picker vit maintenant dans le CRT.) */

/* ── ACTION BAR : slide-up + fade doux à l'apparition ─────────────
 * Actif quand le picker se ferme (free-picking → free) et au retour
 * d'une validation. `.is-entering` est posée par le JS. */
#view-trace.pinboard-theme .trace-actions{
  transition:opacity .24s cubic-bezier(.22,.9,.25,1),
             transform .24s cubic-bezier(.22,.9,.25,1);
}
#view-trace.pinboard-theme .trace-actions.is-entering{
  animation:trace-actions-in .32s cubic-bezier(.22,.9,.25,1) both;
}
@keyframes trace-actions-in{
  0%  { opacity:0; transform:translate(-50%, 16px); }
  100%{ opacity:1; transform:translate(-50%, 0); }
}
#view-trace.pinboard-theme .trace-actions.is-leaving{
  opacity:0;
  transform:translate(-50%, 10px);
  transition:opacity .18s ease-in, transform .18s ease-in;
}

/* ── PROGRESS BAR (free mode) : slide-down + fade à l'activation ── */
#view-trace.pinboard-theme .cb-progress.is-entering{
  animation:cb-progress-in .32s cubic-bezier(.22,.9,.25,1) both;
  transform-origin:top center;
}
@keyframes cb-progress-in{
  0%  { opacity:0; transform:scaleY(.4); }
  100%{ opacity:1; transform:scaleY(1); }
}

/* ── ENDPOINT MARKERS : petit "pop" depuis le point d'ancrage ─────
 * Leaflet positionne le conteneur `.trace-endpoint-icon` via
 * `transform: translate3d(...)` — on NE PEUT PAS y animer de
 * transform sans casser la position. On anime donc l'enfant
 * `.trace-endpoint` (wrapper interne) et seulement opacity sur le
 * conteneur. */
.trace-endpoint-icon{
  animation:trace-endpoint-fade .34s cubic-bezier(.34,1.56,.64,1) both;
}
@keyframes trace-endpoint-fade{
  0%  { opacity:0; }
  100%{ opacity:1; }
}
.trace-endpoint{
  animation:trace-endpoint-pop .34s cubic-bezier(.34,1.56,.64,1) both;
  transform-origin:14px 14px;   /* ancré sur le dot (20×20, centre) */
}
@keyframes trace-endpoint-pop{
  0%  { transform:scale(.55); }
  60% { transform:scale(1.05); }
  100%{ transform:scale(1); }
}
/* Le "dot" pulse 1 fois au montage pour attirer l'œil */
.trace-endpoint-dot{
  animation:trace-endpoint-dot-pulse .9s ease-out .15s both;
}
@keyframes trace-endpoint-dot-pulse{
  0%   { box-shadow:0 0 0 2px rgba(0,0,0,.5), 0 0 0 0 currentColor; }
  40%  { box-shadow:0 0 0 2px rgba(0,0,0,.5), 0 0 0 10px rgba(255,255,255,0); }
  100% { box-shadow:0 0 0 2px rgba(0,0,0,.5), 0 0 14px currentColor; }
}

/* ── REFERENCE POLYLINE : reveal en deux temps, coordonné ─────────
 * Les SVG paths portent `data-trace-reveal="halo|dashes"` (posé par
 * trace-mode.js après .addTo(_map)). Le halo apparaît en premier
 * pour signaler le trajet, puis les pointillés se posent par-dessus. */
.trace-map svg path[data-trace-reveal="halo"]{
  animation:trace-ref-halo-in .55s cubic-bezier(.22,.9,.25,1) both;
}
@keyframes trace-ref-halo-in{
  from{ opacity:0; }
  to  { opacity:.18; }          /* = opacité finale posée par JS */
}
.trace-map svg path[data-trace-reveal="dashes"]{
  animation:trace-ref-dashes-in .48s cubic-bezier(.22,.9,.25,1) .28s both;
}
@keyframes trace-ref-dashes-in{
  from{ opacity:0; transform:translateY(-1px); }
  to  { opacity:.95; transform:translateY(0); }
}

/* ── OPPONENT TRACES (multi reveal) : stagger d'apparition ───────── */
.trace-map svg path[data-trace-opponent]{
  animation:trace-op-in 600ms cubic-bezier(.22,.9,.25,1) both;
  animation-delay:calc(var(--op-i, 0) * 120ms);
}
@keyframes trace-op-in{
  from{ opacity:0; }
  to  { opacity:.9; }
}
.trace-op-chip{
  animation:trace-op-chip-pop .3s cubic-bezier(.34,1.56,.64,1) both;
  animation-delay:calc(var(--op-i, 0) * 120ms + 600ms);
}
@keyframes trace-op-chip-pop{
  0%  { opacity:0; transform:scale(.7); }
  100%{ opacity:1; transform:scale(1); }
}

/* ── REDUCED MOTION : conserver l'info visuelle, couper les mouvements */
@media (prefers-reduced-motion: reduce){
  #view-trace.pinboard-theme .trace-actions.is-entering,
  #view-trace.pinboard-theme .cb-progress.is-entering,
  .trace-endpoint,
  .trace-endpoint-dot,
  .trace-map svg path[data-trace-reveal],
  .trace-map svg path[data-trace-opponent],
  .trace-op-chip{
    animation:none !important;
    transition:opacity .2s ease !important;
  }
}

/* ─── RESPONSIVE ────────────────────────────────────────────── */
@media (max-width: 640px){
  #view-trace.pinboard-theme .trace-mission,
  #view-trace.pinboard-theme .trace-score{
    width:calc(100vw - 32px);
    /* min-width base = 380px : sans ce reset il l'emporte sur width et
     * l'encart déborde sur les fenêtres < ~412px. */
    min-width:0;
    max-width:calc(100vw - 32px);
  }
  #view-trace.pinboard-theme .trace-mission.console-brief{ padding:10px; }
  /* Sur mobile, le coin bas-droite est trop étroit pour le rapport +
   * les actions. On repose le rapport sous le brief (top-left) pour
   * laisser la barre d'actions libre en bas. */
  #view-trace.pinboard-theme .trace-score{
    top:300px; left:16px;
    right:auto; bottom:auto;
  }
  #view-trace.pinboard-theme .cb-progress{ padding:6px 8px; gap:6px; }
  #view-trace.pinboard-theme .trace-actions{
    flex-direction:column; gap:8px; bottom:16px;
  }
  #view-trace.pinboard-theme .trace-actions .dip-btn{
    min-width:180px;        /* -10% par rapport à la V1 */
  }
}