/* Footer - Clean Modern Design
 * Lighter background, better organization
 */

/* ==========================================================================
   FOOTER BASE STYLES
   ========================================================================== */

.footer {
  background-color: #1a1a1a;
  color: #fff;
  padding: 5rem 0 2rem;
  padding-bottom: calc(2rem + env(safe-area-inset-bottom, 0px));
  position: relative;
  z-index: 10;
  opacity: 1 !important;
  visibility: visible !important;
}

.footer::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.15), transparent);
}

.footer-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 3rem;
}

/* ==========================================================================
   FOOTER GRID LAYOUT - 4 columns
   ========================================================================== */

.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 3rem;
}

.footer-grid-top {
  margin-bottom: 3rem;
  padding-bottom: 3rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.footer-grid-bottom {
  margin-bottom: 3rem;
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 3rem;
}

/* ==========================================================================
   BRAND COLUMN
   ========================================================================== */

.footer-column {
  display: flex;
  flex-direction: column;
}

.footer-brand {
  gap: 1.5rem;
}

.footer-logo {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  text-decoration: none;
  color: #fff;
  font-size: 1.5rem;
  font-weight: 500;
  letter-spacing: -0.02em;
}

.footer-logo img {
  width: 36px;
  height: 36px;
}

.footer-tagline {
  color: rgba(255, 255, 255, 0.6);
  font-size: 0.9rem;
  line-height: 1.7;
  max-width: 280px;
  margin-top: 0.75rem;
}

.footer-social {
  display: flex;
  gap: 0.75rem;
  margin-top: 1rem;
}

.footer-social a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.7);
  transition: all 0.2s ease;
}

.footer-social a:hover {
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
  transform: translateY(-2px);
}

.footer-social svg {
  width: 18px;
  height: 18px;
}

/* ==========================================================================
   FOOTER LINKS COLUMNS
   ========================================================================== */

.footer-heading {
  color: #fff;
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 1.5rem;
  font-weight: 600;
}

.footer-links {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.footer-links a {
  color: rgba(255, 255, 255, 0.6);
  text-decoration: none;
  font-size: 0.9rem;
  transition: color 0.2s ease;
  display: inline-block;
  /* Let long unbreakable tokens (e.g. contact@ontextgroup.com) wrap instead of
     forcing the grid track wider than the viewport on narrow phones. */
  overflow-wrap: anywhere;
}

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

/* Hide arrows - cleaner look */
.footer-links a .link-arrow {
  display: none;
}


/* ==========================================================================
   FEATURED ARTICLE CARD
   ========================================================================== */

.footer-featured {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  padding: 1.25rem;
  margin-top: 0;
  text-decoration: none;
  display: block;
  transition: all 0.2s ease;
}

.footer-featured:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.2);
}

.footer-featured-label {
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.65rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  display: block;
  margin-bottom: 0.5rem;
}

.footer-featured-title {
  color: #fff;
  font-size: 0.9rem;
  font-weight: 500;
  margin-bottom: 0.25rem;
  display: block;
}

.footer-featured-desc {
  color: rgba(255, 255, 255, 0.5);
  font-size: 0.8rem;
  display: block;
}

/* Large featured card for bottom row */
.footer-featured-large {
  padding: 1.5rem;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.footer-featured-large .footer-featured-title {
  font-size: 1.1rem;
  margin-bottom: 0.5rem;
}

.footer-featured-large .footer-featured-desc {
  font-size: 0.85rem;
  line-height: 1.5;
}

/* ==========================================================================
   FOOTER DIVIDER
   ========================================================================== */

.footer-divider {
  height: 1px;
  background: rgba(255, 255, 255, 0.1);
  margin: 0 0 2rem;
}

/* ==========================================================================
   FOOTER BOTTOM
   ========================================================================== */

.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1.5rem;
}

/* Email Contact affiché uniquement en mobile (voir media query) ; masqué en
   desktop/tablette pour ne rien changer au footer existant. */
.footer-mobile-email {
  display: none;
}

.footer-copyright {
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.8rem;
}

.footer-locale {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.8rem;
}

.footer-locale svg {
  opacity: 0.5;
}

.footer-locale select {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: rgba(255, 255, 255, 0.6);
  padding: 0.375rem 0.75rem;
  border-radius: 4px;
  font-size: 0.8rem;
  cursor: pointer;
  outline: none;
}

.footer-locale select:hover {
  border-color: rgba(255, 255, 255, 0.3);
}

/* ==========================================================================
   RESPONSIVE - TABLET
   ========================================================================== */

