/* === PALETTE === */
:root {
    --footer-bg: #0f0f0f;
    --footer-text: #ffffff;
    --footer-accent: #5F36F5;
  }
  
  /* === GÉNÉRAL === */
  .site-footer {
    background: var(--footer-bg);
    color: var(--footer-text);
  }
  .site-footer a {
    color: var(--footer-text);
    text-decoration: none;
    transition: color 0.2s ease;
  }
  .site-footer a:hover { color: var(--footer-accent); }
  
  /* === GRILLE TOP === */
  .footer-top {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 2rem;
    padding: 3rem 1.5rem;
    max-width: 1200px;
    margin: 0 auto;
  }
  
  .footer-brand .logo { width: 140px; }
  .tagline { margin-top: 0.5rem; font-size: 0.9rem; line-height: 1.4; }
  
  .footer-nav h4,
  .footer-newsletter h4,
  .footer-social h4 { margin-bottom: 0.75rem; font-size: 1.1rem; }
  
  .footer-nav ul,
  .social-list { list-style: none; margin: 0; padding: 0; }
  .footer-nav li { margin-bottom: 0.5rem; }
  
  /* === NEWSLETTER === */
  .footer-newsletter p { font-size: 0.9rem; margin-bottom: 0.75rem; }
  .newsletter-form { display: flex; gap: 0.5rem; flex-wrap: wrap; }
  .newsletter-form input {
    flex: 1;
    padding: 0.6rem 0.8rem;
    border: none;
    border-radius: 4px;
    min-width: 180px;
  }
  .newsletter-form button {
    background: var(--footer-accent);
    border: none;
    border-radius: 4px;
    padding: 0.6rem 1.25rem;
    color: #fff;
    cursor: pointer;
    flex-shrink: 0;
    white-space: nowrap;
  }
  .newsletter-form button:hover { opacity: 0.9; }
  
  /* === RÉSEAUX SOCIAUX === */
  .footer-social {
    padding: 0 1.5rem; /* Ajout d'un espacement sur les côtés */
    position: relative;
  }

  .footer-social::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    height: 80%;
    width: 1px;
    background-color: rgba(255, 255, 255, 0.1);
  }

  .social-list {
    display: flex;
    flex-direction: column; /* un lien par ligne */
    gap: 0.8rem; /* Légèrement plus d'espace entre les icônes */
    padding: 0.5rem 0; /* Ajout d'un peu d'espace vertical */
  }

  .social-list a {
    display: inline-flex;
    align-items: center;
    gap: 0.8rem;
    font-size: 0.95rem;
    padding: 0.4rem 0.8rem; /* Ajout de padding pour un meilleur espacement */
    border-radius: 6px;
    transition: all 0.2s ease;
  }

  .social-list a:hover {
    background-color: rgba(95, 54, 245, 0.1);
    transform: translateX(5px);
  }

  .social-list i {
    font-size: 1.25rem;
    min-width: 1.5rem; /* Largeur fixe pour aligner les icônes */
    text-align: center;
  }

  /* Ajustement pour les écrans moyens */
  @media (min-width: 768px) {
    .footer-social {
      padding: 0 2rem; /* Plus d'espace sur les côtés pour les tablettes et plus grands */
    }
  }

  /* Ajustement pour les grands écrans */
  @media (min-width: 1200px) {
    .footer-social {
      padding: 0 2.5rem; /* Encore plus d'espace sur les très grands écrans */
    }
  }

  /* Ajustement spécifique pour la version mobile */
  @media (max-width: 480px) {
    .footer-social {
      padding: 1.5rem 1.5rem; /* Ajout d'un espacement vertical en plus sur mobile */
    }
    
    .footer-social::before {
      display: none; /* Cacher la ligne de séparation sur mobile */
    }
    
    .social-list {
      flex-direction: row; /* Mettre les icônes côte à côte sur mobile */
      flex-wrap: wrap;
      justify-content: center;
      gap: 1.2rem;
    }
    
    .social-list a {
      padding: 0.5rem 1rem;
      background-color: rgba(255, 255, 255, 0.05);
      border-radius: 8px;
    }
  }

  /* === BOTTOM STRIP === */
  .footer-bottom {
    border-top: 1px solid #1d1d1d;
    text-align: center;
    padding: 1rem;
    font-size: 0.8rem;
  }
  .footer-bottom p { margin: 0.3rem 0; }
  
  /* === MOBILE XS === */
  @media (max-width: 480px) {
    .footer-top { padding: 2.5rem 1rem; }
    .newsletter-form { flex-direction: column; gap: 0.75rem; }
    .newsletter-form button { width: 100%; }
  }