*{
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
text-shadow: 1px 1px 1px rgba(0,0,0,0.004);
}

.active-menu {
    opacity: 60%;

}


html{

	font-family: 'Open Sans', sans-serif;
	width: 100%;
	height:100%;

	margin: 0;
	padding: 0;

}

a { color: inherit; text-decoration:none;  } 

a:hover { 
  cursor: pointer;
    opacity: 0.7;
    transition: opacity 0.3s ease;
}

body {
	height:100%;
	margin: 0;
   padding: 0;
   background-color: #fafafa;
}



.digital-clock {
    font-family: 'doto', sans-serif; /* Match the website's font */
    font-size: 10px; /* Adjust size as needed */
    font-weight: 300; /* Regular weight for a clean look */
    color: black; /* Clock text color */
	opacity: 100%;
}



 #kitten {
            position: absolute;
            bottom: 10px;
            left: -150px; /* Start off-screen */
            width: 100px; /* Adjust size of the kitten */
            transition: transform 0.1s; /* Smooth direction change */
        }

        @keyframes walk {
            0% {
                left: -150px;
                opacity: 1;
            }
            50% {
                left: 18%;
                opacity: 1;
            }

            90% {
                left: 32%;
                opacity: 1;
            }


            100% {
                left: 36%;
                opacity: 0;
            }
        }

        .walking {
            animation: walk 2s linear ; /* Makes the kitten walk endlessly */
        }
        }


::selection {
  background: #d1d1d1; /* WebKit/Blink Browsers */
}
::-moz-selection {
  background: #d1d1d1; /* Gecko Browsers */
}

.blinking-dot {
    display: inline-block; /* Ensure it stays inline with the text */
    width: 4px; /* Size of the dot */
    height: 4px; /* Size of the dot */
    margin-left: 2px; /* Space between the text and the dot */
    margin-bottom: 2px;
    background-color: grey; /* Color of the dot */
    border-radius: 50%; /* Makes it circular */
    animation: blink 1s infinite; /* Apply the blinking animation */
}

@keyframes blink {
    0%, 100% {
        opacity: 1; /* Fully visible */
    }
    50% {
        opacity: 0; /* Invisible */
    }
}


.master{
	display:flex;
	flex-wrap: wrap;
}


.main_left {
	background-color:#fafafa;
	
	width: 40%;
	height:100%;
	display: flex;
  flex-wrap: wrap;
	
	margin-top: 0%;
	margin-left: 0%;
	
	
}

.box{
	margin-top: 10%;
	margin-left: 15%; /* margin entre bords et box schol + links */
}


.main_left .text p{
	margin-top: 5%;
	margin-right:15%;
	font-size: 80%;
	font-weight: normal;
}





.main_left .menu{
	
	margin-top: 5%; /* Margin Entre menu et scholteden */
	
	
}
.main_left .menu p{
	font-family: 'doto', sans-serif;
	font-size: 80%;
	font-weight: 600;
	line-height: 2pt;  /* distances entre lettres */
}

.main_left .menu_bis {
	margin-right: 15%;
	text-align: right;
	font-size: 80%;
	font-weight: lighter;
	line-height: 2pt;  /* distances entre lettres */
	
	
}	


.links{
	margin-top: 30%;
	width: 40%;
	display: flex;
	
}

.links img{
	width: 20%;
}



.logo img{
	

	width: 33%;
	max-width: 33%;
	opacity: 50%

}


.sutur {
	
	margin-top: 30%;
	width: 50%;
	
}

.copyright p{
	font-size: 60%;
	font-weight: lighter;
	opacity: 40%;
}

.copyright2 p{ /* mobile copyright desappears */
	display: none;

}

.suturlogo img{
	width: 20%;
	opacity: 100%;
}


.main_right {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 60%;
    height: 100vh;
    background-color: black;
    overflow: auto;
    text-align: justify;
    padding: 5px; /* Add padding to avoid squished text */
    box-sizing: border-box; /* Ensure padding doesn’t overflow the container */
}

