body{
                font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
                max-width: 100%;
                overflow-x: hidden;
                background:#06162c;
               
            }
            .conteneur_page{
                max-width: 1900px;
                max-height: 100%;
                overflow: hidden;
                margin:0 auto;
            }
            .premiere_section{
                width:100%;
                height:1000px;
               /* background:linear-gradient(to right, #06162c 57%, rgb(0, 136, 255) 100%);
              */  margin:0 0 100px 0;
            }

.material-symbols-outlined {
    font-family: 'Material Symbols Outlined';
    font-weight: normal;
    font-style: normal;
    font-size: 24px;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    display: inline-block;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    -webkit-font-smoothing: antialiased;
    transform: rotate(90deg);
    font-weight: 100;
    width:8%;
}
.conteneur{
    width:100%;
    height:100%;
    display:block;
    margin:0  0 100px 0;
    padding:0;
}


.header {
    position: relative;
    z-index: 20;
    width: 100%;
    margin: auto;
    padding: 28px 260px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.nav {
    display: flex;
    align-items: center;
    gap: 32px;
    color: #858995;
    font-size: 11px;
    font-weight: 600;
}
.nav-contact {
    padding: 11px 17px;
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 999px;
    background: rgba(255, 255, 255, .035);
    color: white !important;
    transition: transform .3s ease, border-color .3s ease, background .3s ease;
}
.nav a {
    transition: color .25s ease;
    color: inherit;
    text-decoration: none;
}

.logo{
    width:170px;
}

.liste{
    display:flex;
    gap:35px;
    list-style:none;
    align-items:center;
}

.liste a{
    color:white;
    text-decoration:none;
    transition:.3s;
}

.liste a:hover{
    opacity:.7;
}

/* =========================
STATUS
========================= */

.status{
    display:none;
    align-items:center;
    gap:8px;
    font-size:14px;
}

.dot{
    width:10px;
    height:10px;
    border-radius:50%;
    animation:pulse 2s infinite;
}

.open{
    color:#18a957;
}

.open .dot{
    background:#18a957;
}

.warning{
    color:#f28900;
}

.warning .dot{
    background:#f28900;
}

.closed{
    color:#ff0000;
}

.closed .dot{
    background:#ff0000;
}

@keyframes pulse{
    0%{transform:scale(1);}
    50%{transform:scale(1.3);}
    100%{transform:scale(1);}
}


/* ================= HERO ================= */

.hero{
    min-height: 85vh;
    background: transparent;
    display: none;
    justify-content: space-between;
    padding: 50px 0 0 4%;
    gap: 60px;
    width: 100%;
    
}
.hero-bloc{
    display:block;
    height:1000px;
    width:700px;
    margin:0 7% 0 0;
}
.first-bloc{
    height:40%;
    width:100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap:16px;
   
    
}
.first-bloc div{
    border-radius: 15px;
    background-color:#003c66b8;
    padding:0px 20px 30px 20px;
    align-items: center;
    text-align: left;
}

.first-bloc div:nth-child(1){
   
    height:70%;
    overflow: hidden;
}
.first-bloc div:nth-child(2){
    height:40%;
}
.first-bloc div img{
    height:auto;
    width:auto;
    border-radius:15px;
    
}
.first-bloc div:nth-child(1) .container_div:nth-child(2) img:nth-child(2){
    height:auto;
    width:auto;
    border-radius:15px 0 15px 15px;
}
.first-bloc div p{
    font-weight: 400;
    color:white;
    font-size: 23px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    margin:0 0 5% 0;
}
.first-bloc div .container_div{
    height:100%;
    padding:20px 0 20px 0;
    background-color:transparent;
}
.first-bloc div:nth-child(2) .container_div p{
    font-weight: 400;
    color: white;
    font-size: 18px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    margin: 0 0 5% 0; 
}

.first-bloc div:nth-child(2){
     border-radius: 15px;
    background-color:#003c66b8;
    padding:5px 15px 0px 8px;
    align-items: center;
    text-align: left;
    overflow:hidden;
}
.first-bloc div:nth-child(2) .container_div{
    height:80%;
    padding:5px 15px 0 8px;
}
.first-bloc div:nth-child(2) img{
    height:100%;
    width:100%;
    border-radius: 15px;
}
.first-bloc div:nth-child(2)  .compteur{
    margin: 5% 0 0 3%;
}
.first-bloc  div:nth-child(2)  .compteur li{
    height:30%;
    
}
.second-bloc{
    height:40%;
    width:100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
     gap:16px;
   
}
.second-bloc div p{
    font-weight: 400;
    color: white;
    font-size: 23px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    margin: 0 0 5% 0; }

.second-bloc div .container_div:nth-child(1) p{
 font-weight: 400;
    color: white;
    font-size: 18px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    margin: 0 0 5% 0;
}
.second-bloc div{
   
    border-radius: 15px;
    background-color:#003c66b8;
    padding:5px 15px 0px 8px;
    align-items: center;
    text-align: left;

}
.second-bloc div:nth-child(1){
    max-width: 100%;
    max-height: 100%;
    overflow: hidden;
}
.second-bloc div:nth-child(2) .container_div{
    margin:unset;
}
.second-bloc div:nth-child(2) .container_div:nth-child(2){
    background-color: unset;
}
.second-bloc div:nth-child(2) .container_div:nth-child(2) img{
    height:70%;
}
.first-bloc div:nth-child(1) .container_div:nth-child(2){
    background-color: unset;
}
.first-bloc div:nth-child(2) .container_div:nth-child(2){
    background-color: unset;
}
.second-bloc div:nth-child(1){
    height:40%;
     margin-top:-31%;
}
.second-bloc div img{
    height:70%;
    width:100%;
    border-radius: 15px;
}
.second-bloc div .container_div{
    height:80%;
    background-color: transparent;
}
.second-bloc div:nth-child(2){
    height:100%;
     margin-top:-67%;
}
.second-bloc div .compteur{
    margin: 5% 0 0 3%;
}
.second-bloc div .compteur li{
    height:30%;
    
}
.second-bloc div:nth-child(2){
    border-radius: 15px;
    background-color: #003c66b8;
    padding: 10px 15px 0px 8px;
    align-items: center;
    text-align: left;
}
.second-bloc div:nth-child(2) {
    max-height:100%;
    max-width: 100%;
    overflow: hidden;

}
.second-bloc div:nth-child(2) .container_div p{
 font-weight: 400;
    color: white;
    font-size: 23px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    margin: 0 0 5% 0;
}
.second-bloc div:nth-child(2) img{
    height:100%;
    width:auto;
    border-radius:15px;
}
.second-bloc div:nth-child(2) .compteur {
    margin:18% 0 0 3%;
}
.second-bloc div:nth-child(2) .container_div:nth-child(2){
    height:80%;
}
.second-bloc div:nth-child(2) .compteur li{
    height:13%;
}
.third-bloc{
    height:40%;
    width:100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
     gap:16px;    
}
.third-bloc div img{
     height:130%;
    width:100%;
    border-radius:15px 15px 0 0;
}
.third-bloc div{
   border-radius: 15px;
    background-color:#003c66b8;
    padding:0px 20px 30px 20px;
    align-items: center;
    text-align: left;
}
.third-bloc div p{
 font-weight: 400;
    color:white;
    font-size: 23px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    margin:0 0 5% 0;}
.third-bloc div .container_div{
       height:100%;
    padding:20px 0 20px 0;
    background-color:transparent;
}
.third-bloc div:nth-child(1){
    height:70%;
      margin-top:-98%;
}
.third-bloc div:nth-child(2){
    height:40%;
    margin-top:-65%;
}
.third-bloc div:nth-child(1) .container_div:nth-child(2){
    height:70%;
    margin: unset;
    background-color: unset;
}
.third-bloc .container_div{
    margin:unset;
}
.third-bloc div:nth-child(1)  .compteur{
    margin:80px 0 0 0;
}
.third-bloc div:nth-child(2) .container_div p{
    font-weight: 400;
    color: white;
    font-size: 18px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    margin: 0 0 5% 0; 
}

.third-bloc div:nth-child(2){
     border-radius: 15px;
    background-color:#003c66b8;
    padding:5px 15px 0px 8px;
    align-items: center;
    text-align: left;
}
.third-bloc div:nth-child(2) .container_div{
    height:80%;
    padding:5px 15px 0 8px;
}
.third-bloc div:nth-child(2) img{
    height:100%;
    width:100%;
    border-radius: 15px 15px 0 0;
}
.third-bloc div:nth-child(2)  .compteur{
    margin: 5% 0 0 3%;
}
.third-bloc  div:nth-child(2)  .compteur li{
    height:30%;
    
}

.services-hover{
    position:absolute;
    top:60%;
    left:70%;
    transform:translateX(-50%);
    width:55%;

    display:flex;
    justify-content:space-between;
    gap:40px;

    padding:35px;
    background:#06162c;
    border-radius:12px;
    box-shadow:0 15px 40px rgba(0,0,0,.15);

    opacity:0;
    visibility:hidden;
    transition:.3s;
    z-index:999;
}

.menu-services:hover .services-hover{
    opacity:1;
    visibility:visible;
}

.service-column{
    display:flex;
    flex-direction:column;
    flex:1;
}

.service-column h3{
    margin-bottom:18px;
    color:white;
    font-size:18px;
    font-weight:700;
    border-bottom:2px solid #0b63ce;
    padding-bottom:8px;
}

.service-column a{
    color:white;
    text-decoration:none;
    padding:8px 0;
    transition:.25s;
}

.service-column a:hover{
    color:#0b63ce;
    padding-left:8px;
}
.hero-text{
    flex:1;
    color:white;
    
}


.hero-text h1{
    font-size:17px;
    line-height:1;
    margin-bottom:5%;
    font-weight:500;
    letter-spacing: 2px;
}

.hero-text p{
    font-size:48px;
    line-height:1.2;
    color:#ffffff;
    max-width:450px;
    text-align: left;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.hero-btn{
    margin-top:35px;
}

.hero-btn button{
    padding:18px 38px;
    border:none;
    border-radius:12px;
    background:white;
    color:black;
    font-size:16px;
    cursor:pointer;
    transition:0.3s;
    font-weight:600;
}

.hero-btn button:hover{
    transform:translateY(-3px);
}

.hero-image{
    flex:1;
    display:flex;
    justify-content:center;
}

.hero-image img{
    width:100%;
    max-width:500px;
    border-radius:25px;
    object-fit:cover;
}
.services {
    width: 80%;
    height:50%;  
    padding: 0 0 0 0;
    display: grid;
    grid-template-columns: 0.8fr 1fr 0.8fr;
    grid-template-rows: repeat(auto,1fr);
    gap: 20px;
  margin:0 0 2% 10%;
  color:rgb(5, 218, 5);
}



.subtitle{
    font-size: 20px;
    margin-bottom: 40px;
        margin-top: 35px;
    font-size: 24px;
    line-height: 30px;
    color: #23315f;
    max-width: 850px;
    padding:0 0 0 8%;
}
 .line{
        width:85px;
height:5px;
background:#1f62ff;
margin:30px 0 30px 8%;

    }
.services__deux {
    width: 80%;
    height:50%;
    
    padding: 0 0 0 0;
    display: grid;
    grid-template-columns: 1fr  1fr;
    grid-template-rows: repeat(auto,1fr);
    gap: 20px;
  margin:0 0 2% 10%;
  color:rgb(5, 218, 5);
}
.services__trois {
    width: 80%;
    height:50%;
    
    padding: 0 0 0 0;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: repeat(auto,1fr);
    gap: 20px;
  margin:0 0 8% 10%;
  color:rgb(5, 218, 5);
}
@media(max-width:915px){
  .services-hover{display:none;}}
/* CARTE */

.card {
    height: 520px;
    perspective: 1200px;
    
   
}
.title {
    font-size: 58px;
    font-weight: 700;
    line-height: 1.1;
    margin-bottom: 10px;
    padding:0 0 0 8%;
  	color:#0a0048;
  
}
.title span {
    display: block;
    color: #1f62ff;
    font-weight: 600;
}
.card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    transition: transform .8s ease;
    transform-style: preserve-3d;
}

.card:hover .card-inner {
    transform: rotateY(180deg);
}

/* FACES */

.card-front,
.card-back {
    position: absolute;
    inset: 0;
    border-radius: 35px;
    backface-visibility: hidden;
    overflow: hidden;
    border: 3px solid #bababa2b;
}

/* FACE AVANT */

.card-front {
    

    display: flex;
    flex-direction: column;
 	border: 3px solid #bababa2b;
    padding: 150px 10px 0px 10px;
    text-align: center;
    color: #23315f ;
}

.services .card:nth-child(2) .card-front{
    background-color: #0a0048;;
    color:white;
  border: 3px solid #bababa2b;
}
.services .card:nth-child(1) .card-front,.services .card:nth-child(3) .card-front,.services__deux .card:nth-child(1) .card-front,.services__deux .card:nth-child(2) .card-front,.services__trois .card:nth-child(1) .card-front,.services__trois .card:nth-child(2) .card-front,.services__trois .card:nth-child(3) .card-front{
    
  border: 3px solid #bababa2b;
}



.services .card:nth-child(2) .card-front p{
    color:white;
}
.services .card:nth-child(1) .card-front{
    padding: 30px 10px 10px 10px;
  /*  background: url(/pare_feu_2.png);*/
    background-size: 350px 350px;
    background-position: 50px 150px;
  border: 3px solid #bababa2b;
    
    background-repeat: no-repeat;
    padding: 150px 10px 10px 10px;
}
.services__trois .card:nth-child(2) .card-front{
    background-color: #0a0048;;
    color:white;
  border: 3px solid #bababa2b;
}
.services__trois .card:nth-child(2) .card-front p{
    color:white;
}
.card-front span {
    font-size: 4rem;
    font-weight: 800;
    color: #00d4ff;
    border-bottom: 15px;
    display: none;
}

.card-front h2 {
    font-size: 40px;
    margin-bottom: 10px;
    font-weight: 500;
    letter-spacing: -1px;
}

.card-front p {
    color: rgba(51, 51, 51, 0.8);
    line-height: 1.8;
    font-size: 18px;
    width:100%;
    margin:0 0 50px 0;
    font-weight: 500;
}

/* FACE ARRIÈRE */

.card-back {
    background: linear-gradient(
        145deg,
        #00d4ff,
        #00a6ff
    );
    color: white;
    transform: rotateY(180deg);
    padding: 35px;
}

.card-back h3 {
    font-size: 20px;
    margin-bottom: 25px;
    font-weight: 700;
  color:white;
}

.card-back ul {
    list-style: none;
}

.card-back ul li {
    position: relative;
    padding-left: 22px;
    margin-bottom: 18px;
    line-height: 1.6;
    font-weight: 500;
  color:white;
}

.card-back ul li::before {
    content: "▸";
    position: absolute;
    left: 0;
    color: #003b66;
    font-weight: bold;
}

/* EFFET LUMIÈRE */

.card-front,
.card-back {
    border: 1px solid rgb(215 215 215 / 14%);
    
}
.services-x {
   opacity: 0;
    transform: translateY(30px);

    animation:
        reveal .8s ease forwards;
    animation-delay: .15s;


    
}
@keyframes reveal {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
footer{
    background:#06162c;
    color:white;
    text-align:center;
    padding:40px 40px 40px 40px;
  width:90%;
      border-top: 1px solid rgba(255, 255, 255, 0.08);
  margin-left:4%;
  margin-top: 3%;
 
  
}

 .footer {
    background: linear-gradient(180deg, #0b1220 0%, #070b13 100%);
    color: #d1d5db;
    padding-top: 80px;
    border-top: 1px solid rgba(255,255,255,0.08);
}
.nav a:hover, .nav a.active {
    color: white;
}
.footer-container {
    max-width: 1400px;
    margin: auto;
    padding: 0 40px 60px;
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1.3fr;
    gap: 50px;
}

.footer-logo {
    color: #fff;
    font-size: 2rem;
    margin-bottom: 20px;
    font-weight: 700;
}

.footer-column h3 {
    color: #fff;
    margin-bottom: 20px;
    font-size: 1.1rem;
}

.footer-column p {
    line-height: 1.8;
    margin-bottom: 25px;
}

.footer-column ul {
    list-style: none;
    padding: 0;
}

.footer-column ul li {
    margin-bottom: 12px;
}

.footer-column a {
    color: #b0b8c5;
    text-decoration: none;
    transition: 0.3s;
}

.footer-column a:hover {
    color: #3b82f6;
    padding-left: 5px;
}

.footer-certifications {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.footer-certifications span {
    background: rgba(59,130,246,0.15);
    color: #60a5fa;
    padding: 8px 14px;
    border-radius: 30px;
    font-size: 0.85rem;
    border: 1px solid rgba(59,130,246,0.2);
}

.contact-item {
    margin-bottom: 15px;
    line-height: 1.6;
}

.social-links {
    display: flex;
    gap: 15px;
    margin-top: 20px;
  margin-left:100%;
}

.social-links a {
    width: 42px;
    height: 42px;
    border-radius: 50%;
   /* background: rgba(255,255,255,0.06);*/
    display: flex;
    align-items: center;
    justify-content: center;
    transition: 0.3s;
}

.social-links a:hover {
    background: #2563eb;
    color: white;
    transform: translateY(-3px);
}

.footer-bottom {
    border-top: 1px solid rgba(255,255,255,0.08);
    padding: 25px 40px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 15px;
}

.footer-legal {
    display: flex;
    gap: 25px;
}

.footer-legal a {
    color: #9ca3af;
    text-decoration: none;
}

.footer-legal a:hover {
    color: white;
}

@media(max-width:992px){
    .footer-container{
        grid-template-columns: 1fr 1fr;
    }
}

@media(max-width:768px){
  .liste {
        gap: 20px;
        flex-wrap: wrap;
        justify-content: center;
    }
    .footer-container{
        grid-template-columns: 1fr;
    }

    .footer-bottom{
        flex-direction: column;
        text-align: center;
    }

    .footer-legal{
        flex-wrap: wrap;
        justify-content: center;
    }
  .footer-container .footer-column:nth-child(2){
    margin:28px 0 0 0;
  }
}

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}



/* SECTION */

.service_additionel{
    height:100%;
    padding:100px 8% 0 8%;
    background-color: #0a0048;
}


.service_additionel .title {
    color:white;
}
.service_additionel .subtitle{
    color:#d8d8d8;
}



/* CONTENU */

.ancre{
    display:grid;
    grid-template-columns: 1.2fr 0.8fr;
    gap:80px;
    align-items:center;
}

/* IMAGE */

.image-container{
    position:relative;
    
}

.image-container img{
    width:100%;
    height:350px;
    object-fit:cover;
    border-radius:25px;
    transition:opacity .6s ease;
    padding:0 0 0 13%;
}

/* LISTE */

.autre_service{
    list-style:none;
    display:flex;
    flex-direction:column;
    gap:35px;
}

/* ITEM */

.autre_service li{
    position:relative;
    padding-left:40px;
    opacity:.45;
    transition:.6s ease;
}

/* BARRE VERTICALE */

.autre_service li::before{
    content:"";
    position:absolute;

    left:0;
    top:0;

    width:4px;
    height:35px;

    background:white;
    border-radius:20px;

    transition:.6s ease;
}

/* ETAT ACTIF */

.autre_service li.active{
    opacity:1;
}

.autre_service li.active::before{
    height:100%;
    min-height:90px;
}

/* TITRE */

.autre_service li p:first-child{
    font-size:26px;
    color:white;
    margin:0;
}

/* DESCRIPTION */

.autre_service li p:last-child{
    margin-top:12px;
    color:#cfcfcf;
    line-height:1.6;

    opacity:0;
    max-height:0;

    overflow:hidden;

    transition:
        opacity .5s ease,
        max-height .5s ease;
}

/* DESCRIPTION ACTIVE */

.autre_service li.active p:last-child{
    opacity:1;
    max-height:150px;
}

/* RESPONSIVE */

@media(max-width:1000px){

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

    .image-container img{
        height:400px;
    }

    .service_additionel h2{
        font-size:40px;
    }
}



/* RESPONSIVE */
@media(max-width:1193px){
    .premiere_section{
        height:auto;
    }
    .hero{
        flex-direction: column;
    }
}
@media(max-width:999px){
    .services{
        display: block;
    }
    .services__trois{
        display: block;
    }
    .card{
            margin: 0 0 0.8% 0;
    }
}
@media(max-width:888px){
        header {
        flex-direction: column;
        gap: 20px;
        padding: 20px;
    }

}
@media(max-width:768px) {

    .services {
        padding: 60px 5%;
    }

    .card {
        height: 450px;
      	margin: 0 0 5px 0;
    }

    .card-front h2,
    .card-back h3 {
        font-size: 1.5rem;
    }
}
@media(max-width: 742px){
    .hero-bloc{
        display:none;
    }
}
@media(max-width:525px){
  .footer-container .footer-column:nth-child(2) {
   margin: 108px 0 0 0;
  }
  .services__deux {
    grid-template-columns: 1fr;}
  
  .material-symbols-outlined {
    margin: 0 0 0 5%;}
  
  .image-container img {
    width: 100%;
    height: 350px;
    object-fit: cover;
    border-radius: 25px;
    transition: opacity .6s ease;
    padding: unset;
}
  footer {
    background: #0a0048;
    color: white;
    text-align: center;
     padding: 0; 
    width: 90%;
    border-top: 1px solid rgb(255, 255, 255);
    margin-left: 4%;
    margin-top: 3%;
}

}

.compteur{
    width:30%;
    height:10%;
    display:flex;
    list-style-type: none;
    margin:10px 0 0 0;
}
.compteur li{
    width:50%;
    height:20%;
    background-color: grey;
    margin:0 5px 0 0;
    border-radius: 25px;
}
.compteur li:nth-child(1){
    width:100%;
    height:20%;
    background-color: white;
    margin:0 5px 0 0;
    border-radius: 25px;
}
.second-bloc .container_div{
    width:unset;
    height:unset;
    margin:unset;
    display:block;
}
.container_div:nth-child(2){
    display:none;
}


.logo-slider {
    overflow: hidden;
    width: 100%;
    
}

.logo-track {
    display: flex;
    gap: 40px;
    width: 100%;
    animation: defilement 3s linear infinite;
    background-color: unset;
}

.logo-track img {
    height: 40px;
     position:relative;
    left:0%;
}

/*@keyframes defilement {
    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(-50%);
    }
}*/
@media(max-width:390px){
  .title{
    font-size:55px;}}































 ========================================================= */

.services-x {
    --black: rgb(6, 22, 44);
    --black-2: #0d0f15;
    --white: #f7f7fa;
    --muted: #777b87;
    --line: rgba(255,255,255,.08);

    --violet: #756dff;
    --blue: #5865f2;
    --cyan: #00e5ff;

    position: relative;

    width: min(1450px, 94%);
    margin: 100px auto;

    padding: 75px;

    overflow: hidden;
    isolation: isolate;

    color: var(--white);

    background:
        radial-gradient(
            circle at 82% 8%,
            rgba(117,109,255,.16),
            transparent 28%
        ),
        radial-gradient(
            circle at 12% 85%,
            rgba(0,229,255,.06),
            transparent 25%
        ),
        var(--black);

    border-radius: 44px;

    box-shadow:
        0 45px 120px rgba(0,0,0,.42),
        inset 0 0 0 1px rgba(255,255,255,.07);
}


/* =========================================================
   TECH GRID
   ========================================================= */

.services-x-grid {
    position: absolute;
    inset: 0;

    background-image:
        linear-gradient(
            rgba(255,255,255,.028) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255,255,255,.028) 1px,
            transparent 1px
        );

    background-size: 55px 55px;

    mask-image:
        linear-gradient(
            to bottom,
            transparent,
            black 18%,
            black 82%,
            transparent
        );

    z-index: -3;
}


/* =========================================================
   GLOW
   ========================================================= */

.services-x-orb {
    position: absolute;

    border-radius: 50%;

    filter: blur(80px);

    pointer-events: none;

    z-index: -2;

    animation:
        servicesOrb 11s ease-in-out infinite alternate;
}

.services-x-orb.one {
    width: 350px;
    height: 350px;

    top: -180px;
    right: 8%;

    background:
        rgba(117,109,255,.16);
}

.services-x-orb.two {
    width: 280px;
    height: 280px;

    bottom: -130px;
    left: 8%;

    background:
        rgba(0,229,255,.08);

    animation-delay: -4s;
}

@keyframes servicesOrb {

    from {
        transform:
            translate3d(0,0,0)
            scale(1);
    }

    to {
        transform:
            translate3d(35px,-25px,0)
            scale(1.12);
    }
}


/* =========================================================
   HEADER
   ========================================================= */

.services-x-header {

    position: relative;
    z-index: 2;

    display: flex;

    justify-content: space-between;
    align-items: flex-end;

    gap: 60px;

    margin-bottom: 65px;
}


.services-x-intro {
    max-width: 780px;
}


.services-x-label {

    display: inline-flex;
    align-items: center;

    gap: 9px;
    color:white;
    margin-bottom: 22px;

  
    font-size: 9px;
    font-weight: 700;

    letter-spacing: .25em;
}


.services-x-label::before {

    content: "";

    width: 6px;
    height: 6px;

    border-radius: 50%;

    background: var(--cyan);

    box-shadow:
        0 0 10px var(--cyan),
        0 0 25px rgba(0,229,255,.5);
}


.services-x-title {

    margin: 0;

    font-size:
        clamp(55px, 7vw, 105px);

    line-height: .84;
color:white;
    letter-spacing: -.075em;

    font-weight: 700;
}


.services-x-title span {

    display: block;

    background:
        linear-gradient(
            100deg,
            #ffffff 10%,
            #8d95ff 45%,
            #00e5ff 90%
        );

    -webkit-background-clip: text;
    background-clip: text;

    color: transparent;

    filter:
        drop-shadow(
            0 0 28px rgba(88,101,242,.22)
        );
}


.services-x-description {

    max-width: 600px;

    margin: 27px 0 0;

    color:white;

    font-size: 13px;

    line-height: 1.75;
}


/* =========================================================
   STATUS
   ========================================================= */

.services-x-status {

    display: flex;

    align-items: center;

    gap: 9px;

    padding-bottom: 8px;

    color: #555963;

    font-size: 8px;

    font-weight: 700;

    letter-spacing: .18em;

    white-space: nowrap;
}


.services-x-status i {

    width: 6px;
    height: 6px;

    border-radius: 50%;

    background: #52d99a;

    box-shadow:
        0 0 8px #52d99a,
        0 0 18px rgba(82,217,154,.45);
}


/* =========================================================
   MAIN SERVICES
   ========================================================= */

.services-x-list {

    position: relative;

    z-index: 2;

    display: grid;

    grid-template-columns:
        repeat(12, 1fr);

    gap: 12px;
}


/* =========================================================
   SERVICE CARD
   ========================================================= */

.services-x-card {

    position: relative;

    min-height: 355px;

    padding: 27px;

    box-sizing: border-box;

    display: flex;

    flex-direction: column;

    overflow: hidden;

    border:
        1px solid rgba(255,255,255,.075);

    border-radius: 24px;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.045),
            rgba(255,255,255,.018)
        );

    transition:
        transform .45s cubic-bezier(.2,.8,.2,1),
        border-color .35s ease,
        background .35s ease,
        box-shadow .35s ease;
}


