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

:root{
    --bg:#050706;
    --surface:#0a0e0b;
    --surface2:#0e1510;
    --green:#73ff45;
    --green2:#35b52a;
    --text:#f3f5f2;
    --muted:#9aa69c;
    --border:rgba(115,255,69,.18);
    --container:1200px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--text);font-family:Inter,Arial,sans-serif}
a{color:inherit;text-decoration:none}
.container{width:min(var(--container),calc(100% - 48px));margin:auto}

/* HEADER */
.site-header{position:absolute;top:0;left:0;width:100%;z-index:20;border-bottom:1px solid rgba(115,255,69,.12);background:rgba(3,5,4,.35);backdrop-filter:blur(10px)}
.header-container{height:92px;display:flex;align-items:center;justify-content:space-between}
.site-logo img{max-height:58px;width:auto}
.logo-text,.footer-logo{font-family:'Barlow Condensed',sans-serif;font-size:25px;font-weight:700;letter-spacing:2px}
.logo-text b,.footer-logo span{color:var(--green)}
.main-navigation ul{display:flex;gap:34px;list-style:none;margin:0;padding:0}
.main-navigation a{font-size:13px;font-weight:600;letter-spacing:1.5px;text-transform:uppercase;color:#dce3dd;transition:.2s}
.main-navigation a:hover{color:var(--green)}
.menu-toggle{display:none;background:none;border:0}

/* HERO */
.hero{position:relative;min-height:820px;display:flex;align-items:center;overflow:hidden;background:#050706 url('../images/shadow-tech-hero.png') center/cover no-repeat}
.hero-overlay{position:absolute;inset:0;background:linear-gradient(90deg,rgba(2,5,3,.94) 0%,rgba(2,5,3,.68) 43%,rgba(2,5,3,.18) 100%)}
.hero-grid{position:absolute;inset:0;background:radial-gradient(circle at 70% 48%,rgba(115,255,69,.16),transparent 28%),linear-gradient(90deg,transparent 49%,rgba(115,255,69,.05) 50%,transparent 51%);pointer-events:none}
.hero-container{position:relative;z-index:2;display:flex;align-items:center;justify-content:space-between;padding-top:95px}
.hero-content{max-width:760px}
.eyebrow,.section-kicker{color:var(--green);font-size:12px;font-weight:700;letter-spacing:3px;text-transform:uppercase}
.hero h1{font-family:'Barlow Condensed',sans-serif;font-size:clamp(58px,7vw,104px);line-height:.9;text-transform:uppercase;margin:24px 0}
.hero h1 span{color:var(--green)}
.hero p{max-width:620px;color:#c0c9c2;font-size:18px;line-height:1.75}
.hero-actions{display:flex;gap:14px;margin-top:34px;flex-wrap:wrap}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:0 25px;border:1px solid var(--green);font-weight:700;font-size:13px;letter-spacing:1px;text-transform:uppercase;transition:.2s}
.btn-primary{background:var(--green);color:#061006}
.btn-primary:hover{background:#fff;border-color:#fff}
.btn-outline{color:var(--green);background:rgba(0,0,0,.25)}
.btn-outline:hover{background:rgba(115,255,69,.1)}
.hero-badge{width:280px;height:280px;border:1px solid rgba(115,255,69,.35);border-radius:50%;display:grid;place-items:center;background:rgba(0,0,0,.25);box-shadow:0 0 80px rgba(115,255,69,.12)}
.badge-ring{position:absolute;width:220px;height:220px;border:1px dashed rgba(115,255,69,.5);border-radius:50%}
.badge-content{text-align:center;z-index:2}
.badge-content strong{display:block;font-family:'Barlow Condensed';font-size:52px;letter-spacing:4px}
.badge-content span{display:block;color:var(--green);font-size:20px;font-weight:700;letter-spacing:6px}
.badge-content small{display:block;color:#9cad9e;font-size:9px;letter-spacing:2px;margin-top:12px}
.hero-status{position:absolute;z-index:3;bottom:0;left:0;width:100%;display:flex;gap:36px;padding:16px max(24px,calc((100% - var(--container))/2));border-top:1px solid rgba(115,255,69,.15);background:rgba(2,5,3,.72);font-size:10px;letter-spacing:1.5px;color:#aab5ad}
.hero-status i{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--green);margin-right:8px;box-shadow:0 0 10px var(--green)}
.hero-status b{color:var(--green)}

/* SECTIONS */
.section{padding:110px 0}
.services-section{background:var(--surface)}
.section-heading{max-width:760px;margin-bottom:55px}
.section-heading h2,.about-content h2,.cta-box h2{font-family:'Barlow Condensed';font-size:clamp(42px,5vw,68px);line-height:.95;text-transform:uppercase;margin:15px 0 20px}
.about-content h2 span{color:var(--green);}
.section-heading p,.about-content p,.cta-box p{color:var(--muted);line-height:1.8}
.cards-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.service-card{position:relative;padding:35px;min-height:330px;border:1px solid var(--border);background:linear-gradient(145deg,#0c120e,#080b09);transition:.25s}
.service-card:hover,.service-card.featured{border-color:rgba(115,255,69,.45);transform:translateY(-5px)}
.service-number{position:absolute;top:22px;right:25px;color:#536057;font-family:'Barlow Condensed';font-size:30px}
.service-icon{color:var(--green);font-size:40px;margin:30px 0 20px}
.service-card h3{font-family:'Barlow Condensed';font-size:32px;text-transform:uppercase;margin:0 0 12px}
.service-card p{color:var(--muted);line-height:1.7}
.service-card a{display:inline-block;color:var(--green);font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:1px;margin-top:12px}

/* ABOUT */
.about-section{background:#070a08}
.about-grid{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center}
.about-visual{position:relative;min-height:460px;border:1px solid var(--border);background:radial-gradient(circle,rgba(115,255,69,.14),transparent 45%),#050706;display:grid;place-items:center;overflow:hidden}
.about-circle{width:220px;height:220px;border:1px solid rgba(115,255,69,.55);border-radius:50%;display:grid;place-items:center;font-family:'Barlow Condensed';font-size:80px;color:var(--green);box-shadow:0 0 90px rgba(115,255,69,.1)}
.about-visual>span{position:absolute;color:#647169;font-size:9px;letter-spacing:3px}
.about-visual>span:nth-last-child(3){top:25px;left:25px}
.about-visual>span:nth-last-child(2){right:25px;top:50%}
.about-visual>span:nth-last-child(1){bottom:25px;left:25px}
.scanline{position:absolute;left:0;right:0;height:1px;background:var(--green);box-shadow:0 0 15px var(--green);opacity:.3;animation:scan 4s linear infinite}
@keyframes scan{from{top:0}to{top:100%}}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:15px;margin-top:35px}
.stats div{padding:20px;border-top:1px solid var(--border)}
.stats strong{display:block;color:var(--green);font-family:'Barlow Condensed';font-size:34px}
.stats span{color:var(--muted);font-size:11px}

/* CTA / FOOTER */
.cta-section{padding-top:80px;background:var(--surface)}
.cta-box{text-align:center;padding:80px 30px;border:1px solid var(--border);background:radial-gradient(circle,rgba(115,255,69,.1),transparent 60%)}
.cta-box p{max-width:600px;margin:0 auto 30px}
.site-footer{padding:45px 0;border-top:1px solid var(--border);background:#030504}
.footer-grid{display:flex;justify-content:space-between;gap:30px}
.footer-logo{font-size:22px}.site-footer p{color:#667269;font-size:12px}.footer-meta{text-align:right}

/* GENERIC */
.page-main{padding:160px 0 100px;min-height:70vh}
.content-container{max-width:900px}
.content-card{padding:45px;border:1px solid var(--border);background:var(--surface)}
.content-card h1{font-family:'Barlow Condensed';font-size:64px;text-transform:uppercase}
.post-content{line-height:1.8;color:#c4ccc6}

/* MOBILE */
@media(max-width:900px){
    .main-navigation{display:none;position:absolute;top:92px;left:0;right:0;background:#050706;border-bottom:1px solid var(--border);padding:20px}
    .main-navigation.is-open{display:block}
    .main-navigation ul{flex-direction:column;gap:20px}
    .menu-toggle{display:flex;flex-direction:column;gap:5px}
    .menu-toggle span{display:block;width:25px;height:2px;background:var(--green)}
    .hero{min-height:760px}
    .hero-container{display:block}
    .hero-badge{display:none}
    .cards-grid,.about-grid{grid-template-columns:1fr}
    .about-grid{gap:40px}
    .about-visual{min-height:350px}
}
@media(max-width:600px){
    .container{width:min(var(--container),calc(100% - 30px))}
    .hero h1{font-size:58px}
    .hero p{font-size:16px}
    .hero-status{gap:12px;overflow:hidden;white-space:nowrap;font-size:8px}
    .section{padding:75px 0}
    .stats{grid-template-columns:1fr}
    .footer-grid{flex-direction:column}.footer-meta{text-align:left}
}

/* =========================================
   IT / OT AUTOMATIC ALTERNATION
========================================= */

.it-ot-module {
    position: relative;
    min-height: 460px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background:
        radial-gradient(circle at center,
            rgba(115,255,69,.16),
            rgba(115,255,69,.04) 28%,
            transparent 55%),
        #030604;
}

.it-ot-module::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 1px;
    background: rgba(115,255,69,.12);
}

.it-ot-circle {
    position: relative;
    width: 180px;
    height: 180px;
    border: 1px solid rgba(115,255,69,.7);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(5,15,6,.72);
    box-shadow:
        0 0 25px rgba(115,255,69,.18),
        0 0 80px rgba(115,255,69,.08);
    z-index: 3;
}

.it-ot-circle::before {
    content: "";
    position: absolute;
    inset: 12px;
    border: 1px dashed rgba(115,255,69,.28);
    border-radius: 50%;
    animation: radar-spin 8s linear infinite;
}

.it-ot-label {
    color: var(--green);
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 68px;
    font-weight: 600;
    letter-spacing: 3px;
    text-shadow: 0 0 20px rgba(115,255,69,.65);
    transition:
        opacity .25s ease,
        transform .25s ease;
}

.it-ot-label.switching {
    opacity: 0;
    transform: scale(.75);
}

.scanline {
    position: absolute;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--green);
    box-shadow:
        0 0 8px var(--green),
        0 0 25px var(--green),
        0 0 50px rgba(115,255,69,.45);
    opacity: .75;
    z-index: 5;

    animation: scan-it-ot 3s ease-in-out infinite;
}

.it-ot-status {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, 105px);
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--green);
    font-size: 10px;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: 2px;
    text-align: center;
    z-index: 4;
}

.status-arrow {
    font-size: 24px;
    text-shadow: 0 0 12px var(--green);
}

.it-ot-tag {
    position: absolute;
    color: #647169;
    font-size: 9px;
    letter-spacing: 3px;
    z-index: 4;
}

.tag-top {
    top: 25px;
    left: 20px;
}

.tag-right {
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
}

.tag-bottom {
    bottom: 25px;
    left: 20px;
}

@keyframes scan-it-ot {

    0% {
        top: 0%;
    }

    50% {
        top: 100%;
    }

    100% {
        top: 0%;
    }
}

@keyframes radar-spin {

    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}
/* =========================
   METHODOLOGIE
========================= */

.methodology-section{
    background:#050706;
}

.methodology-section .section-heading{
    max-width:760px;
    margin-bottom:60px;
}

.methodology-section .section-heading h2 span{
    color:var(--green);
}

.methodology-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:24px;
}

.methodology-card{
    position:relative;
    min-height:320px;
    padding:38px 32px;
    background:var(--surface);
    border:1px solid var(--border);
    transition:transform .3s ease,
               border-color .3s ease,
               background .3s ease;
    overflow:hidden;
}

.methodology-card::before{
    content:"";
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:2px;
    background:var(--green);
    transform:scaleX(0);
    transform-origin:left;
    transition:transform .3s ease;
}

.methodology-card:hover{
    transform:translateY(-8px);
    border-color:rgba(115,255,69,.45);
    background:var(--surface2);
}

.methodology-card:hover::before{
    transform:scaleX(1);
}

.methodology-number{
    display:block;
    color:var(--green);
    font-family:'Barlow Condensed';
    font-size:18px;
    letter-spacing:2px;
    margin-bottom:35px;
}

.methodology-icon{
    width:54px;
    height:54px;
    display:flex;
    align-items:center;
    justify-content:center;
    border:1px solid var(--border);
    color:var(--green);
    font-size:28px;
    margin-bottom:28px;
}

.methodology-card h3{
    font-family:'Barlow Condensed';
    font-size:32px;
    text-transform:uppercase;
    margin:0 0 15px;
}

.methodology-card p{
    color:var(--muted);
    line-height:1.7;
    margin:0;
}

/* Mobile */
@media (max-width:900px){

    .methodology-grid{
        grid-template-columns:1fr;
    }

    .methodology-card{
        min-height:auto;
    }

}

/* =========================
   AUTRES SERVICES
========================= */

.other-services-section{
    background:var(--surface);
}

.other-services-section .section-heading{
    max-width:760px;
    margin-bottom:55px;
}

.other-services-section .section-heading h2 span{
    color:var(--green);
}

.other-services-grid{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:1px;
    background:var(--border);
    border:1px solid var(--border);
}

.other-service-item{
    position:relative;
    display:grid;
    grid-template-columns:70px 1fr;
    gap:25px;
    padding:38px 35px;
    background:var(--surface);
    transition:background .3s ease;
}

.other-service-item:hover{
    background:var(--surface2);
}

.other-service-item::before{
    content:"";
    position:absolute;
    left:0;
    top:0;
    width:3px;
    height:0;
    background:var(--green);
    transition:height .3s ease;
}

.other-service-item:hover::before{
    height:100%;
}

.other-service-number{
    font-family:'Barlow Condensed';
    font-size:20px;
    color:var(--green);
    letter-spacing:2px;
    padding-top:4px;
}

.other-service-item h3{
    font-family:'Barlow Condensed';
    font-size:30px;
    text-transform:uppercase;
    margin:0 0 12px;
}

.other-service-item p{
    color:var(--muted);
    line-height:1.7;
    margin:0;
}

/* Mobile */
@media (max-width:900px){

    .other-services-grid{
        grid-template-columns:1fr;
    }

    .other-service-item{
        grid-template-columns:55px 1fr;
        padding:30px 25px;
    }

}

/* =========================
   CONTACT
========================= */

.contact-section{
    background:#070a08;
}

.contact-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:80px;
    align-items:start;
}

.contact-content{
    max-width:560px;
}

.contact-content h2{
    font-family:'Barlow Condensed';
    font-size:clamp(42px,5vw,68px);
    line-height:.95;
    text-transform:uppercase;
    margin:15px 0 25px;
}

.contact-content h2 span{
    color:var(--green);
}

.contact-content > p{
    color:var(--muted);
    line-height:1.8;
    max-width:520px;
}

.contact-details{
    margin-top:45px;
    display:flex;
    flex-direction:column;
    gap:20px;
}

.contact-detail{
    display:grid;
    grid-template-columns:45px 1fr;
    gap:18px;
    padding:20px 0;
    border-top:1px solid var(--border);
}

.contact-detail > span{
    color:var(--green);
    font-family:'Barlow Condensed';
    letter-spacing:2px;
}

.contact-detail strong{
    font-family:'Barlow Condensed';
    font-size:20px;
    letter-spacing:1px;
}

.contact-detail p{
    color:var(--muted);
    margin:5px 0 0;
    font-size:14px;
}

/* Formulaire */

.contact-form-wrapper{
    background:var(--surface);
    border:1px solid var(--border);
    padding:40px;
}

.contact-form{
    display:flex;
    flex-direction:column;
    gap:24px;
}

.form-group{
    display:flex;
    flex-direction:column;
    gap:9px;
}

.form-group label{
    font-family:'Barlow Condensed';
    text-transform:uppercase;
    font-size:15px;
    letter-spacing:1px;
}

.form-group input,
.form-group textarea{
    width:100%;
    box-sizing:border-box;
    background:#050706;
    border:1px solid var(--border);
    color:var(--text);
    padding:15px 16px;
    font-family:inherit;
    font-size:15px;
    outline:none;
    transition:border-color .3s ease,
               box-shadow .3s ease;
}

.form-group textarea{
    resize:vertical;
    min-height:150px;
}

.form-group input::placeholder,
.form-group textarea::placeholder{
    color:#59635b;
}

.form-group input:focus,
.form-group textarea:focus{
    border-color:var(--green);
    box-shadow:0 0 0 1px rgba(115,255,69,.12);
}

.contact-form .btn-primary{
    border:none;
    cursor:pointer;
    width:max-content;
}

/* Mobile */

@media (max-width:900px){

    .contact-grid{
        grid-template-columns:1fr;
        gap:50px;
    }

    .contact-form-wrapper{
        padding:30px 25px;
    }

}

/* =========================
   FOOTER
========================= */

.site-footer{
    background:#030504;
    border-top:1px solid var(--border);
    padding:70px 0 25px;
}

.footer-grid{
    display:grid;
    grid-template-columns:1.5fr 1fr 1fr;
    gap:70px;
    padding-bottom:55px;
}

.footer-brand{
    max-width:360px;
}

.footer-logo{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:58px;
    height:58px;
    border:1px solid var(--green);
    color:var(--green);
    font-family:'Barlow Condensed';
    font-size:25px;
    font-weight:700;
    margin-bottom:22px;
}

.footer-brand p{
    color:var(--muted);
    line-height:1.7;
    margin:0;
}

.footer-title{
    display:block;
    color:var(--green);
    font-family:'Barlow Condensed';
    font-size:15px;
    letter-spacing:2px;
    margin-bottom:22px;
}

.footer-navigation,
.footer-expertise{
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    gap:12px;
}

.footer-navigation a,
.footer-expertise span:not(.footer-title){
    color:var(--muted);
    text-decoration:none;
    font-size:14px;
    transition:color .25s ease,
               transform .25s ease;
}

.footer-navigation a:hover{
    color:var(--green);
    transform:translateX(4px);
}

.footer-bottom{
    display:flex;
    justify-content:space-between;
    gap:30px;
    padding-top:25px;
    border-top:1px solid var(--border);
    color:#59635b;
    font-size:12px;
    letter-spacing:.5px;
}

/* Mobile */

@media (max-width:900px){

    .footer-grid{
        grid-template-columns:1fr;
        gap:45px;
    }

    .footer-bottom{
        flex-direction:column;
        gap:10px;
    }

}

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

@media (max-width:600px){

    .container{
        width:calc(100% - 32px);
        max-width:none;
        margin-left:auto;
        margin-right:auto;
    }

    .section{
        padding-top:70px;
        padding-bottom:70px;
    }

    .section-heading{
        margin-bottom:40px;
    }

    .section-heading h2,
    .about-content h2,
    .cta-box h2,
    .contact-content h2{
        font-size:42px;
        line-height:.95;
    }

    .about-grid{
        gap:45px;
    }

    .about-visual{
        min-height:330px;
    }

    .stats{
        gap:15px;
        margin-top:35px;
    }

    .methodology-card{
        padding:30px 25px;
    }

    .other-service-item{
        padding:28px 22px;
    }

    .contact-form-wrapper{
        padding:25px 20px;
    }

}
/* Correction affichage mobile des cartes */
@media (max-width: 600px){
    .cards-grid{
        grid-template-columns: 1fr !important;
        width: 100%;
    }

    .service-card{
        width: 100%;
        max-width: 100%;
        min-width: 0;
    }

    .service-image{
        width: 100%;
    }

    .service-image img{
        width: 100%;
        height: auto;
        display: block;
    }
}
.contact-success{
    margin-bottom:30px;
    padding:18px 22px;
    border:1px solid var(--green);
    background:rgba(115,255,69,.06);
    color:var(--green);
    text-align:center;
}