:root{
    --primary:#1a4d2e;
    --accent:#ff9800;
    --light:#f8f9fa;
    --text:#222;
}

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

body{
    font-family:'Poppins',sans-serif;
    background:#fff;
    color:var(--text);
}

/* CONTAINER */
.container{
    max-width:1200px;
    margin:auto;
}

/* HEADER */
/* ===== NAVBAR CLEAN RESPONSIVE ===== */

/* ===== HEADER ===== */
.main-header{
    background:#024316;
    position:sticky;
    top:0;
    z-index:1000;
    position: relative; /* 🔥 important pour position absolute du bouton */
}
/* ===== TOP BAR ===== */
.top-bar{
    display:flex;
    align-items:center; /* 🔥 alignement vertical parfait */
    justify-content:space-between;
    padding:5px 2%;
    gap:15px;
}
.cart-btn{
    margin: left 15px;
}
.cart-count{
      margin: left 15px;
}
/* LOGO */
.logo img{
    height:40px;
}

.search-container{
    flex:1 1 auto;
    margin-left: 40px; /* pousse vers la droite */
    margin-right: 10px;
}
.search-container form{
    display:flex;
    width:100%;
}

.search-container input{
    flex:1;
    padding:10px;
    border:none;
    border-radius:6px 0 0 6px;
}

.search-container button{
    background:#1a4d2e;
    color:white;
    border:none;
    padding:0 15px;
    border-radius:0 6px 6px 0;
    cursor:pointer;
}
.menu-toggle{
    order:1;
}

/* USER ACTIONS */
 .user-actions{
        flex:0 0 auto;
        margin-left:auto;
        display:flex;
        align-items:center;
        gap:8px;
    }

.user-actions a{
    color:#fff;
    font-size:14px;
    text-decoration:none;
}

/* ===== NAV LINKS  accueil===== */
.nav-links{
    display:flex;
    justify-content:center;
    gap:20px;
    padding:10px 5%;
    background:#f8f9fa;
}

.nav-links a{
    text-decoration:none;
    color:#111;
    font-weight:500;
}

.nav-links a.active{
    color:#1a4d2e;
    border-bottom:2px solid #1a4d2e;
}


/* HERO / BANNIERE FULL WIDTH */
.hero-container{
    position:relative;
    width:100%;
    height:70vh;
    overflow:hidden;
}

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

.hero-overlay{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:flex-start;
    padding:0 10%;
    color:white;
    background:rgba(0,0,0,0.3);
}

.hero-overlay{
    pointer-events: none;
}

.hero-text{
    pointer-events: auto;
}

.hero-title{
    font-size:3rem;
    font-weight:800;
    margin-bottom:15px;
}

.hero-subtitle{
    font-size:1.5rem;
    margin-bottom:25px;
}

.btn-cta{
    background:var(--primary);
    color:rgb(230, 211, 7);
    padding:16px 35px;
    border-radius:8px;
    font-weight:600;
    text-decoration:none;
}

/* CATEGORIES */
.category-section{
    padding:40px 5%;
    background:#f8f9fa;
}

.category-grid{
    display:flex;
    flex-wrap:nowrap;
    overflow-x:auto;
    gap:20px;
    padding-bottom:10px;
}

.cat-card{
    flex:0 0 180px;
    text-align:center;
    border-radius:12px;
    overflow:hidden;
    cursor:pointer;
    transition:.3s;
    background:rgb(227, 228, 226);
}

.cat-card img{
    width:100%;
    height:150px;
    object-fit:cover;
    margin-bottom:10px;
}

.cat-card div, .cat-card span{
    padding:10px;
    font-weight:bold;
    color:#333;
}

/* PRODUITS */
.products-container{
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(220px,1fr));
    gap:25px;
    padding:30px 5%;
}

.product-item{
    background:#fff;
    border-radius:12px;
    padding:20px;
    text-align:center;
    border:1px solid #eee;
    transition:.3s;
    display:flex;
    flex-direction:column;
}

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

.product-item img{
    width:100%;
    height:200px;
    object-fit:contain;
    margin-bottom:10px;
}

.product-item h3{
    font-size:1rem;
    margin:10px 0;
}

.price{
    font-weight:bold;
    color:var(--primary);
    margin-bottom:10px;
}

.btn-add{
    width:100%;
    padding:12px;
    border:none;
    border-radius:8px;
    background:var(--accent);
    color:white;
    font-weight:600;
    cursor:pointer;
    margin-top:auto;
}

.btn-add:hover{
    opacity:.9;
}

/* OFFERS */
/* OFFRES SPÉCIALES */
.special-offers{
    padding:20px 5%; /* réduit de 40px à 20px */
}

.offer-card{
    background:#0f2517;
    color:white;
    border-radius:14px;
    padding:20px; /* réduit de 40px à 20px */
}

.offer-content{
    display:flex;
    justify-content:space-between;
    align-items:center;
    flex-wrap:wrap;
}
.offer-content img{
    width:200px;
    height:auto;
}

.discount{
    color:var(--accent);
    font-size:1.4rem;
}

/* WHY CHOOSE US */
.why-choose-us{
    padding:60px 5%;
    text-align:center;
}

.benefits-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:30px;
    margin-top:40px;
}

.benefit-card{
    padding:25px;
    border-radius:10px;
    background:#f7f4e8;
}

