/* FIX CANVAS GAP */
#particles {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
}.navbar {
  height: 70px;
}/* RESET */
*{
  margin:0;
  padding:0;
  box-sizing:border-box;
}

body{
  font-family:'Poppins',sans-serif;
  background: radial-gradient(circle at top, #1a0033, #000);
  color:white;
  overflow-x:hidden;
}
html, body{
  height:100%;
}

body{
  display:flex;
  flex-direction:column;
}
main{
  flex:1;
}

/* NAVBAR */
.navbar{
  position:fixed;
  top:0;
  width:100%;
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:15px 30px;
  backdrop-filter:blur(10px);
  background:rgba(0,0,30,0.6);
  z-index:1000;
}

.logo{
  font-family:'Playfair Display',serif;
  font-size:28px;
  color:#ff69b4;
  text-shadow:0 0 10px #ff1493;
}

.navbar ul{
  display:flex;
  gap:20px;
  list-style:none;
}

.navbar a{
  color:white;
  text-decoration:none;
  font-weight:600;
  position:relative;
  transition:0.4s;
}

/* LIGHT EFFECT */
.navbar a::before{
  content:'';
  position:absolute;
  width:0%;
  height:100%;
  left:0;
  top:0;
  background:linear-gradient(120deg,transparent,rgba(255,105,180,0.6),transparent);
  transition:0.4s;
}

.navbar a:hover::before{
  width:100%;
}

.navbar a:hover{
  color:#ff69b4;
  text-shadow:0 0 10px #ff1493;
}

/* LANG */
.lang-switch button{
  margin-left:5px;
  padding:5px 10px;
  border:none;
  border-radius:5px;
  background:#ff69b4;
  color:white;
  cursor:pointer;
}

/* HERO */
/* HERO SAFE FIX */
.hero {
  position: relative;
  width: 100%;
  min-height: 80vh; /* 🔥 pas 100vh (évite bug) */
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

/* IMAGE */
.hero-img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
}

/* OVERLAY */
.hero-overlay {
  position: absolute;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.4);
  z-index: 2;
}

/* TEXTE */
.hero-text {
  position: relative;
  z-index: 3;
  text-align: center;
  color: white;
  padding: 20px;
}

.romantic-title{
  font-size:60px;
  font-family:'Playfair Display',serif;
  color:#ffb6c1;
  text-shadow:0 0 20px #ff1493;
}

.typed-text{
  font-size:20px;
  margin-top:10px;
}

