html,body {
    margin: 0;
    padding: 0;
    overflow-x: hidden;
    overflow-y: auto;
    max-width: 100%;
}
@font-face {
    font-family: 'Dancing Script';
    src: url('./DancingScript-VariableFont_wght.ttf') format('truetype');
    font-weight: 400 700;
    font-style: normal;
}
header {
    background-color: rgb(0, 0, 0);  
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    max-width: 100%;
    max-height: 15%;
    position: relative;
    top: 0;
    z-index: 9999;
}
.principal {
    background: url('../images/gallaxy.webp') center center no-repeat fixed;
    background-size: 100% 100%;
    position: relative;
    background-attachment: fixed;
    display: flex;
    justify-content: space-between;
    max-width: 100%;
    overflow: hidden;
    display: grid;
    grid-template-columns: 40% 60%;
}
nav {
    margin: 0vh 0vh 2vh 0vh;
}
nav ul {
    display: flex;
    flex-direction: row;
    list-style: none;
    padding: 0vh;
    margin: 0;
    flex-wrap: wrap;
    margin-top: 0vh;
    transform: translateX(-100%);
    animation: slideIn 1s ease-out forwards;
    }
nav ul li:first-child {
    margin-left:10vh;
}
nav ul li {
    margin-right: clamp(-1vh, 7vw, 7vh);
    margin-left: clamp(-1vh, -5vw, -10vh); 
}
nav ul li:last-child {
    margin-right: 0vh;
}
.logo_img img{
    height: clamp(20vh, 25vh, 25vh);
    width: clamp(30vh, 38vh, 38vh);
    position: relative;
    top: 5px;
}
nav ul li.EPOXY a,nav ul li.Résidentiel a,nav ul li.Commercial a,nav ul li.Industriel a,nav ul li.contact a{
    padding:clamp(1vh, 3vh, 4vh);
    position: center;
    transition: color 0.3s,font-size 0.3s ease-in-out;
    margin-right: 1vh;
    margin-left: clamp(-15vh, 1vw, -10vh);
    font-size: clamp(1vw, 3.5vw, 3.5vw);
    color: aliceblue;
    background-repeat: no-repeat; 
    background-size: contain;
    background-position: center;
    font-weight: bold;
    z-index: 9999;
    background-size: 110% 105%;
    text-shadow: 
        1px 1px 2px rgba(0, 0, 0, 0.4),
        2px 2px 4px rgba(0, 0, 0, 0.6),
        0 0 25px rgba(0, 183, 255, 0.8),
        0 0 50px rgba(0, 183, 255, 1),
        0 0 75px rgba(0, 183, 255, 0.8),
        0 0 100px rgba(0, 183, 255, 0.6);
        animation: move 3s ease-in-out infinite;
}
nav ul li.EPOXY a {
    background-image: url('../images/33.webp');     
}
nav ul li.Résidentiel a {
    background-image: url('../images/34.webp');
} 
nav ul li.Commercial a {
    background-image: url('../images/35.webp');
} 
nav ul li.Industriel a {
    background-image: url('../images/36.webp');  
} 
nav ul li.contact a {
    background-image: url('../images/37.webp');     
} 
nav ul li a{
    text-decoration: none;
    font-family: 'Dancing Script', cursive;
}
nav ul li a:hover {
    text-decoration: underline;
    text-underline-offset: 1vh;
}
@keyframes move {
    0% {
        background-position: 100% 100%;
    }
    50% {
        background-position: 0% 0%;
    }
    100% {
        background-position: 100% 100%;
    }
}
@keyframes slideIn {
    0% {
        opacity: 0;
        transform: translateX(-100%);
    }
    100% {
        opacity: 1;
        transform: translateX(0);
    }
}
.top-content {
    top: 0vh;
    position: relative;
    display: inline-block;
    padding: 0;
    margin: 0 auto;
    max-width: 100%;
    caret-color: transparent; 
}
.top-content img {
    all: unset;
    display: block;
    object-fit: cover;
    transition: color 0.3s,font-size 0.3s ease-in-out;
    width: clamp(10vw, 53.5vw, 53.5vw);
    margin-left: 55%; 
    box-sizing: border-box;
    min-width: 100%;  
}

.top-content_residentiel {
    display: block;
    height: 100vh;
    left: -45%;
}
.top-content_residentiel img {
    margin-top: 5%;
    object-fit:fill;
    margin-left: 60%;
    width: clamp(40vw, 50vw, 50vw);
}


