/* =============================================================================
   FIFA 2026 - phpMyBet theme
   Single CSS entry point (served by PHP, supports /template/fifa2026-resp/ interpolation)
   Sections: tokens · reset · base · layout · grid · header · nav · components
             forms · ranking · bets · finals brackets · rules · utilities · dark
   ============================================================================= */

/* ---------- 1. Design tokens (FIFA 2026 official palette) ------------------ */
:root {
    /* Brand colors */
    --cdm-primary:        #DC2626;   /* energetic red - USA accent */
    --cdm-primary-700:    #B91C1C;
    --cdm-primary-300:    #FCA5A5;
    --cdm-secondary:      #0F1B3F;   /* deep navy - Canada accent */
    --cdm-secondary-700:  #060A1F;
    --cdm-secondary-300:  #4A5784;
    --cdm-accent:         #F59E0B;   /* trophy gold */
    --cdm-accent-700:     #B45309;
    --cdm-accent-300:     #FCD34D;
    --cdm-mexico:         #00754A;   /* Mexico green accent */
    --cdm-mexico-300:     #6EE7B7;

    /* Neutrals (light) */
    --canvas:             #FAFAF9;
    --surface:            #FFFFFF;
    --surface-2:          #F4F4F2;
    --surface-3:          #E7E5E0;
    --border:             #E5E7EB;
    --border-strong:      #D1D5DB;
    --ink:                #111827;
    --ink-soft:           #374151;
    --ink-muted:          #6B7280;
    --ink-faint:          #9CA3AF;

    /* Semantic */
    --success:            #15803D;
    --success-bg:         #DCFCE7;
    --warning:            #B45309;
    --warning-bg:         #FEF3C7;
    --danger:             #B91C1C;
    --danger-bg:          #FEE2E2;
    --info:               #1D4ED8;
    --info-bg:            #DBEAFE;

    /* Podium */
    --podium-1:           #FBBF24;   /* gold */
    --podium-2:           #94A3B8;   /* silver */
    --podium-3:           #C2855B;   /* bronze */

    /* Typography */
    --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    --font-display: 'Inter', sans-serif;
    --font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;

    --fs-xs:   0.75rem;
    --fs-sm:   0.875rem;
    --fs-base: 1rem;
    --fs-md:   1.0625rem;
    --fs-lg:   1.25rem;
    --fs-xl:   1.5rem;
    --fs-2xl:  2rem;
    --fs-3xl:  2.75rem;

    --lh-tight: 1.2;
    --lh-snug:  1.4;
    --lh-base:  1.55;

    /* Spacing scale */
    --sp-0:  0;
    --sp-1:  0.25rem;
    --sp-2:  0.5rem;
    --sp-3:  0.75rem;
    --sp-4:  1rem;
    --sp-5:  1.5rem;
    --sp-6:  2rem;
    --sp-7:  2.5rem;
    --sp-8:  3rem;
    --sp-10: 4rem;

    /* Radii */
    --radius-sm:  6px;
    --radius:     10px;
    --radius-md:  14px;
    --radius-lg:  20px;
    --radius-pill: 999px;

    /* Shadows */
    --shadow-xs: 0 1px 2px rgba(15, 27, 63, .06);
    --shadow-sm: 0 2px 6px rgba(15, 27, 63, .08);
    --shadow:    0 8px 24px rgba(15, 27, 63, .10);
    --shadow-lg: 0 20px 48px rgba(15, 27, 63, .18);

    /* Layout */
    --container-max: 1200px;
    --header-h:      72px;
    --aside-w:       320px;

    /* Motion */
    --ease: cubic-bezier(.2, .8, .2, 1);
    --dur-fast: 120ms;
    --dur:      200ms;
    --dur-slow: 380ms;

    color-scheme: light;
}

/* ---------- 2. Dark theme overrides (auto + manual via [data-theme]) ------- */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme='light']) {
        --canvas:        #0A0F1F;
        --surface:       #131A2E;
        --surface-2:     #1B233B;
        --surface-3:     #28324E;
        --border:        #28324E;
        --border-strong: #3A4569;
        --ink:           #F3F4F6;
        --ink-soft:      #D1D5DB;
        --ink-muted:     #9CA3AF;
        --ink-faint:     #6B7280;

        --success-bg: rgba(21, 128, 61, .18);
        --warning-bg: rgba(180, 83, 9, .22);
        --danger-bg:  rgba(185, 28, 28, .20);
        --info-bg:    rgba(29, 78, 216, .22);

        --shadow-xs: 0 1px 2px rgba(0, 0, 0, .35);
        --shadow-sm: 0 2px 8px rgba(0, 0, 0, .45);
        --shadow:    0 10px 28px rgba(0, 0, 0, .55);
        --shadow-lg: 0 24px 56px rgba(0, 0, 0, .70);

        color-scheme: dark;
    }
}

:root[data-theme='dark'] {
    --canvas:        #0A0F1F;
    --surface:       #131A2E;
    --surface-2:     #1B233B;
    --surface-3:     #28324E;
    --border:        #28324E;
    --border-strong: #3A4569;
    --ink:           #F3F4F6;
    --ink-soft:      #D1D5DB;
    --ink-muted:     #9CA3AF;
    --ink-faint:     #6B7280;

    --success-bg: rgba(21, 128, 61, .18);
    --warning-bg: rgba(180, 83, 9, .22);
    --danger-bg:  rgba(185, 28, 28, .20);
    --info-bg:    rgba(29, 78, 216, .22);

    --shadow-xs: 0 1px 2px rgba(0, 0, 0, .35);
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, .45);
    --shadow:    0 10px 28px rgba(0, 0, 0, .55);
    --shadow-lg: 0 24px 56px rgba(0, 0, 0, .70);

    color-scheme: dark;
}

/* ---------- 3. Reset & base ------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }

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

body {
    margin: 0;
    min-height: 100vh;
    font-family: var(--font-sans);
    font-size: var(--fs-base);
    line-height: var(--lh-base);
    color: var(--ink);
    background:
        radial-gradient(900px 600px at 12% -8%, rgba(220, 38, 38, .18) 0%, transparent 60%),
        radial-gradient(800px 600px at 92% 6%, rgba(245, 158, 11, .18) 0%, transparent 60%),
        radial-gradient(1100px 700px at 50% 110%, rgba(0, 117, 74, .14) 0%, transparent 60%),
        var(--canvas);
    background-attachment: fixed;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

img { max-width: 100%; height: auto; display: inline-block; }
svg { display: inline-block; }

a {
    color: var(--cdm-primary);
    text-decoration: none;
    transition: color var(--dur-fast) var(--ease);
}
a:hover { color: var(--cdm-primary-700); text-decoration: underline; }

@media (prefers-color-scheme: dark) {
    :root:not([data-theme='light']) a { color: var(--cdm-accent); }
    :root:not([data-theme='light']) a:hover { color: var(--cdm-accent-300); }
}
:root[data-theme='dark'] a { color: var(--cdm-accent); }
:root[data-theme='dark'] a:hover { color: var(--cdm-accent-300); }

a.nolink, a.nolink:link, a.nolink:visited, a.nolink:hover, a.nolink:active {
    color: inherit;
    text-decoration: none;
}

h1, h2, h3, h4 {
    font-family: var(--font-display);
    color: var(--ink);
    line-height: var(--lh-tight);
    margin: 0 0 var(--sp-3);
    letter-spacing: -.01em;
}
h1 { font-size: var(--fs-2xl); font-weight: 800; }
h2 {
    font-size: var(--fs-lg);
    font-weight: 700;
    color: var(--cdm-secondary);
    margin: var(--sp-5) 0 var(--sp-3);
}
:root[data-theme='dark'] h2 { color: var(--cdm-accent); }
@media (prefers-color-scheme: dark) {
    :root:not([data-theme='light']) h2 { color: var(--cdm-accent); }
}

b, strong { font-weight: 700; }

hr, .hr {
    border: 0;
    border-top: 1px solid var(--border);
    margin: var(--sp-5) 0;
}

::selection { background: var(--cdm-accent); color: var(--cdm-secondary); }

:focus-visible {
    outline: 3px solid var(--cdm-accent);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
}

/* ---------- 4. Background decorative layers (kept from legacy templates) --- */
.bg, .bg::before, .bg::after { display: none; }   /* legacy ornaments removed */
.footer-img { display: none; }

/* ---------- 5. Layout container & responsive grid (Bootstrap-compatible) -- */
.container {
    width: 100%;
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 var(--sp-4);
    background: transparent;          /* legacy white bg removed */
    opacity: 1;
    filter: none;
}

main, .main {
    display: block;
    padding-bottom: var(--sp-10);
}

/* Bootstrap-3 compatible row/col (rewritten as flex, no float, no clearfix) */
.row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-4);
    margin: 0;
}
.row.spacer { gap: 0; margin-top: var(--sp-4); }

[class*='col-'] { flex: 1 1 100%; min-width: 0; }

/* default (mobile): all columns full-width */
.col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6,
.col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12,
.col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6,
.col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12 {
    flex: 1 1 100%;
    max-width: 100%;
}

@media (min-width: 768px) {
    .col-sm-1  { flex-basis: calc(8.333% - var(--sp-4));  max-width: calc(8.333% - var(--sp-4));  }
    .col-sm-2  { flex-basis: calc(16.666% - var(--sp-4)); max-width: calc(16.666% - var(--sp-4)); }
    .col-sm-3  { flex-basis: calc(25% - var(--sp-4));     max-width: calc(25% - var(--sp-4));     }
    .col-sm-4  { flex-basis: calc(33.333% - var(--sp-4)); max-width: calc(33.333% - var(--sp-4)); }
    .col-sm-6  { flex-basis: calc(50% - var(--sp-4));     max-width: calc(50% - var(--sp-4));     }
    .col-sm-8  { flex-basis: calc(66.666% - var(--sp-4)); max-width: calc(66.666% - var(--sp-4)); }
    .col-sm-9  { flex-basis: calc(75% - var(--sp-4));     max-width: calc(75% - var(--sp-4));     }
    .col-sm-12 { flex-basis: 100%; max-width: 100%; }
}

@media (min-width: 992px) {
    .col-md-1  { flex-basis: calc(8.333% - var(--sp-4));  max-width: calc(8.333% - var(--sp-4));  }
    .col-md-2  { flex-basis: calc(16.666% - var(--sp-4)); max-width: calc(16.666% - var(--sp-4)); }
    .col-md-3  { flex-basis: calc(25% - var(--sp-4));     max-width: calc(25% - var(--sp-4));     }
    .col-md-4  { flex-basis: calc(33.333% - var(--sp-4)); max-width: calc(33.333% - var(--sp-4)); }
    .col-md-5  { flex-basis: calc(41.666% - var(--sp-4)); max-width: calc(41.666% - var(--sp-4)); }
    .col-md-6  { flex-basis: calc(50% - var(--sp-4));     max-width: calc(50% - var(--sp-4));     }
    .col-md-7  { flex-basis: calc(58.333% - var(--sp-4)); max-width: calc(58.333% - var(--sp-4)); }
    .col-md-8  { flex-basis: calc(66.666% - var(--sp-4)); max-width: calc(66.666% - var(--sp-4)); }
    .col-md-9  { flex-basis: calc(75% - var(--sp-4));     max-width: calc(75% - var(--sp-4));     }
    .col-md-10 { flex-basis: calc(83.333% - var(--sp-4)); max-width: calc(83.333% - var(--sp-4)); }
    .col-md-11 { flex-basis: calc(91.666% - var(--sp-4)); max-width: calc(91.666% - var(--sp-4)); }
    .col-md-12 { flex-basis: 100%; max-width: 100%; }
}

/* legacy spacers / wrappers */
.spacer { height: var(--sp-4); }
.content { padding: 0; }
.focus { padding: 0; }
.maincontent, .maincontent_large { padding: var(--sp-2) 0; }
.ppp { padding: 0; }
#mainarea { padding: 0; }

/* ---------- 6. Header (sticky, brand) ------------------------------------- */
.site-header {
    position: sticky;
    top: 0;
    z-index: 50;
    background: linear-gradient(180deg, rgba(15, 27, 63, .92), rgba(15, 27, 63, .82));
    backdrop-filter: saturate(140%) blur(14px);
    -webkit-backdrop-filter: saturate(140%) blur(14px);
    border-bottom: 1px solid rgba(245, 158, 11, .25);
    color: #fff;
}

.site-header__inner {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 var(--sp-4);
    display: flex;
    align-items: center;
    gap: var(--sp-4);
    min-height: var(--header-h);
}

