:root{
  --blue:#2563EB;
  --black:#0D0D0D;
  --gray:#6B7280;
  --gray-light:#9CA3AF;
  --border-gray:#E5E7EB;
  --bg-alt:#F8F9FC;
  --bg-blue-pale:#EEF2FF;
  --bg-green-pale:#F0FDF4;
  --yellow:#F59E0B;
  --white:#FFFFFF;
  --radius:16px;
  --shadow:0 4px 24px rgba(0,0,0,0.06);
  --violet:#7F4AFF;
  --violet-light:#B090FF;
  --violet-pale:#D7C9FF;
  --violet-badge-bg:#EDE7FF;
  --violet-section-bg:#F6F3FF;
}
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  font-family:'Manrope',sans-serif;
  font-weight:400;
  color:var(--black);
  background:var(--white);
  line-height:1.6;
  letter-spacing:-0.01em;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
h1,h2,h3,h4{
  font-family:'Manrope',sans-serif;
  font-weight:800;
  line-height:1.15;
  letter-spacing:-0.03em;
}
a{text-decoration:none;color:inherit;}
ul{list-style:none;}
img{max-width:100%;display:block;}
button{font-family:inherit;}
.container{
  max-width:1180px;
  margin:0 auto;
  padding:0 24px;
}
section{padding:96px 0;}
.eyebrow{
  display:inline-block;
  font-size:13px;
  font-weight:500;
  letter-spacing:0.3px;
  color:var(--blue);
  background:rgba(37,99,235,0.08);
  padding:8px 18px;
  border-radius:999px;
  margin-bottom:24px;
}
.eyebrow.center{display:block;width:fit-content;margin:0 auto 16px;}
.section-title{
  font-size:clamp(28px,4vw,40px);
  text-align:center;
  margin-bottom:16px;
}
.section-sub{
  text-align:center;
  color:var(--gray);
  max-width:560px;
  margin:0 auto 56px;
  font-size:17px;
}
.btn{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:14px 28px;
  border-radius:12px;
  font-weight:500;
  font-size:15px;
  cursor:pointer;
  border:1.5px solid transparent;
  transition:transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
  font-family:'Manrope',sans-serif;
}
.btn-primary{
  background:var(--blue);
  color:#fff;
}
.btn-primary:hover{
  transform:translateY(-2px);
  box-shadow:0 8px 20px rgba(37,99,235,0.3);
}
.btn-outline{
  background:transparent;
  border-color:#E2E4EA;
  color:var(--black);
}
.btn-outline:hover{
  border-color:var(--blue);
  color:var(--blue);
}
.btn-outline-blue{
  background:transparent;
  border-color:var(--blue);
  color:var(--blue);
}
.btn-outline-blue:hover{
  background:var(--blue);
  color:#fff;
}
.btn-dark{
  background:var(--black);
  color:#fff;
}
.btn-dark:hover{
  transform:translateY(-2px);
  box-shadow:0 8px 20px rgba(0,0,0,0.25);
}
.btn-large{
  padding:16px 36px;
  font-size:16px;
}

/* NAVBAR — floating glassmorphic pill (Foxify style) */
.navbar{
  position:fixed;
  top:16px;
  left:50%;
  transform:translateX(-50%);
  width:min(1116px,92vw);
  z-index:1000;
  background:rgba(246,243,255,0.6);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border:1px solid rgba(255,255,255,0.7);
  border-radius:16px;
  box-shadow:0 8px 28px rgba(13,21,38,0.08);
  transition:background 0.25s ease, box-shadow 0.25s ease;
}
.navbar.scrolled{
  background:rgba(255,255,255,0.88);
  box-shadow:0 12px 36px rgba(13,21,38,0.12);
}
.navbar .container{max-width:100%;padding:0 12px 0 20px;}
.nav-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  height:64px;
}
.logo{
  font-family:'Manrope',sans-serif;
  font-weight:800;
  font-size:22px;
  letter-spacing:-0.03em;
}
.logo span{
  color:var(--violet);
  text-shadow:2px 2px 6px rgba(127,74,255,0.25);
}
.nav-links{
  display:flex;
  gap:32px;
  font-size:15px;
  font-weight:500;
  letter-spacing:-0.02em;
}
.nav-links a{
  color:var(--black);
  transition:color 0.2s;
  position:relative;
}
.nav-links a:hover{color:var(--violet);}
.nav-cta{display:flex;align-items:center;}
.nav-cta .btn{
  border-radius:999px;
  padding:12px 24px;
  background:radial-gradient(41.3% 114.84% at 50% 54.35%, var(--violet-light) 0%, var(--violet) 100%);
  border:1px solid var(--violet-pale);
  color:#fff;
}
.nav-cta .btn:hover{
  transform:translateY(-2px) scale(1.03);
  box-shadow:0 10px 24px rgba(127,74,255,0.32);
}
.burger{display:none;background:none;border:none;cursor:pointer;font-size:22px;color:var(--black);}

