/* Contrôles réservés à l'admin : cachés pour les visiteurs (body sans .is-admin).
   On ne touche pas au display en mode admin pour préserver les flex d'origine. */
body:not(.is-admin) .admin-only { display: none !important; }

/* Spinner de chargement */
.loader{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding: 56px 20px;
    min-height: 160px;
    color: var(--muted);
}
.loader_spin{
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 4px solid var(--line);
    border-top-color: var(--red);
    animation: loader_spin .7s linear infinite;
}
.loader_label{
    font-size: 13px;
    font-weight: bold;
    letter-spacing: .5px;
}
@keyframes loader_spin{ to{ transform: rotate(360deg); } }

@font-face {
    font-family: 'Montserrat Regular';
    font-style: normal;
    font-weight: normal;
    src: local('Montserrat Regular'), url('assets/Montserrat-Regular.woff') format('woff');
}

:root{
    --red: #AF0C15;
    --red-dark: #8E0A11;
    --red-soft: #FDF1F1;
    --gold: #C9962E;
    --gold-soft: #FBF3E2;
    --bg: #F7F4F1;
    --card: #FFFFFF;
    --ink: #1F1C1B;
    --muted: #8C8580;
    --line: #E9E2DC;
    --shadow: 0 2px 6px rgba(31, 28, 27, .04), 0 10px 30px rgba(31, 28, 27, .06);
    --shadow-lift: 0 4px 10px rgba(31, 28, 27, .06), 0 18px 44px rgba(31, 28, 27, .12);
    --radius: 18px;
}

*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    font-family: 'Montserrat Regular', sans-serif;
    -webkit-tap-highlight-color: transparent; /* enlève le flash bleu au toucher (mobile) */
}
[hidden]{
    display: none !important;
}
html{
    scroll-behavior: smooth;
}
body{
    background:
        radial-gradient(900px 320px at 50% -80px, rgba(175, 12, 21, .06), transparent 70%),
        var(--bg);
    color: var(--ink);
    min-height: 100vh;
}
.page{
    max-width: 1320px;
    margin: 0 auto;
    padding: 34px 40px 80px;
}

/* -------------------------------- Navbar --------------------------------- */
.navbar{
    position: sticky;
    top: 0;
    z-index: 50;
    background: rgba(255, 255, 255, .82);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--line);
}
.navbar_inner{
    max-width: 1320px;
    margin: 0 auto;
    padding: 10px 40px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}
.brand{
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
}
.brand_logo{
    width: 52px;
    height: 52px;
    border-radius: 50%;
    object-fit: cover;
    object-position: center 30%;
    border: 2px solid var(--line);
    flex-shrink: 0;
}
.brand_text{
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.brand_name{
    font-size: 19px;
    font-weight: bolder;
    letter-spacing: 2.5px;
    white-space: nowrap;
}
.brand_name em{
    font-style: normal;
    color: var(--red);
}
.brand_tagline{
    font-size: 10.5px;
    color: var(--muted);
    letter-spacing: .6px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.main_nav{
    display: flex;
    gap: 4px;
    background: var(--bg);
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: 5px;
}
.nav_btn{
    display: flex;
    align-items: center;
    gap: 8px;
    border: none;
    background: none;
    color: var(--muted);
    border-radius: 999px;
    padding: 10px 20px;
    font-size: 14px;
    font-weight: bold;
    cursor: pointer;
    transition: background-color .2s ease, color .2s ease, box-shadow .2s ease;
}
.nav_btn:hover{
    color: var(--red-dark);
}
.nav_btn.active{
    background: linear-gradient(135deg, var(--red), var(--red-dark));
    color: white;
    box-shadow: 0 4px 14px rgba(175, 12, 21, .35);
}
.navbar_right{
    display: flex;
    align-items: center;
    gap: 16px;
}
#live_badge{
    display: flex;
    align-items: center;
    gap: 8px;
    border: none;
    background: var(--red-soft);
    color: var(--red);
    border: 1px solid rgba(175, 12, 21, .25);
    border-radius: 999px;
    padding: 9px 16px;
    font-size: 13px;
    font-weight: bold;
    cursor: pointer;
    white-space: nowrap;
}
.live_dot{
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--red);
    animation: blink 1.4s ease-in-out infinite;
}
@keyframes blink{
    50%{ opacity: .25; }
}
.amesat_mark{
    height: 38px;
    mix-blend-mode: multiply;
    opacity: .9;
}
.logout_btn{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border: 1px solid var(--line);
    background: #fff;
    color: var(--muted);
    border-radius: 999px;
    cursor: pointer;
    transition: border-color .15s ease, color .15s ease;
}
.logout_btn:hover{
    border-color: var(--red);
    color: var(--red);
}

/* ------------------------------- Génériques ------------------------------ */
.card{
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}
.btn{
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: none;
    border-radius: 999px;
    padding: 13px 26px;
    font-size: 15px;
    font-weight: bold;
    cursor: pointer;
    background-color: #EFEAE5;
    color: var(--ink);
    transition: transform .15s ease, box-shadow .15s ease, opacity .15s ease;
}
.btn:hover{
    transform: translateY(-1px);
}
.btn:active{
    opacity: .75;
    transform: none;
}
.btn.primary{
    background: linear-gradient(135deg, var(--red), var(--red-dark));
    color: white;
    box-shadow: 0 6px 18px rgba(175, 12, 21, .3);
}
.btn.ghost{
    background: var(--card);
    border: 1.5px solid var(--line);
    color: var(--ink);
}
.btn.ghost:hover{
    border-color: var(--red);
    color: var(--red-dark);
}
.btn.danger{
    background-color: var(--ink);
    color: white;
}
.section_head{
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin: 14px 0 30px;
    gap: 20px;
    flex-wrap: wrap;
}
.section_kicker{
    color: var(--red);
    text-transform: uppercase;
    letter-spacing: 3px;
    font-size: 11.5px;
    font-weight: bold;
    margin-bottom: 6px;
}
.section_head h2{
    font-size: 32px;
    letter-spacing: .5px;
    line-height: 1;
}
.head_actions{
    display: flex;
    gap: 12px;
    align-items: center;
}
.comp_select{
    height: 46px;
    outline: none;
    background-color: var(--card);
    color: var(--ink);
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: 0 18px;
    cursor: pointer;
    font-weight: bold;
    box-shadow: var(--shadow);
}
.empty{
    color: var(--muted);
    padding: 26px 0;
}

/* -------------------------------- Avatars -------------------------------- */
.avatar{
    width: 54px;
    height: 54px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}
