@charset "UTF-8";

html {
  scroll-behavior:smooth;
}

@font-face{
	font-family: "Suisse Intl";
	src: url("../typography/SuisseIntl-Regular.woff");
}

@font-face{
	font-family: "Suisse Intl Medium";
	src: url("../typography/SuisseIntl-Medium.woff");
}

@font-face{
	font-family: "Suisse Intl Cond";
	src: url("../typography/SuisseIntl-Cond.woff");
}

@font-face{
	font-family: "Suisse Intl Cond Bold";
	src: url("../typography/SuisseIntl-CondBold.woff");
}

#aaud{
	overflow: hidden;
	visibility: hidden !important;
}

/* Styles généraux (mobile(xs): 0px - 768px) */

body {
 	margin: 0;
 	background:white;
 	background-size: cover;
 	overflow-x:hidden;
}

::-webkit-scrollbar {
    width: 0px;  /* remove scrollbar space */
    background: transparent;  /* optional: just make scrollbar invisible */
}

.row{
	padding:0;
}

.container-fluid{
	padding:0;
}

/* Pas de selection (text highlight) */

.noselect {
  -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Old versions of Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome, Opera and Firefox */
}

.main {
    position: relative;
    width: 100%;
    /* Use the custom property for height; fall back to auto if not set */
    height: var(--viewport-height, auto); 
    padding-top: 70px;
}

.biography .main {
    padding-top: 240px; /* Adjust this value based on your navigation bar's height */
}

/* Biography - New Text Blocks Implementation */

.text-blocks-container {
    position: relative;
    height: 100vh;
    width: 100%;
}

.text-block {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(calc(-50% + 100%), -50%); /* Start hidden to the right */
    width: 80%;
    max-width: 600px;
    text-align: left;
    padding: 20px;
    background: none;
    border-radius: 5px;
    box-sizing: border-box;
    will-change: transform, opacity;
    z-index: 10;
    opacity: 0; /* Start hidden */
}

/* First text block starts visible and centered */
.text-block[data-block="1"] {
    transform: translate(-50%, -50%); /* Start centered */
    opacity: 1; /* Start visible */
}

.text-block p {
    font-family: "Suisse Intl", "Helvetica", "Arial", sans-serif;
    font-size: 1.6rem;
    color: black;
    margin: 0;
    line-height: 1.4;
}

.text-block a {
    color: #000;
    text-decoration: none;
    border-bottom: 1px solid #000;
}

.text-block a:hover {
    opacity: 0.7;
}

/* Mobile responsive adjustments for text blocks */
@media (max-width: 768px) {
    .text-block {
        width: 90%;
        padding: 15px;
    }
    
    .text-block p {
        font-size: 1.4rem;
        line-height: 1.3;
    }
}

.scroll-spacer {
    height: 200vh; /* Reduced height - JavaScript will limit actual scroll */
}

#parallaxPhoto {
    position: fixed;
    top: 0; /* Adjust if needed to align correctly at start */
    left: 50%;
    transform: translateX(-50%) translateY(-100%);
    width: auto;
    height: 80vh; /* Adjust height as per your design */
    z-index: -1; /* Keeps the image behind the text */
}

.content-spacer {
    height: 50vh; /* Adjusted for less scrolling to trigger text */
}

/* Biography Parallax General Styles */

.parallax-photo {
    position: absolute;
    right: 5%; /* Keep alignment on the right */
    z-index: -1; /* Ensure it's layered behind other content */
    width: 250px; /* Set width */
    height: auto; /* Maintain aspect ratio */
	opacity: 0.8; /* Adjust opacity to make the image lighter */
}

/* Mobile-specific Styles */
@media (max-width: 767px) {
    .parallax-photo, .parallax-artwork {
        background-attachment: scroll; /* Disables fixed background on mobile */
    }
}

/* Mobile first - Media Queries */

