/* =========================================================
           BASE
        ========================================================= */

        * {
            box-sizing: border-box;
        }

        html {
            scroll-behavior: smooth;
            width: 100%;
            overflow-x: clip;
        }

        body {
            margin: 0;
            overflow-x: clip;
            width: 100%;
            font-family: "Manrope", sans-serif;
            color: #111;
            background: #fafafa;
        }

        button,
        a {
            font-family: inherit;
        }


        /* =========================================================
           FOND ANIMÉ
        ========================================================= */

        .animated-bg {
            position: fixed;
            inset: 0;
            z-index: -20;
            overflow: hidden;

            background:
                linear-gradient(
                    125deg,
                    #ffffff 0%,
                    #f5efff 22%,
                    #eaf9ff 45%,
                    #fff0f7 68%,
                    #fff8e9 85%,
                    #ffffff 100%
                );

            background-size: 400% 400%;

            animation:
                backgroundFlow 10s ease-in-out infinite;
        }

        @keyframes backgroundFlow {
            0% {
                background-position: 0% 20%;
            }

            25% {
                background-position: 60% 0%;
            }

            50% {
                background-position: 100% 80%;
            }

            75% {
                background-position: 40% 100%;
            }

            100% {
                background-position: 0% 20%;
            }
        }


        /* =========================================================
           NUAGES DE COULEUR DU FOND
        ========================================================= */

        .orb {
            position: absolute;
            border-radius: 50%;
            filter: blur(75px);
            will-change: transform;
            pointer-events: none;
        }

        .orb-1 {
            width: 750px;
            height: 750px;

            background:
                radial-gradient(
                    circle,
                    rgba(142,92,255,.55) 0%,
                    rgba(142,92,255,.30) 45%,
                    transparent 72%
                );

            top: -300px;
            left: -250px;

            animation:
                orbMove1 12s ease-in-out infinite alternate;
        }

        .orb-2 {
            width: 720px;
            height: 720px;

            background:
                radial-gradient(
                    circle,
                    rgba(56,197,255,.48) 0%,
                    rgba(56,197,255,.25) 45%,
                    transparent 72%
                );

            top: 10%;
            right: -280px;

            animation:
                orbMove2 14s ease-in-out infinite alternate;
        }

        .orb-3 {
            width: 680px;
            height: 680px;

            background:
                radial-gradient(
                    circle,
                    rgba(255,86,167,.45) 0%,
                    rgba(255,86,167,.22) 45%,
                    transparent 72%
                );

            left: 15%;
            top: 45%;

            animation:
                orbMove3 13s ease-in-out infinite alternate;
        }

        .orb-4 {
            width: 620px;
            height: 620px;

            background:
                radial-gradient(
                    circle,
                    rgba(255,183,70,.43) 0%,
                    rgba(255,183,70,.20) 45%,
                    transparent 72%
                );

            right: 0;
            bottom: -250px;

            animation:
                orbMove4 16s ease-in-out infinite alternate;
        }

        @keyframes orbMove1 {
            0% {
                transform: translate3d(-100px,-100px,0) scale(1);
            }

            33% {
                transform: translate3d(450px,250px,0) scale(1.20);
            }

            66% {
                transform: translate3d(750px,500px,0) scale(.90);
            }

            100% {
                transform: translate3d(200px,750px,0) scale(1.15);
            }
        }

        @keyframes orbMove2 {
            0% {
                transform: translate3d(100px,-150px,0) scale(1);
            }

            33% {
                transform: translate3d(-500px,200px,0) scale(1.18);
            }

            66% {
                transform: translate3d(-850px,450px,0) scale(.95);
            }

            100% {
                transform: translate3d(-250px,750px,0) scale(1.20);
            }
        }

        @keyframes orbMove3 {
            0% {
                transform: translate3d(-400px,250px,0) scale(.9);
            }

            30% {
                transform: translate3d(200px,-300px,0) scale(1.15);
            }

            65% {
                transform: translate3d(650px,-100px,0) scale(1);
            }

            100% {
                transform: translate3d(-100px,-600px,0) scale(1.25);
            }
        }

        @keyframes orbMove4 {
            0% {
                transform: translate3d(250px,150px,0) scale(1);
            }

            35% {
                transform: translate3d(-450px,-300px,0) scale(1.20);
            }

            70% {
                transform: translate3d(-750px,-600px,0) scale(.95);
            }

            100% {
                transform: translate3d(-150px,-900px,0) scale(1.15);
            }
        }


        .animated-bg::after {
            content: "";
            position: absolute;
            inset: -50%;

            width: 200%;
            height: 200%;

            background:
                radial-gradient(
                    circle at 20% 30%,
                    rgba(255,255,255,.8),
                    transparent 20%
                ),
                radial-gradient(
                    circle at 70% 60%,
                    rgba(255,255,255,.55),
                    transparent 18%
                );

            animation:
                lightMovement 14s linear infinite;

            pointer-events: none;
        }

        @keyframes lightMovement {
            0% {
                transform: translate3d(-5%,-5%,0) rotate(0deg);
            }

            50% {
                transform: translate3d(5%,8%,0) rotate(5deg);
            }

            100% {
                transform: translate3d(-5%,-5%,0) rotate(0deg);
            }
        }


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

        .hero {
            position: relative;
            padding: 55px 20px 40px;
            text-align: center;
        }


        /* =========================================================
           LOGO
        ========================================================= */

        .logo-shell {
            position: relative;

            width: min(1280px, 100%);
            height: 245px;

            margin: 0 auto;

            display: flex;
            justify-content: center;

            overflow: visible;
        }


        /*
           Halo général très léger.
        */

        .logo-shell::before {
            content: "";

            position: absolute;

            left: 50%;
            top: 25px;

            width: 80%;
            height: 170px;

            transform: translateX(-50%);

            border-radius: 50%;

            background:
                radial-gradient(
                    ellipse at center,
                    rgba(255,255,255,.78) 0%,
                    rgba(255,255,255,.34) 47%,
                    transparent 73%
                );

            filter: blur(18px);

            pointer-events: none;
        }


        /*
           Zone réelle du logo.

           Les lettres sont positionnées en JS
           pour former une voûte mathématiquement propre.
        */

        .cloud-logo {
            position: relative;

            width: 1220px;
            max-width: 100%;

            height: 225px;

            overflow: visible;
        }


        /*
           Chaque "slot" définit la position FIXE
           d'une lettre dans la voûte.

           Ce slot ne bouge jamais.
        */

        .cloud-letter-slot {
            position: absolute;

            left: 50%;
            top: 0;

            width: 1px;
            height: 1px;

            transform-origin: center center;
        }


        /*
           Seule la lettre intérieure bouge.
           La voûte reste donc parfaitement stable.
        */

        .cloud-letter {
            position: absolute;

            left: 0;
            top: 0;

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

            display: block;

            font-size:
                clamp(52px, 6.3vw, 92px);

            line-height: 1;

            font-weight: 800;

            letter-spacing: -4px;

            color: #101010;

            white-space: nowrap;

            text-shadow:
                0 2px 0 rgba(255,255,255,.72),
                0 5px 12px rgba(0,0,0,.05),
                0 12px 30px rgba(0,0,0,.06);

            will-change:
                transform,
                filter;

            animation:
                letterCloud
                var(--float-speed, 5s)
                ease-in-out
                var(--float-delay, 0s)
                infinite;
        }


        /*
           Effet "nuage" :
           - 2 à 4 px verticalement
           - 1 à 2 px horizontalement
           - micro rotation
           - très légère variation d'ombre

           Le mouvement est volontairement visible,
           mais pas agité.
        */

        @keyframes letterCloud {

            0% {
                transform:
                    translate(-50%, -50%)
                    translate3d(0, 1px, 0)
                    rotate(-.25deg);

                filter:
                    drop-shadow(
                        0 7px 9px
                        rgba(0,0,0,.035)
                    );
            }

            25% {
                transform:
                    translate(-50%, -50%)
                    translate3d(1.5px, -3px, 0)
                    rotate(.15deg);

                filter:
                    drop-shadow(
                        0 10px 13px
                        rgba(0,0,0,.05)
                    );
            }

            50% {
                transform:
                    translate(-50%, -50%)
                    translate3d(-1px, -1px, 0)
                    rotate(.30deg);

                filter:
                    drop-shadow(
                        0 8px 11px
                        rgba(0,0,0,.04)
                    );
            }

            75% {
                transform:
                    translate(-50%, -50%)
                    translate3d(1px, 2px, 0)
                    rotate(-.15deg);

                filter:
                    drop-shadow(
                        0 5px 8px
                        rgba(0,0,0,.03)
                    );
            }

            100% {
                transform:
                    translate(-50%, -50%)
                    translate3d(0, 1px, 0)
                    rotate(-.25deg);

                filter:
                    drop-shadow(
                        0 7px 9px
                        rgba(0,0,0,.035)
                    );
            }
        }


        /*
           Variation indépendante de chaque lettre.
        */

        .cloud-letter-slot:nth-child(1) .cloud-letter {
            --float-speed: 5.2s;
            --float-delay: -1.1s;
        }

        .cloud-letter-slot:nth-child(2) .cloud-letter {
            --float-speed: 4.6s;
            --float-delay: -2.7s;
        }

        .cloud-letter-slot:nth-child(3) .cloud-letter {
            --float-speed: 5.8s;
            --float-delay: -.5s;
        }

        .cloud-letter-slot:nth-child(4) .cloud-letter {
            --float-speed: 4.9s;
            --float-delay: -3.4s;
        }

        .cloud-letter-slot:nth-child(5) .cloud-letter {
            --float-speed: 5.5s;
            --float-delay: -1.8s;
        }

        .cloud-letter-slot:nth-child(6) .cloud-letter {
            --float-speed: 4.7s;
            --float-delay: -.8s;
        }

        .cloud-letter-slot:nth-child(7) .cloud-letter {
            --float-speed: 5.9s;
            --float-delay: -2.9s;
        }

        .cloud-letter-slot:nth-child(8) .cloud-letter {
            --float-speed: 5.1s;
            --float-delay: -1.4s;
        }

        .cloud-letter-slot:nth-child(9) .cloud-letter {
            --float-speed: 4.8s;
            --float-delay: -3.1s;
        }

        .cloud-letter-slot:nth-child(10) .cloud-letter {
            --float-speed: 5.7s;
            --float-delay: -.6s;
        }

        .cloud-letter-slot:nth-child(11) .cloud-letter {
            --float-speed: 4.5s;
            --float-delay: -2.2s;
        }

        .cloud-letter-slot:nth-child(12) .cloud-letter {
            --float-speed: 5.4s;
            --float-delay: -1.2s;
        }

        .cloud-letter-slot:nth-child(13) .cloud-letter {
            --float-speed: 5.9s;
            --float-delay: -3.5s;
        }

        .cloud-letter-slot:nth-child(14) .cloud-letter {
            --float-speed: 4.7s;
            --float-delay: -.3s;
        }

        .cloud-letter-slot:nth-child(15) .cloud-letter {
            --float-speed: 5.3s;
            --float-delay: -2.6s;
        }

        .cloud-letter-slot:nth-child(16) .cloud-letter {
            --float-speed: 4.9s;
            --float-delay: -1.7s;
        }

        .cloud-letter-slot:nth-child(17) .cloud-letter {
            --float-speed: 5.6s;
            --float-delay: -3.2s;
        }

        .cloud-letter-slot:nth-child(18) .cloud-letter {
            --float-speed: 4.6s;
            --float-delay: -.9s;
        }


        /* =========================================================
           TÉLÉPHONE
        ========================================================= */

        .hero-contact {
            position: relative;

            /*
               Téléphone volontairement rapproché
               du bas de la voûte.
            */

            margin-top: -52px;

            z-index: 5;
        }


        .hero-phone {
            display: inline-flex;

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

            gap: 10px;

            padding:
                11px 20px
                11px 12px;

            border: 0;

            border-radius: 100px;

            background: #111;

            color: white;

            cursor: pointer;

            box-shadow:
                0 10px 28px
                rgba(0,0,0,.10);

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


        .hero-phone:hover {
            transform:
                translateY(-2px)
                scale(1.01);

            box-shadow:
                0 15px 38px
                rgba(0,0,0,.16);
        }


        .phone-icon {
            width: 30px;
            height: 30px;

            display: flex;

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

            border-radius: 50%;

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

            font-size: 13px;
        }


        .hero-phone strong {
            font-size: 15px;

            letter-spacing: -.3px;
        }


        /* =========================================================
           INTRO SERVICES
        ========================================================= */

        .services-intro {
            max-width: 1320px;

            margin: 0 auto;

            padding:
                0 32px 35px;

            display: flex;

            justify-content:
                space-between;

            align-items:
                flex-end;

            gap: 30px;
        }


        .services-intro-label {
            margin-bottom: 10px;

            font-size: 10px;

            font-weight: 800;

            letter-spacing: 2.5px;

            text-transform: uppercase;

            color:
                rgba(0,0,0,.35);
        }


        .services-intro h2 {
            margin: 0;

            font-size:
                clamp(38px,5vw,58px);

            line-height: .95;

            letter-spacing: -3px;

            font-weight: 800;
        }


        .services-intro p {
            max-width: 370px;

            margin: 0;

            color:
                rgba(0,0,0,.45);

            font-size: 13px;

            line-height: 1.7;
        }


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

        .services {
            max-width: 1320px;

            margin: 0 auto;

            padding:
                0 32px 100px;

            display: grid;

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

            gap: 18px;
        }


        .service-card {
            position: relative;

            min-height: 420px;

            overflow: hidden;

            border-radius: 28px;

            isolation: isolate;

            cursor: pointer;

            box-shadow:
                0 18px 55px
                rgba(0,0,0,.07);

            transform:
                translateZ(0);
        }


        .service-image {
            position: absolute;

            inset: 0;

            z-index: -3;

            background-size: cover;
            background-position: center;

            transition:
                transform .9s
                cubic-bezier(.2,.75,.25,1);
        }


        .service-card:hover
        .service-image {
            transform:
                scale(1.09);
        }


        .service-overlay {
            position: absolute;

            inset: 0;

            z-index: -2;

            background:
                linear-gradient(
                    to bottom,
                    rgba(0,0,0,.02),
                    rgba(0,0,0,.08) 45%,
                    rgba(0,0,0,.88)
                );

            transition:
                background .5s ease;
        }


        .service-card:hover
        .service-overlay {
            background:
                linear-gradient(
                    to bottom,
                    rgba(0,0,0,.05),
                    rgba(0,0,0,.18) 40%,
                    rgba(0,0,0,.95)
                );
        }


        .service-number {
            position: absolute;

            top: 22px;
            left: 22px;

            width: 46px;
            height: 46px;

            display: flex;

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

            border-radius: 50%;

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

            backdrop-filter:
                blur(15px);

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

            color: white;

            font-size: 11px;

            font-weight: 800;

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


        .service-card:hover
        .service-number {
            background: white;

            color: black;

            transform:
                scale(1.08);
        }


        .service-arrow {
            position: absolute;

            top: 22px;
            right: 22px;

            width: 46px;
            height: 46px;

            display: flex;

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

            border-radius: 50%;

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

            backdrop-filter:
                blur(15px);

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

            color: white;

            font-size: 19px;

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


        .service-card:hover
        .service-arrow {
            transform:
                rotate(45deg);

            background: white;

            color: black;
        }


        .service-content {
            position: absolute;

            left: 27px;
            right: 27px;
            bottom: 27px;

            color: white;

            transform:
                translateY(38px);

            transition:
                transform .5s
                cubic-bezier(.2,.7,.2,1);
        }


        .service-card:hover
        .service-content {
            transform:
                translateY(0);
        }


        .service-type {
            font-size: 9px;

            text-transform: uppercase;

            letter-spacing: 2.5px;

            color:
                rgba(255,255,255,.5);
        }


        .service-content h3 {
            margin:
                6px 0 0;

            font-size:
                clamp(32px,3vw,39px);

            line-height: 1;

            font-weight: 800;

            letter-spacing: -2px;
        }


        .service-description {
            margin:
                13px 0 0;

            font-size: 12px;

            line-height: 1.6;

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

            opacity: 0;

            transform:
                translateY(12px);

            transition:
                opacity .45s ease,
                transform .45s ease;
        }


        .service-card:hover
        .service-description {
            opacity: 1;

            transform:
                translateY(0);
        }


        /* =========================================================
           VISUELS PROVISOIRES
        ========================================================= */

        .robot .service-image {
            background:
                linear-gradient(
                    135deg,
                    #171229,
                    #763ddd,
                    #ff4ba8
                );
        }


        .mousse .service-image {
            background:
                linear-gradient(
                    135deg,
                    #43c3ff,
                    #5144e6
                );
        }


        .neige .service-image {
            background:
                linear-gradient(
                    135deg,
                    #c5ecff,
                    #5474d8
                );
        }


        .karaoke .service-image {
            background:
                linear-gradient(
                    135deg,
                    #ff497f,
                    #7136df
                );
        }


        .co2 .service-image {
            background:
                linear-gradient(
                    135deg,
                    #080808,
                    #505050
                );
        }


        .confettis .service-image {
            background:
                linear-gradient(
                    135deg,
                    #ffb73d,
                    #ff477e,
                    #8841dc
                );
        }


        /* =========================================================
           LASER
        ========================================================= */

        .laser {
            grid-column:
                span 3;

            min-height: 390px;
        }


        .laser .service-image {
            background:
                radial-gradient(
                    circle at 50% 100%,
                    rgba(42,255,162,.8),
                    transparent 25%
                ),
                linear-gradient(
                    125deg,
                    #020608,
                    #071f20 45%,
                    #11102c
                );
        }


        .laser-lines {
            position: absolute;

            inset: 0;

            overflow: hidden;

            z-index: -1;

            opacity: .65;

            pointer-events: none;
        }


        .laser-line {
            position: absolute;

            width: 140%;
            height: 1px;

            left: -20%;
            bottom: 25%;

            background:
                linear-gradient(
                    90deg,
                    transparent,
                    rgba(87,255,180,.95),
                    transparent
                );

            transform-origin: center;

            filter:
                drop-shadow(
                    0 0 5px
                    rgba(87,255,180,.9)
                );

            animation:
                laserSweep
                4s
                ease-in-out
                infinite alternate;
        }


        .laser-line:nth-child(1) {
            transform:
                rotate(12deg);
        }


        .laser-line:nth-child(2) {
            transform:
                rotate(-13deg);

            animation-delay:
                -1s;
        }


        .laser-line:nth-child(3) {
            transform:
                rotate(5deg);

            animation-delay:
                -2s;
        }


        @keyframes laserSweep {
            0% {
                opacity: .2;
                translate: -5% 0;
            }

            50% {
                opacity: .95;
            }

            100% {
                opacity: .35;
                translate: 5% -40px;
            }
        }


        /* =========================================================
           RÉSEAUX
        ========================================================= */

        .social-section {
            max-width: 1320px;

            margin: 0 auto;

            padding:
                0 32px 80px;
        }


        .social-box {
            padding: 32px;

            display: flex;

            align-items: center;

            justify-content:
                space-between;

            gap: 30px;

            border-radius: 28px;

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

            backdrop-filter:
                blur(20px);

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

            box-shadow:
                0 20px 70px
                rgba(0,0,0,.04);
        }


        .social-label {
            margin-bottom: 5px;

            font-size: 9px;

            font-weight: 800;

            letter-spacing: 2px;

            text-transform: uppercase;

            color:
                rgba(0,0,0,.35);
        }


        .social-title {
            font-size: 28px;

            font-weight: 800;

            letter-spacing: -1.5px;
        }


        .social-links {
            display: flex;

            gap: 8px;
        }


        .social-link {
            min-width: 145px;

            padding:
                15px 18px;

            background: white;

            border:
                1px solid
                rgba(0,0,0,.05);

            border-radius: 16px;

            color: #111;

            text-decoration: none;

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


        .social-link:hover {
            transform:
                translateY(-4px);

            box-shadow:
                0 10px 30px
                rgba(0,0,0,.08);
        }


        .social-link strong {
            display: block;

            font-size: 14px;
        }


        .social-link span {
            font-size: 9px;

            color:
                rgba(0,0,0,.35);
        }


        /* =========================================================
           CTA
        ========================================================= */

        .cta-wrapper {
            max-width: 1320px;

            margin: 0 auto;

            padding:
                0 32px 100px;
        }


        .cta {
            position: relative;

            overflow: hidden;

            padding:
                90px 30px;

            text-align: center;

            background: #0b0b0b;

            color: white;

            border-radius: 40px;
        }


        .cta::before {
            content: "";

            position: absolute;

            width: 650px;
            height: 650px;

            border-radius: 50%;

            top: -500px;
            left: 25%;

            background: #795cff;

            opacity: .4;

            filter:
                blur(130px);
        }


        .cta-content {
            position: relative;
        }


        .cta-label {
            font-size: 9px;

            text-transform: uppercase;

            letter-spacing: 3px;

            color:
                rgba(255,255,255,.4);
        }


        .cta h2 {
            margin:
                18px auto 0;

            max-width: 950px;

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

            line-height: .98;

            letter-spacing: -4px;

            font-weight: 800;
        }


        .cta-phone {
            margin-top: 32px;

            padding:
                14px 24px;

            border: 0;

            border-radius: 100px;

            background: white;

            color: black;

            font-size: 14px;

            font-weight: 800;

            cursor: pointer;

            transition:
                transform .25s ease;
        }


        .cta-phone:hover {
            transform:
                scale(1.04);
        }


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

        footer {
            max-width: 1320px;

            margin: 0 auto;

            padding:
                25px 32px
                35px;

            display: flex;

            justify-content:
                space-between;

            gap: 20px;

            border-top:
                1px solid
                rgba(0,0,0,.05);

            font-size: 10px;

            color:
                rgba(0,0,0,.35);
        }


        /* =========================================================
           MODALE
        ========================================================= */

        #contactModal {
            position: fixed;

            inset: 0;

            z-index: 100;

            display: flex;

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

            padding: 20px;

            transition:
                opacity .3s ease,
                visibility .3s ease;
        }


        #contactModal.closed {
            opacity: 0;

            visibility: hidden;

            pointer-events: none;
        }


        #contactModal.open {
            opacity: 1;

            visibility: visible;

            pointer-events: auto;
        }


        .modal-backdrop {
            position: absolute;

            inset: 0;

            background:
                rgba(0,0,0,.55);

            backdrop-filter:
                blur(8px);
        }


        #modalBox {
            position: relative;

            width: 100%;

            max-width: 430px;

            padding: 32px;

            border-radius: 30px;

            background: white;

            box-shadow:
                0 30px 100px
                rgba(0,0,0,.25);

            transition:
                transform .4s
                cubic-bezier(.2,.8,.2,1),
                opacity .3s ease;
        }


        #contactModal.closed #modalBox {
            opacity: 0;

            transform:
                translateY(30px)
                scale(.94);
        }


        #contactModal.open #modalBox {
            opacity: 1;

            transform:
                translateY(0)
                scale(1);
        }


        .modal-close {
            position: absolute;

            top: 17px;
            right: 17px;

            width: 38px;
            height: 38px;

            border: 0;

            border-radius: 50%;

            background:
                rgba(0,0,0,.05);

            cursor: pointer;

            font-size: 19px;
        }


        .modal-label {
            font-size: 9px;

            font-weight: 800;

            text-transform: uppercase;

            letter-spacing: 2px;

            color:
                rgba(0,0,0,.35);
        }


        #modalBox h3 {
            margin:
                10px 35px
                0 0;

            font-size: 30px;

            line-height: 1.05;

            letter-spacing: -2px;

            font-weight: 800;
        }


        .modal-number {
            margin-top: 24px;

            padding: 16px;

            border-radius: 16px;

            background:
                rgba(0,0,0,.035);
        }


        .modal-number span {
            display: block;

            font-size: 9px;

            text-transform: uppercase;

            letter-spacing: 1.5px;

            color:
                rgba(0,0,0,.35);
        }


        .modal-number strong {
            display: block;

            margin-top: 2px;

            font-size: 23px;

            letter-spacing: -1px;
        }


        .modal-actions {
            margin-top: 10px;

            display: grid;

            grid-template-columns:
                1fr 1fr;

            gap: 10px;
        }


        .modal-action {
            padding: 20px;

            border-radius: 18px;

            text-decoration: none;

            transition:
                transform .3s ease;
        }


        .modal-action:hover {
            transform:
                translateY(-3px);
        }


        .modal-action.call {
            background: #111;

            color: white;
        }


        .modal-action.sms {
            background:
                rgba(0,0,0,.05);

            color: black;
        }


        .action-icon {
            display: block;

            margin-bottom: 25px;

            font-size: 23px;
        }


        .modal-action strong {
            display: block;

            font-size: 14px;
        }


        .modal-action small {
            font-size: 9px;

            opacity: .45;
        }


        /* =========================================================
           REVEAL
        ========================================================= */

        .reveal {
            opacity: 0;

            transform:
                translateY(28px);

            transition:
                opacity .8s ease,
                transform .8s
                cubic-bezier(.2,.7,.2,1);
        }


        .reveal.visible {
            opacity: 1;

            transform:
                translateY(0);
        }


                /* =========================================================
           RESPONSIVE — TABLETTE / MOBILE
           ========================================================= */

        @media (max-width: 900px) {
            .services {
                grid-template-columns: repeat(2, minmax(0, 1fr));
            }

            .service-card.dynamic-wide,
            .services .laser {
                grid-column: auto;
                min-height: 0;
            }

            .services-intro {
                flex-direction: column;
                align-items: flex-start;
            }

            .social-box {
                flex-direction: column;
                align-items: stretch;
            }

            .social-links {
                width: 100%;
                flex-wrap: wrap;
            }

            .social-link {
                flex: 1 1 130px;
                min-width: 0;
            }

            .logo-shell { height: 200px; }
            .cloud-logo { height: 190px; }
            .hero-contact { margin-top: -40px; }
        }

        @media (max-width: 600px) {
            .hero {
                padding: 38px 14px 26px;
                overflow: clip;
            }

            .logo-shell {
                width: 100%;
                max-width: 100%;
                margin: 0 auto;
                height: 142px;
            }

            .cloud-logo {
                width: 100%;
                max-width: 100%;
                height: 135px;
            }

            .cloud-letter {
                font-size: clamp(24px, 7.2vw, 35px);
                letter-spacing: -2px;
            }

            .hero-contact {
                margin-top: -20px;
                display: flex;
                justify-content: center;
            }

            .hero-phone {
                max-width: 100%;
                padding: 10px 18px 10px 11px;
            }

            .phone-icon { width: 29px; height: 29px; flex-shrink: 0; }
            .hero-phone strong { font-size: 14px; overflow-wrap: anywhere; }

            .services-intro,
            .services,
            .social-section,
            .cta-wrapper {
                padding-left: 14px;
                padding-right: 14px;
            }

            .services-intro { gap: 14px; padding-bottom: 24px; }
            .services-intro h2 {
                font-size: clamp(32px, 9vw, 44px);
                letter-spacing: -1.8px;
                overflow-wrap: anywhere;
            }
            .services-intro p { max-width: 100%; }

            /* Toutes les vignettes sont carrées et de taille égale. */
            .services {
                grid-template-columns: repeat(2, minmax(0, 1fr));
                gap: 10px;
                padding-bottom: 55px;
            }

            .services .service-card,
            .services .service-card.dynamic-wide,
            .services .laser {
                display: block;
                grid-column: auto;
                grid-row: auto;
                width: 100%;
                min-width: 0;
                min-height: 0;
                height: auto;
                aspect-ratio: 1 / 1;
                border-radius: 16px;
                overflow: hidden;
            }

            .service-image {
                position: absolute;
                inset: 0;
                width: 100%;
                height: 100%;
                background-size: cover;
                background-position: center;
                background-repeat: no-repeat;
            }

            .service-number,
            .service-arrow {
                top: 10px;
                width: 30px;
                height: 30px;
                font-size: 10px;
            }
            .service-number { left: 10px; }
            .service-arrow { right: 10px; font-size: 15px; }

            .service-content,
            .service-card:hover .service-content {
                left: 12px;
                right: 12px;
                bottom: 13px;
                transform: none;
            }

            .service-type { font-size: 8px; letter-spacing: 1px; }
            .service-content h3 {
                font-size: clamp(14px, 4vw, 20px);
                line-height: 1.12;
                letter-spacing: -.7px;
                overflow-wrap: anywhere;
            }
            .service-description { display: none; }

            .social-section { padding-bottom: 45px; }
            .social-box { padding: 20px; gap: 15px; border-radius: 20px; }
            .social-title { font-size: 23px; }
            .social-links {
                display: grid;
                grid-template-columns: repeat(3, minmax(0, 1fr));
                gap: 7px;
            }
            .social-link {
                min-width: 0;
                padding: 12px 8px;
                border-radius: 12px;
                text-align: center;
            }
            .social-link strong { font-size: 11px; overflow-wrap: anywhere; }
            .social-link span { font-size: 8px; }

            .cta-wrapper { padding-bottom: 55px; }
            .cta { padding: 55px 18px; border-radius: 24px; }
            .cta h2 {
                font-size: clamp(30px, 9vw, 45px);
                letter-spacing: -1.7px;
                overflow-wrap: anywhere;
            }
            .cta-phone { max-width: 100%; overflow-wrap: anywhere; }

            footer {
                padding-left: 14px;
                padding-right: 14px;
                flex-direction: column;
                gap: 7px;
            }

            #contactModal { padding: 14px; }
            #modalBox {
                width: 100%;
                max-width: 430px;
                max-height: calc(100dvh - 28px);
                overflow-y: auto;
                padding: 25px 18px;
                border-radius: 22px;
            }
            #modalBox h3 { font-size: 25px; letter-spacing: -1px; }
            .modal-number strong { font-size: 20px; overflow-wrap: anywhere; }
            .modal-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
            .modal-action { min-width: 0; padding: 15px 12px; }

            .orb { filter: blur(60px); }
            .orb-1, .orb-2, .orb-3, .orb-4 {
                width: 520px;
                height: 520px;
            }
        }

        @media (max-width: 360px) {
            .services { gap: 8px; }
            .service-content { left: 9px; right: 9px; bottom: 10px; }
            .service-content h3 { font-size: 13px; }
            .social-box { padding: 14px; }
        }

/* =========================================================
           REDUCED MOTION
        ========================================================= */

        @media (prefers-reduced-motion: reduce) {

            *,
            *::before,
            *::after {
                animation-duration:
                    .01ms !important;

                animation-iteration-count:
                    1 !important;

                transition-duration:
                    .01ms !important;
            }

        }

/* Protections communes contre les débordements */
main, section, .services, .services-intro, .social-box, .cta,
.service-card, .social-link, .modal-actions { min-width: 0; }
.service-card { display: block; color: inherit; text-decoration: none; }
.service-image { background-image: var(--cover) !important; }
@media (max-width: 600px) {
    .services .service-card.dynamic-wide { min-height: 0; }
}