/* Design system — World Cup 2026 Pronos
   Reference: docs/05-design-system.md §2. */

:root {
    /* === Encres === */
    --wc-ink:           #000000;
    --wc-paper:         #FFFFFF;
    --wc-stone:         #9B9B9B;
    --wc-line:          #EBEBEB;

    /* === Action — turquoise === */
    --wc-turquoise:      #0BD1D1;
    --wc-turquoise-pale: #CEF6F6;
    --wc-turquoise-dark: #2D6768;
    --wc-turquoise-mid:  #09A7A7;

    /* === Identité utilisateur — violet === */
    --wc-violet:       #A177FF;
    --wc-violet-pale:  #ECE4FF;
    --wc-violet-dark:  #361F4A;
    --wc-violet-mid:   #614799;

    /* === Récompense — jaune === */
    --wc-yellow:       #FFD400;
    --wc-yellow-pale:  #FFF6CC;
    --wc-yellow-dark:  #BAA135;
    --wc-yellow-mid:   #EBC91F;

    /* === Alerte — rouge/pink === */
    --wc-alert:       #FE3A5E;
    --wc-alert-pale:  #FFD8DF;
    --wc-alert-dark:  #8E2726;

    /* === Espacement === */
    --wc-space-xs:  4px;
    --wc-space-sm:  8px;
    --wc-space-md:  14px;
    --wc-space-lg:  22px;
    --wc-space-xl:  28px;
    --wc-space-2xl: 32px;

    /* === Rayon === */
    --wc-radius-chip:   4px;
    --wc-radius-input:  12px;
    --wc-radius-card:   18px;
    --wc-radius-hero:   20px;
    --wc-radius-device: 28px;

    /* === Polices === */
    --wc-font-display: 'Bricolage Grotesque Variable', 'Bricolage Grotesque', 'Roboto', system-ui, -apple-system, sans-serif;
    --wc-font-body:    'Bricolage Grotesque Variable', 'Bricolage Grotesque', 'Roboto', system-ui, -apple-system, sans-serif;

    /* === Élévation (niveaux DS §1.4) === */
    --wc-elev-card:   0 6px 22px rgba(0, 0, 0, 0.06);
    --wc-elev-hover:  0 12px 30px rgba(0, 0, 0, 0.10);
    --wc-elev-modal:  0 24px 64px rgba(0, 0, 0, 0.18);
    --wc-elev-avatar: 0 2px 8px rgba(0, 0, 0, 0.08);

    /* === Bordure douce des cartes (rgba ink 6%) === */
    --wc-border-soft: rgba(0, 0, 0, 0.06);

    /* === Header === */
    --wc-header-height: 76px;

    /* === Tokens interaction (Lot 1) === */
    --wc-focus-ring:     0 0 0 3px var(--wc-turquoise-pale);
    --wc-btn-tap:        scale(0.97);
    --wc-btn-transition: background 120ms ease-out, color 120ms ease-out, border-color 120ms ease-out, transform 80ms ease-out, box-shadow 120ms ease-out, opacity 120ms ease-out;
    --wc-row-hover:      rgba(11, 209, 209, 0.06);
    --wc-row-zebra:      rgba(0, 0, 0, 0.02);
}

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

html {
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    font-family: var(--wc-font-body);
    font-weight: 500;
    background: var(--wc-paper);
    color: var(--wc-ink);
    font-size: 13px;
    line-height: 1.4;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

a {
    color: var(--wc-turquoise-dark);
}

/* === Typographie utilitaire === */
.wc-display-xl {
    font-family: var(--wc-font-display);
    font-size: 46px;
    font-weight: 800;
    letter-spacing: -0.05em;
    line-height: 1;
}

.wc-display-lg {
    font-family: var(--wc-font-display);
    font-size: 32px;
    font-weight: 800;
    letter-spacing: -0.05em;
    line-height: 1.05;
}

.wc-display-md {
    font-family: var(--wc-font-display);
    font-size: 26px;
    font-weight: 800;
    letter-spacing: -0.04em;
    line-height: 1.1;
}

.wc-display-sm {
    font-family: var(--wc-font-display);
    font-size: 22px;
    font-weight: 800;
    letter-spacing: -0.04em;
    line-height: 1.15;
}

.wc-label {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--wc-stone);
}

.wc-chip {
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.20em;
    text-transform: uppercase;
}

.wc-signature {
    font-size: 9px;
    font-weight: 500;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    color: var(--wc-stone);
}

.wc-italic {
    font-style: italic;
}

/* === Inputs (login + change password) === */
.wc-input {
    width: 100%;
    min-height: 44px;
    padding: 10px 16px;
    background: var(--wc-paper);
    border: 1.5px solid var(--wc-ink);
    border-radius: var(--wc-radius-input);
    font-family: var(--wc-font-body);
    font-size: 14px;
    font-weight: 500;
    color: var(--wc-ink);
    outline: none;
    transition: border-color 120ms ease-out, box-shadow 120ms ease-out;
}

.wc-input::placeholder { color: var(--wc-stone); }

.wc-input:focus-visible,
.wc-input:focus {
    border-color: var(--wc-turquoise);
    box-shadow: var(--wc-focus-ring);
}

.wc-input--error {
    border-color: var(--wc-alert);
    background: var(--wc-alert-pale);
}
.wc-input--error:focus-visible,
.wc-input--error:focus {
    border-color: var(--wc-alert);
    box-shadow: 0 0 0 3px var(--wc-alert-pale);
}

/* === Bouton primaire turquoise (CTA) === */
/* === Système boutons unifié .wc-btn (Lot 1) ===
   Base + variants couleur (--primary, --secondary, --ghost, --danger,
   --violet, --yellow) + tailles (--sm, --md, --lg) + modificateurs
   (--block, --icon-only, is-loading). Tous les boutons existants
   (wc-card__cta, wc-prediction__submit, wc-admin__action*, wc-profile__link,
   wc-topbar__logout, wc-peers__trigger, wc-card__placed-edit) héritent
   du même focus-ring et du même tap-scale via les sélecteurs groupés
   en bas du fichier. */
.wc-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 18px;
    border: 2px solid var(--wc-ink);
    border-radius: 12px;
    background: var(--wc-paper);
    color: var(--wc-ink);
    font-family: var(--wc-font-display);
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    text-decoration: none;
    cursor: pointer;
    transition: var(--wc-btn-transition);
    user-select: none;
}
.wc-btn:focus-visible { outline: none; box-shadow: var(--wc-focus-ring); }
.wc-btn:active:not(:disabled, [aria-disabled="true"]) { transform: var(--wc-btn-tap); }
.wc-btn:disabled,
.wc-btn[aria-disabled="true"] {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}
.wc-btn.is-loading { opacity: 0.7; cursor: wait; pointer-events: none; }

.wc-btn--primary   { background: var(--wc-turquoise); color: var(--wc-ink); border-color: var(--wc-ink); }
.wc-btn--primary:hover:not(:disabled, [aria-disabled="true"]) { background: var(--wc-turquoise-mid); }

.wc-btn--secondary { background: var(--wc-paper); color: var(--wc-ink); border-color: var(--wc-ink); }
.wc-btn--secondary:hover:not(:disabled, [aria-disabled="true"]) { background: var(--wc-ink); color: var(--wc-paper); }

.wc-btn--ghost     { background: transparent; color: var(--wc-stone); border-color: var(--wc-stone); }
.wc-btn--ghost:hover:not(:disabled, [aria-disabled="true"]) { background: var(--wc-stone); color: var(--wc-paper); border-color: var(--wc-stone); }

.wc-btn--violet    { background: var(--wc-violet); color: var(--wc-paper); border-color: var(--wc-ink); }
.wc-btn--violet:hover:not(:disabled, [aria-disabled="true"]) { background: var(--wc-violet-mid); }

.wc-btn--yellow    { background: var(--wc-yellow); color: var(--wc-ink); border-color: var(--wc-ink); }
.wc-btn--yellow:hover:not(:disabled, [aria-disabled="true"]) { background: var(--wc-yellow-mid); }

.wc-btn--danger    { background: var(--wc-alert); color: var(--wc-paper); border-color: var(--wc-ink); }
.wc-btn--danger:hover:not(:disabled, [aria-disabled="true"]) { background: var(--wc-alert-dark); }

.wc-btn--sm { padding: 8px 12px;  font-size: 10px; border-radius: 10px; }
.wc-btn--md { padding: 12px 18px; font-size: 13px; }
.wc-btn--lg { padding: 16px 22px; font-size: 15px; border-radius: 14px; }

.wc-btn--block { width: 100%; display: flex; }
.wc-btn--icon-only { padding: 10px; gap: 0; }

/* Alias rétro-compat : .wc-btn-primary = .wc-btn .wc-btn--primary .wc-btn--lg --block */
.wc-btn-primary {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 16px 22px;
    border: 2px solid var(--wc-ink);
    border-radius: 14px;
    background: var(--wc-turquoise);
    color: var(--wc-ink);
    font-family: var(--wc-font-display);
    font-size: 15px;
    font-weight: 800;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    text-decoration: none;
    cursor: pointer;
    text-align: center;
    transition: var(--wc-btn-transition);
}
.wc-btn-primary:hover:not(:disabled) { background: var(--wc-turquoise-mid); }
.wc-btn-primary:focus-visible { outline: none; box-shadow: var(--wc-focus-ring); }
.wc-btn-primary:active:not(:disabled) { transform: var(--wc-btn-tap); }
.wc-btn-primary:disabled { opacity: 0.5; cursor: not-allowed; }

/* Focus + tap homogènes pour tous les boutons stylisés (rétro-compat) */
.wc-card__cta:focus-visible,
.wc-card__placed-edit:focus-visible,
.wc-prediction__submit:focus-visible,
.wc-prediction__cancel:focus-visible,
.wc-admin__action:focus-visible,
.wc-profile__link:focus-visible,
.wc-topbar__logout:focus-visible,
.wc-peers__trigger:focus-visible,
.wc-matches__filter-select:focus-visible {
    outline: none;
    box-shadow: var(--wc-focus-ring);
}
.wc-card__cta:active:not(:disabled),
.wc-prediction__submit:active:not(:disabled),
.wc-admin__action:active:not(:disabled),
.wc-profile__link:active:not(:disabled),
.wc-topbar__logout:active:not(:disabled),
.wc-peers__trigger:active:not(:disabled) {
    transform: var(--wc-btn-tap);
}
.wc-admin__action:disabled,
.wc-peers__trigger:disabled,
.wc-prediction__submit:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}

/* === Drapeaux (DS §4) === */
.wc-flag-sm,
.wc-flag-md,
.wc-flag-lg {
    display: block;
    border: 1px solid var(--wc-ink);
    object-fit: cover;
    flex-shrink: 0;
}
.wc-flag-sm { width: 32px; height: 24px; border-radius: 4px; }
.wc-flag-md { width: 44px; height: 33px; border-radius: 5px; }
.wc-flag-lg { width: 60px; height: 45px; border-radius: 6px; border-width: 1.5px; }

/* === Layout page authentifiée (motif background.webp tuilé en filigrane) ===
   Image répétée en petite taille (icônes réduites), fixe au scroll, atténuée par
   un voile blanc pour rester lisible sous le contenu.
   Non appliqué au login : son <body> ne porte pas la classe .wc-page. */
.wc-page {
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    background-color: #FFFFFF;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.97), rgba(255, 255, 255, 0.97)),
        url('/img/background.webp');
    background-repeat: no-repeat, repeat;
    background-position: center, top left;
    background-size: cover, 600px auto;
    background-attachment: fixed, fixed;
    color: var(--wc-ink);
}
.wc-main {
    flex: 1;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 32px 32px 48px;
}
@media (max-width: 600px) {
    .wc-main { padding: 22px 18px 32px; }
}

/* === Flash messages globaux === */
.wc-flash {
    margin: 0 0 18px;
    padding: 12px 16px;
    border-radius: 12px;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.4;
}
.wc-flash--success {
    background: var(--wc-turquoise-pale);
    color: var(--wc-turquoise-dark);
    border-left: 3px solid var(--wc-turquoise);
}
.wc-flash--error {
    background: var(--wc-alert-pale);
    color: var(--wc-alert-dark);
    border-left: 3px solid var(--wc-alert);
}
.wc-flash--info {
    background: var(--wc-violet-pale);
    color: var(--wc-violet-dark);
    border-left: 3px solid var(--wc-violet);
}

/* === Placeholder de page (Étape 8, 10, etc. à venir) === */
.wc-placeholder {
    max-width: 600px;
    margin: 60px auto;
    text-align: center;
    padding: 40px 24px;
    background: var(--wc-paper);
    border: 1.5px solid var(--wc-ink);
    border-radius: var(--wc-radius-card);
    box-shadow: 6px 6px 0 var(--wc-yellow);
}
.wc-placeholder__eyebrow {
    display: inline-block;
    padding: 5px 10px;
    background: var(--wc-yellow);
    color: var(--wc-ink);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    margin: 0 0 22px;
    transform: rotate(-1.2deg);
}
.wc-placeholder__title {
    font-family: var(--wc-font-display);
    font-size: clamp(32px, 5vw, 48px);
    font-weight: 800;
    letter-spacing: -0.04em;
    line-height: 1;
    margin: 0 0 18px;
}
.wc-placeholder__text {
    font-size: 14px;
    color: var(--wc-stone);
    margin: 0 0 26px;
    line-height: 1.5;
}
.wc-placeholder__text em {
    color: var(--wc-violet);
    font-style: italic;
    font-weight: 700;
}
.wc-placeholder__cta {
    margin: 0;
}

/* === Top bar global (DS §3.1) — frosted glass === */
.wc-topbar {
    position: sticky;
    top: 0;
    z-index: 100;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 24px;
    padding: 12px 32px;
    background: rgba(255, 255, 255, 0.55);
    backdrop-filter: blur(14px) saturate(140%);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}
.wc-topbar__lockup {
    display: flex;
    align-items: center;
    gap: 16px;
    height: 44px;
    text-decoration: none;
}
.wc-topbar__logo {
    display: inline-flex;
    align-items: center;
    height: 44px;
}
.wc-topbar__logo img {
    display: block;
    height: 38px;
    width: auto;
    object-fit: contain;
}
.wc-topbar__sep {
    display: inline-block;
    width: 22px;
    height: 44px;
    line-height: 44px;
    text-align: center;
    font-family: var(--wc-font-display);
    font-size: 26px;
    font-weight: 800;
    color: var(--wc-violet);
}
/* Navigation principale dans le header */
.wc-topbar__nav {
    display: flex;
    align-items: center;
    gap: 4px;
    flex: 1;
    justify-content: center;
}
.wc-topbar__navlink {
    padding: 8px 14px;
    border-radius: 10px;
    text-decoration: none;
    font-family: var(--wc-font-display);
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--wc-stone);
    white-space: nowrap;
    transition: color 80ms linear, background 80ms linear;
}
.wc-topbar__navlink:hover { color: var(--wc-ink); background: rgba(0, 0, 0, 0.04); }
.wc-topbar__navlink:focus-visible { outline: none; box-shadow: var(--wc-focus-ring); }
.wc-topbar__navlink.is-active {
    color: var(--wc-turquoise-dark);
    background: var(--wc-turquoise-pale);
}

