/* =========================================================
   VM CONNECT
   STYLE PRINCIPAL
   ========================================================= */


/* =========================================================
   1. VARIABLES
   ========================================================= */

:root {
    --blue: #0569b9;
    --blue-light: #087bd3;
    --dark: #07365c;
    --dark-deep: #031f3a;
    --green: #17b978;
    --green-light: #25d88a;
    --soft: #f4f8fc;
    --text: #18324a;
    --border: #e4edf5;
    --white: #ffffff;
}


/* =========================================================
   2. BASE
   ========================================================= */

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    padding: 0;

    font-family: Arial, Helvetica, sans-serif;

    color: var(--text);

    background: #ffffff;

    overflow-x: hidden;
}

img {
    max-width: 100%;
}

a {
    transition: all 0.25s ease;
}


/* =========================================================
   3. NAVIGATION
   ========================================================= */

.navbar {
    background: #ffffff !important;

    min-height: 82px;

    padding-top: 4px;
    padding-bottom: 4px;

    position: relative;

    z-index: 1000;
}

.navbar-brand {
    padding: 0;
    margin: 0;
}


/* Logo VM Connect */

.vmconnect-brand {
    display: flex;

    align-items: center;

    padding: 3px 0;

    margin-right: 35px;
}

.vmconnect-logo {
    width: 230px;

    height: 72px;

    object-fit: contain;

    object-position: left center;

    display: block;
}


/* Liens menu */

.navbar-nav {
    align-items: center;
}

.nav-link {
    position: relative;

    font-size: 15px;

    font-weight: 600;

    color: #27445f !important;

    padding: 28px 12px !important;
}

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


/* Petit trait sous le menu */

.nav-link::after {
    content: "";

    position: absolute;

    left: 50%;
    bottom: 18px;

    width: 0;
    height: 2px;

    background: var(--green);

    transform: translateX(-50%);

    transition: width 0.25s ease;
}

.nav-link:hover::after {
    width: 25px;
}


/* Bouton menu mobile */

.navbar-toggler {
    border: 1px solid #dce7ef;
}

.navbar-toggler:focus {
    box-shadow: none;
}


/* =========================================================
   4. HERO / BANNIÈRE PRINCIPALE
   ========================================================= */

.hero {
    position: relative;

    min-height: 650px;

    display: flex;

    align-items: center;

    overflow: hidden;

    color: #ffffff;

    background:
        radial-gradient(
            circle at 85% 50%,
            rgba(0, 184, 255, 0.24),
            transparent 35%
        ),
        linear-gradient(
            120deg,
            #031f3a 0%,
            #043b67 45%,
            #056fa4 100%
        );
}


/* Effet lumineux */

.hero::before {
    content: "";

    position: absolute;

    width: 550px;
    height: 550px;

    border-radius: 50%;

    right: -150px;
    top: -150px;

    background: rgba(0, 181, 255, 0.05);

    border: 1px solid rgba(255, 255, 255, 0.08);

    pointer-events: none;
}

.hero::after {
    content: "";

    position: absolute;

    width: 400px;
    height: 400px;

    border-radius: 50%;

    left: -200px;
    bottom: -250px;

    background: rgba(37, 216, 138, 0.08);

    pointer-events: none;
}


/* Ligne principale */

.hero-row {
    position: relative;

    min-height: 650px;

    z-index: 2;
}


/* Contenu texte */

.hero-content {
    position: relative;

    z-index: 5;
}


/* Petit texte supérieur */

.hero-label {
    display: inline-block;

    margin-bottom: 22px;

    font-size: 13px;

    font-weight: 800;

    letter-spacing: 1.8px;

    color: var(--green-light);
}


/* Titre */

.hero h1 {
    max-width: 850px;

    margin: 0 0 25px;

    font-size: clamp(46px, 5vw, 76px);

    line-height: 1.04;

    font-weight: 800;

    letter-spacing: -2px;

    color: #ffffff;
}


/* Texte */

.hero p {
    max-width: 680px;

    margin: 0 0 35px;

    font-size: 19px;

    line-height: 1.7;

    color: rgba(255, 255, 255, 0.84);
}


/* =========================================================
   5. BOUTONS HERO
   ========================================================= */

.hero-buttons {
    display: flex;

    flex-wrap: wrap;

    gap: 15px;
}

.hero-btn-primary,
.hero-btn-secondary {
    min-height: 52px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    padding: 13px 25px;

    border-radius: 8px;

    font-size: 15px;

    font-weight: 700;

    text-decoration: none;

    transition:
        transform 0.25s ease,
        background 0.25s ease,
        border-color 0.25s ease;
}


/* Bouton principal */

.hero-btn-primary {
    color: #ffffff;

    background: var(--blue-light);

    border: 1px solid var(--blue-light);
}

.hero-btn-primary:hover {
    color: #ffffff;

    background: var(--green);

    border-color: var(--green);

    transform: translateY(-2px);
}


/* Bouton secondaire */

.hero-btn-secondary {
    color: #ffffff;

    background: transparent;

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

.hero-btn-secondary:hover {
    color: var(--dark);

    background: #ffffff;

    border-color: #ffffff;

    transform: translateY(-2px);
}


/* =========================================================
   6. ANIMATION TECHNOLOGIQUE
   ========================================================= */

.tech-visual {
    position: relative;

    width: 430px;
    height: 430px;

    display: flex;

    align-items: center;

    justify-content: center;
}


/* Cercles */

.tech-circle {
    position: absolute;

    border-radius: 50%;

    pointer-events: none;
}

.circle-one {
    width: 410px;
    height: 410px;

    border: 1px solid rgba(77, 220, 255, 0.35);

    animation: rotateTech 25s linear infinite;
}

.circle-two {
    width: 310px;
    height: 310px;

    border: 1px dashed rgba(255, 255, 255, 0.35);

    animation: rotateTechReverse 18s linear infinite;
}

.circle-three {
    width: 220px;
    height: 220px;

    border: 1px solid rgba(42, 219, 157, 0.5);

    animation: pulseTech 3s ease-in-out infinite;
}


/* Centre animation */

.tech-core {
    position: relative;

    z-index: 5;

    width: 155px;
    height: 155px;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    background: rgba(4, 60, 99, 0.72);

    border: 1px solid rgba(255, 255, 255, 0.35);

    backdrop-filter: blur(10px);

    box-shadow:
        0 0 40px rgba(0, 183, 255, 0.25),
        inset 0 0 30px rgba(255, 255, 255, 0.05);
}

.cloud-symbol {
    font-size: 48px;

    line-height: 1;

    color: var(--green-light);
}

.tech-core span {
    margin-top: 8px;

    font-size: 13px;

    font-weight: 800;

    letter-spacing: 1.5px;

    color: #ffffff;
}


/* Points réseau */

.network-dot {
    position: absolute;

    width: 13px;
    height: 13px;

    border-radius: 50%;

    background: #31d8a0;

    box-shadow:
        0 0 0 6px rgba(49, 216, 160, 0.12),
        0 0 20px rgba(49, 216, 160, 0.8);

    z-index: 4;
}

.dot-1 {
    top: 30px;
    left: 200px;
}

.dot-2 {
    right: 30px;
    top: 205px;
}

.dot-3 {
    bottom: 40px;
    left: 120px;
}

.dot-4 {
    left: 25px;
    top: 170px;
}


/* Animations */

@keyframes rotateTech {

    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }

}

@keyframes rotateTechReverse {

    from {
        transform: rotate(360deg);
    }

    to {
        transform: rotate(0deg);
    }

}

@keyframes pulseTech {

    0%,
    100% {
        transform: scale(1);
        opacity: 0.7;
    }

    50% {
        transform: scale(1.07);
        opacity: 1;
    }

}


/* =========================================================
   7. SECTIONS GÉNÉRALES
   ========================================================= */

.section {
    padding: 85px 0;
}

.bg-soft {
    background: var(--soft);
}

.section-label {
    display: inline-block;

    margin-bottom: 8px;

    font-size: 12px;

    font-weight: 800;

    letter-spacing: 1.5px;

    color: var(--green);
}

.section h2 {
    margin-top: 5px;

    margin-bottom: 18px;

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

    line-height: 1.15;

    font-weight: 800;

    color: var(--dark);
}

