/* ── Flash Events — Main Stylesheet ── */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg:   #070714;
  --bg2:  #0A0A1C;
  --wh:   #F7F7F5;
  --wh2:  #FFFFFF;
  --g1:   #2B8CFF;
  --g2:   #8A3FFC;
  --g3:   #FF4FD8;
  --grad: linear-gradient(135deg,#2B8CFF 0%,#8A3FFC 50%,#FF4FD8 100%);
  --glr:  linear-gradient(90deg,#2B8CFF,#8A3FFC,#FF4FD8);
  --fd:   'Syne', sans-serif;
  --fb:   'DM Sans', sans-serif;
  --md:   rgba(255,255,255,.46);
  --ml:   rgba(0,0,0,.42);
  --bd:   rgba(255,255,255,.07);
  --bl:   rgba(0,0,0,.07);
}

html { scroll-behavior: smooth; }
body { font-family: var(--fb); background: var(--bg); color: white; -webkit-font-smoothing: antialiased; }
h1,h2,h3,h4 { font-family: var(--fd); font-weight: 700; text-wrap: balance; }

/* ─── Doc bar ─── */
.doc-bar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 400;
  background: rgba(3,3,12,.96); backdrop-filter: blur(16px);
  height: 42px; padding: 0 40px;
  display: flex; align-items: center; justify-content: space-between;
  border-bottom: 1px solid rgba(255,255,255,.04);
}
.doc-bar-l { display: flex; align-items: center; gap: 0; }
.doc-title { font-family: var(--fd); font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: white; }
.doc-sub   { font-size: 11px; color: rgba(255,255,255,.28); margin-left: 14px; }
.doc-pill  {
  font-family: var(--fd); font-size: 10px; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; padding: 4px 12px; border-radius: 20px;
  background: var(--glr); color: white;
}

/* ─── Keyframes ─── */
@keyframes orb1  { 0%,100%{transform:translate(0,0) scale(1)} 33%{transform:translate(40px,-55px) scale(1.06)} 66%{transform:translate(-22px,30px) scale(.96)} }
@keyframes orb2  { 0%,100%{transform:translate(0,0) scale(1)} 40%{transform:translate(-35px,45px) scale(1.08)} 70%{transform:translate(50px,-18px) scale(.94)} }
@keyframes orb3  { 0%,100%{transform:translate(0,0) scale(1)} 50%{transform:translate(28px,38px) scale(1.12)} }
@keyframes fadeUp { from{opacity:0;transform:translateY(32px)} to{opacity:1;transform:none} }
@keyframes fadeIn { from{opacity:0} to{opacity:1} }
@keyframes shimmer { 0%{transform:translateX(-150%)} 100%{transform:translateX(200%)} }
@keyframes pulseDot { 0%,100%{opacity:.7} 50%{opacity:1} }

/* ─── Reveal ─── */
.rev { opacity:0; transform:translateY(28px); transition: opacity .75s cubic-bezier(.16,1,.3,1), transform .75s cubic-bezier(.16,1,.3,1); }
.rev.in { opacity:1; transform:none; }
.d1{transition-delay:.1s} .d2{transition-delay:.2s} .d3{transition-delay:.3s} .d4{transition-delay:.4s}

/* ─── Utilities ─── */
.g-text {
  background: var(--glr); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
}
.g-rule { height:2px; background:var(--glr); border-radius:1px; }
.kicker { font-family:var(--fd); font-size:11px; font-weight:600; letter-spacing:.16em; text-transform:uppercase; }
.k-blue  { color:var(--g1); }
.k-mutel { color:rgba(0,0,0,.36); }
.k-muted { color:rgba(255,255,255,.38); }

/* ─── Buttons ─── */
.btn {
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--fd); font-weight:600; border:none; cursor:pointer; text-decoration:none;
  border-radius:8px; position:relative; overflow:hidden;
  transition: transform .22s ease, box-shadow .3s ease, background .3s ease;
}
.btn::after {
  content:''; position:absolute; inset:0;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.18),transparent);
  transform:translateX(-150%); transition:transform .6s ease;
}
.btn:hover::after { transform:translateX(150%); }
.btn:hover { transform:translateY(-1px); }
.btn-p {
  background:var(--grad); color:white;
  padding:14px 28px; font-size:14px;
}
.btn-p:hover { box-shadow:0 0 28px rgba(43,140,255,.45),0 0 56px rgba(138,63,252,.2),0 12px 32px rgba(0,0,0,.3); }
.btn-od {
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.18);
  color:rgba(255,255,255,.85); padding:13px 28px; font-size:14px; backdrop-filter:blur(4px);
}
.btn-od:hover { background:rgba(255,255,255,.1); border-color:rgba(255,255,255,.3); }
.btn-ol {
  background:transparent; border:1px solid rgba(0,0,0,.14);
  color:rgba(0,0,0,.72); padding:13px 28px; font-size:14px;
}
.btn-ol:hover { background:rgba(0,0,0,.04); border-color:rgba(0,0,0,.26); }
.btn-sm { padding:10px 20px; font-size:13px; }

