/* ============================================================
   SAGAA Player & Staff — Styles unifiés
   Appliqué à : archive-player, archive-staff, single-player, single-staff
   ============================================================ */

/* ====== Archives (players + staff) ====== */
.sagaa-archive {
  margin: 0 auto;
  max-width: 1200px;
  padding: 20px;
}

/* Filtres */
.sagaa-archive .filters-grid {
  display: grid;
  grid-template-columns: 1fr 160px 1fr 160px;
  gap: 12px;
  max-width: 1000px;
  margin-bottom: 20px;
}
.sagaa-archive .filter-item label {
  display: block;
  font-size: 0.9rem;
  color: #444;
  margin-bottom: 4px;
}
.sagaa-archive .filter-item input,
.sagaa-archive .filter-item select {
  width: 100%;
  padding: 6px 8px;
  border: 1px solid #ddd;
  border-radius: 6px;
  font-size: 0.9rem;
}
.sagaa-archive .filter-actions {
  align-self: end;
  display: flex;
  gap: 8px;
}

/* Grille de cartes */
.sagaa-archive .sagaa-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 16px;
  margin-top: 18px;
}

/* Carte générique */
.sagaa-archive .sagaa-card {
  background: #fff;
  border-radius: 12px;
  padding: 14px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.sagaa-archive .sagaa-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.08);
}

/* Image / thumb */
.sagaa-archive .sagaa-card .thumb {
  margin-bottom: 10px;
}
.sagaa-archive .sagaa-card .thumb img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 8px;
}
.sagaa-archive .sagaa-card .thumb-ph {
  aspect-ratio: 4 / 3;
  background: #f2f4f7;
  border-radius: 8px;
}

/* Contenu de carte */
.sagaa-archive .card-title {
  margin: 8px 0 6px;
  font-weight: 600;
  font-size: 1.05rem;
}
.sagaa-archive .card-line {
  margin: 0;
  color: #333;
  font-size: 0.9rem;
}
.sagaa-archive .card-actions {
  margin-top: 10px;
}

/* Boutons */
.sagaa-archive .button,
.player-page .button {
  display: inline-block;
  padding: 0.5rem 0.75rem;
  border-radius: 8px;
  background: #1d4ed8;
  color: #fff;
  text-decoration: none;
  font-weight: 500;
  font-size: 0.9rem;
  transition: background 0.2s ease;
}
.sagaa-archive .button:hover,
.player-page .button:hover {
  background: #2563eb;
}

/* Pagination */
.sagaa-archive .pagination {
  margin-top: 20px;
  text-align: center;
}

/* ====== Singles (player + staff) ====== */
.player-page {
  max-width: 1100px;
  margin: 0 auto;
  padding: 20px;
}

.player-page .page-head {
  margin-bottom: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
}

.player-page .entry-title {
  margin: 0;
  font-size: 1.8rem;
  font-weight: 700;
  color: #111827;
}

/* Photo + Radar / Infos */
.player-page .block-top {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 16px;
  margin-bottom: 20px;
}
.player-page .player-photo img {
  width: 100%;
  height: auto;
  border-radius: 12px;
}
.player-page .ph-placeholder {
  aspect-ratio: 4/5;
  background: #f3f4f6;
  border-radius: 12px;
}

/* Cartes internes */
.player-page .sagaa-card {
  background: #fff;
  border-radius: 12px;
  padding: 16px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  margin-bottom: 16px;
}
.player-page .block-profile h2,
.player-page .sagaa-card h3 {
  margin-top: 0;
  font-size: 1.1rem;
  color: #111827;
  border-bottom: 1px solid #e5e7eb;
  padding-bottom: 6px;
}

/* Profil (dl) */
.player-page .sagaa-dl > div {
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: 6px;
  margin: 6px 0;
}
.player-page .sagaa-dl dt {
  color: #374151;
  font-weight: 600;
}
.player-page .sagaa-dl dd {
  margin: 0;
}

