/*
@author UBPartner
*/
/* ==========================================================
   FOOTER - commun à toutes les pages
   ========================================================== */

/* ==========================================================
   FOOTER - fond sombre + arcs concentriques
   ========================================================== */
.footer-section {
  position: relative;
  overflow: hidden;
  padding: 130px 0 40px;
  margin-top: 40px;
  /* halo lumineux à l'aplomb des arcs, puis le dégradé du hero
     assombri d'un cran */
  background: radial-gradient(
      260px 260px at 10% 12%,
      rgba(214, 193, 250, 0.42),
      rgba(214, 193, 250, 0) 65%
    ),
    radial-gradient(
      620px 620px at 10% 12%,
      rgba(180, 142, 232, 0.26),
      rgba(180, 142, 232, 0) 68%
    ),
    linear-gradient(
      105deg,
      #436ba1 0%,
      #4c609e 30%,
      #574f9c 55%,
      #65409d 78%,
      #7038a1 100%
    );
  color: #fff;
}

/* fondu en haut, symétrique de celui du hero : le footer émerge du fond de page */
.footer-section::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 150px;
  background: linear-gradient(
    180deg,
    #f3f4fb 0%,
    rgba(243, 244, 251, 0.85) 18%,
    rgba(243, 244, 251, 0.35) 45%,
    rgba(243, 244, 251, 0) 100%
  );
  pointer-events: none;
  z-index: 3;
}

.footer-arcs {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* ── Haut : logo + réseaux ── */
.footer-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 20px;
  padding-bottom: 60px;
}

.footer-logo {
  /* même logo que la navbar, sans retouche */
  height: 70px;
  width: auto;
}

.footer-follow {
  display: flex;
  align-items: center;
  gap: 16px;
  font-weight: 700;
}

.footer-social {
  display: flex;
  gap: 10px;
}

.footer-social a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: #fff;
  font-size: 16px;
  text-decoration: none;
  transition: 0.25s ease;
}

.footer-social a:hover {
  background: var(--primary);
  border-color: var(--primary);
  transform: translateY(-2px);
}

/* ── Colonnes ── */
.footer-heading {
  margin-bottom: 20px;
  font-size: 15.5px;
  font-weight: 700;
  color: #fff;
}

.footer-links {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-links li {
  margin-bottom: 14px;
}

.footer-links a {
  color: rgba(255, 255, 255, 0.88);
  font-size: 14px;
  text-decoration: none;
  transition: color 0.2s ease;
}

.footer-links a:hover {
  color: #fff;
}

.footer-note {
  max-width: 300px;
  margin-bottom: 16px;
  font-size: 13.5px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.78);
}

/* newsletter */
.newsletter-box {
  display: flex;
  gap: 8px;
  margin-bottom: 22px;
}

.newsletter-box input {
  /* base 0 et non auto : avec une base automatique, le champ
     réclame la largeur de son texte indicatif, et la ligne devient
     trop étroite en mobile - le bouton passait alors dessous,
     puisque le bloc peut revenir à la ligne pour loger le message
     d’erreur. Avec une base nulle, il se contente de la place
     restante après le bouton. */
  flex: 1 1 0;
  min-width: 0;
  height: 42px;
  padding: 0 18px;
  border-radius: 40px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
  font-size: 13.5px;
}

.newsletter-box input::placeholder {
  color: rgba(255, 255, 255, 0.45);
}

.newsletter-box input:focus {
  outline: none;
  border-color: var(--logoCyan);
  background: rgba(255, 255, 255, 0.1);
  box-shadow: none;
  color: #fff;
}

/* le bouton garde le style unique du site, juste calé sur la hauteur du champ */
.newsletter-box .btn {
  flex: 0 0 auto;
  height: 42px;
  padding: 0 20px;
}

.footer-contact {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-contact li {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 10px;
  font-size: 13.5px;
  color: rgba(255, 255, 255, 0.88);
}

.footer-contact i {
  color: var(--logoCyan);
  font-size: 15px;
}

/* ── Bas de page ── */
.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 60px;
  padding-top: 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.78);
  font-size: 13px;
}

.footer-legal {
  display: flex;
  flex-wrap: wrap;
  gap: 22px;
}

.footer-legal a {
  color: rgba(255, 255, 255, 0.78);
  text-decoration: none;
  font-size: 13px;
}

.footer-legal a:hover {
  color: #fff;
}

