/* ==========================================================================
   FOOTER — the deliberate close of the Cook'Art experience
   ==========================================================================
   PHASE 3. This replaces four inline <style> blocks inside footer.php that
   together shipped ~23KB of CSS on EVERY page of the site. 85 of the 123
   selectors in them targeted sections deleted in Phase 2 (.ca-story,
   .ca-showcase, .ca-journal, .ca-cats, .ca-bs and a set of .ca-hero__* classes
   that no longer exist), so most of that weight was styling nothing at all.

   What else changed:
     - The palette was gold (#C9A86A). Gold is not in the design system and
       appeared nowhere else on the site; it read as a different brand. The
       footer now uses --copper and --accent like everything above it.
     - Two 400–600px glows at `filter: blur(100px)` plus a full-bleed SVG grain
       layer with mix-blend-mode. That is a lot of compositing on every page
       for atmosphere nobody can name. Both are gone.
     - A `cubic-bezier(.34,1.56,.64,1)` bounce on social hover. No bounce.

   Ground is --espresso, the same value as the homepage's closing panel, so the
   last band of the page and the footer read as one surface rather than two
   dark blocks with a seam between them.

   Depends on tokens.css. Defines no raw colour of its own.
   ========================================================================== */

.ca-footer {
  position: relative;
  z-index: 10;
  background: var(--espresso, #1a1614);
  color: var(--on-dark, #f7f5f4);
  font-family: var(--ff, ui-sans-serif, system-ui, sans-serif);
}
/* main must sit above the footer — a legacy stacking fix that is still load
   bearing for the homepage's overlapping hero media. */
main, #main { position: relative; z-index: 2; }

.ca-footer__inner {
  width: 100%;
  max-width: var(--shell, 1320px);
  margin-inline: auto;
  padding: var(--s-5, 3rem) var(--gut, 1.5rem) var(--s-4, 2rem);
}

/* ── Grid ──────────────────────────────────────────────────────────────────
   Brand block, then the three real nav groups. A 4-column layout at the top
   end, collapsing to two, then to a single accordion stack on phones. */
.ca-footer__grid {
  display: grid;
  gap: var(--s-5, 3rem) var(--s-4, 2rem);
  grid-template-columns: 1fr;
}
@media (min-width: 700px) {
  .ca-footer__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ca-footer__brand { grid-column: 1 / -1; }
}
@media (min-width: 1000px) {
  .ca-footer__grid {
    grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr));
    gap: var(--s-5, 3rem);
  }
  .ca-footer__brand { grid-column: auto; }
}

