/* ===================================
   CLUB BUILDER - Theming immersif
   - Page d'accueil : fond blanc
   - Pages championnat : teinté championnat
   - Pages club : immersion totale
   =================================== */

:root {
  --bg-base: #FFFFFF;
  --bg-surface: #FFFFFF;
  --bg-surface-2: #F7F7F5;
  --bg-elevated: #EFEFEC;
  --border: #EAEAE5;
  --border-strong: #C8C8C0;

  --text-primary: #0A0A0A;
  --text-secondary: #4A4A4A;
  --text-muted: #8E8E88;

  --success: #0F8C5C;
  --success-soft: rgba(15, 140, 92, 0.1);
  --warning: #D97706;
  --danger: #DC2626;
  --info: #2563EB;

  /* Theming dynamique */
  --brand: #0A0A0A;
  --brand-dark: #0A0A0A;
  --brand-accent: #DC2626;
  --brand-tint-rgb: 10, 10, 10;
  --brand-text-on-dark: #FFFFFF;
  --brand-text-on-light: #0A0A0A;

  --header-height: 72px;
  --budget-bar-height: 92px;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.1);
  --shadow-brand: 0 20px 50px -10px rgba(0, 0, 0, 0.25);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html, body {
  background: var(--bg-base);
  color: var(--text-primary);
  font-family: 'Inter', -apple-system, sans-serif;
  font-weight: 400;
  line-height: 1.5;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  transition: background 0.5s ease;
}

button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }
img { max-width: 100%; display: block; }
.hidden { display: none !important; }

/* ===================================
   FONDS PAR TYPE DE VUE
   =================================== */

/* Quand on est sur leagues, body blanc pur */
body.context-leagues {
  background: #FFFFFF;
}

/* Quand on est sur clubs (page liste), fond très subtilement teinté */
body.context-clubs {
  background: linear-gradient(180deg,
    rgba(var(--brand-tint-rgb), 0.06) 0%,
    rgba(var(--brand-tint-rgb), 0.02) 600px,
    #FFFFFF 1200px);
  background-attachment: fixed;
}

/* Quand on est sur squad/market/recap, immersion forte */
body.context-immersive {
  background: linear-gradient(180deg,
    rgba(var(--brand-tint-rgb), 0.12) 0%,
    rgba(var(--brand-tint-rgb), 0.06) 400px,
    rgba(var(--brand-tint-rgb), 0.03) 900px,
    #FFFFFF 1400px);
  background-attachment: fixed;
}

/* ===================================
   MODALE D'AIDE
   =================================== */

.help-modal {
  position: fixed;
  inset: 0;
  z-index: 500;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 16px 16px;
  animation: fadeIn 0.3s ease;
  /* iOS Safari : permettre scroll du modal entier */
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  /* Safe-area iPhone */
  padding-top: max(16px, env(safe-area-inset-top));
  padding-bottom: max(16px, env(safe-area-inset-bottom));
}

.help-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(10, 10, 10, 0.7);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: -1;
}

.help-modal-content {
  position: relative;
  background: var(--bg-surface);
  border-radius: 24px;
  max-width: 640px;
  width: 100%;
  padding: 40px 40px 32px;
  box-shadow: var(--shadow-lg);
  animation: slideUp 0.4s ease;
  /* Pas de max-height ni overflow ici : le scroll se fait sur .help-modal */
  margin: auto;
}

@keyframes slideUp {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

.help-modal-close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--bg-surface-2);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-secondary);
  transition: all 0.2s ease;
}

.help-modal-close:hover {
  background: var(--text-primary);
  color: white;
}

.help-modal-header {
  text-align: center;
  margin-bottom: 32px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--border);
}

.help-modal-eyebrow {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 11px;
  letter-spacing: 0.4em;
  color: var(--danger);
  text-transform: uppercase;
}

.help-modal-title {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(40px, 8vw, 64px);
  line-height: 0.9;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  margin-top: 12px;
}

.help-modal-title-accent {
  color: var(--danger);
  font-style: italic;
}

.help-modal-subtitle {
  margin-top: 16px;
  color: var(--text-secondary);
  font-size: 15px;
  max-width: 440px;
  margin-left: auto;
  margin-right: auto;
}

.help-steps {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-bottom: 32px;
}

.help-step {
  display: flex;
  gap: 18px;
  align-items: flex-start;
  padding: 16px;
  background: var(--bg-surface-2);
  border-radius: 12px;
  border-left: 3px solid var(--danger);
}

.help-step-num {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--text-primary);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Bebas Neue', sans-serif;
  font-size: 16px;
  font-weight: 700;
}

.help-step h3 {
  font-size: 15px;
  font-weight: 700;
  margin-bottom: 4px;
  color: var(--text-primary);
}

.help-step p {
  font-size: 13.5px;
  color: var(--text-secondary);
  line-height: 1.55;
}

.help-step strong { color: var(--text-primary); }

.help-modal-footer {
  text-align: center;
}

/* ===================================
   BOUTON D'AIDE FLOTTANT
   =================================== */

.floating-help-btn {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 300;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--brand-dark);
  color: var(--brand-text-on-dark);
  font-family: 'Bebas Neue', sans-serif;
  font-size: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-lg);
  transition: all 0.25s ease;
}

/* Cacher le "?" sur les vues qui ont un bouton sticky en bas (squad, market) */
body.view-squad .floating-help-btn,
body.view-market .floating-help-btn {
  display: none;
}

.floating-help-btn:hover {
  transform: scale(1.1);
  background: var(--brand-accent);
}

.floating-help-btn span {
  display: block;
  margin-top: -2px;
}

/* ===================================
   HEADER
   =================================== */

.app-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--border);
  height: var(--header-height);
}

.header-inner {
  max-width: 1400px;
  margin: 0 auto;
  height: 100%;
  padding: 0 32px;
  display: flex;
  align-items: center;
  gap: 24px;
}

.header-spacer { flex: 1; }

.back-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  background: var(--bg-surface);
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  color: var(--text-primary);
  font-weight: 600;
  font-size: 13px;
  transition: all 0.2s ease;
}

.back-btn:hover {
  background: var(--brand-dark);
  color: var(--brand-text-on-dark);
  border-color: var(--brand-dark);
}

.breadcrumb {
  flex: 1;
  font-family: 'Bebas Neue', sans-serif;
  letter-spacing: 0.05em;
  font-size: 13px;
  color: color-mix(in srgb, var(--brand-text-on-dark, #fff) 60%, transparent);
  text-transform: uppercase;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}

.breadcrumb .sep {
  margin: 0 10px;
  color: color-mix(in srgb, var(--brand-text-on-dark, #fff) 30%, transparent);
}

.breadcrumb .current {
  color: var(--brand-accent, #FFC857);
  font-weight: 400;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
}

/* ===================================
   PANNEAU BUDGET (sticky sous header)
   =================================== */

.budget-bar {
  position: sticky;
  top: var(--header-height);
  z-index: 99;
  background: var(--brand-dark);
  color: var(--brand-text-on-dark);
  border-bottom: 3px solid var(--brand-accent);
}

.budget-bar-inner {
  max-width: 1400px;
  margin: 0 auto;
  padding: 16px 32px;
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}

.budget-block {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.budget-block-remaining,
.budget-block-squad {
  margin-left: auto;
  padding-left: 20px;
  border-left: 1px solid rgba(255, 255, 255, 0.15);
}

.budget-block-squad {
  margin-left: 0;
}

.budget-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: rgba(255, 255, 255, 0.85);
  font-weight: 700;
  white-space: nowrap;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
}

.budget-block-remaining .budget-label,
.budget-block-squad .budget-label {
  color: #fff;
  opacity: 1;
}

.budget-count {
  margin-left: 4px;
  font-weight: 600;
  opacity: 0.9;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
}

.budget-value {
  font-family: 'Outfit', sans-serif;
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum';
  font-size: 18px;
  font-weight: 800;
  color: #fff;
  margin-top: 4px;
  transition: transform 0.2s ease;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.7);
}

.budget-value-positive { color: #5EE9A0; }
.budget-value-negative { color: #FF9B9B; }

.budget-block-remaining .budget-value {
  font-size: 22px;
}

.budget-op {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 22px;
  color: rgba(255, 255, 255, 0.4);
  font-weight: 400;
  margin-top: 14px;
}

.budget-op-equals {
  color: rgba(255, 255, 255, 0.6);
}

.budget-flash {
  animation: budgetFlash 0.6s ease;
}

@keyframes budgetFlash {
  0% { transform: scale(1); }
  40% { transform: scale(1.15); }
  100% { transform: scale(1); }
}

/* ===================================
   VUES
   =================================== */

.view {
  display: none;
  max-width: 1400px;
  margin: 0 auto;
  padding: 48px 32px 96px;
  animation: fadeIn 0.4s ease;
}

.view.active { display: block; }

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ===================================
   VUE 1 : HERO ACCUEIL
   =================================== */

.hero {
  text-align: center;
  margin: 80px 0 96px;
  position: relative;
}

.hero-eyebrow {
  display: inline-block;
  font-family: 'Bebas Neue', sans-serif;
  font-size: 12px;
  letter-spacing: 0.4em;
  color: var(--danger);
  padding: 6px 16px;
  border: 1.5px solid var(--danger);
  border-radius: 999px;
  margin-bottom: 16px;
}

.hero-title {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(64px, 13vw, 180px);
  line-height: 0.88;
  letter-spacing: -0.025em;
  text-transform: uppercase;
  color: var(--text-primary);
}

.hero-title-accent {
  color: var(--danger);
  display: inline-block;
  font-style: italic;
}

.hero-tagline {
  margin-top: 16px;
  font-size: 17px;
  color: var(--text-secondary);
  max-width: 540px;
  margin-left: auto;
  margin-right: auto;
}

.hero-link {
  margin-top: 24px;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-thickness: 2px;
  text-decoration-color: var(--danger);
  transition: color 0.2s ease;
}

.hero-link:hover {
  color: var(--danger);
}

/* ===================================
   GRILLE CHAMPIONNATS
   =================================== */

.leagues-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 20px;
  max-width: 1200px;
  margin: 0 auto;
}

.league-card {
  position: relative;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

.league-card-top {
  background: var(--brand);
  padding: 28px 24px 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  position: relative;
  min-height: 200px;
  justify-content: center;
}

.league-card-bottom {
  padding: 20px 24px 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  background: var(--bg-surface);
}

.league-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-brand);
}

.league-card.disabled { opacity: 0.55; cursor: not-allowed; }
.league-card.disabled:hover { transform: none; box-shadow: var(--shadow-sm); }

.league-card-logo {
  width: 96px;
  height: 96px;
  object-fit: contain;
}

.league-card-logo-placeholder {
  width: 96px;
  height: 96px;
  background: rgba(255, 255, 255, 0.18);
  border: 2px solid rgba(255, 255, 255, 0.45);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Bebas Neue', sans-serif;
  font-size: 30px;
  color: var(--brand-text-on-dark);
}

.league-card-name {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 22px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  text-align: center;
  color: var(--text-primary);
}

.league-card-country {
  font-size: 11px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.15em;
  font-weight: 600;
}

.league-card-badge {
  position: absolute;
  top: 14px;
  right: 14px;
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  background: var(--brand-text-on-dark);
  color: var(--brand);
  padding: 4px 10px;
  border-radius: 4px;
  font-weight: 700;
}

.league-card-badge.soon {
  background: rgba(255, 255, 255, 0.18);
  color: var(--brand-text-on-dark);
  border: 1px solid rgba(255, 255, 255, 0.3);
}

/* ===================================
   SECTION HEADER
   =================================== */

.section-header {
  margin-bottom: 40px;
  padding-bottom: 24px;
  border-bottom: 2px solid var(--brand-dark);
  position: relative;
}

.section-header::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 80px;
  height: 6px;
  background: var(--brand-accent);
}

.section-eyebrow {
  display: inline-block;
  font-family: 'Bebas Neue', sans-serif;
  font-size: 11px;
  letter-spacing: 0.4em;
  color: var(--brand-accent);
  margin-bottom: 12px;
  text-transform: uppercase;
}

.section-title {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(40px, 7vw, 72px);
  line-height: 0.95;
  text-transform: uppercase;
  letter-spacing: -0.015em;
  color: var(--brand-dark);
}

.section-subtitle {
  margin-top: 12px;
  color: var(--text-secondary);
  font-size: 15px;
}

/* ===================================
   GRILLE CLUBS
   =================================== */

.clubs-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 14px;
}

.club-card {
  position: relative;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.25s ease;
  display: flex;
  flex-direction: column;
  text-align: center;
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

.club-card-top {
  background: var(--brand);
  padding: 22px 16px 18px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  min-height: 140px;
  justify-content: center;
  position: relative;
}

.club-card-top::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: var(--brand-accent);
}

.club-card-bottom {
  padding: 16px 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.club-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-brand);
}

.club-card-logo {
  width: 64px;
  height: 64px;
  object-fit: contain;
}

.club-card-logo-placeholder {
  width: 64px;
  height: 64px;
  background: rgba(255, 255, 255, 0.18);
  border: 2px solid rgba(255, 255, 255, 0.4);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Bebas Neue', sans-serif;
  font-size: 18px;
  color: var(--brand-text-on-dark);
}

.club-card-name {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  line-height: 1.15;
  color: var(--text-primary);
}

.club-card-budget {
  font-family: 'Outfit', sans-serif;
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum';
  font-size: 12px;
  color: var(--brand-dark);
  font-weight: 700;
}

/* Cartes sans joueurs : garder les couleurs du club, juste un léger fade visuel */
.club-card.no-data {
  /* opacity retirée : les couleurs club s'affichent normalement */
  cursor: not-allowed;
}

.club-card.no-data:hover {
  /* Pas d'effet hover (le clic ne mène à rien) */
  transform: none;
}

.club-card-status {
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-muted);
  padding: 3px 8px;
  background: var(--bg-elevated);
  border-radius: 3px;
  font-weight: 700;
  margin-top: 4px;
}

/* ===================================
   BANNIÈRE CLUB
   =================================== */

.club-banner {
  display: flex;
  align-items: center;
  gap: 32px;
  padding: 56px 48px;
  background: var(--brand-dark);
  color: var(--brand-text-on-dark);
  border-radius: 20px;
  margin-bottom: 28px;
  box-shadow: var(--shadow-lg);
  position: relative;
  overflow: hidden;
}

.club-banner::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 45%;
  background: linear-gradient(110deg, transparent 0%, var(--brand-accent) 100%);
  opacity: 0.28;
  pointer-events: none;
}

.club-banner::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 6px;
  background: linear-gradient(90deg, var(--brand) 0%, var(--brand-accent) 100%);
}

.club-banner-logo {
  width: 120px;
  height: 120px;
  object-fit: contain;
  position: relative;
  z-index: 1;
  filter: drop-shadow(0 6px 16px rgba(0, 0, 0, 0.3));
}

.club-banner-info {
  position: relative;
  z-index: 1;
}

.club-banner-eyebrow {
  display: inline-block;
  font-family: 'Bebas Neue', sans-serif;
  font-size: 11px;
  letter-spacing: 0.4em;
  color: var(--brand-text-on-dark);
  opacity: 0.75;
  margin-bottom: 8px;
  text-transform: uppercase;
}

.club-banner-name {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(36px, 5.5vw, 64px);
  text-transform: uppercase;
  letter-spacing: -0.01em;
  line-height: 1;
  color: var(--brand-text-on-dark);
}

.club-banner-meta {
  color: var(--brand-text-on-dark);
  opacity: 0.85;
  margin-top: 12px;
  font-size: 14px;
  font-weight: 500;
}

/* ===================================
   BANDEAU INFO EXPLICATIF
   =================================== */

.info-banner {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 22px;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-left: 4px solid var(--info);
  border-radius: 12px;
  margin-bottom: 24px;
  box-shadow: var(--shadow-sm);
}