/* Double bloc */
.player-page .block-double {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

/* Tableaux (Parcours / Stats) */
.player-page .sagaa-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
}
.player-page .sagaa-table th,
.player-page .sagaa-table td {
  border-bottom: 1px solid #e5e7eb;
  padding: 6px 8px;
  text-align: left;
}
.player-page .sagaa-table th {
  background: #f9fafb;
  font-weight: 600;
}

/* Notes et Liens */
.player-page .block-notes-links {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-top: 20px;
}
.player-page .muted {
  color: #6b7280;
}

/* Responsive */
@media (max-width: 800px) {
  .player-page .block-top {
    grid-template-columns: 1fr;
  }
  .player-page .block-double,
  .player-page .block-notes-links {
    grid-template-columns: 1fr;
  }
  .sagaa-archive .filters-grid {
    grid-template-columns: 1fr;
  }
}
	
/* ===== Harmonisation des hauteurs et largeurs (photo / radar ou infos) ===== */
.player-page .block-top {
  grid-template-columns: 1fr 1fr;   /* même largeur pour les deux colonnes */
  align-items: stretch;             /* étire les deux blocs à la même hauteur */
}

/* Force chaque carte à occuper toute la hauteur disponible */
.player-page .player-photo,
.player-page .player-radar {
  height: 100%;
}

/* Ajuste la photo pour remplir son bloc harmonieusement */
.player-page .player-photo {
  display: flex;
  overflow: hidden;
  border-radius: 12px;
}

.player-page .player-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;                /* “cover” = remplissage avec rognage propre */
  border-radius: 12px;
}

/* Donne une hauteur minimale confortable aux deux blocs */
@media (min-width: 900px) {
  .player-page .player-photo,
  .player-page .player-radar {
    min-height: 420px;              /* ajuste entre 380 et 500px selon ton goût */
  }
}

/* --- FIX mobile: l’icône du bloc Profil remonte près du radar --- */
.sagaa-card .section-title {
  display: flex;
  align-items: center;
  gap: .5rem;
  position: relative;
}

/* Si l'icône est un élément dédié (.ico) */
.sagaa-card .section-title .ico {
  position: static !important;
  width: 20px; height: 20px;
  margin: 0 .5rem 0 0;
}

/* Si l'icône est un pseudo-élément (::before), on neutralise l’absolu sur mobile */
@media (max-width: 768px) {
  .sagaa-card .section-title::before {
    position: static !important;
    left: auto !important;
    top: auto !important;
    transform: none !important;
    margin-right: .5rem;
  }
  /* sécurité : évite tout chevauchement */
  .card.radar { position: relative; overflow: hidden; }
}

/* === Mobile: Photo au-dessus du Radar, puis Profil === */
@media (max-width: 768px){

  /* Cas le plus probable : parent en flex -> on force le wrap + l'ordre */
  .card.photo,
  .card.radar{
    flex: 0 0 100% !important;
    width: 100% !important;
  }
  .card.photo { order: 1; }
  .card.radar { order: 2; }

  /* Si le parent est en grid (2 colonnes), on passe à 1 colonne */
  .cards, .cards-2, .grid-2, .player-top, .header-grid, .sagaa-grid{
    display: grid;
    grid-template-columns: 1fr !important;
    gap: 16px;
  }

  /* Sécurité d'empilement */
  .card.photo, .card.radar{ margin: 0 0 16px 0; }
}

/* ===== MOBILE LAYOUT: Photo au-dessus du radar ===== */
@media (max-width: 768px){

  /* 1) S'assurer que le conteneur empile */
  .cards, .cards-2, .player-top, .sagaa-grid, .header-grid, .row, .container > .cards {
    display: flex !important;
    flex-wrap: wrap !important;
  }

  /* 2) Photo et Radar en pleine largeur + ordre imposé */
  .card.photo, .card.radar{
    flex: 0 0 100% !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 0 16px 0 !important;
  }
  .card.photo { order: 1 !important; }
  .card.radar { order: 2 !important; }

  /* 3) Empêche toute mise en page flottante résiduelle */
  .card.photo img,
  .player-photo-img{
    display: block !important;
    width: 100% !important;
    height: auto !important;
    float: none !important;
    max-width: 100% !important;
  }
}

/* ===== Mobile / Tablet fixes: stack Photo over Radar, fix Profile wrap ===== */

