*, ::before, ::after {
    box-sizing:border-box;
    margin: 0;
    padding: 0;
    list-style: none;
    text-decoration:none;
    font-family: "Poppins", serif;
}

html, body {
    height:100%;
}

p,a {
    font-family: "Poppins", serif;
}

p {
    margin: 1px 10px;
    line-height: 25px;
}

h1, h2, h3 {
    color: #2e708f;
    text-shadow: 1px 3px 4px white ;
}

h1 {
    text-align:center;
}

h2,h3 {
    margin: 1px 15px;
}

.button {
    display:inline-block;
    background: linear-gradient(to right, #6099b3, #36667d);
    padding: 9px;
    border-radius:6px;
    box-shadow: 3px 3px 6px rgb(14, 14, 14);
    color:white;
}

.button:hover {
    border:1px solid white;
    box-shadow: 3px 3px 8px white;
}

.process {
    display:flex;
    margin: 10px 0px;
    gap:1px;
}

.step2 {
    display:inline-block;
    background: rgba(237, 235, 240, 0.916);
    padding: 18px;
    border-radius:0px 10px 10px 0px;
    box-shadow: 4px 4px 5px rgba(139, 139, 139, 0.955);
    width: 70%;
    height:132px;
    text-align:center;
    font-size: 0.95em;
    overflow: hidden;
}

.step {
    display:inline-block;
    background: rgba(237, 235, 240, 0.916);
    padding: 18px;
    border-radius:10px 0px 0px 10px;
    box-shadow: 4px 4px 5px rgba(139, 139, 139, 0.955);
    width: 30%;
    height:132px;
    text-align:center;
    font-size: 1.2em;
    align-items: center;
    line-height:90px;
    overflow: hidden;
}

header a {
    color:white;
    font-size:x-large;
    text-shadow: 1px 1px 3px rgb(14, 14, 14) ;
}

nav ul li a {
    height:130px;
    width:200px;
    text-align:center;
    line-height:100px;
    transition: border-bottom 0.3s;
}

nav ul li a:hover {
    border-bottom: 2px solid #6099b3;
    transition: border-bottom text-shadow 1.2s;
    text-shadow: 0px 0px 8px #06062f;
}


body {
    display:flex;
    flex-direction:column;
    background-image: url(img/fond.jpg);
    background-position: center;
    background-size:cover;
    height: 100vh;
    background-attachment: fixed;  
}

header {
    display:flex;
    align-items: center;
    justify-content: space-around;
    height:130px;
    background-color:rgba(255, 255, 255, 0.493);
    flex-shrink:0;
}

#logo {
    animation: appear 0.3s ease-out;
}

header li {
    display:inline-block;
    vertical-align: top;
}

.sub-menu {
    display:none;
    position:absolute;
}

header li:hover .sub-menu {
    display:block;
    background-color:rgba(255, 255, 255, 0.971);
    z-index:1000;
    display:flex;
    flex-direction:column;
}

header li:hover .sub-menu a {
    height:80px;
    line-height:40px;
    width:250px;
}

header li a {
    display:block;
    padding:20px;
    animation: appear 0.6s ease-out;
}


main {
    flex-grow:1;
    display:flex;
    flex-direction: column;
    margin: 3% 5%;
}

.presentation {
    display: flex;
    gap:10px
}

.presentation1 {
    flex-grow:1;
    background-color:rgba(255, 255, 255, 0.493);
    width:80%;
    border-radius:12px;
    box-shadow: 4px 4px 5px rgba(139, 139, 139, 0.955);
    padding:10px 40px;
    animation: appear 0.8s ease-in;
}

.presentation2 {
    width: 20%;
    overflow:hidden;
    border-radius:12px;
    box-shadow: 4px 4px 5px rgba(139, 139, 139, 0.955);
    animation: appear 1.2s ease-in;
}

.presentation3 {
    width: 35%;
    overflow:hidden;
    border-radius:12px;
    box-shadow: 4px 4px 5px rgba(139, 139, 139, 0.955);
    animation: appear 1.2s ease-in;
}

#accueil {
    scale:1.1;
    transition: scale 3s;
}

#accueil:hover {
    scale:1.17;
    transition: scale 3s;
}

#construction {
    justify-content: center;
    align-items: center;
}

.fondstyle {
    display:flex;
    justify-content: space-evenly;
    background-color:rgba(255, 255, 255, 0.493);
    border-radius:12px;
    box-shadow: 4px 4px 5px rgba(139, 139, 139, 0.955);
    padding: 30px;
    animation: appear 0.8s ease-in;
}

.fondstyle2 {
    text-align: center;
}

footer {
    background-color:rgba(6, 1, 15, 0.826);
    height: 70px;
    flex-shrink:0;
    display:flex;
    justify-content: space-around; 
    align-items: center;
}

footer p {
    color:antiquewhite;
    font-family: Poppins;  
}

.footlinks {
    color:antiquewhite;
    font-family: Poppins;
    cursor: pointer;
}

#linkedin {
    height:45px;
    vertical-align: center;

}

.poppins-regular {
    font-family: "Poppins", serif;
    font-weight: 400;
    font-style: normal;
  }

  .bebas-neue-regular {
    font-family: "Bebas Neue", serif;
    font-weight: 400;
    font-style: normal;
  }


  @media screen and (max-width:800px) {
    .presentation2 {
        display:none;
    }
    .presentation3 {
        display:none;
    }
    .header2 li {
        display:block;
        text-align: center;
        width:100%;
    }
    .map {
        display:none;
    }
    main {
        margin: 3% 3%;
    }
    .presentation1 {
        width:90%;
        padding:8px 25px;
    }
    .step {
        width:100%;
        height:auto;
        border-radius:10px 10px 0px 0px;
    }
    .step2 {
        width:100%;
        height:auto;
        border-radius:0px 0px 10px 10px;
    }
    .process {
        flex-direction: column;
    }
}


@media screen and (max-width:1200px) {
    nav {
        display:none;
    }
    .header2 {
        display:flex;
        justify-content: space-around;
    }
    header {
        border-bottom: 0px rgba(3, 3, 58, 0) solid;
        box-shadow: 4px 4px 5px rgba(139, 139, 139, 0);
    }
    .header2 a {
        display:block;
        font-size:1.3em;
    }
    .header2 li {
        height:40px;
        min-width:250px;
        display:inline-block;
        text-align: center;
    }
    #logo {
        display:block;
        flex-shrink:0;
        max-width:100%;
        max-height:120px;
    }
}

@media screen and (min-width:1200px) {
    header {
    border-bottom: 1px rgba(3, 3, 58, 0.368) solid;
    box-shadow: 4px 4px 5px rgba(139, 139, 139, 0.955);
    }
    .header2 {
        display:none;
    }
    #logo {
        max-height:120px;
    }
}

.header2 {
    background-color:rgba(255, 255, 255, 0.493);
    border-bottom: 1px rgba(3, 3, 58, 0.368) solid;
    box-shadow: 4px 4px 5px rgba(139, 139, 139, 0.955);
}

.header2 a {
    color:white;
    text-shadow: 1px 1px 3px rgb(14, 14, 14) ;
}

  @keyframes appear{
    from{
        opacity:0;
        scale:0.95;
    }
    to{
        opacity:1;
        scale:1;
    }}

@keyframes flash{
        from{
            scale:1;
        }
        to{
            scale:1.5;
        }
        to{
            scale:1;
        }}