/**
 * CEMôme Footer Unified Styles
 * Styles unifiés pour le footer - Front Office et Auth identiques
 * Utilise exactement le même design que le front office
 */

/**
 * CEMOME BANNER (image de background en haut du footer)
 * Exactement comme dans le design system - renforce les styles si nécessaire
 */

.cemome-banner {
  width: 100% !important;
  height: 2px !important;
  background-image: url("../front_office/bg-top-header-et3w0fs.png") !important;
  background-repeat: repeat-x !important;
  background-position: top !important;
  background-size: auto !important;
}

/**
 * FOOTER LAYOUT
 * Layout principal du footer - identique front et auth
 */

.footer-simplified {
  background-color: var(--cemome-bg-primary);
  color: var(--cemome-text-secondary);
  padding: var(--cemome-space-8) 0 0 0; /* Padding top pour espacement correct */
}

.footer-simplified .section-title {
  color: var(--cemome-text-primary);
  font-weight: var(--cemome-fw-semibold);
  font-size: var(--cemome-fs-lg);
  margin-bottom: var(--cemome-space-5);
}

/**
 * CONTACT ITEMS
 * Items de contact - téléphone, email, adresse, etc.
 */

.footer-simplified .contact-item {
  display: flex;
  align-items: center;
  margin-bottom: var(--cemome-space-4);
  color: var(--cemome-text-secondary);
  font-size: var(--cemome-fs-base);
}

.footer-simplified .contact-item i {
  margin-right: var(--cemome-space-3);
  width: 1.5rem;
  color: var(--cemome-primary);
  flex-shrink: 0;
}

.footer-simplified .contact-item a {
  color: var(--cemome-text-secondary);
  text-decoration: none;
  transition: var(--cemome-transition-base);
}

.footer-simplified .contact-item a:hover {
  color: var(--cemome-primary);
}

/**
 * BUTTONS
 * Boutons dans le footer (retour au site, etc.)
 */

.footer-simplified .btn {
  font-weight: var(--cemome-fw-medium);
  border-radius: var(--cemome-radius-lg);
  padding: var(--cemome-space-3) var(--cemome-space-6);
  transition: var(--cemome-transition-base);
}

.footer-simplified .btn-primary {
  background-color: var(--cemome-primary);
  border-color: var(--cemome-primary);
  color: var(--cemome-white);
}

.footer-simplified .btn-primary:hover {
  background-color: var(--cemome-primary-dark);
  border-color: var(--cemome-primary-dark);
  color: var(--cemome-white);
  transform: translateY(-1px);
  box-shadow: var(--cemome-shadow-md);
}

/**
 * LEGAL LINKS
 * Liens juridiques et légaux
 */

.footer-simplified .legal-links {
  margin-top: var(--cemome-space-4);
}

.footer-simplified .legal-links a {
  color: var(--cemome-text-secondary);
  text-decoration: none;
  font-size: var(--cemome-fs-sm);
  transition: var(--cemome-transition-base);
}

.footer-simplified .legal-links a:hover {
  color: var(--cemome-primary);
  text-decoration: underline;
}

/**
 * COPYRIGHT SECTION
 * Section copyright en bas du footer
 */

.footer-copyright {
  background-color: #e9ecef;
  color: var(--cemome-text-secondary);
  font-size: var(--cemome-fs-sm);
  padding: var(--cemome-space-4) 0;
  margin-top: var(--cemome-space-6);
  border-top: 1px solid var(--cemome-border-light);
}

/**
 * RESPONSIVE FOOTER
 * Adaptations responsive identiques pour toutes les pages
 */

@media (max-width: 768px) {
  .footer-simplified {
    padding: var(--cemome-space-6) 0 0 0;
  }

  .footer-simplified .section-title {
    font-size: var(--cemome-fs-base);
    margin-bottom: var(--cemome-space-4);
  }

  .footer-simplified .contact-item {
    margin-bottom: var(--cemome-space-3);
    font-size: var(--cemome-fs-sm);
  }

  .footer-simplified .contact-item i {
    margin-right: var(--cemome-space-2);
    width: 1.2rem;
  }

  .footer-simplified .legal-links {
    text-align: center;
    margin-top: var(--cemome-space-5);
  }
}

@media (max-width: 576px) {
  .footer-simplified .section-title {
    font-size: var(--cemome-fs-sm);
    margin-bottom: var(--cemome-space-3);
  }

  .footer-simplified .contact-item {
    font-size: var(--cemome-fs-xs);
    margin-bottom: var(--cemome-space-2);
  }

  .footer-simplified .btn {
    padding: var(--cemome-space-2) var(--cemome-space-4);
    font-size: var(--cemome-fs-sm);
  }

  .footer-copyright {
    padding: var(--cemome-space-3) 0;
  }
}