.site-header__brand {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-3);
    color: #fff;
    text-decoration: none;
    font-weight: 800;
    letter-spacing: -.01em;
}
.site-header__brand:hover { color: var(--cdm-accent); text-decoration: none; }
.site-header__brand img,
.site-header__brand svg {
    height: 44px;
    width: auto;
    filter: drop-shadow(0 4px 12px rgba(245, 158, 11, .35));
}
.site-header__brand-text {
    font-family: var(--font-display);
    font-size: var(--fs-md);
    line-height: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.site-header__brand-text small {
    font-size: var(--fs-xs);
    font-weight: 500;
    color: var(--cdm-accent);
    letter-spacing: .12em;
    text-transform: uppercase;
}

.site-header__matches {
    flex: 1;
    display: none;
    overflow-x: auto;
    white-space: nowrap;
    gap: var(--sp-3);
    align-items: center;
    font-size: var(--fs-xs);
    color: rgba(255, 255, 255, .85);
    scrollbar-width: thin;
}
.site-header__matches::-webkit-scrollbar { height: 4px; }
.site-header__matches::-webkit-scrollbar-thumb { background: rgba(245, 158, 11, .4); border-radius: 4px; }
.site-header__matches b { color: #fff; font-weight: 600; margin-right: var(--sp-3); }
.site-header__matches a {
    color: var(--cdm-accent-300);
    border-bottom: 1px dotted rgba(252, 211, 77, .5);
}
.site-header__matches a:hover { color: #fff; }

@media (min-width: 992px) {
    .site-header__matches { display: flex; }
}

.site-header__user {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    color: #fff;
    font-size: var(--fs-sm);
}
.site-header__user b { font-weight: 700; }
.site-header__user i { color: var(--cdm-accent-300); font-style: normal; font-weight: 500; }
.site-header__user img {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--cdm-accent);
}

/* Burger button (mobile only) */
.site-header__burger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: 1px solid rgba(255, 255, 255, .2);
    background: rgba(255, 255, 255, .08);
    color: #fff;
    border-radius: var(--radius-sm);
    cursor: pointer;
}
.site-header__burger:hover { background: rgba(255, 255, 255, .15); }
.site-header__burger svg { width: 22px; height: 22px; }
@media (min-width: 768px) {
    .site-header__burger { display: none; }
}

/* Theme toggle */
.theme-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: rgba(255, 255, 255, .08);
    border: 1px solid rgba(255, 255, 255, .2);
    color: var(--cdm-accent-300);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.theme-toggle:hover { background: rgba(255, 255, 255, .15); color: #fff; }
.theme-toggle svg { width: 20px; height: 20px; }
.theme-toggle .icon-sun  { display: none; }
.theme-toggle .icon-moon { display: block; }
:root[data-theme='dark'] .theme-toggle .icon-sun  { display: block; }
:root[data-theme='dark'] .theme-toggle .icon-moon { display: none; }
@media (prefers-color-scheme: dark) {
    :root:not([data-theme='light']) .theme-toggle .icon-sun  { display: block; }
    :root:not([data-theme='light']) .theme-toggle .icon-moon { display: none; }
}

/* ---------- 7. Nav menus (admin + user bars) ------------------------------ */
.menu {
    margin: 0;
    padding: var(--sp-3) 0 var(--sp-2);
}

.nav, .nav-justified {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-2);
}

.nav li, .nav-justified li {
    flex: 1 1 auto;
    background: transparent;
    border: 0;
    list-style: none;
}

.nav li a, .nav-justified li a {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    padding: var(--sp-2) var(--sp-3);
    color: var(--ink);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-pill);
    font-weight: 600;
    font-size: var(--fs-sm);
    letter-spacing: 0;
    text-decoration: none;
    box-shadow: var(--shadow-xs);
    transition: transform var(--dur-fast) var(--ease),
                background var(--dur-fast) var(--ease),
                color var(--dur-fast) var(--ease),
                border-color var(--dur-fast) var(--ease);
}
.nav li a:hover, .nav-justified li a:hover {
    background: var(--cdm-secondary);
    color: #fff;
    border-color: var(--cdm-secondary);
    text-decoration: none;
    transform: translateY(-1px);
}
.nav li a.current, .nav-justified li a.current {
    background: var(--cdm-primary);
    color: #fff;
    border-color: var(--cdm-primary);
    text-decoration: none;
}

.menu-admin .nav li a, .menu-admin li a {
    background: linear-gradient(180deg, var(--cdm-secondary-300), var(--cdm-secondary));
    color: #fff;
    border-color: transparent;
}
.menu-admin .nav li a:hover, .menu-admin li a:hover {
    background: var(--cdm-secondary-700);
}

.menunolink {
    background: transparent !important;
    border: 0 !important;
    color: var(--ink-muted) !important;
    box-shadow: none !important;
    font-style: italic;
    cursor: default !important;
    pointer-events: none;
    font-weight: 500 !important;
}

/* Mobile collapse: hide menus until burger toggles aria-expanded */
@media (max-width: 767px) {
    .site-header__nav {
        position: fixed;
        inset: var(--header-h) 0 0 0;
        background: var(--canvas);
        padding: var(--sp-4);
        z-index: 49;
        overflow-y: auto;
        transform: translateX(-100%);
        transition: transform var(--dur) var(--ease);
    }
    .site-header__nav[data-open='true'] { transform: translateX(0); }
    .site-header__nav .nav,
    .site-header__nav .nav-justified { flex-direction: column; }
    .site-header__nav .nav li,
    .site-header__nav .nav-justified li { flex: 1 1 auto; }
    body.nav-open { overflow: hidden; }
}

/* ---------- 8. Section headline (replaces the gradient orange bar) -------- */
.headline {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sp-3);
    margin: var(--sp-4) 0 var(--sp-3);
    padding: var(--sp-3) var(--sp-4);
    color: #fff;
    font-family: var(--font-display);
    font-size: var(--fs-lg);
    font-weight: 700;
    letter-spacing: -.01em;
    background: linear-gradient(95deg, var(--cdm-secondary) 0%, var(--cdm-primary) 100%);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    border-left: 4px solid var(--cdm-accent);
    min-height: 52px;
}
.headline h1 {
    color: #fff;
    font-size: inherit;
    margin: 0;
}
.pr-count-label { font-size: var(--fs-sm); font-weight: 500; opacity: .75; }
.headline .rightlink {
    margin-left: auto;
    font-size: var(--fs-sm);
    font-weight: 500;
}
.headline .rightlink a { color: var(--cdm-accent-300); }
.headline .rightlink a:hover { color: #fff; }

/* nav inside headline (used in block_headline_ranks) */
.headline .nav, .headline .nav-justified {
    flex-wrap: wrap;
    width: 100%;
    margin-top: var(--sp-2);
}
.headline .nav li a, .headline .nav-justified li a {
    background: rgba(255, 255, 255, .12);
    color: #fff;
    border-color: rgba(255, 255, 255, .2);
    font-size: var(--fs-xs);
    min-height: 34px;
    padding: var(--sp-1) var(--sp-3);
}
.headline .nav li a:hover, .headline .nav-justified li a:hover {
    background: rgba(255, 255, 255, .25);
}

/* legacy in-page header */
#headline h1 {
    display: inline-block;
    margin: var(--sp-4) 0 var(--sp-3);
    padding: var(--sp-2) var(--sp-4);
    background: linear-gradient(95deg, var(--cdm-secondary), var(--cdm-primary));
    color: #fff;
    border-radius: var(--radius-md);
    border-left: 4px solid var(--cdm-accent);
    font-size: var(--fs-lg);
}


/* ---------- 8b. Public auth landing ---------------------------------------- */
.auth-hero {
    position: relative;
    isolation: isolate;
    margin: var(--sp-4) 0 var(--sp-6);
    padding: var(--sp-7) var(--sp-5);
    overflow: hidden;
    text-align: center;
    color: #fff;
    background:
        radial-gradient(520px 260px at 15% 10%, rgba(245, 158, 11, .34), transparent 62%),
        radial-gradient(520px 280px at 85% 0%, rgba(0, 117, 74, .28), transparent 60%),
        linear-gradient(135deg, var(--cdm-secondary-700), var(--cdm-secondary) 52%, var(--cdm-primary-700));
    border: 1px solid rgba(245, 158, 11, .28);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
}
.auth-hero::after {
    content: '';
    position: absolute;
    inset: auto -8% -42% auto;
    width: 360px;
    height: 360px;
    border-radius: 50%;
    border: 54px solid rgba(255, 255, 255, .08);
    z-index: -1;
}
.auth-hero__badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--sp-3);
    padding: var(--sp-1) var(--sp-3);
    color: var(--cdm-secondary);
    background: var(--cdm-accent);
    border-radius: var(--radius-pill);
    font-size: var(--fs-xs);
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
}
.auth-hero__headline {
    display: block;
    width: fit-content;
    margin: 0 auto var(--sp-3);
    background: transparent;
    border: 0;
    box-shadow: none;
    padding: 0;
    min-height: 0;
}
.auth-hero__headline h1 {
    font-size: clamp(2rem, 5vw, 3.75rem);
    font-weight: 900;
    text-wrap: balance;
}
.auth-hero__lead {
    max-width: 720px;
    margin: 0 auto;
    color: rgba(255, 255, 255, .86);
    font-size: var(--fs-md);
}
.auth-warning {
    display: block;
    padding: var(--sp-3) var(--sp-4);
    margin-top: var(--sp-3);
    border-radius: var(--radius);
    background: rgba(185, 28, 28, .20);
    border: 1px solid rgba(220, 38, 38, .40);
    color: var(--cdm-accent-300);
    font-size: .9rem;
    font-weight: 600;
    text-align: center;
}
.auth-warning:has(b:empty) { display: none; }
/* Quand le message est visible, annuler le margin négatif des auth-cards */
.auth-warning:not(:has(b:empty)) + .row.auth-grid { margin-top: var(--sp-4); }
.auth-grid {
    align-items: stretch;
    margin-top: calc(var(--sp-5) * -1);
}
.auth-card {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    min-height: 340px;
    border-color: rgba(15, 27, 63, .10);
    box-shadow: var(--shadow);
}
.auth-card h2 {
    margin-top: 0;
    font-size: var(--fs-xl);
}
.auth-card--login { border-top: 4px solid var(--cdm-primary); }
.auth-card--register { border-top: 4px solid var(--cdm-mexico); }
.auth-card--login form {
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
    align-items: center;
}
/* ---------- 9. Card "tag_cloud" (universal box) --------------------------- */
.tag_cloud {
    margin: var(--sp-3) 0;
    padding: var(--sp-5);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    color: var(--ink);
    font-size: var(--fs-sm);
    line-height: var(--lh-base);
}
.tag_cloud > span[style*='150%'],
.tag_cloud > b:first-child {
    display: inline-block;
    margin-bottom: var(--sp-3);
    font-family: var(--font-display);
    font-weight: 800;
    color: var(--cdm-secondary);
    letter-spacing: -.01em;
}
:root[data-theme='dark'] .tag_cloud > span[style*='150%'],
:root[data-theme='dark'] .tag_cloud > b:first-child { color: var(--cdm-accent); }

/* RightColumn sub-headline (used in tag_cloud) */
.rightcolumn_headline {
    margin: calc(var(--sp-5) * -1) calc(var(--sp-5) * -1) var(--sp-4);
    padding: var(--sp-3) var(--sp-4);
    background: linear-gradient(95deg, var(--cdm-accent), var(--cdm-accent-300));
    border-radius: var(--radius-md) var(--radius-md) 0 0;
    border-bottom: 2px solid var(--cdm-accent-700);
}
.rightcolumn_headline h1 {
    margin: 0;
    color: var(--cdm-secondary);
    font-size: var(--fs-md);
    font-weight: 800;
    text-decoration: none;
    letter-spacing: -.01em;
}

.rightcolumn { display: flex; flex-direction: column; gap: var(--sp-3); }

/* ---------- 10. Lists & "list_element" rows ------------------------------- */
.list_element {
    margin: var(--sp-2) 0;
    padding: 0;
    border: 1px solid var(--border);
    background: var(--surface);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-xs);
    overflow: hidden;
    transition: transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.list_element:hover { transform: translateY(-1px); box-shadow: var(--shadow-sm); }
.list_element > table {
    width: 100%;
    border-collapse: collapse;
    background: transparent !important;   /* override inline bg */
}
.list_element > table td {
    padding: var(--sp-3) var(--sp-2);
    border: 0;
    vertical-align: middle;
    font-size: var(--fs-sm);
}

/* ---------- Groups ranking aligned table ---------------------------------- */
.pr-groups-table {
    display: table !important;      /* .tag_cloud > table sets display:block which breaks row widths */
    width: 100%;
    min-width: 100%;
    border-collapse: separate !important;   /* .tag_cloud table sets collapse; separate needed for row cards */
    border-spacing: 0 6px;
}
.pr-groups-table thead th {
    font-size: var(--fs-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--ink-muted);
    padding: var(--sp-1) var(--sp-2);
    border: 0;
    text-align: center;
}
.pr-groups-table thead th:nth-child(2) { text-align: left; }
.pr-groups-table tbody tr td {
    padding: var(--sp-3) var(--sp-2);
    background: var(--row-bg, var(--surface));
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    vertical-align: middle;
    font-size: var(--fs-sm);
}
.pr-groups-table tbody tr td:first-child {
    border-left: 1px solid var(--border);
    border-radius: var(--radius-md) 0 0 var(--radius-md);
}
.pr-groups-table tbody tr td:last-child {
    border-right: 1px solid var(--border);
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
}
.pr-groups-table tbody tr:hover td { filter: brightness(.97); }

