/**
 * Espace membres, côté site.
 *
 * Tout est enfermé sous .epc-app pour ne pas déborder sur le thème du site.
 * Conçu pour le téléphone d'abord : c'est là que les volontaires consulteront,
 * le dimanche matin ou dans la semaine. Les écrans larges élargissent, ils ne
 * changent pas la logique.
 */

/* Aucun jeton de couleur ici : ils sont tous sur :root, et seulement là.
   Les déclarer aussi sur .epc-app créait une seconde source que le mode sombre
   ne redéfinissait pas : le contenu restait en couleurs claires sur une page
   sombre, donc illisible. */

.epc-app {
	max-width: 62rem;
	margin: 0 auto;
	color: var(--epc-encre);
	font-size: 1rem;
	line-height: 1.55;
	-webkit-text-size-adjust: 100%;
}

.epc-app *,
.epc-app *::before,
.epc-app *::after {
	box-sizing: border-box;
}

/* --- Entête ---------------------------------------------------------------- */

.epc-entete h2 {
	margin: 0 0 0.25em;
	font-size: 1.6rem;
	line-height: 1.2;
}

.epc-sous-titre {
	margin: 0 0 1.5em;
	max-width: 46rem;
	color: var(--epc-encre-douce);
}

/* --- Bascule entre les vues ------------------------------------------------ */

/* Les onglets d'un dimanche respirent un peu plus que ceux de la simulation :
   ils séparent deux écrans de contenu, pas deux variantes d'un tableau. */
.epc-detail .epc-vues {
	margin-top: var(--epc-espace-4);
}

.epc-vues {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-bottom: 1.25rem;
	padding: 5px;
	border-radius: var(--epc-rayon);
	background: var(--epc-fond-doux);
}

.epc-vue-bouton {
	flex: 1 1 auto;
	min-height: 44px;
	padding: 9px 16px;
	border: none;
	border-radius: calc(var(--epc-rayon) - 3px);
	background: transparent;
	color: var(--epc-encre-douce);
	font: inherit;
	font-weight: 600;
	cursor: pointer;
}

.epc-vue-bouton:hover {
	color: var(--epc-encre);
}

.epc-vue-bouton.est-active {
	background: var(--epc-fond);
	color: var(--epc-accent);
	box-shadow: var(--epc-ombre);
}

.epc-vue-bouton:focus-visible {
	outline: 2px solid var(--epc-accent);
	outline-offset: 2px;
}

/* --- Zone d'état ----------------------------------------------------------- */

.epc-etat {
	min-height: 1.5em;
	margin: 0 0 0.75rem;
	color: var(--epc-encre-douce);
	font-size: 0.9rem;
}

.epc-etat--ok {
	color: var(--epc-ok);
}

.epc-etat--erreur {
	color: var(--epc-alerte);
	font-weight: 600;
}

/* --- Recherche ------------------------------------------------------------- */

.epc-recherche {
	margin-bottom: 1rem;
}

.epc-recherche label {
	display: block;
	margin-bottom: 4px;
	color: var(--epc-encre-douce);
	font-size: 0.85rem;
}

.epc-recherche input {
	width: 100%;
	min-height: 44px;
	padding: 9px 12px;
	border: 1px solid var(--epc-contour);
	border-radius: var(--epc-rayon);
	background: var(--epc-fond);
	color: inherit;
	font: inherit;
}

/* --- Fiches des personnes -------------------------------------------------- */

