@import url("cookie-consent.css?v=20260714b");

:root{
--nav-clearance:132px;
}

*{
margin:0;
padding:0;
box-sizing:border-box;
}

html{
scroll-behavior:smooth;
scroll-padding-top:var(--nav-clearance);
}

:target{
scroll-margin-top:var(--nav-clearance);
}

body{
background:#101216;
color:white;
font-family:'Inter',sans-serif;
}

body::before{

content:"";

position:fixed;

inset:0;

pointer-events:none;

background:

linear-gradient(
180deg,
rgba(255,255,255,.02),
transparent 30%
),

radial-gradient(
circle at 50% -20%,
rgba(212,175,55,.06),
transparent 45%
);

z-index:-1;
}

body::after{

content:"";

position:fixed;

inset:0;

opacity:.025;

pointer-events:none;

background-image:radial-gradient(rgba(255,255,255,.12) 1px,transparent 1px);
background-size:24px 24px;

z-index:-1;

}

header{
    min-height:100vh;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    text-align:center;
    padding:40px 20px;
    max-width:1200px;
    margin:auto;
    padding-top: 140px;
}

.logo{
width:260px;
margin-bottom:35px;
animation:float 5s ease-in-out infinite;
}

@keyframes float{

    0%{
        transform:translateY(0px);
    }

    50%{
        transform:translateY(-12px);
    }

    100%{
        transform:translateY(0px);
    }

}

h1{
font-size:4rem;
font-weight:700;
letter-spacing:4px;
margin-bottom:20px;
}

.hero-text{
font-size:1.4rem;
line-height:1.8;
opacity:.85;
margin-bottom:40px;
}

.cta{
background:white;
color:#0f1115;
padding:16px 34px;
border-radius:12px;
text-decoration:none;
font-weight:600;
transition:.3s;
}

.cta:hover{
transform:translateY(-3px);
}

#univers{
padding:100px 20px;
max-width:1200px;
margin:auto;
}

#univers h2{
text-align:center;
font-size:2.5rem;
margin-bottom:60px;
}

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

.card{
background:#181c23;
border:1px solid rgba(255,255,255,.08);
border-radius:20px;
padding:35px;
text-align:center;
transition:.3s;
cursor:pointer;
}

.card:hover{
transform:translateY(-8px);
}

.emoji{
font-size:3rem;
margin-bottom:15px;
}

.card h3{
font-size:2rem;
margin-bottom:10px;
}

.card p{
opacity:.8;
}

.saveurs:hover{
border-color:#8f2945;
}

.cyclisme:hover{
border-color:#d4af37;
}

.formula:hover,
.meca:hover{
border-color:#d84040;
}

.rugby:hover{
border-color:#9ed24a;
}

.football:hover{
border-color:#20c46b;
}

.tennis:hover{
border-color:#05482f;
}

.events:hover{
border-color:#8b5cf6;
}

@media(max-width:768px){

.logo{
width:160px;
}

h1{
font-size:2.5rem;
}

.hero-text{
font-size:1.1rem;
}

}

.brand{
    display:flex;
    align-items:center;
    gap:12px;
    text-decoration:none;
    color:white;
    font-weight:700;
    letter-spacing:2px;
    margin-right:0;
    justify-self:start;
    min-width:180px;
}

.brand span{
    font-size:1rem;
    font-weight:900;
    letter-spacing:2px;
    text-transform:uppercase;
}

.brand strong{
    color:#d4af37;
    font-weight:900;
}

.nav-logo-img{
    width:54px;
    height:54px;
    object-fit:contain;
    transition:.3s;
}

.brand:hover .nav-logo-img{
    transform:scale(1.05);
}

.navbar{
    position:fixed;
    top:20px;
    left:50%;
    transform:translateX(-50%);
    width:min(calc(100% - 40px),1280px);
    height:78px;
    padding:0 28px;
    display:grid;
    grid-template-columns:max-content minmax(0,1fr) max-content;
    align-items:center;
    gap:clamp(16px,2.2vw,28px);
    background:rgba(14,17,24,.78);
    backdrop-filter:blur(18px);
    border:1px solid rgba(255,255,255,.08);
    border-radius:22px;
    box-shadow:0 15px 40px rgba(0,0,0,.30);
    z-index:1000;
}

.nav-actions{
    display:flex;
    align-items:center;
    gap:15px;
    justify-self:end;
    margin-left:0;
}

.nav-login{
    padding:11px 14px;
    border-radius:14px;
    color:rgba(255,255,255,.72);
    text-decoration:none;
    font-size:.9rem;
    font-weight:800;
    transition:.3s;
}

.nav-login:hover{
    background:rgba(255,255,255,.06);
    color:white;
}

.nav-register{
    padding:11px 16px;
    border-radius:14px;
    background:#d4af37;
    color:#111;
    text-decoration:none;
    font-weight:700;
    transition:.3s;
}

.nav-register:hover{
    transform:translateY(-2px);
    box-shadow:0 8px 25px rgba(212,175,55,.25);
}

.nav-avatar{
    align-items:center;
    background:rgba(255,255,255,.08);
    border:1px solid rgba(212,175,55,.30);
    border-radius:50%;
    display:flex;
    height:46px;
    justify-content:center;
    overflow:hidden;
    transition:.3s;
    width:46px;
}

.nav-avatar img{
    display:block;
    height:100%;
    object-fit:cover;
    width:100%;
}

.nav-avatar:hover{
    box-shadow:0 0 25px rgba(212,175,55,.25);
    transform:scale(1.06);
}

.nav-logo{
    font-weight:700;
    letter-spacing:2px;
}

.nav-links{
    display:flex;
    align-items:center;
    gap:8px;
    justify-content:flex-start;
    min-width:0;
    overflow-x:auto;
    scrollbar-width:none;
    white-space:nowrap;
}

.nav-links::-webkit-scrollbar{
    display:none;
}

.nav-links a{
    padding:11px 14px;
    border-radius:14px;
    color:rgba(255,255,255,.72);
    text-decoration:none;
    font-size:.9rem;
    font-weight:800;
    transition:.3s;
}

