/* SANIYORO — identité bleu #0047AB + orange #FF9100 */
body.saniyoro {
  --accent: #ff9100;
  --accent-mid: #ffa733;
  --accent-hover: #e67e00;
  --accent-soft: #fff6eb;
  --brand-light: #eef5ff;
  --sy-navy: #0047ab;
  --sy-blue: #0073e6;
  --sy-orange: #ff9100;
  --sy-gold: #ff9100;
  --sy-gold-soft: #ffe8cc;
  --sy-shadow: 0 10px 30px rgba(0, 71, 171, 0.08);
  --sy-shadow-lg: 0 18px 48px rgba(0, 71, 171, 0.12);
}

.sy-fere-bar {
  --sy-fere-bar-h: 38px;
  position: sticky;
  top: 0;
  z-index: 210;
  background: linear-gradient(90deg, #071525 0%, #0f2844 48%, #071525 100%);
  color: rgba(255, 255, 255, 0.9);
  font-size: 0.78rem;
  padding: 0.4rem 0;
  border-bottom: 1px solid rgba(247, 127, 33, 0.22);
  box-shadow: 0 4px 18px rgba(10, 28, 48, 0.18);
}

.sy-fere-bar .container {
  width: min(1680px, 98%);
  max-width: none;
}

.sy-fere-bar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.85rem;
  min-height: var(--sy-fere-bar-h);
}

.sy-fere-bar-msg {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  margin: 0;
  min-width: 0;
  flex: 1 1 auto;
}

.sy-fere-bar-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  flex-shrink: 0;
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
  background: rgba(247, 127, 33, 0.14);
  border: 1px solid rgba(247, 127, 33, 0.35);
  color: #ffc48a;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.sy-fere-bar-text {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sy-fere-bar-text strong {
  color: #fff;
  font-weight: 800;
}

.sy-fere-bar-back {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  flex-shrink: 0;
  padding: 0.32rem 0.75rem;
  border-radius: 999px;
  background: rgba(247, 127, 33, 0.12);
  border: 1px solid rgba(247, 127, 33, 0.32);
  color: #ffb366 !important;
  font-weight: 700;
  font-size: 0.76rem;
  text-decoration: none;
  transition: background 0.2s, color 0.2s, transform 0.2s;
}

.sy-fere-bar-back:hover {
  background: var(--sy-orange);
  color: #fff !important;
  transform: translateY(-1px);
  text-decoration: none;
}

body.saniyoro.page-home {
  background:
    radial-gradient(900px 420px at 0% -5%, rgba(247, 127, 33, 0.07), transparent 55%),
    radial-gradient(700px 360px at 100% 0%, rgba(10, 28, 48, 0.05), transparent 50%),
    var(--bg);
}

/* ——— Header ——— */
body.saniyoro .site-header.sy-header {
  position: sticky;
  top: 0;
  z-index: 200;
  height: auto;
  background: #fff;
  border-bottom: 1px solid var(--border);
  box-shadow: 0 2px 12px rgba(10, 28, 48, 0.06);
  /* Ne pas laisser app.css créer un containing block (menu fixed invisible) */
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  transition: box-shadow 0.25s ease, border-color 0.25s ease;
}

body.saniyoro.fere-suite .site-header.sy-header {
  top: var(--sy-fere-bar-h, 38px);
}

body.saniyoro .site-header.sy-header.is-scrolled {
  box-shadow: 0 8px 28px rgba(10, 28, 48, 0.1);
  border-bottom-color: rgba(247, 127, 33, 0.18);
}

@media (min-width: 1025px) {
  body.saniyoro .site-header.sy-header {
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
  }
}

body.saniyoro .sy-header > .container,
body.saniyoro .sy-toolbar > .container,
body.saniyoro .sy-header-shell {
  width: min(1680px, 98%);
  max-width: none;
}

/* En-tête v2 — une seule barre compacte */
body.saniyoro .sy-header-v2 {
  --header-h: 76px;
  background: linear-gradient(180deg, #fff 0%, #fafbfd 100%);
}

body.saniyoro .sy-header-shell {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.65rem 0.85rem;
  min-height: var(--header-h);
  padding: 0.55rem 0;
}

body.saniyoro .sy-header-brand {
  max-width: 220px;
}

body.saniyoro .sy-header-brand--full {
  max-width: none;
}

body.saniyoro .sy-brand-logo-full {
  width: auto;
  height: clamp(44px, 11vw, 56px);
  max-width: min(120px, 24vw);
  min-width: 0;
  border-radius: 0;
  object-fit: contain;
  object-position: left center;
  display: block;
}

.sy-footer-logo--full {
  align-items: flex-start;
}

.sy-footer-logo--full .sy-brand-logo-full {
  height: 56px;
  max-width: min(120px, 40vw);
  width: auto;
  object-fit: contain;
}

body.saniyoro .sy-header-search {
  flex: 1 1 240px;
  min-width: 0;
  max-width: min(380px, 42vw);
  order: 2;
  background: #fff;
  border: 1.5px solid #dce4ef;
  border-radius: 999px;
  box-shadow: inset 0 1px 2px rgba(10, 28, 48, 0.04);
}

body.saniyoro .sy-header-search:focus-within {
  border-color: rgba(0, 115, 230, 0.55);
  box-shadow: 0 0 0 3px rgba(0, 115, 230, 0.12);
}

body.saniyoro .sy-header-search .sy-search-submit {
  border-radius: 999px;
  padding: 0.45rem 1rem;
  font-size: 0.82rem;
  gap: 0.35rem;
}

body.saniyoro .sy-header-search .sy-search-submit i {
  display: none;
}

body.saniyoro .sy-header-brand {
  order: 1;
}

body.saniyoro .sy-header-commune {
  flex-shrink: 0;
  order: 3;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 0.35rem 0.65rem;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--sy-navy);
}

body.saniyoro .sy-header-commune select {
  max-width: 7.5rem;
  font-weight: 700;
  color: var(--sy-navy);
}

body.saniyoro .sy-header-nav {
  display: flex;
  align-items: center;
  gap: 0.15rem 0.35rem;
  flex-wrap: nowrap;
  order: 4;
  margin-left: auto;
}

body.saniyoro .sy-header-actions {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  flex-shrink: 0;
  order: 5;
}

body.saniyoro .sy-header-login--drawer {
  display: none;
}

body.saniyoro .sy-header-toggle {
  order: 6;
}

body.nav-open .sy-header-toggle span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
body.nav-open .sy-header-toggle span:nth-child(2) {
  opacity: 0;
}
body.nav-open .sy-header-toggle span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

body.saniyoro .sy-header-toggle span {
  transition: transform 0.2s ease, opacity 0.2s ease;
}

body.saniyoro .sy-nav-link {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.4rem 0.55rem !important;
  border-radius: 10px;
  font-size: 0.82rem !important;
  font-weight: 600 !important;
  color: var(--muted) !important;
  white-space: nowrap;
}

body.saniyoro .sy-nav-link::after {
  display: none !important;
}

body.saniyoro .sy-nav-link i {
  font-size: 1rem;
  opacity: 0.85;
}

body.saniyoro .sy-nav-link span {
  display: none;
}

body.saniyoro .sy-nav-link.is-active,
body.saniyoro .sy-nav-link:hover {
  background: rgba(247, 127, 33, 0.1);
  color: var(--sy-orange) !important;
}

body.saniyoro .sy-header-login {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.42rem 0.85rem;
  border-radius: 999px;
  border: 1.5px solid var(--sy-navy);
  background: transparent;
  color: var(--sy-navy) !important;
  font-size: 0.82rem;
  font-weight: 700;
  white-space: nowrap;
}

body.saniyoro .sy-header-login:hover {
  background: var(--sy-navy);
  color: #fff !important;
}

body.saniyoro .sy-header-login::after {
  display: none !important;
}

body.saniyoro .sy-header-cart {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 12px;
  background: var(--sy-orange);
  color: #fff !important;
  font-size: 1.15rem;
  box-shadow: 0 4px 14px rgba(247, 127, 33, 0.35);
  transition: transform 0.2s, background 0.2s;
}

body.saniyoro .sy-header-cart:hover {
  background: var(--accent-hover);
  transform: translateY(-1px);
  color: #fff !important;
}

body.saniyoro .sy-header-cart::after {
  display: none !important;
}

body.saniyoro .sy-header-cart .cart-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 1.1rem;
  height: 1.1rem;
  padding: 0 0.25rem;
  border-radius: 999px;
  font-size: 0.62rem;
  line-height: 1.1rem;
  background: var(--sy-navy);
}

body.saniyoro .sy-header-toggle {
  display: none;
}

@media (min-width: 1025px) {
  body.saniyoro .sy-header-v2 {
    --header-h: 72px;
  }

  body.saniyoro .sy-header-shell {
    display: grid;
    grid-template-columns: auto minmax(220px, 1fr) auto auto auto;
    grid-template-areas: "brand search commune nav actions";
    align-items: center;
    gap: 0.65rem 1rem;
    padding: 0.6rem 0;
  }

  body.saniyoro .sy-header-brand {
    grid-area: brand;
    order: unset;
    max-width: none;
    flex-shrink: 0;
  }

  body.saniyoro .sy-brand-logo-full {
    width: auto;
    height: 56px;
    max-width: 120px;
    min-width: 0;
    border-radius: 0;
  }

  body.saniyoro .sy-header-search {
    grid-area: search;
    order: unset;
    width: 100%;
    max-width: none;
    flex: none;
    min-width: 0;
  }

  body.saniyoro .sy-header-search input[type="search"] {
    min-width: 0;
  }

  body.saniyoro .sy-header-search .sy-search-submit span {
    display: inline;
  }

  body.saniyoro .sy-header-search .sy-search-submit {
    width: auto;
    height: auto;
    padding: 0.45rem 1rem;
    justify-content: center;
  }

  body.saniyoro .sy-header-search .sy-search-submit i {
    display: none;
  }

  body.saniyoro .sy-header-commune {
    grid-area: commune;
    order: unset;
  }

  body.saniyoro .sy-header-nav {
    grid-area: nav;
    order: unset;
    display: flex;
    margin-left: 0;
    justify-content: flex-end;
    gap: 0.2rem;
    padding: 0;
    margin-top: 0;
    border-top: 0;
  }

  body.saniyoro .sy-header-actions {
    grid-area: actions;
    order: unset;
    justify-self: end;
    flex-shrink: 0;
  }

  body.saniyoro .sy-header-login--drawer {
    display: none !important;
  }

  body.saniyoro .sy-nav-link span {
    display: inline;
  }

  body.saniyoro .sy-nav-link {
    padding: 0.4rem 0.75rem !important;
    border-radius: 999px;
    font-size: 0.84rem !important;
  }
}

@media (min-width: 1025px) and (max-width: 1280px) {
  body.saniyoro .sy-brand-logo-full {
    height: 48px;
    max-width: 108px;
    min-width: 0;
  }

  body.saniyoro .sy-header-shell {
    grid-template-columns: auto minmax(180px, 1fr) auto auto;
    grid-template-areas:
      "brand search commune actions"
      ". nav nav nav";
    row-gap: 0.35rem;
  }

  body.saniyoro .sy-header-nav {
    justify-content: flex-start;
    padding-top: 0.35rem;
    border-top: 1px solid rgba(10, 28, 48, 0.06);
  }
}

@media (min-width: 1200px) {
  body.saniyoro .sy-nav-link span {
    display: inline;
  }
}

@media (max-width: 1024px) {
  body.saniyoro {
    --header-h: 118px;
  }

  body.saniyoro .sy-header-v2 {
    --header-h: 118px;
  }

  body.saniyoro .sy-header-shell {
    flex-wrap: wrap;
  }

  body.saniyoro .sy-header-brand {
    flex: 0 0 auto;
  }

  body.saniyoro .sy-header-search {
    flex: 1 1 160px;
    order: 2;
  }

  body.saniyoro .sy-header-actions {
    order: 3;
    margin-left: auto;
  }

  body.saniyoro .sy-header-login--toolbar {
    display: none;
  }

  body.saniyoro .sy-header-login--drawer {
    display: inline-flex;
  }

  body.saniyoro .sy-header-toggle {
    display: inline-flex;
    position: relative;
    z-index: 175;
  }

  body.nav-open .site-header.sy-header {
    z-index: 170;
  }

  body.saniyoro .sy-header-commune {
    order: 5;
    flex: 1 1 100%;
  }

  body.saniyoro .sy-header-nav {
    order: 6;
    margin-left: 0;
    display: none;
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: 160;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 0;
    padding: calc(var(--header-h, 148px) + 0.85rem) 1.15rem calc(2rem + env(safe-area-inset-bottom, 0px));
    background: #fff;
    border: 0;
    box-shadow: none;
    max-height: none;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  body.saniyoro .sy-header-nav.is-open {
    display: flex;
  }

  body.saniyoro .nav-backdrop {
    position: fixed;
    inset: 0;
    z-index: 155;
    border: 0;
    padding: 0;
    margin: 0;
    background: rgba(10, 28, 48, 0.48);
  }

  body.nav-open {
    overflow: hidden;
  }

  body.nav-open .sy-mobile-tabbar {
    visibility: hidden;
    pointer-events: none;
  }

  body.saniyoro .sy-nav-link {
    padding: 0.95rem 0.4rem !important;
    border-bottom: 1px solid var(--border);
    border-radius: 0;
    font-size: 1.02rem !important;
  }

  body.saniyoro .sy-nav-link span {
    display: inline;
  }

  body.saniyoro .sy-header-login {
    margin: 0.75rem 0;
    justify-content: center;
  }

  body.saniyoro .sy-header-cart {
    width: 2.35rem;
    height: 2.35rem;
  }

  body.saniyoro .sy-header-search .sy-search-submit span {
    display: none;
  }

  body.saniyoro .sy-header-search .sy-search-submit {
    width: 2.35rem;
    height: 2.35rem;
    padding: 0;
    justify-content: center;
  }

  body.saniyoro .sy-header-search .sy-search-submit i {
    display: inline;
  }
}

body.saniyoro .sy-brand-logo:not(.sy-brand-logo-full) {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  object-fit: contain;
  flex-shrink: 0;
}

body.saniyoro .sy-header-brand--full.logo {
  max-width: none;
  flex: 0 0 auto;
}

body.saniyoro .logo-text strong {
  color: var(--sy-navy);
  font-size: 0.92rem;
  letter-spacing: 0.04em;
}

body.saniyoro .logo-text span {
  color: var(--muted);
  font-size: 0.72rem;
}

body.saniyoro .sy-logo-mark {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: var(--sy-navy);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.2rem;
  box-shadow: 0 4px 14px rgba(10, 28, 48, 0.2);
}

.sy-bo-brand {
  display: block;
  margin-bottom: 0.35rem;
}

.sy-bo-brand .sy-brand-logo {
  background: rgba(255, 255, 255, 0.08);
  padding: 3px;
}

body.saniyoro .nav a {
  font-weight: 600;
  font-size: 0.9rem;
}

body.saniyoro .nav a.is-active,
body.saniyoro .nav a:hover {
  color: var(--sy-orange);
}

body.saniyoro .nav a.is-active::after,
body.saniyoro .nav a:hover::after {
  background: var(--sy-orange);
}

body.saniyoro .nav-login {
  border-radius: 999px;
  padding: 0.45rem 0.95rem !important;
  font-weight: 700;
  border: 1.5px solid var(--sy-orange) !important;
  background: #fff !important;
  color: var(--sy-orange) !important;
  box-shadow: none;
}

body.saniyoro .nav-login:hover {
  background: var(--accent-soft) !important;
  border-color: var(--accent-hover) !important;
  color: var(--accent-hover) !important;
}

body.saniyoro .cart-link {
  border-radius: 999px;
  padding: 0.45rem 0.95rem !important;
  font-weight: 700;
  background: var(--sy-orange);
  border: 0;
  color: #fff !important;
  box-shadow: 0 4px 14px rgba(247, 127, 33, 0.35);
}

body.saniyoro .cart-link:hover {
  background: var(--accent-hover);
  color: #fff !important;
}

body.saniyoro .cart-badge {
  background: var(--sy-navy);
  color: #fff;
}

.sy-toolbar {
  border-top: 1px solid var(--border);
  background: #f4f6f9;
  padding: 0.7rem 0;
}

.sy-toolbar-inner {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  flex-wrap: wrap;
}

.sy-search-form {
  flex: 1 1 320px;
  display: flex;
  align-items: center;
  gap: 0.55rem;
  min-width: 0;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 0.35rem 0.45rem 0.35rem 0.85rem;
  box-shadow: 0 1px 4px rgba(10, 28, 48, 0.05);
  transition: border-color 0.2s, box-shadow 0.2s;
}

.sy-search-form:focus-within {
  border-color: var(--sy-orange);
  box-shadow: 0 0 0 3px rgba(247, 127, 33, 0.15);
}

.sy-search-icon { color: var(--sy-orange); font-size: 1.05rem; flex-shrink: 0; }

.sy-search-form input[type="search"] {
  flex: 1;
  min-width: 0;
  border: 0;
  background: transparent;
  padding: 0.5rem 0;
  outline: none;
  font-size: 0.95rem;
}

.sy-search-submit {
  border: 0;
  border-radius: 8px;
  padding: 0.55rem 1.1rem;
  background: var(--sy-orange);
  color: #fff;
  font-size: 0.85rem;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  transition: transform 0.15s, background 0.15s;
}

.sy-search-submit:hover {
  background: var(--accent-hover);
  transform: translateY(-1px);
}

.sy-search-image {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 8px;
  background: var(--accent-soft);
  color: var(--sy-orange);
  border: 1px solid rgba(247, 127, 33, 0.25);
  cursor: pointer;
  flex-shrink: 0;
  transition: all 0.2s;
  position: relative;
  overflow: hidden;
}

.sy-search-image:hover {
  background: var(--sy-orange);
  color: #fff;
  border-color: var(--sy-orange);
}

.sy-search-image input[type="file"] {
  position: absolute;
  inset: 0;
  opacity: 0;
  width: 100%;
  height: 100%;
  cursor: pointer;
  font-size: 0;
}

.sy-commune-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 0.55rem 0.9rem;
  font-size: 0.85rem;
  box-shadow: 0 1px 4px rgba(10, 28, 48, 0.05);
  flex-shrink: 0;
}