.wc-topbar__user {
    display: flex;
    align-items: center;
    gap: 12px;
}
.wc-topbar__avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--wc-turquoise);
    color: var(--wc-ink);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--wc-font-display);
    font-size: 14px;
    font-weight: 800;
    border: 1.5px solid var(--wc-ink);
}
.wc-topbar__name {
    font-size: 13px;
    font-weight: 700;
    color: var(--wc-ink);
}
.wc-topbar__logout {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    border: 1.5px solid var(--wc-ink);
    border-radius: 10px;
    background: var(--wc-paper);
    color: var(--wc-ink);
    font-family: var(--wc-font-display);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    text-decoration: none;
    transition: background 80ms linear, transform 80ms ease;
}
.wc-topbar__logout:hover { background: var(--wc-ink); color: var(--wc-paper); }
.wc-topbar__logout-arrow { font-size: 14px; line-height: 1; }

@media (max-width: 760px) {
    .wc-topbar { flex-wrap: wrap; gap: 10px; padding: 10px 16px; }
    .wc-topbar__nav {
        order: 3;
        width: 100%;
        flex: 1 0 100%;
        justify-content: flex-start;
        gap: 2px;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    .wc-topbar__nav::-webkit-scrollbar { display: none; }
    .wc-topbar__navlink { padding: 7px 11px; font-size: 12px; }
    .wc-topbar__name { display: none; }
    .wc-topbar__logout-text { display: none; }
    .wc-topbar__logout { padding: 8px 10px; }
}

/* === Bottom nav (DS §3.9) === */
.wc-bottomnav {
    position: sticky;
    bottom: 0;
    z-index: 100;
    display: flex;
    justify-content: space-around;
    align-items: stretch;
    padding: 10px 0 8px;
    background: var(--wc-paper);
    border-top: 2px solid var(--wc-ink);
}
.wc-bottomnav__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    color: var(--wc-stone);
    text-decoration: none;
    font-size: 9px;
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    transition: color 80ms linear;
    flex: 1;
    max-width: 120px;
}
.wc-bottomnav__icon {
    font-family: var(--wc-font-display);
    font-size: 18px;
    line-height: 1;
}
.wc-bottomnav__label {
    font-size: 9px;
}
.wc-bottomnav__item--active {
    color: var(--wc-turquoise-dark);
    font-weight: 800;
}
.wc-bottomnav__item--active .wc-bottomnav__icon {
    color: var(--wc-turquoise);
}
.wc-bottomnav__item:hover { color: var(--wc-ink); }
.wc-bottomnav__item--active:hover { color: var(--wc-turquoise-dark); }
.wc-bottomnav__item:focus-visible { outline: none; box-shadow: var(--wc-focus-ring); border-radius: 8px; }

/* === Page matches : tabs phases + sections + cartes === */
.wc-matches__head {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    flex-wrap: wrap;
    gap: 18px 24px;
    margin: 0 0 22px;
}
.wc-matches__intro {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 0;
}
.wc-matches__title {
    font-family: var(--wc-font-display);
    font-size: clamp(32px, 4.5vw, 48px);
    font-weight: 800;
    letter-spacing: -0.04em;
    line-height: 1;
    margin: 0;
}
.wc-matches__title em {
    color: var(--wc-turquoise);
    font-style: italic;
}
.wc-matches__lead {
    margin: 0;
    max-width: 42ch;
    font-size: 15px;
    line-height: 1.45;
    color: var(--wc-stone);
}
.wc-matches__lead em {
    color: var(--wc-ink);
    font-style: normal;
    font-weight: 700;
}
.wc-matches__progress {
    display: flex;
    flex-direction: column;
    gap: 9px;
    min-width: 220px;
    padding: 14px 18px;
    background: var(--wc-paper);
    border: 1px solid var(--wc-border-soft, rgba(0, 0, 0, 0.06));
    border-radius: var(--wc-radius-card, 16px);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.05);
}
.wc-matches__progress-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
}
.wc-matches__progress-label {
    font-family: var(--wc-font-display);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--wc-stone);
}
.wc-matches__progress-count {
    font-family: var(--wc-font-display);
    font-size: 15px;
    font-weight: 700;
    color: var(--wc-stone);
}
.wc-matches__progress-count strong {
    font-size: 22px;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--wc-ink);
}
.wc-matches__progress-bar {
    position: relative;
    height: 8px;
    border-radius: 999px;
    background: var(--wc-line);
    overflow: hidden;
}
.wc-matches__progress-fill {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: var(--wc-turquoise);
    transition: width 360ms ease-out;
}
.wc-matches__progress-hint {
    font-size: 11px;
    font-weight: 600;
    color: var(--wc-stone);
}

/* === Tabs phases (DS §3.4) === */
/* === Filtre matches (liste déroulante) === */
/* Barre d'outils : filtre par phase (gauche) aligné avec « Mes pronos » (droite) */
.wc-matches__toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px 24px;
    margin: 0 0 26px;
}
.wc-matches__filter {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin: 0;
}
.wc-matches__filter-label {
    font-family: var(--wc-font-display);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.20em;
    text-transform: uppercase;
    color: var(--wc-stone);
}
.wc-matches__filter-select {
    appearance: none;
    -webkit-appearance: none;
    min-height: 46px;
    padding: 11px 44px 11px 20px;
    background-color: var(--wc-paper);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%230BD1D1' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 18px center;
    border: 1px solid var(--wc-border-soft, rgba(0, 0, 0, 0.06));
    border-radius: 999px;
    font-family: var(--wc-font-display);
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--wc-ink);
    outline: none;
    cursor: pointer;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.05);
    transition: border-color 120ms ease-out, box-shadow 120ms ease-out, transform 120ms ease-out;
}
.wc-matches__filter-select:hover { box-shadow: 0 8px 20px rgba(0, 0, 0, 0.09); transform: translateY(-1px); }
.wc-matches__filter-select:focus-visible,
.wc-matches__filter-select:focus {
    border-color: var(--wc-turquoise);
    box-shadow: var(--wc-focus-ring);
}

.wc-tabs {
    display: flex;
    gap: 22px;
    overflow-x: auto;
    border-bottom: 2px solid var(--wc-ink);
    margin: 0 0 26px;
    padding: 0 0 0 2px;
    scrollbar-width: none;
}
.wc-tabs::-webkit-scrollbar { display: none; }
.wc-tabs__tab {
    flex-shrink: 0;
    border: none;
    background: transparent;
    padding: 4px 0 14px;
    font-family: var(--wc-font-display);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--wc-stone);
    cursor: pointer;
    text-decoration: none;
    position: relative;
    transition: color 80ms linear;
}
.wc-tabs__tab:hover { color: var(--wc-ink); }
.wc-tabs__tab:focus-visible { outline: none; box-shadow: var(--wc-focus-ring); border-radius: 6px; }
.wc-tabs__tab--active {
    color: var(--wc-turquoise-dark);
    font-weight: 800;
}
.wc-tabs__tab--active::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: -12px;
    height: 3px;
    background: var(--wc-turquoise);
}
.wc-tabs__count {
    margin-left: 6px;
    color: var(--wc-stone);
    font-weight: 500;
    font-size: 10px;
}
.wc-tabs__tab--active .wc-tabs__count { color: var(--wc-turquoise-dark); }

/* === Séparateur de jour — badge date (le jour mis en valeur) === */
.wc-section-day {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 28px 0 14px;
}
.wc-section-day__rule {
    flex: 1 1 auto;
    height: 0;
    border-top: 2px solid var(--wc-line);
}
.wc-section-day__num {
    flex-shrink: 0;
    width: 52px;
    height: 52px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--wc-turquoise);
    color: var(--wc-ink);
    border-radius: 14px;
    font-family: var(--wc-font-display);
    font-size: 28px;
    font-weight: 800;
    line-height: 1;
    box-shadow: 0 4px 12px rgba(11, 209, 209, 0.30);
}
.wc-section-day__txt {
    display: flex;
    flex-direction: column;
    gap: 1px;
}
.wc-section-day__weekday {
    font-family: var(--wc-font-display);
    font-size: 17px;
    font-weight: 800;
    letter-spacing: 0.01em;
    text-transform: uppercase;
    color: var(--wc-ink);
    line-height: 1.1;
}
.wc-section-day__month {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--wc-stone);
}

.wc-matches__phase-empty {
    padding: 60px 24px;
    text-align: center;
    color: var(--wc-stone);
    font-size: 13px;
    font-style: italic;
}

/* === Cartes match (DS §3.5/3.6/3.7) === */
.wc-card {
    background: var(--wc-paper);
    border: 1.5px solid var(--wc-ink);
    border-radius: var(--wc-radius-card);
    margin: 0 0 14px;
    overflow: hidden;
}
.wc-card--hero {
    border-width: 2px;
    border-radius: var(--wc-radius-hero);
    box-shadow: 6px 6px 0 var(--wc-ink);
}

/* Header standard */
.wc-card__header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 10px 18px;
    border-bottom: 1px solid var(--wc-ink);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}
.wc-card__ref     { color: var(--wc-ink); font-weight: 800; }
.wc-card__when    { color: var(--wc-stone); font-weight: 700; }
.wc-card__status  { color: var(--wc-stone); font-weight: 700; }

/* Hero masthead noir avec stamp jaune */
.wc-card__masthead {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 18px;
    background: var(--wc-ink);
    color: var(--wc-paper);
}
.wc-card__stamp {
    background: var(--wc-yellow);
    color: var(--wc-ink);
    padding: 5px 10px;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.24em;
    text-transform: uppercase;
}
.wc-card__masthead-ref {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--wc-paper);
}
.wc-card__masthead-when {
    margin-left: auto;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--wc-stone);
}

/* Body match */
.wc-card__body {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 16px;
    padding: 16px 18px;
}
.wc-card__body--hero {
    padding: 28px 22px 26px;
    text-align: center;
}
.wc-card__body--finished {
    align-items: center;
}

.wc-card__team {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}
.wc-card__team--right {
    justify-content: flex-end;
}
.wc-card__team--hero {
    flex-direction: column;
    gap: 10px;
}
.wc-card__team-name {
    font-family: var(--wc-font-display);
    font-size: 16px;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--wc-ink);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.wc-card__team-name--hero {
    font-size: clamp(22px, 3.4vw, 30px);
    letter-spacing: -0.04em;
    text-align: center;
    white-space: normal;
}

.wc-card__vs {
    font-family: var(--wc-font-display);
    font-size: 14px;
    font-weight: 800;
    font-style: italic;
    letter-spacing: -0.02em;
    color: var(--wc-stone);
    text-transform: lowercase;
}
.wc-card__vs--hero {
    font-size: 22px;
    color: var(--wc-violet);
}

/* Score réel (match terminé) */
.wc-card__score-real {
    display: inline-flex;
    align-items: baseline;
    gap: 8px;
    padding: 0 14px;
}
.wc-card__score-num {
    font-family: var(--wc-font-display);
    font-size: 32px;
    font-weight: 800;
    letter-spacing: -0.04em;
    color: var(--wc-ink);
    line-height: 1;
}
.wc-card__score-sep {
    font-family: var(--wc-font-display);
    font-size: 22px;
    font-weight: 800;
    color: var(--wc-stone);
}

/* Footer + CTA */
.wc-card__footer {
    padding: 8px 18px 12px;
    border-top: 1px solid var(--wc-line);
    font-size: 11px;
    color: var(--wc-stone);
    font-style: italic;
    text-align: center;
}
.wc-card__cta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    padding: 16px 22px;
    background: var(--wc-violet);
    color: var(--wc-paper);
    border: none;
    border-top: 2px solid var(--wc-ink);
    border-radius: 0;
    font-family: var(--wc-font-display);
    font-size: 14px;
    font-weight: 800;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background 80ms linear;
}
.wc-card__cta:hover:not(:disabled) { background: var(--wc-violet-mid); }
.wc-card__cta:disabled {
    background: var(--wc-line);
    color: var(--wc-stone);
    cursor: not-allowed;
}
a.wc-card__cta, button.wc-card__cta { text-decoration: none; }
.wc-card__cta--edit { background: var(--wc-paper); color: var(--wc-ink); border-top: 2px solid var(--wc-ink); }
.wc-card__cta--edit:hover:not(:disabled) { background: var(--wc-turquoise-pale); }

/* === Bloc prono affiché dans la carte hero === */
.wc-card__prono {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 16px 22px;
    background: var(--wc-turquoise-pale);
    border-top: 1.5px solid var(--wc-ink);
    border-bottom: 1.5px solid var(--wc-ink);
}
.wc-card__prono-label {
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--wc-turquoise-dark);
}
.wc-card__prono-score {
    display: flex;
    align-items: baseline;
    gap: 10px;
    font-family: var(--wc-font-display);
    font-size: 36px;
    font-weight: 800;
    letter-spacing: -0.04em;
    color: var(--wc-ink);
    line-height: 1;
}
.wc-card__prono-sep { color: var(--wc-stone); }
.wc-card__prono-scorer { font-size: 11px; color: var(--wc-ink); font-weight: 600; }
.wc-card__prono-scorer em { color: var(--wc-yellow-dark); font-style: italic; font-weight: 700; }

/* === Carte état Pronostic déposé (DS §3.6) === */
.wc-card--placed {
    position: relative;
    padding-left: 6px;
    background: var(--wc-paper);
}
.wc-card__placed-bar {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 6px;
    background: var(--wc-turquoise);
}
.wc-card--placed .wc-card__header {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: baseline;
    gap: 12px;
}
.wc-card__placed-pill {
    background: var(--wc-turquoise-pale);
    color: var(--wc-turquoise-dark);
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.24em;
    text-transform: uppercase;
}
.wc-card__prono-chip {
    display: inline-flex;
    align-items: baseline;
    gap: 8px;
    padding: 8px 14px;
    background: var(--wc-turquoise-pale);
    border: 1.5px solid var(--wc-ink);
    border-radius: 10px;
    font-family: var(--wc-font-display);
}
.wc-card__prono-chip-num {
    font-size: 22px;
    font-weight: 800;
    letter-spacing: -0.04em;
    color: var(--wc-ink);
    line-height: 1;
}
.wc-card__prono-chip-sep { color: var(--wc-stone); font-size: 18px; }