.content {
    color: black;
    font-size: 80%;
    font-weight: lighter;
    display: none;
    word-wrap: break-word; /* Ensure long words break properly */
    overflow-wrap: break-word; /* Ensures text doesn’t overflow the container */
    position: relative; /* Required for positioning child elements */
}

#infoContainer {
    display: flex;
    flex-direction: column;
    max-width: 100%; /* Ensure the container respects its parent */
    max-height: 100vh;
    padding: 10px; /* Add some padding for spacing */
    box-sizing: border-box;
}

#info_text {
    color: white;
    max-width: 100%;
    text-align: left;
    line-height: 1.4; /* Adjust line height for better readability */
    padding: 5px; /* Add spacing inside the text container */
    word-wrap: break-word; /* Ensure long words wrap */
    overflow-wrap: break-word;
}

#info_text .info-title {
     font-family: 'Funnel Display', sans-serif; /* Use Funnel Display font */
    font-weight: 400; /* Medium weight */
    font-size: 1.2em; /* Make the title slightly larger */
    display: block; /* Ensure it takes its own line */
    margin-top: 5px;
    margin-bottom: -5px;
}

#info_text p {
    margin-bottom: 10px; /* Space between paragraphs */
}

#info_text em {
    font-style: italic;
    color: #d1d1d1; /* Optional: A slightly lighter shade for emphasis */
}
#info_text strong {
    font-weight: 400; /* Make strong elements regular weight */
}

.rounded-button {
    background-color: transparent; /* Transparent background */
    border: 1px solid white; /* White rounded border */
    border-radius: 20px; /* Rounds the button corners */
    color: white; /* Button text color */
    padding: 5px 10px; /* Space inside the button */
    font-size: 11px; /* Adjust font size */
    font-family: 'funnel display', sans-serif; /* Match the website's font */
    text-transform: uppercase; /* Optional: Make the text uppercase */
    cursor: pointer; /* Pointer cursor on hover */
    transition: all 0.3s ease; /* Smooth hover effect */
}

.rounded-button:hover {
    background-color: white; /* Change background on hover */
    color: black; /* Change text color on hover */
    border-color: black; /* Optional: Change border color */
}

.rounded-button:focus {
    outline: none; /* Remove focus outline */
}



.PicContainer {
    display: flex;   
    justify-content: center;
}

.PicContainer img {
    max-width: 100%;
    max-height: 100vh;
    width: auto;
    height: auto;
}

.photo img{
	float: right; /* a voir */ 
	height: 100vh;
	width: 100%;
	object-fit: cover;
	
	
	/*display: flex;
  flex-wrap: wrap;
	float: right;
	width: 100%;
	     /* GLHF pour avoir des bonnes proportions */
	
 /* le temps de trouver */
	
}

#info {
    max-width: 50%; /* Default for larger screens */
}

@media (max-width: 768px) { 
    #info {
        max-width: 90%; /* On mobile (screens ≤ 768px) */
    }
}




#fade-in {
  -webkit-animation: fadeIn 0.1s ease-in;  /* Safari 4+ */
  -moz-animation:    fadeIn 0.1s ease-in;  /* Fx 5+ */
  -o-animation:      fadeIn 0.1s ease-in;  /* Opera 12+ */
  animation:         fadeIn 0.1s ease-in; /* IE 10+, Fx 29+ */
}

@keyframes fadeIn {
	0%{
		opacity: 0;
	}

	100%{
		opacity:1;
	}
}

@-webkit-keyframes fadeIn {   /* Safari 4+ */
	0%{
		opacity: 0;
	}

	100%{
		opacity:1;
	}
}


video {
    width: 100%;
    max-width: 1000px;
    display: block;
    border-radius: 20px;
}



#fade-in-delay {
  -webkit-animation: fadeIn 0.2s ease-in;  /* Safari 4+ */
  -moz-animation:    fadeIn 0.2s ease-in;  /* Fx 5+ */
  -o-animation:      fadeIn 0.2s ease-in;  /* Opera 12+ */
  animation:         fadeIn 0.2s ease-in; /* IE 10+, Fx 29+ */
}


