* { box-sizing: border-box; }

    body {
        margin: 0;
        padding: 0;
        font-family: 'Space Grotesk', 'Segoe UI', system-ui, -apple-system, sans-serif;
        overflow-x: clip;
        background:
            radial-gradient(circle at 20% 18%, rgba(var(--accent-rgb), 0.06), transparent 28%),
            radial-gradient(circle at 82% 12%, rgba(var(--accent-2-rgb), 0.07), transparent 34%),
            linear-gradient(135deg, var(--bg-1), var(--bg-2));
        color: var(--text);
        min-height: 100vh;
    }

    .shell {
        max-width: 1180px;
        margin: 0 auto;
        padding: 0 20px 48px;
    }

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

    .cta {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        padding: 12px 16px;
        border-radius: 12px;
        font-weight: 700;
        text-decoration: none;
        border: 1px solid transparent;
        transition: transform 160ms ease, box-shadow 160ms ease;
    }

    .cta-primary {
        background: var(--accent);
        color: var(--on-accent);
        box-shadow: 0 12px 32px rgba(var(--accent-rgb), 0.32);
    }

    .cta-secondary {
        background: rgba(var(--text-rgb), 0.08);
        color: var(--text);
        border-color: var(--stroke);
    }

    .cta:hover {
        transform: translateY(-1px);
        box-shadow: 0 14px 36px rgba(var(--shadow-rgb), 0.35);
    }

    .card {
        background: rgba(var(--card-rgb), 0.9);
        border: 1px solid var(--stroke);
        border-radius: 18px;
        padding: 26px;
        box-shadow: 0 20px 60px rgba(var(--shadow-rgb), 0.32);
    }

    .card-soft {
        background: var(--card-soft);
        border: 1px dashed var(--stroke);
    }

    .pill,
    .pill-accent {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 8px 12px;
        border-radius: 999px;
        font-size: 12px;
        font-weight: 700;
        letter-spacing: 0.4px;
        text-transform: uppercase;
    }

    .pill {
        background: rgba(var(--accent-rgb), 0.12);
        color: var(--accent-text);
    }

    .pill-accent {
        background: rgba(var(--accent-2-rgb), 0.14);
        color: var(--accent-2);
    }

    .section { margin-top: 42px; }

    .section-spacer { margin-top: 64px; }

    .section-alt {
        background: rgba(var(--text-rgb), 0.03);
        border-radius: 20px;
        padding: 24px 22px;
    }

    .theme-light .section-alt { background: rgba(var(--text-rgb), 0.04); }

    .section-head { margin-bottom: 12px; }

    .grid-3 {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
        gap: 14px;
    }

    .cards {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
        gap: 12px;
    }

    .metric {
        display: flex;
        flex-direction: column;
        gap: 6px;
    }

    .metric strong {
        font-size: 26px;
        letter-spacing: -0.4px;
    }

    .footnote {
        margin-top: 8px;
        font-size: 13px;
        color: var(--muted-text);
    }

    .chart-wrapper {
        padding: 0;
        overflow: hidden;
    }

    .chart-head {
        display: flex;
        justify-content: space-between;
        gap: 10px;
        padding: 22px 22px 0;
        align-items: baseline;
    }

    .chart-area {
        padding: 0 18px 18px;
        height: 320px;
    }

    .chart-area--worldcup {
        height: auto;
        min-height: 220px;
    }

    .chart-area--worldcup .wcp-portfolio-chart {
        margin-top: 0 !important;
    }

    .mini-card {
        background: rgba(var(--text-rgb), 0.04);
        border: 1px solid var(--stroke);
        border-radius: 12px;
        padding: 12px 14px;
        font-weight: 600;
        color: var(--text);
    }

    .micro-grid {
        padding: 0 22px 22px;
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
        gap: 10px;
    }

    .micro-label {
        color: var(--muted-text);
        font-size: 13px;
    }

    .micro-value {
        font-weight: 800;
        letter-spacing: -0.2px;
        font-size: 20px;
        margin-top: 6px;
    }

    .micro-value--pending {
        font-size: 16px;
        line-height: 1.35;
    }

    .legend {
        display: inline-flex;
        align-items: center;
        gap: 10px;
        color: var(--muted-text);
        font-size: 13px;
    }

    .dot {
        width: 12px;
        height: 12px;
        border-radius: 99px;
        background: linear-gradient(135deg, var(--accent), var(--accent-2));
        display: inline-block;
    }

    .policy ul {
        list-style: disc;
        padding-left: 18px;
        margin: 0;
        color: var(--muted-text);
    }

    .step-icon {
        position: relative;
        width: 56px;
        height: 56px;
        border-radius: 16px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-weight: 800;
        background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.18), rgba(var(--accent-rgb), 0.08));
        color: var(--accent-text);
        margin-bottom: 14px;
        border: 1px solid rgba(var(--accent-rgb), 0.18);
        box-shadow: 0 8px 22px rgba(var(--accent-rgb), 0.12);
    }

    .step-icon svg {
        width: 28px;
        height: 28px;
        stroke-width: 1.8;
    }

    .step-icon--alt {
        background: linear-gradient(135deg, rgba(var(--accent-2-rgb), 0.2), rgba(var(--accent-2-rgb), 0.08));
        color: var(--accent-2);
        border-color: rgba(var(--accent-2-rgb), 0.2);
        box-shadow: 0 8px 22px rgba(var(--accent-2-rgb), 0.12);
    }

    .step-icon__num {
        position: absolute;
        top: -7px;
        right: -7px;
        min-width: 22px;
        height: 22px;
        padding: 0 7px;
        border-radius: 999px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 11px;
        font-weight: 800;
        letter-spacing: 0.04em;
        background: var(--accent);
        color: var(--on-accent);
        box-shadow: 0 6px 14px rgba(var(--accent-rgb), 0.32);
        border: 2px solid var(--card);
    }

    .disclaimer {
        font-size: 14px;
        color: var(--muted-text);
        line-height: 1.55;
    }

    .wc-home-hero {
        --wc-hero-bg-1: #0a0d13;
        --wc-hero-bg-2: #121925;
        --wc-hero-surface: rgba(255, 248, 235, 0.06);
        --wc-hero-surface-strong: rgba(8, 12, 18, 0.58);
        --wc-hero-border: rgba(219, 172, 96, 0.18);
        --wc-hero-border-strong: rgba(219, 172, 96, 0.3);
        --wc-hero-text: #f6efe4;
        --wc-hero-muted: rgba(246, 239, 228, 0.72);
        --wc-hero-soft: rgba(246, 239, 228, 0.54);
        --wc-hero-gold: #d08a3c;
        --wc-hero-gold-soft: #efca7d;
        --wc-hero-teal: rgba(97, 199, 190, 0.42);
        --wc-hero-signal-gold: rgba(242, 213, 151, 0.78);
        --wc-hero-signal-gold-soft: rgba(242, 213, 151, 0.18);
        --wc-hero-signal-teal: rgba(126, 209, 201, 0.5);
        --wc-hero-signal-teal-soft: rgba(126, 209, 201, 0.12);
        --wc-hero-signal-line: rgba(242, 213, 151, 0.18);
        --wc-hero-signal-layer-opacity: 0.88;
        --wc-hero-signal-dot-opacity: 0.34;
        --wc-hero-signal-dot-opacity-soft: 0.2;
        --wc-hero-signal-line-opacity: 0.26;
        --wc-hero-signal-pulse-min: 0.14;
        --wc-hero-signal-pulse-peak: 0.42;
        --wc-hero-signal-pulse-end: 0.24;
        /* URL relative au fichier CSS (/maquette/css/) : resout vers /images/…
           Remplace l'appel Blade asset() de l'ancien CSS inline. */
        --wc-hero-image: url('../../images/hero-trophy-2026.webp');
        position: relative;
        width: 100%;
        margin-left: 0;
        margin-right: 0;
        padding: clamp(1.4rem, 2.6vw, 2.2rem) 0;
        overflow: hidden;
        background: #081018;
        color: var(--wc-hero-text);
    }

    html[data-theme="light"] .wc-home-hero {
        --wc-hero-bg-1: #f4efe4;
        --wc-hero-bg-2: #fbf8f1;
        --wc-hero-surface: rgba(18, 25, 37, 0.04);
        --wc-hero-surface-strong: rgba(255, 250, 243, 0.76);
        --wc-hero-border: rgba(141, 93, 26, 0.12);
        --wc-hero-border-strong: rgba(141, 93, 26, 0.24);
        --wc-hero-text: #182230;
        --wc-hero-muted: rgba(24, 34, 48, 0.76);
        --wc-hero-soft: rgba(24, 34, 48, 0.72);
        --wc-hero-gold: #7d4c0f;
        --wc-hero-gold-soft: #8a5a10;
        --wc-hero-teal: rgba(54, 138, 139, 0.16);
        --wc-hero-signal-gold: rgba(151, 108, 36, 0.42);
        --wc-hero-signal-gold-soft: rgba(151, 108, 36, 0.09);
        --wc-hero-signal-teal: rgba(58, 132, 136, 0.24);
        --wc-hero-signal-teal-soft: rgba(58, 132, 136, 0.06);
        --wc-hero-signal-line: rgba(151, 108, 36, 0.10);
        --wc-hero-signal-layer-opacity: 0.62;
        --wc-hero-signal-dot-opacity: 0.22;
        --wc-hero-signal-dot-opacity-soft: 0.12;
        --wc-hero-signal-line-opacity: 0.18;
        --wc-hero-signal-pulse-min: 0.08;
        --wc-hero-signal-pulse-peak: 0.28;
        --wc-hero-signal-pulse-end: 0.16;
        background: #f1eadf;
    }

    .wc-home-hero__backdrop,
    .wc-home-hero__mesh,
    .wc-home-hero__glow,
    .wc-home-hero__signals {
        position: absolute;
        inset: 0;
        pointer-events: none;
    }

    .wc-home-hero__backdrop {
        inset: 0;
        z-index: 0;
        overflow: hidden;
        background: var(--wc-hero-image) 70% center / cover no-repeat;
        transform-origin: 74% 50%;
        animation: wcHeroBackdropFloat 18s cubic-bezier(0.37, 0, 0.2, 1) infinite alternate;
        will-change: transform, opacity;
    }

    .wc-home-hero__backdrop::before,
    .wc-home-hero__backdrop::after {
        content: '';
        position: absolute;
        inset: 0;
        pointer-events: none;
    }

    .wc-home-hero__backdrop::before {
        background:
            linear-gradient(90deg, rgba(6, 10, 16, 0.92) 0%, rgba(6, 10, 16, 0.88) 18%, rgba(6, 10, 16, 0.74) 31%, rgba(6, 10, 16, 0.46) 47%, rgba(6, 10, 16, 0.16) 64%, rgba(6, 10, 16, 0.03) 78%, transparent 100%),
            linear-gradient(180deg, rgba(7, 11, 17, 0.22) 0%, rgba(7, 11, 17, 0.06) 42%, rgba(7, 11, 17, 0.36) 100%);
        opacity: 1;
    }

    .wc-home-hero__backdrop::after {
        inset: 10% 2% 6% 44%;
        border-radius: 50%;
        background: radial-gradient(circle, rgba(242, 213, 151, 0.14) 0%, rgba(242, 213, 151, 0.08) 26%, rgba(126, 209, 201, 0.08) 44%, transparent 70%);
        mix-blend-mode: screen;
        opacity: 0.32;
        animation: wcHeroBackdropAura 14s cubic-bezier(0.37, 0, 0.2, 1) infinite alternate;
        will-change: transform, opacity;
    }

    html[data-theme="light"] .wc-home-hero__backdrop {
        background: var(--wc-hero-image) 70% center / cover no-repeat;
        opacity: 0.98;
        filter: saturate(0.98) contrast(1.02);
    }

    html[data-theme="light"] .wc-home-hero__backdrop::before {
        background:
            linear-gradient(90deg, rgba(244, 238, 228, 0.94) 0%, rgba(244, 238, 228, 0.88) 18%, rgba(244, 238, 228, 0.7) 31%, rgba(244, 238, 228, 0.42) 47%, rgba(244, 238, 228, 0.14) 64%, rgba(244, 238, 228, 0.02) 80%, transparent 100%),
            linear-gradient(180deg, rgba(255, 255, 255, 0.16) 0%, rgba(255, 255, 255, 0.03) 42%, rgba(225, 212, 192, 0.18) 100%);
    }

    html[data-theme="light"] .wc-home-hero__backdrop::after {
        opacity: 0.2;
    }

    .wc-home-hero__mesh {
        top: auto;
        height: 38%;
        z-index: 1;
        background:
            linear-gradient(180deg, transparent, rgba(255, 255, 255, 0.06)),
            repeating-linear-gradient(90deg, transparent 0 4.8%, rgba(255, 255, 255, 0.06) 4.8% 5.2%, transparent 5.2% 9.6%);
        mask-image: linear-gradient(180deg, transparent 0%, #000 45%, #000 100%);
        -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 45%, #000 100%);
        opacity: 0.28;
        animation: wcHeroMeshFloat 16s cubic-bezier(0.37, 0, 0.2, 1) infinite alternate;
        will-change: transform, opacity;
    }

    .wc-home-hero__glow--left {
        z-index: 1;
        background:
            radial-gradient(circle at 10% 34%, rgba(255, 224, 170, 0.34) 0%, rgba(255, 224, 170, 0.12) 24%, transparent 46%),
            linear-gradient(120deg, rgba(255, 255, 255, 0.06), transparent 38%);
        mix-blend-mode: screen;
        opacity: 0.92;
    }

    .wc-home-hero__glow--right {
        z-index: 1;
        background:
            radial-gradient(circle at 72% 24%, rgba(71, 132, 145, 0.22) 0%, rgba(71, 132, 145, 0.08) 24%, transparent 42%),
            radial-gradient(circle at 58% 92%, rgba(201, 168, 76, 0.12) 0%, transparent 30%);
        animation: wcHeroGlowFloat 14s cubic-bezier(0.37, 0, 0.2, 1) infinite alternate;
        will-change: transform, opacity;
    }

    .wc-home-hero__signals {
        z-index: 1;
        overflow: hidden;
        opacity: var(--wc-hero-signal-layer-opacity);
        mix-blend-mode: screen;
        mask-image: linear-gradient(90deg, transparent 0%, transparent 28%, rgba(0, 0, 0, 0.52) 41%, #000 52%, #000 100%);
        -webkit-mask-image: linear-gradient(90deg, transparent 0%, transparent 28%, rgba(0, 0, 0, 0.52) 41%, #000 52%, #000 100%);
        animation: wcHeroSignalFieldFloat 18s cubic-bezier(0.37, 0, 0.2, 1) infinite alternate;
        will-change: transform, opacity;
    }

    .wc-home-hero__signals::before,
    .wc-home-hero__signals::after,
    .wc-home-hero__stage-signals::before {
        content: '';
        position: absolute;
        border-radius: 999px;
        pointer-events: none;
        will-change: transform, opacity;
    }

    .wc-home-hero__signals::before {
        inset: 18% 12% 22% 50%;
        background: radial-gradient(circle, rgba(242, 213, 151, 0.14) 0%, rgba(242, 213, 151, 0.08) 26%, transparent 62%);
        opacity: 0.22;
        animation: wcHeroSignalSweep 16s cubic-bezier(0.37, 0, 0.2, 1) infinite;
    }

    .wc-home-hero__signals::after {
        inset: 24% 2% 18% 58%;
        background: radial-gradient(circle, rgba(126, 209, 201, 0.12) 0%, rgba(126, 209, 201, 0.06) 30%, transparent 64%);
        opacity: 0.18;
        animation: wcHeroSignalSweep 21s cubic-bezier(0.37, 0, 0.2, 1) -6s infinite reverse;
    }

    .wc-home-hero__signal {
        position: absolute;
        left: var(--x);
        top: var(--y);
        transform: translate3d(0, 0, 0);
        will-change: transform, opacity;
    }

    .wc-home-hero__signal--dot,
    .wc-home-hero__signal--halo {
        width: var(--size);
        height: var(--size);
        border-radius: 999px;
        animation: wcHeroSignalPulse var(--duration, 12s) cubic-bezier(0.37, 0, 0.2, 1) infinite;
        animation-delay: var(--delay, 0s);
        transform-origin: center;
    }

    .wc-home-hero__signal--dot {
        background: radial-gradient(circle, var(--wc-hero-signal-gold) 0%, rgba(255, 236, 192, 0.62) 38%, transparent 72%);
        opacity: var(--wc-hero-signal-dot-opacity);
    }

    .wc-home-hero__signal--halo {
        background: radial-gradient(circle, var(--wc-hero-signal-gold-soft) 0%, rgba(242, 213, 151, 0.12) 34%, transparent 72%);
        opacity: 0;
    }

    .wc-home-hero__signal--line {
        width: var(--w);
        height: 2px;
        transform: rotate(var(--r));
        transform-origin: left center;
        background: linear-gradient(90deg, transparent 0%, var(--wc-hero-signal-line) 18%, rgba(255, 255, 255, 0.08) 52%, transparent 100%);
        opacity: var(--wc-hero-signal-line-opacity);
        animation: wcHeroSignalBreath var(--duration, 15s) cubic-bezier(0.37, 0, 0.2, 1) infinite;
        animation-delay: var(--delay, 0s);
    }

    .wc-home-hero__signal--teal.wc-home-hero__signal--dot {
        background: radial-gradient(circle, var(--wc-hero-signal-teal) 0%, rgba(174, 239, 235, 0.42) 36%, transparent 72%);
    }

    .wc-home-hero__signal--teal.wc-home-hero__signal--halo {
        background: radial-gradient(circle, var(--wc-hero-signal-teal-soft) 0%, rgba(126, 209, 201, 0.1) 38%, transparent 74%);
    }

    .wc-home-hero__signal--soft.wc-home-hero__signal--dot {
        opacity: var(--wc-hero-signal-dot-opacity-soft);
    }

    .wc-home-hero__inner {
        position: relative;
        z-index: 2;
        max-width: 1180px;
        margin: 0 auto;
        padding: 0 20px;
        display: grid;
        grid-template-columns: minmax(320px, 520px) 1fr;
        gap: 1.35rem;
        align-items: end;
    }

    .wc-home-hero__content {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 0;
        position: relative;
        overflow: hidden;
        padding: 1.5rem 1.5rem 1.45rem;
        border-radius: 24px;
        background: linear-gradient(150deg, rgba(8, 12, 18, 0.8), rgba(8, 12, 18, 0.56));
        border: 1px solid rgba(237, 232, 223, 0.12);
        backdrop-filter: blur(16px);
        box-shadow: 0 28px 70px rgba(var(--shadow-rgb), 0.34);
    }

    .wc-home-hero__content::before {
        content: '';
        position: absolute;
        inset: 0;
        pointer-events: none;
        background: linear-gradient(135deg, rgba(255, 255, 255, 0.07), transparent 34%, transparent 72%, rgba(201, 168, 76, 0.06));
    }

    html[data-theme="light"] .wc-home-hero__content {
        background: linear-gradient(150deg, rgba(255, 250, 243, 0.78), rgba(255, 250, 243, 0.62));
        border-color: rgba(122, 90, 32, 0.14);
        box-shadow: 0 24px 54px rgba(30, 24, 16, 0.12);
    }

    .wc-home-hero__eyebrow {
        display: inline-flex;
        align-items: center;
        gap: 0.8rem;
        flex-wrap: wrap;
        margin-bottom: 0.75rem;
        animation: wcHeroRise 0.55s 0.05s ease backwards;
    }

    .wc-home-hero__eyebrow-label,
    .wc-home-hero__eyebrow-hosts {
        display: inline-flex;
        align-items: center;
        min-height: 32px;
        padding: 0.42rem 0.78rem;
        border-radius: 999px;
        font-size: 0.68rem;
        font-weight: 700;
        letter-spacing: 0.18em;
        text-transform: uppercase;
    }

    .wc-home-hero__eyebrow-label {
        color: var(--wc-hero-gold-soft);
        background: rgba(208, 138, 60, 0.12);
        border: 1px solid var(--wc-hero-border-strong);
    }

    .wc-home-hero__eyebrow-hosts {
        color: var(--wc-hero-soft);
        background: var(--wc-hero-surface);
        border: 1px solid rgba(255, 255, 255, 0.08);
    }

    .wc-home-hero__title {
        margin: 0;
        font-family: 'Barlow Condensed', 'Space Grotesk', sans-serif;
        font-size: clamp(2.95rem, 6vw, 5.65rem);
        line-height: 0.86;
        letter-spacing: 0.02em;
        text-transform: uppercase;
        color: var(--wc-hero-text);
        animation: wcHeroRise 0.65s 0.14s ease backwards;
    }

    .wc-home-hero__title span {
        display: block;
        color: var(--wc-hero-gold);
        background: linear-gradient(120deg, var(--wc-hero-gold-soft) 0%, var(--wc-hero-gold) 46%, #f6e1a3 62%, var(--wc-hero-gold) 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        text-shadow: none;
    }

    .wc-home-hero__lead {
        margin: 0.45rem 0 0;
        font-size: 0.88rem;
        font-weight: 700;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        color: var(--wc-hero-gold-soft);
        animation: wcHeroRise 0.6s 0.24s ease backwards;
    }

    .wc-home-hero__sub {
        max-width: 620px;
        margin: 0.45rem 0 0;
        font-size: 0.9rem;
        line-height: 1.52;
        color: var(--wc-hero-muted);
        animation: wcHeroRise 0.65s 0.33s ease backwards;
    }

    .wc-home-hero__stats {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 0.6rem;
        margin-top: 0.85rem;
        animation: wcHeroRise 0.65s 0.42s ease backwards;
    }

    .wc-home-hero__stat {
        display: flex;
        flex-direction: column;
        gap: 0.2rem;
        min-width: 0;
        padding: 0.8rem 0.85rem;
        border-radius: 16px;
        border: 1px solid rgba(237, 232, 223, 0.08);
        background: rgba(255, 255, 255, 0.04);
    }

    html[data-theme="light"] .wc-home-hero__stat {
        background: rgba(255, 255, 255, 0.42);
        border-color: rgba(122, 90, 32, 0.12);
    }

    .wc-home-hero__stat strong {
        font-family: 'Barlow Condensed', 'Space Grotesk', sans-serif;
        font-size: clamp(1.55rem, 3vw, 2.05rem);
        line-height: 1;
        color: var(--wc-hero-gold-soft);
        letter-spacing: 0.03em;
    }

    .wc-home-hero__stat span {
        font-size: 0.66rem;
        font-weight: 700;
        letter-spacing: 0.16em;
        text-transform: uppercase;
        color: var(--wc-hero-soft);
    }

    .wc-home-hero__stat-sep { display: none; }

    .wc-home-hero__actions {
        display: flex;
        gap: 0.7rem;
        flex-wrap: wrap;
        margin-top: 0.95rem;
        animation: wcHeroRise 0.65s 0.52s ease backwards;
    }

    .wc-home-hero__cta {
        min-height: 40px;
        padding-inline: 0.95rem;
        border-radius: 12px;
        font-size: 0.84rem;
    }

    .wc-home-hero__cta--primary {
        background: linear-gradient(135deg, var(--wc-hero-gold), var(--wc-hero-gold-soft));
        color: #120b02;
        box-shadow: 0 18px 40px rgba(208, 138, 60, 0.25);
    }

    .wc-home-hero__visual {
        display: flex;
        justify-content: flex-end;
        align-items: flex-end;
        min-width: 0;
        animation: wcHeroRise 0.7s 0.24s ease backwards;
    }

    .wc-home-hero__stage {
        position: relative;
        width: min(100%, 220px);
        min-height: auto;
        padding: 0.9rem;
        border-radius: 20px;
        background: linear-gradient(145deg, rgba(8, 12, 18, 0.6), rgba(8, 12, 18, 0.38));
        border: 1px solid rgba(237, 232, 223, 0.12);
        box-shadow: 0 22px 48px rgba(var(--shadow-rgb), 0.24);
        backdrop-filter: blur(14px);
    }

    .wc-home-hero__stage::before {
        content: '';
        position: absolute;
        inset: 0;
        border-radius: inherit;
        pointer-events: none;
        background: linear-gradient(125deg, rgba(255, 255, 255, 0.06), transparent 45%);
        opacity: 0.8;
    }

    .wc-home-hero__stage-signals {
        position: absolute;
        inset: 0;
        pointer-events: none;
        overflow: hidden;
        border-radius: inherit;
        opacity: 0.68;
        mix-blend-mode: screen;
        animation: wcHeroSignalFieldFloat 14s cubic-bezier(0.37, 0, 0.2, 1) -4s infinite alternate;
        will-change: transform, opacity;
    }

    .wc-home-hero__stage-signals::before {
        inset: 20% 16% 16% 36%;
        background: radial-gradient(circle, rgba(242, 213, 151, 0.18) 0%, rgba(242, 213, 151, 0.1) 26%, transparent 62%);
        opacity: 0.22;
        animation: wcHeroSignalSweep 12s cubic-bezier(0.37, 0, 0.2, 1) -2s infinite;
    }

    .wc-home-hero__soon {
        position: relative;
        display: inline-flex;
        align-items: center;
        gap: 0.45rem;
        padding: 0.34rem 0.65rem;
        border-radius: 999px;
        background: rgba(208, 138, 60, 0.12);
        border: 1px solid var(--wc-hero-border-strong);
        color: var(--wc-hero-gold-soft);
        font-size: 0.62rem;
        font-weight: 700;
        letter-spacing: 0.18em;
        text-transform: uppercase;
        z-index: 1;
    }

    .wc-home-hero__soon::before {
        content: '';
        width: 7px;
        height: 7px;
        border-radius: 50%;
        background: #ef5f40;
        box-shadow: 0 0 14px rgba(239, 95, 64, 0.6);
        animation: pulse 1.6s ease-in-out infinite;
    }

    .wc-home-hero--live .wc-home-hero__soon {
        background: rgba(54, 168, 110, 0.14);
        border-color: rgba(54, 168, 110, 0.28);
        color: #8be0a6;
    }

    .wc-home-hero--live .wc-home-hero__soon::before {
        background: #31c56b;
        box-shadow: 0 0 14px rgba(49, 197, 107, 0.55);
    }

    .wc-home-hero--completed .wc-home-hero__soon {
        background: rgba(116, 132, 156, 0.14);
        border-color: rgba(116, 132, 156, 0.28);
        color: rgba(246, 239, 228, 0.8);
    }

    .wc-home-hero--completed .wc-home-hero__soon::before {
        background: #9aa6b6;
        box-shadow: 0 0 14px rgba(154, 166, 182, 0.4);
        animation: none;
    }

    .wc-home-hero__countdown {
        position: relative;
        min-width: 0;
        margin-top: 0.7rem;
        padding: 0;
        border-radius: 0;
        background: transparent;
        border: 1px solid var(--wc-hero-border);
        border-width: 1px 0 0;
        padding-top: 0.7rem;
        z-index: 1;
    }

    .wc-home-hero__countdown strong {
        display: block;
        font-family: 'Barlow Condensed', 'Space Grotesk', sans-serif;
        font-size: 1.7rem;
        line-height: 1;
        color: var(--wc-hero-gold-soft);
    }

    .wc-home-hero__countdown span,
    .wc-home-hero__countdown small {
        display: block;
        margin-top: 0.3rem;
        line-height: 1.4;
    }

    .wc-home-hero__countdown span {
        font-size: 0.58rem;
        font-weight: 700;
        letter-spacing: 0.18em;
        text-transform: uppercase;
        color: var(--wc-hero-soft);
    }

    .wc-home-hero__countdown small {
        font-size: 0.72rem;
        color: var(--wc-hero-muted);
    }

    .wc-home-hero__caption {
        grid-column: 1 / -1;
        margin-top: 0.8rem;
        font-size: 0.72rem;
        line-height: 1.6;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        color: rgba(237, 232, 223, 0.54);
        animation: wcHeroRise 0.62s 0.84s ease backwards;
    }

    html[data-theme="light"] .wc-home-hero__caption {
        color: rgba(21, 18, 10, 0.48);
    }

    .wc-home-hero__caption-label {
        display: inline-flex;
        align-items: center;
        padding: 0.32rem 0.62rem;
        border-radius: 999px;
        background: rgba(208, 138, 60, 0.12);
        color: var(--wc-hero-gold-soft);
        font-size: 0.6rem;
        font-weight: 700;
        letter-spacing: 0.16em;
        text-transform: uppercase;
    }

    .wc-home-hero__caption p {
        margin: 0.45rem 0 0;
        font-size: 0.76rem;
        line-height: 1.5;
        color: var(--wc-hero-muted);
    }

    .ribbon { display: grid; gap: 12px; }

    .ribbon__viewport {
        overflow-x: auto;
        overflow-y: hidden;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }

    .ribbon__viewport::-webkit-scrollbar { display: none; }

    .ribbon__viewport:hover .ribbon__track { animation-play-state: paused; }

    .ribbon__viewport.is-paused .ribbon__track { animation-play-state: paused; }

    .ribbon__track {
        display: flex;
        align-items: center;
        gap: 16px;
        width: max-content;
        padding: 6px 0 10px;
        animation: ribbon-scroll var(--ribbon-duration, 120s) linear infinite;
        will-change: transform;
    }

    .ribbon__group {
        display: flex;
        align-items: center;
        gap: 16px;
    }

    .ribbon__item {
        display: grid;
        gap: 6px;
        padding: 10px 16px;
        border-radius: 14px;
        border: 1px solid rgba(var(--text-rgb), 0.12);
        background: rgba(var(--card-rgb), 0.88);
        font-size: 12px;
        color: var(--text);
        min-width: 300px;
        text-decoration: none;
    }

    .ribbon__item[data-match-url] {
        cursor: pointer;
    }

    .ribbon__item[data-match-url]:focus-visible {
        outline: 2px solid rgba(var(--accent-rgb), 0.5);
        outline-offset: 2px;
    }

    .ribbon__item:hover {
        border-color: rgba(var(--accent-rgb), 0.24);
    }

    .ribbon__line {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        white-space: nowrap;
        width: 100%;
    }

    .ribbon__line--meta {
        color: var(--muted-text);
        font-size: 11px;
        gap: 10px;
    }

    .ribbon__line--odds {
        gap: 10px;
    }

    .ribbon__vs {
        font-size: 10px;
        color: var(--muted-text);
        text-transform: uppercase;
        letter-spacing: 0.1em;
    }

    .ribbon__teams {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        font-weight: 600;
        justify-content: center;
        text-align: center;
    }

    .ribbon__teams a {
        color: inherit;
        text-decoration: none;
    }

    .ribbon__teams a:hover {
        text-decoration: underline;
    }

    .ribbon__team {
        display: inline-flex;
        align-items: center;
        gap: 6px;
    }

    .ribbon__logo {
        width: 22px;
        height: 22px;
        border-radius: 6px;
        object-fit: cover;
        border: 1px solid rgba(var(--text-rgb), 0.1);
        background: rgba(var(--text-rgb), 0.04);
        display: block;
    }

    .ribbon__logo-fallback {
        width: 22px;
        height: 22px;
        border-radius: 6px;
        background: rgba(var(--accent-rgb), 0.12);
        color: var(--accent-text);
        font-weight: 700;
        font-size: 12px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border: 1px solid rgba(var(--accent-rgb), 0.24);
    }

    .wc-ribbon__meta-badge {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 3px 8px;
        border-radius: 999px;
        background: rgba(var(--accent-rgb), 0.12);
        border: 1px solid rgba(var(--accent-rgb), 0.25);
        color: var(--accent-text);
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.06em;
        font-size: 10px;
    }

    .ribbon__odds {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        color: var(--muted-text);
        font-variant-numeric: tabular-nums;
    }

    .ribbon__odd {
        display: inline-flex;
        align-items: center;
        gap: 4px;
        font-weight: 600;
        color: var(--muted-text);
    }

    .ribbon__odd-label {
        font-size: 10px;
        font-weight: 700;
        padding: 2px 6px;
        border-radius: 999px;
        border: 1px solid transparent;
    }

    .ribbon__odd--home .ribbon__odd-label {
        color: var(--accent-text);
        border-color: rgba(var(--accent-rgb), 0.35);
        background: rgba(var(--accent-rgb), 0.12);
    }

    .ribbon__odd--draw .ribbon__odd-label {
        color: var(--text);
        border-color: rgba(var(--text-rgb), 0.2);
        background: rgba(var(--text-rgb), 0.08);
    }

    .ribbon__odd--away .ribbon__odd-label {
        color: var(--accent-2);
        border-color: rgba(var(--accent-2-rgb), 0.35);
        background: rgba(var(--accent-2-rgb), 0.12);
    }

    .ribbon__odd.is-winner .ribbon__odd-label {
        font-weight: 800;
    }

    .ribbon__score {
        font-weight: 700;
        color: var(--text);
    }

    .ribbon__sep {
        color: rgba(var(--text-rgb), 0.25);
    }

    .ribbon__status {
        font-size: 10px;
        text-transform: uppercase;
        letter-spacing: 0.08em;
        color: var(--muted-text);
    }

    .ribbon__badge {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 3px 8px;
        border-radius: 999px;
        font-size: 10px;
        font-weight: 800;
        letter-spacing: 0.06em;
        text-transform: uppercase;
    }

    .ribbon__badge--live {
        background: rgba(var(--accent-rgb), 0.16);
        border: 1px solid rgba(var(--accent-rgb), 0.28);
        color: var(--accent-text);
    }

    .ribbon__badge--postponed {
        background: rgba(var(--text-rgb), 0.08);
        border: 1px solid rgba(var(--text-rgb), 0.12);
        color: var(--muted-text);
    }

    .ribbon__postponed-copy {
        color: var(--muted-text);
        font-size: 12px;
        font-weight: 600;
        letter-spacing: 0.02em;
    }

    .ribbon__item--finished .ribbon__odd.is-winner .ribbon__odd-label {
        background: rgba(var(--accent-2-rgb), 0.24);
        border-color: rgba(var(--accent-2-rgb), 0.6);
        color: var(--accent-2);
        box-shadow: 0 6px 12px rgba(var(--accent-2-rgb), 0.16);
    }

    .ribbon__item--finished .ribbon__odd.is-winner span:last-child {
        color: var(--text);
        font-weight: 700;
    }

    .ribbon__item--live .ribbon__odd.is-winner .ribbon__odd-label {
        background: rgba(var(--accent-rgb), 0.24);
        border-color: rgba(var(--accent-rgb), 0.6);
        color: var(--accent-text);
        box-shadow: 0 6px 12px rgba(var(--accent-rgb), 0.16);
    }

    .ribbon__item--live .ribbon__odd.is-winner span:last-child {
        color: var(--text);
        font-weight: 700;
    }

    .ribbon__item--live {
        border-color: rgba(var(--accent-rgb), 0.35);
        position: relative;
    }

    .ribbon__item--live::after {
        content: '';
        width: 6px;
        height: 6px;
        border-radius: 999px;
        background: var(--accent);
        position: absolute;
        top: 6px;
        right: 8px;
        animation: pulse 1.6s ease-in-out infinite;
    }

    .ribbon__item--finished {
        border-color: rgba(var(--accent-2-rgb), 0.45);
        position: relative;
    }

    .ribbon__item--finished::after {
        content: '';
        width: 6px;
        height: 6px;
        border-radius: 999px;
        background: var(--accent-2);
        position: absolute;
        top: 6px;
        right: 8px;
    }

    .ribbon__badge--finished {
        background: rgba(var(--accent-2-rgb), 0.16);
        border: 1px solid rgba(var(--accent-2-rgb), 0.28);
        color: var(--accent-2);
    }

    .wc-groups-grid {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 16px;
    }

    .wc-group-card {
        display: grid;
        gap: 16px;
        padding: 20px;
        text-decoration: none;
        color: inherit;
        overflow: hidden;
        position: relative;
        background:
            radial-gradient(circle at 12% 10%, rgba(var(--accent-rgb), 0.12), transparent 34%),
            linear-gradient(145deg, rgba(var(--card-rgb), 0.94), rgba(var(--card-rgb), 0.82));
        transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease;
    }

    .wc-group-card::after {
        content: '';
        position: absolute;
        inset: auto -28px -36px auto;
        width: 96px;
        height: 96px;
        border-radius: 999px;
        border: 1px solid rgba(var(--text-rgb), 0.06);
        background: rgba(var(--text-rgb), 0.025);
        pointer-events: none;
    }

    .wc-group-card:hover {
        transform: translateY(-2px);
        box-shadow: 0 22px 54px rgba(var(--shadow-rgb), 0.26);
        border-color: rgba(var(--accent-rgb), 0.28);
    }

    .wc-group-card__head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        position: relative;
        z-index: 1;
    }

    .wc-group-card__title {
        margin: 0;
        font-size: 26px;
        letter-spacing: -0.03em;
    }

    .wc-group-card__hint {
        color: var(--muted-text);
        font-size: 12px;
        font-weight: 700;
        letter-spacing: 0.08em;
        text-transform: uppercase;
    }

    .wc-group-card__teams {
        list-style: none;
        margin: 0;
        padding: 0;
        display: grid;
        gap: 8px;
        position: relative;
        z-index: 1;
    }

    .wc-group-card__team {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        min-height: 42px;
        padding: 9px 10px;
        border-radius: 12px;
        background: rgba(var(--text-rgb), 0.035);
        border: 1px solid rgba(var(--text-rgb), 0.075);
        backdrop-filter: blur(8px);
    }

    .wc-group-card__team.is-placeholder {
        border-style: dashed;
        color: var(--muted-text);
        background: rgba(var(--text-rgb), 0.02);
    }

    .wc-group-card__identity {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        min-width: 0;
    }

    .wc-group-card__flag {
        width: 28px;
        height: 20px;
        border-radius: 6px;
        border: 1px solid rgba(var(--text-rgb), 0.1);
        background: rgba(var(--text-rgb), 0.05);
        display: inline-flex;
        align-items: center;
        justify-content: center;
        overflow: hidden;
        flex: 0 0 28px;
        box-shadow: 0 6px 14px rgba(var(--shadow-rgb), 0.12);
    }

    .wc-group-card__flag img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }

    .wc-group-card__flag-fallback {
        font-size: 11px;
        line-height: 1;
    }

    .wc-group-card__code {
        font-weight: 800;
        letter-spacing: 0.08em;
    }

    .wc-group-card__points {
        font-size: 12px;
        color: var(--muted-text);
        font-variant-numeric: tabular-nums;
        padding: 3px 8px;
        border-radius: 999px;
        background: rgba(var(--text-rgb), 0.045);
        border: 1px solid rgba(var(--text-rgb), 0.06);
        white-space: nowrap;
    }

    .wc-pass-focus {
        border-radius: 20px;
        border: 1px solid rgba(var(--accent-rgb), 0.35);
        background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.16), rgba(var(--card-rgb), 0.92));
        padding: 22px;
        display: grid;
        gap: 12px;
        box-shadow: 0 18px 42px rgba(var(--shadow-rgb), 0.22);
        transition: box-shadow 200ms ease, transform 200ms ease;
    }

    .wc-pass-focus:hover {
        box-shadow: 0 20px 48px rgba(var(--shadow-rgb), 0.28);
        transform: translateY(-1px);
    }

    .wc-pass-focus__badge {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 4px 10px;
        border-radius: 999px;
        font-size: 10px;
        font-weight: 800;
        letter-spacing: 0.4px;
        text-transform: uppercase;
        background: rgba(var(--accent-rgb), 0.2);
        color: var(--accent-text);
        width: fit-content;
    }

    .wc-pass-focus__title {
        margin: 0;
        font-size: 22px;
    }

    .wc-pass-focus__text {
        margin: 0;
        color: var(--muted-text);
    }

    .wc-pass-focus__list {
        margin: 0;
        padding-left: 18px;
        color: var(--text);
        display: grid;
        gap: 6px;
    }

    .wc-pass-focus__cta {
        display: flex;
        gap: 10px;
        flex-wrap: wrap;
    }

    .wc-empty {
        padding: 18px 20px;
        border-radius: 18px;
        border: 1px dashed rgba(var(--text-rgb), 0.16);
        color: var(--muted-text);
    }

    /* ── Section icons (pills + headings) ─────────────────── */
    .pill svg,
    .pill-accent svg {
        width: 13px;
        height: 13px;
        flex-shrink: 0;
        stroke-width: 2;
    }

    .section-head h2 {
        display: flex;
        align-items: center;
        gap: 12px;
    }

    .section-head__icon {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 36px;
        height: 36px;
        border-radius: 12px;
        flex-shrink: 0;
        background: rgba(var(--accent-rgb), 0.12);
        color: var(--accent-text);
    }

    .section-head__icon svg {
        width: 18px;
        height: 18px;
        stroke-width: 2;
    }

    .section-head__icon--alt {
        background: rgba(var(--accent-2-rgb), 0.14);
        color: var(--accent-2);
    }

    /* ── Decorative pattern (field lines) ────────────────── */
    .section-pattern {
        position: relative;
        isolation: isolate;
        overflow: hidden;
    }

    .section-pattern::before {
        content: '';
        position: absolute;
        inset: 0;
        z-index: -1;
        background-image:
            radial-gradient(circle at 50% 50%, rgba(var(--text-rgb), 0.025) 1px, transparent 1.5px);
        background-size: 28px 28px;
        opacity: 0.65;
        mask-image: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.55) 25%, rgba(0, 0, 0, 0.55) 75%, transparent);
        -webkit-mask-image: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.55) 25%, rgba(0, 0, 0, 0.55) 75%, transparent);
        pointer-events: none;
    }

    .section-pattern--field::before {
        background-image:
            linear-gradient(transparent 49.5%, rgba(var(--accent-rgb), 0.06) 49.5%, rgba(var(--accent-rgb), 0.06) 50.5%, transparent 50.5%),
            linear-gradient(90deg, transparent 49.5%, rgba(var(--accent-rgb), 0.06) 49.5%, rgba(var(--accent-rgb), 0.06) 50.5%, transparent 50.5%);
        background-size: 100% 100%, 64px 100%;
        opacity: 0.6;
    }

    .wc-pass-focus {
        position: relative;
        overflow: hidden;
        isolation: isolate;
    }

    .wc-pass-focus::before {
        content: '';
        position: absolute;
        inset: 0;
        z-index: -1;
        background-image:
            radial-gradient(circle at 0% 100%, rgba(var(--accent-rgb), 0.18), transparent 38%),
            radial-gradient(circle at 100% 0%, rgba(var(--accent-2-rgb), 0.14), transparent 36%);
        pointer-events: none;
    }

    .wc-pass-focus::after {
        content: '';
        position: absolute;
        right: -32px;
        top: -32px;
        width: 180px;
        height: 180px;
        border-radius: 50%;
        border: 1.5px solid rgba(var(--accent-rgb), 0.18);
        z-index: -1;
        pointer-events: none;
    }

    /* ── Compact bracket (phases finales sur la home) ─────── */
    .wc-bracket-grid {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 16px;
    }

    .wc-bracket-phase {
        padding: 20px;
        display: grid;
        gap: 14px;
        position: relative;
        background:
            radial-gradient(circle at 88% 8%, rgba(var(--accent-2-rgb), 0.1), transparent 36%),
            linear-gradient(145deg, rgba(var(--card-rgb), 0.94), rgba(var(--card-rgb), 0.82));
    }

    .wc-bracket-phase__head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
    }

    .wc-bracket-phase__hint {
        color: var(--muted-text);
        font-size: 11px;
        font-weight: 700;
        letter-spacing: 0.08em;
        text-transform: uppercase;
    }

    .wc-bracket-phase__title {
        margin: 4px 0 0;
        font-size: 22px;
        letter-spacing: -0.02em;
    }

    .wc-bracket-phase__count {
        font-size: 11px;
        color: var(--muted-text);
        padding: 3px 8px;
        border-radius: 999px;
        background: rgba(var(--text-rgb), 0.045);
        border: 1px solid rgba(var(--text-rgb), 0.06);
        white-space: nowrap;
    }

    .wc-bracket-phase__matches {
        list-style: none;
        margin: 0;
        padding: 0;
        display: grid;
        gap: 8px;
    }

    .wc-bracket-match {
        display: grid;
        gap: 6px;
        padding: 10px 12px;
        border-radius: 12px;
        background: rgba(var(--text-rgb), 0.035);
        border: 1px solid rgba(var(--text-rgb), 0.075);
        text-decoration: none;
        color: inherit;
        transition: border-color 160ms ease, transform 160ms ease;
    }

    .wc-bracket-match:hover {
        border-color: rgba(var(--accent-rgb), 0.3);
        transform: translateY(-1px);
    }

    .wc-bracket-match__row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
        min-height: 22px;
    }

    .wc-bracket-match__row.is-loser {
        opacity: 0.55;
    }

    .wc-bracket-match__team {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        font-weight: 600;
        font-size: 13px;
        min-width: 0;
    }

    .wc-bracket-match__flag {
        width: 22px;
        height: 16px;
        border-radius: 4px;
        overflow: hidden;
        background: rgba(var(--text-rgb), 0.05);
        border: 1px solid rgba(var(--text-rgb), 0.08);
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
    }

    .wc-bracket-match__flag img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }

    .wc-bracket-match__code {
        font-size: 12px;
        letter-spacing: 0.04em;
        font-weight: 700;
    }

    .wc-bracket-match__score {
        font-variant-numeric: tabular-nums;
        font-weight: 800;
        font-size: 13px;
        color: var(--text);
    }

    .wc-bracket-match__meta {
        font-size: 11px;
        color: var(--muted-text);
        display: flex;
        align-items: center;
        gap: 8px;
        font-weight: 600;
    }

    .wc-bracket-cta {
        margin-top: 18px;
        display: flex;
        gap: 10px;
        flex-wrap: wrap;
    }

    @media (min-width: 768px) and (max-width: 1100px) {
        .wc-bracket-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    }

    @media (max-width: 767px) {
        .wc-bracket-grid { grid-template-columns: 1fr; }
    }

    @keyframes wcHeroRise {
        from {
            opacity: 0;
            transform: translateY(18px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    @keyframes wcHeroReveal {
        to { clip-path: inset(0 0 0 0); }
    }

    @keyframes wcHeroFloat {
        0%, 100% { transform: translateY(0); }
        50% { transform: translateY(-10px); }
    }

    @keyframes wcHeroScan {
        from { transform: translateY(-140%); }
        to { transform: translateY(145%); }
    }

    @keyframes wcHeroFade {
        from { opacity: 0; transform: scale(0.92); }
        to { opacity: 1; transform: scale(1); }
    }

    @keyframes wcHeroPulse {
        0%, 100% { transform: scale(1); opacity: 0.35; }
        50% { transform: scale(1.03); opacity: 0.72; }
    }

    @keyframes wcHeroSignalPulse {
        0%, 100% {
            opacity: var(--wc-hero-signal-pulse-min);
            transform: translate3d(var(--x0, 0px), var(--y0, 0px), 0) scale(0.9);
        }
        38% {
            opacity: var(--wc-hero-signal-pulse-peak);
            transform: translate3d(var(--x1, 0px), var(--y1, 0px), 0) scale(1.06);
        }
        62% {
            opacity: var(--wc-hero-signal-pulse-end);
            transform: translate3d(var(--x2, 0px), var(--y2, 0px), 0) scale(1.12);
        }
    }

    @keyframes wcHeroSignalBreath {
        0%, 100% {
            opacity: calc(var(--wc-hero-signal-line-opacity) * 0.58);
            transform: rotate(var(--r)) scaleX(0.98) translateZ(0);
        }
        50% {
            opacity: calc(var(--wc-hero-signal-line-opacity) * 1.25);
            transform: rotate(var(--r)) scaleX(1.08) translateZ(0);
        }
    }

    @keyframes wcHeroSignalFieldFloat {
        0% {
            transform: translate3d(-10px, 4px, 0);
        }
        50% {
            transform: translate3d(5px, -5px, 0);
        }
        100% {
            transform: translate3d(14px, -10px, 0);
        }
    }

    @keyframes wcHeroSignalSweep {
        0%, 100% {
            opacity: 0.08;
            transform: translate3d(-18px, 10px, 0) scale(0.92);
        }
        45% {
            opacity: 0.26;
            transform: translate3d(12px, -12px, 0) scale(1.04);
        }
        70% {
            opacity: 0.18;
            transform: translate3d(24px, -16px, 0) scale(1.08);
        }
    }

    @keyframes wcHeroBackdropFloat {
        0% {
            transform: translate3d(-6px, 8px, 0) scale(1.015);
        }
        50% {
            transform: translate3d(8px, -4px, 0) scale(1.032);
        }
        100% {
            transform: translate3d(14px, -10px, 0) scale(1.05);
        }
    }

    @keyframes wcHeroBackdropAura {
        0% {
            opacity: 0.16;
            transform: translate3d(-8px, 8px, 0) scale(0.96);
        }
        50% {
            opacity: 0.3;
            transform: translate3d(10px, -10px, 0) scale(1.04);
        }
        100% {
            opacity: 0.22;
            transform: translate3d(18px, -14px, 0) scale(1.08);
        }
    }

    @keyframes wcHeroMeshFloat {
        0% {
            opacity: 0.22;
            transform: translate3d(-8px, 4px, 0);
        }
        50% {
            opacity: 0.32;
            transform: translate3d(4px, -5px, 0);
        }
        100% {
            opacity: 0.4;
            transform: translate3d(10px, -9px, 0);
        }
    }

    @keyframes wcHeroGlowFloat {
        0% {
            opacity: 0.62;
            transform: translate3d(-8px, 6px, 0) scale(0.98);
        }
        50% {
            opacity: 0.88;
            transform: translate3d(4px, -6px, 0) scale(1.02);
        }
        100% {
            opacity: 0.72;
            transform: translate3d(12px, -10px, 0) scale(1.04);
        }
    }

    @keyframes ribbon-scroll {
        0% { transform: translateX(0); }
        100% { transform: translateX(var(--ribbon-shift, -50%)); }
    }

    @keyframes pulse {
        0% { opacity: 0.35; transform: scale(1); }
        50% { opacity: 0.8; transform: scale(1.4); }
        100% { opacity: 0.35; transform: scale(1); }
    }

    @media (max-width: 767px) {
        .shell { padding: 0 16px 36px; }
        .section-spacer { margin-top: 52px; }
        .section-alt { padding: 20px 16px; }
        .wc-groups-grid { grid-template-columns: 1fr; }
        .chart-head { flex-direction: column; align-items: flex-start; }
        .chart-area { height: 260px; }
        .wc-home-hero__inner { padding: 0 16px; }
        .wc-home-hero { padding: 1rem 0 1.1rem; }
        .wc-home-hero__content { padding: 1.4rem 1.2rem 1.3rem; border-radius: 24px; }
        .wc-home-hero__actions { width: 100%; }
        .wc-home-hero__cta { width: 100%; }
        .wc-home-hero__visual { width: 100%; }
        .wc-home-hero__stage {
            width: 100%;
            max-width: none;
            min-height: 170px;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            background:
                linear-gradient(135deg, rgba(8, 12, 18, 0.28), rgba(8, 12, 18, 0.58)),
                linear-gradient(180deg, rgba(8, 12, 18, 0.10), rgba(8, 12, 18, 0.48)),
                var(--wc-hero-image) 72% center / cover no-repeat;
        }
        .wc-home-hero__backdrop {
            inset: 0;
            animation-duration: 15s;
            background-position: 66% center;
            opacity: 0.92;
        }
        .wc-home-hero__backdrop::before {
            background:
                linear-gradient(180deg, rgba(7, 11, 17, 0.72) 0%, rgba(7, 11, 17, 0.48) 38%, rgba(7, 11, 17, 0.18) 62%, rgba(7, 11, 17, 0.28) 100%),
                linear-gradient(90deg, rgba(7, 11, 17, 0.7) 0%, rgba(7, 11, 17, 0.3) 54%, rgba(7, 11, 17, 0.06) 74%, transparent 100%);
        }
        .wc-home-hero__backdrop::after {
            inset: 16% 2% 18% 40%;
            opacity: 0.16;
        }
        html[data-theme="light"] .wc-home-hero__stage {
            background:
                linear-gradient(135deg, rgba(255, 250, 243, 0.16), rgba(255, 250, 243, 0.46)),
                linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.34)),
                var(--wc-hero-image) 72% center / cover no-repeat;
        }
        html[data-theme="light"] .wc-home-hero__backdrop::before {
            background:
                linear-gradient(180deg, rgba(244, 238, 228, 0.82) 0%, rgba(244, 238, 228, 0.56) 38%, rgba(244, 238, 228, 0.18) 62%, rgba(244, 238, 228, 0.22) 100%),
                linear-gradient(90deg, rgba(244, 238, 228, 0.74) 0%, rgba(244, 238, 228, 0.28) 54%, rgba(244, 238, 228, 0.04) 76%, transparent 100%);
        }
        .wc-home-hero__signals {
            opacity: 0.52;
            mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, 0.32) 44%, transparent 72%);
            -webkit-mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, 0.32) 44%, transparent 72%);
        }
        .wc-home-hero__signals .wc-home-hero__signal:nth-child(n + 7) {
            display: none;
        }
        .wc-home-hero__stage-signals {
            opacity: 0.78;
        }
        .wc-home-hero__stats {
            grid-template-columns: repeat(3, minmax(0, 1fr));
            gap: 0.45rem;
        }
        .wc-home-hero__stat {
            padding: 0.72rem 0.6rem;
        }
        .wc-home-hero__stat strong {
            font-size: 1.4rem;
        }
        .wc-home-hero__stat span {
            font-size: 0.54rem;
            letter-spacing: 0.14em;
        }
        .wc-home-hero__countdown {
            margin-top: auto;
            padding-top: 0.6rem;
        }
    }

    @media (min-width: 768px) and (max-width: 1100px) {
        .wc-groups-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    }

    @media (max-width: 980px) {
        .wc-home-hero__inner {
            grid-template-columns: 1fr;
            gap: 1rem;
        }

        .wc-home-hero__content {
            order: 1;
        }

        .wc-home-hero__visual {
            order: 2;
            justify-content: flex-start;
        }

        .wc-home-hero {
            background-position: 64% center;
        }

        .wc-home-hero__signals {
            mask-image: linear-gradient(90deg, transparent 0%, transparent 10%, rgba(0, 0, 0, 0.32) 26%, #000 40%, #000 100%);
            -webkit-mask-image: linear-gradient(90deg, transparent 0%, transparent 10%, rgba(0, 0, 0, 0.32) 26%, #000 40%, #000 100%);
        }

        .wc-home-hero__title,
        .wc-home-hero__lead,
        .wc-home-hero__sub {
            max-width: 100%;
        }
    }

    @media (prefers-reduced-motion: reduce) {
        .wc-home-hero__eyebrow,
        .wc-home-hero__title,
        .wc-home-hero__lead,
        .wc-home-hero__sub,
        .wc-home-hero__stats,
        .wc-home-hero__actions,
        .wc-home-hero__visual,
        .wc-home-hero__caption,
        .wc-home-hero__soon::before,
        .wc-home-hero__signal,
        .wc-home-hero__backdrop,
        .wc-home-hero__backdrop::after,
        .wc-home-hero__mesh,
        .wc-home-hero__glow--right,
        .ribbon__track {
            animation: none !important;
            transition: none !important;
        }

        .wc-home-hero__signals,
        .wc-home-hero__stage-signals {
            opacity: 0.18;
            animation: none !important;
        }

        .wc-home-hero__signals::before,
        .wc-home-hero__signals::after,
        .wc-home-hero__stage-signals::before {
            animation: none !important;
            opacity: 0.12;
            transform: none !important;
        }
    }

    /* ── Matchs de préparation — teaser section ─────────────────────── */
    .wc-prep-teaser {
        background: rgba(var(--accent-rgb), 0.05);
        border: 1px solid rgba(var(--accent-rgb), 0.15);
        border-radius: 20px;
        padding: 28px 28px 24px;
        position: relative;
        overflow: hidden;
    }
    .wc-prep-teaser::before {
        content: '';
        position: absolute;
        top: -40px; right: -40px;
        width: 180px; height: 180px;
        background: radial-gradient(circle, rgba(var(--accent-rgb), 0.12), transparent 70%);
        pointer-events: none;
    }
    .wc-prep-teaser__head {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 16px;
        flex-wrap: wrap;
        margin-bottom: 20px;
    }
    .wc-prep-teaser__eyebrow {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        font-size: 0.7rem;
        font-weight: 700;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        color: var(--accent);
        background: rgba(var(--accent-rgb), 0.12);
        border: 1px solid rgba(var(--accent-rgb), 0.22);
        padding: 4px 10px;
        border-radius: 100px;
        margin-bottom: 10px;
    }
    .wc-prep-teaser__eyebrow-dot {
        width: 6px; height: 6px;
        border-radius: 50%;
        background: var(--accent);
        animation: pulse 2.2s ease-in-out infinite;
    }
    .wc-prep-teaser__title {
        font-size: 1.2rem;
        font-weight: 800;
        margin: 0 0 6px;
        line-height: 1.3;
    }
    .wc-prep-teaser__subtitle {
        font-size: 0.88rem;
        color: var(--muted-text);
        margin: 0;
        max-width: 520px;
    }
    .wc-prep-teaser__cta-link {
        flex-shrink: 0;
        display: inline-flex;
        align-items: center;
        gap: 6px;
        font-size: 0.84rem;
        font-weight: 700;
        color: var(--accent);
        text-decoration: none;
        padding: 9px 16px;
        border: 1px solid rgba(var(--accent-rgb), 0.35);
        border-radius: 10px;
        white-space: nowrap;
        transition: background 150ms ease, border-color 150ms ease;
        align-self: center;
    }
    .wc-prep-teaser__cta-link:hover {
        background: rgba(var(--accent-rgb), 0.1);
        border-color: rgba(var(--accent-rgb), 0.55);
    }
    .wc-prep-teaser__matchups {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        align-items: center;
    }
    .wc-prep-matchup {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        background: var(--card);
        border: 1px solid var(--stroke);
        border-radius: 10px;
        padding: 8px 12px;
        font-size: 0.82rem;
        font-weight: 600;
        text-decoration: none;
        color: var(--text);
        transition: border-color 140ms ease, box-shadow 140ms ease;
    }
    .wc-prep-matchup:hover {
        border-color: rgba(var(--accent-rgb), 0.4);
        box-shadow: 0 4px 14px rgba(var(--shadow-rgb), 0.1);
    }
    .wc-prep-matchup__flag {
        display: block;
        width: 22px;
        height: 15px;
        object-fit: cover;
        border-radius: 2px;
        flex-shrink: 0;
    }
    .wc-prep-matchup__vs {
        color: var(--muted-text);
        font-size: 0.72rem;
        font-weight: 500;
    }
    .wc-prep-teaser__more {
        font-size: 0.8rem;
        color: var(--muted-text);
        padding: 8px 4px;
    }
    @media (max-width: 767px) {
        .wc-prep-teaser { padding: 20px 16px 18px; }
        .wc-prep-teaser__head { flex-direction: column; }
        .wc-prep-teaser__cta-link { align-self: flex-start; }
        .wc-prep-teaser__title { font-size: 1.05rem; }
    }