/* =====================================================
           PAGE TOP SERVEUR
        ====================================================== */

        .top-server-page {

            width: 100%;

            box-sizing: border-box;

            padding:
                95px
                30px
                130px;

            display: flex;

            flex-direction: column;

            align-items: center;

            position: relative;

            overflow: visible;

        }


        /* =====================================================
           LUMIÈRE
        ====================================================== */

        .top-server-page::before {

            content: "";

            position: absolute;

            width: 650px;

            height: 650px;

            top: 0;

            left: 50%;

            transform: translateX(-50%);

            background:
                radial-gradient(
                    circle,
                    rgba(var(--blue-rgb), .13),
                    transparent 68%
                );

            pointer-events: none;

        }


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

        .top-server-logo {

            width: 135px;

            height: auto;

            margin-bottom: 12px;

            position: relative;

            z-index: 2;

            filter:
                drop-shadow(0 0 12px rgba(var(--blue-rgb), .75))
                drop-shadow(0 0 30px rgba(var(--blue-rgb), .30));

        }


        /* =====================================================
           LABEL
        ====================================================== */

        .top-server-label {

            font-family: "Rajdhani", sans-serif;

            font-size: 13px;

            font-weight: 700;

            letter-spacing: 5px;

            color: var(--cyan);

            text-transform: uppercase;

            margin-bottom: 5px;

            position: relative;

            z-index: 2;

        }


        /* =====================================================
           TITRE
        ====================================================== */

        .top-server-title {

            margin: 0;

            text-align: center;

            font-family: "Kalam", cursive;

            font-size: clamp(40px, 4.8vw, 62px);

            font-weight: 700;

            line-height: 1.05;

            color: #ffffff;

            text-shadow:
                0 0 10px rgba(var(--blue-rgb), .75),
                0 0 30px rgba(var(--blue-rgb), .35);

            position: relative;

            z-index: 2;

        }


        .top-server-title span {

            color: var(--cyan);

        }


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

        .top-server-intro {

            width: min(820px, 100%);

            margin: 18px auto 28px;

            text-align: center;

            font-family: "Rajdhani", sans-serif;

            font-size: 17px;

            font-weight: 500;

            line-height: 1.5;

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

            position: relative;

            z-index: 2;

        }


        .top-server-intro strong {

            color: #ffffff;

        }


        /* =====================================================
           BLOC POURQUOI VOTER
        ====================================================== */

        .top-server-card {

            width: min(820px, 100%);

            box-sizing: border-box;

            padding:
                30px
                42px
                25px;

            text-align: center;

            border-radius: 17px;

            background:
                linear-gradient(
                    145deg,
                    rgba(8, 15, 23, .96),
                    rgba(2, 7, 12, .96)
                );

            border: 1px solid rgba(var(--blue-light-rgb), .25);

            box-shadow:
                inset 0 0 35px rgba(var(--blue-rgb), .035),
                0 15px 45px rgba(0, 0, 0, .35);

            position: relative;

            z-index: 2;

        }


        .top-server-card::before {

            content: "";

            position: absolute;

            top: 0;

            left: 15%;

            width: 70%;

            height: 1px;

            background:
                linear-gradient(
                    90deg,
                    transparent,
                    rgba(var(--cyan-rgb), .90),
                    transparent
                );

        }


        .top-server-card h2 {

            margin: 0 0 15px;

            font-family: "Rajdhani", sans-serif;

            font-size: 26px;

            font-weight: 700;

            letter-spacing: 3px;

            color: #ffffff;

            text-transform: uppercase;

        }


        .top-server-card h2 span {

            color: var(--cyan);

        }


        .top-server-card p {

            max-width: 700px;

            margin: 0 auto;

            font-family: "Rajdhani", sans-serif;

            font-size: 16px;

            font-weight: 500;

            line-height: 1.5;

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

        }


        /* =====================================================
           BOUTON
        ====================================================== */

        .top-server-button {

            display: inline-flex;

            align-items: center;

            justify-content: center;

            margin-top: 22px;

            padding: 13px 30px;

            min-width: 300px;

            box-sizing: border-box;

            border-radius: 9px;

            border: 1px solid rgba(var(--cyan-rgb), .70);

            background:
                linear-gradient(
                    135deg,
                    rgba(var(--blue-rgb), .32),
                    rgba(0, 70, 150, .20)
                );

            color: #ffffff;

            text-decoration: none;

            font-family: "Rajdhani", sans-serif;

            font-size: 16px;

            font-weight: 700;

            letter-spacing: 2px;

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

            box-shadow:
                0 0 18px rgba(var(--blue-rgb), .18);

        }


        .top-server-button:hover {

            transform: translateY(-3px);

            border-color: #65e4ff;

            box-shadow:
                0 0 25px rgba(var(--blue-rgb), .45),
                0 0 55px rgba(var(--blue-rgb), .20);

        }


        /* =====================================================
           PHRASE SOUS LE BOUTON
        ====================================================== */

        .top-server-note {

            display: block;

            margin:
                12px
                0
                0 !important;

            font-family: "Rajdhani", sans-serif !important;

            font-size: 13px !important;

            font-weight: 500;

            line-height: 1.4;

            color: rgba(255, 255, 255, .48) !important;

            opacity: 1 !important;

        }


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

        @media (max-width: 600px) {

            .top-server-page {

                padding:
                    95px
                    18px
                    110px;

            }


            .top-server-logo {

                width: 120px;

            }


            .top-server-title {

                font-size: 40px;

            }


            .top-server-intro {

                font-size: 16px;

            }


            .top-server-card {

                padding:
                    28px
                    20px;

            }


            .top-server-button {

                width: 100%;

                min-width: 0;

            }

        }