/*
        |--------------------------------------------------------------------------
        | NAVIGATION
        |--------------------------------------------------------------------------
        */

        .navbar {

            background: #ffffff;

            border-bottom: 1px solid #e5e5e5;

        }


        .navbar-brand img {

            height: 58px;

            width: auto;

            display: block;

        }


        .navbar-nav .nav-link {

            color: var(--vert-gravel);

            font-weight: 600;

            margin-left: 15px;

        }


        .navbar-nav .nav-link:hover {

            color: #000000;

        }

/*
        |--------------------------------------------------------------------------
        | HERO
        |--------------------------------------------------------------------------
        */

        .hero {

            min-height: 520px;

            display: flex;

            align-items: center;

            justify-content: center;

            text-align: center;

            color: white;

            background:

                linear-gradient(
                    rgba(0,0,0,0.30),
                    rgba(0,0,0,0.55)
                ),

                url('../images/hero-font.jpg')
                center center /
                cover
                no-repeat;

        }


        .hero h1 {
                font-family: 'Bebas Neue', sans-serif;
                font-size: 5rem;
                font-weight: 400;
                letter-spacing: 4px;
        }


        .hero p {

            font-size: 1.4rem;

            margin-bottom: 30px;

        }


        .btn-gravel {

            display: inline-block;
    background-color: #1f451a;
    color: #ffffff;
    border: 2px solid #1f451a;
    padding: 12px 25px;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 600;

        }


        .btn-gravel:hover {

             background-color: #ffffff;
    color: #1f451a;
    border-color: #ffffff;

        }

        


        /*
        |--------------------------------------------------------------------------
        | TITRES
        |--------------------------------------------------------------------------
        */

        .section-title {

            color: var(--vert-gravel);

            font-weight: 800;

        }


        /*
        |--------------------------------------------------------------------------
        | CARTE
        |--------------------------------------------------------------------------
        */

        #map {

            height: 500px;

            width: 100%;

            border-radius: 18px;

            overflow: hidden;

            box-shadow:
                0 5px 20px rgba(0,0,0,0.12);

        }


        /*
        |--------------------------------------------------------------------------
        | CARTES DES PARCOURS
        |--------------------------------------------------------------------------
        */

        .parcours-card {

            background: white;

            border: none;

            border-radius: 18px;

            overflow: hidden;

            height: 100%;

            box-shadow:
                0 5px 20px rgba(0,0,0,0.08);

            transition:
                transform 0.25s ease,
                box-shadow 0.25s ease;

        }


        .parcours-card:hover {

            transform: translateY(-5px);

            box-shadow:
                0 10px 30px rgba(0,0,0,0.14);

        }


        .parcours-card img {

            width: 100%;

            height: 220px;

            object-fit: cover;

        }


        /*
        |--------------------------------------------------------------------------
        | ICONES
        |--------------------------------------------------------------------------
        */

        .type-icon {

            width: 55px;

            height: 55px;

            flex-shrink: 0;

            display: flex;

            align-items: center;

            justify-content: center;

            background: var(--vert-clair);

            color: var(--vert-gravel);

            border-radius: 50%;

            font-size: 1.55rem;

        }


        /*
        | Icône montagne légèrement plus grande
        */

        .type-icon.montagne {

            font-size: 1.8rem;

        }


        .parcours-title {

            color: var(--vert-gravel);

            font-weight: 700;

        }


        .info-parcours {

            color: #666;

            font-size: 0.95rem;

        }


        /*
        |--------------------------------------------------------------------------
        | STATISTIQUES
        |--------------------------------------------------------------------------
        */

        .stat {

            background: var(--vert-clair);

            border-radius: 10px;

            padding: 10px;

            text-align: center;

        }


        .stat strong {

            display: block;

            color: var(--vert-gravel);

            font-size: 1.1rem;

        }


        .stat small {

            color: #666;

        }