.info-banner-icon {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  background: rgba(37, 99, 235, 0.1);
  color: var(--info);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.info-banner-text {
  flex: 1;
  font-size: 14px;
  color: var(--text-secondary);
  line-height: 1.5;
}

.info-banner-text strong { color: var(--text-primary); }

.info-emphasis-sell {
  color: var(--success);
  font-weight: 700;
}

.info-emphasis-buy {
  color: var(--warning);
  font-weight: 700;
}

/* ===================================
   ACTIONS EFFECTIF
   =================================== */

.squad-actions-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  margin-bottom: 28px;
  padding: 14px 22px;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  flex-wrap: wrap;
  box-shadow: var(--shadow-sm);
}

.legend {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
}

.legend-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--text-secondary);
  font-weight: 600;
}

.legend-dot {
  width: 12px;
  height: 12px;
  border-radius: 4px;
  border: 1.5px solid;
}

.legend-kept {
  background: var(--brand);
  border-color: var(--brand);
}

.legend-sold {
  background: var(--bg-surface);
  border-color: var(--border-strong);
  border-style: dashed;
}

.legend-loan {
  background: rgba(217, 119, 6, 0.15);
  border-color: var(--warning);
}

.legend-bought {
  background: rgba(15, 140, 92, 0.15);
  border-color: var(--success);
}

/* ===================================
   POSITIONS
   =================================== */

.positions-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}

.position-block {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-top: 4px solid var(--brand);
  border-radius: 16px;
  padding: 28px;
  box-shadow: var(--shadow-sm);
  position: relative;
}

.position-title {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 22px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 14px;
  color: var(--brand-dark);
}

.position-abbr {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 48px;
  height: 32px;
  padding: 0 10px;
  background: var(--brand);
  color: var(--brand-text-on-dark);
  font-family: 'Bebas Neue', sans-serif;
  font-size: 14px;
  letter-spacing: 0.08em;
  border-radius: 6px;
}

.position-name {
  flex: 1;
}

.players-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 14px;
}

.subsection-loaned {
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px dashed var(--border-strong);
}

.subsection-title {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--text-muted);
  font-weight: 700;
  margin-bottom: 12px;
}

/* ===================================
   CARTE JOUEUR
   États : kept (gardé, par défaut), sold (vendu), loan-available (en prêt, non rappelé), loan-recalled (rappelé)
   =================================== */

.player-card {
  position: relative;
  background: var(--bg-surface);
  border: 1.5px solid var(--brand);
  border-radius: 12px;
  padding: 0;
  cursor: pointer;
  transition: all 0.18s ease;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-height: 280px;
}

/* État "gardé" : couleur du club */
.player-card.kept {
  background: var(--bg-surface);
  border: 1.5px solid var(--brand);
}

.player-card.kept::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: var(--brand);
  z-index: 2;
}

/* État "vendu" : grisé, bordure pointillée */
.player-card.sold {
  background: transparent;
  border: 1.5px dashed var(--border-strong);
  opacity: 0.5;
}

.player-card.sold .player-photo,
.player-card.sold .player-photo-placeholder {
  filter: grayscale(80%);
}

.player-card.sold::before {
  content: 'VENDU';
  position: absolute;
  top: 60px;
  left: 50%;
  transform: translate(-50%, 0) rotate(-8deg);
  font-family: 'Bebas Neue', sans-serif;
  font-size: 42px;
  color: var(--danger);
  letter-spacing: 0.12em;
  opacity: 0.85;
  pointer-events: none;
  z-index: 2;
  text-shadow: 0 2px 8px rgba(255, 255, 255, 0.8);
}

/* État "en prêt non rappelé" : warning (loanType: "out", non rappelé) */
.player-card.loan-available {
  background: rgba(217, 119, 6, 0.04);
  border: 1.5px solid var(--warning);
  border-style: solid;
}

.player-card.loan-available::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: var(--warning);
  z-index: 2;
}

/* État "prêté rappelé" : style "gardé" (loanType: "out", rappelé) */
.player-card.loan-recalled {
  background: var(--bg-surface);
  border: 1.5px solid var(--brand);
}

.player-card.loan-recalled::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: var(--brand);
  z-index: 2;
}

/* État "prêté au club, option d'achat" (loanType: "in", non acheté) : bordure orange */
.player-card.loan-option {
  background: rgba(217, 119, 6, 0.04);
  border: 1.5px solid var(--warning);
}

.player-card.loan-option::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: var(--warning);
  z-index: 2;
}

/* État "prêté acheté définitivement" (loanType: "in", acheté) : style success */
.player-card.loan-bought {
  background: rgba(15, 140, 92, 0.06);
  border: 1.5px solid var(--success);
}

.player-card.loan-bought::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: var(--success);
  z-index: 2;
}

/* État marché : non recruté */
.player-card.market-available {
  background: var(--bg-surface);
  border: 1.5px dashed var(--border-strong);
}

.player-card.market-available:hover {
  border-color: var(--brand);
  border-style: solid;
}

/* État marché : recruté */
.player-card.market-recruited {
  background: var(--bg-surface);
  border: 1.5px solid var(--success);
  background: rgba(15, 140, 92, 0.06);
}

.player-card.market-recruited::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: var(--success);
  z-index: 2;
}

.player-card.unaffordable {
  opacity: 0.4;
  cursor: not-allowed;
  border-color: var(--danger);
}

.player-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-lg);
}

.player-card.sold:hover {
  opacity: 0.75;
  transform: translateY(-2px);
}

.player-photo {
  width: 100%;
  height: 160px;
  border-radius: 0;
  object-fit: contain;
  object-position: center center;
  background: linear-gradient(180deg, var(--brand) 0%, var(--brand-dark) 100%);
  flex-shrink: 0;
}

.player-photo-placeholder {
  width: 100%;
  height: 160px;
  border-radius: 0;
  background: var(--brand);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Bebas Neue', sans-serif;
  color: var(--brand-text-on-dark);
  font-size: 48px;
  flex-shrink: 0;
  letter-spacing: 0.04em;
}

.player-card.sold .player-photo-placeholder {
  background: var(--bg-elevated);
  color: var(--text-muted);
}

.player-info {
  flex: 1;
  min-width: 0;
  padding: 14px 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.player-name {
  font-family: 'Bebas Neue', sans-serif;
  font-weight: 400;
  font-size: 17px;
  line-height: 1.15;
  color: var(--text-primary);
  text-transform: uppercase;
  letter-spacing: 0.01em;
  /* Affichage sur 2 lignes max si nom long */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.3em;
}

.player-meta {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 4px;
  display: flex;
  flex-wrap: wrap;
  gap: 4px 6px;
  align-items: center;
  font-weight: 500;
  line-height: 1.4;
}

.player-value {
  font-family: 'Outfit', sans-serif;
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum';
  font-size: 15px;
  font-weight: 700;
  color: var(--brand-dark);
  margin-top: auto;
  padding-top: 8px;
}

.player-card.sold .player-value {
  color: var(--success);
}

.player-card.sold .player-value::before {
  content: '+ ';
}

.player-card.market-recruited .player-value {
  color: var(--danger);
}

.player-card.market-recruited .player-value::before {
  content: '− ';
}

.player-badges {
  position: absolute;
  top: 10px;
  right: 10px;
  display: flex;
  gap: 4px;
  z-index: 3;
}

.badge {
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 4px 8px;
  border-radius: 4px;
  white-space: nowrap;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}

.badge-loan { background: var(--warning); color: white; }
.badge-loan-in { background: var(--warning); color: white; }
.badge-loan-out { background: var(--text-muted); color: white; }
.badge-recalled { background: var(--brand); color: var(--brand-text-on-dark); }
.badge-bought { background: var(--success); color: white; }

/* Prix d'option d'achat (loan in non acheté) */
.player-option-price {
  color: var(--warning) !important;
  display: flex;
  align-items: center;
  gap: 4px;
}

.player-option-price::before {
  content: '€';
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  background: var(--warning);
  color: white;
  border-radius: 50%;
  font-size: 9px;
  font-weight: 700;
}

/* Tag "Gratuit" pour les loan out non rappelés */
.player-value-free {
  color: var(--text-muted) !important;
  display: flex;
  align-items: center;
  gap: 6px;
}

.player-free-tag {
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 2px 6px;
  background: var(--success);
  color: white;
  border-radius: 3px;
  font-family: 'Inter', sans-serif;
}

.empty-list {
  color: var(--text-muted);
  font-size: 13px;
  font-style: italic;
  padding: 12px 4px;
}

/* ===================================
   BOUTONS
   =================================== */

.btn-primary, .btn-secondary {
  padding: 12px 22px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  transition: all 0.2s ease;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.btn-primary {
  background: var(--brand-dark);
  color: var(--brand-text-on-dark);
}

.btn-primary:hover {
  background: var(--brand-accent);
  transform: translateY(-1px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
}

.btn-secondary {
  background: var(--bg-surface);
  color: var(--brand-dark);
  border: 1px solid var(--brand);
}

.btn-secondary:hover {
  background: var(--brand-dark);
  color: var(--brand-text-on-dark);
  border-color: var(--brand-dark);
}

.btn-large { padding: 16px 32px; font-size: 14px; }

/* ===================================
   MARCHÉ
   =================================== */

.market-filters {
  display: flex;
  gap: 8px;
  margin-bottom: 24px;
  flex-wrap: wrap;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--border);
}

.filter-btn {
  padding: 8px 16px;
  background: var(--bg-surface);
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  transition: all 0.2s ease;
}

.filter-btn:hover { border-color: var(--brand-dark); color: var(--brand-dark); }

.filter-btn.active {
  background: var(--brand-dark);
  border-color: var(--brand-dark);
  color: var(--brand-text-on-dark);
}

.market-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 14px;
}

.market-empty {
  text-align: center;
  padding: 80px 24px;
  background: var(--bg-surface);
  border: 1px dashed var(--border-strong);
  border-radius: 16px;
  color: var(--text-secondary);
}

.market-empty p { margin-bottom: 8px; }
.market-empty-sub { font-size: 13px; color: var(--text-muted); }

.market-actions { margin-top: 40px; text-align: center; }

/* ===================================
   RÉCAP FINAL
   =================================== */

.recap-hero {
  text-align: center;
  margin-bottom: 40px;
}

.recap-validated {
  display: inline-block;
  font-family: 'Bebas Neue', sans-serif;
  font-size: 11px;
  letter-spacing: 0.4em;
  color: var(--success);
  padding: 5px 14px;
  border: 1.5px solid var(--success);
  border-radius: 999px;
  background: var(--bg-surface);
  margin-bottom: 16px;
}

.recap-title {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(48px, 9vw, 110px);
  text-transform: uppercase;
  letter-spacing: -0.015em;
  line-height: 0.9;
  color: var(--brand-dark);
}

.recap-club {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-top: 16px;
  padding: 10px 22px;
  background: var(--brand-dark);
  color: var(--brand-text-on-dark);
  border-radius: 999px;
  font-family: 'Bebas Neue', sans-serif;
  font-size: 15px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.recap-club img { width: 32px; height: 32px; object-fit: contain; }

.recap-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 12px;
  margin-bottom: 48px;
}

.recap-stat {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-top: 4px solid var(--brand);
  border-radius: 12px;
  padding: 24px 20px;
  text-align: center;
  box-shadow: var(--shadow-sm);
}

.recap-stat-label {
  display: block;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--text-muted);
  font-weight: 700;
  margin-bottom: 10px;
}

.recap-stat-value {
  display: block;
  font-family: 'Outfit', sans-serif;
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum';
  font-size: 22px;
  font-weight: 700;
  color: var(--brand-dark);
  line-height: 1;
}

.recap-positive { color: var(--success) !important; }
.recap-negative { color: var(--danger) !important; }

.recap-actions {
  margin-top: 48px;
  display: flex;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
}

/* ===================================
   TOAST
   =================================== */

