:root{
    --bg: #0b1220;
    --panel: rgba(20,28,45,0.8);
    --border: rgba(255,255,255,.08);
    --card: rgba(19,26,43,0.75);
    --text: #eaf0ff;
    --muted: rgba(234,240,255,.65);
    --accent: #3b82f6; /* bleu */
    --accent-2: #6ea2ff; /* dégradé plus clair */
    --shadow: 0 10px 30px rgba(8,13,29,.45);
    --radius: 18px;
}

/* Reset minimal */
*{box-sizing:border-box}
html,body{height:100%}
body{
    margin:0; color:var(--text); background: radial-gradient(70% 100% at 80% 0%, rgba(59,130,246,.12), transparent 60%),
radial-gradient(50% 70% at 20% 100%, rgba(236,72,153,.08), transparent 60%),
var(--bg);
    font: 14px/1.45 system-ui, -apple-system, Segoe UI, Roboto, Inter, Arial, sans-serif;
}

/* Layout principal : 3 colonnes */
.shell{
    display:grid;
    grid-template-columns: 240px 1fr 400px; /* gauche / centre / droite */
    gap: 24px;
    width: 100%;
    max-width: none;
    padding: 28px;
    margin: 0
}

/* Panneaux de base */
.panel{
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: calc(var(--radius) + 6px);
    box-shadow: var(--shadow);
    backdrop-filter: blur(12px);
}

/* Barre latérale gauche (menu pays) */
.sidebar{
    padding: 18px;
    position: sticky; top: 24px; height: fit-content;
}
.brand{
    display:flex; align-items:center; gap:10px;
    font-weight:700; letter-spacing:.4px; margin-bottom:10px;
}
.brand .dot{
    width:10px; height:10px; border-radius:999px;
    background: radial-gradient(circle at 30% 30%, #fff, var(--accent) 70%);
    box-shadow: 0 0 12px rgba(62,130,246,.7);
}
.menu{
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 8px;
    width: 100%;         /* le nav occupe toute la largeur */
}
.menu a{
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border-radius: var(--radius);
    color: var(--text);
    text-decoration: none;
    background: linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.01));
    border: 1px solid var(--border);
    transition: .2s ease;
    width: 100%;          /* <== chaque lien prend toute la largeur */
    box-sizing: border-box;
}
.menu a:hover{ transform: translateY(-1px); background: rgba(255,255,255,.06) }
.menu a.active{
    background: linear-gradient(135deg, var(--accent) 0%, var(--accent-2) 100%);
    color:#0a1020; font-weight:700; border-color: transparent;
}
.flag{ font-size:18px; filter: drop-shadow(0 2px 6px rgba(0,0,0,.35)); }



.menu a span.manga {
    display: block;
    flex: 1;
    min-width: 0;
    font-size: min(4vw, 16px); /* jamais plus de 16px, mais réduit si espace petit */
}


.menu {
    max-height: 100vh; /* limite la hauteur au viewport */
    overflow-y: auto;  /* active le défilement vertical */
    scrollbar-width: thin; /* (optionnel) rend la barre fine sur Firefox */
}


.menu {
    display: flex;
    overflow-x: auto;   /* scroll horizontal */
    white-space: nowrap; /* empêche le retour à la ligne */
    gap: 1rem;          /* espace entre les items */
    -webkit-overflow-scrolling: touch; /* fluide sur iPhone */
}
.menu a {
    flex: 0 0 auto; /* empêche les liens de se réduire */
}

.menu::-webkit-scrollbar {
    display: none; /* Chrome, Safari */
}
.menu {
    -ms-overflow-style: none;  /* IE et Edge */
    scrollbar-width: none;     /* Firefox */
}


.menu {
    max-height: 80vh;       /* limite la hauteur à 80% de l’écran */
    overflow-y: auto;        /* scroll vertical */
    -webkit-overflow-scrolling: touch;
}



.svg-mask {
    filter: invert(21%) sepia(97%) saturate(7000%) hue-rotate(0deg) brightness(95%) contrast(105%);
}

.svg-mask-white {
    filter: invert(100%) sepia(0%) saturate(100%) hue-rotate(0deg) brightness(100%) contrast(100%);
}



/* Colonne centrale : articles */
.main{
    display:grid; gap:24px;
}
.header {
    position: relative;
    padding: 32px 24px 18px;     /* + espace en haut pour que la liste ne colle pas au label */
}

.header .pill{
    padding:8px 12px; border-radius: 999px;
    background: rgba(255,255,255,.06); border:1px solid var(--border);
    font-size:12px; color:var(--muted);
}

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

.card{
    border:1px solid var(--border);
    border-radius: var(--radius);
    background: var(--card);
    overflow:hidden;
    box-shadow: var(--shadow);
    transform: translateY(0) scale(1);
    transition:
            transform .22s cubic-bezier(.22,.61,.36,1),
            box-shadow .22s cubic-bezier(.22,.61,.36,1),
            border-color .22s cubic-bezier(.22,.61,.36,1);
    will-change: transform;
}
.thumb{
    aspect-ratio: 16/10;
    background:
            linear-gradient(180deg, rgba(0,0,0,.0), rgba(0,0,0,.4)),
            radial-gradient(circle at 70% 20%, rgba(110,162,255,.35), transparent 40%),
            radial-gradient(circle at 0% 90%, rgba(236,72,153,.25), transparent 50%),
            #0f172a;
}
/* (Met une image si tu veux) .thumb img{width:100%;height:100%;object-fit:cover;display:block} */

.content{ padding:16px 16px 18px }
.tag{
    font-size:11px; letter-spacing:.4px; color:#0b1220; font-weight:700;
    display:inline-block; padding:6px 10px; border-radius:999px; margin-bottom:10px;
    background: linear-gradient(135deg, var(--accent), var(--accent-2));
}
h3{ margin:0 0 8px; font-size:18px; line-height:1.25 }
.excerpt{ color: var(--muted); margin:0 0 10px }
.meta{ font-size:12px; color: rgba(234,240,255,.55) }

/* Barre latérale droite : matchs du jour */
.rightbar{
    position: sticky; top: 24px; height: fit-content;
    padding: 16px;
}
.rightbar h4{ margin: 0 0 10px }
.matchlist{ display:grid; gap:12px; margin-top:8px }
.match{
    --cut: 22px; /* profondeur de la découpe aux extrémités */
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 22px;
    color: #fff;
    font-weight: 800;
    font-style: italic;

    /* forme “hexagonale” avec pointes / biseaux aux extrémités */
    clip-path: polygon(
            var(--cut) 0,                      /* haut-gauche rentré */
            calc(100% - var(--cut)) 0,         /* haut-droit rentré */
            100% 50%,                          /* pointe droite */
            calc(100% - var(--cut)) 100%,      /* bas-droit rentré */
            var(--cut) 100%,                   /* bas-gauche rentré */
            0 50%                              /* pointe gauche */
    );

}

/* Pastille “VS” façon screenshot */
.match .vs{
    font-weight: 900;
    background: #ffc107;
    color: #000;
    padding: 4px 12px;
    border-radius: 6px;
}

/* (optionnel) petites pastilles cotes */
.match .odd{
    background: #0e0e0e;
    color: #ffc107;
    padding: 4px 8px;
    border-radius: 6px;
    font-weight: 800;
    margin: 0 6px;
}

.side {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    flex: 1;  min-width: 0;
}

.side.right {
    justify-content: flex-start;
}
.club {
    display: flex;
    align-items: center;   /* centre logo + texte verticalement */
    gap: 8px;
    font-weight: 600;
    min-width:0;
}

.club img {
    width: 26px;
    height: 26px;
    display: block;        /* évite l’espace blanc sous l’image */
    object-fit: contain;
    filter: drop-shadow(0 2px 6px rgba(0,0,0,.35));
}

.club span {
    display: block;
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis; /* ajoute "…" si ça dépasse */
}

.vs {
    font-weight: 800;
    color: var(--muted);
    padding: 0 8px;
    flex-shrink: 0;        /* le VS ne rétrécit pas */
}


.team{
    display:flex; align-items:center; gap:8px; min-width:0;
    font-weight:600;
}
.kit{
    width:28px; height:28px; border-radius:8px; border:1px solid var(--border);
    background:
            linear-gradient(180deg, rgba(255,255,255,.25), rgba(255,255,255,.02)),
            radial-gradient(circle at 30% 20%, rgba(110,162,255,.45), transparent 60%),
            #0f1a38;
    display:grid; place-items:center; font-size:10px; color:#cfe0ff;
}
.vs{ font-size:12px; color:var(--muted); font-weight:700; letter-spacing:.6px }
.time{ font-size:12px; color:var(--muted); text-align:center; margin-top:2px }

/* Petites touches */
.divider{ height:1px; background:var(--border); margin:10px 0 14px }

/* Optionnel : micro-responsive (réduit gentiment sans casser) */
@media (max-width: 1200px){
    .shell{ grid-template-columns: 220px 1fr 300px; }
}
@media (max-width: 1024px){
    .shell{ grid-template-columns: 200px 1fr 280px; }
    .grid{ grid-template-columns: 1fr; }
}
@media (max-width: 880px){
    .shell{ grid-template-columns: 1fr; }
    .sidebar, .rightbar{ position:relative; top:auto }
}



/* Titre qui chevauche la bordure */
/* Label qui chevauche la bordure */
.floating-title{
    position: absolute;
    top: -14px;                  /* chevauche davantage */
    left: 24px;
    padding: 6px 14px;
    font-size: 13px;
    font-weight: 800;
    border-radius: 12px;
    color: var(--text);
    background: var(--bg);       /* masque la bordure du panel sous le label */
    border: 1px solid var(--border);
    box-shadow: 0 6px 18px rgba(0,0,0,.35);
    z-index: 5;
}

/* ---- LISTE DES DONATEURS ---- */
/* conteneur liste */
/* conteneur en ligne */
.donators-row {
    list-style: none;
    padding: 0;
    margin: 18px 0 0;
    display: flex;
    gap: 40px;             /* espace horizontal entre les clubs */
    align-items: center;
}

/* chaque donateur */
.donator {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* chiffre (rang) */
.rank {
    display: inline-grid;
    place-items: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--accent), var(--accent-2));
    color: #0b1220;
    font-weight: 800;
    font-size: 13px;
    box-shadow: 0 2px 6px rgba(0,0,0,.35);
}

/* logo */
.club-logo {
    width: 30px;
    height: 30px;
    object-fit: contain;
}

/* nom */
.name {
    font-size: 14px;
    font-weight: 600;
    color: var(--muted);
}

.header-donators {
    display: flex;
    align-items: center;
    justify-content: space-between; /* donateurs à gauche, bouton à droite */
    position: relative;
    padding: 36px 24px 18px;
}

.donators-row {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    gap: 40px;
    align-items: center;
}