/* Tables inside cards */
.tag_cloud table {
    width: 100%;
    border-collapse: collapse;
}
.tag_cloud table td, .tag_cloud table th {
    padding: var(--sp-2) var(--sp-1);
    vertical-align: middle;
    font-size: var(--fs-sm);
    border: 0;
}
.tag_cloud table th {
    font-weight: 700;
    color: var(--ink-muted);
    font-size: var(--fs-xs);
    text-transform: uppercase;
    letter-spacing: .05em;
}

/* ---------- 11. Focus "perf" cards (perfs.mine / max / min) --------------- */
.focus_mine, .focus_most {
    flex: 1 1 220px;
    min-width: 0;
    min-height: 110px;
    padding: var(--sp-4);
    margin: var(--sp-2);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-xs);
    text-align: left;
    font-size: var(--fs-xs);
    color: var(--ink);
    max-width: none;
    float: none;
}
.focus_mine {
    border-left: 4px solid var(--cdm-primary);
    background: linear-gradient(120deg, var(--surface) 0%, var(--surface-2) 100%);
}
.focus_most { border-left: 4px solid var(--cdm-accent); }
.focus_mine b:first-child, .focus_most b:first-child {
    display: block;
    margin-bottom: var(--sp-2);
    color: var(--cdm-secondary);
    font-size: var(--fs-sm);
    font-weight: 700;
}
:root[data-theme='dark'] .focus_mine b:first-child,
:root[data-theme='dark'] .focus_most b:first-child { color: var(--cdm-accent); }
.focus_mine sup, .focus_most sup { font-size: 60%; color: var(--ink-muted); }

/* ---------- 12. Buttons (legacy .btn family + modern .btn-primary) -------- */
.btn, .btn:visited {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    font-family: var(--font-sans);
    vertical-align: middle;
    text-decoration: none;
    background: transparent;
    border: 0;
    border-radius: var(--radius);
    box-shadow: none;
    cursor: pointer;
    transition: transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.btn strong, .btn strong span {
    display: block;
    font-weight: 600;
    border-radius: var(--radius);
}
.btn strong { padding: 0; }
.btn strong span {
    padding: var(--sp-3) var(--sp-5);
    text-transform: none;
    white-space: nowrap;
    letter-spacing: .01em;
    font-size: var(--fs-sm);
}

.btn-action, .btn-action:visited { color: #fff; }
.btn-action strong {
    background: linear-gradient(95deg, var(--cdm-primary), var(--cdm-accent));
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
}
.btn-action:hover {
    color: #fff;
    text-decoration: none;
    transform: translateY(-1px);
}
.btn-action:hover strong {
    background: linear-gradient(95deg, var(--cdm-primary-700), var(--cdm-accent-700));
    box-shadow: var(--shadow);
}
.btn-action-more strong span { padding-right: var(--sp-5); }
.btn-action-more strong span::after {
    content: '→';
    display: inline-block;
    margin-left: var(--sp-2);
    transition: transform var(--dur-fast) var(--ease);
}
.btn-action-more:hover strong span::after { transform: translateX(3px); }

.btn-header strong {
    background: var(--surface-2);
    color: var(--ink);
    border-radius: var(--radius);
}
.btn-header:hover strong { background: var(--cdm-secondary); color: #fff; }

/* legacy ".button" wrapper (used to wrap submit buttons centered) */
.button {
    text-align: center;
    padding: var(--sp-5) 0;
}

/* Plain submit buttons */
input[type='submit'],
input[type='button'],
button[type='submit'] {
    appearance: none;
    -webkit-appearance: none;
    padding: var(--sp-2) var(--sp-5);
    border-radius: var(--radius-pill);
    border: 0;
    font-family: var(--font-sans);
    font-weight: 600;
    font-size: var(--fs-sm);
    background: var(--cdm-primary);
    color: #fff;
    cursor: pointer;
    box-shadow: var(--shadow-xs);
    transition: transform var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
input[type='submit']:hover,
input[type='button']:hover,
button[type='submit']:hover {
    background: var(--cdm-primary-700);
    transform: translateY(-1px);
}

/* ---------- 13. Forms ----------------------------------------------------- */
form { color: var(--ink); }

.formfield {
    margin: var(--sp-4) 0 var(--sp-2);
    font-size: var(--fs-sm);
    color: var(--ink-soft);
}
.formfield b { color: var(--ink); font-weight: 600; }
.formfield i {
    color: var(--ink-muted);
    font-weight: 400;
    font-style: normal;
    font-size: var(--fs-xs);
    display: block;
    margin-top: 2px;
}

input[type='text'],
input[type='password'],
input[type='email'],
input[type='tel'],
input[type='number'],
input[type='search'],
input[type='file'],
select,
textarea,
.textinput {
    width: 100%;
    max-width: 420px;
    padding: var(--sp-2) var(--sp-3);
    font: inherit;
    color: var(--ink);
    background: var(--surface);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius);
    transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
    min-height: 42px;
}
input[type='text']:focus,
input[type='password']:focus,
input[type='email']:focus,
input[type='tel']:focus,
input[type='number']:focus,
input[type='search']:focus,
select:focus,
textarea:focus,
.textinput:focus {
    border-color: var(--cdm-primary);
    box-shadow: 0 0 0 3px rgba(220, 38, 38, .15);
    outline: none;
}
input[disabled], select[disabled] {
    background: var(--surface-2);
    color: var(--ink-muted);
    cursor: not-allowed;
}

input[type='checkbox'], input[type='radio'] {
    width: auto;
    min-height: 0;
    accent-color: var(--cdm-primary);
    margin-right: var(--sp-1);
}

/* small inline score inputs (bets) */
input[type='tel'][size='1'],
input[type='tel'][size='2'] {
    width: 56px;
    max-width: 56px;
    min-height: 40px;
    text-align: center;
    font-size: var(--fs-md);
    font-weight: 700;
    padding: var(--sp-1);
}

/* image-style submit (legacy .image / .imageinput / submit.gif) */
input[type='image'] {
    display: inline-block;
    width: auto !important;
    height: auto !important;
    padding: var(--sp-3) var(--sp-6);
    min-height: 44px;
    min-width: 160px;
    background: linear-gradient(95deg, var(--cdm-primary), var(--cdm-accent));
    color: #fff;
    border: 0;
    border-radius: var(--radius-pill);
    box-shadow: var(--shadow-sm);
    cursor: pointer;
    /* hide the legacy gif visually */
    color: transparent;
    text-indent: -9999px;
    overflow: hidden;
    position: relative;
    transition: transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
input[type='image']:hover { transform: translateY(-1px); box-shadow: var(--shadow); }
input[type='image']::after {
    content: 'Valider';
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    text-indent: 0;
    font-size: var(--fs-sm);
    font-weight: 600;
    letter-spacing: .01em;
}
input[type='image'][value]::after { content: attr(value); }

/* ---------- 14. Compact list (used in legacy 'compact' class) ------------- */
.compact {
    color: var(--success);
    background: var(--success-bg);
    border: 1px solid color-mix(in srgb, var(--success) 50%, transparent);
    border-radius: var(--radius-sm);
    font-size: var(--fs-xs);
    font-weight: 500;
    padding: var(--sp-1) var(--sp-2);
}

/* ---------- 15. Bullets (account page) ------------------------------------ */
.bullets {
    list-style: none;
    padding: 0;
    margin: var(--sp-4) 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--sp-3);
}
@media (min-width: 768px) {
    .bullets { grid-template-columns: repeat(2, 1fr); }
}
.bullets li {
    color: var(--ink);
    font: 600 var(--fs-md)/var(--lh-snug) var(--font-display);
    letter-spacing: 0;
    margin: 0;
    padding: 0;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-xs);
    transition: transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.bullets li:hover { transform: translateY(-1px); box-shadow: var(--shadow-sm); }
.bullets li a {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    padding: var(--sp-4);
    color: var(--ink);
    text-decoration: none;
}
.bullets li a::before {
    content: '';
    flex-shrink: 0;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--cdm-accent);
    box-shadow: 0 0 0 4px rgba(245, 158, 11, .15);
}
.bullets li a:hover { color: var(--cdm-primary); }

/* ---------- 16. Footer ---------------------------------------------------- */
.footer {
    margin: var(--sp-8) 0 0;
    padding: var(--sp-5) var(--sp-4);
    border-top: 1px solid var(--border);
    text-align: center;
    color: var(--ink-muted);
    font-size: var(--fs-sm);
}
.footer a {
    color: var(--ink-soft);
    margin: 0 var(--sp-1);
}
.footer a:hover { color: var(--cdm-primary); }

/* ---------- 17. Country flags --------------------------------------------- */
.countryflag {
    height: 20px;
    width: 30px;
    padding: 1px;
    border: 1px solid rgba(255, 255, 255, .75);
    border-radius: 6px;
    object-fit: contain;
    background: linear-gradient(135deg, rgba(255,255,255,.94), rgba(244,244,242,.86));
    box-shadow: 0 2px 6px rgba(15, 27, 63, .18), inset 0 0 0 1px rgba(15, 27, 63, .08);
    vertical-align: middle;
}

.tag_cloud table td img[src*='images/flag/'] {
    height: 20px;
    width: 30px;
    padding: 1px;
    border: 1px solid rgba(255, 255, 255, .75);
    border-radius: 6px;
    object-fit: contain;
    background: linear-gradient(135deg, rgba(255,255,255,.94), rgba(244,244,242,.86));
    box-shadow: 0 2px 6px rgba(15, 27, 63, .18), inset 0 0 0 1px rgba(15, 27, 63, .08);
    vertical-align: middle;
}

/* ---------- 18. Bets / matches inline (preserve inline bg-color colors) --- */
.tag_cloud table td[id$='_team_A'],
.tag_cloud table td[id$='_team_B'] {
    padding: var(--sp-3) var(--sp-3);
    font-weight: 600;
    border-radius: var(--radius-sm);
    font-size: var(--fs-sm);
}
.tag_cloud table td[id$='_team_A'] {
    border-top-left-radius: var(--radius);
    border-bottom-left-radius: var(--radius);
}
.tag_cloud table td[id$='_team_B'] {
    border-top-right-radius: var(--radius);
    border-bottom-right-radius: var(--radius);
}
.tag_cloud table td[id*='_team'] img { margin: 0 var(--sp-2); vertical-align: middle; }

.tag_cloud table input[type='tel'] {
    margin: 0 auto;
    display: inline-block;
    background: rgba(255, 255, 255, .85);
    border: 2px solid var(--cdm-secondary-300);
}
:root[data-theme='dark'] .tag_cloud table input[type='tel'] {
    background: rgba(19, 26, 46, .85);
    border-color: var(--cdm-accent-300);
    color: var(--ink);
}

/* ---------- 19. Rules table ----------------------------------------------- */
.rules {
    width: 100%;
    border-collapse: collapse;
    margin: var(--sp-3) 0;
    font-size: var(--fs-sm);
}
.rules caption {
    padding-bottom: var(--sp-2);
    font-size: var(--fs-sm);
    font-style: italic;
    color: var(--ink-muted);
    text-align: left;
}
.rules th {
    border-bottom: 2px solid var(--cdm-secondary);
    font-size: var(--fs-xs);
    text-transform: uppercase;
    letter-spacing: .05em;
    padding: var(--sp-2) var(--sp-3);
    text-align: center;
    color: var(--cdm-secondary);
    background: var(--surface-2);
}
:root[data-theme='dark'] .rules th {
    color: var(--cdm-accent);
    background: var(--surface-3);
    border-bottom-color: var(--cdm-accent);
}
.rules td {
    border-bottom: 1px solid var(--border);
    font-size: var(--fs-sm);
    margin: 0;
    padding: var(--sp-2) var(--sp-3);
    text-align: center;
}
ul.rules { list-style: disc inside; }
ul.rules > li { margin-bottom: var(--sp-2); }

.rule_title {
    display: inline-block;
    margin-top: var(--sp-4);
    font-weight: 800;
    font-size: var(--fs-md);
    color: var(--cdm-secondary);
    border-bottom: 3px solid var(--cdm-accent);
    padding-bottom: 2px;
}
:root[data-theme='dark'] .rule_title { color: var(--cdm-accent); }
.rule_subtitle {
    margin-left: var(--sp-2);
    font-weight: 700;
    color: var(--cdm-primary);
    text-decoration: none;
    border-bottom: 2px solid var(--cdm-primary-300);
}

/* ---------- 20. TagBoard (right column chat) ------------------------------ */
#tag_0, #tags { color: var(--ink); }
#tag_0 form { display: flex; flex-direction: row; align-items: center; gap: 8px; }
#tag { width: 100%; max-width: none; }
#tags > div[id^='tag_'] {
    padding: var(--sp-2) 0;
    border-bottom: 1px dashed var(--border);
    font-size: var(--fs-xs);
    color: var(--ink);
}
#tags > div[id^='tag_']:last-child { border-bottom: 0; }
#tags u { text-decoration: none; color: var(--ink-muted); font-size: var(--fs-xs); }
#tags b { color: var(--cdm-primary); }
#navig { padding-top: var(--sp-3); font-size: var(--fs-xs); color: var(--ink-muted); }

/* ---------- 21. Finals bracket table (kept intact for JS compat) ---------- */
.tag_cloud > table {
    overflow-x: auto;
    display: block;
}
.tag_cloud td[style*='border:1px solid #999999'] {
    background-color: var(--surface) !important;
    border-color: var(--border-strong) !important;
    color: var(--ink);
}
.tag_cloud td[style*='#CFCFCF'] {
    background: linear-gradient(180deg, var(--cdm-secondary), var(--cdm-secondary-700)) !important;
    color: #fff !important;
    border-color: var(--cdm-secondary-700) !important;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    font-size: var(--fs-xs) !important;
}
.tag_cloud td[style*='border-color:black'] {
    border-color: var(--ink-muted) !important;
}

/* ---------- 22. Stats holders -------------------------------------------- */
[id^='holder'] {
    margin: var(--sp-4) auto !important;
    left: auto !important;
    position: relative !important;
    width: 100% !important;
    max-width: 720px;
    background: var(--surface);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-xs);
    padding: var(--sp-3);
}

