.c {
    border: 4px solid #4c4c4c;
    padding: 0;
    margin: 0;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    --bgphoto: linear-gradient(transparent,transparent);
    --bg1: linear-gradient(transparent,transparent);
    --bg2: linear-gradient(transparent,transparent);
    background-image: var(--bg1), var(--bg2),var(--bgphoto);
}
.page {
    grid-template-columns: repeat(10,1fr);
    grid-template-rows: repeat(6,170px);
}
.c1 {grid-area: g01;}
.c2 {grid-area: g02;}
.c3 {grid-area: g03;}
.c4 {grid-area: g04;}
.c5 {grid-area: g05;}
.c6 {grid-area: g06;}
.c7 {grid-area: g07;}
.c8 {grid-area: g08;}
.c9 {grid-area: g09;}
.c10 {grid-area: g10;}
.c11 {grid-area: g11;}
.c12 {grid-area: g12;}
.c13 {grid-area: g13;}
.c14 {grid-area: g14;}
.c15 {grid-area: g15;}
.c16 {grid-area: g16;}
.c17 {grid-area: g17;}
.c18 {grid-area: g18;}
.c19 {grid-area: g19;}
.c20 {grid-area: g20;}
.c21 {grid-area: g21;}
.c22 {grid-area: g22;}
.c23 {grid-area: g23;}
.i {
    grid-area: zzz;
    display: grid;
    grid-template-columns: 40% 50%;
    grid-template-rows: 1fr;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 0px;
}


.gaufrier1,.gaufrier2,.gaufrier3,.gaufrier4,.gaufrier5,.gaufrier6,.gaufrier7,.gaufrier8,.gaufrier9 {
    grid-template-areas: 
        "g01 g01 g02 g02 g03 g03 g04 g04 g05 g05"
        "g01 g01 g02 g02 g03 g03 g04 g04 g05 g05"
        "g06 g06 g07 g07 g08 g08 g09 g09 g10 g10"
        "g06 g06 g07 g07 g08 g08 g09 g09 g10 g10"
        "g11 g11 g12 g12 g13 g13 g13 zzz zzz zzz"
        "g11 g11 g12 g12 g14 g14 g14 zzz zzz zzz"  
        ;
}