/* Zado — design « Éclat moderne » (16/10/2026) : base claire et aérée, identité Zado affirmée.
   Couleurs de la marque dosées : violet nuit (boutons, carrousel), corail (promos), mangue (badges, détails).
   Arrière-plan : formes géométriques qui bougent lentement (désactivées si l'appareil demande moins d'animations).
   Police : celle du système sur iPhone/Mac (San Francisco), Inter (libre, hébergée ici) ailleurs. */
/* Police : Plus Jakarta Sans (libre, licence OFL — public/fonts/OFL-plus-jakarta-sans.txt), hébergée sur Zado : chaleureuse et professionnelle (choix Joseph 19/10/2026) */
@font-face { font-family: 'Plus Jakarta Sans'; src: url('/fonts/plus-jakarta-sans-latin-wght-normal.woff2') format('woff2-variations'), url('/fonts/plus-jakarta-sans-latin-wght-normal.woff2') format('woff2'); font-weight: 200 800; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Plus Jakarta Sans'; src: url('/fonts/plus-jakarta-sans-latin-ext-wght-normal.woff2') format('woff2-variations'), url('/fonts/plus-jakarta-sans-latin-ext-wght-normal.woff2') format('woff2'); font-weight: 200 800; font-style: normal; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
:root {
  --brand-text: #10264A;  /* texte violet : identique à --brand en clair, éclairci en sombre */
  --font: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --ink: #0E1424;          /* texte : violet presque noir */
  --muted: #5F6B80;
  --bg: #F3F5F9;           /* fond : blanc à peine lavande */
  --paper: #FFFFFF;
  --soft: #EEF2F7;         /* fonds des vignettes */
  --line: #DDE3EC;
  --line-soft: #E8ECF2;
  --brand: #10264A;        /* violet nuit Zado */
  --brand-2: #1B3A6B;
  --link: #1E56C2;
  --accent: #FF5A3C;       /* corail */
  --accent-dark: #E0421F;
  --mango: #FFB300;
  --mango-dark: #8A5A00;
  --violet-soft: #E6EEFA;
  --mango-soft: #FFF1CC;
  --coral-soft: #FFE6DF;
  --price: #0E1424;
  --mtn: #FFCB05;
  --airtel: #E40000;
  --ok: #0E8A66;
  --err: #C62E1F;
  --radius: 16px;
  --radius-sm: 12px;
  --shadow: 0 2px 10px rgba(16,38,74,.05);
  --shadow-hover: 0 16px 34px rgba(16,38,74,.14);
}
* { box-sizing: border-box; }
html { background: var(--bg); font-size: 14.5px; } /* taille de base 14,5 px (équilibre lisibilité / densité) : tout le texte en rem suit */
/* iPhone : un champ de saisie sous 16 px fait zoomer la page quand on touche dedans → on garde 16 px pour les champs */
@supports (-webkit-touch-callout: none) { input, select, textarea { font-size: 16px !important; } }
html, body { margin: 0; }
body {
  font-family: var(--font); font-size: 1rem; line-height: 1.5; letter-spacing: 0;
  background: transparent; color: var(--ink); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
h1, h2, h3 { font-weight: 600; letter-spacing: -0.02em; line-height: 1.1; margin: 0 0 .5rem; color: var(--ink); }
h1 { font-size: clamp(1.55rem, 4vw, 2.2rem); }
button { font: inherit; letter-spacing: inherit; }
.ico { width: 1.15em; height: 1.15em; fill: currentColor; vertical-align: -0.2em; flex: none; }

@keyframes drift { from { transform: translate(0, 0); } to { transform: translate(40px, -60px); } }
@media (prefers-reduced-motion: reduce) { .deco { animation: none !important; } }

.demo-strip { background: var(--ink); color: var(--mango); text-align: center; font-size: .78rem; font-weight: 600; padding: 8px 16px; }

/* ---------- En-tête Zado : bande violette + bande des rayons, liseré violet→corail→mangue ---------- */
.header { position: sticky; top: 0; z-index: 20; color: #fff; box-shadow: 0 6px 18px rgba(16,38,74,.18); }
.header::after { content: ''; display: block; height: 3px; background: linear-gradient(90deg, var(--brand-2), var(--accent) 55%, var(--mango)); }
.hdr-top { background: radial-gradient(120% 180% at 0% 0%, #1B3A6B 0%, var(--brand) 45%, #0B1A33 100%); }
.hdr-sub { background: rgba(255,255,255,.06); background-color: #0B1A33; border-top: 1px solid rgba(255,255,255,.08); }
.header-inner { max-width: 1320px; margin: 0 auto; padding: 10px 20px; display: flex; align-items: center; gap: 10px; }
.logo { display: flex; align-items: center; padding: 4px 6px; flex: none; margin-right: 6px; }
.logo img { height: 32px; width: auto; display: block; }
.hdr-btn {
  position: relative; display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; flex: none;
  background: none; border: 0; border-radius: 999px; color: #fff; cursor: pointer; font: inherit; line-height: 1.15; transition: background .2s;
}
.hdr-btn:hover, .hdr-btn:focus-within { background: rgba(255,255,255,.12); }
.hdr-btn > .ico { font-size: 1.4rem; color: var(--mango); }
.hdr-two { display: flex; flex-direction: column; text-align: left; white-space: nowrap; }
.hdr-two small { font-size: .72rem; color: #C8D3E8; }
.hdr-two strong { font-size: .88rem; font-weight: 700; }
.deliver { margin: 0; }
.deliver select { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; font-size: 16px; }
.menu-btn { display: none; }
.search {
  flex: 1; min-width: 0; display: flex; align-items: center; gap: 6px; height: 46px; margin: 0 10px; padding: 4px;
  background: #fff; border-radius: 999px; border: 2px solid transparent; transition: border-color .2s, box-shadow .2s;
}
.search:focus-within { border-color: var(--accent); box-shadow: 0 0 0 4px rgba(255,90,60,.22); }
.search-cat {
  position: relative; display: flex; align-items: center; gap: 4px; padding: 0 12px; flex: none; max-width: 160px; align-self: stretch; margin: 0 !important; height: auto;
  background: var(--violet-soft); color: var(--brand-text); font-size: .8rem; font-weight: 700; border-radius: 999px; cursor: pointer;
}
.search-cat:hover { background: #D6E2F5; }
.search-cat span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.search-cat .ico { font-size: .7rem; flex: none; }
.search-cat select { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; font-size: 16px; }
.search input { flex: 1; min-width: 0; border: 0; padding: 0 8px; font: inherit; font-size: .98rem; color: var(--ink); outline: none; background: transparent; }
.search input::placeholder { color: #8A93A6; }
.search-go {
  flex: none; align-self: stretch; display: inline-flex; align-items: center; gap: 6px; padding: 0 18px; border: 0; border-radius: 999px; cursor: pointer;
  background: linear-gradient(135deg, var(--accent), #FF7A45); color: #fff; font: inherit; font-weight: 700; font-size: .88rem;
}
.search-go .ico { font-size: 1.1rem; }
.search-go:hover { filter: brightness(1.06); }
.header-actions { display: flex; align-items: center; gap: 4px; flex: none; }
.cart-btn { background: rgba(255,255,255,.1); }
.cart-btn:hover { background: rgba(255,255,255,.2); }
.cart-ico { position: relative; display: inline-flex; }
.cart-ico .ico { font-size: 1.5rem; color: #fff; }
.cart-label { font-size: .9rem; font-weight: 700; }
.badge {
  position: absolute; top: -7px; right: -9px; min-width: 19px; height: 19px; padding: 0 5px;
  background: var(--mango); color: var(--ink); font-weight: 700; border-radius: 999px; font-size: .7rem; line-height: 19px; text-align: center; box-shadow: 0 0 0 2px var(--brand);
}
.badge:empty { display: none; }
.search-toggle { display: none !important; }

.sub-inner { max-width: 1320px; margin: 0 auto; padding: 0 20px; display: flex; align-items: center; gap: 6px; height: 42px; }
.all-btn {
  flex: none; display: inline-flex; align-items: center; gap: 6px; padding: 5px 14px; color: var(--ink); background: var(--mango);
  border: 0; border-radius: 999px; font: inherit; font-weight: 700; font-size: .85rem; cursor: pointer;
}
.all-btn .ico { font-size: 1.05rem; }
.all-btn:hover { background: #FFC233; }
.catnav { flex: 1; min-width: 0; display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none; }
.catnav::-webkit-scrollbar { display: none; }
.catnav a {
  flex: none; display: inline-flex; align-items: center; gap: 5px; font-size: .86rem; font-weight: 500; color: #E3E9F3;
  padding: 5px 12px; border-radius: 999px; white-space: nowrap; transition: background .2s, color .2s;
}
.catnav a:hover { background: rgba(255,255,255,.12); color: #fff; }
.catnav a.active { background: #fff; color: var(--brand); font-weight: 700; }
.catnav a.deals-link { color: #FF8A70; font-weight: 700; }
.catnav a.deals-link.active { background: var(--accent); color: #fff; }
.sub-promise { flex: none; display: inline-flex; align-items: center; gap: 6px; font-weight: 600; font-size: .82rem; color: #C8D3E8; padding-left: 10px; }
.sub-promise .ico { color: var(--mango); font-size: 1.1rem; }

/* Menu « Rayons » */
.menu-panel { position: fixed; inset: 0; z-index: 45; background: rgba(8,14,28,.55); display: none; }
.menu-panel.open { display: block; }
.menu-sheet { position: absolute; left: 0; top: 0; bottom: 0; width: min(360px, 86vw); background: var(--paper); display: flex; flex-direction: column; box-shadow: 10px 0 40px rgba(0,0,0,.25); animation: menu-in .2s ease-out; }
@keyframes menu-in { from { transform: translateX(-100%); } to { transform: none; } }
.menu-head { display: flex; align-items: center; gap: 10px; padding: 14px 16px; background: #0B1A33; color: #fff; font-weight: 700; font-size: 1.05rem; }
.menu-head > .ico { font-size: 1.8rem; color: var(--mango); }
.menu-head a { color: #fff; flex: 1; }
.menu-close { background: none; border: 0; color: #fff; font-size: 1.3rem; cursor: pointer; padding: 4px; display: grid; }
.menu-body { overflow-y: auto; padding: 4px 0 24px; }
.menu-body h3 { margin: 0; padding: 16px 20px 6px; font-size: 1rem; color: var(--ink); border-top: 1px solid var(--line-soft); }
.menu-body h3:first-child { border-top: 0; }
.menu-body a { display: flex; align-items: center; gap: 10px; padding: 10px 20px; color: #34405A; font-size: .93rem; }
.menu-body a:hover { background: var(--soft); color: var(--ink); }
.menu-body a .ico { font-size: 1.15rem; color: var(--brand-2); }
body.no-scroll { overflow: hidden; }

@media (max-width: 1100px) { .orders-btn, .sub-promise { display: none; } .deliver .hdr-two small { display: none; } }
@media (max-width: 860px) {
  .header-inner { flex-wrap: wrap; padding: 8px 12px 10px; gap: 2px; }


  .logo img { height: 27px; }
  .header-actions { margin-left: auto; }
  .account-btn .hdr-two small { display: none; }
  .account-btn .hdr-two strong { font-size: .8rem; }
  .account-btn { padding: 6px 8px; gap: 5px; }
  .cart-label { display: none; }
  .cart-btn { padding: 8px 12px; }
  .search { order: 5; flex: 1 0 100%; margin: 8px 0 0; height: 46px; }
  .search-cat { max-width: 86px; padding: 0 10px; }
  .search-go span { display: none; }
  .search-go { padding: 0 14px; }
  .deliver { order: 6; flex: 1 0 100%; justify-content: flex-start; margin-top: 6px; padding: 4px 6px; background: none; }
  .deliver .hdr-two { flex-direction: row; gap: 5px; align-items: baseline; }
  .deliver .hdr-two small { display: inline; }
  .deliver > .ico { font-size: 1.1rem; }
  .all-btn { padding: 4px 11px; }
  .sub-inner { padding: 0 10px; height: 40px; }
}

main { max-width: 1180px; margin: 0 auto; padding: 20px 20px 40px; min-height: 60vh; }
@media (max-width: 760px) { main { padding: 14px 14px 32px; } }

/* ---------- Grand carrousel ---------- */
.slider { position: relative; border-radius: 28px; overflow: hidden; box-shadow: 0 20px 50px rgba(16,38,74,.16); }
.slider-track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.slider-track::-webkit-scrollbar { display: none; }
.slide {
  flex: 0 0 100%; scroll-snap-align: start; position: relative; overflow: hidden;
  display: grid; grid-template-columns: 1.05fr 1fr; align-items: center; gap: 24px; min-height: 400px; padding: 48px 64px;
}
.slide-text { position: relative; z-index: 2; }
.slide h2 { font-size: clamp(1.65rem, 4vw, 2.6rem); font-weight: 700; color: inherit; margin: 14px 0 10px; }
.slide p { font-size: clamp(.95rem, 1.8vw, 1.05rem); margin: 0; opacity: .92; max-width: 30em; }
.pill { display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; border-radius: 999px; font-size: .8rem; font-weight: 700; background: rgba(255,255,255,.18); }
.slide-ctas { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; margin-top: 24px; }
.slide-more { font-weight: 600; text-decoration: underline; text-underline-offset: 4px; }
.slide-visual { position: relative; height: 320px; display: grid; place-items: center; }
.slide-visual img { position: relative; z-index: 2; max-width: 100%; max-height: 290px; object-fit: contain; border-radius: 22px; box-shadow: 0 24px 50px rgba(0,0,0,.22); transform: rotate(-3deg); transition: transform .5s; }
.slide:hover .slide-visual img { transform: rotate(0) scale(1.02); }
.deco { position: absolute; border-radius: 50%; animation: drift 14s ease-in-out infinite alternate; }
.o1 { width: 340px; height: 340px; background: rgba(255,255,255,.12); }
.o2 { width: 150px; height: 150px; border: 14px solid rgba(255,255,255,.18); top: -10px; right: 0; animation-duration: 18s; }
.o3 { width: 60px; height: 60px; background: var(--mango); bottom: 20px; left: 10%; opacity: .9; animation-duration: 10s; }
.slide-badge {
  position: absolute; z-index: 3; top: 8%; right: 6%; width: 86px; height: 86px; border-radius: 50%; display: grid; place-items: center;
  background: var(--mango); color: var(--brand-text); font-weight: 700; font-size: 1.25rem; transform: rotate(12deg); box-shadow: 0 10px 24px rgba(0,0,0,.18);
}
.theme-violet { background: linear-gradient(135deg, #10264A 0%, #1B3A6B 60%, #2D66D6 100%); color: #fff; }
.theme-coral { background: linear-gradient(135deg, #FF5A3C 0%, #FF7A45 55%, #FF9F43 100%); color: #fff; }
.theme-coral .o3 { background: var(--brand); }
.theme-mango { background: linear-gradient(135deg, #FFE7A8 0%, #FFD266 100%); color: var(--ink); }
.theme-mango .pill, .theme-light .pill { background: rgba(16,38,74,.08); color: var(--brand-text); }
.theme-mango .o1 { background: rgba(255,255,255,.4); } .theme-mango .o2 { border-color: rgba(16,38,74,.08); } .theme-mango .o3 { background: var(--accent); }
.theme-light { background: linear-gradient(135deg, #EAF0F9 0%, #FFF1EA 100%); color: var(--ink); }
.theme-light .o1 { background: rgba(30,86,194,.08); } .theme-light .o2 { border-color: rgba(255,90,60,.15); }
.slider-arrow {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 3; width: 46px; height: 46px; border-radius: 50%; border: 0;
  background: rgba(255,255,255,.92); color: var(--ink); display: grid; place-items: center; cursor: pointer; font-size: 1.1rem; box-shadow: 0 6px 18px rgba(0,0,0,.15); opacity: 0; transition: opacity .25s;
}
.slider:hover .slider-arrow, .slider-arrow:focus-visible { opacity: 1; }
.slider-arrow.prev { left: 14px; } .slider-arrow.next { right: 14px; }
.slider-dots { position: absolute; z-index: 3; bottom: 16px; left: 50%; transform: translateX(-50%); display: flex; gap: 6px; padding: 6px 10px; border-radius: 999px; background: rgba(14,20,36,.18); backdrop-filter: blur(6px); }
.slider-dots:empty { display: none; }
.slider-dots button { width: 8px; height: 8px; border-radius: 999px; border: 0; padding: 0; background: rgba(255,255,255,.6); cursor: pointer; transition: width .3s, background .3s; }
.slider-dots button.on { width: 24px; background: #fff; }
.pay-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.pay-chips span { display: inline-flex; align-items: center; gap: 6px; background: #fff; color: var(--ink); border-radius: 999px; padding: 7px 14px; font-size: .85rem; font-weight: 600; box-shadow: var(--shadow); }
.pay-chips .dot { width: 12px; height: 12px; border-radius: 50%; display: inline-block; }
.pay-chips .dot.mtn { background: var(--mtn); } .pay-chips .dot.airtel { background: var(--airtel); }
@media (max-width: 760px) {
  .slider { border-radius: 22px; }
  .slide { grid-template-columns: 1fr; min-height: 0; padding: 20px 20px 48px; gap: 4px; }
  .slide-visual { height: 150px; order: -1; }
  .slide-visual img { max-height: 140px; border-radius: 16px; }
  .slide h2 { font-size: 1.75rem; }
  .slide p { font-size: .95rem; }
  .slide-ctas { margin-top: 16px; }
  .slide .btn { min-height: 42px; padding: 10px 18px; }
  .o1 { width: 220px; height: 220px; }
  .slide-badge { width: 64px; height: 64px; font-size: 1rem; }
  .slide h2 { margin-top: 10px; }
  .slider-arrow { display: none; }
}

/* ---------- Rayons en bulles ---------- */
.bubbles { display: grid; grid-auto-flow: column; grid-auto-columns: 92px; gap: 10px; overflow-x: auto; scrollbar-width: none; padding: 28px 2px 6px; justify-content: start; }
.bubbles::-webkit-scrollbar { display: none; }
@media (min-width: 1000px) { .bubbles { justify-content: center; } }
.bubbles a { text-align: center; font-size: .82rem; font-weight: 600; color: var(--ink); }
.bubbles .ic { display: grid; place-items: center; width: 74px; height: 74px; margin: 0 auto 8px; border-radius: 24px; font-size: 1.9rem; transition: transform .25s, border-radius .25s; }
.bubbles a:hover .ic { transform: translateY(-4px) rotate(-4deg); border-radius: 50%; }
.tint-violet { background: var(--violet-soft); color: var(--brand-text); }
.tint-mango { background: var(--mango-soft); color: var(--mango-dark); }
.tint-coral { background: var(--coral-soft); color: var(--accent-dark); }

/* ---------- Étagères de produits ---------- */
.shelf { margin: 48px 0 0; }
.shelf-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; margin-bottom: 18px; flex-wrap: wrap; }
.shelf-head h2 { font-size: clamp(1.2rem, 2.6vw, 1.55rem); margin: 0; }
.kicker { margin: 0 0 4px; font-size: .85rem; font-weight: 700; color: var(--accent-dark); display: flex; align-items: center; gap: 6px; }
.kicker.k-violet { color: var(--link); } .kicker.k-mango { color: var(--mango-dark); } .kicker.k-coral { color: var(--accent-dark); }
.see-all { display: inline-flex; align-items: center; gap: 4px; font-weight: 600; font-size: .9rem; color: var(--brand-text); border: 1.5px solid var(--line); border-radius: 999px; padding: 7px 14px; transition: border-color .2s, background .2s; }
.see-all:hover { border-color: var(--brand); background: #fff; }
.flash { background: linear-gradient(135deg, #FFF0EA 0%, #FFF7E2 100%); border-radius: 28px; padding: 28px 28px 8px; position: relative; overflow: hidden; }
.flash::after { content: ''; position: absolute; right: -60px; top: -60px; width: 200px; height: 200px; border-radius: 50%; border: 18px solid rgba(255,90,60,.08); }
@media (max-width: 760px) { .flash { padding: 20px 14px 4px; border-radius: 22px; margin-left: -4px; margin-right: -4px; } }
.countdown { display: flex; align-items: center; gap: 4px; font-weight: 700; color: var(--brand-text); position: relative; z-index: 1; }
.countdown span { font-size: .8rem; color: var(--muted); font-weight: 500; margin-right: 6px; }
.countdown b { background: var(--brand); color: #fff; border-radius: 8px; padding: 4px 8px; font-variant-numeric: tabular-nums; min-width: 34px; text-align: center; }

.rail-wrap { position: relative; }
.rail {
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(210px, 228px); gap: 16px;
  overflow-x: auto; padding: 6px 4px 22px; margin: 0 -4px; scroll-snap-type: x mandatory; scrollbar-width: none; position: relative; z-index: 1;
}
.rail::-webkit-scrollbar { display: none; }
.rail > * { scroll-snap-align: start; }
.rail-arrow {
  position: absolute; top: 38%; z-index: 2; width: 44px; height: 44px; border-radius: 50%; border: 0; background: #fff; color: var(--ink);
  display: grid; place-items: center; cursor: pointer; box-shadow: 0 6px 20px rgba(16,38,74,.18); font-size: 1.05rem; transition: transform .2s;
}
.rail-arrow:hover { transform: scale(1.08); }
.rail-arrow.prev { left: -16px; } .rail-arrow.next { right: -16px; }
@media (max-width: 760px), (hover: none) { .rail-arrow { display: none; } .rail { grid-auto-columns: 168px; gap: 12px; } }

/* Deux bannières côte à côte */
.duo { display: grid; gap: 14px; margin-top: 40px; }
@media (min-width: 760px) { .duo { grid-template-columns: 1fr 1fr; } }
.promo-card { display: flex; align-items: center; gap: 16px; padding: 22px 24px; border-radius: 22px; position: relative; overflow: hidden; transition: transform .25s, box-shadow .25s; }
.promo-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-hover); }
.promo-card b { display: block; font-size: 1.12rem; font-weight: 700; letter-spacing: -0.02em; }
.promo-card small { display: block; font-size: .9rem; opacity: .85; margin-top: 2px; }
.promo-card .ic { width: 54px; height: 54px; border-radius: 18px; display: grid; place-items: center; font-size: 1.6rem; flex: none; }
.promo-card .go { margin-left: auto; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; flex: none; }
.promo-card::after { content: ''; position: absolute; right: -30px; bottom: -40px; width: 120px; height: 120px; border-radius: 50%; }
.pc-violet { background: var(--brand); color: #fff; }
.pc-violet .ic { background: rgba(255,255,255,.14); color: var(--mango); } .pc-violet .go { background: rgba(255,255,255,.14); }
.pc-violet::after { background: rgba(255,179,0,.14); }
.pc-mango { background: #FFD266; color: var(--ink); }
.pc-mango .ic { background: rgba(255,255,255,.5); color: var(--brand-text); } .pc-mango .go { background: var(--brand); color: #fff; }
.pc-mango::after { background: rgba(255,90,60,.16); }

/* Pourquoi Zado */
.reassure { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.reassure > div { background: var(--paper); border: 1px solid var(--line-soft); border-radius: var(--radius); padding: 24px; box-shadow: var(--shadow); }
.reassure .ic { width: 50px; height: 50px; border-radius: 16px; display: grid; place-items: center; font-size: 1.5rem; margin-bottom: 14px; }
.reassure b { display: block; font-size: 1.08rem; font-weight: 700; letter-spacing: -0.02em; margin-bottom: 4px; }
.reassure p { margin: 0; color: var(--muted); font-size: .92rem; }
.r-violet .ic { background: var(--violet-soft); color: var(--brand-text); }
.r-mango .ic { background: var(--mango-soft); color: var(--mango-dark); }
.r-coral .ic { background: var(--coral-soft); color: var(--accent-dark); }
.r-green .ic { background: #E1F5EC; color: var(--ok); }

/* Anciennes classes (compatibilité) */
.section { margin: 40px 0 0; }
.section-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 16px; }
.section-head h2 { font-size: 1.6rem; margin: 0; }

/* ---------- Grille & cartes produit ---------- */
.grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
@media (min-width: 700px) { .grid { grid-template-columns: repeat(3, 1fr); gap: 16px; } }
@media (min-width: 1000px) { .grid { grid-template-columns: repeat(4, 1fr); } }
.card {
  position: relative; background: var(--paper); border: 1px solid var(--line-soft); border-radius: var(--radius); overflow: hidden;
  display: flex; flex-direction: column; box-shadow: var(--shadow); transition: box-shadow .25s, transform .25s;
}
.card:hover { box-shadow: var(--shadow-hover); transform: translateY(-4px); }
.card-link { display: block; position: relative; }
.thumb { aspect-ratio: 1; display: grid; place-items: center; font-size: 3rem; color: var(--muted); }
.card .thumb { margin: 10px 10px 0; border-radius: var(--radius-sm); overflow: hidden; }
.card:hover .thumb img { transform: scale(1.05); }
.disc { position: absolute; top: 18px; left: 18px; z-index: 2; background: var(--accent); color: #fff; font-weight: 700; font-size: .75rem; padding: 3px 9px; border-radius: 999px; box-shadow: 0 4px 10px rgba(255,90,60,.3); }
.card-body { padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 4px; flex: 1; }
.card-body h3 { font-size: .95rem; font-weight: 600; margin: 0; letter-spacing: -0.01em; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.6em; }
.tag { align-self: flex-start; font-size: .7rem; font-weight: 700; padding: 2px 8px; border-radius: 999px; }
.tag-mango { background: var(--mango-soft); color: var(--mango-dark); }
.tag-violet { background: var(--violet-soft); color: var(--brand-text); }
.prices { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; margin-top: 2px; }
.old { color: var(--muted); text-decoration: line-through; font-size: .82rem; }
.price { font-weight: 700; color: var(--price); font-size: 1.05rem; white-space: nowrap; letter-spacing: -0.02em; }
.momo-note { font-size: .85rem; color: var(--ok); }
.stock-low { font-size: .78rem; color: var(--accent-dark); font-weight: 600; }
.brand { font-size: .75rem; font-weight: 600; color: var(--accent-dark); }
.card .card-body > .btn { margin-top: auto; }
/* Disposition identique pour toutes les cartes : chaque zone garde sa place, même vide, et le bouton est toujours en bas */
.card-body .card-tag { height: 20px; display: flex; }
.card .prices { flex-direction: column; align-items: flex-start; gap: 0; flex-wrap: nowrap; }
.card .prices .old { min-height: 1.25em; line-height: 1.25; }
.card .stock-low { height: 20px; line-height: 20px; display: flex; align-items: center; gap: 4px; overflow: hidden; }
.card .stock-low .ico { font-size: 1em; }
.card .card-body > .btn { margin-top: auto; }
.card .card-body > .stock-low { margin-bottom: 8px; }

/* ---------- Boutons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border: 0; background: var(--brand); color: #fff; border-radius: 999px;
  padding: 12px 22px; font-weight: 700; font-size: .98rem; cursor: pointer; min-height: 46px; transition: background .2s, transform .2s, box-shadow .2s;
}
.btn:hover { background: var(--brand-2); transform: translateY(-1px); box-shadow: 0 8px 20px rgba(16,38,74,.22); }
.btn.cta { background: var(--brand); }
.btn.small { padding: 8px 14px; min-height: 38px; font-size: .86rem; width: 100%; }
.btn.promo { background: var(--accent); }
.btn.promo:hover { background: var(--accent-dark); }
.btn.ghost { background: transparent; color: var(--brand-text); box-shadow: inset 0 0 0 1.5px var(--brand); }
.btn.ghost:hover { background: var(--brand); color: #fff; }
.btn.light { background: #fff; color: var(--brand); }
.btn.light:hover { background: #fff; box-shadow: 0 10px 24px rgba(0,0,0,.18); }
.btn.block { width: 100%; }
.btn:disabled { opacity: .4; cursor: not-allowed; transform: none; box-shadow: none; }

/* ---------- Liste / filtres ---------- */
.crumbs { font-size: .82rem; color: var(--muted); margin: 0 0 14px; }
.crumbs a { color: var(--link); }
.crumbs a:hover { text-decoration: underline; }
.list-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; }
.list-head h1 { margin: 0; }
.list-head h1 small { display: block; font-size: .95rem !important; margin-top: 6px; color: var(--muted) !important; font-weight: 500 !important; letter-spacing: 0; }
.list-head select { width: auto; padding: 9px 34px 9px 14px; border-radius: 999px; font-size: .9rem; }
.chips { display: flex; gap: 8px; overflow-x: auto; margin-bottom: 22px; scrollbar-width: none; }
.chips::-webkit-scrollbar { display: none; }
.chip { flex: none; border: 1.5px solid var(--line); background: var(--paper); border-radius: 999px; padding: 7px 16px; font-size: .88rem; font-weight: 500; cursor: pointer; color: var(--ink); }
.chip:hover { border-color: var(--brand); }
.chip.active { background: var(--brand); color: #fff; border-color: var(--brand); }

/* ---------- Fiche produit ---------- */
.pdp { display: grid; gap: 28px; }
@media (min-width: 820px) { .pdp { grid-template-columns: 1.1fr 1fr; gap: 48px; align-items: start; } .pdp > div:last-child { position: sticky; top: 130px; } }
.pdp .thumb { border-radius: 24px; font-size: 5rem; position: relative; background: var(--paper); border: 1px solid var(--line-soft); box-shadow: var(--shadow); }
.pdp h1 { font-size: clamp(1.4rem, 3.2vw, 1.9rem); margin-bottom: 12px; }
.pdp .price { font-size: 1.9rem; }
.buybox { background: var(--paper); border: 1px solid var(--line-soft); border-radius: var(--radius); padding: 22px; display: grid; gap: 10px; margin-top: 20px; box-shadow: var(--shadow); }
.buybox .btn { min-height: 52px; font-size: 1.02rem; }
.save-tag { display: inline-block; background: var(--coral-soft); color: var(--accent-dark); font-weight: 700; font-size: .82rem; padding: 2px 10px; border-radius: 999px; }

/* ---------- Panier ---------- */
.drawer { position: fixed; inset: 0; background: rgba(14,20,36,.35); display: none; z-index: 40; backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
.drawer.open { display: block; }
.drawer-panel { position: absolute; right: 0; top: 0; bottom: 0; width: min(440px, 100%); background: var(--paper); display: flex; flex-direction: column; box-shadow: -10px 0 40px rgba(0,0,0,.14); }
.drawer-head { display: flex; justify-content: space-between; align-items: center; padding: 20px 24px; border-bottom: 1px solid var(--line-soft); }
.drawer-head h2 { margin: 0; font-size: 1.4rem; }
#cartLines { flex: 1; overflow-y: auto; padding: 0 24px; }
.drawer-foot { padding: 20px 24px 24px; border-top: 1px solid var(--line-soft); background: var(--bg); }
.icon-btn { background: var(--soft); border: 0; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; cursor: pointer; color: var(--ink); font-size: 1rem; flex: none; }
.line { display: flex; justify-content: space-between; gap: 12px; padding: 16px 0; border-bottom: 1px solid var(--line-soft); font-size: .95rem; }
.line strong { white-space: nowrap; }
.qty { display: inline-flex; align-items: center; gap: 10px; margin-top: 8px; }
.qty button { width: 30px; height: 30px; border-radius: 50%; border: 0; background: var(--violet-soft); color: var(--brand-text); font-weight: 700; cursor: pointer; }
.row { display: flex; justify-content: space-between; align-items: center; }
.total { font-size: 1.1rem; margin-bottom: 16px; font-weight: 700; }
.total strong { font-size: 1.35rem; font-weight: 700; }
.saving { color: var(--ok); font-size: .9rem; font-weight: 600; margin-bottom: 6px; }
.empty { color: var(--muted); text-align: center; padding: 48px 0; }

/* ---------- Commande et formulaires ---------- */
.panel { background: var(--paper); border: 1px solid var(--line-soft); border-radius: var(--radius); padding: 26px; margin-bottom: 16px; box-shadow: var(--shadow); }
.panel h1 { font-size: clamp(1.35rem, 3.2vw, 1.75rem); }
.panel h2 { font-size: 1.3rem; }
.checkout { display: grid; gap: 16px; }
@media (min-width: 860px) { .checkout { grid-template-columns: 1.4fr 1fr; align-items: start; } }
label { display: block; font-weight: 600; font-size: .88rem; margin: 16px 0 6px; }
input, select, textarea { width: 100%; padding: 13px 14px; border: 1.5px solid var(--line); border-radius: var(--radius-sm); font: inherit; font-size: 1rem; background: var(--paper); color: var(--ink); }
input:focus, select:focus, textarea:focus { outline: 4px solid rgba(30,86,194,.15); border-color: var(--link); }
.hint { font-size: .82rem; color: var(--muted); margin-top: 6px; }
.operators { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 8px; }
.op { border: 1.5px solid var(--line); border-radius: var(--radius-sm); padding: 14px; cursor: pointer; display: flex; align-items: center; gap: 10px; font-weight: 600; margin: 0; background: var(--paper); }
.op input { width: auto; margin: 0; }
.op .dot { width: 24px; height: 24px; border-radius: 50%; flex: none; }
.op.mtn .dot { background: var(--mtn); }
.op.airtel .dot { background: var(--airtel); }
.op:has(input:checked) { border-color: var(--brand); background: var(--violet-soft); }
.methods { display: grid; gap: 10px; margin: 8px 0 12px; }
.methods .op > span { display: flex; flex-direction: row; align-items: center; gap: 12px; }
.methods .op small { font-weight: 400; color: var(--muted); font-size: .82rem; }
.methods .op .ico { font-size: 1.5rem; color: var(--brand-text); }
.methods .op .txt { display: flex; flex-direction: column; }
.alert { padding: 14px 16px; border-radius: var(--radius-sm); margin-top: 14px; font-size: .92rem; }
.alert.err { background: #FDEEEC; color: var(--err); }
.sim { background: var(--mango-soft); color: var(--mango-dark); padding: 12px 16px; border-radius: var(--radius-sm); font-size: .85rem; margin-bottom: 16px; }
.waiting { text-align: center; padding: 40px 12px; }
.spinner { width: 46px; height: 46px; margin: 0 auto 20px; border-radius: 50%; border: 4px solid var(--violet-soft); border-top-color: var(--accent); animation: spin .9s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.big-check { font-size: 3rem; color: var(--ok); line-height: 1; }

/* ---------- Pied de page ---------- */
.footer { position: relative; background: #0B1A33; color: #C8D3E8; margin-top: 72px; font-size: .82rem; line-height: 1.5; overflow: hidden; }
.footer::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: linear-gradient(90deg, var(--brand-2), var(--accent), var(--mango)); }
.footer::after { content: ''; position: absolute; right: -80px; top: -80px; width: 260px; height: 260px; border-radius: 50%; border: 26px solid rgba(255,179,0,.06); }
.footer-inner { max-width: 1180px; margin: 0 auto; padding: 36px 20px 28px; position: relative; z-index: 1; }
.footer-note { margin: 0 0 24px; padding-bottom: 22px; border-bottom: 1px solid rgba(255,255,255,.1); color: #9FB0CC; font-size: .78rem; }
.footer-grid { display: grid; gap: 24px; grid-template-columns: repeat(2, 1fr); padding-bottom: 24px; }
@media (min-width: 760px) { .footer-grid { grid-template-columns: repeat(4, 1fr); } }
.footer h3 { font-size: .9rem; font-weight: 700; color: #fff; margin: 0 0 10px; letter-spacing: -0.01em; }
.footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.footer a:hover { color: var(--mango); }
.footer-legal { border-top: 1px solid rgba(255,255,255,.1); padding-top: 18px; display: flex; flex-wrap: wrap; gap: 10px 24px; align-items: center; font-size: .78rem; }
.copy { margin: 0; color: #fff; }
.legal-links { display: flex; flex-wrap: wrap; row-gap: 6px; }
.legal-links a { padding: 0 10px; border-left: 1px solid rgba(255,255,255,.18); }
.legal-links a:first-child { padding-left: 0; border-left: 0; }
.country { margin: 0 0 0 auto; }
@media (max-width: 760px) { .country { margin-left: 0; } .footer-legal { flex-direction: column; align-items: flex-start; } }

/* ---------- Images produit ---------- */
.thumb.has-img { background: var(--soft); position: relative; overflow: hidden; }
.thumb.has-img img { width: 100%; height: 100%; object-fit: cover; display: block; position: relative; z-index: 1; transition: transform .4s; }
.pdp .thumb.has-img img { object-fit: contain; }
.thumb.has-img .fallback-ico { position: absolute; inset: 0; margin: auto; width: 34%; height: 34%; color: var(--muted); opacity: .3; }
.thumb.has-img:not(.img-failed) .fallback-ico { display: none; }
.thumb.img-failed .fallback-ico { color: var(--brand-text); opacity: .7; }
.thumb.no-img { color: var(--brand-text); }
.thumb.tint-0, .thumb.tint--1 { background: var(--violet-soft); }
.thumb.tint-1 { background: var(--mango-soft); color: var(--mango-dark); }
.thumb.tint-2 { background: var(--coral-soft); color: var(--accent-dark); }

/* ---------- Espace client ---------- */
.account-grid { display: grid; gap: 16px; }
@media (min-width: 860px) { .account-grid { grid-template-columns: 1fr 1fr; align-items: start; } }
.code-box { font-size: 2.6rem; font-weight: 700; letter-spacing: .2em; color: var(--brand-text); background: var(--mango-soft); border: 2px dashed var(--mango); border-radius: var(--radius-sm); padding: 16px; text-align: center; margin: 14px 0; font-variant-numeric: tabular-nums; }
.code-input { font-size: 1.4rem; letter-spacing: .4em; text-align: center; font-weight: 700; }
.stats { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 14px 0; }
.stats div { background: var(--soft); border-radius: var(--radius-sm); padding: 14px; }
.stats b { display: block; font-size: 1.2rem; font-weight: 700; }
.order-card { display: block; border: 1px solid var(--line-soft); border-radius: var(--radius-sm); padding: 16px; margin-top: 10px; background: var(--paper); transition: border-color .2s; }
.order-card:hover { border-color: var(--link); }
.order-card .top { display: flex; justify-content: space-between; gap: 10px; }
.st { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: .75rem; font-weight: 700; }
.st-pending_payment { background: var(--soft); color: var(--muted); }
.st-paid { background: #FFF1DE; color: #8A4B00; }
.st-shipped { background: #E5F0FF; color: #1D4F91; }
.st-delivered { background: #E1F5EC; color: var(--ok); }
.st-cancelled { background: #FDEEEC; color: var(--err); }
.progress { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; margin-top: 12px; }
.progress span { height: 5px; border-radius: 3px; background: var(--line-soft); }
.progress span.on { background: var(--ok); }
.timeline { list-style: none; margin: 10px 0 0; padding: 0; }
.timeline li { position: relative; padding: 0 0 24px 36px; }
.timeline li::before { content: ''; position: absolute; left: 9px; top: 22px; bottom: 0; width: 2px; background: var(--line-soft); }
.timeline li:last-child::before { display: none; }
.timeline li .dot { position: absolute; left: 0; top: 0; width: 20px; height: 20px; border-radius: 50%; background: var(--paper); border: 2px solid var(--line); display: grid; place-items: center; font-size: .7rem; color: #fff; }
.timeline li.done .dot { background: var(--ok); border-color: var(--ok); }
.timeline li.done::before { background: var(--ok); }
.timeline li.current .dot { border-color: var(--mango); box-shadow: 0 0 0 4px var(--mango-soft); }
.timeline li strong { display: block; }
.timeline li .when { font-size: .82rem; color: var(--muted); }
.timeline li.todo strong { color: var(--muted); font-weight: 500; }

/* ---------- Crédits des photos ---------- */
.photo-credit { position: absolute; left: 0; right: 0; bottom: 0; margin: 0; padding: 6px 12px; font-size: .68rem; line-height: 1.3; color: #fff; background: rgba(14,20,36,.6); z-index: 2; }
.photo-credit a { text-decoration: underline; }
.credits { display: grid; gap: 10px; margin-top: 16px; }
.credit-row { display: flex; gap: 14px; align-items: center; border-bottom: 1px solid var(--line-soft); padding-bottom: 10px; }
.credit-row img { width: 64px; height: 64px; object-fit: cover; border-radius: var(--radius-sm); flex: none; background: var(--soft); }
.credit-row a { color: var(--link); }

/* ---------- Fiche produit : galerie, état, caractéristiques ---------- */
.pdp-main { position: relative; border-radius: 24px; overflow: hidden; }
.pdp-thumbs { display: flex; gap: 10px; margin-top: 12px; overflow-x: auto; }
.pdp-thumbs button { flex: none; width: 68px; height: 68px; padding: 0; border: 2px solid transparent; border-radius: var(--radius-sm); overflow: hidden; background: var(--soft); cursor: pointer; }
.pdp-thumbs button.on { border-color: var(--brand); }
.pdp-thumbs img { width: 100%; height: 100%; object-fit: cover; display: block; }
.catnav a.refurb-link { color: #9EE6C9; font-weight: 700; }
.catnav a.refurb-link.active { background: #0E8A66; color: #fff; }
/* Encadré « Reconditionné » de la fiche produit (22/10/2026) */
.refurb-box { margin: 0 0 14px; padding: 12px 14px; border-radius: 14px; background: #E8F6F0; border: 1px solid #BFE6D5; color: #0E3D2F; }
.refurb-box .rb-head { display: flex; align-items: center; gap: 8px; font-size: 1rem; }
.refurb-box .rb-head .ico { color: #0E8A66; width: 20px; height: 20px; }
.refurb-box p { margin: 6px 0 8px; font-size: .9rem; color: #2E5A4A; }
.refurb-box ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 5px; }
.refurb-box li { display: flex; gap: 7px; align-items: flex-start; font-size: .88rem; line-height: 1.35; }
.refurb-box li .ico { color: #0E8A66; flex: none; margin-top: 1px; }
html[data-theme="dark"] .refurb-box { background: #12352B; border-color: #1F5A47; color: #E3FFF3; }
html[data-theme="dark"] .refurb-box p { color: #B6E8D4; }
.cond-tag { display: inline-block; background: var(--violet-soft); color: var(--brand-text); font-weight: 700; font-size: .8rem; padding: 3px 12px; border-radius: 999px; margin-bottom: 8px; }
.specs { width: 100%; border-collapse: collapse; margin: 16px 0 4px; font-size: .92rem; }
.specs th { text-align: left; font-weight: 500; color: var(--muted); padding: 10px 12px 10px 0; width: 40%; border-bottom: 1px solid var(--line-soft); vertical-align: top; }
.specs td { padding: 10px 0; border-bottom: 1px solid var(--line-soft); }

/* ---------- Pages légales ---------- */
.legal { max-width: 760px; margin: 0 auto; padding: 32px; background: var(--paper); border: 1px solid var(--line-soft); border-radius: 24px; box-shadow: var(--shadow); }
@media (max-width: 760px) { .legal { padding: 22px 18px; border-radius: 20px; } }
.legal-kicker { color: var(--accent-dark); font-weight: 700; font-size: .85rem; margin: 0 0 6px; }
.legal h1 { margin-bottom: 8px; }
.legal-date { color: var(--muted); font-size: .85rem; margin: 0 0 28px; }
.legal h2 { font-size: 1.3rem; margin: 32px 0 10px; scroll-margin-top: 140px; }
.legal h3 { font-size: 1.05rem; margin: 22px 0 6px; }
.legal p, .legal li { font-size: 1rem; line-height: 1.65; }
.legal ul { padding-left: 1.2em; }
.legal a { color: var(--link); }
.legal table { width: 100%; border-collapse: collapse; font-size: .9rem; margin: 12px 0; }
.legal th, .legal td { text-align: left; padding: 10px 10px 10px 0; border-bottom: 1px solid var(--line-soft); vertical-align: top; }
.legal th { font-weight: 700; }
.legal .todo { background: var(--mango-soft); color: var(--mango-dark); border-radius: 4px; padding: 0 4px; }
.legal-nav { margin-top: 40px; padding-top: 20px; border-top: 1px solid var(--line-soft); display: flex; flex-wrap: wrap; gap: 8px; }
.legal-nav a { border: 1.5px solid var(--line); border-radius: 999px; padding: 6px 14px; font-size: .85rem; color: var(--ink); }
.legal-nav a.on { background: var(--brand); color: #fff; border-color: var(--brand); }

/* ---------- Cookies : bandeau et réglages ---------- */
.cookie-banner {
  position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 60; max-width: 760px; margin: 0 auto;
  background: rgba(255,255,255,.97); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--line-soft); border-radius: 22px; box-shadow: 0 16px 50px rgba(16,38,74,.22); padding: 22px 24px; overflow: hidden;
}
.cookie-banner::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: linear-gradient(90deg, var(--brand-2), var(--accent), var(--mango)); }
.cookie-banner .skip { position: absolute; top: 16px; right: 18px; background: none; border: 0; color: var(--muted); font-size: .85rem; cursor: pointer; text-decoration: underline; padding: 4px; }
.cookie-banner h2 { font-size: 1.1rem; margin: 0 0 6px; padding-right: 170px; display: flex; gap: 8px; align-items: center; }
.cookie-banner h2 .ico { color: var(--mango-dark); }
.cookie-banner p { margin: 0; font-size: .9rem; color: var(--muted); line-height: 1.5; }
.cookie-banner p a { color: var(--link); }
.cookie-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 16px; }
.cookie-actions .btn { flex: 1 1 160px; min-height: 44px; font-size: .95rem; }
@media (max-width: 560px) { .cookie-banner { padding: 18px; } .cookie-banner h2 { padding-right: 0; margin-top: 20px; } }
.cookie-settings .opt { display: flex; gap: 16px; justify-content: space-between; align-items: flex-start; padding: 20px 0; border-bottom: 1px solid var(--line-soft); }
.cookie-settings .opt b { display: block; font-size: 1.05rem; font-weight: 700; margin-bottom: 4px; }
.cookie-settings .opt p { margin: 0; color: var(--muted); font-size: .92rem; }
.switch { position: relative; width: 51px; height: 31px; flex: none; margin: 0; }
.switch input { opacity: 0; width: 0; height: 0; position: absolute; }
.switch span { position: absolute; inset: 0; border-radius: 999px; background: var(--line); transition: background .2s; cursor: pointer; }
.switch span::after { content: ''; position: absolute; top: 2px; left: 2px; width: 27px; height: 27px; border-radius: 50%; background: #fff; box-shadow: 0 2px 4px rgba(0,0,0,.2); transition: transform .2s; }
.switch input:checked + span { background: var(--ok); }
.switch input:checked + span::after { transform: translateX(20px); }
.switch input:disabled + span { opacity: .5; cursor: not-allowed; }
.switch input:focus-visible + span { outline: 3px solid rgba(30,86,194,.4); outline-offset: 2px; }
@media (max-width: 560px) { .cookie-settings th:nth-child(2), .cookie-settings td:nth-child(2) { display: none; } .legal table { font-size: .82rem; } }

/* ---------- Application web : barre d'onglets, installation, hors ligne ---------- */
.app-tabs { display: none; }
@media (max-width: 760px) {
  .app-tabs {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; display: grid; grid-template-columns: repeat(5, 1fr);
    background: rgba(255,255,255,.94); backdrop-filter: saturate(180%) blur(18px); -webkit-backdrop-filter: saturate(180%) blur(18px);
    border-top: 1px solid var(--line-soft); padding: 6px 4px calc(6px + env(safe-area-inset-bottom));
  }
  .app-tabs a, .app-tabs button {
    position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 4px 0;
    background: none; border: 0; color: var(--muted); font-size: .68rem; font-weight: 600; cursor: pointer;
  }
  .app-tabs .ico { font-size: 1.45rem; }
  .app-tabs .on { color: var(--brand-text); }
  .app-tabs .on .ico { transform: translateY(-1px); }
  .app-tabs .on::before { content: ''; position: absolute; top: -7px; width: 26px; height: 3px; border-radius: 0 0 3px 3px; background: var(--accent); }
  .app-tabs .badge { top: 0; left: calc(50% + 6px); }
  body { padding-bottom: calc(66px + env(safe-area-inset-bottom)); }
  .cookie-banner { bottom: calc(74px + env(safe-area-inset-bottom)); }
}
.install-card {
  position: fixed; z-index: 55; left: 12px; right: 12px; bottom: 16px; max-width: 520px; margin: 0 auto;
  display: flex; align-items: center; gap: 12px; padding: 14px 44px 14px 14px;
  background: #fff; border: 1px solid var(--line-soft); border-radius: 20px; box-shadow: 0 16px 44px rgba(16,38,74,.25);
  animation: rise .35s ease-out;
}
.install-card[hidden] { display: none; }
.install-card img { border-radius: 12px; flex: none; }
.install-text { flex: 1; min-width: 0; }
.install-text b { display: block; font-size: .95rem; }
.install-text span { display: block; font-size: .8rem; color: var(--muted); line-height: 1.35; }
.install-how { margin: 6px 0 0; font-size: .82rem; }
.install-how .ico { color: var(--link); }
.install-card .btn.small { width: auto; flex: none; }
.install-close { position: absolute; top: 8px; right: 8px; width: 30px; height: 30px; border-radius: 50%; border: 0; background: var(--soft); color: var(--muted); display: grid; place-items: center; cursor: pointer; }
@media (max-width: 760px) { .install-card { bottom: calc(76px + env(safe-area-inset-bottom)); } }
@keyframes rise { from { transform: translateY(20px); opacity: 0; } to { transform: none; opacity: 1; } }
.offline-bar {
  position: fixed; z-index: 54; left: 50%; transform: translateX(-50%); top: 12px; max-width: calc(100% - 24px);
  background: var(--ink); color: #fff; font-size: .82rem; padding: 10px 16px; border-radius: 999px; box-shadow: 0 8px 24px rgba(0,0,0,.25);
  display: flex; gap: 8px; align-items: center;
}
.offline-bar[hidden] { display: none; }
/* Ouverte comme application (écran d'accueil) : on tient compte de l'encoche et on enlève le bandeau défilant */
html.standalone .header { padding-top: env(safe-area-inset-top); }
html.standalone body { -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; }
html.standalone input, html.standalone textarea, html.standalone .legal { -webkit-user-select: text; user-select: text; }
/* Transition douce entre les écrans, comme dans une application */
#app > * { animation: fade-in .25s ease-out; }
@keyframes fade-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { #app > *, .install-card { animation: none; } }

/* ---------- Paiement à la réception et code de livraison ---------- */
.st-confirmed { background: var(--violet-soft); color: var(--brand-text); }
.cod-hint { display: flex; gap: 8px; align-items: flex-start; background: var(--soft); border-radius: var(--radius-sm); padding: 12px 14px; color: var(--ink); }
.cod-hint .ico { color: var(--ok); flex: none; margin-top: 2px; }
.code-card { margin: 16px auto 4px; max-width: 420px; text-align: center; background: linear-gradient(135deg, #10264A, #1B3A6B); color: #fff; border-radius: 20px; padding: 18px 20px; box-shadow: 0 12px 30px rgba(16,38,74,.25); }
.code-card span { font-size: .85rem; opacity: .85; }
.code-card strong { display: block; font-size: 2.6rem; letter-spacing: .35em; margin: 4px 0 6px; padding-left: .35em; font-variant-numeric: tabular-nums; color: var(--mango); }
.code-card p { margin: 0; font-size: .85rem; line-height: 1.45; opacity: .92; }
.alert.warn { background: var(--mango-soft); color: var(--mango-dark); }

.opt-label { margin: 6px 0 4px; }
.opt-choices { display: flex; flex-wrap: wrap; gap: 8px; }
.opt { border: 1.5px solid var(--line); background: var(--paper); color: var(--ink); border-radius: 12px; padding: 8px 14px; font-weight: 600; cursor: pointer; min-width: 48px; }
.opt:hover { border-color: var(--brand); }
.opt.on { border-color: var(--brand); background: var(--violet-soft); color: var(--brand-text); box-shadow: 0 0 0 1px var(--brand); }

/* ---------- Pièce d'identité (compte obligatoire pour commander) ---------- */
.id-box { border: 1.5px dashed var(--line); border-radius: var(--radius-sm); padding: 6px 16px 14px; margin: 20px 0 0; background: var(--paper); }
.id-box legend { font-weight: 700; color: var(--brand-text); padding: 0 6px; display: inline-flex; align-items: center; gap: 6px; }
.id-box legend .ico { font-size: 1.3rem; }
.id-box .req { font-size: .7rem; font-weight: 700; color: var(--accent-dark); background: var(--coral-soft); padding: 2px 8px; border-radius: 999px; }
.id-pick { display: flex; gap: 8px; flex-wrap: wrap; }
.id-pick .btn { margin: 0; display: inline-flex; align-items: center; gap: 6px; }
.id-preview { margin-top: 10px; position: relative; }
.id-preview img { display: block; max-width: 100%; max-height: 220px; border-radius: 10px; border: 1px solid var(--line-soft); }
.id-preview .ok-tag { display: inline-flex; align-items: center; gap: 4px; margin-top: 6px; font-size: .82rem; font-weight: 700; color: var(--ok); }
.alert.ok { background: #E1F5EC; color: var(--ok); }
.alert.id-status { display: flex; gap: 10px; align-items: flex-start; }
.alert.id-status .ico { font-size: 1.4rem; flex: none; }
.methods.two { grid-template-columns: 1fr 1fr; }
@media (max-width: 520px) { .methods.two { grid-template-columns: 1fr; } }
p.lbl { font-weight: 600; font-size: .88rem; margin: 16px 0 0; }
.gate .big-check { color: var(--brand-2); }
.gate h1 { font-size: 1.5rem; }

/* Appareil photo dans la page (pièce d'identité) */
.cam-overlay { position: fixed; inset: 0; z-index: 110; background: rgba(8,14,28,.82); display: grid; place-items: center; padding: 16px; }
.cam-box { width: min(720px, 100%); max-height: calc(100dvh - 24px); overflow: auto; display: flex; flex-direction: column; background: var(--paper); border-radius: var(--radius); padding: 14px; box-shadow: 0 20px 60px rgba(0,0,0,.4); }
.cam-view { position: relative; flex: none; width: 100%; height: min(56dvh, 460px); background: #000; border-radius: 14px; overflow: hidden; }
.cam-view video { width: 100%; height: 100%; object-fit: cover; display: block; }
.cam-frame { position: absolute; inset: 12% 8%; border: 3px dashed rgba(255,255,255,.85); border-radius: 14px; box-shadow: 0 0 0 999px rgba(0,0,0,.25); pointer-events: none; }
.cam-msg { margin: 10px 2px; font-size: .9rem; color: var(--muted); }
.cam-actions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.cam-actions .btn { margin: 0; display: inline-flex; align-items: center; gap: 6px; }
@media (max-width: 520px) { .cam-overlay { padding: 10px; } .cam-view { height: min(52dvh, 420px); } .cam-actions .btn.cta { flex: 1 0 100%; order: -1; } }
.id-preview .pdf-tag { display: inline-flex; align-items: center; gap: 6px; padding: 10px 14px; border-radius: 10px; background: var(--soft); font-weight: 600; margin-right: 8px; }
.id-preview .pdf-tag .ico { font-size: 1.4rem; color: var(--err); }

/* ---------- Messagerie : bulle « Aide » ---------- */
.chat-fab {
  position: fixed; right: 18px; bottom: 18px; z-index: 46; display: inline-flex; align-items: center; gap: 8px; height: 52px; padding: 0 18px 0 14px;
  border: 0; border-radius: 999px; cursor: pointer; color: #fff; font: inherit; font-weight: 700;
  background: linear-gradient(135deg, var(--brand-2), var(--brand)); box-shadow: 0 10px 28px rgba(16,38,74,.35); transition: transform .2s;
}
.chat-fab:hover { transform: translateY(-2px); }
.chat-fab .ico { font-size: 1.6rem; color: var(--mango); }
.chat-fab.on { opacity: 0; pointer-events: none; }
.chat-badge { position: absolute; top: -4px; right: -2px; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px; background: var(--accent); color: #fff; font-size: .75rem; line-height: 22px; text-align: center; box-shadow: 0 0 0 2px #fff; }
.chat-panel {
  position: fixed; right: 18px; bottom: 18px; z-index: 47; width: min(380px, calc(100vw - 24px)); height: min(600px, calc(100dvh - 36px));
  display: flex; flex-direction: column; background: var(--paper); border-radius: 22px; overflow: hidden; box-shadow: 0 24px 60px rgba(14,20,36,.32);
  animation: chat-in .22s ease-out;
}
.chat-panel[hidden] { display: none; }
@keyframes chat-in { from { opacity: 0; transform: translateY(16px) scale(.98); } }
.chat-head { display: flex; align-items: center; gap: 10px; padding: 12px 14px; color: #fff; background: radial-gradient(120% 180% at 0% 0%, #1B3A6B, var(--brand) 60%); }
.chat-head img { background: #fff; border-radius: 12px; padding: 4px; }
.chat-head div { flex: 1; display: flex; flex-direction: column; line-height: 1.2; }
.chat-head small { color: #C8D3E8; font-size: .76rem; }
.chat-x { background: rgba(255,255,255,.12); border: 0; color: #fff; width: 34px; height: 34px; border-radius: 50%; cursor: pointer; display: grid; place-items: center; }
.chat-body { flex: 1; overflow-y: auto; padding: 14px 12px; background: var(--bg); display: flex; flex-direction: column; gap: 10px; }
.msg { display: flex; flex-direction: column; max-width: 86%; }
.msg .who { font-size: .7rem; color: var(--muted); margin: 0 6px 2px; font-weight: 600; }
.msg .bubble { padding: 9px 12px; border-radius: 16px; font-size: .9rem; line-height: 1.4; background: var(--paper); border: 1px solid var(--line-soft); border-bottom-left-radius: 4px; word-wrap: break-word; }
.msg .t { font-size: .65rem; color: var(--muted); margin: 2px 6px 0; }
.msg.customer { align-self: flex-end; align-items: flex-end; }
.msg.customer .bubble { background: var(--brand); color: #fff; border: 0; border-bottom-left-radius: 16px; border-bottom-right-radius: 4px; }
.msg.staff .bubble { background: var(--mango-soft); border-color: #FFE2A0; }
.msg-links { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.msg-links a { display: inline-flex; align-items: center; gap: 2px; font-size: .8rem; font-weight: 700; color: var(--link); background: var(--violet-soft); padding: 4px 10px; border-radius: 999px; }
.quick { display: flex; flex-wrap: wrap; gap: 6px; }
.quick button { border: 1.5px solid var(--brand-2); color: var(--brand-text); background: var(--paper); border-radius: 999px; padding: 6px 12px; font: inherit; font-size: .82rem; font-weight: 600; cursor: pointer; }
.quick button:hover { background: var(--violet-soft); }
.chat-contact { padding: 10px 12px; border-top: 1px solid var(--line-soft); display: grid; gap: 6px; background: var(--paper); }
.chat-contact[hidden] { display: none; }
.chat-contact p { margin: 0; font-size: .82rem; color: var(--muted); }
.chat-contact input { padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; font: inherit; }
.chat-input { display: flex; align-items: flex-end; gap: 8px; padding: 10px; border-top: 1px solid var(--line-soft); background: var(--paper); }
.chat-input textarea { flex: 1; resize: none; border: 1px solid var(--line); border-radius: 18px; padding: 9px 14px; font: inherit; font-size: .95rem; max-height: 110px; }
.chat-input textarea:focus { outline: none; border-color: var(--brand-2); }
.chat-input button { flex: none; width: 42px; height: 42px; border-radius: 50%; border: 0; background: var(--accent); color: #fff; display: grid; place-items: center; cursor: pointer; font-size: 1.2rem; }
@media (max-width: 760px) {
  .chat-fab { bottom: calc(78px + env(safe-area-inset-bottom)); right: 12px; height: 46px; padding: 0 14px 0 12px; }
  .chat-panel { right: 0; left: 0; bottom: 0; width: 100%; height: 100dvh; border-radius: 0; z-index: 60; }
  body.chat-open { overflow: hidden; }
}

/* En-tête : grandes catégories + menu déroulant de leurs rayons */
.sub-inner { position: relative; }
.catnav .uni { flex: none; display: inline-flex; align-items: center; gap: 4px; font: inherit; font-size: .86rem; font-weight: 600; color: #E3E9F3; background: none; border: 0; padding: 5px 12px; border-radius: 999px; cursor: pointer; white-space: nowrap; }
.catnav .uni .ico { font-size: .8rem; transition: transform .2s; }
.catnav .uni:hover, .catnav .uni[aria-expanded="true"] { background: rgba(255,255,255,.12); color: #fff; }
.catnav .uni[aria-expanded="true"] .ico { transform: rotate(180deg); }
.catnav .uni.active { background: #fff; color: var(--brand); font-weight: 700; }
.cat-drop { position: absolute; top: calc(100% + 6px); z-index: 30; width: 340px; max-width: calc(100vw - 16px); background: var(--paper); color: var(--ink); border-radius: 18px; padding: 12px; box-shadow: 0 18px 44px rgba(14,20,36,.28); animation: drop-in .16s ease-out; }
.cat-drop[hidden] { display: none; }
@keyframes drop-in { from { opacity: 0; transform: translateY(-6px); } }
.cat-drop .drop-all { display: flex; justify-content: space-between; align-items: center; font-weight: 700; color: var(--brand-text); padding: 8px 10px; border-radius: 12px; background: var(--violet-soft); margin-bottom: 8px; }
.cat-drop .drop-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
.cat-drop .drop-grid a { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 12px; font-size: .88rem; color: var(--ink); }
.cat-drop .drop-grid a:hover { background: var(--soft); }
.cat-drop .drop-grid .ico { font-size: 1.3rem; color: var(--brand-2); }

/* ---------- Cartes (points relais, suivi du livreur) ---------- */
.kmap { height: 320px; border-radius: 16px; overflow: hidden; border: 1px solid var(--line-soft); background: #E8EEF2; z-index: 0; }
.kmap-pin { background: none; border: 0; }
.kmap-pin span { position: relative; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); background: var(--brand); border: 3px solid #fff; box-shadow: 0 4px 10px rgba(0,0,0,.3); color: #fff; font-weight: 700; font-size: .8rem; }
.kmap-pin span::after { content: ''; position: absolute; width: 10px; height: 10px; border-radius: 50%; background: var(--mango); transform: rotate(45deg); }
.kmap-relay.on span, .kmap-relay.on span::after { background: var(--accent); }
.kmap-relay.on span::after { background: #fff; }
.kmap-home span { background: var(--ok); } .kmap-home span::after { background: #fff; }
.kmap-me span { border-radius: 50%; transform: none; width: 18px; height: 18px; background: #2F7BFF; } .kmap-me span::after { display: none; }
.kmap-courier span { border-radius: 50%; transform: none; background: var(--accent); width: 38px; height: 38px; animation: kpulse 1.6s infinite; } .kmap-courier span::after { display: none; }
@keyframes kpulse { 0% { box-shadow: 0 0 0 0 rgba(255,90,60,.55); } 70% { box-shadow: 0 0 0 16px rgba(255,90,60,0); } 100% { box-shadow: 0 0 0 0 rgba(255,90,60,0); } }
.leaflet-popup-content { font-family: var(--font); font-size: .88rem; margin: 10px 12px; }
.leaflet-popup-content .btn { margin-top: 8px; }
.relay-list { display: grid; gap: 8px; margin-top: 10px; max-height: 280px; overflow-y: auto; }
.relay-card { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border: 1.5px solid var(--line-soft); border-radius: 14px; background: var(--paper); cursor: pointer; text-align: left; font: inherit; color: inherit; width: 100%; }
.relay-card:hover { border-color: var(--brand-2); }
.relay-card.on { border-color: var(--accent); background: var(--coral-soft); }
.relay-card .ico { font-size: 1.4rem; color: var(--brand-2); flex: none; margin-top: 2px; }
.relay-card b { display: block; } .relay-card small { color: var(--muted); display: block; line-height: 1.35; }
.relay-card .dist { margin-left: auto; font-size: .78rem; font-weight: 700; color: var(--brand-text); white-space: nowrap; }
.relay-tools { display: flex; gap: 8px; flex-wrap: wrap; margin: 8px 0 0; }
.relay-tools .btn { margin: 0; display: inline-flex; align-items: center; justify-content: center; gap: 6px; width: auto; }

/* Suivi en direct du livreur */
.live-box { margin: 14px 0; padding: 14px; border-radius: 18px; background: linear-gradient(160deg, #EAF0F9, #FFF6EC); border: 1px solid var(--line-soft); }
.live-head { display: flex; align-items: center; gap: 8px; font-size: 1.05rem; }
.live-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--accent); animation: kpulse 1.6s infinite; }
.live-eta { margin: 6px 0 10px; font-size: .95rem; color: var(--ink); }
.live-bar { position: relative; height: 8px; border-radius: 999px; background: #DCE4F0; margin: 0 14px 14px 0; }
.live-bar span { position: absolute; inset: 0 auto 0 0; border-radius: 999px; background: linear-gradient(90deg, var(--brand-2), var(--accent)); transition: width 1s ease; }
.live-bar .ico { position: absolute; right: -14px; top: 50%; transform: translateY(-50%); font-size: 1.3rem; color: var(--accent); }
.relay-change { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.relay-change #relayChangeBox { flex-basis: 100%; }
.relay-change > .btn { margin: 0; width: auto; display: inline-flex; align-items: center; gap: 6px; }
.panel.pay-here { background: #F0F7F4; margin: 12px 0 0; }

/* Notifications de suivi */
.push-card { display: flex; align-items: center; gap: 10px; margin: 12px 0; padding: 12px 14px; border-radius: 16px; background: var(--violet-soft); color: var(--ink); font-size: .9rem; }
.push-card > .ico { font-size: 1.5rem; color: var(--brand-2); flex: none; }
.push-card span { flex: 1; line-height: 1.4; } .push-card strong { display: block; }
.push-card .btn { margin: 0; flex: none; width: auto; white-space: nowrap; padding-inline: 20px; }
@media (max-width: 520px) { .push-card { flex-wrap: wrap; } .push-card span { flex: 1 1 calc(100% - 40px); } .push-card .btn { flex: 1 0 100%; } }
.push-card.on { background: #E1F5EC; color: var(--ok); }


/* ======================================================================
   THÈME SOMBRE de la boutique (choix « Sombre », ou « Automatique » si le téléphone est en mode sombre).
   Les couleurs de base sont remplacées ; quelques éléments à fond blanc fixe sont adaptés un par un.
   ====================================================================== */
html[data-theme="dark"] {
  color-scheme: dark;
  --ink: #E8EDF5; --muted: #9FABC0; --bg: #0B111C; --paper: #141C2A; --soft: #1C2638;
  --line: #2E3A50; --line-soft: #222D40; --brand-text: #9DBBFF; --link: #8FB0FF; --brand-2: #3E7BE0;
  --violet-soft: #1A2A48; --mango-soft: #3A2E12; --coral-soft: #3D211B; --price: #F1F5FF; --mango-dark: #FFC94D; --accent-dark: #FF8A70;
  --shadow: 0 2px 10px rgba(0,0,0,.35); --shadow-hover: 0 16px 34px rgba(0,0,0,.5);
}
html[data-theme="dark"] { background: var(--bg); } /* fond sur <html> seulement : les formes géométriques restent visibles */
html[data-theme="dark"] body { color: var(--ink); }
html[data-theme="dark"] .search, html[data-theme="dark"] .search input { background: var(--paper); color: var(--ink); }
html[data-theme="dark"] .search-cat { background: var(--soft); color: var(--brand-text); }
html[data-theme="dark"] .catnav a.active, html[data-theme="dark"] .catnav .uni.active { background: #fff; color: #10264A; }
html[data-theme="dark"] .theme-light { background: linear-gradient(135deg, #17284A 0%, #3A1E22 100%); }
html[data-theme="dark"] .theme-mango .pill, html[data-theme="dark"] .theme-light .pill { background: rgba(255,255,255,.12); color: #fff; }
html[data-theme="dark"] .slider-arrow, html[data-theme="dark"] .rail-arrow, html[data-theme="dark"] .pay-chips span { background: var(--paper); color: var(--ink); }
html[data-theme="dark"] .see-all:hover { background: var(--soft); }
html[data-theme="dark"] .pc-mango { background: #5A4310; color: #FFE3A3; }
html[data-theme="dark"] .alert.err, html[data-theme="dark"] .st-cancelled { background: #3D1C1C; color: #FF9C8C; }
html[data-theme="dark"] .alert.warn { background: #3A2E12; color: #FFD27A; }
html[data-theme="dark"] .alert.ok, html[data-theme="dark"] .push-card.on { background: #123426; color: #6BE0A8; }
html[data-theme="dark"] .panel.pay-here { background: #12291F; }
html[data-theme="dark"] .st-paid { background: #3A2A12; color: #FFC77A; }
html[data-theme="dark"] .app-tabs { background: rgba(20,28,42,.97); border-top-color: var(--line-soft); }
html[data-theme="dark"] .install-card, html[data-theme="dark"] .quote-msg, html[data-theme="dark"] .cookie-banner { background: var(--paper); color: var(--ink); }
html[data-theme="dark"] .msg.staff .bubble { background: #3A2E12; border-color: #5A4310; }
html[data-theme="dark"] .live-box { background: linear-gradient(160deg, #16233D, #2E1F1A); }
html[data-theme="dark"] .live-bar { background: #2E3A50; }
html[data-theme="dark"] .kmap { border-color: var(--line); }
html[data-theme="dark"] .kmap .leaflet-tile-pane { filter: brightness(.78) contrast(1.1) saturate(.85); }
html[data-theme="dark"] .leaflet-popup-content-wrapper, html[data-theme="dark"] .leaflet-popup-tip { background: var(--paper); color: var(--ink); }
html[data-theme="dark"] input, html[data-theme="dark"] select, html[data-theme="dark"] textarea { background: var(--soft); color: var(--ink); border-color: var(--line); }
html[data-theme="dark"] .demo-strip { background: #000; }
html[data-theme="dark"] .splash { background: radial-gradient(60% 50% at 50% 45%, #1B3366 0%, #0F1A30 55%, #0B111C 100%); }

/* Sélecteur d'apparence (menu Rayons, pied de page, compte) */
.theme-switch { display: inline-flex; padding: 3px; border-radius: 999px; background: var(--soft); border: 1px solid var(--line-soft); gap: 2px; }
.theme-switch button { display: inline-flex; align-items: center; gap: 5px; border: 0; background: none; color: var(--muted); font: inherit; font-size: .8rem; font-weight: 600; padding: 6px 11px; border-radius: 999px; cursor: pointer; }
.theme-switch button.on { background: var(--paper); color: var(--ink); box-shadow: 0 1px 4px rgba(0,0,0,.15); }
.footer-theme { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; font-size: .85rem; }
.footer .theme-switch { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.12); }
.footer .theme-switch button { color: #C8D3E8; } .footer .theme-switch button.on { background: #fff; color: #10264A; }
html[data-theme="dark"] .flash { background: linear-gradient(135deg, #2E1C1A 0%, #2C2516 100%); }
html[data-theme="dark"] .theme-mango { background: linear-gradient(135deg, #4A3810 0%, #6B4F12 100%); color: #FFF3D6; }
html[data-theme="dark"] .search-cat:hover { background: var(--violet-soft); }
html[data-theme="dark"] .r-green .ic, html[data-theme="dark"] .fr-steps div:nth-child(4) .ico, html[data-theme="dark"] .st-delivered { background: #123426; color: #6BE0A8; }
html[data-theme="dark"] .st-shipped { background: #182A47; color: #8CC0FF; }
html[data-theme="dark"] .kmap { background: #1A1E24; }

/* ---------- Réglages personnels du client (appliqués seulement chez lui) ---------- */
html[data-text="large"] { font-size: 16px; }
html[data-text="xlarge"] { font-size: 17.5px; }
html[data-motion="reduce"] *, html[data-motion="reduce"] *::before, html[data-motion="reduce"] *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
html[data-motion="reduce"] .bg-shapes, html[data-saver="on"] .bg-shapes { display: none; }
@media (max-width: 700px) {
  html[data-density="compact"] .grid { grid-template-columns: repeat(3, 1fr); gap: 8px; }
  html[data-density="compact"] .card .thumb { margin: 6px 6px 0; }
  html[data-density="compact"] .card-body { padding: 8px; }
  html[data-density="compact"] .card-body h3 { font-size: .8rem; }
  html[data-density="compact"] .card .price { font-size: .88rem; }
  html[data-density="compact"] .card .btn { font-size: .78rem; padding: 6px 8px; }
  html[data-density="compact"] .card .card-tag, html[data-density="compact"] .card .stock-low { display: none; }
}
@media (min-width: 1000px) { html[data-density="compact"] .grid { grid-template-columns: repeat(5, 1fr); } }
.kmap-lazy { display: grid; place-items: center; text-align: center; color: var(--muted); padding: 16px; }

/* ---------- Espace client ---------- */
.acc { max-width: 980px; margin: 0 auto; }
.acc-head { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 18px 20px; border-radius: 22px; color: #fff; background: radial-gradient(120% 180% at 0% 0%, #1B3A6B, #10264A 60%); margin-bottom: 12px; }
.acc-head h1 { margin: 0; color: #fff; font-size: 1.5rem; } .acc-head .hint { color: #C8D3E8; }
.acc-head > div:not(.acc-avatar) { flex: 1; min-width: 180px; }
.acc-avatar { flex: none; }
.acc-avatar { width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: 1.4rem; background: linear-gradient(135deg, var(--mango), var(--accent)); color: #10264A; }
.acc-id { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; font-size: .8rem; font-weight: 700; background: rgba(255,255,255,.12); }
.acc-id.ok { color: #7EF0B8; } .acc-id.warn { color: #FFD27A; }
/* Livraison planifiée (page de suivi) */
.plan-box { display: flex; align-items: center; gap: 12px; margin: 12px 0; padding: 12px 14px; border-radius: 18px; background: var(--violet-soft); color: var(--ink); }
.plan-box > .ico { font-size: 1.5rem; color: var(--brand-2); flex: none; }
.plan-box b { display: block; } .plan-box small { color: var(--muted); }
/* Colis sur la page de suivi */
.parcels-box { margin: 12px 0; padding: 12px 14px; border-radius: 18px; background: var(--violet-soft); display: grid; gap: 8px; }
.parcels-box.wait { background: var(--mango-soft); border: 2px solid var(--mango); }
.pcl-row { display: flex; gap: 12px; align-items: center; }
.pcl-row b { display: block; } .pcl-row small { color: var(--muted); }
.pcl-ico { width: 38px; height: 38px; flex: none; border-radius: 12px; display: grid; place-items: center; font-size: 1.25rem; background: var(--paper); color: var(--brand-2); }
.parcels-box .hint { margin: 2px 0 0; display: flex; gap: 6px; align-items: center; color: var(--ink); }
/* Factures et reçus (suivi de commande, Mon compte) */
.docs-box { margin: 14px 0; padding: 14px; border-radius: 18px; background: var(--paper); border: 1px solid var(--line-soft); }
.docs-box h3 { margin: 0 0 8px; font-size: 1rem; display: flex; align-items: center; gap: 8px; }
.panel > .docs-box { margin: 0; padding: 0; border: 0; background: none; }
.doc-row { display: flex; align-items: center; gap: 12px; padding: 10px 8px; border-radius: 12px; text-decoration: none; color: var(--ink); }
.doc-row + .doc-row { border-top: 1px solid var(--line-soft); }
.doc-row:hover { background: var(--soft); }
.doc-ico { width: 38px; height: 38px; flex: none; border-radius: 12px; display: grid; place-items: center; font-size: 1.2rem; background: var(--violet-soft); color: var(--brand-2); }
.doc-ico.receipt { background: #E1F5EC; color: var(--ok); } .doc-ico.credit { background: var(--coral-soft); color: var(--accent-dark); }
.doc-txt { flex: 1; min-width: 0; } .doc-txt b { display: block; font-variant-numeric: tabular-nums; } .doc-txt small { color: var(--muted); }
.doc-open { flex: none; display: inline-flex; align-items: center; gap: 4px; font-size: .85rem; font-weight: 600; color: var(--link); }
.doc-hint { display: flex; align-items: center; gap: 6px; color: var(--brand-text); }
@media (max-width: 420px) { .doc-open { font-size: 0; gap: 0; } .doc-open .ico { font-size: 1.1rem; } }
/* Badge « identité vérifiée » : sceau Zado à côté du nom */
.vbadge { width: 1.05em; height: 1.05em; flex: none; display: inline-block; vertical-align: -.14em; margin-left: .3em; --vb: #2D66D6; --vb-check: #fff; }
.vbadge .vb-seal { fill: var(--vb); stroke: var(--vb); stroke-width: 1.2; stroke-linejoin: round; }
.vbadge .vb-check { fill: none; stroke: var(--vb-check); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.acc-head .vbadge, .site-header .vbadge, .menu-hello .vbadge, #accountHello .vbadge, #menuHello .vbadge { --vb: #8FB0FF; --vb-check: #0B1A33; }
.acc-head h1 .vbadge { width: .9em; height: .9em; }
/* Nouveau code Zado : carte animée */
.code-reveal { position: relative; overflow: hidden; margin: 12px 0 4px; padding: 18px; border-radius: 20px; color: #fff; background: radial-gradient(140% 160% at 0% 0%, #2D66D6, #10264A 55%, #0B1A33); box-shadow: 0 18px 40px rgba(16,38,74,.25); animation: cr-in .45s cubic-bezier(.2,.8,.2,1) both; }
#codeForm[hidden] { display: none; }
.cr-head { display: flex; align-items: center; gap: 12px; }
.cr-head b { display: block; font-size: 1.1rem; } .cr-head small { color: #C8D3E8; }
.cr-ico { width: 44px; height: 44px; flex: none; border-radius: 14px; display: grid; place-items: center; font-size: 1.3rem; color: #10264A; background: linear-gradient(135deg, var(--mango), var(--accent)); animation: cr-turn .9s .2s ease both; }
.cr-digits { display: flex; justify-content: center; gap: 6px; margin: 18px 0 14px; }
.cr-digits i { width: 10px; }
.cr-digits span { width: 44px; height: 56px; display: grid; place-items: center; border-radius: 12px; font-size: 1.75rem; font-weight: 700; font-variant-numeric: tabular-nums; color: #10264A; background: #fff; box-shadow: 0 4px 0 #FFB300, 0 10px 18px rgba(0,0,0,.18); animation: cr-tile .5s calc(.25s + var(--i) * 90ms) cubic-bezier(.2,.9,.3,1.3) both; }
.cr-actions { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.cr-actions .btn { width: auto; margin: 0; display: inline-flex; align-items: center; gap: 6px; padding-inline: 18px; }
.code-reveal .cr-actions .btn.ghost { color: #fff; border-color: rgba(255,255,255,.45); background: transparent; }
.code-reveal .cr-actions .btn.cta { background: var(--mango); color: #10264A; }
.cr-tips { list-style: none; margin: 16px 0 0; padding: 12px 0 0; border-top: 1px solid rgba(255,255,255,.15); display: grid; gap: 8px; font-size: .84rem; color: #DCE6F5; }
.cr-tips li { display: flex; gap: 8px; align-items: flex-start; line-height: 1.4; } .cr-tips .ico { flex: none; margin-top: 2px; color: var(--mango); }
.cr-spark { position: absolute; color: var(--mango); opacity: .9; animation: cr-spark 2.4s ease-in-out infinite; }
.cr-spark.s1 { top: 12px; right: 18px; font-size: 1.1rem; } .cr-spark.s2 { top: 46px; right: 52px; font-size: .7rem; animation-delay: .8s; color: #FF8A70; }
.panel > .cr-digits span, .panel .cr-digits span { background: var(--mango-soft); box-shadow: 0 4px 0 var(--mango); }
.code-reveal .cr-digits span { background: #fff; box-shadow: 0 4px 0 #FFB300, 0 10px 18px rgba(0,0,0,.18); }
@keyframes cr-in { from { opacity: 0; transform: translateY(10px) scale(.98); } }
@keyframes cr-tile { from { opacity: 0; transform: translateY(14px) rotateX(70deg); } }
@keyframes cr-turn { from { transform: rotate(-90deg) scale(.6); opacity: 0; } }
@keyframes cr-spark { 0%, 100% { transform: scale(.7) rotate(0); opacity: .5; } 50% { transform: scale(1.15) rotate(20deg); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .code-reveal, .cr-ico, .cr-digits span, .cr-spark { animation: none; } }
@media (max-width: 380px) { .cr-digits { gap: 4px; } .cr-digits span { width: 38px; height: 50px; font-size: 1.5rem; } .cr-digits i { width: 6px; } }
.acc-tabs { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; margin: 0 0 14px; padding: 4px; border-radius: 999px; background: var(--paper); border: 1px solid var(--line-soft); }
.acc-tabs a { flex: 1; display: inline-flex; justify-content: center; align-items: center; gap: 6px; padding: 9px 14px; border-radius: 999px; font-weight: 600; font-size: .9rem; color: var(--muted); white-space: nowrap; }
.acc-tabs a.on { background: var(--brand); color: #fff; }
.acc-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 14px; }
.acc-stats a { display: flex; flex-direction: column; gap: 2px; padding: 14px; border-radius: 18px; background: var(--paper); border: 1px solid var(--line-soft); color: var(--ink); }
.acc-stats a > span .ico { font-size: 1.4rem; color: var(--brand-2); } .acc-stats b { font-size: 1.25rem; } .acc-stats small { color: var(--muted); }
.acc-ongoing { display: grid; grid-template-columns: minmax(0, 1fr) 120px auto; gap: 12px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--line-soft); color: var(--ink); }
.acc-ongoing span:first-child { display: flex; flex-direction: column; min-width: 0; } .acc-ongoing small { color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.acc-prog { height: 6px; border-radius: 999px; background: var(--soft); overflow: hidden; } .acc-prog i { display: block; height: 100%; background: linear-gradient(90deg, var(--brand-2), var(--accent)); }
.acc-actions { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 14px; }
.acc-actions a, .acc-actions button { display: flex; align-items: center; gap: 10px; padding: 14px; border-radius: 18px; background: var(--paper); border: 1px solid var(--line-soft); color: var(--ink); font: inherit; font-weight: 600; text-align: left; cursor: pointer; }
.acc-actions a:hover, .acc-actions button:hover { border-color: var(--brand-2); }
.acc-actions .ico { font-size: 1.5rem; color: var(--accent); flex: none; } .acc-actions small { color: var(--muted); font-weight: 400; }
.alert.id-status.slim { margin: 0 0 14px; }
.prefs h2 { display: flex; align-items: center; gap: 8px; }
.pref-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 12px 0; border-top: 1px solid var(--line-soft); margin: 0; font-weight: 400; }
.pref-row > span:first-child { display: flex; flex-direction: column; min-width: 0; } .pref-row small { color: var(--muted); font-size: .8rem; }
.pref-row select { max-width: 220px; }
.seg { display: inline-flex; padding: 3px; border-radius: 999px; background: var(--soft); border: 1px solid var(--line-soft); gap: 2px; flex-wrap: wrap; }
.seg button { border: 0; background: none; color: var(--muted); font: inherit; font-size: .84rem; font-weight: 600; padding: 6px 12px; border-radius: 999px; cursor: pointer; }
.seg button.on { background: var(--paper); color: var(--ink); box-shadow: 0 1px 4px rgba(0,0,0,.15); }
.chips { display: flex; gap: 6px; flex-wrap: wrap; } .chip-check { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--line); font-size: .85rem; margin: 0; font-weight: 600; cursor: pointer; }
.code-change { display: flex; gap: 6px; } .code-change input { width: 130px; }
@media (max-width: 700px) {
  .acc-stats { grid-template-columns: 1fr 1fr; } .acc-stats a:last-child { grid-column: 1 / -1; }
  .acc-tabs a { padding: 8px 10px; font-size: .82rem; gap: 4px; }
  .acc-head { padding: 14px; } .acc-head h1 { font-size: 1.25rem; }
  .acc-actions { grid-template-columns: 1fr 1fr; }
  .acc-ongoing { grid-template-columns: minmax(0, 1fr) auto; } .acc-prog { grid-column: 1 / -1; grid-row: 2; }
  .pref-row { flex-direction: column; align-items: flex-start; }
}

/* Thème sombre : tout le décor s'adapte (pas seulement le fond) — formes plus lumineuses, en-tête et pied plus profonds,
   boutons violets plus visibles, photos légèrement adoucies pour ne pas éblouir. */
html[data-theme="dark"] { --brand: #1E56C2; --brand-2: #3E7BE0; }
html[data-theme="dark"] .r1 { border-color: rgba(143,176,255,.16); }
html[data-theme="dark"] .r2 { border-color: rgba(255,107,79,.2); }
html[data-theme="dark"] .b1 { background: radial-gradient(circle, rgba(255,179,0,.13), rgba(255,179,0,0) 68%); }
html[data-theme="dark"] .b2 { background: radial-gradient(circle, rgba(62,123,224,.24), rgba(62,123,224,0) 68%); }
html[data-theme="dark"] .spark { opacity: .55; filter: drop-shadow(0 0 10px rgba(255,179,0,.45)); }
html[data-theme="dark"] .k2 { opacity: .5; filter: drop-shadow(0 0 10px rgba(255,90,60,.45)); }
html[data-theme="dark"] .square { border-color: rgba(255,107,79,.3); }
html[data-theme="dark"] .dots { background-image: radial-gradient(rgba(157,187,255,.22) 2px, transparent 2.5px); }
html[data-theme="dark"] .tri { background: rgba(143,176,255,.1); }
html[data-theme="dark"] .hdr-top { background: radial-gradient(120% 180% at 0% 0%, #14305C 0%, #0D1D3B 45%, #08122A 100%); }
html[data-theme="dark"] .hdr-sub { background-color: #0A1630; border-top-color: rgba(255,255,255,.06); }
html[data-theme="dark"] .footer { background: #070B12; color: #9FABC0; border-top: 1px solid var(--line-soft); }
html[data-theme="dark"] .thumb.has-img { background: #1A2333; }
html[data-theme="dark"] .thumb.has-img img, html[data-theme="dark"] .slide-visual img, html[data-theme="dark"] .tr-card > img { filter: brightness(.9) contrast(1.05); }
html[data-theme="dark"] .card { border-color: var(--line-soft); }
html[data-theme="dark"] .card:hover { border-color: #3D4B66; }
html[data-theme="dark"] .panel { background: var(--paper); border-color: var(--line-soft); }
html[data-theme="dark"] .acc-tabs a.on { background: var(--brand); }
html[data-theme="dark"] .chat-fab { background: linear-gradient(135deg, #2D66D6, #1B3A6B); }
html[data-theme="dark"] .see-all { border-color: var(--line); color: var(--ink); }
html[data-theme="dark"] .acc-head { background: radial-gradient(120% 180% at 0% 0%, #1B3A6B, #0F2347 60%); }
html[data-theme="dark"] .doc-ico.receipt { background: #123426; color: #6BE0A8; } html[data-theme="dark"] .doc-ico.credit { background: #3A1B16; color: #FF9A85; }
html[data-theme="dark"] .vbadge { --vb: #8FB0FF; --vb-check: #0B1A33; }
html[data-theme="dark"] .code-reveal { box-shadow: 0 18px 40px rgba(0,0,0,.45); }

/* Message bref (ajout au panier, annulation…) et erreurs sous les champs — audit 17/10/2026 */
.shop-toast { position: fixed; left: 50%; bottom: calc(18px + env(safe-area-inset-bottom)); transform: translate(-50%, 140%); z-index: 90; display: flex; align-items: center; gap: 12px; max-width: calc(100% - 24px); padding: 12px 14px 12px 18px; border-radius: 14px; background: #0E1424; color: #fff; box-shadow: 0 12px 30px rgba(0,0,0,.3); font-weight: 600; transition: transform .25s ease, opacity .25s; opacity: 0; pointer-events: none; }
.shop-toast.show { transform: translate(-50%, 0); opacity: 1; pointer-events: auto; }
.shop-toast button { border: 0; border-radius: 999px; padding: 8px 14px; background: var(--mango); color: #0E1424; font: inherit; font-weight: 700; cursor: pointer; white-space: nowrap; }
@media (max-width: 900px) { .shop-toast { bottom: calc(78px + env(safe-area-inset-bottom)); } }
.field-err { display: flex; align-items: flex-start; gap: 6px; margin: 6px 0 0; color: var(--err); font-size: .88rem; font-weight: 600; }
.field-err .ico { flex: none; margin-top: 2px; }
.has-err { border-color: var(--err) !important; box-shadow: 0 0 0 3px rgba(198,46,31,.12) !important; }
.cancel-box { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 14px 0 0; }
.cancel-box .btn { width: auto; margin: 0; display: inline-flex; align-items: center; gap: 6px; }
html[data-theme="dark"] .shop-toast { background: #E8EDF5; color: #0E1424; }

/* Bulle « Aide » : jamais par-dessus le total ou les boutons d'achat (audit 17/10/2026) */
body.drawer-open .chat-fab { opacity: 0; pointer-events: none; }
body[data-route="commande"] .chat-fab span, body[data-route="p"] .chat-fab span, body[data-route="compte"] .chat-fab span { display: none; }
body[data-route="commande"] .chat-fab, body[data-route="p"] .chat-fab, body[data-route="compte"] .chat-fab { width: 48px; height: 48px; padding: 0; justify-content: center; }
@media (max-width: 900px) {
  body[data-route="p"] .chat-fab { bottom: calc(148px + env(safe-area-inset-bottom)); } /* au-dessus de la barre d'achat */
  body[data-route="commande"] .chat-fab { opacity: .92; }
  #app { padding-bottom: 72px; }
}

/* ---------- Audit 17/10/2026 — priorité 2 : liste, fiche produit, panier ---------- */
.swatches { display: flex; align-items: center; gap: 4px; margin: 2px 0 4px; }
.swatches i { width: 14px; height: 14px; border-radius: 50%; border: 1px solid rgba(0,0,0,.15); box-shadow: inset 0 0 0 1px rgba(255,255,255,.4); }
.swatches small { margin-left: 4px; color: var(--muted); font-size: .78rem; }
.filters { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin: -6px 0 18px; }
.filters select { width: auto; padding: 8px 32px 8px 12px; border-radius: 999px; font-size: .88rem; min-height: 40px; margin: 0; }
.fchip { display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; border: 1.5px solid var(--line); border-radius: 999px; font-size: .88rem; cursor: pointer; background: var(--paper); min-height: 40px; }
.fchip input { width: 16px; height: 16px; accent-color: var(--brand-2); margin: 0; }
.linkish { background: none; border: 0; padding: 4px; color: var(--link); text-decoration: underline; font: inherit; cursor: pointer; }
.search-note { display: flex; align-items: center; gap: 8px; margin: -6px 0 14px; padding: 10px 14px; border-radius: 14px; background: var(--violet-soft); color: var(--ink); }
.empty-search { padding: 8px 0; } .empty-search .chips { flex-wrap: wrap; overflow: visible; }
.acct-hint { display: flex; gap: 10px; align-items: flex-start; margin: 12px 0 0; padding: 12px 14px; border-radius: 14px; background: var(--mango-soft); color: var(--ink); font-size: .9rem; line-height: 1.45; text-align: left; }
.acct-hint > .ico { flex: none; font-size: 1.3rem; color: var(--mango-dark); margin-top: 1px; }
.acct-hint b { display: block; } .acct-hint a { color: var(--link); font-weight: 600; }
.acct-hint.cart { margin: 0 0 10px; font-size: .84rem; }
.line.cart-line { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; gap: 12px; align-items: center; }
.line-img { width: 56px; height: 56px; border-radius: 12px; background: var(--soft); display: grid; place-items: center; overflow: hidden; color: var(--brand-2); font-size: 1.6rem; }
.line-img img { width: 100%; height: 100%; object-fit: contain; background: #fff; }
.qty button { width: 38px !important; height: 38px !important; font-size: 1.1rem; }
.color-pick { margin: 6px 0 12px; } .color-pick .lbl { display: block; font-size: .9rem; color: var(--muted); margin-bottom: 6px; } .color-pick .lbl b { color: var(--ink); }
.color-pick div { display: flex; gap: 8px; flex-wrap: wrap; }
.color-pick a { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; border: 2px solid transparent; }
.color-pick a.on { border-color: var(--brand-2); }
.color-pick i { width: 28px; height: 28px; border-radius: 50%; border: 1px solid rgba(0,0,0,.15); }
.buybar { display: none; }
@media (max-width: 900px) {
  /* Barre d'achat fixe au-dessus de la barre d'onglets : prix + « Ajouter au panier » toujours à portée de pouce */
  .buybar { display: flex; position: fixed; left: 0; right: 0; bottom: calc(64px + env(safe-area-inset-bottom)); z-index: 44; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 14px; background: var(--paper); border-top: 1px solid var(--line); box-shadow: 0 -8px 24px rgba(14,20,36,.08); }
  .buybar span { min-width: 0; display: flex; flex-direction: column; } .buybar small { color: var(--muted); font-size: .76rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 46vw; }
  .buybar b { font-size: 1.1rem; } .buybar .btn { width: auto; margin: 0; padding: 11px 16px; white-space: nowrap; }
  body[data-route="p"] #app { padding-bottom: 150px; }
  .filters { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
  .filters > * { flex: none; }
}
/* Suggestions de recherche */
.search { position: relative; }
.suggest { position: absolute; top: calc(100% + 8px); left: 0; right: 0; z-index: 60; max-height: min(70vh, 460px); overflow-y: auto; padding: 6px; background: var(--paper); color: var(--ink); border: 1px solid var(--line); border-radius: 18px; box-shadow: 0 18px 40px rgba(14,20,36,.18); }
.suggest a { display: flex; align-items: center; gap: 10px; padding: 8px 10px; min-height: 48px; border-radius: 12px; color: var(--ink); text-decoration: none; font-size: .92rem; }
.suggest a > span:not(.sug-img) { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.suggest a small { flex: none; color: var(--muted); font-size: .8rem; }
.suggest a:hover, .suggest a.on { background: var(--soft); }
.suggest a > .ico { font-size: 1.3rem; color: var(--brand-2); flex: none; width: 36px; }
.suggest .sug-img { width: 36px; height: 36px; flex: none; border-radius: 8px; background: var(--soft); display: grid; place-items: center; overflow: hidden; color: var(--brand-2); font-size: 1.2rem; }
.suggest .sug-img img { width: 100%; height: 100%; object-fit: contain; background: #fff; }
.suggest .sug-all { border-top: 1px solid var(--line-soft); border-radius: 0 0 12px 12px; color: var(--link); font-weight: 600; margin-top: 4px; }
.suggest .sug-dym { margin: 4px 10px 6px; font-size: .8rem; color: var(--muted); }
@media (max-width: 860px) {
  .header.compact .deliver, .header.compact .hdr-sub { display: none; }
  .header.compact .header-inner { padding-bottom: 8px; }
  /* Zones de toucher d'au moins 44 px dans l'en-tête */
  .header .hdr-btn, .header .menu-btn, .header .cart-btn { min-height: 44px; min-width: 44px; }
}
/* Rangées qui défilent : fondu à droite tant qu'il reste des éléments à voir */
.scroll-more { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 40px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 40px), transparent); }
@media (max-width: 900px) { .buybar { transition: transform .25s ease, opacity .25s; } .buybar.off { transform: translateY(110%); opacity: 0; pointer-events: none; visibility: hidden; } }
.ok-txt { color: var(--ok); font-weight: 600; }
#zoneBox select { margin-bottom: 0; }

/* ---------- Avis clients (priorité 3) ---------- */
.stars { display: inline-flex; gap: 1px; vertical-align: middle; }
.stars i { width: 13px; height: 13px; background: var(--line); clip-path: polygon(50% 0, 61.8% 35.4%, 100% 35.4%, 69.1% 57.3%, 80.9% 92.7%, 50% 70.8%, 19.1% 92.7%, 30.9% 57.3%, 0 35.4%, 38.2% 35.4%); }
.stars i.on { background: var(--mango); }
.stars i.half { background: linear-gradient(90deg, var(--mango) 50%, var(--line) 50%); }
.stars.lg i { width: 20px; height: 20px; }
.rating { display: inline-flex; align-items: center; gap: 6px; margin: 2px 0 4px; }
.rating small { color: var(--muted); font-size: .8rem; }
.pdp-meta { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin: -4px 0 10px; }
.rating-link { text-decoration: none; color: inherit; }
.share-btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; min-height: 40px; border: 1.5px solid var(--line); border-radius: 999px; background: var(--paper); color: var(--ink); font: inherit; font-size: .88rem; cursor: pointer; }
.share-btn:hover { border-color: var(--brand-2); }
.reviews { margin: 34px 0 10px; }
.reviews h2 { margin-bottom: 14px; }
.rv-sum { display: flex; gap: 28px; align-items: center; flex-wrap: wrap; padding: 18px; background: var(--paper); border: 1px solid var(--line-soft); border-radius: var(--radius); margin-bottom: 16px; }
.rv-avg { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.rv-avg b { font-size: 2.4rem; line-height: 1; font-weight: 600; }
.rv-avg small { color: var(--muted); }
.rv-dist { flex: 1; min-width: 220px; display: grid; gap: 4px; }
.rv-dist > div { display: grid; grid-template-columns: 38px 1fr 28px; align-items: center; gap: 8px; font-size: .85rem; }
.rv-dist span { display: inline-flex; align-items: center; gap: 3px; color: var(--muted); } .rv-dist span .ico { color: var(--mango); font-size: .8rem; }
.rv-dist i { height: 8px; border-radius: 99px; background: var(--soft); overflow: hidden; } .rv-dist i b { display: block; height: 100%; background: var(--mango); border-radius: 99px; }
.rv-dist small { color: var(--muted); text-align: right; }
.rv { padding: 14px 0; border-bottom: 1px solid var(--line-soft); }
.rv-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.rv-head small { color: var(--muted); margin-left: auto; }
.rv p { margin: 8px 0 0; line-height: 1.55; }
.verified { display: inline-flex; align-items: center; gap: 4px; color: var(--ok); font-size: .8rem; font-weight: 600; }
.review-form { margin-bottom: 18px; max-width: 620px; }
.review-form h3 { margin: 0 0 8px; }
.star-pick { display: inline-flex; flex-direction: row-reverse; gap: 4px; margin: 2px 0 12px; }
.star-pick label { cursor: pointer; padding: 4px; margin: 0; }
.star-pick input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.star-pick i { display: block; width: 32px; height: 32px; background: var(--line); clip-path: polygon(50% 0, 61.8% 35.4%, 100% 35.4%, 69.1% 57.3%, 80.9% 92.7%, 50% 70.8%, 19.1% 92.7%, 30.9% 57.3%, 0 35.4%, 38.2% 35.4%); transition: background .15s; }
.star-pick input:checked ~ i, .star-pick label:has(input:checked) ~ label i, .star-pick label:hover i, .star-pick label:hover ~ label i { background: var(--mango); }
.star-pick input:focus-visible + i { outline: 2px solid var(--brand-2); outline-offset: 2px; }
.rv-link { display: inline-flex; align-items: center; gap: 4px; font-size: .85rem; color: var(--link); margin-top: 4px; } .rv-link .ico { color: var(--mango); }

/* ---------- Suivi en direct de la course, façon Grab (18/10/2026) ---------- */
.live-box { margin: 14px 0; padding: 0; overflow: hidden; border-radius: 20px; background: var(--paper); border: 1px solid var(--line-soft); box-shadow: var(--shadow); }
.live-map-wrap { position: relative; }
#liveMap { height: 320px; border-radius: 0; margin: 0; }
@media (max-width: 760px) { #liveMap { height: 280px; } }
.live-btn { position: absolute; z-index: 500; display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; min-height: 40px; border: 0; border-radius: 999px; background: var(--paper); color: var(--ink); font: inherit; font-size: .84rem; font-weight: 600; box-shadow: 0 4px 14px rgba(14,20,36,.18); cursor: pointer; }
.live-fs { top: 12px; right: 12px; } .live-center { bottom: 14px; right: 12px; }
.live-sheet { padding: 14px 16px 16px; }
.live-top { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: .82rem; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; }
.live-eta2 { display: flex; flex-direction: column; margin: 4px 0 10px; }
.live-eta2 b { font-size: 1.55rem; line-height: 1.2; font-weight: 600; }
.live-eta2 span { color: var(--muted); font-size: .92rem; }
.live-sheet .live-bar { margin: 0 0 14px; height: 6px; background: var(--soft); }
.live-sheet .live-bar span { transition: width 1.2s ease; }
.live-steps { list-style: none; margin: 0 0 14px; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; }
.live-steps li { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; font-size: .74rem; color: var(--muted); line-height: 1.25; }
.live-steps li::before { content: ''; position: absolute; top: 6px; left: calc(-50% + 8px); right: calc(50% + 8px); height: 2px; background: var(--line); }
.live-steps li:first-child::before { display: none; }
.live-steps li.done::before, .live-steps li.now::before { background: var(--brand-2); }
.live-steps i { width: 14px; height: 14px; border-radius: 50%; background: var(--paper); border: 2px solid var(--line); margin-bottom: 4px; z-index: 1; }
.live-steps li.done i { background: var(--brand-2); border-color: var(--brand-2); }
.live-steps li.now i { border-color: var(--accent); box-shadow: 0 0 0 4px rgba(255,90,60,.18); }
.live-steps li.done, .live-steps li.now { color: var(--ink); }
.live-steps small { display: block; color: var(--muted); }
.live-courier { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 16px; background: var(--soft); }
.live-courier .av { width: 44px; height: 44px; flex: none; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(135deg, var(--brand-2), var(--accent)); color: #fff; font-weight: 700; font-size: 1.1rem; }
.live-courier > div:not(.acts) { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.live-courier small { color: var(--muted); font-size: .84rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.live-courier .acts { display: flex; gap: 8px; }
.live-act { display: inline-flex; flex-direction: column; align-items: center; gap: 2px; min-width: 56px; padding: 6px 8px; border: 0; border-radius: 12px; background: var(--paper); color: var(--brand-text); font: inherit; font-size: .72rem; font-weight: 600; text-decoration: none; cursor: pointer; }
.live-act .ico { font-size: 1.25rem; }
.live-note { margin: 10px 0 0; padding: 9px 12px; border-radius: 12px; background: var(--mango-soft); color: var(--ink); font-size: .86rem; display: flex; gap: 8px; align-items: center; }
.live-pick { display: flex; gap: 10px; align-items: flex-start; flex-wrap: wrap; margin-top: 12px; padding: 12px; border-radius: 14px; border: 1.5px dashed var(--brand-2); font-size: .88rem; }
.live-pick > .ico { color: var(--brand-2); font-size: 1.3rem; flex: none; } .live-pick span { flex: 1; min-width: 200px; }
/* Icône du livreur : point corail qui « respire », flèche tournée dans sa direction */
.kmap-rider { background: none; border: 0; }
.kmap-rider .rider-halo { position: absolute; inset: 0; border-radius: 50%; background: rgba(255,90,60,.22); animation: kpulse 1.8s infinite; }
.kmap-rider .rider-dot { position: absolute; inset: 8px; border-radius: 50%; background: var(--accent); border: 3px solid #fff; box-shadow: 0 4px 12px rgba(0,0,0,.3); display: grid; place-items: center; }
.kmap-rider .rider-arrow { width: 0; height: 0; border-left: 6px solid transparent; border-right: 6px solid transparent; border-bottom: 11px solid #fff; transform-origin: 50% 60%; transition: transform .8s ease; margin-top: -2px; }
@media (prefers-reduced-motion: reduce) { .kmap-rider .rider-halo { animation: none; } .kmap-rider .rider-arrow { transition: none; } }
/* Plein écran : carte entière, volet d'informations en bas */
.live-box.full { position: fixed; inset: 0; z-index: 95; margin: 0; border: 0; border-radius: 0; display: flex; flex-direction: column; }
.live-box.full .live-map-wrap { flex: 1; }
.live-box.full #liveMap { height: 100%; }
.live-box.full .live-sheet { position: absolute; left: 0; right: 0; bottom: 0; z-index: 600; max-height: 58vh; overflow-y: auto; background: var(--paper); border-radius: 22px 22px 0 0; box-shadow: 0 -10px 30px rgba(14,20,36,.18); padding-bottom: calc(16px + env(safe-area-inset-bottom)); }
.live-box.full .live-sheet::before { content: ''; display: block; width: 40px; height: 4px; border-radius: 4px; background: var(--line); margin: -4px auto 10px; }
.live-box.full .live-fs { top: calc(12px + env(safe-area-inset-top)); }
.live-box.full .live-center { bottom: auto; top: calc(62px + env(safe-area-inset-top)); }
body.live-open { overflow: hidden; }
body.live-open .app-tabs, body.live-open #appTabs, body.live-open .chat-fab, body.live-open .chat-btn { display: none !important; }
@media (min-width: 900px) { .live-box.full .live-sheet { left: 20px; right: auto; bottom: 20px; width: 400px; border-radius: 20px; } }
.demo-strip a { color: #fff; text-decoration: underline; margin-left: 6px; white-space: nowrap; }
.live-btn[hidden] { display: none; }
.live-note[hidden], .live-courier[hidden] { display: none; }

/* ---------- Mode maintenance (18/10/2026) ---------- */
.maint-screen { position: fixed; inset: 0; z-index: 45; display: grid; place-items: center; padding: 20px 16px calc(20px + env(safe-area-inset-bottom)); overflow-y: auto;
  background: radial-gradient(circle at 15% 10%, rgba(255,179,0,.18), transparent 40%), radial-gradient(circle at 90% 85%, rgba(255,90,60,.16), transparent 45%), var(--bg); }
.maint-card { width: min(480px, 100%); text-align: center; background: var(--paper); border: 1px solid var(--line-soft); border-radius: 26px; padding: 30px 24px 22px; box-shadow: 0 24px 60px rgba(14,20,36,.14); }
.maint-logo { height: 34px; width: auto; margin: 0 auto 18px; display: block; }
.maint-logo.for-dark { display: none; }
html[data-theme="dark"] .maint-logo.for-light { display: none; } html[data-theme="dark"] .maint-logo.for-dark { display: block; }
.maint-ico { width: 64px; height: 64px; margin: 0 auto 14px; border-radius: 50%; display: grid; place-items: center; font-size: 2rem; color: var(--brand-text); background: var(--violet-soft); }
.maint-card h1 { font-size: 1.45rem; margin: 0 0 8px; }
.maint-msg { font-size: 1rem; line-height: 1.55; margin: 0 0 12px; }
.maint-until { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; background: var(--mango-soft); font-weight: 600; font-size: .9rem; margin: 0 0 10px; }
.maint-actions { display: flex; flex-direction: column; gap: 10px; margin: 16px 0 8px; }
.maint-actions .btn { width: 100%; justify-content: center; }
.maint-preview { display: inline-block; margin-bottom: 14px; padding: 4px 10px; border-radius: 999px; background: var(--coral-soft); color: var(--accent-dark); font-size: .8rem; font-weight: 600; }
body.maint-on { overflow: hidden; }
body.maint-on .app-tabs, body.maint-on #appTabs { display: none !important; }

/* ======================================================================================================
   VITRINE TECH (19/10/2026, décision Joseph : Zado = électronique uniquement, inspiration « grande boutique tech »
   façon thème Maximize, avec une mise en page propre à Zado). Bleu marine du logo, fond gris clair, en-tête blanc,
   barre des rayons marine, mangue pour les actions d'achat, corail pour les remises.
   ====================================================================================================== */
html { background: var(--bg); }
body { background: var(--bg); }

/* Bandeau défilant */
.ann { background: #0B1A33; color: #fff; overflow: hidden; white-space: nowrap; font-size: .78rem; font-weight: 600; }
.ann-track { display: inline-flex; gap: 44px; padding: 7px 0; animation: ann-move 42s linear infinite; }
.ann span { display: inline-flex; align-items: center; gap: 7px; }
.ann .ico { color: var(--mango); font-size: 1rem; }
@keyframes ann-move { to { transform: translateX(-50%); } }
html[data-motion="reduce"] .ann-track { animation: none; }
@media (prefers-reduced-motion: reduce) { .ann-track { animation: none; } }

/* En-tête : bande blanche (logo, recherche, compte, panier) + barre des rayons marine */
.header { color: var(--ink); background: #fff; box-shadow: 0 1px 0 var(--line), 0 8px 22px rgba(16,38,74,.07); }
.header::after { height: 3px; background: linear-gradient(90deg, var(--brand), var(--mango) 70%, var(--accent)); }
.hdr-top { background: #fff; }
.logo .logo-dark { display: none; }
.hdr-btn { color: var(--ink); }
.hdr-btn:hover, .hdr-btn:focus-within { background: var(--soft); }
.hdr-btn > .ico { color: var(--brand); }
.hdr-two small { color: var(--muted); }
.search { border: 2px solid var(--brand); border-radius: 12px; padding: 0; overflow: visible; height: 48px; gap: 0; }
.search:focus-within { border-color: var(--brand); box-shadow: 0 0 0 4px rgba(30,86,194,.14); }
.search-cat { border-radius: 10px 0 0 10px; background: var(--soft); color: var(--brand-text); border-right: 1px solid var(--line); }
.search-cat:hover { background: var(--violet-soft); }
.search-go { border-radius: 0 9px 9px 0; background: var(--brand); }
.search-go:hover { background: var(--brand-2); filter: none; }
.cart-btn { background: var(--soft); }
.cart-btn:hover { background: var(--violet-soft); }
.cart-ico .ico { color: var(--brand); }
.badge { background: var(--accent); color: #fff; box-shadow: 0 0 0 2px #fff; }
.hdr-sub { background: var(--brand); border-top: 0; }
.catnav a { color: #E3E9F3; font-weight: 600; }
.catnav a.deals-link { color: #FFB4A3; }
.catnav .nb { font-size: .62rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; background: var(--accent); color: #fff; padding: 2px 6px; border-radius: 6px; }
.catnav a.deals-link.active .nb { background: #fff; color: var(--accent); }
.sub-links { flex: none; display: flex; align-items: center; gap: 4px; padding-left: 8px; }
.sub-links a, .sub-links button { display: inline-flex; align-items: center; gap: 6px; color: #C8D3E8; font: inherit; font-size: .82rem; font-weight: 600; background: none; border: 0; padding: 5px 10px; border-radius: 999px; cursor: pointer; }
.sub-links a:hover, .sub-links button:hover { background: rgba(255,255,255,.12); color: #fff; }
.sub-links .ico { color: var(--mango); }
@media (max-width: 1100px) { .sub-links { display: none; } }

main { max-width: 1240px; }

/* Pastilles des rayons (photo + nombre d'articles) */
.cat-chips { display: flex; gap: 10px; overflow-x: auto; scrollbar-width: none; padding: 2px 2px 4px; margin-bottom: 16px; }
.cat-chips::-webkit-scrollbar { display: none; }
.cat-chips a { flex: none; display: flex; align-items: center; gap: 10px; background: var(--paper); border: 1px solid var(--line); border-radius: 14px; padding: 7px 14px 7px 7px; transition: border-color .2s, transform .2s; }
.cat-chips a:hover { border-color: var(--brand); transform: translateY(-2px); }
.cc-img { width: 44px; height: 44px; border-radius: 10px; background: #fff; display: grid; place-items: center; overflow: hidden; font-size: 1.4rem; color: var(--brand); border: 1px solid var(--line-soft); }
.cc-img img { width: 100%; height: 100%; object-fit: contain; }
.cat-chips b { display: block; font-size: .86rem; font-weight: 700; line-height: 1.2; }
.cat-chips small { color: var(--muted); font-size: .72rem; }

/* Héros : carrousel + deux cartes */
.hero-grid { display: grid; grid-template-columns: minmax(0, 2.15fr) minmax(0, 1fr); gap: 14px; }
.hero-grid .slider { border-radius: 18px; box-shadow: none; }
.hero-grid .slide { min-height: 400px; padding: 40px 48px; }
.hero-side { display: grid; gap: 14px; }
.side-card { position: relative; overflow: hidden; border-radius: 18px; padding: 22px 22px 20px; display: flex; flex-direction: column; gap: 4px; min-height: 190px; transition: transform .25s, box-shadow .25s; }
.side-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-hover); }
.side-card.sc-0 { background: #E6EEFA; } .side-card.sc-1 { background: #FFF1D6; }
.sc-k { font-size: .72rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--link); }
.side-card b { font-size: 1.12rem; line-height: 1.2; max-width: 58%; color: var(--ink); }
.sc-price { font-size: .85rem; color: var(--muted); max-width: 58%; }
.sc-go { margin-top: auto; font-weight: 700; font-size: .86rem; color: var(--brand-text); display: inline-flex; align-items: center; gap: 4px; position: relative; z-index: 1; }
.side-card img { position: absolute; right: 12px; bottom: 12px; width: 40%; aspect-ratio: 1; object-fit: contain; border-radius: 14px; background: #fff; box-shadow: 0 12px 26px rgba(16,38,74,.16); transform: rotate(4deg); transition: transform .3s; }
.side-card:hover img { transform: rotate(0); }
/* Photos d'ambiance (Unsplash) tant que les produits n'ont pas leur photo (22/10/2026) */
.slide-visual img.amb { width: min(460px, 94%); height: 290px; object-fit: cover; }
.slide-visual .mz { position: relative; z-index: 2; width: 240px; height: 286px; }
.slide-visual .mz::before { background: #fff; box-shadow: 0 24px 50px rgba(16,38,74,.16); }
@media (max-width: 760px) { .slide-visual .mz { width: 118px; height: 140px; } }
.amb-note { position: absolute; z-index: 3; right: 8%; bottom: 6%; font-size: .68rem; font-weight: 600; color: #fff; background: rgba(14,20,36,.55); padding: 3px 8px; border-radius: 999px; }
.slide-ico.mini { position: absolute; z-index: 3; left: 6%; bottom: 8%; width: 74px; height: 74px; font-size: 2.2rem; border-radius: 20px; background: #fff; color: var(--brand); display: grid; place-items: center; box-shadow: 0 12px 26px rgba(16,38,74,.25); }
.side-card img.amb { object-fit: cover; background: var(--soft); }
.cc-img img.amb { object-fit: cover; }
.ub-amb { display: block; height: 104px; margin: -2px 0 10px; border-radius: 12px; overflow: hidden; }
.ub-amb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s; }
.ublock:hover .ub-amb img { transform: scale(1.04); }
@media (max-width: 760px) { .slide-visual img.amb { height: 140px; } .slide-ico.mini { width: 44px; height: 44px; font-size: 1.3rem; border-radius: 12px; } .ub-amb { height: 80px; } }
/* Étiquette Zado (remise) : petite étiquette mangue à encoche, propre à Zado */
.zl { position: absolute; top: 14px; right: 14px; background: var(--mango); color: #231800; font-weight: 800; font-size: .85rem; padding: 5px 10px 5px 16px; border-radius: 4px 10px 10px 4px; clip-path: polygon(10px 0, 100% 0, 100% 100%, 10px 100%, 0 50%); }
@media (max-width: 900px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero-side { grid-template-columns: 1fr 1fr; }
  .side-card { min-height: 0; padding: 12px; gap: 2px; }
  .side-card b { font-size: .88rem; max-width: 100%; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.4em; }
  .sc-k { font-size: .64rem; padding-right: 54px; }
  .sc-price { display: none; }
  .side-card img { position: static; width: 70%; margin: 8px auto 6px; transform: none; box-shadow: 0 8px 18px rgba(16,38,74,.14); }
  .side-card .sc-go { font-size: .8rem; margin-top: 0; order: 2; }
  .zl { top: 10px; right: 10px; font-size: .74rem; padding: 3px 8px 3px 13px; }
  .hero-grid .slide { padding: 20px 20px 48px; min-height: 0; }
}

/* Thèmes du carrousel : marine, corail, mangue, clair */
.theme-violet { background: radial-gradient(120% 140% at 85% 20%, #2D66D6 0%, #1B3A6B 40%, #10264A 75%, #0B1A33 100%); }
.theme-light { background: linear-gradient(135deg, #EAF0F9 0%, #FFF4E5 100%); }

/* Ventes flash : compte à rebours en cases corail */
.flash { background: var(--paper); border: 1px solid var(--line); border-radius: 18px; }
.flash::after { display: none; }
.flash .shelf-head { align-items: center; }
.flash .fl-title { margin-right: auto; }
.countdown { gap: 5px; }
.countdown b { background: var(--accent); min-width: 38px; font-size: 1.05rem; padding: 5px 8px; border-radius: 8px; }
.countdown i { font-style: normal; font-size: .72rem; color: var(--muted); font-weight: 600; margin-right: 2px; }
@media (max-width: 760px) { .flash .see-all { display: none; } }

/* Bande « point relais » */
.relay-band { margin-top: 36px; border-radius: 18px; padding: 30px 34px; display: grid; grid-template-columns: 1.4fr 1.2fr auto; gap: 24px; align-items: center; color: #fff;
  background: linear-gradient(110deg, #0B1A33 0%, #10264A 55%, #1B3A6B 100%); position: relative; overflow: hidden; }
.relay-band::after { content: ''; position: absolute; right: -50px; top: -60px; width: 200px; height: 200px; border-radius: 50%; border: 22px solid rgba(255,179,0,.12); }
.relay-band .kicker { color: var(--mango); }
.relay-band h2 { color: #fff; font-size: clamp(1.3rem, 2.6vw, 1.7rem); margin: 0 0 6px; }
.relay-band p { margin: 0; color: #C8D3E8; font-size: .92rem; }
.rb-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.rb-steps li { display: flex; align-items: center; gap: 10px; font-weight: 600; font-size: .9rem; }
.rb-steps b { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--mango); color: #231800; font-size: .85rem; flex: none; }
.relay-band .btn { position: relative; z-index: 1; }
@media (max-width: 900px) { .relay-band { grid-template-columns: 1fr; padding: 24px 20px; } }

/* Explorer les rayons : 4 vignettes par rayon */
.ublocks { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.ublock { background: var(--paper); border: 1px solid var(--line); border-radius: 16px; padding: 14px; display: flex; flex-direction: column; gap: 10px; transition: border-color .2s, box-shadow .2s; }
.ublock:hover { border-color: var(--brand); box-shadow: var(--shadow-hover); }
.ub-h b { display: block; font-size: 1.02rem; }
.ub-h small { color: var(--muted); font-size: .78rem; }
.ub-g { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ub-g span { aspect-ratio: 1; background: #fff; border: 1px solid var(--line-soft); border-radius: 10px; display: grid; place-items: center; overflow: hidden; }
.ub-g img { width: 86%; height: 86%; object-fit: contain; transition: transform .3s; }
.ublock:hover .ub-g img { transform: scale(1.05); }
.ub-go { font-weight: 700; font-size: .85rem; color: var(--brand-text); display: inline-flex; align-items: center; gap: 4px; }
@media (max-width: 1000px) { .ublocks { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .ublocks { display: flex; overflow-x: auto; scrollbar-width: none; scroll-snap-type: x mandatory; } .ublock { flex: 0 0 78%; scroll-snap-align: start; } }

/* Onglets des meilleures offres */
.home-tabs { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; margin: -4px 0 14px; padding-bottom: 2px; }
.home-tabs::-webkit-scrollbar { display: none; }
.home-tabs button { flex: none; display: inline-flex; align-items: center; gap: 7px; border: 1px solid var(--line); background: var(--paper); color: var(--ink); border-radius: 10px; padding: 8px 14px; font: inherit; font-weight: 600; font-size: .86rem; cursor: pointer; }
.home-tabs button .ico { color: var(--link); }
.home-tabs button.on { background: var(--brand); border-color: var(--brand); color: #fff; }
.home-tabs button.on .ico { color: var(--mango); }

/* Réassurance */
.trust-row { margin-top: 40px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.trust-row > div { background: var(--paper); border: 1px solid var(--line); border-radius: 14px; padding: 16px; display: flex; gap: 12px; align-items: center; }
.trust-row .ico { width: 42px; height: 42px; padding: 9px; border-radius: 12px; background: var(--violet-soft); color: var(--brand-text); flex: none; }
.trust-row b { display: block; font-size: .92rem; }
.trust-row small { color: var(--muted); font-size: .78rem; line-height: 1.35; display: block; }
@media (max-width: 900px) { .trust-row { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .trust-row { grid-template-columns: 1fr; } }

/* Cartes produits */
.card { border-color: var(--line); box-shadow: none; }
.card:hover { box-shadow: 0 12px 30px rgba(16,38,74,.12); transform: translateY(-3px); }
.card .thumb { background: #fff; }
.price.sale { color: var(--accent-dark); }
.card .stock-low.ok { color: var(--ok); font-weight: 600; }
.stock-low .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ok); display: inline-block; }
.card .btn.cta.small { background: var(--mango); color: #231800; }
.card .btn.cta.small:hover { background: #FFC233; box-shadow: 0 6px 16px rgba(255,179,0,.35); }
.card .btn.cta.small:disabled { background: var(--soft); color: var(--muted); }
.disc { border-radius: 6px; }
.btn { border-radius: 12px; }
.see-all { border-radius: 10px; }

/* Pied de page */
.footer { background: #0B1A33; color: #C8D3E8; }
.footer::before { background: linear-gradient(90deg, var(--brand-2), var(--mango) 70%, var(--accent)); }
.footer::after { border-color: rgba(255,179,0,.06); }
.footer-note { color: #9FB0CC; }

/* Thème sombre de la vitrine */
html[data-theme="dark"] .header { background: var(--paper); box-shadow: 0 1px 0 var(--line); }
html[data-theme="dark"] .hdr-top { background: var(--paper); }
html[data-theme="dark"] .logo .logo-light { display: none; }
html[data-theme="dark"] .logo .logo-dark { display: block; }
html[data-theme="dark"] .hdr-btn > .ico, html[data-theme="dark"] .cart-ico .ico { color: var(--brand-text); }
html[data-theme="dark"] .search { border-color: var(--line); }
html[data-theme="dark"] .search-go { background: #1E56C2; }
html[data-theme="dark"] .hdr-sub { background: #0B1A33; }
html[data-theme="dark"] .badge { box-shadow: 0 0 0 2px var(--paper); }
html[data-theme="dark"] .side-card.sc-0 { background: #16233D; } html[data-theme="dark"] .side-card.sc-1 { background: #2C2516; }
html[data-theme="dark"] .side-card b { color: var(--ink); }
html[data-theme="dark"] .flash { background: var(--paper); }
html[data-theme="dark"] .cc-img, html[data-theme="dark"] .ub-g span { border-color: var(--line); }
html[data-theme="dark"] .footer { background: #070D18; }
html[data-theme="dark"] .card .thumb.no-img { background: var(--soft); }
/* Produits sans photo (catalogue sans photos depuis le 19/10/2026) : icône du rayon à la place */
.slide-ico { position: relative; z-index: 2; width: 220px; height: 220px; border-radius: 40px; display: grid; place-items: center; font-size: 6rem; background: rgba(255,255,255,.14); color: #fff; transform: rotate(-4deg); }
.theme-mango .slide-ico, .theme-light .slide-ico { background: rgba(16,38,74,.08); color: var(--brand-text); }
.sc-ico { position: absolute; right: 14px; bottom: 14px; width: 96px; height: 96px; border-radius: 22px; display: grid; place-items: center; font-size: 3rem; background: #fff; color: var(--brand); box-shadow: 0 12px 26px rgba(16,38,74,.12); transform: rotate(4deg); }
.ub-g .ub-ico { display: flex; flex-direction: column; gap: 4px; padding: 6px; font-size: 2rem; color: var(--brand); background: var(--soft); text-align: center; }
.ub-ico small { font-size: .66rem; font-weight: 600; color: var(--ink); line-height: 1.2; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
@media (max-width: 760px) { .slide-ico { width: 120px; height: 120px; font-size: 3.4rem; border-radius: 26px; } }
@media (max-width: 900px) { .sc-ico { position: static; margin: 8px auto 6px; width: 72px; height: 72px; font-size: 2.2rem; transform: none; } }
html[data-theme="dark"] .sc-ico { background: var(--soft); color: var(--brand-text); }
.card .thumb.no-img { background: var(--soft); font-size: 3.6rem; }
/* Provenance et fournisseur d'origine (confiance, 21/10/2026) */
.origin-row { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0 10px; }
.origin-row span { display: inline-flex; align-items: center; gap: 6px; background: var(--violet-soft); color: var(--brand-text); border-radius: 999px; padding: 5px 12px; font-size: .84rem; }
.origin-row .ico { color: var(--link); }
.card-tag { gap: 6px; align-items: center; }
.card-tag .orig { display: inline-flex; align-items: center; gap: 4px; font-size: .7rem; font-weight: 600; color: var(--link); }

/* « En détail » de la fiche produit : points forts, réparabilité, vidéo, prix en France (21/10/2026) */
.dt { margin: 30px 0 6px; }
.dt-grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
/* « Tout savoir sur ce produit » (22/10/2026) : sous la photo sur ordinateur (à côté de l'achat), après la fiche sur téléphone */
.dt { margin-top: 26px; scroll-margin-top: 130px; background: var(--soft); border: 1px solid var(--line); border-radius: 22px; padding: 20px; }
.dt-head { margin-bottom: 14px; }
.dt-head .kicker { margin: 0 0 2px; }
.dt-head h2 { display: flex; align-items: center; gap: 10px; margin: 0; font-size: clamp(1.25rem, 2.6vw, 1.55rem); color: var(--brand-text); }
.dt-head h2 .ico { width: 26px; height: 26px; color: var(--mango-dark, #E09A00); }
.pdp .dt-grid { grid-template-columns: 1fr 1fr; }
.pdp .dt-hl { grid-column: 1 / -1; }
.dt-card { border-top: 4px solid var(--link); }
.dt-card.dt-hl { border-top-color: var(--ok); } .dt-card.dt-repair { border-top-color: var(--brand); } .dt-card.dt-video { border-top-color: #E0201A; } .dt-card.dt-prices { border-top-color: var(--mango); }
.dt-card h3 { font-size: 1.08rem; }
.dt-hl ul { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 10px 18px; }
.dt-hl li { font-size: .98rem; }
@media (max-width: 819px) {
  /* Téléphone : la colonne de la photo « s'ouvre » pour placer les détails APRÈS le bouton d'achat */
  .pdp > div:first-child { display: contents; }
  .pdp > div:first-child > .dt { order: 3; margin-top: 0; padding: 16px 14px; }
  .pdp > div:last-child { order: 2; }
  .pdp .dt-grid { grid-template-columns: 1fr; }
}
/* Aperçu juste sous le titre : 3 points forts + pastilles, clic = descend aux détails */
.dt-peek { display: grid; gap: 10px; margin: 2px 0 14px; padding: 12px 14px; border: 1px solid var(--line); border-left: 4px solid var(--mango); border-radius: 14px; background: var(--paper); color: var(--ink); text-decoration: none; }
.dt-peek:hover { box-shadow: var(--shadow); }
.dt-peek ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.dt-peek li { display: flex; gap: 8px; align-items: flex-start; font-size: .93rem; line-height: 1.35; }
.dt-peek li .ico { color: var(--ok); flex: none; margin-top: 1px; }
.dp-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.dp-chip { display: inline-flex; align-items: center; gap: 5px; font-size: .8rem; font-weight: 600; padding: 4px 10px; border-radius: 999px; background: var(--soft); color: var(--brand-text); }
.dp-chip .ico { width: 15px; height: 15px; }
.dp-more { display: inline-flex; align-items: center; gap: 4px; font-size: .88rem; font-weight: 700; color: var(--link); }
.dt-card { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 18px; box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 8px; color: var(--ink); text-decoration: none; min-width: 0; }
.dt-card h3 { display: flex; align-items: center; gap: 8px; font-size: .98rem; margin: 0 0 4px; color: var(--brand-text); }
.dt-card h3 .ico { color: var(--link); width: 20px; height: 20px; }
.dt-hl ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.dt-hl li { display: flex; gap: 8px; align-items: flex-start; font-size: .92rem; line-height: 1.4; }
.dt-hl li .ico { color: var(--ok); flex: none; margin-top: 1px; }
.dt-score { display: flex; align-items: baseline; gap: 3px; }
.dt-score b { font-size: 2.1rem; line-height: 1; font-weight: 700; }
.dt-score small { color: var(--muted); font-size: 1rem; }
.dt-score.lv5 b, .dt-score.lv4 b { color: var(--ok); } .dt-score.lv3 b { color: var(--mango-dark); } .dt-score.lv2 b, .dt-score.lv1 b { color: var(--accent-dark); }
.dt-sub { margin: 0; color: var(--muted); font-size: .86rem; }
.dt-gauge { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; }
.dt-gauge i { height: 6px; border-radius: 3px; background: var(--line-soft); }
.dt-gauge i.on.lv5, .dt-gauge i.on.lv4 { background: var(--ok); } .dt-gauge i.on.lv3 { background: var(--mango); } .dt-gauge i.on.lv2, .dt-gauge i.on.lv1 { background: var(--accent); }
.dt-note { margin: 0; color: var(--muted); font-size: .84rem; line-height: 1.45; }
.dt-link { display: inline-flex; align-items: center; gap: 5px; color: var(--link); font-size: .88rem; font-weight: 600; text-decoration: none; margin-top: auto; }
.dt-video { transition: box-shadow .2s, transform .2s; }
.dt-video:hover { box-shadow: var(--shadow-hover); transform: translateY(-2px); }
.dt-video h3 .ico { color: #E0201A; }
.dt-play { display: grid; place-items: center; height: 92px; border-radius: var(--radius-sm); background: linear-gradient(135deg, var(--brand), var(--brand-2)); color: #fff; }
.dt-play .ico { width: 46px; height: 46px; }
.dt-video b { font-size: .95rem; line-height: 1.35; } .dt-video small { color: var(--muted); }
.dt-prices table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.dt-prices th { text-align: left; font-weight: 500; padding: 7px 8px 7px 0; border-bottom: 1px solid var(--line-soft); }
.dt-prices th a { color: var(--link); text-decoration: none; }
.dt-prices td { text-align: right; padding: 7px 0; border-bottom: 1px solid var(--line-soft); font-weight: 600; white-space: nowrap; }
.dt-prices td small { display: block; font-weight: 400; color: var(--muted); font-size: .78rem; }
.pdp p + p { margin-top: 8px; }
/* Fournisseur d'origine sur les cartes (21/10/2026) : à côté de la provenance, coupé proprement si la carte est étroite */
.card-body .card-tag { height: auto; min-height: 20px; flex-wrap: wrap; column-gap: 10px; row-gap: 2px; }
.card-tag .orig { white-space: nowrap; max-width: 100%; }
.card-tag .orig.src { color: var(--ok); min-width: 0; }
.card-tag .orig.src > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.card-badge { position: absolute; top: 18px; right: 18px; z-index: 2; display: flex; }
.card-badge .tag { box-shadow: 0 4px 10px rgba(16,38,74,.12); }
/* Pièce d'identité : pastille fixe « vérification en cours » (1 min) + animation « Identité vérifiée » (21/10/2026) */
.id-timer { position: fixed; left: 18px; bottom: calc(18px + env(safe-area-inset-bottom)); z-index: 47; display: flex; align-items: center; gap: 10px; max-width: min(360px, calc(100% - 170px)); padding: 8px 16px 8px 8px; border-radius: 999px; background: var(--paper); color: var(--ink); text-decoration: none; border: 1px solid var(--line); box-shadow: 0 12px 30px rgba(16,38,74,.18); transform: translateY(140%); opacity: 0; transition: transform .35s cubic-bezier(.2,.9,.3,1.2), opacity .25s; }
.id-timer.show { transform: none; opacity: 1; }
.idt-ring { position: relative; flex: none; width: 44px; height: 44px; display: grid; place-items: center; }
.idt-ring svg { position: absolute; inset: 0; transform: rotate(-90deg); }
.idt-ring circle { fill: none; stroke-width: 4; }
.idt-bg { stroke: var(--line-soft); }
.idt-fg { stroke: var(--mango); stroke-linecap: round; transition: stroke-dashoffset 1s linear; }
.idt-s { position: relative; font-size: .95rem; font-variant-numeric: tabular-nums; color: var(--brand-text); }
.idt-txt { display: grid; min-width: 0; line-height: 1.25; }
.idt-txt strong { font-size: .86rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.idt-txt small { font-size: .76rem; color: var(--muted); }
.id-timer.late .idt-fg { stroke-dasharray: 30 90 !important; stroke-dashoffset: 0 !important; transition: none; animation: idt-spin 1.1s linear infinite; transform-origin: 22px 22px; }
@keyframes idt-spin { to { transform: rotate(360deg); } }
@media (max-width: 760px) { .id-timer { left: 12px; bottom: calc(78px + env(safe-area-inset-bottom)); max-width: calc(100% - 150px); padding-right: 12px; } .idt-txt small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } }
body[data-route="p"] .id-timer { bottom: calc(148px + env(safe-area-inset-bottom)); }
@media (min-width: 761px) { body[data-route="p"] .id-timer { bottom: calc(18px + env(safe-area-inset-bottom)); } }

.idv { position: fixed; inset: 0; z-index: 95; display: grid; place-items: center; padding: 16px; background: rgba(8,16,32,.55); backdrop-filter: blur(4px); opacity: 0; transition: opacity .25s; }
.idv.show { opacity: 1; }
.idv-card { width: min(400px, 100%); background: var(--paper); color: var(--ink); border-radius: 24px; padding: 28px 24px 22px; text-align: center; box-shadow: 0 30px 80px rgba(0,0,0,.35); transform: translateY(18px) scale(.94); transition: transform .45s cubic-bezier(.2,.9,.3,1.25); }
.idv.show .idv-card { transform: none; }
.idv-card h2 { font-size: 1.35rem; margin: 6px 0 6px; color: var(--brand-text); }
.idv-card p { margin: 0 0 18px; color: var(--muted); line-height: 1.5; }
.idv-actions { display: grid; gap: 8px; }
.idv-seal { position: relative; width: 120px; height: 120px; margin: 0 auto 4px; }
.idv-seal svg { position: relative; width: 100%; height: 100%; }
.idv-c { fill: var(--ok); stroke: none; transform-origin: 60px 60px; transform: scale(0); }
.idv-k { fill: none; stroke: #fff; stroke-width: 9; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 80; stroke-dashoffset: 80; }
.idv.show .idv-c { animation: idv-pop .5s .15s cubic-bezier(.2,.9,.3,1.4) forwards; }
.idv.show .idv-k { animation: idv-draw .45s .55s ease-out forwards; }
.idv-seal i { position: absolute; left: 50%; top: 50%; width: 8px; height: 8px; margin: -4px; border-radius: 50%; background: var(--mango); opacity: 0; transform: rotate(var(--a)) translateY(0); }
.idv-seal i:nth-child(3n) { background: var(--accent); } .idv-seal i:nth-child(3n+1) { background: var(--link); }
.idv.show .idv-seal i { animation: idv-burst .8s calc(.5s + var(--d)) ease-out forwards; }
@keyframes idv-pop { to { transform: scale(1); } }
@keyframes idv-draw { to { stroke-dashoffset: 0; } }
@keyframes idv-burst { 0% { opacity: 0; transform: rotate(var(--a)) translateY(0) scale(.6); } 30% { opacity: 1; } 100% { opacity: 0; transform: rotate(var(--a)) translateY(-78px) scale(1); } }
html[data-motion="reduce"] .idv-c { transform: none; } html[data-motion="reduce"] .idv-k { stroke-dashoffset: 0; } html[data-motion="reduce"] .idv-seal i { display: none; }
@media (prefers-reduced-motion: reduce) { .idv-c { animation: none !important; transform: none; } .idv-k { animation: none !important; stroke-dashoffset: 0; } .idv-seal i { display: none; } }
/* Détail du prix (prix fournisseur + marge Zado + transport) et paiement Mobile Money en deux temps (21/10/2026) */
.price-detail { margin: 6px 0 12px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--soft); font-size: .88rem; }
.price-detail summary { cursor: pointer; padding: 8px 12px; font-weight: 600; color: var(--brand-text); display: flex; align-items: center; gap: 6px; list-style: none; }
.price-detail summary::-webkit-details-marker { display: none; }
.price-detail table { width: 100%; border-collapse: collapse; }
.price-detail td { padding: 6px 12px; border-top: 1px solid var(--line-soft); vertical-align: top; }
.price-detail td:last-child { text-align: right; white-space: nowrap; font-weight: 600; }
.price-detail td small { display: block; color: var(--muted); font-size: .76rem; font-weight: 400; }
.price-detail tr.sub td { color: var(--muted); }
.price-detail tr.tot td { font-weight: 700; color: var(--brand-text); border-top: 2px solid var(--line); }
#cartTransport:empty { display: none; }
.op.off { opacity: .55; }
.pay-box { display: flex; gap: 12px; align-items: flex-start; margin: 14px 0; padding: 14px 16px; border-radius: var(--radius-sm); background: var(--mango-soft); border: 1px solid rgba(255,179,0,.4); }
.pay-box > .ico { flex: none; width: 26px; height: 26px; color: var(--mango-dark); margin-top: 2px; }
.pay-box > div { display: grid; gap: 6px; min-width: 0; }
.pay-box b { font-size: .98rem; } .pay-box span { line-height: 1.45; } .pay-box small { color: var(--muted); }
.pay-box .pb-num { font-size: 1.1rem; letter-spacing: .04em; white-space: nowrap; }
.pay-box .btn { justify-self: start; }
.pay-box.done { background: var(--violet-soft); border-color: transparent; } .pay-box.done > .ico { color: var(--ok); }
.pay-box.warn { background: var(--coral-soft); border-color: rgba(255,90,60,.35); } .pay-box.warn > .ico { color: var(--accent-dark); }
/* Voyage du colis France → Pointe-Noire (suivi client, 21/10/2026) */
.voyage { margin: 16px 0; padding: 14px 16px 12px; border-radius: var(--radius); background: linear-gradient(160deg, #EAF2FF, #F7FAFF 60%, #FFF6E0); border: 1px solid var(--line); overflow: hidden; position: relative; }
.vy-head { display: grid; gap: 2px; } .vy-head b { font-size: 1rem; color: var(--brand-text); } .vy-head span { color: var(--muted); font-size: .88rem; }
.vy-map { display: block; width: 100%; max-width: 560px; margin: 6px auto 0; overflow: visible; }
.vy-track { fill: none; stroke: #B9C7DD; stroke-width: 2; stroke-dasharray: 2 3; }
.vy-trail { fill: none; stroke: var(--mango); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 100; transition: stroke-dashoffset 1.6s ease; }
.vy-pin circle { fill: var(--brand); stroke: #fff; stroke-width: 3; }
.st-arrived .vy-cg circle { fill: var(--ok); }
.vy-plane use { color: var(--brand); filter: drop-shadow(0 3px 4px rgba(16,38,74,.3)); }
.st-flying .vy-plane use { color: var(--accent); }
.st-bought:not(.still) .vy-plane { animation: vy-wait 1.6s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
.st-waiting .vy-plane { opacity: .35; }
.st-flying:not(.still) .vy-trail { animation: vy-dash 2.4s linear infinite; stroke-dasharray: 6 4; stroke-dashoffset: 0 !important; }
.vy-ping { fill: none; stroke: var(--ok); stroke-width: 2; transform-box: fill-box; transform-origin: center; animation: vy-ping 1.8s 2.4s ease-out infinite; opacity: 0; }
.vy-labels { display: flex; justify-content: space-between; max-width: 560px; margin: -2px auto 0; font-size: .78rem; font-weight: 600; color: var(--brand-text); }
.vy-when { display: flex; align-items: center; gap: 6px; margin: 8px 0 0; font-size: .86rem; color: var(--ink); }
.vy-when .ico { color: var(--mango-dark); }
@keyframes vy-wait { 0%, 100% { opacity: 1; } 50% { opacity: .55; } }
@keyframes vy-dash { to { stroke-dashoffset: -20; } }
@keyframes vy-ping { 0% { opacity: .9; transform: scale(1); } 100% { opacity: 0; transform: scale(3.2); } }
html[data-theme="dark"] .voyage { background: linear-gradient(160deg, #14213A, #141C2A 60%, #2A2412); }
html[data-theme="dark"] .vy-track { stroke: #3A4A66; } html[data-theme="dark"] .vy-plane use { color: #9DBBFF; }
html[data-motion="reduce"] .vy-plane, html[data-motion="reduce"] .vy-trail, html[data-motion="reduce"] .vy-ping { animation: none !important; }
/* Chronologie : l'étape en cours respire, les étapes faites se cochent avec un petit rebond */
.timeline li.current .dot { animation: tl-pulse 2s ease-in-out infinite; }
@keyframes tl-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(255,179,0,.55); } 50% { box-shadow: 0 0 0 7px rgba(255,179,0,0); } }
html[data-motion="reduce"] .timeline li.current .dot { animation: none; }
/* ===== Fond « Route aérienne » + colis (choix Joseph 21/10/2026) =====
   Couche fixe derrière la page : arcs pointillés France → Pointe-Noire, petits avions, destinations qui « pulsent », colis qui flottent.
   Bande « colisage » au-dessus du pied de page : préparatrice, tapis roulant, scanner, magasinier. Coupés si « réduire les animations ». */
:root { --rt-dot: rgba(16,38,74,.14); --rt-ink: rgba(16,38,74,.34); --rt-box: rgba(16,38,74,.22); --rt-boxfill: rgba(255,255,255,.75); }
html[data-theme="dark"] { --rt-dot: rgba(157,187,255,.16); --rt-ink: rgba(157,187,255,.40); --rt-box: rgba(157,187,255,.30); --rt-boxfill: rgba(20,28,42,.85); }
main#app { position: relative; z-index: 1; }
.bg-route { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.bg-route svg { width: 100%; height: 100%; }
.bg-route .arc { fill: none; stroke: var(--rt-dot); stroke-width: 1.6; stroke-dasharray: 2 7; stroke-linecap: round; }
.bg-route .pin { fill: var(--rt-dot); }
.bg-route .ring { fill: none; stroke: var(--mango); stroke-width: 1.5; transform-box: fill-box; transform-origin: center; animation: rt-ping 3.2s ease-out infinite; }
.bg-route .plane { color: var(--brand); opacity: .5; }
html[data-theme="dark"] .bg-route .plane { color: #9DBBFF; }
.bg-route .fbox { transform-box: fill-box; transform-origin: center; animation: rt-float var(--fd, 12s) ease-in-out infinite alternate; }
/* Le carton Zado (scotch mangue + étiquette) */
.bx { fill: var(--rt-boxfill); stroke: var(--rt-box); stroke-width: 1.6; stroke-linejoin: round; }
.tp { fill: none; stroke: var(--mango); stroke-width: 3; stroke-linecap: round; opacity: .85; }
.lb { fill: var(--rt-box); opacity: .6; }
@keyframes rt-ping { 0% { opacity: .8; transform: scale(1); } 100% { opacity: 0; transform: scale(4); } }
@keyframes rt-float { from { transform: translateY(-8px) rotate(var(--fr, -5deg)); } to { transform: translateY(10px) rotate(calc(var(--fr, -5deg) * -1)); } }

@media (max-width: 760px) { .bg-route .plane { opacity: .4; } }
/* Bas de page : l'étal de Mama Zando (scène SVG de scripts/mama-scene.js) */
.mz-band { position: relative; z-index: 1; max-width: 1180px; margin: 56px auto 0; padding: 0 20px; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); align-items: stretch; }
.mz-band + .footer { margin-top: 0; }
.mz-art { background: #FFF6E0; border: 1px solid var(--line); border-bottom: 0; border-radius: 18px 0 0 0; padding: 18px 18px 0; display: flex; align-items: flex-end; justify-content: center; overflow: hidden; }
.mz-scene { display: block; width: 100%; max-width: 440px; height: auto; margin-bottom: -2px; }
.mz-text { background: var(--paper); border: 1px solid var(--line); border-left: 0; border-bottom: 0; border-radius: 0 18px 0 0; padding: 28px 32px; display: flex; flex-direction: column; justify-content: center; gap: 10px; }
.mz-kick { font-size: .72rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.mz-text h2 { margin: 0; font-size: 1.45rem; line-height: 1.15; font-weight: 700; letter-spacing: -.02em; color: var(--brand-text); }
.mz-text p { margin: 0; color: var(--muted); max-width: 440px; }
.mz-steps { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.mz-steps li { display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--line); border-radius: 999px; padding: 5px 14px 5px 5px; font-weight: 600; font-size: .85rem; }
.mz-steps b { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--mango); color: #10264A; font-size: .78rem; }
/* Animation (7 s) : elle prépare le colis, puis elle vous le tend ; le colis est validé */
.mz-scene .mz-eyes { transform-box: fill-box; transform-origin: center; animation: mz-blink 4.6s infinite; }
.mz-scene .mz-pa { animation: mz-show-a 7s infinite; }
.mz-scene .mz-pb { opacity: 0; animation: mz-show-b 7s infinite; }
.mz-scene .mz-pb .mz-figure { transform-box: view-box; transform-origin: 120px 268px; animation: mz-hop 7s infinite; }
.mz-scene .mz-tape { transform-box: fill-box; transform-origin: center; animation: mz-wiggle .7s ease-in-out infinite alternate; }
.mz-scene .mz-ok { transform-box: fill-box; transform-origin: center; transform: scale(0); animation: mz-ok 7s infinite; }
@keyframes mz-blink { 0%, 93%, 100% { transform: scaleY(1); } 96% { transform: scaleY(.08); } }
@keyframes mz-show-a { 0%, 46% { opacity: 1; } 48%, 97% { opacity: 0; } 99%, 100% { opacity: 1; } }
@keyframes mz-show-b { 0%, 46% { opacity: 0; } 48%, 97% { opacity: 1; } 99%, 100% { opacity: 0; } }
@keyframes mz-hop { 0%, 47% { transform: translateY(0); } 52% { transform: translateY(-7px); } 57%, 100% { transform: translateY(0); } }
@keyframes mz-wiggle { from { transform: rotate(-2.5deg); } to { transform: rotate(2.5deg); } }
@keyframes mz-ok { 0%, 54% { transform: scale(0); } 60% { transform: scale(1.2); } 64%, 92% { transform: scale(1); } 96%, 100% { transform: scale(0); } }
@media (max-width: 760px) {
  .mz-band { grid-template-columns: 1fr; margin-top: 36px; padding: 0 12px; }
  .mz-art { border-radius: 18px 18px 0 0; border-bottom: 0; padding: 14px 14px 0; }
  .mz-scene { max-width: 320px; }
  .mz-text { border-left: 1px solid var(--line); border-radius: 0; padding: 20px 18px 24px; }
  .mz-text h2 { font-size: 1.2rem; }
}
/* Animations coupées : on garde Mama Zando qui tend le colis, validé */
html[data-motion="reduce"] .mz-scene *, html[data-saver="on"] .mz-scene * { animation: none !important; }
html[data-motion="reduce"] .mz-scene .mz-pa, html[data-saver="on"] .mz-scene .mz-pa { opacity: 0; }
html[data-motion="reduce"] .mz-scene .mz-pb, html[data-saver="on"] .mz-scene .mz-pb, html[data-motion="reduce"] .mz-scene .mz-ok, html[data-saver="on"] .mz-scene .mz-ok { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .mz-scene * { animation: none !important; } .mz-scene .mz-pa { opacity: 0; } .mz-scene .mz-pb, .mz-scene .mz-ok { opacity: 1; transform: none; } }
/* ================= Mama Zando dans la boutique (public/js/mama.js) =================
   Repères du dessin : épaule droite (141,166), pieds (120,268), centre de la tête (120,108).
   Fond crème rond derrière le personnage : il reste lisible en thème clair comme en sombre. */
.mz { display: inline-grid; place-items: center; flex: none; position: relative; }
.mz::before { content: ''; position: absolute; left: 8%; right: 8%; bottom: 2%; aspect-ratio: 1; border-radius: 50%; background: #FFF6E0; }
html[data-theme="dark"] .mz::before { background: #EFE6CF; }
.mz svg { position: relative; width: 100%; height: 100%; display: block; overflow: visible; }
.mz-xs { width: 48px; height: 58px; } .mz-sm { width: 84px; height: 100px; } .mz-md { width: 130px; height: 155px; } .mz-lg { width: 180px; height: 215px; }
.mz-s-load::before { bottom: 6%; }
.mz-avatar { display: inline-grid; place-items: center; flex: none; border-radius: 50%; background: #FFF6E0; overflow: hidden; }
.mz-avatar svg { width: 92%; height: 92%; margin-top: 10%; }
.mz-avatar.mz-xs { width: 32px; height: 32px; } .mz-avatar.mz-sm { width: 44px; height: 44px; } .mz-avatar.mz-md { width: 64px; height: 64px; }
.mz-dots { width: 30px; height: 15px; vertical-align: -2px; margin-left: 6px; }
.mz-dots path { fill: none; stroke: currentColor; stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; animation: mz-mini 1s ease-in-out infinite; }
.mz-dots path:nth-child(2) { animation-delay: .15s; } .mz-dots path:nth-child(3) { animation-delay: .3s; }
@keyframes mz-mini { 0%, 100% { opacity: .25; transform: translateX(0); } 50% { opacity: 1; transform: translateX(3px); } }

.mz .mz-eyes, .mz-avatar .mz-eyes { transform-box: fill-box; transform-origin: center; animation: mz-blink 4.8s infinite; }
.mz .mz-wave-r { transform-box: view-box; transform-origin: 141px 166px; animation: mz-wave 1.1s ease-in-out infinite alternate; }
@keyframes mz-wave { from { transform: rotate(6deg); } to { transform: rotate(-16deg); } }
@keyframes mz-spin { to { transform: rotate(360deg); } }
@keyframes mz-dot { 0%, 100% { transform: translateY(0); opacity: .35; } 40% { transform: translateY(-7px); opacity: 1; } }
@keyframes mz-pop { 0% { transform: scale(0); } 70% { transform: scale(1.15); } 100% { transform: scale(1); } }
/* Accueil : apparaît puis « Mbote ! » */
.mz-s-hello .mz-figure { transform-box: view-box; transform-origin: 120px 268px; animation: mz-in .6s cubic-bezier(.2,.9,.3,1.35) both; }
.mz-s-hello .mz-bub { transform-box: view-box; transform-origin: 64px 66px; animation: mz-pop .4s ease-out .5s both; }
@keyframes mz-in { from { transform: scale(.2); opacity: 0; } to { transform: scale(1); opacity: 1; } }
/* Chargement */
.mz-s-load .mz-orbit { transform-box: view-box; transform-origin: 120px 108px; animation: mz-spin 1.8s linear infinite; }
.mz-s-load .mz-par { transform-box: fill-box; transform-origin: center; animation: mz-spin 1.8s linear infinite reverse; }
.mz-s-load .mz-dot { animation: mz-dot 1.2s ease-in-out infinite; }
.mz-s-load .mz-dot:nth-of-type(2) { animation-delay: .15s; } .mz-s-load .mz-dot:nth-of-type(3) { animation-delay: .3s; }
/* Ajouté au panier (une fois) */
.mz-s-cart .mz-drop { animation: mz-drop .9s cubic-bezier(.5,0,.75,0) both; }
.mz-s-cart .mz-figure { transform-box: view-box; transform-origin: 120px 268px; animation: mz-catch 1.3s ease-out both; }
.mz-s-cart .mz-plus { transform-box: fill-box; transform-origin: center; animation: mz-pop .4s ease-out .9s both; }
@keyframes mz-drop { 0% { transform: translateY(-170px); opacity: 0; } 15% { opacity: 1; } 80% { transform: translateY(0); } 90% { transform: translateY(-6px); } 100% { transform: translateY(0); } }
@keyframes mz-catch { 0%, 60% { transform: scale(1, 1); } 72% { transform: scale(1.04, .95); } 100% { transform: scale(1, 1); } }
/* Paiement en attente : le téléphone vibre */
.mz-s-wait .mz-buzz { transform-box: view-box; transform-origin: 166px 120px; animation: mz-buzz 1.6s ease-in-out infinite; }
.mz-s-wait .mz-ring { fill: none; stroke: #FFB300; stroke-width: 3; transform-box: fill-box; transform-origin: center; animation: mz-ring 1.6s ease-out infinite; }
.mz-s-wait .mz-r2 { animation-delay: .5s; }
@keyframes mz-buzz { 0%, 50%, 100% { transform: rotate(0); } 6%, 18%, 30% { transform: rotate(-7deg); } 12%, 24%, 36% { transform: rotate(7deg); } }
@keyframes mz-ring { 0% { transform: scale(.6); opacity: .9; } 100% { transform: scale(1.9); opacity: 0; } }
/* Commande confirmée : saut de joie + confettis (2 fois, puis elle respire) */
.mz-s-yes .mz-figure { transform-box: view-box; transform-origin: 120px 268px; animation: mz-jump 1.3s ease-in-out 2; }
.mz-s-yes .mz-conf { transform-box: fill-box; transform-origin: center; opacity: 0; animation: mz-conf 1.8s ease-out .15s 1 both; }
.mz-s-yes .mz-ok { transform-box: fill-box; transform-origin: center; animation: mz-pop .45s ease-out .35s both; }
@keyframes mz-jump { 0%, 100% { transform: translateY(0) scale(1, 1); } 15% { transform: translateY(0) scale(1.04, .94); } 42% { transform: translateY(-26px) scale(.98, 1.03); } 70% { transform: translateY(0) scale(1.03, .96); } 85% { transform: translateY(0) scale(1, 1); } }
@keyframes mz-conf { 0% { transform: translate(0, 0) rotate(0); opacity: 0; } 10% { opacity: 1; } 70% { transform: translate(var(--dx), var(--dy)) rotate(var(--r)); opacity: 1; } 100% { transform: translate(var(--dx), calc(var(--dy) + 40px)) rotate(var(--r)); opacity: 0; } }
/* Paiement non abouti : haussement d'épaules */
.mz-s-no .mz-head { transform-box: view-box; transform-origin: 120px 140px; animation: mz-tilt 3s ease-in-out infinite; }
.mz-s-no .mz-arm-l, .mz-s-no .mz-arm-r { animation: mz-shrug 3s ease-in-out infinite; }
.mz-s-no .mz-q { transform-box: fill-box; transform-origin: center; animation: mz-pop .45s ease-out .3s both; }
@keyframes mz-tilt { 0%, 100% { transform: rotate(0); } 30%, 60% { transform: rotate(-7deg); } }
@keyframes mz-shrug { 0%, 100% { transform: translateY(0); } 30%, 60% { transform: translateY(-6px); } }
/* Panier vide */
.mz-s-empty .mz-head { transform-box: view-box; transform-origin: 120px 140px; animation: mz-peek 3.4s ease-in-out infinite; }
.mz-s-empty .mz-swing { transform-box: view-box; transform-origin: 120px 172px; animation: mz-swing 3.4s ease-in-out infinite; }
@keyframes mz-peek { 0%, 100% { transform: rotate(0) translateY(0); } 35%, 70% { transform: rotate(9deg) translateY(3px); } }
@keyframes mz-swing { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-4deg); } 55% { transform: rotate(4deg); } }
/* Pièce d'identité : la loupe balaie la pièce ; pièce vérifiée : le tampon tombe */
.mz-s-id .mz-scan { animation: mz-scan 3.2s ease-in-out infinite; }
@keyframes mz-scan { 0%, 100% { transform: translate(0, 0); } 25% { transform: translate(-42px, 6px); } 50% { transform: translate(-14px, 16px); } 75% { transform: translate(-40px, 20px); } }
.mz-s-ver .mz-stamp { transform-box: fill-box; transform-origin: center; animation: mz-stamp .7s ease-out .3s both; }
.mz-s-ver .mz-figure { transform-box: view-box; transform-origin: 120px 268px; animation: mz-hop .6s ease-in-out .7s 1; }
@keyframes mz-stamp { 0% { transform: scale(2.4) rotate(-14deg); opacity: 0; } 60% { transform: scale(.92) rotate(-10deg); opacity: 1; } 100% { transform: scale(1) rotate(-10deg); opacity: 1; } }
@keyframes mz-hop { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
/* Livraison : elle arrive et tend le colis */
.mz-s-deliver .mz-walk { animation: mz-walk 1.9s ease-out both; }
.mz-s-deliver .mz-ok { transform-box: fill-box; transform-origin: center; animation: mz-pop .45s ease-out 1.9s both; }
@keyframes mz-walk { 0% { transform: translateX(-200px); opacity: 0; } 20% { opacity: 1; } 100% { transform: translateX(0); } }
/* Elle vous répond (Aide) */
.mz-s-chat .mz-mouth { transform-box: fill-box; transform-origin: center top; animation: mz-talk .5s ease-in-out infinite alternate; }
.mz-s-chat .mz-tdot { animation: mz-dot 1.2s ease-in-out infinite; }
.mz-s-chat .mz-tdot:nth-of-type(2) { animation-delay: .15s; } .mz-s-chat .mz-tdot:nth-of-type(3) { animation-delay: .3s; }
@keyframes mz-talk { from { transform: scaleY(.45); } to { transform: scaleY(1); } }
/* Pas de réseau */
.mz-s-off .mz-bar { animation: mz-bar 1.6s steps(1) infinite; }
.mz-s-off .mz-b2 { animation-delay: .4s; } .mz-s-off .mz-b3 { animation-delay: .8s; }
.mz-s-off .mz-head { transform-box: view-box; transform-origin: 120px 140px; animation: mz-tilt 4s ease-in-out infinite; }
@keyframes mz-bar { 0% { opacity: .2; } 50% { opacity: 1; } }
/* Maintenance : la pancarte se balance */
.mz-s-maint .mz-sign { transform-box: view-box; transform-origin: 120px 150px; animation: mz-swing 2.6s ease-in-out infinite; }
@keyframes mz-blink { 0%, 93%, 100% { transform: scaleY(1); } 96% { transform: scaleY(.08); } }

/* Emplacements dans la boutique */
.mz-loading { display: grid; justify-items: center; gap: 4px; padding: 48px 16px; color: var(--muted); text-align: center; }
.mz-loading p { margin: 0; font-weight: 600; }
.empty-search > .mz { float: left; margin: -6px 12px 0 0; }
.empty.mz-empty { display: grid; justify-items: center; gap: 8px; text-align: center; padding: 24px 12px; }
.waiting .mz { margin: 0 auto 6px; }
.shop-toast .mz { margin: -14px 0 -6px -6px; }
.voyage .vy-head { position: relative; }
.voyage .mz { position: absolute; right: 0; top: -8px; }
.voyage .vy-head > b, .voyage .vy-head > span { padding-right: 70px; }
.mz-delivered { display: flex; align-items: center; gap: 14px; background: #E8F6F0; border-radius: 16px; padding: 10px 16px 10px 8px; margin: 0 0 14px; color: #0E5A44; }
.mz-delivered b { display: block; font-size: 1.05rem; color: #0E3D2F; }
html[data-theme="dark"] .mz-delivered { background: #12352B; color: #B6E8D4; } html[data-theme="dark"] .mz-delivered b { color: #E3FFF3; }
.id-box-anim { float: right; margin: -6px -4px 4px 10px; }
.maint-card .mz { margin: 4px auto 0; }
.offline-bar .mz-avatar { margin-right: 4px; vertical-align: middle; }
.idv-seal:has(.mz) { width: 130px; height: 158px; }
.idv-seal .mz { position: relative; z-index: 1; }
.idv-seal .mz svg { width: 100%; height: 100%; }

.chat-head .mz-avatar { box-shadow: 0 0 0 2px rgba(255,255,255,.6); }
.msg .who .chat-av { width: 22px; height: 22px; vertical-align: -6px; margin-right: 4px; }
.msg.typing .bubble { display: inline-flex; gap: 4px; padding: 12px 14px; }
.msg.typing .bubble i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; opacity: .4; animation: mz-dot 1.2s ease-in-out infinite; }
.msg.typing .bubble i:nth-child(2) { animation-delay: .15s; } .msg.typing .bubble i:nth-child(3) { animation-delay: .3s; }
/* Connexion rapide : clé d'accès, Google, Apple (public/js/sso.js, 22/10/2026) */
.sso { display: grid; gap: 8px; margin: 6px 0 4px; }
.sso-btn { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; font-weight: 600; border-radius: 12px; padding: 11px 14px; border: 1px solid var(--line); background: var(--paper); color: var(--ink); }
.sso-btn .sso-logo, .sso-btn .ico { width: 20px; height: 20px; flex: none; }
.sso-btn small { font-weight: 500; color: var(--muted); font-size: .75rem; }
.sso-btn:disabled { opacity: .55; cursor: not-allowed; }
.sso-key { background: var(--brand); color: #fff; border-color: var(--brand); }
.sso-apple { background: #000; color: #fff; border-color: #000; }
.sso-apple small { color: #bbb; }
html[data-theme="dark"] .sso-apple { background: #fff; color: #000; border-color: #fff; }
.sso-gbtn { display: flex; justify-content: center; }
.sso-or { display: flex; align-items: center; gap: 10px; margin: 6px 0 0; color: var(--muted); font-size: .8rem; text-align: center; }
.sso-or::before, .sso-or::after { content: ''; flex: 1; height: 1px; background: var(--line); }
.pref-row .sso-logo { width: 16px; height: 16px; vertical-align: -3px; }
.pk-list { list-style: none; margin: 0 0 6px; padding: 0; display: grid; gap: 6px; }
.pk-list li { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 12px; }
.pk-list li span { display: grid; } .pk-list li small { color: var(--muted); font-size: .78rem; }
.pk-list .ico { width: 16px; height: 16px; vertical-align: -3px; color: var(--link); }
/* Points relais masqués tant qu'aucun n'est actif (config.relays = 0) */
body.no-relay .needs-relay { display: none !important; }
/* Animations coupées : réglage « réduire les animations », économie de données ou réglage du téléphone */
html[data-motion="reduce"] .mz *, html[data-saver="on"] .mz *, html[data-motion="reduce"] .mz-avatar *, html[data-motion="reduce"] .mz-dots * { animation: none !important; }
html[data-motion="reduce"] .mz-s-yes .mz-conf, html[data-saver="on"] .mz-s-yes .mz-conf { opacity: 0; }
html[data-motion="reduce"] .msg.typing .bubble i { animation: none; }
@media (prefers-reduced-motion: reduce) { .mz *, .mz-avatar *, .mz-dots *, .msg.typing .bubble i { animation: none !important; } .mz-s-yes .mz-conf { opacity: 0; } }

html[data-motion="reduce"] .bg-route * { animation: none !important; }
@media (prefers-reduced-motion: reduce) { .bg-route * { animation: none !important; } }
html[data-saver="on"] .bg-route { display: none; }
/* Pages de commande et de paiement : décor plus discret pour ne pas distraire */
body[data-route="commande"] .bg-route, body[data-route="merci"] .bg-route { opacity: .5; }

/* ---------- Pack Noël (10/11/2026) : bandeau date limite, diapositive, idées cadeaux, code promo, « C'est pour offrir » ---------- */
.noel-bar { position: relative; z-index: 2; display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; padding: 8px 16px; background: linear-gradient(90deg, #0B1A33, #10264A 50%, #0B1A33); color: #fff; font-size: .84rem; text-decoration: none; border-bottom: 2px solid var(--mango); }
.noel-bar[hidden] { display: none; }
.noel-bar .ico { color: var(--mango); width: 18px; height: 18px; }
.noel-bar strong { color: var(--mango); }
.noel-bar .nb-cd { background: var(--mango); color: #10264A; font-weight: 700; border-radius: 6px; padding: 1px 8px; font-variant-numeric: tabular-nums; }
.noel-bar .nb-go { display: inline-flex; align-items: center; gap: 2px; text-decoration: underline; text-underline-offset: 3px; opacity: .9; }
.noel-bar:hover .nb-go { opacity: 1; }
.noel-bar.late { background: #1B2B45; border-bottom-color: #8A9BB8; }
@media (max-width: 560px) { .noel-bar { font-size: .78rem; gap: 6px; padding: 7px 12px; } .noel-bar .nb-go { display: none; } }
.theme-noel { background: radial-gradient(circle at 18% 22%, rgba(255,255,255,.10) 0 2px, transparent 3px) 0 0/46px 46px, radial-gradient(circle at 70% 60%, rgba(255,255,255,.08) 0 1.5px, transparent 2.5px) 0 0/64px 64px, linear-gradient(135deg, #0B1A33 0%, #10264A 55%, #1B3A6B 100%); color: #fff; }
.theme-noel .pill { background: var(--mango); color: #10264A; }
.theme-noel h2 { color: #fff; }
.theme-noel .o1 { background: var(--mango); } .theme-noel .o2 { background: var(--accent); } .theme-noel .o3 { background: #fff; opacity: .15; }
.theme-noel .btn.light { background: var(--mango); color: #10264A; border-color: var(--mango); }
.noel-cd { display: flex; align-items: baseline; gap: 4px; margin: 4px 0 14px; }
.noel-cd b { background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.25); border-radius: 8px; padding: 4px 9px; font-size: 1.15rem; font-variant-numeric: tabular-nums; min-width: 40px; text-align: center; color: var(--mango); }
.noel-cd i { font-style: normal; font-size: .75rem; opacity: .8; margin-right: 6px; }
.catnav a.gift-link { color: var(--mango); font-weight: 700; }
.catnav a.gift-link.active { background: var(--mango); color: #10264A; }
.gift-intro { display: flex; gap: 14px; align-items: center; background: var(--paper); border: 1px solid var(--line); border-left: 4px solid var(--mango); border-radius: var(--radius-sm); padding: 12px 16px; margin: 0 0 14px; }
.gift-intro p { margin: 0 0 4px; } .gift-intro .mz-scene { flex: 0 0 auto; }
.gift-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 10px; }
.gift-chips .lbl { font-size: .78rem; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; margin-right: 4px; }
.gift-chip { display: inline-flex; align-items: center; gap: 5px; padding: 6px 12px; border: 1px solid var(--line); border-radius: 999px; background: var(--paper); color: var(--ink); font-size: .84rem; text-decoration: none; }
.gift-chip:hover { border-color: var(--brand); }
.gift-chip.on { background: var(--brand); border-color: var(--brand); color: #fff; }
.gift-toggle { display: flex !important; gap: 10px; align-items: flex-start; margin-top: 16px; padding: 12px 14px; border: 1px dashed var(--mango); border-radius: var(--radius-sm); background: var(--mango-soft); cursor: pointer; font-weight: 400 !important; }
.gift-toggle input { margin-top: 3px; width: auto; }
.gift-toggle .ico { color: var(--mango-dark); width: 22px; height: 22px; flex: 0 0 auto; }
.gift-toggle small { display: block; color: var(--muted); font-size: .8rem; }
.gift-box { border: 1px solid var(--line); border-top: 0; border-radius: 0 0 var(--radius-sm) var(--radius-sm); padding: 4px 14px 12px; margin-top: -6px; }
.gift-recap { display: flex; gap: 10px; align-items: flex-start; margin-top: 12px; padding: 10px 12px; background: var(--mango-soft); border-radius: var(--radius-sm); font-size: .88rem; }
.gift-recap .ico { color: var(--mango-dark); width: 20px; height: 20px; flex: 0 0 auto; margin-top: 2px; }
.promo-box { margin-top: 14px; border-top: 1px solid var(--line-soft); padding-top: 10px; }
.promo-box summary { cursor: pointer; font-weight: 600; color: var(--link); display: flex; align-items: center; gap: 6px; }
.promo-row { display: flex; gap: 8px; margin-top: 8px; }
.promo-row input { flex: 1; text-transform: uppercase; letter-spacing: .05em; margin: 0; }
.err-txt { color: var(--err); font-weight: 600; }
.line.saving strong, .row.saving span:last-child { color: var(--accent); }
html[data-theme="dark"] .gift-toggle, html[data-theme="dark"] .gift-recap { background: rgba(255,179,0,.10); }
html[data-theme="dark"] .gift-toggle .ico, html[data-theme="dark"] .gift-recap .ico { color: var(--mango); }
html[data-theme="dark"] .gift-chip.on { background: #2D66D6; border-color: #2D66D6; }
/* Idées cadeaux : bandeau de 3 photos de Noël libres de droits (Unsplash) */
.gift-hero { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 8px; height: 200px; margin: 0 0 12px; border-radius: var(--radius); overflow: hidden; }
.gift-hero img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 640px) { .gift-hero { grid-template-columns: 1fr 1fr; height: 140px; } .gift-hero img:last-child { display: none; } }
html[data-theme="dark"] .gift-hero img { filter: brightness(.9); }
html[data-saver="on"] .gift-hero { display: none; }
.theme-noel .slide-visual img.amb { object-position: 50% 30%; }
/* « Petits prix » (10/11/2026) : étiquette sur les cartes, lien de la barre des rayons */
.pp-tag { align-self: flex-start; display: inline-flex; align-items: center; gap: 4px; font-size: .72rem; font-weight: 700; color: #0E8A66; background: #E3F6EE; border-radius: 6px; padding: 2px 7px; margin: 2px 0 2px; }
.pp-tag .ico { width: 13px; height: 13px; }
.catnav a.cheap-link { color: #B9CCFF; font-weight: 700; }
.catnav a.cheap-link.active { background: #1E56C2; color: #fff; }
html[data-theme="dark"] .pp-tag { background: rgba(14,138,102,.18); color: #5DE0A8; }