/* ================================================================
   KTF — Kaniaga Transport France | Design System v3
   ================================================================ */
/* ── Typographie dakarcitytransport.com ──
   Oswald  → titres, hero, headings (condensé, fort, impact)
   Roboto  → corps, navigation, paragraphes
   Roboto  → sous-titres et UI
   ──────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@300;400;500;600;700&family=Roboto:ital,wght@0,300;0,400;0,500;0,700;0,900;1,400;1,700&display=swap');

/* ── TOKENS ── */
:root {
  --blue:      #1EAAE2; --blue-dk:   #1590C4; --blue-lt:   #5CCAF5;
  --red:       #D93A2B; --red-dk:    #B42E21;
  --orange:    #F07828; --orange-dk: #D4641A;
  --yellow:    #F5C800; --yellow-dk: #D4AA00;
  --dark:      #06111F; --dark-2:    #0B1E35; --dark-3:    #112948;
  --white:     #FFFFFF; --off:       #F4F8FC;
  --g100:      #E8EEF5; --g300:      #B8C6D5; --g500:      #7590A8; --g700:      #3A5068;
  --text:      #152235;
  --fd: 'Oswald',sans-serif;
  --fb: 'Roboto',sans-serif;
  --fs: 'Roboto',sans-serif;
  --ease: cubic-bezier(.4,0,.2,1);
  --r1:3px; --r2:10px; --r3:18px; --r4:32px;
  --sh-nav:  0 6px 36px rgba(6,17,31,.16);
  --sh-card: 0 10px 44px rgba(6,17,31,.10);
  --sh-lift: 0 20px 60px rgba(6,17,31,.14);
  --z-bar:40; --z-hdr:200; --z-up:300;
}

/* ── RESET ── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;font-size:16px}
body{font-family:var(--fb);color:var(--text);background:var(--white);
  -webkit-font-smoothing:antialiased;overflow-x:hidden}
img{display:block;max-width:100%}
a{text-decoration:none;color:inherit}
ul{list-style:none}
button{cursor:pointer;border:none;background:none;font-family:inherit}
.container{width:100%;max-width:1260px;margin:0 auto;padding:0 1.5rem}

/* ── BOUTONS ── */
.btn{display:inline-flex;align-items:center;gap:.55rem;padding:.82rem 1.9rem;
  font-family:var(--fb);font-weight:700;font-size:.87rem;letter-spacing:.07em;
  text-transform:uppercase;border-radius:var(--r1);transition:all .26s var(--ease);
  white-space:nowrap;position:relative;overflow:hidden}