.benefit-card i{
    font-size:2rem;
    color:var(--primary);
    margin-bottom:10px;
}
.cart-count{
background:#faab02;
color:white;
font-size:12px;
padding:2px 6px;
border-radius:50%;
margin-left: 10px;
}

/* FOOTER */
.main-footer{
    background:#1a4d2e;
    color:white;
    padding:60px 5% 20px;
}

.footer-top{
    display:flex;
    justify-content:space-between;
    border-bottom:1px solid rgba(255,255,255,0.1);
    padding-bottom:40px;
}

.footer-grid{
    display:flex;
    gap:60px;
}

.footer-col ul{
    list-style:none;
}

.footer-col li{
    margin-bottom:10px;
}

.footer-col a{
    color:#ccc;
    text-decoration:none;
}

.footer-bottom{
    display:flex;
    justify-content:space-between;
    padding-top:20px;
    color:#fccb05;
}

.fa-facebook{
color:#1877f2;
}

.fa-twitter{
color:#1da1f2;
}

.fa-instagram{
color:#e4405f;
}

/* PAYMENT METHODS */
.payment-methods{
    display:flex;
    align-items:center;
    gap:10px;
    margin-top:10px;
    flex-wrap:nowrap;
}

.payment-methods img{
    height:28px;
    width:auto;
    background:white;
    padding:4px 6px;
    border-radius:6px;
    object-fit:contain;
}
.payment-methods img:hover{
    transform:scale(1.05);
    transition:0.2s;
}

/* RESPONSIVE */
@media(max-width:1024px){

    .products-container{
        grid-template-columns:repeat(2,1fr);
    }

    .hero-overlay{
        align-items:center;
        text-align:center;
        padding:0 5%;
    }

    .hero-title{
        font-size:2.5rem;
    }

    .hero-subtitle{
        font-size:1.2rem;
    }

    .benefits-grid{
        grid-template-columns:repeat(2,1fr);
    }

    .hero-visual img{
        max-width:400px;
    }

}

@media(max-width:600px){

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

    .nav-links{
        overflow-x:auto;
    }

    .category-grid{
        gap:15px;
    }

    .hero-title{
        font-size:1.8rem;
    }

    .hero-subtitle{
        font-size:1rem;
    }

    .hero-visual img{
        max-width:300px;
        margin-top:20px;
    }
}
.user-actions a i{
    color:#FFD700; /* or */
    font-size:18px;
}


/* RESPONSIVE MOBILE  Navlink accueil*/
@media (max-width:768px){

.nav-links{
overflow-x:auto;
white-space:nowrap;
justify-content:flex-start;
gap:20px;
}

.nav-links a{
display:inline-block;
padding:8px 0;
}

}


@media (max-width:768px){

.footer-top{
flex-direction:column;
gap:30px;
}

.footer-grid{
flex-direction:column;
gap:25px;
}

.footer-bottom{
flex-direction:column;
gap:15px;
text-align:center;
}

.payment-methods{
justify-content:center;
flex-wrap:wrap;
}

}

/* OPTIMISATION MOBILE */
@media (max-width:768px){

/* logo */
.logo img{
height:40px;
}

/* recherche */
.search-container input{
padding:8px;
font-size:14px;
}


.search-container{
    flex:1;
    max-width:60%;
}
.search-container button{
padding:0 12px;
}

/* icones compte et panier */
.user-actions a{
font-size:14px;
}

.user-actions a i{
font-size:16px;
}

/* navigation */
.nav-links{
gap:15px;
padding:10px 5%;
}

.nav-links a{
font-size:14px;
}

/* hero */
.hero-container{
height:45vh;
}

.hero-title{
font-size:1.6rem;
}

.hero-subtitle{
font-size:0.9rem;
}

.btn-cta{
padding:10px 20px;
font-size:14px;
}

/* categories */
.cat-card {
    position: relative;
    height: 150px;
    border-radius: 16px;
    overflow: hidden;
    color: white;
    font-weight: bold;
}

.cat-icon {
    width: 100%;
    height: 100%;
}

.cat-icon img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: brightness(0.7);
    transition: 0.3s;
}

.cat-card:hover img {
    transform: scale(1.1);
}

.cat-card span {
    position: absolute;
    bottom: 10px;
    left: 15px;
    z-index: 2;
}

/* produits */
.product-item{
padding:12px;
}

.product-item img{
height:150px;
}

.product-item h3{
font-size:0.9rem;
}

.price{
font-size:0.9rem;
}

.btn-add{
padding:10px;
font-size:14px;
}

/* offers */
.offer-content img{
width:140px;
    color: #ff9800;
}


/* footer */
.footer-top{
gap:20px;
}

.footer-col h4{
font-size:15px;
}

.footer-col a{
font-size:14px;
}

.footer-bottom{
font-size:13px;
}

.footer-social a i{
    color:#fafaf5; /* couleur or */
    font-size:18px;
    margin-right:10px;
    transition:0.3s;
}

.footer-social a i:hover{
    color:#ff9800; /* couleur accent */
}

}

/* HERO / BANNIERE MOBILE */
@media (max-width:768px){

.hero-container{
    height:35vh; /* réduit la hauteur pour mobile */
}

.hero-img{
    object-fit:contain; /* au lieu de cover pour ne pas zoomer */
    width:102%;
    height:100%;
}

.hero-overlay{
    padding:10px 5%;
    align-items:center;
    text-align:center;
}

.hero-title{
    font-size:1.5rem;
}

.hero-subtitle{
    font-size:0.9rem;
}

.btn-cta{
    padding:10px 20px;
    font-size:14px;
}

}