/* positions asymétriques */

.services-x-card:nth-child(1) {
    grid-column: span 4;
}

.services-x-card:nth-child(2) {
    grid-column: span 4;
}

.services-x-card:nth-child(3) {
    grid-column: span 4;
}

.services-x-card:nth-child(4) {
    grid-column: span 5;
}

.services-x-card:nth-child(5) {
    grid-column: span 7;
}

.services-x-card:nth-child(6) {
    grid-column: span 7;
}

.services-x-card:nth-child(7) {
    grid-column: span 5;
}

.services-x-card:nth-child(8) {
    grid-column: span 12;
    min-height: 290px;
}


/* =========================================================
   CARD NUMBER
   ========================================================= */

.services-x-number {

    position: absolute;

    right: 20px;
    top: 15px;

    color:
        rgba(255,255,255,.035);

    font-size: 105px;

    line-height: 1;

    letter-spacing: -.09em;

    font-weight: 800;

    pointer-events: none;

    transition:
        color .4s ease,
        transform .4s ease;
}


.services-x-card:hover
.services-x-number {

    color:
        rgba(117,109,255,.08);

    transform:
        translate(-5px,5px);
}


/* =========================================================
   CARD TOP
   ========================================================= */

.services-x-top {

    position: relative;

    display: flex;

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

    z-index: 2;
}


