/* Polices */
@font-face {
    font-family: 'DIN Neuzeit Grotesk';
    src: url('../fonts/DIN_Neuzeit_Grotesk/DINNeuzeitGroteskLT-BoldCond.woff2') format('woff2'),
         url('../fonts/DIN_Neuzeit_Grotesk/DINNeuzeitGroteskLT-BoldCond.woff') format('woff'),
         url('../fonts/DIN_Neuzeit_Grotesk/DINNeuzeitGroteskLT-BoldCond') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'FuturaLT-Light';
    src: url('../fonts/Futura_Light/FuturaLT-Light') format('woff2'),
         url('../fonts/Futura_Light/FuturaLT-Light.woff') format('woff'),
         url('../fonts/Futura_Light/FuturaLT-Light.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'FuturaLT-Book';
    src: url('../fonts/Futura_Light/FuturaLT-Book.woff2') format('woff2'),
         url('../fonts/Futura_Light/FuturaLT-Book.woff') format('woff'),
         url('../fonts/Futura_Light/FuturaLT-Book.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

html {
	scroll-behavior: smooth;
}
body {
    padding-top: 0px; /* Assure que le contenu ne soit pas masqué sous le header fixe */
    background-color: #DDDDDD;
    margin: 0;
    padding: 0;
}

/* Fixer l'en-tête */
header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background-color: #466678;
    color: white;
    padding: 5px 20px;
    text-align: right; /* Aligne le texte du header à droite */
    z-index: 1000;
    box-sizing: border-box;
}

nav ul {
    list-style-type: none;
    padding: 0;
    font-family: 'FuturaLT-Light', sans-serif;
    margin: 0;
    display: flex; /* Utilisation de flexbox pour un meilleur alignement */
    justify-content: flex-end; /* Aligner les éléments à droite */
    width: 100%; /* Assurer que le menu prend toute la largeur disponible */
    box-sizing: border-box;
}

nav ul li {
    display: inline-flex; /* Utilise inline-flex pour s'ajuster automatiquement */
    align-items: center;
    margin-left: 20px;
}

nav ul li a {
    color: white;
    text-decoration: none;
    font-family: 'FuturaLT-Light', sans-serif;
    display: inline-block; /* Permet au lien de s'ajuster sans couper */
    padding: 10px 15px; /* Un peu de padding pour éviter que le texte touche les bords */
    white-space: nowrap; /* Empêche le texte de se couper en plusieurs lignes */
    font-size: 1.2em; /* Taille de police pour une meilleure lisibilité */
}

nav ul li a.active {
    font-family: 'FuturaLT-Light', sans-serif; /* Police différente pour le lien actif */
    font-weight: bold; /* Optionnel : Mettre en gras */
    color: white; /* Couleur différente pour mieux identifier */
    text-decoration: underline; /* Optionnel : souligner */
}
/* Section vidéo */
.video-section {
    position: relative;
    height: 100vh; /* S'assure que la section vidéo prend toute la hauteur de l'écran */
    overflow: hidden;
}

.video-section video {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Pour garder une bonne couverture de l'écran */
}

.video-overlay {
    position: absolute;  /* Utiliser absolute pour un positionnement par rapport à la section parent */
    top: 10%; /* Positionner le texte à 15% du haut de la section vidéo */
    left: 50%;
    transform: translateX(-50%); /* Garder le texte centré horizontalement */
    color: white;
    text-align: center;
    width: 100%; /* Assure que le texte ne dépasse pas de la vidéo */
    z-index: 2; /* Assurer que le texte est au-dessus de la vidéo */
    opacity: 0; /* Le texte est initialement invisible */
    visibility: hidden; /* Le texte est caché au départ */
    transition: opacity 2s ease-in-out; /* Animation de l'opacité sur 2 secondes */
}

/* Cette classe sera ajoutée via JS après 3 secondes */
.video-overlay.show {
    opacity: 1; /* Le texte devient visible */
    visibility: visible; /* Le texte est affiché */
}

/* Animation du titre */
.video-overlay h2 {
    margin: 0;
    font-size: 6em; /* Agrandir le texte PATTAGRAF */
    font-weight: bold;
    color: #466678; /
    text-transform: uppercase; /* Mettre en majuscules */
    font-family: 'DIN Neuzeit Grotesk', sans-serif; 
    letter-spacing: 0.1em; /* Étirer un peu la police */
	transform: scale(1, 1.3); /* Étirer verticalement */
}

.video-overlay p {
    margin: 0;
    font-size: 1.8em; /* Taille de la police pour le texte */
    font-family: 'FuturaLT-Light', sans-serif;
    color: #466678; /* Appliquer la même couleur que PATTAGRAF */
	letter-spacing: 0.1em; /* Étirer un peu la police */
}



/* Mosaïque d'images */


#imagerie3d h2 {
    font-size: 4.5em;
    color: #466678;
    font-family: 'DIN Neuzeit Grotesk', sans-serif;
	text-transform: uppercase;
	letter-spacing: 0.1em; /* Étirer un peu la police */
	transform: scale(1, 1.3); /* Étirer verticalement */
	margin-bottom: 30px; /* Réduire l'espacement sous le titre */
	text-align:center;
}

#imagerie3d p {
    font-size: 1.2em;
    color: #466678;
    font-family: 'FuturaLT-Light', sans-serif;
    max-width: 800px;
    text-align: center;
    margin:  auto; /* Centre le bloc horizontalement */
	margin-bottom: 30px; /* Réduire l'espacement sous le titre */
}