/* Bouton circulaire orange */
.circle-btn {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: none;
    cursor: pointer;
    font-size: 18px;
    font-weight: bold;
    color: #fff;
    background: linear-gradient(135deg, #ff7b00, #ffb347);
    box-shadow: 0 4px 10px rgba(255, 123, 0, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform .2s ease, box-shadow .2s ease;
}

.circle-btn:hover {
    transform: scale(1.08);
    box-shadow: 0 6px 14px rgba(255, 123, 0, 0.55);
}




@font-face {
    font-family: 'MaPolice';
    src: url('/fonts/mangatb.woff2') format('woff2'),
         url('/fonts/mangatb.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap; /* ✅ le texte s'affiche avec fallback en attendant */
}

.manga {
    font-family: 'MaPolice', sans-serif;
    font-size: 16px;
    letter-spacing: 1px;
}

.club span.manga { font-size: clamp(8px, 0.65rem, 16px); }

.club span.manga {
    display: block;
    white-space: normal;  /* retour à la ligne possible */
    word-break: break-word; /* casse propre si un mot est trop long */
}

.grid iframe {
    grid-column: 1 / -1; /* s’étend de la première à la dernière colonne */
    width: 100%;
    border: none;
    min-height: 500px; /* optionnel : hauteur minimale */
}


.grid { align-items: stretch; }

/* Chaque case de la grille doit pouvoir grandir */
.grid > article {
    display: flex;            /* clé */
    min-width: 0;
}

/* Le lien doit être en block et s’étirer */
.grid > article > a {
    display: flex;            /* au lieu de block */
    flex: 1;                  /* prend toute la hauteur dispo */
    text-decoration: none;
    color: inherit;
    min-width: 0;
}

/* La card occupe 100% de la hauteur et organise son contenu */
.grid > article > a > .card {
    display: flex;
    flex-direction: column;
    flex: 1;                  /* égalise la hauteur des cards */
}

/* hover + focus (clavier) sur le lien, applique à la card */
.grid > article > a:is(:hover, :focus-visible) .card{
    transform: translateY(-1px) scale(1.008);          /* <— plus doux */
    box-shadow: 0 16px 40px rgba(0,0,0,.45);
    border-color: rgba(255,255,255,.12);
}

.grid > article > a:is(:hover, :focus-visible) .thumb img{
    transform: scale(1.02);
}

/* petit feedback au clic */
.grid > article > a:active .card{
    transform: translateY(0) scale(.997);
}

/* accessibilité : réduit les animations si demandé */
@media (prefers-reduced-motion: reduce){
    .card, .card .thumb img{ transition: none; }
}

/* Le bloc texte prend le reste de la place */
.card .content {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.card .content .tag{
    align-self: flex-start;   /* clé : annule le stretch */
    display: inline-flex;
}

/* Optionnel : pousse le bas (meta/boutons) en bas de carte */
.card .excerpt { margin-bottom: auto; }  /* ou margin-top:auto selon ton besoin */


.faq {
    margin-top: 30px;
    padding: 20px;
    border-top: 1px solid var(--border);
}

.faq h2 {
    font-size: 20px;
    margin-bottom: 15px;
}

.faq-item {
    margin-bottom: 18px;
}

.faq-item h3 {
    font-size: 16px;
    margin-bottom: 6px;
    color: var(--accent);
}

.faq-item p {
    margin: 0;
    color: var(--muted);
}

article.panel h1 {
    text-align: center;
    font-size: 1.8rem;
    font-weight: 800;
    color: var(--text);
    text-shadow: 0 2px 6px rgba(0,0,0,.5);
}

article.panel {
    padding: 24px;       /* espace intérieur (haut/droite/bas/gauche) */
    line-height: 1.6;    /* aère les lignes */
}

article.panel h2 {
    margin-top: 24px;    /* espace au-dessus des sous-titres */
    margin-bottom: 12px; /* espace en dessous */
}

article.panel p {
    margin-bottom: 16px; /* espace entre paragraphes */
}

/* ——— MATCHS DU JOUR : version finale propre pour la rightbar ——— */
/* ============================================================
   MATCHS DU JOUR — style "démo" (plaquettes biseautées + VS badge)
   ============================================================ */

/* le cartouche global du match : peu de padding, on laisse respirer les plaquettes */
.rightbar .match{
    background: none;         /* on garde seulement les panneaux biseautés */
    box-shadow: none;
    font-style: normal;       /* pas d’italique */
    gap: 18px;                /* espace entre panneau G / centre / panneau D */
    padding: 6px 0;
    overflow: visible;
}

/* panneaux gauche/droit (biseaux déjà gérés via .panel.left/.panel.right dans ton CSS) */
.rightbar .match .panel.side{
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;

    /* dégradé + liseré façon “plaquette” de la démo */
    background: linear-gradient(180deg, #232a36, #111620);
    box-shadow:
            inset 0 1px 0 rgba(255,255,255,.06),
            inset 0 -1px 0 rgba(0,0,0,.5);
    border-radius: 10px;     /* coins doux à l’intérieur du clip-path */
    padding: 8px 12px;
    color: var(--text);
    text-transform: uppercase;
    font-weight: 800;
    letter-spacing: .5px;
}

/* bloc club (logo + nom) */
.rightbar .match .club{
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

/* logo circulaire comme la démo */
.rightbar .match .club img{
    width: 28px;
    height: 28px;
}

/* nom du club : 1–2 lignes max selon la largeur */
.rightbar .match .club .manga{
    white-space: normal;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    word-break: break-word;
}

/* badge VS au centre (style radial jaune de la démo) */
.rightbar .match .col{
    display: grid;
    justify-items: center;
    align-items: center;
    gap: 6px;
    width: 84px;             /* largeur fixe → équilibre visuel */
    min-width: 84px;
}
.rightbar .match .vs{
    font-weight: 900;
    /*font-size: 20px;*/
    color: #111;
    letter-spacing: 1px;
    position: relative;
    padding: 10px 14px;
    background: radial-gradient(circle at 50% 45%, #ffe27a, #f6b911 58%, #d59100 100%);
    border-radius: 8px;
    box-shadow:
            0 6px 14px rgba(0,0,0,.55),
            inset 0 1px 0 rgba(255,255,255,.45);
}
.rightbar .match .vs::after{
    content:"";
    position:absolute; inset:2px 6px auto 6px; height:26%;
    background:linear-gradient(180deg, rgba(255,255,255,.55), transparent);
    border-radius:6px;
}

/* heure sous le VS (on neutralise le style inline) */
.rightbar .match .col div[style]{
    all: unset;
    font-weight: 800;
    font-size: 12px;
    color: var(--text);
    opacity: .9;
}

/* titres “Liga / Ligue 1” alignés à gauche, sobres */
.rightbar .matchlist .time{
    margin: 8px 0 6px;
    font-size: 12px;
    color: var(--muted);
    text-align: left;
}

/* micro-réactivité : centre un peu plus fin et texte resserré */
@media (max-width: 600px){
    .rightbar .match .club .manga{
        white-space: normal;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        font-size: 14px;
    }
}

/* sécurité anti-débordement de la colonne droite */
.rightbar .matchlist,
.rightbar .matchlist > div,
.rightbar .matchlist a,
.rightbar .matchlist a > div{
    display:block; width:100%; max-width:100%; box-sizing:border-box;
}
.rightbar .match *{ min-width:0; }        /* empêche qu’un enfant force la largeur */


@media (min-width: 701px){
    .rightbar .match .club .manga{ -webkit-line-clamp: 2; }
}

/* centre plus fin */
.rightbar .match { grid-template-columns: 1fr 70px 1fr; } /* au lieu de 1fr 84px 1fr */
.rightbar .match .col{ width:70px; min-width:70px; }





/* ===== Rightbar: Derniers articles ===== */
.rightbar h4{ margin:0 0 12px }

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

.news-card{
    display:grid;
    grid-template-columns: 92px 1fr;   /* vignette | titre */
    gap:12px;
    align-items:center;
    text-decoration:none;
    color:var(--text);
    background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.015));
    border:1px solid var(--border);
    border-radius: 14px;
    padding:10px;
    transition:.2s ease;
}
.news-card:hover{
    transform: translateY(-1px);
    background: rgba(255,255,255,.05);
}

.news-card .thumb{
    width:92px; height:68px;         /* 4:3 compact */
    border-radius:10px;
    overflow:hidden;
    background:#0f172a;
    display:grid; place-items:center;
    flex:0 0 auto;
}
.news-card .thumb img{
    transition: transform .28s cubic-bezier(.22,.61,.36,1);
}

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

.news-card .info h5{
    margin:0;
    font-size:14px;
    line-height:1.25;
    font-weight:700;
    color:var(--text);
    display:-webkit-box;
    -webkit-box-orient:vertical;
    -webkit-line-clamp: 2;   /* max 2 lignes */
    overflow:hidden;
}

/* Bouton "Voir tous les articles" */
.newslist .see-all{
    display:block;
    text-align:center;
    padding:10px 12px;
    border:1px dashed var(--border);
    border-radius:12px;
    color:var(--muted);
    text-decoration:none;
    transition:.2s ease;
}
.newslist .see-all:hover{
    background: rgba(255,255,255,.05);
    color: var(--text);
}

/* Responsive: un peu plus serré sous 420px */
@media (max-width: 420px){
    .news-card{ grid-template-columns: 80px 1fr; gap:10px; }
    .news-card .thumb{ width:80px; height:60px; }
}


/* ===== Pagination améliorée ===== */
.pagination {
    display: flex;
    justify-content: center;  /* centre horizontalement */
    margin: 32px 0;
}

.pagination ul {
    list-style: none;
    padding: 0;
    display: flex;
    gap: 10px; /* espace entre les boutons */
    flex-wrap: wrap; /* si petit écran → retour à la ligne */
}

.pagination a {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 38px;
    height: 38px;
    padding: 0 12px;
    border-radius: 10px; /* arrondi moderne */
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    color: var(--text);
    background: var(--card);
    border: 1px solid var(--border);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
    transition: all .2s ease;
}

/* survol */
.pagination a:hover {
    background: rgba(255,255,255,.08);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,.35);
}

/* page active */
.pagination a.active {
    background: linear-gradient(135deg, var(--accent), var(--accent-2));
    color: #0b1220;   /* texte sombre pour contraste */
    border-color: transparent;
    box-shadow: 0 4px 12px rgba(59,130,246,.4);
}

/* boutons précédent/suivant */
.pagination a.prev,
.pagination a.next {
    font-weight: 800;
}





.topbar {
    display: flex;
    flex-direction: column;
    padding: 8px 16px;
    gap: 6px; /* espace entre les lignes */
}

/* Ligne principale : hamburger | logo | icônes */
.topbar-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}

.topbar-icons {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Icônes uniformes */
.icon-btn,
.lang-menu-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 6px;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 8px;
    font-size: 16px;
    cursor: pointer;
}




.topbar .brand {
    display: flex;
    align-items: center;
}

/* Empêche le logo de se déformer, et évite qu’il prenne trop de place */
.brand { display:flex; align-items:center; flex:0 0 auto }
.logo { height: 38px; width: auto; }

/* Bouton menu (caché sur grand écran) */
.lang-menu-btn {
    display: flex; /* au lieu de none */
    align-items: center;
    justify-content: center;
    padding: 6px;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 8px;
    font-size: 16px;
    cursor: pointer;
}

.topbar .logo {
    height: 40px;
    width: auto;
    max-width: 140px;
}

.topbar .slogan {
    font-size: 14px;
    margin-left: 15px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.lang-switch {
    display: none;
    flex-direction: column;
    background: var(--card);
    padding: 10px;
    position: absolute;
    top: 60px;   /* ajuste en fonction de la hauteur de ta topbar */
    right: 20px;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.4);
    z-index: 9999;

    /* Animation par défaut (invisible) */
    opacity: 0;
    transform: translateY(-10px);
    pointer-events: none;
    transition: opacity 0.25s ease, transform 0.25s ease;
}

.lang-switch.open {
    display: flex;
}

/* Quand ouvert */
.lang-switch.open {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

/* Le slogan passe toujours en dessous (jamais à côté) */
.slogan {
    font-size: 14px;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}


/* Barre de recherche cachée par défaut */
#search-bar-overlay {
    display: none;
    position: fixed;
    top: 60px; /* sous la topbar */
    left: 50%;
    transform: translateX(-50%);
    width: 90%;
    max-width: 500px;
    z-index: 9999;

    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease, transform 0.25s ease;
}

/* Quand active → affichée */
#search-bar-overlay.active {
    display: block;
}

#search-bar-overlay.active {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
    pointer-events: auto;
}




#search-backdrop {
    position: fixed;
    inset: 0; /* occupe tout l’écran */
    background: rgba(0, 0, 0, 0.9); /* fondu sombre */
    z-index: 9998; /* juste derrière la barre */
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

#search-backdrop.active {
    opacity: 1;
    pointer-events: auto;
}



