.rubrique .nav,
.article .nav {
	--columns: 12;
	padding-top: var(--padding);
	grid-column: span var(--columns);
}

.rubrique .contenu,
.article  .contenu {
	--columns: 12;
	grid-column: span var(--columns);
	order: 2;
	overflow-wrap: break-word;
}

.rubrique .a_droite,
.article  .a_droite {
	--columns: 12;
	grid-column: span var(--columns);
	display: flex;
	flex-wrap: wrap;
	gap: var(--gutter);
	position: sticky;
	top: 0; 
	align-self: start; 
	order: 3;
}

.rubrique .a_droite div,
.article  .a_droite div {
	flex: 0 0 calc(50% - calc(var(--gutter) / 2));
}


.nav h1 {
	max-width: unset; 
}

.rubrique .contenu.text h2,
.article .contenu.text h2 {
	font-size: var(--40px);
	line-height: 110%;
	font-weight: 600;
	margin-bottom: var(--20px);
}

.text{
	padding-top: var(--padding);
}


.a_droite a h2{
	color:var(--color-black);
}

.a_droite a:hover h2{
	color:var(--color-link);
}

.a_droite h2{
    font-size: 1rem;
    line-height: 120%;
    font-weight: 600;
	color:var(--color-black);
	margin-bottom: var(--20px);
}




@media (min-width: 1024px) {
	.nav h1 {
		max-width: 7ch; 
	}

	.rubrique .nav,
	.article .nav {
		--columns: 2;
		padding-top: var(--padding);
		grid-column: span var(--columns);
	}

	.rubrique .contenu,
    .article  .contenu {
		--columns: 6;
		grid-column: span var(--columns);
		order: 2;
		max-width: 75ch; 
	}

	.rubrique .a_droite,
    .article  .a_droite {
		--columns: 4;
		grid-column: span var(--columns);
		display: flex;
		flex-wrap: wrap;
		gap: var(--gutter);
		position: sticky;
		top: 0; 
		align-self: start; 
		order: 3;
	}

	.rubrique .a_droite div,
    .article  .a_droite div {
		flex: 0 0 calc(50% - calc(var(--gutter) / 2));
	}
}