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

header{

    position:sticky;
    top:0;
    z-index:9999;

    background:#0a0e27;

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

}

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

.top-header{

    background:#0a0e27;

    border-bottom:1px solid rgba(255,255,255,.08);

    padding:18px 0;

}

.top-header .container{

    padding-top: 4px;
    padding-bottom: 4px;

}

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

.logo-link{

    display:flex;

    align-items:center;

    flex-shrink:0;

}

.logo{

    width:220px;

    height:auto;

    transition:.30s;

}

.logo:hover{

    transform:scale(1.05);

}

/* ===============================
   SEARCH
================================ */

.search-form{

    position:relative;

    width:100%;

    max-width:700px;

}

.search-input{

    width:100%;

    height:56px;

    border-radius:12px;

    border:none;

    padding:0 70px 0 24px;

    font-size:16px;

    background:#fff;

    transition:.30s;

}

.search-input:focus{

    box-shadow:0 0 0 4px rgba(212,175,55,.25);

}

.search-btn{

    position:absolute;

    top:50%;

    right:8px;

    transform:translateY(-50%);

    width:42px;

    height:42px;

    border-radius:10px;

    border:none;

    background:transparent;

    color:#444;

    font-size:20px;

    transition:.30s;

}

.search-btn:hover{

    background:#d4af37;

    color:#111;

}

/* ===============================
   ACTIONS
================================ */

.header-actions{

    display:flex;

    align-items:center;

    gap:30px;

    flex-shrink:0;

}

.header-link{

    display:flex;

    align-items:center;

    gap:8px;

    color:#fff;

    font-weight:600;

    transition:.30s;

}

.header-link i{

    font-size:20px;

    color:#d4af37;

}

.header-link:hover{

    color:#d4af37;

}

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

.main-nav{

    background:#111;

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

    border-bottom:1px solid rgba(255,255,255,.08);

}

.main-nav .container{

    display:flex;

    justify-content:center;

}

.main-nav ul{

    display:flex;

    align-items:center;

    gap:35px;

    margin:0;

    padding:15px 0;

}

.main-nav li{

    list-style:none;

}

.main-nav a{

    color:#fff;

    font-weight:600;

    font-size:15px;

    position:relative;

    transition:.30s;

}

.main-nav a::after{

    content:"";

    position:absolute;

    left:0;

    bottom:-8px;

    width:0;

    height:2px;

    background:#d4af37;

    transition:.30s;

}

.main-nav a:hover{

    color:#d4af37;

}

.main-nav a:hover::after{

    width:100%;

}

/* =====================================================
   HERO
===================================================== */

.hero-section{

    position:relative;

    margin-bottom:80px;

}

.hero-grid{

    display:grid;

    gap:20px;

    min-height:650px;

}

/* ===========================
   1 événement
=========================== */

.hero-count-1{

    grid-template-columns:1fr;

}

/* ===========================
   2 événements
=========================== */

.hero-count-2{

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

}

/* ===========================
   3 événements
=========================== */

.hero-count-3{

    grid-template-columns:2fr 1fr;

    grid-template-rows:repeat(2,315px);

}

.hero-count-3 .hero-card:first-child{

    grid-row:1 / 3;

}

/* ===========================
   4 événements
=========================== */

.hero-count-4{

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

    grid-template-rows:repeat(2,315px);

}

/* ===========================
   5+
=========================== */

.hero-slider{

    overflow:hidden;

}

.hero-card{

    position:relative;

    overflow:hidden;

    border-radius:20px;

    background:#0a0e27;

    min-height:315px;

    cursor:pointer;

    transition:.35s;

}

.hero-card:hover{

    transform:translateY(-6px);

}

.hero-card img{

    width:100%;

    height:100%;

    object-fit:cover;

    transition:.6s;

}

.hero-card:hover img{

    transform:scale(1.08);

}

.hero-card-overlay{

    position:absolute;

    inset:0;

    background:linear-gradient(

        to top,

        rgba(0,0,0,.9),

        rgba(0,0,0,.2)

    );

}

.hero-card-content{

    position:absolute;

    left:35px;

    bottom:35px;

    z-index:10;

    color:#fff;

    max-width:70%;

}

.hero-category{

    display:inline-block;

    padding:8px 18px;

    border-radius:50px;

    background:rgba(212,175,55,.95);

    color:#111;

    font-weight:700;

    margin-bottom:15px;

}

.hero-card h2{

    font-size:2rem;

    margin-bottom:15px;

}

.hero-card p{

    margin:6px 0;

}

.hero-card .btn-gold{

    margin-top:18px;

}

section{
    padding:100px 0;
}

.section-title{
    margin-bottom:60px;
}

.hero-buttons{
    display:flex;
    gap:20px;
    margin-top:35px;
}

.event-footer{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-top:25px;
}

.newsletter{
    margin:120px 0;
}

.statistics{
    margin:120px 0;
}

.cta-home{
    margin-top:120px;
}