.section-intro {
    max-width: 760px;

    margin-bottom: 15px;

    font-size: 17px;

    line-height: 1.7;

    color: #617589;
}


/* =========================================================
   8. CARTES SERVICES
   ========================================================= */

.service-card {
    position: relative;

    height: 100%;

    padding: 28px;

    overflow: hidden;

    background: #ffffff;

    border: 1px solid var(--border);

    border-radius: 18px;

    box-shadow: 0 10px 30px rgba(10, 56, 90, 0.07);

    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease,
        border-color 0.3s ease;
}

.service-card:hover {
    transform: translateY(-7px);

    border-color: rgba(5, 105, 185, 0.25);

    box-shadow: 0 18px 40px rgba(10, 56, 90, 0.13);
}

.service-card h3 {
    margin-bottom: 12px;

    font-size: 18px;

    line-height: 1.4;

    font-weight: 800;

    color: var(--dark);
}

.service-card p {
    min-height: 50px;

    color: #66798b;

    line-height: 1.6;
}

.service-card a {
    color: var(--blue);

    text-decoration: none;

    font-weight: 700;
}

.service-card a:hover {
    color: var(--green);
}


/* Icône service */

.service-icon {
    width: 50px;
    height: 50px;

    display: flex;

    align-items: center;

    justify-content: center;

    margin-bottom: 20px;

    border-radius: 14px;

    background: #eaf5ff;

    color: var(--blue);

    font-size: 17px;

    font-weight: 900;
}


/* =========================================================
   9. CARTES APPLICATIONS
   ========================================================= */

.app-card {
    position: relative;

    height: 100%;

    display: flex;

    flex-direction: column;

    padding: 28px;

    background: #ffffff;

    border: 1px solid var(--border);

    border-radius: 18px;

    box-shadow: 0 10px 30px rgba(10, 56, 90, 0.07);

    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease,
        border-color 0.3s ease;
}

.app-card:hover {
    transform: translateY(-7px);

    border-color: rgba(23, 185, 120, 0.3);

    box-shadow: 0 18px 40px rgba(10, 56, 90, 0.13);
}

.app-card h3 {
    margin-bottom: 12px;

    font-size: 18px;

    font-weight: 800;

    color: var(--dark);
}

.app-card p {
    flex-grow: 1;

    color: #66798b;

    line-height: 1.6;
}

.app-mark {
    width: 50px;
    height: 50px;

    display: flex;

    align-items: center;

    justify-content: center;

    margin-bottom: 20px;

    border-radius: 14px;

    background: #eaf5ff;

    color: var(--blue);

    font-size: 20px;

    font-weight: 900;
}

.app-card .btn {
    align-self: flex-start;

    border-radius: 7px;

    font-weight: 700;
}


/* =========================================================
   10. BOUTONS BOOTSTRAP PERSONNALISÉS
   ========================================================= */

.btn-primary {
    background-color: var(--blue);

    border-color: var(--blue);
}

.btn-primary:hover {
    background-color: #045a9e;

    border-color: #045a9e;
}

.btn-outline-primary {
    color: var(--blue);

    border-color: var(--blue);
}

.btn-outline-primary:hover {
    color: #ffffff;

    background: var(--blue);

    border-color: var(--blue);
}


/* =========================================================
   11. CTA
   ========================================================= */

.cta {
    position: relative;

    overflow: hidden;

    color: #ffffff;

    background:
        linear-gradient(
            120deg,
            #058b7b,
            #10b970
        );
}