.services-x-index {

    color: #5b5f69;

    font-size: 9px;

    font-weight: 700;

    letter-spacing: .2em;
}


.services-x-icon {

    width: 40px;
    height: 40px;

    display: grid;

    place-items: center;

    border-radius: 12px;

    color: #858aff;

    background:
        rgba(117,109,255,.08);

    border:
        1px solid rgba(117,109,255,.16);

    font-size: 15px;

    transition:
        transform .4s ease,
        background .4s ease,
        box-shadow .4s ease;
}


.services-x-card:hover
.services-x-icon {

    transform:
        rotate(10deg)
        scale(1.08);

    background:
        rgba(117,109,255,.15);

    box-shadow:
        0 0 30px
        rgba(117,109,255,.16);
}


/* =========================================================
   CARD CONTENT
   ========================================================= */

.services-x-content {

    position: relative;

    z-index: 2;

    margin-top: auto;
}


.services-x-content h3 {

    max-width: 520px;

    margin: 0 0 13px;

    color: #f5f5f7;

    font-size: 23px;

    line-height: 1;

    letter-spacing: -.045em;

    font-weight: 600;
}


.services-x-content > p {

    max-width: 520px;

    margin: 0;

    color: #777b86;

    font-size: 11px;

    line-height: 1.65;
}


