/* =========================================
   MENU CATÉGORIES
========================================= */

.category-menu {
    width: 100%;
    position: relative;
    background: #fff;
}


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

.menu-title {
    padding: 18px 20px;
    color: #fff;
    font-size: 16px;
    font-weight: 600;
}


/* =========================================
   BOUTON MOBILE
========================================= */

.mobile-category-toggle {
    width: 100%;
    padding: 15px 18px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    border: none;
    border-radius: 8px;

    background: #0B1A57;
    color: #fff;

    font-size: 16px;
    font-weight: 600;

    cursor: pointer;

    transition: all 0.3s ease;
}

.mobile-category-toggle:hover {
    background: #10266f;
}


/* Flèche */

.category-arrow {
    transition: transform 0.3s ease;
}


/* Rotation quand ouvert */

.mobile-category-toggle.active .category-arrow {
    transform: rotate(180deg);
}


/* =========================================
   LISTE CATÉGORIES
========================================= */

.category-list {
    background: #fff;
}

.category-list > ul {
    margin: 0;
    padding: 0;
}


.category-item {
    position: relative;
    border-bottom: 1px solid #eeeeee;
}


.category-item > a {
    min-height: 52px;

    padding: 14px 18px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    color: #172033;

    text-decoration: none;

    font-size: 15px;

    transition: all 0.25s ease;
}


.category-item > a:hover {
    background: #f7f8fa;
    color: #FF6B00;
}


/* Icône gauche */

.category-item > a span {
    display: flex;
    align-items: center;
}


.category-icon {
    margin-right: 12px;
    font-size: 11px;
    color: #0B1A57;
    transition: all 0.25s ease;
}


.category-item > a:hover .category-icon {
    color: #FF6B00;
    transform: translateX(3px);
}


/* Catégorie active */

.category-item > a.active-category {
    color: #FF6B00;
    font-weight: 600;
}


/* =========================================
   SOUS-CATÉGORIES
========================================= */

.sub-category {
    display: none;

    background: #f8f9fb;

    padding: 8px 0;
}


.category-item:hover > .sub-category {
    display: block;
}


.sub-category li a {
    display: block;

    padding: 9px 20px 9px 45px;

    color: #555;

    font-size: 14px;

    text-decoration: none;

    transition: all 0.2s ease;
}


.sub-category li a:hover {
    color: #FF6B00;
    background: #fff;
    padding-left: 50px;
}


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

@media (max-width: 991.98px) {

    .container-left {
        width: 100%;
        margin-bottom: 15px;
    }


    .category-list {
        display: none;

        margin-top: 8px;

        border-radius: 8px;

        overflow: hidden;

        box-shadow: 0 5px 20px rgba(0, 0, 0, 0.10);
    }


    .category-list.open {
        display: block;
    }


    /* Sur mobile, les sous catégories restent cachées */
    .sub-category {
        display: none !important;
    }


    .category-item > a {
        padding: 15px 18px;
    }

}


/* =========================================
   DESKTOP
========================================= */

@media (min-width: 992px) {

    .container-left {
        width: 305px;
        flex: 0 0 305px;
    }

    .container-right {
        flex: 1;
        min-width: 0;
        padding-left: 15px;
    }

    .category-list {
        display: block;
    }

}

    /* =====================================================
   CAGE BÂTIMENT - HEADER MODERNE
===================================================== */


/* VARIABLES */

:root {

    --cage-blue: #06245B;

    --cage-blue-light: #2A55FF;

    --cage-orange: #FF6B00;

    --cage-dark: #172B4D;

    --cage-light: #F7F9FC;

}


/* =====================================================
   TOP BAR
===================================================== */

.cage-topbar {

    background: var(--cage-blue);

    color: #fff;

    font-size: 12px;

    padding: 9px 0;

}

.cage-topbar-content {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 20px;

}

.topbar-item {

    display: flex;

    align-items: center;

    gap: 7px;

    white-space: nowrap;

}

.topbar-item i {

    color: var(--cage-orange);

    font-size: 14px;

}

.topbar-item a {

    color: #fff;

    text-decoration: none;

}

.topbar-item a:hover {

    color: var(--cage-orange);

}


/* =====================================================
   MAIN HEADER
===================================================== */

.cage-main-header {

    background: #fff;

    padding: 16px 0;

    border-bottom: 1px solid #eee;

}

.cage-header-content {

    display: flex;

    align-items: center;

    gap: 30px;

}


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

.cage-logo {

    min-width: 230px;

}

.cage-logo a {

    display: flex;

    align-items: center;

    text-decoration: none;

}

.cage-logo img {

    width: 65px;

    height: 65px;

    object-fit: contain;

}

.cage-logo-text {

    display: flex;

    flex-direction: column;

    margin-left: 10px;

}

.cage-logo-text strong {

    color: var(--cage-blue);

    font-size: 20px;

    font-weight: 800;

    line-height: 1.2;

}

.cage-logo-text strong span {

    color: var(--cage-blue);

}

.cage-logo-text small {

    color: #777;

    font-size: 10px;

    margin-top: 4px;

}


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

.cage-search {

    flex: 1;

    max-width: 600px;

}

.cage-search form {

    display: flex;

    width: 100%;

    height: 48px;

}

.cage-search input {

    flex: 1;

    border: 2px solid #e5e7eb;

    border-right: none;

    border-radius: 25px 0 0 25px;

    padding: 0 20px;

    font-size: 14px;

    color: #333;

    outline: none;

    transition: .3s;

}

.cage-search input:focus {

    border-color: var(--cage-blue);

}

.cage-search button {

    padding: 0 22px;

    border: none;

    background: var(--cage-blue);

    color: #fff;

    border-radius: 0 25px 25px 0;

    font-weight: 600;

    cursor: pointer;

    transition: .3s;

}

.cage-search button:hover {

    background: var(--cage-blue);

}

.cage-search button i {

    margin-right: 6px;

}







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

.cage-actions {

    display: flex;

    align-items: center;

    gap: 12px;

}


/* LOGIN */

.cage-login,
.cage-account {

    display: flex;

    align-items: center;

    gap: 8px;

    padding: 11px 18px;

    border: 2px solid var(--cage-blue);

    border-radius: 25px;

    color: var(--cage-blue);

    text-decoration: none;

    font-weight: 600;

    font-size: 13px;

    transition: .3s;

}

.cage-login:hover,
.cage-account:hover {

    background: var(--cage-blue);

    color: #fff;

}


/* =====================================================
   PANIER
===================================================== */

.cage-cart {

    display: flex;

    align-items: center;

    gap: 10px;

    padding: 8px 16px;

    background: var(--cage-blue);

    color: #fff;

    border-radius: 28px;

    text-decoration: none;

    transition: .3s;

}

.cage-cart:hover {

    background: var(--cage-blue);

    color: #fff;

    transform: translateY(-2px);

}

.cage-cart-icon {

    position: relative;

    font-size: 21px;

}

.cage-cart-count {

    position: absolute;

    top: -9px;

    right: -9px;

    width: 19px;

    height: 19px;

    display: flex;

    align-items: center;

    justify-content: center;

    background: var(--cage-orange);

    color: #fff;

    border-radius: 50%;

    font-size: 10px;

    font-weight: bold;

}

.cage-cart-details {

    display: flex;

    flex-direction: column;

}

.cage-cart-details strong {

    font-size: 12px;

}

.cage-cart-details small {

    font-size: 10px;

}


/* =====================================================
   NAVIGATION
===================================================== */

.cage-navigation {

    background: #fff;

    border-bottom: 1px solid #eee;

    box-shadow: 0 3px 10px rgba(0,0,0,.04);

}

.cage-nav-content {

    display: flex;

    align-items: center;

}

.cage-nav-link {

    position: relative;

    padding: 14px 20px;

    color: var(--cage-dark);

    text-decoration: none;

    font-size: 14px;

    font-weight: 600;

    transition: .3s;

}

.cage-nav-link:hover {

    color: var(--cage-orange);

}

.cage-nav-link.active {

    color: var(--cage-orange);

}

.cage-nav-link.active::after {

    content: "";

    position: absolute;

    bottom: 0;

    left: 20px;

    right: 20px;

    height: 3px;

    background: var(--cage-orange);

    border-radius: 3px 3px 0 0;

}

.cage-nav-link i {

    margin-right: 5px;

}

.cage-nav-spacer {

    flex: 1;

}

.cage-nav-info {

    display: flex;

    align-items: center;

    gap: 7px;

    margin-left: 25px;

    color: #777;

    font-size: 12px;

}

.cage-nav-info i {

    color: var(--cage-orange);

}


/* MOBILE BUTTON */

.cage-mobile-menu {

    display: none;

    width: 45px;

    height: 45px;

    border: none;

    border-radius: 8px;

    background: var(--cage-blue);

    color: #fff;

    font-size: 18px;

}








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

@media (max-width: 1199px) {

    .cage-logo {

        min-width: 190px;

    }

    .cage-logo-text strong {

        font-size: 17px;

    }

    .cage-search {

        max-width: 450px;

    }

    .cage-nav-info {

        display: none;

    }

}


@media (max-width: 991px) {

    .cage-topbar {

        display: none;

    }

    .cage-navigation {

        display: none;

    }

    .cage-header-content {

        flex-wrap: wrap;

    }

    .cage-search {

        order: 3;

        flex-basis: 100%;

        max-width: 100%;

    }

    .cage-mobile-menu {

        display: block;

    }

}


@media (max-width: 576px) {

    .cage-main-header {

        padding: 10px 0;

    }

    .cage-header-content {

        gap: 10px;

    }

    .cage-logo {

        min-width: auto;

    }

    .cage-logo img {

        width: 48px;

        height: 48px;

    }

    .cage-logo-text strong {

        font-size: 15px;

    }

    .cage-logo-text small {

        display: none;

    }

    .cage-login span,
    .cage-account span {

        display: none;

    }

    .cage-login,
    .cage-account {

        width: 42px;

        height: 42px;

        padding: 0;

        justify-content: center;

    }

    .cage-cart-details {

        display: none;

    }

    .cage-cart {

        width: 44px;

        height: 44px;

        padding: 0;

        justify-content: center;

    }

    .cage-search button span {

        display: none;

    }

    .cage-search button {

        width: 55px;

        padding: 0;

    }

}

/* =====================================================
   CAGE BÂTIMENT - HERO
===================================================== */

.cage-hero {

    background: #f7f9fc;

    padding: 25px 0;

}


.cage-hero-grid {

    display: grid;

    grid-template-columns: 250px 1fr 230px;

    gap: 20px;

    align-items: stretch;

}


/* =====================================================
   CATEGORIES
===================================================== */

.cage-category-box {

    background: #fff;

    border-radius: 10px;

    overflow: hidden;

    box-shadow: 0 5px 25px rgba(0,0,0,.06);

    border: 1px solid #eee;

}


.cage-category-title {

    display: flex;

    align-items: center;

    gap: 12px;

    padding: 16px 20px;

    background: #06245B;

    color: #fff;

    font-size: 15px;

    font-weight: 700;

}


.cage-category-title i {

    color: #FF6B00;

}


.cage-category-list {

    list-style: none;

    padding: 5px 0;

    margin: 0;

}


.cage-category-item {

    position: relative;

}


.cage-category-item > a {

    display: flex;

    align-items: center;

    justify-content: space-between;

    padding: 12px 18px;

    color: #27364b;

    text-decoration: none;

    font-size: 13px;

    border-bottom: 1px solid #f1f1f1;

    transition: .25s;

}


.cage-category-item > a span {

    display: flex;

    align-items: center;

    gap: 10px;

}


.cage-category-item > a span i {

    color: #0B1A57;

    font-size: 13px;

}


.cage-category-item > a:hover,
.cage-category-item > a.active {

    color: #FF6B00;

    background: #fff7f1;

    padding-left: 23px;

}


.cage-category-item > a > i {

    font-size: 10px;

    color: #aaa;

}


/* =====================================================
   SOUS CATEGORIES
===================================================== */

.cage-subcategories {

    display: none;

    position: absolute;

    top: 0;

    left: 100%;

    width: 220px;

    background: #fff;

    z-index: 20;

    list-style: none;

    padding: 10px 0;

    margin: 0;

    border-radius: 0 8px 8px 8px;

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

}


.cage-category-item:hover .cage-subcategories {

    display: block;

}


.cage-subcategories li a {

    display: block;

    padding: 9px 18px;

    color: #555;

    font-size: 12px;

    text-decoration: none;

    transition: .2s;

}


.cage-subcategories li a:hover {

    color: #FF6B00;

    background: #f8f9fa;

    padding-left: 23px;

}


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

.cage-hero-slider {

    min-width: 0;

}


.cage-banner-slider {

    height: 100%;

}


.cage-slide {

    height: 420px;

    position: relative;

    overflow: hidden;

    border-radius: 12px;

    background: #ddd;

}


.cage-slide img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    display: block;

}


.cage-slide::after {

    content: "";

    position: absolute;

    inset: 0;

    background: linear-gradient(
        90deg,
        rgba(0,0,0,.25),
        transparent 60%
    );

    pointer-events: none;

}


/* =====================================================
   SLIDER NAVIGATION
===================================================== */

.cage-banner-slider .owl-nav button {

    position: absolute;

    top: 50%;

    transform: translateY(-50%);

    width: 42px;

    height: 42px;

    border-radius: 50% !important;

    background: rgba(255,255,255,.9) !important;

    color: #06245B !important;

    font-size: 20px !important;

    transition: .3s;

}


.cage-banner-slider .owl-nav button:hover {

    background: #FF6B00 !important;

    color: #fff !important;

}


.cage-banner-slider .owl-prev {

    left: 15px;

}


.cage-banner-slider .owl-next {

    right: 15px;

}


.cage-banner-slider .owl-dots {

    position: absolute;

    bottom: 15px;

    left: 50%;

    transform: translateX(-50%);

}


/* =====================================================
   RIGHT PROMOTION
===================================================== */

.cage-hero-right {

    display: flex;

    flex-direction: column;

    gap: 20px;

}


.cage-promo-card {

    flex: 1;

    min-height: 260px;

    border-radius: 12px;

    overflow: hidden;

    position: relative;

    background:

        linear-gradient(
            rgba(6,36,91,.65),
            rgba(6,36,91,.85)
        ),

        url('/files_upload/promotion.jpg');

    background-size: cover;

    background-position: center;

}


.cage-promo-overlay {

    height: 100%;

    padding: 25px;

    display: flex;

    flex-direction: column;

    justify-content: center;

    color: #fff;

}


.cage-promo-overlay span {

    color: #0B1A57;

    font-size: 11px;

    font-weight: 700;

    letter-spacing: 2px;

}


.cage-promo-overlay h3 {

    font-size: 22px;

    line-height: 1.3;

    margin: 10px 0 20px;

}


.cage-promo-overlay a {

    display: inline-flex;

    align-items: center;

    gap: 8px;

    color: #fff;

    text-decoration: none;

    font-size: 13px;

    font-weight: 600;

}


.cage-promo-overlay a:hover {

    color: #FF6B00;

}


/* =====================================================
   CONTACT CARD
===================================================== */

.cage-contact-card {

    display: flex;

    align-items: center;

    gap: 14px;

    padding: 20px;

    background: #fff;

    border-radius: 12px;

    box-shadow: 0 5px 25px rgba(0,0,0,.06);

}


.cage-contact-icon {

    width: 45px;

    height: 45px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    background: #fff1e8;

    color: #FF6B00;

    font-size: 18px;

}


.cage-contact-card small {

    display: block;

    color: #888;

    font-size: 11px;

}


.cage-contact-card strong {

    display: block;

    color: #06245B;

    font-size: 15px;

    margin: 3px 0;

}


.cage-contact-card span {

    color: #0B1A57;

    font-size: 10px;

}


/* =====================================================
   SERVICES
===================================================== */

.cage-services {

    padding: 25px 0 35px;

    background: #fff;

}


.cage-services-grid {

    display: grid;

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

    border: 1px solid #eee;

    border-radius: 12px;

    overflow: hidden;

}


.cage-service {

    display: flex;

    align-items: center;

    gap: 15px;

    padding: 22px;

    border-right: 1px solid #eee;

    transition: .3s;

}


.cage-service:last-child {

    border-right: none;

}


.cage-service:hover {

    background: #fafbff;

    transform: translateY(-2px);

}


.cage-service-icon {

    width: 48px;

    height: 48px;

    min-width: 48px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    background: #eef2ff;

    color: #2A55FF;

    font-size: 18px;

}


.cage-service h3 {

    margin: 0 0 4px;

    font-size: 13px;

    color: #172B4D;

    font-weight: 700;

}


.cage-service p {

    margin: 0;

    color: #888;

    font-size: 11px;

}


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

@media (max-width: 1199px) {

    .cage-hero-grid {

        grid-template-columns:
            220px 1fr;

    }

    .cage-hero-right {

        display: none;

    }

}


@media (max-width: 991px) {

    .cage-hero-grid {

        display: block;

    }

    .cage-category-box {

        margin-bottom: 20px;

    }

    .cage-category-list {

        display: grid;

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

    }

    .cage-subcategories {

        position: static;

        width: 100%;

        box-shadow: none;

        border-radius: 0;

    }

    .cage-category-item:hover
    .cage-subcategories {

        display: none;

    }

    .cage-slide {

        height: 350px;

    }

    .cage-services-grid {

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

    }

    .cage-service:nth-child(2) {

        border-right: none;

    }

    .cage-service:nth-child(-n+2) {

        border-bottom: 1px solid #eee;

    }

}


