/* Polices de caractères body et fond du body  */
        body {
            font-family: 'Montserrat', sans-serif;
            background-color: var(--color-5);
        }

        .karla {
            font-family: 'Montserrat', sans-serif
        }

        /* Logo : Taille et espacement des lettres du logo  */

        .arkitek {

            font-size: clamp(2rem, 5vw, 3.3rem);

        }


        @media (max-width: 1200px) {
            .logo h4 {
                font-size: calc(1.275rem + .2vw);
            }
        }




        .letterspacing-xl {
            letter-spacing: clamp(1rem, 1vw, 1.25rem);
        }

        @media (max-width: 576px) {
            .letterspacing-xl {
                letter-spacing: 0rem !important;
            }
        }

        .letterspacing-sm {
            letter-spacing: 0.5rem;
        }

        /* Espaceurs  */

        .espaceur-xl {
            height: 12rem;
        }

        .espaceur-sm {
            height: 6rem;
        }

        .espaceur-xs {
            height: 3rem;
        }



        /* Logo : bordure du logo  */

        .rose-border {
            border-color: var(--color-1) !important;
            border-width: 6px !important;
            max-width: 475px !important;
            margin: auto;

        }


        /* big border & big ARKITEK */

        .big-arkitek {
            border-color: var(--color-1) !important;
            border-width: 1rem !important;
            font-size: 5vw;
            line-height: 5vw;
        }



        /* BOOTSTRAP card hack*/
        .card {
            background-color: transparent;
            border: none !important;
            border-radius: 0 !important;
            ;
        }

        /* BOOTSTRAP card hack*/
        p {
            font-size: 14px !important
        }


        /*BOOTSTRAP margin conteneur hack */

        @media (max-width: 991px) {
            .margin-hack {
                margin-left: 12px !important;
                margin-right: 12px !important;

            }
        }



        @media (min-width: 992px) {
            .margin-hack {
                margin-left: -12px !important;
                margin-right: 12px !important;

            }
        }





        /* Définition des couleurs */



        .rose {
            color: var(--color-1);
        }

        .white {
            color: var(--color-2);
        }

        .lightgray {
            color: var(--color-3);
        }

        .middlegray {
            color: var(--color-4);
        }

        .darkgray {
            color: var(--color-5);
        }

        .colormenu {
            background-color: var(--color-5);
        }


        .sombre {
            background-color: var(--couleur-sombre);

        }

        footer a {
            text-decoration: none;
            color: var(--color-2);
        }

        footer a:hover {
            color: var(--color-1);

        }



        :root {
            /* Couleurs */
            --color-1: #ff0062;
            --color-2: #ffffff;
            --color-3: #b5b5b5;
            --color-4: #5e5e5e;
            --color-5: #14191c;
            --color-6: #b13363;
            --couleur-icone: #182e37;
            --couleur-sombre: #13171a;
            --couleur-card: #121d22;
            --couleur-additionelle: #6681a527;



        }





        .gradient1 {
            background-color: transparent;
            background-image: linear-gradient(45deg, #111618 0%, #2e3f4c 100%);
        }



        .gradient2 {
            background-color: transparent;
            background-image: linear-gradient(45deg, #082b3b 47%, #08425b 71%);

        }


        .gradient3 {
            background-color: transparent;
            background-image: linear-gradient(45deg, #111618 0%, #232d35 100%);
        }



        /* couleurs des boutons primary en variable - ne fonctionne qu'à partir de bootsrap 5.2*/
        .btn-bd-primary {
            /* Définit le poids de la police du bouton. */
            --bs-btn-font-weight: 600;

            /* Définit la couleur du texte du bouton. */
            --bs-btn-color: var(--color-2);

            /* Définit la couleur d'arrière-plan du bouton. */
            --bs-btn-bg: var(--color-1);

            /* Définit la largeur de la bordure du bouton en état non survolé et survolé. */
            --bs-btn-border-width: 2px;

            /* Rend la bordure du bouton transparente. */
            --bs-btn-border-color: transparent;

            /* Définit le rayon de la bordure du bouton pour les coins arrondis. */
            --bs-btn-border-radius: .5rem;

            /* Définit la couleur du texte du bouton lorsqu'il est survolé. */
            --bs-btn-hover-color: var(--color-1);

            /* Définit la couleur d'arrière-plan du bouton lorsqu'il est survolé.  */
            --bs-btn-hover-bg: var(--color-2);

            /* Définit la couleur de la bordure du bouton lorsqu'il est survolé.  */
            --bs-btn-hover-border-color: transparent;

            /* Définit la couleur de l'ombre lors de la mise au point sur le bouton. */
            --bs-btn-focus-shadow-rgb: transparent;

            /* Définit la couleur du texte du bouton lorsqu'il est activé. */
            --bs-btn-active-color: var(--color-2);

            /* Définit la couleur d'arrière-plan du bouton lorsqu'il est activé. */
            --bs-btn-active-bg: var(--color-1);

            /* Définit la couleur de la bordure du bouton lorsqu'il est activé.  */
            --bs-btn-active-border-color: transparent;
        }


        /* les liens de navigation*/

        .nav-link {
            text-align: center;
        }


        ul.navbar-nav {

            padding-right: 0.5rem;
        }

        nav a {


            border-bottom-color: transparent !important;
            border-bottom-width: 10px;
            border-bottom: solid;
        }

        nav a:hover {
            color: var(--color-2);
            text-decoration: none;
            border-bottom-color: var(--color-1) !important;
            border-bottom-width: 10px;
            border-bottom: solid;
        }

        .bg-dark {
            --bs-bg-opacity: 1;
            background-color: rgba(var(--bs-dark-rgb), var(--bs-bg-opacity)) !important;
            background-color: var(--couleur-sombre) !important;
        }

       
        /* survol des icones plateforme social network*/

        .plateforme {
            background-color: var(--color-2);
            border-radius: 7px;
            border-color: var(--color-2) !important;
            border-width: 1px;
            border: solid;

        }

        .plateforme:hover {
            background-color: var(--color-1);
            border-radius: 7px;
            border-color: var(--color-1) !important;
            border-width: 1px;
            border: solid;
        }

       
        /* scroll to top */

        #btn-back-to-top {
            background-color: var(--color-1);
        }

        #btn-back-to-top {
            border: 2px solid transparent !important
        }

        #btn-back-to-top:hover {
            background-color: transparent;
        }

        #btn-back-to-top:hover {
            border: 2px solid var(--color-1) !important
        }



        /* map */ 

        .bordeauxmap {
            width: 100%;
            height: 350px;
        }

        /* video */

        .video-wrapper {
            position: relative;
            width: 100%;
            /* 16:9 Aspect Ratio */
            padding-bottom: 56.25%;
        }

        .video-wrapper iframe,
        .video-cover {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
        }

        .video-cover {
            background-size: cover;
            background-position: center;
            cursor: pointer;
            z-index: 1;
            /* S'assure que la couverture est au-dessus de l'iframe jusqu'à ce qu'elle soit cliquée */
        }


        /* arkitek city */

        .arkitek-city {
            background-image: url(images/arkitek_city/ArkitektCityVector_RGB.svg);
            background-size: cover;
            background-repeat: no-repeat;
            background-position: bottom;
        }


        /* filtre rose */

        .filtre-img {
            filter: sepia(100%) hue-rotate(288deg) saturate(7) brightness(50%);

        }


        /* petite correction  */
        @media (min-width: 1200px) and (max-width: 1400px)
    
        {
            .margin-hack h6 {
             text-align:left !important;
            }
        }