/* 1) Stack on <= 1024px (phones + many tablets) */
@media (max-width: 1024px){

  /* Force the parent to wrap */
  .cards, .cards-2, .player-top, .sagaa-grid, .header-grid, .row, .container > .cards{
    display:flex !important;
    flex-wrap:wrap !important;
    gap:16px !important;
  }

  /* Full width + order: Photo first, Radar second */
  .card.photo, .card.radar{
    flex:0 0 100% !important;
    width:100% !important;
    max-width:100% !important;
    margin:0 !important;
    order:initial;
  }
  .card.photo{ order:1 !important; }
  .card.radar{ order:2 !important; }

  /* Ensure image scales and doesn't float */
  .card.photo img, .player-photo-img{
    display:block !important;
    width:100% !important;
    height:auto !important;
    float:none !important;
    max-width:100% !important;
  }

  /* Make the radar scale properly */
  .card.radar svg{
    width:100% !important;
    height:auto !important;
  }

  /* 2) Profile block: collapse to 1 column, allow wrapping */
  .block-profile .grid-2,
  .block-profile .cards,
  .block-profile .row{
    display:block !important;
  }
  .block-profile .row > *, 
  .block-profile .col, 
  .block-profile .card{
    width:100% !important;
    max-width:100% !important;
  }

  /* If your profile uses dl/dt/dd or table-like rows */
  .block-profile dl{ 
    display:block !important;
  }
  .block-profile dt, 
  .block-profile dd{
    display:block !important;
    width:100% !important;
    max-width:100% !important;
    white-space:normal !important;
    overflow-wrap:break-word !important;
    word-break:break-word !important;
    hyphens:auto !important;
  }

  /* If it's a table layout somewhere, allow wrap */
  .block-profile table{
    table-layout:auto !important;
    width:100% !important;
  }
  .block-profile th, .block-profile td{
    white-space:normal !important;
    overflow-wrap:break-word !important;
    word-break:break-word !important;
  }
}


/* ===== Fix mobile: photo AU-DESSUS du radar + texte profil qui déborde ===== */
@media (max-width: 1024px){

  /* 1) On neutralise la grille/flex du parent pour cette page uniquement */
  body.single-player .cards,
  body.single-player .cards-2,
  body.single-player .player-top,
  body.single-player .sagaa-grid,
  body.single-player .header-grid,
  body.single-player .container > .cards {
    display: block !important;
    grid-template-columns: none !important;
    flex-wrap: nowrap !important;
    gap: 16px !important;
  }

  /* 2) Les deux cartes passent en pleine largeur et s’empilent
        -> photo en 1, radar en 2 */
  body.single-player .card.photo,
  body.single-player .card.radar{
    float: none !important;
    flex: 0 0 100% !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 0 16px 0 !important;
    order: initial;
  }
  body.single-player .card.photo{ order: 1 !important; }
  body.single-player .card.radar{ order: 2 !important; }

  /* Image responsive, plus de miniature qui colle à gauche */
  body.single-player .card.photo img,
  body.single-player .player-photo-img{
    display: block !important;
    width: 100% !important;
    height: auto !important;
    max-width: 100% !important;
  }

  /* Radar qui s’adapte à la largeur */
  body.single-player .card.radar svg{
    width: 100% !important;
    height: auto !important;
  }

  /* 3) Profil : plus de débordements, tout passe à la ligne */
  body.single-player .block-profile .grid-2,
  body.single-player .block-profile .cards,
  body.single-player .block-profile .row{
    display: block !important;
  }
  body.single-player .block-profile .row > *,
  body.single-player .block-profile .col,
  body.single-player .block-profile .card{
    width: 100% !important;
    max-width: 100% !important;
  }
  body.single-player .block-profile table{
    table-layout: auto !important;
    width: 100% !important;
  }
  body.single-player .block-profile th,
  body.single-player .block-profile td,
  body.single-player .block-profile dt,
  body.single-player .block-profile dd{
    white-space: normal !important;
    overflow-wrap: break-word !important;
    word-break: break-word !important;
    hyphens: auto !important;
  }
}

