/* =================================================================
   GEEK ZONE CI — style.css
   Thème  : Chaud · Premium · Énergique
   Fonts  : Oswald 800 (titres) + DM Sans 300/500 (corps)
   Palette: Crème #faf8f4 · Orange #f04e1a · Ink #0e0d0b · Gold #e8a020
   ================================================================= */

/* ─── 0. VARIABLES ─────────────────────────────────────────── */
:root {
  /* Couleurs */
  --cream:      #faf8f4;
  --cream-2:    #f2efe8;
  --cream-3:    #e8e3d8;
  --white:      #ffffff;
  --ink:        #0e0d0b;
  --ink-2:      #2c2a26;
  --ink-3:      #504d47;
  --muted:      #8c8880;
  --border:     #e4e0d7;
  --border-2:   #d0cbbf;

  --orange:     #f04e1a;
  --orange-dk:  #c73d10;
  --orange-lt:  #fff2ee;
  --orange-md:  #ffd8cc;

  --gold:       #e8a020;
  --gold-lt:    #fdf5e6;

  --green:      #1a8a4a;
  --green-lt:   #eaf6ef;

  --red:        #e01c3a;
  --red-lt:     #fef1f3;

  --blue:       #2563eb;
  --blue-lt:    #eff4ff;

  /* Ombres */
  --sh-xs:  0 1px 4px rgba(14,13,11,.06);
  --sh-sm:  0 2px 12px rgba(14,13,11,.08);
  --sh:     0 6px 28px rgba(14,13,11,.10);
  --sh-lg:  0 14px 56px rgba(14,13,11,.13);
  --sh-xl:  0 28px 88px rgba(14,13,11,.16);
  --sh-or:  0 8px 30px rgba(240,78,26,.32);

  /* Rayons */
  --r-xs: 6px;
  --r-sm: 10px;
  --r:    16px;
  --r-lg: 22px;
  --r-xl: 32px;

  /* Transition */
  --ease: cubic-bezier(.25,.46,.45,.94);

  /* Layout */
  --max:    1380px;
  --gap:    32px;
}

/* ─── 1. RESET ──────────────────────────────────────────────── */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box }
html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
body {
  font-family: 'DM Sans', sans-serif;
  font-weight: 300;
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink);
  background: var(--cream);
  overflow-x: hidden;
}
img { max-width:100%; height:auto; display:block }
a { color:inherit; text-decoration:none }
button { font-family:inherit; cursor:pointer; border:none; background:none }
ul, ol { list-style:none }
input, textarea, select { font-family:inherit }

/* ─── 2. UTILS ──────────────────────────────────────────────── */
.container { max-width:var(--max); margin:0 auto; padding:0 var(--gap) }
.section       { padding:80px 0 }
.section-white { background:var(--white) }
.section-ink   { background:var(--ink) }

/* ─── 3. ANIMATIONS ─────────────────────────────────────────── */
@keyframes fadeUp  { from{opacity:0;transform:translateY(26px)} to{opacity:1;transform:none} }
@keyframes fadeIn  { from{opacity:0} to{opacity:1} }
@keyframes scaleIn { from{opacity:0;transform:scale(.93)} to{opacity:1;transform:none} }
@keyframes float   { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-10px)} }
@keyframes bobble  { 0%,100%{transform:translateY(0) rotate(0)} 50%{transform:translateY(-8px) rotate(1deg)} }
@keyframes pulse   { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.4;transform:scale(.65)} }
@keyframes mq      { to{transform:translateX(-50%)} }
@keyframes toastIn { from{opacity:0;transform:translateX(-50%) translateY(14px)} to{opacity:1;transform:translateX(-50%)} }
@keyframes spin    { to{transform:rotate(360deg)} }

/* Scroll reveal */
.reveal {
  opacity:0; transform:translateY(28px);
  transition: opacity .65s var(--ease), transform .65s var(--ease);
}
.reveal.visible { opacity:1; transform:none }
.reveal-d1 { transition-delay:.10s }
.reveal-d2 { transition-delay:.20s }
.reveal-d3 { transition-delay:.30s }
.reveal-d4 { transition-delay:.40s }

