/* ==========================================================================
   PadHub — Charte graphique « Chalk »
   Source unique de vérité. Enregistré par padhub-core sous le handle
   `padhub-core-tokens`. Tout autre plugin le déclare en dépendance et
   n'écrit AUCUNE couleur, taille ou rayon en dur.

   Direction validée le 28.08.2026.
   Fond craie · noir dense · lime #c1ff72 en unique couleur d'action.
   Typo : Archivo (display + corps) + Instrument Serif italique (éditorial).

   Sommaire
     1. Polices
     2. Tokens
     3. Surface inversée (Mode TV / affichage club)
     4. Base
     5. Typographie
     6. Primitives
     7. Utilitaires
   ========================================================================== */

/* 1. Polices ------------------------------------------------------------- */
/* Archivo & Instrument Serif — SIL Open Font License, auto-hébergées.
   Chemins relatifs à assets/css/ dans padhub-core.                          */

@font-face {
  font-family: 'Archivo';
  src: url('../fonts/archivo-latin.woff2') format('woff2');
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Archivo';
  src: url('../fonts/archivo-latin-ext.woff2') format('woff2');
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
                 U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
                 U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Instrument Serif';
  src: url('../fonts/instrument-serif-latin.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Instrument Serif';
  src: url('../fonts/instrument-serif-italic-latin.woff2') format('woff2');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

/* 2. Tokens -------------------------------------------------------------- */

:root,
.padhub {
  /* --- Marque ------------------------------------------------------------
     #c1ff72 est le vert relevé sur PADHUB_LOGO.png. C'est la référence.
     (L'ancien #ccff00 de padhub.css était une approximation erronée.)      */
  --padhub-accent:        #c1ff72;
  --padhub-accent-2:      #b1f25c;   /* survol / état actif                 */
  --padhub-accent-ink:    #14140f;   /* texte posé SUR le lime              */
  --padhub-accent-text:   #3f6212;   /* le lime assombri, lisible en texte  */

  /* --- Encre et fonds --------------------------------------------------- */
  --padhub-ink:           #14140f;   /* texte principal                     */
  --padhub-ink-2:         #3a382f;   /* texte secondaire                    */
  --padhub-muted:         #6f6c60;   /* texte tertiaire, labels             */
  --padhub-faint:         #8f8b7d;   /* labels mono, placeholders           */

  --padhub-bg:            #f2efe7;   /* fond de page (craie)                */
  --padhub-bg-2:          #e9e5da;   /* fond alterné, zones creuses         */
  --padhub-surface:       #fbfaf6;   /* cartes, panneaux                    */
  --padhub-surface-2:     #ffffff;   /* survol de carte, champs             */

  --padhub-line:          #ddd7c9;   /* filet standard                      */
  --padhub-line-2:        #cfc9ba;   /* filet appuyé                        */
  --padhub-line-ink:      #14140f;   /* filet structurant (cartes clés)     */

  /* --- Sémantique ------------------------------------------------------- */
  --padhub-pos:           #3f6212;   /* gain, victoire, différence positive */
  --padhub-neg:           #9f1239;   /* perte, différence négative          */
  --padhub-warn:          #92400e;   /* alerte, dernière place              */
  --padhub-info:          #1e40af;   /* information neutre                  */

  /* --- Paliers de tournoi -----------------------------------------------
     Le palier est une information hiérarchique : la valeur monte, le poids
     visuel monte. P100 porte le lime (le palier pivot du padel amateur).  */
  --padhub-p25-bg:        transparent;
  --padhub-p25-ink:       #4a4740;
  --padhub-p25-line:      #cfc9ba;

  --padhub-p50-bg:        transparent;
  --padhub-p50-ink:       #14140f;
  --padhub-p50-line:      #14140f;

  --padhub-p100-bg:       #c1ff72;
  --padhub-p100-ink:      #14140f;
  --padhub-p100-line:     #14140f;

  --padhub-p250-bg:       #14140f;
  --padhub-p250-ink:      #fbfaf6;
  --padhub-p250-line:     #14140f;

  --padhub-p500-bg:       #14140f;
  --padhub-p500-ink:      #c1ff72;
  --padhub-p500-line:     #14140f;

  /* --- Statuts -----------------------------------------------------------
     Tokens dédiés : la pastille de statut doit rester lisible même sur une
     surface inversée, où --padhub-ink devient clair.                       */
  --padhub-status-bg:     #14140f;
  --padhub-status-ink:    #c1ff72;

  /* --- Podium ------------------------------------------------------------ */
  --padhub-gold:          #a97b12;
  --padhub-silver:        #6f6c60;
  --padhub-bronze:        #8a5524;

  /* --- Typographie ------------------------------------------------------- */
  --padhub-font-display:  'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --padhub-font-body:     'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --padhub-font-editorial:'Instrument Serif', 'Iowan Old Style', Georgia, serif;
  --padhub-font-mono:     ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  --padhub-text-xs:       11px;
  --padhub-text-sm:       13px;
  --padhub-text-base:     14.5px;
  --padhub-text-md:       16px;
  --padhub-text-lg:       21px;
  --padhub-text-xl:       28px;
  --padhub-text-2xl:      34px;
  --padhub-text-3xl:      clamp(2.4rem, 5.4vw, 4.6rem);

  --padhub-leading-tight: 1.08;
  --padhub-leading-snug:  1.25;
  --padhub-leading:       1.6;

  --padhub-track-display: -0.04em;  /* Archivo 900 a besoin d'être resserré */
  --padhub-track-label:   0.14em;

  /* --- Espacement (échelle de 4) ----------------------------------------- */
  --padhub-space-1:       4px;
  --padhub-space-2:       8px;
  --padhub-space-3:       12px;
  --padhub-space-4:       16px;
  --padhub-space-5:       20px;
  --padhub-space-6:       24px;
  --padhub-space-8:       32px;
  --padhub-space-10:      40px;
  --padhub-space-14:      56px;

  /* --- Formes ------------------------------------------------------------
     Chalk est anguleux : rayons courts, filets nets, ombre portée dure.    */
  --padhub-radius:        4px;
  --padhub-radius-sm:     3px;
  --padhub-radius-pill:   999px;
  --padhub-border:        1px;
  --padhub-border-strong: 1.5px;

  --padhub-shadow:        4px 4px 0 rgba(20, 20, 15, .10);
  --padhub-shadow-sm:     2px 2px 0 rgba(20, 20, 15, .08);
  --padhub-shadow-focus:  0 0 0 3px rgba(193, 255, 114, .55);

  /* --- Contrôles ---------------------------------------------------------
     44px minimum : cible tactile utilisable au bord d'un terrain.          */
  --padhub-control-h:     44px;
  --padhub-control-h-sm:  36px;

  /* --- Mouvement ---------------------------------------------------------- */
  --padhub-ease:          cubic-bezier(.2, .7, .3, 1);
  --padhub-dur:           160ms;

  /* --- Profondeur --------------------------------------------------------- */
  --padhub-z-sticky:      100;
  --padhub-z-overlay:     900;
  --padhub-z-modal:       1000;
}

/* 3. Surface inversée ------------------------------------------------------
   Chalk est une charte claire. Le Mode TV, lui, est lu à cinq mètres sur un
   écran de club : le fond sombre y est objectivement meilleur. Ce n'est pas
   une seconde charte, c'est UNE SURFACE de la même charte — on ne redéfinit
   que les valeurs, jamais les noms. Poser .padhub-stage sur le conteneur.  */

.padhub-stage {
  --padhub-ink:           #fbfaf6;
  --padhub-ink-2:         #d7d3c6;
  --padhub-muted:         #8f8b7d;
  --padhub-faint:         #6f6c60;

  --padhub-bg:            #14140f;
  --padhub-bg-2:          #1c1c15;
  --padhub-surface:       #1c1c15;
  --padhub-surface-2:     #24241b;

  --padhub-line:          rgba(251, 250, 246, .12);
  --padhub-line-2:        rgba(251, 250, 246, .20);
  --padhub-line-ink:      #c1ff72;

  --padhub-accent-text:   #c1ff72;
  --padhub-status-bg:     #0b0b08;
  --padhub-status-ink:    #c1ff72;
  --padhub-pos:           #c1ff72;
  --padhub-neg:           #ff8b8b;
  --padhub-warn:          #ffcf5c;
  --padhub-info:          #93b4ff;

  --padhub-p25-ink:       #d7d3c6;
  --padhub-p25-line:      rgba(251, 250, 246, .22);
  --padhub-p50-ink:       #fbfaf6;
  --padhub-p50-line:      rgba(251, 250, 246, .40);
  --padhub-p250-bg:       #fbfaf6;
  --padhub-p250-ink:      #14140f;
  --padhub-p250-line:     #fbfaf6;
  --padhub-p500-bg:       transparent;
  --padhub-p500-ink:      #c1ff72;
  --padhub-p500-line:     #c1ff72;

  --padhub-gold:          #e3bc57;
  --padhub-silver:        #c2beb2;
  --padhub-bronze:        #cd8f5c;

  --padhub-shadow:        none;
  --padhub-shadow-sm:     none;

  background: var(--padhub-bg);
  color: var(--padhub-ink);
}

/* 4. Base ------------------------------------------------------------------
   Tout est scopé sous .padhub pour cohabiter avec Divi sans se battre.
   Les pages applicatives servies par canvas.php posent .padhub sur <body>. */

.padhub {
  background: var(--padhub-bg);
  color: var(--padhub-ink);
  font-family: var(--padhub-font-body);
  font-size: var(--padhub-text-base);
  line-height: var(--padhub-leading);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.padhub *,
.padhub *::before,
.padhub *::after { box-sizing: border-box; }

/* `hidden` est un attribut natif, et il doit gagner. Un composant qui pose un
   `display` le contredit sans le vouloir : c'est arrivé deux fois sur /auth,
   où les trois formulaires (connexion, inscription, mot de passe oublié)
   s'affichaient ensemble parce que `.padhub-form { display: grid }` prenait le
   dessus. Le `!important` est délibéré — la feuille applicative se charge
   APRÈS celle-ci, une règle de même spécificité perdrait. */
.padhub [hidden],
.padhub-root [hidden] { display: none !important; }

.padhub a {
  color: var(--padhub-accent-text);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
  transition: color var(--padhub-dur) var(--padhub-ease);
}
.padhub a:hover { color: var(--padhub-ink); }

/* Un bouton ou un onglet peut être un <a> (lien de pagination, onglet qui
   reste utilisable sans JavaScript). Il ne doit alors rien hériter du style
   des liens — d'où ces sélecteurs, assez spécifiques pour passer devant. */
.padhub a.padhub-btn,
.padhub a.padhub-tab { text-decoration: none; }
.padhub a.padhub-btn { color: var(--padhub-ink); }
.padhub a.padhub-btn:hover { color: var(--padhub-ink); }
.padhub a.padhub-btn--primary,
.padhub a.padhub-btn--primary:hover { color: var(--padhub-accent-ink); }
.padhub a.padhub-btn--ink,
.padhub a.padhub-btn--ink:hover { color: var(--padhub-bg); }
.padhub a.padhub-btn--ghost { color: var(--padhub-muted); }
.padhub a.padhub-btn--ghost:hover { color: var(--padhub-ink); }
.padhub a.padhub-tab { color: var(--padhub-muted); }
.padhub a.padhub-tab:hover { color: var(--padhub-ink); }
.padhub a.padhub-tab[aria-selected="true"] { color: var(--padhub-ink); }

.padhub :focus-visible {
  outline: 2px solid var(--padhub-ink);
  outline-offset: 2px;
  border-radius: var(--padhub-radius-sm);
}

.padhub img { max-width: 100%; height: auto; }
.padhub hr {
  border: 0;
  border-top: var(--padhub-border) solid var(--padhub-line);
  margin: var(--padhub-space-8) 0;
}

@media (prefers-reduced-motion: reduce) {
  .padhub *,
  .padhub *::before,
  .padhub *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}

/* 5. Typographie ----------------------------------------------------------- */

.padhub-display,
.padhub h1,
.padhub h2,
.padhub h3 {
  font-family: var(--padhub-font-display);
  font-weight: 900;
  letter-spacing: var(--padhub-track-display);
  line-height: var(--padhub-leading-tight);
  text-transform: uppercase;
  text-wrap: balance;
  margin: 0;
}

.padhub h1 { font-size: var(--padhub-text-3xl); }
.padhub h2 { font-size: var(--padhub-text-2xl); }
.padhub h3 { font-size: var(--padhub-text-lg); line-height: var(--padhub-leading-snug); }

.padhub h4 {
  font-family: var(--padhub-font-display);
  font-size: var(--padhub-text-md);
  font-weight: 700;
  letter-spacing: -0.01em;
  text-transform: none;
  margin: 0;
}

.padhub p { margin: 0 0 var(--padhub-space-4); color: var(--padhub-ink-2); }
.padhub p:last-child { margin-bottom: 0; }

/* Accent éditorial. À doser : une phrase par écran, jamais un paragraphe. */
.padhub-editorial {
  font-family: var(--padhub-font-editorial);
  font-style: italic;
  font-weight: 400;
  font-size: 1.18em;
  letter-spacing: 0;
  text-transform: none;
  color: var(--padhub-ink);
}

/* Le label mono : c'est la signature « data » de la charte. Toute donnée
   chiffrée non narrative (piste, avancement, en-têtes de colonne) le porte. */
.padhub-label {
  font-family: var(--padhub-font-mono);
  font-size: 10px;
  letter-spacing: var(--padhub-track-label);
  text-transform: uppercase;
  color: var(--padhub-faint);
  display: inline-block;
}

.padhub-num {
  font-family: var(--padhub-font-display);
  font-weight: 900;
  letter-spacing: -0.045em;
  font-variant-numeric: tabular-nums;
}

.padhub-muted { color: var(--padhub-muted); }

/* Le lockup de marque. PAD en encre, HUB. en lime, le tout sur bloc noir —
   c'est la seule façon de garder le logo intact sur un fond clair.         */
.padhub-wordmark {
  display: inline-block;
  background: #14140f;
  color: #ffffff;
  font-family: var(--padhub-font-display);
  font-weight: 900;
  letter-spacing: -0.05em;
  line-height: 1;
  padding: 0.3em 0.44em;
  border-radius: var(--padhub-radius);
  text-decoration: none;
}
.padhub-wordmark b { color: var(--padhub-accent); font-weight: inherit; }

/* 6. Primitives ------------------------------------------------------------ */

/* 6.1 Boutons */
.padhub-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--padhub-space-2);
  min-height: var(--padhub-control-h);
  padding: 0 var(--padhub-space-6);
  border: var(--padhub-border-strong) solid var(--padhub-ink);
  border-radius: var(--padhub-radius-sm);
  background: transparent;
  color: var(--padhub-ink);
  font-family: var(--padhub-font-display);
  font-size: var(--padhub-text-sm);
  font-weight: 700;
  letter-spacing: 0.03em;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--padhub-dur) var(--padhub-ease),
              color var(--padhub-dur) var(--padhub-ease),
              transform var(--padhub-dur) var(--padhub-ease);
}
.padhub-btn:hover { background: var(--padhub-bg-2); color: var(--padhub-ink); }
.padhub-btn:active { transform: translateY(1px); }

