/* ============================================================
   WatchOut — App mobile-first
   Reproduit la maquette Figma (frame iPhone 17, 402px de référence).
   Les dimensions des cards sont VERROUILLÉES (cf. tokens.css).
   ============================================================ */

* { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  background-color: var(--dark-background);
  color: var(--text-primary);
  font-family: var(--font-ui);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Colonne applicative : mobile d'abord, centrée sur grand écran */
.app {
  width: 100%;
  height: 100vh;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  position: relative;
  overflow: hidden;
}

/* Barres : elles remplissent toute la largeur, l'inset vient du padding (comme Figma). */
.bar-inner {
  width: 100%;
  display: flex;
  align-items: center;
}
.app-header .bar-inner { justify-content: space-between; padding: 0 10px; }
.app-footer .bar-inner { justify-content: center; gap: 30px; padding: 0 30px; }

/* ============================================================
   HEADER
   ============================================================ */
.app-header {
  width: 100%;
  flex-shrink: 0;
  display: flex;
  justify-content: center;
  padding: 14px 0;
  /* Le gap du haut = la safe-area fournie par l'OS (status bar / encoche /
     Dynamic Island), valeur exacte par modèle. En preview desktop = 0.
     Le 64px de la maquette ne faisait que simuler cette safe-area. */
  padding-top: env(safe-area-inset-top);
  background: var(--dark-background);
  border-bottom: 2px solid var(--background-surface);
}

/* Icônes = assets exportés (img). Taille portée par le conteneur. */
.ic { display: block; width: 20px; height: 20px; object-fit: contain; }
.ic--back { transform: rotate(180deg); }   /* flèche Figma (droite) -> gauche = Back */
.ic--play-r { transform: rotate(90deg); }  /* play (haut) -> droite = navigation */

/* Le logo + nom est un BOUTON : retour à l'accueil depuis n'importe où. */
.brand {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 10px;
  background: none;
  border: 0;
  cursor: pointer;
  text-decoration: none;
}
.brand__logo { width: 30px; height: 28px; display: block; flex-shrink: 0; }
.brand__name {
  font-family: var(--font-display);
  font-size: 20px;
  color: var(--brand-primary-dark);
  line-height: normal;
  white-space: nowrap;
}

.app-actions { display: flex; align-items: center; gap: 10px; }

/* Sélecteur de langue (Figma 412:4297 / 412:4298). Pastille de 25px (+ bordure) ;
   ouverte, la boîte s'allonge VERS LE BAS par-dessus le contenu (le header ne bouge pas). */
.lang { position: relative; width: 80px; height: 27px; flex-shrink: 0; }
.lang__box {
  position: absolute; top: 0; left: 0; right: 0; z-index: 60;
  display: flex; flex-direction: column; gap: 5px;
  background: var(--dark-background);
  border: 1px solid var(--background-surface);
  border-radius: 10px;
}
.lang__row {
  display: flex; align-items: center; gap: 5px;
  height: 25px; padding: 5px; width: 100%;
  background: none; border: 0; cursor: pointer; color: inherit;
}
.lang__row[hidden] { display: none; }
.lang__ic { width: 15px; height: 15px; flex-shrink: 0; display: block; }
.lang__code {
  width: 35px; text-align: center;
  font-family: var(--font-display); font-size: 20px; line-height: 1; color: #fff;
}
/* Export Figma = flèche vers la droite ; la maquette l'affiche vers le bas. */
.lang__chev { width: 8px; height: 10px; flex-shrink: 0; display: block; transform: rotate(90deg); }
.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}
.icon-btn[data-icon="settings"] .ic { width: 20px; height: 20px; }
.icon-btn[data-icon="profile"] .ic { width: 25px; height: 25px; }

/* ============================================================
   CARROUSSEL PRINCIPAL
   ============================================================ */
.carousel {
  position: relative;
  width: 100%;
  padding: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
  border-bottom: 1px solid var(--background-card);
}

.carousel__viewport { position: relative; width: 100%; overflow: hidden; }
.carousel__row { display: flex; align-items: center; gap: 12px; width: 100%; }
.carousel__row .carousel__viewport { flex: 1 1 auto; min-width: 0; }
/* Contenu d'un slide réduit si 1/3 de largeur < big card (PC étroit) : 3 cartes entières. */
.carousel__slide > * { zoom: var(--car-zoom, 1); }
/* Flèches latérales : PC uniquement (bouton Figma 220:3829 agrandi) ; le mobile swipe. */
.carousel__row .carousel__arrow { display: none; }

.carousel__track {
  display: flex;
  transition: transform 0.32s cubic-bezier(0.22, 0.61, 0.36, 1);
  will-change: transform;
}
.carousel__track.is-dragging { transition: none; }

.carousel__slide {
  flex: 0 0 calc(100% / var(--car-per, 1));   /* --car-per = slides visibles (3 sur PC) */
  display: flex;
  justify-content: center;
  align-items: flex-start;
}

/* Zones de tap gauche/droite : uniquement dans les gouttières,
   pour ne JAMAIS recouvrir la card (qui est un bouton à part entière). */
.carousel__nav {
  position: absolute;
  top: 0;
  height: 100%;
  width: calc((100% - var(--card-big-w)) / 2);
  /* Le switch se fait au SWIPE, pas au clic : les gouttières ne captent plus le tap
     (sinon un stream, plus large que la card, déborde dessus et switchait au clic). */
  pointer-events: none;
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
  z-index: 2;
}
.carousel__nav--prev { left: 0; }
.carousel__nav--next { right: 0; }
.carousel__nav:disabled { cursor: default; }

/* Graduation = logos de compétition. La pastille de sélection est FIXE au centre ;
   c'est la piste de logos qui se translate pour amener l'actif au centre.
   Tous les logos sont recolorés en BLANC et à la même taille (29px). */
.carousel__dots {
  position: relative;
  width: 100%;
  /* Fenêtre limitée à ~5 logos VISIBLES + cliquables (le reste est clippé) ;
     la piste continue de glisser pour centrer l'actif (mécanique inchangée). */
  max-width: 244px;
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
  overflow: hidden;
  height: 49px;
  min-height: 49px;
}
/* Pastille informatrice fixe (encadré dégradé) centrée */
.dot-hl {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 45px; height: 45px; border-radius: 5px; z-index: 0; pointer-events: none;
  background-image: linear-gradient(137deg, var(--brand-primary-dark) 3%, var(--background-surface) 101%);
}
/* Piste de logos qui coulisse */
.dot-track {
  position: absolute; top: 0; left: 0; height: 100%; z-index: 1;
  display: flex; align-items: center; gap: 16px;
  transition: transform 0.25s ease; will-change: transform;
}
.dot--logo { position: relative; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; border: 0; padding: 0; background: none; cursor: pointer; }
/* Pastille "live" (stream en direct) : ancrée au coin haut-droit du logo (29px),
   donc position/taille identiques que la pastille soit active ou non ; tient dans
   les 8px de marge de la pastille informatrice sans en changer la taille. */
.dot__live { position: absolute; top: -2px; right: -2px; width: 10px; height: 10px; border-radius: 50%; z-index: 2; pointer-events: none;
  background: var(--twitch); box-shadow: 0 0 0 2px var(--dark-background); animation: dotLiveBlink 1.1s ease-in-out infinite; }
@keyframes dotLiveBlink { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }
@media (prefers-reduced-motion: reduce) { .dot__live { animation: none; } }
.dot__logo { width: 29px; height: 29px; display: block; background-color: var(--text-primary);
  -webkit-mask: var(--logo) center / contain no-repeat; mask: var(--logo) center / contain no-repeat; }
.dot__logo--ph { width: 29px; height: 29px; background-color: var(--brand-primary-dark); border-radius: 50%; -webkit-mask: none; mask: none; }

/* Slide "stream" : player Twitch 16:9 condensé, centré dans la hauteur d'une big card */
.cstream { align-self: stretch; width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 10px; box-sizing: border-box; }
.cstream__box { width: 100%; max-width: 340px; display: flex; flex-direction: column; gap: 10px; }
.cstream__player { position: relative; width: 100%; aspect-ratio: 16 / 9; border-radius: 5px; overflow: hidden; background: var(--background-primary); }
.cstream__player iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }
/* Couche transparente au-dessus de l'iframe : capte le tactile (l'iframe le mangeait,
   donc le swipe du carrousel ne marchait pas au-dessus d'un stream) + tap = ouvre la compé. */
/* Le player reste interactif (lecture, son, plein écran) ; c'est la surface autour qui ouvre la compét. */
.cstream { cursor: pointer; }
.cstream__info { text-align: center; }
.cstream__live { display: inline-flex; align-items: center; gap: 4px; padding: 1px 6px; border-radius: 4px; background: var(--twitch); font-family: var(--font-ui); font-size: 12px; line-height: normal; color: #fff; }
.cstream__dot { width: 5px; height: 5px; border-radius: 50%; background: #fff; }
.cstream__comp { margin: 6px 0 0; font-family: var(--font-display); font-size: 16px; line-height: normal; color: var(--text-primary); }
.cstream__stage { margin: 2px 0 0; font-family: var(--font-ui); font-size: 13px; line-height: normal; color: var(--text-muted); }
.cstream__teams { margin: 2px 0 0; font-family: var(--font-ui); font-size: 15px; line-height: normal; color: var(--text-primary); }

/* ============================================================
   CARD BIG — 240 × 328 (+ bordure) — dimensions verrouillées
   ============================================================ */
.card-big {
  position: relative;
  width: var(--card-big-w);
  flex: 0 0 var(--card-big-w);
  border: 1px solid var(--brand-primary-light);   /* pas live -> bleu clair */
  border-radius: 10px;
  overflow: hidden;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.card-big[data-live="1"] { border-color: var(--twitch); }   /* live -> violet twitch */

/* Fond : vignette (logo ou image) + scrim de lisibilité */
.card-big__bg {
  position: absolute;
  inset: 0;
  border-radius: 10px;
  background-color: var(--card-placeholder);
  overflow: hidden;
  pointer-events: none;
}
.card-big__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 10px;
  background: linear-gradient(180deg, rgba(102, 102, 102, 0) 0%, rgba(0, 0, 0, 0.61) 100%);
}

.card-big__inner {
  position: relative;
  z-index: 1;
  height: var(--card-big-h);
  width: 100%;
  padding: 10px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

/* Zone haute (layout LIVE) : pousse le contenu vers le bas */
.card-big__top {
  flex: 1 0 0;
  min-height: 0;
  width: 100%;
  display: flex;
  align-items: flex-start;
  padding: 10px;
  overflow: hidden;
}

.live-badge { display: flex; align-items: center; justify-content: center; gap: 10px; }
.live-badge__signal { width: 16px; height: 15px; display: block; flex-shrink: 0; }
.live-badge__label { display: flex; align-items: center; gap: 3px; }
.live-badge__dot { width: 5px; height: 5px; display: block; flex-shrink: 0; }
.live-badge__label span {
  font-family: var(--font-ui);
  font-size: 15px;
  color: #fff;
  white-space: nowrap;
}

/* Bloc bas : logo jeu + textes + actions */
.card-big__body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  width: 100%;
}

.game-logo { width: 38px; height: 38px; object-fit: contain; display: block; flex-shrink: 0; }
.game-logo--sm { width: 16px; height: 16px; }

.card-big__texts {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  width: 100%;
  text-align: center;
  color: #fff;
  word-break: break-word;
}
.card-big__texts p { margin: 0; line-height: normal; width: 100%; }
/* Hiérarchie typographique de la card (règle produit) :
   Hammersmith = compétition + étape ; League Gothic = sous-étapes, équipes, date. */
.t-competition  { font-family: var(--font-display); font-size: 15px; }
.t-stage        { font-family: var(--font-display); font-size: 10px; }
.t-substage     { font-family: var(--font-ui); font-size: 15px; }
.t-subsubstage  { font-family: var(--font-ui); font-size: 15px; }
.t-teams        { font-family: var(--font-ui); font-size: 15px; }
.t-date         { font-family: var(--font-ui); font-size: 15px; }

/* Actions */
.card-big__actions {
  display: flex;
  align-items: stretch;
  justify-content: center;
  gap: 8px;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: var(--control-h);   /* même hauteur que la cloche */
  padding: 0 12px;            /* le vertical est porté par la hauteur fixe */
  border: 0;
  border-radius: 5px;
  font-family: var(--font-ui);
  font-size: 15px;
  line-height: 1;
  color: #fff;
  white-space: nowrap;
  cursor: pointer;
}
.btn__play { width: 10px; height: 9px; display: block; flex-shrink: 0; }
.btn--watch { background: var(--twitch); border: 1px solid var(--brand-primary-light); width: 119.5px; }
.btn--details { background: var(--grad-btn-primary); padding: 0 24px; }
.btn__ic { width: 15px; height: 15px; object-fit: contain; display: block; flex-shrink: 0; }
/* Orientation de l'icône selon le bouton (le SVG exporté est le polygone brut, non pivoté) */
.btn--watch .btn__play { transform: rotate(90deg); }

/* Bookmark : enregistrer une compétition (asset exporté, 15×20, blanc #f8fafc) */
.card-bookmark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}
.card-bookmark .ic { width: 15px; height: 20px; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.6)); }
/* card big : dans la rangée d'actions, alignée sur la hauteur des boutons */
.card-big__actions .card-bookmark { height: var(--control-h); }

/* Cloche de notif (asset exporté, blanc #f8fafc off / cyan on) — étape/affrontement de la card */
.card-bell { display: inline-flex; align-items: center; justify-content: center; padding: 0; border: 0; background: none; cursor: pointer; }
.card-bell .ic { width: 20px; height: 19.5px; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.6)); }
.card-big__actions .card-bell { height: var(--control-h); }
/* card lil : colonne bas-droite (cloche au-dessus du bookmark) */
.card-lil__actions { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; flex-shrink: 0; }
.card-lil__actions .card-bell .ic { width: 16px; height: 15.5px; }
/* Cloche d'en-tête de page (team / game / compétition) — à côté du nom/bookmark */
.notif-head .ic { width: 20px; height: 19.5px; }
/* Cloche sur une card du schedule (.mrow), à droite du badge */
.mrow-top__actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.notif-mrow .ic { width: 18px; height: 17.5px; }
/* Toggle de notif d'une étape (module standing) : ligne titre centrée */
.cstg-titlerow { display: flex; align-items: center; justify-content: center; gap: 8px; }
.cstg-titlerow .card-bell .ic { width: 18px; height: 17.5px; }

/* ============================================================
   RANGÉES (carrousels simples de petites cards)
   ============================================================ */
.rows {
  display: flex;
  flex-direction: column;
  gap: 0;
  width: 100%;
  padding: 0;
}

