@font-face {
    font-family: 'Excon';
    src: url('../font/Excon-Medium.ttf') format('truetype');
}

@font-face {
    font-family: 'Ranade';
    src: url('../font/Ranade-Light.ttf') format('truetype');
}

body,
html {
    overflow-x: hidden;
    margin: 0;
    padding: 0;
}

body {
    background-color: #181B1E;
    font-family: 'Ranade', sans-serif;
    font-size: 0.875rem;
    width: 100%;
}


video {
    width: 100%;
    height: auto;
    display: block;
}

#lang-toggle {
    position: fixed;
    right: 0vw;
    margin: 5vw;
    padding: 1.5vw;
    border: none;
    color: #F3F7F8;
    border-radius: 0.625rem;
    background-color: #2e3134;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    cursor: pointer;
    max-width: 90px;
    max-height: 50px;
}

#lang-toggle:hover {
    transform: scale(1.1);
    height: auto;
}

#lang-toggle:active {
    background-color: #7A154B;
    color: #F3F7F8;
}

h1 {
    display: flex;
    justify-content: center;
    font-family: 'Excon', sans-serif;
    font-weight: 500;
    font-size: 1.625rem;
    padding: 5vw 0;
    color: #F3F7F8;
}

.return-button {
    position: absolute;
    height: 2rem;
    width: auto;
    padding: 5vw;
    content: url("../src/projects/back-btn-off.svg");
}

.return-button:hover,
.return-button-end:hover {
    content: url("../src/projects/back-btn-hover.svg");
}

.return-button:active,
.return-button-end:active {
    content: url("../src/projects/back-btn-on.svg");
}

.banner {
    width: 85vw;
    display: flex;
    margin: auto;
    border-radius: 3vw;
    margin-bottom: 5vw;
    max-width: 75rem;
}


main {
    background-color: #F3F7F8;
}

.presentation {
    background-color: #F3F7F8;
    padding: 0 5vw;
}

h2 {
    font-size: 1.063rem;
    color: #181B1E;
    padding-top: 2.5vw;
}

h2 span {
    color: #7A154B;
}

.custom-bar {
    margin-left: -5vw;
    margin-right: -5vw;
    height: 0.12rem;
    background-color: #181B1E;
}

.description {
    left: -5vw;
    font-size: 0.75rem;
}

.interaction {
    display: flex;
    justify-content: space-between;
    height: 2rem;
    align-items: center;
}

.interaction button {
    border-color: transparent;
    background-color: transparent;
}

h3 {
    font-size: 0.938rem;
}

.hidden {
    display: none;
}

.grid-presentation {
    padding: 1.875vw 0;
}

.logiciel {
    list-style: none;
    display: inline-flex;
    gap: 1rem;
}

.grid-logiciels .hidden {
    display: none;
}

.logiciel img {
    height: 2.5rem;
    width: auto;
}

.grid-links ul {
    list-style: none;
}

.link {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 5vw;
}

.link p {
    color: #181B1E;
}

.link:visited {
    color: inherit;
}

dialog::backdrop {
    background-color: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(3px);
}

dialog {
    padding: 0;
    margin: 0;
  border: none;
background-color: transparent;
  box-shadow: 0 4px 20px rgba(0,0,0,0.3);
  width: 100vw;
  height: 100vh;
  
  /* IMPORTANT: Nécessaire pour positionner la croix RELATIVEMENT à la boîte de dialogue */
  position: relative; 
}

.video-projet {
  position: absolute;
  top: 50%;  /* Au lieu de top: 0 */
  left: 50%; /* Au lieu de left: 0 */
  transform: translate(-50%, -50%);
  aspect-ratio: 16 / 9;
  max-width: 56.25rem;
  height: auto;
}

/* --- Nouveaux styles pour la croix de fermeture --- */
.close-button {
  position: absolute; /* Positionne la croix par rapport à la boîte de dialogue */
  top: 10px;           /* Distance du haut de la boîte de dialogue */
  right: 10px;         /* Distance de la droite de la boîte de dialogue */
  background: none;   /* Pas de fond */
  border: none;       /* Pas de bordure */
  font-size: 2.5rem;  /* Taille de la croix */
  color: #F3F7F8;       /* Couleur blanche */
  cursor: pointer;    /* Indique que c'est cliquable */
  padding: 0;         /* Enlève le padding par défaut du bouton */
  line-height: 1;     /* Assure que la croix est bien centrée */
  font-weight: 300;   /* Rend la croix plus fine */
  z-index: 10;        /* S'assure qu'elle est au-dessus de la vidéo */
}