.btn-like-hamburger {
    padding: 10px 12px;
    border-radius: 10px;
    border: 1px solid var(--border);
    background: rgba(35,30,30,.99);
    color: var(--text);
    font-size: 18px;
    box-shadow: var(--shadow);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.btn-like-hamburger:hover {
    transform: translateY(-2px);
    background: var(--accent);
    color: #0b1220;
}





/* ——— Petits écrans : passe sur 2 lignes clean ——— */
/* Responsive : mobile */
@media (max-width: 700px) {
    .lang-switch {
        display: none;
        flex-direction: column;
        background: #111;
        padding: 10px;
        position: absolute;
        top: 60px;          /* ajuste selon la hauteur de ta topbar */
        right: 20px;
        border-radius: 6px;
        box-shadow: 0 2px 6px rgba(0,0,0,0.3);
        z-index: 9999;      /* ✅ reste toujours au-dessus */
    }

    .lang-switch.open {
        display: flex;
    }


}

.lang-switch a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    overflow: hidden;
    border: 2px solid transparent;
    transition: transform 0.2s, border-color 0.2s;
}

.lang-switch a:hover {
    transform: scale(1.1);
    border-color: var(--accent);
}

.lang-switch a.active {
    border-color: var(--accent);
    box-shadow: 0 0 8px rgba(59,130,246,.6);
}

.lang-switch img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}



html[lang="ar"] {
    direction: rtl;
    text-align: right;
}



@media (max-width: 880px) {
    .drawer[aria-hidden="true"] {
        transform: translateX(-100%);  /* la fait glisser hors de l’écran */
        position: fixed;
        top: 0;
        left: 0;
        width: 250px;
        height: 100%;
        z-index: 9999;
        pointer-events: none; /* empêche les clics / focus */
    }

    .drawer.open {
        transform: translateX(0);
        pointer-events: auto;
    }
}

.drawer {
    transition: transform .3s ease;
}


.avatar {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid #333;
    box-shadow: 0 2px 6px rgba(0,0,0,0.2);
    flex-shrink: 0; /* évite tout redimensionnement si dans un flex */
}


.author-row {
    display: flex;
    align-items: center;  /* centre verticalement le texte et l’image */
    gap: 14px;             /* espace entre le prénom et l’image */
    margin-top: 10px;
}

.author-name {
    font-size: 16px;
    font-weight: 600;
    color: var(--text);
}









.article-grid {
    display: grid;
    gap: 24px;
    grid-template-columns: repeat(auto-fill, minmax(30%, 1fr));
    align-items: stretch;
}

/* Chaque bloc article */
.article-item {
    display: flex;
    min-width: 0;
}

.article-link {
    flex: 1;
    text-decoration: none;
    color: inherit;
    display: flex;
}

/* Carte */
.article-box {
    display: flex;
    flex-direction: column;
    flex: 1;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow);
    transition:
            transform .22s cubic-bezier(.22,.61,.36,1),
            box-shadow .22s cubic-bezier(.22,.61,.36,1),
            border-color .22s cubic-bezier(.22,.61,.36,1);
}

.article-link:is(:hover, :focus-visible) .article-box {
    transform: translateY(-2px) scale(1.01);
    box-shadow: 0 16px 40px rgba(0,0,0,.45);
    border-color: rgba(255,255,255,.12);
}

/* Image */
.article-image {
    aspect-ratio: 16/10;
    overflow: hidden;
    background: #0f172a;
}

.article-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .25s cubic-bezier(.22,.61,.36,1);
}

.article-link:is(:hover, :focus-visible) .article-image img {
    transform: scale(1.03);
}

/* Contenu */
.article-body {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 16px 18px 20px;
    min-width: 0;
}

.article-label {
    align-self: flex-start;
    font-size: 11px;
    letter-spacing: .4px;
    font-weight: 700;
    color: #0b1220;
    background: linear-gradient(135deg, var(--accent), var(--accent-2));
    padding: 6px 10px;
    border-radius: 999px;
}

.article-title {
    margin: 0;
    font-size: 18px;
    line-height: 1.25;
    color: var(--text);
}

.article-summary {
    margin: 0;
    color: var(--muted);
    font-size: 14px;
    line-height: 1.45;
}

/* Responsive : 1 article/ligne sur petit écran */
@media (max-width: 880px){
    .article-grid {
        grid-template-columns: 1fr;
    }
}











.hamburger{
    position: fixed; top:16px; left:16px; z-index:1100;
    padding:10px 12px; border-radius:10px; border:1px solid var(--border);
    background: rgba(35,30,30,.99); color: var(--text);
    font-size:18px; box-shadow: var(--shadow); display:none;
}

.drawer-overlay{
    position: fixed; inset: 0;
    background: rgba(0,0,0,.45); backdrop-filter: blur(2px);
    z-index:1090; opacity:0; pointer-events:none; transition: opacity .25s ease;
}

.drawer{
    position: fixed; top:0; bottom:0; left:0;
    width: min(80vw, 320px); max-width:90vw; padding:18px;
    transform: translateX(-100%); transition: transform .25s ease; z-index:1101;
}
.drawer.open{ transform: translateX(0); }
.drawer-overlay.show{ opacity:1; pointer-events:auto; }

@media (min-width: 881px){
    .hamburger{ display:none; }
    .drawer{ position: sticky; top:24px; height: fit-content; transform:none; transition:none; width:auto; max-width:none; left:auto; bottom:auto; z-index:auto; }
    #drawer-overlay{ display:none !important; }
}

@media (max-width: 880px){
    .hamburger{ display:inline-flex; align-items:center; gap:8px; }
    .shell > .sidebar.panel:not(.drawer){ display:none; }
}











/*mycss4*/



.search-bar {
    display: flex;
    align-items: center;
    gap: 6px;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 20px;
    padding: 4px 10px;
    box-shadow: var(--shadow);
}

.search-bar input {
    border: none;
    background: transparent;
    color: var(--text);
    font-size: 14px;
    outline: none;
    flex: 1;
    min-width: 140px;
}

.search-bar input::placeholder {
    color: var(--muted);
}

.search-bar button {
    background: var(--accent);
    border: none;
    color: #0b1220;
    font-weight: 700;
    font-size: 14px;
    padding: 6px 12px;
    border-radius: 14px;
    cursor: pointer;
    transition: 0.2s;
}

.search-bar button:hover {
    background: var(--accent-2);
}


/* --- Ligne du haut en mobile --- */
@media (max-width: 700px) {
    .topbar-row {
        display: grid;
        grid-template-columns: 40px 1fr 70px; /* menu | logo | icônes */
        align-items: center;
        width: 100%;
    }

    /* Hamburger */
    .hamburger {
        grid-column: 1;
        justify-self: start;
    }

    /* Logo */
    .brand {
        grid-column: 2;
        justify-self: center;
    }
    .logo {
        height: 36px;
        max-width: 110px;
    }

    /* Icônes */
    .topbar-icons {
        grid-column: 3;        /* colonne 3 */
        justify-self: end;     /* colle à droite */
        display: flex;
        gap: 6px;
        position: relative;    /* 🔑 enlève tout absolu qui causait le chevauchement */
    }

    .icon-btn,
    .lang-menu-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 6px 8px;
        background: var(--card);
        border: 1px solid var(--border);
        border-radius: 6px;
        font-size: 16px;
    }

    /* Slogan sous la ligne */
    .slogan {
        font-size: 13px;
        text-align: center;
        margin-top: 6px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
}






.fullwidth-video {
    width: 80%;
    max-width: 100%;
    margin: 20px auto;
    display: block;

    /* clé ici */
    aspect-ratio: 16 / 9;
    height: auto;
}

.fullwidth-video iframe {
    width: 100%;
    height: 100%;
    display: block;
    border: none;
}


/*Image zoomable*/



.imageZoomable {
    display: inline-block;
    border-radius: 15px;         /* bords arrondis */
    overflow: hidden;            /* pour que le radius s’applique bien */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.25); /* ombre douce */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.imageZoomable:hover {
    transform: scale(1.05);      /* zoom léger au survol */
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.35); /* ombre un peu plus marquée */
}

.imageZoomable img {
    display: block;
    width: 100%;
    height: auto;
}

.published-date {
    text-align: center;
    color: var(--muted);   /* optionnel : couleur plus discrète */
    margin-top: 8px;       /* espace sous le titre */
    font-size: small;       /* optionnel */
}





/*Quiz*/


.quiz-panel {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    backdrop-filter: blur(12px);
    padding: 28px;
    color: var(--text);
}


.quiz-option {
    display: block;
    width: 100%;
    text-align: left;
    background: linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.01));
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 14px 18px;
    color: var(--text);
    font-weight: 500;
    margin-bottom: 12px;
    cursor: pointer;
    transition: .2s ease;
}
.quiz-option:hover {
    background: rgba(255,255,255,.05);
    transform: translateY(-1px);
}
.quiz-option.correct {
    background: linear-gradient(135deg, #10b981, #059669);
    border-color: transparent;
    color: #fff;
}
.quiz-option.incorrect {
    background: linear-gradient(135deg, #ef4444, #dc2626);
    border-color: transparent;
    color: #fff;
}


#nextBtn {
    background: linear-gradient(135deg, var(--accent), var(--accent-2));
    color: #0b1220;
    border: none;
    border-radius: var(--radius);
    padding: 12px 24px;
    font-weight: 700;
    cursor: pointer;
    transition: .2s ease;
    width: 100%;
}
#nextBtn:hover:enabled {
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(0,0,0,.35);
}
#nextBtn:disabled {
    opacity: .4;
    cursor: not-allowed;
}


.quiz-progress {
    height: 6px;
    border-radius: 999px;
    background: rgba(255,255,255,.08);
    overflow: hidden;
    margin-top: 14px;
}
.quiz-progress-fill {
    height: 100%;
    width: 0;
    background: linear-gradient(135deg, var(--accent), var(--accent-2));
    transition: width .3s ease;
}
.quiz-meta {
    display: flex;
    justify-content: space-between;
    color: var(--muted);
    font-size: 14px;
    margin-bottom: 16px;
}

.quiz-progress {
    width: 100%;
    height: 6px;
    border-radius: 999px;
    background: rgba(255,255,255,.06);
    overflow: hidden;
    margin-top: 8px;
}

.quiz-progress #progressBar {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, var(--accent), var(--accent-2));
    border-radius: 999px;
    transition: width .4s ease;
}

.quiz-option {
    transition: transform .2s ease, box-shadow .2s ease, background .3s ease;
}

.quiz-option:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,.4);
}


.quiz-option.correct {
    animation: correctPulse .4s ease;
}

.quiz-option.incorrect {
    animation: incorrectShake .3s ease;
}

@keyframes correctPulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.05); }
    100% { transform: scale(1); }
}

@keyframes incorrectShake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-4px); }
    75% { transform: translateX(4px); }
}

.quiz-result h3 {
    font-size: 2rem;
    margin-bottom: 10px;
    text-shadow: 0 2px 8px rgba(0,0,0,.6);
}

.quiz-result {
    position: relative;
}

.quiz-result::before {
    content: "🏆";
    position: absolute;
    top: -20px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 40px;
    animation: bounce 1.8s infinite;
}

@keyframes bounce {
    0%, 20%, 50%, 80%, 100% { transform: translate(-50%, 0); }
    40% { transform: translate(-50%, -10px); }
    60% { transform: translate(-50%, -5px); }
}


