/*________________TYPO________________*/
@font-face {
    font-family: 'KiwiSoda';
    src: url('font/KiwiSoda.woff') format('woff');
}

/*_______________BODY________________*/

* {
    box-sizing: border-box;
}

a {
    color: inherit; /* Inhère la couleur du parent, évite de spécifier une couleur de lien spécifique */
    text-decoration: none; /* Supprime le soulignement */
}

.draggable {
    cursor: move; /* Change le curseur pour indiquer que l'image est déplaçable */
    position: absolute; /* Permet de déplacer l'image */
    user-select: none; /* Empêche la sélection de texte pendant le déplacement */
}

body {
    font-family: sans-serif;
    line-height: 1.3;
    background: linear-gradient(to bottom, #FFF800, #FFBC02);
    /* background: url('../images/interface/backgroundday.jpg') no-repeat bottom center fixed; */
    /* margin: 0; */
    /* background-size: 100% 100%; */
}

/*_______________BODY MODE NUIT________________*/
body.night-mode {
    background: linear-gradient(to bottom, #890E4F, #E59500);
    color: yellow;
}

body.night-mode a {
    color: yellow;
}

/*________________HEADER________________*/
header {
    font-weight: bold;
    font-size: 15px;
    position: fixed;
    top: 0;
    height: 50px;
    width: 100vw;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 50px;
    bottom: 50px;
    box-sizing: border-box;
}
.left,
.right {
    display: flex;
    gap: 100px /* Ajuste l'espacement entre les liens de gauche et de droite */
}

/*.center a:hover{
      color: #FFBC02;
}*/

header a {
    color: black;
    text-decoration: none;
    position: relative; /* Nécessaire pour le pseudo-élément */
}

/* Changer la police au hover */
header a:hover {
}
    /*_______________HEADER NIGHT________________*/
    body.night-mode header a {
        color: yellow; /* Couleur des liens en mode nuit */
    }

/*________________CONTENT BOX________________*/
.content {
    position: absolute;
    top: 50%; /* Positionne la boîte à 50% de la hauteur de l'écran */
    left: 50%; /* Positionne la boîte à 50% de la largeur de l'écran */
    height: 80vh; /* Hauteur de la boîte */
    width: 80%; /* Largeur de la boîte */
    transform: translate(-50%, -50%); /* Centre la boîte en ajustant son positionnement */
    box-sizing: border-box; /* Inclut le padding et la bordure dans la hauteur/largeur */
    overflow: auto;
     scrollbar-width: none; /* Pour Firefox */
  -ms-overflow-style: none; /* Pour Internet Explorer et Edge */
}
.content::-webkit-scrollbar {
  display: none; /* Pour Chrome, Safari, et Opera */
}


.contentnoscroll {
    position: absolute;
    top: 50%; /* Positionne la boîte à 50% de la hauteur de l'écran */
    left: 50%; /* Positionne la boîte à 50% de la largeur de l'écran */
    height: 80vh; /* Hauteur de la boîte */
    width: 80%; /* Largeur de la boîte */
    transform: translate(-50%, -50%); /* Centre la boîte en ajustant son positionnement */
    box-sizing: border-box; /* Inclut le padding et la bordure dans la hauteur/largeur */
    overflow: hidden;
}



/*________________CAROUSEL________________*/
.carrouselprojects {
    width: 100%;
    max-height: 600px; /* Définit une hauteur maximale pour le conteneur */
    overflow: hidden;
}

.gallery {
    width: 100%;
    height: 100%;
    position: relative;
}

.gallery-cell {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

.gallery-cell img {
    height: 100%; /* Ajuste la hauteur de l'image à celle du conteneur */
    width: auto; /* Maintient le ratio en ajustant seulement la largeur */
    object-fit: contain; /* Centre l'image dans le conteneur sans la recadrer */
}
/*________________FLECHES CAROUSEL________________*/
.flickity-prev-next-button {
    width: 60px;
    height: 60px;
    background: transparent;
    position: absolute;
    top: 50%; /* Centre verticalement */
    transform: translateY(-50%); /* Centre parfaitement */
 }

/* Place les flèches à l'interrieur de la gallery */
.flickity-prev-next-button.previous {left: 5px; }
.flickity-prev-next-button.next {right: 5px;}

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

.flickity-prev-next-button .arrow {
    fill: yellow;
}

.flickity-page-dots {
    display: none; /* Masque les points de pagination */
}

/*________________PAGE WORK________________*/

#project-grid {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    transition: transform 0.3s ease;
}

.project-item {
    width: 100%;
    overflow: hidden;
}

.project-item a {
    text-decoration: none;
    color: inherit;
    display: block; /* S'assure que le lien englobe l'image et l'aside */
}

.project-item figure {
    width: 100%;
    aspect-ratio: 4 / 3; /* Garde l'image au bon ratio */
    margin: 0;
    display: flex; /* Centre le contenu */
    justify-content: center;
    align-items: center;
    position: relative; /* Nécessaire pour positionner l'image */
}

/*____IMG_______*/
.project-item figure img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0; /* Cache l'image par défaut */
    transition: opacity 0.3s ease; /* Transition fluide */
    position: absolute; /* Positionne l'image au-dessus de l'emoji */
}

.project-item figure:hover img {
    opacity: 1; /* Affiche l'image lors du survol */
}

/*____EMOJI_______*/
.project-item figure .emoji {
    font-size: 8rem; /* Taille de l’emoji, ajustable */
    transition: transform 0.3s ease, opacity 0.3s ease; /* Transition fluide */
    position: absolute; /* Permet de superposer l'emoji */
}

.project-item figure:hover .emoji {
    opacity: 0; /* Cache l'emoji au survol */
}


.project-item aside {
    padding-top: 10px; /* Pour ajouter un peu de marge intérieure */
}

.project-item aside h3 {
    font-weight: bold;
}

.project-item aside h4 {
    font-size: 15px;
}
/*________________INDIVIDUAL PAGES________________*/
/* Structure générale */

/* Style for the navigation buttons container */
.navigation-buttons {
    display: flex;
    justify-content: space-between;
    width: 100%;
    margin-bottom: 10px; /* Space between buttons and content */
}

.navigation-buttons a {
    text-decoration: none; /* Enlève le surlignage */
    color: inherit; /* Hérite de la couleur du texte parent, ou vous pouvez définir une couleur spécifique */
}

/* Style for individual buttons */
.previous-button, .next-button {
    background-color: transparent;
    flex: 1;
    padding: 5px;
   /* border: 2px solid black;*/
    cursor: pointer;
    text-align: center;
    font-size: 15px;
    max-width: 150px; /* Optional: limit button width */
}

.project {
    display: flex;
    width: 100%;
    gap: 10px; /* Espace entre le texte et la zone d'images */
}

/* Zone de texte du projet (30%) */
.projectinfo {
    width: 30%;
    height: 100%;
    display: flex;
    flex-direction: column;
    padding: 10px;
    border: solid black 2px;
}

.projecttext h1 {
    font-weight: bold;
}
.projecttext h2,p {
    font-size: 15px;
}

.projectgallery {
    width: 70%;
    height: 80vh;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    padding-bottom: 30px; /* Espacement à droite sans empiéter sur la dernière image */
    box-sizing: border-box;
}

.projectimage {
    width: 100%;
    height: auto;
    margin-bottom: 10px; /* Ajout d'un espace pour éviter que la dernière image soit coupée */
}

.projectimage img {
    width: 100%;
    height: auto;
    object-fit: cover;
}

/* Style pour le conteneur des images alignées horizontalement */
.horizontal-images {
    display: flex;
    width: 100%;
    gap: 10px; /* Espace entre les deux images */
    margin-top: 10px;
    margin-bottom: 10px;
}


.horizontal-images .side-by-side img {
    width: 100%;
    height: auto;
    object-fit: cover;
}

.carrouselprojects {
    width: 100%;
    max-height: 55vh;
    height: 450px;
}
.half-size {
    width: 50%; /* Réduit la largeur de l'image */
    max-width: 500px; /* Limite la taille maximale en pixels si nécessaire */
    height: auto; /* Conserve les proportions */
    display: block;
    margin: 0 auto; /* Centre l'image si nécessaire */
}
/*________________PAGES PLAYGROUND________________*/

.messmsg{
    display: flex;
    justify-content: center; /* Centre horizontalement */
    align-items: center; /* Centre verticalement */
    height: 20%; /* Utilise toute la hauteur de l'écran */
    text-align: center;

}
#messgalery {
    columns: 4; /* Maximum de 4 colonnes */
    gap: 10px; /* Espacement entre les éléments */
    width: 100%; /* Largeur de la galerie */
    overflow: auto;
}

