@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

:root{
  --cyan:#0EA5D9;
  --blue-deep:#15305E;
  --magenta:#E31C64;
  --black:#131417;
  --charcoal:#1C1E24;
  --grey:#9AA0AE;
  --grey-dark:#6B7280;
  --paper:#F4F5F7;
  --white:#FFFFFF;
}
*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; }
body{ font-family:'Inter',sans-serif; color:var(--black); background:var(--white); line-height:1.6; overflow-x:hidden; }
a{ color:inherit; text-decoration:none; }
img{ max-width:100%; display:block; }
ul{ list-style:none; }
.wrap{ max-width:1100px; margin:0 auto; padding:0 20px; }

/* ===== HEADER ===== */
header{ position:sticky; top:0; z-index:100; background:var(--black); border-bottom:1px solid #24252B; }
.nav{ display:flex; align-items:center; justify-content:space-between; padding:12px 18px; }
.nav .logo{ display:flex; align-items:center; gap:8px; z-index:2; }
.nav .logo img{ height:56px; width:auto; }
.nav .actions{ display:flex; align-items:center; gap:10px; z-index:2; }
.nav .call{ width:38px; height:38px; border-radius:50%; background:linear-gradient(135deg,var(--cyan),var(--magenta)); display:flex; align-items:center; justify-content:center; }
.nav .call svg{ width:18px; height:18px; }
.burger{ width:38px; height:38px; border:1px solid #33353D; border-radius:6px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; background:none; }
.burger span{ width:16px; height:2px; background:#fff; display:block; }

.menu{ display:none; flex-direction:column; background:var(--black); border-top:1px solid #24252B; padding:8px 18px 20px; position:absolute; top:100%; left:0; right:0; }
.menu.open{ display:flex; }
.menu a{ padding:14px 4px; font-size:1rem; font-weight:500; color:#D5D6DC; border-bottom:1px solid #24252B; }
.menu a.active{ color:var(--cyan); }
.menu .cta{ margin-top:16px; text-align:center; padding:13px; border-radius:6px; background:linear-gradient(100deg,var(--cyan),var(--magenta)); color:#fff; font-weight:600; border:none; }

/* ===== HERO — ACCUEIL (video + triangle 3D) ===== */
.hero{ position:relative; overflow:hidden; background:var(--black); color:#fff; padding:28px 20px 40px; }
.hero-bg-photo{ position:absolute; inset:0; z-index:0; }
.hero-bg-photo img{ width:100%; height:100%; object-fit:cover; object-position:center 55%; opacity:0.45; filter:grayscale(0.25) contrast(1.05); }
.hero-bg-photo::after{ content:''; position:absolute; inset:0; background:linear-gradient(180deg, rgba(19,20,23,0.5) 0%, rgba(19,20,23,0.8) 65%, var(--black) 100%); }
.hero .stripe{ position:absolute; inset:0; width:160%; clip-path:polygon(55% 0, 100% 0, 100% 55%, 30% 100%, 0 100%, 0 60%); background:linear-gradient(120deg,var(--cyan),var(--magenta)); opacity:0.10; animation:driftStripe 9s ease-in-out infinite; z-index:1; }
@keyframes driftStripe{ 0%,100%{ transform:translateX(0); } 50%{ transform:translateX(-6%); } }
.hero .kicker{ position:relative; z-index:2; font-family:'JetBrains Mono'; font-size:0.85rem; letter-spacing:0.1em; text-transform:uppercase; color:var(--cyan); margin-bottom:18px; animation:fadeUp 0.7s ease-out both; }
.hero h1{ position:relative; z-index:2; font-family:'Space Grotesk'; font-weight:700; font-size:2.6rem; line-height:1.1; animation:fadeUp 0.7s ease-out 0.1s both; }
.hero p{ position:relative; z-index:2; margin-top:20px; color:var(--grey); font-size:1.1rem; max-width:46ch; animation:fadeUp 0.7s ease-out 0.2s both; }
.hero .cta-row{ position:relative; z-index:2; display:flex; flex-direction:column; gap:10px; margin-top:24px; animation:fadeUp 0.7s ease-out 0.3s both; }
.hero .wrap{ position:relative; z-index:2; }
.btn{ display:inline-flex; align-items:center; justify-content:center; padding:14px 22px; border-radius:6px; font-weight:600; font-size:0.92rem; }
.btn.primary{ background:linear-gradient(100deg,var(--cyan),var(--magenta)); color:#fff; animation:pulseBtn 2.5s ease-in-out infinite; }
.btn.ghost{ border:1px solid #33353D; color:#fff; }

/* Video background layer (home hero only) */
.hero-video-wrap{ position:absolute; inset:0; z-index:0; background:var(--black); }
.hero-video-wrap video{ width:100%; height:100%; object-fit:cover; opacity:0.28; }
.hero-video-wrap::after{ content:''; position:absolute; inset:0; background:linear-gradient(180deg, rgba(19,20,23,0.5) 0%, rgba(19,20,23,0.85) 70%, var(--black) 100%); }
.video-toggle{
  position:absolute; z-index:3; bottom:16px; right:16px;
  width:38px; height:38px; border-radius:50%; background:rgba(19,20,23,0.7); border:1px solid #33353D;
  display:flex; align-items:center; justify-content:center; cursor:pointer;
}
.video-toggle svg{ width:16px; height:16px; }

/* Dedicated video section (between poles and pourquoi-nous-choisir) */
.video-section{ background:var(--black); padding:0; }
.video-wrap{ position:relative; width:100%; aspect-ratio:16/9; max-height:70vh; overflow:hidden; }
.video-wrap video{ width:100%; height:100%; object-fit:cover; }
.video-wrap::after{ content:''; position:absolute; inset:0; background:linear-gradient(180deg, rgba(19,20,23,0.15) 0%, rgba(19,20,23,0.75) 100%); }
.video-caption{ position:absolute; left:20px; bottom:20px; z-index:2; }
@media(min-width:800px){ .video-caption{ left:6vw; bottom:36px; } }

/* 3D floating triangle */
.tri-stage{ position:relative; width:230px; height:230px; margin:8px auto 0; perspective:900px; z-index:2; }
.tri-float{ width:100%; height:100%; position:relative; transform-style:preserve-3d; animation:triFloat 4.5s ease-in-out infinite; }
.tri-spin{ width:100%; height:100%; position:absolute; inset:0; transform-style:preserve-3d; animation:triSpin 7s ease-in-out infinite; }
.tri-spin img{ width:100%; height:100%; object-fit:contain; }
.tri-glow{ position:absolute; inset:-50px; background:radial-gradient(circle at 50% 45%, rgba(14,165,217,0.35), rgba(227,28,100,0.16) 45%, transparent 70%); filter:blur(26px); animation:triGlow 3.2s ease-in-out infinite; }
@keyframes triFloat{ 0%,100%{ transform:translateY(0px); } 50%{ transform:translateY(-16px); } }
@keyframes triSpin{ 0%,100%{ transform:rotateY(-24deg) rotateX(5deg) rotate(-2deg); } 50%{ transform:rotateY(24deg) rotateX(-3deg) rotate(2deg); } }
@keyframes triGlow{ 0%,100%{ opacity:0.6; transform:scale(1); } 50%{ opacity:1; transform:scale(1.08); } }

/* Small inline triangle badge for inner-page heroes */
.tri-badge{ width:46px; height:46px; margin-bottom:14px; position:relative; z-index:2; }
.tri-badge .tri-spin{ animation-duration:6s; }

/* ===== STATS BAR ===== */
.stats{ position:relative; background:var(--charcoal); color:#fff; display:grid; grid-template-columns:repeat(2,1fr); gap:1px; border-top:1px solid #24252B; border-bottom:1px solid #24252B; z-index:2; }
.stat{ padding:22px 18px; text-align:center; }
.stat .n{ font-family:'Space Grotesk'; font-weight:700; font-size:1.6rem; background:linear-gradient(100deg,var(--cyan),var(--magenta)); -webkit-background-clip:text; background-clip:text; color:transparent; }
.stat .l{ font-family:'JetBrains Mono'; font-size:0.66rem; text-transform:uppercase; letter-spacing:0.05em; color:var(--grey); margin-top:4px; }

/* ===== SECTIONS ===== */
section{ padding:48px 20px; position:relative; }
section.alt{ background:var(--paper); }
section.dark{ background:var(--black); color:#fff; }
.kicker-sm{ font-family:'JetBrains Mono'; font-size:0.7rem; letter-spacing:0.08em; text-transform:uppercase; color:var(--magenta); display:flex; align-items:center; gap:8px; margin-bottom:10px; }
.kicker-sm::before{ content:''; width:20px; height:2px; background:var(--magenta); }
h2{ font-family:'Space Grotesk'; font-weight:700; font-size:1.5rem; margin-bottom:12px; line-height:1.2; }
section.dark h2, section.photo h2{ color:#fff; }
.lead{ max-width:60ch; color:var(--grey-dark); margin-bottom:28px; font-size:0.94rem; }
section.dark .lead, section.photo .lead{ color:var(--grey); }

/* Photo-backed "univers metier" sections */
section.photo{ color:#fff; background:var(--black); }
.photo-bg{ position:absolute; inset:0; z-index:0; }
.photo-bg img{ width:100%; height:100%; object-fit:cover; opacity:0.42; filter:grayscale(0.15) contrast(1.05); }
.photo-bg::after{ content:''; position:absolute; inset:0; background:linear-gradient(180deg, rgba(19,20,23,0.75) 0%, rgba(19,20,23,0.92) 100%); }
.photo-bg.tint::before{ content:''; position:absolute; inset:0; z-index:1; background:linear-gradient(120deg, rgba(14,165,217,0.22), transparent 45%, transparent 55%, rgba(227,28,100,0.22)); mix-blend-mode:color; }
section.photo .wrap{ position:relative; z-index:2; }

/* ===== SERVICE CARDS — electric border ===== */
.svc{ position:relative; padding:20px 20px 20px 22px; background:var(--white); margin-bottom:18px; border:2px solid transparent; background-clip:padding-box; border-radius:0; }
.svc::before{
  content:''; position:absolute; inset:-2px; z-index:-1; border-radius:0;
  background:conic-gradient(from var(--ang,0deg), var(--cyan), var(--magenta), var(--cyan), var(--magenta), var(--cyan));
  animation:rotateBorder 3.5s linear infinite;
}
.svc .num{ font-family:'JetBrains Mono'; font-size:0.72rem; color:var(--cyan); margin-bottom:6px; }
.svc h3{ font-family:'Space Grotesk'; font-weight:700; font-size:1.1rem; margin-bottom:8px; }
.svc p{ color:var(--grey-dark); font-size:0.88rem; margin-bottom:14px; }
.tags{ display:flex; flex-wrap:wrap; gap:8px; }
.tag{ font-family:'JetBrains Mono'; font-size:0.66rem; text-transform:uppercase; letter-spacing:0.03em; padding:5px 10px; border-radius:20px; background:var(--paper); color:var(--grey-dark); border:1px solid #E5E6EA; }

/* Card with thumbnail photo */
.svc.with-photo{ display:flex; flex-direction:column; gap:14px; padding:0; overflow:hidden; }
.svc.with-photo .thumb{ position:relative; height:150px; }
.svc.with-photo .thumb img{ width:100%; height:100%; object-fit:cover; }
.svc.with-photo .thumb::after{ content:''; position:absolute; inset:0; background:linear-gradient(180deg, transparent 40%, rgba(19,20,23,0.55)); }
.svc.with-photo .body{ padding:0 20px 20px 22px; }
.svc.with-photo::before{ z-index:-1; }

/* ===== POINTS — electric border ===== */
.points{ display:flex; flex-direction:column; gap:14px; }
.point{ position:relative; padding:18px; background:var(--white); border:2px solid transparent; background-clip:padding-box; border-radius:0; }
.point::before{
  content:''; position:absolute; inset:-2px; z-index:-1; border-radius:0;
  background:conic-gradient(from var(--ang,0deg), var(--cyan), var(--magenta), var(--cyan), var(--magenta), var(--cyan));
  animation:rotateBorder 3.5s linear infinite;
}
@property --ang{
  syntax:'<angle>'; initial-value:0deg; inherits:false;
}
@keyframes rotateBorder{ to{ --ang:360deg; } }
.point .num{ font-family:'JetBrains Mono'; color:var(--cyan); font-size:0.72rem; margin-bottom:6px; }
.point h4{ font-family:'Space Grotesk'; font-size:0.98rem; margin-bottom:5px; }
.point p{ color:var(--grey-dark); font-size:0.85rem; }
section.dark .point{ background:var(--charcoal); }
section.dark .point p{ color:var(--grey); }

/* Team/testimonial style card with round portrait */
.people{ display:flex; flex-direction:column; gap:18px; }
.people-card{ display:flex; align-items:center; gap:16px; background:var(--charcoal); padding:16px; border-radius:8px; }
.people-card img{ width:64px; height:64px; border-radius:50%; object-fit:cover; flex-shrink:0; border:2px solid var(--cyan); }
.people-card .role{ font-family:'JetBrains Mono'; font-size:0.68rem; color:var(--cyan); text-transform:uppercase; letter-spacing:0.04em; margin-bottom:4px; }
.people-card p{ font-size:0.86rem; color:var(--grey); }

/* ===== FORM ===== */
.form-wrap{ text-align:center; max-width:520px; margin:0 auto; }
.form-badge{
  display:inline-block; padding:6px 16px; border-radius:999px;
  background:rgba(14,165,217,0.12); color:var(--cyan);
  font-family:'JetBrains Mono'; font-size:0.7rem; text-transform:uppercase; letter-spacing:0.05em;
  margin-bottom:14px;
}
.form-wrap h2{ text-align:center; }
.form-wrap .lead{ margin-left:auto; margin-right:auto; text-align:center; }
.form-card{ background:transparent; border:none; padding:0; margin-top:8px; text-align:left; }
.form-card label{ display:block; font-family:'Inter'; font-weight:600; font-size:0.82rem; color:var(--black); margin:16px 0 8px; }
.form-card label:first-child{ margin-top:0; }
.field-wrap{ position:relative; }
.field-wrap svg{ position:absolute; left:16px; top:50%; transform:translateY(-50%); width:16px; height:16px; opacity:0.5; }
.form-card input{ width:100%; padding:13px 16px 13px 42px; border:1px solid #E0E1E6; border-radius:999px; font-family:'Inter'; font-size:0.92rem; color:var(--black); background:var(--white); }
.form-card textarea{ width:100%; padding:14px 16px; border:1px solid #E0E1E6; border-radius:18px; font-family:'Inter'; font-size:0.92rem; color:var(--black); background:var(--white); resize:vertical; min-height:110px; }
.form-card input:focus, .form-card textarea:focus{ outline:none; border-color:var(--cyan); }
.form-card button{
  margin-top:22px; width:100%; border:none; padding:15px; border-radius:999px;
  background:linear-gradient(100deg,var(--cyan),var(--magenta)); color:#fff; font-weight:600; font-size:0.94rem; cursor:pointer;
  display:flex; align-items:center; justify-content:center; gap:8px;
}

/* ===== FLOATING WHATSAPP ===== */
.float-wa{ position:fixed; bottom:18px; right:18px; z-index:200; width:56px; height:56px; border-radius:50%; background:#25D366; display:flex; align-items:center; justify-content:center; }
.float-wa::before{ content:''; position:absolute; inset:0; border-radius:50%; border:2px solid #25D366; animation:pulse 1.8s ease-out infinite; }
@keyframes pulse{ 0%{ transform:scale(1); opacity:0.9; } 100%{ transform:scale(1.9); opacity:0; } }
.float-wa svg{ width:26px; height:26px; }

/* ===== SOCIAL ICONS ===== */
.social-bar{ display:flex; gap:14px; justify-content:center; margin-top:28px; }
.social{ width:44px; height:44px; border-radius:50%; display:flex; align-items:center; justify-content:center; position:relative; }
.social svg{ width:20px; height:20px; }
.whatsapp{ background:#25D366; }
.whatsapp::before{ content:''; position:absolute; inset:0; border-radius:50%; border:2px solid #25D366; animation:pulse 1.8s ease-out infinite; }
.facebook{ background:#1877F2; animation:bounce 1.6s ease-in-out infinite; }
@keyframes bounce{ 0%,100%{ transform:translateY(0); } 25%{ transform:translateY(-7px); } 40%{ transform:translateY(0); } 55%{ transform:translateY(-3px); } 70%{ transform:translateY(0); } }
.tiktok{ background:#000; animation:wiggle 2.4s ease-in-out infinite; }
.tiktok::after{ content:''; position:absolute; inset:-3px; border-radius:50%; background:conic-gradient(from 0deg,var(--cyan),var(--magenta),var(--cyan)); z-index:-1; animation:spin 3s linear infinite; }
@keyframes wiggle{ 0%,100%{ transform:rotate(0) scale(1); } 10%{ transform:rotate(-8deg) scale(1.05); } 20%{ transform:rotate(8deg) scale(1.05); } 30%{ transform:rotate(-4deg); } 40%{ transform:rotate(0); } }
@keyframes spin{ to{ transform:rotate(360deg); } }

/* ===== ANIMATED PIPELINE DIVIDER ===== */
.pipeline{ position:relative; height:64px; background:var(--charcoal); overflow:hidden; }
.pipeline svg{ width:100%; height:100%; display:block; }
.pipeline .flow{
  stroke-dasharray:10 14;
  filter:drop-shadow(0 0 4px var(--cyan)) drop-shadow(0 0 8px var(--cyan));
  animation:flowMove 1s linear infinite;
}
.pipeline .spark{
  filter:drop-shadow(0 0 6px var(--magenta)) drop-shadow(0 0 12px var(--magenta));
}
@keyframes flowMove{ to{ stroke-dashoffset:-48; } }
@keyframes sparkPulse{ 0%,100%{ opacity:0.5; r:3; } 50%{ opacity:1; r:6; } }

/* ===== CONTACT STRIP ===== */
.contact-strip{ background:var(--black); color:#fff; padding:44px 20px; text-align:center; }
.contact-strip h2{ color:#fff; }
.contact-strip .links{ display:flex; flex-direction:column; gap:10px; margin-top:20px; }

footer{ background:var(--black); color:var(--grey); padding:28px 20px; display:flex; flex-direction:column; gap:16px; align-items:center; text-align:center; font-family:'JetBrains Mono'; font-size:0.68rem; text-transform:uppercase; letter-spacing:0.04em; border-top:1px solid #24252B; }

/* ===== SCROLL MEDIA EXPANSION ===== */
.scroll-expand{
  transform:scale(0.88);
  opacity:0;
  transition:transform 0.9s cubic-bezier(0.16,1,0.3,1), opacity 0.9s ease-out;
}
.scroll-expand.in-view{
  transform:scale(1);
  opacity:1;
}

/* ===== DESKTOP ===== */
@media(min-width:800px){
  .nav{ padding:16px 6vw; }
  .nav .logo img{ height:68px; }
  .burger{ display:none; }
  .menu{ display:flex !important; flex-direction:row; position:static; background:none; border:none; padding:0; align-items:center; gap:28px; margin-left:auto; margin-right:28px; }
  .menu a{ padding:0; border:none; font-size:0.9rem; }
  .menu .cta{ margin:0; padding:10px 18px; width:auto; }

  .hero{ padding:70px 6vw 0; min-height:640px; display:flex; align-items:center; }
  .hero .wrap{ width:100%; display:flex; align-items:center; justify-content:space-between; gap:40px; }
  .hero .hero-text{ max-width:50%; }
  .hero h1{ font-size:4.2rem; max-width:14ch; }
  .hero .cta-row{ flex-direction:row; }
  .tri-stage{ width:340px; height:340px; margin:0; flex-shrink:0; }

  .stats{ grid-template-columns:repeat(4,1fr); position:relative; z-index:2; }

  section{ padding:64px 6vw; }
  .svc-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:20px; }
  .svc-grid .svc{ margin-bottom:0; }
  .svc{ display:flex; gap:24px; align-items:flex-start; }
  .svc .body{ flex:1; }
  .svc-grid .svc.with-photo{ flex-direction:column; }
  .svc-grid .svc.with-photo .thumb{ width:100%; height:180px; }
  .svc-grid .svc.with-photo .body{ padding:0 20px 20px 22px; }
  .svc.with-photo{ flex-direction:row; align-items:stretch; }
  .svc.with-photo .thumb{ width:220px; height:auto; flex-shrink:0; }
  .svc.with-photo .body{ padding:20px 20px 20px 0; }
  .points{ flex-direction:row; }
  .point{ flex:1; }
  .people{ flex-direction:row; }
  .people-card{ flex:1; flex-direction:column; text-align:center; }

  .contact-strip .links{ flex-direction:row; justify-content:center; }
  footer{ flex-direction:row; justify-content:space-between; text-align:left; }
}

@keyframes fadeUp{ from{ opacity:0; transform:translateY(18px); } to{ opacity:1; transform:translateY(0); } }
@keyframes pulseBtn{ 0%,100%{ box-shadow:0 0 0 0 rgba(227,28,100,0.4); } 50%{ box-shadow:0 0 0 10px rgba(227,28,100,0); } }

.status-badge{
  position:relative; z-index:2; display:inline-flex; align-items:center; gap:8px;
  padding:7px 14px; border-radius:999px; background:rgba(14,165,217,0.1); border:1px solid rgba(14,165,217,0.3);
  font-family:'JetBrains Mono'; font-size:0.72rem; color:var(--cyan); margin-bottom:20px;
  animation:fadeUp 0.6s ease-out both;
}
.status-badge .dot{
  width:7px; height:7px; border-radius:50%; background:#3ddc84;
  box-shadow:0 0 0 0 rgba(61,220,132,0.6);
  animation:dotPulse 1.8s ease-out infinite;
}
@keyframes dotPulse{
  0%{ box-shadow:0 0 0 0 rgba(61,220,132,0.6); }
  70%{ box-shadow:0 0 0 8px rgba(61,220,132,0); }
  100%{ box-shadow:0 0 0 0 rgba(61,220,132,0); }
}