.toast {
  position: fixed;
  bottom: 140px;
  left: 50%;
  transform: translateX(-50%) translateY(140%);
  background: var(--brand-dark);
  color: var(--brand-text-on-dark);
  padding: 14px 24px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 13px;
  z-index: 400;
  transition: transform 0.3s ease, opacity 0.3s ease, visibility 0.3s ease;
  box-shadow: var(--shadow-lg);
  max-width: 90vw;
  text-align: center;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.toast.show {
  transform: translateX(-50%) translateY(0);
  opacity: 1;
  visibility: visible;
}
.toast.success { background: var(--success); color: white; }
.toast.error { background: var(--danger); color: white; }
.toast.warning { background: var(--warning); color: white; }

/* ===================================
   RESPONSIVE
   =================================== */

@media (max-width: 900px) {
  .budget-bar {
    position: sticky;
  }
  .budget-bar-inner {
    padding: 10px 14px;
    gap: 8px;
    display: grid;
    /* 2 colonnes : Initial/Ventes et Recrues/Restant */
    grid-template-columns: 1fr 1fr;
    flex-wrap: unset;
    overflow: visible;
  }
  .budget-block {
    flex-shrink: 0;
    min-width: 0;
    padding: 6px 10px;
    background: rgba(255,255,255,0.05);
    border-radius: 8px;
  }
  .budget-block-remaining,
  .budget-block-squad {
    margin-left: 0;
    padding-left: 10px;
    border-left: none;
  }
  .budget-block-remaining {
    background: var(--brand-accent);
    color: var(--brand-text-on-light, #000);
  }
  .budget-op {
    display: none;
  }
  .budget-label {
    font-size: 10px !important;
    letter-spacing: 0.05em !important;
    margin-bottom: 2px;
  }
  .budget-value {
    font-size: 14px !important;
    font-weight: 800;
  }
}

/* Très petits écrans : empiler 2x2 reste compact */
@media (max-width: 480px) {
  .budget-bar-inner {
    grid-template-columns: 1fr 1fr;
    padding: 8px 10px;
    gap: 6px;
  }
  .budget-block {
    padding: 5px 8px;
  }
  .budget-label {
    font-size: 9px !important;
  }
  .budget-value {
    font-size: 13px !important;
  }
}

/* Ultra-petits écrans : 1 seule colonne pour bien voir */
@media (max-width: 360px) {
  .budget-bar-inner {
    grid-template-columns: 1fr;
  }
  .budget-block {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .budget-label {
    margin-bottom: 0;
  }
}

@media (max-width: 768px) {
  .header-inner { padding: 0 16px; gap: 12px; }
  .breadcrumb { font-size: 11px; }
  .view { padding: 24px 16px 80px; }
  .club-banner {
    flex-direction: column;
    text-align: center;
    padding: 36px 24px;
    gap: 20px;
  }
  .club-banner-logo { width: 88px; height: 88px; }
  .squad-actions-top { flex-direction: column; align-items: stretch; }
  .squad-actions-top .btn-primary { justify-content: center; }
  .players-list, .market-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }
  .clubs-grid { grid-template-columns: 1fr; }
  .position-block { padding: 20px; }
  .floating-help-btn { bottom: 16px; right: 16px; width: 44px; height: 44px; }
  .toast { bottom: 110px; }
  .help-modal-content { padding: 32px 24px 24px; }
  .player-card { min-height: 240px; }
  .player-photo, .player-photo-placeholder { height: 130px; }
  .player-photo-placeholder { font-size: 36px; }
  .player-info { padding: 12px; }
  .player-name { font-size: 15px; }
}

@media (max-width: 420px) {
  .players-list, .market-grid { grid-template-columns: 1fr; }
}

/* ===================================
   PRINT
   =================================== */

@media print {
  body { background: white !important; }
  .app-header, .budget-bar, .recap-actions, .floating-help-btn, .help-modal { display: none !important; }
  .position-block, .recap-stat { background: white; border: 1px solid #ddd; box-shadow: none; }
  .player-card { background: #fafafa; border: 1px solid #ddd; }
  .player-card.sold { display: none; }
}

/* =========================================
   MARKET SEARCH BAR + FILTERS
   ========================================= */

.market-search-bar {
  display: flex;
  gap: 12px;
  margin: 24px 0 16px;
  align-items: stretch;
}

.search-input-wrapper {
  flex: 1;
  position: relative;
  display: flex;
  align-items: center;
}

.search-icon {
  position: absolute;
  left: 16px;
  color: var(--color-text-muted, #888);
  pointer-events: none;
  z-index: 1;
}

.market-search-input {
  width: 100%;
  padding: 14px 44px 14px 46px;
  font-size: 15px;
  font-family: inherit;
  border: 2px solid var(--color-border, rgba(255,255,255,0.12));
  border-radius: 12px;
  background: var(--color-surface, rgba(255,255,255,0.04));
  color: var(--color-text, #fff);
  transition: all 0.2s ease;
  outline: none;
}

.market-search-input:focus {
  border-color: var(--color-accent, #FFC857);
  background: rgba(255,255,255,0.07);
  box-shadow: 0 0 0 4px rgba(255, 200, 87, 0.15);
}

.market-search-input::placeholder {
  color: var(--color-text-muted, #888);
}

.search-clear-btn {
  position: absolute;
  right: 12px;
  background: rgba(255,255,255,0.08);
  border: none;
  color: var(--color-text, #fff);
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: none;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.2s;
}

.search-clear-btn:hover { background: rgba(255,255,255,0.15); }
.search-clear-btn.visible { display: flex; }

.filters-toggle-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 22px;
  border: 2px solid var(--color-border, rgba(255,255,255,0.12));
  border-radius: 12px;
  background: var(--color-surface, rgba(255,255,255,0.04));
  color: var(--color-text, #fff);
  font-family: inherit;
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
}

.filters-toggle-btn:hover {
  border-color: var(--color-accent, #FFC857);
  background: rgba(255,255,255,0.07);
}

.filters-toggle-btn.active {
  border-color: var(--color-accent, #FFC857);
  background: rgba(255, 200, 87, 0.1);
  color: var(--color-accent, #FFC857);
}

.filters-active-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  background: var(--color-accent, #FFC857);
  color: #000;
  font-weight: 800;
  font-size: 12px;
  border-radius: 11px;
  margin-left: 4px;
}

/* Panneau des filtres */
.market-filters-panel {
  background: var(--brand-dark, #0A0A0A);
  border: 2px solid var(--brand-accent, #FFC857);
  border-radius: 14px;
  padding: 22px;
  margin-bottom: 20px;
  animation: slideDown 0.25s ease;
  box-shadow: 0 8px 32px rgba(0,0,0,0.3);
}

@keyframes slideDown {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}

.filters-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 14px;
}

.filter-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.filter-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--brand-text-on-dark, #fff);
  opacity: 0.75;
}

.filter-select {
  padding: 10px 12px;
  font-family: inherit;
  font-size: 14px;
  background: rgba(0, 0, 0, 0.35);
  color: var(--brand-text-on-dark, #fff);
  border: 1.5px solid color-mix(in srgb, var(--brand-text-on-dark, #fff) 25%, transparent);
  border-radius: 9px;
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right 10px center;
  padding-right: 32px;
  transition: border-color 0.2s;
}

.filter-select:hover { border-color: var(--brand-accent, #FFC857); }
.filter-select:focus { outline: none; border-color: var(--brand-accent, #FFC857); }
.filter-select option { background: #1a1a1a; color: #fff; }

.filters-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--color-border, rgba(255,255,255,0.08));
}

.btn-small {
  padding: 8px 16px;
  font-size: 13px;
  font-family: inherit;
  font-weight: 600;
  border-radius: 8px;
  cursor: pointer;
  border: 1.5px solid var(--color-border, rgba(255,255,255,0.15));
  background: transparent;
  color: var(--color-text, #fff);
  transition: all 0.2s ease;
}

.btn-small:hover {
  border-color: var(--color-accent, #FFC857);
  color: var(--color-accent, #FFC857);
}

.filters-result-count {
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text-muted, #aaa);
}

.filters-result-count span {
  color: var(--color-accent, #FFC857);
  font-weight: 800;
  font-size: 15px;
}

.market-more-hint {
  grid-column: 1 / -1;
  text-align: center;
  padding: 20px;
  color: var(--color-text-muted, #888);
  font-size: 13px;
  font-style: italic;
}

/* Responsive mobile */
@media (max-width: 640px) {
  .market-search-bar { flex-direction: column; }
  .filters-toggle-btn { justify-content: center; }
  .filters-grid { grid-template-columns: 1fr 1fr; }
}

/* =========================================
   SEARCH BAR — couleurs du club avec contraste auto
   ========================================= */

.market-search-bar {
  margin-top: 32px !important;
  margin-bottom: 18px !important;
  gap: 14px !important;
}

.market-search-input {
  padding: 18px 50px 18px 52px !important;
  font-size: 17px !important;
  font-weight: 500;
  border: 2.5px solid var(--brand-accent, #FFC857) !important;
  border-radius: 14px !important;
  background: var(--brand-dark, #0A0A0A) !important;
  color: var(--brand-text-on-dark, #fff) !important;
  box-shadow: 0 4px 16px rgba(0,0,0,0.25);
}

.market-search-input::placeholder {
  color: var(--brand-text-on-dark, #fff) !important;
  opacity: 0.65;
  font-weight: 600;
}

.market-search-input:focus {
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--brand-accent, #FFC857) 30%, transparent), 0 4px 16px rgba(0,0,0,0.3) !important;
  outline: none;
}

.search-icon {
  left: 18px !important;
  color: var(--brand-text-on-dark, #fff) !important;
  opacity: 0.85;
}

.search-clear-btn {
  background: var(--brand-accent, #FFC857) !important;
  color: var(--brand-dark, #000) !important;
}

.filters-toggle-btn {
  padding: 18px 26px !important;
  font-size: 15px !important;
  font-weight: 800 !important;
  border: 2.5px solid var(--brand-accent, #FFC857) !important;
  border-radius: 14px !important;
  background: var(--brand-dark, #0A0A0A) !important;
  color: var(--brand-text-on-dark, #fff) !important;
  box-shadow: 0 4px 16px rgba(0,0,0,0.25);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.filters-toggle-btn:hover {
  background: var(--brand-accent, #FFC857) !important;
  color: var(--brand-text-on-light, #000) !important;
}

.filters-toggle-btn.active {
  background: var(--brand-accent, #FFC857) !important;
  color: var(--brand-text-on-light, #000) !important;
}

.filters-active-badge {
  background: var(--brand-text-on-dark, #fff) !important;
  color: var(--brand-dark, #000) !important;
}

.filters-toggle-btn.active .filters-active-badge,
.filters-toggle-btn:hover .filters-active-badge {
  background: var(--brand-dark, #000) !important;
  color: var(--brand-text-on-dark, #fff) !important;
}

/* =========================================
   CTA BUTTONS — version améliorée plus visible
   ========================================= */

/* Bandeau d'action sticky en bas pour les boutons importants */
.market-actions,
.squad-actions {
  position: sticky;
  bottom: 16px;
  z-index: 50;
  margin-top: 32px;
  padding: 0;
  background: transparent;
  border-radius: 16px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
  pointer-events: none;  /* le bandeau lui-même est click-through */
}

/* Seul le bouton est cliquable */
.market-actions > *,
.squad-actions > * {
  pointer-events: auto;
}

/* Bouton primary large : plus de présence */
.btn-large {
  padding: 18px 36px !important;
  font-size: 17px !important;
  font-weight: 800 !important;
  letter-spacing: 0.02em;
  min-height: 60px;
  border-radius: 14px !important;
  box-shadow: 0 8px 24px rgba(255, 200, 87, 0.35);
  transition: all 0.2s ease;
  width: 100%;
  max-width: 480px;
}

.btn-large:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 32px rgba(255, 200, 87, 0.45);
}

.btn-large:active {
  transform: translateY(0);
}

/* Mobile : encore plus visible */
@media (max-width: 640px) {
  .market-actions,
  .squad-actions {
    bottom: 8px;
  }
  .btn-large {
    width: 100%;
    padding: 16px 24px !important;
    font-size: 16px !important;
  }
}

/* =========================================
   SHARE IMAGE — STYLE TRANSFERMARKT
   Format 4:5 (1080×1350) optimal Instagram
   ========================================= */

.share-image-template {
  position: fixed;
  top: -10000px;
  left: -10000px;
  width: 1080px;
  height: 1350px;
  pointer-events: none;
  z-index: -1;
}

.share-card {
  /* Couleurs dynamiques injectées par JS via --share-primary, --share-dark, --share-accent */
  --share-primary: #004170;
  --share-dark: #0A2340;
  --share-accent: #FFC857;

  width: 1080px;
  height: 1350px;
  background: var(--share-dark);
  background: linear-gradient(180deg, var(--share-primary) 0%, var(--share-dark) 100%);
  color: #FFFFFF;
  padding: 50px 60px 40px;
  display: flex;
  flex-direction: column;
  font-family: 'Inter', sans-serif;
  position: relative;
  box-sizing: border-box;
  overflow: hidden;
}

/* Effet de motif/pattern en arrière-plan */
.share-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle at 0% 0%, rgba(255,255,255,0.08), transparent 50%),
    radial-gradient(circle at 100% 100%, rgba(255,255,255,0.05), transparent 50%);
  pointer-events: none;
}

/* ===== EN-TÊTE ===== */
.share-header {
  display: flex;
  align-items: center;
  gap: 32px;
  margin-bottom: 24px;
  position: relative;
  z-index: 2;
}

.share-club-logo-wrap {
  width: 140px;
  height: 140px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,0.95);
  border-radius: 18px;
  padding: 18px;
  flex-shrink: 0;
}

.share-club-logo-wrap img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.share-header-text {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.share-eyebrow {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--share-accent);
}

.share-club-name {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 84px;
  font-weight: 400;
  line-height: 0.95;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  margin: 4px 0 0;
  color: #FFFFFF;
}

.share-season {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: rgba(255,255,255,0.7);
  margin-top: 6px;
}

/* ===== PILULE DE STATS ===== */
.share-stats-pill {
  display: flex !important;
  background: rgba(0,0,0,0.35);
  border: 2px solid rgba(255,255,255,0.18);
  border-radius: 16px;
  padding: 0 22px !important;
  min-height: 100px !important;
  margin-bottom: 28px;
  gap: 30px;
  align-items: center !important;
  justify-content: center;
  position: relative;
  z-index: 2;
  box-sizing: border-box !important;
}

.share-stat {
  flex: 1;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center;
  gap: 8px !important;
  height: 100% !important;
}

.share-stat + .share-stat {
  border-left: 1.5px solid rgba(255,255,255,0.18);
  padding-left: 30px;
}

.share-stat-label {
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.14em;
  color: rgba(255,255,255,0.65);
  margin: 0;
  padding: 0;
  text-transform: uppercase;
  line-height: 1;
}

.share-stat-value {
  font-family: 'Outfit', sans-serif;
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum';
  font-size: 44px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: #FFFFFF;
  line-height: 1;
  margin: 0;
  padding: 0;
}

/* ===== POSITIONS — LISTE STYLE TRANSFERMARKT ===== */
.share-positions {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  gap: 18px;
  position: relative;
  z-index: 2;
  padding-bottom: 6px;
}

.share-position-section {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.share-position-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-bottom: 6px;
  border-bottom: 2.5px solid var(--share-accent);
}

.share-position-title {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 36px;
  font-weight: 400;
  letter-spacing: 0.04em;
  color: var(--share-accent);
  text-transform: uppercase;
  margin: 0;
  line-height: 1.1;
  padding: 4px 0;
}

.share-position-count {
  font-size: 22px;
  font-weight: 700;
  color: rgba(255,255,255,0.75);
  line-height: 1.1;
}

/* Liste des joueurs : TOUJOURS 3 colonnes pour équilibre */
.share-players-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px 20px;
}

.share-player-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 6px 2px;
  min-height: 54px;
  overflow: hidden;
}

.share-player-club-logo-mini {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  background: rgba(255,255,255,0.95);
  border-radius: 7px;
  padding: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.share-player-club-logo-mini img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.share-player-name {
  font-size: 22px;
  font-weight: 700;
  color: #FFFFFF;
  line-height: 1.6;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 8px 0 10px;
  flex: 1;
  min-width: 0;
  display: block;
}

/* Recrue : badge "+" coloré */
.share-player-row.recruited .share-player-name {
  color: var(--share-accent);
}

.share-player-row.recruited::after {
  content: "+";
  font-family: 'Bebas Neue', sans-serif;
  font-size: 28px;
  color: var(--share-accent);
  line-height: 1.6;
  padding-left: 6px;
  flex-shrink: 0;
  align-self: center;
}

/* ===== FOOTER ===== */
.share-footer {
  margin-top: 24px;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  z-index: 2;
}

.share-watermark-block {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px;
  padding: 10px 24px !important;
  background: rgba(0,0,0,0.4);
  border: 1.5px solid rgba(255,255,255,0.2);
  border-radius: 50px;
  line-height: 1;
  box-sizing: border-box !important;
}

.share-watermark,
.share-watermark-accent {
  transform: translateY(-5px) !important;
}

.share-watermark {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 26px;
  letter-spacing: 0.14em;
  color: rgba(255,255,255,0.85);
  text-transform: uppercase;
  line-height: 1;
  margin: 0;
  padding: 0;
}

.share-watermark-accent {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 26px;
  letter-spacing: 0.14em;
  color: var(--share-accent);
  text-transform: uppercase;
  line-height: 1;
  margin: 0;
  padding: 0;
}

/* Adaptations selon le nombre de joueurs par poste */
/* Pour les sections très peuplées (>9 joueurs) : 4 colonnes */
.share-players-list.very-dense {
  grid-template-columns: repeat(4, 1fr);
  gap: 4px 14px;
}

.share-players-list.very-dense .share-player-name {
  font-size: 18px;
  line-height: 1.6;
  padding: 6px 0 8px;
}

.share-players-list.very-dense .share-player-club-logo-mini {
  width: 34px;
  height: 34px;
}

.share-players-list.very-dense .share-player-row {
  min-height: 46px;
  gap: 10px;
  padding: 4px 2px;
}

.share-players-list.very-dense .share-player-row.recruited::after {
  font-size: 22px;
}

/* Pour 1-2 joueurs : 2 colonnes pour ne pas perdre l'équilibre */
.share-players-list.sparse {
  grid-template-columns: repeat(2, 1fr);
}

.share-players-list.sparse .share-player-name {
  font-size: 26px;
  line-height: 1.5;
  padding: 10px 0 12px;
}

/* =========================================
   ADAPTATIONS PROGRESSIVES SELON TAILLE EFFECTIF
   Pour que tout rentre toujours dans 1080×1350
   ========================================= */

/* MEDIUM : 16-21 joueurs — léger compactage */
.share-card.squad-medium {
  padding: 44px 56px 32px;
}
.share-card.squad-medium .share-header {
  margin-bottom: 18px;
  gap: 28px;
}
.share-card.squad-medium .share-club-logo-wrap {
  width: 120px;
  height: 120px;
  padding: 16px;
}
.share-card.squad-medium .share-club-name {
  font-size: 76px;
}
.share-card.squad-medium .share-stats-pill {
  margin-bottom: 20px;
}
.share-card.squad-medium .share-stat-value {
  font-size: 40px;
}
.share-card.squad-medium .share-positions {
  gap: 14px;
}
.share-card.squad-medium .share-position-section {
  gap: 8px;
}
.share-card.squad-medium .share-position-title {
  font-size: 32px;
}
.share-card.squad-medium .share-player-row {
  min-height: 50px;
  padding: 4px 2px;
}
.share-card.squad-medium .share-player-name {
  font-size: 20px;
  padding: 6px 0 8px;
}
.share-card.squad-medium .share-player-club-logo-mini {
  width: 36px;
  height: 36px;
}
.share-card.squad-medium .share-footer {
  margin-top: 16px;
}

/* LARGE : 22-27 joueurs — compactage plus marqué */
.share-card.squad-large {
  padding: 38px 50px 26px;
}
.share-card.squad-large .share-header {
  margin-bottom: 14px;
  gap: 24px;
}
.share-card.squad-large .share-club-logo-wrap {
  width: 108px;
  height: 108px;
  padding: 14px;
}
.share-card.squad-large .share-club-name {
  font-size: 70px;
}
.share-card.squad-large .share-eyebrow {
  font-size: 20px;
}
.share-card.squad-large .share-season {
  font-size: 18px;
}
.share-card.squad-large .share-stats-pill {
  margin-bottom: 16px;
  min-height: 88px !important;
}
.share-card.squad-large .share-stat-label {
  font-size: 13px;
}
.share-card.squad-large .share-stat-value {
  font-size: 36px;
}
.share-card.squad-large .share-positions {
  gap: 10px;
}
.share-card.squad-large .share-position-section {
  gap: 6px;
}
.share-card.squad-large .share-position-title {
  font-size: 28px;
}
.share-card.squad-large .share-position-count {
  font-size: 19px;
}
.share-card.squad-large .share-player-row {
  min-height: 44px;
  padding: 2px 2px;
  gap: 10px;
}
.share-card.squad-large .share-player-name {
  font-size: 18px;
  padding: 5px 0 6px;
  line-height: 1.5;
}
.share-card.squad-large .share-player-club-logo-mini {
  width: 32px;
  height: 32px;
  padding: 3px;
}
.share-card.squad-large .share-footer {
  margin-top: 12px;
}
.share-card.squad-large .share-watermark,
.share-card.squad-large .share-watermark-accent {
  font-size: 22px;
}
.share-card.squad-large .share-watermark-block {
  padding: 10px 20px;
}

/* XLARGE : 28-30+ joueurs — compactage max */
.share-card.squad-xlarge {
  padding: 32px 44px 22px;
}
.share-card.squad-xlarge .share-header {
  margin-bottom: 10px;
  gap: 20px;
}
.share-card.squad-xlarge .share-club-logo-wrap {
  width: 92px;
  height: 92px;
  padding: 12px;
  border-radius: 14px;
}
.share-card.squad-xlarge .share-club-name {
  font-size: 60px;
}
.share-card.squad-xlarge .share-eyebrow {
  font-size: 18px;
}
.share-card.squad-xlarge .share-season {
  font-size: 16px;
}
.share-card.squad-xlarge .share-stats-pill {
  margin-bottom: 12px;
  min-height: 78px !important;
}
.share-card.squad-xlarge .share-stat-label {
  font-size: 12px;
}
.share-card.squad-xlarge .share-stat-value {
  font-size: 30px;
}
.share-card.squad-xlarge .share-positions {
  gap: 8px;
}
.share-card.squad-xlarge .share-position-section {
  gap: 4px;
}
.share-card.squad-xlarge .share-position-header {
  padding-bottom: 4px;
}
.share-card.squad-xlarge .share-position-title {
  font-size: 24px;
}
.share-card.squad-xlarge .share-position-count {
  font-size: 17px;
}
.share-card.squad-xlarge .share-player-row {
  min-height: 38px;
  padding: 2px 2px;
  gap: 8px;
}
.share-card.squad-xlarge .share-player-name {
  font-size: 16px;
  padding: 4px 0 5px;
  line-height: 1.5;
}
.share-card.squad-xlarge .share-player-club-logo-mini {
  width: 28px;
  height: 28px;
  padding: 3px;
  border-radius: 5px;
}
.share-card.squad-xlarge .share-footer {
  margin-top: 8px;
}
.share-card.squad-xlarge .share-watermark,
.share-card.squad-xlarge .share-watermark-accent {
  font-size: 20px;
}
.share-card.squad-xlarge .share-watermark-block {
  padding: 8px 18px;
}
.share-card.squad-xlarge .share-player-row.recruited::after {
  font-size: 22px;
}

/* ===== FOOTER ===== */
.share-footer {
  margin-top: 38px;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  z-index: 2;
}

.share-watermark-block {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 14px 28px;
  background: rgba(0,0,0,0.4);
  border: 1.5px solid rgba(255,255,255,0.2);
  border-radius: 50px;
}

.share-watermark {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 30px;
  letter-spacing: 0.14em;
  color: rgba(255,255,255,0.85);
  text-transform: uppercase;
}

.share-watermark-accent {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 30px;
  letter-spacing: 0.14em;
  color: var(--share-accent);
  text-transform: uppercase;
}

/* =========================================
   RESPONSIVE — Passe complète
   Breakpoints :
   - 1024px : tablette paysage
   - 768px  : tablette portrait
   - 640px  : mobile large
   - 480px  : mobile standard
   - 360px  : mobile ultra-petit
   ========================================= */

/* ======= TABLETTE PAYSAGE (1024px) ======= */
@media (max-width: 1024px) {
  .view {
    padding: 28px 24px 90px;
  }
  .section-title {
    font-size: 38px;
  }
  .leagues-grid {
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 18px;
  }
  .clubs-grid {
    grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
    gap: 16px;
  }
  .players-list,
  .market-grid {
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 14px;
  }
  .filters-grid {
    grid-template-columns: repeat(3, 1fr);
  }
  .recap-stats {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ======= TABLETTE PORTRAIT (768px) — déjà existante, on ajoute des trucs ======= */
@media (max-width: 768px) {
  .section-title {
    font-size: 32px;
    line-height: 1.05;
  }
  .section-subtitle {
    font-size: 14px;
  }
  .section-eyebrow {
    font-size: 11px;
  }

  /* Header de page */
  .header-inner {
    flex-wrap: wrap;
    padding: 10px 14px;
  }
  .app-logo {
    font-size: 18px;
  }
  .breadcrumb {
    width: 100%;
    overflow-x: auto;
    padding: 2px 0;
    scrollbar-width: none;
  }
  .breadcrumb::-webkit-scrollbar {
    display: none;
  }

  /* Budget bar */
  .budget-block-name {
    font-size: 11px;
  }
  .budget-block-value {
    font-size: 14px;
  }

  /* Filtres marché */
  .filters-grid {
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }
  .filter-select {
    font-size: 13px;
    padding: 8px 10px;
  }
  .filters-actions {
    flex-direction: column;
    gap: 12px;
    align-items: stretch;
  }
  .filters-result-count {
    text-align: center;
  }

  /* Banner club */
  .club-banner-text h1 {
    font-size: 28px;
  }

  /* Recap */
  .recap-stats {
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }
  .recap-stat {
    padding: 16px;
  }
  .recap-stat-value {
    font-size: 24px;
  }
  .recap-actions {
    flex-direction: column;
    gap: 10px;
  }
  .recap-actions .btn-secondary,
  .recap-actions .btn-primary {
    width: 100%;
    justify-content: center;
  }
}

/* ======= MOBILE LARGE (640px) ======= */
@media (max-width: 640px) {
  .view {
    padding: 20px 14px 100px;
  }
  .section-title {
    font-size: 28px;
  }

  /* Cards league/club plus petites */
  .leagues-grid {
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }
  .league-card {
    padding: 16px 12px;
  }
  .league-card-logo {
    width: 56px;
    height: 56px;
  }
  .league-card-name {
    font-size: 13px;
  }

  /* Clubs grid : 2 colonnes */
  .clubs-grid {
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }
  .club-card {
    padding: 14px 10px;
  }
  .club-card-logo {
    width: 64px;
    height: 64px;
  }
  .club-card-name {
    font-size: 13px;
  }

  /* Header */
  .app-logo span {
    display: none;
  }

  /* Section header avec marges réduites */
  .section-header {
    margin-bottom: 24px;
  }
  .info-banner {
    padding: 14px;
    gap: 12px;
  }
  .info-banner-text {
    font-size: 13px;
  }

  /* Recap stats : passe à 1 colonne */
  .recap-stats {
    grid-template-columns: 1fr;
  }

  /* Player cards */
  .player-card {
    min-height: 200px;
  }
  .player-info {
    padding: 10px;
  }
  .player-name {
    font-size: 13px;
  }
  .player-meta {
    font-size: 11px;
  }
  .player-value {
    font-size: 14px;
  }

  /* Position blocks (vue squad et recap) */
  .position-title {
    font-size: 18px;
  }
  .position-abbr {
    font-size: 22px;
  }
}

/* ======= MOBILE STANDARD (480px) ======= */
@media (max-width: 480px) {
  .view {
    padding: 16px 12px 100px;
  }
  .section-title {
    font-size: 24px;
  }
  .section-subtitle {
    font-size: 13px;
  }

  /* Header encore plus compact */
  .header-inner {
    padding: 8px 12px;
  }
  .app-header {
    min-height: 50px;
  }

  /* Budget bar : compact */
  .budget-bar-inner {
    padding: 10px 12px;
    gap: 10px;
  }
  .budget-block {
    padding-left: 10px;
  }
  .budget-block-name {
    font-size: 10px;
    letter-spacing: 0.04em;
  }
  .budget-block-value {
    font-size: 13px;
  }

  /* Players + market : 1 colonne pour vraie lisibilité */
  .players-list,
  .market-grid {
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }
  .player-card {
    min-height: 180px;
  }
  .player-photo,
  .player-photo-placeholder {
    height: 110px;
  }

  /* Search bar : plus compacte */
  .market-search-input {
    padding: 14px 42px 14px 44px !important;
    font-size: 15px !important;
  }
  .filters-toggle-btn {
    padding: 14px 18px !important;
    font-size: 13px !important;
  }
  .search-icon {
    left: 14px !important;
    width: 16px;
    height: 16px;
  }

  /* Filtres : 1 colonne pour ne plus serrer */
  .filters-grid {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .market-filters-panel {
    padding: 16px;
  }

  /* Section spacing */
  .section-header {
    margin-bottom: 18px;
  }

  /* Info banner */
  .info-banner {
    flex-direction: column;
    text-align: center;
    padding: 12px;
  }
  .info-banner-icon {
    margin: 0 auto;
  }

  /* Position blocks */
  .position-block {
    padding: 16px;
  }

  /* Boutons */
  .btn-primary,
  .btn-secondary {
    padding: 12px 20px;
    font-size: 14px;
  }
  .btn-large {
    padding: 14px 22px !important;
    font-size: 15px !important;
  }

  /* Help modal */
  .help-modal-content {
    padding: 24px 18px 18px;
  }
  .help-modal h2 {
    font-size: 20px;
  }

  /* Floating help button - assez gros pour le tap */
  .floating-help-btn {
    width: 48px;
    height: 48px;
    bottom: 12px;
    right: 12px;
  }

  /* Toast */
  .toast {
    bottom: 100px;
    padding: 10px 18px;
    font-size: 12px;
  }
}

/* ======= MOBILE ULTRA-PETIT (360px) ======= */
@media (max-width: 360px) {
  .view {
    padding: 14px 10px 100px;
  }

  /* Header très compact */
  .app-logo {
    font-size: 16px;
  }

  /* Title réduit */
  .section-title {
    font-size: 22px;
  }
  .section-subtitle {
    font-size: 12px;
  }

  /* Cards encore plus petites */
  .leagues-grid,
  .clubs-grid {
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }
  .league-card,
  .club-card {
    padding: 12px 8px;
  }
  .league-card-logo {
    width: 48px;
    height: 48px;
  }
  .club-card-logo {
    width: 56px;
    height: 56px;
  }
  .league-card-name,
  .club-card-name {
    font-size: 12px;
  }

  /* Player cards encore plus compacts */
  .player-card {
    min-height: 160px;
  }
  .player-photo,
  .player-photo-placeholder {
    height: 95px;
  }
  .player-name {
    font-size: 12px;
  }
  .player-meta {
    font-size: 10px;
  }
  .player-value {
    font-size: 12px;
  }

  /* Budget block : on cache "Investi" */
  .budget-block-invested {
    display: none;
  }

  /* Section spacing minimal */
  .section-header {
    margin-bottom: 14px;
  }

  /* Search bar mini */
  .market-search-input {
    padding: 12px 38px 12px 40px !important;
    font-size: 14px !important;
  }
  .filters-toggle-btn {
    padding: 12px 14px !important;
    font-size: 12px !important;
  }
  .filters-toggle-btn span:not(.filters-active-badge) {
    display: none;
  }
}

/* ======= PRÉVISUALISATION IMAGE PARTAGE ======= */
/* Adapter la vue récap pour ne pas que l'image fixe 1080x1350 déborde */
@media (max-width: 768px) {
  .recap-container {
    overflow-x: hidden;
  }
}

/* ======= ACCESSIBILITÉ : taps assez gros ======= */
/* iOS recommande min 44x44px pour les zones cliquables */
@media (pointer: coarse) {
  .btn-primary,
  .btn-secondary,
  .filter-btn,
  .filters-toggle-btn,
  .search-clear-btn {
    min-height: 44px;
  }
  .floating-help-btn {
    min-width: 44px;
    min-height: 44px;
  }
  .filter-select {
    min-height: 40px;
  }
}

/* ======= LANDSCAPE MOBILE (orientation paysage) ======= */
/* Quand on tourne le téléphone, on profite de la largeur */
@media (max-width: 900px) and (orientation: landscape) {
  .leagues-grid,
  .clubs-grid {
    grid-template-columns: repeat(3, 1fr);
  }
  .players-list,
  .market-grid {
    grid-template-columns: repeat(3, 1fr);
  }
  .recap-stats {
    grid-template-columns: repeat(2, 1fr);
  }
}


/* ======= SAFE AREAS (iPhone notch, etc.) ======= */
@supports (padding: env(safe-area-inset-top)) {
  .app-header {
    padding-top: env(safe-area-inset-top);
  }
  .view {
    padding-left: max(14px, env(safe-area-inset-left));
    padding-right: max(14px, env(safe-area-inset-right));
  }
  .market-actions,
  .squad-actions {
    bottom: max(16px, env(safe-area-inset-bottom));
  }
  .floating-help-btn {
    bottom: max(16px, env(safe-area-inset-bottom));
    right: max(16px, env(safe-area-inset-right));
  }
}

/* ======= ÉVITE LE ZOOM iOS quand on tape dans un input ======= */
/* iOS Safari zoom auto si font-size < 16px sur un input */
@media (max-width: 768px) {
  .market-search-input,
  .filter-select {
    font-size: 16px !important;
  }
}


/* =========================================
   LOANS ALERT (Section "Prêts à gérer")
   ========================================= */

.loans-alert {
  /* Fond foncé du club + bordure accent → toujours lisible */
  background: var(--brand-dark, #0F0F0F);
  border: 2.5px solid var(--brand-accent, #FFC857);
  border-radius: 16px;
  padding: 18px 22px;
  margin: 20px 0 24px;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.35);
  animation: loansAlertSlide 0.4s ease-out;
  color: var(--brand-text-on-dark, #fff);
}

@keyframes loansAlertSlide {
  from { opacity: 0; transform: translateY(-12px); }
  to   { opacity: 1; transform: translateY(0); }
}

.loans-alert-header {
  display: flex;
  align-items: center;
  gap: 16px;
}

.loans-alert-icon {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--brand-accent, #FFC857);
  color: var(--brand-text-on-light, #000);
  display: flex;
  align-items: center;
  justify-content: center;
  animation: loansAlertPulse 2s ease-in-out infinite;
}

@keyframes loansAlertPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255, 200, 87, 0.4); }
  50%      { box-shadow: 0 0 0 12px rgba(255, 200, 87, 0); }
}

.loans-alert-content {
  flex: 1;
  min-width: 0;
}

.loans-alert-title {
  margin: 0;
  font-family: 'Bebas Neue', sans-serif;
  font-size: 22px;
  font-weight: 400;
  letter-spacing: 0.05em;
  /* Texte adapté au fond sombre du club */
  color: var(--brand-text-on-dark, #fff);
  display: flex;
  align-items: center;
  gap: 10px;
  text-transform: uppercase;
}

.loans-alert-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  height: 28px;
  padding: 0 10px;
  background: var(--brand-accent, #FFC857);
  color: var(--brand-text-on-light, #000);
  border-radius: 14px;
  font-family: 'Inter', sans-serif;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0;
}

.loans-alert-subtitle {
  margin: 4px 0 0;
  font-size: 14px;
  color: var(--brand-text-on-dark, #fff);
  opacity: 0.85;
}

.loans-alert-toggle {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 16px;
  border: 2px solid var(--brand-accent, #FFC857);
  border-radius: 10px;
  background: var(--brand-accent, #FFC857);
  color: var(--brand-text-on-light, #000);
  font-family: inherit;
  font-size: 13px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  cursor: pointer;
  transition: all 0.2s ease;
}

.loans-alert-toggle:hover {
  transform: translateY(-1px);
  filter: brightness(1.1);
}

.loans-alert-toggle-icon {
  transition: transform 0.25s ease;
}

.loans-alert-toggle[aria-expanded="true"] .loans-alert-toggle-icon {
  transform: rotate(180deg);
}

.loans-alert-body {
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1.5px dashed color-mix(in srgb, var(--brand-accent, #FFC857) 40%, transparent);
}

.loans-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 14px;
}

.loans-tab {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 16px;
  border: 2px solid color-mix(in srgb, var(--brand-accent, #FFC857) 35%, transparent);
  border-radius: 10px;
  background: transparent;
  color: var(--brand-text-on-dark, #fff);
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s ease;
}

.loans-tab:hover {
  border-color: var(--brand-accent, #FFC857);
}

.loans-tab.active {
  background: var(--brand-accent, #FFC857);
  color: var(--brand-text-on-light, #000);
  border-color: var(--brand-accent, #FFC857);
}

.loans-tab-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  padding: 0 8px;
  background: rgba(0,0,0,0.18);
  color: inherit;
  border-radius: 11px;
  font-size: 11px;
  font-weight: 800;
}

.loans-tab.active .loans-tab-count {
  background: rgba(0,0,0,0.18);
}

.loans-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 10px;
  max-height: 360px;
  overflow-y: auto;
  padding-right: 4px;
}

.loans-list-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  background: rgba(0, 0, 0, 0.3);
  border: 1.5px solid color-mix(in srgb, var(--brand-accent, #FFC857) 25%, transparent);
  border-radius: 10px;
  transition: all 0.2s ease;
}

.loans-list-item:hover {
  border-color: var(--brand-accent, #FFC857);
  background: rgba(0, 0, 0, 0.45);
}

.loans-list-photo {
  width: 44px;
  height: 44px;
  border-radius: 8px;
  object-fit: cover;
  background: rgba(255,255,255,0.05);
  flex-shrink: 0;
}

.loans-list-info {
  flex: 1;
  min-width: 0;
}

.loans-list-name {
  font-size: 14px;
  font-weight: 700;
  color: var(--brand-text-on-dark, #fff);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.loans-list-meta {
  font-size: 11px;
  color: var(--brand-text-on-dark, #fff);
  opacity: 0.65;
  margin-top: 2px;
}

.loans-list-price {
  font-size: 13px;
  font-weight: 800;
  color: var(--brand-accent, #FFC857);
}

.loans-list-action {
  flex-shrink: 0;
  padding: 8px 14px;
  border: none;
  border-radius: 8px;
  background: var(--brand-accent, #FFC857);
  color: var(--brand-text-on-light, #000);
  font-family: inherit;
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: all 0.2s ease;
}

.loans-list-action:hover {
  transform: scale(1.05);
}

.loans-list-action.recall {
  background: #5BA8FF;
  color: white;
}

.loans-list-empty {
  grid-column: 1 / -1;
  text-align: center;
  padding: 30px;
  color: var(--brand-text-on-dark, #fff);
  opacity: 0.5;
  font-size: 14px;
}

.info-banner-compact {
  padding: 12px 16px;
  font-size: 13px;
}

.info-banner-compact .info-banner-text {
  font-size: 13px;
}

/* =========================================
   LOAN CONFIRM MODAL
   ========================================= */

.loan-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 16px;
  animation: fadeIn 0.2s ease;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding-top: max(16px, env(safe-area-inset-top));
  padding-bottom: max(16px, env(safe-area-inset-bottom));
}

/* CRITIQUE : forcer hidden à fonctionner même avec display: flex */
.loan-modal[hidden] {
  display: none !important;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.loan-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.65);
  backdrop-filter: blur(4px);
  z-index: -1;
}

.loan-modal-content {
  position: relative;
  width: 100%;
  max-width: 440px;
  background: var(--brand-dark, #1a1a1a);
  border: 2.5px solid var(--brand-accent, #FFC857);
  border-radius: 18px;
  padding: 32px 28px 24px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.5);
  animation: modalPop 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  margin: auto;
}

@keyframes modalPop {
  from { opacity: 0; transform: scale(0.85) translateY(20px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}

.loan-modal-close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 36px;
  height: 36px;
  border: none;
  border-radius: 50%;
  background: rgba(255,255,255,0.08);
  color: var(--brand-text-on-dark, #fff);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.2s;
}

.loan-modal-close:hover {
  background: rgba(255,255,255,0.18);
}

.loan-modal-icon {
  width: 60px;
  height: 60px;
  margin: 0 auto 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 36px;
}

.loan-modal-title {
  text-align: center;
  margin: 0 0 8px;
  font-family: 'Bebas Neue', sans-serif;
  font-size: 26px;
  font-weight: 400;
  letter-spacing: 0.03em;
  color: var(--brand-text-on-dark, #fff);
  text-transform: uppercase;
}

.loan-modal-subtitle {
  text-align: center;
  margin: 0 0 20px;
  font-size: 14px;
  color: var(--brand-text-on-dark, #fff);
  opacity: 0.8;
}

.loan-modal-player {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px;
  background: rgba(255,255,255,0.05);
  border-radius: 12px;
  margin-bottom: 16px;
}

.loan-modal-photo {
  width: 60px;
  height: 60px;
  border-radius: 10px;
  object-fit: cover;
  background: rgba(255,255,255,0.08);
  flex-shrink: 0;
}

.loan-modal-player-info {
  flex: 1;
  min-width: 0;
}

.loan-modal-player-name {
  font-size: 17px;
  font-weight: 700;
  color: var(--brand-text-on-dark, #fff);
}

.loan-modal-player-meta {
  font-size: 13px;
  color: var(--brand-text-on-dark, #fff);
  opacity: 0.7;
  margin-top: 2px;
}

.loan-modal-action-info {
  background: rgba(255, 200, 87, 0.12);
  border: 1.5px solid rgba(255, 200, 87, 0.35);
  border-radius: 10px;
  padding: 12px 14px;
  margin-bottom: 18px;
  font-size: 13px;
  color: var(--brand-text-on-dark, #fff);
  line-height: 1.45;
}

.loan-modal-action-info strong {
  color: var(--brand-accent, #FFC857);
}

.loan-modal-actions {
  display: flex;
  gap: 10px;
  margin-bottom: 14px;
}

.loan-modal-actions button {
  flex: 1;
  padding: 14px 20px !important;
  font-weight: 800 !important;
  font-size: 14px !important;
}

.loan-modal-skip {
  display: flex;
  align-items: center;
  gap: 8px;
  justify-content: center;
  font-size: 12px;
  color: var(--brand-text-on-dark, #fff);
  opacity: 0.65;
  cursor: pointer;
  user-select: none;
}

.loan-modal-skip input {
  cursor: pointer;
  accent-color: var(--brand-accent, #FFC857);
}

/* =========================================
   ONBOARDING TUTORIAL
   ========================================= */

.onboarding-tutorial {
  position: fixed;
  inset: 0;
  z-index: 9998;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 16px;
  /* iOS Safari : scroll au niveau du modal entier */
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding-top: max(16px, env(safe-area-inset-top));
  padding-bottom: max(16px, env(safe-area-inset-bottom));
}

/* CRITIQUE : forcer hidden à fonctionner */
.onboarding-tutorial[hidden] {
  display: none !important;
}

.onboarding-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.85);
  backdrop-filter: blur(8px);
  z-index: -1;
}

.onboarding-content {
  position: relative;
  width: 100%;
  max-width: 520px;
  background: var(--brand-dark, #1a1a1a);
  border: 3px solid var(--brand-accent, #FFC857);
  border-radius: 24px;
  padding: 40px 32px 28px;
  box-shadow: 0 30px 80px rgba(0,0,0,0.6);
  animation: modalPop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
  /* Pas de max-height : le scroll se fait sur le parent */
  margin: auto;
}

.onboarding-close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 40px;
  height: 40px;
  border: none;
  border-radius: 50%;
  background: rgba(255,255,255,0.1);
  color: var(--brand-text-on-dark, #fff);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 2;
  transition: background 0.2s;
}

.onboarding-close:hover {
  background: rgba(255,255,255,0.2);
}

.onboarding-step {
  display: none;
  animation: stepFade 0.3s ease;
}

.onboarding-step.active {
  display: block;
}

@keyframes stepFade {
  from { opacity: 0; transform: translateX(20px); }
  to   { opacity: 1; transform: translateX(0); }
}

.onboarding-step-emoji {
  font-size: 56px;
  text-align: center;
  margin-bottom: 12px;
}

.onboarding-step-title {
  text-align: center;
  margin: 0 0 14px;
  font-family: 'Bebas Neue', sans-serif;
  font-size: 28px;
  font-weight: 400;
  letter-spacing: 0.02em;
  color: var(--brand-text-on-dark, #fff);
  text-transform: uppercase;
}

.onboarding-step-text {
  font-size: 15px;
  line-height: 1.55;
  color: var(--brand-text-on-dark, #fff);
  opacity: 0.9;
  margin: 0 0 14px;
  text-align: center;
}

.onboarding-step-text-small {
  font-size: 13px;
  line-height: 1.5;
  color: var(--brand-text-on-dark, #fff);
  opacity: 0.7;
  margin: 12px 0 0;
  text-align: center;
}

.onboarding-step-list {
  list-style: none;
  padding: 0;
  margin: 14px 0;
}

.onboarding-step-list li {
  padding: 10px 14px;
  background: rgba(255, 200, 87, 0.08);
  border-left: 3px solid var(--brand-accent, #FFC857);
  border-radius: 8px;
  margin-bottom: 8px;
  font-size: 14px;
  color: var(--brand-text-on-dark, #fff);
  line-height: 1.4;
}

.onboarding-step-demo {
  display: flex;
  justify-content: center;
  margin: 16px 0;
}

.onboarding-card-demo {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  background: rgba(255,255,255,0.06);
  border: 2px solid rgba(255,255,255,0.12);
  border-radius: 12px;
  min-width: 280px;
  position: relative;
}

.onboarding-card-loan-in {
  border-color: rgba(91, 168, 255, 0.5);
  background: rgba(91, 168, 255, 0.08);
}

.onboarding-card-loan-out {
  border-color: rgba(255, 200, 87, 0.5);
  background: rgba(255, 200, 87, 0.08);
}

.onboarding-card-photo {
  width: 44px;
  height: 44px;
  background: rgba(255,255,255,0.1);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
}

.onboarding-card-info {
  flex: 1;
  min-width: 0;
}

.onboarding-card-name {
  font-size: 14px;
  font-weight: 700;
  color: var(--brand-text-on-dark, #fff);
}

.onboarding-card-value, .onboarding-card-value-opt {
  font-size: 13px;
  font-weight: 700;
  margin-top: 2px;
}

.onboarding-card-value-opt {
  color: var(--brand-accent, #FFC857);
}

.onboarding-card-meta {
  font-size: 11px;
  opacity: 0.7;
  margin-top: 2px;
}

.onboarding-card-action {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.onboarding-pulse {
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: #FF4D4D;
  animation: pulseRipple 1.6s ease-out infinite;
}

.onboarding-pulse-green { background: #4CAF50; }
.onboarding-pulse-blue { background: #5BA8FF; }

@keyframes pulseRipple {
  0%   { transform: scale(0.8); opacity: 0.7; }
  100% { transform: scale(2.4); opacity: 0; }
}

.onboarding-card-btn-sell,
.onboarding-card-btn-buy,
.onboarding-card-btn-recall {
  position: relative;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Bebas Neue', sans-serif;
  font-size: 20px;
  font-weight: 700;
  color: white;
  z-index: 1;
}

.onboarding-card-btn-sell { background: #FF4D4D; }
.onboarding-card-btn-buy { background: #4CAF50; }
.onboarding-card-btn-recall { background: #5BA8FF; }

.onboarding-badge-loan-in,
.onboarding-badge-loan-out {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 4px;
  font-family: 'Bebas Neue', sans-serif;
  font-size: 11px;
  letter-spacing: 0.06em;
  font-weight: 400;
  vertical-align: middle;
}

.onboarding-badge-loan-in {
  background: #5BA8FF;
  color: white;
}

.onboarding-badge-loan-out {
  background: var(--brand-accent, #FFC857);
  color: var(--brand-text-on-light, #000);
}

.onboarding-footer {
  margin-top: 24px;
  padding-top: 18px;
  border-top: 1.5px solid rgba(255,255,255,0.1);
}

.onboarding-progress {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-bottom: 16px;
}

.onboarding-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255,255,255,0.2);
  transition: all 0.2s ease;
  cursor: pointer;
}

.onboarding-dot.active {
  background: var(--brand-accent, #FFC857);
  width: 24px;
  border-radius: 4px;
}

.onboarding-dot.completed {
  background: rgba(255, 200, 87, 0.5);
}

.onboarding-buttons {
  display: flex;
  gap: 10px;
}

.onboarding-buttons button {
  flex: 1;
  padding: 12px 18px !important;
  font-size: 14px !important;
  font-weight: 800 !important;
}

.onboarding-buttons button:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* Mobile : adapter */
@media (max-width: 640px) {
  .loans-alert {
    padding: 14px 16px;
  }
  .loans-alert-title {
    font-size: 18px;
  }
  .loans-alert-icon {
    width: 40px;
    height: 40px;
  }
  .loans-alert-toggle-text {
    display: none;
  }
  .loans-alert-toggle {
    padding: 10px;
  }
  .loans-list {
    grid-template-columns: 1fr;
    max-height: 280px;
  }
  .loan-modal-content,
  .onboarding-content {
    padding: 24px 18px 20px;
  }
  .onboarding-step-title {
    font-size: 22px;
  }
  .onboarding-step-text {
    font-size: 13px;
  }
}


/* =========================================
   PROTECTION : forcer hidden sur tous les modaux/sections
   pour éviter qu'ils s'affichent au chargement
   ========================================= */
.loans-alert[hidden],
.loans-alert-body[hidden],
.loan-modal[hidden],
.onboarding-tutorial[hidden] {
  display: none !important;
}

/* =========================================
   BOUTON TUTORIEL (sur club-banner)
   ========================================= */

.club-banner {
  position: relative;
}

.show-tutorial-btn {
  position: absolute;
  top: 16px;
  right: 16px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border: 2px solid var(--brand-accent, #FFC857);
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.35);
  color: var(--brand-accent, #FFC857);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  font-family: inherit;
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  cursor: pointer;
  transition: all 0.2s ease;
  z-index: 5;
}

.show-tutorial-btn:hover {
  background: var(--brand-accent, #FFC857);
  color: var(--brand-text-on-light, #000);
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
}

.show-tutorial-btn svg {
  flex-shrink: 0;
}

/* Mobile : bouton plus compact */
@media (max-width: 640px) {
  .show-tutorial-btn {
    top: 12px;
    right: 12px;
    padding: 8px 12px;
    font-size: 11px;
  }
  .show-tutorial-btn span {
    display: none;
  }
}


/* =========================================
   FIX LOGOS BLANCS (Juventus, Wolfsburg)
   Pour qu'ils restent visibles sur leur fond
   ========================================= */

/* Mini logo (à côté de chaque joueur sur l'image partagée) */
.share-player-club-logo-mini.white-logo {
  background: #1a1a1a;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

/* Grand logo du header (en haut de l'image partagée) */
.share-club-logo-wrap.white-logo {
  background: #1a1a1a;
  border: 2px solid rgba(255, 255, 255, 0.2);
}


/* =========================================
   FOOTER
   ========================================= */

.app-footer {
  background: #0a0a0a;
  color: rgba(255, 255, 255, 0.7);
  padding: 32px 24px 28px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  margin-top: 60px;
}

.footer-inner {
  max-width: 1400px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 18px;
  align-items: center;
  text-align: center;
}

.footer-brand {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.footer-brand-text {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 22px;
  letter-spacing: 0.14em;
  color: #FFC857;
  text-transform: uppercase;
}

.footer-brand-tagline {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.5);
  letter-spacing: 0.04em;
}

.footer-nav {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  justify-content: center;
}

.footer-link {
  background: transparent;
  border: none;
  color: rgba(255, 255, 255, 0.7);
  font-family: inherit;
  font-size: 13px;
  cursor: pointer;
  padding: 6px 10px;
  border-radius: 6px;
  transition: all 0.2s ease;
}

.footer-link:hover {
  color: #FFC857;
  background: rgba(255, 200, 87, 0.08);
}

.footer-credits {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.45);
}

.footer-credits strong {
  color: rgba(255, 255, 255, 0.8);
  font-weight: 700;
}

/* =========================================
   BANDEAU COOKIES
   ========================================= */

.cookie-banner {
  position: fixed;
  bottom: 16px;
  left: 16px;
  right: 16px;
  max-width: 720px;
  margin: 0 auto;
  background: #1a1a1a;
  border: 2px solid #FFC857;
  border-radius: 16px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.6);
  z-index: 9000;
  animation: cookieSlideUp 0.4s ease-out;
}

.cookie-banner[hidden] {
  display: none !important;
}

@keyframes cookieSlideUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

.cookie-banner-content {
  padding: 20px 22px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.cookie-banner-icon {
  font-size: 32px;
  text-align: center;
}

.cookie-banner-text {
  color: #fff;
}

.cookie-banner-text strong {
  display: block;
  font-size: 16px;
  margin-bottom: 6px;
  color: #FFC857;
}

.cookie-banner-text p {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.85);
}

.cookie-banner-actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  flex-wrap: wrap;
}

.btn-cookie-refuse,
.btn-cookie-customize,
.btn-cookie-accept {
  padding: 10px 18px;
  border-radius: 8px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s ease;
  border: none;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.btn-cookie-refuse {
  background: transparent;
  color: rgba(255, 255, 255, 0.7);
  border: 1.5px solid rgba(255, 255, 255, 0.2);
}

.btn-cookie-refuse:hover {
  border-color: rgba(255, 255, 255, 0.5);
  color: #fff;
}

.btn-cookie-customize {
  background: rgba(255, 200, 87, 0.15);
  color: #FFC857;
  border: 1.5px solid #FFC857;
}

.btn-cookie-customize:hover {
  background: rgba(255, 200, 87, 0.25);
}

.btn-cookie-accept {
  background: #FFC857;
  color: #000;
}

.btn-cookie-accept:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(255, 200, 87, 0.35);
}

/* =========================================
   LEGAL MODALS
   ========================================= */

.legal-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 16px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding-top: max(16px, env(safe-area-inset-top));
  padding-bottom: max(16px, env(safe-area-inset-bottom));
}

.legal-modal[hidden] {
  display: none !important;
}

.legal-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(6px);
  z-index: -1;
}

.legal-modal-content {
  position: relative;
  width: 100%;
  max-width: 480px;
  background: #1a1a1a;
  border: 2px solid #FFC857;
  border-radius: 18px;
  padding: 32px 26px 24px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.6);
  animation: modalPop 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  margin: auto;
}

.legal-modal-content-large {
  max-width: 720px;
}

.legal-modal-close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 36px;
  height: 36px;
  border: none;
  border-radius: 50%;
  background: rgba(255,255,255,0.08);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.2s;
  z-index: 2;
}

.legal-modal-close:hover {
  background: rgba(255,255,255,0.18);
}

.legal-modal-title {
  margin: 0 0 24px;
  font-family: 'Bebas Neue', sans-serif;
  font-size: 28px;
  font-weight: 400;
  letter-spacing: 0.03em;
  color: #FFC857;
  text-transform: uppercase;
  padding-right: 40px;
}

.legal-modal-body {
  color: rgba(255, 255, 255, 0.9);
  font-size: 14px;
  line-height: 1.6;
}

.legal-modal-body h3 {
  margin: 24px 0 10px;
  font-family: 'Bebas Neue', sans-serif;
  font-size: 18px;
  letter-spacing: 0.04em;
  color: #FFC857;
  text-transform: uppercase;
}

.legal-modal-body h3:first-child {
  margin-top: 0;
}

.legal-modal-body h4 {
  margin: 16px 0 8px;
  font-size: 15px;
  color: #fff;
}

.legal-modal-body p {
  margin: 0 0 12px;
}

.legal-modal-body ul {
  margin: 0 0 12px;
  padding-left: 22px;
}

.legal-modal-body li {
  margin-bottom: 6px;
}

.legal-modal-body a {
  color: #FFC857;
  text-decoration: underline;
}

.legal-modal-body a:hover {
  text-decoration: none;
}

.legal-modal-body code {
  background: rgba(255,255,255,0.08);
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 12px;
  font-family: monospace;
}

.legal-modal-date {
  margin-top: 24px !important;
  padding-top: 16px;
  border-top: 1px solid rgba(255,255,255,0.1);
  color: rgba(255, 255, 255, 0.5);
  font-size: 12px;
}

.legal-modal-actions {
  margin-top: 24px;
  display: flex;
  justify-content: flex-end;
}

/* Cookies preferences */
.cookie-pref {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px;
  background: rgba(255,255,255,0.04);
  border: 1.5px solid rgba(255,255,255,0.08);
  border-radius: 12px;
  margin-bottom: 12px;
}

.cookie-pref-info {
  flex: 1;
  min-width: 0;
}

.cookie-pref-info strong {
  display: block;
  color: #fff;
  font-size: 14px;
  margin-bottom: 4px;
}

.cookie-pref-info p {
  margin: 0;
  font-size: 12px;
  color: rgba(255,255,255,0.6);
  line-height: 1.4;
}

/* Switch toggle */
.cookie-switch {
  flex-shrink: 0;
  position: relative;
  width: 48px;
  height: 26px;
  cursor: pointer;
}

.cookie-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.cookie-switch-slider {
  position: absolute;
  inset: 0;
  background: rgba(255,255,255,0.15);
  border-radius: 13px;
  transition: background 0.2s;
}

.cookie-switch-slider::before {
  content: "";
  position: absolute;
  width: 20px;
  height: 20px;
  left: 3px;
  top: 3px;
  background: #fff;
  border-radius: 50%;
  transition: transform 0.2s;
}

.cookie-switch input:checked + .cookie-switch-slider {
  background: #FFC857;
}

.cookie-switch input:checked + .cookie-switch-slider::before {
  transform: translateX(22px);
  background: #000;
}

.cookie-switch.disabled {
  cursor: not-allowed;
  opacity: 0.6;
}

.cookie-switch.disabled .cookie-switch-slider {
  background: #FFC857;
}

.cookie-switch.disabled .cookie-switch-slider::before {
  transform: translateX(22px);
  background: #000;
}

/* Responsive footer & cookies */
@media (max-width: 640px) {
  .app-footer {
    padding: 24px 16px 20px;
    margin-top: 40px;
  }
  .footer-nav {
    gap: 8px;
  }
  .footer-link {
    font-size: 12px;
    padding: 6px 8px;
  }
  .cookie-banner {
    left: 8px;
    right: 8px;
    bottom: 8px;
  }
  .cookie-banner-content {
    padding: 16px;
  }
  .cookie-banner-actions {
    flex-direction: column;
  }
  .cookie-banner-actions button {
    width: 100%;
  }
  .legal-modal-content {
    padding: 24px 18px 18px;
  }
  .legal-modal-title {
    font-size: 22px;
  }
}


.legal-modal-note {
  font-size: 12px !important;
  color: rgba(255, 255, 255, 0.55) !important;
  font-style: italic;
  margin-top: -4px !important;
}


/* =========================================
   FINETUNING POLICES (Bebas Neue + Inter)
   ========================================= */

/* Inter rend mieux avec letter-spacing négatif sur les gros titres */
body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Texte de fond Inter : feature settings pour meilleur rendu */
body, button, input, select, textarea {
  font-feature-settings: 'cv02', 'cv03', 'cv04', 'cv11';
}


/* =========================================
   LOGO DU CLUB EN ARRIÈRE-PLAN DE LA PHOTO
   ========================================= */

/* Wrapper de la photo : zone où le logo apparaît en arrière-plan */
.player-photo-wrap {
  position: relative;
  width: 100%;
  height: 160px;
  overflow: hidden;
  flex-shrink: 0;
  background: linear-gradient(180deg, var(--brand) 0%, var(--brand-dark) 100%);
}

/* Logo du club en arrière-plan dans la zone photo */
.player-photo-bg-logo {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  transform: translate(-50%, -50%);
  background-position: center;
  background-repeat: no-repeat;
  background-size: 110% auto;
  opacity: 1;
  z-index: 0;
  pointer-events: none;
  filter: drop-shadow(0 6px 16px rgba(0,0,0,0.6));
}

/* Photo et placeholder : par-dessus le logo, fond transparent */
.player-photo-wrap .player-photo,
.player-photo-wrap .player-photo-placeholder {
  position: relative !important;
  z-index: 1 !important;
  background: transparent !important;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
}

/* Pour les joueurs "vendus" : logo plus discret */
.player-card.sold .player-photo-bg-logo {
  opacity: 0.12;
  filter: grayscale(1);
}

/* Pour les joueurs "trop chers" au marché : logo grisé */
.player-card.unaffordable .player-photo-bg-logo {
  opacity: 0.18;
  filter: grayscale(0.7);
}

/* Supprime l'ancien halo radial qui s'appliquait à toute la carte */
.player-card {
  background: var(--bg-surface);
}

/* FIX : badge "PRÊTÉ AILLEURS" coupé en haut */
.player-badges {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 3;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  max-width: calc(100% - 16px);
}


/* =========================================
   MODERNISATION DESIGN 2026
   Glassmorphism + Texture noise + Glows
   ========================================= */

/* ===== 1. BACKGROUND : Mesh gradient animé + noise ===== */

body {
  position: relative;
  background:
    /* Gradient mesh aux couleurs du club */
    radial-gradient(ellipse at 0% 0%, color-mix(in srgb, var(--brand, #0F0F0F) 25%, transparent) 0%, transparent 50%),
    radial-gradient(ellipse at 100% 100%, color-mix(in srgb, var(--brand-accent, #FFC857) 10%, transparent) 0%, transparent 50%),
    radial-gradient(ellipse at 50% 50%, color-mix(in srgb, var(--brand-dark, #0F0F0F) 50%, transparent) 0%, transparent 70%),
    #0a0a0a;
  background-attachment: fixed;
  min-height: 100vh;
}

/* Texture noise subtile par-dessus */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0.04;
  background-image: url("data:image/svg+xml;utf8,<svg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  mix-blend-mode: overlay;
}

/* S'assurer que le contenu reste au-dessus */
main, header, footer {
  position: relative;
  z-index: 1;
}

/* ===== 2. PULSE ANIMATION DU MESH (très subtile) ===== */

@keyframes meshPulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.85; }
}

body {
  animation: meshPulse 12s ease-in-out infinite;
}

/* ===== 3. CARDS : Bordure animée au hover + glow coloré ===== */

.league-card,
.club-card {
  position: relative;
  overflow: hidden;
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s ease;
}

.league-card::before,
.club-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1.5px;
  background: linear-gradient(
    135deg,
    transparent 0%,
    transparent 40%,
    var(--brand-accent, #FFC857) 50%,
    transparent 60%,
    transparent 100%
  );
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
  z-index: 2;
}

.league-card:hover,
.club-card:hover {
  transform: translateY(-4px) scale(1.02);
  box-shadow:
    0 12px 32px rgba(0,0,0,0.4),
    0 0 32px color-mix(in srgb, var(--brand-accent, #FFC857) 25%, transparent);
}

.league-card:hover::before,
.club-card:hover::before {
  opacity: 1;
  animation: borderShine 1.5s ease infinite;
}

@keyframes borderShine {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* ===== 4. PLAYER CARD : Glow coloré au hover ===== */

.player-card {
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1),
              box-shadow 0.25s ease,
              border-color 0.25s ease;
}

.player-card:hover {
  transform: translateY(-3px);
  box-shadow:
    0 10px 28px rgba(0,0,0,0.35),
    0 0 24px color-mix(in srgb, var(--brand, #FFC857) 30%, transparent);
}

/* Glow plus marqué pour les cartes recrutées */
.player-card.market-recruited,
.player-card.bought {
  box-shadow: 0 0 20px color-mix(in srgb, var(--brand-accent, #FFC857) 25%, transparent);
}

.player-card.market-recruited:hover,
.player-card.bought:hover {
  box-shadow:
    0 12px 32px rgba(0,0,0,0.4),
    0 0 32px color-mix(in srgb, var(--brand-accent, #FFC857) 50%, transparent);
}

/* ===== 5. BUDGET BAR : Glassmorphism ===== */

.budget-bar {
  background: color-mix(in srgb, var(--brand-dark, #0F0F0F) 70%, transparent);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border-bottom: 2px solid color-mix(in srgb, var(--brand-accent, #FFC857) 60%, transparent);
}

/* ===== 6. APP HEADER : Adaptatif aux couleurs du club ===== */

.app-header {
  /* Fond dégradé qui s'adapte aux couleurs du club */
  background: linear-gradient(135deg, var(--brand-dark, #0a0a0a) 0%, var(--brand, #1a1a1a) 100%);
  border-bottom: 2px solid var(--brand-accent, rgba(255,255,255,0.1));
  transition: background 0.4s ease, border-color 0.4s ease;
}

/* Sur la vue leagues (page d'accueil), header noir uni */
body.view-leagues .app-header {
  background: #0a0a0a;
  border-bottom: 1px solid rgba(255,255,255,0.1);
}

/* ===== 7. BOUTONS : Effet premium signature ===== */

.btn-primary {
  position: relative;
  overflow: hidden;
  background: var(--brand-accent, #FFC857);
  color: var(--brand-text-on-light, #000);
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  box-shadow:
    0 4px 16px color-mix(in srgb, var(--brand-accent, #FFC857) 30%, transparent),
    inset 0 1px 0 rgba(255,255,255,0.3);
}

.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow:
    0 8px 24px color-mix(in srgb, var(--brand-accent, #FFC857) 50%, transparent),
    inset 0 1px 0 rgba(255,255,255,0.4);
}

.btn-primary:active {
  transform: translateY(0);
}

/* ===== 8. ANIMATIONS D'APPARITION AU LOAD ===== */

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeInScale {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.view {
  animation: fadeInUp 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Stagger animations pour les grilles */
.leagues-grid > *,
.clubs-grid > *,
.players-list > *,
.market-grid > * {
  animation: fadeInScale 0.4s cubic-bezier(0.16, 1, 0.3, 1) backwards;
}

.leagues-grid > *:nth-child(1) { animation-delay: 0.05s; }
.leagues-grid > *:nth-child(2) { animation-delay: 0.1s; }
.leagues-grid > *:nth-child(3) { animation-delay: 0.15s; }
.leagues-grid > *:nth-child(4) { animation-delay: 0.2s; }
.leagues-grid > *:nth-child(5) { animation-delay: 0.25s; }

.clubs-grid > *:nth-child(1)  { animation-delay: 0.03s; }
.clubs-grid > *:nth-child(2)  { animation-delay: 0.06s; }
.clubs-grid > *:nth-child(3)  { animation-delay: 0.09s; }
.clubs-grid > *:nth-child(4)  { animation-delay: 0.12s; }
.clubs-grid > *:nth-child(5)  { animation-delay: 0.15s; }
.clubs-grid > *:nth-child(6)  { animation-delay: 0.18s; }
.clubs-grid > *:nth-child(7)  { animation-delay: 0.21s; }
.clubs-grid > *:nth-child(8)  { animation-delay: 0.24s; }
.clubs-grid > *:nth-child(9)  { animation-delay: 0.27s; }
.clubs-grid > *:nth-child(10) { animation-delay: 0.30s; }
.clubs-grid > *:nth-child(n+11) { animation-delay: 0.33s; }

/* ===== 9. SECTION TITLE : effet de signature ===== */

.section-title {
  position: relative;
  display: inline-block;
}

.section-title::after {
  content: "";
  position: absolute;
  bottom: -8px;
  left: 0;
  width: 60px;
  height: 4px;
  background: linear-gradient(
    90deg,
    var(--brand-accent, #FFC857),
    color-mix(in srgb, var(--brand-accent, #FFC857) 30%, transparent)
  );
  border-radius: 2px;
}

/* ===== 10. CLUB BANNER : Effet premium ===== */

.club-banner {
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(135deg,
      var(--brand) 0%,
      var(--brand-dark) 100%
    );
}

.club-banner::after {
  content: "";
  position: absolute;
  top: -50%;
  right: -20%;
  width: 60%;
  height: 200%;
  background: radial-gradient(
    ellipse at center,
    color-mix(in srgb, var(--brand-accent, #FFC857) 20%, transparent) 0%,
    transparent 60%
  );
  pointer-events: none;
}

/* ===== 11. SCROLLBAR : standard navigateur ===== */
/* (custom scrollbar retirée à la demande) */

/* ===== 12. SELECTION TEXTE personnalisée ===== */

::selection {
  background: var(--brand-accent, #FFC857);
  color: var(--brand-text-on-light, #000);
}

/* ===== 13. INFO BANNER : Plus de caractère ===== */

.info-banner {
  background: color-mix(in srgb, var(--brand, #0F0F0F) 25%, transparent);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1.5px solid color-mix(in srgb, var(--brand-accent, #FFC857) 30%, transparent);
}

/* ===== 14. FOOTER : Glassmorphism subtil ===== */

.app-footer {
  background: rgba(5, 5, 5, 0.6);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

/* ===== 15. RESPECT du reduced-motion (accessibilité) ===== */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  body { animation: none !important; }
}


/* =========================================
   HERO ENHANCED (Page d'accueil)
   ========================================= */

.hero-enhanced {
  padding: 24px 24px 32px;
  text-align: center;
  position: relative;
}

.hero-stats {
  display: flex;
  justify-content: center;
  gap: 32px;
  margin: 20px 0 16px;
  flex-wrap: wrap;
}

.hero-stat {
  text-align: center;
  position: relative;
}

.hero-stat-value {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 48px;
  line-height: 1;
  color: #DC2626;
  letter-spacing: 0.02em;
  text-shadow: 0 2px 12px rgba(220, 38, 38, 0.15);
}

.hero-stat-label {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(10, 10, 10, 0.7);
  margin-top: 6px;
}

.hero-stat + .hero-stat::before {
  content: "";
  position: absolute;
  left: -16px;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 40px;
  background: rgba(10, 10, 10, 0.15);
}

.hero-actions {
  margin-top: 16px;
  display: flex;
  justify-content: center;
}

.hero-scroll-hint {
  margin-top: 28px;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  color: rgba(10, 10, 10, 0.6);
  font-family: 'Bebas Neue', sans-serif;
  font-size: 13px;
  letter-spacing: 0.18em;
  animation: scrollBounce 2s ease-in-out infinite;
}

@keyframes scrollBounce {
  0%, 100% { transform: translateY(0); opacity: 0.5; }
  50%      { transform: translateY(6px); opacity: 0.9; }
}

/* Mobile : adapter */
@media (max-width: 640px) {
  .hero-enhanced {
    padding: 20px 16px 28px;
  }
  .hero-stats {
    gap: 20px;
    margin: 16px 0 12px;
  }
  .hero-stat-value {
    font-size: 36px;
  }
  .hero-stat-label {
    font-size: 10px;
  }
  .hero-stat + .hero-stat::before {
    left: -10px;
    height: 32px;
  }
  .hero-scroll-hint {
    margin-top: 20px;
  }
}

/* =========================================
   RECAP INSIGHTS (Stats marrantes)
   ========================================= */

.recap-insights {
  margin: 40px 0 32px;
  padding: 28px 24px;
  /* Fond sombre fixe pour garantir la lisibilité */
  background: rgba(15, 15, 15, 0.92);
  border: 2px solid var(--brand-accent, #FFC857);
  border-radius: 18px;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  position: relative;
  overflow: hidden;
}

/* Halo coloré subtil aux couleurs du club */
.recap-insights::before {
  content: "";
  position: absolute;
  top: -50%;
  left: -20%;
  width: 60%;
  height: 200%;
  background: radial-gradient(ellipse at center,
    color-mix(in srgb, var(--brand, #FFC857) 25%, transparent) 0%,
    transparent 65%);
  pointer-events: none;
  z-index: 0;
}

.recap-insights > * {
  position: relative;
  z-index: 1;
}

.recap-insights-title {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 24px;
  font-family: 'Bebas Neue', sans-serif;
  font-size: 24px;
  font-weight: 400;
  letter-spacing: 0.05em;
  color: var(--brand-accent, #FFC857);
  text-transform: uppercase;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
}

.insights-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 12px;
  margin-bottom: 24px;
}

.insight-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px;
  background: rgba(0, 0, 0, 0.4);
  border: 1.5px solid rgba(255, 255, 255, 0.12);
  border-radius: 14px;
  transition: all 0.25s ease;
}

.insight-card:hover {
  border-color: var(--brand-accent, #FFC857);
  transform: translateY(-2px);
  background: rgba(0, 0, 0, 0.55);
}

.insight-emoji {
  font-size: 32px;
  flex-shrink: 0;
  line-height: 1;
}

.insight-info {
  flex: 1;
  min-width: 0;
}

.insight-label {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brand-accent, #FFC857);
  margin-bottom: 2px;
}

.insight-value {
  font-family: 'Outfit', sans-serif;
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum';
  font-size: 18px;
  font-weight: 800;
  color: #fff;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}

.insight-comment {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.75);
  margin-top: 2px;
}

/* === NOTE FINALE === */
.recap-rating {
  text-align: center;
  padding: 28px 20px;
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--brand-accent, #FFC857) 20%, rgba(0,0,0,0.4)),
    rgba(0, 0, 0, 0.6));
  border: 2.5px solid var(--brand-accent, #FFC857);
  border-radius: 16px;
  position: relative;
  overflow: hidden;
}

.recap-rating::before {
  content: "";
  position: absolute;
  top: -50%;
  right: -20%;
  width: 60%;
  height: 200%;
  background: radial-gradient(ellipse at center,
    color-mix(in srgb, var(--brand-accent, #FFC857) 30%, transparent) 0%,
    transparent 60%);
  pointer-events: none;
}

.recap-rating-label {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #fff;
  opacity: 0.85;
  margin-bottom: 8px;
  position: relative;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}

.recap-rating-score {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 80px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.02em;
  color: var(--brand-accent, #FFC857);
  text-shadow: 0 4px 24px rgba(0, 0, 0, 0.6);
  position: relative;
}

.recap-rating-max {
  font-size: 36px;
  color: rgba(255, 255, 255, 0.65);
  margin-left: 4px;
}

.recap-rating-comment {
  margin-top: 12px;
  font-size: 16px;
  font-weight: 700;
  color: #fff;
  position: relative;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
}

/* Mobile */
@media (max-width: 640px) {
  .recap-insights {
    padding: 20px 16px;
  }
  .insights-grid {
    grid-template-columns: 1fr;
  }
  .recap-rating-score {
    font-size: 60px;
  }
  .recap-rating-max {
    font-size: 28px;
  }
}


/* =========================================
   BOUTON CONSEIL IA + MODAL
   ========================================= */

.ai-advisor-row {
  margin: 16px 0 20px;
  display: flex;
  justify-content: center;
}

.ai-advisor-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 22px;
  background: linear-gradient(135deg,
    var(--brand-accent, #FFC857) 0%,
    color-mix(in srgb, var(--brand-accent, #FFC857) 80%, #DC2626) 100%);
  color: #0a0a0a;
  border: none;
  border-radius: 999px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.25s ease;
  box-shadow:
    0 6px 20px color-mix(in srgb, var(--brand-accent, #FFC857) 35%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

.ai-advisor-btn:hover {
  transform: translateY(-2px);
  box-shadow:
    0 10px 28px color-mix(in srgb, var(--brand-accent, #FFC857) 55%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, 0.4);
}

.ai-advisor-btn:active {
  transform: translateY(0);
}

.ai-advisor-badge {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  padding: 3px 9px;
  background: rgba(0, 0, 0, 0.18);
  border-radius: 999px;
}

/* Modal AI */
.ai-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 16px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding-top: max(16px, env(safe-area-inset-top));
  padding-bottom: max(16px, env(safe-area-inset-bottom));
}

.ai-modal[hidden] {
  display: none !important;
}

.ai-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.75);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: -1;
}

.ai-modal-content {
  position: relative;
  width: 100%;
  max-width: 560px;
  background: #1a1a1a;
  border: 2px solid var(--brand-accent, #FFC857);
  border-radius: 20px;
  padding: 36px 28px 28px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
  animation: modalPop 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  margin: auto;
}

.ai-modal-close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 36px;
  height: 36px;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.2s;
  z-index: 2;
}

.ai-modal-close:hover {
  background: rgba(255, 255, 255, 0.18);
}

.ai-modal-header {
  text-align: center;
  margin-bottom: 28px;
}

.ai-modal-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--brand-accent, #FFC857), #DC2626);
  color: #fff;
  margin-bottom: 14px;
  box-shadow: 0 6px 20px rgba(255, 200, 87, 0.3);
}

.ai-modal-title {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 32px;
  font-weight: 400;
  letter-spacing: 0.06em;
  color: var(--brand-accent, #FFC857);
  margin: 0 0 8px;
  text-transform: uppercase;
}

.ai-modal-subtitle {
  font-size: 13px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.7);
  margin: 0;
  padding: 0 16px;
}

.ai-suggestions {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.ai-suggestion-card {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px;
  background: rgba(255, 255, 255, 0.04);
  border: 1.5px solid rgba(255, 255, 255, 0.1);
  border-radius: 14px;
  transition: all 0.2s ease;
}

.ai-suggestion-card:hover {
  border-color: var(--brand-accent, #FFC857);
  background: rgba(255, 255, 255, 0.06);
}

.ai-suggestion-badge {
  position: absolute;
  top: -8px;
  left: 14px;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.1em;
  color: #fff;
  padding: 3px 8px;
  border-radius: 4px;
}

.ai-suggestion-photo {
  width: 64px;
  height: 64px;
  border-radius: 12px;
  overflow: hidden;
  flex-shrink: 0;
  background: rgba(0, 0, 0, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
}

.ai-suggestion-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ai-suggestion-placeholder {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 22px;
  color: rgba(255, 255, 255, 0.7);
  letter-spacing: 0.04em;
}

.ai-suggestion-info {
  flex: 1;
  min-width: 0;
}

.ai-suggestion-name {
  font-size: 15px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ai-suggestion-meta {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.5);
  margin-bottom: 4px;
}

.ai-suggestion-reason {
  font-size: 12px;
  color: var(--brand-accent, #FFC857);
  font-weight: 600;
  margin-bottom: 4px;
}

.ai-suggestion-value {
  font-family: 'Outfit', sans-serif;
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum';
  font-size: 14px;
  font-weight: 800;
  color: #fff;
}

.ai-suggestion-recruit {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 8px 14px;
  background: var(--brand-accent, #FFC857);
  color: #0a0a0a;
  border: none;
  border-radius: 8px;
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s ease;
  flex-shrink: 0;
}

.ai-suggestion-recruit:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(255, 200, 87, 0.4);
}

@media (max-width: 640px) {
  .ai-modal-content {
    padding: 28px 18px 22px;
  }
  .ai-modal-title {
    font-size: 26px;
  }
  .ai-suggestion-card {
    flex-wrap: wrap;
  }
  .ai-suggestion-photo {
    width: 52px;
    height: 52px;
  }
  .ai-suggestion-recruit {
    width: 100%;
    justify-content: center;
    padding: 10px;
    font-size: 13px;
    margin-top: 6px;
  }
}

/* =========================================
   BOUTON RECOMMENCER
   ========================================= */

.club-banner-actions {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-shrink: 0;
}

.restart-btn {
  background: rgba(220, 38, 38, 0.15) !important;
  border-color: rgba(220, 38, 38, 0.4) !important;
  color: #FCA5A5 !important;
}

.restart-btn:hover {
  background: rgba(220, 38, 38, 0.25) !important;
  border-color: rgba(220, 38, 38, 0.6) !important;
}

@media (max-width: 640px) {
  .club-banner-actions {
    flex-direction: row;
    gap: 6px;
  }
  .club-banner-actions .show-tutorial-btn span {
    display: none;
  }
}


/* =========================================
   LOGO IMAGE (remplace texte CLUB BUILDER)
   ========================================= */

/* Hero d'accueil : même taille responsive que l'ancien texte */
.hero-logo {
  display: block;
  width: auto;
  height: clamp(64px, 13vw, 180px);
  max-width: 100%;
  margin: 0 auto;
  /* Léger drop-shadow pour le détacher du fond clair */
  filter: drop-shadow(0 6px 16px rgba(0, 0, 0, 0.12));
}

/* Footer */
.footer-logo {
  display: block;
  max-width: 180px;
  width: auto;
  height: auto;
  max-height: 48px;
  margin: 0 auto;
}

/* Responsive : ajustement mobile */
@media (max-width: 640px) {
  .footer-logo {
    max-width: 150px;
    max-height: 40px;
  }
}


/* =========================================
   FIN DE CONTRAT 2026 - Agent libre
   ========================================= */

/* Badge "Libre 2026" sur la carte */
.badge-free-agent {
  background: linear-gradient(135deg, #10B981, #059669);
  color: #fff;
  font-weight: 800;
  letter-spacing: 0.06em;
  box-shadow: 0 2px 8px rgba(16, 185, 129, 0.4);
}

/* Valeur affichée à la place du prix */
.player-value-free-agent {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #10B981;
}

.player-free-agent-label {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 13px;
  letter-spacing: 0.08em;
  color: #10B981;
  text-transform: uppercase;
}

.player-value-free-agent .player-free-tag {
  background: linear-gradient(135deg, #10B981, #059669);
  color: #fff;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* Léger glow vert autour des cartes free agents (sur le marché) */
.market-grid .player-card:has(.badge-free-agent) {
  box-shadow: 0 0 0 1.5px rgba(16, 185, 129, 0.25), 0 4px 16px rgba(0,0,0,0.1);
}

.market-grid .player-card:has(.badge-free-agent):hover {
  box-shadow:
    0 0 0 1.5px rgba(16, 185, 129, 0.5),
    0 10px 28px rgba(0,0,0,0.2),
    0 0 32px rgba(16, 185, 129, 0.3);
}

/* =========================================
   MODE TACTIQUE - Terrain & onze de départ
   ========================================= */

/* Bouton "Choisir mon onze" sur récap */
.btn-tactics {
  background: linear-gradient(135deg, #10B981 0%, #059669 100%);
  color: #fff;
  box-shadow: 0 4px 16px rgba(16, 185, 129, 0.35);
}

.btn-tactics:hover {
  background: linear-gradient(135deg, #34D399 0%, #10B981 100%);
  box-shadow: 0 8px 24px rgba(16, 185, 129, 0.5);
}

/* === SÉLECTEUR DE SCHÉMA === */

.tactics-formations {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 10px;
  margin-bottom: 24px;
}

.formation-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 14px 16px;
  background: color-mix(in srgb, var(--brand-dark, #0F0F0F) 8%, transparent);
  border: 2px solid color-mix(in srgb, var(--brand-dark, #0F0F0F) 20%, transparent);
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.2s ease;
  color: var(--text-primary, #0a0a0a);
  font-family: inherit;
}

.formation-btn:hover {
  border-color: var(--brand-accent, #FFC857);
  background: color-mix(in srgb, var(--brand-accent, #FFC857) 12%, transparent);
}

.formation-btn.active {
  border-color: var(--brand-accent, #FFC857);
  background: color-mix(in srgb, var(--brand-accent, #FFC857) 18%, transparent);
  box-shadow: 0 0 20px color-mix(in srgb, var(--brand-accent, #FFC857) 25%, transparent);
}

.formation-name {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 22px;
  letter-spacing: 0.06em;
  color: var(--brand, #0a0a0a);
  line-height: 1;
}

.formation-btn.active .formation-name {
  color: var(--brand-accent, #FFC857);
}

.formation-desc {
  font-size: 11px;
  color: var(--text-secondary, rgba(10, 10, 10, 0.65));
  margin-top: 4px;
  text-align: center;
  font-weight: 600;
}

/* === ACTIONS RAPIDES === */

.tactics-quick-actions {
  display: flex;
  gap: 10px;
  margin-bottom: 20px;
  justify-content: center;
  flex-wrap: wrap;
}

/* Override des btn-small dans la zone tactique pour assurer la lisibilité */
.tactics-quick-actions .btn-small {
  background: color-mix(in srgb, var(--brand-dark, #0F0F0F) 8%, transparent);
  border: 1.5px solid color-mix(in srgb, var(--brand-dark, #0F0F0F) 25%, transparent);
  color: var(--text-primary, #0a0a0a);
  font-weight: 700;
}

.tactics-quick-actions .btn-small:hover {
  border-color: var(--brand-accent, #FFC857);
  background: color-mix(in srgb, var(--brand-accent, #FFC857) 12%, transparent);
  color: var(--brand, #0a0a0a);
}

/* === TERRAIN DE FOOT === */

.tactics-pitch-wrap {
  display: flex;
  justify-content: center;
  margin: 0 auto 24px;
  padding: 16px;
  max-width: 640px;
}

.tactics-pitch {
  position: relative;
  width: 100%;
  aspect-ratio: 7 / 10;
  background:
    /* Lignes blanches du terrain */
    /* Cercle central */
    radial-gradient(circle at 50% 50%, transparent 8%, rgba(255,255,255,0.18) 8.4%, rgba(255,255,255,0.18) 8.8%, transparent 9.2%),
    /* Point central */
    radial-gradient(circle at 50% 50%, rgba(255,255,255,0.4) 0%, rgba(255,255,255,0.4) 0.5%, transparent 0.8%),
    /* Surface réparation haut */
    linear-gradient(to bottom, transparent 14%, rgba(255,255,255,0.18) 14%, rgba(255,255,255,0.18) 14.4%, transparent 14.4%),
    /* Ligne médiane */
    linear-gradient(to bottom, transparent 49.7%, rgba(255,255,255,0.18) 49.7%, rgba(255,255,255,0.18) 50.3%, transparent 50.3%),
    /* Surface réparation bas */
    linear-gradient(to bottom, transparent 85.6%, rgba(255,255,255,0.18) 85.6%, rgba(255,255,255,0.18) 86%, transparent 86%),
    /* Gradient principal du terrain (vert dégradé moderne) */
    linear-gradient(135deg, #166534 0%, #15803d 40%, #16a34a 70%, #166534 100%);
  border: 3px solid rgba(255, 255, 255, 0.25);
  border-radius: 12px;
  overflow: hidden;
  box-shadow:
    0 20px 40px rgba(0, 0, 0, 0.4),
    inset 0 2px 20px rgba(255, 255, 255, 0.05);
}

/* Bandes alternées du terrain (effet pelouse fauchée) */
.tactics-pitch::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(to bottom,
      transparent 0%,
      transparent 10%,
      rgba(0, 0, 0, 0.06) 10%,
      rgba(0, 0, 0, 0.06) 20%);
  pointer-events: none;
}

/* Surfaces de réparation détaillées */
.tactics-pitch::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    /* Petite surface haut */
    linear-gradient(to bottom, transparent 0%, transparent 4%,
      rgba(255,255,255,0.15) 4%, rgba(255,255,255,0.15) 4.4%, transparent 4.4%, transparent 6.5%,
      rgba(255,255,255,0.15) 6.5%, rgba(255,255,255,0.15) 6.9%, transparent 6.9%);
  pointer-events: none;
}

/* === SLOTS POSITIONS === */

.tactics-slot {
  position: absolute;
  transform: translate(-50%, -50%);
  width: 80px;
  height: 100px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform 0.2s ease;
  z-index: 2;
}

.tactics-slot:hover {
  transform: translate(-50%, -50%) scale(1.08);
  z-index: 3;
}

.tactics-slot .slot-empty {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.35);
  border: 2px dashed rgba(255, 255, 255, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.7);
  transition: all 0.2s ease;
}

.tactics-slot:hover .slot-empty {
  background: rgba(0, 0, 0, 0.5);
  border-color: var(--brand-accent, #FFC857);
  color: var(--brand-accent, #FFC857);
}

.tactics-slot .slot-label {
  margin-top: 4px;
  font-family: 'Bebas Neue', sans-serif;
  font-size: 11px;
  letter-spacing: 0.1em;
  color: rgba(255, 255, 255, 0.85);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
}

/* Slot rempli (avec photo joueur) */
.tactics-slot.filled .slot-photo-wrap {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  overflow: hidden;
  border: 2.5px solid var(--brand-accent, #FFC857);
  background: var(--brand-dark, #1a1a1a);
  box-shadow:
    0 4px 12px rgba(0, 0, 0, 0.4),
    0 0 16px color-mix(in srgb, var(--brand-accent, #FFC857) 35%, transparent);
}

.tactics-slot.filled .slot-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.tactics-slot.filled .slot-photo-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--brand-dark, #1a1a1a);
  color: var(--brand-accent, #FFC857);
  font-family: 'Bebas Neue', sans-serif;
  font-size: 20px;
}

.tactics-slot.filled .slot-name {
  margin-top: 5px;
  padding: 2px 8px;
  background: rgba(0, 0, 0, 0.75);
  border-radius: 4px;
  font-size: 11px;
  font-weight: 700;
  color: #fff;
  white-space: nowrap;
  max-width: 100px;
  overflow: hidden;
  text-overflow: ellipsis;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
}

/* === SUMMARY === */

.tactics-summary {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 16px 20px;
  background: color-mix(in srgb, var(--brand-dark, #0F0F0F) 10%, transparent);
  border: 1.5px solid color-mix(in srgb, var(--brand-dark, #0F0F0F) 18%, transparent);
  border-radius: 12px;
  margin: 0 auto;
  max-width: 400px;
}

.tactics-count {
  font-family: 'Outfit', sans-serif;
  font-variant-numeric: tabular-nums;
  font-size: 22px;
  font-weight: 800;
  color: var(--brand, #0a0a0a);
}

.tactics-summary-sep {
  color: color-mix(in srgb, var(--brand-dark, #0F0F0F) 30%, transparent);
}

.tactics-formation-current {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 18px;
  color: var(--text-primary, #0a0a0a);
  letter-spacing: 0.08em;
}

/* === MODAL DE SÉLECTION === */

.tactics-player-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 16px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding-top: max(16px, env(safe-area-inset-top));
  padding-bottom: max(16px, env(safe-area-inset-bottom));
}

.tactics-player-modal[hidden] {
  display: none !important;
}

.tactics-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.75);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: -1;
}

.tactics-modal-content {
  position: relative;
  width: 100%;
  max-width: 480px;
  background: #1a1a1a;
  border: 2px solid var(--brand-accent, #FFC857);
  border-radius: 18px;
  padding: 32px 22px 22px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
  animation: modalPop 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  margin: auto;
}

.tactics-modal-close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 36px;
  height: 36px;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.2s;
  z-index: 2;
}

.tactics-modal-close:hover {
  background: rgba(255, 255, 255, 0.18);
}

.tactics-modal-title {
  margin: 0 0 18px;
  font-family: 'Bebas Neue', sans-serif;
  font-size: 26px;
  font-weight: 400;
  letter-spacing: 0.04em;
  color: var(--brand-accent, #FFC857);
  text-transform: uppercase;
  padding-right: 40px;
}

.tactics-modal-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 60vh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* Joueur option */
.tactics-player-option {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  background: rgba(255, 255, 255, 0.04);
  border: 1.5px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.2s ease;
  text-align: left;
  width: 100%;
  font-family: inherit;
  color: #fff;
}

.tactics-player-option:hover {
  border-color: var(--brand-accent, #FFC857);
  background: rgba(255, 255, 255, 0.07);
  transform: translateX(2px);
}

.tactics-player-option.current {
  border-color: var(--brand-accent, #FFC857);
  background: color-mix(in srgb, var(--brand-accent, #FFC857) 15%, rgba(0,0,0,0.3));
}

.tactics-player-option.disabled-placed {
  opacity: 0.5;
}

.tactics-player-option.position-mismatch {
  border-style: dashed;
}

.tactics-option-photo {
  width: 44px;
  height: 44px;
  border-radius: 8px;
  overflow: hidden;
  background: rgba(0, 0, 0, 0.4);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.tactics-option-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.tactics-option-placeholder {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 16px;
  color: rgba(255, 255, 255, 0.7);
}

.tactics-option-info {
  flex: 1;
  min-width: 0;
}

.tactics-option-name {
  font-size: 14px;
  font-weight: 700;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tactics-option-meta {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.55);
}

.tactics-option-tag {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 3px 7px;
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.7);
  border-radius: 4px;
  flex-shrink: 0;
}

.tactics-option-tag.current {
  background: var(--brand-accent, #FFC857);
  color: #0a0a0a;
}

.tactics-remove-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px;
  background: rgba(220, 38, 38, 0.15);
  border: 1.5px solid rgba(220, 38, 38, 0.4);
  border-radius: 10px;
  color: #FCA5A5;
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  margin-top: 8px;
}

.tactics-remove-btn:hover {
  background: rgba(220, 38, 38, 0.25);
  border-color: rgba(220, 38, 38, 0.6);
}

/* Responsive */
@media (max-width: 640px) {
  .tactics-formations {
    grid-template-columns: repeat(2, 1fr);
  }
  .tactics-pitch-wrap {
    padding: 8px;
  }
  .tactics-slot {
    width: 64px;
    height: 80px;
  }
  .tactics-slot .slot-empty,
  .tactics-slot.filled .slot-photo-wrap {
    width: 44px;
    height: 44px;
  }
  .tactics-slot.filled .slot-name {
    font-size: 9px;
    max-width: 80px;
  }
  .tactics-slot .slot-label {
    font-size: 10px;
  }
  .tactics-modal-content {
    padding: 26px 16px 18px;
  }
}

/* =========================================
   TEMPLATE IMAGE PARTAGE - ONZE TACTIQUE
   Format 4:5 (1080×1350) caché hors écran
   ⚠️ html2canvas-compatible : pas de color-mix
   ========================================= */

.tactics-image-template {
  position: fixed;
  top: -9999px;
  left: -9999px;
  width: 1080px;
  height: 1350px;
  pointer-events: none;
  z-index: -1;
}

.tactics-share-card {
  position: relative;
  width: 1080px;
  height: 1350px;
  /* Fond simple, sera surchargé en JS avec les couleurs du club */
  background: linear-gradient(180deg, #0a0a0a 0%, #1a1a1a 100%);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  font-family: 'Inter', sans-serif;
  padding: 50px 50px 40px;
  box-sizing: border-box;
}

/* HEADER */
.tactics-share-header {
  display: flex;
  align-items: center;
  gap: 30px;
  margin-bottom: 36px;
}

.tactics-share-club-logo {
  width: 110px;
  height: 110px;
  background: #fff;
  border-radius: 18px;
  padding: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 8px 24px rgba(0,0,0,0.4);
}

.tactics-share-club-logo img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.tactics-share-header-text {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.tactics-share-eyebrow {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 24px;
  letter-spacing: 0.16em;
  /* Couleur accent injectée en JS */
  color: #FFC857;
  text-transform: uppercase;
}

.tactics-share-club-name {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 72px;
  letter-spacing: 0.02em;
  color: #FFFFFF;
  margin: 0;
  line-height: 1;
  text-transform: uppercase;
}

.tactics-share-formation {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 30px;
  letter-spacing: 0.1em;
  color: rgba(255, 255, 255, 0.75);
  text-transform: uppercase;
}

/* TERRAIN — gradient simple, pas de transparency complexe */
.tactics-share-pitch {
  position: relative;
  flex: 1;
  width: 100%;
  background: linear-gradient(135deg, #166534 0%, #15803d 40%, #16a34a 70%, #166534 100%);
  border: 4px solid rgba(255, 255, 255, 0.35);
  border-radius: 16px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}

/* Bandes pelouse */
.tactics-share-pitch::before {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(to bottom,
    transparent 0%,
    transparent 10%,
    rgba(0, 0, 0, 0.07) 10%,
    rgba(0, 0, 0, 0.07) 20%);
  pointer-events: none;
  border-radius: 12px;
}

/* Lignes du terrain (rond central + surfaces + ligne médiane) */
.tactics-share-pitch::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    /* Ligne médiane horizontale */
    linear-gradient(to bottom, transparent 49.7%, rgba(255,255,255,0.3) 49.7%, rgba(255,255,255,0.3) 50.3%, transparent 50.3%),
    /* Surface réparation haut */
    linear-gradient(to bottom, transparent 14%, rgba(255,255,255,0.3) 14%, rgba(255,255,255,0.3) 14.4%, transparent 14.4%),
    /* Surface réparation bas */
    linear-gradient(to bottom, transparent 85.6%, rgba(255,255,255,0.3) 85.6%, rgba(255,255,255,0.3) 86%, transparent 86%);
  border-radius: 12px;
}

/* Cercle central rendu via div séparé */
.tactics-share-pitch-circle {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 16%;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  pointer-events: none;
}

/* SLOTS JOUEURS sur l'image partagée */
.tactics-share-slot {
  position: absolute;
  transform: translate(-50%, -50%);
  width: 130px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  z-index: 2;
}

.tactics-share-slot-photo {
  width: 90px;
  height: 90px;
  border-radius: 50%;
  overflow: hidden;
  /* Couleur de bordure injectée en JS */
  border: 4px solid #FFC857;
  background: #1a1a1a;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.5);
}

.tactics-share-slot-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.tactics-share-slot-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #1a1a1a;
  /* Couleur injectée en JS */
  color: #FFC857;
  font-family: 'Bebas Neue', sans-serif;
  font-size: 36px;
  letter-spacing: 0.04em;
}

.tactics-share-slot-name {
  padding: 5px 12px;
  background: rgba(0, 0, 0, 0.85);
  border-radius: 6px;
  font-size: 18px;
  font-weight: 800;
  color: #fff;
  white-space: nowrap;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.9);
  letter-spacing: 0.01em;
  max-width: 160px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tactics-share-slot-empty {
  width: 70px;
  height: 70px;
  border-radius: 50%;
  border: 3px dashed rgba(255, 255, 255, 0.55);
  background: rgba(0, 0, 0, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Bebas Neue', sans-serif;
  font-size: 18px;
  color: rgba(255, 255, 255, 0.75);
  letter-spacing: 0.08em;
}

/* FOOTER */
.tactics-share-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 30px;
  padding-top: 24px;
  border-top: 2px solid rgba(255, 255, 255, 0.1);
}

.tactics-share-stats {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.tactics-share-stat-label {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 18px;
  letter-spacing: 0.16em;
  color: rgba(255, 255, 255, 0.6);
  text-transform: uppercase;
}

.tactics-share-stat-value {
  font-family: 'Outfit', sans-serif;
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum';
  font-size: 44px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: #fff;
  line-height: 1;
}

.tactics-share-watermark {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
}

.tactics-share-wm-c,
.tactics-share-wm-b {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 28px;
  line-height: 1;
  letter-spacing: 0.06em;
}

.tactics-share-wm-c {
  color: rgba(255, 255, 255, 0.85);
}

.tactics-share-wm-b {
  /* Couleur injectée en JS */
  color: #FFC857;
}

/* =========================================
   ACTIONS PARTAGE SUR LA VUE TACTIQUE
   ========================================= */

.tactics-actions {
  display: flex;
  gap: 12px;
  justify-content: center;
  margin: 24px auto 0;
  flex-wrap: wrap;
}

.tactics-actions .btn-primary[disabled] {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
}

@media (max-width: 640px) {
  .tactics-actions {
    flex-direction: column;
    align-items: stretch;
    padding: 0 16px;
  }
}