/* ---------------------------------------------------------------------------
   Page « Joueurs » (players.php)
   Reprend l'identité du site (crème, encre, terre cuite) et ajoute la
   démonstration de la traduction simultanée, qui est la fonction principale.
   Mobile d'abord : tout est l'un sous l'autre, les colonnes n'arrivent
   qu'à partir de 768px.
   --------------------------------------------------------------------------- */

/* Le sélecteur de langue est fait de liens sur cette page (pour que chaque
   version soit une vraie adresse ?hl=xx, partageable sur un forum). */
.players-body .lang-pill {
  text-decoration: none;
  display: inline-flex;
  align-items: center;
}

/* Sur téléphone la liste des langues défile horizontalement. Sans cet indice,
   la dernière langue était coupée net et on ne devinait pas qu'il fallait
   faire glisser. Un dégradé sur le bord droit le montre. */
@media (max-width: 767px) {
  .players-body .lang-switch-list {
    -webkit-mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 26px), transparent 100%);
    mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 26px), transparent 100%);
  }
}

/* Le bandeau du site met tous ses paragraphes en blanc (ils sont sur la photo).
   L'étiquette et la note ont donc besoin d'une couleur lisible et d'un fond. */
.players-body .hero .players-kicker {
  background: #fff;
  color: var(--brand-dark);
  margin: 0 0 12px;
}

.players-body .hero .players-hero-note {
  color: rgba(255, 255, 255, .88);
  font-size: 13px;
}

.players-kicker {
  display: inline-block;
  padding: 5px 10px;
  border-radius: 7px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.players-hero-note {
  margin: 14px 0 0;
  font-size: 13px;
  color: var(--muted);
}

/* --- Démonstration de la traduction simultanée ---------------------------- */

.tr-demo {
  margin-top: 18px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #fff;
  box-shadow: var(--shadow-soft);
  overflow: hidden;
}

.tr-demo-top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
  background: #FCFBFF;
}

.tr-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 9px;
  border-radius: 6px;
  background: var(--brand-soft);
  color: var(--brand-dark);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .02em;
}

.tr-room {
  font-size: 12.5px;
  color: var(--muted);
  font-weight: 600;
}

.tr-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  padding: 14px;
  border-bottom: 1px solid var(--line);
}

.tr-row:last-child { border-bottom: 0; }

.tr-said,
.tr-read {
  padding: 12px 14px;
  border-radius: 12px;
}

.tr-said {
  background: #FCFBFF;
  border: 1px solid var(--line);
}

.tr-read {
  background: var(--brand-soft);
  border: 1px solid transparent;
}

.tr-who {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 6px;
  font-size: 12.5px;
  color: var(--muted);
}

.tr-who strong {
  color: var(--ink);
  font-size: 13px;
}

.tr-flag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 26px;
  height: 18px;
  padding: 0 4px;
  border-radius: 4px;
  background: var(--ink);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .04em;
}

.tr-flag.is-out { background: var(--brand); }

.tr-said p,
.tr-read p {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--ink);
}

.tr-read p { color: var(--brand-dark); font-weight: 500; }

.tr-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6px 0;
  color: var(--muted);
  opacity: .7;
}

.tr-notes {
  margin-top: 16px;
}

/* Les grands numéros d'étape sont posés dans le coin de la carte ; sur cette
   page ils se faisaient rogner par le bord arrondi. On les rentre et on les
   agrandit un peu pour qu'ils restent lisibles. */
.players-body .steps-list li::before {
  top: 6px;
  right: 14px;
  font-size: 30px;
}

.players-body .steps-list li {
  padding-right: 52px;
}

/* --- Encadré de confiance, juste au-dessus du bouton d'inscription -------- */

/* Sur téléphone, une seule colonne : chaque ligne reste lisible. À partir de
   768px, les six lignes se répartissent sur deux colonnes. */
.trust-box {
  margin: 20px 0 22px;
  padding: 16px 16px 14px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fff;
  box-shadow: var(--shadow-soft);
  text-align: left;
}

.trust-title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 10px;
  font-size: 15px;
  color: var(--brand-dark);
}

.trust-title svg {
  flex: 0 0 auto;
  color: var(--brand);
}

.trust-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
}

.trust-list li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 14px;
  line-height: 1.45;
  color: var(--ink);
}

.trust-list li svg {
  flex: 0 0 auto;
  margin-top: 2px;
  color: #1F8A5B;
}

@media (min-width: 768px) {
  .trust-list {
    grid-template-columns: 1fr 1fr;
    gap: 10px 20px;
  }
}

/* --- Ordinateur : le message d'origine à gauche, la lecture à droite ------ */

/* La barre de navigation du bas est fixe : sur téléphone elle recouvre la fin
   de la page. On réserve donc la place, sinon la dernière phrase passe dessous. */
@media (max-width: 767px) {
  .players-body .page { padding-bottom: 88px; }
  .players-body .cta-section { margin-bottom: 8px; }
}

@media (min-width: 768px) {
  .tr-row {
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 12px;
    padding: 16px;
  }

  .tr-arrow {
    padding: 0 4px;
  }

  .tr-said p,
  .tr-read p {
    font-size: 15px;
  }
}