* {
    margin: 0;
}

body{
    font-family: "Avenir Next W01", sans-serif;
    font-size: 1rem;
	background-color: #ffffff; 
    color: #222222;
}

header, footer {
	background-color: #e6eeee;
	color: #222222;
    width: 100%;
}
header{
    /* position: relative; */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    /*height: 40px;*/
    height: 80px;
    z-index: 1000;

    display: flex;
    align-items: center;
    border-bottom: 2px solid #f98c37;


}

nav{
    /*position: fixed;*/
    /*top: 40px; !* juste en dessous du header *!*/
    /*left: 0;*/
    /*width: 100%;*/
    /*height: 35px;*/
    /*z-index: 999;*/
    /*padding-bottom: 10px;*/
    /*border-bottom: 2px solid #f98c37;*/

    display: flex;
    align-items: center;
    height: 100%;
}

/*.header-content {*/
/*    display: flex;*/
/*    justify-content: space-between;*/
/*    align-items: center;*/
/*    width: 100%;*/
/*    padding: 0 20px;*/
/*    */
/*}*/

.header-content {
    display: grid;
    /*grid-template-columns: 1fr auto; */ /* Colonne 1 = contenu, colonne 2 = logo */
    grid-template-rows: auto auto;   /* Ligne 1 = h1, ligne 2 = nav */
    gap: 0;
    width: 100%;
    padding: 0 20px;
    background-color: #e6eeee;
    align-items: center;
    border-bottom: 2px solid #f98c37;
}
.header-top {
    grid-column: 1;
    grid-row: 1;
    padding: 10px 0;
}

.nav-container {
    grid-column: 2;
    grid-row: 2;
    display: flex;
    align-items: center;
}


.header-text {
    flex-grow: 1;
}

.header-nav{
    display: flex;
    align-items: center;
    flex-direction: column;
}

.logo-container {
    grid-column: 1;
    grid-row: 1 / span 2; /* Prend les 2 lignes */
    display: flex;
    align-items: center;
    justify-content: center;
    padding : 20px 0 0 20px;
}

.logo {
    max-height: 60px; /* Ajustez cette valeur selon vos besoins */
    /*margin-left: auto; */ /* Pour pousser l'image à droite */
    margin-right: auto; /* Pour pousser l'image à droite */
    padding-right: 10px; /* Ajoutez un peu d'espace à droite si nécessaire */
}

main{
    padding-top: 90px;
    padding-bottom: 25px;
}

footer{
    position: fixed;
	/* background-color: #e6eeee; */
	/* color: #222222; */
	border-top: 2px solid #f98c37;
    /* position: relative; */
    bottom: 0px; 
    height: 25px;
    text-align: center;
}

h1, h2, h3, h4, h5, h6{
    font-family: "Trade Gothic W01", sans-serif;
}

h1{
    font-size: 2em;
}
h2{
    font-size: 1.5em;
}
h3{
    font-size: 1.17em;
}

.body-center{
    width: auto;
	margin: 0 auto;

    padding: 20px 30px;
    border-radius: 8px;
    max-width: 800px;

}

.body-center h2 {
    max-width: 800px;
    min-width: 300px;
    /* width: 100%; */
    margin: 5px auto 5px auto;
    text-align: left;
    padding: 0 5px;
}

.body-center .form-group {
    margin-bottom: 15px;
}
.body-center label {
    /* display: block; */
    font-weight: bold;
    margin-bottom: 5px;
    /* color: #555555; */
}
.body-center input,
.body-center textarea {
    width: 100%;
    padding: 8px;
    border: 1px solid #cccccc;
    border-radius: 5px;
    font-size: 16px;
}
.body-center textarea {
    resize: vertical;
    min-height: 100px;
}
.body-center button {
    display: block;
    width: 100%;
    background: #3498db;
    color: #ffffff;
    border: none;
    padding: 10px 15px;
    font-size: 18px;
    border-radius: 5px;
    cursor: pointer;
    margin-top: 10px;
}

.body-center button:hover {
    background: #2980b9;
}

.body-center .note {
    font-size: 14px;
    color: #666666;
    margin-top: 15px;
    text-align: center;
}

.container {
    padding: 20px;
}
.container-title {
    text-align: center;
    /*margin-bottom: 20px;*/
}
.container-image-and-text {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.container-text-and-image {
    display: flex;
    flex-direction: column-reverse;
    align-items: center;
}

.container-image-and-text img {
    max-width: 200px;
}
.container-text-and-image img {
    max-width: 150px;
}

#keyword {
    font-weight: bold;
}

.burger-menu {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    width: 30px;
    height: 30px;
    background: transparent;
    border: none;
    cursor: pointer;
    z-index: 10; /* Assure qu'il soit au-dessus*/
    position: absolute;
    right: 20px;
}

.burger-menu span {
    display: block;
    width: 100%;
    height: 3px;
    /* background-color: #F7F7F6; */
    background-color: #222222;
    transition: 0.3s;
}

.menu {
    list-style: none;
    display: none; /* Masqué par défaut */
    position: absolute;
    top: 100%;
    width: unset;
    /*left: 20px;*/
    right: 20px;
    background-color: #F7F7F6;
    padding: 1em;
    border-radius: 8px;
}

.menu li {
    margin: 10px 0;
}

.menu li a {
    /* color: #009FAD; */
    color: #222222;
    text-decoration: none;
    /* font-size: 1.2em; */
}

/* Afficher le menu en mode mobile */
.menu.show {
	border:  2px solid #f98c37;
    display: block;
}

/* Styles pour les écrans larges */
/* and (min-width: 768px) and*/
@media (min-width: 768px) {
    .burger-menu {
        display: none; 
    }

    .menu {
        display: flex;
        position: static;
        width: 100%;
        justify-content: space-around;
        background-color: transparent;
    }

    .menu li {
        margin: 0 15px;
    }

    .menu li a {
        /* color: #F7F7F6; */
        color: #222222;
    }

    .logo {
        max-height: 90px;
    }

    .container-image-and-text, .container-text-and-image {
        flex-direction: row;
        align-items: center;
    }
    .container-image-content {
        flex: 1;
        max-width: 225px;
        /*padding-right: 20px;*/
    }
    .container-text-content {
        flex: 1;
    }
}

.shadow-on-scroll {
	/* box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2); */
	opacity: 0.6;
	transition: box-shadow 0.3s ease-in-out, opacity 0.3s ease-in-out;
}