.padhub-btn--primary {
  background: var(--padhub-accent);
  color: var(--padhub-accent-ink);
  font-weight: 900;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.padhub-btn--primary:hover { background: var(--padhub-accent-2); color: var(--padhub-accent-ink); }

.padhub-btn--ink { background: var(--padhub-ink); color: var(--padhub-bg); }
.padhub-btn--ink:hover { background: #000; color: var(--padhub-bg); }

.padhub-btn--ghost { border-color: transparent; color: var(--padhub-muted); }
.padhub-btn--ghost:hover { background: transparent; color: var(--padhub-ink); }

.padhub-btn--sm { min-height: var(--padhub-control-h-sm); padding: 0 var(--padhub-space-4); font-size: 12.5px; }
.padhub-btn--block { display: flex; width: 100%; }
.padhub-btn[disabled],
.padhub-btn[aria-disabled="true"] { opacity: .45; pointer-events: none; }

/* 6.2 Cartes */
.padhub-card {
  background: var(--padhub-surface);
  border: var(--padhub-border) solid var(--padhub-line);
  border-radius: var(--padhub-radius);
  padding: var(--padhub-space-5);
  display: flex;
  flex-direction: column;
  gap: var(--padhub-space-4);
}
/* Carte structurante : l'objet principal d'un écran (le tournoi, le match). */
.padhub-card--key {
  border: var(--padhub-border-strong) solid var(--padhub-line-ink);
  box-shadow: var(--padhub-shadow);
}
.padhub-card--ink { background: var(--padhub-ink); border-color: var(--padhub-ink); }
.padhub-card--ink,
.padhub-card--ink .padhub-num { color: var(--padhub-surface); }

.padhub-card__head { display: flex; align-items: center; gap: var(--padhub-space-2); flex-wrap: wrap; }
.padhub-card__foot {
  display: flex; align-items: center; gap: var(--padhub-space-3);
  border-top: var(--padhub-border) solid var(--padhub-line);
  padding-top: var(--padhub-space-4);
}
.padhub-card__spacer { flex-grow: 1; }

/* 6.3 Badges de palier */
.padhub-badge {
  display: inline-flex;
  align-items: center;
  padding: 5px 11px;
  border: var(--padhub-border-strong) solid var(--padhub-line-2);
  border-radius: var(--padhub-radius-sm);
  background: transparent;
  color: var(--padhub-ink);
  font-family: var(--padhub-font-display);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.02em;
  white-space: nowrap;
}
.padhub-badge--p25  { background: var(--padhub-p25-bg);  color: var(--padhub-p25-ink);  border-color: var(--padhub-p25-line); }
.padhub-badge--p50  { background: var(--padhub-p50-bg);  color: var(--padhub-p50-ink);  border-color: var(--padhub-p50-line); }
.padhub-badge--p100 { background: var(--padhub-p100-bg); color: var(--padhub-p100-ink); border-color: var(--padhub-p100-line); font-weight: 900; }
.padhub-badge--p250 { background: var(--padhub-p250-bg); color: var(--padhub-p250-ink); border-color: var(--padhub-p250-line); font-weight: 900; }
.padhub-badge--p500 { background: var(--padhub-p500-bg); color: var(--padhub-p500-ink); border-color: var(--padhub-p500-line); font-weight: 900; }

/* Badge neutre : genre, format, catégorie d'âge. */
.padhub-tag {
  display: inline-flex;
  align-items: center;
  padding: 5px 10px;
  border: var(--padhub-border) solid var(--padhub-line-2);
  border-radius: var(--padhub-radius-sm);
  color: var(--padhub-ink-2);
  font-size: 11.5px;
  white-space: nowrap;
}

/* 6.4 Statuts */
.padhub-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 9px;
  border-radius: var(--padhub-radius-sm);
  background: var(--padhub-status-bg);
  color: var(--padhub-status-ink);
  font-family: var(--padhub-font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  white-space: nowrap;
}
.padhub-status::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: currentColor;
}
.padhub-status--live::before { animation: padhub-pulse 1.6s var(--padhub-ease) infinite; }
.padhub-status--full    { background: var(--padhub-bg-2); color: var(--padhub-muted); }
.padhub-status--last    { background: var(--padhub-warn); color: #fff; }
.padhub-status--closed  { background: transparent; color: var(--padhub-muted); border: var(--padhub-border) solid var(--padhub-line-2); }

@keyframes padhub-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: .25; }
}

