/* =============================================================================
 * SONOYA - nb-footer.css
 * -----------------------------------------------------------------------------
 * Footer riche : 6 colonnes (brand+contact+social, shop, sellers, help, about,
 * newsletter+apps) + moyens de paiement + bottom bilingue + made-in-guinea badge.
 *
 * Fond sombre chaud (--nb-neutral-900 / -950 en dark) pour marquer le contraste
 * avec le body clair et signifier la fin de page.
 * ============================================================================= */

@layer components {

  .nb-footer {
    margin-top: var(--nb-space-20);
    background: var(--nb-neutral-950);
    color: oklch(85% 0.010 60);
    position: relative;
    isolation: isolate;
  }
  .nb-footer::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg,
      transparent 0%,
      var(--nb-color-accent) 20%,
      var(--nb-color-live) 50%,
      var(--nb-color-accent) 80%,
      transparent 100%);
    z-index: 1;
  }

  .nb-footer__inner {
    padding: var(--nb-space-16) var(--nb-container-pad) var(--nb-space-8);
    max-width: var(--nb-container-max);
    margin-inline: auto;
  }

  /* ---------- 6 colonnes grid ---------- */
  .nb-footer__grid {
    display: grid;
    grid-template-columns: 1.6fr repeat(4, 1fr) 1.4fr;
    gap: var(--nb-space-10);
    margin-bottom: var(--nb-space-12);
  }

  /* ---------- Colonne 1 : Brand ---------- */
  .nb-footer__col--brand,
  .nb-footer__col--engage { grid-row: span 1; }

  .nb-footer__brand {
    display: inline-flex;
    align-items: center;
    gap: var(--nb-space-2);
    margin-bottom: var(--nb-space-4);
  }
  .nb-footer__brand-mark {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    background: var(--nb-color-accent);
    color: var(--nb-color-accent-contrast);
    border-radius: var(--nb-radius-lg);
    font-family: var(--nb-font-heading);
    font-size: 1.6rem;
    font-weight: var(--nb-fw-heavy);
    letter-spacing: var(--nb-ls-tighter);
    box-shadow: 0 8px 20px var(--nb-color-accent-glow);
    isolation: isolate;
  }
  .nb-footer__brand-mark::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, transparent 40%, oklch(100% 0 0 / 0.20) 100%);
    border-radius: inherit;
    pointer-events: none;
  }
  .nb-footer__brand-text {
    font-family: var(--nb-font-heading);
    font-size: var(--nb-fs-xl);
    font-weight: var(--nb-fw-heavy);
    color: white;
    letter-spacing: var(--nb-ls-wide);
  }
  .nb-footer__brand-desc {
    font-size: var(--nb-fs-sm);
    line-height: var(--nb-lh-relaxed);
    color: oklch(78% 0.010 60);
    margin-bottom: var(--nb-space-4);
    max-width: 42ch;
  }

  .nb-footer__contact {
    display: flex;
    flex-direction: column;
    gap: var(--nb-space-2);
    margin-bottom: var(--nb-space-5);
  }
  .nb-footer__contact-line {
    display: inline-flex;
    align-items: center;
    gap: var(--nb-space-2);
    font-size: var(--nb-fs-sm);
    color: oklch(75% 0.010 60);
    text-decoration: none;
    transition: color var(--nb-dur-fast) var(--nb-ease-standard);
  }
  .nb-footer__contact-line:hover {
    color: white;
  }
  .nb-footer__contact-line > svg {
    color: var(--nb-color-accent);
    flex-shrink: 0;
  }
  .nb-footer__contact-line--address {
    color: oklch(65% 0.010 60);
    align-items: flex-start;
    line-height: var(--nb-lh-snug);
  }

  /* ---------- Reseaux sociaux ---------- */
  .nb-footer__social {
    display: flex;
    gap: var(--nb-space-2);
  }
  .nb-footer__social-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: oklch(22% 0.014 60);
    color: oklch(85% 0.010 60);
    border-radius: var(--nb-radius-md);
    transition: background var(--nb-dur-fast) var(--nb-ease-standard),
                color var(--nb-dur-fast) var(--nb-ease-standard),
                transform var(--nb-dur-fast) var(--nb-ease-out-quart);
  }
  .nb-footer__social-link:hover {
    background: var(--nb-color-accent);
    color: white;
    transform: translateY(-2px);
  }

  /* ---------- Colonnes de liens (Shop, Sellers, Help, About) ---------- */
  .nb-footer__col-title {
    font-family: var(--nb-font-heading);
    font-size: var(--nb-fs-sm);
    font-weight: var(--nb-fw-bold);
    color: white;
    margin-bottom: var(--nb-space-4);
    letter-spacing: var(--nb-ls-wide);
    padding-bottom: var(--nb-space-2);
    border-bottom: 2px solid oklch(22% 0.014 60);
    position: relative;
  }
  .nb-footer__col-title::after {
    content: "";
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 32px;
    height: 2px;
    background: var(--nb-color-accent);
  }
  .nb-footer__col-title--sub { margin-top: var(--nb-space-6); }

  .nb-footer__col-links {
    display: flex;
    flex-direction: column;
    gap: var(--nb-space-2);
  }
  .nb-footer__link {
    color: oklch(72% 0.010 60);
    font-size: var(--nb-fs-sm);
    text-decoration: none;
    transition: color var(--nb-dur-fast) var(--nb-ease-standard),
                padding-left var(--nb-dur-fast) var(--nb-ease-out-quart);
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: var(--nb-space-1);
  }
  .nb-footer__link::before {
    content: "";
    display: inline-block;
    width: 3px;
    height: 3px;
    background: var(--nb-color-accent);
    border-radius: 50%;
    opacity: 0;
    transition: opacity var(--nb-dur-fast) var(--nb-ease-standard);
  }
  .nb-footer__link:hover {
    color: var(--nb-color-accent);
    padding-left: var(--nb-space-2);
  }
  .nb-footer__link:hover::before { opacity: 1; }

  /* ---------- Newsletter ---------- */
  .nb-footer__newsletter-text {
    font-size: var(--nb-fs-sm);
    color: oklch(72% 0.010 60);
    line-height: var(--nb-lh-relaxed);
    margin-bottom: var(--nb-space-4);
  }
  .nb-footer__newsletter {
    display: flex;
    gap: var(--nb-space-2);
    margin-bottom: var(--nb-space-5);
  }
  .nb-footer__newsletter-input {
    flex: 1;
    padding: var(--nb-space-3);
    background: oklch(22% 0.014 60);
    color: white;
    border: 1px solid oklch(32% 0.015 60);
    border-radius: var(--nb-radius-md);
    font-size: var(--nb-fs-sm);
    min-width: 0;
    transition: border-color var(--nb-dur-fast) var(--nb-ease-standard),
                background var(--nb-dur-fast) var(--nb-ease-standard);
  }
  .nb-footer__newsletter-input::placeholder { color: oklch(55% 0.010 60); }
  .nb-footer__newsletter-input:focus {
    outline: none;
    border-color: var(--nb-color-accent);
    background: oklch(26% 0.014 60);
    box-shadow: 0 0 0 3px color-mix(in oklch, var(--nb-color-accent) 30%, transparent);
  }
  .nb-footer__newsletter-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--nb-space-1);
    padding: 0 var(--nb-space-5);
    background: var(--nb-color-accent);
    color: var(--nb-color-accent-contrast);
    font-family: var(--nb-font-body);
    font-weight: var(--nb-fw-bold);
    font-size: var(--nb-fs-sm);
    border: 0;
    border-radius: var(--nb-radius-md);
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: var(--nb-ls-wide);
    transition: background var(--nb-dur-fast) var(--nb-ease-standard);
    white-space: nowrap;
  }
  .nb-footer__newsletter-btn:hover { background: var(--nb-color-accent-hover); }

  /* ---------- Apps mobiles ---------- */
  .nb-footer__apps {
    display: flex;
    gap: var(--nb-space-2);
    flex-wrap: wrap;
  }
  .nb-footer__app {
    display: inline-block;
    padding: 2px;
    background: oklch(100% 0 0 / 0.06);
    border-radius: var(--nb-radius-md);
    transition: transform var(--nb-dur-fast) var(--nb-ease-out-quart),
                background var(--nb-dur-fast) var(--nb-ease-standard);
  }
  .nb-footer__app:hover {
    transform: translateY(-2px);
    background: oklch(100% 0 0 / 0.10);
  }
  .nb-footer__app img { height: 40px; width: auto; display: block; }

  /* ---------- Moyens de paiement ---------- */
  .nb-footer__payments {
    padding-block: var(--nb-space-6);
    border-top: 1px solid oklch(22% 0.014 60);
    border-bottom: 1px solid oklch(22% 0.014 60);
    margin-bottom: var(--nb-space-6);
  }
  .nb-footer__payments-title {
    font-family: var(--nb-font-heading);
    font-size: var(--nb-fs-xs);
    color: oklch(60% 0.010 60);
    margin-bottom: var(--nb-space-3);
    font-weight: var(--nb-fw-bold);
    letter-spacing: var(--nb-ls-widest);
    text-transform: uppercase;
  }
  .nb-footer__payments-icons {
    display: flex;
    gap: var(--nb-space-3);
    flex-wrap: wrap;
    margin-bottom: var(--nb-space-3);
  }
  .nb-footer__payment {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px var(--nb-space-3);
    background: white;
    border-radius: var(--nb-radius-sm);
    height: 44px;
    min-width: 72px;
    transition: transform var(--nb-dur-fast) var(--nb-ease-out-quart),
                box-shadow var(--nb-dur-fast) var(--nb-ease-standard);
  }
  .nb-footer__payment:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 16px oklch(0% 0 0 / 0.30);
  }
  .nb-footer__payment img { max-height: 100%; width: auto; display: block; }
  .nb-footer__payments-note {
    font-size: 0.75rem;
    color: oklch(60% 0.010 60);
    font-style: italic;
    line-height: var(--nb-lh-relaxed);
    max-width: 60ch;
  }
  .nb-footer__payments-note::before {
    content: "🔒 ";
    font-style: normal;
    opacity: 0.7;
    margin-inline-end: 2px;
  }

  /* ---------- Bottom bilingue + made in Guinea ---------- */
  .nb-footer__bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--nb-space-4);
    font-size: 0.78rem;
    color: oklch(58% 0.010 60);
  }
  .nb-footer__bottom-meta {
    display: flex;
    align-items: center;
    gap: var(--nb-space-2);
    flex-wrap: wrap;
  }
  .nb-footer__made-in {
    display: inline-flex;
    align-items: center;
    gap: var(--nb-space-1);
    color: oklch(75% 0.010 60);
    font-weight: var(--nb-fw-semibold);
  }
  .nb-footer__made-in::before {
    content: "🇬🇳";
    font-size: 1em;
    line-height: 1;
  }
  .nb-footer__bottom-sep { opacity: 0.4; }
  .nb-footer__lang {
    color: oklch(72% 0.010 60);
    text-decoration: none;
    transition: color var(--nb-dur-fast) var(--nb-ease-standard);
  }
  .nb-footer__lang:hover { color: white; }
  .nb-footer__lang.is-active {
    color: var(--nb-color-accent);
    font-weight: var(--nb-fw-bold);
  }

  /* ---------- Responsive ---------- */
  @media (max-width: 1280px) {
    .nb-footer__grid {
      grid-template-columns: 1fr 1fr 1fr;
      gap: var(--nb-space-8);
    }
    .nb-footer__col--brand,
    .nb-footer__col--engage { grid-column: span 3; }
  }
  @media (max-width: 768px) {
    .nb-footer__grid { grid-template-columns: 1fr 1fr; gap: var(--nb-space-6); }
    .nb-footer__col--brand,
    .nb-footer__col--engage { grid-column: span 2; }
    .nb-footer__inner { padding: var(--nb-space-10) var(--nb-space-4) var(--nb-space-6); }
    .nb-footer__brand-desc { max-width: none; }
    .nb-footer__newsletter { flex-direction: column; }
    .nb-footer__newsletter-btn { justify-content: center; }
    .nb-footer__bottom { flex-direction: column; text-align: center; }
  }
  @media (max-width: 480px) {
    .nb-footer__grid { grid-template-columns: 1fr; }
    .nb-footer__col--brand,
    .nb-footer__col--engage { grid-column: span 1; }
  }
}