/* ════════════════════════════════════════════════════════════════
   IT'S RUGBY — PRESIDENT PAGE CSS
   Template-specific styles for the president page
   ════════════════════════════════════════════════════════════════ */

/* ── Grille des KPIs ──
   Le nombre de colonnes dépendait du type de président et était posé en style
   inline par le JS (portage SSR du 19/08/2026). Il passe par une classe : pas
   de style inline, et la règle reste sous les media queries ci-dessous, qui
   continuent de retomber à 3 puis 2 colonnes. */
.stat-kpi-grid--3 { grid-template-columns:repeat(3,1fr); }
.stat-kpi-grid--4 { grid-template-columns:repeat(4,1fr); }

/* ── Blocs palmarès / mandats : affichés par PHP, plus par le JS ── */
.pres-block { margin-top:20px; }

/* ── President-specific: Responsive overrides ── */
@media(max-width:1024px){
  .stat-kpi-grid { grid-template-columns:repeat(3,1fr); }
}
@media(max-width:768px){
  body { overflow-x:hidden; }
  .container { padding-left:14px; padding-right:14px; }
  .stat-kpi-grid { grid-template-columns:repeat(2,1fr); }
  .stat-kpi { padding:10px; }
  .stat-kpi-val { font-size:22px; }
  .stat-kpi-lbl { font-size:9px; }
  .data-table { min-width:480px; font-size:11px; }
  .data-table th { padding:8px 10px; font-size:10px; }
  .data-table td { padding:8px 10px; }
}



/* ── Demo type switcher ── */
.pres-type-switcher { position:fixed; bottom:60px; right:24px; z-index:999; display:flex; gap:4px; }
.pres-type-switcher button { font-size:9px; font-weight:800; letter-spacing:0; text-transform:none; padding:6px 12px; cursor:pointer; background:var(--white); color:var(--teal); border:1px solid var(--teal); font-family:var(--sans); }
.pres-type-switcher button.active { background:var(--teal); color:#fff; }


/* ── Carriere multi-mandats (CPT its_president regroupe par person_key) ──── */
.pres-carriere-table { width:100%; border-collapse:collapse; background:var(--vanilla); }
.pres-carriere-table th { font-size:10px; font-weight:800; letter-spacing:0; text-transform:none; color:var(--muted); padding:10px 12px; text-align:left; background:var(--vanilla); border-bottom:1px solid var(--border); }
.pres-carriere-table td { padding:12px; border-bottom:1px solid var(--border); font-size:13px; color:var(--teal); vertical-align:middle; }
.pres-carriere-table tr:last-child td { border-bottom:none; }
.pres-carriere-self td { background:var(--sage-lt); font-weight:600; }
.pres-carriere-type { display:inline-block; font-size:10px; font-weight:800; letter-spacing:0; text-transform:none; padding:3px 9px; border:1px solid var(--border); color:var(--teal); background:var(--white); }
.pres-carriere-type--federation { border-color:var(--teal); color:var(--vanilla); background:var(--teal); }
.pres-carriere-type--ligue      { border-color:var(--teal); color:var(--teal); background:var(--vanilla); }
.pres-carriere-type--comite     { border-color:var(--muted); color:var(--muted); background:var(--white); }
.pres-carriere-type--club       { border-color:rgba(28,61,52,.4); color:var(--teal); background:var(--white); } /* plus de vert vif (règle teal + vanilla) */
.pres-carriere-badge { display:inline-block; font-size:10px; font-weight:800; letter-spacing:0; text-transform:none; padding:3px 9px; border:1px solid var(--border); }
.pres-carriere-badge--current { color:var(--teal); background:var(--sage-lt); border-color:var(--teal); }
.pres-carriere-badge--past    { color:var(--muted); background:var(--white); border-color:var(--border); }
.its-section-help { font-size:12px; color:var(--muted); margin:0 0 12px; }
@media(max-width:768px){
  /* Mobile : chaque mandat en carte (règles .pres-carriere-table de itsrugby-common) ; plus de largeur
     minimale ni de padding de cellule qui faisaient se chevaucher les éléments (13/10). */
  .pres-carriere-table { min-width:0; font-size:11px; }
  .pres-carriere-table td { padding:0; }
  .pres-carriere-table tr { padding:12px 10px; border-bottom:1px solid var(--border); }
  .pres-carriere-self { background:var(--sage-lt); }
  .pres-carriere-self td { background:none; }
}


/* ≤680 px : .data-table passe en liste de lignes (itsrugby-common.css). Le
   min-width:480px posé plus haut pour la version tableau (≤768) forçait alors des
   lignes de 480 px dans un écran de 360 → défilement latéral, chiffres coupés. */
@media (max-width:680px){
  .data-table:not(.data-table--compact) { min-width:0; }
}