.section-vision {
  width: 100%;
  padding: 50px 90px; /* marge intérieure */
  font-family: "Avenir", sans-serif;
  color: white;
  background: #0b0b28; /* fond sombre sur toute la section */
  border-radius: 0; /* bien rectangulaire */
}
.section-projet {
  filter: grayscale(100%);
}

.vision-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 20px;
  margin-bottom: 50px;
}

.title-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.title-left .dot {
  width: 20px;
  height: 20px;
  background: #2ecc71;
  border-radius: 50%;
  box-shadow: 0 0 15px rgba(46, 204, 113, 0.8);
}

.title-left h2 {
  font-size: 1.5rem;
  font-weight: bold;
  color: #fff;
}

.section-vision .title-right h3 {
  font-size: 2.8rem;
  font-weight: 500;
  color: #fff;
  margin-bottom: 8px;
  font-family: "Futura Std", sans-serif;
  line-height: 1.2;
  margin-left: 130px;
  letter-spacing: -1px;
}

.section-vision .title-right p {
  font-size: 1.2rem;
  color: #ccc;
  line-height: 1.2;
  margin-left: 130px;
  font-family: "Avenir", sans-serif;
  font-weight: 300;
  max-width: 600px;
}

.vision-card {
  flex: 1;
  padding: 25px;
  background: #0b0b28;
  border-top: 4px solid transparent;
  transition: all 0.3s ease;
  cursor: pointer;
  min-height: 350px;
  border-top: 4px solid #fff;
}

.vision-card h4 {
  font-size: 2.3rem;
  margin-bottom: 10px;
  font-weight: bold;
  line-height: 1.2;
}

/* Pour aligner icône + titre */
.card-header {
  display: flex;
  align-items: center;
  gap: 20px; /* espace entre icône et texte */
  margin-bottom: 15px;
}

.card-header h4 {
  margin: 0; /* enlève marges par défaut */
  font-size: 1.2rem;
  font-weight: bold;
}

.card-header .card-icon {
  width: 50px;
  height: 50px;
  border: 2px solid currentColor;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  font-size: 1rem;
  line-height: 1; /* évite l’écrasement */
  flex-shrink: 0; /* empêche de se compresser */
  flex-grow: 0; /* empêche de s'étirer */
  box-sizing: border-box;
}

.vision-card p {
  font-size: 0.95rem;
  color: #bbb;
  line-height: 1.3;
}

/* Hover */
.vision-card:hover {
  transform: translateY(-5px);
}

/* Active (style spécial comme la première carte) */
.vision-card.active {
  background: white;
  color: black;
  border-top: 4px solid #f1c40f;
}

.vision-card.active p {
  color: #333;
}

.vision-slider {
  width: 100%;
  padding: 20px 0;
  position: relative;
}
.vision-slider .swiper-button-prev,
.vision-slider .swiper-button-next {
  color: #f1c40f !important;
  width: 22px !important; /* flèche plus petite */
  height: 22px !important; /* flèche plus petite */
  font-size: 12px !important; /* réduit l’icône */
}

.vision-slider .swiper-button-prev {
  left: 1px; /* pousse complètement à gauche */
}
.vision-slider .swiper-button-next {
  right: 1px; /* pousse complètement à droite */
}

.section-vision .swiper-slide {
  display: flex;
  justify-content: center;
}

.vision-slider .swiper-slide {
  margin-right: 0 !important; /* supprime totalement celui de Swiper */
}

.vision-card {
  width: 100%;
  max-width: 350px; /* garde une taille raisonnable */
  gap: 5px;
}

.section-vision .swiper-slide {
  margin-right: 2px !important; /* 🔥 espace réduit */
}
.vision-slider .swiper-button-prev,
.vision-slider .swiper-button-next {
  width: 20px !important; /* réduit le cercle */
  height: 20px !important;
}

.vision-slider .swiper-button-prev::after,
.vision-slider .swiper-button-next::after {
  font-size: 14px !important; /* réduit l’icône flèche */
}

