/* =========================================================
   RESET
========================================================= */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

/* =========================================================
   ROOT
========================================================= */

:root{

    --gold:#d99b2e;
    --gold2:#ffd278;

}

/* =========================================================
   BODY
========================================================= */

body{

    min-height:100vh;

    color:#fff;

    font-family:'Inter',sans-serif;

    overflow-x:hidden;

    background:#05070d;

}

/* =========================================================
   SELECT PREMIUM
========================================================= */

.team-select{

    width:100%;
    height:52px;

    padding:0 52px 0 18px;

    border-radius:18px;

    outline:none;

    appearance:none;
    -webkit-appearance:none;

    cursor:pointer;

    color:#fff;

    font-size:14px;
    font-weight:700;

    letter-spacing:.2px;

    border:
    1px solid rgba(217,155,46,.16);

    background:

    linear-gradient(
        180deg,
        rgba(20,26,38,.96) 0%,
        rgba(10,14,22,.98) 100%
    );

    box-shadow:

    inset
    0 1px 0
    rgba(255,255,255,.04),

    0 10px 30px
    rgba(0,0,0,.28),

    0 0 0
    rgba(217,155,46,0);

    transition:
    border .18s ease,
    transform .18s ease,
    box-shadow .18s ease,
    background .18s ease;

    backdrop-filter:blur(12px);

    /* FLECHE */

    background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23d99b2e' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");

    background-repeat:no-repeat;

    background-position:
    right 18px center;

    background-size:17px;

}
/* =========================================================
   INPUT POIDS
========================================================= */

.team-input-poids{

    width:100%;
    height:40px;

    padding:0 52px 0 18px;

    border-radius:18px;

    outline:none;

    appearance:none;
    -webkit-appearance:none;

    cursor:pointer;

    color:#fff;

    font-size:14px;
    font-weight:700;

    letter-spacing:.2px;

    border:
    1px solid rgba(217,155,46,.16);

    background:

    linear-gradient(
        180deg,
        rgba(20,26,38,.96) 0%,
        rgba(10,14,22,.98) 100%
    );

    box-shadow:

    inset
    0 1px 0
    rgba(255,255,255,.04),

    0 10px 30px
    rgba(0,0,0,.28),

    0 0 0
    rgba(217,155,46,0);

    transition:
    border .18s ease,
    transform .18s ease,
    box-shadow .18s ease,
    background .18s ease;

    backdrop-filter:blur(12px);
}
.team-input-poids:focus{

    border:
    1px solid rgba(16,185,129,.7);

    box-shadow:

    0 0 0 3px
    rgba(16,185,129,.14),

    0 10px 26px
    rgba(16,185,129,.16);

}

/* =========================================================
   BUTTON SAVE
========================================================= */

.team-save-premium{

    width:100%;

    max-width:220px;

    height:44px;

    margin:14px auto 0 auto;

    display:block;

    border:none;

    border-radius:14px;

    font-size:14px;

    font-weight:800;

    letter-spacing:.3px;

    color:#fff;

    cursor:pointer;

    background:

    linear-gradient(
        180deg,
        #31d399,
        #10b981
    );

    box-shadow:

    0 8px 20px
    rgba(16,185,129,.24),

    inset
    0 1px 0
    rgba(255,255,255,.18);

    transition:
    all .2s ease;

}

/* =========================================================
   ACTIONS
========================================================= */

.form-actions{

    display:flex;

    justify-content:center;

}
/* =========================================================
   HOVER
========================================================= */

.team-select:hover{

    border:
    1px solid rgba(217,155,46,.45);

    transform:
    translateY(-1px);

    box-shadow:

    inset
    0 1px 0
    rgba(255,255,255,.05),

    0 14px 32px
    rgba(0,0,0,.34),

    0 0 18px
    rgba(217,155,46,.08);

}

/* =========================================================
   FOCUS
========================================================= */

.team-select:focus{

    border:
    1px solid rgba(217,155,46,.95);

    box-shadow:

    0 0 0 4px
    rgba(217,155,46,.10),

    0 18px 40px
    rgba(0,0,0,.36),

    0 0 24px
    rgba(217,155,46,.12);

}

/* =========================================================
   OPTIONS
========================================================= */

.team-select option{

    background:#0d1119;

    color:#fff;

    font-weight:600;

}

/* =========================================================
   CUSTOM SELECT
========================================================= */

.custom-select{

    position:relative;

    width:100%;

}

/* =========================================================
   BUTTON
========================================================= */

.custom-select-btn{

    width:100%;

    height:48px;

    border:none;

    outline:none;

    cursor:pointer;

    border-radius:16px;

    padding:0 16px;

    text-align:left;

    color:#fff;

    font-size:14px;

    font-weight:600;

    background:
    linear-gradient(
        180deg,
        rgba(10,14,22,.96),
        rgba(15,20,30,.92)
    );

    border:
    1px solid rgba(217,155,46,.55);

    box-shadow:
    0 0 18px rgba(217,155,46,.06);

}

/* =========================================================
   MENU
========================================================= */

.custom-select-menu{

    position:absolute;

    top:56px;

    left:0;
    right:0;

    display:none;

    flex-direction:column;

    gap:6px;

    padding:8px;

    border-radius:18px;

    background:
    linear-gradient(
        180deg,
        rgba(8,10,16,.98),
        rgba(15,20,30,.96)
    );

    border:
    1px solid rgba(255,255,255,.06);

    backdrop-filter:blur(18px);

    box-shadow:
    0 18px 50px rgba(0,0,0,.45);

    z-index:999;

}

/* =========================================================
   OPEN
========================================================= */

.custom-select.open
.custom-select-menu{

    display:flex;

}

/* =========================================================
   ITEM
========================================================= */

.custom-select-item{

    height:42px;

    border-radius:12px;

    display:flex;

    align-items:center;

    padding:0 14px;

    text-decoration:none;

    color:#fff;

    font-size:13px;

    font-weight:600;

    background:
    rgba(255,255,255,.02);

    border:
    1px solid rgba(255,255,255,.03);

    transition:.18s ease;

}