@media (max-width: 576px) {

    .cage-hero {

        padding: 15px 0;

    }

    .cage-category-list {

        display: block;

    }

    .cage-category-item > a {

        padding: 14px 18px;

    }

    .cage-slide {

        height: 240px;

        border-radius: 8px;

    }

    .cage-services-grid {

        grid-template-columns: 1fr;

    }

    .cage-service {

        border-right: none !important;

        border-bottom: 1px solid #eee;

    }

    .cage-service:last-child {

        border-bottom: none;

    }

}


/* =========================
   NOS ENGAGEMENTS
========================= */

.our-policy {
    position: relative;
}

.policy-card {
    display: flex;
    align-items: center;
    padding: 25px 20px;
    background: #ffffff;
    border: 1px solid #eeeeee;
    border-radius: 15px;
    transition: all 0.35s ease;
    position: relative;
    overflow: hidden;
}

/* Petite ligne décorative en haut */
.policy-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 3px;
    background: #0B1A57;
    transition: width 0.35s ease;
}

.policy-card:hover::before {
    width: 100%;
}

/* Effet au survol */
.policy-card:hover {
    transform: translateY(-7px);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.10);
    border-color: transparent;
}

/* Cercle de l'icône */
.policy-icon {
    min-width: 60px;
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 15px;
    border-radius: 50%;
    background: rgba(42, 85, 255, 0.10);
    color: #2A55FF;
    transition: all 0.35s ease;
}

/* Taille SVG */
.policy-icon svg {
    width: 30px;
    height: 30px;
}

/* Animation icône */
.policy-card:hover .policy-icon {
    background: #0B1A57;
    color: #ffffff;
    transform: scale(1.08) rotate(5deg);
}

/* Contenu */
.policy-content h3 {
    font-size: 16px;
    font-weight: 700;
    color: #222222;
    margin: 0 0 5px;
    line-height: 1.3;
}

.policy-content p {
    font-size: 13px;
    color: #777777;
    margin: 0;
}

/* Responsive mobile */
@media (max-width: 575px) {

    .policy-card {
        padding: 20px 15px;
    }

    .policy-icon {
        min-width: 52px;
        width: 52px;
        height: 52px;
    }

    .policy-icon svg {
        width: 25px;
        height: 25px;
    }

    .policy-content h3 {
        font-size: 15px;
    }

    .policy-content p {
        font-size: 12px;
    }
}


/* ==========================================
   SECTION NOUVEAUX PRODUITS
========================================== */

.shop-section {
    background: #f8f9fc;
}


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

.section-heading {
    position: relative;
}

.section-badge {
    display: inline-flex;
    align-items: center;
    padding: 10px 22px;
    background: #2A55FF;
    color: #ffffff;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.5px;
    border-radius: 30px;
    box-shadow: 0 5px 15px rgba(42, 85, 255, 0.25);
}

.section-title {
    font-size: 28px;
    font-weight: 800;
    color: #1f2937;
    margin-bottom: 5px;
}

.section-subtitle {
    color: #777;
    font-size: 15px;
    margin-bottom: 0;
}


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

.product-count {
    font-size: 14px;
    font-weight: 600;
    color: #444;
}

.pagination-info {
    font-size: 13px;
    color: #888;
}


/* ==========================================
   CARTE PRODUIT
========================================== */

.product-card {
    position: relative;
    height: 100%;
    background: #ffffff;
    border-radius: 18px;
    overflow: hidden;
    border: 1px solid #eeeeee;
    transition: all 0.35s ease;
}

.product-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.12);
}


/* ==========================================
   IMAGE
========================================== */

.product-image-wrapper {
    position: relative;
    height: 300px;
    overflow: hidden;
    background: #f5f5f5;
}

.product-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.product-card:hover .product-image {
    transform: scale(1.08);
}


/* ==========================================
   BADGE NOUVEAU
========================================== */

.new-badge {
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 3;
    background: #FF2A00;
    color: #ffffff;
    padding: 6px 12px;
    font-size: 11px;
    font-weight: 700;
    border-radius: 20px;
}


/* ==========================================
   BADGE STOCK
========================================== */

.stock-badge {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 3;
    background: #ffffff;
    color: #198754;
    padding: 6px 10px;
    font-size: 10px;
    font-weight: 600;
    border-radius: 20px;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.12);
}

.stock-badge.out-of-stock {
    color: #dc3545;
}


/* ==========================================
   BOUTON PANIER
========================================== */

.product-action {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;

    padding: 15px;

    background: linear-gradient(
        to top,
        rgba(0, 0, 0, 0.65),
        transparent
    );

    transform: translateY(100%);
    transition: transform 0.35s ease;
}

.product-card:hover .product-action {
    transform: translateY(0);
}


.add-cart-btn {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;

    padding: 10px 15px;

    background: #2A55FF;
    color: #ffffff !important;

    font-size: 13px;
    font-weight: 600;

    border-radius: 8px;

    text-decoration: none;

    transition: all 0.3s ease;
}

.add-cart-btn:hover {
    background: #1d43d8;
    transform: scale(1.02);
}

.add-cart-btn i {
    margin-right: 8px;
}

.add-cart-btn.disabled {
    background: #777;
    cursor: not-allowed;
}


/* ==========================================
   CONTENU PRODUIT
========================================== */

.product-content {
    padding: 15px;
}


.product-title {
    font-size: 15px;
    font-weight: 600;

    min-height: 42px;

    margin-bottom: 10px;

    line-height: 1.4;
}

.product-title a {
    color: #222222;
    text-decoration: none;
    transition: color 0.3s ease;
}

.product-title a:hover {
    color: #2A55FF;
}


/* ==========================================
   PRIX
========================================== */

.product-price {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 12px;
}

.normal-price,
.promo-price {
    font-size: 17px;
    font-weight: 800;
    color: #FF2A00;
}

.old-price {
    font-size: 12px;
    color: #999;
    text-decoration: line-through;
}

.promotion-percent {
    background: #fff0ed;
    color: #FF2A00;
    padding: 3px 7px;
    border-radius: 5px;
    font-size: 10px;
    font-weight: 700;
}


/* ==========================================
   VOIR PRODUIT
========================================== */

.view-product {
    display: inline-flex;
    align-items: center;
    gap: 7px;

    font-size: 12px;
    font-weight: 600;

    color: #2A55FF;

    text-decoration: none;
}

.view-product i {
    transition: transform 0.3s ease;
}

.view-product:hover {
    color: #1d43d8;
}

.view-product:hover i {
    transform: translateX(5px);
}


/* ==========================================
   MOBILE
========================================== */

@media (max-width: 575px) {

    .section-title {
        font-size: 22px;
    }

    .section-subtitle {
        font-size: 13px;
    }

    .product-image-wrapper {
        height: 210px;
    }

    .product-content {
        padding: 12px;
    }

    .product-title {
        font-size: 13px;
    }

    .normal-price,
    .promo-price {
        font-size: 14px;
    }

    .new-badge {
        font-size: 9px;
        padding: 5px 8px;
    }

    .stock-badge {
        font-size: 9px;
        padding: 5px 7px;
    }

    .product-action {
        transform: translateY(0);
        padding: 8px;
    }

    .add-cart-btn {
        padding: 8px 5px;
        font-size: 10px;
    }

}

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

.popular-products {
    background: #ffffff;
}


/* Badge titre */
.popular-badge {
    background: #17a2b8;
    box-shadow: 0 5px 15px rgba(23, 162, 184, 0.25);
}


/* Badge populaire sur les produits */
.popular-badge-product {
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 3;

    display: inline-flex;
    align-items: center;

    background: #17a2b8;
    color: #ffffff;

    padding: 6px 12px;

    font-size: 10px;
    font-weight: 700;

    border-radius: 20px;

    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.15);
}


/* Animation badge populaire */
.product-card:hover .popular-badge-product {
    transform: scale(1.05);
}


/* ==========================================
   SECTION FOURNISSEURS
========================================== */

.supplier-section {
    width: 100%;
    padding: 20px 30px 40px;
}


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

.supplier-title-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 10px 25px;

    background: #ffffff;
    color: #555555;

    border: 2px solid #dee2e6;
    border-radius: 30px;

    font-size: 14px;
    font-weight: 700;

    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.06);
}


/* ==========================================
   SOUS-TITRE
========================================== */

.supplier-section .section-title {
    margin-top: 20px;
    margin-bottom: 5px;

    font-size: 30px;
    font-weight: 800;
    color: #1f2937;
}

.supplier-section .section-subtitle {
    margin-bottom: 35px;

    font-size: 16px;
    color: #777777;
}


/* ==========================================
   CONTENEUR DES LOGOS
========================================== */

.supplier-section .brand-logos {

    width: 100%;

    display: grid !important;

    grid-template-columns: repeat(6, minmax(0, 1fr));

    gap: 20px;

    align-items: stretch;

    margin-top: 20px;

}


/* ==========================================
   ELEMENT FOURNISSEUR
========================================== */

.supplier-section .brand-item {

    width: 100% !important;

    min-width: 0;

    display: block !important;

}


/* ==========================================
   LIEN
========================================== */

.supplier-section .brand-link {

    width: 100%;
    height: 160px;

    display: flex !important;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    padding: 20px;

    background: #ffffff;

    border: 1px solid #eeeeee;

    border-radius: 15px;

    text-decoration: none !important;

    transition: all 0.3s ease;

    box-sizing: border-box;

}


/* ==========================================
   HOVER
========================================== */

.supplier-section .brand-link:hover {

    transform: translateY(-7px);

    border-color: #2A55FF;

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

}


/* ==========================================
   CONTENEUR IMAGE
========================================== */

.supplier-section .brand-image-wrapper {

    width: 100%;
    height: 90px;

    display: flex !important;

    align-items: center;

    justify-content: center;

    margin-bottom: 10px;

}


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

.supplier-section .brand-image {

    display: block !important;

    max-width: 140px;

    max-height: 75px;

    width: auto !important;

    height: auto !important;

    object-fit: contain;

    transition: transform 0.3s ease;

}


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

.supplier-section .brand-link:hover .brand-image {

    transform: scale(1.08);

}


/* ==========================================
   NOM FOURNISSEUR
========================================== */

.supplier-section .brand-name {

    display: block;

    width: 100%;

    overflow: hidden;

    text-overflow: ellipsis;

    white-space: nowrap;

    text-align: center;

    font-size: 13px;

    font-weight: 700;

    color: #2A55FF;

}


/* ==========================================
   TABLETTE
========================================== */

@media (max-width: 991px) {

    .supplier-section .brand-logos {

        grid-template-columns: repeat(4, minmax(0, 1fr));

        gap: 15px;

    }

}


/* ==========================================
   MOBILE
========================================== */

@media (max-width: 767px) {

    .supplier-section {

        padding-left: 15px;
        padding-right: 15px;

    }

    .supplier-section .brand-logos {

        grid-template-columns: repeat(3, minmax(0, 1fr));

        gap: 12px;

    }

    .supplier-section .brand-link {

        height: 130px;

        padding: 10px;

    }

    .supplier-section .brand-image-wrapper {

        height: 65px;

    }

    .supplier-section .brand-image {

        max-width: 90px;

        max-height: 55px;

    }

    .supplier-section .brand-name {

        font-size: 10px;

    }

}


/* ==========================================
   PETIT MOBILE
========================================== */

@media (max-width: 480px) {

    .supplier-section .brand-logos {

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

    }

}

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

.main-footer {

    margin-top: 80px;

    background: #111827;

    color: #ffffff;

    padding-top: 60px;

}


/* ==========================================
   COLONNES
========================================== */

.footer-content {

    padding-bottom: 30px;

}


.footer-column {

    height: 100%;

}


/* ==========================================
   TITRES
========================================== */

.footer-title {

    display: flex;

    align-items: center;

    gap: 10px;

    margin: 0;

    font-size: 18px;

    font-weight: 700;

    color: #ffffff;

}


.footer-title i {

    color: #2A55FF;

    font-size: 18px;

}


/* ==========================================
   LIGNE DECORATIVE
========================================== */

.footer-line {

    width: 45px;

    height: 3px;

    margin-top: 12px;

    margin-bottom: 25px;

    background: #2A55FF;

    border-radius: 5px;

}


/* ==========================================
   CONTACT
========================================== */

.footer-contact-list {

    margin: 0;

    padding: 0;

    list-style: none;

}


.footer-contact-list li {

    display: flex;

    align-items: flex-start;

    gap: 12px;

    margin-bottom: 18px;

    color: #b8c0cc;

    font-size: 14px;

    line-height: 1.6;

}


.footer-contact-list li > i {

    width: 20px;

    margin-top: 3px;

    color: #2A55FF;

    text-align: center;

}


.footer-contact-list a {

    color: #d8dde5;

    text-decoration: none;

    transition: color 0.3s ease;

}


.footer-contact-list a:hover {

    color: #2A55FF;

}


/* ==========================================
   LIENS
========================================== */

.footer-links {

    margin: 0;

    padding: 0;

    list-style: none;

}


.footer-links li {

    margin-bottom: 15px;

}


.footer-links a {

    display: inline-flex;

    align-items: center;

    gap: 10px;

    color: #b8c0cc;

    font-size: 14px;

    text-decoration: none;

    transition: all 0.3s ease;

}


.footer-links a i {

    font-size: 10px;

    color: #2A55FF;

    transition: transform 0.3s ease;

}


.footer-links a:hover {

    color: #ffffff;

    transform: translateX(5px);

}


.footer-links a:hover i {

    transform: translateX(3px);

}


/* ==========================================
   PAIEMENT
========================================== */

.payment-description {

    color: #b8c0cc;

    font-size: 14px;

    margin-bottom: 20px;

}


.payment-methods {

    display: flex;

    flex-wrap: wrap;

    gap: 12px;

}


.payment-item {

    width: 90px;

    height: 55px;

    display: flex;

    align-items: center;

    justify-content: center;

    padding: 7px;

    background: #ffffff;

    border-radius: 8px;

    overflow: hidden;

    transition: all 0.3s ease;

}


.payment-item:hover {

    transform: translateY(-5px);

    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);

}


.payment-item img {

    max-width: 100%;

    max-height: 42px;

    width: auto;

    height: auto;

    object-fit: contain;

}


/* ==========================================
   SEPARATEUR
========================================== */

.footer-divider {

    height: 1px;

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

}


/* ==========================================
   COPYRIGHT
========================================== */

.footer-bottom {

    display: flex;

    justify-content: space-between;

    align-items: center;

    gap: 20px;

    padding: 20px 0;

    color: #8d96a3;

    font-size: 13px;

}


.footer-bottom p {

    margin: 0;

}


.footer-bottom strong {

    color: #ffffff;

}


/* ==========================================
   NOTIFICATION MAINTENANCE
========================================== */

.maintenance-notification {

    position: fixed;

    right: 25px;

    bottom: 25px;

    z-index: 9999;

    width: 390px;

    max-width: calc(100% - 30px);

    background: #ffffff;

    border-radius: 15px;

    box-shadow: 0 15px 45px rgba(0, 0, 0, 0.20);

    border-left: 4px solid #2A55FF;

    animation: notification-slide-in 0.6s ease;

}


.maintenance-content {

    display: flex;

    align-items: center;

    position: relative;

    padding: 18px;

}


.maintenance-logo {

    width: 55px;

    height: 55px;

    flex-shrink: 0;

    display: flex;

    align-items: center;

    justify-content: center;

    margin-right: 15px;

    background: #f5f7ff;

    border-radius: 12px;

    overflow: hidden;

}


.maintenance-logo img {

    max-width: 45px;

    max-height: 45px;

    object-fit: contain;

}


.maintenance-text {

    padding-right: 20px;

}


.maintenance-label {

    display: inline-flex;

    align-items: center;

    gap: 5px;

    margin-bottom: 5px;

    color: #2A55FF;

    font-size: 11px;

    font-weight: 700;

    text-transform: uppercase;

}


.maintenance-text p {

    margin: 0 0 4px;

    color: #555555;

    font-size: 12px;

}


.maintenance-text h4 {

    margin: 0 0 5px;

    color: #222222;

    font-size: 14px;

    font-weight: 700;

}


.maintenance-text small {

    color: #2A55FF;

    font-size: 11px;

}


.close-button {

    position: absolute;

    top: 8px;

    right: 8px;

    width: 25px;

    height: 25px;

    display: flex;

    align-items: center;

    justify-content: center;

    border: none;

    background: transparent;

    color: #999999;

    cursor: pointer;

    border-radius: 50%;

    transition: all 0.3s ease;

}


.close-button:hover {

    background: #f1f1f1;

    color: #FF2A00;

}


/* ==========================================
   ANIMATION
========================================== */

@keyframes notification-slide-in {

    from {

        opacity: 0;

        transform: translateY(40px);

    }

    to {

        opacity: 1;

        transform: translateY(0);

    }

}


/* ==========================================
   MOBILE
========================================== */

@media (max-width: 767px) {

    .main-footer {

        margin-top: 50px;

        padding-top: 40px;

    }


    .footer-bottom {

        flex-direction: column;

        text-align: center;

        gap: 5px;

    }


    .maintenance-notification {

        right: 15px;

        bottom: 15px;

        width: calc(100% - 30px);

    }

}


@media (max-width: 480px) {

    .payment-methods {

        gap: 8px;

    }


    .payment-item {

        width: 75px;

        height: 50px;

    }


    .maintenance-content {

        padding: 15px;

    }

}

/* =====================================================
   PRODUITS DE LA MÊME CATÉGORIE
===================================================== */

.related-products-section {
    background: #fafbfe;
}


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

.related-header {
    position: relative;
}

.related-label {
    display: inline-block;
    margin-bottom: 8px;
    color: #2A55FF;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.related-title {
    margin: 0;
    color: #172B4D;
    font-size: 25px;
    font-weight: 700;
}