.sy-commune-pill i { color: var(--sy-orange); }

.sy-commune-pill select {
  border: 0;
  background: transparent;
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--text);
  cursor: pointer;
  outline: none;
  max-width: 150px;
}

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

/* ——— Hero accueil ——— */
.sy-hero-wrap {
  margin: 0 calc(50% - 50vw) 0;
  width: 100vw;
  background: linear-gradient(165deg, #0047ab 0%, #003580 55%, #002a66 100%);
  color: #fff;
  padding: clamp(2rem, 5vw, 3.5rem) 0 clamp(2rem, 4vw, 3rem);
  border-radius: 0 0 28px 28px;
  box-shadow: var(--sy-shadow-lg);
  overflow: hidden;
  position: relative;
  min-height: clamp(440px, 62vh, 580px);
}

.sy-hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.sy-hero-bg-slide {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  transition: opacity 1s ease;
  pointer-events: none;
}

.sy-hero-bg-slide.is-active {
  opacity: 1;
}

.sy-hero-bg-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

.sy-hero-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(105deg, rgba(10, 28, 48, 0.92) 0%, rgba(10, 28, 48, 0.8) 40%, rgba(247, 127, 33, 0.35) 100%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60'%3E%3Cpath d='M0 30h60M30 0v60' stroke='%23ffffff0a'/%3E%3C/svg%3E");
}

.sy-hero-inner {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: clamp(380px, 54vh, 500px);
  max-width: 680px;
}

.sy-hero-kicker {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.35rem 0.75rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.2);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.sy-hero-copy h1 {
  margin: 0.85rem 0 0;
  font-family: var(--font-display);
  font-size: clamp(2rem, 5vw, 3.2rem);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.02em;
}

.sy-hero-copy h1 em {
  font-style: normal;
  color: var(--sy-gold);
}

.sy-hero-lead {
  margin: 0.85rem 0 0;
  max-width: 34rem;
  font-size: clamp(0.95rem, 2vw, 1.05rem);
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.88);
}

.sy-hero-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 1.1rem;
}

.sy-hero-chips span {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.4rem 0.75rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.1);
  font-size: 0.82rem;
  font-weight: 600;
}

.sy-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
  margin-top: 1.35rem;
}

.sy-btn-hero-primary,
.sy-btn-hero-secondary {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.75rem 1.15rem;
  border-radius: 12px;
  font-weight: 700;
  font-size: 0.92rem;
  text-decoration: none;
  transition: transform 0.15s, box-shadow 0.15s;
}

.sy-btn-hero-primary {
  background: var(--sy-orange);
  color: #fff;
  box-shadow: 0 8px 24px rgba(247, 127, 33, 0.35);
}

.sy-btn-hero-primary:hover {
  transform: translateY(-2px);
  background: var(--accent-hover);
  color: #fff;
}

.sy-btn-hero-secondary {
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.35);
}

.sy-btn-hero-secondary:hover {
  background: rgba(255, 255, 255, 0.16);
  transform: translateY(-2px);
}

.sy-pay-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin-top: 1.25rem;
}

.sy-pay-strip span {
  padding: 0.28rem 0.6rem;
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.18);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.sy-hero-dots {
  display: flex;
  justify-content: flex-start;
  gap: 0.4rem;
  margin-top: 1.5rem;
}

.sy-hero-dots button {
  width: 8px;
  height: 8px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.35);
  cursor: pointer;
  transition: width 0.25s, background 0.25s;
}

.sy-hero-dots button.is-active {
  width: 22px;
  background: var(--sy-gold);
}

.sy-hero-card {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  width: 120px;
  height: 120px;
  border-radius: 22px;
  color: #fff;
  box-shadow: var(--sy-shadow-lg);
  border: 1px solid rgba(255, 255, 255, 0.18);
  animation: sy-float 6s ease-in-out infinite;
}

.sy-hero-card i { font-size: 2rem; }
.sy-hero-card small { font-size: 0.75rem; font-weight: 700; opacity: 0.92; }

.sy-hero-card--1 { top: 8%; left: 8%; animation-delay: 0s; }
.sy-hero-card--2 { top: 4%; right: 10%; animation-delay: 1s; }
.sy-hero-card--3 { bottom: 12%; left: 18%; animation-delay: 2s; }
.sy-hero-card--4 { bottom: 8%; right: 6%; animation-delay: 0.5s; }

@keyframes sy-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