video {
	position:relative;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    object-fit:cover;
    object-position: center;
    z-index: 20;
}

.footer{
	height: 100px;
}

.text p{
	font-family: "Suisse Intl Medium", "Helvetica", "Arial";
	color: black;
	position: relative;
	font-size: 1.4rem;
	margin-top:20px;
	margin-right: 16.663%;
	letter-spacing: 0.1618em;
	word-spacing: 0em;
	text-align: left;
}

.textsuite p{
	font-family: "Suisse Intl", "Helvetica", "Arial";
	color: black;
	position: relative;
	font-size: 1.4rem;
	margin-top:0px;
	margin-right: 16.663%;
	letter-spacing: 0.05em;
	word-spacing: 0em;
	text-align: left;
}

.paragraph p{
	font-family: "Suisse Intl", "Helvetica", "Arial";
	color: white;
	position: absolute;
	font-size: 1.4rem;
	margin-top:100px;
	margin-right: 16.663%;
	letter-spacing: 0.03em;
	word-spacing: 0.1618em;
	padding-bottom: 120px;
	line-height: 1,9rem;
	text-align: left;
	text-align-last: left;
}

.text_start{
	text-align: left;
}

/* Extra Small Devices, Phones (optionnel) */ 
@media only screen and (min-width : 480px) {


}

/* Small Devices, Tablets (tablets(sm): 768px - 992px) */
@media only screen and (min-width : 768px) {
	
.section-title {
    font-family: "Suisse Intl", "Helvetica", "Arial", sans-serif; /* Keeping the font consistent with your design */
    font-size: 2.8rem; /* Larger text to make it a clear headline */
    text-align: center; /* Centering the title */
    color: #333; /* A dark gray for good contrast */
    margin-top: 60px; /* Adding space before the title */
    margin-bottom: 150px; /* Adding space after the title */
}
	
/* Biography */

.text-popup {
	margin-top:20px;
    position: fixed;
    top: 50%; /* Align vertically in the middle */
    left: 50%; /* Start from the middle, but will be adjusted by JS */
    transform: translate(-50%, -50%); /* Ensures it centers perfectly when needed */
    width: 80%;
    text-align: left;
    opacity: 0; /* Start invisible */
    transition: opacity 1s, transform 1s; /* Smooth transitions */
    font-size: 1.6rem;
    font-weight: bold;
    padding: 20px;
    background: none;
    border-radius: 5px;
    max-width: 600px;
    box-sizing: border-box;
    will-change: transform, opacity;
	color: black; /* Ensure text is black */
}
	
/* Bio Parallax */

.parallax {
        background-attachment: fixed; /* This is crucial for the parallax effect */
    }
	
.parallax-photo {
    position: absolute;
    right: 10%; /* Keep alignment on the right */
    z-index: -1; /* Ensure it's layered behind other content */
    width: 250px; /* Set width */
    height: auto; /* Maintain aspect ratio */
	opacity: 0.8; /* Adjust opacity to make the image lighter */
}
	
.text p{
	font-family: "Suisse Intl Medium", "Helvetica", "Arial";
	color: black;
	position: relative;
	font-size: 1.8rem;
	margin-top:20px;
	margin-right: 16.663%;
	letter-spacing: 0.1618em;
	word-spacing: 0em;
	text-align: left;
	font-weight: 100;
}

.textsuite p{
	font-family: "Suisse Intl", "Helvetica", "Arial";
	color: black;
	position: relative;
	font-size: 1.8rem;
	margin-top:0px;
	margin-right: 16.663%;
	letter-spacing: 0.05em;
	word-spacing: 0em;
	text-align: left;
}

.paragraph p{
	font-family: "Suisse Intl", "Helvetica", "Arial";
	color: white;
	position: absolute;
	font-size: 1.8rem;
	margin-top:120px;
}

}