@media screen and (max-width: 1023px) {
  .footer-container {
    padding: 0 2rem;
  }

  .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
  }

  .footer-grid-top {
    padding-bottom: 2rem;
    margin-bottom: 2rem;
  }

  .footer-brand {
    grid-column: span 2;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
    padding-bottom: 2rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    margin-bottom: 1rem;
  }

  .footer-brand > div:first-child {
    max-width: 300px;
  }

  .footer-social {
    margin-top: 0;
  }

}

/* ==========================================================================
   RESPONSIVE - MOBILE
   ========================================================================== */

@media screen and (max-width: 767.98px) {
  .footer {
    padding: 1.5rem 0 1rem;
    /* Dégager la zone des boutons flottants fixes (.mobile-floating-nav :
       bottom 5vw + 44px de hauteur) pour qu'ils ne recouvrent pas le mail /
       copyright en bas de footer. */
    padding-bottom: calc(5vw + 44px + 1.25rem + env(safe-area-inset-bottom, 0px));
  }

  .footer-container {
    padding: 0 1.5rem;
  }

  .footer-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 1.1rem;
  }

  .footer-grid-top {
    padding-bottom: 0.85rem;
    margin-bottom: 0.85rem;
  }

  .footer-brand {
    grid-column: span 2;
    flex-direction: column;
    gap: 0.6rem;
    padding-bottom: 0.85rem;
    /* La règle tablette donne un border-bottom au brand ; comme il est désormais
       seul dans grid-top (qui a déjà son propre border-bottom), on l'enlève pour
       éviter une double ligne de séparation. */
    border-bottom: none;
    margin-bottom: 0;
  }

  /* Compacter le bloc marque sur mobile */
  .footer-tagline {
    line-height: 1.45;
    margin-top: 0.4rem;
  }

  .footer-social {
    margin-top: 0.5rem;
  }

  .footer-social a {
    width: 38px;
    height: 38px;
  }

  /* Footer mobile minimal : la navigation complète est déjà accessible via le
     bouton "Menu" flottant, donc on masque TOUTES les colonnes de liens
     (Solutions, Technologies, Produits, Études de cas, À la une, Entreprise).
     Elles restent dans le HTML (display:none) → liens toujours crawlables,
     aucun impact SEO. Entre les deux lignes de séparation on ne garde que la
     marque puis la colonne Produits. L'email Contact est sorti de cette bande
     et affiché en bas près du copyright (.footer-mobile-email). */
  .footer-grid-top .footer-column:not(.footer-brand),
  .footer-grid-bottom .footer-column:nth-child(1),
  .footer-grid-bottom .footer-column:nth-child(3),
  .footer-grid-bottom .footer-column:nth-child(4) {
    display: none;
  }

  .footer-brand > div:first-child {
    max-width: 100%;
  }

  .footer-tagline {
    max-width: 100%;
  }

  .footer-heading {
    margin-bottom: 0.6rem;
    font-size: 0.7rem;
  }

  .footer-links {
    gap: 0.15rem;
  }

  .footer-links a {
    font-size: 0.85rem;
    min-height: 32px;
    display: flex;
    align-items: center;
  }

  .footer-bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
  }

  /* Seule la colonne Produits reste visible dans cette bande → 1 seule colonne */
  .footer-grid-bottom {
    grid-template-columns: minmax(0, 1fr);
    margin-bottom: 0.85rem;
  }

  /* Produits : les 3 liens en ligne horizontale plutôt qu'empilés en colonne,
     sinon le texte ne remplit que la gauche et laisse un grand vide à droite. */
  .footer-grid-bottom .footer-column:nth-child(2) .footer-links {
    flex-direction: row;
    flex-wrap: wrap;
    column-gap: 1.75rem;
    row-gap: 0.25rem;
  }

  .footer-grid-bottom .footer-column:nth-child(2) .footer-links a {
    min-height: 0;
  }

  /* Email Contact sous la 2e ligne, près du copyright (sans titre) */
  .footer-mobile-email {
    display: inline-block;
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.85rem;
    text-decoration: none;
  }

  .footer-mobile-email:hover {
    color: #fff;
  }

  .footer-divider {
    margin: 0 0 0.85rem;
  }

  .footer-featured {
    margin-top: 0;
  }
}

/* ==========================================================================
   RESPONSIVE - SMALL MOBILE
   ========================================================================== */

@media screen and (max-width: 479px) {
  .footer-container {
    padding: 0 1rem;
  }

  .footer-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 1.5rem;
  }

  .footer-brand {
    grid-column: span 2;
  }

  /* Une seule colonne (Produits) dans la bande, comme en mobile standard */
  .footer-grid-bottom {
    grid-template-columns: minmax(0, 1fr);
  }
}