/* ========================================================================== PadHub — feuille applicative. Elle NE DÉFINIT AUCUN TOKEN. Toutes les valeurs viennent de la charte du socle (`padhub-core/assets/css/tokens.css`), chargée en dépendance sous le handle `padhub-core-tokens`. Si une couleur, une taille ou un rayon manque ici, on l'ajoute à la charte — jamais en dur dans ce fichier. Trois rôles, et trois seulement : 1. Un pont de nommage. Le JavaScript de l'app émet des classes héritées (`padhub-h2`, `padhub-notice-error`, `padhub-pill--live`, `padhub-tabbtn`) qui ne portent pas les noms de la charte. Plutôt que de réécrire six modules JS, on les branche ici sur les primitives correspondantes. 2. Les composants réellement propres à l'app : bracket, liste de matchs, poules, scorer, podium, Mode TV, modales, espace joueur. 3. L'intégration dans le thème hôte (§0). C'est ici qu'elle vit, et non dans la charte : le socle ne connaît pas Divi et ne doit pas le connaître. Le Mode TV n'a aucune couleur à lui : il pose `.padhub-stage`, la surface inversée de la charte, et tous les composants suivent. @package PadHub ========================================================================== */ /* 0. Intégration dans le thème hôte ---------------------------------------- Nos écrans sont des shortcodes posés dans des pages Divi ordinaires. Le conteneur porte la charte, mais la page AUTOUR reste celle du thème : fond blanc, et un titre rendu par Divi au-dessus du contenu — doublon de celui que l'écran affiche déjà. `padhub-host` est posée sur par Assets::bodyClass(), uniquement sur les pages du plugin. La portée est donc close : aucune page du site qui ne nous appartient pas n'est touchée. Les pages publiques de tournoi ne passent pas par ici : canvas.php les sort du thème et pose `padhub` directement sur . */ body.padhub-host { background: var(--padhub-bg); } /* Divi peint #main-content en blanc : sans ça, le fond de page ne se voit jamais. On le rend transparent plutôt que de le repeindre, pour n'avoir qu'un seul endroit qui décide de la couleur du fond. */ body.padhub-host #main-content, body.padhub-host #et-main-area { background: transparent; } /* Le titre du thème redit ce que l'écran affiche déjà. On le retire de l'affichage sans le retirer du document : il reste dans l'ordre de lecture des technologies d'assistance et dans le HTML pour le référencement. */ body.padhub-host .entry-title { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; } /* 1. Racines applicatives -------------------------------------------------- Chaque conteneur de l'app porte `padhub padhub-root` : `padhub` active la charte, `padhub-root` ce fichier. */ .padhub-root { 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; } .padhub-root *, .padhub-overlay *, .padhub-toasts * { box-sizing: border-box; } .padhub-root .padhub-shell { max-width: 1140px; margin-inline: auto; padding: var(--padhub-space-6) var(--padhub-space-5); } .padhub-auth.padhub-root { min-height: 82vh; display: grid; place-items: center; padding: var(--padhub-space-6); } /* 2. Pont de nommage ------------------------------------------------------- Rien de neuf ici : on redirige des noms hérités vers la charte. */ /* 2.1 Titres et texte */ .padhub-root .padhub-h1, .padhub-root h1.padhub-h1 { font-family: var(--padhub-font-display); font-weight: 900; font-size: var(--padhub-text-xl); letter-spacing: var(--padhub-track-display); line-height: var(--padhub-leading-tight); text-transform: uppercase; margin: 2px 0; } .padhub-root .padhub-h2 { font-family: var(--padhub-font-display); font-weight: 900; font-size: var(--padhub-text-lg); letter-spacing: var(--padhub-track-display); text-transform: uppercase; margin: var(--padhub-space-6) 0 var(--padhub-space-3); } .padhub-root .padhub-h3 { font-family: var(--padhub-font-display); font-weight: 700; font-size: var(--padhub-text-md); letter-spacing: -0.01em; margin: var(--padhub-space-1) 0 var(--padhub-space-3); } .padhub-root .padhub-muted { color: var(--padhub-muted); font-size: .92em; } .padhub-root .padhub-pos { color: var(--padhub-pos); font-weight: 700; } .padhub-root .padhub-neg { color: var(--padhub-neg); font-weight: 700; } .padhub-root .padhub-score, .padhub-root .padhub-seed { font-family: var(--padhub-font-display); font-weight: 900; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; } .padhub-root .padhub-seed { color: var(--padhub-accent-text); font-size: var(--padhub-text-sm); } .padhub-root .padhub-win { font-weight: 900; color: var(--padhub-ink); } .padhub-root .padhub-link { color: var(--padhub-accent-text); background: none; border: 0; padding: 0; font: inherit; font-weight: 700; cursor: pointer; text-decoration: underline; text-underline-offset: 2px; } .padhub-root .padhub-link:hover { color: var(--padhub-ink); } /* 2.2 Boutons — l'app appelle « btn » ce que la charte appelle « btn--primary ». Attention à la portée : ces règles sont sous `.padhub-root`, donc réservées aux écrans applicatifs. La page publique du classement est écrite dans le vocabulaire de la charte et garde ses sémantiques. */ .padhub-root .padhub-btn { background: var(--padhub-accent); color: var(--padhub-accent-ink); border: var(--padhub-border-strong) solid var(--padhub-ink); font-weight: 900; text-transform: uppercase; letter-spacing: 0.05em; } .padhub-root .padhub-btn:hover { background: var(--padhub-accent-2); color: var(--padhub-accent-ink); } .padhub-root .padhub-btn--ghost { background: transparent; color: var(--padhub-ink); font-weight: 700; text-transform: none; letter-spacing: 0.03em; } .padhub-root .padhub-btn--ghost:hover { background: var(--padhub-bg-2); } .padhub-root .padhub-btn--sm { min-height: var(--padhub-control-h-sm); padding: 0 var(--padhub-space-4); font-size: 12.5px; } .padhub-root .padhub-btn--xs { min-height: 30px; padding: 0 var(--padhub-space-3); font-size: 11.5px; } /* 2.3 Messages — la charte dit `--error`, l'app dit `-error`. */ .padhub-root .padhub-notice { padding: var(--padhub-space-3) var(--padhub-space-4); margin: var(--padhub-space-3) 0; border: 0; border-left: var(--padhub-border-strong) solid var(--padhub-ink); border-radius: var(--padhub-radius-sm); background: var(--padhub-bg-2); color: var(--padhub-ink-2); font-size: var(--padhub-text-sm); } .padhub-root .padhub-notice-error { border-left-color: var(--padhub-neg); color: var(--padhub-neg); font-weight: 700; } .padhub-root .padhub-notice-success { border-left-color: var(--padhub-pos); color: var(--padhub-pos); font-weight: 700; } .padhub-root .padhub-notice-info { border-left-color: var(--padhub-accent); color: var(--padhub-ink-2); } /* 2.4 Pastilles de statut — mêmes valeurs que `.padhub-status` de la charte. */ .padhub-root .padhub-pill { margin-left: auto; padding: 5px 10px; 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-root .padhub-pill--live { background: var(--padhub-neg); color: #fff; } .padhub-root .padhub-pill--soon { background: transparent; color: var(--padhub-muted); border: var(--padhub-border) solid var(--padhub-line-2); } .padhub-root .padhub-pill--done, .padhub-root .padhub-pill--full { background: var(--padhub-bg-2); color: var(--padhub-muted); } .padhub-root .padhub-pill--last { background: var(--padhub-warn); color: #fff; } /* 2.5 Badges de palier — l'app passe la couleur par --b, on la respecte. */ .padhub-root .padhub-badge, .padhub-root .padhub-disp__badge { --b: var(--padhub-accent); display: inline-flex; align-items: center; background: var(--b); color: var(--padhub-accent-ink); border: var(--padhub-border-strong) solid var(--padhub-ink); border-radius: var(--padhub-radius-sm); font-family: var(--padhub-font-display); font-weight: 900; padding: 4px 10px; font-size: 12px; letter-spacing: 0.02em; } .padhub-root .padhub-disp__badge { padding: 7px 13px; font-size: var(--padhub-text-md); } /* 2.6 Onglets et sélecteurs — trois variantes côté JS, un seul rendu. */ .padhub-root .padhub-tabbar, .padhub-root .padhub-disp__tabs { display: flex; gap: var(--padhub-space-1); border-bottom: var(--padhub-border-strong) solid var(--padhub-line-ink); margin: var(--padhub-space-4) 0; overflow-x: auto; } .padhub-root .padhub-tabbtn, .padhub-root .padhub-disp__tab { appearance: none; background: none; border: 0; padding: var(--padhub-space-3) var(--padhub-space-4); margin-bottom: -1.5px; border-bottom: var(--padhub-border-strong) solid transparent; font-family: var(--padhub-font-display); font-size: var(--padhub-text-sm); font-weight: 700; color: var(--padhub-muted); white-space: nowrap; cursor: pointer; } .padhub-root .padhub-tabbtn:hover, .padhub-root .padhub-disp__tab:hover { color: var(--padhub-ink); } .padhub-root .padhub-tabbtn.is-active, .padhub-root .padhub-disp__tab.is-active { color: var(--padhub-ink); border-bottom-color: var(--padhub-accent); } /* Segmentés : navigation d'app, sélecteur de poule, onglets d'auth. */ .padhub-root .padhub-appnav, .padhub-root .padhub-poolsel, .padhub-root .padhub-tabs { display: flex; gap: var(--padhub-space-2); flex-wrap: wrap; } .padhub-root .padhub-tabs { margin-bottom: var(--padhub-space-4); } .padhub-root .padhub-poolsel { margin-bottom: var(--padhub-space-3); } .padhub-root .padhub-appnav__btn, .padhub-root .padhub-poolsel__btn, .padhub-root .padhub-tab { background: transparent; color: var(--padhub-muted); border: var(--padhub-border-strong) solid var(--padhub-line-2); border-radius: var(--padhub-radius-sm); padding: 10px var(--padhub-space-4); font-family: var(--padhub-font-display); font-weight: 700; font-size: var(--padhub-text-sm); cursor: pointer; white-space: nowrap; transition: background var(--padhub-dur) var(--padhub-ease), color var(--padhub-dur) var(--padhub-ease); } .padhub-root .padhub-tab { flex: 1; } .padhub-root .padhub-appnav__btn:hover, .padhub-root .padhub-poolsel__btn:hover, .padhub-root .padhub-tab:hover { color: var(--padhub-ink); border-color: var(--padhub-ink); } .padhub-root .padhub-appnav__btn.is-active, .padhub-root .padhub-poolsel__btn.is-active, .padhub-root .padhub-tab[aria-expanded="true"], .padhub-root .padhub-tab[aria-selected="true"] { background: var(--padhub-accent); color: var(--padhub-accent-ink); border-color: var(--padhub-ink); font-weight: 900; } /* 2.7 Chargement */ .padhub-root .padhub-loading { padding: var(--padhub-space-14) 0; text-align: center; font-family: var(--padhub-font-mono); font-size: 10px; letter-spacing: var(--padhub-track-label); text-transform: uppercase; color: var(--padhub-faint); } /* 3. Surfaces -------------------------------------------------------------- Chalk n'est pas une charte « glass » : plus de flou d'arrière-plan, des filets nets, une ombre portée dure et seulement au survol. */ .padhub-root .padhub-glass, .padhub-root .padhub-stat, .padhub-root .padhub-dash-card, .padhub-root .padhub-pairrow, .padhub-root .padhub-pairform, .padhub-root .padhub-table, .padhub-root .padhub-match, .padhub-root .padhub-card, .padhub-root .padhub-podium__step, .padhub-root .padhub-spark, .padhub-root .padhub-chip, .padhub-modal { background: var(--padhub-surface); border: var(--padhub-border) solid var(--padhub-line); border-radius: var(--padhub-radius); } /* 4. Mise en page ---------------------------------------------------------- */ .padhub-root .padhub-row { display: flex; align-items: center; gap: var(--padhub-space-3); } .padhub-root .padhub-row--end { justify-content: flex-end; } .padhub-root .padhub-wrap { flex-wrap: wrap; } .padhub-root .padhub-topbar { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--padhub-space-4); flex-wrap: wrap; margin-bottom: var(--padhub-space-3); } .padhub-root .padhub-section { margin-top: var(--padhub-space-6); animation: padhub-rise .4s var(--padhub-ease) both; } .padhub-root .padhub-grid2 { display: grid; grid-template-columns: 1.3fr 1fr; gap: var(--padhub-space-6); } @media (max-width: 760px) { .padhub-root .padhub-grid2 { grid-template-columns: 1fr; } } /* Barre de marque : bloc noir, comme le lockup du logo. */ .padhub-root .padhub-brandbar { display: flex; align-items: center; gap: var(--padhub-space-4); background: var(--padhub-ink); color: var(--padhub-surface); border-radius: var(--padhub-radius); padding: var(--padhub-space-3) var(--padhub-space-5); margin-bottom: var(--padhub-space-5); } .padhub-root .padhub-logo { height: 24px; width: auto; display: block; } .padhub-root .padhub-brandbar__spacer { flex: 1; } .padhub-root .padhub-brandbar .padhub-appnav__btn { color: var(--padhub-surface); border-color: rgba(251, 250, 246, .28); } .padhub-root .padhub-brandbar .padhub-appnav__btn:hover { color: var(--padhub-accent); border-color: var(--padhub-accent); } .padhub-root .padhub-brandbar .padhub-appnav__btn.is-active { color: var(--padhub-accent-ink); border-color: var(--padhub-accent); } /* 5. Tournoi --------------------------------------------------------------- */ .padhub-root .padhub-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: var(--padhub-space-4); margin: var(--padhub-space-4) 0 var(--padhub-space-2); } .padhub-root .padhub-stat { padding: var(--padhub-space-4) var(--padhub-space-5); } .padhub-root .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-root .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); margin-top: var(--padhub-space-1); } .padhub-root .padhub-stat--live .padhub-stat__value { color: var(--padhub-neg); } .padhub-root .padhub-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(268px, 1fr)); gap: var(--padhub-space-4); } .padhub-root .padhub-dash-card { padding: var(--padhub-space-4) var(--padhub-space-5); transition: border-color var(--padhub-dur) var(--padhub-ease), box-shadow var(--padhub-dur) var(--padhub-ease); animation: padhub-rise .4s var(--padhub-ease) both; } .padhub-root .padhub-dash-card:hover { border-color: var(--padhub-line-ink); box-shadow: var(--padhub-shadow); } .padhub-root .padhub-dash-card__head { display: flex; align-items: center; gap: var(--padhub-space-2); flex-wrap: wrap; margin-bottom: var(--padhub-space-2); } .padhub-root .padhub-dash-card h3 { margin: var(--padhub-space-1) 0; font-family: var(--padhub-font-display); font-weight: 900; font-size: var(--padhub-text-md); letter-spacing: -0.02em; text-transform: uppercase; } /* Paires */ .padhub-root .padhub-pairlist { display: flex; flex-direction: column; gap: var(--padhub-space-2); margin-bottom: var(--padhub-space-4); } .padhub-root .padhub-pairrow { display: grid; grid-template-columns: 56px 1fr auto; align-items: center; gap: var(--padhub-space-2); padding: 10px var(--padhub-space-3); } .padhub-root .padhub-pairform { padding: var(--padhub-space-4); } /* Matchs */ .padhub-root .padhub-matchlist { display: flex; flex-direction: column; gap: var(--padhub-space-2); } .padhub-root .padhub-match { display: flex; justify-content: space-between; align-items: center; gap: var(--padhub-space-3); padding: 10px var(--padhub-space-3); } .padhub-root .padhub-match.is-done { border-color: var(--padhub-line-ink); } .padhub-root .padhub-match__teams { display: flex; flex-direction: column; gap: 2px; } .padhub-root .padhub-match__meta { display: flex; align-items: center; gap: var(--padhub-space-3); } /* Poules et tableau final */ .padhub-root .padhub-pools { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--padhub-space-5); } .padhub-root .padhub-pool__head { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--padhub-space-2); } .padhub-root .padhub-bracket { display: flex; gap: var(--padhub-space-6); overflow-x: auto; padding-bottom: var(--padhub-space-2); } .padhub-root .padhub-bracket__col { min-width: 210px; display: flex; flex-direction: column; gap: var(--padhub-space-4); justify-content: space-around; } .padhub-root .padhub-bracket__title { font-family: var(--padhub-font-mono); font-size: 10px; letter-spacing: var(--padhub-track-label); text-transform: uppercase; color: var(--padhub-faint); } /* Podium */ .padhub-root .padhub-podium { display: flex; justify-content: center; align-items: flex-end; gap: var(--padhub-space-4); padding: var(--padhub-space-6); flex-wrap: wrap; } .padhub-root .padhub-podium__step { padding: var(--padhub-space-4); text-align: center; min-width: 140px; } .padhub-root .padhub-podium__rank { font-family: var(--padhub-font-display); font-weight: 900; font-size: var(--padhub-text-xl); letter-spacing: -0.045em; } .padhub-root .padhub-podium__pts { font-family: var(--padhub-font-mono); font-size: 10px; letter-spacing: var(--padhub-track-label); text-transform: uppercase; color: var(--padhub-muted); margin-top: var(--padhub-space-1); } .padhub-root .padhub-podium__step.is-1 { padding-bottom: 44px; border-top: 3px solid var(--padhub-gold); } .padhub-root .padhub-podium__step.is-1 .padhub-podium__rank { color: var(--padhub-gold); } .padhub-root .padhub-podium__step.is-2 { padding-bottom: 28px; border-top: 3px solid var(--padhub-silver); } .padhub-root .padhub-podium__step.is-2 .padhub-podium__rank { color: var(--padhub-silver); } .padhub-root .padhub-podium__step.is-3 { padding-bottom: 14px; border-top: 3px solid var(--padhub-bronze); } .padhub-root .padhub-podium__step.is-3 .padhub-podium__rank { color: var(--padhub-bronze); } /* Un enfant de grille ne descend pas sous sa largeur de contenu sans ceci — c'est ce qui faisait déborder la page dès qu'une poule contenait un nom long. */ .padhub-root .padhub-pools > *, .padhub-root .padhub-grid2 > * { min-width: 0; } /* Tables de l'app : la charte les rend nues, ici elles portent leur surface. */ .padhub-root .padhub-table { width: 100%; border-collapse: collapse; margin-bottom: var(--padhub-space-3); } /* Sur petit écran seulement, la table devient un bloc qui défile dans son cadre plutôt que d'élargir toute la page. Au-dessus — et en Mode TV, qui est fait pour un grand écran — elle occupe bien toute la largeur. */ @media (max-width: 700px) { .padhub-root .padhub-table { display: block; overflow-x: auto; } } .padhub-root .padhub-table th, .padhub-root .padhub-table td { padding: 10px var(--padhub-space-3); text-align: left; border-top: 0; border-bottom: var(--padhub-border) solid var(--padhub-line); font-size: var(--padhub-text-sm); } .padhub-root .padhub-table thead th { font-family: var(--padhub-font-mono); font-size: 10px; font-weight: 400; letter-spacing: var(--padhub-track-label); text-transform: uppercase; color: var(--padhub-faint); border-bottom: var(--padhub-border-strong) solid var(--padhub-line-ink); } .padhub-root .padhub-table tbody tr:last-child td { border-bottom: 0; } .padhub-root .padhub-table tbody tr:hover td { background: var(--padhub-bg-2); } /* Progression */ .padhub-root .padhub-progress { margin: var(--padhub-space-3) 0; } .padhub-root .padhub-progress__bar { height: 8px; background: var(--padhub-bg-2); border: var(--padhub-border) solid var(--padhub-line-2); border-radius: 0; overflow: hidden; } .padhub-root .padhub-progress__bar span { display: block; height: 100%; background: var(--padhub-ink); transition: width .5s var(--padhub-ease); } .padhub-root .padhub-progress__label { font-family: var(--padhub-font-mono); font-size: 10px; letter-spacing: var(--padhub-track-label); text-transform: uppercase; color: var(--padhub-faint); margin-top: var(--padhub-space-1); } /* 6. Formulaires ----------------------------------------------------------- */ .padhub-root .padhub-form { display: grid; gap: var(--padhub-space-3); } .padhub-root .padhub-form--grid { grid-template-columns: 1fr 1fr; } .padhub-root .padhub-span { grid-column: 1 / -1; } /* Sans min-width:0, un champ de grille refuse de descendre sous la largeur de son contenu et fait déborder la page sur téléphone. */ .padhub-root .padhub-field { display: grid; gap: 5px; min-width: 0; } @media (max-width: 560px) { .padhub-root .padhub-form--grid { grid-template-columns: 1fr; } } .padhub-root .padhub-field > label, .padhub-root .padhub-field > span:first-child { font-family: var(--padhub-font-mono); font-size: 10px; letter-spacing: var(--padhub-track-label); text-transform: uppercase; color: var(--padhub-muted); } .padhub-root .padhub-form input, .padhub-root .padhub-form select, .padhub-root .padhub-form textarea, .padhub-root .padhub-field input, .padhub-root .padhub-field select { min-height: var(--padhub-control-h); padding: 0 var(--padhub-space-3); background: var(--padhub-surface-2); color: var(--padhub-ink); border: var(--padhub-border-strong) solid var(--padhub-line-2); border-radius: var(--padhub-radius-sm); font: inherit; font-size: var(--padhub-text-base); } .padhub-root .padhub-form textarea { padding: var(--padhub-space-3); min-height: 96px; resize: vertical; } .padhub-root .padhub-form input::placeholder, .padhub-root .padhub-form textarea::placeholder { color: var(--padhub-faint); } .padhub-root .padhub-form input:focus, .padhub-root .padhub-form select:focus, .padhub-root .padhub-form textarea:focus, .padhub-root .padhub-field input:focus, .padhub-root .padhub-field select:focus { outline: none; border-color: var(--padhub-ink); box-shadow: var(--padhub-shadow-focus); } .padhub-root .padhub-w70 { width: 72px; } .padhub-root .padhub-w90 { width: 94px; } .padhub-root .padhub-w110 { width: 116px; } .padhub-root .padhub-check { display: flex; align-items: center; gap: var(--padhub-space-2); font-size: var(--padhub-text-sm); color: var(--padhub-ink-2); } .padhub-root .padhub-check input { accent-color: var(--padhub-accent); min-height: 0; } .padhub-root .padhub-pass { display: flex; align-items: center; gap: var(--padhub-space-2); } .padhub-root .padhub-pass input { flex: 1; } .padhub-root .padhub-pass-toggle { border: 0; background: none; cursor: pointer; font-size: 1.05rem; color: var(--padhub-muted); } /* 7. Auth ------------------------------------------------------------------ */ .padhub-root .padhub-card { padding: var(--padhub-space-8); width: min(460px, 100%); } .padhub-root .padhub-card .padhub-logo { height: 28px; margin: 0 auto var(--padhub-space-5); } /* 8. Inscription ----------------------------------------------------------- */ .padhub-root .padhub-reg__fees { background: var(--padhub-accent); color: var(--padhub-accent-ink); border-radius: var(--padhub-radius-sm); padding: var(--padhub-space-3); margin: var(--padhub-space-2) 0; font-size: var(--padhub-text-sm); font-weight: 700; } .padhub-root .padhub-search__results { display: flex; flex-direction: column; gap: var(--padhub-space-1); margin: var(--padhub-space-2) 0; } .padhub-root .padhub-search__item { text-align: left; background: var(--padhub-surface); color: var(--padhub-ink); border: var(--padhub-border) solid var(--padhub-line); border-radius: var(--padhub-radius-sm); padding: 10px var(--padhub-space-3); cursor: pointer; } .padhub-root .padhub-search__item:hover { background: var(--padhub-bg-2); border-color: var(--padhub-ink); } .padhub-root .padhub-chosen { margin: var(--padhub-space-2) 0; } .padhub-root .padhub-manual { margin: var(--padhub-space-3) 0; } .padhub-root .padhub-manual summary { cursor: pointer; color: var(--padhub-accent-text); font-weight: 700; } .padhub-root .padhub-manual > div, .padhub-root .padhub-manual > input { margin-top: var(--padhub-space-2); } /* 9. Espace joueur --------------------------------------------------------- */ .padhub-root .padhub-me__id { display: flex; align-items: center; gap: var(--padhub-space-4); } .padhub-root .padhub-avatar { width: 54px; height: 54px; border-radius: var(--padhub-radius); background: var(--padhub-accent); color: var(--padhub-accent-ink); border: var(--padhub-border-strong) solid var(--padhub-ink); display: grid; place-items: center; font-family: var(--padhub-font-display); font-weight: 900; font-size: 1.5rem; } .padhub-root .padhub-me__fft { text-align: right; } .padhub-root .padhub-me__rank { font-family: var(--padhub-font-display); font-weight: 900; font-size: var(--padhub-text-xl); letter-spacing: -0.045em; } .padhub-root .padhub-me__fft .padhub-btn { margin-top: var(--padhub-space-2); } .padhub-root .padhub-spark { width: 100%; max-width: 680px; height: auto; padding: var(--padhub-space-3); } .padhub-root .padhub-spark__lbl { fill: var(--padhub-muted); font-size: 12px; } .padhub-root .padhub-chips { display: flex; flex-wrap: wrap; gap: var(--padhub-space-2); } .padhub-root .padhub-chip { padding: var(--padhub-space-2) var(--padhub-space-3); font-size: var(--padhub-text-sm); } /* 10. Scorer --------------------------------------------------------------- */ .padhub-root .padhub-setrow { align-items: center; } .padhub-root .padhub-scorer__teams { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--padhub-space-3); font-family: var(--padhub-font-display); font-weight: 900; text-transform: uppercase; } .padhub-root .padhub-scorer__wo { margin-top: var(--padhub-space-3); } /* 11. Affichage public et Mode TV ------------------------------------------ Le Mode TV ne redéfinit aucune couleur : `.padhub-stage` (charte) inverse la surface, tous les composants suivent. Ici, uniquement des tailles. */ .padhub-root .padhub-disp__head { display: flex; align-items: center; gap: var(--padhub-space-4); flex-wrap: wrap; } .padhub-root .padhub-disp__headmain { flex: 1; min-width: 180px; } .padhub-root .padhub-disp__actions { display: flex; gap: var(--padhub-space-2); flex-wrap: wrap; } .padhub-root .padhub-tvbar { display: flex; align-items: center; gap: var(--padhub-space-4); padding: var(--padhub-space-1) var(--padhub-space-1) var(--padhub-space-4); border-bottom: var(--padhub-border-strong) solid var(--padhub-line-ink); margin-bottom: var(--padhub-space-4); flex-wrap: wrap; } .padhub-root .padhub-tvbar .padhub-logo { height: 32px; } .padhub-root .padhub-tv__title { flex: 1; min-width: 0; display: flex; align-items: center; gap: var(--padhub-space-3); flex-wrap: wrap; font-family: var(--padhub-font-display); font-weight: 900; font-size: var(--padhub-text-lg); text-transform: uppercase; letter-spacing: var(--padhub-track-display); } .padhub-root .padhub-tv__section { font-family: var(--padhub-font-display); font-weight: 900; font-size: var(--padhub-text-2xl); letter-spacing: var(--padhub-track-display); text-transform: uppercase; margin: var(--padhub-space-2) 0 var(--padhub-space-4); } .padhub-display--tv { font-size: 1.4rem; } .padhub-display--tv .padhub-h1 { font-size: 2.4rem; } .padhub-display--tv .padhub-tv__section { font-size: 2.6rem; } .padhub-display--tv .padhub-table th, .padhub-display--tv .padhub-table td { padding: var(--padhub-space-4) var(--padhub-space-5); font-size: 1.3rem; } .padhub-display--tv .padhub-poolsel { display: none; } .padhub-display--tv .padhub-match { padding: var(--padhub-space-4) var(--padhub-space-5); font-size: 1.2rem; } .padhub-display--tv .padhub-podium__step { min-width: 200px; padding: var(--padhub-space-6); } .padhub-display--tv .padhub-podium__rank { font-size: 2.6rem; } .padhub-display--tv .padhub-bracket__col { min-width: 280px; } body.padhub-canvas { margin: 0; min-height: 100vh; background: var(--padhub-bg); } body.padhub-canvas .padhub-display { padding: var(--padhub-space-8); max-width: 1200px; margin-inline: auto; } /* 12. Modales et toasts ---------------------------------------------------- */ .padhub-overlay { position: fixed; inset: 0; z-index: var(--padhub-z-modal); background: rgba(20, 20, 15, .55); display: flex; align-items: center; justify-content: center; padding: var(--padhub-space-4); animation: padhub-fade .2s var(--padhub-ease); } .padhub-modal { width: min(560px, 100%); max-height: 90vh; overflow: auto; box-shadow: var(--padhub-shadow); animation: padhub-rise .25s var(--padhub-ease) both; } .padhub-modal__head { display: flex; justify-content: space-between; align-items: center; padding: var(--padhub-space-4) var(--padhub-space-5); border-bottom: var(--padhub-border) solid var(--padhub-line); } .padhub-modal__head h3 { margin: 0; font-family: var(--padhub-font-display); font-weight: 900; font-size: var(--padhub-text-md); text-transform: uppercase; letter-spacing: -0.02em; } .padhub-modal__close { border: 0; background: none; cursor: pointer; font-size: 1.1rem; color: var(--padhub-muted); } .padhub-modal__body { padding: var(--padhub-space-5); } .padhub-no-scroll { overflow: hidden; } .padhub-toasts { position: fixed; bottom: var(--padhub-space-5); left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; gap: var(--padhub-space-2); z-index: calc(var(--padhub-z-modal) + 1); } .padhub-toast { background: var(--padhub-ink); color: var(--padhub-surface); border: var(--padhub-border-strong) solid var(--padhub-ink); border-radius: var(--padhub-radius-sm); padding: var(--padhub-space-3) var(--padhub-space-5); font-size: var(--padhub-text-sm); opacity: 0; transform: translateY(8px); transition: .25s var(--padhub-ease); } .padhub-toast.is-in { opacity: 1; transform: none; } .padhub-toast--success { border-color: var(--padhub-accent); color: var(--padhub-accent); } .padhub-toast--error { border-color: var(--padhub-neg); color: #ff9aa8; } /* 13. Animations ----------------------------------------------------------- */ @keyframes padhub-rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } @keyframes padhub-fade { from { opacity: 0; } to { opacity: 1; } } @media (prefers-reduced-motion: reduce) { .padhub-root .padhub-section, .padhub-root .padhub-dash-card, .padhub-modal, .padhub-overlay { animation: none !important; } }