/* Extra small devices (téléphones portrait) */
@media (max-width: 480px) {

    * {
        box-sizing: border-box;
        max-width: 100%;
    }
    body {}

    .\@480-hidden { display: none; }
    .\@480-visible {
        display: flex !important;
        visibility: visible !important;
    }
    .\@480-no-border { border: none; }

    .\@480-border-top-\#e3e3e3 { border-top: 1px solid #e3e3e3; }

    .\@480-flex-column { flex-direction: column; }
    .\@480-flex-align{ align-items: normal; }
    .\@480-flex-align-center{ align-items: center; }
    .\@480-flex-justify-center{ justify-content: center; }
    .\@480-flex-100\% { flex: 0 0 100%; }
    .\@480-flex-50\% { flex: 0 0 500%; }
    .\@480-flex-200px { flex: 0 0 200px; }
    .\@480-flex-auto { flex: 0 0 auto; }

    .\@480-m0 { margin: 0; } .\!\@480-m0 { margin: 0 !important; }
    .\@480-mt-0 { margin-top: 0; } .\!\@480-mt-0 { margin-top: 0 !important; }
    .\@480-mt-10 { margin-top: 10px; }
    .\@480-mt-30 { margin-top: 30px; }

    .\@480-p0 { padding: 0; } .\!\@480-p0 { padding: 0 !important; }
    .\@480-p10 { padding: 10px; }
    .\@480-ph-20 {
        padding-left: 20px;
        padding-right: 20px;
    }
    .\@480-pv-20 {
        padding-top: 20px;
        padding-bottom: 20px;
    }

    .\@480-w-200px { width: 200px; }
    .\@480-w-100\% { width: 100%; }

    .\@480-gap-0 { gap: 0; }
    .\@480-gap-10 { gap: 10px; }
    .\@480-gap-20 { gap: 20px; }
    .\@480-gap-30 { gap: 30px; }
    .\@480-gap-40 { gap: 40px; }
    .\@480-gap-50 { gap: 50px; }

    .\@480-column-gap-20 { column-gap: 20px; }

    .\@480-row-gap-20 { row-gap: 20px; }

    .\@480-fs-0\.60 { font-size: 0.6em; }
    .\@480-fs-0\.70 { font-size: 0.7em; }
    .\@480-fs-0\.90 { font-size: 0.9em; }
    .\@480-fs-1\.00 { font-size: 1em; } .\!\@480-fs-1\.00 { font-size: 1em !important; }

    .\@480-rotate-90 { transform: rotate(90deg); }

    .\@480-swiper-slide-small { height: 80px }

    .\@480-bg-\#f1f1f1 { background: #f1f1f1; }
    .\@480-bg-\#f7f7f7 { background: #f7f7f7; }

    .\@480-border-top-secondary-5px { border-top: 5px solid var(--secondary); }

    .\@480-text-center { text-align: center; }
    .\@480-text-underline-none { text-decoration: none; }


    /********************/



    .header{
        position: fixed;
        top: 0;
        background: #fff;
        border-bottom: 1px solid #f8f8f8;
        box-shadow: 0 1px 3px rgba(0, 0, 0, .12), 0 1px 2px rgba(0, 0, 0, .24);
        z-index: 9999;
    }
    .header .header-container{
        border: none;
        box-shadow: none;
    }
    .header .header-logo{
        width: 50px;
    }
   .header .nav{
        display: none;
    }
    header #menu_toggle{
        display: block;
    }

    .slider{
        height: 800px;
    }
    .slider .wrapper{
        position: relative;
        padding: 30px;
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        margin-top: 70px;
    }
    .slider .slider-right{
        margin-top: 50px;
        position: relative;
        transform: none;
        display: flex;
        flex-direction: column;
    }

    .start{
        padding-top: 870px;
    }
    .countdown {
        gap: 15px;
    }
    .flex-wrapper{
        padding: 20px;
    }
    .flex-responsive{
        flex-direction: column;
    }



}

/* Small devices (téléphones paysage / petits mobiles larges) */
@media (min-width: 481px) and (max-width: 767px) {
    /* Ex: afficher deux colonnes, petits ajustements typographiques */
}

/* Medium devices (tablettes portrait) */
@media (min-width: 768px) and (max-width: 1023px) {
    /* Ex: layout 2 colonnes, menu tablette, taille des boutons */
}

/* Large devices (tablettes paysage / petits laptops) */
@media (min-width: 1024px) and (max-width: 1239px) {
    /* Ex: sidebar visible, grille 3 colonnes */
}

/* Extra large devices (ordinateurs standard, 1080p) */
@media (min-width: 1240px) and (max-width: 1479px) {
    /* Ex: espacement augmenté, images HD */
}

/* 2K / Ultra-wide écrans (grands moniteurs, 1440p et plus) */
@media (min-width: 1480px) and (max-width: 1799px) {
    /* Ex: mise en page centrée, marges fluides */
}

/* 4K et au-delà */
@media (min-width: 1800px) {
    /* Ex: limiter la largeur max, recentrer le contenu */
}