/*
Theme Name: Ergopix
Theme URI: https://www.ergopix.com
Update URI: https://www.ergopix.com
Author: ergopix sàrl
Version: 1.0
*/

:root {
	--font-size-base: 22px;	
	--padding-fluid: 3.125vw;
	font-size: var(--font-size-base);
}

body {
	font-family: "Akkurat";
	font-weight: 400;
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	color: hsl(var(--primary-color));	
}

/* GLOBAL 
-------------------------------------------------- */

a {
	color: hsl(var(--primary-color));
	 text-decoration: none;
	 transition: opacity 0.4s cubic-bezier(0.34, 0, 0.34, 1);
}

	a:not(.overlay-home-grad):hover{
		color: hsl(var(--primary-color));
		opacity: 0.6;
	}
	
.container-fluid {
		padding-left: max(var(--padding-fluid), 42px);
		padding-right: max(var(--padding-fluid), 42px);
}

.list-inline li {
		display: inline-block;
}
	
svg#logo-alter path#Fill-185,
svg#logo-alter path#Fill-187,
svg#logo-alter path#Fill-189,
svg#logo-alter g#h,
svg#footer-alter path#Fill-185,
svg#footer-alter path#Fill-187,
svg#footer-alter path#Fill-189  {
	fill: hsl(var(--primary-color));
}


/* HELPERS 
----------------------------------------------------- */

.bg-primary-color {
	background-color: hsl(var(--background-color));
}

.bg-secondary-color {
	background-color: hsl(var(--background-secondary));
}

.img-carre {
	position: relative;
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center center;
	padding-bottom: 100%;  
	width: 100%;	
}

.fit-cover {
	object-fit: cover;
}

.opacity-80 {
	opacity: 0.8;
}

/* MENU MOBILE
------------------------------------------------------ */

.hamburger {
	margin-top: -9px;
	display: block;
	width: 42px;
	overflow: hidden;
	float: right;
}

	.hamburger span {
		background: hsl(var(--primary-color));
		display: block;
		height: 2px;
		margin: 9px 0;
		position: relative;
		transform: rotate(0);
		top: 0;
		left: 0;
		opacity: 1;
		transition: none .5s ease;
		transition-property: transform, top, left, opacity;
	}

body.mm-wrapper--opened .hamburger span.top-bar {
	transform: rotate(45deg);
	top: 12px;
}

body.mm-wrapper--opened .hamburger span.middle-bar {
	opacity: 0;
}

body.mm-wrapper--opened .hamburger span.bottom-bar {
	transform: rotate(-45deg);
	top: -10px;
}

body.mm-wrapper--opened .hamburger span.middle-bar {
	left: -40px;
}

.mm-listview{
	margin-top: calc((var(--mm-listitem-size) - var(--mm-lineheight))/ 2);
}

.mm-listitem::after {
	display: none;
}

.mm-navbar__title img{
	padding: 15px 0;
}

.btn-search {
	font-size: 1.500rem;
	cursor: pointer;
}

.mm-menu {
	--mm-color-background: hsl(var(--background-secondary));
	--mm-color-text: hsl(var(--primary-color));
	text-transform: uppercase;
}


/* MENU 
---------------------------------------------------------------------- */

header nav {
	height: clamp(44px ,var(--padding-fluid), 80px);
}
	header nav ul.main-menu li:not(:last-child) {
		margin-right: clamp(19px, 1.38vw, 36px);
	}

	header nav ul.main-menu li a {
		display: inline-block;
		text-decoration: none;
		font-size: clamp(14px, 1vw, 26px);
		padding-left: 0.2em;
		padding-right: 0.2em;
		line-height: 1.15;
		letter-spacing: 0.062em;
		text-transform: uppercase;
		font-weight: 600;
	}

	nav ul.main-menu li.current_page_item a,
	nav ul.main-menu li.current_page_parent a,
	.active,
	a.active:hover,
	body.post-video .video-menu-item a,
	body.single-post:not(.post-video) .article-menu-item a {
  	color: white;
  	background-color: hsl(var(--primary-color));
	}

header .side-menu {
  transform: rotate(270deg);
  transform-origin: 100% 100%;
  width: auto;
  height: var(--padding-fluid);
  padding-right: 30vh;
  top: 0;
  right: 0;
  z-index: 1;
}

	header .side-menu li:not(:last-child) {
		margin-right: clamp(15px, 1vw, 30px);
	}
	
	header .side-menu li a {
		padding-left: 0.1rem;
		padding-right: 0.1rem;
		cursor: pointer;
	}