.epc-personnes {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.epc-personne {
	border: 1px solid var(--epc-trait);
	border-radius: var(--epc-rayon);
	background: var(--epc-fond);
	overflow: hidden;
}

.epc-personne.est-inactive {
	opacity: 0.6;
}

.epc-personne__titre {
	margin: 0;
	font-size: 1rem;
}

.epc-personne__tete {
	display: flex;
	align-items: center;
	gap: 12px;
	width: 100%;
	min-height: 56px;
	padding: 12px 16px;
	border: none;
	background: transparent;
	color: inherit;
	font: inherit;
	text-align: left;
	cursor: pointer;
}

.epc-personne__tete:hover {
	background: var(--epc-fond-doux);
}

.epc-personne__tete:focus-visible {
	outline: 2px solid var(--epc-accent);
	outline-offset: -2px;
}

.epc-personne__nom {
	flex: 1 1 auto;
	font-weight: 600;
}

.epc-etiquette {
	display: inline-block;
	margin-left: 6px;
	padding: 1px 7px;
	border-radius: 9px;
	background: var(--epc-fond-doux);
	color: var(--epc-encre-douce);
	font-size: 0.72rem;
	font-weight: 500;
	vertical-align: middle;
}

.epc-personne__compte {
	flex: 0 0 auto;
	color: var(--epc-encre-douce);
	font-size: 0.85rem;
	white-space: nowrap;
}

.epc-chevron {
	flex: 0 0 auto;
	width: 10px;
	height: 10px;
	border-right: 2px solid var(--epc-encre-douce);
	border-bottom: 2px solid var(--epc-encre-douce);
	transform: rotate(45deg) translate(-2px, -2px);
	transition: transform 0.15s ease;
}

.epc-personne__tete[aria-expanded="true"] .epc-chevron {
	transform: rotate(225deg) translate(-3px, -3px);
}

.epc-personne__corps {
	padding: 4px 16px 16px;
	border-top: 1px solid var(--epc-trait);
}

.epc-note {
	margin: 12px 0;
	padding: 10px 12px;
	border-left: 3px solid var(--epc-attention);
	border-radius: 0 6px 6px 0;
	background: var(--epc-attention-doux);
	color: var(--epc-attention);
	font-size: 0.88rem;
}

/* --- Catégories et rôles --------------------------------------------------- */

.epc-categorie {
	margin: 18px 0 0;
	padding: 0;
	border: none;
}

.epc-categorie legend {
	padding: 0;
	color: var(--epc-encre-douce);
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.epc-roles {
	margin: 8px 0 0;
	padding: 0;
	list-style: none;
}

.epc-role {
	padding: 8px 0;
	border-bottom: 1px solid var(--epc-trait);
}

.epc-role:last-child {
	border-bottom: none;
}

.epc-role__titre {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	min-height: 32px;
	cursor: pointer;
}

.epc-role__case {
	flex: 0 0 auto;
	width: 20px;
	height: 20px;
	margin: 2px 0 0;
	accent-color: var(--epc-accent);
	cursor: pointer;
}

.epc-role__libelle {
	flex: 1 1 auto;
	color: var(--epc-encre-douce);
}

.epc-role.est-cochee .epc-role__libelle {
	color: var(--epc-encre);
	font-weight: 600;
}

.epc-role__libelle small {
	display: block;
	color: var(--epc-encre-douce);
	font-size: 0.8rem;
	font-weight: 400;
}

.epc-role__reglages {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 10px 0 4px 30px;
	padding: 10px 12px;
	border-radius: 8px;
	background: var(--epc-accent-doux);
}

.epc-champ {
	display: flex;
	flex-direction: column;
	gap: 3px;
	flex: 1 1 13rem;
}

.epc-champ span {
	color: var(--epc-encre-douce);
	font-size: 0.78rem;
}

.epc-champ select {
	min-height: 40px;
	padding: 6px 8px;
	border: 1px solid var(--epc-contour);
	border-radius: 6px;
	background: var(--epc-fond);
	color: inherit;
	font: inherit;
	font-size: 0.9rem;
}

.epc-role.est-en-cours {
	opacity: 0.55;
}

.epc-role.est-enregistree .epc-role__reglages {
	background: var(--epc-ok-doux);
}

.epc-role.est-en-erreur .epc-role__reglages {
	background: var(--epc-alerte-doux);
	box-shadow: inset 0 0 0 1px var(--epc-alerte);
}

/* --- Vue par activité ------------------------------------------------------ */

.epc-categorie-titre {
	margin: 1.75rem 0 0.5rem;
	color: var(--epc-encre-douce);
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.epc-activites {
	display: grid;
	grid-template-columns: 1fr;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

@media (min-width: 40rem) {
	.epc-activites {
		grid-template-columns: repeat(2, 1fr);
	}
}

.epc-activite {
	padding: 12px 14px;
	border: 1px solid var(--epc-trait);
	border-left: 4px solid var(--epc-ok);
	border-radius: var(--epc-rayon);
	background: var(--epc-fond);
}

.epc-activite--fragile {
	border-left-color: var(--epc-attention);
	background: var(--epc-attention-doux);
}

.epc-activite--vide {
	border-left-color: var(--epc-alerte);
	background: var(--epc-alerte-doux);
}

.epc-activite__tete {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 10px;
}

.epc-activite__tete h4 {
	margin: 0;
	font-size: 1rem;
}

.epc-compteur {
	flex: 0 0 auto;
	color: var(--epc-encre-douce);
	font-size: 0.82rem;
	white-space: nowrap;
}

.epc-alerte {
	margin: 6px 0 0;
	font-size: 0.85rem;
	font-weight: 600;
}

.epc-activite--vide .epc-alerte {
	color: var(--epc-alerte);
}

.epc-activite--fragile .epc-alerte {
	color: var(--epc-attention);
}

/* --- Jetons ---------------------------------------------------------------- */

.epc-jetons {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 8px 0 0;
	padding: 0;
	list-style: none;
}

.epc-jeton {
	padding: 4px 10px;
	border: 1px solid var(--epc-trait);
	border-radius: 20px;
	background: var(--epc-fond);
	font-size: 0.85rem;
}

.epc-jeton small {
	display: block;
	color: var(--epc-encre-douce);
	font-size: 0.72rem;
}

/* L'envie est écrite, pas seulement teintée : le vert et l'ordinaire ne se
   distinguaient qu'à la couleur, ce qui ne dit rien à qui la distingue mal, et
   rien du tout à qui découvre la page.

   Trois lignes empilées plutôt qu'une seule : bout à bout, le jeton dépassait
   220 px et une carte de neuf personnes s'étirait sur neuf lignes. Empilés,
   les noms restent alignés en colonnes et la carte se parcourt d'un regard. */
.epc-jeton--personne {
	padding: 0;
	border-radius: var(--epc-rayon);
}

/* Le jeton est un bouton : il conduit à la fiche, ouverte au bon rôle. Le
   rembourrage passe sur lui pour que toute la surface soit cliquable, et non
   le seul texte. */
.epc-jeton__bouton {
	display: block;
	width: 100%;
	padding: 6px 12px;
	border: 0;
	border-radius: inherit;
	background: none;
	color: inherit;
	font: inherit;
	text-align: left;
	cursor: pointer;
}

.epc-jeton__bouton:hover {
	background: var(--epc-fond-doux);
}

.epc-jeton__bouton:focus-visible {
	outline: 2px solid var(--epc-accent);
	outline-offset: 1px;
}

.epc-jeton--envie-3 .epc-jeton__bouton:hover {
	background: color-mix( in srgb, var(--epc-ok) 8%, transparent );
}

/* --- Ajouter quelqu'un à un rôle ------------------------------------------- */

.epc-activite__ajout {
	margin-top: 10px;
}

.epc-ajout-role {
	width: 100%;
	min-height: 36px;
	padding: 5px 8px;
	border: 1px dashed var(--epc-contour);
	border-radius: var(--epc-rayon-petit);
	background: transparent;
	color: var(--epc-encre-douce);
	font: inherit;
	font-size: 0.82rem;
	cursor: pointer;
}

.epc-ajout-role:hover {
	border-style: solid;
	border-color: var(--epc-accent);
	color: var(--epc-accent);
}

.epc-ajout-role:focus-visible {
	outline: 2px solid var(--epc-accent);
	outline-offset: 1px;
}

/* La ligne que l'on vient chercher depuis « par activité » : sans ce repère,
   on atterrit au milieu d'une liste de vingt-trois rôles sans savoir lequel
   on visait. */
.epc-role.est-visee {
	border-radius: var(--epc-rayon-petit);
	box-shadow: 0 0 0 2px var(--epc-accent);
}

.epc-jeton__envie {
	font-weight: 600;
}

.epc-jeton__envie,
.epc-jeton__frequence {
	display: block;
}

.epc-jeton--envie-3 {
	border-color: var(--epc-ok);
	background: var(--epc-ok-doux);
}

.epc-jeton--envie-3 .epc-jeton__envie {
	color: var(--epc-ok);
}

.epc-jeton--envie-1 {
	color: var(--epc-encre-douce);
	font-style: italic;
}

.epc-jeton--alerte {
	border-color: var(--epc-alerte);
	background: var(--epc-alerte-doux);
	color: var(--epc-alerte);
}

.epc-jeton--attention {
	border-color: var(--epc-attention);
	background: var(--epc-attention-doux);
	color: var(--epc-attention);
}

/* --- Résumé ---------------------------------------------------------------- */

.epc-chiffres {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
	gap: 10px;
	margin-bottom: 1.5rem;
}

.epc-chiffre {
	padding: 14px 16px;
	border: 1px solid var(--epc-trait);
	border-radius: var(--epc-rayon);
	background: var(--epc-fond);
	box-shadow: var(--epc-ombre);
}

.epc-chiffre.est-incomplet {
	border-color: var(--epc-attention);
}

.epc-chiffre.est-fragile {
	border-color: var(--epc-alerte);
}

.epc-chiffre__valeur {
	display: block;
	color: var(--epc-accent);
	font-size: 2rem;
	font-weight: 700;
	line-height: 1.1;
}

.epc-chiffre__valeur small {
	color: var(--epc-encre-douce);
	font-size: 1rem;
	font-weight: 400;
}

.epc-chiffre__libelle {
	display: block;
	margin-top: 2px;
	color: var(--epc-encre-douce);
	font-size: 0.85rem;
}

.epc-chiffre small {
	color: var(--epc-encre-douce);
	font-size: 0.75rem;
}

.epc-bloc {
	margin-bottom: 1.25rem;
	padding: 14px 16px;
	border: 1px solid var(--epc-trait);
	border-radius: var(--epc-rayon);
	background: var(--epc-fond);
}

.epc-bloc h3 {
	margin: 0 0 0.25em;
	font-size: 1.05rem;
}

.epc-bloc p {
	margin: 0;
	color: var(--epc-encre-douce);
	font-size: 0.88rem;
}

.epc-bloc--alerte {
	border-left: 4px solid var(--epc-alerte);
}

.epc-bloc--attention {
	border-left: 4px solid var(--epc-attention);
}

.epc-liste-fiches {
	margin: 10px 0 0;
	padding: 0;
	list-style: none;
}

.epc-liste-fiches li {
	padding: 8px 0;
	border-bottom: 1px solid var(--epc-trait);
	font-size: 0.9rem;
}

.epc-liste-fiches li:last-child {
	border-bottom: none;
}

.epc-liste-fiches span {
	display: block;
	color: var(--epc-encre-douce);
	font-size: 0.82rem;
}

/* --- Messages -------------------------------------------------------------- */

.epc-message {
	padding: 18px 20px;
	border: 1px solid var(--epc-trait);
	border-radius: var(--epc-rayon);
	background: var(--epc-fond-doux);
}

.epc-message h2 {
	margin: 0 0 0.4em;
	font-size: 1.2rem;
}

.epc-message p {
	margin: 0 0 0.6em;
	color: var(--epc-encre-douce);
}

.epc-message p:last-child {
	margin-bottom: 0;
}

.epc-message--attente {
	border-left: 4px solid var(--epc-attention);
}

.epc-bouton {
	display: inline-block;
	min-height: 44px;
	padding: 11px 20px;
	border-radius: var(--epc-rayon);
	background: var(--epc-accent);
	color: #fff;
	font-weight: 600;
	text-decoration: none;
}

.epc-bouton:hover,
.epc-bouton:focus {
	background: #24475f;
	color: #fff;
}

.epc-aucun-resultat {
	padding: 1.5rem 0;
	color: var(--epc-encre-douce);
	text-align: center;
}

/* --- Impression ------------------------------------------------------------ */

@media print {
	.epc-vues,
	.epc-recherche,
	.epc-etat,
	.epc-chevron {
		display: none;
	}

	.epc-vue[hidden] {
		display: block !important;
	}

	.epc-personne__corps[hidden] {
		display: block !important;
	}
}

/* ==========================================================================
   Planning
   ========================================================================== */

.epc-dimanche {
	margin-bottom: 14px;
	padding: 14px 16px;
	border: 1px solid var(--epc-trait);
	border-radius: var(--epc-rayon);
	background: var(--epc-fond);
}

.epc-dimanche.est-mien {
	border-left: 4px solid var(--epc-accent);
	background: var(--epc-accent-doux);
}

.epc-dimanche__tete {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 10px;
	margin-bottom: 4px;
}

.epc-dimanche__tete h3 {
	margin: 0;
	flex: 1 1 auto;
	font-size: 1.1rem;
}

.epc-theme {
	margin: 0 0 8px;
	color: var(--epc-encre-douce);
	font-style: italic;
}

.epc-vide {
	margin: 8px 0 0;
	color: var(--epc-encre-douce);
	font-style: italic;
}

.epc-groupe {
	margin-top: 12px;
}

.epc-groupe h4 {
	margin: 0 0 4px;
	color: var(--epc-encre-douce);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.epc-creneaux {
	margin: 0;
	padding: 0;
	list-style: none;
}

.epc-creneau {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 6px;
	padding: 5px 0;
	border-bottom: 1px solid var(--epc-trait);
}

.epc-creneau:last-child {
	border-bottom: none;
}

.epc-creneau.est-mien {
	font-weight: 600;
}

.epc-creneau__role {
	color: var(--epc-encre-douce);
}

.epc-creneau.est-mien .epc-creneau__role {
	color: var(--epc-accent);
}

.epc-badge {
	display: inline-block;
	padding: 1px 8px;
	border-radius: 10px;
	background: var(--epc-fond-doux);
	color: var(--epc-encre-douce);
	font-size: 0.72rem;
	font-weight: 600;
	vertical-align: middle;
}

.epc-badge--confirme {
	background: var(--epc-ok-doux);
	color: var(--epc-ok);
}

.epc-badge--decline {
	background: var(--epc-alerte-doux);
	color: var(--epc-alerte);
}

.epc-badge--propose {
	background: var(--epc-attention-doux);
	color: var(--epc-attention);
	font-variant-numeric: tabular-nums;
}

.epc-badge--mien {
	background: var(--epc-accent);
	color: #fff;
}

/* ==========================================================================
   Mon espace
   ========================================================================== */

.epc-mes-absences {
	margin: 10px 0 0;
	padding: 0;
	list-style: none;
}

/* ==================================== La frise : composants de base ======== */

/*
 * D'après la maquette « La frise, sur écran large ». Les valeurs sont celles
 * du fichier, au pixel : 127 px de colonne, 108 px de pastille de rôle,
 * 44 px de cible tactile. Elles vivent en variables sur :root, pour que le
 * thème sombre redéfinisse la palette sans toucher une règle.
 */

/* --- Les grands nombres et les grandes dates ------------------------------- */

/* La maquette leur donne une serif. L'écran se lisait alors dans deux fontes,
   et Denis a tranché le 28/09/2026 : celle du reste du site partout. Ce qui
   distingue ces mots, c'est donc leur corps et leur graisse, pas leur dessin.

   La règle reste : les corps et les graisses sont posés ici, à un seul
   endroit, et les composants s'y réfèrent. */
.epc-affiche {
	font-weight: 600;
	line-height: 1.1;
	letter-spacing: -0.01em;
}

/* --- La pastille d'un rôle ------------------------------------------------- */

/* Le libellé posé au-dessus de la frise : « Présidence », « Cajón ». Largeur
   fixe, pour que deux colonnes voisines s'alignent quoi qu'elles portent. */
.epc-role-pastille {
	box-sizing: border-box;
	width: var(--epc-frise-role);
	max-width: 100%;
	padding: 4px 6px;
	border: 1px solid transparent;
	border-radius: 4px;
	font-size: 0.75rem;
	font-weight: 500;
	line-height: 1.25;
	text-align: center;
	overflow-wrap: anywhere;
}

.epc-role-pastille--confirme {
	background: var(--epc-frise-vert-pale);
	color: var(--epc-frise-vert-encre);
}

.epc-role-pastille--attente {
	border-color: var(--epc-frise-ambre-bord);
	background: var(--epc-frise-ambre-pale);
	color: var(--epc-frise-ambre-encre-forte);
}

/* Décliné et absent partagent le trait tireté : dans les deux cas la personne
   n'est pas là, et la nuance se lit dans le panneau de détail. */
.epc-role-pastille--absent,
.epc-role-pastille--decline {
	border-style: dashed;
	border-color: var(--epc-frise-tirete-clair);
	color: var(--epc-frise-encre-douce);
}

/* Un rôle qu'on a refusé se barre. Le trait tireté seul ne suffisait pas : il
   se confond avec « absent », et on ne savait pas si on avait répondu. */
.epc-role-pastille--decline {
	text-decoration: line-through;
	text-decoration-color: var(--epc-frise-tirete);
}

/* --- Le point sur le fil --------------------------------------------------- */

.epc-point {
	box-sizing: border-box;
	display: block;
	position: relative;
	border-radius: 50%;
}

.epc-point--confirme {
	width: 18px;
	height: 18px;
	background: var(--epc-frise-vert-vif);
}

.epc-point--attente {
	width: 18px;
	height: 18px;
	border: 1.5px solid var(--epc-frise-ambre-trait);
	background: var(--epc-frise-ambre);
}

.epc-point--absent {
	width: 18px;
	height: 18px;
	border: 1.5px dashed var(--epc-frise-tirete);
	background: var(--epc-frise-carte);
}

/* Décliné se dessine comme absent : dans les deux cas je ne suis pas là ce
   dimanche-là, et le panneau dit laquelle des deux raisons. Sans cette règle,
   un dimanche tout décliné n'affichait aucun point : le fil sautait, et rien
   n'expliquait le trou. */
.epc-point--decline {
	width: 18px;
	height: 18px;
	border: 1.5px dashed var(--epc-frise-tirete);
	background: var(--epc-frise-carte);
}

/* Un dimanche où rien ne m'est demandé : un point, pas une pastille. Il tient
   sa place sur le fil sans réclamer le regard. */
.epc-point--libre {
	width: 9px;
	height: 9px;
	background: var(--epc-frise-libre);
}

/* Le dimanche ouvert grossit de quatre pixels. Le point garde sa forme : sa
   couleur dit l'état, sa taille dit qu'on le regarde. */
.epc-jour-choisi .epc-point--confirme,
.epc-jour-choisi .epc-point--attente {
	width: 22px;
	height: 22px;
}

/* --- Les cibles de 44 px --------------------------------------------------- */

/*
 * Chevrons de la frise et boutons de réponse : même gabarit, quarante-quatre
 * pixels de côté. C'est la taille au-dessous de laquelle un doigt manque sa
 * cible, et la page se consulte surtout au téléphone le dimanche matin.
 */
.epc-cible {
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: var(--epc-frise-cible);
	height: var(--epc-frise-cible);
	padding: 0;
	border: 1px solid var(--epc-frise-trait);
	border-radius: var(--epc-rayon-petit);
	background: var(--epc-frise-carte);
	color: var(--epc-frise-encre);
	cursor: pointer;
	transition: background-color 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}

.epc-cible:focus-visible {
	outline: 2px solid var(--epc-frise-vert-vif);
	outline-offset: 2px;
}

.epc-cible[disabled] {
	border-color: var(--epc-frise-trait-clair);
	color: var(--epc-frise-libre);
	cursor: default;
}

.epc-cible:not([disabled]):hover {
	border-color: var(--epc-frise-vert-vif);
}

/* Oui : le seul bouton plein de la page. Il n'y en a qu'un par rôle, et c'est
   la réponse qu'on attend le plus souvent. */
.epc-cible--oui {
	border-color: var(--epc-frise-vert);
	background: var(--epc-frise-vert);
	color: var(--epc-frise-vert-sur);
}

.epc-cible--oui:not([disabled]):hover {
	border-color: var(--epc-frise-vert-sombre);
	background: var(--epc-frise-vert-sombre);
}

.epc-cible--non {
	color: var(--epc-frise-encre-douce);
}

.epc-cible--non:not([disabled]):hover {
	border-color: var(--epc-frise-ambre-trait);
	color: var(--epc-frise-ambre-encre);
}

/*
 * Revenir sur une réponse déjà donnée : le geste existe, il ne s'annonce pas.
 *
 * Ces deux boutons sont volontairement effacés, et c'est ce qui les distingue
 * de la question. Le vert plein est réservé au seul cas où l'on attend une
 * réponse : posé sur une ligne refusée, il se lisait comme « c'est confirmé »
 * alors qu'il proposait exactement l'inverse.
 *
 * La couleur ne vient qu'au survol, au moment où le geste va partir : verte
 * pour revenir à oui, ambre pour revenir à non. Au repos, une ligne déjà
 * répondue n'a qu'une chose à dire, sa puce.
 */
.epc-cible--dedire,
.epc-cible--revenir {
	border-color: var(--epc-frise-trait-clair);
	/* Discret, pas effacé : l'encre faible tenait le seuil de trois contre un
	   d'un élément d'interface, mais de justesse (3,08). L'encre douce le
	   porte à 6,17, ce qui laisse de la marge sur un écran au soleil. Le
	   bouton reste en retrait par sa bordure claire, pas par son icône. */
	color: var(--epc-frise-encre-douce);
}

.epc-cible--dedire:not([disabled]):hover {
	border-color: var(--epc-frise-ambre-trait);
	color: var(--epc-frise-ambre-encre);
}

.epc-cible--revenir:not([disabled]):hover {
	border-color: var(--epc-frise-vert-vif);
	color: var(--epc-frise-vert-encre);
}

/* --- La puce « confirmé » -------------------------------------------------- */

.epc-puce-confirme {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 6px 12px;
	border-radius: 20px;
	background: var(--epc-frise-vert-pale);
	color: var(--epc-frise-vert-encre);
	font-size: 0.8rem;
	font-weight: 500;
	white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
	.epc-cible {
		transition: none;
	}
}

/* ===================================== La frise : le bandeau et la piste === */

/* --- Le bandeau vert et la tuile ambre ------------------------------------- */

.epc-frise-tete {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	gap: var(--epc-espace-4);
	margin-bottom: var(--epc-espace-4);
}

/* Le seul aplat de couleur pleine de l'espace membre. Il porte la question
   qu'on se pose en ouvrant la page, et rien d'autre ne doit lui disputer le
   regard. */
.epc-prochain {
	flex: 1 1 26rem;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--epc-espace-5);
	min-width: 0;
	padding: 20px 26px;
	border-radius: var(--epc-rayon);
	background: var(--epc-frise-vert);
	color: var(--epc-frise-vert-sur);
}

/* Sans service à venir, l'aplat serait une fanfare pour annoncer qu'il n'y a
   rien. Il se retire. */
.epc-prochain.est-vide {
	border: 1px solid var(--epc-frise-trait);
	background: var(--epc-frise-carte);
	color: var(--epc-frise-encre-douce);
}

.epc-prochain__quand {
	flex: 0 0 auto;
	padding-right: var(--epc-espace-5);
	border-right: 1px solid rgba(255, 255, 255, 0.22);
}

.epc-prochain.est-vide .epc-prochain__quand {
	border-right-color: var(--epc-frise-trait);
}

.epc-prochain__intitule {
	margin: 0 0 2px;
	color: var(--epc-frise-vert-legende);
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.epc-prochain.est-vide .epc-prochain__intitule {
	color: var(--epc-frise-encre-faible);
}

.epc-prochain__ecart {
	margin: 0;
	font-size: 2.1rem;
}

.epc-prochain__quoi {
	flex: 1 1 12rem;
	min-width: 0;
}

.epc-prochain__date {
	margin: 0 0 4px;
	font-size: 1.05rem;
	font-weight: 500;
}

.epc-prochain__date::first-letter {
	text-transform: uppercase;
}

.epc-prochain__detail {
	margin: 0;
	color: var(--epc-frise-vert-detail);
	font-size: 0.88rem;
	line-height: 1.4;
}

.epc-prochain.est-vide .epc-prochain__detail {
	color: var(--epc-frise-encre-douce);
}

.epc-prochain__puis {
	flex: 0 0 auto;
	margin-left: auto;
	text-align: right;
}

.epc-prochain__ecart-suivant {
	margin: 0;
	font-size: 0.95rem;
	font-weight: 500;
}

.epc-a-repondre {
	flex: 0 1 14rem;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 3px;
	min-width: 0;
	padding: 18px 22px;
	border: 1px solid var(--epc-frise-ambre-bord);
	border-radius: var(--epc-rayon);
	background: var(--epc-frise-ambre-pale);
}

/* Zéro réponse attendue n'est pas une alerte : la tuile perd son ambre. */
.epc-a-repondre.est-calme {
	border-color: var(--epc-frise-trait);
	background: var(--epc-frise-carte);
}

.epc-a-repondre__intitule {
	margin: 0;
	color: var(--epc-frise-ambre-encre);
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.epc-a-repondre__nombre {
	margin: 0;
	color: var(--epc-frise-ambre-encre-forte);
	font-size: 2.1rem;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}

.epc-a-repondre__detail {
	margin: 0;
	color: var(--epc-frise-ambre-encre);
	font-size: 0.8rem;
}

.epc-a-repondre.est-calme .epc-a-repondre__intitule,
.epc-a-repondre.est-calme .epc-a-repondre__detail {
	color: var(--epc-frise-encre-faible);
}

.epc-a-repondre.est-calme .epc-a-repondre__nombre {
	color: var(--epc-frise-vert-vif);
}

/* --- La carte de la frise -------------------------------------------------- */

.epc-frise-bloc {
	padding: 22px 28px 20px;
}

.epc-frise__entete {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--epc-espace-4);
	margin-bottom: var(--epc-espace-3);
}

.epc-frise__entete h2 {
	margin: 0;
	font-size: 1.35rem;
}

.epc-frise__plage {
	margin: 0;
	color: var(--epc-frise-encre-douce);
	font-size: 0.88rem;
	font-variant-numeric: tabular-nums;
}

.epc-frise {
	display: flex;
	align-items: flex-start;
	gap: var(--epc-espace-3);
}

.epc-frise__chevron {
	margin-top: 44px;
}

/* Le chevron de gauche est celui de droite, retourné : un seul tracé à tenir. */
.epc-frise__chevron--gauche .epc-icone {
	transform: rotate( 180deg );
}

/*
 * La fenêtre montre huit colonnes ; la piste en contient vingt et glisse
 * derrière. Sans JavaScript elle se fait défiler au doigt, et rien n'est
 * perdu : c'est pour ça que le débordement est « auto » et non « hidden ».
 */
.epc-frise__fenetre {
	flex: 1 1 auto;
	min-width: 0;
	overflow-x: auto;
	scrollbar-width: none;
	scroll-behavior: smooth;
}

.epc-frise__fenetre::-webkit-scrollbar {
	display: none;
}

.epc-frise__piste {
	display: flex;
	align-items: flex-start;
	width: max-content;
}

/* Toute la colonne est la cible, pas seulement le point : cent vingt-sept
   pixels sur cent soixante-huit, contre dix-huit pixels de diamètre. */
.epc-frise__jour {
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	align-items: center;
	flex: 0 0 auto;
	width: var(--epc-frise-colonne);
	height: var(--epc-frise-hauteur);
	padding: 0;
	border: 0;
	border-radius: 10px;
	background: none;
	color: inherit;
	font: inherit;
	cursor: pointer;
}

.epc-frise__jour.epc-jour-choisi {
	background: var(--epc-frise-choisi);
	box-shadow: inset 0 0 0 1.5px var(--epc-frise-choisi-trait);
}

.epc-frise__jour:focus-visible {
	outline: 2px solid var(--epc-frise-vert-vif);
	outline-offset: -2px;
}

.epc-frise__jour:hover:not(.epc-jour-choisi) {
	background: var(--epc-frise-carte-douce);
}

.epc-frise__roles {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-end;
	gap: 5px;
	width: 100%;
	height: 70px;
	overflow: hidden;
}

.epc-frise__fil {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 40px;
}

.epc-frise__trait {
	position: absolute;
	top: 19px;
	right: 0;
	left: 0;
	height: 2px;
	background: var(--epc-frise-fil);
}

/* Le fil ne sort pas de la frise : la première colonne visible le fait partir
   de son point, la dernière l'y arrête. */
.epc-frise__jour.est-premier .epc-frise__trait {
	left: 50%;
}

.epc-frise__jour.est-dernier .epc-frise__trait {
	right: 50%;
}

.epc-frise__pied {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 2px;
	padding-top: 8px;
	text-align: center;
}

.epc-frise__date {
	font-size: 0.88rem;
	font-weight: 600;
	color: var(--epc-frise-encre);
}

.epc-frise__date.est-discrete {
	font-weight: 400;
	color: var(--epc-frise-encre-faible);
}

.epc-frise__ecart {
	font-size: 0.72rem;
	color: var(--epc-frise-encre-douce);
}

.epc-frise__ecart--attente {
	color: var(--epc-frise-ambre-encre);
	font-weight: 600;
}

/* --- La bande des mois ----------------------------------------------------- */

/* Elle a la largeur de la piste et glisse avec elle : alignée par
   construction, sans recalcul à chaque déplacement. */
.epc-frise__mois {
	display: flex;
	width: max-content;
}

.epc-frise__mois-groupe {
	box-sizing: border-box;
	padding-top: 9px;
	border-top: 2px solid var(--epc-frise-fil);
	color: var(--epc-frise-encre-faible);
	font-size: 0.72rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

/* Le mois de tête porte un trait plus marqué : c'est celui où l'on est. */
.epc-frise__mois-groupe.est-en-tete {
	border-top-color: var(--epc-frise-choisi-trait);
	color: var(--epc-frise-encre-douce);
}

/* --- La légende ------------------------------------------------------------ */

.epc-frise__legende {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--epc-espace-2) var(--epc-espace-4);
	margin: var(--epc-espace-3) 0 0;
	color: var(--epc-frise-encre-douce);
	font-size: 0.8rem;
}

.epc-frise__cle {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

/* La légende montre les points à taille réduite : ils y servent de repère, pas
   de cible. */
.epc-frise__cle .epc-point--confirme,
.epc-frise__cle .epc-point--attente,
.epc-frise__cle .epc-point--decline,
.epc-frise__cle .epc-point--absent {
	width: 11px;
	height: 11px;
}

.epc-frise__cle .epc-point--libre {
	width: 7px;
	height: 7px;
}

.epc-frise__conseil {
	margin-left: auto;
	font-style: italic;
}

/* ===================================== La frise : le panneau du dimanche == */

.epc-detail-dimanche {
	display: flex;
	flex-wrap: wrap;
	gap: var(--epc-espace-5);
	margin-top: var(--epc-espace-4);
	padding: 20px 24px;
	border-color: var(--epc-frise-choisi-trait);
}

/* --- La colonne de gauche : quand, et ce qui se dira ----------------------- */

.epc-detail__quand {
	flex: 0 0 13.5rem;
	display: flex;
	flex-direction: column;
	gap: 7px;
	min-width: 0;
	padding-right: var(--epc-espace-5);
	border-right: 1px solid var(--epc-frise-trait-clair);
}

.epc-detail__intitule,
.epc-detail__legende {
	margin: 0;
	color: var(--epc-frise-encre-faible);
	font-size: 0.7rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.epc-detail__date {
	margin: 0;
	font-size: 1.35rem;
	line-height: 1.2;
}

.epc-detail__date::first-letter {
	text-transform: uppercase;
}

.epc-detail__ecart {
	margin: 0;
	color: var(--epc-frise-encre-douce);
	font-size: 0.92rem;
}

.epc-detail__ecart.est-attendu {
	color: var(--epc-frise-ambre-encre);
	font-weight: 600;
}

.epc-detail__champs {
	display: flex;
	flex-direction: column;
	gap: var(--epc-espace-3);
	margin-top: var(--epc-espace-3);
}

.epc-detail__champ {
	display: flex;
	flex-direction: column;
	gap: 3px;
	min-width: 0;
}

.epc-detail__valeur {
	margin: 0;
	font-size: 1rem;
	font-weight: 500;
	overflow-wrap: anywhere;
}

/* Ce qui n'est pas encore renseigné le dit, en retrait : une ligne vide
   laisserait croire à un oubli d'affichage. */
.epc-detail__valeur.est-vide {
	color: var(--epc-frise-encre-faible);
	font-weight: 400;
	font-style: italic;
}

.epc-detail__seance {
	display: inline-block;
	align-self: flex-start;
	max-width: 100%;
	margin: 0;
	padding: 5px 12px;
	border-radius: 20px;
	background: var(--epc-frise-carte-douce);
	color: var(--epc-frise-encre-douce);
	font-size: 0.82rem;
}

/* Une leçon se prépare, un club allégé non : la distinction mérite sa
   couleur. */
.epc-detail__seance.est-lecon {
	background: var(--epc-frise-vert-pale);
	color: var(--epc-frise-vert-encre);
	font-weight: 500;
}

/* --- La colonne de droite : un service par ligne --------------------------- */

.epc-detail__services {
	flex: 1 1 18rem;
	display: flex;
	flex-direction: column;
	gap: var(--epc-espace-2);
	min-width: 0;
}

.epc-detail__entete {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--epc-espace-3);
}

.epc-detail__titre {
	margin: 0;
	font-size: 0.95rem;
	font-weight: 600;
}

.epc-detail__cle {
	display: flex;
	flex-wrap: wrap;
	gap: var(--epc-espace-3);
	margin: 0;
	color: var(--epc-frise-encre-douce);
	font-size: 0.8rem;
}

.epc-detail__cle-item {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

.epc-detail__cle-item .epc-icone,
.epc-puce-confirme .epc-icone,
.epc-puce-decline .epc-icone {
	width: 15px;
	height: 15px;
}

.epc-detail__cle-item:first-child .epc-icone {
	color: var(--epc-frise-vert-vif);
}

.epc-detail__service {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--epc-espace-3) var(--epc-espace-4);
	padding: 10px 16px;
	border: 1px solid var(--epc-frise-trait-clair);
	border-radius: var(--epc-rayon-petit);
	background: var(--epc-frise-carte-douce);
}

/* Le seul service qui attend quelque chose se distingue du fond. */
.epc-detail__service--propose {
	border-color: var(--epc-frise-ambre-bord);
	background: var(--epc-frise-ambre-tres-pale);
}

/*
 * Un service refusé se lit au premier coup d'oeil : le trait tireté, le nom
 * barré, et tout le reste en retrait. La ligne se lisait comme les autres,
 * et il fallait aller chercher la petite puce « décliné » pour comprendre
 * qu'on avait dit non.
 *
 * Elle reste lisible, et son bouton reste franc : on revient souvent sur un
 * refus, et il ne s'agit pas de punir qui a répondu non.
 */
.epc-detail__service--decline {
	border-style: dashed;
	background: none;
}

.epc-detail__service--decline .epc-detail__role-nom {
	color: var(--epc-frise-encre-douce);
	text-decoration: line-through;
	/* La barre est rouge, le nom reste à l'encre : c'est la réponse qui est un
	   refus, pas le service. */
	text-decoration-color: var(--epc-frise-rouge);
}

.epc-detail__service--decline .epc-detail__note {
	color: var(--epc-frise-encre-faible);
}


.epc-detail__role {
	flex: 1 1 11rem;
	min-width: 0;
}

.epc-detail__role-nom {
	margin: 0;
	font-size: 1rem;
	font-weight: 500;
}

.epc-detail__note {
	margin: 3px 0 0;
	color: var(--epc-frise-encre-douce);
	font-size: 0.88rem;
	line-height: 1.4;
}

.epc-detail__service--propose .epc-detail__note {
	color: var(--epc-frise-ambre-encre);
}

.epc-detail__reponse {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	gap: var(--epc-espace-2);
}

/* En rouge, comme partout ailleurs sur le site : c'est la seule réponse qui
   laisse un créneau à repourvoir. La ligne, elle, reste sobre : un fond rouge
   sur toute sa largeur ferait d'un refus une faute. */
.epc-puce-decline {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 12px;
	border-radius: 20px;
	border: 1px solid var(--epc-frise-rouge-bord);
	background: var(--epc-frise-rouge-pale);
	color: var(--epc-frise-rouge);
	font-size: 0.8rem;
	font-weight: 500;
	white-space: nowrap;
}

.epc-detail__pied {
	margin: var(--epc-espace-1) 0 0;
	color: var(--epc-frise-encre-douce);
	font-size: 0.88rem;
	font-style: italic;
}

/* Sur écran étroit, les deux colonnes se suivent. */
@media (max-width: 52rem) {
	.epc-detail-dimanche {
		padding: var(--epc-espace-4);
	}

	.epc-detail__quand {
		flex: 1 1 100%;
		padding-right: 0;
		padding-bottom: var(--epc-espace-3);
		border-right: 0;
		border-bottom: 1px solid var(--epc-frise-trait-clair);
	}
}

/* --- Le bandeau sur écran étroit ------------------------------------------- */

/* « Dimanche prochain » en trente-quatre pixels fait trois cent quatorze
   pixels de large : sur un écran de trois cent vingt, il sortait de la page.
   Le corps descend, et les deux mots peuvent se séparer. */
@media (max-width: 34rem) {
	.epc-prochain {
		gap: var(--epc-espace-3);
		padding: var(--epc-espace-4);
	}

	.epc-prochain__quand {
		flex: 1 1 100%;
		min-width: 0;
		padding-right: 0;
		border-right: 0;
	}

	.epc-prochain__ecart {
		font-size: 1.6rem;
		overflow-wrap: anywhere;
	}

	.epc-prochain__puis {
		margin-left: 0;
		text-align: left;
	}

	.epc-a-repondre {
		flex: 1 1 100%;
		padding: var(--epc-espace-3) var(--epc-espace-4);
	}

	.epc-a-repondre__nombre {
		font-size: 1.6rem;
	}
}

/* --- La frise sur écran étroit : un fil vertical --------------------------- */

/*
 * Huit colonnes de cent trente pixels ne tiennent pas dans un téléphone, et
 * les réduire donnerait huit timbres-poste. La frise bascule donc en liste :
 * le fil descend à gauche, chaque dimanche est une ligne, et les suites de
 * dimanches libres se replient derrière une ligne qui dit combien ils sont.
 */
@media (max-width: 52rem) {
	.epc-frise-bloc {
		padding: var(--epc-espace-4);
	}

	/* Les chevrons n'ont plus de fenêtre à décaler : la liste se fait défiler
	   comme le reste de la page. */
	.epc-frise__chevron {
		display: none;
	}

	.epc-frise__plage,
	.epc-frise__mois {
		display: none;
	}

	.epc-frise__fenetre {
		overflow-x: visible;
	}

	.epc-frise__piste {
		flex-direction: column;
		width: auto;
	}

	.epc-frise__jour {
		flex-direction: row;
		align-items: flex-start;
		gap: var(--epc-espace-3);
		width: 100%;
		height: auto;
		padding: var(--epc-espace-2) var(--epc-espace-2) var(--epc-espace-2) 0;
		text-align: left;
	}

	/* Le fil passe à gauche, et ne fait plus toute la largeur. */
	.epc-frise__fil {
		order: -1;
		flex: 0 0 28px;
		width: 28px;
		height: auto;
		align-self: stretch;
		min-height: 44px;
	}

	.epc-frise__trait {
		top: 0;
		right: auto;
		bottom: 0;
		left: 50%;
		width: 2px;
		height: auto;
		transform: translateX( -50% );
	}

	.epc-frise__jour.est-premier .epc-frise__trait {
		top: 50%;
		left: 50%;
	}

	.epc-frise__jour.est-dernier .epc-frise__trait {
		right: auto;
		bottom: 50%;
	}

	/* Le point se pose en haut du fil, à hauteur de la date. */
	.epc-frise__fil .epc-point {
		position: absolute;
		top: 11px;
	}

	/* En colonne, la date vient avant les rôles : on lit « 11 octobre, prière
	   de réponse », jamais l'inverse. En frise large l'ordre est celui du
	   dessin, la date sous le fil. */
	.epc-frise__pied {
		order: 0;
		flex: 0 0 7.5rem;
		align-items: flex-start;
		padding-top: 0;
		text-align: left;
	}

	.epc-frise__roles {
		order: 1;
	}

	.epc-frise__suite-libre {
		order: 1;
	}

	.epc-frise__roles {
		flex: 1 1 8rem;
		flex-direction: row;
		flex-wrap: wrap;
		align-items: flex-start;
		justify-content: flex-start;
		gap: 4px;
		width: auto;
		height: auto;
		overflow: visible;
	}

	.epc-role-pastille {
		width: auto;
		max-width: 100%;
	}

	/* La suite des dimanches libres, repliée derrière son premier. */
	.epc-frise__jour.est-suite-libre {
		display: none;
	}

	.epc-frise__suite-libre {
		flex: 1 1 auto;
		align-self: center;
		color: var(--epc-frise-encre-faible);
		font-size: 0.8rem;
		font-style: italic;
	}

	/* Un dimanche libre en tête de suite n'a ni rôle ni écart à montrer : sa
	   ligne se resserre à ce qu'elle porte. */
	.epc-frise__jour .epc-frise__ecart--libre {
		display: none;
	}

	.epc-frise__conseil {
		margin-left: 0;
		flex: 1 1 100%;
	}
}

/* Sur écran large, le repli des suites libres n'a pas lieu d'être. */
@media (min-width: 52.0625rem) {
	.epc-frise__suite-libre {
		display: none;
	}
}

/* La liste des dimanches groupés et le bandeau de quatre tuiles ont cédé la
   place à la frise. Leurs règles sont parties avec eux : trois cents lignes
   qui ne visaient plus aucun balisage. */


.epc-bouton--oui {
	background: var(--epc-ok);
}

.epc-bouton--oui:hover,
.epc-bouton--oui:focus {
	background: #24633f;
}

.epc-bouton--non {
	background: var(--epc-fond);
	border: 1px solid var(--epc-trait);
	color: var(--epc-encre-douce);
}

.epc-bouton--doux {
	background: var(--epc-fond);
	border: 1px solid var(--epc-contour);
	color: var(--epc-encre);
}

.epc-bouton--doux:hover,
.epc-bouton--doux:focus {
	background: var(--epc-fond-doux);
	border-color: var(--epc-accent);
	color: var(--epc-accent);
}

.epc-bouton--non:hover,
.epc-bouton--non:focus {
	background: var(--epc-alerte-doux);
	border-color: var(--epc-alerte);
	color: var(--epc-alerte);
}

.epc-lien-discret {
	min-height: 36px;
	padding: 4px 8px;
	border: none;
	background: none;
	color: var(--epc-encre-douce);
	font: inherit;
	font-size: 0.85rem;
	text-decoration: underline;
	cursor: pointer;
}

.epc-lien-discret:hover {
	color: var(--epc-encre);
}

.epc-mes-absences li {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding: 8px 0;
	border-bottom: 1px solid var(--epc-trait);
}

.epc-mes-absences small {
	display: block;
	color: var(--epc-encre-douce);
	font-style: italic;
}

.epc-ajout-absence {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: 10px;
	margin-top: 14px;
	padding: 12px;
	border-radius: 8px;
	background: var(--epc-fond-doux);
}

.epc-ajout-absence .epc-champ {
	flex: 1 1 10rem;
}

.epc-ajout-absence label {
	color: var(--epc-encre-douce);
	font-size: 0.78rem;
}

.epc-ajout-absence input {
	min-height: 40px;
	padding: 6px 8px;
	border: 1px solid var(--epc-contour);
	border-radius: 6px;
	background: var(--epc-fond);
	color: inherit;
	font: inherit;
	font-size: 0.9rem;
}

.epc-ajout-absence button {
	border: none;
	cursor: pointer;
}

.epc-mes-absences li.est-en-cours {
	opacity: 0.55;
}

.epc-rattachement {
	margin: 14px 0 0;
	padding: 10px 12px;
	border-radius: 8px;
	background: var(--epc-fond-doux);
}

/* ==========================================================================
   Chants
   ========================================================================== */







/* ==========================================================================
   Simulation
   ========================================================================== */

.epc-prerequis-liste {
	margin: 10px 0 0;
	padding: 0;
	list-style: none;
}

.epc-prerequis-liste li {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 10px;
	padding: 7px 0;
	border-bottom: 1px solid var(--epc-trait);
}

.epc-prerequis-liste li:last-child {
	border-bottom: none;
}

.epc-prerequis-liste span:last-child {
	color: var(--epc-encre-douce);
	font-size: 0.88rem;
}

.epc-pastille-etat {
	flex: 0 0 auto;
	min-width: 4.5rem;
	padding: 2px 9px;
	border-radius: 10px;
	font-size: 0.72rem;
	font-weight: 700;
	text-align: center;
}

.est-pret .epc-pastille-etat {
	background: var(--epc-ok-doux);
	color: var(--epc-ok);
}

.est-manquant .epc-pastille-etat {
	background: var(--epc-attention-doux);
	color: var(--epc-attention);
}

.epc-lancement {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: 12px;
	margin-top: 10px;
}

.epc-lancement select {
	min-height: 44px;
	padding: 8px 10px;
	border: 1px solid var(--epc-contour);
	border-radius: 8px;
	background: var(--epc-fond);
	color: inherit;
	font: inherit;
}

.epc-lancement button {
	border: none;
	cursor: pointer;
}

.epc-lancement button[disabled] {
	opacity: 0.6;
	cursor: progress;
}

.epc-resume-variante {
	margin: 0 0 10px;
	color: var(--epc-encre-douce);
}

.epc-ajout-dimanches__form {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: var(--epc-espace-3);
}

/* Le champ ancre le calendrier qui s'ouvre sous lui. */
.epc-champ--jour {
	position: relative;
}

.epc-champ-jour {
	min-width: 14rem;
	cursor: pointer;
}


/* Le bilan de la création, sous le champ. Il survit à la fermeture du
   calendrier, qui est précisément le moment où l'on a besoin de le lire. */
.epc-bilan-dimanches {
	margin: var(--epc-espace-3) 0 0;
	font-size: 0.9rem;
	font-weight: 600;
	color: var(--epc-accent);
}

.epc-bilan-dimanches:empty {
	display: none;
}

/* --- Comment le moteur choisit ---------------------------------------------

   Un pavé replié : on le lit une fois, pas à chaque simulation. Trois choix de
   mise en page, et le premier est le plus important.

   La jauge d'un critère est courte et posée à droite, contre son chiffre. En
   pleine largeur, celle du critère le plus lourd occupait toute la ligne et se
   lisait comme un filet de séparation : elle coupait le texte au lieu de le
   mesurer. Une barre ne devient une mesure que si l'on voit ce qu'elle ne
   remplit pas.

   Chaque partie s'ouvre sur un filet, parce que quatre titres de même taille
   sans respiration ne font pas quatre parties, ils font une page.

   Et chaque critère tient dans son propre cadre : c'est une unité qu'on lit
   entière, titre, poids et explication ensemble. */

.epc-criteres {
	padding: var(--epc-espace-4) var(--epc-espace-5) var(--epc-espace-5);
}

/* Le chevron est dessiné à la main : « display: flex » sur un summary efface
   le triangle que le navigateur y met, et rien ne disait plus que ça s'ouvre. */
.epc-criteres > summary {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: var(--epc-espace-1) var(--epc-espace-3);
	cursor: pointer;
	list-style: none;
}

.epc-criteres > summary::-webkit-details-marker {
	display: none;
}

.epc-criteres > summary::before {
	content: '';
	flex: 0 0 auto;
	align-self: center;
	width: 0.5rem;
	height: 0.5rem;
	border-right: 2px solid var(--epc-accent);
	border-bottom: 2px solid var(--epc-accent);
	transform: rotate(-45deg);
	transition: transform 0.15s ease;
}

.epc-criteres[open] > summary::before {
	transform: rotate(45deg);
}

@media (prefers-reduced-motion: reduce) {
	.epc-criteres > summary::before {
		transition: none;
	}
}

.epc-criteres > summary strong {
	font-size: 1.05rem;
}

.epc-criteres > summary span {
	color: var(--epc-encre-douce);
	font-size: 0.88rem;
}

.epc-criteres > summary:focus-visible {
	outline: 2px solid var(--epc-accent);
	outline-offset: 3px;
}

/* Chaque partie s'ouvre sur un filet. La première n'en a pas : elle suit le
   titre replié, qui fait déjà la séparation. */
.epc-criteres h3 {
	margin: var(--epc-espace-6) 0 var(--epc-espace-3);
	padding-top: var(--epc-espace-4);
	border-top: 1px solid var(--epc-trait);
	font-size: 1rem;
}

.epc-criteres h3:first-of-type {
	margin-top: var(--epc-espace-5);
}

/* Ces paragraphes sont du texte à lire, pas des légendes : ils reprennent
   l'encre et la taille du corps, que « epc-bloc p » avait rabattues. */
.epc-criteres p {
	max-width: 44rem;
	margin: 0 0 var(--epc-espace-3);
	color: var(--epc-encre);
	font-size: 0.93rem;
	line-height: 1.6;
}

.epc-criteres p:last-child {
	margin-bottom: 0;
}

/* Les règles dures : un filet vertical plutôt que des puces. Elles forment un
   bloc qu'on lit d'un tenant, pas cinq éléments d'une énumération. */
.epc-criteres__durs {
	display: flex;
	flex-direction: column;
	gap: var(--epc-espace-3);
	max-width: 44rem;
	margin: 0;
	padding: 0 0 0 var(--epc-espace-4);
	border-left: 2px solid var(--epc-accent-doux);
	list-style: none;
}

.epc-criteres__durs li {
	color: var(--epc-encre);
	font-size: 0.9rem;
	line-height: 1.55;
}

.epc-criteres__mous {
	display: flex;
	flex-direction: column;
	gap: var(--epc-espace-3);
	max-width: 44rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.epc-criteres__mous > li {
	padding: var(--epc-espace-3) var(--epc-espace-4);
	border: 1px solid var(--epc-trait);
	border-radius: var(--epc-rayon-petit);
	background: var(--epc-fond-doux);
}

.epc-criteres__mous > li > p {
	max-width: none;
	margin: var(--epc-espace-2) 0 0;
	color: var(--epc-encre-douce);
	font-size: 0.88rem;
}

.epc-critere__tete {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--epc-espace-2) var(--epc-espace-4);
}

.epc-critere__tete strong {
	flex: 1 1 12rem;
	min-width: 0;
	font-size: 0.95rem;
}

/* La jauge et son chiffre voyagent ensemble, à droite du titre. */
.epc-critere__mesure {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	gap: var(--epc-espace-2);
}

.epc-critere__barre {
	width: 7rem;
	height: 8px;
	border-radius: 4px;
	background: var(--epc-trait);
	overflow: hidden;
}

.epc-critere__barre > span {
	display: block;
	height: 100%;
	border-radius: 4px;
	background: var(--epc-accent);
}

.epc-critere__poids {
	width: 2.2rem;
	color: var(--epc-encre);
	font-size: 0.9rem;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	text-align: right;
}

@media (max-width: 34rem) {
	.epc-critere__barre {
		width: 5rem;
	}
}

.epc-lancement__conseil {
	max-width: 46rem;
	margin: var(--epc-espace-3) 0 0;
	color: var(--epc-encre-douce);
	font-size: 0.88rem;
}

/* --- Simulation : les tuiles ------------------------------------------------

   Une colonne par dimanche, une tuile par créneau. Le tableau d'avant se lisait
   bien mais ne se manipulait pas : on ne déplace pas une case de tableau.

   Deux états se superposent sur une tuile et ne veulent pas dire la même chose.
   « Figée » vient de la base : verrouillé dans le planning, ou déjà confirmé
   par l'intéressé ; l'écran de simulation n'a rien à y redire. « Retenue »
   vient d'ici : l'utilisateur garde ce créneau d'un tirage à l'autre. Les deux
   portent un cadenas, mais celui de la première est éteint et hors d'atteinte. */

.epc-barre-tirage {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--epc-espace-3);
	margin-bottom: var(--epc-espace-4);
	padding: var(--epc-espace-3) var(--epc-espace-4);
	border: 1px solid var(--epc-trait);
	border-radius: var(--epc-rayon);
	background: var(--epc-fond-doux);
}

.epc-barre-tirage__compte {
	flex: 1 1 16rem;
	margin: 0;
	color: var(--epc-encre-douce);
	font-size: 0.9rem;
}

.epc-jours-sim {
	display: flex;
	gap: var(--epc-espace-3);
	overflow-x: auto;
	margin-bottom: var(--epc-espace-4);
	padding-bottom: var(--epc-espace-2);
}

.epc-jour-sim {
	flex: 0 0 13rem;
	display: flex;
	flex-direction: column;
	gap: var(--epc-espace-2);
}

.epc-jour-sim h4 {
	position: sticky;
	top: 0;
	margin: 0;
	padding: var(--epc-espace-2) var(--epc-espace-3);
	border: 1px solid var(--epc-trait);
	border-radius: var(--epc-rayon-petit);
	background: var(--epc-fond-doux);
	font-size: 0.82rem;
	font-weight: 600;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: var(--epc-encre-douce);
}

.epc-jour-sim__tuiles {
	display: flex;
	flex-direction: column;
	gap: var(--epc-espace-2);
	margin: 0;
	padding: 0;
	list-style: none;
}

.epc-tuile-sim {
	position: relative;
	display: flex;
	align-items: stretch;
	border: 1px solid var(--epc-trait);
	border-radius: var(--epc-rayon-petit);
	background: var(--epc-fond);
	box-shadow: var(--epc-ombre);
}

.epc-tuile-sim__corps {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	gap: 1px;
	min-width: 0;
	padding: var(--epc-espace-2) var(--epc-espace-3);
	border: none;
	border-radius: var(--epc-rayon-petit) 0 0 var(--epc-rayon-petit);
	background: none;
	font: inherit;
	color: inherit;
	text-align: left;
	cursor: grab;
}

.epc-tuile-sim__corps:disabled {
	cursor: default;
}

.epc-tuile-sim__role {
	font-size: 0.72rem;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	color: var(--epc-encre-douce);
}

.epc-tuile-sim__nom {
	font-size: 0.92rem;
	font-weight: 600;
	overflow-wrap: anywhere;
}

.epc-tuile-sim.est-vide .epc-tuile-sim__nom {
	font-weight: 400;
	font-style: italic;
	color: var(--epc-encre-douce);
}

.epc-tuile-sim__cadenas {
	flex: 0 0 auto;
	width: 2.1rem;
	border: none;
	border-left: 1px solid var(--epc-trait);
	border-radius: 0 var(--epc-rayon-petit) var(--epc-rayon-petit) 0;
	background: none;
	font-size: 0.9rem;
	line-height: 1;
	cursor: pointer;
}

.epc-tuile-sim__cadenas:disabled {
	cursor: default;
	opacity: 0.45;
}

.epc-tuile-sim__corps:hover:not(:disabled),
.epc-tuile-sim__cadenas:hover:not(:disabled) {
	background: var(--epc-accent-doux);
}

.epc-tuile-sim__corps:focus-visible,
.epc-tuile-sim__cadenas:focus-visible {
	outline: 2px solid var(--epc-accent);
	outline-offset: -2px;
}

/* Choisie : premier créneau d'un échange, en attente du second. */
.epc-tuile-sim.est-choisie {
	border-color: var(--epc-accent);
	box-shadow: 0 0 0 2px var(--epc-accent-doux);
}

.epc-tuile-sim.est-survolee {
	border-color: var(--epc-accent);
	background: var(--epc-accent-doux);
}

.epc-tuile-sim.est-saisie {
	opacity: 0.5;
}

/* Retenue et figée se distinguent par le trait de gauche, pas seulement par
   une nuance de fond : la couleur seule ne dit rien à qui ne la voit pas. */
.epc-tuile-sim.est-retenue {
	border-left: 3px solid var(--epc-accent);
	background: var(--epc-accent-doux);
}

.epc-tuile-sim.est-figee {
	border-left: 3px solid var(--epc-contour);
	background: var(--epc-fond-doux);
}

@media (max-width: 720px) {
	.epc-jours-sim {
		flex-direction: column;
		overflow-x: visible;
	}

	.epc-jour-sim {
		flex: 0 0 auto;
	}
}

@media (prefers-reduced-motion: reduce) {
	.epc-tuile-sim {
		transition: none;
	}
}

/* --- Messages éphémères -----------------------------------------------------

   Ils se posent en bas à droite, loin de la ligne d'état qui vit en haut : un
   refus d'échange doit se lire là où la main travaille. Ils sortent seuls au
   bout de cinq secondes, sauf si la souris se pose dessus. */

.epc-messages-flash {
	position: fixed;
	right: var(--epc-espace-4);
	bottom: calc( var(--epc-espace-4) + env(safe-area-inset-bottom, 0px) );
	z-index: 60;
	display: flex;
	flex-direction: column;
	gap: var(--epc-espace-2);
	width: min( 26rem, calc( 100vw - 2 * var(--epc-espace-4) ) );
	pointer-events: none;
}

.epc-flash {
	display: flex;
	align-items: flex-start;
	gap: var(--epc-espace-2);
	padding: var(--epc-espace-3) var(--epc-espace-3) var(--epc-espace-3) var(--epc-espace-4);
	border: 1px solid var(--epc-trait);
	border-left: 4px solid var(--epc-contour);
	border-radius: var(--epc-rayon);
	background: var(--epc-fond);
	box-shadow: var(--epc-ombre-haute);
	pointer-events: auto;
	animation: epc-flash-entre 180ms ease-out;
}

.epc-flash.sort {
	opacity: 0;
	transition: opacity 180ms ease-out;
}

@keyframes epc-flash-entre {
	from { opacity: 0; transform: translateY(8px); }
	to   { opacity: 1; transform: none; }
}

/* Le ton se lit sur le trait de gauche et dans les mots, jamais sur la seule
   couleur de fond : un message reste compréhensible sans la voir. */
.epc-flash--ok      { border-left-color: var(--epc-ok); }
.epc-flash--erreur  { border-left-color: var(--epc-alerte); background: var(--epc-alerte-doux); }
.epc-flash--attention { border-left-color: var(--epc-attention); background: var(--epc-attention-doux); }

.epc-flash__texte {
	flex: 1 1 auto;
	margin: 0;
	font-size: 0.9rem;
	line-height: 1.45;
}

.epc-flash__fermer {
	flex: 0 0 auto;
	width: 1.6rem;
	height: 1.6rem;
	border: none;
	border-radius: var(--epc-rayon-petit);
	background: none;
	color: var(--epc-encre-douce);
	font-size: 1.1rem;
	line-height: 1;
	cursor: pointer;
}

.epc-flash__fermer:hover {
	background: rgba(0, 0, 0, 0.06);
	color: var(--epc-encre);
}

.epc-flash__fermer:focus-visible {
	outline: 2px solid var(--epc-accent);
	outline-offset: 1px;
}

@media (prefers-reduced-motion: reduce) {
	.epc-flash { animation: none; }
	.epc-flash.sort { transition: none; }
}

/* --- Attribution à la main -------------------------------------------------

   Ouverte au double-clic sur une tuile. On passe par <dialog> : le navigateur
   se charge du fond, de la touche Échap et du focus retenu dans la boîte. */

.epc-attribution {
	width: min( 26rem, calc( 100vw - 2 * var(--epc-espace-4) ) );
	max-height: min( 34rem, calc( 100vh - 4 * var(--epc-espace-4) ) );
	padding: var(--epc-espace-5);
	border: 1px solid var(--epc-trait);
	border-radius: var(--epc-rayon);
	background: var(--epc-fond);
	color: var(--epc-encre);
	box-shadow: var(--epc-ombre-haute);
}

.epc-attribution::backdrop {
	background: rgba(21, 33, 26, 0.45);
}

.epc-attribution__titre {
	margin: 0 0 var(--epc-espace-3);
	font-size: 1.05rem;
}

.epc-attribution__recherche {
	width: 100%;
	margin-bottom: var(--epc-espace-3);
	padding: var(--epc-espace-2) var(--epc-espace-3);
	border: 1px solid var(--epc-contour);
	border-radius: var(--epc-rayon-petit);
	background: var(--epc-fond);
	color: inherit;
	font: inherit;
}

.epc-attribution__listes {
	max-height: 18rem;
	overflow-y: auto;
	margin-bottom: var(--epc-espace-4);
}

.epc-attribution__groupe h4 {
	position: sticky;
	top: 0;
	margin: 0 0 var(--epc-espace-2);
	padding: var(--epc-espace-1) 0;
	background: var(--epc-fond);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--epc-encre-douce);
}

.epc-attribution__groupe + .epc-attribution__groupe {
	margin-top: var(--epc-espace-4);
}

.epc-attribution__groupe ul {
	display: flex;
	flex-direction: column;
	gap: 2px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.epc-attribution__nom {
	width: 100%;
	padding: var(--epc-espace-2) var(--epc-espace-3);
	border: none;
	border-radius: var(--epc-rayon-petit);
	background: none;
	color: inherit;
	font: inherit;
	text-align: left;
	cursor: pointer;
}

.epc-attribution__nom:hover {
	background: var(--epc-accent-doux);
}

.epc-attribution__nom:focus-visible {
	outline: 2px solid var(--epc-accent);
	outline-offset: -2px;
}

/* Hors service : la personne n'a pas déclaré ce service. Le mot le dit dans le
   titre du groupe, le pointillé le redit sur chaque ligne. */
.epc-attribution__nom.est-hors-service {
	border: 1px dashed var(--epc-trait);
	color: var(--epc-encre-douce);
}

.epc-attribution__vide {
	margin: 0;
	color: var(--epc-encre-douce);
	font-size: 0.9rem;
}

.epc-attribution__pied {
	display: flex;
	justify-content: flex-end;
	gap: var(--epc-espace-2);
}

/* --- Le garde-fou ---------------------------------------------------------- */

.epc-barre-tirage__outils {
	display: flex;
	flex-wrap: wrap;
	gap: var(--epc-espace-2);
}

.epc-garde-fou.est-levee {
	border-color: var(--epc-attention);
	background: var(--epc-attention-doux);
	color: var(--epc-attention);
}

.epc-barre-tirage__alerte {
	flex: 1 1 100%;
	margin: 0;
	padding-top: var(--epc-espace-2);
	border-top: 1px solid var(--epc-trait);
	color: var(--epc-attention);
	font-size: 0.85rem;
}

.epc-variantes .epc-bouton {
	border: none;
	cursor: pointer;
}

/* --- Retour d'un lien de confirmation -------------------------------------- */

.epc-message--ok {
	border-left: 4px solid var(--epc-ok);
	background: var(--epc-ok-doux);
}

.epc-message--ok h2 {
	color: var(--epc-ok);
}

.epc-merci {
	margin-bottom: 1.25rem;
}

/* ==========================================================================
   L'ESPACE MEMBRE COMME PAGE ENTIÈRE

   Ces pages n'utilisent pas le thème du site : le plugin sert son propre
   gabarit et les styles du thème sont écartés. Tout est donc à reposer ici,
   y compris ce qu'un thème fournit d'habitude.
   ========================================================================== */

:root {
	/* Encres */
	--epc-encre: #15211a;
	--epc-encre-douce: #526158;

	/* Surfaces : la page est d'un vert très pâle, les cartes restent blanches
	   pour se détacher sans ombre appuyée. */
	--epc-fond: #ffffff;
	--epc-fond-doux: #f1f7f3;
	--epc-rail: #ffffff;
	--epc-trait: #dce9e1;
	--epc-contour: #7a8c81;

	/* Accent */
	--epc-accent: #1b6b4a;
	--epc-accent-doux: #e2f1e9;
	--epc-accent-sombre: #14543a;
	--epc-sur-accent: #ffffff;

	/* Statuts. Le vert de réussite est celui de l'accent : ils ne se
	   rencontrent jamais dans un même composant, et un statut porte toujours
	   son libellé en plus de sa couleur. */
	--epc-ok: #1b6b4a;
	--epc-ok-doux: #e2f1e9;
	--epc-attention: #8a5600;
	--epc-attention-doux: #fcf1dd;
	--epc-alerte: #a61f1a;
	--epc-alerte-doux: #fbeae9;

	/*
	 * La frise des dimanches.
	 *
	 * Sa palette vient de la maquette validée et non des jetons ci-dessus :
	 * son vert est plus sombre, son ambre plus chaud, et ses gris tirent vers
	 * le beige. Reprendre les jetons de l'application aurait donné un écran
	 * qui ressemble à la maquette sans l'être.
	 *
	 * Tout est ici plutôt qu'en dur dans les règles : c'est ce qui permet au
	 * thème sombre de redéfinir la même palette plus bas, sans réécrire une
	 * seule règle.
	 */
	--epc-frise-fond: #f7f6f1;
	--epc-frise-carte: #ffffff;
	--epc-frise-carte-douce: #fbfbf7;
	--epc-frise-encre: #13201a;
	--epc-frise-encre-douce: #55655c;
	--epc-frise-encre-faible: #8a968d;
	--epc-frise-trait: #dedad4;
	--epc-frise-trait-clair: #ecece2;
	--epc-frise-fil: #e2e2d8;

	/* Le vert du bandeau est celui de tout le site, et non l'olive de la
	   maquette : même raison que pour la police, un écran qui tire sur une
	   autre teinte se lit comme une pièce rapportée. */
	--epc-frise-vert: #1b6b4a;
	--epc-frise-vert-sombre: #14543a;
	--epc-frise-vert-vif: #2f7a57;
	--epc-frise-vert-pale: #e2f0e8;
	--epc-frise-vert-encre: #1d5c41;
	--epc-frise-vert-sur: #ffffff;
	--epc-frise-vert-legende: #b9cec1;
	--epc-frise-vert-detail: #c7dacb;
	--epc-frise-choisi: #eff5f1;
	--epc-frise-choisi-trait: #8fb8a0;

	--epc-frise-ambre: #e8b540;
	--epc-frise-ambre-trait: #a9883e;
	--epc-frise-ambre-pale: #fbf2de;
	--epc-frise-ambre-tres-pale: #fdf8ec;
	--epc-frise-ambre-bord: #e6d3a8;
	--epc-frise-ambre-encre: #7a5a12;
	--epc-frise-ambre-encre-forte: #6b4e10;

	/* Le rouge d'un refus. C'est celui de l'alerte du site : dire non à un
	   créneau n'est pas une faute, mais c'est la seule réponse qui laisse un
	   trou à combler, et le site emploie déjà cette teinte pour ce qui manque.
	   6,37 contre 1 sur son fond pâle, calculé. */
	--epc-frise-rouge: #a61f1a;
	--epc-frise-rouge-pale: #fbeae9;
	--epc-frise-rouge-bord: #e0a9a5;

	--epc-frise-libre: #cbcfc9;
	--epc-frise-tirete: #9aa79e;
	--epc-frise-tirete-clair: #b5c0b7;

	/* Les mesures de la maquette, au pixel. */
	--epc-frise-colonne: 127px;
	--epc-frise-hauteur: 168px;
	--epc-frise-role: 108px;
	--epc-frise-cible: 44px;

	/* Formes */
	--epc-rayon: 12px;
	--epc-rayon-petit: 8px;
	--epc-ombre: 0 1px 2px rgba(21, 33, 26, 0.05), 0 1px 3px rgba(21, 33, 26, 0.06);
	--epc-ombre-haute: 0 2px 6px rgba(21, 33, 26, 0.07), 0 12px 28px rgba(21, 33, 26, 0.10);

	/* Rythme : une échelle de 4 px, pour que les espacements se répondent. */
	--epc-espace-1: 4px;
	--epc-espace-2: 8px;
	--epc-espace-3: 12px;
	--epc-espace-4: 16px;
	--epc-espace-5: 24px;
	--epc-espace-6: 32px;
	--epc-espace-7: 48px;

	/* Barre latérale */
	--epc-rail-repli: 72px;
	--epc-rail-deplie: 232px;
}

body.epc-espace {
	margin: 0;
	padding: 0;
	background: var(--epc-fond-doux);
	color: var(--epc-encre);
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	font-size: 16px;
	line-height: 1.55;
	-webkit-font-smoothing: antialiased;
	-webkit-text-size-adjust: 100%;
}

body.epc-espace * {
	box-sizing: border-box;
}

body.epc-espace a {
	color: var(--epc-accent);
}

body.epc-espace img {
	max-width: 100%;
	height: auto;
}

/* Lien d'évitement, pour la navigation au clavier. */

.epc-evitement {
	position: absolute;
	left: -9999px;
	z-index: 100;
	padding: 10px 16px;
	background: var(--epc-accent);
	color: #fff;
	text-decoration: none;
}

.epc-evitement:focus {
	left: 8px;
	top: 8px;
}

.epc-marque {
	display: flex;
	flex-direction: column;
	text-decoration: none;
	line-height: 1.2;
}

.epc-marque__nom {
	color: var(--epc-encre);
	font-size: 1.05rem;
	font-weight: 700;
	letter-spacing: -0.01em;
}

.epc-marque__eglise {
	color: var(--epc-encre-douce);
	font-size: 0.78rem;
}

.epc-navigation a.est-active {
	border-bottom-color: var(--epc-accent);
	color: var(--epc-accent);
}

/* --- Corps et pied --------------------------------------------------------- */

.epc-principal {
	max-width: 68rem;
	margin: 0 auto;
	padding: 24px 20px 48px;
}

.epc-principal .epc-app {
	max-width: none;
}

.epc-pied {
	max-width: 68rem;
	margin: 0 auto;
	padding: 24px 20px 40px;
	border-top: 1px solid var(--epc-trait);
	color: var(--epc-encre-douce);
	font-size: 0.85rem;
	text-align: center;
}

.epc-pied p {
	margin: 0 0 6px;
}

.epc-pied__mention {
	font-size: 0.78rem;
	opacity: 0.85;
}

/* --- Porte d'entrée -------------------------------------------------------- */

.epc-porte {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 60vh;
	padding: 20px 0;
}

.epc-porte__carte {
	width: 100%;
	max-width: 27rem;
	padding: 32px 28px;
	border: 1px solid var(--epc-trait);
	border-radius: 14px;
	background: var(--epc-fond);
	box-shadow: 0 2px 4px rgba(31, 41, 51, 0.05), 0 12px 28px rgba(31, 41, 51, 0.07);
}

.epc-porte__carte h1 {
	margin: 0 0 6px;
	font-size: 1.5rem;
	letter-spacing: -0.01em;
}

.epc-porte__intro {
	margin: 0 0 22px;
	color: var(--epc-encre-douce);
	font-size: 0.92rem;
}

.epc-porte__erreur {
	margin: 0 0 18px;
	padding: 10px 14px;
	border-left: 3px solid var(--epc-alerte);
	border-radius: 0 6px 6px 0;
	background: var(--epc-alerte-doux);
	color: var(--epc-alerte);
	font-size: 0.9rem;
	font-weight: 600;
}

.epc-porte__formulaire {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

/* .epc-champ porte « flex: 1 1 13rem », écrit pour les formulaires en ligne où
   ces 13 rem sont une largeur. Ici le conteneur est en colonne : la même
   déclaration devenait une hauteur de départ, et chaque champ réservait 13 rem
   de vide sous lui. Les champs se suivent, ils n'ont aucune place à répartir. */
.epc-porte__formulaire .epc-champ {
	flex: 0 0 auto;
}

.epc-porte__formulaire .epc-champ span {
	display: block;
	margin-bottom: 4px;
	color: var(--epc-encre-douce);
	font-size: 0.82rem;
	font-weight: 600;
}

.epc-porte__formulaire input[type="text"],
.epc-porte__formulaire input[type="password"] {
	width: 100%;
	min-height: 46px;
	padding: 10px 13px;
	border: 1px solid var(--epc-contour);
	border-radius: 8px;
	background: var(--epc-fond);
	color: inherit;
	font: inherit;
}

.epc-porte__formulaire input:focus {
	outline: 2px solid var(--epc-accent);
	outline-offset: 1px;
	border-color: var(--epc-accent);
}

.epc-case-a-cocher {
	display: flex;
	align-items: center;
	gap: 8px;
	color: var(--epc-encre-douce);
	font-size: 0.88rem;
	cursor: pointer;
}

.epc-case-a-cocher input {
	width: 18px;
	height: 18px;
	accent-color: var(--epc-accent);
}

.epc-bouton--large {
	width: 100%;
	padding: 13px 20px;
	border: none;
	font-size: 1rem;
	text-align: center;
	cursor: pointer;
}

.epc-porte__aide {
	margin: 18px 0 0;
	color: var(--epc-encre-douce);
	font-size: 0.85rem;
	text-align: center;
}

.epc-porte__aide a {
	color: var(--epc-encre-douce);
}

.epc-porte__mention {
	margin: 18px 0 0;
	padding-top: 16px;
	border-top: 1px solid var(--epc-trait);
	color: var(--epc-encre-douce);
	font-size: 0.8rem;
	text-align: center;
}

/* --- Vue d'ensemble -------------------------------------------------------- */

.epc-vue-ensemble .epc-entete h1 {
	margin: 0 0 4px;
	font-size: 1.7rem;
	letter-spacing: -0.015em;
}

.epc-apercu-creneaux,
.epc-apercu-dimanches {
	margin: 10px 0;
	padding: 0;
	list-style: none;
}

.epc-apercu-creneaux li,
.epc-apercu-dimanches li {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 12px;
	padding: 8px 0;
	border-bottom: 1px solid var(--epc-trait);
}

.epc-apercu-creneaux li:last-child,
.epc-apercu-dimanches li:last-child {
	border-bottom: none;
}

.epc-apercu-creneaux span,
.epc-apercu-dimanches span {
	color: var(--epc-encre-douce);
}

.epc-lien-fleche {
	display: inline-block;
	margin-right: 18px;
	font-weight: 600;
	text-decoration: none;
}

.epc-lien-fleche::after {
	content: " ›";
}

.epc-lien-fleche:hover {
	text-decoration: underline;
}

.epc-raccourcis {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
	gap: 12px;
	margin-top: 1.5rem;
}

.epc-raccourci {
	display: block;
	padding: 16px 18px;
	border: 1px solid var(--epc-trait);
	border-radius: var(--epc-rayon);
	background: var(--epc-fond);
	text-decoration: none;
	transition: border-color 0.15s ease, transform 0.15s ease;
}

.epc-raccourci:hover {
	border-color: var(--epc-accent);
	transform: translateY(-1px);
}

.epc-raccourci__titre {
	display: block;
	margin-bottom: 3px;
	color: var(--epc-accent);
	font-size: 1.05rem;
	font-weight: 700;
}

.epc-raccourci__texte {
	display: block;
	color: var(--epc-encre-douce);
	font-size: 0.87rem;
}

/* ==========================================================================
   CALENDRIER DU PLANNING

   Un planning répond d'abord à « quand ». Le calendrier le montre d'un coup
   d'œil ; le détail d'un dimanche ne s'ouvre qu'au clic.
   ========================================================================== */

.epc-calendrier {
	margin-bottom: 1.5rem;
	padding: 14px 14px 10px;
	border: 1px solid var(--epc-trait);
	border-radius: var(--epc-rayon);
	background: var(--epc-fond);
	box-shadow: var(--epc-ombre);
}

.epc-calendrier__tete {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	margin-bottom: 12px;
}

.epc-calendrier__titre {
	margin: 0;
	flex: 1 1 auto;
	font-size: 1.05rem;
	font-weight: 700;
	text-align: center;
}

.epc-fleche {
	flex: 0 0 auto;
	width: 44px;
	height: 44px;
	border: 1px solid var(--epc-contour);
	border-radius: 8px;
	background: var(--epc-fond);
	color: var(--epc-encre);
	font-size: 1.3rem;
	line-height: 1;
	cursor: pointer;
}

.epc-fleche:hover:not([disabled]) {
	background: var(--epc-fond-doux);
}

.epc-fleche[disabled] {
	opacity: 0.35;
	cursor: default;
}

/* « minmax(0, 1fr) » et non « 1fr » : une colonne en 1fr ne descend pas sous
   la largeur minimale de son contenu, et sur un écran de trois cent vingt
   pixels les sept colonnes poussaient le calendrier hors de sa boîte. */
.epc-jours-semaine,
.epc-grille-mois {
	display: grid;
	grid-template-columns: repeat(7, minmax(0, 1fr));
	gap: 4px;
}

.epc-jours-semaine {
	margin-bottom: 4px;
}

.epc-jours-semaine span {
	padding: 4px 0;
	color: var(--epc-encre-douce);
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-align: center;
	text-transform: uppercase;
}

/* Une case fait au moins 44 px : c'est la taille minimale d'une cible
   tactile, et un calendrier se consulte surtout au doigt. */
.epc-jour {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 1px;
	min-height: 46px;
	padding: 4px 2px;
	border: 1px solid transparent;
	border-radius: 8px;
	background: transparent;
	color: var(--epc-encre-douce);
	font: inherit;
	font-size: 0.9rem;
}

.epc-jour--vide {
	min-height: 0;
}

.epc-jour__numero {
	line-height: 1.1;
}

.epc-jour.est-passe {
	opacity: 0.45;
}

.epc-jour.est-aujourdhui .epc-jour__numero {
	position: relative;
	font-weight: 800;
	color: var(--epc-encre);
}

.epc-jour.est-aujourdhui .epc-jour__numero::after {
	content: "";
	display: block;
	width: 4px;
	height: 4px;
	margin: 2px auto 0;
	border-radius: 50%;
	background: var(--epc-encre);
}

/* Un dimanche de célébration : bouton cliquable. */
button.epc-jour {
	border-color: var(--epc-trait);
	background: var(--epc-accent-doux);
	color: var(--epc-accent);
	font-weight: 700;
	cursor: pointer;
}

button.epc-jour:hover {
	border-color: var(--epc-accent);
}

button.epc-jour.est-ouvert {
	background: var(--epc-accent);
	border-color: var(--epc-accent);
	color: #fff;
}

button.epc-jour.est-mien {
	border-color: var(--epc-accent);
	border-width: 2px;
}

.epc-jour__marque {
	display: flex;
	align-items: center;
	gap: 2px;
	font-size: 0.65rem;
	font-weight: 700;
	line-height: 1;
}

.epc-jour__compte {
	padding: 1px 4px;
	border-radius: 6px;
	background: rgba(47, 93, 128, 0.14);
}

button.epc-jour.est-ouvert .epc-jour__compte {
	background: rgba(255, 255, 255, 0.25);
}

.epc-legende-calendrier {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 16px;
	margin: 12px 0 0;
	padding: 10px 0 0;
	border-top: 1px solid var(--epc-trait);
	list-style: none;
	color: var(--epc-encre-douce);
	font-size: 0.78rem;
}

.epc-legende-calendrier li {
	display: flex;
	align-items: center;
	gap: 5px;
}

.epc-puce {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 18px;
	height: 18px;
	border-radius: 5px;
	font-size: 0.65rem;
	font-weight: 700;
}

.epc-puce--celebration {
	background: var(--epc-accent-doux);
	border: 1px solid var(--epc-accent);
}

.epc-puce--mien {
	background: var(--epc-accent);
	color: #fff;
}

.epc-puce--compte {
	background: rgba(47, 93, 128, 0.14);
	color: var(--epc-accent);
}

/* --- Détail d'un dimanche -------------------------------------------------- */

.epc-detail {
	margin-bottom: 14px;
	padding: 16px 18px;
	border: 1px solid var(--epc-trait);
	border-radius: var(--epc-rayon);
	background: var(--epc-fond);
}

.epc-detail:focus {
	outline: none;
}

.epc-detail.est-mien {
	border-left: 4px solid var(--epc-accent);
}

.epc-detail__tete h2 {
	margin: 0;
	font-size: 1.15rem;
}

/* Une seule majuscule, à la première lettre. « capitalize » mettait une
   majuscule à chaque mot et produisait « Dimanche 27 Septembre 2026 ». */
.epc-detail__tete h2::first-letter,
.epc-calendrier__titre::first-letter {
	text-transform: uppercase;
}

.epc-detail__resume {
	margin: 2px 0 0;
	color: var(--epc-encre-douce);
	font-size: 0.85rem;
}

.epc-toi {
	display: flex;
	align-items: baseline;
	gap: 7px;
	margin: 12px 0 0;
	padding: 9px 12px;
	border-radius: 8px;
	background: var(--epc-accent-doux);
	color: var(--epc-accent);
	font-weight: 600;
}

.epc-toi__marque {
	font-size: 0.9rem;
}

.epc-badge--confirme span,
.epc-badge--decline span {
	margin-right: 2px;
	font-weight: 700;
}

/* ==========================================================================
   FINITIONS D'ACCESSIBILITÉ ET DE CONFORT
   ========================================================================== */

/* Un contour de focus visible et identique partout. Sans lui, la navigation
   au clavier se fait à l'aveugle. */
body.epc-espace :focus-visible {
	outline: 3px solid var(--epc-accent);
	outline-offset: 2px;
	border-radius: 4px;
}

body.epc-espace :focus:not(:focus-visible) {
	outline: none;
}

/* Une animation peut donner la nausée à qui y est sensible. Le système le
   signale, on l'écoute. */
@media (prefers-reduced-motion: reduce) {
	body.epc-espace *,
	body.epc-espace *::before,
	body.epc-espace *::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

/* Cibles tactiles : 44 px est le minimum recommandé, et l'espace se consulte
   surtout au doigt. */
body.epc-espace button,
body.epc-espace .epc-bouton,
body.epc-espace select,
body.epc-espace input:not([type="checkbox"]) {
	min-height: 44px;
}

body.epc-espace .epc-lien-discret {
	min-height: 44px;
	padding: 10px 8px;
}

/* --- Mode sombre -----------------------------------------------------------

   Choisi, pas obtenu par inversion : chaque valeur est reprise et son
   contraste vérifié sur la surface sombre. Tous les couples de texte
   dépassent 7:1, les contours de champ dépassent 3:1.
   -------------------------------------------------------------------------- */

/* Le clair est le thème par défaut : sans choix de la part du lecteur, c'est
   lui qui s'applique, quel que soit le réglage de son système.

   Le sombre s'obtient de deux façons : en le choisissant, ou en demandant à
   suivre le système alors que celui-ci est en sombre. Les deux sélecteurs
   portent les mêmes valeurs, écrites une fois chacune pour rester lisibles. */

@media (prefers-color-scheme: dark) {
	:root[data-theme="systeme"] {
		--epc-frise-fond: #101714;
		--epc-frise-carte: #18211c;
		--epc-frise-carte-douce: #141c18;
		--epc-frise-encre: #e8f0ea;
		--epc-frise-encre-douce: #a3b3a8;
		--epc-frise-encre-faible: #7f8f85;
		--epc-frise-trait: #29352d;
		--epc-frise-trait-clair: #222c26;
		--epc-frise-fil: #2f3c34;

		--epc-frise-vert: #1d4b39;
		--epc-frise-vert-sombre: #2a6a50;
		--epc-frise-vert-vif: #4fa478;
		--epc-frise-vert-pale: #172c21;
		--epc-frise-vert-encre: #8fd8b3;
		--epc-frise-vert-sur: #eaf6ef;
		--epc-frise-vert-legende: #9dc0ac;
		--epc-frise-vert-detail: #b3cfbd;
		--epc-frise-choisi: #1b2a22;
		--epc-frise-choisi-trait: #4a7a60;

		--epc-frise-ambre: #dfa94c;
		--epc-frise-ambre-trait: #8a6c2c;
		--epc-frise-ambre-pale: #2b2314;
		--epc-frise-ambre-tres-pale: #241d10;
		--epc-frise-ambre-bord: #574a2a;
		--epc-frise-ambre-encre: #e2b96a;
		--epc-frise-ambre-encre-forte: #edc77d;

		--epc-frise-rouge: #ef8b84;
		--epc-frise-rouge-pale: #301b1a;
		--epc-frise-rouge-bord: #6b3430;

		--epc-frise-libre: #46524b;
		--epc-frise-tirete: #6b7d72;
		--epc-frise-tirete-clair: #5a6a61;
		--epc-encre: #e8f0ea;
		--epc-encre-douce: #97a89d;
		--epc-fond: #18211c;
		--epc-fond-doux: #101714;
		--epc-rail: #18211c;
		--epc-trait: #29352d;
		--epc-contour: #6b7d72;
		--epc-accent: #6cc79a;
		--epc-accent-doux: #172c21;
		--epc-accent-sombre: #8fd8b3;
		--epc-sur-accent: #101714;
		--epc-ok: #6cc79a;
		--epc-ok-doux: #172c21;
		--epc-attention: #dfa94c;
		--epc-attention-doux: #2b2314;
		--epc-alerte: #ef8b84;
		--epc-alerte-doux: #301b1a;
		/* Sur fond sombre une ombre ne se voit pas : c'est une bordure claire
		   très discrète qui détache une carte. */
		--epc-ombre: 0 0 0 1px rgba(255, 255, 255, 0.04);
		--epc-ombre-haute: 0 10px 30px rgba(0, 0, 0, 0.5);
	}
}

:root[data-theme="sombre"] {
		--epc-frise-fond: #101714;
	--epc-frise-carte: #18211c;
	--epc-frise-carte-douce: #141c18;
	--epc-frise-encre: #e8f0ea;
	--epc-frise-encre-douce: #a3b3a8;
	--epc-frise-encre-faible: #7f8f85;
	--epc-frise-trait: #29352d;
	--epc-frise-trait-clair: #222c26;
	--epc-frise-fil: #2f3c34;

	--epc-frise-vert: #1d4b39;
	--epc-frise-vert-sombre: #2a6a50;
	--epc-frise-vert-vif: #4fa478;
	--epc-frise-vert-pale: #172c21;
	--epc-frise-vert-encre: #8fd8b3;
	--epc-frise-vert-sur: #eaf6ef;
	--epc-frise-vert-legende: #9dc0ac;
	--epc-frise-vert-detail: #b3cfbd;
	--epc-frise-choisi: #1b2a22;
	--epc-frise-choisi-trait: #4a7a60;

	--epc-frise-ambre: #dfa94c;
	--epc-frise-ambre-trait: #8a6c2c;
	--epc-frise-ambre-pale: #2b2314;
	--epc-frise-ambre-tres-pale: #241d10;
	--epc-frise-ambre-bord: #574a2a;
	--epc-frise-ambre-encre: #e2b96a;
	--epc-frise-ambre-encre-forte: #edc77d;

	--epc-frise-rouge: #ef8b84;
	--epc-frise-rouge-pale: #301b1a;
	--epc-frise-rouge-bord: #6b3430;

	--epc-frise-libre: #46524b;
	--epc-frise-tirete: #6b7d72;
	--epc-frise-tirete-clair: #5a6a61;
	--epc-encre: #e8f0ea;
	--epc-encre-douce: #97a89d;
	--epc-fond: #18211c;
	--epc-fond-doux: #101714;
	--epc-rail: #18211c;
	--epc-trait: #29352d;
	--epc-contour: #6b7d72;
	--epc-accent: #6cc79a;
	--epc-accent-doux: #172c21;
	--epc-accent-sombre: #8fd8b3;
	--epc-sur-accent: #101714;
	--epc-ok: #6cc79a;
	--epc-ok-doux: #172c21;
	--epc-attention: #dfa94c;
	--epc-attention-doux: #2b2314;
	--epc-alerte: #ef8b84;
	--epc-alerte-doux: #301b1a;
	/* Sur fond sombre une ombre ne se voit pas : c'est une bordure claire
	   très discrète qui détache une carte. */
	--epc-ombre: 0 0 0 1px rgba(255, 255, 255, 0.04);
	--epc-ombre-haute: 0 10px 30px rgba(0, 0, 0, 0.5);
}


/* --- Contrastes forcés (Windows, mode contraste élevé) --------------------- */

@media (forced-colors: active) {
	button.epc-jour {
		border: 1px solid ButtonText;
	}

	button.epc-jour.est-ouvert {
		border-width: 3px;
	}

	.epc-navigation a.est-active {
		border-bottom-color: Highlight;
	}
}

/* ==========================================================================
   REPRISE VISUELLE

   Écrit après coup et volontairement en fin de fichier : ces règles affinent
   ce qui précède plutôt que de le remplacer. Trois partis pris :

   - une échelle typographique, pour que les titres se répondent au lieu
     d'avoir chacun sa taille ;
   - des surfaces qui se distinguent par une bordure nette plutôt que par une
     ombre, qui ne se voit pas sur fond sombre ;
   - des listes plus denses : un répertoire de 155 chants se parcourt, il ne
     se lit pas.
   ========================================================================== */

/* --- Échelle typographique ------------------------------------------------- */

body.epc-espace h1,
body.epc-espace h2,
body.epc-espace h3,
body.epc-espace h4 {
	color: var(--epc-encre);
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: -0.015em;
}

body.epc-espace h1 {
	font-size: clamp( 1.5rem, 1.2rem + 1.2vw, 1.9rem );
	margin: 0 0 var(--epc-espace-2);
}

body.epc-espace h2 {
	font-size: 1.2rem;
	letter-spacing: -0.01em;
}

body.epc-espace h3 {
	font-size: 1rem;
	letter-spacing: 0;
}

.epc-sous-titre {
	max-width: 44rem;
	margin-bottom: var(--epc-espace-6);
	font-size: 1.02rem;
}

.epc-principal {
	padding-top: var(--epc-espace-6);
}

/* --- Surfaces -------------------------------------------------------------- */

.epc-bloc,
.epc-carte,
.epc-detail,
.epc-calendrier,
.epc-chiffre,
.epc-raccourci,
.epc-activite {
	border-color: var(--epc-trait);
	border-radius: var(--epc-rayon);
	box-shadow: var(--epc-ombre);
}

.epc-bloc {
	padding: var(--epc-espace-5);
	margin-bottom: var(--epc-espace-4);
}

.epc-bloc h2,
.epc-bloc h3 {
	margin-top: 0;
}

.epc-porte__carte {
	box-shadow: var(--epc-ombre-haute);
}

.epc-marque__nom {
	letter-spacing: -0.015em;
}

.epc-navigation a.est-active {
	font-weight: 700;
}

/* --- Calendrier ------------------------------------------------------------ */

.epc-calendrier {
	padding: var(--epc-espace-5) var(--epc-espace-4) var(--epc-espace-3);
}

.epc-calendrier__titre {
	font-size: 1.1rem;
	font-weight: 700;
}

.epc-fleche {
	width: 44px;
	height: 44px;
	border-color: var(--epc-trait);
	border-radius: var(--epc-rayon-petit);
	color: var(--epc-encre-douce);
	font-size: 1.15rem;
}

.epc-fleche:hover:not([disabled]) {
	border-color: var(--epc-contour);
	color: var(--epc-encre);
}

.epc-jours-semaine span {
	font-size: 0.68rem;
	color: var(--epc-encre-douce);
}

.epc-jour {
	min-height: 48px;
	border-radius: var(--epc-rayon-petit);
	font-size: 0.92rem;
	font-variant-numeric: tabular-nums;
}

/* Un jour ordinaire reste discret : ce n'est pas lui qu'on cherche. */
.epc-jour:not(button) .epc-jour__numero {
	color: var(--epc-encre-douce);
	opacity: 0.75;
}

/* Un dimanche de célébration se distingue par une teinte douce et une
   bordure, pas par un aplat : l'aplat est réservé au jour ouvert. */
button.epc-jour {
	border-color: color-mix( in srgb, var(--epc-accent) 28%, transparent );
	background: var(--epc-accent-doux);
	font-weight: 600;
}

button.epc-jour .epc-jour__numero {
	color: var(--epc-accent);
	font-weight: 700;
}

button.epc-jour:hover {
	border-color: var(--epc-accent);
	background: color-mix( in srgb, var(--epc-accent) 14%, var(--epc-fond) );
}

button.epc-jour.est-ouvert,
button.epc-jour.est-ouvert:hover {
	background: var(--epc-accent);
	border-color: var(--epc-accent);
}

button.epc-jour.est-ouvert .epc-jour__numero {
	color: var(--epc-fond);
}

button.epc-jour.est-mien {
	border-width: 1px;
	box-shadow: inset 0 0 0 1px var(--epc-accent);
}

.epc-jour__marque {
	gap: 3px;
	font-size: 0.62rem;
	opacity: 0.9;
}

.epc-jour__etoile {
	color: var(--epc-attention);
}

button.epc-jour.est-ouvert .epc-jour__etoile {
	color: var(--epc-fond);
}

.epc-jour__compte {
	padding: 1px 5px;
	border-radius: 5px;
	background: color-mix( in srgb, var(--epc-accent) 16%, transparent );
	color: var(--epc-accent);
	font-variant-numeric: tabular-nums;
}

button.epc-jour.est-ouvert .epc-jour__compte {
	background: color-mix( in srgb, var(--epc-fond) 26%, transparent );
	color: var(--epc-fond);
}

.epc-legende-calendrier {
	margin-top: var(--epc-espace-4);
	padding-top: var(--epc-espace-3);
	font-size: 0.76rem;
}

/* --- Détail d'un dimanche -------------------------------------------------- */

.epc-detail {
	padding: var(--epc-espace-5);
	margin-bottom: var(--epc-espace-3);
}

.epc-detail__tete h2 {
	font-size: 1.25rem;
}

.epc-groupe {
	margin-top: var(--epc-espace-5);
}

.epc-groupe h3 {
	margin-bottom: var(--epc-espace-2);
	color: var(--epc-encre-douce);
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.epc-creneau {
	padding: 7px 0;
	font-size: 0.95rem;
}

.epc-creneau__qui {
	font-weight: 600;
}

/* --- Répertoire de chants -------------------------------------------------- */









.epc-recherche {
	margin-bottom: var(--epc-espace-4);
}

.epc-recherche input {
	max-width: 30rem;
	border-radius: var(--epc-rayon-petit);
}

/* --- Vue d'ensemble -------------------------------------------------------- */

.epc-chiffre {
	padding: var(--epc-espace-4) var(--epc-espace-5);
}

.epc-chiffre__valeur {
	font-size: 1.9rem;
	font-variant-numeric: tabular-nums;
	letter-spacing: -0.02em;
}

.epc-raccourci {
	padding: var(--epc-espace-4) var(--epc-espace-5);
}

.epc-raccourci:hover {
	background: var(--epc-fond-doux);
	transform: none;
}

/* --- Boutons --------------------------------------------------------------- */

.epc-bouton {
	border-radius: var(--epc-rayon-petit);
	letter-spacing: -0.005em;
}

.epc-bouton:hover,
.epc-bouton:focus {
	background: var(--epc-accent-sombre);
}

/* --- Ce qui ne doit pas rester blanc en mode sombre ------------------------ */


/* --- Ce qui se pose sur une couleur d'accent -------------------------------

   Le texte posé sur l'accent ne peut pas être blanc dans les deux thèmes :
   du blanc sur un vert clair ne se lit pas. Un jeton dédié porte la bonne
   valeur pour chaque thème, et ces règles ne parlent plus de couleurs.
   -------------------------------------------------------------------------- */

body.epc-espace .epc-bouton:not( .epc-bouton--non ):not( .epc-bouton--doux ),
body.epc-espace .epc-bouton:not( .epc-bouton--non ):not( .epc-bouton--doux ):hover,
body.epc-espace .epc-bouton:not( .epc-bouton--non ):not( .epc-bouton--doux ):focus,
body.epc-espace .epc-badge--mien,
body.epc-espace .epc-puce--mien,
body.epc-espace button.epc-jour.est-ouvert,
body.epc-espace button.epc-jour.est-ouvert .epc-jour__numero,
body.epc-espace button.epc-jour.est-ouvert .epc-jour__etoile {
	color: var(--epc-sur-accent);
}

body.epc-espace .epc-bouton--oui {
	background: var(--epc-ok);
	color: var(--epc-sur-accent);
}

body.epc-espace .epc-bouton--non {
	background: var(--epc-fond);
	border: 1px solid var(--epc-contour);
	color: var(--epc-encre-douce);
}

body.epc-espace .epc-bouton--non:hover,
body.epc-espace .epc-bouton--non:focus {
	background: var(--epc-alerte-doux);
	border-color: var(--epc-alerte);
	color: var(--epc-alerte);
}

body.epc-espace .epc-bouton--doux {
	background: var(--epc-fond);
	border: 1px solid var(--epc-contour);
	color: var(--epc-encre);
}

body.epc-espace .epc-bouton--doux:hover,
body.epc-espace .epc-bouton--doux:focus {
	background: var(--epc-fond-doux);
	border-color: var(--epc-accent);
	color: var(--epc-accent);
}

body.epc-espace button.epc-jour.est-ouvert .epc-jour__compte {
	background: color-mix( in srgb, var(--epc-sur-accent) 24%, transparent );
	color: var(--epc-sur-accent);
}

body.epc-espace .epc-porte__carte {
	box-shadow: var(--epc-ombre-haute);
}

/* ==========================================================================
   BARRE LATÉRALE

   Repliée par défaut, en icônes. Sur un outil ouvert plusieurs fois par
   semaine, les icônes s'apprennent vite et laissent toute la largeur au
   contenu ; le bouton du haut déplie les intitulés pour qui préfère.

   Sur téléphone elle passe en bas de l'écran, là où le pouce arrive.
   ========================================================================== */

.epc-rail {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 30;
	display: flex;
	flex-direction: column;
	width: var(--epc-rail-repli);
	height: 100vh;
	height: 100dvh;
	padding: var(--epc-espace-3) var(--epc-espace-2) var(--epc-espace-4);
	border-right: 1px solid var(--epc-trait);
	background: var(--epc-rail);
	transition: width 0.18s ease;
	overflow-x: hidden;
	overflow-y: auto;
	scrollbar-width: none;
}

.epc-rail::-webkit-scrollbar {
	display: none;
}

.epc-rail.est-depliee {
	width: var(--epc-rail-deplie);
	box-shadow: var(--epc-ombre-haute);
}

.epc-rail__nav {
	flex: 1 1 auto;
	min-height: 0;
	margin-top: var(--epc-espace-4);
	overflow-y: auto;
	overflow-x: hidden;

	/* Pas de barre de défilement visible sur une colonne de trente pixels :
	   elle mangerait la moitié de la largeur. */
	scrollbar-width: none;
}

.epc-rail__nav::-webkit-scrollbar {
	display: none;
}

.epc-rail__nav ul {
	display: flex;
	flex-direction: column;
	gap: var(--epc-espace-1);
	margin: 0;
	padding: 0;
	list-style: none;
}

.epc-rail__lien,
.epc-rail__bouton {
	display: flex;
	align-items: center;
	gap: var(--epc-espace-3);
	width: 100%;
	padding: 0;
	border: none;
	border-radius: var(--epc-rayon-petit);
	background: transparent;
	color: var(--epc-encre-douce);
	font: inherit;
	font-size: 0.9rem;
	font-weight: 500;
	text-align: left;
	text-decoration: none;
	cursor: pointer;
}

/* La pastille est la cible tactile : 44 px, et c'est elle qui porte le fond
   de l'élément actif. Le texte, lui, n'existe que déplié. */
.epc-rail__pastille,
.epc-rail__avatar {
	position: relative;
	display: flex;
	flex-shrink: 0;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 10px;
	transition: background-color 0.15s ease, color 0.15s ease;
}

/* Les attributs de tracé sont ici et non sur chaque balise : une icône
   référencée par <use> les répétait quatre-vingt-dix octets à la fois, deux
   mille fois sur l'écran Programme. Ils valent ce que portait la balise, si
   bien que les icônes au tracé en clair ne changent pas d'aspect. Un tracé
   plein posé sur un cercle garde le sien : un attribut de présentation bat la
   valeur héritée. */
.epc-icone {
	width: 21px;
	height: 21px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.75;
	stroke-linecap: round;
	stroke-linejoin: round;
}

/* --- La tête du rail : le chevron et sa légende ---------------------------- */

/* La tête et le pied ne bougent pas ; seule la liste des écrans défile si
   l'écran est trop court. Sans cela, ajouter une entrée pousse le bouton de
   compte hors de la fenêtre, et le chevron se retrouve rogné en haut. */
.epc-rail__tete {
	flex: 0 0 auto;
	display: flex;
	flex-direction: column;
	gap: 2px;
}

/* Visible même le rail replié, contrairement aux intitulés : sans elle, le
   bouton se remarque à peine et le rail reste fermé pour qui ne sait pas
   qu'il s'ouvre. Dans le flux, pour qu'elle réserve sa propre hauteur au lieu
   de recouvrir la première icône. */
.epc-rail__legende {
	width: 44px;
	color: var(--epc-encre-douce);
	font-size: 0.6rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-align: center;
	text-transform: uppercase;
	pointer-events: none;
}

/* --- Le séparateur entre les deux groupes --------------------------------- */

.epc-rail__nav--organisation {
	flex: 0 0 auto;
	margin-top: var(--epc-espace-2);
	overflow: visible;
}

.epc-rail__separateur {
	display: flex;
	flex-direction: column;
	gap: 4px;
	margin: var(--epc-espace-3) 0 var(--epc-espace-2);
}

.epc-rail__separateur__trait {
	display: block;
	width: 24px;
	height: 1px;
	margin-left: 10px;
	background: var(--epc-contour);
}

/* L'intitulé du groupe ne se lit que le rail déplié : replié, le trait suffit
   à dire qu'on change de nature. */
.epc-rail__separateur__titre {
	padding-left: 10px;
	color: var(--epc-encre-douce);
	font-size: 0.62rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	white-space: nowrap;
	opacity: 0;
	transition: opacity 0.12s ease;
}

.epc-rail.est-depliee .epc-rail__separateur__titre {
	opacity: 1;
}

/* --- Le panneau du compte -------------------------------------------------- */

.epc-rail__moi-tete {
	cursor: pointer;
}

.epc-rail__moi-tete:hover .epc-rail__avatar,
.epc-rail__moi-tete[aria-expanded="true"] .epc-rail__avatar {
	background: var(--epc-accent);
	color: var(--epc-sur-accent);
}

/* Hors du rail dans le document, et donc hors de son influence : le rail anime
   sa largeur, Chrome le promeut en couche de composition, et un élément en
   position fixe posé dedans s'ancre sur cette couche plutôt que sur la
   fenêtre. Ici, rien au-dessus de lui ne bouge. */
.epc-moi-panneau {
	position: fixed;
	left: var(--epc-espace-2);
	bottom: calc( var(--epc-espace-4) + 50px );
	z-index: 40;
	width: min( 15rem, calc( 100vw - 2 * var(--epc-espace-2) ) );
	padding: var(--epc-espace-3) var(--epc-espace-4);
	border: 1px solid var(--epc-trait);
	border-radius: var(--epc-rayon);
	background: var(--epc-fond);
	box-shadow: var(--epc-ombre-haute);
}

.epc-moi-panneau__nom {
	margin: 0;
	font-weight: 600;
}

.epc-moi-panneau__profil {
	margin: 2px 0 0;
	color: var(--epc-encre-douce);
	font-size: 0.82rem;
}

.epc-moi-panneau__version {
	margin: var(--epc-espace-2) 0 var(--epc-espace-3);
	padding-top: var(--epc-espace-2);
	border-top: 1px solid var(--epc-trait);
	color: var(--epc-encre-douce);
	font-size: 0.76rem;
}

/* Le choix du thème, dans le panneau du compte. C'est un réglage de compte et
   non une section de l'espace : dans le rail, il occupait une place au milieu
   des écrans, comme s'il en était un. */
.epc-moi-panneau__theme {
	display: flex;
	align-items: center;
	gap: 8px;
	width: 100%;
	margin-bottom: var(--epc-espace-3);
	padding: var(--epc-espace-2) var(--epc-espace-3);
	border: 1px solid var(--epc-trait);
	border-radius: var(--epc-rayon-petit);
	background: var(--epc-fond);
	color: var(--epc-encre);
	cursor: pointer;
	font: inherit;
	font-size: 0.88rem;
	text-align: left;
}

.epc-moi-panneau__theme:hover {
	border-color: var(--epc-accent);
	color: var(--epc-accent);
}

.epc-moi-panneau__theme:focus-visible {
	outline: 2px solid var(--epc-accent);
	outline-offset: 2px;
}

.epc-moi-panneau__theme-icone {
	display: inline-flex;
	flex: 0 0 auto;
}

.epc-moi-panneau__theme-icone .epc-icone {
	width: 17px;
	height: 17px;
}

.epc-moi-panneau__sortie {
	display: flex;
	align-items: center;
	gap: 8px;
	color: var(--epc-alerte);
	font-size: 0.88rem;
	font-weight: 600;
	text-decoration: none;
}

.epc-moi-panneau__sortie:hover,
.epc-moi-panneau__sortie:focus-visible {
	text-decoration: underline;
}

.epc-moi-panneau__sortie .epc-icone {
	width: 17px;
	height: 17px;
}

/* --- Le lieu de la célébration -------------------------------------------- */

.epc-lieu {
	display: flex;
	align-items: center;
	gap: 6px;
	margin: 0 0 var(--epc-espace-3);
	color: var(--epc-encre-douce);
	font-size: 0.92rem;
}

.epc-lieu .epc-icone {
	flex: 0 0 auto;
	width: 17px;
	height: 17px;
}

.epc-lieu__champ {
	flex: 1 1 18rem;
	max-width: 24rem;
	min-height: 34px;
	padding: 4px 8px;
	border: 1px solid transparent;
	border-radius: var(--epc-rayon-petit);
	background: transparent;
	color: inherit;
	font: inherit;
	font-size: 0.92rem;
}

/* Discret au repos, un champ au survol : le lieu se lit plus souvent qu'il ne
   se corrige. */
.epc-lieu__champ:hover {
	border-color: var(--epc-contour);
	background: var(--epc-fond);
}

.epc-lieu__champ:focus {
	outline: 2px solid var(--epc-accent);
	outline-offset: 1px;
	border-color: var(--epc-accent);
	background: var(--epc-fond);
}

.epc-lieu__champ::placeholder {
	color: var(--epc-encre-douce);
	opacity: 0.7;
	font-style: italic;
}

/* Le chevron pointe vers la droite quand le rail est replié : il montre le
   sens où il va s'ouvrir. Déplié, il se retourne et montre celui où il se
   ferme. Un seul dessin plutôt que deux à tenir en accord. */
.epc-rail__bascule .epc-icone {
	transition: transform 0.15s ease;
}

.epc-rail.est-depliee .epc-rail__bascule .epc-icone {
	transform: rotate( 180deg );
}

.epc-rail__lien:hover .epc-rail__pastille,
.epc-rail__bouton:hover .epc-rail__pastille {
	background: var(--epc-fond-doux);
	color: var(--epc-encre);
}

.epc-rail__lien.est-active {
	color: var(--epc-accent);
	font-weight: 700;
}

.epc-rail__lien.est-active .epc-rail__pastille {
	background: var(--epc-accent-doux);
	color: var(--epc-accent);
}

.epc-rail__texte {
	flex: 1 1 auto;
	min-width: 0;
	opacity: 0;
	white-space: nowrap;
	transition: opacity 0.12s ease;
	pointer-events: none;
}

.epc-rail.est-depliee .epc-rail__texte {
	opacity: 1;
	pointer-events: auto;
}

.epc-rail__texte small {
	display: block;
	overflow: hidden;
	color: var(--epc-encre-douce);
	font-size: 0.76rem;
	font-weight: 400;
	text-overflow: ellipsis;
}

/* Compteur de créneaux en attente : un nombre, pas seulement une couleur. */
.epc-rail__compte {
	position: absolute;
	top: 3px;
	right: 3px;
	min-width: 18px;
	height: 18px;
	padding: 0 5px;
	border: 2px solid var(--epc-rail);
	border-radius: 9px;
	background: var(--epc-attention);
	color: #ffffff;
	font-size: 0.68rem;
	font-weight: 700;
	line-height: 15px;
	text-align: center;
}

/* La boîte qui regroupe ce qui sort de la barre sur un téléphone. Sur un
   grand écran elle s'efface de la mise en page : le rail reste la colonne
   qu'il était, sans une boîte de plus entre lui et ses enfants. */
.epc-rail__reste {
	display: contents;
}

/* Le bouton « Plus » n'existe que sur téléphone. */
.epc-rail__plus {
	display: none;
}

.epc-rail__pied {
	flex: 0 0 auto;
	display: flex;
	flex-direction: column;
	gap: var(--epc-espace-1);
	padding-top: var(--epc-espace-4);
	border-top: 1px solid var(--epc-trait);
}

.epc-rail__avatar {
	background: var(--epc-accent-doux);
	color: var(--epc-accent);
	font-size: 0.82rem;
	font-weight: 700;
	letter-spacing: 0.02em;
}

.epc-rail__moi-tete:hover .epc-rail__avatar,
.epc-rail__moi[open] .epc-rail__avatar {
	background: var(--epc-accent);
	color: var(--epc-sur-accent);
}

/* --- Le cadre du contenu --------------------------------------------------- */

.epc-cadre {
	margin-left: var(--epc-rail-repli);
	min-height: 100vh;
	min-height: 100dvh;
	display: flex;
	flex-direction: column;
}

.epc-cadre.est-seul {
	margin-left: 0;
}

/* Rail déplié : le contenu se décale au lieu d'être recouvert. Sans ça, les
   232 px du rail ouvert passaient par-dessus le titre « Espace membre », qui
   est le premier élément de la barre et donc le plus à gauche. */
.epc-cadre {
	transition: margin-left 0.18s ease;
}

body.epc-rail-ouvert .epc-cadre:not(.est-seul) {
	margin-left: var(--epc-rail-deplie);
}

@media (prefers-reduced-motion: reduce) {
	.epc-cadre {
		transition: none;
	}
}

/* Un pixel, repris par une marge négative : la sentinelle ne déplace rien et
   ne se voit pas. C'est sa sortie de l'écran qui resserre la barre. */
.epc-barre-sentinelle {
	display: block;
	height: 1px;
	margin-bottom: -1px;
}

/*
 * La barre reste en haut quand on défile, et se resserre.
 *
 * L'interrupteur du mode édition y vit : parti avec le défilement, il aurait
 * fallu remonter toute une liste de dimanches pour l'atteindre. Elle rétrécit
 * plutôt que de garder sa taille, parce qu'un bandeau de soixante-dix pixels
 * qui suit le regard finit par gêner ce qu'on lit.
 *
 * Plan 20 : sous le rail, qui est à 30, et sous le panneau du compte, à 40.
 */
.epc-barre {
	position: sticky;
	top: 0;
	z-index: 20;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--epc-espace-4);
	padding: var(--epc-espace-4) var(--epc-espace-6);
	border-bottom: 1px solid var(--epc-trait);
	background: var(--epc-fond);
	transition: padding 0.16s ease, box-shadow 0.16s ease;
}

/* Resserrée : la hauteur tombe d'environ soixante-dix pixels à quarante-six,
   et une ombre discrète détache la barre de ce qui défile dessous. */
.epc-barre.est-reduite {
	padding-top: var(--epc-espace-2);
	padding-bottom: var(--epc-espace-2);
	box-shadow: var(--epc-ombre);
}

/* Le nom de l'église s'efface le premier : c'est ce qui se répète le plus, et
   on ne le relit pas en défilant. */
.epc-barre.est-reduite .epc-marque__eglise {
	display: none;
}

.epc-barre.est-reduite .epc-marque__nom {
	font-size: 0.92rem;
}

@media (prefers-reduced-motion: reduce) {
	.epc-barre {
		transition: none;
	}
}

/* ============================== Voir le mot de passe qu'on tape ============ */

/*
 * On se trompe d'une lettre et le site répond « identifiants refusés » sans
 * dire laquelle. Pouvoir relire ce qu'on vient d'écrire évite d'essayer trois
 * fois en se demandant si c'est le mot de passe qui est faux.
 */
.epc-mot-de-passe {
	position: relative;
	display: block;
}

/* La saisie laisse la place au bouton, pour que les lettres ne passent pas
   dessous quand le mot de passe est long. */
.epc-mot-de-passe input {
	width: 100%;
	padding-right: 3.1rem;
}

.epc-oeil {
	position: absolute;
	top: 50%;
	right: 4px;
	transform: translateY( -50% );
	display: inline-flex;
	align-items: center;
	justify-content: center;
	/* Quarante-quatre pixels de côté, comme toutes les cibles du site : on
	   appuie dessus au doigt, sur un téléphone, en pleine saisie. */
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	border-radius: var(--epc-rayon-petit);
	background: none;
	color: var(--epc-encre-douce);
	cursor: pointer;
}

.epc-oeil .epc-icone {
	width: 1.15rem;
	height: 1.15rem;
}

.epc-oeil:hover {
	color: var(--epc-accent);
}

.epc-oeil:focus-visible {
	outline: 2px solid var(--epc-accent);
	outline-offset: -2px;
}

/* Montré, le bouton prend la couleur de l'accent : le mot de passe est lisible
   à l'écran, et mieux vaut que ça se voie. */
.epc-oeil[aria-pressed="true"] {
	color: var(--epc-accent);
}

/* =============================== L'interrupteur du mode édition ============ */

/*
 * Deux exemplaires, un seul visible : celui de la barre du haut sur un grand
 * écran, celui du rail sur un téléphone, où la barre n'a pas la place d'un
 * bouton de plus à côté du fil d'Ariane.
 *
 * Le point de rupture est celui du rail, qui passe en bas à la même largeur :
 * en deçà, la barre se réduit au titre.
 */
.epc-barre__edition {
	display: inline-flex;
	align-items: center;
	gap: var(--epc-espace-2);
	padding: 6px var(--epc-espace-3);
	border: 1px solid var(--epc-trait);
	border-radius: 999px;
	background: var(--epc-fond);
	color: var(--epc-encre-douce);
	cursor: pointer;
	font: inherit;
	transition: border-color 0.12s ease, background-color 0.12s ease, color 0.12s ease;
}

.epc-barre__edition:hover {
	border-color: var(--epc-accent);
	color: var(--epc-accent);
}

.epc-barre__edition:focus-visible {
	outline: 2px solid var(--epc-accent);
	outline-offset: 2px;
}

.epc-barre__edition[disabled] {
	opacity: 0.55;
	cursor: default;
}

.epc-barre__edition-icone {
	display: inline-flex;
}

.epc-barre__edition-icone .epc-icone {
	width: 17px;
	height: 17px;
}

/* Le mot et son état sur une ligne : « Mode édition allumé ». En deux lignes,
   le bouton ferait deux fois la hauteur de la barre. */
.epc-barre__edition-texte {
	display: inline-flex;
	align-items: baseline;
	gap: 6px;
	font-size: 0.82rem;
	font-weight: 600;
	white-space: nowrap;
}

.epc-barre__edition-texte small {
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	color: var(--epc-encre-douce);
}

/* Allumé, il le dit franchement : c'est un état dans lequel on peut modifier
   des choses sans le vouloir. */
.epc-barre__edition.est-active {
	border-color: var(--epc-accent);
	background: var(--epc-accent);
	color: var(--epc-sur-accent);
}

.epc-barre__edition.est-active .epc-barre__edition-texte small {
	color: var(--epc-sur-accent);
	opacity: 0.85;
}

.epc-barre__edition.est-active:hover {
	background: var(--epc-accent-sombre);
	border-color: var(--epc-accent-sombre);
	color: var(--epc-sur-accent);
}

/* Sur téléphone, c'est celui du rail qui sert. */
@media (max-width: 48rem) {
	.epc-barre__edition {
		display: none;
	}
}

/* Et sur grand écran, c'est celui de la barre. */
@media (min-width: 48.0625rem) {
	.epc-rail__edition {
		display: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.epc-barre__edition {
		transition: none;
	}
}

.epc-barre__titre {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: var(--epc-espace-4);
}

.epc-barre__page {
	color: var(--epc-encre-douce);
	font-size: 0.92rem;
}

.epc-barre__page::before {
	content: "/";
	margin-right: var(--epc-espace-4);
	opacity: 0.5;
}

.epc-retour {
	color: var(--epc-encre-douce);
	font-size: 0.88rem;
	text-decoration: none;
	border-bottom: 1px solid var(--epc-trait);
}

.epc-principal {
	flex: 1 1 auto;
	width: 100%;
	max-width: 64rem;
	margin: 0 auto;
	padding: var(--epc-espace-6) var(--epc-espace-6) var(--epc-espace-7);
}

.epc-pied {
	max-width: 64rem;
	margin: 0 auto;
	padding: var(--epc-espace-5) var(--epc-espace-6) var(--epc-espace-6);
}

/* --- Téléphone : la barre passe en bas ------------------------------------- */

@media (max-width: 48rem) {
	/* Le rail passe en bas : plus rien à décaler, même déplié. La règle du
	   dessus a deux classes, il faut la même force pour l'annuler. */
	body.epc-rail-ouvert .epc-cadre:not(.est-seul) {
		margin-left: 0;
	}

	/* La barre ne défile plus de côté. Elle portait jusqu'à douze cibles dans
	   trois cent quatre-vingt-dix pixels : il fallait la faire glisser pour
	   trouver son écran, et rien ne laissait deviner qu'elle continuait. Cinq
	   entrées y restent, le reste passe derrière « Plus ». */
	.epc-rail {
		top: auto;
		bottom: 0;
		flex-direction: row;
		align-items: stretch;
		width: 100%;
		height: auto;
		padding: var(--epc-espace-1) var(--epc-espace-1);
		padding-bottom: calc( var(--epc-espace-1) + env( safe-area-inset-bottom, 0px ) );
		border-right: none;
		border-top: 1px solid var(--epc-trait);
		overflow: visible;
	}

	.epc-rail.est-depliee {
		width: 100%;
		box-shadow: none;
	}

	/* Déplié ou non, sur un écran étroit on ne montre que les icônes : il n'y
	   a pas la place, et le bouton de bascule n'aurait plus de sens. Sa
	   légende s'en va avec lui. */
	.epc-rail__tete {
		display: none;
	}

	/* L'intitulé est retiré de l'écran, pas du document : « display: none »
	   le retirerait aussi aux lecteurs d'écran, et chaque lien du rail se
	   réduirait alors à une icône sans nom. */
	.epc-rail__texte {
		position: absolute;
		width: 1px;
		height: 1px;
		margin: -1px;
		padding: 0;
		border: 0;
		overflow: hidden;
		clip: rect( 1px, 1px, 1px, 1px );
		clip-path: inset( 50% );
		white-space: nowrap;
	}

	.epc-rail__nav {
		flex: 1 1 auto;
		min-width: 0;
		min-height: auto;
		margin-top: 0;
		overflow: visible;
	}

	.epc-rail__nav ul {
		flex-direction: row;
		justify-content: space-around;
	}

	.epc-rail__nav ul li {
		min-width: 0;
	}

	/* --- Ce qui sort de la barre ------------------------------------------ */

	/* Sur téléphone la boîte redevient une boîte : un panneau posé au-dessus
	   de la barre, fermé tant qu'on n'a pas touché « Plus ». */
	.epc-rail__reste {
		display: none;
		position: fixed;
		right: var(--epc-espace-2);
		bottom: calc( 62px + env( safe-area-inset-bottom, 0px ) );
		left: var(--epc-espace-2);
		z-index: 60;
		flex-direction: column;
		gap: var(--epc-espace-1);
		max-height: 70vh;
		padding: var(--epc-espace-3);
		border: 1px solid var(--epc-trait);
		border-radius: var(--epc-rayon);
		background: var(--epc-rail);
		box-shadow: var(--epc-ombre-haute);
		overflow-y: auto;
	}

	.epc-rail__reste.est-ouvert {
		display: flex;
	}

	/* Dans le panneau il y a la place d'écrire : les intitulés reviennent,
	   sans quoi on aurait une grille d'icônes muettes.

	   L'opacité aussi : hors du rail déplié, un intitulé est transparent et
	   sourd aux clics. Le retirer du masquage ne suffisait pas, et le panneau
	   ne montrait que des icônes. */
	.epc-rail__reste .epc-rail__texte {
		position: static;
		width: auto;
		height: auto;
		margin: 0;
		clip: auto;
		clip-path: none;
		white-space: normal;
		opacity: 1;
		pointer-events: auto;
	}

	.epc-rail__reste .epc-rail__separateur__titre {
		opacity: 1;
	}

	.epc-rail__reste .epc-rail__nav ul {
		flex-direction: column;
		justify-content: flex-start;
	}

	.epc-rail__separateur {
		flex-direction: row;
		align-items: center;
		gap: var(--epc-espace-2);
		margin: var(--epc-espace-2) 0 var(--epc-espace-1);
	}

	.epc-rail__separateur__trait {
		flex: 1 1 auto;
		width: auto;
		height: 1px;
		margin-left: 0;
	}

	.epc-rail__separateur__titre {
		flex: 0 0 auto;
	}

	.epc-moi-panneau {
		left: var(--epc-espace-2);
		right: var(--epc-espace-2);
		bottom: calc( 62px + env( safe-area-inset-bottom, 0px ) );
	}

	.epc-rail__pied {
		flex-direction: column;
		margin-top: var(--epc-espace-2);
		padding-top: var(--epc-espace-2);
		padding-left: 0;
		border-top: 1px solid var(--epc-trait);
		border-left: none;
	}

	/* Le bouton « Plus » est une cible de la barre comme les autres. */
	.epc-rail__plus {
		display: flex;
		flex: 0 0 auto;
		align-items: center;
		justify-content: center;
		padding: 0;
		border: 0;
		border-radius: var(--epc-rayon-petit);
		background: none;
		color: var(--epc-encre-douce);
		cursor: pointer;
	}

	.epc-rail__plus[aria-expanded="true"] {
		color: var(--epc-accent);
		background: var(--epc-accent-doux);
	}

	.epc-cadre {
		margin-left: 0;
		padding-bottom: calc( 62px + env( safe-area-inset-bottom, 0px ) );
	}

	.epc-barre {
		padding: var(--epc-espace-3) var(--epc-espace-4);
	}

	.epc-principal {
		padding: var(--epc-espace-5) var(--epc-espace-4) var(--epc-espace-6);
	}

	.epc-pied {
		padding: var(--epc-espace-4) var(--epc-espace-4) var(--epc-espace-5);
	}
}

/* Le mouvement de dépliage se coupe pour qui y est sensible. */
@media (prefers-reduced-motion: reduce) {
	.epc-rail,
	.epc-rail__texte,
	.epc-rail__pastille,
	.epc-rail__bascule .epc-icone {
		transition: none;
	}
}

/* ==========================================================================
   PROTECTION DES DONNÉES : NOTICE, MES DONNÉES, MINORITÉ
   ========================================================================== */

/* La notice s'annonce sans barrer la route : elle se lit, elle ne se subit pas. */
.epc-notice {
	max-width: 64rem;
	margin: var(--epc-espace-5) auto 0;
	padding: var(--epc-espace-5) var(--epc-espace-6);
	border: 1px solid var(--epc-accent);
	border-radius: var(--epc-rayon);
	background: var(--epc-accent-doux);
}

.epc-notice h2 {
	margin: 0 0 var(--epc-espace-2);
	font-size: 1.15rem;
}

.epc-notice__chapeau {
	margin: 0 0 var(--epc-espace-4);
	color: var(--epc-encre-douce);
	font-size: 0.9rem;
}

.epc-notice__liste {
	display: grid;
	grid-template-columns: minmax( 9rem, 14rem ) 1fr;
	gap: var(--epc-espace-2) var(--epc-espace-4);
	margin: 0 0 var(--epc-espace-4);
	font-size: 0.93rem;
}

.epc-notice__liste dt {
	font-weight: 600;
}

.epc-notice__liste dd {
	margin: 0;
	color: var(--epc-encre-douce);
}

/* --- Mes données ----------------------------------------------------------- */

.epc-mes-donnees__intro {
	margin: 0 0 var(--epc-espace-4);
	color: var(--epc-encre-douce);
	font-size: 0.93rem;
}

.epc-mes-donnees__liste {
	display: grid;
	grid-template-columns: minmax( 9rem, 13rem ) 1fr;
	gap: var(--epc-espace-2) var(--epc-espace-4);
	margin: 0 0 var(--epc-espace-4);
	font-size: 0.93rem;
}

.epc-mes-donnees__liste dt {
	font-weight: 600;
}

.epc-mes-donnees__liste dd {
	margin: 0;
	min-width: 0;
	color: var(--epc-encre-douce);
	overflow-wrap: anywhere;
}

/* Une colonne de neuf rem plus une valeur qui ne sait pas rétrécir, et la
   page entière débordait. Sur téléphone, l'intitulé passe au-dessus. */
@media (max-width: 48rem) {
	.epc-mes-donnees__liste {
		grid-template-columns: 1fr;
		gap: var(--epc-espace-1);
	}

	.epc-mes-donnees__liste dd {
		margin-bottom: var(--epc-espace-2);
	}
}

.epc-mes-donnees__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--epc-espace-3);
	margin-bottom: var(--epc-espace-4);
}

/* Replié : demander l'effacement de sa fiche est un geste rare, qui n'a pas à
   se présenter à chaque visite. */
.epc-mes-donnees__effacement {
	padding-top: var(--epc-espace-4);
	border-top: 1px solid var(--epc-trait);
	font-size: 0.93rem;
}

.epc-mes-donnees__effacement > summary {
	color: var(--epc-encre-douce);
	cursor: pointer;
}

.epc-mes-donnees__effacement > summary:focus-visible {
	outline: 2px solid var(--epc-accent);
	outline-offset: 2px;
}

.epc-mes-donnees__effacement p {
	margin: var(--epc-espace-3) 0;
	color: var(--epc-encre-douce);
}

.epc-mes-donnees__effacement form {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: var(--epc-espace-3);
}

.epc-mes-donnees__effacement .epc-champ {
	flex: 1 1 16rem;
}

.epc-mes-donnees__effacement input[type="text"] {
	width: 100%;
	min-height: 40px;
	padding: 6px 10px;
	border: 1px solid var(--epc-contour);
	border-radius: var(--epc-rayon-petit);
	background: var(--epc-fond);
	color: inherit;
	font: inherit;
	font-size: 0.9rem;
}

/* --- Minorité -------------------------------------------------------------- */

.epc-minorite {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--epc-espace-2) var(--epc-espace-4);
	margin-bottom: var(--epc-espace-4);
	padding-bottom: var(--epc-espace-4);
	border-bottom: 1px solid var(--epc-trait);
	font-size: 0.9rem;
}

.epc-minorite.est-mineur {
	padding: var(--epc-espace-3);
	border: 1px solid var(--epc-attention);
	border-radius: var(--epc-rayon-petit);
	background: var(--epc-attention-doux);
}

.epc-minorite__rappel {
	flex: 1 1 100%;
	margin: 0;
	color: var(--epc-attention);
	font-weight: 600;
}

/* ==========================================================================
   CATALOGUE DES SERVICES
   ========================================================================== */

.epc-familles {
	display: flex;
	flex-direction: column;
	gap: var(--epc-espace-2);
	margin: var(--epc-espace-4) 0;
	padding: 0;
	list-style: none;
}

.epc-famille {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--epc-espace-3);
}

.epc-famille__nom {
	flex: 1 1 14rem;
	max-width: 22rem;
	min-height: 40px;
	padding: 6px 10px;
	border: 1px solid var(--epc-contour);
	border-radius: var(--epc-rayon-petit);
	background: var(--epc-fond);
	color: inherit;
	font: inherit;
	font-size: 0.92rem;
}

.epc-famille__nom:focus {
	outline: 2px solid var(--epc-accent);
	outline-offset: 1px;
	border-color: var(--epc-accent);
}

.epc-famille__compte {
	color: var(--epc-encre-douce);
	font-size: 0.82rem;
	font-variant-numeric: tabular-nums;
}

.epc-familles__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--epc-espace-3);
	margin-bottom: var(--epc-espace-3);
}

/* --- Un service ------------------------------------------------------------ */

.epc-services-liste {
	display: flex;
	flex-direction: column;
	gap: var(--epc-espace-2);
	margin: 0 0 var(--epc-espace-4);
	padding: 0;
	list-style: none;
}

/* Deux colonnes : à gauche ce que le service est, à droite ce qu'on y change.
   Mélangés, le nombre de créneaux se retrouvait coincé entre deux commandes. */
.epc-service {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--epc-espace-3) var(--epc-espace-5);
	padding: var(--epc-espace-3) var(--epc-espace-4);
	border: 1px solid var(--epc-trait);
	border-radius: var(--epc-rayon);
	background: var(--epc-fond);
}

/* Un service qu'on ne propose plus reste lisible, mais s'efface : il n'a plus
   à retenir l'attention, sans disparaître pour autant. */
.epc-service.est-inactif {
	background: var(--epc-fond-doux);
}

.epc-service.est-inactif .epc-service__nom {
	color: var(--epc-encre-douce);
	font-style: italic;
}

.epc-service__infos {
	flex: 1 1 20rem;
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

/* Le nom se lit comme un titre, et s'édite au clic. Les deux champs partagent
   le même retrait négatif pour que leur texte s'aligne sur celui de l'usage,
   malgré le rembourrage qu'un champ de saisie porte toujours.

   Deux classes dans le sélecteur, et ce n'est pas un excès : « epc-case-editable »
   est déclaré plus bas dans la feuille, avec une hauteur minimale de 38 px faite
   pour un champ isolé. À force égale, c'est lui qui l'emporterait, et les deux
   lignes s'écarteraient. */
.epc-service__infos .epc-service__nom,
.epc-service__infos .epc-service__description {
	width: 100%;
	min-height: 0;
	margin-left: -6px;
	padding: 3px 6px;
}

.epc-service__infos .epc-service__nom {
	font-size: 1.02rem;
	font-weight: 600;
}

.epc-service__infos .epc-service__description {
	font-size: 0.9rem;
	color: var(--epc-encre-douce);
}

.epc-service__usage {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: var(--epc-espace-1);
	margin: 2px 0 0;
	color: var(--epc-encre-douce);
	font-size: 0.82rem;
	font-variant-numeric: tabular-nums;
}

/* Les commandes sur une seule rangée, calées en bas : leurs cases s'alignent
   ainsi d'un service à l'autre, quelle que soit la longueur de la description. */
.epc-service__reglages {
	flex: 0 0 auto;
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: var(--epc-espace-3);
}

.epc-service__reglage {
	display: flex;
	flex-direction: column;
	gap: 3px;
}

/* Le même intitulé au-dessus de chaque commande. Seule la charge en avait un
   auparavant : un mot isolé dans une rangée alignée se lit comme une faute. */
.epc-service__etiquette {
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--epc-encre-douce);
}

.epc-service__categorie {
	min-width: 9rem;
}

.epc-service__niveau {
	width: 4rem;
	padding: 3px 4px;
	border: 1px solid var(--epc-trait);
	border-radius: var(--epc-rayon-petit);
	background: var(--epc-fond);
	color: var(--epc-encre);
	font: inherit;
	font-variant-numeric: tabular-nums;
	text-align: center;
}

.epc-service__niveau:focus-visible {
	outline: 2px solid var(--epc-accent);
	outline-offset: 1px;
}

/* La case à cocher n'a pas d'intitulé au-dessus : le sien est à côté. On la
   descend donc à la hauteur des cases voisines plutôt que de la laisser
   flotter au niveau de leurs étiquettes. */
.epc-service__actif {
	padding-bottom: 4px;
}

/* Écran étroit : les commandes passent sous les informations, sur toute la
   largeur, au lieu de comprimer les deux colonnes l'une contre l'autre. */
@media (max-width: 44rem) {
	.epc-service__reglages {
		width: 100%;
		justify-content: flex-start;
	}
}

.epc-ajout-service {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: var(--epc-espace-3);
}

.epc-ajout-service .epc-champ {
	flex: 1 1 16rem;
	max-width: 24rem;
}

.epc-ajout-service input[type="text"] {
	width: 100%;
	min-height: 40px;
	padding: 6px 10px;
	border: 1px solid var(--epc-contour);
	border-radius: var(--epc-rayon-petit);
	background: var(--epc-fond);
	color: inherit;
	font: inherit;
	font-size: 0.9rem;
}

.epc-ajout-service input[type="text"]:focus {
	outline: 2px solid var(--epc-accent);
	outline-offset: 1px;
	border-color: var(--epc-accent);
}

/* ==========================================================================
   ANNUAIRE : AJOUTER ET RENOMMER
   ========================================================================== */

/* ====================================== Ajouter, partout de la même façon == */

/* Un formulaire d'ajout déplié en permanence sous chaque liste pesait autant
   qu'une ligne de contenu et disait « saisis quelque chose » à qui venait
   seulement lire. Replié derrière un plus, il ne prend qu'une ligne discrète,
   et le geste reste à un clic.

   « details » plutôt qu'un bouton et du script : l'ouverture et la fermeture
   sont natives, elles marchent sans JavaScript, et le lecteur d'écran annonce
   l'état sans qu'on ait à le lui dire. */
.epc-ajout {
	margin-top: var(--epc-espace-3);
}

.epc-ajout > summary {
	display: inline-flex;
	align-items: center;
	gap: var(--epc-espace-2);
	padding: var(--epc-espace-2) var(--epc-espace-3);
	border: 1px dashed var(--epc-trait);
	border-radius: 999px;
	color: var(--epc-accent);
	font-size: 0.84rem;
	font-weight: 600;
	cursor: pointer;
	list-style: none;
	transition: border-color 0.12s ease, background-color 0.12s ease;
}

/* Le triangle par défaut des deux moteurs : on met le plus à la place. */
.epc-ajout > summary::-webkit-details-marker {
	display: none;
}

.epc-ajout > summary::marker {
	content: '';
}

.epc-ajout > summary:hover {
	border-color: var(--epc-accent);
	background: var(--epc-accent-doux);
}

.epc-ajout > summary:focus-visible {
	outline: 2px solid var(--epc-accent);
	outline-offset: 2px;
}

.epc-ajout__plus {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.15rem;
	height: 1.15rem;
	border-radius: 999px;
	background: var(--epc-accent);
	color: var(--epc-sur-accent);
	font-size: 0.9rem;
	font-weight: 700;
	line-height: 1;
	transition: transform 0.15s ease;
}

/* Ouvert, le plus devient une croix : c'est le même bouton qui referme. */
.epc-ajout[open] > summary .epc-ajout__plus {
	transform: rotate( 45deg );
}

.epc-ajout[open] > summary {
	margin-bottom: var(--epc-espace-2);
	border-style: solid;
	border-color: var(--epc-accent);
	background: var(--epc-accent-doux);
}

/* Le formulaire lui-même : une boîte sobre, sous le bouton. */
/* Une variante resserrée, pour les ajouts posés au pied d'une colonne
   étroite : la colonne des petits, un moment de séance. */
.epc-ajout--serre > summary {
	padding: 3px var(--epc-espace-2);
	font-size: 0.78rem;
}

.epc-ajout--serre .epc-ajout__plus {
	width: 1rem;
	height: 1rem;
	font-size: 0.8rem;
}

.epc-ajout--serre .epc-ajout__corps {
	padding: var(--epc-espace-2);
	gap: var(--epc-espace-2);
}

.epc-ajout__corps {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: var(--epc-espace-3);
	padding: var(--epc-espace-3);
	border: 1px solid var(--epc-trait);
	border-radius: var(--epc-rayon);
	background: var(--epc-fond-doux);
}

.epc-ajout__corps label {
	display: flex;
	flex: 1 1 10rem;
	flex-direction: column;
	gap: 3px;
	min-width: 0;
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--epc-encre-douce);
}

