/* ===================== VARIABLES & RESET (global) ===================== */
:root{
    --red: #fe446d;
    --white: #FFFFFF;
    --black: #223a51;
    --gray: #f5f5f5;
    --dark-gray: #333333;
    --light-gray: #e0e0e0;
}
*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%}
body{
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,Ubuntu,"Helvetica Neue",Arial,"Noto Sans","Liberation Sans",sans-serif;
  line-height:1.6;color:var(--dark-gray);background:#fff
}
a{color:inherit;text-decoration:none}
img{max-width:100%;height:auto;display:block}
ul{list-style:none}
.container{width:90%;max-width:1200px;margin:0 auto}

/* ===================== BOUTONS ===================== */
.btn{display:inline-block;background:var(--red);color:#fff;padding:10px 20px;border:0;border-radius:4px;cursor:pointer;font-weight:600;transition:.3s}
.btn:hover{background:#cc0000;transform:translateY(-2px)}
.btn-link{color:var(--red);font-weight:600}

/* ===================== TITRES SECTIONS ===================== */
.section-title{ text-align:center;margin:30px 0;font-size:2rem;color:var(--dark-gray);position:relative }
.section-title::after{content:'';display:block;width:60px;height:3px;background:var(--red);margin:10px auto}

/* ===================== HEADER (structure générale) ===================== */
.header{background:#fff;padding:15px 0;position:sticky;top:0;z-index:1000;box-shadow:0 2px 10px rgba(0,0,0,.1)}
.header .container{display:flex;justify-content:space-between;align-items:center}
.main-nav ul{display:flex;gap:15px}
.main-nav a{color:#000;font-weight:500;transition:color .25s}
.main-nav a:hover,.main-nav a.active{color:var(--red)}
.header-actions{display:flex;align-items:center;gap:15px}

/* ===================== NAV MOBILE (conservé) ===================== */
.mobile-menu,.mobile-overlay{display:none}
@media (max-width:992px){
  /* bouton burger (le header ajoute déjà ses styles inline ; on garde cohérent) */
  .mobile-menu-toggle{
    display:flex;flex-direction:column;justify-content:center;align-items:center;
    width:40px;height:40px;background:none;border:0;cursor:pointer;padding:0;color:var(--black)
  }
  .mobile-menu-toggle span{
    display:block;width:25px;height:3px;background:var(--black);margin:2px 0;border-radius:2px;transition:.3s
  }

  /* tiroir */
  .mobile-menu{display:block;position:fixed;top:0;left:-100%;width:80%;max-width:320px;height:100vh;background:#fff;z-index:1001;transition:left .3s;overflow-y:auto;box-shadow:2px 0 10px rgba(0,0,0,.1)}
  .mobile-menu.active{left:0}
  .mobile-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.5);z-index:1000;opacity:0;visibility:hidden;transition:opacity .3s,visibility .3s}
  .mobile-overlay.active{opacity:1;visibility:visible}
  .mobile-menu-header{display:flex;justify-content:space-between;align-items:center;padding:20px;border-bottom:1px solid #eee;background:#fff}
  .mobile-menu-close{background:none;border:0;color:#000;font-size:1.5rem;cursor:pointer;padding:5px}
  .mobile-nav{padding:20px}
  .mobile-nav li{margin-bottom:10px}
  .mobile-nav a{display:flex;align-items:center;padding:12px 15px;border-radius:6px;color:#000;transition:background-color .25s}
  .mobile-nav a:hover,.mobile-nav a.active{background:#f8f9fa;color:var(--red)}
  .mobile-nav a i{margin-right:12px;width:20px;text-align:center}
  body.no-scroll{overflow:hidden}

  /* on cache la nav desktop sur mobile */
  .main-nav{display:none}
}

/* ===================== FOOTER ===================== */
.footer{background:var(--black);color:#fff;padding:40px 0 20px;margin-top:60px}
.footer-columns{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:30px;margin-bottom:30px}
.footer-column h3{color:var(--red);margin-bottom:15px;font-size:1.2rem}
.footer-column p{margin-bottom:15px;line-height:1.6}
.footer-column ul li{margin-bottom:10px}
.footer-column ul li a:hover{color:var(--red)}
.social-icons{display:flex;gap:15px;margin-top:15px}
.social-icons a{color:#fff;font-size:1.2rem;transition:color .25s}
.social-icons a:hover{color:var(--red)}
.footer-bottom{text-align:center;padding-top:20px;border-top:1px solid #333}

/* ===================== RECHERCHE (home) ===================== */
.search-section{padding:30px 0 20px;border-bottom:1px solid #eaeaea;text-align:center;background:#f9f9f9;margin-bottom:10px}
.search-form-home{display:flex;justify-content:center;align-items:center;gap:10px;flex-wrap:wrap}
.search-form-home input[type="text"]{padding:10px;border:1px solid #ccc;border-radius:6px;width:250px;max-width:100%}
.search-form-home .btn-search{background:var(--red);color:#fff;padding:10px 20px;border:0;border-radius:6px;cursor:pointer;transition:.25s}
.search-form-home .btn-search:hover{background:#c0392b}

/* ===================== PROMOTIONS / SLIDER (home) ===================== */
.promo-section{margin:40px 0;position:relative}
.promo-slider{position:relative;overflow:hidden;border-radius:12px}
.promo-slides{display:flex;width:100%;transition:transform .55s ease}
.promo-slide{flex:0 0 100%;position:relative}
.promo-slide img,.promo-slide video{width:100%;height:auto;object-fit:cover;position:relative;z-index:1}
.promo-caption{
  position:absolute;top:50%;left:5%;transform:translateY(-50%);
  display:flex;flex-direction:column;align-items:flex-start;text-align:left;
  color:#fff;background:transparent;z-index:2;max-width:min(90%,640px);
  text-shadow:1px 1px 3px rgba(0,0,0,.6)
}
.promo-caption h2{margin:0 0 8px;font-size:clamp(1.25rem,3.2vw,2.25rem);line-height:1.2;font-weight:700}
.promo-caption p{margin:0;font-size:clamp(.95rem,2.2vw,1.1rem);line-height:1.45;max-width:60ch}
.promo-btn{margin-top:12px;padding:10px 18px;border-radius:6px;background:var(--red);color:#fff;font-weight:600;box-shadow:0 2px 6px rgba(0,0,0,.15);transition:transform .2s,background .2s}
.promo-btn:hover{background:#cc0000;transform:translateY(-2px)}
.promo-nav{
  position:absolute;top:50%;transform:translateY(-50%);background:rgba(0,0,0,.45);color:#fff;border:0;width:42px;height:42px;border-radius:50%;
  cursor:pointer;z-index:5;display:flex;align-items:center;justify-content:center;font-size:1.4rem;transition:.3s;opacity:0
}
.promo-prev{left:10px} .promo-next{right:10px}
.promo-slider:hover .promo-nav{opacity:1}
.promo-nav:hover{background:rgba(0,0,0,.65);transform:translateY(-50%) scale(1.1)}
.promo-dots{position:absolute;bottom:15px;left:50%;transform:translateX(-50%);display:flex;gap:10px;z-index:5}
.promo-dot{width:10px;height:10px;border-radius:50%;background:rgba(255,255,255,.6);border:0;cursor:pointer;transition:.3s}
.promo-dot.active{background:#fff;transform:scale(1.2)}

/* ===================== CATÉGORIES (home) ===================== */
.categories-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px;margin:0 0 40px}
.category-card{background:#fff;border-radius:8px;padding:20px;text-align:center;box-shadow:0 2px 10px rgba(0,0,0,.1);transition:transform .3s}
.category-card:hover{transform:translateY(-5px)}
/* 6 colonnes fixes sur desktop (demande) */
@media (min-width:1025px){
  .categories-rail{
    display:grid !important;
    grid-template-columns:repeat(6, 1fr) !important;
    gap:16px;
    overflow:visible;
    padding-bottom:0;
  }
  .categories-rail .category-card{flex:unset;max-width:none}
}
/* Rail mobile simple */
@media (max-width:640px){
  .categories-grid{display:flex;gap:12px;overflow-x:auto;-webkit-overflow-scrolling:touch;scroll-snap-type:x mandatory;padding-bottom:6px}
  .categories-grid .category-card{flex:0 0 calc(50% - 6px);max-width:calc(50% - 6px);scroll-snap-align:start}
}

/* ===================== PRODUITS / NOUVEAUTÉS (home) ===================== */
.product-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:16px;margin-bottom:40px}
.product-card{
  position:relative;display:flex;flex-direction:column;background:#fff;border-radius:8px;box-shadow:0 1px 6px rgba(0,0,0,.05);overflow:hidden
}
.product-link-img{display:block}
.product-link-img img{width:100%;height:190px;object-fit:cover}
.product-actions{
  position:absolute;top:10px;right:10px;display:flex;flex-direction:column;gap:10px;opacity:0;transition:opacity .3s
}
.product-card:hover .product-actions{opacity:1}
.btn-quickview,.product-actions .btn-whatsapp{
  background:#fff;color:#333;width:35px;height:35px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;border:0;cursor:pointer;box-shadow:0 2px 5px rgba(0,0,0,.1);transition:.25s
}
.btn-quickview:hover,.product-actions .btn-whatsapp:hover{background:var(--red);color:#fff}
.product-name{margin:6px 10px 2px;font-size:.98rem;font-weight:400;line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.product-name a{color:inherit}
.product-price{margin:4px auto 0;display:block;text-align:center;font-size:1rem;font-weight:700;color:var(--red)}
.whatsapp-btn-full{
  display:inline-block;width:100%;text-align:center;background:var(--red);color:#fff;
  padding:10px 15px;border-radius:8px;transition:background .3s,transform .2s;font-weight:bold;font-size:.95rem;box-shadow:0 2px 5px rgba(0,0,0,.1);margin:8px 10px 10px
}
.whatsapp-btn-full i{margin-right:8px;font-size:1rem}
.whatsapp-btn-full:hover{background:var(--red);transform:translateY(-2px);color:#fff}
#nouveautes{scroll-margin-top:90px}

/* ===================== PAGINATION (home) ===================== */
.pagination{display:flex;justify-content:center;align-items:center;margin-top:40px;gap:15px;flex-wrap:wrap}
.pagination-numbers{display:flex;gap:8px}
.pagination-link{
  display:flex;align-items:center;justify-content:center;min-width:40px;height:40px;padding:0 12px;border:1px solid var(--light-gray);border-radius:4px;color:var(--dark-gray);font-weight:500;transition:.25s
}
.pagination-link:hover{border-color:var(--red);color:var(--red)}
.pagination-link.active{background:var(--red);border-color:var(--red);color:#fff}
.pagination-link.prev,.pagination-link.next{background:var(--gray)}
.pagination-link.prev:hover,.pagination-link.next:hover{background:var(--red);color:#fff}
.no-products{grid-column:1/-1;text-align:center;padding:40px;color:var(--dark-gray)}

/* ===================== RESPONSIVE ===================== */
@media (max-width:1024px){ .product-grid{grid-template-columns:repeat(3,1fr)} }
@media (max-width:768px){
  .promo-nav{width:32px;height:32px;font-size:1.1rem}
  .promo-dots{gap:6px;bottom:10px}
  .promo-dot{width:8px;height:8px}
  .section-title{font-size:1.5rem}
}
@media (max-width:640px){
  .product-link-img img{height:180px}
  /* Home: grille 2 colonnes (pas de rail) */
  .product-grid.responsive-rail{
    display:grid !important;grid-template-columns:repeat(2,1fr) !important;gap:12px;overflow:visible !important;padding-bottom:0 !important
  }
}
@media (max-width:576px){
  .footer-columns{grid-template-columns:1fr}
  .pagination{flex-direction:column;gap:15px}
  .pagination-numbers{order:2}
  .pagination-link.prev,.pagination-link.next{order:1;width:100%;max-width:200px}
}