/* RESET & BASE */
*{margin:0;padding:0;box-sizing:border-box;}
html,body{width:100%;height:100%;min-height:100vh;overflow-x:hidden;font-family:Lato,sans-serif;letter-spacing:0.05em;line-height:1.6;background-color:transparent;}

/* image de background et ses effets */
.bg-photo{position:fixed;top:0;left:0;width:100%;height:100%;background-image:url('BACKGROUND-PHOTO/background.jpg');background-size:cover;background-position:center;background-repeat:no-repeat;z-index:-1;transform:scale(1.2);filter:blur(4px);animation:zoomBlurTogether 3s ease-out forwards;transform-origin:center center;will-change:transform,filter;}
@keyframes zoomBlurTogether{0%{transform:scale(1.2);filter:blur(4px);}100%{transform:scale(1);filter:blur(0);}}

/* BACKGROUND video*/
.background-container { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; overflow: hidden; }
.background-container video {
  top: 0; 
  left: 0;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(100%) blur(0px);
  opacity: 0.8;
}

/* LES POLICES ET TEXTES */
h1{font-size:130%;text-transform:uppercase;width:100%;text-align:left;font-weight:normal;padding:1% 0;}
h2{font-size:110%;text-transform:uppercase;width:100%;font-weight:normal;padding:1% 0;}
h3{font-size:90%;width:100%;text-align:left;}
h4{font-size:90%;font-weight:300;}
p {padding-top: 0.5em;}
hr{width:50%;height:1px;margin:0 0 1% 0;margin-left:0;border:none;}
ul{list-style:none;margin:0;padding:0;}
li{position:relative;margin:0.5em 0;padding-left:1.5em;}
li::before{content:"\2752";position:absolute;left:0;top:0.2em;line-height:1;}
.lien-sans-decoration {text-decoration: none;color: inherit;}

/* ============================================
   MENU UNIFIÉ (DESKTOP + MOBILE)
   ============================================ */

/* Barre de menu fixe */
.menu{position:fixed;top:0;width:100%;padding:1% 5%;z-index:20;box-shadow:4px 4px 6px rgba(0,0,0,0.3);background-color:rgba(242,240,232,1);display:flex;align-items:center;justify-content:space-between;}

/* Hamburger */
.menu-hamburger{cursor:pointer;display:none;} /* caché par défaut (desktop) */

/* Navigation */
.menu-nav{}

/* Menu principal */
.menu-principal{display:flex;gap:2em;align-items:center;}
.menu-principal > li{position:relative;margin:0;padding:0;}
.menu-principal > li::before{display:none;}
.menu-principal > li > a{text-decoration:none;color:#292424;text-transform:uppercase;font-size:90%;padding:0.5em 0;display:block;transition:color 0.3s;}
.menu-principal > li > a:hover{color:#1A72BB;}
.menu-principal > li > a i{font-size:70%;margin-left:0.3em;transition:transform 0.3s;}
.menu-principal > li.open > a i{transform:rotate(180deg);}

/* Sous-menus (desktop) */
.sous-menu{position:absolute;top:100%;left:0;min-width:200px;background-color:rgba(242,240,232,1);box-shadow:4px 4px 6px rgba(0,0,0,0.3);opacity:0;visibility:hidden;transform:translateY(-10px);transition:all 0.3s ease;}
.sous-menu li{margin:0;padding:0;}
.sous-menu li::before{display:none;}
.sous-menu li a{display:block;padding:0.8em 1.2em;text-decoration:none;color:#292424;font-size:85%;transition:background-color 0.3s;}
.sous-menu li a:hover{background-color:rgba(26,114,187,0.1);}
.has-submenu.open .sous-menu{opacity:1;visibility:visible;transform:translateY(0);}

/* ============================================
   ÉLÉMENTS FIXES
   ============================================ */
iframe {border: none;}
.logo{position:absolute;top:15%;left:5%;width:300px;filter:drop-shadow(4px 4px 6px rgba(0,0,0,0.3));}
.logo img{width:100%;height:auto;}
.telephone,.message,.partager{position:fixed;left:70%;width:25%;box-shadow:4px 4px 6px rgba(0,0,0,0.3);background-color:rgba(242,240,232,1);padding:1% 2%;color:rgb(16,97,169);}
.telephone{top:16%;z-index:11;text-decoration:none;color:inherit;}
.message{top:28%;z-index:10;}
.partager{top:40%;z-index:9;}
.contenu{position:absolute;top:80%;left:0;width:100%;background-color:rgba(242,240,232,1);padding:1% 5%;z-index:9;max-width:100%;box-sizing:border-box;}
.contact,.copyright{text-align:center;padding:2%;}

/* GALERIE */
.galerie{text-align:center;}
.galerie img{width:90%;padding:1% 0;display:block;margin:0 auto;}

/* Animations */
@keyframes fadeZoomIn{0%{opacity:0;transform:scale(0.8);}100%{opacity:1;transform:scale(1);}}
.apparition-droite{animation:fadeZoomIn 1s ease forwards;opacity:0;}
@keyframes slideInRight{from{transform:translateX(10%);opacity:0;}to{transform:translateX(0);opacity:1;}}
.slide-in-right{opacity:0;transition:opacity 0.5s ease-in-out;}
@keyframes pulse{0%{transform:scale(1);}50%{transform:scale(1.5);}100%{transform:scale(1);}}
.pulse-effect{animation:pulse 2s ease-in-out infinite;animation-delay:2.4s;color:rgb(16,97,169);}

/* ============================================
   COULEURS
   ============================================ */
.menu,.telephone,.message,.installer,.partager,.contenu,.galerie,.tableau,.contact,.copyright{background-color:rgba(242,240,232,1);}
h1,h2,h3,h4{color:rgb(33,31,33);}
.slogan{color:rgb(255,255,255);}
.menu,.telephone,.message,.partager,.installer{color:#292424;}
hr{background-color:#1A72BB;}
.pulse-effect,.mail-contact,li::before{color:#1A72BB;}
.message,.realisations{background-color:#1A72BB;color:white;}

/* ============================================
   RESPONSIVE MOBILE (<=768px)
   ============================================ */
@media(max-width:768px){
  .menu{flex-wrap:wrap;padding:2% 5%;}
  
  /* Hamburger visible */
  .menu-hamburger{display:block;}
  
  /* Navigation cachée par défaut */
  .menu-nav{display:none;width:100%;margin-top:1em;}
  .menu-nav.open{display:block;}
  
  /* Menu vertical */
  .menu-principal{flex-direction:column;gap:0;align-items:flex-start;width:100%;}
  .menu-principal > li{width:100%;border-top:1px solid rgba(0,0,0,0.1);}
  .menu-principal > li > a{padding:1em 0;}
  
  /* Sous-menus mobile */
  .sous-menu{position:static;box-shadow:none;background-color:rgba(0,0,0,0.05);max-height:0;overflow:hidden;opacity:1;visibility:visible;transform:none;transition:max-height 0.3s ease;}
  .has-submenu.open .sous-menu{max-height:500px;}
  .sous-menu li a{padding:0.8em 1.5em;}
  
  /* Logo mobile */
  .logo{position:absolute;top:30%;left:5%;transform:none;width:300px;}
  
  /* Blocs téléphone, message, partager : empilés sous le logo */
  .telephone,.message,.partager{position:absolute;left:5%;width:70%;padding:3% 4%;}
  .telephone{top:50%;}
  .message{top:60%;}
  .partager{top:70%;}
  
  .contenu{top:80%;}
}