.epc-ajout__corps input[type="text"],
.epc-ajout__corps input[type="number"],
.epc-ajout__corps input[type="url"],
.epc-ajout__corps select {
	width: 100%;
	min-width: 0;
	padding: var(--epc-espace-2);
	border: 1px solid var(--epc-trait);
	border-radius: var(--epc-rayon-petit);
	background: var(--epc-fond);
	color: var(--epc-encre);
	font: inherit;
	font-size: 0.88rem;
	font-weight: 400;
	letter-spacing: 0;
	text-transform: none;
}

.epc-ajout__corps button[type="submit"] {
	flex: 0 0 auto;
}

@media (prefers-reduced-motion: reduce) {
	.epc-ajout > summary,
	.epc-ajout__plus {
		transition: none;
	}
}

.epc-ajout-volontaire {
	margin-bottom: var(--epc-espace-4);
	border: 1px solid var(--epc-trait);
	border-radius: var(--epc-rayon);
	background: var(--epc-fond);
}

.epc-ajout-volontaire > summary {
	padding: var(--epc-espace-3) var(--epc-espace-4);
	color: var(--epc-accent);
	font-size: 0.9rem;
	font-weight: 600;
	cursor: pointer;
}

.epc-ajout-volontaire > summary:focus-visible {
	outline: 2px solid var(--epc-accent);
	outline-offset: -2px;
	border-radius: var(--epc-rayon);
}