.related-line {
    width: 45px;
    height: 3px;
    margin-top: 12px;
    background: #2A55FF;
    border-radius: 10px;
}


/* =====================================================
   CARTE
===================================================== */

.related-product-card {
    height: 100%;
    background: #ffffff;
    border: 1px solid #eeeeee;
    border-radius: 14px;
    overflow: hidden;

    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease,
        border-color 0.3s ease;
}


/* Effet doux au survol */

.related-product-card:hover {
    transform: translateY(-4px);
    border-color: #e3e7f5;
    box-shadow: 0 10px 25px rgba(23, 43, 77, 0.08);
}


/* =====================================================
   IMAGE
===================================================== */

.related-image-wrapper {
    position: relative;
    height: 270px;
    overflow: hidden;
    background: #f5f6f9;
}


/* Image */

.related-product-image {
    width: 100%;
    height: 100%;
    display: block;

    object-fit: cover;

    transition: transform 0.5s ease;
}


/* Zoom très léger */

.related-product-card:hover .related-product-image {
    transform: scale(1.04);
}


/* =====================================================
   BADGE PROMOTION
===================================================== */

.related-promo-badge {
    position: absolute;
    top: 12px;
    left: 12px;

    padding: 5px 9px;

    background: #fff;
    color: #e53935;

    font-size: 11px;
    font-weight: 700;

    border-radius: 20px;

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


/* =====================================================
   ACTION PANIER
===================================================== */

.related-product-action {
    position: absolute;

    left: 0;
    right: 0;
    bottom: 0;

    display: flex;
    justify-content: center;

    padding: 12px;

    background: linear-gradient(
        to top,
        rgba(0, 0, 0, 0.55),
        transparent
    );

    opacity: 0;
    transform: translateY(10px);

    transition:
        opacity 0.3s ease,
        transform 0.3s ease;
}


/* Affichage au survol */

.related-product-card:hover .related-product-action {
    opacity: 1;
    transform: translateY(0);
}


/* Bouton panier */

.related-cart-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;

    padding: 9px 16px;

    background: #2A55FF;
    color: #ffffff !important;

    border-radius: 7px;

    font-size: 12px;
    font-weight: 600;

    text-decoration: none;

    transition:
        background 0.3s ease,
        transform 0.2s ease;
}

.related-cart-btn:hover {
    background: #1d43d8;
    transform: translateY(-1px);
}


/* =====================================================
   RUPTURE DE STOCK
===================================================== */

.related-stock-out {
    display: inline-flex;
    align-items: center;
    gap: 6px;

    padding: 8px 12px;

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

    color: #dc3545;

    border-radius: 7px;

    font-size: 11px;
    font-weight: 600;
}


/* =====================================================
   CONTENU
===================================================== */

.related-product-content {
    padding: 15px 16px 18px;
}


/* =====================================================
   NOM PRODUIT
===================================================== */

.related-product-title {
    min-height: 40px;

    margin: 0 0 10px;

    font-size: 14px;
    font-weight: 600;

    line-height: 1.4;
}

.related-product-title a {
    color: #27364b;
    text-decoration: none;

    transition: color 0.25s ease;
}

.related-product-title a:hover {
    color: #2A55FF;
}


/* =====================================================
   PRIX
===================================================== */

.related-product-price {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}


/* Prix actuel */

.related-current-price {
    color: #FF2A00;

    font-size: 16px;
    font-weight: 700;
}


/* Ancien prix */

.related-old-price {
    color: #999;

    font-size: 11px;

    text-decoration: line-through;
}


/* =====================================================
   MOBILE
===================================================== */

@media (max-width: 767px) {

    .related-products-section {
        padding-top: 30px !important;
        padding-bottom: 30px !important;
    }

    .related-title {
        font-size: 21px;
    }

    .related-image-wrapper {
        height: 210px;
    }

    .related-product-content {
        padding: 12px;
    }

    .related-product-title {
        font-size: 12px;
    }

    .related-current-price {
        font-size: 14px;
    }

    /*
    Sur mobile, pas de hover.
    Le bouton reste visible.
    */

    .related-product-action {
        opacity: 1;
        transform: translateY(0);
        padding: 8px;
    }

    .related-cart-btn {
        width: 100%;
        padding: 8px 5px;
        font-size: 10px;
    }

    .related-cart-btn span {
        display: inline;
    }

}


@media (max-width: 480px) {

    .related-image-wrapper {
        height: 180px;
    }

    .related-product-title {
        min-height: 34px;
    }

    .related-current-price {
        font-size: 13px;
    }

}

/* =========================================
   SECTION AVIS
========================================= */

.review-section {
    background: #f8f9fc;
    padding: 50px 0;
}


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

.review-header {
    text-align: center;
}

.review-main-title {
    font-size: 28px;
    font-weight: 800;
    color: #172b4d;
    margin-bottom: 8px;
}

.review-subtitle {
    color: #888;
    font-size: 14px;
}


/* =========================================
   CARTES
========================================= */

.review-card,
.rating-card {
    background: #fff;
    border: 1px solid #eee;
    border-radius: 16px;
    padding: 30px;
    height: 100%;
    box-shadow: 0 5px 25px rgba(0,0,0,.04);
}


/* =========================================
   TITRES
========================================= */

.review-title {
    font-size: 18px;
    font-weight: 700;
    color: #172b4d;
    margin-bottom: 25px;
}


/* =========================================
   AVIS CLIENT
========================================= */

.customer-review {
    display: flex;
    gap: 15px;
    padding-bottom: 25px;
    border-bottom: 1px solid #eee;
}


.customer-avatar {
    width: 56px;
    height: 56px;
    min-width: 56px;
    border-radius: 50%;
    overflow: hidden;
}


.customer-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}


.customer-review-content {
    flex: 1;
}


.customer-info {
    margin-bottom: 8px;
}


.customer-name {
    color: #2A55FF;
    font-weight: 700;
    text-decoration: none;
}


.review-date {
    color: #999;
    font-size: 12px;
}


.customer-comment {
    color: #666;
    font-size: 14px;
    line-height: 1.7;
    margin-bottom: 15px;
}


.review-actions {
    display: flex;
    gap: 20px;
}


.review-actions a {
    color: #777;
    font-size: 12px;
    text-decoration: none;
    transition: .3s;
}


.review-actions a:hover {
    color: #2A55FF;
}


.review-actions i {
    margin-right: 5px;
}


/* =========================================
   FORMULAIRE
========================================= */

.rating-form {
    display: flex;
    align-items: center;
    gap: 15px;
    flex-wrap: wrap;
}


.rating-label {
    color: #777;
    font-size: 13px;
    font-weight: 600;
}


.rating {
    display: flex;
    gap: 4px;
}


.star {
    color: #ddd;
    font-size: 25px;
    cursor: pointer;
    transition: .2s;
}


.star:hover,
.star.active {
    color: #FFB400;
}


.review-textarea {
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    padding: 15px;
    resize: vertical;
    font-size: 14px;
}


.review-textarea:focus {
    border-color: #2A55FF;
    box-shadow: 0 0 0 3px rgba(42,85,255,.08);
}


.review-submit {
    background: #2A55FF;
    color: #fff;
    border-radius: 8px;
    padding: 10px 22px;
    font-weight: 600;
    border: none;
    transition: .3s;
}


.review-submit:hover {
    background: #1d43d8;
    color: #fff;
    transform: translateY(-2px);
}


/* =========================================
   NOTE GLOBALE
========================================= */

.overall-rating {
    text-align: center;
    padding: 15px 0 30px;
    border-bottom: 1px solid #eee;
}


.rating-number {
    font-size: 48px;
    font-weight: 800;
    color: #172b4d;
}


.rating-stars {
    font-size: 24px;
    color: #FFB400;
    letter-spacing: 2px;
}


.empty-star {
    color: #ddd;
}


.total-reviews {
    color: #888;
    font-size: 13px;
    margin-top: 8px;
}


.total-reviews i {
    margin-right: 5px;
    color: #2A55FF;
}


/* =========================================
   STATISTIQUES
========================================= */

.rating-statistics {
    margin-top: 25px;
}


.rating-line {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
}


.rating-label {
    width: 35px;
    display: flex;
    gap: 3px;
    justify-content: center;
    color: #777;
    font-size: 13px;
}


.rating-label span:last-child {
    color: #FFB400;
}


.progress {
    flex: 1;
    height: 8px;
    background: #eee;
    border-radius: 20px;
    overflow: hidden;
}


.progress-bar {
    height: 100%;
    background: #2A55FF;
    border-radius: 20px;
    transition: width .5s ease;
}


.rating-percent {
    width: 40px;
    text-align: right;
    font-size: 11px;
    color: #999;
}


/* =========================================
   MOBILE
========================================= */

@media (max-width: 767px) {

    .review-section {
        padding: 30px 0;
    }

    .review-card,
    .rating-card {
        padding: 20px;
    }

    .review-main-title {
        font-size: 23px;
    }

    .customer-review {
        align-items: flex-start;
    }

    .customer-avatar {
        width: 45px;
        height: 45px;
        min-width: 45px;
    }

    .rating-number {
        font-size: 40px;
    }

}

/* ==========================================
   PANIER
========================================== */

.cart-section {
    background: #f7f9fc;
    min-height: 500px;
}


/* ==========================================
   PANIER VIDE
========================================== */

.empty-cart {
    background: #fff;
    border-radius: 18px;
    padding: 60px 20px;
    box-shadow: 0 8px 30px rgba(0,0,0,.05);
}

.empty-cart-icon {
    width: 80px;
    height: 80px;
    margin: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #eef2ff;
    color: #2A55FF;
    border-radius: 50%;
    font-size: 30px;
}

.empty-cart h3 {
    color: #172B4D;
    font-weight: 700;
}

.empty-cart p {
    color: #888;
}


/* ==========================================
   HEADER PANIER
========================================== */

.cart-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.cart-header h2 {
    margin: 0;
    color: #172B4D;
    font-size: 24px;
    font-weight: 800;
}

.cart-header span {
    background: #eef2ff;
    color: #2A55FF;
    padding: 7px 14px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
}


/* ==========================================
   HEADER TABLEAU
========================================== */

.cart-table-header {
    display: grid;
    grid-template-columns: 2.5fr 1.3fr 1fr 1.3fr .8fr;
    gap: 15px;
    padding: 0 20px 12px;
    color: #888;
    font-size: 12px;
    font-weight: 600;
}


/* ==========================================
   PRODUIT
========================================== */

.cart-product-item {
    display: grid;
    grid-template-columns: 2.5fr 1.3fr 1fr 1.3fr .8fr;
    align-items: center;
    gap: 15px;

    background: #fff;
    padding: 18px 20px;
    margin-bottom: 15px;

    border-radius: 14px;
    border: 1px solid #eee;

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

    transition: all .3s ease;
}

.cart-product-item:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 30px rgba(0,0,0,.08);
}


/* ==========================================
   IMAGE + NOM
========================================== */

.cart-product-info {
    display: flex;
    align-items: center;
    gap: 12px;
}

.cart-image {
    width: 65px;
    height: 65px;
    min-width: 65px;
    background: #f7f9fc;
    border-radius: 10px;
    padding: 5px;
}

.cart-image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.cart-product-name h4 {
    margin: 0 0 5px;
    font-size: 13px;
    font-weight: 700;
    color: #172B4D;
}

.cart-product-name small {
    color: #28a745;
    font-size: 10px;
}


/* ==========================================
   PRIX
========================================== */

.cart-product-price strong {
    color: #2A55FF;
    font-size: 13px;
}


/* ==========================================
   QUANTITÉ
========================================== */

.quantity-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-width: 35px;
    height: 32px;

    padding: 0 10px;

    background: #f1f3f9;
    border-radius: 8px;

    color: #172B4D;
    font-weight: 700;
}


/* ==========================================
   TOTAL
========================================== */

.cart-product-total strong {
    color: #172B4D;
    font-size: 13px;
}


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

.cart-product-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.edit-cart,
.delete-cart {
    width: 34px;
    height: 34px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 8px;

    border: none;

    text-decoration: none;

    transition: .3s;
}

.edit-cart {
    background: #eef2ff;
    color: #2A55FF;
}

.edit-cart:hover {
    background: #2A55FF;
    color: #fff;
}

.delete-cart {
    background: #fff0f0;
    color: #dc3545;
    cursor: pointer;
}

.delete-cart:hover {
    background: #dc3545;
    color: #fff;
}


/* ==========================================
   SUMMARY
========================================== */

.cart-summary {
    background: #fff;
    padding: 25px;
    border-radius: 16px;
    border: 1px solid #eee;
    box-shadow: 0 8px 30px rgba(0,0,0,.05);

    position: sticky;
    top: 20px;
}


.summary-header {
    border-bottom: 1px solid #eee;
    padding-bottom: 15px;
    margin-bottom: 20px;
}

.summary-header h3 {
    margin: 0;
    color: #172B4D;
    font-size: 20px;
    font-weight: 800;
}


/* ==========================================
   COUPON
========================================== */

.coupon-form {
    display: flex;
}

.coupon-form input {
    border-radius: 8px 0 0 8px;
    border: 1px solid #ddd;
    box-shadow: none;
}

.coupon-form button {
    background: #172B4D;
    color: #fff;
    border-radius: 0 8px 8px 0;
    font-size: 12px;
    font-weight: 600;
}


/* ==========================================
   LIGNES
========================================== */

.summary-line {
    display: flex;
    justify-content: space-between;
    align-items: center;

    padding: 10px 0;

    color: #777;
    font-size: 13px;
}

.summary-line strong {
    color: #172B4D;
}

.summary-line .discount {
    color: #dc3545;
}


/* ==========================================
   TOTAL
========================================== */

.summary-divider {
    height: 1px;
    background: #eee;
    margin: 10px 0;
}

.summary-total {
    display: flex;
    justify-content: space-between;
    align-items: center;

    padding: 10px 0 20px;

    color: #172B4D;
    font-size: 15px;
    font-weight: 700;
}

.summary-total strong {
    color: #2A55FF;
    font-size: 18px;
}


/* ==========================================
   CHECKOUT
========================================== */

.checkout-btn {
    display: flex;
    align-items: center;
    justify-content: space-between;

    width: 100%;

    padding: 13px 18px;

    background: #2A55FF;
    color: #fff;

    border-radius: 9px;

    font-size: 13px;
    font-weight: 700;

    text-decoration: none;

    transition: .3s;
}

.checkout-btn:hover {
    background: #1d43d8;
    color: #fff;
    transform: translateY(-2px);
}


/* ==========================================
   CONTINUER ACHATS
========================================== */

.continue-shopping {
    display: block;
    text-align: center;

    margin-top: 15px;

    color: #777;
    font-size: 12px;

    text-decoration: none;
}

.continue-shopping:hover {
    color: #2A55FF;
}


/* ==========================================
   LABEL MOBILE
========================================== */

.mobile-label {
    display: none;
}


/* ==========================================
   TABLETTE
========================================== */

@media (max-width: 991px) {

    .cart-table-header {
        display: none !important;
    }

    .cart-product-item {
        grid-template-columns: 2fr 1fr 1fr;
    }

    .cart-product-info {
        grid-column: span 3;
    }

}


/* ==========================================
   MOBILE
========================================== */

@media (max-width: 576px) {

    .cart-section {
        padding: 25px 0;
    }

    .cart-header h2 {
        font-size: 20px;
    }

    .cart-product-item {
        display: block;
        padding: 15px;
    }

    .cart-product-info {
        margin-bottom: 15px;
    }

    .cart-product-price,
    .cart-product-quantity,
    .cart-product-total,
    .cart-product-actions {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 8px 0;
        border-top: 1px solid #f1f1f1;
    }

    .mobile-label {
        display: block;
        color: #888;
        font-size: 12px;
    }

    .cart-product-actions {
        justify-content: flex-end;
        gap: 10px;
    }

}

/* =========================================================
   PAGE CATEGORIE PRODUITS
========================================================= */

.category-page {
    background: #f7f9fc;
    min-height: 100vh;
    padding-bottom: 60px;
}


/* =========================================================
   BREADCRUMB
========================================================= */

.category-breadcrumb {
    margin: 20px 0;
}

.category-breadcrumb-box {
    background: #ffffff;
    border-radius: 12px;
    padding: 12px 18px;
    box-shadow: 0 3px 15px rgba(0, 0, 0, 0.04);
    border: 1px solid #edf0f5;
}

.category-breadcrumb a {
    text-decoration: none;
}

.category-breadcrumb .home-icon {
    color: #2A55FF;
    transition: all .3s ease;
}

.category-breadcrumb .home-icon:hover {
    color: #FF6B00;
    transform: scale(1.1);
}

.category-breadcrumb .current-category {
    color: #172B4D;
    font-weight: 700;
}


/* =========================================================
   HEADER CATEGORIE
========================================================= */

.category-header {
    background: linear-gradient(
        135deg,
        #06245B,
        #2A55FF
    );

    border-radius: 18px;
    padding: 25px 30px;
    margin-bottom: 25px;
    color: #ffffff;
    position: relative;
    overflow: hidden;
}

.category-header::after {
    content: "";
    position: absolute;
    width: 250px;
    height: 250px;
    right: -80px;
    top: -100px;
    border-radius: 50%;
    background: rgba(255,255,255,.08);
}

.category-header h1 {
    font-size: 25px;
    font-weight: 800;
    margin: 0 0 5px;
    position: relative;
    z-index: 2;
}

.category-header p {
    margin: 0;
    color: rgba(255,255,255,.8);
    font-size: 14px;
    position: relative;
    z-index: 2;
}


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