div.avatar{
    display: flex;
    align-items: center;
    justify-content: center;
}
.avatar_initials{
    background: linear-gradient(135deg, #F1E8E0, #E2D5CA);
    color: var(--red-dark);
    font-weight: bolder;
    font-size: 16px;
}
.avatar.small{
    width: 38px;
    height: 38px;
    font-size: 13px;
}
.initials{
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(255, 255, 255, .92);
    font-weight: bolder;
}

/* --------------------------------- Icônes -------------------------------- */
.icon{
    vertical-align: -3px;
    flex-shrink: 0;
}
.summary_title .icon{
    vertical-align: -6px;
    color: var(--red);
}

/* ------------------------------ Match en cours --------------------------- */
#game_started{
    display: none;
    flex-direction: column;
    justify-content: center;
    min-height: calc(100vh - 200px);
    margin-top: 10px;
}
#match_context{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: var(--muted);
    font-size: 13.5px;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 24px;
}
.scoreboard{
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 28px;
    align-items: stretch;
}
.game_team{
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 38px 20px;
}
.game_team_name{
    font-size: 48px;
    font-weight: bold;
    letter-spacing: 2px;
}
.logo_container{
    margin: 24px 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    width: 165px;
    height: 165px;
    border-width: 9px;
    border-style: solid;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(31, 28, 27, .12);
}
.game_team_logo{
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}
div.game_team_logo.initials{
    background: none;
    font-size: 36px;
}
.game_score{
    font-size: 110px;
    font-weight: bolder;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}
.points{
    font-size: 24px;
    font-weight: bolder;
    margin-top: 6px;
    text-transform: uppercase;
    letter-spacing: 3px;
}
.options{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 22px;
    padding: 30px 36px;
}
.options_label{
    text-transform: uppercase;
    letter-spacing: 2.5px;
    font-size: 12px;
    color: var(--muted);
    font-weight: bold;
}
.options_buttons{
    display: flex;
    gap: 46px;
}
.team_buttons{
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.team_buttons p{
    width: 56px;
    height: 56px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 26px;
    font-weight: bolder;
    cursor: pointer;
    background-color: var(--red-dark);
    box-shadow: var(--shadow);
    transition: transform .12s ease, opacity .12s ease;
    user-select: none;
}
.team_buttons p:hover{
    transform: scale(1.07);
}
.team_buttons p:active{
    opacity: .7;
    transform: none;
}
#points-ajouter{
    width: 160px;
    height: 46px;
    outline: none;
    background: linear-gradient(135deg, var(--red), var(--red-dark));
    color: white;
    border: none;
    border-radius: 999px;
    padding: 0 18px;
    font-weight: bold;
    cursor: pointer;
    box-shadow: 0 6px 18px rgba(175, 12, 21, .3);
}
/* Les options du menu déroulant s'affichent sur fond clair : texte foncé obligatoire */
#points-ajouter option{
    background-color: var(--card);
    color: var(--ink);
    font-weight: bold;
}
#live_best_scorer{
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 15px;
    color: var(--ink);
    min-height: 46px;
    text-align: center;
}
#live_best_scorer small{
    display: block;
    color: var(--muted);
}
#live_best_scorer strong{
    margin-right: 5px;
}
.match_actions{
    display: flex;
    justify-content: center;
    gap: 14px;
    margin-top: 40px;
}

/* ------------------------------ Sous-pages ------------------------------- */
.page_head{
    display: flex;
    align-items: center;
    gap: 18px;
    margin: 14px 0 22px;
}
.back_btn{
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: 1.5px solid var(--line);
    background: var(--card);
    color: var(--ink);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: var(--shadow);
    flex-shrink: 0;
    transition: border-color .15s ease, color .15s ease, transform .15s ease;
}
.back_btn:hover{
    border-color: var(--red);
    color: var(--red);
    transform: translateX(-2px);
}
.page_hint{
    color: var(--muted);
    margin: -8px 0 24px;
}
.form_card{
    padding: 28px 30px;
}
.form_card h4{
    margin-bottom: 18px;
    font-size: 18px;
}
.team_edit_grid{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 28px;
    align-items: start;
}
/* Fiche équipe en lecture (visiteur) : une seule carte, centrée */
.team_edit_grid.readonly{
    grid-template-columns: minmax(0, 720px);
    justify-content: center;
}

/* Cartes joueurs (vue visiteur) */
.player_cards{
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
    gap: 16px;
    margin-top: 4px;
}
.player_card{
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 10px;
    padding: 18px 12px 16px;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: var(--bg);
    transition: transform .15s ease, box-shadow .15s ease;
}
.player_card:hover{
    transform: translateY(-3px);
    box-shadow: 0 12px 24px rgba(31, 28, 27, .10);
}
.player_card_photo{
    width: 84px;
    height: 84px;
    font-size: 24px;
    box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--team, var(--line));
}
.player_card_name{
    font-weight: bold;
    font-size: 13.5px;
    line-height: 1.25;
}
.player_card_class{
    font-size: 12px;
    color: var(--muted);
}
.page_grid{
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
}
.page_grid .player_pick{
    padding: 24px 14px;
    font-size: 16px;
}

/* ------------------------- Modale de fin de match ------------------------ */
.final_modal{
    text-align: center;
}
.summary_kicker{
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 3px;
    font-size: 12px;
    font-weight: bold;
}
.final_modal h3{
    font-size: 28px;
    margin: 14px 0 22px;
}
.final_score{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    font-size: 22px;
    margin-bottom: 14px;
}
.final_score span{
    font-weight: bold;
}
.final_score strong{
    font-size: 30px;
    font-variant-numeric: tabular-nums;
}
.final_best{
    color: var(--muted);
    margin-bottom: 4px;
}
.final_board{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 26px;
}
.final_side{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 22px 34px;
    border-radius: var(--radius);
    background: var(--bg);
    border: 1px solid var(--line);
    min-width: 150px;
}
.final_side.winner{
    border: 2px solid var(--red);
    background: var(--card);
    box-shadow: var(--shadow);
}
.final_logo{
    width: 64px;
    height: 64px;
    object-fit: cover;
    border-radius: 50%;
}
div.final_logo.initials{
    border-radius: 50%;
    font-size: 18px;
    background: #F1E8E0;
}
.final_team{
    font-size: 17px;
    font-weight: bold;
    letter-spacing: 1px;
}
.final_points{
    font-size: 42px;
    font-weight: bolder;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}
.summary_dash{
    font-size: 30px;
    color: var(--muted);
}
.modal_actions.centered{
    justify-content: center;
}
.detail_board{
    margin-bottom: 30px;
}