*{ box-sizing: border-box; }
    .floating-img_countainer {
        margin-top: 0vh;
        position: relative;
        padding: 0;
        width: 100%;
        height: 200vh;
    }
    .floating-img {
        position: absolute;
        transition: transform 0.2s ease-in-out;
        margin-top: 0vh;
    }
  .prev, .next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width:clamp(6vw, 10vw, 10vw);
  height:clamp(6vw, 8.5vw, 8.5vw);
  color: white;
  font-weight: bold;
  font-size:clamp(6vw, 10vw, 10vw);    
  background-color: rgba(0, 0, 0, 0.5);
  border-radius: 50%;
  text-align: center;
  line-height: 90%;
  user-select: none;
  }
  .next {
    right: 0.5%;
  }
  .prev {
  left: 0.5%;
  }
.img1 { top: 30%; left: -60%; width: 30vw; height: 30vh; }
.img2 { top: 30%; left: 30%; width: 40vw; height: 90vh; }
.img3 { top: 46%; left: -60%; width: 30vw; height: 58vh; }
.img4 { top: 30%; left: -8%; width: 20vw; height: 45vh; }
.img5 { top: 53%; left: -8%; width: 20vw; height: 44vh; }
.floating-img:hover,.next:hover,.prev:hover {
    transform: scale(1.1);
}
input[type="checkbox"]:checked + .image-label10 .img5,
input[type="checkbox"]:checked + .image-label9 .img4,
input[type="checkbox"]:checked + .image-label8 .img3,
input[type="checkbox"]:checked + .image-label7 .img2,
input[type="checkbox"]:checked + .image-label6 .img1,
input[type="checkbox"]:checked + .image-label5 .img5,
input[type="checkbox"]:checked + .image-label4 .img4,
input[type="checkbox"]:checked + .image-label3 .img3,
input[type="checkbox"]:checked + .image-label2 .img2,
input[type="checkbox"]:checked + .image-label1 .img1{
    width: 100%;
    height: 100%;
    transform: translate(-50%, -50%);
    position: fixed;
    top: 50%;
    left: 50%;
    z-index: 1000;
    background:transparent;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
    object-fit: contain;
}
.contact_2 p ,.form-group label {
    font-family: 'Dancing Script', cursive;
    display: block;
    font-size: clamp(2vh, 7vh, 7vh);
    font-weight: bold;
    background: linear-gradient(90deg, #00ccff, #99eaff, #33d6ff, #99eaff, #00ccff);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: 
                 0 0 30px #33d6ff,
                 0 0 40px #99eaff;
    transition: text-shadow 0.3s ease;
    text-align: center;
}
.contact_2 p:hover {
    text-shadow: 0 0 10px #00ccff, 
                 0 0 20px #00ccff, 
                 0 0 40px #33d6ff, 
                 0 0 50px #99eaff, 
                 0 0 60px #ccefff;
}
.contact_2 {
    background-color: black;
    background-repeat: no-repeat;
    background-size:contain;
    background-position: center center;
    text-align: center;
    margin-top: -7vh;
    padding-bottom: 5vh;
    display: flex;
    flex-direction: column;
    align-items: center; 
}
.form-group {
    width: 40%;
    display: grid;
    place-items: center ;
    margin-bottom: 2vh;
    background-color: transparent;
    border-radius: 5vh;
    box-shadow: 0 0 1vh #0ff, 0 0 20px #0ff, 0 0 10vh #0ff;
    transition: box-shadow 0.3s ease, border-color 0.3s ease;
}
.contact_2 form{
    width: 90%;
}
@font-face {
    font-family: 'Yuji Mai';
    src: url('./YujiMai-Regular.ttf') format('truetype');
    font-weight: 400 700;
    font-style: normal;
}
.contact_2 form input{ 
    border-radius: 1vh;
    width: 98%;   
    font-size: 3vh;
    color: #db2424;
    font-family: "Yuji Mai", serif;
    background-color: transparent;
    box-shadow: 0 0 10px #0ff, 0 0 20px #0ff, 0 0 30px #0ff;
    transition: box-shadow 0.3s ease, border-color 0.3s ease;
}
.contact_2 form input:hover,.contact_2 form textarea:hover {
    box-shadow: 0 0 85px #0ff, 0 0 30px #0ff, 0 0 45px #0ff;
}
.contact_2 form textarea {
    border-radius: 2vh;
    width:98%;
    height:15vh;
    margin-bottom: 5vh;
    font-size: 3vh;
    color: #db2424;
    font-family: "Yuji Mai", serif;
    background-color: transparent;
    box-shadow: 0 0 10px #0ff, 0 0 20px #0ff, 0 0 0px #0ff;
    transition: box-shadow 0.3s ease, border-color 0.3s ease;
}
.contact_2 form input[type="image"] {
    all: unset;
    width: 50%;
    margin-top: -5vh;
    margin-bottom: -8vh; 
}
.contact_2 form input[type="image"]:hover {
    background-size: 120%;
    transform: scale(1.5);
}
.paper_plane input[type="image"] {
    max-height: 100vh;
    cursor: pointer;
    border: none;
}
.form-group:hover {
    box-shadow: 0 0 15vh #0ff, 0 0 10vh #0ff, 0 0 15vh #0ff;
}
footer {
    background-color: #333;
    color: #fcfafa;
    padding: 1vh;
    text-align: center;
    font-family: Arial, sans-serif;
    position: relative;
    margin-bottom: 0vh;
  }
  footer ul li {
    display: inline-block;
    margin-right: 1vh;
  }
  footer ul li a img {
    width: 8vh;
    height: 8vh;
    transition: transform 0.3s ease-in-out; 
  }
  footer ul li a img.Dcbeton-icon {
    width: 18vh;
    height: 18vh;
    top: 6vh;
    transition: transform 0.3s ease-in-out;
  }
footer ul li a img:hover{
    background-size: 120%;
    transform: scale(1.2);
}
@media (min-width:350px) and (max-width:1030px) and (orientation:portrait){
    header {
        display: flex;
        justify-content: center; /* centre horizontalement */
        align-items: center;      /* centre verticalement */
    }
    nav ul li.EPOXY a,nav ul li.Résidentiel a,nav ul li.Commercial a,nav ul li.Industriel a,nav ul li.contact a{
        font-size: clamp(6vw, 6.5vw, 6.5vw); 
    }    
    nav ul li:first-child {
        margin-left:10vh;
    }
    nav ul li {
        margin-right: clamp(5vh, 5vh, 5vh);
        margin-left: clamp(5vh, 5vw, 5vh); 
        top: 10vh;
        position: center;
        line-height: 3.8;
    }

    nav ul li a {
        display: block;
        width: 15vh;
        height: 15vh;
        margin-top: -6vh;
    }
    nav ul li:first-child {
        margin-left:10vh;
    }
    nav ul li:nth-child(2) {
        margin-left: 7vh;
    }
    nav ul li:nth-child(3) {
        margin-left: 9vh;
    }
    nav ul li:nth-child(4) {
        margin-left: 7vh;
        margin-right: 4vh;        
    }
    nav ul li:last-child {
        margin-left: 14vh;
        margin-bottom: -5vh;
    }
    .top-content {
        position: center;
        display: block;
        height: 80vh;
        left: -25%;
    }

    .top-content img  {
        margin-top: 55%;
        width:clamp(10vw, 75vw, 75vw);
        max-height:clamp(10vh, 15vh, 15vh);
        object-fit: cover; 
    }


    .top-content_residentiel {
        display: block;
        height: 100vh;
        left: -45%;
    }
    .top-content_residentiel img {
        margin-top: 5%;
        object-fit:fill;
        margin-left: 40%;
        width: clamp(70vw, 70vw, 70vw);
    }
    .floating-img_countainer {
        position: relative;
        width: 100%;
        height: auto;
        min-height: 60vh;
    }
    .floating-img {
        margin-top: 5.5vh;
        position: absolute;
        transition: transform 0.2s ease-in-out;
        cursor: pointer;
    }
    .img1 { top: 30%; left: -60%; width: 30vw; height: 15vh; }
    .img2 { top: 30%; left: 30%; width: 40vw; height: 35vh; }
    .img3 { top: 56%; left: -60%; width: 30vw; height: 20vh; }
    .img4 { top: 30%; left: -8%; width: 21vw; height: 20vh; }
    .img5 { top: 64%; left: -8%; width: 21vw; height: 15vh; }
    }
    .form-group {
        width: 70%;
    }
@media (min-width:1024px) and (max-width:1430px) and (orientation:landscape){
    nav ul li.EPOXY a,nav ul li.Résidentiel a,nav ul li.Commercial a,nav ul li.Industriel a,nav ul li.contact a{
        font-size: clamp(1vw, 2.5vw, 2.5vw);  
    } 
}