/* ================================================================
   FOOTER — Section Contact + Calendly + Liens
   Figma node : 1281-6928
================================================================ */

/* ──────────────────────────────────────────────────────────────
   1. SECTION WRAPPER
────────────────────────────────────────────────────────────── */
.footer {
  background:     var(--purple-900);                 /* #1a0f26 — violet nuit (= html,body bg) */
  padding-bottom: 192px;                             /* override — bottom spécifique au footer */
  position:       relative;
  overflow:       hidden;                            /* coupe le Big Pixels Pattern qui déborde à gauche */
}

/* ──────────────────────────────────────────────────────────────
   2. BIG PIXELS PATTERN — bande pixel-art en haut de section
   ✦ Optimisation : 1 seul tile SVG 304×48 en background-repeat:repeat-x
     au lieu des 5× Pattern divs imbriquées dans Figma.
     Le left:-38px reproduit le décalage de phase du Figma original.
────────────────────────────────────────────────────────────── */
/* Pattern top ET bottom — même tile SVG purple, positionné en haut ou en bas */
.footer__pattern {
  position:          absolute;
  left:              -38px;
  right:             0;
  height:            48px;
  background-image:  url("../img/assets/big-pixels-pattern-purple.svg");
  background-repeat: repeat-x;
  background-size:   304px 48px;
  pointer-events:    none;
}

.footer__pattern--top    { top:    0; }
.footer__pattern--bottom { bottom: 0; }

/* ──────────────────────────────────────────────────────────────
   3. CONTENEUR PRINCIPAL (2 colonnes)
────────────────────────────────────────────────────────────── */
.footer__container {
  width: 100%;
  max-width: 1264px;
  display: flex;
  gap: 48px;
  align-items: center;
  padding: 0 32px;
  box-sizing: border-box;
}

/* ──────────────────────────────────────────────────────────────
   4. COLONNE GAUCHE — Heading + Personnage
────────────────────────────────────────────────────────────── */
.footer__left {
  flex: 1 0 0;
  display: flex;
  flex-direction: column;
  gap: 48px;
  align-items: flex-start;
  min-width: 0;
}

/* H2 — Raw Pixel, uppercase, lettre-spacing 4% (= 1.92px à 48px) */
.footer__heading {
  font-family: var(--font-heading);   /* Raw Pixel */
  font-size: var(--text-h2);          /* 48px → responsive via tokens */
  font-weight: var(--fw-regular);     /* 400 */
  font-style: normal;
  letter-spacing: 0.04em;            /* 4% du corps = 1.92px @ 48px, scale avec la font-size */
  line-height: 1.15;
  text-transform: uppercase;
  color: var(--purple-100);           /* #e1d5ff */
  margin: 0;
  width: 100%;
}

/* Première ligne "Débloquez" → blanche dans Figma */
.footer__heading-white {
  color: #fff;
}

/* Personnage pixel-art.
   rotate(180deg) + scaleY(-1) = miroir horizontal (flip gauche-droite).
   Correspond aux classes Tailwind : rotate-180 -scale-y-100 */
.footer__character {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-shrink: 0;
}

.footer__character img {
  display: block;
  width: 383px;
  height: 383px;
  transform: rotate(180deg) scaleY(-1);
  object-fit: cover;
}

/* ──────────────────────────────────────────────────────────────
   5. COLONNE DROITE — Calendly embed
────────────────────────────────────────────────────────────── */
.footer__right {
  flex: 1 0 0;
  height: 601px;
  display: flex;
  align-items: flex-start;
  min-width: 0;
}

/* Wrapper Calendly : occupe toute la colonne droite */
.footer__calendly-wrap {
  flex: 1;
  height: 100%;
  min-width: 0;
  border-radius: 8px;
  overflow: hidden;
  background: #fff;                   /* Calendly est sur fond blanc */
}

/* Override nécessaire sur le widget Calendly */
.footer__calendly-wrap .calendly-inline-widget {
  width: 100% !important;
  height: 100% !important;
  min-width: 0 !important;
}