.container-login{
    min-height:calc(100vh - 220px);
    display:flex;
    justify-content:center;
    align-items:flex-start;
    padding:50px 20px 80px;
    background:#f8f9fa;
}

.login-card{

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

    background:whitesmoke;

    border:1px solid #d4af37;

    border-radius:12px;

    padding:40px;

    box-shadow:0 0 25px rgba(237, 236, 234, 0.15);
}

.login-logo{
    width:120px;
}

.login-card h2{
    color:#d4af37;
}

.form-label{
    color:#fff;
}

.form-control{

    background:#efecec;

    color:white;

    border:1px solid #ecb305;

}

.form-control:focus{

    border-color:#d4af37;

    box-shadow:none;

}

.btn-gold{

    background:#d4af37;

    color:black;

    font-weight:bold;

}

.btn-gold:hover{

    background:#e8c65d;

}

.login-card a{

    color:#d4af37;

    text-decoration:none;

}

.login-card a:hover{

    text-decoration:underline;

}

body{
    background:#eae6e6;
}

.card{
    border-radius:18px;
    background:white;
}

.form-control{
    background:#ffffff;
    color:#212529;
    border:1px solid #ced4da;
    border-radius:10px;
}

.form-control:focus{
    background:#ffffff;
    color:#212529;
    border-color:#d4af37;
    box-shadow:0 0 0 .25rem rgba(212,175,55,.25);
}

.form-label{
    color:#060505;
}

.btn-warning{
    background:#d4af37;
    border:none;
    color:#000;
}

.btn-warning:hover{
    background:#e5bf4d;
}

.card{
    box-shadow:0 10px 35px rgba(0,0,0,.35);
}

.login-page{
    background:#f8f9fa;
    min-height:100vh;
}

background: #F5F7FA;

.card{
    border:none;
    border-radius:20px;
    box-shadow:0 8px 30px rgba(0,0,0,.05);
}

.btn-primary{
    background:#ffc107;
    border:none;
}

.btn-success{
    background:#198754;
}

.btn-dark{
    background:#212529;
}

/* ===========================
   DASHBOARD ORGANISATEUR
===========================*/

body.dashboard-page{
    background:#ffffff !important;
}

.dashboard{
    display:flex;
    min-height:calc(100vh - 140px);
}

/***********************
        SIDEBAR
************************/

.sidebar{
    width:260px;
    background:#111827;
    color:#fff;
    border-radius:18px;
    padding:30px;
}

.sidebar h3{
    margin-bottom:40px;
    font-weight:700;
}

.sidebar a{
    display:block;
    padding:14px 18px;
    color:#d1d5db;
    text-decoration:none;
    border-radius:12px;
    margin-bottom:10px;
    transition:.25s;
}

.sidebar a:hover{

    background:#ffc107;
    color:#212529;

}

/***********************
        CONTENT
************************/

.content{

    flex:1;
    margin-left:40px;

}

.topbar{

    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:35px;

}

.topbar h1{

    font-size:2rem;
    font-weight:700;

}

.user{

    display:flex;
    align-items:center;
    gap:15px;

}

.avatar{

    width:45px;
    height:45px;
    border-radius:50%;
    background:#ffc107;
    display:flex;
    justify-content:center;
    align-items:center;
    font-weight:bold;

}

/***********************
    STATS
************************/

.stats{

    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:20px;
    margin-bottom:40px;

}

.stat{

    border:1px solid #ececec;
    border-radius:18px;
    padding:25px;
    transition:.25s;

}

.stat:hover{

    transform:translateY(-4px);
    box-shadow:0 10px 30px rgba(242, 241, 241, 0.951);

}

.stat h2{

    font-size:2rem;
    margin-top:10px;

}

.stat p{

    color:#6c757d;
    margin:0;

}

/***********************
    ACTIONS
************************/

.quick-actions{

    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:20px;
    margin-bottom:40px;

}

.action{

    border:1px solid #958d8dd5;
    border-radius:18px;
    padding:30px;

}

.action i{

    font-size:2rem;
    color:#ffc107;

}

.action h4{

    margin:20px 0 10px;

}

.action a{

    margin-top:20px;

}

/***********************
TABLE
************************/

.events{

    border:1px solid #ececec;
    border-radius:18px;
    overflow:hidden;

}

.events .header{

    background:#f8f9fa;
    padding:20px;
    font-weight:bold;

}

.events table{

    margin:0;

}

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

@media(max-width:1200px){

    .top-header .container{

        flex-wrap:wrap;

        justify-content:center;

    }

    .search-form{

        order:3;

        width:100%;

        max-width:none;

    }

}

@media(max-width:768px){

    .logo{

        width:170px;

    }

    .header-actions{

        gap:18px;

        flex-wrap:wrap;

        justify-content:center;

    }

    .main-nav{

        overflow-x:auto;

    }

    .main-nav ul{

        width:max-content;

        padding-inline:20px;

    }

}