/**
 * Terrino — Dashboard membre : CSS Responsive Desktop
 * Fichier : wp-content/themes/theme-terrino/assets/css/member-dashboard-responsive.css
 *
 * STRATÉGIE :
 *  - Base = mobile (< 768px) : bottom nav + colonne unique + contenu pleine largeur
 *  - Tablette (768px–1024px) : sidebar compacte icônes + contenu élargi
 *  - Desktop (> 1024px) : sidebar complète avec labels + contenu en grille 2 colonnes
 *
 * À enqueuer dans functions.php après member-dashboard.css
 */

/* ============================================================
   1. VARIABLES COMPLÉMENTAIRES
   ============================================================ */
:root {
  --sidebar-width:        220px;
  --sidebar-width-tablet: 64px;
  --topbar-height:        60px;
  --sidebar-bg:           #ffffff;
  --sidebar-border:       var(--club-border, #f0f0f0);
  --sidebar-hover:        var(--club-bg-secondary, #f8f8f8);
  --sidebar-active-bg:    var(--club-primary-light, #e6f7ee);
  --sidebar-active-color: var(--club-primary, #1a7a42);
  --sidebar-text:         var(--club-text, #111111);
  --sidebar-muted:        var(--club-text-secondary, #aaaaaa);
}

/* ============================================================
   2. STRUCTURE GÉNÉRALE — MOBILE FIRST (base)
   ============================================================ */

/* Le wrapper principal de la page membre */
.terrino-member-page {
  min-height: 100vh;
  background: var(--club-bg, #ffffff);
  font-family: var(--font-body, 'DM Sans', sans-serif);
}

/* Sur mobile : pas de sidebar, tout est en colonne */
.terrino-layout {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* Contenu principal — padding-bottom pour ne pas être masqué par la bottom nav */
.terrino-main-content {
  flex: 1;
  padding: var(--space-4, 16px) var(--space-4, 16px);
  padding-bottom: calc(56px + var(--space-4, 16px)); /* 56px = hauteur bottom nav */
  max-width: 100%;
}

/* ============================================================
   3. HEADER CLUB — MOBILE & DESKTOP
   ============================================================ */
.terrino-club-header {
  background: var(--club-primary, #1a7a42);
  color: #ffffff;
  padding: var(--space-4, 16px) var(--space-5, 20px);
  display: flex;
  align-items: center;
  gap: var(--space-3, 12px);
  position: relative;
  overflow: hidden;
  /* Cercles décoratifs en filigrane */
}
.terrino-club-header::before,
.terrino-club-header::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  border: 1.5px solid rgba(255,255,255,0.07);
  pointer-events: none;
}
.terrino-club-header::before {
  width: 200px; height: 200px;
  right: -60px; top: -80px;
}
.terrino-club-header::after {
  width: 120px; height: 120px;
  right: 30px; bottom: -50px;
}

.terrino-club-header .club-logo {
  width: 44px; height: 44px;
  border-radius: var(--radius-full, 9999px);
  background: rgba(255,255,255,0.2);
  display: flex; align-items: center; justify-content: center;
  font-size: 16px; font-weight: 700;
  flex-shrink: 0;
}
.terrino-club-header .club-info {
  flex: 1;
  min-width: 0;
}
.terrino-club-header .club-name {
  font-family: var(--font-display, 'DM Serif Display', serif);
  font-size: var(--text-h2, 18px);
  font-weight: 400;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.terrino-club-header .user-role {
  font-size: var(--text-caption, 12px);
  opacity: 0.8;
  margin-top: 2px;
}

/* Bouton Mon espace / actions header */
.terrino-club-header .header-actions {
  display: flex;
  align-items: center;
  gap: var(--space-2, 8px);
  flex-shrink: 0;
}

/* ============================================================
   4. BOTTOM NAV — MOBILE UNIQUEMENT
   ============================================================ */
.terrino-bottom-nav {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  height: 56px;
  background: var(--club-bg, #ffffff);
  border-top: 1px solid var(--club-border, #f0f0f0);
  display: flex;
  align-items: stretch;
  z-index: 100;
  /* Safe area pour les téléphones avec encoche */
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
.terrino-bottom-nav .nav-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  text-decoration: none;
  color: var(--club-text-secondary, #aaaaaa);
  font-size: var(--text-micro, 10px);
  font-weight: 500;
  transition: color 0.15s ease, background 0.15s ease;
  border-radius: var(--radius-sm, 6px);
  margin: 4px 2px;
  min-width: 44px; /* accessibilité tactile */
}
.terrino-bottom-nav .nav-item svg {
  width: 18px; height: 18px;
  stroke: currentColor;
  stroke-width: 1.8;
  fill: none;
}
.terrino-bottom-nav .nav-item.active,
.terrino-bottom-nav .nav-item:hover {
  color: var(--club-primary, #1a7a42);
  background: var(--club-primary-light, #e6f7ee);
}

/* ============================================================
   5. SECTIONS & CARDS — BASE MOBILE
   ============================================================ */
.terrino-section {
  margin-bottom: var(--space-6, 24px);
}
.terrino-section-title {
  font-size: var(--text-label, 11px);
  font-weight: 600;
  color: var(--club-text-secondary, #aaaaaa);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: var(--space-3, 12px);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.terrino-section-title a {
  font-size: var(--text-caption, 12px);
  font-weight: 500;
  color: var(--club-primary, #1a7a42);
  text-decoration: none;
  text-transform: none;
  letter-spacing: 0;
}
.terrino-card {
  background: var(--club-bg-secondary, #f8f8f8);
  border-radius: var(--radius-lg, 14px);
  padding: 12px 14px;
  margin-bottom: var(--space-2, 8px);
  display: flex;
  align-items: center;
  gap: var(--space-3, 12px);
}

/* Vue par équipe — derniers résultats */
.equipe-resultat-row {
  font-size: var(--text-body, 14px);
  font-weight: 500;
}

/* ============================================================
   6. TABLETTE (768px – 1024px) : Sidebar icônes
   ============================================================ */
@media (min-width: 768px) {

  /* Cache la bottom nav */
  .terrino-bottom-nav {
    display: none;
  }

  /* Layout : sidebar compacte + contenu */
  .terrino-layout {
    flex-direction: row;
    align-items: stretch;
  }

  /* Sidebar icônes uniquement */
  .terrino-sidebar {
    width: var(--sidebar-width-tablet); /* 64px */
    background: var(--sidebar-bg);
    border-right: 1px solid var(--sidebar-border);
    display: flex;
    flex-direction: column;
    position: sticky;
    top: 0;
    height: 100vh;
    overflow: hidden;
    flex-shrink: 0;
    z-index: 50;
  }

  /* Mini logo / initiales club dans la sidebar */
  .terrino-sidebar .sidebar-logo {
    width: 36px; height: 36px;
    border-radius: var(--radius-full);
    background: var(--club-primary, #1a7a42);
    display: flex; align-items: center; justify-content: center;
    color: #fff;
    font-size: 13px; font-weight: 700;
    margin: 14px auto 8px;
    flex-shrink: 0;
  }

  /* Items de navigation sidebar */
  .terrino-sidebar .sidebar-nav {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: var(--space-2) var(--space-2);
    overflow-y: auto;
  }
  .terrino-sidebar .sidebar-nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    padding: 10px 4px;
    border-radius: var(--radius-md, 10px);
    text-decoration: none;
    color: var(--sidebar-muted);
    font-size: 9px;
    font-weight: 500;
    min-height: 44px;
    transition: color 0.15s, background 0.15s;
    white-space: nowrap;
    overflow: hidden;
    text-align: center;
  }
  .terrino-sidebar .sidebar-nav-item svg {
    width: 20px; height: 20px;
    stroke: currentColor; stroke-width: 1.8; fill: none;
    flex-shrink: 0;
  }
  .terrino-sidebar .sidebar-nav-item.active,
  .terrino-sidebar .sidebar-nav-item:hover {
    background: var(--sidebar-active-bg);
    color: var(--sidebar-active-color);
  }

  /* Séparateur */
  .terrino-sidebar .sidebar-divider {
    height: 1px;
    background: var(--sidebar-border);
    margin: var(--space-2) var(--space-2);
  }

  /* Profil en bas de sidebar */
  .terrino-sidebar .sidebar-user {
    padding: var(--space-3) var(--space-2);
    border-top: 1px solid var(--sidebar-border);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
  }
  .terrino-sidebar .sidebar-user .user-avatar {
    width: 32px; height: 32px;
    border-radius: var(--radius-full);
    background: var(--club-primary-light, #e6f7ee);
    color: var(--club-primary, #1a7a42);
    display: flex; align-items: center; justify-content: center;
    font-size: 11px; font-weight: 700;
  }

  /* Contenu principal — plus de padding-bottom, margin-left = sidebar */
  .terrino-main-content {
    flex: 1;
    padding: var(--space-5, 20px);
    padding-bottom: var(--space-6, 24px);
    min-width: 0;
    max-width: 100%;
  }

  /* Header s'adapte */
  .terrino-club-header {
    border-radius: 0;
  }
}

/* ============================================================
   7. DESKTOP (> 1024px) : Sidebar complète avec labels + grille 2 colonnes
   ============================================================ */
@media (min-width: 1024px) {

  /* Sidebar pleine largeur avec labels */
  .terrino-sidebar {
    width: var(--sidebar-width); /* 220px */
    overflow: visible;
  }

  /* Logo + nom du club dans la sidebar */
  .terrino-sidebar .sidebar-logo-block {
    padding: var(--space-5, 20px) var(--space-4, 16px) var(--space-4, 16px);
    display: flex;
    align-items: center;
    gap: var(--space-3, 12px);
    border-bottom: 1px solid var(--sidebar-border);
  }
  .terrino-sidebar .sidebar-logo {
    margin: 0;
    width: 36px; height: 36px;
  }
  .terrino-sidebar .sidebar-club-name {
    font-size: var(--text-h3, 15px);
    font-weight: 700;
    color: var(--sidebar-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* Items avec icône + label côte à côte */
  .terrino-sidebar .sidebar-nav {
    padding: var(--space-3) var(--space-3);
  }
  .terrino-sidebar .sidebar-nav-item {
    flex-direction: row;
    justify-content: flex-start;
    gap: var(--space-3, 12px);
    padding: 10px var(--space-3, 12px);
    font-size: var(--text-body, 14px);
    font-weight: 500;
    text-align: left;
  }
  .terrino-sidebar .sidebar-nav-item .nav-label {
    display: block;
  }

  /* Profil utilisateur en bas avec nom */
  .terrino-sidebar .sidebar-user {
    flex-direction: row;
    align-items: center;
    gap: var(--space-3, 12px);
    padding: var(--space-4, 16px);
  }
  .terrino-sidebar .sidebar-user .user-info {
    display: flex;
    flex-direction: column;
    min-width: 0;
  }
  .terrino-sidebar .sidebar-user .user-name {
    font-size: var(--text-body, 14px);
    font-weight: 600;
    color: var(--sidebar-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .terrino-sidebar .sidebar-user .user-role-label {
    font-size: var(--text-caption, 12px);
    color: var(--sidebar-muted);
  }

  /* Contenu : grille 2 colonnes sur desktop */
  .terrino-main-content {
    padding: var(--space-6, 24px) var(--space-8, 32px);
  }

  /* Le header club est masqué sur desktop (l'info est dans la sidebar) */
  .terrino-club-header.desktop-hide {
    display: none;
  }

  /* Grille principale : colonne principale + widget colonne latérale */
  .terrino-dashboard-grid {
    display: grid;
    grid-template-columns: 1fr 340px;
    gap: var(--space-6, 24px);
    align-items: start;
  }

  /* Colonne gauche : sections principales */
  .terrino-col-main {
    min-width: 0;
  }

  /* Colonne droite : widgets */
  .terrino-col-aside {
    display: flex;
    flex-direction: column;
    gap: var(--space-4, 16px);
  }

  /* Widget card sur desktop */
  .terrino-widget {
    background: var(--club-bg-secondary, #f8f8f8);
    border-radius: var(--radius-xl, 20px);
    padding: var(--space-5, 20px);
  }
  .terrino-widget-title {
    font-size: var(--text-h3, 15px);
    font-weight: 700;
    color: var(--sidebar-text);
    margin-bottom: var(--space-4, 16px);
    display: flex;
    align-items: center;
    gap: var(--space-2, 8px);
  }
  .terrino-widget-title svg {
    width: 16px; height: 16px;
    stroke: var(--club-primary); stroke-width: 2; fill: none;
  }

  /* Sur desktop, les sections du fil d'actu prennent toute la colonne */
  .terrino-section-full {
    grid-column: 1 / -1;
  }

  /* Titre de page desktop */
  .terrino-page-title {
    font-size: var(--text-h1, 22px);
    font-weight: 700;
    color: var(--sidebar-text);
    margin-bottom: var(--space-6, 24px);
    padding-bottom: var(--space-4, 16px);
    border-bottom: 1px solid var(--sidebar-border);
  }
}

/* ============================================================
   8. GRAND ÉCRAN (> 1280px) : contenu max-width centré
   ============================================================ */
@media (min-width: 1280px) {
  .terrino-main-content {
    max-width: 1200px;
  }
  .terrino-dashboard-grid {
    grid-template-columns: 1fr 380px;
  }
}

/* ============================================================
   9. AJUSTEMENTS SPÉCIFIQUES COMPOSANTS DESKTOP
   ============================================================ */

/* Badges V/N/D — restent identiques quelle que soit la taille */
.badge-win, .badge-draw, .badge-loss {
  display: inline-flex;
  align-items: center; justify-content: center;
  width: 30px; height: 30px;
  border-radius: var(--radius-sm, 6px);
  font-size: var(--text-label, 11px);
  font-weight: 700;
  flex-shrink: 0;
}
.badge-win  { background: var(--club-win-bg, #e6f7ee);  color: var(--club-win, #1a7a42); }
.badge-draw { background: var(--club-draw-bg, #f4f4f4); color: var(--club-draw, #999999); }
.badge-loss { background: var(--club-loss-bg, #fdecea); color: var(--club-loss, #d32f2f); }

/* Tableaux scrollables horizontalement sur mobile */
.terrino-table-wrapper {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: 0 -var(--space-4);
}
@media (min-width: 768px) {
  .terrino-table-wrapper {
    overflow-x: visible;
    margin: 0;
  }
}

/* Cards dans la grille desktop — légèrement agrandies */
@media (min-width: 1024px) {
  .terrino-card {
    padding: 14px 18px;
  }
  .terrino-card:hover {
    background: #f0f0f0;
    transition: background 0.15s ease;
  }
}

/* Masquer les éléments mobiles sur desktop et vice versa */
.mobile-only { display: block; }
.desktop-only { display: none; }

@media (min-width: 768px) {
  .mobile-only { display: none !important; }
  .desktop-only { display: block; }
}

/* ============================================================
   10. CLASSES TD-* — Sidebar, layout et widgets du dashboard
   ============================================================ */

/* ── Structure de base ── */
.terrino-app {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background: var(--club-bg, #ffffff);
}

/* ── Sidebar — masquée par défaut sur mobile ── */
.td-sidebar {
  display: none;
}

/* ── Wrapper contenu ── */
.td-content-wrapper {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

/* ── Header mobile ── */
/* v2.6.0 §3c : remplacé par le bandeau supérieur commun (.tb-topbar), présent
   sur toutes les pages. On masque l'ancien header mobile pour éviter le doublon. */
.td-header-mobile {
  display: none;
}

/* ── Titre desktop ── */
.td-page-title-desktop {
  display: none;
}
.td-page-h1 {
  font-size: var(--text-h1, 22px);
  font-weight: 700;
  color: var(--club-text, #111);
  padding: var(--space-6, 24px) var(--space-8, 32px) 0;
  border-bottom: 1px solid var(--club-border, #f0f0f0);
  padding-bottom: var(--space-4, 16px);
  margin-bottom: 0;
}

/* ── Grille dashboard : colonne unique sur mobile ── */
.td-dashboard-grid {
  display: flex;
  flex-direction: column;
}

/* ── Colonne aside masquée sur mobile ── */
.td-col-aside {
  display: none;
}

/* ── Main prend toute la largeur sur mobile ── */
.td-col-main {
  padding: var(--space-4, 16px);
  padding-bottom: calc(56px + var(--space-4, 16px)); /* bottom nav */
}

/* ── Widgets ── */
.td-widget {
  background: var(--club-bg-secondary, #f8f8f8);
  border-radius: var(--radius-xl, 20px);
  padding: var(--space-5, 20px);
  margin-bottom: var(--space-4, 16px);
}
.td-widget__title {
  font-size: var(--text-h3, 15px);
  font-weight: 700;
  color: var(--club-text, #111);
  margin-bottom: var(--space-4, 16px);
  display: flex;
  align-items: center;
  gap: var(--space-2, 8px);
}

/* ── Liens rapides ── */
.td-quicklink {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 12px;
  border-radius: var(--radius-md, 10px);
  background: var(--club-bg, #fff);
  color: var(--club-text, #111);
  font-size: var(--text-body, 14px);
  font-weight: 500;
  text-decoration: none;
  transition: background 0.15s ease;
}
.td-quicklink:hover {
  background: var(--club-primary-light, #e6f7ee);
  color: var(--club-primary, #1a7a42);
}

/* ── Alerte dans le wrapper ── */
.td-content-wrapper .terrino-alert {
  margin: 0;
  border-radius: 0;
}

/* ============================================================
   11. TABLETTE (768px) — Sidebar icônes + layout horizontal
   ============================================================ */
@media (min-width: 768px) {

  /* Structure (v2.6.0 §3c) : bandeau en tête (pleine largeur), puis une rangée
     flex sidebar + contenu. Flex plutôt que grid : robuste face aux wrappers du
     thème parent. */
  .terrino-app {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    min-height: 100vh;
  }
  .td-row {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    flex: 1;
    min-height: 0;
  }

  /* Bottom nav masquée */
  .terrino-bottom-nav {
    display: none !important;
  }

  /* Sidebar visible — mode icônes (64px). Figée sous le bandeau : le contenu
     défile, la sidebar reste. --tb-h = hauteur du bandeau. */
  .td-sidebar {
    --tb-h: 62px;
    display: flex;
    flex-direction: column;
    width: 64px;
    /* +32px si la barre d'admin WP est présente (voir règle .admin-bar plus bas) */
    flex-shrink: 0;
    background: var(--club-bg, #fff);
    border-right: 1px solid var(--club-border, #f0f0f0);
    position: sticky;
    top: 0;
    height: 100vh;
    overflow: hidden; /* la nav scrolle en interne via __nav */
    z-index: 50;
  }
  .admin-bar .td-sidebar { top: 32px; height: calc(100vh - 32px); }

  /* Bloc brand — seulement l'initiale sur tablette */
  .td-sidebar__brand {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 14px 0 8px;
    border-bottom: 1px solid var(--club-border, #f0f0f0);
    flex-shrink: 0;
  }
  .td-sidebar__club-name { display: none; }
  .td-sidebar__logo-initials,
  .td-sidebar__logo-img {
    width: 36px;
    height: 36px;
    border-radius: 9999px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    object-fit: cover;
  }

  /* Nav sidebar — icônes uniquement */
  .td-sidebar__nav {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 8px 6px;
    overflow-y: auto;
  }
  .td-sidebar__nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    padding: 8px 4px;
    border-radius: var(--radius-md, 10px);
    color: var(--club-text-secondary, #aaa);
    text-decoration: none;
    font-size: 9px;
    font-weight: 500;
    min-height: 44px;
    transition: color 0.15s, background 0.15s;
    white-space: nowrap;
    overflow: hidden;
  }
  .td-sidebar__nav-item--active,
  .td-sidebar__nav-item:hover {
    background: var(--club-primary-light, #e6f7ee);
    color: var(--club-primary, #1a7a42);
  }
  .td-sidebar__nav-label { display: none; } /* labels masqués sur tablette */

  /* Bloc bas (profil + déconnexion) — épinglé, ne rétrécit jamais */
  .td-sidebar__footer {
    flex-shrink: 0;
    border-top: 1px solid var(--club-border, #f0f0f0);
  }

  /* Profil — avatar seul sur tablette */
  .td-sidebar__user {
    padding: 10px 0 6px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
  }
  .td-sidebar__user-avatar {
    width: 32px;
    height: 32px;
    border-radius: 9999px;
    background: var(--club-primary-light, #e6f7ee);
    color: var(--club-primary, #1a7a42);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 700;
  }
  .td-sidebar__user-info { display: none; }

  /* Déconnexion — icône seule sur tablette */
  .td-sidebar__logout {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    padding: 8px 0 10px;
    color: var(--club-text-secondary, #999);
    text-decoration: none;
    transition: color 0.15s;
  }
  .td-sidebar__logout:hover { color: #d32f2f; }
  .td-sidebar__logout-label { display: none; }

  /* Header mobile masqué */
  .td-header-mobile { display: none !important; }

  /* Main sans padding-bottom bottom nav */
  .td-col-main {
    padding: var(--space-5, 20px);
    padding-bottom: var(--space-6, 24px);
  }

  /* Alerte reprend le padding */
  .td-content-wrapper .terrino-alert {
    margin: 0 var(--space-5) var(--space-4);
    border-radius: var(--radius-md, 10px);
  }
}

/* ============================================================
   12. DESKTOP (1024px) — Sidebar complète + grille 2 colonnes
   ============================================================ */
@media (min-width: 1024px) {

  /* Sidebar pleine largeur — overflow hidden, la nav scrolle via flex:1 + overflow-y:auto */
  .td-sidebar {
    width: 220px;
    overflow: hidden;
  }
  /* La nav prend tout l'espace dispo et scrolle si nécessaire */
  .td-sidebar .td-sidebar__nav {
    flex: 1;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--club-border, #f0f0f0) transparent;
  }
  .td-sidebar .td-sidebar__nav::-webkit-scrollbar { width: 3px; }
  .td-sidebar .td-sidebar__nav::-webkit-scrollbar-track { background: transparent; }
  .td-sidebar .td-sidebar__nav::-webkit-scrollbar-thumb {
    background: var(--club-border, #f0f0f0);
    border-radius: 3px;
  }
  /* Brand et bloc bas ne rétrécissent jamais */
  .td-sidebar .td-sidebar__brand  { flex-shrink: 0; }
  .td-sidebar .td-sidebar__footer { flex-shrink: 0; }

  /* Brand avec nom du club */
  .td-sidebar__brand {
    justify-content: flex-start;
    padding: 16px 16px 14px;
    gap: 10px;
  }
  .td-sidebar__club-name {
    display: block;
    font-size: var(--text-h3, 15px);
    font-weight: 700;
    color: var(--club-text, #111);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* Nav avec labels */
  .td-sidebar__nav {
    padding: 10px 10px;
  }
  .td-sidebar__nav-item {
    flex-direction: row;
    justify-content: flex-start;
    gap: 10px;
    padding: 9px 12px;
    font-size: var(--text-body, 14px);
    min-height: 40px;
    text-align: left;
  }
  .td-sidebar__nav-label { display: block; }

  /* Bloc bas : profil + déconnexion empilés, épinglés */
  .td-sidebar__footer {
    border-top: 1px solid var(--club-border, #f0f0f0);
  }

  /* Profil complet en bas */
  .td-sidebar__user {
    flex-direction: row;
    padding: 12px 14px 6px;
    gap: 10px;
    align-items: center;
    border-top: 0;
  }
  .td-sidebar__user-info {
    display: flex;
    flex-direction: column;
    min-width: 0;
  }
  .td-sidebar__user-name {
    font-size: var(--text-body, 14px);
    font-weight: 600;
    color: var(--club-text, #111);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .td-sidebar__user-role {
    font-size: var(--text-caption, 12px);
    color: var(--club-text-secondary, #aaa);
  }

  /* Déconnexion — ligne complète avec libellé */
  .td-sidebar__logout {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    padding: 8px 16px 12px;
    color: var(--club-text-secondary, #999);
    text-decoration: none;
    font-size: var(--text-caption, 12.5px);
    font-weight: 600;
    transition: color 0.15s;
  }
  .td-sidebar__logout:hover { color: #d32f2f; }
  .td-sidebar__logout-label { display: block; }

  /* Titre de page desktop visible */
  .td-page-title-desktop { display: block; }

  /* Grille 2 colonnes */
  .td-dashboard-grid {
    flex-direction: row;
    align-items: start;
    gap: var(--space-6, 24px);
    padding: 0 var(--space-8, 32px) var(--space-8, 32px);
  }

  /* Colonne principale */
  .td-col-main {
    flex: 1;
    min-width: 0;
    padding: 0;
    padding-bottom: 0;
  }

  /* Colonne aside visible */
  .td-col-aside {
    display: flex;
    flex-direction: column;
    width: 300px;
    flex-shrink: 0;
  }

  /* Alerte dans la grille */
  .td-content-wrapper .terrino-alert {
    margin: var(--space-4) var(--space-8);
    border-radius: var(--radius-md, 10px);
  }
}

/* ============================================================
   13. GRAND ÉCRAN (1280px) — aside plus large
   ============================================================ */
@media (min-width: 1280px) {
  .td-col-aside {
    width: 340px;
  }
  .td-dashboard-grid {
    padding: 0 var(--space-8, 32px) var(--space-8, 32px);
  }
}

/* ============================================================
   14. NEUTRALISATION GENERATEPRESS — desktop uniquement
   Fix : GP impose max-width + margin:auto sur ses wrappers,
   ce qui écrase la grille entre sidebar et aside.
   ============================================================ */

/* On cible uniquement les pages du dashboard Terrino
   grâce au body_class 'terrino-member-page' déjà ajouté */

/* ── Neutraliser le conteneur GP sur toutes les pages membres ── */
.terrino-member-page .site,
.terrino-member-page #page,
.terrino-member-page .site-content,
.terrino-member-page #content,
.terrino-member-page .content-area,
.terrino-member-page #primary,
.terrino-member-page .entry-content,
.terrino-member-page .inside-page-hero,
.terrino-member-page .page-hero-container {
  max-width: none !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  float: none !important;
}

/* ── Le terrino-app prend 100% de la largeur viewport ── */
.terrino-member-page .terrino-app {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
}

/* ── Sur tablette/desktop : layout horizontal pleine largeur ── */
@media (min-width: 768px) {

  /* Sidebar sticky, sous le bandeau supérieur commun (v2.6.0 §3c). */
  .terrino-member-page .td-sidebar {
    position: sticky;
    top: 0;
    height: 100vh;
    align-self: flex-start;
    overflow: hidden;
  }
  .admin-bar.terrino-member-page .td-sidebar,
  .admin-bar .terrino-member-page .td-sidebar {
    top: 32px;
    height: calc(100vh - 32px);
  }

  /* Le content-wrapper prend tout l'espace restant */
  .terrino-member-page .td-content-wrapper {
    flex: 1;
    min-width: 0;
    overflow: hidden; /* évite le débordement horizontal */
  }

  /* Neutraliser le padding interne que GP peut ajouter */
  .terrino-member-page .site-main,
  .terrino-member-page main.site-main {
    padding: 0 !important;
    margin: 0 !important;
    max-width: none !important;
  }
}

/* ── Desktop : grille pleine largeur ── */
@media (min-width: 1024px) {

  /* Forcer la grille à utiliser tout l'espace disponible */
  .terrino-member-page .td-dashboard-grid {
    width: 100%;
    box-sizing: border-box;
  }

  /* La colonne principale ne doit jamais avoir de min-width fixe
     qui casserait le flex layout */
  .terrino-member-page .td-col-main {
    flex: 1 1 0;
    min-width: 0;
  }

  /* L'aside ne rétrécit pas */
  .terrino-member-page .td-col-aside {
    flex-shrink: 0;
  }

  /* Titre de page : padding aligné avec la grille */
  .terrino-member-page .td-page-h1 {
    padding-left: var(--space-8, 32px);
    padding-right: var(--space-8, 32px);
    margin-top: var(--space-5, 20px);
  }
}

/* ============================================================
   15. PAGE ÉQUIPES — Composants td-teams-*
   ============================================================ */

/* ── Onglets équipes ── */
.td-teams-tabs {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  padding: var(--space-4, 16px) var(--space-4, 16px) 0;
  overflow-x: auto;
  scrollbar-width: none;
}
.td-teams-tabs::-webkit-scrollbar { display: none; }

.td-teams-tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border-radius: var(--radius-full, 9999px);
  font-size: var(--text-body, 14px);
  font-weight: 500;
  color: var(--club-text-secondary, #aaaaaa);
  background: var(--club-bg-secondary, #f8f8f8);
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.15s, color 0.15s;
  flex-shrink: 0;
}
.td-teams-tab:hover {
  background: var(--club-primary-light, #e6f7ee);
  color: var(--club-primary, #1a7a42);
}
.td-teams-tab--active {
  background: var(--club-primary, #1a7a42);
  color: #ffffff;
}
.td-teams-tab--unaffiliated { border: 1px dashed #ddd; }
.td-teams-tab--unaffiliated.td-teams-tab--active { border-color: var(--club-primary); }

.td-teams-tab__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 700;
  background: rgba(0,0,0,0.1);
  color: inherit;
}
.td-teams-tab--active .td-teams-tab__count { background: rgba(255,255,255,0.25); }
.td-teams-tab__count--warn { background: #fdecea; color: #d32f2f; }

/* ── Header section ── */
.td-teams-header {
  display: flex;
  align-items: flex-start;
  flex-direction: column;
  gap: var(--space-3, 12px);
  padding: var(--space-4, 16px) var(--space-4, 16px) var(--space-2, 8px);
}
.td-teams-header__left {
  display: flex;
  align-items: center;
  gap: var(--space-2, 8px);
  flex-wrap: wrap;
}
.td-teams-header__category {
  font-size: var(--text-caption, 12px);
  color: var(--club-text-secondary, #aaa);
  font-weight: 400;
  background: var(--club-bg-secondary, #f8f8f8);
  padding: 2px 8px;
  border-radius: 4px;
}
.td-teams-header__count {
  font-size: var(--text-caption, 12px);
  color: var(--club-text-secondary, #aaa);
  font-weight: 500;
}
.td-teams-header__right {
  display: flex;
  align-items: center;
  gap: var(--space-2, 8px);
  flex-wrap: wrap;
  width: 100%;
}

/* ── Barre de recherche ── */
.td-teams-search { flex: 1; min-width: 140px; }
.td-teams-search__input-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--club-bg-secondary, #f8f8f8);
  border-radius: var(--radius-md, 10px);
  padding: 8px 12px;
  border: 1px solid var(--club-border, #f0f0f0);
  transition: border-color 0.15s;
}
.td-teams-search__input-wrap:focus-within {
  border-color: var(--club-primary, #1a7a42);
  background: #fff;
}
.td-teams-search__input {
  border: none;
  background: transparent;
  font-size: var(--text-body, 14px);
  color: var(--club-text, #111);
  outline: none;
  width: 100%;
}
.td-teams-search__input::placeholder { color: var(--club-text-secondary, #aaa); }

/* ── Boutons de tri ── */
.td-teams-sort {
  display: flex;
  border-radius: var(--radius-md, 10px);
  overflow: hidden;
  border: 1px solid var(--club-border, #f0f0f0);
  flex-shrink: 0;
}
.td-teams-sort__btn {
  padding: 7px 12px;
  font-size: var(--text-caption, 12px);
  font-weight: 500;
  color: var(--club-text-secondary, #aaa);
  background: #fff;
  text-decoration: none;
  border-right: 1px solid var(--club-border, #f0f0f0);
  transition: background 0.15s, color 0.15s;
}
.td-teams-sort__btn:last-child { border-right: none; }
.td-teams-sort__btn:hover,
.td-teams-sort__btn--active {
  background: var(--club-primary-light, #e6f7ee);
  color: var(--club-primary, #1a7a42);
}

/* ── Alerte licenciés sans équipe ── */
.td-teams-alert {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: var(--space-3, 12px) var(--space-4, 16px);
  padding: 10px 14px;
  background: #fefce8;
  border: 1px solid #fde047;
  border-radius: var(--radius-md, 10px);
  font-size: var(--text-caption, 12px);
  color: #854d0e;
}

/* ── Grille de cartes joueur ── */
.td-players-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: var(--space-3, 12px);
  padding: var(--space-3, 12px) var(--space-4, 16px) var(--space-5, 20px);
}

/* ── Carte joueur ── */
.td-player-card {
  position: relative;
  background: var(--club-bg-secondary, #f8f8f8);
  border-radius: var(--radius-lg, 14px);
  padding: var(--space-4, 16px) var(--space-3, 12px) var(--space-3, 12px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2, 8px);
  text-align: center;
  transition: transform 0.15s, box-shadow 0.15s;
}
.td-player-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(0,0,0,0.08);
}
.td-player-card--me {
  background: var(--club-primary-light, #e6f7ee);
  border: 1.5px solid var(--club-primary, #1a7a42);
}
.td-player-card--no-team {
  opacity: 0.75;
  background: #fafafa;
  border: 1px dashed #ddd;
}

.td-player-card__jersey {
  position: absolute;
  top: 8px;
  right: 8px;
  font-size: 10px;
  font-weight: 700;
  color: var(--club-text-secondary, #aaa);
  background: rgba(0,0,0,0.06);
  border-radius: 4px;
  padding: 1px 5px;
}

.td-player-card__avatar {
  width: 56px;
  height: 56px;
  border-radius: 9999px;
  overflow: hidden;
  background: var(--club-primary, #1a7a42);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.td-player-card__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.td-player-card__avatar span {
  font-size: 16px;
  font-weight: 700;
  color: #fff;
}

.td-player-card__info {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}
.td-player-card__name {
  font-size: var(--text-body, 14px);
  font-weight: 600;
  color: var(--club-text, #111);
  line-height: 1.2;
}
.td-player-card__pos {
  font-size: var(--text-caption, 12px);
  color: var(--club-text-secondary, #aaa);
}

/* ── Badge "Moi" ── */
.td-teams-badge-me {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  background: var(--club-primary, #1a7a42);
  color: #fff;
  padding: 1px 6px;
  border-radius: 4px;
  vertical-align: middle;
  margin-left: 4px;
}

/* ── Numéro de maillot dans tableau ── */
.td-teams-jersey {
  font-size: var(--text-caption, 12px);
  font-weight: 700;
  color: var(--club-text-secondary, #aaa);
}

/* ── Badge poste ── */
.td-teams-pos {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 4px;
}
.td-teams-pos--gardien   { background: #fff3e0; color: #e65100; }
.td-teams-pos--défenseur { background: #e3f2fd; color: #1565c0; }
.td-teams-pos--milieu    { background: #f3e5f5; color: #6a1b9a; }
.td-teams-pos--attaquant { background: #fce4ec; color: #ad1457; }
.td-teams-pos--—         { background: #f5f5f5; color: #aaa; }

/* ── Tableau teams (coach/dirigeant) ── */
.td-teams-table .td-sta-player-cell {
  display: flex;
  align-items: center;
  gap: 10px;
}
.td-teams-tr--me td { background: var(--club-primary-light, #e6f7ee); }

/* ── Desktop : header en ligne ── */
@media (min-width: 768px) {
  .td-teams-header {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-5, 20px) var(--space-5, 20px) var(--space-3, 12px);
  }
  .td-teams-header__right {
    width: auto;
    justify-content: flex-end;
    flex-wrap: nowrap;
  }
  .td-teams-tabs {
    padding: var(--space-5, 20px) var(--space-5, 20px) 0;
  }
  .td-players-grid {
    padding: var(--space-3, 12px) var(--space-5, 20px) var(--space-6, 24px);
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  }
}

@media (min-width: 1024px) {
  .td-players-grid {
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  }
  .td-teams-tabs {
    padding: var(--space-6, 24px) 0 0;
  }
  .td-teams-header {
    padding: var(--space-5, 20px) 0 var(--space-3, 12px);
  }
  .td-sta-table-wrap {
    padding: 0;
  }
}