/* ==================================================
   FICHIER PRINCIPAL CSS
   Importe tous les modules CSS
   ================================================= */

/* 1. Base - Reset, variables et styles globaux */
@import url('./base/_variables.css');
@import url('./base/_reset.css');
@import url('./base/_global.css');
@import url('./base/_naming-conventions.css');

/* 2. Components - Éléments réutilisables */
@import url('./components/_navbar.css');
@import url('./components/_buttons.css');
@import url('./components/_cards.css');
@import url('./components/_footer.css');
@import url('./components/_forms.css');
@import url('./components/cookie-modal.css');

/* 3. Sections - Sections spécifiques de la page */
@import url('./sections/_hero.css');
@import url('./sections/_asymetric.css');
@import url('./sections/_parallax.css');
@import url('./sections/_carousel.css');
@import url('./sections/_blog.css');

/* 4. Pages - Styles spécifiques à certaines pages */
@import url('./pages/_article.css');
@import url('./pages/_success.css');

/* 5. Utilities - Animations et responsive */
@import url('./utilities/_animations.css');
@import url('./utilities/_responsive.css');

/* Social Share Buttons */
.social-share {
  margin: 2rem 0;
  text-align: center;
}

.social-share h3 {
  margin-bottom: 1rem;
  font-size: 1.2rem;
  color: #333;
}

.share-buttons {
  display: flex;
  justify-content: center;
  gap: 1rem;
}

.share-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  color: white;
  text-decoration: none;
  transition: transform 0.2s ease;
}

.share-button:hover {
  transform: scale(1.1);
}

.share-button.facebook {
  background-color: #1877f2;
}

.share-button.twitter {
  background-color: #000000;
}

.share-button.linkedin {
  background-color: #0077b5;
}

.share-button.instagram {
  background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
}

.share-button i {
  font-size: 1.2rem;
}

/* Responsive styles for social share buttons */
@media (max-width: 480px) {
  .social-share {
    margin: 1.5rem 0;
  }

  .social-share h3 {
    font-size: 1.1rem;
    margin-bottom: 0.8rem;
  }

  .share-buttons {
    gap: 0.8rem;
  }

  .share-button {
    width: 36px;
    height: 36px;
  }

  .share-button i {
    font-size: 1rem;
  }
}

@media (max-width: 360px) {
  .share-buttons {
    gap: 0.6rem;
  }

  .share-button {
    width: 32px;
    height: 32px;
  }

  .share-button i {
    font-size: 0.9rem;
  }
}