/* 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;} /* base générale + anti débordement */

/* image de background et ses effets */
/* image de background et ses effets */
.bg-photo{position:fixed;top:0;left:0;width:100%;height:100%;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;} /* image de fond animée */
@keyframes zoomBlurTogether{0%{transform:scale(1.2);filter:blur(4px);}100%{transform:scale(1);filter:blur(0);}} /* animation de fond */
.page-index .bg-photo { background-image: url('BACKGROUND-PHOTO/index.jpg'); }
.page-services .bg-photo { background-image: url('BACKGROUND-PHOTO/services.jpg'); }
.page-toiture .bg-photo { background-image: url('BACKGROUND-PHOTO/toiture.jpg'); }
.page-plateforme .bg-photo { background-image: url('BACKGROUND-PHOTO/plateforme.jpg'); }
.page-charpente .bg-photo { background-image: url('BACKGROUND-PHOTO/charpente.jpg'); }
.page-isolation .bg-photo { background-image: url('BACKGROUND-PHOTO/isolation.jpg'); }
.page-bardage .bg-photo { background-image: url('BACKGROUND-PHOTO/bardage.jpg'); }
.page-zinguerie .bg-photo { background-image: url('BACKGROUND-PHOTO/zinguerie.jpg'); }

/* 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.6;
}

/* 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:100%;width:100%;text-align:left;}
h4{font-size:90%;font-weight:300;}
hr{width:50%;height:1px;margin:0 0 2% 0;margin-left:0;border:none;} /* ligne horizontale */
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;} /* icône carrée */
.lien-sans-decoration {text-decoration: none;color: inherit;}

/* MENU fixe en haut */
.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);}

/* MENU DÉROULANT */
.modal{display:none;position:fixed;z-index:3000;top:10%;left:50%;transform:translateX(-50%);width:80%;max-height:80%;height:auto;overflow-y:auto;}
.modal-content{width:100%;padding:20px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;position:relative;background-color:aliceblue;}
.modal-content .close{position:absolute;top:10px;right:20px;font-size:30px;cursor:pointer;}
.modal-content a{display:block;margin:10px 0;font-size:20px;text-decoration:none;text-transform:uppercase;}
.modal-content a:hover{color:silver;}

iframe {
 border: none; box-shadow: 4px 4px 6px rgba(0, 0, 0, 0.3);
}

/* ÉLÉMENTS FIXES */
.logo{position:absolute;top:15%;left:5%;width:300px;}
.telephone,.message,.partager,.realisations {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:15%;z-index:11;}
.message {top:27%;z-index:10;}
.realisations {top:39%;z-index:9;}
.partager {top:51%;z-index:8;}
.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;} /* bloc contenu */
.contact,.copyright {text-align: center; padding: 2%}

.galerie {
  text-align: center;
}

.galerie img {
  width: 90%;
  padding: 1% 0;
  display: block;
  margin: 0 auto;
}


/* Apparition progressive + Zoom + apparition depuis la droite */
@keyframes fadeZoomIn{0%{opacity:0;transform:scale(0.8);}100%{opacity:1;transform:scale(1);}}
.apparition-droite{animation:fadeZoomIn 1s ease forwards;opacity:0;} /* effet zoom + fade */
@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;} /* glisse depuis la droite */
@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);} /* effet battement */

/* RESPONSIVE */
@media(max-width:768px){
.menu{padding:2% 5%;}
.telephone,.message,.partager,realisations{width:100%;left:40%;right:auto;padding:2% 3%;}
.telephone{top:10%;}
.message{top:20%;}
.realisations{top:30%;}
.partager{top:40%;}
.logo{top:50%;width:250px;}
.contenu{top:75%;}
}

/* COULEURS*/
  /*  FONCE:  anthracite  rgba(33,31,33,1) */
  /*  FONCE:  gris-bleu  rgba(59,76,105,1) */
  /*  CLAIR:  gris-bleu  rgba(138,164,185,1) */
  /*  MOYEN:  TAUPE  rgba(111,104,86,1) */
  /*  CLAIR:  crème clair  rgba(242, 240, 232,1) */
  /*  ICONES: bleu moyen rgba(16,97,169,1) */

/* FOND GENERAUX */.menu, .modal-content, .telephone, .message, .installer,.realisations,.partager, .contenu, .galerie, .tableau, .contact, .copyright
{background-color:rgba(242, 240, 232,1);}
/* POLICE TITRES ET LI */ h1, h2, h3, h4
{color:rgb(33,31,33);}
/* POLICE SLOGAN */ .slogan
{color:rgb(255,255,255);}
/* POLICE MENU ET BOUTONS */ .menu, .telephone, .message,.realisations,.partager, .installer, .modal-content a
{color:#292424;}
/* HR */ hr 
{background-color: #D80000}
/* ICONES ETC */ .pulse-effect,.mail-contact,.menu border-bottom, li::before
{color:#D80000;}
.realisations {background-color:#D80000; color:white}
/* BORDER PLEINES 
.telephone, .message, .partager, .installer
{border: 0.5px solid #D80000;}*/
/* BORDER MENU 
.menu
{border-bottom: 0.5px solid #D80000;}*/