/* ============================================================
   13-footer — « Footer » · Figma node 7206:7459 (v2)
   Le frame v2 (1440×2368 @y=11227) englobe une zone blanche
   (eyebrow + FAQ) ; seule la zone sombre 1440×1331 @y=12264 est
   stylée ici : bloc CTA (pattern de tuiles + calendrier) puis
   bas de page (LinkedIn, liens légaux, wordmark géant).
   ============================================================ */

.site-footer {
  position: relative;
  overflow: hidden;
  background: var(--color-neutral-950);
  font-family: var(--font-sans);
  color: var(--color-white);
}

/* --- Bloc CTA ----------------------------------------------------- */

.site-footer__cta {
  position: relative;
  /* v2 : 147px = position du titre depuis le haut du bloc sombre
     (l'eyebrow qui occupait cet espace est sorti du bloc — voir 12-faq) */
  padding: 147px clamp(20px, 8.33vw, 120px) 0;
  text-align: center;
}

/* Pattern de tuiles arrondies (≈180 rects Figma 55×55 r9, #F1F1F1
   @13–22% × opacité 13%) recréé en pattern SVG inline — pas un asset */
.site-footer__cta::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 496px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64' viewBox='0 0 64 64'%3E%3Crect x='4.5' y='4.5' width='55' height='55' rx='9' fill='%23F1F1F1' fill-opacity='0.028'/%3E%3C/svg%3E");
  background-size: 64px 64px;
  background-position: 24px 2px; /* calé sur la grille mesurée Figma */
  pointer-events: none;
}

/* Fondu bas du bloc CTA (Figma : linear-gradient vers #17181B,
   h 236px à partir de y=259) recréé en CSS */
.site-footer__cta::after {
  content: "";
  position: absolute;
  top: 259px;
  left: 0;
  right: 0;
  height: 237px;
  background: linear-gradient(to bottom, rgba(23, 24, 27, 0), var(--color-ink-strong));
  pointer-events: none;
}

.site-footer__cta > * {
  position: relative;
  z-index: 1;
}

/* v2 : le badge « LE FUTUR COMMENCE MAINTENANT » (Figma 7206:7688) est sorti
   du bloc sombre — il vit désormais en haut de la zone blanche, au-dessus de
   la FAQ. Styles déplacés dans css/12-faq.css (.faq__zone-eyebrow). */

.site-footer__title {
  margin: 0;
  font-size: clamp(40px, 4.45vw, var(--text-h1)); /* 64px @1440 */
  line-height: 1.125; /* 72/64 */
  font-weight: 600; /* Manrope SemiBold (≠ --text-h1--font-weight Inter) */
  letter-spacing: var(--text-h1--letter-spacing);
  color: var(--color-white);
}

.site-footer__subtitle {
  margin: 24px auto 0;
  max-width: 508px;
  font-size: var(--text-body-lg);
  line-height: var(--text-body-lg--line-height);
  font-weight: var(--text-body-lg--font-weight);
  color: rgba(255, 255, 255, 0.8);
}

.site-footer__media {
  margin: 59px auto 0;
  max-width: 1043px;
}

.site-footer__media img {
  display: block;
  width: 100%;
  height: auto;
}

/* Widget Calendly embarqué (monté par js/interactions.js quand
   data-calendly-url est renseignée) — retours 13/08.

   OBJECTIF : coller à la maquette, qui montre un widget SOMBRE fondu dans le
   footer noir. Les paramètres de couleur passés par interactions.js
   (background_color=111111 / text_color=ffffff / primary_color=675eff) sont
   bien appliqués par le compte : la carte ressort en #111111, soit
   exactement --color-neutral-950, la couleur du footer. Le widget se fond
   donc dans la section au lieu de former un bloc clair.

   Géométrie mesurée à 1080px de large (2 colonnes garanties au-dessus de
   ~1024px ; en dessous Calendly empile ses blocs) :
     · carte à left:141 / top:67
     · vue calendrier          → 798 × 662
     · vue créneau sélectionné → 970 × 698  ← état le PLUS large
   Le conteneur est calé sur 970 : l'iframe est rognée et recentrée, la vue de
   réservation remplit exactement le cadre et RIEN n'est jamais coupé.
   (Se caler sur 798 rognerait le formulaire de réservation.)

   Retour 14/08 — les bandes grises sur les côtés : elles venaient de ce cadre
   figé à 970. Calendly pose sa carte sur un fond de page #222222 qu'aucun CSS
   ne peut atteindre (iframe cross-origin) ; en vue calendrier la carte ne fait
   que 798, donc 86px de #222 dépassaient de chaque côté. Le cadre suit
   désormais la vue affichée — il colle à la carte dans les deux cas et le #222
   n'est jamais visible :
     · vue calendrier (défaut)     → 798 × 662
     · vue réservation (.is-wide)  → 970 × 698
   Le basculement est piloté par les messages postés par Calendly à la page
   (calendly.event_type_viewed / date_and_time_selected / event_scheduled) —
   voir js/interactions.js. Sans JS, on reste sur la vue calendrier, qui est
   l'état d'arrivée. */
