/* ============================================================
   OCADEMYA — style.css v3
   Thème: Dark Navy Premium SaaS
   Police titres: Outfit | Police texte: Manrope
   ============================================================ */
:root {
  --navy:   #050D1F;
  --navy2:  #081428;
  --navy3:  #0C1E3C;
  --navy4:  #102548;
  --blue:   #1854D4;
  --blue-l: #3B7AF5;
  --cyan:   #00C8FF;
  --green:  #0AFFB8;
  --white:  #FFFFFF;
  --off:    #F4F7FF;
  --t1: #FFFFFF;
  --t2: #A8C0E0;
  --t3: #6A90B8;
  --border: rgba(255,255,255,.1);
  --r: 8px; --rm: 14px; --rl: 24px; --rxl: 40px;
  --sh: 0 8px 32px rgba(5,13,31,.6);
  --tr: all .25s cubic-bezier(.4,0,.2,1);
  --nav-h: 70px;
  --c-gestcom: #F59E0B;
  --c-edupay:  #10B981;
  --c-med:     #EF4444;
  --c-paie:    #8B5CF6;
  --c-compta:  #1854D4;
}

/* ── RESET ── */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0 }
html { scroll-behavior:smooth; font-size:16px; -webkit-text-size-adjust:100% }
body { font-family:'Manrope',sans-serif; background:#050D1F; color:#FFFFFF; line-height:1.65; overflow-x:hidden }
img  { max-width:100%; display:block }
a    { text-decoration:none; color:inherit }
ul   { list-style:none }
button { cursor:pointer; font-family:'Manrope',sans-serif }

/* ── TYPO ── */
h1,h2,h3,h4,h5 { font-family:'Outfit',sans-serif; line-height:1.15 }
h1 { font-size:clamp(2.2rem,5vw,3.8rem); font-weight:800 }
h2 { font-size:clamp(1.8rem,3.5vw,2.8rem); font-weight:700 }
h3 { font-size:clamp(1.1rem,2vw,1.4rem); font-weight:600 }
h4 { font-size:1rem; font-weight:600 }
p  { color:#A8C0E0 }

.grad-text {
  background: linear-gradient(135deg,#FFFFFF 0%,var(--cyan) 100%);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text
}
.grad-text-gold {
  background: linear-gradient(135deg,var(--cyan),var(--green));
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text
}

/* ── LAYOUT ── */
.container  { max-width:1200px; margin:0 auto; padding:0 24px }
.section    { padding:88px 0; background:#FFFFFF }
.section-dk { padding:88px 0; background:#050D1F }
.section-nv { padding:88px 0; background:#081428 }
.section-gr { padding:88px 0; background:#F4F7FF }

/* ── BADGE ── */
.badge {
  display:inline-flex; align-items:center; gap:6px;
  padding:5px 14px; border-radius:100px;
  font-size:.75rem; font-weight:700; letter-spacing:.06em;
  text-transform:uppercase; font-family:'Outfit',sans-serif;
  background:rgba(0,200,255,.12); color:var(--cyan);
  border:1px solid rgba(0,200,255,.25)
}
.badge-blue { background:rgba(24,84,212,.15); color:#7AADFF; border-color:rgba(24,84,212,.3) }

/* ── BOUTONS ── */
.btn {
  display:inline-flex; align-items:center; gap:8px;
  padding:13px 28px; border-radius:var(--rm);
  font-family:'Outfit',sans-serif; font-weight:600; font-size:.92rem;
  border:none; cursor:pointer; transition:var(--tr); white-space:nowrap
}
.btn-primary {
  background:linear-gradient(135deg,var(--blue),var(--blue-l));
  color:#FFFFFF; box-shadow:0 4px 20px rgba(24,84,212,.4)
}
.btn-primary:hover { transform:translateY(-2px); box-shadow:0 8px 32px rgba(24,84,212,.55) }
.btn-cyan {
  background:linear-gradient(135deg,var(--cyan),#0090CC);
  color:#050D1F; font-weight:700; box-shadow:0 4px 20px rgba(0,200,255,.35)
}
.btn-cyan:hover { transform:translateY(-2px); box-shadow:0 0 40px rgba(0,200,255,.5) }
.btn-outline {
  background:transparent; color:#FFFFFF;
  border:1.5px solid rgba(255,255,255,.25)
}
.btn-outline:hover { border-color:var(--cyan); color:var(--cyan); background:rgba(0,200,255,.06) }
.btn-ghost { background:rgba(255,255,255,.07); color:#FFFFFF; border:1px solid rgba(255,255,255,.12) }
.btn-ghost:hover { background:rgba(255,255,255,.13) }
.btn-lg { padding:16px 36px; font-size:1rem }
.btn-sm { padding:9px 20px; font-size:.82rem }
.btn-full { width:100%; justify-content:center }
.btn-wa { background:#25D366; color:#FFFFFF }
.btn-wa:hover { background:#1EA952 }

/* ── SECTION HEADER ── */
.sec-head { text-align:center; max-width:640px; margin:0 auto 56px }
.sec-head .badge { margin-bottom:14px }
.sec-head h2 { margin-bottom:14px; color:#FFFFFF }
.sec-head p  { color:#A8C0E0; font-size:1.05rem }
.sec-head.light h2 { color:#0C1E3C }
.sec-head.light p  { color:#4A6080 }

/* ── NAVBAR ── */
.navbar {
  position:fixed; top:0; left:0; right:0; z-index:1000;
  height:var(--nav-h);
  background:rgba(5,13,31,.92);
  backdrop-filter:blur(20px);
  border-bottom:1px solid rgba(255,255,255,.07);
  transition:var(--tr)
}
.navbar.scrolled { background:rgba(5,13,31,.99); box-shadow:0 4px 24px rgba(0,0,0,.4) }
.nav-inner {
  display:flex; align-items:center; justify-content:space-between;
  height:100%; gap:16px
}
.nav-logo { display:flex; align-items:center; flex-shrink:0 }
.nav-logo img { height:30px; width:auto }
.nav-links {
  display:flex; align-items:center; gap:2px;
  flex:1; justify-content:center; flex-wrap:nowrap
}
.nav-links a, .nav-drop-btn {
  color:rgba(255,255,255,.75); font-size:.88rem; font-weight:500;
  padding:7px 12px; border-radius:var(--r);
  transition:var(--tr); white-space:nowrap;
  background:none; border:none; cursor:pointer;
  font-family:'Manrope',sans-serif
}
.nav-links a:hover, .nav-drop-btn:hover,
.nav-links a.active { color:#FFFFFF; background:rgba(255,255,255,.09) }
.nav-drop-wrap { position:relative }
.nav-drop-btn { display:flex; align-items:center; gap:4px }
.drop-arrow { font-size:.6rem; transition:transform .2s }
.nav-drop-btn[aria-expanded="true"] .drop-arrow { transform:rotate(180deg) }
.drop-menu {
  display:none;
  position:absolute; top:calc(100% + 10px); left:50%;
  transform:translateX(-50%);
  background:#081428; border:1px solid rgba(255,255,255,.12);
  border-radius:var(--rl); padding:8px; min-width:270px;
  box-shadow:0 24px 60px rgba(0,0,0,.6); z-index:9999;
  animation:dropIn .18s ease
}
.drop-menu.open { display:block !important }
@keyframes dropIn { from{opacity:0;transform:translateX(-50%) translateY(-6px)} to{opacity:1;transform:translateX(-50%) translateY(0)} }
.drop-item {
  display:flex; align-items:center; gap:12px;
  padding:10px 14px; border-radius:10px; color:rgba(255,255,255,.82);
  font-size:.86rem; transition:background .15s; white-space:nowrap
}
.drop-item:hover { background:rgba(255,255,255,.08); color:#FFF }
.drop-dot { width:9px; height:9px; border-radius:50%; flex-shrink:0 }
.drop-texts { display:flex; flex-direction:column }
.drop-texts small { color:rgba(255,255,255,.4); font-size:.72rem }
.drop-foot { border-top:1px solid rgba(255,255,255,.08); padding:8px 14px 4px; margin-top:4px }
.drop-foot a { color:var(--cyan); font-size:.82rem; font-weight:600 }
.nav-cta { display:flex; align-items:center; gap:8px; flex-shrink:0 }
/* Hamburger */
.hamburger {
  display:none; flex-direction:column; justify-content:center; align-items:center;
  gap:5px; width:40px; height:40px;
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.12);
  border-radius:var(--r); flex-shrink:0
}
.hamburger span { display:block; width:20px; height:2px; background:#FFF; border-radius:2px; transition:var(--tr) }
.hamburger.open span:nth-child(1) { transform:rotate(45deg) translate(5px,5px) }
.hamburger.open span:nth-child(2) { opacity:0; transform:scaleX(0) }
.hamburger.open span:nth-child(3) { transform:rotate(-45deg) translate(5px,-5px) }
/* Menu mobile */
.mob-overlay { display:none; position:fixed; inset:0; z-index:998; background:rgba(0,0,0,.5); backdrop-filter:blur(4px) }
.mob-overlay.open { display:block }
.mob-menu {
  position:fixed; top:0; right:0; bottom:0; z-index:999;
  width:min(310px,88vw); background:#050D1F;
  border-left:1px solid rgba(255,255,255,.08);
  display:flex; flex-direction:column;
  transform:translateX(100%); transition:transform .32s cubic-bezier(.4,0,.2,1);
  overflow-y:auto
}
.mob-menu.open { transform:translateX(0) }
.mob-head { display:flex; align-items:center; justify-content:space-between; padding:18px 20px; border-bottom:1px solid rgba(255,255,255,.07) }
.mob-head img { height:26px; width:auto }
.mob-close { width:36px; height:36px; border-radius:50%; background:rgba(255,255,255,.08); border:none; color:#FFF; font-size:1.1rem; display:flex; align-items:center; justify-content:center }
.mob-nav a, .mob-sub-toggle {
  display:flex; align-items:center; justify-content:space-between;
  color:rgba(255,255,255,.82); font-size:.97rem; font-family:'Outfit',sans-serif; font-weight:600;
  padding:14px 20px; border-bottom:1px solid rgba(255,255,255,.05);
  background:none; border-left:none; border-right:none; border-top:none; width:100%; text-align:left; cursor:pointer
}
.mob-nav a:hover, .mob-sub-toggle:hover { color:var(--cyan); background:rgba(0,200,255,.04) }
.mob-sub { display:none; background:rgba(255,255,255,.02) }
.mob-sub.open { display:block }
.mob-sub a { padding:11px 20px 11px 36px; font-family:'Manrope',sans-serif; font-weight:500; font-size:.9rem }
.mob-foot { padding:16px 20px; border-top:1px solid rgba(255,255,255,.07); display:flex; flex-direction:column; gap:10px }

/* ── HERO ── */
.hero {
  min-height:100vh; background:#050D1F;
  position:relative; overflow:hidden;
  display:flex; align-items:center;
  padding-top:var(--nav-h)
}
.hero-glow {
  position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(ellipse 65% 55% at 65% 35%, rgba(24,84,212,.25) 0%, transparent 70%),
    radial-gradient(ellipse 40% 40% at 90% 75%, rgba(0,200,255,.15) 0%, transparent 60%),
    radial-gradient(ellipse 45% 45% at 5% 85%,  rgba(10,255,184,.07) 0%, transparent 60%)
}
.hero-grid {
  position:absolute; inset:0;
  background-image:linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
  background-size:60px 60px;
  mask-image:radial-gradient(ellipse 100% 80% at 50% 0%, black 40%, transparent 100%);
  -webkit-mask-image:radial-gradient(ellipse 100% 80% at 50% 0%, black 40%, transparent 100%)
}
.hero-inner { display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center; position:relative; z-index:1; padding:64px 0 }
.hero-tag { margin-bottom:20px }
.hero-h1 { color:#FFFFFF; margin-bottom:20px }
.hero-p { color:#A8C0E0; font-size:1.05rem; margin-bottom:36px; max-width:480px }
.hero-actions { display:flex; gap:14px; flex-wrap:wrap }
/* Dashboard visuel hero */
.hero-dash {
  background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.1);
  border-radius:var(--rxl); padding:24px; backdrop-filter:blur(20px)
}
.hero-dash-title { font-size:.72rem; font-weight:700; color:var(--cyan); text-transform:uppercase; letter-spacing:.08em; margin-bottom:16px; font-family:'Outfit',sans-serif }
.prod-row {
  display:flex; align-items:center; gap:12px;
  padding:11px 16px; border-radius:12px; margin-bottom:10px;
  border:1px solid; transition:var(--tr)
}
.prod-row:hover { transform:translateX(4px) }
.prod-row-dot { width:12px; height:12px; border-radius:50%; flex-shrink:0 }
.prod-row-name { font-weight:600; font-size:.88rem; color:#FFFFFF; font-family:'Outfit',sans-serif }
.prod-row-desc { font-size:.72rem; color:rgba(255,255,255,.45) }
.prod-row-badge { margin-left:auto; padding:2px 10px; border-radius:100px; font-size:.68rem; font-weight:700; font-family:'Outfit',sans-serif }

/* ── STATS ── */
.stats-bar { background:#081428; padding:40px 0; border-top:1px solid rgba(255,255,255,.05); border-bottom:1px solid rgba(255,255,255,.05) }
.stats-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:24px }
.stat-item { text-align:center }
.stat-num {
  font-family:'Outfit',sans-serif; font-size:2.4rem; font-weight:800;
  background:linear-gradient(135deg,#FFFFFF,var(--cyan));
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
  display:block; line-height:1
}
.stat-label { color:#6A90B8; font-size:.82rem; margin-top:5px }

/* ── PRODUITS GRID ── */
.produits-wrap { background:#050D1F; padding:88px 0 }
.produits-grid {
  display:grid !important;
  grid-template-columns:repeat(3,1fr) !important;
  gap:24px
}
.produits-grid-2 {
  display:grid !important;
  grid-template-columns:repeat(2,1fr) !important;
  gap:24px; max-width:800px; margin:24px auto 0
}
.prod-card {
  background:#0C1E3C; border:1px solid rgba(255,255,255,.09);
  border-radius:var(--rl); padding:32px 28px;
  display:flex; flex-direction:column;
  position:relative; overflow:hidden; transition:var(--tr)
}
.prod-card::before { content:''; position:absolute; top:0; left:0; right:0; height:3px; border-radius:var(--rl) var(--rl) 0 0 }
.prod-card:hover { transform:translateY(-5px); border-color:rgba(255,255,255,.18) }
.prod-card.gestcom::before { background:#F59E0B }
.prod-card.gestcom:hover { box-shadow:0 20px 60px rgba(245,158,11,.18) }
.prod-card.edupay::before  { background:#10B981 }
.prod-card.edupay:hover    { box-shadow:0 20px 60px rgba(16,185,129,.18) }
.prod-card.med::before     { background:#EF4444 }
.prod-card.med:hover       { box-shadow:0 20px 60px rgba(239,68,68,.18) }
.prod-card.paie::before    { background:#8B5CF6 }
.prod-card.paie:hover      { box-shadow:0 20px 60px rgba(139,92,246,.18) }
.prod-card.compta::before  { background:#1854D4 }
.prod-card.compta:hover    { box-shadow:0 20px 60px rgba(24,84,212,.18) }
.prod-icon { width:52px; height:52px; border-radius:var(--rm); display:flex; align-items:center; justify-content:center; font-size:1.5rem; margin-bottom:18px }
.prod-card h3 { color:#FFFFFF; margin-bottom:8px }
.prod-card > p { color:#A8C0E0; font-size:.9rem; flex:1; margin-bottom:20px; line-height:1.65 }
.prod-feats { display:flex; flex-direction:column; gap:8px; margin-bottom:24px }
.prod-feat { display:flex; align-items:center; gap:8px; color:#C0D8F0; font-size:.84rem }
.prod-feat::before { content:'✓'; font-weight:800; font-size:.75rem; flex-shrink:0 }
.gestcom .prod-feat::before { color:#F59E0B }
.edupay  .prod-feat::before { color:#10B981 }
.med     .prod-feat::before { color:#EF4444 }
.paie    .prod-feat::before { color:#A78BFA }
.compta  .prod-feat::before { color:#60A5FA }
.prod-btn {
  display:flex; align-items:center; justify-content:center; gap:8px;
  padding:11px 20px; border-radius:var(--rm);
  font-family:'Outfit',sans-serif; font-weight:600; font-size:.88rem;
  border:1.5px solid; transition:var(--tr); margin-top:auto; cursor:pointer
}
.prod-btn.gestcom { color:#F59E0B; border-color:rgba(245,158,11,.3); background:rgba(245,158,11,.08) }
.prod-btn.gestcom:hover { background:#F59E0B; color:#FFF }
.prod-btn.edupay  { color:#10B981; border-color:rgba(16,185,129,.3); background:rgba(16,185,129,.08) }
.prod-btn.edupay:hover  { background:#10B981; color:#FFF }
.prod-btn.med     { color:#EF4444; border-color:rgba(239,68,68,.3); background:rgba(239,68,68,.08) }
.prod-btn.med:hover     { background:#EF4444; color:#FFF }
.prod-btn.paie    { color:#A78BFA; border-color:rgba(139,92,246,.3); background:rgba(139,92,246,.08) }
.prod-btn.paie:hover    { background:#8B5CF6; color:#FFF }
.prod-btn.compta  { color:#60A5FA; border-color:rgba(24,84,212,.3); background:rgba(24,84,212,.1) }
.prod-btn.compta:hover  { background:#1854D4; color:#FFF }

/* ── AVANTAGES / WHY ── */
.why-grid { display:grid !important; grid-template-columns:repeat(3,1fr) !important; gap:24px }
.why-card {
  background:#FFFFFF; border:1px solid #E2EAF5;
  border-radius:var(--rl); padding:32px 24px; transition:var(--tr);
  position:relative; overflow:hidden
}
.why-card::after {
  content:''; position:absolute; bottom:0; left:0; right:0; height:3px;
  background:linear-gradient(90deg,var(--blue),var(--cyan));
  transform:scaleX(0); transition:var(--tr); transform-origin:left
}
.why-card:hover { transform:translateY(-5px); box-shadow:0 16px 48px rgba(24,84,212,.12) }
.why-card:hover::after { transform:scaleX(1) }
.why-icon { width:52px; height:52px; border-radius:var(--rm); background:#EDF3FF; display:flex; align-items:center; justify-content:center; font-size:1.5rem; margin-bottom:16px; transition:var(--tr) }
.why-card:hover .why-icon { background:linear-gradient(135deg,var(--blue),var(--cyan)) }
.why-card h3 { color:#0C1E3C; margin-bottom:8px }
.why-card p  { color:#3D5080; font-size:.9rem }

/* ── PROCESSUS ── */
.process-grid {
  display:grid !important; grid-template-columns:repeat(4,1fr) !important;
  gap:32px; position:relative; align-items:start
}
.process-grid::before {
  content:''; position:absolute; top:27px; left:calc(12.5%); right:calc(12.5%); height:2px;
  background:linear-gradient(90deg,var(--blue),var(--cyan)); z-index:0; pointer-events:none
}
.process-step { text-align:center; position:relative; z-index:1; display:flex; flex-direction:column; align-items:center }
.step-num {
  width:54px; height:54px; border-radius:50%;
  background:linear-gradient(135deg,var(--blue),var(--blue-l));
  display:flex; align-items:center; justify-content:center;
  font-family:'Outfit',sans-serif; font-weight:800; font-size:1.1rem;
  color:#FFFFFF; margin:0 auto 16px; box-shadow:0 0 24px rgba(24,84,212,.45);
  position:relative; z-index:2; flex-shrink:0
}
.process-step h4 { margin-bottom:8px; color:#0C1E3C; font-size:.97rem }
.process-step p  { color:#3D5080; font-size:.86rem; line-height:1.6 }

/* ── TÉMOIGNAGES ── */
.temo-grid { display:grid !important; grid-template-columns:repeat(3,1fr) !important; gap:24px }
.temo-card {
  background:#FFFFFF; border:1px solid #E2EAF5;
  border-radius:var(--rl); padding:28px 24px; transition:var(--tr)
}
.temo-card:hover { box-shadow:0 12px 40px rgba(24,84,212,.1); border-color:#C0D0EE }
.temo-stars { color:#F59E0B; margin-bottom:14px; font-size:1.05rem }
.temo-card p { font-style:italic; font-size:.93rem; color:#2A3E60; margin-bottom:18px }
.temo-auteur { display:flex; align-items:center; gap:12px }
.temo-avatar {
  width:44px; height:44px; border-radius:50%; flex-shrink:0;
  background:linear-gradient(135deg,var(--blue),var(--cyan));
  display:flex; align-items:center; justify-content:center;
  color:#FFF; font-weight:700; font-size:.85rem; font-family:'Outfit',sans-serif
}
.temo-nom  { font-weight:600; font-size:.88rem; color:#0C1E3C; font-family:'Outfit',sans-serif }
.temo-role { font-size:.78rem; color:#6A80A0 }

/* ── SERVICES ── */
.services-grid { display:grid !important; grid-template-columns:repeat(3,1fr) !important; gap:28px }
.svc-card {
  background:#0C1E3C; border:1px solid rgba(255,255,255,.09);
  border-radius:var(--rl); padding:36px 28px; transition:var(--tr)
}
.svc-card:hover { transform:translateY(-4px); border-color:rgba(0,200,255,.3); box-shadow:0 16px 48px rgba(0,200,255,.1) }
.svc-num { font-family:'Outfit',sans-serif; font-size:2.5rem; font-weight:800; color:rgba(0,200,255,.2); line-height:1; margin-bottom:14px }
.svc-card h3 { color:#FFFFFF; margin-bottom:10px }
.svc-card p  { color:#A8C0E0; font-size:.9rem; margin-bottom:20px }
.svc-tags { display:flex; flex-wrap:wrap; gap:8px }
.svc-tag { padding:4px 12px; border-radius:100px; background:rgba(255,255,255,.07); color:rgba(255,255,255,.6); font-size:.76rem; font-weight:600 }

/* ── CTA BANNER ── */
.cta-banner {
  background:linear-gradient(135deg,#0D2660,#1854D4);
  border-radius:var(--rxl); padding:60px 48px; text-align:center; position:relative; overflow:hidden
}
.cta-banner::before {
  content:''; position:absolute; top:-40%; right:-10%; width:500px; height:500px;
  background:radial-gradient(circle, rgba(0,200,255,.2) 0%, transparent 70%); pointer-events:none
}
.cta-banner h2 { color:#FFFFFF; margin-bottom:14px }
.cta-banner p  { color:rgba(255,255,255,.75); margin-bottom:32px; max-width:520px; margin-left:auto; margin-right:auto }
.cta-actions { display:flex; gap:14px; justify-content:center; flex-wrap:wrap }

/* ── FORMULAIRES ── */
.form-wrap {
  background:#050D1F; padding:88px 0; position:relative; overflow:hidden
}
.form-wrap::before {
  content:''; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(ellipse 60% 60% at 80% 50%, rgba(0,200,255,.08) 0%, transparent 70%),
             radial-gradient(ellipse 40% 40% at 20% 80%, rgba(24,84,212,.1) 0%, transparent 60%)
}
.form-inner { display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:start; position:relative; z-index:1 }
.form-left h2 { color:#FFFFFF; margin-bottom:14px }
.form-left > p { color:#A8C0E0; margin-bottom:28px }
.form-advs  { display:flex; flex-direction:column; gap:14px }
.form-adv   { display:flex; align-items:flex-start; gap:12px }
.adv-icon   { width:36px; height:36px; flex-shrink:0; background:rgba(0,200,255,.1); border:1px solid rgba(0,200,255,.2); border-radius:9px; display:flex; align-items:center; justify-content:center; font-size:1rem }
.adv-text strong { color:#FFFFFF; display:block; font-size:.92rem }
.adv-text span   { color:#A8C0E0; font-size:.82rem }
/* Formulaire card */
.form-card {
  background:#0C1E3C; border:1px solid rgba(255,255,255,.12);
  border-radius:var(--rxl); padding:36px 32px
}
.form-title { font-family:'Outfit',sans-serif; font-size:1.15rem; font-weight:700; color:#FFFFFF; margin-bottom:24px }
.f-group { margin-bottom:16px }
.f-label { display:block; font-size:.8rem; font-weight:600; color:#88B4D8; margin-bottom:7px; letter-spacing:.03em }
.f-input {
  width:100%; background:#102548; border:1.5px solid #1E3860;
  border-radius:var(--r); padding:12px 14px;
  color:#FFFFFF; font-size:.92rem; font-family:'Manrope',sans-serif;
  transition:border-color .2s, background .2s; outline:none; -webkit-appearance:none
}
.f-input::placeholder { color:#3A5878 }
.f-input:focus { border-color:var(--cyan); background:#122B50; box-shadow:0 0 0 3px rgba(0,200,255,.12) }
.f-select {
  appearance:none; -webkit-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%2388B4D8' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 14px center; padding-right:40px; cursor:pointer
}
.f-select option { background:#0C1E3C; color:#FFFFFF }
.f-textarea { resize:vertical; min-height:90px }
.f-grid2 { display:grid; grid-template-columns:1fr 1fr; gap:14px }
.f-note { font-size:.76rem; color:#3A5878; margin-top:10px; text-align:center }
.f-note a { color:var(--cyan) }
.f-success { display:none; text-align:center; padding:28px }
.f-success .ico { font-size:3rem; margin-bottom:14px }
.f-success h3 { color:#FFFFFF; margin-bottom:8px }
.f-success p  { color:#A8C0E0 }

/* ── PAGE HERO (pages internes) ── */
.page-hero {
  background:#050D1F !important; padding-top:calc(var(--nav-h) + 56px); padding-bottom:72px;
  text-align:center; position:relative; overflow:hidden
}
.page-hero h1 { color:#FFFFFF; margin-bottom:14px }
.page-hero p  { color:#A8C0E0; max-width:580px; margin:0 auto; font-size:1.05rem }
.breadcrumb { display:flex; align-items:center; gap:8px; justify-content:center; font-size:.82rem; color:#6A90B8; margin-bottom:20px }
.breadcrumb a { color:#4A90D4; transition:var(--tr) }
.breadcrumb a:hover { color:var(--cyan) }
.breadcrumb-sep { color:#2A4060 }

/* ── CONTACT CARDS ── */
.contact-cards { display:flex; flex-direction:column; gap:16px }
.contact-card {
  background:#0C1E3C; border:1px solid rgba(255,255,255,.1);
  border-radius:var(--rm); padding:18px 20px;
  display:flex; align-items:flex-start; gap:14px; transition:var(--tr)
}
.contact-card:hover { border-color:var(--cyan); background:#102548 }
.cc-icon { width:40px; height:40px; flex-shrink:0; background:rgba(0,200,255,.12); border:1px solid rgba(0,200,255,.22); border-radius:10px; display:flex; align-items:center; justify-content:center; font-size:1rem }
.cc-lbl { font-size:.75rem; color:#6FA3C8; margin-bottom:2px }
.cc-val { color:#FFFFFF; font-size:.92rem; font-weight:600 }
.cc-val a { color:#FFFFFF; transition:var(--tr) }
.cc-val a:hover { color:var(--cyan) }

/* ── FOOTER ── */
.footer { background:#050D1F; border-top:1px solid rgba(255,255,255,.07) }
.footer-main { display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:48px; padding:64px 0 48px }
.footer-logo img { height:28px; width:auto; margin-bottom:14px }
.footer-desc { color:#6A90B8; font-size:.88rem; max-width:260px; line-height:1.7; margin-bottom:18px }
.footer-contacts a { display:flex; align-items:center; gap:8px; color:#6A90B8; font-size:.84rem; margin-bottom:9px; transition:var(--tr) }
.footer-contacts a:hover { color:var(--cyan) }
.footer-col h5 { color:#FFFFFF; margin-bottom:16px; font-size:.88rem; font-family:'Outfit',sans-serif }
.footer-links { display:flex; flex-direction:column; gap:9px }
.footer-links a { color:#6A90B8; font-size:.86rem; transition:var(--tr) }
.footer-links a:hover { color:#FFFFFF; padding-left:3px }
.footer-bottom { border-top:1px solid rgba(255,255,255,.06); padding:20px 0; display:flex; align-items:center; justify-content:space-between; gap:16px }
.footer-copy { color:#3A5878; font-size:.8rem }
.footer-legal { display:flex; gap:20px }
.footer-legal a { color:#3A5878; font-size:.8rem; transition:var(--tr) }
.footer-legal a:hover { color:#FFFFFF }

/* ── WHATSAPP ── */
.wa-float { position:fixed; bottom:24px; right:24px; z-index:900 }
.wa-btn { width:56px; height:56px; border-radius:50%; background:#25D366; color:#FFF; border:none; display:flex; align-items:center; justify-content:center; box-shadow:0 8px 24px rgba(37,211,102,.4); transition:var(--tr); text-decoration:none; cursor:pointer }
.wa-btn:hover { transform:scale(1.1) }
.wa-pulse { position:absolute; inset:0; border-radius:50%; background:#25D366; animation:wapulse 2.5s ease-out infinite; opacity:0 }
@keyframes wapulse { 0%{transform:scale(1);opacity:.5} 100%{transform:scale(1.65);opacity:0} }
.wa-tip { position:absolute; right:66px; bottom:10px; background:#0C1E3C; color:#FFF; padding:7px 13px; border-radius:var(--r); font-size:.8rem; white-space:nowrap; opacity:0; transform:translateX(6px); transition:var(--tr); pointer-events:none }
.wa-float:hover .wa-tip { opacity:1; transform:translateX(0) }

/* ── PRODUIT PAGE HERO ── */
.prod-hero {
  background:#050D1F !important; padding-top:calc(var(--nav-h) + 48px); padding-bottom:80px;
  position:relative; overflow:hidden; min-height:100vh;
  display:flex; align-items:center
}
.prod-hero > .container { width:100%; position:relative; z-index:1 }
.prod-hero-inner { display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center }
.prod-tag { display:inline-flex; align-items:center; gap:8px; padding:6px 16px; border-radius:100px; font-size:.78rem; font-weight:700; font-family:'Outfit',sans-serif; margin-bottom:18px }
.prod-hero h1 { color:#FFFFFF; margin-bottom:16px }
.prod-hero > .container > .prod-hero-inner > div > p { color:#A8C0E0; font-size:1.05rem; margin-bottom:28px; max-width:480px }
.feat-list { display:flex; flex-direction:column; gap:10px; margin-bottom:32px }
.feat-item { display:flex; align-items:center; gap:10px }
.feat-check { width:20px; height:20px; border-radius:50%; flex-shrink:0; display:flex; align-items:center; justify-content:center; margin-top:1px }
.feat-check svg { width:10px; height:10px }
.feat-txt { color:#D0E4F8; font-size:.92rem }
.prod-hero-actions { display:flex; gap:14px; flex-wrap:wrap }
.prod-dash { background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.1); border-radius:var(--rxl); padding:28px; backdrop-filter:blur(20px) }

/* ── À PROPOS VALEURS ── */
.valeurs-grid { display:grid !important; grid-template-columns:repeat(2,1fr) !important; gap:20px }
.valeur-card { background:#0C1E3C; border:1px solid rgba(255,255,255,.08); border-radius:var(--rm); padding:24px; transition:var(--tr) }
.valeur-card:hover { border-color:rgba(24,84,212,.4) }
.valeur-ico { font-size:1.5rem; margin-bottom:10px }
.valeur-card h4 { color:#FFFFFF; margin-bottom:6px }
.valeur-card p  { color:#A8C0E0; font-size:.88rem }

/* ── RESPONSIVE tablette ── */
@media (max-width:1024px) {
  .hero-inner { grid-template-columns:1fr }
  .hero-dash  { display:none }
  .form-inner { grid-template-columns:1fr; gap:40px }
  .footer-main { grid-template-columns:1fr 1fr; gap:32px }
  .prod-hero-inner { grid-template-columns:1fr }
  .prod-dash  { display:none }
  .process-grid { grid-template-columns:repeat(2,1fr) !important }
  .process-grid::before { display:none }
  .produits-grid { grid-template-columns:repeat(2,1fr) !important }
  .produits-grid-2 { grid-template-columns:repeat(2,1fr) !important; max-width:100% }
  .why-grid { grid-template-columns:repeat(2,1fr) !important }
  .services-grid { grid-template-columns:repeat(2,1fr) !important }
}

/* ── RESPONSIVE mobile ── */
@media (max-width:768px) {
  :root { --nav-h:62px }
  .nav-links { display:none }
  .nav-cta   { display:none }
  .hamburger { display:flex }
  .section, .section-dk, .section-nv, .section-gr, .produits-wrap, .form-wrap { padding:60px 0 }
  .container { padding:0 16px }
  .hero-actions { flex-direction:column }
  .hero-actions .btn { width:100%; justify-content:center }
  .stats-grid { grid-template-columns:repeat(2,1fr); gap:16px }
  .produits-grid  { grid-template-columns:1fr !important }
  .produits-grid-2 { grid-template-columns:1fr !important }
  .why-grid   { grid-template-columns:1fr !important }
  .services-grid { grid-template-columns:1fr !important }
  .temo-grid  { grid-template-columns:1fr !important }
  .process-grid { grid-template-columns:1fr !important }
  .process-grid::before { display:none }
  .footer-main { grid-template-columns:1fr; gap:28px }
  .footer-bottom { flex-direction:column; text-align:center }
  .f-grid2  { grid-template-columns:1fr }
  .form-card { padding:24px 18px }
  .cta-banner { padding:40px 24px }
  .cta-actions { flex-direction:column }
  .cta-actions .btn { width:100%; justify-content:center }
  .page-hero { padding-top:calc(var(--nav-h) + 40px); padding-bottom:56px }
  .prod-hero  { padding-top:calc(var(--nav-h) + 40px); min-height:auto }
  .valeurs-grid { grid-template-columns:1fr !important }
}
@media (max-width:480px) {
  h1 { font-size:2rem }
  h2 { font-size:1.6rem }
  .stat-num { font-size:2rem }
  .prod-card { padding:24px 18px }
}