.cta::before {
    content: "";

    position: absolute;

    width: 300px;
    height: 300px;

    right: -100px;
    top: -150px;

    border-radius: 50%;

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

.cta .container {
    position: relative;

    z-index: 2;
}

.cta h2 {
    margin-bottom: 12px;

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

    font-weight: 800;
}

.cta p {
    margin-bottom: 25px;

    font-size: 18px;

    color: rgba(255, 255, 255, 0.9);
}

.cta .btn-light {
    padding: 12px 25px;

    border-radius: 8px;

    color: var(--dark);

    font-weight: 700;
}


/* =========================================================
   12. FOOTER
   ========================================================= */

.footer {
    padding-top: 55px !important;

    padding-bottom: 35px !important;

    color: #d8e6f2;

    background: #062f52;
}

.footer h4,
.footer h6 {
    color: #ffffff;

    font-weight: 800;
}

.footer a {
    display: inline-block;

    margin-bottom: 7px;

    color: #d8e6f2;

    text-decoration: none;
}

.footer a:hover {
    color: var(--green-light);
}

.footer hr {
    margin: 30px 0 20px;

    border-color: rgba(255, 255, 255, 0.15);
}


/* =========================================================
   13. TABLETTE
   ========================================================= */

@media (max-width: 991px) {

    /* Logo */

    .vmconnect-logo {
        width: 190px;
        height: 60px;
    }


    /* Navigation */

    .navbar {
        min-height: 72px;
    }

    .navbar-collapse {
        padding: 15px 0 20px;
    }

    .nav-link {
        padding: 10px 5px !important;
    }

    .nav-link::after {
        display: none;
    }


    /* Hero */

    .hero {
        min-height: auto;

        padding: 90px 0;

        text-align: center;
    }

    .hero-row {
        min-height: auto;
    }

    .hero-label {
        font-size: 11px;
    }

    .hero h1 {
        max-width: 750px;

        margin-left: auto;
        margin-right: auto;

        font-size: 50px;
    }

    .hero p {
        margin-left: auto;
        margin-right: auto;
    }

    .hero-buttons {
        justify-content: center;
    }

}


/* =========================================================
   14. MOBILE
   ========================================================= */

@media (max-width: 576px) {

    /* Logo */

    .vmconnect-logo {
        width: 160px;
        height: 52px;
    }


    /* Hero */

    .hero {
        padding: 70px 0;
    }

    .hero-label {
        margin-bottom: 17px;

        line-height: 1.7;
    }

    .hero h1 {
        font-size: 38px;

        line-height: 1.1;

        letter-spacing: -1px;
    }

    .hero p {
        font-size: 16px;

        line-height: 1.65;
    }

    .hero-buttons {
        flex-direction: column;
    }

    .hero-buttons .btn {
        width: 100%;
    }


    /* Sections */

    .section {
        padding: 60px 0;
    }

    .section h2 {
        font-size: 30px;
    }


    /* Cartes */

    .service-card,
    .app-card {
        padding: 23px;
    }


    /* CTA */

    .cta h2 {
        font-size: 30px;
    }

}

/* =========================================================
   PAGE À PROPOS - VM CONNECT
   ========================================================= */


/* -------------------------
   BANNIÈRE
------------------------- */

.about-hero {
    position: relative;

    padding: 110px 0;

    overflow: hidden;

    color: #ffffff;

    background:
        radial-gradient(
            circle at 85% 40%,
            rgba(0, 184, 255, 0.22),
            transparent 30%
        ),
        linear-gradient(
            120deg,
            #031f3a 0%,
            #043b67 55%,
            #056fa4 100%
        );
}

.about-hero::after {
    content: "";

    position: absolute;

    width: 450px;
    height: 450px;

    right: -120px;
    top: -180px;

    border: 1px solid rgba(255, 255, 255, 0.12);

    border-radius: 50%;
}

.about-label {
    display: inline-block;

    margin-bottom: 20px;

    color: var(--green-light);

    font-size: 12px;

    font-weight: 800;

    letter-spacing: 1.8px;
}

.about-hero h1 {
    max-width: 850px;

    margin-bottom: 25px;

    color: #ffffff;

    font-size: clamp(45px, 6vw, 72px);

    line-height: 1.05;

    font-weight: 800;

    letter-spacing: -2px;
}

.about-hero p {
    max-width: 760px;

    margin: 0;

    color: rgba(255, 255, 255, 0.83);

    font-size: 19px;

    line-height: 1.7;
}


/* -------------------------
   QUI SOMMES-NOUS
------------------------- */

.about-company p {
    max-width: 760px;

    color: #607488;

    font-size: 17px;

    line-height: 1.8;
}


/* Bloc technologie */

.about-tech-box {
    position: relative;

    padding: 55px 40px;

    overflow: hidden;

    color: #ffffff;

    background:
        linear-gradient(
            145deg,
            #052f55,
            #0878aa
        );

    border-radius: 25px;

    box-shadow:
        0 25px 60px rgba(5, 47, 85, 0.2);
}

.about-tech-box::after {
    content: "";

    position: absolute;

    width: 220px;
    height: 220px;

    right: -100px;
    bottom: -100px;

    border: 1px solid rgba(255, 255, 255, 0.17);

    border-radius: 50%;
}

.about-tech-icon {
    width: 65px;
    height: 65px;

    display: flex;

    align-items: center;

    justify-content: center;

    margin-bottom: 30px;

    color: #ffffff;

    background: var(--green);

    border-radius: 18px;

    font-size: 24px;
}

.about-tech-box h3 {
    margin-bottom: 10px;

    color: #ffffff;

    font-size: 30px;

    font-weight: 800;
}

.about-tech-box p {
    margin-bottom: 25px;

    color: rgba(255, 255, 255, 0.8);

    font-size: 17px;
}

.about-tech-line {
    width: 55px;
    height: 3px;

    margin-bottom: 20px;

    background: var(--green-light);

    border-radius: 20px;
}

.about-tech-box span {
    position: relative;

    z-index: 2;

    color: rgba(255, 255, 255, 0.7);

    font-size: 12px;

    font-weight: 700;

    letter-spacing: 1px;
}


/* -------------------------
   TITRES CENTRÉS
------------------------- */

.about-section-heading {
    max-width: 820px;

    margin: 0 auto 20px;
}

.about-section-heading p {
    max-width: 720px;

    margin: 0 auto;

    color: #687b8d;

    font-size: 17px;

    line-height: 1.7;
}


/* -------------------------
   MISSION / VISION
------------------------- */

.about-info-card {
    position: relative;

    padding: 40px;

    overflow: hidden;

    background: #ffffff;

    border: 1px solid var(--border);

    border-radius: 22px;

    box-shadow:
        0 12px 35px rgba(10, 56, 90, 0.07);

    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease;
}

.about-info-card:hover {
    transform: translateY(-6px);

    box-shadow:
        0 20px 45px rgba(10, 56, 90, 0.12);
}

.about-info-number {
    position: absolute;

    right: 25px;
    top: 15px;

    color: rgba(5, 105, 185, 0.07);

    font-size: 75px;

    line-height: 1;

    font-weight: 900;
}

.about-card-label {
    display: inline-block;

    margin-bottom: 15px;

    color: var(--green);

    font-size: 11px;

    font-weight: 800;

    letter-spacing: 1.5px;
}

.about-info-card h3 {
    position: relative;

    max-width: 440px;

    margin-bottom: 18px;

    color: var(--dark);

    font-size: 25px;

    line-height: 1.3;

    font-weight: 800;
}

.about-info-card p {
    position: relative;

    margin: 0;

    color: #687b8d;

    line-height: 1.75;
}


/* -------------------------
   VALEURS
------------------------- */

.value-card {
    padding: 30px;

    background: #ffffff;

    border: 1px solid var(--border);

    border-radius: 18px;

    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease;
}

.value-card:hover {
    transform: translateY(-6px);

    box-shadow:
        0 16px 35px rgba(10, 56, 90, 0.1);
}

.value-icon {
    width: 48px;
    height: 48px;

    display: flex;

    align-items: center;

    justify-content: center;

    margin-bottom: 22px;

    color: var(--blue);

    background: #eaf5ff;

    border-radius: 13px;

    font-size: 13px;

    font-weight: 900;
}

.value-card h3 {
    margin-bottom: 12px;

    color: var(--dark);

    font-size: 19px;

    font-weight: 800;
}

.value-card p {
    margin: 0;

    color: #687b8d;

    line-height: 1.7;
}


/* -------------------------
   SIGNATURE
------------------------- */

.about-signature {
    position: relative;

    padding: 90px 0;

    overflow: hidden;

    color: #ffffff;

    background: #062f52;
}

.about-signature::before,
.about-signature::after {
    content: "";

    position: absolute;

    border-radius: 50%;

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

.about-signature::before {
    width: 350px;
    height: 350px;

    left: -180px;
    top: -180px;
}

.about-signature::after {
    width: 500px;
    height: 500px;

    right: -250px;
    bottom: -300px;
}

.about-signature .container {
    position: relative;

    z-index: 2;
}

.about-signature span {
    display: block;

    margin-bottom: 18px;

    color: var(--green-light);

    font-size: 11px;

    font-weight: 800;

    letter-spacing: 1.7px;
}

.about-signature h2 {
    width: 100%;
    max-width: none;
    margin: 0 auto 20px;

    color: #ffffff;

    font-size: clamp(24px, 3.2vw, 44px);

    line-height: 1.15;

    font-weight: 800;

    white-space: nowrap !important;

    text-align: center;

    letter-spacing: -1px;
}

.about-signature p {
    margin: 0;

    color: rgba(255, 255, 255, 0.72);

    font-size: 17px;
}


/* -------------------------
   RESPONSIVE
------------------------- */

@media (max-width: 991px) {

    .about-hero {
        padding: 85px 0;

        text-align: center;
    }

    .about-hero p {
        margin-left: auto;
        margin-right: auto;
    }

    .about-company {
        text-align: center;
    }

    .about-company p {
        margin-left: auto;
        margin-right: auto;
    }

    .about-tech-box {
        max-width: 600px;

        margin: 0 auto;

        text-align: left;
    }

}


@media (max-width: 576px) {

    .about-hero {
        padding: 70px 0;
    }

    .about-hero h1 {
        font-size: 38px;

        letter-spacing: -1px;
    }

    .about-hero p {
        font-size: 16px;
    }

    .about-info-card,
    .value-card {
        padding: 25px;
    }

    .about-tech-box {
        padding: 40px 28px;
    }

    .about-signature {
        padding: 70px 0;
    }

    .about-signature h2 {
        font-size: clamp(18px, 5vw, 24px);
        white-space: nowrap;
        letter-spacing: -0.5px;
    }

}

/* =========================================================
   ALIGNEMENT DES TEXTES - VM CONNECT
   ========================================================= */

/* Paragraphes longs à justifier */
.text-justify,
.about-company p,
.about-info-card p,
.value-card p {
    text-align: justify !important;
    text-justify: inter-word;
    hyphens: auto;
}

/* Texte principal de la bannière À propos */
.about-hero p.text-justify {
    text-align: justify !important;
    text-justify: inter-word;
    hyphens: auto;
}

/* Ces zones restent volontairement centrées */
.about-section-heading p,
.about-signature p,
.cta p {
    text-align: center;
}

@media (max-width: 991px) {
    .about-company p,
    .about-company .text-justify,
    .about-info-card p,
    .value-card p,
    .about-hero p.text-justify {
        text-align: justify !important;
        text-justify: inter-word;
        hyphens: auto;
    }
}

@media (max-width: 576px) {
    .text-justify,
    .about-company p,
    .about-info-card p,
    .value-card p,
    .about-hero p.text-justify {
        text-align: justify !important;
        text-justify: inter-word;
        hyphens: auto;
    }
}

/* =========================================================
   PAGE SERVICES - VM CONNECT
   ========================================================= */

/* HERO */
.services-hero {
    position: relative;
    overflow: hidden;
    padding: 105px 0 95px;
    background:
        radial-gradient(circle at 85% 30%, rgba(23, 185, 120, 0.15), transparent 30%),
        linear-gradient(135deg, #061b35 0%, #0a2d55 58%, #0d3c69 100%);
    color: #ffffff;
}

.services-hero::before {
    content: "";
    position: absolute;
    width: 420px;
    height: 420px;
    right: -140px;
    top: -170px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 50%;
}

.services-hero::after {
    content: "";
    position: absolute;
    width: 260px;
    height: 260px;
    right: 80px;
    bottom: -170px;
    border: 1px solid rgba(23, 185, 120, 0.20);
    border-radius: 50%;
}

.services-hero .container {
    position: relative;
    z-index: 2;
}

.services-label {
    display: inline-block;
    margin-bottom: 18px;
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.16em;
    color: #17b978;
}

.services-hero h1 {
    max-width: 850px;
    margin-bottom: 24px;
    font-size: clamp(2.4rem, 5vw, 4.4rem);
    line-height: 1.05;
    font-weight: 800;
    letter-spacing: -0.04em;
    color: #ffffff;
}

.services-hero p {
    max-width: 780px;
    margin: 0;
    font-size: 1.08rem;
    line-height: 1.9;
    color: rgba(255, 255, 255, 0.82);
}


/* INTRODUCTION */
.services-intro {
    padding-bottom: 55px;
}

.services-heading {
    max-width: 780px;
    margin: 0 auto;
}

.services-heading h2 {
    margin-bottom: 16px;
}

.services-heading p {
    max-width: 680px;
    margin: 0 auto;
    line-height: 1.8;
}


/* SECTIONS SERVICES */
.service-full-section {
    padding: 32px 0;
    background: #ffffff;
}

.service-section-soft {
    background: #f7f9fc;
}

.service-full-card {
    position: relative;
    overflow: hidden;
    max-width: 1120px;
    margin: 0 auto;
    padding: 48px 52px;
    background: #ffffff;
    border: 1px solid rgba(6, 35, 67, 0.10);
    border-radius: 24px;
    box-shadow: 0 18px 55px rgba(6, 35, 67, 0.07);
    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease,
        border-color 0.25s ease;
}

.service-full-card::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 5px;
    height: 100%;
    background: linear-gradient(180deg, #0b4f86, #17b978);
}

.service-full-card:hover {
    transform: translateY(-3px);
    border-color: rgba(23, 185, 120, 0.22);
    box-shadow: 0 24px 65px rgba(6, 35, 67, 0.11);
}


/* EN-TÊTE DE CHAQUE SERVICE */
.service-full-header {
    display: flex;
    align-items: flex-start;
    gap: 24px;
    padding-bottom: 25px;
    margin-bottom: 30px;
    border-bottom: 1px solid rgba(6, 35, 67, 0.10);
}

.service-full-number {
    display: flex;
    flex: 0 0 68px;
    align-items: center;
    justify-content: center;
    width: 68px;
    height: 68px;
    border-radius: 18px;
    background: linear-gradient(135deg, #082c52, #0d5d94);
    color: #ffffff;
    font-size: 1.15rem;
    font-weight: 800;
    letter-spacing: 0.05em;
    box-shadow: 0 12px 28px rgba(6, 35, 67, 0.15);
}

.service-full-label {
    display: block;
    margin-bottom: 8px;
    font-size: 0.73rem;
    font-weight: 800;
    letter-spacing: 0.15em;
    color: #17a86e;
}

.service-full-header h2 {
    margin: 0;
    color: #082c52;
    font-size: clamp(1.55rem, 3vw, 2.15rem);
    line-height: 1.2;
    font-weight: 800;
}


/* CONTENU */
.service-full-content {
    max-width: 1000px;
}

.service-full-content p {
    margin: 0 0 20px;
    color: #526171;
    font-size: 1rem;
    line-height: 1.9;
}

.service-full-content p:last-child {
    margin-bottom: 0;
}

.service-full-content .text-justify {
    text-align: justify !important;
    text-justify: inter-word;
    hyphens: auto;
}


/* SOUS-SECTIONS - STARLINK */
.service-subsection {
    position: relative;
    margin-bottom: 30px;
    padding: 28px 30px;
    background: #f8fafc;
    border: 1px solid rgba(6, 35, 67, 0.08);
    border-radius: 18px;
}

.service-subsection:last-child {
    margin-bottom: 0;
}

.service-subsection h3 {
    position: relative;
    margin: 0 0 16px;
    padding-left: 20px;
    color: #082c52;
    font-size: 1.2rem;
    font-weight: 800;
    line-height: 1.35;
}

.service-subsection h3::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.35em;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #17b978;
}

.service-subsection p {
    margin-bottom: 0;
}


/* SERVICE STARLINK */
.starlink-service {
    padding-top: 42px;
    padding-bottom: 80px;
    background:
        radial-gradient(circle at 90% 15%, rgba(23, 185, 120, 0.08), transparent 24%),
        #f7f9fc;
}

.service-starlink-card {
    border-color: rgba(23, 185, 120, 0.18);
}

.service-starlink-card::before {
    width: 6px;
    background: linear-gradient(180deg, #17b978, #0b4f86);
}

.service-starlink-card .service-full-number {
    background: linear-gradient(135deg, #0c7b57, #17b978);
}


/* ESPACEMENT AVANT CTA */
.starlink-service + .cta {
    margin-top: 0;
}


/* =========================================================
   PAGE SERVICES - RESPONSIVE TABLETTE
   ========================================================= */
@media (max-width: 991px) {

    .services-hero {
        padding: 85px 0 75px;
    }

    .services-hero h1 {
        font-size: clamp(2.2rem, 7vw, 3.5rem);
    }

    .services-hero p {
        max-width: 100%;
    }

    .service-full-card {
        padding: 38px 36px;
    }

    .service-full-content,
    .service-full-content .text-justify {
        text-align: justify !important;
    }
}


/* =========================================================
   PAGE SERVICES - RESPONSIVE MOBILE
   ========================================================= */
@media (max-width: 576px) {

    .services-hero {
        padding: 65px 0 58px;
    }

    .services-hero h1 {
        margin-bottom: 20px;
        font-size: 2.15rem;
        line-height: 1.08;
    }

    .services-hero p {
        font-size: 0.97rem;
        line-height: 1.75;
    }

    .services-intro {
        padding-bottom: 35px;
    }

    .service-full-section {
        padding: 18px 0;
    }

    .service-full-card {
        padding: 28px 22px;
        border-radius: 18px;
    }

    .service-full-header {
        gap: 15px;
        padding-bottom: 20px;
        margin-bottom: 24px;
    }

    .service-full-number {
        flex-basis: 54px;
        width: 54px;
        height: 54px;
        border-radius: 14px;
        font-size: 0.95rem;
    }

    .service-full-label {
        font-size: 0.65rem;
        letter-spacing: 0.11em;
    }

    .service-full-header h2 {
        font-size: 1.38rem;
    }

    .service-full-content p {
        font-size: 0.95rem;
        line-height: 1.78;
    }

    .service-subsection {
        padding: 22px 20px;
        border-radius: 15px;
    }

    .service-subsection h3 {
        font-size: 1.08rem;
    }

    .starlink-service {
        padding-bottom: 55px;
    }
}

/* =========================================================
   CARTES SERVICES CLIQUABLES + ANCRES
   ========================================================= */
html {
    scroll-behavior: smooth;
}

.service-full-section {
    scroll-margin-top: 110px;
}

.service-card-link {
    display: block;
    height: 100%;
    color: inherit;
    text-decoration: none;
}

.service-card-link:hover,
.service-card-link:focus,
.service-card-link:active {
    color: inherit;
    text-decoration: none;
}

.service-card-link .service-card {
    cursor: pointer;
}

.service-card-link:hover .service-card,
.service-card-link:focus-visible .service-card {
    transform: translateY(-5px);
}

.service-card-more {
    display: inline-block;
    margin-top: 14px;
    font-weight: 700;
    color: #0b4f86;
}

.service-card-link:focus-visible {
    outline: 3px solid rgba(23, 185, 120, 0.45);
    outline-offset: 4px;
    border-radius: 18px;
}

@media (max-width: 576px) {
    .service-full-section {
        scroll-margin-top: 90px;
    }
}


/* =========================================================
   ANIMATION RÉSEAU - HERO ACCUEIL
   ========================================================= */
.network-animation {
    position: relative;
    width: min(430px, 90vw);
    aspect-ratio: 1 / 1;
    margin: 0 auto;
    display: grid;
    place-items: center;
    isolation: isolate;
}

.network-glow {
    position: absolute;
    width: 68%;
    height: 68%;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(23, 185, 120, 0.20) 0%, rgba(30, 116, 190, 0.10) 42%, transparent 72%);
    animation: networkPulse 3.4s ease-in-out infinite;
}

.network-core {
    position: relative;
    z-index: 5;
    width: 112px;
    height: 112px;
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    background: linear-gradient(145deg, #0b4f86, #082c52);
    border: 1px solid rgba(255,255,255,.22);
    box-shadow:
        0 0 0 12px rgba(255,255,255,.035),
        0 0 45px rgba(23,185,120,.22);
}

.core-icon {
    color: #17b978;
    font-size: 1.15rem;
    line-height: 1;
    animation: coreBlink 1.8s ease-in-out infinite;
}

.network-core small {
    color: #fff;
    font-size: .70rem;
    font-weight: 800;
    letter-spacing: .18em;
}

.network-orbit {
    position: absolute;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,.18);
}

.orbit-one {
    width: 230px;
    height: 230px;
    animation: networkRotate 12s linear infinite;
}

.orbit-two {
    width: 340px;
    height: 340px;
    border-style: dashed;
    border-color: rgba(23,185,120,.30);
    animation: networkRotateReverse 20s linear infinite;
}

.orbit-node {
    position: absolute;
    width: 13px;
    height: 13px;
    border-radius: 50%;
    background: #17b978;
    border: 3px solid #fff;
    box-shadow: 0 0 18px rgba(23,185,120,.75);
}

.node-a { top: -7px; left: 50%; }
.node-b { bottom: 20px; right: 18px; }
.node-c { top: 48%; right: -7px; }
.node-d { bottom: -7px; left: 48%; }

.network-lines {
    position: absolute;
    inset: 0;
    z-index: 1;
}

.network-line {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 145px;
    height: 1px;
    transform-origin: left center;
    background: linear-gradient(90deg, rgba(23,185,120,.9), rgba(255,255,255,.08));
    overflow: hidden;
}

.network-line::after {
    content: "";
    position: absolute;
    top: -2px;
    left: -20%;
    width: 34px;
    height: 5px;
    border-radius: 10px;
    background: rgba(255,255,255,.92);
    box-shadow: 0 0 12px rgba(23,185,120,.9);
    animation: dataFlow 2.2s linear infinite;
}

.line-one   { transform: rotate(25deg); }
.line-two   { transform: rotate(115deg); }
.line-three { transform: rotate(205deg); }
.line-four  { transform: rotate(295deg); }

.line-two::after { animation-delay: .5s; }
.line-three::after { animation-delay: 1s; }
.line-four::after { animation-delay: 1.5s; }

.network-node {
    position: absolute;
    z-index: 3;
    width: 22px;
    height: 22px;
    border-radius: 7px;
    background: #0d5d94;
    border: 2px solid rgba(255,255,255,.75);
    box-shadow: 0 0 22px rgba(13,93,148,.45);
    animation: nodeFloat 3s ease-in-out infinite;
}

.network-node-1 { top: 18%; right: 14%; }
.network-node-2 { right: 9%; bottom: 25%; animation-delay: .7s; }
.network-node-3 { bottom: 14%; left: 18%; animation-delay: 1.2s; }
.network-node-4 { top: 26%; left: 9%; animation-delay: 1.7s; }

@keyframes networkRotate {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

@keyframes networkRotateReverse {
    from { transform: rotate(360deg); }
    to { transform: rotate(0deg); }
}

@keyframes networkPulse {
    0%, 100% { transform: scale(.92); opacity: .55; }
    50% { transform: scale(1.08); opacity: 1; }
}

@keyframes coreBlink {
    0%, 100% { opacity: .55; transform: scale(.8); }
    50% { opacity: 1; transform: scale(1.15); }
}

@keyframes dataFlow {
    from { left: -25%; }
    to { left: 110%; }
}

@keyframes nodeFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-8px); }
}

@media (max-width: 991px) {
    .network-animation {
        width: min(360px, 82vw);
        margin-top: 45px;
    }

    .orbit-one {
        width: 200px;
        height: 200px;
    }

    .orbit-two {
        width: 300px;
        height: 300px;
    }

    .network-line {
        width: 125px;
    }
}

@media (max-width: 576px) {
    .network-animation {
        width: 290px;
    }

    .network-core {
        width: 92px;
        height: 92px;
    }

    .orbit-one {
        width: 175px;
        height: 175px;
    }

    .orbit-two {
        width: 255px;
        height: 255px;
    }

    .network-line {
        width: 105px;
    }

    .network-node {
        width: 18px;
        height: 18px;
    }
}

/* Accessibilité : désactive les mouvements si le système le demande */
@media (prefers-reduced-motion: reduce) {
    .network-animation *,
    .network-animation *::before,
    .network-animation *::after {
        animation: none !important;
    }
}

/* =========================================================
   ICÔNE VM CONNECT DANS L'ANIMATION
   ========================================================= */

.network-core {
    overflow: hidden;
    padding: 16px;
}

.network-core-logo {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;

    filter: drop-shadow(
        0 0 12px rgba(23, 185, 120, 0.35)
    );

    animation: vmConnectLogoPulse 2.6s ease-in-out infinite;
}

@keyframes vmConnectLogoPulse {
    0%,
    100% {
        transform: scale(0.92);
        opacity: 0.90;
    }

    50% {
        transform: scale(1);
        opacity: 1;
    }
}

/* =========================================================
   IMAGES - SOLUTIONS TECHNOLOGIQUES
   ========================================================= */

.solution-image-box {
    position: relative;
    width: 100%;
    min-height: 320px;
    padding: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;

    background: #ffffff;
    border: 1px solid rgba(11, 79, 134, 0.10);
    border-radius: 24px;

    box-shadow:
        0 18px 45px rgba(0, 0, 0, 0.08);
}

.solution-logo {
    display: block;
    width: 100%;
    max-width: 380px;
    max-height: 260px;

    object-fit: contain;
    object-position: center;

    transition:
        transform 0.4s ease,
        filter 0.4s ease;
}

.solution-image-box:hover .solution-logo {
    transform: scale(1.04);
}


/* NAVIX EST EN JPG */
#navix .solution-image-box {
    padding: 20px;
}

#navix .solution-logo {
    max-width: 100%;
    max-height: 300px;
    border-radius: 16px;
}


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