.category-sidebar {
    background: #ffffff;
    border-radius: 18px;
    padding: 22px;
    box-shadow: 0 8px 30px rgba(15, 23, 42, 0.06);
    border: 1px solid #edf0f5;
    position: sticky;
    top: 20px;
}

.category-sidebar-title {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #172B4D;
    font-size: 16px;
    font-weight: 800;
    margin-bottom: 18px;
}

.category-sidebar-title i {
    width: 35px;
    height: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: #eef2ff;
    color: #2A55FF;
}

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

.category-list li {
    margin-bottom: 7px;
}

.category-list li a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 11px 13px;
    border-radius: 10px;
    color: #596579;
    text-decoration: none;
    font-size: 13px;
    transition: all .3s ease;
}

.category-list li a i {
    font-size: 10px;
    color: #adb5bd;
    transition: transform .3s ease;
}

.category-list li a:hover {
    background: #eef2ff;
    color: #2A55FF;
    padding-left: 18px;
}

.category-list li a:hover i {
    transform: translateX(4px);
    color: #2A55FF;
}


/* =========================================================
   TOOLBAR
========================================================= */

.product-toolbar {
    background: #ffffff;
    padding: 14px 18px;
    border-radius: 12px;
    margin-bottom: 20px;
    border: 1px solid #edf0f5;
    box-shadow: 0 4px 15px rgba(0,0,0,.04);
}

.product-toolbar p {
    margin: 0;
    color: #777;
    font-size: 13px;
}

.product-toolbar strong {
    color: #172B4D;
}


/* =========================================================
   PRODUCT CARD
========================================================= */

.modern-product-card {
    background: #ffffff;
    border-radius: 18px;
    overflow: hidden;
    border: 1px solid #edf0f5;
    transition: all .35s ease;
    height: 100%;
    position: relative;
}

.modern-product-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 18px 40px rgba(15, 23, 42, .12);
    border-color: transparent;
}


/* =========================================================
   IMAGE
========================================================= */

.modern-product-image {
    height: 280px;
    position: relative;
    overflow: hidden;
    background: #f5f7fb;
}

.modern-product-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .6s ease;
}

.modern-product-card:hover .modern-product-image img {
    transform: scale(1.08);
}


/* =========================================================
   OVERLAY
========================================================= */

.product-overlay {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 25px 15px 15px;
    background: linear-gradient(
        to top,
        rgba(0,0,0,.7),
        transparent
    );

    opacity: 0;
    transform: translateY(15px);
    transition: all .35s ease;
}

.modern-product-card:hover .product-overlay {
    opacity: 1;
    transform: translateY(0);
}


/* =========================================================
   PANIER
========================================================= */

.modern-cart-btn {
    width: 100%;
    border: none;
    padding: 11px 15px;
    border-radius: 10px;
    background: #2A55FF;
    color: #ffffff !important;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: all .3s ease;
}

.modern-cart-btn:hover {
    background: #06245B;
    transform: scale(1.02);
    color: #ffffff;
}


/* =========================================================
   BADGE PROMOTION
========================================================= */

.promo-badge {
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 3;
    background: #FF4D2E;
    color: #ffffff;
    padding: 6px 10px;
    border-radius: 20px;
    font-size: 10px;
    font-weight: 800;
    box-shadow: 0 5px 15px rgba(255, 77, 46, .3);
}


/* =========================================================
   STOCK
========================================================= */

.stock-badge {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 3;
    background: rgba(255,255,255,.95);
    padding: 6px 10px;
    border-radius: 20px;
    font-size: 10px;
    font-weight: 700;
}

.stock-available {
    color: #198754;
}

.stock-empty {
    color: #dc3545;
}


/* =========================================================
   PRODUCT CONTENT
========================================================= */

.modern-product-content {
    padding: 16px;
}

.modern-product-title {
    margin: 0 0 10px;
    min-height: 42px;
}

.modern-product-title a {
    color: #172B4D;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.5;
    text-decoration: none;
    transition: color .3s ease;
}

.modern-product-title a:hover {
    color: #2A55FF;
}


/* =========================================================
   PRICE
========================================================= */

.modern-product-price {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.current-price {
    color: #FF4D2E;
    font-size: 17px;
    font-weight: 800;
}

.old-price {
    color: #999;
    font-size: 12px;
}


/* =========================================================
   PAGINATION
========================================================= */

.pagination-wrapper {
    margin-top: 35px;
    display: flex;
    justify-content: center;
}

.pagination-wrapper .pagination {
    gap: 5px;
}

.pagination-wrapper .page-link {
    border: none;
    border-radius: 8px !important;
    color: #172B4D;
    padding: 9px 14px;
}

.pagination-wrapper .page-item.active .page-link {
    background: #2A55FF;
    color: #ffffff;
}

.pagination-wrapper .page-link:hover {
    background: #eef2ff;
    color: #2A55FF;
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 991px) {

    .category-sidebar {
        position: static;
        margin-bottom: 25px;
    }

}

@media (max-width: 576px) {

    .category-header {
        padding: 20px;
        border-radius: 14px;
    }

    .category-header h1 {
        font-size: 20px;
    }

    .modern-product-image {
        height: 210px;
    }

    .modern-product-content {
        padding: 12px;
    }

    .modern-product-title a {
        font-size: 12px;
    }

    .current-price {
        font-size: 14px;
    }

    .old-price {
        font-size: 10px;
    }

    .product-overlay {
        opacity: 1;
        transform: translateY(0);
        padding: 15px 10px 10px;
    }

}





/* ========================================
   WRAPPER
======================================== */

.auth-wrapper {
    width: 180%;
    max-width: 1500px;
}


/* ========================================
   AUTH CARD
======================================== */

.auth-card {
    background: #ffffff;
    padding: 45px 40px;
    border-radius: 24px;

    box-shadow:
        0 20px 60px rgba(31, 45, 61, 0.10),
        0 5px 15px rgba(31, 45, 61, 0.05);

    border: 1px solid rgba(0, 0, 0, 0.04);
}


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

.auth-logo {
    display: flex;
    justify-content: center;
    margin-bottom: 20px;
}

.logo-circle {
    width: 70px;
    height: 70px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;

    color: #ffffff;
    font-size: 27px;

    background: linear-gradient(
        135deg,
        #2A55FF,
        #1D3FCC
    );

    box-shadow:
        0 10px 25px rgba(42, 85, 255, 0.30);
}


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

.auth-header {
    text-align: center;
    margin-bottom: 30px;
}

.auth-header h1 {
    font-size: 28px;
    font-weight: 700;
    color: #1f2937;
    margin-bottom: 8px;
}

.auth-header p {
    color: #7b8494;
    font-size: 14px;
    margin: 0;
}


/* ========================================
   ALERT
======================================== */

.custom-alert {
    display: flex;
    align-items: center;
    gap: 10px;

    padding: 13px 15px;
    margin-bottom: 25px;

    border: none;
    border-radius: 12px;

    font-size: 14px;
}

.custom-alert i {
    font-size: 18px;
}

.custom-alert .close {
    margin-left: auto;
}


/* ========================================
   FORM
======================================== */

.custom-form-group {
    margin-bottom: 22px;
}

.custom-form-group label {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: #374151;
    margin-bottom: 8px;
}


/* ========================================
   INPUT WRAPPER
======================================== */

.input-wrapper {
    position: relative;
}

.input-icon {
    position: absolute;

    left: 16px;
    top: 50%;

    transform: translateY(-50%);

    color: #9ca3af;
    font-size: 16px;

    z-index: 2;
}


/* ========================================
   INPUT
======================================== */

.custom-input {
    height: 54px;

    padding-left: 48px;
    padding-right: 48px;

    border-radius: 12px;

    border: 1px solid #e2e6ed;

    background-color: #f9fafc;

    color: #1f2937;

    font-size: 14px;

    transition: all 0.3s ease;
}

.custom-input::placeholder {
    color: #a4acb9;
}

.custom-input:focus {
    background-color: #ffffff;

    border-color: #2A55FF;

    box-shadow:
        0 0 0 4px rgba(42, 85, 255, 0.10);

    outline: none;
}


/* ========================================
   TOGGLE PASSWORD
======================================== */

.toggle-password {
    position: absolute;

    right: 15px;
    top: 50%;

    transform: translateY(-50%);

    border: none;
    background: transparent;

    color: #9ca3af;

    cursor: pointer;

    padding: 5px;

    transition: color 0.2s ease;
}

.toggle-password:hover {
    color: #2A55FF;
}


/* ========================================
   FORGOT PASSWORD
======================================== */

.forgot-link {
    color: #2A55FF;

    font-size: 13px;

    text-decoration: none;

    font-weight: 500;
}

.forgot-link:hover {
    text-decoration: underline;
}


/* ========================================
   REMEMBER ME
======================================== */

.remember-row {
    margin-bottom: 22px;
}

.custom-checkbox {
    display: flex;
    align-items: center;

    gap: 9px;

    color: #6b7280;

    font-size: 13px;

    cursor: pointer;
}

.custom-checkbox input {
    display: none;
}

.checkmark {
    width: 18px;
    height: 18px;

    border: 1px solid #d1d5db;

    border-radius: 5px;

    transition: all 0.2s ease;
}

.custom-checkbox input:checked + .checkmark {
    background: #2A55FF;

    border-color: #2A55FF;

    box-shadow:
        inset 0 0 0 4px #ffffff;
}


/* ========================================
   LOGIN BUTTON
======================================== */

.custom-login-btn {
    height: 55px;

    border: none;

    border-radius: 12px;

    display: flex;

    align-items: center;
    justify-content: center;

    gap: 12px;

    background: linear-gradient(
        135deg,
        #2A55FF,
        #1D3FCC
    );

    font-size: 15px;

    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease;
}

.custom-login-btn:hover {
    transform: translateY(-2px);

    box-shadow:
        0 10px 25px rgba(42, 85, 255, 0.30);
}

.custom-login-btn i {
    transition: transform 0.3s ease;
}

.custom-login-btn:hover i {
    transform: translateX(4px);
}


/* ========================================
   SOCIAL DIVIDER
======================================== */

.social-divider {
    display: flex;

    align-items: center;

    gap: 15px;

    margin: 30px 0 22px;

    color: #9ca3af;

    font-size: 12px;

    text-transform: uppercase;

    letter-spacing: 0.5px;
}

.social-divider::before,
.social-divider::after {
    content: "";

    flex: 1;

    height: 1px;

    background: #e5e7eb;
}


/* ========================================
   SOCIAL BUTTONS
======================================== */

.social-login {
    display: flex;

    gap: 10px;
}

.social-btn {
    flex: 1;

    min-height: 48px;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 8px;

    border-radius: 10px;

    border: 1px solid #e5e7eb;

    background: #ffffff;

    color: #374151;

    text-decoration: none;

    font-size: 13px;

    font-weight: 600;

    transition: all 0.3s ease;
}

.social-btn:hover {
    transform: translateY(-2px);

    box-shadow:
        0 8px 20px rgba(0, 0, 0, 0.08);

    text-decoration: none;

    color: #1f2937;
}

.social-btn i {
    font-size: 20px;
}

.facebook-btn i {
    color: #1877F2;
}

.github-btn i {
    color: #181717;
}


/* ========================================
   REGISTER
======================================== */

.register-text {
    text-align: center;

    margin-top: 30px;

    padding-top: 25px;

    border-top: 1px solid #edf0f4;

    color: #7b8494;

    font-size: 14px;
}

.register-text a {
    color: #2A55FF;

    font-weight: 600;

    text-decoration: none;

    margin-left: 4px;
}

.register-text a:hover {
    text-decoration: underline;
}


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

@media (max-width: 576px) {

    .auth-section {
        padding: 30px 15px;
    }

    .auth-card {
        padding: 35px 22px;

        border-radius: 18px;
    }

    .auth-header h1 {
        font-size: 24px;
    }

    .social-login {
        flex-direction: column;
    }

    .social-btn {
        width: 100%;
    }

}

/* ========================================
   REGISTER CARD
======================================== */

.register-card {
    max-width: 720px;
    margin: 0 auto;
}


/* ========================================
   SECTION TITLE
======================================== */

.form-section-title {
    display: flex;
    align-items: center;
    gap: 10px;

    margin: 25px 0 20px;

    padding-bottom: 10px;

    border-bottom: 1px solid #edf0f4;

    color: #1f2937;

    font-size: 14px;
    font-weight: 700;
}

.form-section-title i {
    color: #2A55FF;
    font-size: 16px;
}


/* ========================================
   LABEL
======================================== */

.custom-form-group {
    margin-bottom: 20px;
}

.custom-form-group label,
.form-section-label {
    display: block;

    margin-bottom: 8px;

    color: #374151;

    font-size: 13px;

    font-weight: 600;
}


/* ========================================
   INPUT GROUP
======================================== */

.input-group-modern {
    display: flex;
    align-items: stretch;

    width: 100%;
    height: 52px;

    border: 1px solid #e2e6ed;

    border-radius: 11px;

    background: #f9fafc;

    overflow: hidden;

    transition: all 0.3s ease;
}


/* ========================================
   ICON
======================================== */

.input-icon-box {
    width: 52px;

    flex-shrink: 0;

    display: flex;

    align-items: center;
    justify-content: center;

    background: #f1f4f9;

    color: #2A55FF;

    border-right: 1px solid #e2e6ed;
}

.input-icon-box i {
    font-size: 15px;
}


/* ========================================
   INPUT
======================================== */

.input-group-modern .custom-input {
    flex: 1;

    min-width: 0;

    height: 50px;

    padding: 0 14px;

    border: none !important;

    border-radius: 0 !important;

    background: transparent;

    color: #1f2937;

    font-size: 14px;

    box-shadow: none !important;
}

.input-group-modern .custom-input::placeholder {
    color: #a0a8b5;
}


/* ========================================
   SELECT
======================================== */

.input-group-modern select.custom-select {
    cursor: pointer;

    padding-right: 10px;
}


/* ========================================
   FOCUS
======================================== */

.input-group-modern:focus-within {
    background: #ffffff;

    border-color: #2A55FF;

    box-shadow:
        0 0 0 4px rgba(42, 85, 255, 0.08);
}

.input-group-modern:focus-within .input-icon-box {
    background: #2A55FF;

    color: #ffffff;

    border-color: #2A55FF;
}


/* ========================================
   PASSWORD BUTTON
======================================== */

.toggle-password {
    width: 50px;

    flex-shrink: 0;

    display: flex;

    align-items: center;
    justify-content: center;

    padding: 0;

    border: none;

    background: transparent;

    color: #9ca3af;

    cursor: pointer;
}

.toggle-password:hover {
    color: #2A55FF;
}


/* ========================================
   CIVILITÉ
======================================== */

.civilite-section {
    margin-bottom: 25px;
}

.civilite-options {
    display: flex;

    justify-content: center;

    gap: 12px;
}

.civilite-option {
    position: relative;

    cursor: pointer;

    margin: 0;
}

.civilite-option input {
    position: absolute;

    opacity: 0;

    pointer-events: none;
}

.civilite-content {
    min-width: 130px;

    display: flex;

    align-items: center;
    justify-content: center;

    gap: 8px;

    padding: 11px 18px;

    border: 1px solid #e2e6ed;

    border-radius: 10px;

    background: #ffffff;

    color: #6b7280;

    font-size: 13px;

    transition: all 0.25s ease;
}

.civilite-content i {
    color: #9ca3af;
}

.civilite-option input:checked + .civilite-content {
    border-color: #2A55FF;

    background: rgba(42, 85, 255, 0.06);

    color: #2A55FF;

    box-shadow:
        0 0 0 3px rgba(42, 85, 255, 0.08);
}

.civilite-option input:checked + .civilite-content i {
    color: #2A55FF;
}


/* ========================================
   CONDITIONS
======================================== */

.terms-box {
    margin-top: 5px;

    padding: 15px;

    border-radius: 10px;

    background: #f8fafc;
}

.terms-label {
    display: flex;

    align-items: flex-start;

    gap: 10px;

    margin: 0;

    cursor: pointer;
}

.terms-label input {
    position: absolute;

    opacity: 0;
}

.custom-checkmark {
    width: 19px;
    height: 19px;

    flex-shrink: 0;

    border: 1px solid #d1d5db;

    border-radius: 5px;

    background: #ffffff;

    transition: all 0.2s ease;
}

.terms-label input:checked + .custom-checkmark {
    background: #2A55FF;

    border-color: #2A55FF;

    box-shadow:
        inset 0 0 0 4px #ffffff;
}

.terms-text {
    color: #6b7280;

    font-size: 12px;

    line-height: 1.6;
}

.terms-text a {
    color: #2A55FF;

    font-weight: 600;

    text-decoration: none;
}

.terms-text a:hover {
    text-decoration: underline;
}


/* ========================================
   LOGIN REDIRECT
======================================== */

.login-redirect {
    margin-top: 25px;

    padding-top: 22px;

    border-top: 1px solid #edf0f4;

    text-align: center;

    color: #7b8494;

    font-size: 14px;
}

.login-redirect a {
    margin-left: 5px;

    color: #2A55FF;

    font-weight: 600;

    text-decoration: none;
}

.login-redirect a:hover {
    text-decoration: underline;
}


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

@media (max-width: 767px) {

    .register-card {
        padding: 35px 22px;
    }

    .civilite-options {
        flex-direction: column;

        gap: 8px;
    }

    .civilite-content {
        width: 100%;
    }

}


@media (max-width: 576px) {

    .register-card {
        border-radius: 18px;
    }

    .form-section-title {
        margin-top: 20px;
    }

}

/* ==========================================
   CHECKOUT PAGE
========================================== */

.checkout-page {
    padding: 60px 0;

    background: #f6f8fc;

    min-height: 100vh;
}


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

.checkout-header {
    margin-bottom: 35px;
}

.checkout-subtitle {
    color: #2A55FF;

    font-size: 12px;

    font-weight: 700;

    letter-spacing: 1.5px;
}

.checkout-header h1 {
    margin: 8px 0;

    color: #1f2937;

    font-size: 32px;

    font-weight: 700;
}

.checkout-header p {
    margin: 0;

    color: #7b8494;

    font-size: 14px;
}


/* ==========================================
   CARD
========================================== */

.checkout-card {
    margin-bottom: 25px;

    padding: 28px;

    background: #ffffff;

    border: 1px solid #edf0f4;

    border-radius: 16px;

    box-shadow:
        0 8px 30px rgba(31, 45, 61, 0.05);
}


/* ==========================================
   CARD HEADER
========================================== */

.checkout-card-header {
    display: flex;

    align-items: center;

    gap: 15px;

    margin-bottom: 25px;

    padding-bottom: 20px;

    border-bottom: 1px solid #edf0f4;
}

.checkout-icon {
    width: 46px;

    height: 46px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 12px;

    background: rgba(42, 85, 255, 0.10);

    color: #2A55FF;

    font-size: 18px;
}

.checkout-card-header h3 {
    margin: 0 0 4px;

    color: #1f2937;

    font-size: 18px;

    font-weight: 700;
}

.checkout-card-header p {
    margin: 0;

    color: #8b95a5;

    font-size: 13px;
}


/* ==========================================
   CUSTOMER INFO
========================================== */

.customer-info-grid {
    display: grid;

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

    gap: 15px;
}

.customer-info-item {
    padding: 15px;

    background: #f8fafc;

    border-radius: 10px;
}

.info-label {
    display: block;

    margin-bottom: 6px;

    color: #8b95a5;

    font-size: 11px;

    text-transform: uppercase;

    font-weight: 600;
}

.info-label i {
    margin-right: 5px;

    color: #2A55FF;
}

.customer-info-item strong {
    display: block;

    color: #374151;

    font-size: 13px;

    word-break: break-word;
}


/* ==========================================
   EMPTY ADDRESS
========================================== */

.empty-address {
    padding: 30px;

    text-align: center;

    background: #fff8f8;

    border: 1px dashed #ffb5b5;

    border-radius: 12px;
}

.empty-address-icon {
    margin-bottom: 12px;

    color: #ef4444;

    font-size: 35px;
}

.empty-address h4 {
    color: #374151;

    font-size: 16px;
}

.empty-address p {
    margin-bottom: 20px;

    color: #8b95a5;

    font-size: 13px;
}


/* ==========================================
   ADDRESS CARD
========================================== */

.address-list {
    display: flex;

    flex-direction: column;

    gap: 12px;
}

.address-card {
    position: relative;

    display: flex;

    align-items: flex-start;

    gap: 15px;

    padding: 18px;

    margin: 0;

    border: 1px solid #e5e7eb;

    border-radius: 12px;

    background: #ffffff;

    cursor: pointer;

    transition: all 0.25s ease;
}

.address-card:hover {
    border-color: #2A55FF;

    background: #fafbff;
}

.address-card input {
    position: absolute;

    opacity: 0;
}

.address-check {
    width: 20px;

    height: 20px;

    flex-shrink: 0;

    margin-top: 2px;

    border: 2px solid #d1d5db;

    border-radius: 50%;

    transition: all 0.2s ease;
}

.address-card input:checked + .address-check {
    border: 6px solid #2A55FF;
}

.address-card:has(input:checked) {
    border-color: #2A55FF;

    background: rgba(42, 85, 255, 0.04);

    box-shadow:
        0 0 0 3px rgba(42, 85, 255, 0.08);
}

.address-content {
    flex: 1;
}

.address-top {
    display: flex;

    justify-content: space-between;

    margin-bottom: 12px;
}

.address-top strong {
    color: #2A55FF;

    font-size: 14px;
}

.address-select-text {
    color: #9ca3af;

    font-size: 11px;
}

.address-details {
    display: grid;

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

    gap: 9px;
}

.address-details div {
    display: flex;

    align-items: center;

    gap: 7px;

    color: #6b7280;

    font-size: 12px;
}

.address-details i {
    width: 15px;

    color: #2A55FF;
}

.address-description {
    grid-column: span 2;
}


/* ==========================================
   ADD ADDRESS
========================================== */

.add-address-link {
    display: inline-flex;

    align-items: center;

    gap: 7px;

    margin-top: 18px;

    color: #2A55FF;

    font-size: 13px;

    font-weight: 600;

    text-decoration: none;
}

.add-address-link:hover {
    text-decoration: underline;
}


/* ==========================================
   PAYMENT
========================================== */

.payment-grid {
    display: grid;

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

    gap: 12px;
}

.payment-card {
    position: relative;

    display: flex;

    align-items: center;

    gap: 13px;

    padding: 15px;

    margin: 0;

    border: 1px solid #e5e7eb;

    border-radius: 12px;

    cursor: pointer;

    transition: all 0.25s ease;
}

.payment-card:hover {
    border-color: #2A55FF;

    background: #fafbff;
}

.payment-card input {
    position: absolute;

    opacity: 0;
}

.payment-check {
    width: 18px;

    height: 18px;

    flex-shrink: 0;

    border: 2px solid #d1d5db;

    border-radius: 50%;
}

.payment-card input:checked + .payment-check {
    border: 5px solid #2A55FF;
}

.payment-card:has(input:checked) {
    border-color: #2A55FF;

    background: rgba(42, 85, 255, 0.04);
}

.payment-icon {
    width: 42px;

    height: 42px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 10px;

    background: #f1f4f9;

    color: #2A55FF;
}

.payment-logo {
    width: 60px;

    height: 42px;

    display: flex;

    align-items: center;

    justify-content: center;
}

.payment-logo img {
    max-width: 60px;

    max-height: 35px;

    object-fit: contain;
}

.payment-info {
    display: flex;

    flex-direction: column;

    gap: 3px;
}

.payment-info strong {
    color: #374151;

    font-size: 13px;
}

.payment-info small {
    color: #9ca3af;

    font-size: 10px;
}


/* ==========================================
   ORDER SUMMARY
========================================== */

.order-summary {
    position: sticky;

    top: 25px;

    padding: 25px;

    background: #ffffff;

    border-radius: 16px;

    box-shadow:
        0 8px 30px rgba(31, 45, 61, 0.08);
}

.summary-header {
    padding-bottom: 20px;

    margin-bottom: 20px;

    border-bottom: 1px solid #edf0f4;
}

.summary-header > div {
    display: flex;

    align-items: center;

    gap: 12px;
}

.summary-header > div > span {
    width: 42px;

    height: 42px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 10px;

    background: #2A55FF;

    color: #ffffff;
}

.summary-header h3 {
    margin: 0;

    color: #1f2937;

    font-size: 17px;
}

.summary-header small {
    color: #9ca3af;

    font-size: 11px;
}


/* ==========================================
   SUMMARY LINE
========================================== */

.summary-line {
    display: flex;

    justify-content: space-between;

    align-items: center;

    margin-bottom: 14px;

    color: #6b7280;

    font-size: 13px;
}

.summary-line strong {
    color: #374151;
}

.summary-divider {
    height: 1px;

    margin: 18px 0;

    background: #edf0f4;
}


/* ==========================================
   TOTAL
========================================== */

.summary-total {
    display: flex;

    justify-content: space-between;

    align-items: center;

    padding: 18px 0;

    color: #1f2937;

    font-size: 15px;

    font-weight: 700;
}

.summary-total strong {
    color: #2A55FF;

    font-size: 19px;
}


/* ==========================================
   CHECKOUT BUTTON
========================================== */

.checkout-button {
    width: 100%;

    min-height: 52px;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 10px;

    border: none;

    border-radius: 10px;

    background: linear-gradient(
        135deg,
        #2A55FF,
        #1D3FCC
    );

    color: #ffffff;

    font-size: 14px;

    font-weight: 700;

    cursor: pointer;

    transition: all 0.3s ease;
}

.checkout-button:hover {
    transform: translateY(-2px);

    box-shadow:
        0 10px 25px rgba(42, 85, 255, 0.25);
}

.checkout-button i {
    transition: transform 0.3s ease;
}

.checkout-button:hover i {
    transform: translateX(4px);
}


/* ==========================================
   SECURE
========================================== */

.secure-payment {
    margin-top: 15px;

    text-align: center;

    color: #9ca3af;

    font-size: 11px;
}

.secure-payment i {
    margin-right: 5px;

    color: #22c55e;
}


/* ==========================================
   DISABLED
========================================== */

.checkout-disabled {
    padding: 14px;

    text-align: center;

    border-radius: 9px;

    background: #fff7ed;

    color: #c2410c;

    font-size: 12px;
}


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

@media (max-width: 991px) {

    .order-summary {
        position: static;

        margin-top: 10px;
    }

}


@media (max-width: 767px) {

    .checkout-page {
        padding: 35px 15px;
    }

    .checkout-header h1 {
        font-size: 25px;
    }

    .checkout-card {
        padding: 20px;
    }

    .customer-info-grid {
        grid-template-columns: 1fr;
    }

    .payment-grid {
        grid-template-columns: 1fr;
    }

}


@media (max-width: 576px) {

    .address-details {
        grid-template-columns: 1fr;
    }

    .address-description {
        grid-column: span 1;
    }

}

/* ==========================================
   PAGE MES ADRESSES
========================================== */

.address-page {
    background: #f8f9fc;
    min-height: 100vh;
    padding: 40px 0;
}


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

.address-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    margin-bottom: 35px;
}