/* 6.5 Barre de progression */
.padhub-progress {
  height: 8px;
  background: var(--padhub-bg-2);
  border: var(--padhub-border) solid var(--padhub-line-2);
  overflow: hidden;
}
.padhub-progress__bar {
  height: 100%;
  background: var(--padhub-ink);
  transition: width 320ms var(--padhub-ease);
}
.padhub-progress--accent .padhub-progress__bar { background: var(--padhub-accent); }

/* 6.6 Tables (poules, classements, palmarès) */
.padhub-table { width: 100%; border-collapse: collapse; font-size: var(--padhub-text-sm); }
.padhub-table th {
  font-family: var(--padhub-font-mono);
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--padhub-faint);
  text-align: left;
  padding: 0 var(--padhub-space-2) var(--padhub-space-3);
}
.padhub-table td {
  padding: var(--padhub-space-3) var(--padhub-space-2);
  border-top: var(--padhub-border) solid var(--padhub-line);
  vertical-align: middle;
}
.padhub-table tbody tr:first-child td { border-top: var(--padhub-border-strong) solid var(--padhub-line-ink); }
.padhub-table .is-num  { text-align: right; font-family: var(--padhub-font-mono); font-size: 12.5px; font-variant-numeric: tabular-nums; }
.padhub-table .is-mid  { text-align: center; }
.padhub-table .is-rank { font-family: var(--padhub-font-display); font-weight: 900; width: 34px; }
/* Une paire éliminée passe en gris — mais sa différence garde sa couleur :
   c'est la donnée qu'on vient lire, elle ne doit pas être atténuée.        */