/* =========================================================
   ACTIVE
========================================================= */

.custom-select-item.active{

    border:
    1px solid rgba(217,155,46,.95);

    background:
    rgba(217,155,46,.08);

}

/* =========================================================
   HOVER
========================================================= */

.custom-select-item:hover{

    background:
    rgba(255,255,255,.05);

}
/* =========================================================
   FOCUS
========================================================= */

.team-select:focus{

    border:
    1px solid rgba(217,155,46,.9);

    box-shadow:
    0 0 0 3px rgba(217,155,46,.10);

}

/* =========================================================
   BACKGROUND
========================================================= */

body::before{

    content:"";

    position:fixed;

    inset:0;

    z-index:-20;

    background:
    url('/assets/img/bg-desktop.png')
    center center / cover no-repeat;

}

/* =========================================================
   MOBILE BG
========================================================= */

@media(max-width:900px){

    body::before{

        background:
        url('/assets/img/bg-mobile2.png')
        center center / cover no-repeat;

    }

}

/* =========================================================
   OVERLAY
========================================================= */

body::after{

    content:"";

    position:fixed;

    inset:0;

    z-index:-19;

    background:

    linear-gradient(
        to bottom,
        rgba(0,0,0,.34),
        rgba(0,0,0,.14)
    ),

    radial-gradient(
        circle at top,
        rgba(217,155,46,.14),
        transparent 55%
    );

}

/* =========================================================
   PAGE
========================================================= */

.organisation-page{

    width:100%;

    padding:
    92px
    12px
    14px
    12px;

}

/* =========================================================
   PAGE CARD
========================================================= */

.page-card{

    position:relative;

    width:100%;

    max-width:1450px;

    margin:0 auto;

    padding:18px;

    border-radius:26px;

    background:
    rgba(5,10,18,.03);

    backdrop-filter:blur(3px);

    border:
    1px solid rgba(255,255,255,.05);

    box-shadow:
    0 10px 28px rgba(0,0,0,.10);

    overflow:hidden;

}
/* =========================================================
   INPUT STYLE
========================================================= */

.team-input{

    width:100%;

    height:42px;

    border:none;

    outline:none;

    padding:0 14px;

    border-radius:14px;

    background:
    linear-gradient(
        180deg,
        rgba(10,14,22,.95),
        rgba(15,20,30,.92)
    );

    border:
    1px solid rgba(255,255,255,.05);

    color:#fff;

    font-size:15px;

    font-weight:600;

    transition:.18s ease;

    box-shadow:
    inset 0 1px 0 rgba(255,255,255,.03);

}

/* =========================================================
   FOCUS
========================================================= */

.team-input:focus{

    border:
    1px solid rgba(217,155,46,.9);

    box-shadow:
    0 0 0 3px rgba(217,155,46,.10);

}

/* =========================================================
   REMOVE ARROWS
========================================================= */

.team-input::-webkit-outer-spin-button,
.team-input::-webkit-inner-spin-button{

    -webkit-appearance:none;
    margin:0;

}

.team-input[type=number]{

    -moz-appearance:textfield;

}
/* =========================================================
   GLOW
========================================================= */

.page-card::before{

    content:"";

    position:absolute;

    inset:0;

    pointer-events:none;

    background:
    radial-gradient(
        circle at top left,
        rgba(217,155,46,.04),
        transparent 35%
    );

}

/* =========================================================
   LAYOUT
========================================================= */

.page-layout{

    display:flex;

    align-items:flex-start;

    gap:18px;

}

/* =========================================================
   SIDEBAR
========================================================= */

.sidebar{

    width:64px;

    min-width:64px;

    padding:8px 6px;

    border-radius:22px;

    background:
    linear-gradient(
        180deg,
        rgba(8,10,16,.76),
        rgba(15,20,30,.62)
    );

    backdrop-filter:blur(16px);

    border:
    1px solid rgba(255,255,255,.05);

    box-shadow:
    0 14px 40px rgba(0,0,0,.16);

}

/* =========================================================
   SIDEBAR INNER
========================================================= */

.sidebar-inner{

    display:flex;

    flex-direction:column;

    gap:8px;

}

/* =========================================================
   SIDEBAR ITEM
========================================================= */

.sidebar-item{

    width:100%;
    height:48px;

    border-radius:14px;

    display:flex;

    align-items:center;

    justify-content:center;

    text-decoration:none;

    background:
    rgba(255,255,255,.02);

    border:
    1px solid rgba(255,255,255,.03);

    transition:.2s ease;

    flex-shrink:0;

}

/* =========================================================
   ACTIVE
========================================================= */

.sidebar-item.active{

    background:
    rgba(217,155,46,.08);

    border:
    1px solid rgba(217,155,46,.95);

    box-shadow:
    0 0 18px rgba(217,155,46,.10);

}

/* =========================================================
   HOVER
========================================================= */

.sidebar-item:hover{

    transform:translateY(-2px);

    background:
    rgba(255,255,255,.05);

}

/* =========================================================
   ICON
========================================================= */

.sidebar-item svg{

    width:18px;
    height:18px;

    stroke:#fff;

    opacity:.92;

}

/* =========================================================
   CONTENT
========================================================= */

.page-content{

    flex:1;

    min-width:0;

}

/* =========================================================
   TITLE
========================================================= */

.page-title{

    font-size:30px;

    font-weight:900;

    line-height:1.05;

    letter-spacing:-1px;

    margin-bottom:4px;

    background:
    linear-gradient(
        180deg,
        var(--gold2),
        var(--gold)
    );

    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;

}

.page-sub{

    color:
    rgba(255,255,255,.42);

    font-size:13px;

    margin-bottom:16px;

}

/* =========================================================
   BUTTON
========================================================= */

.add-team-wrapper{

    margin-bottom:14px;

}

.add-team-btn{

    height:40px;

    padding:0 18px;

    border:none;

    border-radius:12px;

    background:
    linear-gradient(
        180deg,
        #22c58b,
        #169f71
    );

    color:white;

    font-size:13px;

    font-weight:800;

    cursor:pointer;

}

