/* Épices du Cameroun — palette issue du logo
   Rouge piment #E30B22 · Safran (flamme) #F7A70B · Vert #3D612B */
:root{
  --red:#e30b22;--red-dark:#b30818;--saffron:#f7a70b;--saffron-dark:#d98c00;--green:#3d612b;--green-dark:#2c4720;
  --ink:#2a1a14;--muted:#7a6a5f;--cream:#fff8ec;--light:#fdf3e1;--border:#efe2cc;--dark:#2a1a14;
}
*{box-sizing:border-box}
body{overflow-x:clip;margin:0;font-family:Poppins,Inter,Arial,sans-serif;color:var(--ink);background:#fff}
a{text-decoration:none;color:inherit}
h1,h2,h3{line-height:1.2}
.container{width:min(1120px,92%);margin:auto}
.top{background:var(--green);color:#fff;text-align:center;padding:8px;font-size:13px}
.nav{border-bottom:3px solid var(--saffron);background:#fff;position:sticky;top:0;z-index:20}
.navin{height:84px;display:flex;align-items:center;justify-content:space-between;gap:25px}
.logo{height:70px;width:auto}
.links{display:flex;gap:22px;font-weight:600}
.links a:hover{color:var(--red)}
.actions{display:flex;align-items:center;gap:12px}
.btn{display:inline-block;border:0;border-radius:10px;padding:12px 18px;font-weight:700;cursor:pointer;font:inherit;font-weight:700;transition:background .2s,transform .1s}
.btn:active{transform:translateY(1px)}
.btn[disabled]{opacity:.5;cursor:not-allowed}
.primary{background:var(--red);color:#fff}.primary:hover{background:var(--red-dark)}
.secondary{background:var(--saffron);color:var(--ink)}.secondary:hover{background:var(--saffron-dark)}
.green{background:var(--green);color:#fff}.green:hover{background:var(--green-dark)}
.outline{border:1px solid var(--red);color:var(--red);background:#fff}.outline:hover{background:#fdecee}
.danger{background:#fdecee;color:var(--red-dark)}
.hero{background:linear-gradient(135deg,#fff 15%,var(--cream) 60%,#fbe8c4);padding:70px 0}
.hero-grid{display:grid;grid-template-columns:1.1fr .9fr;align-items:start;gap:45px}
.eyebrow{color:var(--red);font-weight:800;text-transform:uppercase;letter-spacing:2px}
.hero h1{font-size:52px;line-height:1.02;margin:12px 0}
.hero p{font-size:18px;color:var(--muted);line-height:1.7}
.hero-card{background:#fff;border-radius:28px;padding:25px;box-shadow:0 20px 60px #e30b2222;text-align:center}
.hero-card img{max-width:100%;height:270px;object-fit:contain}
.section{padding:55px 0}
.section h2{font-size:32px;margin:0 0 25px}
.section h2::after{content:"";display:block;width:60px;height:4px;border-radius:4px;margin-top:10px;background:linear-gradient(90deg,var(--red),var(--saffron))}
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.card{border:1px solid var(--border);border-radius:18px;overflow:hidden;background:#fff;transition:box-shadow .2s,transform .2s;display:block}
.card:hover{box-shadow:0 14px 40px #2a1a1418;transform:translateY(-2px)}
.pic{height:220px;background:var(--light);display:flex;align-items:center;justify-content:center}
.pic img{width:100%;height:100%;object-fit:cover}
.pic img.placeholder{object-fit:contain;padding:35px}
.cardbody{padding:16px}
.cardbody h3{margin:6px 0}
.tag{font-size:12px;color:var(--green);font-weight:800;text-transform:uppercase;letter-spacing:.5px}
.price{font-weight:800;font-size:18px;margin:7px 0;color:var(--ink)}
.price small{font-weight:600;color:var(--muted);font-size:13px}
.old{text-decoration:line-through;color:#999;font-size:14px;margin-right:6px;font-weight:600}
.sale{color:var(--red)}
.badge{display:inline-block;background:var(--cream);color:var(--saffron-dark);border:1px solid #f7d58f;border-radius:20px;padding:2px 10px;font-size:12px;font-weight:700}
.flash{padding:12px;border-radius:10px;background:#fff4dc;color:#7a4b00;border-left:4px solid var(--saffron);margin:20px 0}
.flash.error{background:#fdecee;color:var(--red-dark);border-left-color:var(--red)}
.footer{background:var(--dark);color:#fff;padding:45px 0;margin-top:50px;border-top:5px solid var(--saffron)}
.footergrid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:35px}
.footer a:hover{color:var(--saffron)}
.muted{color:var(--muted)}
.footer .muted{color:#cbb9a8}
.search{display:flex;gap:10px;margin-bottom:25px}
.input,.select,textarea{width:100%;padding:12px 14px;border:1px solid #e3d6c2;border-radius:9px;font:inherit;background:#fff}
.input:focus,.select:focus,textarea:focus{outline:2px solid var(--saffron);border-color:var(--saffron)}
label{font-weight:600;font-size:14px}
.formgrid{display:grid;grid-template-columns:1fr 1fr;gap:15px}
.full{grid-column:1/-1}
.table{width:100%;border-collapse:collapse;background:#fff}
.table th,.table td{padding:13px;border-bottom:1px solid var(--border);text-align:left;vertical-align:middle}
.table th{background:var(--cream);font-size:13px;text-transform:uppercase;letter-spacing:.5px}
.panel{background:#fff;border:1px solid var(--border);border-radius:16px;padding:22px}
.admin{background:#faf6ef;min-height:100vh}
.adminnav{background:var(--dark);color:#fff;padding:15px 0;border-bottom:4px solid var(--red)}
.adminnav .container{display:flex;justify-content:space-between;align-items:center;gap:15px;flex-wrap:wrap}
.adminnav nav a:hover{color:var(--saffron)}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.stat{padding:22px;background:#fff;border-radius:16px;border:1px solid var(--border);border-top:4px solid var(--saffron)}
.stat strong{font-size:30px;display:block;color:var(--red)}
.cart-row{display:grid;grid-template-columns:2fr 1fr 1fr auto;gap:15px;align-items:center;padding:15px 0;border-bottom:1px solid var(--border)}
.wa{position:fixed;right:22px;bottom:22px;background:#25d366;color:#fff;width:58px;height:58px;border-radius:50%;display:grid;place-items:center;font-weight:900;box-shadow:0 8px 30px #0002;z-index:30}
.center{max-width:650px;margin:60px auto}
.pagination{margin-top:20px}
@media(max-width:850px){.links{display:none}.hero-grid{grid-template-columns:1fr}.hero h1{font-size:40px}.grid{grid-template-columns:repeat(2,1fr)}.stats{grid-template-columns:repeat(2,1fr)}.footergrid,.formgrid{grid-template-columns:1fr}.cart-row{grid-template-columns:1fr}.navin{height:72px}.logo{height:56px}}
@media(max-width:520px){.grid{grid-template-columns:1fr}.stats{grid-template-columns:1fr}}

.image-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:15px}
.image-item{border:1px solid var(--border);border-radius:12px;padding:10px;background:#fff}
.image-item img{width:100%;height:150px;object-fit:cover;border-radius:8px;margin-bottom:8px}
.product-gallery{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.product-gallery img{width:100%;height:300px;object-fit:cover;border-radius:12px;background:var(--light)}
.product-gallery img:only-child{grid-column:1/-1;height:420px}
@media(max-width:850px){.image-grid{grid-template-columns:repeat(2,1fr)}.product-gallery{grid-template-columns:1fr}.product-gallery img{height:320px}}

/* Slider */
.slider{position:relative;width:100vw;margin-left:calc(50% - 50vw);height:clamp(380px,52vw,620px);overflow:hidden;background:var(--dark)}
.slider-track,.slide{position:absolute;inset:0}
.slide{background-size:cover;background-position:center;opacity:0;transform:scale(1.03);transition:opacity .65s ease,transform 5.2s ease;display:flex;align-items:center}
.slide.active{opacity:1;transform:scale(1)}
.slide-overlay{position:absolute;inset:0;background:linear-gradient(90deg,rgba(42,26,20,.85) 0%,rgba(179,8,24,.5) 45%,rgba(247,167,11,.1) 100%)}
.slide-content{position:relative;z-index:2;width:min(1120px,92%);margin:auto;color:#fff;padding-right:45%}
.slide-content .eyebrow{color:var(--saffron)}
.slide-content h1{font-size:clamp(36px,5vw,68px);line-height:1.02;margin:12px 0}
.slide-content p{font-size:clamp(16px,2vw,21px);line-height:1.6;color:#fff;margin-bottom:25px}
.slider-btn{position:absolute;z-index:4;top:50%;transform:translateY(-50%);border:1px solid rgba(255,255,255,.5);background:rgba(0,0,0,.25);color:#fff;width:48px;height:48px;border-radius:50%;font-size:34px;line-height:1;cursor:pointer;backdrop-filter:blur(4px)}
.slider-btn:hover{background:var(--red)}
.slider-btn.prev{left:22px}.slider-btn.next{right:22px}
.slider-dots{position:absolute;z-index:4;left:50%;bottom:22px;transform:translateX(-50%);display:flex;gap:8px}
.dot{width:11px;height:11px;border:1px solid #fff;border-radius:50%;background:transparent;padding:0;cursor:pointer}
.dot.active{background:var(--saffron);border-color:var(--saffron);transform:scale(1.2)}
@media(max-width:700px){.slider{height:500px}.slide-overlay{background:linear-gradient(90deg,rgba(42,26,20,.85),rgba(179,8,24,.45))}.slide-content{padding:0 8%;text-align:center}.slide-content h1{font-size:40px}.slider-btn{width:40px;height:40px;font-size:28px}.slider-btn.prev{left:10px}.slider-btn.next{right:10px}}

/* Catégories */
.cat-card{padding:25px;text-align:center;background:linear-gradient(160deg,#fff,var(--cream))}


/* Sélecteur de variations (boutique) */
.variant-group{margin:18px 0}
.variant-group .variant-name{font-weight:700;margin-bottom:8px;display:block}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip input{position:absolute;opacity:0;pointer-events:none}
.chip span{display:inline-block;padding:9px 16px;border:2px solid var(--border);border-radius:30px;cursor:pointer;font-weight:600;background:#fff;transition:all .15s}
.chip span:hover{border-color:var(--saffron)}
.chip input:checked+span{border-color:var(--red);background:#fdecee;color:var(--red-dark)}
.chip input:focus-visible+span{outline:2px solid var(--saffron);outline-offset:2px}
.chip.unavailable span{opacity:.45;text-decoration:line-through}
.stock-info{font-weight:600}
.stock-info.out{color:var(--red)}
.stock-info.in{color:var(--green)}
.variant-meta{font-size:14px;color:var(--muted);margin-top:4px}

/* Variations (admin) */
.attr-picker{display:flex;flex-wrap:wrap;gap:10px;margin:10px 0 15px}
.attr-picker label{display:inline-flex;gap:6px;align-items:center;background:var(--cream);border:1px solid var(--border);padding:8px 12px;border-radius:30px;cursor:pointer}
.variants-wrap{overflow-x:auto}
.variants-table td,.variants-table th{padding:8px}
.variants-table .input,.variants-table .select{padding:9px 10px;min-width:95px}
.variants-table .num{width:120px}
.small-btn{padding:7px 11px;font-size:13px}
.hint{font-size:13px;color:var(--muted);margin:4px 0 0}
.value-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:10px;margin:10px 0}
.pill{display:inline-block;background:var(--cream);border:1px solid var(--border);border-radius:20px;padding:3px 10px;margin:2px;font-size:13px}
.description{line-height:1.7;color:var(--ink);margin:10px 0 18px;max-height:none}

/* Utilisateurs (admin) */
.admin-me{background:rgba(255,255,255,.1);padding:6px 10px;border-radius:20px}
.admin-me small{color:#cbb9a8}
.role-badge{display:inline-block;border-radius:20px;padding:3px 10px;font-size:12px;font-weight:700}
.role-admin{background:#fdecee;color:var(--red-dark)}
.role-manager{background:#fff4dc;color:#8a5a00}
.role-sales{background:#e9f1e4;color:var(--green-dark)}
.status{font-weight:700;font-size:13px}.status.on{color:var(--green)}.status.off{color:var(--red)}

/* Menu principal */
.top a{color:#fff;font-weight:600}
.links{align-items:center}
.links>a,.dropdown-toggle{padding:8px 4px;border-bottom:2px solid transparent}
.links a.current,.dropdown-toggle.current{color:var(--red);border-bottom-color:var(--red)}
.dropdown{position:relative}
.dropdown-toggle{background:none;border:0;font:inherit;font-weight:600;color:inherit;cursor:pointer;border-bottom:2px solid transparent}
.dropdown-toggle:hover{color:var(--red)}
.dropdown-menu{position:absolute;top:100%;left:50%;transform:translateX(-50%);min-width:250px;max-height:70vh;overflow-y:auto;background:#fff;border:1px solid var(--border);border-top:3px solid var(--saffron);border-radius:0 0 12px 12px;box-shadow:0 18px 40px #2a1a1420;padding:8px 0;display:none;z-index:40}
.dropdown:hover .dropdown-menu,.dropdown:focus-within .dropdown-menu,.dropdown.open .dropdown-menu{display:block}
.dropdown-menu a{display:flex;justify-content:space-between;gap:12px;padding:9px 18px;font-weight:500}
.dropdown-menu a:hover{background:var(--cream);color:var(--red)}
.dropdown-menu small{color:var(--muted);background:var(--light);border-radius:10px;padding:0 8px;font-size:12px;line-height:20px}
.menu-toggle{display:none;background:none;border:1px solid var(--border);border-radius:8px;width:44px;height:40px;padding:9px;cursor:pointer;flex-direction:column;justify-content:space-between}
.menu-toggle span{display:block;height:2px;background:var(--ink);border-radius:2px}
@media(max-width:850px){
  .navin{flex-wrap:wrap;height:auto;min-height:72px;padding:8px 0;gap:10px}
  .menu-toggle{display:flex;order:3}
  .actions{order:2;margin-left:auto}
  .links{display:none;order:4;width:100%;flex-direction:column;align-items:stretch;gap:0;border-top:1px solid var(--border);padding:6px 0}
  .links.open{display:flex}
  .links>a,.dropdown-toggle{padding:12px 4px;text-align:left;width:100%;border-bottom:1px solid var(--border)}
  .links a.current,.dropdown-toggle.current{border-bottom-color:var(--border)}
  .dropdown-menu{position:static;transform:none;box-shadow:none;border:0;border-radius:0;max-height:none;padding:0 0 0 12px}
  .dropdown:hover .dropdown-menu,.dropdown:focus-within .dropdown-menu{display:none}
  .dropdown.open .dropdown-menu{display:block}
}

/* Pagination */
.pager{display:flex;flex-direction:column;align-items:center;gap:10px;margin-top:30px}
.pager-info{margin:0;color:var(--muted);font-size:14px}
.pager-list{list-style:none;display:flex;flex-wrap:wrap;justify-content:center;gap:6px;margin:0;padding:0}
.pager-link{display:inline-flex;align-items:center;justify-content:center;min-width:40px;height:40px;padding:0 12px;border:1px solid var(--border);border-radius:10px;background:#fff;font-weight:600;font-size:14px;color:var(--ink);transition:all .15s}
a.pager-link:hover{border-color:var(--red);color:var(--red)}
.pager-link.active{background:var(--red);border-color:var(--red);color:#fff}
.pager-link.disabled{color:#c4b8ab;background:var(--cream);cursor:not-allowed}
.pager-link.dots{border:0;background:none;min-width:20px}

/* Page contact */
.contact-head{text-align:center;max-width:640px;margin:0 auto 35px}
.contact-head h1{font-size:40px;margin:8px 0}
.contact-grid{display:grid;grid-template-columns:1fr 1.2fr;gap:25px;align-items:start}
.contact-cards{display:grid;gap:15px}
.contact-card{display:flex;gap:15px;align-items:flex-start;background:#fff;border:1px solid var(--border);border-left:4px solid var(--saffron);border-radius:14px;padding:18px;transition:box-shadow .2s}
a.contact-card:hover{box-shadow:0 10px 30px #2a1a1415;border-left-color:var(--red)}
.contact-icon{font-size:26px;line-height:1}
.social-links{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.footer .socials{display:flex;gap:12px;flex-wrap:wrap}
@media(max-width:850px){.contact-grid{grid-template-columns:1fr}.contact-head h1{font-size:32px}}
@media(min-width:851px){
  .dropdown-menu{min-width:520px;max-height:none;overflow:visible;padding:10px}
  .dropdown:hover .dropdown-menu,.dropdown:focus-within .dropdown-menu,.dropdown.open .dropdown-menu{display:grid;grid-template-columns:1fr 1fr;gap:2px 8px}
  .dropdown-menu a{padding:9px 12px;border-radius:8px;white-space:nowrap}
  .dropdown::after{content:"";position:absolute;left:0;right:0;top:100%;height:6px}
}

/* En-tête de section avec lien « voir tout » */
.section-head{display:flex;justify-content:space-between;align-items:flex-end;gap:15px;flex-wrap:wrap;margin-bottom:25px}
.section-head h2{margin:0}
.see-all{color:var(--red);font-weight:700;white-space:nowrap}
.see-all:hover{color:var(--red-dark);text-decoration:underline}
.dropdown-menu .dropdown-all{grid-column:1/-1;justify-content:center;border-top:1px solid var(--border);margin-top:4px;color:var(--red);font-weight:700}