/* =======================
   style.css — thème bleu→cyan
   Nouveau dégradé: #6b5cff → #00d4ff (plus de fuchsia)
   ======================= */

html, body{
  font-family:'Inter',system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,Helvetica Neue,Arial,'Apple Color Emoji','Segoe UI Emoji'
}

/* Banner height as CSS var so we can offset the header nicely (smaller now) */
:root{
  --banner-h: 30px;

  /* Palette dégradé (bleu → cyan) */
  --grad-start:#6b5cff;
  --grad-end:#00d4ff;

  /* RGB pour usages en rgba() */
  --grad-start-rgb:107,92,255;   /* #6b5cff */
  --grad-end-rgb:0,212,255;      /* #00d4ff */
}
@media (min-width:768px){
  :root{ --banner-h: 34px; }
}
.nav-pill a.active,
    #mobileMenu nav a.active{
      font-weight:600;
      background-image: linear-gradient(to right, #6b5cff, #00d4ff);
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
    }
    .nav-pill a.active:hover,
    #mobileMenu nav a.active:hover{ color: transparent; }

    /* ===== Desktop dropdown (ouverture au survol) ===== */
    .dd{
      position:relative;
      /* plus de padding-bottom qui décale verticalement */
      padding-bottom:0;
    }

    /* zone "tampon" sous le bouton pour que le hover ne se ferme pas
       quand on descend vers le panneau */
    .dd::after{
      content:"";
      position:absolute;
      left:0;
      right:0;
      top:100%;
      height:.75rem; /* espace de confort pour la souris */
    }

    .dd-btn{
      display:inline-flex;
      align-items:center;
      gap:.4rem;
      line-height:1.4;
    }
    .dd-btn .chev{
      transition: transform .22s ease;
    }

    /* panneau caché par défaut */
    .dd-panel{
      position:absolute;
      left:0;
      top:calc(100% + .5rem); /* on retombe dans la zone tampon */
      min-width:260px;
      display:none;
      background:rgba(15,15,15,.96);
      border:1px solid rgba(255,255,255,.12);
      box-shadow:0 18px 50px rgba(0,0,0,.45);
      backdrop-filter:blur(10px);
      border-radius:14px;
      padding:.75rem;
      z-index:80;
    }

    /* ouverture au hover et au focus clavier */
    .dd:hover .dd-panel,
    .dd:focus-within .dd-panel{
      display:block;
    }
    .dd:hover .chev,
    .dd:focus-within .chev{
      transform: rotate(180deg);
    }

    .dd-panel a{
      display:flex;
      align-items:center;
      gap:.6rem;
      padding:.55rem .6rem;
      border-radius:.75rem;
      color:rgb(212 212 216 / 1);
      transition: background-color .15s ease, color .15s ease, border-color .15s ease;
      border:1px solid transparent;
      text-decoration:none;
    }
    .dd-panel a:hover{
      background:rgba(255,255,255,.06);
      border-color:rgba(255,255,255,.10);
      color:white;
    }

    /* ===== Mobile submenus (details/summary — pas de JS requis) ===== */
    #mobileMenu details summary { list-style: none; }
    #mobileMenu details summary::-webkit-details-marker { display:none; }
    #mobileMenu details .chevron{ transition: transform .25s ease; }
    #mobileMenu details[open] .chevron{ transform: rotate(180deg); }
