/** GRID-ICONES-TITRES **/

[class*="grid-icones-titres-"] {
    display: grid;
    width: 1200px;
    margin: auto;
    margin-top: 40px;
    margin-bottom: 40px;
    gap: 32px 0px;
}

[class*="grid-icones-titres-"] [class*="grid-sub-"] {
    display: grid;
    grid-template-rows: 170px auto;
    justify-items: center;
}

[class*="grid-icones-titres-"] [class*="grid-sub-"] .icone {
    align-self: center;
}

[class*="grid-icones-titres-"] [class*="grid-sub-"] .icone img {
    max-width: 126px;
}

[class*="grid-icones-titres-"] [class*="grid-sub-"] .titre h3 {
    font-size: 22px;
    text-align: center;
    font-weight: normal;
    margin: 0;
}


/* STYLE PERSONNALISE SELON GRILLE 1 / 2 */

#container-grille-1 [class*="grid-icones-titres-"] [class*="grid-sub-"] .titre {
    color: white;
}

#container-grille-2 [class*="grid-icones-titres-"] [class*="grid-sub-"] .titre {
    color: #707070;
}


/* MEDIA QUERIES */

.grid-icones-titres-7 {
    grid-template-columns: repeat(7, 1fr);
}

.grid-icones-titres-6 {
    grid-template-columns: repeat(6, 1fr);
}

.grid-icones-titres-5 {
    grid-template-columns: repeat(5, 1fr);
}

.grid-icones-titres-4 {
    grid-template-columns: repeat(4, 1fr);
}

.grid-icones-titres-3 {
    grid-template-columns: repeat(3, 1fr);
}

.grid-icones-titres-2 {
    grid-template-columns: repeat(2, 1fr);
}

.grid-icones-titres-1 {
    grid-template-columns: repeat(1, 1fr);
}

@media (max-width: 1300px) {
    /* 7 COLONNES */
    .grid-icones-titres-7 {
        grid-template-columns: repeat(12, 1fr);
        width: 80%;
    }
    .grid-icones-titres-7 .grid-sub-0 {
        grid-column: 1 / 4;
        grid-row: 1 / 2;
    }
    .grid-icones-titres-7 .grid-sub-1 {
        grid-column: 4 / 7;
        grid-row: 1 / 2;
    }
    .grid-icones-titres-7 .grid-sub-2 {
        grid-column: 7 / 10;
        grid-row: 1 / 2;
    }
    .grid-icones-titres-7 .grid-sub-3 {
        grid-column: 10 / 13;
        grid-row: 1 / 2;
    }
    .grid-icones-titres-7 .grid-sub-4 {
        grid-column: 1 / 5;
        grid-row: 2 / 3;
    }
    .grid-icones-titres-7 .grid-sub-5 {
        grid-column: 5 / 9;
        grid-row: 2 / 3;
    }
    .grid-icones-titres-7 .grid-sub-6 {
        grid-column: 9 / 13;
        grid-row: 2 / 3;
    }
    /* 6, 5, 4, 3, 2, 1 COLONNES */
    .grid-icones-titres-6,
    .grid-icones-titres-5,
    .grid-icones-titres-4,
    .grid-icones-titres-3,
    .grid-icones-titres-2,
    .grid-icones-titres-1 {
        width: 100%;
    }
}

@media (max-width: 992px) {
    /* 7 COLONNES */
    .grid-icones-titres-7 {
        width: 100%;
    }
    /* 6 COLONNES */
    .grid-icones-titres-6 {
        grid-template-columns: repeat(3, 1fr);
    }
    /* 5 COLONNES */
    .grid-icones-titres-5 {
        grid-template-columns: repeat(6, 1fr);
        width: 80%;
    }
    .grid-icones-titres-5 .grid-sub-0 {
        grid-column: 1 / 3;
        grid-row: 1 / 2;
    }
    .grid-icones-titres-5 .grid-sub-1 {
        grid-column: 3 / 5;
        grid-row: 1 / 2;
    }
    .grid-icones-titres-5 .grid-sub-2 {
        grid-column: 5 / 7;
        grid-row: 1 / 2;
    }
    .grid-icones-titres-5 .grid-sub-3 {
        grid-column: 1 / 4;
        grid-row: 2 / 3;
    }
    .grid-icones-titres-5 .grid-sub-4 {
        grid-column: 4 / 7;
        grid-row: 2 / 3;
    }
}

