/* ============================================================
   FSF Sélections — frontend.css
   Style éditorial premium : typographie Oswald / Lato,
   cartes joueurs avec effet hover, page profil cinématique
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@400;600;700&family=Lato:wght@300;400;700;900&display=swap');

:root {
  --fsfs-vert:   #00843D;
  --fsfs-gd:     #005a2b;
  --fsfs-jaune:  #FDEF00;
  --fsfs-rouge:  #E2001A;
  --fsfs-bleu:   #1a3a6e;
  --fsfs-noir:   #0d0d0d;
  --fsfs-gris:   #f2f2f2;
  --fsfs-t: .25s cubic-bezier(.4,0,.2,1);
}

.fsfs-wrap { font-family:'Lato',sans-serif; color:var(--fsfs-noir); }
.fsfs-no-content { color:#888; font-style:italic; padding:20px; text-align:center; }

/* ══════════════════════════════════════════════
   HEADER SÉLECTION
══════════════════════════════════════════════ */
.fsfs-squad-header {
  display:flex; align-items:center; gap:16px;
  padding:20px 24px;
  background:linear-gradient(135deg, var(--sc, var(--fsfs-gd)) 0%, color-mix(in srgb, var(--sc, var(--fsfs-gd)) 70%, #000) 100%);
  margin-bottom:0;
  position:relative; overflow:hidden;
}
.fsfs-squad-header::before {
  content:''; position:absolute; right:-40px; top:-40px;
  width:200px; height:200px; border-radius:50%;
  background:rgba(255,255,255,.06);
}
.fsfs-squad-flag { font-size:40px; line-height:1; }
.fsfs-squad-title {
  font-family:'Oswald',sans-serif; font-size:22px; font-weight:700;
  color:#fff; text-transform:uppercase; letter-spacing:2px; margin:0;
}
.fsfs-squad-sub {
  font-size:12px; color:rgba(255,255,255,.6);
  letter-spacing:1px; text-transform:uppercase;
}

/* ══════════════════════════════════════════════
   GROUPES PAR POSTE
══════════════════════════════════════════════ */
.fsfs-position-group { margin-bottom:36px; }

.fsfs-pg-label {
  display:flex; align-items:center; gap:12px;
  padding:10px 0; margin-bottom:16px;
  border-bottom:2px solid var(--sc, var(--fsfs-gd));
}
.fsfs-pg-label span {
  font-family:'Oswald',sans-serif; font-size:13px; font-weight:700;
  letter-spacing:3px; text-transform:uppercase;
  color:var(--sc, var(--fsfs-gd));
  padding:6px 16px;
  border-left:4px solid var(--sc, var(--fsfs-gd));
}

/* ══════════════════════════════════════════════
   GRILLE JOUEURS
══════════════════════════════════════════════ */
.fsfs-players-grid-front {
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(180px, 1fr));
  gap:16px;
}

/* ══════════════════════════════════════════════
   CARTE JOUEUR — Design premium
══════════════════════════════════════════════ */
.fsfs-player-card {
  background:#fff;
  border:1px solid #e5e5e5;
  overflow:hidden;
  transition:box-shadow var(--fsfs-t), transform var(--fsfs-t);
  cursor:default;
}
.fsfs-player-card:hover {
  box-shadow:0 16px 40px rgba(0,0,0,.12);
  transform:translateY(-4px);
}
.fsfs-pc-inactive { opacity:.65; filter:grayscale(.4); }

/* Photo */
.fsfs-pc-photo-wrap {
  position:relative;
  padding-top:120%;   /* ratio portrait */
  background:linear-gradient(160deg, color-mix(in srgb, var(--pc, var(--fsfs-gd)) 15%, #fff) 0%, #e8e8e8 100%);
  overflow:hidden;
}
.fsfs-pc-photo {
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover; object-position:top center;
  transition:transform .4s ease;
}
.fsfs-player-card:hover .fsfs-pc-photo { transform:scale(1.04); }

/* Numéro de maillot */
.fsfs-pc-num {
  position:absolute; top:10px; left:10px;
  width:30px; height:30px; border-radius:50%;
  font-family:'Oswald',sans-serif; font-size:14px; font-weight:700;
  color:#fff; display:flex; align-items:center; justify-content:center;
  box-shadow:0 2px 8px rgba(0,0,0,.3);
  z-index:2;
}

/* Overlay statut */
.fsfs-pc-status-overlay {
  position:absolute; bottom:0; left:0; right:0;
  background:rgba(0,0,0,.7); color:#fff;
  font-family:'Oswald',sans-serif; font-size:10px; letter-spacing:1px;
  text-transform:uppercase; padding:5px; text-align:center;
}

/* Corps de la carte */
.fsfs-pc-body { padding:12px 14px; }
.fsfs-pc-name { line-height:1.2; margin-bottom:8px; }
.fsfs-pc-prenom { display:block; font-size:12px; color:#888; }
.fsfs-pc-nom { display:block; font-family:'Oswald',sans-serif; font-size:16px; font-weight:700; color:var(--fsfs-noir); }
.fsfs-pc-details { margin-bottom:8px; }
.fsfs-pc-poste { display:block; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.5px; margin-bottom:5px; }
.fsfs-pc-club {
  display:flex; align-items:center; gap:5px;
  font-size:12px; color:#666;
}
.fsfs-pc-club-logo { width:16px; height:16px; object-fit:contain; }
.fsfs-pc-stats {
  display:flex; gap:8px; flex-wrap:wrap;
  font-size:11px; color:#888; padding-top:8px;
  border-top:1px solid #f0f0f0;
}

/* ══════════════════════════════════════════════
   STAFF — Grille
══════════════════════════════════════════════ */
.fsfs-staff-grid {
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(200px, 1fr));
  gap:16px;
  margin-top:0;
}

.fsfs-staff-card {
  background:#fff;
  border:1px solid #e5e5e5;
  overflow:hidden;
  transition:box-shadow var(--fsfs-t), transform var(--fsfs-t);
}
.fsfs-staff-card:hover {
  box-shadow:0 10px 28px rgba(0,0,0,.10);
  transform:translateY(-3px);
}

.fsfs-sc-photo {
  height:160px; overflow:hidden;
  background:linear-gradient(160deg, color-mix(in srgb, var(--sc, var(--fsfs-gd)) 12%, #fff), #e8e8e8);
}
.fsfs-sc-photo img {
  width:100%; height:100%; object-fit:cover; object-position:top center;
  transition:transform .4s ease;
}
.fsfs-staff-card:hover .fsfs-sc-photo img { transform:scale(1.04); }

.fsfs-sc-info { padding:12px 14px; }
.fsfs-sc-role {
  font-family:'Oswald',sans-serif; font-size:10px; letter-spacing:1.5px;
  text-transform:uppercase; color:#fff; padding:3px 8px;
  display:inline-block; margin-bottom:8px;
}
.fsfs-sc-name { line-height:1.2; margin-bottom:4px; }
.fsfs-sc-name span { display:block; font-size:12px; color:#888; }
.fsfs-sc-name strong { font-family:'Oswald',sans-serif; font-size:15px; font-weight:700; }
.fsfs-sc-nat { font-size:11px; color:#999; }
.fsfs-sc-since { font-size:11px; color:#999; margin-top:2px; }

/* ══════════════════════════════════════════════
   FICHE PROFIL JOUEUR — Cinématique
══════════════════════════════════════════════ */
.fsfs-profile-page { background:#f4f4f4; }

/* Hero */
.fsfs-profile-hero {
  display:grid;
  grid-template-columns:280px 1fr;
  background:linear-gradient(135deg, var(--sc, var(--fsfs-gd)) 0%, color-mix(in srgb, var(--sc, var(--fsfs-gd)) 60%, #000) 100%);
  min-height:380px;
  position:relative; overflow:hidden;
}
.fsfs-profile-hero::after {
  content:'🇸🇳';
  position:absolute; right:24px; bottom:16px;
  font-size:80px; opacity:.08; pointer-events:none;
}

/* Photo hero */
.fsfs-ph-photo-wrap {
  display:flex; align-items:flex-end; justify-content:center;
  padding:0 0 0 24px;
}
.fsfs-ph-photo {
  position:relative; width:240px; flex-shrink:0;
  align-self:flex-end;
}
.fsfs-ph-photo img {
  width:100%; display:block;
  object-fit:cover; object-position:top;
  max-height:360px;
  filter:drop-shadow(0 8px 24px rgba(0,0,0,.4));
}
.fsfs-ph-num {
  position:absolute; bottom:12px; right:-12px;
  width:48px; height:48px; border-radius:50%;
  font-family:'Oswald',sans-serif; font-size:22px; font-weight:700;
  color:#fff; display:flex; align-items:center; justify-content:center;
  border:3px solid rgba(255,255,255,.3);
  box-shadow:0 4px 12px rgba(0,0,0,.3);
}

/* Infos hero */
.fsfs-ph-info {
  padding:32px 32px 32px 24px;
  display:flex; flex-direction:column; justify-content:flex-end; gap:12px;
  color:#fff;
}
.fsfs-ph-sel {
  font-family:'Oswald',sans-serif; font-size:11px; letter-spacing:3px;
  text-transform:uppercase; opacity:.85;
}
.fsfs-ph-name { margin:0; }
.fsfs-ph-prenom { display:block; font-size:18px; font-weight:300; opacity:.85; }
.fsfs-ph-nom {
  display:block;
  font-family:'Oswald',sans-serif; font-size:48px; font-weight:700;
  letter-spacing:2px; text-transform:uppercase; line-height:1;
}
.fsfs-ph-poste {
  display:inline-block;
  font-family:'Oswald',sans-serif; font-size:12px; letter-spacing:2px;
  text-transform:uppercase; color:#fff;
  padding:5px 14px; align-self:flex-start;
}

/* Stats rapides hero */
.fsfs-ph-quick-stats {
  display:flex; gap:20px; flex-wrap:wrap;
}
.fsfs-qs { display:flex; flex-direction:column; align-items:center; gap:2px; }
.fsfs-qs-val {
  font-family:'Oswald',sans-serif; font-size:32px; font-weight:700;
  color:var(--fsfs-jaune); line-height:1;
}
.fsfs-qs-lbl { font-size:10px; letter-spacing:2px; text-transform:uppercase; opacity:.65; }

/* Corps du profil */
.fsfs-profile-body {
  display:grid; grid-template-columns:1fr 300px; gap:24px;
  padding:28px; max-width:1200px; margin:0 auto;
}

.fsfs-profile-section { margin-bottom:24px; }
.fsfs-profile-section h3 {
  font-family:'Oswald',sans-serif; font-size:14px; letter-spacing:2px;
  text-transform:uppercase; color:var(--fsfs-gd);
  margin:0 0 12px; padding-bottom:8px; border-bottom:2px solid var(--fsfs-gd);
}
.fsfs-profile-bio { font-size:15px; line-height:1.7; color:#444; }

/* Infos perso */
.fsfs-info-grid { display:flex; flex-direction:column; gap:0; }
.fsfs-info-row {
  display:flex; justify-content:space-between; align-items:center;
  padding:9px 0; border-bottom:1px solid #f0f0f0; font-size:14px;
}
.fsfs-info-lbl { color:#888; }
.fsfs-info-val { font-weight:700; color:#222; text-align:right; }

/* Club card */
.fsfs-profile-club, .fsfs-profile-intl, .fsfs-profile-social {
  background:#fff; padding:16px; margin-bottom:14px; border:1px solid #e5e5e5;
  border-left:4px solid var(--fsfs-gd);
}
.fsfs-profile-club h4, .fsfs-profile-intl h4, .fsfs-profile-social h4 {
  font-family:'Oswald',sans-serif; font-size:11px; letter-spacing:2px;
  text-transform:uppercase; color:var(--fsfs-gd); margin:0 0 10px;
}
.fsfs-club-card { display:flex; align-items:center; gap:12px; }
.fsfs-club-logo { width:40px; height:40px; object-fit:contain; }
.fsfs-club-card strong { font-size:15px; font-weight:700; }
.fsfs-club-card small { color:#888; font-size:12px; }

.fsfs-intl-stats { display:flex; flex-direction:column; gap:0; }
.fsfs-is-row {
  display:flex; justify-content:space-between;
  padding:6px 0; border-bottom:1px solid #f5f5f5; font-size:13px;
}
.fsfs-is-row strong { font-family:'Oswald',sans-serif; font-size:18px; color:var(--fsfs-rouge); }

/* Social */
.fsfs-social-link {
  display:flex; align-items:center; gap:8px;
  font-size:13px; color:#111; text-decoration:none;
  padding:6px 0; border-bottom:1px solid #f5f5f5;
  transition:color var(--fsfs-t);
}
.fsfs-social-link:hover { color:var(--fsfs-gd); }

/* ══════════════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════════════ */
@media(max-width:768px) {
  .fsfs-profile-hero { grid-template-columns:1fr; }
  .fsfs-ph-photo-wrap { display:none; }
  .fsfs-ph-nom { font-size:32px; }
  .fsfs-profile-body { grid-template-columns:1fr; padding:16px; }
  .fsfs-players-grid-front { grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:10px; }
  .fsfs-staff-grid { grid-template-columns:repeat(auto-fill,minmax(160px,1fr)); gap:10px; }
}
@media(max-width:480px) {
  .fsfs-players-grid-front { grid-template-columns:repeat(2,1fr); }
  .fsfs-staff-grid { grid-template-columns:repeat(2,1fr); }
  .fsfs-ph-quick-stats { gap:12px; }
  .fsfs-qs-val { font-size:24px; }
}