:root {
  --brand: #3F48CC;
  --brand-dark: #151b63;
  --navy: #07104d;
  --text: #20243b;
  --muted: #6d7187;
  --light: #f6f7fc;
  --border: rgba(20, 29, 100, .10);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; font-family: 'Inter', sans-serif; color: var(--text); background: #fff; overflow-x: hidden; }
a { text-decoration: none; }

/* =========================================================
   NAVBAR
   ========================================================= */

.nav-glass {
    padding: 13px 0;
    background: rgba(255,255,255,.78);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    transition: .3s ease;
}

.nav-glass.scrolled {
    box-shadow: 0 8px 30px rgba(20,25,80,.08);
    background: rgba(255,255,255,.94);
}

/* LOGO NAV — RESPONSIVE */
.logo-nav {
    display: block;
    width: clamp(150px, 18vw, 235px);
    max-width: 100%;
    height: auto;
    object-fit: contain;
    transition: width .25s ease;
}

/* Conteneur du logo */
.navbar-brand {
    display: flex;
    align-items: center;
    max-width: 75%;
    padding-top: 0;
    padding-bottom: 0;
}

/* Bouton menu mobile */
.navbar-toggler {
    flex-shrink: 0;
}

/* Liens */
.nav-link {
    color: #222643 !important;
    font-weight: 600;
    font-size: .93rem;
    padding: .6rem .8rem !important;
}

.nav-link:hover {
    color: var(--brand) !important;
}

/* Bouton principal */
.btn-brand {
    color: #fff;
    background: var(--brand);
    border: 0;
    font-weight: 700;
    border-radius: 12px;
    padding: .78rem 1.2rem;
    box-shadow: 0 10px 25px rgba(63,72,204,.22);
    transition: .25s ease;
}

.btn-brand:hover {
    color: #fff;
    background: #3039b5;
    transform: translateY(-2px);
    box-shadow: 0 15px 30px rgba(63,72,204,.30);
}


/* =========================================================
   TABLETTE
   ========================================================= */

@media (max-width: 991px) {

    .nav-glass {
        padding: 10px 0;
    }

    .logo-nav {
        width: 195px;
    }

    .navbar-brand {
        max-width: 72%;
    }

    .navbar-collapse {
        padding: 18px 0 8px;
    }

    .nav-link {
        padding: .55rem 0 !important;
    }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 575px) {

    .nav-glass {
        padding: 9px 0;
    }

    .logo-nav {
        width: 165px;
        max-width: calc(100vw - 95px);
    }

    .navbar-brand {
        max-width: calc(100% - 55px);
    }

    .navbar-toggler {
        padding: 6px 9px;
    }

    .nav-link {
        font-size: .9rem;
    }

}


/* =========================================================
   PETITS SMARTPHONES
   ========================================================= */

@media (max-width: 375px) {

    .logo-nav {
        width: 145px;
        max-width: calc(100vw - 85px);
    }

    .nav-glass {
        padding: 8px 0;
    }

}

/* HERO */
.hero-section { min-height: 100vh; position: relative; display: flex; align-items: center; background: linear-gradient(135deg,#fff 0%,#fafaff 55%,#eef0ff 100%); overflow: hidden; }
.hero-grid { position: absolute; inset: 0; opacity: .38; background-image: linear-gradient(rgba(63,72,204,.055) 1px, transparent 1px), linear-gradient(90deg, rgba(63,72,204,.055) 1px, transparent 1px); background-size: 54px 54px; mask-image: linear-gradient(to right, black, transparent 75%); }
.orb { position:absolute; border-radius:50%; filter: blur(1px); pointer-events:none; }
.orb-1 { width: 500px; height: 500px; right:-170px; top:-130px; background: radial-gradient(circle, rgba(63,72,204,.18), transparent 68%); }
.orb-2 { width: 420px; height: 420px; left:-220px; bottom:-220px; background: radial-gradient(circle, rgba(236,30,116,.12), transparent 68%); }
.eyebrow { display:flex; align-items:center; gap:10px; color:var(--brand); font-weight:800; font-size:.73rem; letter-spacing:.15em; margin-bottom:18px; }
.eyebrow span { width:28px; height:3px; background:var(--brand); border-radius:10px; }
.hero-section h1 { max-width: 800px; font-size: clamp(3rem, 6vw, 5.9rem); line-height: .99; letter-spacing:-.065em; font-weight:900; color:var(--navy); }
.gradient-text { background: linear-gradient(100deg,#3F48CC 0%,#a72ebc 48%,#ed315d 100%); -webkit-background-clip:text; background-clip:text; color:transparent; }
.hero-text { max-width: 700px; color:var(--muted); font-size:1.12rem; line-height:1.75; margin-top:24px; }
.hero-stats { display:flex; gap:30px; flex-wrap:wrap; }
.hero-stats div { display:flex; flex-direction:column; border-left:2px solid #d9dcf8; padding-left:13px; }
.hero-stats strong { color:var(--navy); font-size:.92rem; }
.hero-stats span { color:#8a8ea2; font-size:.72rem; margin-top:3px; }
.hero-card { height: 480px; position:relative; border-radius:34px; background:linear-gradient(145deg,#0a1156,#202a86); box-shadow:0 40px 80px rgba(7,16,77,.28); overflow:hidden; transform:rotate(3deg); }
.hero-card:before { content:''; position:absolute; width:360px; height:360px; border-radius:50%; background:radial-gradient(circle,rgba(126,138,255,.32),transparent 68%); right:-120px; top:-120px; }
.hero-card-top { position:absolute; top:25px; left:28px; color:#fff; font-size:.72rem; font-weight:800; letter-spacing:.16em; }
.pulse-dot { display:inline-block; width:8px; height:8px; background:#5de6b3; border-radius:50%; margin-right:8px; box-shadow:0 0 0 7px rgba(93,230,179,.12); }
.code-window { position:absolute; left:12%; right:12%; top:31%; padding:26px; border-radius:18px; background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.11); }
.code-line { height:9px; border-radius:10px; background:linear-gradient(90deg,rgba(255,255,255,.7),rgba(255,255,255,.12)); margin:16px 0; }
.w-90{width:90%}.w-80{width:80%}.w-70{width:70%}.w-65{width:65%}.w-45{width:45%}
.floating-card { position:absolute; display:flex; align-items:center; gap:12px; padding:13px 17px; background:rgba(255,255,255,.96); border-radius:15px; box-shadow:0 16px 35px rgba(0,0,0,.16); animation:float 4s ease-in-out infinite; }
.floating-card i { color:var(--brand); font-size:1.25rem; }.floating-card b{display:block;font-size:.72rem;color:var(--navy)}.floating-card small{display:block;color:#8b8ea2;font-size:.62rem}.card-seo{left:7%;top:18%}.card-app{right:6%;top:52%;animation-delay:.8s}.card-code{left:14%;bottom:9%;animation-delay:1.5s}
@keyframes float { 0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)} }
.scroll-indicator { position:absolute; bottom:25px; left:50%; transform:translateX(-50%); color:#888da2; font-size:.7rem; font-weight:700; text-transform:uppercase; letter-spacing:.12em; }
.scroll-indicator span { display:inline-block; width:2px; height:30px; background:var(--brand); vertical-align:middle; margin-right:8px; animation:scrollline 1.5s infinite; }
@keyframes scrollline { 0%,100%{transform:scaleY(.5);transform-origin:top}50%{transform:scaleY(1);transform-origin:top} }

/* SECTIONS */
.section-padding { padding: 110px 0; }
.activities-section { background:#fff; }
.section-heading h2, .expertise-section h2 { color:var(--navy); font-weight:900; letter-spacing:-.045em; font-size:clamp(2.5rem,4vw,4rem); line-height:1.05; }
.section-heading p { max-width:650px; margin:18px auto 0; color:var(--muted); line-height:1.7; }
.activity-card { height:100%; min-height:460px; border:1px solid var(--border); border-radius:26px; padding:30px; background:#fff; position:relative; overflow:hidden; transition:.35s ease; box-shadow:0 8px 30px rgba(25,30,90,.04); }
.activity-card:before { content:''; position:absolute; top:0; left:0; right:0; height:5px; transform:scaleX(0); transform-origin:left; transition:.35s ease; background:var(--brand); }
.activity-card:hover { transform:translateY(-10px); box-shadow:0 25px 55px rgba(25,30,90,.12); }
.activity-card:hover:before { transform:scaleX(1); }
.activity-number { position:absolute; top:28px; right:28px; color:#dfe2f5; font-size:.75rem; font-weight:900; }
.icon-box { width:62px; height:62px; display:grid; place-items:center; border-radius:17px; background:#eef0ff; color:var(--brand); font-size:1.55rem; margin-bottom:28px; }
.activity-card h3 { font-size:1.65rem; color:var(--navy); font-weight:850; }
.activity-card p { color:var(--muted); line-height:1.65; font-size:.9rem; min-height:95px; }
.activity-card ul { list-style:none; padding:0; margin:25px 0; }.activity-card li{font-size:.78rem;font-weight:600;color:#51566e;padding:7px 0;border-bottom:1px solid #eef0f5}.activity-card li:before{content:'✓';color:var(--brand);font-weight:900;margin-right:8px}
.card-link { color:var(--navy); font-size:.78rem; font-weight:800; }.card-link i{margin-left:5px;transition:.2s}.card-link:hover{color:var(--brand)}.card-link:hover i{margin-left:10px}
.activity-app .icon-box{background:#fff0f8;color:#c02a7b}.activity-web .icon-box{background:#eefaff;color:#1689ae}.activity-code .icon-box{background:#fff5eb;color:#d16b19}

/* EXPERTISE */
.expertise-section { background:var(--light); position:relative; overflow:hidden; }
.expertise-section .lead { color:var(--muted); line-height:1.75; font-size:1rem; max-width:600px; margin:22px 0 35px; }
.process-list { max-width:600px; }.process-item{display:flex;gap:18px;padding:17px 0;border-bottom:1px solid #e4e6f1}.process-icon{flex:0 0 43px;height:43px;border-radius:12px;background:#fff;display:grid;place-items:center;color:var(--brand);font-size:.7rem;font-weight:900;box-shadow:0 7px 20px rgba(30,35,100,.06)}.process-item h4{font-size:.98rem;margin:2px 0 5px;color:var(--navy);font-weight:800}.process-item p{font-size:.78rem;color:#81859a;margin:0}
.expertise-visual { min-height:520px; position:relative; display:grid; place-items:center; }.visual-ring{position:absolute;border:1px dashed rgba(63,72,204,.22);border-radius:50%;animation:spin 22s linear infinite}.ring-1{width:210px;height:210px}.ring-2{width:350px;height:350px;animation-direction:reverse;animation-duration:28s}.ring-3{width:470px;height:470px;animation-duration:35s}.visual-center{width:130px;height:130px;border-radius:50%;background:linear-gradient(145deg,#fff,#eef0ff);box-shadow:0 20px 55px rgba(42,50,160,.16);display:grid;place-items:center;text-align:center;color:var(--navy);font-weight:900;font-size:.66rem;position:relative;z-index:2}.visual-center i{font-size:1.8rem;color:var(--brand);display:block;margin-bottom:4px}.visual-node{position:absolute;background:#fff;border:1px solid #e4e6f3;padding:11px 15px;border-radius:13px;box-shadow:0 12px 30px rgba(25,30,90,.09);font-weight:800;font-size:.7rem;color:var(--navy);z-index:3}.visual-node i{color:var(--brand);margin-right:6px}.node-seo{top:10%;left:8%}.node-app{top:23%;right:4%}.node-web{bottom:16%;right:11%}.node-code{bottom:9%;left:8%}
@keyframes spin{to{transform:rotate(360deg)}}

/* CTA + FOOTER */
.cta-section{background:#fff}.cta-box{position:relative;text-align:center;overflow:hidden;padding:85px 30px;border-radius:34px;background:linear-gradient(135deg,#080f4d,#3F48CC);box-shadow:0 30px 70px rgba(18,27,110,.22)}.cta-glow{position:absolute;width:500px;height:500px;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.17),transparent 68%);left:50%;top:-360px;transform:translateX(-50%)}.cta-box h2{position:relative;color:#fff;font-weight:900;letter-spacing:-.045em;font-size:clamp(2.4rem,4vw,4.2rem);line-height:1.05}.cta-box h2 span{color:#bfc5ff}.cta-box p{position:relative;color:rgba(255,255,255,.7);margin:20px auto 28px;max-width:600px}.cta-box .btn{position:relative;border-radius:12px;font-weight:800}.footer{background:#070d3e;color:#9ca2c4;font-size:.72rem}.logo-footer{width:210px;filter:brightness(0) invert(1);opacity:.92}

/* REVEAL */
.reveal-up,.reveal-left,.reveal-right{opacity:0;transition:opacity .8s ease,transform .8s cubic-bezier(.2,.7,.2,1)}.reveal-up{transform:translateY(45px)}.reveal-left{transform:translateX(-50px)}.reveal-right{transform:translateX(50px)}.is-visible{opacity:1;transform:none}.delay-1{transition-delay:.08s}.delay-2{transition-delay:.16s}.delay-3{transition-delay:.24s}.delay-4{transition-delay:.32s}

@media (max-width: 991px){.logo-nav{width:200px}.hero-section h1{font-size:clamp(2.8rem,8vw,4.7rem)}.section-padding{padding:85px 0}.navbar-collapse{padding:18px 0}.nav-link{padding:.55rem 0 !important}.hero-stats{gap:20px}.expertise-visual{min-height:450px}.ring-3{width:400px;height:400px}}
@media (max-width: 575px){.logo-nav{width:175px}.hero-section h1{font-size:2.85rem}.hero-text{font-size:1rem}.hero-stats{gap:15px}.hero-stats div{padding-left:9px}.section-padding{padding:70px 0}.activity-card{min-height:auto}.activity-card p{min-height:auto}.expertise-visual{min-height:370px}.ring-1{width:160px;height:160px}.ring-2{width:260px;height:260px}.ring-3{width:340px;height:340px}.node-seo{top:5%;left:0}.node-app{top:17%;right:0}.node-web{bottom:12%;right:0}.node-code{bottom:5%;left:0}.cta-box{padding:65px 18px}.logo-footer{width:175px}}

@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}.reveal-up,.reveal-left,.reveal-right{opacity:1;transform:none;transition:none}.floating-card,.visual-ring,.scroll-indicator span{animation:none}}

/* =========================================================
   SCROLL TO TOP
   ========================================================= */

.scroll-to-top{

    position:fixed;

    right:25px;
    bottom:25px;

    width:48px;
    height:48px;

    display:flex;

    align-items:center;
    justify-content:center;

    border:1px solid rgba(199,168,102,.7);

    border-radius:50%;

    background:rgba(10,13,22,.88);

    color:#c7a866;

    font-size:20px;

    text-decoration:none;

    opacity:0;

    visibility:hidden;

    transform:translateY(15px);

    transition:
        opacity .35s ease,
        visibility .35s ease,
        transform .35s ease,
        background .3s ease,
        color .3s ease,
        box-shadow .3s ease;

    z-index:9999;

    backdrop-filter:blur(8px);

    -webkit-backdrop-filter:blur(8px);

}

.scroll-to-top.show{

    opacity:1;

    visibility:visible;

    transform:translateY(0);

}

.scroll-to-top:hover{

    background:#c7a866;

    color:#080b14;

    box-shadow:
        0 8px 25px
        rgba(199,168,102,.25);

}

.scroll-to-top:focus-visible{

    outline:2px solid #ead7a3;

    outline-offset:4px;

}


/* =========================================================
   SCROLL TO TOP — MOBILE
   ========================================================= */

@media(max-width:768px){

    .scroll-to-top{

        right:15px;

        bottom:15px;

        width:43px;

        height:43px;

        font-size:18px;

    }

}