/* =====================================================
   MONDO - Design
   Palette calme : bleu de la marque + bleu marine, or en touche,
   fond bleu-gris très clair. Le rouge est réservé aux Ventes Flash
   et aux étiquettes de réduction.
   ===================================================== */
:root {
  --blue: #0a84f7;
  --blue-dark: #0668c7;
  --navy: #0b2a4a;
  --navy-2: #123c6b;
  --sky: #eaf3fe;
  --gold: #fbb917;
  --gold-soft: #ffd25a;
  --gold-dark: #d99a00;
  --red: #e53935;
  --red-soft: #fdecea;
  --text: #1f2a37;
  --muted: #6b7785;
  --bg: #f3f6fa;
  --card: #fff;
  --line: #e3eaf2;
  --radius: 12px;
  --shadow: 0 2px 10px rgba(11, 42, 74, .06);
  --shadow-lg: 0 12px 28px rgba(11, 42, 74, .16);
  --ease: cubic-bezier(.2, .7, .2, 1);
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: "Segoe UI", Roboto, Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
  font-size: 15px;
}
[dir="rtl"] body, [dir="rtl"] button, [dir="rtl"] input, [dir="rtl"] select, [dir="rtl"] textarea { font-family: "Tajawal", "Segoe UI", Arial, sans-serif; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
h1, h2, h3 { margin: 0; }
.container { max-width: 1200px; margin: 0 auto; padding: 0 16px; }
.muted { color: var(--muted); }
::selection { background: var(--gold-soft); color: var(--navy); }

/* ---------- Animations ---------- */
@keyframes rise { from { opacity: 0; transform: translateY(22px); } }
@keyframes fade { from { opacity: 0; } }
@keyframes pop { from { opacity: 0; transform: scale(.94) translateY(10px); } }
@keyframes textIn { from { opacity: 0; transform: translateY(16px); } }
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes breathe { 0%, 100% { transform: scale(1); opacity: .9; } 50% { transform: scale(1.08); opacity: 1; } }
@keyframes bump { 0% { transform: scale(1); } 40% { transform: scale(1.5); } 100% { transform: scale(1); } }
@keyframes wiggle { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-14deg); } 60% { transform: rotate(10deg); } }
@keyframes glow { 0%, 100% { box-shadow: 0 0 0 0 rgba(255,255,255,.35); } 50% { box-shadow: 0 0 0 7px rgba(255,255,255,0); } }

/* Apparition en douceur quand on fait défiler la page */
.reveal:not(.in) { opacity: 0; }
.reveal.in { animation: rise .6s var(--ease) backwards; animation-delay: calc(var(--i, 0) * 70ms); }
#homeView:not([hidden]), #listView:not([hidden]), #tintView:not([hidden]) { animation: fade .4s ease; }

/* ---------- Buttons ---------- */
.btn {
  border: 0; border-radius: 10px; padding: 11px 20px;
  font-weight: 700; font-size: 15px; cursor: pointer; transition: background .2s, transform .15s, box-shadow .2s;
}
.btn:hover { transform: translateY(-1px); box-shadow: 0 6px 14px rgba(11, 42, 74, .18); }
.btn:active, .add-btn:active, .search button:active { transform: scale(.97); }
.btn-primary { background: var(--blue); color: #fff; }
.btn-primary:hover { background: var(--blue-dark); }
.btn-gold { background: var(--gold); color: var(--navy); }
.btn-gold:hover { background: var(--gold-soft); }
.btn-block { width: 100%; }

/* ---------- Header ---------- */
.header {
  background: linear-gradient(90deg, var(--blue-dark), var(--blue));
  position: sticky; top: 0; z-index: 20; transition: box-shadow .3s;
}
.header.scrolled { box-shadow: 0 6px 20px rgba(11, 42, 74, .28); }
.header-inner { display: flex; align-items: center; gap: 20px; height: 68px; transition: height .25s; }
.header.scrolled .header-inner { height: 58px; }
.logo img { height: 36px; width: auto; transition: transform .25s var(--ease); }
.logo:hover img { transform: scale(1.05); }
.search { flex: 1; display: flex; gap: 8px; }
.search input {
  flex: 1; border: 0; border-radius: 10px; padding: 11px 16px; font-size: 15px; min-width: 0;
  transition: box-shadow .2s; background: #fff; color: var(--text);
}
.search input:focus { outline: 0; box-shadow: 0 0 0 3px rgba(255, 210, 90, .75); }
.search button {
  background: var(--gold); color: var(--navy); border: 0; border-radius: 10px; padding: 0 18px;
  font-weight: 700; cursor: pointer; transition: background .2s, transform .15s;
}
.search button:hover { background: var(--gold-soft); }
.cart-btn {
  background: none; border: 0; color: #fff; font-size: 16px; font-weight: 600;
  display: flex; align-items: center; gap: 6px; cursor: pointer; position: relative; padding: 6px;
}
.cart-btn:hover .cart-icon { animation: wiggle .5s ease; }
.cart-icon { width: 26px; height: 26px; }
.lang-btn {
  background: rgba(255,255,255,.14); color: #fff; border: 1px solid rgba(255,255,255,.45);
  border-radius: 99px; padding: 6px 14px; font: inherit; font-weight: 700; cursor: pointer; white-space: nowrap;
  transition: background .2s;
}
.lang-btn:hover { background: rgba(255,255,255,.26); }
.cart-count {
  background: var(--gold); color: var(--navy); border-radius: 99px; font-size: 12px; font-weight: 700;
  min-width: 20px; height: 20px; display: grid; place-items: center; padding: 0 5px;
}
.cart-count.pop { animation: bump .45s var(--ease); }

/* ---------- Chips (mobile categories) ---------- */
.chips { display: none; gap: 8px; overflow-x: auto; padding-top: 12px; padding-bottom: 4px; scrollbar-width: none; }
.chip {
  background: #fff; border: 1px solid var(--line); border-radius: 99px; padding: 7px 14px; color: var(--navy-2);
  white-space: nowrap; font-size: 14px; font-weight: 600; cursor: pointer; transition: background .2s, color .2s, border-color .2s;
}
.chip:hover { background: var(--sky); border-color: var(--blue); color: var(--blue-dark); }

/* ---------- Grande bannière (carrousel) ---------- */
.carousel { position: relative; margin-top: 16px; border-radius: 18px; overflow: hidden; background: var(--navy); box-shadow: var(--shadow); }
.slides { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.slides::-webkit-scrollbar { display: none; }
.slide {
  flex: 0 0 100%; scroll-snap-align: start; position: relative; overflow: hidden; color: #fff;
  display: flex; align-items: center; justify-content: space-between;
  min-height: 300px; padding: 32px 56px;
}
/* Bannière "image" : la photo remplit toute la bannière (rognée proprement, jamais déformée) */
.slide-img { padding: 0; min-height: 300px; }
.slide-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 72% 50%; display: block; }
/* Photo + texte par-dessus : un voile sombre à gauche rend le texte lisible */
.slide-img.has-text { padding: 32px 56px; direction: ltr; }
.slide-img.has-text .scrim { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(11,42,74,.82) 0%, rgba(11,42,74,.55) 38%, rgba(11,42,74,0) 68%); z-index: 1; }
.slide-img.has-text .scrim.soft { background: linear-gradient(90deg, rgba(9,62,140,.62) 0%, rgba(9,62,140,.38) 40%, rgba(9,62,140,0) 70%); }
.slide-img.has-text .slide-text { z-index: 2; max-width: 52%; text-shadow: 0 2px 12px rgba(0,0,0,.35); }
.slide-img.has-text .slide-tag, .slide-img.has-text .slide-btn { text-shadow: none; }
/* En arabe : le bloc reste à gauche (sur le ciel, pas sur la camionnette), le texte s'écrit de droite à gauche */
[dir="rtl"] .slide-img.has-text .slide-text > * { unicode-bidi: plaintext; text-align: left; }
.slide-text { position: relative; z-index: 2; display: grid; gap: 10px; justify-items: start; max-width: 60%; }
.slide.active .slide-text > * { animation: textIn .7s var(--ease) backwards; }
.slide.active .slide-text > :nth-child(2) { animation-delay: .08s; }
.slide.active .slide-text > :nth-child(3) { animation-delay: .16s; }
.slide.active .slide-text > :nth-child(4) { animation-delay: .24s; }
.slide.active .slide-text > :nth-child(5) { animation-delay: .32s; }
.slide-kicker { font-size: 15px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; opacity: .9; }
.slide-big { font-size: 84px; font-weight: 800; line-height: 1; color: var(--gold-soft); letter-spacing: -2px; }
.slide-title { font-size: 26px; font-weight: 700; line-height: 1.2; }
.slide-tag { background: var(--gold-soft); color: var(--navy); font-weight: 700; font-size: 14px; padding: 5px 12px; border-radius: 6px; }
.slide-btn {
  margin-top: 8px; background: #fff; color: var(--navy); font-weight: 700; padding: 11px 22px;
  border-radius: 99px; display: inline-flex; align-items: center; gap: 8px; transition: transform .2s var(--ease), box-shadow .2s;
}
.slide:hover .slide-btn { transform: translateX(4px); box-shadow: 0 6px 16px rgba(0,0,0,.2); }
[dir="rtl"] .slide:hover .slide-btn { transform: translateX(-4px); }
.slide-art { position: relative; width: 300px; height: 260px; flex: none; display: grid; place-items: center; }
.ring { position: absolute; border-radius: 50%; border: 2px solid rgba(255,255,255,.25); }
.r1 { width: 140px; height: 140px; animation: breathe 3.5s ease-in-out infinite; }
.r2 { width: 220px; height: 220px; border-color: rgba(255,255,255,.18); animation: breathe 3.5s ease-in-out .6s infinite; }
.r3 { width: 300px; height: 300px; border: 2px dashed rgba(255,255,255,.2); animation: spin 40s linear infinite; }
.slide-icon {
  width: 120px; height: 120px; border-radius: 50%; background: rgba(255,255,255,.16);
  display: grid; place-items: center; backdrop-filter: blur(2px); box-shadow: 0 0 60px rgba(255,255,255,.25);
  animation: float 4s ease-in-out infinite;
}
.slide-icon .ico { width: 64px; height: 64px; }

.ico { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; width: 20px; height: 20px; }
[dir="rtl"] .ico.flip { transform: scaleX(-1); }