@media (max-width: 576px) {
    /* TOUTES COLONNES */
    .grid-icones-titres-7,
    .grid-icones-titres-6,
    .grid-icones-titres-5,
    .grid-icones-titres-4,
    .grid-icones-titres-3,
    .grid-icones-titres-2,
    .grid-icones-titres-1 {
        grid-template-columns: repeat(2, 1fr);
        width: 100%;
    }
    /* 7 COLONNES */
    .grid-icones-titres-7 .grid-sub-0 {
        grid-column: 1 / 2;
        grid-row: 1 / 2;
    }
    .grid-icones-titres-7 .grid-sub-1 {
        grid-column: 2 / 3;
        grid-row: 1 / 2;
    }
    .grid-icones-titres-7 .grid-sub-2 {
        grid-column: 1 / 2;
        grid-row: 2 / 3;
    }
    .grid-icones-titres-7 .grid-sub-3 {
        grid-column: 2 / 3;
        grid-row: 2 / 3;
    }
    .grid-icones-titres-7 .grid-sub-4 {
        grid-column: 1 / 2;
        grid-row: 3 / 4;
    }
    .grid-icones-titres-7 .grid-sub-5 {
        grid-column: 2 / 3;
        grid-row: 3 / 4;
    }
    .grid-icones-titres-7 .grid-sub-6 {
        grid-column: 1 / 3;
        grid-row: 4 / 5;
    }
    /* 5 COLONES */
    .grid-icones-titres-5 .grid-sub-0 {
        grid-column: 1 / 2;
        grid-row: 1 / 2;
    }
    .grid-icones-titres-5 .grid-sub-1 {
        grid-column: 2 / 3;
        grid-row: 1 / 2;
    }
    .grid-icones-titres-5 .grid-sub-2 {
        grid-column: 1 / 2;
        grid-row: 2 / 3;
    }
    .grid-icones-titres-5 .grid-sub-3 {
        grid-column: 2 / 3;
        grid-row: 2 / 3;
    }
    .grid-icones-titres-5 .grid-sub-4 {
        grid-column: 1 / 3;
        grid-row: 3 / 4;
    }
    /* 3 COLONNES */
    .grid-icones-titres-3 .grid-sub-0 {
        grid-column: 1 / 2;
        grid-row: 1 / 2;
    }
    .grid-icones-titres-3 .grid-sub-1 {
        grid-column: 2 / 3;
        grid-row: 1 / 2;
    }
    .grid-icones-titres-3 .grid-sub-2 {
        grid-column: 1 / 3;
        grid-row: 2 / 3;
    }
}


/** GRID-PROCESS-METIER **/

[class*="grid-process-metier-"] {
    display: grid;
    grid-template-columns: 1fr;
    width: 850px;
    margin: auto;
    margin-top: 40px;
    margin-bottom: 40px;
    gap: 28px 0px;
}

[class*="grid-process-metier-"] [class*="grid-sub-"] {
    display: grid;
    grid-template-columns: 126px auto 450px;
    justify-items: center;
    align-items: center;
    justify-content: space-between;
}

[class*="grid-process-metier-"] [class*="grid-sub-"] .icone img {
    max-width: 126px;
}

[class*="grid-process-metier-"] [class*="grid-sub-"] .titre h3 {
    font-size: 26px;
    text-align: center;
    font-weight: normal;
    margin: 0;
}

[class*="grid-process-metier-"] [class*="grid-sub-"] .legende {
    font-size: 18px;
    text-align: justify;
    font: normal normal normal 17px/20px 'AbadiMT-Light';
    letter-spacing: 1.78px;
}


