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


body {
	font-family: "elza-text", sans-serif;
	font-size: 20px;
	font-weight: 400;
	font-style: normal;
    color: #333;
    line-height: 1.2;
    letter-spacing: 0.48px;
    height: 100vh;
    color: #000;
}
a {
	font-size: 1em;
	color: #000;

}
.wrap {
	padding: 0 48px;
}
.flex {
	display: flex;
}
footer {
	margin-top: 24px;
	justify-content: space-between;

}


.links {
	font-size: 0.8em;
}
a.instagram {
	margin-right: 24px;
}

h1 {
	color: #000;
	color: color(display-p3 0 0 0);
	font-size: 4em;
	font-style: normal;
	font-weight: 400;
	line-height: 1.12em; /* 32.34px */
}

#hero {
	height: 100vh;
	background-color: #FF7989;
	flex-direction: column;
	justify-content: flex-end;
	padding-bottom: 48px;
}
#hero h1 {
	margin-bottom: 40px;
}
#hero .logo {
	float: right;
}

.text {
    cursor: pointer;
    opacity: 1;
    transition: opacity 0.25s ease-in-out;
}
.hidden {
    opacity: 0;
    pointer-events: none; /* Rend le texte non-cliquable quand il est caché */
    position: absolute; /* Place le texte au même endroit que l'autre texte */
}
/* Classe pour afficher le texte */
.visible {
    opacity: 1;
    pointer-events: auto; /* Réactive le clic */
}

/* Grille par défaut (desktop) */
.wrapper {
  display: grid;
  grid-template-columns: repeat(8, 1fr); /* 8 colonnes sur les grands écrans */
  grid-gap: 24px;
}

/* Pour les écrans de taille tablette (768px et plus) */
@media (max-width: 1024px) {
  .wrapper {
    grid-template-columns: repeat(4, 1fr); /* 4 colonnes sur les tablettes */
  }
}

/* Pour les écrans de taille mobile (768px et moins) */
@media (max-width: 768px) {
  .wrapper {
    grid-template-columns: repeat(2, 1fr); /* 2 colonnes sur les petits écrans */
  }
}

/* Pour les très petits écrans ou smartphones (480px et moins) */
@media (max-width: 480px) {
  .wrapper {
    grid-template-columns: 1fr; /* 1 colonne sur les très petits écrans */
  }
}


footer {
	bottom: 0;
	width: 100%;
	height: auto;
}

.image-container {
    position: absolute;
    pointer-events: none; /* L'image ne doit pas être cliquée ou interférer avec d'autres éléments */
}

#floating-image {
    position: absolute;
    width: 100px;
    height: auto;
    transition: transform 0.1s ease-out; /* Pour un léger retard */
}