/* =========================================================
   DETAILS
   ========================================================= */

.services-x-details {

    margin-top: 20px;

    max-height: 0;

    overflow: hidden;

    opacity: 0;

    transform:
        translateY(12px);

    transition:
        max-height .5s ease,
        opacity .35s ease,
        transform .4s ease;
}


.services-x-card:hover
.services-x-details {

    max-height: 190px;

    opacity: 1;

    transform:
        translateY(0);
}


.services-x-details ul {

    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 6px 25px;

    margin: 0;

    padding: 0;

    list-style: none;
}


.services-x-details li {

    position: relative;

    padding-left: 12px;

    color: #858995;

    font-size: 9px;

    line-height: 1.4;
}


.services-x-details li::before {

    content: "";

    position: absolute;

    left: 0;

    top: 5px;

    width: 4px;
    height: 4px;

    border-radius: 50%;

    background:
        var(--violet);

    box-shadow:
        0 0 8px
        rgba(117,109,255,.8);
}


/* =========================================================
   CARD LINK
   ========================================================= */

.services-x-link {

    position: relative;

    z-index: 2;

    display: flex;

    justify-content: space-between;

    align-items: center;

    margin-top: 25px;

    padding-top: 16px;

    border-top:
        1px solid rgba(255,255,255,.06);

    color: #626671;

    font-size: 8px;

    font-weight: 700;

    letter-spacing: .16em;

    text-decoration: none;

    transition:
        color .3s ease;
}