.address-header h2 {
    font-size: 28px;
    color: #212529;
    margin-bottom: 8px;
}

.address-header p {
    margin-bottom: 0;
    color: #7b8190;
}

.address-title-icon {
    width: 48px;
    height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(13, 110, 253, 0.1);
    color: #0d6efd;
    border-radius: 14px;
    margin-right: 10px;
}


/* ==========================================
   BOUTON AJOUTER
========================================== */

.btn-add-address {
    border: none;
    padding: 12px 22px;
    border-radius: 12px;
    font-weight: 600;
    box-shadow: 0 6px 18px rgba(13, 110, 253, 0.2);
    transition: all 0.3s ease;
}

.btn-add-address:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 25px rgba(13, 110, 253, 0.3);
}


/* ==========================================
   CARTE ADRESSE
========================================== */

.address-card {
    position: relative;
    height: 100%;
    background: #ffffff;
    border: 1px solid #edf0f5;
    border-radius: 20px;
    overflow: hidden;
    transition: all 0.3s ease;
}

.address-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.08) !important;
    border-color: rgba(13, 110, 253, 0.15);
}


/* ==========================================
   ENTÊTE DE LA CARTE
========================================== */

.address-card-top {
    padding: 20px 22px;
    background: linear-gradient(
        135deg,
        rgba(13, 110, 253, 0.08),
        rgba(13, 110, 253, 0.02)
    );
    border-bottom: 1px solid #edf0f5;
}

.address-city {
    font-size: 20px;
    font-weight: 700;
    color: #212529;
    margin: 0;
}

.city-icon {
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #0d6efd;
    color: #fff;
    border-radius: 12px;
}


/* ==========================================
   BADGE ADRESSE PRINCIPALE
========================================== */

.main-address-badge {
    padding: 7px 12px;
    border-radius: 50px;
    font-size: 11px;
    font-weight: 600;
    background: #e8f8ef;
    color: #198754;
    white-space: nowrap;
}


/* ==========================================
   CORPS DE LA CARTE
========================================== */

.address-card-body {
    padding: 22px;
}

.address-info {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 12px 0;
    border-bottom: 1px dashed #e9ecef;
}

.address-info:last-child {
    border-bottom: none;
}

.info-icon {
    width: 38px;
    height: 38px;
    min-width: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    font-size: 15px;
}

.phone-icon {
    background: #e8f8ef;
    color: #198754;
}

.country-icon {
    background: #eaf2ff;
    color: #0d6efd;
}

.location-icon {
    background: #fff0f0;
    color: #dc3545;
}


/* ==========================================
   INFORMATIONS
========================================== */

.info-content {
    min-width: 0;
}

.info-content small {
    display: block;
    color: #8a919c;
    font-size: 12px;
    margin-bottom: 3px;
}

.info-content span {
    display: block;
    color: #343a40;
    font-size: 14px;
    font-weight: 500;
    word-break: break-word;
}


/* ==========================================
   BOUTONS D'ACTION
========================================== */

.address-actions {
    display: flex;
    gap: 10px;
    padding-top: 20px;
    margin-top: 10px;
    border-top: 1px solid #edf0f5;
}

.address-actions .btn {
    flex: 1;
    border-radius: 10px;
    padding: 9px 15px;
    font-weight: 600;
    font-size: 13px;
}


/* ==========================================
   ÉTAT VIDE
========================================== */

.empty-address {
    background: #ffffff;
    border: 2px dashed #dce1e8;
    border-radius: 20px;
    padding: 60px 25px;
    text-align: center;
}

.empty-icon {
    width: 80px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
    border-radius: 50%;
    background: #eef5ff;
    color: #0d6efd;
    font-size: 32px;
}

.empty-address h5 {
    font-weight: 700;
    color: #212529;
}

.empty-address p {
    color: #8a919c;
}


/* ==========================================
   MODALES
========================================== */

.modal-content {
    border: none;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
}

.modal-header {
    padding: 20px 25px;
    border-bottom: 1px solid #edf0f5;
}

.modal-title {
    font-weight: 700;
}

.modal-body {
    padding: 25px;
}

.modal-footer {
    padding: 18px 25px;
    background: #f8f9fc;
    border-top: 1px solid #edf0f5;
}


/* ==========================================
   FORMULAIRES
========================================== */

.form-label {
    font-weight: 600;
    font-size: 14px;
    color: #343a40;
    margin-bottom: 8px;
}

.form-control {
    border: 1px solid #dfe3e8;
    border-radius: 10px;
    padding: 11px 14px;
    min-height: 45px;
    transition: all 0.2s ease;
}

.form-control:focus {
    border-color: #0d6efd;
    box-shadow: 0 0 0 4px rgba(13, 110, 253, 0.1);
}

textarea.form-control {
    min-height: 110px;
}


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

.delete-modal-icon {
    width: 75px;
    height: 75px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
    background: #fff0f0;
    color: #dc3545;
    border-radius: 50%;
    font-size: 30px;
}


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

@media (max-width: 767px) {

    .address-page {
        padding: 25px 10px;
    }

    .address-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .address-header h2 {
        font-size: 23px;
    }

    .btn-add-address {
        width: 100%;
    }

    .address-actions {
        flex-direction: column;
    }

    .address-actions .btn {
        width: 100%;
    }

    .address-card-top {
        padding: 16px;
    }

    .address-card-body {
        padding: 18px;
    }

    .main-address-badge {
        font-size: 10px;
        padding: 6px 9px;
    }

}

/* =========================================================
   PAGE CATÉGORIE / SOUS-CATÉGORIE
========================================================= */

.category-products-page {
    padding: 35px 0 60px;
    background: #f7f8fc;
}


/* =========================================================
   HEADER SOUS-CATÉGORIE
========================================================= */

.category-header {
    background: #ffffff;
    border-radius: 18px;
    padding: 25px;
    margin-bottom: 30px;
    box-shadow: 0 5px 25px rgba(0, 0, 0, 0.05);
}

.category-breadcrumb {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 20px;
    font-size: 14px;
    color: #777;
}

.category-breadcrumb a {
    color: #146cda;
    text-decoration: none;
    font-weight: 600;
}

.category-breadcrumb i {
    color: #999;
    font-size: 11px;
}

.category-main-info {
    display: flex;
    align-items: center;
    gap: 25px;
}

.category-image {
    width: 180px;
    height: 130px;
    object-fit: cover;
    border-radius: 14px;
    border: 1px solid #eee;
    background: #f8f8f8;
}

.category-title {
    margin: 0;
    font-size: 24px;
    font-weight: 700;
    color: #222;
}

.category-title span {
    color: #146cda;
}

.category-product-count {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
    padding: 7px 13px;
    background: #eef5ff;
    color: #146cda;
    border-radius: 50px;
    font-size: 13px;
    font-weight: 600;
}


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

.products-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 20px;
}


/* =========================================================
   CARTE PRODUIT
========================================================= */

.product-card {
    position: relative;
    height: 100%;
    background: #ffffff;
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid #edf0f4;
    transition: all 0.3s ease;
}

.product-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
}


/* =========================================================
   IMAGE PRODUIT
========================================================= */

.product-image-wrapper {
    position: relative;
    height: 210px;
    overflow: hidden;
    background: #f8f9fa;
}

.product-image {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 12px;
    transition: transform 0.4s ease;
}

.product-card:hover .product-image {
    transform: scale(1.06);
}


/* =========================================================
   OVERLAY DETAIL
========================================================= */

.product-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.35);
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

.product-card:hover .product-overlay {
    opacity: 1;
    visibility: visible;
}

.product-detail-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    background: #ffffff;
    color: #146cda;
    border-radius: 50px;
    text-decoration: none;
    font-size: 13px;
    font-weight: 700;
    transition: all 0.3s ease;
}

.product-detail-btn:hover {
    background: #146cda;
    color: #ffffff;
}


/* =========================================================
   INFORMATIONS PRODUIT
========================================================= */

.product-info {
    padding: 18px;
}

.product-name {
    margin: 0 0 12px;
    min-height: 42px;
    font-size: 15px;
    line-height: 1.5;
    font-weight: 600;
}

