/*
 * Sommaire flottant des fiches produit.
 *
 * Un onglet discret sur le bord gauche, qui ouvre le sommaire par-dessus le
 * contenu. Il ne prend aucune place dans la grille de la page, ce qui evite de
 * toucher a la structure des fiches et a l'habillage des sections.
 *
 * Le panneau reste sous l'onglet promo (bord droit) et sous le bandeau cookies.
 */

.jdp-fiche-toc {
	position: fixed;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	z-index: 900;
	display: flex;
	align-items: center;
	pointer-events: none;
	opacity: 0;
	/* La transition ne porte que sur l'opacite. Animer `visibility` la laissait
	   a `hidden` pendant toute la duree, et le panneau restait invisible meme
	   une fois ouvert. Le retrait de l'affichage se fait par `pointer-events`
	   et par la translation, qui suffisent a le sortir du parcours. */
	transition: opacity .28s cubic-bezier(.23, 1, .32, 1);
}

.jdp-fiche-toc.est-visible {
	opacity: 1;
}

/* --- l'onglet ---------------------------------------------------------- */

.jdp-fiche-toc-bouton {
	pointer-events: auto;
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 14px 12px 14px 10px;
	border: 1px solid var(--border, #E9E6ED);
	border-left: 0;
	border-radius: 0 var(--radius-md, 12px) var(--radius-md, 12px) 0;
	background: #fff;
	color: var(--fg1, #1a1a1a);
	font: inherit;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .02em;
	cursor: pointer;
	box-shadow: 0 6px 20px rgba(0, 0, 0, .10);
	transition: padding-right .2s ease, box-shadow .2s ease;
}

.jdp-fiche-toc-bouton:hover {
	padding-right: 16px;
	box-shadow: 0 8px 26px rgba(0, 0, 0, .14);
}

.jdp-fiche-toc-bouton:focus-visible {
	outline: 2px solid var(--jdp-orange, #E68A1C);
	outline-offset: 2px;
}

.jdp-fiche-toc-bouton-texte {
	writing-mode: vertical-rl;
	text-orientation: mixed;
	text-transform: uppercase;
	font-size: 11px;
	letter-spacing: .12em;
}

/* Trois traits qui evoquent une liste, plutot qu'une icone de menu. */
.jdp-fiche-toc-bouton-icone {
	display: flex;
	flex-direction: column;
	gap: 3px;
	width: 14px;
}

.jdp-fiche-toc-bouton-icone span {
	height: 2px;
	border-radius: 1px;
	background: var(--jdp-orange, #E68A1C);
}

.jdp-fiche-toc-bouton-icone span:nth-child(1) { width: 100%; }
.jdp-fiche-toc-bouton-icone span:nth-child(2) { width: 70%; }
.jdp-fiche-toc-bouton-icone span:nth-child(3) { width: 85%; }

/* --- le panneau -------------------------------------------------------- */

.jdp-fiche-toc-corps {
	pointer-events: auto;
	position: absolute;
	left: 0;
	top: 50%;
	transform: translate(-102%, -50%);
	width: min(320px, 82vw);
	max-height: min(70vh, 620px);
	overflow-y: auto;
	padding: 22px 20px 18px;
	border: 1px solid var(--border, #E9E6ED);
	border-left: 0;
	border-radius: 0 var(--radius-lg, 16px) var(--radius-lg, 16px) 0;
	background: #fff;
	box-shadow: 0 18px 44px rgba(0, 0, 0, .16);
	opacity: 0;
	transition: transform .32s cubic-bezier(.23, 1, .32, 1), opacity .24s ease;
}

.jdp-fiche-toc.est-ouvert .jdp-fiche-toc-corps {
	transform: translate(0, -50%);
	opacity: 1;
}

.jdp-fiche-toc.est-ouvert .jdp-fiche-toc-bouton {
	visibility: hidden;
}

.jdp-fiche-toc-entete {
	margin: 0 0 14px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--fg2, #69727D);
}

/* 44 px de cote : la cible tactile recommandee. La croix reste dessinee petite,
   c'est la zone cliquable qui est large, sans quoi elle se rate au doigt. */
.jdp-fiche-toc-fermer {
	position: absolute;
	top: 6px;
	right: 6px;
	width: 44px;
	height: 44px;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: var(--fg2, #69727D);
	font-size: 24px;
	line-height: 1;
	cursor: pointer;
}

.jdp-fiche-toc-fermer:hover {
	background: var(--bg2, #F7F5F2);
	color: var(--fg1, #1a1a1a);
}

/* --- la liste ---------------------------------------------------------- */

.jdp-fiche-toc-nav ul,
.jdp-fiche-toc-nav ol {
	margin: 0;
	padding: 0;
	list-style: none;
}

.jdp-fiche-toc-nav li {
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Le sommaire arrive du contenu, ou il portait le style des puces du hero :
   pastilles rondes et coches. On neutralise tout l'heritage pour qu'il
   redevienne une liste de navigation. Le `!important` est necessaire, les
   regles d'origine en portent aussi. */
.jdp-fiche-toc-nav ul,
.jdp-fiche-toc-nav ol,
.jdp-fiche-toc-nav li {
	list-style: none !important;
	background: none !important;
	background-image: none !important;
	padding-left: 0 !important;
	text-indent: 0 !important;
	display: block !important;
	gap: 0 !important;
}

.jdp-fiche-toc-nav li::before,
.jdp-fiche-toc-nav li::after,
.jdp-fiche-toc-nav li::marker {
	content: none !important;
	display: none !important;
	background: none !important;
}

/* Certaines listes portent leur puce dans un element reel. On masque uniquement
   ceux qui ne contiennent aucun lien : masquer tout ce qui n'est pas un <a>
   emportait aussi les liens imbriques dans un span. */
.jdp-fiche-toc-nav li > *:not(a):not(:has(a)) {
	display: none !important;
}

/* Et on neutralise les pastilles dessinees en fond sur les elements qui, eux,
   portent bien un lien. */
.jdp-fiche-toc-nav li > *:has(a) {
	background: none !important;
	border: 0 !important;
	padding: 0 !important;
	margin: 0 !important;
	display: block !important;
	width: auto !important;
	height: auto !important;
}

.jdp-fiche-toc-nav a {
	display: block;
	padding: 9px 10px 9px 14px;
	border-left: 2px solid transparent;
	color: var(--fg2, #69727D);
	font-size: 14px;
	line-height: 1.35;
	text-decoration: none;
	transition: color .18s ease, border-color .18s ease, background-color .18s ease;
}

.jdp-fiche-toc-nav a:hover {
	color: var(--fg1, #1a1a1a);
	background: var(--bg2, #F7F5F2);
}

.jdp-fiche-toc-nav a.est-active {
	color: var(--fg1, #1a1a1a);
	border-left-color: var(--jdp-orange, #E68A1C);
	font-weight: 600;
}

/* --- petits ecrans ------------------------------------------------------ */

@media (max-width: 900px) {
	.jdp-fiche-toc {
		top: auto;
		bottom: 84px;
		transform: none;
	}

	.jdp-fiche-toc-corps {
		top: auto;
		bottom: 0;
		transform: translate(-102%, 0);
		max-height: 60vh;
	}

	.jdp-fiche-toc.est-ouvert .jdp-fiche-toc-corps {
		transform: translate(0, 0);
	}

	.jdp-fiche-toc-bouton {
		padding: 12px 10px;
	}

	/* Sous 470 px environ, le panneau ouvert atteint le coin bas droit ou vit
	   l'onglet promo, qui passe devant lui : son empilement est bien plus haut.
	   On efface l'onglet le temps de la consultation, plutot que de retrecir le
	   panneau au point de couper les intitules. Deux panneaux flottants ouverts
	   en meme temps sur un telephone n'ont de toute facon aucun interet. */
	body.jdp-toc-ouvert .jdp-promotab {
		opacity: 0;
		pointer-events: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.jdp-fiche-toc,
	.jdp-fiche-toc-corps,
	.jdp-fiche-toc-bouton {
		transition: none;
	}
}

/* La sentinelle sert uniquement de repere au script, elle n'occupe aucune place. */
.jdp-fiche-toc-sentinelle {
	height: 1px;
	margin: 0;
	padding: 0;
	pointer-events: none;
}