.services-x-link span:last-child {

    width: 28px;
    height: 28px;

    display: grid;

    place-items: center;

    border-radius: 50%;

    background:
        rgba(255,255,255,.045);

    color: #858995;

    font-size: 13px;

    transition:
        transform .35s ease,
        background .35s ease;
}


.services-x-card:hover
.services-x-link {

    color: #8d91ff;
}


.services-x-card:hover
.services-x-link span:last-child {

    transform:
        rotate(45deg);

    background:
        rgba(117,109,255,.14);
}


/* =========================================================
   HOVER CARD
   ========================================================= */

.services-x-card:hover {

    transform:
        translateY(-7px);

    border-color:
        rgba(117,109,255,.34);

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.065),
            rgba(255,255,255,.022)
        );

    box-shadow:
        0 25px 60px
        rgba(0,0,0,.28),
        0 0 40px
        rgba(117,109,255,.06);
}


/* =========================================================
   DATA PANEL
   ========================================================= */

.services-x-data {

    position: relative;

    z-index: 2;

    display: flex;

    justify-content: space-between;

    align-items: center;

    gap: 30px;

    margin-top: 12px;

    padding:
        18px 22px;

    border-radius: 17px;

    border:
        1px solid rgba(255,255,255,.055);

    background:
        rgba(255,255,255,.018);
}