/* BUTTON */
.btn-primary{
  display:inline-block;
  margin-top:20px;
  padding:12px 25px;
  background:linear-gradient(45deg,#ff69b4,#ff1493);
  border-radius:50px;
  color:white;
  text-decoration:none;
  transition:0.3s;
  box-shadow:0 0 15px rgba(255,20,147,0.5);
}

.btn-primary:hover{
  transform:scale(1.1);
  box-shadow:0 0 30px rgba(255,20,147,1);
}

/* SECTIONS */
section{
  padding:100px 20px;
  text-align:center;
}

h2{
  font-size:32px;
  color:#ff69b4;
  margin-bottom:20px;
}

/* SERVICES */
.service-list{
  display:flex;
  gap:20px;
  justify-content:center;
  flex-wrap:wrap;
}

.service-item{
  background:rgba(255,105,180,0.1);
  padding:20px;
  border-radius:15px;
  width:250px;
  transition:0.3s;
}

.service-item:hover{
  transform:translateY(-10px);
  box-shadow:0 0 20px #ff1493;
}

/* TEAM */
.team-list{
  display:flex;
  gap:20px;
  flex-wrap:wrap;
  justify-content:center;
}

.team-member{
  width:200px;
}

.team-member img{
  width:150px;
  height:150px;
  border-radius:50%;
  object-fit:cover;
  border:3px solid #ff69b4;
  box-shadow:0 0 15px #ff1493;
}

.team-member h3{
  margin-top:10px;
  color:#ffb6c1;
}

/* FORM */
.appointment-form{
  max-width:500px;
  margin:auto;
  display:flex;
  flex-direction:column;
  gap:10px;
}

.appointment-form input,
.appointment-form select,
.appointment-form textarea{
  padding:10px;
  border-radius:8px;
  border:none;
}

.appointment-form button{
  background:#ff1493;
  color:white;
  padding:12px;
  border:none;
  border-radius:30px;
}

/* FOOTER */
footer{
  text-align:center;
  padding:20px;
}

/* SOCIAL */
.socials a{
  margin:0 10px;
  color:#ff69b4;
}

/* WHATSAPP */
.btn-floating{
  position:fixed;
  bottom:20px;
  right:20px;
  background:#25D366;
  padding:12px 18px;
  border-radius:50px;
  color:white;
  animation:pulse 1.5s infinite;
}

@keyframes pulse{
  0%{transform:scale(1);}
  50%{transform:scale(1.1);}
  100%{transform:scale(1);}
}

/* MOBILE */
@media(max-width:768px){
  .navbar ul{
    flex-direction:column;
  }

  .romantic-title{
    font-size:35px;
  }

  .service-list,
  .team-list{
    flex-direction:column;
    align-items:center;
  }
}
footer{
  text-align:center;
  padding:30px 20px;
  background:rgba(0,0,20,0.8);
  margin-top:50px;
}

.socials{
  margin-bottom:15px;
}

.socials a{
  margin:0 10px;
  color:#ff69b4;
  text-decoration:none;
  font-weight:600;
  transition:0.3s;
}

.socials a:hover{
  color:white;
  text-shadow:0 0 10px #ff1493;
}
html, body{
  height:100%;
}

body{
  display:flex;
  flex-direction:column;
}

main{
  flex:1;
}
.team-member img{
  transition:0.4s;
}

.team-member img:hover{
  transform:scale(1.2);
  box-shadow:0 0 20px #ff1493;
}
@media(max-width:768px){

.navbar{
  flex-direction:column;
  gap:10px;
}

.navbar ul{
  flex-direction:column;
  align-items:center;
}

.service-list,
.team-list{
  flex-direction:column;
  align-items:center;
}

}
.appointment-form{
  max-width:500px;
  margin:auto;
  display:flex;
  flex-direction:column;
  gap:12px;
}

.appointment-form input,
.appointment-form select,
.appointment-form textarea{
  padding:12px;
  border-radius:8px;
  border:none;
  outline:none;
}

.appointment-form button{
  background:#ff1493;
  color:white;
  padding:12px;
  border:none;
  border-radius:30px;
  cursor:pointer;
  transition:0.3s;
}

.appointment-form button:hover{
  transform:scale(1.05);
  background:#ff69b4;
}
.team-list{
  display:flex;
  gap:30px;
  flex-wrap:wrap;
  justify-content:center;
}

.team-member{
  background:rgba(255,105,180,0.08);
  padding:20px;
  border-radius:20px;
  width:220px;
  text-align:center;
  transition:0.4s;
  backdrop-filter:blur(10px);
}

.team-member:hover{
  transform:translateY(-10px) scale(1.03);
  box-shadow:0 0 25px #ff1493;
}

/* IMAGE STYLE */
.team-img{
  overflow:hidden;
  border-radius:50%;
  width:150px;
  height:150px;
  margin:auto;
}

.team-img img{
  width:100%;
  height:100%;
  object-fit:cover;
  transition:0.5s;
}

/* 🔥 HOVER ZOOM */
.team-member:hover img{
  transform:scale(1.2);
}

/* NAME */
.team-member h3{
  margin-top:15px;
  color:#ffb6c1;
}

/* TEXT */
.team-member p{
  font-size:14px;
  opacity:0.9;
}
.blog-container{
  display:flex;
  gap:20px;
  flex-wrap:wrap;
  justify-content:center;
  margin-top:30px;
}

.blog-card{
  background:rgba(255,105,180,0.08);
  padding:20px;
  border-radius:15px;
  width:250px;
  transition:0.4s;
  backdrop-filter:blur(10px);
}

.blog-card:hover{
  transform:translateY(-10px);
  box-shadow:0 0 20px #ff1493;
}

.blog-card h3{
  color:#ffb6c1;
  margin-bottom:10px;
}

.blog-card p{
  font-size:14px;
  opacity:0.9;
}
/* =========================
   ✨ FADE IN ANIMATION
========================= */

.fade-in{
  opacity:0;
  transform:translateY(30px);
  transition:all 0.8s ease-out;
}

.fade-in.show{
  opacity:1;
  transform:translateY(0);
}

/* =========================
   🌟 SMOOTH PAGE EFFECT
========================= */

html{
  scroll-behavior:smooth;
}

/* =========================
   💎 HOVER GLOBAL EFFECT
========================= */

.service-item,
.blog-card,
.team-member{
  transition:0.4s ease;
}

/* glow effect */
.service-item:hover,
.blog-card:hover,
.team-member:hover{
  transform:translateY(-10px) scale(1.03);
  box-shadow:0 0 25px rgba(255,20,147,0.6);
}

/* =========================
   ⚡ BUTTON ANIMATION
========================= */

button, .btn-primary{
  transition:0.3s ease;
}

button:hover, .btn-primary:hover{
  transform:scale(1.05);
}

/* =========================
   💖 FLOATING WHATSAPP PULSE
========================= */

.btn-floating{
  animation:pulse 1.5s infinite;
}

@keyframes pulse{
  0%{transform:scale(1);}
  50%{transform:scale(1.1);}
  100%{transform:scale(1);}
}
/* =========================
   🌟 GLOBAL SMOOTHNESS
========================= */

html{
  scroll-behavior:smooth;
}

/* =========================
   ✨ PAGE LOAD ANIMATION
========================= */

body{
  animation:pageLoad 0.8s ease-out;
}

@keyframes pageLoad{
  from{
    opacity:0;
    transform:scale(1.02);
  }
  to{
    opacity:1;
    transform:scale(1);
  }
}

/* =========================
   💎 HERO ANIMATION
========================= */

.hero-text{
  animation:heroFade 1.2s ease-out;
}

@keyframes heroFade{
  from{
    opacity:0;
    transform:translateY(40px);
  }
  to{
    opacity:1;
    transform:translateY(0);
  }
}

/* =========================
   🔥 FLOATING TITLE EFFECT
========================= */

.romantic-title{
  animation:floatTitle 3s ease-in-out infinite;
}

@keyframes floatTitle{
  0%{transform:translateY(0px);}
  50%{transform:translateY(-10px);}
  100%{transform:translateY(0px);}
}

/* =========================
   💖 GLASS CARD WOW
========================= */

.service-item,
.blog-card,
.team-member{
  backdrop-filter:blur(10px);
  transition:0.4s;
  transform:translateY(0);
}

.service-item:hover,
.blog-card:hover,
.team-member:hover{
  transform:translateY(-12px) scale(1.03);
  box-shadow:0 10px 30px rgba(255,20,147,0.4);
}

/* =========================
   ⚡ BUTTON WOW EFFECT
========================= */

.btn-primary,
button{
  position:relative;
  overflow:hidden;
}

.btn-primary::after,
button::after{
  content:"";
  position:absolute;
  width:0%;
  height:100%;
  top:0;
  left:0;
  background:rgba(255,255,255,0.2);
  transition:0.4s;
}

.btn-primary:hover::after,
button:hover::after{
  width:100%;
}

/* =========================
   🌈 NAV LINK EFFECT
========================= */

.navbar a{
  position:relative;
}

.navbar a::after{
  content:"";
  position:absolute;
  width:0%;
  height:2px;
  bottom:-3px;
  left:0;
  background:#ff69b4;
  transition:0.3s;
}

.navbar a:hover::after{
  width:100%;
}

/* =========================
   💫 FLOATING WHATSAPP
========================= */

.btn-floating{
  animation:pulse 1.5s infinite;
  box-shadow:0 0 15px #25D366;
}

@keyframes pulse{
  0%{transform:scale(1);}
  50%{transform:scale(1.1);}
  100%{transform:scale(1);}
}
.fade-in{
  opacity:0;
  transform:translateY(40px);
  transition:all 0.8s ease;
}

.fade-in.show{
  opacity:1;
  transform:translateY(0);
}
/* =========================
   🖼️ IMAGE HOVER ZOOM PREMIUM
========================= */

.team-member img,
.blog-card img{
  transition:transform 0.5s ease, box-shadow 0.5s ease;
  cursor:pointer;
}

.team-member img:hover,
.blog-card img:hover{
  transform:scale(1.1);
  box-shadow:0 10px 30px rgba(255,20,147,0.6);
}
/* =========================
   💎 GLASS EFFECT
========================= */

.navbar,
.service-item,
.blog-card,
.team-member{
  background:rgba(255,255,255,0.05);
  backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,0.1);
}
/* =========================
   ✨ ANIMATION PREMIUM
========================= */