.nav-links a:hover{
    background:rgba(255,255,255,.06);
    color:#d4af37;
}

.subtitle{
    font-size:1.2rem;
    opacity:.7;
    margin-bottom:25px;
}

#concept{
    padding:64px 20px 50px;
    max-width:1200px;
    margin:auto;
}

.home-dashboard{
    max-width:1200px;
    margin:0 auto;
    padding:110px 20px 40px;
}

.home-stats-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
    gap:18px;
}

.home-stat-card{
    display:flex;
    min-height:330px;
    flex-direction:column;
    justify-content:space-between;
    gap:22px;
    padding:24px;
    border:1px solid color-mix(in srgb, var(--accent) 34%, rgba(255,255,255,.10));
    border-radius:18px;
    background:
        linear-gradient(135deg, color-mix(in srgb, var(--accent) 16%, transparent), transparent 42%),
        rgba(24,28,35,.86);
    color:white;
    text-decoration:none;
    transition:.28s;
}

.home-stat-card:hover{
    border-color:var(--accent);
    box-shadow:0 18px 42px color-mix(in srgb, var(--accent) 16%, transparent);
    transform:translateY(-5px);
}

.home-stat-top{
    display:flex;
    align-items:center;
    gap:16px;
    min-height:66px;
}

.home-stat-top img{
    width:58px;
    height:58px;
    object-fit:contain;
    filter:drop-shadow(0 0 16px color-mix(in srgb, var(--accent) 34%, transparent));
}

.home-stat-top span,
.home-next-status{
    color:var(--accent);
    font-size:.72rem;
    font-weight:900;
    letter-spacing:2px;
    text-transform:uppercase;
}

.home-stat-top h3{
    margin:5px 0 0;
    font-size:1.45rem;
    line-height:1.1;
}

.home-stat-metrics{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:10px;
}

.home-stat-metrics div{
    min-height:74px;
    padding:12px 10px;
    border:1px solid rgba(255,255,255,.08);
    border-radius:14px;
    background:rgba(0,0,0,.18);
}

.home-stat-metrics span{
    display:block;
    margin-bottom:8px;
    color:rgba(255,255,255,.52);
    font-size:.72rem;
    font-weight:800;
    text-transform:uppercase;
}

.home-stat-metrics strong{
    display:block;
    font-size:1.35rem;
    line-height:1;
}

.home-next-prono{
    min-height:120px;
    padding-top:20px;
    border-top:1px solid rgba(255,255,255,.10);
}

.home-next-status{
    display:inline-flex;
    align-items:center;
    gap:7px;
    margin-bottom:10px;
}

.home-next-status::before{
    content:"";
    width:8px;
    height:8px;
    border-radius:50%;
    background:currentColor;
    box-shadow:0 0 14px currentColor;
}

.home-next-status.is-done{
    color:#9ed24a;
}

.home-next-status.is-open{
    color:var(--accent);
}

.home-next-status.is-locked{
    color:rgba(255,255,255,.48);
}

.home-next-prono strong{
    display:block;
    margin-bottom:7px;
    font-size:1.05rem;
}

.home-next-prono p{
    min-height:44px;
    margin:0;
    color:rgba(255,255,255,.70);
    line-height:1.45;
}

.home-next-prono em{
    display:block;
    margin-top:12px;
    color:rgba(255,255,255,.45);
    font-size:.86rem;
    font-style:normal;
    font-weight:700;
}

.landing-modules,
.landing-universes{
    max-width:1200px;
    margin:0 auto;
    padding:62px 20px;
}

.landing-universes{
    padding-top:46px;
}

.landing-modules{
    padding-top:54px;
}

.landing-modules .section-heading,
.landing-universes .section-heading{
    margin-bottom:42px;
}

.module-preview-grid{
    display:grid;
    grid-template-columns:1fr;
    gap:18px;
}

.module-preview-card{
    display:grid;
    grid-template-columns:minmax(0,1.25fr) minmax(260px,.75fr);
    gap:20px;
    align-items:center;
    padding:18px;
    border:1px solid rgba(255,255,255,.10);
    border-radius:18px;
    background:
        linear-gradient(145deg, rgba(255,255,255,.06), transparent 42%),
        rgba(24,28,35,.88);
    transition:.3s;
}

.module-preview-card:hover{
    transform:translateY(-6px);
}

.module-preview-card img{
    grid-row:1 / span 2;
    width:100%;
    height:clamp(330px,44vw,560px);
    object-fit:contain;
    object-position:center;
    border:1px solid rgba(255,255,255,.10);
    border-radius:14px;
    background:rgba(5,8,12,.72);
    box-shadow:0 24px 50px rgba(0,0,0,.30);
}

.module-preview-card.cyclisme img{
    height:clamp(360px,44vw,520px);
}

.module-preview-card.rugby img{
    height:clamp(330px,38vw,500px);
}

.module-preview-card.formula img{
    height:clamp(420px,50vw,620px);
}

.module-preview-card.football img{
    height:clamp(300px,34vw,420px);
    padding:28px;
}

.module-preview-card > div{
    align-self:end;
}

.module-preview-card span{
    display:inline-flex;
    margin-bottom:16px;
    padding:8px 12px;
    border-radius:999px;
    background:rgba(255,255,255,.08);
    color:#d4af37;
    font-size:.76rem;
    font-weight:900;
    letter-spacing:2px;
}

.module-preview-card h3{
    margin-bottom:12px;
    font-size:clamp(1.7rem,3vw,2.4rem);
}

.module-preview-card p{
    margin:0;
    color:rgba(255,255,255,.68);
    line-height:1.55;
}

.module-preview-card ul{
    display:grid;
    grid-column:2;
    gap:10px;
    align-self:start;
    margin:0;
    padding:0;
    list-style:none;
}

.module-preview-card li{
    padding:11px 13px;
    border:1px solid rgba(255,255,255,.08);
    border-radius:12px;
    background:rgba(0,0,0,.16);
    color:rgba(255,255,255,.76);
    font-size:.92rem;
    font-weight:700;
}

