/*
 * Client - articles :
 * sommaire sticky,
 * progression de lecture
 * et retour haut de page.
 */

html{
	scroll-behavior:smooth;
}


/* =========================================================
   STRUCTURE GÉNÉRALE
   ========================================================= */

.single-post #client-post-primary{
	display:flex;
	flex-wrap:nowrap;
	align-items:flex-start;

	width:100%;
	padding:0;

	box-sizing:border-box;

	overflow:visible !important;
}


/* =========================================================
   CONTENU ARTICLE
   ========================================================= */

.single-post #client-post-primary #main{
	flex:0 0 60%;

	width:60%;
	max-width:60%;

	padding:4em 3% 0;

	box-sizing:border-box;
}


/* =========================================================
   COLONNE SOMMAIRE
   ========================================================= */

.single-post #client-post-primary #sommaire{
	flex:0 0 40%;

	width:40%;
	max-width:40%;

	padding:0 3%;

	box-sizing:border-box;

	position:relative;
	align-self:stretch;

	overflow:visible !important;
}


/*
 * Le parent #sommaire conserve ses 30 %
 * lorsque le contenu passe en position fixed.
 */

.single-post #sommaire .sommaire-inner{
	position:relative;

	width:100%;
	max-width:100%;

	box-sizing:border-box;
}


/* Sommaire sticky desktop */

.single-post #sommaire .sommaire-inner.is-fixed{
	position:fixed;
	z-index:5;
}


/* Position finale en bas de l'article */

.single-post #sommaire .sommaire-inner.is-bottom{
	position:absolute;
	z-index:1;
}


/* =========================================================
   SOMMAIRE
   ========================================================= */

.custom-toc{
	width:100%;

	padding:4em 0;

	box-sizing:border-box;

	background:#fff;

}


/*
 * Conteneur du sommaire.
 * Suppression de l'ancienne bordure beige.
 */

.toc-sommaire{
	width:100%;

	padding:20px 0;

	border:0;
	border-radius:0;

	box-sizing:border-box;
	padding: 10%;
		background: var(--wp--preset--color--accent);
}


/* =========================================================
   TITRE DU SOMMAIRE
   ========================================================= */

.toc-header,
.toc-header-toggle{
	display:flex;

	justify-content:space-between;
	align-items:center;
}


.toc-header{
	margin-bottom:20px;
}


.toc-header-toggle{
	font-family:var(--font-headings);
	font-size:2.3em;
	cursor:pointer;
}


/* =========================================================
   LISTE DU SOMMAIRE
   ========================================================= */

.custom-toc ul{
	list-style:none;

	padding:0;
	margin:15px 0 0;
}


.custom-toc li{
	margin:0 0 10px;
	padding:0;
}


/*
 * Chaque entrée du sommaire devient une pilule.
 */

.custom-toc .toc-content a{
	display:flex;
	align-items:center;

	gap:14px;

	width:100%;

	padding:10px 18px;

	box-sizing:border-box;

	border-radius:999px;

	background:var(--wp--preset--color--secondary);

	color:var(--wp--preset--color--primary);

	text-decoration:none;

	font-size:0.82em;
	text-transform: uppercase;
	font-weight:600;
	line-height:1.25;

	transition:
		background .2s ease,
		color .2s ease;
}


/* =========================================================
   PASTILLE
   ========================================================= */

/*
 * Cercle vide à gauche de chaque titre.
 */

.custom-toc .toc-content a::before{
	content:"";

	display:block;

	flex:0 0 18px;

	width:18px;
	height:18px;

	border:2px solid var(--wp--preset--color--primary);
	border-radius:50%;

	background:transparent;

	box-sizing:border-box;

	transition:
		background .2s ease,
		border-color .2s ease,
		transform .2s ease;
}


/* =========================================================
   HOVER
   ========================================================= */

.custom-toc .toc-content a:hover{
	color:var(--wp--preset--color--primary);
}


/* =========================================================
   SECTION ACTIVE
   ========================================================= */

/*
 * On ne change plus la graisse ou la couleur du texte.
 * C'est uniquement la pastille qui indique la section active.
 */

.custom-toc .toc-content a.toc-active{
	color:var(--wp--preset--color--primary);
}


/*
 * Pastille remplie lorsque la section est active.
 */

.custom-toc .toc-content a.toc-active::before{
	background:var(--wp--preset--color--primary);
	border-color:var(--wp--preset--color--primary);
}


/* =========================================================
   ICÔNE MOBILE
   ========================================================= */

.custom-toc .toc-icon{
	visibility:hidden;
}


/* =========================================================
   ANCRES H2
   ========================================================= */

h2[id]{
	scroll-margin-top:var(--header-offset,100px);
}


/* =========================================================
   BARRE DE PROGRESSION DE LECTURE
   ========================================================= */

#reading-progress-container{
	position:fixed;

	left:0;
	top:0;

	width:4px;
	height:100vh;

	background:rgba(0,0,0,.05);

	z-index:20;
}