.product-name a {
    color: #222;
    text-decoration: none;
    transition: color 0.2s ease;
}

.product-name a:hover {
    color: #146cda;
}


/* =========================================================
   PRIX
========================================================= */

.product-price {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 15px;
}

.current-price {
    color: #e53935;
    font-size: 17px;
    font-weight: 700;
}

.old-price {
    color: #999;
    font-size: 13px;
}

.old-price del {
    color: #999;
}


/* =========================================================
   BADGE PROMOTION
========================================================= */

.promotion-badge {
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 2;
    padding: 5px 9px;
    background: #e53935;
    color: #ffffff;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 700;
}


/* =========================================================
   BOUTON PANIER
========================================================= */

.product-cart-button {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 12px;
    border: none;
    border-radius: 9px;
    background: #146cda;
    color: #ffffff;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

.product-cart-button:hover {
    background: #0b55b5;
    transform: translateY(-1px);
}

.product-cart-button:disabled {
    background: #adb5bd;
    cursor: not-allowed;
    transform: none;
}


/* =========================================================
   PAGINATION
========================================================= */

.products-pagination {
    display: flex;
    justify-content: center;
    margin-top: 40px;
}

.products-pagination .pagination {
    margin: 0;
}

.products-pagination .page-link {
    border-radius: 8px;
    margin: 0 3px;
    border: 1px solid #e5e7eb;
    color: #146cda;
}

.products-pagination .page-item.active .page-link {
    background: #146cda;
    border-color: #146cda;
}


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

@media (max-width: 1199px) {

    .products-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

}


@media (max-width: 991px) {

    .products-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

}


@media (max-width: 767px) {

    .category-products-page {
        padding: 20px 0 40px;
    }

    .category-header {
        padding: 18px;
    }

    .category-main-info {
        flex-direction: column;
        align-items: flex-start;
    }

    .category-image {
        width: 100%;
        height: 180px;
    }

    .category-title {
        font-size: 20px;
    }

    .products-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
    }

    .product-image-wrapper {
        height: 170px;
    }

    .product-info {
        padding: 12px;
    }

    .product-name {
        font-size: 13px;
        min-height: 38px;
    }

    .current-price {
        font-size: 15px;
    }

}


@media (max-width: 400px) {

    .products-grid {
        grid-template-columns: 1fr;
    }

    .product-image-wrapper {
        height: 220px;
    }

}


/* ==========================================
   PAGE
========================================== */

.cgv-page{

    background:#f5f7fb;

    padding-bottom:60px;

}


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

.cgv-hero{

    background:linear-gradient(135deg,#1737B7,#2F6BFF);

    color:#fff;

    padding:70px 0;

    margin-bottom:40px;

}


.cgv-hero h1{

    font-size:38px;

    font-weight:700;

    margin-top:20px;

}


.cgv-hero p{

    max-width:700px;

    opacity:.9;

}


/* ==========================================
   BREADCRUMB
========================================== */

.breadcrumb-custom{

    display:flex;

    align-items:center;

    gap:10px;

    font-size:14px;

}

.breadcrumb-custom a{

    color:#fff;

    text-decoration:none;

}


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

.cgv-sidebar{

    position:sticky;

    top:30px;

    background:#fff;

    border-radius:15px;

    padding:25px;

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

}


.cgv-sidebar h5{

    margin-bottom:20px;

    color:#1737B7;

    font-weight:700;

}


.cgv-sidebar ul{

    list-style:none;

    padding:0;

    margin:0;

}

.cgv-sidebar li{

    margin-bottom:12px;

}

.cgv-sidebar a{

    color:#444;

    text-decoration:none;

    transition:.3s;

}

.cgv-sidebar a:hover{

    color:#1737B7;

    padding-left:8px;

}


/* ==========================================
   CONTENU
========================================== */

.cgv-card{

    background:#fff;

    border-radius:18px;

    padding:40px;

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

}


.cgv-section{

    margin-bottom:45px;

}


.cgv-section:last-child{

    margin-bottom:0;

}


.cgv-section h2{

    font-size:24px;

    color:#1737B7;

    margin-bottom:20px;

    position:relative;

    padding-left:18px;

}


.cgv-section h2::before{

    content:"";

    width:6px;

    height:100%;

    background:#1737B7;

    position:absolute;

    left:0;

    top:0;

    border-radius:20px;

}


.cgv-section p{

    color:#555;

    text-align:justify;

    line-height:1.9;

    margin-bottom:15px;

}


/* ==========================================
   MOBILE
========================================== */

@media(max-width:991px){

    .cgv-card{

        padding:25px;

    }

    .cgv-hero{

        padding:50px 0;

    }

    .cgv-hero h1{

        font-size:30px;

    }

    .cgv-sidebar{

        position:relative;

        top:0;

        margin-bottom:25px;

    }

}

/* =====================================================
   PAGE CONTACT
===================================================== */

.contact-page {
    background: #f5f7fb;
    padding: 60px 0 80px;
}


/* =====================================================
   BREADCRUMB
===================================================== */

.contact-breadcrumb {
    background: #ffffff;
    border-bottom: 1px solid #eeeeee;
}

.contact-breadcrumb-content {
    min-height: 60px;

    display: flex;
    align-items: center;

    gap: 12px;

    font-size: 14px;
}

.contact-breadcrumb-content a {
    color: #1737b7;

    text-decoration: none;

    font-weight: 600;
}

.contact-breadcrumb-content i {
    font-size: 11px;
    color: #999;
}

.contact-breadcrumb-content span {
    color: #777;
}


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

.contact-page-header {
    text-align: center;

    max-width: 700px;

    margin: 0 auto 50px;
}

.contact-subtitle {
    display: inline-flex;

    align-items: center;

    gap: 8px;

    color: #1737b7;

    font-size: 14px;

    font-weight: 700;

    text-transform: uppercase;

    letter-spacing: 1px;

    margin-bottom: 12px;
}

.contact-page-header h1 {
    font-size: 38px;

    font-weight: 800;

    color: #172033;

    margin-bottom: 15px;
}

.contact-page-header p {
    color: #6c757d;

    font-size: 16px;

    line-height: 1.7;

    margin: 0;
}


/* =====================================================
   CARTE INFORMATIONS
===================================================== */

.contact-info-card {
    height: 100%;

    background: #ffffff;

    border-radius: 20px;

    padding: 30px;

    box-shadow: 0 10px 35px rgba(0, 0, 0, .07);

    border: 1px solid #eeeeee;
}

.contact-card-title {
    display: flex;

    align-items: center;

    gap: 15px;

    padding-bottom: 25px;

    margin-bottom: 25px;

    border-bottom: 1px solid #eeeeee;
}

.contact-title-icon {
    width: 50px;

    height: 50px;

    display: flex;

    align-items: center;

    justify-content: center;

    background: #eaf0ff;

    color: #1737b7;

    border-radius: 14px;

    font-size: 20px;
}

.contact-card-title h3 {
    margin: 0 0 4px;

    font-size: 20px;

    font-weight: 700;

    color: #172033;
}

.contact-card-title p {
    margin: 0;

    color: #888;

    font-size: 13px;
}


/* =====================================================
   INFORMATIONS
===================================================== */

.contact-info-item {
    display: flex;

    gap: 15px;

    margin-bottom: 25px;
}

.contact-info-icon {
    min-width: 45px;

    width: 45px;

    height: 45px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 12px;

    font-size: 17px;
}

.phone-icon {
    background: #e8f8ef;
    color: #198754;
}

.email-icon {
    background: #eaf0ff;
    color: #1737b7;
}

.location-icon {
    background: #fff0f0;
    color: #dc3545;
}

.contact-info-item span {
    display: block;

    color: #888;

    font-size: 12px;

    margin-bottom: 5px;
}

.contact-info-item a {
    display: block;

    color: #333;

    text-decoration: none;

    font-weight: 600;

    font-size: 14px;

    margin-bottom: 4px;
}

.contact-info-item a:hover {
    color: #1737b7;
}

.contact-info-item p {
    margin: 0 0 4px;

    color: #333;

    font-size: 14px;
}


/* =====================================================
   RESEAUX SOCIAUX
===================================================== */

.contact-social-section {
    border-top: 1px solid #eeeeee;

    padding-top: 25px;

    margin-top: 10px;
}

.contact-social-section h4 {
    font-size: 15px;

    color: #333;

    margin-bottom: 15px;
}

.contact-social-list {
    display: flex;

    gap: 10px;
}

.contact-social-list a {
    width: 40px;

    height: 40px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 10px;

    color: #ffffff;

    text-decoration: none;

    transition: .3s;
}

.contact-social-list a:hover {
    transform: translateY(-4px);

    box-shadow: 0 8px 15px rgba(0, 0, 0, .15);
}

.social-facebook {
    background: #1877f2;
}

.social-twitter {
    background: #1da1f2;
}

.social-linkedin {
    background: #0a66c2;
}

.social-whatsapp {
    background: #25d366;
}

.social-email {
    background: #6c757d;
}


/* =====================================================
   FORMULAIRE
===================================================== */

.contact-form-card {
    background: #ffffff;

    border-radius: 20px;

    padding: 35px;

    box-shadow: 0 10px 35px rgba(0, 0, 0, .07);

    border: 1px solid #eeeeee;
}

.contact-form-header {
    display: flex;

    align-items: center;

    gap: 15px;

    margin-bottom: 30px;
}

.form-header-icon {
    width: 55px;

    height: 55px;

    display: flex;

    align-items: center;

    justify-content: center;

    background: #1737b7;

    color: #ffffff;

    border-radius: 15px;

    font-size: 20px;
}

.contact-form-header h2 {
    font-size: 24px;

    font-weight: 700;

    margin: 0 0 5px;

    color: #172033;
}

.contact-form-header p {
    margin: 0;

    color: #888;

    font-size: 14px;
}


/* =====================================================
   LABEL
===================================================== */

.modern-contact-form label {
    display: block;

    font-size: 14px;

    font-weight: 600;

    color: #333;

    margin-bottom: 8px;
}

.modern-contact-form label span {
    color: #dc3545;
}


/* =====================================================
   INPUT
===================================================== */

.input-group-modern {
    position: relative;
}

.input-group-modern > i {
    position: absolute;

    left: 16px;

    top: 18px;

    color: #999;

    z-index: 2;
}

.input-group-modern input,
.input-group-modern textarea {
    width: 100%;

    border: 1px solid #e1e5eb;

    background: #f9fafc;

    border-radius: 10px;

    padding: 14px 16px 14px 45px;

    font-size: 14px;

    color: #333;

    outline: none;

    transition: .3s;
}

.input-group-modern textarea {
    resize: vertical;

    min-height: 150px;

    line-height: 1.6;
}

.input-group-modern input:focus,
.input-group-modern textarea:focus {
    border-color: #1737b7;

    background: #ffffff;

    box-shadow: 0 0 0 4px rgba(23, 55, 183, .08);
}

.textarea-group > i {
    top: 18px;
}


/* =====================================================
   BOUTON
===================================================== */

.contact-submit-btn {
    width: 100%;

    border: none;

    background: #1737b7;

    color: #ffffff;

    padding: 15px 25px;

    border-radius: 10px;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 12px;

    font-size: 15px;

    font-weight: 700;

    cursor: pointer;

    transition: .3s;
}

.contact-submit-btn:hover {
    background: #102a91;

    transform: translateY(-2px);

    box-shadow: 0 8px 20px rgba(23, 55, 183, .25);
}


/* =====================================================
   ALERTES
===================================================== */

.contact-alert {
    display: flex;

    align-items: flex-start;

    gap: 12px;

    padding: 15px 18px;

    border-radius: 10px;

    margin-bottom: 25px;

    font-size: 14px;
}

.contact-alert.success {
    background: #eaf8ef;

    color: #198754;

    border: 1px solid #c9ecd7;
}

.contact-alert.error {
    background: #fff0f0;

    color: #dc3545;

    border: 1px solid #f2cccc;
}

.contact-alert ul {
    margin: 5px 0 0;

    padding-left: 20px;
}


/* =====================================================
   MAP
===================================================== */

.contact-map-section {
    margin-top: 50px;

    background: #ffffff;

    border-radius: 20px;

    overflow: hidden;

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

.contact-map-header {
    padding: 25px 30px;
}

.contact-map-header > div {
    display: flex;

    align-items: center;

    gap: 15px;
}

.contact-map-header span {
    width: 50px;

    height: 50px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 14px;

    background: #fff0f0;

    color: #dc3545;

    font-size: 20px;
}

.contact-map-header h2 {
    margin: 0 0 4px;

    font-size: 21px;

    font-weight: 700;
}

.contact-map-header p {
    margin: 0;

    color: #888;

    font-size: 14px;
}

.contact-map {
    width: 100%;

    height: 450px;
}

.contact-map iframe {
    width: 100%;

    height: 100%;

    border: 0;

    display: block;
}


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

@media (max-width: 991px) {

    .contact-page {
        padding: 45px 0 60px;
    }

    .contact-page-header h1 {
        font-size: 32px;
    }

}


@media (max-width: 767px) {

    .contact-page-header {
        margin-bottom: 30px;
    }

    .contact-page-header h1 {
        font-size: 27px;
    }

    .contact-info-card,
    .contact-form-card {
        padding: 22px;
    }

    .contact-form-header h2 {
        font-size: 20px;
    }

    .contact-map {
        height: 350px;
    }

    .contact-breadcrumb-content {
        font-size: 12px;
    }

}


/* =====================================
   EN-TÊTE DES RÉSULTATS
===================================== */

.search-result-header {
    background: #ffffff;
    padding: 20px 25px;
    border-radius: 12px;
    box-shadow: 0 3px 15px rgba(0, 0, 0, 0.06);
}

.result-title {
    display: flex;
    align-items: center;
    gap: 15px;
}

.result-icon {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #146cda;
    color: #fff;
    border-radius: 50%;
    font-size: 19px;
}

.result-title h3 {
    font-size: 20px;
    color: #222;
    font-weight: 500;
}

.result-title h3 strong {
    color: #146cda;
}

.result-count {
    color: #777;
    font-size: 14px;
}

.result-count strong {
    color: #e63946;
}


/* =====================================
   BARRE DE RECHERCHE
===================================== */

.search-box {
    position: relative;
}

.search-box i {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    color: #146cda;
    z-index: 2;
}

.search-box input {
    height: 48px;
    padding-left: 45px;
    border-radius: 25px;
    border: 1px solid #ddd;
    box-shadow: none;
    font-size: 14px;
    transition: all 0.3s ease;
}

.search-box input:focus {
    border-color: #146cda;
    box-shadow: 0 0 0 3px rgba(20, 108, 218, 0.1);
}


/* =====================================
   CARTE PRODUIT
===================================== */

.product-card {
    height: 100%;
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid #eee;
    transition: all 0.3s ease;
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.05);
}

.product-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.12);
}


/* =====================================
   IMAGE PRODUIT
===================================== */

.product-image {
    position: relative;
    height: 210px;
    overflow: hidden;
    background: #f8f9fa;
}

.product-image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 10px;
    transition: transform 0.4s ease;
}

.product-card:hover .product-image img {
    transform: scale(1.07);
}


/* =====================================
   BADGE PROMOTION
===================================== */

.promotion-badge {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 3;
    background: #e63946;
    color: white;
    padding: 5px 9px;
    border-radius: 5px;
    font-size: 12px;
    font-weight: bold;
}


/* =====================================
   OVERLAY IMAGE
===================================== */

.product-overlay {
    position: absolute;
    left: 0;
    right: 0;
    bottom: -60px;
    padding: 10px;
    text-align: center;
    background: rgba(20, 108, 218, 0.9);
    transition: all 0.3s ease;
}

.product-card:hover .product-overlay {
    bottom: 0;
}

.detail-btn {
    color: white !important;
    font-size: 13px;
    text-decoration: none !important;
    font-weight: 500;
}


/* =====================================
   INFORMATIONS PRODUIT
===================================== */

.product-info {
    padding: 15px;
    text-align: center;
}

.product-name {
    min-height: 42px;
    margin-bottom: 8px;
}