/* ----------------------------- Tableau (bracket) ------------------------- */
.bracket_header{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    margin-bottom: 24px;
    color: var(--red);
}
.bracket_title{
    font-size: 30px;
    font-weight: bolder;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--ink);
}
.champion_badge{
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: var(--gold-soft);
    color: var(--red-dark);
    border: 1px solid #EAD9B0;
    border-radius: 999px;
    padding: 8px 18px;
    font-size: 13px;
    font-weight: bold;
}
.bracket{
    display: flex;
    align-items: stretch;
    padding: 30px 28px 36px;
    overflow-x: auto;
}
.b_col{
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 580px;
    min-width: 150px;
}
.b_round_label, .b_final_badge{
    text-align: center;
    font-size: 11.5px;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 2px;
    height: 26px;
    line-height: 26px;
    margin-bottom: 10px;
}
.b_round_label{
    color: var(--muted);
}
.b_fixture{
    flex: 1;
    min-height: 300px;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    position: relative;
    border-radius: 14px;
}
.b_fixture.left{
    padding-right: 38px;
}
.b_fixture.right{
    padding-left: 38px;
}
/* Lignes de connexion : crochet vertical reliant les deux équipes + tige vers le tour suivant */
.b_fixture.left::before{
    content: '';
    position: absolute;
    right: 19px;
    width: 19px;
    top: 25%;
    bottom: 25%;
    border: 2.5px solid var(--line);
    border-left: none;
    border-radius: 0 10px 10px 0;
}
.b_fixture.left::after{
    content: '';
    position: absolute;
    right: 0;
    width: 19px;
    top: 50%;
    border-top: 2.5px solid var(--line);
}
.b_fixture.right::before{
    content: '';
    position: absolute;
    left: 19px;
    width: 19px;
    top: 25%;
    bottom: 25%;
    border: 2.5px solid var(--line);
    border-right: none;
    border-radius: 10px 0 0 10px;
}
.b_fixture.right::after{
    content: '';
    position: absolute;
    left: 0;
    width: 19px;
    top: 50%;
    border-top: 2.5px solid var(--line);
}
.b_fixture.played{
    cursor: pointer;
}
.b_node{
    display: flex;
    flex-direction: column;
    gap: 7px;
    z-index: 1;
}
.b_node.left{
    align-items: flex-start;
    text-align: left;
}
.b_node.right{
    align-items: flex-end;
    text-align: right;
}
.b_logo_wrap{
    position: relative;
    width: 86px;
    height: 86px;
    border-radius: 50%;
    background: var(--card);
    border: 3px solid var(--line);
    box-shadow: var(--shadow);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform .15s ease, border-color .15s ease;
}
.b_fixture.played:hover .b_logo_wrap,
.b_final_col.played:hover .b_final_card{
    transform: translateY(-3px);
}
.b_logo_wrap.winner{
    border-color: var(--red);
    box-shadow: 0 0 0 4px rgba(175, 12, 21, .12), var(--shadow);
}
.b_logo_wrap.loser{
    opacity: .65;
}
.b_logo_wrap.loser .b_logo{
    filter: grayscale(.6);
}
.b_logo_wrap.pending{
    border-style: dashed;
    box-shadow: none;
    background: var(--bg);
}
.b_logo{
    width: 72px;
    height: 72px;
    border-radius: 50%;
    object-fit: cover;
}
div.b_logo.initials{
    background: none;
    font-size: 20px;
}
.b_logo_wrap.pending div.b_logo.initials{
    color: var(--muted);
}
.b_score{
    position: absolute;
    bottom: -9px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--ink);
    color: white;
    border-radius: 999px;
    padding: 2px 10px;
    font-size: 12.5px;
    font-weight: bold;
    font-variant-numeric: tabular-nums;
    box-shadow: var(--shadow);
}
.winner .b_score{
    background: var(--red);
}
.b_name{
    font-size: 11px;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: .6px;
    max-width: 110px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.b_name.muted{
    color: var(--muted);
}
.b_meta{
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    gap: 6px;
    z-index: 2;
}
.b_fixture.left .b_meta{
    left: 0;
}
.b_fixture.right .b_meta{
    right: 0;
    flex-direction: row-reverse;
}
.b_play{
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: none;
    border-radius: 999px;
    padding: 7px 16px;
    background: linear-gradient(135deg, var(--red), var(--red-dark));
    color: white;
    font-size: 12.5px;
    font-weight: bold;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(175, 12, 21, .3);
    transition: transform .12s ease;
}
.b_play:hover{
    transform: scale(1.05);
}
.b_forfeit{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border: 1.5px solid var(--line);
    border-radius: 50%;
    background: var(--card);
    color: var(--muted);
    cursor: pointer;
    transition: border-color .15s ease, color .15s ease;
}
.b_forfeit:hover{
    border-color: var(--red);
    color: var(--red);
}
.b_resume{
    border: none;
    border-radius: 999px;
    padding: 7px 16px;
    background: var(--red-soft);
    border: 1px solid rgba(175, 12, 21, .3);
    color: var(--red-dark);
    font-size: 12.5px;
    font-weight: bold;
    cursor: pointer;
    animation: pulse 1.6s ease-in-out infinite;
}
.b_hint{
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: 5px 13px;
    font-size: 11.5px;
    font-weight: bold;
    color: var(--muted);
    opacity: 0;
    transition: opacity .15s ease;
    white-space: nowrap;
}
.b_fixture.played:hover .b_hint,
.b_final_col.played:hover .b_hint{
    opacity: 1;
}

/* Rencontre à venir : cliquable vers la feuille de match */
.b_fixture.upcoming, .b_final_col.upcoming{
    cursor: pointer;
}
.b_fixture.upcoming:hover .b_logo_wrap,
.b_final_col.upcoming:hover .b_final_card{
    transform: translateY(-3px);
}
.b_sheet_hint{
    padding: 5px 12px;
    border-radius: 999px;
    background: var(--bg);
    border: 1px solid var(--line);
    font-size: 11px;
    font-weight: bold;
    color: var(--muted);
    white-space: nowrap;
    opacity: 0;
    transition: opacity .15s ease, color .15s ease;
}
.b_fixture.upcoming:hover .b_sheet_hint,
.b_final_col.upcoming:hover .b_sheet_hint{
    opacity: 1;
    color: var(--red);
}

/* ----------------------- Page « Feuille de match » ----------------------- */
.sheet_banner{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(16px, 5vw, 48px);
    padding: 6px 0 28px;
}
.sheet_team{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    flex: 1;
    max-width: 230px;
}
.sheet_team_logo{
    width: clamp(96px, 22vw, 132px);
    height: clamp(96px, 22vw, 132px);
    border-radius: 50%;
    border: 4px solid var(--line);
    background: var(--card);
    box-shadow: var(--shadow);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.sheet_team_img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}
.sheet_team_img.initials{
    font-size: 30px;
    font-weight: bolder;
}
.sheet_team_name{
    font-size: clamp(16px, 4vw, 22px);
    font-weight: bolder;
    text-align: center;
    letter-spacing: .5px;
}
.sheet_vs{
    font-size: clamp(20px, 6vw, 30px);
    font-weight: 900;
    color: var(--red);
    flex: 0 0 auto;
}
.sheet_rosters{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    align-items: start;
}
.sheet_roster{
    padding: 22px 24px;
}
.sheet_roster_head{
    display: flex;
    align-items: center;
    gap: 12px;
    padding-bottom: 14px;
    margin-bottom: 14px;
    border-bottom: 2px solid var(--c, var(--red));
}
.sheet_roster_logo{
    width: 46px;
    height: 46px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}
.sheet_roster_logo.initials{
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bolder;
    border: 2px solid var(--line);
}
.sheet_roster_head > div{
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.sheet_roster_name{
    font-weight: bolder;
    font-size: 16px;
}
.sheet_roster_count{
    font-size: 12px;
    color: var(--muted);
}
.sheet_players{
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.sheet_players li{
    display: flex;
    align-items: center;
    gap: 12px;
}
@keyframes pulse{
    50%{ opacity: .55; }
}

/* Colonne centrale : la finale */
.b_final_col{
    flex: 1.1;
    min-width: 175px;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
}
.b_final_col.played{
    cursor: pointer;
}
.b_final_badge{
    background: linear-gradient(135deg, var(--red), var(--red-dark));
    color: white;
    border-radius: 999px;
    padding: 0 22px;
    margin-bottom: 10px;
    box-shadow: 0 4px 14px rgba(175, 12, 21, .3);
}
.b_final_col > .b_final_card,
.b_final_col > .b_trophy{
    margin-top: auto;
    margin-bottom: auto;
}
.b_final_card{
    position: relative;
    width: 130px;
    height: 130px;
    background: var(--card);
    border: 2.5px solid var(--line);
    border-radius: 22px;
    box-shadow: var(--shadow);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 7px;
    transition: transform .15s ease;
}
.b_final_card.winner{
    border-color: var(--red);
    box-shadow: 0 0 0 5px rgba(175, 12, 21, .1), var(--shadow-lift);
}
.b_final_card.loser{
    opacity: .65;
}
.b_final_card.pending{
    border-style: dashed;
    background: var(--bg);
    box-shadow: none;
}
.b_final_logo{
    width: 64px;
    height: 64px;
    border-radius: 50%;
    object-fit: cover;
}
.b_final_name{
    font-size: 11px;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: .6px;
    max-width: 110px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.b_trophy{
    color: var(--red);
    filter: drop-shadow(0 6px 14px rgba(175, 12, 21, .25));
}
.b_final_col .b_meta{
    position: static;
    transform: none;
    margin-top: 14px;
    justify-content: center;
}

/* Logos miniatures réutilisés (sélection d'équipes, tirage manuel) */
.fixture_logo{
    width: 32px;
    height: 32px;
    border-radius: 8px;
    object-fit: cover;
    flex-shrink: 0;
}
div.fixture_logo.initials{
    font-size: 11px;
    border-radius: 8px;
    background: #F1E8E0;
    color: var(--red-dark);
}

/* ------------------- Modale de création de compétition ------------------- */
.field_label{
    font-weight: bold;
    font-size: 14px;
    margin: 4px 0 10px;
}
.field_label small{
    color: var(--muted);
    font-weight: normal;
}
.team_check_grid{
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 10px;
    margin-bottom: 16px;
}
.team_check{
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 9px 11px;
    border: 1px solid var(--line);
    border-radius: 12px;
    cursor: pointer;
    font-size: 14px;
    font-weight: bold;
    transition: border-color .12s ease, background-color .12s ease;
}
.team_check:has(input:checked){
    border-color: var(--red);
    background: var(--red-soft);
}
.team_check input{
    accent-color: var(--red);
}
.mode_row{
    display: flex;
    gap: 12px;
    margin-bottom: 6px;
}
.mode_choice{
    flex: 1;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 14px;
    border: 1px solid var(--line);
    border-radius: 12px;
    cursor: pointer;
    font-weight: bold;
    font-size: 14px;
    transition: border-color .12s ease, background-color .12s ease;
}
.mode_choice:has(input:checked){
    border-color: var(--red);
    background: var(--red-soft);
}
.mode_choice input{
    accent-color: var(--red);
}
.mode_choice span{
    display: flex;
    align-items: center;
    gap: 8px;
}
.draw_row{
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}
.draw_num{
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--red);
    color: white;
    font-size: 13px;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.draw_row select{
    flex: 1;
    height: 42px;
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 0 12px;
    font-weight: bold;
    background: var(--bg);
    outline-color: var(--red-dark);
    cursor: pointer;
}
.draw_vs{
    color: var(--muted);
    font-size: 13px;
    font-weight: bold;
}

/* -------------------------------- Équipes -------------------------------- */
#teams_grid{
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(195px, 1fr));
    gap: 22px;
}
.mini_team_card{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 28px 15px;
    border-radius: var(--radius);
    cursor: pointer;
    box-shadow: var(--shadow);
    transition: transform .15s ease, box-shadow .15s ease;
}
.mini_team_card:hover{
    transform: translateY(-5px);
    box-shadow: var(--shadow-lift);
}
.mini_team_card span{
    font-size: 20px;
    font-weight: bold;
    letter-spacing: 1px;
}
.mini_team_logo{
    width: 82px;
    height: 82px;
    object-fit: cover;
    border-radius: 14px;
}
div.mini_team_logo.initials{
    font-size: 24px;
    border-radius: 14px;
}

/* ------------------------------- Classement ------------------------------ */
.stats_columns{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 28px;
    align-items: start;
}
.stats_block{
    padding: 28px 30px;
    overflow-x: auto; /* le tableau scrolle dans la carte au lieu de déborder la page */
}
.stats_block h3{
    margin-bottom: 18px;
    font-size: 20px;
}
.stats_table{
    width: 100%;
    border-collapse: collapse;
}
.stats_table th{
    text-align: left;
    color: var(--muted);
    font-size: 11.5px;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 8px 10px;
    border-bottom: 2px solid var(--red);
}
.stats_table td{
    padding: 10px;
    border-bottom: 1px solid var(--line);
}
.stats_table tr:last-child td{
    border-bottom: none;
}
.stats_table tr.gold td{
    background-color: var(--gold-soft);
}
.player_cell{
    display: flex;
    align-items: center;
    gap: 12px;
}

/* --------------------------------- Modale -------------------------------- */
#modal_overlay{
    position: fixed;
    inset: 0;
    background: rgba(31, 28, 27, .5);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 100;
}
#modal_box{
    background: var(--card);
    border-radius: var(--radius);
    padding: 32px;
    width: min(580px, 92vw);
    max-height: 86vh;
    overflow-y: auto;
    box-shadow: var(--shadow-lift);
}
#modal_box h3{
    font-size: 24px;
    margin-bottom: 10px;
}
#modal_box h4{
    margin: 22px 0 10px;
}
.modal_hint{
    color: var(--muted);
    margin-bottom: 16px;
}
.modal_actions{
    display: flex;
    gap: 12px;
    margin-top: 22px;
}
.modal_form label,
.form_card > label,
.form_card .color_row label{
    display: block;
    font-weight: bold;
    font-size: 14px;
    margin-bottom: 14px;
}
.modal_form input:not([type="color"]),
.form_card input:not([type="color"]):not([type="checkbox"]):not([type="radio"]){
    width: 100%;
    margin-top: 6px;
    padding: 11px 14px;
    border: 1px solid var(--line);
    border-radius: 12px;
    font-size: 15px;
    outline-color: var(--red-dark);
    background: var(--bg);
}
.color_row{
    display: flex;
    gap: 20px;
}
.color_row input[type="color"]{
    display: block;
    margin-top: 6px;
    width: 62px;
    height: 38px;
    border: 1px solid var(--line);
    border-radius: 10px;
    cursor: pointer;
    background: var(--card);
}