#reading-progress-bar{
	width:100%;
	height:0%;

	background:var(--wp--preset--color--secondary);

	transition:height .1s linear;
}


/* =========================================================
   RETOUR EN HAUT
   ========================================================= */

#back-to-top{
	position:fixed;

	bottom:25px;
	left:50%;

	transform:
		translateX(-50%)
		translateY(20px);

	background:var(--wp--preset--color--primary);

	color:#fff;

	padding:10px 18px;

	border-radius:30px;
	border:0;

	font-size:0.8em;

	cursor:pointer;

	opacity:0;

	pointer-events:none;

	transition:all .3s ease;

	z-index:50;
}


#back-to-top.visible{
	opacity:1;

	pointer-events:auto;

	transform:
		translateX(-50%)
		translateY(0);
}


#back-to-top:hover{
	background:var(--wp--preset--color--primary);
}


/* =========================================================
   PLACEHOLDER MOBILE
   ========================================================= */

.toc-mobile-placeholder{
	display:none;
}


/* =========================================================
   HERO ARTICLE
   ========================================================= */

.client-post-hero{
	text-align:center;

	padding:5% 10%;

	font-size:.8em;
}


/* =========================================================
   CARTES ARTICLE
   ========================================================= */

.client-post-card{
	border-radius:0 0 20px 20px;

	padding:5% 10%;
}


.client-post-readmore{
	text-decoration:underline;
}


/* =========================================================
   TITRES DANS LES ARTICLES
   ========================================================= */

.single-post .content-area h2.wp-block-heading{
	margin:1em 0 !important;
}

.single-post .content-area h3.wp-block-heading{

	font-family:var(--font-body);
	font-size:1.47em;
	font-weight:700;

	line-height:1.5;

}


.single-post .content-area h4.wp-block-heading{
	display:inline;

	background:var(--wp--preset--color--secondary);

	font-family:var(--font-body);
	font-size:1.18em;
	font-weight:700;

	line-height:1.5;

	padding:0px 1px;

	-webkit-box-decoration-break:clone;
	box-decoration-break:clone;
}

.single-post .content-area h3.wp-block-heading + *{
	margin-top:1em;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media(max-width:768px){

	/* Structure en colonne */

	.single-post #client-post-primary{
		display:flex;

		flex-direction:column;

		width:100%;
	}


	/* =====================================================
	   SOMMAIRE
	   ===================================================== */

	.single-post #client-post-primary #sommaire{
		order:1;

		flex:0 0 100%;

		width:100%;
		max-width:100%;

		padding-top:10px;

		position:relative;

		box-sizing:border-box;
	}


	/* =====================================================
	   ARTICLE
	   ===================================================== */

	.single-post #client-post-primary #main{
		order:2;

		flex:0 0 100%;

		width:100%;
		max-width:100%;

		padding-top:20px;

		box-sizing:border-box;
	}


	/* =====================================================
	   DÉSACTIVATION DU STICKY DESKTOP
	   ===================================================== */

	.sommaire-inner,
	.sommaire-inner.is-fixed,
	.sommaire-inner.is-bottom{
		position:relative !important;

		top:auto !important;
		left:auto !important;
		right:auto !important;
		bottom:auto !important;

		width:100% !important;
		max-width:100% !important;
	}


	/* =====================================================
	   SOMMAIRE MOBILE
	   ===================================================== */

	   .toc-header-toggle{
	   	font-size: 1.3em;
	   }

	.custom-toc{
		min-height:auto;

		margin-top:0;

		padding:20px 0;

		overflow:visible;
	}


	.custom-toc .toc-sommaire{
		position:relative;

		top:auto;
		left:auto;

		width:100%;

		z-index:40;

		background:#fff;

		box-sizing:border-box;
		background: var(--wp--preset--color--accent);

	}


	/*
	 * Sticky mobile contrôlé par le JS.
	 */

	.custom-toc .toc-sommaire.is-fixed-mobile{
		position:fixed;
	}


	/*
	 * Position finale lorsque le sommaire
	 * arrive en bas de l'article.
	 */

	.custom-toc .toc-sommaire.is-bottom-mobile{
		position:absolute;
	}


	/* =====================================================
	   OUVERTURE / FERMETURE DU SOMMAIRE
	   ===================================================== */

	.custom-toc .toc-content{
		max-height:0;

		overflow:hidden;

		transition:max-height .3s ease;
	}


	.custom-toc.is-open .toc-content{
		max-height:1000px;
	}


	/* Icône visible sur mobile */

	.custom-toc .toc-icon{
		visibility:visible;

		transition:transform .3s ease;
	}


	.custom-toc.is-open .toc-icon{
		transform:rotate(180deg);
	}


	/* Placeholder du sticky mobile */

	.toc-mobile-placeholder.is-active{
		display:block;
	}

}