.product-name a {
    color: #333;
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.product-name a:hover {
    color: #146cda;
}


/* =====================================
   PRIX
===================================== */

.product-price {
    margin: 8px 0;
}

.current-price {
    color: #e63946;
    font-size: 17px;
    font-weight: 700;
}

.old-price {
    display: block;
    color: #999;
    font-size: 13px;
    margin-top: 3px;
}


/* =====================================
   STOCK
===================================== */

.stock {
    display: inline-block;
    font-size: 11px;
    margin: 5px 0 10px;
    font-weight: 600;
}

.stock.available {
    color: #198754;
}

.stock.unavailable {
    color: #dc3545;
}


/* =====================================
   BOUTON PANIER
===================================== */

.product-cart-btn {
    margin-top: 5px;
}

.add-cart-btn {
    width: 100%;
    border: none;
    background: #146cda;
    color: white;
    padding: 10px 8px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 12px;
    font-weight: 600;
    transition: all 0.3s ease;
}

.add-cart-btn:hover {
    background: #0d5bb5;
    transform: translateY(-2px);
}

.add-cart-btn i {
    margin-right: 5px;
}

.add-cart-btn.disabled {
    background: #adb5bd;
    cursor: not-allowed;
}


/* =====================================
   AUCUN RÉSULTAT
===================================== */

.empty-search-result {
    text-align: center;
    padding: 60px 20px;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 3px 15px rgba(0, 0, 0, 0.06);
}

.empty-icon {
    width: 75px;
    height: 75px;
    margin: 0 auto 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f1f5f9;
    color: #146cda;
    border-radius: 50%;
    font-size: 30px;
}

.empty-search-result h4 {
    color: #333;
    font-size: 22px;
}

.empty-search-result p {
    color: #777;
}

.btn-back-home {
    display: inline-block;
    margin-top: 15px;
    padding: 10px 20px;
    background: #146cda;
    color: #fff !important;
    border-radius: 6px;
    text-decoration: none !important;
}


/* =====================================
   PAGINATION
===================================== */

.pagination-wrapper {
    display: flex;
    justify-content: center;
}


/* =====================================
   MOBILE
===================================== */

@media (max-width: 575px) {

    .search-result-header {
        padding: 15px;
    }

    .result-title h3 {
        font-size: 16px;
    }

    .result-icon {
        width: 40px;
        height: 40px;
        font-size: 16px;
    }

    .product-image {
        height: 160px;
    }

    .product-info {
        padding: 10px;
    }

    .product-name a {
        font-size: 13px;
    }

    .current-price {
        font-size: 14px;
    }

    .add-cart-btn {
        font-size: 11px;
        padding: 9px 4px;
    }

    .add-cart-btn span {
        display: none;
    }

    .add-cart-btn i {
        margin-right: 0;
    }

}

/* ==========================================
   PAGE COMMANDES
========================================== */

.orders-page {
    background: #f5f7fb;
    min-height: 100vh;
}


/* ==========================================
   ALERTES
========================================== */

.custom-alert {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 15px 20px;
    border-radius: 12px;
    margin-bottom: 15px;
    box-shadow: 0 5px 20px rgba(0,0,0,.06);
}

.alert-danger {
    background: #fff1f2;
    color: #b42318;
    border: 1px solid #fecdd3;
}

.alert-success {
    background: #ecfdf3;
    color: #087443;
    border: 1px solid #a7f3d0;
}

.alert-icon {
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(255,255,255,.8);
    font-size: 18px;
}

.alert-content {
    display: flex;
    flex-direction: column;
    flex: 1;
}

.alert-content strong {
    font-size: 14px;
}

.alert-content span {
    font-size: 13px;
    margin-top: 2px;
}

.alert-close {
    border: none;
    background: transparent;
    cursor: pointer;
    font-size: 16px;
    opacity: .6;
}


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

.orders-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 30px;
    border-radius: 20px;
    background: linear-gradient(135deg, #146cda, #084298);
    color: white;
    box-shadow: 0 10px 30px rgba(20,108,218,.2);
}

.orders-header-content {
    display: flex;
    align-items: center;
    gap: 20px;
}

.orders-icon {
    width: 65px;
    height: 65px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 18px;
    background: rgba(255,255,255,.15);
    font-size: 28px;
}

.page-subtitle {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 1.5px;
    opacity: .8;
}

.orders-header h1 {
    margin: 4px 0;
    font-size: 28px;
    font-weight: 700;
}

.orders-header p {
    margin: 0;
    font-size: 14px;
    opacity: .85;
}

.shopping-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 20px;
    border-radius: 30px;
    background: white;
    color: #146cda !important;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none !important;
    transition: all .3s ease;
    white-space: nowrap;
}

.shopping-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0,0,0,.15);
}


/* ==========================================
   STATISTIQUES
========================================== */

.stat-card {
    display: flex;
    align-items: center;
    gap: 15px;
    background: white;
    padding: 20px;
    border-radius: 15px;
    box-shadow: 0 5px 20px rgba(0,0,0,.05);
    transition: all .3s ease;
}

.stat-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 25px rgba(0,0,0,.08);
}

.stat-icon {
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    font-size: 20px;
}

.stat-icon.blue {
    background: #e8f1ff;
    color: #146cda;
}

.stat-icon.green {
    background: #e8f8ef;
    color: #198754;
}

.stat-icon.orange {
    background: #fff4e5;
    color: #f59e0b;
}

.stat-card span {
    display: block;
    color: #7b8491;
    font-size: 12px;
}

.stat-card strong {
    display: block;
    margin-top: 3px;
    color: #1f2937;
    font-size: 22px;
}


/* ==========================================
   CARD PRINCIPALE
========================================== */

.orders-card {
    background: white;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 5px 25px rgba(0,0,0,.06);
}

.orders-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 25px;
    border-bottom: 1px solid #edf0f4;
}

.orders-card-header h2 {
    margin: 0;
    font-size: 18px;
    color: #1f2937;
}

.orders-card-header h2 i {
    color: #146cda;
    margin-right: 8px;
}

.orders-card-header p {
    margin: 5px 0 0;
    color: #8a94a6;
    font-size: 13px;
}


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

.order-search {
    position: relative;
    width: 300px;
}

.order-search > i {
    position: absolute;
    left: 15px;
    top: 50%;
    transform: translateY(-50%);
    color: #8a94a6;
}

.order-search input {
    width: 100%;
    height: 44px;
    padding: 0 40px;
    border: 1px solid #e2e6eb;
    border-radius: 25px;
    outline: none;
    font-size: 13px;
    transition: all .3s ease;
}

.order-search input:focus {
    border-color: #146cda;
    box-shadow: 0 0 0 3px rgba(20,108,218,.1);
}

#clearSearch {
    display: none;
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    border: none;
    background: transparent;
    color: #999;
    cursor: pointer;
}


/* ==========================================
   TABLEAU
========================================== */

.table-container {
    overflow-x: auto;
}

.orders-table {
    width: 100%;
    min-width: 950px;
    border-collapse: collapse;
}

.orders-table thead {
    background: #f8fafc;
}

.orders-table th {
    padding: 15px 18px;
    color: #7b8491;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .5px;
    border-bottom: 1px solid #edf0f4;
    white-space: nowrap;
}

.orders-table td {
    padding: 17px 18px;
    border-bottom: 1px solid #f0f2f5;
    color: #4b5563;
    font-size: 13px;
}

.orders-table tbody tr {
    transition: all .2s ease;
}

.orders-table tbody tr:hover {
    background: #f8fbff;
}


/* ==========================================
   INFORMATIONS COMMANDE
========================================== */

.order-number {
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #edf4ff;
    color: #146cda;
    border-radius: 50%;
    font-weight: 600;
}

.order-reference {
    display: flex;
    flex-direction: column;
}

.order-reference strong {
    color: #146cda;
    font-size: 13px;
}

.order-reference small {
    color: #9aa2ad;
    font-size: 11px;
    margin-top: 3px;
}

.order-date {
    white-space: nowrap;
}

.order-date i {
    color: #146cda;
    margin-right: 5px;
}

.article-count {
    white-space: nowrap;
}

.article-count i {
    color: #146cda;
    margin-right: 5px;
}

.order-price {
    color: #1f2937;
    white-space: nowrap;
}

.order-price small {
    color: #8a94a6;
    font-size: 10px;
}


/* ==========================================
   BADGES STATUT
========================================== */

.status-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 10px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
}

.status-badge.paid,
.status-badge.delivered {
    color: #087443;
    background: #e9f8ef;
}

.status-badge.unpaid,
.status-badge.pending {
    color: #a16207;
    background: #fff7d6;
}

.status-badge.preparing,
.status-badge.payment-mode {
    color: #146cda;
    background: #eaf2ff;
}

.status-badge.waiting {
    color: #9a6700;
    background: #fff3cd;
}


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

.order-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.action-btn {
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 9px;
    text-decoration: none !important;
    transition: all .25s ease;
}

.action-btn.view {
    background: #eaf2ff;
    color: #146cda;
}

.action-btn.pdf {
    background: #ffe9e9;
    color: #dc3545;
}

.action-btn.tracking {
    background: #fff4df;
    color: #e69500;
}

.action-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 5px 12px rgba(0,0,0,.12);
}


/* ==========================================
   AUCUNE COMMANDE
========================================== */

.empty-row:hover {
    background: white !important;
}

.empty-orders {
    text-align: center;
    padding: 60px 20px;
}

.empty-orders-icon {
    width: 85px;
    height: 85px;
    margin: 0 auto 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #f1f5f9;
    color: #94a3b8;
    font-size: 35px;
}

.empty-orders h3 {
    color: #334155;
    font-size: 20px;
}

.empty-orders p {
    color: #94a3b8;
    font-size: 14px;
    margin-bottom: 20px;
}

.empty-orders .shopping-btn {
    background: #146cda;
    color: white !important;
}


/* ==========================================
   PAGINATION
========================================== */

.orders-pagination {
    display: flex;
    justify-content: center;
    padding: 25px;
    border-top: 1px solid #edf0f4;
}


/* ==========================================
   MOBILE
========================================== */

@media (max-width: 768px) {

    .orders-header {
        flex-direction: column;
        align-items: flex-start;
        padding: 25px 20px;
    }

    .orders-header-content {
        align-items: flex-start;
    }

    .orders-icon {
        width: 50px;
        height: 50px;
        font-size: 20px;
    }

    .orders-header h1 {
        font-size: 22px;
    }

    .shopping-btn {
        width: 100%;
    }

    .orders-card-header {
        flex-direction: column;
        align-items: stretch;
    }

    .order-search {
        width: 100%;
    }

    .stat-card {
        padding: 15px;
    }

    .orders-table {
        min-width: 950px;
    }

}


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

Gestion des cookies

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

.cookie-banner.hidden {
    display: none !important;
}

.cookie-banner {
    position: fixed;
    bottom: 20px;
    left: 20px;
    right: 20px;
    z-index: 9999;

    display: flex;
    justify-content: center;

    animation: slideUp .4s ease;
}

.cookie-content {
    max-width: 900px;
    width: 100%;

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

    padding: 20px 25px;

    background: rgba(30, 30, 30, .95);
    backdrop-filter: blur(10px);

    color: #fff;

    border-radius: 18px;
    box-shadow: 0 15px 35px rgba(0,0,0,.25);
}

.cookie-icon {
    font-size: 45px;
    flex-shrink: 0;
}

.cookie-text {
    flex: 1;
}

.cookie-text h3 {
    margin: 0 0 8px;
    font-size: 20px;
}

.cookie-text p {
    margin: 0;
    color: #d8d8d8;
    line-height: 1.6;
    font-size: 15px;
}

.cookie-actions {
    display: flex;
    gap: 12px;
    flex-shrink: 0;
}

.btn {
    border: none;
    border-radius: 10px;
    padding: 12px 22px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: .25s;
}

.btn-primary {
    background: #2563eb;
    color: white;
}

.btn-primary:hover {
    background: #1d4ed8;
    transform: translateY(-2px);
}

.btn-secondary {
    background: transparent;
    border: 1px solid #666;
    color: white;
}

.btn-secondary:hover {
    background: rgba(255,255,255,.08);
}

@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (max-width: 768px) {
    .cookie-content {
        flex-direction: column;
        text-align: center;
    }

    .cookie-actions {
        width: 100%;
    }

    .cookie-actions .btn {
        flex: 1;
    }
}



/* ==========================================
   DASHBOARD CLIENT
========================================== */

.customer-dashboard {
    background: #f6f8fc;
    min-height: 100vh;
}


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

.dashboard-sidebar {
    background: #ffffff;
    border-radius: 22px;
    padding: 20px;
    box-shadow: 0 10px 35px rgba(0, 0, 0, 0.06);
    position: sticky;
    top: 20px;
}


.sidebar-profile {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 8px 25px;
    border-bottom: 1px solid #edf0f5;
    margin-bottom: 15px;
}


.profile-avatar {
    width: 48px;
    height: 48px;
    border-radius: 15px;
    background: linear-gradient(135deg, #2a55ff, #6c8cff);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    font-weight: 700;
}


.profile-info h6 {
    margin: 0;
    font-size: 14px;
    font-weight: 700;
}


.profile-info span {
    font-size: 12px;
    color: #8b93a7;
}


.dashboard-nav {
    display: flex;
    flex-direction: column;
    gap: 5px;
}


.dashboard-nav-link {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 13px 12px;
    color: #697386;
    text-decoration: none;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 500;
    transition: all 0.25s ease;
}


.dashboard-nav-link:hover {
    color: #2a55ff;
    background: #f2f5ff;
    transform: translateX(3px);
}


.dashboard-nav-link.active {
    color: #ffffff;
    background: linear-gradient(135deg, #2a55ff, #5275ff);
    box-shadow: 0 8px 20px rgba(42, 85, 255, 0.25);
}


.nav-icon {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 9px;
    font-size: 15px;
}


.dashboard-nav-link.active .nav-icon {
    background: rgba(255,255,255,0.15);
}


.nav-badge {
    margin-left: auto;
    background: #2a55ff;
    color: white;
    font-size: 11px;
    min-width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}


.notification-dot {
    width: 7px;
    height: 7px;
    background: #ff4757;
    border-radius: 50%;
    margin-left: auto;
}


.sidebar-footer {
    border-top: 1px solid #edf0f5;
    margin-top: 15px;
    padding-top: 15px;
}


.logout-link {
    color: #ef4444;
}


.logout-link:hover {
    color: #dc2626;
    background: #fff1f2;
}


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

.dashboard-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    margin-bottom: 30px;
}


.welcome-label,
.section-label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1px;
    color: #2a55ff;
}


.dashboard-header h2 {
    font-size: 28px;
    font-weight: 400;
    margin: 5px 0;
}


.dashboard-header h2 strong {
    font-weight: 800;
}


.dashboard-header p {
    color: #8b93a7;
    margin: 0;
}


.dashboard-main-btn {
    border: 0;
    border-radius: 12px;
    padding: 12px 20px;
    font-weight: 600;
    box-shadow: 0 8px 20px rgba(42, 85, 255, 0.2);
}


/* ==========================================
   STATISTIQUES
========================================== */

.dashboard-stat-card {
    min-height: 50px;
    padding: 8px;
    border-radius: 20px;
    background: white;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-shadow: 0 8px 25px rgba(0,0,0,0.05);
    transition: all 0.3s ease;
}


.dashboard-stat-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 35px rgba(0,0,0,0.09);
}


.stat-content span {
    display: block;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    color: #8b93a7;
}


.stat-content strong {
    display: block;
    font-size: 32px;
    color: #202636;
    margin: 6px 0;
}


.stat-content small {
    color: #9aa2b1;
    font-size: 11px;
}


.stat-icon {
    width: 55px;
    height: 55px;
    border-radius: 17px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
}


.stat-blue {
    border-left: 4px solid #2a55ff;
}


.stat-blue .stat-icon {
    background: #eef2ff;
    color: #2a55ff;
}


.stat-red {
    border-left: 4px solid #ef476f;
}


.stat-red .stat-icon {
    background: #fff0f3;
    color: #ef476f;
}


.stat-orange {
    border-left: 4px solid #f59e0b;
}


.stat-orange .stat-icon {
    background: #fff8e7;
    color: #f59e0b;
}


.stat-green {
    border-left: 4px solid #10b981;
}


.stat-green .stat-icon {
    background: #ecfdf5;
    color: #10b981;
}


/* ==========================================
   SUMMARY
========================================== */

.summary-card {
    background: white;
    border-radius: 20px;
    padding: 8px;
    display: flex;
    align-items: center;
    gap: 20px;
    box-shadow: 0 8px 25px rgba(0,0,0,0.05);
}


.summary-card > div:last-child {
    flex: 1;
}


.summary-card span {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    color: #8b93a7;
}


.summary-card h3 {
    font-size: 28px;
    font-weight: 800;
    margin: 7px 0;
}


.summary-card h3 small {
    font-size: 13px;
    font-weight: 600;
}


.summary-card p {
    color: #9aa2b1;
    font-size: 12px;
    margin: 0;
}


.summary-icon {
    width: 60px;
    height: 60px;
    border-radius: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
}


.summary-icon.success {
    background: #ecfdf5;
    color: #10b981;
}


.summary-icon.warning {
    background: #fff8e7;
    color: #f59e0b;
}


/* ==========================================
   COMMANDES
========================================== */

.orders-card {
    background: white;
    border-radius: 22px;
    box-shadow: 0 8px 25px rgba(0,0,0,0.05);
    overflow: hidden;
}


.orders-header {
    padding: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 15px;
}


.orders-header h4 {
    font-weight: 800;
    margin: 5px 0 0;
}


.order-search {
    margin: 0 25px 20px;
    position: relative;
}


.order-search i {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    color: #9aa2b1;
}


.order-search input {
    width: 100%;
    border: 1px solid #edf0f5;
    background: #f8f9fc;
    border-radius: 12px;
    padding: 12px 15px 12px 45px;
    outline: none;
}


.order-search input:focus {
    border-color: #2a55ff;
    background: white;
}


.orders-table {
    margin: 0;
}


.orders-table thead th {
    background: #f8f9fc;
    border: 0;
    padding: 15px 20px;
    color: #8b93a7;
    font-size: 11px;
    text-transform: uppercase;
}


.orders-table tbody td {
    padding: 18px 20px;
    border-color: #f0f2f6;
}


.order-number {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 700;
    color: #2a55ff;
}


.order-number i {
    width: 34px;
    height: 34px;
    background: #eef2ff;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 9px;
}


.order-date {
    color: #7c8494;
    font-size: 13px;
}


.order-price {
    font-size: 14px;
}


.status-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 11px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 700;
}


.status-badge.delivered {
    color: #059669;
    background: #ecfdf5;
}


.status-badge.preparation {
    color: #2563eb;
    background: #eff6ff;
}


.status-badge.delivery {
    color: #b45309;
    background: #fff7ed;
}


.status-badge.pending {
    color: #dc2626;
    background: #fef2f2;
}


.btn-view-order {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: #2a55ff;
    text-decoration: none;
    font-size: 13px;
    font-weight: 600;
    padding: 8px 13px;
    border-radius: 9px;
    background: #f2f5ff;
}