/* ---------- 23. Misc legacy --------------------------------------------- */
.Row { display: flex; flex-wrap: wrap; gap: var(--sp-3); align-items: center; }
.Col { display: inline-flex; align-items: center; gap: var(--sp-2); }

#rightcolumn {
    flex: 1 1 100%;
    max-width: 100%;
}
@media (min-width: 992px) {
    #rightcolumn { flex: 0 0 var(--aside-w); max-width: var(--aside-w); }
}

#fb-login, #fb-authorize, #fb-root { display: none !important; }

/* Warnings (style="color:red" injected from PHP) */
center span[style*='color:red'],
center span[style*='color: red'],
span[style*='color:red'] {
    display: inline-block;
    padding: var(--sp-2) var(--sp-3);
    background: var(--danger-bg);
    color: var(--danger) !important;
    border: 1px solid color-mix(in srgb, var(--danger) 40%, transparent);
    border-radius: var(--radius);
    margin: var(--sp-2) 0;
    font-size: var(--fs-sm);
}
center span[style*='color:red']:empty,
span[style*='color:red']:empty { display: none; }

/* Money / cagnotte highlight */
[style*='font-size:60px'], [style*='font-size: 60px'] {
    font-size: var(--fs-3xl) !important;
    color: var(--cdm-accent) !important;
    font-weight: 900;
    letter-spacing: -.02em;
}

/* Easy-autocomplete (kept for invite_friends) */
.easy-autocomplete-container ul {
    background: var(--surface);
    color: var(--ink);
    border-color: var(--border) !important;
}

/* ---------- 24. Utility classes (kept for inline usage in templates) ----- */
.text-center { text-align: center; }
.text-right  { text-align: right; }
.mt-0 { margin-top: 0 !important; }
.mt-4 { margin-top: var(--sp-4); }
.mt-6 { margin-top: var(--sp-6); }
.mb-4 { margin-bottom: var(--sp-4); }

