/* Desktop */
.grid > .nav {
    --columns: 12;
    grid-column: span var(--columns);
    order: 1;
}
.grid > .contenu {
    --columns: 12;
    grid-column: span var(--columns);
    order: 3;
}

.grid > .a_droite.cartel {
    --columns: 12;
    grid-column: span var(--columns);
    display: flex;
    flex-wrap: wrap;
    gap: var(--12px);
    order: 2;
    padding-bottom: var(--padding);
}


.grid > .a_droite.cartel h2 {
    font-size: var(--26px);
    margin-bottom: var(--10px);
    color: #1a1a1a;
    font-weight: 700;
    line-height: 120%;
}

.grid > .cartel div {
    flex: 0 0 100%;
    border-bottom: 1px solid #DDD;
    padding-bottom: var(--12px);
}

.grid > .cartel div.titre_projet,
.grid > .cartel div:last-child {
    flex: 0 0 100%;
    border-bottom: 0px solid #DDD;
    padding-bottom: 0rem;
}

 /* sm */
@media (min-width: 640px) {

}


@media (min-width: 1024px) {
	.grid > .nav {
		--columns: 2;
		grid-column: span var(--columns);
		position: sticky;
		top: 0; /* Distance depuis le haut */
		align-self: start; /* Important pour grid */

		order: 1;
	}
	.grid > .contenu  {
		--columns: 7;
		grid-column: span var(--columns);
		order: 2;
	}

    .grid > .a_droite.cartel {
        --columns: 3;
        grid-column: span var(--columns);


        position: sticky;
        top: 0;
        align-self: start;
        order: 3;

        padding-top: var(--padding);
        padding-bottom: unset;

    }


}