.btn-view-order:hover {
    color: white;
    background: #2a55ff;
}


/* ==========================================
   AUCUNE COMMANDE
========================================== */

.empty-orders {
    text-align: center;
    padding: 50px 20px;
}


.empty-icon {
    width: 70px;
    height: 70px;
    margin: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f2f4f8;
    color: #9aa2b1;
    border-radius: 50%;
    font-size: 28px;
}


.empty-orders h5 {
    margin-top: 15px;
    font-weight: 700;
}


.empty-orders p {
    color: #9aa2b1;
    font-size: 13px;
}


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

.quick-action-card {
    background: white;
    border-radius: 20px;
    padding: 28px;
    height: 100%;
    box-shadow: 0 8px 25px rgba(0,0,0,0.05);
    transition: all 0.3s ease;
}


.quick-action-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 35px rgba(0,0,0,0.09);
}


.quick-icon {
    width: 55px;
    height: 55px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 16px;
    font-size: 20px;
    margin-bottom: 20px;
}


.quick-icon.blue {
    color: #2a55ff;
    background: #eef2ff;
}


.quick-icon.green {
    color: #10b981;
    background: #ecfdf5;
}


.quick-icon.orange {
    color: #f59e0b;
    background: #fff8e7;
}


.quick-action-card h5 {
    font-weight: 800;
}


.quick-action-card p {
    color: #8b93a7;
    font-size: 13px;
    line-height: 1.6;
}


.quick-action-card a {
    color: #2a55ff;
    text-decoration: none;
    font-size: 13px;
    font-weight: 700;
}


.quick-action-card a i {
    margin-left: 6px;
    transition: transform 0.2s ease;
}


.quick-action-card a:hover i {
    transform: translateX(4px);
}


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

@media (max-width: 991px) {

    .dashboard-sidebar {
        position: relative;
        top: auto;
    }

    .dashboard-nav {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 6px;
    }

    .sidebar-footer {
        margin-top: 10px;
    }

}


@media (max-width: 767px) {

    .dashboard-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .dashboard-header h2 {
        font-size: 23px;
    }

    .dashboard-main-btn {
        width: 100%;
    }

    .dashboard-nav {
        grid-template-columns: 1fr;
    }

    .orders-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .orders-header .btn {
        width: 100%;
    }

    .order-search {
        margin: 0 15px 15px;
    }

    .orders-table {
        min-width: 700px;
    }

}


/* ==========================================
   REGISTER CARD - LARGEUR
========================================== */

.register-card {
    width: 100%;
    max-width: 950px;
    margin: 0 auto;
    padding: 40px 50px;
}


/* ==========================================
   FORMULAIRE
========================================== */

.register-card .custom-form-group {
    width: 100%;
    margin-bottom: 20px;
}


/* ==========================================
   GROUPE INPUT
========================================== */

.register-card .input-group-modern {
    width: 100%;
    display: flex;
    align-items: stretch;
}


/* ==========================================
   INPUTS
========================================== */

.register-card .custom-input {
    width: 100%;
    height: 52px;
    min-width: 0;
    padding: 12px 18px;
    font-size: 15px;
    border-radius: 0 10px 10px 0;
    border: 1px solid #dfe3eb;
    border-left: 0;
    outline: none;
    transition: all 0.25s ease;
}


/* ==========================================
   ICÔNE
========================================== */

.register-card .input-icon-box {
    width: 52px;
    min-width: 52px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f4f6fa;
    color: #2a55ff;
    border: 1px solid #dfe3eb;
    border-right: 0;
    border-radius: 10px 0 0 10px;
}


/* ==========================================
   FOCUS INPUT
========================================== */

.register-card .custom-input:focus {
    border-color: #2a55ff;
    box-shadow: 0 0 0 3px rgba(42, 85, 255, 0.10);
}


/* ==========================================
   SELECT
========================================== */

.register-card select.custom-input {
    cursor: pointer;
    background-color: #fff;
}


/* ==========================================
   PASSWORD
========================================== */

.register-card .input-group-modern {
    position: relative;
}


.register-card .input-password {
    padding-right: 50px;
}


.register-card .toggle-password {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    border: none;
    background: transparent;
    color: #8b93a7;
    cursor: pointer;
    z-index: 5;
}


.register-card .toggle-password:hover {
    color: #2a55ff;
}


/* ==========================================
   LABELS
========================================== */

.register-card .custom-form-group label {
    display: block;
    margin-bottom: 8px;
    font-size: 14px;
    font-weight: 600;
    color: #333b4f;
}


/* ==========================================
   RECAPTCHA
========================================== */

.register-card .g-recaptcha {
    margin-top: 15px;
    margin-bottom: 20px;
}


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

@media (max-width: 991px) {

    .register-card {
        max-width: 850px;
        padding: 35px 30px;
    }

}


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

@media (max-width: 767px) {

    .register-card {
        max-width: 100%;
        padding: 30px 20px;
    }

    .register-card .custom-input {
        height: 50px;
        font-size: 14px;
    }

    .register-card .input-icon-box {
        width: 50px;
        min-width: 50px;
        height: 50px;
    }

}

/* =====================================================
   PROFILE PAGE
===================================================== */

.profile-page {
    background: #f5f7fb;
    min-height: 100vh;
}


/* =====================================================
   GLOBAL CARD
===================================================== */

.profile-card {
    background: #ffffff;
    border-radius: 24px;
    overflow: hidden;
    border: 1px solid rgba(0, 0, 0, 0.05);
    box-shadow: 0 10px 35px rgba(0, 0, 0, 0.07);
    transition: all 0.3s ease;
}

.profile-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.10);
}


/* =====================================================
   PROFILE COVER
===================================================== */

.profile-cover {
    height: 125px;
    background: linear-gradient(
        135deg,
        #0d6efd,
        #4f8dfd,
        #6f42c1
    );
    position: relative;
}

.profile-cover::after {
    content: "";
    position: absolute;
    width: 180px;
    height: 180px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
    top: -80px;
    right: -40px;
}


/* =====================================================
   PROFILE CONTENT
===================================================== */

.profile-content {
    padding: 0 30px 35px;
}


/* =====================================================
   AVATAR
===================================================== */

.profile-avatar-wrapper {
    position: relative;
    display: inline-block;
    margin-top: -65px;
}

.profile-avatar {
    width: 130px;
    height: 130px;
    object-fit: cover;
    border-radius: 50%;
    border: 6px solid #ffffff;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
    background: #ffffff;
}

.online-status {
    position: absolute;
    width: 20px;
    height: 20px;
    background: #22c55e;
    border: 4px solid #ffffff;
    border-radius: 50%;
    right: 8px;
    bottom: 12px;
}


/* =====================================================
   PROFILE NAME
===================================================== */

.profile-name {
    font-size: 24px;
    font-weight: 700;
    color: #1f2937;
}

.profile-status {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: #f59e0b;
    background: #fff7ed;
    padding: 7px 15px;
    border-radius: 50px;
    font-size: 14px;
    font-weight: 600;
}


/* =====================================================
   DIVIDER
===================================================== */

.profile-divider {
    height: 1px;
    background: #edf0f5;
    margin: 30px 0;
}


/* =====================================================
   PROFILE STATS
===================================================== */

.profile-stats {
    display: flex;
    justify-content: space-between;
    gap: 15px;
}

.profile-stat {
    flex: 1;
    text-align: center;
}

.profile-stat h4 {
    font-size: 22px;
    font-weight: 700;
    margin: 10px 0 3px;
    color: #1f2937;
}

.profile-stat span {
    font-size: 12px;
    color: #8b95a7;
}


/* =====================================================
   STAT ICON
===================================================== */

.stat-icon {
    width: 45px;
    height: 45px;
    margin: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    font-size: 17px;
}

.orders-icon {
    background: #eff6ff;
    color: #2563eb;
}

.favorites-icon {
    background: #fef2f2;
    color: #ef4444;
}

.points-icon {
    background: #f0fdf4;
    color: #16a34a;
}


/* =====================================================
   INFORMATION HEADER
===================================================== */

.information-header {
    padding: 30px;
    display: flex;
    align-items: center;
    gap: 18px;
    background: linear-gradient(
        135deg,
        #0d6efd,
        #4f8dfd
    );
    color: #ffffff;
}

.header-icon {
    width: 55px;
    height: 55px;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.18);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
}

.information-header h3 {
    margin: 0;
    font-size: 21px;
    font-weight: 700;
}

.information-header p {
    margin: 5px 0 0;
    opacity: 0.85;
    font-size: 14px;
}


/* =====================================================
   INFORMATION BODY
===================================================== */

.information-body {
    padding: 35px;
}


/* =====================================================
   FORM
===================================================== */

.form-group-modern label {
    display: block;
    margin-bottom: 9px;
    font-size: 14px;
    font-weight: 600;
    color: #374151;
}

.form-group-modern label i {
    color: #0d6efd;
    margin-right: 7px;
}


/* =====================================================
   INPUT
===================================================== */

.modern-input {
    height: 52px;
    border-radius: 12px;
    border: 1px solid #e1e5eb;
    padding: 0 16px;
    font-size: 15px;
    background: #f9fafb;
    transition: all 0.25s ease;
}

.modern-input:focus {
    background: #ffffff;
    border-color: #0d6efd;
    box-shadow: 0 0 0 4px rgba(13, 110, 253, 0.10);
}


/* =====================================================
   UPLOAD BOX
===================================================== */

.upload-box {
    position: relative;
    min-height: 90px;
    border: 2px dashed #d9dee7;
    border-radius: 15px;
    padding: 18px 20px;
    display: flex;
    align-items: center;
    gap: 18px;
    background: #fafbfc;
    cursor: pointer;
    transition: all 0.25s ease;
}

.upload-box:hover {
    border-color: #0d6efd;
    background: #f5f9ff;
}

.upload-box > i {
    width: 50px;
    height: 50px;
    border-radius: 12px;
    background: #eff6ff;
    color: #0d6efd;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
}

.upload-content {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.upload-content strong {
    color: #374151;
    font-size: 14px;
}

.upload-content small {
    color: #9ca3af;
    font-size: 12px;
}

.upload-box input[type="file"] {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
}


/* =====================================================
   ALERT
===================================================== */

.custom-alert {
    border: none;
    border-radius: 12px;
    padding: 14px 18px;
    font-size: 14px;
}


/* =====================================================
   ACTION BUTTON
===================================================== */

.form-actions {
    display: flex;
    justify-content: flex-end;
    padding-top: 5px;
}

.btn-save {
    background: linear-gradient(
        135deg,
        #0d6efd,
        #4f8dfd
    );
    color: #ffffff;
    border: none;
    border-radius: 12px;
    padding: 13px 25px;
    font-size: 15px;
    font-weight: 600;
    box-shadow: 0 7px 18px rgba(13, 110, 253, 0.25);
    transition: all 0.3s ease;
}

.btn-save:hover {
    color: #ffffff;
    transform: translateY(-2px);
    box-shadow: 0 10px 25px rgba(13, 110, 253, 0.35);
}


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

@media (max-width: 991px) {

    .profile-page {
        padding-left: 10px;
        padding-right: 10px;
    }

    .profile-content {
        padding-left: 20px;
        padding-right: 20px;
    }

    .information-body {
        padding: 25px 20px;
    }

    .information-header {
        padding: 25px 20px;
    }

}


@media (max-width: 576px) {

    .profile-card {
        border-radius: 18px;
    }

    .profile-cover {
        height: 100px;
    }

    .profile-avatar {
        width: 110px;
        height: 110px;
    }

    .profile-avatar-wrapper {
        margin-top: -55px;
    }

    .profile-name {
        font-size: 21px;
    }

    .profile-stats {
        gap: 5px;
    }

    .profile-stat h4 {
        font-size: 19px;
    }

    .profile-stat span {
        font-size: 10px;
    }

    .information-header h3 {
        font-size: 18px;
    }

    .information-header p {
        font-size: 12px;
    }

    .header-icon {
        width: 45px;
        height: 45px;
        font-size: 18px;
    }

    .upload-box {
        align-items: flex-start;
    }

    .form-actions {
        justify-content: stretch;
    }

    .btn-save {
        width: 100%;
    }

}

/* =====================================================
   PASSWORD PAGE
===================================================== */

.password-page {
    background: #f5f7fb;
    min-height: 100vh;
}


/* =====================================================
   CARD
===================================================== */

.password-card {
    background: #ffffff;
    border-radius: 24px;
    overflow: hidden;
    border: 1px solid rgba(0, 0, 0, 0.05);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.08);
}


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

.password-header {
    display: flex;
    align-items: center;
    gap: 18px;

    padding: 30px;

    color: #ffffff;

    background: linear-gradient(
        135deg,
        #0d6efd,
        #4f8dfd
    );
}

.password-header-icon {
    width: 58px;
    height: 58px;

    flex-shrink: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 16px;

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

    font-size: 23px;
}

.password-header h3 {
    margin: 0;

    font-size: 21px;
    font-weight: 700;
}

.password-header p {
    margin: 6px 0 0;

    font-size: 13px;

    opacity: 0.85;
}


/* =====================================================
   BODY
===================================================== */

.password-body {
    padding: 35px;
}


/* =====================================================
   ALERTS
===================================================== */

.custom-alert {
    display: flex;
    align-items: flex-start;
    gap: 14px;

    padding: 15px 18px;

    margin-bottom: 25px;

    border-radius: 14px;
    border: none;
}

.custom-alert .alert-icon {
    width: 34px;
    height: 34px;

    flex-shrink: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 10px;

    background: rgba(255, 255, 255, 0.7);
}

.custom-alert strong {
    display: block;

    margin-bottom: 3px;

    font-size: 14px;
}

.custom-alert p {
    margin: 0;

    font-size: 13px;
}

.custom-alert ul {
    margin: 7px 0 0;
    padding-left: 18px;

    font-size: 13px;
}


/* =====================================================
   SECURITY INFO
===================================================== */

.security-info {
    display: flex;
    align-items: flex-start;
    gap: 14px;

    padding: 16px;

    margin-bottom: 30px;

    border-radius: 14px;

    background: #f0f7ff;
    border: 1px solid #d9ebff;
}

.security-info-icon {
    width: 40px;
    height: 40px;

    flex-shrink: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 11px;

    color: #0d6efd;
    background: #ffffff;

    font-size: 17px;
}

.security-info strong {
    display: block;

    margin-bottom: 4px;

    color: #1f2937;

    font-size: 14px;
}

.security-info p {
    margin: 0;

    color: #6b7280;

    font-size: 12px;
    line-height: 1.6;
}


/* =====================================================
   FORM GROUP
===================================================== */

.password-form-group {
    margin-bottom: 23px;
}

.password-form-group label {
    display: block;

    margin-bottom: 9px;

    color: #374151;

    font-size: 14px;
    font-weight: 600;
}

.password-form-group label i {
    margin-right: 7px;

    color: #0d6efd;
}


/* =====================================================
   PASSWORD INPUT
===================================================== */

.password-input-wrapper {
    position: relative;
}

.password-input {
    width: 100%;
    height: 54px;

    padding: 0 55px 0 16px;

    border: 1px solid #e1e5eb;
    border-radius: 12px;

    background: #f9fafb;

    font-size: 14px;

    transition: all 0.25s ease;
}

.password-input:focus {
    background: #ffffff;

    border-color: #0d6efd;

    box-shadow:
        0 0 0 4px rgba(13, 110, 253, 0.10);
}


/* =====================================================
   PASSWORD TOGGLE
===================================================== */

.password-toggle {
    position: absolute;

    top: 50%;
    right: 5px;

    width: 44px;
    height: 44px;

    transform: translateY(-50%);

    display: flex;
    align-items: center;
    justify-content: center;

    border: none;
    border-radius: 10px;

    background: transparent;

    color: #8b95a7;

    cursor: pointer;

    transition: all 0.2s ease;
}

.password-toggle:hover {
    background: #eff6ff;
    color: #0d6efd;
}


/* =====================================================
   PASSWORD STRENGTH
===================================================== */

.password-strength {
    margin-top: 10px;
}

.strength-bar {
    display: flex;
    gap: 5px;

    margin-bottom: 5px;
}

.strength-bar span {
    height: 4px;

    flex: 1;

    border-radius: 5px;

    background: #e5e7eb;
}

.password-strength small {
    color: #9ca3af;

    font-size: 11px;
}


/* =====================================================
   SUBMIT BUTTON
===================================================== */

.password-action {
    margin-top: 30px;
}

.password-submit {
    width: 100%;

    height: 54px;

    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;

    border: none;
    border-radius: 12px;

    color: #ffffff;

    background: linear-gradient(
        135deg,
        #0d6efd,
        #4f8dfd
    );

    font-size: 15px;
    font-weight: 600;

    box-shadow:
        0 8px 20px rgba(13, 110, 253, 0.25);

    transition: all 0.3s ease;
}

.password-submit:hover {
    color: #ffffff;

    transform: translateY(-2px);

    box-shadow:
        0 12px 28px rgba(13, 110, 253, 0.35);
}


/* =====================================================
   MOBILE
===================================================== */

@media (max-width: 576px) {

    .password-page {
        padding: 20px 10px !important;
    }

    .password-card {
        border-radius: 18px;
    }

    .password-header {
        padding: 23px 20px;
    }

    .password-header-icon {
        width: 48px;
        height: 48px;

        font-size: 19px;
    }

    .password-header h3 {
        font-size: 18px;
    }

    .password-header p {
        font-size: 11px;
    }

    .password-body {
        padding: 25px 20px;
    }

    .security-info {
        padding: 13px;
    }

}