/* Choix du marqueur / forfait */
.player_grid{
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 12px;
}
.player_pick{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 18px 12px;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: var(--card);
    font-size: 15px;
    font-weight: bold;
    cursor: pointer;
    transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
.player_pick:hover{
    transform: translateY(-3px);
    box-shadow: var(--shadow);
    border-color: var(--red);
}
.player_pick.no_player{
    color: var(--muted);
}
.pick_points{
    font-size: 12px;
    font-weight: bold;
    color: var(--red);
    background: var(--red-soft);
    border-radius: 999px;
    padding: 2px 10px;
}

/* Liste des joueurs (gestion équipe) */
.player_list{
    list-style: none;
}
.player_list li{
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 9px 4px;
    border-bottom: 1px solid var(--line);
}
.player_list li span{
    flex: 1;
}
.photo_btn{
    cursor: pointer;
    opacity: .65;
    transition: opacity .15s ease;
}
.photo_btn:hover{
    opacity: 1;
}
.remove_player{
    border: none;
    background: none;
    color: var(--red);
    cursor: pointer;
    padding: 4px 8px;
}
.player_form{
    display: flex;
    gap: 10px;
    margin-top: 16px;
    align-items: center;
}
.player_form input[name="player_name"]{
    flex: 1;
    padding: 11px 14px;
    border: 1px solid var(--line);
    border-radius: 12px;
    font-size: 15px;
    outline-color: var(--red-dark);
    background: var(--bg);
}
.file_label{
    white-space: nowrap;
}

/* Détail d'un match */
.detail_columns{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 25px;
    margin-top: 15px;
}
.scorer_list{
    list-style: none;
}
.scorer_list li{
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 7px 0;
    border-bottom: 1px solid var(--line);
}
.scorer_list li:last-child{
    border-bottom: none;
}
.scorer_list li span{
    flex: 1;
}

/* ---------------------------------- Toast -------------------------------- */
#toast{
    position: fixed;
    bottom: 28px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--ink);
    color: white;
    padding: 13px 28px;
    border-radius: 999px;
    font-size: 15px;
    z-index: 200;
    box-shadow: var(--shadow-lift);
}
#toast.error{
    background: var(--red);
}

