.site-footer {
  background: var(--c-bg-dark);
  color: var(--c-text-on-dark);
  margin-top: var(--sp-20);
}
/* Après .qsn-cta : petit écart (--sp-8) avant le footer, pas --sp-20. */
main:has(.qsn-cta:last-child) + .site-footer {
  margin-top: var(--sp-8);
}

.footer-inner {
  display: grid;
  gap: var(--sp-10);
  grid-template-columns: 1fr;
  padding: var(--sp-16) 0 var(--sp-12);
}
@media (min-width: 600px) {
  .footer-inner { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1000px) {

  /* Colonnes dimensionnées à leur contenu (max-content) au lieu de pistes 1fr
     égales, pour que le column-gap soit un vrai espace visuel identique
     partout -- avant, une colonne avec du texte plus long (Contact) remplissait
     presque toute sa piste alors que d'autres (liens courts) en laissaient une
     partie vide, donnant des écarts visuellement différents pour un même
     column-gap. Le groupe des 5 colonnes est centré dans le footer. */
  .footer-inner {
    grid-template-columns: repeat(5, max-content);
    justify-content: center;
    column-gap: var(--sp-10);
  }
}

.footer-brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.footer-logo {
  height: 88px;
  width: auto;
  margin-bottom: var(--sp-4);

  filter: brightness(0) invert(1);
  opacity: 0.95;
}
.footer-social {
  display: flex;
  justify-content: center;
  gap: var(--sp-3);
  margin-bottom: var(--sp-5);
}
.footer-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--r-full);
  color: var(--c-text-on-dark);
  background: rgba(255, 255, 255, 0.08);
  transition: background var(--t-fast) var(--ease-out),
              color var(--t-fast) var(--ease-out);
}
.footer-social a:hover {
  background: var(--c-brand);
  color: #FFFFFF;
}
.footer-social svg { width: 20px; height: 20px; }

.footer-seloger {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  color: rgba(245, 245, 245, 0.75);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  transition: color var(--t-fast) var(--ease-out);
}
.footer-seloger:hover { color: var(--c-text-on-dark); }
.footer-seloger-text {
  line-height: 1.25;
}
.footer-seloger-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  height: 26px;
  padding: 0 var(--sp-2);
  background: #FFFFFF;
  color: var(--c-brand-darker);
  border-radius: var(--r-xs);
  font-weight: var(--fw-bold);
  font-size: var(--fs-sm);
  font-style: italic;
  letter-spacing: -0.02em;
}

.footer-col h4 {
  color: var(--c-text-on-dark);
  font-size: var(--fs-xs);
  margin-bottom: var(--sp-4);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--letter-wide);
  text-transform: uppercase;
}
.footer-col p,
.footer-col a {
  color: rgba(245, 245, 245, 0.7);
  font-size: var(--fs-sm);
  text-decoration: none;
  display: block;
  margin-bottom: var(--sp-2);
  line-height: var(--lh-normal);
}
.footer-col a:hover { color: var(--c-text-on-dark); }
.footer-hours {
  font-size: var(--fs-xs);
  line-height: var(--lh-relaxed);
}

.footer-hours-grid {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: var(--sp-2);
  row-gap: var(--sp-1);
}
.footer-hours-grid .hours-slots {
  display: flex;
  flex-direction: column;
}

.footer-col .footer-contact-item {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-2);
}
.footer-col .footer-contact-item svg {
  width: 17px;
  height: 17px;
  stroke: var(--c-brand-light);
  flex-shrink: 0;
  margin-top: 2px;
}

.footer-bottom {
  background: #0B0910;
  color: rgba(245, 245, 245, 0.6);
  padding: var(--sp-5) 0;
}
.footer-bottom-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--sp-3);
  text-align: center;
}
.footer-copy {
  margin: 0;
  font-size: var(--fs-sm);
  color: rgba(245, 245, 245, 0.8);
}
.footer-bottom-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-3);
}
.footer-bottom-links a {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  color: rgba(245, 245, 245, 0.6);
  font-size: var(--fs-sm);
  text-decoration: none;
  transition: color var(--t-fast) var(--ease-out);
}
.footer-bottom-links a:hover { color: var(--c-text-on-dark); }

.footer-bottom-links a::before {
  content: '|';
  color: rgba(245, 245, 245, 0.3);
}
.footer-legal {
  margin: var(--sp-3) 0 0;
  text-align: center;
  font-size: var(--fs-xs);
  color: rgba(245, 245, 245, 0.4);
  line-height: var(--lh-normal);
}

.footer-credits {
  background: #000000;
  padding: 6px 0;
}
.footer-credits-inner {
  display: flex;
  justify-content: flex-end;
}
.footer-credits-btn {
  display: inline-flex;
  align-items: center;
  padding: 3px 12px;
  border: var(--border-thin) solid #FA500F;
  border-radius: 4px;
  color: #FA500F;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.7rem;
  font-weight: 500;
  text-decoration: none;
  transition: background var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out);
}
.footer-credits-btn:hover {
  background: #FA500F;
  color: #000000;
}