.fade-in{
  opacity:0;
  transform:translateY(40px);
  transition:all 0.8s ease;
}

.fade-in.show{
  opacity:1;
  transform:translateY(0);
}
/* =========================
   🔥 TITRE ANIMATION
========================= */

.romantic-title{
  animation:glow 2s infinite alternate;
}

@keyframes glow{
  from{
    text-shadow:0 0 10px #ff1493;
  }
  to{
    text-shadow:0 0 25px #ff69b4, 0 0 40px #ff1493;
  }
}
.service-item,
.blog-card{
  transition:transform 0.4s ease, box-shadow 0.4s ease;
}

.service-item:hover,
.blog-card:hover{
  transform:translateY(-10px) scale(1.02);
  box-shadow:0 20px 40px rgba(255,20,147,0.4);
}
html{
  scroll-behavior:smooth;
}
.hero img{
  transform:scale(1.1);
  transition:transform 5s ease;
}

.hero:hover img{
  transform:scale(1.2);
}
/* =========================
   💎 PREMIUM UI EFFECT
========================= */

/* Smooth scroll global */
html {
  scroll-behavior: smooth;
}

/* Fade + slide luxe */
.fade-in {
  opacity: 0;
  transform: translateY(40px) scale(0.98);
  transition: all 0.8s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.fade-in.show {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* Cards premium */
.service-card,
.blog-card,
.team-card {
  transition: all 0.4s ease;
  border-radius: 20px;
}

.service-card:hover,
.blog-card:hover,
.team-card:hover {
  transform: translateY(-10px) scale(1.02);
  box-shadow: 0 20px 60px rgba(0,0,0,0.15);
}

/* Bouton luxe */
.btn-primary {
  transition: all 0.3s ease;
  border-radius: 30px;
}

.btn-primary:hover {
  transform: scale(1.05);
  box-shadow: 0 10px 30px rgba(255,105,180,0.4);
}

/* Image hover zoom */
.team-card img {
  transition: transform 0.5s ease;
}

.team-card:hover img {
  transform: scale(1.1);
}

/* Hero texte animation */
.hero-text {
  animation: fadeHero 1.5s ease forwards;
}

@keyframes fadeHero {
  from {
    opacity: 0;
    transform: translateY(40px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
/* =========================
   📱 MOBILE RESPONSIVE PRO
========================= */

@media (max-width: 768px){

  /* HERO */
  .hero {
    height: 90vh;
  }

  .hero-text {
    padding: 20px;
    text-align: center;
  }

  .romantic-title {
    font-size: 28px;
  }

  .typed-text {
    font-size: 16px;
  }

  .hero-tagline {
    font-size: 14px;
  }

  .btn-primary {
    padding: 12px 20px;
    font-size: 14px;
  }

  /* NAVBAR */
  header {
    padding: 10px 15px;
  }

  nav ul {
    display: none; /* on prépare menu mobile */
  }

  /* SECTIONS */
  section {
    padding: 40px 20px;
  }

  h2 {
    font-size: 22px;
  }

  /* CARDS (services, blog, team) */
  .services-container,
  .blog-container,
  .team-container {
    display: flex;
    flex-direction: column;
    gap: 20px;
  }

  .service-card,
  .blog-card,
  .team-card {
    width: 100%;
  }

  /* FORM */
  form {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  input, select, textarea {
    width: 100%;
    font-size: 14px;
  }

}

/* =========================
   📱 EXTRA SMALL DEVICES
========================= */

@media (max-width: 480px){

  .romantic-title {
    font-size: 22px;
  }

  .typed-text {
    font-size: 14px;
  }

  .hero-tagline {
    font-size: 13px;
  }

  .btn-primary {
    font-size: 13px;
  }

}
img {
  max-width: 100%;
  height: auto;
}
button, a {
  min-height: 44px;
}
body {
  overflow-x: hidden;
}
/* =========================
   🚀 FIX ESPACEMENT HEADER HERO
========================= */


/* =========================
   💎 HEADER PREMIUM LUXE
========================= */

header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;

  display: flex;
  justify-content: center;
  align-items: center;

  padding: 15px 30px;

  background: rgba(255, 255, 255, 0.6);
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);

  border-bottom: 1px solid rgba(0,0,0,0.05);

  transition: all 0.3s ease;
}

/* LOGO */
header .logo {
  font-weight: bold;
  font-size: 20px;
  color: #222;
  letter-spacing: 1px;
}

/* NAV */
header nav ul {
  display: flex;
  gap: 25px;
  list-style: none;
  margin: 0;
  padding: 0;
}

header nav ul li a {
  text-decoration: none;
  color: #333;
  font-weight: 500;
  transition: 0.3s;
}

header nav ul li a:hover {
  color: #ff4d8d;
}

/* BUTTON LANG / CTA */
header .cta {
  padding: 8px 16px;
  border-radius: 20px;
  background: linear-gradient(135deg, #ff4d8d, #ff8fb3);
  color: white;
  font-weight: bold;
  transition: 0.3s;
}

header .cta:hover {
  transform: scale(1.05);
}

/* =========================
   🔥 HEADER SCROLL EFFECT
========================= */

header.scrolled {
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 10px 30px rgba(0,0,0,0.08);
}

header {
  position: fixed;
}

body {
  padding-top: 0;

}
header .logo {
  font-size: 26px;
  font-weight: 900;
  color: #0f0f0f;

  letter-spacing: 2px;

  text-shadow:
    0 1px 0 #fff,
    0 2px 10px rgba(0,0,0,0.15);
}
/* =========================
   💎 LOGO / TITRE ULTRA PRO
========================= */

header .logo,
.header .logo,
.navbar .logo,
.main-header .logo {
  font-size: 30px;
  font-weight: 900;
  letter-spacing: 2px;

  color: #ff2d7a; /* rose premium */
  
  text-transform: uppercase;

  display: flex;
  align-items: center;

  text-shadow: 
    0 2px 10px rgba(255, 45, 122, 0.25),
    0 2px 20px rgba(0, 0, 0, 0.1);

  transition: all 0.3s ease;
}

/* Effet hover luxe */
header .logo:hover {
  transform: scale(1.05);
  color: #ff4d9d;
  text-shadow: 0 0 20px rgba(255, 77, 157, 0.6);

}
main{
  margin-top:80px; /* hauteur du header */
}
/* =========================
   🍔 HAMBURGER MENU PRO
========================= */

/* cacher hamburger desktop */
.hamburger{
  display:none;
  flex-direction:column;
  cursor:pointer;
  gap:5px;
}

.hamburger span{
  width:25px;
  height:3px;
  background:white;
  transition:0.3s;
}

/* MOBILE */
@media (max-width:768px){

  /* show hamburger */
  .hamburger{
    display:flex;
  }

  /* cache menu */
  nav{
    position:fixed;
    top:70px;
    right:-100%;
    width:100%;
    height:100vh;
    background:rgba(0,0,30,0.95);
    backdrop-filter:blur(10px);
    transition:0.4s;
    display:flex;
    justify-content:center;
    align-items:center;
  }

  nav ul{
    flex-direction:column;
    gap:25px;
    text-align:center;
  }

  nav ul li a{
    font-size:20px;
  }

  /* menu ouvert */
  nav.active{
    right:0;
  }

  /* animation burger */
  .hamburger.active span:nth-child(1){
    transform:rotate(45deg) translate(5px,5px);
  }

  .hamburger.active span:nth-child(2){
    opacity:0;
  }

  .hamburger.active span:nth-child(3){
    transform:rotate(-45deg) translate(6px,-6px);
  }

}
/* =========================
   📱 MOBILE RESPONSIVE CLEAN
========================= */

@media (max-width:768px){

  html, body{
    width:100%;
    overflow-x:hidden;
  }

  body{
    padding-top:70px;
  }

  /* HEADER */
  .navbar{
    padding:15px;
    flex-direction:row;
    justify-content:space-between;
    align-items:center;
  }

  .logo{
    font-size:20px;
  }

  /* HAMBURGER */
  .hamburger{
    display:flex;
    z-index:2000;
  }

  /* NAVIGATION */
  nav{
    position:fixed;
    top:70px;
    right:-100%;
    width:100%;
    height:100vh;
    background:rgba(0,0,30,0.97);
    backdrop-filter:blur(12px);

    display:flex;
    justify-content:center;
    align-items:center;

    transition:0.4s ease;
    z-index:1500;
  }

  nav.active{
    right:0;
  }

  nav ul{
    display:flex;
    flex-direction:column;
    gap:25px;
    text-align:center;
  }

  nav ul li a{
    font-size:20px;
  }

  /* HERO */
  .hero{
    min-height:90vh;
  }

  .hero-text{
    padding:20px;
  }

  .romantic-title{
    font-size:28px;
    line-height:1.2;
  }

  .typed-text,
  .hero-tagline{
    font-size:15px;
  }

  /* SECTIONS */
  section{
    padding:50px 20px;
  }

  h2{
    font-size:24px;
  }

  /* CARDS */
  .service-list,
  .team-list,
  .blog-container{
    flex-direction:column;
    align-items:center;
  }

  .service-item,
  .team-member,
  .blog-card{
    width:95%;
    max-width:350px;
  }

  /* FORM */
  .appointment-form{
    width:100%;
  }

  input,
  textarea,
  select{
    width:100%;
  }

  /* FOOTER */
  footer{
    padding:30px 15px;
  }

}