/* Saveurs Naija — design system partagé (thème enfant).
   Ported depuis les styles inline dupliqués sur les 12 pages .dc.html. */

:root {
  --sn-cream: #FAF5EE;
  --sn-cream-alt: #FDF6EC;
  --sn-cream-alt2: #FAF0E6;
  --sn-brown: #1E0F08;
  --sn-brown-text: #3D2A1F;
  --sn-terracotta: #C4622D;
  --sn-gold: #D4A547;
  --sn-white: #FFFDF9;
}

html, body { margin: 0; background: var(--sn-cream); overflow-x: hidden; font-family: 'Work Sans', sans-serif; color: var(--sn-brown-text); }
* { box-sizing: border-box; }
a { color: var(--sn-terracotta); text-decoration: none; }
a:hover { color: var(--sn-gold); }
[x-cloak] { display: none !important; }

/* ===== HEADER ===== */
.sn-header {
  position: sticky; top: 0; z-index: 50; background: #FFFFFF;
  border-bottom: 1px solid #1E0F0814; display: flex; align-items: center;
  justify-content: space-between; padding: 16px 32px; gap: 16px;
}
.sn-logo-link { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.sn-nav { display: flex; align-items: center; gap: 20px; flex-shrink: 1; min-width: 0; overflow: hidden; }
.sn-nav a { color: var(--sn-brown); font-size: 14px; font-weight: 600; white-space: nowrap; }
.sn-nav a:hover { color: var(--sn-terracotta); }
.sn-nav a.is-active { color: var(--sn-terracotta); font-weight: 700; border-bottom: 2px solid var(--sn-terracotta); padding-bottom: 2px; }
.sn-nav-sep { width: 1px; height: 18px; background: #1E0F0822; flex-shrink: 0; }
.sn-header-actions { display: flex; align-items: center; gap: 10px; flex-shrink: 1; min-width: 0; }
.sn-search-wrap { position: relative; width: 190px; flex-shrink: 1; min-width: 100px; }
.sn-search-form { display: flex; align-items: center; gap: 8px; border: 1.5px solid var(--sn-terracotta); border-radius: 999px; padding: 9px 14px; }
.sn-search-icon { color: var(--sn-terracotta); font-size: 14px; flex-shrink: 0; }
.sn-search-input { border: none; outline: none; background: transparent; font-size: 13px; width: 100%; min-width: 0; color: var(--sn-brown); font-family: 'Work Sans', sans-serif; }
.sn-search-suggestions { position: absolute; top: calc(100% + 6px); left: 0; right: 0; background: #FFFFFF; border: 1px solid #1E0F0814; border-radius: 14px; box-shadow: 0 16px 32px -12px #1E0F0840; overflow: hidden; z-index: 70; }
.sn-suggestion-item { display: block; padding: 10px 14px; border-bottom: 1px solid #1E0F080a; }
.sn-suggestion-item:hover { background: var(--sn-cream); }
.sn-suggestion-title { font-size: 12.5px; font-weight: 600; color: var(--sn-brown); }
.sn-suggestion-type { font-size: 10.5px; color: var(--sn-terracotta); text-transform: uppercase; letter-spacing: 0.04em; }
.sn-icon-link { color: var(--sn-brown); font-size: 19px; flex-shrink: 0; }
.sn-icon-link:hover { color: var(--sn-terracotta); }
.sn-mobile-toggle { display: none; flex-direction: column; justify-content: center; gap: 5px; width: 34px; height: 34px; background: transparent; border: none; cursor: pointer; padding: 0; flex-shrink: 0; }
.sn-mobile-toggle span { display: block; width: 22px; height: 2px; background: var(--sn-brown); }
.sn-mobile-panel { position: absolute; top: 100%; left: 0; right: 0; background: #FFFFFF; border-bottom: 1px solid #1E0F0814; display: flex; flex-direction: column; padding: 8px 24px 20px; gap: 4px; box-shadow: 0 12px 24px -12px #1E0F0833; z-index: 60; }
.sn-mobile-panel a { color: var(--sn-brown); font-size: 15px; font-weight: 600; padding: 12px 0; }
.sn-mobile-panel a.is-active { color: var(--sn-terracotta); font-weight: 700; border-bottom: 2px solid var(--sn-terracotta); }

@media (max-width: 760px) {
  .sn-nav { display: none !important; }
  .sn-mobile-toggle { display: flex !important; }
}

/* ===== FOOTER ===== */
.sn-footer { position: relative; background: var(--sn-brown); padding: 60px 56px 0; }
.sn-footer::after {
  content: ''; position: absolute; inset: 0;
  background-image: url('/apercu-elegant/assets/texture-mudcloth-brun.jpg?v=20260814a');
  background-size: cover; background-position: center; opacity: 0.14;
  pointer-events: none; mix-blend-mode: overlay;
}
.sn-footer-inner { position: relative; z-index: 1; }
.sn-footer-note { text-align: center; font-size: 14.5px; color: #FAF5EEcc; padding-bottom: 44px; }
.sn-footer-note a { color: var(--sn-gold); text-decoration: underline; }
.sn-footer-grid { display: grid; grid-template-columns: 1fr 1fr 1fr 1.3fr; gap: 40px; padding-bottom: 48px; border-top: 1px solid #FAF5EE1a; padding-top: 48px; }
.sn-footer-col-title { font-size: 13px; font-weight: 700; letter-spacing: 0.05em; color: var(--sn-cream); margin-bottom: 18px; }
.sn-footer-links { display: flex; flex-direction: column; gap: 12px; }
.sn-footer-links a { color: #FAF5EEcc; font-size: 14px; }
.sn-footer-links a:hover { color: var(--sn-gold); }
.sn-newsletter-text { font-size: 13.5px; color: #FAF5EEaa; margin: 0 0 16px; line-height: 1.6; }
.sn-newsletter-form { display: flex; align-items: center; background: #FAF5EE0d; border: 1px solid #FAF5EE33; border-radius: 999px; padding: 6px 6px 6px 18px; }
.sn-newsletter-form input { background: transparent; border: none; padding: 8px 0; color: var(--sn-cream); font-size: 13.5px; flex: 1; outline: none; font-family: 'Work Sans', sans-serif; }
.sn-newsletter-form button { background: var(--sn-terracotta); border: none; color: var(--sn-cream); width: 32px; height: 32px; border-radius: 50%; cursor: pointer; font-size: 14px; }
.sn-newsletter-form button:hover { background: var(--sn-gold); color: var(--sn-brown); }
.sn-newsletter-sent { font-size: 12.5px; color: var(--sn-gold); margin: 10px 0 0; }
.sn-footer-social { position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; gap: 16px; padding: 8px 0 28px; border-top: 1px solid #FAF5EE1a; }
.sn-social-icon { width: 38px; height: 38px; border-radius: 50%; border: 1px solid #FAF5EE44; display: flex; align-items: center; justify-content: center; color: #FAF5EE66; font-size: 15px; }
.sn-social-icon.is-link { color: #FAF5EEcc; }
.sn-social-icon.is-link:hover { border-color: var(--sn-gold); color: var(--sn-gold); }
.sn-footer-copy { position: relative; z-index: 1; text-align: center; font-size: 12px; color: #FAF5EE66; padding-bottom: 24px; }

@media (max-width: 760px) {
  .sn-footer-grid { grid-template-columns: 1fr 1fr !important; gap: 28px !important; }
}
@media (max-width: 480px) {
  .sn-footer-grid { grid-template-columns: 1fr !important; }
}

/* ===== NOTRE HISTOIRE (spécifique, réutilisable si d'autres pages en ont besoin) ===== */
.sn-hist-section { position: relative; }
.sn-hist-hero { position: relative; min-height: 420px; display: flex; align-items: center; overflow: hidden; }
.sn-hist-grid { display: grid; align-items: center; gap: 48px; }
.sn-values-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; max-width: 1180px; margin: 0 auto; }
.sn-cta-inner { position: relative; border-radius: 24px; overflow: hidden; background: var(--sn-brown); padding: 64px 60px; text-align: center; }

@media (max-width: 960px) {
  .sn-hist-grid { grid-template-columns: 1fr !important; gap: 28px !important; }
  .sn-hist-grid.sn-chapter-reverse > div:first-child { order: 2 !important; }
  .sn-hist-grid.sn-chapter-reverse > div:last-child { order: 1 !important; }
  .sn-values-grid { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 760px) {
  .sn-hist-hero h1 { font-size: 32px !important; }
  .sn-hist-section { padding: 56px 24px !important; }
  .sn-values-grid { grid-template-columns: 1fr !important; }
  .sn-cta-inner { padding: 40px 28px !important; }
}

/* ===== AVIS ===== */
@media (max-width: 960px) {
  .sn-avis-testimonials { grid-template-columns: repeat(2, 1fr) !important; }
  .sn-avis-form-grid { grid-template-columns: 1fr !important; gap: 32px !important; }
}
@media (max-width: 760px) {
  .sn-avis-testimonials { grid-template-columns: 1fr !important; }
}

/* ===== FAQ ===== */
@media (max-width: 960px) {
  .sn-faq-wrap { padding: 56px 32px !important; }
}
@media (max-width: 760px) {
  .sn-faq-wrap { padding: 40px 20px !important; }
  .sn-faq-q { padding: 18px 20px !important; font-size: 15.5px !important; }
  .sn-faq-a-inner { padding: 0 20px 20px !important; }
}

/* ===== CONTACT ===== */
@media (max-width: 960px) {
  .sn-contact-grid { grid-template-columns: 1fr !important; gap: 40px !important; padding: 56px 32px !important; }
}
@media (max-width: 480px) {
  .sn-contact-coords-row { grid-template-columns: 1fr !important; gap: 14px !important; }
}

/* ===== POLICY (livraison-retours) & LEGAL (mentions-legales) ===== */
@media (max-width: 960px) {
  .sn-policy-wrap, .sn-legal-wrap { padding: 56px 32px !important; }
}
@media (max-width: 760px) {
  .sn-policy-wrap, .sn-legal-wrap { padding: 40px 20px !important; }
  .sn-policy-card, .sn-legal-card { padding: 28px 24px !important; }
}

/* ===== ACCUEIL ===== */
@keyframes wordReveal { from { clip-path: inset(100% 0 0 0); opacity: 0; transform: translateY(14px); } to { clip-path: inset(0 0 0 0); opacity: 1; transform: translateY(0); } }
@keyframes kenburns { from { transform: scale(1); } to { transform: scale(1.05); } }
@keyframes loaderPulse { 0%,100% { opacity: 0.6; transform: scale(0.96); } 50% { opacity: 1; transform: scale(1.04); } }
@keyframes ticker-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes snFloatA { 0%,100% { transform: translateY(0) rotate(-3deg); } 50% { transform: translateY(-16px) rotate(-1deg); } }
@keyframes snFloatB { 0%,100% { transform: translateY(0) rotate(2deg); } 50% { transform: translateY(-22px) rotate(4deg); } }
@keyframes snFloatC { 0%,100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-14px) rotate(-4deg); } }
@keyframes snFloatD { 0%,100% { transform: translateY(0) rotate(3deg); } 50% { transform: translateY(-20px) rotate(1deg); } }
@keyframes snFloatE { 0%,100% { transform: translateY(0) rotate(-6deg); } 50% { transform: translateY(-10px) rotate(4deg); } }
@keyframes snFloatF { 0%,100% { transform: translateY(0) rotate(5deg); } 50% { transform: translateY(-12px) rotate(-5deg); } }
@keyframes snFloatG { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }

.word { display: inline-block; animation: wordReveal 500ms ease-out both; }
.sn-float-a { animation: snFloatA 6.5s ease-in-out infinite; }
.sn-float-b { animation: snFloatB 7.8s ease-in-out infinite; animation-delay: -2s; }
.sn-float-c { animation: snFloatC 7.1s ease-in-out infinite; animation-delay: -4s; }
.sn-float-d { animation: snFloatD 8.4s ease-in-out infinite; animation-delay: -1s; }
.sn-float-e { animation: snFloatE 5.2s ease-in-out infinite; }
.sn-float-f { animation: snFloatF 6.1s ease-in-out infinite; animation-delay: -1.5s; }
.sn-float-g { animation: snFloatG 4.6s ease-in-out infinite; animation-delay: -2.5s; }

.sn-cart-link { position: relative; }
.sn-cart-badge { position: absolute; top: -8px; right: -10px; background: var(--sn-terracotta); color: var(--sn-cream); font-size: 10px; font-weight: 700; min-width: 16px; height: 16px; border-radius: 999px; display: flex; align-items: center; justify-content: center; padding: 0 3px; }

.sn-texture-brun { overflow: hidden; }
.sn-texture-brun::after { content: ''; position: absolute; inset: 0; background-image: url('/apercu-elegant/assets/texture-mudcloth-brun.jpg?v=20260814a'); background-size: cover; background-position: center; opacity: 0.14; pointer-events: none; mix-blend-mode: overlay; }
.sn-texture-terracotta::before { content: ''; position: absolute; inset: 0; background-image: url('/apercu-elegant/assets/texture-mudcloth-terracotta.jpg?v=20260814a'); background-size: cover; background-position: center; opacity: 0.22; pointer-events: none; mix-blend-mode: overlay; }

.sn-offer-card { display: block; border-radius: 22px; overflow: hidden; background: var(--sn-white); border: 1px solid #1E0F0814; transition: transform 250ms ease, box-shadow 250ms ease; }
.sn-offer-card:hover { transform: translateY(-4px); box-shadow: 0 20px 40px -16px #1E0F0833; color: inherit; }
.sn-category-link { text-align: center; border: 1.5px solid var(--sn-terracotta); border-radius: 999px; padding: 12px 10px; font-size: 12.5px; font-weight: 700; letter-spacing: 0.04em; color: var(--sn-terracotta); }
.sn-category-link:hover { background: var(--sn-terracotta); color: var(--sn-cream); }
.add-btn:hover { animation: shakeBtn 400ms ease-in-out; }
@keyframes shakeBtn { 0%,100% { transform: translateX(0); } 20% { transform: translateX(-2px); } 40% { transform: translateX(2px); } 60% { transform: translateX(-2px); } 80% { transform: translateX(2px); } }

.sn-ticker { position: relative; background: var(--sn-gold); padding: 15px 0; overflow: hidden; white-space: nowrap; }
.sn-ticker-track { display: inline-flex; animation: ticker-scroll 22s linear infinite; }
.sn-ticker-track span { font-family: 'Playfair Display', serif; font-weight: 600; font-size: 19px; color: var(--sn-brown); padding-right: 40px; }

.sn-insta-tile { transition: transform 260ms ease; }
.sn-insta-tile:hover { transform: scale(1.03); }
.sn-tier-box button:hover { background: #D4A547 !important; color: #1E0F08 !important; }

@media (max-width: 760px) {
  .sn-hero-stage { min-height: 520px !important; }
  .sn-hero-jar { width: 76px !important; opacity: 0.85; }
  .sn-hero-jar.sn-float-a { left: -3% !important; top: 2% !important; }
  .sn-hero-jar.sn-float-b { right: -3% !important; top: 2% !important; }
  .sn-hero-jar.sn-float-c { left: -3% !important; bottom: 4% !important; top: auto !important; }
  .sn-hero-jar.sn-float-d { right: -3% !important; bottom: 4% !important; top: auto !important; }
  .sn-hero-accent, .sn-hero-ingredient { display: none !important; }
  .sn-stats-grid { grid-template-columns: 1fr !important; gap: 28px !important; padding: 40px 32px !important; }
  .sn-category-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 16px !important; }
  .sn-offers-grid { grid-template-columns: 1fr !important; gap: 20px !important; }
  .sn-home-values, .sn-home-story { grid-template-columns: 1fr !important; gap: 24px !important; padding: 48px 24px !important; }
  .sn-home-values > div:last-child, .sn-home-story > div:first-child { aspect-ratio: 16/10 !important; }
  .sn-bestsellers-grid { display: flex !important; overflow-x: auto !important; scroll-snap-type: x mandatory !important; gap: 16px !important; padding-bottom: 10px !important; -webkit-overflow-scrolling: touch; }
  .sn-bestsellers-grid > * { flex: 0 0 74% !important; scroll-snap-align: start !important; }
  .sn-testimonials-grid { display: flex !important; overflow-x: auto !important; scroll-snap-type: x mandatory !important; gap: 16px !important; padding-bottom: 10px !important; -webkit-overflow-scrolling: touch; }
  .sn-testimonials-grid > * { flex: 0 0 82% !important; scroll-snap-align: start !important; }
  #traiteur { padding: 0 16px 56px !important; }
  .sn-traiteur-inner { padding: 32px 28px !important; max-width: 100% !important; }
  #products, #testimonials { padding-left: 20px !important; padding-right: 20px !important; }
}
@media (max-width: 420px) {
  .sn-hero-jar { width: 60px !important; opacity: 0.75; }
}

/* ===== RECHERCHE ===== */
.sn-result-card { display: block; background: var(--sn-white); border: 1px solid #1E0F0814; border-radius: 16px; padding: 20px 24px; margin-bottom: 12px; }
.sn-result-card:hover { border-color: var(--sn-terracotta); }
.sn-result-title { font-family: 'Playfair Display', serif; font-size: 17px; color: var(--sn-brown); margin-bottom: 4px; }
.sn-result-desc { font-size: 13.5px; color: #3D2A1F99; }

@media (max-width: 960px) {
  .sn-search-results-wrap { padding: 56px 32px !important; }
}
@media (max-width: 760px) {
  .sn-search-banner { padding: 48px 24px !important; }
  .sn-search-banner h1 { font-size: 28px !important; }
  .sn-search-results-wrap { padding: 40px 20px !important; }
  .sn-result-card { padding: 20px !important; }
}

/* ===== MON COMPTE ===== */
input, textarea { font-family: 'Work Sans', sans-serif; }
input:focus, textarea:focus { outline: none; border-color: var(--sn-terracotta) !important; }
@media (max-width: 760px) {
  .sn-acc-banner { padding: 48px 24px !important; }
  .sn-acc-banner h1 { font-size: 28px !important; }
  .sn-acc-wrap { padding: 32px 16px 80px !important; }
  .sn-acc-card { padding: 18px !important; }
}

/* ===== COMMANDER UN REPAS ===== */
@keyframes fadeIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
@media (min-width: 961px) {
  .cmd-float-cart { display: none !important; }
}
@media (max-width: 960px) {
  .cmd-layout { grid-template-columns: 1fr !important; }
  .cmd-cart-col { position: static !important; order: 2; }
  .cmd-menu-grid { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 760px) {
  .cmd-hero { padding: 48px 24px !important; }
  .cmd-hero h1 { font-size: 30px !important; }
  .cmd-menu-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 14px !important; }
  .cmd-item-pad { padding: 12px 12px 14px !important; gap: 5px !important; }
  .cmd-item-name { font-size: 14.5px !important; }
  .cmd-item-price { font-size: 12px !important; }
  .cmd-item-desc { font-size: 11.5px !important; line-height: 1.4 !important; -webkit-line-clamp: 3; display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; }
  .cmd-item-qty { padding: 5px 6px 5px 10px !important; margin-top: 6px !important; }
  .cmd-item-qty span:first-child { font-size: 10px !important; }
  .cmd-item-qty button { width: 22px !important; height: 22px !important; font-size: 13px !important; }
  .cmd-section { padding: 48px 24px !important; }
  .cmd-zone-row { flex-direction: column !important; }
  .cmd-coords-row { grid-template-columns: 1fr !important; }
  .cmd-float-panel { width: 88vw !important; right: -8px !important; }
}
@media (max-width: 480px) {
  .cmd-menu-grid { gap: 10px !important; }
  .cmd-item-pad { padding: 10px 10px 12px !important; }
}

/* ===== BOUTIQUE ===== */
@keyframes drawerIn { from { transform: translateX(100%); } to { transform: translateX(0); } }
@media (max-width: 960px) {
  .sn-shop-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .sn-reassure-grid { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 760px) {
  .sn-shop-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 14px !important; }
  .sn-shop-card-pad { padding: 14px 14px 16px !important; gap: 6px !important; }
  .sn-shop-card-name { font-size: 15px !important; }
  .sn-shop-card-price { font-size: 13px !important; }
  .sn-shop-card-desc { font-size: 12px !important; line-height: 1.45 !important; -webkit-line-clamp: 3; display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; }
  .sn-shop-card-badge { font-size: 9.5px !important; padding: 3px 9px !important; }
  .sn-shop-card-qty button { width: 26px !important; height: 26px !important; font-size: 13px !important; }
  .sn-shop-card-qty span { width: 22px !important; font-size: 12.5px !important; }
  .sn-shop-card-add { padding: 10px 12px !important; }
  .sn-shop-card-add span { font-size: 11px !important; }
  .sn-reassure-grid { grid-template-columns: 1fr !important; }
  .sn-cart-panel { width: 100% !important; }
  #shop-hero { padding: 56px 24px !important; }
  #shop-products, #shop-reassure { padding-left: 20px !important; padding-right: 20px !important; }
}
@media (max-width: 480px) {
  .sn-shop-grid { gap: 10px !important; }
  .sn-shop-card-pad { padding: 10px 10px 12px !important; }
}