/* ----------------------------------------
FONTS
---------------------------------------- */

/* Serif 420 */

@font-face {
	font-family: 'serif420';
	src: url("../fonts/Serif420-Regular.260c3647a673.woff2") format('woff2');
	font-weight: 400;
	font-style: normal;
}
@font-face {
	font-family: 'serif420';
	src: url("../fonts/Serif420-Italic.72b37468eb58.woff2") format('woff2');
	font-weight: 400;
	font-style: italic;
}

/* Faune */

@font-face {
	font-family: 'faune-display';
	src: url("../fonts/Faune-Display_Bold_Italic.578edeb6ccb0.woff2") format('woff2');
	font-weight: 700;
	font-style: italic;
}


/* ----------------------------------------
VARIABLES
---------------------------------------- */


.html {
	--body-font: "serif420", serif;
	--logo-font: "faune-display", serif;

	--canon: 2.6rem;
	--parangon: 2rem;
	--petit-parangon: 1.8rem;
	--gros-texte: 1.5rem;
	--cicero: 1.2rem;
	--gaillarde: 0.9rem;
	--petit-texte: 0.8rem;
	--mignonne: 0.7rem;

	--couleur-texte: hsl(0 0% 15%);
	--couleur-accent: #D9451C; /* cb4042 b3a119 #dc21d e54c2d b3a800 */

	--unit-magnitude: 1.5;
	--unit-base: 1rem;
	--unit-default: calc(var(--unit-magnitude) * var(--unit-base));
	--margin-default: var(--unit-base);

	--max-width: 25rem; /* 25.5 */
	--max-width-large: 100%; /* 25.5 */
}



/* ----------------------------------------
NORMALISATION
---------------------------------------- */



* {
	box-sizing: border-box;
}

.html {
	color: var(--couleur-texte);
	font-family: var(--body-font);
	font-size: min(5.4vw, 150%);
	font-variant-numeric: oldstyle-nums;
	padding: 0;
	margin: 0;
	-moz-osx-font-smoothing: grayscale;
	-webkit-font-smoothing: antialiased;
}

.body {
	line-height: 1.4;
	margin: 0;
}

.body__inner {
	margin: auto;
	padding: 0 var(--margin-default);
	position: relative;
	width: 100%;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	font-size: 1em;
	font-weight: 400;
	margin: 0;
}

h2 {
	font-size: var(--cicero);
	margin: 1.5em 0 1em 0;
}

h2:first-child {
	margin-top: 0;
}

h3 {
	font-size: var(--cicero);
	margin: 2em 0 1em 0;
}

a {
	/*border-bottom: 1px dotted;*/
	color: var(--couleur-accent);
	text-decoration: none;
}

a:hover {
	border-bottom: 1px solid;
}

p {
	margin: 0 0 1em 0;
}

figure {
	margin: 0;
}

.header {
	padding: var(--unit-base) var(--margin-default);
	text-align: center;
}

.logo {
	font-size: var(--gros-texte);
}

.logo__link {
	font-family: var(--logo-font);
	font-style: italic;
	font-weight: 700;
}

.header__by {
	font-size: var(--mignonne);
	font-style: italic;
}

.header__author {
	font-size: var(--mignonne);
	font-variant-caps: all-small-caps;
	letter-spacing: 0.05em;
}

.link_static {
	border: none;
}

.link_static:hover {
	border: none;
}

.link_color_swap {
	color: var(--couleur-texte);
}

.link_color_swap:hover {
	color: var(--couleur-accent);
}

.title {
	font-size: var(--parangon);
	font-weight: 300;
	letter-spacing: 0.05em;
	line-height: 1.15;
	text-transform: uppercase;
}

.smalltitle {
	color: white;
	font-size: var(--petit-texte);
	letter-spacing: 0.05em;
	line-height: 1.25;
	position: absolute;
		top: 50%;
		left: 50%;
	transform: translate(-50%, -50%);
	text-transform: uppercase;
	width: calc(100% - (2 * var(--unit-base)));
}

.main {
	margin: calc(3 * var(--unit-default)) auto;
	max-width: var(--max-width);
}

.home {
	max-width: unset;
}

.homecontelist {
	display: grid;
		grid-column-gap: calc(var(--unit-base) / 2);
		grid-row-gap: calc(var(--unit-base) / 2);
		grid-template-columns: repeat(3, 1fr);
}

.octogone {
	display: block;
	overflow: hidden;
	padding-top: 100%;
	position: relative;
}

.octogone__inner {
	display: grid;
	height: 120%;
	overflow: hidden;
	position: absolute;
		top: -10%;
		left: -10%;
	transform: rotate(45deg);
	width: 120%;
}

.octogone__cover {
	/*background-position: 50% 50%;
	background-size: cover;*/
	height: 100%;
	object-fit: cover;
	position: absolute;
	transform: rotate(-45deg) scale(0.84);
	width: 100%;
}

.octogone__inner::after {
	background-color: var(--couleur-texte);
	content: "";
	opacity: 0;
	position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
	transition: opacity 0.1s;
}

.octogone__title {
	opacity: 0;
	text-align: center;
	transition: opacity 0.1s;
}

.homeconte__link {
	display: block;
}

.homeconte__cover {
	background-position: 50% 50%;
	background-size: auto 100%;
	margin: calc(var(--unit-default) / 2) 0 0 0;
	padding-top: calc(100% / 3);
	position: relative;
}

.homeconte__cover::before,
.homeconte__cover::after {
	border: var(--unit-default) solid white;
	border-top-color: transparent;
	border-bottom-color: transparent;
	content: "";
	position: absolute;
		right: 0;
		left: 0;
}

.homeconte__cover::before {
	top: calc(var(--unit-default) * -1);
}

