:root {
    --primary-color: #f9a826;
    --secondary-color: #f7d078;
    --background-color: #fcf4e2;
    --text-color1: #333333;
    --text-color2: #ffffff;
    --accent-color: #d32f2f;
}

html {
    font-family: sans-serif;
    background-color: var(--background-color);
    /*taile de la page html max*/
    max-width: 98%;

}

/*debut nav bar*/
/*debut nav bar*/
header {
    background: linear-gradient(to bottom, var(--primary-color), var(--secondary-color));
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 100;
    color: var(--text-color2);
}

nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 13vh;
    font-size: 2.2vh;
    padding: auto;
}

nav ul {
    display: flex;
    list-style: none;
    padding: 20px;
}

nav ul li {
    margin: 1vh 2vw;
    height: 11vh;
}

nav ul li a {
    position: relative;
    color: var(--text-color2);
    text-decoration: none;
    transition: all 0.3s ease;
}

nav ul li a::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 0.4vh;
    border-radius: 2px;
    bottom: -0.5vh;
    left: 0;
    background-color: var(--accent-color);
    transform: scaleX(0);
    transition: transform 0.5s ease;
}

nav ul li a:hover::after {
    transform: scaleX(1);
}

header #navigation-1 ul li img {
    width: 10.5vh;
    height: 10.5vh;
    border-radius: 50%;
}

/* fin nav bar*/
main {
    margin-top: 18vh;
    margin-bottom: 8vh;
}

/*footer*/
footer {
    display: flex;
    height: 6vh;
    font-size: 2.2vh;
    background: linear-gradient(to bottom, var(--primary-color), var(--secondary-color));
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: 100;
    color: var(--text-color1);
}

footer ul {
    list-style: none;
}

footer ul li a {
    position: relative;
    color: var(--text-color1);
    text-decoration: none;
    transition: all 0.3s ease;

}

footer ul li a::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 0.4vh;
    border-radius: 2px;
    bottom: -0.5vh;
    left: 0;
    background-color: var(--accent-color);
    transform: scaleX(0);
    transition: transform 0.5s ease;
}

footer ul li a:hover::after {
    transform: scaleX(1);
}

/*footer*/
section.Mention {
    margin: 0 auto;
    background: rgba(252, 253, 199, 0.425);
    border-radius: 2vw;
    box-shadow: 0 4px 3vh rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(0.46vw);
    -webkit-backdrop-filter: blur(0.46vw);
    border: 0.1vw solid rgba(253, 237, 199, 0.36);
    padding-bottom: 5vh;
}

section.Mention h2 {
    font-size: 3.5vh;
    text-align: center;
    padding: 2vh;
}

section.Mention ul {
    list-style: none;
    margin: 1vh auto;
}

section.Mention ul li {
    font-size: 2.5vh;
    margin: 1vh auto;
    text-align: center;
}

section.Mention ul li span {
    /*soulignement*/
    text-decoration: underline;
}