/* styles/theme/pinboard/bt-trace.css
 * Spécifique Tracé — sélecteur de difficulté (bandes verticales
 * colorées) et ajustements de la grille posters pour inclure ce
 * sélecteur à droite des 2 cartes.
 *
 * Partage tous les tokens DA avec bt-config.css. Max 300L.
 */

/* Grille : 2 posters (ratio 2:3) + 1 bloc DIFFICULTÉ (3 bandes) */
.bt-posters.bt-posters-trace{
  display:flex;
  flex-direction:row;
  gap:var(--gap);
  align-items:stretch;
  justify-content:center;
}
.bt-posters.bt-posters-trace .bt-poster{
  /* posters un peu plus larges qu'en node (2 au lieu de 3), mais
   * aspect conservé via .bt-poster rule commune. */
}

/* Les posters du mode Tracé se comportent comme ceux de Bon Trajet :
 * clic direct = lancement, tous à 100% d'opacité, pas d'état actif
 * préalable. Le hover/press standard du .bt-poster suffit. */

/* ── Sélecteur de difficulté : 3 bandes verticales colorées ──── */
.bt-difficulty{
  display:flex;
  flex-direction:row;
  gap:clamp(4px, .5vw, 8px);
  height:100%;
  min-width:0;
  aspect-ratio: 1 / 1.6;
}
/* Variante compacte pour le lobby — scale avec la hauteur viewport
 * pour ne jamais déborder du sous-module. */
.bk-ctl .bt-difficulty{
  aspect-ratio: unset;
  width:100%;
  height:clamp(64px, 11vh, 130px);
  max-width:clamp(140px, 15vw, 200px);
  margin:0 auto;
  min-height:0;
}
.bt-difficulty.is-disabled{
  opacity:.3;
  pointer-events:none;
  filter:grayscale(.7);
}

.bt-diff{
  appearance:none;
  flex:1 1 0;
  min-width:0;
  cursor:pointer;
  padding:0;
  position:relative;
  display:flex; flex-direction:column;
  border:2.5px solid var(--diff-border, #333);
  border-radius:3px;
  background:var(--diff-bg, #e6e3da);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.5),
    0 4px 10px rgba(0,0,0,.22);
  transition:transform .15s ease, filter .15s ease, box-shadow .18s ease;
  overflow:hidden;
}
.bt-diff:hover:not(.active){
  transform:translateY(-2px);
  filter:brightness(1.05);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.5),
    0 6px 14px rgba(0,0,0,.3);
}
.bt-diff:active{ transform:translateY(0); }
.bt-diff.active{
  transform:translateY(-3px);
  box-shadow:
    inset 0 0 0 3px rgba(245,241,230,.7),
    inset 0 -4px 8px rgba(0,0,0,.25),
    0 8px 16px color-mix(in srgb, var(--diff-border, #333) 45%, transparent);
}

/* Couleurs par niveau (signalétique RATP/SNCF). Chaque couleur
 * s'applique en "remplissage partiel" via un gradient, pour évoquer
 * une jauge : plus c'est dur, plus le fond est coloré haut. */
.bt-diff.bt-diff-easy{
  --diff-border:#2d7a3e;
  --diff-bg:linear-gradient(180deg, transparent 65%, rgba(45,122,62,.85) 65%);
}
.bt-diff.bt-diff-easy.active{
  --diff-bg:linear-gradient(180deg, rgba(245,241,230,.15) 65%, #2d7a3e 65%);
}
.bt-diff.bt-diff-medium{
  --diff-border:#c18b27;
  --diff-bg:linear-gradient(180deg, transparent 40%, rgba(193,139,39,.82) 40%);
}
.bt-diff.bt-diff-medium.active{
  --diff-bg:linear-gradient(180deg, rgba(245,241,230,.15) 40%, #c18b27 40%);
}
.bt-diff.bt-diff-hard{
  --diff-border:#c23e3e;
  --diff-bg:linear-gradient(180deg, rgba(194,62,62,.82) 100%, rgba(194,62,62,.82) 100%);
}
.bt-diff.bt-diff-hard.active{
  --diff-bg:linear-gradient(180deg, #c23e3e 100%, #c23e3e 100%);
}

/* Étiquette dans une case blanche positionnée selon le niveau :
 *   - FACILE   → en bas  (le niveau "seuil" est bas)
 *   - MOYEN    → au milieu
 *   - DIFFICILE → en haut */
.bt-diff-inner{
  flex:1;
  display:flex;
  align-items:stretch;
  justify-content:center;
  padding:clamp(4px, .5vw, 8px);
  position:relative;
}
.bt-diff-easy   .bt-diff-inner{ align-items:flex-end;  }
.bt-diff-medium .bt-diff-inner{ align-items:center;    }
.bt-diff-hard   .bt-diff-inner{ align-items:flex-start; }

.bt-diff-label{
  display:block;
  width:100%;
  padding:6px 2px;
  background:rgba(245,241,230,.95);
  border:1px solid rgba(0,0,0,.3);
  border-radius:2px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.7),
    0 1px 3px rgba(0,0,0,.25);
  font-family:'Barlow Semi Condensed','Barlow',sans-serif;
  font-weight:800;
  font-size:clamp(10px, 1.2cqw, 14px);
  letter-spacing:1.2px;
  text-transform:uppercase;
  text-align:center;
  color:var(--diff-border, #1a1b1c);
  white-space:nowrap;
}
.bt-diff.active .bt-diff-label{
  background:#fff;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.8),
    0 2px 4px rgba(0,0,0,.35);
}

/* Responsive : sur petit viewport, la jauge garde sa forme mais
 * les bandes se rétrécissent. Limite de min-width pour éviter
 * l'écrasement total. */
@media (max-width: 900px){
  .bt-difficulty{
    aspect-ratio: 1 / 1.2;
  }
  .bt-diff-label{ font-size:10px; letter-spacing:.6px; }
}