* {
            box-sizing: border-box;
        }

        html,
        body {
            margin: 0;
            padding: 0;
            width: 100%;
            min-height: 100%;
        }

        body {
            color: #ffffff;
            font-family: "Rajdhani", sans-serif;

            background:
                linear-gradient(
                    rgba(2, 8, 18, 0.48),
                    rgba(2, 8, 18, 0.70)
                ),
                var(--bg-image, url("/assets/images/fond.png"))
                center center / cover fixed no-repeat;
        }

        /* =========================================
           NAVBAR
        ========================================= */

        .navbar {
            position: relative;
            z-index: 100;

            height: 62px;

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

            background:
                rgba(1, 6, 13, 0.94);

            border-bottom:
                2px solid
                rgba(var(--blue-rgb), 0.85);

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

        .navigation {
            display: flex;
            align-items: center;
            justify-content: center;

            gap: 34px;

            width: 100%;
            height: 100%;
        }

        .navigation a {
            position: relative;

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

            text-decoration: none;

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

            transition:
                color .25s ease,
                text-shadow .25s ease;
        }

        .navigation a:hover {
            color: var(--cyan);

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

        .navigation a[href="/equipe"] {
            color: var(--cyan);

            text-shadow:
                0 0 10px
                rgba(var(--blue-light-rgb), .65);
        }

        .navigation a[href="/equipe"]::after {

            content: "";

            position: absolute;

            left: 50%;
            bottom: -12px;

            width: 26px;
            height: 2px;

            transform:
                translateX(-50%);

            border-radius: 10px;

            background:
                #49dcff;

            box-shadow:
                0 0 10px
                rgba(var(--blue-light-rgb), .8);
        }

        /* =========================================
           PAGE
        ========================================= */

        .team-page {

            width: 100%;

            min-height:
                calc(100vh - 62px - 76px);

            padding:
                22px 30px 15px;

            display: flex;

            justify-content: center;
        }

        .team-container {

            width:
                min(1260px, 100%);

            margin:
                0 auto;

            display:
                flex;

            flex-direction:
                column;

            justify-content:
                center;
        }

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

        .team-header {

            text-align: center;

            margin-bottom:
                22px;
        }

        .team-kicker {

            display: block;

            margin-bottom:
                4px;

            color:
                #4edfff;

            font-size:
                12px;

            font-weight:
                700;

            letter-spacing:
                5px;

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

        .team-title {

            margin:
                0;

            font-family:
                "Kalam",
                cursive;

            font-size:
                clamp(44px, 4.5vw, 68px);

            line-height:
                .92;

            color:
                #ffffff;

            text-shadow:
                0 0 12px
                rgba(255,255,255,.55),

                0 0 30px
                rgba(var(--blue-rgb), .38);
        }

        .team-description {

            width:
                min(780px, 100%);

            margin:
                11px auto 0;

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

            font-size:
                16px;

            line-height:
                1.4;
        }

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

        .team-grid {

            display:
                grid;

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

            gap:
                16px;

            width:
                100%;
        }

        /* =========================================
           CARTES
        ========================================= */

        .team-card {

            position:
                relative;

            height:
                235px;

            overflow:
                hidden;

            padding:
                18px 14px;

            text-align:
                center;

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

            border-radius:
                17px;

            background:
                linear-gradient(
                    145deg,
                    rgba(7,23,40,.90),
                    rgba(2,8,17,.94)
                );

            box-shadow:
                0 8px 25px
                rgba(0,0,0,.28),

                inset 0 0 28px
                rgba(var(--blue-rgb), .045);

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

        .team-card:hover {

            transform:
                translateY(-5px);

            border-color:
                rgba(var(--cyan-rgb), .86);

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

                0 0 25px
                rgba(var(--blue-rgb), .23);
        }

        .team-card::before {

            content:
                "";

            position:
                absolute;

            left:
                50%;

            top:
                -80px;

            width:
                200px;

            height:
                200px;

            transform:
                translateX(-50%);

            border-radius:
                50%;

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

            pointer-events:
                none;
        }

        /* =========================================
           PHOTO
        ========================================= */

        .team-photo {

            position:
                relative;

            width:
                96px;

            height:
                96px;

            margin:
                0 auto 13px;

            display:
                flex;

            align-items:
                center;

            justify-content:
                center;

            border-radius:
                50%;

            border:
                2px solid
                rgba(var(--cyan-rgb), .78);

            background:
                radial-gradient(
                    circle,
                    rgba(var(--blue-rgb), .20),
                    rgba(0,0,0,.60)
                );

            box-shadow:
                0 0 17px
                rgba(var(--blue-light-rgb), .40),

                0 0 38px
                rgba(var(--blue-rgb), .14);

            overflow:
                hidden;
        }

        .team-photo::after {

            content:
                "";

            position:
                absolute;

            inset:
                6px;

            border-radius:
                50%;

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

            pointer-events:
                none;
        }

        .team-photo img {

            width:
                100%;

            height:
                100%;

            object-fit:
                contain;

            padding:
                5px;

            transition:
                transform .3s ease;
        }

        .team-card:hover
        .team-photo img {

            transform:
                scale(1.08);
        }

        /* =========================================
           TEXTES
        ========================================= */

        .team-role {

            display:
                block;

            margin-bottom:
                4px;

            color:
                #4bdcff;

            font-size:
                11px;

            font-weight:
                700;

            letter-spacing:
                1.8px;

            text-transform:
                uppercase;

            text-shadow:
                0 0 9px
                rgba(var(--blue-light-rgb), .52);
        }

        .team-name {

            display:
                block;

            min-height:
                29px;

            color:
                #ffffff;

            font-family:
                "Kalam",
                cursive;

            font-size:
                23px;

            font-weight:
                700;

            line-height:
                1.05;
        }

        .team-status {

            display:
                inline-flex;

            align-items:
                center;

            gap:
                6px;

            margin-top:
                9px;

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

            font-size:
                10px;

            font-weight:
                600;

            letter-spacing:
                1px;
        }

        .status-dot {

            width:
                7px;

            height:
                7px;

            border-radius:
                50%;

            background:
                #43ddff;

            box-shadow:
                0 0 7px
                #43ddff,

                0 0 15px
                rgba(var(--cyan-rgb), .55);
        }

        /* =========================================
           BLUE NETWORK
        ========================================= */

        .blue-network {

            border-color:
                rgba(var(--blue-light-rgb), .55);

            background:
                linear-gradient(
                    145deg,
                    rgba(5,28,48,.94),
                    rgba(1,9,19,.95)
                );

            box-shadow:
                0 0 24px
                rgba(var(--blue-rgb), .12),

                inset 0 0 32px
                rgba(var(--blue-rgb), .06);
        }

        .blue-network .team-photo {

            border-color:
                rgba(var(--cyan-rgb), .95);

            box-shadow:
                0 0 22px
                rgba(var(--blue-light-rgb), .55),

                0 0 42px
                rgba(var(--blue-rgb), .18);
        }

        /* =========================================
           CARTES À VENIR
        ========================================= */

        .pending {

            opacity:
                .78;

            border-color:
                rgba(110,135,155,.32);

            background:
                linear-gradient(
                    145deg,
                    rgba(12,22,33,.78),
                    rgba(3,8,15,.88)
                );
        }

        .pending:hover {

            border-color:
                rgba(100,190,220,.48);
        }

        .pending .team-photo {

            border-color:
                rgba(130,155,175,.38);

            box-shadow:
                0 0 18px
                rgba(0,110,180,.15);
        }

        .pending .team-photo img {

            padding:
                18px;

            filter:
                drop-shadow(
                    0 0 10px
                    rgba(var(--blue-rgb), .45)
                );
        }

        .pending .status-dot {

            background:
                #9aa8b7;

            box-shadow:
                0 0 7px
                rgba(154,168,183,.45);
        }

        .pending .team-status {

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

        /* =========================================
           PHRASE
        ========================================= */

        .team-quote {

            display:
                flex;

            align-items:
                center;

            justify-content:
                center;

            gap:
                24px;

            margin:
                18px 0 0;

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

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

            font-size:
                15px;

            font-weight:
                600;

            letter-spacing:
                .4px;

            text-align:
                center;
        }

        .team-quote::before,
        .team-quote::after {

            content:
                "";

            width:
                95px;

            height:
                2px;

            background:
                #22cfff;

            box-shadow:
                0 0 10px
                rgba(var(--blue-light-rgb), .75);
        }

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

        .footer {

            height:
                76px;

            position:
                relative;

            z-index:
                10;

            background:
                rgba(1,7,15,.96);
        }

        .footer-line {

            width:
                100%;

            height:
                2px;

            background:
                #159dff;

            box-shadow:
                0 0 12px
                rgba(var(--blue-rgb), .75);
        }

        .footer-content {

            height:
                calc(100% - 2px);

            display:
                flex;

            align-items:
                center;

            justify-content:
                center;

            gap:
                32px;
        }

        .footer-brand {

            display:
                flex;

            align-items:
                center;

            gap:
                12px;
        }

        .footer-created {

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

            font-size:
                12px;

            font-weight:
                600;

            letter-spacing:
                1px;
        }

        .enigma-logo {

            width:
                105px;

            height:
                auto;

            display:
                block;
        }

        .footer-separator {

            width:
                1px;

            height:
                27px;

            background:
                rgba(var(--blue-light-rgb), .75);

            box-shadow:
                0 0 8px
                rgba(var(--blue-light-rgb), .5);
        }

        .footer-copyright {

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

            font-size:
                12px;

            font-weight:
                600;

            letter-spacing:
                1px;
        }

        /* =========================================
           PETIT ÉCRAN
        ========================================= */

        @media (
            max-height: 820px
        )
        and (
            min-width: 1000px
        ) {

            .team-page {

                padding-top:
                    14px;

                padding-bottom:
                    10px;
            }

            .team-header {

                margin-bottom:
                    14px;
            }

            .team-description {

                margin-top:
                    7px;

                font-size:
                    14px;
            }

            .team-card {

                height:
                    205px;

                padding-top:
                    14px;
            }

            .team-photo {

                width:
                    82px;

                height:
                    82px;

                margin-bottom:
                    9px;
            }

            .team-role {

                font-size:
                    10px;
            }

            .team-name {

                font-size:
                    21px;
            }

            .team-status {

                margin-top:
                    6px;
            }

            .team-quote {

                margin-top:
                    10px;
            }
        }

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

        @media (max-width: 1050px) {

            .navigation {

                gap:
                    20px;
            }

            .team-grid {

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

        }

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

        @media (max-width: 650px) {

            .navbar {

                height:
                    auto;

                min-height:
                    62px;

                padding:
                    10px 14px;
            }

            .navigation {

                flex-wrap:
                    wrap;

                gap:
                    12px 20px;
            }

            .navigation a {

                font-size:
                    12px;
            }

            .navigation a[href="/equipe"]::after {

                bottom:
                    -6px;
            }

            .team-page {

                min-height:
                    auto;

                padding:
                    35px 14px 30px;
            }

            .team-header {

                margin-bottom:
                    20px;
            }

            .team-title {

                font-size:
                    46px;
            }

            .team-description {

                font-size:
                    14px;
            }

            .team-grid {

                grid-template-columns:
                    1fr;
            }

            .team-card {

                height:
                    230px;
            }

            .team-quote {

                flex-direction:
                    column;

                gap:
                    8px;

                margin-top:
                    20px;
            }

            .team-quote::before,
            .team-quote::after {

                width:
                    70px;
            }

            .footer {

                height:
                    auto;

                min-height:
                    90px;
            }

            .footer-content {

                flex-direction:
                    column;

                gap:
                    8px;

                padding:
                    10px;
            }

            .footer-separator {

                display:
                    none;
            }

        }