/* ─── Nav ─── */
.nav {
  position:fixed; top:42px; left:0; right:0; z-index:300;
  padding:0 60px; height:70px;
  display:flex; align-items:center; justify-content:space-between;
  transition:background .5s,backdrop-filter .5s,box-shadow .5s;
}
.nav.sc {
  background:rgba(7,7,20,.88); backdrop-filter:blur(22px) saturate(1.6);
  box-shadow:0 1px 0 rgba(255,255,255,.05);
}
.nav-logo { opacity:0; transition:opacity .4s ease; }
.nav-logo img { height:36px; width:auto; display:block; }
.nav.sc .nav-logo { opacity:1; }
.nav-links { display:flex; gap:36px; }
.nav-links a { font-family:var(--fd); font-size:14px; font-weight:500; color:rgba(255,255,255,.52); text-decoration:none; transition:color .2s; }
.nav-links a:hover { color:white; }

/* ─── Hero ─── */
.hero {
  position:relative; min-height:100vh;
  display:flex; flex-direction:column;
  overflow:hidden; background:var(--bg);
  padding-top:112px;
}
.hero-bg { position:absolute; inset:0; z-index:0; overflow:hidden; }
.orb { position:absolute; border-radius:50%; filter:blur(110px); pointer-events:none; }
.o1 { width:720px; height:720px; opacity:.17; background:var(--g1); top:-220px; right:-80px; animation:orb1 11s ease-in-out infinite; }
.o2 { width:620px; height:620px; opacity:.13; background:var(--g2); bottom:-80px; right:120px; animation:orb2 14s ease-in-out infinite; }
.o3 { width:460px; height:460px; opacity:.11; background:var(--g3); top:80px; right:380px; animation:orb3 17s ease-in-out infinite; }
#cvs { position:absolute; inset:0; z-index:1; pointer-events:none; }

.hero-body {
  position:relative; z-index:2; flex:1;
  display:grid; grid-template-columns:56% 44%;
}
.hero-left {
  padding:56px 60px 80px;
  display:flex; flex-direction:column; gap:22px; justify-content:center;
}
.hero-logo { height:36px; width:auto; display:block; align-self:flex-start; animation:fadeIn .9s ease both; }
.hero-kicker { animation:fadeUp .7s ease .1s both; }
.hero-h1 {
  font-size:82px; line-height:1.01; font-weight:800; letter-spacing:-.03em; color:white;
  animation:fadeUp .8s ease .2s both;
}
.hero-desc {
  font-size:17px; line-height:1.72; color:rgba(255,255,255,.56); max-width:490px; font-weight:300;
  animation:fadeUp .8s ease .3s both;
}
.hero-ctas { display:flex; gap:12px; flex-wrap:wrap; animation:fadeUp .8s ease .38s both; }
.hero-stats {
  display:flex; gap:36px;
  padding-top:28px; margin-top:4px;
  border-top:1px solid rgba(255,255,255,.06);
  animation:fadeUp .8s ease .48s both;
}
.stat-n { font-family:var(--fd); font-size:28px; font-weight:700; color:white; line-height:1; }
.stat-l { font-size:12px; color:var(--md); margin-top:5px; }