/* ===== MOBILE: empiler Photo puis Radar, quoi qu'il arrive ===== */
@media (max-width: 1024px){

  /* Couvre les variantes de body: single-player ET single-players */
  body.single-player,
  body.single-players {
    /* 1) Tout conteneur “grille” courant repasse en 1 colonne */
  }
  body.single-player .cards,
  body.single-player .cards-2,
  body.single-player .player-top,
  body.single-player .sagaa-grid,
  body.single-player .header-grid,
  body.single-player [class*="grid"],
  body.single-player .ast-row,
  body.single-player .ast-grid,
  body.single-players .cards,
  body.single-players .cards-2,
  body.single-players .player-top,
  body.single-players .sagaa-grid,
  body.single-players .header-grid,
  body.single-players [class*="grid"],
  body.single-players .ast-row,
  body.single-players .ast-grid {
    display: block !important;
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  /* 2) Les deux cartes s’étalent en pleine largeur et s’empilent
        -> Photo en 1, Radar en 2 */
  body.single-player .card.photo,
  body.single-player .card.radar,
  body.single-players .card.photo,
  body.single-players .card.radar {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 0 16px 0 !important;
    float: none !important;
    flex: 0 0 100% !important;
  }
  body.single-player .card.photo,
  body.single-players .card.photo { order: 1 !important; }
  body.single-player .card.radar,
  body.single-players .card.radar { order: 2 !important; }

  /* 3) Image responsive */
  body.single-player .card.photo img,
  body.single-players .card.photo img,
  body.single-player .player-photo-img,
  body.single-players .player-photo-img {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    max-width: 100% !important;
  }

  /* 4) Radar responsive */
  body.single-player .card.radar svg,
  body.single-players .card.radar svg {
    width: 100% !important;
    height: auto !important;
  }

  /* 5) Profil : plus de débordements */
  body.single-player .block-profile,
  body.single-players .block-profile {
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
  }
  body.single-player .block-profile .grid-2,
  body.single-players .block-profile .grid-2,
  body.single-player .block-profile .cards,
  body.single-players .block-profile .cards {
    display: block !important;
  }
  body.single-player .block-profile *:where(th,td,dt,dd){
    white-space: normal !important;
  }
}


/* ===== Empiler Photo au-dessus du Radar sur mobile ===== */
@media (max-width: 1024px){
  /* On neutralise toute grille et on force une colonne */
  .player-2col.block-top{
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
  }

  /* Les deux cartes prennent 100% de largeur */
  .player-2col.block-top > .card{
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    float: none !important;
    flex: 0 0 100% !important;
  }

  /* Sécurité d'ordre si jamais un style externe s'en mêle */
  .player-2col.block-top > .card.photo{ order: 1 !important; }
  .player-2col.block-top > .card.radar{ order: 2 !important; }

  /* Image responsive */
  .player-2col.block-top .card.photo img,
  .player-2col.block-top .player-photo-img{
    display: block !important;
    width: 100% !important;
    height: auto !important;
  }

  /* Radar responsive */
  .player-2col.block-top .card.radar svg{
    width: 100% !important;
    height: auto !important;
  }

  /* Évite les débordements dans le bloc Profil */
  .block-profile{
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
  }
}

/* === SAGAA Gauges === */
.sagaa-gauges { display:grid; gap:12px; margin:10px 0 4px; }
.sagaa-gauge { background:#fff; border-radius:12px; padding:10px 12px; box-shadow:0 1px 2px rgba(0,0,0,.04); }
.sagaa-gauge .g-head { display:flex; justify-content:space-between; align-items:center; margin-bottom:6px; }
.sagaa-gauge .g-label { font-weight:600; color:#223; }
.sagaa-gauge .g-val { color:#334; opacity:.85; font-variant-numeric:tabular-nums; }
.sagaa-gauge .g-bar { width:100%; height:10px; display:block; }
.sagaa-gauge .g-bar .g-bg   { fill:#e6eef8; }
.sagaa-gauge .g-bar .g-fill { fill:#4da3ff; } /* tu peux surcharger par sport si besoin */

@media (min-width: 768px){
  /* 2 colonnes sur desktop si tu veux */
  .sagaa-gauges { grid-template-columns: 1fr 1fr; }
}

/* Animation fluide des jauges */
.sagaa-gauge .g-fill {
  transition: width 1.2s ease-out, fill 0.6s ease-in;
}

/* Let the SVG gradient win */
.sagaa-gauge .g-bar .g-fill { fill: url(#sagaa-blue-gradient) !important; }

/* 2 colonnes Tests & Perf + Parcours */
section.block.block-double{
  display: grid !important;
  grid-template-columns: 1fr;
  gap: 16px;
}
@media (min-width: 992px){
  section.block.block-double{
    grid-template-columns: 1fr 1fr !important;
  }
}
/* éviter qu’une carte force la pleine largeur */
section.block.block-double > .sagaa-card{ min-width: 0; }

/* === FORCAGE LAYOUT TESTS & PARCOURS === */
#tests-parcours {
  display: grid !important;
  grid-template-columns: 1fr;
  gap: 16px;
}

@media (min-width: 992px){
  #tests-parcours {
    grid-template-columns: 1fr 1fr !important;
  }
  #tests-parcours > .sagaa-card {
    min-width: 0;
    width: auto !important;
    margin: 0 !important;
  }
}

/* --- Dégradé bleu pour toutes les jauges --- */
.sagaa-gauge .g-fill {
  transition: width 1.2s ease-out;
  fill: url(#sagaa-blue-gradient);
}

/* Définition du dégradé SVG */
svg.g-bar defs linearGradient#sagaa-blue-gradient {
  stop:first-child { stop-color: #4da3ff; }
  stop:last-child  { stop-color: #9fd3ff; }
}


/* --- Reset carte PHOTO : ne pas la centrer --- */
.card.photo {
  display: block !important;           /* annule tout flex hérité */
  text-align: left !important;
}
.card.photo img,
.card.photo .player-photo-img {
  display: block !important;
  margin: 0 !important;
  max-width: 100%;
  height: auto;
}

/* --- Centrage carte RADAR uniquement --- */
.card.radar {
  display: flex !important;            /* centre le contenu du radar */
  justify-content: center !important;
  align-items: center !important;
}
.card.radar canvas,
.card.radar svg {
  display: block;
  max-width: 100%;
  height: auto;
}

/* Sécurité : si un conteneur global force le flex sur toutes les .card, on le neutralise pour la photo */
.player-2col .card.photo,
.block-top .card.photo {
  align-items: stretch !important;
  justify-content: flex-start !important;
}

/* Radar : limite la largeur réelle du SVG et centre-le proprement */
.card.radar svg,
.card.radar canvas {
  max-width: 520px;     /* ajuste si tu veux plus/moins grand */
  width: 100%;
  height: auto;
  margin: 0 auto;       /* centrage horizontal dans la carte */
}

/* Mobile : empile photo puis radar (sécurité supplémentaire) */
@media (max-width: 900px){
  .player-2col.block-top { display: block !important; }
  .player-2col.block-top .card.photo,
  .player-2col.block-top .card.radar { width: 100% !important; }
}

/* --- SAGAA Pitch (rectangulaire + responsive) --- */
.sagaa-pitch {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 8px 0 2px;
}

.sagaa-pitch .pitch-svg {
  width: 100%;
  max-width: 460px; /* taille idéale */
  height: auto;
  display: block;
  background: transparent; /* car le SVG gère le fond */
  border-radius: 14px;
}

@media (max-width: 600px) {
  .sagaa-pitch .pitch-svg {
    max-width: 300px;
  }
}

/* légende sous le terrain */
.sagaa-pitch .pitch-legend {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-size: .85rem;
  line-height: 1.3;
  color: #445;
  margin-top: 4px;
  text-align: center;
}

.sagaa-pitch .pitch-legend .dot {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  display: inline-block;
}

.sagaa-pitch .pitch-legend .dot.main {
  background: #1e64ff;
}

.sagaa-pitch .pitch-legend .dot.alt {
  background: #9bbdff;
  border: 1px solid #1e64ff;
}

/* point du joueur (léger relief) */
.sagaa-pitch .p-dot {
  filter: drop-shadow(0 0.5px 1px rgba(0, 0, 0, 0.15));
}

/* sécurité pour forcer la largeur dans les cartes */
.sagaa-card .sagaa-pitch .pitch-svg {
  width: 100% !important;
}

.sagaa-pitch {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center; /* centrage vertical et horizontal */
  gap: 10px;
  padding: 8px 0;
}

.sagaa-pitch .pitch-svg {
  display: block;
  width: 100%;
  max-width: 460px;
  height: auto;
  margin: 0 auto;          /* centrage horizontal */
  background: transparent; /* plus aucun fond */
  border-radius: 14px;
}

.sagaa-pitch { display:flex; align-items:center; justify-content:center; }
.sagaa-pitch .pitch-svg { display:block; width:100%; max-width:520px; margin:0 auto; background:transparent; }


/* === SAGAA – FINAL OVERRIDES (safe minimal set) === */

/* Header: stable two-column grid on desktop */
.player-page .block-top,
.player-2col.block-top{
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 24px !important;
  align-items: stretch !important;
}

/* Cards consistent box + padding */
.player-page .block-top .card,
.player-2col.block-top .card{
  box-sizing: border-box !important;
  background: #fff !important;
  border-radius: 12px !important;
  padding: 16px !important;
  height: 100% !important;
  overflow: hidden !important;
}

/* Photo block: no flex, no forced height */
.card.photo{ display:block !important; }
.card.photo img,
.player-photo-img{
  width:100% !important;
  height:auto !important;         /* <- no 100% height */
  object-fit:cover !important;    /* cover still ok */
  display:block !important;
  border-radius:12px !important;
}

/* Radar block: centered and responsive */
.card.radar{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
}
.card.radar canvas,
.card.radar svg{
  width:100% !important;
  max-width:520px !important;
  height:auto !important;
}

/* Mobile: stack photo above radar, remove fixed heights */
@media (max-width: 1024px){
  .player-page .block-top,
  .player-2col.block-top{ grid-template-columns: 1fr !important; }
  .player-page .block-top .card,
  .player-2col.block-top .card{
    min-height: auto !important;
  }
}

/* Pitch: center, no background tint, predictable width */
.sagaa-pitch{
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:center !important;
  gap:10px !important;
}
.sagaa-pitch .pitch-svg{
  display:block !important;
  width:100% !important;
  max-width:520px !important;
  margin:0 auto !important;
  background:transparent !important; /* no blue tint */
  border-radius:12px !important;
}

/* ===== Cartes (mêmes styles Players/Staff) ===== */
.sagaa-archive .wrap{max-width:1200px;margin:24px auto;padding:0 16px}
.sagaa-filters,.sagaa-cards{max-width:1200px;margin-left:auto;margin-right:auto;padding-left:0;padding-right:0}
.sagaa-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:18px;justify-content:center}
@media (max-width:1200px){.sagaa-archive .wrap,.sagaa-filters,.sagaa-cards{max-width:100%}.sagaa-cards{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:980px){.sagaa-cards{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.sagaa-cards{grid-template-columns:1fr}}

.sagaa-card{background:#fff;border:1px solid #eaeaea;border-radius:14px;overflow:hidden;box-shadow:0 6px 20px rgba(2,8,20,.04);transition:transform .15s ease,box-shadow .15s ease;padding:0 0 10px}
.sagaa-card:hover{transform:translateY(-2px);box-shadow:0 10px 26px rgba(2,8,20,.08)}

.sagaa-card{--thumb-pad:8px}
.sagaa-card .thumb{display:block;width:100%;aspect-ratio:4/3;background:#fff;padding:var(--thumb-pad);border-radius:14px;overflow:hidden;margin:0}
.sagaa-card .thumb img,.sagaa-card .thumb .thumb-ph{width:100%;height:100%;display:block;object-fit:cover;border-radius:10px}
.sagaa-card .thumb{margin-bottom:14px}

.card-title{margin:12px 16px 6px;font-size:18px;line-height:1.3}
.card-line{margin:4px 16px;color:#334155}
.card-actions{display:flex;justify-content:flex-end;margin:12px 16px 12px}
.card-title,.card-line,.card-actions{margin-left:var(--thumb-pad)!important;margin-right:16px!important}

.button,.btn{display:inline-block;padding:10px 14px;border-radius:10px;border:1px solid #0ea5e9;background:#0ea5e9;color:#fff;text-decoration:none}

/* ===== Pagination pastilles + flèches SVG ===== */
.sagaa-pagination{display:flex;justify-content:center;align-items:center;gap:8px;margin:22px 0 8px}
.sagaa-pagination .page-numbers{display:inline-flex;align-items:center;justify-content:center;min-width:36px;height:36px;padding:0 12px;border:1px solid #e5e7eb;border-radius:999px;background:#fff;color:#334155;text-decoration:none;font-weight:500;box-shadow:0 6px 14px rgba(2,8,20,.04);transition:transform .12s,box-shadow .12s,background .12s,color .12s,border-color .12s}
.sagaa-pagination .page-numbers:hover{transform:translateY(-1px);box-shadow:0 10px 20px rgba(2,8,20,.08);border-color:#cbd5e1}
.sagaa-pagination .page-numbers.current{background:#0ea5e9;color:#fff;border-color:#0ea5e9;box-shadow:0 10px 22px rgba(14,165,233,.25)}
.sagaa-pagination .page-numbers.prev,.sagaa-pagination .page-numbers.next{padding:0 14px;min-width:auto;height:36px}
.sagaa-pagination .page-numbers.dots{border:none;background:transparent;box-shadow:none;min-width:auto;padding:0 6px}



/* Force 3 colonnes sur desktop pour toutes les archives SAGAA */
.sagaa-archive .sagaa-cards { 
  grid-template-columns: repeat(3, 1fr) !important;
}

@media (max-width: 980px){
  .sagaa-archive .sagaa-cards { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 640px){
  .sagaa-archive .sagaa-cards { grid-template-columns: 1fr !important; }
}



/* Carte RADAR : titre au-dessus + centrage, comme "Profil" */
.sagaa-card.block.block-radar > .section-title{
  position:static !important;  /* annule le positionnement absolu global */
  display:flex; align-items:center; gap:8px;
  margin:12px 14px 0 14px;
  font-size:16px; font-weight:600; color:#1e3a8a;
}
.sagaa-card.block.block-radar .radar-box{
  padding:10px 14px 16px !important;
  text-align:center;
}
.sagaa-card.block.block-radar .radar-box svg,
.sagaa-card.block.block-radar .radar-box canvas{
  display:block; margin:0 auto; max-width:92%; height:auto;
}
/* supprime tout ancien overlay "Radar" ajouté via ::before */
.sagaa-card.block.block-radar .radar-box:before,
.sagaa-card.block.block-radar:before{ content:none !important; }

/* Forcer l’entête Radar et supprimer les overlays hérités */
.block-radar .section-title{ display:flex !important; position:relative !important; }
.sagaa-radar-wrap::before, .radar-box::before, .card.radar::before{ content:none !important; }


/* === SAGAA — Overrides finaux (Photo = Radar, labels entiers) === */

/* 1) Grille tête de page : 1fr / 1fr, même hauteur */
body.single-player .player-2col.block-top{
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 24px !important;
  align-items: stretch !important;
}
body.single-player .player-2col.block-top > .card{
  height: 100% !important;
  box-sizing: border-box !important;
}

/* 2) Photo : image fluide, pas de centrage parasite */
body.single-player .card.photo{
  display: block !important;
  text-align: left !important;
}
body.single-player .card.photo img,
body.single-player .player-photo-img{
  width: 100% !important;
  height: auto !important;        /* pas de 100% en hauteur */
  object-fit: cover !important;
  border-radius: 12px !important;
  display: block !important;
}

/* 3) Radar : centrage + place sur les côtés pour les labels */
body.single-player .card.radar{
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 12px 20px !important;      /* espace horizontal interne */
}
body.single-player .card.radar .radar-box{
  position: relative !important;
  overflow: visible !important;        /* laisse sortir les labels */
  width: 100% !important;
  max-width: 560px !important;         /* largeur raisonnable du graphe */
  margin: 0 auto !important;
  text-align: center !important;
}
body.single-player .card.radar .radar-box svg,
body.single-player .card.radar .radar-box canvas{
  display: block !important;
  width: 100% !important;
  height: auto !important;
  overflow: visible !important;
  transform-origin: center !important;
  transform: scale(0.78) !important;   /* ↓ rétrécit un peu pour révéler “Techni/Duels” */
}




/* Réduit le radar à l'intérieur de la carte sans toucher la grille */
.block-radar .radar-box { 
  padding: 8px 8px 14px !important;           /* un peu d'air autour */
  text-align: center !important;
}

.block-radar .radar-box svg.sagaa-radar,
.block-radar .radar-box canvas {
  display: block !important;
  margin: 0 auto !important;
  max-width: 420px !important;                 /* plafond visuel si la carte est large */
  width: 80% !important;                       /* rétrécit le graphe */
  height: auto !important;
}

/* Si le texte des labels touche encore les bords, baisse un peu la largeur */
@media (min-width: 981px){
  .block-radar .radar-box svg.sagaa-radar { width: 80% !important; }
}

/* --- Empile Photo puis Radar en mobile --- */
@media (max-width: 768px){
  .player-page .block-top{
    display: grid;
    grid-template-columns: 1fr !important; /* 1 seule colonne */
    gap: 16px;
  }
  /* ordre explicite au cas où */
  .player-page .block-top .card.photo{ order: 1; }
  .player-page .block-top .block-radar{ order: 2; }
}

/* Radar fluide dans son cadre */
.player-page .block-top .block-radar .radar-box svg,
.player-page .block-top .block-radar .radar-box canvas{
  display: block;
  max-width: 100%;
  height: auto;
  margin: 0 auto;
}

/* FINAL MOBILE STACK: force every item to span full width */
@media (max-width: 1024px){
  .player-2col.block-top,
  .player-page .block-top{
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  /* make all direct children take the whole row, regardless of their classes */
  .player-2col.block-top > *,
  .player-page .block-top > *{
    grid-column: 1 / -1 !important;
    width: 100% !important;
    max-width: 100% !important;
  }
}

@media (max-width: 768px) {
  .sagaa-pitch--static .pitch-img-wrap {
    max-width: 320px;
  }
}


//* ===== Tableau stats joueur ===== */

/* Wrapper commun : autorise le scroll si besoin */
.sagaa-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* Desktop / par défaut : tableau normal pleine largeur */
.sagaa-table {
    border-collapse: collapse;
    width: 100%;
}


/* ===== SAGAA – Fiche joueur : bloc Profile / Profil ===== */

.sagaa-dl {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 40px;
    row-gap: 4px;
    margin: 0;
    padding: 0;
}

/* Chaque ligne */
.sagaa-dl > div {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 2px 0;
}

/* Label (anglais) */
.sagaa-dl dt {
    margin: 0;
    font-weight: 600;           /* gras pour l’anglais */
    font-size: 0.95rem;
    color: #111827;             /* gris très foncé */
}

/* Partie française entre parenthèses : PAS gras */
.sagaa-dl dt em {
    font-weight: 400 !important; /* enlève le gras */
    font-style: italic;
    color: #6B7280;              /* gris moyen */
}

/* Au cas où il y ait d’autres balises dans le em */
.sagaa-dl dt em * {
    font-weight: 400 !important;
}

/* Valeur */
.sagaa-dl dd {
    margin: 0;
    font-weight: 400;
    font-size: 0.95rem;
    color: #111827;
    text-align: right;
}

/* Légère séparation visuelle entre les lignes */
.sagaa-dl > div:not(:last-child) {
    border-bottom: 1px solid rgba(15, 23, 42, 0.04);
}

/* Version mobile : une seule colonne */
@media (max-width: 768px) {
    .sagaa-dl {
        grid-template-columns: 1fr;
        row-gap: 2px;
    }

    .sagaa-dl > div {
        padding: 3px 0;
    }

    .sagaa-dl dd {
        text-align: left;
        margin-top: 2px;
    }
}