/* ========= Theme & base ========= */
:root {
  --bg: #0f1220; --bg2:#12162a; --text:#eaf0ff; --muted:#a9b4d0;
  --accent:#6aa0ff; --accent2:#8a7dff; --card:#171b33; --border:#263051;
  --good:#31d19d; --bad:#ff6b6b;
  --title-name:#8fb0ff; /* non-blanc pour le nom, partout */
}
:root[data-theme="light"] {
  --bg:#f7f8ff; --bg2:#ffffff; --text:#0f1220; --muted:#3d4562;
  --accent:#3867ff; --accent2:#8b7dff; --card:#ffffff; --border:#dfe6ff;
  --title-name:#1e2a4a;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Helvetica,Arial;
  color:var(--text);
  background: radial-gradient(1200px 800px at 75% -10%, rgba(138,125,255,.15), transparent 60%), var(--bg);
  line-height:1.6;
  overflow-x:hidden; /* fix mobile overflow */
}
img{max-width:100%;height:auto;display:block}
a{color:var(--accent);text-decoration:none}
.container{max-width:1100px;margin:0 auto;padding:0 20px}

.section{padding:80px 0}
.section.alt{background:var(--bg2)}
.section-title{font-size:clamp(24px,4vw,36px);line-height:1.2;margin:0 0 24px}
.caption{color:var(--muted);font-size:13px}
.mono{font-variant-numeric:tabular-nums}

