/*
 * Mise en forme commune (clair et sombre). Les couleurs viennent des jetons --lh-*
 * définis dans lh.css (clair) ou lh-night.css (sombre).
 * Les noms de classes et d'identifiants utilisés par les fichiers de contenu
 * (rouge, verset, antienne, liturgie, espace, ref, cantique ...) sont conservés.
 *
 * Police de lecture : --lh-reading (à empattements par défaut, plus étroite : elle
 * respecte mieux les retours à la ligne des vers des psaumes).
 */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

@font-face {
	font-family: "Liturgie";
	src: url('liturgy.ttf');
}

:root {
	--lh-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--lh-serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, "Times New Roman", serif;
	--lh-reading: var(--lh-serif); /* mettre var(--lh-sans) pour une lecture sans empattements */
	--lh-radius: 20px;
	--lh-touch: 48px; /* taille minimale d'une cible tactile */
}

*:not(input):not(textarea):not(select) {
	-webkit-user-select: text;
	-moz-user-select: text;
	-ms-user-select: text;
	user-select: text;
}

#detect-area {
	background-color: #FF0000!important;
}

/* ---------- Structure générale ---------- */

body {
	margin: 0;
	padding: 0;
	width: auto;
	font-family: var(--lh-sans);
	color: var(--lh-text);
	-webkit-text-size-adjust: 100%;
}

div.page__background {
	background: var(--lh-page-background)!important;
	top: 0!important;
	padding-top: 0!important;
}

div.page__content {
	font-family: var(--lh-sans);
	color: var(--lh-text);
}

/* Focus clavier / lecteur d'écran bien visible */
:focus-visible {
	outline: 3px solid var(--lh-accent);
	outline-offset: 2px;
	border-radius: 8px;
}

@media (prefers-reduced-motion: reduce) {
	* { animation-duration: .001ms!important; transition-duration: .001ms!important; }
}

/* ---------- Barre du haut (claire, comme le reste de l'interface) ---------- */

ons-toolbar.toolbar {
	background-color: var(--lh-surface);
	background-image: none;
	border-bottom: 0;
	box-shadow: 0 1px 0 var(--lh-border), 0 4px 14px rgba(0, 0, 0, .05);
	color: var(--lh-text);
}

ons-toolbar .toolbar__left,
ons-toolbar .toolbar__center,
ons-toolbar .toolbar__right {
	color: var(--lh-text);
}

ons-toolbar .toolbar__center {
	font-weight: 700;
	letter-spacing: .005em;
}

ons-toolbar ons-icon,
ons-toolbar ons-toolbar-button {
	color: var(--lh-text);
}

/* Cibles tactiles confortables dans la barre */
ons-toolbar ons-toolbar-button.toolbar-button {
	min-width: var(--lh-touch);
	min-height: var(--lh-touch);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	vertical-align: middle;
}

.bouton_menu_g {
	font-size: 1em;
	font-weight: 700;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	min-height: var(--lh-touch);
	padding-right: .5em;
}

/* Le sélecteur de date ressemble à une puce cliquable */
.bouton_date {
	font-size: .85em;
	font-weight: 600;
	white-space: nowrap;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: .45em;
	width: max-content;
	max-width: 100%;
	margin: 0 auto;
	line-height: 1.2;
	height: 38px;
	padding: 0 .8em;
	border-radius: 999px;
	background: var(--lh-surface-2);
	color: var(--lh-text);
	cursor: pointer;
	position: relative;
	top: 50%;
	transform: translateY(-50%);
}
.bouton_date::before {
	content: "\f32e"; /* calendrier (Material Design Iconic Font) */
	font-family: "Material-Design-Iconic-Font";
	font-weight: normal;
	font-size: 1.25em;
	color: var(--lh-accent);
}
.bouton_date:active { background: var(--lh-accent-soft); }

.barre-menu .select-input {
	color: var(--lh-text)!important;
}

/* ---------- Carte de lecture ---------- */

ons-card.cadre,
.cadre {
	background: var(--lh-surface);
	color: var(--lh-text);
	width: calc(100% - 24px);
	max-width: 44rem;
	margin: 12px auto;
	padding: 1.2em 1.3em 4.5em;
	box-sizing: border-box;
	border-radius: var(--lh-radius);
	box-shadow: var(--lh-shadow);
	font-family: var(--lh-reading);
	font-size: 1.05em;
	line-height: 1.65;
}

/* Les contrôles restent en police d'interface, lisibles et sobres */
.cadre select,
.cadre input,
.cadre ons-button,
.cadre ons-list,
.cadre ons-switch,
.cadre .switch-latin {
	font-family: var(--lh-sans);
}

/* ---------- Titres ---------- */

h1, h2, h3 {
	font-family: var(--lh-sans)!important;
}

h1 {
	font-size: 1.1em!important;
}

.page__content h2 {
	color: var(--lh-text);
	text-transform: uppercase;
	letter-spacing: .07em;
	font-size: .92em!important;
	font-weight: 700!important;
	line-height: 1.3;
	margin: 2.2em 0 .9em!important;
	padding: .15em 0 .15em .75em;
	border: 0;
	border-left: 4px solid var(--lh-accent);
}

.page__content h2.cantique {
	text-transform: none;
	letter-spacing: 0;
	font-size: 1.05em!important;
	font-weight: normal!important;
	margin: 1.6em 0 .8em!important;
	padding: 0;
	border-left: 0;
}
.page__content h2.cantique .rouge { font-weight: 700; }

h3 {
	font-size: 1em!important;
	font-weight: normal;
}

/* Titres d'en-tête de chaque office (date, temps liturgique, saint du jour) */
[id$="_titre_principal"] {
	font-size: 1.35em;
	font-weight: 700;
	line-height: 1.3;
	margin-top: .2em;
}
[id$="_titre_sanctoral"],
[id$="_titre_secondaire"] {
	color: var(--lh-muted);
	font-size: .92em;
	line-height: 1.45;
	margin-top: .3em;
}

/* ---------- Texte liturgique ---------- */
p1 {
	text-align: left; /* le texte justifié est plus fatigant à lire */
	margin: .7em 0;
	font-family: 'Inter', sans-serif;
	font-weight: 600;
	font-size: 16px;
}
p {
	text-align: left; /* le texte justifié est plus fatigant à lire */
	margin: .7em 0;
}

.antienne {
	font-size: .95em;
}

p.ref {
	font-size: .9em;
	color: var(--lh-rubric);
	text-align: right;
	margin-top: 0;
}

span.verset, .rouge {
	color: var(--lh-rubric);
}

span.verset {
	font-size: .65em;
	vertical-align: text-top;
	font-family: var(--lh-sans);
	font-weight: 600;
	margin-right: .15em;
}

/* syllabes accentuées du chant : discrètes mais présentes */
u {
	text-decoration-thickness: 1px;
	text-underline-offset: .18em;
	text-decoration-color: var(--lh-muted);
}

.espace {
	margin-left: 2em;
}

.center, .center p {
	text-align: center;
}

.center p.antienne {
	text-align: left;
}

.droite {
	text-align: right;
}

.espace-dessous {
	margin-bottom: .5em;
}

span.petit {
	font-size: .6em;
}

span.liturgie {
	font-family: Liturgie;
	font-weight: bold;
	margin-right: .3em;
}

span.liturgie2 {
	font-family: Liturgie;
	font-size: .9em;
}

.switch-latin {
	text-align: right;
	font-size: .85em!important;
	font-style: italic!important;
	color: var(--lh-muted);
	margin-right: .5em;
}

/* ---------- Champs de sélection et saisie ---------- */

.select-input,
select.select-input {
	font-family: var(--lh-sans);
	font-size: 1em;
	font-weight: 600;
	color: var(--lh-text);
	background-color: var(--lh-surface-2);
	border: 0;
	border-radius: 14px;
	min-height: var(--lh-touch);
	padding: .4em 2.4em .4em 1em;
	max-width: 100%;
	box-sizing: border-box;
}
.select-input option {
	color: #1B1B1F;
	background: #FFFFFF;
}

.barre-menu .select-input {
	background-color: var(--lh-surface-2);
}

input.nombre,
.nombre {
	width: 4.5em;
	min-height: var(--lh-touch);
	font-family: var(--lh-sans);
	font-size: 1em;
	font-weight: 600;
	text-align: center;
	color: var(--lh-text);
	background: var(--lh-surface-2);
	border: 0;
	border-radius: 14px;
	box-sizing: border-box;
}

.slider {
	width: 92%;
	margin: 0 auto;
	padding: 0;
}

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

ons-button .button,
ons-button.button {
	min-height: var(--lh-touch);
	border-radius: 999px;
	background-color: var(--lh-accent);
	color: var(--lh-on-accent);
	font-weight: 700;
}

ons-fab.fab {
	background-color: var(--lh-accent);
	color: var(--lh-on-accent);
	box-shadow: 0 4px 14px rgba(0, 0, 0, .25);
}
ons-fab.fab:active {
	filter: brightness(.92);
}
ons-fab.fab--mini {
	width: 48px;
	height: 48px;
	line-height: 48px;
}
ons-fab.fab--mini .fab__icon {
	line-height: 48px;
	color: var(--lh-on-accent);
}

/* ---------- Interrupteurs ---------- */

ons-switch .switch__toggle {
	background-color: var(--lh-switch-off-track);
	border-color: transparent;
}
ons-switch .switch__handle {
	background-color: var(--lh-switch-thumb);
	border-color: transparent;
}
ons-switch .switch__input:checked + .switch__toggle {
	background-color: var(--lh-switch-on-track);
	border-color: transparent;
}
ons-switch .switch__input:checked + .switch__toggle .switch__handle {
	background-color: var(--lh-switch-on);
	border-color: transparent;
}

/* ---------- Onglets (affichage « onglets » des offices) : puces arrondies ---------- */

ons-tabbar .tabbar {
	background-color: var(--lh-surface);
	border-bottom: 0;
	box-shadow: 0 1px 0 var(--lh-border);
	height: 56px;
	box-sizing: border-box;
	padding: 8px 8px;
	gap: 6px;
}
ons-tab.tabbar__item {
	padding: 0;
}
ons-tab .tabbar__button {
	height: 40px;
	border-radius: 999px;
	background: var(--lh-surface-2);
	overflow: hidden;
}
ons-tab .tabbar__label {
	height: 40px;
	line-height: 40px!important;
	font-size: .74em!important;
	font-weight: 600;
	text-transform: none!important;
	overflow: hidden;
	text-overflow: ellipsis;
	padding: 0 2px;
}
ons-tab .tabbar__button,
ons-tab .tabbar__label {
	color: var(--lh-muted)!important;
}
ons-tab.active .tabbar__button {
	background: var(--lh-accent-soft);
	box-shadow: inset 0 0 0 1.5px var(--lh-accent);
}
ons-tab.active .tabbar__button,
ons-tab.active .tabbar__label {
	color: var(--lh-link)!important;
}
ons-tabbar .tabbar__border {
	display: none;
}
.tabbar__content {
	top: 56px;
}

/* ---------- Listes (paramètres, prières, rituels ...) ---------- */

.cadre .list {
	background: transparent;
	border: 0;
}
.cadre .list-header {
	background: transparent;
	color: var(--lh-muted);
	font-family: var(--lh-sans);
	font-size: .78em;
	font-weight: 700;
	letter-spacing: .09em;
	text-transform: uppercase;
	padding: 1.2em 0 .5em;
	border: 0;
}
.cadre .list-item {
	min-height: 56px;
	padding-left: 0;
	background: transparent;
	color: var(--lh-text);
	font-family: var(--lh-sans);
}
.cadre .list-item .list-item__center,
.cadre .list-item .list-item__left,
.cadre .list-item .list-item__right {
	border-color: var(--lh-border);
	text-align: left;
}
.cadre .list-item--tappable:active {
	background: var(--lh-surface-2);
}

