/**
 * Bloc « Horaires du jour ».
 * Carte et ligne : design_handoff_refonte_mobile (prévaut) ; ancien bandeau : design_handoff_mosquee_ismail.
 * Les couleurs et polices lisent les préréglages du thème, avec des valeurs de repli :
 * le bloc reste lisible avec un autre thème.
 */

.mi-horaires {
	--mi-vert: var(--wp--preset--color--green, #073f30);
	--mi-vert-900: var(--wp--preset--color--green-900, #022d22);
	--mi-dore: var(--wp--preset--color--gold, #e7b95d);
	--mi-dore-clair: var(--wp--preset--color--gold-light, #f2d48d);
	/* Turquoise du logo de 2023 (#006963), éclairci pour le fond vert (6,5:1, comme le doré) : le temps qui passe. */
	--mi-turquoise: var(--wp--preset--color--turquoise, #6ecfc9);
	--mi-ivoire: var(--wp--preset--color--ivory, #f5ecd9);
	--mi-sauge: var(--wp--preset--color--sage, #dce7d5);
	--mi-papier: var(--wp--preset--color--paper, #fffbf2);
	--mi-encre-3: var(--wp--preset--color--ink-3, #3f5a4f);
	--mi-ligne-forte: var(--wp--preset--color--line-strong, #d9c9a6);
	--mi-sable: var(--wp--preset--color--sand, #e8ddc5);
	--mi-police-titre: var(--wp--preset--font-family--cormorant-garamond, "Cormorant Garamond", Georgia, serif);
	--mi-police-texte: var(--wp--preset--font-family--hanken-grotesk, "Hanken Grotesk", system-ui, sans-serif);

	container-type: inline-size;
	container-name: mi-horaires;
	font-family: var(--mi-police-texte);
	font-variant-numeric: tabular-nums;
	line-height: 1.25;
	color: var(--mi-vert-900);
}

/* Spécificité nulle : les marges des composants ci-dessous l'emportent. */
:where(.mi-horaires) :where(p, ol, h2, h3, h4) {
	margin: 0;
}

.mi-horaires .screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.mi-horaires a:focus-visible,
.mi-horaires button:focus-visible {
	outline: 2px solid var(--mi-vert);
	outline-offset: 3px;
	border-radius: 4px;
}

/* ------------------------------------------------------------------
 * Carte — handoff « refonte mobile » (design_handoff_refonte_mobile, écran E et § 13)
 * Une seule composition, de 320 px à la colonne de droite de l'accueil ordinateur :
 * date, date hégirienne, six cases en 3 × 2, « Calendrier du mois → », filet, pied (financement…).
 * La carte reste toujours dans le flux ; avec l'amarrage (accueil, ordinateur), elle est invisible tant qu'elle
 * est rétractée dans la barre, sans que sa place change.
 * ------------------------------------------------------------------ */

.mi-horaires__carte {
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 16px 14px 12px;
	background: var(--mi-papier);
	border: 1px solid #eadfc6;
	border-radius: 22px;
	box-shadow: 0 22px 44px -30px rgba(2, 45, 34, 0.4);
	/* « Voir les horaires » et les ancres : la carte arrive juste sous l'en-tête, jamais dessous. */
	scroll-margin-top: calc(var(--mi-entete-hauteur, 60px) + 12px);
}

.mi-horaires__carte:focus {
	outline: none;
}

.mi-horaires__carte:focus-visible {
	outline: 2px solid var(--mi-vert);
	outline-offset: 3px;
}

/* Sans lien ni pied : marge basse égale aux côtés. */
.mi-horaires__carte:not(:has(> .mi-horaires__calendrier, > .mi-horaires__pied)) {
	padding-bottom: 14px;
}

.mi-horaires__tete {
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding: 0 4px;
	min-width: 0;
}

.mi-horaires__date {
	font-family: var(--mi-police-titre);
	font-size: 26px;
	font-weight: 600;
	line-height: 1.1;
	text-wrap: balance;
}

.mi-horaires__hegire {
	font-size: 14px;
	line-height: 1.35;
	color: var(--mi-encre-3);
}

/* Trois colonnes ; moins quand le texte est agrandi (aucune heure coupée ni débordante). */
.mi-horaires__liste {
	list-style: none;
	padding: 0;
	display: grid;
	--mi-h-ecart: 6px;
	grid-template-columns: repeat(auto-fit, minmax(max(calc((100% - 2 * var(--mi-h-ecart)) / 3), 4.6em), 1fr));
	gap: var(--mi-h-ecart);
}

.mi-horaires__case {
	box-sizing: border-box;
	min-width: 0;
	padding: 10px 10px 9px;
	border-radius: 14px;
	background: var(--mi-ivoire);
	display: flex;
	flex-direction: column;
	gap: 1px;
}

.mi-horaires__nom {
	font-size: 13px;
	font-weight: 600;
	line-height: 1.3;
	color: var(--wp--preset--color--ink-2, #2c4a3f);
	overflow-wrap: anywhere;
}

.mi-horaires__heure {
	font-size: 24px;
	font-weight: 600;
	line-height: 1.1;
	white-space: nowrap;
}

/* Retour à la ligne plutôt que points de suspension : rien n'est coupé si l'espacement du texte est augmenté (WCAG 1.4.12). */
.mi-horaires__statut,
.mi-horaires__iqama {
	font-size: 12px;
	line-height: 1.3;
	color: var(--mi-encre-3);
	overflow-wrap: anywhere;
}

.mi-horaires__statut:empty {
	display: none;
}

/* Vendredi : la case Dohr devient « Joumou'a » (prêche, puis prière), liseré doré. */
.mi-horaires__case.is-joumoua:not(.is-prochaine) {
	box-shadow: inset 0 0 0 1.5px var(--mi-dore);
}

/* Chourouq : lever du soleil, pas une prière (mention toujours écrite). */
.mi-horaires__case.is-lever {
	background: transparent;
	border: 1px dashed var(--mi-ligne-forte);
}

.mi-horaires__case.is-lever .mi-horaires__heure {
	color: var(--wp--preset--color--ink-2, #2c4a3f);
}

/* Prochaine prière (ou iqama en cours). */
.mi-horaires__case.is-prochaine {
	background: var(--mi-vert);
	color: var(--mi-ivoire);
}

.mi-horaires__case.is-prochaine .mi-horaires__nom {
	color: var(--mi-dore-clair);
}

.mi-horaires__case.is-prochaine .mi-horaires__statut,
.mi-horaires__case.is-prochaine .mi-horaires__iqama {
	color: var(--mi-sauge);
}

/* « Calendrier du mois → » : cible de 44 px, alignée sur « Voir le bilan → » du pied. */
.mi-horaires__calendrier {
	display: flex;
	justify-content: flex-end;
	padding: 0 4px;
	margin-block: -4px -6px;
}

.mi-horaires__lien-calendrier {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-height: 44px;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.3;
	color: var(--mi-vert);
	text-decoration: none;
}

.mi-horaires__lien-calendrier:hover {
	color: var(--mi-vert-900);
	text-decoration: underline;
	text-underline-offset: 4px;
}

/* Pied : blocs placés dans la carte (annonce, financement du projet), après un filet discret. */
.mi-horaires__pied {
	margin-top: 2px;
	padding: 12px 4px 2px;
	border-top: 1px solid #eadfc6;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.mi-horaires__pied > * {
	margin-block: 0;
}

/* Pied devenu vide (annonce retirée à la fin de son dernier jour) : rien à séparer. */
.mi-horaires__pied:not(:has(> *)) {
	display: none;
}

/* Pied repris après actualisation (changement de date) : pas d'animation d'entrée rejouée. */
.mi-horaires__pied.is-repris * {
	animation: none !important;
}

/* Données absentes : aucun horaire affiché. */
.mi-horaires__vide {
	padding: 14px 16px;
	border: 1px dashed #b79b5b;
	border-radius: 14px;
	background: var(--mi-ivoire);
}

.mi-horaires__vide-titre {
	font-family: var(--mi-police-titre);
	font-size: 22px;
	font-weight: 600;
	line-height: 1.1;
}

.mi-horaires__vide-texte {
	margin-top: 6px;
	font-size: 14px;
	line-height: 1.5;
	color: var(--mi-encre-3);
}

/* Page servie un autre jour et actualisation impossible : horaires retirés, message explicite. */
.mi-horaires__alerte {
	padding: 12px 14px;
	border: 1px solid #b3402a;
	border-radius: 12px;
	background: #fbe9e4;
	color: #8a2a18;
	font-size: 14px;
	line-height: 1.5;
}

.mi-horaires__alerte button {
	margin-left: 8px;
	min-height: 44px;
	padding: 0 16px;
	border: 1.5px solid currentColor;
	border-radius: 999px;
	background: transparent;
	color: inherit;
	font: inherit;
	font-weight: 600;
	cursor: pointer;
}

.mi-horaires.is-perime .mi-horaires__liste,
.mi-horaires.is-perime .mi-bandeau {
	display: none;
}

.mi-horaires.is-chargement .mi-horaires__liste {
	opacity: 0.45;
}

/* Carte large (colonne de l'accueil ordinateur, page Horaires) : valeurs « ordinateur » du handoff. */
@container mi-horaires (min-width: 460px) {
	.mi-horaires__carte {
		gap: 14px;
		padding: 24px 24px 14px;
		border-radius: 28px;
		box-shadow: 0 28px 60px -34px rgba(2, 45, 34, 0.38);
	}

	.mi-horaires__date {
		font-size: 30px;
	}

	.mi-horaires__liste {
		--mi-h-ecart: 8px;
	}

	.mi-horaires__case {
		padding: 12px 14px;
		border-radius: 16px;
	}

	.mi-horaires__nom {
		font-size: 14px;
	}

	.mi-horaires__heure {
		font-size: 30px;
		line-height: 1.15;
	}

	.mi-horaires__pied {
		padding-top: 14px;
	}
}

/* ------------------------------------------------------------------
 * Style « Une rangée » (accueil sur ordinateur, D33) : disposition d'ordinateur d'avant la refonte
 * (design_handoff_mosquee_ismail) avec le contenu allégé d'aujourd'hui. Date et date hégirienne à gauche,
 * « Calendrier du mois → » dessous, six cases en ligne, pied (annonce, financement) sur toute la largeur.
 * Sous 880 px de large, la carte garde la composition ordinaire ci-dessus.
 * ------------------------------------------------------------------ */

@container mi-horaires (min-width: 880px) {
	.is-style-rangee .mi-horaires__carte {
		display: grid;
		/* La colonne du titre s'élargit pour les dates longues (« Dimanche 27 septembre »), 320 px au plus. */
		grid-template-columns: fit-content(320px) minmax(0, 1fr);
		grid-template-areas:
			"tete liste"
			"calendrier liste"
			"pied pied"
			"alerte alerte";
		gap: 0 28px;
		align-items: center;
		padding: 28px 32px 20px;
		border-radius: 24px;
		box-shadow: 0 28px 60px -28px rgba(2, 45, 34, 0.38), 0 2px 6px rgba(2, 45, 34, 0.05);
	}

	/* Sans pied : marge basse égale à la marge haute. */
	.is-style-rangee .mi-horaires__carte:not(:has(> .mi-horaires__pied)) {
		padding-bottom: 28px;
	}

	.is-style-rangee .mi-horaires__tete {
		grid-area: tete;
		align-self: end;
		gap: 8px;
		min-width: 250px;
		padding: 0;
	}

	.is-style-rangee .mi-horaires__date {
		font-size: 30px;
		line-height: 1;
		white-space: nowrap;
	}

	/* Date hégirienne : même famille que la date civile, en retrait, rapprochée d'elle. */
	.is-style-rangee .mi-horaires__hegire {
		margin-top: -3px;
		font-family: var(--mi-police-titre);
		font-size: 20px;
		font-weight: 600;
		line-height: 1.1;
	}

	.is-style-rangee .mi-horaires__calendrier {
		grid-area: calendrier;
		align-self: start;
		justify-content: flex-start;
		margin: 6px 0 0;
		padding: 0;
	}

	.is-style-rangee .mi-horaires__lien-calendrier {
		min-height: 32px;
	}

	/* Six cases en ligne ; moins par ligne quand le texte est agrandi (aucune heure coupée ni débordante). */
	.is-style-rangee .mi-horaires__liste,
	.is-style-rangee .mi-horaires__vide {
		grid-area: liste;
	}

	.is-style-rangee .mi-horaires__liste {
		--mi-h-ecart: 8px;
		grid-template-columns: repeat(auto-fit, minmax(max(calc((100% - 5 * var(--mi-h-ecart)) / 6), 5.4em), 1fr));
	}

	.is-style-rangee .mi-horaires__case {
		display: grid;
		grid-template-rows: auto 1fr auto auto;
		align-items: center;
		gap: 0;
		min-height: 108px;
		padding: 14px 16px;
		border-radius: 16px;
	}

	.is-style-rangee .mi-horaires__nom {
		align-self: start;
		font-size: 14px;
	}

	.is-style-rangee .mi-horaires__heure {
		font-size: 34px;
		line-height: 1;
		letter-spacing: -0.01em;
	}

	.is-style-rangee .mi-horaires__case.is-lever .mi-horaires__heure {
		font-size: 28px;
		font-weight: 500;
	}

	.is-style-rangee .mi-horaires__statut,
	.is-style-rangee .mi-horaires__iqama {
		align-self: end;
	}

	.is-style-rangee .mi-horaires__iqama {
		margin-top: 2px;
	}

	.is-style-rangee .mi-horaires__pied {
		grid-area: pied;
		margin-top: 20px;
		padding: 16px 0 0;
		border-top-color: #efe5cf;
	}

	.is-style-rangee .mi-horaires__alerte {
		grid-area: alerte;
		margin-top: 14px;
	}
}

/* Carte étroite (880–1049 px) : colonne du titre fixe, la date passe sur deux lignes si besoin. */
@container mi-horaires (min-width: 880px) and (max-width: 1049px) {
	.is-style-rangee .mi-horaires__carte {
		grid-template-columns: 250px minmax(0, 1fr);
	}

	.is-style-rangee .mi-horaires__date {
		white-space: normal;
		text-wrap: balance;
	}
}

/* ------------------------------------------------------------------
 * Bandeau compact (mode « bandeau » et amarrage)
 * ------------------------------------------------------------------ */

/* Le bandeau est son propre conteneur : sa variante dépend de sa largeur (pleine page une fois amarré). */
.mi-bandeau {
	container: mi-bandeau / inline-size;
	background: var(--mi-vert);
	color: var(--mi-ivoire);
}

.mi-bandeau__interieur {
	box-sizing: border-box;
	height: 52px;
	padding: 0 48px;
	display: grid;
	grid-template-columns: 260px minmax(0, 1fr) 260px;
	align-items: center;
	gap: 16px;
	font-size: 14px;
}

.mi-bandeau[hidden] {
	display: none;
}

.mi-bandeau a:focus-visible {
	outline-color: var(--mi-dore-clair);
}

.mi-bandeau__titre {
	display: flex;
	align-items: center;
	gap: 10px;
	white-space: nowrap;
}

.mi-bandeau__mot {
	font-weight: 600;
}

/* Date civile, puis date hégirienne dessous. */
.mi-bandeau__dates {
	display: flex;
	flex-direction: column;
	line-height: 1.2;
	color: var(--mi-sauge);
}

.mi-bandeau__hegire {
	font-size: 12px;
}

/* Formes longue et courte des dates : une seule affichée (l'autre est aussi retirée des lecteurs d'écran). */
.mi-bandeau__court {
	display: none;
}

/* Horaires et date du jour : côte à côte quand la place le permet (le conteneur s'efface),
   sinon dans la même case, en alternance (voir plus bas). */
.mi-bandeau__faces {
	display: contents;
}

.mi-bandeau__jour {
	display: none;
}

.mi-bandeau__liste {
	list-style: none;
	padding: 0;
	display: flex;
	justify-content: center;
	gap: 6px;
	min-width: 0;
}

.mi-bandeau__horaire {
	display: flex;
	align-items: baseline;
	gap: 8px;
	padding: 6px 12px;
	white-space: nowrap;
}

.mi-bandeau__nom {
	color: var(--mi-sauge);
}

.mi-bandeau__heure {
	font-weight: 600;
}

.mi-bandeau__horaire.is-lever .mi-bandeau__heure {
	font-weight: 400;
	color: var(--mi-sauge);
}

.mi-bandeau__horaire.is-prochaine {
	border-radius: 999px;
	background: var(--mi-dore);
	color: var(--mi-vert-900);
}

.mi-bandeau__horaire.is-prochaine .mi-bandeau__nom {
	font-weight: 500;
	color: var(--mi-vert-900);
}

.mi-bandeau__horaire.is-prochaine .mi-bandeau__heure {
	font-weight: 700;
}

.mi-bandeau__prochaine,
.mi-bandeau__bouton {
	display: none;
}

.mi-bandeau__actions {
	display: flex;
	justify-content: flex-end;
	align-items: center;
	gap: 12px;
}

.mi-bandeau__lien {
	display: inline-block;
	padding: 12px 0;
	line-height: 20px;
	font-weight: 600;
	color: var(--mi-ivoire);
	text-decoration: underline;
	text-underline-offset: 4px;
	white-space: nowrap;
}

.mi-bandeau__lien:hover {
	color: var(--mi-dore-clair);
}

.mi-bandeau__vide {
	text-align: center;
	color: var(--mi-sauge);
}

@container mi-bandeau (max-width: 1099px) {
	.mi-bandeau__lieu,
	.mi-bandeau__hegire .mi-bandeau__long {
		display: none;
	}

	.mi-bandeau__hegire .mi-bandeau__court {
		display: inline;
	}

	.mi-bandeau__interieur {
		grid-template-columns: auto minmax(0, 1fr) auto;
		padding: 0 24px;
	}

	.mi-bandeau__horaire {
		padding: 6px 8px;
	}
}

/* Bandeau étroit : plus de place pour les dates à côté du titre. Elles alternent avec les horaires
   (9 s d'horaires, 4 s de date), dans la même case : la hauteur du bandeau ne change pas.
   Pause au survol et au focus ; aucune alternance si l'utilisateur limite les animations. */
@container mi-bandeau (max-width: 959px) {
	.mi-bandeau__dates {
		display: none;
	}

	.mi-bandeau__faces {
		display: grid;
		grid-template-columns: minmax(0, 1fr);
		align-items: center;
		min-width: 0;
	}

	.mi-bandeau__faces > * {
		grid-area: 1 / 1;
		min-width: 0;
	}

	.mi-bandeau__faces.is-alterne .mi-bandeau__jour {
		display: flex;
		justify-content: center;
		align-items: baseline;
		gap: 0 8px;
		min-width: 0;
		white-space: nowrap;
		opacity: 0;
	}

	.mi-bandeau__faces.is-alterne > * {
		animation: mi-bandeau-horaires 15s cubic-bezier(0.2, 0.8, 0.2, 1) infinite;
	}

	.mi-bandeau__faces.is-alterne > .mi-bandeau__jour {
		animation-name: mi-bandeau-date;
	}

	.mi-bandeau:hover .mi-bandeau__faces > *,
	.mi-bandeau:focus-within .mi-bandeau__faces > * {
		animation-play-state: paused;
	}

	.mi-bandeau__separateur {
		color: var(--mi-sauge);
	}

	.mi-bandeau__jour-civil {
		color: var(--mi-sauge);
	}

	.mi-bandeau__jour-hegire {
		font-weight: 600;
	}
}

/* Face sortante vers le haut, face entrante par le bas. */
@keyframes mi-bandeau-horaires {
	0%,
	62% {
		opacity: 1;
		transform: none;
	}

	66%,
	95.9% {
		opacity: 0;
		transform: translateY(-0.5em);
	}

	96% {
		opacity: 0;
		transform: translateY(0.5em);
	}

	100% {
		opacity: 1;
		transform: none;
	}
}

@keyframes mi-bandeau-date {
	0%,
	63% {
		opacity: 0;
		transform: translateY(0.5em);
	}

	67%,
	93% {
		opacity: 1;
		transform: none;
	}

	97%,
	100% {
		opacity: 0;
		transform: translateY(-0.5em);
	}
}

@media (prefers-reduced-motion: reduce) {
	.mi-bandeau__faces.is-alterne > * {
		animation: none;
	}

	.mi-bandeau__faces.is-alterne .mi-bandeau__jour {
		display: none;
	}
}

/* Bandeau mobile : prochaine prière + « Voir les horaires ». */
@container mi-bandeau (max-width: 799px) {
	.mi-bandeau__interieur {
		height: 56px;
		padding: 0 8px 0 18px;
		display: flex;
		justify-content: space-between;
		gap: 10px;
	}

	.mi-bandeau__titre,
	.mi-bandeau__liste,
	.mi-bandeau__lien {
		display: none;
	}

	/* Date du jour, même disposition que la prochaine prière : « dim. 27 sept. » puis « 16 Rabi’ II 1448 ». */
	.mi-bandeau__faces.is-alterne .mi-bandeau__jour {
		flex-wrap: wrap;
		justify-content: flex-start;
	}

	.mi-bandeau__jour .mi-bandeau__long,
	.mi-bandeau__separateur {
		display: none;
	}

	.mi-bandeau__jour .mi-bandeau__court {
		display: inline;
	}

	.mi-bandeau__jour-civil {
		font-size: 13px;
	}

	.mi-bandeau__jour-hegire {
		font-size: 16px;
		color: var(--mi-dore-clair);
	}

	/* Une ligne ; faute de place (écran étroit, « Fajr demain »), la prière et l'heure passent
	   sous le libellé plutôt que de chevaucher le bouton. */
	.mi-bandeau__prochaine {
		display: flex;
		flex-wrap: wrap;
		align-items: baseline;
		gap: 0 8px;
		min-width: 0;
		white-space: nowrap;
	}

	.mi-bandeau__prochaine-valeur {
		display: flex;
		align-items: baseline;
		gap: 8px;
	}

	.mi-bandeau__prochaine-libelle {
		font-size: 13px;
		color: var(--mi-sauge);
	}

	.mi-bandeau__prochaine-nom {
		font-size: 16px;
		font-weight: 600;
		color: var(--mi-dore-clair);
	}

	.mi-bandeau__prochaine-heure {
		font-size: 18px;
		font-weight: 700;
	}

	.mi-bandeau__prochaine.is-vide {
		font-size: 13px;
		line-height: 1.3;
		white-space: normal;
		color: var(--mi-sauge);
	}

	.mi-bandeau__bouton {
		display: inline-flex;
		align-items: center;
		height: 44px;
		padding: 0 14px;
		border: 1px solid rgba(242, 212, 141, 0.6);
		border-radius: 999px;
		color: var(--mi-ivoire);
		font-size: 13px;
		font-weight: 600;
		text-decoration: none;
		white-space: nowrap;
	}

	.mi-bandeau__bouton:hover {
		background: rgba(245, 236, 217, 0.1);
	}
}

/* ------------------------------------------------------------------
 * Barre des horaires (handoff refonte mobile, B, § 3 et menu ; six horaires : demande du 10/10/2026)
 * Même composant sous l'en-tête de l'accueil (mobile), dans l'en-tête du site (ordinateur), en bandeau relais
 * (la carte de l'accueil s'y rétracte) et dans le menu mobile (ligne « Prochaine prière » seule).
 * Les six horaires s'affichent dès que la barre est assez large ; sinon, la ligne « Prochaine prière » seule.
 * Chaque groupe reste insécable ; seule la ligne passe à la ligne (jamais « Prochaine / prière »).
 * ------------------------------------------------------------------ */

/* Ligne collante (accueil) : reste sous l'en-tête pendant tout le défilement (au-dessous du menu ouvert). */
.mi-horaires--collante {
	position: sticky;
	top: var(--mi-entete-hauteur, 60px);
	z-index: 90;
}

.mi-ligne {
	/* Couleur du temps : délai et fil de la pastille (le doré reste au nom de la prochaine prière). */
	--mi-fil-couleur: var(--mi-turquoise);
	container: mi-ligne / inline-size;
	background: var(--mi-vert);
	color: var(--mi-ivoire);
	font-family: var(--mi-police-texte);
}

.mi-ligne__interieur {
	box-sizing: border-box;
	display: flex;
	align-items: center;
	gap: 8px;
	min-height: 52px;
	padding: 4px max(8px, env(safe-area-inset-right)) 4px max(16px, env(safe-area-inset-left));
}

.mi-ligne__prochaine {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0 8px;
	line-height: 1.35;
}

.mi-ligne__libelle,
.mi-ligne__delai {
	font-size: 13px;
	color: var(--mi-sauge);
	white-space: nowrap;
}

.mi-ligne__valeur {
	white-space: nowrap;
}

.mi-ligne__nom {
	font-size: 16px;
	font-weight: 600;
	color: var(--mi-dore-clair);
}

.mi-ligne__heure {
	font-size: 18px;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

.mi-ligne__prochaine.is-vide {
	font-size: 14px;
	color: var(--mi-sauge);
}

/* Horaires d'un autre jour non actualisés : date et six horaires retirés (view.js), quelle que soit la largeur. */
.mi-ligne__jour[hidden],
.mi-ligne__horaires[hidden] {
	display: none !important;
}

/* Date grégorienne · hégirienne : ordinateur seulement. */
.mi-ligne__jour {
	display: none;
	font-size: 14px;
	color: var(--mi-sauge);
	text-align: center;
}

/* Six horaires : nom au-dessus de l'heure ; la prochaine prière dans une pastille dorée, avec son délai. */
.mi-ligne__horaires {
	display: none;
	flex: 1;
	min-width: 0;
	justify-content: space-between;
	align-items: center;
	gap: 2px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.mi-ligne__horaire {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 2px 4px;
	border: 1px solid transparent;
	border-radius: 10px;
	line-height: 1.15;
	text-align: center;
	white-space: nowrap;
}

.mi-ligne__horaire-nom {
	font-size: 11px;
	color: var(--mi-sauge);
}

.mi-ligne__horaire-heure {
	font-size: 15px;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

/* « Iqama dans 5 min », « Prêche dans 3 h » : sur deux lignes (après « Iqama ») si la barre manque de place. */
.mi-ligne__horaire-delai {
	font-size: 11px;
	color: var(--mi-fil-couleur);
	white-space: normal;
}

.mi-ligne__horaire-delai:empty {
	display: none;
}

/* Chourouq : lever du soleil, pas une prière (heure plus discrète). */
.mi-ligne__horaire.is-lever .mi-ligne__horaire-heure {
	font-weight: 500;
	color: var(--mi-sauge);
}

/* Pastille : bordure discrète, sur laquelle avance le fil (view.js : --mi-fil, de 0 à 1). */
.mi-ligne__horaire.is-prochaine {
	background: rgba(245, 236, 217, 0.08);
	border-color: rgba(245, 236, 217, 0.24);
}

/* Téléphone : trait posé sur le bord bas de la pastille, qui se remplit de gauche à droite. */
.mi-ligne__horaire.is-prochaine::after {
	content: "";
	position: absolute;
	left: 9px;
	right: 9px;
	bottom: -1px;
	height: 2px;
	border-radius: 1px;
	background: var(--mi-fil-couleur);
	transform: scaleX(var(--mi-fil, 0));
	transform-origin: left center;
}

/* Ordinateur : le contour entier de la pastille se trace (SVG ajouté par view.js). */
.mi-ligne__fil {
	display: none;
}

.mi-ligne__fil rect {
	fill: none;
	stroke: var(--mi-fil-couleur);
	stroke-width: 1.5;
	stroke-linecap: round;
	stroke-dasharray: 100 100;
	stroke-dashoffset: calc((1 - var(--mi-fil, 0)) * 100);
}

.mi-ligne__horaires.is-anime .mi-ligne__horaire::after {
	transition: transform 900ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.mi-ligne__horaires.is-anime .mi-ligne__fil rect {
	transition: stroke-dashoffset 900ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

@media (prefers-reduced-motion: reduce) {
	.mi-ligne__horaires.is-anime .mi-ligne__horaire::after,
	.mi-ligne__horaires.is-anime .mi-ligne__fil rect {
		transition: none;
	}
}

.mi-ligne__horaire.is-prochaine .mi-ligne__horaire-nom {
	color: var(--mi-dore-clair);
	font-weight: 600;
}

.mi-ligne__bouton {
	flex: none;
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	padding: 0 14px;
	border: 1px solid rgba(242, 212, 141, 0.75);
	border-radius: 999px;
	color: var(--mi-ivoire);
	font-size: 14px;
	font-weight: 600;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
}

.mi-ligne__bouton:hover {
	background: rgba(245, 236, 217, 0.1);
	color: var(--mi-ivoire);
}

.mi-ligne a:focus-visible {
	outline: 2px solid var(--mi-dore-clair);
	outline-offset: 3px;
	border-radius: 999px;
}

.mi-ligne__bouton-long,
.mi-ligne--relais .mi-ligne__bouton-court {
	display: none;
}

.mi-ligne--relais .mi-ligne__bouton-long {
	display: inline;
}

/* Assez de place pour les six horaires : ils remplacent la ligne « Prochaine prière », qui reste lue. */
@container mi-ligne (min-width: 370px) {
	.mi-ligne__horaires {
		display: flex;
	}

	.mi-ligne__interieur:has(> .mi-ligne__horaires:not([hidden])) > .mi-ligne__prochaine {
		position: absolute;
		width: 1px;
		height: 1px;
		margin: -1px;
		padding: 0;
		overflow: hidden;
		clip: rect(0 0 0 0);
		clip-path: inset(50%);
		white-space: nowrap;
		border: 0;
	}

	.mi-ligne__interieur:has(> .mi-ligne__horaires:not([hidden])) > .mi-ligne__bouton {
		padding: 0 12px;
		font-size: 13px;
	}
}

/* Téléphone : cinq prières, Chourouq (lever du soleil) n'y tient pas. */
@container mi-ligne (max-width: 479px) {
	.mi-ligne__horaire.is-lever {
		display: none;
	}
}

@container mi-ligne (min-width: 900px) {
	.mi-ligne__interieur {
		justify-content: space-between;
		gap: 24px;
		padding-inline: 48px;
	}

	/* Barre : date | six horaires (centrés) | bouton. */
	.mi-ligne--page .mi-ligne__interieur,
	.mi-ligne--relais .mi-ligne__interieur {
		display: grid;
		grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
	}

	.mi-ligne__prochaine {
		flex: 0 1 auto;
		grid-column: 2;
		gap: 0 10px;
	}

	.mi-ligne__libelle,
	.mi-ligne__delai {
		font-size: 14px;
	}

	.mi-ligne__nom {
		font-size: 17px;
	}

	.mi-ligne__heure {
		font-size: 20px;
	}

	.mi-ligne__jour {
		display: block;
		grid-column: 1;
		grid-row: 1;
		justify-self: start;
		min-width: 0;
		line-height: 1.3;
		text-align: left;
	}

	.mi-ligne__jour-civil {
		display: block;
		color: var(--mi-ivoire);
		font-weight: 600;
	}

	.mi-ligne__jour-hegire {
		display: block;
		font-size: 13px;
	}

	.mi-ligne__separateur {
		display: none;
	}

	.mi-ligne__horaires {
		grid-column: 2;
		grid-row: 1;
		justify-content: center;
		gap: 4px;
	}

	.mi-ligne__horaire {
		display: grid;
		grid-template-columns: auto auto;
		column-gap: 8px;
		align-items: baseline;
		justify-items: start;
		padding: 3px 12px;
		border-radius: 12px;
		text-align: left;
	}

	.mi-ligne__horaire-nom {
		grid-column: 1 / -1;
		font-size: 12.5px;
	}

	.mi-ligne__horaire-heure {
		font-size: 18px;
	}

	.mi-ligne__horaire-delai {
		font-size: 12.5px;
		white-space: nowrap;
	}

	.mi-ligne__horaire.is-prochaine::after {
		content: none;
	}

	/* Tracé centré sur la bordure de 1 px (rayon 11,5 au milieu de la bordure de rayon 12). */
	.mi-ligne__horaire.is-prochaine .mi-ligne__fil {
		display: block;
		position: absolute;
		top: -0.5px;
		left: -0.5px;
		width: calc(100% + 1px);
		height: calc(100% + 1px);
		overflow: visible;
		pointer-events: none;
	}

	.mi-ligne__bouton,
	.mi-ligne__interieur:has(> .mi-ligne__horaires:not([hidden])) > .mi-ligne__bouton {
		grid-column: 3;
		grid-row: 1;
		justify-self: end;
		padding: 0 16px;
		font-size: 14px;
	}

	.mi-ligne__bouton-court {
		display: none;
	}

	.mi-ligne__bouton-long {
		display: inline;
	}
}

/* Bandeau relais : fixé sous le bas mesuré de l'en-tête, en superposition (aucun espace réservé). La carte de
   l'accueil s'y rétracte (view.js, animation de la carte vers la barre). Masqué : invisible, hors de l'ordre
   de tabulation et ignoré des lecteurs d'écran (inert, aria-hidden). */
.mi-ligne--relais {
	position: fixed;
	top: var(--mi-relais-haut, var(--mi-entete-hauteur, 0px));
	left: 0;
	right: 0;
	z-index: 90;
	box-shadow: 0 10px 24px -16px rgba(2, 45, 34, 0.55);
	visibility: hidden;
}

.mi-ligne--relais.is-visible {
	visibility: visible;
}

/* Carte rétractée dans la barre : elle garde sa place (la page ne saute pas), invisible. */
.mi-horaires.is-amarree .mi-horaires__carte {
	visibility: hidden;
}

.mi-horaires__sentinelle {
	height: 1px;
	margin-bottom: -1px;
	pointer-events: none;
}

/* Élément de transition (copie décorative de la carte, aria-hidden). */
.mi-horaires-morph {
	position: fixed;
	z-index: 91;
	overflow: hidden;
	pointer-events: none;
	transform-origin: 0 0;
	will-change: transform;
}

/* Retour vers la carte : dans la page, il défile avec elle (pas de bond si la page défile encore). */
.mi-horaires-morph--page {
	position: absolute;
}

.mi-horaires-morph__papier,
.mi-horaires-morph__vert {
	position: absolute;
	inset: 0;
}

.mi-horaires-morph__papier {
	background: var(--mi-papier);
}

.mi-horaires-morph__vert {
	background: var(--mi-vert);
	opacity: 0;
}

/* Copie décorative : aucune animation d'entrée rejouée (jauges du pied, par exemple). */
.mi-horaires-morph * {
	animation: none !important;
	transition: none !important;
}

/* Menu mobile : la ligne entière mène à la carte de l'accueil. */
.mi-ligne--menu {
	display: block;
	border-radius: 14px;
	text-decoration: none;
}

.mi-ligne--menu .mi-ligne__interieur {
	justify-content: space-between;
	flex-wrap: wrap;
	padding: 4px 16px;
}

.mi-ligne--menu .mi-ligne__action {
	font-size: 14px;
	font-weight: 600;
}

.mi-ligne--menu:hover {
	color: var(--mi-ivoire);
	background: var(--mi-vert-900);
}

/* Barre de l'en-tête du site (option enTete) : une page dont la carte a l'amarrage (accueil) n'en affiche
   aucune. Le script la masque aussi ; cette règle évite qu'elle apparaisse au chargement. */
body:has(.mi-horaires.is-amarrable) .mi-horaires--en-tete {
	display: none;
}

/* ------------------------------------------------------------------
 * Ligne « prochaine prière » (menus, pied de page)
 * ------------------------------------------------------------------ */

.mi-prochaine {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 4px 8px;
	font-size: 15px;
}

.mi-prochaine__libelle {
	color: var(--mi-encre-3);
}

.mi-prochaine__nom {
	font-weight: 600;
}

.mi-prochaine__heure {
	font-weight: 700;
}

.mi-prochaine .mi-horaires__delai {
	font-size: 13px;
	color: var(--mi-encre-3);
}

.mi-prochaine.is-vide {
	color: var(--mi-encre-3);
}

@media print {
	.mi-horaires--en-tete,
	.mi-ligne--relais,
	.mi-horaires-morph {
		display: none !important;
	}

	.mi-horaires__carte {
		box-shadow: none;
		visibility: visible !important;
	}
}

/* Après Icha : la case Fajr montre l'horaire de demain, avec la pastille ; « demain » le précise. */
.mi-horaires__demain,
.mi-bandeau__demain,
.mi-ligne__demain {
	font-size: 0.8em;
	font-weight: 400;
}