/* =========================
   BASE, RESET & ANTI-BUG
========================= */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: Arial, sans-serif;
  -webkit-tap-highlight-color: transparent;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 90px; 
  -webkit-font-smoothing: antialiased;
}

body {
  background: #f5f5f5;
  color: #222;
  line-height: 1.8;
  overflow-x: hidden; 
  overscroll-behavior-y: none;
}

.swiper {
  width: 100%;
  padding-top: 30px;
  padding-bottom: 80px;
  touch-action: auto; /* Permet le défilement tactile */
}

/* =========================
   NAVBAR PRO & LUXURY
========================= */
.navbar {
  position: fixed;
  top: 0; left: 0; width: 100%;
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(15px);
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 50px;
  z-index: 9998;
  box-shadow: 0 4px 20px rgba(0,0,0,0.05);
  transition: all 0.3s ease;
}

.nav-brand {
  font-weight: 800;
  font-size: 24px;
  background: linear-gradient(135deg, #f59e0b, #b45309);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  z-index: 100;
}

.nav-links {
  display: flex;
  gap: 35px;
  list-style: none;
}

.nav-links a {
  text-decoration: none;
  color: #333;
  font-weight: 600;
  font-size: 15px;
  text-transform: uppercase;
  letter-spacing: 1px;
  transition: 0.3s ease;
  position: relative;
}

.nav-links a::after {
  content: ""; position: absolute;
  bottom: -6px; left: 0;
  width: 0%; height: 2px;
  background: #f59e0b;
  transition: 0.3s ease;
}

.nav-links a:hover { color: #f59e0b; }
.nav-links a:hover::after { width: 100%; }

.nav-cta {
  background: linear-gradient(135deg, #f59e0b, #b45309);
  color: white;
  padding: 10px 24px;
  border-radius: 50px;
  text-decoration: none;
  font-weight: bold;
  font-size: 14px;
  transition: 0.3s ease;
  box-shadow: 0 5px 15px rgba(180, 83, 9, 0.3);
}

.nav-cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(180, 83, 9, 0.4);
}

.hamburger {
  display: none;
  font-size: 26px;
  color: #b45309;
  cursor: pointer;
  z-index: 100;
  transition: 0.3s;
}

/* =========================
   HERO
========================= */
.hero {
  padding: 120px 20px 60px 20px; 
  background: linear-gradient(135deg, #f59e0b, #b45309, #fbbf24);
  background-size: 200% 200%;
  animation: gradientMove 6s ease infinite;
  color: white;
}

.hero-content {
  max-width: 1100px;
  margin: auto;
  display: flex;
  align-items: center;
  gap: 25px;
}

.logo {
  width: 95px;
  height: 95px;
  border-radius: 50%;
  object-fit: cover;
  border: 4px solid white;
}

.hero h1 { font-size: 42px; margin-bottom: 15px; }
.hero p { font-size: 18px; }

/* =========================
   PRODUCTS
========================= */
.products {
  max-width: 1100px;
  margin: 50px auto;
  padding: 20px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 35px;
}

.card {
  background: white;
  border-radius: 25px;
  overflow: hidden;
  position: relative;
  box-shadow: 0 10px 30px rgba(0,0,0,0.1);
  transition: 0.4s;
}

.card:hover {
  transform: translateY(-10px);
  box-shadow: 0 20px 40px rgba(0,0,0,0.18);
} 
.card img { 
  width: 100%; 
  height: auto; 
  display: block; 
}

.badge {
  position: absolute;
  top: 15px; left: 15px;
  background: #f59e0b;
  color: white;
  padding: 8px 15px;
  border-radius: 10px;
  font-weight: bold;
  animation: badgeBlink 2.8s infinite ease-in-out;
}
.badge.new { background: #ef6c08; }

.card-content { padding: 28px; }
.card-content h2 { color: #b45309; margin-bottom: 18px; }
.card-content p { margin-bottom: 22px; color: #555; }

.price-box {
  display: flex; justify-content: space-between;
  align-items: center; margin-bottom: 20px;
}
.new-price { color: #d97706; font-size: 35px; font-weight: bold; }
.old-price { text-decoration: line-through; color: #888; }
.discount { color: red; font-weight: bold; }
.timer { margin-bottom: 18px; color: #dc2626; font-weight: bold; }
.secure { margin-bottom: 22px; }

/* =========================
   PORTFOLIO PREMIUM : EFFET GLASSMORPHISM IMMERSIF (CORRIGÉ)
========================= */
.portfolio {
  max-width: 100vw; 
  margin: 90px 0;
  padding: 60px 0;
  text-align: center;
  position: relative;
  background-color: #f8f9fa; /* Fond principal de la section */
  overflow: hidden; /* Empêche les éléments de Swiper de déborder sur mobile */
}

/* On force le titre et la description à rester sur le fond blanc principal (z-index 2) */
.portfolio h2 {
  color: #b45309;
  margin-bottom: 10px;
  font-size: 36px;
  text-transform: uppercase;
  letter-spacing: 2px;
  position: relative;
  z-index: 2; /* Au-dessus de tout */
}

.portfolio-desc {
  color: #222; 
  margin-bottom: 40px; /* Espace avant le début du bloc coloré */
  font-size: 18px;
  padding: 0 20px; /* Marge pour mobile */
  position: relative;
  z-index: 2; /* Au-dessus de tout */
}

/* 1. LE GRAND CONTENEUR GLOBAL */
.portfolio-dynamic-wrapper {
  position: relative;
  width: 90%;          
  max-width: 1200px;   
  margin: 0 auto;       
  /* MODIFICATION ICI : On garde l'espace en haut, mais on réduit presque à zéro l'espace en bas */
  padding-top: 50px;     
  padding-bottom: 10px;  
  border-radius: 30px; 
  overflow: hidden;    
  box-shadow: 0 10px 40px rgba(0,0,0,0.1); 
  border: 1px solid rgba(255, 255, 255, 0.2); 
}


/* 2. LE CONTENEUR DYNAMIQUE DU FLOU (inside the wrapper)
   Il est positionné en absolu DERRIÈRE le carrousel Swiper.
*/
.portfolio-dynamic-bg {
  position: absolute;
  inset: 0; /* Prend toute la place de son parent (.portfolio-dynamic-wrapper) */
  z-index: 0; /* Derrière le carrousel Swiper */
  background-size: cover;
  background-position: center;
  filter: blur(40px) brightness(0.85); /* Flou gaussien premium et luminosité douce */
  transform: scale(1.1); /* Slight zoom pour masquer les bords causés par le flou */
  transition: background-image 0.8s ease-in-out;
  pointer-events: none; /* Ne capte pas les clics, Swiper les gère */
}
/* 3. AJUSTEMENT DE SWIPER */
.portfolioSwiper {
  position: relative;
  z-index: 1; 
  /* MODIFICATION ICI : On réduit l'espace réservé aux petits points pour remonter le fond */
  padding-bottom: 50px !important; 
}

/* Indicateurs de page (petits points) */
.swiper-pagination {
  bottom: 15px !important; /* Remonte légèrement les points pour qu'ils soient bien centrés dans le nouvel espace */
}

/* Design des cartes images */
.swiper-slide {
  background-position: center;
  background-size: cover;
  width: 300px;  /* Largeur de carte par défaut */
  height: 380px; /* Hauteur de carte par défaut */
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.25);
  cursor: grab;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.swiper-slide-active { 
  box-shadow: 0 25px 50px rgba(0, 0, 0, 0.4); 
}

.swiper-slide:active { cursor: grabbing; }
.swiper-slide img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* Indicateurs de page (petits points) pour qu'ils soient lisibles sur le nouveau fond */
.swiper-pagination-bullet { background: #fff; opacity: 0.5; transition: 0.3s; }
.swiper-pagination-bullet-active { background: #b45309; opacity: 1; width: 25px; border-radius: 5px; }

/* =========================
   RESPONSIVE MOBILE
   =========================
*/
@media (max-width: 768px) {
  .portfolio { margin: 50px 0; padding: 40px 0; }
  .portfolio h2 { font-size: 28px; }
  .portfolio-desc { font-size: 16px; margin-bottom: 30px; }

  /* Le bloc flouté s'adapte sur mobile */
  .portfolio-dynamic-wrapper {
    width: 95%; /* Prend plus de largeur pour optimiser l'espace */
    padding: 30px 0; /* Moins d'espace interne */
    border-radius: 15px; /* Coins un peu moins ronds sur petit écran */
  }

  /* Cartes images plus petites sur mobile pour ne pas être trop envahissantes */
  .swiper-slide { 
    width: 240px; 
    height: 310px; 
  }
}
/* =========================
   SECTION AVIS CLIENTS (SWIPER TACTILE)
========================= */
.reviews { 
  max-width: 100vw; 
  margin: 10px 0 0px 0; 
  padding: 20px 0; 
  text-align: center; 
  overflow: hidden; /* Empêche de casser la largeur de la page */
}

.reviews h2 { 
  color: #b45309; 
  margin-bottom: 10px; 
  font-size: 36px;
  text-transform: uppercase; 
  letter-spacing: 2px; 
}

.reviews > p {
  color: #555;
  margin-bottom: 40px;
  font-size: 18px;
}

/* Le conteneur du carrousel */
.reviewsSwiper {
  width: 100%;
  padding: 20px 0;
  /* overflow: visible permet de voir les cartes coupées sur les bords */
  overflow: visible; 
}

/* ASTUCE PRO : Rend le défilement automatique fluide et linéaire (pas d'à-coups) */
.reviewsSwiper .swiper-wrapper {
  transition-timing-function: linear !important;
}

/* Design de la carte (Qui devient officiellement un slide Swiper) */
.review-card {
  background: white; 
  padding: 30px; 
  border-radius: 22px;
  width: 380px; /* Taille fixe de la carte */
  height: auto;
  box-shadow: 0 10px 25px rgba(0,0,0,0.08);
  position: relative; 
  overflow: hidden;
  text-align: left;
  cursor: grab; /* Affiche la main pour inviter au glissement */
  /* Reset Swiper */
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
}

.review-card:active {
  cursor: grabbing;
}

/* L'effet de brillance au survol */
.review-card::before {
  content: ""; position: absolute; top: 0; left: -100%;
  width: 60%; height: 100%; background: rgba(255,255,255,0.25); transform: skewX(-25deg);
}
.review-card:hover { transform: translateY(-8px); }
.review-card:hover::before { animation: shineMove 0.8s ease; }

/* En-tête de la carte (Avatar + Nom) */
.review-header {
  display: flex;
  align-items: center;
  gap: 15px;
  margin-bottom: 18px;
}

.avatar {
  width: 55px; height: 55px;
  border-radius: 50%; color: white;
  display: flex; justify-content: center; align-items: center;
  font-weight: bold; font-size: 22px;
}

.review-card h4 { color: #111; margin: 0; font-size: 18px; }
.stars { color: #f59e0b; font-size: 14px; margin-top: 5px; }
.review-card p { color: #555; font-style: italic; line-height: 1.6; margin: 0; }

@media (max-width: 768px) {
  .review-card { width: 320px; } /* Cartes un peu plus petites sur mobile */
}
/* =========================
   EXPERTISE / REASSURANCE
========================= */
.expertise {
  max-width: 1100px;
  margin: 30px auto;
  padding: 20px;
  text-align: center;
}

.expertise h2 {
  color: #b45309;
  margin-bottom: 20px;
  font-size: 32px;
}

.expertise-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 35px;
}

.expertise-card {
  background: white;
  padding: 40px 25px;
  border-radius: 20px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.05);
  transition: all 0.4s ease;
  border-bottom: 4px solid transparent;
  position: relative;
  overflow: hidden;
}

.expertise-card:hover {
  transform: translateY(-10px);
  border-bottom: 4px solid #f59e0b;
  box-shadow: 0 20px 40px rgba(180, 83, 9, 0.15);
}

.expertise-card i {
  font-size: 45px;
  background: linear-gradient(135deg, #f59e0b, #b45309);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  margin-bottom: 20px;
  animation: logoFloat 3s infinite ease-in-out;
}

.expertise-card h3 { color: #333; margin-bottom: 15px; font-size: 22px; }
.expertise-card p { color: #555; line-height: 1.6; }

/* =========================
   WHATSAPP BOX & FAQ
========================= */
.whatsapp-box {
  width: 92%; max-width: 1100px;
  margin: 50px auto;
  background: linear-gradient(135deg, #16a34a, #22c55e);
  color: white; text-align: center;
  padding: 50px 25px; border-radius: 25px;
}
.whatsapp-box h2 { margin-bottom: 18px; font-size: 34px; }
.whatsapp-box p { margin-bottom: 30px; font-size: 18px; }

.faq-section { 
  max-width: 900px; 
  margin: 70px auto 10px auto; 
  padding: 20px; 
}
.faq-section h2 { 
  text-align: center; 
  color: #b45309; 
  margin-bottom: 45px; 
  font-size: 32px;
}
.faq-box details {
  background: white; 
  padding: 22px 30px; 
  border-radius: 20px;
  margin-bottom: 20px; 
  box-shadow: 0 8px 25px rgba(0,0,0,0.04);
  border: 1px solid rgba(245, 158, 11, 0.15);
  position: relative;
  overflow: hidden;
  transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}
.faq-box details:hover { 
  transform: translateY(-5px); 
  box-shadow: 0 15px 35px rgba(245, 158, 11, 0.15); 
  border-color: rgba(245, 158, 11, 0.5);
}
.faq-box details::before {
  content: ""; position: absolute; top: 0; left: 0;
  width: 4px; height: 100%;
  background: linear-gradient(180deg, #f59e0b, #fbbf24);
  transform: scaleY(0); transition: transform 0.4s ease; transform-origin: top;
}
.faq-box details[open]::before, .faq-box details:hover::before { transform: scaleY(1); }
.faq-box summary { 
  font-weight: bold; font-size: 18px; cursor: pointer; color: #333; 
  display: flex; justify-content: space-between; align-items: center;
  transition: 0.3s ease; list-style: none; 
}
.faq-box summary::-webkit-details-marker { display: none; }
.faq-box details[open] summary { color: #b45309; margin-bottom: 15px; }
.faq-box summary::after {
  content: "➔"; font-size: 16px; color: white;
  background: linear-gradient(135deg, #f59e0b, #b45309);
  width: 38px; height: 38px; display: flex; justify-content: center; align-items: center;
  border-radius: 50%; box-shadow: 0 5px 15px rgba(180, 83, 9, 0.3);
  transition: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55); 
}
.faq-box details[open] summary::after {
  transform: rotate(90deg); background: #222; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}
.faq-box p { 
  color: #555; line-height: 1.8; padding-right: 40px; margin: 0;
  animation: revealText 0.5s ease forwards;
}

/* =========================
   SOCIALS & BOUTONS LUXURY
========================= */
.socials { display: flex; justify-content: center; gap: 18px; margin-top: 25px; padding-bottom: 40px; }
.socials a {
  width: 52px; height: 52px; display: flex; justify-content: center; align-items: center;
  background: white; border-radius: 50%; box-shadow: 0 10px 25px rgba(0,0,0,0.15);
  transition: 0.3s ease; animation: logoFloat 3s infinite ease-in-out;
  text-decoration: none !important; outline: none !important;
}
.socials a:nth-child(2) { animation-delay: 0.3s; }
.socials a:nth-child(3) { animation-delay: 0.6s; }
.socials a:hover { transform: translateY(-5px) scale(1.1) rotate(8deg); box-shadow: 0 15px 35px rgba(0,0,0,0.25); }
.socials a i { transition: 0.3s ease; font-size: 22px; }
.socials a:hover i { transform: scale(1.2); filter: brightness(1.2); }

.fa-tiktok { color: #000000; }
.fa-whatsapp { color: #25D366; }
.fa-pinterest { color: #E60023; }

.buy-btn, .popup-btn, .whatsapp-group-btn {
  display: flex; justify-content: center; align-items: center; gap: 10px;
  padding: 16px; border-radius: 14px; text-decoration: none; font-weight: bold;
  letter-spacing: 0.5px; position: relative; overflow: hidden; transition: all 0.4s ease;
  transform: translateZ(0);
}

.buy-btn, .popup-btn {
  width: 100%; color: white; background: linear-gradient(135deg, #f59e0b, #b45309, #fbbf24);
  background-size: 200% 200%; animation: gradientMove 5s ease infinite, glowPulse 2s infinite;
  box-shadow: 0 10px 25px rgba(181,83,9,0.35);
}

.whatsapp-group-btn {
  display: inline-flex; background: white; color: #16a34a; padding: 18px 35px;
  border-radius: 50px; font-size: 18px; animation: whatsappPulse 2s infinite;
}

.buy-btn::before, .popup-btn::before, .whatsapp-group-btn::before {
  content: ""; position: absolute; top: 0; left: -80%; width: 50%; height: 100%;
  background: rgba(255,255,255,0.35); transform: skewX(-25deg);
}

.buy-btn:hover, .popup-btn:hover, .whatsapp-group-btn:hover {
  transform: translateY(-6px) scale(1.05); box-shadow: 0 18px 40px rgba(0,0,0,0.25);
}
.buy-btn:hover::before, .popup-btn:hover::before, .whatsapp-group-btn:hover::before { animation: shineMove 0.8s ease; }
.buy-btn:active, .popup-btn:active, .whatsapp-group-btn:active { transform: scale(0.96); }

/* =========================
   FOOTER & FLOATING BTN
========================= */
footer {
  background: linear-gradient(135deg, #f59e0b, #b45309, #fbbf24);
  background-size: 200% 200%; animation: gradientMove 6s ease infinite;
  color: white; text-align: center; padding: 50px 20px;
  position: relative; z-index: 1;
}
footer h2 { margin-bottom: 15px; }
footer p { margin-bottom: 12px; }
.email a { color: white; text-decoration: none; font-weight: bold; font-size: 18px; transition: 0.3s ease; }
.email a:hover { opacity: 0.8; text-decoration: underline; }

.floating-btn {
  position: fixed; bottom: 25px; right: 25px; width: 60px; height: 60px;
  background: #25D366; color: white; border-radius: 50%;
  display: flex; justify-content: center; align-items: center; font-size: 30px;
  box-shadow: 0 10px 25px rgba(0,0,0,0.25); z-index: 9999; animation: pulseWA 2s infinite;
  text-decoration: none; transition: 0.3s;
}
.floating-btn .fa-whatsapp { color: white !important; }
.floating-btn:hover { transform: scale(1.1); }

.scroll-btn {
  position: fixed; bottom: 100px; right: 25px; width: 55px; height: 55px;
  border-radius: 50%; background: #b45309; color: white;
  display: flex; justify-content: center; align-items: center; font-size: 22px;
  cursor: pointer; box-shadow: 0 10px 25px rgba(0,0,0,0.2); z-index: 9999;
  animation: pulseScroll 2s infinite; transition: 0.3s;
}
.scroll-btn:hover { transform: scale(1.1); }

/* =========================
   POPUP OFFRE LIMITÉE & INSTALLATION
========================= */
.popup-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,0.6); backdrop-filter: blur(6px);
  display: none; justify-content: center; align-items: center; z-index: 9999;
}
.popup-box {
  width: 90%; max-width: 350px; background: white; border-radius: 28px;
  padding: 25px; text-align: center; position: relative; animation: popupIn 0.5s ease;
}
.popup-image { 
  width: 100%; height: auto; border-radius: 22px; margin-bottom: 20px; object-fit: cover;
}
.popup-box h2 { margin-bottom: 18px; color: #b45309; }
.popup-box p { margin-bottom: 28px; color: #555; }
.close-popup {
  position: absolute; top: 14px; right: 14px; width: 38px; height: 38px;
  display: flex; justify-content: center; align-items: center; border-radius: 50%;
  background: rgba(255,255,255,0.85); backdrop-filter: blur(8px); color: #111;
  font-size: 24px; font-weight: bold; cursor: pointer; box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  transition: 0.3s ease; z-index: 9999;
}
.close-popup:hover { transform: scale(1.08) rotate(90deg); background: white; }
.popup-btn { margin-top: 25px; }

/* POPUP INSTALLATION MOBILE */
.install-popup {
  position: fixed; bottom: -150%; left: 0; width: 100%;
  background: white; box-shadow: 0 -10px 25px rgba(0,0,0,0.15);
  border-radius: 25px 25px 0 0; z-index: 10000;
  transition: bottom 0.6s cubic-bezier(0.25, 1, 0.5, 1);
  padding: 20px 20px 30px 20px; display: flex; justify-content: center;
}
.install-popup.show { bottom: 0; }
.install-content { display: flex; align-items: center; gap: 15px; max-width: 500px; width: 100%; position: relative; }
.install-icon { width: 55px; height: 55px; border-radius: 14px; object-fit: cover;}
.install-text h3 { font-size: 17px; margin-bottom: 4px; color: #b45309; }
.install-text p { font-size: 13px; color: #555; margin: 0; line-height: 1.4; }
.install-btn {
  background: linear-gradient(135deg, #f59e0b, #b45309); color: white; border: none; padding: 12px 18px;
  border-radius: 12px; font-weight: bold; cursor: pointer; margin-left: auto; box-shadow: 0 4px 10px rgba(180, 83, 9, 0.3);
}
.close-install { position: absolute; top: -15px; right: 0; font-size: 24px; cursor: pointer; color: #888; }

/* =========================
   LIGHTBOX (PLEIN ÉCRAN)
========================= */
.lightbox {
  display: none; position: fixed; inset: 0; background: rgba(0, 0, 0, 0.95);
  backdrop-filter: blur(8px); justify-content: center; align-items: center;
  z-index: 10000; opacity: 0; transition: opacity 0.3s ease;
}
.lightbox.show { display: flex; opacity: 1; }
.lightbox img {
  max-width: 90%; max-height: 90vh; border-radius: 12px;
  box-shadow: 0 10px 50px rgba(0,0,0,0.5); animation: lightboxZoom 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}
.close-lightbox {
  position: absolute; top: 20px; right: 35px; color: white; font-size: 50px;
  cursor: pointer; transition: 0.3s; line-height: 1;
}
.close-lightbox:hover { color: #f59e0b; transform: rotate(90deg); }

/* =========================
   ANIMATIONS GLOBALES
========================= */
.fade-in { opacity: 0; transform: translateY(40px); transition: all 0.8s ease; }
.fade-in.show { opacity: 1; transform: translateY(0); }
@keyframes revealText { 0% { opacity: 0; transform: translateY(-10px); } 100% { opacity: 1; transform: translateY(0); } }
@keyframes popupIn { from { opacity: 0; transform: scale(0.7); } to { opacity: 1; transform: scale(1); } }
@keyframes gradientMove { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } }
@keyframes glowPulse { 0% { box-shadow: 0 0 0 rgba(255,193,7,0.4); } 50% { box-shadow: 0 0 20px rgba(255,193,7,0.8); } 100% { box-shadow: 0 0 0 rgba(255,193,7,0.4); } }
@keyframes whatsappPulse { 0% { transform: scale(1); } 50% { transform: scale(1.05); } 100% { transform: scale(1); } }
@keyframes shineMove { 100% { left: 130%; } }
@keyframes pulseWA { 0% { box-shadow: 0 0 0 0 rgba(37,211,102,0.5); } 70% { box-shadow: 0 0 0 18px rgba(37,211,102,0); } 100% { box-shadow: 0 0 0 0 rgba(37,211,102,0); } }
@keyframes pulseScroll { 0% { box-shadow: 0 0 0 0 rgba(180,83,9,0.5); } 70% { box-shadow: 0 0 0 15px rgba(180,83,9,0); } 100% { box-shadow: 0 0 0 0 rgba(180,83,9,0); } }
@keyframes badgeBlink { 0%, 100% { filter: brightness(1); transform: scale(1); } 50% { filter: brightness(1.4); transform: scale(1.05); } }
@keyframes logoFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@keyframes lightboxZoom { from { transform: scale(0.8); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@keyframes luxuryGlow { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.03); } }

/* =========================
   MENU MOBILE PRO & GLISSANT
========================= */
@media(max-width: 768px) {
  .navbar { padding: 15px 20px; }
  .nav-cta { display: none; }
  .hamburger { display: block; }
  
  .nav-links {
    position: fixed !important; top: 0; right: -100%; width: 80% !important; 
    height: 100vh; background: white !important; flex-direction: column !important; 
    justify-content: flex-start !important; padding-top: 100px !important; 
    transition: right 0.4s cubic-bezier(0.77, 0.2, 0.05, 1.0) !important;
    z-index: 9998; box-shadow: -10px 0 30px rgba(0,0,0,0.1);
  }

  .nav-links.active { right: 0 !important; }

  .nav-links li { width: 100%; border-bottom: 1px solid rgba(0, 0, 0, 0.05); }
  .nav-links li:last-child { border-bottom: none; }

  .nav-links a { 
    font-size: 18px !important; color: #333 !important; padding: 20px 40px !important; 
    text-align: left !important; font-weight: 600;
  }
}
/* Le bloc flouté s'adapte sur mobile */
  .portfolio-dynamic-wrapper {
    width: 95%; 
    /* MODIFICATION ICI : Moins d'espace en haut, et presque pas d'espace en bas */
    padding-top: 30px; 
    padding-bottom: 10px; 
    border-radius: 15px; 
  }