@media (max-width: 991px) {

    .solution-image-box {
        min-height: 280px;
        padding: 30px;
    }

    .solution-logo {
        max-width: 340px;
        max-height: 230px;
    }

}


@media (max-width: 576px) {

    .solution-image-box {
        min-height: 220px;
        padding: 20px;
        border-radius: 18px;
    }

    .solution-logo {
        max-width: 280px;
        max-height: 190px;
    }

    #navix .solution-image-box {
        padding: 12px;
    }

}

/* =========================================================
   PAGE RÉALISATIONS
   ========================================================= */

.realisations-hero {
    position: relative;
    padding: 130px 0 100px;
    overflow: hidden;
    background:
        radial-gradient(circle at 85% 25%, rgba(23, 185, 120, .15), transparent 30%),
        linear-gradient(135deg, #082c52 0%, #0b4f86 100%);
    color: #fff;
}

.realisations-hero::after {
    content: "";
    position: absolute;
    width: 380px;
    height: 380px;
    right: -100px;
    bottom: -180px;
    border: 1px solid rgba(255, 255, 255, .10);
    border-radius: 50%;
}

.realisations-label {
    display: inline-block;
    margin-bottom: 18px;
    color: #17b978;
    font-size: .78rem;
    font-weight: 800;
    letter-spacing: .16em;
}

.realisations-hero h1 {
    max-width: 800px;
    margin-bottom: 22px;
    font-size: clamp(2.3rem, 5vw, 4.5rem);
    font-weight: 800;
    line-height: 1.05;
}

.realisations-hero p {
    max-width: 720px;
    margin: 0;
    color: rgba(255, 255, 255, .82);
    font-size: 1.08rem;
    line-height: 1.8;
}

.realisations-intro {
    padding: 90px 0 50px;
}

.realisations-heading {
    width: 100%;
    max-width: 1200px !important;
    margin-left: auto;
    margin-right: auto;
}

.realisations-heading h2 {
    margin: 10px 0 15px;
    color: #082c52;
    font-weight: 800;
}

.realisations-heading p {
    color: #64748b;
    line-height: 1.8;
}


/* =========================================================
   GRILLE
   ========================================================= */

.realisations-section {
    padding: 30px 0 100px;
}

.realisation-card {
    overflow: hidden;
    background: #fff;
    border: 1px solid rgba(11, 79, 134, .09);
    border-radius: 22px;
    box-shadow: 0 15px 40px rgba(8, 44, 82, .08);
    transition:
        transform .35s ease,
        box-shadow .35s ease;
}

.realisation-card:hover {
    transform: translateY(-7px);
    box-shadow: 0 24px 55px rgba(8, 44, 82, .14);
}

.realisation-media {
    position: relative;
    height: 250px;
    overflow: hidden;
    background: #082c52;
}

.realisation-image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .5s ease;
}

