/* =======================
    VARIABLES CSS
======================= */
:root {
    --bg: #FFFFFF;
    --bg-doux: #FFF8F2;

    --text-principal: #2B2527;
    --text-secondaire: #FFF;

    --accent: #FFD1A8;
    --accent-hover: #FFB878;

    --border-soft: #FFE1CC;
    --creme: #FFF6E8;

    --blue-discord: #7289DA;
    --green-github: #2DA44E;
    --blue-linkedin: #0077B5;

    --font-Google_Sans_Flex: "Google Sans Flex", sans-serif;
    --font-Bebas_Neue: "Bebas Neue", sans-serif;
    --font-Playwrite_AT: "Playwrite AT", serif;
}

/* =======================
    FONTS
======================= */
@font-face {
    font-family: Bebas_Neue;
    src: url(../../media/fonts/Bebas_Neue/BebasNeue-Regular.ttf);
}

@font-face {
    font-family: Google_Sans_Flex;
    src: url(../../media/fonts/Google_Sans_Flex/Google_Sans_Flex.ttf);
}

@font-face {
    font-family: Playwrite_AT;
    src: url(../../media/fonts/Playwrite_AT/PlaywriteAT-VariableFont_wght.ttf);
}

/* =======================
    RESET & BASE STYLES
======================= */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

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

body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    background: var(--bg);
    color: var(--text-principal);
    font-family: var(--font-Google_Sans_Flex);
    line-height: 1.6;
}

a {
    text-decoration: none;
    color: inherit;
}

ul {
    list-style: none;
}

main {
    flex: 1;
}

.container {
    max-width: 1200px;
    width: 90%;
    margin: 0 auto;
}

/* =======================
    GLOBAL UI
======================= */

/* CURSOR */
html, p, label {
    cursor: url(../../media/commun/cursors/cursor.svg), auto;
}

a, button {
    cursor: url(../../media/commun/cursors/pointer.svg), auto;
}

textarea, input {
    cursor: url(../../media/commun/cursors/text.svg), auto;
}

/* TEXT SELECTION */
::selection {
    background-color: var(--accent-hover);
    color: var(--text-principal);
}

/* =======================
    SCROLLBAR
======================= */

::-webkit-scrollbar {
    width: 11px;
}

::-webkit-scrollbar-track {
    background: var(--accent);
}

::-webkit-scrollbar-thumb {
    background-color: transparent;
    border-radius: 20px;
    border: 3px solid var(--bg-doux);
    transition: background-color 0.3s ease;
}

body:hover::-webkit-scrollbar-thumb {
    background-color: var(--accent);
}



/* =======================
    MESSAGES
======================= */
.message-erreur {
    text-align: center;
    margin: 1em 0;
    color: #f55145;
    font-weight: 600;
}

.message-avertissement {
    text-align: center;
    margin: 1em 0;
    color: #c48a00;
    font-weight: 600;
}

.messageAuPage {
    /* aligner au centre avec un bon padding et vert pour montre que le mesage est valide et que tou a fonctionne et envoer */  
    text-align: center;
    justify-self: center;
    margin-top: 5px;
    margin-bottom: 7px;
    padding: 15px 20px;
    background-color: #55b559;
    font-weight: 600;
    color: white;
    font-size: 1.1em;
    border-radius: 10px;
}



/* =======================
    HEADER
======================= */
.header {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    text-align: center;
}

#logo {
    padding: 2em 0;
}

.titre {
    font-family: var(--font-Bebas_Neue);
    font-size: 6rem;
    line-height: 1;
}

.slogan {
    font-family: var(--font-Playwrite_AT);
    font-size: 1.5rem;
}

#header-bg {
    background: var(--bg-doux);
    border-bottom: 1px solid var(--border-soft);
    width: 100%;
    overflow: hidden;
    display: flex;
    justify-content: center;
}

#header-bg img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* =======================
    NAVIGATION
======================= */
#entete-menu {
    position: sticky;
    top: 0;
    z-index: 1000;
    background: var(--accent);
    border-bottom: 1px solid var(--border-soft);
    min-height: 4em;
    display: flex;
    align-items: center;
    justify-content: center;
}

.menu-list {
    display: flex;
    align-items: center;
    gap: 1.5em;
}

.menu-list a {
    padding: 0.5em 1.2em;
    transition: all 0.25s ease;
    font-weight: 500;
    white-space: nowrap;
}

.menu-list a:hover {
    color: var(--text-secondaire);
    transform: translateY(-2px);
}

.menu-list li.active a {
    background: var(--accent-hover);
    color: var(--text-secondaire);
    border-radius: 25px;
}

.hamburger {
    display: none;
    cursor: pointer;
    font-size: 2em;
    user-select: none;
}



/* =======================
    FOOTER
======================= */
footer {
    display: flex;
    justify-content: space-around;
    background: var(--accent);
    padding: 0.5em 2em;
    text-align: center;
    border-top: 1px solid var(--border-soft);
    height: auto;
}

footer .media-social {
    flex: 1;
}

footer .credits {
    flex: 2;
}

footer .credits p {
    margin: 0;
}

footer .droite {
    flex: 1;
}

.media-social {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1em;
    font-size: 2em;
}

.media-icon {
    height: 32px;
    width: 32px;
    fill: #777;
    transition: all 0.3s ease;
}

.discord-icon:hover {
    fill: var(--blue-discord);
    scale: 1.1;
}

.github-icon:hover {
    fill: var(--green-github);
    scale: 1.1;
}

.linkedin-icon:hover {
    fill: var(--blue-linkedin);
    scale: 1.1;
}





/* =======================
    MEDIA QUERIES
======================= */
@media (max-width: 1000px) {
    .note {
        flex: 1 1 45%;
    }
}

@media (max-width: 700px) {

    #entete-menu {
        justify-content: flex-end;
    }

    .hamburger {
        display: block;
    }

    .menu-list {
        display: none;
        flex-direction: column;
        position: absolute;
        top: 4em;
        left: 0;
        width: 100%;
        background: var(--accent-hover);
        padding: 1em 0;
        gap: 0;
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    }

    .menu-list.responsive {
        display: flex ;
    }

    .menu-list li {
        width: 100%;
        text-align: center;
    }

    .menu-list a {
        display: block;
        padding: 1em;
    }

    .titre {
        font-size: 4rem;
    }

    .slogan {
        font-size: 1.1rem;
    }

    .note {
        flex: 1 1 90%;
    }

    .media-social {
        flex-direction: column;
        row-gap: 0px;
        padding: 0px;
        margin: 0px;
        font-size: 1em;
    }
}