.services-x-data-left {

    display: flex;

    align-items: center;

    gap: 13px;
}


.services-x-data-dot {

    width: 7px;
    height: 7px;

    border-radius: 50%;

    background:
        var(--cyan);

    box-shadow:
        0 0 12px var(--cyan);
}


.services-x-data-text {

    color: #666a75;

    font-size: 8px;

    font-weight: 700;

    letter-spacing: .15em;
}


.services-x-data-right {

    display: flex;

    gap: 28px;

    color: #4f535d;

    font-size: 8px;

    font-weight: 700;

    letter-spacing: .13em;
}


/* =========================================================
   ENGAGEMENT
   ========================================================= */

.services-x-engagement {

    position: relative;

    z-index: 2;

    min-height: 300px;

    margin-top: 12px;

    padding:
        40px 45px;

    box-sizing: border-box;

    display: flex;

    align-items: center;

    overflow: hidden;

    border-radius: 28px;

    background:
        radial-gradient(
            circle at 85% 50%,
            rgba(117,109,255,.17),
            transparent 30%
        ),
        #06162c;

    border:
        1px solid rgba(255,255,255,.07);
}


.services-x-engagement-content {

    width: 58%;

    position: relative;

    z-index: 4;
}


.services-x-engagement-label {

    display: inline-flex;

    align-items: center;

    gap: 8px;

    margin-bottom: 18px;

    color: #756dff;

    font-size: 8px;

    font-weight: 700;

    letter-spacing: .2em;
}