/* ------------------------------- Responsive ------------------------------ */
@media screen and (max-width: 1230px){
    .brand_tagline{
        display: none;
    }
    .game_team_name{
        font-size: 36px;
    }
    .game_score{
        font-size: 80px;
    }
}
@media screen and (max-width: 980px){
    .navbar_inner{
        flex-wrap: wrap;
        justify-content: center;
        padding: 10px 16px;
    }
    .amesat_mark{
        display: none;
    }
    .page{
        padding: 24px 16px 60px;
    }
    .scoreboard{
        grid-template-columns: 1fr;
    }
    .options{
        order: 3;
    }
    .stats_columns, .detail_columns, .team_edit_grid, .sheet_rosters{
        grid-template-columns: 1fr;
    }
    .b_sheet_hint{
        opacity: 1; /* indice toujours visible sur mobile (pas de survol) */
    }
    /* Tableaux de classement resserrés pour tenir sur petit écran */
    .stats_block{
        padding: 22px 16px;
    }
    .stats_table th, .stats_table td{
        padding: 8px 6px;
    }
    .stats_table th{
        font-size: 10px;
        letter-spacing: .5px;
    }
    .stats_table td{
        font-size: 13px;
    }
    .bracket{
        flex-direction: column;
        gap: 30px;
    }
    .b_col{
        min-height: unset;
        flex-direction: column;
        align-items: center;
        gap: 16px;
    }
    .b_round_label{
        width: 100%;
    }
    /* Chaque rencontre devient une carte « Équipe A  VS  Équipe B » */
    .b_fixture{
        flex: 0 0 auto;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        flex-wrap: wrap;
        gap: 12px;
        padding: 14px 12px !important;
        min-height: unset;
        width: 100%;
        max-width: 380px;
        background: var(--bg);
        border: 1px solid var(--line);
        border-radius: 16px;
    }
    .b_node{
        order: 1;
        flex: 1 1 0;
        min-width: 0;
    }
    .b_node.left, .b_node.right{
        align-items: center;
        text-align: center;
    }
    /* Les deux équipes ont la même classe : on cible la 2ᵉ par sa position
       pour la placer après le « VS » (order 2) */
    .b_fixture .b_node:nth-child(2){
        order: 3;
    }
    /* « VS » central, à la place des crochets de connexion (override des règles
       spécifiques .left/.right du bracket desktop) */
    .b_fixture.left::after, .b_fixture.right::after{ display: none; }
    .b_fixture.left::before, .b_fixture.right::before{
        content: 'VS';
        display: flex;
        align-items: center;
        justify-content: center;
        position: static;
        inset: auto;
        top: auto;
        right: auto;
        bottom: auto;
        left: auto;
        order: 2;
        width: auto;
        height: auto;
        border: none;
        border-radius: 0;
        flex: 0 0 auto;
        font-weight: 800;
        font-size: 13px;
        letter-spacing: 1px;
        color: var(--red);
    }
    .b_meta{
        position: static;
        transform: none;
        order: 4;
        flex-basis: 100%;
        display: flex;
        justify-content: center;
    }
    .b_hint{
        display: none;
    }
    .b_final_col > .b_final_card,
    .b_final_col > .b_trophy{
        margin: 8px 0;
    }
    .final_board{
        gap: 14px;
    }
    .final_side{
        padding: 16px 18px;
        min-width: 120px;
    }
    .nav_btn{
        padding: 10px 13px;
    }
}

/* ===================== Fiche joueur : nom + classe ======================= */
.player_meta{
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}
.player_meta .player_name{
    flex: none;
    font-weight: bold;
}
.player_meta .player_class{
    font-size: 12.5px;
    color: var(--muted);
}
.player_class_input{
    border: 1px solid transparent;
    border-radius: 8px;
    padding: 3px 7px;
    margin-left: -7px;
    font-size: 12.5px;
    color: var(--muted);
    background: transparent;
    outline-color: var(--red-dark);
    transition: border-color .15s ease, background-color .15s ease;
}
.player_class_input:hover{
    border-color: var(--line);
}
.player_class_input:focus{
    border-color: var(--red);
    background: var(--bg);
    color: var(--ink);
}
.player_form{
    flex-wrap: wrap;
}
.player_form input[name="player_class"]{
    flex: 1;
    min-width: 150px;
    padding: 11px 14px;
    border: 1px solid var(--line);
    border-radius: 12px;
    font-size: 15px;
    outline-color: var(--red-dark);
    background: var(--bg);
}