/* ---------------- RESPONSIVE ---------------- */

/* Tablette */
@media (max-width: 992px) {
  .section-vision {
    padding: 40px 40px;
  }

  .vision-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 45px;
    padding: 0 20px;
  }

  .section-vision .title-right h3,
  .section-vision .title-right p {
    margin-left: 0;
    max-width: 100%;
  }

  .section-vision .title-right h3 {
    font-size: 2rem;
  }

  .section-vision .title-right p {
    font-size: 1rem;
  }

  .vision-card {
    max-width: 100%; /* carte prend toute la largeur dispo */
    min-height: auto;
    padding: 0 20px;
  }

  .vision-card h4 {
    font-size: 1.5rem;
  }

  .vision-card p {
    font-size: 0.9rem;
  }

  .vision-slider .swiper-button-prev,
  .vision-slider .swiper-button-next {
    width: 18px !important;
    height: 18px !important;
  }

  .vision-slider .swiper-button-prev::after,
  .vision-slider .swiper-button-next::after {
    font-size: 12px !important;
  }
}

/* Mobile */
@media (max-width: 576px) {
  .section-vision {
    padding: 30px 20px;
  }

  .title-left h2 {
    font-size: 1.2rem;
  }

  .section-vision .title-right h3 {
    font-size: 1.5rem;
    text-align: left;
  }

  .section-vision .title-right p {
    font-size: 0.9rem;
  }

  .vision-card {
    padding: 15px;
    max-width: 100%;
  }

  .card-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }

  .card-header h4 {
    font-size: 1rem;
  }

  .card-header .card-icon {
    width: 40px;
    height: 40px;
    font-size: 0.9rem;
  }

  .vision-card p {
    font-size: 0.85rem;
  }

  /* Pagination rapprochée */
  .swiper-pagination {
    bottom: -15px !important;
  }
}

/* ========== RESPONSIVE VISION ========== */

@media screen and (max-width: 1200px) {
  .section-vision {
    padding: 50px 40px;
  }

  .section-vision .title-right h3 {
    margin-left: 80px;
    font-size: 2.4rem;
  }

  .section-vision .title-right p {
    margin-left: 80px;
    font-size: 1.1rem;
  }

  .vision-card {
    min-height: 320px;
    max-width: 320px;
  }

  .vision-card h4 {
    font-size: 2rem;
  }
}

@media screen and (max-width: 992px) {
  .section-vision {
    padding: 40px 30px;
  }

  .vision-header {
    flex-direction: column;
    gap: 20px;
    text-align: center;
    margin-bottom: 40px;
  }

  .title-left {
    justify-content: center;
  }

  .section-vision .title-right h3 {
    margin-left: 0;
    font-size: 2rem;
  }

  .section-vision .title-right p {
    margin-left: 0;
    font-size: 1rem;
    max-width: 100%;
  }

  .vision-card {
    min-height: 300px;
    max-width: 300px;
    padding: 20px;
  }

  .vision-card h4 {
    font-size: 1.8rem;
  }

  .card-header {
    gap: 15px;
  }

  .card-header .card-icon {
    width: 45px;
    height: 45px;
    font-size: 0.9rem;
  }
}

@media screen and (max-width: 768px) {
  .section-vision {
    padding: 30px 20px;
  }

  .section-vision .title-left h2 {
    font-size: 1.8rem;
  }

  .section-vision .title-right h3 {
    font-size: 1.8rem;
  }

  .vision-card {
    min-height: 280px;
    max-width: 280px;
    padding: 18px;
    padding-bottom: 80px;
    margin-bottom: 200px;
  }

  .vision-card h4 {
    font-size: 1.6rem;
  }

  .vision-card p {
    font-size: 0.9rem;
    line-height: 1.4;
  }

  .card-header {
    flex-direction: column;
    text-align: center;
    gap: 10px;
  }

  .card-header .card-icon {
    width: 40px;
    height: 40px;
    font-size: 0.8rem;
  }

  /* Navigation Swiper */
  .vision-slider .swiper-button-next,
  .vision-slider .swiper-button-prev {
    display: none;
  }

  .vision-slider .swiper-pagination {
    bottom: 5px;
  }
}

