* {
        box-sizing: border-box;
        margin: 0;
        padding: 0;
        font-family: Verdana, Helvetica, sans-serif;
    }
    
    body {
        background-color: white;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }
    
    header {
        position: fixed;
        background-color: rgb(230, 230, 230);
        height: 100px;
        width: 100%;
        z-index: 1;
        border-bottom: 1px solid white;
        border-image-slice: 1;
        border-width: 1px;
        border-image-source: linear-gradient(to left, #e6e6e6, #000, #e6e6e6);
    }
    
    .infinity-logo-blanc {
        height: 100%;
        margin-left: 10%;
        background-color: rgb(230, 230, 230);
    }
    
    nav {
        width: 1000px;
        height: 50px;
        background-color: rgb(230, 230, 230);
        float: right;
        margin-top: auto;
        margin-bottom: auto;
        position: relative;
        top: 50%;
        -webkit-transform: translateY(-50%);
        /* pour centrer les élements */
        -ms-transform: translateY(-50%);
        transform: translateY(-50%);
    }
    
    ul {
        list-style: none;
        padding: 0;
        margin: 0;
    }
    
    ul li {
        float: left;
        position: relative;
    }
    
    a {
        text-decoration: none;
        color: black;
        display: block;
        width: 200px;
        line-height: 50px;
        text-align: center;
        transition: color 0.5s;
        transition: background 0.5s;
    }
    
    .qui,
    .projets,
    .clients,
    .partenaires {
        border-right: 1px solid white;
        border-image-slice: 1;
        border-width: 1px;
        border-image-source: linear-gradient(to top, #e6e6e6, #000, #e6e6e6);
    }
    
    .contact {
        width: 200px;
    }
    
    
    a:hover {
        color: rgb(0, 0, 255);
        background-color: rgb(210, 210, 210);
    }
    
    ul li ul {
        position: absolute;
        left: 0;
        top: 40px;
        visibility: hidden;
        opacity: 0;
        transition: visibility 0.5s, opacity 1s;
        border-right: 1px solid white;
        border-left: 1px solid white;
        border-image-slice: 1;
        border-width: 1px;
        border-image-source: linear-gradient(to top, #e6e6e6, #000, #e6e6e6);
    }
    
    ul li:hover>ul {
        visibility: visible;
        opacity: 1;
    }
    
    ul li ul li {
        background-color: #e6e6e6;
        height: 40px;
    }
    
    ul li ul li a {
        background-color: rgb(230, 230, 230);
        line-height: 40px;
        border-top: 1px solid white;
        border-image-slice: 1;
        border-width: 1px;
        border-image-source: linear-gradient(to left, #e6e6e6, #000, #e6e6e6);
    }
    
    .gal {
        border-top: none;
    }
    
    footer {
        background-color: white;
        color: black;
        overflow: auto;
        /* nécessaire pour background-color car footer a un height de base de 0 */
        margin-top: auto;
        margin-bottom: auto;
        border-top: 1px solid white;
        border-image-slice: 1;
        border-width: 1px;
        border-image-source: linear-gradient(to left, #e6e6e6, #000, #e6e6e6);
    }
    
    .divfooter {
        display: flex;
        justify-content: space-around;
        margin-top: 10px;
    }
    
    .logo-linkedin {
        height: 60px;
        width: 60px;
        display: block;
    }
    
    .logo-facebook,
    .logo-x,
    .logo-instagram {
        height: 60px;
        width: 60px;
        display: block;
        border-radius: 50%;
        -moz-border-radius: 50%;
        -webkit-border-radius: 50%;
    }
    
    .logo-architectes-ordre,
    .logo-MAF {
        width: 200px;
        background-color: white;
        margin-right: auto;
        margin-left: auto;
        background-color: white;
        margin-top: 5px;
    }
    
    .gal {
        border-top: 1px solid white;
    }
    
    .immeubles {
        border-bottom: 1px solid white;
    }
    
    /* main */

    h1 {
        padding-top: 100px;
        text-align: center;
    }
    
    .parent {
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        grid-template-rows: repeat(19, 1fr);
        gap: 20px;
        padding: 100px;
        }
    
        .parent a {
            display: block;
            text-decoration: none;
            background: #f4f4f4;
            border-radius: 5px;
            text-align: center;
            width: 277px;
        }
    
        .parent a:hover {
            background: #ddd;
        }
    
        .div1 { grid-area: 1 / 3 / 2 / 4; }
        .div2 { grid-area: 2 / 1 / 3 / 2; }
        .div3 { grid-area: 2 / 2 / 3 / 3; }
        .div4 { grid-area: 2 / 3 / 3 / 4; }
        .div5 { grid-area: 2 / 4 / 3 / 5; }
        .div6 { grid-area: 2 / 5 / 3 / 6; }
        .div7 { grid-area: 3 / 3 / 4 / 4; }
        .div8 { grid-area: 4 / 3 / 5 / 4; }
        .div9 { grid-area: 5 / 3 / 6 / 4; }
        .div10 { grid-area: 6 / 3 / 7 / 4; }
        .div11 { grid-area: 7 / 3 / 8 / 4; }
        .div12 { grid-area: 8 / 3 / 9 / 4; }
        .div13 { grid-area: 9 / 3 / 10 / 4; }
        .div14 { grid-area: 10 / 3 / 11 / 4; }
        .div15 { grid-area: 11 / 3 / 12 / 4; }
        .div16 { grid-area: 12 / 3 / 13 / 4; }
        .div17 { grid-area: 13 / 3 / 14 / 4; }
        .div18 { grid-area: 14 / 3 / 15 / 4; }
        .div19 { grid-area: 15 / 3 / 16 / 4; }
        .div20 { grid-area: 16 / 3 / 17 / 4; }
        .div21 { grid-area: 17 / 3 / 18 / 4; }
        .div22 { grid-area: 19 / 2 / 20 / 3; }
        .div23 { grid-area: 19 / 3 / 20 / 4; }
        .div24 { grid-area: 19 / 4 / 20 / 5; }

    /* main */
    
    .cookies, .liens {
        font-weight: bold;
    }
    
    .parent1,
    .parent2 {
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
    
    .parent3 {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: repeat(2, 1fr);
        grid-row-gap: 10px;
        grid-column-gap: 10px;
        width: 130px;
    }
    
    .li22 {
        font-weight: bold;
        margin-bottom: 20px;
    }
    
    .li23,
    .li24,
    .li25 {
        margin-bottom: 10px;
    }
    
    .logo-architectes-ordre {
        height: 53.24px;
    }
    
    .divfooter4 {
        margin-top: 20px;
        margin-bottom: 20px;
        margin-left: 3%;
        text-align: center;
        justify-content: center;
    }
    
    .divfooter2 {
        width: 200px;
    }
    
    .accueil2, .plan, .mentions, .cookies2, .liens {
        line-height: 0px;
        margin-top: 10px;
    }
    
    .copyright {
        text-align: center;
    }
    
    .li26, .li27, .li28, .li29{
        width: 60px;
    }

    .lien, .lien:hover {
        all: unset; 
    }
    
    @media (max-width: 1300px) {
    
        header {
            width: 100%;
        }
    
        nav {
            float: none;
            margin-left: auto;
            margin-right: auto;
        }
    
        .infinity-logo-blanc {
            display: none;
        }
    }
    
    @media (max-width: 1000px) {
    
        nav {
            width: 850px;
        }
    
        a {
            width: 170px;
        }
    
        .contact {
            width: 170px;
        }
    }
    
    @media (max-width: 900px) {
    
        nav {
            width: 600px;
        }
    
        a {
            width: 120px;
        }
    
        ul li ul li a {
            width: 150px;
            margin: 0;
            padding: 0;
            vertical-align: middle;
        }
    
        .contact {
            width: 120px;
        }
    
        .qui {
            padding-right: 10px;
        }
    
        .mentions, .liens, .cookies2, .accueil2, .plan {
            width: 140px;
        }
    
        .qui,
        .clients {
            height: 50px;
        }
    
        .nosclients,
        .qui2 {
            position: relative;
            top: -10px;
        }
    
        .satisfaits,
        .exclam {
            position: relative;
            top: -40px;
        }
    }
    
    @media (min-width: 700px) and (max-width: 900px) {
    
        .nous {
            position: relative;
            top: -30px;
        }
    
        .infinity-logo {
            padding-top: 5%;
            padding-bottom: 5%;
        }
    
        .infinity-signature {
            padding-top: 5%;
            padding-bottom: 5%;
        }
    }
    
    @media (max-width: 700px) {
        nav {
            width: 550px;
        }
    
        a {
            width: 110px;
        }
    
        .contact {
            width: 110px;
        }
    
        .qui {
            padding-right: 0;
        }
    
        .nous {
            position: relative;
            top: -30px;
        }
    
        .divfooter {
            align-items: center;
            flex-direction: column;
            display: flex;
        }
    
    
        
        .divfooter1 {
            margin-bottom: 40px;
        }
        .divfooter2,
        .divfooter3 {
            margin-bottom: 20px;
        }
    
        .parent2,
        .parent3 {
            flex-direction: row;
            display: flex;
            gap: 10px;
            margin-bottom: 40px;
        }
    
        .parent3 {
            gap: 20px;
            width: 320px;
        }
    
        .parent1 {
            margin-bottom: 10px;
            text-align: center;
        }
    }
    
    @media (max-width: 530px) {
        nav {
            width: 500px;
        }
    
        a {
            width: 100px;
            font-size: 12px;
        }
    
        .contact {
            width: 100px;
        }
    
        .qui,
        .projets,
        .clients,
        .partenaires {
            border: none;
        }
    }
    
    @media (max-width: 480px) {
        nav {
            width: 450px;
        }
    
        a {
            width: 90px;
            font-size: 11px;
        }
    
        .contact {
            width: 90px;
        }
    
    }
    
    @media (max-width: 430px) {
        nav {
            width: 410px;
        }
    
        a {
            width: 82px;
        }
    
        .contact {
            width: 82px;
        }
    
        .parent2 {
            flex-direction: column;
        }
    }
    
    @media (max-width: 400px) {
        nav {
            width: 390px;
        }
    
        a {
            width: 78px;
            font-size: 12px;
        }
    
        .contact {
            width: 78px;
        }
    
        .qui {
            font-size: 11px;
        }
    
        .parent1 {
            flex-direction: column;
        }
    }
    
    @media (max-width: 380px) {
        nav {
            width: 370px;
        }
    
        a {
            width: 74px;
            font-size: 10px;
        }
    
        .contact {
            width: 74px;
        }
    }
    
    @media (max-width: 360px) {
        nav {
            width: 320px;
        }
    
        a {
            width: 64px;
        }
    
        a,
        .qui {
            font-size: 9px;
            font-weight: bold;
        }
    
        .contact {
            width: 64px;
        }
    }