.account-card{
    background:#f7f7f7;
    padding:20px;
    border-radius:10px;
    border:1px solid #eee;
}

.account-actions a, .account-actions button{
    margin-right:10px;
}
/* PAGE COMPTE */

.account-container{
padding:40px 5%;
}

.account-grid{
display:grid;
grid-template-columns:250px 1fr;
gap:30px;
}

/* sidebar */

.account-sidebar{
background:#f8f9fa;
padding:20px;
border-radius:10px;
}

.account-sidebar h3{
margin-bottom:20px;
}

.account-sidebar ul{
list-style:none;
}

.account-sidebar li{
margin-bottom:12px;
}

.account-sidebar a{
text-decoration:none;
color:#333;
display:flex;
align-items:center;
gap:10px;
padding:8px;
border-radius:6px;
}

.account-sidebar a:hover{
background:#eee;
}

.logout-btn{
border:none;
background:#ff4d4d;
color:white;
padding:8px 12px;
border-radius:6px;
cursor:pointer;
}

/* contenu */

.account-content{
display:flex;
flex-direction:column;
gap:20px;
}

.account-card{
background:white;
padding:20px;
border-radius:10px;
border:1px solid #eee;
}

.account-stats{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:20px;
}

.stat-box{
background:#f8f9fa;
padding:20px;
text-align:center;
border-radius:10px;
}

.stat-box i{
font-size:25px;
color:#1a4d2e;
margin-bottom:10px;
}
.auth-container{
max-width:400px;
margin:60px auto;
background:white;
padding:30px;
border-radius:10px;
border:1px solid #eee;
text-align:center;
}

.auth-container input{
width:100%;
padding:12px;
margin-bottom:15px;
border:1px solid #ddd;
border-radius:6px;
}

.auth-container button{
width:100%;
padding:12px;
border:none;
background:#1a4d2e;
color:white;
border-radius:6px;
font-weight:bold;
cursor:pointer;
}

/* PAGE COMPTE */

.account-page{
padding:60px 5%;
background:#f8f9fa;
}

.account-wrapper{
display:grid;
grid-template-columns:1fr 1fr;
gap:40px;
max-width:900px;
margin:auto;
}

.account-card{
background:white;
padding:30px;
border-radius:12px;
box-shadow:0 5px 20px rgba(0,0,0,0.05);
border:1px solid #eee;
}

.account-card h2{
margin-bottom:20px;
font-size:20px;
color:#1a4d2e;
}

.form-group{
margin-bottom:15px;
}

.form-group input{
width:100%;
padding:12px;
border:1px solid #ddd;
border-radius:8px;
background:#f9f9f9;
}

.account-btn{
width:100%;
padding:12px;
background:#1a4d2e;
color:white;
border:none;
border-radius:8px;
font-weight:600;
cursor:pointer;
transition:0.3s;
}
.btn-offer {
    background-color: #da8805; /* jaune or */
    color: white;
    padding: 10px 20px;
    border-radius: 5px;
    text-decoration: none;
    display: inline-block;
}

.account-btn:hover{
background:#143c24;
}

/* mobile */

@media(max-width:768px){

.account-wrapper{
grid-template-columns:1fr;
}

}
/* DASHBOARD CLIENT */

.dashboard-container{
padding:50px 5%;
}

.dashboard-grid{
display:grid;
grid-template-columns:250px 1fr;
gap:30px;
}

/* sidebar */

.dashboard-sidebar{
background:white;
padding:25px;
border-radius:10px;
border:1px solid #eee;
}

.dashboard-sidebar h3{
margin-bottom:20px;
}

.dashboard-sidebar ul{
list-style:none;
}

.dashboard-sidebar li{
margin-bottom:12px;
}

.dashboard-sidebar a{
text-decoration:none;
color:#333;
display:flex;
align-items:center;
gap:10px;
padding:8px;
border-radius:6px;
}

.dashboard-sidebar a:hover{
background:#f5f5f5;
}

.logout-btn{
border:none;
background:#ff4d4d;
color:white;
padding:8px 12px;
border-radius:6px;
cursor:pointer;
}

/* contenu */

.dashboard-content{
display:flex;
flex-direction:column;
gap:20px;
}

.dashboard-card{
background:white;
padding:25px;
border-radius:10px;
border:1px solid #eee;
}

.dashboard-stats{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:20px;
}

.stat-box{
background:#f8f9fa;
padding:20px;
text-align:center;
border-radius:10px;
}

.stat-box i{
font-size:25px;
color:#1a4d2e;
margin-bottom:10px;
}

/* mobile */

@media(max-width:768px){

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

}
.account-container{
    display:flex;
    gap:30px;
    padding:40px;
}

/* MENU */

.account-menu{
    width:250px;
    background:#fff;
    border-radius:10px;
    padding:20px;
    box-shadow:0 5px 15px rgba(0,0,0,0.05);
}

.account-menu h3{
    margin-bottom:20px;
}

.account-menu a{
    display:block;
    padding:10px;
    margin-bottom:8px;
    text-decoration:none;
    color:#333;
    border-radius:6px;
}

.account-menu a:hover{
    background:#f5f5f5;
}