.wc-card__footer--placed {
    display: flex;
    justify-content: space-between;
    align-items: center;
    text-align: left;
    padding: 10px 18px 12px;
    font-style: normal;
}
.wc-card__placed-scorer { font-size: 12px; color: var(--wc-stone); }
.wc-card__placed-scorer em { color: var(--wc-yellow-dark); font-style: italic; font-weight: 700; }
.wc-card__placed-edit {
    color: var(--wc-turquoise-dark);
    text-decoration: underline;
    text-underline-offset: 3px;
    font-size: 12px;
    font-weight: 700;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    font-family: inherit;
}
.wc-card__placed-edit:hover { color: var(--wc-ink); }

@media (max-width: 520px) {
    .wc-card__body { grid-template-columns: 1fr; gap: 8px; text-align: center; }
    .wc-card__team { justify-content: center; }
    .wc-card__team--right { justify-content: center; }
    .wc-card__vs { display: none; }
    .wc-card__body--hero { padding: 22px 16px; }
    .wc-card__masthead-when { display: none; }
}

/* === Bouton + drawer "Voir les pronos des autres" (E4 R5.2) === */
.wc-card-wrap {
    margin: 0 0 14px;
}
.wc-card-wrap > .wc-card {
    margin-bottom: 0;
}
.wc-peers-wrap {
    margin-top: 6px;
}

/* === Carte match "À venir" — design moderne (flags ronds, coup d'envoi central) === */
.wc-mc {
    margin: 0;
    padding: 14px 20px 14px;
    background: var(--wc-paper);
    border: 1px solid rgba(0, 0, 0, 0.06);
    border-radius: 18px;
    box-shadow: 0 6px 22px rgba(0, 0, 0, 0.06);
    transition: box-shadow 160ms ease-out, transform 160ms ease-out;
}
.wc-mc:hover { box-shadow: 0 12px 30px rgba(0, 0, 0, 0.10); transform: translateY(-2px); }
.wc-mc__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.wc-mc__group {
    font-family: var(--wc-font-display);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.20em;
    text-transform: uppercase;
    color: var(--wc-stone);
}
.wc-mc__teams {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 14px;
    padding: 12px 0 16px;
}
.wc-mc__team {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    text-align: center;
    min-width: 0;
}
/* Flags ronds avec liseré blanc + ombre douce */
.wc-mc__flag {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    overflow: hidden;
    box-shadow: 0 0 0 3px #fff, 0 3px 10px rgba(0, 0, 0, 0.18);
    flex-shrink: 0;
}
.wc-mc__flag img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
    border: none !important;
    border-radius: 0 !important;
    display: block;
}
.wc-mc__name {
    font-family: var(--wc-font-display);
    font-size: 19px;
    font-weight: 800;
    letter-spacing: -0.01em;
    color: var(--wc-ink);
    line-height: 1.1;
}
/* Coup d'envoi : pièce maîtresse centrale */
/* Élément central : libellé + pastille (heure / score / prono) */
.wc-mc__center {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}
.wc-mc__center-label {
    font-size: 8px;
    font-weight: 800;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--wc-stone);
    white-space: nowrap;
}
.wc-mc__chip {
    font-family: var(--wc-font-display);
    font-weight: 800;
    line-height: 1;
}
.wc-mc__chip--time {
    font-size: 18px;
    color: var(--wc-turquoise-dark);
    background: var(--wc-turquoise-pale);
    padding: 6px 12px;
    border-radius: 999px;
}
.wc-mc__chip--prono {
    font-size: 22px;
    letter-spacing: -0.02em;
    color: var(--wc-turquoise-dark);
    background: var(--wc-turquoise-pale);
    padding: 6px 14px;
    border-radius: 12px;
}
.wc-mc__chip--score {
    font-size: 30px;
    letter-spacing: -0.04em;
    color: var(--wc-ink);
}
.wc-mc__chip--score em,
.wc-mc__chip--prono em { font-style: normal; color: var(--wc-stone); margin: 0 4px; }

/* Pastille de statut dans l'entête */
.wc-mc__status {
    font-family: var(--wc-font-display);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    padding: 3px 9px;
    border-radius: 999px;
}
.wc-mc__status--hero     { background: var(--wc-yellow); color: var(--wc-ink); }
.wc-mc__status--finished { background: var(--wc-violet-pale); color: var(--wc-violet-dark); }
.wc-mc__status--placed   { background: var(--wc-turquoise-pale); color: var(--wc-turquoise-dark); }

/* Variante Hero (match d'ouverture) : plus grand, accent doré */
.wc-mc--hero { box-shadow: 0 10px 30px rgba(0, 0, 0, 0.10); border-color: rgba(0, 0, 0, 0.08); }
.wc-mc--hero .wc-mc__flag { width: 76px; height: 76px; }
.wc-mc--hero .wc-mc__name { font-size: 24px; }
.wc-mc--hero .wc-mc__chip--time { font-size: 22px; }

/* Match terminé : score sobre, surface légèrement grisée */
.wc-mc--finished { background: #FBFAF6; }

/* Scorer prédit (bonus buteur) — ligne pleine largeur */
.wc-mc__scorer {
    grid-column: 1 / -1;
    justify-self: center;
    text-align: center;
    font-size: 11px;
    font-style: italic;
    color: var(--wc-stone);
}
.wc-mc__scorer em { font-style: normal; font-weight: 700; color: var(--wc-ink); }

/* Rappel du prono sur un match terminé */
.wc-mc__myprono {
    grid-column: 2;
    justify-self: center;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: var(--wc-stone);
    white-space: nowrap;
}
.wc-mc__myprono strong { font-family: var(--wc-font-display); font-size: 15px; color: var(--wc-ink); }
.wc-mc__myprono--none { font-style: italic; }
.wc-mc__result {
    font-family: var(--wc-font-display);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    padding: 3px 9px;
    border-radius: 999px;
}
.wc-mc__result--exact { background: var(--wc-yellow); color: var(--wc-ink); }
.wc-mc__result--bon   { background: var(--wc-turquoise-pale); color: var(--wc-turquoise-dark); }
.wc-mc__result--rate  { background: var(--wc-line); color: var(--wc-stone); }

/* Actions en pied : grille [vide | action centrée | voir les pronos à droite] */
.wc-mc__actions {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 10px;
    padding-top: 12px;
    border-top: 1px solid rgba(0, 0, 0, 0.06);
}
.wc-mc__cta {
    grid-column: 2;
    justify-self: center;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    background: var(--wc-turquoise);
    color: var(--wc-ink);
    border: none;
    border-radius: 999px;
    font-family: var(--wc-font-display);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background 100ms linear, transform 80ms ease, box-shadow 120ms ease;
}
.wc-mc__cta:hover:not(:disabled) { background: var(--wc-turquoise-mid); box-shadow: 0 4px 14px rgba(11, 209, 209, 0.35); transform: translateY(-1px); }
.wc-mc__cta:active:not(:disabled) { transform: scale(0.97); }
.wc-mc__cta:focus-visible { outline: none; box-shadow: var(--wc-focus-ring); }
/* Variante "Modifier" : pilule outline discrète (conservée pour rétro-compat) */
.wc-mc__cta--edit { background: var(--wc-paper); color: var(--wc-ink); border: 1.5px solid var(--wc-line); }
.wc-mc__cta--edit:hover:not(:disabled) { background: var(--wc-turquoise-pale); border-color: var(--wc-turquoise); box-shadow: none; }

/* Pari verrouillé : cadenas "Pari déposé" (remplace "Modifier") */
.wc-mc__locked {
    grid-column: 2;
    justify-self: center;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 9px 16px;
    border-radius: 999px;
    background: var(--wc-turquoise-pale);
    color: var(--wc-turquoise-dark);
    font-family: var(--wc-font-display);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}
.wc-mc__locked svg { flex-shrink: 0; }
.wc-mc__locked--clos {
    background: var(--wc-line);
    color: var(--wc-stone);
}
/* "Voir les pronos" à droite — pilule outline avec icône œil (ouvre la popup) */
.wc-mc__actions .wc-peers__trigger {
    grid-column: 3;
    justify-self: end;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    width: auto;
    margin: 0;
    padding: 8px 14px;
    border: 1.5px solid var(--wc-turquoise);
    border-radius: 999px;
    background: var(--wc-paper);
    color: var(--wc-turquoise-dark);
    text-transform: none;
    letter-spacing: 0.02em;
    font-family: var(--wc-font-display);
    font-size: 12px;
    font-weight: 800;
    transition: background 100ms linear, color 100ms linear, box-shadow 120ms ease, transform 80ms ease;
}
.wc-mc__actions .wc-peers__trigger .wc-peers__ico { flex-shrink: 0; }
.wc-mc__actions .wc-peers__trigger:hover:not(:disabled) {
    background: var(--wc-turquoise);
    color: var(--wc-ink);
    box-shadow: 0 4px 12px rgba(11, 209, 209, 0.30);
    transform: translateY(-1px);
}
.wc-mc__actions .wc-peers__trigger:active:not(:disabled) { transform: scale(0.97); }
.wc-mc__actions .wc-peers__trigger:focus-visible { outline: none; box-shadow: var(--wc-focus-ring); }
.wc-mc__actions .wc-peers__trigger--locked {
    border-color: var(--wc-line);
    color: var(--wc-stone);
    background: transparent;
    cursor: not-allowed;
}

@media (max-width: 520px) {
    .wc-mc__teams { gap: 8px; }
    .wc-mc__name { font-size: 16px; }
    .wc-mc__flag { width: 50px; height: 50px; }
    .wc-mc__actions { grid-template-columns: 1fr; justify-items: center; gap: 8px; }
    .wc-mc__cta, .wc-mc__myprono, .wc-mc__actions .wc-peers__trigger { grid-column: 1; justify-self: center; }
}
.wc-peers__trigger {
    display: block;
    width: 100%;
    padding: 8px 14px;
    background: transparent;
    border: 1px solid var(--wc-line);
    border-radius: 10px;
    font-family: var(--wc-font-display);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--wc-stone);
    cursor: pointer;
    transition: background 80ms linear, color 80ms linear, border-color 80ms linear;
}
.wc-peers__trigger:hover:not(:disabled) {
    background: var(--wc-paper);
    color: var(--wc-ink);
    border-color: var(--wc-ink);
}
.wc-peers__trigger--locked {
    cursor: not-allowed;
    font-style: italic;
    text-transform: none;
    letter-spacing: 0.04em;
}
.wc-peers__trigger.is-loading { opacity: 0.5; cursor: wait; }
.wc-peers__trigger[data-expanded="1"] {
    background: var(--wc-ink);
    color: var(--wc-paper);
    border-color: var(--wc-ink);
}

/* Contenu de la popup "Voir les pronos" — homogène avec .wc-pred :
   entête display centré + cartes douces à avatars ronds. */
.wc-peers__head { text-align: center; margin-bottom: 18px; }
.wc-peers__eyebrow {
    font-family: var(--wc-font-display);
    font-size: 22px;
    font-weight: 800;
    letter-spacing: -0.01em;
    text-transform: uppercase;
    color: var(--wc-ink);
    margin: 0 0 5px;
}
.wc-peers__sub {
    margin: 0;
    font-size: 11px;
    font-weight: 600;
    color: var(--wc-stone);
}
.wc-peers__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.wc-peers__item {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 14px;
    padding: 12px 14px;
    background: var(--wc-paper);
    border: 1px solid rgba(0, 0, 0, 0.06);
    border-radius: 14px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.05);
}
.wc-peers__avatar {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--wc-font-display);
    font-size: 16px;
    font-weight: 800;
    color: var(--wc-paper);
    border: 2px solid #fff;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.14);
}
.wc-peers__avatar--myu    { background: var(--wc-turquoise); color: var(--wc-ink); }
.wc-peers__avatar--beelib { background: var(--wc-violet); }
.wc-peers__avatar--ef     { background: var(--wc-yellow); color: var(--wc-ink); }

.wc-peers__who { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; min-width: 0; }
.wc-peers__name {
    font-family: var(--wc-font-display);
    font-size: 15px;
    font-weight: 800;
    color: var(--wc-ink);
    line-height: 1.1;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.wc-peers__entity {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    padding: 2px 9px 2px 7px;
    border-radius: 999px;
    background: var(--wc-line);
    color: var(--wc-ink);
}
.wc-peers__entity::before {
    content: '';
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: currentColor;
    opacity: 0.85;
}
.wc-peers__entity--myu    { background: var(--wc-turquoise-pale); color: var(--wc-turquoise-dark); }
.wc-peers__entity--beelib { background: var(--wc-violet-pale);    color: var(--wc-violet-dark); }
.wc-peers__entity--ef     { background: var(--wc-yellow-pale);    color: var(--wc-yellow-dark); }

.wc-peers__scorer { font-size: 11px; color: var(--wc-stone); margin-top: 1px; }
.wc-peers__scorer em { font-style: normal; font-weight: 700; color: var(--wc-violet-dark); }
.wc-peers__bonus {
    margin-left: 6px;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    color: var(--wc-yellow-dark);
    background: var(--wc-yellow-pale);
    padding: 1px 7px;
    border-radius: 999px;
}

.wc-peers__right { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.wc-peers__score {
    font-family: var(--wc-font-display);
    font-size: 22px;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--wc-turquoise-dark);
    background: var(--wc-turquoise-pale);
    padding: 4px 12px;
    border-radius: 12px;
    line-height: 1;
}
.wc-peers__score em { font-style: normal; color: var(--wc-stone); margin: 0 2px; }
.wc-peers__points {
    font-family: var(--wc-font-display);
    font-size: 13px;
    font-weight: 800;
    color: var(--wc-violet-dark);
}
.wc-peers__points small { font-size: 9px; font-weight: 700; margin-left: 2px; letter-spacing: 0.06em; text-transform: uppercase; }

.wc-peers__loading,
.wc-peers__empty,
.wc-peers__error {
    padding: 28px 16px;
    font-size: 13px;
    color: var(--wc-stone);
    text-align: center;
}
.wc-peers__error { color: var(--wc-alert-dark); }

@media (max-width: 600px) {
    .wc-peers__item { gap: 10px; padding: 11px 12px; }
    .wc-peers__avatar { width: 38px; height: 38px; font-size: 14px; }
    .wc-peers__score { font-size: 19px; }
}

/* === Modal pronostic (E3 / F5) === */
.wc-modal {
    position: fixed;
    inset: 0;
    z-index: 1000;
    background: rgba(0, 0, 0, 0.55);
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 40px 16px;
    overflow-y: auto;
    animation: wc-modal-fade 140ms ease-out;
}
.wc-modal[hidden] { display: none; }
@keyframes wc-modal-fade {
    from { opacity: 0; }
    to   { opacity: 1; }
}
.wc-modal__dialog {
    position: relative;
    width: 100%;
    max-width: 640px;
    background-color: #FFFFFF;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.97), rgba(255, 255, 255, 0.97)),
        url('/img/background.webp');
    background-repeat: no-repeat, repeat;
    background-position: center, top left;
    background-size: cover, 600px auto;
    border: 2px solid var(--wc-ink);
    border-radius: var(--wc-radius-card);
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.18);
    padding: 24px 28px 28px;
    animation: wc-modal-pop 180ms ease-out;
}
@keyframes wc-modal-pop {
    from { transform: translateY(-8px) scale(0.98); opacity: 0; }
    to   { transform: translateY(0)    scale(1);    opacity: 1; }
}
.wc-modal__close {
    position: absolute;
    top: 10px;
    right: 12px;
    width: 32px;
    height: 32px;
    border: none;
    background: transparent;
    font-size: 22px;
    line-height: 1;
    color: var(--wc-ink);
    cursor: pointer;
    border-radius: 8px;
    transition: background-color 80ms linear;
}
.wc-modal__close:hover { background: var(--wc-line); }
.wc-modal__loading,
.wc-modal__error {
    padding: 40px 0;
    text-align: center;
    font-size: 14px;
    color: var(--wc-stone);
}
.wc-modal__error { color: var(--wc-alert-dark); }
body.wc-modal-open { overflow: hidden; }
.wc-modal .wc-prediction__back { display: none; }

