/*fonts*/

@font-face {
    font-family: "Advercase";
    src: url("../fonts/Advercase-Regular.otf") format("opentype");
}
@font-face {
    font-family: "ztbrososkon90s";
    src: url("../fonts/ztbrososkon90s-italic.otf") format("opentype");
}


/** {
    outline: 1px solid red;
}
*/
body {
	scrollbar-width: none;
	background-color: brow;
	scroll-behavior: smooth;
}



/*image d'accueil*/

#hero {
    height: 100vh;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    text-align: center;

    background-image: url('../import/cover.jpg');
    background-size: cover;
    background-position: center;
}

/*TEXT PORTFOLIO*/

#hero h1 {
    font-family: "Advercase", sans-serif;
    font-size: 8rem;
    color: #FFCE2E;
    margin: 0;
    line-height: 0.9;
}

#hero p {
    font-family: "ztbrososkon90s";
    font-size: 1.4rem;
    color: #FFCE2E;

    letter-spacing: 0.8em;
    text-transform: uppercase;

    margin-top: 20px;
}


#hero {
    font-direction: column;
}

/*boite mère*/

#mere {
	height: 1500px;
	margin: 20px;

}


/*Header*/

header {
	position: fixed;
	top: 20px;
	left: 20px;
	right: 20px;
	z-index: 10;
	margin: 0;
	height: 80px;
}

nav {
	display: flex;
  justify-content: space-between; /*LOGO à gauche, burger à droite */
  align-items: center;
}

#nav-fixe {  /*règle le problème du menu burger qui fait grossir la boite*/
	display: flex;
	justify-content: space-between;
	align-items: center;
	width: 100%;
	height: 100%;
}

nav p{
	border-color: black;
	color: #FFCE2E;
}

#burger {
	align-items: right;
	align-content: right;
	width: 50px;
	height: 50px;
}

#burger:active {
	width: 35px;
	height: 35px;
}

#burger:hover {
	width: 55px;
	height: 55px;
}








/*contenue*/

/*texte de présentation*/
  /*text qui s'anime - en lien avec le JS*/
#scrollText {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

    text-align: center;
    white-space: pre-line;

    font-size: 1.8rem;
    line-height: 1.6;

    color: black;
    font-family: "ztbrososkon90s";

    opacity: 0;
    transition: opacity 0.2s ease; /* 🔥 plus rapide = plus propre */
    white-space: pre-wrap; /* 🔥 garde les espaces + retours ligne */



}

 #scrollText span {
    opacity: 0;
    display: inline-block;
    animation: fadeInLetter 0.2s ease forwards;
}

@keyframes fadeInLetter { /*animation de fade*/
    from {
        opacity: 0;
        transform: translateY(2px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }

}

.hero-anim {
    opacity: 0;
    transform: translateY(40px);
    filter: blur(8px);
    animation: heroFadeUp 1.2s ease forwards;
}

@keyframes heroFadeUp {
    to {
        opacity: 1;
        transform: translateY(0);
        filter: blur(0);
    }
}

#hero h1,
#hero p {
    opacity: 0; /* important pour éviter flash */
}

#hero-content {
    position: relative;
    will-change: transform;
}

/*boites*/

#conteneur {
	margin: 20px;
	margin-top: 100px;
	/*background-color: purple;*/
	height: 1500px;
	display: flex;
	justify-content: space-between;

}

#contenu1 { /*colonne gauche*/
	/*border: 2px solid black;*/ 
	width: 550px;
	height: 1500px;
	display: flex;
	flex-direction: column;
	gap: 300px;

}


#contenu2 { /*colonne droite*/  /*visual boite*/
	/*border: 2px solid black;*/
	width: 550px;
	height: 1500px; /*hauteur de boite*/
	display: flex;
	flex-direction: column;
	gap: 400px;
	margin-top: 300px;
	align-items: flex-end;


}


	
#contenu1 img { /*images colonne gauche*/
	width: 750px;
	gap: 20px;
	border-radius: 20px;
	position: relative;
	transition: transform 0.4s ease; 

}

#contenu1 a {
    display: block; /* ✅ le lien ne casse pas la mise en page */
}

.images1 a {
    display: block;
    width: 100%;
    height: 100%;
}

#contenu2 img { /*images colonne droite*/
	gap: 20px;
	position: relative;
  left: -80px; /* ← image sort à gauche de la boîte bleue */
  width: 750px; /* ← garde la même taille qu'avant */
  transition: transform 0.4s ease; /* ✅ */

}

/*grossissement hover*/

#contenu1 img:hover {
	transform: scale(1.2)
}

#contenu2 img:hover {
	transform: scale(1.2)
}