/* ---------- MISE EN PAGE ---------- */
main {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
}

#header-page {
    grid-column: 1/-1;
}

.rubrique:not(.description):nth-of-type(3n+1) {
    /* décalage des rubriques */
    grid-column-start: 2;
}

.rubrique.description {
    grid-column-start: 1;
}

.content {
    grid-column: 2/-1;
}

@media (max-width : 900px) {
    main {
        grid-template-columns: repeat(3, 1fr);
    }

    .rubrique {
        grid-column-start: auto;
    }

    .rubrique:not(.description):nth-of-type(3n+1) {
        grid-column-start: auto;
    }

    /* contenu */
    .description,
    .content {
        grid-column: 1/-1;
    }
}


@media (max-width : 500px) {
    main {
        grid-template-columns: repeat(1, 1fr);
    }
}

/* ---------- STYLE ---------- */

#header-page {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* - remerciements - */
.merci {
    position: relative;
    display: flex;
    justify-content: center;
    flex-basis: var(--colX3);
    margin-bottom: 60px;

}

.merci .wrapper {
    max-width: calc(50%);
    padding: 10px 20px;
    font-family: var(--semibold_lucky);
    text-align: center;
    background: var(--page-color);
    color: var(--blanc);
    border-color: var(--page-color);
    transform: rotate(-2deg);
    transition: transform .4s cubic-bezier(.17, .84, .44, 1);
}

.merci .wrapper:hover {
    transform: rotate(2deg);
}

.merci .titre {
    text-transform: uppercase;
    margin-bottom: 10px;
}


/* projets similaires */
.similaires {
    margin: 0 calc(var(--marge) * 2);
    position: relative;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    align-self: start;
}

.bloc {
    color: var(--color);
}



/* Plus petit que desktop */
@media (max-width : 900px) {
    .similaires {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 500px) {
    .similaires {
        grid-template-columns: repeat(1, 1fr);
    }
}