/* === Variables & Reset === */
:root{
  --bg: #f3f1f1;      
  --surface: #f2f2f2;
  --text: #222222;
  --muted: #555555;
  --brand: #ac1e44;
  --gold: #ac1e44;     /* champagne*/
  --brand-2: #ff8fa3;
  --brand-3: #5c89a7;
  --ring: 0 0 0 .15rem rgba(123, 209, 255, .5);
}
@media (prefers-color-scheme: light){
  :root{
    --bg:#f3f1f1; --surface:#f5f7fb; --text:#0b0c0f; --muted:#47506b; 
    --brand:#ac1e44; --brand-2:#00a3ff; --brand-3: #5c89a7;--gold:#ac1e44;     /* doré champagne */;
  }
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font:16px/1.6 system-ui, -apple-system, Segoe UI, Roboto, Noto Sans, Ubuntu, Cantarell, "Helvetica Neue", Arial, "Apple Color Emoji","Segoe UI Emoji";
  background:var(--bg);
  color:var(--text);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img,svg{max-width:100%; display:block}
a{color:inherit; text-decoration:none}
.container{max-width:1100px; margin-inline:auto; padding: clamp(16px, 3vw, 32px);}
.container h2{
  font-size: clamp(28px, 5vw, 48px); 
  line-height:1.15; 
  color:var(--brand);
  margin:.2em 0
}
/* === Header / Nav === */
.site-header{
  position:sticky; top:0;
  backdrop-filter:saturate(180%) blur(6px);
  background:color-mix(in oklab, var(--brand-3), transparent 40%);
  border-bottom:1px solid color-mix(in oklab, var(--text), transparent 92%);
  z-index:10
}
.navbandeau{display:flex; align-items:center; gap:16px}
.brand{font-weight:700; letter-spacing:.2px}
.menu{display:flex; gap:16px; margin-left:auto; list-style:none; padding:0}
/* Menu dynamique */
.menu a {
  position: relative;
  padding: 10px 12px;
  border-radius: 8px;
  color: var(--text);
  font-weight: 500;
  transition: color 0.3s ease, transform 0.2s ease;
}
/* Ligne animée sous le texte */
.menu a::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: 0%;
  height: 2px;
  background-color: var(--brand);
  border-radius: 2px;
  transition: width 0.3s ease;
}
/* Survol */
.menu a:hover {
  color: var(--brand);
  transform: translateY(-2px);
}
.menu a:hover::after {width: 100%;}


/* Par défaut (mobile) : menu caché */
.menu {
  display: none;
  flex-direction: column;
}
/* Quand le menu est ouvert */
.menu.is-open {
  display: flex;
}
@media (min-width: 768px) {
  .menu {
    display: flex;
    flex-direction: row;
    gap: 1.5rem;
  }

.menu-toggle {
  display: none;
}
}
/* === Hero === */
.hero{
  display:grid; 
  grid-template-columns:1.15fr .85fr; 
  align-items:center; 
  gap:32px; 
  min-height:60svh
}
.hero h1{
  font-size: clamp(28px, 5vw, 48px); 
  line-height:1.15; 
  margin:.2em 0
}
.hero h2{
  font-size: clamp(18px, 5vw, 38px); 
  line-height:1.15; 
  color:var(--brand);
  margin:.2em 0
}
.hero p{
  color:var(--muted); 
  margin:0 0 16px
}
.actions{
  display:flex; 
  flex-wrap:wrap;
  justify-content: center; 
  gap:12px
}
.btn{
  display:inline-block; 
  padding:12px 16px; 
  border:1px solid color-mix(in oklab, var(--text), transparent 85%); 
  border-radius:12px;
  transition: transform .3s, box-shadow .3s;
}
.btn:hover {
  transform: scale(1.05);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
}
.btn.primary{
  background:linear-gradient(135deg, var(--brand), var(--brand-2)); 
  color:white; 
  border-color:transparent
}
.btn.primary:hover {
  transform: scale(1.05);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
}