.quiz-header {
    display: flex;
    justify-content: center;
    gap: 40px;
    padding: 14px 20px;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    text-align: center;
}

.score-box, .question-box {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.score-value, .question-value {
    font-size: 1.8rem;
    font-weight: 800;
    color: var(--accent);
    text-shadow: 0 2px 8px rgba(0,0,0,.5);
}

.score-label, .question-label {
    font-size: 0.8rem;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-top: 4px;
}

/* Barre de progression */
.quiz-progress {
    width: 100%;
    height: 8px;
    border-radius: 999px;
    background: rgba(255,255,255,.06);
    overflow: hidden;
    margin: 14px 0 6px;
    box-shadow: inset 0 1px 2px rgba(0,0,0,.4);
}

#progressBar {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, var(--accent), var(--accent-2));
    border-radius: 999px;
    transition: width .4s ease;
}


#score {
    display: inline-block;
    transition: transform .2s ease;
}

#score.pop {
    transform: scale(1.3);
}

.share-bar {
    display: flex;
    justify-content: center;
    gap: 14px;
    margin-top: 30px;
}

.share-btn {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1px solid var(--border);
    background: var(--card);
    color: var(--text);
    display: grid;
    place-items: center;
    font-size: 18px;
    cursor: pointer;
    box-shadow: 0 4px 10px rgba(0,0,0,0.35);
    transition: all 0.25s ease;
}

.share-btn:hover {
    transform: translateY(-3px) scale(1.08);
    box-shadow: 0 6px 14px rgba(0,0,0,0.45);
}

/* Couleurs de chaque réseau */
.share-btn.facebook:hover   { background: #1877F2; color: #fff; border-color: transparent; }
.share-btn.twitter:hover    { background: #000000; color: #fff; border-color: transparent; }
.share-btn.whatsapp:hover   { background: #25D366; color: #fff; border-color: transparent; }
.share-btn.instagram:hover  {
    background: radial-gradient(circle at 30% 110%, #feda75, #fa7e1e, #d62976, #962fbf, #4f5bd5);
    color: #fff;
    border-color: transparent;
}
.share-btn.copy:hover       { background: var(--accent); color: #0b1220; border-color: transparent; }



.share-btn.native:hover {
    background: var(--accent);
    color: #0b1220;
    border-color: transparent;
}








.toast {
    position: fixed;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%) translateY(30px);
    background: linear-gradient(135deg, var(--accent), var(--accent-2));
    color: #0b1220;
    padding: 14px 22px;
    border-radius: 12px;
    font-weight: 600;
    font-size: 14px;
    box-shadow: 0 6px 20px rgba(0,0,0,0.4);
    opacity: 0;
    pointer-events: none;
    transition: all 0.4s ease;
    z-index: 9999;
}

.toast.show {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}






.cardQuiz {
    max-width: 240px;
    width: 100%;
    margin: 0 auto;
}


.grid.quiz-grid {
    display: grid;
    gap: 20px;  /* espace entre les cartes */
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    justify-content: center; /* centre le contenu globalement */
}


/* === Popup de résultats === */
#resultContainer {
    display: none;                /* ← caché par défaut */
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.8);
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: 0 16px 40px rgba(0,0,0,.6);
    padding: 40px 30px;
    color: var(--text);
    text-align: center;
    max-width: 480px;
    width: 90%;
    opacity: 0;
    z-index: 1000;
    transition: all .35s ease;
}

#resultContainer.active {
    display: block;                /* ← devient visible */
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}


/* Titre et score */
#resultContainer h3 {
    font-size: 2rem;
    font-weight: 800;
    color: var(--accent);
    text-shadow: 0 2px 10px rgba(0,0,0,.5);
    margin: 10px 0 12px;
}
#resultContainer p {
    font-size: 1.2rem;
    color: var(--muted);
    margin-bottom: 28px;
}

/* Bouton Recommencer */
#restartBtn {
    background: linear-gradient(135deg, var(--accent), var(--accent-2));
    color: #0b1220;
    border: none;
    border-radius: var(--radius);
    padding: 14px 26px;
    font-weight: 700;
    font-size: 1rem;
    cursor: pointer;
    transition: all .25s ease;
    box-shadow: 0 4px 14px rgba(0,0,0,.35);
    visibility: visible; /* il s’affichera toujours quand la popup est visible */
}
#restartBtn:hover {
    transform: translateY(-2px) scale(1.04);
    box-shadow: 0 8px 20px rgba(0,0,0,.45);
}

#resultOverlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.55);
    backdrop-filter: blur(4px);
    opacity: 0;
    visibility: hidden;
    pointer-events: none; /* ← bloque pas les clics quand invisible */
    transition: all .3s ease;
    z-index: 999;
}

#resultOverlay.active {
    opacity: 1;
    visibility: visible;
    pointer-events: all;  /* ← bloque les clics uniquement quand actif */
}





/*Google Fonts*/

@font-face {
    font-family: 'Material Symbols Outlined';
    font-style: normal;
    font-weight: 400;
    src: url(https://fonts.gstatic.com/icon/font?kit=kJF1BvYX7BgnkSrUwT8OhrdQw4oELdPIeeII9v6oDMzByHX9rA6RzaxHMPdY43zj-jCxv3fzvRNU22ZXGJpEpjC_1v-p_4MrImHCIJIZrDCvHOejdd4ewU5Zs9BY9S1n-g&skey=b8dc2088854b122f&v=v280) format('woff2');
}

.material-symbols-outlined {
    font-family: 'Material Symbols Outlined';
    font-weight: normal;
    font-style: normal;
    font-size: 24px;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    display: inline-block;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    -webkit-font-feature-settings: 'liga';
    -webkit-font-smoothing: antialiased;
}




/*Footer*/

.footer {
    margin-top: 40px;
    padding: 20px;
    text-align: center;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    font-size: 14px;
    color: var(--muted);
}

.footer-content {
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-items: center;
}

.footer-links {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    justify-content: center;
}

.footer-links a {
    color: var(--text);
    text-decoration: none;
    transition: color .2s ease;
}

.footer-links a:hover {
    color: var(--accent);
}

.footer-logo {
    font-weight: 600;
    color: var(--text);
}



.cookie-banner {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    max-width: 90%;
    width: 480px;
    background: rgba(19,26,43,0.95); /* ✅ plus opaque que var(--card) */
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 18px 22px;
    box-shadow: 0 6px 20px rgba(0,0,0,.5);
    color: var(--text);
    font-size: 14px;
    z-index: 99999;

    display: flex;
    flex-direction: column;
    gap: 12px;

    opacity: 1;
    transition: opacity .3s ease;
}

.cookie-banner.hidden {
    opacity: 0;
    pointer-events: none;
}

.cookie-banner p {
    margin: 0;
    text-align: center;
    line-height: 1.4;
}

.cookie-banner a {
    color: var(--accent);
    text-decoration: underline;
}

.cookie-actions {
    display: flex;
    gap: 10px;
    justify-content: center;
}

.cookie-actions button {
    padding: 8px 14px;
    border-radius: var(--radius);
    border: none;
    font-weight: 600;
    cursor: pointer;
    transition: transform .2s ease, box-shadow .2s ease;
}

#accept-cookies {
    background: linear-gradient(135deg, var(--accent), var(--accent-2));
    color: #0b1220;
}

#decline-cookies {
    background: var(--panel);
    color: var(--text);
    border: 1px solid var(--border);
}

.cookie-actions button:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,.95);
}






/* Style unifié pour search-toggle & lang-menu-btn façon Share */
#search-toggle,
.lang-menu-btn {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1px solid var(--border);
    background: var(--card);
    color: var(--text);
    display: grid;
    place-items: center;
    font-size: 18px;
    cursor: pointer;
    box-shadow: 0 4px 10px rgba(0,0,0,0.35);
    transition: all 0.25s ease;
}

/* Effet hover identique au bouton Partager */
#search-toggle:hover,
.lang-menu-btn:hover {
    transform: translateY(-3px) scale(1.08);
    box-shadow: 0 6px 14px rgba(0,0,0,0.45);
    background: var(--accent);
    color: #0b1220;
    border-color: transparent;
}


#search-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    cursor: pointer;
}

#search-toggle span {
    pointer-events: none; /* ✅ ignore les clics sur le span */
}


.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}


/*#mobile-drawer[aria-hidden="true"] {*/
/*    display: none; !* les liens ne sont plus focusables *!*/
/*}*/


/* Mobile : menu drawer fermé par défaut */
@media (max-width: 768px) {
    #mobile-drawer {
        display: none; /* masqué */
    }
    #mobile-drawer.open {
        display: block; /* visible quand drawer ouvert */
    }
}

/* Desktop : menu toujours affiché */
@media (min-width: 769px) {
    #mobile-drawer {
        display: block !important;
    }
}


.icon {
    width: 24px;
    height: 24px;
    vertical-align: middle;
    color: #444;
    transition: color 0.3s;
    pointer-events: none;
}

.icon:hover {
    color: #000;
}



.topbar {
    padding-left: 30px;
}


.terrain-container {
    position: relative;
    text-align: center;
}

.terrain-wrapper {
    position: relative;
    width: 100%;
    aspect-ratio: 3 / 1; /* ✅ ajuste ici selon le rendu souhaité (3:1 = bande panoramique) */
    overflow: hidden; /* masque les débordements */
}

.terrain-image {
    width: 100%;
    height: 100%;
    object-fit: cover; /* ✅ garde le remplissage sans distorsion */
}

/* Joueurs */
.joueur {
    position: absolute;
    bottom: 0%;
    height: 60%;
    width: auto;
    object-fit: contain;
}

.joueur-gauche {
    left: 3%;
}

.joueur-droit {
    right: 3%;
    /*transform: scaleX(-1); !* 🔄 effet miroir horizontal *!*/
}

/* Textes */
.scoreboard {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    color: white;
    text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.8);
    font-family: 'Arial', sans-serif;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    pointer-events: none;
}

.match-title {
    font-size: 2.2vw;
    font-weight: bold;
    margin-top: 2%;
}

.score {
    font-size: 5vw;
    font-weight: bold;
    margin-bottom: 2%;
    position: relative;
    color: orange;
}

/* ✅ Barre animée type K2000 */
.knight-bar {
    position: relative;
    width: 120px;
    height: 6px;
    background: rgba(255, 255, 255, 0.15);
    margin: 10px auto 0;
    border-radius: 4px;
    overflow: hidden;
}