.homeconte__cover::after {
	bottom: calc(var(--unit-default) * -1);
}

.object__header {
	margin: 0 0 calc(2 * var(--unit-default)) 0;
	text-align: center;
}

.conte {
	display: grid;
		grid-template-areas: 
			"header"
			"cover"
			"content"
			"nav";
	max-width: unset;
}

.conte__header {
	grid-area: header;
	margin: 0 0 var(--unit-default) 0;
}

.conte__content {
	grid-area: content;
}

.conte__cover {
	grid-area: cover;
	justify-self: center;
	margin: 0 0 calc(2 * var(--unit-default)) 0;
}

.conte__background {
	display: none;
}

.conte__content > p:first-of-type::first-line {
	font-variant-caps: small-caps;
	letter-spacing: 0.05em;
}

.conte__date {
	display: inline-block;
	font-size: var(--petit-texte);
	margin: 1em 0 0 0;
}

@keyframes imgloader {
	from {
		background-position: 200% 0;
	}
	to {
		background-position: 0% 0;
	}
}

.conte__img {
	height: auto;
	margin: 0 0 0 calc(-1 * var(--unit-base));
	width: calc(100% + (2 * var(--unit-base)));
}

.puce {
	background: var(--couleur-texte);
	height: 2px;
	margin: calc(3 * var(--unit-default)) auto 0 auto;
	width: calc(2 * var(--unit-default));
}

.conte__pagination {
	display: grid;
		align-items: end;
		grid-column-gap: calc(var(--unit-default));
		grid-template-columns: repeat(2, 1fr);
	grid-area: nav;
	letter-spacing: 0.05em;
	line-height: 1.25;
	margin: calc(2 * var(--unit-default)) 0 0 0;
	text-transform: uppercase;
}

.contepagination__older {
	text-align: right;
}

.navsymbol {
	display: flex;
		align-items: center;
		justify-content: space-between;
	grid-column: span 2;
	margin: calc(var(--unit-base) / 3) calc(-1 * var(--margin-default)) 0 calc(-1 * var(--margin-default));
}

.navsymbol__wing {
	display: flex;
		align-items: center;
	flex: 50%;
}

.navsymbol__rule {
	border-top: 2px solid var(--couleur-accent);
	flex: 1;
}

.navsymbol__rule_small {
	flex: unset;
	width: calc(var(--margin-default) + 2px);
}

.navsymbol__dot {
	border: 2px solid var(--couleur-accent);
	height: 12px;
	transform: rotate(45deg);
	width: 12px;
}

.navsymbol__dot_diamond {
	background: var(--couleur-accent);
	height: 7px;
	width: 7px;
}

.navsymbol__dot_hidden {
	opacity: 0;
}

.conte__pagination > div:first-child {
	border-right: ;
}

.contepagination__label {
	font-size: var(--gaillarde);
	font-style: italic;
}

.conte__figcaption {
	font-size: var(--mignonne);
	text-align: left;
}

.conte__figcaption p {
	margin: 0;
}

.pagination {
	display: grid;
		grid-auto-flow: column;
		grid-column-gap: calc(var(--unit-default) / 2);
	font-size: var(--gaillarde);
	font-variant-numeric: lining-nums;
	margin: calc(2 * var(--unit-default)) auto 0 auto;
	width: fit-content;
}

.pagination__item {
	padding: 0 calc(var(--unit-default) / 6);
}

.pagination__current {
	color: var(--couleur-accent);
	cursor: initial;
}

.contelist {
	font-size: var(--gaillarde);
	text-align: center;
}

.contelist__year {
	display: block;
	font-size: var(--petit-texte);
	margin: 1.5em 0 1em 0;
}

.footer {
	display: grid;
		grid-row-gap: 0.8em;
	font-size: var(--mignonne);
	padding: var(--unit-base) var(--margin-default);
	text-align: center;
}

.footer__navul {
	list-style-type: none;
	margin: 0;
	padding: 0;
}

.footer__navli {
	display: inline-block;
	margin: 0.4em 0.4em 0 0.4em;
}

.legal {
	font-style: italic;
}

.copyright {
	font-variant-caps: all-small-caps;
	letter-spacing: 0.07em;
}


@media (hover: hover) {
	
	.octogone:hover .octogone__title {
		opacity: 1;
	}

	.octogone:hover .octogone__inner::after {
		opacity: 0.7;
	}

}


@media (min-width: 768px) {

	.html {
		--max-width-large: 1280px; /* 25.5 */
		--margin-default: calc(3 * var(--unit-base));
	}

	.homecontelist {
		grid-template-columns: repeat(4, 1fr);
	}

	.smalltitle {
		font-size: 1rem;
	}

	.conte {
		display: grid;
			grid-column-gap: calc(2 * var(--margin-default));
			grid-template-areas: 
				"header cover"
				"content cover"
				"nav nav";
			grid-template-columns: repeat(2, 1fr);
			grid-template-rows: auto 1fr auto;
		max-width: unset;
	}

	.conte__background {
		display: block;
		position: fixed;
			top: 0;
			right: 0;
			bottom: 0;
			left: 50%;
		z-index: -1;
	}

	.conte__background::after {
		background: white;
		content: "";
		opacity: 0.8;
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
	}

	.conte__header {
		margin: 0 0 calc(2 * var(--unit-default)) 0;
	}

	.conte__content {
		max-width: var(--max-width);
	}

	.conte__cover {
		margin: 0;
	}

	.conte__figure {
		margin: auto;
		position: sticky;
		    top: var(--margin-default);
	}

	.conte__img {
		height: auto;
		margin: 0;
		width: 100%;
	}


}

@media (min-width: 1280px){

	.homecontelist {
		grid-template-columns: repeat(6, 1fr);
	}


}