/*
========================================
PLANNING ENTRAINEMENT
========================================
*/


#planning-entrainement {

    width:100%;

    max-width:100%;

    overflow:visible;

}



.planning-entrainement-section {

    width:100%;

    max-width:100%;

}






/*
========================================
TABLEAU
========================================
*/


.planning-entrainement-table-wrapper {

    width:100%;

    max-width:100%;

    overflow-x:auto;

}



.planning-entrainement-table {


    width:100%;

    max-width:100%;

    border-collapse:collapse;

    table-layout:fixed;

}





.planning-entrainement-table th,

.planning-entrainement-table td {


    border-right:1px solid #d0d0d0;

    border-bottom:1px solid #d0d0d0;


    padding:2px;


    text-align:center;


    vertical-align:middle;


}




[data-theme="dark"] .planning-entrainement-table th,

[data-theme="dark"] .planning-entrainement-table td {


    border-color:#555;

}






/*
========================================
ENTETE
========================================
*/


.planning-entrainement-table th {


    background:var(--color-evenement2);


    color:var(--color-title);


    font-weight:bold;


    padding:12px 5px;


}






/*
========================================
COLONNE HEURES
========================================
*/


.planning-entrainement-table td:first-child {


    width:70px;


    color:var(--color-text);


    background:var(--color-bg);


    font-weight:bold;


    white-space:nowrap;


}






/*
========================================
BORDURES HEURES
========================================
*/


.planning-entrainement-table tr:nth-child(4n+1) td {


    border-top:3px solid #000;


}






/*
========================================
BLOCS CRENEAUX
========================================
*/


.planning-entrainement-table td:has(.planning-entrainement-bloc) {

    padding:3px;

}




.planning-entrainement-table td {

    height:1px;

}





.planning-entrainement-bloc {


    width:100%;


    min-height:100%;


    height:100%;


    box-sizing:border-box;


    display:flex;


    align-items:center;


    justify-content:center;


    padding:4px 6px;


    margin:0;


    border-radius:8px;


    background:var(--couleur);


    color:#fff;


    font-size:13px;


    font-weight:700;


    line-height:1.2;


}







/*
========================================
SEPARATIONS
========================================
*/


#planning-entrainement hr {


    width:100%;


    border:0;


    border-top:2px solid var(--color-primary);


    margin:35px 0;


}







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


.planning-entrainement-cartes {


    width:100%;


    display:flex;


    flex-direction:column;


    gap:25px;


}





.planning-entrainement-carte {


    width:100%;


    max-width:100%;


    box-sizing:border-box;


    display:flex;


    justify-content:space-between;


    align-items:center;


    gap:30px;


    padding:25px;


    background:var(--color-bg);


    color:var(--color-text);


    border-radius:12px;


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


}







.planning-entrainement-contenu {


    flex:1;


    min-width:0;


}







.planning-entrainement-carte h3 {


    margin:0 0 15px;


    color:var(--color-title);


}






.planning-entrainement-carte p {


    margin:3px 0;


    font-weight:600;


}







/*
========================================
DESCRIPTION
========================================
*/


.planning-entrainement-description {


    margin:15px 0 0 0;


    padding-left:20px;


}



.planning-entrainement-description li {


    margin-bottom:6px;


    line-height:1.4;


}






/*
========================================
IMAGE
========================================
*/


.planning-entrainement-image {


    width:250px;


    flex-shrink:0;


}




.planning-entrainement-image img {


    width:100%;


    height:auto;


    display:block;


    border-radius:10px;


}







/*
========================================
RESPONSIVE MOBILE
========================================
*/


@media(max-width:768px){



    .planning-entrainement-table {


        min-width:700px;


    }






    .planning-entrainement-carte {


        display:flex;


        flex-direction:column;


        align-items:stretch;


        width:100%;


        gap:20px;


        padding:20px;


    }





    .planning-entrainement-contenu {


        display:block;


        width:100%;


        order:2;


    }






    .planning-entrainement-image {


        width:100%;


        order:1;


    }





    .planning-entrainement-image img {


        width:100%;


        height:auto;


    }





    .planning-entrainement-horaires {


        width:100%;


    }





    .planning-entrainement-carte p {


        display:block;


        width:100%;


        margin:6px 0;


    }





    .planning-entrainement-description {


        display:block;


        width:100%;


        margin-top:15px;


    }



}