/* =====================================================================
   Maison KC — footer (sections/footer.liquid)
   Same side padding as yc-section (10% / 1em) so it lines up with the page.
   Logical properties everywhere: mirrors in Arabic (RTL).
   ===================================================================== */
.mkc-footer {
  --mkc-footer-muted: rgba(var(--mkc-footer-text), 0.68);
  --mkc-footer-line: rgba(var(--mkc-footer-text), 0.12);
  --mkc-footer-pad: 10%;
  color: rgb(var(--mkc-footer-text));
  background: var(--mkc-footer-bg);
}
@media (max-width: 768px) { .mkc-footer { --mkc-footer-pad: 1em; } }
.mkc-footer a { color: inherit; text-decoration: none; }
.mkc-footer ul { margin: 0; padding: 0; list-style: none; }
.mkc-footer p { margin: 0; }
.mkc-footer svg { flex-shrink: 0; width: 20px; height: 20px; }

/* ---------- 1. Guarantees band (light, above the dark footer) ---------- */
.mkc-footer__trust {
  padding: 26px var(--mkc-footer-pad);
  background: #fbf3f6;
  color: #1e1418;
}
/* The homepage already shows the same promises in "Bandeau avantages". */
body:has(.mkc-benefits) .mkc-footer__trust { display: none; }
.mkc-footer__trust-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px 16px;
}
@media (min-width: 990px) { .mkc-footer__trust-list { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.mkc-footer__trust-item { display: flex; align-items: flex-start; gap: 12px; }
.mkc-footer__trust-item > span { min-width: 0; overflow-wrap: anywhere; }
/* 320-360px phones: two columns leave ~70px for the text ("Conseil personnalisé" overflowed). */
@media (max-width: 360px) { .mkc-footer__trust-list { grid-template-columns: minmax(0, 1fr); } }
.mkc-footer__trust-icon {
  display: grid;
  flex: 0 0 40px;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #ffffff;
  color: rgb(var(--color-button));
}
.mkc-footer__trust-item strong { display: block; font-size: var(--text-md); line-height: 1.3; }
.mkc-footer__trust-item span span { display: block; margin-top: 2px; font-size: var(--text-sm); color: #6d5c63; }

/* ---------- Main dark area ---------- */
.mkc-footer__main { padding: 44px var(--mkc-footer-pad) 0; }

/* ---------- 2. Help card ---------- */
.mkc-footer__help {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 18px 28px;
  margin-bottom: 44px;
  padding: 24px 28px;
  border: 1px solid var(--mkc-footer-line);
  border-radius: 14px;
  background: rgba(var(--mkc-footer-text), 0.05);
}
.mkc-footer__help-text { display: grid; gap: 6px; max-width: 560px; }
.mkc-footer__help-title { font-size: var(--text-xl); font-weight: 800; line-height: 1.25; }
.mkc-footer__help-text p:not(.mkc-footer__help-title) { font-size: var(--text-md); line-height: 1.5; color: var(--mkc-footer-muted); }
.mkc-footer__help-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.mkc-footer__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 48px;
  padding: 0 22px;
  border-radius: 999px;
  font-size: var(--text-md);
  font-weight: 700;
  white-space: nowrap;
  transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}
.mkc-footer__btn:hover { transform: translateY(-1px); }
.mkc-footer__btn--wa { background: #128c4a; color: #ffffff !important; }
.mkc-footer__btn--wa:hover { background: #0f7a40; }
.mkc-footer__btn--ghost { border: 1px solid rgba(var(--mkc-footer-text), 0.35); }
.mkc-footer__btn--ghost:hover { border-color: rgb(var(--mkc-footer-text)); }
@media (max-width: 640px) {
  .mkc-footer__help { padding: 20px; }
  .mkc-footer__help-actions, .mkc-footer__btn { width: 100%; }
}

/* ---------- 3. Brand | menus | customer service ---------- */
.mkc-footer__grid { display: grid; gap: 32px; }
@media (min-width: 990px) {
  .mkc-footer__grid { grid-template-columns: minmax(0, 1.25fr) minmax(0, 2.4fr) minmax(0, 1.15fr); gap: 40px; }
}
.mkc-footer .mkc-footer__label {
  display: block;
  margin: 0 0 14px;
  font-size: var(--text-sm);
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.mkc-footer__brand { display: grid; align-content: start; gap: 16px; }
.mkc-footer__logo {
  justify-self: start;
  font-size: 1.9rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  overflow-wrap: anywhere;
  text-transform: uppercase;
}
.mkc-footer__logo img { display: block; width: var(--footer-logo-width); height: auto; }
.mkc-footer__pitch { max-width: 340px; font-size: var(--text-md); line-height: 1.6; color: var(--mkc-footer-muted); }
.mkc-footer .mkc-footer__social .mkc-footer__label { margin-bottom: 10px; }
.mkc-footer__social ul { display: flex; gap: 10px; }
.mkc-footer__social a {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 1px solid var(--mkc-footer-line);
  border-radius: 50%;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.mkc-footer__social a:hover { border-color: rgb(var(--color-button)); background: rgb(var(--color-button)); color: #ffffff; }

.mkc-footer__menus { display: grid; }
/* One column per filled menu (Réglages > Menus), whatever their number. */
@media (min-width: 990px) { .mkc-footer__menus { grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 32px; } }
.mkc-footer__menu ul { display: grid; gap: 12px; padding-bottom: 6px; }
.mkc-footer__menu a,
.mkc-footer__contact a { color: var(--mkc-footer-muted); transition: color 0.2s ease; }
.mkc-footer__menu a:hover,
.mkc-footer__contact a:hover { color: rgb(var(--mkc-footer-text)); text-decoration: underline; text-underline-offset: 3px; }
.mkc-footer__menu summary { cursor: default; list-style: none; }
.mkc-footer__menu summary::-webkit-details-marker { display: none; }

/* Mobile: menus become accordions */
@media (max-width: 989px) {
  .mkc-footer__menus { border-top: 1px solid var(--mkc-footer-line); }
  .mkc-footer__menu { border-bottom: 1px solid var(--mkc-footer-line); }
  .mkc-footer .mkc-footer__menu summary {
    position: relative;
    margin: 0;
    padding: 16px 0;
    cursor: pointer;
  }
  .mkc-footer__menu summary::after {
    content: "";
    position: absolute;
    inset-inline-end: 4px;
    inset-block-start: 50%;
    width: 8px;
    height: 8px;
    border-inline-end: 2px solid currentColor;
    border-block-end: 2px solid currentColor;
    transform: translateY(-70%) rotate(45deg);
    transition: transform 0.2s ease;
  }
  .mkc-footer__menu[open] summary::after { transform: translateY(-30%) rotate(-135deg); }
  .mkc-footer__menu ul { padding-bottom: 8px; gap: 0; }
  /* Touch targets ≥ 40px tall (links were 20px), same visual rhythm as the 12px gap. */
  .mkc-footer__menu a,
  .mkc-footer__contact a { display: inline-block; padding-block: 10px; }
  .mkc-footer__contact ul { gap: 2px; }
  .mkc-footer__contact li { align-items: center; }
}

.mkc-footer__contact ul { display: grid; gap: 14px; }
.mkc-footer__contact li { display: flex; align-items: flex-start; gap: 10px; color: var(--mkc-footer-muted); line-height: 1.45; }
.mkc-footer__contact-icon { display: inline-grid; margin-top: 1px; color: rgb(var(--mkc-footer-text)); }
.mkc-footer__contact-icon svg { width: 18px; height: 18px; }

/* ---------- 4. Bottom bar ---------- */
.mkc-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px 24px;
  margin-top: 44px;
  padding: 22px 0 26px;
  border-top: 1px solid var(--mkc-footer-line);
  font-size: var(--text-sm);
  color: var(--mkc-footer-muted);
}
.mkc-footer__legal { display: flex; flex-wrap: wrap; gap: 6px 18px; }
.mkc-footer__badges { display: flex; flex-wrap: wrap; gap: 8px; }
.mkc-footer__badges li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px;
  border: 1px solid var(--mkc-footer-line);
  border-radius: 999px;
  color: rgb(var(--mkc-footer-text));
  font-weight: 600;
}
.mkc-footer__badges svg { width: 17px; height: 17px; }
@media (max-width: 640px) {
  .mkc-footer__bottom { flex-direction: column-reverse; align-items: flex-start; }
}
/* Room for the floating WhatsApp button on phones */
@media (max-width: 768px) { .mkc-footer__bottom { padding-bottom: 84px; } }

@media (prefers-reduced-motion: reduce) {
  .mkc-footer__btn, .mkc-footer__social a, .mkc-footer__menu summary::after { transition: none; }
}