/* === Popup pronostic (.wc-pred) — design homogène avec les cartes match === */
.wc-pred__head { text-align: center; margin-bottom: 18px; }
.wc-pred__eyebrow {
    font-family: var(--wc-font-display);
    font-size: 22px;
    font-weight: 800;
    letter-spacing: -0.01em;
    text-transform: uppercase;
    color: var(--wc-ink);
    margin: 0 0 5px;
}
.wc-pred__meta {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px;
    margin: 0;
    font-size: 11px;
    font-weight: 600;
    color: var(--wc-stone);
}
.wc-pred__ref { font-weight: 800; color: var(--wc-ink); }
.wc-pred__sep-dot { color: var(--wc-stone); }

.wc-pred__teams {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 14px;
    margin-bottom: 14px;
}
.wc-pred__team { display: flex; flex-direction: column; align-items: center; gap: 8px; min-width: 0; }
.wc-pred__flag {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    overflow: hidden;
    box-shadow: 0 0 0 3px #fff, 0 3px 10px rgba(0, 0, 0, 0.18);
}
.wc-pred__flag img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
    border: none !important;
    border-radius: 0 !important;
    display: block;
}
.wc-pred__name {
    font-family: var(--wc-font-display);
    font-size: 16px;
    font-weight: 800;
    color: var(--wc-ink);
    text-align: center;
    line-height: 1.1;
}
.wc-pred__vs {
    font-family: var(--wc-font-display);
    font-size: 30px;
    font-weight: 800;
    font-style: italic;
    letter-spacing: -0.02em;
    color: var(--wc-turquoise);
}

.wc-pred__scores {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: start;
    gap: 14px;
}
.wc-pred__score { display: flex; flex-direction: column; align-items: center; gap: 7px; }
.wc-pred__score-input {
    width: 84px;
    height: 84px;
    text-align: center;
    background: var(--wc-paper);
    border: 2px solid var(--wc-line);
    border-radius: 18px;
    font-family: var(--wc-font-display);
    font-size: 40px;
    font-weight: 800;
    color: var(--wc-ink);
    outline: none;
    -moz-appearance: textfield;
    transition: border-color 120ms ease-out, box-shadow 120ms ease-out;
}
.wc-pred__score-input::-webkit-outer-spin-button,
.wc-pred__score-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.wc-pred__score-input:focus { border-color: var(--wc-turquoise); box-shadow: 0 0 0 4px var(--wc-turquoise-pale); }
.wc-pred__score-label {
    max-width: 110px;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    color: var(--wc-stone);
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.wc-pred__score-sep {
    align-self: start;
    margin-top: 22px;
    font-family: var(--wc-font-display);
    font-size: 30px;
    font-weight: 800;
    color: var(--wc-stone);
}
.wc-pred__score-errors { text-align: center; color: var(--wc-alert-dark); font-size: 12px; margin-top: 4px; }

.wc-pred__bonus {
    margin: 18px 0 6px;
    padding: 14px 16px;
    background: var(--wc-violet-pale);
    border: 1px solid var(--wc-violet);
    border-radius: 14px;
}
.wc-pred__bonus-label {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
    font-family: var(--wc-font-display);
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--wc-violet-dark);
}
.wc-pred__bonus-tag {
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    color: var(--wc-paper);
    background: var(--wc-violet);
    padding: 2px 8px;
    border-radius: 999px;
}
.wc-pred__bonus-hint { margin: 5px 0 10px; font-size: 11px; color: var(--wc-stone); }
.wc-pred__bonus-hint em { font-style: normal; font-weight: 700; color: var(--wc-turquoise-dark); }
.wc-pred__bonus-input {
    width: 100%;
    min-height: 44px;
    padding: 10px 14px;
    background: var(--wc-paper);
    border: 1.5px solid var(--wc-violet);
    border-radius: 12px;
    font-family: var(--wc-font-body);
    font-size: 14px;
    color: var(--wc-ink);
    outline: none;
    transition: border-color 120ms ease-out, box-shadow 120ms ease-out;
}
.wc-pred__bonus-input:focus { border-color: var(--wc-violet-mid); box-shadow: 0 0 0 3px var(--wc-violet-pale); }

.wc-pred__actions { display: flex; flex-direction: column; align-items: center; gap: 10px; margin-top: 18px; }
.wc-pred__submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    padding: 15px 22px;
    background: transparent;
    color: var(--wc-turquoise-dark);
    border: 2px solid var(--wc-turquoise);
    border-radius: 999px;
    font-family: var(--wc-font-display);
    font-size: 14px;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background 100ms linear, color 100ms linear, transform 80ms ease, box-shadow 120ms ease;
}
.wc-pred__submit:hover:not(:disabled) { background: var(--wc-turquoise); color: var(--wc-ink); box-shadow: 0 6px 18px rgba(11, 209, 209, 0.30); transform: translateY(-1px); }
.wc-pred__submit:active:not(:disabled) { transform: scale(0.98); }
.wc-pred__submit:focus-visible { outline: none; box-shadow: var(--wc-focus-ring); }
.wc-pred__submit.is-loading { opacity: 0.7; cursor: wait; pointer-events: none; }
.wc-pred__submit-arrow { font-size: 16px; line-height: 1; }
.wc-pred__cancel {
    background: none;
    border: none;
    padding: 4px;
    color: var(--wc-stone);
    font-family: var(--wc-font-body);
    font-size: 12px;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
}
.wc-pred__cancel:hover { color: var(--wc-ink); }

.wc-pred__rules {
    margin: 16px 0 0;
    padding: 11px 14px;
    background: var(--wc-yellow-pale);
    border: 1px solid var(--wc-yellow);
    border-left: 4px solid var(--wc-yellow);
    border-radius: 12px;
    font-size: 12px;
    line-height: 1.5;
    color: var(--wc-yellow-dark);
}
.wc-pred__rules strong { color: var(--wc-ink); font-weight: 800; }

@media (max-width: 460px) {
    .wc-pred__score-input { width: 72px; height: 72px; font-size: 34px; }
}

/* === Page dépose pronostic (E3) === */
.wc-prediction {
    max-width: 640px;
    margin: 0 auto;
    padding: 8px 0 40px;
}
.wc-prediction__back {
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--wc-stone);
    text-decoration: none;
    margin: 0 0 22px;
    transition: color 80ms linear;
}
.wc-prediction__back:hover { color: var(--wc-ink); }
.wc-prediction__eyebrow {
    display: inline-block;
    padding: 5px 10px;
    background: var(--wc-yellow);
    color: var(--wc-ink);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    margin: 0 0 18px;
    transform: rotate(-1.2deg);
}

.wc-prediction__match {
    background: var(--wc-paper);
    border: 2px solid var(--wc-ink);
    border-radius: var(--wc-radius-hero);
    padding: 18px 22px 26px;
    margin: 0 0 28px;
    box-shadow: 6px 6px 0 var(--wc-ink);
}
.wc-prediction__match-meta {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 14px;
    flex-wrap: wrap;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--wc-ink);
    margin-bottom: 22px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--wc-stone);
}
.wc-prediction__match-ref   { color: var(--wc-ink); font-weight: 800; }
.wc-prediction__match-date em { color: var(--wc-violet); font-style: italic; }

.wc-prediction__teams {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 18px;
}
.wc-prediction__team {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    min-width: 0;
}
.wc-prediction__team-name {
    font-family: var(--wc-font-display);
    font-size: clamp(18px, 3vw, 26px);
    font-weight: 800;
    letter-spacing: -0.04em;
    text-align: center;
    line-height: 1.05;
}
.wc-prediction__vs {
    font-family: var(--wc-font-display);
    font-size: 22px;
    font-weight: 800;
    font-style: italic;
    color: var(--wc-violet);
    text-transform: lowercase;
}

.wc-prediction__form {
    background: rgba(255, 255, 255, 0.55);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: var(--wc-radius-glass, 22px);
    padding: 28px 30px;
}

.wc-prediction__error {
    margin: 0 0 18px;
    padding: 12px 14px;
    background: var(--wc-alert-pale);
    color: var(--wc-alert-dark);
    border-left: 3px solid var(--wc-alert);
    font-size: 13px;
    font-weight: 600;
    border-radius: 10px;
}

.wc-prediction__scores {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: end;
    gap: 14px;
    margin: 0 0 24px;
}
.wc-prediction__score {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}
.wc-prediction__score-label {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--wc-stone);
    text-align: center;
    line-height: 1.2;
}
.wc-prediction__score-input {
    width: 96px;
    padding: 18px 12px;
    background: var(--wc-paper);
    border: 1.5px solid var(--wc-ink);
    border-radius: 14px;
    font-family: var(--wc-font-display);
    font-size: 38px;
    font-weight: 800;
    letter-spacing: -0.04em;
    text-align: center;
    color: var(--wc-ink);
    outline: none;
    transition: border-color 120ms linear, box-shadow 120ms linear;
    -moz-appearance: textfield;
}
.wc-prediction__score-input::-webkit-outer-spin-button,
.wc-prediction__score-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.wc-prediction__score-input:focus-visible,
.wc-prediction__score-input:focus {
    border-color: var(--wc-turquoise);
    box-shadow: var(--wc-focus-ring);
}
.wc-prediction__score-sep {
    font-family: var(--wc-font-display);
    font-size: 32px;
    font-weight: 800;
    color: var(--wc-violet);
    padding-bottom: 18px;
}

.wc-prediction__field {
    margin: 0 0 22px;
}
.wc-prediction__field-label {
    display: block;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--wc-stone);
    margin: 0 0 6px;
    padding: 0 4px;
}
.wc-prediction__field-hint {
    font-size: 12px;
    color: var(--wc-stone);
    margin: 0 0 10px;
    padding: 0 4px;
}
.wc-prediction__field-hint em {
    color: var(--wc-yellow-dark);
    font-style: italic;
    font-weight: 700;
}
.wc-prediction__field-input {
    width: 100%;
    min-height: 44px;
    padding: 10px 16px;
    background: var(--wc-paper);
    border: 1.5px solid var(--wc-ink);
    border-radius: var(--wc-radius-input);
    font-family: var(--wc-font-body);
    font-size: 15px;
    font-weight: 500;
    color: var(--wc-ink);
    outline: none;
    transition: border-color 120ms ease-out, box-shadow 120ms ease-out;
}
.wc-prediction__field-input:focus-visible,
.wc-prediction__field-input:focus {
    border-color: var(--wc-turquoise);
    box-shadow: var(--wc-focus-ring);
}

.wc-prediction__actions {
    display: flex;
    align-items: center;
    gap: 16px;
    margin: 24px 0 0;
    flex-wrap: wrap;
}
.wc-prediction__submit {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    flex: 1;
    min-width: 240px;
    padding: 16px 22px;
    background: var(--wc-ink);
    color: var(--wc-paper);
    border: none;
    border-radius: 14px;
    font-family: var(--wc-font-display);
    font-size: 15px;
    font-weight: 800;
    letter-spacing: -0.01em;
    cursor: pointer;
    transition: background 140ms linear, transform 100ms ease;
}
.wc-prediction__submit-arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--wc-turquoise);
    color: var(--wc-ink);
    font-size: 16px;
    font-weight: 800;
    transition: transform 140ms ease, background 140ms linear;
}
.wc-prediction__submit:hover .wc-prediction__submit-arrow {
    background: var(--wc-yellow);
    transform: translateX(4px);
}
.wc-prediction__submit:active { transform: scale(0.985); }
.wc-prediction__cancel {
    color: var(--wc-stone);
    text-decoration: none;
    font-size: 13px;
    font-style: italic;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    font-family: inherit;
}
.wc-prediction__cancel:hover { color: var(--wc-ink); }

.wc-prediction__rules {
    margin: 28px 0 0;
    padding: 14px 18px;
    background: var(--wc-yellow-pale);
    border-left: 3px solid var(--wc-yellow);
    font-size: 12px;
    color: var(--wc-ink);
    line-height: 1.5;
}
.wc-prediction__rules strong { font-weight: 800; }

@media (max-width: 520px) {
    .wc-prediction__teams { grid-template-columns: 1fr; gap: 16px; }
    .wc-prediction__vs { transform: rotate(90deg); }
    .wc-prediction__score-input { width: 84px; padding: 14px 10px; font-size: 32px; }
    .wc-prediction__submit { min-width: 0; width: 100%; }
}

/* === Dashboard admin (E8) === */
.wc-admin__head {
    margin: 0 0 28px;
}
.wc-admin__eyebrow {
    display: inline-block;
    padding: 5px 12px;
    background: rgba(30, 34, 48, 0.07);
    color: var(--wc-ink);
    border-radius: 999px;
    font-family: var(--wc-font-display);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    margin: 0 0 12px;
}
.wc-admin__title {
    font-family: var(--wc-font-display);
    font-size: clamp(32px, 4.5vw, 48px);
    font-weight: 800;
    letter-spacing: -0.04em;
    line-height: 1;
    margin: 0 0 12px;
}
.wc-admin__title em { color: var(--wc-violet); font-style: italic; }
.wc-admin__meta {
    display: flex;
    align-items: baseline;
    gap: 10px;
    flex-wrap: wrap;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: var(--wc-stone);
}
.wc-admin__counter b {
    font-family: var(--wc-font-display);
    font-size: 18px;
    font-weight: 800;
    color: var(--wc-ink);
    margin-right: 4px;
}
.wc-admin__counter b.t { color: var(--wc-turquoise-dark); }
.wc-admin__counter b.v { color: var(--wc-violet-mid); }
.wc-admin__sep { color: var(--wc-stone); }