.epc-ajout-volontaire[open] > summary {
	border-bottom: 1px solid var(--epc-trait);
}

.epc-ajout-volontaire form {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: var(--epc-espace-3);
	padding: var(--epc-espace-4) var(--epc-espace-4) 0;
}

.epc-ajout-volontaire .epc-conseil {
	padding: var(--epc-espace-2) var(--epc-espace-4) var(--epc-espace-4);
}

/* Chaque champ dit à quoi il sert, sous lui. Demander un numéro sans dire
   pourquoi est la façon la plus sûre de le collecter pour rien. */
.epc-identite .epc-champ small {
	display: block;
	margin-top: 3px;
	color: var(--epc-encre-douce);
	font-size: 0.76rem;
	line-height: 1.4;
}

/* --- La note libre, le champ le plus risqué du modèle --------------------- */

.epc-note-libre {
	margin-bottom: var(--epc-espace-4);
	padding-bottom: var(--epc-espace-4);
	border-bottom: 1px solid var(--epc-trait);
}

.epc-note-libre__champ {
	resize: vertical;
	min-height: 3.2rem;
	line-height: 1.5;
}

.epc-note-libre__avertissement {
	display: block;
	margin-top: 4px;
	color: var(--epc-encre-douce);
	font-size: 0.78rem;
	line-height: 1.45;
}