/* ===================== Intro cinématique d'avant-match =================== */
#intro_overlay{
    position: fixed;
    inset: 0;
    z-index: 400;
    background: #fff;
    overflow: hidden;
}
#intro_overlay.closing{
    animation: introClose .45s ease forwards;
}
@keyframes introClose{
    to{ opacity: 0; }
}
.intro_skip{
    position: absolute;
    bottom: 28px;
    right: 34px;
    z-index: 10;
    border: 1.5px solid var(--line);
    background: rgba(255, 255, 255, .82);
    color: var(--ink);
    border-radius: 999px;
    padding: 10px 22px;
    font-weight: bold;
    font-size: 14px;
    cursor: pointer;
    backdrop-filter: blur(4px);
    transition: border-color .15s ease, color .15s ease;
}
.intro_skip:hover{
    border-color: var(--red);
    color: var(--red);
}
.intro_nav{
    position: absolute;
    bottom: 26px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
    display: flex;
    align-items: center;
    gap: 18px;
}
.intro_prev,
.intro_next{
    height: 46px;
    border-radius: 999px;
    font-weight: bold;
    cursor: pointer;
    transition: transform .15s ease, border-color .15s ease, color .15s ease, opacity .15s ease;
}
.intro_prev{
    width: 46px;
    font-size: 22px;
    line-height: 1;
    border: 1.5px solid var(--line);
    background: rgba(255, 255, 255, .85);
    color: var(--ink);
    backdrop-filter: blur(4px);
}
.intro_prev:hover{
    border-color: var(--red);
    color: var(--red);
}
.intro_prev:disabled{
    opacity: .4;
    cursor: default;
}
.intro_next{
    padding: 0 26px;
    font-size: 15px;
    border: none;
    background: linear-gradient(135deg, var(--red), var(--red-dark));
    color: #fff;
    box-shadow: 0 6px 18px rgba(175, 12, 21, .3);
}
.intro_next:hover{
    transform: translateY(-1px);
}
.intro_dots{
    display: flex;
    gap: 8px;
}
.intro_dot{
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--line);
    transition: background-color .2s ease, transform .2s ease;
}
.intro_dot.on{
    background: var(--red);
    transform: scale(1.25);
}
.intro_slide{
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 40px 100px;
    opacity: 0;
    pointer-events: none;
    transition: opacity .6s ease;
}
.intro_slide.active{
    opacity: 1;
    pointer-events: auto;
}

/* Ronds décoratifs dans les coins, teintés selon le slide */
.intro_blob{
    position: absolute;
    border-radius: 50%;
    opacity: .92;
}
.intro_blob.b1{ top: -75px; left: -75px; width: 220px; height: 220px; background: var(--accent); }
.intro_blob.b2{ top: -95px; right: -95px; width: 265px; height: 265px; border: 46px solid var(--accent); }
.intro_blob.b3{ bottom: -95px; left: -95px; width: 245px; height: 245px; border: 44px solid var(--accent); }
.intro_blob.b4{ bottom: -75px; right: -75px; width: 215px; height: 215px; background: var(--accent); }

/* ----- Slide VS ----- */
.intro_amesat{
    height: clamp(72px, 12vh, 120px);
    object-fit: contain;
    mix-blend-mode: multiply;
    opacity: 0;
}
.intro_slide.active .intro_amesat{
    animation: introDrop .8s ease forwards;
}
@keyframes introDrop{
    from{ opacity: 0; transform: translateY(-32px); }
    to{ opacity: 1; transform: none; }
}
.intro_presente{
    margin-top: 16px;
    font-size: clamp(20px, 3vw, 34px);
    font-weight: bold;
    letter-spacing: 16px;
    padding-left: 16px;
    color: var(--ink);
    opacity: 0;
}
.intro_slide.active .intro_presente{
    animation: introFadeUp .7s ease .35s forwards;
}
.intro_sbc{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    margin-top: clamp(16px, 2.6vh, 28px);
    opacity: 0;
}
.intro_slide.active .intro_sbc{
    animation: introPop .7s cubic-bezier(.2, .8, .3, 1.3) .6s forwards;
}
.intro_sbc_logo{
    width: clamp(86px, 11vw, 128px);
    height: clamp(86px, 11vw, 128px);
    border-radius: 50%;
    object-fit: cover;
    object-position: center 30%;
    background: #fff;
    border: 4px solid var(--red);
    box-shadow: 0 10px 30px rgba(175, 12, 21, .3);
}
.intro_sbc_name{
    font-size: clamp(15px, 2vw, 22px);
    font-weight: bolder;
    letter-spacing: 3px;
}
.intro_sbc_name em{
    font-style: normal;
    color: var(--red);
}
.intro_vs_row{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(30px, 6vw, 90px);
    margin-top: clamp(20px, 3vh, 42px);
}
.intro_vs_team{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
    opacity: 0;
}
.intro_slide.active .side_left{
    animation: introInLeft .8s cubic-bezier(.2, .8, .3, 1.1) .9s forwards;
}
.intro_slide.active .side_right{
    animation: introInRight .8s cubic-bezier(.2, .8, .3, 1.1) .9s forwards;
}
@keyframes introInLeft{
    from{ opacity: 0; transform: translateX(-80px); }
    to{ opacity: 1; transform: none; }
}
@keyframes introInRight{
    from{ opacity: 0; transform: translateX(80px); }
    to{ opacity: 1; transform: none; }
}
.intro_vs_logo{
    width: clamp(120px, 16vw, 184px);
    height: clamp(120px, 16vw, 184px);
    border-radius: 50%;
    border: 5px solid;
    padding: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    box-shadow: var(--shadow-lift);
}
.intro_vs_img{
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
}
div.intro_vs_img.initials{
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 44px;
    background: #F1E8E0;
    color: var(--red-dark);
}
.intro_vs_name{
    font-size: clamp(18px, 2.4vw, 28px);
    font-weight: bold;
    letter-spacing: 1px;
    text-align: center;
    max-width: 220px;
}
.intro_vs_mark{
    font-size: clamp(46px, 8vw, 98px);
    font-weight: 900;
    color: var(--red);
    opacity: 0;
}
.intro_slide.active .intro_vs_mark{
    animation: introPunch .6s cubic-bezier(.2, .8, .3, 1.4) 1.3s forwards;
}
@keyframes introPunch{
    0%{ opacity: 0; transform: scale(2.4); }
    60%{ opacity: 1; transform: scale(.9); }
    100%{ opacity: 1; transform: scale(1); }
}
.intro_context{
    margin-top: clamp(28px, 5vh, 56px);
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 3px;
    font-weight: bold;
    font-size: clamp(12px, 1.6vw, 16px);
    text-align: center;
    opacity: 0;
}
.intro_slide.active .intro_context{
    animation: introFadeUp .7s ease 1.6s forwards;
}
@keyframes introFadeUp{
    from{ opacity: 0; transform: translateY(16px); }
    to{ opacity: 1; transform: none; }
}

