*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    margin: 0;
    background: linear-gradient(to bottom, #2A384D, #0D1828);
    background-repeat: no-repeat;
    height: 100%; /* Assure que le gradient couvre tout l'écran */
    min-height: 100vh;
}

/*---------------------TYPOGRAPHIE-----------------------------------*/

img {
    display: block;
    max-width: 100%;
    object-fit: contain;
}

p {
    color: white;
    font-family: "Istok Web", serif;
    font-size: 1em;
  font-style: normal;
}

.flex a,
p a {
    color: #00FFFB;
    font-style: italic;
    text-decoration: none;
    font-family: "Istok Web", serif;
    font-size: 1em;
}

ul li a,
a:active,
a.active {
    text-decoration: underline;

}

h1 {
    color: white;
    font-family: "Bebas Neue", serif;
  font-weight: 400;
  font-size: 7em;
}


h2 {
    color: white;
    font-family: "Bebas Neue", serif;
  font-weight: 400;
  font-size: 4em;
   margin-bottom: 2rem; /* Ajuste cette valeur selon tes préférences */
}

h3 {
    color: white;
    font-family: "Bebas Neue", serif;
  font-weight: 400;
  font-size: 4em;
}

ul li {
    list-style: none;
}

ul li a {
    color: white;
    list-style: none;
    text-decoration: none;
    font-family: "Istok Web", serif;
    font-weight: 700;
    font-style: italic;
    font-size: 1.1em;
}

button {
    background-color: black;
    border: white solid 2px;
    padding: 0.5em 3em;
    border-radius: 0 8px 0 8px;
    cursor: pointer;

}


a button {
    color: white;
    list-style: none;
    text-decoration: none;
    font-family: "Istok Web", serif;
    font-weight: 700;
    font-style: italic;
    font-size: 1em;
    cursor: pointer;
}

.categories a {
    color: white;
    list-style: none;
    text-decoration: none;
    font-family: "Istok Web", serif;
    font-weight: 700;
    font-style: italic;
    font-size: 1.5em;
    cursor: pointer;
    margin-right: 2rem;
    
}

.active a {
    text-decoration: underline;
}


/*-------------------------------------POSITION ET FLEX---------------------------*/

.inner {
    margin: 2% 5%;
}

.headerNav {
    background-color: black;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 5%;
    position: sticky;
    top: 0;
    z-index: 999;
}

.headerNav nav ul li {
    padding: 0 4rem
}

nav ul {
    display: flex;
    justify-content: space-around;
}

.logo {
    position: fixed;
    z-index: 1;
    width: 20em;
    aspect-ratio: 1/1;
    padding: 3em 5em;
    left: 2em;
}

.logoBasic img,
.logo img {
    width: 100%;
    height: auto;
}

.logoBasic {
    width: 5%;
}

.flex {
    display: flex;
    justify-content: flex-start;
    gap: 2vw;
}

video {
    right: 0;
    bottom: 0;   
}

.intereveBanner {
    background-image: url(../layout/img/Interevebanner.png);
    background-position: center top -70px; /* Déplace l'image vers le haut */    
    width: 100%;
    background-repeat: no-repeat;
    background-size: cover;
    padding: 7% 5%;
}

.idvpic {
    width: 25%;
}

.lostweenBanner {
    background-image: url(../layout/img/lostweenbanner.png);
    background-position: center top -70px; /* Déplace l'image vers le haut */    
    width: 100%;
    background-repeat: no-repeat;
    background-size: cover;
    padding: 7% 5%;

}

.videoExecution {
    position: relative;
    width: 25vw;
    height: auto;
    aspect-ratio: 1 / 1; /* Assure un carré parfait */
    overflow: hidden;
}

.videoExecution video {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    object-fit: cover; /* Remplit bien le carré */
}

.videoInspi {
    width: 35vw; /* Ajustez la largeur selon vos besoins */
    height: auto;
    aspect-ratio: 16 / 9; /* Maintient un bon rapport hauteur/largeur */
    overflow: hidden;
}

.videoInspi video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.flex:nth-of-type(1) {
    margin-bottom: 4rem; /* Ajuste selon la taille d'espacement désirée */
}

.flex p {
    width: 25vw; /* Assure que le texte fait bien 25% de la largeur de l’écran */
    color: white;
    font-family: "Istok Web", serif;
    font-size: 1em;
}


#introNav {
    position: fixed;
    bottom: 0;
    width: 100%;
    background-color: rgba(0, 0, 0, 0.90);
    z-index: 1;
    padding: 2.5em 1em;

}

#introNav nav ul {
    display: flex;
    justify-content: space-between;
}

#introNav nav ul li {
    width: 100%;
    display: flex;
    align-items: center;
}

#menuGame a {
    display: block;
    width: 100%;
    text-decoration: none;
    color: white;
    font-family: "Inria Sans", serif;
    font-weight: 700;
    font-size: clamp(16px , 2.5vw , 48px);
    font-style: italic;
    
}


#introNav nav a{
    text-align: center;
    display: block;
    width: 100%;
    text-decoration: none;
    color: white;
    font-family: "Inria Sans", serif;
    font-weight: 700;
    font-size: clamp(16px , 1.5em , 45px);
    font-style: italic;
    padding: 0.5em 1em;
}

.fullscreen.fixed {
    z-index: 0;
    position: fixed;
    top: 0;
    width: 100%;
    height: 100vh;
    object-fit: cover;
}

#menuGame {
    position: fixed;
    z-index: 2;
    width: 100%;
    height: 100vh;
    background-color: black;
    color: white;
    transform: translateY(100%);
    transition: transform 0.3s ease-in-out;
 /*----------------- MODIFICATIONS---------------*/
 padding: 2em;
    display: block;
    text-decoration: none;
    color: white;
    font-family: "Inria Sans", serif;
    font-weight: 700;
    font-style: italic;
    /*-------------END MODIFICATIONS ----------------- */
}