.padhub-table tr.is-qualified .is-rank { color: var(--padhub-ink); }
.padhub-table tr.is-out td { color: var(--padhub-muted); }
.padhub-table tbody tr td.is-pos { color: var(--padhub-pos); font-weight: 700; }
.padhub-table tbody tr td.is-neg { color: var(--padhub-neg); font-weight: 700; }

/* 6.7 Tuile statistique */
.padhub-stat { display: flex; flex-direction: column; gap: var(--padhub-space-1); }
.padhub-stat__value { font-family: var(--padhub-font-display); font-weight: 900; font-size: var(--padhub-text-xl); letter-spacing: -0.045em; line-height: 1; font-variant-numeric: tabular-nums; }
.padhub-stat__label { font-family: var(--padhub-font-mono); font-size: 10px; letter-spacing: var(--padhub-track-label); text-transform: uppercase; color: var(--padhub-faint); }

.padhub-delta {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 6px 11px;
  border-radius: var(--padhub-radius-sm);
  background: var(--padhub-accent);
  color: var(--padhub-accent-ink);
  font-family: var(--padhub-font-display);
  font-weight: 900; font-size: var(--padhub-text-sm);
  font-variant-numeric: tabular-nums;
}
.padhub-delta--down { background: transparent; border: var(--padhub-border-strong) solid var(--padhub-neg); color: var(--padhub-neg); }
.padhub-delta--flat { background: transparent; border: var(--padhub-border-strong) solid var(--padhub-line-2); color: var(--padhub-muted); }