/* Table admin */
.wc-admin__phase {
    overflow-x: auto;
}
/* === Système tableau unifié .wc-table (Lot 2) ===
   Base partagée entre les tableaux admin et classement.
   Zebra subtile, hover homogène, sticky header optionnel,
   rythme vertical 44px. Les classes existantes
   (wc-admin__table, wc-ranking__table) gardent leur API
   et héritent visuellement des mêmes règles. */
.wc-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    background: var(--wc-paper);
    border: 2px solid var(--wc-ink);
    border-radius: var(--wc-radius-card);
    overflow: hidden;
    font-size: 13px;
}
.wc-table thead { background: var(--wc-ink); color: var(--wc-paper); }
.wc-table th {
    padding: 14px 16px;
    text-align: left;
    font-family: var(--wc-font-display);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    white-space: nowrap;
}
.wc-table td {
    padding: 14px 16px;
    border-top: 1px solid var(--wc-line);
    vertical-align: middle;
    transition: background 120ms ease-out;
}
.wc-table tbody tr:nth-child(even) td { background: var(--wc-row-zebra); }
.wc-table tbody tr:hover td { background: var(--wc-row-hover); }
.wc-table--sticky thead th {
    position: sticky;
    top: 0;
    z-index: 2;
}
.wc-table__actions { text-align: right; }
.wc-table__num     { text-align: right; font-variant-numeric: tabular-nums; }
.wc-table__center  { text-align: center; }

/* Status pill harmonisée (admin matches + autres usages) */
.wc-pill {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 999px;
    font-family: var(--wc-font-display);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.20em;
    text-transform: uppercase;
    border: 1.5px solid currentColor;
}
.wc-pill--neutral { color: var(--wc-stone); background: var(--wc-line); border-color: transparent; }
.wc-pill--info    { color: var(--wc-turquoise-dark); background: var(--wc-turquoise-pale); border-color: transparent; }
.wc-pill--warning { color: var(--wc-yellow-dark);    background: var(--wc-yellow-pale);    border-color: transparent; }
.wc-pill--success { color: var(--wc-violet-dark);    background: var(--wc-violet-pale);    border-color: transparent; }
.wc-pill--danger  { color: var(--wc-alert-dark);     background: var(--wc-alert-pale);     border-color: transparent; }

/* === Table admin : hérite de .wc-table === */
.wc-admin__table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    background: var(--wc-paper);
    border: 1px solid rgba(0, 0, 0, 0.06);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 6px 22px rgba(0, 0, 0, 0.05);
    font-size: 13px;
}
.wc-admin__table thead {
    background: var(--wc-ink);
    color: var(--wc-paper);
}
.wc-admin__table th {
    padding: 14px 16px;
    text-align: left;
    font-family: var(--wc-font-display);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    white-space: nowrap;
}
.wc-admin__table-actions { text-align: right; }
.wc-admin__table td {
    padding: 14px 16px;
    border-top: 1px solid var(--wc-line);
    vertical-align: middle;
    transition: background 120ms ease-out;
}
.wc-admin__table tbody tr:nth-child(even) td { background: var(--wc-row-zebra); }
.wc-admin__row:hover td { background: var(--wc-row-hover); }
.wc-admin__row--avenir   { /* default */ }
.wc-admin__row--clos td   { background: rgba(255, 212, 0, 0.07); }
.wc-admin__row--clos:hover td { background: rgba(255, 212, 0, 0.14); }
.wc-admin__row--terminé td,
.wc-admin__row--termine td { background: rgba(161, 119, 255, 0.05); }
.wc-admin__row--terminé:hover td,
.wc-admin__row--termine:hover td { background: rgba(161, 119, 255, 0.12); }

.wc-admin__cell-ref strong { font-family: var(--wc-font-display); font-weight: 800; }
.wc-admin__cell-sub { color: var(--wc-stone); font-size: 11px; }
.wc-admin__cell-date { font-weight: 700; }

.wc-admin__cell-teams {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    min-width: 220px;
}
.wc-admin__teams {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 600;
}
.wc-admin__vs {
    color: var(--wc-stone);
    font-style: italic;
    font-size: 12px;
}

.wc-admin__cell-score strong {
    font-family: var(--wc-font-display);
    font-size: 18px;
    font-weight: 800;
    color: var(--wc-ink);
}

.wc-admin__statut {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 999px;
    font-family: var(--wc-font-display);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.20em;
    text-transform: uppercase;
}
.wc-admin__statut--avenir   { background: var(--wc-turquoise-pale); color: var(--wc-turquoise-dark); }
.wc-admin__statut--clos     { background: var(--wc-yellow-pale);    color: var(--wc-yellow-dark); }
.wc-admin__statut--terminé,
.wc-admin__statut--termine  { background: var(--wc-violet-pale);    color: var(--wc-violet-dark); }

.wc-admin__cell-actions {
    text-align: right;
    white-space: nowrap;
}
.wc-admin__inline-form {
    display: inline-block;
    margin-left: 4px;
}
.wc-admin__action {
    display: inline-flex;
    align-items: center;
    padding: 8px 14px;
    border: 1.5px solid transparent;
    border-radius: 999px;
    background: var(--wc-paper);
    color: var(--wc-ink);
    font-family: var(--wc-font-display);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-decoration: none;
    cursor: pointer;
    transition: background 100ms linear, color 100ms linear, box-shadow 120ms ease, transform 80ms ease;
    margin-left: 4px;
}
.wc-admin__action:hover:not(:disabled) { box-shadow: 0 3px 10px rgba(0, 0, 0, 0.14); transform: translateY(-1px); }
.wc-admin__action:active:not(:disabled) { transform: scale(0.97); }
.wc-admin__action--lock   { background: var(--wc-yellow); color: var(--wc-ink); }
.wc-admin__action--finish { background: var(--wc-turquoise); color: var(--wc-ink); }
.wc-admin__action--edit   { background: var(--wc-violet); color: var(--wc-paper); }
.wc-admin__action--violet { background: var(--wc-violet); color: var(--wc-paper); }
.wc-admin__action--ghost  { background: transparent; color: var(--wc-stone); border-color: var(--wc-line); }
.wc-admin__action--ghost:hover { background: rgba(0, 0, 0, 0.04); color: var(--wc-ink); box-shadow: none; transform: none; }

@media (max-width: 720px) {
    .wc-admin__table { font-size: 12px; }
    .wc-admin__cell-teams { flex-direction: column; align-items: flex-start; gap: 4px; }
    .wc-admin__vs { display: none; }
}

/* === Filtres admin predictions === */
.wc-admin__filters {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    align-items: flex-end;
    padding: 18px 20px;
    background: var(--wc-paper);
    border: 1.5px solid var(--wc-ink);
    border-radius: var(--wc-radius-card);
    margin: 0 0 22px;
}
.wc-admin__filter-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 180px;
    flex: 1;
}
.wc-admin__filter-field label {
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--wc-stone);
}
.wc-admin__filter-field input,
.wc-admin__filter-field select {
    min-height: 40px;
    padding: 8px 12px;
    background: var(--wc-paper);
    border: 1.5px solid var(--wc-line);
    border-radius: var(--wc-radius-input);
    font-family: var(--wc-font-body);
    font-size: 13px;
    color: var(--wc-ink);
    outline: none;
    transition: border-color 120ms ease-out, box-shadow 120ms ease-out;
}
.wc-admin__filter-field input:focus-visible,
.wc-admin__filter-field select:focus-visible,
.wc-admin__filter-field input:focus,
.wc-admin__filter-field select:focus {
    border-color: var(--wc-turquoise);
    box-shadow: var(--wc-focus-ring);
}
.wc-admin__filter-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Sync stats form */
.wc-admin__sync-form {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 18px;
    background: var(--wc-violet-pale);
    border: 1.5px solid var(--wc-violet);
    border-radius: var(--wc-radius-card);
    margin: 0 0 22px;
}
.wc-admin__sync-hint {
    font-size: 11px;
    color: var(--wc-violet-dark);
    font-style: italic;
}

/* Bonus toggle button */
.wc-admin__bonus-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border: 1.5px solid var(--wc-line);
    border-radius: 999px;
    background: var(--wc-paper);
    color: var(--wc-stone);
    font-family: var(--wc-font-display);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background 120ms linear, color 120ms linear, transform 80ms ease;
    position: relative;
}
.wc-admin__bonus-toggle::before {
    content: '';
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--wc-stone);
    margin-right: 2px;
}
.wc-admin__bonus-toggle.is-active {
    background: var(--wc-yellow);
    color: var(--wc-ink);
}
.wc-admin__bonus-toggle.is-active::before {
    background: var(--wc-ink);
}
.wc-admin__bonus-toggle:hover { transform: scale(1.03); }
.wc-admin__bonus-toggle.is-loading {
    opacity: 0.5;
    cursor: wait;
}
.wc-admin__bonus-toggle:disabled { cursor: not-allowed; }