/* ──────────────────────────────────────────────────────────────
   6. PIXELS STRIP ROW — séparateur pleine largeur entre corps et liens
────────────────────────────────────────────────────────────── */
.footer__pixels-row {
  width: 100%;
  max-width: 1440px;
  height: 20px;
  position: relative;
  flex-shrink: 0;
}

/* Inset négatif pour que l'image semble légèrement plus large que le container */
.footer__pixels-row-inner {
  position: absolute;
  inset: 0 -0.83% 0 -1.39%;
}

.footer__pixels-row-inner img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
}

/* ──────────────────────────────────────────────────────────────
   7. FOOTER LINKS BAR — copyright | liens légaux | LinkedIn
────────────────────────────────────────────────────────────── */
.footer__links-bar {
  width: 100%;
  max-width: 1264px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 32px;
  box-sizing: border-box;
}

/* Copyright */
.footer__copyright {
  font-family: var(--font-body);    /* Manrope */
  font-size: var(--text-sm);        /* 14px */
  font-weight: var(--fw-medium);    /* 500 */
  line-height: normal;
  color: var(--purple-100);         /* #e1d5ff */
  margin: 0;
  white-space: nowrap;
}

/* Groupe de liens légaux + LinkedIn */
.footer__legal-nav {
  display: flex;
  gap: 32px;
  align-items: center;
}

/* Liens texte */
.footer__legal-link {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: var(--fw-medium);
  line-height: normal;
  color: var(--purple-100);
  text-decoration: none;
  white-space: nowrap;
  transition: color 180ms ease;
}

.footer__legal-link:hover {
  color: #fff;
}

/* Icône LinkedIn */
.footer__linkedin {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  opacity: 1;
  transition: opacity 180ms ease;
}

.footer__linkedin:hover {
  opacity: 0.7;
}

.footer__linkedin img {
  display: block;
  width: 24px;
  height: 24px;
}

/* ──────────────────────────────────────────────────────────────
   8. RESPONSIVE
────────────────────────────────────────────────────────────── */

/* ── Tablette ≤ 1024px ─────────────────────────────────────── */
@media (max-width: 1024px) {

  .footer {
    padding: 80px var(--space-15) 120px;
    gap: 60px;
  }

  .footer__container {
    gap: 32px;
    padding: 0 16px;
  }

  .footer__right {
    height: auto;
    min-height: 440px;
  }

  .footer__character img {
    width: 280px;
    height: 280px;
  }

  .footer__links-bar {
    padding: 0 16px;
  }
}

/* ── Mobile ≤ 768px ─────────────────────────────────────────── */
@media (max-width: 768px) {

  .footer {
    padding: 64px var(--space-15) 80px;
    gap: 48px;
  }

  /* Colonnes empilées verticalement */
  .footer__container {
    flex-direction: column;
    gap: 40px;
    padding: 0;
    align-items: stretch;
  }

  .footer__left {
    gap: 32px;
    width: 100%;
  }

  .footer__right {
    width: 100%;
    height: auto;
    min-height: 0;
  }

  /* Hauteur fixe du widget Calendly sur mobile */
  .footer__calendly-wrap {
    width: 100%;
    height: 520px;
  }

  .footer__character img {
    width: 240px;
    height: 240px;
  }

  /* Links bar : empilée */
  .footer__links-bar {
    flex-direction: column;
    gap: 24px;
    align-items: flex-start;
    padding: 0;
  }

  .footer__legal-nav {
    flex-wrap: wrap;
    gap: 16px 20px;
  }

  .footer__pixels-row {
    overflow: hidden;
  }
}

/* ── Petit mobile ≤ 480px ───────────────────────────────────── */
@media (max-width: 480px) {

  .footer {
    padding: 48px var(--space-15) 64px;
    gap: 32px;
  }

  .footer__character img {
    width: 200px;
    height: 200px;
  }

  .footer__calendly-wrap {
    height: 460px;
  }

  .footer__legal-nav {
    gap: 12px 16px;
  }
}