/* =========================================================
   CREATE CARD
========================================================= */

.add-team-card{

    display:none;

    width:320px;

    padding:14px;

    margin-bottom:14px;

    border-radius:18px;

    background:
    rgba(8,12,20,.92);

    border:
    1px solid rgba(255,255,255,.05);

}

.add-team-card.open{

    display:block;

}

/* =========================================================
   FORMS
========================================================= */

.add-team-card form,
.team-edit form{

    display:flex;

    flex-direction:column;

    gap:8px;

}

/* =========================================================
   INPUTS
========================================================= */

input[type="text"],
.team-select{

    width:100%;

    height:38px;

    border:none;

    outline:none;

    border-radius:10px;

    background:
    rgba(255,255,255,.04);

    border:
    1px solid rgba(255,255,255,.06);

    padding:0 12px;

    color:#fff;

    font-size:12px;

}
/* =========================================================
   COLOR
========================================================= */

.team-color{

    display:flex;

    align-items:center;

    gap:10px;

    font-size:12px;

    color:
    rgba(255,255,255,.55);

}

/* =========================================================
   INPUT
========================================================= */

.team-color input{

    width:38px;

    height:30px;

    padding:0;

    border:none;

    background:none;

    cursor:pointer;

}

/* =========================================================
   GRID
========================================================= */

.teams-grid{

    display:grid;

    grid-template-columns:
    repeat(4,minmax(0,1fr));

    gap:12px;

}

/* =========================================================
   TEAM CARD
========================================================= */

.team-card{

    background:
    linear-gradient(
        180deg,
        rgba(2,5,12,.95),
        rgba(1,3,8,.96)
    );

    border-radius:18px;

    border:
    1px solid var(--team-color);

    overflow:hidden;

}

/* =========================================================
   HEADER
========================================================= */

.team-header{

    padding:
    14px
    14px
    4px
    14px;

    cursor:pointer;

    display:flex;

    flex-direction:column;

    justify-content:flex-start;

}
/* =========================================================
   CARD AUTO HEIGHT
========================================================= */

.team-card{

    height:fit-content;

    align-self:start;

}
/* =========================================================
   NUMBER
========================================================= */

.team-number{

    font-size:14px;

    font-weight:900;

    color:#fff;

    margin-bottom:10px;

}

/* =========================================================
   BADGE
========================================================= */

.team-badge{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    width:fit-content;

    max-width:max-content;

    align-self:flex-start;

    height:24px;

    padding:0 14px;

    border-radius:999px;

    font-size:10px;

    font-weight:900;

    text-transform:uppercase;

    color:#fff;

    margin-bottom:10px;

}

.team-badge-space{

    height:20px;

    margin-bottom:10px;

}

/* =========================================================
   PLAYERS
========================================================= */

.team-players{

    font-size:11px;

    line-height:1.5;

    color:
    rgba(255,255,255,.42);

    text-transform:uppercase;

}

/* =========================================================
   EDIT
========================================================= */

.team-edit{

    max-height:0;

    overflow:hidden;

    opacity:0;

    transition:.2s;

    padding:0 14px;

}

.team-card.open .team-edit{

    max-height:500px;

    opacity:1;

    padding:
    0 14px 14px 14px;

}

.team-card.open .team-players,
.team-card.open .team-badge,
.team-card.open .team-badge-space{

    display:none;

}

/* =========================================================
   BUTTONS
========================================================= */

.team-buttons{

    display:flex;

    gap:8px;

}

.team-save{

    flex:1;

    height:38px;

    border:none;

    border-radius:10px;

    background:
    linear-gradient(
        180deg,
        #22c58b,
        #169f71
    );

    color:white;

    font-size:12px;

    font-weight:800;

}

.team-delete{

    width:38px;
    height:38px;

    border:none;

    border-radius:10px;

    background:
    rgba(255,255,255,.06);

    color:white;

}

/* =========================================================
   DESKTOP
========================================================= */

@media(max-width:1400px){

    .teams-grid{

        grid-template-columns:
        repeat(3,minmax(0,1fr));

    }

}

/* =========================================================
   TABLET
========================================================= */

@media(max-width:1100px){

    .teams-grid{

        grid-template-columns:
        repeat(2,minmax(0,1fr));

    }

}

/* =========================================================
   MOBILE
========================================================= */

@media(max-width:900px){

    .organisation-page{

        padding:
        160px
        10px
        12px
        10px;

    }
.team-card.open{

    grid-column:auto;

}
.team-card{

    align-self:start;

}
    .page-card{

        padding:14px;

        border-radius:22px;

    }

    .page-layout{

        flex-direction:column;

        gap:14px;

    }

    /* =========================
       SIDEBAR MOBILE
    ========================= */

    .sidebar{

        width:100%;

        min-width:auto;

        padding:8px;

        border-radius:18px;

        overflow-x:auto;

        overflow-y:hidden;

        scrollbar-width:none;

        -webkit-overflow-scrolling:touch;

    }

    .sidebar::-webkit-scrollbar{

        display:none;

    }

    .sidebar-inner{

        flex-direction:row;

        width:max-content;

        gap:8px;

    }

    .sidebar-item{

        width:48px;
        min-width:48px;

        height:48px;

        border-radius:14px;

    }

    .sidebar-item svg{

        width:17px;
        height:17px;

    }

    /* =========================
       TITLE
    ========================= */

    .page-title{

        font-size:18px;

        line-height:1.1;

    }

    .page-sub{

        font-size:12px;

        margin-bottom:14px;

    }

    /* =========================
       CREATE TEAM
    ========================= */

    .add-team-card{

        width:100%;

        padding:12px;

    }

    /* =========================
       GRID
    ========================= */

    .teams-grid{

        grid-template-columns:
        repeat(2,minmax(0,1fr));

        gap:10px;

    }

    /* =========================
       TEAM CARD
    ========================= */

    .team-card{

        border-radius:16px;

    }

    .team-header{

        padding:12px;

        min-height:92px;

    }

    .team-number{

        font-size:11px;

        line-height:1.2;

    }

    .team-badge{

        height:18px;

        padding:0 7px;

        font-size:10px;

    }

    .team-badge-space{

        height:18px;

    }

    .team-players{

        font-size:9px;

        line-height:1.4;

    }

    /* =========================
       EDIT
    ========================= */

    .team-edit{

        padding:0 10px;

    }

    .team-card.open .team-edit{

        padding:
        0 10px 10px 10px;

    }

    input[type="text"],
    .team-select{

        height:34px;

        font-size:11px;

    }

    .team-save{

        height:34px;

        font-size:11px;

    }

    .team-delete{

        width:34px;
        height:34px;

    }

}