/* === Flash toast (AJAX) === */
.wc-flash-zone {
    position: fixed;
    top: 80px;
    right: 24px;
    z-index: 1000;
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-width: 360px;
}
.wc-flash-toast {
    padding: 12px 16px;
    background: var(--wc-paper);
    border: 1.5px solid var(--wc-ink);
    border-radius: 12px;
    box-shadow: 4px 4px 0 var(--wc-ink);
    font-size: 13px;
    font-weight: 700;
    color: var(--wc-ink);
    animation: wc-toast-in 180ms ease-out;
}
.wc-flash-toast--success {
    background: var(--wc-turquoise-pale);
    border-color: var(--wc-turquoise);
    color: var(--wc-turquoise-dark);
}
.wc-flash-toast--error {
    background: var(--wc-alert-pale);
    border-color: var(--wc-alert);
    color: var(--wc-alert-dark);
}
.wc-flash-toast--warning {
    background: var(--wc-yellow-pale);
    border-color: var(--wc-yellow);
    color: var(--wc-yellow-dark);
}
.wc-flash-toast--info {
    background: var(--wc-violet-pale);
    border-color: var(--wc-violet);
    color: var(--wc-violet-dark);
}
.wc-flash-toast.is-leaving {
    opacity: 0;
    transform: translateY(-6px);
    transition: opacity 200ms linear, transform 200ms ease;
}
@keyframes wc-toast-in {
    from { opacity: 0; transform: translateY(-12px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* === Classement (E5) — design homogène avec les cartes match === */
.wc-ranking__head { margin: 0 0 20px; }
.wc-ranking__eyebrow {
    display: inline-block;
    padding: 5px 12px;
    background: var(--wc-turquoise-pale);
    color: var(--wc-turquoise-dark);
    border-radius: 999px;
    font-family: var(--wc-font-display);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    margin: 0 0 12px;
}
.wc-ranking__title {
    font-family: var(--wc-font-display);
    font-size: clamp(32px, 4.5vw, 48px);
    font-weight: 800;
    letter-spacing: -0.04em;
    line-height: 1;
    margin: 0 0 10px;
}
.wc-ranking__title em { color: var(--wc-turquoise); font-style: italic; }
.wc-ranking__meta { font-size: 12px; font-weight: 600; color: var(--wc-stone); }

/* Onglets entité — bandeau segmenté unique piloté par les logos (classement).
   Track = carte douce ; segments jointifs ; actif = pastille teintée par entité. */
.wc-tabs--pills {
    display: flex;
    align-items: stretch;
    width: fit-content;
    max-width: 100%;
    margin: 0 auto 28px;
    padding: 5px;
    gap: 0;
    background: var(--wc-paper);
    border: 1px solid var(--wc-border-soft);
    border-radius: 999px;
    box-shadow: var(--wc-elev-card);
}
.wc-tabs--pills .wc-tabs__tab {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 7px 20px 7px 12px;
    border: none;
    border-radius: 999px;
    background: transparent;
    box-shadow: none;
    font-family: var(--wc-font-display);
    font-size: 15px;
    font-weight: 800;
    letter-spacing: 0.01em;
    text-transform: none;
    color: var(--wc-stone);
    text-decoration: none;
    transition: color 120ms ease-out, background 120ms ease-out;
}
.wc-tabs--pills .wc-tabs__tab::after { display: none; }
/* Logo d'entité — pleine couleur, bien visible (lockup myu/beelib, icône ef) */
.wc-tabs__logo {
    height: 34px;
    width: auto;
    max-width: 120px;
    object-fit: contain;
    flex-shrink: 0;
    display: block;
}
.wc-tabs--pills .wc-tabs__tab:hover { color: var(--wc-ink); }
.wc-tabs--pills .wc-tabs__tab:focus-visible { outline: none; box-shadow: var(--wc-focus-ring); }
/* Actif : pastille teintée par l'entité dans le bandeau */
.wc-tabs--pills .wc-tabs__tab--turquoise.wc-tabs__tab--active {
    background: var(--wc-turquoise-pale);
    color: var(--wc-turquoise-dark);
}
.wc-tabs--pills .wc-tabs__tab--violet.wc-tabs__tab--active {
    background: var(--wc-violet-pale);
    color: var(--wc-violet-dark);
}
.wc-tabs--pills .wc-tabs__tab--yellow.wc-tabs__tab--active {
    background: var(--wc-yellow-pale);
    color: var(--wc-yellow-dark);
}
/* Logo EF (fond blanc non transparent) : fondu dans la pastille quand actif */
.wc-tabs--pills .wc-tabs__tab--active .wc-tabs__logo--ef { mix-blend-mode: multiply; }
/* Mobile : bandeau resserré, scroll horizontal si trop étroit */
@media (max-width: 560px) {
    .wc-tabs--pills { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .wc-tabs__logo { height: 26px; max-width: 96px; }
    .wc-tabs--pills .wc-tabs__tab { font-size: 13px; padding: 6px 14px 6px 8px; gap: 8px; }
}

/* Podium top 3 — cartes douces + avatars à anneau médaille */
.wc-podium {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 14px;
    align-items: end;
    margin: 8px 0 28px;
    padding-top: 14px;
}
@media (prefers-reduced-motion: reduce) {
    .wc-podium__medal,
    .wc-podium__crown { animation: none !important; }
}
.wc-podium__slot {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 18px 14px 16px;
    background: var(--wc-paper);
    border: 1px solid rgba(0, 0, 0, 0.06);
    border-top: 3px solid var(--wc-line);
    border-radius: 18px 18px 8px 8px;
    box-shadow: 0 6px 22px rgba(0, 0, 0, 0.06);
    text-align: center;
    position: relative;
}
/* Marches 3D : hauteurs étagées + socle coloré (face avant) */
.wc-podium__slot--gold {
    border-top-color: #ECCF6A;
    background: #FEFAEC;
    box-shadow: 0 14px 38px rgba(236, 207, 106, 0.32);
    padding: 26px 16px 22px;
    min-height: 250px;
    border-bottom: 8px solid #D9BC5A;
}
.wc-podium__slot--silver { min-height: 212px; border-bottom: 8px solid #7E8696; background: #F5F7FA; border-top-color: #AEB4C2; }
.wc-podium__slot--bronze { min-height: 188px; border-bottom: 8px solid #93613f; background: #FBF5EF; border-top-color: #C08457; }
.wc-podium__slot--pos-1 { order: 2; }
.wc-podium__slot--pos-2 { order: 1; }
.wc-podium__slot--pos-3 { order: 3; }
@media (min-width: 721px) { .wc-podium__slot--gold { transform: translateY(-14px); } }

/* Couronne (1er) — flotte aussi */
.wc-podium__crown { color: #E8C95E; margin-bottom: 2px; filter: drop-shadow(0 2px 6px rgba(217, 188, 90, 0.5)); animation: wc-podium-float 3s ease-in-out infinite; }

/* Médaille = disque néon flottant avec le rang */
.wc-podium__medal {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--wc-font-display);
    font-size: 24px;
    font-weight: 800;
    line-height: 1;
    color: #fff;
    border: 3px solid #fff;
    animation: wc-podium-float 3.2s ease-in-out infinite;
}
@keyframes wc-podium-float {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-7px); }
}
.wc-podium__slot--gold   .wc-podium__medal { width: 62px; height: 62px; font-size: 30px; background: linear-gradient(145deg, #FDF1C2 0%, #F2D77E 52%, #E4C257 100%); color: #6B5618; box-shadow: 0 0 0 4px rgba(236, 207, 106, 0.30), 0 0 22px rgba(236, 207, 106, 0.60), 0 8px 18px rgba(0, 0, 0, 0.16); animation-delay: 0.1s; }
.wc-podium__slot--silver .wc-podium__medal { background: #AEB4C2; box-shadow: 0 0 0 4px rgba(11, 209, 209, 0.18), 0 0 20px rgba(11, 209, 209, 0.55), 0 6px 14px rgba(0, 0, 0, 0.18); }
.wc-podium__slot--bronze .wc-podium__medal { background: #C08457; box-shadow: 0 0 0 4px rgba(192, 132, 87, 0.20), 0 0 18px rgba(192, 132, 87, 0.55), 0 6px 14px rgba(0, 0, 0, 0.18); }

/* Label de place */
.wc-podium__place {
    font-family: var(--wc-font-display);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    padding: 3px 9px;
    border-radius: 999px;
}
.wc-podium__slot--gold   .wc-podium__place { color: #9A7B22; background: #FBF1CF; }
.wc-podium__slot--silver .wc-podium__place { color: #5f6677; background: #EEF0F4; }
.wc-podium__slot--bronze .wc-podium__place { color: #8a5a3b; background: #F4E7DD; }
.wc-podium__name {
    font-family: var(--wc-font-display);
    font-size: 16px;
    font-weight: 800;
    letter-spacing: -0.01em;
    color: var(--wc-ink);
    line-height: 1.2;
}
.wc-podium__slot--gold .wc-podium__name { font-size: 18px; }
.wc-podium__name--me em { color: var(--wc-turquoise-dark); font-style: italic; }
.wc-podium__pts {
    font-family: var(--wc-font-display);
    font-size: 24px;
    font-weight: 800;
    color: var(--wc-turquoise-dark);
    background: var(--wc-turquoise-pale);
    padding: 4px 14px;
    border-radius: 999px;
    line-height: 1.2;
}
.wc-podium__slot--gold .wc-podium__pts { font-size: 28px; }
.wc-podium__pts small { font-size: 9px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; margin-left: 3px; }
.wc-podium__detail { font-size: 10px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--wc-stone); }

/* Tableau détaillé — carte douce, header turquoise */
.wc-ranking__table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    background: var(--wc-paper);
    border: 1px solid rgba(0, 0, 0, 0.06);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 6px 22px rgba(0, 0, 0, 0.05);
    font-size: 13px;
}
.wc-ranking__table thead { background: var(--wc-violet); color: var(--wc-paper); }
.wc-ranking__table th {
    padding: 13px 16px;
    text-align: left;
    font-family: var(--wc-font-display);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    white-space: nowrap;
}
.wc-ranking__th-rank { width: 56px; text-align: center; }
.wc-ranking__th-num  { width: 78px; text-align: right; }
.wc-ranking__table td {
    padding: 12px 16px;
    border-top: 1px solid var(--wc-line);
    vertical-align: middle;
    transition: background 120ms ease-out;
}
.wc-ranking__table tbody tr:nth-child(even) td { background: rgba(0, 0, 0, 0.015); }
.wc-ranking__row:hover td { background: var(--wc-violet-pale); }
.wc-ranking__row--me td { background: var(--wc-violet-pale); }
.wc-ranking__row--me td:first-child { box-shadow: inset 3px 0 0 var(--wc-violet); }
.wc-ranking__cell-rank {
    text-align: center;
    font-family: var(--wc-font-display);
    font-size: 16px;
    font-weight: 800;
    color: var(--wc-stone);
}
.wc-ranking__cell-name { display: flex; align-items: center; gap: 10px; }
.wc-ranking__avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--wc-violet-pale);
    color: var(--wc-violet-dark);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--wc-font-display);
    font-size: 13px;
    font-weight: 800;
    border: 2px solid #fff;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
}
.wc-ranking__row--me .wc-ranking__avatar { background: var(--wc-violet); color: var(--wc-paper); }
.wc-ranking__me {
    color: var(--wc-violet-mid);
    font-style: italic;
    font-weight: 700;
    margin-left: 6px;
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.wc-ranking__cell-num { text-align: right; font-family: var(--wc-font-display); }
.wc-ranking__cell-num strong { font-size: 16px; font-weight: 800; color: var(--wc-ink); }
.wc-ranking__count { display: inline-block; min-width: 24px; text-align: center; font-weight: 800; color: var(--wc-stone); }
.wc-ranking__count--exact  { color: var(--wc-violet-dark); }
.wc-ranking__count--result { color: var(--wc-violet-mid); }
.wc-ranking__count--bonus  { color: var(--wc-yellow-dark); }

@media (max-width: 720px) {
    .wc-podium { grid-template-columns: 1fr; gap: 12px; }
    .wc-podium__slot { order: initial !important; transform: none; }
    .wc-podium__slot--gold { padding: 24px 14px 16px; }
    .wc-ranking__table { font-size: 12px; }
    .wc-ranking__cell-name { gap: 8px; }
    .wc-ranking__avatar { width: 28px; height: 28px; font-size: 11px; }
    .wc-ranking__th-num { width: 56px; }
}

/* === Profil user (E6) === */
.wc-profile__head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px 24px;
    margin: 0 0 28px;
}
.wc-profile__head-id { min-width: 0; }
.wc-profile__eyebrow {
    display: inline-block;
    padding: 5px 12px;
    background: var(--wc-violet-pale);
    color: var(--wc-violet-dark);
    border-radius: 999px;
    font-family: var(--wc-font-display);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    margin: 0 0 12px;
}
.wc-profile__title {
    font-family: var(--wc-font-display);
    font-size: clamp(32px, 4.5vw, 48px);
    font-weight: 800;
    letter-spacing: -0.04em;
    line-height: 1;
    margin: 0 0 6px;
}
.wc-profile__entity {
    font-size: 13px;
    color: var(--wc-stone);
    margin: 0;
}
.wc-profile__entity em {
    color: var(--wc-ink);
    font-style: italic;
    font-weight: 700;
}

.wc-kpi-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
    margin: 0 0 26px;
}
.wc-kpi-card {
    padding: 16px 18px;
    background: var(--wc-paper);
    border: 1px solid rgba(0, 0, 0, 0.06);
    border-radius: 16px;
    box-shadow: 0 6px 22px rgba(0, 0, 0, 0.06);
    display: flex;
    flex-direction: column;
    gap: 4px;
}
/* 1re carte = héro plein violet (identité) ; les autres = blanches, valeur colorée */
.wc-kpi-card--primary { background: var(--wc-violet); color: var(--wc-paper); border-color: var(--wc-violet); box-shadow: 0 10px 28px rgba(161, 119, 255, 0.30); }
.wc-kpi-card--turquoise .wc-kpi-card__value { color: var(--wc-turquoise-dark); }
.wc-kpi-card--violet    .wc-kpi-card__value { color: var(--wc-violet-mid); }
.wc-kpi-card--yellow    .wc-kpi-card__value { color: var(--wc-yellow-dark); }
.wc-kpi-card__label {
    font-family: var(--wc-font-display);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--wc-stone);
}
.wc-kpi-card--primary .wc-kpi-card__label { color: rgba(255, 255, 255, 0.78); }
.wc-kpi-card__value {
    font-family: var(--wc-font-display);
    font-size: 38px;
    font-weight: 800;
    letter-spacing: -0.04em;
    line-height: 1;
}
.wc-kpi-card__unit {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--wc-stone);
}
.wc-kpi-card--primary .wc-kpi-card__unit { color: rgba(255, 255, 255, 0.78); }

.wc-profile__actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    align-items: center;
}
.wc-profile__link {
    display: inline-flex;
    align-items: center;
    padding: 10px 18px;
    border: 1.5px solid var(--wc-line);
    border-radius: 999px;
    background: var(--wc-paper);
    color: var(--wc-ink);
    font-family: var(--wc-font-display);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    text-decoration: none;
    transition: background 100ms linear, color 100ms linear, border-color 100ms linear;
}
.wc-profile__link:hover { background: var(--wc-turquoise-pale); border-color: var(--wc-turquoise); color: var(--wc-ink); }
.wc-profile__link--danger { color: var(--wc-alert-dark); border-color: var(--wc-alert-pale); }
.wc-profile__link--danger:hover { background: var(--wc-alert-pale); border-color: var(--wc-alert); color: var(--wc-alert-dark); }

.wc-profile__section-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    border-bottom: 1px solid var(--wc-line);
    padding: 0 0 10px;
    margin: 0 0 18px;
}
.wc-profile__section-head h2 {
    font-family: var(--wc-font-display);
    font-size: 22px;
    font-weight: 800;
    letter-spacing: -0.03em;
    margin: 0;
}
.wc-profile__section-meta {
    font-size: 11px;
    color: var(--wc-stone);
    letter-spacing: 0.10em;
    text-transform: uppercase;
    font-weight: 700;
}

.wc-profile__list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.wc-profile__row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 232px 150px;
    gap: 18px;
    align-items: center;
    padding: 14px 18px;
    background: var(--wc-paper);
    border: 1px solid rgba(0, 0, 0, 0.06);
    border-radius: 16px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.05);
}
.wc-profile__row--win  { box-shadow: 0 4px 16px rgba(0, 0, 0, 0.05), inset 4px 0 0 var(--wc-turquoise); }
.wc-profile__row--loss { box-shadow: 0 4px 16px rgba(0, 0, 0, 0.05), inset 4px 0 0 var(--wc-line); }
/* Flags ronds (homogène avec les cartes) */
.wc-profile__row-teams img {
    width: 24px !important;
    height: 24px !important;
    border-radius: 50% !important;
    object-fit: cover;
    border: 1.5px solid #fff !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
}

.wc-profile__row-match {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.wc-profile__row-ref {
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.20em;
    text-transform: uppercase;
    color: var(--wc-stone);
}
.wc-profile__row-teams {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 700;
}
.wc-profile__row-vs { color: var(--wc-stone); font-style: italic; font-size: 12px; }
.wc-profile__row-date {
    font-size: 11px;
    color: var(--wc-stone);
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

/* Sous-grille fixe : « Mon prono » toujours en colonne 1, « Score réel »
   toujours en colonne 2 → alignement constant d'une ligne à l'autre. */
.wc-profile__row-scores {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    align-items: stretch;
}
.wc-profile__row-pred,
.wc-profile__row-real {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 2px;
    padding: 6px 10px;
    border-radius: 8px;
}
.wc-profile__row-pred { background: rgba(255, 255, 255, 0.6); }
.wc-profile__row-real { background: var(--wc-ink); color: var(--wc-paper); }
.wc-profile__row-pred-label,
.wc-profile__row-real-label {
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--wc-stone);
}
.wc-profile__row-real-label { color: var(--wc-paper); opacity: 0.7; }
.wc-profile__row-pred-score,
.wc-profile__row-real-score {
    font-family: var(--wc-font-display);
    font-size: 18px;
    font-weight: 800;
    letter-spacing: -0.04em;
}
.wc-profile__row-scorer {
    font-size: 11px;
    color: var(--wc-stone);
    margin-top: 2px;
}
.wc-profile__row-scorer em { color: var(--wc-yellow-dark); font-style: italic; font-weight: 700; }
.wc-profile__row-bonus-pill {
    display: inline-block;
    background: var(--wc-yellow);
    color: var(--wc-ink);
    padding: 1px 6px;
    border-radius: 6px;
    font-size: 8px;
    font-weight: 800;
    letter-spacing: 0.20em;
    text-transform: uppercase;
    margin-left: 4px;
}

.wc-profile__row-status {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
    text-align: right;
}
.wc-profile__row-points {
    font-family: var(--wc-font-display);
    font-size: 28px;
    font-weight: 800;
    letter-spacing: -0.04em;
    color: var(--wc-ink);
    line-height: 1;
}
.wc-profile__row-points small {
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.20em;
    text-transform: uppercase;
    color: var(--wc-stone);
    margin-left: 2px;
}
.wc-profile__row-label {
    display: inline-flex;
    gap: 4px;
    flex-wrap: wrap;
    justify-content: flex-end;
}
.wc-profile__row-tag {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}
.wc-profile__row-tag--exact    { background: var(--wc-yellow);        color: var(--wc-ink); }
.wc-profile__row-tag--result   { background: var(--wc-turquoise-pale); color: var(--wc-turquoise-dark); }
.wc-profile__row-tag--miss     { background: var(--wc-line);          color: var(--wc-stone); }
.wc-profile__row-tag--bonus    { background: var(--wc-violet-pale);    color: var(--wc-violet-dark); }
.wc-profile__row-tag--pending  { background: var(--wc-turquoise-pale); color: var(--wc-turquoise-dark); }
.wc-profile__row-tag--clos     { background: var(--wc-yellow-pale);    color: var(--wc-yellow-dark); }

.wc-profile__row-edit {
    font-size: 11px;
    color: var(--wc-turquoise-dark);
    text-decoration: underline;
    text-underline-offset: 3px;
    margin-top: 2px;
    font-weight: 700;
}

@media (max-width: 720px) {
    .wc-kpi-grid { grid-template-columns: repeat(2, 1fr); }
    .wc-profile__row { grid-template-columns: 1fr; }
    .wc-profile__row-status { align-items: flex-start; text-align: left; }
}

/* === Header ===
   Bande papier claire, 3 zones : lockup logos · navigation · pill profil.
   Tout en tokens --wc-* (couleurs/ombres/rayons) ; aucune valeur de couleur
   ou d'ombre en dur. Cf. DESIGN-SYSTEM.md §2. */
.wc-header {
    position: sticky;
    top: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--wc-space-lg);
    height: var(--wc-header-height);
    padding: 0 var(--wc-space-2xl);
    background: var(--wc-paper);
    border-bottom: 1px solid var(--wc-border-soft);
}