.module-preview-card.cyclisme{
    border-color:rgba(212,175,55,.22);
}

.module-preview-card.rugby{
    border-color:rgba(158,210,74,.20);
}

.module-preview-card.football{
    border-color:rgba(32,196,107,.24);
}

.module-preview-card.formula{
    border-color:rgba(216,64,64,.22);
}

.landing-universe-strip{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(140px,1fr));
    gap:18px;
    margin:0 auto 24px;
}

.landing-universe-strip img{
    width:100%;
    height:150px;
    object-fit:contain;
    padding:24px;
    border:1px solid rgba(255,255,255,.09);
    border-radius:18px;
    background:rgba(24,28,35,.80);
}

.btn-gold.landing-dashboard-link{
    display:flex;
    width:max-content;
    margin:34px auto 0;
}

.dashboard-shell{
    width:min(1200px,100%);
    margin:0 auto;
    padding:150px 20px 40px;
}

.dashboard-hero{
    display:flex;
    align-items:center;
    gap:34px;
    min-height:0;
    margin-bottom:70px;
    padding:34px;
    border:1px solid rgba(255,255,255,.10);
    border-radius:24px;
    background:
        linear-gradient(135deg, rgba(212,175,55,.12), transparent 42%),
        rgba(14,17,24,.78);
}

.dashboard-logo{
    width:132px;
    height:132px;
    object-fit:contain;
    animation:float 5s ease-in-out infinite;
}

.dashboard-hero h1{
    margin:0 0 12px;
    font-size:clamp(2.5rem,6vw,5rem);
    line-height:1.08;
    letter-spacing:0;
}

.dashboard-greeting{
    display:flex;
    align-items:baseline;
    flex-wrap:wrap;
    gap:14px;
}

.dashboard-greeting-hello{
    color:rgba(255,255,255,.76);
    font-size:.68em;
    font-weight:800;
    letter-spacing:0;
}

.dashboard-greeting-name{
    color:var(--player-accent,#d4af37);
    font-family:"Inter", sans-serif;
    font-size:1em;
    font-weight:900;
    letter-spacing:0;
    line-height:1.12;
    padding-bottom:.06em;
}

.dashboard-hero p:not(.section-kicker){
    color:rgba(255,255,255,.68);
    line-height:1.6;
}

.dashboard-section.home-dashboard,
.dashboard-shell #univers{
    max-width:none;
    padding:0 0 80px;
}

.dashboard-empty{
    margin-bottom:80px;
    padding:34px;
    border:1px solid rgba(212,175,55,.20);
    border-radius:20px;
    background:rgba(24,28,35,.80);
}

.dashboard-empty h2{
    margin:8px 0 12px;
    font-size:clamp(2rem,5vw,3.4rem);
}

.dashboard-empty p{
    color:rgba(255,255,255,.68);
    line-height:1.6;
}

.steps{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
    gap:25px;
}

.step{
    background:#181c23;
    border-radius:20px;
    padding:30px;
    text-align:center;
}

.step span{
    display:inline-flex;
    width:50px;
    height:50px;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    background:#d4af37;
    color:black;
    font-weight:700;
    margin-bottom:20px;
}

footer{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    justify-content:center;
    gap:10px 18px;
    margin-top:70px;
    padding:26px 20px 22px;
    text-align:center;
    border-top:1px solid rgba(255,255,255,.08);
    background:rgba(10,13,19,.72);
    opacity:1;
}

.footer-logo{
    display:block;
    width:62px;
    height:62px;
    object-fit:contain;
    filter:drop-shadow(0 0 18px rgba(212,175,55,.18));
}

footer h3{
    margin:0;
    font-size:1rem;
    letter-spacing:1.5px;
}

footer p{
    margin:0;
    opacity:.6;
    font-size:.8rem;
}

.footer-copy{
    margin:0;
    opacity:.45;
    font-size:.75rem;
}

.footer-copy a{
    color:inherit;
    font-weight:800;
    text-decoration:none;
}

.footer-copy a:hover{
    color:#d4af37;
}

.hero-tagline{
    font-size:1.4rem;
    font-weight:700;
    letter-spacing:.5px;
    color:#d4af37;
    margin:20px 0;
}

.hero-description{
    font-size:1rem;
    color:rgba(255,255,255,.55);
    max-width:550px;
    margin:0 auto 40px;
}

.hero-title{
    font-size:clamp(5rem,12vw,9rem);
    font-weight:900;
    letter-spacing:-4px;
    line-height:.9;
    
}

.hero-title span{
    display:block;
    font-size:.75em;
    color:#d4af37;
}

.vision{
    padding:30px 20px 60px;
    text-align:center;
}

.vision-text{
    font-size:clamp(2rem,4vw,3rem);
    font-weight:800;
    text-align:center;
    max-width:1200px;
    margin:auto;
    line-height:1.2;
    letter-spacing:-1px;

    background:linear-gradient(
        90deg,
        #ffffff,
        #d4af37,
        #ffffff
    );

    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
}

.vision-line{
    width:120px;
    height:3px;
    background:#d4af37;
    margin:30px auto 0;
    border-radius:999px;
}

.launch-badge{

display:inline-flex;
align-items:center;
gap:10px;
padding:10px 18px;
border-radius:999px;
background:rgba(212,175,55,.12);
border:1px solid rgba(212,175,55,.35);
color:#d4af37;
font-weight:600;
margin-bottom:35px;
backdrop-filter:blur(15px);
}

.btn-gold{
display:inline-flex;
align-items:center;
justify-content:center;
padding:18px 34px;
background:#d4af37;
color:#111;
border-radius:14px;
font-weight:700;
text-decoration:none;
transition:.35s;
box-shadow:0 10px 35px rgba(212,175,55,.25);
}

.hero-actions{
display:flex;
align-items:center;
justify-content:center;
gap:16px;
flex-wrap:wrap;
margin-top:8px;
}

