/* ============================================================
   SEPT WEB — Polish
   Animations enrichies + responsive <480px + nav mobile
   S'ajoute par-dessus les styles existants, ne casse rien.
   ============================================================ */

/* Variables — reprise de celles du site */
:root{
  --p-ease: cubic-bezier(.2,.7,.2,1);
  --p-dur:  .7s;
}

/* ---------------- Reveal améliorés ---------------- */
/* Par défaut les .reveal existants font un translateY ; on ajoute des variantes */
.reveal[data-anim="left"]  { transform: translateX(-30px); opacity: 0; }
.reveal[data-anim="right"] { transform: translateX( 30px); opacity: 0; }
.reveal[data-anim="scale"] { transform: scale(.94);       opacity: 0; }
.reveal[data-anim="blur"]  { filter: blur(8px);           opacity: 0; }

.reveal[data-anim="left"].in,
.reveal[data-anim="right"].in,
.reveal[data-anim="scale"].in { transform: none; opacity: 1; }
.reveal[data-anim="blur"].in  { filter: none; opacity: 1; }

/* Stagger plus fin */
.reveal-5 { transition-delay: .5s; }
.reveal-6 { transition-delay: .6s; }
.reveal-7 { transition-delay: .7s; }

/* ---------------- Portfolio cards (liens) ---------------- */
a.work-card{ display: block; text-decoration: none; }
a.work-card .work-info::after{
  content: "→ Voir le site";
  display: inline-block;
  margin-top: 14px;
  font-size: 13px;
  color: var(--accent, #C3F73A);
  font-weight: 600;
  letter-spacing: .3px;
  opacity: 0;
  transform: translateX(-6px);
  transition: opacity .35s var(--p-ease), transform .35s var(--p-ease);
}
a.work-card:hover .work-info::after{ opacity: 1; transform: translateX(0); }

/* ---------------- Hover cards raffinés ---------------- */
.service-card,
.work-card,
.pricing-card,
.plan{
  transition: transform .35s var(--p-ease), border-color .35s var(--p-ease), box-shadow .35s var(--p-ease);
  will-change: transform;
}
.service-card:hover,
.work-card:hover,
.pricing-card:hover,
.plan:hover{
  transform: translateY(-4px);
  border-color: var(--accent, #C3F73A);
  box-shadow: 0 18px 50px rgba(195,247,58,.08);
}

/* Bouton primaire : effet shine au hover */
.btn-primary{
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.btn-primary::before{
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, transparent 20%, rgba(255,255,255,.35) 50%, transparent 80%);
  transform: translateX(-120%);
  transition: transform .6s var(--p-ease);
  z-index: 1;
}
.btn-primary:hover::before { transform: translateX(120%); }
.btn-primary > *{ position: relative; z-index: 2; }

/* Flèche CTA : déjà animée, on ajoute un rebond léger */
.btn:hover .btn-arrow { transform: translateX(4px); }

/* ---------------- Counter animation ---------------- */
.count-up {
  display: inline-block;
  font-variant-numeric: tabular-nums;
  min-width: .6em;
}
.count-up.in {
  animation: countPop .5s var(--p-ease) both;
}
@keyframes countPop {
  0%   { transform: scale(.85); opacity: 0; }
  60%  { transform: scale(1.05); }
  100% { transform: scale(1); opacity: 1; }
}

/* ---------------- Parallax hero ---------------- */
.hero-bg,
.hero-grid {
  will-change: transform;
  transition: transform .05s linear;
}

/* ---------------- Spotlight souris (desktop) ---------------- */
@media (pointer: fine) {
  .hero.has-spotlight .hero-bg{
    background:
      radial-gradient(720px 520px at var(--mx, 75%) var(--my, 20%),
        rgba(195,247,58,.20), transparent 60%),
      radial-gradient(500px 500px at 15% 85%,
        rgba(195,247,58,.06), transparent 60%) !important;
    transition: opacity .25s ease;
  }
}
@media (prefers-reduced-motion: reduce) {
  .hero.has-spotlight .hero-bg{
    --mx: 75% !important;
    --my: 20% !important;
  }
}

/* ---------------- Float subtil sur badges lime ---------------- */
.hero-meta-item .num,
.timeline-day.active .num{
  display: inline-block;
  animation: floatY 3.5s var(--p-ease) infinite;
}
@keyframes floatY {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-3px); }
}

