/* =====================================================
   VARIABLES GLOBALES
===================================================== */

:root{

    --bleu-fonce:#123d7a;
    --bleu:#1e62b8;
    --bleu-clair:#dceaff;
    --fond-clair:#f2f6ff;
    --gris:#666;
    --blanc:#fff;

}


/* =====================================================
   RECHERCHE CLUB
===================================================== */

.recherche-club{

    padding:25px;
    text-align:center;
    background:#fafafa;

}


.recherche-club input{

    width:100%;
    max-width:350px;
    padding:12px;
    border:1px solid #ccc;
    border-radius:8px;
    font-size:16px;
    box-sizing:border-box;

}


.recherche-club button{

    padding:12px 20px;
    margin-left:10px;
    background:var(--bleu);
    color:white;
    border:none;
    border-radius:8px;
    cursor:pointer;

}


.recherche-club button:hover{

    background:var(--bleu-fonce);

}


/* =====================================================
   RESULTATS RECHERCHE
===================================================== */


#resultatsRecherche{

    margin-top:10px;
    background:white;
    border:1px solid #ddd;
    border-radius:5px;

}


.resultat-club{

    padding:10px;
    border-bottom:1px solid #eee;

}


.resultat-club:last-child{

    border-bottom:none;

}


.resultat-club a{

    font-weight:bold;
    text-decoration:none;

}


.resultat-club span{

    float:right;
    color:#777;

}


.resultat-club:hover{

    background:#f5f5f5;

}



/* =====================================================
   NAVIGATION COMPETITION
===================================================== */


.navigation-europe{

    width:90%;
    max-width:900px;
    margin:25px auto;

    display:flex;
    justify-content:space-between;
    align-items:center;

    background:white;

    padding:15px 25px;

    border-radius:12px;

    box-shadow:
    0 5px 20px rgba(0,0,0,.10);

    font-family:Arial,Helvetica,sans-serif;

}


.navigation-europe a{

    color:var(--bleu-fonce);
    font-weight:bold;
    text-decoration:none;

}


.navigation-europe a:hover{

    color:var(--bleu);

}



/* =====================================================
   ETIQUETTES COMPETITIONS
===================================================== */


.etiquettes-competition{

    display:flex;
    flex-wrap:wrap;
    gap:15px;
    padding:25px;

}


.etiquette-europe{

    background:
    linear-gradient(135deg,var(--bleu-fonce),var(--bleu));

    color:white;

    padding:14px 22px;

    border-radius:25px;

    text-decoration:none;

    font-weight:bold;

    transition:.2s;

}


.etiquette-europe:hover{

    transform:translateY(-3px);

    box-shadow:
    0 5px 15px rgba(0,0,0,.20);

}



/* =====================================================
   TITRES CATEGORIES
===================================================== */


.titre-categorie{

    margin:25px 30px 10px;

    color:var(--bleu-fonce);

    font-size:22px;

    border-left:6px solid var(--bleu);

    padding-left:15px;

}



/* =====================================================
   PAYS
===================================================== */


.liste-pays-europe{

    display:grid;

    grid-template-columns:repeat(4,1fr);

    gap:15px;

    padding:25px;

}


.etiquette-pays{

    background:var(--fond-clair);

    border:1px solid #d9e5f8;

    padding:15px;

    border-radius:10px;

    color:var(--bleu-fonce);

    text-decoration:none;

    font-weight:bold;

    text-align:center;

}


.etiquette-pays span{

    display:block;

    font-size:13px;

    color:#666;

    margin-top:5px;

}


.etiquette-pays:hover{

    background:#eaf2ff;

}



/* =====================================================
   CARTES CLUBS
===================================================== */


.liste-clubs-europe{

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:20px;

    padding:25px;

}



.carte-club-europe{

    background:white;

    border-radius:12px;

    padding:20px;

    display:flex;

    align-items:center;

    gap:20px;

    box-shadow:
    0 5px 15px rgba(0,0,0,.10);

}



.carte-club-europe img{

    width:70px;

    height:70px;

    object-fit:contain;

}



.carte-club-europe a{

    color:var(--bleu-fonce);

    font-weight:bold;

    font-size:18px;

    text-decoration:none;

}


.carte-club-europe a:hover{

    color:var(--bleu);

}


.carte-club-europe span{

    color:#666;

    font-size:14px;

}



/* =====================================================
   MATCHS EUROPE
===================================================== */


.match-europe{

    background:white;

    border-bottom:1px solid #eee;

    padding:18px 25px;

}



.match-infos{

    display:flex;

    gap:25px;

    color:#666;

    font-size:14px;

    margin-bottom:15px;

}



.match-niveau{

    color:var(--bleu-fonce);

    font-weight:bold;

}



.match-equipes{

    display:grid;

    grid-template-columns:

    1fr 90px 1fr;

    align-items:center;

}



.equipe a{

    display:flex;

    align-items:center;

    gap:15px;

    color:#333;

    text-decoration:none;

    font-size:16px;

    font-weight:bold;

}



.equipe img{

    width:55px;

    height:55px;

    object-fit:contain;

}