/* =========================================================
   SMALL MOBILE
========================================================= */

@media(max-width:560px){

    .teams-grid{

        grid-template-columns:
        repeat(2,minmax(0,1fr));

        gap:8px;

    }

    .team-header{

        padding:10px;

        min-height:82px;

    }

    .team-number{

        font-size:12px;

    }

    .team-players{

        font-size:10px;

    }

}








/* =========================================================
   PAGE QR UTILISATEUR
========================================================= */

.qr-public-page{
    width:100%;
    max-width:980px;
    margin:0 auto;
    padding:100px 18px 32px;
}

.qr-public-card{
    position:relative;
    overflow:hidden;

    margin-bottom:18px;
    padding:24px;

    border-radius:30px;

    background:
    linear-gradient(
        145deg,
        rgba(10,15,24,.98),
        rgba(4,8,14,.98)
    );

    border:
    1px solid rgba(255,255,255,.08);

    box-shadow:
    0 28px 70px rgba(0,0,0,.50);
}

.qr-public-card::before{
    content:"";

    position:absolute;

    top:-120px;
    right:-120px;

    width:280px;
    height:280px;

    border-radius:999px;

    background:
    radial-gradient(
        circle,
        var(--team-color),
        transparent 68%
    );

    opacity:.22;

    pointer-events:none;
}

.qr-public-card::after{
    content:"";

    position:absolute;

    inset:0;

    background:
    linear-gradient(
        90deg,
        rgba(255,255,255,.035),
        transparent 48%
    );

    pointer-events:none;
}

.qr-public-card-content{
    position:relative;
    z-index:2;

    display:flex;
    align-items:flex-start;
    justify-content:space-between;

    gap:18px;
}

.qr-public-info{
    min-width:0;
    flex:1;
}

.qr-public-title{
    margin:0;

    color:#fff;

    font-size:30px;
    line-height:1.08;
    font-weight:950;
    letter-spacing:-.8px;
}

.qr-public-members{
    display:flex;
    flex-wrap:wrap;
    gap:8px;

    margin-top:14px;

    color:#fff;

    font-size:17px;
    font-weight:850;
}

.qr-public-members{
    display:flex;
    flex-direction:column;
    gap:6px;
}

.qr-public-team{
    display:inline-flex;

    width:max-content;
    max-width:100%;

    margin-top:10px;
    padding:8px 12px;

    border-radius:14px;

    color:
    rgba(255,255,255,.82);

    background:
    rgba(255,255,255,.065);

    border:
    1px solid rgba(255,255,255,.08);

    font-size:13px;
    font-weight:850;
}

.qr-public-logo-box{
    position:relative;
    z-index:2;

    flex:0 0 auto;

    width:92px;
    height:92px;

    border-radius:22px;

    overflow:hidden;

    background:
    rgba(255,255,255,.06);

    border:
    1px solid rgba(255,255,255,.1);

    display:flex;
    align-items:center;
    justify-content:center;
}

.qr-public-logo{
    width:82%;
    height:82%;

    object-fit:contain;

    display:block;

    border-radius:14px;
}

.qr-public-declare{
    position:relative;
    z-index:2;

    width:100%;
    min-height:62px;

    margin-top:20px;

    border:none;
    border-radius:20px;

    background:
        linear-gradient(
            180deg,
            #ffd86b,
            #d99b2e
        );

    color:#120b02;

    box-shadow:
    0 18px 42px rgba(22,185,120,.25);

    font-size:18px;
    font-weight:950;

    cursor:pointer;
}

.qr-public-warning{
    position:relative;
    z-index:2;

    margin-top:18px;
    padding:16px;

    border-radius:18px;

    background:
    rgba(245,158,11,.13);

    border:
    1px solid rgba(245,158,11,.35);

    color:#ffd278;

    font-weight:800;
}

.qr-public-message{
    display:none;

    position:relative;
    z-index:2;

    margin-top:14px;
    padding:13px 15px;

    border-radius:16px;

    font-size:14px;
    font-weight:800;
}

.qr-public-message.show{
    display:block;
}

.qr-public-message.ok{
    color:#052e18;
    background:#35e39a;
}

.qr-public-message.err{
    color:#fff;
    background:#ef4444;
}

/* =========================================================
   MARKER POISSON QR
========================================================= */

.custom-fish-marker{
    background:transparent !important;
    border:none !important;
}

.fish-marker-wrap{
    width:46px;
    height:46px;

    display:flex;
    align-items:center;
    justify-content:center;

    background:transparent !important;

    border:none !important;

    box-shadow:none !important;
}

.fish-marker-img{
    width:46px;
    height:46px;

    display:block;

    object-fit:contain;

    border-radius:0 !important;

    background:transparent !important;
}

/* =========================================================
   POPUP QR
========================================================= */

.popup-text{
    color:rgba(255,255,255,.68);

    font-size:14px;

    font-weight:700;

    line-height:1.5;

    margin-bottom:16px;
}

/* =========================================================
   MOBILE QR
========================================================= */

@media(max-width:720px){

    .qr-public-page{
        padding:92px 14px 24px;
    }

    .qr-public-card{
        padding:20px;
        border-radius:26px;
    }

    .qr-public-title{
        font-size:25px;
    }

    .qr-public-members{
        font-size:15px;
    }

    .qr-public-logo-box{
        width:76px;
        height:76px;
        border-radius:20px;
    }

}

    .qr-public-declare{
        min-height:60px;

        font-size:17px;
    }

}

/* =========================================================
   CONNEXION QR — IDENTIQUE CLASSEMENT
========================================================= */