.row { display: flex; flex-direction: column; gap: 10px; width: 100%; padding: 20px; border-bottom: 1px solid var(--background-card); }
.row__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 20px;
  color: var(--text-muted);
  line-height: normal;
  white-space: nowrap;
}
.row__track {
  display: flex;
  gap: 20px;
  align-items: flex-start;
  width: 100%;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.row__track::-webkit-scrollbar { display: none; }
.row__track > * { scroll-snap-align: start; }

/* ----- Home : matchs à venir des équipes favorites (Figma 215:4479) ----- */
.fav-up { display: flex; flex-direction: column; gap: 10px; width: 100%; padding: 20px; border-bottom: 1px solid var(--background-card); }
.fav-up:empty { display: none; }
.fav-up__empty { font-family: var(--font-ui); font-size: 13px; color: var(--text-muted); }

/* Carrousel de logos d'équipe (ALL + logos) */
.fav-logos { position: relative; width: 100%; }
.fav-logos__track { display: flex; align-items: center; gap: 10px; width: 100%; overflow-x: auto; overflow-y: hidden; padding-right: 46px; scrollbar-width: none; -ms-overflow-style: none; }
.fav-logos__track::-webkit-scrollbar { display: none; }
.fav-logos__fade {
  position: absolute; top: 0; right: 0; bottom: 0;
  display: flex; align-items: center; padding-left: 20px;
  background: linear-gradient(to left, var(--dark-background) 50%, rgba(4, 7, 12, 0) 100%);
  pointer-events: none;
}
.fav-logos__fade .agn-arrow { pointer-events: auto; }
.fav-logo {
  box-sizing: border-box; flex-shrink: 0; width: 50px; height: 50px; padding: 5px;
  border: 1px solid transparent; border-radius: 5px; background: var(--background-surface); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
}
.fav-logo--all { background: transparent; border-color: var(--background-surface); font-family: var(--font-display); font-size: 20px; color: var(--text-primary); }
.fav-logo.is-on { border-color: var(--brand-primary-light); }
.fav-logo__img { width: 100%; height: 100%; background-size: contain; background-position: center; background-repeat: no-repeat; }
.fav-logo__img--ph { background-color: var(--background-primary); border-radius: 5px; }

/* Bascules Next / Results du module "matchs des favoris" (réutilise le chrome .agn-chip). */
.fav-toggles { display: flex; align-items: center; gap: 10px; width: 100%; margin-top: 10px; }
.fav-toggle { flex: 0 0 auto; }

/* Carrousels en boucle : flèche/fondu de GAUCHE (miroir de droite), masquée au départ */
.fav-logos__fade--left, .agn-carousel__fade--left {
  right: auto; left: 0; padding-left: 0; padding-right: 20px;
  background: linear-gradient(to right, var(--dark-background) 50%, rgba(4, 7, 12, 0) 100%);
}
.fav-logos__fade--left .agn-arrow__ic, .agn-carousel__fade--left .agn-arrow__ic { transform: rotate(-90deg); }
.fav-logos__fade[hidden], .agn-carousel__fade[hidden] { display: none; }

/* ============================================================
   CARD LIL — 145 × 198 (+ bordure) — dimensions verrouillées
   ============================================================ */
.card-lil {
  position: relative;
  width: var(--card-lil-w);
  flex: 0 0 var(--card-lil-w);
  border: 2px solid var(--background-card);
  border-radius: 3.021px;
  overflow: hidden;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.card-lil[data-live="1"],
.card-lil[data-scored="1"] { border-color: var(--brand-accent); }   /* live / à score -> violet twitch */

.card-lil__bg {
  position: absolute;
  inset: 0;
  border-radius: 3.021px;
  background-color: var(--card-placeholder);
  overflow: hidden;
  pointer-events: none;
}

/* ============================================================
   VIGNETTES — deux setups (cf. Figma "sans images" / "avec images")
   ============================================================ */

/* --- Setup 1 : SANS image -> dégradé coloré EN FOND de card (Figma 174:6976,
   violet #8b5cf6 haut-gauche -> #8498f9 -> sky #7dd3fc bas-droite) + logo BLANC --- */
[data-vignette="logo"] {
  background: radial-gradient(ellipse at top left, #8b5cf6 0%, #8498f9 50%, #7dd3fc 100%);
}

/* Le logo est affiché dans ses COULEURS D'ORIGINE (aucun masque ni recoloration),
   posé sur le dégradé coloré de fond de la card. Géométrie inchangée (grand + rogné). */
.vignette-logo {
  position: absolute;
  left: 13.33%;          /* 32px sur une card de 240 */
  top: 8.48%;            /* 28px sur une card de 330 */
  width: 136.67%;        /* 328px sur une card de 240 -> déborde et se fait rogner */
  aspect-ratio: 1 / 1;
  background-image: var(--logo);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

/* --- Setup 2 : AVEC image -> on remplit (les images ne sont jamais au bon format) --- */
.vignette-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;     /* "fill" : on couvre et on rogne */
  display: block;
}

/* Le petit rectangle au contour en pointillés, inséré de 5px */
.vignette-frame {
  position: absolute;
  inset: 5px;
  border: 1px dashed #000;
  border-radius: 10px;
  pointer-events: none;
}

.card-lil__inner {
  position: relative;
  z-index: 1;
  height: var(--card-lil-h);
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  overflow: hidden;
  /* Variante Next : scrim sombre */
  background:
    linear-gradient(180deg, rgba(4, 7, 12, 0.2) 0%, rgba(255, 255, 255, 0) 100%),
    linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(4, 7, 12, 0.7) 100%);
}
/* Variantes live (1 ou plusieurs matchs) + à score : scrim VIOLET TWITCH */
.card-lil[data-live="1"] .card-lil__inner,
.card-lil[data-scored="1"] .card-lil__inner {
  background:
    linear-gradient(180deg, rgba(137, 86, 251, 0.2) 0%, rgba(255, 255, 255, 0) 100%),
    linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(137, 86, 251, 0.7) 100%);
}

.card-lil__content {
  flex: 1 0 0;
  min-height: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  padding: 5px 10px;
}

.card-lil__top { display: flex; align-items: flex-start; gap: 5px; }
.card-lil__titles {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  color: var(--text-primary);
  word-break: break-word;
}
/* En live / à score, le bloc de titres est aligné à droite (cf. maquette) */
.card-lil[data-live="1"] .card-lil__titles,
.card-lil[data-scored="1"] .card-lil__titles { align-items: flex-end; }

.card-lil__titles p, .card-lil__bottom p { margin: 0; line-height: normal; white-space: nowrap; }
.card-lil__line { display: flex; align-items: center; gap: 2px; }
.lil-dot { width: 7px; height: 7px; display: block; flex-shrink: 0; }

/* Petites cards : tout en League Gothic (20px puis 15px) */
.t-lil-competition { font-family: var(--font-ui); font-size: 20px; }
.t-lil-stage       { font-family: var(--font-ui); font-size: 15px; }
.t-lil-teams       { font-family: var(--font-ui); font-size: 20px; }
.t-lil-sub         { font-family: var(--font-ui); font-size: 15px; }
.t-lil-when        { font-family: var(--font-ui); font-size: 15px; }

/* Bas de la card lil : texte à gauche, bookmark à droite, alignés en bas (Figma) */
.card-lil__bottomrow {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  width: 100%;
  gap: 5px;
}
.card-lil__bottom {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 5px;
  color: var(--text-primary);
  white-space: nowrap;
}

/* ============================================================
   CARDS À SCORE — pill de statut (DIRECT / FINISHED), chiffres,
   bouton œil (anti-spoil). Cf. Figma lil 54:1320 / big 44:32.
   ============================================================ */

/* Pill de statut (big card) : DIRECT (fond bleu clair) / FINISHED (fond sombre) */
.score-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  border-radius: 10px;
  font-family: var(--font-ui);
  font-size: 12px;
  line-height: normal;
  white-space: nowrap;
}
.score-badge--live { background: var(--brand-primary-light); color: var(--text-primary); }
.score-badge--finished { background: var(--background-primary); color: #b3b3b3; }
.score-badge__dot { width: 7px; height: 7px; display: block; flex-shrink: 0; }

/* Chiffres du score */
.t-score-big { font-family: var(--font-ui); font-size: 28px; color: #fff; white-space: nowrap; }
.t-score-lil { font-family: var(--font-ui); font-size: 20px; color: var(--text-primary); white-space: nowrap; }

/* Ligne de score : chiffres + œil */
.card-big__score {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}
.card-lil__score {
  display: flex;
  align-items: center;
  gap: 10px;
}
/* En live (lil), le petit point live précède les chiffres (192:2678) */
.score-live__inner { display: inline-flex; align-items: center; gap: 4px; }
.score-live-dot { width: 5px; height: 5px; display: block; flex-shrink: 0; }

/* Bouton œil (spoiler) : image seule, cliquable */
.card-spoiler {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  flex-shrink: 0;
}
.card-spoiler img { display: block; width: 100%; height: 100%; object-fit: contain; }
.card-spoiler--lil { width: 24px; height: 24px; }
.card-spoiler--big { width: 20px; height: 20px; }

/* ============================================================
   ONGLET SCHEDULE — module AGENDA (Figma 187:2778)
   ============================================================ */
.team-schedule { display: flex; flex-direction: column; gap: 16px; width: 100%; padding: 10px; }
.agn-module { display: flex; flex-direction: column; gap: 12px; width: 100%; }

/* Filtre + carrousel de l'agenda (Figma 220:3749) */
.agn-filter { display: flex; flex-direction: column; gap: 4px; width: 100%; }
.agn-filter .team-filter { min-height: 30px; padding: 0; }
.agn-carousel { position: relative; width: 100%; }
.agn-carousel__track {
  display: flex; align-items: center; gap: 10px; width: 100%;
  overflow-x: auto; overflow-y: hidden; padding-right: 46px;
  scrollbar-width: none; -ms-overflow-style: none;
}
.agn-carousel__track::-webkit-scrollbar { display: none; }
/* Fondu + flèche ancrés à droite (par-dessus le track) */
.agn-carousel__fade {
  position: absolute; top: 0; right: 0; bottom: 0;
  display: flex; align-items: center; padding-left: 20px;
  background: linear-gradient(to left, var(--dark-background) 50%, rgba(4, 7, 12, 0) 100%);
  pointer-events: none;
}
.agn-carousel__fade .agn-arrow { pointer-events: auto; }
/* Chip : logo (15px) + texte ; fond dégradé quand actif, contour sinon */
.agn-chip {
  box-sizing: border-box; flex-shrink: 0;
  height: 25px; display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 5px; border-radius: 5px; border: 1px solid var(--brand-primary-dark);
  background: transparent; cursor: pointer;
  font-family: var(--font-ui); font-size: 15px; line-height: 1; color: var(--text-primary);
  white-space: nowrap; opacity: .55; transition: opacity .12s ease;
}
.agn-chip--all { min-width: 50px; font-family: var(--font-display); }
.agn-chip__logo { width: 15px; height: 15px; flex-shrink: 0; object-fit: contain; display: block; }
.agn-chip__txt { line-height: 1; }
.agn-chip.is-on { opacity: 1; border-color: transparent; background-image: var(--grad-chip); }
.agn-chip--all.is-on { background-image: var(--grad-chip-all); }

/* Sélecteur de mois */
.agn-monthsel { display: flex; align-items: center; justify-content: space-between; width: 100%; }
.agn-arrow {
  width: 28px; height: 28px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--background-surface); border: 0; border-radius: 14px; cursor: pointer;
}
/* Icône = play natif (pointe en HAUT). Par défaut -> droite (suivant / scroll carrousel) ;
   toute flèche "prev" (mois ou semaine) -> gauche. */
.agn-arrow__ic { width: 8px; height: 9px; display: block; object-fit: contain; transform: rotate(90deg); }
.agn-arrow[data-sched-month="prev"] .agn-arrow__ic,
.agn-arrow[data-sched-week="prev"] .agn-arrow__ic { transform: rotate(-90deg); }
.agn-month { margin: 0; font-family: var(--font-display); font-size: 16px; color: var(--text-primary); }

/* Grille calendrier */
.agn-grid { display: flex; flex-direction: column; gap: 8px; width: 100%; }
.agn-week { display: flex; align-items: flex-start; justify-content: space-between; width: 100%; }
.agn-dow {
  width: 44px; flex-shrink: 0; text-align: center;
  font-family: var(--font-display); font-size: 11px; color: var(--text-muted);
}

/* Case jour */
/* Géométrie Figma 187:2819 : 44×59, py 5, gap 5 → n° (6) + 2 matchs (26) + "+N" (7) = 49.
   Anneaux today/sel en box-shadow INSET (trait "inside" Figma) : une vraie bordure
   mangerait 2px de hauteur et ferait déborder le "+N" par le bas. */
.agn-day {
  width: 44px; height: 59px; flex-shrink: 0; overflow: hidden;
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  padding: 5px 0; border-radius: 5px;
  background-image: linear-gradient(142.8deg, var(--background-surface) 0%, var(--background-primary) 100%);
}
.agn-day[data-sched-day] { cursor: pointer; }
.agn-day.is-week {
  background-image: linear-gradient(142.8deg, var(--brand-primary-light) 0%, var(--brand-primary-dark) 100%);
}
.agn-day.is-today { box-shadow: inset 0 0 0 1px var(--brand-primary-light); }
.agn-day.is-sel { box-shadow: inset 0 0 0 1px var(--text-primary); }
/* Textes calés sur leur hauteur "cap" Figma (text-box-trim) : 6px pour le n°, 7px pour "+N". */
.agn-day__num { display: block; height: 6px; font-family: var(--font-display); font-size: 10px; line-height: 6px; color: var(--text-primary); flex-shrink: 0; }
.agn-day.is-out .agn-day__num { opacity: .3; color: var(--text-muted); }

.agn-day__matches { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.agn-m { display: flex; align-items: center; justify-content: center; gap: 2px; }
.agn-m__game {
  position: relative; width: 12px; height: 12px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--background-surface); border-radius: 3px;
}
.agn-m__game img { width: 8px; height: 8px; display: block; object-fit: contain; }
.agn-m__game.is-live::after {
  content: ""; position: absolute; top: 0; left: 0;
  width: 3px; height: 3px; border-radius: 50%; background: var(--twitch);
}
.agn-m__teams { display: flex; align-items: center; gap: 1px; }
.agn-m__logo {
  width: 12px; height: 12px; flex-shrink: 0;
  background-size: contain; background-repeat: no-repeat; background-position: center;
}
.agn-m__logo--fav { border-bottom: 1px solid var(--brand-primary-light); }
.agn-more { display: block; height: 7px; flex-shrink: 0; font-family: var(--font-ui); font-size: 10px; line-height: 7px; color: var(--brand-primary-light); white-space: nowrap; }
.agn-m--wide, .agn-more--wide { display: none; }

/* Agenda LARGE (tablette / PC) : plus de cases de 44px étalées sur toute la largeur. Grille
   de 7 colonnes égales à gap fixe, plafonnée à 640px et centrée ; les cases s'élargissent
   et montrent jusqu'à 4 matchs (2 colonnes) avant le « +N ». Hauteur, anneaux today/sel,
   semaine en surbrillance et soulignement favoris inchangés. */
.agn-module { container-type: inline-size; }
@container (min-width: 520px) {
  .agn-grid { max-width: 640px; margin: 0 auto; }
  .agn-week { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
  .agn-dow, .agn-day { width: auto; }
}
@container (min-width: 620px) {
  .agn-day__matches { display: grid; grid-template-columns: repeat(2, auto); column-gap: 6px; row-gap: 2px; }
  .agn-m--wide { display: flex; }
  .agn-more--narrow { display: none; }
  .agn-more--wide { display: block; }
}

/* ============================================================
   ONGLET SCHEDULE — module PLANNING (Figma 187:2917)
   ============================================================ */
.pl-module { display: flex; flex-direction: column; gap: 12px; width: 100%; }
.pl-weeksel { display: flex; align-items: center; justify-content: space-between; width: 100%; }
.pl-days { display: flex; flex-direction: column; gap: 16px; width: 100%; }

.pl-day { display: flex; flex-direction: column; gap: 10px; width: 100%; border-radius: 10px; }
.pl-day.is-sel {
  padding: 10px;
  background-image: linear-gradient(116.9deg, var(--brand-primary-dark) 0%, #38bdf8 100%);
}
.pl-day__label { margin: 0; font-family: var(--font-display); font-size: 14px; color: var(--text-primary); }
.pl-empty {
  display: flex; align-items: center; justify-content: center; padding: 12px; width: 100%;
  font-family: var(--font-display); font-size: 13px; color: var(--text-muted);
}

/* Carte match */
.mrow {
  display: flex; flex-direction: column; gap: 12px; width: 100%;
  padding: 14px; border-radius: 12px; cursor: pointer;
  border: 1px solid var(--brand-primary-dark);
  background-image: linear-gradient(111.6deg, var(--background-surface) 0%, var(--background-primary) 100%);
}
.pl-day.is-sel .mrow { border-color: var(--dark-background); }

.mrow-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.mrow-gc { display: flex; align-items: center; gap: 8px; min-width: 0; }
.mrow-gc__game { width: 20px; height: 20px; object-fit: contain; display: block; flex-shrink: 0; }
/* Logo de compétition : remplit la hauteur, largeur selon ratio */
.mrow-gc__league { height: 20px; width: auto; max-width: 44px; object-fit: contain; display: block; flex-shrink: 0; }
.mrow-gc__txt { display: flex; flex-direction: column; min-width: 0; }
.mrow-comp { margin: 0; font-family: var(--font-display); font-size: 15px; color: var(--brand-primary-light); text-transform: uppercase; }
.mrow-sub { margin: 0; font-family: var(--font-ui); font-size: 10px; color: var(--brand-primary-light); text-transform: uppercase; }

.mrow-badge { flex-shrink: 0; padding: 4px 8px; border-radius: 4px; font-family: var(--font-display); font-size: 10px; line-height: normal; white-space: nowrap; }
.mrow-badge--live { background: var(--twitch); border: 1px solid var(--brand-primary-light); color: var(--text-primary); }
.mrow-badge--fin { background: var(--background-primary); border: 1px solid var(--dark-background); color: var(--text-muted); }
.mrow-badge--time { background: rgba(56, 189, 248, 0.13); border: 1px solid var(--brand-primary-light); color: var(--brand-primary-light); font-family: var(--font-ui); font-size: 13px; }

.mrow-teams { display: flex; align-items: center; gap: 5px; width: 100%; }
.mrow-side { flex: 1 0 0; min-width: 0; display: flex; align-items: center; justify-content: space-between; padding: 0 5px; border-radius: 5px; gap: 5px; }
.mrow-side.is-win { background: var(--background-card); }
.mrow-side.is-lose { background: var(--background-primary); }
.mrow-roster { display: flex; align-items: center; gap: 10px; padding-bottom: 5px; min-width: 0; }
.mrow-roster.is-fav { border-bottom: 1px solid var(--brand-primary-light); }

/* Logo d'équipe : container carré 32px, aucun fond, logo entier visible (fit). */
.mrow-logo {
  width: 32px; height: 32px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background-size: contain; background-repeat: no-repeat; background-position: center;
  font-family: var(--font-ui); font-size: 18px; color: var(--brand-primary-light);
}
/* Pastille de secours quand il n'y a pas de logo image : fond + tag pour la lisibilité. */
.mrow-logo--txt { border-radius: 100px; background-color: var(--background-surface); }
.mrow-logo--fav.mrow-logo--txt { background-color: #8b5cf6; color: #fff; }

.mrow-id { display: flex; flex-direction: column; min-width: 0; }
.mrow-id--opp { align-items: flex-end; text-align: right; }
.mrow-id__tag { margin: 0; font-family: var(--font-display); font-size: 15px; color: var(--text-primary); white-space: nowrap; }
.mrow-id__name { font-family: var(--font-ui); font-size: 10px; color: var(--text-muted); }
.mrow-id__sub { margin: 0; font-family: var(--font-ui); font-size: 10px; color: var(--text-muted); }

.mrow-score { flex-shrink: 0; font-family: var(--font-ui); font-size: 20px; color: var(--text-primary); }
.mrow-score.is-hidden { color: transparent; }
.mrow-vs { display: flex; flex-direction: column; align-items: center; flex-shrink: 0; }
.mrow-vs__lbl { font-family: var(--font-ui); font-size: 18px; color: var(--text-muted); }
.mrow-vs__bo { font-family: var(--font-ui); font-size: 18px; color: var(--text-primary); }

.mrow-actions { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding-top: 5px; border-top: 1px solid var(--background-surface); }
.mrow-actions__left { display: flex; align-items: center; gap: 8px; min-width: 0; }
.mrow-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 30px; padding: 0 12px; border: 0; border-radius: 5px; cursor: pointer;
  font-family: var(--font-ui); font-size: 15px; color: #fff; white-space: nowrap;
}
.mrow-btn--brk { background-image: var(--grad-btn-primary); }
.mrow-btn--watch { background: var(--twitch); border: 1px solid var(--brand-primary-light); }
.mrow-btn__ic { width: 15px; height: 15px; display: block; object-fit: contain; }
.mrow-btn__play { width: 12px; height: 12px; display: block; object-fit: contain; transform: rotate(90deg); } /* play natif (haut) -> droite */
.mrow-eye { flex-shrink: 0; width: 26px; height: 26px; padding: 0; border: 0; background: none; cursor: pointer; }
.mrow-eye img { width: 100%; height: 100%; display: block; object-fit: contain; }

/* ============================================================
   ZONE SCROLLABLE (milieu) + rebond élastique
   ============================================================ */
.app-main {
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.app-main::-webkit-scrollbar { display: none; }
/* Pas de will-change permanent : il forcerait une couche GPU en continu,
   ce qui désactive l'anti-aliasing sous-pixel du texte (effet "glow" sur les
   titres clairs). La couche n'est créée que le temps d'un geste. */
.app-bounce {}
/* Zone de contenu : REMPLIT la largeur, l'inset vient du padding (comme Figma).
   Pages annexes = contenu collé au header (pas de gap en haut) pour que le
   bouton Back soit à la même hauteur partout. Seule la home a un pt-10. */
.view {
  width: 100%;
  padding-bottom: 10px;
}
.app[data-route="home"] .view { padding-top: 10px; }

/* ============================================================
   FOOTER (fixe) — recherche / enregistrés / notifications
   ============================================================ */
.app-footer {
  flex-shrink: 0;
  display: flex;
  justify-content: center;
  width: 100%;
  padding: 14px 0;
  /* py-14 = padding de design de la barre ; la safe-area du bas (barre
     d'accueil / geste home) s'ajoute en dessous pour ne pas la recouvrir. */
  padding-bottom: calc(14px + env(safe-area-inset-bottom));
  border-top: 2px solid var(--background-surface);
  background: var(--dark-background);
}
.tab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}
/* L'état actif = icône "filled" (swap d'asset dans updateFooterIcons), pas une couleur */
.tab .ic { width: 25px; height: 25px; }
.tab[data-nav="favourites"] .ic { width: 19px; height: 25px; }

/* ============================================================
   SOUS-PAGES : barre (Back + titre) commune
   ============================================================ */
.page { width: 100%; padding-bottom: 20px; }
/* padding 10px = même top que .search-bar -> bouton Back à la même hauteur partout */
.page-bar {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px;
}
.back {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  border: 0;
  background: none;
  cursor: pointer;
  color: var(--text-muted);
  font-family: var(--font-ui);
  font-size: 20px;
  padding: 10px;
  z-index: 1;
}
.back .ic { width: 11px; height: 11px; }
.page-bar__title {
  position: absolute;
  left: 0;
  right: 0;
  margin: 0;
  text-align: center;
  font-family: var(--font-display);
  font-size: 20px;
  color: var(--brand-primary-light);
  pointer-events: none;
}
.page-bar__spacer { flex: 1; }

/* ============================================================
   FAVOURITES
   ============================================================ */
/* Onglets = tiers égaux (flex:1), l'actif = pastille pleine #0369a1 (Figma) */
.seg-tabs {
  display: flex;
  align-items: stretch;
  padding: 6px 14px 12px;
}
.seg {
  flex: 1 1 0;
  border: 0;
  border-radius: 5px;
  cursor: pointer;
  padding: 10px 0;
  background: transparent;
  color: #fff;
  font-family: var(--font-display);
  font-size: 15px;
  text-align: center;
}
.seg.is-active { background: var(--brand-primary-dark); }

.fav-content { display: flex; flex-direction: column; gap: 20px; }
.fav-section { display: flex; flex-direction: column; gap: 20px; }
.fav-section__title {
  margin: 0;
  text-align: center;
  font-family: var(--font-display);
  font-size: 20px;
  color: var(--text-primary);
}
.fav-group { display: flex; flex-direction: column; gap: 10px; padding: 0 20px; }
.fav-group__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 15px;
  color: var(--text-muted);
}
.fav-team { display: flex; flex-direction: column; gap: 10px; padding: 0 20px; }
.fav-team__head { display: flex; align-items: center; gap: 10px; }
.team-logo {
  width: 25px;
  height: 25px;
  border-radius: 5px;
  object-fit: contain;
  flex-shrink: 0;
}
.team-logo--ph { background: #d9d9d9; }   /* placeholder logo d'équipe (Figma) */
.fav-team__name {
  font-family: var(--font-display);
  font-size: 15px;
  color: var(--sky);   /* Figma : brand/primary #38bdf8 */
  white-space: nowrap;
}
/* Bouton "Team's page" : chevron (navigation), PAS la flèche play (= regarder) */
/* Figma Frame19 : bg #0369a1, px-36 py-10, gap-10, League Gothic 15 */
.btn-teampage {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  border: 0;
  border-radius: 5px;
  cursor: pointer;
  background: var(--grad-btn-primary);
  color: #fff;
  font-family: var(--font-ui);
  font-size: 15px;
  padding: 10px 36px;
  white-space: nowrap;
}
.btn-teampage .ic { width: 15px; height: 15px; }

/* ============================================================
   PROFIL
   ============================================================ */
.profile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 20px;
  text-align: center;
}
.profile__avatar img { width: 54px; height: 54px; border-radius: 6px; object-fit: cover; display: block; }
.profile__ids { display: flex; flex-direction: column; align-items: center; }   /* Figma 392:4247 : username puis usertag, sans gap */
.profile__name { margin: 0; font-family: var(--font-display); font-size: 32px; line-height: normal; color: #fff; }
.profile__tag { margin: 0; font-family: var(--font-display); font-size: 24px; line-height: normal; color: var(--text-muted); }
.profile__msg { margin: 6px 0 0; color: #fff; font-family: var(--font-display); font-size: 15px; }

/* ============================================================
   STUBS (pages pas encore designées) + états vides
   ============================================================ */
/* ============================================================
   PAGE RECHERCHE (barre Back + champ pill, façon Twitter)
   ============================================================ */
.search-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px;
  width: 100%;
  border-bottom: 2px solid var(--background-surface);
}
.search-field {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  height: 43px;
  padding: 0 20px;
  border: 1px solid var(--background-surface);
  border-radius: 35px;
}
.search-input {
  flex: 1 1 0;
  min-width: 0;
  height: 100%;
  border: 0;
  background: transparent;
  outline: none;
  font-family: var(--font-input);
  font-size: 15px;
  color: var(--text-primary);
}
.search-input::placeholder { color: var(--text-muted); opacity: 1; }
.search-clear {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px;
  border: 0;
  background: none;
  cursor: pointer;
  flex-shrink: 0;
}
.search-clear[hidden] { display: none; }
.search-clear .ic { width: 18px; height: 18px; }

/* ----- Recherche : tendances (défaut) + overlay de résultats (Figma 113:1131) ----- */
.page--search { display: flex; flex-direction: column; padding-bottom: 0; }
.search-scroll { position: relative; width: 100%; }
/* Modules par défaut (Figma 113:1131 / 393:4651) : px 20, py 10, 20 px entre modules */
.srch-base { display: flex; flex-direction: column; gap: 20px; padding: 10px 20px; }
.srch-mod { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.srch-title { margin: 0; font-family: var(--font-display); font-size: 15px; line-height: normal; color: var(--text-primary); white-space: nowrap; }
.srch-sub { margin: 0; font-family: var(--font-display); font-size: 15px; line-height: normal; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.srch-blk { display: flex; flex-direction: column; gap: 10px; padding-bottom: 20px; }
.srch-loading, .srch-empty-sm { margin: 0; font-family: var(--font-ui); font-size: 13px; color: var(--text-muted); }

/* Chips ALL (50×25, Hammersmith) + TIER n (hauteur 21, League Gothic) — Figma 393:5104 */
.srch-chips { display: flex; align-items: center; gap: 10px; overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none; }
.srch-chips::-webkit-scrollbar { display: none; }
.srch-chip { height: 21px; line-height: 11px; }

/* Carrousel FINI (pas de boucle) : piste + fondu/flèche droite (et gauche après défilement).
   Zone flèche = 48 px (Figma "Frame 279"), fondu dark 50 % → transparent. */
.fcar { position: relative; width: 100%; }
.fcar__track { display: flex; align-items: flex-start; gap: 10px; width: 100%; overflow-x: auto; overflow-y: hidden; padding-right: 48px; scrollbar-width: none; -ms-overflow-style: none; }
.fcar__track::-webkit-scrollbar { display: none; }
.fcar--games .fcar__track { align-items: center; }
.fcar__fade { position: absolute; top: 0; bottom: 0; display: flex; align-items: center; padding: 0 10px; pointer-events: none; }
.fcar__fade--next { right: 0; background: linear-gradient(to left, var(--dark-background) 50%, rgba(4, 7, 12, 0) 100%); }
.fcar__fade--prev { left: 0; background: linear-gradient(to right, var(--dark-background) 50%, rgba(4, 7, 12, 0) 100%); }
.fcar__fade--prev .agn-arrow__ic { transform: rotate(-90deg); }
.fcar__fade .agn-arrow { pointer-events: auto; }
.fcar__fade[hidden] { display: none; }
/* Rangées de cartes (.row__track) enveloppées : flèches PC seulement, le mobile swipe. */
.rowcar { position: relative; width: 100%; min-width: 0; }
.rowcar .fcar__fade { display: none; }

/* Bouton favori des tuiles (bookmark "Lil" 11×15 : Empty 242:3186 / Fill 242:3188) */
.srch-fav { flex-shrink: 0; padding: 0; border: 0; background: none; cursor: pointer; line-height: 0; }
.srch-fav img { width: 11px; height: 15px; display: block; }

/* Carrousel horizontal ; en résultats : passe en grille qui wrap */
.srch-carousel { display: flex; gap: 10px; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; -ms-overflow-style: none; }
.srch-carousel::-webkit-scrollbar { display: none; }
.srch-carousel--wrap { flex-wrap: wrap; overflow: visible; }

/* Tuile : logo 50 + (nom League Gothic 10px + bookmark 11×15) */
.srch-tile { box-sizing: border-box; width: 70px; flex-shrink: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; }
.srch-tile[data-nav-team], .srch-tile[data-nav-comp] { cursor: pointer; }
.srch-tile__logo { width: 50px; height: 50px; flex-shrink: 0; background-size: contain; background-position: center; background-repeat: no-repeat; }
.srch-tile__logo--ph { background-color: var(--background-surface); border-radius: 50%; }
.srch-tile__row { display: flex; gap: 5px; align-items: flex-start; justify-content: center; width: 100%; }
.srch-tile__name { flex: 1 1 0; min-width: 0; font-family: var(--font-ui); font-size: 10px; line-height: normal; color: var(--text-primary); word-break: break-word; }
.srch-bm { flex-shrink: 0; line-height: 0; }
.srch-bm .ic { width: 11px; height: 15px; display: block; }

/* Variante roster (match précis) : nom + ligne game-logo + TAG-LEAGUE */
.srch-rt__id { display: flex; flex-direction: column; width: 100%; }
.srch-rt__row { display: flex; gap: 5px; align-items: center; width: 100%; }
.srch-rt__sub { display: flex; gap: 5px; align-items: center; width: 100%; }
.srch-rt__glogo { width: 9px; height: 9px; flex-shrink: 0; background-size: contain; background-position: center; background-repeat: no-repeat; }
.srch-rt__glogo--ph { background-color: var(--background-surface); border-radius: 50%; }
.srch-rt__tag { min-width: 0; font-family: var(--font-ui); font-size: 10px; line-height: normal; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }


/* Overlay de résultats : s'ouvre PAR-DESSUS les tendances (contenu de base inchangé) */
.srch-overlay { position: absolute; inset: 0; z-index: 5; padding: 10px; background: var(--dark-background); overflow-y: auto; scrollbar-width: none; }
.srch-overlay::-webkit-scrollbar { display: none; }
.srch-overlay[hidden] { display: none; }
.srch-res__title { margin: 0 0 10px; font-family: var(--font-display); font-size: 15px; color: var(--text-primary); }
.srch-res-sec { margin-bottom: 16px; }
.srch-res-sec__label { margin: 0 0 10px; font-family: var(--font-ui); font-size: 10px; line-height: normal; color: var(--text-primary); }
.srch-empty { font-family: var(--font-ui); font-size: 12px; color: var(--text-muted); }

/* ============================================================
   TRANSITIONS DE PAGE (push depuis la droite / pop vers la droite)
   ============================================================ */
@keyframes pageInRight { from { transform: translateX(100%); } to { transform: translateX(0); } }
@keyframes pageOutRight { from { transform: translateX(0); } to { transform: translateX(100%); } }
.view.page-in { animation: pageInRight 0.28s cubic-bezier(0.22, 0.61, 0.36, 1) both; }
.view.page-out { animation: pageOutRight 0.28s cubic-bezier(0.22, 0.61, 0.36, 1) both; }

.empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 48px 30px;
  text-align: center;
  color: var(--text-muted);
}
.empty__icon .ic { width: 40px; height: 40px; opacity: 0.6; }
.empty__msg { margin: 0; font-family: var(--font-ui); font-size: 16px; max-width: 260px; }

/* ============================================================
   MODALE "connexion requise" (298×372, valeurs Figma exactes)
   ============================================================ */
.modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(4, 7, 12, 0.7);
}
.modal[hidden] { display: none; }

.auth-popup {
  width: 298px;
  max-width: 100%;
  background: var(--dark-background);
  border: 2px solid var(--background-surface);
  border-radius: 10px;
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* En-tête : logo + (croix de fermeture au-dessus / titre) */
.auth-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 15px;
  border-bottom: 2px solid var(--background-surface);
}
.auth-logo { width: 45px; height: 42px; flex-shrink: 0; display: block; }
.auth-head__col { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: flex-end; }
.auth-close { display: inline-flex; padding: 5px 10px; border: 0; background: none; cursor: pointer; }
.auth-close img { width: 9px; height: 8px; display: block; }
.auth-title {
  margin: 0;
  width: 100%;
  font-family: var(--font-ui);
  font-size: 20px;
  color: var(--brand-primary-dark);
}

/* Corps : sous-titre, erreur, champs, boutons */
.auth-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding-bottom: 10px;
  border-bottom: 2px solid var(--background-surface);
}
.auth-sub { margin: 0; font-family: var(--font-ui); font-size: 15px; color: var(--text-primary); }
.auth-error { margin: 0; width: 100%; font-family: var(--font-ui); font-size: 10px; color: var(--text-error); }
.auth-error[hidden] { display: none; }

.auth-field {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  height: 26px;
  background: var(--dark-background);
  border: 1px solid var(--background-surface);
  border-radius: 5px;
  overflow: hidden;
}
.auth-input {
  flex: 1 1 0;
  min-width: 0;
  height: 100%;
  padding: 0 10px;
  border: 0;
  background: transparent;
  outline: none;
  font-family: var(--font-display);
  font-size: 10px;
  color: var(--text-primary);
}
.auth-input::placeholder { color: var(--text-muted); opacity: 1; }
.auth-clear { display: inline-flex; padding: 10px; border: 0; background: none; cursor: pointer; flex-shrink: 0; }
.auth-clear[hidden] { display: none; }
.auth-clear img { width: 6px; height: 6px; display: block; }

.auth-pass { display: flex; flex-direction: column; align-items: flex-end; gap: 5px; width: 100%; }
.auth-forgot {
  border: 0;
  background: none;
  cursor: pointer;
  padding: 0;
  font-family: var(--font-ui);
  font-size: 10px;
  color: var(--background-card);
}

.auth-btn {
  width: 100%;
  height: 31px;
  border: 0;
  border-radius: 5px;
  cursor: pointer;
  font-family: var(--font-ui);
  font-size: 15px;
}
.auth-btn--login { background: var(--grad-btn-neutral); color: var(--brand-primary-light); }
.auth-btn--signin { background: transparent; border: 1px solid var(--background-surface); color: var(--brand-primary-dark); }

.auth-connect { margin: 0; padding: 10px; text-align: center; font-family: var(--font-ui); font-size: 15px; color: var(--text-primary); }

.auth-social { display: flex; gap: 10px; width: 100%; }
.auth-social__btn {
  flex: 1 1 0;
  min-width: 0;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 5px 20px;
  border: 0;
  border-radius: 5px;
  background: var(--grad-btn-neutral);
  cursor: pointer;
}
.auth-social__btn img { max-height: 18px; width: auto; max-width: 100%; object-fit: contain; display: block; }

/* ============================================================
   ÉCRAN INSCRIPTION (plein écran, hors chrome app)
   Source Figma : colonne 250px, page py 70px, gap 10px.
   Réutilise .auth-field / .auth-input de la popup.
   ============================================================ */
.auth-screen {
  position: fixed;
  inset: 0;
  z-index: 95;
  background: var(--dark-background);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.auth-screen[hidden] { display: none; }

.su-page { min-height: 100%; display: flex; justify-content: center; padding: 70px 0; box-sizing: border-box; }
.su-col { width: 250px; display: flex; flex-direction: column; align-items: center; gap: 10px; }

.su-back { align-self: stretch; display: inline-flex; align-items: center; gap: 10px; padding: 10px; border: 0; background: none; cursor: pointer; }
.su-back img { width: 10px; height: 10px; display: block; }
.su-back span { font-family: var(--font-ui); font-size: 20px; line-height: 1; color: var(--text-muted); }

.su-brand { display: inline-flex; align-items: center; gap: 10px; padding: 10px; }
.su-logo { width: 75px; height: 70px; display: block; }
.su-word { font-family: var(--font-display); font-size: 32px; line-height: 1; color: var(--brand-primary-dark); }

.su-title { margin: 0; font-family: var(--font-ui); font-weight: 400; font-size: 24px; line-height: 1; color: var(--text-primary); }

.su-group { display: flex; flex-direction: column; align-items: flex-start; gap: 5px; width: 100%; }
.su-error { margin: 0; width: 100%; font-family: var(--font-ui); font-size: 10px; color: var(--text-error); }
.su-error[hidden] { display: none; }
.su-group.is-error .su-field { border-color: var(--text-error); }

.su-tail { display: inline-flex; align-items: center; gap: 10px; padding: 10px; flex-shrink: 0; }
.su-count { font-family: var(--font-ui); font-size: 10px; line-height: 1; color: var(--text-primary); }
.su-clear { display: inline-flex; padding: 0; border: 0; background: none; cursor: pointer; }
.su-clear[hidden] { display: none; }
.su-clear img { width: 6px; height: 6px; display: block; }

.su-cgu { display: inline-flex; align-items: center; justify-content: center; width: 100%; cursor: pointer; }
.su-cgu__box { position: absolute; width: 0; height: 0; opacity: 0; }
.su-cgu__mark { width: 16px; height: 16px; border-radius: 5px; background: var(--dark-background); border: 1px solid var(--background-surface); flex-shrink: 0; }
.su-cgu__box:checked + .su-cgu__mark { background: var(--brand-primary-light); border-color: var(--brand-primary-light); }
.su-cgu.is-error .su-cgu__mark { border-color: var(--text-error); }
.su-cgu__label { padding: 5px 10px; font-family: var(--font-display); font-size: 10px; color: var(--text-primary); }
/* Liens CGU + confidentialité (pages publiques du site) : un clic sur le lien ne coche pas la case. */
.su-cgu__link { color: var(--brand-primary-light); text-decoration: underline; text-underline-offset: 2px; }
.su-cgu-error { margin: 0; width: 100%; text-align: center; font-family: var(--font-ui); font-size: 10px; color: var(--text-error); }
.su-cgu-error[hidden] { display: none; }
/* Case d'anonymat du Feedback (Figma 408:4276) : même composant, aligné à gauche. */
.fb-anon { justify-content: flex-start; }

.su-create { width: 100%; padding: 10px 36px; border: 0; border-radius: 5px; background: var(--grad-btn-neutral); color: var(--brand-primary-light); font-family: var(--font-ui); font-size: 15px; cursor: pointer; }

.su-connect { width: 100%; border-top: 2px solid var(--background-surface); padding: 5px 0; display: flex; flex-direction: column; }
.su-connect__title { margin: 0; padding: 10px; text-align: center; font-family: var(--font-ui); font-size: 15px; color: var(--text-primary); }
.su-social { display: flex; gap: 10px; width: 100%; }
.su-social__btn { flex: 1 1 0; min-width: 0; height: 30px; display: inline-flex; align-items: center; justify-content: center; padding: 5px 20px; border: 0; border-radius: 5px; background: var(--grad-btn-neutral); cursor: pointer; }
.su-social__btn img { max-height: 18px; width: auto; max-width: 100%; object-fit: contain; display: block; }

/* ============================================================
   ÉCRAN ONBOARDING FAVORIS (plein écran, hors chrome app)
   Source Figma 134:1063 : header + 5 carrousels + footer fixe.
   Cards : dimensions verrouillées (--card-lil-w / --card-lil-h).
   ============================================================ */
.onb-screen {
  position: fixed;
  inset: 0;
  z-index: 95;
  background: var(--dark-background);
  display: flex;
  flex-direction: column;
}
.onb-screen[hidden] { display: none; }

/* Corps scrollable ; le footer reste ancré en bas. */
.onb-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* ----- En-tête (logo + titre + sous-titre) ----- */
.onb-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 40px 20px 10px;
}
.onb-brand { display: inline-flex; align-items: center; gap: 10px; padding: 10px; }
.onb-brand__logo { width: 75px; height: 70px; display: block; }
.onb-brand__word { font-family: var(--font-display); font-size: 32px; line-height: 1; color: var(--brand-primary-dark); }
.onb-title { margin: 0; text-align: center; font-family: var(--font-display); font-weight: 400; font-size: 24px; line-height: normal; color: var(--text-primary); }
.onb-sub { margin: 0; font-family: var(--font-ui); font-size: 20px; line-height: normal; color: var(--text-muted); }

/* ----- Sections / carrousels ----- */
.onb-sections { display: flex; flex-direction: column; gap: 10px; padding: 10px 0 20px; }
.onb-sec { display: flex; flex-direction: column; gap: 10px; }
.onb-sec__title { margin: 0 20px; font-family: var(--font-display); font-size: 20px; line-height: normal; color: var(--text-primary); white-space: nowrap; }
/* Le rail hérite de .row__track (scroll horizontal, gap 20) + marges latérales de page. */
.onb-track { padding: 0 20px; }

/* ============================================================
   CARDS ONBOARDING — 145 × 198 (dimensions verrouillées)
   ============================================================ */
.onb-card {
  position: relative;
  width: var(--card-lil-w);
  flex: 0 0 var(--card-lil-w);
  height: var(--card-lil-h);
  box-sizing: border-box;
  border-radius: 10px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.onb-card--team { padding: 10px; background-image: linear-gradient(143.81deg, #715dd4 0%, var(--sky) 100%); }
.onb-card--game { padding: 10px 4px; background-image: linear-gradient(143.81deg, var(--background-primary) 0%, var(--background-surface) 100%); }

/* Nom (équipe / jeu) — Hammersmith One, rétréci par JS jusqu'à 10px si trop large. */
.onb-card__name {
  margin: 0;
  width: 100%;
  text-align: center;
  font-family: var(--font-display);
  font-size: 15px;   /* taille max ; le JS rétrécit jusqu'à 10px si le nom déborde */
  line-height: normal;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
}

/* --- Card TEAM : logo PNG NON modifié (juste la taille) sur le dégradé --- */
.onb-team__media { flex: 1 1 0; min-height: 0; width: 100%; display: flex; align-items: center; justify-content: center; }
.onb-team__logo { max-width: 100%; max-height: 100%; object-fit: contain; display: block; }
.onb-team__leagues {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-content: flex-start;
  gap: 5px;
  width: 100%;
  min-height: 0;
}
.onb-team__league { font-family: var(--font-ui); font-size: 10px; line-height: 1; color: var(--text-primary); white-space: nowrap; }

/* --- Card GAME : logo repeint d'un dégradé (le SVG le porte déjà) sur fond uni sombre --- */
.onb-game__media { flex: 1 1 0; min-height: 0; width: 100%; display: flex; align-items: center; justify-content: center; }
.onb-game__logo { max-width: 100%; max-height: 100%; object-fit: contain; display: block; }
.onb-game__note { display: flex; flex-direction: column; align-items: center; gap: 5px; width: 100%; text-align: center; color: var(--text-primary); }
.onb-game__note-main { margin: 0; font-family: var(--font-ui); font-size: 15px; line-height: normal; }
.onb-game__note-sub { margin: 0; font-family: var(--font-ui); font-size: 10px; line-height: normal; }

/* Placeholder logo (cards sans asset) : monogramme sobre plutôt qu'un faux logo. */
.onb-mono {
  font-family: var(--font-display);
  font-size: 44px;
  line-height: 1;
  color: rgba(4, 7, 12, 0.55);   /* sombre sur le dégradé clair des teams */
}
.onb-mono--game {
  color: transparent;
  background-image: radial-gradient(ellipse at 65% 90%, var(--sky) 0%, var(--twitch) 100%);
  -webkit-background-clip: text;
          background-clip: text;
}

/* --- Card LEAGUE : reprend le look card lil (vignette + scrim), nom + Add to FAV --- */
.onb-card--league { border: 2px solid var(--background-card); border-radius: 3.021px; gap: 0; }
.onb-league__bg { position: absolute; inset: 0; border-radius: 3.021px; overflow: hidden; pointer-events: none; }
.onb-league__inner {
  position: relative;
  z-index: 1;
  flex: 1 1 auto;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 5px 10px;
  background:
    linear-gradient(180deg, rgba(4, 7, 12, 0.2) 0%, rgba(255, 255, 255, 0) 100%),
    linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(4, 7, 12, 0.7) 100%);
}
.onb-league__name-wrap { flex: 1 1 0; min-height: 0; display: flex; align-items: flex-end; justify-content: center; padding: 10px 0; width: 100%; }
.onb-league__name { font-family: var(--font-ui); font-size: 20px; }

/* ----- Bouton "Add to FAV" (partagé) — clic sur toute sa frame, hauteur fixe ----- */
.onb-fav {
  flex-shrink: 0;
  width: 100%;
  height: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  border-radius: 5px;
}
.onb-fav__ic { display: inline-flex; width: 15px; height: 15px; align-items: center; justify-content: center; }
.onb-fav__ic .ic { width: 15px; height: 15px; display: block; }
.onb-fav__label { font-family: var(--font-ui); font-size: 15px; line-height: 1; color: var(--text-primary); }

/* État sélectionné : la card se souligne d'un liseré marque, le bouton passe "Added". */
.onb-card.is-fav { outline: 2px solid var(--brand-primary-light); outline-offset: -2px; }
.onb-card--league.is-fav { border-color: var(--brand-primary-light); outline: none; }

/* ----- Footer fixe : Confirm favourites / Skip ----- */
.onb-foot {
  flex-shrink: 0;
  display: flex;
  gap: 20px;
  align-items: center;
  justify-content: center;
  padding: 11px 20px;
  padding-bottom: calc(11px + env(safe-area-inset-bottom, 0px));
  border-top: 2px solid var(--background-surface);
  background: var(--dark-background);
}
.onb-btn {
  padding: 10px 36px;
  border-radius: 5px;
  border: 1px solid transparent;
  cursor: pointer;
  font-family: var(--font-ui);
  font-size: 15px;
  line-height: 1;
  color: var(--text-primary);
}
.onb-btn--confirm { background: var(--grad-btn-primary); }
.onb-btn--skip { background: transparent; border-color: var(--brand-primary-dark); }

/* ============================================================
   PAGE ÉQUIPE (Frame Figma 142:1799)
   ============================================================ */
.page--team { padding: 0; }

/* En-tête : back (gauche) | logo + nom (centre) | spacer (droite) */
.team-head { display: flex; gap: 10px; align-items: stretch; padding: 10px; }
.team-head__side { flex: 1 0 0; min-width: 0; display: flex; align-items: flex-start; }
.team-head__center { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 10px; flex-shrink: 0; }
.team-back { display: inline-flex; align-items: center; gap: 10px; padding: 10px; border: 0; background: none; cursor: pointer; }
.team-back img { width: 10px; height: 10px; display: block; }
.team-back span { font-family: var(--font-ui); font-size: 20px; line-height: 1; color: var(--text-muted); }

.team-logo-box { display: inline-flex; padding: 5px; border-radius: 5px; background: var(--background-surface); }
.team-logo-big { width: 86.8px; height: 86.8px; object-fit: contain; display: block; border-radius: 3px; }
.team-logo-big--ph { background: var(--background-card); }
.team-name { margin: 0; font-family: var(--font-display); font-weight: 400; font-size: 24px; line-height: normal; color: var(--brand-primary-light); text-align: center; }
/* Page jeux : nom + bookmark alignés (Figma 215:3215) */
.game-name-row { display: flex; align-items: center; justify-content: center; gap: 10px; }

/* Onglet Overall : carrousel de streams Twitch officiels (Figma 215:3719) */
.gov { display: flex; flex-direction: column; align-items: center; gap: 10px; width: 100%; padding: 10px 5px; }
.gov-row { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; }
.gov-arrow--prev .agn-arrow__ic { transform: rotate(-90deg); } /* flèche précédente -> gauche */
.gov-card { position: relative; flex: 1 1 0; min-width: 0; aspect-ratio: 296 / 166.5; border-radius: 5px; overflow: hidden; background: var(--background-primary); display: block; }
.gov-card__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.gov-card__overlay { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 0; padding: 10px; text-align: center; background: rgba(4, 7, 12, 0.2); }
.gov-card__comp { font-family: var(--font-display); font-size: 15px; line-height: normal; color: #fff; }
.gov-card__sub { font-family: var(--font-ui); font-size: 10px; line-height: normal; color: #fff; }
.gov-card__teams { font-family: var(--font-ui); font-size: 15px; line-height: normal; color: #fff; }
.gov-grad { display: flex; align-items: center; justify-content: center; gap: 5px; height: 20px; width: 100%; flex-wrap: wrap; }
.gov-dot { display: inline-flex; align-items: center; padding: 0; border: 0; background: none; cursor: pointer; }
.gov-dot__logo { width: 6px; height: 6px; display: block; background-size: contain; background-position: center; background-repeat: no-repeat; }
.gov-dot__logo--ph { background-color: var(--text-muted); border-radius: 50%; }
.gov-dot.is-active { padding: 5px; border-radius: 5px; background-image: linear-gradient(137deg, var(--brand-primary-dark) 3%, var(--background-surface) 101%); }
.gov-dot.is-active .gov-dot__logo { width: 10px; height: 10px; }

/* ===== PAGE JEU — Overall : carrousel LIVE (Figma 215:3998) =====
   Même mécanique que le home (makeLoopCarousel) ; carte 16:9 (.gov-card) entre deux
   flèches 28px, graduation : logos 26px, pastille active 35px en dégradé (gap 5). */
.gcar { display: flex; flex-direction: column; align-items: center; gap: 10px; width: 100%; padding: 10px 5px; }
.gcar-row { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; }
.gcar-viewport { flex: 1 1 0; min-width: 0; overflow: hidden; border-radius: 5px; }
.gcar-viewport .carousel__slide { display: block; }
.gcar-card { display: block; width: 100%; padding: 0; border: 0; cursor: pointer; text-align: center; }
.gcar-card__logo { position: absolute; inset: 18% 32% 38%; background-size: contain; background-repeat: no-repeat; background-position: center; }
.gcar-dots.carousel__dots { max-width: 105px; height: 35px; min-height: 35px; }
.gcar-dots .dot-hl { width: 35px; height: 35px; }
.gcar-dots .dot-track { gap: 0; }
.gcar-dots .dot--logo { width: 35px; }
.gcar-dots .dot__logo, .gcar-dots .dot__logo--ph { width: 26px; height: 26px; }
.gcar-dots .dot__live { display: none; }   /* tous les items sont live : pastille inutile */

/* ===== PAGE JEU — Overall : modules "Tier N result & next matches." (Figma 392:4431) =====
   Réutilise le module "clubs favoris" du home (.fav-up / .fav-logos / .fav-toggles). */
.gtier { padding: 10px 20px; border-bottom-color: var(--background-surface); }
.gtier__title { margin: 0; font-family: var(--font-display); font-size: 15px; line-height: normal; color: #fff; }
.gtier .fav-toggles { margin-top: 0; }
.gov-loading { margin: 20px; font-family: var(--font-ui); font-size: 15px; color: var(--text-muted); text-align: center; }

/* Onglet Leagues : cartes de classement (Figma 215:4009 groupé / 220:3216 simple) */
.glg { display: flex; flex-direction: column; gap: 16px; width: 100%; padding: 10px; }
.glg-card { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 10px; border-radius: 5px; overflow: hidden; background-image: linear-gradient(96deg, var(--brand-primary-dark) 0%, #01263b 100%); }
.glg-card__head { display: flex; align-items: center; justify-content: center; gap: 10px; max-width: 100%; }
.glg-card__logo { width: 30px; height: 30px; flex-shrink: 0; background-size: contain; background-position: center; background-repeat: no-repeat; }
.glg-card__logo--ph { background-color: var(--background-surface); border-radius: 5px; }
.glg-card__id { display: flex; flex-direction: column; min-width: 0; }
.glg-card__league, .glg-card__stage { margin: 0; font-family: var(--font-display); font-size: 15px; line-height: normal; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.glg-cols { display: flex; align-items: flex-start; gap: 5px; width: 100%; padding: 5px 10px; border-radius: 5px; box-sizing: border-box; }
.glg-col { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 5px; padding: 5px; border: 1px solid var(--dark-background); border-radius: 10px 10px 0 0; overflow: hidden; background-image: linear-gradient(150deg, var(--brand-primary-dark) 0%, var(--background-surface) 100%); }
.glg-col__head { display: flex; align-items: center; justify-content: center; gap: 5px; padding: 2px 0; width: 100%; }
.glg-col__name { flex: 1 1 0; min-width: 0; font-family: var(--font-ui); font-size: 15px; line-height: normal; color: #fff; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.glg-col__wl { width: 30px; flex-shrink: 0; font-family: var(--font-ui); font-size: 15px; line-height: normal; color: #fff; text-align: center; }
.glg-row { display: flex; align-items: center; justify-content: center; gap: 5px; width: 100%; padding: 5px 0; border-top: 0.5px solid var(--background-surface); }
.glg-row__rank { flex-shrink: 0; font-family: var(--font-ui); font-size: 15px; line-height: normal; color: #fff; }
.glg-row__team { flex: 1 1 0; min-width: 0; display: flex; align-items: center; gap: 5px; }
.glg-row__logo { width: 12px; height: 12px; flex-shrink: 0; background-size: contain; background-position: center; background-repeat: no-repeat; }
.glg-row__logo--ph { background-color: var(--background-surface); border-radius: 50%; }
.glg-row__name { min-width: 0; font-family: var(--font-ui); font-size: 10px; line-height: normal; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.glg-row__wl { width: 30px; flex-shrink: 0; font-family: var(--font-ui); font-size: 10px; line-height: normal; color: #fff; text-align: center; }
.glg-btn { width: 100%; box-sizing: border-box; display: flex; align-items: center; justify-content: center; gap: 10px; padding: 10px 36px; border: 0; border-radius: 5px; cursor: pointer; font-family: var(--font-ui); font-size: 15px; color: #fff; }
.glg-btn--dev { border: 1px solid var(--dark-background); background: transparent; }
.glg-btn--details { background-image: linear-gradient(105deg, var(--background-primary) 0%, var(--dark-background) 100%); }
.glg-btn__ic { width: 10px; height: 11px; display: block; object-fit: contain; transform: rotate(90deg); }
.glg-card.is-expanded .glg-btn--dev .glg-btn__ic { transform: rotate(-90deg); }
.glg-btn__info { width: 15px; height: 15px; display: block; object-fit: contain; }

/* Variante bracket — wrapper (replié = croppé, Develop = plein + scroll) */
.glg-bracket { display: flex; flex-direction: column; gap: 5px; width: 100%; box-sizing: border-box; padding: 5px 10px; }
.glg-bracket__title { margin: 0; font-family: var(--font-ui); font-size: 15px; line-height: normal; color: #fff; text-align: center; }
.glg-bracket__scroll { width: 100%; max-height: 120px; overflow: hidden; }        /* replié : crop, pas de scale */
.glg-bracket.is-expanded .glg-bracket__scroll { max-height: none; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; -ms-overflow-style: none; }
.glg-bracket__scroll::-webkit-scrollbar { display: none; }

/* Assemblage : flèches pleine hauteur (Figma 275:3887/3880) + étapes + lignes (#7DD3FC) */
.brk { display: flex; align-items: stretch; gap: 5px; min-width: min-content; }
.brk-nav {
  flex-shrink: 0; align-self: stretch; width: 20px; box-sizing: border-box;
  display: flex; align-items: center; justify-content: center; padding: 0 5px;
  border: 0; cursor: pointer; background-image: linear-gradient(103deg, var(--background-primary) 0%, var(--background-surface) 100%);
}
.brk-nav--prev { border-radius: 0 10px 10px 0; }   /* arrondi côté contenu (droite) */
.brk-nav--next { border-radius: 10px 0 0 10px; }    /* arrondi côté contenu (gauche) */
.brk-nav__ic { width: 10px; height: 12px; display: block; object-fit: contain; }
.brk-nav--prev .brk-nav__ic { transform: rotate(180deg); } /* asset pointe à droite -> gauche */
/* Flèches bracket — style PLIÉ (Figma 275:3887/3880) : seul le coin haut côté contenu
   arrondi (bas croppé), gradient sombre vertical. Le DÉPLIÉ garde le style ci-dessus. */
.glg-bracket:not(.is-expanded) .brk-nav { background-image: linear-gradient(166deg, var(--dark-background) 0%, var(--background-primary) 100%); }
.glg-bracket:not(.is-expanded) .brk-nav--prev { border-radius: 0 10px 0 0; }
.glg-bracket:not(.is-expanded) .brk-nav--next { border-radius: 10px 0 0 0; }
.brk-stage { position: relative; flex: 1 1 auto; display: flex; gap: 30px; align-items: stretch; padding: 5px 0; min-width: min-content; }

/* Carrousel de groupes (Figma 278:3990) : flèches rondes + "Group: A,B,C" (actif en cyan) */
.grp-sel { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 5px 0; }
.grp-sel__arrow { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; padding: 5px; border: 0; border-radius: 14px; background: var(--background-surface); cursor: pointer; }
.grp-sel__arrow img { width: 5px; height: 6px; display: block; object-fit: contain; }
.grp-sel__arrow--prev img { transform: rotate(-90deg); }
.grp-sel__arrow--next img { transform: rotate(90deg); }
.grp-sel__lbl { margin: 0; font-family: var(--font-display); font-size: 15px; line-height: normal; color: var(--text-primary); text-align: center; }
.grp-sel__on { color: var(--brand-primary-light); }
.grp-sel__off { color: var(--text-muted); }
.brk-svg { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; overflow: visible; }
.brk-svg path { fill: none; stroke: var(--brand-primary-light); stroke-width: 1.5; }
.brk-col { display: flex; flex-direction: column; gap: 5px; }
.brk-col__head { display: flex; align-items: center; justify-content: center; gap: 5px; }
.brk-col__title { margin: 0; font-family: var(--font-ui); font-size: 15px; line-height: normal; color: #fff; white-space: nowrap; }
.brk-col__cells { flex: 1 1 0; display: flex; flex-direction: column; justify-content: space-around; gap: 12px; }

/* Cellule de match (Figma 273:3604 Live / 273:3687 Result / 273:3721 Coming next) */
.brc { box-sizing: border-box; width: 84px; flex-shrink: 0; position: relative; z-index: 1; display: flex; flex-direction: column; border-radius: 5px; overflow: hidden; background-image: linear-gradient(106deg, var(--background-primary) 0%, var(--background-surface) 100%); }
.brc-head { display: flex; align-items: center; gap: 2px; padding: 0 5px; border: 1px solid var(--background-surface); border-radius: 5px 5px 0 0; }
.brc-head--result { background: var(--background-surface); }
.brc-head--live { border-color: var(--brand-primary-light); background: transparent; }
.brc-head--next { background: var(--background-surface); justify-content: space-between; }
.brc-head--next span { font-family: var(--font-ui); font-size: 10px; line-height: normal; color: var(--text-primary); white-space: nowrap; }
.brc-bo-lbl { flex: 1 1 0; min-width: 0; font-family: var(--font-ui); font-size: 10px; line-height: normal; color: #fff; }
.brc-status { flex-shrink: 0; font-family: var(--font-display); font-size: 10px; line-height: normal; }
.brc-head--result .brc-status { color: var(--text-muted); }
.brc-head--live .brc-status { color: var(--brand-primary-light); }
.brc-eye { flex: 1 1 0; display: flex; align-items: center; justify-content: flex-end; padding: 0; border: 0; background: none; cursor: pointer; }
.brc-eye img { width: 11px; height: 10px; display: block; }
.brc-row { display: flex; align-items: center; gap: 5px; padding: 5px 5px 0; border: 1px solid transparent; }
.brc-row:last-child { padding: 5px; }
.brc-row.is-win { background: linear-gradient(to right, var(--brand-primary-dark) 0%, #01263b 100%); border-color: var(--brand-primary-light); border-radius: 0 0 5px 5px; }
.brc-logo { width: 12px; height: 12px; flex-shrink: 0; background-size: contain; background-position: center; background-repeat: no-repeat; }
.brc-logo--ph { background: var(--background-primary); border-radius: 50%; }
.brc-name { font-family: var(--font-ui); font-size: 10px; line-height: normal; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.brc-score { flex: 1 1 0; min-width: 0; text-align: right; padding: 0 5px; font-family: var(--font-ui); font-size: 10px; line-height: normal; color: #fff; }
/* Coming next : [équipes | BO vertical], pas de score */
.brc-nextbody { display: flex; align-items: stretch; }
.brc-teams { display: flex; flex-direction: column; flex: 1 1 0; min-width: 0; }
.brc-nextbody .brc-row { flex: 1 1 0; padding: 5px 5px 0; }
.brc-nextbody .brc-teams .brc-row:last-child { padding: 5px; }
.brc-bo { flex-shrink: 0; width: 26px; display: flex; align-items: center; justify-content: center; font-family: var(--font-ui); font-size: 10px; color: #fff; }

/* Onglets : 3 égaux, actif = fond bleu foncé */
.team-tabs { display: flex; padding: 0 10px; height: 30px; }
.team-tab { flex: 1 1 0; min-width: 0; height: 100%; border: 0; background: transparent; cursor: pointer; border-radius: 5px; font-family: var(--font-display); font-size: 15px; color: var(--text-primary); }
.team-tab.is-active { background: var(--brand-primary-dark); }

.team-body { padding-top: 10px; }

/* Filtre "Filter by:" — LARGEUR FIXE (Figma 144px) : "Filter by:" ne bouge pas quand
   le mot change. Le dropdown ouvert est un OVERLAY (absolute, sans fond) et n'affecte
   pas la mise en page ; ses options sont alignées à DROITE. */
.team-filter { position: relative; display: flex; justify-content: flex-end; padding: 0 10px; min-height: 38px; }
.team-filter__btn { box-sizing: border-box; width: 160px; display: inline-flex; align-items: center; gap: 10px; padding: 10px 5px; border: 0; background: none; cursor: pointer; font-family: var(--font-display); font-size: 15px; color: var(--text-primary); }
.team-filter__val { flex: 1; min-width: 0; text-align: center; white-space: nowrap; }
.team-filter__open {
  position: absolute;
  top: 0;
  right: 10px;
  z-index: 20;
  box-sizing: border-box;
  width: 160px;
  display: inline-flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 5px;
}
.team-filter__lbl { font-family: var(--font-display); font-size: 15px; line-height: normal; color: var(--text-primary); white-space: nowrap; }
.team-filter__list { margin-left: auto; display: flex; flex-direction: column; align-items: flex-end; gap: 10px; }
.team-filter__opt { padding: 0; border: 0; background: none; cursor: pointer; font-family: var(--font-display); font-size: 15px; line-height: normal; color: var(--text-primary); text-align: right; white-space: nowrap; }
.team-filter__opt.is-active { color: var(--brand-primary-light); }

/* ----- Onglet ROSTERS : blocs (en-tête + grille de joueurs) ----- */
.team-groups--rosters { gap: 20px; }
.rblock { display: flex; flex-direction: column; gap: 10px; }
.rblock__head { display: flex; align-items: center; gap: 10px; cursor: pointer; }
.rblock__glogo, .rblock__llogo { width: 28px; height: 28px; border-radius: 5px; background-size: contain; background-repeat: no-repeat; background-position: center; flex-shrink: 0; }
.rblock__logo--ph { background-color: #d9d9d9; }
.rblock__id { display: flex; flex-direction: column; gap: 5px; min-width: 0; color: var(--sky); }
.rblock__name { margin: 0; font-family: var(--font-display); font-size: 20px; line-height: normal; }
.rblock__tag { margin: 0; display: inline-flex; align-items: baseline; gap: 2px; font-family: var(--font-display); font-size: 15px; }
.rblock__tag b { font-weight: 400; }
.rblock__tag i { font-style: normal; font-size: 12px; }
.rblock__go { margin-left: auto; display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; flex-shrink: 0; }
/* Flèche : repliée = pointe en bas (rotate 180 depuis l'icône "haut") ; dépliée = droite */
.rblock__go img { width: 14px; height: 16px; display: block; transition: transform 0.2s ease; transform: rotate(180deg); }
.rblock.is-expanded .rblock__go img { transform: rotate(90deg); }
.rblock__empty { margin: 0; font-family: var(--font-ui); font-size: 14px; color: var(--text-muted); }

/* Grille joueurs : 3 par ligne, gap horizontal EXACT 27.5px (Figma), lignes partielles
   justifiées à gauche en conservant ce gap. */
.rgrid { display: flex; flex-wrap: wrap; column-gap: 27.5px; row-gap: 15px; justify-content: flex-start; }
.pcard {
  position: relative;
  flex: 0 0 calc((100% - 55px) / 3);   /* 3 cards + 2 gaps de 27.5px = 55px */
  aspect-ratio: 1 / 1;
  border-radius: 5px;
  overflow: hidden;
  background: #d9d9d9 center / cover no-repeat;   /* photo joueur (ou placeholder gris) */
}
.pcard::after {   /* dégradé bas : transparent -> surface, pour lisibilité du texte */
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(102, 102, 102, 0) 0%, var(--background-surface) 100%);
}
.pcard__txt { position: absolute; inset: 0; z-index: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 3px; padding: 10px; text-align: center; }
.pcard__line { display: flex; align-items: baseline; gap: 5px; max-width: 100%; }
.pcard__name { font-family: var(--font-ui); font-size: 15px; line-height: 1; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.pcard__age { font-family: var(--font-ui); font-size: 15px; line-height: 1; color: #fff; white-space: nowrap; flex-shrink: 0; }
.pcard__role { font-family: var(--font-display); font-size: 13px; line-height: 1; color: #fff; white-space: nowrap; }

/* Sections (regroupements) */
.team-groups { display: flex; flex-direction: column; gap: 20px; padding: 10px; }
.team-sec { display: flex; flex-direction: column; gap: 10px; }
.team-sec__title { margin: 0; font-family: var(--font-display); font-size: 24px; line-height: normal; color: var(--text-primary); white-space: nowrap; }
.team-sec__head { display: flex; align-items: center; gap: 10px; }
.team-sec__logo { width: 28px; height: 28px; border-radius: 5px; background-size: contain; background-repeat: no-repeat; background-position: center; flex-shrink: 0; }
.team-sec__logo--ph { background-color: #d9d9d9; }
.team-sec__name { margin: 0; font-family: var(--font-display); font-size: 20px; line-height: normal; color: var(--text-primary); }

/* Pills de roster : logo ligue + "CODE"(LIGUE) en cyan */
.team-pills { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.rpill { display: inline-flex; align-items: center; gap: 2px; }
.rpill__logo { width: 20px; height: 20px; border-radius: 5px; background-size: contain; background-repeat: no-repeat; background-position: center; flex-shrink: 0; }
.rpill__logo--ph { background-color: #d9d9d9; }
.rpill__txt { display: inline-flex; align-items: baseline; gap: 1px; font-family: var(--font-display); color: var(--sky); }
.rpill__txt b { font-weight: 400; font-size: 11px; }
.rpill__txt i { font-style: normal; font-size: 8px; }

/* Rail de cards horizontal (réutilise .row__track) */
.team-track { padding-bottom: 2px; }

/* ============================================================
   PAGE COMPÉTITION — module roadmap "QUALIFIES TO"
   Figma : replié 295:3549, déplié 295:3582, 2 lignes 296:3466.
   ============================================================ */
.cqual { padding: 0 10px; }
.cqual-head__name { margin: 0; font-family: var(--font-display); font-weight: 400; font-size: 24px; line-height: normal; color: var(--brand-primary-light); text-align: center; }

/* Header : logo de league SANS box surface (85×85, radius 5) — Figma 283:3482 */
.cqual-logo { display: inline-flex; padding: 0; border-radius: 5px; }
.cqual-logo__img { width: 85px; height: 85px; object-fit: contain; display: block; border-radius: 5px; }
.cqual-logo__img--ph { background: var(--background-card); }

/* ---- Carte roadmap ---- */
.rdmp { border: 1px solid var(--background-card); border-radius: 12px; padding: 12px 16px; display: flex; flex-direction: column; gap: 10px; }
.rdmp.is-two { gap: 8px; }

/* Header : titre "QUALIFIES TO" + pager (déplié) + chevron */
.rdmp-head { display: flex; align-items: center; gap: 5px; width: 100%; cursor: pointer; }
.rdmp-head__title { flex: 1 0 0; min-width: 0; margin: 0; font-family: var(--font-display); font-weight: 400; font-size: 9px; letter-spacing: 1px; color: #0fc7d1; }
.rdmp-chevron { display: flex; align-items: center; justify-content: center; width: 29px; height: 20px; border: 0; background: none; cursor: pointer; padding: 0; }
.rdmp-chevron img { width: 10px; height: 8px; object-fit: contain; display: block; transform: rotate(90deg); }   /* chevron -> bas (déplier) */
.rdmp-chevron.is-up img { transform: rotate(-90deg); }                                                            /* chevron -> haut (replier) */

.rdmp-pager { display: flex; align-items: center; gap: 5px; }
.rdmp-pager__arrow { display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 14px; border: 0; background: var(--background-surface); cursor: pointer; padding: 0; }
.rdmp-pager__arrow img { width: 9px; height: 9px; object-fit: contain; display: block; transform: rotate(90deg); }     /* -> droite (next) */
.rdmp-pager__arrow--prev img { transform: rotate(-90deg); }                                                            /* -> gauche (prev) */
.rdmp-pager__txt { font-family: var(--font-display); font-weight: 400; font-size: 9px; color: #94a3b8; white-space: nowrap; }
.rdmp-pager__txt--muted { color: #94a3b8; }

/* ---- Bande de roadmap : padding + bordure dégradée (double background pour
   respecter le radius). 1 ligne = dégradé simple dark→light (bleus 1→3).
   2 lignes : ligne 1 = dark→primary (1→2, ouverte à droite), ligne 2 =
   primary→light (2→3, ouverte à gauche) -> continuité visuelle au retour ligne. */
.rdmp-strip { display: flex; gap: 4px; align-items: center; width: 100%; box-sizing: border-box; padding: 5px 10px; overflow: hidden;
  border: 1px solid transparent; border-radius: 10px;
  background: linear-gradient(var(--dark-background), var(--dark-background)) padding-box,
              linear-gradient(90deg, var(--brand-primary-dark) 0%, var(--brand-primary-light) 100%) border-box; }
.rdmp-strip--l1 { border-right-width: 0; border-radius: 10px 0 0 10px;
  background: linear-gradient(var(--dark-background), var(--dark-background)) padding-box,
              linear-gradient(90deg, var(--brand-primary-dark) 0%, var(--brand-primary) 100%) border-box; }
.rdmp-strip--l2 { border-left-width: 0; border-radius: 0 10px 10px 0;
  background: linear-gradient(var(--dark-background), var(--dark-background)) padding-box,
              linear-gradient(90deg, var(--brand-primary) 0%, var(--brand-primary-light) 100%) border-box; }
.rdmp-connector { flex: 1 0 0; min-width: 0; height: 1px; background: rgba(71, 84, 105, .6); }

.rdmp-node { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; flex-shrink: 0; border: 0; background: none; padding: 0; cursor: pointer; }
.rdmp-node__dot { width: 6px; height: 6px; border-radius: 50%; box-sizing: border-box; }
.rdmp-node--past .rdmp-node__dot { background: var(--background-card); }
.rdmp-node--next .rdmp-node__dot { background: var(--brand-primary-light); }
.rdmp-node--after .rdmp-node__dot { background: transparent; border: 1px solid var(--brand-primary-dark); }
.rdmp-node__circle { display: flex; align-items: center; justify-content: center; width: 24px; height: 15px; border-radius: 12px; border: 1.5px solid; overflow: hidden; box-sizing: border-box; }
.rdmp-node--past .rdmp-node__circle { background: #1f2433; border-color: var(--background-card); }
.rdmp-node--next .rdmp-node__circle { background: var(--brand-primary-dark); border-color: var(--brand-primary-light); }
.rdmp-node--after .rdmp-node__circle { background: var(--background-surface); border-color: var(--brand-primary-dark); }
.rdmp-node__logo { width: 12px; height: 12px; object-fit: contain; display: block; }
.rdmp-node__logo--ph { width: 12px; height: 12px; border-radius: 3px; background: var(--background-card); }
.rdmp-node__label { font-family: var(--font-display); font-weight: 400; font-size: 9px; line-height: 1.1; color: #94a3b8; text-align: center; white-space: nowrap; }

/* Indicateur de retour à la ligne (> 4 events) */
.rdmp-strip__more { flex-shrink: 0; display: flex; align-items: center; }
.rdmp-wrap__ic { width: 7px; height: 7px; object-fit: contain; display: block; transform: rotate(90deg); }
.rdmp-wrap { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; height: 7px; }
.rdmp-wrap__line { flex: 1 0 0; min-width: 0; height: 1px; background: var(--background-card); }
.rdmp-wrap .rdmp-wrap__ic { transform: rotate(180deg); }

/* ---- Detail panel (déplié) : "QUALIFIES FROM" ---- */
.rdmp-detail { display: flex; flex-direction: column; gap: 6px; padding: 10px 12px; border-radius: 8px; width: 100%; box-sizing: border-box;
  background-image: linear-gradient(109deg, var(--background-primary) 0%, var(--background-surface) 100%); }
.rdmp-detail__title { margin: 0; font-family: var(--font-input); font-weight: 600; font-size: 8px; letter-spacing: .5px; color: #667387; }
.rdmp-league { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 8px; border-radius: 6px; cursor: pointer; overflow: hidden;
  background-image: linear-gradient(90deg, var(--dark-background) 0%, var(--background-primary) 100%); }
.rdmp-league.is-current { background: var(--brand-primary-dark); background-image: none; }
.rdmp-league__tag { font-family: var(--font-display); font-weight: 400; font-size: 11px; color: #94a3b8; }
.rdmp-league__cond { font-family: var(--font-display); font-weight: 400; font-size: 10px; color: #667387; }
.rdmp-league.is-current .rdmp-league__tag { color: #f2f5fa; }
.rdmp-league.is-current .rdmp-league__cond { color: #0fc7d1; }

/* Module étapes de la compétition (Figma 310:3387) : 1 onglet par étape + agenda/planning.
   L'onglet actif = dégradé primary-dark -> card ; conteneur = dégradé dark -> primary. */
.cstg { margin-top: 16px; display: flex; flex-direction: column; gap: 10px; }
.cstg-title { margin: 0; font-family: var(--font-display); font-weight: 400; font-size: 20px; line-height: normal; color: #fff; text-align: center; }
/* Toutes les phases visibles + cliquables : on WRAP sur plusieurs lignes plutôt que
   de scroller horizontalement (plus de phase cachée). */
.cstg-tabs { display: flex; flex-wrap: wrap; gap: 4px; align-items: stretch; margin: 0 10px; padding: 4px; border-radius: 5px;
  background-image: linear-gradient(94deg, var(--dark-background) 0%, var(--background-primary) 100%); }
.cstg-tab { flex: 1 1 auto; padding: 10px 12px; border: 0; background: none; border-radius: 5px; cursor: pointer;
  font-family: var(--font-ui); font-size: 15px; line-height: 1; color: #fff; text-align: center; white-space: nowrap; }
.cstg-tab { display: inline-flex; align-items: center; justify-content: center; gap: 10px; }
/* Œil anti-spoil groupé (Figma 310:3391 / 273:3814) : 15 × 15 */
.spoil-group { flex: 0 0 auto; width: 15px; height: 15px; padding: 0; border: 0; background: none; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.spoil-group img { width: 15px; height: auto; display: block; }
.cstg-tab.is-active { background-image: linear-gradient(105deg, var(--brand-primary-dark) 0%, var(--background-card) 100%); }

/* Classement général "en gros" (étape 'table' : regular season, phase de groupes) */
.cstand { margin: 0 10px; display: flex; flex-direction: column; padding: 10px; border-radius: 5px; overflow: hidden;
  background-image: linear-gradient(96deg, var(--brand-primary-dark) 0%, #01263b 100%); }
.cstand + .cstand { margin-top: 8px; }
.cstand__gname { font-family: var(--font-ui); font-size: 15px; line-height: normal; color: #fff; text-align: center; padding-bottom: 4px; }
.cstand__head { display: flex; align-items: center; gap: 8px; padding: 4px; opacity: .65; }
.cstand__head span { font-family: var(--font-ui); font-size: 12px; line-height: normal; color: #fff; }
.cstand__row { display: flex; align-items: center; gap: 8px; padding: 8px 4px; border-top: 1px solid rgba(255, 255, 255, .08); }
.cstand__rank { width: 22px; flex-shrink: 0; font-family: var(--font-ui); font-size: 16px; line-height: normal; color: #fff; text-align: center; }
.cstand__team { flex: 1 1 0; min-width: 0; display: flex; align-items: center; gap: 8px; }
.cstand__logo { width: 24px; height: 24px; flex-shrink: 0; background-size: contain; background-position: center; background-repeat: no-repeat; }
.cstand__logo--ph { background-color: var(--background-surface); border-radius: 50%; }
.cstand__name { min-width: 0; font-family: var(--font-ui); font-size: 16px; line-height: normal; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cstand__wl { width: 44px; flex-shrink: 0; font-family: var(--font-ui); font-size: 16px; line-height: normal; color: #fff; text-align: center; }
.cstand__row[role="button"] { cursor: pointer; }

/* Onglets de page Schedule / Details (Figma 315:3568) */
.cpt-tabs { display: flex; margin: 0 10px 12px; border-radius: 5px; overflow: hidden;
  background-image: linear-gradient(94deg, var(--dark-background) 0%, var(--background-primary) 100%); }
.cpt-tab { flex: 1 0 0; padding: 10px 0; border: 0; background: none; border-radius: 5px; cursor: pointer;
  font-family: var(--font-display); font-weight: 400; font-size: 15px; color: #fff; text-align: center; }
.cpt-tab.is-active { background-image: linear-gradient(113deg, var(--brand-primary-dark) 0%, var(--background-card) 100%); }

/* Module PARTICIPATING TEAMS (Figma 315:3537) */
/* Figma 315:3537 : py 10 SANS padding latéral (sinon 7 logos = 340px ne tiennent pas et la
   rangée centrée se fait rogner des deux côtés) ; en-tête 348/380 → marge 16px. */
/* Page compétition : player Twitch en 1er module quand la compét est live (16:9, grand). */
.cplayer { padding: 10px 10px 0; }
.cplayer__box { position: relative; width: 100%; max-width: 960px; margin: 0 auto; aspect-ratio: 16 / 9; border-radius: 10px; overflow: hidden; background: var(--background-primary); }
.cplayer__box iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }
.ptm { margin: 16px 10px 0; padding: 10px 0; border-radius: 10px; background: var(--background-primary); display: flex; flex-direction: column; gap: 10px; }
.ptm-head { display: flex; align-items: center; gap: 5px; padding: 0 16px; }
.ptm-head__title { flex: 1 0 0; min-width: 0; margin: 0; font-family: var(--font-display); font-weight: 400; font-size: 9px; letter-spacing: 1px; color: #0fc7d1; }
.ptm-chevron { display: flex; align-items: center; justify-content: center; width: 29px; height: 20px; border: 0; background: none; cursor: pointer; padding: 0; }
.ptm-chevron img { width: 10px; height: 8px; object-fit: contain; display: block; transform: rotate(90deg); }
.ptm-chevron.is-up img { transform: rotate(-90deg); }
/* Replié : 1 rangée de 7 logos max (le JS n'en rend que 7). Déplié : rangées de 7 max. */
/* Sections play-in / main event (Figma 315:3457) : titre 9px espacé, condition en bleu foncé ;
   la phase qualificative est séparée du main event par un trait noir. */
.ptm-sec { display: flex; flex-direction: column; gap: 10px; padding: 0 16px; }
.ptm-sec--qual { padding-bottom: 10px; border-bottom: 1px solid #000; }
.ptm-sec__head { display: flex; align-items: flex-start; gap: 10px; }
.ptm-sec__name, .ptm-sec__cond { margin: 0; font-family: var(--font-display); font-weight: 400; font-size: 9px; letter-spacing: 1px; line-height: normal; white-space: nowrap; }
.ptm-sec__name { color: var(--brand-primary-light); }
.ptm-sec__cond { color: var(--brand-primary-dark); }
.ptm-row { display: flex; gap: 10px; align-items: center; justify-content: center; }
.ptm-grid { display: grid; grid-template-columns: repeat(7, 40px); gap: 10px; justify-content: center; max-height: 170px; overflow-y: auto; }
.ptm-box { flex: 0 0 auto; width: 40px; height: 40px; box-sizing: border-box; padding: 5px; border: 0; border-bottom: 1px solid transparent; border-radius: 5px; background: var(--background-surface); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.ptm-box.is-fav { border-bottom-color: var(--brand-primary-light); }
.ptm-box__logo { width: 100%; height: 100%; object-fit: contain; display: block; }
.ptm-box__logo--ph { background: var(--background-card); border-radius: 3px; }

/* Onglet Schedule : chip de filtre équipe */
.cfilter { display: flex; padding: 0 10px; }
.cfilter__chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 8px; border-radius: 5px; background: var(--background-surface); border: 1px solid var(--brand-primary-dark); }
.cfilter__logo { width: 18px; height: 18px; flex-shrink: 0; background-size: contain; background-position: center; background-repeat: no-repeat; }
.cfilter__tag { font-family: var(--font-ui); font-size: 14px; color: #fff; }
.cfilter__clear { display: inline-flex; align-items: center; border: 0; background: none; cursor: pointer; padding: 0; }
.cfilter__clear img { width: 12px; height: 12px; display: block; }

/* Bracket dans le Standing */
.brc-hit { display: contents; }
.cstg-bracket { margin: 0 10px; }

/* Double élimination : chemin winner (upper) en HAUT, lower en BAS, grande finale À DROITE
   (point de convergence, centré). Chaque .brk-tier garde son .brk-stage (colonnes +
   connecteurs internes). */
.brk--double { flex-direction: row; align-items: center; gap: 24px; }
.brk-brackets { display: flex; flex-direction: column; gap: 20px; min-width: min-content; }
.brk-tier { display: flex; flex-direction: column; gap: 4px; min-width: min-content; }
.brk-tier--final { justify-content: center; }
.brk-tier__label {
  margin: 0; font-family: var(--font-ui); font-size: 11px; font-weight: 700;
  letter-spacing: .5px; text-transform: uppercase; color: var(--brand-primary-light);
}
.brk-tier--final .brk-tier__label { color: var(--brand-primary); }

/* ============================================================
   PAGE-GALERIE — "voir tout" d'un carrousel (Figma 320:3423 / 320:4039)
   Header (Back + titre catégorie) + grille verticale 2 colonnes de lil cards.
   ============================================================ */
.page--gallery { display: flex; flex-direction: column; }
/* Header + filtres STATIQUES (collés en haut de la zone scrollable) ; seule la grille défile. */
.gal-fixed { position: sticky; top: 0; z-index: 5; background: var(--dark-background); }
.gal-head { display: flex; flex-direction: column; padding: 10px 10px 0; }
.gal-head__back { display: flex; }
.gal-head__title { margin: 0; font-family: var(--font-display); font-weight: 400; font-size: 24px; line-height: normal; color: var(--brand-primary-light); text-align: center; }
.gal-filters { padding: 10px 10px 0; display: flex; flex-direction: column; gap: 10px; }
.gal-body { padding: 10px; }
.gal-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.gal-cell { display: flex; justify-content: center; }

/* La surface d'un carrousel "voir tout" est cliquable (le titre l'indique) */
.row[data-gallery-row] .row__title, .fav-up[data-gallery-favup] { cursor: pointer; }

/* ============================================================
   PAGE SETTINGS (Figma 335:3897) — infos éditables + comptes + contact + follow
   ============================================================ */
.page--settings { display: flex; flex-direction: column; }
.set-head { display: flex; gap: 10px; align-items: center; padding: 10px; }
.set-head__side { flex: 1 0 0; min-width: 0; display: flex; align-items: flex-start; }
.set-head__center { display: flex; align-items: center; gap: 10px; }
.set-head__center .ic { width: 30px; height: 30px; }
.set-head__title { margin: 0; font-family: var(--font-display); font-weight: 400; font-size: 24px; line-height: normal; color: #fff; }

.set-info { padding: 10px 20px; display: flex; flex-direction: column; gap: 10px; align-items: center; }
.set-info__title { margin: 0; font-family: var(--font-display); font-weight: 400; font-size: 24px; line-height: normal; color: #fff; text-align: center; }
.set-row { display: flex; gap: 20px; width: 100%; padding: 20px 0; box-sizing: border-box; border-bottom: 1px solid var(--background-surface); }
.set-item { flex: 1 0 0; min-width: 0; display: flex; align-items: center; gap: 10px; }
.set-item__txt { flex: 1 0 0; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.set-item__label { font-family: var(--font-display); font-weight: 400; font-size: 20px; line-height: normal; color: #fff; }
.set-item__value { font-family: var(--font-ui); font-size: 20px; line-height: normal; color: #fff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.set-item__value.is-undef { color: var(--text-muted); }
.set-pen { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; padding: 10px; border: 0; border-radius: 5px; cursor: pointer;
  background-image: linear-gradient(135deg, var(--background-primary) 0%, var(--background-surface) 100%); }
.set-pen img { width: 15px; height: 15px; display: block; }

/* Mode édition des noms (carte bordée + inputs + Cancel/Confirm) — Figma 322:3839 */
.set-info--edit { margin: 0 10px; padding: 10px 20px; border: 1px solid var(--background-primary); border-radius: 10px;
  background-image: linear-gradient(134deg, var(--dark-background) 0%, var(--background-primary) 100%); }
.set-field { flex: 1 0 0; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.set-field__label { font-family: var(--font-display); font-weight: 400; font-size: 20px; line-height: normal; color: #fff; }
.set-input { display: flex; align-items: center; height: 26px; border: 1px solid var(--background-surface); border-radius: 5px; background: var(--dark-background); overflow: hidden; }
.set-input.is-error { border-color: #b3261e; }
.set-input__el { flex: 1 0 0; min-width: 0; height: 100%; padding: 0 10px; border: 0; background: none; color: #fff; font-family: var(--font-input); font-size: 12px; }
.set-input__el::placeholder { color: var(--text-muted); }
.set-input.is-locked { opacity: 0.7; }
.set-input.is-locked .set-input__el { color: var(--text-muted); cursor: not-allowed; }
/* Ligne à un seul item (ex. Phone) : centré, non étiré */
.set-row--single { justify-content: center; }
.set-row--single .set-item { flex: 0 1 161px; }
.set-input__count { flex-shrink: 0; padding: 0 4px; font-family: var(--font-ui); font-size: 11px; color: #fff; white-space: nowrap; }
.set-input__clear { flex-shrink: 0; display: inline-flex; align-items: center; height: 100%; padding: 0 6px; border: 0; background: none; cursor: pointer; }
.set-input__clear img { width: 12px; height: 12px; display: block; }
.set-input__clear.is-hidden { display: none; }
.set-field__help { min-height: 12px; font-family: var(--font-ui); font-size: 11px; line-height: normal; color: var(--text-muted); }
.set-field__help.is-error { color: #b3261e; }
.set-editbtns { display: flex; gap: 10px; padding-top: 4px; }
.set-btn { padding: 10px 36px; border-radius: 5px; border: 0; cursor: pointer; font-family: var(--font-ui); font-size: 15px; line-height: 1; color: #fff; }
.set-btn--cancel { background: none; border: 1px solid var(--brand-primary-dark); }
.set-btn--confirm { background-image: linear-gradient(102deg, var(--brand-primary-dark) 0%, var(--background-card) 100%); }

/* Flux changement e-mail/tél + reset (Figma 335:4238 / 335:4050) */
.set-flow { padding: 20px; display: flex; flex-direction: column; align-items: center; gap: 20px; }
.set-flow__title { margin: 0; font-family: var(--font-display); font-weight: 400; font-size: 24px; line-height: normal; color: #fff; text-align: center; }
.set-flow__field { width: 100%; display: flex; flex-direction: column; gap: 10px; }
.set-flow__label { margin: 0; font-family: var(--font-ui); font-size: 15px; line-height: normal; color: #fff; }
.set-flow__forgot { align-self: flex-end; border: 0; background: none; cursor: pointer; padding: 0; font-family: var(--font-ui); font-size: 12px; color: var(--background-card); }
.set-flow--msg { gap: 30px; }
.set-flow__msg { margin: 0; max-width: 320px; font-family: var(--font-ui); font-size: 20px; line-height: normal; color: var(--text-muted); text-align: center; }
.set-flow__dev { border: 0; background: none; cursor: pointer; padding: 6px 10px; font-family: var(--font-ui); font-size: 12px; color: var(--brand-primary-light); text-decoration: underline; opacity: .8; }

.set-blocks { padding: 0 20px; display: flex; flex-direction: column; }
.set-block { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 20px 0; box-sizing: border-box; border-bottom: 1px solid var(--background-surface); }
.set-block--last { border-bottom: 0; }
.set-block__title { margin: 0; font-family: var(--font-display); font-weight: 400; font-size: 24px; line-height: normal; color: #fff; }
.set-acc-row { display: flex; gap: 10px; }
.set-acc { display: flex; flex-direction: column; align-items: center; gap: 10px; border: 0; background: none; cursor: pointer; padding: 0; }
.set-acc__pill { display: inline-flex; align-items: center; justify-content: center; height: 30px; padding: 5px 20px; box-sizing: border-box; border-radius: 5px;
  background-image: linear-gradient(101deg, var(--background-primary) 0%, var(--background-surface) 100%); }
.set-acc__pill.is-linked { background-image: linear-gradient(116deg, var(--brand-primary-dark) 0%, var(--background-surface) 100%); }
.set-acc__pill img { height: 18px; width: auto; display: block; }
.set-acc__label { font-family: var(--font-ui); font-size: 15px; line-height: normal; color: #fff; }
.set-acc__label.is-undef { color: var(--text-muted); }
/* Boutons d'action des sections settings (Log out / Delete account) */
.set-actbtn { padding: 10px 36px; border: 0; border-radius: 5px; cursor: pointer; font-family: var(--font-ui); font-size: 15px; line-height: normal; }
.set-actbtn--primary { background: var(--grad-btn-neutral); color: var(--brand-primary-light); }
.set-actbtn--outline { background: transparent; border: 1px solid var(--background-surface); color: var(--brand-primary-dark); }

/* Corps d'une popup de confirmation (log out / delete) — réutilise le shell .auth-popup */
.confirm-body { display: flex; flex-direction: column; align-items: center; gap: 10px; padding-bottom: 10px; width: 100%; }
.confirm-msg { margin: 0; width: 100%; text-align: center; font-family: var(--font-ui); font-size: 15px; color: var(--text-primary); }

/* Popups comptes liés (Google / Discord) — réutilise le shell .auth-popup / .auth-field */
.al-title-row { display: flex; align-items: center; gap: 5px; width: 100%; }
.al-title { margin: 0; font-family: var(--font-ui); font-size: 20px; line-height: normal; color: var(--brand-primary-dark); white-space: nowrap; }
.al-logo { height: 16px; width: auto; display: block; }
.al-msg { margin: 0; width: 100%; text-align: center; font-family: var(--font-display); font-size: 15px; color: #fff; }
.al-msg--linked { padding-bottom: 0; }
.al-account { color: #8956fb; }
.al-body { display: flex; flex-direction: column; align-items: center; gap: 10px; padding-bottom: 10px; width: 100%; }
.al-body--pw { gap: 20px; }
.al-pwwrap { display: flex; flex-direction: column; align-items: flex-end; gap: 5px; width: 100%; }
.al-error { margin: 0; width: 100%; font-family: var(--font-ui); font-size: 10px; color: var(--text-error); }
.al-error[hidden] { display: none; }
.al-confirm { padding: 10px 36px; border: 0; border-radius: 5px; cursor: pointer; font-family: var(--font-ui); font-size: 15px; color: #fff; background: var(--grad-btn-primary); }
.set-contact { border: 0; background: none; cursor: pointer; padding: 0; font-family: var(--font-ui); font-size: 20px; line-height: normal; color: var(--brand-primary-light); }
.set-follow { display: flex; gap: 10px; align-items: center; height: 20px; }
.set-social { border: 0; background: none; cursor: pointer; padding: 0; display: inline-flex; height: 20px; }
.set-social img { height: 20px; width: auto; display: block; }

/* ============================================================
   PAGE FEEDBACK (Figma 385:4320)
   ============================================================ */
.page--feedback { display: flex; flex-direction: column; }
/* En-tête : Back (gauche) | icône + titre (centre) | spacer (droite) */
.fb-head { display: flex; align-items: flex-start; gap: 10px; padding: 10px; }
.fb-head__side { flex: 1 0 0; min-width: 0; display: flex; align-items: flex-start; }
.fb-head__side:last-child { justify-content: flex-end; }
.fb-head__center { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 20px 0; }
.fb-head__center .ic { width: 50px; height: 50px; display: block; }
.fb-head__title { margin: 0; font-family: var(--font-display); font-size: 32px; line-height: normal; color: #fff; }

/* Corps : bloc formulaire (gap 10) puis bouton d'envoi (gap 20) */
.fb-body { display: flex; flex-direction: column; gap: 20px; padding: 20px; }
.fb-form { display: flex; flex-direction: column; gap: 10px; width: 100%; }
.fb-lead { margin: 0; font-family: var(--font-display); font-size: 24px; line-height: normal; color: var(--brand-primary-light); text-align: center; }
.fb-sub { margin: 0; font-family: var(--font-display); font-size: 15px; line-height: normal; color: var(--text-primary); text-align: center; }

/* Champs objet + corps : boîte sombre, bord surface, croix qui apparaît en écrivant */
.fb-field { display: flex; width: 100%; background: var(--dark-background); border: 1px solid var(--background-surface); border-radius: 5px; overflow: hidden; box-sizing: border-box; }
.fb-field--subject { height: 26px; align-items: center; }
.fb-field--body { height: 120px; align-items: flex-start; }
.fb-input { flex: 1 0 0; min-width: 0; height: 100%; padding: 0 10px; background: transparent; border: 0; outline: none; color: var(--text-primary); font-family: var(--font-display); font-size: 10px; }
.fb-textarea { flex: 1 0 0; min-width: 0; height: 100%; padding: 10px; background: transparent; border: 0; outline: none; resize: none; overflow-y: auto; color: var(--text-primary); font-family: var(--font-display); font-size: 10px; line-height: 1.5; }
.fb-input::placeholder, .fb-textarea::placeholder { color: var(--text-muted); }
.fb-clear { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; padding: 10px; border: 0; background: none; cursor: pointer; }
.fb-clear--body { align-self: flex-start; }
.fb-clear .ic { width: 6px; height: 6px; display: block; }
.fb-clear[hidden] { display: none; }

/* Bloc images : messages (hint + erreur rouge) puis rangée bouton + compteur + croix */
.fb-images { display: flex; flex-direction: column; gap: 10px; width: 100%; }
.fb-img-msgs { display: flex; flex-direction: column; gap: 10px; }
.fb-img-hint { margin: 0; font-family: var(--font-ui); font-size: 15px; line-height: normal; color: #fff; }
.fb-img-err { margin: 0; font-family: var(--font-ui); font-size: 10px; line-height: normal; color: #b3261e; }
.fb-img-err[hidden] { display: none; }
.fb-img-row { display: flex; align-items: center; gap: 10px; }
.fb-addbtn { display: inline-flex; align-items: center; justify-content: center; padding: 10px 36px; border: 1px solid var(--brand-primary-dark); border-radius: 5px; background: transparent; cursor: pointer; font-family: var(--font-ui); font-size: 15px; line-height: normal; color: #fff; }
.fb-count-wrap { display: flex; align-items: center; }
.fb-count { font-family: var(--font-ui); font-size: 15px; line-height: normal; color: var(--text-muted); }
.fb-imgclear { display: inline-flex; align-items: center; justify-content: center; padding: 10px; border: 0; background: none; cursor: pointer; }
.fb-imgclear .ic { width: 11px; height: 11px; display: block; }
.fb-imgclear[hidden] { display: none; }

/* Bouton d'envoi pleine largeur (dégradé) */
.fb-send { width: 100%; display: flex; align-items: center; justify-content: center; padding: 10px 36px; border: 0; border-radius: 5px; cursor: pointer; background-image: linear-gradient(123deg, var(--brand-primary-dark) 0%, var(--background-card) 100%); font-family: var(--font-ui); font-size: 20px; line-height: normal; color: #fff; }
.fb-file { display: none; }

/* Popup de confirmation d'envoi (Figma 385:4426) — shell .auth-popup */
.fb-confirm__icon { height: 20px; }
.fb-confirm__body { display: flex; flex-direction: column; align-items: center; gap: 20px; width: 100%; }
.fb-confirm__msg { margin: 0; width: 100%; text-align: center; font-family: var(--font-display); font-size: 15px; line-height: normal; color: #fff; }
.fb-cbtn { width: 100%; display: flex; align-items: center; justify-content: center; padding: 10px 36px; border-radius: 5px; cursor: pointer; font-family: var(--font-ui); font-size: 15px; line-height: normal; color: #fff; }
.fb-cbtn--outline { background: transparent; border: 1px solid var(--brand-primary-dark); }
.fb-cbtn--send { border: 0; background-image: linear-gradient(121deg, var(--brand-primary-dark) 0%, var(--background-card) 100%); }

/* ============================================================
   MODALE "Complete your profile" (3 étapes) — .cp-*
   Figma 338:4018 / 338:4158 / 338:4323. Popup façon .auth-popup.
   ============================================================ */
.cp-popup {
  width: 298px;
  max-width: 100%;
  max-height: calc(100dvh - 40px);
  background: var(--dark-background);
  border: 2px solid var(--background-surface);
  border-radius: 10px;
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  overflow: hidden;
}
.cp-head { display: flex; align-items: center; gap: 10px; padding-bottom: 15px; border-bottom: 2px solid var(--background-surface); flex-shrink: 0; }
.cp-logo { width: 45px; height: 42px; flex-shrink: 0; display: block; }
.cp-head__col { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: flex-end; }
.cp-close { display: inline-flex; padding: 5px 10px; border: 0; background: none; cursor: pointer; }
.cp-close img { width: 9px; height: 8px; display: block; }
.cp-title { margin: 0; width: 100%; font-family: var(--font-ui); font-size: 20px; color: var(--brand-primary-dark); }

/* Corps (scrolle si trop haut ; header/footer fixes) */
.cp-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; width: 100%; }
.cp-body--profile { display: flex; flex-direction: column; align-items: center; gap: 20px; padding: 10px 0; }
.cp-body--fav { display: flex; flex-direction: column; align-items: stretch; gap: 20px; padding: 10px 0; }

/* Étape 1 — photo + champs */
.cp-photo { width: 100px; height: 100px; border: 0; padding: 0; background: none; cursor: pointer; border-radius: 10px; overflow: hidden; flex-shrink: 0; }
.cp-photo__ph, .cp-photo__img { width: 100px; height: 100px; display: block; }
.cp-photo__img { object-fit: cover; }
.cp-photo__label { margin: 0; font-family: var(--font-display); font-size: 15px; color: #fff; }
.cp-fieldgroup { width: 100%; display: flex; flex-direction: column; gap: 5px; }
.cp-field { display: flex; align-items: center; width: 100%; height: 26px; background: var(--dark-background); border: 1px solid var(--background-surface); border-radius: 5px; overflow: hidden; }
.cp-input { flex: 1 1 0; min-width: 0; height: 100%; padding: 0 10px; border: 0; background: transparent; outline: none; font-family: var(--font-display); font-size: 10px; color: var(--text-primary); }
.cp-input::placeholder { color: var(--text-muted); opacity: 1; }
.cp-field__tail { display: flex; align-items: center; gap: 10px; padding-right: 10px; flex-shrink: 0; }
.cp-count { font-family: var(--font-ui); font-size: 10px; line-height: 1; color: var(--text-primary); }
.cp-clear { display: inline-flex; padding: 0; border: 0; background: none; cursor: pointer; }
.cp-clear[hidden] { display: none; }
.cp-clear img { width: 6px; height: 6px; display: block; }
.cp-field-err { margin: 0; width: 100%; font-family: var(--font-ui); font-size: 10px; color: var(--text-error); }
.cp-field-err[hidden] { display: none; }
.cp-fieldwrap.is-error .cp-field { border-color: var(--text-error); }
.cp-help { margin: 0; font-family: var(--font-ui); font-size: 10px; color: var(--background-card); }

/* Étapes 2/3 — recherche + carrousels / galerie */
.cp-fav-sub { margin: 0; width: 100%; text-align: center; font-family: var(--font-display); font-size: 15px; color: #fff; }
.cp-search { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 30px; padding: 5px 20px; border: 1px solid var(--background-surface); border-radius: 35px; }
.cp-search__input { flex: 1 1 0; min-width: 0; border: 0; background: transparent; outline: none; font-family: var(--font-input); font-size: 10px; color: var(--text-primary); }
.cp-search__input::placeholder { color: var(--text-muted); opacity: 1; }
.cp-search__clear { display: inline-flex; padding: 0; border: 0; background: none; cursor: pointer; flex-shrink: 0; }
.cp-search__clear[hidden] { display: none; }
.cp-search__clear img { width: 10px; height: 10px; display: block; }
.cp-content { width: 100%; display: flex; flex-direction: column; gap: 20px; }
.cp-sec { display: flex; flex-direction: column; gap: 10px; }
.cp-sec__title { margin: 0; font-family: var(--font-ui); font-size: 15px; color: #fff; }
.cp-track { display: flex; gap: 10px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.cp-track::-webkit-scrollbar { display: none; }
.cp-tile { width: 70px; flex-shrink: 0; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.cp-tile__logo { width: 50px; height: 50px; background-size: contain; background-repeat: no-repeat; background-position: center; }
.cp-tile__logo--ph { background: var(--background-surface); border-radius: 8px; }
.cp-tile__row { display: flex; gap: 5px; align-items: flex-start; justify-content: center; width: 100%; }
.cp-tile__name { flex: 1 1 0; min-width: 0; font-family: var(--font-ui); font-size: 10px; line-height: normal; color: var(--text-primary); word-break: break-word; }
.cp-bm { border: 0; background: none; cursor: pointer; padding: 0; flex-shrink: 0; display: inline-flex; }
.cp-bm img { width: 11px; height: 15px; display: block; }
.cp-res-sec { display: flex; flex-direction: column; gap: 10px; }
.cp-res-sec__label { margin: 0; font-family: var(--font-ui); font-size: 15px; color: #fff; }
.cp-gallery { display: flex; flex-wrap: wrap; gap: 10px; }
.cp-empty { margin: 0; text-align: center; font-family: var(--font-ui); font-size: 15px; color: var(--text-muted); }

/* Pied — étape + boutons */
.cp-foot { flex-shrink: 0; display: flex; flex-direction: column; align-items: center; gap: 10px; width: 100%; }
.cp-step { margin: 0; font-family: var(--font-ui); font-size: 15px; color: #fff; }
.cp-foot__row { display: flex; gap: 10px; width: 100%; }
.cp-foot__row .cp-btn { flex: 1 1 0; min-width: 0; }
.cp-btn { height: 35px; border: 0; border-radius: 5px; cursor: pointer; font-family: var(--font-ui); font-size: 15px; color: #fff; }
.cp-btn--confirm { width: 100%; background: var(--grad-btn-primary); }
.cp-btn--skip { background: transparent; border: 1px solid var(--brand-primary-dark); }

/* Étapes non skippables : titre centré verticalement (pas de croix au-dessus) */
.cp-head__col--noclose { justify-content: center; }

/* Étape 2 — vérification e-mail (Figma 353:3816) */
.cp-body--email { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 10px 0; width: 100%; }
.cp-body--email .cp-btn { width: 100%; }
.cp-email-title { margin: 0; width: 100%; text-align: center; font-family: var(--font-ui); font-size: 20px; color: #fff; }
.cp-email-brand { color: var(--brand-primary-dark); }
.cp-email-sub { margin: 0; width: 100%; text-align: center; font-family: var(--font-ui); font-size: 15px; color: #fff; }
.cp-email-info { margin: 0; width: 100%; font-family: var(--font-ui); font-size: 10px; color: var(--text-muted); }
/* Code 6 chiffres : 2 groupes de 3 (gap 30), cases 26px liées */
.cp-code { display: flex; gap: 30px; align-items: flex-start; }
.cp-code__group { display: flex; gap: 5px; }
.cp-code__box { width: 26px; height: 26px; box-sizing: border-box; padding: 0; text-align: center; border: 1px solid var(--background-surface); border-radius: 5px; background: var(--dark-background); font-family: var(--font-ui); font-size: 20px; color: var(--brand-primary-light); outline: none; }
.cp-code__box:focus { border-color: var(--brand-primary-dark); }
.cp-code__box.is-filled { border-color: var(--brand-primary-light); } /* rempli : bord light (prime sur focus) */
/* Message "code faux" : invisible par défaut MAIS garde sa place (visibility, pas display) */
.cp-code-err { margin: 0; width: 100%; font-family: var(--font-ui); font-size: 10px; line-height: normal; color: var(--text-error); visibility: hidden; }
.cp-code-err.is-shown { visibility: visible; }

/* Tap à l'extérieur d'une étape non skippable : la bordure clignote en rouge ~10 s */
@keyframes cpErrBlink { 0%, 100% { border-color: var(--background-surface); } 50% { border-color: var(--text-error); } }
.cp-popup--err { animation: cpErrBlink 0.5s ease-in-out 0s 20; }

/* ============================================================
   PAGE NOTIFICATIONS (Figma 358:4559 toggle, 358:4610/4664 cards)
   ============================================================ */
.page--notif { display: flex; flex-direction: column; height: 100%; min-height: 0; }
.notif-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 16px; }
.notif-head__title { margin: 0; font-family: var(--font-display); font-size: 24px; color: #fff; }
.notif-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 0 16px 16px; }
.notif-sec-title { margin: 14px 0 8px; font-family: var(--font-ui); font-size: 15px; letter-spacing: 1px; color: var(--brand-primary-light); }
.notif-list { display: flex; flex-direction: column; gap: 10px; }

/* Toggle PUSH maître (switch ON/OFF) */
.notif-master { display: inline-flex; align-items: center; height: 26px; padding: 1px; border: 0; border-radius: 30px; cursor: pointer; flex-direction: row-reverse;
  background-image: linear-gradient(112deg, var(--background-primary) 0%, var(--background-surface) 100%); }
.notif-master.is-on { flex-direction: row; background-image: linear-gradient(114deg, var(--brand-primary) 0%, var(--brand-primary-light) 100%); }
.notif-master__label { padding: 0 10px; font-family: var(--font-ui); font-size: 20px; line-height: 1; color: var(--brand-primary-dark); }
.notif-master__knob { width: 24px; height: 24px; border-radius: 50%; background: var(--dark-background); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.notif-master__knob .ic { width: 13px; height: 13px; }

/* Card notif (Figma 358:4610 / 358:4664) */
.notif-card { border-radius: 12px; overflow: hidden; }
.nc-swipe { display: flex; flex-direction: column; gap: 12px; padding: 14px; border: 1px solid var(--brand-primary-dark); border-radius: 12px; touch-action: pan-y;
  background-image: linear-gradient(113deg, var(--background-surface) 0%, var(--background-primary) 100%); will-change: transform; }
.nc-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.nc-gc { display: flex; align-items: center; gap: 8px; min-width: 0; }
.nc-gc__logo { width: 20px; height: 20px; object-fit: contain; flex-shrink: 0; display: block; }
.nc-gc__txt { min-width: 0; }
.nc-comp { margin: 0; font-family: var(--font-display); font-size: 15px; color: var(--brand-primary-light); text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nc-sub { margin: 0; font-family: var(--font-ui); font-size: 10px; color: var(--brand-primary-light); text-transform: uppercase; }
.notif-nc .ic { width: 20px; height: 19.5px; }

.nc-teams { display: flex; align-items: center; justify-content: center; gap: 5px; }
.nc-side { display: flex; align-items: center; flex: 1 1 0; min-width: 0; }
.nc-side--r { justify-content: flex-end; }
/* Bloc logo + tag : souligné UNIQUEMENT si l'équipe est une favorite (Figma 187:2927). */
.nc-id { display: inline-flex; align-items: center; gap: 8px; min-width: 0; padding-bottom: 5px; border-bottom: 1px solid transparent; }
.nc-id.is-fav { border-bottom-color: var(--brand-primary-light); }
.nc-logo { width: 32px; height: 32px; background-size: contain; background-repeat: no-repeat; background-position: center; display: inline-flex; align-items: center; justify-content: center; font-family: var(--font-ui); font-size: 16px; color: var(--brand-primary-light); flex-shrink: 0; }
.nc-logo--ph { border-radius: 50%; background-color: var(--background-surface); } /* pastille texte (pas de logo) : reste ronde */
.nc-tag { font-family: var(--font-display); font-size: 15px; color: var(--text-primary); white-space: nowrap; }
.nc-vs { display: flex; flex-direction: column; align-items: center; font-family: var(--font-ui); font-size: 18px; }
.nc-vs__vs { color: var(--text-muted); }
.nc-vs__bo { color: var(--text-primary); }

.nc-bottom { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-top: 5px; border-top: 1px solid var(--background-surface); }
.nc-btn { display: inline-flex; align-items: center; gap: 10px; padding: 8px 18px; border: 0; border-radius: 5px; cursor: pointer; font-family: var(--font-ui); font-size: 15px; color: #fff; background-image: var(--grad-btn-primary); }
.nc-btn__ic { width: 16px; height: 16px; object-fit: contain; display: block; }
.nc-when { display: flex; flex-direction: column; align-items: flex-end; }
.nc-date { margin: 0; font-family: var(--font-ui); font-size: 14px; color: #fff; white-space: nowrap; }
.nc-timer { margin: 0; font-family: var(--font-ui); font-size: 14px; color: var(--brand-primary-light); white-space: nowrap; }

/* ============================================================
   Accessibilité / focus
   ============================================================ */
:focus-visible { outline: 2px solid var(--brand-primary-light); outline-offset: 2px; }

/* ===== Bouton œil : tap-to-reveal (mot de passe + infos sensibles) ===== */
.pw-eye {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0 2px; border: 0; background: none; cursor: pointer; flex-shrink: 0;
}
/* Taille design (spoil 16×16) + object-fit:contain pour préserver l'aspect
   (les SVG œil ont un viewBox non carré et preserveAspectRatio="none"). */
.pw-eye img { width: 16px; height: 16px; display: block; object-fit: contain; opacity: .85; }
.pw-eye:active img { opacity: 1; }
/* Œil à côté d'un label d'info (settings) — design 13px, mis à l'échelle du label. */
.set-info-eye {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0; margin-left: 8px; border: 0; background: none; cursor: pointer;
  vertical-align: middle; flex-shrink: 0;
}
.set-info-eye img { width: 15px; height: 15px; display: block; object-fit: contain; opacity: .7; }
.set-info-eye:active img { opacity: 1; }
.set-item__label { display: inline-flex; align-items: center; }

/* ============================================================
   LOGOS — lisibilité universelle sur fond sombre (cf. LogoTones dans app.js)
   Classes posées automatiquement d'après le verdict serveur (services/logoTone.js) :
   - .logo--white : compétition à encre sombre → recolorée en blanc
   - .logo--plate : équipe à encre sombre → plaque claire (identité du club conservée)
   - [data-mono]  : logo absent → monogramme
   ============================================================ */
.logo--white { filter: brightness(0) invert(1); }
.logo--dead { background-image: none !important; }
img.logo--dead { visibility: hidden; }
.logo--plate {
  background-color: var(--text-primary) !important;
  background-origin: content-box !important;   /* logo en background-image : contenu dans la plaque */
  padding: 3px; border-radius: 4px; object-fit: contain; box-sizing: border-box;
}
/* Petits logos (≤ 20 px) : plaque fine */
.agn-m__logo.logo--plate, .brc-logo.logo--plate, .glg-row__logo.logo--plate, .rdmp-node__logo.logo--plate,
.srch-rt__glogo.logo--plate, .rpill__logo.logo--plate, .agn-chip__logo.logo--plate { padding: 1px; border-radius: 2px; }
/* Grands logos (≥ 40 px) */
.srch-tile__logo.logo--plate, .fav-logo__img.logo--plate, .team-logo-big.logo--plate, .cqual-logo__img.logo--plate,
.cp-tile__logo.logo--plate, .ptm-box__logo.logo--plate { padding: 5px; }
/* Logos ronds : la plaque garde la forme */
/* Plaque claire en carré aux coins adoucis (plus de cercle qui rognait les logos larges) ; logo entier (contain). */
.mrow-logo.logo--plate, .nc-logo.logo--plate { border-radius: 5px; padding: 3px; background-size: contain; background-origin: content-box; }
.cstand__logo.logo--plate { border-radius: 50%; padding: 3px; }

/* Monogramme (logo absent) : pastille surface + tag/initiales en cyan */
[data-mono]:not(img):not([style*="url("]), [data-mono].logo--dead { display: inline-flex; align-items: center; justify-content: center; overflow: hidden; background-color: var(--background-surface) !important; }
[data-mono]:not(img):not([style*="url("])::after, [data-mono].logo--dead::after { content: attr(data-mono); font-family: var(--font-ui); font-size: 14px; line-height: 1; letter-spacing: .5px; color: var(--brand-primary-light); white-space: nowrap; }
.rpill__logo[data-mono]::after, .team-logo[data-mono]::after { font-size: 8px; }
.cstand__logo[data-mono]::after, .rblock__glogo[data-mono]::after, .rblock__llogo[data-mono]::after, .team-sec__logo[data-mono]::after { font-size: 10px; }
.dot__logo[data-mono]::after, .glg-card__logo[data-mono]::after, .ptm-box__logo[data-mono]::after { font-size: 11px; }
.fav-logo__img[data-mono]::after { font-size: 15px; }
.srch-tile__logo[data-mono]::after, .cp-tile__logo[data-mono]::after { font-size: 17px; }
.team-logo-big[data-mono]::after, .cqual-logo__img[data-mono]::after { font-size: 28px; }

/* ============================================================
   SÉLECTEUR DE LANGUE « dépliant » (Figma 413:4556) — .lsel
   Fermé : 26px, bordure surface, rayon 5. Déplié : la ligne du HAUT garde la bordure
   basse 0.5px (couleur card) = démarcation ; la 2e ligne s'ajoute dessous (dans le flux).
   ============================================================ */
.lsel { width: 100%; }
.lsel__box {
  display: flex; flex-direction: column; padding: 0 10px;
  background: var(--dark-background);
  border: 1px solid var(--background-surface);
  border-radius: 5px;
}
.lsel__row {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  width: 100%; height: 24px; padding: 0; background: none; border: 0; cursor: pointer; text-align: left;
}
.lsel__row[hidden] { display: none; }
.lsel.is-open .lsel__row--top { border-bottom: 0.5px solid var(--background-card); }
.lsel__label { font-family: var(--font-display); font-size: 10px; line-height: 1; color: var(--text-primary); }
.lsel__chev { width: 8px; height: 10px; flex-shrink: 0; display: block; transform: rotate(90deg); }

/* Étape 1 « Complete your profile » : bloc Language (Figma 413:4531) */
.cp-lang { display: flex; flex-direction: column; align-items: center; gap: 10px; width: 100%; padding-bottom: 10px; }
.cp-lang__title { display: flex; align-items: center; gap: 10px; margin: 0; font-family: var(--font-display); font-size: 15px; color: #fff; }
.cp-lang__ic { width: 19px; height: 19px; display: block; }

/* Popup « Language » des comptes existants (Figma 413:4577) */
.lp-title { display: flex; align-items: center; gap: 5px; }
.lp-title__ic { width: 15px; height: 15px; display: block; }
.lp-body { display: flex; flex-direction: column; align-items: center; gap: 20px; width: 100%; }
.lp-text { margin: 0; width: 100%; text-align: center; font-family: var(--font-display); font-size: 15px; line-height: normal; color: #fff; }
.lp-btn { width: 100%; }
.lsel.is-open .lsel__row { height: 26px; }  /* déplié : lignes de 26px comme la maquette */

/* ============================================================
   VERSION PC (DÉMO) — actif seulement ≥ 1100px ; le mobile est inchangé.
   Grille 3 colonnes : barre latérale (= footer mobile) · contenu · « Live now + agenda ».
   Mêmes composants, disposition élargie (décision user : pas de refonte Figma).
   ============================================================ */
.desk-aside { display: none; }

@media (min-width: 1100px) {
  .app {
    display: grid;
    grid-template-columns: 300px minmax(0, 1fr) 320px;
    grid-template-rows: auto minmax(0, 1fr);
    grid-template-areas: "header header header" "nav main aside";
  }
  .app-header { grid-area: header; }
  .app-header .bar-inner { padding: 0 24px; }
  .app-main { grid-area: main; }

  /* Footer → barre latérale verticale, icône + libellé (aria-label, traduit par i18n.js) */
  .app-footer {
    grid-area: nav; flex-direction: column; justify-content: flex-start;
    padding: 24px 16px; border-top: 0; border-right: 2px solid var(--background-surface);
  }
  .app-footer .bar-inner { flex-direction: column; align-items: stretch; gap: 6px; padding: 0; }
  .app-footer .tab {
    justify-content: flex-start; gap: 14px; padding: 10px 12px; border-radius: 8px; width: 100%;
  }
  .app-footer .tab::after {
    content: attr(aria-label);
    font-family: var(--font-display); font-size: 16px; color: var(--text-primary);
  }

  /* Colonne droite */
  .desk-aside {
    grid-area: aside; display: flex; flex-direction: column; gap: 24px;
    padding: 24px 20px; overflow-y: auto; border-left: 2px solid var(--background-surface);
    scrollbar-width: thin;
  }
  .da-block { display: flex; flex-direction: column; gap: 6px; }
  .da-title { margin: 0 0 6px; display: flex; align-items: center; gap: 8px; font-family: var(--font-display); font-size: 18px; color: var(--text-muted); }
  .da-dot { width: 8px; height: 8px; border-radius: 50%; background: #e11d48; }
  .da-day { margin: 10px 0 2px; font-family: var(--font-ui); font-size: 15px; color: var(--brand-primary-light); text-transform: uppercase; }
  .da-empty { margin: 0; font-family: var(--font-display); font-size: 13px; color: var(--text-muted); }
  .da-item {
    display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px; text-align: left;
    background: none; border: 0; border-radius: 8px; cursor: pointer; color: inherit;
  }
  .da-item__logo { width: 32px; height: 32px; flex-shrink: 0; border-radius: 6px; background: var(--background-surface) center / 70% no-repeat; }
  .da-item__txt { display: flex; flex-direction: column; min-width: 0; }
  .da-item__comp { font-family: var(--font-display); font-size: 13px; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .da-item__teams { font-family: var(--font-ui); font-size: 15px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

  /* Carrousel home : 3 slides visibles, flèches latérales, timeline à 3 logos actifs */
  .carousel__row .carousel__arrow { display: flex; width: 40px; height: 40px; border-radius: 20px; }
  .carousel__arrow .agn-arrow__ic { width: 11px; height: 12px; }
  .carousel__arrow--prev .agn-arrow__ic { transform: rotate(-90deg); }
  .carousel__dots--multi { max-width: 100%; }
  .carousel__dots--multi .dot-hl { display: none; }
  .carousel__dots--multi .dot-track { position: static; height: 100%; justify-content: center; flex-wrap: nowrap; }
  .carousel__dots--multi .dot--logo { width: 45px; height: 45px; border-radius: 5px; }
  .carousel__dots--multi .dot--logo > * { position: relative; z-index: 1; }
  .carousel__dots--multi .dot--logo.is-active { background-image: linear-gradient(137deg, var(--brand-primary-dark) 3%, var(--background-surface) 101%); }
  .carousel__dots--multi .dot__live { position: absolute; top: 6px; right: 6px; }

  /* Rangées de cartes : UNE seule ligne comme sur mobile, flèches (bouton Figma 220:3829 agrandi) */
  .row { padding: 20px 28px; }
  .rowcar .fcar__fade { display: flex; }
  .rowcar .fcar__fade[hidden] { display: none; }
  .rowcar .agn-arrow { width: 40px; height: 40px; border-radius: 20px; }
  .rowcar .agn-arrow__ic { width: 11px; height: 12px; }

  /* Pages : contenu centré, largeur de lecture confortable */
  .view { max-width: 1100px; margin: 0 auto; }
}

/* Version PC (démo) : panneaux de la barre latérale — pub APK + Favourites */
.desk-side { display: none; }
@media (min-width: 1100px) {
  .app-footer { overflow-y: auto; scrollbar-width: thin; }
  .desk-side { display: flex; flex-direction: column; gap: 20px; width: 100%; margin-top: 24px; }
  .desk-side__title { margin: 0 0 8px; font-family: var(--font-display); font-size: 18px; color: var(--text-muted); }
  .desk-android {
    display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 14px 12px 0;
    border: 1px solid var(--background-surface); border-radius: 10px; overflow: hidden; text-decoration: none;
    background: linear-gradient(160deg, var(--background-surface) 0%, var(--dark-background) 100%);
  }
  .desk-android:hover { border-color: var(--brand-primary-dark); }
  .desk-android__title { margin: 0; font-family: var(--font-display); font-size: 17px; color: var(--brand-primary-light); text-align: center; }
  .desk-android__img { width: 100%; display: block; }
  .desk-fav__list { display: flex; flex-direction: column; gap: 10px; }
}

/* Version PC (démo) : défilement LIMITÉ AUX MODULES (décision user 26/09)
   - gauche : navigation fixe, seule la liste Favourites défile ;
   - droite : panneau Android fixe, seul le bloc Live now + Upcoming défile. */
@media (min-width: 1100px) {
  .app-footer { overflow: hidden; }
  .desk-side { flex: 1 1 auto; min-height: 0; }
  .desk-fav { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
  .desk-fav__list { flex: 1 1 auto; min-height: 0; overflow-y: auto; scrollbar-width: thin; padding-right: 2px; }

  .desk-aside { overflow: hidden; }
  .desk-aside .desk-android { flex-shrink: 0; }
  .desk-aside__scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; scrollbar-width: thin; display: flex; flex-direction: column; gap: 24px; }
}

@media (min-width: 1100px) {
  /* Les cartes gardent leur hauteur : c est la LISTE qui défile, pas les cartes qui s écrasent. */
  .desk-fav__list > *, .desk-aside__scroll > * { flex-shrink: 0; }
}

/* Version PC (démo) : barres de défilement masquées (le défilement reste actif :
   molette, pavé tactile, doigt) — comme le contenu central. */
@media (min-width: 1100px) {
  .app-footer, .desk-aside, .desk-fav__list, .desk-aside__scroll { scrollbar-width: none; }
  .app-footer::-webkit-scrollbar, .desk-aside::-webkit-scrollbar,
  .desk-fav__list::-webkit-scrollbar, .desk-aside__scroll::-webkit-scrollbar { display: none; }
}

/* Survol (souris uniquement) : voile 10 % noir sur clair / blanc sur foncé (data-hv posé en JS). */
@media (hover: hover) and (pointer: fine) {
  [data-hv] { transition: box-shadow 0.12s ease; }
  [data-hv="dark"]:hover { box-shadow: inset 0 0 0 999px rgba(255, 255, 255, 0.1); }
  [data-hv="light"]:hover { box-shadow: inset 0 0 0 999px rgba(0, 0, 0, 0.1); }
  [data-hv] { cursor: pointer; }
}

/* Version PC : survol de la navigation latérale ET des matchs Live now / Upcoming =
   fond « surface » (décision user : gardé pour la nav, étendu aux matchs de droite). */
@media (min-width: 1100px) and (hover: hover) and (pointer: fine) {
  .app-footer .tab:hover, .da-item:hover { background: var(--background-surface); }
}

/* Texte lu par les moteurs de recherche et lecteurs d écran, invisible à l écran (h1 SEO). */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

/* Settings : liens légaux en texte simple, tout en bas */
.set-legal { margin: 0; padding: 16px 20px 24px; display: flex; justify-content: center; gap: 8px; font-family: var(--font-display); font-size: 12px; color: var(--text-muted); }
.set-legal a { color: var(--text-muted); text-decoration: underline; text-underline-offset: 2px; }

/* ============================================================
   Bouton « Build with us, join the Discord » (Figma 423:4578) — comptes connectés hors serveur
   Mobile / tablette : slot entre le contenu et la barre de nav (gap 10 avec la nav).
   PC : slot sous le module « Get the Android app » (gap 10), module réduit en hauteur.
   ============================================================ */
.dcta-slot[hidden] { display: none !important; }
.dcta-slot--bar { flex-shrink: 0; display: flex; justify-content: center; padding: 10px 16px; }
.dcta-slot--aside { display: none; }
.dcta {
  position: relative; overflow: hidden; box-sizing: border-box;
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 201px; height: 44px; padding: 10px;
  border: 1px solid var(--brand-primary-light); border-radius: 10px;
  background: var(--dark-background); cursor: pointer;
}
.dcta__bg { position: absolute; left: 16px; top: -55px; width: 192px; height: 180px; pointer-events: none; }
.dcta__txt { position: relative; font-family: var(--font-ui); font-size: 20px; line-height: 15px; letter-spacing: 1px; color: #fff; white-space: pre; }
.dcta__txt--join { color: var(--brand-primary-light); }
.dcta__logo { position: relative; width: 20px; height: 15px; margin-left: 5px; flex-shrink: 0; }

@media (min-width: 1100px) {
  .dcta-slot--bar { display: none !important; }
  .dcta-slot--aside { display: flex; justify-content: center; flex-shrink: 0; margin-top: -14px; }   /* gap aside 24 → 10 */
  /* Module « Get the Android app » moins haut pour faire de la place au bouton Discord */
  .desk-aside:has(.dcta-slot--aside:not([hidden])) .desk-android__img { max-height: 150px; width: auto; max-width: 100%; margin: 0 auto; object-fit: contain; }
}