/* ========== Helpers optionnels pour réutiliser le dégradé (si besoin) ========== */
.gradient-brand{
  background-image: linear-gradient(135deg, var(--grad-start), var(--grad-end));
}
.border-gradient-start{ border-color: var(--grad-start); }
.text-gradient{
  background: linear-gradient(135deg, var(--grad-start), var(--grad-end));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* --- HEADER PILL (comme radio.co) --- */
.nav-pill{
  transition:background-color .25s ease, box-shadow .25s ease, border-color .25s ease, transform .25s ease;
  background-color:rgba(14,14,14,.82);
  border:1px solid rgba(255,255,255,.10);
  box-shadow:0 10px 30px rgba(0,0,0,.35);
  backdrop-filter: blur(10px);
}
.nav-pill.scrolled{
  background-color:rgba(10,10,10,.92);
  border-color:rgba(255,255,255,.12);
  box-shadow:0 18px 50px rgba(0,0,0,.45);
}
.has-banner-offset{ top: calc(var(--banner-h) + 0.75rem); } /* 0.75rem ≈ top-3 */

/* --- HERO typing caret & anti-clipping --- */
.typed{position:relative;display:inline-block;line-height:1.15}
.typed::after{
  content:"";
  position:absolute;
  right:-0.12em;
  top:0.1em;
  width:2px;
  height:1em;
  background:currentColor;
  opacity:.8;
  animation:blink 1s steps(1,end) infinite;
}
@keyframes blink{50%{opacity:0}}
@media (prefers-reduced-motion: reduce){ .typed::after{animation:none} }

/* --- Témoignages (carrousel) --- */
.testi-quote{ position:relative; }
.testi-quote::before{
  content:"“";
  position:absolute;
  left:-10px; top:-18px;
  font-size:52px; line-height:1;
  color: rgba(255,255,255,.08);
  font-weight: 800;
}
@media (min-width:768px){
  .testi-quote::before{ font-size:72px; left:-14px; top:-26px; }
}

/* Avatar fallback: dégradé bleu→cyan (opacité douce) */
.avatar-fallback{
  background: linear-gradient(
    135deg,
    rgba(var(--grad-start-rgb), .35),
    rgba(var(--grad-end-rgb), .35)
  );
}

/* Card survol: ombre + liseré accordés au bleu du dégradé */
.testi-card{
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.testi-card:hover{
  transform: translateY(-2px);
  box-shadow: 0 18px 40px rgba(0,0,0,.45);
  border-color: rgba(var(--grad-start-rgb), .35);
}

.testi-item{ flex: 0 0 100%; max-width: 100%; }
@media (min-width:768px){
  .testi-item{ flex: 0 0 33.3333%; max-width: 33.3333%; }
}

.hide-scroll{ -ms-overflow-style: none; scrollbar-width: none; }
.hide-scroll::-webkit-scrollbar{ display:none; }

.testi-wrap{ position:relative; }
@media (min-width:768px){
  .testi-wrap{ padding: 0 1rem; }
}

/* Boutons nav carrousel */
.testi-nav{
  position:absolute; top:50%; transform:translateY(-50%);
  height:2.5rem; width:2.5rem; border-radius:9999px;
  background: rgba(17,17,17,.85);
  border:1px solid rgba(255,255,255,.12);
  display:flex; align-items:center; justify-content:center;
  backdrop-filter: blur(8px);
  box-shadow: 0 8px 20px rgba(0,0,0,.35);
  transition: opacity .2s ease, background-color .2s ease;
  z-index: 20;
}
.testi-nav:hover{ background: rgba(24,24,24,.95); }
.testi-nav[disabled]{ opacity:.25; pointer-events:none; }
@media (min-width:768px){
  .testi-prev{ left:-2.25rem; }
  .testi-next{ right:-2.25rem; }
}

/* INDEX */
  .price-gradient{ background: linear-gradient(to right, #6b5cff, #00d4ff); -webkit-background-clip:text; background-clip:text; color: transparent; }
    .price-card{ background: rgba(18,18,18,.9); border:1px solid rgba(255,255,255,.08); box-shadow: 0 20px 50px rgba(0,0,0,.45); transition:.25s ease; }
    .price-card:hover{ border-color: rgba(107,92,255,.35); box-shadow: 0 28px 60px rgba(0,0,0,.55); transform: translateY(-2px); }
    .price-featured{ position:relative; }
    .price-featured::before{ content:""; position:absolute; inset:-1px; border-radius:1rem; padding:1px; background:linear-gradient(90deg,#7c3aed,#ec4899); -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; }
    .billing-switch{ position:relative; width:64px; height:30px; border-radius:9999px; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12); box-shadow: inset 0 0 0 1px rgba(255,255,255,.04); transition:background .2s ease, border-color .2s ease; }
    .billing-switch .dot{ position:absolute; top:3px; left:3px; width:24px; height:24px; border-radius:9999px; background:#0b0b0b; box-shadow:0 0 0 2px rgba(255,255,255,.06), 0 10px 18px rgba(0,212,255,.35); transition:left .2s ease; }
    .billing-switch.active{ background:linear-gradient(90deg,rgba(124,58,237,.55),rgba(0,212,255,.55)); border-color:rgba(0,212,255,.45); }
    .billing-switch.active .dot{ left:37px; box-shadow:0 0 0 2px rgba(255,255,255,.06), 0 10px 18px rgba(124,58,237,.35); }

    /* ===== Animation d'ondes (section #top) ===== */
    .hero-waves-wrap{ z-index:0; }
    .hero-waves-wrap canvas{ width:100%; height:100%; display:block; opacity:.6; }


/* Bulle : animation douce et look "chat" */
    .bubble{
      position:absolute;
      opacity:0;
      --pos: translate(0,0);
      --shift: translateY(6px);
      --scale: scale(.94);
      transform: var(--pos) var(--shift) var(--scale);
      transition: opacity .55s ease, transform .55s cubic-bezier(.22,.8,.2,1);
      will-change: opacity, transform;
      padding:.7rem 1rem;
      border-radius:999px;
      filter: drop-shadow(0 10px 25px rgba(0,0,0,.35));
      z-index: 20;
      line-height:1.25;
    }
    .bubble span{ display:inline-block; }

    .bubble.is-visible{
      opacity:1;
      --shift: translateY(0);
      --scale: scale(1);
    }

    /* Variantes visuelles */
    .bubble-cmd{
      background:#ffffff;
      color:#111827;
      border:1px solid rgba(0,0,0,.06);
    }

    /* Gradient partagé entre bulle et encoche via variables */
    .bubble-ok{
      --grad: linear-gradient(90deg, #6b5cff, #00d4ff);
      --grad-w: 100%;
      --tail-offset: 28px; /* position horizontale de l’encoche */
      background-image: var(--grad);
      background-size: var(--grad-w) 100%;
      background-position: 0 0;
      color:#ffffff;
      border:none;
    }

    /* TAILS (petits losanges) */
    .bubble::after{
      content:"";
      position:absolute;
      width:14px; height:14px;
      transform: rotate(45deg);
      z-index:-1;
      border:none;
    }
    .bubble-cmd::after{
      background:#ffffff;
      border:1px solid rgba(0,0,0,.06);
    }

    /* Encoche "D’accord" — même gradient exactement aligné */
    .bubble-ok::after{
      background-image: var(--grad);
      background-size: var(--grad-w) 100%;
      background-position: calc(var(--tail-offset) * -1) 0; /* aligne la couleur avec la bulle */
      border:none;
    }

    /* Directions de la queue */
    .tail-top::after{
      bottom: calc(100% - 7px);
      left: var(--tail-offset);
    }
    .tail-bottom::after{
      top: calc(100% - 7px);
      left: 28px;
    }
    .tail-left::after{
      right: calc(100% - 7px);
      top: 50%;
      transform: translateY(-50%) rotate(45deg);
    }
    .tail-right::after{
      left: calc(100% - 7px);
      top: 50%;
      transform: translateY(-50%) rotate(45deg);
    }

    /* Positions utilitaires */
    .pos-top-center{ top: 8px; left:50%; --pos: translate(-50%,0); }
    .pos-middle-left{ top:50%; left:10px; --pos: translate(0,-50%); }
    .pos-middle-right{ top:50%; right:10px; --pos: translate(0,-50%); }
    .pos-bottom-center{ bottom: 12px; left:50%; --pos: translate(-50%,0); }