/* styles/theme/pinboard/bt-config.css
 * Bon Trajet — mode-config & lobby : toggle SOLO/MULTI, cartes de
 * sélection (DAILY/ARCADE/JEU LIBRE ou CREER/REJOINDRE), checkboxes
 * réseau, input code de room inline.
 *
 * DA : papier crème + plaques émaillées (tokens repris de
 * `plaques.css` et `lobby.css`). Zéro néon, cartes mates avec
 * surbrillance légère au hover. Max 300L.
 */

/* ── Toggle SOLO / MULTI ──────────────────────────────────────────
 * Pastille capsule crème avec 2 segments. L'actif est une plaque
 * bleue émaillée (même palette que les plaques RATP). Sobre, compact. */
.bt-toggle{
  display:inline-flex;
  align-items:center;
  gap:0;
  padding:4px;
  background:var(--lv-paper, #fbf7ec);
  border:1px solid rgba(0,0,0,.2);
  border-radius:999px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5), 0 2px 4px rgba(0,0,0,.12);
}
html[data-theme="dark"] .bt-toggle{
  background:#26292e;
  border-color:rgba(255,255,255,.1);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04), 0 2px 4px rgba(0,0,0,.3);
}
.bt-toggle-btn{
  appearance:none;
  background:transparent;
  border:none;
  /* Tailles par viewport :
   *   - ≤ 2000px     : compact (cible ~14px / 9px vertical)
   *   - ≥ 2000px     : confortable (cible ~17px / 13px vertical)
   * Cibles séparées via media query plutôt que clamp linéaire, pour
   * éviter que le toggle soit "trop gros" à 1920 tout en restant
   * adapté sur 2K+. */
  padding:8px 22px;
  border-radius:999px;
  font-family:'Barlow Semi Condensed','Barlow',sans-serif;
  font-weight:700;
  font-size:13px;
  letter-spacing:1.8px;
  text-transform:uppercase;
  color:rgba(0,0,0,.45);
  cursor:pointer;
  transition:color .15s ease, background .15s ease, box-shadow .15s ease;
}
@media (min-width: 2000px){
  .bt-toggle-btn{
    padding:13px 36px;
    font-size:17px;
    letter-spacing:3px;
  }
}
html[data-theme="dark"] .bt-toggle-btn{ color:rgba(245,241,230,.5); }
.bt-toggle-btn:hover{ color:var(--lv-tile-blue, #003f7a); }
html[data-theme="dark"] .bt-toggle-btn:hover{ color:#6ea8ff; }
.bt-toggle-btn.active{
  background:var(--lv-tile-blue, #003f7a);
  color:#f8f6f0;
  box-shadow:
    inset 0 0 0 2px rgba(245,241,230,.6),
    inset 0 -2px 4px rgba(0,0,0,.35),
    0 2px 4px rgba(0,0,0,.25);
  text-shadow:0 1px 0 rgba(0,0,0,.4);
}

/* ── PANNEAUX PUBLICITAIRES MÉTRO (solo : Daily/Arcade/Jeu Libre)
 * Format Decaux : affiche portrait ratio 2:3 dans un cadre
 * aluminium anodisé noir + vitre rétro-éclairée. L'image finale sera
 * posée par background-image inline.
 *
 * Responsive : la taille est pilotée par la HAUTEUR viewport (--img-h
 * = min(58vh, 720px)), la largeur suit le ratio 2:3. Le container
 * prend min(92vw, largeur-totale-calculée) → sur 1080p on tient dans
 * 90% de l'écran, sur 2K+ les posters grandissent (jusqu'à img-h=720px
 * soit posters de 480×720 avant label). ───────────────────────────── */
/* ── Ligne de commande : toggle SOLO/MULTI + bouton RÉGLAGES ────
 * (le panneau dépliant lui-même est stylé dans service-band.css) */
.bt-ctlrow{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
}

.bt-posters{
  /* Enfant 1fr du grid mc-shell : REMPLIT la hauteur disponible.
   * Chaque poster prend `height:100%` et son `aspect-ratio` dicte
   * sa largeur :
   *   - jamais de débordement (la taille s'adapte à l'espace restant)
   *   - jamais de vide (si plus d'espace, les posters grossissent)
   *   - garde le ratio 2:3 portrait partout. */
  --gap: clamp(36px, 4.2vw, 70px);
  min-height:0;            /* autorise le shrink en flex/grid child */
  width:100%;
  display:flex;
  flex-direction:row;
  gap:var(--gap);
  align-items:stretch;
  justify-content:center;
}
.bt-poster{
  /* `container-type: inline-size` : labels scalent via cqw. */
  container-type: inline-size;
  /* Aspect-ratio SUR LE POSTER (pas le frame) : la largeur du poster
   * est dérivée de la hauteur. Ratio 2 / 3.15 approxime "frame 2:3 +
   * petite étiquette label en bas". Le frame à l'intérieur utilise
   * flex:1 et s'étire jusqu'au label. L'image remplit le frame 100%
   * → bordures VISUELLEMENT UNIFORMES sur les 4 côtés. */
  aspect-ratio: 2 / 3.15;
  height:100%;
  max-height:100%;
  min-width:0;
  appearance:none; border:none; cursor:pointer;
  padding:0; margin:0; background:transparent;
  display:flex; flex-direction:column; align-items:stretch;
  text-align:center;
  font-family:'Barlow Semi Condensed','Barlow',sans-serif;
  color:#f8f6f0;
  transition:transform .18s ease, filter .18s ease;
}
.bt-poster:hover:not(.disabled){ transform:translateY(-3px); filter:brightness(1.04); }
.bt-poster:active:not(.disabled){ transform:translateY(-1px); }
.bt-poster.disabled{ cursor:not-allowed; filter:grayscale(.6) brightness(.85); opacity:.65; }

/* Cadre métallique noir façon Decaux (aluminium anodisé sombre).
 * `flex:1 1 0` : le cadre prend tout l'espace vertical restant du
 * poster (après le label). Il N'A PAS de aspect-ratio fixe — sa
 * taille est dictée par le poster (aspect-ratio 2/3.15) moins le
 * label. L'image à l'intérieur remplit 100%×100% du cadre pour
 * garantir des BORDS UNIFORMES (même padding visuel partout). */
.bt-poster-frame{
  flex:1 1 0;
  min-height:0;
  display:flex;
  align-items:stretch;
  justify-content:stretch;
  position:relative;
  padding:clamp(6px, 1cqw, 12px);
  background:linear-gradient(180deg, #0e1114 0%, #1a1e23 60%, #0a0c0f 100%);
  border-radius:3px;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.09),
    inset 0 2px 0 rgba(255,255,255,.18),
    inset 0 -2px 0 rgba(0,0,0,.6),
    0 6px 14px rgba(0,0,0,.45),
    0 1px 0 rgba(255,255,255,.08);
}
/* 2 vis décoratives (haut-gauche / bas-droite) */
.bt-poster-frame::before, .bt-poster-frame::after{
  content:""; position:absolute; width:6px; height:6px; border-radius:50%;
  background:radial-gradient(circle at 30% 30%, #b0ada5 0%, #3a3830 55%, #0f0e0b 100%);
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.4), 0 1px 0 rgba(255,255,255,.05);
  z-index:1;
}
.bt-poster-frame::before{ top:4px; left:4px; }
.bt-poster-frame::after { bottom:4px; right:4px; }

/* Zone image — remplit 100% du cadre. Le ratio 2:3 est garanti par
 * le cadre parent (.bt-poster-frame), donc l'image n'a pas besoin
 * d'aspect-ratio — elle se stretch à 100% × 100% du cadre.
 * Résultat : bordures VISUELLEMENT UNIFORMES sur les 4 côtés. */
.bt-poster-img{
  position:relative;
  flex:1 1 auto;
  width:100%;
  height:100%;
  background:
    radial-gradient(ellipse at 50% 25%, rgba(255,220,160,.18) 0%, transparent 60%),
    linear-gradient(180deg, #e6e3da 0%, #c9c6bc 100%);
  border-radius:2px;
  box-shadow:
    inset 0 0 0 1px rgba(0,0,0,.25),
    inset 0 -8px 24px rgba(0,0,0,.2),
    inset 0 4px 10px rgba(255,255,255,.35);
  overflow:hidden;
  background-size:cover; background-position:center;
}
/* Reflet diagonal subtil type vitre */
.bt-poster-img::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(135deg,
    rgba(255,255,255,0) 0%, rgba(255,255,255,0) 40%,
    rgba(255,255,255,.14) 50%,
    rgba(255,255,255,0) 60%, rgba(255,255,255,0) 100%);
  pointer-events:none;
}
/* Masque le placeholder dès qu'une image est posée via style inline */
.bt-poster-img[style*="background-image"] .bt-poster-placeholder{ display:none; }
.bt-poster-placeholder{
  position:absolute; inset:0;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:4px;
  color:rgba(40,40,40,.55);
  font-family:'Share Tech Mono','JetBrains Mono',monospace;
  text-transform:uppercase; letter-spacing:2.5px;
}
.bt-poster-ph-label{ font-size:11px; font-weight:500; }
.bt-poster-ph-ratio{ font-size:16px; font-weight:700; color:rgba(0,63,122,.55); }

/* Chip (BIENTÔT / NEW / libellé réseau) — épinglé en haut-droit du
 * cadre vitre. Plaque bleu RATP émaillée avec double filet interne
 * pour rappeler les plaques du reste de la DA. */
.bt-poster-chip{
  position:absolute; top:6px; right:6px; z-index:2;
  padding:3px 9px;
  font-family:'Barlow Semi Condensed','Barlow',sans-serif;
  font-weight:800; font-size:10px; letter-spacing:1.4px;
  background:linear-gradient(180deg, #0e67b5 0%, #003f7a 100%);
  color:#f8f6f0;
  border-radius:2px;
  box-shadow:
    inset 0 0 0 1px rgba(245,241,230,.35),
    0 1px 3px rgba(0,0,0,.45);
  text-transform:uppercase;
  white-space:nowrap;
  text-shadow:0 1px 0 rgba(0,0,0,.35);
}

/* Variante "Fixe" (réseau imposé, ex: Daily Challenge) — teinte
 * cuivre atténuée + hachures diagonales + mini cadenas CSS-only
 * pour signaler que le filtre Réseau en bas ne s'y applique pas. */
.bt-poster-chip-fixed{
  padding-left:17px;
  background:
    repeating-linear-gradient(
      135deg,
      rgba(0,0,0,.18) 0 2px,
      transparent 2px 5px),
    linear-gradient(180deg, #7a5a22 0%, #4a3812 100%);
  box-shadow:
    inset 0 0 0 1px rgba(245,241,230,.5),
    0 1px 3px rgba(0,0,0,.45);
}
/* Cadenas CSS-only : petit rectangle + anse incurvée dessinés en
 * ::before, pour éviter d'utiliser un emoji qui rend différemment
 * selon les OS. */
.bt-poster-chip-fixed::before{
  content:'';
  position:absolute;
  left:6px; top:50%;
  transform:translateY(-50%);
  width:7px; height:8px;
  background:#f8f6f0;
  border-radius:1px;
  box-shadow:
    inset 0 1px 0 rgba(0,0,0,.25),
    0 0 0 1px rgba(0,0,0,.35);
}
.bt-poster-chip-fixed::after{
  content:'';
  position:absolute;
  left:7.5px; top:calc(50% - 6px);
  width:4px; height:4.5px;
  border:1.3px solid #f8f6f0;
  border-bottom:none;
  border-radius:3px 3px 0 0;
}

/* Étiquette inférieure — plaque noire façon cadre de cinéma.
 * Taille de texte scale en clamp() pour rester lisible à tous les
 * viewports (plus grande sur 2K+, compacte sur petit écran). */
.bt-poster-label{
  margin-top:-2px;
  padding:clamp(10px, 1vh, 16px) 8px clamp(12px, 1.3vh, 18px);
  background:linear-gradient(180deg, #14181d 0%, #0a0c10 100%);
  border-radius:0 0 3px 3px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08),
    inset 0 -2px 0 rgba(0,0,0,.5);
}
/* Titre & sous-titre : wrappés dans un conteneur `overflow:hidden`,
 * le texte interne est un `inline-block` qui se déplace via
 * transform quand il dépasse. Le marquee n'est ACTIVÉ que si la
 * classe `.is-overflow` est posée (via JS qui compare scrollWidth à
 * clientWidth). Sinon le texte est statique, pas d'animation parasite. */
.bt-poster-title, .bt-poster-sub{
  display:block;
  overflow:hidden;
  position:relative;
  white-space:nowrap;
}
.bt-poster-title > span, .bt-poster-sub > span{
  display:inline-block;
  will-change:transform;
}
.bt-poster-title.is-overflow > span{
  animation:bt-marquee 14s linear infinite;
}
.bt-poster-sub.is-overflow > span{
  animation:bt-marquee 18s linear infinite;
}
/* Pause du marquee au survol du poster → le user peut lire tranquille */
.bt-poster:hover .bt-poster-title.is-overflow > span,
.bt-poster:hover .bt-poster-sub.is-overflow > span{
  animation-play-state:paused;
}
@keyframes bt-marquee {
  0%, 12%  { transform:translateX(0); }
  50%, 62% { transform:translateX(calc(-100% + 100cqw - 16px)); }
  100%     { transform:translateX(0); }
}

.bt-poster-title{
  font-weight:800;
  font-size:clamp(11px, 5.4cqw, 20px);
  letter-spacing:clamp(.8px, .6cqw, 2.6px);
  color:#ffbf66; text-transform:uppercase;
  text-shadow:0 1px 0 rgba(0,0,0,.5);
}
.bt-poster-sub{
  margin-top:3px;
  font-weight:500;
  font-size:clamp(9px, 3.3cqw, 13px);
  letter-spacing:clamp(.2px, .1cqw, .8px);
  color:rgba(245,241,230,.55);
  text-transform:uppercase;
}

/* Grossir aussi le placeholder pour l'équilibre visuel sur grand écran */
.bt-poster-ph-label{ font-size:clamp(11px, .8vw, 15px); }
.bt-poster-ph-ratio{ font-size:clamp(16px, 1.2vw, 24px); }

/* ── Réglages : voir styles/theme/pinboard/service-band.css (svc-*)
 * — le bandeau de service a remplacé les anciennes cartes option
 * (.bt-option-card / .bt-check), rendu par options-panel.js. ────── */
.bt-pseudo-inline[hidden]{ display:none; }

/* ── Cases code de room (guichet REJOINDRE, base partagée) ──────── */
.bt-code-boxes{
  display:inline-flex; gap:6px;
}
.bt-code-box{
  width:36px; height:46px;
  text-align:center;
  background:var(--lv-paper, #fbf7ec);
  border:1.5px solid rgba(0,0,0,.25);
  border-radius:3px;
  font-family:'Barlow Semi Condensed','Barlow',sans-serif;
  font-weight:800;
  font-size:24px;
  letter-spacing:0;
  color:var(--lv-tile-blue, #003f7a);
  text-transform:uppercase;
  box-shadow:inset 0 1px 2px rgba(0,0,0,.1);
  outline:none;
  transition:border-color .15s ease, box-shadow .15s ease;
}
html[data-theme="dark"] .bt-code-box{
  background:#1a1b1c;
  border-color:rgba(255,255,255,.2);
  color:#6ea8ff;
}
.bt-code-box:focus{
  border-color:var(--lv-tile-blue, #003f7a);
  box-shadow:inset 0 1px 2px rgba(0,0,0,.1), 0 0 0 2px rgba(0,63,122,.18);
}
.bt-code-box:placeholder-shown{ color:rgba(0,0,0,.2); }
.bt-join-hint{
  font-family:'Barlow Semi Condensed','Barlow',sans-serif;
  font-size:11px;
  letter-spacing:1.6px;
  text-transform:uppercase;
  color:var(--lv-ink, #1a1b1c);
  opacity:.6;
}
.bt-join-hint-top{
  margin-bottom:2px;
  font-size:12px;
  font-style:italic;
  letter-spacing:.8px;
  text-transform:none;
  opacity:.75;
}

/* Zone pseudo inline (affichée quand pas de pseudo stocké) */
.bt-pseudo-inline{
  display:flex; flex-direction:column; align-items:center; gap:6px;
  margin:18px auto 0;
  max-width:360px;
}
.bt-pseudo-inline input{
  padding:10px 14px;
  font-family:'Barlow Semi Condensed','Barlow',sans-serif;
  font-weight:700; font-size:14px; letter-spacing:1.5px;
  background:var(--lv-paper, #fbf7ec);
  border:1.5px solid rgba(0,0,0,.25);
  border-radius:3px;
  color:var(--lv-ink, #1a1b1c);
  text-align:center;
  text-transform:uppercase;
  outline:none;
  min-width:240px;
}
html[data-theme="dark"] .bt-pseudo-inline input{
  background:#1a1b1c; border-color:rgba(255,255,255,.2); color:#e9eaee;
}
.bt-pseudo-inline input:focus{ border-color:var(--lv-tile-blue, #003f7a); }

.bt-error{
  color:#c23e3e;
  font-family:'Barlow Semi Condensed','Barlow',sans-serif;
  font-size:12px; letter-spacing:.5px;
  margin-top:8px;
}

/* ── Mobile (≤ 720px) : carrousel de quai ───────────────────────────
 * Les posters Decaux défilent horizontalement avec snap (comme on
 * longe les panneaux sur un quai) au lieu de déborder de l'écran.
 * Le bandeau de service reste entièrement visible en dessous —
 * c'était LE défaut majeur : réglages hors écran + overflow:hidden. */
@media (max-width: 720px){
  .bt-posters{
    --gap: 14px;
    justify-content:flex-start;
    /* `safe center` : centre quand ça tient, scroll sans clipper sinon
     * (fallback flex-start si non supporté — la ligne est ignorée). */
    justify-content:safe center;
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    padding:0 6vw 6px;
    scroll-padding:0 6vw;
  }
  .bt-posters::-webkit-scrollbar{ display:none; }
  /* Item de carrousel : interdit le shrink flex (sinon l'aspect-ratio
   * casse) — c'est le scroll horizontal qui absorbe le surplus. */
  .bt-poster{ scroll-snap-align:center; flex:0 0 auto; }

  /* Toggle SOLO/MULTI : cible tactile ≥ 44px */
  .bt-toggle-btn{ padding:14px 26px; }
}