/* 6.8 Podium */
.padhub-medal {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px;
  border-radius: 50%;
  border: var(--padhub-border-strong) solid currentColor;
  font-family: var(--padhub-font-display); font-weight: 900; font-size: 12px;
}
.padhub-medal--1 { color: var(--padhub-gold); }
.padhub-medal--2 { color: var(--padhub-silver); }
.padhub-medal--3 { color: var(--padhub-bronze); }

/* 6.9 Formulaires */
.padhub-field { display: flex; flex-direction: column; gap: 6px; }
.padhub-field > label {
  font-family: var(--padhub-font-mono);
  font-size: 10px; letter-spacing: var(--padhub-track-label);
  text-transform: uppercase; color: var(--padhub-muted);
}
.padhub-input,
.padhub-select,
.padhub-textarea {
  min-height: var(--padhub-control-h);
  padding: 0 var(--padhub-space-3);
  background: var(--padhub-surface-2);
  border: var(--padhub-border-strong) solid var(--padhub-line-2);
  border-radius: var(--padhub-radius-sm);
  color: var(--padhub-ink);
  font-family: var(--padhub-font-body);
  font-size: var(--padhub-text-base);
  width: 100%;
}
.padhub-textarea { padding: var(--padhub-space-3); min-height: 96px; line-height: var(--padhub-leading); resize: vertical; }
.padhub-input:focus,
.padhub-select:focus,
.padhub-textarea:focus { outline: none; border-color: var(--padhub-ink); box-shadow: var(--padhub-shadow-focus); }
.padhub-input::placeholder,
.padhub-textarea::placeholder { color: var(--padhub-faint); }
.padhub-field__hint { font-size: 12px; color: var(--padhub-muted); }
.padhub-field__error { font-size: 12px; color: var(--padhub-neg); font-weight: 700; }
.padhub-field.is-invalid .padhub-input { border-color: var(--padhub-neg); }