@keyframes fadeIn {
  0% {
	opacity: 0;
  }
  100% {
	opacity: 1;);
  }
}



/* HOME et ARCHIVES
------------------------------------------------------------------- */

hr.hr-home {
	width: 30px;
	border-top: 2px solid;
}

.ratio.vignette-video::after {
	position: absolute;
	bottom: 50%;
	left: 50%;
	transform:translate(-50%,50%);
	width: 20%;
	content: var(--play-button);
	opacity: 0.7;
}

section#first-article .titre {
	margin-bottom: 6.9vw;
}

section#first-article .mobile {
	
}

section#first-article .overlay-home-content {
	position: absolute;
	z-index:10;
	width: 50%;
	bottom: 5%;
	left: -10%;
}

section#first-article .overlay-home-grad {
	position: absolute;
	top:0;
	left:0;
	width: 98%;
	height: 100%;
	background: linear-gradient(270deg, hsla(var(--background-secondary) / 0) 0%, hsla(var(--background-secondary) / 0) 10%, hsla(var(--background-secondary) / 0.11) 42%, hsla(var(--background-secondary) / 0.7) 70%, hsla(var(--background-secondary) / 0.93) 90%, hsl(var(--background-secondary)) 100%);
}

section#first-article .overlay-home-content .line-clamp {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;  
  overflow: hidden;
}

section#other-articles {
	margin-bottom: clamp(50px, 10.7vw - 55px, 171px);
	padding-top: 1.1rem;
}

section#list-articles {
	margin-bottom: clamp(25px, 16vw - 55px, 80px);
}

section#linked-articles .other-article,
section#other-articles .other-article {
	  padding-bottom: 1.1rem;
}

section#boutons-articles {
	padding-bottom: clamp(50px, 10.7vw - 55px, 171px);
}

	section#boutons-articles a.btn-articles {
		background-color: hsl(var(--background-secondary));
		padding-left: clamp(7.5px, 0.75vw, 19px);
		padding-right: clamp(7.5px, 0.75vw, 19px);
		padding-top: clamp(6px, 0.58vw, 15px);
		padding-bottom: clamp(5.4px, 0.58vw, 14px);
	}

	section#boutons-articles a.btn-articles:last-child {
		margin-left: 16px;
	}

	section#boutons-articles a.btn-articles i {
		font-size: 1.2em;
		font-weight: 500;
		padding-left: clamp(5px, 0.5vw, 10px);
	}
	
	section#boutons-articles a.btn-articles.small {
			font-size: clamp(16px, 1vw, 22px)!important;	
	}
	
	section#boutons-articles a.btn-articles.suivant i {
	  	padding-right: clamp(5px, 0.5vw, 10px);
	  	padding-left: 0;
	}
	
	section#boutons-articles a.btn-articles.precedent i {
	  	padding-left: clamp(5px, 0.5vw, 10px);
	  	padding-right: 0;
	}

/* ARTICLE
--------------------------------------------------------------------*/

section#en-tete{
	padding-bottom: clamp(80px, 8.125vw, 208px);
}

	section#en-tete #titre-article {
		border-bottom: solid 3px hsla(var(--primary-color)/ 8%);
		padding-bottom: 1rem;
		margin-bottom: 0.8rem;
	}

article section#image-en-tete{
	margin-top: -1.1rem;
}

article {
	margin-bottom: clamp(50px, 10.7vw - 55px, 171px);
}

	article a:not(.share) {	
	  	background: linear-gradient(transparent 0%, transparent 55%, hsl(var(--primary-color) / 15%) 55%, hsl(var(--primary-color) / 15%) 100%);
	}

	article ul,
	article ol {
	  	margin: 0;
	  	padding: 0;
	}
	
		article ul li,
		article ol li {	
			margin-bottom: 1rem;
			line-height: 1.2;
		}

	article ol {
	  	padding-left: 1rem;
	}
	
		article ol li {
			padding-left: 1.1rem;
		}

	article ul {
		list-style-type: none;
	}

		article ul li {
	  	border-left: solid 2px hsl(var(--primary-color) / 100%);
	  	padding-left: 2rem;
		}