.account-menu .active{
    background:#1a4d2e;
    color:white;
}

.logout{
    margin-top:20px;
    width:100%;
    background:#ff4d4d;
    border:none;
    padding:10px;
    color:white;
    border-radius:6px;
    cursor:pointer;
}

/* CONTENU */

.account-content{
    flex:1;
}

.account-cards{
    margin-top:20px;
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
    gap:20px;
}

.card{
    background:white;
    padding:20px;
    border-radius:10px;
    box-shadow:0 5px 15px rgba(0,0,0,0.05);
}

.card h3{
    margin-bottom:10px;
}

.card a{
    display:inline-block;
    margin-top:10px;
    color:#ff9800;
    text-decoration:none;
    font-weight:600;
}



/* ===== Dashboard Container ===== */
.dashboard-container {
    display: flex;
    gap: 20px;
    margin-top: 40px;
    font-family: 'Poppins', sans-serif;
    color: #222;
}

/* ===== Sidebar ===== */
.dashboard-sidebar {
    flex: 1;
    max-width: 220px;
}

.account-card {
    padding: 20px;
    border: 1px solid #eee;
    border-radius: 10px;
    background: #f7f7f7;
    text-align: center;
    margin-bottom: 20px;
}

.account-card h3 {
    margin-bottom: 5px;
}

.account-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.account-actions .btn-sidebar {
    display: block;
    padding: 10px 15px;
    border-radius: 6px;
    border: none;
    text-decoration: none;
    color: #333;
    background: #fff;
    text-align: center;
    transition: 0.2s;
}

.account-actions .btn-sidebar:hover {
    background: #f5f5f5;
}

.account-actions .btn-sidebar.active {
    background: #1a4d2e;
    color: #fff;
}

.account-actions form button.btn-sidebar {
    background: #094701;
    color: white;
}

/* ===== Main Content ===== */
.dashboard-content {
    flex: 3;
    background: #fff;
    padding: 20px;
    border-radius: 10px;
    border: 1px solid #eee;
}

/* Headings */
.dashboard-content h2,
.dashboard-content h3 {
    margin-bottom: 20px;
}

/* ===== Forms ===== */
.form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.form-group {
    display: flex;
    flex-direction: column;
    margin-bottom: 15px;
}

.form-group label {
    margin-bottom: 5px;
    font-weight: 500;
}

.form-group input {
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 6px;
    font-size: 14px;
}

.btn-save {
    margin-top: 20px;
    background: #1a4d2e;
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 6px;
    cursor: pointer;
    transition: 0.2s;
}

.btn-save:hover {
    background: #163a1f;
}

/* ===== Orders Table ===== */
.orders-table {
    width: 100%;
    border-collapse: collapse;
}

.orders-table th,
.orders-table td {
    padding: 12px;
    border-bottom: 1px solid #eee;
    text-align: left;
}

.orders-table th {
    background: #f7f7f7;
}

.status {
    padding: 5px 10px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 500;
    display: inline-block;
}

.status.nouvelle {
    background: #fff3cd;
    color: #856404;
}

.status.livree {
    background: #d4edda;
    color: #155724;
}

.btn-details {
    color: #ff9800;
    text-decoration: none;
    font-weight: 500;
}

/* ===== Addresses ===== */
.address-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
}

.address-card {
    padding: 20px;
    border: 1px solid #eee;
    border-radius: 10px;
    background: #fff;
}

.address-card h4 {
    margin-bottom: 10px;
}

.btn-edit,
.btn-add {
    margin-top: 10px;
    background: #ff9800;
    color: white;
    border: none;
    padding: 8px 15px;
    border-radius: 6px;
    cursor: pointer;
    transition: 0.2s;
}

.btn-edit:hover,
.btn-add:hover {
    background: #e68900;
}

/* ===== Favorites ===== */
.favorites-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
}

.product-card {
    border: 1px solid #eee;
    border-radius: 10px;
    padding: 15px;
    text-align: center;
    background: #fff;
    transition: 0.2s;
}

.product-card:hover {
    box-shadow: 0 5px 15px rgba(0,0,0,0.08);
}

.product-card img {
    width: 100%;
    height: 150px;
    object-fit: cover;
    border-radius: 6px;
}

.product-card h4 {
    margin: 10px 0 5px;
    font-size: 16px;
}

.product-card p {
    font-weight: 500;
    color: #1a4d2e;
    margin-bottom: 10px;
}

.product-card{
    position:relative;
    overflow:hidden;
}

.btn-cart {
    background: #ff9800;
    color: white;
    border: none;
    padding: 10px 15px;
    border-radius: 6px;
    cursor: pointer;
    transition: 0.2s;
    
}
.btn-cart:hover {
    background: #e68900;
}

/* ===== Password Form ===== */
.password-form {
    max-width: 500px;
}

.password-form .form-group {
    margin-bottom: 15px;
}

.password-form input {
    width: 100%;
}

/* ===== Responsive ===== */
@media (max-width: 900px) {
    .dashboard-container {
        flex-direction: column;
    }

    .dashboard-sidebar {
        max-width: 100%;
        order: 2;
    }

    .dashboard-content {
        order: 1;
    }

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

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


/* ===== Boutique: Produits ===== */
.shop-products {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3 produits par ligne desktop */
    gap: 25px;
}

.product-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    border: 1px solid #eee;
    border-radius: 10px;
    padding: 15px;
    background: #fff;
    transition: 0.2s;
}