/* HERO */
.hero{
  position:relative;
  overflow:visible;
  min-height:100vh;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding-top:96px;
  padding-bottom:0;
  background:#FFFFFF;
}

/* HERO BACKGROUND BLOBS */
.hero-bg{
  position:absolute;
  inset:0;
  overflow:hidden;
  pointer-events:none;
  z-index:0;
}
.hero-blob{
  position:absolute;
  border-radius:50%;
  background:#D7C9FF;
  filter:blur(150px);
}
.hero-blob-bottom{
  width:1200px;height:600px;
  left:50%;top:58%;
  transform:translateX(-50%);
  opacity:0;
  animation:heroBlobFadeIn 1.5s ease 0.2s forwards;
}
.hero-blob-top-1{
  width:420px;height:420px;
  left:-140px;top:-160px;
  animation:heroBlobFloat1 30s ease-in-out infinite;
}
.hero-blob-top-2{
  width:420px;height:420px;
  right:-140px;top:-160px;
  animation:heroBlobFloat2 32s ease-in-out infinite;
}
@keyframes heroBlobFadeIn{to{opacity:0.85;}}
@keyframes heroBlobFloat1{
  0%{transform:translate(0,0) scale(1);}
  25%{transform:translate(60px,-50px) scale(1.15);}
  50%{transform:translate(110px,0) scale(1.3);}
  75%{transform:translate(60px,50px) scale(1.15);}
  100%{transform:translate(0,0) scale(1);}
}
@keyframes heroBlobFloat2{
  0%{transform:translate(0,0) scale(1);}
  25%{transform:translate(-60px,55px) scale(1.2);}
  50%{transform:translate(-110px,0) scale(1.35);}
  75%{transform:translate(-60px,-55px) scale(1.2);}
  100%{transform:translate(0,0) scale(1);}
}
@media (prefers-reduced-motion:reduce){
  .hero-blob-top-1, .hero-blob-top-2{animation:none;}
  .hero-blob-bottom{animation:heroBlobFadeIn 0.01s forwards;}
}

.hero-inner{position:relative;z-index:1;max-width:780px;margin:0 auto;}

/* Entrance animations (above-the-fold, run on load) */
@keyframes heroFadeUp{
  from{opacity:0;transform:translateY(30px);}
  to{opacity:1;transform:translateY(0);}
}
@keyframes heroFadeScale{
  from{opacity:0;transform:scale(0.92);}
  to{opacity:1;transform:scale(1);}
}
@media (prefers-reduced-motion:reduce){
  .hero-badge,.hero h1,.hero p.lead,.hero-actions,.hero .stats,.hero-mockup{animation:none !important;opacity:1;}
}