.services-x-engagement-label::before {

    content: "";

    width: 5px;
    height: 5px;
    
    border-radius: 50%;

    background: #756dff;

    box-shadow:
        0 0 13px #756dff;
}


.services-x-engagement h3 {

    margin: 0 0 17px;

    font-size:
        clamp(30px, 4vw, 50px);

    line-height: .95;

    letter-spacing: -.065em;
    color:white;
    font-weight: 600;
}


.services-x-engagement h3 span {

    color: #756dff;
}


.services-x-engagement p {

    max-width: 590px;

    margin: 0;

    color: #85858f;

    font-size: 11px;

    line-height: 1.75;
}


/* =========================================================
   ORBITAL SYSTEM
   ========================================================= */

.services-x-orbit {

    position: absolute;

    right: 8%;

    top: 50%;

    width: 270px;
    height: 270px;

    transform:
        translateY(-50%);
}


.services-x-orbit-ring {

    position: absolute;

    left: 50%;
    top: 50%;

    border-radius: 50%;

    border:
        1px solid rgba(117,109,255,.22);

    transform:
        translate(-50%,-50%);
}


.services-x-orbit-ring.one {

    width: 250px;
    height: 250px;

    transform:
        translate(-50%,-50%)
        rotate(25deg);
}


.services-x-orbit-ring.two {

    width: 175px;
    height: 175px;

    border-color:
        rgba(255,255,255,.08);

    transform:
        translate(-50%,-50%)
        rotate(-35deg);
}