.product-card {
    background: #fff;
    border-radius: 12px;
    padding: 15px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 10px;
}

.product-card img {
    width: 100%;
    height: 180px;
    object-fit: cover;
    border-radius: 8px;
}

.product-card h3 {
    font-size: 1.1rem;
    margin: 10px 0;
}

.product-card .price {
    font-weight: bold;
    color: #2d7be5;
}

.product-card form {
    display: flex;
    align-items: center;
    gap: 8px;
    justify-content: center; /* centre le bouton et la quantité */
}

.product-card input[type="number"] {
    width: 60px; /* fixe la largeur du champ quantité */
    padding: 6px;
    border-radius: 6px;
    border: 1px solid #ccc;
    text-align: center;
}

.product-card button {
    background: #2d7be5;
    color: #fff;
    border: none;
    padding: 6px 12px;
    border-radius: 6px;
    cursor: pointer;
    font-weight: bold;
    transition: 0.2s;
}

.product-card button:hover {
    background: #1b5fcc;
}

.product-card-img{
    width:100%;
    height:180px;
    object-fit:contain;
    margin-bottom:10px;
}
.product-card-img {
    width: 100%;       /* Toujours à la largeur du conteneur */
    height: 180px;     /* Hauteur fixe */
    object-fit: cover; /* Redimensionne et recadre l’image pour rentrer */
    border-radius: 12px;
}

.product-card {
    overflow: hidden; /* Empêche que le contenu déborde */
    display: flex;
    flex-direction: column;
}
.product-card h4 {
    margin: 10px 0 5px;
    font-size: 16px;
}

.product-card p {
    font-weight: 500;
    color: #1a4d2e;
    margin-bottom: 10px;
}

.product-card .btn-cart,
.product-card form button {
    background: var(--accent);
    color: white;
    border: none;
    padding: 8px 15px;
    border-radius: 6px;
    cursor: pointer;
    transition: 0.2s;
}

.product-card .btn-cart:hover,
.product-card form button:hover {
    background: #e68900;
}

/* Badge promo */
.product-card .promo-badge {
    position: absolute;
    top: 10px;
    left: 10px;
    background: var(--accent);
    color: white;
    padding: 5px 10px;
    border-radius: 8px;
    font-size: 0.8rem;
    font-weight: bold;
}

/* ===== Responsive ===== */
@media(max-width:900px) {
    .shop-products {
        grid-template-columns: repeat(2, 1fr); /* 2 par ligne tablette */
    }
}

@media(max-width:600px) {
    .shop-products {
        grid-template-columns: 1fr;
    }
}

/* Boutique: images produits */
.product-card-img {
    width: 100%;
    height: auto; /* ou auto si tu veux que la hauteur s’adapte */
    object-fit: cover; /* cover remplit la box sans laisser de vide */
    border-radius: 6px;
    margin-bottom: 10px;
}


/* Login container centré et responsive */
.login-container {
    max-width: 400px;
    width: 100%;              /* 🔥 important */
    margin: 50px auto;
    padding: 20px;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
    box-sizing: border-box;
}

/* champs */
.login-container input {
    width: 100%;
    padding: 12px;
    margin-bottom: 15px;
    border-radius: 5px;
    border: 1px solid #ccc;
    font-size: 16px; /* 🔥 évite zoom iPhone */
    box-sizing: border-box;
}

/* bouton */
.login-container button {
    width: 100%;
    padding: 12px;
    background-color: #007bff;
    color: #fff;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 16px;
}

/* MOBILE */
@media (max-width: 480px) {
    .login-container {
        margin: 20px 10px;   /* 🔥 évite débordement */
        padding: 15px;
    }
}


.table td, .table th {
    padding: 12px 15px; /* espace horizontal et vertical */
    text-align: left;
}


/* SUPPRIMER LOGO NAVBAR */
.logo{
    display:none;
}

.top-bar{
    justify-content:space-between;
}

/* donne plus de place à la recherche */
.search-container{
    width:70%;
}


 /* Menu Overlay depuis la gauche */

/* Afficher le menu */
#menuOverlay.active {
    transform: translateX(0);
}

/* Masquer par défaut */
.hidden {
    display: none;
}

/* Scrollbar discrète */
#menuOverlay::-webkit-scrollbar {
    width: 6px;
}
#menuOverlay::-webkit-scrollbar-thumb {
    background: rgba(0,0,0,0.3);
    border-radius: 3px;
}
#menuOverlay::-webkit-scrollbar-thumb:hover {
    background: rgba(0,0,0,0.5);
}

/* Menu Content */
#menuOverlay .menuContent {
    list-style: none;
    padding: 0;
    margin: 0;
    flex: 1;
}

/* Liens du menu */
#menuOverlay .menuContent li {
    margin-bottom: 20px;
}

#menuOverlay .menuContent li a {
    text-decoration: none;
    color: #333;
    font-weight: 500;
    font-size: 16px;
    display: flex;
    align-items: center;
    transition: color 0.2s;
}

#menuOverlay .menuContent li a i {
    margin-right: 12px;
    font-size: 18px;
}

/* Hover */
#menuOverlay .menuContent li a:hover {
    color: #ff6600; /* couleur dynamique au hover */
}