.mosaic-section {
    padding: 0px;
    display: flex;
    justify-content: center; /* Centrer horizontalement la mosaïque */
    width: 100%;
    box-sizing: border-box;
}

.mosaic {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); /* Augmente la taille minimale des colonnes */
    gap: 15px; /* Ajoute un petit écart entre les vignettes pour une meilleure lisibilité */
    width: 100%; /* La grille occupe toute la largeur */
    margin: 0; /* Supprime toute marge */
	margin-bottom: 15px; /* Supprime toute marge */
}

.mosaic__item {
	display:block;
	width: 100%;
    height: 100%;
	overflow:hidden;
	position:relative;
	aspect-ratio: 1;
}

.mosaic__item img {
	max-width: 100%;
	aspect-ratio: 1; 
	object-fit: cover;
	transition: transform 0.5s ease;
	z-index:10;
}

.mosaic__item__overlay {
	opacity: 0;
	position: absolute;
    background: rgba(70, 102, 120, 0.8);
	font-family: 'FuturaLT-Light', sans-serif;
    height: 100%;
    width: 100%;
    text-align: center;
    align-items: center;
    display: flex;
    justify-content: center;
    color: white;
	transition: all 0.3s ease;
	z-index:15;
}

.mosaic__item:hover .mosaic__item__overlay {
	opacity: 1;
}

.mosaic__item:hover img {
	transform: scale(1.2);
}

/* Section À propos */
.about-section {
    padding: 5px 5px;
    background-color: #466678;
    text-align: center;
}

.about-section h2 {
    font-size: 4.5em;
    color: white;
    font-family: 'DIN Neuzeit Grotesk', sans-serif;
	text-transform: uppercase;
	letter-spacing: 0.1em; /* Étirer un peu la police */
	transform: scale(1, 1.3); /* Étirer verticalement */
	margin-bottom: 30px; /* Réduire l'espacement sous le titre */
}

.about-section p {
    font-size: 1.16em;
    color: white;
    font-family: 'FuturaLT-Light', sans-serif;
    max-width: 800px;
    text-align: center;
    margin:  auto; /* Centre le bloc horizontalement */
	margin-bottom: 30px; /* Réduire l'espacement sous le titre */
}

/* Section Contact */
.contact-section {
    padding: 20px 20px;
    background-color: #dddddd;
    text-align: left;
}

.contact-section h2 {
    text-align: center;
    font-size: 4.5em;
    color: #466678;
    font-family: 'DIN Neuzeit Grotesk', sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    transform: scale(1, 1.3);
    margin-bottom: 200px;
}

/* Conteneur principal */
.contact-container {
     display: flex;
    flex-wrap: wrap; /* Permet de passer en lignes sur petits écrans */
    gap: 20px; /* Espacement entre les colonnes */
    justify-content: center; /* Centre les colonnes horizontalement */
    align-items: flex-start; /* Aligne les colonnes en haut */
    margin: 0 auto; /* Centre le conteneur dans la section */
    max-width: 1000px; /* Limite la largeur totale */
	margin-bottom: 50px;
}

/* Colonne Informations */
.contact-info {
    flex: 1; /* Prend l'espace disponible */
    font-size: 1.2em;
    color: black;
    font-family: 'FuturaLT-Light', sans-serif;
    min-width: 300px; /* Largeur minimale pour ne pas être trop étroit */
}

/* Colonne Formulaire */
.contact-form-container {
    flex: 1; /* Prend l'espace disponible */
    min-width: 300px; /* Largeur minimale */
}

.contact-form {
    display: flex;
    flex-direction: column;
    gap: 15px; /* Espacement entre les champs */
}