.messimages {
    overflow: hidden;
    margin-bottom: 10px;
}

.messimages img {
    display: block;
    width: 100%;
    height: auto; /* Assure que l'image garde ses proportions */
    object-fit: cover; /* Remplir l'espace sans déformer l'image */
}

/*________________PAGE SHOP________________*/
.shopmsg{
    display: flex;
    justify-content: center; /* Centre horizontalement */
    align-items: center; /* Centre verticalement */
    height: 100%; /* Utilise toute la hauteur de l'écran */
    text-align: center;

}

/*________________PAGE ABOUT________________*/
.about{
    display: flex;

}
.aboutinfo {
    width: 30%;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.abouttext {
    padding: 10px;
    border: solid black 2px;
    gap: 10px;
}

.abouttext h1 {
    font-weight: bold;
}

.aboutlinks {
    width: 100%;
    display: flex;
    flex-direction: column; /* Conserve l'alignement vertical pour aboutlinks */
}

.contact,
.details {
    display: flex; /* Active le mode flex pour ces divs */
   /* align-items: center;*/ /* Centre verticalement le contenu à l'intérieur */
    /*padding: 10px; */ 
}

.contact p,
.details p {
    /*margin-right: 10px; *//* Espacement entre le paragraphe et la div des liens */
    width: 100%;
}

.link-container {
    display: flex; /* Aligne les liens verticalement */
    flex-direction: column; /* Liens en colonne */
    width: 100%;
}

.aboutlinks a {
    text-decoration: underline;
    color: black;
/*    border: solid black 2px;*/
  /*  padding: 10px;*/
    width: 100%;
/*    text-align: center;*/
    display: block; /* Assure que les liens restent en bloc */
    margin-top: 5px; /* Espacement vertical entre les liens */
}

.credits {
    padding: 10px;
    text-align: center;
    font-size: 10px;

}

.aboutimage {
    padding-left: 10px;
    width: 100%;
    height: 80vh;            /* Utilise toute la hauteur de la fenêtre (ou remplace par la hauteur de ton conteneur) */
    display: flex;            /* Utilisation de Flexbox */
    justify-content: center;  /* Centre horizontalement */
    align-items: center;      /* Centre verticalement */
    position: relative;       /* Optionnel, pour gérer des éléments internes */
}

.aboutimage img {
    max-width: 50%;           /* L'image ne dépasse pas la largeur du conteneur */
    max-height: 50%;          /* L'image ne dépasse pas la hauteur du conteneur */
    object-fit: contain;      /* L'image s'ajuste en restant entière et proportionnelle */
    transform: rotate(10deg);  /* Rotation de l'image */
}

/*________________FOOTER________________*/
footer {
    font-size: 15px;
    font-weight: bold;
    bottom: 0; /* Fixé en bas de la page */
    position: fixed;
    height: 50px; /* Hauteur fixe pour le footer */
    width: 100vw;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: black;
    padding: 0 50px; /* Espacement latéral */
    box-sizing: border-box; /* Inclut le padding dans la hauteur/largeur */
}

#language:hover {
    color: yellow;
}

#mode img {
    height: 100%; /* L'image prendra toute la hauteur du footer */
    transition: content 0.3s ease-in-out;
    filter: brightness(0);
}

#mode:hover img {
    filter: brightness(100); /* Rendre l'image jaune */
}

/*________________FOOTER NUIT________________*/
body.night-mode footer {
    color: yellow; /* Couleur du texte en mode nuit */
}

body.night-mode #language:hover {
    color: #890E4F; 
}

body.night-mode #mode img {
    content: url('../images/interface/lunejaune.png'); /* Image pour le mode nuit */
     filter: none;
}

body.night-mode #mode:hover img {
    content: url('../images/interface/lune.png'); /* Image au survol en mode nuit */
    filter: none; /* Désactiver le filtre en mode nuit pour éviter l'image noire */
}