/* 6.10 Onglets */
.padhub-tabs {
  display: flex; gap: var(--padhub-space-1);
  border-bottom: var(--padhub-border-strong) solid var(--padhub-line-ink);
  overflow-x: auto;
}
.padhub-tab {
  appearance: none; background: transparent; border: 0;
  padding: var(--padhub-space-3) var(--padhub-space-4);
  margin-bottom: -1.5px;
  border-bottom: var(--padhub-border-strong) solid transparent;
  color: var(--padhub-muted);
  font-family: var(--padhub-font-display); font-size: var(--padhub-text-sm); font-weight: 700;
  white-space: nowrap; cursor: pointer;
}
.padhub-tab:hover { color: var(--padhub-ink); }
.padhub-tab[aria-selected="true"] { color: var(--padhub-ink); border-bottom-color: var(--padhub-accent); }

/* 6.11 État vide */
.padhub-empty {
  display: flex; flex-direction: column; align-items: center; gap: var(--padhub-space-3);
  padding: var(--padhub-space-14) var(--padhub-space-6);
  border: var(--padhub-border-strong) dashed var(--padhub-line-2);
  border-radius: var(--padhub-radius);
  text-align: center; color: var(--padhub-muted);
}
.padhub-empty h4 { color: var(--padhub-ink); }