.hero-right {
  position:relative; overflow:hidden; min-height:500px;
  animation:fadeIn 1.2s ease .3s both;
}
.hero-right img { width:100%; height:100%; object-fit:cover; display:block; }
.hero-right::after {
  content:''; position:absolute; inset:0; pointer-events:none;
  background:
    linear-gradient(to right,#070714 0%,rgba(7,7,20,.92) 6%,rgba(7,7,20,.65) 20%,rgba(7,7,20,.2) 40%,transparent 58%),
    linear-gradient(to bottom,rgba(7,7,20,.55) 0%,transparent 28%),
    linear-gradient(to top,rgba(7,7,20,.65) 0%,transparent 28%);
}
.hero-body::before {
  content:''; position:absolute; z-index:3; pointer-events:none;
  left:56%; top:10%; bottom:10%; width:1px;
  background:linear-gradient(to bottom,transparent,rgba(43,140,255,.35) 25%,rgba(138,63,252,.4) 50%,rgba(255,79,216,.3) 75%,transparent);
}

/* ─── Manifeste ─── */
.manifeste {
  background:var(--bg2); padding:120px 60px; position:relative; overflow:hidden;
}
.manifeste::before {
  content:''; position:absolute; top:50%; left:50%;
  transform:translate(-50%,-50%);
  width:900px; height:440px;
  background:radial-gradient(ellipse,rgba(138,63,252,.07) 0%,transparent 68%);
  pointer-events:none;
}
.manifeste-in {
  max-width:820px; margin:0 auto; text-align:center;
  display:flex; flex-direction:column; align-items:center; gap:34px;
  position:relative; z-index:1;
}
.manifeste-q {
  font-family:var(--fd); font-size:27px; font-weight:500;
  line-height:1.62; color:rgba(255,255,255,.86); letter-spacing:-.01em;
}
.manifeste-q em { font-style:normal; color:white; }

/* ─── Offres ─── */
.offres { background:var(--wh); padding:100px 60px; color:#0F0F1A; }
.offres-in { max-width:1280px; margin:0 auto; }
.sec-hd { display:flex; align-items:flex-end; justify-content:space-between; margin-bottom:54px; }
.sec-h2 { font-size:52px; letter-spacing:-.025em; }
.grid3 { display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }

.ocard {
  background:white; border-radius:16px; overflow:hidden;
  border:1px solid var(--bl); display:flex; flex-direction:column;
  transition:transform .36s cubic-bezier(.16,1,.3,1),box-shadow .36s ease;
}
.ocard:hover { transform:translateY(-7px); box-shadow:0 28px 64px rgba(0,0,0,.11),0 0 0 1px rgba(138,63,252,.12); }
.ocard-img { position:relative; height:260px; overflow:hidden; }
.ocard-img img { width:100%; height:100%; object-fit:cover; display:block; transition:transform .6s ease; }
.ocard:hover .ocard-img img { transform:scale(1.04); }
.ocard-ov {
  position:absolute; inset:0; pointer-events:none;
  background:
    linear-gradient(to top,rgba(0,0,0,.55) 0%,rgba(0,0,0,.08) 42%,transparent 68%),
    linear-gradient(to right,rgba(0,0,0,.1),transparent 30%),
    linear-gradient(to left,rgba(0,0,0,.1),transparent 30%);
}
.ocard-body { padding:28px 30px; display:flex; flex-direction:column; gap:10px; flex:1; }
.ocard-link {
  font-family:var(--fd); font-size:13px; font-weight:600; margin-top:auto;
  background:var(--glr); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
  text-decoration:none; display:inline-flex; align-items:center; gap:4px;
  transition:opacity .2s;
}
.ocard-link:hover { opacity:.75; }

/* ─── Features ─── */
.features { background:var(--wh2); padding:100px 60px; color:#0F0F1A; }
.features-in { max-width:1280px; margin:0 auto; }
.features-hd { text-align:center; margin-bottom:72px; }
.grid4 { display:grid; grid-template-columns:repeat(4,1fr); gap:40px; }
.fitem { display:flex; flex-direction:column; gap:16px; }
.ficon {
  width:54px; height:54px; border-radius:14px;
  display:flex; align-items:center; justify-content:center;
}
.ficon-dot { border-radius:50%; }
.fi-b { background:rgba(43,140,255,.1); }   .fi-b .ficon-dot { background:var(--g1); width:20px;height:20px; }
.fi-p { background:rgba(138,63,252,.1); }   .fi-p .ficon-dot { background:var(--g2); width:20px;height:4px;border-radius:2px; }
.fi-r { background:rgba(255,79,216,.1); }   .fi-r .ficon-dot { background:var(--g3); width:4px;height:20px;border-radius:2px; }
.fi-g { background:rgba(138,63,252,.08); }  .fi-g .ficon-dot { background:var(--grad); width:18px;height:18px;border-radius:5px; }
.ftitle { font-size:18px; font-weight:700; color:#0F0F1A; line-height:1.3; }
.fdesc  { font-size:14px; line-height:1.72; color:rgba(0,0,0,.46); font-weight:400; }

/* ─── Marchés ─── */
.marches { background:var(--bg); padding:100px 60px; position:relative; overflow:hidden; }
.marches::before {
  content:''; position:absolute; bottom:0; left:0; right:0; height:280px;
  background:linear-gradient(to top,rgba(43,140,255,.04),transparent); pointer-events:none;
}
.marches-in { max-width:1280px; margin:0 auto; position:relative; z-index:1; }
.mgrid { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
.mcard {
  background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.07);
  border-radius:12px; padding:28px 22px;
  transition:background .3s,border-color .3s,transform .3s,box-shadow .3s;
}
.mcard:hover { background:rgba(255,255,255,.06); border-color:rgba(138,63,252,.28); transform:translateY(-3px); box-shadow:0 10px 36px rgba(138,63,252,.12); }
.mcard.wide { grid-column:span 2; display:flex; align-items:center; justify-content:space-between; gap:24px; }
.mt { font-family:var(--fd); font-size:15px; font-weight:600; color:white; margin-bottom:8px; }
.md-t { font-size:12px; color:rgba(255,255,255,.4); line-height:1.6; }

/* ─── Process ─── */
.process { background:var(--wh); padding:100px 60px; color:#0F0F1A; }
.process-in { max-width:1100px; margin:0 auto; }
.process-hd { text-align:center; margin-bottom:80px; }
.steps { display:grid; grid-template-columns:repeat(4,1fr); gap:0; position:relative; }
.step-line {
  position:absolute; top:28px; left:12.5%; right:12.5%; height:1px;
  background:linear-gradient(90deg,transparent,var(--g1) 20%,var(--g2) 50%,var(--g3) 80%,transparent);
  opacity:.22;
}
.step { text-align:center; padding:0 22px; position:relative; z-index:1; }
.step-n {
  width:56px; height:56px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  margin:0 auto 28px;
  font-family:var(--fd); font-weight:700; font-size:20px; color:white;
}
.sn-g { background:var(--grad); }
.sn-d { background:#0F0F1A; }
.step-title { font-size:16px; font-weight:600; color:#0F0F1A; margin-bottom:10px; line-height:1.35; }
.step-desc  { font-size:13px; color:var(--ml); line-height:1.65; }

/* ─── Devis ─── */
.devis { background:var(--wh2); padding:100px 60px; color:#0F0F1A; }
.devis-in { max-width:1200px; margin:0 auto; }
.devis-grid { display:grid; grid-template-columns:1fr 400px; gap:80px; align-items:start; }
.field { display:flex; flex-direction:column; gap:6px; }
.flabel { font-family:var(--fd); font-size:12px; font-weight:500; color:rgba(0,0,0,.5); letter-spacing:.02em; }
.finput,.fselect,.ftextarea {
  background:#F5F5F5; border:1.5px solid rgba(0,0,0,.09); border-radius:10px;
  padding:13px 16px; font-size:14px; color:rgba(0,0,0,.32);
  font-family:var(--fb); width:100%;
}
.ftextarea { height:100px; resize:none; display:flex; align-items:flex-start; padding-top:14px; }
.fselect { display:flex; align-items:center; justify-content:space-between; }
.ftoggle {
  display:flex; gap:0; background:#F0F0EE;
  border:1.5px solid rgba(0,0,0,.09); border-radius:10px; overflow:hidden; padding:4px;
}
.ftoggle-opt {
  flex:1; text-align:center; padding:10px 16px; font-size:14px; cursor:pointer;
  font-family:var(--fd); font-weight:500; color:rgba(0,0,0,.38);
  border-radius:7px; transition:all .22s ease; user-select:none;
}
.ftoggle-opt.active {
  background:white; color:#0F0F1A; font-weight:600;
  box-shadow:0 1px 6px rgba(0,0,0,.12);
}
.reassurance {
  background:var(--bg); border-radius:16px; padding:34px; color:white; margin-bottom:18px;
}
.rb-list { margin-top:26px; display:flex; flex-direction:column; gap:13px; }
.rb { display:flex; align-items:center; gap:12px; }
.rb-dot { width:6px; height:6px; border-radius:50%; flex-shrink:0; }

/* ─── Closing / Footer ─── */
.closing { background:var(--bg2); padding:80px 60px; text-align:center; position:relative; overflow:hidden; }
.closing::before {
  content:''; position:absolute; top:50%; left:50%;
  transform:translate(-50%,-50%);
  width:600px; height:350px;
  background:radial-gradient(ellipse,rgba(138,63,252,.08) 0%,transparent 70%);
  pointer-events:none;
}
.closing-in {
  max-width:680px; margin:0 auto;
  display:flex; flex-direction:column; align-items:center; gap:22px;
  position:relative; z-index:1;
}
.closing-links { display:flex; gap:24px; flex-wrap:wrap; justify-content:center; font-size:13px; color:rgba(255,255,255,.3); }
.closing-links a { color:rgba(255,255,255,.3); text-decoration:none; cursor:pointer; transition:color .2s; }
.closing-links a:hover { color:rgba(255,255,255,.7); }

/* ─── Transitions ─── */
.tr { line-height:0; overflow:hidden; }
.tr svg { display:block; width:100%; }
.tr-line { height:3px; background:var(--glr); }
.tr-fade-wh { height:40px; position:relative; }
.tr-fade-wh::after {
  content:''; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:56px; height:2px; background:var(--glr); border-radius:1px; opacity:.38;
}

/* ─── Page intérieure hero ─── */
.page-hero {
  position:relative; min-height:72vh;
  display:flex; flex-direction:column; justify-content:flex-end;
  overflow:hidden; background:var(--bg);
  padding:0 60px 80px;
  padding-top:112px;
}
.page-hero-bg { position:absolute; inset:0; z-index:0; }
.page-hero-bg img { width:100%; height:100%; object-fit:cover; display:block; }
.page-hero-overlay {
  position:absolute; inset:0;
  background:
    linear-gradient(to right,rgba(7,7,20,.95) 0%,rgba(7,7,20,.8) 30%,rgba(7,7,20,.4) 70%,rgba(7,7,20,.1) 100%),
    linear-gradient(to top,rgba(7,7,20,.85) 0%,rgba(7,7,20,.2) 40%,transparent 70%);
}
.page-hero-content { position:relative; z-index:2; max-width:720px; }

/* ─── Grille produits ─── */
.produits { background:var(--wh); padding:100px 60px; color:#0F0F1A; }
.produits-in { max-width:1280px; margin:0 auto; }
.pgrid { display:grid; grid-template-columns:repeat(2,1fr); gap:32px; }
.pcard {
  background:white; border-radius:20px; overflow:hidden;
  border:1px solid var(--bl);
  transition:transform .36s cubic-bezier(.16,1,.3,1),box-shadow .36s ease;
}
.pcard:hover { transform:translateY(-6px); box-shadow:0 24px 56px rgba(0,0,0,.1),0 0 0 1px rgba(138,63,252,.1); }
.pcard-img { position:relative; height:340px; overflow:hidden; }
.pcard-img img { width:100%; height:100%; object-fit:cover; display:block; transition:transform .6s ease; }
.pcard:hover .pcard-img img { transform:scale(1.04); }
.pcard-body { padding:36px 40px; display:flex; flex-direction:column; gap:14px; }
.pcard-title { font-size:26px; color:#0F0F1A; }
.pcard-desc  { font-size:14px; line-height:1.78; color:rgba(0,0,0,.44); font-weight:400; }

/* ─── CTA bande ─── */
.cta-band { background:var(--bg2); padding:100px 60px; text-align:center; }
.cta-band-in { max-width:680px; margin:0 auto; display:flex; flex-direction:column; align-items:center; gap:24px; }
.cta-band h2 { font-size:46px; letter-spacing:-.025em; }

/* ─── Specs/liste ─── */
.specs { background:var(--wh2); padding:80px 60px; color:#0F0F1A; }
.specs-in { max-width:900px; margin:0 auto; display:grid; grid-template-columns:1fr 1fr; gap:48px; }
.spec-group h3 { font-size:18px; font-weight:700; margin-bottom:20px; color:#0F0F1A; }
.spec-list { list-style:none; display:flex; flex-direction:column; gap:10px; }
.spec-list li { font-size:14px; color:rgba(0,0,0,.54); line-height:1.6; padding-left:18px; position:relative; }
.spec-list li::before { content:''; position:absolute; left:0; top:8px; width:6px; height:6px; border-radius:50%; background:var(--g2); }