/* ========= Header ========= */
.site-header{position:sticky;top:0;z-index:40;background:rgba(15,18,32,.6);backdrop-filter:blur(8px);border-bottom:1px solid rgba(38,48,81,.35)}
:root[data-theme="light"] .site-header{background:rgba(255,255,255,.75);border-bottom-color:#e9eeff}
.header-inner{display:flex;align-items:center;justify-content:space-between;height:64px}
.brand{font-weight:800;font-size:20px;color:#fff}
:root[data-theme="light"] .brand{color:#131425}
.brand span{color:var(--accent)}
.nav__toggle{display:none;background:none;border:1px solid var(--border);color:var(--text);padding:6px 10px;border-radius:8px}
.nav__list{display:flex;gap:18px;list-style:none;margin:0;padding:0;align-items:center}
.nav__list a{color:var(--text)}
.nav__list .active{text-decoration:underline;text-underline-offset:5px}
.btn{display:inline-block;padding:12px 18px;border-radius:12px;background:linear-gradient(90deg,var(--accent),var(--accent2));color:#0b0e1a;font-weight:700;border:none}
.btn--ghost{background:transparent;border:1px solid var(--border);color:var(--text)}
.btn--small{padding:8px 12px;font-size:14px}
.btn--block{display:block;text-align:center}
.icon-btn{display:inline-grid;place-items:center;border:1px solid var(--border);border-radius:12px;width:40px;height:40px}

/* ========= Hero ========= */
.hero{padding:96px 0 64px; position:relative}
.grid-2{display:grid;grid-template-columns:1.3fr 1fr;gap:40px;align-items:center}
.lead{color:var(--muted);max-width:62ch}
.cta-group{display:flex;gap:12px;margin-top:16px}
.hero__badges{margin:18px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:10px;list-style:none}
.hero__badges li{font-size:12px;color:var(--muted);border:1px solid var(--border);padding:6px 10px;border-radius:999px}
.contact-snippet{margin-top:14px;color:var(--muted);display:flex;gap:10px;align-items:center;flex-wrap:wrap}

/* ====== Title (petit + sans "laser") ====== */
.title-xl{
  font-size:clamp(18px,3vw,28px);
  line-height:1.08;
  margin:0;
  position:relative;
}
.title-xl .sub{
  display:block;
  font-weight:800;
  letter-spacing:.4px;
  position:relative;
  color:var(--title-name) !important;
}
.title-xl .role{
  display:block;
  background-image:linear-gradient(90deg,var(--accent),var(--accent2));
  -webkit-background-clip:text;background-clip:text;color:transparent;
  opacity:0; transform:translateY(6px);
  transition:opacity .4s ease, transform .4s ease;
  font-size:.88em;
}
.title-xl .role.is-in{ opacity:1; transform:translateY(0) } /* simple fade/slide, no sweep */

/* Supprimer tout "laser" résiduel (shine + underline) */
.title-xl .sub::before, .title-xl .sub::after{ content:none !important; }

/* ========= WOW: Aurora (index) ========= */
.aurora{
  position:absolute; left:-10%; right:-10%; top:-80px; height:360px;
  z-index:0; pointer-events:none;
  opacity:.9; filter:blur(34px) saturate(125%);
  mix-blend-mode:screen;
  background:
    radial-gradient(700px 260px at 12% 35%, rgba(106,160,255,.45), transparent 60%),
    radial-gradient(600px 220px at 88% 20%, rgba(138,125,255,.40), transparent 60%),
    radial-gradient(620px 280px at 45% 120%, rgba(49,209,157,.35), transparent 60%);
  animation:auroraMove 14s ease-in-out infinite alternate;
}
:root[data-theme="light"] .aurora{ mix-blend-mode:multiply; opacity:.7 }
.aurora::after{
  content:""; position:absolute; inset:0; filter:blur(.5px);
  background:
    radial-gradient(4px 4px at 18% 30%, rgba(255,255,255,.6), transparent 45%),
    radial-gradient(3px 3px at 40% 70%, rgba(255,255,255,.45), transparent 45%),
    radial-gradient(3px 3px at 76% 22%, rgba(255,255,255,.5), transparent 45%),
    radial-gradient(4px 4px at 62% 58%, rgba(255,255,255,.5), transparent 45%);
  animation:twinkle 4.2s ease-in-out infinite alternate;
}
@keyframes auroraMove{ 0%{ transform:translateY(-6px) rotate(-1deg) } 50%{ transform:translateY(6px) rotate(1deg) } 100%{ transform:translateY(0) rotate(0deg) } }
@keyframes twinkle{ 0%{ opacity:.4; transform:translateY(-2px) } 100%{ opacity:.9; transform:translateY(2px) } }

/* ========= Neon frame (toutes pages) ========= */
.frame{
  --glowStrength: .4;
  border-radius:24px;
  border:1px solid var(--border);
  overflow:hidden;
  background:linear-gradient(180deg,#0a0e1d,#0e1330);
  box-shadow:
    0 0 0 1px var(--border),
    0 0 calc(60px * var(--glowStrength)) rgba(106,160,255,.22) inset,
    0 0 calc(40px * var(--glowStrength)) rgba(138,125,255,.20) inset;
  position:relative;
  isolation:isolate;
}
:root[data-theme="light"] .frame{ background:linear-gradient(180deg,#f7f8ff,#fbfbff) }
.frame::before, .frame::after{
  content:""; position:absolute; inset:-20% -10%; filter:blur(24px); opacity:.75;
  animation:fieldDrift 10s ease-in-out infinite alternate;
}
.frame::before{
  background:
    radial-gradient(260px 260px at 20% 30%, rgba(106,160,255,.55), transparent 60%),
    radial-gradient(280px 280px at 80% 60%, rgba(138,125,255,.45), transparent 60%),
    radial-gradient(220px 220px at 50% 90%, rgba(49,209,157,.45), transparent 60%);
}
.frame::after{
  background:
    radial-gradient(300px 300px at 70% 10%, rgba(106,160,255,.35), transparent 60%),
    radial-gradient(240px 240px at 30% 80%, rgba(255,255,255,.12), transparent 60%);
  animation-delay:-5s;
  mix-blend-mode:screen;
}
@keyframes fieldDrift{
  0%{ transform:translateY(-10px) scale(1) }
  50%{ transform:translateY(6px) scale(1.03) }
  100%{ transform:translateY(0) scale(1.01) }
}
.frame-inner{
  position:relative; aspect-ratio:4/3; transform-style:preserve-3d;
  transform: rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateZ(0);
  transition: transform .08s linear;
  background-image:
    radial-gradient(circle at center, rgba(106,160,255,.30), transparent 60%),
    radial-gradient(circle at center, rgba(138,125,255,.26), transparent 60%),
    radial-gradient(circle at center, rgba(49,209,157,.22), transparent 60%);
  background-size: 260px 260px, 220px 220px, 200px 200px;
  background-position: 18% 30%, 82% 62%, 52% 85%;
  animation:orbFloat 16s ease-in-out infinite;
}
@keyframes orbFloat{
  0%  { background-position: 18% 30%, 82% 62%, 52% 85% }
  50% { background-position: 28% 24%, 72% 72%, 40% 78% }
  100%{ background-position: 12% 40%, 88% 55%, 56% 90% }
}
.frame-inner::before{
  content:""; position:absolute; inset:-25%; filter:blur(28px);
  background:conic-gradient(from 0deg at 50% 50%,
    rgba(106,160,255,.00) 0deg, rgba(106,160,255,.28) 70deg,
    rgba(255,255,255,0) 120deg, rgba(138,125,255,.26) 200deg,
    rgba(49,209,157,.22) 280deg, rgba(255,255,255,0) 360deg);
  mix-blend-mode:screen; opacity:.9;
  animation:spin 10s linear infinite;
}
@keyframes spin { to{ transform:rotate(360deg) } }
.frame-inner::after{
  content:""; position:absolute; left:-20%; right:-20%; top:-40%;
  height:40%; transform:rotate(6deg);
  background:linear-gradient(to bottom, rgba(255,255,255,.12), transparent 70%);
  filter:blur(18px); opacity:.6; mix-blend-mode:screen;
  animation:sweep 6.5s ease-in-out infinite;
}
@keyframes sweep{
  0%{ top:-40%; opacity:.0 }
  20%{ opacity:.6 }
  50%{ top:10%; opacity:.2 }
  100%{ top:80%; opacity:.0 }
}
.frame:hover{ --glowStrength:.65 }

.fps-tag{ position:absolute; top:10px; right:10px; font-size:11px; color:#7ee8b5; background:#0b141f; border:1px solid #173c33; padding:4px 6px; border-radius:8px }
:root[data-theme="light"] .fps-tag{ background:#ebfff6; border-color:#a8e8d1; color:#136b45 }

/* ========= Cards / Projects / etc. ========= */
.cards{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.card{background:var(--card);border:1px solid var(--border);border-radius:16px;padding:18px}
.card h3{margin:0 0 8px}
.list{margin:10px 0 0;padding-left:18px;color:var(--muted)}
.cards--pricing{grid-template-columns:repeat(3,1fr)}
.pricing .price{font-size:28px;font-weight:800;margin:6px 0 12px}
.pricing.featured{outline:2px solid var(--accent);box-shadow:0 6px 30px rgba(106,160,255,.2)}

.section-head{display:flex;align-items:end;justify-content:space-between;gap:20px;margin-bottom:18px}
.filters{display:flex;gap:10px;flex-wrap:wrap}
.filter{border:1px solid var(--border);background:transparent;color:var(--text);padding:6px 10px;border-radius:999px;cursor:pointer}
.filter.is-active{background:linear-gradient(90deg,var(--accent),var(--accent2));color:#0b0e1a;border:none}
.grid-projects{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.project-card{display:flex;flex-direction:column;border:1px solid var(--border);border-radius:14px;overflow:hidden;background:var(--card)}
.project-meta{padding:12px}
.preview{position:relative;aspect-ratio:16/9;overflow:hidden}
.preview.landing::before, .preview.landing::after{content:"";position:absolute;inset:0;transform:skewX(-12deg);background:linear-gradient(to right, transparent, rgba(255,255,255,.06), transparent 60%);animation:slide 4s linear infinite;opacity:.8}
.preview.landing::after{animation-duration:6s;animation-delay:-2s;opacity:.5}
@keyframes slide{0%{background-position:-200% 0}100%{background-position:200% 0}}
.preview.shop .btn-add{position:absolute;left:0;right:0;bottom:-40px;margin:0 auto;width:70%;text-align:center;background:linear-gradient(90deg,var(--accent),var(--accent2));color:#0b0e1a;border-radius:12px;padding:8px 10px;font-weight:700;transition:transform .35s ease, bottom .35s ease}
.preview.shop:hover .btn-add{bottom:10px}
.preview.shop .thumb{position:absolute;inset:12px;border-radius:10px;border:1px dashed var(--border)}
.preview.gallery .rail{position:absolute;left:0;right:0;top:35%;height:40%;display:flex;gap:12px;animation:rail 12s linear infinite}
.preview.gallery .tile{flex:0 0 40%;height:100%;border-radius:12px;background:linear-gradient(120deg,rgba(255,255,255,.06),transparent)}
@keyframes rail{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}
.preview.dash .bars{position:absolute;inset:12px;display:flex;gap:8px;align-items:flex-end}
.preview.dash .bar{flex:1;background:linear-gradient(180deg,var(--accent),var(--accent2));border-radius:10px 10px 4px 4px;opacity:.85}
.preview.dash .bar:nth-child(1){height:30%;animation:breath 2.6s ease-in-out infinite}
.preview.dash .bar:nth-child(2){height:60%;animation:breath 3.1s ease-in-out infinite .2s}
.preview.dash .bar:nth-child(3){height:45%;animation:breath 2.7s ease-in-out infinite .4s}
.preview.dash .bar:nth-child(4){height:75%;animation:breath 3.4s ease-in-out infinite .1s}
@keyframes breath{0%,100%{filter:brightness(1)}50%{filter:brightness(1.25)}}

/* ========= Timeline ========= */
.timeline{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.timeline li{display:flex;gap:12px;align-items:center;background:var(--card);border:1px solid var(--border);border-radius:14px;padding:12px}
.timeline li span{display:inline-grid;place-items:center;width:28px;height:28px;border-radius:50%;background:linear-gradient(90deg,var(--accent),var(--accent2));color:#0b0e1a;font-weight:800}

/* ========= Form ========= */
.form{display:grid;gap:12px}
.form__row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
input,textarea,select{width:100%;background:#0b0f22;color:#fff;border:1px solid var(--border);border-radius:12px;padding:10px}
:root[data-theme="light"] input,:root[data-theme="light"] textarea,:root[data-theme="light"] select{background:#fff;color:#0f1220;border-color:#e0e7ff}
input:focus,textarea:focus,select:focus{outline:2px solid var(--accent)}
.form__status{margin-top:8px;color:#aee3b9}

/* ========= Footer ========= */
.site-footer{border-top:1px solid rgba(38,48,81,.35);padding:26px 0;background:rgba(15,18,32,.25)}
:root[data-theme="light"] .site-footer{background:rgba(255,255,255,.6);border-top-color:#e9eeff}

/* ========= WhatsApp FAB ========= */
.whatsapp-fab{position:fixed;right:18px;bottom:18px;width:56px;height:56px;border-radius:50%;display:grid;place-items:center;background:#25D366;color:#0b0e1a;box-shadow:0 10px 20px rgba(0,0,0,.3);z-index:50}

/* ========= Reveal generic ========= */
.reveal{opacity:0;transform:translateY(16px);transition:opacity .6s ease, transform .6s ease}
.reveal.visible{opacity:1;transform:translateY(0)}

/* ========= Title stagger (index only) ========= */
.title-stagger .word{display:inline-block;opacity:0;transform:translateY(12px) scale(.98);filter:blur(2px)}
.title-stagger .word.visible{opacity:1;transform:translateY(0) scale(1);filter:blur(0);transition:transform .5s cubic-bezier(.2,.7,.2,1), opacity .5s, filter .5s}

/* ========= Responsive ========= */
@media (max-width: 980px){
  .grid-2{grid-template-columns:1fr; gap:28px}
  .cards{grid-template-columns:1fr 1fr}
  .grid-projects{grid-template-columns:1fr 1fr}
  .cards--pricing{grid-template-columns:1fr}
  .nav__toggle{display:block}
  .nav__list{display:none;position:absolute;right:12px;top:64px;background:var(--bg2);border:1px solid var(--border);border-radius:12px;padding:10px 12px;flex-direction:column}
  .nav__list.show{display:flex}
  .hero{padding:72px 0 48px}
}
@media (max-width: 520px){
  .cards{grid-template-columns:1fr}
  .grid-projects{grid-template-columns:1fr}
  .form__row{grid-template-columns:1fr}
  .hero{padding:56px 0 40px}
}
@media (prefers-reduced-motion: reduce){
  .frame::before,.frame::after,.frame-inner,.frame-inner::before,.frame-inner::after,
  .aurora,.aurora::after,.reveal{animation:none !important; transition:none !important}
}