:root{
    --columns: 10;
    --rows: 10;
    --color: #e9703f;
    --background: hsl(51, 97%, 85%);
    --color1 : #9ff413;
    --color2 : #dfe0c8;
    --color3 : #b11bba;
    --color4 : #7fb456;
    --color5 : #ae1081;
}

@font-face {
    font-family: "ParkBold";
    src: url("fonts/NationalPark-Bold.ttf")
}

@font-face {
    font-family: "Certegeska";
    src: url("fonts/CertegeskaBase.ttf");
    font-weight: normal;
}

@font-face {
    font-family: "Certegeska";
    src: url("fonts/CertegeskaDemi.ttf");
    font-weight: italic;
}

@font-face {
    font-family: "Certegeska";
    src: url("fonts/CertegeskaStraight.ttf");
    font-weight: bold;
}

@font-face {
    font-family: "Certegeska";
    src: url("fonts/CertegeskaStraight.ttf");
    font-weight: light;
}

@font-face {
    font-family: "SpaceGroteskLight";
    src: url("fonts/SpaceGrotesk-Light.otf") format("opentype");
}

@font-face {
    font-family: "SpaceGroteskBold";
    src: url("fonts/SpaceGrotesk-Bold.otf") format("opentype");
}


@font-face {
    font-family: "SpaceGroteskMedium";
    src: url("fonts/SpaceGrotesk-Medium.otf") format("opentype");
}

@font-face {
    font-family: "SpaceGroteskRegular";
    src: url("fonts/SpaceGrotesk-Regular.otf") format("opentype");
}


@font-face {
    font-family: "SpaceGroteskSemiBold";
    src: url("fonts/SpaceGrotesk-SemiBold.otf") format("opentype");
}
body{
    transform: scale(1);
    background: hsl(51, 97%, 85%);
    overflow-x: hidden;
    margin: auto;
    width: 100%;
    font-family: "SpaceGrotesk";

}

.container{
    grid-template-columns: repeat(3, 1fr);
    display:grid;
    padding: 20px;
    padding-top: 0;
}

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

.buttons{
    grid-column: 1 / 2;
    display: flex;
    flex-direction: column;
    max-width: 350px;
    gap: 10px;
}

.page, .grille, .repere{   
    position: absolute;
    grid-template-columns: repeat( var(--columns), 1fr);
    grid-template-rows: repeat( var(--rows), 1fr);
    display:grid;
    width: 21cm;
    height: 29.7cm;
    padding: 0;
    grid-column-gap: 0px;
    grid-row-gap: 0px;
    margin-bottom: 20px;
}

.page{
    background:white;
    
}

.repere, .grille{
    background: transparent;
}

.grille > div{
    border:1px solid var(--color3);
    opacity: 50%;
}

.chiffres, .lettres{
    font-family: "ParkBold";
    font-size: 1em;
    color: #6d6d6d;
    position: relative;
    text-align: center;
}

.chiffres{
    bottom: 30px;
}

.lettres{
    grid-column: 1;
    right: 60px;
    bottom: 60px;
}

button{
    cursor: pointer;
    font-family: "ParkBold";
    font-size: 2em;
    color: #6d6d6d;
    border-radius: 10px;
    padding: 15px;
    border: 1px solid;
    background: white;
}

h1{
    font-family: "ParkBold";
    font-size: 2em;
    color: #6d6d6d;
    padding: 0;
    margin: 10px;
}

.hidden{
    visibility: hidden;
}

.visible{
    visibility: visible;
}

@media print {
    @page{
        size: 21cm 29.7cm;
    }

    .buttons, h1{
        display: none;
    }

    .container{
        display: block;
        padding: 0;
    }


}

.souligne {
    text-decoration: underline 2.5px;
    text-underline-offset: 1.5mm;
    font-family: "SpaceGroteskRegular";
}

#vraititre {
    grid-area: 4/3/6/9;
    /* border: solid purple 4px; */
    line-height: 1.1em;
    font-size: 55pt;
    text-align: center;
    color: var(--color1);
    
    font-weight: bolder;
    z-index: 9;
    letter-spacing: -0.02em;
    font-family: "SpaceGroteskMedium";
}