.realisation-card:hover .realisation-image {
    transform: scale(1.05);
}


/* =========================================================
   VISUEL LORSQU'IL N'Y A PAS ENCORE DE PHOTO
   ========================================================= */

.realisation-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 18px;
    background:
        radial-gradient(circle at center, rgba(23,185,120,.18), transparent 42%),
        linear-gradient(135deg, #082c52, #0b4f86);
}

.realisation-placeholder span {
    color: rgba(255,255,255,.55);
    font-size: .70rem;
    font-weight: 800;
    letter-spacing: .20em;
}

.realisation-tech-circle {
    width: 95px;
    height: 95px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(255,255,255,.20);
    border-radius: 50%;
    box-shadow:
        0 0 0 12px rgba(255,255,255,.025),
        0 0 40px rgba(23,185,120,.15);
}

.realisation-tech-circle i {
    color: #17b978;
    font-size: 2.4rem;
}


/* =========================================================
   CONTENU CARTE
   ========================================================= */

.realisation-content {
    padding: 28px;
}

.realisation-category {
    display: inline-block;
    margin-bottom: 12px;
    color: #17a96d;
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.realisation-content h3 {
    margin-bottom: 14px;
    color: #082c52;
    font-size: 1.25rem;
    font-weight: 800;
}

.realisation-content p {
    margin: 0;
    color: #64748b;
    line-height: 1.75;
    text-align: left;
}


/* =========================================================
   MÉTHODE
   ========================================================= */

.realisation-method {
    padding: 95px 0;
    background: #f6f9fc;
}

.method-card {
    position: relative;
    height: 100%;
    padding: 30px;
    background: #fff;
    border: 1px solid rgba(11,79,134,.08);
    border-radius: 20px;
    box-shadow: 0 12px 30px rgba(8,44,82,.06);
}

.method-number {
    position: absolute;
    top: 22px;
    right: 24px;
    color: rgba(11,79,134,.12);
    font-size: 2rem;
    font-weight: 900;
}

.method-icon {
    width: 54px;
    height: 54px;
    margin-bottom: 22px;
    display: grid;
    place-items: center;
    color: #fff;
    background: linear-gradient(135deg, #0b4f86, #17b978);
    border-radius: 15px;
}

.method-icon i {
    font-size: 1.35rem;
}

.method-card h3 {
    color: #082c52;
    font-size: 1.15rem;
    font-weight: 800;
}

.method-card p {
    margin: 0;
    color: #64748b;
    line-height: 1.7;
}


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

@media (max-width: 991px) {

    .realisations-hero {
        padding: 105px 0 80px;
    }

    .realisations-intro {
        padding-top: 70px;
    }

}

@media (max-width: 576px) {

    .realisations-hero {
        padding: 85px 0 65px;
    }

    .realisations-hero h1 {
        font-size: 2.2rem;
    }

    .realisation-media {
        height: 220px;
    }

    .realisation-content {
        padding: 23px;
    }

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

    .realisation-method {
        padding: 70px 0;
    }

}

/* =========================================================
   PAGE SOLUTIONS TECHNOLOGIQUES
   VM CONNECT
   ========================================================= */


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

.solutions-page-hero {
    position: relative;
    padding: 130px 0 100px;
    overflow: hidden;

    background:
        radial-gradient(
            circle at 85% 25%,
            rgba(23, 185, 120, 0.15),
            transparent 30%
        ),
        linear-gradient(
            135deg,
            #082c52 0%,
            #0b4f86 100%
        );

    color: #ffffff;
}


.solutions-page-hero::after {
    content: "";

    position: absolute;

    width: 380px;
    height: 380px;

    right: -100px;
    bottom: -180px;

    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 50%;
}


.solutions-page-label {
    display: inline-block;

    margin-bottom: 18px;

    color: #17b978;

    font-size: 0.78rem;
    font-weight: 800;

    letter-spacing: 0.16em;
}


.solutions-page-hero h1 {
    max-width: 850px;

    margin-bottom: 22px;

    font-size: clamp(2.3rem, 5vw, 4.5rem);

    font-weight: 800;
    line-height: 1.05;
}


.solutions-page-hero p {
    max-width: 720px;

    margin: 0;

    color: rgba(255, 255, 255, 0.82);

    font-size: 1.08rem;
    line-height: 1.8;
}


/* =========================================================
   INTRODUCTION
   ========================================================= */

.solutions-page-intro {
    padding: 90px 0 35px;

    background: #ffffff;
}


.solutions-page-heading {
    max-width: 760px;

    margin: 0 auto;
}


.solutions-page-heading h2 {
    margin: 10px 0 15px;

    color: #082c52;

    font-size: 2.2rem;
    font-weight: 800;
}


.solutions-page-heading p {
    margin: 0;

    color: #64748b;

    font-size: 1rem;
    line-height: 1.8;
}


/* =========================================================
   SECTION DES SOLUTIONS
   ========================================================= */

.solutions-grid-section {
    padding: 40px 0 110px;

    background: #ffffff;
}


/* =========================================================
   CARTE
   ========================================================= */

.solution-tech-card {
    position: relative;

    overflow: hidden;

    background: #ffffff;

    border: 1px solid rgba(11, 79, 134, 0.09);
    border-radius: 22px;

    box-shadow:
        0 15px 40px rgba(8, 44, 82, 0.08);

    transition:
        transform 0.35s ease,
        box-shadow 0.35s ease;
}


.solution-tech-card:hover {
    transform: translateY(-7px);

    box-shadow:
        0 24px 55px rgba(8, 44, 82, 0.14);
}


/* =========================================================
   IMAGE
   ========================================================= */

.solution-tech-media {
    position: relative;

    width: 100%;
    height: 310px;

    overflow: hidden;

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

    background: #ffffff;

    border-bottom:
        1px solid rgba(11, 79, 134, 0.07);
}


.solution-tech-image {
    display: block;

    width: 100%;
    height: 100%;

    padding: 28px;

    object-fit: contain;
    object-position: center;

    transition:
        transform 0.5s ease;
}


.solution-tech-card:hover .solution-tech-image {
    transform: scale(1.04);
}


/* =========================================================
   NAVIX - IMAGE JPG
   ========================================================= */

#navix .solution-tech-media {
    height: 340px;
    padding: 20px;
    background: #ffffff;
}

#navix .solution-tech-image {
    width: 100%;
    height: 100%;
    padding: 0;
    object-fit: contain;
    object-position: center;
    border-radius: 14px;
}