.qr-connexion-page{
    width:100%;

    padding:
    92px
    10px
    12px
    10px;
}

.qr-connexion-card,
.qr-map-card{
    max-width:1450px;

    padding:18px;

    border-radius:26px;

    background:
        rgba(5,10,18,.03);

    backdrop-filter:blur(3px);

    border:
        1px solid rgba(255,255,255,.05);

    box-shadow:
        0 10px 28px rgba(0,0,0,.10);

    overflow:hidden;
}

.qr-connexion-card{
    margin-bottom:18px;
}

.qr-map-card{
    margin-top:0;
}

/* Titre identique classement */

.qr-connexion-card .classement-title-row{
    position:relative;
    z-index:2;

    margin-bottom:18px;
}

.qr-connexion-card .page-title{
    font-size:18px !important;
    font-weight:900 !important;
    line-height:1.1 !important;
    letter-spacing:0 !important;

    margin-bottom:4px !important;

    background:
    linear-gradient(
        180deg,
        var(--gold2),
        var(--gold)
    ) !important;

    -webkit-background-clip:text !important;
    background-clip:text !important;
    -webkit-text-fill-color:transparent !important;
    color:transparent !important;
}

.qr-connexion-card .page-sub{
    display:flex !important;
    align-items:center !important;
    flex-wrap:wrap !important;
    gap:8px !important;

    color:rgba(255,255,255,.42) !important;

    font-size:12px !important;
    line-height:1.25 !important;
    font-weight:700 !important;

    margin-bottom:0 !important;
}

/* Badge identique classement */

.qr-connexion-card .classement-status{
    display:inline-flex;
    align-items:center;
    justify-content:center;

    height:24px;

    padding:0 12px;

    border-radius:999px;

    font-size:11px;
    line-height:1;
    font-weight:900;
}

.qr-connexion-card .classement-status-ok{
    background:rgba(34,197,94,.18);
    color:#32d982;
}

.qr-connexion-card .classement-status-fini{
    background:rgba(239,68,68,.16);
    color:#ff7474;
}

/* Bloc équipe dans la card */

.qr-team-panel{
    position:relative;
    z-index:2;
}

.qr-team-content{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;

    gap:18px;
}

.qr-team-info{
    flex:1;
    min-width:0;
}

.qr-team-main{
    color:#fff;

    font-size:16px;
    line-height:1.2;
    font-weight:800;

    margin-bottom:16px;
}

.qr-team-members{
    display:flex;
    flex-direction:column;
    gap:6px;

    margin-top:0;

    color:#fff;

    font-size:15px;
    line-height:1.25;
    font-weight:900;
}

.qr-team-members span{
    display:block;

    font-size:15px;
    line-height:1.25;
    font-weight:900;
}

.qr-public-team{
    display:inline-flex;
    align-items:center;
    justify-content:center;

    width:max-content;
    max-width:100%;

    margin-top:12px;
    padding:8px 13px;

    border-radius:14px;

    background:
        rgba(255,255,255,.065);

    border:
        1px solid rgba(255,255,255,.08);

    color:rgba(255,255,255,.82);

    font-size:13px;
    line-height:1;
    font-weight:850;
}

/* Logo équipe */

.qr-public-logo-box{
    flex:0 0 auto;

    width:76px;
    height:76px;

    display:flex;
    align-items:center;
    justify-content:center;

    border-radius:20px;

    overflow:hidden;

    background:
        rgba(255,255,255,.06);

    border:
        1px solid rgba(255,255,255,.10);
}

.qr-public-logo{
    width:82%;
    height:82%;

    object-fit:contain;

    display:block;

    border-radius:14px;
}

/* Bouton déclarer couleur OR */

.qr-public-declare{
    position:relative;
    z-index:2;

    width:100%;
    min-height:60px;

    margin-top:20px;

    border:none;
    outline:none;

    border-radius:20px;

    background:
        linear-gradient(
            180deg,
            #ffd86b,
            #d99b2e
        );

    color:#120b02;

    font-size:17px;
    line-height:1;
    font-weight:950;

    cursor:pointer;

    box-shadow:
        0 18px 42px rgba(217,155,46,.25),
        inset 0 1px 0 rgba(255,255,255,.30);
}

.qr-public-declare:hover{
    background:
        linear-gradient(
            180deg,
            #ffe28a,
            #e0a83a
        );
}

.qr-public-declare:active{
    transform:scale(.98);
}

/* Message / warning */

.qr-public-warning{
    position:relative;
    z-index:2;

    margin-top:18px;
    padding:16px;

    border-radius:18px;

    background:
        rgba(245,158,11,.13);

    border:
        1px solid rgba(245,158,11,.35);

    color:#ffd278;

    font-size:14px;
    font-weight:800;
}

.qr-public-message{
    display:none;

    position:relative;
    z-index:2;

    margin-top:14px;
    padding:13px 15px;

    border-radius:16px;

    font-size:14px;
    font-weight:800;
}

.qr-public-message.show{
    display:block;
}

.qr-public-message.ok{
    color:#052e18;
    background:#35e39a;
}

.qr-public-message.err{
    color:#fff;
    background:#ef4444;
}

/* Carte identique style card */

.qr-map-card .map-header{
    position:relative;
    z-index:2;

    margin-bottom:14px;
}

.qr-map-card .map-title{
    color:#fff;

    font-size:18px;
    line-height:1.1;
    font-weight:900;
}

.qr-map-card .map-wrap{
    position:relative;
    z-index:2;

    overflow:hidden;

    border-radius:20px;

    border:
        1px solid rgba(255,255,255,.08);

    background:#05070d;
}

.qr-map-card #map{
    width:100%;
    height:320px;
}

/* =========================================================
   MOBILE — IDENTIQUE CLASSEMENT
========================================================= */