/* ----- Slides effectifs ----- */
.intro_watermark{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -48%);
    width: 780px;
    height: 780px;
    max-width: 82vw;
    max-height: 82vh;
    object-fit: cover;
    opacity: .07;
    filter: grayscale(.2);
    pointer-events: none;
}
.intro_roster_title{
    position: relative;
    z-index: 2;
    font-size: clamp(34px, 6vw, 64px);
    font-weight: 900;
    letter-spacing: 4px;
    text-transform: uppercase;
    margin-bottom: clamp(28px, 5vh, 52px);
    opacity: 0;
}
.intro_slide.active .intro_roster_title{
    animation: introFadeUp .7s ease .1s forwards;
}
.intro_roster{
    position: relative;
    z-index: 2;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: center;
    gap: 26px clamp(28px, 4vw, 60px);
    max-width: 1120px;
}
.intro_player{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    width: 204px;
    opacity: 0;
}
/* Décalage vertical alterné : rappelle la disposition « constellation » du modèle */
.intro_player:nth-child(even){
    margin-top: clamp(20px, 5vh, 56px);
}
.intro_slide.active .intro_player{
    animation: introPop .6s cubic-bezier(.2, .8, .3, 1.2) forwards;
    animation-delay: var(--d);
}
@keyframes introPop{
    from{ opacity: 0; transform: translateY(28px) scale(.85); }
    to{ opacity: 1; transform: none; }
}
.intro_avatar_ring{
    position: relative;
    width: 176px;
    height: 176px;
    display: flex;
    align-items: center;
    justify-content: center;
}
/* Deux arcs décoratifs statiques laissant deux ouvertures (comme la maquette Canva) */
.intro_avatar_ring::before{
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: conic-gradient(
        var(--accent) 0 132deg,
        transparent 132deg 180deg,
        var(--accent) 180deg 312deg,
        transparent 312deg 360deg
    );
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 5px), #000 calc(100% - 5px));
            mask: radial-gradient(farthest-side, transparent calc(100% - 5px), #000 calc(100% - 5px));
    transform: rotate(-35deg);
}
.intro_avatar{
    width: 150px;
    height: 150px;
    border-radius: 50%;
    object-fit: cover;
}
div.intro_avatar.avatar_initials{
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 44px;
}
.intro_player_name{
    font-size: clamp(15px, 1.7vw, 20px);
    font-weight: bold;
    text-align: center;
}
.intro_player_class{
    font-size: clamp(13px, 1.4vw, 16px);
    color: var(--muted);
    text-align: center;
}

@media screen and (max-width: 760px){
    .intro_player:nth-child(even){ margin-top: 0; }
    .intro_player{ width: 140px; }
    .intro_avatar_ring{ width: 116px; height: 116px; }
    .intro_avatar{ width: 96px; height: 96px; }
    .intro_watermark{ display: none; }
}

/* ====== Transition « Le match commence » (intro → tableau de score) ======= */
/* Deux traits horizontaux balaient l'écran, les noms d'équipe glissent de */
/* part et d'autre d'un « VS » central. Aucun clignotement.                  */
.match_glitch{
    position: absolute;
    inset: 0;
    z-index: 20;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 30px;
    background: #fff;
    overflow: hidden;
    animation: mgFade .3s ease both;
}
@keyframes mgFade{
    from{ opacity: 0; }
    to{ opacity: 1; }
}

/* Surtitre, encadré de deux courts traits horizontaux */
.mg_caption{
    display: flex;
    align-items: center;
    gap: 18px;
    font-size: clamp(12px, 2vw, 16px);
    font-weight: bold;
    letter-spacing: .5em;
    text-transform: uppercase;
    color: var(--ink);
    padding-left: .5em;
    opacity: 0;
    animation: mgCaption .55s ease .15s both;
}
.mg_caption::before,
.mg_caption::after{
    content: '';
    width: clamp(28px, 6vw, 60px);
    height: 2px;
    background: var(--ink);
    opacity: .45;
}
@keyframes mgCaption{
    from{ opacity: 0; transform: translateY(8px); }
    to{ opacity: 1; transform: none; }
}

/* Ligne des équipes : nom · VS · nom */
.mg_row{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(16px, 4vw, 48px);
    font-weight: 900;
    text-transform: uppercase;
    font-size: clamp(26px, 6vw, 66px);
    line-height: 1;
}
.mg_team{
    position: relative;
    color: var(--c);
    white-space: nowrap;
    text-shadow: 0 1px 0 rgba(0, 0, 0, .06);
}
/* Trait horizontal qui se déploie sous chaque nom, à sa couleur */
.mg_team::after{
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: -14px;
    height: 4px;
    background: var(--c);
    transform: scaleX(0);
    animation: mgUnderline .45s ease .55s both;
}
.mg_left{
    text-align: right;
    animation: mgFromLeft .6s cubic-bezier(.2, .8, .2, 1) .1s both;
}
.mg_right{
    text-align: left;
    animation: mgFromRight .6s cubic-bezier(.2, .8, .2, 1) .1s both;
}
.mg_left::after{ transform-origin: right; }
.mg_right::after{ transform-origin: left; }
@keyframes mgFromLeft{
    from{ opacity: 0; transform: translateX(-70px); }
    to{ opacity: 1; transform: none; }
}
@keyframes mgFromRight{
    from{ opacity: 0; transform: translateX(70px); }
    to{ opacity: 1; transform: none; }
}
@keyframes mgUnderline{
    to{ transform: scaleX(1); }
}
.mg_vs{
    font-size: clamp(15px, 3vw, 28px);
    font-weight: 900;
    color: #fff;
    background: var(--red);
    padding: 7px 15px;
    border-radius: 8px;
    opacity: 0;
    animation: mgVs .5s ease .35s both;
}
@keyframes mgVs{
    0%{ opacity: 0; transform: scale(.6) rotate(-8deg); }
    60%{ transform: scale(1.12) rotate(0); }
    100%{ opacity: 1; transform: scale(1); }
}

/* Grand trait horizontal qui traverse l'écran sous la ligne des équipes */
.mg_bar{
    width: min(86vw, 1080px);
    height: 3px;
    background: linear-gradient(to right, transparent, var(--ink) 18%, var(--ink) 82%, transparent);
    transform: scaleX(0);
    transform-origin: center;
    animation: mgSweep .7s cubic-bezier(.6, 0, .2, 1) .15s both;
}
@keyframes mgSweep{
    to{ transform: scaleX(1); }
}