article .encadre {
	margin-top: 1rem;
	margin-bottom: 1rem;
}

	article .encadre * {
		padding: 0.6rem 1rem 0.6rem 1rem ;
		margin-bottom: 0.1rem;
	}

	article .encadre *:not(h1, h2, h3, h4, h5, h6) {
		background-color: rgba(0,0,0, 0.04);
		font-size: 0.81rem;
	}

article .encadre h2,
article .encadre h3,
article .encadre h4,
article .encadre h5,
article .encadre h6 {
	background-color: rgba(0,0,0, 0.08);
}

article figure {
	position:relative;
}

	article figure figcaption {
		max-width: 50%;
		padding-left: 0.8em;
		padding-right: 0.8em;
		padding-top: 0.3em;
		padding-bottom: 0.3em;
		position: absolute;
		transform: rotate(270deg) translate(-0.8em , -50%);
		transform-origin: 0% 0%;
		color: white;
		background-color: hsl(var(--primary-color));
		z-index: 10;
		bottom: 0;
		left: 0;
	}

article blockquote {
	position: relative;
}

	article blockquote p::before,
	article blockquote p::after {
		position: absolute;
		z-index: 10;
		opacity: 0.1;
		font-size: 4em;
	}

	article blockquote p::before {
		content: "\201c";
		top:-0.4em;
		left:0;
	}

	article blockquote p::after {
		content: "\201e";
		bottom: 0.25em;
		right:0;
	}

	article blockquote h6 {
		text-transform: uppercase;
	}

	article blockquote p {
		margin-bottom: 0.25rem;
	}
	
article .share {
		line-height: 1;
}
	
article .slider {
		width: calc(100% - 25px);
}
	
section#linked-articles {
	margin-bottom: clamp(50px, 10.7vw - 55px, 171px);
	margin-top: clamp(50px, 10.7vw - 55px, 171px);
}

/* A Propos
---------------------------------------------------------------------- */

main {
	margin-bottom: clamp(100px, 12vw ,200px)
}

	main .auteurs {
		margin-top: -2.5rem;
	}

section#en-tete-apropos {
  padding-bottom: clamp(150px, 15vw, 250px);
}

section#en-tete-apropos #titre {
	padding-bottom: 1rem;
}

/* Footer 
---------------------------------------------------------------------- */

footer {
	position: relative;
	overflow: hidden;
	height: clamp(150px, 10vw, 330px);
}

	footer img {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

.accordion-button {
	cursor: pointer;
	font-size: inherit;
}

	.accordion-button:not(.collapsed) {
		box-shadow: none;
		border-bottom: 2px solid #FAFAFA;
	}

	.accordion-body .the-content p:last-child, .content-with-bg p:last-child{
		margin-bottom: 0;
	}

@media (min-width: 2560.01px) {
	
	header {
			position: relative;
		}
		
		header::before {
			content: "";
			position: absolute;
			width: 100vw;
			height: 100%;
			background-color: hsl(var(--background-secondary));
			z-index: -1;
		}
	}
	

@media (min-width: 1200.01px) {
	main {
			max-width: 1140px!important;
		}
	}
}

@media (max-width: 1199.98px) {}

@media (max-width: 991.98px) {
	
	article .slider {
		width: 100%;
	}
	
	.container-lg {
		padding-right: 42px;
		padding-left: 42px;
	}
	
	.fs-3 {
	  font-size: 0.77rem!important;
	}
	
	h2 {
		font-size: 30px!important;	
	}
	
	h6,
	small,
	.small {
		font-size: 0.545454rem;
		line-height: 1.143;
		letter-spacing: 0.0628em;
	}
	
	main .auteurs {
		margin-top: -1.5rem;
	}
	
	section#boutons-articles a.btn-articles:first-child {
	  margin-right: 0px;
	}
	
	section#en-tete-apropos {
	  padding-bottom: 100px;
	}
	
	section#first-article {
			margin-bottom: 0rem;
	}
		
		section#first-article .titre-mobile {
				margin-bottom: max(5vw, 26px) ;
		}
		
	section#other-articles {
		  padding-top: 40px;
	}
	
	section#linked-articles .other-article,
	section#other-articles .other-article {
		  padding-bottom: 1.5rem;
	}
	
	.slider-wrapper{
		display:flex;
		justify-content: center;
	}
	
	.share-article {
		font-size: 0.8rem;
	}
}

@media (max-width: 767.98px) {}

@media (max-width: 575.98px) {}