/* =========================================================================
   lanyard.css — Badge « Mon club » suspendu à une lanière (lanyard.js),
   partagé par l'accueil LDC et les accueils Europa / Conference League.
   La page réserve la place (#lanyard dans la colonne droite de son bandeau) ;
   --lc-mark : filigrane du bandeau de la carte (ballon étoilé LDC par défaut).
   ========================================================================= */
/* ---- Badge « Mon club » : accréditation suspendue à une lanière ----
   Place RÉSERVÉE dans la colonne droite du bandeau (≥ 960 px) : le badge ne
   recouvre ni le titre, ni la navigation, ni la carte du favori. La scène
   (.ly-stage) déborde de la colonne pour laisser la carte se balancer ; elle
   ne capte pas les clics, seule la carte le fait. Masqué en dessous de
   960 px, où la carte « Mon équipe » remplit le même rôle. */
#lanyard{ position:relative; height:350px; pointer-events:none; }
.ly-stage{ position:absolute; top:-44px; bottom:-30px; left:-110px; right:-60px; }
#lanyardCanvas{ position:absolute; inset:0; width:100%; height:100%; pointer-events:none;
  -webkit-mask-image:linear-gradient(to bottom, transparent 0, #000 46px); mask-image:linear-gradient(to bottom, transparent 0, #000 46px); }
.lanyard-card{ position:absolute; top:0; left:0; width:178px; pointer-events:auto; cursor:grab; touch-action:none;
  user-select:none; -webkit-user-select:none; transform-origin:50% 0; will-change:transform; }
.lanyard-card.grabbing{ cursor:grabbing; }
.lanyard-card.is-empty{ cursor:pointer; }
.lc-inner{ position:relative; border-radius:14px; overflow:hidden; background:#f5f7fb; color:#0b1020;
  box-shadow:0 22px 46px rgba(0,0,0,.5), 0 2px 0 rgba(255,255,255,.6) inset, 0 0 0 1px rgba(255,255,255,.18); }
.lc-slot{ position:absolute; top:7px; left:50%; transform:translateX(-50%); width:34px; height:7px; border-radius:4px; z-index:4;
  background:#070b18; box-shadow:inset 0 1px 2px rgba(0,0,0,.9), 0 1px 0 rgba(255,255,255,.25); }
.lc-head{ position:relative; height:92px; padding:24px 12px 0; display:flex; justify-content:space-between; align-items:flex-start;
  background:rgb(var(--club)); color:var(--ink); overflow:hidden; }
.lc-head::after{ content:''; position:absolute; right:-38px; top:-30px; width:150px; height:150px; opacity:.16;
  background:var(--lc-mark, url("starball.svg?v=2")) center/contain no-repeat; mix-blend-mode:soft-light; }
.lc-brand{ position:relative; z-index:1; display:flex; align-items:center; gap:6px; font-family:var(--font-d, 'Bebas Neue', Impact, sans-serif); font-size:12px; line-height:.95; letter-spacing:.08em; text-transform:uppercase; }
.lc-brand img{ width:20px; height:20px; border-radius:4px; }
.lc-season{ position:relative; z-index:1; font-family:var(--font-d, 'Bebas Neue', Impact, sans-serif); font-size:12px; letter-spacing:.08em; padding:2px 6px; border-radius:5px;
  border:1px solid currentColor; opacity:.9; }
.lc-crest{ position:relative; z-index:2; width:84px; height:84px; margin:-40px auto 0; border-radius:50%; background:#fff;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 0 0 4px #f5f7fb, 0 0 0 6px rgb(var(--club)), 0 8px 18px rgba(0,0,0,.25); }
.lc-crest img{ width:60px; height:60px; object-fit:contain; }
.lc-body{ padding:10px 14px 13px; text-align:center; }
.lc-name{ font-family:var(--font-d, 'Bebas Neue', Impact, sans-serif); font-size:26px; line-height:.98; letter-spacing:.02em; color:#0b1020;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; overflow-wrap:anywhere; }
.lc-role{ display:inline-block; margin-top:7px; padding:3px 10px; border-radius:999px; font-size:9.5px; font-weight:900;
  letter-spacing:.16em; text-transform:uppercase; background:rgb(var(--club)); color:var(--ink); }
.lc-foot{ display:flex; align-items:center; justify-content:space-between; gap:8px; margin-top:12px; padding-top:9px; border-top:1px dashed rgba(11,16,32,.18); }
.lc-code{ font-family:var(--font-d, 'Bebas Neue', Impact, sans-serif); font-size:12.5px; letter-spacing:.1em; color:#3a4560; white-space:nowrap; }
.lc-bar{ display:block; width:64px; height:20px; }
/* Reflet holographique : glisse avec l'inclinaison de la carte (--tilt). */
.lc-holo{ position:absolute; inset:0; pointer-events:none; z-index:3; mix-blend-mode:screen; opacity:.5;
  background:linear-gradient(115deg, transparent 30%, rgba(255,255,255,.55) 44%, rgba(160,220,255,.25) 50%, transparent 62%);
  background-size:260% 100%; background-position:calc(50% + var(--tilt, 0%)) 0; }
@media (prefers-reduced-motion:reduce){ .lc-holo{ display:none; } }
@media (max-width:959px){ #lanyard{ display:none; } }
