* {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }

    body {
        background: #f5f5f5;
        font-family: Arial, Helvetica, sans-serif;
        overflow-x: hidden;
    }

    a {
        text-decoration: none;
    }

    :root {
        --orange: linear-gradient(135deg,#1e3c72,#2a5298);
        --dark: #111;
        --light: #fff;
        --gray: #f5f5f5;
    }

    /* =========================
        NAVBAR
    ========================== */

    .topbar {
        background: var(--orange);
        padding: 5px 0;
        position: fixed;
        top: 0;
        width: 100%;
        z-index: 9999;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
    }
    .logo {

        font-size: 34px;

        font-weight: 900;

        color: white;

    }

    .search-box input {

        height: 52px;

        border-radius: 12px;

        border: none;

        padding-left: 20px;

        font-size: 15px;

    }

    .search-btn {

        border: none;

        background: #111;

        color: white;

        border-radius: 12px;

        padding: 0 10px;

        font-weight: bold;

        transition: 0.3s;

    }

    .search-btn:hover {

        background: #000;

        transform: scale(1.03);

    }

    .header-icons {

        color: white;

        font-weight: 600;

        font-size: 15px;

    }

    .header-icons div {

        cursor: pointer;

        transition: 0.3s;

    }

    .header-icons div:hover {

        transform: translateY(-2px);

    }

    .header-icons i {

        font-size: 24px;

    }

    .cart-icon {

        position: relative;

    }

    .cart-count {

        position: absolute;

        top: -10px;

        right: -12px;

        background: red;

        color: white;

        border-radius: 50%;

        font-size: 12px;

        padding: 3px 8px;

        font-weight: bold;

    }

    .page-content {

        margin-top: 90px;

    }

    /* =========================
        SIDEBAR
    ========================== */

    .sidebar {

        background: white;

        border-radius: 18px;

        padding: 20px;

        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);

        position: sticky;

        top: 80px;

    }

    .sidebar h5 {

        font-weight: bold;

        margin-bottom: 20px;

    }

    .sidebar ul {

        list-style: none;

        padding: 0;

    }

    .sidebar ul li {

        padding: 13px 12px;

        border-radius: 10px;

        transition: 0.3s;

        cursor: pointer;

        margin-bottom: 2px;

    }

    .sidebar ul li:hover {

        background: #fff3df;

        color: var(--orange);

        transform: translateX(5px);

    }

    /* =========================
        BANNER SLIDER
    ========================== */

    .banner-slider {

        border-radius: 22px;

        overflow: hidden;

        margin-bottom: 35px;

    }

    .banner {

        min-height: 340px;

        padding: 50px;

        display: flex;

        align-items: center;

        justify-content: space-between;

        color: white;

        position: relative;

        overflow: hidden;

    }

    .banner::before {

        content: "";

        position: absolute;

        width: 500px;

        height: 500px;

        border-radius: 50%;

        background: rgba(255, 255, 255, 0.08);

        top: -200px;

        right: -120px;

    }
    .banner-orange {

        background: linear-gradient(135deg, #ff9900, #ff6600);

    }

    .banner-green {

        background: linear-gradient(135deg, #00b894, #00997a);

    }

    .banner-content {

        position: relative;

        z-index: 2;

        max-width: 500px;

    }

    .banner-badge {

        display: inline-block;

        background: rgba(255, 255, 255, 0.2);

        padding: 8px 18px;

        border-radius: 30px;

        font-size: 13px;

        font-weight: bold;

        margin-bottom: 20px;

    }

    .banner h1 {

        font-size: 52px;

        font-weight: 900;

        margin-bottom: 15px;

    }

    .banner p {

        font-size: 20px;

    }

    .banner img {

        width: 330px;

        max-width: 100%;

        object-fit: contain;

        z-index: 2;

        animation: floatImage 5s ease-in-out infinite;

    }

    .shop-btn {

        border: none;

        background: white;

        color: #ff6600;

        font-weight: bold;

        padding: 14px 32px;

        border-radius: 12px;

        margin-top: 18px;

        transition: 5s;

    }

    .shop-btn:hover {

        transform: translateY(-4px);

    }

    @keyframes floatImage {

        0% {
            transform: translateY(0px);
        }

        50% {
            transform: translateY(-10px);
        }

        100% {
            transform: translateY(0px);
        }

    }

    .carousel-control-prev,
    .carousel-control-next {

        width: 55px;

        height: 55px;

        background: rgba(0, 0, 0, 0.35);

        border-radius: 50%;

        top: 50%;

        transform: translateY(-50%);

        margin: 0 15px;

    }

    /* =========================
        TITRE
    ========================== */

    .section-title {

        font-size: 30px;

        font-weight: bold;

        margin-bottom: 25px;

    }

    /* =========================
        PRODUITS
    ========================== */

    .product-card {

        background: white;

        border-radius: 18px;

        overflow: hidden;

        height: 100%;

        transition: 0.3s;

        box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);

        position: relative;

    }

    .product-card:hover {

        transform: translateY(-6px);

        box-shadow: 0 12px 30px rgba(0, 0, 0, 0.12);

    }

    .product-badge {

        position: absolute;

        top: 15px;

        left: 15px;

        background: red;

        color: white;

        padding: 5px 12px;

        border-radius: 30px;

        font-size: 12px;

        font-weight: bold;

        z-index: 10;

    }

    .product-img {
        width: 100%;
        height: 300px;
        object-fit: cover;
    }

    .product-content {

        padding: 16px;

    }

    .product-title {

        font-size: 16px;

        font-weight: 600;

        min-height: 45px;

    }

    .price {

        color: #ff6600;

        font-size: 24px;

        font-weight: bold;

    }

    .old-price {

        text-decoration: line-through;

        color: gray;

        font-size: 14px;

    }

    .rating {

        color: orange;

        margin: 10px 0;

    }

    .btn-cart {

        width: 100%;

        border: none;

        background: var(--orange);

        color: white;

        padding: 12px;

        border-radius: 10px;

        font-weight: bold;

        transition: 0.3s;

    }

    .btn-cart:hover {

        background: #e67e00;

    }

    /* =========================
        MODAL
    ========================== */

    .modal-content {

        border-radius: 20px;

        border: none;

    }

    /* =========================
        FOOTER
    ========================== */

    footer {

        background: #111;

        color: white;

        padding: 45px 0;

        margin-top: 60px;

    }

    footer h5 {

        font-weight: bold;

        margin-bottom: 15px;

    }

    footer p {

        color: #ccc;

    }

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

    @media(max-width:991px) {

        .banner {

            flex-direction: column;

            text-align: center;

        }

        .banner img {

            width: 240px;

            margin-top: 25px;

        }

        .banner h1 {

            font-size: 36px;

        }

        .sidebar {

            position: relative;
            top: 0;

        }

    }

    @media(max-width:768px) {

        .topbar {

            padding: 15px;

        }

        .logo {

            text-align: center;

            margin-bottom: 10px;

        }

        .header-icons {

            justify-content: center !important;

            margin-top: 10px;

        }

        .page-content {

            margin-top: 100px;

        }

        .banner {

            padding: 30px;

        }

        .banner h1 {

            font-size: 28px;

        }

        .banner p {

            font-size: 16px;

        }

        .carousel-control-prev,
        .carousel-control-next {

            display: none;

        }

    }
    
            /* =========================
        TOPBAR
    ========================== */

    .topbar{

        background:linear-gradient(135deg,#1e3c72,#2a5298);

        padding:14px 0;

        position:fixed;

        top:0;

        left:0;

        width:100%;

        z-index:9999;

        box-shadow:0 4px 15px rgba(0,0,0,.12);

    }

    /* LOGO */

    .logo{

        font-size:34px;

        font-weight:900;

        color:#fff;

        letter-spacing:1px;

    }

    /* =========================
        RECHERCHE
    ========================== */

    .search-wrapper{

        position:relative;

        width:100%;

    }

    .search-input{

        height:32px;

        border:none;

        border-radius:14px;

        padding-left:50px;

        padding-right:130px;

        font-size:15px;

        box-shadow:none;

    }

    .search-input:focus{

        box-shadow:none;

        border:none;

    }

    .search-icon{

        position:absolute;

        left:18px;

        top:50%;

        transform:translateY(-50%);

        color:#999;

        z-index:10;

    }

    .search-btn{

        position:absolute;

        right:5px;

        top:5px;

        height:42px;

        border:none;

        border-radius:10px;

        padding:0 20px;

        background:#111;

        color:#fff;

        font-weight:700;

        transition:.3s;

    }

    .search-btn:hover{

        background:#000;

        transform:scale(1.03);

    }

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

    .top-actions{

        display:flex;

        justify-content:flex-end;

        align-items:center;

        gap:12px;

        flex-wrap:wrap;

    }

    /* BOUTON */

    .top-action-btn{

        background:#fff;

        color:#222;

        border-radius:12px;

        padding:0px 0px;

        display:flex;

        align-items:center;

        gap:10px;

        font-size:14px;

        font-weight:700;

        text-decoration:none;

        transition:.3s;

        min-height:52px;

        box-shadow:0 2px 8px rgba(0,0,0,.08);

    }

    .top-action-btn i{

        font-size:25px;

        color:#ff9900;

    }

    .top-action-btn:hover{

        transform:translateY(-3px);

        background:#111;

        color:#fff;

    }

    .top-action-btn:hover i{

        color:#ff9900;

    }

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

    @media(max-width:991px){

        .top-actions{

            justify-content:center;

        }

        .logo{

            text-align:center;

            display:block;

        }

    }

    @media(max-width:768px){

        .topbar{

            padding:5px 5px;

        }

        .top-actions{

            gap:8px;

        }

        .top-action-btn{

            width:100%;
            min-height:22px;
            justify-content:center;

            font-size:13px;

        }

        .search-input{

            height:50px;

        }

    }
    .top-action-btn {
        font-size: 13px;
        white-space: nowrap;
    }

    .top-action-btn i {
        font-size: 18px;
    }

    .category-fit {
        list-style: none;
        padding: 0;
        margin: 0;
    }

    /* Desktop normal */
    .category-fit li {
        padding: 8px 0;
        display: flex;
        align-items: center;
        gap: 8px;
    }

    /* 📱 MOBILE : tout sur UNE SEULE LIGNE sans scroll */
    @media (max-width: 768px) {

        .sidebar {
            text-align: center;
        }

        .cat-title {
            font-size: 18px;
            margin-bottom: 0px;
        }

        .category-fit {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .category-fit li {
            flex: 1;
            font-size: 12px; /* réduction texte */
            padding: 4px 2px;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 3px;
        }

        .category-fit li i {
            font-size: 16px;
        }

        .category-fit li span {
            font-size: 12px;
            white-space: nowrap;
        }
    }
    @media (max-width: 768px) {

        #mainBanner {
            display: none !important;
        }

        .container {
            margin-top: 10px;
        }

    }
    .category-fit {
        list-style: none;
        padding: 0;
        margin: 0;
    }

    /* ===== DESKTOP ===== */
    .category-fit li {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 8px 0;
        cursor: pointer;
        transition: 0.3s;
    }

    .category-fit li:hover {
        color: #0d6efd;
        transform: translateX(5px);
    }

    /* =========================
    📱 MOBILE STYLE MODERNE
    ========================= */
    @media (max-width: 768px) {

        .sidebar {
            padding: 10px;
        }

        .cat-title {
            font-size: 14px;
            text-align: center;
            margin-bottom: 10px;
            font-weight: bold;
            animation: fadeDown 0.5s ease-in-out;
        }

        .category-fit {
            display: flex;
            justify-content: space-between;
            gap: 8px;
        }

        .category-fit li {
            flex: 1;
            flex-direction: column;
            text-align: center;
            background: #ffffff;
            border-radius: 12px;
            padding: 10px 5px;
            box-shadow: 0 3px 10px rgba(0,0,0,0.08);
            animation: popIn 0.6s ease forwards;
            transition: 0.3s;
        }

        .category-fit li i {
            font-size: 18px;
            color: #0d6efd;
            margin-bottom: 5px;
        }

        .category-fit li span {
            font-size: 10px;
            font-weight: 600;
            white-space: nowrap;
        }

        /* effet clic */
        .category-fit li:active {
            transform: scale(0.92);
            background: #0d6efd;
            color: #fff;
        }

        .category-fit li:active i {
            color: #fff;
        }
    }

    /* =========================
    ✨ ANIMATIONS
    ========================= */

    @keyframes popIn {
        from {
            transform: scale(0.8);
            opacity: 0;
        }
        to {
            transform: scale(1);
            opacity: 1;
        }
    }

    @keyframes fadeDown {
        from {
            opacity: 0;
            transform: translateY(-10px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }