/* defaults */

html,
body {
    font-family: 'terminal-grotesque-webfont';
    margin: 0;
    padding: 0;
    height: 100%;
    background-color: white;
    overflow: hidden;
}

.page {
    height: 100vh;
    position: relative;
    display: flex;
    flex-direction: column;
}

p {
    font-family: 'terminal-grotesque-webfont';
}

a {
    font-family: 'terminal-grotesque-webfont';
}

h3 {
    font-size: 15px;
}

@font-face {
    font-family: 'terminal-grotesque-webfont';
    src: url('../fonts/terminal-grotesque-webfont.woff2') format('woff2');
}

.container {
    font-family: 'terminal-grotesque-webfont';
    font-size: 25px;
    color: black;
    padding-top: 20px;
    line-height: 1.3;
    font-weight: 100;
    text-align: center;
    /* text-transform: uppercase;
		*/
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
    right: 0;
    display: flex;
    justify-content: space-between;
    /* Mettez à jour cette ligne */
    padding: 10px 10px;
    /* Ajustez la marge pour plus d'espace entre les éléments */
}

.container-bis {
    font-family: 'terminal-grotesque-webfont';
    font-size: 25px;
    color: rgb(0, 0, 0);
    line-height: 1.3;
    font-weight: 100;
    text-align: center;
    /* text-transform: uppercase;*/
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
    right: 0;
    display: flex;
    justify-content: space-between;
    /* Mettez à jour cette ligne */
    padding: 10px 10px 0px;
    /* Ajustez la marge pour plus d'espace entre les éléments */
}

@media screen and (max-width: 1000px) {
    p {
        font-size: 20px;
    }
    a {
        font-size: 20px;
    }
    .container {
        font-family: 'terminal-grotesque-webfonts';
        font-size: 13px;
        color: rgb(0, 0, 0);
        text-shadow: none;
        line-height: 1.3;
        font-weight: 100;
        text-align: center;
        /* text-transform: uppercase;
			*/
        position: absolute;
        z-index: 1;
        top: 0;
        left: 0;
        right: 0;
        display: flex;
        justify-content: space-between;
        /* Mettez à jour cette ligne */
        padding: 20px 30px 0px;
        /* Ajustez la marge pour plus d'espace entre les éléments */
    }
    .container-bis {
        font-family: 'terminal-grotesque-webfont';
        font-size: 13px;
        color: rgb(0, 0, 0);
        padding-top: 20px;
        line-height: 1.3;
        font-weight: 100;
        text-align: center;
        /* text-transform: uppercase;
		*/
        position: absolute;
        z-index: 1;
        top: 0;
        left: 0;
        right: 0;
        display: flex;
        justify-content: space-between;
        /* Mettez à jour cette ligne */
        padding: 20px 30px;
        /* Ajustez la marge pour plus d'espace entre les éléments */
    }
}

.header_left {
    text-align: left;
    color: black;
    background-color: yellow;
    margin: 10px;
    border-right: 10px solid yellow;
    border-left: 10px solid yellow;
}

.header_right {
    text-align: right;
    color: black;
    background-color: yellow;
    margin: 10px;
    border-right: 10px solid yellow;
    border-left: 10px solid yellow;
    ;
}

.header_left_about {
    text-align: left;
    color: black;
    background-color: white;
    margin: 10px;
    border: 10px solid white;
    text-decoration: underline solid 5px;
}

.header_right_about {
    text-align: right;
    color: black;
    background-color: white;
    margin: 10px;
    border: 10px solid white;
}

.container2 {
    position: absolute;
    top: 90%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-family: 'terminal-grotesque-webfont';
    font-size: 15px;
    color: black;
    background-color: yellow;
    margin: 0px;
    border: 10px solid yellow;
    line-height: 1;
    font-weight: 200;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
}

@media screen and (max-width: 1000px) {
    .container2 {
        font-family: 'terminal-grotesque-webfont';
        font-size: 8px;
        color: rgb(0, 0, 0);
        line-height: 1;
        font-weight: 200;
        background-color: white;
        margin: 0px;
        border: 10px solid white;
        text-align: center;
        position: absolute;
        top: 90%;
        z-index: 1;
        display: flex;
        justify-content: center;
        /* Ajustez ici pour centrer horizontalement */
        align-items: center;
        /* Ajoutez ceci pour centrer verticalement */
    }
    .header_left {
        text-align: left;
        color: black;
        background-color: white;
        margin: 10px;
        border: 10px solid white;
    }
    .header_right {
        text-align: right;
        color: black;
        background-color: white;
        margin: 10px;
        border: 10px solid white;
    }
}

.bottom-container {
    font-family: 'terminal-grotesque-webfont';
    font-size: 15px;
    color: rgb(0, 0, 0);
    padding-bottom: 100px;
    line-height: 1;
    font-weight: 200;
    text-align: center;
    position: absolute;
    z-index: 1;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    justify-content: center;
    /* Ajustez ici pour centrer horizontalement */
    align-items: center;
    /* Ajoutez ceci pour centrer verticalement */
}

@media screen and (max-width: 1000px) {
    .bottom-container {
        font-family: 'terminal-grotesque-webfont';
        font-size: 10px;
        color: rgb(0, 0, 0);
        padding-bottom: 100px;
        line-height: 1;
        font-weight: 200;
        text-align: center;
        position: absolute;
        z-index: 1;
        background-color: white;
        margin: 0px;
        border: 10px solid white;
        left: 0;
        right: 0;
        display: flex;
        justify-content: center;
        /* Ajustez ici pour centrer horizontalement */
        align-items: center;
        /* Ajoutez ceci pour centrer verticalement */
    }
}