.btn-outline-home{
display:inline-flex;
align-items:center;
justify-content:center;
padding:17px 30px;
border:1px solid rgba(255,255,255,.18);
border-radius:14px;
background:rgba(255,255,255,.04);
color:white;
font-weight:800;
text-decoration:none;
transition:.35s;
}

.btn-outline-home:hover,
.btn-gold:hover{
transform:translateY(-3px);
}

.why{

padding:120px 20px;

max-width:1200px;

margin:auto;

}

.why h2{

text-align:center;

font-size:2.8rem;

margin-bottom:70px;

}

.why-grid{

display:grid;

grid-template-columns:repeat(auto-fit,minmax(250px,1fr));

gap:30px;

}

.why-card{

background:#181c23;

border:1px solid rgba(255,255,255,.08);

border-radius:22px;

padding:40px 30px;

text-align:center;

transition:.35s;

}

.why-card:hover{

transform:translateY(-8px);

border-color:#d4af37;

box-shadow:0 15px 40px rgba(212,175,55,.12);

}

.why-icon{

font-size:3rem;

margin-bottom:20px;

}

.why-card h3{

margin-bottom:15px;

font-size:1.4rem;

}

.why-card p{

opacity:.75;

line-height:1.6;

}

.status{

position:absolute;

top:20px;

right:20px;

padding:6px 12px;

border-radius:30px;

font-size:.75rem;

font-weight:700;

}

.open{

background:rgba(212,175,55,.18);

color:#d4af37;

}

.card{

position:relative;

overflow:hidden;

}

.card-btn{

display:inline-block;

margin-top:25px;

padding:12px 24px;

border-radius:10px;

background:#d4af37;

color:#111;

text-decoration:none;

font-weight:700;

opacity:0;

transform:translateY(15px);

transition:.35s;
pointer-events:none;

}

.card:hover .card-btn{

opacity:1;

transform:translateY(0);

}
.card-desc{

    margin-top:15px;

    font-size:.95rem;

    color:rgba(255,255,255,.65);

    line-height:1.6;

}

.home-hero{
    min-height:78vh;
    padding:132px 20px 46px;
}

.section-heading{
    max-width:760px;
    margin:0 auto 60px;
    text-align:center;
}

.section-heading h2{
    margin-bottom:18px;
    font-size:clamp(2.2rem,5vw,3.5rem);
    font-weight:900;
    letter-spacing:-1px;
}

.section-heading p{
    color:rgba(255,255,255,.68);
    line-height:1.8;
}

.section-kicker{
    margin-bottom:14px;
    color:#d4af37 !important;
    font-size:.85rem;
    font-weight:800;
    letter-spacing:3px;
    text-transform:uppercase;
}

.universe-card{
    align-items:center;
    display:flex;
    flex-direction:column;
    gap:12px;
    justify-content:flex-start;
    min-height:330px;
    padding-top:64px;
    color:inherit;
    cursor:pointer;
    text-decoration:none;
}

.universe-card:not(.open-card){
    cursor:default;
}

.universe-card .emoji{
    font-size:2.5rem;
    font-weight:900;
    letter-spacing:2px;
    color:#d4af37;
}

.universe-card p{
    align-items:flex-start;
    display:flex;
    justify-content:center;
    line-height:1.5;
    margin:0;
    min-height:88px;
}

.universe-card-logo{
    align-self:center;
    display:block;
    filter:drop-shadow(0 0 18px rgba(212,175,55,.24));
    height:82px;
    margin-bottom:0;
    object-fit:contain;
    width:82px;
}

.universe-card h3{
    align-items:center;
    display:flex;
    font-size:clamp(1.55rem,2vw,2rem);
    justify-content:center;
    line-height:1.12;
    margin:0;
    min-height:54px;
}

.universe-card .card-btn{
    margin-top:auto;
}

.dashboard-shell #univers .cards{
    grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
    gap:20px;
}

.dashboard-shell #univers .universe-card{
    align-items:center;
    aspect-ratio:1 / 1;
    display:flex;
    flex-direction:column;
    justify-content:center;
    min-height:0;
    padding:32px 24px 24px;
    text-align:center;
}

.dashboard-shell #univers .universe-card-logo{
    height:78px;
    margin:0;
    width:78px;
}

.dashboard-shell #univers .universe-card.meca .universe-card-logo,
.dashboard-shell #univers .universe-card.rugby .universe-card-logo,
.dashboard-shell #univers .universe-card.football .universe-card-logo,
.dashboard-shell #univers .universe-card.tennis .universe-card-logo,
.dashboard-shell #univers .universe-card.biathlon .universe-card-logo,
.dashboard-shell #univers .universe-card.saveurs .universe-card-logo{
    height:78px;
    width:78px;
}

.dashboard-shell #univers .universe-card h3{
    justify-content:center;
    min-height:0;
    text-align:center;
}

.dashboard-shell #univers .universe-card p{
    -webkit-box-orient:vertical;
    -webkit-line-clamp:2;
    display:-webkit-box;
    justify-content:center;
    line-height:1.5;
    min-height:0;
    overflow:hidden;
    text-align:center;
}

.dashboard-shell #univers .universe-card .card-btn{
    bottom:18px;
    left:24px;
    margin-top:0;
    position:absolute;
    right:24px;
    white-space:nowrap;
}

.universe-card.formula .universe-card-logo,
.universe-card.meca .universe-card-logo{
    filter:drop-shadow(0 0 18px rgba(216,64,64,.30));
}

.universe-card.meca .universe-card-logo{
    height:76px;
    width:76px;
}

.universe-card.rugby .universe-card-logo{
    filter:drop-shadow(0 0 18px rgba(158,210,74,.28));
}

.universe-card.football .universe-card-logo{
    filter:drop-shadow(0 0 18px rgba(32,196,107,.32));
}

.universe-card.tennis .universe-card-logo{
    filter:drop-shadow(0 0 18px rgba(5,72,47,.42));
}

.universe-card.biathlon .universe-card-logo{
    filter:drop-shadow(0 0 18px rgba(142,216,255,.34));
}