.knight-light {
    position: absolute;
    top: 0;
    left: 0;
    width: 30%;
    height: 100%;
    background: linear-gradient(90deg, rgba(255,0,0,0) 0%, #ff0000 50%, rgba(255,0,0,0) 100%);
    border-radius: 4px;
    animation: knightMove 1.2s linear infinite alternate;
}

@keyframes knightMove {
    0% {
        left: 0%;
    }
    100% {
        left: 70%;
    }
}

.minute {
    font-size: 2vw;
    font-weight: bold;
    margin-bottom: 2%;
}




.terrain-wrapper {
    position: relative;
    width: 100%;
    overflow: hidden;
    border-radius: 12px; /* optionnel */
}

/* Pour les écrans larges (desktop) */
@media (min-width: 768px) {
    .terrain-wrapper {
        aspect-ratio: 3 / 1; /* large bande panoramique */
    }
}

/* Pour les écrans petits (mobile) */
@media (max-width: 767px) {
    .terrain-wrapper {
        aspect-ratio: 16 / 9; /* plus haut sur mobile */
    }
}

.terrain-image {
    width: 100%;
    height: 100%;
    object-fit: contain; /* ✅ "contain" au lieu de "cover" sur mobile */
}

/* Pour les versions desktop, tu peux repasser à cover si tu veux un effet immersif */
@media (min-width: 768px) {
    .terrain-image {
        object-fit: cover;
    }
}





.match-tabs {
    margin-top: 20px;
    background-color: #0b1220;
    color: white;
    border-radius: 8px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
    overflow: hidden;
    font-family: Arial, sans-serif;
    width: 100%;
}

/* --- En-tête scrollable --- */
.tab-header {
    display: flex;
    flex-wrap: nowrap; /* pas de retour à la ligne */
    overflow-x: auto; /* permet le scroll horizontal */
    scrollbar-width: none; /* cache la scrollbar (Firefox) */
    -ms-overflow-style: none; /* IE */
    background-color: #111a33;
    border-bottom: 2px solid #ff0000;
    scroll-behavior: smooth;
}

/* Cache la scrollbar sur Chrome/Safari */
.tab-header::-webkit-scrollbar {
    display: none;
}

/* Boutons onglets */
.tab-btn {
    flex: 0 0 auto; /* ne pas se réduire */
    padding: 12px 18px;
    background: none;
    border: none;
    color: #bbb;
    cursor: pointer;
    font-size: 1rem;
    font-weight: bold;
    transition: color 0.3s, background-color 0.3s;
}

.tab-btn:hover {
    color: #fff;
    background-color: rgba(255, 255, 255, 0.1);
}

.tab-btn.active {
    color: #fff;
    background-color: #ff0000;
}

/* Corps des onglets */
.tab-body {
    display: none;
    padding: 20px;
    line-height: 1.6;
}

.tab-body.active {
    display: block;
}

/* ✅ Responsive : sur petit écran */
@media (max-width: 768px) {
    .tab-btn {
        font-size: 0.9rem;
        padding: 10px 14px;
    }
}







html, body {
    overflow-x: hidden;
    max-width: 100%;
}



@media (max-width: 780px) {
    .shell {
        grid-template-columns: 1fr;
        padding: 16px;             /* ✅ réduit le padding horizontal */
        max-width: 100%;           /* ✅ empêche tout dépassement */
        overflow-x: visible;       /* ✅ ne masque plus le contenu */
        box-sizing: border-box;
    }
}


.main, main {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    overflow-x: visible;
}


















/* === Timeline centrée avec deux côtés === */
.match-timeline {
    position: relative;
    width: 100%;
    max-width: 900px;
    margin: 40px auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 28px;
    padding: 0 40px;
}

/* Ligne centrale verticale */
.timeline-line {
    position: absolute;
    left: 50%;
    top: 0;
    bottom: 0;
    width: 3px;
    background: linear-gradient(180deg, var(--accent), var(--accent-2));
    transform: translateX(-50%);
    border-radius: 2px;
    opacity: 0.6;
}

/* === Événements === */
.event {
    position: relative;
    width: 100%;
    display: flex;
    align-items: center;
    min-height: 48px;
}

/* Contenu commun */
.event .content {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 10px 14px;
    box-shadow: var(--shadow);
    max-width: 30%;
    transition: transform 0.2s ease, background 0.2s ease;
}
.event .content:hover {
    transform: translateY(-2px);
    background: rgba(255,255,255,0.06);
}

.event .icon {
    font-size: 1.1rem;
    margin-right: 6px;
}
.event .desc {
    color: var(--text);
    font-size: 0.95rem;
}
.event .desc small {
    display: block;
    font-size: 0.85rem;
    color: var(--muted);
}

/* === Minute === */
.event .minute {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    font-weight: 700;
    color: var(--accent);
    font-size: 0.9rem;
    line-height: 1;
    opacity: .9;
}

/* === Événements gauche et droite === */
.event.left {
    justify-content: flex-end;
}
.event.right {
    justify-content: flex-start;
}

.event.left .content {
    margin-right: calc(50% + 55px);
    border-right: 3px solid var(--accent);
    text-align: right;
}
.event.right .content {
    margin-left: calc(50% + 55px);
    border-left: 3px solid var(--accent-2);
    text-align: left;
}

.event.left .minute {
    right: calc(50% + 10px);
    text-align: left;
}
.event.right .minute {
    left: calc(50% + 10px);
    text-align: right;
}

/* === Événements centraux (mi-temps, prolongations) === */
.event.center {
    justify-content: center;
}
.event.center .minute {
    background: var(--accent);
    color: #0b1220;
    padding: 6px 14px;
    border-radius: 999px;
    font-weight: 800;
}

/* === Responsive === */
/* === Responsive : affichage vertical à gauche === */
@media (max-width: 500px) {
    .match-timeline {
        padding: 0 10px;
    }

    /* Ligne à gauche */
    .timeline-line {
        left: 20px;
        transform: none;
    }

    /* Tous les événements passent du même côté */
    .event {
        justify-content: flex-start !important;
        text-align: left !important;
    }

    /* Les cartes à gauche de la ligne */
    .event .content {
        margin: 0 0 0 45px; /* espace entre la ligne et la carte */
        max-width: calc(100% - 60px);
        border-left: 3px solid var(--accent);
        border-right: none;
        text-align: left;
    }

    /* Les minutes se placent juste à gauche de la ligne */
    .event .minute {
        left: 0;
        right: auto;
        text-align: left;
        font-size: 0.85rem;
    }

    /* Centrer les événements comme "MT" */
    .event.center {
        justify-content: flex-start !important;
    }
    .event.center .minute {
        margin-left: 20px;
    }
}


.terrain-compo {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
}

.terrain-fond {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.player {
    position: absolute;
    width: 6%;
    border-radius: 50%;
    border: 2px solid white;
    transform: translate(-50%, -50%);
}

/* === ÉQUIPE GAUCHE : 4-3-3 (gardien à gauche) === */
.left-4_3_3-0 { left: 6%;  top: 50%; }   /* Gardien */
.left-4_3_3-1 { left: 16%; top: 30%; }
.left-4_3_3-2 { left: 16%; top: 45%; }
.left-4_3_3-3 { left: 16%; top: 55%; }
.left-4_3_3-4 { left: 16%; top: 70%; }
.left-4_3_3-5 { left: 32%; top: 35%; }
.left-4_3_3-6 { left: 32%; top: 50%; }
.left-4_3_3-7 { left: 32%; top: 65%; }
.left-4_3_3-8 { left: 40%; top: 35%; }
.left-4_3_3-9 { left: 40%; top: 50%; }
.left-4_3_3-10{ left: 40%; top: 65%; }

/* === ÉQUIPE DROITE : 4-3-3 (gardien à droite, positions miroir) === */
.right-4_3_3-0 { left: 94%; top: 50%; }   /* Gardien */
.right-4_3_3-1 { left: 84%; top: 30%; }
.right-4_3_3-2 { left: 84%; top: 45%; }
.right-4_3_3-3 { left: 84%; top: 55%; }
.right-4_3_3-4 { left: 84%; top: 70%; }
.right-4_3_3-5 { left: 68%; top: 35%; }
.right-4_3_3-6 { left: 68%; top: 50%; }
.right-4_3_3-7 { left: 68%; top: 65%; }
.right-4_3_3-8 { left: 50%; top: 35%; }
.right-4_3_3-9 { left: 50%; top: 50%; }
.right-4_3_3-10{ left: 50%; top: 65%; }














/* Mobile : tout passe en colonne unique et sans marge excessive */
@media (max-width: 768px) {
    .shell {
        grid-template-columns: 1fr;
        padding: 12px;
    }
    .terrain-wrapper,
    .match-timeline,
    .tab-header,
    .tab-body {
        width: 100%;
        max-width: 100%;
    }
    img, iframe, video {
        max-width: 100%;
        height: auto;
    }
}


/* === Ultra responsive fix — empêche tout overflow sous 400px === */
@media (max-width: 400px) {
    html, body, .shell, .panel, .main {
        width: 100%;
        max-width: 100%;
        overflow-x: hidden !important;
        padding: 0;
        margin: 0;
    }

    .shell {
        padding: 8px; /* réduit les marges globales */
        gap: 10px;
    }

    /* Boutons, cartes et onglets adaptatifs */
    .tab-btn,
    .circle-btn,
    .news-card,
    .match .col,
    .search-bar,
    .search-bar input {
        min-width: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        padding-left: 8px;
        padding-right: 8px;
    }

    /* Réduit le padding horizontal interne */
    .tab-body,
    .match-timeline,
    .panel,
    .rightbar,
    .sidebar {
        padding-left: 8px !important;
        padding-right: 8px !important;
    }

    /* Assouplir les flexbox et grilles */
    .tab-header,
    .matchlist,
    .newslist,
    .article-grid {
        flex-wrap: wrap !important;
        grid-template-columns: 1fr !important;
    }

    /* Rétrécit le centre du match */
    .rightbar .match .col {
        width: 56px !important;
        min-width: 56px !important;
    }

    /* Diminue la taille des textes et images */
    h1, h2, h3, h4 {
        font-size: clamp(1rem, 4vw, 1.3rem);
    }
    .match-title {
        font-size: 4vw;
    }
    .score {
        font-size: 7vw;
    }
}


/* === Correctif overflow spécifique 400–500px === */
@media (min-width: 400px) and (max-width: 500px) {
    html, body {
        width: 100%;
        max-width: 100%;
        overflow-x: hidden !important;
    }

    .shell,
    .main,
    .panel,
    .match-timeline,
    .tab-body,
    .terrain-wrapper,
    .rightbar,
    .sidebar {
        max-width: 100% !important;
        overflow-x: hidden !important;
        padding-left: 8px;
        padding-right: 8px;
    }

    /* 🧩 Force les flex et grilles à se replier */
    .tab-header,
    .matchlist,
    .newslist,
    .article-grid,
    .layout-page {
        flex-wrap: wrap !important;
        grid-template-columns: 1fr !important;
    }

    /* 🪶 Réduit largeur fixe souvent fautive */
    .rightbar .match .col,
    .tab-btn,
    .search-bar input {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }

    /* Ajuste les paddings qui dépassent légèrement */
    .panel,
    .main {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }
}


/** { outline: 1px solid red; }*/






/* === FICHES DE MATCHS (Fixtures) === */
.fixture-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 14px 18px;
    box-shadow: var(--shadow);
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.fixture-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 22px rgba(0,0,0,.45);
    border-color: rgba(255,255,255,.1);
}

.fixture-teams {
    display: flex;
    align-items: center;
    gap: 14px;
    flex: 1;
    min-width: 0;
}

.fixture-team {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.fixture-team img {
    width: 32px;
    height: 32px;
    object-fit: contain;
    filter: drop-shadow(0 2px 6px rgba(0,0,0,.35));
}

.fixture-team span {
    font-weight: 600;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.fixture-vs {
    font-weight: 800;
    color: var(--muted);
    margin: 0 10px;
    font-size: 14px;
}

.fixture-meta {
    text-align: right;
    font-size: 12px;
    color: var(--muted);
}

.fixture-meta .ref {
    color: var(--accent);
    font-weight: 600;
}

.fixture-card {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 14px 18px;
    margin-bottom: 10px;
    box-shadow: var(--shadow);
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
    box-sizing: border-box; /* essentiel pour éviter le débordement */
}



.fixtures-container {
    display: flex;
    flex-direction: column;
    width: 100%;
    gap: 10px;
}

.fixture-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 10px 16px;
    box-shadow: var(--shadow);
    transition: background 0.2s ease, transform 0.2s ease;
}

.fixture-card:hover {
    background: rgba(255,255,255,0.05);
    transform: translateY(-2px);
}

/* Heure à gauche */
.fixture-time {
    width: 70px;
    font-weight: 600;
    color: var(--accent);
    text-align: left;
}

/* Bloc central avec les équipes */
.fixture-center {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
    gap: 14px;
}

.fixture-team {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    color: var(--text);
}

.fixture-home span {
    text-align: right;
}

.fixture-away span {
    text-align: left;
}

/* Logos des équipes */
.fixture-team img {
    width: 28px;
    height: 28px;
    object-fit: contain;
    filter: drop-shadow(0 1px 4px rgba(0,0,0,0.4));
}

/* VS au centre */
.fixture-vs {
    font-weight: 700;
    color: var(--muted);
    font-size: 14px;
}

/* Arbitre ou lieu à droite */
.fixture-ref {
    width: 200px;
    text-align: right;
    color: var(--muted);
    font-size: 12px;
}


.fixture-card {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 16px 20px;
    margin-bottom: 12px;
    box-shadow: var(--shadow);
    overflow: visible;
    width: 100%;
    transition: transform 0.25s ease, background 0.25s ease;
}

.fixture-card:hover {
    background: rgba(255,255,255,0.05);
    transform: translateY(-2px);
}

/* Contenu principal au-dessus des images */
.fixture-content {
    position: relative;
    z-index: 2;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* Texte et logos */
.fixture-time {
    width: 70px;
    font-weight: 600;
    color: var(--accent);
    text-align: left;
}

.fixture-center {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
    gap: 14px;
}

.fixture-team {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    color: var(--text);
}

.fixture-team img {
    width: 28px;
    height: 28px;
    object-fit: contain;
}

.fixture-vs {
    font-weight: 700;
    color: var(--muted);
    font-size: 14px;
}

.fixture-ref {
    width: 200px;
    text-align: right;
    color: var(--muted);
    font-size: 12px;
}
.player-left,
.player-right {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 25%; /* par défaut un peu moins large */
    height: auto;
    z-index: 1;
    opacity: 0.95;
    pointer-events: none;
    filter: drop-shadow(0 4px 8px rgba(0,0,0,0.4));
    transition: width 0.3s ease, left 0.3s ease, right 0.3s ease;
}

/* Joueur gauche avancé vers le centre */
.player-left {
    left: 8%;
}

/* Joueur droit avancé vers le centre */
.player-right {
    right: 8%;
    transform: translateY(-50%) scaleX(-1);
}

/* Cartes : espacement vertical */
.fixture-card {
    margin-bottom: 5vw; /* s'adapte à la largeur de l'écran */
}

/* === RESPONSIVE === */

/* Grand écran : réduis la taille du joueur et augmente la marge */
@media (min-width: 1400px) {
    .player-left,
    .player-right {
        width: 18%;
    }
    .fixture-card {
        margin-bottom: 6vw;
    }
}

/* Écran moyen : comportement standard */
@media (max-width: 1200px) {
    .player-left,
    .player-right {
        width: 24%;
    }
    .fixture-card {
        margin-bottom: 60px;
    }
}

/* Tablettes et petits écrans : images plus petites */
@media (max-width: 900px) {
    .player-left,
    .player-right {
        width: 28%;
        opacity: 0.9;
    }
    .fixture-card {
        margin-bottom: 40px;
    }
}

/* Très petits écrans : supprime les joueurs si ça gêne la lecture */
@media (max-width: 400px) {
    .player-left,
    .player-right {
        display: none;
    }
    .fixture-card {
        margin-bottom: 20px;
    }
}



/* Isole les styles de la section des matchs */
.fixtures-container {
    width: 100%;
    max-width: 100%;
    overflow: hidden; /* empêche les images de dépasser sur mobile */
    margin-bottom: 40px;
}

.fixture-card {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 16px 20px;
    margin-bottom: 5vw;
    box-shadow: var(--shadow);
    overflow: visible;
    width: 100%;
    box-sizing: border-box;
    transition: transform 0.25s ease, background 0.25s ease;
}

.fixture-card:hover {
    background: rgba(255,255,255,0.05);
    transform: translateY(-2px);
}

/* Contenu centré */
.fixture-content {
    position: relative;
    z-index: 2;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
}

/* Images des joueurs */
.player-left,
.player-right {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 25%;
    max-width: 200px;
    height: auto;
    z-index: 1;
    opacity: 0.95;
    pointer-events: none;
    filter: drop-shadow(0 4px 8px rgba(0,0,0,0.4));
}

.player-left {
    left: 6%;
}

.player-right {
    right: 6%;
    transform: translateY(-50%) scaleX(-1);
}

/* === Responsive === */

/* Grand écran */
@media (min-width: 1400px) {
    .player-left, .player-right {
        width: 18%;
        max-width: 220px;
    }
}

/* Écran moyen */
@media (max-width: 1000px) {
    .player-left, .player-right {
        width: 22%;
        max-width: 160px;
    }
    .fixture-card {
        margin-bottom: 50px;
    }
}

/* Petits écrans : réduit et recadre */
@media (max-width: 700px) {
    .player-left, .player-right {
        width: 18%;
        opacity: 0.8;
    }
}

/* Très petits écrans (mobile < 500px) */
@media (max-width: 500px) {
    .player-left, .player-right {
        display: none; /* masque les images */
    }
    .fixture-card {
        margin-bottom: 20px;
        padding: 10px;
    }
    .fixture-content {
        flex-direction: column;
        text-align: center;
    }
    .fixture-time, .fixture-ref {
        text-align: center;
        width: 100%;
    }
}


.fixture-card {
    margin-bottom: 20px; /* marge par défaut */
}

.fixture-card.has-manga {
    margin-bottom: 60px; /* marge augmentée seulement si image présente */
}


.fixture-vs-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.fixture-vs {
    font-weight: bold;
    font-size: 18px;
    color: white;
    letter-spacing: 1px;
}

.fixture-hour {
    font-size: 14px;
    color: #ccc;
    margin-top: 4px;
}



.fixture-vs-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 60px;
}

.fixture-vs-block {
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* "VS" */
.fixture-vs {
    font-weight: bold;
    font-size: 18px;
    color: white;
}

/* Heure du match */
.fixture-hour {
    font-size: 14px;
    color: #aaa;
    margin-top: 3px;
}

/* Score */
.fixture-score {
    font-size: 18px;
    font-weight: bold;
    color: #00ff85; /* vert clair par défaut */
}

/* Si tu veux un style différent quand le match est en direct */
.fixture-vs-block.finished.live .fixture-score {
    color: #ffb347; /* orange pour match en cours */
    animation: pulse 1.5s infinite;
}

/* Effet "en direct" optionnel */
@keyframes pulse {
    0% { opacity: 1; }
    50% { opacity: 0.5; }
    100% { opacity: 1; }
}


.fixture-vs-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 60px;
}

.fixture-vs-block {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

/* VS + heure */
.fixture-vs {
    font-weight: bold;
    font-size: 18px;
    color: white;
}

.fixture-hour {
    font-size: 14px;
    color: #aaa;
    margin-top: 3px;
}

/* Score */
.fixture-score {
    font-size: 18px;
    font-weight: bold;
    color: #00ff85; /* vert pour match terminé */
}

/* Badge "EN COURS" */
.fixture-live-badge {
    color: #ff3b3b;
    font-size: 12px;
    font-weight: 600;
    margin-top: 4px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    animation: pulse-red 1.2s infinite;
}

/* Badge "EN COURS" */
.fixture-halftime-badge {
    color: #e89f9f;
    font-size: 12px;
    font-weight: 600;
    margin-top: 4px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    animation: pulse-red 1.2s infinite;
}

/* Animation de pulsation */
@keyframes pulse-red {
    0% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.6; transform: scale(1.05); }
    100% { opacity: 1; transform: scale(1); }
}

/* Optionnel : changer la couleur du score quand c'est en live */
.fixture-vs-block.live .fixture-score {
    color: #ffb347; /* orange clair pour match en cours */
}


.see-all-matches {
    display: flex;
    justify-content: center;
    margin-top: 25px;
}

.see-all-button {
    background: linear-gradient(90deg, #00648c, #022f59);
    color: white;
    font-weight: 600;
    text-decoration: none;
    padding: 12px 26px;
    border-radius: 8px;
    font-size: 16px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.25);
    transition: all 0.3s ease;
}

.see-all-button:hover {
    background: linear-gradient(90deg, #084159, #022f59);
    transform: translateY(-2px);
    box-shadow: 0 6px 14px rgba(0,0,0,0.3);
}



.fixture-center {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center; /* ✅ centre verticalement tout */
    gap: 10px;
}

.fixture-team {
    display: flex;
    align-items: center; /* ✅ centre logo + texte verticalement */
    justify-content: center; /* ✅ les deux équipes sont centrées horizontalement dans leur colonne */
    gap: 8px;
    height: 100%; /* ✅ s’aligne bien sur la hauteur du VS */
}

.fixture-team img {
    width: 28px;
    height: 28px;
    object-fit: contain;
    display: block;
}

.fixture-team span {
    line-height: 1; /* ✅ évite que le texte tire l’élément vers le haut */
    display: flex;
    align-items: center; /* ✅ centre verticalement le texte aussi */
}

.fixture-vs-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

.fixture-vs {
    font-weight: bold;
    font-size: 1.1rem;
    margin: 0;
    line-height: 1;
    text-align: center;
}

.fixture-hour {
    font-size: 0.85rem;
    color: #aaa;
    margin-top: 2px;
}


.fixture-team span {
    font-size: clamp(0.8rem, 2.5vw, 1.1rem);
    white-space: normal;
    word-break: break-word; /* ✅ coupe proprement sur deux lignes si besoin */
    text-align: center;
    line-height: 2.5;
}

@media (max-width: 600px) {
    .fixture-card {
        padding: 10px 12px;
    }

    .fixture-team img {
        width: 22px;
        height: 22px;
    }
}

/* --- Ajustement des joueurs sur mobile --- */
@media (max-width: 1408px) {
    .player-left {
        position: absolute;
        left: -20px; /* ✅ pousse le joueur plus à gauche */
        transform: translateY(-50%) scale(0.8); /* ✅ plus petit et centré verticalement */
        top: 50%;
        z-index: 0; /* ✅ derrière la carte mais pas le texte */
        opacity: 0.8;
    }

    .player-right {
        position: absolute;
        right: -20px; /* ✅ pousse le joueur plus à droite */
        transform: translateY(-50%) scale(0.8);
        top: 50%;
        z-index: 0;
        opacity: 0.8;
    }

    .fixture-card {
        position: relative;
        overflow: hidden; /* ✅ évite le débordement sur le bord de la carte */
    }

    .fixture-content {
        position: relative;
        z-index: 1; /* ✅ le texte passe toujours au-dessus des images */
    }
}


.league-title {
    text-align: center;
    font-size: 1.8em;
    margin: 40px 0 25px 0;
    position: relative;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.league-title::before,
.league-title::after {
    content: "";
    position: absolute;
    top: 50%;
    width: 40%;
    height: 2px;
    background-color: #444;
}

.league-title::before {
    left: 0;
}

.league-title::after {
    right: 0;
}


.league-title {
    text-align: center;
    font-size: 1.8em;
    margin: 40px 0 25px 0;
    position: relative;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 1px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
}

.league-title::before,
.league-title::after {
    content: "";
    position: absolute;
    top: 50%;
    width: 40%;
    height: 2px;
    background-color: #444;
}

.league-title::before {
    left: 0;
}

.league-title::after {
    right: 0;
}

.league-logo {
    width: 40px;
    height: 40px;
    object-fit: contain;
}


.league-title {
    text-align: center;
    font-size: 1.8em;
    margin: 40px 0 25px 0;
    position: relative;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 1px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap; /* ✅ évite que ça déborde sur mobile */
}

.league-title::before,
.league-title::after {
    content: "";
    position: absolute;
    top: 50%;
    width: 40%;
    height: 2px;
    background-color: #444;
    opacity: 0.7; /* ✅ plus léger visuellement */
}

.league-title::before {
    left: 0;
}

.league-title::after {
    right: 0;
}

.league-logo {
    width: 40px;
    height: 40px;
    object-fit: contain;
}

/* ✅ Correction responsive mobile */
@media (max-width: 600px) {
    .league-title {
        font-size: 1.4em;
        gap: 8px;
        margin: 30px 0 20px 0;
    }

    .league-title::before,
    .league-title::after {
        width: 25%; /* ✅ traits plus courts sur mobile */
    }

    .league-logo {
        width: 30px;
        height: 30px;
    }
}



/* === CLASSEMENT === */

.ranking-table {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 30px auto;
    max-width: 700px;
    width: 90%;
    color: #fff;
    font-size: 0.95rem;



    width: 90%;              /* 👈 prend toute la largeur */
    max-width: 90%;          /* 👈 empêche toute limitation */
    box-sizing: border-box;   /* 👈 important pour éviter le dépassement */
    border-collapse: collapse;
    /*border: 1px solid #ddd;*/
    border-radius: 8px;
    /*overflow-x: auto;         !* 👈 permet un scroll horizontal sur mobile si besoin *!*/
}

.ranking-header,
.ranking-row {
    display: grid;
    grid-template-columns: 40px 1fr 40px 40px 40px 40px 50px 50px;
    align-items: center;
    padding: 10px 15px;
    border-radius: 10px;
    background-color: rgba(255, 255, 255, 0.05);
}

.ranking-header {
    background-color: rgba(255, 255, 255, 0.1);
    font-weight: bold;
    text-transform: uppercase;
    font-size: 0.9rem;
}

.ranking-row:nth-child(odd) {
    background-color: rgba(255, 255, 255, 0.04);
}

.team-info {
    display: flex;
    align-items: center;
    gap: 8px;
}

.team-logo {
    width: 24px;
    height: 24px;
    object-fit: contain;
}

.points {
    font-weight: bold;
    color: #00ff88;
}

/* Responsive */
@media (max-width: 600px) {
    .ranking-header,
    .ranking-row {
        grid-template-columns: 30px 1fr 30px 30px 30px 30px 35px 35px;
        font-size: 0.8rem;
        padding: 8px 10px;
    }

    .team-logo {
        width: 20px;
        height: 20px;
    }
}


/* 🥇 Premier - Style Or Manga */
.first-place {
    /*background: radial-gradient(circle at top left, #fff7c2 0%, #ffd700 40%, #b8860b 100%);*/
    border: 2px solid #ffeb7b;
    /*box-shadow: 0 0 12px #ffd700aa, inset 0 0 8px #fff8dc;*/
    transform: scale(1.02);
    /*color: #3b2f00;*/
    font-weight: bold;
    font-family: 'Comic Neue', 'Bangers', cursive;
    letter-spacing: 1px;
    position: relative;
}
.first-place::before {
    content: "🥇";
    position: absolute;
    left: -28px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 22px;
}

/* 🥈 Deuxième - Style Argent Manga */
.second-place {
    /*background: radial-gradient(circle at top left, #f4f4f4 0%, #c0c0c0 45%, #808080 100%);*/
    border: 2px solid #e0e0e0;
    /*box-shadow: 0 0 10px #c0c0c0aa, inset 0 0 8px #fefefe;*/
    transform: scale(1.01);
    /*color: #2f2f2f;*/
    font-weight: bold;
    font-family: 'Comic Neue', 'Bangers', cursive;
    letter-spacing: 0.8px;
    position: relative;
}
.second-place::before {
    content: "🥈";
    position: absolute;
    left: -28px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 22px;
}

/* 🥉 Troisième - Style Bronze Manga */
.third-place {
    /*background: radial-gradient(circle at top left, #ffe0b2 0%, #cd7f32 40%, #8b4513 100%);*/
    border: 2px solid #eab676;
    /*box-shadow: 0 0 10px #cd7f32aa, inset 0 0 8px #f8e2c4;*/
    transform: scale(1.01);
    /*color: #3a1e00;*/
    font-weight: bold;
    font-family: 'Comic Neue', 'Bangers', cursive;
    letter-spacing: 0.8px;
    position: relative;
}
.third-place::before {
    content: "🥉";
    position: absolute;
    left: -28px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 22px;
}

/* 🔥 Animation et effet hover général pour les podiums */
.first-place:hover,
.second-place:hover,
.third-place:hover {
    transform: scale(1.05);
    transition: 0.2s ease-in-out;
    box-shadow: 0 0 18px rgba(255,255,255,0.7);
    cursor: pointer;
}



/* ⚔️ Forme récente */
.form-container {
    display: flex;
    gap: 4px;
    justify-content: center;
    align-items: center;
    margin-left: 8px;
}

.form-symbol {
    width: 22px;
    height: 22px;
    border-radius: 4px;
    font-weight: bold;
    font-family: 'Comic Neue', 'Bangers', cursive;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    text-shadow: 1px 1px 0 #000;
    box-shadow: 0 0 4px rgba(0,0,0,0.5);
    transform: rotate(-3deg);
}

/* 🥇 Victoire */
.form-symbol.win {
    background: radial-gradient(circle at top left, #5cff83, #00b42a);
    animation: bounceWin 0.5s ease;
}

/* ➖ Match nul */
.form-symbol.draw {
    background: radial-gradient(circle at top left, #ffe45c, #ffb800);
    animation: bounceDraw 0.5s ease;
}

/* ❌ Défaite */
.form-symbol.lose {
    background: radial-gradient(circle at top left, #ff7b7b, #c90000);
    animation: bounceLose 0.5s ease;
}

/* 💥 Petites animations style manga */
@keyframes bounceWin {
    0% { transform: scale(0.9) rotate(-5deg); }
    50% { transform: scale(1.1) rotate(3deg); }
    100% { transform: scale(1) rotate(0); }
}

@keyframes bounceDraw {
    0% { transform: scale(0.9) rotate(5deg); }
    50% { transform: scale(1.1) rotate(-2deg); }
    100% { transform: scale(1) rotate(0); }
}

@keyframes bounceLose {
    0% { transform: scale(0.9) rotate(-3deg); }
    50% { transform: scale(1.1) rotate(2deg); }
    100% { transform: scale(1) rotate(0); }
}



.ranking-row {
    display: grid;
    grid-template-columns: 30px 1fr 40px 40px 40px 40px 60px 120px 60px;
    align-items: center;
    gap: 8px;
}

/* pour que les icônes tiennent bien sur la même ligne */
.form-container {
    display: flex;
    justify-content: center;
    gap: 4px;
}

/* icônes de forme */
.form-symbol {
    width: 20px;
    height: 20px;
    border-radius: 4px;
    font-weight: bold;
    font-family: 'Comic Neue', 'Bangers', cursive;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    text-shadow: 1px 1px 0 #000;
    box-shadow: 0 0 4px rgba(0,0,0,0.5);
    font-size: 0.8rem;
}

/* couleurs */
.form-symbol.win  { background: linear-gradient(135deg, #22c55e, #16a34a); }
.form-symbol.draw { background: linear-gradient(135deg, #facc15, #eab308); color:#111; }
.form-symbol.lose { background: linear-gradient(135deg, #ef4444, #b91c1c); }




/* --- EN-TÊTE --- */
.ranking-header {
    display: grid;
    grid-template-columns: 40px minmax(120px, 1fr) repeat(5, minmax(40px, 1fr)) 60px;
    width: 100%;
    /*background-color: #f5f5f5;*/
    font-weight: bold;
    text-transform: uppercase;
    padding: 10px;
    box-sizing: border-box;
}

/* --- LIGNE DU CLASSEMENT --- */
.ranking-row {
    display: grid;
    grid-template-columns: 40px minmax(120px, 1fr) repeat(5, minmax(40px, 1fr)) 60px;
    width: 100%;
    align-items: center;
    padding: 10px;
    /*border-bottom: 1px solid #eee;*/
    box-sizing: border-box;
}

.ranking-row:last-child {
    border-bottom: none;
}

/* --- INFOS ÉQUIPE --- */
.team-info {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.team-logo {
    width: 24px;
    height: 24px;
    object-fit: contain;
}

.points {
    font-weight: bold;
    /*color: #1976d2;*/
    font-size: 26px;
}

/* --- FORMES RÉCENTES --- */
.form-container {
    display: flex;
    gap: 3px;
    justify-content: center;
}

.form-symbol {
    display: inline-block;
    width: 18px;
    height: 18px;
    text-align: center;
    border-radius: 3px;
    font-size: 0.8rem;
}

.form-symbol.win {
    background: #c8e6c9;
    color: #2e7d32;
}

.form-symbol.draw {
    background: #fff9c4;
    color: #f9a825;
}

.form-symbol.lose {
    background: #ffcdd2;
    color: #c62828;
}

/* --- RESPONSIVE MOBILE --- */
@media (max-width: 360px) {
    .ranking-header {
        display: none; /* on masque l’en-tête */
    }

    .ranking-row {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        padding: 12px;
    }

    .team-info {
        width: 100%;
        justify-content: flex-start;
    }

    .ranking-row span {
        width: 100%;
        display: flex;
        justify-content: space-between;
    }

    .form-container {
        width: 100%;
        justify-content: flex-start;
        margin-top: 6px;
    }
}


.card-image2 {
    width: 100%;
    height: 200px;
    object-fit: scale-down;
    /*background-color: #0a0a0a; !* couleur d’arrière-plan *!*/
    border-radius: 10px;
}









/* TERRAIN AVEC GRAIN MANGA */
.field {
    background: #0c3a1b;
    padding: 50px 20px;
    border-radius: 16px;
    position: relative;
    overflow: hidden;
    box-shadow: inset 0 0 60px rgba(0,0,0,.7);
}

/* SPEEDLINES MANGA DERRIÈRE LE TERRAIN */
.field::before {
    content: "";
    position: absolute;
    top:0; left:0; right:0; bottom:0;

    background: repeating-linear-gradient(
            115deg,
            rgba(255,255,255,0.03) 0px,
            rgba(255,255,255,0.03) 6px,
            rgba(0,0,0,0.05) 6px,
            rgba(0,0,0,0.05) 14px
    );

    opacity: 0.25;
    pointer-events: none;
}

/* GRID */
.formation-row {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    margin-bottom: 60px;
}

/* OUTLINE MANGA GROSSE ÉPAISSEUR */
.outline-manga {
    filter:
            drop-shadow(4px 4px 0 black)
            drop-shadow(-4px 4px 0 black)
            drop-shadow(4px -4px 0 black)
            drop-shadow(-4px -4px 0 black);
}

/* CARTE JOUEUR STYLE POSTER MANGA */
.player-card {
    text-align: center;
    padding: 8px;
    position: relative;
    cursor: pointer;
    width: 130px;
    margin: auto;
    transition: transform .2s ease;
}

.player-card:hover {
    transform: scale(1.08) rotate(-2deg);
}

/* SPEEDLINE INDIVIDUELLE DERRIÈRE CHAQUE JOUEUR */
.player-card::before {
    content: "";
    position: absolute;
    inset: -20px;
    background: repeating-linear-gradient(
            90deg,
            rgba(255,255,255,0.08) 0,
            rgba(255,255,255,0.08) 5px,
            transparent 5px,
            transparent 12px
    );
    z-index: -1;
    opacity: .35;
    transform: skew(-15deg);
}

/* CERCLE NUMÉRO STYLE KABOOM MANGA */
.player-number-circle {
    width: 75px;
    height: 75px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;

    font-size: 32px;
    font-weight: 900;

    border: 5px solid black;

    /* Effet explosion / impact */
    background-image:
            radial-gradient(circle at center,
            rgba(255,255,255,0.25) 0%, transparent 70%
            ),
            repeating-conic-gradient(
                    rgba(255,255,255,0.15) 0deg 30deg,
                    rgba(0,0,0,0.15) 30deg 60deg
            );

    box-shadow:
            0 0 0 6px white,
            0 0 0 12px black;
}

/* NOM STYLE MANGA SHOUT */
.player-name {
    margin-top: 10px;
    background: black;
    color: white;
    padding: 6px 10px;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 900;
    letter-spacing: 1px;

    transform: skew(-10deg);
    text-transform: uppercase;

    box-shadow:
            4px 4px 0 #ff1a1a,
            -4px -4px 0 #1a9bff;
}



/* HALO BLUE LOCK */
.halo-blue-lock {
    position: relative;
}

.halo-blue-lock::after {
    content: "";
    position: absolute;
    inset: -25px; /* largeur du halo */
    border-radius: 50%;

    /* Aura bleutée + glow électrique */
    background: radial-gradient(
            circle,
            rgba(0,150,255,0.55) 0%,
            rgba(0,110,255,0.35) 25%,
            rgba(0,80,255,0.22) 50%,
            transparent 70%
    );

    filter: blur(18px) brightness(1.8);
    z-index: -1;

    animation: bluelock-pulse 2.8s infinite ease-in-out;
}

/* Animation pulsée */
@keyframes bluelock-pulse {
    0% {
        transform: scale(0.95);
        opacity: 0.75;
    }
    50% {
        transform: scale(1.08);
        opacity: 1;
    }
    100% {
        transform: scale(0.95);
        opacity: 0.75;
    }
}

/* Effet lightning animé autour du halo */
.halo-blue-lock::before {
    content: "";
    position: absolute;
    inset: -40px;

    background: conic-gradient(
            from 0deg,
            rgba(0,255,255,0) 0deg,
            rgba(0,180,255,0.25) 60deg,
            rgba(0,255,255,0) 120deg,
            rgba(0,180,255,0.25) 180deg,
            rgba(0,255,255,0) 240deg,
            rgba(0,180,255,0.25) 300deg,
            rgba(0,255,255,0) 360deg
    );

    filter: blur(12px);
    border-radius: 50%;
    z-index: -2;

    animation: bluelock-rotate 4s linear infinite;
}

@keyframes bluelock-rotate {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}


/* Conteneur plein écran et centré */
.field-wrapper {
    width: 100%;
}

.field {
    width: min(1200px, 100%);   /* max 1200px, sinon 100% */
    margin: 0 auto;             /* centre le terrain */
    padding: 50px 20px;
    border-radius: 16px;
    position: relative;
    overflow: hidden;
    background: #0c3a1b;
    box-shadow: inset 0 0 60px rgba(0,0,0,.7);
}

/* Une rangée = toute la largeur, items espacés */
.formation-row {
    display: flex;
    justify-content: space-evenly;     /* espace les joueurs sur toute la largeur */
    align-items: flex-start;
    gap: clamp(12px, 3vw, 40px);       /* gap responsive */
    margin-bottom: clamp(30px, 7vw, 60px);
}

/* Cartes fluides */
.player-card {
    width: clamp(90px, 10vw, 130px);   /* s’adapte au viewport */
    text-align: center;
    padding: 8px;
    position: relative;
    cursor: pointer;
    transition: transform .2s ease;
}
.player-card:hover { transform: scale(1.08) rotate(-2deg); }

/* Cercle num + nom : tailles adaptatives */
.player-number-circle {
    width: clamp(58px, 7.5vw, 75px);
    height: clamp(58px, 7.5vw, 75px);
    font-size: clamp(22px, 3.2vw, 32px);
    border: 5px solid black;
    border-radius: 50%;
    display:flex; justify-content:center; align-items:center;
    background-image:
            radial-gradient(circle at center, rgba(255,255,255,0.25) 0%, transparent 70%),
            repeating-conic-gradient(rgba(255,255,255,0.15) 0deg 30deg, rgba(0,0,0,0.15) 30deg 60deg);
    box-shadow: 0 0 0 6px white, 0 0 0 12px black;
}

.player-name {
    margin-top: 10px;
    background: black;
    color: white;
    padding: 6px 10px;
    border-radius: 6px;
    font-size: clamp(11px, 1.6vw, 14px);
    font-weight: 900;
    letter-spacing: 1px;
    transform: skew(-10deg);
    text-transform: uppercase;
    box-shadow: 4px 4px 0 #ff1a1a, -4px -4px 0 #1a9bff;
}

/* Halo un peu moins envahissant pour éviter “pousser” l’item */
.halo-blue-lock::after { inset: -18px; }
.halo-blue-lock::before { inset: -28px; }

/* Ajustements mobiles : réduis le nombre d’items visibles par rangée si trop serré */
@media (max-width: 640px) {
    .formation-row { flex-wrap: wrap; justify-content: center; }
}




.player-card::after {
    content: "";
    position: absolute;
    inset: -15px;
    z-index: -2;
    background:
            radial-gradient(circle, rgba(0,0,0,0.25) 1px, transparent 1px);
    background-size: 6px 6px;
    opacity: 0.25;
    filter: contrast(200%);
    transform: rotate(5deg);
}

.player-card:hover {
    transform: scale(1.12) rotate(-3deg);
    filter: brightness(1.15) contrast(1.2);
}


.formation-row {
    position: relative;
}
.formation-row::before {
    content: "";
    position: absolute;
    inset: -40px 0;
    z-index: -1;

    background: repeating-linear-gradient(
            -65deg,
            rgba(255,255,255,0.06) 0px,
            rgba(255,255,255,0.06) 5px,
            transparent 5px,
            transparent 14px
    );

    animation: rowSpeed 5s linear infinite;
    opacity: .18;
}

@keyframes rowSpeed {
    from { background-position: 0 0; }
    to   { background-position: 600px 0; }
}







/* ==== TITLE ==== */
.subs-title {
    font-size: 28px;
    color: white;
    text-align: center;
    margin-bottom: 25px;
}

/* ==== GENERAL WRAPPER ==== */
.substitutes-wrapper {
    margin-top: 60px;
    padding: 20px;
}

/* ==== BLUE LOCK PANEL SPLITS ==== */
.subs-panel {
    display: flex;
    justify-content: center;
    gap: 25px;
    flex-wrap: wrap;
    padding: 20px;
}

/* ==== EACH SUBSTITUTE CARD ==== */
.subs-card {
    position: relative;
    width: 150px;
    padding: 20px 10px;
    border-radius: 10px;

    /* Panneau éclaté Blue Lock */
    clip-path: polygon(
            10% 0, 90% 0,
            100% 10%, 100% 90%,
            90% 100%, 10% 100%,
            0 90%, 0 10%
    );

    background: linear-gradient(145deg, #001a33, #004080);

    filter:
            drop-shadow(6px 6px 0 black)
            drop-shadow(-3px 3px 0 black)
            drop-shadow(3px -3px 0 black);
}

/* ==== BACKLIGHT / GLOW BEHIND PLAYER ==== */
.subs-bg-glow {
    position: absolute;
    inset: 0;
    border-radius: 10px;
    z-index: -1;
    background: radial-gradient(circle,
    rgba(0,120,255,0.8) 0%,
    rgba(0,120,255,0.4) 30%,
    rgba(0,120,255,0) 70%
    );
    filter: blur(20px);
}

/* ==== NUMBER CIRCLE ==== */
.subs-number {
    width: 65px;
    height: 65px;
    margin: 0 auto;
    border-radius: 50%;
    border: 4px solid black;
    font-size: 26px;
    font-weight: 900;
    display: flex;
    justify-content: center;
    align-items: center;

    background-image:
            radial-gradient(circle, rgba(255,255,255,0.25) 0%, transparent 70%),
            repeating-conic-gradient(
                    rgba(255,255,255,0.1) 0deg 20deg,
                    rgba(0,0,0,0.1) 20deg 40deg
            );

    box-shadow:
            0 0 0 6px white,
            0 0 0 12px black;
}

/* ==== NAME ==== */
.subs-name {
    margin-top: 14px;
    text-align: center;
    background: black;
    color: white;
    padding: 8px 6px;
    border-radius: 5px;
    font-size: 14px;
    font-weight: 900;
    text-transform: uppercase;

    box-shadow:
            4px 4px 0 #ff1a1a,
            -4px -4px 0 #1a9bff;
    transform: skew(-7deg);
}



.subs-photo-wrapper {
    position: relative;
    width: 95px;
    height: 95px;
    margin: 0 auto;
}

.subs-photo {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;

    border: 5px solid white;
    box-shadow:
            0 0 0 6px black,
            0 0 25px rgba(0,150,255,0.8);
}

/* Halo Blue Lock derrière la photo */
.subs-photo-wrapper::after {
    content: "";
    position: absolute;
    inset: -12px;
    border-radius: 50%;
    z-index: -1;

    background: radial-gradient(
            circle,
            rgba(0,150,255,0.65) 0%,
            rgba(0,120,255,0.35) 40%,
            rgba(0,80,255,0.0) 70%
    );

    filter: blur(12px);
}


/* Supprime le souligné bleu dans les fixtures */
.fixtures-container a {
    text-decoration: none;
    color: inherit;
}

.fixtures-container a:hover,
.fixtures-container a:focus,
.fixtures-container a:visited {
    text-decoration: none;
    color: inherit;
}
/* Conteneur avec retour à la ligne */
.week-selector {
    display: flex;
    flex-wrap: wrap;            /* ⬅️ Permet le retour à la ligne */
    gap: 10px;
    padding: 10px 0;
    white-space: normal !important; /* ⬅️ Autorise les retours */
}

/* Bouton date */
.week-date {
    padding: 10px 16px;
    border-radius: var(--radius);
    background: rgba(255,255,255,.05);
    border: 1px solid var(--border);
    color: var(--text);
    font-weight: 600;
    font-size: 14px;
    text-decoration: none;
    backdrop-filter: blur(6px);
    transition: .2s ease;
}

/* Active */
.week-date.active {
    background: linear-gradient(135deg, var(--accent), var(--accent-2));
    border-color: transparent;
    color: #0b1220;
    box-shadow: 0 6px 18px rgba(59,130,246,.5);
}

/* Responsive : réduire sur mobile */
@media (max-width: 600px) {
    .week-date {
        padding: 7px 12px;
        font-size: 13px;
    }
}


.week-selector {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 10px;
}

/* Boutons de dates */
.week-date {
    padding: 10px 16px;
    border-radius: var(--radius);
    background: rgba(255,255,255,.05);
    border: 1px solid var(--border);
    color: var(--text);
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}

.week-date.active {
    background: linear-gradient(135deg, var(--accent), var(--accent-2));
    border-color: transparent;
    color: #0b1220;
}

/* flèche */
.arrow-btn {
    padding: 8px 14px;
    border-radius: var(--radius);
    background: rgba(255,255,255,.07);
    border: 1px solid var(--border);
    color: var(--text);
    cursor: pointer;
}

/* collapse */
.collapse {
    display: none;
}
.collapse.open {
    display: block;
}

/* responsive */
@media (max-width: 600px) {
    .week-date {
        padding: 7px 12px;
        font-size: 13px;
    }
}


/* Container des dates */
.week-selector {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    transition: opacity 0.3s ease;
}

/* Bouton flèche */
.arrow-btn {
    background: transparent;
    border: none;
    cursor: pointer;
    font-size: 18px;
    transition: transform 0.3s ease;
    margin-left: 10px;
}



/* Animation des éléments lors du changement */
.week-date {
    opacity: 0;
    transform: translateY(-5px);
    animation: fadeSlideIn 0.3s forwards;
}

/* Animation d’apparition */
@keyframes fadeSlideIn {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}