@media screen and (max-width: 576px) {
  .section-vision {
    padding: 25px 15px;
    max-width: 1200px;
  }

  .section-vision .title-left h2 {
    font-size: 1.5rem;
  }

  .section-vision .title-right h3 {
    font-size: 1.5rem;
  }

  .section-vision .title-right p {
    font-size: 0.9rem;
  }

  .vision-card {
    min-height: 250px;
    max-width: 100%;
    padding: 15px;
    margin: 0 auto;
  }

  .vision-card h4 {
    font-size: 1.4rem;
  }

  .vision-card p {
    font-size: 0.85rem;
    line-height: 1.4;
  }

  .card-header {
    gap: 8px;
  }

  .card-header .card-icon {
    width: 35px;
    height: 35px;
    font-size: 0.75rem;
  }

  .vision-slider {
    padding: 15px 0;
  }
}

@media screen and (max-width: 480px) {
  .section-vision {
    padding: 20px 10px;
  }

  .vision-header {
    margin-bottom: 30px;
  }

  .section-vision .title-right h3 {
    font-size: 1.3rem;
  }

  .vision-card {
    min-height: 220px;
    padding: 12px;
  }

  .vision-card h4 {
    font-size: 1.2rem;
  }

  .vision-card p {
    font-size: 0.8rem;
  }

  .card-header .card-icon {
    width: 30px;
    height: 30px;
    font-size: 0.7rem;
  }

  /* Ajustement de la pagination pour petits écrans */
  .section-vision .swiper-pagination {
    position: relative !important; /* ✅ pour sortir du overflow */
    margin-top: -20px; /* espace avec les cartes */
    text-align: center;
    z-index: 20;
  }

  .section-vision .swiper-pagination-bullet {
    background: #ffffff;
    opacity: 1;
    width: 12px;
    height: 12px;
    margin: 0 6px;
  }

  .section-vision .swiper-pagination-bullet-active {
    background: #ffd40c;
    transform: scale(1.2); /* effet visuel */
  }
}

/* Pour les très petits écrans */
@media screen and (max-width: 380px) {
  .section-vision .title-left h2 {
    font-size: 1.3rem;
  }

  .section-vision .title-right h3 {
    font-size: 1.2rem;
  }

  .vision-card {
    min-height: 200px;
    padding: 10px;
  }

  .vision-card h4 {
    font-size: 1.1rem;
  }

  .vision-card p {
    font-size: 0.75rem;
  }
}

/* Ajustement pour le mode paysage sur mobile */
@media screen and (max-height: 500px) and (orientation: landscape) {
  .section-vision {
    padding: 20px 15px;
  }

  .vision-card {
    min-height: 200px;
    padding: 15px;
  }

  .vision-card h4 {
    font-size: 1.2rem;
  }

  .vision-card p {
    font-size: 0.8rem;
  }
}

/* Amélioration de l'affichage tactile */
@media (hover: none) and (pointer: coarse) {
  .vision-card {
    padding: 20px;
    min-height: 250px;
  }

  .vision-card h4 {
    font-size: 1.3rem;
  }

  .vision-card p {
    font-size: 0.9rem;
  }

  .vision-slider .swiper-pagination-bullet {
    width: 10px;
    height: 10px;
    margin: 0 6px;
  }
}

/* Correction pour les écrans très larges mais peu hauts */
@media screen and (max-height: 600px) {
  .vision-card {
    min-height: 220px;
    padding: 15px;
  }

  .vision-card h4 {
    font-size: 1.3rem;
  }

  .vision-card p {
    font-size: 0.85rem;
  }
}

/* Sur petit écran : toutes les cartes sont affichées comme actives */
@media screen and (max-width: 768px) {
  .vision-card {
    background: #fff !important;
    color: #000 !important;
    border-top: 4px solid #f1c40f !important;
  }

  .vision-card p {
    color: #333 !important;
  }
}