.universe-card.saveurs .universe-card-logo{
    filter:drop-shadow(0 0 18px rgba(204,66,72,.30));
}

.card-btn-soon{
    background:#8f2945;
    color:white;
}

.open-card{
    border-color:rgba(212,175,55,.25);
    box-shadow:0 18px 45px rgba(212,175,55,.08);
}

.soon{
    background:rgba(255,255,255,.08);
    color:rgba(255,255,255,.7);
}

.home-message{
    display:inline-flex;
    margin:0 auto 18px;
    padding:13px 16px;
    border:1px solid rgba(63,185,80,.30);
    border-radius:14px;
    background:rgba(63,185,80,.12);
    color:#d8ffd8;
    font-weight:800;
}

.footer-legal{
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:8px 12px;
    margin:0;
}

.footer-legal a{
    color:rgba(255,255,255,.58);
    font-size:.75rem;
    font-weight:700;
}

.footer-legal a:hover{
    color:#d4af37;
}

.profile-page{
    min-height:100vh;
    padding:150px 20px 70px;
}

.profile-panel{
    width:min(920px,100%);
    margin:0 auto;
    padding:42px;
    border:1px solid rgba(255,255,255,.10);
    border-radius:22px;
    background:rgba(14,17,24,.78);
    box-shadow:0 18px 45px rgba(0,0,0,.32);
    backdrop-filter:blur(18px);
}

.profile-heading{
    text-align:center;
}

.profile-heading h1{
    margin:8px 0 12px;
    font-size:clamp(2.6rem,7vw,5.2rem);
    line-height:.9;
    text-transform:uppercase;
}

.profile-heading p{
    max-width:560px;
    margin:0 auto;
    color:rgba(255,255,255,.68);
    line-height:1.7;
}

.profile-current{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:18px;
    margin:32px 0;
    padding:18px;
    border:1px solid rgba(255,255,255,.10);
    border-radius:18px;
    background:rgba(255,255,255,.045);
}

.profile-tabs{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:10px;
    margin:0 0 26px;
    padding:8px;
    border:1px solid rgba(255,255,255,.10);
    border-radius:18px;
    background:rgba(0,0,0,.18);
}

.profile-tabs a{
    min-height:46px;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:10px 12px;
    border:1px solid transparent;
    border-radius:13px;
    color:rgba(255,255,255,.68);
    font-weight:900;
    text-decoration:none;
    transition:.25s;
}

