/*====================================================
                ÉVÉNEMENTS ACCUEIL
====================================================*/

.events-grid{

    display:grid;

    grid-template-columns:repeat(3, minmax(300px, 380px));

    justify-content:center;

    gap:50px;

    margin-top:30px;



}


.event-card{

    width:100%;

    min-height:240px;

    background:#fff;

    border:1px solid var(--border);

    padding:25px;

    box-shadow:var(--shadow);

    transition:.25s;

box-shadow:0 6px 18px rgba(0,0,0,.06);

}

.event-card:hover{

    transform:translateY(-4px);

    border-color:var(--primary);

}

.event-date{

    background:linear-gradient(
        90deg,
        var(--primary),
        #9b6a3d
    );

    color:#fff;

    margin:-25px -25px 20px -25px;

    padding:14px;

    text-align:center;

    font-size:1rem;

    font-weight:700;

    letter-spacing:1px;

    text-transform:uppercase;

   border-radius:8px 8px 0 0;

}

.event-card h3{

    font-size:1.45rem;

    color:var(--text);

    padding-bottom:12px;

    margin-bottom:18px;

    border-bottom:2px solid rgba(164,110,56,.25);

}

.event-card p{

    margin-bottom:10px;

    color:var(--text-light);

    line-height:1.5;

}

.event-description{

    margin-top:15px;

    padding-top:15px;

    border-top:1px solid var(--border);

    font-size:.95rem;

}

.event-card i{

    color:var(--primary);

    width:22px;

    text-align:center;

    margin-right:8px;

}

.badge{

    display:inline-block;

    padding:6px 12px;

    border-radius:6px;

    font-size:.85rem;

    font-weight:600;

    color:#fff;

}

.badge-success{

    background:#28a745;

}

.badge-danger{

    background:#dc3545;

}

/*====================================================
                    ÉVÉNEMENTS
====================================================*/

.events{

    padding:50px 0 80px;

    min-height:100vh;

}

.events .container{

    max-width:1400px;

    margin:auto;

    padding:0 25px;

}


/*====================================================
                    HEADER
====================================================*/

.events-header{

    text-align:center;

    margin-bottom:45px;

}

.events-header h1{

    font-family:'Oswald',sans-serif;

    font-size:42px;

    color:var(--primary);

    margin-bottom:10px;

}

.events-header p{

    color:#777;

    font-size:17px;

}


/*====================================================
                    FILTRES
====================================================*/

.events-filters{

    margin-bottom:35px;

}

.events-search{

    display:grid;

    grid-template-columns:2fr 1fr 1fr 1fr auto;

    gap:18px;

    align-items:center;

}

.events-search input,
.events-search select{

    width:100%;

    height:48px;

    padding:0 16px;

    border:1px solid #DDD;

    border-radius:12px;

    background:#FFF;

    font-size:15px;

    transition:.25s;

}

.events-search input:focus,
.events-search select:focus{

    outline:none;

    border-color:var(--primary);

    box-shadow:0 0 0 4px rgba(139,94,52,.15);

}

.btn-search{

    height:48px;

    padding:0 24px;

    border:none;

    border-radius:12px;

    background:var(--primary);

    color:#FFF;

    font-weight:600;

    cursor:pointer;

    transition:.25s;

}

.btn-search:hover{

    background:#6d4829;

}


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

.events-table{

    width:100%;

    background:#FFF;

    border-radius:18px;

    overflow:hidden;

    box-shadow:var(--shadow);

}


/*====================================================
                EN-TÊTE DU TABLEAU
====================================================*/

.events-head{

    display:grid;

    grid-template-columns:

        140px
        2fr
        180px
        220px
        100px
        140px;

    align-items:center;

    background:var(--primary);

    color:#FFF;

    font-weight:600;

    padding:18px 22px;

}

.events-head div{

    font-size:15px;

}

/*====================================================
                LIGNES DU TABLEAU
====================================================*/

.events-row{

    display:grid;

    grid-template-columns:

        140px
        2fr
        180px
        220px
        100px
        140px;

    align-items:center;

    padding:18px 22px;

    border-bottom:1px solid #ECECEC;

    transition:.25s;

}

.events-row:last-child{

    border-bottom:none;

}

.events-row:nth-child(even){

    background:#FCFAF8;

}

.events-row:hover{

    background:#F5EEE7;

}


/*====================================================
                    COLONNES
====================================================*/

.events-row div{

    color:#555;

    font-size:15px;

    line-height:1.5;

}

.events-row div:first-child{

    font-weight:700;

    color:var(--primary);

}

.events-row div:nth-child(2){

    font-weight:600;

    color:#222;

}


/*====================================================
                    BADGES
====================================================*/

.badge{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:7px 14px;

    border-radius:999px;

    font-size:13px;

    font-weight:600;

}

.badge-success{

    background:#DFF7E5;

    color:#1D7A38;

}

.badge-danger{

    background:#FDE3E3;

    color:#C62828;

}

.badge-week{

    background:#FFF3CD;

    color:#A86B00;

}

.badge-today{

    background:#E3F2FD;

    color:#1565C0;

}


/*====================================================
                AUCUN ÉVÉNEMENT
====================================================*/

.events-empty{

    padding:50px;

    text-align:center;

    color:#888;

    font-size:17px;

}

/*====================================================
                TRANSITIONS
====================================================*/

.events-table{

    transition:.30s;

}

.events-head div,
.events-row div{

    overflow:hidden;

    text-overflow:ellipsis;

    white-space:nowrap;

}


/*====================================================
                    SCROLL
====================================================*/

.events-table{

    overflow-x:auto;

}

.events-table::-webkit-scrollbar{

    height:8px;

}

.events-table::-webkit-scrollbar-thumb{

    background:#D4C3B2;

    border-radius:20px;

}

.events-table::-webkit-scrollbar-track{

    background:#F7F3EE;

}


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

@media(max-width:1200px){

.events-search{

    grid-template-columns:1fr 1fr;

}

.btn-search{

    width:100%;

}

.events-head,
.events-row{

    grid-template-columns:

        120px
        220px
        170px
        180px
        90px
        130px;

}

}


@media(max-width:900px){

.events{

    padding:40px 0;

}

.events-header h1{

    font-size:34px;

}

.events-search{

    grid-template-columns:1fr;

}

.events-head{

    display:none;

}

.events-row{

    display:flex;

    flex-direction:column;

    align-items:flex-start;

    gap:10px;

    padding:22px;

}

.events-row div{

    width:100%;

    white-space:normal;

}

.events-row div::before{

    display:inline-block;

    width:110px;

    font-weight:700;

    color:var(--primary);

}

.events-row div:nth-child(1)::before{

    content:"Date : ";

}

.events-row div:nth-child(2)::before{

    content:"Événement : ";

}

.events-row div:nth-child(3)::before{

    content:"Ville : ";

}

.events-row div:nth-child(4)::before{

    content:"Salle : ";

}

.events-row div:nth-child(5)::before{

    content:"Heure : ";

}

.events-row div:nth-child(6)::before{

    content:"Statut : ";

}

}


@media(max-width:600px){

.events-header h1{

    font-size:28px;

}

.events-header p{

    font-size:15px;

}

.events-row{

    padding:18px;

}

.badge{

    font-size:12px;

    padding:6px 12px;

}

}