/* =========================================================
   IMAGE DE SECOURS
   ========================================================= */

.solution-tech-placeholder {
    width: 100%;
    height: 100%;

    display: flex;
    flex-direction: column;

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

    gap: 18px;

    background:
        radial-gradient(
            circle at center,
            rgba(23, 185, 120, 0.18),
            transparent 42%
        ),
        linear-gradient(
            135deg,
            #082c52,
            #0b4f86
        );
}


.solution-tech-placeholder-icon {
    width: 95px;
    height: 95px;

    display: grid;
    place-items: center;

    border:
        1px solid rgba(255, 255, 255, 0.20);

    border-radius: 50%;

    box-shadow:
        0 0 0 12px rgba(255, 255, 255, 0.025),
        0 0 40px rgba(23, 185, 120, 0.15);
}


.solution-tech-placeholder-icon i {
    color: #17b978;

    font-size: 2.4rem;
}


.solution-tech-placeholder span {
    color: rgba(255, 255, 255, 0.55);

    font-size: 0.70rem;
    font-weight: 800;

    letter-spacing: 0.20em;
}


/* =========================================================
   CONTENU
   ========================================================= */

.solution-tech-content {
    position: relative;

    padding: 30px;
}


.solution-tech-top {
    display: flex;

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

    margin-bottom: 13px;
}