.profile-tabs a.active,
.profile-tabs a:hover{
    border-color:color-mix(in srgb, var(--player-accent,#d4af37) 52%, rgba(255,255,255,.18));
    background:color-mix(in srgb, var(--player-accent,#d4af37) 14%, rgba(255,255,255,.04));
    color:#fff;
}

.profile-current strong,
.profile-current span{
    display:block;
}

.profile-current strong{
    font-size:1.4rem;
    font-weight:900;
}

.profile-current-pseudo{
    color:var(--player-accent,#d4af37);
}

.profile-current span{
    margin-top:4px;
    color:rgba(255,255,255,.62);
    font-weight:800;
}

.profile-avatar-large{
    display:block;
    width:94px;
    height:94px;
    border:2px solid color-mix(in srgb, var(--player-accent,#d4af37) 58%, rgba(255,255,255,.18));
    border-radius:50%;
    overflow:hidden;
    background:rgba(255,255,255,.08);
    box-shadow:0 0 24px color-mix(in srgb, var(--player-accent,#d4af37) 22%, transparent);
}

.profile-avatar-large img,
.avatar-preview img{
    display:block;
    width:100%;
    height:100%;
    object-fit:cover;
}

.profile-message{
    margin:0 0 22px;
    padding:14px 16px;
    border:1px solid rgba(212,175,55,.32);
    border-radius:14px;
    background:rgba(212,175,55,.10);
    color:#f0d991;
    font-weight:800;
    text-align:center;
}

.profile-message.warning{
    border-color:rgba(255,176,0,.30);
    background:rgba(255,176,0,.10);
}

.avatar-form{
    margin-top:24px;
}

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

.avatar-choice{
    position:relative;
    padding:16px;
    border:1px solid rgba(255,255,255,.10);
    border-radius:16px;
    background:rgba(255,255,255,.035);
    cursor:pointer;
    text-align:center;
    transition:.3s;
}

.avatar-choice input{
    position:absolute;
    opacity:0;
    pointer-events:none;
}

.avatar-preview{
    display:block;
    width:74px;
    height:74px;
    margin:0 auto 10px;
    border:1px solid rgba(255,255,255,.16);
    border-radius:50%;
    overflow:hidden;
}

.avatar-choice strong{
    display:block;
    color:rgba(255,255,255,.68);
    font-size:.9rem;
}

.avatar-choice.selected,
.avatar-choice:hover{
    border-color:color-mix(in srgb, var(--player-accent,#d4af37) 55%, rgba(255,255,255,.18));
    background:color-mix(in srgb, var(--player-accent,#d4af37) 12%, rgba(255,255,255,.035));
}

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

.color-choice{
    position:relative;
    display:flex;
    align-items:center;
    gap:12px;
    min-height:58px;
    padding:12px 14px;
    border:1px solid rgba(255,255,255,.10);
    border-radius:16px;
    background:rgba(255,255,255,.035);
    cursor:pointer;
    transition:.25s;
}

.color-choice input{
    position:absolute;
    opacity:0;
    pointer-events:none;
}

.color-choice span{
    width:28px;
    height:28px;
    flex:0 0 28px;
    border:2px solid rgba(255,255,255,.55);
    border-radius:50%;
    background:var(--choice-color);
    box-shadow:0 0 18px color-mix(in srgb, var(--choice-color) 42%, transparent);
}

.color-choice strong{
    color:rgba(255,255,255,.72);
    font-size:.9rem;
    line-height:1.2;
}

.color-choice.selected,
.color-choice:hover{
    border-color:color-mix(in srgb, var(--choice-color) 64%, rgba(255,255,255,.18));
    background:color-mix(in srgb, var(--choice-color) 16%, rgba(255,255,255,.035));
}

.profile-save{
    width:100%;
    margin-top:22px;
    border:0;
    cursor:pointer;
}

.profile-form{
    display:flex;
    flex-direction:column;
    gap:26px;
}

.profile-section{
    padding:22px;
    border:1px solid rgba(255,255,255,.10);
    border-radius:18px;
    background:rgba(255,255,255,.035);
}

.profile-stats-section{
    margin-top:0;
}

.profile-stats-filter{
    margin-bottom:18px;
}

.profile-stats-filter label{
    display:flex;
    flex-direction:column;
    gap:8px;
}

.profile-stats-filter span{
    color:rgba(255,255,255,.68);
    font-size:.86rem;
    font-weight:800;
}

.profile-stats-filter select{
    width:100%;
    min-height:52px;
    padding:12px 14px;
    border:1px solid rgba(255,255,255,.12);
    border-radius:14px;
    background:#151a22;
    color:#fff;
    font:inherit;
    font-weight:900;
    outline:none;
}

.profile-stats-filter select:focus{
    border-color:color-mix(in srgb, var(--stats-accent,#d4af37) 58%, rgba(255,255,255,.18));
    box-shadow:0 0 0 4px color-mix(in srgb, var(--stats-accent,#d4af37) 14%, transparent);
}

.profile-stats-card{
    display:grid;
    grid-template-columns:minmax(220px,.9fr) minmax(0,1.25fr);
    gap:18px;
    align-items:stretch;
}

.profile-points-box{
    min-height:250px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    padding:28px;
    border:1px solid color-mix(in srgb, var(--stats-accent,#d4af37) 54%, rgba(255,255,255,.12));
    border-radius:18px;
    background:
        linear-gradient(145deg, color-mix(in srgb, var(--stats-accent,#d4af37) 18%, transparent), transparent 58%),
        rgba(0,0,0,.22);
    box-shadow:0 18px 40px color-mix(in srgb, var(--stats-accent,#d4af37) 12%, transparent);
    text-align:center;
}

.profile-points-box span{
    color:var(--stats-accent,#d4af37);
    font-size:.78rem;
    font-weight:900;
    letter-spacing:2px;
    text-transform:uppercase;
}

.profile-points-box strong{
    margin:10px 0 4px;
    color:#fff;
    font-size:clamp(4rem,12vw,7rem);
    line-height:.88;
    letter-spacing:0;
}

.profile-points-box em{
    color:rgba(255,255,255,.58);
    font-size:1rem;
    font-style:normal;
    font-weight:900;
    text-transform:uppercase;
}

.profile-stat-counters{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:12px;
}

.profile-stat-counters div{
    min-height:118px;
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    padding:18px;
    border:1px solid rgba(255,255,255,.10);
    border-radius:16px;
    background:rgba(255,255,255,.045);
}

.profile-stat-counters span{
    color:rgba(255,255,255,.58);
    font-size:.78rem;
    font-weight:900;
    letter-spacing:1px;
    text-transform:uppercase;
}

.profile-stat-counters strong{
    color:#fff;
    font-size:2.2rem;
    line-height:1;
}

.profile-placeholder{
    min-height:220px;
    display:flex;
    align-items:center;
}

.profile-success-section{
    display:flex;
    flex-direction:column;
    gap:24px;
}

.success-hero{
    display:grid;
    grid-template-columns:minmax(180px,.45fr) minmax(0,1fr);
    gap:18px;
    align-items:center;
    padding:18px;
    border:1px solid color-mix(in srgb, var(--player-accent,#d4af37) 38%, rgba(255,255,255,.10));
    border-radius:18px;
    background:
        linear-gradient(135deg, color-mix(in srgb, var(--player-accent,#d4af37) 14%, transparent), transparent 52%),
        rgba(0,0,0,.20);
}

.success-hero div{
    display:flex;
    min-height:150px;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    border:1px solid rgba(255,255,255,.10);
    border-radius:16px;
    background:rgba(255,255,255,.045);
    text-align:center;
}

.success-hero span,
.success-category-head span,
.success-content span{
    color:var(--player-accent,#d4af37);
    font-size:.72rem;
    font-weight:900;
    letter-spacing:2px;
    text-transform:uppercase;
}

.success-hero strong{
    margin:8px 0 2px;
    color:#fff;
    font-size:4.5rem;
    line-height:.9;
}

.success-hero em{
    color:rgba(255,255,255,.58);
    font-style:normal;
    font-weight:900;
    text-transform:uppercase;
}

.success-hero p{
    margin:0;
    color:rgba(255,255,255,.70);
    font-weight:700;
    line-height:1.65;
}

.success-category{
    display:flex;
    flex-direction:column;
    gap:12px;
}

.success-category-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
}

.success-category-head h3{
    margin:0;
    font-size:1.1rem;
}

.success-category-head span{
    color:rgba(255,255,255,.50);
}

.success-grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:12px;
}

.success-card{
    display:grid;
    grid-template-columns:58px minmax(0,1fr);
    gap:14px;
    min-height:170px;
    padding:16px;
    border:1px solid rgba(255,255,255,.10);
    border-radius:16px;
    background:rgba(255,255,255,.04);
    transition:.25s;
}

.success-card.unlocked{
    border-color:color-mix(in srgb, var(--success-accent) 55%, rgba(255,255,255,.14));
    background:
        linear-gradient(145deg, color-mix(in srgb, var(--success-accent) 13%, transparent), transparent 58%),
        rgba(255,255,255,.045);
    box-shadow:0 18px 34px color-mix(in srgb, var(--success-accent) 10%, transparent);
}

.success-card.locked{
    opacity:.58;
}

.success-code{
    display:flex;
    width:58px;
    height:58px;
    align-items:center;
    justify-content:center;
    border:1px solid color-mix(in srgb, var(--success-accent) 45%, rgba(255,255,255,.14));
    border-radius:15px;
    background:
        radial-gradient(circle at 35% 25%, rgba(255,255,255,.18), transparent 34%),
        color-mix(in srgb, var(--success-accent) 16%, rgba(0,0,0,.28));
    color:var(--success-accent);
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.04);
}

.success-code svg{
    width:34px;
    height:34px;
    overflow:visible;
}

.success-code svg path,
.success-code svg circle,
.success-code svg rect,
.success-code svg ellipse{
    fill:none;
    stroke:currentColor;
    stroke-width:1.85;
    stroke-linecap:round;
    stroke-linejoin:round;
}

.success-code svg path:first-child:not(:only-child){
    fill:color-mix(in srgb, currentColor 14%, transparent);
}

.success-content{
    min-width:0;
}

.success-content span{
    color:var(--success-accent);
}

.success-content h4{
    margin:6px 0 7px;
    color:#fff;
    font-size:1.05rem;
    line-height:1.18;
}

.success-content p{
    margin:0;
    color:rgba(255,255,255,.64);
    font-size:.9rem;
    font-weight:700;
    line-height:1.45;
}

.success-progress{
    grid-column:1 / -1;
    display:flex;
    align-items:center;
    gap:10px;
}

.success-progress div{
    flex:1;
    height:9px;
    overflow:hidden;
    border-radius:999px;
    background:rgba(255,255,255,.08);
}

.success-progress div span{
    display:block;
    height:100%;
    border-radius:inherit;
    background:var(--success-accent);
    box-shadow:0 0 18px color-mix(in srgb, var(--success-accent) 45%, transparent);
}

.success-progress strong{
    color:rgba(255,255,255,.66);
    font-size:.82rem;
    font-weight:900;
    white-space:nowrap;
}

.profile-section-head{
    margin-bottom:18px;
}

.profile-section-head h2,
.profile-danger h2{
    margin:0 0 8px;
    font-size:1.25rem;
}

.profile-section-head p,
.profile-danger p{
    margin:0;
    color:rgba(255,255,255,.62);
    line-height:1.65;
}

.profile-fields{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:14px;
}

.profile-fields.one-column{
    grid-template-columns:1fr;
    margin-top:16px;
}

.profile-fields label{
    display:flex;
    flex-direction:column;
    gap:8px;
    text-align:left;
}

.profile-fields span{
    color:rgba(255,255,255,.68);
    font-size:.86rem;
    font-weight:800;
}

.profile-fields input{
    width:100%;
    min-height:48px;
    padding:12px 14px;
    border:1px solid rgba(255,255,255,.10);
    border-radius:14px;
    background:rgba(255,255,255,.065);
    color:#fff;
    outline:none;
}

.profile-fields input:focus{
    border-color:rgba(212,175,55,.46);
    box-shadow:0 0 0 4px rgba(212,175,55,.10);
}

.legal-checks{
    display:flex;
    flex-direction:column;
    gap:12px;
}

.legal-checks label{
    display:flex;
    align-items:flex-start;
    gap:10px;
    color:rgba(255,255,255,.72);
    line-height:1.55;
}

.legal-checks input{
    margin-top:4px;
}

.legal-checks p{
    margin:0;
    padding:12px 14px;
    border:1px solid rgba(212,175,55,.22);
    border-radius:14px;
    background:rgba(212,175,55,.08);
    color:rgba(255,255,255,.74);
}

.legal-checks a{
    color:#f0d991;
    font-weight:900;
}

.profile-upload{
    display:flex;
    flex-direction:column;
    gap:9px;
    margin-bottom:18px;
    padding:16px;
    border:1px dashed rgba(212,175,55,.32);
    border-radius:16px;
    background:rgba(212,175,55,.06);
    text-align:left;
}

.profile-upload span{
    color:#f0d991;
    font-weight:900;
}

.profile-upload input{
    color:rgba(255,255,255,.76);
}

.profile-upload small{
    color:rgba(255,255,255,.56);
    line-height:1.45;
}

.profile-danger{
    margin-top:28px;
    padding:22px;
    border:1px solid rgba(225,6,0,.30);
    border-radius:18px;
    background:rgba(225,6,0,.08);
}

.profile-danger button{
    width:100%;
    min-height:48px;
    margin-top:16px;
    border:0;
    border-radius:14px;
    background:#e10600;
    color:#fff;
    cursor:pointer;
    font-weight:900;
}

.legal-page{
    min-height:100vh;
    padding:150px 20px 70px;
}

.legal-panel{
    width:min(820px,100%);
    margin:0 auto;
    padding:42px;
    border:1px solid rgba(255,255,255,.10);
    border-radius:22px;
    background:rgba(14,17,24,.78);
    box-shadow:0 18px 45px rgba(0,0,0,.32);
}

.legal-panel h1{
    margin:8px 0 14px;
    font-size:clamp(2.3rem,6vw,4.6rem);
    line-height:.95;
    text-transform:uppercase;
}

.legal-panel p,
.legal-panel li{
    color:rgba(255,255,255,.70);
    line-height:1.7;
}

.legal-panel ul{
    margin:28px 0 0;
    padding-left:22px;
}

.legal-meta{
    margin-top:10px;
    color:rgba(255,255,255,.45) !important;
    font-size:.86rem;
    font-weight:800;
}

.legal-section{
    margin-top:30px;
    padding-top:26px;
    border-top:1px solid rgba(255,255,255,.08);
}

.legal-section h2{
    margin:0 0 12px;
    font-size:1.25rem;
}

.legal-section p + p{
    margin-top:12px;
}

.legal-section ul{
    margin-top:14px;
}

.legal-actions{
    margin-top:28px;
}

.legal-note{
    margin-top:32px;
    padding:14px 16px;
    border:1px solid rgba(212,175,55,.18);
    border-radius:14px;
    background:rgba(212,175,55,.07);
    color:rgba(255,255,255,.66) !important;
    font-size:.88rem;
}

.profile-cookie-preferences{
    display:grid;
    gap:9px;
    padding:16px;
    border:1px solid rgba(255,255,255,.10);
    border-radius:14px;
    background:rgba(255,255,255,.04);
}

.profile-cookie-preferences strong,
.profile-cookie-preferences span{
    display:block;
}

.profile-cookie-preferences span{
    color:rgba(255,255,255,.64);
    line-height:1.5;
}

.profile-cookie-preferences .legal-action-button{
    justify-self:start;
}

@media(max-width:900px){

    :root{
        --nav-clearance:142px;
    }

    .module-preview-card{
        grid-template-columns:1fr;
    }

    .module-preview-card img,
    .module-preview-card ul{
        grid-column:auto;
        grid-row:auto;
    }

    .navbar{
        padding:16px 18px;
        gap:16px;
    }

    .brand{
        margin-right:0;
        min-width:0;
    }

    .brand span{
        font-size:1rem;
        letter-spacing:2px;
    }

    .nav-logo-img{
        height:46px;
        width:46px;
    }

    .nav-links{
        display:none;
    }

    .nav-actions{
        gap:10px;
    }

    .nav-actions.is-guest .nav-login,
    .nav-actions.is-guest .nav-register{
        display:inline-flex;
        align-items:center;
        justify-content:center;
        min-height:38px;
        padding:9px 11px;
        font-size:.82rem;
        white-space:nowrap;
    }

    .nav-actions.is-logged-in .nav-login{
        display:none;
    }

    .nav-register{
        padding:10px 12px;
    }

    .nav-avatar{
        height:42px;
        width:42px;
    }

    .logo{
        width:180px;
    }

    .hero-title{
        letter-spacing:-1px;
    }

    .dashboard-hero{
        align-items:center;
        flex-direction:column;
        text-align:center;
    }

    .landing-universe-strip{
        grid-template-columns:repeat(2,minmax(120px,1fr));
    }

}

@media(max-width:620px){
    :root{
        --nav-clearance:148px;
    }

    .home-hero,
    .profile-page{
        padding-top:var(--nav-clearance);
    }

    .legal-page{
        padding-top:var(--nav-clearance);
    }

    .profile-panel{
        padding:26px 18px;
    }

    .profile-current{
        align-items:center;
        flex-direction:column;
        text-align:center;
    }

    .profile-tabs{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }

    .profile-fields{
        grid-template-columns:1fr;
    }

    .profile-stats-card{
        grid-template-columns:1fr;
    }

    .profile-points-box{
        min-height:210px;
    }

    .profile-stat-counters{
        grid-template-columns:1fr;
    }

    .success-hero{
        grid-template-columns:1fr;
    }

    .success-grid{
        grid-template-columns:1fr;
    }

    .success-card{
        grid-template-columns:52px minmax(0,1fr);
    }

    .success-code{
        width:52px;
        height:52px;
        font-size:.7rem;
    }

    .profile-section,
    .profile-danger,
    .legal-panel{
        padding:20px 16px;
    }

    .hero-actions,
    .dashboard-hero{
        width:100%;
    }

    .navbar{
        width:calc(100% - 20px);
        padding:0 12px;
    }

    .nav-actions.is-guest{
        gap:7px;
    }

    .nav-actions.is-guest .nav-login,
    .nav-actions.is-guest .nav-register{
        min-height:36px;
        padding:8px 9px;
        font-size:.78rem;
    }

    .brand span{
        display:none;
    }

    .btn-gold,
    .btn-outline-home{
        width:100%;
    }

    .landing-universe-strip{
        grid-template-columns:1fr;
    }

    .dashboard-logo{
        width:104px;
        height:104px;
    }

    .dashboard-shell{
        padding-top:var(--nav-clearance);
    }

    .dashboard-shell #univers .cards{
        grid-template-columns:repeat(auto-fit,minmax(170px,1fr));
    }

    .dashboard-shell #univers .universe-card{
        aspect-ratio:1 / 1;
        min-height:0;
        padding:28px 18px 20px;
    }

    .dashboard-shell #univers .universe-card-logo{
        height:68px;
        width:68px;
    }

    .dashboard-shell #univers .universe-card.meca .universe-card-logo,
    .dashboard-shell #univers .universe-card.rugby .universe-card-logo,
    .dashboard-shell #univers .universe-card.football .universe-card-logo,
    .dashboard-shell #univers .universe-card.tennis .universe-card-logo,
    .dashboard-shell #univers .universe-card.biathlon .universe-card-logo,
    .dashboard-shell #univers .universe-card.saveurs .universe-card-logo{
        height:68px;
        width:68px;
    }

    .dashboard-shell #univers .universe-card .card-btn{
        text-align:center;
        width:100%;
    }
}

body.profile-embed {
    background: #0b0e14;
    min-height: 0;
    overflow-x: hidden;
}

body.profile-embed::before,
body.profile-embed::after {
    display: none;
}

body.profile-embed .profile-page {
    min-height: 0;
    padding: 20px;
}

body.profile-embed .profile-panel {
    backdrop-filter: none;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    margin: 0 auto;
    padding: 8px;
    width: min(900px, 100%);
}

body.profile-embed .profile-heading h1 {
    font-size: clamp(2rem, 7vw, 3.4rem);
}

body.profile-embed .profile-heading p {
    line-height: 1.5;
}

body.profile-embed .profile-current {
    margin: 22px 0;
}

body.profile-embed .profile-section,
body.profile-embed .profile-danger,
body.profile-embed .profile-tabs,
body.profile-embed .profile-current {
    border-radius: 8px;
}

@media(max-width:620px) {
    body.profile-embed .profile-page {
        padding: 14px 10px 24px;
    }

    body.profile-embed .profile-panel {
        padding: 0;
    }

    body.profile-embed .profile-heading p {
        font-size: .9rem;
    }

    body.profile-embed .profile-current {
        flex-direction: row;
        margin: 16px 0;
        padding: 14px;
        text-align: left;
    }

    body.profile-embed .profile-tabs {
        gap: 6px;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        padding: 6px;
    }

    body.profile-embed .profile-tabs a {
        font-size: .78rem;
        min-height: 42px;
        padding: 8px 5px;
    }
}