.services-x-orbit-core {

    position: absolute;

    left: 50%;
    top: 50%;

    width: 72px;
    height: 72px;

    display: grid;

    place-items: center;

    transform:
        translate(-50%,-50%);

    border-radius: 50%;

    background:
        radial-gradient(
            circle at 35% 30%,
            #827aff,
            #5148d5
        );

    border:
        1px solid rgba(255,255,255,.25);

    box-shadow:
        0 0 55px
        rgba(112,104,255,.5),
        inset 0 1px 1px
        rgba(255,255,255,.4);

    font-size: 17px;

    font-weight: 700;
}


.services-x-point {

    position: absolute;

    width: 7px;
    height: 7px;

    border-radius: 50%;

    background:
        var(--violet);

    box-shadow:
        0 0 15px var(--violet);
}


.services-x-point.one {

    top: 22px;
    right: 48px;
}


.services-x-point.two {

    bottom: 32px;
    left: 28px;

    width: 4px;
    height: 4px;
}


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

.services-x-footer {

    position: relative;

    z-index: 2;

    display: flex;

    justify-content: space-between;

    gap: 20px;

    margin-top: 25px;

    padding-top: 20px;

    border-top:
        1px solid rgba(255,255,255,.06);

    color: #4f535d;

    font-size: 8px;

    font-weight: 700;

    letter-spacing: .15em;
}


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

@media (max-width: 1050px) {

    .services-x {

        padding: 55px;
    }

    .services-x-card:nth-child(n) {

        grid-column:
            span 6;
    }

    .services-x-card:nth-child(8) {

        grid-column:
            span 12;
    }

    .services-x-details li {

        font-size: 8px;
    }
}


@media (max-width: 700px) {

    .services-x {

        width: 94%;

        margin: 55px auto;

        padding: 35px 20px;

        border-radius: 28px;
    }


    .services-x-header {

        display: block;

        margin-bottom: 40px;
    }


    .services-x-title {

        font-size:
            clamp(48px, 14vw, 75px);
    }


    .services-x-description {

        font-size: 12px;
    }


    .services-x-status {

        margin-top: 25px;
    }


    .services-x-list {

        display: grid;

        grid-template-columns: 1fr;
    }


    .services-x-card:nth-child(n) {

        grid-column:
            span 1;

        min-height: 290px;
    }


    /* pas de hover obligatoire sur mobile */

    .services-x-details {

        max-height: 190px;

        opacity: 1;

        transform: none;
    }


    .services-x-details ul {

        grid-template-columns: 1fr;
    }


    .services-x-engagement {

        min-height: 480px;

        padding: 30px;

        align-items: flex-start;
    }


    .services-x-engagement-content {

        width: 100%;
    }


    .services-x-orbit {

        right: -80px;

        bottom: -50px;

        top: auto;

        transform: none;

        opacity: .28;
    }


    .services-x-data {

        align-items: flex-start;

        flex-direction: column;
    }


    .services-x-data-right {

        flex-wrap: wrap;

        gap: 12px;
    }


    .services-x-footer {

        flex-direction: column;

        line-height: 1.5;
    }
}