/* Boutons Connexion / Inscription stylés */
#menuOverlay .menuContent li a.login-btn,
#menuOverlay .menuContent li a.register-btn {
    display: block;
    padding: 10px 15px;
    border-radius: 5px;
    text-align: center;
    color: #fff;
    margin-bottom: 15px;
}



/* Bouton menu hamburger */
.menu-toggle{
    position:absolute;
    left:15px;   /* 🔥 à gauche */
    top:34%;
    transform:translateY(-50%); /* centré verticalement */

    background:#000;
    color:#fff;
    border:none;
    border-radius:6px;
    cursor:pointer;

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

    width:40px;
    height:40px;

    z-index:0; /* 🔥 au-dessus de tout */
}


/* Logo */
.logo { flex: 0 0 auto; }






/* Slide menu */
#menuOverlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 280px;
    height: 100vh;
    background: #fff;
    box-shadow: 3px 0 15px rgba(0,0,0,0.2);
    overflow-y: auto;
    transition: transform 0.3s ease;
    transform: translateX(-100%);
    z-index: 9999;
    padding: 30px 20px;
    font-family: 'Poppins', sans-serif;
    display: flex;
    flex-direction: column;
}
#menuOverlay.active { transform: translateX(0); }
.hidden { display: none; }

/* Scrollbar discrète */
#menuOverlay::-webkit-scrollbar { width: 6px; }
#menuOverlay::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.3); border-radius: 3px; }
#menuOverlay::-webkit-scrollbar-thumb:hover { background: rgba(0,0,0,0.5); }

/* Menu content */
#menuOverlay .menuContent { list-style: none; padding: 0; margin: 0; flex: 1; }
#menuOverlay .menuContent li { margin-bottom: 20px; }
#menuOverlay .menuContent li a {
    text-decoration: none; color: #333; font-weight: 500; font-size: 16px;
    display: flex; align-items: center; transition: color 0.2s;
}
#menuOverlay .menuContent li a i { margin-right: 12px; font-size: 18px; }
#menuOverlay .menuContent li a:hover { color: #ff6600; }

/* Boutons Connexion / Inscription */
#menuOverlay .menuContent li a.login-btn { background-color: #007bff; color: #fff; padding: 10px 15px; border-radius: 5px; text-align: center; }
#menuOverlay .menuContent li a.register-btn { background-color: #065218; color: #fff; padding: 10px 15px; border-radius: 5px; text-align: center; }


/* Navbar links desktop */
.nav-links { display: flex; gap: 15px; padding: 10px 20px; }
.nav-links a.active { color: #ff6600b7; }


.container h1{
    margin:30px 0 15px;
    color:var(--primary);
}

.container p{
    line-height:1.6;
    color:#555;
}

  /* ===== STYLE KAMBILY ===== */

.kambily-card {
    height: 130px; /* avant 160px → réduit */
}

.section-title {
    text-align: center;
    margin-bottom: 25px;
}

/* GRID */
.kambily-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px; /* réduit espace */
}

/* CARD */
.kambily-card {
    position: relative;
    height: 160px;
    border-radius: 10px;
    overflow: hidden;
}

/* IMAGE */
.kambily-card img {
    width: 100%;
    height: 100%;
    /* garde */
    object-fit: contain;
background: #f5f5f5;
}

/* OVERLAY */
.kambily-overlay {
    position: absolute;
    bottom: 0;
    width: 100%;
    padding: 8px;
    background: linear-gradient(to top, rgba(0,0,0,0.6), transparent);
    text-align: center;
}

.kambily-overlay h3 {
    color: white;
    font-size: 14px;
}

/* HOVER */
.kambily-card:hover img {
    transform: scale(1.1);
}

/* RESPONSIVE */
@media(max-width:1024px){
    .kambily-grid {
        grid-template-columns: repeat(3, 2fr);
    }
}

@media(max-width:768px){
    .kambily-grid {
        grid-template-columns: repeat(2, 2fr);
    }
}

@media(max-width:500px){
     .kambily-grid {
        grid-template-columns: repeat(2, 2fr); /* ✅ 2 catégories */
        gap: 10px; /* réduit l’espace */
    }


}


/* PAGE CONDITIONS */

.conditions-container {
    padding: 40px 5%;
}

.conditions-title {
    text-align: center;
    color: #1a4d2e;
    margin-bottom: 30px;
}

.conditions-box {
    max-width: 800px;
    margin: auto;
    background: #fff;
    padding: 30px;
    border-radius: 12px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.05);
    line-height: 1.7;
}

.conditions-box h3 {
    margin-top: 20px;
    color: #1a4d2e;
}

.conditions-box p {
    margin-top: 8px;
    color: #444;
}

.conditions-box a {
    color: #ff9800;
    text-decoration: none;
    font-weight: 500;
}

.conditions-box a:hover {
    text-decoration: underline;
}

.intro {
    font-size: 16px;
    margin-bottom: 15px;
}

.search-container {
    padding: 30px 5%;
}

.search-title {
    margin-bottom: 20px;
    font-size: 22px;
}

.search-title span {
    color: #ff9800;
}

/* GRID */
.search-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 15px;
}

/* CARD */
.search-card {
    background: #fff;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 3px 10px rgba(0,0,0,0.08);
    transition: 0.3s;
}

.search-card:hover {
    transform: translateY(-5px);
}

/* IMAGE */
.search-image {
    height: 180px;
    overflow: hidden;
}