.epc-note-libre__avertissement strong {
	color: var(--epc-attention);
}

.epc-note-libre__compteur {
	display: inline-block;
	margin-left: 0.3em;
	font-variant-numeric: tabular-nums;
}

.epc-note-libre.est-pleine .epc-note-libre__compteur {
	color: var(--epc-alerte);
	font-weight: 600;
}

.epc-note-libre.est-pleine .epc-note-libre__champ {
	border-color: var(--epc-alerte);
}

/* Les gestes rares ferment la fiche, séparés du reste par un trait : on ne
   doit pas les croiser en cherchant à cocher un rôle. */
.epc-fiche-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--epc-espace-3);
	margin-top: var(--epc-espace-5);
	padding-top: var(--epc-espace-4);
	border-top: 1px solid var(--epc-trait);
}

.epc-fiche-actions .epc-conseil {
	flex: 1 1 16rem;
	margin: 0;
}

/* Discret, mais rouge : l'action ne se rattrape pas, elle n'a pas à ressembler
   à un lien ordinaire. */
.epc-supprimer-fiche {
	color: var(--epc-alerte);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.epc-supprimer-fiche:hover,
.epc-supprimer-fiche:focus-visible {
	background: var(--epc-alerte-doux);
	color: var(--epc-alerte);
}

/* L'identité ouvre la fiche : c'est ce qu'on vient corriger, et cela donne
   au passage le contexte des rôles qui suivent. */
.epc-identite {
	display: flex;
	flex-wrap: wrap;
	gap: var(--epc-espace-3);
	margin-bottom: var(--epc-espace-4);
	padding-bottom: var(--epc-espace-4);
	border-bottom: 1px solid var(--epc-trait);
}

.epc-identite .epc-champ {
	flex: 1 1 11rem;
}

.epc-ajout-volontaire input[type="text"],
.epc-ajout-volontaire input[type="email"],
.epc-identite__champ {
	width: 100%;
	min-height: 40px;
	padding: 6px 10px;
	border: 1px solid var(--epc-contour);
	border-radius: var(--epc-rayon-petit);
	background: var(--epc-fond);
	color: inherit;
	font: inherit;
	font-size: 0.9rem;
}

.epc-ajout-volontaire input[type="text"]:focus,
.epc-ajout-volontaire input[type="email"]:focus,
.epc-identite__champ:focus {
	outline: 2px solid var(--epc-accent);
	outline-offset: 1px;
	border-color: var(--epc-accent);
}

/* ==========================================================================
   DÉROULÉ : POIGNÉES DE DÉPLACEMENT, ET PRÉSENTATION FIGÉE
   ========================================================================== */

/* La poignée occupe toute la hauteur de la tuile : on attrape la tuile là où
   on la regarde, sans viser un petit carré. Le numéro se décale d'autant. */
.epc-deroule.est-editable .epc-etape {
	padding-left: calc( var(--epc-espace-7) + 24px );
}

.epc-deroule.est-editable .epc-etape::before {
	left: calc( var(--epc-espace-3) + 24px );
}

.epc-etape__poignee {
	position: absolute;
	top: 0;
	left: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 100%;
	padding: 0;
	border: 0;
	border-radius: var(--epc-rayon) 0 0 var(--epc-rayon);
	background: none;
	color: var(--epc-contour);
	cursor: grab;
}

.epc-etape__poignee:hover,
.epc-etape__poignee:focus-visible {
	background: var(--epc-fond-doux);
	color: var(--epc-accent);
}

.epc-etape__poignee:focus-visible {
	outline: 2px solid var(--epc-accent);
	outline-offset: -2px;
}

.epc-etape__poignee:active {
	cursor: grabbing;
}

.epc-etape__poignee .epc-icone {
	width: 18px;
	height: 18px;
}

/* La tuile en cours de déplacement s'efface sans disparaître : elle garde sa
   place dans la liste, donc on voit où elle va se poser. */
.epc-etape.est-saisie {
	opacity: 0.45;
	border-color: var(--epc-accent);
}

.epc-etape.vient-de-bouger {
	border-color: var(--epc-accent);
	box-shadow: 0 0 0 2px var(--epc-accent-doux);
}

/* --- Le déroulé validé ----------------------------------------------------- */

/* Le déroulé, second onglet d'un dimanche. Il ne porte plus de liseré ni de
   trait de séparation : l'onglet actif dit déjà où l'on se trouve, et un
   encadrement de plus enfermerait le contenu dans une troisième boîte. */
.epc-deroule-panneau {
	margin-top: var(--epc-espace-4);
}

/* --- Le bandeau du dimanche choisi ------------------------------------------

   Le calendrier sert à choisir. Une fois le choix fait, il n'occupe plus qu'un
   écran au-dessus de ce qu'on prépare : il cède la place à cette ligne, qui dit
   où l'on est, laisse passer au dimanche voisin, et le rouvre d'un clic. */

.epc-bandeau-dimanche {
	display: flex;
	align-items: center;
	gap: var(--epc-espace-2);
	margin-bottom: var(--epc-espace-4);
	padding: var(--epc-espace-2);
	border: 1px solid var(--epc-trait);
	border-radius: var(--epc-rayon);
	background: var(--epc-fond-doux);
}

.epc-bandeau-dimanche__date {
	flex: 1 1 auto;
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: center;
	gap: var(--epc-espace-2);
	min-width: 0;
	padding: var(--epc-espace-2) var(--epc-espace-3);
	border: none;
	border-radius: var(--epc-rayon-petit);
	background: none;
	color: inherit;
	font: inherit;
	font-size: 1.02rem;
	font-weight: 600;
	cursor: pointer;
}

.epc-bandeau-dimanche__date::first-letter {
	text-transform: uppercase;
}

.epc-bandeau-dimanche__date:hover {
	background: var(--epc-accent-doux);
}

.epc-bandeau-dimanche__date:focus-visible {
	outline: 2px solid var(--epc-accent);
	outline-offset: -2px;
}

/* L'indice dit que la ligne s'ouvre : sans lui, rien ne signale qu'on peut
   revenir au calendrier. */
.epc-bandeau-dimanche__indice {
	font-size: 0.78rem;
	font-weight: 400;
	letter-spacing: 0.02em;
	color: var(--epc-encre-douce);
}

.epc-bandeau-dimanche .epc-fleche:disabled {
	opacity: 0.35;
	cursor: default;
}

.epc-deroule-fige__bandeau {
	display: flex;
	align-items: center;
	gap: var(--epc-espace-2);
	margin: 0 0 var(--epc-espace-4);
	padding: var(--epc-espace-3) var(--epc-espace-4);
	border: 1px solid var(--epc-accent);
	border-radius: var(--epc-rayon);
	background: var(--epc-accent-doux);
	color: var(--epc-accent);
	font-size: 0.9rem;
	font-weight: 600;
}

.epc-deroule-fige__bandeau .epc-icone {
	flex: 0 0 auto;
	width: 18px;
	height: 18px;
}

.epc-deroule-fige {
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: fige;
	border: 1px solid var(--epc-trait);
	border-radius: var(--epc-rayon);
	background: var(--epc-fond);
	overflow: hidden;
}

/* Une grille plutôt que des marges : le rang, le corps et le nom s'alignent
   d'une ligne à l'autre, ce qui rend la feuille lisible d'un coup d'oeil. */
.epc-fige {
	display: grid;
	grid-template-columns: 1.75rem 1fr auto;
	align-items: baseline;
	gap: var(--epc-espace-3);
	padding: var(--epc-espace-3) var(--epc-espace-4);
	counter-increment: fige;
	border-top: 1px solid var(--epc-trait);
}

.epc-fige:first-child {
	border-top: 0;
}

.epc-fige--chant {
	background: var(--epc-fond-doux);
}

.epc-fige__rang::before {
	content: counter( fige );
	color: var(--epc-encre-douce);
	font-size: 0.78rem;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

.epc-fige__corps {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.epc-fige__titre {
	font-weight: 600;
	line-height: 1.35;
}

.epc-fige--chant .epc-fige__titre {
	color: var(--epc-accent);
}

.epc-fige__precision,
.epc-fige__note {
	color: var(--epc-encre-douce);
	font-size: 0.82rem;
}

.epc-fige__note::before {
	content: '';
	display: inline-block;
	width: 3px;
	height: 3px;
	margin: 0 6px 3px 0;
	border-radius: 50%;
	background: currentColor;
}

.epc-fige__qui {
	color: var(--epc-encre);
	font-size: 0.88rem;
	font-weight: 600;
	text-align: right;
	white-space: nowrap;
}

.epc-validation {
	margin-top: var(--epc-espace-5);
	padding-top: var(--epc-espace-4);
	border-top: 1px solid var(--epc-trait);
}

.epc-validation .epc-conseil {
	margin-top: var(--epc-espace-2);
}

/* Sur écran étroit, le nom passe sous l'intitulé plutôt que de comprimer les
   deux colonnes en une bouillie. */
@media (max-width: 34rem) {
	.epc-fige {
		grid-template-columns: 1.75rem 1fr;
	}

	.epc-fige__qui {
		grid-column: 2;
		text-align: left;
		font-size: 0.82rem;
	}
}

/* ==========================================================================
   MES RÔLES : LE DÉCLARÉ D'ABORD, LE RESTE DERRIÈRE « PLUS »
   ========================================================================== */

/* Les réglages n'ont plus de fond : c'était un bloc coloré qui pesait plus
   lourd que le rôle qu'il précisait. Un simple retrait et un filet suffisent. */
.epc-role__reglages {
	margin: var(--epc-espace-2) 0 var(--epc-espace-1) 30px;
	padding: 0 0 0 var(--epc-espace-4);
	border-left: 2px solid var(--epc-trait);
	background: none;
}

.epc-role.est-cochee .epc-role__reglages {
	border-left-color: var(--epc-accent-doux);
}

/* Un rôle non coché est une possibilité, pas une information : il reste
   lisible mais s'efface. */
.epc-role:not(.est-cochee) {
	color: var(--epc-encre-douce);
}

.epc-role:not(.est-cochee) .epc-role__libelle {
	color: var(--epc-encre-douce);
	font-weight: 400;
	opacity: 0.85;
}

.epc-role.est-enregistree .epc-role__reglages,
.epc-role.est-en-erreur .epc-role__reglages {
	background: none;
}

.epc-role.est-enregistree .epc-role__reglages {
	border-left-color: var(--epc-ok);
}

.epc-role.est-en-erreur .epc-role__reglages {
	border-left-color: var(--epc-alerte);
	box-shadow: none;
}

/* --- Le dépliant « voir les autres rôles » --------------------------------- */

.epc-plus {
	margin-top: var(--epc-espace-5);
	padding-top: var(--epc-espace-4);
	border-top: 1px solid var(--epc-trait);
}

.epc-plus__bouton {
	display: flex;
	align-items: center;
	gap: var(--epc-espace-2);
	padding: 0;
	border: none;
	background: none;
	color: var(--epc-accent);
	font: inherit;
	font-weight: 600;
	cursor: pointer;
}

.epc-plus__signe {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	border: 1px solid currentColor;
	border-radius: 50%;
	font-size: 1rem;
	line-height: 1;
	transition: transform 0.15s ease;
}

.epc-plus__bouton.est-ouvert .epc-plus__signe {
	transform: rotate( 45deg );
}

.epc-autres {
	margin-top: var(--epc-espace-4);
	opacity: 0.9;
}

.epc-autres__intro {
	margin: 0 0 var(--epc-espace-3);
	color: var(--epc-encre-douce);
	font-size: 0.88rem;
}

/* ==========================================================================
   CHOIX D'UNE PÉRIODE D'ABSENCE
   ========================================================================== */

.epc-choix-dates {
	max-width: min( 22rem, 100% );
	padding: var(--epc-espace-4);
	border: 1px solid var(--epc-trait);
	border-radius: var(--epc-rayon);
	background: var(--epc-fond);
}

.epc-choix-dates__tete {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--epc-espace-2);
	margin-bottom: var(--epc-espace-3);
}

.epc-choix-dates__titre {
	flex: 1 1 auto;
	font-weight: 700;
	text-align: center;
}

.epc-choix-dates__titre::first-letter {
	text-transform: uppercase;
}

.epc-jour--choix {
	min-height: 40px;
	font-size: 0.88rem;
}

button.epc-jour--choix {
	border-color: transparent;
	background: transparent;
	color: var(--epc-encre);
	font-weight: 500;
	cursor: pointer;
}

button.epc-jour--choix:hover {
	background: var(--epc-fond-doux);
}

button.epc-jour--choix.est-dedans {
	border-radius: 0;
	background: var(--epc-accent-doux);
	color: var(--epc-accent);
}

button.epc-jour--choix.est-bord {
	background: var(--epc-accent);
	border-color: var(--epc-accent);
	font-weight: 700;
}

button.epc-jour--choix.est-bord .epc-jour__numero {
	color: var(--epc-sur-accent);
}

/* Jour déjà signalé absent. Il reste cliquable : on peut vouloir allonger une
   période. La teinte le dit, le soulignement le redit pour qui ne la voit pas,
   et le résumé prévient si le choix en cours recoupe une période existante. */
.epc-jour--choix.est-absente {
	background: var(--epc-attention-doux);
	border-color: var(--epc-attention);
	text-decoration: underline;
	text-decoration-color: var(--epc-attention);
	text-underline-offset: 2px;
}

.epc-jour--choix.est-absente .epc-jour__numero {
	color: var(--epc-attention);
}

/* La sélection en cours l'emporte sur la teinte des absences existantes :
   sinon on ne verrait plus ce qu'on est en train de choisir. */
button.epc-jour--choix.est-absente.est-bord {
	background: var(--epc-accent);
	border-color: var(--epc-accent);
	text-decoration: none;
}

button.epc-jour--choix.est-absente.est-bord .epc-jour__numero {
	color: var(--epc-sur-accent);
}

button.epc-jour--choix.est-absente.est-dedans {
	background: var(--epc-accent-doux);
	text-decoration: none;
}

button.epc-jour--choix.est-absente.est-dedans .epc-jour__numero {
	color: var(--epc-accent);
}

.epc-choix-dates__resume {
	margin: var(--epc-espace-3) 0 0;
	padding-top: var(--epc-espace-3);
	border-top: 1px solid var(--epc-trait);
	color: var(--epc-encre-douce);
	font-size: 0.85rem;
}

.epc-ajout-absence {
	flex-direction: column;
	align-items: stretch;
	background: none;
	padding: 0;
	margin-top: var(--epc-espace-5);
}

.epc-champs-dates {
	display: flex;
	flex-wrap: wrap;
	gap: var(--epc-espace-3);
}

.epc-champ--motif {
	max-width: 22rem;
}

.epc-ajout-absence .epc-bouton {
	align-self: flex-start;
}

/* ==========================================================================
   RÉPERTOIRE DE CHANTS EN TABLEAU
   ========================================================================== */

/* Le débordement de ce conteneur est réglé plus bas, en un seul endroit : une
   déclaration ici en plus, contredite ensuite, est précisément ce qui rend une
   feuille de style impossible à relire. */
.epc-tableau-defilant {
	border: 1px solid var(--epc-trait);
	border-radius: var(--epc-rayon);
	background: var(--epc-fond);
	box-shadow: var(--epc-ombre);
}

/* ============================ Un tableau qui se déplie en fiches =========== */

/* Sur un téléphone, un tableau de six cents pixels ne se lit pas : il fallait
   le faire glisser de côté pour voir la fin du titre, et le titre est
   justement ce qu'on cherche. Chaque ligne devient une fiche, chaque cellule
   une ligne « intitulé, valeur ». L'intitulé vient de data-libelle, parce
   qu'en fiches la ligne d'en-tête n'est plus au-dessus de rien.

   Les rôles de table sont retirés avec la mise en forme : un tableau dont les
   cellules sont en « block » ment aux lecteurs d'écran, qui annoncent des
   lignes et des colonnes qui n'existent plus. */
@media (max-width: 48rem) {
	.epc-tableau-defilant:has( .epc-tableau-en-fiches ) {
		border: 0;
		background: none;
		box-shadow: none;
	}

	.epc-tableau-en-fiches,
	.epc-tableau-en-fiches tbody,
	.epc-tableau-en-fiches tr,
	.epc-tableau-en-fiches td,
	.epc-tableau-en-fiches th {
		display: block;
		width: auto;
	}

	.epc-tableau-en-fiches thead {
		position: absolute;
		width: 1px;
		height: 1px;
		margin: -1px;
		padding: 0;
		border: 0;
		overflow: hidden;
		clip: rect( 1px, 1px, 1px, 1px );
		clip-path: inset( 50% );
	}

	.epc-tableau-en-fiches tbody tr {
		margin-bottom: var(--epc-espace-3);
		padding: var(--epc-espace-2) var(--epc-espace-3);
		border: 1px solid var(--epc-trait);
		border-radius: var(--epc-rayon);
		background: var(--epc-fond);
		box-shadow: var(--epc-ombre);
	}

	.epc-tableau-en-fiches tbody tr:hover {
		background: var(--epc-fond);
	}

	/* Une cellule d'en-tête de ligne est le titre de la fiche : la date d'un
	   dimanche, par exemple. Elle n'a pas d'intitulé à porter. Une cellule
	   ordinaire garde le sien, même en première position : en mode édition
	   c'est une saisie, et une saisie sans nom ne se remplit pas. */
	.epc-tableau-en-fiches tbody tr > th:first-child {
		margin-bottom: var(--epc-espace-2);
		padding: 0 0 var(--epc-espace-2);
		border-bottom: 1px solid var(--epc-trait);
		font-size: 1rem;
		font-weight: 700;
		text-align: left;
	}

	.epc-tableau-en-fiches tbody tr > td:first-child {
		font-weight: 600;
	}

	.epc-tableau-en-fiches td {
		display: flex;
		align-items: baseline;
		gap: var(--epc-espace-2);
		padding: 2px 0;
		border-bottom: none;
		min-height: 1.9rem;
	}

	.epc-tableau-en-fiches td[data-libelle]::before {
		content: attr(data-libelle);
		flex: 0 0 7.5rem;
		color: var(--epc-encre-douce);
		font-size: 0.7rem;
		font-weight: 700;
		letter-spacing: 0.06em;
		text-transform: uppercase;
	}

	/* Sur les écrans les plus étroits, l'intitulé se resserre et la valeur
	   revient à la ligne plutôt que de sortir de la fiche. */
	.epc-tableau-en-fiches td[data-libelle]::before {
		flex: 0 0 6rem;
	}

	.epc-tableau-en-fiches td > span,
	.epc-tableau-en-fiches td > .epc-usage__date {
		min-width: 0;
		overflow-wrap: anywhere;
	}

	/* Une cellule sans intitulé, comme celle du bouton de retrait, n'a pas de
	   colonne vide à sa gauche. */
	.epc-tableau-en-fiches td[data-libelle=""]::before {
		display: none;
	}

	.epc-tableau-en-fiches td[data-libelle=""] {
		justify-content: flex-end;
	}

	.epc-tableau-en-fiches td > input,
	.epc-tableau-en-fiches td > select {
		flex: 1 1 auto;
		min-width: 0;
	}

	/* Les largeurs de colonne n'ont plus de sens une fois la ligne dépliée. */
	.epc-tableau-en-fiches .epc-colonne--titre,
	.epc-tableau-en-fiches .epc-colonne--reference,
	.epc-tableau-en-fiches .epc-colonne--auteur,
	.epc-tableau-en-fiches .epc-colonne--tonalite,
	.epc-tableau-en-fiches .epc-colonne--date,
	.epc-tableau-en-fiches .epc-colonne--actions,
	.epc-tableau-en-fiches .epc-colonne--usage {
		width: auto;
	}

	/* L'intertitre de mois reste une ligne pleine largeur, pas une fiche. */
	.epc-tableau-en-fiches tbody tr.epc-mois-seance {
		margin: var(--epc-espace-4) 0 var(--epc-espace-2);
		padding: 0;
		border: 0;
		background: none;
		box-shadow: none;
	}

	.epc-tableau-en-fiches tbody tr.epc-mois-seance > :first-child {
		margin: 0;
		padding: 0;
		border: 0;
		font-size: 0.78rem;
	}
}

.epc-tableau-chants {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.92rem;
}

.epc-tableau-chants thead th {
	position: sticky;
	top: 0;
	z-index: 1;
	padding: var(--epc-espace-3) var(--epc-espace-4);
	border-bottom: 1px solid var(--epc-trait);
	background: var(--epc-fond-doux);
	color: var(--epc-encre-douce);
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.07em;
	text-align: left;
	text-transform: uppercase;
	white-space: nowrap;
}

.epc-tableau-chants td {
	padding: var(--epc-espace-1) var(--epc-espace-2);
	border-bottom: 1px solid var(--epc-trait);
	vertical-align: middle;
}

.epc-tableau-chants tbody tr:last-child td {
	border-bottom: none;
}

.epc-tableau-chants tbody tr:hover {
	background: var(--epc-fond-doux);
}

.epc-colonne--titre { width: 38%; }
.epc-colonne--reference { width: 14%; }
.epc-colonne--auteur { width: 20%; }
.epc-colonne--tonalite { width: 10%; }
.epc-colonne--date { width: 14%; white-space: nowrap; }
.epc-colonne--actions { width: 4%; text-align: right; }

.epc-chants:not(.est-editable) .epc-tableau-chants td {
	padding: 9px var(--epc-espace-4);
}

.epc-colonne--titre input,
.epc-chants:not(.est-editable) .epc-colonne--titre {
	font-weight: 600;
}

.epc-jamais {
	color: var(--epc-encre-douce);
	font-style: italic;
	opacity: 0.7;
}

/* Une case éditable se lit comme du texte tant qu'on ne la touche pas : un
   tableau de 155 lignes bordé de champs serait illisible. */
.epc-case-editable {
	width: 100%;
	min-height: 38px;
	padding: 6px 8px;
	border: 1px solid transparent;
	border-radius: 6px;
	background: transparent;
	color: inherit;
	font: inherit;
}

.epc-case-editable:hover {
	border-color: var(--epc-trait);
	background: var(--epc-fond);
}

.epc-case-editable:focus {
	border-color: var(--epc-accent);
	background: var(--epc-fond);
	outline: none;
	box-shadow: 0 0 0 3px var(--epc-accent-doux);
}

.epc-chant.est-en-cours { opacity: 0.55; }

.epc-chant.est-enregistree .epc-case-editable:not(:focus) {
	border-color: var(--epc-ok);
}

.epc-chant.est-en-erreur .epc-case-editable:not(:focus) {
	border-color: var(--epc-alerte);
}

.epc-ajout-chant {
	margin-top: var(--epc-espace-6);
	padding: var(--epc-espace-5);
	border: 1px solid var(--epc-trait);
	border-radius: var(--epc-rayon);
	background: var(--epc-fond);
}

.epc-ajout-chant h2 {
	margin-top: 0;
}

.epc-ajout-chant__formulaire {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: var(--epc-espace-3);
}

.epc-ajout-chant__formulaire .epc-champ {
	flex: 1 1 11rem;
}

.epc-ajout-chant__formulaire span {
	display: block;
	margin-bottom: var(--epc-espace-1);
	color: var(--epc-encre-douce);
	font-size: 0.78rem;
	font-weight: 600;
}

.epc-ajout-chant__formulaire input {
	width: 100%;
	padding: 9px 11px;
	border: 1px solid var(--epc-contour);
	border-radius: var(--epc-rayon-petit);
	background: var(--epc-fond);
	color: inherit;
	font: inherit;
}

/* ==========================================================================
   RÉPONDRE À SON CRÉNEAU DEPUIS LE PLANNING
   ========================================================================== */

.epc-creneau {
	flex-wrap: wrap;
	align-items: center;
}

.epc-creneau__reponse {
	display: flex;
	flex-wrap: wrap;
	gap: var(--epc-espace-2);
	width: 100%;
	margin-top: var(--epc-espace-2);
}

.epc-bouton--menu {
	min-height: 38px;
	padding: 7px 14px;
	border: none;
	font-size: 0.85rem;
	cursor: pointer;
}

.epc-creneau.est-en-cours { opacity: 0.55; }

@media (min-width: 34rem) {
	.epc-creneau__reponse {
		width: auto;
		margin-top: 0;
		margin-left: auto;
	}
}


/* --- Ce qui reste du répertoire après le passage en tableau ---------------- */

.epc-chant__reference {
	display: inline-block;
	padding: 2px 8px;
	border-radius: 10px;
	background: var(--epc-accent-doux);
	color: var(--epc-accent);
	font-size: 0.74rem;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

/* ==========================================================================
   DEUX CORRECTIONS DE FOND
   ========================================================================== */

/* 1. « hidden » doit toujours l'emporter.
      L'attribut pose « display: none » avec une spécificité nulle : la moindre
      règle « display: flex » le neutralise sans bruit. C'est ce qui laissait
      voir les réglages des rôles non cochés et les champs de date que le
      calendrier remplace. */
body.epc-espace [hidden] {
	display: none !important;
}

/* 2. Les contrôles natifs doivent suivre NOTRE thème, pas celui du système.
      Sans cette déclaration, un système en sombre rendait les cases à cocher
      en sombre alors que la page était claire. */
:root {
	color-scheme: light;
}

:root[data-theme="sombre"] {
	color-scheme: dark;
}

@media (prefers-color-scheme: dark) {
	:root[data-theme="systeme"] {
		color-scheme: dark;
	}
}

/* Les cases à cocher méritent mieux que le rendu par défaut : plus grandes,
   à la couleur de l'accent, et visiblement vides quand elles le sont. */
body.epc-espace input[type="checkbox"] {
	width: 20px;
	height: 20px;
	accent-color: var(--epc-accent);
	cursor: pointer;
}

/* ==========================================================================
   PARTIE ABSENCES : PLUS COMPACTE
   ========================================================================== */

/*
 * Deux colonnes : le calendrier à gauche, ce qui l'accompagne à droite, collé
 * en haut.
 *
 * En ligne souple, le motif se retrouvait au milieu de la hauteur du
 * calendrier et le bouton tout en haut à droite, séparés par un grand vide.
 * Une grille les empile contre le bord haut, et le bloc perd la moitié de sa
 * hauteur.
 */
.epc-ajout-absence {
	display: grid;
	grid-template-columns: auto minmax( 0, 1fr );
	align-items: start;
	gap: var(--epc-espace-3) var(--epc-espace-4);
	margin-top: var(--epc-espace-3);
}

/* Le calendrier tient la première colonne sur toute la hauteur ; les champs
   et le bouton se rangent dans la seconde. Les champs de date, masqués dès
   que le calendrier est là, ne prennent aucune rangée. */
.epc-ajout-absence > .epc-choix-dates {
	grid-column: 1;
	grid-row: 1 / span 3;
}

.epc-ajout-absence > .epc-bouton {
	justify-self: start;
}

@media (max-width: 40rem) {
	.epc-ajout-absence {
		grid-template-columns: minmax( 0, 1fr );
	}

	.epc-ajout-absence > .epc-choix-dates {
		grid-column: auto;
		grid-row: auto;
	}
}

/* « flex: 0 0 auto » interdisait au calendrier de rétrécir : sur un écran de
   trois cent vingt pixels il gardait sa largeur de contenu et sortait de la
   boîte, malgré la largeur maximale. Il peut maintenant rétrécir, et la
   largeur maximale reste celle qu'on veut sur un écran normal. */
.epc-choix-dates {
	min-width: 0;
	max-width: min( 17.5rem, 100% );
	padding: var(--epc-espace-2) var(--epc-espace-3) var(--epc-espace-3);
}

.epc-choix-dates .epc-jours-semaine span {
	padding: 2px 0;
	font-size: 0.64rem;
}

.epc-choix-dates .epc-jours-semaine,
.epc-choix-dates .epc-grille-mois {
	gap: 2px;
}

/* Trente pixels : c'est en dessous de la cible tactile de quarante-quatre,
   mais un jour du mois n'est jamais seul. On vise une grille, et le doigt se
   corrige d'une case ; garder quarante-quatre ferait un calendrier de trois
   cents pixels de haut pour un geste qu'on fait deux fois l'an. */
.epc-jour--choix {
	min-height: 28px;
	padding: 1px;
	border-radius: 6px;
	font-size: 0.78rem;
}

.epc-choix-dates__tete {
	margin-bottom: var(--epc-espace-2);
}

.epc-choix-dates .epc-fleche {
	width: 30px;
	height: 30px;
	font-size: 0.95rem;
}

.epc-choix-dates__titre {
	font-size: 0.9rem;
}

/* La consigne tient sur une ligne quand la place le permet, et ne se paie
   plus un filet au-dessus d'elle : le calendrier se referme déjà sur son
   propre cadre. */
.epc-choix-dates__resume {
	margin-top: var(--epc-espace-2);
	padding-top: 0;
	border-top: 0;
	font-size: 0.72rem;
	line-height: 1.35;
}

/* --- Le calendrier d'un seul jour ------------------------------------------

   Posé ici, et non plus haut : les deux blocs « .epc-choix-dates » ci-dessus
   ont la même force que « .epc-choix-jour », et celui qui vient en dernier
   l'emporte. Ce calendrier-ci n'est pas encadré dans la page, il flotte. */

/* Le calendrier flotte au-dessus du contenu : réserver sa place sous le champ
   ferait sauter la page de vingt centimètres à chaque ouverture. */
.epc-choix-jour {
	position: absolute;
	top: calc( 100% + var(--epc-espace-1) );
	left: 0;
	z-index: 20;
	width: min( 20rem, calc( 100vw - 2 * var(--epc-espace-4) ) );
	/* Le bloc compact plus haut pose une largeur maximale pour le calendrier
	   encadré des absences. Celui-ci flotte : il fixe la sienne. */
	max-width: none;
	padding: var(--epc-espace-3);
	border: 1px solid var(--epc-trait);
	border-radius: var(--epc-rayon);
	background: var(--epc-fond);
	box-shadow: var(--epc-ombre-haute);
}

/* Deux sortes de dimanches, et il ne faut pas les confondre.

   Celui qui reste à créer est ce que le bouton va faire : fond d'accent,
   numéro souligné. Celui qui porte déjà une célébration n'est là que pour
   qu'on se repère : fond neutre, numéro pâle, et un point sous la case.

   Trois différences et non une seule teinte : la forme du fond, le
   soulignement, et la pastille. Qui ne distingue pas les couleurs lit quand
   même lequel des deux il a sous les yeux. */
.epc-choix-jour .epc-jour--choix.est-dimanche:not(.est-bord):not(.est-passe) {
	background: var(--epc-accent-doux);
	font-weight: 600;
}

.epc-choix-jour .epc-jour--choix.est-dimanche:not(.est-bord):not(.est-passe) .epc-jour__numero {
	color: var(--epc-accent);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.epc-choix-jour .epc-jour--choix.est-dimanche-cree:not(.est-bord):not(.est-passe) {
	position: relative;
	background: var(--epc-fond-doux);
	border-color: var(--epc-trait);
	font-weight: 400;
}

.epc-choix-jour .epc-jour--choix.est-dimanche-cree:not(.est-bord):not(.est-passe) .epc-jour__numero {
	color: var(--epc-encre-douce);
	text-decoration: none;
}

/* Les dimanches emportés par le choix, jusqu'à celui qu'on a cliqué. La
   traînée s'arrête sur la case pleine : elle en fait partie. */
.epc-choix-jour .epc-jour--choix.est-dedans:not(.est-bord) {
	box-shadow: inset 0 -3px 0 var(--epc-accent);
}

/* La pastille dit « il y a déjà quelque chose ici » sans mot ni couleur. */
.epc-choix-jour .epc-jour--choix.est-dimanche-cree:not(.est-bord):not(.est-passe)::after {
	content: '';
	position: absolute;
	left: 50%;
	bottom: 3px;
	width: 4px;
	height: 4px;
	margin-left: -2px;
	border-radius: 50%;
	background: var(--epc-contour);
}

/* Le motif et le bouton se rangent à côté du calendrier plutôt qu'en dessous :
   la colonne de droite était entièrement vide. */
.epc-ajout-absence .epc-champ--motif {
	flex: 1 1 14rem;
	max-width: 22rem;
}

.epc-ajout-absence .epc-champ--motif label,
.epc-ajout-absence .epc-champ--motif span {
	display: block;
	margin-bottom: var(--epc-espace-1);
	color: var(--epc-encre-douce);
	font-size: 0.8rem;
	font-weight: 600;
}

.epc-ajout-absence .epc-champ--motif input {
	width: 100%;
}

.epc-ajout-absence .epc-bouton {
	flex: 0 0 auto;
}

.epc-mes-absences {
	margin-bottom: 0;
}

.epc-vide--absences {
	margin: var(--epc-espace-2) 0 0;
}

/* ==========================================================================
   RÔLES NON COCHÉS : NETTEMENT PLUS CLAIRS
   ========================================================================== */

.epc-role {
	padding: var(--epc-espace-2) 0;
}

.epc-role:not(.est-cochee) .epc-role__titre {
	opacity: 0.62;
}

.epc-role:not(.est-cochee) .epc-role__libelle {
	color: var(--epc-encre-douce);
	font-weight: 400;
}

.epc-role:not(.est-cochee) .epc-role__libelle small {
	opacity: 0.85;
}

/* Au survol, le rôle se réveille : c'est une invitation à le cocher. */
.epc-role:not(.est-cochee):hover .epc-role__titre {
	opacity: 1;
}

.epc-role.est-cochee .epc-role__libelle {
	color: var(--epc-encre);
	font-weight: 600;
}

.epc-autres {
	opacity: 1;
}

.epc-autres .epc-roles {
	margin-top: var(--epc-espace-1);
}

/* ==========================================================================
   DEUX CORRECTIONS
   ========================================================================== */

/* 1. Les étiquettes destinées aux lecteurs d'écran.
      Elles utilisaient la classe de WordPress, définie par le thème que l'on
      écarte : sans définition, « Titre de À l'agneau de Dieu » s'affichait
      dans chaque cellule du tableau. Elles doivent rester dans le document,
      pour la synthèse vocale, mais hors de l'écran. */
body.epc-espace .screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	border: 0;
	overflow: hidden;
	clip: rect( 1px, 1px, 1px, 1px );
	clip-path: inset( 50% );
	white-space: nowrap;
}

/* Sauf au clavier : une aide qui prend le focus doit redevenir visible. */
body.epc-espace .screen-reader-text:focus {
	position: static !important;
	width: auto;
	height: auto;
	margin: 0;
	overflow: visible;
	clip: auto;
	clip-path: none;
	white-space: normal;
}

/* 2. L'en-tête du tableau tient au défilement, sans enfermer le tableau.

      Il y avait ici une hauteur maximale, posée pour que « position: sticky »
      ait un conteneur qui défile. Le remède coûtait plus cher que le mal : les
      cent cinquante-cinq chants se retrouvaient dans une boîte de quelques
      centimètres, avec sa propre barre de défilement, et « overscroll-behavior:
      contain » retenait la molette dedans. On défilait longuement dans le
      tableau alors que le pied de page était déjà à l'écran.

      « sticky » se cale sur le premier ancêtre qui défile. En n'imposant aucun
      débordement sur grand écran, cet ancêtre est la page elle-même : l'en-tête
      se colle en haut de la fenêtre, et le tableau garde sa hauteur entière.

      Le débordement horizontal ne sert qu'aux écrans étroits, où le tableau ne
      tient pas en largeur. Là, l'en-tête cesse de se coller, parce qu'un
      conteneur qui déborde dans un sens défile dans les deux. C'est le prix, et
      il est bien moindre. */
.epc-tableau-defilant {
	overflow: visible;
}

@media (max-width: 52rem) {
	.epc-tableau-defilant {
		overflow-x: auto;
	}
}

.epc-tableau-chants thead th {
	box-shadow: inset 0 -1px 0 var(--epc-trait);
}

/* Le conteneur ne rogne plus ce qui dépasse : les angles de l'en-tête doivent
   donc épouser les siens eux-mêmes, sinon son fond déborde du cadre arrondi. */
.epc-tableau-chants thead th:first-child {
	border-top-left-radius: var(--epc-rayon);
}

.epc-tableau-chants thead th:last-child {
	border-top-right-radius: var(--epc-rayon);
}

/* ==========================================================================
   DÉROULÉ DE CÉLÉBRATION
   ========================================================================== */

.epc-fil {
	margin: 0 0 var(--epc-espace-2);
	color: var(--epc-encre-douce);
	font-size: 0.85rem;
}

.epc-fil a {
	text-decoration: none;
}

.epc-fil a:hover {
	text-decoration: underline;
}

/* --- Choisir un dimanche --------------------------------------------------- */

.epc-choix-dimanches {
	display: grid;
	grid-template-columns: repeat( auto-fill, minmax( 17rem, 1fr ) );
	gap: var(--epc-espace-3);
	margin: 0;
	padding: 0;
	list-style: none;
}

.epc-choix-dimanche {
	display: block;
	padding: var(--epc-espace-4) var(--epc-espace-5);
	border: 1px solid var(--epc-trait);
	border-radius: var(--epc-rayon);
	background: var(--epc-fond);
	box-shadow: var(--epc-ombre);
	text-decoration: none;
}

.epc-choix-dimanche:hover {
	border-color: var(--epc-accent);
}

.epc-choix-dimanche.est-passee {
	opacity: 0.6;
}

.epc-choix-dimanche__date {
	display: block;
	color: var(--epc-accent);
	font-weight: 700;
}

.epc-choix-dimanche__date::first-letter {
	text-transform: uppercase;
}

.epc-choix-dimanche__detail {
	display: block;
	margin-top: 2px;
	color: var(--epc-encre-douce);
	font-size: 0.87rem;
}

/* --- Qui sert ce dimanche -------------------------------------------------- */

.epc-qui-sert {
	margin-bottom: var(--epc-espace-5);
	padding: var(--epc-espace-3) var(--epc-espace-4);
	border: 1px solid var(--epc-trait);
	border-radius: var(--epc-rayon);
	background: var(--epc-fond);
}

.epc-qui-sert summary {
	color: var(--epc-accent);
	font-weight: 600;
	cursor: pointer;
}

.epc-qui-sert ul {
	display: grid;
	grid-template-columns: repeat( auto-fill, minmax( 15rem, 1fr ) );
	gap: 2px var(--epc-espace-4);
	margin: var(--epc-espace-3) 0 0;
	padding: 0;
	list-style: none;
	font-size: 0.88rem;
}

.epc-qui-sert li {
	display: flex;
	justify-content: space-between;
	gap: var(--epc-espace-3);
	padding: 4px 0;
	border-bottom: 1px solid var(--epc-trait);
}

.epc-qui-sert span {
	color: var(--epc-encre-douce);
}

/* --- Les étapes ------------------------------------------------------------ */

.epc-etapes {
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: etape;
}

.epc-etape {
	position: relative;
	margin-bottom: var(--epc-espace-2);
	padding: var(--epc-espace-3) var(--epc-espace-4) var(--epc-espace-3) var(--epc-espace-7);
	border: 1px solid var(--epc-trait);
	border-radius: var(--epc-rayon);
	background: var(--epc-fond);
	counter-increment: etape;
}

.epc-etape::before {
	content: counter( etape );
	position: absolute;
	top: var(--epc-espace-3);
	left: var(--epc-espace-3);
	display: flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	background: var(--epc-fond-doux);
	color: var(--epc-encre-douce);
	font-size: 0.74rem;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

.epc-etape--chant {
	border-left: 3px solid var(--epc-accent);
}

.epc-etape--chant::before {
	background: var(--epc-accent-doux);
	color: var(--epc-accent);
}

.epc-etape__ligne {
	display: flex;
	align-items: center;
	gap: var(--epc-espace-3);
}

.epc-etape__libelle {
	flex: 1 1 auto;
	font-weight: 600;
}

input.epc-etape__libelle {
	font-size: 1rem;
}

.epc-etape__retirer {
	flex: 0 0 auto;
	opacity: 0;
	transition: opacity 0.15s ease;
}

.epc-etape:hover .epc-etape__retirer,
.epc-etape__retirer:focus {
	opacity: 1;
}

.epc-etape__chant {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: var(--epc-espace-2);
	margin-top: var(--epc-espace-2);
}

.epc-etape__chant .epc-champ {
	flex: 1 1 18rem;
}

.epc-etape__chant .epc-champ span {
	display: block;
	margin-bottom: 2px;
	color: var(--epc-encre-douce);
	font-size: 0.74rem;
	font-weight: 600;
}

.epc-choix-chant {
	width: 100%;
	min-height: 42px;
	padding: 8px 11px;
	border: 1px solid var(--epc-contour);
	border-radius: var(--epc-rayon-petit);
	background: var(--epc-fond);
	color: inherit;
	font: inherit;
}

.epc-creer-chant {
	flex: 0 0 auto;
}

.epc-etape__titre-chant {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: var(--epc-espace-2);
	margin: var(--epc-espace-1) 0 0;
}

.epc-etape__auteur {
	color: var(--epc-encre-douce);
	font-size: 0.85rem;
}

.epc-etape__pied {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: var(--epc-espace-3);
	margin-top: var(--epc-espace-2);
	font-size: 0.88rem;
}

.epc-champ--qui { flex: 0 1 13rem; }
.epc-champ--note { flex: 1 1 15rem; }

.epc-etape__pied .epc-champ span {
	display: block;
	margin-bottom: 2px;
	color: var(--epc-encre-douce);
	font-size: 0.74rem;
	font-weight: 600;
}

.epc-etape__pied select,
.epc-etape__pied input {
	width: 100%;
	min-height: 38px;
	padding: 6px 9px;
	border: 1px solid var(--epc-trait);
	border-radius: 6px;
	background: var(--epc-fond);
	color: inherit;
	font: inherit;
	font-size: 0.88rem;
}

.epc-etape__qui {
	color: var(--epc-accent);
	font-weight: 600;
}

.epc-etape__note {
	color: var(--epc-encre-douce);
	font-style: italic;
}

.epc-etape.est-en-cours { opacity: 0.55; }

.epc-etape.est-enregistree {
	border-color: var(--epc-ok);
}

.epc-etape.est-en-erreur {
	border-color: var(--epc-alerte);
}

.epc-ajout-etape {
	display: flex;
	flex-wrap: wrap;
	gap: var(--epc-espace-3);
	margin: var(--epc-espace-5) 0 var(--epc-espace-4);
}

.epc-ajout-etape .epc-bouton {
	border: none;
	cursor: pointer;
}

/* --- Colonne d'usage du répertoire ----------------------------------------- */

.epc-colonne--usage { width: 15%; white-space: nowrap; }

.epc-usage__nombre {
	display: block;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}

.epc-usage__date {
	display: block;
	color: var(--epc-encre-douce);
	font-size: 0.78rem;
}

/* ==========================================================================
   DÉROULÉ : PLUS COMPACT, ET NAVIGABLE
   ========================================================================== */

.epc-navigation-deroule {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--epc-espace-3);
	margin-bottom: var(--epc-espace-4);
	padding-bottom: var(--epc-espace-3);
	border-bottom: 1px solid var(--epc-trait);
	font-size: 0.87rem;
}

.epc-navigation-deroule__lien {
	display: inline-flex;
	align-items: center;
	gap: var(--epc-espace-1);
	color: var(--epc-encre-douce);
	text-decoration: none;
}

.epc-navigation-deroule__lien:hover {
	color: var(--epc-accent);
}

.epc-navigation-deroule__tous {
	color: var(--epc-accent);
	font-weight: 600;
	text-decoration: none;
}

.epc-entete--serree {
	margin-bottom: var(--epc-espace-4);
}

.epc-entete--serree h1 {
	margin-bottom: 2px;
}

.epc-entete--serree h1::first-letter {
	text-transform: uppercase;
}

.epc-entete--serree .epc-sous-titre {
	margin-bottom: 0;
}

/* Une étape tient sur une ligne quand l'écran le permet : intitulé à gauche,
   qui et note à droite. Trois lignes par étape sur quatorze étapes faisaient
   défiler pour rien. */
.epc-etape {
	display: grid;
	grid-template-columns: minmax( 11rem, 1fr );
	gap: var(--epc-espace-2);
	align-items: center;
	margin-bottom: var(--epc-espace-1);
	padding: var(--epc-espace-2) var(--epc-espace-3) var(--epc-espace-2) 42px;
	border-radius: var(--epc-rayon-petit);
}

.epc-etape::before {
	top: 50%;
	left: 10px;
	width: 22px;
	height: 22px;
	transform: translateY( -50% );
	font-size: 0.7rem;
}

.epc-etape__ligne { margin: 0; }
.epc-etape__chant { margin: 0; }

.epc-etape__pied {
	margin-top: 0;
	gap: var(--epc-espace-2);
}

input.epc-etape__libelle,
.epc-etape__libelle {
	font-size: 0.95rem;
}

input.epc-etape__libelle {
	min-height: 34px;
	padding: 4px 7px;
}

.epc-etape__pied select,
.epc-etape__pied input,
.epc-choix-chant {
	min-height: 34px;
	padding: 4px 8px;
	font-size: 0.85rem;
}

.epc-champ--qui { flex: 0 1 11rem; }
.epc-champ--note { flex: 1 1 11rem; }

@media (min-width: 52rem) {
	.epc-etape {
		grid-template-columns: minmax( 10rem, 1fr ) minmax( 20rem, 26rem );
		gap: var(--epc-espace-1) var(--epc-espace-4);
	}

	.epc-etape__ligne { grid-column: 1; }
	.epc-etape__pied { grid-column: 2; }

	/* Le champ de chant passe sous l'intitulé, dans la même colonne : il est
	   long, et le mettre à droite écraserait « qui » et « note ». */
	.epc-etape--chant .epc-etape__ligne { grid-column: 1; grid-row: 1; }
	.epc-etape--chant .epc-etape__chant { grid-column: 1; grid-row: 2; }
	.epc-etape--chant .epc-etape__pied { grid-column: 2; grid-row: 1 / span 2; }
}

.epc-ajout-etape {
	margin: var(--epc-espace-4) 0 var(--epc-espace-3);
}

.epc-qui-sert {
	margin-bottom: var(--epc-espace-4);
	padding: var(--epc-espace-2) var(--epc-espace-3);
	font-size: 0.9rem;
}

.epc-qui-sert ul {
	margin-top: var(--epc-espace-2);
	font-size: 0.85rem;
}

.epc-qui-sert li { padding: 3px 0; }

/* ==========================================================================
   EXPLORABIBLE — L'ÉCOLE DU DIMANCHE
   ========================================================================== */

/* --- La barre des onglets ---------------------------------------------------

   Des liens, et non des boutons : l'onglet est porté par l'adresse, donc il se
   partage, se met en signet, et le retour arrière du navigateur fonctionne. */

.epc-sous-vues {
	display: flex;
	flex-wrap: wrap;
	gap: var(--epc-espace-1);
	margin-bottom: var(--epc-espace-5);
	padding-bottom: var(--epc-espace-2);
	border-bottom: 1px solid var(--epc-trait);
}

.epc-sous-vue {
	padding: var(--epc-espace-2) var(--epc-espace-4);
	border-radius: var(--epc-rayon-petit);
	color: var(--epc-encre-douce);
	font-size: 0.92rem;
	font-weight: 600;
	text-decoration: none;
}

.epc-sous-vue:hover {
	background: var(--epc-fond-doux);
	color: var(--epc-encre);
}

/* L'onglet courant porte deux marques, le fond et le trait : la couleur seule
   ne dirait pas où l'on est à qui ne la distingue pas. */
.epc-sous-vue.est-active {
	background: var(--epc-accent-doux);
	color: var(--epc-accent-sombre);
	box-shadow: inset 0 -2px 0 var(--epc-accent);
}

.epc-sous-vue:focus-visible {
	outline: 2px solid var(--epc-accent);
	outline-offset: 2px;
}

/* --- Les filtres d'une liste ------------------------------------------------ */

.epc-filtres {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: var(--epc-espace-3);
	margin-bottom: var(--epc-espace-4);
}

/* --- Le tableau des séances -------------------------------------------------

   L'alternance des deux formats se voit par le fond, et se lit par le mot :
   une teinte seule laisserait un nouveau venu deviner ce qu'elle signifie. */

.epc-tableau-enfance {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.9rem;
}

.epc-tableau-enfance thead th {
	padding: var(--epc-espace-3) var(--epc-espace-3);
	border-bottom: 1px solid var(--epc-trait);
	background: var(--epc-fond-doux);
	color: var(--epc-encre-douce);
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.07em;
	text-align: left;
	text-transform: uppercase;
	white-space: nowrap;
}

.epc-tableau-enfance td,
.epc-tableau-enfance tbody th {
	padding: var(--epc-espace-2) var(--epc-espace-3);
	border-bottom: 1px solid var(--epc-trait);
	text-align: left;
	vertical-align: middle;
}

.epc-seance__date {
	white-space: nowrap;
	font-weight: 600;
}

/* Une séance à leçon porte un filet à gauche en plus de sa teinte : deux
   marques, parce qu'une teinte seule ne dit rien à qui ne la distingue pas, et
   rien du tout à qui découvre l'écran. Le mot « Leçon » est la troisième. */
.epc-seance--lecon > th:first-child {
	box-shadow: inset 3px 0 0 var(--epc-accent);
}

.epc-seance--lecon {
	background: color-mix( in srgb, var(--epc-accent-doux) 55%, transparent );
}

.epc-tableau-enfance tbody tr.epc-seance:hover {
	background: var(--epc-fond-doux);
}

.epc-tableau-enfance tbody tr.epc-seance--lecon:hover {
	background: var(--epc-accent-doux);
}

.epc-seance__mot {
	display: inline-block;
	font-weight: 600;
}

.epc-seance--lecon .epc-seance__mot {
	color: var(--epc-accent-sombre);
}

.epc-seance__lecon {
	display: block;
	color: var(--epc-encre-douce);
	font-size: 0.84rem;
}

/* --- Les cases du tableau ---------------------------------------------------

   Vingt-huit listes déroulantes encadrées, toutes de la même taille, ne se
   lisent pas : une case vide y pèse autant qu'une case remplie, et l'œil n'a
   rien à quoi s'accrocher.

   Les listes perdent donc leur cadre jusqu'à ce qu'on les survole ou qu'on les
   atteigne au clavier, comme les champs modifiables du reste de l'espace. Ce
   qu'on lit alors, ce sont des noms ; ce qui manque se lit comme un manque. */

.epc-seance__creneau select,
.epc-seance__format select {
	width: 100%;
	max-width: 11rem;
	padding: 4px 6px;
	border: 1px solid transparent;
	border-radius: var(--epc-rayon-petit);
	background: transparent;
	color: inherit;
	font: inherit;
	font-size: 0.9rem;
}

.epc-seance__creneau select:hover,
.epc-seance__format select:hover {
	border-color: var(--epc-trait);
	background: var(--epc-fond);
}

.epc-seance__creneau select:focus,
.epc-seance__format select:focus {
	border-color: var(--epc-accent);
	background: var(--epc-fond);
	outline: none;
	box-shadow: 0 0 0 3px var(--epc-accent-doux);
}

/* Un créneau sans personne se dit, et s'écrit autrement qu'un nom : italique,
   pâle, et un soulignement pointillé qui invite à le remplir. */
.epc-seance__creneau.est-vide select,
.epc-creneau-vide {
	color: var(--epc-encre-douce);
	font-style: italic;
}

.epc-creneau-vide {
	border-bottom: 1px dashed var(--epc-contour);
}

.epc-creneau-nom {
	font-weight: 500;
}

/* --- Le mois en intertitre --------------------------------------------------- */

.epc-mois-seance th {
	padding: var(--epc-espace-4) var(--epc-espace-3) var(--epc-espace-2);
	border-bottom: 1px solid var(--epc-trait);
	background: none;
	color: var(--epc-encre-douce);
	font-size: 0.74rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-align: left;
	text-transform: uppercase;
}

.epc-mois-seance:first-child th {
	padding-top: var(--epc-espace-2);
}

/* Une proposition n'est pas encore un fait : le pointillé le dit, et il
   disparaît dès qu'on applique. */
.epc-seance__creneau.est-proposee select {
	border-style: dashed;
	border-color: var(--epc-accent);
	background: var(--epc-accent-doux);
}

.epc-barre-propositions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--epc-espace-3);
	margin-top: var(--epc-espace-4);
	padding: var(--epc-espace-3) var(--epc-espace-4);
	border: 1px solid var(--epc-accent);
	border-radius: var(--epc-rayon);
	background: var(--epc-accent-doux);
}

.epc-barre-propositions p {
	margin: 0;
	font-weight: 600;
}

.epc-barre-propositions__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--epc-espace-2);
}

