/*
==================================================
  PAGE COUPES
  Compatible avec css-nv.css
==================================================
*/


/*
--------------------------------------------------
  CONTENEUR PRINCIPAL
--------------------------------------------------
*/


.coupes-page,
.coupe-page {

    width:100%;
    max-width:1200px;

    margin:30px auto;

    padding:0 20px;

}



/*
--------------------------------------------------
  TITRE PRINCIPAL
--------------------------------------------------
*/


.titre-page {


    background:
    linear-gradient(
        135deg,
        #123d7a,
        #1e62b8
    );


    color:white;


    border-radius:14px;


    padding:25px;


    text-align:center;


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


    margin-bottom:35px;

}



.titre-page h1 {

    margin:0;

    font-size:32px;

}







/*
--------------------------------------------------
  MENU DES TOURS (ANCRES)
--------------------------------------------------
*/

.menu-tours {

    display:flex;

    justify-content:center;

    flex-wrap:wrap;

    gap:10px;

    margin:25px 0 35px;

    padding:15px;

    background:#f5f9ff;

    border-radius:12px;

    box-shadow:
    0 4px 12px rgba(0,0,0,.08);

}



.menu-tours a {

    display:inline-block;

    background:
    linear-gradient(
        135deg,
        #123d7a,
        #1e62b8
    );

    color:white;

    text-decoration:none;

    font-weight:bold;

    padding:9px 18px;

    border-radius:20px;

    font-size:15px;

    transition:.25s;

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

}



.menu-tours a:hover {

    background:
    linear-gradient(
        135deg,
        #1e62b8,
        #2d7de0
    );

    transform:translateY(-2px);

}



/*
--------------------------------------------------
  RETOUR EN HAUT
--------------------------------------------------
*/


.retour-haut {

    display:inline-block;

    margin-top:20px;

    margin-bottom:10px;

    padding:6px 14px;

    background:#eef5ff;

    color:#123d7a;

    border-radius:15px;

    text-decoration:none;

    font-size:14px;

    font-weight:bold;

    transition:.25s;

}



.retour-haut:hover {

    background:#123d7a;

    color:white;

}




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


.grille-coupes {


    display:grid;


    grid-template-columns:

    repeat(

        auto-fit,

        minmax(280px,1fr)

    );


    gap:25px;

    margin-top:25px;


}





/*
--------------------------------------------------
  CARTE COUPE
--------------------------------------------------
*/


.coupe-bloc {


    background:white;


    border-radius:12px;


    padding:20px;


    box-shadow:

    0 4px 15px rgba(0,0,0,.10);


    border-top:

    5px solid #1e62b8;


}



.coupe-bloc h3 {


    margin-top:0;


    color:#123d7a;


    font-size:20px;


}





.coupe-form select {


    width:100%;


    min-height:130px;


    border-radius:8px;


    border:

    1px solid #ccd8e8;


    padding:8px;


    background:#f8fbff;


    color:#123d7a;


}





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


.navigation-saison {


    display:flex;


    justify-content:center;


    gap:25px;


    margin-bottom:35px;


    flex-wrap:wrap;


}



.navigation-saison a {


    background:#123d7a;


    color:white;


    padding:10px 18px;


    border-radius:8px;


    text-decoration:none;


}



.navigation-saison a:hover {

    background:#1e62b8;

}





/*
--------------------------------------------------
  CGLOBAL
--------------------------------------------------
*/


.cglobal {


    background:#f5f9ff;


    border-left:

    5px solid #1e62b8;


    padding:20px;


    margin-bottom:35px;


    border-radius:10px;


}





/*
--------------------------------------------------
  TOURS
--------------------------------------------------
*/


.tour-coupe {


    margin-bottom:45px;


}



.tour-coupe h2 {


    background:

    linear-gradient(

        90deg,

        #123d7a,

        #1e62b8

    );


    color:white;


    padding:15px 20px;


    border-radius:10px;


    font-size:24px;


}





/*
--------------------------------------------------
  MATCH
--------------------------------------------------
*/


.match-coupe {

    background:white;

    border-radius:10px;

    padding:8px 12px;

    margin-bottom:8px;

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

}






.date-coupe {

    text-align:center;

    color:#555;

    font-size:13px;

    font-weight:bold;

    margin-bottom:3px;

}







.rencontre-coupe {


    display:grid;


    grid-template-columns:

    1fr 100px 1fr;


    align-items:center;


    gap:15px;


}





.score-coupe {


    text-align:center;


    font-size:22px;


    font-weight:bold;


    color:#123d7a;


}





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


.club-domicile,
.club-exterieur {


    display:flex;


    align-items:center;


    gap:10px;


}



.club-exterieur {


    justify-content:flex-end;


}



.logo-club-coupe {


    width:40px;


    height:40px;


    object-fit:contain;


}





.club-domicile a,
.club-exterieur a {


    color:#123d7a;


    font-weight:bold;


    text-decoration:none;


}



.niveau-club {


    color:#666;


    font-size:14px;


}





/*
--------------------------------------------------
  VAINQUEUR
--------------------------------------------------
*/


.vainqueur a {


    color:#008000;


    font-weight:bold;


}





.club-domicile.vainqueur,
.club-exterieur.vainqueur {

    background:#dff5df !important;

    border:3px solid #198754;

    border-radius:10px;

    padding:10px;

}

.club-domicile.vainqueur a,
.club-exterieur.vainqueur a {

    color:#198754;

    font-weight:bold;

}






/*
--------------------------------------------------
  COMMENTAIRES
--------------------------------------------------
*/


.commentaire-tour {


    margin-top:20px;


    padding:15px;


    background:#f5f5f5;


    border-radius:8px;


    font-style:italic;


}





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


@media(max-width:700px){


    .coupes-page,
    .coupe-page {


        padding:0 10px;


    }



    .titre-page h1 {


        font-size:24px;


    }



    .rencontre-coupe {


        grid-template-columns:

        1fr;


        text-align:center;


    }



    .club-domicile,
    .club-exterieur {


        justify-content:center;


    }



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

.banniere-statfoot{

    width:100%;

    text-align:center;

    background:linear-gradient(135deg,#123d7a,#1e62b8);

    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;

    gap:0;

    background:#123d7a;

    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;

}


.menu a:hover{

    background:#1e62b8;

}


.menu a.actif{

    background:white;

    color:#123d7a;

}



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


.menu .icone{

    font-size:22px;

    line-height:1;

}


.menu .texte{

    font-size:15px;

}



/* =====================================================
   LOGO ACCUEIL DANS MENU
===================================================== */


.logo-menu{

    width:26px;

    height:26px;

    object-fit:contain;

}



/* =====================================================
   RESPONSIVE TABLETTE
===================================================== */


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


    .menu{

        flex-wrap:wrap;

        padding:8px;

    }


    .menu a{

        flex:1 1 33%;

        padding:12px 8px;

    }


}



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


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


    .banniere-statfoot h1{

        font-size:22px;

    }


    .banniere-statfoot p{

        display:none;

    }


    .logo-statfoot{

        width:90px;

        height:90px;

    }


    .menu{

        flex-direction:column;

        align-items:stretch;

    }


    .menu a{

        width:100%;

    }


}
/* =====================================================
   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:blue;

    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;

}