/* --- Zone gauche : hamburger (mobile) + lockup logos --- */
.wc-header__left { display: inline-flex; align-items: center; gap: var(--wc-space-md); flex-shrink: 0; }
.wc-header__burger {
    display: none; /* visible en mobile uniquement */
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: none;
    border-radius: var(--wc-radius-input);
    background: transparent;
    color: var(--wc-ink);
    cursor: pointer;
    transition: background 100ms ease-out;
}
.wc-header__burger:hover { background: var(--wc-line); }
.wc-header__burger:focus-visible { outline: none; box-shadow: var(--wc-focus-ring); }
.wc-header__brand {
    display: inline-flex;
    align-items: center;
    gap: var(--wc-space-md);
    height: 44px;
    text-decoration: none;
    flex-shrink: 0;
}
.wc-header__logo { display: inline-flex; align-items: center; height: 44px; }
.wc-header__logo img { display: block; height: 36px; width: auto; object-fit: contain; }
.wc-header__brand-sep {
    font-family: var(--wc-font-display);
    font-size: 22px;
    font-weight: 800;
    line-height: 1;
    color: var(--wc-violet);
}

/* --- Zone centre : navigation --- */
.wc-header__nav {
    display: flex;
    align-items: center;
    gap: var(--wc-space-2xl);
}
.wc-header__nav-link {
    position: relative;
    padding: 6px 0;
    font-family: var(--wc-font-display);
    font-size: 14px;
    font-weight: 500;
    color: var(--wc-stone);
    text-decoration: none;
    white-space: nowrap;
    transition: color 120ms ease-out;
}
/* Soulignement turquoise : slide gauche→droite au hover, plein si actif */
.wc-header__nav-link::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -4px;
    height: 2px;
    border-radius: 2px;
    background: var(--wc-turquoise);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 120ms ease-out;
}
.wc-header__nav-link:hover { color: var(--wc-ink); }
.wc-header__nav-link:hover::after { transform: scaleX(1); }
.wc-header__nav-link--active { color: var(--wc-ink); font-weight: 800; }
.wc-header__nav-link--active::after { transform: scaleX(1); }
.wc-header__nav-link:focus-visible {
    outline: none;
    border-radius: var(--wc-radius-chip);
    box-shadow: var(--wc-focus-ring);
}

/* --- Zone droite : pill profil --- */
.wc-user { position: relative; flex-shrink: 0; }
.wc-user-pill {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 6px 14px 6px 6px;
    background: var(--wc-paper);
    border: 1px solid var(--wc-border-soft);
    border-radius: 999px;
    box-shadow: var(--wc-elev-card);
    cursor: pointer;
    transition: box-shadow 120ms ease-out, transform 120ms ease-out;
}
.wc-user-pill:hover { box-shadow: var(--wc-elev-hover); transform: translateY(-2px); }
.wc-user-pill:active { transform: var(--wc-btn-tap); }
.wc-user-pill:focus-visible { outline: none; box-shadow: var(--wc-focus-ring); }

.wc-user-pill__avatar {
    position: relative;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--wc-font-display);
    font-size: 13px;
    font-weight: 800;
    color: var(--wc-ink);
    border: 2px solid var(--wc-paper);
    box-shadow: var(--wc-elev-avatar);
    flex-shrink: 0;
}
/* Couleur d'avatar par entité (pill + menu) */
.wc-user-pill__avatar--myu,    .wc-user-menu__avatar--myu    { background: var(--wc-turquoise); color: var(--wc-ink); }
.wc-user-pill__avatar--beelib, .wc-user-menu__avatar--beelib { background: var(--wc-violet);    color: var(--wc-paper); }
.wc-user-pill__avatar--ef,     .wc-user-menu__avatar--ef     { background: var(--wc-yellow);    color: var(--wc-ink); }

/* Easter-egg : badge ★ si ≥ 100 pts */
.wc-user-pill__star {
    position: absolute;
    top: -3px;
    right: -3px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 8px;
    line-height: 1;
    color: var(--wc-ink);
    background: var(--wc-yellow);
    border: 2px solid var(--wc-paper);
    box-shadow: var(--wc-elev-avatar);
}

.wc-user-pill__name {
    font-family: var(--wc-font-display);
    font-size: 13px;
    font-weight: 700;
    color: var(--wc-ink);
    white-space: nowrap;
}
.wc-user-pill__sep { width: 1px; height: 12px; background: var(--wc-line); flex-shrink: 0; }
.wc-user-pill__points {
    font-family: var(--wc-font-display);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--wc-turquoise-dark);
    background: var(--wc-turquoise-pale);
    padding: 3px 9px;
    border-radius: 999px;
    white-space: nowrap;
}
.wc-user-pill__chevron { color: var(--wc-stone); flex-shrink: 0; transition: transform 120ms ease-out; }
.wc-user.is-open .wc-user-pill__chevron { transform: rotate(180deg); }

/* --- Dropdown profil --- */
.wc-user-menu {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    min-width: 280px;
    background: var(--wc-paper);
    border: 1px solid var(--wc-border-soft);
    border-radius: var(--wc-radius-card);
    box-shadow: var(--wc-elev-modal);
    overflow: hidden;
    z-index: 50;
    opacity: 0;
    transform: translateY(-4px);
    pointer-events: none;
    transition: opacity 160ms ease-out, transform 160ms ease-out;
}
.wc-user.is-open .wc-user-menu { opacity: 1; transform: translateY(0); pointer-events: auto; }

.wc-user-menu__id {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 18px;
    border-bottom: 1px solid var(--wc-line);
}
.wc-user-menu__avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--wc-font-display);
    font-size: 18px;
    font-weight: 800;
    color: var(--wc-ink);
    border: 2px solid var(--wc-paper);
    box-shadow: var(--wc-elev-avatar);
    flex-shrink: 0;
}
.wc-user-menu__id-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.wc-user-menu__name { font-family: var(--wc-font-display); font-size: 15px; font-weight: 800; color: var(--wc-ink); }
.wc-user-menu__email {
    font-family: var(--wc-font-body);
    font-size: 12px;
    font-weight: 500;
    color: var(--wc-stone);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.wc-user-menu__entity {
    align-self: flex-start;
    margin-top: 2px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    padding: 2px 8px;
    border-radius: 999px;
    color: var(--wc-ink);
    background: var(--wc-line);
}
.wc-user-menu__entity::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; opacity: 0.85; }
.wc-user-menu__entity--myu    { background: var(--wc-turquoise-pale); color: var(--wc-turquoise-dark); }
.wc-user-menu__entity--beelib { background: var(--wc-violet-pale);    color: var(--wc-violet-dark); }
.wc-user-menu__entity--ef     { background: var(--wc-yellow-pale);    color: var(--wc-yellow-dark); }

.wc-user-menu__item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 18px;
    color: var(--wc-ink);
    text-decoration: none;
    font-family: var(--wc-font-body);
    font-size: 13px;
    font-weight: 600;
    transition: background 100ms ease-out;
}
.wc-user-menu__item svg { color: var(--wc-stone); flex-shrink: 0; transition: color 100ms ease-out; }
.wc-user-menu__item:hover { background: var(--wc-turquoise-pale); }
.wc-user-menu__item:hover svg { color: var(--wc-turquoise-dark); }
.wc-user-menu__item:focus-visible { outline: none; box-shadow: var(--wc-focus-ring); }
.wc-user-menu__divider { height: 1px; background: var(--wc-line); margin: 4px 0; }
.wc-user-menu__item--danger { color: var(--wc-alert); }
.wc-user-menu__item--danger svg { color: var(--wc-alert); }
.wc-user-menu__item--danger:hover { background: var(--wc-alert-pale); }
.wc-user-menu__item--danger:hover svg { color: var(--wc-alert-dark); }

/* --- Drawer de navigation mobile --- */
.wc-drawer {
    position: fixed;
    inset: 0;
    z-index: 200;
    display: none;
}
.wc-drawer.is-open { display: block; animation: wc-modal-fade 140ms ease-out; }
.wc-drawer__backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.55); }
.wc-drawer__panel {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    background: var(--wc-paper);
    animation: wc-drawer-slide 200ms ease-out;
}
@keyframes wc-drawer-slide {
    from { transform: translateY(-12px); opacity: 0; }
    to   { transform: translateY(0);     opacity: 1; }
}
.wc-drawer__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: var(--wc-header-height);
    padding: 0 var(--wc-space-lg);
    border-bottom: 1px solid var(--wc-border-soft);
    flex-shrink: 0;
}
.wc-drawer__brand img { display: block; height: 36px; width: auto; }
.wc-drawer__close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: none;
    border-radius: var(--wc-radius-input);
    background: transparent;
    color: var(--wc-ink);
    cursor: pointer;
    transition: background 100ms ease-out;
}
.wc-drawer__close:hover { background: var(--wc-line); }
.wc-drawer__close:focus-visible { outline: none; box-shadow: var(--wc-focus-ring); }
.wc-drawer__nav {
    display: flex;
    flex-direction: column;
    padding: var(--wc-space-lg);
    gap: 4px;
}
.wc-drawer__link {
    display: flex;
    align-items: center;
    padding: 16px 18px;
    border-radius: var(--wc-radius-card);
    font-family: var(--wc-font-display);
    font-size: 20px;
    font-weight: 700;
    color: var(--wc-ink);
    text-decoration: none;
    transition: background 100ms ease-out;
}
.wc-drawer__link:hover { background: var(--wc-line); }
.wc-drawer__link:focus-visible { outline: none; box-shadow: var(--wc-focus-ring); }
.wc-drawer__link--active {
    color: var(--wc-turquoise-dark);
    background: var(--wc-turquoise-pale);
    font-weight: 800;
}

/* === Header — responsive === */
/* Tablette : navigation resserrée */
@media (max-width: 1023px) {
    .wc-header__nav { gap: var(--wc-space-lg); }
}
/* Mobile : hamburger + drawer, pill réduit à l'avatar */
@media (max-width: 767px) {
    .wc-header { padding: 0 var(--wc-space-md); }
    .wc-header__nav { display: none; }
    .wc-header__burger { display: inline-flex; }
    .wc-header__logo--secondary,
    .wc-header__brand-sep { display: none; }

    .wc-user-pill { padding: 6px; gap: 0; }
    .wc-user-pill__name,
    .wc-user-pill__sep,
    .wc-user-pill__points { display: none; }
    .wc-user-pill__chevron { margin-left: 6px; }
    .wc-user-menu { min-width: min(280px, calc(100vw - 24px)); }
}
@media (min-width: 768px) {
    .wc-drawer { display: none !important; }
}

/* === Paris longue durée (titres) — page utilisateur === */
.wc-sb__head { margin: 0 0 24px; }
.wc-sb__eyebrow {
    display: inline-block;
    padding: 5px 12px;
    background: var(--wc-violet-pale);
    color: var(--wc-violet-dark);
    border-radius: 999px;
    font-family: var(--wc-font-display);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    margin: 0 0 12px;
}
.wc-sb__title {
    font-family: var(--wc-font-display);
    font-size: clamp(32px, 4.5vw, 48px);
    font-weight: 800;
    letter-spacing: -0.04em;
    line-height: 1;
    margin: 0 0 8px;
}
.wc-sb__title em { color: var(--wc-turquoise); font-style: italic; }
.wc-sb__lead { margin: 0 0 6px; max-width: 52ch; font-size: 15px; line-height: 1.45; color: var(--wc-stone); }
.wc-sb__lead em { color: var(--wc-ink); font-style: normal; font-weight: 700; }
.wc-sb__progress {
    margin: 0;
    font-family: var(--wc-font-display);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--wc-turquoise-dark);
}