.site-footer__media--calendly {
  max-width: 798px; /* = carte en vue calendrier (état d'arrivée) */
  transition: max-width 200ms ease;
  background: var(--color-neutral-950); /* #111 — même fond que le footer */
  border-radius: var(--radius-lg);
  overflow: hidden;
  /* pas d'ombre portée : le widget se fond dans le footer, il ne flotte plus dessus */
}

.site-footer__calendly {
  display: block;
  width: 1080px;                  /* > seuil 2 colonnes de Calendly (~1024px) */
  max-width: none;
  margin-left: calc(50% - 540px); /* recentre l'iframe rognée, quelle que soit la largeur du conteneur */
  margin-top: -67px;              /* rogne le fond de page au-dessus de la carte (mesuré) */
  height: 729px;                  /* 662 (carte, vue calendrier) + 67 rognés en haut */
  border: 0;
  background: var(--color-neutral-950);
  transition: height 200ms ease;
}

/* Vue réservation : la carte s'élargit, le cadre suit. */
.site-footer__media--calendly.is-wide { max-width: 970px; }
.site-footer__media--calendly.is-wide .site-footer__calendly { height: 765px; } /* 698 + 67 */

/* Sous la largeur de l'iframe, le rognage n'a plus de sens : on laisse
   Calendly empiler ses blocs et on rend la hauteur en conséquence. */
@media (max-width: 1050px) {
  .site-footer__media--calendly { max-width: 100%; }

  .site-footer__calendly {
    width: 100%;
    margin-left: 0;
    margin-top: 0;
    height: 1000px;
  }
}

/* --- Séparateur + bas de page ------------------------------------- */

.site-footer__divider {
  display: block;
  width: 100%;
  height: 2px;
}

.site-footer__bottom {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  padding: 61px clamp(20px, 8.33vw, 120px) 0;
}

.site-footer__social {
  display: inline-flex;
}

.site-footer__social img {
  display: block;
}

.site-footer__nav {
  display: flex;
  flex-wrap: wrap;
  gap: 30px;
  font-family: var(--font-display);
  font-size: var(--text-body);
  line-height: var(--text-body--line-height);
}

.site-footer__nav-link {
  /* hors tokens: rgba(255,255,255,.7) × opacité 70% mesurées Figma */
  color: rgba(255, 255, 255, 0.49);
  text-decoration: none;
  transition: color 0.2s ease;
}

.site-footer__nav-link--strong {
  color: rgba(255, 255, 255, 0.7);
}

.site-footer__nav-link:hover {
  color: var(--color-white);
}

/* --- Wordmark géant ------------------------------------------------ */

.site-footer__wordmark {
  margin: 4px 0 0;
  padding-bottom: 48px;
  text-align: center;
  font-size: clamp(64px, 18.75vw, 270px); /* 270px @1440 */
  line-height: 1.2; /* 323/270 */
  font-weight: 700;
  letter-spacing: -0.05em; /* -13.5px @270px */
  white-space: nowrap;
  background: linear-gradient(90deg, rgba(255, 119, 74, 0.5), rgba(103, 94, 255, 0.5));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* --- Étoiles décoratives ------------------------------------------- */

.site-footer__star {
  position: absolute;
  z-index: 2;
  pointer-events: none;
  /* positions ancrées en bas (footer 1331px de haut dans Figma) */
}

.site-footer__star--blur-sm {
  left: 207px;
  bottom: 375px;
  width: 114px;
  height: 112px;
  filter: blur(2.5px);
}

.site-footer__star--lg {
  left: 268px;
  bottom: 206px;
  width: 183px;
  height: 180px;
}

.site-footer__star--blur-lg {
  left: 320px;
  bottom: 440px;
  width: 130px;
  height: 174px;
  object-fit: cover;
  object-position: bottom;
  filter: blur(5px);
}

/* --- Responsive (adaptation proposée, maquette desktop-only) ------- */

@media (max-width: 1024px) {
  .site-footer__cta {
    padding-top: 104px;
  }

  .site-footer__media {
    margin-top: 48px;
  }

  .site-footer__star {
    transform: scale(0.7);
    transform-origin: bottom left;
  }
}

@media (max-width: 768px) {
  .site-footer__bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
    padding-top: 40px;
  }

  .site-footer__nav {
    gap: 16px 24px;
  }

  .site-footer__wordmark {
    padding-bottom: 24px;
  }

  .site-footer__star {
    display: none;
  }
}