/* ---------------- Nav mobile (hamburger) ---------------- */
/* Bouton visible <820px, caché au-dessus */
.nav-burger{
  display: none;
  background: transparent;
  border: 1px solid var(--border, #24242A);
  border-radius: 8px;
  width: 40px; height: 40px;
  padding: 0;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--text, #F5F2EC);
  transition: border-color .2s var(--p-ease);
}
.nav-burger:hover{ border-color: var(--accent, #C3F73A); }
.nav-burger svg{ width: 22px; height: 22px; }
.nav-burger .line{
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  transition: all .3s var(--p-ease);
  transform-origin: center;
}
.nav-burger[aria-expanded="true"] .l1 { transform: translateY(5.5px) rotate(45deg); }
.nav-burger[aria-expanded="true"] .l2 { opacity: 0; }
.nav-burger[aria-expanded="true"] .l3 { transform: translateY(-5.5px) rotate(-45deg); }

/* Panneau nav mobile — caché par défaut, visible quand aria-expanded="true" */
.nav-panel{
  display: none;
  position: fixed;
  top: 70px; left: 0; right: 0;
  background: rgba(10,10,11,.96);
  backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--border, #24242A);
  z-index: 49;
  padding: 28px 24px 36px;
  animation: panelSlide .35s var(--p-ease);
}
@keyframes panelSlide {
  from { transform: translateY(-8px); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}
.nav-panel.open{ display: block; }
.nav-panel a{
  display: block;
  padding: 14px 0;
  border-bottom: 1px solid rgba(255,255,255,.06);
  color: var(--text, #F5F2EC);
  font-size: 17px;
  font-weight: 500;
  text-decoration: none;
  transition: color .2s;
}
.nav-panel a:hover { color: var(--accent, #C3F73A); }
.nav-panel a.btn-primary{
  background: var(--accent, #C3F73A);
  color: var(--ink, #0A0A0B);
  text-align: center;
  margin-top: 16px;
  border: none;
  border-radius: 10px;
  padding: 14px 20px;
}
.nav-panel a.btn-primary:hover{ color: var(--ink, #0A0A0B); filter: brightness(1.05); }

/* Quand le burger est ouvert, on bloque le scroll du body */
body.nav-open{ overflow: hidden; }

@media (max-width: 820px){
  .nav-burger{ display: inline-flex; }
  /* En mobile, tout le cluster de droite (liens + CTA) laisse place au burger */
  .nav .nav-links{ display: none; }
  /* Logo un peu plus compact sur smartphone */
  .nav .logo{ font-size: 19px; }
  .nav{ padding: 14px 0 !important; }
}
@media (max-width: 380px){
  .nav .logo{ font-size: 17px; }
  .nav-burger{ width: 36px; height: 36px; }
}

/* ---------------- Breakpoint <480px (vrai smartphone) ---------------- */
@media (max-width: 480px){
  /* HERO plus compact */
  .hero{ padding: 120px 0 60px; min-height: auto; }
  .hero h1{ font-size: clamp(36px, 11vw, 54px) !important; line-height: 1.02; }
  .hero-sub{ font-size: 16px !important; margin-top: 16px; }
  .hero-cta{ flex-direction: column; gap: 10px; width: 100%; }
  .hero-cta .btn{ width: 100%; justify-content: center; }
  .hero-meta{ gap: 16px !important; margin-top: 36px; }
  .hero-meta-item .num{ font-size: 30px !important; }

  /* Sections plus serrées */
  section{ padding: 60px 0 !important; }
  .section-head h2{ font-size: clamp(28px, 8vw, 38px) !important; }
  .section-head p{ font-size: 14px !important; }

  /* Grids en 1 colonne */
  .services-grid,
  .portfolio-grid,
  .pricing-grid{
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }

  /* Timeline plus compact */
  .timeline-step h3{ font-size: 18px !important; }
  .timeline-step p{ font-size: 14px !important; }

  /* Footer */
  .foot-top{ grid-template-columns: 1fr !important; gap: 28px !important; }
  .foot-bottom{ flex-direction: column; gap: 8px; text-align: center; }

  /* Boutons pleins largeur */
  .container .btn{ padding: 13px 20px; font-size: 14px; }
}

/* Ultra-small (iPhone SE / Android basse def) */
@media (max-width: 360px){
  .hero h1{ font-size: 34px !important; }
  .section-head h2{ font-size: 26px !important; }
}

/* ---------------- Lisibilité : scrollbar custom ---------------- */
@media (hover: hover){
  ::-webkit-scrollbar{ width: 10px; }
  ::-webkit-scrollbar-track{ background: #0A0A0B; }
  ::-webkit-scrollbar-thumb{ background: #24242A; border-radius: 10px; border: 2px solid #0A0A0B; }
  ::-webkit-scrollbar-thumb:hover{ background: #3A3A40; }
}

/* ---------------- Bouton flottant RDV ---------------- */
.sept-rdv-fab{
  position: fixed;
  right: 22px; bottom: 22px;
  z-index: 60;
  display: inline-flex; align-items: center; gap: 10px;
  padding: 14px 20px 14px 18px;
  background: var(--accent, #C3F73A);
  color: var(--ink, #0A0A0B);
  border: none;
  border-radius: 100px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 12px 30px rgba(195,247,58,.35), 0 4px 10px rgba(0,0,0,.3);
  transition: transform .25s var(--p-ease), box-shadow .25s var(--p-ease);
  animation: rdvPop .5s var(--p-ease) .8s both;
}
.sept-rdv-fab:hover{
  transform: translateY(-3px) scale(1.03);
  box-shadow: 0 18px 45px rgba(195,247,58,.5), 0 6px 14px rgba(0,0,0,.4);
}
.sept-rdv-fab svg{ width: 20px; height: 20px; }
.sept-rdv-fab-label{ white-space: nowrap; }

@keyframes rdvPop{
  from{ transform: translateY(20px) scale(.85); opacity: 0; }
  to  { transform: translateY(0) scale(1); opacity: 1; }
}

/* Sur mobile : icône seule (texte caché), plus compact */
@media (max-width: 600px){
  .sept-rdv-fab{
    padding: 14px;
    border-radius: 50%;
    width: 56px; height: 56px;
  }
  .sept-rdv-fab .sept-rdv-fab-label{ display: none; }
  .sept-rdv-fab svg{ width: 24px; height: 24px; }
}

/* On masque le bouton sur les pages cockpit (privé) */
body.no-rdv-fab .sept-rdv-fab{ display: none; }

/* ---------------- Respect du reduced motion ---------------- */
@media (prefers-reduced-motion: reduce){
  .hero-bg, .hero-grid, .hero-meta-item .num, .timeline-day.active .num{
    animation: none !important;
    transition: none !important;
    transform: none !important;
  }
  .btn-primary::before{ display: none; }
}