/* === Sections === */
.section{padding-block: clamp(32px, 7vw, 72px)}
.section h2{font-size: clamp(22px, 3.5vw, 32px); margin:0 0 16px}
.grid{
  display:grid; 
  grid-template-columns:repeat(3, 1fr); 
  justify-content: center; 
  gap:16px
}
.card{
  background:var(--surface); 
  padding:18px; 
  border:1px solid color-mix(in oklab, var(--text), transparent 90%); 
  border-radius:14px;
  transition: transform .3s, box-shadow .3s;
}
.card:hover {
  transform: scale(1.05);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
}
.table-wrap{
  overflow:auto; 
  background:var(--surface); 
  border:1px solid color-mix(in oklab, var(--text), transparent 90%); 
  border-radius:12px
}
.pricing-table{
  width:100%; 
  border-collapse:collapse; 
  min-width:480px
}
.pricing-table th, 
.pricing-table td{
  padding:12px 14px; 
  border-bottom:1px solid color-mix(in oklab, var(--text), transparent 90%)
}

/* === Footer === */
.site-footer{
  border-top:1px solid color-mix(in oklab, var(--text), transparent 92%); 
  margin-top:48px
}
.site-footer p{margin:0}

/* === Utilities === */
.skip-link{
  position:absolute; 
  left:-9999px; 
  top:auto; 
  width:1px; 
  height:1px; 
  overflow:hidden
}
.skip-link:focus{
  position:static; 
  width:auto; 
  height:auto; 
  padding:8px 12px; 
  background:var(--brand); 
  color:white; 
  border-radius:8px
}
.sr-only{
  position:absolute; 
  width:1px; 
  height:1px; 
  padding:0; 
  margin:-1px; 
  overflow:hidden; 
  clip:rect(0,0,0,0); 
  border:0
}

/* === Responsive === */
@media (max-width: 900px){
  .hero{grid-template-columns:1fr; text-align:center}
  .menu{display:none}
  .nav-toggle{display:inline-flex; margin-left:auto}
  .grid{grid-template-columns:1fr}
}
.logo-container {
  display: flex;
  justify-content: center;
  align-items: center;
}

/* === Carrousel 3D === */
.scene{
  width:600px;
  height:400px;
  margin-inline:auto;
  perspective:3000px;
  position:relative;
}
.carousel{
  width:100%;
  height:100%;
  position:absolute;
  transform-style:preserve-3d;
  transition:transform 1s;
}
.carousel figure{
  margin:0;
  position:absolute;
  width:480px;
  height:320px;
  left:60px;
  top:40px;
  background:var(--surface);
  border:1px solid color-mix(in oklab, var(--text), transparent 90%);
  border-radius:14px;
  box-shadow:0 8px 20px rgba(0,0,0,.15);
  display:flex;
  flex-direction:column;
  overflow:hidden;
}
.carousel img{
  width:100%;
  height:80%;
  object-fit:cover;
  display:block;
}
.carousel .info{
  padding:10px 14px;
  font-size:14px;
  color:var(--muted); 
  background:color-mix(in oklab, var(--bg), transparent 20%);

}
/* Navigation */
.nav{
  position:absolute;
  top:50%;
  width:100%;
  display:flex;
  justify-content:space-between;
  transform:translateY(-50%);
}
.nav button{
  background:color-mix(in oklab, var(--brand-3), transparent 35%);
  border:none;
  color:var(--text);
  font-size:32px;
  width:50px;
  height:50px;
  border-radius:50%;
  cursor:pointer;
  transition: background .3s, transform .2s;
}
.nav button:hover{
  background:var(--brand);
  color:white;
  transform:scale(1.1);
}