.centered-container {
    font-family: 'terminal-grotesque-webfont';
    font-size: 19px;
    color: rgb(0, 0, 0);
    padding-bottom: 20px;
    line-height: 1.3;
    font-weight: 200;
    text-align: left;
    position: absolute;
    z-index: 1;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    justify-content: center;
    /* Ajustez ici pour centrer horizontalement */
    align-items: center;
    /* Ajoutez ceci pour centrer verticalement */
}

.custom-link {
    color: rgb(0, 0, 0);
    text-decoration: underline;
}

.custom-link:hover {
    color: rgb(135, 135, 135);
}

.custom-link-about {
    text-decoration: none;
    color: black;
    text-decoration-thickness: 10px;
}

.custom-link-about:hover {
    color: red;
}

@media screen and (max-width: 1000px) {
    .custom-link-about {
        text-decoration: none;
        color: rgb(0, 0, 0);
        text-shadow: none;
    }
    .custom-link-about:hover {
        color: red;
    }
}

.custom-link {
    color: rgb(0, 0, 0);
    text-decoration: none;
}

.custom-link:hover {
    color: red;
}

.carousel {
    margin: 0;
    padding: 0;
    background-color: rgb(255, 255, 255);
    flex: 1;
    /* Le carrousel prend tout l'espace disponible */
}

.carousel-cell {
    width: auto;
    height: 100vh;
    align-items: center;
    align-content: center;
    overflow: hidden;
}

.carousel-cell img,
.carousel-cell video {
    width: auto;
    height: 100%;
    object-fit: cover;
    margin: 0;
    padding: 0;
}

.carousel-container {
    display: flex;
    justify-content: center;
    /* Centre les éléments horizontalement */
    align-items: center;
    /* Centre les éléments verticalement, si nécessaire */
    overflow: hidden;
    /* Évite les débordements */
}

@media (max-width: 1000px) {
    .carousel-cell {
        width: 100%;
        margin: 0;
        padding: 0;
        align-items: center;
        align-content: center;
    }
    .carousel-cell img,
    .carousel-cell video {
        width: 100%;
        max-width: 100%;
        /* Assure que l'élément ne dépasse pas la largeur de son conteneur */
        height: auto;
        object-fit: cover;
        /* Ajuste selon vos besoins */
    }
}

.About p {
    color: rgb(0, 0, 0);
}


/* Styles pour les flèches de navigation */

.flickity-prev-next-button {
    background: none;
    color: #ffffff;
    font-size: 18px;
    width: 4%;
    height: 4%;
    line-height: 40px;
    /* Centrer verticalement la flèche */
    border-radius: 0;
    /* Enlever le cercle */
    box-shadow: none;
    /* Supprimer l'ombre par défaut */
    mix-blend-mode: exclusion;
}

.flickity-prev-next-button:hover {
    background-color: transparent;
}

.fleche {
    transform: rotate(-45deg);
    position: absolute;
    margin-left: 50%;
    border-left: 0.8vh solid rgb(255, 255, 255);
    border-bottom: 0.8vh solid rgb(255, 255, 255);
    width: 6vh;
    height: 6vh;
}

@media screen and (max-width: 1000px) {
    .flickity-prev-next-button {
        background: none;
        color: #ffffff;
        font-size: 18px;
        width: 7%;
        height: 7%;
    }
}

.carousel-cell {
    transition: opacity 0.5s ease, filter 0.5s ease;
}

.carousel-cell.inactive {
    filter: brightness(100%);
    /* Darker effect for inactive cells */
}

.carousel-cell.active {
    filter: brightness(100%);
    /* Full brightness for the active cell */
}

.parent {
    display: flex;
    flex-direction: column;
    /* tout à la suite verticalement */
    align-items: center;
    /* centre horizontalement */
    justify-content: flex-start;
    /* commence depuis le haut */
    min-height: 100vh;
    /* occupe toute la hauteur de la page */
    text-align: center;
    /* centre le texte */
    font-family: 'terminal-grotesque-webfont';
    color: white;
    padding-top: 20px;
    line-height: 1.4;
    font-weight: 100;
}

.GD {
    color: black;
    margin-bottom: 20px;
    font-weight: 400;
    font-size: 30px;
    background-color: yellow;
    border-right: 20px solid yellow;
    border-left: 20px solid yellow;
}

.top_about {
    margin: 20vh;
}

.categorie1 {
    margin-bottom: 60px;
    color: rgb(133, 133, 133);
    font-size: 15px;
    line-height: 1.3;
    /* text-transform: uppercase; */
}

.list1 {
    color: black;
    font-size: 30px;
    margin-bottom: 60px;
    max-width: 1000px;
    /* limite la largeur pour une meilleure lecture */
    text-align: left;
    /* aligne le texte à gauche si tu préfères */
    line-height: 1
}

@media screen and (max-width: 1000px) {
    .GD {
        margin-bottom: 15px;
        font-weight: 400;
        font-size: 30px;
    }
    .categorie1 {
        margin-bottom: 20px;
        color: rgb(133, 133, 133);
        font-size: 11px;
        line-height: 1.3;
        max-width: 300px;
        /* text-transform: uppercase; */
    }
    .list1 {
        font-size: 16px;
        margin-bottom: 20px;
        max-width: 350px;
        /* limite la largeur pour une meilleure lecture */
        line-height: 1;
    }
}