/* Medium Devices, Desktops (small desktops(md): 992px-1200px) */
@media only screen and (min-width : 992px) {	
	
.section-title {
    font-family: "Suisse Intl", "Helvetica", "Arial", sans-serif; /* Keeping the font consistent with your design */
    font-size: 3.2rem; /* Larger text to make it a clear headline */
    text-align: center; /* Centering the title */
    color: #333; /* A dark gray for good contrast */
    margin-top: 60px; /* Adding space before the title */
    margin-bottom: 150px; /* Adding space after the title */
}
	
/* Biography */

.text-popup {
	margin-top:0px;
    position: fixed;
    top: 50%; /* Align vertically in the middle */
    left: 50%; /* Start from the middle, but will be adjusted by JS */
    transform: translate(-50%, -50%); /* Ensures it centers perfectly when needed */
    width: 80%;
    text-align: left;
    opacity: 0; /* Start invisible */
    transition: opacity 1s, transform 1s; /* Smooth transitions */
    font-size: 1.6rem;
    font-weight: bold;
    padding: 20px;
    background: none;
    border-radius: 5px;
    max-width: 600px;
    box-sizing: border-box;
    will-change: transform, opacity;
	color: black; /* Ensure text is black */
}
	
.parallax-photo {
    position: absolute;
    right: 25%; /* Keep alignment on the right */
    z-index: -1; /* Ensure it's layered behind other content */
    width: 250px; /* Set width */
    height: auto; /* Maintain aspect ratio */
	opacity: 0.8; /* Adjust opacity to make the image lighter */
}
	
.paragraph p{
	font-family: "Suisse Intl", "Helvetica", "Arial";
	color: white;
	position: absolute;
	font-size: 2.1rem;
	margin-top:150px;
	margin-right: 16.663%;
	letter-spacing: 0.05em;
	word-spacing: 0.1618em;
	padding-bottom: 120px;
	line-height: 1,9rem;
	text-align: justify;
	text-align-last: left;
}

}

/* Large Devices, Wide Screens (large desktops(lg): 1200px et plus) */
@media only screen and (min-width : 1440px) {
	
	.section-title {
		font-family: "Suisse Intl", "Helvetica", "Arial", sans-serif; /* Keeping the font consistent with your design */
		font-size: 3.2rem; /* Larger text to make it a clear headline */
		text-align: center; /* Centering the title */
		color: #333; /* A dark gray for good contrast */
		margin-top: 60px; /* Adding space before the title */
		margin-bottom: 150px; /* Adding space after the title */
	}
		
	/* Biography */
	
	.text-popup {
		margin-top:0px;
		position: fixed;
		top: 50%; /* Align vertically in the middle */
		left: 50%; /* Start from the middle, but will be adjusted by JS */
		transform: translate(-50%, -50%); /* Ensures it centers perfectly when needed */
		width: 80%;
		text-align: left;
		opacity: 0; /* Start invisible */
		transition: opacity 1s, transform 1s; /* Smooth transitions */
		font-size: 1.6rem;
		font-weight: bold;
		padding: 20px;
		background: none;
		border-radius: 5px;
		max-width: 600px;
		box-sizing: border-box;
		will-change: transform, opacity;
		color: black; /* Ensure text is black */
	}
		
	.parallax-photo {
		position: absolute;
		right: 25%; /* Keep alignment on the right */
		z-index: -1; /* Ensure it's layered behind other content */
		width: 250px; /* Set width */
		height: auto; /* Maintain aspect ratio */
		opacity: 0.8; /* Adjust opacity to make the image lighter */
	}
		
	.paragraph p{
		font-family: "Suisse Intl", "Helvetica", "Arial";
		color: white;
		position: absolute;
		font-size: 2.1rem;
		margin-top:150px;
		margin-right: 16.663%;
		letter-spacing: 0.05em;
		word-spacing: 0.1618em;
		padding-bottom: 120px;
		line-height: 1,9rem;
		text-align: justify;
		text-align-last: left;
	}

}