/* ─── 4. BOUTONS ────────────────────────────────────────────── */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:12px 24px; border-radius:var(--r-sm);
  font-family:'DM Sans',sans-serif; font-size:14px; font-weight:500; line-height:1;
  transition:all .22s var(--ease); cursor:pointer; white-space:nowrap; border:none;
}
.btn-primary { background:var(--orange); color:#fff }
.btn-primary:hover { background:var(--orange-dk); transform:translateY(-2px); box-shadow:var(--sh-or) }

.btn-dark { background:var(--ink); color:#fff }
.btn-dark:hover { background:var(--orange); transform:translateY(-2px); box-shadow:var(--sh-or) }

.btn-outline { background:transparent; color:var(--ink); border:1.5px solid var(--border-2) }
.btn-outline:hover { border-color:var(--ink); background:rgba(14,13,11,.04) }

.btn-outline-w { background:transparent; color:rgba(255,255,255,.8); border:1.5px solid rgba(255,255,255,.22) }
.btn-outline-w:hover { color:#fff; border-color:rgba(255,255,255,.55); background:rgba(255,255,255,.07) }

.btn-ghost { background:transparent; color:var(--orange); padding-left:0; padding-right:0 }
.btn-ghost::after { content:' →'; transition:letter-spacing .2s }
.btn-ghost:hover::after { letter-spacing:2px }

.btn-lg { padding:16px 34px; font-size:15px; border-radius:var(--r) }
.btn-sm { padding:8px 14px; font-size:12.5px; border-radius:var(--r-xs) }

/* ─── 5. FORMS ──────────────────────────────────────────────── */
.form-group { display:flex; flex-direction:column; gap:6px }
.form-group label { font-size:13px; font-weight:500; color:var(--ink-2) }
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:16px }

.f-input, .f-select, .f-textarea {
  width:100%; padding:11px 14px;
  border:1.5px solid var(--border); border-radius:var(--r-sm);
  background:var(--white); font-family:'DM Sans',sans-serif;
  font-size:14px; color:var(--ink); outline:none;
  transition:border-color .2s, box-shadow .2s;
}
.f-input::placeholder, .f-textarea::placeholder { color:var(--muted) }
.f-input:focus, .f-select:focus, .f-textarea:focus {
  border-color:var(--orange);
  box-shadow:0 0 0 3px rgba(240,78,26,.11);
}
.f-textarea { resize:vertical; min-height:100px }

/* ─── 6. FLASH ──────────────────────────────────────────────── */
.flash {
  position:fixed; top:80px; right:20px; z-index:9999;
  display:flex; align-items:center; gap:12px;
  padding:14px 20px; border-radius:var(--r);
  font-size:13.5px; max-width:400px;
  box-shadow:var(--sh-lg); animation:fadeIn .3s var(--ease);
  transition:opacity .45s;
}
.flash-success { background:var(--green); color:#fff }
.flash-error   { background:var(--red);   color:#fff }
.flash-info    { background:var(--blue);  color:#fff }
.flash-warning { background:var(--gold);  color:var(--ink) }
.flash-close   { background:none; border:none; color:inherit; font-size:18px; opacity:.7; cursor:pointer }

/* ─── 7. URGENCY BAR ────────────────────────────────────────── */
.urgency-bar {
  background:var(--orange); color:#fff;
  text-align:center; padding:9px 16px;
  font-size:12.5px; display:flex; align-items:center;
  justify-content:center; gap:14px; flex-wrap:wrap;
}
.urgency-bar strong { font-weight:700 }
.urgency-bar a { color:#fff; font-weight:600; text-decoration:underline; text-underline-offset:2px }
.u-dot {
  display:inline-block; width:7px; height:7px;
  background:#fff; border-radius:50%;
  animation:pulse 1.5s ease-in-out infinite; flex-shrink:0;
}
.u-sep { opacity:.38 }

/* ─── 8. HEADER ─────────────────────────────────────────────── */
.site-header {
  position:sticky; top:0; z-index:500;
  background:rgba(250,248,244,.96);
  backdrop-filter:blur(22px); -webkit-backdrop-filter:blur(22px);
  border-bottom:1px solid transparent;
  transition:border-color .25s, box-shadow .25s;
}
.site-header.scrolled { border-color:var(--border); box-shadow:var(--sh-sm) }

.header-inner {
  display:grid; grid-template-columns:auto 1fr auto;
  align-items:center; gap:24px; height:70px;
}

/* Logo */
.logo { display:flex; align-items:center; gap:10px; flex-shrink:0 }
.logo-icon {
  width:38px; height:38px; border-radius:10px;
  background:var(--orange); color:#fff;
  display:flex; align-items:center; justify-content:center;
  font-family:'Oswald',sans-serif; font-size:16px; font-weight:800; letter-spacing:-1px;
  flex-shrink:0;
}
.logo-name {
  font-family:'Oswald',sans-serif; font-size:22px; font-weight:800;
  letter-spacing:-.5px; color:var(--ink); line-height:1;
}
.logo-dot { color:var(--orange) }
.logo-tag {
  display:block; font-size:9px; font-weight:500;
  letter-spacing:2.5px; text-transform:uppercase;
  color:var(--muted); margin-top:3px;
}

/* Nav */
.main-nav { display:flex; align-items:center; gap:2px; justify-content:center }
.main-nav a {
  font-size:13.5px; font-weight:400; color:var(--muted);
  padding:7px 11px; border-radius:var(--r-sm); transition:all .18s; white-space:nowrap;
}
.main-nav a:hover { color:var(--ink); background:var(--cream-2) }
.main-nav a.active { color:var(--ink); font-weight:500 }
.main-nav .nav-hot { color:var(--orange); font-weight:600; background:var(--orange-lt) }
.main-nav .nav-hot:hover { background:var(--orange-md) }

/* Actions */
.h-actions { display:flex; align-items:center; gap:8px; flex-shrink:0 }

.h-search {
  display:flex; align-items:center; gap:8px;
  background:var(--cream-2); border:1.5px solid var(--border);
  border-radius:var(--r-sm); padding:0 14px; height:40px; transition:all .2s;
}
.h-search:focus-within { background:var(--white); border-color:var(--orange); box-shadow:0 0 0 3px rgba(240,78,26,.10) }
.h-search input { background:none; border:none; outline:none; font-size:13px; color:var(--ink); width:150px }
.h-search input::placeholder { color:var(--muted) }

.h-icon {
  position:relative; width:40px; height:40px;
  border-radius:var(--r-sm); border:1.5px solid var(--border);
  background:var(--white); display:flex; align-items:center; justify-content:center;
  font-size:17px; color:var(--ink-2); transition:all .2s;
}
.h-icon:hover { border-color:var(--orange); background:var(--orange-lt); transform:translateY(-1px) }
.h-badge {
  position:absolute; top:-6px; right:-6px;
  width:18px; height:18px; background:var(--orange);
  border-radius:50%; font-size:10px; font-weight:700;
  display:flex; align-items:center; justify-content:center;
  color:#fff; border:2px solid var(--cream);
}

/* Burger */
.h-burger {
  display:none; flex-direction:column; gap:5px;
  width:40px; height:40px; align-items:center; justify-content:center;
  border:1.5px solid var(--border); border-radius:var(--r-sm);
  background:var(--white); cursor:pointer;
}
.h-burger span {
  display:block; width:20px; height:2px;
  background:var(--ink); border-radius:2px; transition:all .28s;
}
.h-burger.open span:nth-child(1) { transform:translateY(7px) rotate(45deg) }
.h-burger.open span:nth-child(2) { opacity:0; transform:scaleX(0) }
.h-burger.open span:nth-child(3) { transform:translateY(-7px) rotate(-45deg) }

.mobile-nav {
  display:none; flex-direction:column; gap:2px;
  padding:12px 20px 20px; border-top:1px solid var(--border);
  background:var(--white); animation:fadeIn .2s var(--ease);
}
.mobile-nav.open { display:flex }
.mobile-nav a { display:block; padding:11px 14px; border-radius:var(--r-sm); font-size:14px; color:var(--ink); transition:background .15s }
.mobile-nav a:hover { background:var(--cream) }
.mobile-nav .nav-hot { color:var(--orange); font-weight:600 }
.mobile-nav-divider { height:1px; background:var(--border); margin:8px 0 }

/* ─── 9. HERO SLIDER ────────────────────────────────────────── */
.hero-slider { position:relative; overflow:hidden }
.slides-wrap  { position:relative }

.slide { display:none; min-height:88vh; position:relative; overflow:hidden; align-items:center }
.slide.active { display:flex }

/* Backgrounds */
.slide-bg { position:absolute; inset:0; transition:transform 9s ease }
.slide.active .slide-bg { transform:scale(1.04) }

.slide-light .slide-bg {
  background:
    radial-gradient(ellipse 70% 90% at 78% 50%, rgba(240,78,26,.08) 0%, transparent 55%),
    radial-gradient(ellipse 50% 60% at 8% 80%, rgba(232,160,32,.06) 0%, transparent 45%),
    linear-gradient(145deg, #fff 0%, #faf6f1 100%);
}
.slide-dark .slide-bg {
  background:
    radial-gradient(ellipse 60% 80% at 18% 50%, rgba(240,78,26,.18) 0%, transparent 50%),
    linear-gradient(145deg, #0e0d0b 0%, #1c1a16 100%);
}
.slide-gold .slide-bg {
  background:
    radial-gradient(ellipse 65% 80% at 72% 28%, rgba(232,160,32,.24) 0%, transparent 55%),
    radial-gradient(ellipse 40% 55% at 8% 72%, rgba(240,78,26,.10) 0%, transparent 45%),
    linear-gradient(145deg, #16100a 0%, #241a08 100%);
}

/* Grain + grille */
.slide-grid {
  position:absolute; inset:0;
  background-image:linear-gradient(rgba(14,13,11,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(14,13,11,.025) 1px,transparent 1px);
  background-size:52px 52px;
}
.slide-dark .slide-grid,
.slide-gold .slide-grid {
  background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);
}

/* Inner grid */
.slide-inner {
  position:relative; z-index:2; max-width:var(--max); margin:0 auto;
  padding:0 var(--gap); width:100%;
  display:grid; grid-template-columns:1fr 1fr;
  align-items:center; gap:48px; min-height:88vh;
}

/* Content */
.slide-content { padding:60px 0 }

.slide-kicker {
  display:inline-flex; align-items:center; gap:8px;
  background:var(--orange-lt); border:1px solid rgba(240,78,26,.18);
  border-radius:100px; padding:5px 14px;
  font-size:11.5px; font-weight:600; letter-spacing:.5px; color:var(--orange);
  margin-bottom:22px; opacity:0; transform:translateY(14px);
  transition:opacity .5s .1s, transform .5s .1s;
}
.slide-dark .slide-kicker,
.slide-gold .slide-kicker { background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.15); color:rgba(255,255,255,.8) }
.slide.active .slide-kicker { opacity:1; transform:none }
.kicker-dot { width:6px; height:6px; background:currentColor; border-radius:50%; animation:pulse 1.6s infinite }

.slide-title {
  font-family:'Oswald',sans-serif;
  font-size:clamp(46px,5.8vw,88px); font-weight:800;
  line-height:.93; letter-spacing:-2.5px; color:var(--ink);
  margin-bottom:20px; opacity:0; transform:translateY(22px);
  transition:opacity .55s .2s, transform .55s .2s;
}
.slide-dark .slide-title,
.slide-gold .slide-title { color:#fff }
.slide.active .slide-title { opacity:1; transform:none }
.slide-title .c-or  { color:var(--orange) }
.slide-title .c-gd  { color:var(--gold) }
.slide-title .c-str {
  -webkit-text-stroke:2.5px var(--ink); color:transparent;
}
.slide-dark  .c-str { -webkit-text-stroke-color:rgba(255,255,255,.5) }
.slide-gold  .c-str { -webkit-text-stroke-color:rgba(255,255,255,.4) }

.slide-sub {
  font-size:15.5px; font-weight:300; color:var(--muted);
  line-height:1.75; max-width:440px; margin-bottom:34px;
  opacity:0; transform:translateY(18px);
  transition:opacity .5s .32s, transform .5s .32s;
}
.slide-dark .slide-sub,
.slide-gold .slide-sub { color:rgba(255,255,255,.5) }
.slide.active .slide-sub { opacity:1; transform:none }

.slide-ctas {
  display:flex; gap:12px; flex-wrap:wrap; margin-bottom:34px;
  opacity:0; transform:translateY(14px);
  transition:opacity .5s .42s, transform .5s .42s;
}
.slide.active .slide-ctas { opacity:1; transform:none }

.slide-pills {
  display:flex; gap:8px; flex-wrap:wrap;
  opacity:0; transition:opacity .6s .55s;
}
.slide.active .slide-pills { opacity:1 }
.s-pill {
  display:inline-flex; align-items:center; gap:6px;
  padding:5px 12px; background:var(--cream-2); border:1px solid var(--border);
  border-radius:100px; font-size:12px; color:var(--ink-2);
}
.slide-dark .s-pill,
.slide-gold .s-pill { background:rgba(255,255,255,.07); border-color:rgba(255,255,255,.12); color:rgba(255,255,255,.62) }

/* Visual */
.slide-visual {
  display:flex; align-items:center; justify-content:center;
  position:relative; padding:56px 0;
}

.slide-pcard {
  background:var(--white); border-radius:var(--r-xl);
  box-shadow:var(--sh-xl); border:1px solid var(--border);
  overflow:hidden; width:300px;
  transition:transform .4s var(--ease);
}
.slide-pcard:hover { transform:translateY(-8px) rotate(.4deg) }
.spc-img {
  aspect-ratio:1; background:var(--cream);
  display:flex; align-items:center; justify-content:center;
  padding:32px; position:relative; overflow:hidden;
}
.spc-img::before {
  content:''; position:absolute; inset:0;
  background:radial-gradient(circle at 60% 35%,rgba(240,78,26,.06),transparent 65%);
}
.spc-img img { width:88%; height:88%; object-fit:contain; animation:float 4.5s ease-in-out infinite; position:relative; z-index:1 }
.spc-img-emoji { font-size:90px; animation:float 4.5s ease-in-out infinite }
.spc-badge {
  position:absolute; top:12px; left:12px; z-index:2;
  background:var(--orange); color:#fff;
  font-size:10px; font-weight:700; letter-spacing:1px; text-transform:uppercase;
  padding:4px 10px; border-radius:6px;
}
.spc-info { padding:18px }
.spc-stars { color:var(--gold); font-size:12px; margin-bottom:5px }
.spc-cat { font-size:10px; font-weight:600; letter-spacing:1.5px; text-transform:uppercase; color:var(--orange); margin-bottom:4px }
.spc-name { font-family:'Oswald',sans-serif; font-size:15px; font-weight:700; color:var(--ink); line-height:1.3; margin-bottom:12px }
.spc-foot { display:flex; align-items:center; justify-content:space-between; gap:8px }
.spc-price { font-family:'Oswald',sans-serif; font-size:22px; font-weight:800; color:var(--ink) }
.spc-add {
  background:var(--ink); color:#fff; border:none; border-radius:var(--r-sm);
  padding:9px 16px; font-size:13px; font-weight:600; cursor:pointer; transition:all .2s;
}
.spc-add:hover { background:var(--orange) }

/* Chips flottantes */
.s-chip {
  position:absolute; background:var(--white); border:1px solid var(--border);
  border-radius:var(--r); box-shadow:var(--sh-lg);
  padding:10px 14px; display:flex; align-items:center; gap:10px; z-index:10;
}
.slide-dark .s-chip,
.slide-gold .s-chip { background:rgba(255,255,255,.10); backdrop-filter:blur(14px); border-color:rgba(255,255,255,.14) }
.s-chip-1 { top:28px;  left:-22px;  animation:bobble 5.5s ease-in-out infinite }
.s-chip-2 { bottom:50px; right:-18px; animation:bobble 6.5s ease-in-out infinite 1.3s }
.chip-icon { font-size:22px }
.chip-lbl { font-size:10.5px; color:var(--muted) }
.chip-val { font-family:'Oswald',sans-serif; font-size:13px; font-weight:700; color:var(--ink); line-height:1.2 }
.slide-dark .chip-lbl, .slide-gold .chip-lbl { color:rgba(255,255,255,.5) }
.slide-dark .chip-val, .slide-gold .chip-val { color:#fff }

.slide-emoji { font-size:120px; filter:drop-shadow(0 20px 50px rgba(14,13,11,.1)); animation:float 5s ease-in-out infinite; text-align:center }

/* Contrôles */
.slider-btn {
  position:absolute; top:50%; z-index:20; transform:translateY(-50%);
  width:46px; height:46px; border-radius:50%;
  background:rgba(255,255,255,.92); border:1.5px solid var(--border);
  display:flex; align-items:center; justify-content:center;
  font-size:18px; cursor:pointer; transition:all .22s; box-shadow:var(--sh);
}
.slider-btn:hover { background:var(--orange); color:#fff; border-color:var(--orange) }
.slider-prev { left:18px }
.slider-next { right:18px }

.slider-dots { position:absolute; bottom:28px; left:50%; transform:translateX(-50%); display:flex; gap:10px; z-index:20 }
.s-dot { width:8px; height:8px; border-radius:50%; background:rgba(14,13,11,.18); cursor:pointer; transition:all .25s; border:none }
.s-dot.active { background:var(--orange); transform:scale(1.35) }

.slider-bar { position:absolute; bottom:0; left:0; height:3px; background:var(--orange); width:0%; z-index:20 }
.slider-bar.run { transition:width 5s linear }

/* ─── 10. SOCIAL PROOF BAR ──────────────────────────────────── */
.spb { background:var(--ink); color:#fff; padding:12px 0 }
.spb-inner { display:flex; align-items:center; justify-content:center; gap:28px; flex-wrap:wrap }
.spb-item { font-size:13px; color:rgba(255,255,255,.58) }
.spb-item strong { color:#fff; font-weight:600 }
.spb-sep { width:1px; height:16px; background:rgba(255,255,255,.14); flex-shrink:0 }

/* ─── 11. MARQUEE ───────────────────────────────────────────── */
.marquee-bar { background:var(--orange); padding:11px 0; overflow:hidden }
.mq-track { display:flex; white-space:nowrap; animation:mq 24s linear infinite }
.mq-track:hover { animation-play-state:paused }
.mq-item {
  font-family:'Oswald',sans-serif; font-size:11.5px; font-weight:700;
  letter-spacing:2.5px; text-transform:uppercase; color:rgba(255,255,255,.68);
  padding:0 28px; display:flex; align-items:center; gap:10px; flex-shrink:0;
}
.mq-sep { color:rgba(255,255,255,.35); font-size:5px }

/* ─── 12. SECTION HEADER ────────────────────────────────────── */
.sec-hd { display:flex; align-items:flex-end; justify-content:space-between; margin-bottom:36px; gap:16px }
.sec-eye {
  font-size:11px; font-weight:600; letter-spacing:3px; text-transform:uppercase;
  color:var(--orange); display:flex; align-items:center; gap:8px; margin-bottom:8px;
}
.sec-eye::before { content:''; width:18px; height:2px; background:var(--orange); border-radius:1px }
.sec-title {
  font-family:'Oswald',sans-serif; font-size:clamp(26px,3vw,42px); font-weight:800;
  letter-spacing:-1px; color:var(--ink); line-height:1;
}
.sec-title .muted { color:var(--muted); font-weight:400 }

.link-all {
  display:inline-flex; align-items:center; gap:6px;
  font-size:13px; font-weight:500; color:var(--ink);
  border:1.5px solid var(--border-2); border-radius:var(--r-sm);
  padding:9px 16px; transition:all .2s; white-space:nowrap; flex-shrink:0;
}
.link-all:hover { border-color:var(--orange); color:var(--orange); background:var(--orange-lt) }
.link-all::after { content:' →'; transition:letter-spacing .2s }
.link-all:hover::after { letter-spacing:2px }

/* ─── 13. CATÉGORIES ────────────────────────────────────────── */
.cats-grid {
  display:grid; grid-template-columns:repeat(4,1fr);
  grid-template-rows:repeat(2,164px); gap:14px;
}
.cat-card {
  border-radius:var(--r); overflow:hidden; border:1.5px solid var(--border);
  background:var(--white); display:flex; flex-direction:column;
  transition:all .32s var(--ease); cursor:pointer;
}
.cat-card:hover { transform:translateY(-5px); box-shadow:var(--sh-lg); border-color:transparent }
.cat-card.span2 { grid-column:span 2; grid-row:span 2 }
.cat-visual { flex:1; display:flex; align-items:center; justify-content:center; overflow:hidden; padding:20px; transition:transform .4s var(--ease) }
.cat-card:hover .cat-visual { transform:scale(1.07) }
.cat-emoji { font-size:50px }
.cat-card.span2 .cat-emoji { font-size:84px }
.cat-foot {
  padding:12px 14px; border-top:1px solid var(--border); background:var(--white);
  display:flex; align-items:center; justify-content:space-between; gap:8px;
}
.cat-card.span2 .cat-foot { padding:16px 20px }
.cat-name { font-family:'Oswald',sans-serif; font-size:13.5px; font-weight:700; color:var(--ink) }
.cat-card.span2 .cat-name { font-size:18px }
.cat-count { font-size:11px; color:var(--muted); margin-top:2px }
.cat-arr {
  width:30px; height:30px; border-radius:var(--r-sm); background:var(--cream-2);
  display:flex; align-items:center; justify-content:center; font-size:14px; color:var(--muted);
  transition:all .2s; flex-shrink:0;
}
.cat-card:hover .cat-arr { background:var(--orange); color:#fff }

/* ─── 14. URGENCY STRIP ─────────────────────────────────────── */
.urgency-strip {
  background:linear-gradient(90deg,#fff9f7,var(--orange-lt),#fff9f7);
  border:1.5px solid rgba(240,78,26,.16); border-radius:var(--r);
  padding:18px 24px; display:flex; align-items:center; gap:20px;
  flex-wrap:wrap; margin-bottom:12px;
  position:relative; overflow:hidden;
}
.urgency-strip::before { content:''; position:absolute; left:0; top:0; bottom:0; width:4px; background:var(--orange) }
.us-icon { font-size:28px; flex-shrink:0 }
.us-body { flex:1 }
.us-title { font-family:'Oswald',sans-serif; font-size:15px; font-weight:800; color:var(--ink) }
.us-sub { font-size:12.5px; color:var(--muted); margin-top:2px }

.countdown { display:flex; align-items:center; gap:6px; flex-shrink:0 }
.cd-box { background:var(--orange); color:#fff; border-radius:var(--r-sm); min-width:52px; text-align:center; padding:6px 4px }
.cd-num { font-family:'Oswald',sans-serif; font-size:22px; font-weight:800; line-height:1 }
.cd-lbl { font-size:8px; letter-spacing:1.5px; text-transform:uppercase; opacity:.8 }
.cd-sep { font-family:'Oswald',sans-serif; font-size:20px; font-weight:800; color:var(--orange); margin-bottom:10px }

/* ─── 15. PRODUCT CARDS ─────────────────────────────────────── */
.products-grid   { display:grid; gap:14px }
.products-grid-5 { grid-template-columns:repeat(5,1fr) }
.products-grid-4 { grid-template-columns:repeat(4,1fr) }
.products-grid-3 { grid-template-columns:repeat(3,1fr) }

.product-card {
  background:var(--white); border-radius:var(--r); border:1.5px solid var(--border);
  overflow:hidden; display:flex; flex-direction:column;
  transition:all .32s var(--ease); position:relative;
}
.product-card:hover { transform:translateY(-6px); box-shadow:var(--sh-lg); border-color:transparent }

.pc-img {
  aspect-ratio:1; background:var(--cream);
  display:flex; align-items:center; justify-content:center;
  padding:24px; position:relative; overflow:hidden;
}
.pc-img img { width:80%; height:80%; object-fit:contain; transition:transform .4s var(--ease) }
.product-card:hover .pc-img img { transform:scale(1.09) }
.pc-no-img { font-size:48px; color:var(--muted); display:flex; align-items:center; justify-content:center; width:100%; height:100% }

.pc-badge {
  position:absolute; top:10px; left:10px;
  font-size:9.5px; font-weight:700; letter-spacing:.8px; text-transform:uppercase;
  padding:4px 9px; border-radius:6px; line-height:1;
}
.b-sale  { background:var(--orange); color:#fff }
.b-new   { background:var(--ink);    color:#fff }
.b-hot   { background:var(--red);    color:#fff }
.b-stock { background:var(--green-lt); color:var(--green) }
.b-out   { background:var(--cream-3); color:var(--muted) }

.pc-wish {
  position:absolute; top:10px; right:10px; width:32px; height:32px;
  border-radius:50%; background:var(--white); box-shadow:var(--sh-sm);
  display:flex; align-items:center; justify-content:center; font-size:14px;
  opacity:0; transform:scale(.8); transition:all .22s; cursor:pointer; border:none;
}
.pc-wish.active { color:var(--red); opacity:1; transform:scale(1) }
.product-card:hover .pc-wish { opacity:1; transform:scale(1) }
.pc-wish:hover { background:var(--red-lt); color:var(--red) }

.pc-scarcity {
  position:absolute; bottom:8px; left:8px; right:8px;
  background:rgba(14,13,11,.88); color:#fff; border-radius:7px;
  padding:5px 9px; font-size:11px; font-weight:500; text-align:center;
  opacity:0; transform:translateY(6px); transition:all .25s;
}
.product-card:hover .pc-scarcity { opacity:1; transform:none }

.pc-body { padding:14px; flex:1; display:flex; flex-direction:column }
.pc-cat { font-size:10px; font-weight:600; letter-spacing:1.5px; text-transform:uppercase; color:var(--orange); margin-bottom:4px }
.pc-name-link { text-decoration:none; color:inherit }
.pc-name {
  font-size:13px; font-weight:400; color:var(--ink-2); line-height:1.45; flex:1;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
  min-height:38px; margin-bottom:8px; transition:color .2s;
}
.pc-name-link:hover .pc-name { color:var(--orange) }

.pc-stars { display:flex; align-items:center; gap:2px; margin-bottom:10px; font-size:11px }
.pc-nb-avis { font-size:11px; color:var(--muted); margin-left:4px }

.pc-foot { display:flex; align-items:center; justify-content:space-between; gap:8px }
.pc-price { font-family:'Oswald',sans-serif; font-size:20px; font-weight:800; color:var(--ink); line-height:1 }
.pc-old   { font-size:11.5px; color:var(--muted); text-decoration:line-through; margin-top:2px }
.pc-add {
  width:36px; height:36px; border-radius:var(--r-sm); background:var(--ink); color:#fff;
  border:none; display:flex; align-items:center; justify-content:center;
  font-size:22px; font-weight:300; transition:all .22s; flex-shrink:0; cursor:pointer;
}
.pc-add:hover   { background:var(--orange); transform:scale(1.1) }
.pc-add.added   { background:var(--green) }
.pc-add-off {
  width:36px; height:36px; border-radius:var(--r-sm); background:var(--cream-2);
  color:var(--muted); display:flex; align-items:center; justify-content:center; font-size:14px; flex-shrink:0;
}

/* ─── 16. PROMO BANNERS ─────────────────────────────────────── */
.promo-banners { display:grid; grid-template-columns:1fr 1fr; gap:16px }
.promo-banner {
  border-radius:var(--r-lg); overflow:hidden; position:relative;
  min-height:220px; display:flex; align-items:center;
  transition:transform .32s var(--ease); cursor:pointer;
}
.promo-banner:hover { transform:scale(1.015) }
.pb-green { background:linear-gradient(130deg,#0a1a12 0%,#1e3a2e 100%) }
.pb-gold  { background:linear-gradient(130deg,#1a1208 0%,#3a2808 100%) }
.pb-deco { position:absolute; right:-40px; top:-40px; width:220px; height:220px; border-radius:50%; opacity:.12 }
.pb-green .pb-deco { background:var(--green) }
.pb-gold  .pb-deco { background:var(--gold) }
.pb-inner { position:relative; z-index:2; padding:36px; display:flex; align-items:center; gap:28px; width:100% }
.pb-emoji { font-size:56px; flex-shrink:0; filter:drop-shadow(0 6px 16px rgba(0,0,0,.3)) }
.pb-title { font-family:'Oswald',sans-serif; font-size:22px; font-weight:800; color:#fff; line-height:1.1; margin-bottom:8px }
.pb-sub   { font-size:13px; color:rgba(255,255,255,.5); margin-bottom:16px }
.pb-btn {
  display:inline-flex; align-items:center; gap:6px; background:#fff; color:var(--ink);
  font-family:'DM Sans',sans-serif; font-size:12.5px; font-weight:600;
  padding:9px 18px; border-radius:var(--r-sm); transition:all .2s;
}
.pb-green:hover .pb-btn { background:var(--green); color:#fff }
.pb-gold:hover  .pb-btn { background:var(--gold); color:var(--ink) }

/* ─── 17. HERO PROMO FULL-WIDTH ─────────────────────────────── */
.hero-promo { background:var(--ink); position:relative; overflow:hidden }
.hp-fx {
  position:absolute; inset:0;
  background:radial-gradient(ellipse 55% 90% at 82% 50%,rgba(240,78,26,.22) 0%,transparent 55%),
    radial-gradient(ellipse 35% 55% at 5% 80%,rgba(232,160,32,.10) 0%,transparent 50%);
}
.hp-grid {
  position:absolute; inset:0;
  background-image:linear-gradient(rgba(255,255,255,.03) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.03) 1px,transparent 1px);
  background-size:56px 56px;
}
.hp-inner { position:relative; z-index:2; display:grid; grid-template-columns:1fr 380px; align-items:center; gap:48px; min-height:440px }
.hp-content { padding:64px 0 }
.hp-kicker {
  display:inline-flex; align-items:center; gap:8px;
  background:rgba(240,78,26,.18); border:1px solid rgba(240,78,26,.32); border-radius:100px;
  padding:5px 14px; font-size:11px; font-weight:600; letter-spacing:1px; text-transform:uppercase;
  color:#ff8260; margin-bottom:20px;
}
.hp-title { font-family:'Oswald',sans-serif; font-size:clamp(38px,5vw,70px); font-weight:800; color:#fff; line-height:.93; letter-spacing:-1.5px; margin-bottom:16px }
.hp-title .c-or { color:var(--orange) }
.hp-desc { font-size:15px; color:rgba(255,255,255,.48); line-height:1.75; max-width:400px; margin-bottom:32px }
.hp-countdown { display:flex; gap:10px; align-items:center; margin-bottom:32px }
.hp-box { background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.1); border-top:2px solid var(--orange); border-radius:var(--r-sm); min-width:66px; text-align:center; padding:10px 14px }
.hp-num { font-family:'Oswald',sans-serif; font-size:30px; font-weight:800; color:#fff; line-height:1 }
.hp-lbl { font-size:9px; letter-spacing:2px; text-transform:uppercase; color:rgba(255,255,255,.35); margin-top:3px }
.hp-sep { font-family:'Oswald',sans-serif; font-size:22px; font-weight:800; color:var(--orange); margin-bottom:14px }
.hp-visual { display:flex; align-items:center; justify-content:center; padding:48px 0 }
.hp-visual img { width:280px; height:280px; object-fit:contain; filter:drop-shadow(0 24px 60px rgba(240,78,26,.38)); animation:float 5.5s ease-in-out infinite }

/* ─── 18. FEATURES BAR ──────────────────────────────────────── */
.features-bar { background:var(--white); border-top:1px solid var(--border); border-bottom:1px solid var(--border); padding:36px 0 }
.fb-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--border) }
.fb-item { background:var(--white); padding:26px 22px; display:flex; align-items:flex-start; gap:14px; transition:background .2s }
.fb-item:hover { background:var(--cream) }
.fb-icon { font-size:26px; flex-shrink:0 }
.fb-title { font-family:'Oswald',sans-serif; font-size:14px; font-weight:700; color:var(--ink); margin-bottom:4px }
.fb-desc  { font-size:12.5px; color:var(--muted); line-height:1.55 }

/* ─── 19. BRANDS ────────────────────────────────────────────── */
.brands-row { display:flex; align-items:center; justify-content:center; gap:48px; flex-wrap:wrap }
.brand-name { font-family:'Oswald',sans-serif; font-size:15px; font-weight:800; letter-spacing:-.5px; text-transform:uppercase; color:var(--cream-3); transition:color .2s; cursor:pointer }
.brand-name:hover { color:var(--ink) }

/* ─── 20. REVIEWS ───────────────────────────────────────────── */
.reviews-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px }
.review-card { background:var(--white); border-radius:var(--r); border:1.5px solid var(--border); padding:24px; transition:all .28s }
.review-card:hover { transform:translateY(-4px); box-shadow:var(--sh) }
.rv-stars { font-size:14px; color:var(--gold); margin-bottom:10px }
.rv-text  { font-size:13.5px; color:var(--ink-2); line-height:1.7; font-style:italic; margin-bottom:18px }
.rv-author { display:flex; align-items:center; gap:10px }
.rv-avatar { width:38px; height:38px; border-radius:50%; background:var(--orange); color:#fff; display:flex; align-items:center; justify-content:center; font-family:'Oswald',sans-serif; font-size:14px; font-weight:800; flex-shrink:0 }
.rv-name { font-family:'Oswald',sans-serif; font-size:13px; font-weight:700 }
.rv-city { font-size:11.5px; color:var(--muted); margin-top:2px }

/* ─── 21. FOOTER ────────────────────────────────────────────── */
.site-footer { background:var(--ink); color:#fff }
.footer-top  { padding:72px 0 0 }
.footer-grid { display:grid; grid-template-columns:2fr 1fr 1fr 1.4fr; gap:52px; margin-bottom:56px }
.footer-desc { font-size:13px; color:rgba(255,255,255,.4); line-height:1.75; max-width:265px; margin-bottom:22px }
.footer-contacts { display:flex; flex-direction:column; gap:9px }
.fc-row { font-size:13px; color:rgba(255,255,255,.4) }
.fc-row a { color:rgba(255,255,255,.65); transition:color .2s }
.fc-row a:hover { color:#fff }
.footer-col h4 { font-family:'Oswald',sans-serif; font-size:12px; font-weight:700; letter-spacing:.5px; color:#fff; margin-bottom:18px }
.footer-col ul li { margin-bottom:10px }
.footer-col ul a { font-size:13px; color:rgba(255,255,255,.4); transition:color .2s }
.footer-col ul a:hover { color:#fff }
.footer-nl-desc { font-size:12.5px; color:rgba(255,255,255,.38); line-height:1.65; margin-bottom:14px }
.nl-row { display:flex; gap:6px }
.nl-row input { flex:1; background:rgba(255,255,255,.07); border:1.5px solid rgba(255,255,255,.1); border-radius:var(--r-sm); padding:11px 14px; font-family:'DM Sans',sans-serif; font-size:13px; color:#fff; outline:none; transition:border-color .2s }
.nl-row input::placeholder { color:rgba(255,255,255,.3) }
.nl-row input:focus { border-color:var(--orange) }
.nl-row button { background:var(--orange); color:#fff; border:none; border-radius:var(--r-sm); padding:11px 16px; font-size:17px; cursor:pointer; transition:background .2s }
.nl-row button:hover { background:var(--orange-dk) }
.footer-nl-form small { font-size:11px; color:rgba(255,255,255,.22); margin-top:7px; display:block }
.footer-payments { margin-top:22px }
.fp-label { font-size:10.5px; letter-spacing:1.5px; text-transform:uppercase; color:rgba(255,255,255,.25); margin-bottom:10px }
.fp-badges { display:flex; flex-wrap:wrap; gap:6px }
.fp-badges span { background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.1); border-radius:6px; padding:4px 10px; font-size:11px; color:rgba(255,255,255,.45) }
.footer-bottom { border-top:1px solid rgba(255,255,255,.08); padding:22px 0 }
.footer-bottom-inner { display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap }
.footer-copy { font-size:12px; color:rgba(255,255,255,.28) }
.footer-copy strong { color:var(--orange) }
.footer-socials { display:flex; gap:8px }
.soc-btn { width:36px; height:36px; border-radius:var(--r-sm); border:1.5px solid rgba(255,255,255,.1); display:flex; align-items:center; justify-content:center; font-size:12.5px; color:rgba(255,255,255,.35); transition:all .2s }
.soc-btn:hover { border-color:var(--orange); color:var(--orange) }

/* ─── 22. WA FLOAT + TOAST ──────────────────────────────────── */
.wa-float {
  position:fixed; bottom:24px; right:24px; z-index:999;
  width:56px; height:56px; border-radius:50%;
  background:#25D366; color:#fff; display:flex; align-items:center; justify-content:center;
  font-size:26px; box-shadow:0 6px 28px rgba(37,211,102,.45);
  animation:float 3.2s ease-in-out infinite; border:3px solid rgba(255,255,255,.3);
}
.wa-float:hover { transform:scale(1.12) !important; animation:none }

.cart-toast {
  position:fixed; bottom:28px; left:50%; transform:translateX(-50%);
  background:var(--ink); color:#fff; border-radius:var(--r); padding:14px 22px;
  display:flex; align-items:center; gap:16px; font-size:13.5px;
  box-shadow:var(--sh-xl); z-index:9998; white-space:nowrap;
  animation:toastIn .32s var(--ease);
}
.cart-toast a { color:var(--orange); font-weight:500; border-bottom:1px solid rgba(240,78,26,.35) }

/* ─── 23. PAGES COMMUNES ────────────────────────────────────── */
.page-hero { padding:48px 0 40px; border-bottom:1px solid var(--border); background:var(--white) }
.breadcrumb { display:flex; align-items:center; gap:6px; flex-wrap:wrap; font-size:12.5px; color:var(--muted); margin-bottom:16px }
.breadcrumb a { color:var(--orange) }
.breadcrumb a:hover { color:var(--orange-dk) }
.page-title { font-family:'Oswald',sans-serif; font-size:clamp(28px,4vw,50px); font-weight:800; letter-spacing:-1px; color:var(--ink); line-height:1 }
.count-tag {
  display:inline-flex; background:var(--orange-lt); color:var(--orange);
  border-radius:100px; padding:3px 12px;
  font-family:'DM Sans',sans-serif; font-size:15px; font-weight:400; margin-left:10px; vertical-align:middle;
}

/* Pagination */
.pagination { display:flex; gap:8px; justify-content:center; flex-wrap:wrap; margin-top:44px }
.pg-btn {
  min-width:40px; padding:9px 14px; border-radius:var(--r-sm); border:1.5px solid var(--border);
  background:var(--white); font-size:13px; font-weight:500; color:var(--ink-2);
  transition:all .2s; text-decoration:none; display:flex; align-items:center; justify-content:center;
}
.pg-btn:hover { border-color:var(--orange); color:var(--orange); background:var(--orange-lt) }
.pg-active    { background:var(--orange) !important; color:#fff !important; border-color:var(--orange) !important }
.pg-disabled  { opacity:.38; pointer-events:none }
.pg-ellipsis  { display:flex; align-items:center; padding:0 8px; color:var(--muted) }

/* Empty state */
.empty-state { text-align:center; padding:64px 24px; display:flex; flex-direction:column; align-items:center; gap:16px }
.empty-state-icon { font-size:64px; opacity:.4 }
.empty-state h2 { font-family:'Oswald',sans-serif; font-size:22px; font-weight:800; color:var(--ink) }
.empty-state p  { font-size:14px; color:var(--muted); max-width:360px }

/* Alert */
.alert { padding:13px 18px; border-radius:var(--r-sm); font-size:13.5px; margin-bottom:14px; display:flex; align-items:center; gap:10px }
.alert-error   { background:var(--red-lt);   border:1px solid rgba(224,28,58,.2); color:var(--red) }
.alert-success { background:var(--green-lt); border:1px solid rgba(26,138,74,.2); color:var(--green) }
.alert-info    { background:var(--blue-lt);  border:1px solid rgba(37,99,235,.2); color:var(--blue) }

/* ─── 24. AUTH ──────────────────────────────────────────────── */
.auth-wrap { min-height:calc(100vh - 130px); display:flex; align-items:center; justify-content:center; padding:48px var(--gap) }
.auth-card { background:var(--white); border-radius:var(--r-xl); border:1.5px solid var(--border); padding:48px; width:100%; max-width:440px; box-shadow:var(--sh-lg) }
.auth-logo { display:flex; justify-content:center; margin-bottom:24px }
.auth-title { font-family:'Oswald',sans-serif; font-size:28px; font-weight:800; text-align:center; color:var(--ink); margin-bottom:6px }
.auth-sub   { font-size:14px; color:var(--muted); text-align:center; margin-bottom:28px }
.auth-form  { display:flex; flex-direction:column; gap:18px }
.btn-auth   { width:100%; padding:14px; background:var(--orange); color:#fff; border:none; border-radius:var(--r-sm); font-family:'DM Sans',sans-serif; font-size:15px; font-weight:600; cursor:pointer; transition:all .22s }
.btn-auth:hover { background:var(--orange-dk); transform:translateY(-2px); box-shadow:var(--sh-or) }
.auth-switch { text-align:center; margin-top:22px; font-size:13.5px; color:var(--muted) }
.auth-switch a { color:var(--orange); font-weight:500 }
.forgot-link { float:right; font-size:12px; color:var(--orange) }

/* ─── 25. PANIER ────────────────────────────────────────────── */
.cart-layout { display:grid; grid-template-columns:1fr 360px; gap:28px; align-items:flex-start }
.cart-item {
  display:grid; grid-template-columns:80px 1fr auto auto auto auto;
  align-items:center; gap:16px; background:var(--white);
  border-radius:var(--r); border:1.5px solid var(--border);
  padding:18px; margin-bottom:10px; transition:box-shadow .2s;
}
.cart-item:hover { box-shadow:var(--sh-sm) }
.ci-img { width:80px; height:80px; border-radius:var(--r-sm); overflow:hidden; background:var(--cream); display:flex; align-items:center; justify-content:center; flex-shrink:0 }
.ci-img img { width:100%; height:100%; object-fit:contain; padding:8px }
.ci-name { font-size:14px; font-weight:500; color:var(--ink); margin-bottom:4px; transition:color .2s }
.ci-name:hover { color:var(--orange) }
.ci-cat   { font-size:11.5px; color:var(--muted) }

.qty-ctrl { display:flex; align-items:center; border:1.5px solid var(--border); border-radius:var(--r-sm); overflow:hidden }
.qty-btn  { width:34px; height:34px; background:var(--cream-2); border:none; font-size:17px; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:background .18s }
.qty-btn:hover { background:var(--orange-lt); color:var(--orange) }
.qty-val  { min-width:38px; text-align:center; font-family:'Oswald',sans-serif; font-size:15px; font-weight:700; padding:0 4px }

.ci-price { font-size:14px; color:var(--muted); text-align:right; min-width:80px }
.ci-total { font-family:'Oswald',sans-serif; font-size:17px; font-weight:800; color:var(--ink); text-align:right; min-width:100px }
.ci-del   { width:30px; height:30px; border-radius:50%; border:1.5px solid var(--border); background:none; color:var(--muted); font-size:14px; display:flex; align-items:center; justify-content:center; cursor:pointer; transition:all .2s }
.ci-del:hover { border-color:var(--red); color:var(--red); background:var(--red-lt) }

.cart-summary { background:var(--white); border-radius:var(--r-lg); border:1.5px solid var(--border); padding:28px; position:sticky; top:88px }
.cart-summary h2 { font-family:'Oswald',sans-serif; font-size:18px; font-weight:800; margin-bottom:22px }
.cs-row { display:flex; justify-content:space-between; align-items:center; padding:10px 0; border-bottom:1px solid var(--border); font-size:13.5px }
.free-ship-ok   { color:var(--green); font-weight:600 }
.free-ship-hint { background:var(--green-lt); border:1px solid rgba(26,138,74,.2); border-radius:var(--r-sm); padding:8px 12px; font-size:12px; color:var(--green); margin:8px 0 }
.coupon-form { display:flex; gap:6px; margin:14px 0 }
.coupon-form input { flex:1; padding:10px 12px; border:1.5px solid var(--border); border-radius:var(--r-sm); font-family:'DM Sans',sans-serif; font-size:13px; outline:none; transition:border-color .2s }
.coupon-form input:focus { border-color:var(--orange) }
.coupon-form button { background:var(--ink); color:#fff; border:none; border-radius:var(--r-sm); padding:10px 14px; font-size:13px; font-weight:500; cursor:pointer; transition:background .2s }
.coupon-form button:hover { background:var(--orange) }
.coupon-ok { background:var(--green-lt); color:var(--green); font-size:12.5px; padding:7px 11px; border-radius:var(--r-sm); margin-bottom:8px }
.cs-total { display:flex; justify-content:space-between; align-items:center; padding:16px 0 20px }
.cs-total .t-label { font-family:'Oswald',sans-serif; font-weight:700; font-size:15px }
.cs-total .t-amount { font-family:'Oswald',sans-serif; font-size:26px; font-weight:800; color:var(--ink) }
.btn-checkout { display:block; width:100%; padding:15px; background:var(--orange); color:#fff; border:none; border-radius:var(--r-sm); text-align:center; font-family:'DM Sans',sans-serif; font-size:15px; font-weight:600; cursor:pointer; transition:all .22s; margin-bottom:10px }
.btn-checkout:hover { background:var(--orange-dk); transform:translateY(-2px); box-shadow:var(--sh-or) }
.btn-continue-shop { display:block; text-align:center; padding:12px; border:1.5px solid var(--border); border-radius:var(--r-sm); font-size:13px; color:var(--ink-2); transition:all .2s }
.btn-continue-shop:hover { border-color:var(--ink) }
.csp-badges { display:flex; flex-wrap:wrap; gap:6px; margin-top:14px }
.csp-badges span { background:var(--cream-2); border:1px solid var(--border); border-radius:6px; padding:3px 9px; font-size:11px; color:var(--muted) }

/* ─── 26. CHECKOUT ──────────────────────────────────────────── */
.checkout-layout { display:grid; grid-template-columns:1fr 380px; gap:28px; align-items:flex-start }
.co-section { background:var(--white); border-radius:var(--r); border:1.5px solid var(--border); padding:28px; margin-bottom:16px }
.co-section h2 { font-family:'Oswald',sans-serif; font-size:17px; font-weight:800; margin-bottom:22px; display:flex; align-items:center; gap:8px }
.pay-opts { display:flex; flex-direction:column; gap:10px }
.pay-opt { display:flex; align-items:center; gap:14px; padding:14px 18px; border:1.5px solid var(--border); border-radius:var(--r-sm); cursor:pointer; transition:all .2s }
.pay-opt:hover { border-color:var(--orange); background:var(--orange-lt) }
.pay-opt input[type="radio"] { width:18px; height:18px; accent-color:var(--orange); flex-shrink:0 }
.pay-opt-label { font-size:14px; font-weight:500; color:var(--ink) }
.pay-opt-desc  { font-size:12px; color:var(--muted); margin-top:2px }
.btn-order { width:100%; padding:16px; background:var(--orange); color:#fff; border:none; border-radius:var(--r-sm); font-family:'DM Sans',sans-serif; font-size:16px; font-weight:600; cursor:pointer; transition:all .22s }
.btn-order:hover { background:var(--orange-dk); transform:translateY(-2px); box-shadow:var(--sh-or) }
.co-summary { background:var(--white); border-radius:var(--r-lg); border:1.5px solid var(--border); padding:24px; position:sticky; top:88px }
.co-summary h2 { font-family:'Oswald',sans-serif; font-size:16px; font-weight:800; margin-bottom:18px }
.co-item { display:flex; align-items:center; gap:12px; padding:10px 0; border-bottom:1px solid var(--border) }
.co-item img { width:48px; height:48px; object-fit:contain; border-radius:var(--r-sm); background:var(--cream); padding:6px; flex-shrink:0 }
.co-item-name  { font-size:13px; font-weight:500; color:var(--ink) }
.co-item-qty   { font-size:12px; color:var(--muted); margin-top:2px }
.co-item-price { font-family:'Oswald',sans-serif; font-size:14px; font-weight:700; color:var(--ink); margin-left:auto; flex-shrink:0 }
.cot-row  { display:flex; justify-content:space-between; padding:8px 0; font-size:13.5px; border-bottom:1px solid var(--border) }
.cot-total{ display:flex; justify-content:space-between; padding:14px 0 0 }
.cot-total span:first-child { font-family:'Oswald',sans-serif; font-size:15px; font-weight:700 }
.cot-total span:last-child  { font-family:'Oswald',sans-serif; font-size:22px; font-weight:800 }

/* ─── 27. CONFIRMATION ──────────────────────────────────────── */
.confirm-wrap { max-width:560px; margin:0 auto; padding:72px var(--gap); text-align:center }
.confirm-icon  { font-size:72px; margin-bottom:20px; animation:scaleIn .5s var(--ease) }
.confirm-title { font-family:'Oswald',sans-serif; font-size:36px; font-weight:800; color:var(--ink); margin-bottom:12px }
.confirm-sub   { font-size:15px; color:var(--muted); line-height:1.7; margin-bottom:24px }
.confirm-num   { background:var(--cream-2); border:1.5px solid var(--border); border-radius:var(--r-sm); padding:14px 24px; font-family:'Oswald',sans-serif; font-size:16px; font-weight:700; color:var(--ink); margin-bottom:28px; display:inline-block }
.btn-wa { display:inline-flex; align-items:center; justify-content:center; gap:8px; background:#25D366; color:#fff; border-radius:var(--r-sm); padding:13px 24px; font-family:'DM Sans',sans-serif; font-size:14px; font-weight:500; transition:all .22s; margin:8px }
.btn-wa:hover { background:#1da851; transform:translateY(-2px) }

/* ─── 28. SCROLLBAR ─────────────────────────────────────────── */
::-webkit-scrollbar { width:5px }
::-webkit-scrollbar-track { background:var(--cream) }
::-webkit-scrollbar-thumb { background:var(--orange); border-radius:5px }

/* ─── 29. RESPONSIVE : TABLETTE ≤1100px ────────────────────── */
@media (max-width:1100px) {
  :root { --gap:24px }
  .products-grid-5 { grid-template-columns:repeat(4,1fr) }
  .cats-grid { grid-template-columns:repeat(3,1fr); grid-template-rows:auto }
  .footer-grid { grid-template-columns:1fr 1fr; gap:36px }
  .hp-inner { grid-template-columns:1fr }
  .hp-visual { display:none }
}

/* ─── 30. RESPONSIVE : MOBILE ≤900px ───────────────────────── */
@media (max-width:900px) {
  .header-inner { grid-template-columns:auto auto }
  .main-nav { display:none }
  .h-search { display:none }
  .h-burger { display:flex }

  .slide-inner { grid-template-columns:1fr; min-height:auto; padding:40px var(--gap) 60px; gap:0 }
  .slide-visual { display:none }
  .slide-content { padding:48px 0 0 }
  .slide { min-height:auto }
  .slider-btn { display:none }

  .products-grid-5,
  .products-grid-4 { grid-template-columns:repeat(3,1fr) }
  .cats-grid { grid-template-columns:repeat(2,1fr) }
  .promo-banners { grid-template-columns:1fr }
  .fb-grid { grid-template-columns:repeat(2,1fr) }
  .reviews-grid { grid-template-columns:1fr 1fr }

  .cart-layout,
  .checkout-layout { grid-template-columns:1fr }
  .cart-summary,
  .co-summary { position:static }

  .sec-hd { flex-direction:column; align-items:flex-start; gap:10px }
}

/* ─── 31. RESPONSIVE : PETIT MOBILE ≤600px ─────────────────── */
@media (max-width:600px) {
  :root { --gap:16px }

  .urgency-bar { font-size:11.5px; gap:6px }
  .u-sep { display:none }

  .header-inner { height:60px }
  .logo-tag { display:none }
  .logo-name { font-size:19px }
  .h-actions { gap:6px }
  .h-icon { width:36px; height:36px; font-size:15px }

  .slide-title { font-size:clamp(34px,11vw,52px); letter-spacing:-1.5px }
  .slide-pills { display:none }

  .products-grid-5,
  .products-grid-4,
  .products-grid-3 { grid-template-columns:repeat(2,1fr); gap:10px }
  .cats-grid { gap:10px }
  .reviews-grid { grid-template-columns:1fr }

  .section { padding:52px 0 }
  .urgency-strip { padding:14px 16px; gap:12px }
  .countdown { gap:4px }
  .cd-box { min-width:46px }
  .cd-num { font-size:18px }

  .footer-grid { grid-template-columns:1fr; gap:28px }
  .footer-top  { padding-top:48px }
  .fb-grid { grid-template-columns:1fr }
  .footer-bottom-inner { flex-direction:column; text-align:center }
  .brands-row { gap:28px }

  .cart-layout { grid-template-columns:1fr }
  .cart-item { grid-template-columns:64px 1fr }
  .ci-price, .ci-del { display:none }
  .ci-total { min-width:auto; font-size:14px }

  .form-row { grid-template-columns:1fr }
  .auth-card { padding:32px 20px }

  .spb-inner { justify-content:flex-start }
  .spb-sep { display:none }

  .cart-toast { width:calc(100% - 32px); white-space:normal; flex-direction:column; gap:8px; text-align:center; bottom:16px }
}