@media (prefers-reduced-motion: reduce){
    .match_glitch,
    .mg_caption,
    .mg_team,
    .mg_team::after,
    .mg_left,
    .mg_right,
    .mg_vs,
    .mg_bar{
        animation-duration: .01ms !important;
    }
    .mg_team::after,
    .mg_bar{ transform: scaleX(1); }
}

/* ===================== Écran de résultat (fin de match) =================== */
#result_overlay{
    position: fixed;
    inset: 0;
    z-index: 500;
    background: #fff;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 32px;
    opacity: 0;
    transition: opacity .4s ease;
}
#result_overlay.show{ opacity: 1; }
#result_overlay.closing{ opacity: 0; }

.rv_inner{
    position: relative;
    z-index: 2;
    width: min(94vw, 720px);
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}
/* Révélation en cascade des blocs */
.rv_kicker,
.rv_trophy,
.rv_title,
.rv_board,
.rv_mvp,
.rv_actions{
    opacity: 0;
    transform: translateY(24px);
    transition: opacity .55s ease, transform .55s cubic-bezier(.2, .8, .2, 1);
}
#result_overlay.show .rv_kicker{ opacity: 1; transform: none; transition-delay: .05s; }
#result_overlay.show .rv_trophy{ opacity: 1; transform: none; transition-delay: .15s; }
#result_overlay.show .rv_title{ opacity: 1; transform: none; transition-delay: .3s; }
#result_overlay.show .rv_board{ opacity: 1; transform: none; transition-delay: .45s; }
#result_overlay.show .rv_mvp{ opacity: 1; transform: none; transition-delay: .68s; }
#result_overlay.show .rv_actions{ opacity: 1; transform: none; transition-delay: .85s; }

.rv_kicker{
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 4px;
    font-size: 12px;
    font-weight: bold;
    margin-bottom: 18px;
}
.rv_trophy{
    width: 96px;
    height: 96px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    background: var(--accent);
    box-shadow: 0 16px 38px color-mix(in srgb, var(--accent) 45%, transparent);
}
#result_overlay.show .rv_trophy{ animation: rvTrophyPulse 2.4s ease-in-out 1s infinite; }
@keyframes rvTrophyPulse{
    0%, 100%{ box-shadow: 0 16px 38px color-mix(in srgb, var(--accent) 45%, transparent); }
    50%{ box-shadow: 0 16px 48px color-mix(in srgb, var(--accent) 70%, transparent); }
}
.rv_title{
    font-size: clamp(26px, 5vw, 46px);
    font-weight: 900;
    line-height: 1.05;
    margin: 18px 0 30px;
}
.rv_board{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(14px, 4vw, 40px);
}
.rv_side{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 22px clamp(16px, 4vw, 40px);
    border-radius: 20px;
    background: var(--bg);
    border: 1px solid var(--line);
    min-width: clamp(130px, 30vw, 190px);
    transition: transform .3s ease;
}
.rv_side.win{
    background: #fff;
    border: 2px solid var(--accent);
    box-shadow: var(--shadow-lift);
    transform: scale(1.06);
}
.rv_side.lose{ opacity: .6; }
.rv_logo{
    width: 78px;
    height: 78px;
    border-radius: 50%;
    border: 3px solid;
    padding: 3px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.rv_logo_img{
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
}
div.rv_logo_img.initials{
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    background: #F1E8E0;
}
.rv_team{
    font-size: clamp(14px, 2vw, 18px);
    font-weight: bold;
    letter-spacing: 1px;
    max-width: 200px;
}
.rv_points{
    font-size: clamp(40px, 8vw, 62px);
    font-weight: 900;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}
.rv_dash{
    font-size: 34px;
    color: var(--muted);
    font-weight: bold;
}

/* MVP mis en exergue */
.rv_mvp{
    position: relative;
    display: flex;
    align-items: center;
    gap: 22px;
    margin-top: 34px;
    padding: 20px 32px;
    background: var(--gold-soft);
    border: 1px solid rgba(201, 150, 46, .25);
    border-radius: 20px;
    overflow: hidden;
}
.rv_mvp_glow{
    position: absolute;
    top: -50%;
    left: -40%;
    width: 55%;
    height: 200%;
    background: linear-gradient(115deg, transparent, rgba(255, 255, 255, .9), transparent);
    transform: skewX(-18deg);
    pointer-events: none;
    animation: rvShine 3s ease-in-out 1.2s infinite;
}
@keyframes rvShine{
    0%{ left: -40%; }
    55%, 100%{ left: 150%; }
}
.rv_mvp_ring{
    position: relative;
    width: 96px;
    height: 96px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
.rv_mvp_ring::before{
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: conic-gradient(from 0deg, var(--accent), var(--gold), #fff, var(--accent));
    animation: rvSpin 5s linear infinite;
}
.rv_mvp_ring::after{
    content: '';
    position: absolute;
    inset: 4px;
    border-radius: 50%;
    background: var(--gold-soft);
}
@keyframes rvSpin{ to{ transform: rotate(360deg); } }
.rv_mvp_photo{
    position: relative;
    z-index: 1;
    width: 82px;
    height: 82px;
    border-radius: 50%;
    object-fit: cover;
}
div.rv_mvp_photo.avatar_initials{
    display: flex;
    align-items: center;
    justify-content: center;
    background: #F1E8E0;
    color: var(--red-dark);
    font-weight: bolder;
    font-size: 26px;
}
.rv_mvp_text{
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
    text-align: left;
}
.rv_mvp_text small{
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: var(--gold);
    text-transform: uppercase;
    letter-spacing: 2px;
    font-weight: bold;
    font-size: 11px;
}
.rv_mvp_text strong{ font-size: 22px; }
.rv_mvp_text span{
    color: var(--red);
    font-size: 15px;
    font-weight: bold;
}
.rv_actions{
    display: flex;
    gap: 14px;
    margin-top: 36px;
    flex-wrap: wrap;
    justify-content: center;
}

/* Confettis (sur victoire) */
.rv_confetti_layer{
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 1;
}
.rv_confetti{
    position: absolute;
    top: -24px;
    width: 9px;
    height: 15px;
    border-radius: 2px;
    opacity: 0;
    animation-name: rvConfetti;
    animation-timing-function: ease-in;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
}
@keyframes rvConfetti{
    0%{ transform: translateY(-24px) rotate(0); opacity: 0; }
    8%{ opacity: 1; }
    100%{ transform: translateY(102vh) rotate(560deg); opacity: .85; }
}

@media (max-width: 560px){
    .rv_mvp{ flex-direction: column; text-align: center; gap: 14px; }
    .rv_mvp_text{ text-align: center; align-items: center; }
}
@media (prefers-reduced-motion: reduce){
    .rv_kicker, .rv_trophy, .rv_title, .rv_board, .rv_mvp, .rv_actions{
        transition-duration: .01ms !important;
    }
    .rv_trophy, .rv_mvp_glow, .rv_mvp_ring::before, .rv_confetti{
        animation: none !important;
    }
    .rv_confetti{ display: none; }
}