.wc-sb__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}
@media (max-width: 720px) {
    .wc-sb__grid { grid-template-columns: 1fr; }
}
.wc-sb__card {
    display: flex;
    flex-direction: column;
    padding: 18px 20px;
    background: var(--wc-paper);
    border: 1px solid var(--wc-border-soft);
    border-radius: var(--wc-radius-card);
    box-shadow: var(--wc-elev-card);
}
.wc-sb__card--placed { background: #FBFAF6; }
.wc-sb__card-head { display: flex; align-items: center; gap: 14px; }
.wc-sb__icon {
    width: 48px;
    height: 48px;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    line-height: 1;
    background: var(--wc-yellow-pale);
    border-radius: 50%;
    box-shadow: var(--wc-elev-avatar);
}
.wc-sb__card-id { flex: 1; min-width: 0; }
.wc-sb__card-title { margin: 0; font-family: var(--wc-font-display); font-size: 17px; font-weight: 800; color: var(--wc-ink); line-height: 1.15; }
.wc-sb__card-hint { margin: 2px 0 0; font-size: 12px; color: var(--wc-stone); }
.wc-sb__points {
    flex-shrink: 0;
    font-family: var(--wc-font-display);
    font-size: 15px;
    font-weight: 800;
    letter-spacing: -0.01em;
    color: var(--wc-turquoise-dark);
    background: var(--wc-turquoise-pale);
    padding: 5px 12px;
    border-radius: 999px;
}
.wc-sb__points small { font-size: 9px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }

.wc-sb__form { display: flex; flex-direction: column; gap: 10px; margin-top: 16px; }
.wc-sb__select,
.wc-sb__input {
    width: 100%;
    min-height: 46px;
    padding: 11px 16px;
    background: var(--wc-paper);
    border: 1.5px solid var(--wc-line);
    border-radius: var(--wc-radius-input);
    font-family: var(--wc-font-body);
    font-size: 14px;
    color: var(--wc-ink);
    outline: none;
    transition: border-color 120ms ease-out, box-shadow 120ms ease-out;
}
.wc-sb__select { cursor: pointer; appearance: none; -webkit-appearance: none; padding-right: 40px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%230BD1D1' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 16px center; }
.wc-sb__select:focus,
.wc-sb__input:focus { border-color: var(--wc-turquoise); box-shadow: 0 0 0 4px var(--wc-turquoise-pale); }
.wc-sb__submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 13px 22px;
    background: transparent;
    color: var(--wc-turquoise-dark);
    border: 2px solid var(--wc-turquoise);
    border-radius: 999px;
    font-family: var(--wc-font-display);
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background 100ms linear, color 100ms linear, transform 80ms ease;
}
.wc-sb__submit:hover { background: var(--wc-turquoise); color: var(--wc-ink); transform: translateY(-1px); }
.wc-sb__submit:active { transform: var(--wc-btn-tap); }
.wc-sb__submit:focus-visible { outline: none; box-shadow: var(--wc-focus-ring); }

.wc-sb__placed { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 16px; flex-wrap: wrap; }
.wc-sb__pick { display: inline-flex; align-items: center; gap: 8px; font-family: var(--wc-font-display); font-size: 16px; font-weight: 800; color: var(--wc-ink); }
.wc-sb__lock {
    font-family: var(--wc-font-display);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    color: var(--wc-turquoise-dark);
    background: var(--wc-turquoise-pale);
    padding: 5px 11px;
    border-radius: 999px;
    white-space: nowrap;
}
.wc-sb__outcome { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--wc-line); flex-wrap: wrap; }
.wc-sb__result { font-size: 13px; color: var(--wc-stone); }
.wc-sb__result strong { color: var(--wc-ink); }
.wc-sb__tag {
    font-family: var(--wc-font-display);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    padding: 4px 10px;
    border-radius: 999px;
    white-space: nowrap;
}
.wc-sb__tag--win  { background: var(--wc-yellow); color: var(--wc-ink); }
.wc-sb__tag--loss { background: var(--wc-line); color: var(--wc-stone); }

/* === Paris longue durée — saisie admin === */
.wc-sb-admin { display: flex; flex-direction: column; gap: 12px; max-width: 720px; }
.wc-sb-admin__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px 24px;
    flex-wrap: wrap;
    padding: 14px 18px;
    background: var(--wc-paper);
    border: 1px solid var(--wc-border-soft);
    border-radius: var(--wc-radius-card);
    box-shadow: var(--wc-elev-card);
}
.wc-sb-admin__id { display: flex; align-items: center; gap: 12px; min-width: 0; }
.wc-sb-admin__id > div { display: flex; flex-direction: column; gap: 2px; }
.wc-sb-admin__label { font-family: var(--wc-font-display); font-size: 15px; font-weight: 800; color: var(--wc-ink); }
.wc-sb-admin__meta { font-size: 11px; font-weight: 600; color: var(--wc-stone); }
.wc-sb-admin__field { flex: 1; min-width: 220px; }
.wc-sb-admin__actions { margin-top: 8px; max-width: 320px; }

/* Validation manuelle des paris titres joueurs (admin) */
.wc-sb__icon--sm { width: 34px; height: 34px; font-size: 18px; }
.wc-sb-val { margin-top: 24px; max-width: 720px; }
.wc-sb-val__head { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; }
.wc-sb-val__title { margin: 0; font-family: var(--wc-font-display); font-size: 16px; font-weight: 800; color: var(--wc-ink); }
.wc-sb-val__count { font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--wc-stone); }
.wc-sb-val__empty { padding: 8px 2px; font-size: 13px; color: var(--wc-stone); }
.wc-sb-val__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.wc-sb-val__item {
    display: grid;
    grid-template-columns: 1fr 1fr auto auto;
    align-items: center;
    gap: 14px;
    padding: 12px 16px;
    background: var(--wc-paper);
    border: 1px solid var(--wc-border-soft);
    border-radius: var(--wc-radius-card);
    box-shadow: var(--wc-elev-card);
}
.wc-sb-val__user { font-family: var(--wc-font-display); font-weight: 800; color: var(--wc-ink); }
.wc-sb-val__pick { color: var(--wc-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wc-sb-val__pts { font-size: 12px; color: var(--wc-stone); white-space: nowrap; }
.wc-sb-val__pts strong { font-family: var(--wc-font-display); font-size: 15px; color: var(--wc-ink); }
@media (max-width: 600px) {
    .wc-sb-val__item { grid-template-columns: 1fr auto; gap: 6px 12px; }
    .wc-sb-val__pick { grid-column: 1 / -1; font-size: 13px; color: var(--wc-stone); }
}

/* ============================================================
   Le Palmarès (page Titres) — refonte « galerie de trophées »
   Or métallique (rappel du podium), médaillons à reflet, prix gilés.
   ============================================================ */
.wc-titres__hero { text-align: center; max-width: 640px; margin: 0 auto 32px; }
.wc-titres__eyebrow {
    display: inline-block;
    padding: 5px 14px;
    margin: 0 0 14px;
    border-radius: 999px;
    background: linear-gradient(145deg, #FDF1C2, #F2D77E, #E4C257);
    color: #6B5618;
    font-family: var(--wc-font-display);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55);
}
.wc-titres__title {
    margin: 0 0 10px;
    font-family: var(--wc-font-display);
    font-size: clamp(34px, 5vw, 52px);
    font-weight: 800;
    letter-spacing: -0.04em;
    line-height: 1;
    color: var(--wc-ink);
}
.wc-titres__title em {
    display: inline-block;
    padding-right: 0.12em;
    font-style: italic;
    background: linear-gradient(120deg, #E4C257, #BAA135);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: #BAA135;
}
.wc-titres__lead { margin: 0 0 16px; font-size: 15px; line-height: 1.45; color: var(--wc-stone); }
.wc-titres__lead em { font-style: normal; font-weight: 700; color: var(--wc-ink); }
.wc-titres__stats { display: inline-flex; align-items: center; gap: 14px; }
.wc-titres__stat { font-family: var(--wc-font-display); font-size: 12px; font-weight: 700; color: var(--wc-stone); text-transform: uppercase; letter-spacing: 0.08em; }
.wc-titres__stat strong { color: var(--wc-ink); }
.wc-titres__stat-dot { width: 5px; height: 5px; border-radius: 50%; background: #E4C257; }

/* --- Médaillons --- */
.wc-titres__medal {
    position: relative;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.wc-titres__medal::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: radial-gradient(circle at 32% 26%, rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0) 52%);
}
.wc-titres__medal-emoji { position: relative; z-index: 1; font-size: 30px; line-height: 1; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.25)); }
/* Cadre rectangulaire du trophée vainqueur : fond blanc = couleurs d'origine
   conservées (pas de tirage doré), liseré or pour rester dans le thème. */
.wc-titres__trophy-frame {
    position: relative;
    width: 116px;
    height: 116px;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px;
    background: #FFFFFF;
    border: 2px solid rgba(228, 194, 87, 0.75);
    border-radius: var(--wc-radius-hero);
    box-shadow: 0 0 0 4px #fff, 0 12px 26px rgba(196, 158, 52, 0.28);
}
.wc-titres__trophy {
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: drop-shadow(0 2px 4px rgba(108, 86, 24, 0.22));
}
@media (prefers-reduced-motion: no-preference) {
    .wc-titres__trophy-frame { animation: wc-titres-float 3.4s ease-in-out infinite; }
}
.wc-titres__medal--gold      { background: linear-gradient(145deg, #FDF1C2, #F2D77E 52%, #E4C257); box-shadow: 0 0 0 4px #fff, 0 0 0 6px rgba(228, 194, 87, 0.35), 0 12px 26px rgba(196, 158, 52, 0.45); }
.wc-titres__medal--turquoise { background: linear-gradient(145deg, #CEF6F6, #0BD1D1); box-shadow: 0 0 0 4px #fff, 0 12px 26px rgba(11, 209, 209, 0.40); }
.wc-titres__medal--violet    { background: linear-gradient(145deg, #ECE4FF, #A177FF); box-shadow: 0 0 0 4px #fff, 0 12px 26px rgba(161, 119, 255, 0.40); }
.wc-titres__medal--yellow    { background: linear-gradient(145deg, #FFF6CC, #FFD400); box-shadow: 0 0 0 4px #fff, 0 12px 26px rgba(235, 201, 31, 0.45); }
.wc-titres__medal--xl { width: 104px; height: 104px; }
.wc-titres__medal--xl .wc-titres__medal-emoji { font-size: 52px; }
@media (prefers-reduced-motion: no-preference) {
    .wc-titres__medal--xl { animation: wc-titres-float 3.4s ease-in-out infinite; }
}
@keyframes wc-titres-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }

/* --- Badge prix gilé --- */
.wc-titres__prize {
    display: inline-flex;
    align-items: baseline;
    gap: 3px;
    flex-shrink: 0;
    padding: 10px 18px;
    border-radius: 999px;
    background: linear-gradient(145deg, #FDF1C2, #F2D77E 52%, #E4C257);
    color: #6B5618;
    font-family: var(--wc-font-display);
    font-size: 30px;
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6), 0 6px 16px rgba(196, 158, 52, 0.35);
}
.wc-titres__prize small { font-size: 11px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; }
.wc-titres__prize--sm { font-size: 20px; padding: 6px 13px; }

/* --- Pièce maîtresse : vainqueur --- */
.wc-titres__marquee {
    position: relative;
    overflow: hidden;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 26px;
    margin-bottom: 18px;
    padding: 26px 32px;
    background: linear-gradient(135deg, #FFFDF6 0%, #FCF4DC 100%);
    border: 1px solid rgba(228, 194, 87, 0.45);
    border-radius: var(--wc-radius-hero);
    box-shadow: 0 14px 40px rgba(196, 158, 52, 0.18);
}
.wc-titres__shine {
    position: absolute;
    top: 0;
    left: -40%;
    width: 40%;
    height: 100%;
    background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.55), transparent);
    transform: skewX(-18deg);
    pointer-events: none;
}
@media (prefers-reduced-motion: no-preference) {
    .wc-titres__marquee:hover .wc-titres__shine { animation: wc-titres-sheen 900ms ease-out; }
}
@keyframes wc-titres-sheen { from { left: -40%; } to { left: 120%; } }
.wc-titres__marquee-body { min-width: 0; }
.wc-titres__kicker { margin: 0 0 5px; font-family: var(--wc-font-display); font-size: 10px; font-weight: 800; letter-spacing: 0.2em; text-transform: uppercase; color: #9A7B22; }
.wc-titres__marquee-title { margin: 0 0 5px; font-family: var(--wc-font-display); font-size: clamp(22px, 3vw, 30px); font-weight: 800; letter-spacing: -0.03em; line-height: 1.05; color: var(--wc-ink); }
.wc-titres__marquee-hint { margin: 0 0 16px; font-size: 14px; color: var(--wc-stone); }

/* --- Les trois trophées d'or --- */
.wc-titres__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.wc-titres__card {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 26px 20px 22px;
    background: var(--wc-paper);
    border: 1px solid var(--wc-border-soft);
    border-radius: var(--wc-radius-card);
    box-shadow: var(--wc-elev-card);
    transition: box-shadow 160ms ease-out, transform 160ms ease-out;
}
.wc-titres__card::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px; }
.wc-titres__card--turquoise::before { background: var(--wc-turquoise); }
.wc-titres__card--violet::before    { background: var(--wc-violet); }
.wc-titres__card--yellow::before     { background: var(--wc-yellow); }
.wc-titres__card:hover { box-shadow: var(--wc-elev-hover); transform: translateY(-3px); }
.wc-titres__card .wc-titres__medal { margin-bottom: 14px; }
.wc-titres__card .wc-titres__prize--sm { position: absolute; top: 14px; right: 14px; }
.wc-titres__card-title { margin: 0 0 4px; font-family: var(--wc-font-display); font-size: 17px; font-weight: 800; color: var(--wc-ink); }
.wc-titres__card-hint { margin: 0 0 16px; font-size: 12px; color: var(--wc-stone); }

/* --- Formulaires --- */
.wc-titres__form { display: flex; flex-direction: column; gap: 10px; width: 100%; margin-top: auto; }
.wc-titres__marquee .wc-titres__form { flex-direction: row; flex-wrap: wrap; }
.wc-titres__marquee .wc-sb__select { flex: 1; min-width: 200px; }
.wc-titres__submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 22px;
    border: none;
    border-radius: 999px;
    background: linear-gradient(145deg, #F2D77E, #E4C257);
    color: #5C4A14;
    font-family: var(--wc-font-display);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    cursor: pointer;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 6px 16px rgba(196, 158, 52, 0.35);
    transition: transform 80ms ease, box-shadow 120ms ease, filter 120ms ease;
}
.wc-titres__submit:hover { filter: brightness(1.04); transform: translateY(-1px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6), 0 8px 20px rgba(196, 158, 52, 0.5); }
.wc-titres__submit:active { transform: var(--wc-btn-tap); }
.wc-titres__submit:focus-visible { outline: none; box-shadow: var(--wc-focus-ring); }

/* --- État scellé --- */
.wc-titres__sealed { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.wc-titres__sealed--col { flex-direction: column; gap: 8px; margin-top: auto; }
.wc-titres__pick { display: inline-flex; align-items: center; gap: 8px; font-family: var(--wc-font-display); font-size: 16px; font-weight: 800; color: var(--wc-ink); }
.wc-titres__pick--lg { font-size: 22px; }
.wc-titres__seal {
    font-family: var(--wc-font-display);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #6B5618;
    background: linear-gradient(145deg, #FDF1C2, #F2D77E, #E4C257);
    padding: 5px 12px;
    border-radius: 999px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5);
    white-space: nowrap;
}
.wc-titres__tag { font-family: var(--wc-font-display); font-size: 10px; font-weight: 800; letter-spacing: 0.10em; text-transform: uppercase; padding: 5px 12px; border-radius: 999px; white-space: nowrap; }
.wc-titres__tag--win  { background: linear-gradient(145deg, #F2D77E, #E4C257); color: #5C4A14; }
.wc-titres__tag--loss { background: var(--wc-line); color: var(--wc-stone); }

@media (max-width: 860px) {
    .wc-titres__grid { grid-template-columns: 1fr; }
    .wc-titres__marquee { grid-template-columns: 1fr; justify-items: center; text-align: center; gap: 18px; }
    .wc-titres__marquee-body { text-align: center; }
    .wc-titres__marquee .wc-titres__form { flex-direction: column; justify-content: center; }
    .wc-titres__sealed { justify-content: center; }
}