/* ── Brand ─────────────────────────────────────────────────────────────── */
.ca-footer__logo {
  display: inline-block;
  font-size: 1.65rem;
  font-weight: 800;
  font-stretch: 104%;
  letter-spacing: -0.03em;
  line-height: 1;
  text-decoration: none;
  color: var(--on-dark, #f7f5f4);
  margin-bottom: var(--s-2, 0.75rem);
}
.ca-footer__logo .ca-logo__art { color: var(--accent-lift, #d33); }
.ca-footer__tagline {
  margin: 0 0 var(--s-2, 0.75rem);
  font-size: var(--t-sm, 0.875rem);
  line-height: var(--lh-body, 1.62);
  color: var(--on-dark-2, #b9b3ae);
  max-width: 34ch;
}
/* The one payment fact worth repeating here — it is the single most common
   reason a Tunisian customer hesitates, and the footer is where they land
   when they are still deciding. */
.ca-footer__cod {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  margin: 0;
  font-size: var(--t-sm, 0.875rem);
  font-weight: 700;
  color: var(--on-dark, #f7f5f4);
}
.ca-footer__cod svg { flex: none; color: var(--copper, #a97b4f); }

/* ── Nav columns ───────────────────────────────────────────────────────── */
.ca-footer__col { min-width: 0; }
.ca-footer__col-title { margin: 0; }

.ca-footer__acc {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-2, 0.75rem);
  width: 100%;
  padding: 0;
  background: none;
  border: 0;
  color: var(--on-dark, #f7f5f4);
  font-family: inherit;
  font-size: var(--t-xs, 0.775rem);
  font-weight: 800;
  font-stretch: 96%;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  text-align: left;
  cursor: default;
}
.ca-footer__chev { flex: none; display: none; color: var(--on-dark-2, #b9b3ae); }

.ca-footer__list {
  list-style: none;
  margin: var(--s-2, 0.75rem) 0 0;
  padding: 0;
  display: grid;
  gap: 0.6rem;
}
.ca-footer__link {
  display: inline-block;
  font-size: var(--t-sm, 0.875rem);
  line-height: 1.4;
  color: var(--on-dark-2, #b9b3ae);
  text-decoration: none;
  transition: color var(--t-fast, 0.16s) var(--ease, ease);
}
.ca-footer__link:hover,
.ca-footer__link:focus-visible { color: var(--on-dark, #f7f5f4); }

/* ── Bottom row ────────────────────────────────────────────────────────── */
.ca-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-2, 0.75rem);
  margin-top: var(--s-5, 3rem);
  padding-top: var(--s-3, 1.25rem);
  border-top: 1px solid var(--line-dark, rgba(255,255,255,0.13));
}
.ca-footer__copyright,
.ca-footer__legal {
  margin: 0;
  font-size: var(--t-xs, 0.775rem);
  color: var(--on-dark-2, #b9b3ae);
}
.ca-footer__legal { display: flex; flex-wrap: wrap; gap: 0.35rem 1.1rem; }
.ca-footer__legal a { color: inherit; text-decoration: none; }
.ca-footer__legal a:hover,
.ca-footer__legal a:focus-visible { color: var(--on-dark, #f7f5f4); }

/* ── Focus ─────────────────────────────────────────────────────────────── */
.ca-footer :is(a, button):focus-visible {
  outline: 2px solid var(--on-dark, #f7f5f4);
  outline-offset: 3px;
  border-radius: 3px;
}

/* ── Site-wide reassurance strip (not rendered on home or shop) ─────────── */
.ca-reassure {
  background: var(--ivory-2, #f4f2f1);
  border-top: 1px solid var(--line-soft, #e9e6e4);
  border-bottom: 1px solid var(--line-soft, #e9e6e4);
  font-family: var(--ff, ui-sans-serif, system-ui, sans-serif);
}
.ca-reassure__wrap {
  width: 100%;
  max-width: var(--shell, 1320px);
  margin-inline: auto;
  padding: var(--s-3, 1.25rem) var(--gut, 1.5rem);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem 2.25rem;
}
.ca-reassure__item {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  font-size: var(--t-sm, 0.875rem);
  font-weight: 600;
  color: var(--ink-2, #3d3835);
}
.ca-reassure__item svg { flex: none; color: var(--copper, #a97b4f); }

/* ── Mobile: nav groups become real accordions ─────────────────────────── */
@media (max-width: 699px) {
  .ca-footer__inner { padding-top: var(--s-5, 3rem); }
  /* Each collapsed row carries its own rule and padding, so the 48px grid gap
     was stacking on top of that and adding ~150px of empty footer on a phone. */
  .ca-footer__grid { gap: var(--s-3, 1.25rem) 0; }
  .ca-footer__col {
    border-top: 1px solid var(--line-dark, rgba(255,255,255,0.13));
    padding-block: var(--s-2, 0.75rem);
  }
  .ca-footer__acc { min-height: 44px; cursor: pointer; }
  .ca-footer__chev {
    display: block;
    transition: transform var(--t-med, 0.28s) var(--ease, ease);
  }
  .ca-footer__col.is-open .ca-footer__chev { transform: rotate(180deg); }

  /* Collapsed by default on phones. The JS sets aria-expanded to match, and
     any column without JS stays open because the class is what hides it. */
  .ca-footer__list { display: none; }
  .ca-footer__col.is-open .ca-footer__list { display: grid; padding-bottom: var(--s-2, 0.75rem); }

  .ca-footer__bottom { margin-top: var(--s-4, 2rem); }

  /* Standalone links need a real tap target on a phone; at 20px tall these
     were the smallest hit areas on the page. */
  .ca-footer__legal { gap: 0 1.1rem; }
  .ca-footer__legal a { padding-block: 0.6rem; }
  .ca-footer__logo { padding-block: 0.35rem; }
}

@media (prefers-reduced-motion: reduce) {
  .ca-footer__link,
  .ca-footer__chev { transition: none; }
}

/* ==========================================================================
   FOOTER — compacted
   ==========================================================================
   Phase 3 added a fifth nav group (Nos gammes) to a grid built for four, so the
   extra column wrapped onto a second row and took a 48px row gap with it. The
   footer had become a second page.

   Five columns at the top end, a 28px gap instead of 48, and top padding cut
   from 48 to 44 with the bottom from 32 to 26. The links are unchanged: this is
   proportion, not content.
   ========================================================================== */

.ca-footer__inner {
  padding: 44px var(--gut, 1.5rem) 26px;
}

.ca-footer__grid { gap: 28px 26px; }

@media (min-width: 1000px) {
  .ca-footer__grid {
    /* brand · Boutique · Gammes · Aide · À propos */
    grid-template-columns: minmax(0, 1.5fr) repeat(4, minmax(0, 1fr));
    gap: 28px;
  }
  .ca-footer__brand { grid-column: auto; }
}

/* Between the two breaks there are five groups and three columns, which left a
   short final row. Two columns divides five as 3 + 2, which is tidier. */
@media (min-width: 700px) and (max-width: 999px) {
  .ca-footer__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
  .ca-footer__brand { grid-column: 1 / -1; }
}

/* Lists were spaced for a four-column footer with room to spare. */
.ca-footer__list { gap: 0.45rem; }
.ca-footer__col-title { margin-bottom: 0.7rem; }

/* A dark ground with no gradient reads as a slab. Espresso to near-black
   burgundy, the same family as the bundles band. */
.ca-footer {
  background: var(--grad-dark, linear-gradient(135deg, #130b0a 0%, #24100f 100%));
}

.ca-footer__bar { padding: 14px var(--gut, 1.5rem); }

/* Phones keep the accordion; only the chrome around it tightens. */
@media (max-width: 699px) {
  .ca-footer__inner { padding-top: 32px; padding-bottom: 20px; }
  .ca-footer__grid { gap: 0; }
}