#menuGame li a {
    display: block;
    padding: 3em 1em 1em 1em;
}

#menuGame ul {
    display: block;
}

#menuGame.open {
    transform: translateY(0%);
    transition: transform 0.3s ease-in-out;
}

#closeGameMenu {
    cursor: pointer;
    font-size: 2rem;
    margin: 1em 5%;
}

.lostweenlink a {
    display: block;
    background: url(../layout/img/lostweenbanner.png) no-repeat center center;
    background-position: center top -110px; /* Déplace l'image vers le haut */    
    background-size: cover;
}

.interevelink a {
    display: block;
     
    background: url(../layout/img/Interevebanner.png) no-repeat;
    background-position: center 25%;   
    background-size: cover;

}


.jeux-nav{
    display: flex;
    justify-content: flex-start;
    gap: 3em;
    margin: 0 auto;
    max-width: 90vw;
}

.jeux-nav a{
    padding: 1em;
}

footer {
    background-color: black;
    height: 8rem;
}

.text-container {
    display: flex;
    flex-direction: column;
}

.line{
    display: flex;
    gap: 2rem;
}


.line >*{
    width: 100%;
}

.grid2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* 2 colonnes */
    grid-template-rows: repeat(3, auto); /* 3 lignes */
    gap: 1rem; /* Espacement entre les images */
    align-items: start;
    width: fit-content; /* Ajuste la largeur en fonction du contenu */
    margin-left: 0; /* Aligne à gauche */
}

.grid2 img {
    width: 100%; /* Ajuste les images à la largeur de leur conteneur */
    height: auto;
    object-fit: cover; /* Assure un bon affichage des images */

}

.grid3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3 colonnes */
    gap: 1rem; /* Espacement entre les images */
    max-width: 100%; /* S'assure que la grille ne dépasse pas .inner */
    margin: 3em 0;
}

.galerie img,
.grid3 img {
    width: 100%; /* Les images prennent toute la largeur de leur cellule */
    height: auto;
    object-fit: contain; /* Garde l'image entière sans la rogner */
    cursor: pointer;
}

/* Overlay pour l'image en grand */
.overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.75);
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease-in-out;
    z-index: 1000;
}

.overlay.active {
    opacity: 1;
    visibility: visible;
}

.fullImage {
    max-width: 90%;
    max-height: 90%;
    object-fit: contain;
    box-shadow: 0 0 20px rgba(255, 255, 255, 0.5);
    cursor: pointer;
}

.jigsaw {
    height: 70vh;
    width: auto;
    display: block; /* Évite les marges indésirables */
    margin: 3rem 0; /* Espacement en haut et en bas */
}

.iframe-container {
    position: relative;
    padding-bottom: 56.25%;
}
  
.iframe-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.col-group {
    display: flex;
    flex-wrap: nowrap; /* Empêche le retour à la ligne */
    gap: 1rem; /* Ajoute un espacement entre les colonnes */
}

.col {
    width: 45%; /* Ajuste la largeur */
    flex-shrink: 0; /* Empêche la réduction automatique */
}



article {
    margin-bottom: 3rem;
}

.flex figure {
    width: 45%; /* Ajuste cette valeur selon tes besoins */
    max-width: 300px; /* Empêche les figures d'être trop larges */
}

.idvpic {
    width: 100%; /* Pour que l'image remplisse son conteneur */
}

.video3d {
    display: flex;
    gap: 2vw; /* Garde un petit espace entre la vidéo et le texte */
    justify-content: flex-start; /* Aligne tout à gauche */
}


.video3d video {
    width: 35%; /* Augmente la taille */
    max-height: 70vh; /* Garde une hauteur raisonnable */
    height: auto;
    object-fit: contain;
}

.video3d div {
    display: flex;
    flex-direction: column;
}

.video3d div img {
    width: 100%; /* Les images prennent toute la largeur de leur conteneur */
    max-width: 300px; /* Limite leur largeur */
    margin-top: 10px; /* Espacement entre le texte et les images */
}

.something {
    margin: 3rem 0; /* Espacement en haut et en bas */

}

.something video {
    width: 45%; /* Ajuste la taille de la vidéo */
    max-height: 75vh; /* Garde une hauteur raisonnable */
    height: auto;
    object-fit: contain;
}

.something div {
    display: flex;
    flex-direction: column;
    justify-content: flex-start; /* Aligne tout en haut */
    align-items: flex-start; /* Empêche le centrage automatique */
}

.something h3 {
    margin: 0;
    align-self: flex-start; /* S'assure que le titre colle bien en haut */
}


.something .col-group {
    display: flex;
    flex-wrap: nowrap; /* Empêche les images de passer à la ligne */
    gap: 1rem; /* Ajoute un petit espace entre les images */
    justify-content: flex-start; /* Aligne bien à gauche */
}

.something .col {
    flex: 1; /* Permet aux images d'occuper l'espace de manière égale */
    max-width: 50%; /* Empêche une image de prendre trop de place */
}


.something .col img {
    width: 100%; /* Assure que l'image prend bien toute la largeur de son conteneur */
    height: auto;
    object-fit: contain; /* Empêche les déformations */
}

.batiment {
    display: flex;
    gap: 2vw;
}

.batiment img {
    width: 45%;
    height: auto;
}

.batiment div {
    display: flex;
    flex-direction: column;
}

.morgon-img img {
    width: 50%;
}

/*section {
    margin: 5rem 0;
}