/* -------- Effet bulles champagne -------- */
.bubbles {
  position:absolute;
  inset:0;
  overflow:hidden;
  z-index:0;
}
.bubble {
  position:absolute;
  bottom:-40px;
  border-radius:50%;
  background: radial-gradient(circle at 90% 30%,var(--gold), rgba(212,175,55,0));
  opacity:0.7;
  animation: rise 10s linear infinite, drift 3s ease-in-out infinite alternate;
}

/* Remontée verticale */
@keyframes rise {
  0%   { transform: translateY(0) scale(0.4); opacity:0.2; }
  50%  { opacity:1; }
  100% { transform: translateY(-110vh) scale(1); opacity:0; }
}

/* Oscillation horizontale */
@keyframes drift {
  from { margin-left:-30px; }
  to   { margin-left:30px; }
}

/* -------- Génération de nombreuses bulles -------- */
/* Astuce : beaucoup de nth-child avec tailles, délais et vitesses différentes */
.bubble:nth-child(1){ left:5%; width:6px; height:6px; animation-duration:7s, 3s; animation-delay:0s, 0s; }
.bubble:nth-child(2){ left:10%; width:8px; height:8px; animation-duration:8s, 2.5s; animation-delay:1s, 0.2s; }
.bubble:nth-child(3){ left:15%; width:5px; height:5px; animation-duration:6s, 3s; animation-delay:2s, 0.4s; }
.bubble:nth-child(4){ left:20%; width:7px; height:7px; animation-duration:7.5s, 2.8s; animation-delay:0.5s, 0.3s; }
.bubble:nth-child(5){ left:25%; width:9px; height:9px; animation-duration:9s, 3.2s; animation-delay:1.2s, 0.6s; }
.bubble:nth-child(6){ left:30%; width:6px; height:6px; animation-duration:6.8s, 2.9s; animation-delay:0.8s, 0.5s; }
.bubble:nth-child(7){ left:35%; width:5px; height:5px; animation-duration:7.5s, 3.1s; animation-delay:1.8s, 0.4s; }
.bubble:nth-child(8){ left:40%; width:8px; height:8px; animation-duration:8.5s, 2.6s; animation-delay:2.4s, 0.7s; }
.bubble:nth-child(9){ left:45%; width:6px; height:6px; animation-duration:6.3s, 2.7s; animation-delay:1.4s, 0.3s; }
.bubble:nth-child(10){ left:50%; width:7px; height:7px; animation-duration:7.8s, 3s; animation-delay:0.9s, 0.4s; }
.bubble:nth-child(11){ left:55%; width:5px; height:5px; animation-duration:8.2s, 3.2s; animation-delay:1.6s, 0.2s; }
.bubble:nth-child(12){ left:60%; width:9px; height:9px; animation-duration:9.2s, 2.8s; animation-delay:2.1s, 0.5s; }
.bubble:nth-child(13){ left:65%; width:6px; height:6px; animation-duration:6.5s, 3s; animation-delay:0.7s, 0.1s; }
.bubble:nth-child(14){ left:70%; width:10px; height:10px; animation-duration:8.8s, 3.3s; animation-delay:2.7s, 0.3s; }
.bubble:nth-child(15){ left:75%; width:7px; height:7px; animation-duration:7.3s, 2.7s; animation-delay:1.9s, 0.4s; }
.bubble:nth-child(16){ left:80%; width:5px; height:5px; animation-duration:6.6s, 3s; animation-delay:0.4s, 0.2s; }
.bubble:nth-child(17){ left:85%; width:9px; height:9px; animation-duration:8.9s, 3.1s; animation-delay:1.3s, 0.5s; }
.bubble:nth-child(18){ left:90%; width:6px; height:6px; animation-duration:7.1s, 2.9s; animation-delay:2.5s, 0.1s; }
.bubble:nth-child(19){ left:95%; width:8px; height:8px; animation-duration:9.5s, 3.2s; animation-delay:0.6s, 0.4s; }
.bubble:nth-child(20){ left:8%; width:7px; height:7px; animation-duration:7.6s, 2.8s; animation-delay:1.1s, 0.2s; }
.bubble:nth-child(21){ left:18%; width:6px; height:6px; animation-duration:6.9s, 3.1s; animation-delay:2.3s, 0.3s; }
.bubble:nth-child(22){ left:27%; width:5px; height:5px; animation-duration:7.4s, 2.9s; animation-delay:0.9s, 0.2s; }
.bubble:nth-child(23){ left:37%; width:7px; height:7px; animation-duration:8.1s, 3.2s; animation-delay:1.7s, 0.6s; }
.bubble:nth-child(24){ left:47%; width:6px; height:6px; animation-duration:7.8s, 2.7s; animation-delay:2.2s, 0.5s; }
.bubble:nth-child(25){ left:57%; width:8px; height:8px; animation-duration:9s, 3s; animation-delay:0.5s, 0.4s; }
.bubble:nth-child(26){ left:67%; width:5px; height:5px; animation-duration:6.7s, 3.2s; animation-delay:1.5s, 0.2s; }
.bubble:nth-child(27){ left:77%; width:7px; height:7px; animation-duration:8.4s, 2.8s; animation-delay:0.8s, 0.4s; }
.bubble:nth-child(28){ left:87%; width:6px; height:6px; animation-duration:7.2s, 3.1s; animation-delay:2.4s, 0.3s; }
.bubble:nth-child(29){ left:93%; width:5px; height:5px; animation-duration:6.9s, 3s; animation-delay:1.1s, 0.1s; }
.bubble:nth-child(30){ left:98%; width:8px; height:8px; animation-duration:8.7s, 2.9s; animation-delay:2.6s, 0.5s; }