/* STYLE PERSONNALISE SELON GRILLE 1 / 2 */

#container-grille-1 [class*="grid-process-metier-"] [class*="grid-sub-"] .titre,
#container-grille-1 [class*="grid-process-metier-"] [class*="grid-sub-"] .legende {
    color: white;
}

#container-grille-2 [class*="grid-process-metier-"] [class*="grid-sub-"] .titre,
#container-grille-2 [class*="grid-process-metier-"] [class*="grid-sub-"] .legende {
    color: #707070;
}


/* MEDIA QUERIES */

@media (max-width: 992px) {
    [class*="grid-process-metier-"] {
        width: 100%;
    }
    [class*="grid-process-metier-"] [class*="grid-sub-"] .icone {
        padding-left: 15px;
    }
    [class*="grid-process-metier-"] [class*="grid-sub-"] .legende {
        padding-right: 15px;
    }
}

@media (max-width: 768px) {
    [class*="grid-process-metier-"] [class*="grid-sub-"] {
        grid-template-columns: 1fr 1fr;
        gap: 20px 0px;
    }
    [class*="grid-process-metier-"] [class*="grid-sub-"] .icone {
        grid-column: 1 / 2;
        grid-row: 1 / 2;
    }
    [class*="grid-process-metier-"] [class*="grid-sub-"] .titre {
        grid-column: 2 / 3;
        grid-row: 1 / 2;
    }
    [class*="grid-process-metier-"] [class*="grid-sub-"] .legende {
        grid-column: 1 / 3;
        grid-row: 2 / 3;
        padding-left: 15px;
    }
}


/** GRID-PHOTOS-LEGENDEES **/

[class*="grid-photos-legendees-"] {
    display: grid;
    grid-template-columns: 292px 292px 292px;
    width: 1020px;
    margin: auto;
    margin-top: 50px;
    margin-bottom: 40px;
    justify-content: space-between;
    gap: 35px 0px;
}

[class*="grid-photos-legendees-"] [class*="grid-sub-"] {
    display: grid;
    grid-template-rows: auto auto auto;
    justify-items: center;
    align-content: start;
    gap: 20px 0px;
}

[class*="grid-photos-legendees-"] [class*="grid-sub-"] .photo {
    align-self: center;
}

[class*="grid-photos-legendees-"] [class*="grid-sub-"] .photo img {
    max-width: 292px;
}

[class*="grid-photos-legendees-"] [class*="grid-sub-"] .titre h3 {
    font-size: 26px;
    text-align: center;
    font-weight: normal;
    margin: 0;
}

[class*="grid-photos-legendees-"] [class*="grid-sub-"] .legende {
    color: white;
    font-size: 18px;
    text-align: center;
    font: normal normal normal 17px/20px 'AbadiMT-Light';
    letter-spacing: 1.78px;
}


/* STYLE PERSONNALISE SELON GRILLE 1 / 2 */

#container-grille-1 [class*="grid-photos-legendees-"] [class*="grid-sub-"] .titre,
#container-grille-1 [class*="grid-photos-legendees-"] [class*="grid-sub-"] .legende {
    color: white;
}

#container-grille-2 [class*="grid-photos-legendees-"] [class*="grid-sub-"] .titre,
#container-grille-2 [class*="grid-photos-legendees-"] [class*="grid-sub-"] .legende {
    color: #707070;
}


/* MEDIA QUERIES */

@media (max-width: 1200px) {
    [class*="grid-photos-legendees-"] {
        width: 98%;
    }
}

@media (max-width: 992px) {
    [class*="grid-photos-legendees-"] {
        grid-template-columns: 292px 292px;
        width: 100%;
        justify-content: space-around;
    }
}

@media (max-width: 660px) {
    [class*="grid-photos-legendees-"] {
        grid-template-columns: 292px;
        width: 100%;
    }
}