.form-group {
    display: flex;
    flex-direction: column;
}

.form-group label {
    font-size: 1rem;
    margin-bottom: 5px;
    color: #555;
}

.form-group input,
.form-group textarea {
    padding: 10px;
    font-size: 1rem;
    border: 1px solid #ccc;
    border-radius: 4px;
    width: 100%; /* Responsive */
    box-sizing: border-box;
}

button[type="submit"] {
    background-color: #466678;
    color: white;
    padding: 10px 15px;
    font-size: 1rem;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

button[type="submit"]:hover {
    background-color: #2e4a5d;
}



/* Footer */
footer {
    background-color: #466678;
    color: white;
    text-align: center;
    padding: 5px;
    margin-top: 0px;
}

/* Styles responsives */
@media (max-width: 768px) {
    nav ul {
        flex-direction: column; /* Aligner les éléments du menu verticalement sur petits écrans */
        align-items: center;
    }
	
	 body {
        padding-top: 60px; /* Ajuster en fonction de la hauteur du header pour éviter le chevauchement */
    }

    .video-overlay h2 {
        font-size: 3em; /* Réduire la taille sur petits écrans */
    }

    .video-overlay p {
        font-size: 1.5em; /* Réduire la taille sur petits écrans */
    }

    .about-section h2 {
        font-size: 3em;
    }

    .about-section p {
        font-size: 1em;
    }
	
	.contact-container {
        flex-direction: column; /* Les colonnes passent en lignes sur petits écrans */
    }
}

/* EFFECT IMAGE MAGIC*/

#about__title,
#contact__title,
#imagerie__title {
	opacity: 0;
	-webkit-transition: all 2s ease-in-out;
		 -moz-transition: all 2s ease-in-out;
			-ms-transition: all 2s ease-in-out;
			 -o-transition: all 2s ease-in-out;
					transition: all 2s ease-in-out;
}

#about__title.visible,
#contact__title.visible,
#imagerie__title.visible {
	opacity: 1;
}

@-webkit-keyframes bounce {
  from,
  20%,
  53%,
  to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  40%,
  43% {
    -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    -webkit-transform: translate3d(0, -30px, 0) scaleY(1.1);
    transform: translate3d(0, -30px, 0) scaleY(1.1);
  }

  70% {
    -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    -webkit-transform: translate3d(0, -15px, 0) scaleY(1.05);
    transform: translate3d(0, -15px, 0) scaleY(1.05);
  }

  80% {
    -webkit-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    -webkit-transform: translate3d(0, 0, 0) scaleY(0.95);
    transform: translate3d(0, 0, 0) scaleY(0.95);
  }

  90% {
    -webkit-transform: translate3d(0, -4px, 0) scaleY(1.02);
    transform: translate3d(0, -4px, 0) scaleY(1.02);
  }
}
@keyframes bounce {
  from,
  20%,
  53%,
  to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  40%,
  43% {
    -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    -webkit-transform: translate3d(0, -30px, 0) scaleY(1.1);
    transform: translate3d(0, -30px, 0) scaleY(1.1);
  }

  70% {
    -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    -webkit-transform: translate3d(0, -15px, 0) scaleY(1.05);
    transform: translate3d(0, -15px, 0) scaleY(1.05);
  }

  80% {
    -webkit-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    -webkit-transform: translate3d(0, 0, 0) scaleY(0.95);
    transform: translate3d(0, 0, 0) scaleY(0.95);
  }

  90% {
    -webkit-transform: translate3d(0, -4px, 0) scaleY(1.02);
    transform: translate3d(0, -4px, 0) scaleY(1.02);
  }
}
.animate__bounce {
  -webkit-animation: bounce 2s infinite; !important;
  animation: bounce 2s infinite; !important;
  -webkit-transform-origin: center bottom  !important;
  transform-origin: center bottom  !important;
}

#imagerie3d .mosaic__item {
	opacity: 0;
	-webkit-transform: translateX(-40px);
		 -moz-transform: translateX(-40px);
			-ms-transform: translateX(-40px);
			 -o-transform: translateX(-40px);
					transform: translateX(-40px);
	-webkit-transition: all 2s ease-out;
		 -moz-transition: all 2s ease-out;
			-ms-transition: all 2s ease-out;
			 -o-transition: all 2s ease-out;
					transition: all 2s ease-out;
}
#imagerie3d.visible .mosaic__item {
	opacity: 1;
	-webkit-transform: none;
		 -moz-transform: none;
			-ms-transform: none;
			 -o-transform: none;
					transform: none;
}

.form-ws {
	display: none;
}