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

    * {
        box-sizing: border-box;
        max-width: 100%;
    }
    body {
        padding: 60px 0 0 0;
    }
    header { height: 60px;}
    header ul.header-menu { display: none }
    header .h-sticky { display: none }
    header .responsive-menu { display: flex; }

    #logo_spark{
        top: 17px;
        left: 17px;
        width: 180px;
        height: auto;
    }
    #logo_spark.sticky{
        top: 17px;
    }

    #home_video{ min-height: 600px }
    #home_video .overlay{ padding: 20px }

    /*section { padding: 0 20px; }*/

    .wrapper {
        padding-left: 20px;
        padding-right: 20px;
    }

    .categories-grid { gap: 20px; }
    .categories-grid > * { flex: 1 1 calc(100% - 10px); }

    .swiper-slide .swiper-info{
        display: flex;
    }
    .swiper-product {
        padding-left: 50px;
    }
    .swiper-slide-product {
        width: 290px !important;
        height: 400px !important;
    }
    .product-gallery .swiper-slide{
        max-width: 120px;
    }



    .account-sidebar {
        /*display: none;*/
    }
    #account_menu_toggle { display: block }



    .\@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-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-underline-none { text-decoration: none; }

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


    .btn-fill{
        padding: 20px 20px;
        align-items: center;
        justify-content: center;
        vertical-align: middle;
        line-height: 100%;
    }


    .breadcrumb.breadcrumb-sticky{
        top: 60px;
        padding: 10px;
    }

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

    .flex-grid-4 {
        grid-template-columns: repeat(1, 1fr);
    }
    .flex-grid-4 .swiper-slide{
        height: 420px !important;
        margin: 15px auto !important;
    }

    .category-filters{
        display: none;
    }


    .item-option.active::before{
        display: none;
    }

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

    .teams .bg-image {
        min-height: 430px;
    }
    .teams .bg-image div {
        display: flex;
        background: linear-gradient(to top, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 30%);
    }
}

/* 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 */
}