#fade-in-delay-plus {
  -webkit-animation: fadeIn 0.4s ease-in;  /* Safari 4+ */
  -moz-animation:    fadeIn 0.4s ease-in;  /* Fx 5+ */
  -o-animation:      fadeIn 0.4s ease-in;  /* Opera 12+ */
  animation:         fadeIn 0.4s ease-in; /* IE 10+, Fx 29+ */
}

/* Section fade animations */
.fade-in-section {
    opacity: 0;
    animation: fadeIn 0.6s ease-out forwards;
}

.fade-out-section {
    opacity: 1;
    animation: fadeOut 0.3s ease-out forwards;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes fadeOut {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}

/* Text pop-in animation (each word or line appears one by one) */
.fade-in-text {
    opacity: 0;
    transform: translateY(10px);
}

.text-pop {
    animation: textPopIn 0.6s ease-out forwards;
}

@keyframes textPopIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

#snapshots .lightbox-trigger {
    cursor: pointer; /* Changes cursor to a hand (clickable) */
    transition: transform 0.2s ease-in-out; /* Smooth hover effect */
}

#snapshots .lightbox-trigger:hover {
    transform: scale(1.01); /* Slight zoom effect on hover */
}


/* Lightbox styles */
.lightbox {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 1); /* Dark overlay */
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease-in-out;
    z-index: 1000; /* Ensures it's above everything */
}

.lightbox img {
    max-width: 90%;
    max-height: 90%;
    border-radius: 10px; /* Optional: Slight rounded corners */
    transition: transform 0.3s ease-in-out;
}

/* Lightbox appears */
.lightbox.active {
    opacity: 1;
    visibility: visible;
}

/* Navigation Buttons */
.lightbox-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    font-size: 30px;
    color: white;
    background: rgba(0, 0, 0, 0.5);
    padding: 10px 15px;
    cursor: pointer;
    border-radius: 5px;
    transition: background 0.3s ease;
    z-index: 1010;
}

.lightbox-prev {
    left: 20px;
}

.lightbox-next {
    right: 20px;
}

.lightbox-nav:hover {
    background: rgba(255, 255, 255, 0.3);
}

/* Make sure close button is on top */
.lightbox-close {
    position: absolute;
    top: 20px;
    right: 30px;
    font-size: 40px;
    color: white;
    cursor: pointer;
    transition: 0.2s;
    z-index: 1020;
}

.lightbox-close:hover {
    color: red;
}





@media (max-width: 767.98px) {

.master{
display: flex;
flex-direction: column;

}
	
.main_left {
	width: 100%;
	height:100%;
	overflow: hidden;
	}
	
			.links{
			margin-top: 50%;
			width: 60%;
			display: flex;
			}

			.links img{
			width: 50%;
			}

	
			.sutur {
	
			margin-top: 30%;
			width: 80%;
	
			}

			.copyright p{
			font-size: 60%;
			font-weight: lighter;
			opacity: 40%;
			}


			.suturlogo img{
			width: 20%;
			opacity: 50%;
			}

.main_right {
	width: 100%;
	height:100%;
	
	}	
	
@media (max-width: 768px) {


 body {
		background: black;
}


	.main_left {
		padding-bottom: 50px;
		background-color: #FAFAFA;



		}
		.sutur{
    margin-top: 10%;
  }

 
 .suturlogo {
    display: none;
  }

 .copyright p{ /*  desktop copyright desappears on mobile */
	display: none;
}


.copyright2 p{ /* mobile copyright appears */
	display: flex;
	align-items: center;
    justify-content: center;
	font-size: 60%;
	font-weight: lighter;
	opacity: 33%;
	color: #fafafa;
}

#kitten {
	display: none;

}

@media (max-width: 768px) { 
    .box {
        margin-left: 7%; /* Reduce left gap on mobile */
    }

    .main_left .menu {
        margin-top: 7%; /* Reduce left gap on mobile */
    }

    .main_left .menu_bis {
        margin-right: 7%; /* Reduce right gap on mobile */
    }

    .logo img{
    

    width: 37%;
    max-width: 37%;

    }
}