/* Chevron : indique qu'une ligne ouvre une page */
.cadre ons-list-item[tappable] .list-item__center {
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.cadre ons-list-item[tappable] .list-item__center::after {
	content: "\f2fb";
	font-family: "Material-Design-Iconic-Font";
	font-size: 1.5em;
	color: var(--lh-muted);
	margin-left: .5em;
}

/* ---------- Curseur (psaumes et cantiques) ---------- */

.noUi-target {
	background: var(--lh-surface-2);
	border: 0;
	border-radius: 999px;
	box-shadow: none;
}
.noUi-horizontal { height: 10px; }
.noUi-connect { background: var(--lh-accent); }
.noUi-handle {
	background: var(--lh-accent);
	border: 3px solid var(--lh-surface);
	border-radius: 50%;
	box-shadow: 0 1px 5px rgba(0, 0, 0, .35);
}
.noUi-handle::before,
.noUi-handle::after { display: none; }
.noUi-horizontal .noUi-handle {
	width: 30px;
	height: 30px;
	right: -15px;
	top: -11px;
}

/* ---------- Menus latéraux ---------- */

ons-splitter-side ons-page .page__background {
	background: var(--lh-surface)!important;
}
ons-splitter-side .list {
	background: transparent;
	border: 0;
}
ons-splitter-side .list-item {
	min-height: 52px;
	background: transparent;
	color: var(--lh-text);
	font-family: var(--lh-sans);
}
ons-splitter-side .list-item__center,
ons-splitter-side .list-item__left {
	border-color: var(--lh-border);
}
ons-splitter-side .list-header {
	background: transparent;
	border-color: var(--lh-border);
	color: var(--lh-muted);
	font-size: .78em;
	font-weight: 700;
	letter-spacing: .09em;
	text-transform: uppercase;
}
ons-splitter-side .list-item--tappable:active {
	background: var(--lh-surface-2);
}
ons-splitter-side .list-item__icon,
ons-splitter-side ons-icon {
	color: var(--lh-accent);
}

/* pour centrer le calendrier */
div.picker__holder {
	margin: auto;
}

/* ================================================================
 *  PAGE D'ACCUEIL
 * ================================================================ */

.accueil {
	max-width: 44rem;
	margin: 0 auto;
	padding: 22px 16px 32px;
	box-sizing: border-box;
	font-family: var(--lh-sans);
}
.accueil button { font-family: var(--lh-sans); }

.accueil-entete { margin: 4px 4px 22px; }
.accueil-appnom {
	margin: 0 0 .15em;
	font-size: .8em;
	font-weight: 700;
	letter-spacing: .09em;
	text-transform: uppercase;
	color: var(--lh-muted);
	text-align: left;
}
.accueil .accueil-date {
	font-family: var(--lh-sans)!important;
	font-size: 1.4em!important;
	font-weight: 700;
	line-height: 1.2;
	margin: 0;
	text-align: left;
	color: var(--lh-text);
}
.accueil-date::first-letter { text-transform: uppercase; }

.accueil-section {
	margin: 26px 6px 10px;
	font-size: .8em;
	font-weight: 700;
	letter-spacing: .09em;
	text-transform: uppercase;
	color: var(--lh-muted);
	text-align: left;
}

/* Pastille d'icône (cercle ambre clair) */
.pastille {
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: var(--lh-accent-soft);
	color: var(--lh-accent);
	font-size: 1.35em;
}
.pastille ons-icon { color: inherit; font-size: 1em; }

/* Tuiles : un bouton par office / par ressource */
.tuiles {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 12px;
}
.tuile {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: space-between;
	gap: 18px;
	min-height: 138px;
	padding: 16px;
	border: 0;
	border-radius: var(--lh-radius);
	background: var(--lh-surface);
	color: var(--lh-text);
	font: inherit;
	text-align: left;
	cursor: pointer;
	box-shadow: var(--lh-shadow);
	-webkit-tap-highlight-color: transparent;
}
.tuile:active { transform: scale(.985); filter: brightness(.97); }
.tuile-nom { font-size: 1.15em; font-weight: 700; line-height: 1.2; }
.tuile-sous {
	display: block;
	margin-top: 3px;
	font-size: .8em;
	font-weight: 500;
	line-height: 1.3;
	color: var(--lh-muted);
}

/* Tuile large (Complies) : icône à gauche */
.tuile--large {
	grid-column: span 2;
	min-height: 84px;
	flex-direction: row;
	align-items: center;
	justify-content: flex-start;
	gap: 14px;
}

/* L'office du moment est mis en valeur */
.tuile--now {
	background: var(--lh-accent);
	color: var(--lh-on-accent);
}
.tuile--now .pastille { background: rgba(255, 255, 255, .45); color: var(--lh-on-accent); }
.tuile--now .tuile-sous { color: rgba(27, 27, 31, .75); }
.tuile-badge {
	position: absolute;
	top: 14px;
	right: 14px;
	padding: 3px 10px;
	border-radius: 999px;
	background: rgba(255, 255, 255, .5);
	color: var(--lh-on-accent);
	font-size: .7em;
	font-weight: 700;
}

/* Carte de lignes (Paramètres, Nouveautés, À propos) */
.carte-lignes {
	background: var(--lh-surface);
	border-radius: var(--lh-radius);
	box-shadow: var(--lh-shadow);
	overflow: hidden;
}
.ligne {
	display: flex;
	align-items: center;
	gap: 14px;
	width: 100%;
	min-height: 64px;
	padding: 10px 16px;
	border: 0;
	border-top: 1px solid var(--lh-border);
	background: transparent;
	color: var(--lh-text);
	font: inherit;
	text-align: left;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}
.ligne:first-child { border-top: 0; }
.ligne:active { background: var(--lh-surface-2); }
.ligne .pastille { width: 38px; height: 38px; font-size: 1.15em; }
.ligne-nom { flex: 1; font-size: 1.02em; font-weight: 600; }
.ligne-fleche { font-family: "Material-Design-Iconic-Font"; font-size: 1.5em; color: var(--lh-muted); }

@media (max-width: 340px) {
	.tuile { min-height: 120px; padding: 14px; }
}

/* ================================================================
 *  EN-TÊTE DE L'ACCUEIL : logo
 * ================================================================ */

.accueil-entete {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
}
.accueil-logo {
	flex: none;
	width: 56px;
	height: 56px;
	border-radius: 16px;
	box-shadow: var(--lh-shadow);
}

/* ================================================================
 *  MENUS LATÉRAUX
 * ================================================================ */

.menu {
	padding: 16px 12px 28px;
	box-sizing: border-box;
	font-family: var(--lh-sans);
}
.menu button { font-family: var(--lh-sans); }

/* Retour à l'accueil : un seul gros bouton, toujours en haut */
.menu-accueil {
	display: flex;
	align-items: center;
	gap: 12px;
	width: 100%;
	min-height: 60px;
	padding: 8px 14px;
	border: 0;
	border-radius: 18px;
	background: var(--lh-accent);
	color: var(--lh-on-accent);
	font: inherit;
	font-size: 1.1em;
	font-weight: 700;
	text-align: left;
	cursor: pointer;
	box-shadow: var(--lh-shadow);
	-webkit-tap-highlight-color: transparent;
}
.menu-accueil:active { filter: brightness(.94); }
.menu-accueil .pastille { background: rgba(255, 255, 255, .45); color: var(--lh-on-accent); }

.menu-titre {
	margin: 22px 8px 8px;
	font-size: .75em;
	font-weight: 700;
	letter-spacing: .09em;
	text-transform: uppercase;
	color: var(--lh-muted);
	text-align: left;
}

.menu-lien {
	display: flex;
	align-items: center;
	gap: 12px;
	width: 100%;
	min-height: 52px;
	margin: 2px 0;
	padding: 6px 10px;
	border: 0;
	border-radius: 14px;
	background: transparent;
	color: var(--lh-text);
	font: inherit;
	font-weight: 600;
	text-align: left;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}
.menu-lien:active { background: var(--lh-surface-2); }
.menu-lien--actif {
	background: var(--lh-accent-soft);
	box-shadow: inset 0 0 0 1.5px var(--lh-accent);
}

.pastille--s { width: 36px; height: 36px; font-size: 1.1em; }

/* ================================================================
 *  CALENDRIER (pickadate) : aux couleurs de l'application
 * ================================================================ */

.picker { color: var(--lh-text); }

.picker__holder,
.picker--opened .picker__holder {
	background: var(--lh-surface);
	border-color: var(--lh-border);
	border-radius: 24px;
	max-width: 22em;
}
.picker--opened .picker__holder {
	box-shadow: 0 16px 48px rgba(0, 0, 0, .4);
}
.picker__frame { padding: 12px; }

.picker__month,
.picker__year { color: var(--lh-text); }
.picker__month { font-weight: 700; }
.picker__year { color: var(--lh-muted); font-style: normal; }

.picker__select--month,
.picker__select--year {
	background: var(--lh-surface-2)!important;
	color: var(--lh-text)!important;
	border: 0!important;
	border-radius: 10px;
	height: 2.4em!important;
	font-family: var(--lh-sans);
	font-weight: 600;
}
.picker__select--month:focus,
.picker__select--year:focus { box-shadow: 0 0 0 2px var(--lh-accent); }

.picker__nav--prev:before { border-right-color: var(--lh-text); }
.picker__nav--next:before { border-left-color: var(--lh-text); }
.picker__nav--next:hover,
.picker__nav--prev:hover {
	background: var(--lh-accent-soft);
	color: var(--lh-text);
	border-radius: 12px;
}

.picker__weekday { color: var(--lh-muted); }

.picker__day {
	border: 1.5px solid transparent;
	border-radius: 12px;
}
.picker__day--infocus { color: var(--lh-text); }
.picker__day--outfocus { color: var(--lh-muted); opacity: .55; }
.picker__day--highlighted { border-color: var(--lh-accent); }
.picker--focused .picker__day--highlighted,
.picker__day--highlighted:hover,
.picker__day--infocus:hover,
.picker__day--outfocus:hover {
	background: var(--lh-accent-soft);
	color: var(--lh-text);
	border-color: var(--lh-accent);
}
.picker--focused .picker__day--selected,
.picker__day--selected,
.picker__day--selected:hover {
	background: var(--lh-accent);
	border-color: var(--lh-accent);
	color: var(--lh-on-accent);
	font-weight: 700;
}
.picker__day--today:before { border-top-color: var(--lh-accent); }
.picker__day--selected.picker__day--today:before { border-top-color: var(--lh-on-accent); }

/* Boutons du bas : Aujourd'hui / Effacer / Fermer */
.picker__button--clear,
.picker__button--close,
.picker__button--today {
	background: var(--lh-surface-2);
	color: var(--lh-text);
	border: 0;
	border-radius: 999px;
	min-height: 44px;
	width: calc(33.33% - 4px);
	margin: 8px 2px 0;
}
.picker__button--clear:hover,
.picker__button--close:hover,
.picker__button--today:hover,
.picker__button--clear:focus,
.picker__button--close:focus,
.picker__button--today:focus {
	background: var(--lh-accent-soft);
	color: var(--lh-text);
	border: 0;
}
.picker__button--today:before { border-top-color: var(--lh-accent); }
.picker__button--clear:before { border-top-color: var(--lh-accent); }
.picker__button--close:before { color: var(--lh-accent); }

/* ===== Partitions / tons de psalmodie (images SVG + lecture MIDI au toucher) ===== */
.psalmodie {
	text-align: center;
	position: sticky;
	top: 0;
	z-index: 2;
	background: var(--lh-surface);
	width: 100%;
	padding: 4px 0;
}
.psalmodie img {
	max-width: 100%;
	height: auto;
	margin: 4px auto;
	cursor: pointer;
}
.psalmodie+div { margin-top: 1em; }
.cadre_psaume {
	background: inherit;
	font-family: var(--lh-reading) !important;
	padding: 5px !important;
	margin: 0;
}

/* Barre d'office : 3 zones (menu / date / actions) sur petit écran */
.barre-menu .toolbar__right ons-toolbar-button { min-width: 40px; padding: 0 4px; }
.barre-menu .toolbar__center { padding: 0 2px; }

/* ---------- Rendu iPhone (Onsen en mode iOS) : traits et contours aux couleurs du thème ---------- */
.tabbar, .tabbar--top { background-image: none !important; }
.list-item__center, .list-item__right, .list-item__left,
.list-item--longdivider .list-item__center {
	background-image: linear-gradient(0deg, var(--lh-border), var(--lh-border) 100%) !important;
}
ons-switch .switch__toggle,
ons-switch .switch__input:checked + .switch__toggle { box-shadow: none !important; }

/* ======================================================================
   Icônes (jeu d'icônes SVG de l'application) et nouvelle barre du haut
   ====================================================================== */
.ico {
	width: 1.5em; height: 1.5em; flex: none;
	fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
	vertical-align: middle;
}
.pastille .ico { width: 24px; height: 24px; }
.pastille--s .ico { width: 20px; height: 20px; }
.ligne .pastille .ico { width: 22px; height: 22px; }
.ico--fab { width: 22px; height: 22px; }
ons-fab.fab .fab__icon { display: inline-flex; align-items: center; justify-content: center; }

/* Barre : ligne propre, plus haute, avec des commandes rondes */
ons-toolbar.barre-menu { --hauteur-barre: 60px; }
ons-toolbar.barre-menu .toolbar { height: var(--hauteur-barre); }
ons-toolbar.barre-menu.toolbar,
ons-toolbar.barre-menu .toolbar {
	background: var(--lh-surface);
	box-shadow: 0 1px 0 var(--lh-border);
}
ons-toolbar.barre-menu { height: var(--hauteur-barre); }
ons-toolbar.barre-menu .toolbar__left,
ons-toolbar.barre-menu .toolbar__right { display: flex; align-items: center; height: var(--hauteur-barre); }
ons-toolbar.barre-menu .toolbar__center { display: flex; align-items: center; justify-content: center; height: var(--hauteur-barre); }

/* Boutons ronds (accueil, actualiser, réglages) */
ons-toolbar.barre-menu ons-toolbar-button.toolbar-button {
	width: 42px; height: 42px; min-width: 42px; min-height: 42px; padding: 0;
	margin: 0 4px; border-radius: 50%;
	background: var(--lh-surface-2); color: var(--lh-text);
	display: inline-flex; align-items: center; justify-content: center;
	transition: background .15s, color .15s;
}
ons-toolbar.barre-menu ons-toolbar-button.toolbar-button .ico { width: 22px; height: 22px; }
ons-toolbar.barre-menu ons-toolbar-button.toolbar-button:active {
	background: var(--lh-accent-soft); color: var(--lh-link);
}
ons-toolbar.barre-menu .toolbar__right { padding-right: 4px; }
ons-toolbar.barre-menu .toolbar__left { padding-left: 4px; }

/* Bouton de menu des offices : pastille d'icône + nom + flèche */
ons-toolbar.barre-menu .toolbar__left { padding-left: 6px; }
.bouton_menu_g {
	display: inline-flex; align-items: center; gap: .5em; padding: 5px 12px 5px 6px; margin: 0;
	border-radius: 999px; background: var(--lh-accent-soft);
	box-sizing: border-box; height: 42px; min-height: 0; max-width: 100%;
	color: var(--lh-text);
}
.bouton_menu_g:active { filter: brightness(.96); }
.bar-pastille {
	width: 32px; height: 32px; border-radius: 50%; flex: none;
	background: var(--lh-accent); color: var(--lh-on-accent);
	display: inline-flex; align-items: center; justify-content: center;
}
.bar-pastille .ico { width: 20px; height: 20px; }
.bar-titre { font-weight: 700; font-size: .95em; white-space: nowrap; }
.ico--chev { width: 18px; height: 18px; color: var(--lh-link); margin-left: -2px; }
@media (max-width: 400px) {
	.bar-titre { font-size: .85em; }
	.ico--chev { display: none; }
	.bouton_menu_g { padding-right: 12px; }
	ons-toolbar.barre-menu ons-toolbar-button.toolbar-button { width: 38px; height: 38px; min-width: 38px; min-height: 38px; margin: 0 2px; }
}

/* Menus latéraux : icônes alignées */
.menu-lien .pastille, .menu-accueil .pastille { margin-right: 2px; }

/* ---------- Page Suggestions ---------- */
.sugg-entete { display: flex; gap: 14px; align-items: flex-start; margin-bottom: .6em; }
.sugg-entete .pastille { margin-top: 4px; }
.sugg-titre { margin: 0 0 .2em; font-family: var(--lh-sans); font-weight: 800; font-size: 1.15em; line-height: 1.3; }
.sugg-sous, .sugg-note { margin: 0; color: var(--lh-muted); font-family: var(--lh-sans); font-size: .9em; line-height: 1.5; }
.sugg-note { margin-top: .9em; }
.sugg-label { display: block; margin: 1.2em 0 .5em; font-family: var(--lh-sans); font-weight: 700; font-size: .85em; color: var(--lh-muted); letter-spacing: .04em; }
.sugg-types { display: flex; flex-wrap: wrap; gap: 8px; }
.chip-choix {
	font: 600 .92em var(--lh-sans); color: var(--lh-text); background: var(--lh-surface-2);
	border: 0; border-radius: 999px; padding: .6em 1.1em; min-height: 44px; cursor: pointer;
	box-shadow: inset 0 0 0 1.5px transparent;
}
.chip-choix.actif { background: var(--lh-accent-soft); color: var(--lh-link); box-shadow: inset 0 0 0 1.5px var(--lh-accent); }
.sugg-champ {
	width: 100%; box-sizing: border-box; font: 1em/1.5 var(--lh-sans); color: var(--lh-text);
	background: var(--lh-surface-2); border: 1.5px solid transparent; border-radius: 18px; padding: 14px 16px; resize: vertical;
}
.sugg-champ:focus { outline: none; border-color: var(--lh-accent); }
.sugg-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 1em; }
.btn-principal, .btn-secondaire {
	display: inline-flex; align-items: center; gap: .55em; font: 700 .95em var(--lh-sans);
	border: 0; border-radius: 999px; padding: .8em 1.4em; min-height: 48px; cursor: pointer;
}
.btn-principal { background: var(--lh-accent); color: var(--lh-on-accent); }
.btn-secondaire { background: var(--lh-surface-2); color: var(--lh-text); }
.btn-principal .ico, .btn-secondaire .ico { width: 20px; height: 20px; }
ons-toolbar.barre-menu .toolbar__left, ons-toolbar.barre-menu .toolbar__right { flex: 0 0 auto; width: auto !important; min-width: 0; }
.bouton_date { position: static; top: auto; transform: none; margin: 0 auto; }
.bouton_menu_g { width: fit-content; }

