/* ============================================================
   FOOTER — même fond que la page, sans la carte noire ni le
   wordmark. Seulement les colonnes et la barre basse.
   ============================================================ */

  /* Même fond que le hero : sun.avif sous son voile, plus le grain.
     Le footer ferme la page comme le hero l'ouvre. */
  .ft {
    position: relative; isolation: isolate; overflow: hidden;
    background-color: var(--surface-page);
    background-image:
      linear-gradient(rgba(255, 255, 255, 0.42), rgba(255, 255, 255, 0.42)),
      url('../assets/sun.avif');
    background-position: 0 0, 10% 40%;
    background-repeat: repeat, no-repeat;
    background-size: auto, 2200px;
    padding-bottom: 1rem;
  }
  .ft::after {
    content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
    background-image: url('../assets/noise-pattern.svg');
    background-position: 50%; background-repeat: repeat; opacity: 0.5;
  }
  .ft__card { position: relative; z-index: 1; }

  .ft__card {
    max-width: var(--container);
    margin-inline: auto;
    padding-inline: var(--gutter);
    padding-top: clamp(2.5rem, 5vw, 4rem);
    display: flex; flex-direction: column;
  }

  .ft__main {
    display: flex; align-items: flex-start;
    gap: clamp(3rem, 8vw, 7rem);
  }
  /* Le bouton s'aligne à droite, au niveau des deux colonnes. */
  .ft__cta-btn { margin-left: auto; flex: none; }
  .ft__nav { display: flex; flex-direction: column; gap: 0.85rem; }
  .ft__head {
    margin: 0; font-family: var(--font-display); font-weight: 500;
    font-size: 0.9375rem; color: var(--text-primary);
  }
  .ft__nav a, .ft__nav span {
    font-size: 0.875rem; color: var(--text-muted); text-decoration: none;
  }
  .ft__nav a { transition: color 0.15s ease; }
  .ft__nav a:hover { color: var(--k-purple); }

  .ft__bottom {
    display: flex; justify-content: space-between; align-items: center;
    gap: var(--space-lg); flex-wrap: wrap;
    border-top: 1px solid var(--hairline);
    margin-top: clamp(2.5rem, 5vw, 3.5rem); padding-top: var(--space-lg);
    padding-bottom: var(--space-md);
  }
  .ft__labels { display: flex; align-items: center; gap: 0.5rem; }
  .ft__labels img { width: 34px; height: 34px; }

  .ft__bottom-nav {
    display: flex; justify-content: flex-end; align-items: center;
    gap: clamp(1rem, 3vw, 2.5rem); flex-wrap: wrap;
  }
  .ft__bottom-nav .is--legal {
    margin: 0; font-size: 0.8125rem;
    color: var(--text-muted); text-decoration: none;
  }
  .ft__bottom-nav a.is--legal:hover { color: var(--k-purple); }

  .ft__socials { display: flex; align-items: center; gap: 0.5rem; }
  .ft__socials-link {
    display: flex; align-items: center; justify-content: center;
    width: 2rem; height: 2rem; border-radius: 0.5rem;
    border: 1px solid var(--hairline); background: rgba(255, 255, 255, 0.7);
    color: var(--text-primary);
    transition: border-color 0.2s ease, color 0.2s ease, background-color 0.2s ease;
  }
  .ft__socials-link:hover {
    border-color: var(--k-purple); color: var(--k-purple); background: var(--k-white);
  }

  @media (max-width: 860px) {
    /* Bloc d'appel en tête de footer : la dernière occasion de convertir. */
  .ft__cta {
    display: flex; align-items: center; justify-content: space-between;
    gap: var(--space-lg); flex-wrap: wrap;
    padding-bottom: clamp(2rem, 4vw, 3rem);
    margin-bottom: clamp(2rem, 4vw, 3rem);
    border-bottom: 1px solid var(--hairline);
  }
  .ft__cta-text {
    margin: 0; font-family: var(--font-display); font-weight: 500;
    font-size: clamp(1.125rem, 1rem + 0.6vw, 1.375rem); color: var(--text-primary);
  }
  .ft__cta-btn { flex: none; }

  .ft__main { flex-wrap: wrap; gap: 2.5rem; }
    .ft__bottom { justify-content: center; }
    .ft__bottom-nav { justify-content: center; }
  }