@import "style-reportages-galeries.css";

.article h3 {
	 font-size: 1em;
}

.article {
	margin: 12px 0;
	max-width: 560px;
}

.article a.title {
	display: block;
}

.article a.title div {
	transition: opacity .25s;
}

.article a.title:focus div,
.article a.title:hover div {
	opacity: 0.8;
}

.article a.voir:focus,
.article a.voir:hover {
	opacity: 0.8;
}

@media screen and (min-width: 1200px) {
  #content {
    flex-direction: row;
    align-items: stretch;
    justify-content: space-evenly;
  }

  .articles {
    margin: 25px 0;
		flex-basis: 44%;
  }

	.articles:first-of-type {
		flex-basis: 94%;
	}

	.articles.one,
	.articles.four {
		order: 1;
		flex-basis: 44%;
	}

	.article {
		max-width: 510px;
	}
}

@media screen and (min-width: 1600px) {
  .article {
    max-width: 560px;
  }
}

@media screen and (min-width: 2100px) {
	.articles:not(:first-of-type) {
		flex-basis: 44%;
  }

	.article {
		max-width: 620px;
	}
}

#content .texte p {
  text-align: left;
  margin-bottom: 2em;
}

#content .texte p::before {
  content: "\002713\0000A0\0000A0";
  font-weight: 700;
  position: relative;
  font-size: 1.25rem;
  top: 0px;
  color: var(--page-green-color);
}

table.tarifs {
  text-align: left;
  width: 100%;
  margin-top: 2em;
}

table.tarifs tr td {

  vertical-align: bottom;
  border-bottom: 1px dotted var(--dotted-line-color);
  font-family: sans-serif;
  font-size: 1.1em;
}

table.tarifs tr td:last-of-type {
  text-align: right;
  color: var(--page-tx-lite-color);
  font-weight: 600;
  font-size: 1em;
  padding-left: 15px;
}

table.tarifs tr td.sep {
  border-bottom: none;
  min-height: 25px;
  display: block;
}

.sous-titre.tarif {
  background-color: var(--page-green-color);
  color: var(--page-white-color);
}

.sous-titre.tarif table {
  width: 100%;
  max-width: 300px;
}

.sous-titre.tarif table tr {
  display: flex;
}

.sous-titre.tarif td:first-of-type {
  flex-grow: 1;
  text-align: left;
}

.sous-titre.tarif td:last-of-type {
  font-weight: 600;
  font-size: 1.2em;
}


@media screen and (min-width: 1700px) {
	.articles:first-of-type {
		gap: 5%;
	}

	.articles .article.last {
		display: flex;
		max-width: 100%;
		gap: 5%;
		flex-basis: 500px;
		flex-grow: 1;

		justify-content: space-between;
	}

	.articles .article .texte {
		max-width: 480px;
		flex-basis: 40%;
	}

	.articles .article.last .texte.first {
		flex-basis: 480px;
		max-width: 560px;
		flex-grow: 1;
	}
}

@media screen and (min-width: 1900px) {
	.articles .article.last {
		flex-basis: 1215px;
		flex-grow: unset;
	}
}