/* ===========  MOBILE-FIRST  =========== */

/* footer bar – this is now the *default* style */
aside{
    position:fixed;
    bottom:0;
    /* full-width ↓ */
    left:0;                 /* stick to the left edge  */
    right:0;                /* …and the right edge     */
    width:100%;             /* spans the viewport      */
    max-width:none;         /* remove the 480-px cap   */
    transform:none;         /* no centering translate  */

    /* keep the rest as-is */
    background:darkcyan;
    padding:.4rem 0;
    border-top-left-radius:0;   /* optional: square corners */
    border-top-right-radius:0;  /* optional                 */
    z-index:1000;
}
aside ul{
    display:flex;
    justify-content:space-around;
    align-items:center;
    margin:0;
    padding:0 1rem;
    list-style:none;
}
aside li{margin:0;}
aside h3{
    margin:0;
    font-size:1rem;
    line-height:1.2;
    font-weight:500;
}
aside a{
    color:#eee;
    text-decoration:none;
    padding:.2rem .4rem;
    transition:.3s;
    border-bottom:1px solid transparent;
}
aside a:hover{border-bottom-color:#eee;}

/* keep page content clear of the bar */
main,
.contenant,
.swiper-container{padding-bottom:70px;}


/* ===========  DESKTOP OVERRIDE  =========== */
@media (min-width:801px){
    aside{
        /* undo footer settings */
        top:50%;
        bottom:auto;
        right:30px;
        left:auto;
        transform:translateY(-50%);
        width:auto;
        max-width:none;
        padding:0;
        border-radius:0;
        background:transparent;
        z-index:2;               /* back under Swiper arrows */
    }

    /* vertical list */
    aside ul{
        display:block;
        padding:0;
        text-align:left;
    }
    aside h3{margin:.2em 0;}
    main,
    .contenant,
    .swiper-container{padding-bottom:0;}
}