.equipe-gauche{

    justify-self:end;

}


.equipe-droite{

    justify-self:start;

}



.zone-score{

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    min-width:90px;

}



.match-date{

    font-size:12px;

    font-weight:bold;

    color:#555;

    margin-bottom:5px;

}



.match-score{

    text-align:center;

    font-size:22px;

    font-weight:bold;

}



.score-victoire{

    color:#159447;

}


.score-nul{

    color:#d98200;

}


.score-defaite{

    color:#d00000;

}


.score-normal{

    color:#111;

}


/* =====================================================
   CLUB FRANCAIS
===================================================== */


.club-francais{

    background:var(--bleu-clair);

    border-radius:10px;

    padding:8px 12px;

    box-shadow:
    0 2px 8px rgba(18,61,122,.20);

    font-weight:bold;

}

/* =====================================================
   BANNIERE STATFOOT
===================================================== */


.banniere-statfoot{

    width:100%;

    text-align:center;

    background:
    linear-gradient(135deg,var(--bleu-fonce),var(--bleu));

    color:white;

    padding:20px 10px;

    box-sizing:border-box;

}



.logo-statfoot{

    width:120px;

    height:120px;

    object-fit:contain;

    display:block;

    margin:0 auto 10px auto;

}



.banniere-statfoot h1{

    margin:0;

    font-size:32px;

}



.banniere-statfoot p{

    margin:8px 0 0;

    color:#dceaff;

    font-size:16px;

}



/* =====================================================
   MENU PRINCIPAL
===================================================== */


.menu{

    width:100%;

    display:flex;

    justify-content:center;

    align-items:center;

    flex-wrap:wrap;

    background:var(--bleu-fonce);

    padding:0 10px;

    box-sizing:border-box;

}



.menu a{

    display:flex;

    align-items:center;

    justify-content:center;

    gap:8px;

    padding:14px 16px;

    color:white;

    text-decoration:none;

    font-size:15px;

    font-weight:bold;

    white-space:nowrap;

    box-sizing:border-box;

    flex:0 1 auto;

}



.menu a:hover{

    background:var(--bleu);

}



.menu a.actif{

    background:white;

    color:var(--bleu-fonce);

}



/* =====================================================
   ICONES MENU
===================================================== */


.menu .icone{

    font-size:22px;

    line-height:1;

}



.menu .texte{

    font-size:15px;

}



/* =====================================================
   LOGO MENU
===================================================== */


.logo-menu{

    width:26px;

    height:26px;

    object-fit:contain;

}



/* =====================================================
   TITRES PAGES EUROPE
===================================================== */


.titre-page-europe{

    width:90%;

    max-width:900px;

    margin:35px auto 25px auto;

    padding:25px 30px;

    background:
    linear-gradient(135deg,var(--bleu-fonce),var(--bleu));

    border-radius:12px;

    box-shadow:
    0 8px 25px rgba(0,0,0,.12);

    color:white;

    box-sizing:border-box;

}



.titre-page-europe h1{

    margin:0;

    font-size:38px;

    font-weight:bold;

    letter-spacing:.5px;

}



.titre-page-europe h2{

    margin:14px 0 0 0;

    font-size:20px;

    font-weight:normal;

    color:#dceaff;

    border-top:
    1px solid rgba(255,255,255,.25);

    padding-top:14px;

}



/* =====================================================
   SAISONS
===================================================== */


.liste-saisons-europe{

    display:flex;

    flex-wrap:wrap;

    gap:8px;

    margin:12px 0 25px 0;

}



.etiquette-saison{

    display:inline-block;

    padding:7px 14px;

    background:#f3f7fc;

    border:1px solid #b8cce8;

    border-radius:18px;

    color:#0b4f9c;

    text-decoration:none;

    font-size:14px;

    font-weight:bold;

    transition:.2s;

}



.etiquette-saison:hover{

    background:#0b4f9c;

    color:white;

    border-color:#0b4f9c;

    transform:translateY(-2px);

    box-shadow:
    0 3px 10px rgba(0,0,0,.18);

}



/* =====================================================
   NOM COMPETITION
===================================================== */


.nom-competition{

    font-size:22px;

    font-weight:bold;

    color:#0b4f9c;

    margin:30px 0 10px 0;

    padding-bottom:8px;

    border-bottom:
    3px solid #d9e6f7;

}



/* =====================================================
   TITRES BLOCS EUROPE
===================================================== */