@media(max-width:600px){

    .qr-connexion-page{
    padding:
    92px
    10px
    12px
    10px;
}

    .qr-connexion-card,
    .qr-map-card{
        padding:14px;

        border-radius:22px;
    }

    .qr-connexion-card .page-title{
        font-size:18px;

        line-height:1.1;
        letter-spacing:0;
    }

    .qr-connexion-card .page-sub{
        font-size:12px;

        margin-bottom:0;
    }

    .qr-team-main{
        font-size:16px;
    }

    .qr-team-members,
    .qr-team-members span{
        font-size:15px;
    }

    .qr-public-logo-box{
        width:76px;
        height:76px;

        border-radius:20px;
    }

    .qr-public-declare{
        min-height:60px;

        font-size:17px;
    }

    .qr-map-card .map-title{
        font-size:18px;
    }

    .qr-map-card #map{
        height:280px;
    }
}
/* =========================================================
   POPUP CONFIRMATION SUPPRESSION ÉQUIPE
========================================================= */

.delete-modal{
    position:fixed;
    inset:0;
    z-index:9999;
    display:none;
    align-items:center;
    justify-content:center;
    padding:20px;
}

.delete-modal.open{
    display:flex;
}

.delete-modal-backdrop{
    position:absolute;
    inset:0;
    background:rgba(0,0,0,.76);
    backdrop-filter:blur(8px);
}

.delete-modal-card{
    position:relative;
    width:min(92vw,430px);
    padding:28px;
    border-radius:28px;
    background:
        radial-gradient(circle at top, rgba(239,68,68,.18), transparent 48%),
        linear-gradient(180deg, rgba(20,24,32,.98), rgba(7,9,14,.98));
    border:1px solid rgba(239,68,68,.58);
    box-shadow:
        0 24px 80px rgba(0,0,0,.55),
        0 0 35px rgba(239,68,68,.20);
    text-align:center;
    color:#fff;
}

.delete-modal-icon{
    width:64px;
    height:64px;
    margin:0 auto 14px auto;
    border-radius:22px;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:34px;
    background:rgba(239,68,68,.14);
    border:1px solid rgba(239,68,68,.35);
}

.delete-modal-title{
    font-size:24px;
    line-height:1.15;
    font-weight:900;
    margin-bottom:10px;
}

.delete-modal-text{
    font-size:14px;
    color:rgba(255,255,255,.76);
    line-height:1.5;
    margin-bottom:24px;
}

.delete-modal-text strong{
    color:#fff;
}

.delete-modal-actions{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:12px;
}

.delete-cancel-btn,
.delete-confirm-btn{
    height:50px;
    border:0;
    border-radius:16px;
    font-weight:900;
    cursor:pointer;
    color:#fff;
}

.delete-cancel-btn{
    background:rgba(255,255,255,.10);
    border:1px solid rgba(255,255,255,.12);
}

