@media (max-width: 768px) {

    html,
    body {
        overflow-x: hidden;
        height: 100%;
        width: 100vw;
        padding: 0;
        margin: 0;
        scrollbar-width: thin;
        scrollbar-color: rgb(128, 128, 128) rgb(64, 64, 64);
    }

    body {
        background: linear-gradient(to top, #8fa6cc 0%, #dce6f5 50%);
        font-family: 'Poppins', Arial, sans-serif;
        color: #333;
        line-height: 1.6;
        transition: background-color 0.3s ease;
    }

    body.darkmode {
        background: linear-gradient(to top, #1a1a2e 0%, #3a3a50 50%);
        color: #e0e0e0;
    }

    /* Barre de navigation */
    .navbar {
        position: fixed;
        z-index: 1000;
        background-color: rgba(248, 248, 255, 0.9);
        height: 4em;
        width: 100%;
        display: flex;
        flex-direction: row;
        align-items: center;
        transition: background-color 0.3s ease-in-out;
        box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
    }

    .darkmode .navbar {
        color: #E0E0E0;
        background-color: rgba(24, 24, 29, 0.95);
        box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.5);
    }

    /* Logo */
    .logo {
        height: 100%;
        width: 20%;
        background-image: url(images/logo_hrn.png);
        background-repeat: no-repeat;
        background-size: contain;
        transition: transform 0.5s ease;
    }

    .darkmode .logo {
        background-image: url(images/logo_hrn_darkmode.png);
    }

    /* Boutons */
    .btn_right {
        width: 80%;
        display: flex;
        justify-content: flex-end;
        align-items: center;
        padding-right: 1em;
        gap: 2em;
    }

    .btn {
        border: none;
        background: none;
    }

    .btn_a {
        color: #212121;
        cursor: pointer;
        height: 2em;
        width: 7em;
        text-decoration: none;
        font-size: 1.2em;
        transition: color 0.3s ease;
    }

    .btn_a:hover {
        color: #0078D7;
    }

    .darkmode .btn_a {
        color: #E0E0E0;
    }

    .darkmode .btn_a:hover {
        color: #ff820d;
    }

    .btn_a:hover {
        text-shadow: 0px 1px 5px rgba(255, 255, 255, 0.5);
    }

    /* Burger icon */
    .burger {
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        width: 2em;
        height: 1.5em;
        cursor: pointer;
    }

    .burger span {
        display: block;
        width: 100%;
        height: 3px;
        background-color: black;
    }

    .darkmode span {
        background-color: #E0E0E0;
    }

    /* Dropdown menu */
    .dropdown {
        display: none;
        flex-direction: column;
        background-color: rgba(248, 248, 255, 0.9);
        position: absolute;
        top: 4em;
        right: 1em;
        width: 12em;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        border-radius: 0.5em;
        z-index: 100;
        color: #212121;
        transition: background-color 0.3s ease-in-out;
    }

    .darkmode .dropdown {
        color: #E0E0E0;
        background-color: rgba(24, 24, 29, 0.95);
    }

    .dropdown a {
        padding: 1em;
        text-decoration: none;
    }

    .menu.active .dropdown {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        padding: 1em;
        gap: 1em;
    }

    .languages {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
    }

    /* Toggle pour le DarkMode */
    .toggle {
        appearance: none;
        position: relative;
        display: inline-block;
        box-sizing: content-box;
        height: 2em;
        width: 4.5em;
        padding: 0.2em;
        border: none;
        border-radius: 1.5em;
        overflow: hidden;
        background-color: #4CAF50;
        cursor: pointer;
        text-align: center;
        transition: background 0.3s ease;
    }

    .toggle:before {
        content: "☽ ☼";
        display: block;
        position: absolute;
        z-index: 2;
        height: 2em;
        width: 2em;
        font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
        font-size: 1em;
        line-height: 2em;
        font-weight: 500;
        text-transform: uppercase;
        text-indent: -1.5em;
        word-spacing: 3em;
        text-shadow: -1px -1px rgba(0, 0, 0, 0.2);
        white-space: nowrap;
        background: #FFFFFF;
        color: #212121;
        border-radius: 1.5em;
        transition: transform 0.5s cubic-bezier(0.3, 1.5, 0.7, 1);
    }

    .toggle:checked {
        background-color: #2c3e50;
    }

    .toggle:checked::before {
        transform: translateX(2.5em);
    }

    .footer {
        display: flex;
        flex-direction: column;
        align-items: center;
        background-color: rgba(248, 248, 255, 0.9);
        padding: 1.5em;
        margin-top: 2em;
        border-top: 2px solid rgba(0, 0, 0, 0.1);
        color: #2c3e50;
        font-size: 1em;
    }

    .darkmode .footer {
        background-color: #2c3e50;
        color: #e0e0e0;
    }

    .footer p {
        margin: 0.5em 0;
    }

    .footer a {
        color: #e67e22;
        text-decoration: none;
        font-weight: bold;
    }

    .footer a:hover {
        text-decoration: underline;
    }
}