.solution-tech-label {
    color: #17a96d;

    font-size: 0.72rem;
    font-weight: 800;

    letter-spacing: 0.09em;

    text-transform: uppercase;
}


.solution-tech-number {
    color: rgba(11, 79, 134, 0.10);

    font-size: 2rem;
    font-weight: 900;

    line-height: 1;
}


.solution-tech-content h2 {
    margin: 0 0 8px;

    color: #082c52;

    font-size: 1.55rem;
    font-weight: 800;
}


.solution-tech-content h3 {
    margin: 0 0 18px;

    color: #0b4f86;

    font-size: 1rem;
    font-weight: 700;

    line-height: 1.5;
}


.solution-tech-content p {
    margin: 0 0 22px;

    color: #64748b;

    line-height: 1.8;

    text-align: justify;
}


/* =========================================================
   LIEN
   ========================================================= */

.solution-tech-link {
    display: inline-flex;

    align-items: center;

    gap: 8px;

    color: #0b4f86;

    font-weight: 800;

    text-decoration: none;

    transition:
        color 0.25s ease,
        gap 0.25s ease;
}


.solution-tech-link:hover {
    gap: 12px;

    color: #17a96d;

    text-decoration: none;
}


/* =========================================================
   BANDEAU TECHNOLOGIE
   ========================================================= */

.solutions-page-bottom {
    padding: 0 0 100px;

    background: #ffffff;
}


.solutions-page-bottom-box {
    padding: 55px;

    overflow: hidden;

    background:
        radial-gradient(
            circle at 85% 20%,
            rgba(23, 185, 120, 0.22),
            transparent 30%
        ),
        linear-gradient(
            135deg,
            #082c52,
            #0b4f86
        );

    border-radius: 26px;

    color: #ffffff;

    box-shadow:
        0 25px 60px rgba(8, 44, 82, 0.15);
}


.solutions-page-bottom-box > .row > div > span {
    display: inline-block;

    margin-bottom: 12px;

    color: #17b978;

    font-size: 0.75rem;
    font-weight: 800;

    letter-spacing: 0.14em;
}


.solutions-page-bottom-box h2 {
    margin-bottom: 15px;

    color: #ffffff;

    font-weight: 800;
}


.solutions-page-bottom-box p {
    max-width: 720px;

    margin: 0;

    color: rgba(255, 255, 255, 0.78);

    line-height: 1.8;
}


/* =========================================================
   ANCRES
   ========================================================= */

.solution-tech-card {
    scroll-margin-top: 120px;
}


html {
    scroll-behavior: smooth;
}


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

@media (max-width: 991px) {

    .solutions-page-hero {
        padding: 105px 0 80px;
    }


    .solutions-page-intro {
        padding-top: 70px;
    }


    .solutions-grid-section {
        padding-bottom: 80px;
    }


    .solution-tech-media {
        height: 280px;
    }


    .solutions-page-bottom {
        padding-bottom: 80px;
    }


    .solutions-page-bottom-box {
        padding: 40px;
    }

}


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

@media (max-width: 576px) {

    .solutions-page-hero {
        padding: 85px 0 65px;
    }


    .solutions-page-hero h1 {
        font-size: 2.2rem;
    }


    .solutions-page-intro {
        padding: 65px 0 25px;
    }


    .solutions-page-heading h2 {
        font-size: 1.8rem;
    }


    .solutions-grid-section {
        padding: 30px 0 70px;
    }


    .solution-tech-media {
        height: 220px;
    }


    .solution-tech-image {
        padding: 18px;
    }


    #navix .solution-tech-media {
        height: 240px;
        padding: 12px;
    }

    #navix .solution-tech-image {
        padding: 0;
        object-fit: contain;
        object-position: center;
    }


    .solution-tech-content {
        padding: 24px;
    }


    .solution-tech-content h2 {
        font-size: 1.35rem;
    }


    .solutions-page-bottom {
        padding-bottom: 70px;
    }


    .solutions-page-bottom-box {
        padding: 30px 24px;

        border-radius: 20px;
    }


    .solution-tech-card {
        scroll-margin-top: 90px;
    }

}

/* =========================================================
   PAGE CONTACT - VM CONNECT
   ========================================================= */


/* HERO */

.contact-hero {
    position: relative;
    padding: 120px 0 95px;
    overflow: hidden;

    background:
        radial-gradient(
            circle at 85% 30%,
            rgba(23, 185, 120, 0.16),
            transparent 30%
        ),
        linear-gradient(
            135deg,
            #061b35 0%,
            #0a2d55 58%,
            #0d3c69 100%
        );

    color: #ffffff;
}

.contact-hero::before {
    content: "";
    position: absolute;

    width: 420px;
    height: 420px;

    right: -130px;
    top: -180px;

    border: 1px solid rgba(255,255,255,.09);
    border-radius: 50%;
}

.contact-hero .container {
    position: relative;
    z-index: 2;
}

.contact-label {
    display: inline-block;
    margin-bottom: 18px;

    color: #17b978;

    font-size: .78rem;
    font-weight: 800;
    letter-spacing: .16em;
}

.contact-hero h1 {
    max-width: 800px;

    margin-bottom: 22px;

    color: #ffffff;

    font-size: clamp(2.5rem, 5vw, 4.5rem);
    font-weight: 800;
    line-height: 1.05;
}

.contact-hero p {
    max-width: 760px;
    margin: 0;

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

    font-size: 1.08rem;
    line-height: 1.85;
}


/* INTRODUCTION */

.contact-intro {
    padding: 90px 0 50px;
}

.contact-heading {
    max-width: 760px;
    margin: 0 auto;
}

.contact-heading h2 {
    margin: 10px 0 15px;

    color: #082c52;

    font-size: clamp(2rem, 4vw, 2.8rem);
    font-weight: 800;
}

.contact-heading p {
    margin: 0;

    color: #64748b;

    line-height: 1.8;
}


/* CONTACT PRINCIPAL */

.contact-main {
    padding: 20px 0 100px;
}


/* INFORMATIONS */

.contact-info-card {
    height: 100%;

    padding: 40px;

    background:
        radial-gradient(
            circle at 90% 10%,
            rgba(23,185,120,.18),
            transparent 30%
        ),
        linear-gradient(
            145deg,
            #082c52,
            #0b4f86
        );

    border-radius: 24px;

    color: #ffffff;

    box-shadow:
        0 20px 50px rgba(8,44,82,.15);
}

.contact-info-label,
.contact-form-label {
    display: inline-block;

    margin-bottom: 12px;

    color: #17b978;

    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .14em;
}

.contact-info-card h2 {
    margin-bottom: 15px;

    color: #ffffff;

    font-size: 2rem;
    font-weight: 800;
}

.contact-info-intro {
    margin-bottom: 35px;

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

    line-height: 1.75;
}

.contact-info-item {
    display: flex;
    align-items: center;

    gap: 17px;

    padding: 18px 0;

    border-bottom:
        1px solid rgba(255,255,255,.10);
}

.contact-info-icon {
    flex: 0 0 48px;

    width: 48px;
    height: 48px;

    display: grid;
    place-items: center;

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

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

    border-radius: 14px;

    color: #17b978;

    font-size: 1.15rem;
}

.contact-info-item span {
    display: block;

    margin-bottom: 3px;

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

    font-size: .75rem;
    font-weight: 700;

    text-transform: uppercase;
    letter-spacing: .06em;
}

.contact-info-item a,
.contact-info-item strong {
    color: #ffffff;

    font-size: .95rem;
    font-weight: 700;

    text-decoration: none;
}

.contact-info-item a:hover {
    color: #17b978;
}


/* WHATSAPP */