@media (max-width: 767.98px) {
  .footer-section {
    padding: 56px 0 28px;
  }
  .footer-top {
    padding-bottom: 40px;
  }
  .footer-bottom {
    margin-top: 40px;
  }
}


/* ==========================================================
   APPEL À L'ACTION EN TÊTE DE FOOTER
   Bloc à gauche centré (titre, accroche, bouton) et liste de
   raccourcis à droite, séparés du reste par un filet.
   ========================================================== */
.footer-cta {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: start;
  gap: 60px;
  padding-bottom: 70px;
  margin-bottom: 60px;
}

.footer-cta-main {
  max-width: 460px;
}

.footer-cta-title {
  margin: 0 0 16px;
  font-size: 34px;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.6px;
  color: #fff;
}

.footer-cta-lead {
  margin: 0 0 26px;
  font-size: 15.5px;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.78);
}

/* ── Raccourcis ── */
.footer-cta-heading {
  margin: 0 0 22px;
  font-size: 19px;
  font-weight: 700;
  color: #fff;
}

.footer-quick {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 16px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.16);
  color: #fff;
  font-size: 15.5px;
  font-weight: 600;
  text-decoration: none;
  transition: color 0.25s ease, border-color 0.25s ease;
}

.footer-quick i {
  flex: none;
  font-size: 17px;
  transition: transform 0.25s ease;
}

/* violet clair : lisible aussi bien sur le bleu que sur le violet
   du dégradé de fond */
.footer-quick:hover {
  color: #c9aef5;
  border-bottom-color: #c9aef5;
}

/* même geste que les flèches des boutons */
.footer-quick:hover i {
  transform: translate(3px, -3px);
}

@media (max-width: 991.98px) {
  .footer-cta {
    grid-template-columns: 1fr;
    gap: 44px;
    padding-bottom: 46px;
    margin-bottom: 46px;
  }
  .footer-cta-title {
    font-size: 27px;
  }
}

/* ==========================================================
   MOBILE - halo atténué et contenu centré
   ========================================================== */
@media (max-width: 767.98px) {
  /* le halo des arcs est calibré pour un footer large ;
     sur une colonne étroite il saturait tout le haut */
  .footer-section {
    background: radial-gradient(
        220px 220px at 50% 4%,
        rgba(214, 193, 250, 0.22),
        rgba(214, 193, 250, 0) 65%
      ),
      linear-gradient(
        160deg,
        #436ba1 0%,
        #4c609e 30%,
        #574f9c 55%,
        #65409d 78%,
        #7038a1 100%
      );
  }

  /* fondu du haut raccourci, comme sur le hero */
  .footer-section::before {
    height: 90px;
  }

  /* contenu centré, sauf les deux blocs à liste :
     « Vous hésitez encore ? » et « Restez informé » gardent
     leur alignement à gauche, seul leur titre est centré */
  .footer-top,
  .footer-bottom {
    text-align: center;
  }

  /* colonnes de liens : pas de centrage, juste un retrait à gauche.
     Le retrait porte sur la colonne entière, il décale donc le titre
     et les liens ensemble. */
  .footer-cols > [class*="col-"] {
    padding-left: 30px;
    text-align: left;
  }

  /* Logo réduit pour que « Suivez-nous » tienne sur la même ligne :
     à 70px il occupait trop de largeur et le bloc passait dessous.
     nowrap empêche le retour à la ligne une fois la place trouvée. */
  .footer-logo {
    height: 55px;
  }

  .footer-top {
    flex-wrap: nowrap;
    gap: 14px;
  }

  .footer-follow {
    gap: 10px;
    white-space: nowrap;
  }

  /* bouton resserré : sur une colonne étroite, chaque pixel rendu
     au champ évite que le texte indicatif soit tronqué */
  .newsletter-box .btn {
    padding: 0 16px;
  }

  .footer-cta-links {
    text-align: left;
  }

  .footer-cta-heading {
    text-align: center;
  }

  /* bloc « Comment pouvons-nous vous aider ? » centré en mobile
     uniquement ; il reste aligné à gauche en desktop */
  .footer-cta-main {
    margin-left: auto;
    margin-right: auto;
    text-align: center;
  }

  .footer-bottom,
  .footer-legal {
    justify-content: center;
  }

  .footer-cta-links{
    margin-top: 40px;
  }

  .footer-cta-heading{
    font-size: 27px;
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -0.6px;
    color: #fff;
  }

}