/* Appliquer box-sizing globalement */
*, *::before, *::after {
  box-sizing: border-box;
 }
 
 /* ---- Style global ---- */
 body {
  font-family: Arial, sans-serif;
  background-color: #f5f7fa;
  display: flex;
  flex-direction: column;
  width: 100%;
  min-height: 100vh;
  color: #272a49; /* Couleur globale pour tous les textes */
  margin: 0; /* Ajouté pour éviter les marges par défaut */
  overflow-x: hidden; /* Empêche le défilement horizontal */
  margin-top: 50px !important;
 }
 
 .hero {
  text-align: center !important; /* Centre tous les textes dans la section hero */
 }
 
 .hero h1 {
  font-size: 4vw;
  font-weight: bold;
 }
 
 .hero p {
  font-size: 1.5vw;
 }
 
 /* Conserver le texte blanc sur les boutons */
 button,
 .btn,
 .cta-button,
 .view-all {
  color: white !important;
 }
 
 .cta-button {
  background-color: #ff3c00;
  padding: 10px 20px;
  border: none;
  cursor: pointer;
  font-size: 1.5vw;
  border-radius: 5px;
  display: block !important;
  margin: 20px auto !important; /* Centre le bouton inscription gratuite */
 }
 
 .cta-button:hover {
  background-color: #ff3c00;
 }
 
 /* ---- Section des offres ---- */
 .offers-section {
  text-align: center !important;
  flex-grow: 1;
  overflow: hidden;
  width: 100%;
  margin-top: 0;
 }
 
 /* ---- Grille des offres ---- */
 .offers-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 20px;
  padding: 20px;
  justify-content: center;
  max-width: 100%;
  overflow: hidden;
 }
 
 /* ---- Cartes des offres ---- */
 .offer-card {
  background-color: white;
  border-radius: 15px;
  padding: 15px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  transition: transform 0.2s ease-in-out;
  max-width: 300px; /* Limite la largeur des cartes pour garantir 3 par ligne */
  width: 100%;
 }
 
 .offer-card:hover {
  transform: scale(1.05);
 }
 
 .offer-card img {
  width: 100%;
  max-width: 120px;
  height: auto;
  margin-bottom: 10px;
 }
 
 .offer-card a {
  text-decoration: none;
  color: #272a49;
  font-weight: bold;
  font-size: 1em;
  width: 100%; /* Assure que le texte utilise toute la largeur disponible */
  display: block; /* Garantit que le lien occupe tout l'espace */
 }
 
 .offer-card a:hover {
  color: #272a49;
 }
 
 /* ---- Bouton voir toutes les offres ---- */
 .view-all {
  background-color: #ff3c00;
  padding: 15px;
  font-size: 1.2em;
  border: none;
  cursor: pointer;
  border-radius: 10px;
  display: block !important;
  width: 250px;
  margin: 20px auto !important;
 }
 
 .view-all:hover {
  background-color: #ff3c00;
 }
 
 /* ---- Bouton générique ---- */
 .btn {
  display: inline-block;
  padding: 8px 16px;
  background-color: #ff3c00;
  text-decoration: none;
  border-radius: 6px;
  transition: transform 0.2s ease, background-color 0.3s ease;
  font-weight: bold;
 }
 
 .btn:hover {
  transform: scale(1.05);
  background-color: #ff3c00;
 }
 
 /* ---- Section des articles ---- */
 .articles-section {
  width: 100%;
  margin: 40px 0;
  padding: 0 20px;
  display: flex;
  flex-direction: column;
  align-items: center; /* Centre horizontalement tout le contenu */
 }
 
 .articles-section h2 {
  font-size: 2em; /* Même taille que les autres h2 */
  color: #272a49;
  margin: 0 0 20px 0;
  text-align: center !important;
  width: 100%; /* Assure que le titre utilise toute la largeur */
  display: block;
 }
 
 /* ---- Grille des articles ---- */
 .articles-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 3 colonnes fixes pour desktop */
  gap: 20px;
  max-width: 1000px; /* Même largeur max que steps-grid */
  width: 100%;
  justify-content: center;
  align-items: stretch; /* Assure que les cartes ont la même hauteur */
  padding: 0 20px;
 }
 
 /* ---- Media Queries ---- */
 @media screen and (max-width: 768px) {
  .hero h1 {
  font-size: 6vw;
  }
  .hero p {
  font-size: 3vw;
  }
  .cta-button {
  font-size: 3vw;
  }
  .offers-grid {
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  }
  .articles-grid {
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); /* 1 ou 2 colonnes sur mobile */
  gap: 15px;
  padding: 0 10px;
  }
  .offer-card {
  max-width: none; /* Supprime la limite de largeur sur mobile pour plus de fluidité */
  }
  .articles-section h2 {
  font-size: 1.5em; /* Réduit légèrement la taille du titre sur mobile */
  }
 }
 
 /* Footer */
 .footer {
  background-color: #272a49;
  color: white;
  text-align: center !important;
  padding: 10px 0;
  width: 100vw;
  position: relative;
  bottom: 0;
  left: 0;
 }
 
 /* ---- Image du logo ---- */
 .hero-image {
  display: block;
  margin: 20px auto !important;
  width: 180px;
  height: 180px;
  object-fit: cover;
  border-radius: 50%;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
 }
 
 .hero-image:hover {
  transform: scale(1.1);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
 }
 
 /* ---- Responsive pour l'image du logo ---- */
 @media screen and (max-width: 768px) {
  .hero-image {
  width: 120px;
  height: 120px;
  margin: 15px auto !important;
  }
 }
 
 /* Bloc des étapes */
 .steps-section {
  margin: 20px 0;
  text-align: center !important; /* Centre les textes de la section étapes */
 }
 
 .steps-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* 2 colonnes par défaut */
  gap: 20px;
  margin: 0 auto !important;
  max-width: 1000px;
 }
 
 .step-card {
  background-color: white;
  border-radius: 10px;
  padding: 20px;
  text-align: center !important;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  transition: transform 0.2s ease;
 }
 
 .step-card:hover {
  transform: scale(1.05);
 }
 
 .step-number {
  font-weight: bold;
  font-size: 2em;
  color: #ff3c00;
  margin-bottom: 10px;
 }
 
 /* Transition sur tous les boutons */
 button, .btn, .cta-button, .view-all {
  transition: transform 0.2s ease;
 }
 
 button:hover, .btn:hover, .cta-button:hover, .view-all:hover {
  transform: scale(1.05);
 }
 
 a {
  font-weight: 500;
  color: #272a49;
  text-decoration: inherit;
 }
 
 a:hover {
  color: #272a49;
 }
 
 h1 {
  font-size: 3.2em;
  line-height: 1.1;
 }
 
 button {
  border-radius: 8px;
  border: 1px solid transparent;
  padding: 0.6em 1.2em;
  font-size: 1em;
  font-weight: 500;
  font-family: inherit;
  background-color: #1a1a1a;
  cursor: pointer;
  transition: border-color 0.25s;
 }
 
 button:focus,
 button:focus-visible {
  outline: 4px auto -webkit-focus-ring-color;
 }
 
 /* Désactiver le surlignement au survol */
 a, a:hover, a:focus {
  text-decoration: none;
 }
 
 /* Le contenu principal occupe l'espace restant */
 .main-content {
  flex: 1;
 }
 
 /* Supprimer le soulignement des liens et textes */
 .categories-page a {
  text-decoration: none !important;
 }
 
 @media screen and (max-width: 768px) {
  #homeContainer {
  padding-top: 70px; /* Ajustez cette valeur en fonction de la hauteur de votre navbar */
  }
 }