/* ---------- 25. Reduce motion ------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ---------- 26. Print --------------------------------------------------- */
@media print {
    .site-header, .footer, .menu, .site-header__burger, .theme-toggle { display: none !important; }
    body { background: #fff !important; color: #000; }
    .tag_cloud, .list_element { box-shadow: none; border-color: #ccc; }
}
/* ---------- 27. Small-screen polish ---------------------------------------- */
@media (max-width: 767px) {
    :root { --header-h: 112px; }

    body { overflow-x: hidden; }

    .site-header__inner {
        min-height: auto;
        padding: var(--sp-2) var(--sp-3);
        flex-wrap: wrap;
        gap: var(--sp-2);
    }
    .site-header__brand {
        order: 1;
        flex: 1 1 calc(100% - 96px);
        min-width: 0;
        gap: var(--sp-2);
    }
    .site-header__brand svg,
    .site-header__brand img {
        width: 36px;
        height: 36px;
        flex: 0 0 36px;
    }
    .site-header__brand-text {
        min-width: 0;
        font-size: var(--fs-sm);
    }
    .site-header__brand-text small { font-size: .625rem; }
    .site-header__user {
        order: 3;
        flex: 1 1 100%;
        min-width: 0;
        gap: var(--sp-2);
        margin-top: calc(var(--sp-1) * -1);
        padding-left: 44px;
        font-size: var(--fs-xs);
    }
    .site-header__user a {
        flex: 0 0 28px;
        width: 28px;
    }
    .site-header__user img {
        width: 28px;
        height: 28px;
    }
    .site-header__user span {
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .theme-toggle,
    .site-header__burger {
        order: 2;
        flex: 0 0 40px;
    }

    .auth-hero {
        margin-top: var(--sp-3);
        padding: var(--sp-6) var(--sp-4);
    }
    .auth-grid { margin-top: 0; }
    .auth-card {
        min-height: 0;
        padding: var(--sp-4);
    }

    .tag_cloud {
        max-width: 100%;
        overflow-x: auto;
        padding: var(--sp-4);
    }
    .tag_cloud table { min-width: 520px; }
    .tag_cloud table table { min-width: 0; }
    .list_element {
        max-width: 100%;
        overflow-x: auto;
    }
    .list_element > table { min-width: 520px; }
}
@media (max-width: 767px) {
    .site-header__inner {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 40px 40px;
        align-items: center;
    }
    .site-header__brand {
        grid-column: 1;
        width: 100%;
    }
    .theme-toggle { grid-column: 2; }
    .site-header__burger { grid-column: 3; }
    .site-header__user {
        grid-column: 1 / -1;
        width: 100%;
    }
}
/* Auth cards must win over the generic tag_cloud card styles. */
.tag_cloud.auth-card {
    border-color: rgba(15, 27, 63, .10);
    box-shadow: var(--shadow);
}
.tag_cloud.auth-card--login { border-top: 4px solid var(--cdm-primary); }
.tag_cloud.auth-card--register { border-top: 4px solid var(--cdm-mexico); }

/* =============================================================================
   28. Redesign 2026 — Système de design "Pronosticks .pr-*"
   Source : design/design_handoff_pronosticks/redesign.css (handoff hifi)
   Strategy: additive — coexiste avec le CSS legacy. Direction par défaut: terrain.
   Conversion .mode-* → @media : voir mapping ci-dessous.
   ============================================================================= */

/* ---------- 28.1 Tokens : overrides + ajouts (par rapport au :root principal) */
:root {
    /* Overrides — valeurs redesign retenues (intention design hifi) */
    --canvas:     #F4F2EC;                              /* legacy #FAFAF9 → crème harmonisée */
    --radius-sm:  8px;                                  /* legacy 6px */
    --radius:     12px;                                 /* legacy 10px */
    --radius-md:  16px;                                 /* legacy 14px */
    --radius-lg:  22px;                                 /* legacy 20px */
    --shadow-sm:  0 2px 8px rgba(15, 27, 63, .08);      /* legacy 0 2px 6px / .08 */
    --shadow:     0 10px 28px rgba(15, 27, 63, .12);    /* legacy 0 8px 24px / .10 */
    --shadow-lg:  0 24px 56px rgba(15, 27, 63, .20);    /* legacy 0 20px 48px / .18 */

    /* Typo — ajout d'Inter Tight comme display (chargé via header.tpl task 1.B) */
    --font-sans:    'Inter', 'Inter Tight', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    --font-display: 'Inter Tight', 'Inter', sans-serif;

    /* Nouveaux tokens — surfaces / dégradés pilotés par direction */
    --hero-grad:     linear-gradient(135deg, #060A1F, #0F1B3F 50%, #B91C1C);
    --headline-grad: linear-gradient(95deg, #0F1B3F 0%, #DC2626 100%);
    --field-radius:  var(--radius-md);
    --card-bg:       var(--surface);
}
/* Note: bloc :root[data-theme='dark'] déjà défini lignes 135-158 (valeurs identiques au redesign). */

/* ---------- 28.2 Direction B — Édition (premium éditorial) ----------------- */
:root[data-dir='edition'] {
    --canvas:        #EFE7D6;
    --surface:       #FBF7EF;
    --surface-2:     #F2EADB;
    --surface-3:     #E6DCC7;
    --border:        #E0D5BE;
    --border-strong: #CDBE9E;
    --ink:           #231C12;
    --ink-soft:      #4A3F2E;
    --ink-muted:     #857862;
    --radius:        14px;
    --radius-md:     18px;
    --radius-lg:     24px;
    --hero-grad:     linear-gradient(135deg, #13110C, #1E1A10 55%, #3B2A14);
    --headline-grad: linear-gradient(95deg, #1A140C, #3A2A12);
    --shadow-sm:     0 2px 10px rgba(60, 45, 20, .10);
    --shadow:        0 14px 34px rgba(60, 45, 20, .14);
}
:root[data-dir='edition'][data-theme='dark'] {
    --canvas:        #15120B;
    --surface:       #221C12;
    --surface-2:     #2B2316;
    --surface-3:     #3A2F1D;
    --border:        #3A2F1D;
    --border-strong: #4D3F26;
    --ink:           #F6EEDD;
    --ink-soft:      #D9CBAE;
    --ink-muted:     #A2937A;
    --hero-grad:     linear-gradient(135deg, #0E0B06, #221A0E 55%, #4A3413);
}

/* ---------- 28.3 Direction C — Stade (énergie scoreboard) ------------------ */
:root[data-dir='stade'] {
    --canvas:        #070C1A;
    --surface:       #0F1730;
    --surface-2:     #16203F;
    --surface-3:     #22305A;
    --border:        #22305A;
    --border-strong: #33457A;
    --ink:           #EEF2FF;
    --ink-soft:      #C3CCE6;
    --ink-muted:     #8A97BE;
    --ink-faint:     #5C6890;
    --radius:        14px;
    --radius-md:     18px;
    --radius-lg:     26px;
    --card-bg:       linear-gradient(160deg, #142046, #0C1430);
    --hero-grad:     radial-gradient(640px 320px at 18% 8%, rgba(245, 158, 11, .35), transparent 60%),
                     radial-gradient(560px 320px at 88% 0%, rgba(0, 117, 74, .30), transparent 60%),
                     linear-gradient(135deg, #0A1233, #0C1638 55%, #3A0E12);
    --headline-grad: linear-gradient(95deg, #172554, #7F1D1D);
    --shadow:        0 18px 44px rgba(0, 0, 0, .55);
}
:root[data-dir='stade'][data-theme='dark'] {
    --canvas:  #04060F;
    --surface: #0C1326;
}

/* ---------- 28.4 App shell + ambiance ------------------------------------- */
.pr-app {
    min-height: 100vh;
    background:
        radial-gradient(900px 540px at 10% -10%, color-mix(in srgb, var(--cdm-primary) 14%, transparent), transparent 60%),
        radial-gradient(760px 520px at 94% 4%,  color-mix(in srgb, var(--cdm-accent) 14%, transparent),  transparent 58%),
        radial-gradient(1000px 640px at 50% 116%, color-mix(in srgb, var(--cdm-mexico) 12%, transparent), transparent 60%),
        var(--canvas);
    background-attachment: fixed;
}
:root[data-dir='edition'] .pr-app {
    background:
        radial-gradient(820px 520px at 88% -6%, color-mix(in srgb, var(--cdm-accent) 16%, transparent), transparent 60%),
        var(--canvas);
}
:root[data-dir='stade'] .pr-app {
    background:
        radial-gradient(820px 520px at 12% -8%, rgba(220, 38, 38, .20), transparent 58%),
        radial-gradient(720px 520px at 92% 2%,  rgba(245, 158, 11, .18), transparent 56%),
        radial-gradient(1000px 700px at 50% 120%, rgba(0, 117, 74, .16), transparent 60%),
        var(--canvas);
}

/* Direction stade : variantes lien (legacy gère déjà data-theme='dark' a). */
:root[data-dir='stade'] a { color: var(--cdm-accent-300); }

.pr-mono { font-variant-numeric: tabular-nums; font-feature-settings: 'tnum' 1; }

/* =========================================================================
   28.5 Header (sticky : crest + wordmark + nav pill + controls)
   ========================================================================= */
.pr-header {
    position: sticky; top: 0; z-index: 40;
    color: #fff;
    background: linear-gradient(180deg,
        color-mix(in srgb, var(--cdm-secondary) 96%, transparent),
        color-mix(in srgb, var(--cdm-secondary) 86%, transparent));
    backdrop-filter: saturate(140%) blur(14px);
    box-shadow: 0 8px 30px rgba(5, 10, 28, .28);
}
:root[data-dir='edition'] .pr-header { background: linear-gradient(180deg, #15110A, #1C160D); }
:root[data-dir='stade'] .pr-header {
    background: linear-gradient(180deg, rgba(8, 13, 30, .97), rgba(8, 13, 30, .84));
    box-shadow: 0 8px 34px rgba(0, 0, 0, .55);
}

.pr-headrow {
    display: flex; align-items: stretch; gap: var(--sp-3);
    min-height: 74px; padding-right: var(--sp-4);
}
@media (max-width: 767px) {
    .pr-headrow { min-height: 62px; gap: var(--sp-2); padding-right: var(--sp-3); }
}

/* Crest — key-art pleine hauteur, biseau droit */
.pr-crest {
    flex: 0 0 92px; align-self: stretch; position: relative; overflow: hidden;
    background: #0b1430; display: block;
    -webkit-clip-path: polygon(0 0, 100% 0, calc(100% - 22px) 100%, 0 100%);
            clip-path: polygon(0 0, 100% 0, calc(100% - 22px) 100%, 0 100%);
}
.pr-crest img { width: 100%; height: 100%; object-fit: cover; object-position: 30% 40%; display: block; }
.pr-crest::after {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(95deg, transparent 38%, color-mix(in srgb, var(--cdm-secondary) 88%, transparent) 96%);
}
.pr-crest__shine {
    position: absolute; inset: 0; z-index: 1;
    background: linear-gradient(180deg, rgba(255, 255, 255, .18), transparent 40%);
    pointer-events: none;
}
@media (max-width: 767px) {
    .pr-crest { flex-basis: 64px; }
}
@media (min-width: 768px) and (max-width: 979px) {
    .pr-crest { flex-basis: 84px; }
}

/* Wordmark */
.pr-wordmark {
    display: flex; flex-direction: column; justify-content: center; gap: 3px;
    color: #fff; min-width: 0; margin-right: auto; padding: var(--sp-2) 0;
}
.pr-wordmark:hover { text-decoration: none; }
.pr-wordmark__eyebrow {
    display: inline-flex; align-items: center; gap: 5px;
    font-size: .62rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
    color: var(--cdm-accent-300); white-space: nowrap;
}
.pr-host {
    width: 20px; height: 14px; border-radius: 3px; display: inline-block; object-fit: cover; overflow: hidden;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, .35), 0 2px 4px rgba(0, 0, 0, .28);
}
.pr-wordmark__name {
    font-family: var(--font-display); font-weight: 800; font-size: 1.18rem; letter-spacing: -.02em;
    line-height: 1; display: inline-flex; align-items: center; gap: 7px; white-space: nowrap;
}
@media (max-width: 767px) {
    .pr-wordmark__name { font-size: 1.02rem; }
}
.pr-26 {
    font-family: var(--font-display); font-weight: 900; font-style: italic; font-size: 1.32em; letter-spacing: -.04em;
    background: linear-gradient(160deg, #FDE68A, #F59E0B 55%, #B45309);
    -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent;
    text-shadow: 0 1px 0 rgba(0, 0, 0, .15);
    padding-right: 2px;
}

/* Nav pill */
.pr-navpill {
    display: flex; align-items: center; gap: 3px; align-self: center;
    padding: 4px; border-radius: var(--radius-pill);
    background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .12);
}
.pr-navpill a,
.pr-navpill button {
    display: inline-flex; align-items: center; gap: 7px; cursor: pointer; font: inherit;
    font-family: var(--font-display); font-weight: 700; font-size: .84rem;
    padding: 8px 15px; border-radius: var(--radius-pill); border: 0;
    color: rgba(255, 255, 255, .78); background: transparent;
    transition: color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
    text-decoration: none;
}
.pr-navpill a svg,
.pr-navpill button svg { width: 17px; height: 17px; }
.pr-navpill a:hover,
.pr-navpill button:hover { color: #fff; background: rgba(255, 255, 255, .08); }
.pr-navpill a.is-active,
.pr-navpill button.is-active {
    color: #fff; background: linear-gradient(95deg, var(--cdm-primary), var(--cdm-primary-700));
    box-shadow: 0 3px 12px color-mix(in srgb, var(--cdm-primary) 50%, transparent);
}
:root[data-dir='stade'] .pr-navpill a.is-active,
:root[data-dir='stade'] .pr-navpill button.is-active {
    background: linear-gradient(95deg, var(--cdm-primary), var(--cdm-accent)); color: #0b1020;
}

/* Right controls */
.pr-headrow__ctrl { display: flex; align-items: center; gap: 8px; align-self: center; }
.pr-timecheck {
    display: flex; align-items: center; gap: 8px;
    padding: 5px 10px; border-radius: var(--radius-pill);
    background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .18); color: #fff;
    font-family: var(--font-mono); line-height: 1.1;
}
.pr-timecheck__dot { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 8px; background: var(--success); }
.pr-timecheck__meta { display: flex; flex-direction: column; min-width: 0; }
.pr-timecheck__meta b { font-size: .78rem; font-weight: 800; white-space: nowrap; }
.pr-timecheck__meta i { font-style: normal; font-size: .62rem; color: rgba(255, 255, 255, .72); white-space: nowrap; }
.pr-timecheck--ko { border-color: rgba(252, 165, 165, .75); background: rgba(185, 28, 28, .28); }
.pr-timecheck--ko .pr-timecheck__dot { background: var(--danger); box-shadow: 0 0 0 3px rgba(185, 28, 28, .22); }
.pr-iconbtn {
    width: 40px; height: 40px; flex: 0 0 40px; display: grid; place-items: center;
    border-radius: 12px; cursor: pointer;
    background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .18); color: #fff;
    transition: background var(--dur-fast) var(--ease);
}
.pr-iconbtn:hover { background: rgba(255, 255, 255, .18); }
.pr-iconbtn svg { width: 20px; height: 20px; }
.pr-userchip {
    display: flex; align-items: center; gap: 9px; cursor: pointer; font: inherit;
    padding: 5px 13px 5px 5px; border-radius: var(--radius-pill);
    background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .16); color: #fff;
    transition: background var(--dur-fast) var(--ease);
}
.pr-userchip:hover { background: rgba(255, 255, 255, .16); }
.pr-userchip__meta { display: flex; flex-direction: column; min-width: 0; line-height: 1.12; text-align: left; }
.pr-userchip__meta b { font-weight: 700; font-size: .82rem; white-space: nowrap; }
.pr-userchip__meta i { font-style: normal; font-size: .66rem; color: var(--cdm-accent-300); white-space: nowrap; }

@media (max-width: 767px) {
    .pr-timecheck__meta i { display: none; }
}

/* Tri-nation accent stripe (signature hôtes) */
.pr-tristripe {
    height: 3px; display: flex;
    background: linear-gradient(90deg,
        #00754A 0 33.3%, #DC2626 33.3% 66.6%, #2563EB 66.6% 100%);
    opacity: .95;
}
:root[data-dir='edition'] .pr-tristripe { opacity: .9; }

/* Ticker strip */
.pr-ticker {
    display: flex; gap: var(--sp-2); align-items: center; overflow-x: auto;
    padding: 8px var(--sp-4);
    font-size: .72rem; scrollbar-width: none;
    background: rgba(0, 0, 0, .14);
    border-bottom: 1px solid rgba(255, 255, 255, .06);
}
.pr-ticker::-webkit-scrollbar { display: none; }
.pr-ticker__lead {
    flex: 0 0 auto; display: inline-flex; align-items: center; gap: 5px;
    font-family: var(--font-display); font-weight: 800; font-size: .66rem; letter-spacing: .1em; text-transform: uppercase;
    color: var(--cdm-accent-300); padding-right: 4px;
}
.pr-ticker__chip {
    flex: 0 0 auto; display: inline-flex; align-items: center; gap: var(--sp-2);
    padding: 5px 10px; border-radius: var(--radius-pill);
    background: rgba(255, 255, 255, .10); color: #fff; white-space: nowrap;
    border: 1px solid rgba(255, 255, 255, .14);
}
.pr-ticker__chip .pr-ticker__dot { width: 6px; height: 6px; border-radius: 50%; background: var(--cdm-mexico-300); }
.pr-ticker__chip--live .pr-ticker__dot { background: #fff; box-shadow: 0 0 0 0 rgba(255, 255, 255, .7); animation: pr-pulse 1.6s infinite; }
.pr-ticker__chip--live { background: var(--cdm-primary); border-color: var(--cdm-primary-300); }
.pr-ticker__chip:hover { text-decoration: none; opacity: .85; }
@keyframes pr-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(255, 255, 255, .6); }
    70%  { box-shadow: 0 0 0 7px rgba(255, 255, 255, 0); }
    100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0); }
}

/* =========================================================================
   28.6 Page chrome
   ========================================================================= */
.pr-main { max-width: 1200px; margin: 0 auto; padding: var(--sp-5) var(--sp-4) calc(var(--sp-10) + 64px); }
.pr-page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--sp-4); margin-bottom: var(--sp-6); flex-wrap: wrap; }
.pr-eyebrow { font-size: .72rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--cdm-primary); }
:root[data-theme='dark'] .pr-eyebrow,
:root[data-dir='stade']  .pr-eyebrow { color: var(--cdm-accent); }
.pr-title {
    padding-bottom: .06em;
    font-size: clamp(1.7rem, 5vw, 2.6rem); font-weight: 800; color: var(--ink); text-wrap: balance;
}
.pr-lead { color: var(--ink-muted); font-size: .95rem; margin-top: var(--sp-2); max-width: 54ch; }

.pr-card {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
}
.pr-grid { display: grid; gap: var(--sp-4); }
@media (min-width: 768px) {
    .pr-grid--main { grid-template-columns: minmax(0, 1fr) 340px; align-items: start; }
}

/* sticky group/section tabs */
.pr-segment {
    display: flex; gap: 6px; overflow-x: auto; padding: 4px;
    background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-pill); scrollbar-width: none;
}
.pr-segment::-webkit-scrollbar { display: none; }
.pr-segment button,
.pr-segment a {
    flex: 0 0 auto; border: 0; cursor: pointer; font: inherit; font-weight: 700; font-size: .82rem;
    padding: 8px 16px; border-radius: var(--radius-pill); color: var(--ink-muted); background: transparent;
    transition: all var(--dur-fast) var(--ease);
    text-decoration: none;
}
.pr-segment button.is-active,
.pr-segment a.is-active,
.pr-segment a:hover {
    color: #fff; background: linear-gradient(95deg, var(--cdm-secondary), var(--cdm-primary)); box-shadow: var(--shadow-xs);
}
:root[data-dir='stade'] .pr-segment button.is-active {
    background: linear-gradient(95deg, var(--cdm-primary), var(--cdm-accent)); color: #0b1020;
}

/* =========================================================================
   28.7 Flags (placeholders, drapeaux SVG dérivés des couleurs nationales)
   ========================================================================= */
.pr-flag {
    display: inline-flex; align-items: center; justify-content: center; border-radius: 8px; overflow: hidden; flex: 0 0 auto;
    padding: 2px; background: linear-gradient(135deg, rgba(255,255,255,.96), rgba(244,244,242,.86));
    border: 1px solid rgba(255, 255, 255, .72);
    box-shadow: 0 2px 8px rgba(15, 27, 63, .18), inset 0 0 0 1px rgba(15, 27, 63, .08);
    vertical-align: middle;
}
.pr-flag svg { display: block; }
.pr-flag img { display: block; width: 100%; height: 100%; object-fit: contain; }

/* =========================================================================
   28.8 Match card
   ========================================================================= */
.pr-match {
    position: relative;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: var(--sp-2);
    padding: var(--sp-4);
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-xs);
    transition: transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.pr-match + .pr-match { margin-top: var(--sp-3); }
.pr-match:hover { transform: translateY(-1px); box-shadow: var(--shadow-sm); }
.pr-match.is-open   { border-color: color-mix(in srgb, var(--cdm-accent) 55%, var(--border)); }
.pr-match.is-locked { opacity: .96; }
.pr-match__meta {
    position: absolute; top: -9px; left: 50%; transform: translateX(-50%);
    display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
    padding: 3px 10px; border-radius: var(--radius-pill);
    font-size: .66rem; font-weight: 700; letter-spacing: .04em;
    background: var(--surface); border: 1px solid var(--border); color: var(--ink-muted);
}
.pr-match__meta--live { background: var(--cdm-primary); color: #fff; border-color: var(--cdm-primary-700); }
.pr-match__meta .pr-ticker__dot { display: none; }
.pr-match__meta--live .pr-ticker__dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: #fff; animation: pr-pulse 1.6s infinite; }
.pr-match.is-live { border-color: var(--cdm-primary); box-shadow: 0 0 0 1px color-mix(in srgb, var(--cdm-primary) 25%, transparent), var(--shadow-sm); }
.pr-match__team { display: flex; align-items: center; gap: var(--sp-3); min-width: 0; }
.pr-match__team--b { flex-direction: row-reverse; text-align: right; }
.pr-match__team .pr-flag { width: 34px; height: 24px; }
.pr-match__name { font-family: var(--font-display); font-weight: 700; font-size: .98rem; color: var(--ink); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pr-match__seed { font-size: .66rem; color: var(--ink-faint); font-weight: 600; }
.pr-match__center { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 0 var(--sp-2); }

/* score inputs (mapping legacy : input[name=*_score_team_A/B]) */
.pr-score-pair { display: flex; align-items: center; gap: 8px; }
.pr-score-input {
    width: 52px; height: 52px; text-align: center;
    font-family: var(--font-display); font-weight: 800; font-size: 1.4rem;
    color: var(--ink); background: var(--surface);
    border: 2px solid var(--border-strong); border-radius: var(--field-radius);
    transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
    -moz-appearance: textfield;
}
.pr-score-input::-webkit-outer-spin-button,
.pr-score-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.pr-score-input:focus {
    outline: none; border-color: var(--cdm-primary);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--cdm-primary) 22%, transparent);
    background: var(--surface);
}
.pr-score-input.is-filled { border-color: var(--cdm-mexico); }
:root[data-dir='stade'] .pr-score-input { background: rgba(255, 255, 255, .04); color: #fff; }
.pr-score-sep { font-family: var(--font-display); font-weight: 800; font-size: 1rem; color: var(--ink-faint); }

/* final/locked score display */
.pr-score-final { display: flex; align-items: center; gap: 10px; font-family: var(--font-display); font-weight: 800; font-size: 1.7rem; color: var(--ink); }
.pr-score-final .pr-score-sep { font-size: 1.2rem; }
.pr-score-final--big { font-size: 2.1rem; }

/* result + diff line (secondary, below prono in locked-match view) */
.pr-match__result { display: flex; align-items: center; gap: 4px; font-size: .72rem; color: var(--ink-muted); }
.pr-match__result-label { font-weight: 600; }
.pr-match__result-score { font-weight: 700; }
.pr-match__diff { color: var(--ink-faint); font-size: .65rem; font-style: italic; }

/* points earned chip */
.pr-points {
    display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
    padding: 3px 10px; border-radius: var(--radius-pill);
    font-size: .7rem; font-weight: 800; letter-spacing: .02em;
}
.pr-points--exact { background: var(--success-bg); color: var(--success); }
.pr-points--good  { background: var(--info-bg);    color: var(--info); }
.pr-points--miss  { background: var(--surface-2);  color: var(--ink-muted); }

/* autosave hint */
.pr-saved { display: inline-flex; align-items: center; gap: 4px; font-size: .66rem; font-weight: 700; color: var(--cdm-mexico); }
.pr-saved::before { content: '\2713\00a0'; font-family: Arial, Helvetica, sans-serif; font-weight: 900; }
:root[data-theme='dark'] .pr-saved,
:root[data-dir='stade']  .pr-saved { color: var(--cdm-mexico-300); }

/* day divider */
.pr-day { display: flex; align-items: center; gap: var(--sp-3); margin: var(--sp-5) 0 var(--sp-3); }
.pr-day::after { content: ''; flex: 1; height: 1px; background: var(--border); }
.pr-day__label { font-family: var(--font-display); font-weight: 800; font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-muted); white-space: nowrap; }

/* =========================================================================
   28.9 Ranking
   ========================================================================= */

/* Headline plat (titre + count italic), remplace l'ancien bandeau .headline */
.pr-rank-headline,
.pr-bets-headline { margin: var(--sp-4) 0 var(--sp-3); }
.pr-rank-headline .pr-title,
.pr-bets-headline .pr-title { font-size: clamp(1.5rem, 4.2vw, 2.2rem); margin: 0; }
.pr-bets-headline__actions { display: inline-flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; }
.pr-bets-phase {
    padding: 6px 28px 6px 12px; border-radius: var(--radius-pill);
    background: var(--surface-2); color: var(--ink-soft);
    border: 1px solid var(--border);
    font-size: .82rem; font-weight: 600;
    appearance: none;
    background-image: linear-gradient(45deg, transparent 50%, var(--ink-muted) 50%), linear-gradient(135deg, var(--ink-muted) 50%, transparent 50%);
    background-position: calc(100% - 14px) 50%, calc(100% - 9px) 50%;
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat;
}
.pr-bets-order {
    font-size: .85rem; font-weight: 600;
    color: var(--cdm-primary); text-decoration: none;
    padding: 6px 14px; border-radius: var(--radius-pill);
    border: 1px solid color-mix(in srgb, var(--cdm-primary) 25%, transparent);
}
.pr-bets-order:hover { background: color-mix(in srgb, var(--cdm-primary) 8%, transparent); text-decoration: none; }
:root[data-theme='dark'] .pr-bets-order { color: var(--cdm-primary-300); }

/* Zone Votre position + perfs sur la page Mes pronostics */
.pr-bets-focus {
    display: grid; gap: var(--sp-4);
    grid-template-columns: minmax(0, 1fr) 340px;
    margin: 0 0 var(--sp-5);
}
@media (max-width: 979px) { .pr-bets-focus { grid-template-columns: 1fr; } }
.pr-myrank--inline { margin: 0; grid-column: 2; grid-row: 1; }
.pr-bets-perfs { grid-column: 1; grid-row: 1; }
@media (max-width: 979px) {
    .pr-myrank--inline, .pr-bets-perfs { grid-column: 1; grid-row: auto; }
}
.pr-bets-perfs { display: flex; flex-direction: column; gap: var(--sp-3); }
.pr-perf {
    display: flex; align-items: flex-start; gap: var(--sp-3);
    padding: var(--sp-3) var(--sp-4);
    background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius-md);
    box-shadow: var(--shadow-xs);
}
.pr-perf--max { border-left: 4px solid var(--cdm-mexico, #16a34a); }
.pr-perf--min { border-left: 4px solid var(--cdm-primary); }
.pr-perf img { flex: 0 0 28px; margin-top: 2px; }
.pr-perf > div { min-width: 0; }
.pr-perf b:first-child {
    display: block;
    font-family: var(--font-display); font-weight: 800;
    font-size: .7rem; letter-spacing: .1em; text-transform: uppercase;
    color: var(--ink-faint); margin-bottom: 2px;
}
.pr-perf--max b:first-child { color: var(--cdm-mexico, #16a34a); }
.pr-perf--min b:first-child { color: var(--cdm-primary); }
.pr-perf span { font-size: .82rem; color: var(--ink-soft); line-height: 1.4; }
.pr-perf span b { font-weight: 800; color: var(--ink); }
.pr-title__count {
    font-family: var(--font-sans);
    font-size: .55em; font-weight: 500; font-style: italic;
    color: var(--ink-muted); margin-left: var(--sp-2); letter-spacing: 0;
}
.pr-rank-money {
    display: inline-flex; align-items: baseline; gap: 6px;
    font-size: var(--fs-sm);
}
.pr-rank-money i { font-style: italic; color: var(--ink-muted); }
.pr-rank-money a { color: var(--cdm-accent-700); font-weight: 700; }
:root[data-theme='dark'] .pr-rank-money a { color: var(--cdm-accent-300); }

/* Tabs nav (Général / Par groupe / groupes user) */
.pr-rank-tabs { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin: 0 0 var(--sp-4); padding: 0; list-style: none; }
.pr-rank-tabs li { flex: 0 0 auto; }
.pr-rank-tabs li a {
    display: inline-flex; align-items: center;
    padding: 6px 16px; border-radius: var(--radius-pill);
    background: var(--surface-2); color: var(--ink-soft);
    border: 1px solid var(--border);
    font-size: .82rem; font-weight: 600; text-decoration: none;
    transition: background var(--dur-fast) var(--ease);
}
.pr-rank-tabs li a:hover { background: var(--surface-3); }
.pr-rank-tabs li a strong { color: var(--cdm-primary); font-weight: 800; }
:root[data-theme='dark'] .pr-rank-tabs li a strong { color: var(--cdm-accent-300); }

/* Carte "Votre position" : compléments evol + objectif (le reste hérite de .pr-myrank existant) */
.pr-myrank__evol { display: inline-flex; align-items: center; gap: 4px; font-size: .78rem; font-weight: 700; }
.pr-myrank__evol--up   { color: var(--cdm-accent-300); }
.pr-myrank__evol--down { color: var(--cdm-primary-300); }
.pr-myrank__evol--flat { color: rgba(255, 255, 255, .7); }
.pr-myrank__goal {
    margin-top: var(--sp-4); padding-top: var(--sp-4);
    border-top: 1px solid rgba(255, 255, 255, .16);
    font-size: .8rem; color: rgba(255, 255, 255, .85);
}
.pr-myrank__goal b { color: #fff; font-weight: 800; }
.pr-myrank__goal:empty { display: none; }

.pr-rank-head {
    display: grid; grid-template-columns: 54px 1fr 110px; align-items: center; gap: var(--sp-3);
    padding: 0 var(--sp-4) var(--sp-2);
    font-size: .66rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-faint);
}
.pr-rank-head > span:last-child { text-align: right; }
@media (max-width: 767px) { .pr-rank-head { display: none; } }
.pr-rank {
    position: relative;
    display: grid; grid-template-columns: 54px 1fr 110px; align-items: center; gap: var(--sp-3);
    padding: var(--sp-3) var(--sp-4);
    background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius-md);
    box-shadow: var(--shadow-xs);
    transition: transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.pr-rank + .pr-rank { margin-top: var(--sp-2); }
.pr-rank:hover { transform: translateY(-1px); box-shadow: var(--shadow-sm); }
.pr-rank__pos { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.pr-rank__num { font-family: var(--font-display); font-weight: 800; font-size: 1.25rem; color: var(--ink); line-height: 1; }
.pr-rank__move { font-size: .62rem; font-weight: 800; display: inline-flex; align-items: center; gap: 2px; }
.pr-rank__move--up   { color: var(--cdm-mexico); }
.pr-rank__move--down { color: var(--cdm-primary); }
.pr-rank__move--flat { color: var(--ink-faint); }
.pr-rank__who { display: flex; align-items: center; gap: var(--sp-3); min-width: 0; }
.pr-rank__name { font-family: var(--font-display); font-weight: 700; font-size: 1rem; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pr-rank__sub { font-size: .72rem; color: var(--ink-muted); display: flex; gap: 8px; flex-wrap: wrap; }
.pr-rank__pts { text-align: right; }
.pr-rank__pts b { font-family: var(--font-display); font-weight: 800; font-size: 1.3rem; color: var(--ink); }
.pr-rank__pts span { display: block; font-size: .62rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-faint); }

/* podium top-3 */
.pr-rank--1 {
    border-color: color-mix(in srgb, var(--podium-1) 60%, var(--border));
    background: linear-gradient(100deg, color-mix(in srgb, var(--podium-1) 16%, var(--card-bg)), var(--card-bg) 60%);
}
.pr-rank--2 { border-color: color-mix(in srgb, var(--podium-2) 50%, var(--border)); }
.pr-rank--3 { border-color: color-mix(in srgb, var(--podium-3) 50%, var(--border)); }
.pr-rank--1 .pr-rank__num,
.pr-rank--2 .pr-rank__num,
.pr-rank--3 .pr-rank__num { color: var(--ink); }
.pr-medal { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-family: var(--font-display); font-weight: 900; font-size: .82rem; color: #3a2a00; }
.pr-medal--1 { background: linear-gradient(160deg, #FDE68A, #F59E0B); box-shadow: 0 3px 10px rgba(245, 158, 11, .5); }
.pr-medal--2 { background: linear-gradient(160deg, #E5E7EB, #94A3B8); }
.pr-medal--3 { background: linear-gradient(160deg, #E7C29B, #C2855B); }

/* "vous" highlight row */
.pr-rank--me {
    border-color: color-mix(in srgb, var(--cdm-primary) 55%, var(--border));
    background: linear-gradient(100deg, color-mix(in srgb, var(--cdm-primary) 12%, var(--card-bg)), var(--card-bg) 55%);
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--cdm-primary) 30%, transparent), var(--shadow-sm);
}
.pr-rank--me .pr-rank__name::after {
    content: 'Vous'; margin-left: 8px; font-family: var(--font-sans); font-size: .6rem; font-weight: 800; letter-spacing: .08em;
    padding: 2px 7px; border-radius: var(--radius-pill); background: var(--cdm-primary); color: #fff; vertical-align: middle;
}

/* "your rank" valorisation card */
.pr-myrank {
    position: relative; overflow: hidden;
    padding: var(--sp-5); border-radius: var(--radius-lg); color: #fff;
    background: var(--hero-grad);
    box-shadow: var(--shadow);
    border: 1px solid rgba(245, 158, 11, .28);
}
.pr-myrank__label { font-size: .7rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--cdm-accent-300); }
.pr-myrank__big { display: flex; align-items: baseline; gap: 8px; margin: var(--sp-2) 0; }
.pr-myrank__rank { font-family: var(--font-display); font-weight: 900; font-size: 3.4rem; line-height: .9; }
.pr-myrank__rank sup { font-size: 1.1rem; font-weight: 700; color: var(--cdm-accent-300); }
.pr-myrank__of { color: rgba(255, 255, 255, .7); font-size: .9rem; }
.pr-myrank__row { display: flex; gap: var(--sp-4); margin-top: var(--sp-4); flex-wrap: wrap; }
.pr-myrank__stat b { display: block; font-family: var(--font-display); font-weight: 800; font-size: 1.4rem; }
.pr-myrank__stat span { font-size: .66rem; letter-spacing: .08em; text-transform: uppercase; color: rgba(255, 255, 255, .7); }
.pr-myrank__spark { position: absolute; right: -20px; bottom: -30px; width: 200px; height: 200px; border-radius: 50%; border: 46px solid rgba(255, 255, 255, .06); }

/* avatar */
.pr-avatar {
    width: 40px; height: 40px; flex: 0 0 40px; border-radius: 50%;
    display: grid; place-items: center;
    font-family: var(--font-display); font-weight: 800; color: #fff; font-size: .9rem;
    box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .32), 0 3px 10px color-mix(in srgb, var(--avatar-a, var(--cdm-secondary)) 32%, transparent);
    background: linear-gradient(135deg, var(--avatar-a, var(--cdm-secondary)), var(--avatar-b, var(--cdm-primary)));
}
.pr-account-ico { font-size: 1.1rem; line-height: 1; }
/* Avatar color variants based on position */
.pr-rank--1 .pr-avatar { background: linear-gradient(135deg, #FBBF24, #F59E0B); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .42), 0 3px 10px rgba(245, 158, 11, .5); }
.pr-rank--2 .pr-avatar { background: linear-gradient(135deg, #94A3B8, #64748B); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .42), 0 3px 10px rgba(100, 116, 139, .35); }
.pr-rank--3 .pr-avatar { background: linear-gradient(135deg, #C2855B, #A16207); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .42), 0 3px 10px rgba(162, 98, 7, .35); }

/* =========================================================================
   28.10 Phase finale — bracket
   ========================================================================= */
.pr-finals-aside {
    display: flex; align-items: center; gap: 12px; padding: 12px 16px;
    background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius-md); box-shadow: var(--shadow-xs);
}
.pr-finals-aside__ic {
    width: 38px; height: 38px; flex: 0 0 38px; border-radius: 11px; display: grid; place-items: center;
    color: var(--cdm-accent-700); background: color-mix(in srgb, var(--cdm-accent) 18%, transparent);
}
:root[data-theme='dark'] .pr-finals-aside__ic,
:root[data-dir='stade']  .pr-finals-aside__ic { color: var(--cdm-accent-300); }
.pr-finals-aside__ic svg { width: 20px; height: 20px; }
.pr-finals-aside b { display: block; font-family: var(--font-display); font-weight: 800; font-size: .9rem; color: var(--ink); }
.pr-finals-aside span { font-size: .72rem; color: var(--ink-muted); }

.pr-bk-desktop { display: none; }
@media (min-width: 768px) {
    .pr-bk-desktop { display: block; }
    .pr-bk-mobile  { display: none; }
}

.pr-bracket {
    display: flex; align-items: stretch; overflow-x: auto; padding: var(--sp-2) 2px var(--sp-4);
    scrollbar-width: thin;
}
.pr-bk-col { display: flex; flex-direction: column; min-width: 236px; flex: 0 0 auto; }
.pr-bk-rndhead {
    text-align: center; font-family: var(--font-display); font-weight: 800; font-size: .74rem;
    letter-spacing: .1em; text-transform: uppercase; color: var(--ink-muted);
    padding: 8px 0; margin-bottom: 6px; position: sticky; top: 0;
    border-bottom: 2px solid color-mix(in srgb, var(--cdm-accent) 50%, var(--border));
}
.pr-bk-slot { position: relative; flex: 1; display: flex; align-items: center; padding: 6px 10px; }

/* connector columns */
.pr-bk-link { display: flex; flex-direction: column; width: 30px; flex: 0 0 auto; padding-top: 40px; }
.pr-bk-link > div { flex: 1; position: relative; }
.pr-bk-link > div > .pr-bk-bracket {
    content: ''; position: absolute; right: 0; top: 25%; bottom: 25%; left: 50%;
    border: 2px solid var(--border-strong); border-left: 0; border-radius: 0 8px 8px 0;
}
.pr-bk-col:not(:first-child) .pr-bk-slot::before,
.pr-bk-link + .pr-bk-col .pr-bk-slot::before {
    content: ''; position: absolute; top: 50%; left: -15px; width: 15px; height: 2px; background: var(--border-strong);
}
.pr-bk-col:not(:last-child) .pr-bk-slot::after {
    content: ''; position: absolute; top: 50%; right: -15px; width: 15px; height: 2px; background: var(--border-strong);
}

/* match card (bracket) */
.pr-bk-match {
    width: 100%; background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius);
    box-shadow: var(--shadow-xs); overflow: hidden; position: relative; z-index: 1;
}
.pr-bk-match.is-open {
    border-color: color-mix(in srgb, var(--cdm-accent) 50%, var(--border));
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--cdm-accent) 22%, transparent), var(--shadow-xs);
}
.pr-bk-head {
    display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap;
    padding: 6px 10px; font-size: .64rem; font-weight: 700; color: var(--ink-muted);
    background: var(--surface-2); border-bottom: 1px solid var(--border);
}
.pr-bk-head > span:first-child { white-space: nowrap; }
.pr-bk-team {
    position: relative;
    display: flex; align-items: stretch; justify-content: space-between; gap: 8px;
    border-bottom: 1px solid var(--border);
}
.pr-bk-team:last-child { border-bottom: 0; }
.pr-bk-pick {
    flex: 1; min-width: 0; display: flex; align-items: center; gap: 9px; cursor: pointer;
    border: 0; background: transparent; font: inherit; text-align: left; padding: 9px 10px; color: var(--ink);
    transition: background var(--dur-fast) var(--ease);
}
.pr-bk-pick:hover:not(:disabled) { background: var(--surface-2); }
.pr-bk-pick:disabled { cursor: default; }
.pr-bk-name { flex: 1; min-width: 0; font-family: var(--font-display); font-weight: 700; font-size: .9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pr-bk-tbd { width: 26px; height: 18px; flex: 0 0 26px; border-radius: 4px; background: repeating-linear-gradient(45deg, var(--surface-3) 0 4px, transparent 4px 8px); }
.pr-bk-check { margin-left: 0; width: 18px; height: 18px; flex: 0 0 18px; border-radius: 50%; display: grid; place-items: center; color: #fff; background: var(--cdm-mexico); }
.pr-bk-team.is-winner { background: linear-gradient(95deg, color-mix(in srgb, var(--podium-1) 22%, var(--card-bg)), var(--card-bg) 70%); }
.pr-bk-team.is-winner .pr-bk-name { color: var(--ink); }
.pr-bk-team.is-winner::before { content: ''; position: absolute; left: 0; width: 3px; top: 0; bottom: 0; background: var(--cdm-accent); }
.pr-bk-team.is-out { opacity: .5; }
.pr-bk-score, .pr-bk-final {
    width: 46px; flex: 0 0 46px; display: grid; place-items: center; text-align: center;
    font-family: var(--font-display); font-weight: 800; font-size: 1.05rem; color: var(--ink);
    border-left: 1px solid var(--border); background: var(--surface);
}
.pr-bk-score { border: 0; border-left: 1px solid var(--border); -moz-appearance: textfield; }
.pr-bk-score::-webkit-outer-spin-button,
.pr-bk-score::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.pr-bk-score:focus { outline: none; background: color-mix(in srgb, var(--cdm-primary) 12%, var(--surface)); box-shadow: inset 0 0 0 2px var(--cdm-primary); }
.pr-bk-score.is-filled { color: var(--cdm-primary); }
:root[data-dir='stade'] .pr-bk-score,
:root[data-dir='stade'] .pr-bk-final { background: rgba(255, 255, 255, .04); }
.pr-bk-final { position: relative; }
.pr-bk-final em { position: absolute; bottom: 2px; font-style: normal; font-size: .5rem; font-weight: 700; color: var(--cdm-accent-700); letter-spacing: .05em; text-transform: uppercase; }
.pr-bk-pen { padding: 7px 10px; font-size: .66rem; font-weight: 600; color: var(--cdm-accent-700); background: var(--warning-bg); text-align: center; }
:root[data-theme='dark'] .pr-bk-pen,
:root[data-dir='stade']  .pr-bk-pen { color: var(--cdm-accent-300); }

.pr-bk-mobile .pr-bk-match { margin-bottom: var(--sp-3); }

/* Finals bracket mobile : afficher uniquement le round sélectionné */
@media (max-width: 767px) {
    .pr-bracket { flex-direction: column; }
    .pr-bracket .pr-bk-col[data-mobile-show="false"] { display: none; }
    .pr-bracket .pr-bk-col { min-width: 100%; }
    .pr-bk-tab {
        flex: 0 0 auto; border: 0; cursor: pointer; font: inherit; font-weight: 700; font-size: .82rem;
        padding: 8px 16px; border-radius: var(--radius-pill); color: var(--ink-muted); background: transparent;
        transition: all var(--dur-fast) var(--ease);
    }
    .pr-bk-tab.is-active {
        color: #fff;
        background: linear-gradient(95deg, var(--cdm-secondary), var(--cdm-primary));
    }
}
@media (min-width: 768px) {
    .pr-bracket .pr-bk-col { display: flex; }
}

/* =========================================================================
   28.11 TagBoard
   ========================================================================= */
.pr-tagboard { display: flex; flex-direction: column; }
.pr-tagboard__head {
    display: flex; align-items: center; gap: 8px;
    margin: calc(var(--sp-5) * -1) calc(var(--sp-5) * -1) var(--sp-4);
    padding: var(--sp-3) var(--sp-4); border-radius: var(--radius-md) var(--radius-md) 0 0;
    background: linear-gradient(95deg, var(--cdm-accent), var(--cdm-accent-300)); color: var(--cdm-secondary);
    font-family: var(--font-display); font-weight: 800; letter-spacing: -.01em;
}
:root[data-dir='stade'] .pr-tagboard__head { background: linear-gradient(95deg, var(--cdm-primary), var(--cdm-accent)); }
.pr-tagboard__list { display: flex; flex-direction: column; gap: var(--sp-3); max-height: 340px; overflow-y: auto; padding-right: 4px; }
.pr-tag { display: flex; gap: 10px; }
.pr-tag .pr-avatar { width: 30px; height: 30px; flex: 0 0 30px; font-size: .72rem; }
.pr-tag__body { min-width: 0; }
.pr-tag__meta { font-size: .66rem; color: var(--ink-faint); }
.pr-tag__meta b { color: var(--cdm-primary); font-weight: 700; }
:root[data-theme='dark'] .pr-tag__meta b,
:root[data-dir='stade']  .pr-tag__meta b { color: var(--cdm-accent-300); }
.pr-tag__text { font-size: .82rem; color: var(--ink-soft); }
.pr-tag__input { margin-top: var(--sp-3); }
.pr-tag__input form { display: flex; gap: 8px; align-items: center; }
.pr-tag__input input {
    flex: 1; min-width: 0; padding: 10px 14px; border-radius: var(--radius-pill);
    border: 1px solid var(--border-strong); background: var(--surface); color: var(--ink); font: inherit; font-size: .85rem;
}
.pr-tag__input input:focus {
    outline: none; border-color: var(--cdm-primary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--cdm-primary) 18%, transparent);
}
.pr-tag__input .pr-tag__send { width: 36px; height: 36px; flex: 0 0 36px; border: 0; border-radius: 50%; cursor: pointer; display: grid; place-items: center; color: #fff; background: var(--cdm-primary); padding: 0; }
.pr-tag__input .pr-tag__send:hover { background: var(--cdm-primary-700); }
.pr-tag__input .pr-tag__send svg { width: 15px; height: 15px; display: block; }

/* =========================================================================
   28.12 CTA / boutons
   ========================================================================= */
.pr-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    padding: 14px 26px; border-radius: var(--radius-pill); border: 0; cursor: pointer;
    font-family: var(--font-display); font-weight: 800; font-size: .95rem; letter-spacing: .01em;
    transition: transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
    text-decoration: none;
}
.pr-btn--cta { color: #fff; background: linear-gradient(95deg, var(--cdm-primary), var(--cdm-accent)); box-shadow: var(--shadow-sm); }
.pr-btn--cta:hover { transform: translateY(-1px); box-shadow: var(--shadow); }
.pr-btn--cta:active { transform: translateY(1px); }
.pr-btn--ghost { background: var(--surface); color: var(--ink); border: 1px solid var(--border-strong); }
.pr-btn--ghost:hover { background: var(--surface-2); }
.pr-btn--block { width: 100%; }
.pr-btn svg { width: 18px; height: 18px; }

/* =========================================================================
   28.13 Empty state + alerts
   ========================================================================= */
.pr-empty {
    text-align: center; padding: var(--sp-8) var(--sp-5);
    border: 1px dashed var(--border-strong); border-radius: var(--radius-md); background: var(--surface-2);
}
.pr-empty__icon { width: 64px; height: 64px; margin: 0 auto var(--sp-4); border-radius: 50%; display: grid; place-items: center; background: var(--surface); color: var(--ink-faint); box-shadow: var(--shadow-xs); }
.pr-empty__icon svg { width: 30px; height: 30px; }
.pr-empty h3 { font-size: 1.1rem; color: var(--ink); margin-bottom: 6px; }
.pr-empty p { color: var(--ink-muted); font-size: .88rem; margin: 0 auto var(--sp-4); max-width: 40ch; }

.pr-alert {
    display: flex; gap: 12px; align-items: flex-start;
    padding: var(--sp-3) var(--sp-4); border-radius: var(--radius); margin: var(--sp-3) 0;
    font-size: .86rem; border: 1px solid transparent;
}
.pr-alert__icon { flex: 0 0 20px; margin-top: 1px; }
.pr-alert__icon svg { width: 20px; height: 20px; }
.pr-alert--warn { background: var(--warning-bg); color: var(--warning); border-color: color-mix(in srgb, var(--warning) 40%, transparent); }
.pr-alert--info { background: var(--info-bg);    color: var(--info);    border-color: color-mix(in srgb, var(--info) 35%, transparent); }
.pr-alert--ok   { background: var(--success-bg); color: var(--success); border-color: color-mix(in srgb, var(--success) 40%, transparent); }
.pr-alert--err  { background: var(--danger-bg);  color: var(--danger);  border-color: color-mix(in srgb, var(--danger) 40%, transparent); }
.pr-alert b { font-weight: 700; }

/* =========================================================================
   28.14 Auth (login / register)
   ========================================================================= */
.pr-auth { max-width: 1080px; margin: 0 auto; }
.pr-hero {
    position: relative; isolation: isolate; overflow: hidden; text-align: center; color: #fff;
    padding: var(--sp-8) var(--sp-5); border-radius: var(--radius-lg);
    background: var(--hero-grad);
    border: 1px solid rgba(245, 158, 11, .28); box-shadow: var(--shadow-lg);
}
.pr-hero__badge {
    display: inline-flex; align-items: center; gap: 8px; padding: 7px 16px; border-radius: var(--radius-pill);
    background: var(--cdm-accent); color: var(--cdm-secondary);
    font-size: .72rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; margin-bottom: var(--sp-4);
}
.pr-hero__title { font-size: clamp(2rem, 6vw, 4rem); font-weight: 900; letter-spacing: -.03em; text-wrap: balance; color: #fff; }
.pr-hero__title em { font-style: normal; color: var(--cdm-accent-300); }
.pr-hero__lead { max-width: 640px; margin: var(--sp-4) auto 0; color: rgba(255, 255, 255, .85); font-size: 1.05rem; }
.pr-hero__stats { display: flex; justify-content: center; gap: var(--sp-6); margin-top: var(--sp-6); flex-wrap: wrap; }
.pr-hero__stat b { display: block; font-family: var(--font-display); font-weight: 900; font-size: 2rem; }
.pr-hero__stat span { font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; color: rgba(255, 255, 255, .65); }
.pr-hero__ring { position: absolute; border-radius: 50%; border: 48px solid rgba(255, 255, 255, .06); z-index: -1; }
.pr-hero__ring--1 { width: 340px; height: 340px; right: -10%; bottom: -46%; }
.pr-hero__ring--2 { width: 200px; height: 200px; left: -6%; top: -40%; border-width: 30px; }
.pr-hero__pitch {
    position: absolute; inset: 0; z-index: -1; opacity: .12;
    background-image: repeating-linear-gradient(90deg, transparent 0 56px, rgba(255, 255, 255, .6) 56px 58px);
}

.pr-auth-grid { display: grid; gap: var(--sp-4); margin-top: var(--sp-5); }
@media (min-width: 768px) {
    .pr-auth-grid { grid-template-columns: 1fr 1fr; }
}
.pr-auth-card { padding: var(--sp-6); background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow); }
.pr-auth-card--login    { border-top: 4px solid var(--cdm-primary); }
.pr-auth-card--register { border-top: 4px solid var(--cdm-mexico); display: flex; flex-direction: column; }
.pr-auth-card h2 { font-size: 1.5rem; color: var(--ink); margin-bottom: var(--sp-2); }
.pr-auth-card p  { color: var(--ink-muted); font-size: .9rem; margin: 0 0 var(--sp-4); }
.pr-field { margin-bottom: var(--sp-4); text-align: left; }
.pr-field label { display: block; font-size: .78rem; font-weight: 700; color: var(--ink-soft); margin-bottom: 6px; }
.pr-field input {
    width: 100%; padding: 13px 15px; border-radius: var(--radius); border: 1px solid var(--border-strong);
    background: var(--surface); color: var(--ink); font: inherit; font-size: .95rem;
}
.pr-field input:focus {
    outline: none; border-color: var(--cdm-primary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--cdm-primary) 18%, transparent);
}
.pr-check { display: inline-flex; align-items: center; gap: 8px; font-size: .82rem; color: var(--ink-muted); margin-bottom: var(--sp-4); }
.pr-check input { accent-color: var(--cdm-primary); width: 16px; height: 16px; }
.pr-register-perks { list-style: none; padding: 0; margin: 0 0 var(--sp-5); display: flex; flex-direction: column; gap: var(--sp-3); }
.pr-register-perks li { display: flex; gap: 10px; align-items: center; font-size: .9rem; color: var(--ink-soft); }
.pr-register-perks .pr-perk-ic {
    width: 30px; height: 30px; flex: 0 0 30px; border-radius: 9px; display: grid; place-items: center;
    background: color-mix(in srgb, var(--cdm-mexico) 16%, transparent); color: var(--cdm-mexico);
}
:root[data-theme='dark'] .pr-register-perks .pr-perk-ic,
:root[data-dir='stade']  .pr-register-perks .pr-perk-ic { color: var(--cdm-mexico-300); }
.pr-register-perks .pr-perk-ic svg { width: 17px; height: 17px; }

/* =========================================================================
   28.15 Bottom tab bar (mobile primary nav) + header menu collapse
   ========================================================================= */
.pr-tabbar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 45;
    display: flex; justify-content: space-around; align-items: stretch;
    padding: 6px 8px calc(6px + env(safe-area-inset-bottom));
    background: color-mix(in srgb, var(--surface) 90%, transparent);
    backdrop-filter: saturate(150%) blur(16px);
    border-top: 1px solid var(--border);
}
.pr-tabbar a:hover { text-decoration: none; }
.pr-tab {
    flex: 1; border: 0; background: transparent; cursor: pointer; font: inherit;
    display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 8px 4px;
    color: var(--ink-muted); border-radius: var(--radius); position: relative;
    transition: color var(--dur-fast) var(--ease);
}
.pr-tab svg { width: 23px; height: 23px; }
.pr-tab span { font-size: .62rem; font-weight: 700; letter-spacing: .01em; }
.pr-tab.is-active { color: var(--cdm-primary); }
:root[data-theme='dark'] .pr-tab.is-active,
:root[data-dir='stade']  .pr-tab.is-active { color: var(--cdm-accent); }
.pr-tab.is-active::before {
    content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
    width: 28px; height: 3px; border-radius: 3px; background: currentColor;
}
@media (min-width: 980px) {
    .pr-tabbar { display: none; }
    .pr-main   { padding-bottom: var(--sp-10); }
}

/* slot legacy de la nav desktop (intégrée au header via .pr-navpill) */
.pr-nav { display: none !important; }

/* Collapsible mobile menu (inside the sticky header) */
.pr-header__menu {
    display: block; overflow: hidden; max-height: 0;
    transition: max-height var(--dur-slow) var(--ease);
    border-top: 1px solid rgba(255, 255, 255, .08);
}
.pr-header__menu[data-open='true'] { max-height: 460px; }
.pr-header__menu ul { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: var(--sp-3) var(--sp-4) 0; list-style: none; }
.pr-header__menu ul:last-of-type { padding-bottom: var(--sp-3); }
.pr-header__menu .menu-admin { border-bottom: 1px solid rgba(255, 255, 255, .08); }
.pr-header__menu-inner { padding: var(--sp-3) var(--sp-4) var(--sp-4); display: flex; flex-direction: column; gap: 2px; }
.pr-header__menu h4 { font-size: .66rem; letter-spacing: .14em; text-transform: uppercase; color: rgba(255, 255, 255, .45); margin: var(--sp-3) 0 4px; }
.pr-header__menu a {
    display: flex; align-items: center; gap: 12px; padding: 11px 12px; border-radius: var(--radius);
    color: rgba(255, 255, 255, .9); font-weight: 600; font-size: .92rem; text-decoration: none;
}
.pr-header__menu a:hover { background: rgba(255, 255, 255, .08); color: #fff; }
.pr-header__menu a.is-active { background: color-mix(in srgb, var(--cdm-primary) 60%, transparent); color: #fff; }
.pr-header__menu a svg { width: 19px; height: 19px; }

/* drawer (legacy, unused) */
.pr-drawer { position: fixed; inset: 0; z-index: 60; display: none; }
.pr-drawer.is-open { display: block; }
.pr-drawer__scrim { position: absolute; inset: 0; background: rgba(7, 12, 26, .55); backdrop-filter: blur(2px); }
.pr-drawer__panel {
    position: absolute; top: 0; bottom: 0; right: 0; width: min(86vw, 340px);
    background: var(--surface); box-shadow: var(--shadow-lg); padding: var(--sp-5);
    display: flex; flex-direction: column; gap: var(--sp-2);
    transform: translateX(0); animation: pr-slide var(--dur) var(--ease);
}
@keyframes pr-slide { from { transform: translateX(100%); } to { transform: translateX(0); } }
.pr-drawer__panel h3 { font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-faint); margin: var(--sp-3) 0 4px; }
.pr-drawer__link { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: var(--radius); color: var(--ink); font-weight: 600; font-size: .95rem; }
.pr-drawer__link:hover { background: var(--surface-2); }
.pr-drawer__link.is-active { background: color-mix(in srgb, var(--cdm-primary) 12%, transparent); color: var(--cdm-primary); }
.pr-drawer__link svg { width: 20px; height: 20px; }
.pr-drawer__close { align-self: flex-end; }

/* =========================================================================
   28.16 Helpers
   ========================================================================= */
.pr-row    { display: flex; align-items: center; gap: var(--sp-3); }
.pr-spread { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); }
.pr-muted  { color: var(--ink-muted); }

.pr-hide-mobile { display: none !important; }
@media (min-width: 980px) {
    .pr-hide-desktop { display: none !important; }
    .pr-hide-mobile  { display: flex !important; }
}

/* .pr-stage / .pr-device : preview-only (proto), non porté en production */
/* Bloc reduce-motion : déjà défini section 25 (lignes 1306-1312), non dupliqué. */

/* =============================================================================
   29. Badges de succès (awards)
   — Le global `img { height: auto }` annule l'attribut height="16px" généré par PHP.
   — On cible explicitement .pr-rank__name img pour rétablir une taille compacte.
   ============================================================================= */
.pr-rank__name img {
    height: 20px;
    width: auto;
    vertical-align: middle;
    display: inline-block;
}

/* =============================================================================
   30. Mobile match card — lisibilité noms d'équipes
   ============================================================================= */
@media (max-width: 479px) {
    .pr-match {
        grid-template-columns: minmax(72px, 1fr) auto minmax(72px, 1fr);
        gap: 4px;
        padding: 12px 8px;
    }
    /* Disposition verticale : flag centré au-dessus, nom en-dessous */
    .pr-match__team {
        flex-direction: column;
        align-items: center;
        gap: 4px;
        min-width: 0;
    }
    .pr-match__team--b { flex-direction: column; }
    .pr-match__team .pr-flag { width: 28px; height: 18px; flex-shrink: 0; }
    .pr-match__name {
        font-size: .62rem;
        font-weight: 700;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 100%;
        text-align: center;
        line-height: 1.2;
    }
    .pr-match__center { padding: 0 4px; }
    .pr-score-input { width: 44px; height: 44px; font-size: 1.1rem; }
    .pr-score-pair { gap: 6px; }
}

/* =============================================================================
   /28. Redesign 2026 — fin
   ============================================================================= */

/* ---------- Easy-Autocomplete : dark mode fix ----------------------------- */
:root[data-theme='dark'] .easy-autocomplete ul,
:root[data-theme='dark'] .easy-autocomplete.eac-light ul {
    background: var(--surface-2, #1e2a4a);
    border-color: var(--border);
}
:root[data-theme='dark'] .easy-autocomplete ul li,
:root[data-theme='dark'] .easy-autocomplete.eac-light ul li {
    color: var(--ink);
    background: var(--surface-2, #1e2a4a);
    border-color: var(--border);
}
:root[data-theme='dark'] .easy-autocomplete ul li.selected,
:root[data-theme='dark'] .easy-autocomplete.eac-light ul li.selected {
    background: var(--surface-3, #2a3a5e);
    color: var(--ink);
}
:root[data-theme='dark'] .easy-autocomplete.eac-light input {
    color: var(--ink);
    background: var(--surface);
    border-color: var(--border);
}
@media (prefers-color-scheme: dark) {
    .easy-autocomplete ul,
    .easy-autocomplete.eac-light ul { background: #1e2a4a; border-color: #2e3f6a; }
    .easy-autocomplete ul li,
    .easy-autocomplete.eac-light ul li { color: #e8eaf6; background: #1e2a4a; border-color: #2e3f6a; }
    .easy-autocomplete ul li.selected,
    .easy-autocomplete.eac-light ul li.selected { background: #2a3a5e; }
    .easy-autocomplete.eac-light input { color: #e8eaf6; background: #0f1b3f; border-color: #2e3f6a; }
}