@font-face {
    font-family: "DinaChaumont-TextRegular";
    src: url(DinaChaumont-TextRegular.woff2) format("woff2");
}

@font-face {
    font-family: "DinaChaumont-DisplayBold";
    src: url(DinaChaumont-DisplayBold.woff2) format("woff2");
}

@font-face {
    font-family: "DinaChaumont-DisplayRegular";
    src: url(DinaChaumont-DisplayRegular.woff2) format("woff2");
}

@media (min-width: 350px) {
    .grid-main{
    display: grid;
    grid-template-columns: 1fr;
    gap: 30px;
    justify-content: center;
    margin: 30px;
    }
}  

@media (min-width: 600px) {
    .grid-main{
    display: grid;
    grid-template-columns: 1fr 3fr;
    gap: 30px;
    margin: 30px;
    }
    .grid{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 30px;
    justify-content: center;
    grid-column: 2;
    }
    .lepo{
    display: grid;
    grid-template-columns: 1fr;
    gap: 30px;
    justify-content: center;
    }
    .autre-grid{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 30px;
    justify-content: center;
    }
}    

@media (min-width: 1000px) {
    .grid-main{
    display: grid;
    grid-template-columns: 1fr 3fr;
    gap: 30px;
    margin: 30px;
    }
    .grid{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 30px;
    justify-content: center;
    grid-column: 2;
    }
    .lepo{
    display: grid;
    grid-template-columns: 1fr;
    gap: 30px;
    justify-content: center;
    }
    .autre-grid{
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        gap: 30px;
        justify-content: center;
    }
}

/*.tout{
    background: rgba(255, 255, 255, 1);
    margin-top:90vh;
    padding:1px 0 30px;
}*/

.texte{
    width:100%;
    height:100%;
    /*display: inline-grid;*/
    margin-top: 0;
}

.header{
    display: grid;
    grid-template-columns: auto auto;
    justify-content: space-between;
    align-items: center;
    margin-left: 30px;
    margin-right: 30px;
    margin-top: 0px;
    margin-bottom: 0px;
}

.header a{
    text-decoration: none;
    color: currentColor;
}

.footer{
    margin-top:100vh;
    margin-left: 30px;
    margin-right: 30px;
    margin-bottom: 15px;
}

body{
    font-family: "DinaChaumont-TextRegular", sans-serif;
    margin: 0;
}

.titre{
    font-family: "DinaChaumont-DisplayRegular";
    font-size: 40px;
    text-align: right;
    margin: 30px;
}


/*.grid-main{
    display: grid;
    grid-template-columns: 1fr 3fr;
    gap: 30px;
}

.grid{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 30px;
    justify-content: center;
}*/

.item{
    width:100%;
    height:auto;
    /*display: inline-grid;
    place-items: center;*/
}

.itemp{
    width:100%;
    height: auto;
    grid-column: 2;
}

.photo{
    border: solid;
    border-color: #9b3d12;
}

.leporello{
    margin: 0;
}

.section{
    height: 60px;
}

.spiro-normographe{
    color: #006f7a;
    background: #fff url(bgspironormographe.avif) no-repeat;
    background-size: cover;
    background-attachment: fixed;
}

.deambulation{
    color: #9b3d12;
    background: #fff url(bgdeambulation.webp) no-repeat;
    background-size: cover;
    background-attachment: fixed;
}

.chantier{
    color: #ffffff;
    background: #fff url(bgchantierc.avif) no-repeat;
    background-size: cover;
    background-attachment: fixed;
}

/*.chantier .texte{
    color: #f18f01;
}*/

.deambulation .tout, .spiro-normographe .tout, .illustration .tout{
    background: rgba(255, 255, 255, 1);
    margin-top:90vh;
    padding:1px 0 30px;
}

.chantier .tout, .climat .tout{
    margin-top:90vh;
    padding:1px 0 30px;
}

.illustration .autretout{
    background: rgba(255, 255, 255, 1);
    margin-top:25vh;
    padding:1px 0 30px;
}

.chantier01, .chantier04{
    grid-column: 2/4;
}

.chantier06{
    grid-column: 1/3;
}

.chantier08{
    grid-column: 1/4;
}

.autre-grid{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
    justify-content: center;
    background: white;
}

.illustration{
    color: #005883;
    background: #fff url(bgillustration.avif) no-repeat;
    background-size: cover;
    background-attachment: fixed;
}

.illus01{
    grid-column: 1;
    grid-row: 1;
}

.illus02{
    grid-column: 1;
    grid-row: 2;
}

.illus03{
    grid-column: 2/4;
    grid-row: 1;
}

.sougrid{
    display: grid;
    grid-template-rows: 50% 50%;
}

.quatre{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    gap: 30px;
    justify-content: center;
    grid-column: 2;
}

.climat{
    color: #d0f4ea;
    background: #fff url(bgclimat.avif) no-repeat;
    background-size: cover;
    background-attachment: fixed;
}

.climat .texte{
    color: #01283b;
}

.climat01{
    grid-column: 1/4;
}

.climat04{
    grid-column: 1/3;
}

.climat05{
    grid-column: 1;
    grid-row: 2/4;
}

.climat06{
    grid-column: 2/4;
}

.climat07{
    grid-column: 1;
}

.climat08{
    grid-column: 3;
    grid-row: 6;
}

.climat09{
    grid-column: 2;
    grid-row: 5
}

.climat10{
    grid-column: 1;
    grid-row: 5/7;
}

.climat11{
    grid-column: 2/4;
}

.climat11{
    grid-column: 2/4;
}

.climat11{
    grid-column: 2/4;
}

.climat11{
    grid-column: 2/4;
}

.climat16{
    grid-column: 3;
    grid-row: 10/12;
}

.climat17{
    grid-column: 2;
    grid-row: 10/12;
}

.climat20{
    grid-row: 8/10;
}

.photographies{
    color: #ffffff;
    background: #000000 no-repeat;
    background-size: cover;
    background-attachment: fixed;
}

.photo01{
    grid-column: 2/4;
    grid-row: 1;
}

.photo02{
    grid-column: 1/3;
    grid-row: 2;
}

.photo03{
    grid-column: 2/4;
    grid-row: 3;
}

.photo04{
    grid-column: 1/4;
    grid-row: 7;
}

.photo05{
    grid-column: 2;
    grid-row: 4;
}

.photo06{
    grid-column: 1/3;
    grid-row: 5;
}

.photo07{
    grid-column: 1;
    grid-row: 4;
}

.photo09{
    grid-column: 2/4;
    grid-row: 6;
}