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

/* BACKGROUND PHOTO */
.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{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:brightness(100%) blur(0px);opacity:0.8;}

/* TYPOGRAPHIE */
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;}
iframe{border:none;}

/* MENU */
.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;min-height:56px;}
.menu-hamburger{cursor:pointer;display:none;}
.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 */
.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;z-index:21;}
.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 HERO */
.logo{position:absolute;top:15%;left:5%;width:clamp(160px,28vw,300px);z-index:10;}
.logo img{width:100%;height:auto;display:block;}
.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 */
.contenu{position:absolute;top:70%;left:0;width:100%;background-color:rgba(242,240,232,1);padding:2% 5% 4%;z-index:9;box-sizing:border-box;}

/* GALERIE / CONTACT / COPYRIGHT */
.contact,.copyright{text-align:center;padding:2%;}
.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;}
.pulse-effect{color:#F1E138;}
/* ============================================
   TABLETTE (769px – 1024px)
   ============================================ */
@media(min-width:769px) and (max-width:1024px){
  .logo{top:12%;left:3%;width:clamp(140px,22vw,260px);}
  .telephone,.message,.partager{left:58%;width:38%;padding:1.2% 2%;}
  .telephone{top:15%;}
  .message{top:27%;}
  .partager{top:39%;}
  .menu-principal{gap:1em;}
  .menu-principal > li > a{font-size:82%;}
  .contenu{top:80%;padding:3% 4%;}
}

/* ============================================
   MOBILE (≤768px)
   ============================================ */
@media(max-width:768px){
  /* Menu hamburger */
  .menu{flex-wrap:wrap;padding:3% 5%;}
  .menu-hamburger{display:block;}
  .menu-nav{display:none;width:100%;margin-top:1em;}
  .menu-nav.open{display:block;}
  .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;}
  .menu-principal > li > a:hover,
  .menu-principal > li.active > a{border-bottom:none;padding-bottom:1em;}

  /* Sous-menus mobile : déroulant vertical */
  .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 + partager : absolute, disparaissent au scroll naturellement */
  .logo{position:absolute;top:10%;left:5%;width:clamp(200px,80vw,360px);z-index:10;}
  .partager{position:absolute;top:60%;left:5%;width:90%;padding:3% 4%;box-sizing:border-box;z-index:9;}

  /* Tel + Message : fixed, position initiale, transition au scroll */
  .telephone{position:fixed;top:40%;left:5%;width:90%;padding:3% 4%;box-sizing:border-box;z-index:11;transition:top 0.4s ease;}
  .message  {position:fixed;top:50%;left:5%;width:90%;padding:3% 4%;box-sizing:border-box;z-index:10;transition:top 0.4s ease;}

  /* Contenu : après les blocs hero */
  .contenu{position:relative;top:auto;margin-top:80vh;padding:5% 5% 8%;}
}