/* --- Le récapitulatif par personne ------------------------------------------ */

.epc-recap-enfance__liste {
	display: flex;
	flex-direction: column;
	gap: var(--epc-espace-2);
	margin: var(--epc-espace-3) 0 0;
	padding: 0;
	list-style: none;
}

.epc-recap-enfance__liste li {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--epc-espace-3);
	padding-bottom: var(--epc-espace-2);
	border-bottom: 1px solid var(--epc-trait);
}

.epc-recap-enfance__liste li:last-child {
	border-bottom: none;
	padding-bottom: 0;
}

.epc-recap-enfance__qui {
	font-weight: 600;
}

.epc-recap-enfance__compte {
	color: var(--epc-encre-douce);
	font-size: 0.88rem;
	font-variant-numeric: tabular-nums;
}

/* --- Ateliers et livres : la même rangée en deux colonnes ------------------- */

.epc-ateliers,
.epc-livres,
.epc-lecons,
.epc-enfants {
	display: flex;
	flex-direction: column;
	gap: var(--epc-espace-2);
	margin: 0 0 var(--epc-espace-4);
	padding: 0;
	list-style: none;
}

.epc-atelier,
.epc-livre,
.epc-lecon {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--epc-espace-3) var(--epc-espace-5);
	padding: var(--epc-espace-3) var(--epc-espace-4);
	border: 1px solid var(--epc-trait);
	border-radius: var(--epc-rayon);
	background: var(--epc-fond);
}