/* Onsen place le contenu sous une barre de 56 px (Android) ou 44 px (iPhone) ; la nôtre fait 60 px. */
ons-page.avec-barre > .page__content,
ons-page.avec-barre > .page__background { top: 60px !important; }
ons-page.avec-barre.plein-ecran > .page__content,
ons-page.avec-barre.plein-ecran > .page__background { top: 0 !important; }

/* Grand écran (ordinateur) : le bloc de droite reste collé au bord, la date occupe le centre */
ons-toolbar.barre-menu .toolbar__center { flex: 1 1 auto !important; min-width: 0; width: auto !important; }
ons-toolbar.barre-menu .toolbar__right { margin-left: auto; }

/* Pastille de couleur liturgique (devant le temps liturgique) */
.couleur-lit {
	display: inline-block; width: .8em; height: .8em; border-radius: 50%;
	margin-right: .5em; vertical-align: -.05em; box-sizing: border-box;
	border: 1px solid rgba(0, 0, 0, .18); box-shadow: 0 1px 2px rgba(0, 0, 0, .15);
}
.couleur-lit--vert { background: #2f9e5a; }
.couleur-lit--violet { background: #7a4fb3; }
.couleur-lit--rouge { background: #d3322b; }
.couleur-lit--rose { background: #f08fb2; }
.couleur-lit--blanc { background: #fff; border-color: #bdb6a4; }

/* ---------- Accueil : temps liturgique sous la date + bannière ---------- */
.accueil-temps { margin: 8px 0 0; }
.accueil-temps p { margin: 0; font-family: var(--lh-sans); font-size: .95em; line-height: 1.4; color: var(--lh-muted); }
.accueil-temps:empty { display: none; }
.accueil-bandeau { margin: 0 0 22px; line-height: 0; }
.accueil-bandeau img { width: 100%; height: auto; border-radius: 18px; vertical-align: bottom; }

/* Saint du jour (accueil) */
.accueil-saint { margin: 6px 0 0; font-family: var(--lh-sans); font-size: .95em; line-height: 1.4; color: var(--lh-muted); }
.accueil-saint:empty { display: none; }
.accueil-saint h3, .accueil-saint p { display: inline; margin: 0; font-size: inherit; font-weight: 400; }
.accueil-saint p { margin-left: .4em; }
.accueil-saint br { display: none; }
.accueil-saint h3 b { font-weight: 700; color: var(--lh-text, inherit); }
.accueil-saint h3 b:after { content: " "; }
.accueil-saint .rouge { color: var(--lh-rouge, #b3261e); }
.reglage-sous { display: block; font-size: .8em; color: var(--lh-muted); line-height: 1.3; }

/* Choix de la célébration (office du temps / saint) */
.saint-origine { color: var(--lh-muted); font-size: .85em; margin-left: .5em; font-style: normal; font-weight: 500; }
p.saint-origine { margin: 2px 0 0; text-align: center; }
.choix-carte { margin: 4px 0 18px; }
.choix-liste { display: grid; gap: 8px; }
.choix-option { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; cursor: pointer;
	font-family: var(--lh-sans) !important; color: var(--lh-text); background: var(--lh-surface);
	border: 1.5px solid var(--lh-border); border-radius: 18px; padding: 12px 14px; min-height: var(--lh-touch); }
.choix-option[aria-checked="true"] { border-color: var(--lh-accent); background: var(--lh-accent-soft); }
.choix-radio { flex: none; width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--lh-border); background: var(--lh-surface); position: relative; }
.choix-option[aria-checked="true"] .choix-radio { border-color: var(--lh-accent); }
.choix-option[aria-checked="true"] .choix-radio:after { content: ""; position: absolute; inset: 4px; border-radius: 50%; background: var(--lh-accent); }
.choix-texte { display: flex; flex-direction: column; min-width: 0; }
.choix-titre { font-weight: 700; line-height: 1.25; }
.choix-sous { color: var(--lh-muted); font-size: .85rem; line-height: 1.3; }
.choix-celebration { margin: 6px 0 12px; }
.choix-bouton { display: block; width: 100%; cursor: pointer;
	font-family: var(--lh-sans) !important; font-size: .92rem; line-height: 1.3; text-align: left; color: var(--lh-text);
	background: var(--lh-surface-2); border: 0; border-radius: 16px; padding: 10px 14px; }
.choix-bouton-action { flex: none; color: var(--lh-accent); font-weight: 700; }
.choix-celebration .choix-liste { margin-top: 8px; }
.choix-titre .couleur-lit, .choix-bouton-texte .couleur-lit { margin-right: 8px; vertical-align: middle; }

/* Paramètres : la ligne « libellé + liste déroulante » : pas de dégradé de séparation d'Onsen (il dessinait un bloc gris) */
.cadre ons-list-item .list-item__left { background-image: none !important; background-color: transparent; }
.cadre ons-list-item:has(> .list-item__left > ons-select) { border-bottom: 1px solid var(--lh-border); }
.cadre ons-list-item:has(> .list-item__left > ons-select) .list-item__center { background-image: none !important; }

/* Milieu du jour : sélecteurs d'heure et de psalmodie */
#m_commande { margin: 8px 0 14px; }
.milieu-etiquette { margin: 10px 0 6px; font-family: var(--lh-sans); font-size: .8rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--lh-muted); }
.seg { display: flex; gap: 6px; background: var(--lh-surface-2); border-radius: 999px; padding: 4px; }
.seg-bouton { flex: 1; border: 0; border-radius: 999px; padding: 10px 8px; font-family: var(--lh-sans) !important; font-size: .95rem; font-weight: 600; cursor: pointer;
	background: transparent; color: var(--lh-text); min-height: 40px; }
.seg-bouton[aria-pressed="true"] { background: var(--lh-accent); color: #1c1000; }
.milieu-note { margin: 8px 2px 0; font-family: var(--lh-sans); font-size: .85rem; color: var(--lh-muted); }
.milieu-note:empty { display: none; }

/* Mode maintenance */
.maint-ecran { position: fixed; inset: 0; z-index: 200000; display: flex; align-items: center; justify-content: center; padding: 20px;
	background: var(--lh-bg, #F5F5F3); font-family: var(--lh-sans); }
.maint-carte { width: 100%; max-width: 420px; text-align: center; background: var(--lh-surface); color: var(--lh-text);
	border: 1px solid var(--lh-border); border-radius: 28px; padding: 28px 22px; box-shadow: 0 10px 30px rgba(0,0,0,.08); }
.maint-logo { border-radius: 18px; margin-bottom: 14px; }
.maint-carte h1 { margin: 0 0 10px; font-size: 1.5rem; line-height: 1.2; }
.maint-message { text-align: center; margin: 0 0 10px; color: var(--lh-muted); line-height: 1.5; }
.maint-retour { text-align: center; margin: 0 0 14px; font-weight: 700; }
.maint-actions { display: grid; gap: 10px; margin-top: 16px; }
.maint-bouton { border: 0; border-radius: 16px; padding: 14px 18px; font: inherit; font-weight: 700; cursor: pointer;
	background: var(--lh-accent); color: #1c1000; min-height: var(--lh-touch); }
.maint-bouton--sec { background: var(--lh-surface-2); color: var(--lh-text); }
html.en-maintenance, html.en-maintenance body { overflow: hidden; }
.choix-bouton-ligne { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.choix-bouton-autres { display: block; margin-top: 4px; color: var(--lh-muted); font-size: .8rem; line-height: 1.3; }
.choix-soir { font-family: var(--lh-sans); font-size: .92rem; margin-top: 10px; padding: 12px 14px; border-radius: 18px; border: 1.5px dashed var(--lh-accent); background: var(--lh-surface); }
.choix-soir-titre { display: block; font-weight: 700; line-height: 1.3; }
.choix-soir-titre .couleur-lit { margin-right: 8px; vertical-align: middle; }
.choix-soir-sous { display: block; color: var(--lh-muted); font-size: .85rem; margin-top: 2px; }
.choix-masque { display: none !important; }

.choix-mini { text-align: center; margin: 2px 0 6px; }
.choix-changer { background: none; border: 1px solid currentColor; color: inherit; opacity: .7; border-radius: 12px; font-size: 12px; padding: 2px 12px; cursor: pointer; }
.choix-mini .choix-liste { margin-top: 8px; text-align: left; }

.choix-mini-accueil { display: flex; align-items: center; justify-content: space-between; gap: 10px; text-align: left; margin: 2px 0 10px; }
.choix-mini-texte { font-size: .9rem; line-height: 1.3; }
.choix-mini-texte .couleur-lit { margin-right: 8px; vertical-align: middle; }
.choix-mini-accueil .choix-changer { flex: none; }

.choix-valider { display: block; width: 100%; margin-top: 10px; padding: 12px 16px; border: 0; border-radius: 14px; background: var(--lh-accent); color: #1f1a0e; font-weight: 700; font-size: 1rem; cursor: pointer; }
.choix-valider:active { filter: brightness(.95); }

/* fenêtre de premier lancement (pays / diocèse) */
.bienvenue-fond { position: fixed; inset: 0; z-index: 100000; background: rgba(0,0,0,.55); display: flex; align-items: center; justify-content: center; padding: 18px; }
.bienvenue-carte { width: 100%; max-width: 420px; max-height: 92vh; overflow-y: auto; background: var(--lh-surface, #fff); color: var(--lh-text, #1a1a1a); border-radius: 24px; padding: 24px 20px 18px; box-shadow: 0 20px 60px rgba(0,0,0,.35); font-family: var(--lh-sans) !important; }
.bienvenue-titre { margin: 0 0 8px; font-size: 1.35rem; text-align: center; font-family: var(--lh-sans) !important; }
.bienvenue-texte { margin: 0 0 16px; color: var(--lh-muted, #666); font-size: .95rem; line-height: 1.4; text-align: center; }
.bienvenue-select { display: block; width: 100%; margin-bottom: 10px; padding: 13px 12px; font-size: 1rem; border: 1.5px solid var(--lh-border, #ccc); border-radius: 14px; background: var(--lh-surface, #fff); color: var(--lh-text, #1a1a1a); }
.bienvenue-case { display: flex; gap: 10px; align-items: center; margin: 4px 0 10px; font-size: .95rem; }
.bienvenue-aide { font-size: .85rem; color: var(--lh-muted, #666); margin: 6px 0 14px; text-align: center; }
.bienvenue-aide a { color: var(--lh-accent, #d98a00); font-weight: 600; }
.bienvenue-plus { display: block; width: 100%; margin-top: 8px; padding: 10px; background: none; border: 0; color: var(--lh-muted, #666); font-size: .95rem; cursor: pointer; }
.bienvenue-logo { display: block; width: 72px; height: 72px; margin: 0 auto 10px; border-radius: 18px; box-shadow: 0 6px 18px rgba(0,0,0,.2); }

/* écran de démarrage : affiché tout de suite, retiré dès que la première page est prête */
#splash { position: fixed; inset: 0; z-index: 150000; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; background: #F5F5F3; color: #1a1a1a; font-family: var(--lh-sans); transition: opacity .25s; }
#splash img { border-radius: 22px; box-shadow: 0 8px 24px rgba(0,0,0,.18); }
#splash p { margin: 0; font-size: 1.3rem; font-weight: 700; }
#splash.splash-fin { opacity: 0; pointer-events: none; }
.splash-barre { width: 120px; height: 4px; border-radius: 2px; background: rgba(0,0,0,.1); overflow: hidden; }
.splash-barre i { display: block; width: 40%; height: 100%; background: #F2A413; border-radius: 2px; animation: splash-anim 1.1s ease-in-out infinite; }
@keyframes splash-anim { 0% { transform: translateX(-100%); } 100% { transform: translateX(300%); } }
@media (prefers-color-scheme: dark) { #splash { background: #0B0B0D; color: #fff; } .splash-barre { background: rgba(255,255,255,.15); } }
@media (prefers-reduced-motion: reduce) { .splash-barre i { animation: none; width: 100%; } }
/* indicateur de chargement des pages (petite barre en haut) */
#chargement { position: fixed; left: 0; top: 0; height: 3px; width: 0; background: #F2A413; z-index: 140000; opacity: 0; transition: width .4s ease, opacity .3s; pointer-events: none; }
#chargement.actif { opacity: 1; }

.reseaux-liens { display: grid; gap: 10px; margin: 12px 0; }
.reseaux-lien { padding: 13px 16px; border-radius: 16px; background: var(--lh-surface-2, #eee); color: var(--lh-text); font-weight: 700; }

#chargement-retry { position: fixed; left: 12px; right: 12px; bottom: 16px; z-index: 160000; display: flex; gap: 12px; align-items: center; justify-content: space-between; padding: 12px 14px; border-radius: 16px; background: var(--lh-surface, #fff); color: var(--lh-text, #1a1a1a); box-shadow: 0 10px 30px rgba(0,0,0,.3); font-family: var(--lh-sans); }
#chargement-retry button { border: 0; border-radius: 12px; padding: 10px 14px; background: var(--lh-accent, #F2A413); color: #1f1a0e; font-weight: 700; cursor: pointer; }

/* calendrier : points de couleur (saints du jour) et détail */
.picker__day { position: relative; }
.jour-points { display: flex; justify-content: center; align-items: center; gap: 3px; height: 12px; margin-top: 1px; cursor: pointer; }
.jour-point.couleur-lit { width: 7px; height: 7px; margin: 0; border-radius: 50%; display: inline-block; }
.jour-detail { position: absolute; left: 8px; right: 8px; bottom: 8px; z-index: 10; background: var(--lh-surface, #fff); color: var(--lh-text, #1a1a1a);
	border: 1.5px solid var(--lh-border, #ddd); border-radius: 16px; padding: 12px 14px; box-shadow: 0 10px 30px rgba(0,0,0,.25); font-family: var(--lh-sans) !important; text-align: left; }
.jour-detail p { margin: 0 0 6px; }
.jour-detail-date { font-weight: 700; text-transform: capitalize; }
.jour-detail-ligne { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.jour-detail-nom { font-weight: 600; }
.jour-detail-sous { flex-basis: 100%; padding-left: 22px; color: var(--lh-muted, #666); font-size: .85rem; margin-top: -2px; }
.jour-detail-fermer { margin-top: 6px; background: none; border: 0; color: var(--lh-accent, #d98a00); font-weight: 700; padding: 6px 0; cursor: pointer; }
.accueil-date-ligne { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 6px 0 4px; }
.accueil-date-ligne .bouton_date { position: static; transform: none; margin: 0; top: auto; }
.accueil-aujourdhui { background: none; border: 1px solid currentColor; border-radius: 999px; font-size: .8rem; padding: 4px 12px; color: var(--lh-muted, #666); cursor: pointer; }

/* attente de chargement : jamais de page blanche */
#chargement-attente { position: fixed; left: 50%; top: 45%; transform: translate(-50%, -50%); z-index: 90000; display: none; flex-direction: column; align-items: center; gap: 8px; text-align: center;
	max-width: 300px; padding: 22px 24px; border-radius: 22px; background: var(--lh-surface, #fff); color: var(--lh-text, #1a1a1a); box-shadow: 0 12px 40px rgba(0,0,0,.22); font-family: var(--lh-sans) !important; }
#chargement-attente.actif { display: flex; animation: chargement-apparait .25s ease 0.5s both; }
@keyframes chargement-apparait { from { opacity: 0; } to { opacity: 1; } }
#chargement-attente .chargement-texte { color: var(--lh-muted, #666); font-size: .9rem; line-height: 1.35; }
.chargement-rond { width: 34px; height: 34px; border-radius: 50%; border: 4px solid var(--lh-accent-soft, #fde7b4); border-top-color: var(--lh-accent, #f2a413); animation: chargement-tour 0.9s linear infinite; }
@keyframes chargement-tour { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .chargement-rond { animation-duration: 3s; } }

/* page « Nos réseaux » : boutons avec icônes */
.res-grille { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin: 12px 0 22px; }
.res-btn { display: flex; align-items: center; gap: 12px; padding: 13px 14px; border-radius: 16px; background: var(--lh-surface-2, #f1f0ec); color: var(--lh-text, #1a1a1a); text-decoration: none; font-family: var(--lh-sans) !important; font-weight: 700; font-size: .95rem; line-height: 1.2; border: 1px solid var(--lh-line, #e4e2dc); }
.res-btn:active { transform: scale(.98); }
.res-btn small { display: block; font-weight: 500; font-size: .74rem; opacity: .7; }
.res-ico { flex: none; width: 26px; height: 26px; }
.res-coeur { background: var(--lh-accent, #f2a413); border-color: transparent; color: #1c1000; }
.res-coeur .res-ico { fill: currentColor; fill-opacity: .15; }
.res-off { opacity: .55; cursor: default; }
.res-message { padding: 12px 14px; border-radius: 14px; background: var(--lh-accent-soft, #fdebc9); color: var(--lh-text, #1a1a1a); font-size: .9rem; line-height: 1.45; margin: 8px 0 10px; font-family: var(--lh-sans) !important; }

/* ---------- Page Paramètres ---------- */
.par-nav { display: flex; gap: 8px; overflow-x: auto; padding: 14px 12px 4px; scrollbar-width: none; }
.par-nav::-webkit-scrollbar { display: none; }
.par-nav button { flex: none; border: 1.5px solid var(--lh-border); background: var(--lh-surface); color: var(--lh-text); font-family: var(--lh-sans) !important; font-weight: 700; font-size: .9rem; padding: 10px 16px; border-radius: 999px; min-height: 44px; cursor: pointer; }
.par-nav button:active { background: var(--lh-accent-soft); border-color: var(--lh-accent); }
.par-carte { margin: 14px 12px; padding: 18px 16px 8px; border-radius: var(--lh-radius); background: var(--lh-surface); box-shadow: var(--lh-shadow); font-family: var(--lh-sans) !important; color: var(--lh-text); }
.par-carte h2 { display: flex; align-items: center; gap: 10px; margin: 0 0 8px; font-size: 1.2rem; font-weight: 800; }
.par-carte h3.par-titre { margin: 18px 0 8px; font-size: .78rem; letter-spacing: .09em; text-transform: uppercase; color: var(--lh-muted); }
.par-ico { flex: none; width: 34px; height: 34px; padding: 7px; border-radius: 12px; background: var(--lh-accent-soft); color: var(--lh-accent); fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; box-sizing: border-box; }
.par-intro { margin: 0 0 12px; color: var(--lh-muted); font-size: .92rem; line-height: 1.45; }
.par-ligne { padding: 14px 0; border-top: 1px solid var(--lh-border); }
.par-carte h2 + .par-ligne { border-top: 0; }
.par-label { display: block; font-weight: 700; font-size: 1rem; line-height: 1.3; color: var(--lh-text); }
.par-sous { display: block; font-weight: 400; font-size: .85rem; line-height: 1.4; color: var(--lh-muted); margin-top: 3px; }
p.par-sous { margin: 10px 0 0; }
.par-inter { display: flex; align-items: center; gap: 14px; }
.par-inter .par-label { flex: 1; }
.par-select { width: 100%; margin-top: 10px; min-height: 52px; padding: 12px 40px 12px 14px; border: 1.5px solid var(--lh-border); border-radius: 14px; background: var(--lh-surface-2); color: var(--lh-text); font: inherit; font-family: var(--lh-sans) !important; font-size: 1rem; -webkit-appearance: none; appearance: none;
	background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%); background-position: calc(100% - 22px) 55%, calc(100% - 16px) 55%; background-size: 6px 6px, 6px 6px; background-repeat: no-repeat; }
.par-select:focus-visible, .par-case input:focus-visible, .par-nav button:focus-visible { outline: 3px solid var(--lh-accent); outline-offset: 2px; }
.par-apercu { margin: 12px 0 0; padding: 12px 14px; border-radius: 14px; background: var(--lh-accent-soft); color: var(--lh-text); font-family: var(--lh-reading) !important; line-height: 1.4; }
.par-aide-lien { margin: 0 0 4px; text-align: center; }
.par-aide-lien .choix-valider { width: 100%; max-width: 420px; }
.par-cases { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin-bottom: 8px; }
.par-case { display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 10px 14px; border: 1.5px solid var(--lh-border); border-radius: 14px; background: var(--lh-surface-2); cursor: pointer; font-weight: 700; }
.par-case input { width: 22px; height: 22px; accent-color: var(--lh-accent); flex: none; }
.par-case:has(input:checked) { border-color: var(--lh-accent); background: var(--lh-accent-soft); }
.par-bas { text-align: center; color: var(--lh-muted); font-size: .85rem; margin: 6px 12px 28px; font-family: var(--lh-sans) !important; }
.par-carte h2 { margin: 0 0 6px !important; padding-top: 0 !important; font-size: 1.1rem; line-height: 1.2; }
.par-carte h3.par-titre { font-size: .75rem; line-height: 1.3; }
.par-cases { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.par-case { min-width: 0; font-size: .95rem; }
.par-case span { overflow-wrap: anywhere; }
.par-carte h3.par-titre { font-size: .75rem !important; letter-spacing: .09em !important; margin: 16px 0 8px !important; }
/* Paramètres : sections repliables (remplace les petites bulles de navigation) */

details.par-carte { padding: 0 16px; }
details.par-carte > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 10px; min-height: 64px; padding: 14px 0; }
details.par-carte > summary::-webkit-details-marker { display: none; }
details.par-carte > summary h2 { flex: 1; margin: 0 !important; }
details.par-carte > summary::after { content: ""; flex: none; width: 10px; height: 10px; border-right: 2.5px solid var(--lh-muted); border-bottom: 2.5px solid var(--lh-muted); transform: rotate(45deg); margin: 0 6px 4px 0; transition: transform .15s; }
details.par-carte[open] > summary::after { transform: rotate(-135deg); margin-bottom: -2px; }
details.par-carte > summary:focus-visible { outline: 3px solid var(--lh-accent); outline-offset: 2px; border-radius: 12px; }
.par-corps { padding-bottom: 8px; }
.par-corps > .par-ligne:first-child, .par-corps > .par-intro:first-child { border-top: 1px solid var(--lh-border); }
/* Paramètres : sur grand écran, contenu centré et limité en largeur */
#parametres .bandeau, #parametres .par-carte, #parametres .par-bas { width: min(720px, calc(100% - 24px)); margin-left: auto !important; margin-right: auto !important; box-sizing: border-box; }

/* Recherche de diocèse */
.rech { margin: 10px 0 6px; font-family: var(--lh-sans) !important; }
.rech-label { display: block; font-weight: 800; margin-bottom: 6px; color: var(--lh-text); }
.rech-champ { width: 100%; box-sizing: border-box; min-height: 52px; padding: 12px 16px; border: 1.5px solid var(--lh-border); border-radius: 14px; background: var(--lh-surface-2); color: var(--lh-text); font: inherit; font-family: var(--lh-sans) !important; font-size: 1rem; }
.rech-champ:focus { outline: 3px solid var(--lh-accent); outline-offset: 1px; }
.rech-aide, .rech-info, .rech-vide { margin: 6px 2px; font-size: .85rem; color: var(--lh-muted); line-height: 1.4; }
.rech-liste { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 8px; }
.rech-item { display: flex; width: 100%; align-items: center; justify-content: space-between; gap: 10px; text-align: left; min-height: 52px; padding: 10px 14px; border: 1.5px solid var(--lh-border); border-radius: 14px; background: var(--lh-surface); color: var(--lh-text); font-family: var(--lh-sans) !important; font-size: 1rem; font-weight: 700; cursor: pointer; }
.rech-item:active { border-color: var(--lh-accent); background: var(--lh-accent-soft); }
.rech-badge { flex: none; font-size: .72rem; font-weight: 800; padding: 3px 10px; border-radius: 999px; }
.rech-ok { background: #1b7a34; color: #fff; }
.rech-non { background: var(--lh-surface-2); color: var(--lh-muted); border: 1px solid var(--lh-border); }
.rech-detail { margin: 6px 0 4px; padding: 12px 14px; border-radius: 14px; background: var(--lh-accent-soft); color: var(--lh-text); font-size: .9rem; }
.rech-detail p { margin: 0 0 10px; line-height: 1.4; }
.rech-action { display: block; width: 100%; min-height: 46px; margin-top: 8px; border: 0; border-radius: 12px; background: var(--lh-accent); color: var(--lh-on-accent, #1b1b1f); font-family: var(--lh-sans) !important; font-weight: 800; font-size: .95rem; cursor: pointer; }
.rech-sec { background: var(--lh-surface); color: var(--lh-text); border: 1.5px solid var(--lh-border); }
.rech-confirm { margin: 10px 0 0; padding: 12px 14px; border-radius: 14px; background: #e3f4e8; color: #17602b; font-weight: 800; }
.bienvenue-ou { margin: 10px 0 4px; text-align: center; color: var(--lh-muted); font-size: .85rem; }
#bienvenue .rech-liste { max-height: 34vh; overflow: auto; }
@import url('https://cdn-uicons.flaticon.com/4.0.0/uicons-solid-chubby/css/uicons-solid-chubby.css') 

/* iPhone (encoche / Dynamic Island) : la barre du haut descend sous l'heure et le réseau.
   Sans cela, les boutons se retrouvent sous la barre d'état iOS et ne répondent plus. */
:root { --zone-haut: env(safe-area-inset-top, 0px); }
ons-toolbar.barre-menu { height: calc(var(--hauteur-barre) + var(--zone-haut)); }
ons-toolbar.barre-menu .toolbar {
	height: calc(var(--hauteur-barre) + var(--zone-haut));
	padding-top: var(--zone-haut);
	box-sizing: border-box;
}
ons-toolbar.barre-menu .toolbar__left,
ons-toolbar.barre-menu .toolbar__right,
ons-toolbar.barre-menu .toolbar__center { margin-top: var(--zone-haut); }
ons-toolbar.barre-menu ~ .page__background,
ons-toolbar.barre-menu ~ .page__content { top: calc(var(--hauteur-barre) + var(--zone-haut)); }

/* ======================================================================
   Pages Psaumes et Communs (refonte)
   ====================================================================== */
.seg { display: flex; gap: 4px; padding: 4px; background: var(--lh-surface-2); border-radius: 999px; }
.seg button { flex: 1; min-height: 40px; border: 0; border-radius: 999px; background: transparent; color: var(--lh-muted); font: 600 14px/1 var(--lh-sans); padding: 0 8px; }
.seg button.seg-on { background: var(--lh-accent); color: var(--lh-on-accent); box-shadow: 0 2px 8px rgba(0,0,0,.12); }
.ps-barre { display: grid; gap: 14px; margin: 2px 0 6px; }
.ps-pas { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.ps-fleche { width: 52px; height: 52px; border-radius: 50%; border: 0; background: var(--lh-surface-2); color: var(--lh-text); display: inline-flex; align-items: center; justify-content: center; }
.ps-fleche .ico { width: 24px; height: 24px; }
.ps-num { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.ps-num .nombre { width: 4.2em; min-height: 56px; font-size: 34px; font-weight: 800; background: transparent; letter-spacing: -.02em; -moz-appearance: textfield; }
.ps-num .nombre::-webkit-outer-spin-button, .ps-num .nombre::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.ps-num span { font: 600 13px/1 var(--lh-sans); color: var(--lh-muted); }
.ps-barre .slider { width: 100%; }
#ps_titre_principal { margin-top: 18px; }

.cm-barre { position: sticky; top: 0; z-index: 5; margin: -8px -8px 14px; padding: 10px 8px 12px; background: var(--lh-surface); border-bottom: 1px solid var(--lh-border); display: grid; gap: 10px; }
.cm-rang { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding: 2px 2px; -webkit-overflow-scrolling: touch; }
.cm-rang::-webkit-scrollbar { display: none; }
.cm-rang button { flex: none; min-height: 40px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--lh-border); background: var(--lh-surface-2); color: var(--lh-text); font: 600 14px/1 var(--lh-sans); white-space: nowrap; }
.cm-rang button.puce-on { background: var(--lh-accent); border-color: var(--lh-accent); color: var(--lh-on-accent); }
.cm-rang--office { padding: 4px; background: var(--lh-surface-2); border-radius: 999px; gap: 4px; }
.cm-rang--office button { border: 0; background: transparent; color: var(--lh-muted); flex: 1 0 auto; padding: 0 12px; }
.cm-rang--office button.puce-on { background: var(--lh-surface); color: var(--lh-text); box-shadow: 0 1px 4px rgba(0,0,0,.18); }
#titre_commun { font: 800 26px/1.15 var(--lh-sans); letter-spacing: -.01em; margin: 6px 0 2px; }
#titre_commun_office { font: 600 12px/1 var(--lh-sans); letter-spacing: .12em; text-transform: uppercase; color: var(--lh-muted); font-style: normal; margin-bottom: 18px; }
.ps-barre select[hidden], .cm-barre ~ #select_commun_div, .cm-barre ~ #select_office_div, select.select-input[hidden] { display: none !important; }
.seg button { white-space: nowrap; font-size: 13px; padding: 0 4px; }

/* Sélecteurs des communs : deux boutons + feuille de choix (aucun défilement horizontal) */
.cm-barre { grid-template-columns: 1fr 1fr; gap: 10px; }
.cm-choix { display: grid; grid-template-columns: 1fr auto; grid-template-areas: "lib ico" "val ico"; align-items: center; column-gap: 8px; text-align: left; min-height: 58px; padding: 8px 14px; border: 1px solid var(--lh-border); border-radius: 16px; background: var(--lh-surface-2); color: var(--lh-text); font-family: var(--lh-sans); min-width: 0; }
.cm-choix .cm-lib { grid-area: lib; font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--lh-muted); }
.cm-choix .cm-val { grid-area: val; font-size: 15.5px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.cm-choix .ico { grid-area: ico; width: 22px; height: 22px; color: var(--lh-muted); }
.feuille-fond { position: fixed; inset: 0; background: rgba(0,0,0,.42); z-index: 9998; animation: fond-in .18s ease-out; }
.feuille { position: fixed; left: 0; right: 0; bottom: 0; max-height: 78vh; z-index: 9999; background: var(--lh-surface); color: var(--lh-text); border-radius: 26px 26px 0 0; padding: 8px 16px calc(16px + env(safe-area-inset-bottom, 0px)); display: flex; flex-direction: column; box-shadow: 0 -10px 40px rgba(0,0,0,.25); animation: feuille-in .24s cubic-bezier(.2,.8,.2,1); font-family: var(--lh-sans); }
.feuille-poignee { width: 40px; height: 5px; border-radius: 3px; background: var(--lh-border); margin: 4px auto 10px; }
.feuille-titre { margin: 0 0 8px; font: 800 20px/1.2 var(--lh-sans); text-align: center; }
.feuille-liste { overflow-y: auto; display: grid; gap: 4px; padding-bottom: 6px; }
.feuille-groupe { font: 700 11px/1 var(--lh-sans); letter-spacing: .12em; text-transform: uppercase; color: var(--lh-muted); padding: 14px 6px 6px; }
.feuille-ligne { text-align: left; min-height: 50px; padding: 0 16px; border: 0; border-radius: 14px; background: transparent; color: var(--lh-text); font: 600 16.5px var(--lh-sans); }
.feuille-ligne:active { background: var(--lh-surface-2); }
.feuille-ligne.feuille-on { background: var(--lh-accent-soft); color: var(--lh-text); font-weight: 800; }
.feuille-ligne.feuille-on::after { content: "✓"; float: right; color: var(--lh-accent); }
@keyframes feuille-in { from { transform: translateY(100%); } to { transform: none; } }
@keyframes fond-in { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .feuille, .feuille-fond { animation: none; } }

/* ======================================================================
   Refonte des pages d'office (barre blanche, en-tête ambre, parties en
   cartes, sommaire souligné). Les couleurs viennent des jetons --lh-*,
   donc le mode nuit suit automatiquement ; l'en-tête reste ambre.
   ====================================================================== */
ons-toolbar.barre-office { --hauteur-barre: 56px; }
ons-toolbar.barre-office .toolbar { height: 56px; background: var(--lh-surface); box-shadow: 0 1px 0 var(--lh-border); }
ons-toolbar.barre-office .toolbar__left, ons-toolbar.barre-office .toolbar__center, ons-toolbar.barre-office .toolbar__right { height: 56px; }
ons-toolbar.barre-office .toolbar__center { padding: 0; flex: 1 1 auto; min-width: 0; justify-content: center; }
ons-toolbar.barre-office .toolbar__right { gap: 6px; padding-right: 8px; justify-content: flex-end; }
ons-toolbar.barre-office .toolbar__left { padding-left: 8px; }
ons-toolbar.barre-office ons-toolbar-button.toolbar-button { margin: 0; }
ons-toolbar.barre-office .bouton_menu_g { background: var(--lh-surface-2); }
ons-toolbar.barre-office .bar-titre { font-weight: 800; }
ons-toolbar.barre-office .bouton_date { position: static; transform: none; margin: 0; height: 40px; font-size: .82rem; font-weight: 700; flex: none; }
@media (max-width: 370px) { ons-toolbar.barre-office .bouton_date::before { display: none; } .bar-pastille { display: none; } }

:is(ons-page#laudes,ons-page#lectures,ons-page#milieu,ons-page#vepres,ons-page#complies,ons-page#messe) ons-card.cadre { background: transparent; box-shadow: none; padding: 0 0 5.5em; width: calc(100% - 24px); }

:is(ons-page#laudes,ons-page#lectures,ons-page#milieu,ons-page#vepres,ons-page#complies,ons-page#messe) .entete { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; color: #1B1B1F; font-family: var(--lh-sans);
	background-color: var(--lh-accent); background-image: radial-gradient(circle at 100% 0, rgba(255,255,255,.26) 0 90px, transparent 91px);
	border-radius: 28px; padding: 16px 16px 16px 18px; margin: 4px 0 12px; line-height: 1.35; }
:is(ons-page#laudes,ons-page#lectures,ons-page#milieu,ons-page#vepres,ons-page#complies,ons-page#messe) .entete > div { width: 100%; text-align: left; margin: 0; padding: 0; font-family: var(--lh-sans); }
:is(ons-page#laudes,ons-page#lectures,ons-page#milieu,ons-page#vepres,ons-page#complies,ons-page#messe) .entete > div:empty { display: none; }
:is(ons-page#laudes,ons-page#lectures,ons-page#milieu,ons-page#vepres,ons-page#complies,ons-page#messe) .entete [id$="_premieres_vepres"] { order: -1; width: auto; }
:is(ons-page#laudes,ons-page#lectures,ons-page#milieu,ons-page#vepres,ons-page#complies,ons-page#messe) .entete [id$="_premieres_vepres"] p { margin: 0; display: inline-block; background: #1B1B1F; border-radius: 999px; padding: .45em 1em; }
:is(ons-page#laudes,ons-page#lectures,ons-page#milieu,ons-page#vepres,ons-page#complies,ons-page#messe) .entete [id$="_premieres_vepres"] p i, :is(ons-page#laudes,ons-page#lectures,ons-page#milieu,ons-page#vepres,ons-page#complies,ons-page#messe) .entete [id$="_premieres_vepres"] .rouge i { color: var(--lh-accent); font-style: normal; font-weight: 800; font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; color: var(--lh-accent); }
:is(ons-page#laudes,ons-page#lectures,ons-page#milieu,ons-page#vepres,ons-page#complies,ons-page#messe) .entete [id$="_titre_principal"] { order: 0; }
:is(ons-page#laudes,ons-page#lectures,ons-page#milieu,ons-page#vepres,ons-page#complies,ons-page#messe) .entete [id$="_titre_principal"] h1 { font-family: var(--lh-sans)!important; font-size: 1.2rem!important; font-weight: 800; letter-spacing: -.015em; line-height: 1.15; margin: 0; color: #1B1B1F; text-align: left; }
:is(ons-page#laudes,ons-page#lectures,ons-page#milieu,ons-page#vepres,ons-page#complies,ons-page#messe) .entete .choix-celebration { order: 4; }
:is(ons-page#laudes,ons-page#lectures,ons-page#milieu,ons-page#vepres,ons-page#complies,ons-page#messe) .entete [id$="_titre_sanctoral"] { order: 2; }
:is(ons-page#laudes,ons-page#lectures,ons-page#milieu,ons-page#vepres,ons-page#complies,ons-page#messe) .entete [id$="_titre_secondaire"] { order: 3; }
:is(ons-page#laudes,ons-page#lectures,ons-page#milieu,ons-page#vepres,ons-page#complies,ons-page#messe) .entete [id$="_titre_sanctoral"]:not(:empty), :is(ons-page#laudes,ons-page#lectures,ons-page#milieu,ons-page#vepres,ons-page#complies,ons-page#messe) .entete [id$="_titre_secondaire"] { background: rgba(255,255,255,.9); color: #1B1B1F; border-radius: 20px; padding: .6em 1em; font-size: .86rem; width: auto; max-width: 100%; }
:is(ons-page#laudes,ons-page#lectures,ons-page#milieu,ons-page#vepres,ons-page#complies,ons-page#messe) .entete [id$="_titre_sanctoral"] h1, :is(ons-page#laudes,ons-page#lectures,ons-page#milieu,ons-page#vepres,ons-page#complies,ons-page#messe) .entete [id$="_titre_sanctoral"] h2, :is(ons-page#laudes,ons-page#lectures,ons-page#milieu,ons-page#vepres,ons-page#complies,ons-page#messe) .entete [id$="_titre_sanctoral"] h3 { font-size: .95rem!important; font-weight: 400; margin: 0; text-align: left; color: #1B1B1F; }
:is(ons-page#laudes,ons-page#lectures,ons-page#milieu,ons-page#vepres,ons-page#complies,ons-page#messe) .entete [id$="_titre_sanctoral"] p, :is(ons-page#laudes,ons-page#lectures,ons-page#milieu,ons-page#vepres,ons-page#complies,ons-page#messe) .entete [id$="_titre_secondaire"] p { margin: .1em 0 0; text-align: left; font-family: var(--lh-sans); }
:is(ons-page#laudes,ons-page#lectures,ons-page#milieu,ons-page#vepres,ons-page#complies,ons-page#messe) .entete [id$="_titre_secondaire"] i { font-style: normal; }
:is(ons-page#laudes,ons-page#lectures,ons-page#milieu,ons-page#vepres,ons-page#complies,ons-page#messe) .entete .rouge, :is(ons-page#laudes,ons-page#lectures,ons-page#milieu,ons-page#vepres,ons-page#complies,ons-page#messe) .entete .rouge i { color: #B3261E; }
:is(ons-page#laudes,ons-page#lectures,ons-page#milieu,ons-page#vepres,ons-page#complies,ons-page#messe) .entete .choix-masque { display: none!important; }
:is(ons-page#laudes,ons-page#lectures,ons-page#milieu,ons-page#vepres,ons-page#complies,ons-page#messe) .entete .saint-origine { font-size: .78rem; color: #55555d; }
:is(ons-page#laudes,ons-page#lectures,ons-page#milieu,ons-page#vepres,ons-page#complies,ons-page#messe) .entete .choix-celebration { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; width: 100%; margin: 0; text-align: left;
	background: rgba(255,255,255,.55); border-radius: 18px; padding: .5em .5em .5em 1em; }
:is(ons-page#laudes,ons-page#lectures,ons-page#milieu,ons-page#vepres,ons-page#complies,ons-page#messe) .entete .choix-celebration::before { content: "Plusieurs célébrations possibles"; font-size: .8rem; font-weight: 500; }
:is(ons-page#laudes,ons-page#lectures,ons-page#milieu,ons-page#vepres,ons-page#complies,ons-page#messe) .entete .choix-changer { background: #1B1B1F; color: #fff; border: 0; opacity: 1; border-radius: 999px; padding: .55em 1.2em; font: 700 .8rem var(--lh-sans); }
:is(ons-page#laudes,ons-page#lectures,ons-page#milieu,ons-page#vepres,ons-page#complies,ons-page#messe) .entete .choix-celebration .choix-liste { flex-basis: 100%; margin: 4px 0 0; }
:is(ons-page#laudes,ons-page#lectures,ons-page#milieu,ons-page#vepres,ons-page#complies,ons-page#messe) .entete .choix-option { background: #fff; color: #1B1B1F; border-radius: 16px; }
:is(ons-page#laudes,ons-page#lectures,ons-page#milieu,ons-page#vepres,ons-page#complies,ons-page#messe) .entete .choix-option[aria-checked="true"] { background: #FDEFCF; border-color: #F2A413; }
:is(ons-page#laudes,ons-page#lectures,ons-page#milieu,ons-page#vepres,ons-page#complies,ons-page#messe) .entete .choix-sous { color: #55555d; }
:is(ons-page#laudes,ons-page#lectures,ons-page#milieu,ons-page#vepres,ons-page#complies,ons-page#messe) .entete .choix-valider { background: #1B1B1F; color: #fff; border-radius: 999px; }

:is(ons-page#laudes,ons-page#lectures,ons-page#milieu,ons-page#vepres,ons-page#complies,ons-page#messe) .cadre .partie { background: var(--lh-surface); border-radius: 24px; padding: .2em 1.25em 1.1em; margin: 12px 0; box-shadow: var(--lh-shadow); }
:is(ons-page#laudes,ons-page#lectures,ons-page#milieu,ons-page#vepres,ons-page#complies,ons-page#messe) .cadre .partie--intro { padding: .45em 1.25em; }
:is(ons-page#laudes,ons-page#lectures,ons-page#milieu,ons-page#vepres,ons-page#complies,ons-page#messe) .cadre .partie--intro p { margin: .25em 0; }
:is(ons-page#laudes,ons-page#lectures,ons-page#milieu,ons-page#vepres,ons-page#complies,ons-page#messe) .cadre .partie > h2 { margin: 1.1em 0 .6em!important; }
:is(ons-page#laudes,ons-page#lectures,ons-page#milieu,ons-page#vepres,ons-page#complies,ons-page#messe) .cadre .partie .antienne { background: var(--lh-accent-soft); border-radius: 16px; padding: .6em 1em; margin: .8em 0; }
:is(ons-page#laudes,ons-page#lectures,ons-page#milieu,ons-page#vepres,ons-page#complies,ons-page#messe) .cadre .select-input { border: 0; border-radius: 999px; background: var(--lh-surface-2); color: var(--lh-text); font-weight: 700; padding: .5em 1.2em; }
:is(ons-page#laudes,ons-page#lectures,ons-page#milieu,ons-page#vepres,ons-page#complies,ons-page#messe) .cadre > [id$="_option-div"] { background: var(--lh-surface); border-radius: 24px; padding: .5em 1.25em; margin: 12px 0; box-shadow: var(--lh-shadow); }

:is(ons-page#laudes,ons-page#lectures,ons-page#milieu,ons-page#vepres,ons-page#complies,ons-page#messe) .sommaire { position: sticky; top: 0; z-index: 20; display: flex; gap: 22px; overflow-x: auto; padding: 0 18px;
	background: var(--lh-surface); box-shadow: 0 1px 0 var(--lh-border); scrollbar-width: none; font-family: var(--lh-sans); }
:is(ons-page#laudes,ons-page#lectures,ons-page#milieu,ons-page#vepres,ons-page#complies,ons-page#messe) .sommaire::-webkit-scrollbar { display: none; }
:is(ons-page#laudes,ons-page#lectures,ons-page#milieu,ons-page#vepres,ons-page#complies,ons-page#messe) .sommaire button { flex: none; background: none; border: 0; border-bottom: 3px solid transparent; border-radius: 0; padding: 13px 0 10px;
	font: 700 .86rem var(--lh-sans); color: var(--lh-muted); cursor: pointer; white-space: nowrap; max-width: 12em; overflow: hidden; text-overflow: ellipsis; }
:is(ons-page#laudes,ons-page#lectures,ons-page#milieu,ons-page#vepres,ons-page#complies,ons-page#messe) .sommaire button.on { color: var(--lh-text); border-bottom-color: var(--lh-accent); }
:is(ons-page#laudes,ons-page#lectures,ons-page#milieu,ons-page#vepres,ons-page#complies,ons-page#messe) .entete .choix-celebration, :is(ons-page#laudes,ons-page#lectures,ons-page#milieu,ons-page#vepres,ons-page#complies,ons-page#messe) .entete .choix-celebration * { box-sizing: border-box; }
:is(ons-page#laudes,ons-page#lectures,ons-page#milieu,ons-page#vepres,ons-page#complies,ons-page#messe) .entete .choix-celebration { padding-right: .5em; }
:is(ons-page#laudes,ons-page#lectures,ons-page#milieu,ons-page#vepres,ons-page#complies,ons-page#messe) .entete .choix-celebration .choix-liste { width: 100%; padding-right: .5em; }
:is(ons-page#laudes,ons-page#lectures,ons-page#milieu,ons-page#vepres,ons-page#complies,ons-page#messe) .entete .choix-celebration .choix-option, :is(ons-page#laudes,ons-page#lectures,ons-page#milieu,ons-page#vepres,ons-page#complies,ons-page#messe) .entete .choix-celebration .choix-valider { max-width: 100%; }

/* --- Ajustements d'après la maquette validée --- */
:is(ons-page#laudes,ons-page#lectures,ons-page#milieu,ons-page#vepres,ons-page#complies,ons-page#messe) .entete { border-radius: 0 0 30px 30px; margin: 0; padding: 14px 18px 18px; width: 100%; box-sizing: border-box; }
:is(ons-page#laudes,ons-page#lectures,ons-page#milieu,ons-page#vepres,ons-page#complies,ons-page#messe) ons-card.cadre { margin-top: 10px; }
:is(ons-page#laudes,ons-page#lectures,ons-page#milieu,ons-page#vepres,ons-page#complies,ons-page#messe) .entete [id$="_titre_sanctoral"]:not(:empty), :is(ons-page#laudes,ons-page#lectures,ons-page#milieu,ons-page#vepres,ons-page#complies,ons-page#messe) .entete [id$="_titre_secondaire"] { border-radius: 999px; padding: .45em 1em .45em .8em; font-size: .8rem; box-shadow: 0 1px 6px rgba(27,27,31,.08); background: #fff; }
:is(ons-page#laudes,ons-page#lectures,ons-page#milieu,ons-page#vepres,ons-page#complies,ons-page#messe) .entete [id$="_titre_sanctoral"] h1, :is(ons-page#laudes,ons-page#lectures,ons-page#milieu,ons-page#vepres,ons-page#complies,ons-page#messe) .entete [id$="_titre_sanctoral"] h2, :is(ons-page#laudes,ons-page#lectures,ons-page#milieu,ons-page#vepres,ons-page#complies,ons-page#messe) .entete [id$="_titre_sanctoral"] h3, :is(ons-page#laudes,ons-page#lectures,ons-page#milieu,ons-page#vepres,ons-page#complies,ons-page#messe) .entete [id$="_titre_sanctoral"] p, :is(ons-page#laudes,ons-page#lectures,ons-page#milieu,ons-page#vepres,ons-page#complies,ons-page#messe) .entete [id$="_titre_secondaire"] p { display: inline; font-size: .82rem!important; margin: 0; }
:is(ons-page#laudes,ons-page#lectures,ons-page#milieu,ons-page#vepres,ons-page#complies,ons-page#messe) .entete [id$="_titre_sanctoral"] p { margin-left: .5em; }
:is(ons-page#laudes,ons-page#lectures,ons-page#milieu,ons-page#vepres,ons-page#complies,ons-page#messe) .entete [id$="_titre_secondaire"] br { display: none; }
:is(ons-page#laudes,ons-page#lectures,ons-page#milieu,ons-page#vepres,ons-page#complies,ons-page#messe) .entete .saint-origine { display: block!important; margin-left: 0!important; }
:is(ons-page#laudes,ons-page#lectures,ons-page#milieu,ons-page#vepres,ons-page#complies,ons-page#messe) .entete .choix-celebration { background: rgba(255,255,255,.55); border-radius: 18px; padding: .5em .55em .5em 1em; flex-wrap: nowrap; }
:is(ons-page#laudes,ons-page#lectures,ons-page#milieu,ons-page#vepres,ons-page#complies,ons-page#messe) .entete .choix-celebration::before { content: none; }
:is(ons-page#laudes,ons-page#lectures,ons-page#milieu,ons-page#vepres,ons-page#complies,ons-page#messe) .entete .choix-lib { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
:is(ons-page#laudes,ons-page#lectures,ons-page#milieu,ons-page#vepres,ons-page#complies,ons-page#messe) .entete .choix-lib small { font-size: .72rem; font-weight: 500; opacity: .8; }
:is(ons-page#laudes,ons-page#lectures,ons-page#milieu,ons-page#vepres,ons-page#complies,ons-page#messe) .entete .choix-lib b { font-size: .9rem; font-weight: 800; }
:is(ons-page#laudes,ons-page#lectures,ons-page#milieu,ons-page#vepres,ons-page#complies,ons-page#messe) .entete .choix-celebration .choix-changer { flex: none; }
:is(ons-page#laudes,ons-page#lectures,ons-page#milieu,ons-page#vepres,ons-page#complies,ons-page#messe) .entete .choix-plusieurs { background: #1B1B1F; color: #fff; }
:is(ons-page#laudes,ons-page#lectures,ons-page#milieu,ons-page#vepres,ons-page#complies,ons-page#messe) .entete .choix-plusieurs .choix-lib small { color: var(--lh-accent); opacity: 1; }
:is(ons-page#laudes,ons-page#lectures,ons-page#milieu,ons-page#vepres,ons-page#complies,ons-page#messe) .entete .choix-plusieurs .choix-changer { background: var(--lh-accent); color: #1B1B1F; }
:is(ons-page#laudes,ons-page#lectures,ons-page#milieu,ons-page#vepres,ons-page#complies,ons-page#messe) .sommaire { margin-top: 0; }

/* feuille de choix de la célébration */
.choix-feuille { position: fixed; inset: 0; z-index: 100000; font-family: var(--lh-sans); }
.choix-scrim { position: absolute; inset: 0; background: rgba(27,27,31,.5); }
.choix-sheet { position: absolute; left: 0; right: 0; bottom: 0; max-height: 86%; overflow: auto; background: var(--lh-surface); color: var(--lh-text);
	border-radius: 28px 28px 0 0; padding: 10px 16px calc(22px + env(safe-area-inset-bottom)); box-shadow: 0 -8px 30px rgba(0,0,0,.25); }
.choix-grip { width: 42px; height: 5px; border-radius: 3px; background: var(--lh-border); margin: 0 auto 14px; }
.choix-sheet h3 { font: 800 1.1rem var(--lh-sans)!important; margin: 0 4px 12px; }
.choix-sheet .choix-liste { gap: 8px; }
.choix-sheet .choix-option { border-radius: 20px; padding: 13px 14px; background: var(--lh-surface-2); border: 2px solid transparent; }
.choix-sheet .choix-option[aria-checked="true"] { background: var(--lh-accent-soft); border-color: var(--lh-accent); }
.choix-sheet .choix-titre { font-weight: 800; }
.choix-defaut { margin-left: auto; flex: none; align-self: flex-start; font: 700 .68rem var(--lh-sans); background: #1B1B1F; color: #F2A413; border-radius: 999px; padding: .35em .75em; }
.choix-sheet .choix-valider { background: var(--lh-accent); color: #1B1B1F; border-radius: 999px; padding: .9em; font-weight: 800; }

/* --- Maquette : en-tête collé sous la barre, onglets dessous, titres au-dessus des cartes --- */
:is(ons-page#laudes,ons-page#lectures,ons-page#milieu,ons-page#vepres,ons-page#complies,ons-page#messe) ons-card.cadre { width: 100%; max-width: none; margin: 0; padding: 0 0 5.5em; background: transparent; box-shadow: none; }
:is(ons-page#laudes,ons-page#lectures,ons-page#milieu,ons-page#vepres,ons-page#complies,ons-page#messe) .entete { margin: 0; }
:is(ons-page#laudes,ons-page#lectures,ons-page#milieu,ons-page#vepres,ons-page#complies,ons-page#messe) .sommaire { margin: 14px 0 6px; padding: 0 18px; }
:is(ons-page#laudes,ons-page#lectures,ons-page#milieu,ons-page#vepres,ons-page#complies,ons-page#messe) .cadre > :not(.entete):not(.sommaire) { margin-left: 14px; margin-right: 14px; }
:is(ons-page#laudes,ons-page#lectures,ons-page#milieu,ons-page#vepres,ons-page#complies,ons-page#messe) .cadre .partie { background: transparent; box-shadow: none; border-radius: 0; padding: 0; margin: 0; }
:is(ons-page#laudes,ons-page#lectures,ons-page#milieu,ons-page#vepres,ons-page#complies,ons-page#messe) .cadre .partie--intro { background: var(--lh-surface); box-shadow: var(--lh-shadow); border-radius: 24px; padding: .45em 1.25em; margin: 14px 14px 0; }
:is(ons-page#laudes,ons-page#lectures,ons-page#milieu,ons-page#vepres,ons-page#complies,ons-page#messe) .cadre .partie > h2 { margin: 2em 0 .7em!important; padding-left: .75em; }
:is(ons-page#laudes,ons-page#lectures,ons-page#milieu,ons-page#vepres,ons-page#complies,ons-page#messe) .cadre .partie > .carte { background: var(--lh-surface); box-shadow: var(--lh-shadow); border-radius: 24px; padding: .5em 1.25em 1.1em; }
:is(ons-page#laudes,ons-page#lectures,ons-page#milieu,ons-page#vepres,ons-page#complies,ons-page#messe) .entete [id$="_titre_secondaire"] br { display: block; content: ""; }
:is(ons-page#laudes,ons-page#lectures,ons-page#milieu,ons-page#vepres,ons-page#complies,ons-page#messe) .entete [id$="_titre_secondaire"] p { display: block; line-height: 1.35; }
:is(ons-page#laudes,ons-page#lectures,ons-page#milieu,ons-page#vepres,ons-page#complies,ons-page#messe) .entete [id$="_titre_sanctoral"]:not(:empty), :is(ons-page#laudes,ons-page#lectures,ons-page#milieu,ons-page#vepres,ons-page#complies,ons-page#messe) .entete [id$="_titre_secondaire"] { border-radius: 20px; }

/* --- En-tête : saint et temps liturgique en simples lignes de texte (plus de pastilles) --- */
:is(ons-page#laudes,ons-page#lectures,ons-page#milieu,ons-page#vepres,ons-page#complies,ons-page#messe) .entete { gap: 6px; }
:is(ons-page#laudes,ons-page#lectures,ons-page#milieu,ons-page#vepres,ons-page#complies,ons-page#messe) .entete [id$="_titre_sanctoral"]:not(:empty), :is(ons-page#laudes,ons-page#lectures,ons-page#milieu,ons-page#vepres,ons-page#complies,ons-page#messe) .entete [id$="_titre_secondaire"] {
	background: transparent; box-shadow: none; border-radius: 0; padding: 0; width: 100%; font-size: .9rem; color: #1B1B1F; }
:is(ons-page#laudes,ons-page#lectures,ons-page#milieu,ons-page#vepres,ons-page#complies,ons-page#messe) .entete [id$="_titre_sanctoral"] h1, :is(ons-page#laudes,ons-page#lectures,ons-page#milieu,ons-page#vepres,ons-page#complies,ons-page#messe) .entete [id$="_titre_sanctoral"] h2, :is(ons-page#laudes,ons-page#lectures,ons-page#milieu,ons-page#vepres,ons-page#complies,ons-page#messe) .entete [id$="_titre_sanctoral"] h3 { display: block; font-size: .98rem!important; font-weight: 400; line-height: 1.3; }
:is(ons-page#laudes,ons-page#lectures,ons-page#milieu,ons-page#vepres,ons-page#complies,ons-page#messe) .entete [id$="_titre_sanctoral"] b { font-weight: 800; }
:is(ons-page#laudes,ons-page#lectures,ons-page#milieu,ons-page#vepres,ons-page#complies,ons-page#messe) .entete [id$="_titre_sanctoral"] p { display: block; margin: 1px 0 0 !important; font-size: .82rem!important; font-style: italic; color: #1B1B1F; opacity: .8; }
:is(ons-page#laudes,ons-page#lectures,ons-page#milieu,ons-page#vepres,ons-page#complies,ons-page#messe) .entete [id$="_titre_secondaire"] p { display: block; margin: 0; font-size: .86rem; line-height: 1.35; }
:is(ons-page#laudes,ons-page#lectures,ons-page#milieu,ons-page#vepres,ons-page#complies,ons-page#messe) .entete [id$="_titre_secondaire"] br { display: block; }
:is(ons-page#laudes,ons-page#lectures,ons-page#milieu,ons-page#vepres,ons-page#complies,ons-page#messe) .entete [id$="_titre_secondaire"] i { font-style: normal; }
:is(ons-page#laudes,ons-page#lectures,ons-page#milieu,ons-page#vepres,ons-page#complies,ons-page#messe) .entete [id$="_titre_secondaire"] .couleur-lit, :is(ons-page#laudes,ons-page#lectures,ons-page#milieu,ons-page#vepres,ons-page#complies,ons-page#messe) .entete [id$="_titre_sanctoral"] .couleur-lit { margin-right: .55em; vertical-align: .05em; }
:is(ons-page#laudes,ons-page#lectures,ons-page#milieu,ons-page#vepres,ons-page#complies,ons-page#messe) .entete .rouge, :is(ons-page#laudes,ons-page#lectures,ons-page#milieu,ons-page#vepres,ons-page#complies,ons-page#messe) .entete .rouge i { color: #1B1B1F; opacity: .8; }
:is(ons-page#laudes,ons-page#lectures,ons-page#milieu,ons-page#vepres,ons-page#complies,ons-page#messe) .entete [id$="_titre_sanctoral"]:not(:empty) + [id$="_titre_secondaire"], :is(ons-page#laudes,ons-page#lectures,ons-page#milieu,ons-page#vepres,ons-page#complies,ons-page#messe) .entete .choix-celebration { margin-top: 2px; }
:is(ons-page#laudes,ons-page#lectures,ons-page#milieu,ons-page#vepres,ons-page#complies,ons-page#messe) .entete .saint-origine { font-size: .78rem; opacity: .75; }

/* --- En-tête : pastilles lisibles (une carte arrondie par information, blanc cassé, ombre légère) --- */
:is(ons-page#laudes,ons-page#lectures,ons-page#milieu,ons-page#vepres,ons-page#complies,ons-page#messe) .entete { gap: 8px; }
:is(ons-page#laudes,ons-page#lectures,ons-page#milieu,ons-page#vepres,ons-page#complies,ons-page#messe) .entete [id$="_titre_sanctoral"]:not(:empty), :is(ons-page#laudes,ons-page#lectures,ons-page#milieu,ons-page#vepres,ons-page#complies,ons-page#messe) .entete [id$="_titre_secondaire"] {
	background: #fff; box-shadow: 0 2px 8px rgba(27,27,31,.10); border-radius: 18px; padding: .55em 1em .55em .85em;
	width: auto; max-width: 100%; box-sizing: border-box; color: #1B1B1F; }
:is(ons-page#laudes,ons-page#lectures,ons-page#milieu,ons-page#vepres,ons-page#complies,ons-page#messe) .entete [id$="_titre_sanctoral"] h1, :is(ons-page#laudes,ons-page#lectures,ons-page#milieu,ons-page#vepres,ons-page#complies,ons-page#messe) .entete [id$="_titre_sanctoral"] h2, :is(ons-page#laudes,ons-page#lectures,ons-page#milieu,ons-page#vepres,ons-page#complies,ons-page#messe) .entete [id$="_titre_sanctoral"] h3 {
	display: block; font-size: .92rem!important; font-weight: 400; line-height: 1.3; margin: 0; color: #1B1B1F; }
:is(ons-page#laudes,ons-page#lectures,ons-page#milieu,ons-page#vepres,ons-page#complies,ons-page#messe) .entete [id$="_titre_sanctoral"] b { font-weight: 800; }
:is(ons-page#laudes,ons-page#lectures,ons-page#milieu,ons-page#vepres,ons-page#complies,ons-page#messe) .entete [id$="_titre_sanctoral"] p { display: block; margin: 1px 0 0 !important; padding-left: 1.45em; font-size: .78rem!important; font-style: italic; opacity: 1; color: #B3261E; }
:is(ons-page#laudes,ons-page#lectures,ons-page#milieu,ons-page#vepres,ons-page#complies,ons-page#messe) .entete [id$="_titre_sanctoral"] .rouge, :is(ons-page#laudes,ons-page#lectures,ons-page#milieu,ons-page#vepres,ons-page#complies,ons-page#messe) .entete [id$="_titre_sanctoral"] .rouge i { color: #B3261E; opacity: 1; }
:is(ons-page#laudes,ons-page#lectures,ons-page#milieu,ons-page#vepres,ons-page#complies,ons-page#messe) .entete [id$="_titre_secondaire"] p { display: block; margin: 0; font-size: .86rem; line-height: 1.35; color: #1B1B1F; }
:is(ons-page#laudes,ons-page#lectures,ons-page#milieu,ons-page#vepres,ons-page#complies,ons-page#messe) .entete [id$="_titre_secondaire"] i { display: inline; font-style: normal; }
:is(ons-page#laudes,ons-page#lectures,ons-page#milieu,ons-page#vepres,ons-page#complies,ons-page#messe) .entete [id$="_titre_secondaire"] br { display: block; content: ""; margin-top: 1px; }
:is(ons-page#laudes,ons-page#lectures,ons-page#milieu,ons-page#vepres,ons-page#complies,ons-page#messe) .entete .saint-origine { display: block!important; padding-left: 1.45em; margin: 1px 0 0!important; font-size: .76rem; color: #55555d; opacity: 1; }

/* ======================================================================
   Version retenue : en-tête « Encre » (carte sombre, texte clair).
   Remplace les essais précédents (bandeau ambre, pastilles).
   ====================================================================== */
:is(ons-page#laudes,ons-page#lectures,ons-page#milieu,ons-page#vepres,ons-page#complies,ons-page#messe) .entete { --tx: #fff; --tx2: #C9C9D0; --rg: #FF9188;
	background: #1B1B1F; background-image: none; box-shadow: none; border-radius: 24px;
	margin: 12px 14px 0; width: calc(100% - 28px); padding: 16px 18px; gap: 6px; color: var(--tx); box-sizing: border-box; }
:is(ons-page#laudes,ons-page#lectures,ons-page#milieu,ons-page#vepres,ons-page#complies,ons-page#messe) ons-card.cadre { margin-top: 0; }
:is(ons-page#laudes,ons-page#lectures,ons-page#milieu,ons-page#vepres,ons-page#complies,ons-page#messe) .entete [id$="_titre_principal"] h1 { color: var(--tx); font-size: 1.3rem!important; }
:is(ons-page#laudes,ons-page#lectures,ons-page#milieu,ons-page#vepres,ons-page#complies,ons-page#messe) .entete [id$="_titre_sanctoral"]:not(:empty), :is(ons-page#laudes,ons-page#lectures,ons-page#milieu,ons-page#vepres,ons-page#complies,ons-page#messe) .entete [id$="_titre_secondaire"] {
	background: transparent; box-shadow: none; border-radius: 0; padding: 0; width: 100%; color: var(--tx); }
:is(ons-page#laudes,ons-page#lectures,ons-page#milieu,ons-page#vepres,ons-page#complies,ons-page#messe) .entete [id$="_titre_sanctoral"] h1, :is(ons-page#laudes,ons-page#lectures,ons-page#milieu,ons-page#vepres,ons-page#complies,ons-page#messe) .entete [id$="_titre_sanctoral"] h2, :is(ons-page#laudes,ons-page#lectures,ons-page#milieu,ons-page#vepres,ons-page#complies,ons-page#messe) .entete [id$="_titre_sanctoral"] h3 { color: var(--tx); font-size: 1rem!important; }
:is(ons-page#laudes,ons-page#lectures,ons-page#milieu,ons-page#vepres,ons-page#complies,ons-page#messe) .entete [id$="_titre_sanctoral"] p, :is(ons-page#laudes,ons-page#lectures,ons-page#milieu,ons-page#vepres,ons-page#complies,ons-page#messe) .entete [id$="_titre_sanctoral"] .rouge, :is(ons-page#laudes,ons-page#lectures,ons-page#milieu,ons-page#vepres,ons-page#complies,ons-page#messe) .entete [id$="_titre_sanctoral"] .rouge i { color: var(--rg); padding-left: 1.45em; }
:is(ons-page#laudes,ons-page#lectures,ons-page#milieu,ons-page#vepres,ons-page#complies,ons-page#messe) .entete [id$="_titre_secondaire"] p { color: var(--tx2); font-size: .86rem; }
:is(ons-page#laudes,ons-page#lectures,ons-page#milieu,ons-page#vepres,ons-page#complies,ons-page#messe) .entete [id$="_titre_secondaire"] b { color: var(--tx); }
:is(ons-page#laudes,ons-page#lectures,ons-page#milieu,ons-page#vepres,ons-page#complies,ons-page#messe) .entete [id$="_titre_secondaire"] br { display: block; content: ""; }
:is(ons-page#laudes,ons-page#lectures,ons-page#milieu,ons-page#vepres,ons-page#complies,ons-page#messe) .entete .saint-origine { color: var(--tx2); }
:is(ons-page#laudes,ons-page#lectures,ons-page#milieu,ons-page#vepres,ons-page#complies,ons-page#messe) .entete .choix-celebration { background: rgba(255,255,255,.12); color: var(--tx); margin-top: 6px; }
:is(ons-page#laudes,ons-page#lectures,ons-page#milieu,ons-page#vepres,ons-page#complies,ons-page#messe) .entete .choix-celebration .choix-lib small { color: var(--tx2); opacity: 1; }
:is(ons-page#laudes,ons-page#lectures,ons-page#milieu,ons-page#vepres,ons-page#complies,ons-page#messe) .entete .choix-celebration .choix-changer { background: #F2A413; color: #1B1B1F; }
:is(ons-page#laudes,ons-page#lectures,ons-page#milieu,ons-page#vepres,ons-page#complies,ons-page#messe) .entete [id$="_premieres_vepres"] p { background: #F2A413; }
:is(ons-page#laudes,ons-page#lectures,ons-page#milieu,ons-page#vepres,ons-page#complies,ons-page#messe) .entete [id$="_premieres_vepres"] p i, :is(ons-page#laudes,ons-page#lectures,ons-page#milieu,ons-page#vepres,ons-page#complies,ons-page#messe) .entete [id$="_premieres_vepres"] .rouge i { color: #1B1B1F; }
:is(ons-page#laudes,ons-page#lectures,ons-page#milieu,ons-page#vepres,ons-page#complies,ons-page#messe) .sommaire { margin-top: 14px; }

/* ======================================================================
   Version finale : en-tête compact, sans encadré sombre (proposition 5).
   Clair et sombre via les variables --lh-*.
   ====================================================================== */
:is(ons-page#laudes,ons-page#lectures,ons-page#milieu,ons-page#vepres,ons-page#complies,ons-page#messe) .entete { --tx: var(--lh-text, #1B1B1F); --tx2: var(--lh-muted, #6b6b73); --rg: #C0392B;
	background: transparent!important; box-shadow: none!important; border-radius: 0!important;
	margin: 0!important; width: 100%!important; padding: 12px 18px 0!important; gap: 3px!important; box-sizing: border-box; }
:is(ons-page#laudes,ons-page#lectures,ons-page#milieu,ons-page#vepres,ons-page#complies,ons-page#messe) .entete [id$="_titre_principal"] h1 { font-size: 1.12rem!important; }
:is(ons-page#laudes,ons-page#lectures,ons-page#milieu,ons-page#vepres,ons-page#complies,ons-page#messe) .entete [id$="_titre_sanctoral"] h1, :is(ons-page#laudes,ons-page#lectures,ons-page#milieu,ons-page#vepres,ons-page#complies,ons-page#messe) .entete [id$="_titre_sanctoral"] h2, :is(ons-page#laudes,ons-page#lectures,ons-page#milieu,ons-page#vepres,ons-page#complies,ons-page#messe) .entete [id$="_titre_sanctoral"] h3 { font-size: .92rem!important; }
:is(ons-page#laudes,ons-page#lectures,ons-page#milieu,ons-page#vepres,ons-page#complies,ons-page#messe) .entete [id$="_titre_secondaire"] br { display: none!important; }
:is(ons-page#laudes,ons-page#lectures,ons-page#milieu,ons-page#vepres,ons-page#complies,ons-page#messe) .entete [id$="_titre_secondaire"] b { margin-right: .4em; }
:is(ons-page#laudes,ons-page#lectures,ons-page#milieu,ons-page#vepres,ons-page#complies,ons-page#messe) .entete [id$="_titre_secondaire"] p { font-size: .8rem!important; }
:is(ons-page#laudes,ons-page#lectures,ons-page#milieu,ons-page#vepres,ons-page#complies,ons-page#messe) .entete .choix-celebration { background: rgba(127,127,135,.14)!important; color: var(--tx)!important; margin-top: 8px; }
:is(ons-page#laudes,ons-page#lectures,ons-page#milieu,ons-page#vepres,ons-page#complies,ons-page#messe) .entete .choix-celebration .choix-lib small { color: var(--tx2)!important; }
:is(ons-page#laudes,ons-page#lectures,ons-page#milieu,ons-page#vepres,ons-page#complies,ons-page#messe) .entete .choix-celebration .choix-changer { background: #F2A413!important; color: #1B1B1F!important; }
:is(ons-page#laudes,ons-page#lectures,ons-page#milieu,ons-page#vepres,ons-page#complies,ons-page#messe) .cadre .partie>.carte, :is(ons-page#laudes,ons-page#lectures,ons-page#milieu,ons-page#vepres,ons-page#complies,ons-page#messe) .cadre .partie--intro { box-shadow: none!important; border: 1px solid var(--lh-border); }
:is(ons-page#laudes,ons-page#lectures,ons-page#milieu,ons-page#vepres,ons-page#complies,ons-page#messe) .cadre .partie>h2 { margin: 1.5em 18px .6em!important; }
:is(ons-page#laudes,ons-page#lectures,ons-page#milieu,ons-page#vepres,ons-page#complies,ons-page#messe) .cadre .antienne, :is(ons-page#laudes,ons-page#lectures,ons-page#milieu,ons-page#vepres,ons-page#complies,ons-page#messe) .cadre .partie .antienne { background: transparent!important; padding-left: 0!important; padding-right: 0!important; text-align: left!important; border-radius: 0!important; }
/* Premières vêpres : petite étiquette discrète à la place de la grosse bulle */
:is(ons-page#laudes,ons-page#lectures,ons-page#milieu,ons-page#vepres,ons-page#complies,ons-page#messe) .entete [id$="_premieres_vepres"] { order: -1; width: auto; margin: 0 0 2px; }
:is(ons-page#laudes,ons-page#lectures,ons-page#milieu,ons-page#vepres,ons-page#complies,ons-page#messe) .entete [id$="_premieres_vepres"] p { display: inline-flex; align-items: center; gap: .45em; margin: 0; background: transparent!important; border: 1px solid #F2A413; border-radius: 8px; padding: .18em .6em; }
:is(ons-page#laudes,ons-page#lectures,ons-page#milieu,ons-page#vepres,ons-page#complies,ons-page#messe) .entete [id$="_premieres_vepres"] p::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #F2A413; }
:is(ons-page#laudes,ons-page#lectures,ons-page#milieu,ons-page#vepres,ons-page#complies,ons-page#messe) .entete [id$="_premieres_vepres"] p i, :is(ons-page#laudes,ons-page#lectures,ons-page#milieu,ons-page#vepres,ons-page#complies,ons-page#messe) .entete [id$="_premieres_vepres"] .rouge i { color: var(--tx)!important; font-size: .64rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; font-style: normal; }

/* Milieu du jour : sélecteurs « Heure » et « Psaumes » */
#m_commande { margin: 14px 18px 0; display: grid; gap: 6px; box-sizing: border-box; }
#m_commande .milieu-etiquette { margin: 6px 2px 0; font-family: var(--lh-sans); font-size: .78rem; font-weight: 600; color: var(--lh-muted); text-transform: none; letter-spacing: 0; }
#m_commande .seg { display: flex; gap: 2px; padding: 3px; border-radius: 14px; background: rgba(127,127,135,.14); box-shadow: none; }
#m_commande .seg-bouton { flex: 1; min-width: 0; border-radius: 11px; padding: 8px 6px; font-size: .88rem; font-weight: 600; background: transparent; color: var(--lh-text); }
#m_commande .seg-bouton[aria-pressed="true"] { background: #F2A413; color: #1B1B1F; }
#m_commande .milieu-note { margin: 4px 2px 0; font-size: .8rem; }

/* ======================================================================
   Version retenue : texte posé sur la page, sans rectangles arrondis.
   L'en-tête (date, saint, temps) est légèrement teinté pour se distinguer du corps.
   ====================================================================== */
ons-page#laudes, ons-page#lectures, ons-page#milieu, ons-page#vepres, ons-page#complies, ons-page#messe { --lh-page-background: var(--lh-surface); }
ons-page#laudes .page__content, ons-page#lectures .page__content, ons-page#milieu .page__content, ons-page#vepres .page__content, ons-page#complies .page__content, ons-page#messe .page__content { background: var(--lh-surface) !important; }
:is(ons-page#laudes,ons-page#lectures,ons-page#milieu,ons-page#vepres,ons-page#complies,ons-page#messe) .entete { background: rgba(127,127,135,.10) !important; border-bottom: 1px solid var(--lh-border) !important; padding-bottom: 12px !important; }
:is(ons-page#laudes,ons-page#lectures,ons-page#milieu,ons-page#vepres,ons-page#complies,ons-page#messe) .entete .choix-celebration { background: rgba(127,127,135,.16) !important; }
:is(ons-page#laudes,ons-page#lectures,ons-page#milieu,ons-page#vepres,ons-page#complies,ons-page#messe) .sommaire { background: var(--lh-surface) !important; margin-top: 0 !important; }
:is(ons-page#laudes,ons-page#lectures,ons-page#milieu,ons-page#vepres,ons-page#complies,ons-page#messe) .cadre .partie { background: transparent !important; margin: 0 !important; padding: 0 !important; }
:is(ons-page#laudes,ons-page#lectures,ons-page#milieu,ons-page#vepres,ons-page#complies,ons-page#messe) .cadre .partie > .carte, :is(ons-page#laudes,ons-page#lectures,ons-page#milieu,ons-page#vepres,ons-page#complies,ons-page#messe) .cadre .partie--intro { background: transparent !important; border: 0 !important; box-shadow: none !important; border-radius: 0 !important; padding: 0 18px !important; margin: 0 !important; }
:is(ons-page#laudes,ons-page#lectures,ons-page#milieu,ons-page#vepres,ons-page#complies,ons-page#messe) .cadre .partie > h2 { margin: 1.6em 18px .5em !important; }
:is(ons-page#laudes,ons-page#lectures,ons-page#milieu,ons-page#vepres,ons-page#complies,ons-page#messe) .cadre .partie .antienne { padding-left: 0 !important; }

/* Bouton rond « plein écran » (en bas à droite) : supprimé */
ons-page#laudes ons-fab, ons-page#lectures ons-fab, ons-page#milieu ons-fab, ons-page#vepres ons-fab, ons-page#complies ons-fab, ons-page#messe ons-fab { display: none !important; }

/* « Actualiser l'office » : seulement dans les pages d'office (voir Charge_page) */
.menu-lien--office { display: none; }
body.page-office .menu-lien--office { display: flex; }

/* ====== En-tête en dégradé + onglets en pilules (une couleur par office) ====== */
ons-page.page#lectures { --hg: linear-gradient(160deg,#2E7D7A,#1B5553); --hg-n: linear-gradient(160deg,#245F5E,#133C3B); --hfg: #fff; --hpill: rgba(255,255,255,.2); }
ons-page.page#laudes { --hg: linear-gradient(160deg,#F7B733,#F2A413); --hg-n: linear-gradient(160deg,#C98A00,#9A6400); --hfg: #1B1B1F; --hpill: rgba(0,0,0,.10); }
ons-page.page#milieu { --hg: linear-gradient(160deg,#4A90C2,#2D628F); --hg-n: linear-gradient(160deg,#33699A,#1E4568); --hfg: #fff; --hpill: rgba(255,255,255,.2); }
ons-page.page#vepres { --hg: linear-gradient(160deg,#F28C3A,#C8502E); --hg-n: linear-gradient(160deg,#A8531D,#7C2F14); --hfg: #fff; --hpill: rgba(255,255,255,.2); }
ons-page.page#complies { --hg: linear-gradient(160deg,#3B3F7A,#1F2352); --hg-n: linear-gradient(160deg,#2A2E66,#14173B); --hfg: #fff; --hpill: rgba(255,255,255,.2); }
ons-page.page#messe { --hg: linear-gradient(160deg,#9B2D3A,#6E1C28); --hg-n: linear-gradient(160deg,#7A1F2B,#4E111A); --hfg: #fff; --hpill: rgba(255,255,255,.2); }
:is(ons-page.page#laudes,ons-page.page#lectures,ons-page.page#milieu,ons-page.page#vepres,ons-page.page#complies,ons-page.page#messe) .entete { background: var(--hg) !important; border: 0 !important; border-radius: 0 0 30px 30px !important; padding: 18px 22px 28px !important; margin: 0 !important; width: 100% !important; }
:is(ons-page.page#laudes,ons-page.page#lectures,ons-page.page#milieu,ons-page.page#vepres,ons-page.page#complies,ons-page.page#messe) .entete, :is(ons-page.page#laudes,ons-page.page#lectures,ons-page.page#milieu,ons-page.page#vepres,ons-page.page#complies,ons-page.page#messe) .entete * { color: var(--hfg) !important; }
:is(ons-page.page#laudes,ons-page.page#lectures,ons-page.page#milieu,ons-page.page#vepres,ons-page.page#complies,ons-page.page#messe) .entete .choix-celebration { background: var(--hpill) !important; }
:is(ons-page.page#laudes,ons-page.page#lectures,ons-page.page#milieu,ons-page.page#vepres,ons-page.page#complies,ons-page.page#messe) .sommaire { background: var(--lh-surface) !important; margin: -16px 14px 0 !important; width: auto !important; border-radius: 18px; box-shadow: 0 8px 24px rgba(0,0,0,.14); border: 0 !important; padding: 5px 6px !important; gap: 2px !important; top: 8px !important; -webkit-mask-image: none; }
:is(ons-page.page#laudes,ons-page.page#lectures,ons-page.page#milieu,ons-page.page#vepres,ons-page.page#complies,ons-page.page#messe) .sommaire button { border: 0 !important; border-radius: 14px !important; padding: 9px 14px !important; white-space: nowrap; }
:is(ons-page.page#laudes,ons-page.page#lectures,ons-page.page#milieu,ons-page.page#vepres,ons-page.page#complies,ons-page.page#messe) .sommaire button::after { display: none !important; }
:is(ons-page.page#laudes,ons-page.page#lectures,ons-page.page#milieu,ons-page.page#vepres,ons-page.page#complies,ons-page.page#messe) .sommaire button.on { background: #F2A413 !important; color: #1B1B1F !important; }
:is(ons-page.page#laudes,ons-page.page#lectures,ons-page.page#milieu,ons-page.page#vepres,ons-page.page#complies,ons-page.page#messe) .cadre .partie > h2 { font-size: .82rem !important; margin: 1.8em 18px .4em !important; }
:is(ons-page.page#laudes,ons-page.page#lectures,ons-page.page#milieu,ons-page.page#vepres,ons-page.page#complies,ons-page.page#messe) .entete .me-jours { order: 99; width: 100%; display: flex; justify-content: space-between; margin-top: 10px; }
:is(ons-page.page#laudes,ons-page.page#lectures,ons-page.page#milieu,ons-page.page#vepres,ons-page.page#complies,ons-page.page#messe) .entete .me-jours button { background: var(--hpill); border: 0; border-radius: 14px; padding: 6px 12px; font: inherit; font-size: .8rem; }
:is(ons-page.page#messe) .me-ref { font-weight: 600; color: var(--lh-accent-text, #b3261e); margin: 0 0 .3em; }
:is(ons-page.page#messe) .me-intro { font-style: italic; margin: 0 0 .8em; }
:is(ons-page.page#messe) .me-refrain, :is(ons-page.page#messe) .me-verset { border-left: 3px solid #F2A413; padding: 2px 0 2px 12px; margin: .6em 0 1em; font-style: italic; }
:is(ons-page.page#messe) .me-verset b, :is(ons-page.page#messe) .me-refrain b { display: block; font-style: normal; font-size: .75rem; letter-spacing: .02em; opacity: .75; }
:is(ons-page.page#messe) .me-contenu p { margin: 0 0 .9em; }
:is(ons-page.page#messe) .me-fin { margin-top: 1.2em; font-weight: 600; }
:is(ons-page.page#messe) #me_option-div { margin: 14px 18px 0; }

/* bandeau « plusieurs célébrations possibles » dans l'en-tête en dégradé : lisible et bouton contrasté */
:is(ons-page.page#laudes,ons-page.page#lectures,ons-page.page#milieu,ons-page.page#vepres,ons-page.page#complies,ons-page.page#messe) .entete .choix-celebration small { opacity: .9 !important; }
:is(ons-page.page#laudes,ons-page.page#lectures,ons-page.page#milieu,ons-page.page#vepres,ons-page.page#complies,ons-page.page#messe) .entete .choix-celebration .choix-changer { background: var(--hfg) !important; color: var(--hg-ink, #1B1B1F) !important; border: 0 !important; }
:is(ons-page.page#laudes,ons-page.page#lectures,ons-page.page#milieu,ons-page.page#vepres,ons-page.page#complies,ons-page.page#messe) .entete .choix-celebration .choix-changer, :is(ons-page.page#laudes,ons-page.page#lectures,ons-page.page#milieu,ons-page.page#vepres,ons-page.page#complies,ons-page.page#messe) .entete .choix-celebration button { color: var(--hg-ink, #1B1B1F) !important; }
ons-page.page#laudes { --hg-ink: #F2F2F5; } ons-page.page#lectures, ons-page.page#milieu, ons-page.page#vepres, ons-page.page#complies, ons-page.page#messe { --hg-ink: #1B1B1F; }
:is(ons-page.page#laudes,ons-page.page#lectures,ons-page.page#milieu,ons-page.page#vepres,ons-page.page#complies,ons-page.page#messe) .entete .choix-celebration .choix-lib small { color: var(--hfg) !important; opacity: .85 !important; }

/* flèche des lignes de l'accueil : icône du même jeu que les autres */
.ligne .ico.ligne-fleche { width: 20px; height: 20px; color: var(--lh-muted); font-size: 1em; }