@font-face {
  font-family: 'Poppins';
  src: url('../fonts/Poppins/Poppins-Regular.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Roboto';
  src: url('../fonts/Roboto/static/Roboto-Regular.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

* {
    font-family: 'Poppins', sans-serif;
}

body { 
    margin: 0; background: #fafafa;}
        .top-bar {
            background: #242424;
            color: #fff;
            padding: 16px 32px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 15px 30px !important;
        }
        .logo-container {
            display: flex;
            align-items: center;
        }

        .top-bar .logo-image {
            width: 130px;
            height: 80px;
            border-radius: 50%;
            margin-right: 16px;
        }
        .top-bar .logo {
            font-size: 1.3em;
            letter-spacing: 1px;
        }
        .nav-link {
            color: #fff !important;
            text-decoration: none;
            font-size: 1.1em;
            margin-left: 24px;
        }
        .top-bar p:first-child {
            margin: 0;
            font-weight: bold;
            color: #1c6acc;
        }
        .top-bar p:last-child {
            margin: 0;
            font-size: 0.7em;
            color: #919191;
        }
        .top-bar nav .menu-item {
            color: #fff;
            text-decoration: none;
            margin-left: 24px;
            font-size: 1em;
        }
        .dropdown-item {
            padding: 8px 16px;
            color: #333;
            text-decoration: none;
            display: block;
        }
        .top-bar nav a:hover {
            text-decoration: underline;
        }
        .navbar-brand .logo-image {
            width: 130px;
            height: 80px;
            border-radius: 50%;
        }
        .dropdown-menu {
            padding: 20px 20px 20px 10px !important;
        }
        .dropdown-menu li {
            padding: 5px 0;
        }
        .logo p {
            margin: 0;
        }
        main {
            min-height: 60vh;
            padding: 40px 32px;
            text-align: center;
        }
        /* Carousel image effet */
    .carousel-img {
        filter: brightness(0.92) contrast(1.08) saturate(1.1);
        transition: transform 0.7s cubic-bezier(.23,1.02,.38,1.01);
    }
    .carousel-item.active .carousel-img {
        transform: scale(1.04);
        box-shadow: 0 8px 32px rgba(44,62,80,0.18);
    }

    .carousel-inner {
        max-height: 60vh; /* 60% de la hauteur visible de l'écran */
    }

    .carousel-img {
        height: 60vh;
        object-fit: contain;
    }

    /* Présentation section */
    .presentation-section {
        background: linear-gradient(120deg, #f1f2f6 60%, #dfe6e9 100%);
        border-left: 8px solid #0984e3;
        border-right: 8px solid #0984e3;
    }

    /* Menu boutons originaux */
    .menu-btn {
        background: rgb(224, 223, 223) !important;
        color: black !important;
        font-weight: 500;
        border: none;
        border-radius: 2rem;
        box-shadow: 0 2px 8px rgba(44,62,80,0.08);
        padding: 0.75rem 2rem;
        font-size: 1.1rem;
    }
    .menu-btn:hover, .menu-btn:focus {
        background: rgb(199, 198, 198) !important;
        transform: translateY(-3px) scale(1.04);
        box-shadow: 0 4px 16px rgba(44,62,80,0.16);
        text-decoration: none;
    }
        footer {
            background: #242424;
            color: #ccc;
            text-align: center;
            padding: 18px 0;
            font-size: 0.95em;
            position: relative;
            bottom: 0;
            width: 100%;
        }

        @media screen and (max-width: 768px) {
            .top-bar nav {
                margin-top: 8px;
            }
            .top-bar .logo-image {
                width: 100px;
                height: 60px;
            }
            .top-bar p:first-child {
                font-size: 1.1em;
            }
            .top-bar p:last-child {
                font-size: 0.8em;
            }
        }