.epc-atelier.est-inactif,
.epc-livre.est-lu {
	background: var(--epc-fond-doux);
}

.epc-atelier__infos,
.epc-livre__infos,
.epc-lecon__infos {
	flex: 1 1 18rem;
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.epc-atelier__reglages,
.epc-livre__reglages,
.epc-lecon__etat {
	flex: 0 0 auto;
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: var(--epc-espace-3);
}

.epc-atelier__reglage,
.epc-livre__reglage {
	display: flex;
	flex-direction: column;
	gap: 3px;
}

.epc-atelier__etiquette,
.epc-livre__etiquette {
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--epc-encre-douce);
}

/* Les deux champs de texte s'alignent sur le reste de leur colonne malgré le
   rembourrage qu'un champ de saisie porte toujours. Deux classes, parce que
   « epc-case-editable » est déclaré plus bas avec une hauteur minimale. */
.epc-atelier__infos .epc-case-editable,
.epc-livre__infos .epc-case-editable,
.epc-lecon__infos .epc-case-editable {
	width: 100%;
	min-height: 0;
	margin-left: -6px;
	padding: 3px 6px;
}

.epc-atelier__nom,
.epc-livre__titre,
.epc-lecon__titre {
	font-size: 1rem;
	font-weight: 600;
}

.epc-atelier__note,
.epc-lecon__reference {
	font-size: 0.88rem;
	color: var(--epc-encre-douce);
}

.epc-atelier__usage,
.epc-livre__age {
	margin: 2px 0 0;
	color: var(--epc-encre-douce);
	font-size: 0.82rem;
}

.epc-atelier__detenteur,
.epc-livre__avancement {
	min-width: 9rem;
}

/* Sur téléphone, les réglages passent sous le nom au lieu de le pousser hors
   de l'écran. « flex: 0 0 auto » les empêchait de rétrécir : la boîte gardait
   ses quatre cent cinquante pixels et débordait la page entière. */
@media (max-width: 48rem) {
	/* Un atelier et une leçon portent un bloc d'informations et un bloc de
	   réglages : les deux passent l'un sous l'autre. Un livre, lui, est une
	   ligne de bouts courts qui se replient d'eux-mêmes ; le mettre en colonne
	   lui ferait quatre lignes pour un titre et une tranche d'âge. */
	.epc-atelier,
	.epc-lecon {
		flex-direction: column;
		align-items: stretch;
		gap: var(--epc-espace-2);
	}

	.epc-livre {
		align-items: center;
		gap: var(--epc-espace-1) var(--epc-espace-3);
	}

	.epc-livre__titre {
		flex: 1 1 100%;
	}

	.epc-atelier__reglages,
	.epc-livre__reglages,
	.epc-lecon__etat {
		flex: 1 1 auto;
		min-width: 0;
		gap: var(--epc-espace-2) var(--epc-espace-3);
	}

	.epc-atelier__reglage,
	.epc-livre__reglage {
		flex: 1 1 8rem;
		min-width: 0;
	}

	.epc-atelier__reglage select,
	.epc-atelier__reglage input,
	.epc-livre__reglage select,
	.epc-livre__reglage input {
		width: 100%;
		min-width: 0;
	}

	.epc-atelier__detenteur,
	.epc-livre__avancement {
		min-width: 0;
	}

	/* Un choix de filtre porte des intitulés longs : « En construction, tout
	   ce qui n'est pas prêt ». Sans largeur maximale, la liste prend la taille
	   de son option la plus longue et sort de l'écran. */
	.epc-filtres .epc-champ {
		flex: 1 1 10rem;
		min-width: 0;
		max-width: 100%;
	}

	.epc-filtres select,
	.epc-filtres input {
		width: 100%;
		max-width: 100%;
		min-width: 0;
	}
}

/* --- L'état du matériel ------------------------------------------------------

   Quatre états, quatre couleurs, et le mot dans la pastille : on doit pouvoir
   faire les courses depuis une feuille imprimée en noir et blanc. */

.epc-pastille-materiel {
	display: inline-block;
	padding: 2px 10px;
	border: 1px solid var(--epc-trait);
	border-radius: 999px;
	font-size: 0.78rem;
	font-weight: 600;
	white-space: nowrap;
}

.epc-pastille-materiel--disponible {
	border-color: var(--epc-ok);
	background: var(--epc-ok-doux);
	color: var(--epc-ok);
}

.epc-pastille-materiel--a_acheter {
	border-color: var(--epc-alerte);
	background: var(--epc-alerte-doux);
	color: var(--epc-alerte);
}

.epc-pastille-materiel--a_imprimer {
	border-color: var(--epc-attention);
	background: var(--epc-attention-doux);
	color: var(--epc-attention);
}

.epc-pastille-materiel--inconnu {
	color: var(--epc-encre-douce);
}

/* --- La liste de courses ----------------------------------------------------- */

.epc-courses {
	border-left: 4px solid var(--epc-attention);
}

.epc-courses__chapeau {
	margin: 0 0 var(--epc-espace-3);
}

.epc-courses__liste {
	display: flex;
	flex-direction: column;
	gap: var(--epc-espace-2);
	margin: 0;
	padding: 0;
	list-style: none;
}

.epc-courses__liste li {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: var(--epc-espace-2) var(--epc-espace-3);
	padding-bottom: var(--epc-espace-2);
	border-bottom: 1px solid var(--epc-trait);
}

.epc-courses__liste li:last-child {
	border-bottom: none;
	padding-bottom: 0;
}

.epc-courses__quoi {
	font-weight: 600;
}

.epc-courses__chez,
.epc-courses__note {
	color: var(--epc-encre-douce);
	font-size: 0.86rem;
}

/* --- La progression ---------------------------------------------------------- */

.epc-prochaine-lecon {
	border-left: 4px solid var(--epc-accent);
}

.epc-prochaine-lecon__titre {
	margin: 0 0 var(--epc-espace-2);
	font-size: 1.1rem;
	font-weight: 700;
	color: var(--epc-accent-sombre);
}

.epc-prochaine-lecon__intitule {
	display: block;
	font-size: 0.95rem;
	font-weight: 400;
	color: var(--epc-encre);
}

.epc-lecon__numero {
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--epc-encre-douce);
}

.epc-lecon.est-faite {
	background: var(--epc-fond-doux);
}

.epc-lecon.est-prochaine {
	border-color: var(--epc-accent);
	box-shadow: inset 3px 0 0 var(--epc-accent);
}

/*
 * Dans la liste d'une partie, les leçons n'ont pas de marge à gauche : le trait
 * de la prochaine se peignait donc par-dessus les premières lettres. On lui
 * fait sa place plutôt que de retirer le trait, qui est ce qui permet de
 * repérer la prochaine leçon en parcourant la liste.
 */
.epc-partie .epc-lecon.est-prochaine {
	padding-left: var(--epc-espace-3);
}

.epc-lecon__a-venir {
	color: var(--epc-encre-douce);
	font-size: 0.86rem;
}

/* --- Les enfants -------------------------------------------------------------- */

.epc-groupes-enfants {
	display: grid;
	grid-template-columns: repeat( auto-fit, minmax( 15rem, 1fr ) );
	gap: var(--epc-espace-3);
}

.epc-groupe-enfants h2 {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--epc-espace-3);
}

/* L'effectif en tête : c'est lui qui dit s'il faut deux adultes ou trois. */
.epc-groupe-enfants__compte {
	padding: 1px 10px;
	border-radius: 999px;
	background: var(--epc-accent-doux);
	color: var(--epc-accent-sombre);
	font-size: 0.82rem;
	font-variant-numeric: tabular-nums;
}

/* La mise en forme d'une fiche vit plus bas, avec les colonnes serrées. Ce
   qui restait ici posait un filet sous chaque ligne en plus du fond alterné,
   soit deux séparateurs pour une même coupure. */

.epc-ajout-enfant,
.epc-ajout-atelier,
.epc-ajout-livre,
/* ------------------------------------------------ Les formulaires d'ajout ---
   Une ligne de champs mis bout à bout, chacun de la largeur de ce qu'il reçoit :
   un numéro de partie n'a pas besoin de la place d'un titre. Ils sont posés sur
   un fond légèrement creusé, pour qu'on voie d'un coup d'œil où l'on saisit et
   où l'on lit.
   -------------------------------------------------------------------------- */

.epc-ajout-lecon,
.epc-formulaire-document {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: var(--epc-espace-3) var(--epc-espace-4);
	margin-top: var(--epc-espace-4);
	border: 1px solid var(--epc-trait);
	border-radius: var(--epc-rayon);
	padding: var(--epc-espace-4);
	background: var(--epc-fond-doux);
}

.epc-ajout-lecon .epc-champ label,
.epc-formulaire-document .epc-champ label {
	color: var(--epc-encre-douce);
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.epc-ajout-lecon input,
.epc-ajout-lecon select,
.epc-formulaire-document input,
.epc-formulaire-document select {
	background: var(--epc-fond);
}

/* Le bouton ferme la ligne et se pousse à droite quand il reste de la place :
   collé au dernier champ, il ressemblait à une partie du champ. */
.epc-ajout-lecon > button[type="submit"],
.epc-formulaire-document > button[type="submit"] {
	margin-left: auto;
}

/* Un champ de nombre prend la largeur de son nombre, pas celle d'un titre. */
.epc-ajout-lecon .epc-champ--numero,
.epc-formulaire-document .epc-champ--numero {
	flex: 0 0 auto;
}

/* À l'étroit, tout s'empile et le bouton reprend toute la largeur : un bouton
   de trois centimètres perdu au bout d'une ligne se rate. */
@media (max-width: 40rem) {
	.epc-ajout-lecon,
	.epc-formulaire-document {
		flex-direction: column;
		align-items: stretch;
	}

	.epc-ajout-lecon .epc-champ--numero input,
	.epc-formulaire-document .epc-champ--numero input {
		width: 100%;
	}

	.epc-ajout-lecon > button[type="submit"],
	.epc-formulaire-document > button[type="submit"] {
		margin-left: 0;
	}
}

.epc-champ--age input,
.epc-champ--numero input {
	width: 4.5rem;
	text-align: center;
	font-variant-numeric: tabular-nums;
}

/* --- L'impression ------------------------------------------------------------

   Imprimer la page des ateliers, c'est vouloir la liste de courses et elle
   seule. Le reste sort, y compris le menu et les filtres. */

@media print {
	.epc-sans-impression,
	.epc-sous-vues,
	.epc-rail,
	.epc-barre,
	.epc-pied {
		display: none !important;
	}

	.epc-courses {
		border: none;
		box-shadow: none;
	}

	.epc-courses__liste li {
		break-inside: avoid;
	}
}

/* --- Composer les ateliers d'un dimanche ----------------------------------- */

.epc-choix-ateliers__commandes {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--epc-espace-3);
	margin-bottom: var(--epc-espace-3);
}

.epc-choix-ateliers__liste {
	display: grid;
	grid-template-columns: repeat( auto-fit, minmax( 16rem, 1fr ) );
	gap: var(--epc-espace-2);
	margin: 0 0 var(--epc-espace-4);
	padding: 0;
	list-style: none;
}

.epc-choix-ateliers__liste .epc-case-a-cocher {
	align-items: flex-start;
	padding: var(--epc-espace-2);
	border: 1px solid var(--epc-trait);
	border-radius: var(--epc-rayon-petit);
	color: var(--epc-encre);
}

.epc-choix-ateliers__liste .epc-case-a-cocher:has( input:checked ) {
	border-color: var(--epc-accent);
	background: var(--epc-accent-doux);
}

.epc-choix-ateliers__liste small {
	display: block;
	color: var(--epc-encre-douce);
	font-size: 0.78rem;
}

/* --- Mes dimanches ----------------------------------------------------------

   L'écran d'un moniteur. Une carte par dimanche, et non une ligne de tableau :
   il en a deux ou trois, pas quarante, et chacune porte une décision à prendre. */

.epc-mes-seances {
	display: flex;
	flex-direction: column;
	gap: var(--epc-espace-3);
	margin: var(--epc-espace-3) 0 0;
	padding: 0;
	list-style: none;
}

.epc-ma-seance {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--epc-espace-3) var(--epc-espace-4);
	padding: var(--epc-espace-3) var(--epc-espace-4);
	border: 1px solid var(--epc-trait);
	border-left: 4px solid var(--epc-contour);
	border-radius: var(--epc-rayon);
	background: var(--epc-fond);
}

/* Une leçon se prépare : sa carte se distingue, parce que c'est la seule qui
   demande du travail avant dimanche. */
.epc-ma-seance--lecon {
	border-left-color: var(--epc-accent);
	background: var(--epc-accent-doux);
}

.epc-ma-seance__quand {
	flex: 1 1 11rem;
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.epc-ma-seance__quand strong {
	font-size: 1.02rem;
}

.epc-ma-seance__role {
	color: var(--epc-encre-douce);
	font-size: 0.86rem;
}

.epc-ma-seance__quoi {
	flex: 2 1 18rem;
	display: flex;
	flex-direction: column;
	gap: 3px;
	min-width: 0;
}

.epc-ma-seance__lecon {
	font-size: 0.9rem;
}

.epc-ma-seance__lecon em {
	color: var(--epc-encre-douce);
	font-style: normal;
}

.epc-ma-seance__manque {
	color: var(--epc-attention);
	font-size: 0.86rem;
	font-weight: 600;
}

.epc-ma-seance__actions {
	flex: 0 0 auto;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--epc-espace-2);
}

.epc-etiquette-format {
	align-self: flex-start;
	padding: 1px 10px;
	border-radius: 999px;
	border: 1px solid var(--epc-trait);
	font-size: 0.74rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.epc-etiquette-format--lecon {
	border-color: var(--epc-accent);
	background: var(--epc-accent);
	color: var(--epc-sur-accent);
}

/* --- Ce qui manque ----------------------------------------------------------

   Chaque point dit un nombre et mène à l'endroit où le corriger : une alerte
   sans chemin de sortie se transforme en décor qu'on cesse de voir. */

.epc-manques {
	display: flex;
	flex-direction: column;
	gap: var(--epc-espace-2);
	margin: var(--epc-espace-3) 0 0;
	padding: 0;
	list-style: none;
}

.epc-manque {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: var(--epc-espace-2) var(--epc-espace-3);
	padding: var(--epc-espace-2) var(--epc-espace-3);
	border-radius: var(--epc-rayon-petit);
	background: var(--epc-fond-doux);
}

.epc-manque.est-a-faire {
	background: var(--epc-attention-doux);
}

.epc-manque__nombre {
	min-width: 1.8rem;
	font-size: 1.1rem;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	text-align: right;
}

.epc-manque.est-a-faire .epc-manque__nombre {
	color: var(--epc-attention);
}

.epc-manque.est-bon .epc-manque__nombre {
	color: var(--epc-ok);
}

.epc-manque__quoi {
	flex: 1 1 14rem;
}

.epc-manque__quoi::first-letter {
	text-transform: none;
}

/* Le lien du document, dans la liste des leçons. */
.epc-lecon__lien {
	font-size: 0.84rem;
	color: var(--epc-encre-douce);
}

/* --- Le programme : cent cinquante-six leçons -------------------------------

   Repliées par volume. Seul celui qui porte la prochaine leçon s'ouvre de
   lui-même : c'est le seul qu'on vient consulter neuf fois sur dix. */

.epc-partie {
	margin-bottom: var(--epc-espace-3);
	border: 1px solid var(--epc-trait);
	border-radius: var(--epc-rayon);
	background: var(--epc-fond);
}

.epc-partie > summary {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--epc-espace-2) var(--epc-espace-3);
	padding: var(--epc-espace-3) var(--epc-espace-4);
	cursor: pointer;
}

.epc-partie > summary span {
	color: var(--epc-encre-douce);
	font-size: 0.86rem;
}

.epc-partie > summary:focus-visible {
	outline: 2px solid var(--epc-accent);
	outline-offset: -2px;
}

.epc-partie[open] > summary {
	border-bottom: 1px solid var(--epc-trait);
}

.epc-partie .epc-lecons {
	margin: 0;
	padding: var(--epc-espace-3) var(--epc-espace-4);
}

.epc-partie .epc-lecon {
	border: none;
	border-bottom: 1px solid var(--epc-trait);
	border-radius: 0;
	padding-left: 0;
	padding-right: 0;
}

.epc-partie .epc-lecon:last-child {
	border-bottom: none;
}

.epc-lecon__acces {
	margin: var(--epc-espace-2) 0 0;
}

/* Ce qui manque se dit, plutôt que de laisser un blanc qu'on interprète mal. */
.epc-lecon__manque {
	margin: var(--epc-espace-2) 0 0;
	color: var(--epc-attention);
	font-size: 0.86rem;
}

/* --- Les vidéos de l'histoire ------------------------------------------------

   Intégrées et non liées : le déroulé type dit qu'on les diffuse depuis un
   ordinateur portable, parfois en coupant le son pour lire le texte soi-même.
   Partir sur YouTube pour revenir ensuite ferait perdre l'écran de la leçon.

   Domaine « nocookie » : la vidéo n'a pas à déposer de traceur chez un
   moniteur qui prépare sa séance. */

.epc-videos-lecon {
	display: grid;
	grid-template-columns: repeat( auto-fit, minmax( min( 18rem, 100% ), 1fr ) );
	gap: var(--epc-espace-4);
	margin-top: var(--epc-espace-4);
}

.epc-video-lecon {
	margin: 0;
}