/* texte au-dessus des bulles */
.banner > *:not(.bubbles) {
  position: relative;
  z-index: 1;
}

/* === Responsive === */


/* === Mobile : tout adapté à la taille de l'écran === */
@media (max-width: 600px){

  html, body{
    font-size:15px;
  }

  .container{
    padding-inline:16px;
  }

  /* ICI : on affiche le bouton à droite sur mobile */
  .menu-toggle {
    margin-left: auto;      /* aligne à droite */
    display: inline-flex;   /* affiché sur mobile */
    align-items: center;
  }

  /* Le menu devient vertical et caché par défaut, affiché avec .is-open */
  .menu{
    display:none;
    flex-direction: column;
    width:100%;
    margin-left:0;          /* on annule le margin-left:auto de la version desktop si besoin */
  }

  .menu.is-open{
    display:flex;
  }


  /* Hero en colonne, contenu centré */
  .hero{
    grid-template-columns:1fr;
    text-align:center;
    min-height:auto;
    gap:24px;
  }

  .hero > *{
    justify-self:center;
  }

  /* Grille sur une seule colonne */
  .grid{
    grid-template-columns:1fr;
  }

  .card{
    width:100%;
  }

  /* Carrousel 3D responsive */
.scene{
    width:100%;              /* plus de 100vw -> reste dans le container */
    max-width:100%;
    aspect-ratio:4 / 3;      /* hauteur auto, proportionnelle */
    height:auto;
    margin:16px auto;
    perspective:1500px;
    overflow:hidden;         /* on coupe ce qui dépasserait */
  }

  .carousel{
    position:relative;
    width:100%;
    height:100%;
  }

  .carousel figure{
    width:100%;
    height:100%;
    left:0;
    top:0;
    margin:0;
    transform:none;          /* centré naturellement */
  }

  .carousel img{
    height:75%;              /* pour garder la légende visible */
  }

  /* Boutons de navigation du carrousel */
  .nav{
    top:50%;
  }

  .nav button{
    width:11vw;                 /* taille relative à l'écran */
    height:11vw;
    max-width:40px;
    max-height:40px;
    font-size:24px;
  }

  /* Tables : scroll horizontal fluide */
  .table-wrap{
    max-width:100%;
  }

  .pricing-table{
    min-width:100%;
  }
}