/* ═══════════════════════════════════════════════════════════
   TAZA PRINT v2 · CSS Complet · Thème Marocain Premium
   ═══════════════════════════════════════════════════════════ */

/* ── VARIABLES ─────────────────────────────────────────── */
:root {
  --vert:       #1a4a2e;
  --vert-c:     #2d7a4f;
  --vert-pale:  #e8f4ed;
  --or:         #c8973a;
  --or-c:       #e0ab52;
  --or-pale:    #fdf6e8;
  --or-dark:    #9a6e22;
  --rouge:      #a0272a;
  --rouge-c:    #c94040;
  --creme:      #faf6f0;
  --brun:       #6b4423;
  --noir:       #1a1209;
  --gris:       #7a7060;
  --gris-l:     #ede8e0;
  --blanc:      #ffffff;
  --radius:     12px;
  --radius-lg:  20px;
  --shadow-sm:  0 2px 10px rgba(26,74,46,.07);
  --shadow:     0 4px 24px rgba(26,74,46,.10);
  --shadow-lg:  0 12px 48px rgba(26,74,46,.16);
  --trans:      all .22s ease;
  --header-h:   74px;
  --nav-h:      48px;
}

/* ── RESET & BASE ───────────────────────────────────────── */
*,*::before,*::after { box-sizing:border-box;margin:0;padding:0; }
html { overflow-x:hidden; }
html { scroll-behavior:smooth;font-size:15px; }
body { font-family:'Tajawal',sans-serif;background:var(--creme);color:var(--noir);overflow-x:hidden;line-height:1.65; }
a { color:inherit;text-decoration:none;transition:color .18s; }
img { max-width:100%;display:block; }
input,select,textarea,button { font-family:inherit;font-size:inherit;outline:none; }
::-webkit-scrollbar { width:5px;height:5px; }
::-webkit-scrollbar-track { background:var(--or-pale); }
::-webkit-scrollbar-thumb { background:var(--or);border-radius:3px; }
::selection { background:var(--or);color:#fff; }

/* ── TOP BAR ───────────────────────────────────────────── */
.topbar {
  background:var(--vert);padding:7px 40px;
  display:flex;justify-content:space-between;align-items:center;
  font-size:12px;color:rgba(255,255,255,.7);gap:16px;
}
.topbar a { color:var(--or-c);transition:color .2s; }
.topbar a:hover { color:#fff; }
.topbar-left,.topbar-right { display:flex;gap:18px;align-items:center;flex-wrap:wrap; }
.topbar-flag { margin-right:3px; }
.topbar-admin {
  background:rgba(200,151,58,.2);padding:3px 10px;
  border-radius:100px;color:var(--or-c)!important;font-weight:700;
}

/* ── HEADER ────────────────────────────────────────────── */
#main-header {
  background:var(--blanc);border-bottom:3px solid var(--or);
  position:sticky;top:0;z-index:200;
  box-shadow:0 4px 28px rgba(26,74,46,.10);
  transition:box-shadow .3s;
  overflow:hidden;
}
#main-header.scrolled { box-shadow:0 6px 40px rgba(26,74,46,.18); }
.header-inner {
  max-width:1320px;margin:0 auto;padding:0 40px;
  display:flex;align-items:center;gap:18px;height:var(--header-h);
  overflow:hidden;
}

/* LOGO */
.logo { display:flex;align-items:center;gap:11px;flex-shrink:0; }
.logo-icon {
  width:46px;height:46px;background:var(--vert);border-radius:11px;
  display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden;
}
.logo-icon::before {
  content:'';position:absolute;inset:0;
  background:repeating-linear-gradient(45deg,transparent,transparent 5px,rgba(200,151,58,.22) 5px,rgba(200,151,58,.22) 6px);
}
.logo-icon .material-icons { color:#fff;font-size:22px;position:relative;z-index:1; }
.logo-name { font-family:'Playfair Display',serif;font-size:22px;font-weight:900;color:var(--vert);display:block;line-height:1;letter-spacing:-.02em; }
.logo-name em { color:var(--or);font-style:italic; }
.logo-sub { font-size:10px;color:var(--gris);letter-spacing:.12em;text-transform:uppercase;display:block;margin-top:3px; }

/* SEARCH */
.search-bar {
  flex:1;max-width:520px;
  display:flex;align-items:center;
  border:2px solid var(--gris-l);border-radius:10px;
  overflow:visible;position:relative;background:#fff;
  transition:border-color .2s,box-shadow .2s;
}
.search-bar:focus-within { border-color:var(--or);box-shadow:0 0 0 4px rgba(200,151,58,.1); }
.search-icon { color:var(--gris);font-size:19px;padding:0 10px 0 14px;pointer-events:none;flex-shrink:0; }
.search-bar input {
  flex:1;border:none;outline:none;padding:11px 0;
  font-size:14px;background:transparent;color:var(--noir);min-width:0;
}
.search-bar input::placeholder { color:var(--gris); }
.search-bar > button {
  background:var(--or);border:none;padding:11px 15px;cursor:pointer;
  color:#fff;display:flex;align-items:center;flex-shrink:0;
  border-radius:0 8px 8px 0;transition:background .2s;
}
.search-bar > button:hover { background:var(--or-c); }

/* SEARCH DROPDOWN */
#search-dropdown {
  display:none;position:absolute;top:calc(100% + 8px);left:0;right:0;
  background:#fff;border-radius:12px;border:1.5px solid var(--or);
  box-shadow:0 16px 48px rgba(0,0,0,.14);z-index:400;
  max-height:350px;overflow-y:auto;
}
#search-dropdown.open { display:block;animation:fadeDown .18s ease; }
.sd-item {
  display:flex;align-items:center;gap:12px;padding:11px 16px;
  border-bottom:1px solid #f5f0e8;color:var(--noir);font-size:13.5px;
  transition:background .15s;
}
.sd-item:hover { background:var(--or-pale); }
.sd-item .material-icons { color:var(--or);font-size:20px;flex-shrink:0; }
.sd-item-name { font-weight:600; }
.sd-item-sub  { font-size:11px;color:var(--gris);margin-top:2px; }
.sd-all {
  display:block;text-align:center;padding:11px;
  font-size:13px;color:var(--vert);font-weight:700;
  background:var(--vert-pale);border-radius:0 0 10px 10px;
}
.sd-all:hover { background:var(--vert);color:#fff; }

/* HEADER ACTIONS */
.header-actions { display:flex;align-items:center;gap:7px;flex-shrink:0; }
.btn-header {
  display:flex;align-items:center;gap:6px;padding:9px 15px;border-radius:9px;
  font-size:13px;font-weight:500;cursor:pointer;border:2px solid transparent;
  transition:var(--trans);white-space:nowrap;background:none;
}
.btn-outline { border-color:var(--vert);color:var(--vert); }
.btn-outline:hover { background:var(--vert-pale); }
.btn-solid { background:var(--vert);color:#fff;border-color:var(--vert); }
.btn-solid:hover { background:var(--vert-c);border-color:var(--vert-c); }
.btn-cart { background:var(--rouge);color:#fff;border-color:var(--rouge);position:relative; }
.btn-cart:hover { background:var(--rouge-c);border-color:var(--rouge-c); }
.cart-badge {
  position:absolute;top:-7px;right:-7px;
  background:var(--or);color:#fff;border-radius:50%;
  width:19px;height:19px;font-size:10px;font-weight:800;
  display:flex;align-items:center;justify-content:center;border:2px solid #fff;
}
.cart-badge.hidden { display:none; }
.cart-badge.pop { animation:cartPop .3s ease; }
@keyframes cartPop { 0%,100%{transform:scale(1)}50%{transform:scale(1.5)} }

/* MOBILE MENU BTN */
.mobile-menu-btn {
  display:none;flex-direction:column;gap:5px;background:none;
  border:none;cursor:pointer;padding:6px;margin-left:auto;
}
.mobile-menu-btn span { display:block;width:22px;height:2px;background:var(--vert);border-radius:2px;transition:var(--trans); }
.mobile-menu-btn.open span:nth-child(1) { transform:rotate(45deg) translate(5px,5px); }
.mobile-menu-btn.open span:nth-child(2) { opacity:0;transform:scaleX(0); }
.mobile-menu-btn.open span:nth-child(3) { transform:rotate(-45deg) translate(5px,-5px); }

/* ── NAVIGATION ─────────────────────────────────────────── */
#main-nav { background:var(--vert);position:relative;z-index:190; }
#main-nav::after {
  content:'';position:absolute;bottom:0;left:0;right:0;height:2px;
  background:linear-gradient(90deg,var(--rouge),var(--or),var(--vert-c),var(--or),var(--rouge));
}
.nav-inner {
  max-width:1320px;margin:0 auto;padding:0 40px;
  display:flex;align-items:center;overflow-x:auto;scrollbar-width:none;min-height:var(--nav-h);
}
.nav-inner::-webkit-scrollbar { display:none; }
.nav-item { position:relative; }
.nav-item > a, a.nav-item {
  display:flex;align-items:center;gap:4px;padding:13px 14px;
  color:rgba(255,255,255,.88);font-size:13px;font-weight:500;white-space:nowrap;
  transition:background .2s,color .2s;
}
.nav-item > a:hover, a.nav-item:hover { background:rgba(200,151,58,.2);color:var(--or-c); }
.nav-promo { color:var(--or-c)!important;font-weight:700; }
.nav-chevron { font-size:16px!important;transition:transform .2s; }
.nav-has-dropdown:hover .nav-chevron { transform:rotate(180deg); }

/* DROPDOWN */
.dropdown {
  display:none;position:absolute;top:100%;left:0;min-width:270px;
  background:#fff;border-top:3px solid var(--or);
  box-shadow:0 20px 60px rgba(0,0,0,.14);border-radius:0 0 14px 14px;z-index:300;
}
.nav-has-dropdown:hover .dropdown { display:block;animation:fadeDown .18s ease; }
@keyframes fadeDown { from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none} }
.dropdown-header {
  display:flex;align-items:center;gap:12px;padding:14px 18px;background:var(--vert);color:#fff;
}
.dropdown-header .material-icons { font-size:22px;color:var(--or-c); }
.dropdown-title { font-family:'Playfair Display',serif;font-size:14px;font-weight:700; }
.dropdown-sub   { font-size:11px;color:rgba(255,255,255,.55);margin-top:1px; }
.dropdown-item {
  display:flex;align-items:center;gap:10px;padding:10px 18px;
  color:var(--noir);font-size:13px;border-bottom:1px solid #f5f0e8;transition:all .15s;
}
.dropdown-item:hover { background:var(--or-pale);padding-left:24px;color:var(--vert); }
.dropdown-item .material-icons { font-size:16px;color:var(--or);flex-shrink:0; }
.dropdown-price { margin-left:auto;color:var(--rouge);font-weight:700;font-size:11px;white-space:nowrap; }
.dropdown-all { display:block;text-align:center;padding:11px;color:var(--vert);font-weight:700;font-size:12.5px;background:var(--vert-pale); }
.dropdown-all:hover { background:var(--vert);color:#fff; }

/* ── PROMO BAND ──────────────────────────────────────────── */
.promo-band { background:var(--rouge);overflow:hidden;padding:9px 0;position:relative; }
.promo-band::before,.promo-band::after {
  content:'';position:absolute;top:0;bottom:0;width:80px;z-index:2;pointer-events:none;
}
.promo-band::before { left:0;background:linear-gradient(90deg,var(--rouge),transparent); }
.promo-band::after  { right:0;background:linear-gradient(-90deg,var(--rouge),transparent); }
.promo-scroll { display:flex;gap:44px;animation:marquee 36s linear infinite;width:max-content; }
.promo-scroll:hover { animation-play-state:paused; }
@keyframes marquee { from{transform:translateX(0)}to{transform:translateX(-25%)} }
.promo-item { display:flex;align-items:center;gap:9px;font-size:12.5px;font-weight:600;color:#fff;white-space:nowrap; }
.promo-dot { width:5px;height:5px;background:var(--or-c);border-radius:50%;animation:blinkDot 1.8s infinite; }
@keyframes blinkDot { 0%,100%{opacity:1}50%{opacity:.15} }

/* ── SECTIONS ────────────────────────────────────────────── */
.section { padding:72px 40px; }
.section-max { max-width:1320px;margin:0 auto; }
.section-header { text-align:center;margin-bottom:52px; }
.section-tag {
  display:inline-flex;align-items:center;gap:7px;
  background:var(--or-pale);color:var(--or-dark);
  border:1.5px solid rgba(200,151,58,.3);padding:5px 16px;
  border-radius:100px;font-size:11px;font-weight:700;
  text-transform:uppercase;letter-spacing:.11em;margin-bottom:14px;
}
.section-title { font-family:'Playfair Display',serif;font-size:36px;font-weight:900;color:var(--vert);line-height:1.2;margin-bottom:10px; }
.section-sub  { color:var(--gris);font-size:15px;max-width:560px;margin:0 auto;font-weight:300; }
.ornament { display:flex;align-items:center;gap:12px;justify-content:center;margin-top:18px; }
.ornament-line { flex:0 0 55px;height:2px;background:linear-gradient(90deg,transparent,var(--or)); }
.ornament-line.r { background:linear-gradient(-90deg,transparent,var(--or)); }
.ornament-diamond { width:8px;height:8px;background:var(--or);transform:rotate(45deg); }

/* ── BUTTONS ─────────────────────────────────────────────── */
.btn-primary {
  background:var(--or);color:#fff;border:none;padding:13px 28px;border-radius:9px;
  font-size:15px;font-weight:700;cursor:pointer;display:inline-flex;align-items:center;gap:8px;
  transition:var(--trans);letter-spacing:.02em;
}
.btn-primary:hover { background:var(--or-c);transform:translateY(-2px);box-shadow:0 8px 28px rgba(200,151,58,.32); }
.btn-secondary {
  background:transparent;color:var(--vert);border:2px solid var(--vert);
  padding:11px 24px;border-radius:9px;font-size:15px;font-weight:500;cursor:pointer;
  display:inline-flex;align-items:center;gap:8px;transition:var(--trans);
}
.btn-secondary:hover { background:var(--vert-pale); }
.btn-sm {
  padding:6px 14px;border-radius:7px;font-size:12.5px;font-weight:600;
  cursor:pointer;border:none;transition:var(--trans);display:inline-flex;align-items:center;gap:5px;
}
.btn-vert  { background:var(--vert);color:#fff; }  .btn-vert:hover  { background:var(--vert-c); }
.btn-rouge { background:var(--rouge);color:#fff; } .btn-rouge:hover { background:var(--rouge-c); }
.btn-or    { background:var(--or);color:#fff; }    .btn-or:hover    { background:var(--or-c); }
.btn-gris  { background:var(--gris-l);color:var(--gris); } .btn-gris:hover { background:#ddd; }

/* ── HERO ────────────────────────────────────────────────── */
.hero {
  min-height:560px;display:flex;align-items:center;overflow:hidden;
  background:linear-gradient(135deg,#0e2e1b 0%,var(--vert) 55%,#3d1f0a 100%);
  position:relative;
}
.hero-zellige {
  position:absolute;inset:0;opacity:.05;
  background-image:
    repeating-linear-gradient(0deg,var(--or) 0,var(--or) 1px,transparent 1px,transparent 44px),
    repeating-linear-gradient(90deg,var(--or) 0,var(--or) 1px,transparent 1px,transparent 44px);
}
.hero-star { position:absolute;right:4%;top:50%;transform:translateY(-50%);width:340px;opacity:.07;pointer-events:none; }
.hero-content {
  max-width:1320px;margin:0 auto;padding:64px 40px;width:100%;
  display:grid;grid-template-columns:1fr 480px;gap:48px;align-items:center;position:relative;z-index:2;
}
.hero-badge {
  display:inline-flex;align-items:center;gap:8px;
  background:rgba(200,151,58,.18);border:1px solid rgba(200,151,58,.35);
  color:var(--or-c);padding:6px 16px;border-radius:100px;
  font-size:11px;font-weight:600;margin-bottom:20px;text-transform:uppercase;letter-spacing:.09em;
}
.hero-badge::before { content:'';width:7px;height:7px;background:var(--or-c);border-radius:50%;animation:pulseDot 2s infinite; }
@keyframes pulseDot { 0%,100%{opacity:1;transform:scale(1)}50%{opacity:.3;transform:scale(1.7)} }
.hero-title { font-family:'Playfair Display',serif;font-size:28px;font-weight:900;color:#fff;line-height:1.08;margin-bottom:16px;letter-spacing:-.02em; }
.hero-title em { color:var(--or-c);font-style:italic; }
.hero-subtitle { color:rgba(255,255,255,.68);font-size:16px;line-height:1.7;margin-bottom:32px;font-weight:300; }
.hero-ctas { display:flex;gap:12px;flex-wrap:wrap;margin-bottom:36px; }
.hero-stats { display:flex;gap:28px;padding-top:28px;border-top:1px solid rgba(255,255,255,.1); }
.hero-stat-num { font-family:'Playfair Display',serif;font-size:28px;font-weight:700;color:var(--or-c);line-height:1; }
.hero-stat-label { font-size:11px;color:rgba(255,255,255,.45);margin-top:5px;text-transform:uppercase;letter-spacing:.07em; }
.hero-card {
  background:rgba(255,255,255,.08);backdrop-filter:blur(14px);
  border:1px solid rgba(200,151,58,.3);border-radius:22px;padding:32px;position:relative;
}
.hero-card::before {
  content:'';position:absolute;top:-1px;left:20%;right:20%;height:3px;
  background:linear-gradient(90deg,transparent,var(--or),transparent);
}
.hero-card h3 { font-family:'Playfair Display',serif;color:#fff;font-size:20px;font-weight:700;margin-bottom:4px; }
.hero-card > p { color:rgba(255,255,255,.5);font-size:13px;margin-bottom:20px; }
.upload-zone {
  border:2px dashed rgba(200,151,58,.45);border-radius:12px;padding:22px;
  text-align:center;cursor:pointer;transition:var(--trans);background:rgba(200,151,58,.05);margin-bottom:18px;
}
.upload-zone:hover { border-color:var(--or);background:rgba(200,151,58,.1); }
.upload-zone .material-icons { font-size:34px;color:var(--or);display:block;margin-bottom:8px; }
.upload-zone p { color:rgba(255,255,255,.6);font-size:13px;line-height:1.5; }
.upload-zone span { color:var(--or-c);font-weight:600; }
.select-group { margin-bottom:10px; }
.select-group label { font-size:11px;color:rgba(255,255,255,.45);text-transform:uppercase;letter-spacing:.1em;display:block;margin-bottom:4px; }
.select-group select {
  width:100%;background:rgba(255,255,255,.09);border:1px solid rgba(200,151,58,.3);
  color:#fff;padding:10px 14px;border-radius:8px;font-size:14px;cursor:pointer;
}
.select-group select option { background:#1a4a2e;color:#fff; }
.btn-devis {
  width:100%;background:var(--or);color:#fff;border:none;padding:13px;
  border-radius:10px;font-size:15px;font-weight:700;cursor:pointer;margin-top:14px;transition:var(--trans);
}
.btn-devis:hover { background:var(--or-c);transform:translateY(-1px); }

/* ── CATÉGORIES GRID ────────────────────────────────────── */
.cats-bg { background:var(--creme); }
.cats-grid { display:grid;grid-template-columns:repeat(4,1fr);gap:20px; }
.cat-card {
  background:#fff;border-radius:var(--radius);overflow:hidden;
  border:1.5px solid rgba(200,151,58,.12);transition:var(--trans);display:block;
}
.cat-card:hover { transform:translateY(-5px);box-shadow:var(--shadow-lg);border-color:rgba(200,151,58,.38); }
.cat-visual {
  height:120px;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden;
}
.cat-visual::after {
  content:'';position:absolute;inset:0;
  background:repeating-linear-gradient(45deg,transparent,transparent 12px,rgba(255,255,255,.04) 12px,rgba(255,255,255,.04) 13px);
}
.cat-visual .material-icons { font-size:52px;color:#fff;position:relative;z-index:1;transition:transform .3s; }
.cat-card:hover .cat-visual .material-icons { transform:scale(1.14); }
.cat-arrow {
  position:absolute;top:10px;right:10px;width:28px;height:28px;
  background:rgba(255,255,255,.18);border-radius:50%;display:flex;align-items:center;justify-content:center;
  transition:var(--trans);z-index:2;
}
.cat-card:hover .cat-arrow { background:var(--or); }
.cat-arrow .material-icons { font-size:16px;color:#fff; }
.cat-body { padding:14px 16px 16px; }
.cat-name  { font-family:'Playfair Display',serif;font-size:15px;font-weight:700;color:var(--vert);margin-bottom:4px; }
.cat-count { font-size:12px;color:var(--gris); }

/* ── PRODUITS GRID ──────────────────────────────────────── */
.products-bg { background:var(--or-pale); }
.products-grid { display:grid;grid-template-columns:repeat(4,1fr);gap:22px; }
.prod-card {
  background:#fff;border-radius:var(--radius);overflow:hidden;
  border:1.5px solid rgba(200,151,58,.12);transition:var(--trans);position:relative;
  display:flex;flex-direction:column;
}
.prod-card:hover { transform:translateY(-4px);box-shadow:var(--shadow-lg);border-color:rgba(200,151,58,.3); }
.prod-badge {
  position:absolute;top:12px;left:12px;color:#fff;font-size:10px;font-weight:700;
  padding:4px 11px;border-radius:100px;text-transform:uppercase;letter-spacing:.06em;z-index:2;
}
.badge-bestseller { background:var(--rouge); }
.badge-promo      { background:var(--or); }
.badge-new        { background:var(--vert); }
.badge-default    { background:var(--gris); }
.prod-fav {
  position:absolute;top:12px;right:12px;width:34px;height:34px;
  background:#fff;border-radius:50%;box-shadow:0 2px 10px rgba(0,0,0,.1);
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;z-index:2;border:none;transition:var(--trans);
}
.prod-fav:hover { background:var(--rouge);transform:scale(1.1); }
.prod-fav:hover .material-icons { color:#fff; }
.prod-fav .material-icons { font-size:17px;color:var(--gris);transition:color .2s; }
.prod-img {
  height:180px;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,var(--or-pale),#fff);overflow:hidden;flex-shrink:0;
}
.prod-img-icon { font-size:72px;color:var(--or);opacity:.22;transition:transform .4s; }
.prod-card:hover .prod-img-icon { transform:scale(1.09) rotate(-3deg); }
.prod-body { padding:16px;flex:1;display:flex;flex-direction:column; }
.prod-cat  { font-size:11px;color:var(--or);font-weight:700;text-transform:uppercase;letter-spacing:.1em;margin-bottom:5px; }
.prod-name { font-family:'Playfair Display',serif;font-size:15px;font-weight:700;color:var(--vert);margin-bottom:6px;line-height:1.3; }
.prod-name a { color:inherit; }
.prod-desc { font-size:12.5px;color:var(--gris);line-height:1.55;margin-bottom:14px;flex:1; }
.prod-bottom { display:flex;align-items:flex-end;justify-content:space-between;margin-top:auto; }
.prod-price-main { font-family:'Playfair Display',serif;font-size:20px;font-weight:700;color:var(--rouge); }
.prod-price-unit  { font-size:10.5px;color:var(--gris);margin-top:2px; }
.btn-add {
  background:var(--vert);color:#fff;border:none;
  width:38px;height:38px;border-radius:10px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:var(--trans);flex-shrink:0;
}
.btn-add:hover { background:var(--vert-c);transform:scale(1.08); }
.btn-add .material-icons { font-size:20px; }

/* ── POURQUOI NOUS ──────────────────────────────────────── */
.why-bg { background:var(--vert);position:relative;overflow:hidden; }
.why-bg::before {
  content:'';position:absolute;inset:0;
  background:repeating-linear-gradient(60deg,transparent,transparent 40px,rgba(200,151,58,.03) 40px,rgba(200,151,58,.03) 41px);
}
.why-bg .section-title { color:#fff; }
.why-bg .section-sub   { color:rgba(255,255,255,.55); }
.why-bg .section-tag   { background:rgba(200,151,58,.18);color:var(--or-c);border-color:rgba(200,151,58,.3); }
.why-grid { display:grid;grid-template-columns:repeat(4,1fr);gap:22px; }
.why-card {
  background:rgba(255,255,255,.06);border:1px solid rgba(200,151,58,.18);
  border-radius:18px;padding:30px 24px;text-align:center;transition:var(--trans);position:relative;overflow:hidden;
}
.why-card:hover { background:rgba(255,255,255,.11);transform:translateY(-4px);border-color:rgba(200,151,58,.45); }
.why-card::before {
  content:'';position:absolute;top:0;left:0;right:0;height:3px;
  background:var(--or);transform:scaleX(0);transition:transform .3s;
}
.why-card:hover::before { transform:scaleX(1); }
.why-icon {
  width:58px;height:58px;background:rgba(200,151,58,.14);border-radius:50%;
  display:flex;align-items:center;justify-content:center;margin:0 auto 18px;
  border:1.5px solid rgba(200,151,58,.3);transition:var(--trans);
}
.why-card:hover .why-icon { background:rgba(200,151,58,.25);transform:scale(1.1); }
.why-icon .material-icons { font-size:26px;color:var(--or-c); }
.why-title { color:#fff;font-family:'Playfair Display',serif;font-size:17px;font-weight:700;margin-bottom:9px; }
.why-text  { color:rgba(255,255,255,.55);font-size:13px;line-height:1.65; }

/* ── PROCESSUS ──────────────────────────────────────────── */
.process-bg { background:#fff; }
.process-steps { display:grid;grid-template-columns:repeat(5,1fr);gap:20px;position:relative; }
.process-steps::before {
  content:'';position:absolute;top:32px;left:10%;right:10%;height:2px;
  background:linear-gradient(90deg,var(--or),var(--vert),var(--or));z-index:0;
}
.step { text-align:center;position:relative;z-index:1;padding:0 8px; }
.step-num {
  width:64px;height:64px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  margin:0 auto 18px;font-family:'Playfair Display',serif;font-size:22px;font-weight:900;color:#fff;
  position:relative;transition:transform .3s;
}
.step-num::after { content:'';position:absolute;inset:-5px;border-radius:50%;border:2px dashed rgba(200,151,58,.35);animation:spinSlow 15s linear infinite; }
@keyframes spinSlow { to{transform:rotate(360deg)} }
.step:hover .step-num { transform:scale(1.1); }
.step:nth-child(1) .step-num { background:var(--vert); }
.step:nth-child(2) .step-num { background:var(--or); }
.step:nth-child(3) .step-num { background:var(--rouge); }
.step:nth-child(4) .step-num { background:var(--brun); }
.step:nth-child(5) .step-num { background:var(--vert-c); }
.step-title { font-family:'Playfair Display',serif;font-size:14.5px;font-weight:700;color:var(--vert);margin-bottom:6px; }
.step-desc  { font-size:12.5px;color:var(--gris);line-height:1.6; }

/* ── PROMOS ─────────────────────────────────────────────── */
.promos-bg { background:var(--creme); }
.promo-grid { display:grid;grid-template-columns:1fr 1fr 1fr;grid-template-rows:auto auto;gap:20px; }
.promo-card {
  border-radius:18px;overflow:hidden;position:relative;
  min-height:190px;display:flex;align-items:flex-end;cursor:pointer;transition:transform .3s;
}
.promo-card:hover { transform:scale(1.025); }
.promo-card:first-child { grid-row:span 2; }
.promo-pattern {
  position:absolute;inset:0;
  background:repeating-linear-gradient(45deg,transparent,transparent 22px,rgba(255,255,255,.04) 22px,rgba(255,255,255,.04) 23px);
}
.promo-info { position:relative;z-index:1;padding:26px;width:100%; }
.promo-pct {
  font-family:'Playfair Display',serif;font-size:60px;font-weight:900;
  color:rgba(255,255,255,.1);position:absolute;top:6px;right:14px;line-height:1;
}
.promo-label {
  display:inline-block;background:rgba(255,255,255,.18);color:#fff;
  font-size:10px;font-weight:700;padding:3px 11px;border-radius:100px;
  text-transform:uppercase;letter-spacing:.1em;margin-bottom:9px;
}
.promo-title { font-family:'Playfair Display',serif;font-size:20px;color:#fff;font-weight:700;margin-bottom:6px; }
.promo-price { color:var(--or-c);font-size:14px;font-weight:600;margin-bottom:16px; }
.btn-promo {
  display:inline-flex;align-items:center;gap:7px;
  background:rgba(255,255,255,.15);border:1.5px solid rgba(255,255,255,.4);
  color:#fff;padding:9px 18px;border-radius:9px;font-size:13px;font-weight:600;transition:var(--trans);
}
.btn-promo:hover { background:rgba(255,255,255,.28); }

/* ── TÉMOIGNAGES ─────────────────────────────────────────── */
.testi-bg { background:var(--or-pale); }
.testi-grid { display:grid;grid-template-columns:repeat(3,1fr);gap:22px; }
.testi-card {
  background:#fff;border-radius:18px;padding:28px;
  border:1.5px solid rgba(200,151,58,.14);transition:var(--trans);
}
.testi-card:hover { transform:translateY(-3px);box-shadow:var(--shadow); }
.testi-quote { font-family:'Playfair Display',serif;font-size:64px;color:var(--or);line-height:.4;margin-bottom:16px;opacity:.25; }
.stars { font-size:15px;margin-bottom:12px;letter-spacing:2px; }
.testi-text   { font-size:13.5px;color:var(--gris);line-height:1.75;margin-bottom:20px;font-style:italic; }
.testi-bottom { display:flex;align-items:center;gap:13px; }
.testi-avatar {
  width:44px;height:44px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-family:'Playfair Display',serif;font-size:18px;font-weight:700;color:#fff;flex-shrink:0;
}
.testi-name { font-weight:700;font-size:14px;color:var(--vert); }
.testi-role { font-size:11.5px;color:var(--gris); }

/* ── CTA BAND ─────────────────────────────────────────────── */
.cta-band { background:var(--rouge);padding:60px 40px;text-align:center;position:relative;overflow:hidden; }
.cta-band::before {
  content:'';position:absolute;inset:0;
  background:repeating-linear-gradient(-45deg,transparent,transparent 30px,rgba(255,255,255,.03) 30px,rgba(255,255,255,.03) 31px);
}
.cta-band h2 { font-family:'Playfair Display',serif;font-size:40px;font-weight:900;color:#fff;margin-bottom:10px;position:relative; }
.cta-band p  { color:rgba(255,255,255,.72);font-size:15px;margin-bottom:28px;position:relative; }
.cta-band-btns { display:flex;gap:14px;justify-content:center;flex-wrap:wrap;position:relative; }

/* ── FOOTER ──────────────────────────────────────────────── */
footer { background:var(--noir);color:rgba(255,255,255,.55);padding:64px 40px 0; }
.footer-inner {
  max-width:1320px;margin:0 auto;
  display:grid;grid-template-columns:2fr 1fr 1fr 1.2fr;gap:48px;
  padding-bottom:48px;border-bottom:1px solid rgba(255,255,255,.06);
}
.footer-brand p { font-size:13px;line-height:1.75;margin:0 0 20px; }
.footer-contacts { display:flex;flex-direction:column;gap:10px;margin-bottom:20px; }
.footer-contact-item { display:flex;align-items:center;gap:10px;font-size:13px;transition:color .2s; }
.footer-contact-item:hover { color:var(--or-c); }
.footer-contact-item .material-icons { font-size:16px;color:var(--or);flex-shrink:0; }
.footer-col h4 {
  font-family:'Playfair Display',serif;font-size:15px;font-weight:700;color:#fff;
  margin-bottom:18px;padding-bottom:10px;border-bottom:1px solid rgba(200,151,58,.22);
}
.footer-col ul { list-style:none;display:flex;flex-direction:column;gap:9px; }
.footer-col ul li a { color:rgba(255,255,255,.45);font-size:13px;display:flex;align-items:center;gap:7px; }
.footer-col ul li a::before { content:'›';color:var(--or);font-size:16px; }
.footer-col ul li a:hover { color:var(--or-c); }
.footer-bottom {
  max-width:1320px;margin:0 auto;
  display:flex;justify-content:space-between;align-items:center;
  padding:18px 0;font-size:12px;color:rgba(255,255,255,.25);
}
.footer-bottom a { color:var(--or); }
.social-links { display:flex;gap:9px; }
.social-link {
  width:36px;height:36px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08);
  border-radius:9px;display:flex;align-items:center;justify-content:center;transition:var(--trans);
}
.social-link:hover { background:var(--or);border-color:var(--or); }
.social-link .material-icons,.social-link svg { color:rgba(255,255,255,.5);fill:rgba(255,255,255,.5);font-size:17px;transition:color .2s,fill .2s; }
.social-link:hover .material-icons,.social-link:hover svg { color:#fff;fill:#fff; }
.newsletter-box { margin-top:22px; }
.newsletter-box p { font-size:12px;color:rgba(255,255,255,.4);text-transform:uppercase;letter-spacing:.1em;margin-bottom:8px; }
.newsletter-form { display:flex; }
.newsletter-form input {
  flex:1;padding:10px 14px;background:rgba(255,255,255,.07);border:1px solid rgba(200,151,58,.25);
  color:#fff;border-radius:8px 0 0 8px;font-size:13px;transition:border-color .2s;
}
.newsletter-form input:focus { border-color:rgba(200,151,58,.55); }
.newsletter-form button {
  background:var(--or);color:#fff;border:none;padding:10px 16px;
  border-radius:0 8px 8px 0;cursor:pointer;font-size:13px;font-weight:700;transition:background .2s;
}
.newsletter-form button:hover { background:var(--or-c); }
#newsletter-msg { font-size:12px;margin-top:7px; }

/* ── WHATSAPP FAB ─────────────────────────────────────────── */
.whatsapp-fab {
  position:fixed;bottom:24px;right:24px;width:56px;height:56px;
  background:#25D366;border-radius:50%;display:flex;align-items:center;justify-content:center;
  box-shadow:0 6px 28px rgba(37,211,102,.38);z-index:500;
  animation:floatFab 3.5s ease-in-out infinite;
}
.whatsapp-fab:hover { animation:none;transform:scale(1.1); }
@keyframes floatFab { 0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)} }
.fab-pulse {
  position:absolute;width:100%;height:100%;border-radius:50%;
  background:rgba(37,211,102,.4);animation:fabRing 2.5s ease-out infinite;
}
@keyframes fabRing { 0%{transform:scale(1);opacity:.6}100%{transform:scale(2);opacity:0} }

/* ── MODALS ───────────────────────────────────────────────── */
.modal-overlay {
  display:none;position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:1000;
  align-items:center;justify-content:center;backdrop-filter:blur(5px);padding:16px;
}
.modal-overlay.active { display:flex;animation:fadeOverlay .22s ease; }
@keyframes fadeOverlay { from{opacity:0}to{opacity:1} }
.modal-box {
  background:#fff;border-radius:22px;padding:38px;max-width:480px;width:100%;
  position:relative;border-top:4px solid var(--or);
  animation:slideModal .26s cubic-bezier(.34,1.56,.64,1);
  max-height:92vh;overflow-y:auto;
}
.modal-wide { max-width:560px; }
@keyframes slideModal { from{transform:translateY(30px);opacity:0}to{opacity:1;transform:none} }
.modal-close {
  position:absolute;top:14px;right:14px;background:none;border:none;
  cursor:pointer;color:var(--gris);width:34px;height:34px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;transition:var(--trans);
}
.modal-close:hover { background:var(--or-pale);color:var(--vert); }
.modal-brand { width:48px;height:48px;background:var(--vert);border-radius:12px;display:flex;align-items:center;justify-content:center;margin-bottom:16px; }
.modal-brand .material-icons { color:#fff;font-size:24px; }
.modal-title { font-family:'Playfair Display',serif;font-size:24px;font-weight:800;color:var(--vert);margin-bottom:4px; }
.modal-sub   { color:var(--gris);font-size:13.5px;margin-bottom:24px; }
.modal-switch { text-align:center;margin-top:16px;font-size:13px;color:var(--gris); }
.modal-switch a { color:var(--vert);font-weight:700; }

/* ── FORMULAIRES ─────────────────────────────────────────── */
.form-group { margin-bottom:14px; }
.form-group label {
  font-size:11px;font-weight:700;color:var(--vert);
  text-transform:uppercase;letter-spacing:.09em;display:block;margin-bottom:5px;
}
.form-group label small { font-weight:400;text-transform:none;color:var(--gris);letter-spacing:0; }
.input-icon { position:relative; }
.input-icon > .material-icons {
  position:absolute;left:12px;top:50%;transform:translateY(-50%);
  color:var(--gris);font-size:18px;pointer-events:none;
}
.input-icon input,.input-icon select {
  width:100%;border:1.5px solid rgba(200,151,58,.28);border-radius:9px;
  padding:10px 14px 10px 40px;font-size:14px;
  background:var(--or-pale);color:var(--noir);transition:border-color .2s,box-shadow .2s;
}
.input-icon input:focus,.input-icon select:focus {
  border-color:var(--or);box-shadow:0 0 0 3px rgba(200,151,58,.1);background:#fff;
}
.form-group select, .form-group textarea {
  width:100%;border:1.5px solid rgba(200,151,58,.28);border-radius:9px;
  padding:10px 14px;font-size:14px;background:var(--or-pale);color:var(--noir);transition:border-color .2s;
}
.form-group select:focus,.form-group textarea:focus { border-color:var(--or);background:#fff; }
.form-group textarea { resize:vertical;min-height:80px; }
.toggle-pwd {
  position:absolute;right:12px;top:50%;transform:translateY(-50%);
  background:none;border:none;cursor:pointer;color:var(--gris);padding:0;
}
.form-msg { font-size:13px;min-height:20px;padding:5px 0; }
.form-error   { color:var(--rouge); }
.form-success { color:var(--vert-c); }
.btn-modal {
  width:100%;background:var(--vert);color:#fff;border:none;padding:13px;
  border-radius:10px;font-size:15px;font-weight:700;cursor:pointer;
  transition:background .2s;display:flex;align-items:center;justify-content:center;gap:8px;
  margin-top:6px;
}
.btn-modal:hover { background:var(--vert-c); }
.form-grid-2 { display:grid;grid-template-columns:1fr 1fr;gap:12px; }

/* ── ALERTS ──────────────────────────────────────────────── */
.alert {
  display:flex;align-items:center;gap:10px;
  padding:12px 20px;border-radius:9px;margin:10px 40px;font-size:14px;font-weight:500;
}
.alert .material-icons { font-size:20px;flex-shrink:0; }
.alert-success { background:var(--vert-pale);color:var(--vert);border-left:4px solid var(--vert); }
.alert-error   { background:#fde8e8;color:var(--rouge);border-left:4px solid var(--rouge); }
.alert-info    { background:var(--or-pale);color:var(--brun);border-left:4px solid var(--or); }
.alert-warning { background:#fffce0;color:#7a5f00;border-left:4px solid #f0c040; }

/* ── PAGE LAYOUT ──────────────────────────────────────────── */
.page-wrapper { max-width:1320px;margin:0 auto;padding:48px 40px; }
.breadcrumb { display:flex;align-items:center;gap:8px;font-size:13px;color:var(--gris);margin-bottom:28px;flex-wrap:wrap; }
.breadcrumb a { color:var(--vert); }
.breadcrumb a:hover { color:var(--or); }
.breadcrumb .sep { color:var(--gris-l); }

/* ── CATÉGORIE PAGE ─────────────────────────────────────── */
.cat-hero {
  background:var(--vert);padding:42px 40px;color:#fff;position:relative;overflow:hidden;
}
.cat-hero::before {
  content:'';position:absolute;inset:0;
  background:repeating-linear-gradient(45deg,transparent,transparent 20px,rgba(255,255,255,.02) 20px,rgba(255,255,255,.02) 21px);
}
.cat-hero-inner { max-width:1320px;margin:0 auto;position:relative;z-index:1; }
.cat-hero h1 { font-family:'Playfair Display',serif;font-size:32px;font-weight:900; }
.cat-hero p  { color:rgba(255,255,255,.6);margin-top:6px; }
.cat-filter-bar { display:flex;justify-content:space-between;align-items:center;margin-bottom:28px;flex-wrap:wrap;gap:12px; }
.filter-select {
  border:1.5px solid rgba(200,151,58,.3);border-radius:8px;
  padding:9px 14px;font-size:13px;background:var(--or-pale);cursor:pointer;color:var(--noir);
}

/* ── PRODUIT DÉTAIL ─────────────────────────────────────── */
.prod-detail-grid { display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:start; }
.prod-detail-sticky { position:sticky;top:calc(var(--header-h) + var(--nav-h) + 10px); }
.prod-detail-img {
  background:linear-gradient(135deg,var(--or-pale),#fff);border-radius:var(--radius-lg);
  height:420px;display:flex;align-items:center;justify-content:center;
  border:1.5px solid rgba(200,151,58,.15);overflow:hidden;
}
.prod-detail-img .material-icons { font-size:110px;color:var(--or);opacity:.2; }
.prod-detail-badge-row { display:flex;gap:8px;flex-wrap:wrap;margin-top:14px; }
.prod-cat-tag { font-size:11.5px;color:var(--or);font-weight:700;text-transform:uppercase;letter-spacing:.1em;margin-bottom:7px; }
.prod-detail-title { font-family:'Playfair Display',serif;font-size:30px;font-weight:900;color:var(--vert);line-height:1.2; }
.prod-rating { display:flex;align-items:center;gap:10px;margin:10px 0; }
.prod-rating .stars { font-size:16px; }
.prod-rating-count { font-size:13px;color:var(--gris); }
.prod-detail-price {
  font-family:'Playfair Display',serif;font-size:36px;font-weight:700;color:var(--rouge);
  margin:18px 0;display:flex;align-items:baseline;gap:8px;
}
.prod-detail-price small { font-size:14px;color:var(--gris);font-weight:400;font-family:'Tajawal',sans-serif; }
.options-section { margin-bottom:24px; }
.option-group { margin-bottom:18px; }
.option-group > label { font-size:11.5px;font-weight:700;color:var(--vert);text-transform:uppercase;letter-spacing:.09em;display:block;margin-bottom:9px; }
.option-btns { display:flex;gap:8px;flex-wrap:wrap; }
.opt-btn {
  padding:8px 16px;border:2px solid rgba(200,151,58,.28);border-radius:8px;
  font-size:13px;cursor:pointer;background:#fff;transition:var(--trans);color:var(--noir);
}
.opt-btn:hover  { border-color:var(--vert);background:var(--vert-pale); }
.opt-btn.active { border-color:var(--vert);background:var(--vert);color:#fff;font-weight:700; }
.qty-row { display:flex;align-items:center;gap:10px;margin-bottom:22px; }
.qty-row label { font-size:11px;font-weight:700;color:var(--vert);text-transform:uppercase;letter-spacing:.09em;min-width:70px; }
.qty-control { display:flex;align-items:center;gap:0;border:1.5px solid var(--gris-l);border-radius:9px;overflow:hidden; }
.qty-btn {
  width:36px;height:36px;border:none;background:#f9f5ef;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  font-size:18px;font-weight:700;color:var(--vert);transition:background .15s;
}
.qty-btn:hover { background:var(--vert);color:#fff; }
.qty-val {
  min-width:48px;text-align:center;font-weight:700;font-size:16px;color:var(--vert);
  border:none;outline:none;background:#fff;padding:6px 8px;
}
.prod-actions { display:flex;gap:10px;flex-wrap:wrap;margin-bottom:22px; }
.prod-actions .btn-primary { flex:1; }
.guarantee-row { display:flex;gap:20px;padding-top:20px;border-top:1px solid var(--gris-l);flex-wrap:wrap; }
.guarantee-item { display:flex;align-items:center;gap:6px;font-size:12px;color:var(--gris); }
.guarantee-item .material-icons { font-size:17px;color:var(--vert); }

/* ── PANIER ──────────────────────────────────────────────── */
.cart-layout { display:grid;grid-template-columns:1fr 330px;gap:28px;align-items:start; }
.cart-table { width:100%;border-collapse:collapse;background:#fff;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-sm); }
.cart-table th { background:var(--vert);color:#fff;padding:13px 16px;text-align:left;font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.06em; }
.cart-table td { padding:14px 16px;border-bottom:1px solid #f0ece5;font-size:14px;vertical-align:middle; }
.cart-table tr:last-child td { border-bottom:none; }
.cart-table tr:hover td { background:var(--or-pale); }
.cart-product-name { font-weight:700;color:var(--vert);margin-bottom:4px; }
.cart-options { font-size:11.5px;color:var(--gris);margin-top:3px; }
.cart-summary {
  background:#fff;border-radius:var(--radius-lg);padding:26px;
  border:1.5px solid rgba(200,151,58,.2);
  position:sticky;top:calc(var(--header-h) + var(--nav-h) + 12px);
}
.cart-summary h3 { font-family:'Playfair Display',serif;color:var(--vert);font-size:20px;margin-bottom:20px; }
.summary-row { display:flex;justify-content:space-between;font-size:14px;padding:9px 0;border-bottom:1px solid #f5f0e8; }
.summary-row.total { font-weight:700;font-size:18px;color:var(--rouge);border:none;padding-top:14px;margin-top:4px; }
.summary-row span:last-child { font-weight:600; }

/* ── COMMANDE (CHECKOUT) ─────────────────────────────────── */
.checkout-layout { display:grid;grid-template-columns:1fr 330px;gap:28px;align-items:start; }
.checkout-section { background:#fff;border-radius:var(--radius-lg);padding:28px;border:1.5px solid rgba(200,151,58,.12);margin-bottom:20px; }
.checkout-section h3 { font-family:'Playfair Display',serif;color:var(--vert);font-size:18px;margin-bottom:20px;padding-bottom:12px;border-bottom:1px solid var(--gris-l); }
.payment-method { display:flex;flex-direction:column;gap:10px; }
.payment-opt {
  display:flex;align-items:center;gap:12px;padding:13px 16px;
  border:2px solid var(--gris-l);border-radius:10px;cursor:pointer;transition:var(--trans);
}
.payment-opt:hover  { border-color:var(--or); }
.payment-opt.active { border-color:var(--vert);background:var(--vert-pale); }
.payment-opt input  { accent-color:var(--vert); }
.order-confirm-box { background:var(--vert-pale);border:1.5px solid var(--vert);border-radius:12px;padding:20px;text-align:center; }
.order-ref { font-family:'Playfair Display',serif;font-size:28px;font-weight:900;color:var(--vert); }

/* ── MON COMPTE ──────────────────────────────────────────── */
.account-layout { display:grid;grid-template-columns:240px 1fr;gap:28px;align-items:start; }
.account-sidebar { background:#fff;border-radius:var(--radius-lg);padding:20px;border:1.5px solid rgba(200,151,58,.12);position:sticky;top:calc(var(--header-h) + var(--nav-h) + 12px); }
.account-nav a {
  display:flex;align-items:center;gap:11px;padding:11px 14px;border-radius:9px;
  color:var(--gris);font-size:14px;font-weight:500;transition:var(--trans);margin-bottom:4px;
}
.account-nav a:hover,.account-nav a.active { background:var(--vert-pale);color:var(--vert); }
.account-nav a.active { font-weight:700; }
.account-nav .material-icons { font-size:19px; }
.account-content { background:#fff;border-radius:var(--radius-lg);padding:32px;border:1.5px solid rgba(200,151,58,.12); }

/* ── ADMIN ────────────────────────────────────────────────── */
.admin-layout { display:grid;grid-template-columns:240px 1fr;min-height:100vh; }
.admin-sidebar { background:var(--vert); }
.admin-logo { padding:22px 20px;border-bottom:1px solid rgba(255,255,255,.08);margin-bottom:12px; }
.admin-logo .logo-name { color:#fff!important; }
.admin-nav a {
  display:flex;align-items:center;gap:12px;padding:11px 20px;
  color:rgba(255,255,255,.65);font-size:13.5px;transition:var(--trans);position:relative;
}
.admin-nav a:hover,.admin-nav a.active { background:rgba(200,151,58,.18);color:var(--or-c); }
.admin-nav a.active::before { content:'';position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--or); }
.admin-nav a .material-icons { font-size:19px; }
.admin-nav .nav-badge { margin-left:auto;background:var(--rouge);color:#fff;border-radius:100px;padding:1px 8px;font-size:11px;font-weight:700; }
.admin-nav .nav-sep { padding:6px 20px;font-size:10px;color:rgba(255,255,255,.25);text-transform:uppercase;letter-spacing:.1em;margin-top:10px; }
.admin-content { padding:32px;background:var(--creme);overflow-y:auto; }
.admin-topbar { display:flex;justify-content:space-between;align-items:center;margin-bottom:28px; }
.admin-title  { font-family:'Playfair Display',serif;font-size:28px;font-weight:900;color:var(--vert); }
.stats-cards  { display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-bottom:28px; }
.stat-card { background:#fff;border-radius:var(--radius);padding:22px;border:1px solid rgba(200,151,58,.12);border-left:4px solid; }
.stat-card:nth-child(1){border-left-color:var(--vert);}
.stat-card:nth-child(2){border-left-color:var(--or);}
.stat-card:nth-child(3){border-left-color:var(--rouge);}
.stat-card:nth-child(4){border-left-color:var(--brun);}
.stat-label { font-size:11.5px;color:var(--gris);text-transform:uppercase;letter-spacing:.08em;margin-bottom:8px;display:flex;align-items:center;gap:6px; }
.stat-value { font-family:'Playfair Display',serif;font-size:32px;font-weight:900;color:var(--vert);line-height:1; }
.stat-sub   { font-size:12px;color:var(--gris);margin-top:5px; }
.data-table { width:100%;border-collapse:collapse;background:#fff;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-sm); }
.data-table th { background:var(--vert);color:#fff;padding:12px 16px;text-align:left;font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.07em; }
.data-table td { padding:13px 16px;border-bottom:1px solid #f0ece5;font-size:13.5px;vertical-align:middle; }
.data-table tr:last-child td { border-bottom:none; }
.data-table tr:hover td { background:var(--or-pale); }
.status-badge { padding:4px 11px;border-radius:100px;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;display:inline-block; }
.status-en_attente    { background:#fff3cd;color:#856404; }
.status-confirmee     { background:var(--vert-pale);color:var(--vert); }
.status-en_production { background:#cce5ff;color:#004085; }
.status-expediee,.status-livree { background:#d4edda;color:#155724; }
.status-annulee       { background:#f8d7da;color:var(--rouge); }
.status-nouveau       { background:#cce5ff;color:#004085; }
.status-traite        { background:#d4edda;color:#155724; }
.admin-card { background:#fff;border-radius:var(--radius);padding:20px;border:1px solid rgba(200,151,58,.12);margin-bottom:20px; }
.admin-card h3 { font-family:'Playfair Display',serif;color:var(--vert);font-size:18px;margin-bottom:16px;display:flex;align-items:center;gap:10px;justify-content:space-between; }
.admin-form input,.admin-form select,.admin-form textarea {
  width:100%;border:1.5px solid var(--gris-l);border-radius:8px;
  padding:10px 14px;font-size:14px;background:#fafafa;transition:border-color .2s;margin-bottom:14px;
}
.admin-form input:focus,.admin-form select:focus,.admin-form textarea:focus { border-color:var(--or);background:#fff; }
.admin-form label { font-size:11.5px;font-weight:700;color:var(--vert);text-transform:uppercase;letter-spacing:.08em;display:block;margin-bottom:5px; }

/* ── ANIM FADE ────────────────────────────────────────────── */
.anim-fade { opacity:0;transform:translateY(22px);transition:opacity .55s ease,transform .55s ease; }
.anim-fade.visible { opacity:1;transform:none; }

/* ── EMPTY STATE ──────────────────────────────────────────── */
.empty-state { text-align:center;padding:60px 20px; }
.empty-state .material-icons { font-size:80px;color:var(--or);opacity:.25;display:block;margin-bottom:20px; }
.empty-state h2 { font-family:'Playfair Display',serif;color:var(--vert);margin-bottom:10px; }
.empty-state p  { color:var(--gris);margin-bottom:24px; }


/* ══════════════════════════════════════════════
   RESPONSIVE — TABLETTE (≤1100px)
══════════════════════════════════════════════ */
@media(max-width:1100px){
  .cats-grid,.products-grid{grid-template-columns:repeat(3,1fr);}
  .why-grid{grid-template-columns:repeat(2,1fr);}
  .process-steps{grid-template-columns:repeat(3,1fr);}
  .process-steps::before{display:none;}
  .hero-content{grid-template-columns:1fr;padding:48px 24px;}
  .hero-right,.hero-star{display:none;}
  .footer-inner{grid-template-columns:1fr 1fr;gap:32px;}
  .prod-detail-grid{grid-template-columns:1fr;}
  .prod-detail-sticky{position:static;}
  .cart-layout,.checkout-layout{grid-template-columns:1fr;}
  .cart-summary{position:static;}
  .stats-cards{grid-template-columns:repeat(2,1fr);}
  .promo-grid{grid-template-columns:1fr 1fr;}
  .account-layout{grid-template-columns:1fr;}
  .account-sidebar{position:static;}
  .admin-layout{grid-template-columns:1fr;}
  .admin-sidebar{display:none;}
  .ia-home-grid{grid-template-columns:1fr;}
  .ia-home-grid > div:last-child{display:none;}
}

/* ══════════════════════════════════════════════
   RESPONSIVE — MOBILE (≤768px)
══════════════════════════════════════════════ */
@media(max-width:768px){
  /* Base */
  html,body{overflow-x:hidden;max-width:100vw;}
  :root{--header-h:60px;--nav-h:0px;}

  /* Topbar */
  .topbar{padding:5px 12px;font-size:11px;}
  .topbar-right{display:none;}
  .topbar-hide-mobile{display:none;}
  .topbar-left{gap:0;}

  /* Header */
  .topbar{padding:5px 12px;font-size:11px;}
  .topbar-right{display:none;}
  .header-inner{padding:0 12px;gap:6px;}
  .logo-sub,.btn-label{display:none;}
  .logo-name{font-size:18px;}
  .logo-icon{width:32px;height:32px;}
  .btn-header{padding:7px 9px;}
  .btn-header-devis{display:none;}
  .header-actions{gap:5px;}
  .search-bar{flex:1;min-width:0;max-width:none;}
  .search-bar input{font-size:13px;}

  /* Nav mobile */
  .mobile-menu-btn{display:flex;}
  #main-nav{
    display:none;position:fixed;
    top:var(--header-h);left:0;right:0;
    background:var(--vert);z-index:998;
    max-height:calc(100vh - var(--header-h));
    overflow-y:auto;
    box-shadow:0 8px 24px rgba(0,0,0,.3);
  }
  #main-nav.open{display:block;}
  .nav-inner{flex-direction:column;padding:6px 0;}
  .nav-item>a,a.nav-item{padding:13px 18px;border-bottom:1px solid rgba(255,255,255,.07);font-size:14px;}
  .nav-has-dropdown>a{display:flex;justify-content:space-between;align-items:center;}
  .dropdown{position:static;box-shadow:none;border-radius:0;display:none;animation:none;background:rgba(0,0,0,.15);}
  .nav-has-dropdown.open .dropdown{display:block;}
  .dropdown-item{padding:10px 28px;color:rgba(255,255,255,.8);font-size:13px;}
  .dropdown-header{padding:10px 18px;}
  .dropdown-all{padding:10px 28px;color:var(--or);}

  /* Hero */
  .hero{overflow:hidden;min-height:auto;}
  .hero-content{
    display:block;
    padding:28px 16px 32px;
    width:100%;
    box-sizing:border-box;
  }
  .hero-right{display:none;}
  .hero-title{font-size:28px;line-height:1.2;}
  .hero-subtitle{font-size:14px;margin-bottom:24px;}
  .hero-ctas{flex-direction:column;gap:10px;margin-bottom:24px;}
  .hero-ctas .btn-primary,.hero-ctas .btn-secondary{width:100%;justify-content:center;text-align:center;box-sizing:border-box;}
  .hero-stats{flex-wrap:wrap;gap:16px;padding-top:20px;}
  .hero-stat-num{font-size:22px;}

  /* Sections */
  .section{padding:36px 14px;}
  .section-max{padding:0;}
  .page-wrapper{padding:20px 14px;}
  .section-title{font-size:24px;}
  .section-sub{font-size:13px;}
  .section-header{margin-bottom:24px;}

  /* Grilles */
  .cats-grid{grid-template-columns:1fr 1fr !important;gap:10px;}
  .cat-visual{height:88px;}
  .cat-visual .material-icons{font-size:36px;}
  .cat-body{padding:10px 12px;}
  .cat-name{font-size:13px;}
  .cat-count{font-size:11px;}
  .products-grid{grid-template-columns:1fr 1fr;gap:10px;}
  .why-grid,.promo-grid{grid-template-columns:1fr;}
  .testi-grid{grid-template-columns:1fr;}
  .process-steps{grid-template-columns:1fr 1fr;}
  .ia-home-grid{grid-template-columns:1fr;}
  .ia-home-grid > div:last-child{display:none;}

  /* Cards */
  .prod-img{height:130px;}
  .prod-body{padding:11px;}
  .prod-name{font-size:12px;}
  .prod-price-val{font-size:16px;}
  .cat-card{padding:16px 12px;}
  .cat-icon{width:42px;height:42px;}

  /* Page produit */
  .prod-detail-grid{grid-template-columns:1fr;gap:20px;}
  .prod-detail-sticky{position:static;}
  .prod-detail-img{height:220px;}
  .prod-detail-title{font-size:22px;}
  .opts-grid{grid-template-columns:1fr 1fr;}

  /* Panier */
  .cart-layout{grid-template-columns:1fr;gap:16px;}
  .cart-summary{position:static;}

  /* Checkout */
  .checkout-layout{grid-template-columns:1fr;}
  .form-grid-2{grid-template-columns:1fr;}

  /* Footer */
  .footer-inner{grid-template-columns:1fr;gap:22px;}
  .footer-bottom{flex-direction:column;gap:8px;text-align:center;}
  .footer-links{justify-content:center;flex-wrap:wrap;}
  .whatsapp-fab{width:48px;height:48px;bottom:14px;right:12px;}

  /* Modals */
  .modal-overlay{padding:8px;}
  .modal{border-radius:12px;max-height:96vh;}
  .modal-box{padding:20px 16px;}

  /* Admin */
  .admin-layout{grid-template-columns:1fr;}
  .admin-sidebar{
    position:fixed;left:-260px;top:0;height:100vh;
    z-index:999;transition:left .3s;
    box-shadow:4px 0 24px rgba(0,0,0,.3);
  }
  .admin-sidebar.open{left:0;}
  .admin-content{padding:14px;}
  .admin-topbar{padding:12px 14px;flex-wrap:wrap;gap:8px;}
  .stats-cards{grid-template-columns:1fr 1fr;}

  /* CTA */
  .cta-band{padding:36px 14px;}
  .cta-band h2{font-size:22px;}

  /* Designer */
  .designer-layout{grid-template-columns:1fr;}
  .form-panel{max-height:none;border-right:none;border-bottom:1.5px solid var(--gris-l);}
  .preview-panel{padding:16px 14px;}
  .designer-hero{padding:32px 14px;}
  .designer-hero h1{font-size:24px;}

  /* Alertes */
  .alert{margin:8px 14px;}
}

/* ══════════════════════════════════════════════
   RESPONSIVE — PETIT MOBILE (≤480px)
══════════════════════════════════════════════ */
@media(max-width:350px){
  .cats-grid{grid-template-columns:1fr 1fr;}
  .products-grid{grid-template-columns:1fr 1fr;}
  .process-steps{grid-template-columns:1fr;}
  .testi-grid{grid-template-columns:1fr;}
  .hero-title{font-size:24px;}
  .hero-stats{display:none;}
  .prod-img{height:100px;}
  .section-title{font-size:10px;}
  .stats-cards{grid-template-columns:1fr;}
}