/* Popovers sombres : palette du clic droit (#palette-jour, detailsjour.js)
 * et barre des périodes (#periode-pop, periodes.js, voir periodes.css).
 * Tous deux sont rattachés à <html>, hors du zoom posé sur <body>.
 */

:is(#palette-jour, #periode-pop){
	position:fixed;
	z-index:10;
	padding:10px 12px;
	background:#2c2c2e;
	border:1px solid rgba(255,255,255,.12);
	border-radius:12px;
	box-shadow:0 8px 24px rgba(0,0,0,.28);
}
:is(#palette-jour, #periode-pop)[hidden]{
	display:none;
}

/* pastilles de couleur ; .aucune : retirer la couleur */
:is(#palette-jour, #periode-pop) .pastille{
	width:20px;
	height:20px;
	padding:0;
	border:0;
	border-radius:50%;
	cursor:pointer;
}
:is(#palette-jour, #periode-pop) .pastille.aucune{
	background:transparent;
	box-shadow:inset 0 0 0 2px #8e8e93;
}
:is(#palette-jour, #periode-pop) .pastille:hover{
	filter:brightness(1.15);
}
:is(#palette-jour, #periode-pop) .pastille[aria-pressed="true"]{
	box-shadow:0 0 0 2px #2c2c2e, 0 0 0 4px #e5e5ea;
}
:is(#palette-jour, #periode-pop) .pastille.aucune[aria-pressed="true"]{
	box-shadow:inset 0 0 0 2px #8e8e93, 0 0 0 2px #2c2c2e, 0 0 0 4px #e5e5ea;
}
:is(#palette-jour, #periode-pop) .pastille:focus-visible{
	outline:2px solid #0a84ff;
	outline-offset:2px;
}

/* ---------- palette du clic droit ---------- */

#palette-jour{
	display:grid;
	grid-template-columns:repeat(7, 20px);
	gap:9px;
}
/* flèche : carré pivoté collé au bord haut (ou bas si .dessus) */
#palette-jour::before{
	content:'';
	position:absolute;
	left:var(--fleche-x, 50%);
	top:-6px;
	width:10px;
	height:10px;
	margin-left:-6px;
	background:inherit;
	border:1px solid rgba(255,255,255,.12);
	border-right:0;
	border-bottom:0;
	transform:rotate(45deg);
}
#palette-jour.dessus::before{
	top:auto;
	bottom:-6px;
	transform:rotate(225deg);
}