.car-arrow {
  position: absolute; top: 50%; transform: translateY(-50%); width: 42px; height: 42px; border-radius: 50%;
  border: 0; background: rgba(255,255,255,.92); cursor: pointer; display: grid; place-items: center; z-index: 3;
  box-shadow: 0 2px 10px rgba(0,0,0,.25); opacity: 0; transition: opacity .2s, transform .2s;
}
.car-arrow:hover { transform: translateY(-50%) scale(1.1); }
.carousel:hover .car-arrow { opacity: 1; }
.car-arrow svg { width: 22px; height: 22px; fill: none; stroke: var(--navy); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.car-prev { left: 12px; } .car-next { right: 12px; }
[dir="rtl"] .car-prev { left: auto; right: 12px; } [dir="rtl"] .car-next { right: auto; left: 12px; }
[dir="rtl"] .car-arrow svg { transform: scaleX(-1); }
.dots {
  position: absolute; bottom: 12px; left: 50%; transform: translateX(-50%); z-index: 3;
  display: flex; gap: 7px; background: rgba(11, 42, 74, .4); padding: 6px 10px; border-radius: 99px;
}
.dot { width: 9px; height: 9px; border-radius: 99px; border: 0; background: rgba(255,255,255,.55); cursor: pointer; padding: 0; transition: width .35s var(--ease), background .25s; }
.dot.active { width: 28px; background: var(--gold-soft); }

/* ---------- Tuiles des offres ---------- */
.offers-block { padding: 14px; position: relative; }
.offers { display: grid; grid-auto-flow: column; grid-auto-columns: 168px; gap: 14px; overflow-x: auto; padding: 4px 2px 8px; scrollbar-width: none; scroll-snap-type: x proximity; cursor: grab; }
.offers::-webkit-scrollbar { display: none; }
.offers > * { scroll-snap-align: start; }
.offers.dragging, .row-scroll.dragging { cursor: grabbing; scroll-snap-type: none; scroll-behavior: auto; user-select: none; }
.row-scroll { cursor: grab; }
.offer, .card img { -webkit-user-drag: none; user-select: none; }
.row-arrow {
  position: absolute; top: 50%; transform: translateY(-50%); width: 38px; height: 38px; border-radius: 50%;
  border: 1px solid var(--line); background: #fff; cursor: pointer; display: grid; place-items: center; z-index: 2;
  box-shadow: 0 2px 10px rgba(11,42,74,.2); opacity: 0; transition: opacity .2s, transform .2s;
}
.row-arrow:hover { transform: translateY(-50%) scale(1.1); }
.offers-block:hover .row-arrow { opacity: 1; }
.row-arrow svg { width: 20px; height: 20px; fill: none; stroke: var(--navy); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.row-prev { left: 4px; } .row-next { right: 4px; }
[dir="rtl"] .row-prev { left: auto; right: 4px; } [dir="rtl"] .row-next { right: auto; left: 4px; }
[dir="rtl"] .row-arrow svg { transform: scaleX(-1); }
@media (hover: none) { .row-arrow { display: none; } }
.offer {
  position: relative; overflow: hidden; color: var(--ink, #fff);
  background: linear-gradient(160deg, var(--c1), var(--c2)); border-radius: 18px;
  padding: 12px 12px 14px; display: flex; flex-direction: column; align-items: center; gap: 10px;
  min-height: 190px; transition: transform .3s var(--ease), box-shadow .3s;
}
.offer::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,.28) 50%, transparent 70%);
  transform: translateX(-120%); transition: transform .7s var(--ease);
}
.offer:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); }
.offer:hover::after { transform: translateX(120%); }
.offer-head { width: 100%; display: flex; justify-content: space-between; align-items: flex-start; gap: 6px; font-weight: 700; font-size: 15px; line-height: 1.2; }
.offer-head .ico { flex: none; width: 18px; height: 18px; transition: transform .25s var(--ease); }
.offer:hover .offer-head .ico { transform: translateX(4px); }
[dir="rtl"] .offer:hover .offer-head .ico.flip { transform: scaleX(-1) translateX(4px); }
/* Tuile avec photo : la photo remplit la tuile, un dégradé de la couleur de la tuile garde le titre lisible */
.offer.has-photo { justify-content: space-between; background: var(--c1); }
.offer-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.offer.has-photo::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, var(--c1) 0%, color-mix(in srgb, var(--c1) 55%, transparent) calc(var(--fade, 58%) / 2), transparent var(--fade, 58%), rgba(8,29,53,.55) 100%); }
/* Illustration dessinée : elle contient déjà ses couleurs, pas de voile */
.offer.has-art::before { display: none; }
.offer.has-art .offer-head { text-shadow: 0 1px 8px rgba(0,0,0,.35); }
.offer.has-photo .offer-head, .offer.has-photo .offer-pill { position: relative; z-index: 2; }
.offer.has-photo .offer-head { text-shadow: 0 1px 6px rgba(0,0,0,.35); }
.offer.has-photo .offer-circle { display: none; }
.offer.has-photo:hover .offer-img { transform: scale(1.1); }
.offer-circle {
  width: 84px; height: 84px; border-radius: 50%; background: #fff; color: var(--icon, var(--c1));
  display: grid; place-items: center; margin: auto 0; box-shadow: 0 4px 14px rgba(11,42,74,.2);
  transition: transform .4s var(--ease);
}
.offer:hover /* Tuile avec photo : la photo remplit la tuile, un dégradé de la couleur de la tuile garde le titre lisible */
.offer.has-photo { justify-content: space-between; background: var(--c1); }
.offer-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.offer.has-photo::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, var(--c1) 0%, color-mix(in srgb, var(--c1) 55%, transparent) calc(var(--fade, 58%) / 2), transparent var(--fade, 58%), rgba(8,29,53,.55) 100%); }
/* Illustration dessinée : elle contient déjà ses couleurs, pas de voile */
.offer.has-art::before { display: none; }
.offer.has-art .offer-head { text-shadow: 0 1px 8px rgba(0,0,0,.35); }
.offer.has-photo .offer-head, .offer.has-photo .offer-pill { position: relative; z-index: 2; }
.offer.has-photo .offer-head { text-shadow: 0 1px 6px rgba(0,0,0,.35); }
.offer.has-photo .offer-circle { display: none; }
.offer.has-photo:hover .offer-img { transform: scale(1.1); }
.offer-circle { transform: scale(1.1) rotate(-6deg); }
.offer-circle .ico { width: 44px; height: 44px; stroke-width: 1.7; }
.offer-pill { background: #fff; color: var(--navy); font-weight: 700; font-size: 13px; padding: 6px 12px; border-radius: 99px; width: 100%; text-align: center; }

/* ---------- Blocks ---------- */
.block { background: var(--card); border-radius: 16px; margin-top: 18px; padding: 18px; box-shadow: var(--shadow); }
.block-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin-bottom: 14px; flex-wrap: wrap;
}
.block-head h2 { font-size: 20px; color: var(--navy); display: flex; align-items: center; gap: 10px; }
.block-head h2::before { content: ""; width: 5px; height: 22px; border-radius: 4px; background: linear-gradient(var(--blue), var(--gold)); }
.block-head a { color: var(--blue-dark); font-weight: 700; font-size: 14px; transition: color .2s; }
.block-head a:hover { color: var(--blue); text-decoration: underline; }
/* Ventes Flash : toujours en rouge */
.flash-head { background: linear-gradient(90deg, #d32f2f, var(--red)); color: #fff; margin: -18px -18px 14px; padding: 13px 18px; border-radius: 16px 16px 0 0; }
.flash-head h2 { color: #fff; }
.flash-head h2::before { background: var(--gold-soft); }
.flash-head a, .flash-head a:hover { color: #fff; }
.countdown { font-size: 14px; display: inline-flex; align-items: center; gap: 8px; }
.countdown b { background: rgba(255,255,255,.2); padding: 3px 10px; border-radius: 8px; animation: glow 2s ease-in-out infinite; }
.block h3 { font-size: 17px; margin: 20px 0 10px; color: var(--navy); }

.row-scroll {
  display: grid; grid-auto-flow: column; grid-auto-columns: 180px; gap: 14px;
  overflow-x: auto; padding: 4px 2px 10px; scroll-snap-type: x mandatory; scrollbar-width: thin; scrollbar-color: var(--line) transparent;
}
.row-scroll > * { scroll-snap-align: start; }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 14px; }

/* ---------- Product card ---------- */
.card {
  border-radius: 14px; padding: 10px; position: relative; cursor: pointer; border: 1px solid var(--line);
  transition: box-shadow .3s, transform .3s var(--ease), border-color .3s; display: flex; flex-direction: column; background: #fff;
}
.card:hover { box-shadow: var(--shadow-lg); transform: translateY(-5px); border-color: transparent; }
.thumb {
  aspect-ratio: 1; background: linear-gradient(160deg, #f4f8fd, #e6f0fb); border-radius: 10px;
  display: grid; place-items: center; font-size: 64px; overflow: hidden;
}
.thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease); }
.card:hover .thumb img { transform: scale(1.07); }
.thumb.placeholder img { width: 40%; height: auto; object-fit: contain; opacity: .3; }
.badge {
  position: absolute; top: 16px; inset-inline-end: 16px; background: var(--red-soft); color: #c62828;
  font-size: 12px; font-weight: 700; padding: 3px 8px; border-radius: 6px;
}
.card-name {
  font-size: 13px; margin: 10px 0 4px; line-height: 1.35; height: 2.7em; overflow: hidden; color: var(--text);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.price { font-weight: 800; font-size: 17px; color: var(--navy); }
.old { color: var(--muted); text-decoration: line-through; font-size: 13px; }
.stars { color: var(--gold-dark); font-size: 12px; margin-top: 2px; }
.stars span { color: var(--muted); }
/* Livraison gratuite (option par produit, réglée dans l'admin) */
.ship-free { display: inline-flex; align-items: center; gap: 4px; font-size: 11.5px; font-weight: 800; color: #0d7a3e; background: #e6f6ec; border-radius: 999px; padding: 2px 8px 2px 6px; line-height: 1.5; white-space: nowrap; }
.ship-free svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.stars .ship-free { margin-inline-start: 4px; vertical-align: middle; }
.pp-freeship { display: flex; align-items: flex-start; gap: 10px; margin: 6px 0 10px; padding: 10px 12px; border-radius: 12px; background: #e6f6ec; color: #0d5f31; font-size: 13.5px; }
.pp-freeship svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; margin-top: 1px; }
.pp-freeship b { display: block; font-size: 14.5px; color: #0d7a3e; }
.add-btn {
  margin-top: 8px; background: var(--sky); color: var(--blue-dark); border: 0; border-radius: 10px;
  padding: 9px; font-weight: 700; cursor: pointer; font-size: 13px; transition: background .2s, color .2s, transform .15s;
}
.card:hover .add-btn, .add-btn:hover { background: var(--blue); color: #fff; }
.card.sold-out .thumb, .card.sold-out .card-name, .card.sold-out .price { opacity: .5; }
.badge.soldout { background: #eef1f5; color: var(--muted); }
/* « Bientôt disponible » : vitrine des produits importés pas encore arrivés */
.badge.soon { background: #0b2a4a; color: #f5c84c; }
.add-btn.soon-btn, .card:hover .add-btn.soon-btn { background: #fff7e0; color: #8a6510; border-color: #f0d68a; }
.pp-soon { margin: 12px 0; padding: 12px 14px; border-radius: 12px; background: #fff7e0; border: 1px solid #f0d68a; color: #5d4708; font-size: .95rem; line-height: 1.45; }
.pp-soon b { display: block; color: #0b2a4a; margin-bottom: 2px; }
.row-scroll:has(> .soon-empty) { display: block; cursor: default; }
.soon-empty { width: 100%; box-sizing: border-box; padding: 26px 20px; border-radius: 16px; text-align: center; background: linear-gradient(120deg, #0b2a4a, #1d5fb8); color: #e8f1ff; font-size: 1rem; line-height: 1.5; }
.soon-empty b { display: block; color: #f5c84c; font-size: 1.25rem; margin-bottom: 4px; }
button:disabled, .add-btn:disabled, .card:hover .add-btn:disabled { background: #eef1f5; color: var(--muted); cursor: not-allowed; transform: none; box-shadow: none; }

/* ---------- Tint promo ---------- */
.tint-promo {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  background: linear-gradient(120deg, var(--navy), var(--navy-2)); color: #fff; flex-wrap: wrap;
  position: relative; overflow: hidden;
}
.tint-promo::after {
  content: ""; position: absolute; width: 260px; height: 260px; border-radius: 50%;
  inset-inline-end: -60px; top: -90px; background: radial-gradient(circle, rgba(255,210,90,.28), transparent 70%);
}
.tint-promo > * { position: relative; z-index: 1; }
.tint-promo h2 { color: #fff; }
.tint-promo p { margin: 6px 0 0; opacity: .85; }
.tint-promo-btns { display: flex; gap: 10px; flex-wrap: wrap; }

/* ---------- Bande des marques ---------- */
@keyframes marquee { to { transform: translateX(-50%); } }
.brands-block { overflow: hidden; }
.brands-sub { margin: -6px 0 14px; font-size: 14px; }
.marquee { display: grid; gap: 12px; direction: ltr; }
.marquee-row {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.marquee-track { display: flex; gap: 12px; width: max-content; animation: marquee 55s linear infinite; padding: 4px 0; }
.marquee-row.rev .marquee-track { animation-direction: reverse; animation-duration: 65s; }
.marquee:hover .marquee-track { animation-play-state: paused; }
.brand-chip {
  flex: none; padding: 14px 28px; border-radius: 14px; border: 1px solid var(--line); background: #fff;
  font-size: 18px; font-weight: 800; letter-spacing: .6px; color: var(--navy-2); white-space: nowrap;
  transition: color .25s, border-color .25s, box-shadow .3s, transform .3s var(--ease), background .25s;
}
.brand-chip:hover { color: var(--blue-dark); border-color: var(--blue); background: var(--sky); transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.brand-chip.logo { display: grid; place-items: center; height: 72px; min-width: 140px; padding: 12px 24px; }
.brand-chip.logo img { max-height: 42px; max-width: 120px; width: auto; object-fit: contain; filter: grayscale(1); opacity: .7; transition: filter .3s, opacity .3s, transform .3s var(--ease); }
.brand-chip.logo:hover img { filter: none; opacity: 1; transform: scale(1.06); }
@media (prefers-reduced-motion: reduce) { .marquee-row { overflow-x: auto; } }
@media (max-width: 700px) { .brand-chip { padding: 10px 20px; font-size: 15px; } .marquee-track { animation-duration: 45s; } }

/* ---------- Appel aux fournisseurs ---------- */
.supplier-band {
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
  background: linear-gradient(120deg, var(--sky), #fff); border: 1px solid #cfe3fa;
}
.supplier-ico {
  width: 60px; height: 60px; border-radius: 50%; background: var(--blue); color: #fff; flex: none;
  display: grid; place-items: center; box-shadow: 0 6px 16px rgba(10, 132, 247, .3);
}
.supplier-ico .ico { width: 30px; height: 30px; }
.supplier-text { flex: 1; min-width: 220px; }
.supplier-text h2 { color: var(--navy); font-size: 20px; }
.supplier-text p { margin: 4px 0 0; color: var(--muted); }
.supplier-band .btn { white-space: nowrap; }

/* ---------- Tint page ---------- */
.films { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.film {
  border: 2px solid var(--line); border-radius: 14px; padding: 14px; cursor: pointer; background: #fff;
  display: flex; flex-direction: column; gap: 4px; transition: border-color .25s, background .25s, transform .3s var(--ease), box-shadow .3s;
}
.film:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.film.active { border-color: var(--blue); background: var(--sky); }
.film .swatch { height: 40px; border-radius: 8px; margin-bottom: 6px; }
.film small { color: var(--muted); }
.tabs { display: flex; gap: 8px; margin-top: 16px; flex-wrap: wrap; }
.tab {
  border: 2px solid var(--line); background: #fff; border-radius: 99px; padding: 9px 18px; color: var(--navy-2);
  font: inherit; font-weight: 700; cursor: pointer; transition: all .25s var(--ease);
}
.tab:hover { border-color: var(--blue); }
.tab.active { border-color: var(--blue); background: var(--blue); color: #fff; }
fieldset { border: 0; padding: 0; margin: 0; display: grid; gap: 12px; min-width: 0; }
fieldset[hidden] { display: none; }
.form label.check { display: flex; align-items: center; gap: 8px; font-weight: 400; }
.form small { font-weight: 400; }
.tint-total { font-size: 18px; margin: 6px 0 12px; }
.tint-total b { color: var(--blue-dark); }

/* ---------- Forms ---------- */
.form { display: grid; gap: 12px; max-width: 520px; }
.form label { display: grid; gap: 5px; font-size: 14px; font-weight: 600; color: var(--navy); }
.form input, .form select, .form textarea {
  border: 1px solid #cfd9e5; border-radius: 10px; padding: 10px 12px; font: inherit; font-weight: 400; color: var(--text);
  transition: border-color .2s, box-shadow .2s; background: #fff;
}
.form input:focus, .form select:focus, .form textarea:focus { outline: 0; border-color: var(--blue); box-shadow: 0 0 0 3px rgba(10,132,247,.18); }

/* ---------- Confirmation ---------- */
.done-box { text-align: center; max-width: 480px; }
.done-box h3 { color: var(--navy); font-size: 22px; margin: 6px 0 8px; }
.done-box p { color: var(--muted); line-height: 1.6; margin: 0 0 16px; }
.done-box .summary { text-align: start; margin-bottom: 16px; }
.done-ico { width: 72px; height: 72px; border-radius: 50%; background: var(--sky); margin: 0 auto 10px; display: grid; place-items: center; animation: pop .5s var(--ease); }
.done-ico svg { width: 38px; height: 38px; fill: none; stroke: var(--blue); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 30; stroke-dashoffset: 30; animation: draw .6s .25s ease forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }

/* ---------- Fidélité : points Mondo ---------- */
.loy-intro { margin: 8px 0 14px; color: var(--text); line-height: 1.6; }
.loy-h { margin: 0 0 8px; color: var(--navy); }
.loy-rewards { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin-bottom: 18px; }
.loy-reward {
  background: linear-gradient(160deg, #fff8e1, #fff); border: 1px solid #f3dd9a; border-radius: 14px; padding: 12px;
  display: grid; gap: 2px; text-align: center; transition: transform .3s var(--ease), box-shadow .3s;
}
.loy-reward:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.loy-reward b { font-size: 28px; color: #b87900; line-height: 1.1; }
.loy-reward span { font-size: 13px; color: var(--navy); font-weight: 600; }
.loy-result { margin-top: 16px; background: var(--sky); border-radius: 16px; padding: 18px; text-align: center; animation: pop .35s var(--ease); }
.loy-score { display: grid; gap: 0; }
.loy-score b { font-size: 48px; color: var(--navy); line-height: 1.1; }
.loy-score span { color: var(--muted); font-weight: 600; }
.loy-bar { height: 10px; background: #fff; border-radius: 99px; overflow: hidden; margin: 12px 0; }
.loy-bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--blue), var(--gold)); border-radius: 99px; transition: width .8s var(--ease); }
.loy-result p { margin: 0; color: var(--navy-2); font-weight: 600; }
.loy-err { color: var(--red); margin: 12px 0 0; }
.loy-note { font-size: 13px; margin: 14px 0 0; }
.loyalty-box { background: #fff8e1; border: 1px solid #f3dd9a; border-radius: 14px; padding: 12px 14px; display: grid; gap: 8px; }
.lb-head { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; align-items: baseline; }
.lb-head b { color: #8a5a00; }
.lb-bal { font-weight: 700; color: var(--navy); }
.lb-hint, .lb-earn { margin: 0; font-size: 13px; color: #6b4e00; }
.form .lb-opt { display: flex; align-items: center; gap: 8px; font-weight: 500; font-size: 14px; cursor: pointer; }
.lb-opt input { accent-color: var(--blue); width: 18px; height: 18px; }
.loy-line { color: #8a5a00; font-weight: 600; }

/* ---------- Choix du paiement ---------- */
.pay { border: 0; padding: 0; margin: 0; display: grid; gap: 10px; }
.pay legend { font-size: 14px; font-weight: 700; color: var(--navy); padding: 0; margin-bottom: 8px; }
.form .pay-opt {
  display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 2px solid var(--line); border-radius: 14px;
  cursor: pointer; background: #fff; font-weight: 400; transition: border-color .25s, background .25s, transform .2s var(--ease);
}
.pay-opt:hover { border-color: #b9d6f7; transform: translateY(-1px); }
.pay-opt:has(input:checked) { border-color: var(--blue); background: var(--sky); }
.pay-opt input { accent-color: var(--blue); width: 18px; height: 18px; flex: none; margin: 0; }
.pay-ico { width: 40px; height: 40px; border-radius: 50%; background: #fff; color: var(--blue-dark); display: grid; place-items: center; flex: none; box-shadow: var(--shadow); }
.pay-ico .ico { width: 22px; height: 22px; }
.pay-txt { display: grid; gap: 2px; }
.pay-txt b { color: var(--navy); font-size: 14px; }
.pay-txt small { color: var(--muted); font-size: 12.5px; }
.pay-note { margin: 0; padding: 10px 12px; border-radius: 10px; background: #fff8e1; color: #6b4e00; font-size: 13px; line-height: 1.5; animation: fade .3s ease; }

.breadcrumb { margin-top: 16px; font-size: 13px; color: var(--muted); }
.breadcrumb a { color: var(--blue-dark); font-weight: 600; }
#sortSelect { border: 1px solid #cfd9e5; border-radius: 10px; padding: 8px 10px; font: inherit; background: #fff; color: var(--text); }

/* ---------- Modal ---------- */
.modal {
  position: fixed; inset: 0; background: rgba(11, 42, 74, .55); z-index: 50;
  display: grid; place-items: center; padding: 16px; backdrop-filter: blur(3px);
}
.modal:not([hidden]) { animation: fade .25s ease; }
.modal:not([hidden]) .modal-box { animation: pop .35s var(--ease); }
.modal[hidden] { display: none; }
.modal-box {
  background: #fff; border-radius: 18px; padding: 24px; width: 100%; max-width: 720px;
  max-height: 90vh; overflow-y: auto; position: relative; box-shadow: var(--shadow-lg);
}
.close {
  position: absolute; top: 10px; inset-inline-end: 12px; background: none; border: 0; font-size: 20px; cursor: pointer; color: var(--muted);
  width: 34px; height: 34px; border-radius: 50%; transition: background .2s, color .2s, transform .3s var(--ease);
}
.close:hover { background: var(--sky); color: var(--navy); transform: rotate(90deg); }
.detail { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.detail .thumb { font-size: 130px; }
.detail h3 { font-size: 20px; margin: 0 0 8px; color: var(--navy); }
.detail .price { font-size: 26px; }
.detail ul { padding-inline-start: 18px; color: var(--muted); font-size: 14px; }
.detail a { color: var(--blue-dark); font-weight: 600; }
.qty { display: flex; align-items: center; gap: 8px; margin: 14px 0; }
.qty button { width: 32px; height: 32px; border: 1px solid #cfd9e5; background: #fff; border-radius: 8px; cursor: pointer; font-size: 16px; color: var(--navy); transition: background .2s, border-color .2s, transform .15s; }
.qty button:hover { background: var(--sky); border-color: var(--blue); }
.qty button:active { transform: scale(.9); }

/* ---------- Cart drawer ---------- */
.overlay { position: fixed; inset: 0; background: rgba(11, 42, 74, .5); z-index: 40; backdrop-filter: blur(2px); }
.overlay:not([hidden]) { animation: fade .25s ease; }
.drawer {
  position: fixed; top: 0; inset-inline-end: 0; height: 100%; width: 380px; max-width: 100%;
  background: #fff; z-index: 45; transform: translateX(100%); transition: transform .35s var(--ease);
  display: flex; flex-direction: column; box-shadow: var(--shadow-lg);
}
[dir="rtl"] .drawer { transform: translateX(-100%); }
.drawer.open, [dir="rtl"] .drawer.open { transform: none; }
.drawer-head { padding: 16px; border-bottom: 1px solid var(--line); position: relative; }
.drawer-head h3 { color: var(--navy); }
.drawer-body { flex: 1; overflow-y: auto; padding: 8px 16px; }
.drawer-foot { padding: 16px; border-top: 1px solid var(--line); background: #fafcff; }
.cart-item { display: grid; grid-template-columns: 56px 1fr; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); animation: rise .4s var(--ease) backwards; }
.cart-item .thumb { font-size: 30px; }
.cart-item .qty { margin: 6px 0 0; }
.cart-item .qty button { width: 26px; height: 26px; font-size: 14px; }
.remove { margin-inline-start: auto; color: var(--red); background: none; border: 0; cursor: pointer; font-size: 13px; }
.remove:hover { text-decoration: underline; }
.empty { text-align: center; padding: 40px 0; color: var(--muted); }
.empty div { font-size: 50px; }
.line { display: flex; justify-content: space-between; margin-bottom: 6px; font-size: 14px; }
.line.total { font-size: 17px; font-weight: 700; margin: 10px 0 14px; color: var(--navy); }
.summary { background: var(--sky); border-radius: 12px; padding: 12px; }

/* ---------- Footer ---------- */
.footer { background: linear-gradient(180deg, var(--navy), #081d35); color: #b9cbe0; margin-top: 36px; font-size: 14px; }
.footer-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; padding-top: 36px; padding-bottom: 24px; }
.footer h4 { color: #fff; margin: 0 0 10px; }
.footer a { display: block; margin-bottom: 6px; transition: color .2s, transform .2s; }
.footer a:hover { color: var(--gold-soft); transform: translateX(3px); }
[dir="rtl"] .footer a:hover { transform: translateX(-3px); }
.footer p { margin: 0 0 6px; }
.footer-logo { width: 56px; margin-bottom: 10px; }
.copyright { text-align: center; border-top: 1px solid rgba(255,255,255,.1); padding: 14px; font-size: 13px; }

/* ---------- Bouton "haut de page" ---------- */
.to-top {
  position: fixed; bottom: 22px; inset-inline-end: 22px; width: 46px; height: 46px; border-radius: 50%; z-index: 30;
  background: var(--blue); color: #fff; border: 0; cursor: pointer; display: grid; place-items: center;
  box-shadow: 0 8px 20px rgba(10, 132, 247, .4); opacity: 0; transform: translateY(20px) scale(.8); pointer-events: none;
  transition: opacity .3s, transform .3s var(--ease), background .2s;
}
.to-top.show { opacity: 1; transform: none; pointer-events: auto; }
.to-top:hover { background: var(--blue-dark); transform: translateY(-3px); }
.to-top svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- Toast ---------- */
.toast {
  position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%) translateY(100px);
  background: var(--navy); color: #fff; padding: 12px 22px; border-radius: 99px; z-index: 60;
  transition: transform .35s var(--ease); font-size: 14px; pointer-events: none; box-shadow: var(--shadow-lg);
}
.toast.show { transform: translateX(-50%) translateY(0); }

/* ---------- Responsive ---------- */
@media (max-width: 1000px) {
  .chips { display: flex; }
}
@media (max-width: 700px) {
  .header-inner, .header.scrolled .header-inner { flex-wrap: wrap; height: auto; padding-top: 6px; padding-bottom: 10px; gap: 8px; }
  .logo img { height: 30px; }
  .search { order: 3; flex-basis: 100%; }
  .search button { padding: 0 12px; }
  .lang-btn { margin-inline-start: auto; }
  .cart-label { display: none; }
  .slide { min-height: 210px; padding: 20px 20px 34px; }
  .slide-art { display: none; }
  .slide-img.has-text { padding: 18px 18px 34px; }
  .slide-img.has-text .scrim { background: linear-gradient(90deg, rgba(11,42,74,.85) 0%, rgba(11,42,74,.6) 50%, rgba(11,42,74,.05) 85%); }
  .slide-img.has-text .scrim.soft { background: linear-gradient(90deg, rgba(9,62,140,.62) 0%, rgba(9,62,140,.38) 40%, rgba(9,62,140,0) 70%); }
.slide-img.has-text .slide-text { max-width: 58%; gap: 4px; }
  .slide-img.has-text .slide-big { font-size: 40px; }
  .slide-img.has-text .slide-title { font-size: 15px; }
  .slide-img.has-text .slide-tag { display: none; }
  .slide-img.has-text .slide-btn { padding: 6px 14px; font-size: 13px; margin-top: 4px; }
  .slide-text { max-width: 100%; gap: 6px; }
  .slide-big { font-size: 52px; }
  .slide-title { font-size: 19px; }
  .slide-kicker { font-size: 12px; }
  .slide-btn { padding: 8px 16px; font-size: 14px; }
  .car-arrow { display: none; }
  .offers { grid-auto-columns: 140px; }
  .offer { min-height: 170px; }
  /* Tuile avec photo : la photo remplit la tuile, un dégradé de la couleur de la tuile garde le titre lisible */
.offer.has-photo { justify-content: space-between; background: var(--c1); }
.offer-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.offer.has-photo::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, var(--c1) 0%, color-mix(in srgb, var(--c1) 55%, transparent) calc(var(--fade, 58%) / 2), transparent var(--fade, 58%), rgba(8,29,53,.55) 100%); }
/* Illustration dessinée : elle contient déjà ses couleurs, pas de voile */
.offer.has-art::before { display: none; }
.offer.has-art .offer-head { text-shadow: 0 1px 8px rgba(0,0,0,.35); }
.offer.has-photo .offer-head, .offer.has-photo .offer-pill { position: relative; z-index: 2; }
.offer.has-photo .offer-head { text-shadow: 0 1px 6px rgba(0,0,0,.35); }
.offer.has-photo .offer-circle { display: none; }
.offer.has-photo:hover .offer-img { transform: scale(1.1); }
.offer-circle { width: 70px; height: 70px; }
  .offer-circle .ico { width: 36px; height: 36px; }
  .row-scroll { grid-auto-columns: 150px; }
  .grid { grid-template-columns: repeat(2, 1fr); }
  .detail { grid-template-columns: 1fr; }
  .detail .thumb { font-size: 90px; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .block { padding: 14px; }
  .flash-head { margin: -14px -14px 14px; }
}

/* Pour les personnes qui préfèrent moins d'animations */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  .reveal:not(.in) { opacity: 1; }
}

/* Sous-catégories (page liste) */
.sub-chips { display: flex; gap: 8px; flex-wrap: wrap; margin: 12px 0 0; }
.chip.on { background: var(--navy); color: #fff; border-color: var(--navy); }
.chip.on:hover { background: var(--navy); color: #fff; }
/* Bandeau cookies : discret, en bas, une seule fois */
.cookie { position: fixed; left: 16px; bottom: 16px; z-index: 90; max-width: 400px; background: var(--navy); color: #e6eef8; border-radius: 14px; padding: 14px 16px; box-shadow: 0 10px 30px rgba(8, 29, 53, .35); display: grid; gap: 10px; font-size: 13.5px; line-height: 1.5; animation: cookieIn .4s ease; }
.cookie[hidden] { display: none; }
.cookie p { margin: 0; }
.cookie-btns { display: flex; gap: 14px; align-items: center; }
.cookie .btn { padding: 8px 18px; font-size: 14px; }
.cookie-no { background: none; border: 0; color: #cfe0f3; font: inherit; font-size: 14px; cursor: pointer; text-decoration: underline; padding: 6px 2px; }
@keyframes cookieIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
[dir="rtl"] .cookie { left: auto; right: 16px; }
@media (max-width: 560px) { .cookie { left: 10px; right: 10px; bottom: 10px; max-width: none; } [dir="rtl"] .cookie { right: 10px; } }
/* Galerie de photos (fiche produit) */
.gal { display: grid; gap: 10px; align-content: start; min-width: 0; }
.gal-main { position: relative; aspect-ratio: 1; }
.gal-main img { width: 100%; height: 100%; object-fit: cover; }
.gal-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 34px; height: 34px; border-radius: 50%; border: 0; background: rgba(255,255,255,.9); color: var(--navy); font-size: 20px; line-height: 1; cursor: pointer; box-shadow: 0 2px 8px rgba(0,0,0,.2); }
.gal-nav.prev { left: 8px; } .gal-nav.next { right: 8px; }
[dir="rtl"] .gal-nav.prev { left: auto; right: 8px; } [dir="rtl"] .gal-nav.next { right: auto; left: 8px; }
.gal-thumbs { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; }
.gal-thumbs button { flex: none; width: 62px; height: 62px; border: 2px solid transparent; border-radius: 10px; overflow: hidden; padding: 0; background: #fff; cursor: pointer; opacity: .7; }
.gal-thumbs button.on { border-color: var(--blue); opacity: 1; }
.gal-thumbs img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Page produit (style Jumia) */
#productView { padding-top: 6px; }
.pp { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr) 300px; gap: 20px; background: #fff; border-radius: 16px; padding: 20px; box-shadow: var(--shadow); align-items: start; margin-top: 10px; }
.pp-gal .thumb, .pp-gal .gal-main { border-radius: 14px; overflow: hidden; aspect-ratio: 1; font-size: 130px; }
.pp-info h1 { font-size: 22px; line-height: 1.3; margin: 0 0 10px; color: var(--navy); }
.pp-price { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 8px; }
.pp-price .price { font-size: 30px; font-weight: 800; color: var(--navy); }
.pp-price .old { text-decoration: line-through; color: var(--muted); font-size: 16px; }
.pp-low { color: #c26a00; font-weight: 700; font-size: 14px; margin: 4px 0 8px; }
.pp-add { margin-top: 14px; padding: 14px; font-size: 16px; }
.pp-help { color: var(--muted); font-size: 13.5px; margin: 12px 0 0; }
.pp-help a { color: var(--blue-dark); font-weight: 700; }
.pp-side { border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px; display: grid; gap: 12px; background: #fafcff; }
.pp-side h3 { margin: 0; font-size: 13px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.pp-row { display: grid; gap: 2px; padding-bottom: 10px; border-bottom: 1px solid var(--line); }
.pp-row:last-child { border-bottom: 0; padding-bottom: 0; }
.pp-row b { color: var(--navy); font-size: 14.5px; } .pp-row small { color: var(--muted); font-size: 13px; } .pp-row a { color: var(--blue-dark); font-weight: 700; }
.pp-sec { background: #fff; border-radius: 16px; padding: 18px 20px; box-shadow: var(--shadow); margin-top: 16px; }
.pp-sec h2 { margin: 0 0 10px; font-size: 18px; color: var(--navy); }
.pp-sec h4 { margin: 14px 0 6px; color: var(--navy); }
.pp-sec p { margin: 0; line-height: 1.7; color: #34414f; white-space: pre-line; }
.pp-feats { margin: 0; padding-inline-start: 20px; line-height: 1.8; color: #34414f; }
.pp-table { width: 100%; border-collapse: collapse; max-width: 640px; }
.pp-table th, .pp-table td { padding: 9px 12px; border-bottom: 1px solid var(--line); text-align: start; font-size: 14.5px; }
.pp-table th { width: 40%; background: #f6f9fc; color: var(--navy); font-weight: 600; }
.pp-rate { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; } .pp-rate b { font-size: 34px; color: var(--navy); }
@media (max-width: 1100px) { .pp { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .pp-side { grid-column: 1 / -1; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); } .pp-row { border-bottom: 0; } }
@media (max-width: 720px) { .pp { grid-template-columns: 1fr; padding: 14px; } .pp-info h1 { font-size: 19px; } .pp-price .price { font-size: 26px; } .pp-sec { padding: 14px; } }
/* Avis clients */
.rv-sum { display: flex; gap: 30px; flex-wrap: wrap; align-items: center; margin-bottom: 14px; }
.rv-bars { display: grid; gap: 4px; min-width: 220px; flex: 1; max-width: 360px; }
.rv-bar { display: grid; grid-template-columns: 14px 1fr 28px; gap: 8px; align-items: center; font-size: 13px; color: var(--muted); }
.rv-bar i { height: 8px; background: #eef1f5; border-radius: 6px; overflow: hidden; display: block; }
.rv-bar i b { display: block; height: 100%; background: var(--gold); border-radius: 6px; }
.rv-list { display: grid; gap: 12px; margin-bottom: 18px; }
.rv-item { border-top: 1px solid var(--line); padding-top: 12px; }
.rv-head { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.rv-item p { margin: 6px 0 0; }
.rv-form { border-top: 1px solid var(--line); margin-top: 8px; padding-top: 14px; display: grid; gap: 10px; max-width: 560px; }
.rv-form h4 { margin: 0; }
.rv-form label { display: grid; gap: 4px; font-weight: 600; font-size: 14px; color: var(--navy); }
.rv-form input, .rv-form textarea { padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; font: inherit; }
.rv-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.rv-rate { display: flex; align-items: center; gap: 10px; font-weight: 600; color: var(--navy); }
#rvStars button { background: none; border: 0; font-size: 28px; line-height: 1; color: #d5dbe3; cursor: pointer; padding: 0 2px; }
#rvStars button.on { color: #fbb917; }
.rv-msg { margin: 0; font-size: 14px; } .rv-msg.err { color: #c62828; }
.rv-form .btn { justify-self: start; }
@media (max-width: 560px) { .rv-grid { grid-template-columns: 1fr; } }
/* Avis clients, style Jumia */
.rv2 { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 28px; align-items: start; }
.rv2 h4 { margin: 0 0 14px; font-size: 14px; letter-spacing: .02em; color: #2b3440; }
.rv2-box { background: #f1f1f2; border-radius: 6px; padding: 22px 12px; text-align: center; margin-bottom: 18px; }
.rv2-avg { font-size: 22px; color: #75808c; } .rv2-avg b { font-size: 40px; color: #f5a623; }
.rv2-box .stars { font-size: 22px; margin: 4px 0; } .rv2-n { color: #454d57; font-size: 15px; margin-top: 4px; }
.rv2-bars { display: grid; gap: 10px; }
.rv2-bar { display: grid; grid-template-columns: 54px 36px 1fr; gap: 6px; align-items: center; font-size: 15px; color: #2b3440; }
.rv2-bar .st { color: #f5a623; font-style: normal; font-size: 18px; } .rv2-bar small { color: #75808c; }
.rv2-bar em { height: 8px; background: #d9d9db; border-radius: 6px; overflow: hidden; display: block; }
.rv2-bar em b { display: block; height: 100%; background: #fbb917; border-radius: 6px; }
.rv2-item { padding: 0 0 18px; margin-bottom: 18px; border-bottom: 1px solid var(--line); }
.rv2-item .stars { font-size: 20px; margin-bottom: 8px; }
.rv2-item h5 { margin: 0 0 8px; font-size: 17px; color: #1f2933; }
.rv2-item p { margin: 0 0 12px; color: #33404d; line-height: 1.6; }
.rv2-foot { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; color: #75808c; font-size: 14px; }
.rv2-ok { color: #0a9a5b; display: inline-flex; align-items: center; gap: 5px; }
.rv2-note { font-size: 13.5px; }
@media (max-width: 760px) { .rv2 { grid-template-columns: 1fr; gap: 18px; } }
/* Bannière de catégorie */
.cat-banner { position: relative; direction: ltr; height: clamp(150px, 22vw, 260px); border-radius: 18px; overflow: hidden; background: #08182c; margin: 6px 0 14px; box-shadow: var(--shadow); }
.cat-banner[hidden] { display: none; }
.cat-banner img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cb-shade { position: absolute; inset: 0; background: linear-gradient(90deg, #06142a 0%, #06142a 40%, rgba(6, 20, 42, .86) 48%, rgba(6, 20, 42, 0) 66%); }
.cb-text { position: absolute; inset: 0 auto 0 0; width: min(46%, 520px); padding: 0 clamp(14px, 3vw, 36px); display: flex; flex-direction: column; justify-content: center; gap: 8px; color: #fff; }
.cb-text h2 { margin: 0; font-size: clamp(20px, 3.6vw, 40px); line-height: 1.05; font-weight: 800; letter-spacing: .01em; text-shadow: 0 2px 14px rgba(0, 0, 0, .35); }
.cb-text h2::after { content: ""; display: block; width: 54px; height: 4px; border-radius: 4px; background: var(--gold); margin-top: 10px; }
.cb-text p { margin: 0; font-size: clamp(11.5px, 1.5vw, 16px); color: #cfe0f3; line-height: 1.4; }
.cb-chip { align-self: flex-start; background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .22); color: #fff; font-size: 12px; font-weight: 700; padding: 4px 11px; border-radius: 99px; }
.cb-text[dir="rtl"] { text-align: right; align-items: flex-end; } .cb-text[dir="rtl"] .cb-chip { align-self: flex-end; }
@media (max-width: 560px) { .cb-text { width: 58%; } .cb-text p { display: none; } .cb-chip { display: none; } }
/* Bannière de catégorie : on voit toute l'image (le texte est écrit par le site, pas dans l'image) */
.cat-banner { height: auto; aspect-ratio: 2.45 / 1; max-height: 470px; }
.cb-shade { background: linear-gradient(90deg, rgba(6, 20, 42, .55) 0%, rgba(6, 20, 42, .28) 30%, rgba(6, 20, 42, 0) 46%); }
.cb-text { width: min(38%, 470px); justify-content: center; padding-top: 2%; }
.cb-text h2 { font-size: clamp(22px, 3.7vw, 46px); }
@media (max-width: 900px) { .cat-banner { aspect-ratio: 2 / 1; } .cb-text { width: 52%; } }
@media (max-width: 560px) { .cat-banner { aspect-ratio: 1.7 / 1; } .cat-banner img { object-position: var(--pos-m, 36% 50%) !important; } .cb-text { width: 60%; } .cb-shade { background: linear-gradient(90deg, rgba(6, 20, 42, .6) 0%, rgba(6, 20, 42, .3) 45%, rgba(6, 20, 42, 0) 70%); } }@media (max-width: 900px) { .cb-text p { display: none; } }
/* Bannière de catégorie : plus basse, les accessoires restent visibles */
.cat-banner { aspect-ratio: 2.85 / 1; max-height: 400px; }
.cb-text h2 { font-size: clamp(22px, 3.2vw, 40px); }
@media (max-width: 900px) { .cat-banner { aspect-ratio: 2.3 / 1; } }
@media (max-width: 560px) { .cat-banner { aspect-ratio: 1.9 / 1; } }
/* Bannière de catégorie : hauteur intermédiaire */
.cat-banner { aspect-ratio: 2.7 / 1; max-height: 425px; }
/* Bannière de catégorie : même hauteur que les bannières de l'accueil (318 px ; 210 px sur téléphone) */
.cat-banner { height: 318px; aspect-ratio: auto; max-height: none; background: #050f20; }
/* Image « carrée » (moins large que 3:1) : on la montre ENTIÈRE à droite, le texte reste dans la partie sombre à gauche */
@media (min-width: 1001px) {
  .cat-banner.fit img { left: auto; right: 0; width: auto; max-width: none; object-fit: contain; object-position: right center !important; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 16%); mask-image: linear-gradient(90deg, transparent 0, #000 16%); }
  .cat-banner.fit .cb-shade { display: none; }
  .cat-banner.fit .cb-text { width: 34%; }
}
@media (max-width: 1000px) { .cat-banner { height: 280px; } }
@media (max-width: 700px) { .cat-banner { height: 210px; } }
/* Téléphone et tablette : zones à toucher plus grandes (au moins ~40 px de haut) */
@media (max-width: 1000px) {
  .footer a { padding: 10px 0; margin-bottom: 0; }
  .breadcrumb { font-size: 14px; line-height: 2; }
  .breadcrumb a { display: inline-block; padding: 6px 2px; }
  .pp-help a, .pp-row a { display: inline-block; padding: 8px 0; }
  .cookie-no { padding: 12px 6px; }
  .form input[type="radio"], .form input[type="checkbox"] { width: 20px; height: 20px; }
}@media (max-width: 1000px) { .block-head a { display: inline-block; padding: 10px 4px; } }
/* Téléphone : position de la photo propre à chaque bannière (imagePosMobile dans data.js) */
@media (max-width: 700px) { .slide-img img[style*="--pm"] { object-position: var(--pm) !important; } }@media (max-width: 1000px) { .qty button, .cart-item [data-remove], .cart-item .remove { min-width: 38px; min-height: 38px; } .qty { gap: 10px; } }
/* Bannières de l'accueil créées dans l'admin : un texte vide ne laisse pas de trou */
.slide-kicker:empty, .slide-big:empty, .slide-title:empty, .slide-tag:empty { display: none; }
/* Bannière de catégorie claire : texte sombre sur fond clair */
.cat-banner.light .cb-text { color: #0b2a4a; }
.cat-banner.light .cb-text h2 { text-shadow: none; }
.cat-banner.light .cb-text p { color: #34506f; }
.cat-banner.light .cb-chip { background: rgba(11, 42, 74, .08); border-color: rgba(11, 42, 74, .18); color: #0b2a4a; }
.cat-banner.light .cb-shade { display: none; }@media (max-width: 700px) {
  .cat-banner.light .cb-shade { display: block; background: linear-gradient(90deg, rgba(var(--cb-rgb), .96) 0%, rgba(var(--cb-rgb), .88) 34%, rgba(var(--cb-rgb), 0) 66%); }
  .cb-text h2 { font-size: 18px; }
  .cb-text { width: 54%; }
}

/* Bandeau de la page Teinte vitres : même style que les bannières de catégories (texte à gauche, photo à droite) */
.tint-hero { background: #0b2a4a; }
.tint-hero img { left: auto; right: 0; width: auto; max-width: none; height: 100%; object-fit: cover; object-position: 50% 50%; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 38%); mask-image: linear-gradient(90deg, transparent 0, #000 38%); }
.tint-hero .cb-shade { display: none; }
.tint-hero .cb-text { width: 42%; color: #fff; }
html[dir="rtl"] .tint-hero .cb-text { text-align: right; align-items: flex-end; }
html[dir="rtl"] .tint-hero .cb-chip { align-self: flex-end; }
@media (max-width: 700px) {
  .tint-hero img { width: 135%; right: -12%; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 55%); mask-image: linear-gradient(90deg, transparent 0, #000 55%); }
  .tint-hero .cb-text { width: 62%; }
}
/* Code promo dans la commande */
.promo-box { display: grid; gap: 6px; }
.promo-row { display: flex; gap: 8px; }
.promo-row input { flex: 1; min-width: 0; text-transform: uppercase; letter-spacing: .06em; }
.promo-row .btn { padding: 0 16px; white-space: nowrap; }
.promo-msg { margin: 0; font-size: 13px; font-weight: 600; }
.promo-msg.ok { color: #0a7a4b; }
.promo-msg.bad { color: #c62828; }

/* Pages légales (legal.html) */
.lg-main { max-width: 860px; padding-top: 18px; padding-bottom: 36px; }
.lg-nav { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.lg-nav a { background: #fff; border-radius: 99px; padding: 8px 16px; font-weight: 700; font-size: 14px; color: var(--navy, #0b2a4a); box-shadow: var(--shadow); text-decoration: none; }
.lg-nav a.on { background: var(--navy, #0b2a4a); color: #fff; }
.lg-card { background: #fff; border-radius: 18px; padding: clamp(18px, 4vw, 36px); box-shadow: var(--shadow); line-height: 1.7; }
.lg-card h1 { margin: 0 0 8px; font-size: clamp(22px, 4vw, 30px); color: var(--navy, #0b2a4a); }
.lg-card h2 { margin: 26px 0 8px; font-size: 18px; color: var(--navy, #0b2a4a); }
.lg-card p, .lg-card li { font-size: 15px; color: #34414f; }
.lg-card p { margin: 0 0 10px; }
.lg-card ul { margin: 0 0 10px; padding-inline-start: 20px; }
.lg-card a { color: #0a6bd6; }
.lg-intro { color: #55657a !important; font-size: 15.5px !important; }
.lg-date { margin-top: 28px !important; font-size: 13px !important; color: #7a8799 !important; }
.lg-id { border-collapse: collapse; width: 100%; font-size: 15px; }
.lg-id th { text-align: start; width: 40%; padding: 8px 10px 8px 0; color: #55657a; font-weight: 600; vertical-align: top; }
.lg-id td { padding: 8px 0; color: #1f2a37; }
.lg-id tr { border-bottom: 1px solid #eef2f7; }
.legal-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 18px; padding: 0 12px 10px; font-size: 13px; }
.legal-links a { color: inherit; opacity: .85; }

/* Bannière cookies : carte blanche à la Jumia, aux couleurs de Mondo */
.cookie { background: #fff; color: #34414f; border-radius: 16px; padding: 20px 22px 18px; max-width: 430px; gap: 12px; font-size: 15px; line-height: 1.55; border-top: 4px solid var(--gold); box-shadow: 0 14px 40px rgba(8, 29, 53, .22), 0 2px 8px rgba(8, 29, 53, .10); }
.cookie-title { margin: 0; font-size: 20px; line-height: 1.25; color: var(--navy); font-weight: 800; }
.cookie p { color: #34414f; }
.cookie p a { color: #0a6bd6; font-weight: 600; text-decoration: none; }
.cookie p a:hover { text-decoration: underline; }
.cookie-btns { justify-content: flex-end; gap: 18px; margin-top: 4px; }
.cookie .btn { padding: 11px 22px; font-size: 15px; border-radius: 10px; }
.cookie-no { color: #55657a; }
@media (max-width: 560px) { .cookie { padding: 18px 16px 16px; } .cookie-btns { justify-content: space-between; } }

/* Pied de page : réseaux sociaux et modes de paiement / livraison */
.footer-extra { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 22px 40px; padding-top: 6px; padding-bottom: 22px; }
.footer-extra h4 { text-transform: uppercase; letter-spacing: .03em; font-size: 14px; margin-bottom: 14px; }
.footer-extra[hidden], .fx-social[hidden] { display: none; }
.social { display: flex; flex-wrap: wrap; gap: 12px; }
.footer .social a { display: grid; place-items: center; width: 42px; height: 42px; margin: 0; border-radius: 50%; color: #fff; background: rgba(255, 255, 255, .08); transition: background .2s, transform .2s, color .2s; }
.footer .social a:hover { background: var(--gold); color: var(--navy); transform: translateY(-3px); }
.social svg { width: 22px; height: 22px; }
.pay-logos { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; }
.pay-item { display: inline-flex; align-items: center; gap: 8px; color: #fff; font-weight: 700; font-size: 13px; }
.pay-item svg { height: 26px; width: auto; }
.pay-item.logo svg { height: 28px; }
@media (max-width: 700px) { .footer-extra { flex-direction: column; } }

/* Badges de paiement (fond blanc, logos en couleurs) et icônes sociales pas encore reliées */
.pay-badge { display: inline-flex; align-items: center; justify-content: center; height: 38px; padding: 0 10px; background: #fff; border-radius: 8px; box-shadow: 0 1px 3px rgba(0, 0, 0, .25); }
.pay-badge svg { height: 26px; width: auto; }
.pb-cash { display: grid; line-height: 1; text-align: center; }
.pb-cash b { color: #d32f2f; font-size: 15px; font-weight: 900; letter-spacing: .02em; }
.pb-cash small { color: #0b2a4a; font-size: 10.5px; font-weight: 700; margin-top: 2px; }
.pay-logos { gap: 10px; }
.footer .social .soc-off { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; color: #fff; background: rgba(255, 255, 255, .08); cursor: default; }

/* Pied de page : réseaux et paiements alignés sur la grille des colonnes */
.footer-extra { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; border-top: 1px solid rgba(255, 255, 255, .1); margin-top: 6px; padding-top: 24px; padding-bottom: 24px; }
.fx-social { grid-column: 1 / 3; }
.fx-pay { grid-column: 3 / 5; }
.footer-extra h4 { text-transform: none; letter-spacing: 0; font-size: inherit; margin-bottom: 12px; }
.footer-extra .social, .footer-extra .pay-logos { min-height: 42px; align-items: center; }
.pay-logos { gap: 22px; }
.pay-item.logo svg { height: 30px; }
@media (max-width: 900px) { .footer-extra { grid-template-columns: 1fr 1fr; } .fx-social { grid-column: 1; } .fx-pay { grid-column: 2; } }
@media (max-width: 560px) { .footer-extra { grid-template-columns: 1fr; } .fx-social, .fx-pay { grid-column: 1; } }
.pay-item:not(.logo) svg { height: 30px; }
.pay-item:not(.logo) span { line-height: 1.2; max-width: 120px; }

/* Modes de paiement : trois cases de même hauteur */
.pay-logos { gap: 12px; flex-wrap: wrap; }
.pay-item { height: 46px; padding: 0 16px; border: 1px solid rgba(255, 255, 255, .22); border-radius: 10px; background: rgba(255, 255, 255, .06); white-space: nowrap; }
.pay-item:not(.logo) span { max-width: none; line-height: 1; font-size: 13.5px; }
.pay-item:not(.logo) svg { height: 24px; }
.pay-item.logo svg { height: 24px; }

/* ---------- Ventes Flash : grand bloc rouge, cartes pleine largeur ---------- */
.flash-block { background: linear-gradient(135deg, #c62828, var(--red)); padding: 20px 20px 10px; border-radius: 20px; box-shadow: 0 10px 26px rgba(198, 40, 40, .28); }
.flash-top { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 16px; }
.flash-top h2 { margin: 0; color: #fff; font-size: clamp(22px, 3.6vw, 34px); font-weight: 800; letter-spacing: .01em; }
.flash-block .countdown { background: #fff; color: #c62828; border-radius: 10px; padding: 7px 13px; font-weight: 700; font-size: 15px; gap: 8px; }
.flash-block .countdown svg { width: 20px; height: 20px; flex: none; }
.flash-block .countdown b { background: none; padding: 0; animation: none; font-variant-numeric: tabular-nums; }
.flash-more { margin-inline-start: auto; display: inline-flex; align-items: center; gap: 8px; background: #fff; color: #c62828 !important; border-radius: 99px; padding: 11px 22px; font-weight: 700; font-size: 15px; transition: transform .2s, box-shadow .2s; }
.flash-more:hover { text-decoration: none !important; transform: translateY(-2px); box-shadow: 0 6px 16px rgba(0, 0, 0, .2); }
.flash-more svg { width: 18px; height: 18px; }
[dir="rtl"] .flash-more svg { transform: scaleX(-1); }
.flash-row { grid-auto-columns: 200px; gap: 14px; padding-bottom: 16px; }
.fcard { padding: 0; overflow: hidden; border: 0; border-radius: 14px; }
.fc-img { position: relative; }
.fc-img .thumb { border-radius: 0; aspect-ratio: 1 / .92; }
.fc-add { position: absolute; top: 10px; inset-inline-end: 10px; width: 38px; height: 38px; border-radius: 50%; border: 0; background: var(--navy); color: #fff; font-size: 26px; line-height: 1; font-weight: 400; display: grid; place-items: center; cursor: pointer; box-shadow: 0 4px 10px rgba(0, 0, 0, .25); transition: background .2s, color .2s, transform .15s; padding: 0 0 3px; }
.fc-add:hover { background: var(--gold); color: var(--navy); transform: scale(1.08); }
.fc-stock { text-align: center; font-size: 12.5px; font-weight: 700; padding: 5px 8px; background: #fff4d6; color: #8a5a00; }
.fc-stock.low { background: #fde8e8; color: #c62828; }
.fc-body { padding: 10px 12px 12px; display: flex; flex-direction: column; gap: 3px; }
.fc-body .card-name { margin: 0 0 2px; }
.fc-body .price { font-size: 20px; }
.fc-old { display: flex; align-items: center; gap: 8px; min-height: 24px; }
.fc-off { background: var(--gold); color: var(--navy); font-size: 12px; font-weight: 800; padding: 2px 8px; border-radius: 6px; }
@media (max-width: 560px) { .flash-block { padding: 14px 12px 6px; border-radius: 16px; } .flash-row { grid-auto-columns: 160px; } .flash-more { padding: 8px 14px; font-size: 14px; } .fc-body .price { font-size: 18px; } }

/* Ventes Flash : version plus fine */
.flash-block { padding: 14px 16px 4px; border-radius: 18px; }
.flash-top { gap: 12px; margin-bottom: 12px; }
.flash-top h2 { font-size: clamp(19px, 2.6vw, 25px); }
.flash-block .countdown { padding: 5px 11px; font-size: 13.5px; border-radius: 9px; }
.flash-block .countdown svg { width: 17px; height: 17px; }
.flash-more { padding: 8px 18px; font-size: 13.5px; }
.flash-more svg { width: 16px; height: 16px; }
.flash-row { grid-auto-columns: 164px; gap: 12px; padding-bottom: 12px; }
.fcard { border-radius: 12px; }
.fc-img .thumb { aspect-ratio: 1 / .8; }
.fc-add { width: 30px; height: 30px; top: 8px; inset-inline-end: 8px; font-size: 21px; padding: 0 0 2px; }
.fc-stock { font-size: 11.5px; padding: 4px 6px; }
.fc-body { padding: 8px 10px 10px; gap: 2px; }
.fc-body .card-name { font-size: 12.5px; }
.fc-body .price { font-size: 16.5px; }
.fc-old { min-height: 20px; gap: 6px; }
.fc-old .old { font-size: 12px; }
.fc-off { font-size: 11px; padding: 1px 6px; }
@media (max-width: 560px) { .flash-block { padding: 12px 10px 2px; } .flash-row { grid-auto-columns: 148px; } }
.fc-off { background: var(--blue); color: #fff; }

/* Téléphone : Ventes Flash sur deux lignes bien rangées, bannière cookies plus petite */
@media (max-width: 560px) {
  .flash-top { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 8px 10px; margin-bottom: 10px; }
  .flash-top h2 { font-size: 20px; grid-column: 1; grid-row: 1; }
  .flash-top .flash-more { grid-column: 2; grid-row: 1; margin: 0; padding: 7px 13px; }
  .flash-top .countdown { grid-column: 1 / -1; grid-row: 2; justify-self: start; }
  .cookie { padding: 14px 14px 12px; gap: 8px; font-size: 13.5px; line-height: 1.45; border-radius: 14px; }
  .cookie-title { font-size: 16px; }
  .cookie .btn { padding: 9px 16px; font-size: 14px; }
}
.promo-box[hidden], .loyalty-box[hidden] { display: none; }
@media (max-width: 1000px) { .pay-logos { gap: 8px; } .pay-item { padding: 0 10px; height: 42px; } .pay-item:not(.logo) span { font-size: 12px; } .pay-item:not(.logo) svg, .pay-item.logo svg { height: 21px; } }

/* Téléphone : on voit l'action (mains, raclette, vitre) ; un voile sombre à gauche garde le texte lisible sur la photo */
@media (max-width: 700px) {
  .slide-img.has-text[data-nav="teinte"]::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(90deg, rgba(11, 42, 74, .92) 0%, rgba(11, 42, 74, .78) 42%, rgba(11, 42, 74, .15) 72%, rgba(11, 42, 74, 0) 100%); }
  .slide-img.has-text[data-nav="teinte-maison"]::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(90deg, rgba(6, 70, 160, .9) 0%, rgba(6, 70, 160, .7) 42%, rgba(6, 70, 160, .12) 72%, rgba(6, 70, 160, 0) 100%); }
}

/* ---------- Conseils et astuces ---------- */
.tips-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.tip-card { position: relative; display: block; border-radius: 16px; overflow: hidden; min-height: 210px; background: var(--navy); color: #fff; box-shadow: var(--shadow); isolation: isolate; transition: transform .3s var(--ease), box-shadow .3s; }
.tip-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); }
.tip-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform .6s var(--ease); }
.tip-card:hover img { transform: scale(1.06); }
.tip-card::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(11, 42, 74, .92) 0%, rgba(11, 42, 74, .72) 45%, rgba(11, 42, 74, .1) 100%); }
.tip-text { display: flex; flex-direction: column; justify-content: center; gap: 8px; height: 100%; min-height: 210px; padding: 22px 22px; max-width: 78%; }
.tip-text h3 { margin: 0; font-size: 19px; line-height: 1.25; color: #fff; text-shadow: 0 2px 10px rgba(0, 0, 0, .3); }
.tip-text h3::after { content: ""; display: block; width: 40px; height: 3px; border-radius: 3px; background: var(--gold); margin-top: 10px; }
.tip-text p { margin: 0; font-size: 13.5px; color: #cfe0f3; }
.tip-btn { align-self: flex-start; margin-top: 4px; background: #fff; color: var(--navy); font-weight: 700; font-size: 13px; padding: 8px 16px; border-radius: 99px; }
[dir="rtl"] .tip-card::before { background: linear-gradient(270deg, rgba(11, 42, 74, .92) 0%, rgba(11, 42, 74, .72) 45%, rgba(11, 42, 74, .1) 100%); }
.footer .tip-card:hover { transform: translateY(-5px); }
.tips-box h3 { margin: 0 34px 4px 0; font-size: 21px; color: var(--navy); }
[dir="rtl"] .tips-box h3 { margin: 0 0 4px 34px; }
.tips-intro { margin: 0 0 14px; color: var(--muted); }
.tips-list { margin: 0 0 18px; padding-inline-start: 22px; display: grid; gap: 10px; }
.tips-list li { line-height: 1.6; color: #34414f; font-size: 15px; }
.tips-list li::marker { color: var(--gold-dark); font-weight: 800; }
@media (max-width: 900px) { .tips-grid { grid-template-columns: 1fr; } .tip-card, .tip-text { min-height: 170px; } .tip-text { max-width: 82%; } }

/* Arabe : le titre de la bannière de catégorie reste collé à gauche, là où la photo laisse de la place (il ne passe plus sur la voiture) */
.cat-banner:not(.tint-hero) .cb-text[dir="rtl"] { text-align: left; align-items: flex-start; }
.cat-banner:not(.tint-hero) .cb-text[dir="rtl"] .cb-chip { align-self: flex-start; }
.cat-banner:not(.tint-hero) .cb-text[dir="rtl"] h2::after { margin-inline: 0; }

/* Carte d'astuces avec voile plus léger (la photo reste bien visible sous le texte) */
.tip-card.soft::before { background: linear-gradient(90deg, rgba(8, 28, 52, .7) 0%, rgba(8, 28, 52, .5) 34%, rgba(8, 28, 52, .1) 62%, rgba(8, 28, 52, 0) 100%); }
[dir="rtl"] .tip-card.soft::before { background: linear-gradient(270deg, rgba(8, 28, 52, .7) 0%, rgba(8, 28, 52, .5) 34%, rgba(8, 28, 52, .1) 62%, rgba(8, 28, 52, 0) 100%); }
/* Protection légère des photos : pas de glisser, pas de menu « enregistrer l'image », petit logo Mondo en filigrane */
.thumb img, .gal-thumbs img, .fc-img img, .card img, .offer img, .slide img, .cat-banner img, .tip-card img, .tint-hero img { -webkit-user-drag: none; user-select: none; -webkit-touch-callout: none; }
.thumb { position: relative; }
.gal-thumbs button img { pointer-events: none; }

/* Panier : le bouton « Supprimer » garde sa largeur (il était coupé par la règle des boutons +/-) */
.cart-item .qty .remove, .qty .remove { width: auto; min-width: 0; height: auto; min-height: 0; padding: 6px 4px; border: 0; background: none; border-radius: 6px; color: var(--red); font-size: 13px; white-space: nowrap; }
.cart-item .qty .remove:hover { background: var(--red-soft); text-decoration: none; }

/* Choix de la taille (produits avec plusieurs tailles et prix) */
.pp-var { margin: 10px 0 6px; }
.pp-var > b { display: block; margin-bottom: 8px; color: var(--navy); font-size: 14px; }
.var-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.var-chips button { display: grid; gap: 1px; min-width: 64px; padding: 8px 14px; border: 1.5px solid #cfd9e5; border-radius: 12px; background: #fff; cursor: pointer; text-align: center; font: inherit; color: var(--navy); transition: border-color .2s, background .2s, transform .15s; }
.var-chips button span { font-weight: 800; font-size: 15px; }
.var-chips button small { font-size: 11.5px; color: var(--muted); }
.var-chips button:hover { border-color: var(--blue); transform: translateY(-1px); }
.var-chips button.on { border-color: var(--blue); background: var(--sky); box-shadow: 0 0 0 2px rgba(10, 132, 247, .15); }
.var-chips button .var-dot { display: block; width: 24px; height: 24px; border-radius: 50%; margin: 0 auto 3px; border: 1.5px solid rgba(15, 23, 42, .25); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .55); }
.var-chips button.on .var-dot { border-color: var(--blue); }
/* pastilles plus discretes */
.var-chips button { min-width: 0; padding: 6px 12px; border-radius: 10px; }
.var-chips button span { font-size: 14px; }
.var-chips button small { font-size: 11px; }
.var-chips button .var-dot { width: 14px; height: 14px; margin: 0 auto 2px; border-width: 1px; box-shadow: none; }


/* bande d'une sous-categorie sur l'accueil (ex : Housses de sieges) */
.sub-strip { background: #fdf1d6; box-shadow: none; border: 1px solid #f3dfae; }
.sub-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.sub-top h2 { font-size: 26px; font-weight: 800; color: var(--navy); line-height: 1.15; }
.sub-top p { margin: 4px 0 0; color: #a06a00; font-size: 14px; font-weight: 600; }
.sub-more { display: inline-flex; align-items: center; gap: 8px; background: var(--gold); color: var(--navy) !important; border-radius: 99px; padding: 11px 22px; font-weight: 800; font-size: 15px; white-space: nowrap; transition: transform .2s, box-shadow .2s; }
.sub-more:hover { text-decoration: none !important; transform: translateY(-2px); box-shadow: 0 6px 16px rgba(160, 106, 0, .25); }
.sub-more svg { width: 18px; height: 18px; }
[dir="rtl"] .sub-more svg { transform: scaleX(-1); }
@media (max-width: 560px) { .sub-top h2 { font-size: 20px; } .sub-more { padding: 8px 14px; font-size: 14px; } }

/* bande sous-categorie : aux couleurs du site (bleu clair + marine + or) */
.sub-strip { background: linear-gradient(135deg, #e3eefc 0%, #cfe3fb 100%); border: 1px solid #b9d3f2; }
.sub-top h2 { color: var(--navy); }
.sub-top h2::before { content: ""; display: inline-block; width: 5px; height: 24px; border-radius: 4px; margin-inline-end: 10px; vertical-align: -3px; background: linear-gradient(var(--blue), var(--gold)); }
.sub-top p { color: var(--blue-dark); }
.sub-more { background: linear-gradient(120deg, var(--navy), var(--navy-2)); color: #fff !important; }
.sub-more:hover { box-shadow: 0 6px 16px rgba(18, 60, 107, .3); }

/* tous les boutons « Voir plus » : meme taille */
.sub-more { padding: 8px 18px; font-size: 13.5px; font-weight: 700; gap: 8px; }
.sub-more svg { width: 16px; height: 16px; }
@media (max-width: 560px) { .sub-more { padding: 7px 13px; font-size: 13.5px; } }

/* rangees de categories sur l'accueil : fond bleu tres doux pour mieux les distinguer */
#catRows > .block:not(.sub-strip) { background: linear-gradient(180deg, #eef5fe 0%, #e4eefb 100%); border: 1px solid #d3e3f7; box-shadow: none; }
#catRows > .block:not(.sub-strip) .card { background: #fff; border-color: #dbe6f4; }

/* Teinte vitres : deux cartes photo claires (voiture / maison et bureau) */
.tint-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.tint-card { position: relative; display: block; border-radius: 16px; overflow: hidden; min-height: 190px; background: #0f4a9a; color: #fff; isolation: isolate; transition: transform .25s, box-shadow .25s; }
.tint-card:hover { transform: translateY(-3px); box-shadow: 0 10px 26px rgba(18, 60, 107, .28); text-decoration: none; }
.tint-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 78% 50%; z-index: -1; }
[dir="rtl"] .tint-card img { transform: scaleX(-1); }
.tc-text { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 22px 24px; max-width: 58%; height: 100%; justify-content: center; }
.tc-kick { font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; opacity: .92; }
.tc-price { font-size: 34px; line-height: 1.05; font-weight: 800; color: var(--gold); }
.tc-sub { font-size: 15px; font-weight: 600; margin-bottom: 8px; }
.tc-btn { display: inline-flex; align-items: center; gap: 8px; background: #fff; color: var(--navy); border-radius: 99px; padding: 8px 16px; font-weight: 700; font-size: 14px; }
.tc-btn svg { width: 16px; height: 16px; }
[dir="rtl"] .tc-btn svg { transform: scaleX(-1); }
@media (max-width: 720px) { .tint-cards { grid-template-columns: 1fr; } .tint-card { min-height: 170px; } .tc-text { padding: 18px; max-width: 64%; } .tc-price { font-size: 28px; } }

/* cartes teinte : texte toujours lisible, meme sur petit ecran */
.tint-card::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(8,28,58,.78) 0%, rgba(8,28,58,.45) 42%, rgba(8,28,58,0) 68%); }
[dir="rtl"] .tint-card::after { background: linear-gradient(270deg, rgba(8,28,58,.78) 0%, rgba(8,28,58,.45) 42%, rgba(8,28,58,0) 68%); }
.tint-card { min-height: 210px; }
.tc-text { max-width: 54%; }
.tc-price { font-size: 30px; }
.tc-sub { font-size: 14px; line-height: 1.3; }
@media (max-width: 720px) { .tint-card { min-height: 190px; } .tc-text { max-width: 62%; } .tc-price { font-size: 26px; } }

/* tablette : cartes teinte plus compactes */
.tc-btn { white-space: nowrap; }
@media (min-width: 721px) and (max-width: 1000px) { .tc-text { max-width: 62%; padding: 18px 16px; } .tc-price { font-size: 24px; } .tc-kick { font-size: 12px; } .tc-sub { font-size: 13px; } .tc-btn { padding: 7px 12px; font-size: 13px; } }

/* telephone : la photo teinte vitres decalee vers la gauche pour montrer les baies de la villa */
@media (max-width: 720px) { .tint-hero img { width: 100%; right: 0; object-position: 92% 50%; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 48%); mask-image: linear-gradient(90deg, transparent 0, #000 48%); } .tint-hero .cb-text { width: 58%; } }

/* telephone : image dediee (baies de la villa visibles), le fond bleu est deja dans l'image */
@media (max-width: 720px) { .tint-hero img { width: 100%; right: 0; object-fit: cover; object-position: 50% 50%; -webkit-mask-image: none; mask-image: none; } .tint-hero .cb-text { width: 52%; } }

/* telephone : toute la photo (voiture et villa) visible, titre en bas sur un voile sombre */
@media (max-width: 720px) { .tint-hero .cb-text { inset: auto 0 0 0; width: 100%; justify-content: flex-end; padding: 0 16px 14px; } .tint-hero .cb-text h2 { font-size: 24px; } }

/* telephone : titre a gauche comme avant, photo entiere (voiture + villa) derriere */
@media (max-width: 720px) { .tint-hero .cb-text { inset: 0 auto 0 0; width: 52%; justify-content: center; padding: 0 16px; } .tint-hero .cb-text h2 { font-size: 22px; } }

/* accueil : les rangees alternent deux couleurs douces de la charte (bleu clair / sable dore) pour bien les distinguer */
#catRows > .block:nth-child(odd of .block) { background: linear-gradient(180deg, #eef5fe 0%, #e2edfb 100%); border: 1px solid #d0e1f6; box-shadow: none; }
#catRows > .block:nth-child(even of .block) { background: linear-gradient(180deg, #fff9e8 0%, #fdf0cf 100%); border: 1px solid #f0dfae; box-shadow: none; }
#catRows > .block:nth-child(odd of .block) .card { border-color: #d9e6f5; }
#catRows > .block:nth-child(even of .block) .card { border-color: #efe2bb; }
#catRows > .block:nth-child(even of .block) .block-head a { color: #8a5a00; }
#catRows > .block.sub-strip:nth-child(odd of .block) .sub-top p { color: var(--blue-dark); }
#catRows > .block.sub-strip:nth-child(even of .block) .sub-top p { color: #8a5a00; }

/* Ventes Flash : aux couleurs du site (bleu marine + or), plus de rouge */
.flash-block { background: linear-gradient(135deg, #0b2a4a 0%, #14477f 100%); box-shadow: 0 10px 26px rgba(11, 42, 74, .28); }
.flash-block .countdown { background: var(--gold); color: var(--navy); }
.flash-more { background: var(--gold); color: var(--navy) !important; }
.flash-more:hover { box-shadow: 0 6px 16px rgba(0, 0, 0, .25); }

/* =====================================================================
   DESIGN V2 : plus moderne, plus dynamique, pense pour donner envie d'acheter
   (un seul bloc : pour revenir en arriere, supprimer tout ce qui suit)
   ===================================================================== */

/* en-tete : ombre douce quand on defile */
.header { box-shadow: 0 6px 22px rgba(10, 60, 140, .18); }

/* titres de sections : plus grands, bouton « Voir tout » en pastille */
.block-head h2 { font-size: 22px; font-weight: 800; letter-spacing: .005em; }
.block-head a { background: #fff; border: 1px solid #d4e2f4; padding: 7px 15px; border-radius: 99px; color: var(--blue-dark); font-size: 13.5px; transition: background .2s, color .2s, transform .2s, border-color .2s; }
.block-head a:hover { background: var(--blue); color: #fff; border-color: var(--blue); text-decoration: none; transform: translateX(2px); }
[dir="rtl"] .block-head a:hover { transform: translateX(-2px); }

/* cartes produit : arrondies, ombre douce, bouton qui se remplit au survol */
.card { border: 0; border-radius: 18px; padding: 11px; box-shadow: 0 2px 12px rgba(16, 42, 82, .08); transition: box-shadow .3s, transform .3s var(--ease); }
.card:hover { box-shadow: 0 16px 34px rgba(16, 60, 130, .20); transform: translateY(-6px); }
.thumb { border-radius: 14px; }
.card-name { font-size: 13.5px; font-weight: 500; }
.price { font-size: 18px; letter-spacing: -.01em; }
.add-btn { border-radius: 12px; padding: 10px; background: linear-gradient(120deg, #e6f1ff, #d3e6ff); color: var(--blue-dark); box-shadow: inset 0 0 0 1px rgba(10, 132, 247, .15); }
.card:hover .add-btn, .add-btn:hover { background: linear-gradient(120deg, var(--blue), #3b9cff); color: #fff; box-shadow: 0 6px 16px rgba(10, 132, 247, .35); }

/* bandeau de confiance */
.trust-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 18px; background: #fff; border-radius: 18px; padding: 16px 18px; box-shadow: var(--shadow); }
.ts-item { display: flex; align-items: center; gap: 12px; min-width: 0; }
.ts-ico { flex: none; width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; background: linear-gradient(135deg, #e3f0ff, #cfe3fb); color: var(--blue-dark); transition: transform .3s var(--ease), background .3s, color .3s; }
.ts-ico svg { width: 24px; height: 24px; }
.ts-item:hover .ts-ico { transform: translateY(-3px) rotate(-4deg); background: linear-gradient(135deg, var(--blue), #3b9cff); color: #fff; }
.ts-item b { display: block; font-size: 14.5px; color: var(--navy); line-height: 1.25; }
.ts-item small { display: block; font-size: 12.5px; color: var(--muted); margin-top: 2px; line-height: 1.3; }
@media (max-width: 900px) { .trust-strip { grid-template-columns: 1fr 1fr; padding: 14px; gap: 14px 10px; } .ts-ico { width: 40px; height: 40px; border-radius: 12px; } .ts-item b { font-size: 13.5px; } .ts-item small { font-size: 12px; } }
@media (max-width: 420px) { .ts-item { gap: 9px; } .ts-item small { display: none; } }

/* tuiles de l'accueil : un petit rebond au survol */
.offer { transition: transform .3s var(--ease), box-shadow .3s; }
.offer:hover { transform: translateY(-5px); box-shadow: 0 16px 30px rgba(16, 60, 130, .28); }

/* bouton WhatsApp flottant */
.wa-float { position: fixed; inset-inline-start: 16px; bottom: 18px; z-index: 60; width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; background: #25d366; color: #fff; box-shadow: 0 8px 22px rgba(37, 211, 102, .45); transition: transform .25s var(--ease), box-shadow .25s; }
.wa-float svg { width: 30px; height: 30px; }
.wa-float::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 2px solid #25d366; animation: waPulse 2.4s ease-out infinite; }
.wa-float:hover { transform: scale(1.1); box-shadow: 0 12px 28px rgba(37, 211, 102, .55); text-decoration: none; }
@keyframes waPulse { 0% { transform: scale(1); opacity: .75; } 100% { transform: scale(1.65); opacity: 0; } }

/* panier : rebond quand on ajoute un produit */
.cart-btn.bump { animation: cartBump .5s var(--ease); }
@keyframes cartBump { 0% { transform: scale(1); } 30% { transform: scale(1.18) rotate(-4deg); } 60% { transform: scale(.96); } 100% { transform: scale(1); } }

/* page produit : bouton d'achat plus visible + barre collante sur telephone */
.pp-add { font-size: 17px; padding: 15px; border-radius: 14px; box-shadow: 0 10px 24px rgba(10, 132, 247, .32); transition: transform .2s, box-shadow .2s; }
.pp-add:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 14px 30px rgba(10, 132, 247, .42); }
.sticky-buy { display: none; }
@media (max-width: 720px) {
  .sticky-buy { display: flex; align-items: center; gap: 12px; position: fixed; inset-inline: 0; bottom: 0; z-index: 55; padding: 10px 14px calc(10px + env(safe-area-inset-bottom)); background: rgba(255, 255, 255, .96); backdrop-filter: blur(10px); border-top: 1px solid #dbe6f4; box-shadow: 0 -8px 24px rgba(10, 40, 90, .14); }
  .sticky-buy .sb-price { display: flex; flex-direction: column; line-height: 1.1; min-width: 92px; }
  .sticky-buy .sb-price small { font-size: 11.5px; color: var(--muted); }
  .sticky-buy .sb-price b { font-size: 20px; color: var(--navy); font-weight: 800; }
  .sticky-buy .btn { flex: 1; padding: 13px; font-size: 16px; border-radius: 13px; }
  #productView:not([hidden]) { padding-bottom: 86px; }
  #productView:not([hidden]) ~ .wa-float, body:has(#productView:not([hidden])) .wa-float { bottom: 88px; }
}
@media (prefers-reduced-motion: reduce) { .wa-float::after, .cart-btn.bump { animation: none; } }

/* bandeau d'annonce */
.topbar { background: linear-gradient(90deg, #fbb917, #ffd56a, #fbb917); color: #0b2a4a; font-weight: 700; font-size: 13.5px; text-align: center; padding: 8px 14px; display: flex; align-items: center; justify-content: center; gap: 8px; line-height: 1.3; }
.topbar svg { width: 18px; height: 18px; flex: none; }
@media (max-width: 560px) { .topbar { font-size: 12px; padding: 7px 10px; } }

/* le panier, les fenetres et les cookies passent toujours au-dessus de la barre d'achat et du bouton WhatsApp */
.wa-float { z-index: 35; }
@media (max-width: 720px) { .sticky-buy { z-index: 35; } }

/* produit sans prix pour l'instant */
.price .pend, .price.pend, .sb-price b.pend { font-size: 13px; color: var(--muted); font-weight: 700; line-height: 1.3; }
.pp-price .price.pend { font-size: 20px; }

/* tuile d'un partenaire : fond blanc, logo bien visible, bouton marine */
.offer.partner { box-shadow: inset 0 0 0 1.5px #d5e3f5; }
.offer.partner::before { display: none; }
.offer.partner .offer-head { text-shadow: none; }
.offer.partner .offer-img { object-fit: contain; }
.offer.partner .offer-pill { background: var(--navy); color: #fff; }

/* tuile partenaire : le logo contient deja le nom, on cache le titre ; contour propre au lieu de l'ombre interne */
.offer.partner { box-shadow: none; outline: 1.5px solid #cfe0f5; outline-offset: -1.5px; }
.offer.partner .offer-head > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.offer.partner .offer-head { justify-content: flex-end; }
.offer.partner .offer-head .ico { color: var(--navy); }

/* tuile partenaire : meme style que les autres tuiles (fond bleu, titre blanc, bouton blanc) */
.offer.partner { box-shadow: none; outline: none; }
.offer.partner::before { display: block; }
.offer.partner .offer-head > span { position: static; width: auto; height: auto; overflow: visible; clip: auto; }
.offer.partner .offer-head { justify-content: space-between; }
.offer.partner .offer-head .ico { color: inherit; }
.offer.partner .offer-pill { background: #fff; color: var(--navy); }
.offer.partner .offer-img { object-fit: cover; }

/* tuile partenaire : le degrade bleu est deja dans l'image, pas de voile sombre par-dessus la carte blanche */
.offer.partner::before { display: none; }

/* Bannière d'un partenaire : même cadre que les autres bannières ; le nom est déjà dans l'image, on garde seulement le nombre de produits */
.cat-banner.partner-banner { background: #fff; }
.cat-banner.partner-banner img { object-fit: cover; object-position: 50% 46% !important; }
.cat-banner.partner-banner .cb-text { inset: auto auto 14px 16px; width: auto; padding: 0; }
.cat-banner.partner-banner .cb-chip { display: inline-block; background: #fff; color: #0b2a4a; border-color: rgba(11, 42, 74, .15); box-shadow: 0 2px 8px rgba(11, 42, 74, .18); }
html[dir="rtl"] .cat-banner.partner-banner .cb-text { inset: auto 16px 14px auto; }

/* options avec remise : ancien prix barré dans la pastille */
.var-chips button small s { opacity: .65; margin-inline-end: 3px; }

/* Roue de chargement des listes (bleu et or) */
.list-loader { display: grid; place-items: center; padding: 36px 0 8px; }
.list-loader[hidden] { display: none; }
.wheel { width: 46px; height: 46px; border-radius: 50%; border: 5px solid #dbe8f7; border-top-color: var(--blue); border-right-color: var(--gold); animation: wheelspin .8s linear infinite; }
@keyframes wheelspin { to { transform: rotate(360deg); } }
.grid.is-loading { opacity: 0; min-height: 240px; }
.grid { transition: opacity .25s ease; }
@media (prefers-reduced-motion: reduce) { .wheel { animation-duration: 2.4s; } }

/* Roue de voiture qui tourne sur la route (chargement des listes) */
.carwheel { position: relative; width: 150px; height: 86px; display: grid; place-items: start center; overflow: hidden; }
.cw-tire { width: 64px; height: 64px; animation: cwspin .7s linear infinite, cwbump .35s ease-in-out infinite; filter: drop-shadow(0 4px 5px rgba(11, 42, 74, .28)); }
.cw-road { position: absolute; left: 0; right: 0; bottom: 14px; height: 4px; border-radius: 4px; background: repeating-linear-gradient(90deg, #8aa0bd 0 18px, transparent 18px 34px); animation: cwroad .45s linear infinite; opacity: .75; }
@keyframes cwspin { to { transform: rotate(360deg); } }
@keyframes cwbump { 0%, 100% { margin-top: 0; } 50% { margin-top: -2px; } }
@keyframes cwroad { to { background-position: -34px 0; } }
@media (prefers-reduced-motion: reduce) { .cw-tire { animation-duration: 3s, 3s; } .cw-road { animation: none; } }
.wheel { display: none; }
.carwheel { width: 190px; height: 104px; }
.cw-tire { width: 78px; height: 78px; }
.cw-road { bottom: 12px; height: 5px; }

/* Ventes Flash : rouge profond, avec l'or et le marine du site (bouton, compte à rebours, filet doré) */
.flash-block { position: relative; background: linear-gradient(135deg, #8c0f2a 0%, #c41e3a 55%, #dc3149 100%); box-shadow: 0 10px 26px rgba(160, 20, 48, .30); overflow: hidden; }
.flash-block::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 4px; background: linear-gradient(90deg, var(--gold), #ffd45c, var(--gold)); }
.flash-block::after { content: ""; position: absolute; inset-inline-end: -60px; top: -80px; width: 240px; height: 240px; border-radius: 50%; background: radial-gradient(circle, rgba(255, 255, 255, .14), transparent 68%); pointer-events: none; }
.flash-top, .flash-row { position: relative; z-index: 1; }
.flash-block .countdown { background: var(--gold); color: var(--navy); box-shadow: 0 2px 8px rgba(0, 0, 0, .18); }
.flash-more { background: #fff; color: #a8132f !important; }
.flash-more:hover { box-shadow: 0 6px 16px rgba(0, 0, 0, .25); }
.fc-off { background: #d62839; color: #fff; }
.fcard { box-shadow: 0 6px 16px rgba(80, 0, 16, .22); }

/* Ventes Flash : sans jaune (demande de Hamza) - blanc et rouge, avec un filet blanc discret */
.flash-block::before { height: 3px; background: linear-gradient(90deg, rgba(255, 255, 255, .15), rgba(255, 255, 255, .75), rgba(255, 255, 255, .15)); }
.flash-block .countdown { background: #fff; color: #a8132f; box-shadow: 0 2px 8px rgba(0, 0, 0, .16); }
.flash-block .countdown svg { color: #c41e3a; }

/* Bannière Ventes Flash : photo passée au rouge ; le gros chiffre est blanc (pas de jaune) */
.slide[data-nav="flash"] .slide-big { color: #fff; text-shadow: 0 2px 14px rgba(80, 0, 16, .35); }
.slide[data-nav="flash"] .slide-kicker { color: rgba(255, 255, 255, .92); }

/* Ventes Flash : retour au rouge d'origine (demande de Hamza) - dégradé #c62828 vers rouge vif, compte à rebours et bouton blancs */
.flash-block { background: linear-gradient(135deg, #c62828, var(--red)); box-shadow: 0 10px 26px rgba(198, 40, 40, .28); overflow: visible; }
.flash-block::before, .flash-block::after { content: none; }
.flash-block .countdown { background: #fff; color: #c62828; box-shadow: none; }
.flash-more { background: #fff; color: #c62828 !important; }
.fc-off { background: var(--blue); color: #fff; }
.fcard { box-shadow: none; }

/* ---------- Jeu Mondo (roue qui saute entre des piles de pneus) ---------- */
.game-ov { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; background: rgba(8, 24, 44, .72); backdrop-filter: blur(3px); padding: 12px; }
.game-ov[hidden] { display: none; }
.game-box { position: relative; width: min(100%, 420px); max-height: 100%; background: #0b2a4a; border-radius: 20px; padding: 14px 14px 16px; box-shadow: 0 24px 60px rgba(0, 0, 0, .45); color: #fff; text-align: center; border: 1px solid rgba(255, 255, 255, .12); }
.game-title { margin: 0; font-size: 20px; font-weight: 800; }
.game-sub { margin: 2px 0 10px; font-size: 13px; color: #b9cde4; }
.game-x { position: absolute; top: 8px; inset-inline-end: 10px; width: 34px; height: 34px; border-radius: 50%; border: 0; background: rgba(255, 255, 255, .14); color: #fff; font-size: 22px; line-height: 1; cursor: pointer; }
.game-x:hover { background: rgba(255, 255, 255, .26); }
.game-stage { position: relative; width: 100%; aspect-ratio: 360 / 540; max-height: calc(100vh - 150px); margin: 0 auto; border-radius: 14px; overflow: hidden; touch-action: none; user-select: none; -webkit-user-select: none; }
.game-stage canvas { width: 100%; height: 100%; display: block; touch-action: none; cursor: pointer; }
.game-panel { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 18px 16px; background: rgba(8, 24, 44, .62); }
.game-panel[hidden] { display: none; }
.game-panel h4 { margin: 0; font-size: 18px; font-weight: 800; }
.game-prizes { display: grid; gap: 6px; font-size: 13.5px; color: #d6e4f4; }
.game-prizes b { color: #fff; font-size: 14px; }
.game-prizes span { background: rgba(255, 255, 255, .1); border-radius: 10px; padding: 6px 10px; }
.game-prizes i { font-style: normal; font-weight: 800; color: #fff; background: #e53935; border-radius: 6px; padding: 1px 7px; margin-inline-end: 6px; }
.game-btn { border: 0; cursor: pointer; font: inherit; font-weight: 800; font-size: 16px; color: var(--navy, #0b2a4a); background: #fff; border-radius: 99px; padding: 11px 34px; box-shadow: 0 6px 16px rgba(0, 0, 0, .3); }
.game-btn:hover { transform: translateY(-1px); }
.game-score { display: flex; gap: 22px; }
.game-score span { display: grid; font-size: 12px; color: #b9cde4; }
.game-score b { font-size: 30px; color: #fff; line-height: 1.1; }
.game-win { display: grid; gap: 6px; background: rgba(255, 255, 255, .12); border-radius: 14px; padding: 10px 12px; }
.game-win small { font-size: 12.5px; color: #d6e4f4; }
.game-win .game-only { font-size: 11.5px; opacity: .8; }
.game-code { display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; }
.game-code b { font-size: 22px; letter-spacing: .06em; background: #fff; color: #0b2a4a; border-radius: 10px; padding: 4px 12px; }
.game-copy { border: 1px solid rgba(255, 255, 255, .5); background: transparent; color: #fff; border-radius: 99px; padding: 6px 12px; font: inherit; font-size: 13px; cursor: pointer; }
.game-next { margin: 0; font-size: 13px; color: #d6e4f4; }

/* Jeu Mondo : version fluide (taille adaptée à l'écran, bouton son, annonce de récompense, barre de progression) */
.game-box { width: fit-content; max-width: 100%; }
.game-stage { width: auto; height: min(540px, calc(100vh - 150px)); height: min(540px, calc(100dvh - 150px)); max-height: none; aspect-ratio: 360 / 540; max-width: 100%; }
.game-stage canvas { width: 100%; height: 100%; }
.game-snd { position: absolute; top: 8px; inset-inline-start: 10px; width: 34px; height: 34px; border-radius: 50%; border: 0; background: rgba(255, 255, 255, .14); color: #fff; display: grid; place-items: center; cursor: pointer; }
.game-snd:hover { background: rgba(255, 255, 255, .26); }
.game-snd .off { display: none; }
.game-snd.muted .on { display: none; }
.game-snd.muted .off { display: inline; }
.game-banner { position: absolute; top: 96px; inset-inline: 14px; text-align: center; background: #fff; color: #0b2a4a; font-weight: 800; font-size: 15px; border-radius: 99px; padding: 9px 14px; box-shadow: 0 8px 22px rgba(0, 0, 0, .35); pointer-events: none; }
.game-banner[hidden] { display: none; }
.game-banner.show { animation: gbanner 2.2s ease both; }
@keyframes gbanner { 0% { transform: translateY(-14px) scale(.9); opacity: 0; } 12% { transform: none; opacity: 1; } 85% { opacity: 1; } 100% { opacity: 0; } }
.game-record { background: #e53935; color: #fff; font-weight: 800; font-size: 13px; border-radius: 99px; padding: 4px 14px; animation: gpop .5s ease both; }
@keyframes gpop { 0% { transform: scale(.6); opacity: 0; } 70% { transform: scale(1.1); } 100% { transform: scale(1); opacity: 1; } }
.game-next { width: 100%; max-width: 280px; display: grid; gap: 6px; }
.game-next .bar { height: 8px; border-radius: 8px; background: rgba(255, 255, 255, .18); overflow: hidden; }
.game-next .bar i { display: block; height: 100%; border-radius: 8px; background: linear-gradient(90deg, #6fb3ff, #fff); transition: width .5s ease; }
.game-next span { font-size: 13px; color: #d6e4f4; }
.game-panel { animation: gfade .25s ease both; }
@keyframes gfade { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .game-banner.show, .game-record, .game-panel { animation: none; } }
.game-stage { height: auto; max-width: none; width: min(360px, calc(100vw - 52px), calc((100vh - 150px) * 0.6667)); width: min(360px, calc(100vw - 52px), calc((100dvh - 150px) * 0.6667)); aspect-ratio: 360 / 540; }
@media (max-height: 520px) { .game-sub { display: none; } .game-box { padding-top: 10px; } .game-title { font-size: 16px; margin-bottom: 6px; } .game-stage { width: min(360px, calc(100vw - 52px), calc((100vh - 84px) * 0.6667)); width: min(360px, calc(100vw - 52px), calc((100dvh - 84px) * 0.6667)); } }

/* ---------- Optimisation téléphones : pas de zoom automatique dans les formulaires, boutons plus faciles à toucher ---------- */
html { -webkit-tap-highlight-color: rgba(10, 132, 247, .12); -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
a, button, [role="button"], summary, label, select { touch-action: manipulation; }
@media (max-width: 900px) {
  input:not([type="checkbox"]):not([type="radio"]), select, textarea { font-size: 16px !important; }
  input[type="checkbox"], input[type="radio"] { width: 22px; height: 22px; accent-color: var(--blue); }
  .flash-more, .sub-more { min-height: 40px; }
  .remove { min-height: 38px; padding-inline: 12px; }
  .qty button { width: 40px; height: 40px; }
  .fc-off, .badge { font-size: 12px; }
  .var-chips button small { font-size: 12px; }
  .dot { position: relative; }
  .dot::after { content: ""; position: absolute; inset: -14px -5px; }
}

/* Jeu : aucun éclair blanc ni surlignage quand on clique ou touche */
.game-ov, .game-ov * { -webkit-tap-highlight-color: transparent; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.game-ov *:focus { outline: none; }
.game-ov button:focus-visible { outline: 2px solid rgba(255, 255, 255, .55); outline-offset: 2px; }
.game-stage canvas { outline: none; -webkit-tap-highlight-color: transparent; }
.game-stage canvas::selection, .game-ov *::selection { background: transparent; }

/* Jeu Mondo : classement du mois, enregistrement du score */
.game-panel { overflow-y: auto; justify-content: flex-start; align-items: stretch; padding: 14px 14px; }
.game-panel .gp-in { margin: auto; display: flex; flex-direction: column; align-items: center; gap: 10px; width: 100%; }
.game-prizes { width: 100%; text-align: start; }
.game-prizes ul { list-style: none; margin: 6px 0 4px; padding: 0; display: grid; gap: 6px; }
.game-prizes li { display: grid; grid-template-columns: 38px 1fr auto; align-items: center; gap: 8px; background: rgba(255, 255, 255, .1); border-radius: 10px; padding: 6px 10px; font-size: 13px; }
.game-prizes li i { font-style: normal; font-weight: 800; color: #fff; background: #e53935; border-radius: 6px; padding: 1px 0; text-align: center; font-size: 12px; }
.game-prizes li span { display: grid; font-weight: 700; color: #fff; }
.game-prizes li span small { font-weight: 500; font-size: 11px; color: #b9cde4; }
.game-prizes li em { font-style: normal; font-size: 12px; color: #d6e4f4; max-width: 110px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.game-prizes > small { color: #b9cde4; font-size: 12px; }
.game-prizes b { font-size: 14px; color: #fff; }
.game-reach { color: #b9cde4; font-size: 12px; text-align: center; }
.game-btn.alt { background: #e53935; color: #fff; }
.game-link { background: none; border: 0; color: #cfe0f3; text-decoration: underline; cursor: pointer; font: inherit; font-size: 13px; padding: 8px; }
.game-form { width: 100%; display: grid; gap: 8px; text-align: start; }
.game-form h4 { text-align: center; }
.game-form label { display: grid; gap: 4px; font-size: 12.5px; color: #cfe0f3; font-weight: 600; }
.game-form input { width: 100%; border: 1px solid rgba(255, 255, 255, .25); background: rgba(255, 255, 255, .95); color: #0b2a4a; border-radius: 10px; padding: 10px 12px; font-size: 16px !important; font-family: inherit; }
.game-ov .game-form input { -webkit-user-select: text; user-select: text; }
.game-form small { color: #b9cde4; font-size: 11.5px; }
.game-err { color: #ffb4b4; font-size: 12.5px; min-height: 0; font-weight: 700; }
.game-row { display: grid; justify-items: center; gap: 2px; }
.game-hit { display: grid; gap: 4px; text-align: center; background: rgba(255, 255, 255, .14); border-radius: 12px; padding: 10px; }
.game-hit b { font-size: 17px; color: #fff; }
.game-hit span { font-size: 13px; color: #d6e4f4; }
.game-line { margin: 0; font-size: 14px; color: #fff; font-weight: 700; }

/* Pied de page : bouton du classement du jeu */
.footer-board { display: inline-flex; align-items: center; gap: 8px; margin-top: 8px; padding: 9px 16px; border-radius: 99px; background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .22); color: #fff !important; font-weight: 700; font-size: 14px; text-decoration: none !important; transition: background .2s, transform .15s; }
.footer-board:hover { background: rgba(255, 255, 255, .2); transform: translateY(-1px); }
.footer-board svg { flex: none; color: #fbb917; }

/* Jeu Mondo : classement Top 10 */
.game-board { width: 100%; display: grid; gap: 6px; }
.game-board ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 5px; max-height: 300px; overflow-y: auto; }
.game-board li { display: grid; grid-template-columns: 30px 1fr auto; align-items: center; gap: 8px; background: rgba(255, 255, 255, .09); border-radius: 10px; padding: 6px 10px; font-size: 14px; text-align: start; }
.game-board li i { font-style: normal; font-weight: 800; text-align: center; border-radius: 6px; background: rgba(255, 255, 255, .15); font-size: 12.5px; padding: 1px 0; }
.game-board li.gb1 i, .game-board li.gb2 i, .game-board li.gb3 i { background: #e53935; }
.game-board li span { display: grid; font-weight: 700; color: #fff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.game-board li span small { font-weight: 500; font-size: 11px; color: #b9cde4; }
.game-board li b { font-size: 16px; color: #fff; }
.game-board > small { color: #b9cde4; font-size: 12px; text-align: center; }
.game-board ol { scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, .35) transparent; padding-inline-end: 4px; }
.game-board ol::-webkit-scrollbar { width: 6px; }
.game-board ol::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .35); border-radius: 6px; }
.game-board ol::-webkit-scrollbar-track { background: transparent; }

/* Pied de page : bandeau « Jeu Mondo » (à la place du petit bouton dans Contact) */
.footer-board { display: none; }
.footer-game { display: flex; align-items: center; justify-content: space-between; gap: 16px 24px; flex-wrap: wrap; margin-top: 4px; margin-bottom: 8px; padding: 16px 20px; border-radius: 16px; background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .14); }
.fg-text { display: flex; align-items: center; gap: 14px; min-width: 0; flex: 1 1 320px; }
.fg-text b { color: #fff; font-size: 16px; }
.fg-text p { margin: 2px 0 0; color: #b9cde4; font-size: 14px; }
.fg-ico { flex: none; width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, .12); color: #fff; }
.fg-btns { display: flex; gap: 10px; flex-wrap: wrap; }
.fg-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 42px; padding: 0 20px; border-radius: 99px; font-weight: 700; font-size: 14.5px; color: #fff !important; border: 1px solid rgba(255, 255, 255, .35); text-decoration: none !important; transition: transform .15s, background .2s; }
.fg-btn:hover { background: rgba(255, 255, 255, .16); transform: translateY(-1px); }
.fg-btn.main { background: #fff; color: #0b2a4a !important; border-color: #fff; }
.fg-btn.main:hover { background: #eaf3fe; }
@media (max-width: 560px) { .footer-game { padding: 14px; } .fg-btns { width: 100%; } .fg-btn { flex: 1; } }
.footer .fg-btn { display: inline-flex; align-items: center; justify-content: center; margin: 0; padding: 0 22px; height: 42px; line-height: 1.1; }

/* Classement seul (bouton « Voir le Top 10 ») */
.board-box { width: min(100%, 400px); padding-bottom: 20px; }
.board-box .game-sub { margin-bottom: 12px; text-transform: capitalize; }
.board-body { display: grid; gap: 10px; }
.board-box .game-board ol { max-height: min(430px, calc(100vh - 230px)); max-height: min(430px, calc(100dvh - 230px)); }
.board-box .game-board li { font-size: 15px; padding: 8px 12px; }
.board-box .game-line { color: #cfe0f3; font-weight: 600; padding: 18px 0; }
.board-box .game-board ol { max-height: min(530px, calc(100vh - 190px)); max-height: min(530px, calc(100dvh - 190px)); }

/* Chargement des listes (sauf Accessoires Auto) : le logo Mondo, anneau doré qui tourne et montagne qui pulse */
.logoload { width: 84px; height: 84px; margin: 0 auto; filter: drop-shadow(0 4px 8px rgba(11, 42, 74, .22)); }
.logoload svg { width: 100%; height: 100%; display: block; overflow: visible; }
.ll-ring { stroke-dasharray: 72 28; transform-origin: 50% 50%; animation: llspin 1.1s linear infinite; }
.ll-peak { transform-origin: 50% 58%; animation: llpulse 1.1s ease-in-out infinite; }
@keyframes llspin { to { transform: rotate(360deg); } }
@keyframes llpulse { 0%, 100% { transform: scale(.92); opacity: .8; } 50% { transform: scale(1.06); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .ll-ring { animation-duration: 3s; } .ll-peak { animation: none; } }

/* Texte pour Google et les IA (inséré par le serveur) : présent dans la page, invisible pour le visiteur */
.seo-static { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }

/* Présentation de la catégorie + questions fréquentes (SEO) */
.cat-seo { margin: 26px 0 10px; padding: 20px 22px; background: #fff; border: 1px solid #e3eaf5; border-radius: 14px; color: #34425a; line-height: 1.7; }
.cat-seo h2 { margin: 0 0 8px; font-size: 20px; color: #0b2a5b; }
.cat-seo h3 { margin: 18px 0 8px; font-size: 16px; color: #0b2a5b; }
.cat-seo p { margin: 0 0 10px; font-size: 14.5px; }
.cat-seo details { border-top: 1px solid #e8eef8; padding: 10px 0; }
.cat-seo summary { cursor: pointer; font-weight: 700; color: #0b2a5b; font-size: 14.5px; }
.cat-seo details p { margin: 8px 0 0; }
@media (max-width: 640px) { .cat-seo { padding: 16px 14px; margin-top: 18px; } }

/* Finitions : accessibilité clavier, chargement des photos, état vide, zones tactiles */
:focus-visible { outline: 3px solid rgba(10, 132, 247, .55); outline-offset: 2px; border-radius: 8px; }
button:focus:not(:focus-visible), a:focus:not(:focus-visible) { outline: none; }
.thumb { background: linear-gradient(100deg, #eef3fa 30%, #f8fbff 50%, #eef3fa 70%); background-size: 200% 100%; animation: thumbShimmer 1.4s linear 4; }
.thumb img { background: #fff; }
@keyframes thumbShimmer { to { background-position: -200% 0; } }
.empty { display: flex; flex-direction: column; align-items: center; gap: 10px; grid-column: 1 / -1; }
.empty svg { width: 56px; height: 56px; color: #9db3d1; }
.empty p { margin: 0 0 6px; font-size: 16px; color: var(--navy); font-weight: 700; }
.btn:active, .add-btn:active, .chip:active { transform: scale(.97); }
@media (max-width: 700px) { .chip { min-height: 40px; display: inline-flex; align-items: center; } .lang-btn, .cart-btn { min-height: 44px; } .add-btn { min-height: 44px; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } .thumb { animation: none; } }

/* Fiche produit : la photo entière est visible (verticale, horizontale ou carrée), sans être coupée */
.pp-gal .gal-main, .gal-main { background: #fff; }
.pp-gal .gal-main img, .gal-main img { object-fit: contain; }
.gal-thumbs button img { object-fit: contain; background: #fff; }
.card .thumb img, .fc-img .thumb img { object-fit: contain; }
.gal-main > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }

/* ---- Finitions 2026-11-05 ---- */
/* pas de faux tiret sous le prix quand il n'y a pas d'ancien prix */
.old.is-empty { text-decoration: none; visibility: hidden; }
/* bouton Commander sur WhatsApp (fiche produit) */
.pp-wa { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 10px; background: #fff; color: var(--navy, #0b2a4a); border: 2px solid #25d366; font-weight: 700; border-radius: 12px; padding: 12px 16px; text-decoration: none; transition: background .2s, transform .15s; }
.pp-wa svg { color: #25d366; flex: none; }
.pp-wa:hover { background: #effcf4; }
.pp-wa:active { transform: scale(.98); }
/* bannière avec une version téléphone : la balise picture ne doit pas pousser le texte */
.slide-img picture { display: contents; }
.slide-img picture source { display: none; }
.slide-img:has(picture) { justify-content: flex-start; }

/* ---- Bandeau fournisseurs (2026-11-06) : bleu nuit + or, lumière qui passe, avantages ---- */
.supplier-band { position: relative; overflow: hidden; isolation: isolate; gap: 22px; padding: 26px 28px;
  background: radial-gradient(120% 140% at 0% 0%, #1d4e89 0%, #0b2a4a 55%, #071d35 100%); border: 0; color: #fff;
  box-shadow: 0 14px 34px rgba(11, 42, 74, .22); }
.supplier-band::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, .10) 48%, transparent 60%); transform: translateX(-100%);
  animation: sbSweep 6s ease-in-out 1.5s infinite; }
.sb-glow { position: absolute; z-index: -1; width: 320px; height: 320px; right: -80px; top: -140px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(251, 185, 23, .35), transparent 65%); animation: sbFloat 7s ease-in-out infinite alternate; }
[dir="rtl"] .sb-glow { right: auto; left: -80px; }
.supplier-band .supplier-ico { position: relative; width: 66px; height: 66px; background: linear-gradient(140deg, var(--gold-soft), var(--gold)); color: var(--navy);
  box-shadow: 0 8px 22px rgba(251, 185, 23, .35); }
.supplier-band .supplier-ico::after { content: ""; position: absolute; inset: -6px; border-radius: 50%; border: 2px solid rgba(251, 185, 23, .55);
  animation: sbPulse 2.6s ease-out infinite; }
.sb-kicker { display: inline-block; font-size: 11.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--gold-soft); margin-bottom: 4px; }
[dir="rtl"] .sb-kicker { letter-spacing: 0; }
.supplier-band .supplier-text h2 { color: #fff; font-size: 22px; }
.supplier-band .supplier-text p { color: rgba(255, 255, 255, .78); }
.sb-perks { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 0; padding: 0; }
.sb-perks li { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; font-size: 13px; font-weight: 600;
  background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .14); color: #fff;
  opacity: 0; transform: translateY(6px); animation: sbIn .5s ease forwards; }
.sb-perks li:nth-child(2) { animation-delay: .12s; } .sb-perks li:nth-child(3) { animation-delay: .24s; }
.sb-perks svg { width: 15px; height: 15px; color: var(--gold); flex: none; }
.sb-btn { display: inline-flex; align-items: center; gap: 10px; background: var(--gold); color: var(--navy); font-weight: 800; border: 0;
  padding: 14px 24px; border-radius: 14px; box-shadow: 0 8px 20px rgba(251, 185, 23, .35); transition: transform .2s, box-shadow .2s, background .2s; }
.sb-btn svg { width: 18px; height: 18px; transition: transform .25s; }
[dir="rtl"] .sb-btn svg { transform: scaleX(-1); }
.sb-btn:hover { background: var(--gold-soft); transform: translateY(-2px); box-shadow: 0 12px 26px rgba(251, 185, 23, .45); }
.sb-btn:hover svg { transform: translateX(4px); }
[dir="rtl"] .sb-btn:hover svg { transform: scaleX(-1) translateX(4px); }
@keyframes sbSweep { 0% { transform: translateX(-100%); } 45%, 100% { transform: translateX(100%); } }
@keyframes sbFloat { from { transform: translate(0, 0); } to { transform: translate(-40px, 30px); } }
@keyframes sbPulse { 0% { transform: scale(.9); opacity: .9; } 100% { transform: scale(1.35); opacity: 0; } }
@keyframes sbIn { to { opacity: 1; transform: none; } }
@media (max-width: 700px) {
  .supplier-band { padding: 22px 18px; gap: 14px; text-align: start; }
  .supplier-band .supplier-text h2 { font-size: 19px; }
  .sb-btn { width: 100%; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
  .supplier-band::before, .sb-glow, .supplier-band .supplier-ico::after { animation: none; }
  .sb-perks li { animation: none; opacity: 1; transform: none; }
}

/* ---------- Flèches des rangées : toujours visibles pour montrer qu'il y a plus de produits ---------- */
.row-wrap { position: relative; z-index: 1; }
.row-wrap .row-arrow, .offers-block .row-arrow { opacity: 1; width: 44px; height: 44px; border: 1px solid #d4e2f4; background: #fff; box-shadow: 0 4px 16px rgba(11,42,74,.28); }
.row-wrap .row-arrow svg, .offers-block .row-arrow svg { width: 22px; height: 22px; stroke: var(--navy); stroke-width: 2.6; }
.row-wrap .row-arrow:hover, .offers-block .row-arrow:hover { background: var(--gold, #f5b400); border-color: var(--gold, #f5b400); }
.row-wrap .row-prev, .row-wrap .row-next { top: 42%; }
.row-wrap .row-prev { left: -6px; } .row-wrap .row-next { right: -6px; }
[dir="rtl"] .row-wrap .row-prev { left: auto; right: -6px; } [dir="rtl"] .row-wrap .row-next { right: auto; left: -6px; }
.at-start > .row-prev, .at-end > .row-next, .no-more > .row-arrow { opacity: 0 !important; pointer-events: none; }
.row-wrap:not(.at-end) > .row-next, .offers-block:not(.at-end) > .row-next { animation: rowNudge 1.8s ease-in-out infinite; }
@keyframes rowNudge { 0%, 70%, 100% { translate: 0 0; } 82% { translate: 5px 0; } 92% { translate: -1px 0; } }
[dir="rtl"] .row-wrap > .row-next, [dir="rtl"] .offers-block > .row-next { animation-name: rowNudgeRtl; }
@keyframes rowNudgeRtl { 0%, 70%, 100% { translate: 0 0; } 82% { translate: -5px 0; } 92% { translate: 1px 0; } }
@media (hover: none) { .row-wrap .row-arrow, .offers-block .row-arrow { display: grid; } }
@media (max-width: 700px) {
  .row-wrap .row-arrow, .offers-block .row-arrow { width: 38px; height: 38px; }
  .row-wrap .row-arrow svg, .offers-block .row-arrow svg { width: 19px; height: 19px; }
  .row-wrap .row-prev { left: -2px; } .row-wrap .row-next { right: -2px; }
  [dir="rtl"] .row-wrap .row-prev { left: auto; right: -2px; } [dir="rtl"] .row-wrap .row-next { right: auto; left: -2px; }
}
@media (prefers-reduced-motion: reduce) { .row-wrap > .row-next, .offers-block > .row-next { animation: none !important; } }

/* ---------- Newsletter (haut du bas de page) ---------- */
.nl-band { background: #0a2240; border-bottom: 1px solid rgba(255,255,255,.08); }
.nl-in { display: grid; grid-template-columns: 260px 1fr; gap: 28px 48px; align-items: start; padding-top: 30px; padding-bottom: 28px; }
.nl-logo { width: 210px; height: auto; display: block; margin-top: 4px; }
.nl-form { max-width: 760px; }
.nl-form h4 { margin: 0 0 8px; color: #fff; font-size: 17px; font-weight: 800; letter-spacing: .02em; text-transform: uppercase; }
.nl-text { margin: 0 0 16px; color: #dbe6f3; line-height: 1.55; }
.nl-check { display: flex; gap: 12px; align-items: flex-start; cursor: pointer; color: #b9cbe0; line-height: 1.55; margin-bottom: 16px; }
.nl-check input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.nl-box { flex: 0 0 26px; width: 26px; height: 26px; border-radius: 6px; border: 2px solid #f5b400; display: grid; place-items: center; transition: background .15s; margin-top: 1px; }
.nl-box svg { width: 18px; height: 18px; fill: none; stroke: #0b2a4a; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; opacity: 0; transition: opacity .15s; }
.nl-check input:checked + .nl-box { background: #f5b400; }
.nl-check input:checked + .nl-box svg { opacity: 1; }
.nl-check input:focus-visible + .nl-box { outline: 3px solid rgba(245,180,0,.45); outline-offset: 2px; }
.footer .nl-check a { display: inline; padding: 0; margin: 0; color: #ffd257; text-decoration: underline; }
.nl-row { display: flex; gap: 14px; flex-wrap: wrap; }
.nl-field { flex: 1 1 280px; max-width: 440px; display: flex; align-items: center; gap: 12px; background: #fff; border-radius: 10px; padding: 0 16px; min-height: 56px; border: 2px solid transparent; transition: border-color .15s; }
.nl-field:focus-within { border-color: #f5b400; }
.nl-field svg { flex: 0 0 24px; width: 24px; height: 24px; fill: #9aa7b6; stroke: #fff; stroke-width: 1.6; }
.nl-field input { flex: 1; border: 0; outline: 0; background: transparent; font-size: 16px; color: #0b2a4a; min-width: 0; padding: 14px 0; font-family: inherit; }
[dir="rtl"] .nl-field input { text-align: right; }
.nl-btn { min-height: 56px; padding: 0 30px; border-radius: 10px; border: 2px solid #f5b400; background: transparent; color: #fff; font-weight: 800; font-size: 15px; cursor: pointer; font-family: inherit; transition: background .2s, color .2s; }
.nl-btn:hover, .nl-btn:focus-visible { background: #f5b400; color: #0b2a4a; }
.nl-btn[disabled] { opacity: .6; cursor: wait; }
.nl-msg { margin: 12px 0 0; min-height: 1.2em; font-weight: 700; }
.nl-msg.ok { color: #7ee2a8; } .nl-msg.err { color: #ff9a9a; }
.nl-unsub { display: block; color: #8fa6c2; margin-top: 4px; }
@media (max-width: 760px) {
  .nl-in { grid-template-columns: 1fr; gap: 16px; padding-top: 24px; padding-bottom: 22px; }
  .nl-logo { width: 150px; }
  .nl-field { max-width: none; }
  .nl-btn { flex: 1 1 100%; }
}

/* Jeu Mondo désactivé dans l'admin */
.footer-game[hidden], .legal-links a[hidden] { display: none !important; }

/* films de teinte non disponibles (admin) */
.tint-card[hidden], .tint-duo[hidden], .tab[hidden] { display: none !important; }

/* ---------- Recherche : suggestions pendant la frappe + correction des fautes ---------- */
.search-suggest{position:absolute;left:0;right:0;top:calc(100% + 8px);z-index:200;background:#fff;border-radius:16px;box-shadow:0 18px 50px rgba(11,42,74,.25);padding:8px;max-height:70vh;overflow:auto;color:#0b2a4a}
.search-suggest[hidden]{display:none}
.search-suggest .sug-item{display:flex;align-items:center;gap:12px;width:100%;padding:8px 10px;border:0;background:none;border-radius:12px;cursor:pointer;text-align:start;font:inherit;color:inherit}
.search-suggest .sug-item:hover,.search-suggest .sug-item.on{background:#eef5ff}
.search-suggest .sug-item img{width:48px;height:48px;border-radius:10px;object-fit:cover;flex:0 0 48px;background:#f3f6fa}
.sug-name{flex:1;font-size:15px;font-weight:600;line-height:1.25;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.sug-price{font-size:15px;color:var(--blue-dark,#0b5cad);white-space:nowrap}
.sug-note{padding:8px 12px;font-size:14px;color:#6b7785;font-weight:600}
.sug-note b{color:var(--navy)}
.sug-chips{display:flex;flex-wrap:wrap;gap:8px;padding:2px 12px 12px}
.sug-chips .chip,.empty-chips button.chip{font:inherit;font-size:13.5px;font-weight:700;cursor:pointer}
.picks-title{grid-column:1/-1;margin:8px 0 0;font-size:18px;color:var(--navy)}
.search-suggest .sug-all{display:block;width:100%;margin-top:4px;padding:11px;border:0;border-top:1px solid #edf1f6;background:none;font:inherit;font-weight:800;color:var(--blue-dark,#0b5cad);cursor:pointer;border-radius:0 0 12px 12px}
.search-suggest .sug-all:hover{background:#f5f9ff}
.search-hint{margin:4px 0 12px;padding:12px 16px;border-radius:12px;background:#fff8e1;border:1px solid #ffe08a;color:#5a4a1a;font-size:15px}
.search-hint b{color:#0b2a4a}
.empty-chips{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin:6px 0 16px}
@media (max-width:700px){.search-suggest{left:-4px;right:-4px}.search-suggest .sug-item img{width:42px;height:42px;flex-basis:42px}}

/* Vente au mètre (ex : joint de porte) : longueur, choix rapide et total calculé */
.per-m { font-size: 15px; font-weight: 600; color: #5b6b82; margin-inline-start: 4px; }
small.per-m { font-size: 12px; }
.pp-meter { background: #f4f8ff; border: 1px solid #dbe6f7; border-radius: 14px; padding: 14px; margin: 6px 0 16px; }
.pp-meter .qty { margin: 0 0 12px; }
.pp-meter #qIn { width: 64px; height: 38px; border: 1px solid #cfd9e8; border-radius: 10px; text-align: center; font-size: 17px; font-weight: 700; color: #0b2545; background: #fff; -moz-appearance: textfield; }
.pp-meter #qIn::-webkit-outer-spin-button, .pp-meter #qIn::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.pp-meter .m-u { font-weight: 700; color: #0b2545; }
.m-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 12px; font-size: 13px; color: #5b6b82; }
.m-chips button { border: 1px solid #cfd9e8; background: #fff; color: #0b2545; border-radius: 999px; padding: 7px 12px; font: inherit; font-weight: 600; cursor: pointer; }
.m-chips button:hover { border-color: #d4a017; }
.m-chips button.on { background: #0b2545; border-color: #0b2545; color: #fff; }
.m-total { font-size: 16px; color: #0b2545; padding: 10px 12px; background: #fff; border-radius: 10px; border-inline-start: 4px solid #d4a017; }
.m-total b { font-size: 19px; }
.m-note { display: block; margin-top: 8px; color: #5b6b82; font-size: 12.5px; line-height: 1.45; }
/* Grande bannière d'accueil au-dessus d'une catégorie (catégorie.homeBanner) */
.home-cat-banner { display: block; margin: 0 0 22px; border-radius: 22px; overflow: hidden; box-shadow: 0 10px 28px rgba(11, 37, 69, .14); height: 230px; background: #1a56c9; }
.home-cat-banner img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 38%; transition: transform .4s ease; }
.home-cat-banner:hover img { transform: scale(1.02); }
@media (max-width: 640px) { .home-cat-banner { height: 130px; border-radius: 14px; margin-bottom: 14px; } }
/* Bannière fine en 3 parties (photo | texte | produits) */
.home-cat-banner.hb-split { position: relative; display: flex; align-items: stretch; height: 210px; background: linear-gradient(90deg, #1a4fc4 0%, #2563dc 50%, #1d55cf 100%); color: #fff; text-decoration: none; }
.hb-split img { width: auto; height: 100%; object-fit: cover; flex: 0 0 auto; transition: none; }
.home-cat-banner.hb-split:hover img { transform: none; }
.hb-split .hb-l { -webkit-mask-image: linear-gradient(90deg, #000 78%, transparent); mask-image: linear-gradient(90deg, #000 78%, transparent); }
.hb-split .hb-r { margin-inline-start: auto; -webkit-mask-image: linear-gradient(270deg, #000 82%, transparent); mask-image: linear-gradient(270deg, #000 82%, transparent); }
.hb-txt { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 6px; padding: 0 10px; }
.hb-txt small { font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #ffd36b; }
.hb-txt b { font-size: 26px; line-height: 1.15; font-weight: 800; }
.hb-txt span { font-size: 15px; opacity: .92; }
.hb-txt em { font-style: normal; margin-top: 6px; background: #fff; color: #0b2545; font-weight: 800; font-size: 15px; padding: 8px 18px; border-radius: 999px; }
[dir="rtl"] .hb-split .hb-l { -webkit-mask-image: linear-gradient(270deg, #000 78%, transparent); mask-image: linear-gradient(270deg, #000 78%, transparent); }
[dir="rtl"] .hb-split .hb-r { -webkit-mask-image: linear-gradient(90deg, #000 82%, transparent); mask-image: linear-gradient(90deg, #000 82%, transparent); }
@media (max-width: 900px) { .home-cat-banner.hb-split { height: 160px; } .hb-txt b { font-size: 19px; } .hb-txt span { display: none; } }
@media (max-width: 640px) { .home-cat-banner.hb-split { height: 118px; } .hb-split .hb-r { display: none; } .hb-txt { padding: 0 14px 0 4px; gap: 4px; } .hb-txt small { font-size: 10.5px; } .hb-txt b { font-size: 15px; } .hb-txt em { font-size: 12.5px; padding: 5px 12px; margin-top: 2px; } }
/* Menu des catégories (bouton ☰ à gauche du logo, comme une appli) */
.header-inner { position: relative; }
.menu-btn { flex: none; width: 42px; height: 42px; display: grid; place-items: center; border: 0; border-radius: 12px; background: rgba(255,255,255,.12); color: #fff; cursor: pointer; transition: background .2s; }
.menu-btn svg { width: 24px; height: 24px; }
.menu-btn:hover, .menu-btn.on { background: rgba(255,255,255,.26); }
.menu-btn.on { color: var(--gold); }
.cat-menu { position: absolute; top: calc(100% + 4px); inset-inline-start: 12px; z-index: 60; width: 320px;
  background: #fff; border-radius: 16px; box-shadow: 0 18px 50px rgba(11, 37, 69, .28); animation: cmIn .18s ease-out; }
.cm-list { max-height: calc(100vh - 110px); overflow-y: auto; overscroll-behavior: contain; padding: 8px 8px 10px; }
.cm-item.on { background: #fff6dc; }
.cm-item.on .cm-ico { background: #0b2545; color: #f5b82e; }
/* panneau des sous-catégories : à côté du menu sur ordinateur */
.cm-fly { position: absolute; top: 0; inset-inline-start: calc(100% - 6px); width: 300px; min-height: 100%; background: #fff; border-radius: 16px; box-shadow: 0 18px 50px rgba(11, 37, 69, .28); padding: 8px 8px 10px; border-inline-start: 4px solid #f5b82e; animation: cmIn .15s ease-out; }
.cm-fly[hidden] { display: none; }
.cm-fly-head { display: flex; align-items: center; gap: 8px; padding: 8px 12px 8px; }
.cm-fly-head b { font-size: 15px; color: #0b2545; }
.cm-back { display: none; align-items: center; gap: 4px; border: 0; background: #eaf2fd; color: #1a56c9; font: inherit; font-size: 13px; font-weight: 700; padding: 6px 10px 6px 6px; border-radius: 99px; cursor: pointer; }
.cm-back .cm-chev { transform: scaleX(-1); color: #1a56c9; }
[dir="rtl"] .cm-back .cm-chev { transform: none; }
.cat-menu[hidden] { display: none; }
@keyframes cmIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.cm-head { font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #6b7a90; padding: 8px 12px 6px; }
.cm-item { display: flex; align-items: center; gap: 12px; padding: 9px 10px; border-radius: 12px; color: #0b2545; text-decoration: none; font-size: 15px; font-weight: 600; }
.cm-item:hover { background: #fff6dc; }
.cm-ico { flex: none; width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: #eaf2fd; color: #1a56c9; }
.cm-item:hover .cm-ico { background: #0b2545; color: #f5b82e; }
.cm-ico svg { width: 21px; height: 21px; }
.cm-txt { flex: 1; min-width: 0; }
.cm-chev { width: 16px; height: 16px; color: #9aa8bb; flex: none; }
[dir="rtl"] .cm-chev { transform: scaleX(-1); }
.cm-item.cm-sub { padding-top: 6px; padding-bottom: 6px; padding-inline-start: 30px; font-size: 14px; font-weight: 500; color: #33475f; }
.cm-item.cm-sub .cm-ico { width: 28px; height: 28px; border-radius: 8px; background: #f3f6fb; }
.cm-item.cm-sub .cm-ico svg { width: 17px; height: 17px; }
.cm-sep { height: 1px; background: #e6edf6; margin: 6px 10px; }
@media (max-width: 700px) {
  .menu-btn { width: 38px; height: 38px; border-radius: 10px; }
  .cat-menu { inset-inline-start: 8px; inset-inline-end: 8px; width: auto; }
  .cm-list { max-height: calc(100vh - 140px); }
}
@media (hover: none), (max-width: 700px) {
  .cat-menu.sub-open .cm-list { display: none; }
  .cm-fly { position: static; width: auto; min-height: 0; box-shadow: none; border-inline-start: 0; border-radius: 16px; max-height: calc(100vh - 140px); overflow-y: auto; }
  .cm-back { display: inline-flex; }
}

/* =====================================================
   VERSION TÉLÉPHONE (style application, mêmes tailles qu'une appli de e-commerce) :
   cartes d'environ 1/3 d'écran (2 et demie visibles), image pleine largeur, bouton rond « + »,
   recherche en pilule avec loupe à gauche
   ===================================================== */
.card-plus { display: none; }
@media (max-width: 600px) {
  .container { padding-left: 12px; padding-right: 12px; }
  .block { padding-left: 12px !important; padding-right: 12px !important; border-radius: 16px; }
  /* recherche : pilule blanche, loupe à gauche, pas de bouton texte (Entrée pour chercher) */
  .search { position: relative; background: #fff; border-radius: 999px; padding: 0; gap: 0; height: 46px; box-shadow: 0 2px 8px rgba(11, 42, 74, .10); }
  .search input { border: 0 !important; background: transparent !important; border-radius: 999px !important; height: 46px; font-size: 16px; padding: 0 16px 0 46px !important; box-shadow: none !important; }
  [dir="rtl"] .search input { padding: 0 46px 0 16px !important; }
  .search button { position: absolute; inset-inline-start: 4px; top: 4px; width: 38px; height: 38px; min-height: 0 !important; padding: 0; border-radius: 50% !important; font-size: 0 !important; color: transparent !important;
    background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230b2a4a' stroke-width='2.4' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5'/%3E%3Cpath d='M15.5 15.5L21 21'/%3E%3C/svg%3E") center / 24px no-repeat !important; box-shadow: none !important; }
  /* rangées : une carte = 1/3 d'écran environ, 2 cartes et demie visibles */
  .row-scroll { grid-auto-columns: 33.5vw !important; gap: 9px; }
  .block .row-wrap { margin-inline: -12px; }
  .block .row-wrap > .row-scroll { padding-inline: 12px; scroll-padding-inline: 12px; }
  .row-arrow { display: none !important; }
  /* carte : photo collée aux bords, texte compact en dessous */
  .card { padding: 0 0 10px; border-radius: 12px; overflow: hidden; border: 1px solid var(--line); box-shadow: none; }
  .card:hover { transform: none; box-shadow: none; }
  .card .thumb { border-radius: 0; background: #fff; }
  .card .card-name { font-size: 13px; line-height: 1.35; height: 2.7em; margin: 8px 8px 3px; color: #3a434d; }
  .card .price { font-size: 16px; margin: 2px 8px 0; letter-spacing: -.1px; }
  .card .old { font-size: 12.5px; margin: 0 8px; }
  .card .stars { margin: 2px 8px 0; font-size: 12px; }
  .card .add-btn { margin: 8px 8px 0; min-height: 36px; font-size: 12px; padding: 6px; }
  .card:not(.sold-out):not(.soon) .add-btn:not(:disabled) { display: none; }
  /* réduction en haut à gauche, bouton + en haut à droite */
  .card .badge { top: 8px; inset-inline-start: 8px; inset-inline-end: auto; font-size: 11.5px; padding: 2px 6px; border-radius: 6px; background: #e6f6ec; color: #0d7a3e; }
  .card .badge.soldout { background: #eef1f5; color: var(--muted); }
  .card .badge.soon { background: #0b2a4a; color: #f5c84c; }
  .card-plus { display: grid; place-items: center; position: absolute; top: 8px; inset-inline-end: 8px; width: 38px; height: 38px; border-radius: 50%; border: 0; padding: 0;
    background: #0b2a4a; color: #fff; font-size: 26px; font-weight: 300; line-height: 1; cursor: pointer; box-shadow: 0 3px 10px rgba(11, 42, 74, .25); z-index: 2; }
  .card-plus:active { transform: scale(.92); }
  /* cartes Ventes Flash : même largeur */
  .flash-row .fc-add { width: 38px; height: 38px; font-size: 26px; }
  .fc-body .price { font-size: 16px; }
  /* titres de rangées */
  .block-head h2, .sub-top h2 { font-size: 21px; }
  [dir="rtl"] .block-head h2, [dir="rtl"] .sub-top h2 { font-size: 19px; }
  .block-head { flex-wrap: nowrap; gap: 8px; }
  .block-head > a { white-space: nowrap; flex: none; }
}

/* Menu des catégories : version compacte (comme Jumia) */
.cat-menu { width: 260px; border-radius: 12px; }
.cm-list { padding: 6px 6px 8px; }
.cm-head { font-size: 11px; padding: 6px 10px 4px; }
.cm-item { gap: 10px; padding: 7px 8px; border-radius: 8px; font-size: 14px; font-weight: 500; line-height: 1.25; }
.cm-ico { width: 22px; height: 22px; border-radius: 0; background: none !important; color: #1a56c9; }
.cm-ico svg { width: 20px; height: 20px; }
.cm-item:hover .cm-ico, .cm-item.on .cm-ico { color: #0b2545; }
.cm-chev { width: 14px; height: 14px; }
.cm-sep { margin: 4px 8px; }
.cm-fly { width: 240px; border-radius: 12px; padding: 6px 6px 8px; }
.cm-fly-head { padding: 6px 8px; }
.cm-fly-head b { font-size: 14px; }
@media (max-width: 700px) {
  .cat-menu { width: 272px; inset-inline-end: auto; max-width: calc(100vw - 16px); }
  .cm-item { padding: 9px 8px; font-size: 14.5px; }
}