.contact-whatsapp-btn {
    width: 100%;

    display: flex;

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

    gap: 10px;

    margin-top: 30px;
    padding: 15px 20px;

    color: #ffffff;

    background: #17b978;

    border-radius: 10px;

    font-weight: 800;

    text-decoration: none;

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

.contact-whatsapp-btn:hover {
    color: #ffffff;

    background: #12a86b;

    transform: translateY(-2px);
}


/* FORMULAIRE */

.contact-form-card {
    height: 100%;

    padding: 42px;

    background: #ffffff;

    border:
        1px solid rgba(8,44,82,.09);

    border-radius: 24px;

    box-shadow:
        0 18px 50px rgba(8,44,82,.08);
}

.contact-form-card h2 {
    margin-bottom: 12px;

    color: #082c52;

    font-size: 2rem;
    font-weight: 800;
}

.contact-form-card > p {
    margin-bottom: 30px;

    color: #64748b;

    line-height: 1.7;
}

.contact-form .form-label {
    margin-bottom: 8px;

    color: #18324a;

    font-size: .88rem;
    font-weight: 700;
}

.contact-form .form-control,
.contact-form .form-select {
    min-height: 52px;

    padding: 12px 15px;

    color: #18324a;

    background: #f8fafc;

    border: 1px solid #dfe8f0;
    border-radius: 9px;

    box-shadow: none;
}

.contact-form textarea.form-control {
    min-height: 150px;

    resize: vertical;
}

.contact-form .form-control:focus,
.contact-form .form-select:focus {
    background: #ffffff;

    border-color: #0b4f86;

    box-shadow:
        0 0 0 4px rgba(11,79,134,.08);
}


/* BOUTON ENVOYER */

.contact-submit-btn {
    min-height: 54px;

    display: inline-flex;

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

    gap: 10px;

    padding: 13px 26px;

    color: #ffffff;

    background:
        linear-gradient(
            135deg,
            #0b4f86,
            #087bd3
        );

    border: 0;
    border-radius: 9px;

    font-weight: 800;

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

.contact-submit-btn:hover {
    transform: translateY(-2px);

    box-shadow:
        0 12px 28px rgba(11,79,134,.22);
}


/* AIDE */

.contact-help {
    padding: 90px 0;

    background: #f6f9fc;
}

.contact-help-card {
    height: 100%;

    padding: 30px;

    background: #ffffff;

    border:
        1px solid rgba(8,44,82,.08);

    border-radius: 19px;

    box-shadow:
        0 12px 30px rgba(8,44,82,.06);

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

.contact-help-card:hover {
    transform: translateY(-6px);

    box-shadow:
        0 20px 45px rgba(8,44,82,.11);
}

.contact-help-icon {
    width: 55px;
    height: 55px;

    display: grid;
    place-items: center;

    margin-bottom: 22px;

    color: #ffffff;

    background:
        linear-gradient(
            135deg,
            #0b4f86,
            #17b978
        );

    border-radius: 15px;

    font-size: 1.3rem;
}

.contact-help-card h3 {
    margin-bottom: 12px;

    color: #082c52;

    font-size: 1.15rem;
    font-weight: 800;
}

.contact-help-card p {
    color: #64748b;

    line-height: 1.7;
}

.contact-help-card a {
    display: inline-flex;

    align-items: center;

    gap: 7px;

    color: #0b4f86;

    font-weight: 800;

    text-decoration: none;
}

.contact-help-card a:hover {
    gap: 11px;

    color: #17a96d;
}


/* ANCRES */

#contact-form {
    scroll-margin-top: 110px;
}


/* TABLETTE */

@media (max-width: 991px) {

    .contact-hero {
        padding: 90px 0 75px;
    }

    .contact-info-card,
    .contact-form-card {
        padding: 35px;
    }

}


/* MOBILE */

@media (max-width: 576px) {

    .contact-hero {
        padding: 70px 0 60px;
    }

    .contact-hero h1 {
        font-size: 2.3rem;
    }

    .contact-intro {
        padding: 65px 0 35px;
    }

    .contact-main {
        padding-bottom: 70px;
    }

    .contact-info-card,
    .contact-form-card {
        padding: 26px 22px;

        border-radius: 19px;
    }

    .contact-info-card h2,
    .contact-form-card h2 {
        font-size: 1.65rem;
    }

    .contact-submit-btn {
        width: 100%;
    }

    .contact-help {
        padding: 70px 0;
    }

}

/* =========================================================
   À PROPOS - TITRE NOS VALEURS SUR UNE SEULE LIGNE
   ========================================================= */

.about-values .about-section-heading h2,
.about-values-section .about-section-heading h2,
#valeurs .about-section-heading h2,
.about-values-title {
    white-space: nowrap;
}

@media (max-width: 576px) {
    .about-values .about-section-heading h2,
    .about-values-section .about-section-heading h2,
    #valeurs .about-section-heading h2,
    .about-values-title {
        font-size: clamp(1.15rem, 5.4vw, 1.45rem);
        white-space: nowrap;
        letter-spacing: -0.02em;
    }
}

/* =========================================================
   CORRECTION FINALE - TITRE SIGNATURE À PROPOS
   ========================================================= */

.about-signature .container {
    max-width: 1400px !important;
}

.about-signature h2 {
    display: block !important;
    width: 100% !important;
    max-width: none !important;

    white-space: nowrap !important;

    text-align: center !important;

    font-size: clamp(24px, 3.2vw, 44px) !important;

    letter-spacing: -1px;
}

@media (max-width: 768px) {

    .about-signature h2 {
        font-size: 5.2vw !important;
        letter-spacing: -0.5px;
    }

}

@media (max-width: 480px) {

    .about-signature h2 {
        font-size: 4.8vw !important;
        letter-spacing: -0.3px;
    }

}

/* =========================================================
   TITRE NOTRE ENGAGEMENT - À PROPOS
   ========================================================= */

.about-engagement-heading {
    max-width: 1100px;
}

.about-engagement-heading h2 {
    white-space: nowrap;
}

@media (max-width: 576px) {
    .about-engagement-heading h2 {
        white-space: normal;
    }
}

/* Sous-titre VM Connect sur une seule ligne */
.about-tech-subtitle {
    white-space: nowrap;
    max-width: none !important;
}

/* =========================================================
   SERVICES - PHRASE INTRODUCTION SUR UNE SEULE LIGNE
   ========================================================= */

.services-heading {
    max-width: 1200px;
}

.services-heading .services-intro-line {
    max-width: none;
    width: 100%;
    white-space: nowrap;
    text-align: center;
}

/* Sur téléphone, autoriser le retour à la ligne */
@media (max-width: 768px) {
    .services-heading .services-intro-line {
        white-space: normal;
    }
}

/* =========================================================
   CONTACT - INTRODUCTION
   Titres sur une seule ligne sur ordinateur
   ========================================================= */

.contact-heading {
    width: 100%;
    max-width: 1200px !important;
    margin-left: auto;
    margin-right: auto;
}

.contact-heading-title {
    width: 100%;
    max-width: none !important;
    white-space: nowrap;
}

.contact-heading-text {
    width: 100%;
    max-width: none !important;
    margin-left: auto;
    margin-right: auto;
    white-space: nowrap;
    text-align: center;
}

/* Téléphone et petite tablette */
@media (max-width: 768px) {

    .contact-heading-title,
    .contact-heading-text {
        white-space: normal;
    }
}

/* =========================================================
   RÉALISATIONS - INTRODUCTION SUR UNE SEULE LIGNE
   ========================================================= */

.realisations-intro-text {
    width: 100%;
    max-width: none !important;
    white-space: nowrap;
    text-align: center;
}

/* Autoriser le retour à la ligne sur les petits écrans */
@media (max-width: 768px) {
    .realisations-intro-text {
        white-space: normal;
    }
}

/* =========================================================
   RÉALISATIONS - PHOTOS DES PROJETS
   ========================================================= */

.realisation-media {
    position: relative;
    width: 100%;
    height: 230px;
    overflow: hidden;

    background: #eef3f7;

    border-radius: 18px 18px 0 0;
}

.realisation-image {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;
    object-position: center;

    transition: transform 0.4s ease;
}

/* Léger zoom professionnel au passage de la souris */
.realisation-card:hover .realisation-image {
    transform: scale(1.04);
}

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

    .realisation-media {
        height: 210px;
    }

}

/* Texte d'introduction de la page Services */
.services-hero-description {
    text-align: left !important;
    text-justify: auto !important;
    word-spacing: normal !important;
    letter-spacing: normal;
    line-height: 1.8;
}