/* BODY, HTML */
body, html {font-family:'Lato', sans-serif;font-size: 110%;margin: 0;padding: 0;overflow-x: hidden;scroll-behavior: smooth;}
/* SCROLLBAR */
::-webkit-scrollbar {width: 15px;}::-webkit-scrollbar-track {box-shadow: inset 0 0 5px #e5dfd4;}
/* TITRES */
h1 {font-size:130%;width:100%;text-align:left;}
h2 {font-size:110%;width:100%;text-align:left;}
h3 {font-size:100%;width:100%;text-align:left;}
h4 {font-size:90%;font-weight:300;}
hr {width: 50%; margin-left: 0;}
/* MENU */
#menu {position: fixed;top: 0;
    width: 100%;
    background: rgba(255, 255, 255, 0.5);
    box-shadow: 1px 1px 6px #555;
    z-index: 2000;
    display: flex; /* Utilise flexbox pour aligner les éléments de menu */
    justify-content: start; /* Alignement horizontal au début */
    padding: 1% 5%;} /* Adapté de la version précédente pour le menu global */
.menu-item {margin-right: 20px;font-size:100%; /* Espace entre les éléments de menu */}
.menu-item a{text-decoration:none;}
@media (max-width: 1000px) {#menu {display: none;}}
/* HAMBURGER */
.A_appel-menu-mobile {display: none;}
@media (max-width: 1000px) {.A_appel-menu-mobile {display:inline-block;position:fixed;top:5%;right:5%;z-index:2000;}}
/* LOGO */
#logo {position: absolute;top: 15%; left: 5%;max-width: 400px;z-index:1000 /* Largeur maximale par défaut */
/* Animation de zoom ici si nécessaire */}
#logo img {width: 100%; /* Permet à l'image de s'adapter à la taille de son conteneur */
height: auto; /* Maintient le rapport hauteur / largeur de l'image */}
/* Pour les écrans de moins de 1000px */
@media (max-width: 999px) {#logo {max-width: 300px; /* Largeur maximale sur petits écrans */}}
/* SLOGAN - CALL */
#slogan, #call {position: absolute;left: 5%; z-index: 100;font-size:120%;}
#slogan { top: 45%;}
#call { top: 55%; z-index: 100; }
#call a{text-decoration:none;}
@media (max-width: 1000px) {#logo {top:5%;}#slogan {top:30%;}#call{top:50%}}
/* FLECHE */
.A_fleche{position:absolute;bottom:20%;left:48%;overflow:hidden;z-index:500}
@media (max-width: 1000px) {.A_fleche {left:80%;}}
/* CONTENEUR */
.conteneur {width: 100%; /* Prend toute la largeur */}
/* PARALLAX */
.parallax {
    height: 200px; /* Hauteur par défaut pour les images */
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    z-index: 50;
}
#parallax-video {
    position: relative;
    width: 100%;
    height: 100vh; /* Hauteur de la vue entière */
    overflow: hidden; /* Masque les débordements pour garantir le respect des dimensions */
}
#parallax-video video {
    /* Centrage horizontal et vertical */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    min-height: 100%; /* S'assure que la hauteur est au minimum celle de #parallax-video */
    min-width: 100%; /* S'assure que la largeur est au minimum celle de #parallax-video */
    width: auto;
    height: auto;
    object-fit: cover; /* S'assure que la vidéo couvre l'espace disponible sans distortion */
}
/* DIV OPACIFIANT LA VIDEO */
#video-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.3); /* Gris avec 80% de transparence */
    z-index: 55; /* S'assure qu'il recouvre la vidéo mais reste sous d'autres contenus éventuels */
    backdrop-filter: blur(0px); /* Applique un effet de flou */
}
/* GALERIE */
.galerie img {
  width: 800px; /* Largeur fixe pour toutes les images */
  padding-top: 10px; /* Espacement en haut */
  padding-right: 10px; /* Espacement à droite */
  padding-bottom: 10px; /* Espacement en bas */
  display: block; /* Permet de respecter le padding sans déborder */
  margin-left: auto;
  margin-right: auto; /* Centrer les images */
}
@media (max-width: 1000px) {
.galerie img {
  width: 100%; /* Les images prennent toute la largeur du conteneur parent */
  padding-top: 10px; /* Espacement en haut */
  padding-right: 5%; /* Espacement à droite */
  padding-bottom: 10px; /* Espacement en bas */
  padding-left:0%
  }
}
/* IFRAME */
#iframe {margin:1% 0% 1% 0%}
/* GENERALITES POUR LES TEXTES */
.texte {
    padding:2% 5%;
    z-index: 50;
}
/* conteneur centré avec image centrée - contact */
.conteneur-centre-contact {
  display: flex;
  flex-direction: column; /* Organise les éléments en colonne */
  align-items: center; /* Centre horizontalement */
  justify-content: center; /* Centre verticalement si vous avez une hauteur définie */
  text-align: center; /* Centre le texte à l'intérieur des blocs ou éléments */
  background-color:grey;
}
.logo-contact {
  margin-bottom: 20px; /* Espacement entre le logo et le texte suivant */
  max-width: 300px;
}
/* COULEURS */
/* https://web-color.aliasdmc.fr/couleurs-hexa-rgb-hsl-predefini-html-css.php */
/* #0b2c71 */
/* #272727 */
body, html {color:#1a1a1a;}/* texte corps */
::-webkit-scrollbar-thumb {background: #0b2c71;}
#call a {color:#0b2c71;}
.conteneur-centre-contact p {color:white;}
H1, H2, H3, hr, #slogan p, .menu-item a {color:#0b2c71;}
/* ANIMATIONS */
.animate-left{position:absolute;animation:animateleft 3s}@keyframes animateleft{from{right:15%;opacity:0} to{right:5%;opacity:1}}
.A_animate-bottom{position:absolute;animation:animatebottom 2s;animation-iteration-count: infinite;animation-direction: alternate}@keyframes animatebottom{from{bottom:-1%;opacity:0} to{bottom:20%;opacity:1}}
.animate-zoom {animation:animatezoom 3s}@keyframes animatezoom{from{transform:scale(0)} to{transform:scale(1)}}
.animate-opacity{animation:opac 7s}@keyframes opac{from{opacity:0} to{opacity:1}}
.animate-top{animation:animatetop 1s}@keyframes animatetop{from{top:-10%;opacity:0} to{top:0%;opacity:1}}
.animate-opacity-card{animation:opac 4s}@keyframes opac{from{opacity:0} to{opacity:1}}
.animate-spin{animation:w3-spin 2s infinite linear}@keyframes w3-spin{0%{transform:rotate(0deg)}100%{transform:rotate(359deg)}}