.search-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* INFO */
.search-info {
    padding: 10px;
}

.search-info h4 {
    font-size: 15px;
    margin-bottom: 5px;
}

.price {
    color: #1a4d2e;
    font-weight: bold;
    margin-bottom: 10px;
}

/* BUTTON */
.btn-view {
    display: inline-block;
    padding: 6px 10px;
    background: #ff9800;
    color: #fff;
    border-radius: 5px;
    text-decoration: none;
    font-size: 13px;
}

.btn-view:hover {
    background: #e68900;
}

/* NO RESULT */
.no-results {
    text-align: center;
    width: 100%;
}

/* RESPONSIVE */
@media(max-width:1024px){
    .search-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media(max-width:768px){
    .search-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media(max-width:500px){
    .search-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }

    .search-image {
        height: 140px;
    }
}



/* GRID PRODUITS SIMILAIRES */
.related-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 15px;
    margin-top: 20px;
}

/* CARD */
.related-card {
    background: #fff;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    transition: 0.3s;
}

.related-card:hover {
    transform: translateY(-3px);
}

/* IMAGE */
.related-card img {
    width: 100%;
    height: 140px; /* 🔥 réduit la hauteur */
    object-fit: cover;
}

/* CONTENU */
.related-info {
    padding: 8px;
}

.related-info h4 {
    font-size: 14px;
    margin-bottom: 5px;
}

.related-info .price {
    font-size: 13px;
    color: #1a4d2e;
    font-weight: bold;
}

/* RESPONSIVE */
@media(max-width:1024px){
    .related-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media(max-width:768px){
    .related-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media(max-width:500px){
    .related-grid {
        grid-template-columns: repeat(2, 1fr); /* 2 par ligne mobile */
        gap: 10px;
    }

    .related-card img {
        height: 120px;
    }
}

.table-responsive{
    width: 100%;
    overflow-x: auto;
}

.orders-table{
    width: 100%;
    border-collapse: collapse;
    min-width: 600px; /* empêche l’écrasement */
}



.hero-container {
    position: relative;
    height: 450px;
    overflow: hidden;
}

/* SLIDES */
.slide {
    position: absolute;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 1s ease;
}

.slide.active {
    opacity: 1;
}

/* IMAGE + DARK OVERLAY */
.slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(1);
    transition: transform 6s ease;
}

.slide::after {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.4);
    top: 0;
    left: 0;
}

.slide.active img {
    transform: scale(1.1);
}

/* TEXT */
.hero-overlay {
    position: absolute;
    z-index: 2;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.hero-text {
    text-align: center;
    color: #fff;
    animation: fadeUp 1s ease;
}

.hero-text h1 {
    font-size: 36px;
    font-weight: bold;
}

.hero-text p {
    margin: 10px 0 20px;
    font-size: 18px;
}

/* BTN */
.btn-cta {
    background: var(--accent);
    color: #fff;
    padding: 12px 25px;
    border-radius: 30px;
    text-decoration: none;
    transition: 0.3s;
}

.btn-cta:hover {
    background: #ff7a00;
}

/* NAV */
.nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    font-size: 30px;
    background: rgba(0,0,0,0.5);
    color: white;
    border: none;
    padding: 10px;
    cursor: pointer;
    z-index: 3;
    border-radius: 50%;
}

.prev { left: 15px; }
.next { right: 15px; }

/* DOTS */
.dots {
    position: absolute;
    bottom: 15px;
    width: 100%;
    text-align: center;
    z-index: 3;
}

.dot {
    width: 10px;
    height: 10px;
    margin: 5px;
    display: inline-block;
    background: rgba(255,255,255,0.5);
    border-radius: 50%;
    cursor: pointer;
}

.dot.active {
    background: white;
}

/* ANIMATION */
@keyframes fadeUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* MOBILE */
@media(max-width:768px){
    .hero-container {
        height: 260px;
    }

    .hero-text h1 {
        font-size: 20px;
    }

    .hero-text p {
        font-size: 14px;
    }
}


.products-container {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* Desktop */
    gap: 20px;
}

/* Tablette */
@media (max-width: 992px) {
    .products-container {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* Mobile */
@media (max-width: 576px) {
    .products-container {
        grid-template-columns: repeat(2, 1fr); /* ✅ 2 produits par ligne */
        gap: 12px;
    }

    .product-item {
        padding: 10px;
    }

    .product-item h3 {
        font-size: 14px;
    }

    .product-item .price {
        font-size: 13px;
    }

    .btn-add {
        font-size: 12px;
        padding: 6px;
    }
}


.product-item {
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.08);
    transition: 0.3s;
}

.product-item:hover {
    transform: translateY(-5px);
}

.hero-slider {
    width: 100%;
    height: 420px; /* 🔥 IMPORTANT */
    overflow: hidden;
    position: relative;
    margin-bottom: 40px; /* espace avec catégories */
}

.hero-slider .slide {
    position: absolute;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 0.6s ease;
}

.hero-slider .slide.active {
    opacity: 1;
    position: relative;
}

.hero-slider img {
    width: 100%;
    height: 420px;
    object-fit: cover;
    display: block;
}

.hero-slider .prev,
.hero-slider .next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0,0,0,0.4);
    color: white;
    border: none;
    font-size: 30px;
    padding: 10px 15px;
    cursor: pointer;
    z-index: 10;
    border-radius: 50%;
    transition: 0.3s;
}