/* 6.12 Messages */
.padhub-notice {
  padding: var(--padhub-space-3) var(--padhub-space-4);
  border-left: var(--padhub-border-strong) solid var(--padhub-ink);
  background: var(--padhub-bg-2);
  border-radius: var(--padhub-radius-sm);
  font-size: var(--padhub-text-sm);
  color: var(--padhub-ink-2);
}
.padhub-notice--error { border-left-color: var(--padhub-neg); color: var(--padhub-neg); font-weight: 700; }
.padhub-notice--ok    { border-left-color: var(--padhub-pos); color: var(--padhub-pos); font-weight: 700; }

/* 6.13 Chargement */
.padhub-loading {
  padding: var(--padhub-space-6) 0;
  font-family: var(--padhub-font-mono);
  font-size: 10px;
  letter-spacing: var(--padhub-track-label);
  text-transform: uppercase;
  color: var(--padhub-faint);
}
.padhub-loading::after {
  content: "";
  display: inline-block;
  width: 1.2em;
  text-align: left;
  animation: padhub-dots 1.2s steps(4, end) infinite;
}
@keyframes padhub-dots {
  0%   { content: ""; }
  25%  { content: "."; }
  50%  { content: ".."; }
  75%  { content: "..."; }
}

/* 6.14 Pagination */
.padhub-pager {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--padhub-space-3);
  padding-top: var(--padhub-space-4);
  border-top: var(--padhub-border) solid var(--padhub-line);
}
.padhub-pager__count {
  font-family: var(--padhub-font-mono);
  font-size: 10px;
  letter-spacing: var(--padhub-track-label);
  text-transform: uppercase;
  color: var(--padhub-faint);
}

/* 6.15 Fiche clé / valeur (ligne dépliée d'un tableau, détail d'un joueur) */
.padhub-kv {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: var(--padhub-space-3) var(--padhub-space-6);
}
.padhub-kv > div { display: flex; flex-direction: column; gap: 2px; }
.padhub-kv dt,
.padhub-kv .padhub-kv__k {
  font-family: var(--padhub-font-mono);
  font-size: 10px;
  letter-spacing: var(--padhub-track-label);
  text-transform: uppercase;
  color: var(--padhub-faint);
  margin: 0;
}
.padhub-kv dd,
.padhub-kv .padhub-kv__v { margin: 0; font-weight: 700; font-size: var(--padhub-text-sm); }

/* Ligne de tableau dépliable + sa ligne de détail. */
.padhub-table tr.is-expandable { cursor: pointer; }
.padhub-table tr.is-expandable:hover td { background: var(--padhub-bg-2); }
.padhub-table td.is-detail { background: var(--padhub-bg-2); padding: var(--padhub-space-5); }

/* Colonne secondaire : masquée sur petit écran. L'usage joueur est d'abord
   mobile, et un tableau qui déborde ne se lit pas. */
@media (max-width: 600px) {
  .padhub-table .is-optional { display: none; }
}

/* 7. Utilitaires ------------------------------------------------------------
   Volontairement minimalistes : la mise en page appartient aux composants,
   pas à une bibliothèque d'utilitaires qui finirait par la remplacer.      */

.padhub-stack   { display: flex; flex-direction: column; gap: var(--padhub-space-4); }
.padhub-row     { display: flex; align-items: center; gap: var(--padhub-space-3); flex-wrap: wrap; }
.padhub-row--end { align-items: flex-end; }
.padhub-grid    { display: grid; gap: var(--padhub-space-5); grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.padhub-shell   { max-width: 1180px; margin-inline: auto; padding-inline: var(--padhub-space-5); }
.padhub-grow    { flex-grow: 1; min-width: 0; }
.padhub-sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap; border: 0;
}