#soustitre {
    grid-area: 6/6/7/9;
    
    font-family: "SpaceGroteskMedium";
    line-height: 1em;
    z-index: 10;
    color: var(--color4);
    font-size: 18pt;
    text-align: right;
}

#date {
    grid-area: 2/2/10/4;
    line-height: 1em;
    /* border: solid rgb(98, 255, 0) 2px; */
    font-family: "SpaceGroteskLight";
    z-index: 10;

    
    }
#txtdate {
    transform-origin: center;
    rotate: -90deg;
    translate : -11cm 9.8cm;
    width: 30cm;
    height: 4cm;
    font-size : 92pt;
    color: var(--color5) ;
    text-align: center;
}
 #lieu {
     grid-area: 7/4/10/10;
     line-height: 1em;
     color: var(--color5);
     font-family: "SpaceGroteskLight";
     font-size: 30pt;
     z-index: 2;

     }
#adresse {
    font-size: 18pt;
    line-height: normal;
}
#degrade1 {
        grid-area: 2/8/3/9;
        background: linear-gradient(45deg,#9ff413, white);
        z-index: 1;

        }

#degrade2 {
            grid-area: 9/3/10/4;
            background: linear-gradient(-175deg,#9ff413, white);
            z-index: 1;

            }
#degrade3 {
            grid-area: 3/9/4/10;
            background: linear-gradient(45deg,#9ff413, white);
            z-index: 1;

            }

 #degrade4 {
            grid-area: 3/7/4/8;
            background: linear-gradient(45deg,#9ff413, white);
            z-index: 1;

            }

#degrade5 {
            grid-area: 2/9/3/10;
            background: linear-gradient(-175deg,#9ff413, white);
            z-index: 1;

             }

#degrade6 {
            grid-area: 4/10/5/11;
            background: linear-gradient(45deg,#9ff413, white);
            z-index: 1;

            }

#degrade7 {
            grid-area: 1/10/2/11;
            background: linear-gradient(45deg,#9ff413, white);
            z-index: 1;

            }

#degrade8 {
            grid-area: 4/10/5/11;
            background: linear-gradient(45deg,#9ff413,white);
            z-index: 1;

            }

#degrade9 {
            grid-area: 1/6/2/7;
            background: linear-gradient(45deg,#9ff413,white);
            z-index: 1;

            }

#degrade10 {
            grid-area: 10/6/11/5;
            background: linear-gradient(45deg,#9ff413,white);
            z-index: 1;

            }

#degrade11 {
            grid-area: 10/2/11/3;
            background: linear-gradient(45deg,#9ff413,white);
            z-index: 1;

            }
            
#degrade12 {
            grid-area: 8/1/9/2;
            background: linear-gradient(45deg,#9ff413,white);
            z-index: 1;
            }    
            
            #degrade13 {
                grid-area: 8/8/9/9;
                background: linear-gradient(45deg,#9ff413,white);
                z-index: 1;
                }   

                #degrade14 {
                    grid-area: 10/10/11/11;
                    background: linear-gradient(45deg,#9ff413,white);
                    z-index: 1;
                    }  
                    
                    #degrade15 {
                        grid-area: 7/6/8/7;
                        background: linear-gradient(45deg,#9ff413,white);
                        z-index: 1;
                        }  



#img1 {
    grid-area: 1/1/4/6;
    background-size: cover;
    background-color: var(--color1);
    z-index: 0;
    overflow: hidden;
    background-color: var(--color5);
    z-index: 0;

}


#code {
    grid-area: 1/1/10/10;
    color: var(--color2);
    font-family: "SpaceGroteskRegular";
    font-size: 10pt;
    z-index: 1;
}

#img1 img {
    height: 400mm;
    mix-blend-mode:hard-light;
}


#img2 {
    grid-area: 9/8;
    background-size: cover;
    background-color: var(--color1);
    z-index: 0;
    overflow: hidden;
    background-color: var(--color5);
    z-index: 0;

}

#img2 img {
    height: 300mm;
    mix-blend-mode:hard-light;
}


#img3 {
    grid-area: 10/9;
    background-size: cover;
    background-color: var(--color1);
    z-index: 0;
    overflow: hidden;
    background-color: var(--color5);
    z-index: 0;

}

#img3 img {
    translate: 0cm;
    mix-blend-mode:hard-light;

}