.btn-primary{background:var(--blue);color:#fff;box-shadow:0 5px 20px rgba(30,170,226,.4)}
.btn-primary:hover{background:var(--blue-dk);transform:translateY(-3px);box-shadow:0 10px 28px rgba(30,170,226,.5)}
.btn-outline-w{background:rgba(255,255,255,.1);color:#fff;border:1.5px solid rgba(255,255,255,.4);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.btn-outline-w:hover{background:rgba(255,255,255,.22);border-color:rgba(255,255,255,.7);transform:translateY(-3px)}
.btn-orange{background:var(--orange);color:#fff;box-shadow:0 5px 20px rgba(240,120,40,.4)}
.btn-orange:hover{background:var(--orange-dk);transform:translateY(-3px);box-shadow:0 10px 28px rgba(240,120,40,.5)}
.btn-outline-blue{background:transparent;color:var(--blue);border:2px solid var(--blue)}
.btn-outline-blue:hover{background:var(--blue);color:#fff;transform:translateY(-3px)}

/* ── SECTION HEADERS ── */
.section-eyebrow{display:inline-flex;align-items:center;gap:.6rem;font-family:var(--fs);
  font-size:.72rem;font-weight:700;letter-spacing:.22em;text-transform:uppercase;
  color:var(--blue);margin-bottom:1rem}
.section-eyebrow::before{content:'';display:block;width:28px;height:2px;
  background:var(--blue);border-radius:2px}
.section-title{font-family:var(--fd);font-weight:600;
  font-size:clamp(1.9rem,3.2vw,2.7rem);line-height:1.1;letter-spacing:.03em;
  text-transform:uppercase;color:var(--dark);margin-bottom:1rem}
.section-title span{color:var(--blue)}
.section-sub{font-family:var(--fs);font-size:1rem;line-height:1.75;color:var(--g500);max-width:520px}
.section-divider{display:flex;align-items:center;gap:.65rem;margin:1.1rem 0 2.5rem}
.section-divider-bar{width:48px;height:3px;border-radius:2px;background:var(--blue)}
.section-divider-dot{width:8px;height:8px;border-radius:50%;background:var(--orange)}

/* ── SCROLL REVEAL ── */
[data-reveal]{opacity:0;transform:translateY(30px);transition:opacity .65s var(--ease),transform .65s var(--ease)}
[data-reveal].revealed{opacity:1;transform:translateY(0)}

/* ================================================================
   TOPBAR — masquée sur mobile
   ================================================================ */
.topbar{background:var(--dark);padding:.5rem 0;
  border-bottom:1px solid rgba(255,255,255,.06);
  position:relative;z-index:var(--z-bar)}
.topbar__inner{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap}
.topbar__left{display:flex;align-items:center;gap:1.25rem}
.topbar__item{display:flex;align-items:center;gap:.45rem;font-family:var(--fs);font-size:.74rem;
  color:rgba(255,255,255,.5);transition:color .2s}
.topbar__item:hover{color:var(--blue-lt)}
.topbar__item-icon{width:21px;height:21px;border-radius:50%;
  background:rgba(30,170,226,.15);display:flex;align-items:center;justify-content:center;
  color:var(--blue);font-size:.62rem;flex-shrink:0}
.topbar__item-icon--orange{background:rgba(240,120,40,.15);color:var(--orange)}
.topbar__item-icon--red{background:rgba(217,58,43,.15);color:var(--red)}
.topbar__sep{width:1px;height:13px;background:rgba(255,255,255,.1)}
.topbar__right{display:flex;align-items:center;gap:1.25rem}
.topbar__social{display:flex;align-items:center;gap:.5rem}
.topbar__social-lbl{font-family:var(--fs);font-size:.7rem;color:rgba(255,255,255,.35);letter-spacing:.05em}
.topbar__social a{width:26px;height:26px;border-radius:50%;border:1px solid rgba(255,255,255,.1);
  display:flex;align-items:center;justify-content:center;
  color:rgba(255,255,255,.45);font-size:.68rem;transition:all .22s}
.topbar__social a:hover{background:var(--blue);border-color:var(--blue);color:#fff;transform:translateY(-2px)}
.topbar__item--hours{font-size:.7rem}

/* ================================================================
   HEADER
   ================================================================ */
.hdr{position:sticky;top:0;z-index:var(--z-hdr);background:#fff;
  border-bottom:1px solid var(--g100);box-shadow:var(--sh-nav);
  transition:background .32s,box-shadow .32s}
.hdr--scrolled{background:rgba(255,255,255,.97);
  -webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);
  box-shadow:0 4px 28px rgba(6,17,31,.13)}
.hdr__inner{display:flex;align-items:center;justify-content:space-between;
  height:82px;padding:0 1.5rem;gap:1rem}

/* Logo */
.logo{display:flex;align-items:center;flex-shrink:0}
.logo__svg{height:68px;width:auto;display:block}

/* Séparateur */
.hdr__divider{width:2px;height:36px;flex-shrink:0;margin:0 1rem;
  background:linear-gradient(to bottom,var(--blue) 33%,var(--red) 33% 66%,var(--orange) 66%);
  border-radius:2px;opacity:.3}

/* Nav desktop */
.nav{display:flex;align-items:center;gap:.05rem}
.nav__item{position:relative}
.nav__lnk{display:flex;align-items:center;gap:.28rem;padding:.58rem .88rem;
  font-family:var(--fb);font-weight:500;font-size:.88rem;color:var(--text);
  border-radius:var(--r1);transition:all .22s;white-space:nowrap}
.nav__lnk .chev{font-size:.58rem;transition:transform .22s}
.nav__item:hover>.nav__lnk{color:var(--blue);background:rgba(30,170,226,.07)}
/* ── Lien de navigation actif (page courante) ── */
.nav__lnk--active {
  color: var(--blue) !important;
  background: rgba(30,170,226,.09);
  border-radius: var(--r1);
}
.nav__lnk--active::after {
  content: '';
  position: absolute;
  bottom: -1px; left: 50%; transform: translateX(-50%);
  width: 24px; height: 2px;
  background: var(--blue);
  border-radius: 2px;
}
.nav__item { position: relative; }
/* Drawer actif */
.drawer .nav__lnk--active {
  color: var(--blue) !important;
  background: rgba(30,170,226,.08);
  border-left: 3px solid var(--blue);
  font-weight: 700;
}
.nav__item:hover>.nav__lnk .chev{transform:rotate(180deg)}
.nav__drop{position:absolute;top:calc(100% + 4px);left:50%;
  transform:translateX(-50%) translateY(-10px);
  background:#fff;border:1px solid var(--g100);border-top:3px solid var(--blue);
  border-radius:0 0 var(--r2) var(--r2);box-shadow:var(--sh-card);min-width:215px;
  opacity:0;visibility:hidden;transition:all .22s var(--ease);z-index:20}
.nav__item:hover .nav__drop{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}
.nav__drop a{display:flex;align-items:center;gap:.5rem;padding:.68rem 1.1rem;
  font-family:var(--fs);font-size:.84rem;color:var(--g700);
  border-bottom:1px solid var(--g100);transition:all .18s}
.nav__drop a:last-child{border-bottom:none}
.nav__drop a:hover{color:var(--blue);background:rgba(30,170,226,.06);padding-left:1.45rem}
.nav__drop a i{color:var(--blue);font-size:.62rem}

/* CTA */
.hdr__cta{display:flex;align-items:center;gap:.75rem;flex-shrink:0}
.btn-quote{padding:.65rem 1.45rem;font-size:.82rem}

/* Burger */
.burger{display:none;flex-direction:column;justify-content:center;gap:6px;
  width:44px;height:44px;border-radius:var(--r1);border:1.5px solid var(--g100);
  background:#fff;padding:9px;flex-shrink:0;transition:border-color .2s}
.burger:hover,.burger.open{border-color:var(--blue)}
.burger span{display:block;height:2px;background:var(--dark);border-radius:2px;
  transition:all .26s var(--ease);transform-origin:center}
.burger.open span:nth-child(1){transform:translateY(8px) rotate(45deg)}
.burger.open span:nth-child(2){opacity:0;transform:scaleX(0)}
.burger.open span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}

/* Overlay */
.drawer-overlay{display:none;position:fixed;inset:0;background:rgba(6,17,31,.5);
  z-index:calc(var(--z-hdr) - 2);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
.drawer-overlay.show{display:block}

/* ── DRAWER MOBILE ── */
.drawer{position:fixed;top:0;left:0;bottom:0;width:min(320px, 88vw);
  background:#fff;transform:translateX(-100%);transition:transform .34s var(--ease);
  z-index:calc(var(--z-hdr) + 1);overflow-y:auto;-webkit-overflow-scrolling:touch;
  display:flex;flex-direction:column;box-shadow:8px 0 40px rgba(6,17,31,.18)}
.drawer.open{transform:translateX(0)}

/* Tête du drawer */
.drawer__head{display:flex;align-items:center;justify-content:space-between;
  padding:1rem 1.25rem;border-bottom:3px solid var(--blue);background:var(--off);flex-shrink:0}
.drawer__close{width:36px;height:36px;border-radius:50%;border:1.5px solid var(--g100);
  display:flex;align-items:center;justify-content:center;color:var(--g700);
  font-size:1rem;transition:all .2s}
.drawer__close:hover{background:var(--red);border-color:var(--red);color:#fff}

/* Nav du drawer */
.drawer__nav{flex:1}
.drawer .nav__item{border-bottom:1px solid var(--g100)}
.drawer .nav__lnk{display:flex;justify-content:space-between;align-items:center;
  padding:1rem 1.25rem;font-size:.95rem;border-radius:0;width:100%;color:var(--text)}
.drawer .nav__lnk:hover{background:rgba(30,170,226,.06);color:var(--blue)}
.drawer .nav__item.open>.nav__lnk{color:var(--blue)}
.drawer .nav__item.open>.nav__lnk .chev{transform:rotate(180deg);color:var(--blue)}
.drawer .nav__drop{position:static;transform:none !important;opacity:1;visibility:visible;
  box-shadow:none;border:none;border-radius:0;background:var(--off);
  max-height:0;overflow:hidden;transition:max-height .32s var(--ease)}
.drawer .nav__item.open .nav__drop{max-height:500px}
.drawer .nav__drop a{padding:.75rem 1.6rem;font-size:.88rem;border-bottom:1px solid var(--g100)}
.drawer .nav__drop a:hover{padding-left:2rem;color:var(--blue)}

/* Contacts dans drawer */
.drawer__contacts{padding:1.1rem 1.25rem;background:var(--dark-2);
  border-top:1px solid rgba(255,255,255,.06);display:flex;flex-direction:column;gap:.85rem}
.drawer__contact-item{display:flex;align-items:flex-start;gap:.75rem;
  font-family:var(--fs);font-size:.82rem;color:rgba(255,255,255,.6);
  text-decoration:none;transition:color .2s}
.drawer__contact-item:hover{color:var(--blue-lt)}
.drawer__contact-ico{width:30px;height:30px;border-radius:50%;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;font-size:.72rem}
.drawer__contact-ico--blue{background:rgba(30,170,226,.2);color:var(--blue-lt)}
.drawer__contact-ico--orange{background:rgba(240,120,40,.2);color:var(--yellow)}
.drawer__contact-ico--red{background:rgba(217,58,43,.2);color:#f89490}

/* Réseaux dans drawer */
.drawer__social{padding:.9rem 1.25rem;display:flex;align-items:center;gap:.75rem;
  border-top:1px solid rgba(255,255,255,.06);background:var(--dark-2)}
.drawer__social a{width:34px;height:34px;border-radius:50%;border:1px solid rgba(255,255,255,.15);
  display:flex;align-items:center;justify-content:center;
  color:rgba(255,255,255,.5);font-size:.78rem;transition:all .22s}
.drawer__social a:hover{background:var(--blue);border-color:var(--blue);color:#fff;transform:scale(1.1)}

/* Footer drawer */
.drawer__footer{padding:1.1rem 1.25rem;border-top:1px solid var(--g100);flex-shrink:0}
.drawer__footer .btn{width:100%;justify-content:center}

/* ================================================================
   HERO SLIDER
   ================================================================ */
.hero{position:relative;overflow:hidden;height:100vh;min-height:650px;max-height:1000px}
.hero__prog{position:absolute;top:0;left:0;right:0;height:4px;
  background:rgba(255,255,255,.1);z-index:30}
.hero__prog-fill{height:100%;
  background:linear-gradient(90deg,var(--yellow),var(--orange),var(--red),var(--blue));
  width:0%;border-radius:0 2px 2px 0}
.hero__prog-fill.tick{transition-property:width;transition-timing-function:linear}
.hero__track{position:absolute;inset:0}
.hero__slide{position:absolute;inset:0;pointer-events:none}
.hero__bg{position:absolute;inset:0;background-size:cover;background-position:center;
  opacity:0;transform:scale(1.1);
  transition:opacity 1s var(--ease),transform 7s cubic-bezier(.12,0,.04,1)}
.hero__slide.on .hero__bg{opacity:1;transform:scale(1.02)}
.hero__slide.off .hero__bg{opacity:0;transform:scale(.95)}
.hero__ov{position:absolute;inset:0}
.hero__ov--1{background:linear-gradient(108deg,rgba(6,17,31,.94) 0%,rgba(6,17,31,.6) 48%,rgba(6,17,31,.15) 100%)}
.hero__ov--2{background:linear-gradient(to top,rgba(6,17,31,.82) 0%,transparent 55%)}
.hero__ov--3{opacity:.55;transition:background 1.2s}
.hero__slide:nth-child(1) .hero__ov--3{background:radial-gradient(ellipse 55% 80% at 100% 50%,rgba(30,170,226,.2) 0%,transparent 65%)}
.hero__slide:nth-child(2) .hero__ov--3{background:radial-gradient(ellipse 55% 80% at 100% 50%,rgba(217,58,43,.2) 0%,transparent 65%)}
.hero__slide:nth-child(3) .hero__ov--3{background:radial-gradient(ellipse 55% 80% at 100% 50%,rgba(240,120,40,.2) 0%,transparent 65%)}

  
    
  
.hero__grid-tex{display:none}

/* ── Barre tricolore — bandeau horizontal en bas du slider ── */
.hero__stripe{
  position:absolute;bottom:0;left:0;right:0;
  height:5px;z-index:20;
  display:flex;flex-direction:row;
}
.hero__stripe span{flex:1}
.hero__stripe span:nth-child(1){background:var(--blue)}
.hero__stripe span:nth-child(2){background:var(--red)}
.hero__stripe span:nth-child(3){background:var(--orange)}
.hero__wm{position:absolute;right:-1.5rem;top:50%;transform:translateY(-50%) rotate(90deg);
  font-family:var(--fd);font-size:11rem;font-weight:900;color:rgba(255,255,255,.022);
  pointer-events:none;user-select:none;z-index:2;white-space:nowrap}
.hero__particles{position:absolute;inset:0;z-index:3;pointer-events:none;overflow:hidden}
.ptcl{position:absolute;border-radius:50%;opacity:0;animation:rise linear infinite}
@keyframes rise{0%{opacity:0;transform:translateY(0) scale(0)}12%{opacity:.55}88%{opacity:.12}100%{opacity:0;transform:translateY(-88vh) scale(2)}}
.hero__body{position:relative;z-index:10;height:100%;display:flex;align-items:center;padding-top:1.5rem}
.hero__grid-layout{display:grid;grid-template-columns:56% 44%;gap:2rem;align-items:center}
.hero__text{color:#fff}
.hero__eyebrow{display:inline-flex;align-items:center;gap:.55rem;margin-bottom:1.35rem;
  opacity:0;transform:translateX(-32px);
  transition:opacity .5s var(--ease) .06s,transform .5s var(--ease) .06s}
.hero__slide.on .hero__eyebrow{opacity:1;transform:translateX(0)}
.hero__eyebrow-bar{width:36px;height:2.5px;border-radius:2px}
.hero__slide:nth-child(1) .hero__eyebrow-bar{background:linear-gradient(90deg,var(--blue),var(--blue-lt))}
.hero__slide:nth-child(2) .hero__eyebrow-bar{background:linear-gradient(90deg,var(--red),#f56358)}
.hero__slide:nth-child(3) .hero__eyebrow-bar{background:linear-gradient(90deg,var(--orange),var(--yellow))}
.hero__eyebrow-txt{font-family:var(--fs);font-size:.72rem;font-weight:700;letter-spacing:.22em;text-transform:uppercase}
.hero__slide:nth-child(1) .hero__eyebrow-txt{color:var(--blue-lt)}
.hero__slide:nth-child(2) .hero__eyebrow-txt{color:#f89490}
.hero__slide:nth-child(3) .hero__eyebrow-txt{color:var(--yellow)}
.hero__title{font-family:var(--fd);font-weight:600;font-size:clamp(2.6rem,4.5vw,4.8rem);
  line-height:1.06;letter-spacing:.02em;text-transform:uppercase;margin-bottom:1.1rem;
  opacity:0;transform:translateY(42px);
  transition:opacity .65s var(--ease) .22s,transform .65s var(--ease) .22s}
.hero__slide.on .hero__title{opacity:1;transform:translateY(0)}
.hero__title mark{background:none;font-style:italic}
.hero__slide:nth-child(1) .hero__title mark{color:var(--blue-lt)}
.hero__slide:nth-child(2) .hero__title mark{color:#f89490}
.hero__slide:nth-child(3) .hero__title mark{color:var(--yellow)}
.hero__divline{display:flex;align-items:center;gap:.65rem;margin-bottom:1.2rem;
  opacity:0;transform:translateY(18px);
  transition:opacity .52s var(--ease) .4s,transform .52s var(--ease) .4s}
.hero__slide.on .hero__divline{opacity:1;transform:translateY(0)}
.hero__divline-bar{width:48px;height:3px;border-radius:2px}
.hero__slide:nth-child(1) .hero__divline-bar{background:linear-gradient(90deg,var(--blue),var(--blue-lt))}
.hero__slide:nth-child(2) .hero__divline-bar{background:linear-gradient(90deg,var(--red),#f56358)}
.hero__slide:nth-child(3) .hero__divline-bar{background:linear-gradient(90deg,var(--orange),var(--yellow))}
.hero__divline-dot{width:8px;height:8px;border-radius:50%}
.hero__slide:nth-child(1) .hero__divline-dot{background:var(--blue)}
.hero__slide:nth-child(2) .hero__divline-dot{background:var(--red)}
.hero__slide:nth-child(3) .hero__divline-dot{background:var(--orange)}
.hero__sub{font-family:var(--fs);font-size:1rem;line-height:1.75;color:rgba(255,255,255,.72);
  max-width:510px;margin-bottom:2rem;opacity:0;transform:translateY(18px);
  transition:opacity .58s var(--ease) .52s,transform .58s var(--ease) .52s}
.hero__slide.on .hero__sub{opacity:1;transform:translateY(0)}
.hero__actions{display:flex;align-items:center;gap:.85rem;flex-wrap:wrap;
  opacity:0;transform:translateY(18px);
  transition:opacity .52s var(--ease) .66s,transform .52s var(--ease) .66s}
.hero__slide.on .hero__actions{opacity:1;transform:translateY(0)}
.hero__phone{display:flex;align-items:center;gap:.65rem;margin-top:1.75rem;
  opacity:0;transform:translateY(14px);
  transition:opacity .48s var(--ease) .82s,transform .48s var(--ease) .82s}
.hero__slide.on .hero__phone{opacity:1;transform:translateY(0)}
.hero__phone-ico{width:44px;height:44px;border-radius:50%;
  background:rgba(30,170,226,.18);border:1.5px solid rgba(30,170,226,.4);
  display:flex;align-items:center;justify-content:center;
  color:var(--blue-lt);font-size:.95rem;animation:ringring 2.8s ease infinite;flex-shrink:0}
@keyframes ringring{0%,100%{transform:rotate(0)}8%{transform:rotate(-14deg)}16%{transform:rotate(14deg)}24%{transform:rotate(-7deg)}32%{transform:rotate(7deg)}40%{transform:rotate(0)}}
.hero__phone-meta .lbl{font-family:var(--fs);font-size:.68rem;color:rgba(255,255,255,.45);letter-spacing:.08em;display:block}
.hero__phone-meta .num{font-family:var(--fd);font-weight:800;font-size:1.1rem;color:#fff}
.hero__panel{opacity:0;transform:translateX(44px) scale(.97);transition:opacity .72s var(--ease) .38s,transform .72s var(--ease) .38s}
.hero__slide.on .hero__panel{opacity:1;transform:translateX(0) scale(1)}
.hero__card{background:rgba(255,255,255,.07);-webkit-backdrop-filter:blur(22px);backdrop-filter:blur(22px);
  border:1px solid rgba(255,255,255,.12);border-radius:var(--r3);padding:2rem;position:relative}
.hero__card-badge{position:absolute;top:-15px;left:50%;transform:translateX(-50%);
  padding:.36rem 1.1rem;border-radius:30px;font-family:var(--fs);font-size:.65rem;
  font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#fff;white-space:nowrap}
.hero__slide:nth-child(1) .hero__card-badge{background:var(--blue);box-shadow:0 0 20px rgba(30,170,226,.5)}
.hero__slide:nth-child(2) .hero__card-badge{background:var(--red);box-shadow:0 0 20px rgba(217,58,43,.5)}
.hero__slide:nth-child(3) .hero__card-badge{background:var(--orange);box-shadow:0 0 20px rgba(240,120,40,.5)}
.hero__kpis{display:grid;grid-template-columns:1fr 1fr;gap:1px;
  background:rgba(255,255,255,.08);border-radius:var(--r2);overflow:hidden;margin-top:.75rem}
.hero__kpi{padding:1.3rem 1.4rem;background:rgba(255,255,255,.04);position:relative;transition:background .2s}
.hero__kpi:hover{background:rgba(255,255,255,.08)}
.hero__kpi-num{font-family:var(--fd);font-weight:900;font-size:2.2rem;color:#fff;line-height:1;margin-bottom:.22rem}
.hero__kpi-num sup{font-size:1.2rem}
.hero__slide:nth-child(1) .hero__kpi-num sup{color:var(--blue-lt)}
.hero__slide:nth-child(2) .hero__kpi-num sup{color:#f89490}
.hero__slide:nth-child(3) .hero__kpi-num sup{color:var(--yellow)}
.hero__kpi-lbl{font-family:var(--fs);font-size:.68rem;color:rgba(255,255,255,.5);letter-spacing:.07em;text-transform:uppercase}
.hero__kpi-ico{position:absolute;top:.7rem;right:.7rem;font-size:1.3rem;color:rgba(255,255,255,.1)}
.hero__card-tag{margin-top:1.1rem;display:flex;align-items:center;gap:.7rem;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);
  border-radius:var(--r2);padding:.75rem 1rem}
.hero__card-tag i{font-size:1.2rem}
.hero__slide:nth-child(1) .hero__card-tag i{color:var(--blue-lt)}
.hero__slide:nth-child(2) .hero__card-tag i{color:#f89490}
.hero__slide:nth-child(3) .hero__card-tag i{color:var(--yellow)}
.hero__card-tag-txt .l1{font-family:var(--fs);font-size:.68rem;color:rgba(255,255,255,.45);letter-spacing:.06em;display:block}
.hero__card-tag-txt .l2{font-family:var(--fb);font-weight:700;font-size:.88rem;color:#fff}
.hero__arr{position:absolute;top:50%;transform:translateY(-50%);z-index:25;
  width:52px;height:52px;border-radius:50%;background:rgba(255,255,255,.1);
  border:1.5px solid rgba(255,255,255,.25);color:#fff;font-size:1rem;
  display:flex;align-items:center;justify-content:center;transition:all .25s var(--ease);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.hero__arr.prev{left:1.5rem}
.hero__arr.next{right:1.5rem}
.hero__arr:hover{transform:translateY(-50%) scale(1.1)}
.hero__arr.prev:hover{background:var(--blue);border-color:var(--blue);box-shadow:0 0 20px rgba(30,170,226,.5)}
.hero__arr.next:hover{background:var(--orange);border-color:var(--orange);box-shadow:0 0 20px rgba(240,120,40,.5)}
.hero__nav{position:absolute;bottom:2rem;left:50%;transform:translateX(-50%);z-index:20;
  display:flex;align-items:center;gap:1.5rem}
.hero__dots{display:flex;align-items:center;gap:.55rem}
.hero__dot{width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.3);
  border:none;cursor:pointer;padding:0;transition:all .32s var(--ease)}
.hero__dot.on{width:30px;border-radius:4px}
.hero__dot.on[data-s="0"]{background:var(--blue);box-shadow:0 0 12px rgba(30,170,226,.7)}
.hero__dot.on[data-s="1"]{background:var(--red);box-shadow:0 0 12px rgba(217,58,43,.7)}
.hero__dot.on[data-s="2"]{background:var(--orange);box-shadow:0 0 12px rgba(240,120,40,.7)}
.hero__ctr{font-family:var(--fd);font-weight:700;font-size:.9rem;color:rgba(255,255,255,.45);min-width:55px}
.hero__ctr strong{color:#fff;font-size:1rem}
.hero__scroll{position:absolute;bottom:2rem;right:2.5rem;z-index:20;
  display:flex;flex-direction:column;align-items:center;gap:.45rem;
  color:rgba(255,255,255,.35);font-family:var(--fs);font-size:.6rem;
  letter-spacing:.14em;text-transform:uppercase;cursor:pointer}
.hero__scroll-line{width:1.5px;height:40px;
  background:linear-gradient(to bottom,transparent,rgba(255,255,255,.4));
  position:relative;overflow:hidden}
.hero__scroll-line::after{content:'';position:absolute;top:-100%;left:0;right:0;height:100%;
  background:linear-gradient(to bottom,transparent,var(--blue));animation:scrollpulse 1.9s ease infinite}
@keyframes scrollpulse{to{top:200%}}
.hero__slide:nth-child(1) .hero__bg{background-image:url('https://images.unsplash.com/photo-1586528116311-ad8dd3c8310d?w=1600&q=80&auto=format&fit=crop')}
.hero__slide:nth-child(2) .hero__bg{background-image:url('https://images.unsplash.com/photo-1578575437130-527eed3abbec?w=1600&q=80&auto=format&fit=crop')}
.hero__slide:nth-child(3) .hero__bg{background-image:url('https://images.unsplash.com/photo-1494412574643-ff11b0a5c1c3?w=1600&q=80&auto=format&fit=crop')}

/* ================================================================
   STATS BAR
   ================================================================ */
.stats-bar{background:var(--dark-2);position:relative;overflow:hidden}
.stats-bar::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg,var(--blue),var(--red),var(--orange),var(--yellow))}
.stats-bar__inner{display:grid;grid-template-columns:repeat(4,1fr)}
.stats-bar__item{display:flex;align-items:center;gap:1.1rem;padding:1.75rem 2rem;
  border-right:1px solid rgba(255,255,255,.07);transition:background .25s}
.stats-bar__item:last-child{border-right:none}
.stats-bar__item:hover{background:rgba(255,255,255,.04)}
.stats-bar__icon{width:54px;height:54px;border-radius:var(--r2);
  display:flex;align-items:center;justify-content:center;font-size:1.4rem;flex-shrink:0}
.stats-bar__item:nth-child(1) .stats-bar__icon{background:rgba(30,170,226,.15);color:var(--blue-lt)}
.stats-bar__item:nth-child(2) .stats-bar__icon{background:rgba(217,58,43,.15);color:#f89490}
.stats-bar__item:nth-child(3) .stats-bar__icon{background:rgba(240,120,40,.15);color:var(--yellow)}
.stats-bar__item:nth-child(4) .stats-bar__icon{background:rgba(245,200,0,.15);color:var(--yellow)}
.stats-bar__num{font-family:var(--fd);font-weight:700;font-size:2.4rem;
  line-height:1;color:#fff;letter-spacing:-.01em}
.stats-bar__num sup{font-size:1.3rem}
.stats-bar__item:nth-child(1) .stats-bar__num sup{color:var(--blue-lt)}
.stats-bar__item:nth-child(2) .stats-bar__num sup{color:#f89490}
.stats-bar__item:nth-child(3) .stats-bar__num sup{color:var(--yellow)}
.stats-bar__item:nth-child(4) .stats-bar__num sup{color:var(--yellow)}
.stats-bar__lbl{font-family:var(--fs);font-size:.72rem;font-weight:600;
  color:rgba(255,255,255,.45);text-transform:uppercase;letter-spacing:.09em;margin-top:.2rem}

/* ================================================================
   SECTION SERVICES
   ================================================================ */
.services{padding:6rem 0;background:var(--white)}
.services__header{text-align:center;max-width:620px;margin:0 auto 3.5rem}
.services__header .section-divider{justify-content:center}
.services__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem}
.service-card{background:var(--white);border:1px solid var(--g100);border-radius:var(--r3);
  padding:2.25rem 2rem;position:relative;overflow:hidden;transition:all .32s var(--ease)}
.service-card::before{content:'';position:absolute;top:0;left:0;right:0;height:4px;
  border-radius:var(--r3) var(--r3) 0 0;transform:scaleX(0);transform-origin:left;transition:transform .35s var(--ease)}
.service-card:nth-child(1)::before{background:var(--blue)}
.service-card:nth-child(2)::before{background:var(--red)}
.service-card:nth-child(3)::before{background:var(--orange)}
.service-card:nth-child(4)::before{background:var(--yellow-dk)}
.service-card:nth-child(5)::before{background:var(--blue)}
.service-card:nth-child(6)::before{background:var(--red)}
.service-card:hover{transform:translateY(-8px);box-shadow:var(--sh-lift);border-color:transparent}
.service-card:hover::before{transform:scaleX(1)}
.service-card__icon{width:68px;height:68px;border-radius:var(--r2);
  display:flex;align-items:center;justify-content:center;font-size:1.6rem;
  margin-bottom:1.5rem;transition:transform .3s var(--ease)}
.service-card:hover .service-card__icon{transform:scale(1.1) rotate(-5deg)}
.service-card:nth-child(1) .service-card__icon{background:rgba(30,170,226,.1);color:var(--blue)}
.service-card:nth-child(2) .service-card__icon{background:rgba(217,58,43,.1);color:var(--red)}
.service-card:nth-child(3) .service-card__icon{background:rgba(240,120,40,.1);color:var(--orange)}
.service-card:nth-child(4) .service-card__icon{background:rgba(245,200,0,.12);color:var(--orange-dk)}
.service-card:nth-child(5) .service-card__icon{background:rgba(30,170,226,.1);color:var(--blue)}
.service-card:nth-child(6) .service-card__icon{background:rgba(217,58,43,.1);color:var(--red)}
.service-card__title{font-family:var(--fd);font-weight:600;font-size:1.15rem;
  text-transform:uppercase;letter-spacing:.04em;color:var(--dark);margin-bottom:.75rem}
.service-card__text{font-family:var(--fs);font-size:.9rem;line-height:1.75;color:var(--g500);margin-bottom:1.5rem}
.service-card__link{display:inline-flex;align-items:center;gap:.45rem;
  font-family:var(--fb);font-weight:700;font-size:.8rem;
  letter-spacing:.06em;text-transform:uppercase;transition:gap .22s var(--ease)}
.service-card:nth-child(1) .service-card__link{color:var(--blue)}
.service-card:nth-child(2) .service-card__link{color:var(--red)}
.service-card:nth-child(3) .service-card__link{color:var(--orange)}
.service-card:nth-child(4) .service-card__link{color:var(--orange-dk)}
.service-card:nth-child(5) .service-card__link{color:var(--blue)}
.service-card:nth-child(6) .service-card__link{color:var(--red)}
.service-card__link:hover{gap:.75rem}
.service-card__num{position:absolute;top:1.25rem;right:1.5rem;
  font-family:var(--fd);font-weight:900;font-size:3.5rem;line-height:1;
  color:var(--g100);letter-spacing:-.02em;pointer-events:none;transition:color .32s}
.service-card:hover .service-card__num{color:rgba(30,170,226,.08)}

/* ================================================================
   SECTION À PROPOS
   ================================================================ */
.about{padding:6rem 0;background:var(--off);position:relative;overflow:hidden}
.about::before{content:'';position:absolute;right:-8rem;top:-8rem;width:500px;height:500px;
  border-radius:50%;background:radial-gradient(circle,rgba(30,170,226,.06) 0%,transparent 70%);pointer-events:none}
.about__grid{display:grid;grid-template-columns:1fr 1fr;gap:5rem;align-items:center}
.about__visual{position:relative}
.about__img-wrap{border-radius:var(--r3);overflow:hidden;box-shadow:var(--sh-lift);position:relative}
.about__img-wrap img{width:100%;height:420px;object-fit:cover;transition:transform 6s ease}
.about__img-wrap:hover img{transform:scale(1.04)}
.about__badge{position:absolute;bottom:-1.5rem;right:-1.5rem;background:var(--white);
  border-radius:var(--r2);padding:1.25rem 1.5rem;box-shadow:var(--sh-lift);
  display:flex;align-items:center;gap:1rem;min-width:200px}
.about__badge-icon{width:52px;height:52px;border-radius:var(--r2);
  background:linear-gradient(135deg,var(--blue),var(--blue-dk));
  display:flex;align-items:center;justify-content:center;color:#fff;font-size:1.3rem;flex-shrink:0}
.about__badge-num{font-family:var(--fd);font-weight:900;font-size:1.8rem;color:var(--dark);line-height:1}
.about__badge-num sup{font-size:1rem;color:var(--blue)}
.about__badge-lbl{font-family:var(--fs);font-size:.72rem;color:var(--g500);text-transform:uppercase;letter-spacing:.07em}
.about__list{margin:1.75rem 0 2.25rem;display:flex;flex-direction:column;gap:.85rem}
.about__item{display:flex;align-items:flex-start;gap:.9rem;
  font-family:var(--fs);font-size:.94rem;color:var(--g700);line-height:1.6}
.about__item-dot{width:22px;height:22px;border-radius:50%;display:flex;align-items:center;
  justify-content:center;font-size:.65rem;color:#fff;flex-shrink:0;margin-top:.1rem}
.about__item:nth-child(1) .about__item-dot{background:var(--blue)}
.about__item:nth-child(2) .about__item-dot{background:var(--red)}
.about__item:nth-child(3) .about__item-dot{background:var(--orange)}
.about__item:nth-child(4) .about__item-dot{background:var(--blue-dk)}
.about__certifs{display:flex;align-items:center;gap:1rem;margin-top:1rem;flex-wrap:wrap}
.about__certif{display:flex;align-items:center;gap:.5rem;background:var(--white);
  border:1px solid var(--g100);border-radius:var(--r1);padding:.5rem .85rem;
  font-family:var(--fs);font-size:.78rem;font-weight:700;color:var(--g700)}
.about__certif i{color:var(--blue)}

/* ================================================================
   FOOTER
   ================================================================ */
.footer{background:var(--dark)}
.footer__top{padding:4rem 0}
.footer__grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.2fr;gap:3rem}
.footer__brand-desc{font-family:var(--fs);font-size:.88rem;line-height:1.75;
  color:rgba(255,255,255,.45);margin:1.25rem 0 1.5rem;max-width:280px}
.footer__social{display:flex;align-items:center;gap:.6rem}
.footer__social a{width:34px;height:34px;border-radius:50%;border:1px solid rgba(255,255,255,.12);
  display:flex;align-items:center;justify-content:center;
  color:rgba(255,255,255,.45);font-size:.78rem;transition:all .22s}
.footer__social a:hover{background:var(--blue);border-color:var(--blue);color:#fff;transform:translateY(-2px)}
.footer__col-title{font-family:var(--fd);font-weight:800;font-size:1rem;
  text-transform:uppercase;letter-spacing:.08em;color:#fff;
  margin-bottom:1.25rem;padding-bottom:.75rem;
  border-bottom:2px solid rgba(255,255,255,.08);position:relative}
.footer__col-title::after{content:'';position:absolute;bottom:-2px;left:0;
  width:28px;height:2px;background:var(--blue)}
.footer__links li{margin-bottom:.55rem}
.footer__links a{font-family:var(--fs);font-size:.87rem;color:rgba(255,255,255,.45);
  display:flex;align-items:center;gap:.4rem;transition:all .2s}
.footer__links a i{font-size:.6rem;color:var(--blue);transition:transform .2s}
.footer__links a:hover{color:var(--blue-lt);padding-left:.4rem}
.footer__links a:hover i{transform:translateX(3px)}
.footer__contact-list{display:flex;flex-direction:column;gap:.85rem}
.footer__contact-list li{display:flex;align-items:flex-start;gap:.75rem;
  font-family:var(--fs);font-size:.85rem;color:rgba(255,255,255,.45)}
.footer__contact-list a{color:rgba(255,255,255,.45);transition:color .2s}
.footer__contact-list a:hover{color:var(--blue-lt)}
.footer__contact-ico{width:30px;height:30px;border-radius:50%;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;font-size:.72rem;margin-top:.05rem}
.footer__contact-ico--blue{background:rgba(30,170,226,.15);color:var(--blue-lt)}
.footer__contact-ico--orange{background:rgba(240,120,40,.15);color:var(--yellow)}
.footer__contact-ico--red{background:rgba(217,58,43,.15);color:#f89490}
.footer__bottom{background:var(--dark-2);padding:1.1rem 0;
  border-top:1px solid rgba(255,255,255,.06)}
.footer__bottom-inner{display:flex;align-items:center;justify-content:space-between;
  flex-wrap:wrap;gap:.75rem;font-family:var(--fs);font-size:.8rem;color:rgba(255,255,255,.35)}
.footer__bottom-inner strong{color:rgba(255,255,255,.6)}
.footer__legal{display:flex;align-items:center;gap:1.5rem}
.footer__legal a{color:rgba(255,255,255,.35);transition:color .2s}
.footer__legal a:hover{color:var(--blue-lt)}

/* ================================================================
   BOUTON SCROLL-UP
   ================================================================ */
.scroll-up{
  position:fixed;bottom:2rem;right:2rem;z-index:var(--z-up);
  width:48px;height:48px;border-radius:50%;
  background:var(--blue);color:#fff;
  display:flex;align-items:center;justify-content:center;
  font-size:1rem;
  box-shadow:0 6px 24px rgba(30,170,226,.45);
  opacity:0;visibility:hidden;
  transform:translateY(16px);
  transition:opacity .3s var(--ease),visibility .3s,transform .3s var(--ease),background .2s;
  border:2px solid rgba(255,255,255,.2);
}
.scroll-up.visible{opacity:1;visibility:visible;transform:translateY(0)}
.scroll-up:hover{background:var(--orange);box-shadow:0 8px 28px rgba(240,120,40,.5);transform:translateY(-3px)}

/* ================================================================
   RESPONSIVE
   ================================================================ */

/* Masquer topbar sur mobile */
@media (max-width:960px){
  .topbar{display:none}
  .burger{display:flex}
  .nav,.btn-quote{display:none}
  .hdr__divider{display:none}
  .footer__grid{grid-template-columns:1fr 1fr}
}

/* Flèches slider — désactivées sur mobile */
@media (max-width:768px){
  .hero__arr{display:none !important}
}

@media (max-width:1060px){
  .hero__grid-layout{grid-template-columns:1fr}
  .hero__panel{display:none}
  .hero__title{font-size:clamp(2.4rem,5vw,3.5rem)}
  .services__grid{grid-template-columns:repeat(2,1fr)}
  .about__grid{grid-template-columns:1fr;gap:3rem}
  .about__visual{order:-1}
  .about__badge{right:1rem}
  .stats-bar__inner{grid-template-columns:repeat(2,1fr)}
  .stats-bar__item:nth-child(2){border-right:none}
  .stats-bar__item:nth-child(3),.stats-bar__item:nth-child(4){border-top:1px solid rgba(255,255,255,.07)}
}

@media (max-width:640px){
  .hdr__inner{height:70px;padding:0 1rem}
  .logo__svg{height:52px}
  .drawer{top:0}
  .hero{height:100svh;max-height:none;min-height:500px}
  .hero__body{align-items:flex-end;padding-bottom:6rem;padding-top:0}
  .hero__title{font-size:1.85rem}
  .hero__sub{font-size:.88rem;margin-bottom:1.4rem}
  .hero__actions{gap:.6rem}
  .hero__actions .btn{padding:.7rem 1.2rem;font-size:.78rem}
  .hero__arr{width:42px;height:42px;font-size:.85rem}
  .hero__arr.prev{left:.75rem}
  .hero__arr.next{right:.75rem}
  .hero__scroll{display:none}
  .services{padding:3.5rem 0}
  .services__grid{grid-template-columns:1fr}
  .about{padding:3.5rem 0}
  .footer__grid{grid-template-columns:1fr}
  .footer__top{padding:2.5rem 0}
  .stats-bar__inner{grid-template-columns:1fr 1fr}
  .stats-bar__item{padding:1.25rem 1rem;gap:.75rem}
  .stats-bar__num{font-size:1.8rem}
  .stats-bar__icon{width:44px;height:44px;font-size:1.1rem}
  .scroll-up{bottom:1.25rem;right:1.25rem;width:42px;height:42px;font-size:.9rem}
}

@media (max-width:400px){
  .footer__bottom-inner{flex-direction:column;text-align:center}
  .footer__legal{justify-content:center}
}

/* ================================================================
   SECTION SUIVI DE COMMANDE
   ================================================================ */
.tracking-section {
  position: relative;
  padding: 5.5rem 0;
  overflow: hidden;
}
.tracking-section__bg {
  position: absolute; inset: 0;
  background-image: url('https://images.unsplash.com/photo-1586528116311-ad8dd3c8310d?w=1600&q=60&auto=format&fit=crop');
  background-size: cover; background-position: center;
}
.tracking-section__ov {
  position: absolute; inset: 0;
  background: linear-gradient(108deg, rgba(6,17,31,.96) 0%, rgba(6,17,31,.88) 50%, rgba(14,28,54,.82) 100%);
}
.tracking-inner {
  position: relative; z-index: 2;
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 4rem; align-items: center;
}
.tracking-form-wrap { position: relative; z-index: 2; }
.tracking-form-card {
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: var(--r3);
  padding: 2.5rem;
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
}
.tracking-form-icon {
  width: 56px; height: 56px; border-radius: 50%;
  background: linear-gradient(135deg, var(--blue), var(--blue-dk));
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 1.3rem;
  margin-bottom: 1.25rem;
  box-shadow: 0 6px 20px rgba(30,170,226,.4);
}
.tracking-form-title {
  font-family: var(--fd); font-weight: 600;
  font-size: 1.4rem; text-transform: uppercase; letter-spacing: .04em;
  color: #fff; margin-bottom: 1.5rem;
}
.tracking-form-group {
  display: flex; gap: .75rem; margin-bottom: 1rem;
}
.tracking-input {
  flex: 1;
  font-family: var(--fb); font-size: .92rem;
  color: var(--text); background: var(--white);
  border: 2px solid transparent; border-radius: var(--r2);
  padding: .85rem 1.1rem; outline: none;
  transition: border-color .22s, box-shadow .22s;
}
.tracking-input:focus {
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(30,170,226,.2);
}
.tracking-input::placeholder { color: var(--g300); }
.tracking-btn {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .85rem 1.4rem;
  background: var(--orange); color: #fff;
  font-family: var(--fb); font-weight: 700;
  font-size: .85rem; letter-spacing: .04em; text-transform: uppercase;
  border-radius: var(--r2);
  box-shadow: 0 5px 18px rgba(240,120,40,.4);
  cursor: pointer; border: none; white-space: nowrap;
  transition: all .24s var(--ease);
}
.tracking-btn:hover {
  background: var(--orange-dk);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(240,120,40,.5);
}
.tracking-hint {
  font-family: var(--fs); font-size: .78rem;
  color: rgba(255,255,255,.45);
  display: flex; align-items: center; gap: .4rem;
}
.tracking-hint i { color: var(--blue-lt); }
.tracking-full-link {
  display: inline-flex; align-items: center; gap: .5rem;
  margin-top: 1.25rem;
  font-family: var(--fb); font-weight: 600; font-size: .85rem;
  color: var(--blue-lt);
  border-bottom: 1px solid rgba(92,202,245,.3);
  padding-bottom: 2px;
  transition: all .2s;
}
.tracking-full-link:hover {
  color: var(--white);
  border-color: rgba(255,255,255,.4);
  gap: .8rem;
}

/* ================================================================
   SECTION 4 ÉTAPES
   ================================================================ */
.steps-section {
  padding: 6rem 0;
  background: var(--white);
}
.steps-section__header {
  text-align: center; max-width: 600px;
  margin: 0 auto 4rem;
}
.steps-section__header .section-divider { justify-content: center; }

.steps-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  position: relative;
}

.step-card {
  padding: 2.5rem 2rem 2.5rem;
  text-align: center;
  position: relative;
  background: var(--white);
  border: 1px solid var(--g100);
  border-radius: var(--r3);
  margin: 0 .5rem;
  transition: all .32s var(--ease);
  overflow: hidden;
}
.step-card::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, var(--blue), var(--orange));
  transform: scaleX(0); transform-origin: left;
  transition: transform .35s var(--ease);
}
.step-card:hover { transform: translateY(-6px); box-shadow: var(--sh-lift); }
.step-card:hover::before { transform: scaleX(1); }

/* Numéro en fond décoratif */
.step-card__num {
  position: absolute; top: 1rem; right: 1.25rem;
  font-family: var(--fd); font-weight: 700;
  font-size: 4rem; line-height: 1;
  color: var(--g100);
  letter-spacing: -.02em;
  pointer-events: none; user-select: none;
  transition: color .3s;
}
.step-card:hover .step-card__num { color: rgba(30,170,226,.1); }

.step-card__icon {
  width: 72px; height: 72px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.6rem; margin: 0 auto 1.5rem;
  transition: transform .3s var(--ease);
  position: relative; z-index: 1;
}
.step-card:hover .step-card__icon { transform: scale(1.1) rotate(-5deg); }

/* Couleurs alternées */
.step-card:nth-child(1) .step-card__icon { background: rgba(30,170,226,.1); color: var(--blue); }
.step-card:nth-child(2) .step-card__icon { background: rgba(217,58,43,.1); color: var(--red); }
.step-card:nth-child(3) .step-card__icon { background: rgba(240,120,40,.1); color: var(--orange); }
.step-card:nth-child(4) .step-card__icon { background: rgba(30,170,226,.1); color: var(--blue); }

.step-card__title {
  font-family: var(--fd); font-weight: 600; font-size: 1.1rem;
  text-transform: uppercase; letter-spacing: .04em;
  color: var(--dark); margin-bottom: .75rem;
}
.step-card__text {
  font-family: var(--fs); font-size: .88rem; line-height: 1.7;
  color: var(--g500);
}

/* Flèche connecteur entre étapes */
.step-card__connector {
  position: absolute; top: 50%; right: -1.5rem;
  transform: translateY(-50%);
  width: 2rem; height: 2rem;
  display: flex; align-items: center; justify-content: center;
  z-index: 10;
}
.step-card__connector::after {
  content: '\f061';
  font-family: 'Font Awesome 6 Free'; font-weight: 900;
  color: var(--blue); font-size: 1rem;
  opacity: .5;
}

/* ================================================================
   SECTION POURQUOI NOUS
   ================================================================ */
.why-section {
  padding: 6rem 0;
  background: var(--off);
  position: relative; overflow: hidden;
}
.why-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 5rem; align-items: center;
}
.why-visual { position: relative; }
.why-img-wrap {
  border-radius: var(--r3); overflow: hidden;
  box-shadow: var(--sh-lift);
}
.why-img-wrap img {
  width: 100%; height: 460px; object-fit: cover;
  transition: transform 6s ease;
}
.why-img-wrap:hover img { transform: scale(1.04); }

/* Badge flottant */
.why-badge {
  position: absolute; top: 2rem; left: -1.5rem;
  background: var(--blue); color: #fff;
  border-radius: var(--r2);
  padding: 1rem 1.25rem;
  display: flex; align-items: center; gap: .75rem;
  box-shadow: 0 8px 28px rgba(30,170,226,.45);
}
.why-badge i { font-size: 1.4rem; }
.why-badge__num {
  font-family: var(--fd); font-weight: 700;
  font-size: 1.3rem; letter-spacing: .03em;
  display: block; line-height: 1;
}
.why-badge__lbl {
  font-family: var(--fs); font-size: .7rem;
  opacity: .85; text-transform: uppercase; letter-spacing: .08em;
}

/* Mini stats sous image */
.why-mini-stats {
  display: flex; gap: 0;
  margin-top: 1rem;
  border-radius: var(--r2); overflow: hidden;
  box-shadow: var(--sh-card);
}
.why-mini-stat {
  flex: 1; text-align: center;
  padding: 1.1rem .5rem;
  background: var(--dark-2);
  border-right: 1px solid rgba(255,255,255,.06);
}
.why-mini-stat:last-child { border-right: none; }
.why-mini-num {
  display: block;
  font-family: var(--fd); font-weight: 700; font-size: 1.5rem;
  color: var(--blue-lt); line-height: 1; margin-bottom: .2rem;
}
.why-mini-lbl {
  font-family: var(--fs); font-size: .65rem;
  color: rgba(255,255,255,.5); text-transform: uppercase; letter-spacing: .08em;
}

/* Arguments */
.why-args {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 1.25rem; margin-top: 1.75rem;
}
.why-arg {
  display: flex; align-items: flex-start; gap: .9rem;
  background: var(--white); border: 1px solid var(--g100);
  border-radius: var(--r2); padding: 1.1rem;
  transition: all .28s var(--ease);
}
.why-arg:hover {
  transform: translateY(-3px);
  box-shadow: var(--sh-card);
  border-color: transparent;
}
.why-arg__icon {
  width: 40px; height: 40px; border-radius: var(--r2);
  display: flex; align-items: center; justify-content: center;
  font-size: .95rem; flex-shrink: 0;
}
.why-arg__icon--blue { background: rgba(30,170,226,.1); color: var(--blue); }
.why-arg__icon--red  { background: rgba(217,58,43,.1);  color: var(--red); }
.why-arg__icon--orange { background: rgba(240,120,40,.1); color: var(--orange); }
.why-arg__title {
  font-family: var(--fd); font-weight: 600; font-size: .95rem;
  text-transform: uppercase; letter-spacing: .03em;
  color: var(--dark); margin-bottom: .3rem;
}
.why-arg__text {
  font-family: var(--fs); font-size: .8rem; line-height: 1.65; color: var(--g500);
}

/* ================================================================
   RESPONSIVE NOUVELLES SECTIONS
   ================================================================ */
@media (max-width: 1060px) {
  .tracking-inner { grid-template-columns: 1fr; gap: 2.5rem; }
  .steps-grid { grid-template-columns: repeat(2, 1fr); gap: 1rem; }
  .step-card__connector { display: none; }
  .why-grid { grid-template-columns: 1fr; gap: 3rem; }
  .why-badge { left: 1rem; }
}
@media (max-width: 640px) {
  .tracking-section { padding: 3.5rem 0; }
  .tracking-form-group { flex-direction: column; }
  .tracking-btn { justify-content: center; }
  .steps-section { padding: 3.5rem 0; }
  .steps-grid { grid-template-columns: 1fr; gap: .75rem; }
  .why-section { padding: 3.5rem 0; }
  .why-args { grid-template-columns: 1fr; }
  .why-img-wrap img { height: 280px; }
  .why-badge { display: none; }
}