.hero-badge{
  animation:heroFadeScale 0.6s ease 0.4s both;
  background:#FFFFFF;
  color:#000000;
  border:1px solid rgba(215,201,255,0.7);
  box-shadow:0 4px 16px rgba(13,21,38,0.06);
}
.hero h1{
  position:relative;
  font-size:clamp(34px,6vw,58px);
  white-space:pre-line;
  margin-bottom:22px;
  animation:heroFadeUp 0.9s ease 0.6s both;
  background:linear-gradient(90deg, #7F4AFF 0%, #B090FF 20%, #7F4AFF 40%);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  color:transparent;
}
.hero p.lead{
  color:#505050;
  font-size:18px;
  max-width:560px;
  margin:0 auto 36px;
  animation:heroFadeUp 0.9s ease 0.8s both;
}
.hero-actions{
  display:flex;
  gap:16px;
  justify-content:center;
  flex-wrap:wrap;
  margin-bottom:56px;
  animation:heroFadeScale 0.8s ease 1s both;
}
.hero-actions .btn-primary{
  background:radial-gradient(41.3% 114.84% at 50% 54.35%, #B090FF 0%, #7F4AFF 100%);
  border:1px solid #D7C9FF;
  color:#fff;
}
.hero-actions .btn-primary:hover{
  transform:translateY(-2px) scale(1.04);
  box-shadow:0 10px 28px rgba(127,74,255,0.35);
}
.hero-actions .btn-outline{
  background:#E2E2E2;
  border:1px solid #D7C9FF;
  color:#000;
}
.hero-actions .btn-outline:hover{
  transform:translateY(-2px) scale(1.04);
  background:#D5D5D5;
  color:#000;
}
.hero .stats{
  display:flex;
  justify-content:center;
  gap:48px;
  flex-wrap:wrap;
  animation:heroFadeUp 0.9s ease 1.15s both;
}
.hero .stat{
  font-size:14px;
  font-weight:500;
  color:var(--gray);
  display:flex;
  align-items:center;
  gap:8px;
}
.hero .stat::before{
  content:"";
  width:6px;height:6px;
  border-radius:50%;
  background:#7F4AFF;
  display:inline-block;
}

/* HERO MOCKUP */
.hero-mockup{
  width:min(900px,90%);
  margin:56px auto -120px;
  position:relative;
  z-index:5;
  background:#fff;
  border-radius:12px;
  border:1px solid rgba(0,0,0,0.08);
  box-shadow:0 24px 80px rgba(0,0,0,0.12);
  overflow:hidden;
  animation:heroFadeUp 1s ease 1.3s both;
}
.mockup-bar{
  display:flex;
  align-items:center;
  gap:8px;
  padding:12px 16px;
  background:#F3F4F6;
  border-bottom:1px solid rgba(0,0,0,0.06);
}
.mockup-dot{
  width:11px;height:11px;
  border-radius:50%;
  display:inline-block;
}
.mockup-body{
  padding:24px 28px 32px;
  background:#fff;
}
.mockup-nav{
  display:flex;
  align-items:center;
  gap:16px;
  margin-bottom:28px;
}
.mockup-line{
  height:8px;
  border-radius:4px;
  background:#E5E7EB;
}
.mockup-line.w-20{width:20%;}
.mockup-line.w-40{width:40%;}
.mockup-line.w-60{width:60%;}
.mockup-line.w-70{width:70%;}
.mockup-line.tall{height:16px;background:var(--blue);opacity:0.85;}
.mockup-hero{
  display:flex;
  flex-direction:column;
  gap:14px;
  margin-bottom:32px;
}
.mockup-cards{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:16px;
}
.mockup-card{
  height:70px;
  border-radius:8px;
  background:var(--bg-blue-pale);
  border:1px solid #E0E7FF;
}

/* LOGOS CLIENTS */
.logos-section{
  background:#fff;
  padding:140px 0 32px;
  text-align:center;
}
.logos-label{
  color:var(--gray-light);
  font-size:0.85rem;
  text-transform:uppercase;
  letter-spacing:1px;
  margin-bottom:24px;
}
.logos-row{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:40px;
  flex-wrap:wrap;
}
.logo-item{
  font-weight:600;
  color:#9CA3AF;
  font-size:0.9rem;
  opacity:0.7;
}

/* ALT-BG SECTIONS — Foxify violet style (Problème, Réalisations, Processus, FAQ, Contact) */
.alt-bg{
  position:relative;
  overflow:hidden;
  background:var(--violet-section-bg);
}
.alt-bg::before{
  content:"";
  position:absolute;
  width:560px;height:560px;
  top:-220px;right:-160px;
  background:var(--violet-pale);
  filter:blur(150px);
  opacity:0.4;
  border-radius:50%;
  pointer-events:none;
  z-index:0;
}
.alt-bg .container{position:relative;z-index:1;}

.alt-bg .eyebrow{
  background:var(--violet-badge-bg);
  color:var(--violet);
}
.alt-bg .section-title{
  background:linear-gradient(90deg, var(--violet) 0%, var(--violet-light) 20%, var(--violet) 40%);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  color:transparent;
}
.alt-bg .icon-circle{background:var(--violet-badge-bg);}
.alt-bg .card{border-color:rgba(215,201,255,0.6);}
.alt-bg .card:hover{box-shadow:0 12px 32px rgba(127,74,255,0.14);}
.alt-bg .transition-line span{color:var(--violet);}

.alt-bg .badge{background:var(--violet-badge-bg);color:var(--violet);}
.alt-bg .project-card{border-color:rgba(215,201,255,0.5);}
.alt-bg .project-link{color:var(--violet);}

.alt-bg .process-grid::before{border-top-color:var(--violet-pale);}
.alt-bg .process-step{border-color:rgba(215,201,255,0.5);}
.alt-bg .process-step .num-bg{color:var(--violet-badge-bg);}
.alt-bg .step-icon{background:linear-gradient(135deg,var(--violet-light),var(--violet));}


.alt-bg .form-card{border-color:rgba(215,201,255,0.5);}
.alt-bg .field input:focus,
.alt-bg .field select:focus,
.alt-bg .field textarea:focus{border-color:var(--violet);}
.alt-bg .confirm-msg{background:var(--violet-badge-bg);color:var(--violet);}
.alt-bg .info-card{background:var(--violet-badge-bg);}

.alt-bg .btn-primary{
  background:radial-gradient(41.3% 114.84% at 50% 54.35%, var(--violet-light) 0%, var(--violet) 100%);
  border:1px solid var(--violet-pale);
}
.alt-bg .btn-primary:hover{
  box-shadow:0 10px 28px rgba(127,74,255,0.3);
}

.grid-3{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:28px;
}

.card{
  background:#fff;
  border:1px solid var(--border-gray);
  border-radius:16px;
  padding:36px 28px;
  box-shadow:0 2px 12px rgba(0,0,0,0.04);
  transition:transform 0.3s ease, box-shadow 0.3s ease;
}
.card:hover{
  transform:translateY(-4px);
  box-shadow:0 12px 32px rgba(0,0,0,0.08);
}
.icon-circle{
  width:52px;height:52px;
  border-radius:50%;
  background:var(--bg-blue-pale);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:24px;
  margin-bottom:18px;
}
.card h3{
  font-size:19px;
  margin-bottom:10px;
}
.card .title-bar{
  display:block;
  width:32px;
  height:3px;
  background:var(--blue);
  border-radius:2px;
  margin-bottom:12px;
}
.card p{
  color:var(--gray);
  font-size:15px;
}

.transition-line{
  text-align:center;
  font-family:'Manrope',sans-serif;
  font-weight:700;
  font-size:22px;
  max-width:680px;
  margin:56px auto 0;
  color:var(--black);
}
.transition-line span{color:var(--blue);}

/* PORTFOLIO */
.portfolio-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:24px;
}
.project-card{
  background:#fff;
  border-radius:var(--radius);
  overflow:hidden;
  box-shadow:var(--shadow);
  border:1px solid #F0F1F5;
  transition:transform 0.25s ease, box-shadow 0.25s ease;
}
.project-card:hover{
  transform:translateY(-6px);
  box-shadow:0 12px 32px rgba(0,0,0,0.1);
}
.project-thumb{
  height:180px;
  border-radius:12px 12px 0 0;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#fff;
  font-size:15px;
  font-weight:600;
  text-align:center;
  padding:0 16px;
}
.thumb-orange{background:linear-gradient(135deg,#FFA500,#FF6B00);}
.thumb-pink{background:linear-gradient(135deg,#FF80C0,#E91E8C);}
.thumb-gold{background:linear-gradient(135deg,#C9A84C,#8B6340);}
.thumb-violet{background:linear-gradient(135deg,#6C3CE1,#4B22B0);}
.project-body{padding:20px;}
.project-body h3{font-size:16px;margin-bottom:4px;}
.project-body .sector{
  color:var(--gray);
  font-size:13px;
  margin-bottom:12px;
}
.badge{
  display:inline-block;
  font-size:11px;
  font-weight:500;
  background:rgba(37,99,235,0.08);
  color:var(--blue);
  padding:4px 10px;
  border-radius:999px;
  margin-bottom:14px;
}
.project-link{
  font-size:14px;
  font-weight:500;
  color:var(--blue);
}
.portfolio-cta{
  text-align:center;
  margin-top:56px;
}
.portfolio-cta p{
  color:var(--gray);
  margin-bottom:20px;
  font-size:16px;
}

/* FEATURES ZIGZAG */
.features-zigzag{padding:0;}
.zigzag-block{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:80px;
  align-items:center;
  padding:80px 5%;
}
.zigzag-text h3{font-size:28px;margin-bottom:16px;}
.zigzag-text p{color:var(--gray);font-size:16px;}
.zigzag-visual{
  border-radius:16px;
  padding:32px;
  min-height:280px;
  display:flex;
  align-items:center;
  justify-content:center;
}
.visual-plain{background:none;padding:0;min-height:auto;}

/* CASE STUDY — bloc empilé pour laisser toute la place au comparateur */
.zigzag-stack{
  display:flex;
  flex-direction:column;
  gap:32px;
  align-items:center;
  text-align:center;
}
.zigzag-stack .zigzag-visual{width:100%;}
.zigzag-text.center{max-width:560px;align-self:center;}
.case-study-tag{
  display:inline-block;
  font-size:12px;
  font-weight:700;
  letter-spacing:0.04em;
  text-transform:uppercase;
  color:var(--violet);
  background:var(--violet-badge-bg);
  padding:6px 16px;
  border-radius:999px;
  margin-bottom:14px;
}
/* COMPARE SLIDER — avant / après (drag), vraies captures pleine page */
.compare-slider{
  position:relative;
  width:100%;
  max-width:640px;
  aspect-ratio:1460/4425;
  margin:0 auto;
  border-radius:16px;
  overflow:hidden;
  box-shadow:0 20px 56px rgba(13,21,38,0.14);
  cursor:ew-resize;
  user-select:none;
  touch-action:pan-y;
  background:#fff;
}
.compare-pane{
  position:absolute;
  inset:0;
  display:flex;
  flex-direction:column;
}
.compare-after{background:#fff;}
.compare-after img{width:100%;height:auto;display:block;}
.compare-before{
  width:50%;
  overflow:hidden;
  background:#fff;
}
.compare-before-inner{
  position:absolute;
  top:0;left:0;
  height:100%;
}
.compare-before-inner img{width:100%;height:auto;display:block;}

.compare-before{transition:none;}
.compare-handle{
  position:absolute;
  top:0;bottom:0;
  width:52px;
  left:calc(50% - 26px);
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:5;
  cursor:ew-resize;
  transition:none;
}
.compare-slider.compare-animating .compare-before{transition:width 2.4s cubic-bezier(.4,0,.2,1);}
.compare-slider.compare-animating .compare-handle{transition:left 2.4s cubic-bezier(.4,0,.2,1);}
.compare-handle::before{
  content:"";
  position:absolute;
  top:0;bottom:0;left:50%;
  width:3px;
  background:#fff;
  transform:translateX(-50%);
  box-shadow:0 0 0 1px rgba(0,0,0,0.1);
}
.compare-handle-grip{
  position:relative;
  width:52px;height:52px;
  border-radius:50%;
  background:var(--violet);
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:20px;
  font-weight:700;
  box-shadow:0 6px 20px rgba(127,74,255,0.5), 0 0 0 5px rgba(255,255,255,0.95);
  animation:handlePulse 2.2s ease-in-out infinite;
}
@keyframes handlePulse{
  0%,100%{box-shadow:0 6px 20px rgba(127,74,255,0.5), 0 0 0 5px rgba(255,255,255,0.95);transform:scale(1);}
  50%{box-shadow:0 8px 26px rgba(127,74,255,0.65), 0 0 0 8px rgba(255,255,255,0.95);transform:scale(1.06);}
}
@media (prefers-reduced-motion:reduce){
  .compare-handle-grip{animation:none;}
  .compare-slider.compare-animating .compare-before,
  .compare-slider.compare-animating .compare-handle{transition:none;}
}
.compare-tag{
  position:absolute;
  top:12px;
  font-size:10.5px;
  font-weight:700;
  letter-spacing:0.04em;
  text-transform:uppercase;
  padding:5px 12px;
  border-radius:999px;
  z-index:4;
  color:#fff;
}
.tag-before{left:12px;background:rgba(37,99,235,0.85);}
.tag-after{right:12px;background:var(--violet);}

/* PROCESS */
.process-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:24px;
  position:relative;
}
.process-grid::before{
  content:"";
  position:absolute;
  top:56px;
  left:60px;
  right:60px;
  border-top:2px dashed #BFDBFE;
  z-index:0;
}
.process-step{
  position:relative;
  z-index:1;
  text-align:left;
  padding:28px 24px;
  background:#fff;
  border-radius:var(--radius);
  border:1px solid #F0F1F5;
  box-shadow:var(--shadow);
  overflow:hidden;
}
.process-step .num-bg{
  position:absolute;
  top:8px;
  right:16px;
  font-family:'Manrope',sans-serif;
  font-size:3.5rem;
  font-weight:800;
  color:var(--bg-blue-pale);
  line-height:1;
  z-index:0;
}
.step-icon{
  position:relative;
  z-index:1;
  width:40px;height:40px;
  border-radius:50%;
  background:var(--blue);
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:18px;
  margin-bottom:16px;
}
.process-step h3{position:relative;z-index:1;font-size:17px;margin-bottom:8px;}
.process-step p{position:relative;z-index:1;color:var(--gray);font-size:14px;}

/* PRICE CONFIGURATOR — fond blanc, tarifs réels (Digily_Devis_Bannieres_V2.xlsx) */
.price-config{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:40px;
  align-items:start;
  margin-top:8px;
}
.config-block{margin-bottom:32px;}
.config-block:last-child{margin-bottom:0;}
.config-block h4{
  font-size:15px;
  font-weight:700;
  margin-bottom:12px;
}

/* Sliding pill toggle (choix unique) */
.toggle-group{
  position:relative;
  display:flex;
  background:#F3F1FA;
  border:1px solid var(--border-gray);
  border-radius:999px;
  padding:4px;
  gap:4px;
}
.toggle-highlight{
  position:absolute;
  top:4px;bottom:4px;left:4px;
  border-radius:999px;
  background:radial-gradient(41.3% 114.84% at 50% 54.35%, var(--violet-light) 0%, var(--violet) 100%);
  box-shadow:0 4px 14px rgba(127,74,255,0.3);
  transition:left 0.35s cubic-bezier(.4,0,.2,1), width 0.35s cubic-bezier(.4,0,.2,1);
  z-index:0;
}
.toggle-btn{
  position:relative;
  z-index:1;
  flex:1;
  border:none;
  background:none;
  padding:12px 16px;
  font-family:'Manrope',sans-serif;
  font-size:14px;
  font-weight:600;
  color:var(--gray);
  cursor:pointer;
  border-radius:999px;
  white-space:nowrap;
  transition:color 0.25s ease;
}
.toggle-btn.active{color:#fff;}

/* Options multi-sélection */
.option-list{display:flex;flex-direction:column;gap:10px;}
.option-btn{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  width:100%;
  padding:13px 18px;
  background:#fff;
  border:1.5px solid var(--border-gray);
  border-radius:12px;
  font-family:'Manrope',sans-serif;
  font-size:14.5px;
  font-weight:500;
  color:var(--black);
  cursor:pointer;
  transition:border-color 0.2s ease, background 0.2s ease;
  text-align:left;
}
.option-btn em{
  font-style:normal;
  font-weight:700;
  color:var(--gray);
  flex-shrink:0;
}
.option-btn.active{
  border-color:var(--violet-pale);
  background:var(--violet-section-bg);
}
.option-btn.active em{color:var(--violet);}

/* Programme Bannières */
.banner-block{
  background:var(--violet-section-bg);
  border:1px solid var(--violet-pale);
  border-radius:16px;
  padding:24px;
}
.banner-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  margin-bottom:10px;
}
.banner-head h4{margin:0;font-size:16px;}
.banner-desc{
  font-size:13.5px;
  color:var(--gray);
  line-height:1.6;
  margin-bottom:0;
}
.banner-switch{
  position:relative;
  display:inline-block;
  width:46px;height:26px;
  flex-shrink:0;
}
.banner-switch input{opacity:0;width:0;height:0;position:absolute;}
.banner-slider{
  position:absolute;inset:0;
  background:#D8D4E8;
  border-radius:999px;
  cursor:pointer;
  transition:background 0.25s ease;
}
.banner-slider::before{
  content:"";
  position:absolute;
  width:20px;height:20px;
  left:3px;top:3px;
  background:#fff;
  border-radius:50%;
  box-shadow:0 2px 6px rgba(0,0,0,0.15);
  transition:transform 0.25s ease;
}
.banner-switch input:checked + .banner-slider{background:var(--violet);}
.banner-switch input:checked + .banner-slider::before{transform:translateX(20px);}

.banner-duration{margin-top:18px;}
.mini-label{
  display:block;
  font-size:12px;
  font-weight:600;
  color:var(--gray);
  margin-bottom:10px;
  text-transform:uppercase;
  letter-spacing:0.04em;
}
.duration-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:8px;
}
.duration-btn{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:2px;
  padding:10px 6px;
  background:#fff;
  border:1.5px solid var(--violet-pale);
  border-radius:10px;
  font-family:'Manrope',sans-serif;
  font-size:12.5px;
  font-weight:600;
  color:var(--black);
  cursor:pointer;
  transition:all 0.2s ease;
}
.duration-btn em{font-style:normal;color:var(--violet);font-weight:700;font-size:12px;}
.duration-btn.active{
  background:radial-gradient(41.3% 114.84% at 50% 54.35%, var(--violet-light) 0%, var(--violet) 100%);
  border-color:var(--violet);
  color:#fff;
}
.duration-btn.active em{color:#fff;}

/* Résumé prix */
.price-summary{
  background:#fff;
  border:1px solid var(--border-gray);
  border-radius:16px;
  padding:32px;
  text-align:center;
  box-shadow:0 4px 24px rgba(13,21,38,0.05);
}
.price-line{
  display:flex;
  justify-content:space-between;
  align-items:center;
  background:var(--violet-section-bg);
  border-radius:10px;
  padding:10px 16px;
  margin-bottom:18px;
  font-size:13.5px;
  font-weight:600;
  color:var(--violet);
}
.price-main{
  display:flex;
  align-items:baseline;
  justify-content:center;
  gap:12px;
  margin-bottom:6px;
}
.price-old{
  font-size:20px;
  color:var(--gray-light);
  text-decoration:line-through;
}
.price-now{
  font-family:'Manrope',sans-serif;
  font-weight:800;
  font-size:3rem;
  color:var(--black);
}
.price-note{
  font-size:13px;
  color:var(--gray);
  margin-bottom:20px;
}
.price-summary .btn{width:100%;justify-content:center;margin-bottom:14px;}
.price-hint{font-size:12px;color:var(--gray-light);}

/* FAQ — cartes à défilement horizontal automatique */
.faq-scroller{
  width:100%;
  overflow:hidden;
  position:relative;
  margin-top:28px;
  -webkit-mask-image:linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%);
  mask-image:linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%);
}
.faq-scroller + .faq-scroller{margin-top:20px;}
.faq-track{
  display:flex;
  width:max-content;
}
.faq-track-group{
  display:flex;
  gap:20px;
  padding:6px 10px;
  flex-shrink:0;
}
.faq-track-left{animation:faqScrollLeft 34s linear infinite;}
.faq-track-right{animation:faqScrollRight 40s linear infinite;}
.faq-scroller:hover .faq-track{animation-play-state:paused;}
@keyframes faqScrollLeft{
  from{transform:translateX(0);}
  to{transform:translateX(-50%);}
}
@keyframes faqScrollRight{
  from{transform:translateX(-50%);}
  to{transform:translateX(0);}
}
@media (prefers-reduced-motion:reduce){
  .faq-track{animation:none;}
}
.faq-card{
  background:#fff;
  border-radius:16px;
  box-shadow:0 10px 28px rgba(13,21,38,0.08);
  padding:26px;
  width:340px;
  flex-shrink:0;
}
.faq-card h3{
  font-family:'Manrope',sans-serif;
  font-weight:700;
  font-size:16.5px;
  letter-spacing:-0.02em;
  color:var(--black);
  margin-bottom:10px;
}
.faq-card p{
  font-size:14px;
  color:var(--gray);
  line-height:1.6;
}

/* TESTIMONIALS */
.rating-badge{
  display:block;
  width:fit-content;
  margin:0 auto 24px;
  background:#FEF3C7;
  color:#92400E;
  padding:8px 18px;
  border-radius:999px;
  font-size:13.5px;
  font-weight:600;
  text-align:center;
}
.testi-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:28px;
}
.testi-card{
  background:#fff;
  border-radius:var(--radius);
  padding:30px;
  border:1px solid #F0F1F5;
  box-shadow:var(--shadow);
  transition:transform 0.25s ease, box-shadow 0.25s ease;
}
.testi-card:hover{
  transform:translateY(-2px);
  box-shadow:0 12px 32px rgba(0,0,0,0.08);
}
.stars{color:var(--yellow);font-size:15px;margin-bottom:14px;}
.testi-card p.quote{
  color:var(--black);
  font-size:15px;
  margin-bottom:22px;
}
.testi-author{
  display:flex;
  align-items:center;
  gap:12px;
}
.avatar{
  width:42px;height:42px;
  border-radius:50%;
  background:var(--blue);
  color:#fff;
  font-family:'Manrope',sans-serif;
  font-weight:700;
  font-size:14px;
  display:flex;
  align-items:center;
  justify-content:center;
}
.testi-author .name{font-weight:500;font-size:14.5px;}
.testi-author .sector{color:var(--gray);font-size:13px;}

/* CTA FINAL */
.cta-final{padding:0 0 96px;}
.cta-box{
  background:linear-gradient(135deg, rgba(134,239,172,0.2), rgba(167,139,250,0.2));
  border:1px solid rgba(255,255,255,0.8);
  border-radius:24px;
  padding:64px 48px;
  margin:0 5%;
  text-align:center;
  backdrop-filter:blur(8px);
}
.cta-box h2{
  font-size:clamp(26px,3.5vw,36px);
  margin-bottom:16px;
}
.cta-box p{color:var(--gray);margin-bottom:28px;font-size:16px;}
.cta-sub{margin-top:20px;font-size:13.5px;color:var(--gray);}

/* CONTACT */
.contact-grid{
  display:grid;
  grid-template-columns:1.4fr 1fr;
  gap:48px;
  align-items:start;
}
.form-card{
  background:#fff;
  border-radius:16px;
  padding:40px;
  box-shadow:0 4px 32px rgba(0,0,0,0.06);
  border:1px solid #F0F1F5;
}
.form-row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px;
  margin-bottom:16px;
}
.field{margin-bottom:16px;}
.field label{
  display:block;
  font-size:13.5px;
  font-weight:500;
  margin-bottom:6px;
}
.field input,
.field select,
.field textarea{
  width:100%;
  padding:13px 14px;
  border:1.5px solid #E2E4EA;
  border-radius:10px;
  font-family:'Manrope',sans-serif;
  font-size:14.5px;
  color:var(--black);
  background:#fff;
  transition:border-color 0.2s;
}
.field input:focus,
.field select:focus,
.field textarea:focus{
  outline:none;
  border-color:var(--blue);
}
.field textarea{resize:vertical;min-height:110px;}
.form-card .btn{width:100%;justify-content:center;margin-top:8px;}
.confirm-msg{
  display:none;
  margin-top:18px;
  background:rgba(37,99,235,0.08);
  color:var(--blue);
  padding:14px 18px;
  border-radius:10px;
  font-size:14.5px;
  font-weight:500;
}
.confirm-msg.show{display:block;}
.info-card{
  background:var(--bg-alt);
  border-radius:var(--radius);
  padding:32px;
}
.info-item{
  display:flex;
  gap:14px;
  align-items:flex-start;
  margin-bottom:22px;
}
.info-item:last-child{margin-bottom:0;}
.info-item .ic{font-size:20px;}
.info-item h4{font-size:15px;margin-bottom:4px;}
.info-item p{color:var(--gray);font-size:14px;}

/* FOOTER */
footer{
  background:var(--black);
  color:#fff;
  padding:56px 0 28px;
}
.footer-inner{
  display:flex;
  justify-content:space-between;
  align-items:center;
  flex-wrap:wrap;
  gap:24px;
  padding-bottom:28px;
  border-bottom:1px solid rgba(255,255,255,0.1);
}
footer .logo{color:#fff;}
footer .logo span{color:var(--blue);}
.footer-links{
  display:flex;
  gap:28px;
  flex-wrap:wrap;
  font-size:14px;
}
.footer-links a{color:rgba(255,255,255,0.7);transition:color 0.2s;}
.footer-links a:hover{color:#fff;}
.footer-legal{
  padding-top:20px;
  font-size:12.5px;
  color:rgba(255,255,255,0.4);
}
.footer-legal a{color:rgba(255,255,255,0.4);transition:color 0.2s;}
.footer-legal a:hover{color:rgba(255,255,255,0.7);}
.footer-bottom{
  display:flex;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:10px;
  padding-top:10px;
  font-size:13px;
  color:rgba(255,255,255,0.5);
}

/* REVEAL ANIMATIONS */
.reveal{
  opacity:0;
  transform:translateY(32px);
  transition:opacity 0.6s ease, transform 0.6s ease;
}
.reveal.visible{
  opacity:1;
  transform:translateY(0);
}
.grid-3 .reveal:nth-child(1),
.portfolio-grid .reveal:nth-child(1),
.process-grid .reveal:nth-child(1),
.testi-grid .reveal:nth-child(1){transition-delay:0s;}
.grid-3 .reveal:nth-child(2),
.portfolio-grid .reveal:nth-child(2),
.process-grid .reveal:nth-child(2),
.testi-grid .reveal:nth-child(2){transition-delay:0.1s;}
.grid-3 .reveal:nth-child(3),
.portfolio-grid .reveal:nth-child(3),
.process-grid .reveal:nth-child(3),
.testi-grid .reveal:nth-child(3){transition-delay:0.2s;}
.portfolio-grid .reveal:nth-child(4),
.process-grid .reveal:nth-child(4){transition-delay:0.3s;}

@media (max-width:900px){
  .grid-3,
  .portfolio-grid,
  .process-grid,
  .testi-grid{
    grid-template-columns:repeat(2,1fr);
  }
  .contact-grid{grid-template-columns:1fr;}
  .price-config{grid-template-columns:1fr;}
  .zigzag-block{grid-template-columns:1fr;gap:40px;padding:56px 5%;}
  .process-grid::before{display:none;}
}

@media (max-width:680px){
  section{padding:64px 0;}
  .navbar{top:12px;}
  .navbar .container{padding:0 16px;}
  .nav-links{
    position:absolute;
    top:calc(100% + 8px);left:0;right:0;
    background:rgba(255,255,255,0.95);
    backdrop-filter:blur(14px);
    -webkit-backdrop-filter:blur(14px);
    flex-direction:column;
    padding:20px 24px;
    gap:18px;
    border:1px solid rgba(215,201,255,0.5);
    border-radius:16px;
    box-shadow:0 12px 32px rgba(13,21,38,0.12);
    display:none;
  }
  .nav-links.open{display:flex;}
  .nav-cta{display:none;}
  .burger{display:block;}
  .grid-3,
  .portfolio-grid,
  .process-grid,
  .testi-grid{
    grid-template-columns:1fr;
  }
  .form-row{grid-template-columns:1fr;}
  .stats{gap:20px 32px;}
  .hero-mockup{margin:40px auto -64px;}
  .logos-section{padding-top:88px;}
  .logos-row{gap:20px;}
  .cta-box{padding:40px 24px;margin:0 16px;}
  .duration-grid{grid-template-columns:repeat(2,1fr);}
  .price-now{font-size:2.4rem;}
  .toggle-btn{font-size:12.5px;padding:12px 8px;}
  .faq-card{width:260px;padding:20px;}
  .compare-slider{max-width:320px;}
}