/* conteneur général */
.reviews-trustpilot {
  margin: 3rem 0;
  overflow: hidden;
  position: relative;
  background: #f5f7fa;
  padding: 1rem 0;
  text-align: center;
}

/* titre centré */
.reviews-trustpilot h2 {
  margin-bottom: 1rem;
  color: #272a49;
  width: 100%;
  text-align: center;
}

/* zone masquée + piste animée */
.reviews-trustpilot__scroller {
  overflow: hidden;
  width: 100%;
}

.reviews-trustpilot__track {
  display: flex;
  gap: 1rem;
  /* double la longueur pour boucle fluide */
  width: max-content;
  flex-wrap: nowrap; /* empêche le retour à la ligne */
  animation: scroll-left 20s linear infinite;
}

.reviews-trustpilot__card {
  /* carte carrée de 150×150px */
  flex: 0 0 auto;
  width: 150px;            /* ajustez selon vos besoins */
  aspect-ratio: 1 / 1;     /* force un ratio 1:1 */
  background: #fff;
  border-radius: 15px;
  overflow: hidden;
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
  transition: transform 0.2s;
  text-decoration: none;
}

.reviews-trustpilot__card img {
  width: 100%;
  height: 100%;
  object-fit: cover;       /* remplit la carte sans déformer */
  object-position: center; /* centre le recadrage */
}

/* keyframes pour défiler */
@keyframes scroll-left {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

/* Responsive si besoin */
@media (max-width: 768px) {
  .reviews-trustpilot__card {
    width: 120px;
    aspect-ratio: 1 / 1;
  }
}