.delete-confirm-btn{
    background:linear-gradient(135deg,#ef4444,#b91c1c);
    box-shadow:0 10px 25px rgba(239,68,68,.30);
}

@media(max-width:520px){
    .delete-modal-card{
        padding:24px 18px;
        border-radius:24px;
    }

    .delete-modal-actions{
        grid-template-columns:1fr;
    }
}


/* =========================================================
   STATS EQUIPE QR UTILISATEUR
   Sans team-color / centré / style classement
========================================================= */

.qr-user-stats-row{
    width:100%;
    margin-top:14px;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:12px;
}

.qr-user-stat-card{
    min-height:78px;
    padding:14px 12px;
    border-radius:18px;

    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    text-align:center;

    background:
        linear-gradient(
            180deg,
            rgba(23,26,34,.98),
            rgba(16,18,24,.98)
        ) !important;

    border:1px solid rgba(255,255,255,.10) !important;

    box-shadow:
        0 10px 28px rgba(0,0,0,.32),
        inset 0 1px 0 rgba(255,255,255,.05) !important;

    color:#fff !important;
    overflow:hidden;
}

/* désactive tous les effets couleur équipe */
.qr-user-stat-card::before,
.qr-user-stat-card::after{
    content:none !important;
    display:none !important;
    background:none !important;
    box-shadow:none !important;
}

.qr-user-stat-label{
    display:block;
    margin:0 0 8px 0;

    color:rgba(255,255,255,.68) !important;
    font-size:11px;
    font-weight:900;
    line-height:1;
    text-transform:uppercase;
    letter-spacing:.06em;
    text-align:center;
}

.qr-user-stat-card strong{
    display:block;
    margin:0;

    color:#ffffff !important;
    font-size:24px;
    font-weight:950;
    line-height:1.05;
    letter-spacing:-.03em;
    white-space:nowrap;
    text-align:center;
    text-shadow:none !important;
}



/* supprime anciennes icônes / wrappers si restés en cache */
.qr-user-stat-icon{
    display:none !important;
}

.qr-user-stat-text{
    width:100%;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    text-align:center;
}

/* =========================================================
   MOBILE
========================================================= */

@media(max-width:520px){

    .qr-user-stats-row{
        grid-template-columns:1fr 1fr;
        gap:8px;
        margin-top:12px;
    }

    .qr-user-stat-card{
        min-height:72px;
        padding:11px 8px;
        border-radius:16px;
    }

    .qr-user-stat-label{
        font-size:9px;
        margin-bottom:7px;
        letter-spacing:.04em;
    }

    .qr-user-stat-card strong{
        font-size:18px;
    }

}

@media(max-width:370px){

    .qr-user-stats-row{
        gap:7px;
    }

    .qr-user-stat-card{
        padding:10px 6px;
    }

    .qr-user-stat-label{
        font-size:8px;
    }

    .qr-user-stat-card strong{
        font-size:16px;
    }

}
                body{
                min-height:100vh;
                margin:0;
                background:#05070d;
                color:#fff;
                font-family:Inter,Arial,sans-serif;
            }

            .enduro-finished-overlay{
                position:fixed;
                inset:0;
                z-index:99999;
                display:flex;
                align-items:center;
                justify-content:center;
                padding:22px;
                background:rgba(0,0,0,.78);
                backdrop-filter:blur(8px);
            }

            .enduro-finished-card{
                width:min(520px,100%);
                border:1px solid rgba(217,155,46,.55);
                border-radius:24px;
                background:linear-gradient(180deg,rgba(17,20,28,.98),rgba(6,8,13,.98));
                box-shadow:0 24px 80px rgba(0,0,0,.65);
                padding:32px 26px;
                text-align:center;
            }

            .enduro-finished-icon{
                width:64px;
                height:64px;
                margin:0 auto 18px;
                border-radius:50%;
                display:flex;
                align-items:center;
                justify-content:center;
                background:rgba(217,155,46,.15);
                border:1px solid rgba(217,155,46,.6);
                color:#f5c553;
                font-size:34px;
                font-weight:900;
            }

            .enduro-finished-title{
                font-size:30px;
                font-weight:900;
                color:#f5c553;
                margin-bottom:10px;
            }

            .enduro-finished-text{
                color:rgba(255,255,255,.78);
                font-size:16px;
                line-height:1.45;
                margin-bottom:24px;
            }

            .enduro-finished-name{
                display:inline-block;
                margin-top:10px;
                padding:8px 13px;
                border-radius:999px;
                background:rgba(255,255,255,.08);
                color:#fff;
                font-weight:800;
                font-size:14px;
            }

            .enduro-finished-btn{
                display:flex;
                width:100%;
                height:48px;
                align-items:center;
                justify-content:center;
                border-radius:14px;
                background:linear-gradient(135deg,#f6c85f,#d99b2e);
                color:#0b0d12;
                text-decoration:none;
                font-weight:900;
                box-shadow:0 10px 24px rgba(217,155,46,.28);
            }

            .enduro-finished-btn:active{
                transform:scale(.98);
            }
/* =========================================================
   PAGE QR UTILISATEUR — ENDURO TERMINÉ
========================================================= */

.enduro-fini-page{
    min-height:calc(100vh - 78px);
    display:flex;
    align-items:center;
    justify-content:center;
    padding:24px;
}

.enduro-fini-card{
    width:min(560px,100%);
    padding:34px 26px;
    border-radius:26px;
    text-align:center;
    background:
        radial-gradient(circle at top, rgba(217,155,46,.20), transparent 44%),
        linear-gradient(180deg, rgba(18,21,30,.98), rgba(6,8,13,.98));
    border:1px solid rgba(217,155,46,.55);
    box-shadow:0 24px 80px rgba(0,0,0,.68);
}

.enduro-fini-icon{
    width:74px;
    height:74px;
    margin:0 auto 18px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    background:rgba(217,155,46,.16);
    border:1px solid rgba(217,155,46,.65);
    color:#f5c553;
    font-size:38px;
    font-weight:900;
}

.enduro-fini-title{
    font-size:32px;
    line-height:1.1;
    font-weight:900;
    color:#f5c553;
    margin-bottom:14px;
}

.enduro-fini-text{
    font-size:18px;
    line-height:1.5;
    color:rgba(255,255,255,.86);
    font-weight:800;
    margin-bottom:24px;
}

.enduro-fini-association{
    display:flex;
    align-items:center;
    justify-content:center;
    flex-wrap:wrap;
    gap:8px;
    width:100%;
    padding:12px 16px;
    border-radius:999px;
    background:rgba(255,255,255,.08);
    border:1px solid rgba(255,255,255,.12);
    color:#fff;
    font-size:15px;
    font-weight:700;
}

.enduro-fini-association strong{
    color:#f5c553;
    font-weight:900;
}

.enduro-fini-association span{
    color:rgba(255,255,255,.82);
}
/* =========================================================
   PAGE QR UTILISATEUR — HEADER FIN ENDURO
========================================================= */

.enduro-fini-page + .logout-user-icon,
.site-header .logout-user-icon{
    flex-shrink:0;
}

.site-header .logout-user-icon img{
    width:22px;
    height:22px;
    max-width:22px;
    max-height:22px;
    object-fit:contain;
    display:block;
}
@media(max-width:600px){

    .enduro-fini-page{
        min-height:calc(100vh - 70px);
        padding:18px;
    }

    .enduro-fini-card{
        padding:30px 20px;
        border-radius:22px;
    }

    .enduro-fini-title{
        font-size:28px;
    }

    .enduro-fini-text{
        font-size:16px;
    }

    .enduro-fini-association{
        border-radius:18px;
        font-size:14px;
        line-height:1.35;
    }

}
/* =========================================================
   PAGE QR UTILISATEUR — ENDURO TERMINÉ
========================================================= */

.enduro-fini-page{
    min-height:calc(100vh - 78px);
    display:flex;
    align-items:center;
    justify-content:center;
    padding:24px;
}

.enduro-fini-card{
    width:min(560px,100%);
    padding:34px 26px;
    border-radius:26px;
    text-align:center;
    background:
        radial-gradient(circle at top, rgba(217,155,46,.20), transparent 44%),
        linear-gradient(180deg, rgba(18,21,30,.98), rgba(6,8,13,.98));
    border:1px solid rgba(217,155,46,.55);
    box-shadow:0 24px 80px rgba(0,0,0,.68);
}

.enduro-fini-logo-box{
    width:96px;
    height:96px;
    margin:0 auto 18px;
    border-radius:24px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:rgba(255,255,255,.08);
    border:1px solid rgba(217,155,46,.45);
    box-shadow:0 12px 30px rgba(0,0,0,.35);
    overflow:hidden;
}

.enduro-fini-logo{
    max-width:82px;
    max-height:82px;
    object-fit:contain;
    display:block;
}

.enduro-fini-icon{
    width:58px;
    height:58px;
    margin:0 auto 18px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    background:rgba(217,155,46,.16);
    border:1px solid rgba(217,155,46,.65);
    color:#f5c553;
    font-size:30px;
    font-weight:900;
}

.enduro-fini-title{
    font-size:32px;
    line-height:1.1;
    font-weight:900;
    color:#f5c553;
    margin-bottom:14px;
}

.enduro-fini-text{
    font-size:18px;
    line-height:1.5;
    color:rgba(255,255,255,.86);
    font-weight:800;
    margin-bottom:24px;
}

.enduro-fini-association{
    display:flex;
    align-items:center;
    justify-content:center;
    flex-wrap:wrap;
    gap:8px;
    width:100%;
    padding:12px 16px;
    border-radius:999px;
    background:rgba(255,255,255,.08);
    border:1px solid rgba(255,255,255,.12);
    color:#fff;
    font-size:15px;
    font-weight:700;
}

.enduro-fini-association strong{
    color:#f5c553;
    font-weight:900;
}

.enduro-fini-association span{
    color:rgba(255,255,255,.82);
}

/* Garde le bouton déconnexion petit en haut à droite */
.site-header .logout-user-icon{
    flex-shrink:0;
}

.site-header .logout-user-icon img{
    width:22px;
    height:22px;
    max-width:22px;
    max-height:22px;
    object-fit:contain;
    display:block;
}

@media(max-width:600px){

    .enduro-fini-page{
        min-height:calc(100vh - 70px);
        padding:18px;
    }

    .enduro-fini-card{
        padding:30px 20px;
        border-radius:22px;
    }

    .enduro-fini-logo-box{
        width:84px;
        height:84px;
        border-radius:20px;
        margin-bottom:16px;
    }

    .enduro-fini-logo{
        max-width:72px;
        max-height:72px;
    }

    .enduro-fini-icon{
        width:52px;
        height:52px;
        font-size:28px;
    }

    .enduro-fini-title{
        font-size:28px;
    }

    .enduro-fini-text{
        font-size:16px;
    }

    .enduro-fini-association{
        border-radius:18px;
        font-size:14px;
        line-height:1.35;
    }

}
/* =========================================================
   SAISIE ADMIN
========================================================= */

.saisie-form-card{
    max-width:720px;
}

.saisie-form-inner{
    max-height:none !important;
    opacity:1 !important;
    overflow:visible !important;
    padding:18px !important;
}

.saisie-error-badge{
    background:#dc2626;
    margin-bottom:10px;
}

/* =========================================================
   CHAMPS SAISIE - NET / PAS FLOU
========================================================= */

.saisie-field,
.saisie-field:focus,
.team-input-poids.saisie-field,
.team-input-poids.saisie-field:focus{
    width:100%;
    min-height:52px;
    height:52px;
    line-height:52px;
    font-size:16px;
    font-weight:800;
    color:#ffffff;
    text-shadow:none !important;
    filter:none !important;
    backdrop-filter:none !important;
    -webkit-backdrop-filter:none !important;
    transform:none !important;
    opacity:1 !important;
    outline:none;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.06),
        0 10px 22px rgba(0,0,0,.18);
}

.team-input-poids.saisie-field{
    padding:0 16px;
    appearance:textfield;
    -moz-appearance:textfield;
}

.team-input-poids.saisie-field::-webkit-outer-spin-button,
.team-input-poids.saisie-field::-webkit-inner-spin-button{
    -webkit-appearance:none;
    margin:0;
}

/* =========================================================
   BOUTONS RETOUR / VALIDER
========================================================= */

.saisie-form-actions{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:12px;
    margin-top:18px;
    align-items:stretch;
}

.saisie-action-btn{
    width:100%;
    height:46px;
    min-height:46px;
    padding:0 18px;
    border-radius:15px;
    display:flex;
    align-items:center;
    justify-content:center;
    text-align:center;
    font-family:Inter, Arial, sans-serif;
    font-size:14px;
    line-height:1;
    font-weight:900;
    text-decoration:none;
    cursor:pointer;
    box-sizing:border-box;
    appearance:none;
    -webkit-appearance:none;
}

.saisie-return-btn{
    color:#ffd278;
    border:1px solid rgba(217,155,46,.55);
    background:
        linear-gradient(
            180deg,
            rgba(217,155,46,.18),
            rgba(217,155,46,.07)
        );
    box-shadow:
        0 12px 28px rgba(0,0,0,.24),
        inset 0 1px 0 rgba(255,255,255,.06);
}

.saisie-submit-btn{
    color:#ffffff;
    border:1px solid rgba(34,197,134,.75);
    background:
        linear-gradient(
            180deg,
            #2dd49a,
            #16bf82
        );
    box-shadow:
        0 12px 28px rgba(0,0,0,.24),
        inset 0 1px 0 rgba(255,255,255,.16);
}

.saisie-return-btn:hover,
.saisie-submit-btn:hover{
    transform:translateY(-1px);
}

/* =========================================================
   POPUP SUCCÈS VALIDATION
========================================================= */

.saisie-success-overlay{
    position:fixed;
    inset:0;
    z-index:9999;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:20px;
    background:rgba(0,0,0,.62);
}

.saisie-success-card{
    width:min(360px,100%);
    padding:26px 22px 24px;
    border-radius:26px;
    text-align:center;
    background:
        linear-gradient(
            180deg,
            rgba(10,16,22,.98),
            rgba(3,7,12,.98)
        );
    border:1px solid rgba(34,197,134,.35);
    box-shadow:
        0 24px 70px rgba(0,0,0,.55),
        inset 0 1px 0 rgba(255,255,255,.06);
}

.saisie-success-icon{
    width:58px;
    height:58px;
    margin:0 auto 14px;
    border-radius:999px;
    display:flex;
    align-items:center;
    justify-content:center;
    color:#ffffff;
    font-size:28px;
    font-weight:950;
    background:
        linear-gradient(
            180deg,
            #2dd49a,
            #16bf82
        );
    box-shadow:0 12px 28px rgba(22,191,130,.28);
}

.saisie-success-title{
    color:#ffffff;
    font-size:24px;
    line-height:1.05;
    font-weight:950;
}

.saisie-success-text{
    margin-top:9px;
    color:rgba(255,255,255,.68);
    font-size:14px;
    font-weight:800;
}

/* =========================================================
   MOBILE
========================================================= */

@media(max-width:520px){

    .saisie-form-actions{
        gap:10px;
    }

    .saisie-action-btn{
        height:44px;
        min-height:44px;
        font-size:13px;
        padding:0 10px;
    }

    .saisie-field,
    .team-input-poids.saisie-field{
        height:50px;
        min-height:50px;
        line-height:50px;
        font-size:15px;
    }
}