/* BODY, HTML */
body, html {font-family:'Lato', sans-serif;font-size: 100%;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 {position: relative; font-size:130%;text-transform: uppercase;width:100%;text-align:left;font-weight:normal;padding:0px 0px 20px 0px}
h2 {font-size:110%;text-transform: uppercase;width:100%;font-weight:normal;}
h3 {font-size:100%;width:100%;text-align:left;}
h4 {font-size:90%;font-weight:300;}
hr {width: 50%; margin-left: 0;border: none; height: 1px; background-color: #4a5375;}
/* MENU */
#menu {
    position: fixed;
    top: 0px;
    width: 100%;
    background: #df3e1a;
    /* box-shadow: 1px 1px 6px #555; */
    z-index: 2000;
    display: flex;
    justify-content: start;
    padding: 3% 5%;
}
.submenu {
    display: none; /* Masque par défaut les sous-menus */
    position: absolute; /* Positionne les sous-menus juste en dessous des items du menu */
    background-color: #fff; /* Fond blanc pour les sous-menus */
    /* box-shadow: 0 8px 16px rgba(0,0,0,0.2); Ombre pour un effet de profondeur */
    z-index: 1000; /* S'assure que le sous-menu est au-dessus des autres éléments */
    width: 500px; /* Largeur fixe pour tous les sous-menus */
    left: 0; /* Aligné à gauche avec l'élément parent */
}
.menu-item {
    margin-right: 20px;
    font-size: 110%;
    position: relative; /* Position relative pour le positionnement absolu des sous-menus */
    text-transform: uppercase;
}

.menu-item-tel a{
    margin-right: 20px;
    font-size: 110%;
    position: relative; /* Position relative pour le positionnement absolu des sous-menus */
    text-decoration:none;
}

@media (max-width: 1000px) {.menu-item {padding-left:30px;}}
.menu-item a {
    text-decoration: none;
    font-size: 100%;
    transition: color 0.3s; /* Ajout d'une transition pour un effet plus fluide */
}
.menu-item a:hover {
    color: #124653; /* Couleur des liens de menu au survol */
}
.menu-item .submenu {
    display: none; /* Cache le sous-menu par défaut */
    position: absolute;
    background: rgba(255, 255, 255, 0.8);
    box-shadow: 1px 1px 6px #555;
    z-index: 2500;
    width: auto;
    padding: 15px; /* Espacement autour des liens du sous-menu */
    line-height:150%;
}
.menu-item:hover .submenu {
    display: block; /* Affiche le sous-menu au survol */
}
@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: 25%; left: 5%;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 {position: absolute;left: 5%; z-index: 100;font-size:140%;}
#slogan { top: 50%;}
@media (max-width: 1000px) {#logo {top:5%;}#slogan {top:60%;}}
/* Style pour les boutons CALL ET MAIL */
.phone-div {position: absolute;left: 5%; top: 65%;font-size: 110%;z-index: 500;padding: 0px 20px;text-decoration: none;cursor: pointer; /* curseur qui indique que c'est cliquable */}
.phone-div:hover {transform: scale(1.05);transition: transform 0.2s;background-color: white;}
#call, #mail {padding: 0;margin: -10px 0 -10px 0; /* marge négative pour réduire l'espace au-dessus et en dessous */}
.phone-div a {text-decoration: none;color: black;padding: 0 0;}
@media (max-width: 1000px) {.phone-div {top: 50%; /* placement à 50% du haut pour les écrans plus petits */}}
.call-button {left: 5%; /* Définir selon besoin */}
.mail-button {left: 20%; /* Ajuster cette valeur pour placer le bouton à droite du bouton appel */}
@media (max-width: 1000px) {.mail-button {left:5%;top:40%; /* Ajuster cette valeur pour placer le bouton à droite du bouton appel */}}

/* FLECHE */
.A_fleche{position:absolute;bottom:20%;left:70%;overflow:hidden;z-index:500}
@media (max-width: 1000px) {.A_fleche {left:80%;}}

/* CONTENEUR */
.conteneur {width: 100%; /* Prend toute la largeur */}

/* TABLEAU TARIFS */
table {width: 90%;border-collapse: collapse;margin:2% 5% 2% 5%}
th, td {border: 1px solid gray;padding: 8px;}
th {background-color: #f2f2f2;}
.description {text-align: left;}.prix {text-align: left;}

/* DIV OPACIFIANT LA VIDEO */
.video-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.4); /* 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 */
}

/* PARALLAX */
.parallax {
    height: 300px; /* Hauteur par défaut pour les images */
    width:100%;
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    z-index: 50;
}

/* Cibler spécifiquement les appareils iOS */
@media (max-width: 1024px) and (-webkit-min-device-pixel-ratio: 2), (max-width: 1024px) and (min-resolution: 192dpi) {
    .parallax {
        /* Sur iOS, on remplace fixed par scroll */
        background-attachment: scroll;
    }
}

#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 */
}

#parallax-image {
    position: relative;
    width: 100%;
    height: 100vh; /* Hauteur de la vue entière */
    overflow: hidden; /* Masque les débordements pour garantir le respect des dimensions */
    display: flex;
    justify-content: center;
    align-items: center;
}

#parallax-image img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    min-height: 100%;
    min-width: 100%;
    width: auto;
    height: auto;
    object-fit: cover;
}



/* DIV ENTRANTE PAR LA DROITE */
.hidden {opacity: 0;transform: translateX(100%);transition: all 1s;}
.visible {opacity: 1;transform: translateX(0);}

/* 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 */
}
.logo-contact {
  margin-bottom: 20px; /* Espacement entre le logo et le texte suivant */
  max-width: 200px;
}

/* COULEURS */
/* https://web-color.aliasdmc.fr/couleurs-hexa-rgb-hsl-predefini-html-css.php */
/* ROUGE : #df3e1a */
/* VERT : #124653 */

/* COLOR BODY-HTML */
body, html {color:#323232;}
/* COLOR ELEMENTS DANS LE MENU */
.menu-item a {color:white;}
/* COLOR TEL DANS LE MENU */
.menu-item-tel a {color:white;}
/* COLOR ASCENSEUR */
::-webkit-scrollbar-thumb {background:#124653;}
/* COLOR H1 etc ... */
H1, H2, H3 {color: #124653;}
/* COLOR LIGNE */
hr {background-color: #497511;}
/* COLOR SLOGAN */
#slogan {color: #124653;}
/* COLOR DES TEL ET MAIL */
.phone-div {background-color:#124653;color:white;}
/* COLOR partie contact */
.conteneur-centre-contact {background-color: #df3e1a;color:white;}

/* 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)}}