/**
 * S-Horaires — styles publics.
 *
 * Tout passe par des variables : l'extension sert plusieurs chartes, elle ne
 * doit rien imposer que le thème ne puisse reprendre.
 */

.sh {
	--sh-ok: #7cc08b;
	--sh-non: #e8a44f;
	/* Un fond opaque par défaut : une couleur translucide prend celle de ce
	   qu'il y a derrière, et la pastille devenait invisible sur un en-tête
	   blanc. */
	--sh-fond: #2c3338;
	--sh-texte: #fff;
	--sh-rayon: 999px;
	/* Respiration horizontale du pavé, épaisseur du filet détaché et largeur
	   de l'espace transparent qui l'en sépare : les trois valeurs qu'on
	   retouche à l'œil une fois le bandeau posé dans son en-tête. */
	--sh-marge: 22px;
	--sh-filet: 2px;
	--sh-ecart: 6px;

	display: inline-flex;
	align-items: center;
	gap: .5em;
	padding: .45em 1em;
	border-radius: var(--sh-rayon);
	background: var(--sh-fond);
	color: var(--sh-texte);
	font-size: .85rem;
	font-weight: 500;
	line-height: 1.3;
	text-decoration: none;
	white-space: nowrap;
}

a.sh:hover,
a.sh:focus-visible {
	background: rgba(0, 0, 0, .42);
}

a.sh:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

/* Variante « bandeau » : un pavé carré calé en haut à droite, au ras du bord
   de la fenêtre. Il sort du flux, donc la section qui l'accueille doit être
   en pleine largeur, sans rembourrage à droite, et en position relative —
   c'est le cas par défaut d'une section Divi. */
.sh--bandeau,
.sh--bandeau-fixe {
	padding: .75em var(--sh-marge);
	border-radius: 0;
	font-size: .82rem;
}

/* Filet détaché, posé hors du pavé : c'est un fragment de la bande elle-même,
   dans la même couleur, séparé par un vide réellement transparent. Dessiné à
   l'intérieur, il laissait voir le fond du pavé entre les deux et donnait
   l'impression d'une bande claire plutôt que d'un décrochement. */
.sh--bandeau::before,
.sh--bandeau-fixe::before {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: calc( ( var(--sh-filet) + var(--sh-ecart) ) * -1 );
	width: var(--sh-filet);
	background: var(--sh-fond);
}

/* Épaisseur à zéro : le filet disparaît sans laisser de pseudo-élément à
   largeur nulle qui resterait dans l'arbre de rendu. */
.sh[style*="--sh-filet:0px"]::before {
	display: none;
}

.sh--bandeau {
	position: absolute;
	top: 0;
	right: 0;
	z-index: 20;
}

/* Le pavé tient sur une seule ligne : sur un petit écran il passerait sinon
   par-dessus le logo. */
@media (max-width: 782px) {
	.sh--bandeau {
		position: static;
		display: flex;
		justify-content: flex-end;
		border-radius: 0;
	}

	.sh--bandeau::before,
	.sh--bandeau-fixe::before {
		display: none;
	}
}

/* Variante « bandeau-fixe » : calée sur la fenêtre et non sur un conteneur.
   À utiliser quand la section Divi qui porte le shortcode est centrée ou
   possède un rembourrage : le pavé toucherait alors le bord de cette section
   et non celui de l'écran. Elle s'efface dès qu'on défile, pour ne pas
   recouvrir le contenu ni se battre avec l'en-tête collant. */
.sh--bandeau-fixe {
	position: fixed;
	top: 0;
	right: 0;
	z-index: 100000;
	transition: opacity .25s ease, transform .25s ease;
}

.sh--bandeau-fixe[data-defile="oui"] {
	opacity: 0;
	transform: translateY(-100%);
	pointer-events: none;
}

@media (max-width: 782px) {
	.sh--bandeau-fixe {
		position: static;
		display: flex;
		justify-content: flex-end;
	}

	.sh--bandeau-fixe[data-defile="oui"] {
		opacity: 1;
		transform: none;
		pointer-events: auto;
	}
}

@media (prefers-reduced-motion: reduce) {
	.sh--bandeau-fixe {
		transition: none;
	}
}

/* Variante sans fond, pour une barre déjà colorée. */
.sh--ligne {
	padding: 0;
	background: none;
	border-radius: 0;
}

a.sh--ligne:hover,
a.sh--ligne:focus-visible {
	background: none;
	text-decoration: underline;
	text-underline-offset: .25em;
}

/* Le voyant ne fait que confirmer le texte : il n'est jamais seul porteur de
   l'information, ce qu'exige le critère 3.1 du RGAA. */
.sh__point {
	flex: none;
	width: .55em;
	height: .55em;
	border-radius: 50%;
	background: var(--sh-non);
}

.sh[data-etat="ouvert"] .sh__point {
	background: var(--sh-ok);
	box-shadow: 0 0 0 .22em color-mix(in srgb, var(--sh-ok) 30%, transparent);
}

.sh[data-etat="bientot"] .sh__point {
	background: var(--sh-ok);
}

.sh__texte {
	display: inline-block;
}

@media (max-width: 640px) {
	.sh {
		font-size: .78rem;
		padding: .4em .8em;
	}
}

/* ------------------------------------------------- tableau de la semaine */

.sh-semaine {
	font-size: .95rem;
}

.sh-semaine__titre {
	margin: 0 0 .75em;
	font-weight: 700;
}

.sh-semaine__liste {
	margin: 0;
	padding: 0;
}

.sh-semaine__jour {
	display: flex;
	justify-content: space-between;
	gap: 1.5em;
	padding: .3em 0;
}

.sh-semaine__jour dt {
	font-weight: 500;
	text-transform: capitalize;
}

.sh-semaine__jour dd {
	margin: 0;
	text-align: right;
	opacity: .82;
}

/* Le jour courant est souligné d'un filet plutôt que d'une couleur : le
   repère tient aussi en noir et blanc, et à l'impression. */
.sh-semaine__jour.est-aujourdhui {
	border-bottom: 2px solid currentColor;
}

.sh-semaine__jour.est-aujourdhui dd {
	opacity: 1;
}

.sh-semaine__note {
	margin: .9em 0 0;
	font-size: .85rem;
	opacity: .7;
}