/* Tons visuels produits / hero */
.tone-food { background: linear-gradient(145deg, #1a7a4a, #2d9b62); }
.tone-tech { background: linear-gradient(145deg, #1e4a8a, #2d6bc4); }
.tone-resto { background: linear-gradient(145deg, #b45309, #ea580c); }
.tone-mode { background: linear-gradient(145deg, #7c3aed, #a78bfa); }
.tone-beaute { background: linear-gradient(145deg, #be185d, #ec4899); }
.tone-electro { background: linear-gradient(145deg, #0f766e, #14b8a6); }
.tone-maison { background: linear-gradient(145deg, #475569, #64748b); }
.tone-boul { background: linear-gradient(145deg, #ca8a04, #eab308); }
.tone-frais { background: linear-gradient(145deg, #15803d, #4ade80); }
.tone-bebe { background: linear-gradient(145deg, #db2777, #f472b6); }
.tone-auto { background: linear-gradient(145deg, #374151, #6b7280); }
.tone-pharma { background: linear-gradient(145deg, #0369a1, #38bdf8); }
.tone-artisan { background: linear-gradient(145deg, #92400e, #d97706); }
.tone-default { background: linear-gradient(145deg, var(--accent), var(--accent-mid)); }

/* ——— Trust strip ——— */
.sy-trust-strip {
  margin-top: -1.25rem;
  position: relative;
  z-index: 2;
  padding: 0 0 1.5rem;
}

.sy-trust-strip-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.45fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: 0.5rem 0.75rem;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 0.85rem 1rem;
  box-shadow: var(--sy-shadow);
  max-width: 1060px;
  margin: 0 auto;
}

.sy-trust-pill {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.65rem 0.75rem;
  border-radius: 12px;
  transition: background 0.2s;
}

.sy-trust-pill:hover { background: var(--accent-soft); }

.sy-trust-pill > i {
  width: 42px;
  height: 42px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: var(--accent);
  color: #fff;
  font-size: 1.1rem;
}

.sy-trust-pill strong {
  display: block;
  font-size: 0.88rem;
  color: var(--sy-navy);
}

.sy-trust-pill span {
  display: block;
  font-size: 0.76rem;
  color: var(--muted);
  line-height: 1.3;
}

/* ——— Sections ——— */
.sy-section {
  padding: 1.75rem 0 2rem;
}

.sy-section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.25rem;
}

.sy-section-kicker {
  margin: 0 0 0.2rem;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent-mid);
}

.sy-section-head .section-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 2.5vw, 1.65rem);
}

.sy-section-sub {
  margin: 0.35rem 0 0;
  font-size: 0.88rem;
  color: var(--muted, #5b6b7f);
}

.sy-see-all {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.5rem 0.9rem;
  border-radius: 999px;
  background: #fff;
  border: 1px solid var(--border);
  color: var(--sy-navy);
  font-size: 0.85rem;
  font-weight: 700;
  text-decoration: none;
  box-shadow: var(--shadow-sm);
  transition: all 0.2s;
  white-space: nowrap;
}

.sy-see-all:hover {
  background: var(--sy-orange);
  color: #fff;
  border-color: var(--sy-orange);
  transform: translateY(-1px);
}

/* Secteurs grille */
.sy-sectors-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(108px, 1fr));
  gap: 0.75rem;
}

.sy-sector-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.55rem;
  padding: 1rem 0.65rem;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 16px;
  text-decoration: none;
  color: inherit;
  text-align: center;
  transition: all 0.2s var(--ease);
  box-shadow: var(--shadow-sm);
}

.sy-sector-tile:hover {
  border-color: #b8dcc8;
  transform: translateY(-3px);
  box-shadow: var(--sy-shadow);
}

.sy-sector-tile-icon {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--accent-soft);
  color: var(--sy-orange);
  border: 2px solid rgba(247, 127, 33, 0.35);
  font-size: 1.35rem;
  transition: all 0.2s;
}

.sy-sector-tile:hover .sy-sector-tile-icon {
  background: var(--sy-orange);
  border-color: var(--sy-orange);
  color: #fff;
}

/* Secteurs — carrousel auto une ligne */
.sy-sectors-marquee {
  position: relative;
  overflow: hidden;
  margin: 0 calc(50% - 50vw);
  width: 100vw;
  padding: 0.15rem 0;
}

.sy-sectors-track .sy-sector-tile {
  flex: 0 0 118px;
  scroll-snap-align: start;
}

.sy-sectors-track .sy-sector-tile-icon {
  width: 56px;
  height: 56px;
  font-size: 1.25rem;
}

.sy-sectors-track .sy-sector-tile-label {
  font-size: 0.78rem;
  line-height: 1.25;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.sy-sectors-marquee::before,
.sy-sectors-marquee::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 2.5rem;
  z-index: 2;
  pointer-events: none;
}

.sy-sectors-marquee::before {
  left: 0;
  background: linear-gradient(to right, var(--bg) 30%, transparent);
}

.sy-sectors-marquee::after {
  right: 0;
  background: linear-gradient(to left, var(--bg) 30%, transparent);
}

/* Auto-scroll tracks (secteurs + resto + visités) */
.sy-sectors-track,
.sy-food-track,
.sy-visited-track,
.sy-stores-track {
  display: flex;
  gap: 0.85rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -ms-overflow-style: none;
  cursor: grab;
  padding: 0.35rem max(1rem, calc((100vw - 1100px) / 2));
}

.sy-stores-track {
  gap: clamp(1rem, 2vw, 1.25rem);
  padding: 0;
  cursor: default;
}

.sy-sectors-track::-webkit-scrollbar,
.sy-food-track::-webkit-scrollbar,
.sy-visited-track::-webkit-scrollbar,
.sy-stores-track::-webkit-scrollbar {
  display: none;
}

.sy-sectors-track.is-dragging,
.sy-food-track.is-dragging,
.sy-visited-track.is-dragging,
.sy-stores-track.is-dragging {
  cursor: grabbing;
}

.home-cats-marquee-inner {
  display: flex;
  gap: inherit;
  width: max-content;
}

.sy-sectors-track.is-auto-scroll,
.sy-food-track.is-auto-scroll,
.sy-visited-track.is-auto-scroll,
.sy-stores-track.is-auto-scroll {
  scroll-snap-type: none;
  overflow-x: auto;
}

.sy-stores-marquee {
  position: relative;
  overflow: hidden;
  width: 100%;
}

.sy-stores-marquee::before,
.sy-stores-marquee::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 1.75rem;
  z-index: 2;
  pointer-events: none;
}

.sy-stores-marquee::before {
  left: 0;
  background: linear-gradient(to right, var(--bg, #f1f2f4) 35%, transparent);
}

.sy-stores-marquee::after {
  right: 0;
  background: linear-gradient(to left, var(--bg, #f1f2f4) 35%, transparent);
}

.sy-stores-track.is-marquee-css .home-cats-marquee-inner {
  gap: clamp(1rem, 2vw, 1.25rem);
}

.sy-stores-track.is-marquee-css .home-cats-marquee-inner > .sy-store-card,
.sy-stores-track.is-marquee-css .home-cats-marquee-inner > .sy-dokan-list-card {
  flex: 0 0 var(--store-slide-w, calc((100% - 2.5rem) / 3));
  width: var(--store-slide-w, calc((100% - 2.5rem) / 3));
  max-width: none;
  min-width: 0;
  scroll-snap-align: start;
}

@media (prefers-reduced-motion: no-preference) {
  .sy-sectors-track.is-marquee-css,
  .sy-food-track.is-marquee-css,
  .sy-visited-track.is-marquee-css,
  .tsf-cats-track.is-marquee-css,
  .sy-stores-track.is-marquee-css {
    overflow: hidden;
    display: block;
    cursor: default;
  }

  .sy-sectors-track.is-marquee-css .home-cats-marquee-inner,
  .sy-food-track.is-marquee-css .home-cats-marquee-inner,
  .sy-visited-track.is-marquee-css .home-cats-marquee-inner,
  .tsf-cats-track.is-marquee-css .home-cats-marquee-inner,
  .sy-stores-track.is-marquee-css .home-cats-marquee-inner {
    animation: sy-marquee-scroll var(--marquee-duration, 36s) linear infinite;
    will-change: transform;
  }

  .sy-sectors-track.is-marquee-css:hover .home-cats-marquee-inner,
  .sy-food-track.is-marquee-css:hover .home-cats-marquee-inner,
  .sy-visited-track.is-marquee-css:hover .home-cats-marquee-inner,
  .tsf-cats-track.is-marquee-css:hover .home-cats-marquee-inner,
  .sy-stores-track.is-marquee-css:hover .home-cats-marquee-inner {
    animation-play-state: paused;
  }
}

@keyframes sy-marquee-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* Produits les plus visités — carrousel */
.sy-visited-section {
  background:
    radial-gradient(680px 260px at 100% 0%, rgba(13, 122, 79, 0.07), transparent 55%),
    radial-gradient(560px 220px at 0% 50%, rgba(12, 35, 64, 0.05), transparent 50%);
}

.sy-visited-marquee {
  position: relative;
  overflow: hidden;
  margin: 0 calc(50% - 50vw);
  width: 100vw;
  padding: 0.15rem 0 0.35rem;
}

.sy-visited-marquee::before,
.sy-visited-marquee::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 2.5rem;
  z-index: 2;
  pointer-events: none;
}

.sy-visited-marquee::before {
  left: 0;
  background: linear-gradient(to right, var(--bg) 30%, transparent);
}

.sy-visited-marquee::after {
  right: 0;
  background: linear-gradient(to left, var(--bg) 30%, transparent);
}

.sy-visited-slide {
  flex: 0 0 240px;
  scroll-snap-align: start;
}

.sy-visited-slide .sy-product-card {
  height: 100%;
}

.sy-shops-section {
  background:
    radial-gradient(720px 280px at 0% 100%, rgba(0, 71, 171, 0.05), transparent 55%);
}

.sy-products-section {
  background:
    radial-gradient(700px 260px at 50% 0%, rgba(201, 162, 39, 0.05), transparent 55%);
  padding-bottom: 2.5rem;
}

/* Restaurants & alimentation — carrousel produits */
.sy-food-section {
  padding-top: 0.5rem;
  background:
    radial-gradient(700px 280px at 0% 0%, rgba(180, 83, 9, 0.06), transparent 55%),
    radial-gradient(600px 240px at 100% 40%, rgba(13, 122, 79, 0.05), transparent 50%);
}

.sy-food-marquee {
  position: relative;
  overflow: hidden;
  margin: 0 calc(50% - 50vw);
  width: 100vw;
  padding: 0.25rem 0 0.5rem;
}

.sy-food-marquee::before,
.sy-food-marquee::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 2.5rem;
  z-index: 2;
  pointer-events: none;
}

.sy-food-marquee::before {
  left: 0;
  background: linear-gradient(to right, var(--bg) 25%, transparent);
}

.sy-food-marquee::after {
  right: 0;
  background: linear-gradient(to left, var(--bg) 25%, transparent);
}

.sy-food-slide {
  flex: 0 0 min(220px, 72vw);
  scroll-snap-align: start;
  min-width: 0;
}

.sy-food-slide .sy-product-card {
  height: 100%;
  margin: 0;
}

.sy-food-slide .sy-card-visual {
  aspect-ratio: 1;
}

/* Fiche produit — zoom Amazon + commerce */
.sy-product-detail.product-detail {
  padding: 1.25rem 0 1.5rem;
}

.sy-product-media-col {
  position: relative;
  min-width: 0;
}

.sy-product-commerce .sy-product-kicker {
  margin: 0 0 0.35rem;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent-mid);
}

.sy-product-title {
  margin: 0 0 0.35rem;
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 2.5vw, 1.85rem);
  font-weight: 800;
  color: var(--sy-navy);
  line-height: 1.15;
}

.sy-product-ref {
  margin: 0 0 0.5rem;
  font-size: 0.85rem;
  color: var(--muted);
}

.sy-pd-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem 0.85rem;
  margin-bottom: 0.55rem;
  font-size: 0.85rem;
  color: var(--muted);
}

.sy-pd-meta .sy-stock-badge {
  margin: 0;
}

.sy-pd-price {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.45rem 0.65rem;
  margin-bottom: 0.55rem;
}

.sy-pd-price .sy-price-lg {
  margin: 0;
  font-size: 1.65rem;
  font-weight: 800;
  color: var(--sy-navy);
}

.sy-promo-badge {
  display: inline-block;
  padding: 0.22rem 0.55rem;
  border-radius: 999px;
  background: #fef3c7;
  color: #b45309;
  font-size: 0.72rem;
  font-weight: 800;
}

.sy-price-old {
  font-size: 0.95rem;
  color: var(--muted);
}

.sy-product-desc.pd-desc {
  margin: 0 0 0.65rem;
  font-size: 0.9rem;
  line-height: 1.5;
}

.sy-product-seller {
  margin-bottom: 0.35rem !important;
}

.sy-pd-buy {
  display: flex;
  gap: 0.55rem;
  align-items: stretch;
  margin: 0.75rem 0 0.55rem;
}

.sy-qty-input {
  width: 72px !important;
  min-width: 72px;
  flex: 0 0 72px;
  text-align: center;
  padding: 0.65rem 0.5rem;
  border: 1px solid var(--border);
  border-radius: 10px;
  font-weight: 700;
}

.sy-pd-buy .sy-add-btn {
  flex: 1;
  justify-content: center;
  margin: 0;
}

.sy-product-actions-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  margin: 0 0 0.75rem;
}

.sy-pd-barcode {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: 240px;
  margin: 0 0 0.85rem;
  padding: 0.5rem 0.75rem 0.35rem;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: #fff;
  cursor: pointer;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.sy-pd-barcode:hover,
.sy-pd-barcode:focus-visible {
  border-color: var(--accent-mid);
  box-shadow: 0 0 0 3px rgba(13, 122, 79, 0.12);
  outline: none;
}

.sy-pd-barcode svg {
  display: block;
  max-width: 100%;
  height: auto;
}

.sy-logo-link {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  text-decoration: none;
  min-width: 0;
}

.sy-brand-logo {
  width: clamp(40px, 10vw, 48px);
  height: clamp(40px, 10vw, 48px);
  object-fit: contain;
  border-radius: 14px;
  flex-shrink: 0;
  display: block;
  background: transparent;
}

.sy-brand-logo-sm {
  width: 36px;
  height: 36px;
  border-radius: 10px;
}

.sy-brand-logo-auth {
  width: 56px;
  height: 56px;
  border-radius: 16px;
  background: #fff;
  padding: 4px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
}

.sy-product-rating {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  margin: 0.35rem 0 0.5rem;
}

.sy-product-rating a {
  text-decoration: none;
}

.sy-product-reviews {
  margin-top: 1.75rem;
}

.sy-pay-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin-bottom: 0.5rem;
}

.sy-pay-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  padding: 0.35rem 0.55rem;
  min-height: 34px;
  border-radius: 10px;
  background: #fff;
  border: 1px solid rgba(12, 35, 64, 0.08);
  box-shadow: 0 2px 8px rgba(12, 35, 64, 0.04);
  font-size: 0.72rem;
  font-weight: 700;
}

.sy-pay-logo {
  display: block;
  height: 22px;
  width: auto;
  max-width: 88px;
  object-fit: contain;
}

.sy-pay-wave {
  border-color: rgba(29, 196, 255, 0.25);
  background: linear-gradient(180deg, #f0fbff, #fff);
}

.sy-pay-orange {
  border-color: rgba(255, 121, 0, 0.25);
  background: linear-gradient(180deg, #fff7f0, #fff);
}

.sy-pay-cash {
  color: var(--accent);
  background: linear-gradient(180deg, var(--accent-soft), #fff);
  border-color: rgba(13, 122, 79, 0.18);
  padding-inline: 0.75rem;
}

.sy-commerce-card {
  background: linear-gradient(180deg, #fff, #f8fafb);
  border: 1px solid rgba(12, 35, 64, 0.08);
  border-radius: 14px;
  box-shadow: 0 4px 16px rgba(12, 35, 64, 0.05);
}

.sy-commerce-card strong {
  color: var(--sy-navy);
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.sy-commerce-card strong i {
  color: var(--accent);
}

.sy-commerce-card a {
  color: var(--accent);
  font-weight: 600;
  text-decoration: none;
}

.sy-commerce-card a:hover {
  text-decoration: underline;
}

/* ——— Avis produit ——— */
body.saniyoro .sy-product-reviews .panel {
  background: #fff;
  border: 1px solid rgba(12, 35, 64, 0.08);
  border-radius: 16px;
  box-shadow: var(--sy-shadow);
  padding: 1.1rem 1.15rem;
}

body.saniyoro .product-reviews-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
}

@media (min-width: 860px) {
  body.saniyoro .product-reviews-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: start;
  }
}

body.saniyoro .review-form-compact {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

body.saniyoro .review-form-compact label,
body.saniyoro .review-form-compact fieldset {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  width: 100%;
  margin: 0;
  border: 0;
  padding: 0;
}

body.saniyoro .review-form-compact input,
body.saniyoro .review-form-compact textarea {
  width: 100%;
  border-radius: 10px;
  border: 1px solid rgba(12, 35, 64, 0.12);
  padding: 0.65rem 0.75rem;
  font: inherit;
  background: #f8fafb;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

body.saniyoro .review-form-compact input:focus,
body.saniyoro .review-form-compact textarea:focus {
  outline: none;
  border-color: var(--accent-mid);
  box-shadow: 0 0 0 3px rgba(13, 122, 79, 0.12);
  background: #fff;
}

body.saniyoro .review-form-compact textarea {
  min-height: 110px;
  resize: vertical;
}

body.saniyoro .review-form-compact .review-form-top {
  flex-direction: column;
  align-items: flex-start;
}

body.saniyoro .review-card-compact {
  background: #f8fafb;
  border: 1px solid rgba(12, 35, 64, 0.06);
  border-radius: 12px;
}

body.saniyoro .stars .bi-star-fill,
body.saniyoro .stars .bi-star-half {
  color: #f5a524;
}

/* ——— Auth moderne SANIYORO ——— */
body.saniyoro.auth-body {
  background: linear-gradient(160deg, #eef5f1 0%, #f4f7fb 50%, #eef3f9 100%);
}

body.saniyoro.auth-body .auth-brand {
  background:
    linear-gradient(145deg, rgba(12, 35, 64, 0.15), rgba(13, 122, 79, 0.25)),
    linear-gradient(155deg, #0c2340 0%, #0d5c42 52%, #10966a 100%);
}

body.saniyoro.auth-body .auth-brand::before {
  background:
    radial-gradient(420px 220px at 18% 18%, rgba(201, 162, 39, 0.22), transparent 58%),
    radial-gradient(360px 200px at 82% 78%, rgba(255, 255, 255, 0.12), transparent 55%);
}

body.saniyoro.auth-body .auth-card {
  border: 1px solid rgba(12, 35, 64, 0.08);
  box-shadow: var(--sy-shadow-lg);
  border-radius: 18px;
}

body.saniyoro.auth-body .btn-primary,
body.saniyoro.auth-body button[type="submit"].btn-primary {
  background: linear-gradient(135deg, var(--accent), var(--accent-mid));
  border: none;
  box-shadow: 0 8px 20px rgba(13, 122, 79, 0.25);
}

body.saniyoro.auth-body input[type="email"],
body.saniyoro.auth-body input[type="password"],
body.saniyoro.auth-body input[type="text"],
body.saniyoro.auth-body input[type="tel"],
body.saniyoro.auth-body textarea,
body.saniyoro.auth-body select {
  background: #f8fafb;
  border-color: rgba(12, 35, 64, 0.12);
  border-radius: 10px;
}

body.saniyoro.auth-body input:focus,
body.saniyoro.auth-body textarea:focus,
body.saniyoro.auth-body select:focus {
  border-color: var(--accent-mid);
  box-shadow: 0 0 0 3px rgba(13, 122, 79, 0.12);
  background: #fff;
}

body.saniyoro.auth-body .auth-mobile-brand img {
  margin: 0 auto 0.75rem;
}

/* Inscription vendeur — formulaire compact */
body.saniyoro.auth-vendor .auth-panel {
  align-items: stretch;
  padding: 1rem 1.15rem;
  min-height: 100vh;
  overflow: auto;
}

body.saniyoro.auth-vendor .auth-shell .auth-card {
  width: min(520px, 100%);
  padding: 1rem 1.1rem 0.85rem;
  margin: auto 0;
}

body.saniyoro.auth-vendor .auth-head {
  margin-bottom: 0.65rem;
}

body.saniyoro.auth-vendor .auth-lead {
  font-size: 0.8rem;
  line-height: 1.3;
}

body.saniyoro.auth-vendor .auth-shell .auth-card h1 {
  font-size: 1.28rem;
  margin: 0 0 0.2rem;
}

body.saniyoro.auth-vendor .auth-form .form-group {
  margin-bottom: 0.5rem;
}

body.saniyoro.auth-vendor .auth-form-row {
  gap: 0.5rem;
  margin-bottom: 0;
}

body.saniyoro.auth-vendor .form-group label {
  font-size: 0.78rem;
  margin-bottom: 0.2rem;
}

body.saniyoro.auth-vendor .form-control {
  padding: 0.45rem 0.65rem;
  font-size: 0.88rem;
  min-height: 2.35rem;
}

body.saniyoro.auth-vendor textarea.form-control {
  min-height: 52px;
  padding: 0.4rem 0.65rem;
}

body.saniyoro.auth-vendor .btn-block {
  padding: 0.65rem 1rem;
  margin-top: 0.15rem;
}

body.saniyoro.auth-vendor .auth-switch {
  margin: 0.55rem 0 0;
  font-size: 0.8rem;
}

body.saniyoro.auth-vendor .auth-shell .auth-back {
  margin-top: 0.55rem;
}

body.saniyoro.auth-vendor .auth-brand {
  padding: 1.25rem 1.5rem;
  gap: 1.1rem;
}

body.saniyoro.auth-vendor .auth-brand-copy h2 {
  font-size: clamp(1.35rem, 2.4vw, 1.75rem);
  margin-bottom: 0.4rem;
}

body.saniyoro.auth-vendor .auth-timeline-card small {
  display: none;
}

@media (max-width: 900px) {
  body.saniyoro.auth-vendor .auth-form-row {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 520px) {
  body.saniyoro.auth-vendor .auth-form-row {
    grid-template-columns: 1fr;
  }
}

.sy-product-seller-card {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 0.85rem 0 0.25rem;
  padding: 0.65rem 0.75rem;
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 12px;
  text-decoration: none;
  color: inherit;
  background: #fff;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.sy-product-seller-card:hover {
  border-color: var(--accent-mid, #0073e6);
  box-shadow: 0 4px 14px rgba(13, 122, 79, 0.08);
}

.sy-seller-logo,
.sy-seller-avatar {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  flex-shrink: 0;
  object-fit: cover;
}

.sy-seller-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #0047ab, #0073e6);
  color: #fff;
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.02em;
}

.sy-product-seller-text {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  min-width: 0;
}

.sy-product-seller-label {
  font-size: 0.72rem;
  color: var(--muted, #64748b);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.sy-product-seller-text strong {
  font-size: 0.95rem;
}

.sy-product-seller-text .muted {
  font-size: 0.78rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sy-product-seller-arrow {
  margin-left: auto;
  color: var(--muted, #94a3b8);
}

.sy-admin-seller-head {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-top: 0.5rem;
}

.sy-seller-logo-lg,
.sy-seller-avatar-lg {
  width: 64px;
  height: 64px;
  border-radius: 14px;
  flex-shrink: 0;
  object-fit: cover;
}

.sy-seller-avatar-lg {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #0047ab, #0073e6);
  color: #fff;
  font-size: 1.1rem;
  font-weight: 800;
}

.sy-barcode-dialog {
  border: 0;
  padding: 0;
  max-width: min(92vw, 420px);
  width: 92vw;
  background: transparent;
}

.sy-barcode-dialog::backdrop {
  background: rgba(8, 18, 35, 0.72);
  backdrop-filter: blur(4px);
}

.sy-barcode-dialog-body {
  background: #fff;
  border-radius: 16px;
  padding: 1.25rem 1.15rem 1.1rem;
  text-align: center;
  box-shadow: var(--sy-shadow-lg);
}

.sy-barcode-dialog-title {
  margin: 0 0 0.75rem;
  font-weight: 800;
  color: var(--sy-navy);
}

.sy-barcode-dialog-svg svg {
  max-width: 100%;
  height: auto;
}

.sy-barcode-dialog-code {
  margin: 0.5rem 0 0.85rem;
  font-family: ui-monospace, Consolas, monospace;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text);
}

.sy-barcode-copy {
  width: 100%;
  justify-content: center;
}

.sy-barcode-toast {
  margin: 0.65rem 0 0;
  font-size: 0.82rem;
  color: var(--accent);
  font-weight: 700;
}

.sy-btn-share,
.sy-btn-contact {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.55rem 0.95rem;
  border-radius: 10px;
  font-size: 0.85rem;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  border: 1px solid var(--border);
  background: #fff;
  color: var(--text);
  transition: all 0.2s;
}

.sy-btn-share {
  background: #25d366;
  border-color: #25d366;
  color: #fff;
}

.sy-btn-share:hover {
  filter: brightness(1.05);
}

.sy-btn-contact:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.sy-commerce-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
  margin-top: 1.25rem;
}

.sy-commerce-card {
  padding: 0.85rem 0.95rem;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: var(--shadow-sm);
}

.sy-commerce-card h3 {
  margin: 0 0 0.45rem;
  font-size: 0.82rem;
  font-weight: 800;
  color: var(--sy-navy);
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

.sy-commerce-card p,
.sy-commerce-card a {
  margin: 0;
  font-size: 0.8rem;
  line-height: 1.45;
}

.sy-commerce-card a {
  color: var(--accent);
  font-weight: 700;
  text-decoration: none;
}

.sy-commerce-card ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.sy-commerce-card li {
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
  font-size: 0.78rem;
  padding: 0.2rem 0;
}

.sy-commerce-card li em {
  font-style: normal;
  font-weight: 700;
  color: var(--accent);
  white-space: nowrap;
}

.sy-sector-tile-label {
  font-size: 0.8rem;
  font-weight: 700;
  line-height: 1.25;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ——— Product cards ——— */
body.saniyoro .sy-home-grid {
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 1.15rem;
}

body.saniyoro .sy-product-card {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  border-color: #e2ebe6;
  box-shadow: var(--shadow-sm);
}

body.saniyoro .sy-product-card:hover {
  border-color: #b8dcc8;
  box-shadow: var(--sy-shadow);
}

body.saniyoro .sy-card-media-link,
body.saniyoro .sy-card-body-link {
  display: block;
  text-decoration: none;
  color: inherit;
}

body.saniyoro .sy-card-media-link {
  width: 100%;
  height: 100%;
}

body.saniyoro .sy-card-body-link:hover h3 {
  color: var(--accent);
}

body.saniyoro .sy-card-visual {
  position: relative;
  aspect-ratio: 1;
  overflow: hidden;
  background: inherit;
}

body.saniyoro .sy-card-visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

body.saniyoro .sy-card-placeholder {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  background: inherit;
}

body.saniyoro .sy-card-placeholder i {
  font-size: 3rem;
  color: rgba(255, 255, 255, 0.92);
  filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.15));
}

body.saniyoro .sy-card-seller {
  position: absolute;
  left: 0.55rem;
  bottom: 0.55rem;
  max-width: calc(100% - 3.5rem);
  padding: 0.22rem 0.55rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.92);
  color: var(--accent);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

body.saniyoro .product-card-body {
  padding: 0.9rem 1rem 1rem;
}

body.saniyoro .product-card-body h3 {
  font-size: 0.95rem;
  margin-bottom: 0.45rem;
  min-height: 2.5em;
}

body.saniyoro .sy-card-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

body.saniyoro .price {
  color: var(--accent);
  font-weight: 800;
  font-size: 1rem;
}

.sy-out-stock {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--danger);
  background: #fef2f2;
  padding: 0.15rem 0.45rem;
  border-radius: 999px;
}

body.saniyoro .sy-card-add {
  position: absolute;
  right: 0.55rem;
  top: 0.55rem;
  margin: 0;
  z-index: 3;
}

body.saniyoro .sy-card-add-btn {
  width: 38px;
  height: 38px;
  border: 0;
  border-radius: 50%;
  background: #fff;
  color: var(--accent);
  display: grid;
  place-items: center;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(13, 122, 79, 0.3);
  transition: all 0.2s;
  font-size: 1rem;
}

body.saniyoro .sy-card-add-btn:hover {
  background: var(--accent);
  color: #fff;
  transform: scale(1.08);
}

/* ——— Boutiques (style Dokan) ——— */
.sy-dokan-stores-section {
  margin: 0;
  width: 100%;
  padding: 0;
  background:
    radial-gradient(760px 300px at 0% 0%, rgba(0, 71, 171, 0.06), transparent 55%),
    radial-gradient(640px 260px at 100% 100%, rgba(255, 145, 0, 0.04), transparent 50%);
}

.sy-dokan-stores-shell {
  width: 100%;
  max-width: 1240px;
  margin: 0 auto;
  padding-top: 0.25rem;
  padding-bottom: 0.5rem;
}

.sy-dokan-sector-block {
  margin-bottom: 2.25rem;
}

.sy-dokan-sector-block:last-child {
  margin-bottom: 0;
}

.sy-dokan-sector-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
  padding-bottom: 0.65rem;
  border-bottom: 2px solid #e8f0ec;
}

.sy-dokan-sector-title {
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-display);
  font-size: clamp(1rem, 2vw, 1.15rem);
  font-weight: 800;
  color: var(--sy-navy);
}

.sy-dokan-sector-title i {
  width: 2rem;
  height: 2rem;
  border-radius: 10px;
  display: grid;
  place-items: center;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 1rem;
}

.sy-dokan-sector-link {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--accent);
  text-decoration: none;
  white-space: nowrap;
}

.sy-dokan-sector-link:hover {
  text-decoration: underline;
}

.sy-dokan-stores-grid {
  display: grid;
  gap: 1.15rem;
}

.sy-dokan-stores-grid--4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.sy-dokan-stores-grid--auto {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
}

.sy-dokan-stores-grid--single {
  grid-template-columns: minmax(280px, 400px);
}

.sy-dokan-stores-grid--duo {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  max-width: 860px;
}

@media (max-width: 640px) {
  .sy-dokan-stores-grid--duo {
    grid-template-columns: 1fr;
    max-width: none;
  }
}

/* Carte vendeur — style Dokan Store List */
.sy-dokan-list-card {
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 4px 18px rgba(10, 28, 48, 0.12);
  transition: transform 0.22s var(--ease), box-shadow 0.22s var(--ease);
}

.sy-dokan-list-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(10, 28, 48, 0.18);
}

.sy-dokan-list-link {
  display: block;
  text-decoration: none;
  color: #fff;
}

.sy-dokan-list-cover {
  position: relative;
  min-height: 220px;
  background: linear-gradient(135deg, var(--sy-navy), #1a3a5c);
}

.sy-dokan-list-cover > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.sy-dokan-list-card:hover .sy-dokan-list-cover > img {
  transform: scale(1.05);
}

.sy-dokan-list-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(10, 28, 48, 0.88) 0%, rgba(10, 28, 48, 0.35) 45%, rgba(10, 28, 48, 0.15) 100%);
}

.sy-dokan-list-status {
  position: absolute;
  top: 0.75rem;
  left: 0.75rem;
  z-index: 2;
  padding: 0.3rem 0.65rem;
  border-radius: 4px;
  background: linear-gradient(135deg, #0073e6, #0047ab);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.sy-dokan-list-sector {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  z-index: 2;
  max-width: 46%;
  padding: 0.28rem 0.6rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.92);
  color: var(--sy-navy);
  font-size: 0.68rem;
  font-weight: 700;
  line-height: 1.25;
  text-align: right;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sy-dokan-list-info {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  padding: 1rem 5.5rem 1rem 1rem;
  min-height: 42%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.sy-dokan-list-name {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.05rem, 2vw, 1.35rem);
  font-weight: 800;
  line-height: 1.2;
  color: #fff;
}

.sy-dokan-list-stars {
  display: flex;
  gap: 0.15rem;
  margin-top: 0.35rem;
  color: var(--sy-orange);
  font-size: 0.82rem;
}

.sy-dokan-list-stars .is-dim {
  opacity: 0.35;
}

.sy-dokan-list-address {
  margin: 0.4rem 0 0;
  font-size: 0.78rem;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.88);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.sy-dokan-list-go {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  left: auto;
  bottom: auto;
  z-index: 3;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  color: var(--sy-navy);
  display: grid;
  place-items: center;
  font-size: 1rem;
  box-shadow: 0 4px 14px rgba(10, 28, 48, 0.18);
  transition: transform 0.2s, background 0.2s;
}

.sy-dokan-list-card:hover .sy-dokan-list-go {
  transform: scale(1.08);
}

.sy-dokan-list-logo {
  position: absolute;
  right: 0.85rem;
  bottom: 0.85rem;
  z-index: 3;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: 3px solid #fff;
  background: #fff;
  overflow: hidden;
  display: grid;
  place-items: center;
  font-weight: 800;
  font-family: var(--font-display);
  color: var(--sy-navy);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2);
}

.sy-dokan-list-logo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Page boutique vendeur — style Dokan Store */
.sy-store-page {
  margin: 0 calc(50% - 50vw);
  width: 100vw;
  background: #eef1f5;
}

.sy-store-hero {
  display: grid;
  grid-template-columns: minmax(240px, 280px) 1fr;
  min-height: 320px;
}

.sy-store-hero-panel {
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: #dfe4ea;
}

.sy-store-sidebar {
  background: var(--sy-navy);
  color: #fff;
  padding: 1.75rem 1.35rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.sy-store-sidebar-logo {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  border: 4px solid rgba(255, 255, 255, 0.2);
  overflow: hidden;
  background: rgba(255, 255, 255, 0.1);
  display: grid;
  place-items: center;
  font-size: 2rem;
  font-weight: 800;
  font-family: var(--font-display);
}

.sy-store-sidebar-logo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.sy-store-sidebar-name {
  margin: 1rem 0 0;
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 800;
}

.sy-store-sidebar-tagline {
  margin: 0.45rem 0 0;
  font-size: 0.82rem;
  opacity: 0.85;
  line-height: 1.45;
}

.sy-store-sidebar-contact {
  list-style: none;
  margin: 1.15rem 0 0;
  padding: 0;
  width: 100%;
  text-align: left;
}

.sy-store-sidebar-contact li {
  display: flex;
  gap: 0.55rem;
  align-items: flex-start;
  font-size: 0.8rem;
  line-height: 1.45;
  padding: 0.45rem 0;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.sy-store-sidebar-contact i {
  color: var(--sy-orange);
  margin-top: 0.1rem;
  flex-shrink: 0;
}

.sy-store-map-wrap {
  position: relative;
  flex: 1;
  min-height: 220px;
  background: #c8d0da;
}

.sy-store-map {
  width: 100%;
  height: 100%;
  min-height: 220px;
  border: 0;
  display: block;
}

.sy-store-route-btn {
  position: absolute;
  left: 1rem;
  bottom: 1rem;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.55rem 1rem;
  border-radius: 999px;
  background: var(--sy-orange);
  color: #fff;
  font-size: 0.85rem;
  font-weight: 800;
  text-decoration: none;
  box-shadow: 0 6px 20px rgba(247, 127, 33, 0.45);
  transition: transform 0.15s, background 0.15s;
}

.sy-store-route-btn:hover {
  background: var(--accent-hover);
  transform: translateY(-2px);
  color: #fff;
}

.sy-store-sectors-strip {
  background: #fff;
  border-top: 3px solid var(--sy-orange);
  padding: 0.65rem 0 0.75rem;
}

.sy-store-sectors-head {
  padding: 0 0.85rem 0.35rem;
}

.sy-store-sectors-title {
  margin: 0.15rem 0 0;
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 800;
  color: var(--sy-navy);
}

.sy-store-sectors-strip .sy-sectors-marquee {
  margin: 0;
  width: 100%;
}

.sy-store-sectors-strip .sy-sectors-marquee::before,
.sy-store-sectors-strip .sy-sectors-marquee::after {
  width: 1.5rem;
}

.sy-store-sectors-strip .sy-sectors-track {
  padding: 0.35rem 0.75rem;
}

.sy-store-products-shell {
  padding: 1.75rem clamp(0.85rem, 2.2vw, 2rem) 2.5rem;
}

.sy-store-products-head h2 {
  margin: 0 0 1.25rem;
  font-family: var(--font-display);
  font-size: 1.35rem;
  color: var(--sy-navy);
}

.sy-store-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.75rem;
  height: 1.75rem;
  padding: 0 0.45rem;
  margin-left: 0.35rem;
  border-radius: 999px;
  background: var(--sy-orange);
  color: #fff;
  font-size: 0.82rem;
  font-weight: 800;
  vertical-align: middle;
}

.sy-store-product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 1.15rem;
}
.sy-store-product-grid > .sy-dokan-product-card { max-width: 260px; width: 100%; }

.sy-store-empty {
  padding: 2rem;
  text-align: center;
  color: var(--muted);
  background: #fff;
  border-radius: 12px;
}

/* Produit carte Dokan (page boutique) */
.sy-dokan-product-card {
  background: #fff;
  border-radius: 4px;
  overflow: hidden;
  box-shadow: 0 2px 10px rgba(10, 28, 48, 0.08);
  transition: box-shadow 0.2s, transform 0.2s;
}

.sy-dokan-product-card:hover {
  box-shadow: 0 8px 24px rgba(10, 28, 48, 0.12);
  transform: translateY(-2px);
}

.sy-dokan-product-image {
  position: relative;
  aspect-ratio: 1;
  overflow: hidden;
  background: #f3f5f8;
}

.sy-dokan-product-media {
  display: block;
  width: 100%;
  height: 100%;
}

.sy-dokan-product-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.sy-dokan-product-placeholder {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  font-size: 2rem;
  color: var(--sy-navy);
  opacity: 0.35;
}

.sy-dokan-product-sale {
  position: absolute;
  top: 0.5rem;
  right: 0;
  padding: 0.25rem 0.65rem;
  background: var(--sy-orange);
  color: #fff;
  font-size: 0.68rem;
  font-weight: 800;
  text-transform: uppercase;
  transform: rotate(0deg);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 8px 100%);
}

.sy-dokan-product-title {
  display: block;
  padding: 0.55rem 0.65rem;
  background: #3d4f63;
  color: #fff;
  font-size: 0.82rem;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sy-dokan-product-title:hover {
  background: var(--sy-navy);
}

.sy-dokan-product-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.55rem 0.65rem;
  background: #fff;
}

.sy-dokan-product-price {
  font-weight: 800;
  font-size: 0.92rem;
  color: var(--sy-navy);
}

.sy-dokan-product-cart {
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 4px;
  background: var(--sy-orange);
  color: #fff;
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: background 0.2s, transform 0.15s;
}

.sy-dokan-product-cart:hover {
  background: var(--accent-hover);
  transform: scale(1.06);
}

.sy-dokan-product-oos {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--danger);
}

/* Legacy shop list (autres pages) */
.sy-shops-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 0.85rem;
}

.sy-shop-card {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 1rem 1.1rem;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 16px;
  text-decoration: none;
  color: inherit;
  transition: all 0.2s;
  box-shadow: var(--shadow-sm);
}

.sy-shop-card:hover {
  border-color: #b8dcc8;
  box-shadow: var(--sy-shadow);
  transform: translateY(-2px);
}

.sy-shop-avatar {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: linear-gradient(145deg, var(--accent), var(--accent-mid));
  color: #fff;
  display: grid;
  place-items: center;
  font-weight: 800;
  font-family: var(--font-display);
  font-size: 1.1rem;
  flex-shrink: 0;
}

.sy-shop-info { flex: 1; min-width: 0; }

.sy-shop-info strong {
  display: block;
  font-size: 0.95rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sy-shop-info small {
  display: block;
  font-size: 0.8rem;
  color: var(--muted);
  margin-top: 0.1rem;
}

.sy-shop-info em {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  font-style: normal;
  font-size: 0.74rem;
  color: var(--accent-mid);
  margin-top: 0.25rem;
  font-weight: 600;
}

.sy-shop-cta {
  flex-shrink: 0;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--accent);
  white-space: nowrap;
}

/* ——— CTA band ——— */
.sy-cta-band {
  margin: 0 calc(50% - 50vw);
  width: 100vw;
  background: linear-gradient(135deg, var(--sy-navy), #143a5c);
  color: #fff;
  padding: 2rem 0;
}

body.saniyoro.page-home .tsf-home {
  padding-bottom: 0;
}

body.saniyoro.page-home .site-main > .sy-cta-band {
  margin-bottom: 0;
}

body.saniyoro.page-home .site-main + .sy-site-footer {
  margin-top: 0;
}

.sy-cta-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
}

.sy-cta-inner h2 {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.2rem, 3vw, 1.65rem);
}

.sy-cta-inner p {
  margin: 0.35rem 0 0;
  opacity: 0.85;
  max-width: 36rem;
}

.sy-btn-cta {
  display: inline-flex;
  padding: 0.8rem 1.25rem;
  border-radius: 12px;
  background: var(--sy-gold);
  color: var(--sy-navy);
  font-weight: 800;
  text-decoration: none;
  box-shadow: 0 8px 24px rgba(201, 162, 39, 0.35);
  transition: transform 0.15s;
}

.sy-btn-cta:hover {
  transform: translateY(-2px);
  background: #e8c84a;
}

/* ——— Footer ——— */
.sy-site-footer {
  margin-top: 0;
  background: var(--sy-navy);
  color: rgba(255, 255, 255, 0.88);
  padding: 2.25rem 0 1.35rem;
}

.sy-footer-grid { display: grid; gap: 1rem; }

.sy-footer-brand {
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
}

.sy-footer-brand .sy-logo-mark {
  width: 50px;
  height: 50px;
  font-size: 1.4rem;
}

.sy-footer-brand strong {
  display: block;
  font-family: var(--font-display);
  font-size: 1.1rem;
  color: #fff;
}

.sy-footer-brand p {
  margin: 0.3rem 0 0;
  font-size: 0.88rem;
  opacity: 0.85;
}

.sy-footer-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.25rem;
}

.sy-footer-nav a {
  color: var(--sy-gold);
  text-decoration: none;
  font-weight: 600;
}

.sy-footer-pay {
  margin: 0;
  font-size: 0.82rem;
  opacity: 0.7;
}

.sy-footer-copy {
  margin: 0;
  font-size: 0.78rem;
  opacity: 0.5;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding-top: 0.85rem;
}

/* ——— Pages internes ——— */
.sy-page { padding: 1.5rem 0 2.5rem; }

.sy-page-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
}

.sy-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 0.65rem;
  box-shadow: var(--shadow-sm);
}

.sy-filters input,
.sy-filters select {
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 0.5rem 0.65rem;
  font-size: 0.88rem;
  background: #fff;
}

.sy-result-count {
  color: var(--muted);
  font-size: 0.88rem;
  margin: 0 0 1.15rem;
}

.sy-product-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  margin-bottom: 2rem;
}

.sy-product-media {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 18px;
  overflow: hidden;
  aspect-ratio: 1;
  box-shadow: var(--sy-shadow);
}

.sy-product-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.sy-price-lg {
  font-size: 1.65rem;
  font-weight: 800;
  color: var(--accent);
}

.sy-breadcrumb {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.85rem;
  color: var(--muted);
  margin-bottom: 1rem;
}

.sy-breadcrumb a { color: var(--accent); font-weight: 600; }

.sy-product-info {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 1.35rem;
  box-shadow: var(--sy-shadow);
}

.sy-product-meta {
  margin: 0 0 0.5rem;
  font-size: 0.85rem;
  color: var(--muted);
}

.sy-product-meta a { color: var(--accent); font-weight: 600; }

.sy-stock-badge {
  display: inline-block;
  margin: 0.5rem 0 1rem;
  padding: 0.35rem 0.7rem;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 700;
}

.sy-stock-badge.in-stock { background: var(--accent-soft); color: var(--accent); }
.sy-stock-badge.out-stock { background: #fef2f2; color: var(--danger); }

.sy-product-desc {
  margin-bottom: 1.25rem;
  line-height: 1.65;
  color: var(--text);
}

.sy-qty-label {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  font-size: 0.85rem;
  font-weight: 600;
}

.sy-add-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.75rem 1.25rem;
}

.sy-similar { margin-top: 2.5rem; }
.sy-similar .section-title { margin-bottom: 1rem; }

body.saniyoro .btn-primary {
  background: var(--accent);
  border-radius: 10px;
  font-weight: 700;
}

body.saniyoro .btn-primary:hover { background: var(--accent-hover); }

body.saniyoro .alert-ok {
  background: #e6f6ee;
  color: #0d5c3a;
  border-radius: 12px;
  padding: 0.7rem 0.9rem;
  border: 1px solid #b7e4cb;
  font-weight: 600;
  font-size: 0.9rem;
}

body.saniyoro .alert-error {
  background: #fde8e8;
  color: #8b1e1e;
  border-radius: 12px;
  padding: 0.7rem 0.9rem;
}

/* ——— Panier (maquette mobile) ——— */
.sy-cart-page {
  padding-top: 1rem;
  padding-bottom: 2rem;
}

.sy-cart-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 1.1rem;
}

.sy-cart-kicker {
  margin: 0 0 0.2rem;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--sy-orange);
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.sy-cart-head h1 {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.55rem, 4vw, 1.9rem);
  color: var(--sy-navy);
  letter-spacing: -0.02em;
}

.sy-cart-count {
  display: inline-flex;
  align-items: center;
  padding: 0.35rem 0.75rem;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--sy-orange);
  font-size: 0.8rem;
  font-weight: 800;
}

.sy-cart-layout {
  display: grid;
  grid-template-columns: 1.35fr 0.75fr;
  gap: 1.15rem;
  align-items: start;
}

.sy-cart-block {
  background: #fff;
  border: 1px solid #e8edf3;
  border-radius: 18px;
  box-shadow: var(--sy-shadow);
  overflow: hidden;
  margin-bottom: 1rem;
}

.sy-cart-shop {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.9rem 1rem;
  background: linear-gradient(180deg, #fafbfd 0%, #fff 100%);
  border-bottom: 1px solid #eef2f7;
}

.sy-cart-shop-icon {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: var(--sy-navy);
  color: #fff;
  font-size: 1.1rem;
  flex-shrink: 0;
}

.sy-cart-shop h2 {
  margin: 0;
  font-size: 1rem;
  color: var(--sy-navy);
}

.sy-cart-shop p {
  margin: 0.15rem 0 0;
  font-size: 0.78rem;
  color: #7a8798;
}

.sy-cart-lines {
  list-style: none;
  margin: 0;
  padding: 0;
}

.sy-cart-line {
  display: grid;
  grid-template-columns: 88px 1fr auto;
  gap: 0.85rem;
  padding: 1rem;
  border-bottom: 1px solid #eef2f7;
  align-items: start;
}

.sy-cart-line:last-child {
  border-bottom: 0;
}

.sy-cart-thumb {
  width: 88px;
  height: 88px;
  border-radius: 14px;
  overflow: hidden;
  background: #f3f6fa;
  border: 1px solid #e8edf3;
  flex-shrink: 0;
}

.sy-cart-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.sy-cart-name {
  display: block;
  font-weight: 800;
  font-size: 0.95rem;
  color: var(--sy-navy);
  text-decoration: none;
  line-height: 1.35;
}

.sy-cart-name:hover {
  color: var(--sy-orange);
}

.sy-cart-unit {
  margin: 0.3rem 0 0.65rem;
  font-size: 0.82rem;
  color: #7a8798;
}

.sy-cart-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.65rem;
}

.sy-cart-stepper {
  display: inline-flex;
  align-items: center;
  border: 1.5px solid #e2e8f0;
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
}

.sy-cart-stepper form {
  margin: 0;
}

.sy-cart-step {
  width: 36px;
  height: 36px;
  border: 0;
  background: transparent;
  color: var(--sy-navy);
  font-size: 1.15rem;
  font-weight: 700;
  cursor: pointer;
  line-height: 1;
}

.sy-cart-step:hover {
  background: var(--accent-soft);
  color: var(--sy-orange);
}

.sy-cart-qty {
  min-width: 2rem;
  text-align: center;
  font-weight: 800;
  font-size: 0.95rem;
  color: var(--sy-navy);
  border-inline: 1px solid #e8edf3;
  line-height: 36px;
  height: 36px;
}

.sy-cart-remove {
  border: 0;
  background: transparent;
  color: #8a97a8;
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.25rem 0;
}

.sy-cart-remove:hover {
  color: #c0392b;
}

.sy-cart-line-total {
  font-weight: 800;
  font-size: 1rem;
  color: var(--sy-orange);
  white-space: nowrap;
  text-align: right;
  padding-top: 0.15rem;
}

.sy-cart-summary {
  background: #fff;
  border: 1px solid #e8edf3;
  border-radius: 18px;
  padding: 1.15rem 1.2rem 1.25rem;
  box-shadow: var(--sy-shadow);
  position: sticky;
  top: calc(var(--header-h, 76px) + 0.75rem);
}

.sy-cart-summary h3 {
  margin: 0 0 1rem;
  font-size: 1rem;
  color: var(--sy-navy);
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.sy-cart-summary-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.75rem;
  margin-bottom: 0.55rem;
  font-size: 0.9rem;
  color: #5a6a7c;
}

.sy-cart-summary-row strong {
  color: var(--sy-navy);
}

.sy-cart-summary-row em {
  font-style: normal;
  font-size: 0.78rem;
  color: #8a97a8;
}

.sy-cart-summary-row.is-total {
  margin-top: 0.75rem;
  padding-top: 0.85rem;
  border-top: 1px solid #eef2f7;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--sy-navy);
}

.sy-cart-summary-row.is-total strong {
  color: var(--sy-orange);
  font-size: 1.15rem;
}

.sy-cart-summary-note {
  margin: 0.85rem 0 1rem;
  font-size: 0.78rem;
  color: #7a8798;
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

.sy-cart-summary-note i {
  color: var(--sy-blue, #0073e6);
}

.sy-cart-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  width: 100%;
  min-height: 50px;
  padding: 0.85rem 1.15rem;
  border-radius: 14px;
  background: var(--sy-orange);
  color: #fff !important;
  font-weight: 800;
  font-size: 0.98rem;
  text-decoration: none;
  border: 0;
  box-shadow: 0 8px 22px rgba(247, 127, 33, 0.32);
  transition: transform 0.15s, background 0.15s;
}

.sy-cart-cta:hover {
  background: var(--accent-hover);
  transform: translateY(-1px);
  color: #fff !important;
}

.sy-cart-continue {
  display: block;
  margin-top: 0.75rem;
  text-align: center;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--sy-navy);
  text-decoration: none;
}

.sy-cart-continue:hover {
  color: var(--sy-orange);
}

.sy-cart-empty {
  text-align: center;
  background: #fff;
  border: 1px solid #e8edf3;
  border-radius: 20px;
  padding: 2.5rem 1.5rem;
  box-shadow: var(--sy-shadow);
  max-width: 420px;
  margin: 1.5rem auto 0;
}

.sy-cart-empty-icon {
  width: 72px;
  height: 72px;
  margin: 0 auto 0.85rem;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--accent-soft);
  color: var(--sy-orange);
  font-size: 1.75rem;
}

.sy-cart-empty h2 {
  margin: 0 0 0.35rem;
  color: var(--sy-navy);
  font-size: 1.25rem;
}

.sy-cart-empty p {
  margin: 0 0 1.25rem;
  color: #7a8798;
  font-size: 0.92rem;
}

.sy-cart-empty .sy-cart-cta {
  width: auto;
  display: inline-flex;
  padding-inline: 1.35rem;
}

@media (max-width: 900px) {
  .sy-cart-layout {
    grid-template-columns: 1fr;
  }

  .sy-cart-summary {
    position: static;
    order: 2;
  }
}

@media (max-width: 560px) {
  .sy-cart-page {
    padding-top: 0.65rem;
  }

  .sy-cart-line {
    grid-template-columns: 72px 1fr;
    gap: 0.7rem;
    padding: 0.85rem;
  }

  .sy-cart-thumb {
    width: 72px;
    height: 72px;
    border-radius: 12px;
  }

  .sy-cart-line-total {
    grid-column: 2;
    text-align: left;
    padding-top: 0;
    font-size: 0.95rem;
  }

  .sy-cart-shop {
    padding: 0.75rem 0.85rem;
  }

  .sy-cart-summary {
    border-radius: 16px;
    margin-bottom: 0.5rem;
  }
}


/* Admin SaaS abonnements */
.sy-saas-section { margin: 1.5rem 0 2rem; }
.sy-saas-section h2 { font-size: 1.1rem; margin-bottom: 0.85rem; color: var(--sy-navy); }
.sy-saas-plans-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 1rem;
}
.sy-saas-plan-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 1rem;
  box-shadow: var(--shadow-sm);
}
.sy-saas-plan-card.is-unlimited {
  border-color: var(--sy-gold);
  background: linear-gradient(180deg, #fffdf5, #fff);
}
.sy-saas-plan-card h3 { margin: 0 0 0.35rem; font-size: 1rem; }
.sy-saas-price { font-weight: 800; color: var(--accent); margin: 0.5rem 0; }
.sy-saas-limits { list-style: none; margin: 0; padding: 0; font-size: 0.82rem; }
.sy-saas-limits li { padding: 0.2rem 0; }
.sy-saas-form { display: grid; gap: 0.45rem; margin-top: 0.65rem; }
.sy-saas-form label { font-size: 0.78rem; font-weight: 600; display: grid; gap: 0.2rem; }
.sy-saas-form input, .sy-saas-form textarea, .sy-saas-form select {
  padding: 0.4rem 0.55rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 0.85rem;
}
.sy-saas-inline-form { display: flex; flex-wrap: wrap; gap: 0.35rem; align-items: center; }
.sy-saas-inline-form select, .sy-saas-inline-form input { max-width: 140px; font-size: 0.8rem; padding: 0.35rem; }
.sy-saas-fere-box {
  background: var(--accent-soft);
  border: 1px solid #b8dcc8;
  border-radius: 12px;
  padding: 1rem;
}
.sy-vendor-quota { margin: 0.25rem 0 0; font-size: 0.88rem; color: var(--muted); }
.sy-quota-warn {
  align-self: center;
  padding: 0.45rem 0.75rem;
  border-radius: 8px;
  background: #fef3c7;
  color: #92400e;
  font-size: 0.82rem;
  font-weight: 700;
}

/* BO */
body.saniyoro .sy-bo { display: flex; min-height: 100vh; }

body.saniyoro .sy-bo-nav {
  width: 230px;
  background: var(--sy-navy);
  color: #fff;
  padding: 1.25rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

body.saniyoro .sy-bo-nav a {
  color: rgba(255, 255, 255, 0.88);
  text-decoration: none;
  padding: 0.35rem 0;
}

body.saniyoro .sy-bo-nav a:hover { color: var(--sy-gold); }

body.saniyoro .sy-bo-main {
  flex: 1;
  padding: 1.35rem;
  background: var(--bg);
  min-width: 0;
  overflow-x: auto;
}

body.saniyoro .sy-bo-card {
  background: #fff;
  border: 1px solid rgba(0, 71, 171, 0.12);
  border-radius: 10px;
  padding: 0.9rem 1rem;
  margin: 0 0 1rem;
}

body.saniyoro .sy-bo-card > summary { cursor: pointer; }
body.saniyoro .sy-bo-card h2 { font-size: 1rem; margin: 0 0 0.6rem; }

body.saniyoro .sy-bo-form {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0.6rem 0.9rem;
  margin: 0.6rem 0 1rem;
}

body.saniyoro .sy-bo-form label {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  font-size: 0.82rem;
  font-weight: 600;
}

body.saniyoro .sy-bo-form label:has(> input[type="checkbox"]) {
  flex-direction: row;
  align-items: center;
}

body.saniyoro .sy-bo-wide { flex-basis: 100%; }
body.saniyoro .sy-bo-wide input,
body.saniyoro .sy-bo-wide textarea { width: 100%; }

body.saniyoro .sy-bo-main input:not([type="checkbox"]):not([type="file"]),
body.saniyoro .sy-bo-main select,
body.saniyoro .sy-bo-main textarea {
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  padding: 0.35rem 0.5rem;
  font: inherit;
  font-size: 0.85rem;
  background: #fff;
}

body.saniyoro .sy-bo-checks {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem 0.9rem;
  margin-top: 0.35rem;
  font-size: 0.8rem;
  font-weight: 400;
}

body.saniyoro .sy-bo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1rem;
  margin-bottom: 1rem;
}

body.saniyoro .sy-bo-main .sy-table td { vertical-align: top; }

/* ——— Responsive ——— */
@media (max-width: 1200px) {
  .sy-dokan-stores-grid--4 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 960px) {
  .sy-hero-wrap {
    min-height: 0;
    margin: 0;
    width: 100%;
    border-radius: 0;
    padding: 1.35rem 0 2.75rem;
    box-shadow: none;
  }
  .sy-hero-inner {
    min-height: 0;
    max-width: none;
    justify-content: flex-end;
    padding-bottom: 0.25rem;
  }
  .sy-hero-overlay {
    background:
      linear-gradient(180deg, rgba(8, 22, 40, 0.55) 0%, rgba(8, 22, 40, 0.72) 42%, rgba(8, 22, 40, 0.92) 100%);
  }
  .sy-hero-kicker {
    display: none;
  }
  .sy-hero-copy h1 {
    margin-top: 0;
    font-size: clamp(1.7rem, 7.2vw, 2.15rem);
  }
  .sy-hero-lead {
    margin-top: 0.55rem;
    font-size: 0.92rem;
    line-height: 1.45;
    max-width: 22rem;
  }
  .sy-hero-chips {
    margin-top: 0.85rem;
    gap: 0.4rem;
  }
  .sy-hero-chips span {
    padding: 0.35rem 0.65rem;
    font-size: 0.75rem;
    background: rgba(0, 0, 0, 0.28);
    border: 1px solid rgba(255, 255, 255, 0.12);
  }
  .sy-hero-actions {
    margin-top: 1rem;
    flex-direction: column;
    gap: 0.55rem;
  }
  .sy-btn-hero-primary,
  .sy-btn-hero-secondary {
    width: 100%;
    justify-content: center;
    min-height: 48px;
    border-radius: 14px;
    font-size: 0.95rem;
  }
  .sy-pay-strip {
    margin-top: 0.9rem;
    gap: 0.35rem;
  }
  .sy-pay-strip span {
    font-size: 0.68rem;
    padding: 0.25rem 0.5rem;
  }
  .sy-hero-dots {
    margin-top: 0.85rem;
  }
  .sy-hero-card { display: none; }
  .sy-visited-slide { flex-basis: 210px; }
  .sy-dokan-stores-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sy-dokan-list-cover { min-height: 190px; }
  .sy-store-hero { grid-template-columns: 1fr; }
  .sy-store-product-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: .9rem; }
  .sy-commerce-cards { grid-template-columns: 1fr; }
  .product-detail { grid-template-columns: 1fr !important; }
  .sy-trust-strip {
    margin-top: -1.6rem;
    padding: 0 0 1.1rem;
  }
  .sy-trust-strip-inner {
    grid-template-columns: 1fr;
    gap: 0;
    padding: 0.35rem 0.55rem;
    border-radius: 20px 20px 16px 16px;
    border: 1px solid #e8edf3;
    box-shadow: 0 12px 32px rgba(10, 28, 48, 0.1);
  }
  .sy-trust-pill {
    padding: 0.85rem 0.65rem;
    border-radius: 0;
    border-bottom: 1px solid #eef2f7;
    gap: 0.85rem;
  }
  .sy-trust-pill:last-child {
    border-bottom: 0;
  }
  .sy-trust-pill:hover {
    background: transparent;
  }
  .sy-trust-pill > i {
    width: 40px;
    height: 40px;
    border-radius: 11px;
    font-size: 1.05rem;
  }
  .sy-trust-pill strong {
    font-size: 0.92rem;
    font-weight: 800;
  }
  .sy-trust-pill span {
    font-size: 0.78rem;
    color: #7a8798;
  }
}

@media (max-width: 768px) {
  /* Toolbar uniquement — pas l'en-tête (évite double loupe avec l'icône <i>) */
  .sy-toolbar .sy-search-submit {
    padding: 0;
    width: 40px;
    height: 40px;
    font-size: 0;
    border-radius: 10px;
  }

  .sy-toolbar .sy-search-submit::before {
    content: "\F52A";
    font-family: "bootstrap-icons";
    font-size: 1rem;
  }

  .sy-toolbar-inner { flex-direction: column; align-items: stretch; }
  .sy-commune-pill { justify-content: center; }
  .sy-commune-pill select { max-width: none; }
  .sy-sectors-grid { grid-template-columns: repeat(3, 1fr); }
  .sy-product-grid { grid-template-columns: 1fr; }
  body.saniyoro .sy-bo { flex-direction: column; }
  body.saniyoro .sy-bo-nav { width: 100%; flex-direction: row; flex-wrap: wrap; }
}

@media (min-width: 769px) {
  .sy-footer-grid {
    grid-template-columns: 1.5fr 1fr;
    align-items: start;
  }
  .sy-footer-pay, .sy-footer-copy { grid-column: 1 / -1; }
}

@media (max-width: 560px) {
  .sy-dokan-stores-grid--4 { grid-template-columns: 1fr; }
  .sy-dokan-sector-head { flex-direction: column; align-items: flex-start; }
  .sy-store-product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .7rem; }
  .sy-store-product-grid > .sy-dokan-product-card { max-width: none; }
}

/* ============================================================
   Boutique vendeur — note étoilée + carte MapLibre moderne
   ============================================================ */
.sy-store-rating {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 0.55rem;
  padding: 0.3rem 0.7rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
  font-size: 0.8rem;
  line-height: 1;
}
.sy-store-rating .stars { font-size: 0.8rem; color: #ffb347; }
.sy-store-rating .stars .bi-star { color: rgba(255, 255, 255, 0.3); }
.sy-store-rating-value { font-weight: 800; color: #fff; }
.sy-store-rating-count { color: rgba(255, 255, 255, 0.72); white-space: nowrap; }

/* Cartes vendeurs : valeur numérique à côté des étoiles */
.sy-dokan-list-stars { align-items: center; }
.sy-dokan-list-stars .sy-dokan-list-score {
  margin-left: 0.35rem;
  font-size: 0.78rem;
  font-weight: 800;
  color: #fff;
}
.sy-dokan-list-stars .sy-dokan-list-score small {
  font-weight: 500;
  opacity: 0.75;
}

/* — Carte — */
.sy-store-map-wrap { min-height: 380px; }
.sy-store-map-gl {
  position: absolute;
  inset: 0;
  min-height: 380px;
  background: #dfe4ea;
}
.sy-store-map-gl.is-ready { background: transparent; }
.sy-store-map-gl canvas:focus { outline: none; }
.sy-store-map-gl .maplibregl-ctrl-top-right { top: 0.75rem; right: 0.75rem; }
.sy-store-map-gl .maplibregl-ctrl-group {
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(10, 28, 48, 0.18);
  overflow: hidden;
}
.sy-store-map-gl .maplibregl-ctrl-group button { width: 34px; height: 34px; }
.sy-store-map-gl .maplibregl-ctrl-attrib { font-size: 10px; border-radius: 8px 0 0 0; }
.sy-store-map-gl .maplibregl-cooperative-gesture-screen { border-radius: 0; font-family: inherit; }

.sy-map-recenter {
  position: absolute;
  right: 0.75rem;
  bottom: 1rem;
  z-index: 3;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid rgba(10, 28, 48, 0.08);
  background: #fff;
  color: var(--sy-navy);
  font-size: 1.05rem;
  display: grid;
  place-items: center;
  cursor: pointer;
  box-shadow: 0 8px 22px rgba(10, 28, 48, 0.18);
  transition: transform 0.15s, color 0.15s;
}
.sy-map-recenter:hover { transform: translateY(-2px); color: var(--sy-orange); }

.sy-store-map-card {
  position: absolute;
  left: 1rem;
  top: 1rem;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 0.65rem;
  max-width: min(320px, calc(100% - 5.5rem));
  padding: 0.6rem 0.85rem 0.6rem 0.6rem;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 10px 30px rgba(10, 28, 48, 0.16);
  pointer-events: none;
}
.sy-store-map-card-pin {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  background: var(--sy-orange);
  color: #fff;
  font-size: 1rem;
}
.sy-store-map-card strong {
  display: block;
  font-family: var(--font-display);
  font-size: 0.9rem;
  color: var(--sy-navy);
  line-height: 1.2;
}
.sy-store-map-card span:not(.sy-store-map-card-pin) {
  display: block;
  font-size: 0.74rem;
  color: #5b6b80;
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* — Marqueur — */
.sy-map-marker {
  position: relative;
  width: 52px;
  height: 64px;
  cursor: pointer;
}
.sy-map-marker-pin {
  position: absolute;
  left: 50%;
  bottom: 8px;
  width: 44px;
  height: 44px;
  margin-left: -22px;
  border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg);
  background: linear-gradient(160deg, #ff9a4d, var(--sy-orange) 60%, #d9640f);
  border: 3px solid #fff;
  box-shadow: 0 10px 24px rgba(247, 127, 33, 0.45), 0 2px 4px rgba(10, 28, 48, 0.25);
  display: grid;
  place-items: center;
  transition: transform 0.2s;
}
.sy-map-marker:hover .sy-map-marker-pin { transform: rotate(-45deg) scale(1.08); }
.sy-map-marker-face {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  overflow: hidden;
  transform: rotate(45deg);
  background: #fff;
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 0.9rem;
  color: var(--sy-navy);
}
.sy-map-marker-face img { width: 100%; height: 100%; object-fit: cover; }
.sy-map-marker-shadow {
  position: absolute;
  left: 50%;
  bottom: 2px;
  width: 22px;
  height: 8px;
  margin-left: -11px;
  border-radius: 50%;
  background: rgba(10, 28, 48, 0.28);
  filter: blur(2px);
}
.sy-map-marker-pulse {
  position: absolute;
  left: 50%;
  bottom: -4px;
  width: 26px;
  height: 26px;
  margin-left: -13px;
  border-radius: 50%;
  background: rgba(247, 127, 33, 0.35);
  animation: sy-map-pulse 2.2s ease-out infinite;
}
@keyframes sy-map-pulse {
  0%   { transform: scale(0.6); opacity: 0.9; }
  100% { transform: scale(2.6); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .sy-map-marker-pulse { animation: none; }
}

/* — Popup — */
.sy-store-map-gl .maplibregl-popup-content {
  padding: 0;
  border-radius: 14px;
  box-shadow: 0 14px 40px rgba(10, 28, 48, 0.22);
  overflow: hidden;
  font-family: inherit;
}
.sy-store-map-gl .maplibregl-popup-tip { border-top-color: #fff; }
.sy-map-popup {
  display: grid;
  gap: 0.3rem;
  padding: 0.85rem 0.95rem;
  min-width: 200px;
}
.sy-map-popup strong {
  font-family: var(--font-display);
  font-size: 0.95rem;
  color: var(--sy-navy);
}
.sy-map-popup-rating,
.sy-map-popup-addr {
  display: inline-flex;
  align-items: flex-start;
  gap: 0.35rem;
  font-size: 0.78rem;
  color: #5b6b80;
  line-height: 1.35;
}
.sy-map-popup-rating { color: #b45309; font-weight: 700; }
.sy-map-popup-rating .bi { color: #f5a524; }
.sy-map-popup-addr .bi { color: var(--sy-orange); margin-top: 0.1rem; }
.sy-map-popup a {
  margin-top: 0.35rem;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  justify-self: start;
  padding: 0.4rem 0.75rem;
  border-radius: 999px;
  background: var(--sy-navy);
  color: #fff;
  font-size: 0.78rem;
  font-weight: 700;
  text-decoration: none;
}
.sy-map-popup a:hover { background: var(--sy-orange); color: #fff; }

@media (max-width: 720px) {
  .sy-store-map-wrap, .sy-store-map-gl { min-height: 300px; }
  .sy-store-map-card { max-width: calc(100% - 5rem); padding: 0.5rem 0.7rem 0.5rem 0.5rem; }
  .sy-store-map-card strong { font-size: 0.82rem; }
}

/* Boutiques à découvrir — v2.1 : cartes plus grandes, couvertures mieux visibles */
.sy-dokan-stores-grid--4,
.page-home-premium .sy-dokan-stores-grid--4 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.4rem, 2.4vw, 2.1rem);
}

.sy-dokan-list-cover {
  min-height: 270px;
  aspect-ratio: 16 / 10.5;
}

.sy-dokan-list-cover > img {
  object-fit: cover;
}

.sy-dokan-list-overlay {
  background:
    linear-gradient(to top, rgba(8, 22, 40, 0.94) 0%, rgba(8, 22, 40, 0.62) 30%, rgba(8, 22, 40, 0.08) 56%, rgba(8, 22, 40, 0.14) 100%);
}

.sy-dokan-list-info {
  padding: 1.2rem 6rem 1.3rem 1.3rem;
  min-height: 44%;
}

.sy-dokan-list-name {
  font-size: clamp(1.15rem, 1.6vw, 1.45rem);
}

.sy-dokan-list-stars {
  font-size: 0.86rem;
}

.sy-dokan-list-score {
  font-size: 0.8rem;
}

.sy-dokan-list-address {
  font-size: 0.84rem;
}

.sy-dokan-list-status {
  font-size: 0.72rem;
  padding: 0.4rem 0.8rem 0.4rem 0.7rem;
}

.sy-dokan-list-sector {
  font-size: 0.72rem;
  padding: 0.4rem 0.85rem;
}

.sy-dokan-list-logo {
  right: 1.15rem;
  bottom: 1.15rem;
  width: 68px;
  height: 68px;
  border-radius: 20px;
  font-size: 1.55rem;
}

.sy-dokan-list-logo img {
  border-radius: 16px;
}

@media (max-width: 1100px) {
  .sy-dokan-stores-grid--4,
  .page-home-premium .sy-dokan-stores-grid--4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .sy-dokan-list-cover {
    min-height: 250px;
  }
}

@media (max-width: 620px) {
  .sy-dokan-stores-grid--4,
  .page-home-premium .sy-dokan-stores-grid--4 {
    grid-template-columns: 1fr;
    gap: 1.25rem;
  }

  .sy-dokan-list-cover {
    min-height: 230px;
    aspect-ratio: 16 / 10;
  }

  .sy-dokan-list-info {
    padding: 1rem 5.25rem 1.1rem 1.1rem;
  }

  .sy-dokan-list-logo {
    width: 58px;
    height: 58px;
    border-radius: 17px;
  }
}

/* ============================================================
   Boutiques à découvrir — v3 : groupes par secteur, cartes plus grandes
   ============================================================ */
.sy-store-groups {
  display: grid;
  gap: clamp(2.25rem, 4vw, 3.25rem);
}

.sy-store-group-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.15rem;
  padding-bottom: 0.9rem;
  border-bottom: 1px solid rgba(12, 35, 64, 0.1);
}

.sy-store-group-title {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  min-width: 0;
}

.sy-store-group-title h3 {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 1.8vw, 1.45rem);
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--sy-navy);
  line-height: 1.2;
}

.sy-store-group-title p {
  margin: 0.15rem 0 0;
  font-size: 0.8rem;
  color: var(--muted, #5b6b7f);
}

.sy-store-group-icon {
  flex: 0 0 auto;
  width: 46px;
  height: 46px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  font-size: 1.3rem;
  color: #fff;
  background: linear-gradient(140deg, var(--sy-navy), #1d4a78);
  box-shadow: 0 8px 18px -8px rgba(12, 35, 64, 0.5);
}

.sy-store-group-link {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.55rem 1rem;
  border-radius: 999px;
  background: #fff;
  border: 1px solid rgba(12, 35, 64, 0.12);
  color: var(--sy-navy);
  font-size: 0.82rem;
  font-weight: 700;
  text-decoration: none;
  transition: background 0.2s, color 0.2s, transform 0.2s, border-color 0.2s;
}

.sy-store-group-link:hover {
  background: var(--sy-navy);
  border-color: var(--sy-navy);
  color: #fff;
  transform: translateX(2px);
}

.sy-dokan-stores-grid--3:not(.sy-stores-track) {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.4rem, 2.4vw, 2rem);
  width: 100%;
}

.sy-stores-marquee > .sy-stores-track:not(.is-marquee-css) {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  gap: clamp(1rem, 2vw, 1.25rem);
  padding: 0;
}

.sy-stores-marquee > .sy-stores-track:not(.is-marquee-css) > .sy-store-card,
.sy-stores-marquee > .sy-stores-track:not(.is-marquee-css) > .sy-dokan-list-card {
  flex: 0 0 calc((100% - 2 * clamp(1rem, 2vw, 1.25rem)) / 3);
  max-width: calc((100% - 2 * clamp(1rem, 2vw, 1.25rem)) / 3);
  min-width: 0;
  scroll-snap-align: start;
}

.sy-store-groups {
  display: flex;
  flex-direction: column;
  gap: clamp(2rem, 4vw, 2.75rem);
}

.sy-dokan-stores-grid--sector,
.sy-dokan-stores-grid--home {
  margin-top: 0.25rem;
}

.sy-dokan-stores-grid--sector .sy-dokan-list-card,
.sy-dokan-stores-grid--home .sy-dokan-list-card {
  min-width: 0;
}

/* Cartes plus grandes : la couverture devient réellement visible */
.sy-dokan-stores-grid--3 .sy-dokan-list-cover {
  min-height: 280px;
  aspect-ratio: 16 / 10.5;
}

.sy-dokan-stores-grid--3 .sy-dokan-list-overlay {
  background:
    linear-gradient(to top, rgba(8, 22, 40, 0.94) 0%, rgba(8, 22, 40, 0.62) 30%, rgba(8, 22, 40, 0.08) 56%, rgba(8, 22, 40, 0.12) 100%);
}

.sy-dokan-stores-grid--3 .sy-dokan-list-info {
  min-height: 44%;
  padding: 1.25rem 6rem 1.3rem 1.3rem;
}

.sy-dokan-stores-grid--3 .sy-dokan-list-name {
  font-size: clamp(1.15rem, 1.5vw, 1.4rem);
}

.sy-dokan-stores-grid--3 .sy-dokan-list-stars {
  font-size: 0.84rem;
}

.sy-dokan-stores-grid--3 .sy-dokan-list-address {
  font-size: 0.82rem;
}

.sy-dokan-stores-grid--3 .sy-dokan-list-logo {
  width: 68px;
  height: 68px;
  right: 1.15rem;
  bottom: 1.15rem;
  border-radius: 20px;
  font-size: 1.5rem;
}

.sy-dokan-stores-grid--3 .sy-dokan-list-logo img {
  border-radius: 16px;
}

.sy-dokan-stores-grid--3 .sy-dokan-list-status,
.sy-dokan-stores-grid--3 .sy-dokan-list-sector {
  top: 1rem;
}

.sy-dokan-stores-grid--3 .sy-dokan-list-status {
  left: 1rem;
  font-size: 0.7rem;
}

.sy-dokan-stores-grid--3 .sy-dokan-list-sector {
  right: 1rem;
  font-size: 0.7rem;
  padding: 0.38rem 0.8rem;
}

/* Bannières générées : cadrage centré (dégradé bleu SANIYORO) */
.sy-dokan-list-cover.is-generated > img {
  object-position: center;
}

@media (max-width: 1100px) {
  .sy-dokan-stores-grid--3:not(.sy-stores-track) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .sy-dokan-stores-grid--3 .sy-dokan-list-cover {
    min-height: 250px;
  }
}

@media (max-width: 640px) {
  .sy-store-group-head {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
  }

  .sy-store-group-icon {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    font-size: 1.1rem;
  }

  .sy-dokan-stores-grid--3:not(.sy-stores-track) {
    grid-template-columns: 1fr;
    gap: 1.15rem;
  }

  .sy-dokan-stores-grid--3 .sy-dokan-list-cover {
    min-height: 220px;
    aspect-ratio: 16 / 10;
  }

  .sy-dokan-stores-grid--3 .sy-dokan-list-info {
    padding: 1rem 5.25rem 1rem 1rem;
  }

  .sy-dokan-stores-grid--3 .sy-dokan-list-logo {
    width: 58px;
    height: 58px;
    border-radius: 16px;
  }
}

/* Correctif : aspect-ratio + min-height transférait une largeur mini → débordement de colonne. On fixe la hauteur. */
.sy-dokan-list-cover,
.sy-dokan-stores-grid--3 .sy-dokan-list-cover {
  aspect-ratio: auto;
  width: 100%;
  min-height: 0;
  height: 236px;
}

.sy-dokan-stores-grid--3 .sy-dokan-list-cover {
  height: clamp(250px, 21vw, 300px);
}

@media (max-width: 1100px) {
  .sy-dokan-stores-grid--3 .sy-dokan-list-cover {
    height: clamp(230px, 30vw, 280px);
  }
}

@media (max-width: 640px) {
  .sy-dokan-list-cover,
  .sy-dokan-stores-grid--3 .sy-dokan-list-cover {
    height: clamp(200px, 56vw, 250px);
  }
}
/* Marges latérales de la section boutiques sur écrans étroits (cartes non collées aux bords) */
@media (max-width: 1300px) {
  .sy-dokan-stores-shell {
    padding-left: clamp(1rem, 4vw, 1.75rem);
    padding-right: clamp(1rem, 4vw, 1.75rem);
  }
}

/* (bloc restauré) */

/* ============================================================
   Footer v2 — 4 colonnes + barre légale
   ============================================================ */
.sy-footer-v2 {
  padding: 0;
  background: linear-gradient(180deg, #0c2138 0%, var(--sy-navy) 100%);
  color: rgba(255, 255, 255, 0.82);
  border-top: 3px solid var(--sy-orange);
}
.sy-footer-top { padding: 3rem 0 2.25rem; }
.sy-footer-columns {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr));
  gap: 2.5rem;
}
.sy-footer-col { display: flex; flex-direction: column; gap: 0.6rem; min-width: 0; }
.sy-footer-col h4 {
  margin: 0 0 0.5rem;
  font-family: var(--font-display);
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #fff;
  position: relative;
  padding-bottom: 0.6rem;
}
.sy-footer-col h4::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 28px;
  height: 3px;
  border-radius: 999px;
  background: var(--sy-orange);
}
.sy-footer-col a,
.sy-footer-col > span {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  color: rgba(255, 255, 255, 0.78);
  text-decoration: none;
  font-size: 0.9rem;
  line-height: 1.4;
  transition: color 0.15s, transform 0.15s;
}
.sy-footer-col a:hover { color: #fff; transform: translateX(3px); }
.sy-footer-col a i,
.sy-footer-col > span i {
  color: var(--sy-orange);
  font-size: 0.95rem;
  flex-shrink: 0;
}

.sy-footer-logo {
  display: inline-flex !important;
  align-items: center;
  gap: 0.75rem;
  transform: none !important;
}
.sy-footer-logo img {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: #fff;
  padding: 4px;
}
.sy-footer-logo strong {
  display: block;
  font-family: var(--font-display);
  font-size: 1.2rem;
  color: #fff;
  line-height: 1.1;
}
.sy-footer-logo small { display: block; font-size: 0.78rem; opacity: 0.7; }
.sy-footer-desc {
  margin: 0.5rem 0 0;
  font-size: 0.9rem;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.72);
  max-width: 34rem;
}
.sy-footer-pay-logos {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.75rem;
}
.sy-footer-pay-logos img {
  height: 30px;
  width: 46px;
  object-fit: contain;
  background: #fff;
  border-radius: 8px;
  padding: 3px 5px;
}
.sy-footer-pay-logos span { font-size: 0.78rem; opacity: 0.7; margin-left: 0.25rem; }

.sy-footer-social { display: flex; gap: 0.5rem; margin-top: 0.6rem; }
.sy-footer-social a {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: grid !important;
  place-items: center;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #fff;
  font-size: 1rem;
  transform: none !important;
}
.sy-footer-social a:hover { background: var(--sy-orange); border-color: var(--sy-orange); }

.sy-footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding: 1rem 0;
  background: rgba(0, 0, 0, 0.15);
}
.sy-footer-bottom-inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 0.75rem 1.5rem;
}
.sy-footer-v2 .sy-footer-copy {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 0.8rem;
  opacity: 0.7;
}
.sy-footer-v2 .sy-footer-copy a { color: var(--sy-gold); text-decoration: none; font-weight: 700; }
.sy-footer-legal { display: flex; flex-wrap: wrap; gap: 0.35rem 1.35rem; }
.sy-footer-legal a {
  color: rgba(255, 255, 255, 0.75);
  text-decoration: none;
  font-size: 0.8rem;
  font-weight: 600;
}
.sy-footer-legal a:hover { color: var(--sy-gold); text-decoration: underline; }

@media (max-width: 1000px) {
  .sy-footer-columns { grid-template-columns: 1fr 1fr; gap: 2rem; }
  .sy-footer-about { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
  .sy-footer-top { padding: 2.25rem 0 1.75rem; }
  .sy-footer-columns { grid-template-columns: 1fr; gap: 1.75rem; }
  .sy-footer-bottom-inner { flex-direction: column; align-items: flex-start; }
}

/* ============================================================
   Pages légales
   ============================================================ */
.sy-legal-page { padding-top: 1rem; }
.sy-legal-updated {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin: -0.5rem 0 1.25rem;
  font-size: 0.8rem;
  color: var(--muted, #64748a);
}
.sy-legal-updated i { color: var(--sy-orange); }
.sy-legal-block { margin-bottom: 1rem; padding: 1.35rem 1.5rem; border-radius: 16px; }
.sy-legal-block h2 {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin: 0 0 0.75rem;
  font-family: var(--font-display);
  font-size: 1.08rem;
  font-weight: 800;
  color: var(--sy-navy);
}
.sy-legal-block h2 i {
  width: 32px;
  height: 32px;
  border-radius: 9px;
  display: grid;
  place-items: center;
  background: rgba(247, 127, 33, 0.12);
  color: var(--sy-orange);
  font-size: 0.95rem;
}
.sy-legal-block p { display: block; margin: 0 0 0.75rem; line-height: 1.7; }
.sy-legal-block p:last-child { margin-bottom: 0; }
.sy-legal-block ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 0.5rem; }
.sy-legal-block ul li {
  position: relative;
  padding-left: 1.5rem;
  line-height: 1.6;
  color: var(--muted, #4b5a6c);
}
.sy-legal-block ul li::before {
  content: "";
  position: absolute;
  left: 0.15rem;
  top: 0.6rem;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--sy-orange);
  box-shadow: 0 0 0 3px rgba(247, 127, 33, 0.16);
}
.sy-legal-block strong { color: var(--sy-navy); }
.sy-legal-block a { color: var(--sy-orange); font-weight: 600; text-decoration: none; }
.sy-legal-block a:hover { text-decoration: underline; }
.sy-legal-dl {
  display: grid;
  grid-template-columns: minmax(140px, 200px) 1fr;
  gap: 0.55rem 1rem;
  margin: 0;
}
.sy-legal-dl dt { font-weight: 700; color: var(--sy-navy); font-size: 0.9rem; }
.sy-legal-dl dd { margin: 0; color: var(--muted, #4b5a6c); line-height: 1.55; }
.sy-legal-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-top: 1.5rem;
}
.sy-legal-links a {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.6rem 1rem;
  border-radius: 999px;
  background: #fff;
  border: 1px solid rgba(10, 28, 48, 0.1);
  color: var(--sy-navy);
  font-weight: 700;
  font-size: 0.85rem;
  text-decoration: none;
  transition: border-color 0.15s, color 0.15s, transform 0.15s;
}
.sy-legal-links a:hover { border-color: var(--sy-orange); color: var(--sy-orange); transform: translateY(-2px); }
.sy-legal-links a i { color: var(--sy-orange); }
@media (max-width: 560px) {
  .sy-legal-dl { grid-template-columns: 1fr; gap: 0.15rem 0; }
  .sy-legal-dl dd { margin-bottom: 0.6rem; }
}


/* ============================================================
   Mobile — maquette SANIYORO (header search + tab bar)
   ============================================================ */
.sy-mobile-tabbar {
  display: none;
}

@media (max-width: 768px) {
  body.saniyoro {
    padding-bottom: calc(4.75rem + env(safe-area-inset-bottom, 0px));
    --header-h: 148px;
  }

  body.saniyoro .sy-header-v2 {
    --header-h: 148px;
  }

  body.saniyoro .sy-header-brand {
    max-width: none;
    flex: 0 0 auto;
    order: 1;
  }

  body.saniyoro .sy-brand-logo-full {
    width: auto;
    height: 44px;
    max-width: min(210px, 58vw);
    min-width: 140px;
    border-radius: 0;
  }

  /* Ligne 1 : logo + menu (panier dans la tab bar) */
  body.saniyoro .sy-header-actions {
    order: 2;
    margin-left: auto;
  }

  body.saniyoro .sy-header-login--toolbar {
    display: none;
  }

  body.saniyoro .sy-header-cart {
    display: none;
  }

  body.saniyoro .sy-header-toggle {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    border: 1px solid #e2e8f0;
    background: #fff;
  }

  /* Ligne 2 : recherche pleine largeur — style maquette */
  body.saniyoro .sy-header-search {
    flex: 1 1 100%;
    width: 100%;
    min-width: 0;
    order: 3;
    gap: 0.45rem;
    padding: 0.35rem 0.4rem 0.35rem 0.8rem;
    background: #f3f6fa;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    box-shadow: none;
  }

  body.saniyoro .sy-header-search:focus-within {
    background: #fff;
    border-color: rgba(247, 127, 33, 0.45);
    box-shadow: 0 0 0 3px rgba(247, 127, 33, 0.1);
  }

  body.saniyoro .sy-header-search .sy-search-icon {
    color: var(--sy-orange);
    font-size: 1.05rem;
  }

  body.saniyoro .sy-header-search input[type="search"] {
    font-size: 0.88rem;
    padding: 0.42rem 0;
  }

  body.saniyoro .sy-header-search input[type="search"]::placeholder {
    color: #8a97a8;
  }

  body.saniyoro .sy-header-search .sy-search-submit {
    display: none;
  }

  body.saniyoro .sy-header-search .sy-search-image {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: rgba(247, 127, 33, 0.1);
    border: 1px solid rgba(247, 127, 33, 0.2);
    font-size: 1rem;
  }

  body.saniyoro .sy-header-commune {
    order: 4;
    flex: 1 1 100%;
    justify-content: center;
    padding: 0.55rem 0.85rem;
    border-radius: 14px;
    background: #fff;
  }

  body.saniyoro .sy-header-commune select {
    max-width: none;
    flex: 1;
    text-align: center;
  }

  /* Tab bar bas — maquette 5 onglets */
  .sy-mobile-tabbar {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 120;
    padding: 0.35rem 0.25rem calc(0.45rem + env(safe-area-inset-bottom, 0px));
    background: rgba(255, 255, 255, 0.97);
    border-top: 1px solid #e8edf3;
    box-shadow: 0 -8px 28px rgba(10, 28, 48, 0.08);
    backdrop-filter: blur(12px);
  }

  .sy-tabbar-link {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.15rem;
    padding: 0.35rem 0.15rem;
    border: 0;
    background: transparent;
    color: #7a8798;
    font: inherit;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    text-decoration: none;
    cursor: pointer;
    border-radius: 10px;
    transition: color 0.2s, background 0.2s;
  }

  .sy-tabbar-link i {
    font-size: 1.25rem;
    line-height: 1;
  }

  .sy-tabbar-link.is-active {
    color: var(--sy-orange);
  }

  .sy-tabbar-link.is-active i {
    transform: translateY(-1px);
  }

  .sy-tabbar-badge {
    position: absolute;
    top: 0.1rem;
    right: calc(50% - 1.35rem);
    min-width: 1rem;
    height: 1rem;
    padding: 0 0.2rem;
    border-radius: 999px;
    background: var(--sy-orange);
    color: #fff;
    font-style: normal;
    font-size: 0.58rem;
    font-weight: 800;
    line-height: 1rem;
    text-align: center;
  }

  /* CTA hero — boutons pleine largeur type maquette */
  .sy-hero-actions .btn,
  .sy-hero-actions .sy-btn-primary,
  .sy-hero-actions .sy-btn-outline,
  .sy-hero-actions .sy-btn-hero-primary,
  .sy-hero-actions .sy-btn-hero-secondary {
    width: 100%;
    justify-content: center;
    min-height: 50px;
    border-radius: 14px;
    font-size: 0.95rem;
    font-weight: 800;
  }

  .sy-hero-actions .sy-btn-primary,
  .sy-hero-actions .sy-btn-hero-primary {
    box-shadow: 0 8px 22px rgba(247, 127, 33, 0.35);
  }

  .sy-hero-actions .sy-btn-hero-secondary {
    background: transparent;
    border-color: rgba(255, 255, 255, 0.55);
  }
}

/* Bannière mise à jour PWA */
.sy-pwa-update {
  position: fixed;
  left: 0;
  right: 0;
  bottom: calc(4.85rem + env(safe-area-inset-bottom, 0px));
  z-index: 130;
  padding: 0 0.75rem;
  pointer-events: none;
  animation: sy-pwa-slide-up 0.35s ease;
}

@media (min-width: 769px) {
  .sy-pwa-update {
    bottom: 1rem;
    max-width: 520px;
    left: auto;
    right: 1rem;
    padding: 0;
  }
}

.sy-pwa-update.is-hidden {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.25s ease, transform 0.25s ease;
}

.sy-pwa-update-inner {
  pointer-events: auto;
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.9rem 1rem;
  border-radius: 16px;
  background: linear-gradient(135deg, #0c2340 0%, #143a64 100%);
  color: #fff;
  box-shadow: 0 16px 40px rgba(10, 28, 48, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.12);
}

.sy-pwa-update-icon {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: rgba(247, 127, 33, 0.18);
  color: var(--sy-orange);
  font-size: 1.2rem;
}

.sy-pwa-update-copy {
  flex: 1;
  min-width: 0;
}

.sy-pwa-update-copy strong {
  display: block;
  font-family: var(--font-display);
  font-size: 0.95rem;
  line-height: 1.25;
}

.sy-pwa-update-copy p {
  margin: 0.25rem 0 0;
  font-size: 0.78rem;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.82);
}

.sy-pwa-update-actions {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  flex: 0 0 auto;
}

.sy-pwa-update-btn,
.sy-pwa-update-dismiss {
  border: 0;
  border-radius: 999px;
  padding: 0.45rem 0.85rem;
  font: inherit;
  font-size: 0.75rem;
  font-weight: 800;
  cursor: pointer;
  white-space: nowrap;
}

.sy-pwa-update-btn {
  background: var(--sy-orange);
  color: #fff;
}

.sy-pwa-update-btn:hover {
  background: var(--accent-hover);
}

.sy-pwa-update-dismiss {
  background: transparent;
  color: rgba(255, 255, 255, 0.72);
}

.sy-pwa-update-dismiss:hover {
  color: #fff;
}

@media (max-width: 768px) {
  .sy-pwa-update-inner {
    flex-wrap: wrap;
  }

  .sy-pwa-update-actions {
    flex-direction: row;
    width: 100%;
  }

  .sy-pwa-update-btn {
    flex: 1;
  }
}

@keyframes sy-pwa-slide-up {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* App / mobile — pas de bas de page web (tab bar native suffit) */
@media (max-width: 768px) {
  .sy-site-footer.sy-footer-v2 {
    display: none !important;
  }
}

/* Suite FERE — barre desktop uniquement ; lien ERP dans le menu mobile */
@media (max-width: 1024px) {
  .sy-fere-bar,
  .sy-fere-bar-desktop {
    display: none !important;
  }

  body.saniyoro.fere-suite .sy-header-nav .sy-nav-link-fere {
    display: flex !important;
    margin-top: 0.35rem;
    padding: 0.85rem 0.4rem !important;
    border-top: 1px solid var(--border);
    border-bottom: 0 !important;
    color: var(--sy-orange) !important;
    font-weight: 800 !important;
  }

  body.saniyoro.fere-suite .sy-header-nav .sy-nav-link-fere i {
    opacity: 1;
    color: var(--sy-orange);
  }
}

@media (min-width: 1025px) {
  body.saniyoro .sy-header-nav .sy-nav-link-fere {
    display: none !important;
  }
}

/* ——— Logos paiement (trust strip accueil) ——— */
.sy-trust-pill--pay {
  align-items: center;
}

.sy-trust-pill--pay .sy-trust-pay-body {
  min-width: 0;
  flex: 1;
}

.sy-trust-pill--pay .sy-trust-pay-body strong {
  display: block;
  margin-bottom: 0.2rem;
}

.sy-trust-pill--pay .sy-trust-pay-logos {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  gap: 0.35rem;
  margin-top: 0;
  width: 100%;
}

.sy-trust-pay-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 1 1 0;
  min-width: 0;
  max-width: 92px;
  height: 34px;
  padding: 0.22rem 0.4rem;
  border-radius: 10px;
  background: #fff;
  border: 1px solid #e8edf3;
  box-shadow: 0 2px 8px rgba(10, 28, 48, 0.06);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.sy-trust-pay-chip:hover {
  transform: translateY(-1px);
  box-shadow: 0 5px 14px rgba(10, 28, 48, 0.1);
}

.sy-trust-pay-chip img {
  display: block;
  height: 22px;
  width: auto;
  max-width: 100%;
  object-fit: contain;
}

.sy-trust-pay-chip--orange {
  border-color: rgba(255, 121, 0, 0.28);
  background: linear-gradient(180deg, #fff8f2 0%, #fff 100%);
}

.sy-trust-pay-chip--moov {
  border-color: rgba(0, 102, 204, 0.22);
  background: linear-gradient(180deg, #f2f8ff 0%, #fff 100%);
}

.sy-trust-pay-chip--wave {
  border-color: rgba(29, 196, 255, 0.28);
  background: linear-gradient(180deg, #eefbff 0%, #fff 100%);
}

@media (min-width: 901px) {
  .sy-trust-pill--pay {
    grid-column: span 1;
  }
}

/* ——— Checkout ——— */
.sy-checkout-page {
  padding-bottom: calc(2rem + env(safe-area-inset-bottom, 0px));
}

.sy-checkout-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.35rem;
}

.sy-checkout-kicker {
  margin: 0 0 0.25rem;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--sy-orange);
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.sy-checkout-head h1 {
  margin: 0;
  font-family: var(--font-display, Outfit, sans-serif);
  font-size: clamp(1.45rem, 4vw, 1.85rem);
  color: var(--sy-navy);
}

.sy-checkout-total-pill {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.15rem;
  padding: 0.55rem 0.75rem;
  border-radius: 14px;
  background: var(--accent-soft);
  border: 1px solid rgba(247, 127, 33, 0.2);
  font-size: 0.72rem;
  color: var(--muted);
}

.sy-checkout-total-pill strong {
  font-size: 1rem;
  color: var(--sy-navy);
}

.sy-checkout-summary {
  margin: 0 0 1.15rem;
  font-size: 0.88rem;
  color: var(--muted);
}

.sy-checkout-form {
  display: grid;
  gap: 1rem;
}

.sy-checkout-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 1.1rem 1.15rem;
  box-shadow: var(--sy-shadow);
}

.sy-checkout-card h2 {
  margin: 0 0 0.85rem;
  font-size: 0.95rem;
  font-weight: 800;
  color: var(--sy-navy);
}

.sy-checkout-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
}

.sy-checkout-field {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  margin: 0;
}

.sy-checkout-field--full {
  grid-column: 1 / -1;
}

.sy-checkout-field span {
  font-size: 0.78rem;
  font-weight: 700;
  color: #4a5a6e;
}

.sy-checkout-field input,
.sy-checkout-field select,
.sy-checkout-field textarea {
  width: 100%;
  min-height: 46px;
  padding: 0.65rem 0.85rem;
  border: 1.5px solid #dce4ef;
  border-radius: 12px;
  background: #fff;
  font-size: 0.92rem;
  color: var(--sy-navy);
  transition: border-color 0.15s, box-shadow 0.15s;
}

.sy-checkout-field input:focus,
.sy-checkout-field select:focus,
.sy-checkout-field textarea:focus {
  outline: none;
  border-color: rgba(247, 127, 33, 0.55);
  box-shadow: 0 0 0 3px rgba(247, 127, 33, 0.12);
}

.sy-checkout-field textarea {
  min-height: 88px;
  resize: vertical;
}

.sy-payment-fieldset legend {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.95rem;
  font-weight: 800;
  color: var(--sy-navy);
  margin-bottom: 0.85rem;
}

.sy-payment-options {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.sy-payment-option .payment-option-card {
  min-height: 74px;
  border-radius: 14px;
}

.sy-payment-option .payment-option-card img {
  width: 46px;
  height: 46px;
  object-fit: contain;
  border-radius: 10px;
  background: #f8fafc;
  padding: 0.2rem;
}

.sy-payment-option input:checked + .payment-option-card {
  border-color: var(--sy-orange);
  background: rgba(247, 127, 33, 0.06);
  box-shadow: 0 0 0 3px rgba(247, 127, 33, 0.12);
}

.sy-checkout-pay-logos {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.55rem;
  margin-top: 0.85rem;
  padding-top: 0.85rem;
  border-top: 1px dashed #e8edf3;
}

.sy-checkout-pay-logos img {
  height: 24px;
  width: auto;
  max-width: 72px;
  object-fit: contain;
  opacity: 0.92;
}

.sy-checkout-submit {
  width: 100%;
  min-height: 52px;
  border-radius: 14px;
  font-size: 0.95rem;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  box-shadow: 0 10px 26px rgba(247, 127, 33, 0.32);
}

@media (max-width: 768px) {
  /* En-tête fixe au scroll (logo + recherche + commune) */
  body.saniyoro .site-header.sy-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    z-index: 220;
  }

  body.saniyoro.fere-suite .site-header.sy-header {
    top: 0;
  }

  body.saniyoro .site-main {
    padding-top: var(--sy-header-offset, 148px);
  }

  body.saniyoro .sy-header-shell {
    padding-top: calc(0.45rem + env(safe-area-inset-top, 0px));
  }

  .sy-checkout-grid,
  .sy-payment-options {
    grid-template-columns: 1fr;
  }

  .sy-checkout-head {
    flex-direction: column;
    align-items: stretch;
  }

  .sy-checkout-total-pill {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    width: 100%;
  }

  .sy-trust-pill--pay .sy-trust-pay-logos {
    flex-wrap: nowrap;
    gap: 0.35rem;
  }

  .sy-trust-pay-chip {
    flex: 1 1 0;
    max-width: none;
    height: 36px;
    padding: 0.28rem 0.35rem;
  }

  .sy-trust-pay-chip img {
    height: 24px;
    max-width: 100%;
  }
}