@media (max-width: 860px) {
	section {
		margin: 0;

	}
	.conteneur > div {
		flex-basis: calc((100% - 18px) / 2);
	}

	.banniere1 div {
		min-height: 430px;
		min-width: 100%;
	}

	.banniere1 h1 {
		font-size: 300%;
		margin: 0 5% 5% 5%;
		line-height: 1.5;
	}

	.banniere1 h2 {
		font-size: 100%;
		margin: 1% 5% 10% 5%;
	}

	.banniere2 {
		min-height: auto;
	}

	.banniere2 div {
		min-height: 100px;
	}

	.banniere2 h1 {
		font-size: 280%;
		margin: 0 2%;
	}

	.banniere2 h2 {
		font-size: 100%;
		margin: 2% 1%;
	}

	.sac-logos {
		padding-left: 2%;
		padding-right: 2%;
	}

	.bulle-logo {
		flex: 0 1 40%;
		margin-top: 5%;
	}

	.bulle-logo a {
		gap: 2px;
	}

	.bulle-logo img {
		width: 65%;
		max-width: 160px;
	}

	.bulle-logo h3 {
		margin: 0.5% 5%;
	}

	.bulle-logo p {
		margin: 0.5% 4%;
		font-size: 80%;
	}

	.sac {
		padding-left: 2%;
		padding-right: 2%;
	}

	.bulle {
		flex: 0 1 100%;
		margin-top: 4%;
		gap: 2px;
	}

	.bulle h3, .bulle h4 {
		margin: 2% 5% 0 5%;
	}

	.bulle p {
		margin: 0 5% 2% 5%;
	}

	.encadrement {
		margin: 3% 2% 0% 2%;
		padding-bottom: 2%;
	}

	.encadrement h2 {
		margin: 5% 1% 2% 1%;
		font-size: 180%;
	}

	.encadrement p {
		font-size: 90%;
		margin: 8% 2% 5% 2%;
	}

	.mention {
		margin: 8% 2% 5% 2%;
	}

	.descriptiftext h2 {
		margin: 0 1% 2% 1%;
	}

	.descriptiftext {
		margin: 5% 2% 3% 2%;
		padding: 0 7% 3% 7%;
		border-top: none;
		border-radius: 0%;
	}

	.descriptiftext::before {
		content: "";
		align-self: center;
		width: 90%;
		border-top: 1.5px solid rgb(42, 75, 23);
		border-radius: 999px;
	}

	.descriptiftext h3, .descriptiftext h4 {
		margin: 5% 0 3% 0;
		font-size: 120%;
	}

	.descriptiftext p {
		margin: 2% 0 3% 0;
	}

	.conteneur {
		gap: 20px;
		margin: auto 2%;
		padding-top: 2%;
	}

	.conteneur div {
		flex: 1 1 100%;
	}

	#especes .descriptiftext:first-child::before {
		display: none;
	}
}

@media (max-width: 860px) {

	.titre-ordi {
		display: none;
	}
	.titre-mobile {
		display: inline;
	}

	.sommaire {
		flex-wrap: nowrap;
		justify-content: flex-start;
		overflow-x: auto;
		gap: 8px;
		padding: 0 4% 2% 4%;
		scrollbar-width: none;
	}
	.sommaire::-webkit-scrollbar {
		display: none;
	}
	.sommaire a {
		flex: 0 0 auto;
		margin: 0;
		padding: 4px 12px;
		font-size: 90%;
		border-width: 1px;
		background: transparent;
		color: var(--vert-fonce);
	}

}

@media (max-width: 860px) {

	main {
		background: linear-gradient(
			white 20px,
			var(--vert-clair) 20px,
			var(--vert-clair) calc(100% - 20px),
			white calc(100% - 20px)
		);
	}
}