.epc-video-lecon figcaption {
	margin-bottom: var(--epc-espace-2);
	color: var(--epc-encre-douce);
	font-size: 0.74rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.epc-video-lecon__cadre {
	position: relative;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	border: 1px solid var(--epc-trait);
	border-radius: var(--epc-rayon);
	background: var(--epc-fond-doux);
}

.epc-video-lecon__cadre iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

/* ============================================================ Les supports ==
   Les documents du Drive rattachés à une leçon. Un guide par groupe en bouton,
   le reste replié : on vient ici pour ouvrir la leçon, pas pour parcourir une
   liste de quatre cents fichiers.
   ========================================================================== */

.epc-supports {
	margin-top: var(--epc-espace-3);
	border-top: 1px solid var(--epc-trait);
	padding-top: var(--epc-espace-3);
}

.epc-supports > summary {
	cursor: pointer;
	color: var(--epc-encre-douce);
	font-size: 0.85rem;
}

.epc-supports > summary:focus-visible {
	outline: 2px solid var(--epc-accent);
	outline-offset: 2px;
}

.epc-supports__groupe {
	margin: var(--epc-espace-4) 0 var(--epc-espace-2);
	color: var(--epc-encre-douce);
	font-size: 0.74rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.epc-supports__liste {
	display: flex;
	flex-direction: column;
	gap: 2px;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Une ligne par document, et une seule. L'adresse ne s'affiche qu'à la demande :
   la montrer en permanence faisait trois lignes par document, et une partie en
   compte jusqu'à vingt. */
.epc-support {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: var(--epc-espace-2);
	border-radius: var(--epc-rayon-petit);
	padding: var(--epc-espace-1) var(--epc-espace-2);
	font-size: 0.85rem;
	line-height: 1.45;
}

.epc-support:nth-child(odd) {
	background: var(--epc-fond-doux);
}


.epc-support__type {
	flex: 0 0 auto;
	width: 7.5rem;
	color: var(--epc-encre-douce);
	font-size: 0.68rem;
	font-weight: 700;
	letter-spacing: 0.03em;
	text-transform: uppercase;
}

.epc-support__titre {
	flex: 1 1 10rem;
	min-width: 0;
	overflow-wrap: anywhere;
	color: var(--epc-encre);
}

.epc-support__portee {
	flex: 0 0 auto;
	border-radius: 999px;
	padding: 0 var(--epc-espace-2);
	font-size: 0.68rem;
	white-space: nowrap;
}

.epc-support__portee {
	background: var(--epc-accent-doux);
	color: var(--epc-accent-sombre);
}


/* Les gestes à droite, serrés. Ils ne prennent la parole qu'au survol du
   bloc ou au clavier : trois verbes répétés sur vingt lignes font un mur. */
.epc-support__gestes {
	display: flex;
	flex: 0 0 auto;
	gap: var(--epc-espace-3);
	margin-left: auto;
	opacity: 0.45;
	transition: opacity 0.15s ease;
}

.epc-support:hover .epc-support__gestes,
.epc-support:focus-within .epc-support__gestes {
	opacity: 1;
}

/* Sur un écran tactile, il n'y a pas de survol : les gestes resteraient pâles
   pour toujours, et illisibles. Ils s'y affichent donc en entier. */
@media (hover: none) {
	.epc-support__gestes {
		opacity: 1;
	}
}

/* Une animation qu'on n'a pas demandée est une animation de trop. */
@media (prefers-reduced-motion: reduce) {
	.epc-support__gestes {
		transition: none;
	}
}

.epc-support__gestes .epc-lien-discret {
	font-size: 0.72rem;
	white-space: nowrap;
}


.epc-support__edition {
	flex: 1 1 100%;
	margin-top: var(--epc-espace-1);
}

.epc-support__adresse {
	width: 100%;
	font-size: 0.78rem;
}

/* Un support qui vaut pour toute la partie, vu depuis une leçon : en lecture
   seule. Le corriger, le signaler et le retirer se font une fois, en tête de
   partie. */
.epc-support--commun {
	background: transparent;
}

.epc-support--commun:nth-child(odd) {
	background: transparent;
}

.epc-lecon__supports {
	color: var(--epc-encre-douce);
	font-size: 0.78rem;
	white-space: nowrap;
}

.epc-lecon__supports.est-vide {
	color: var(--epc-attention);
	font-weight: 600;
}


.epc-ajout-document .epc-conseil {
	max-width: 60ch;
}



.epc-champ--large {
	flex: 1 1 18rem;
}

/* ======================================================== Mes dimanches ==== */

.epc-ma-seance__video {
	flex: 1 1 100%;
	max-width: 28rem;
	margin-top: var(--epc-espace-3);
}

.epc-ma-seance__legende {
	margin: var(--epc-espace-2) 0 0;
	color: var(--epc-encre-douce);
	font-size: 0.78rem;
}

.epc-ma-seance__renvois {
	flex: 1 1 100%;
	margin: var(--epc-espace-3) 0 0;
	border-top: 1px solid var(--epc-trait);
	padding-top: var(--epc-espace-2);
	font-size: 0.85rem;
}

.epc-manque__detail {
	display: block;
	color: var(--epc-encre-douce);
	font-size: 0.78rem;
	font-style: normal;
}

/* ===================================================== Le déroulé type ===== */

.epc-deroule-type {
	margin-top: var(--epc-espace-5);
}

.epc-deroule-type h3 {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: var(--epc-espace-3);
	margin-bottom: var(--epc-espace-3);
}

.epc-deroule-type__compte {
	color: var(--epc-encre-douce);
	font-size: 0.8rem;
	font-weight: 400;
}

.epc-etapes-types {
	margin: 0;
	padding: 0;
	list-style: none;
	border: 1px solid var(--epc-trait);
	border-radius: var(--epc-rayon-petit);
	overflow: hidden;
}

/* Treize étapes par groupe, deux groupes : une bordure et un fond par étape
   faisaient vingt-six blocs empilés. Un simple filet les sépare, et le trait
   d'accent à gauche ne marque plus que l'exception. */
.epc-etape-type + .epc-etape-type {
	border-top: 1px solid var(--epc-trait);
}

/* La poignée est posée à côté du bloc dépliable, pas dedans : dans un
   « summary » elle se disputerait le clic avec l'ouverture de l'étape. */
.epc-etape-type {
	display: flex;
	align-items: flex-start;
}

.epc-etape-type > details {
	flex: 1 1 auto;
	min-width: 0;
}

.epc-etape-type.est-saisie {
	opacity: 0.45;
}

.epc-etape-type__poignee {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	align-self: stretch;
	padding: 0 2px;
	border: 0;
	background: none;
	color: var(--epc-contour);
	cursor: grab;
	opacity: 0.35;
	transition: opacity 0.15s ease;
}

.epc-etape-type__poignee .epc-icone {
	width: 0.9rem;
	height: 0.9rem;
}

.epc-etape-type:hover .epc-etape-type__poignee,
.epc-etape-type:focus-within .epc-etape-type__poignee {
	opacity: 1;
}

.epc-etape-type__poignee:focus-visible {
	outline: 2px solid var(--epc-accent);
	outline-offset: -2px;
	opacity: 1;
}

@media (hover: none) {
	.epc-etape-type__poignee {
		opacity: 1;
	}
}

@media (prefers-reduced-motion: reduce) {
	.epc-etape-type__poignee {
		transition: none;
	}
}

.epc-etape-type > details > summary {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: var(--epc-espace-3);
	cursor: pointer;
	padding: var(--epc-espace-2) var(--epc-espace-3);
	font-size: 0.9rem;
}

.epc-etape-type > details > summary:hover {
	background: var(--epc-fond-doux);
}

.epc-etape-type > details > summary:focus-visible {
	outline: 2px solid var(--epc-accent);
	outline-offset: -2px;
}

.epc-etape-type > details[open] > summary {
	background: var(--epc-fond-doux);
}

.epc-etape-type__rang {
	flex: 0 0 auto;
	min-width: 1.3rem;
	color: var(--epc-encre-douce);
	font-size: 0.78rem;
	font-variant-numeric: tabular-nums;
	text-align: right;
}

.epc-etape-type__titre {
	flex: 1 1 8rem;
	font-weight: 600;
}

.epc-etape-type__duree,
.epc-etape-type__marque {
	flex: 0 0 auto;
	border-radius: 999px;
	padding: 0 var(--epc-espace-2);
	font-size: 0.7rem;
	white-space: nowrap;
}

.epc-etape-type__duree {
	background: var(--epc-accent-doux);
	color: var(--epc-accent-sombre);
	font-variant-numeric: tabular-nums;
}

/* Ce qui est signalé est l'exception : l'étape qui peut sauter. */
.epc-etape-type__marque {
	color: var(--epc-encre-douce);
	font-style: italic;
}

.epc-etape-type.est-facultative .epc-etape-type__titre {
	font-weight: 500;
}

.epc-etape-type__detail {
	margin: 0;
	padding: var(--epc-espace-2) var(--epc-espace-3) var(--epc-espace-3) 2.6rem;
	color: var(--epc-encre-douce);
	font-size: 0.85rem;
	line-height: 1.55;
}

textarea.epc-etape-type__detail {
	display: block;
	width: calc(100% - var(--epc-espace-5));
	margin: var(--epc-espace-2) var(--epc-espace-3) var(--epc-espace-3);
	padding: var(--epc-espace-2);
	border: 1px solid var(--epc-trait);
	border-radius: var(--epc-rayon-petit);
	color: var(--epc-encre);
	font: inherit;
	font-size: 0.85rem;
}

/* Les moments d'une séance : quatre en-têtes légers qui coupent la liste, et
   non quatre encadrés de plus. Le titre porte le regard, le compte reste
   discret, et les étapes gardent la liste où elles vivaient déjà. */
.epc-moment + .epc-moment {
	margin-top: var(--epc-espace-3);
}

.epc-moment__titre {
	display: flex;
	align-items: baseline;
	gap: var(--epc-espace-2);
	margin: 0 0 var(--epc-espace-1);
	color: var(--epc-encre-douce);
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.epc-moment__compte {
	font-weight: 400;
	font-size: 0.7rem;
	letter-spacing: 0;
	opacity: 0.7;
}

/* Les réglages d'une étape, sous son détail. On vient ici pour relire ce qu'on
   fait le dimanche matin ; corriger un nom est second, et la ligne se range
   donc en dessous, en petit. */
.epc-etape-type__reglages {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: var(--epc-espace-2) var(--epc-espace-3);
	margin: 0 var(--epc-espace-3) var(--epc-espace-3);
	padding-top: var(--epc-espace-2);
	border-top: 1px dashed var(--epc-trait);
}

.epc-etape-type__reglages label {
	display: flex;
	flex-direction: column;
	gap: 2px;
	font-size: 0.7rem;
	color: var(--epc-encre-douce);
}

/* L'étiquette est une colonne : une base flex posée sur la saisie s'y lisait
   comme une hauteur, et le champ « Nom » faisait douze rem de haut. La taille
   se règle donc sur l'étiquette, et la saisie remplit sa largeur. */
.epc-etape-type__champ-nom {
	flex: 1 1 14rem;
	min-width: 8rem;
}

.epc-etape-type__reglages input[type="text"] {
	width: 100%;
}

.epc-etape-type__reglages input[type="number"] {
	width: 6.5rem;
}

.epc-etape-type__reglages input[type="text"],
.epc-etape-type__reglages input[type="number"],
.epc-etape-type__reglages select {
	padding: 4px var(--epc-espace-2);
	border: 1px solid var(--epc-trait);
	border-radius: var(--epc-rayon-petit);
	background: var(--epc-fond);
	color: var(--epc-encre);
	font: inherit;
	font-size: 0.82rem;
}

/* La case et son intitulé se lisent sur une ligne, pas l'un sous l'autre. */
.epc-etape-type__facultative {
	flex-direction: row !important;
	align-items: center;
	gap: var(--epc-espace-1) !important;
	padding-bottom: 5px;
}

.epc-etape-type__reglages .epc-retirer-etape-type {
	margin-left: auto;
	padding-bottom: 5px;
}

/* Ajouter une étape : une ligne sous le déroulé, pas un encadré. Le geste est
   rare, et un formulaire encadré pèserait autant que trois étapes. */
.epc-formulaire-etape {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--epc-espace-2);
	margin-top: var(--epc-espace-3);
}

.epc-formulaire-etape label {
	flex: 1 1 12rem;
	min-width: 0;
}

.epc-formulaire-etape input[type="text"],
.epc-formulaire-etape select {
	width: 100%;
	padding: var(--epc-espace-2);
	border: 1px solid var(--epc-trait);
	border-radius: var(--epc-rayon-petit);
	background: var(--epc-fond);
	color: var(--epc-encre);
	font: inherit;
	font-size: 0.85rem;
}

.epc-formulaire-etape label:last-of-type {
	flex: 0 1 14rem;
}

/* Les moments, réglés en une bande de tuiles au-dessus des deux déroulés.
   Ils sont communs aux deux groupes : les régler sur les en-têtes du déroulé
   aurait déplacé la maternelle et le primaire d'un même geste, sous les yeux. */
.epc-moments-edition {
	margin-top: var(--epc-espace-4);
	padding: var(--epc-espace-3);
	border: 1px dashed var(--epc-trait);
	border-radius: var(--epc-rayon);
	background: var(--epc-fond-doux);
}

.epc-moments-edition h3 {
	margin: 0 0 var(--epc-espace-1);
	font-size: 0.95rem;
}

.epc-moments-edition .epc-conseil {
	margin: 0 0 var(--epc-espace-3);
}

.epc-tuiles-moments {
	display: flex;
	flex-wrap: wrap;
	gap: var(--epc-espace-2);
	margin: 0;
	padding: 0;
	list-style: none;
}

.epc-tuile-moment {
	display: flex;
	align-items: center;
	gap: var(--epc-espace-1);
	padding: 2px var(--epc-espace-1);
	border: 1px solid var(--epc-trait);
	border-radius: 999px;
	background: var(--epc-fond);
}

/* La saisie prend la largeur de ce qu'elle contient : une tuile est un nom,
   pas un formulaire, et quatre champs de même largeur diraient le contraire. */
.epc-tuile-moment__nom {
	width: 11rem;
	padding: 2px var(--epc-espace-1);
	border: 1px solid transparent;
	border-radius: var(--epc-rayon-petit);
	background: none;
	color: var(--epc-encre);
	font: inherit;
	font-size: 0.85rem;
	font-weight: 600;
}

.epc-tuile-moment__nom:hover {
	border-color: var(--epc-trait);
}

.epc-tuile-moment__nom:focus {
	border-color: var(--epc-accent);
	background: var(--epc-fond);
	outline: none;
}

.epc-tuile-moment__compte {
	min-width: 1.4rem;
	padding: 0 var(--epc-espace-1);
	border-radius: 999px;
	background: var(--epc-accent-doux);
	color: var(--epc-accent-sombre);
	font-size: 0.7rem;
	font-variant-numeric: tabular-nums;
	text-align: center;
}

.epc-ajout-moment {
	display: flex;
	flex-wrap: wrap;
	gap: var(--epc-espace-2);
	margin-top: var(--epc-espace-3);
}

.epc-ajout-moment input[type="text"] {
	flex: 1 1 14rem;
	min-width: 0;
	padding: var(--epc-espace-2);
	border: 1px solid var(--epc-trait);
	border-radius: var(--epc-rayon-petit);
	background: var(--epc-fond);
	color: var(--epc-encre);
	font: inherit;
	font-size: 0.85rem;
}

/* La réserve de tracés : posée en tête de page, elle ne s'affiche jamais. Le
   « width: 0 » de la balise ne suffit pas partout, d'où le retrait du flux. */
.epc-reserve-icones {
	position: absolute;
	width: 0;
	height: 0;
	overflow: hidden;
}

/* ================================================ Retirer, partout ========= */

/* Le mot « retirer » en toutes lettres tenait la largeur d'une tuile et
   ramenait l'oeil sur lui à chaque ligne, alors que c'est le geste le plus
   rare de la page. En icône il attend qu'on le cherche, et le rouge ne vient
   qu'au survol : une poubelle rouge en permanence sur trente lignes ferait
   une page qui crie. */
.epc-retirer {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 1.85rem;
	height: 1.85rem;
	padding: 0;
	border: 1px solid transparent;
	border-radius: var(--epc-rayon-petit);
	background: none;
	color: var(--epc-contour);
	cursor: pointer;
	transition: color 0.12s ease, background-color 0.12s ease, border-color 0.12s ease;
}

.epc-retirer .epc-icone {
	width: 1.05rem;
	height: 1.05rem;
}

.epc-retirer:hover,
.epc-retirer:focus-visible {
	border-color: var(--epc-alerte);
	background: var(--epc-alerte-doux);
	color: var(--epc-alerte);
}

.epc-retirer:focus-visible {
	outline: 2px solid var(--epc-alerte);
	outline-offset: 1px;
}

.epc-retirer[disabled] {
	opacity: 0.4;
	cursor: default;
}

@media (prefers-reduced-motion: reduce) {
	.epc-retirer {
		transition: none;
	}
}

/* ========================================================= Les règles ====== */

.epc-regles {
	display: grid;
	gap: var(--epc-espace-4);
	grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
	margin-top: var(--epc-espace-4);
}

.epc-affiche-regles {
	border: 1px solid var(--epc-trait);
	border-radius: var(--epc-rayon);
	padding: var(--epc-espace-4);
	background: var(--epc-fond);
}

.epc-affiche-regles__tete {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--epc-espace-3);
}

.epc-affiche-regles__tete h3 {
	margin: 0;
}

.epc-affiche-regles__entete {
	margin: var(--epc-espace-3) 0;
	color: var(--epc-accent-sombre);
	font-weight: 600;
}

.epc-affiche-regles__liste {
	display: flex;
	flex-direction: column;
	gap: var(--epc-espace-2);
	margin: 0;
	padding-left: var(--epc-espace-5);
	line-height: 1.6;
}

.epc-affiche-regles__liste input {
	width: 100%;
}

/* ---------------------------------------------- L'affiche, à l'impression ---
   Le PDF plastifié de la caisse, en remplacement : gros caractères, une règle
   par ligne, et rien d'autre sur la page. Tout le reste est masqué, y compris
   le bouton qui a lancé l'impression.
   -------------------------------------------------------------------------- */

@media print {
	/*
	 * On masque par « visibility » et non par « display » : la visibilité se
	 * transmet aux descendants et se rouvre sur eux, sans qu'il faille rouvrir
	 * la chaîne des parents un à un. C'est le motif classique, et il ne dépend
	 * d'aucun sélecteur récent.
	 */
	body.epc-impression-affiche * {
		visibility: hidden;
	}

	body.epc-impression-affiche .est-a-imprimer,
	body.epc-impression-affiche .est-a-imprimer * {
		visibility: visible;
	}

	body.epc-impression-affiche .est-a-imprimer {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		border: 0;
		padding: 2cm;
		background: #ffffff;
		color: #000000;
	}

	/* Le bouton qui a lancé l'impression n'a rien à faire sur l'affiche. */
	body.epc-impression-affiche .est-a-imprimer .epc-imprimer-affiche {
		display: none;
	}

	body.epc-impression-affiche .est-a-imprimer h3 {
		margin-bottom: 1cm;
		font-size: 34pt;
		text-align: center;
	}

	body.epc-impression-affiche .est-a-imprimer .epc-affiche-regles__entete {
		margin-bottom: 1.4cm;
		color: #000000;
		font-size: 22pt;
		text-align: center;
	}

	body.epc-impression-affiche .est-a-imprimer .epc-affiche-regles__liste {
		gap: 1.1cm;
		font-size: 30pt;
		line-height: 1.35;
	}

	body.epc-impression-affiche .est-a-imprimer input {
		border: 0;
		background: transparent;
		color: #000000;
		font: inherit;
	}
}

/* Le nom d'une partie, en tête de ses leçons. Ce n'est pas une leçon : il ne
   prend ni la bordure, ni le fond, ni les gestes des lignes qui le suivent. */
.epc-lecons__partie {
	margin-top: var(--epc-espace-4);
	padding: 0 0 var(--epc-espace-1);
	border-bottom: 1px solid var(--epc-trait);
	color: var(--epc-encre-douce);
	font-size: 0.78rem;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	list-style: none;
}

.epc-lecons__partie:first-child {
	margin-top: 0;
}

.epc-lecons__partie strong {
	color: var(--epc-accent-sombre);
	letter-spacing: 0;
	text-transform: none;
}


.epc-video-lecon__adresse {
	width: 100%;
	margin-top: var(--epc-espace-2);
	font-size: 0.8rem;
}

/* Un emplacement de vidéo encore vide garde sa place : le bloc ne doit pas
   sauter au moment où le lecteur arrive. */
.epc-video-lecon__cadre[data-video] {
	display: grid;
	place-items: center;
	color: var(--epc-encre-douce);
	font-size: 0.8rem;
}

.epc-video-lecon__cadre[data-video]::before {
	content: "vidéo";
}

/* Les supports d'une partie entière, en tête de ses leçons. Ils valent pour les
   six : les répéter sous chacune alourdissait la page d'un facteur quatre. */
.epc-supports--partie {
	margin: 0 0 var(--epc-espace-4);
	border-top: 0;
	border-left: 3px solid var(--epc-accent-doux);
	padding: var(--epc-espace-2) 0 var(--epc-espace-2) var(--epc-espace-3);
}


/* ====================================================== L'observation ======
   Regarder l'espace de quelqu'un, en lecture seule. Le bandeau est en travers
   de la page et non discret dans un coin : un mode qu'on oublie finit par
   faire croire que les boutons sont cassés.
   ========================================================================== */

.epc-bandeau-observation {
	position: sticky;
	top: env(safe-area-inset-top, 0px);
	z-index: 40;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--epc-espace-3);
	padding: var(--epc-espace-3) var(--epc-espace-5);
	background: var(--epc-attention);
	color: var(--epc-sur-accent);
	font-size: 0.9rem;
}

.epc-bandeau-observation p {
	margin: 0;
	max-width: 70ch;
}

.epc-bandeau-observation strong {
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* Le bouton de sortie est blanc sur le bandeau : les jetons de couleur du site
   n'y tiendraient pas le contraste. */
.epc-bandeau-observation .epc-bouton--doux {
	flex: 0 0 auto;
	border-color: currentColor;
	background: transparent;
	color: inherit;
}

.epc-bandeau-observation .epc-bouton--doux:hover {
	background: rgba(255, 255, 255, 0.16);
}

.epc-observation {
	display: flex;
	flex-direction: column;
	gap: var(--epc-espace-2);
	margin: var(--epc-espace-4) 0;
	border-top: 1px solid var(--epc-trait);
	padding-top: var(--epc-espace-4);
}

.epc-observation__titre {
	color: var(--epc-encre-douce);
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.epc-observation__choix {
	width: 100%;
}

.epc-observation__vide {
	margin: 0;
	color: var(--epc-encre-douce);
	font-size: 0.85rem;
}

/* La limite du mode, dite dans le bandeau : on montre les données de la
   personne, pas ses droits. Sans cette phrase, on croirait voir son menu. */
.epc-bandeau-observation__nuance {
	display: block;
	margin-top: 2px;
	font-size: 0.82rem;
	opacity: 0.9;
}

/* ===================================================== Le mode édition =====
   Éteint par défaut. Allumé, il se voit : on doit savoir qu'on est dans l'état
   où un clic de travers change quelque chose.
   ========================================================================== */

.epc-rail__edition small {
	display: block;
	color: var(--epc-encre-douce);
	font-size: 0.72rem;
}

.epc-rail__edition.est-active {
	color: var(--epc-accent-sombre);
}

.epc-rail__edition.est-active .epc-rail__pastille {
	background: var(--epc-accent);
	color: var(--epc-sur-accent);
}

.epc-rail__edition.est-active small {
	color: var(--epc-accent-sombre);
	font-weight: 700;
}

/* Les supports d'une leçon sur la carte de « Mes dimanches ». Repliés : on
   vient ici pour ouvrir sa leçon, pas pour parcourir une liste. */
.epc-ma-seance__supports {
	flex: 1 1 100%;
	margin-top: var(--epc-espace-3);
	border-top: 1px solid var(--epc-trait);
	padding-top: var(--epc-espace-3);
}

.epc-ma-seance__supports > summary {
	display: flex;
	align-items: baseline;
	gap: var(--epc-espace-2);
}

/* Le bandeau des écrans de gestion quand le mode édition est éteint. Le contenu
   qui suit est mis hors de portée : sans cela, les champs auraient l'air de
   marcher et chaque enregistrement échouerait en silence. */
.epc-bandeau-lecture {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--epc-espace-3);
	margin-bottom: var(--epc-espace-4);
	border: 1px solid var(--epc-attention);
	border-radius: var(--epc-rayon);
	padding: var(--epc-espace-3) var(--epc-espace-4);
	background: var(--epc-attention-doux);
	color: var(--epc-attention);
}

.epc-bandeau-lecture p {
	margin: 0;
	max-width: 62ch;
}

.epc-bandeau-lecture .epc-bouton--doux {
	flex: 0 0 auto;
	border-color: currentColor;
	color: inherit;
}

/*
 * Ce qui est inerte n'est pas grisé : on ouvre ces pages d'abord pour lire, et
 * un écran assombri se lit mal. Le bandeau au-dessus suffit à dire l'état ; un
 * liseré discret rappelle la limite sans gêner la lecture.
 */
.est-inerte {
	border-left: 2px solid var(--epc-attention-doux);
	padding-left: var(--epc-espace-3);
}

/* ============================================ Les livres, une ligne chacun ==
   Soixante-trois titres tenaient sur trois lignes chacun : on ne parcourt pas
   une bibliothèque en faisant défiler deux cents lignes.
   ========================================================================== */

.epc-livres {
	display: flex;
	flex-direction: column;
	gap: 2px;
	margin: var(--epc-espace-4) 0 0;
	padding: 0;
	list-style: none;
}

.epc-livre {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--epc-espace-2) var(--epc-espace-3);
	border-radius: var(--epc-rayon-petit);
	padding: var(--epc-espace-1) var(--epc-espace-2);
	font-size: 0.9rem;
}

.epc-livre:nth-child(odd) {
	background: var(--epc-fond-doux);
}

/* L'état « lu » à gauche : c'est ce qu'on cherche du regard en choisissant. */
/* La case porte son mot : une colonne de coches muettes ne disait pas ce
   qu'elle cochait, et rien à l'écran ne permettait de le deviner. */
.epc-livre__lu {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	gap: 4px;
	min-width: 3.6rem;
	color: var(--epc-encre-douce);
}

.epc-livre__lu-mot {
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.epc-livre__lu-marque {
	width: 0.9rem;
	text-align: center;
}

/* Lu se distingue par la couleur, pas seulement par la coche : la coche et le
   point se ressemblent trop pour porter seuls l'information. */
.epc-livre__lu.est-coche,
.epc-livre.est-lu .epc-livre__lu {
	color: var(--epc-accent);
}

label.epc-livre__lu {
	cursor: pointer;
}

.epc-livre.est-lu .epc-livre__titre {
	color: var(--epc-encre-douce);
}

.epc-livre__titre {
	flex: 1 1 14rem;
	min-width: 0;
	border: 0;
	background: transparent;
	color: inherit;
	font: inherit;
	overflow-wrap: anywhere;
}

input.epc-livre__titre:focus {
	border-radius: var(--epc-rayon-petit);
	background: var(--epc-fond);
	outline: 2px solid var(--epc-accent);
}

.epc-livre__age {
	flex: 0 0 auto;
	border-radius: 999px;
	padding: 0 var(--epc-espace-2);
	background: var(--epc-accent-doux);
	color: var(--epc-accent-sombre);
	font-size: 0.72rem;
	white-space: nowrap;
}

.epc-livre__avancement {
	flex: 0 1 11rem;
	min-width: 0;
	border: 0;
	background: transparent;
	color: var(--epc-encre-douce);
	font: inherit;
	font-size: 0.82rem;
}

input.epc-livre__avancement:focus {
	border-radius: var(--epc-rayon-petit);
	background: var(--epc-fond);
	outline: 2px solid var(--epc-accent);
}

.epc-livre__date {
	flex: 0 0 auto;
	color: var(--epc-encre-douce);
	font-size: 0.72rem;
	white-space: nowrap;
}

/* ========================================== Les enfants, en colonnes serrées */

.epc-enfants {
	display: flex;
	flex-direction: column;
	gap: 1px;
	margin: var(--epc-espace-3) 0 0;
	padding: 0;
	list-style: none;
	/* La liste reste visée même vide : c'est la zone où l'on lâche une tuile. */
	min-height: 2.4rem;
}

.epc-enfants__vide {
	padding: var(--epc-espace-2) var(--epc-espace-1);
	font-size: 0.8rem;
}

.epc-enfant {
	display: flex;
	align-items: center;
	gap: 2px;
	border-radius: var(--epc-rayon-petit);
	padding: 1px 2px;
	font-size: 0.88rem;
}

.epc-enfant:nth-child(odd) {
	background: var(--epc-fond-doux);
}

.epc-enfant.est-saisie {
	opacity: 0.45;
}

/* La colonne visée se signale pendant le glisser : sans elle, on lâche à
   l'aveugle et rien ne dit où l'enfant va atterrir. */
.epc-groupe-enfants.est-cible {
	outline: 2px dashed var(--epc-accent);
	outline-offset: 3px;
}

.epc-enfant__poignee {
	display: inline-flex;
	align-items: center;
	flex: 0 0 auto;
	padding: 2px;
	border: 0;
	border-radius: var(--epc-rayon-petit);
	background: none;
	color: var(--epc-contour);
	cursor: grab;
	opacity: 0.35;
	transition: opacity 0.15s ease;
}

.epc-enfant__poignee .epc-icone {
	width: 0.85rem;
	height: 0.85rem;
}

.epc-enfant__prenom {
	flex: 1 1 auto;
	min-width: 0;
	padding: 2px 4px;
	border: 0;
	background: transparent;
	color: inherit;
	font: inherit;
}

input.epc-enfant__prenom:focus {
	border-radius: var(--epc-rayon-petit);
	background: var(--epc-fond);
	outline: 2px solid var(--epc-accent);
}

/* Poignée et poubelle s'effacent au repos : vingt-cinq lignes portant deux
   boutons chacune font un mur, et aucun des deux gestes n'est courant. Au
   tactile, où il n'y a pas de survol, ils restent visibles. */
.epc-enfant .epc-retirer {
	width: 1.55rem;
	height: 1.55rem;
	opacity: 0.35;
}

.epc-enfant .epc-retirer .epc-icone {
	width: 0.92rem;
	height: 0.92rem;
}

.epc-enfant:hover .epc-enfant__poignee,
.epc-enfant:hover .epc-retirer,
.epc-enfant:focus-within .epc-enfant__poignee,
.epc-enfant:focus-within .epc-retirer,
.epc-enfant__poignee:focus-visible,
.epc-enfant .epc-retirer:focus-visible {
	opacity: 1;
}

.epc-enfant__poignee:focus-visible {
	outline: 2px solid var(--epc-accent);
	outline-offset: 1px;
}

@media (hover: none) {
	.epc-enfant__poignee,
	.epc-enfant .epc-retirer {
		opacity: 1;
	}
}

@media (prefers-reduced-motion: reduce) {
	.epc-enfant__poignee,
	.epc-retirer {
		transition: none;
	}
}