.close-button:active {
    background-color: transparent;
}

.grid-links img {
    width: 1.25rem;
    height: 1.25rem;
}

.gallerie {
    padding: 0 5vw;
    background-color: #181B1E;
}

.gallerie span,
.gallerie p {
    font-size: 0.625rem;
    color: #F3F7F8;
    display: flex;
    justify-content: center;
}

.gallerie h2 {
    color: #F3F7F8;
}

.gallerie .custom-bar {
    background-color: #F3F7F8;
}

.project_gallerie {
    padding: 7.5vw 0;
    gap: 7.5vw;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.project_gallerie img {
    width: 72vw;
    max-width: 62.5rem;
}

ul img {
    width: 16.5vw;
    max-width: 11.875rem;
}

footer .custom-bar {
    background-color: #F3F7F8;
    color: #F3F7F8;
}

footer span {
    display: flex;
    justify-content: center;
    color: #7A154B;
    font-family: 'Excon', sans-serif;
    font-size: 0.775rem;
    padding: 2.5vw 0;
    margin-bottom: 20vw;
}


.return-button-end {
    position: fixed;
    bottom: 20px;
    width: 15vw;
    right: 42.5vw;
    cursor: pointer;
    transform: translateZ(40vw);
    content: url("../src/projects/back-btn-off.svg");

    /* Animation de base */
    opacity: 0;
    transform: translateY(100px);
    transition: opacity 0.4s ease, transform 0.4s ease;
    pointer-events: none;
}

.return-button-end.visible {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
    transform: rotateZ(90deg);
}


#btnLecture {
    border: 2px solid #7A154B;
    padding: 5px 20px;
    border-radius: 20px;
    background-color: #F3F7F8;
    font-size: 0.875rem;
    font-family: 'Ranade', sans-serif;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.links .btnLecture:hover {
    background-color: #7A154B;
    color: #F3F7F8;
}

@media screen and (min-width: 1024px) {

    h1 {
        font-size: 3rem;
        padding: 3vw 0;
    }

    .return-button {
        height: 3rem;
        padding: 3vw 5vw;
    }

    #lang-toggle {
        margin: 3vw 5vw;
    }

    .viewport-laptop {
        display: flex;
        flex-direction: row;
        justify-content: center;
    }

    h2 {
        font-size: 1.5rem;
    }

    .depliant {
        padding: 0;
    }

    .description {
        font-size: 0.938rem;
        grid-column: 2;
    }

    h3 {
        font-size: 1.125rem;
    }

    .grid-presentation,
    .description {
        width: 30vw;
    }

    .grid-presentation {
        display: flex;
        flex-direction: column;
        justify-content: space-evenly;
        padding: 1.875vw 0;
        gap: 3vw;
    }

    .logiciel img {
        height: 2rem;
        width: auto;
    }

    .links img {
        height: 1.5rem;
        width: auto;
    }

    .links p {
        font-size: 1rem;
    }

    .grid-links li a {
        gap: 1.5rem;
    }

    .tags {
        grid-column: 2;
    }

    .gallerie {
        background-color: #F3F7F8;
        width: 50vw;
    }

    .gallerie img {
        width: 50vw;
    }

    .project_gallerie {
        padding-top: 2vw;
    }

    .gallerie span,
    footer span {
        font-size: 1.25rem;
    }

    footer span {
        margin-bottom: 7.5vw;
    }

    .return-button-end {
        width: 7.5vw;
        right: 46.25vw;
    }

    /* Museum */

    .museum-gallerie-1 {
        padding: 3.75vw 0 0.9375vw 0;
    }

    .museum-gallerie-2 {
        padding: 0.9375vw 0 3.75vw 0;
    }

}

@media screen and (min-width: 1440px) {

    .grid-presentation {
        gap: 0;
    }

}