@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

 * {
     margin: 0;
     padding: 0;
 }

 #portfolio {
     width: 100%;
     min-height: 100vh;
     background: linear-gradient(135deg, #571A73, #Be004B);
     padding: 60px 20px;
     font-family: 'Popins', sans-serif;
     margin-bottom: 20px;
 }
 .swiper {
     width: 70%;
     padding: 60px 0;
 }

 .swiper-wrapper {
     display: flex;
 }
/* Style de base des bullets */
.swiper-pagination-bullet {
  width: 12px !important;
  height: 12px !important;
  background-color:  #ff9d00 !important;
  opacity: 1 !important;
  margin: 0 5px !important;
  border-radius: 50% !important;
  transition: all 0.3s ease !important;
}


/* Bullet actif : slide courant */
.swiper-pagination-bullet-active {
  background: #eee;
  transform: scale(2.2);
  box-shadow: 0 0 8px rgba(190, 0, 75, 0.4);
  border: 2px solid #000;
  
}

 .swiper-slide {
     background-position: center;
     background-size: contain;
     background-repeat: no-repeat;
     width: 100%;
     height: 200px;
     border-radius: 20px;
     display: flex;
     justify-content: flex-start;
     padding: 70px;
     position: relative;
    box-shadow: none;
 }

 .swiper-slide::before {
     content: '';
     position: absolute;
     inset: 0;
      /* background: linear-gradient(to top, rgba(0, 0, 0, 0.6), transparent); */
     border-radius: 20px;
 }

 .swiper-slide .slide-portfolio {
     position: relative;
      margin-bottom: 300px;
     z-index: 2;
 }
 .swiper-pagination-bullet{
     background-color: white;
 }
 .swiper-slide-active{
  transform: scale(1.1);
  z-index: 2;
 }
  .swiper-3d{
     padding-bottom: 60px !important;
 }

 @media screen and (max-width: 768px){
    .swiper-slide a {
        display: none;
    }
    .swiper-slide{
        padding: auto;
    }
     .swiper {
     width: 90%;
     padding: 60px 0;
    }
    
 }
 .portfolio-title{
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 2rem;
    font-weight: 600;
    color: white;
    padding: 10px 0;
 }

  .portfolio-description{
    text-align: center;
    font-size: 20px;
    color: #e9dddd;
    max-width: 600px;
    margin: 0 auto;
    padding: 9px 3px;
  }
 /* Images */
 .swiper-slide1 {
     background-image: url("images/mon-combat-image-community-manager-interaktive.jpg");
 }

 .swiper-slide2 {
     background-image: url("images/meilleur-eau-image-community-manager-interaktive.jpg");
 }
 .swiper-slide3 {
     background-image: url("images/recyclage-image-community-manager-interaktive.jpg");
 }
 .swiper-slide4 {
    background-image: url("images/cacao-image-community-manager.jpg");
 }
  .swiper-slide5 {
    background-image: url("images/colorant-image-community-manager-interaktive.jpg");
 }
  .swiper-slide6 {
     background-image: url("images/slogan-image-community-manager-interaktive.jpg");
 }
  .swiper-slide7 {
     background-image: url("images/huile-image-community-manager-interaktive.jpg");
 }
  .swiper-slide8 {
     background-image: url("images/yaourt-corps-image-community-manager-interaktive.jpg");
 }
  .swiper-slide9 {
     background-image: url("images/fete-des-mВres-image-community-manager-interaktive.jpg");
 }
  .swiper-slide10 {
     background-image: url("images/1er-mai-image-community-manager-interaktive.jpg");
 } 
 .swiper-slide11 {
    background-image: url("images/vidange-huile--image-community-manager-interaktive.jpg");
 }
  .swiper-slide12 {
     background-image: url("images/journée-set-setal-image-community-manager-interaktive.jpg");
 }
 
 
/* ===== SECTION & CONTAINER ===== */
#testimonials{padding:60px 0;background:#f9f9f9}
#testimonials .container{max-width:1100px;margin:0 auto;padding:0 24px}

/* ===== SWIPER (TÉMOIGNAGES) ===== */
.swiper-temoignages{margin-top:20px;padding-bottom:60px}
.swiper-temoignages .swiper-slide{display:flex;justify-content:center;padding:0 10px}

/* ===== CARTE TÉMOIGNAGE ===== */
.testimonial-card{
  background:linear-gradient(135deg,#f9fafb 0%,#fff 100%);
  border-radius:24px;
  padding:40px 32px;
  box-shadow:0 8px 30px rgba(0,0,0,.06);
  transition:transform .35s ease,box-shadow .35s ease;
  max-width:420px;width:100%
}
.testimonial-card:hover{transform:translateY(-8px) scale(1.02);box-shadow:0 20px 48px rgba(0,0,0,.1)}

.testimonial-stars{color:#fbbf24;font-size:18px;margin-bottom:20px}
.testimonial-text{font-size:clamp(16px,2vw,18px);line-height:1.65;color:#4b5563;margin-bottom:28px;font-style:italic}

.testimonial-author{display:flex;align-items:center;gap:16px}
.testimonial-author img{width:64px;height:64px;border-radius:50%;object-fit:cover}
.author-name{font-weight:600;color:#1f2937}
.author-role{font-size:14px;color:#6b7280}

/* ===== PAGINATION ===== */
.swiper-pagination-temoignages .swiper-pagination-bullet{
  width:14px;height:14px;background:#d1d5db;opacity:1;margin:0 6px;border-radius:50%;
  transition:transform .3s ease,background .3s ease
}
.swiper-pagination-temoignages .swiper-pagination-bullet-active{
  background:#2563eb;transform:scale(1.35)
}

/* ===== NAVIGATION ARROWS ===== */
.swiper-button-prev-temoignages,
.swiper-button-next-temoignages{color:#2563eb;width:46px;height:46px}
.swiper-button-prev-temoignages::after,
.swiper-button-next-temoignages::after{font-size:24px}

/* ===== RESPONSIVE ===== */
@media(max-width:768px){.testimonial-card{padding:32px 24px}}