.hero-slider .prev:hover,
.hero-slider .next:hover {
    background: rgba(0,0,0,0.7);
}

/* position gauche / droite */
.hero-slider .prev {
    left: 15px;
}

.hero-slider .next {
    right: 15px;
}

.hero-slider {
    position: relative;
    width: 100%;
    height: 400px;
    overflow: hidden;
}

/* IMAGE */
.hero-slider .slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* 📱 MOBILE */
@media (max-width: 768px) {
    .hero-slider {
        height: 220px; /* plus petit sur mobile */
    }
}

.hero-slider {
    position: relative;
    width: 100%;
    height: 400px;
    overflow: hidden;
}

/* IMAGE */
.hero-slider .slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* 📱 MOBILE */
@media (max-width: 768px) {
    .hero-slider {
        height: 220px; /* plus petit sur mobile */
    }
}
@media (max-width: 768px) {

    .hero-text h1 {
        margin-bottom: 15px; /* espace sous titre */
        line-height: 1.2;
    }

    .hero-text p {
        margin-bottom: 18px; /* espace sous description */
    }

    .btn-cta {
        margin-top: 20px; /* 🔥 DESCEND LE BOUTON */
        display: inline-block;
    }
}

/* ===== Avis clients ===== */

.reviews-section {
    max-width: 800px;
    margin: 40px auto;
    padding: 0 15px;
}

.reviews-section h3 {
    margin-bottom: 20px;
    color: #033f17;
}

/* Carte avis */
.review-card {
    background: white;
    padding: 15px;
    border-radius: 10px;
    margin-bottom: 15px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
}

/* Header avis */
.review-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
}

.review-header strong {
    font-size: 14px;
}

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

/* Etoiles */
.review-stars {
    margin: 5px 0;
}

/* Formulaire */
.review-form {
    background: white;
    padding: 20px;
    border-radius: 10px;
    margin-bottom: 25px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
}

.review-form textarea {
    width: 100%;
    min-height: 80px;
    border-radius: 6px;
    border: 1px solid #ccc;
    padding: 10px;
}

.review-form select {
    padding: 8px;
    border-radius: 6px;
    border: 1px solid #ccc;
}

/* Mobile */
@media (max-width: 600px) {
    .review-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 5px;
    }

    .review-card {
        padding: 12px;
    }
}

.categories-section {
    margin: 60px 0;
}

.categories-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 25px;
    margin-top: 20px;
    text-align: center;
}

.category-card {
    text-decoration: none;
    color: #222;
    transition: 0.3s;
}

.category-card:hover {
    transform: translateY(-5px);
}

.category-circle {
    width: 110px;
    height: 110px;
    margin: auto;
    border-radius: 50%;
    padding: 6px;
    border: 3px solid #8bc34a; /* vert comme ton image */
    display: flex;
    align-items: center;
    justify-content: center;
    background: white;
}

.category-circle img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
}

.category-card h4 {
    margin-top: 10px;
    font-size: 15px;
}

.category-card .count {
    font-size: 13px;
    color: gray;
}

/* MOBILE */
@media (max-width: 600px) {
    .category-circle {
        width: 85px;
        height: 85px;
    }

    .categories-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 15px;
    }
}


/* ===== PAGE À PROPOS ===== */

.about-page {
    padding: 60px 5%;
    background: #f8f9fa;
}

/* TITRE */
.about-title {
    text-align: center;
    margin-bottom: 20px;
}

.about-title h1 {
    font-size: 2.5rem;
    color: var(--primary);
}

.about-title p {
    color: #555;
    margin-top: 10px;
}

/* HERO IMAGE */
.about-hero {
    margin: 40px 0;
    border-radius: 12px;
    overflow: hidden;
}

.about-hero img {
    width: 100%;
    height: 400px;
    object-fit: cover;
    display: block;
    border-radius: 12px;
}

/* SECTION TEXTE + IMAGE */
.about-section {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    align-items: center;
    margin-top: 40px;
}

.about-section img {
    width: 100%;
    height: 350px;
    object-fit: cover;
    border-radius: 12px;
}

/* TEXTE */
.about-text h2 {
    color: var(--primary);
    margin-bottom: 15px;
}

.about-text p {
    line-height: 1.7;
    color: #555;
}

/* VALEURS */
.about-values {
    margin-top: 60px;
    text-align: center;
}

.about-values h2 {
    margin-bottom: 30px;
    color: var(--primary);
}

.values-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 25px;
}

.value-card {
    background: #fff;
    padding: 25px;
    border-radius: 12px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
    transition: 0.3s;
}

.value-card:hover {
    transform: translateY(-5px);
}

.value-card i {
    font-size: 30px;
    color: var(--accent);
    margin-bottom: 10px;
}

.value-card h3 {
    margin-bottom: 10px;
}

/* GALERIE SLIDER SIMPLE */
.about-slider {
    margin-top: 60px;
    overflow: hidden;
    border-radius: 12px;
}

.about-slider img {
    width: 100%;
    height: 350px;
    object-fit: cover;
}

/* RESPONSIVE */
@media(max-width: 900px) {
    .about-section {
        grid-template-columns: 1fr;
    }

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

    .about-hero img {
        height: 250px;
    }

    .about-section img {
        height: 250px;
    }
}