.titre-bloc-europe{

    width:90%;

    max-width:900px;

    margin:30px auto 15px auto;

    padding:12px 20px;

    background:
    linear-gradient(135deg,#eaf2fb,#d6e6f8);

    border-left:
    6px solid var(--bleu-fonce);

    border-radius:8px;

    color:var(--bleu-fonce);

    font-size:24px;

    font-weight:bold;

    box-shadow:
    0 3px 10px rgba(0,0,0,.08);

    box-sizing:border-box;

}



/* =====================================================
   ETIQUETTES CHAMPIONNATS
===================================================== */


.etiquette-championnat{

    background:var(--fond-clair);

    border:1px solid #d9e5f8;

    padding:18px;

    border-radius:12px;

    color:var(--bleu-fonce);

    text-decoration:none;

    font-weight:bold;

    text-align:center;

    transition:.2s;

}



.etiquette-championnat:hover{

    background:#eaf2ff;

    transform:translateY(-3px);

    box-shadow:
    0 5px 15px rgba(0,0,0,.15);

}



.etiquette-championnat .titre-etiquette{

    font-size:18px;

}



.etiquette-championnat .nombre-etiquette{

    display:block;

    margin-top:8px;

    font-size:14px;

    color:#666;

}


/* =====================================================
   RESPONSIVE GLOBAL - TABLETTE
===================================================== */


@media screen and (max-width:1100px){


    /* -------------------------
       GRILLES
    ------------------------- */


    .liste-clubs-europe{

        grid-template-columns:repeat(2,1fr);

    }


    .liste-pays-europe{

        grid-template-columns:repeat(2,1fr);

    }



    /* -------------------------
       MENU
    ------------------------- */


    .menu{

        flex-wrap:wrap;

        padding:8px;

    }


    .menu a{

        flex:1 1 160px;

    }



    /* -------------------------
       NAVIGATION
    ------------------------- */


    .navigation-europe{

        flex-direction:column;

        gap:15px;

        text-align:center;

    }



}



/* =====================================================
   RESPONSIVE TELEPHONE
===================================================== */


@media screen and (max-width:600px){



    /* -------------------------
       BANNIERE
    ------------------------- */


    .banniere-statfoot h1{

        font-size:22px;

    }


    .banniere-statfoot p{

        display:none;

    }


    .logo-statfoot{

        width:90px;

        height:90px;

    }



    /* -------------------------
       MENU MOBILE
    ------------------------- */


    .menu{

        flex-direction:column;

        align-items:stretch;

    }


    .menu a{

        width:100%;

        justify-content:center;

    }



    /* -------------------------
       TITRES
    ------------------------- */


    .titre-page-europe{

        padding:20px;

    }


    .titre-page-europe h1{

        font-size:28px;

    }


    .titre-page-europe h2{

        font-size:17px;

    }


    .titre-bloc-europe{

        font-size:20px;

        padding:12px 15px;

    }



    /* -------------------------
       RECHERCHE
    ------------------------- */


    .recherche-club button{

        margin-left:0;

        margin-top:10px;

        width:100%;

        max-width:350px;

    }



    /* -------------------------
       GRILLES MOBILE
    ------------------------- */


    .liste-clubs-europe{

        grid-template-columns:1fr;

        padding:15px;

    }


    .liste-pays-europe{

        grid-template-columns:1fr;

        padding:15px;

    }



    /* -------------------------
       CARTES CLUBS
    ------------------------- */


    .carte-club-europe{

        padding:15px;

        gap:15px;

    }


    .carte-club-europe img{

        width:55px;

        height:55px;

    }


    .carte-club-europe a{

        font-size:16px;

    }



    /* -------------------------
       MATCHS MOBILE
    ------------------------- */


    .match-europe{

        padding:15px;

    }


    .match-infos{

        flex-direction:column;

        gap:5px;

    }


    .match-equipes{

        grid-template-columns:

        1fr 70px 1fr;

    }


    .equipe a{

        flex-direction:column;

        gap:5px;

        text-align:center;

        font-size:14px;

    }


    .equipe img{

        width:45px;

        height:45px;

    }


    .match-score{

        font-size:20px;

    }



    /* -------------------------
       ETIQUETTES
    ------------------------- */


    .etiquettes-competition{

        padding:15px;

    }


    .etiquette-europe{

        width:100%;

        text-align:center;

    }


    .liste-saisons-europe{

        gap:6px;

    }


}
/*====================================================
TABLEAU SIMPLE 3 COLONNES
====================================================*/

.table-simple {
    width: 100%;
    border-collapse: collapse;
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 6px 18px rgba(0,0,0,.08);
    font-size: 15px;
}

.table-simple tr:not(:last-child) {
    border-bottom: 1px solid #ececec;
}

.table-simple td {
    padding: 12px 16px;
    vertical-align: middle;
}

/* Rang */
.table-simple .col-rang {
    width: 60px;
    text-align: center;
    font-weight: 700;
    color: #666;
    white-space: nowrap;
}

/* Club */
.table-simple .col-club {
    width: auto;
    color: #1d3557;
    font-weight: 600;
}

/* Valeur */
.table-simple .col-score {
    width: 90px;
    text-align: right;
    font-weight: 700;
    color: #222;
    white-space: nowrap;
}

/* Survol */
.table-simple tbody tr:hover {
    background: #f7f9fc;
}

/* ==========================
   Responsive
========================== */

@media (max-width:768px){

    .table-simple{
        font-size:14px;
    }

    .table-simple td{
        padding:10px 8px;
    }

    .table-simple .col-rang{
        width:40px;
    }

    .table-simple .col-score{
        width:70px;
    }

    .table-simple .col-club{
        font-size:14px;
        color:#1d3557;
    }

}

}
.footer-link {
    color:white;
}