@charset "UTF-8";

/* =========================================================================
   edv.fr/bible — feuille de style unique
   -------------------------------------------------------------------------
   Aucune dépendance externe, aucune police distante.
   Compatible avec une CSP « style-src 'self' » : rien n'est inline.
   Ordre : 1 jetons · 2 socle · 3 gabarit · 4 en-tête · 5 jour · 6 onglets
           7 lectures et analyse · 8 formulaires · 9 pied · 10 états globaux
   ========================================================================= */


/* 1 — Jetons de conception ============================================== */

:root {
  /* Familles. Uniquement des polices présentes sur les systèmes courants :
     la lecture ne doit dépendre d'aucun téléchargement. */
  --f-ui: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --f-texte: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua",
             Georgia, "Times New Roman", serif;

  /* Échelle typographique fluide, bornée : confortable à 320 px comme à 1600. */
  --t-xs: 0.75rem;
  --t-sm: 0.8125rem;
  --t-base: clamp(1rem, 0.96rem + 0.2vw, 1.0625rem);
  --t-lecture: clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem);
  --t-md: clamp(1.0625rem, 1rem + 0.3vw, 1.125rem);
  --t-lg: clamp(1.1875rem, 1.1rem + 0.5vw, 1.375rem);
  --t-xl: clamp(1.375rem, 1.2rem + 0.9vw, 1.75rem);
  --t-2xl: clamp(1.625rem, 1.35rem + 1.4vw, 2.25rem);

  /* Rythme vertical. Une seule série, multiples de 0,25rem. */
  --e-1: 0.25rem;
  --e-2: 0.5rem;
  --e-3: 0.75rem;
  --e-4: 1rem;
  --e-5: 1.5rem;
  --e-6: 2rem;
  --e-7: 3rem;
  --e-8: 4rem;

  /* Largeurs. --mesure vise ~66 signes : la longueur de ligne qui fatigue
     le moins sur un texte long. */
  --l-page: 46rem;
  --mesure: 34rem;

  --r-sm: 4px;
  --r-md: 8px;
  --r-pilule: 999px;

  /* Cible tactile minimale. */
  --touche: 44px;

  /* Hauteurs des barres collantes. --entete-total vaut la seule rangée du
     titre sur mobile ; au-dessus de 48em la rangée du menu s'y ajoute, et
     c'est sous ce total que vient se coller le sélecteur de lecture. */
  --entete-h: 3.5rem;
  --nav-h: 2.75rem;
  --entete-total: var(--entete-h);
  --onglets-h: 3.75rem;
  --offset-ancre: var(--e-4);

  --transition: 140ms ease;

  /* Encre et papier — clair. Blanc cassé chaud plutôt que blanc pur :
     moins de brillance sur un long texte. */
  --papier: #fbfaf7;
  --papier-haut: #ffffff;
  --papier-bas: #f3f0ea;
  --encre: #1b1917;
  --encre-douce: #4b463f;
  /* 4,74:1 sur le papier mais 4,35:1 sur --papier-bas : sous le seuil AA
     partout où un gris pâle se pose sur un fond bas — une carte d'analyse,
     un « .source » dans une note. Assombri d'un cran, il passe à 5,27 et
     4,84, et reste nettement distinct de --encre-douce. Le site s'adresse
     entre autres à des lecteurs dont la vue baisse. */
  --encre-pale: #6f685e;
  --filet: #e3ded5;
  --filet-fort: #cec7ba;
  --lien: #2f5673;
  --lien-visite: #4a4a72;
  --focus: #1d6fd0;
  --ombre: 0 1px 2px rgba(28, 24, 18, 0.05), 0 8px 24px -20px rgba(28, 24, 18, 0.5);
  --ombre-haute: 0 -1px 0 var(--filet), 0 -10px 28px -22px rgba(28, 24, 18, 0.6);

  /* Accent liturgique : neutre tant qu'aucune couleur n'est déclarée. */
  --accent: #6a635a;
  --accent-voile: rgba(119, 111, 101, 0.10);

  color-scheme: light dark;
}

/* Couleurs liturgiques. Posées par [data-couleur] : jamais d'attribut style,
   la CSP l'interdit. Le blanc devient or — un blanc sur papier ne se voit pas.
   Chaque teinte claire est assez sombre pour tenir 4,5:1 en petit corps sur
   son propre --accent-voile (onglet actif, étiquette « préparé à l'avance »,
   surtitre du raccourci courant) : c'est ce fond-là qui contraint, pas le
   papier nu. */
[data-couleur="vert"]   { --accent: #2f6b47; --accent-voile: rgba(47, 107, 71, 0.11); }
[data-couleur="blanc"]  { --accent: #736130; --accent-voile: rgba(151, 128, 63, 0.13); }
[data-couleur="violet"] { --accent: #5b3b7a; --accent-voile: rgba(91, 59, 122, 0.11); }
[data-couleur="rouge"]  { --accent: #9b2b23; --accent-voile: rgba(155, 43, 35, 0.10); }
[data-couleur="rose"]   { --accent: #944b70; --accent-voile: rgba(168, 85, 127, 0.11); }
[data-couleur="noir"]   { --accent: #3a3733; --accent-voile: rgba(58, 55, 51, 0.10); }

/*
 * Thème sombre.
 *
 * Deux blocs qui portent LES MÊMES jetons, et qui doivent le rester : le
 * premier applique le réglage du téléphone, le second le choix explicite du
 * lecteur. CSS ne sachant pas factoriser un jeu de déclarations, la
 * duplication est ici inévitable — toute modification de l'un doit être
 * reportée sur l'autre.
 *
 * À la messe, un écran clair éclaire le visage : le lecteur doit pouvoir
 * forcer le sombre sans toucher aux réglages de son téléphone.
 */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="clair"]) {
    --papier: #131211;
    --papier-haut: #1c1a17;
    --papier-bas: #0d0c0b;
    --encre: #e9e4db;
    --encre-douce: #bab3a8;
    --encre-pale: #8d857a;
    --filet: #2e2b26;
    --filet-fort: #45403a;
    --lien: #8fb6d4;
    --lien-visite: #b3aede;
    --focus: #7fb2ff;
    --ombre: 0 1px 2px rgba(0, 0, 0, 0.5), 0 8px 24px -20px rgba(0, 0, 0, 0.9);
    --ombre-haute: 0 -1px 0 var(--filet), 0 -10px 28px -22px rgba(0, 0, 0, 0.9);
    --accent: #9a9187;
    --accent-voile: rgba(154, 145, 135, 0.12);
  }

  :root:not([data-theme="clair"]) [data-couleur="vert"]   { --accent: #6fbb8d; --accent-voile: rgba(111, 187, 141, 0.13); }
  :root:not([data-theme="clair"]) [data-couleur="blanc"]  { --accent: #d8bd82; --accent-voile: rgba(216, 189, 130, 0.13); }
  :root:not([data-theme="clair"]) [data-couleur="violet"] { --accent: #b494d4; --accent-voile: rgba(180, 148, 212, 0.13); }
  :root:not([data-theme="clair"]) [data-couleur="rouge"]  { --accent: #e28d83; --accent-voile: rgba(226, 141, 131, 0.13); }
  :root:not([data-theme="clair"]) [data-couleur="rose"]   { --accent: #e4a3c2; --accent-voile: rgba(228, 163, 194, 0.13); }
  :root:not([data-theme="clair"]) [data-couleur="noir"]   { --accent: #a5a09a; --accent-voile: rgba(165, 160, 154, 0.12); }
}

/* Mêmes jetons, imposés par le choix du lecteur. Voir la note ci-dessus. */
:root[data-theme="sombre"] {
  --papier: #131211;
  --papier-haut: #1c1a17;
  --papier-bas: #0d0c0b;
  --encre: #e9e4db;
  --encre-douce: #bab3a8;
  --encre-pale: #8d857a;
  --filet: #2e2b26;
  --filet-fort: #45403a;
  --lien: #8fb6d4;
  --lien-visite: #b3aede;
  --focus: #7fb2ff;
  --ombre: 0 1px 2px rgba(0, 0, 0, 0.5), 0 8px 24px -20px rgba(0, 0, 0, 0.9);
  --ombre-haute: 0 -1px 0 var(--filet), 0 -10px 28px -22px rgba(0, 0, 0, 0.9);
  --accent: #9a9187;
  --accent-voile: rgba(154, 145, 135, 0.12);
}

:root[data-theme="sombre"] [data-couleur="vert"]   { --accent: #6fbb8d; --accent-voile: rgba(111, 187, 141, 0.13); }
:root[data-theme="sombre"] [data-couleur="blanc"]  { --accent: #d8bd82; --accent-voile: rgba(216, 189, 130, 0.13); }
:root[data-theme="sombre"] [data-couleur="violet"] { --accent: #b494d4; --accent-voile: rgba(180, 148, 212, 0.13); }
:root[data-theme="sombre"] [data-couleur="rouge"]  { --accent: #e28d83; --accent-voile: rgba(226, 141, 131, 0.13); }
:root[data-theme="sombre"] [data-couleur="rose"]   { --accent: #e4a3c2; --accent-voile: rgba(228, 163, 194, 0.13); }
:root[data-theme="sombre"] [data-couleur="noir"]   { --accent: #a5a09a; --accent-voile: rgba(165, 160, 154, 0.12); }


/* Temps liturgique ------------------------------------------------------- */
/*
 * Posé sur <html> par base.php, donc hérité par toute la page. Il porte
 * l'ambiance de la saison, là où [data-couleur] porte l'accent du jour : l'un
 * dure des semaines, l'autre change du jour au lendemain.
 *
 * C'est une inflexion du papier, jamais un habillage — une teinte à un ou deux
 * pour cent se perçoit sur deux mille mots comme une température, pas comme une
 * couleur. Le Temps ordinaire, plus de la moitié de l'année, garde le papier
 * neutre : aucune règle, ce qui vaut aussi quand l'attribut est absent.
 *
 * Carême et Triduum assombrissent le papier ; --encre-pale y descend d'un cran
 * de plus pour rester au-dessus de 4,5:1 sur --papier-bas.
 *
 * Chaque bloc doit suivre celui qu'il précise : clair, puis sombre
 * automatique, puis sombre choisi. Le cas le plus serré de la palette est l'or
 * sur son propre voile au Triduum, mesuré à 4,54:1 — c'est pour lui que le
 * papier de ces trois jours ne descend pas plus bas.
 */

:root[data-temps="avent"]   { --papier: #f8f7fa; --papier-haut: #fdfdfe; --papier-bas: #eeecf3; }
:root[data-temps="noel"]    { --papier: #fdfbf5; --papier-haut: #ffffff; --papier-bas: #f5f0e3; }
:root[data-temps="careme"]  { --papier: #f6f4f2; --papier-haut: #fcfbfa; --papier-bas: #ebe7e3; --encre-pale: #6a635a; }
:root[data-temps="triduum"] { --papier: #f4f2f0; --papier-haut: #faf9f7; --papier-bas: #e9e5e0; --encre-pale: #6a635a; }
:root[data-temps="pascal"]  { --papier: #fdfcf6; --papier-haut: #ffffff; --papier-bas: #f6f2e4; }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="clair"])[data-temps="avent"]   { --papier: #131218; --papier-haut: #1b1a22; --papier-bas: #0d0c11; }
  :root:not([data-theme="clair"])[data-temps="noel"]    { --papier: #151311; --papier-haut: #1f1c17; --papier-bas: #0e0d0a; }
  :root:not([data-theme="clair"])[data-temps="careme"]  { --papier: #121110; --papier-haut: #1a1816; --papier-bas: #0c0b0a; --encre-pale: #8d857a; }
  :root:not([data-theme="clair"])[data-temps="triduum"] { --papier: #0f0e0d; --papier-haut: #171514; --papier-bas: #0a0909; --encre-pale: #8d857a; }
  :root:not([data-theme="clair"])[data-temps="pascal"]  { --papier: #141310; --papier-haut: #1d1b15; --papier-bas: #0e0d0a; }
}

/* Sombre choisi. Les valeurs doublent celles du bloc ci-dessus : toute
   modification de l'un se reporte sur l'autre. --encre-pale y est reprise à sa
   valeur sombre, sans quoi Carême et Triduum hériteraient du gris clair. */
:root[data-theme="sombre"][data-temps="avent"]   { --papier: #131218; --papier-haut: #1b1a22; --papier-bas: #0d0c11; }
:root[data-theme="sombre"][data-temps="noel"]    { --papier: #151311; --papier-haut: #1f1c17; --papier-bas: #0e0d0a; }
:root[data-theme="sombre"][data-temps="careme"]  { --papier: #121110; --papier-haut: #1a1816; --papier-bas: #0c0b0a; --encre-pale: #8d857a; }
:root[data-theme="sombre"][data-temps="triduum"] { --papier: #0f0e0d; --papier-haut: #171514; --papier-bas: #0a0909; --encre-pale: #8d857a; }
:root[data-theme="sombre"][data-temps="pascal"]  { --papier: #141310; --papier-haut: #1d1b15; --papier-bas: #0e0d0a; }



/* 2 — Socle ============================================================== */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: var(--offset-ancre);
}

body {
  margin: 0;
  background: var(--papier);
  color: var(--encre);
  font-family: var(--f-ui);
  font-size: var(--t-base);
  line-height: 1.6;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  overflow-wrap: break-word;
}

/* Le sélecteur de lecture est fixé en bas sur mobile : on rend au document
   la hauteur qu'il occupe, sinon la dernière ligne du texte passe dessous. */
@media (max-width: 47.999em) {
  body:has(.onglets) {
    padding-bottom: calc(var(--onglets-h) + env(safe-area-inset-bottom, 0px));
  }
}

img, svg, video { max-width: 100%; height: auto; }
svg { fill: none; }

h1, h2, h3, h4 {
  margin: 0 0 var(--e-3);
  line-height: 1.22;
  font-weight: 600;
  letter-spacing: -0.01em;
  text-wrap: balance;
}

h1 { font-size: var(--t-2xl); }
h2 { font-size: var(--t-xl); }
h3 { font-size: var(--t-lg); }
h4 { font-size: var(--t-md); }

p, ul, ol, dl, blockquote, figure, table { margin: 0 0 var(--e-4); }
ul, ol { padding-left: 1.35em; }
li + li { margin-top: var(--e-2); }
li::marker { color: var(--encre-pale); }

a { color: var(--lien); text-underline-offset: 0.16em; text-decoration-thickness: 1px; }
a:visited { color: var(--lien-visite); }
a:hover { text-decoration-thickness: 2px; }

strong, b { font-weight: 600; }
small { font-size: var(--t-sm); }
abbr[title] { text-decoration: underline dotted; cursor: help; }

hr {
  border: 0;
  border-top: 1px solid var(--filet);
  margin: var(--e-6) 0;
}

::selection { background: var(--accent-voile); }

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


/* 3 — Gabarit ============================================================ */

.wrap {
  width: min(100% - 2 * var(--e-4), var(--l-page));
  margin-inline: auto;
}

@media (min-width: 48em) {
  .wrap { width: min(100% - 2 * var(--e-6), var(--l-page)); }
}

.page { padding-block: var(--e-5) var(--e-8); }

/* Colonne de lecture : c'est elle qui porte la mesure, pas le conteneur —
   les barres de navigation doivent pouvoir occuper toute la largeur. */
.prose { max-width: var(--mesure); }

.saut-contenu {
  position: absolute;
  left: var(--e-2);
  top: var(--e-2);
  z-index: 100;
  transform: translateY(-200%);
  padding: var(--e-3) var(--e-4);
  background: var(--papier-haut);
  color: var(--encre);
  border: 1px solid var(--filet-fort);
  border-radius: var(--r-md);
  box-shadow: var(--ombre);
  text-decoration: none;
  font-weight: 600;
}

.saut-contenu:focus { transform: translateY(0); }


/* 4 — En-tête et menu principal ========================================= */

.entete {
  background: var(--papier-haut);
  border-bottom: 1px solid var(--filet);
}

/* Collant seulement là où la place le permet. Sur mobile, l'en-tête part au
   défilement : la barre de lectures assure la navigation sous le pouce. */
@media (min-width: 48em) {
  .entete { position: sticky; top: 0; z-index: 30; }

  :root {
    /* +1px : le filet qui sépare la rangée du titre de celle du menu. */
    --entete-total: calc(var(--entete-h) + var(--nav-h) + 1px);
    --offset-ancre: calc(var(--entete-total) + var(--onglets-h) + var(--e-3));
  }
}

.entete__barre {
  min-height: var(--entete-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-3);
}

.entete__titre {
  display: inline-flex;
  align-items: baseline;
  gap: 0.45em;
  padding-block: var(--e-2);
  font-family: var(--f-texte);
  font-size: var(--t-md);
  font-weight: 600;
  letter-spacing: -0.005em;
  color: var(--encre);
  text-decoration: none;
}

.entete__titre:visited { color: var(--encre); }
.entete__titre:hover { text-decoration: underline; }

.entete__titre::before {
  content: "";
  flex: none;
  align-self: center;
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 50%;
  background: var(--accent);
}

/* Bascule burger. Absente tant que nav.js n'a pas tourné : sans JS le menu
   reste déplié, et une bascule morte serait pire que pas de bascule. */
.nav-bascule { display: none; }

.js-nav .nav-bascule {
  display: inline-flex;
  align-items: center;
  gap: var(--e-2);
  min-height: var(--touche);
  min-width: var(--touche);
  padding: 0 var(--e-3);
  margin-right: calc(var(--e-3) * -1);
  border: 0;
  border-radius: var(--r-md);
  background: none;
  color: var(--encre);
  font: inherit;
  font-size: var(--t-sm);
  font-weight: 600;
  cursor: pointer;
}

.js-nav .nav-bascule:hover { background: var(--papier-bas); }

.burger {
  display: grid;
  gap: 4px;
  width: 20px;
}

.burger__trait {
  display: block;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  transition: transform var(--transition), opacity var(--transition);
}

[aria-expanded="true"] .burger__trait:nth-child(1) { transform: translateY(6px) rotate(45deg); }
[aria-expanded="true"] .burger__trait:nth-child(2) { opacity: 0; }
[aria-expanded="true"] .burger__trait:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

.nav { border-top: 1px solid var(--filet); }

/* Replié uniquement quand JS est là pour le déplier. */
.js-nav .nav[data-ouvert="false"] { display: none; }

.nav__interieur {
  display: flex;
  flex-direction: column;
  padding-block: var(--e-2) var(--e-3);
}

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

.nav__liste li { margin: 0; }

.nav__liste--compte {
  margin-top: var(--e-2);
  padding-top: var(--e-2);
  border-top: 1px solid var(--filet);
}

.nav__lien {
  display: flex;
  align-items: center;
  gap: var(--e-2);
  min-height: var(--touche);
  padding: var(--e-2);
  border-radius: var(--r-sm);
  color: var(--encre);
  text-decoration: none;
  font-weight: 500;
}

.nav__lien:visited { color: var(--encre); }
.nav__lien:hover { background: var(--papier-bas); text-decoration: underline; }

.nav__lien[aria-current] {
  font-weight: 600;
  box-shadow: inset 3px 0 0 var(--accent);
  background: var(--accent-voile);
}

.nav__lien--secondaire,
.nav__lien--secondaire:visited { color: var(--encre-douce); font-weight: 400; }

.nav__pastille {
  flex: none;
  width: 1.6rem; height: 1.6rem;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--papier-bas);
  border: 1px solid var(--filet-fort);
  font-size: var(--t-xs);
  font-weight: 600;
  color: var(--encre-douce);
  text-transform: uppercase;
}

@media (min-width: 48em) {
  .js-nav .nav-bascule { display: none; }
  .js-nav .nav[data-ouvert="false"] { display: block; }

  .nav { border-top: 0; }

  .nav__interieur {
    flex-direction: row;
    align-items: center;
    gap: var(--e-1);
    padding-block: 0;
    min-height: var(--nav-h);
    border-top: 1px solid var(--filet);
  }

  /*
   * L'en-tête a sa propre largeur, plus généreuse que la colonne de lecture.
   *
   * Il héritait de « .wrap », borné à 46 rem — la mesure qui convient à un
   * texte suivi. Huit rubriques n'y tiennent pas : elles se serraient jusqu'à
   * se couper mot par mot, « Qui est qui » s'affichant sur quatre lignes. Le
   * texte garde sa mesure ; la barre prend la sienne.
   */
  .entete .wrap { width: min(100% - 2 * var(--e-6), 68rem); }

  .nav__liste { display: flex; align-items: center; gap: var(--e-1); }
  .nav__liste--compte { margin: 0 0 0 auto; padding: 0; border: 0; }

  .nav__lien {
    min-height: 2.5rem;
    padding-inline: var(--e-3);
    /* Un libellé de menu ne se coupe pas : il tient sur une ligne ou la barre
       est mal dimensionnée. */
    white-space: nowrap;
  }

  .nav__lien[aria-current] {
    box-shadow: inset 0 -2px 0 var(--accent);
    border-radius: var(--r-sm) var(--r-sm) 0 0;
  }
}


/* 5 — Navigation entre les jours ======================================== */

.jour {
  border-bottom: 1px solid var(--filet);
  background: var(--papier);
  padding-block: var(--e-5) var(--e-4);
}

.jour__enseigne {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--e-2) var(--e-3);
  margin-bottom: var(--e-2);
  font-size: var(--t-sm);
  color: var(--encre-douce);
}

.jour__temps {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-weight: 600;
  font-size: var(--t-xs);
}

.jour__temps::before {
  content: "";
  width: 0.6rem; height: 0.6rem;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-voile);
}

.etiquette {
  display: inline-block;
  padding: 0.15em 0.6em;
  border: 1px solid var(--filet-fort);
  border-radius: var(--r-pilule);
  background: var(--papier-bas);
  font-size: var(--t-xs);
  font-weight: 600;
  color: var(--encre-douce);
}

.etiquette--futur { border-color: var(--accent); color: var(--accent); background: var(--accent-voile); }
.etiquette--dimanche { border-color: var(--accent); color: var(--accent); background: transparent; }

.jour__titre {
  margin: 0 0 var(--e-4);
  font-family: var(--f-texte);
  font-size: var(--t-xl);
  font-weight: 600;
  letter-spacing: -0.012em;
}

.jour__titre time { font-variant-numeric: lining-nums; }

.jour__nav { display: grid; gap: var(--e-3); }

/* Rangée 1 — la veille et le lendemain, aux deux bords, sous le pouce. */
.jour__paire {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--e-2);
}

/* Rangée 2 — les trois accès directs. C'est la demande centrale : dimanche
   dernier, aujourd'hui, dimanche prochain, atteignables d'un seul geste. */
.jour__raccourcis {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--e-2);
}

.jour__raccourcis li { margin: 0; }

.jbtn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--e-2);
  min-height: var(--touche);
  padding: var(--e-2) var(--e-3);
  border: 1px solid var(--filet-fort);
  border-radius: var(--r-md);
  background: var(--papier-haut);
  color: var(--encre);
  font: inherit;
  font-size: var(--t-sm);
  font-weight: 600;
  line-height: 1.25;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--transition), border-color var(--transition);
}

.jbtn:visited { color: var(--encre); }
.jbtn:hover { background: var(--papier-bas); border-color: var(--encre-pale); text-decoration: none; }

.jbtn__fleche {
  flex: none;
  width: 1.1em; height: 1.1em;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.jbtn--precedent { justify-content: flex-start; }
.jbtn--suivant { justify-content: flex-end; }

/* Pilule à deux lignes : la nature de la cible au-dessus, la date en dessous.
   Coûte une ligne, épargne une hésitation. */
.jbtn--raccourci { flex-direction: column; gap: 2px; padding-block: var(--e-2); }

.jbtn__quoi {
  font-size: var(--t-xs);
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--encre-pale);
}

.jbtn__quand { font-size: var(--t-sm); font-weight: 600; }

.jbtn--raccourci:hover .jbtn__quoi { color: var(--encre-douce); }

/* Là où l'on est déjà : marqué, pas cliquable, pas éteint. */
.jbtn.est-actuel {
  border-color: var(--accent);
  background: var(--accent-voile);
  cursor: default;
}

.jbtn.est-actuel .jbtn__quoi { color: var(--accent); }

/* Cible indisponible : rendue en <span>, donc hors du parcours clavier.
   Un lien mort focusable serait un piège, pas une information. */
.jbtn.est-inactif {
  border-style: dashed;
  border-color: var(--filet);
  background: transparent;
  color: var(--encre-pale);
  cursor: default;
}

.jbtn.est-inactif .jbtn__quoi { color: var(--encre-pale); }

/* Rangée 3 — la date libre. Un vrai formulaire GET : fonctionne sans JS. */
.jour__aller {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--e-2);
  margin: 0;
  padding-top: var(--e-3);
  border-top: 1px dashed var(--filet);
}

.jour__aller-label {
  flex: 1 0 100%;
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--encre-pale);
}

.jour__date {
  flex: 1 1 11rem;
  min-height: var(--touche);
  padding: var(--e-2) var(--e-3);
  border: 1px solid var(--filet-fort);
  border-radius: var(--r-md);
  background: var(--papier-haut);
  color: var(--encre);
  font: inherit;
  font-size: var(--t-sm);
}

.jour__date::-webkit-calendar-picker-indicator { cursor: pointer; opacity: 0.65; }
.jour__date::-webkit-calendar-picker-indicator:hover { opacity: 1; }

.jbtn--aller { flex: 0 0 auto; }

@media (min-width: 40em) {
  .jour__nav {
    grid-template-columns: auto 1fr;
    grid-template-areas:
      "paire raccourcis"
      "aller aller";
    align-items: center;
  }

  .jour__paire { grid-area: paire; grid-template-columns: auto auto; }
  .jour__raccourcis { grid-area: raccourcis; }
  .jour__aller { grid-area: aller; }
  .jour__aller-label { flex: 0 0 auto; }
}


/* 6 — Sélecteur de lecture ============================================== */

.onglets {
  background: var(--papier-haut);
  z-index: 20;
}

.onglets__interieur {
  display: flex;
  align-items: center;
  gap: var(--e-2);
}

.onglets__liste {
  list-style: none;
  margin: 0;
  padding: var(--e-2) 0;
  display: flex;
  align-items: stretch;
  gap: var(--e-2);
  flex: 1 1 auto;
  min-width: 0;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  scroll-snap-type: x proximity;
}

.onglets__liste::-webkit-scrollbar { display: none; }
.onglets__liste > li { margin: 0; flex: 1 1 auto; scroll-snap-align: center; }

.onglet {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  height: 100%;
  min-height: var(--touche);
  padding: var(--e-1) var(--e-3);
  border: 1px solid transparent;
  border-radius: var(--r-md);
  color: var(--encre-douce);
  font-size: var(--t-sm);
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
}

.onglet:visited { color: var(--encre-douce); }
.onglet:hover { background: var(--papier-bas); color: var(--encre); text-decoration: none; }

.onglet[aria-current] {
  color: var(--accent);
  border-color: var(--accent);
  background: var(--accent-voile);
}

.onglet__ref {
  font-size: var(--t-xs);
  font-weight: 400;
  color: var(--encre-pale);
  font-variant-numeric: lining-nums;
}

.onglet[aria-current] .onglet__ref { color: var(--accent); }

/* Retour à la barre des jours sans remonter tout l'article. */
.onglets__jour {
  flex: none;
  display: grid;
  place-items: center;
  width: var(--touche);
  height: var(--touche);
  border-left: 1px solid var(--filet);
  color: var(--encre-douce);
  text-decoration: none;
}

.onglets__intitule { display: none; }

.onglets__jour:visited { color: var(--encre-douce); }
.onglets__jour:hover { color: var(--encre); background: var(--papier-bas); }

.onglets__jour svg {
  width: 1.25rem; height: 1.25rem;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Mobile : ancrée en bas, dans l'arc du pouce. Fixed plutôt que sticky,
   parce que le partiel est inclus en haut de la page ; la place qu'elle
   prend est rendue au document par body:has(.onglets), §2. */
@media (max-width: 47.999em) {
  .onglets {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    border-top: 1px solid var(--filet);
    box-shadow: var(--ombre-haute);
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }

  .onglets .wrap { width: 100%; padding-inline: var(--e-2); }
  .onglets__liste { padding-block: var(--e-1); gap: var(--e-1); }
  .onglet { padding-inline: var(--e-2); }

  /* La référence ne tient pas sous 400 px : le libellé suffit à choisir,
     la référence est répétée en tête de chaque lecture. */
  .onglet__ref { display: none; }
}

@media (min-width: 48em) {
  .onglets {
    position: sticky;
    top: var(--entete-total);
    border-bottom: 1px solid var(--filet);
  }

  .onglets__liste { gap: var(--e-1); }
  .onglets__liste > li { flex: 0 0 auto; }
  .onglet { padding-inline: var(--e-4); }
  .onglets__jour { display: none; }
}


/* Colonne latérale de la page du jour ------------------------------------- */
/*
 * Au-dessus de 72 em, la barre des lectures cesse d'être une barre : elle
 * devient une colonne collante à droite du texte. C'est la même liste
 * d'ancres, suivie par le même nav.js — seule la forme change. Il n'y a donc
 * qu'une navigation, sous trois aspects selon la largeur : fixée en bas sous
 * le pouce, collante sous l'en-tête, puis colonne. Rien n'est dédoublé.
 *
 * La mesure de lecture ne bouge pas. La place gagnée sur un grand écran sert à
 * mettre quelque chose à côté du texte, jamais à élargir le texte lui-même :
 * au-delà d'environ soixante-six signes par ligne, l'œil perd le début de la
 * ligne suivante.
 *
 * À droite, et non à gauche : l'axe du texte reste celui des autres pages du
 * site, et la colonne se trouve du côté où l'œil cherche déjà sa position.
 *
 * 72 em, et non 64 : la grille demande 46 + 3 + 16 = 65 rem, en dessous de quoi
 * les marges se serreraient. Entre 48 et 72 em, rien ne change.
 */
@media (min-width: 72em) {
  .page-jour {
    display: grid;
    grid-template-columns: minmax(0, var(--l-page)) 16rem;
    column-gap: var(--e-7);
    justify-content: center;
    width: min(100% - 2 * var(--e-6), 68rem);
    margin-inline: auto;
  }

  .page-jour > * { grid-column: 1; min-width: 0; }

  /* La grille borne déjà la colonne : .wrap n'a plus à se borner lui-même,
     ni à garder ses marges latérales. */
  .page-jour .wrap { width: 100%; }

  /* « span 99 » couvre les rangées présentes et celles qu'on ajoutera ; une
     rangée sans contenu ne mesure rien. */
  .page-jour > .onglets {
    grid-column: 2;
    grid-row: 1 / span 99;
    position: sticky;
    top: calc(var(--entete-total) + var(--e-5));
    align-self: start;
    max-height: calc(100vh - var(--entete-total) - var(--e-6));
    overflow-y: auto;
    padding-block: var(--e-5) var(--e-4);
    background: transparent;
    border-bottom: 0;
  }

  .page-jour .onglets__interieur {
    flex-direction: column;
    align-items: stretch;
    gap: var(--e-3);
  }

  .page-jour .onglets__intitule {
    display: block;
    margin: 0;
    color: var(--encre-pale);
    font-size: var(--t-xs);
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
  }

  .page-jour .onglets__liste {
    flex-direction: column;
    align-items: stretch;
    gap: var(--e-1);
    padding: 0;
    overflow: visible;
    scroll-snap-type: none;
  }

  /* Liste verticale : on annule la marge que « li + li » ajoute (§ 2). */
  .page-jour .onglets__liste > li { margin-top: 0; }

  .page-jour .onglet {
    align-items: flex-start;
    gap: 2px;
    padding: var(--e-2) var(--e-3);
    text-align: left;
    white-space: normal;
    border-left: 2px solid transparent;
    border-radius: 0 var(--r-md) var(--r-md) 0;
  }

  .page-jour .onglet[aria-current] {
    border-color: transparent;
    border-left-color: var(--accent);
  }

  /* Le retour à la barre des jours reprend sa place, libellé visible : une
     icône seule ne se décode pas, et il y a la place de l'écrire. */
  .page-jour .onglets__jour {
    display: flex;
    align-items: center;
    gap: var(--e-2);
    width: auto;
    height: auto;
    min-height: var(--touche);
    padding: var(--e-2) var(--e-3);
    border-left: 0;
    border-top: 1px solid var(--filet);
    border-radius: 0 var(--r-md) var(--r-md) 0;
    font-size: var(--t-sm);
  }

  /* Le nom accessible du lien ne change pas d'une taille à l'autre : le
     libellé est masqué, jamais retiré. Ici il redevient visible. */
  .page-jour .onglets__jour-label {
    position: static !important;
    width: auto; height: auto;
    margin: 0;
    overflow: visible;
    clip: auto;
    clip-path: none;
  }

  /*
   * La barre ne surplombe plus le texte : les ancres n'ont plus à réserver sa
   * hauteur. On redéfinit le jeton plutôt que scroll-padding-top, qui le lit —
   * l'écrire ici compterait l'en-tête deux fois et poserait chaque ancre trop
   * bas d'une hauteur d'en-tête.
   */
  :root:has(.page-jour) { --offset-ancre: calc(var(--entete-total) + var(--e-3)); }
}


/* 7 — Lectures et analyse =============================================== */

/* Le décalage des ancres est porté une seule fois, par scroll-padding-top
   sur <html> (§2) : il vaut pour toutes les cibles, y compris les titres
   internes aux analyses. Ajouter ici un scroll-margin-top le doublerait. */
.lecture {
  padding-block: var(--e-6) 0;
  border-top: 1px solid var(--filet);
}

.lecture:first-of-type { border-top: 0; }

.lecture__entete { margin-bottom: var(--e-4); }

.lecture__type {
  display: block;
  margin-bottom: var(--e-1);
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
}

.lecture__titre {
  margin: 0 0 var(--e-1);
  font-family: var(--f-texte);
  font-size: var(--t-lg);
  font-weight: 600;
}

.lecture__ref {
  margin: 0;
  font-size: var(--t-sm);
  color: var(--encre-pale);
  font-variant-numeric: lining-nums;
}

/* Le texte biblique : sérif, plus grand, plus aéré. C'est lui qu'on lit ;
   l'analyse l'entoure sans jamais le concurrencer visuellement. */
.texte {
  max-width: var(--mesure);
  padding-left: var(--e-4);
  border-left: 2px solid var(--accent);
  font-family: var(--f-texte);
  font-size: var(--t-lecture);
  line-height: 1.72;
  color: var(--encre);
}

.texte p { margin-bottom: var(--e-4); }
.texte p:last-child { margin-bottom: 0; }

.verset {
  font-family: var(--f-ui);
  font-size: 0.68em;
  font-weight: 600;
  vertical-align: 0.35em;
  margin-right: 0.25em;
  color: var(--encre-pale);
  font-variant-numeric: lining-nums;
}

.refrain {
  margin: 0 0 var(--e-4);
  padding-left: var(--e-4);
  border-left: 2px solid var(--accent);
  font-family: var(--f-texte);
  font-size: var(--t-lecture);
  font-style: italic;
  color: var(--encre-douce);
}

.source {
  margin-top: var(--e-3);
  font-size: var(--t-sm);
  color: var(--encre-pale);
}

/* L'analyse : famille sans empattement, sur un fond légèrement creusé.
   Deux registres nettement séparés, sans surenchère décorative. */
.analyse {
  margin-top: var(--e-5);
  border: 1px solid var(--filet);
  border-radius: var(--r-md);
  background: var(--papier-bas);
}

.analyse__entete {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-2);
  padding: var(--e-3) var(--e-4);
  border-bottom: 1px solid var(--filet);
}

.analyse__titre {
  margin: 0;
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--encre-douce);
}

.analyse__corps { padding-inline: var(--e-4); }

/* Bouton « tout déplier » : révélé par nav.js, absent sans JS puisqu'il
   n'aurait rien à commander. */
.tout-deplier {
  display: none;
  align-items: center;
  /* Commande autonome : elle relève du même gabarit tactile que les autres,
     et non de l'exemption des liens en ligne. */
  min-height: var(--touche);
  padding: var(--e-1) var(--e-4);
  border: 1px solid var(--filet-fort);
  border-radius: var(--r-pilule);
  background: var(--papier-haut);
  color: var(--encre-douce);
  font: inherit;
  font-size: var(--t-xs);
  font-weight: 600;
  cursor: pointer;
}

.js-nav .tout-deplier { display: inline-flex; }
.tout-deplier:hover { color: var(--encre); border-color: var(--encre-pale); }

/* Certains gabarits signalent « inutile sans JS » par l'attribut hidden.
   Il doit l'emporter sur la règle ci-dessus tant que nav.js ne l'a pas ôté. */
[hidden] { display: none !important; }

/* Replis natifs. Pas de JS : <details> fait le travail, y compris au clavier
   et pour la recherche dans la page. */
.repli { border-bottom: 1px solid var(--filet); }
.repli:last-child { border-bottom: 0; }

.repli > summary {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--e-2);
  min-height: var(--touche);
  padding: var(--e-3) var(--e-6) var(--e-3) 0;
  list-style: none;
  cursor: pointer;
  font-size: var(--t-base);
  font-weight: 600;
  color: var(--encre);
}

.repli > summary::-webkit-details-marker { display: none; }
.repli > summary::marker { content: ""; }
.repli > summary:hover { color: var(--accent); }

.repli > summary::after {
  content: "";
  position: absolute;
  right: var(--e-3);
  top: 50%;
  width: 0.5rem; height: 0.5rem;
  margin-top: -0.35rem;
  border-right: 2px solid var(--encre-pale);
  border-bottom: 2px solid var(--encre-pale);
  transform: rotate(45deg);
  transform-origin: center;
  transition: transform var(--transition);
}

.repli[open] > summary { color: var(--accent); }
.repli[open] > summary::after { margin-top: -0.1rem; transform: rotate(-135deg); }

.repli__contenu {
  max-width: var(--mesure);
  padding-bottom: var(--e-4);
  color: var(--encre-douce);
  line-height: 1.68;
}

.repli__contenu > :last-child { margin-bottom: 0; }

/* --- Hiérarchie de l'analyse : trois niveaux ============================= */
/*
 * Proposition de Claude Design, intégrée telle quelle.
 *
 * Les dix rubriques se présentaient à l'identique : le lecteur ne pouvait pas
 * distinguer ce qui débloque la lecture de ce qui l'intéresse seulement. La
 * hiérarchie existait dans l'ordre du PHP, jamais à l'écran.
 *
 * Deux rubriques débloquent (où, qui) : ce sont des cartes, filet d'accent à
 * gauche. Cinq donnent des repères et gardent la ligne simple. Trois relèvent
 * de l'érudition : elles rentrent dans un repli unique dont le libellé dit
 * qu'on peut le sauter. Sur 390 px, quatre lignes de titre au lieu de dix.
 */

.analyse__aide {
  margin: 0 0 var(--e-3);
  font-size: var(--t-sm);
  line-height: 1.5;
  color: var(--encre-pale);
}

.repli--cle {
  margin-bottom: var(--e-2);
  border: 1px solid var(--filet-fort);
  border-left: 3px solid var(--accent);
  border-radius: var(--r-md);
  background: var(--papier-haut);
  box-shadow: var(--ombre);
}

.repli--cle:last-child { border-bottom: 1px solid var(--filet-fort); }

.repli--cle > summary {
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  padding-inline: var(--e-4) var(--e-6);
  font-size: var(--t-md);
}

.repli--cle > summary::after { right: var(--e-4); }

.repli__sous {
  font-size: var(--t-sm);
  font-weight: 400;
  color: var(--encre-pale);
}

.repli--cle[open] > summary .repli__sous { color: var(--encre-pale); }
.repli--cle > .repli__contenu { padding-inline: var(--e-4); }

/* Les repères : un cadre léger qui les groupe, sans en faire des cartes. */
.analyse__reperes {
  margin-bottom: var(--e-2);
  padding-inline: var(--e-4);
  border: 1px solid var(--filet);
  border-radius: var(--r-md);
}

/* Le groupe des curieux : un seul repli, pointillé, corps réduit. */
.repli--curieux { border-bottom: 0; margin-bottom: var(--e-2); }

.repli--curieux > summary {
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  padding-inline: var(--e-4) var(--e-6);
  border: 1px dashed var(--filet-fort);
  border-radius: var(--r-md);
  font-size: var(--t-sm);
  font-weight: 500;
  color: var(--encre-douce);
}

.repli--curieux > summary::after { right: var(--e-4); }
.repli--curieux[open] > summary { color: var(--encre-douce); border-color: var(--filet-fort); }

.repli__compte {
  font-size: var(--t-xs);
  font-weight: 400;
  color: var(--encre-pale);
}

.repli--curieux > .repli__contenu {
  max-width: none;
  margin-left: var(--e-4);
  margin-top: var(--e-2);
  padding: 0 0 0 var(--e-4);
  border-left: 1px solid var(--filet);
}

.repli--erudit > summary {
  min-height: var(--touche);
  font-size: var(--t-sm);
  font-weight: 500;
  color: var(--encre-douce);
}

.repli--erudit > .repli__contenu { font-size: var(--t-sm); line-height: 1.6; }

/* Mots à connaître : une liste de définitions, pas un paragraphe fourre-tout. */
.realia { margin: 0 0 var(--e-4); }
.realia dt { font-weight: 600; color: var(--encre); }
.realia dd { margin: var(--e-1) 0 var(--e-3); }
.realia dd:last-child { margin-bottom: 0; }

.renvois { list-style: none; margin: 0; padding: 0; }
.renvois li { padding-left: 1.1em; text-indent: -1.1em; }
.renvois li::before { content: "\2192"; margin-right: 0.5em; color: var(--encre-pale); }

.note {
  margin: var(--e-5) 0 0;
  padding: var(--e-3) var(--e-4);
  border-left: 2px solid var(--filet-fort);
  background: var(--papier-bas);
  font-size: var(--t-sm);
  color: var(--encre-douce);
}


/* 8 — Formulaires et boutons génériques ================================= */

input, select, textarea, button { font: inherit; color: inherit; }

.champ {
  display: block;
  width: 100%;
  min-height: var(--touche);
  padding: var(--e-2) var(--e-3);
  border: 1px solid var(--filet-fort);
  border-radius: var(--r-md);
  background: var(--papier-haut);
}

.bouton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--e-2);
  min-height: var(--touche);
  padding: var(--e-2) var(--e-5);
  border: 1px solid var(--accent);
  border-radius: var(--r-md);
  background: var(--accent);
  color: var(--papier-haut);
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
}

.bouton:visited { color: var(--papier-haut); }
.bouton:hover { filter: brightness(1.08); }
.bouton--discret,
.bouton--discret:visited { background: var(--papier-haut); color: var(--encre); border-color: var(--filet-fort); }


/* 8 bis — Favoris et commentaires ======================================= */


.favori { margin-bottom: var(--e-5); }

.commentaire {
  padding: var(--e-4) 0;
  border-top: 1px solid var(--filet);
}

.commentaire:first-of-type { border-top: 0; }

.commentaire__auteur {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--e-2);
  margin-bottom: var(--e-2);
}

.commentaire__auteur .source { margin-top: 0; }

/* Texte saisi par des inconnus : il ne doit jamais pouvoir élargir la page. */
.commentaire__corps {
  color: var(--encre-douce);
  overflow-wrap: anywhere;
}

.commentaire__corps > :last-child { margin-bottom: 0; }

.note--redaction { border-left-color: var(--accent); }


/* 9 — Pied de page ====================================================== */

.pied {
  margin-top: var(--e-8);
  padding-block: var(--e-6);
  border-top: 1px solid var(--filet);
  background: var(--papier-bas);
  font-size: var(--t-sm);
  color: var(--encre-douce);
}

.pied a { color: var(--encre-douce); }
.pied ul { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: var(--e-2) var(--e-4); }
.pied li { margin: 0; }


/* 10 — États globaux ==================================================== */

:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

/* Navigateurs sans :focus-visible : garder un anneau plutôt que rien. */
@supports not selector(:focus-visible) {
  :focus { outline: 2px solid var(--focus); outline-offset: 2px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

@media (prefers-contrast: more) {
  :root { --filet: #776f65; --filet-fort: #4b463f; --encre-pale: #4b463f; }
  .onglet[aria-current], .nav__lien[aria-current] { text-decoration: underline; }
}

@media print {
  .entete, .onglets, .jour__nav, .saut-contenu, .tout-deplier, .pied { display: none !important; }
  /* La colonne latérale n'imprime pas ; la grille redevient un empilement. */
  .page-jour { display: block; }
  body { background: #fff; color: #000; padding-bottom: 0; }
  .texte, .refrain { border-left-color: #999; }
  .analyse { border-color: #999; background: transparent; }
  /* Un repli fermé n'a pas à emporter son contenu au moment de l'impression. */
  .repli > summary ~ * { display: block !important; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 0.85em; color: #555; }
}

/* --- Avertissement sur la provenance des analyses ------------------------ */

.avertissement {
    margin-top: var(--e-7);
    padding-block: var(--e-6);
    border-top: 2px solid var(--filet);
    background: var(--papier-bas);
}

.avertissement .wrap { max-width: var(--mesure); }

.avertissement__titre {
    font-size: 1rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--encre-douce);
    margin-bottom: var(--e-4);
}

.avertissement p {
    margin-bottom: var(--e-4);
    color: var(--encre-douce);
    font-size: 0.95rem;
}

.avertissement p:last-child { margin-bottom: 0; }
.avertissement strong { color: var(--encre); }

/* --- Formulaires --------------------------------------------------------- */
/*
 * Le gabarit .formulaire empile étiquette, champ et aide. Sans cela, les libellés
 * et les champs se répartissaient sur une seule ligne, illisibles sur mobile.
 */

.formulaire {
    display: flex;
    flex-direction: column;
    gap: var(--e-2);
    max-width: 32rem;
    margin-block: var(--e-5);
    padding: var(--e-5);
    border: 1px solid var(--filet);
    border-radius: var(--r-md);
    background: var(--papier-bas);
}

.formulaire label {
    font-weight: 600;
    font-size: 0.95rem;
    margin-top: var(--e-3);
}

.formulaire label:first-of-type { margin-top: 0; }

.formulaire input[type="email"],
.formulaire input[type="text"],
.formulaire input[type="password"],
.formulaire textarea {
    width: 100%;
    min-height: 44px;
    padding: 0.6rem 0.75rem;
    font: inherit;
    color: var(--encre);
    background: var(--papier);
    border: 1px solid var(--filet-fort);
    border-radius: var(--r-md);
}

.formulaire textarea { min-height: 8rem; resize: vertical; }

.formulaire input:focus-visible,
.formulaire textarea:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 1px;
    border-color: var(--accent);
}

.formulaire .source { margin-top: calc(var(--e-2) * -1); }

.formulaire .bouton { margin-top: var(--e-4); align-self: flex-start; }

/* Saisie du code à six chiffres : chiffres espacés, lisibles d'un coup d'œil. */
.formulaire__code {
    font-size: 1.6rem;
    letter-spacing: 0.4em;
    text-align: center;
    font-variant-numeric: tabular-nums;
}

/* Case à cocher : la cible tactile couvre l'étiquette entière. */
.formulaire__case {
    display: flex;
    align-items: flex-start;
    gap: var(--e-3);
    min-height: 44px;
    padding-block: var(--e-2);
    font-weight: 500;
    cursor: pointer;
}

.formulaire__case input { margin-top: 0.25rem; width: 1.15rem; height: 1.15rem; flex: none; }

/* --- Intérêts d'un compte ------------------------------------------------ */

.interets {
    margin-block: var(--e-6);
    padding: var(--e-5);
    border: 1px solid var(--filet);
    border-radius: var(--r-md);
}

.interets h2 {
    font-size: 1rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--encre-douce);
    margin-bottom: var(--e-4);
}


/* --- Rôle d'un protagoniste, note « à retenir » -------------------------- */

.realia__role {
    margin-top: var(--e-2);
    padding-left: var(--e-3);
    border-left: 2px solid var(--filet-fort);
    color: var(--encre-douce);
    font-size: 0.95rem;
}

.realia__role p { margin-bottom: var(--e-2); }
.realia__role p:last-child { margin-bottom: 0; }

.note--retenir { border-left-color: var(--accent); }

.note__intitule {
    margin-bottom: var(--e-2);
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--accent);
}

.note--retenir p:last-child { margin-bottom: 0; }

/* Le gras dans le texte généré : soutenu, jamais criard. */
.repli__contenu strong,
.prose strong { font-weight: 650; color: var(--encre); }

/* --- Tableaux d'administration ------------------------------------------ */

.tableau-defilant { overflow-x: auto; margin-block: var(--e-5); }

.tableau { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.tableau th,
.tableau td { padding: var(--e-3); text-align: left; border-bottom: 1px solid var(--filet); white-space: nowrap; }
.tableau th { font-size: 0.78rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--encre-douce); }
.tableau td form { display: inline; }

.admin-menu { margin-block: var(--e-4) var(--e-6); }
.admin-menu .nav__liste { display: flex; flex-wrap: wrap; gap: var(--e-2); }

/* --- Invitation à installer l'application -------------------------------- */

/*
 * Sur grand écran, l'invitation à installer ne s'affiche pas.
 *
 * Elle prenait une bande entière en haut de page et repoussait les lectures
 * sous la ligne de flottaison, pour proposer un geste qui n'a de sens que sur
 * un téléphone : c'est là qu'on ouvre le site à l'église, et là que le
 * cache hors réseau sert. Le navigateur de bureau garde son propre bouton
 * d'installation dans la barre d'adresse, pour qui le cherche.
 */
@media (min-width: 48em) {
    .installation { display: none; }
}

.installation {
    position: sticky;
    bottom: 0;
    z-index: 40;
    border-top: 1px solid var(--filet-fort);
    background: var(--papier-bas);
    padding-block: var(--e-4);
}

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

.installation__texte { margin: 0; font-size: 0.92rem; color: var(--encre-douce); max-width: 46ch; }
.installation__actions { display: flex; gap: var(--e-3); flex: none; }

/* --- Analyse absente, alertes, barres d'audience ------------------------- */

.note--manquante form { margin-top: var(--e-3); display: flex; flex-wrap: wrap; gap: var(--e-3); align-items: center; }
.note--manquante .source { flex: 1 1 16rem; }

.note--warning { border-left-color: #b8860b; }
.note--critical { border-left-color: #a4423a; }
.note--erreur { border-left-color: #a4423a; }
.note--succes { border-left-color: #4a7c59; }

.alertes { margin-block: var(--e-5); }
.alertes form { display: inline-block; margin-top: var(--e-2); }

.barre-cellule { width: 40%; min-width: 6rem; }
.barre { display: block; height: 0.5rem; border-radius: 999px; background: var(--accent); }
.barre[data-largeur] { width: 100%; }

/* Le bouton de génération dit qu'il travaille : sans cela, une minute de
   silence ressemble à une panne. */
button[data-generation-bouton][aria-busy="true"] { opacity: 0.6; pointer-events: none; }

/* --- Pied d'une lecture : favori et échanges ============================== */
/*
 * Ces deux gestes accompagnent la lecture ; ils ne la concluent pas. D'où une
 * barre discrète sur une ligne plutôt que deux blocs encadrés, qui donnaient
 * au favori l'importance visuelle d'un appel à l'action.
 */

.actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--e-2);
    margin-top: var(--e-5);
}

.actions__forme { display: contents; }

.action {
    display: inline-flex;
    align-items: center;
    gap: var(--e-2);
    min-height: var(--touche);
    padding: var(--e-2) var(--e-4);
    border: 1px solid var(--filet);
    border-radius: var(--r-pilule);
    background: transparent;
    color: var(--encre-douce);
    font-size: var(--t-sm);
    font-weight: 500;
    text-decoration: none;
    cursor: pointer;
    transition: border-color var(--transition), color var(--transition);
}

.action:hover,
.action:focus-visible { border-color: var(--filet-fort); color: var(--encre); }

.action--active { border-color: var(--accent); color: var(--accent); }

.action__marque { font-size: 1.05em; line-height: 1; }

/* Compteur d'échanges dans le titre du repli. */
.pastille {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.5rem;
    height: 1.5rem;
    padding-inline: 0.4rem;
    border-radius: var(--r-pilule);
    background: var(--accent-voile);
    color: var(--accent);
    font-size: var(--t-xs);
    font-weight: 700;
}

.repli--echanges { border-bottom: 0; }

/* --- Commentaires ======================================================== */

.commentaire { padding-block: var(--e-4); border-top: 1px solid var(--filet); }
.commentaire:first-of-type { border-top: 0; padding-top: var(--e-2); }

.commentaire__auteur {
    display: flex;
    flex-wrap: wrap;
    gap: var(--e-2);
    align-items: baseline;
    margin-bottom: var(--e-2);
}

.commentaire__corps { font-size: var(--t-base); color: var(--encre); }
.commentaire__corps p { margin-bottom: var(--e-3); }
.commentaire__corps p:last-child { margin-bottom: 0; }

/* Une action secondaire dans un fil se lit comme un lien, pas comme un bouton. */
.lien-action {
    margin-top: var(--e-2);
    padding: 0;
    border: 0;
    background: none;
    color: var(--encre-douce);
    font-size: var(--t-sm);
    text-decoration: underline;
    text-underline-offset: 0.2em;
    cursor: pointer;
}

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

/* --- Formulaires : reprise de la composition ============================== */
/*
 * Le formulaire de commentaire affichait sa zone de saisie et son bouton côte
 * à côte, tous deux rétrécis : les propriétés qui devaient les empiler
 * référençaient des variables inexistantes et étaient donc ignorées.
 */

.formulaire {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--e-2);
    width: 100%;
    max-width: var(--mesure);
    margin-block: var(--e-5);
    padding: var(--e-5);
    border: 1px solid var(--filet);
    border-radius: var(--r-md);
    background: var(--papier-bas);
}

.formulaire textarea { width: 100%; min-height: 7rem; resize: vertical; }
.formulaire .bouton { align-self: flex-start; margin-top: var(--e-3); }

/* --- À retenir : un seul filet, pas deux ================================= */

.note--retenir {
    margin-top: var(--e-5);
    border-left-color: var(--accent);
    background: var(--accent-voile);
    color: var(--encre);
}

.note--retenir .note__intitule { color: var(--accent); }

/* --- Listes d'archives et de favoris ===================================== */
/*
 * Une liste de jours doit se parcourir à l'œil : la date d'abord, puis la fête
 * s'il y en a une, puis la référence de l'évangile. Trois niveaux de gris, un
 * seul niveau de taille — la hiérarchie passe par la couleur, pas par
 * l'échelle, qui rendrait la liste bruyante.
 */

.archives { list-style: none; margin: var(--e-5) 0 0; padding: 0; }

.archives__jour {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--e-2) var(--e-3);
    padding-block: var(--e-3);
    border-bottom: 1px solid var(--filet);
}

.archives__jour > a {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--e-2) var(--e-3);
    flex: 1 1 16rem;
    text-decoration: none;
    color: inherit;
}

.archives__jour > a:hover .archives__date { text-decoration: underline; }

.archives__date { font-weight: 600; color: var(--encre); }
.archives__fete { color: var(--accent); font-size: var(--t-sm); }
.archives__ref  { color: var(--encre-douce); font-size: var(--t-sm); font-variant-numeric: tabular-nums; }

.archives__jour form { margin: 0; }

/* --- Pagination ========================================================== */

.pagination {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--e-3);
    margin-top: var(--e-6);
}

/* --- Journal d'administration ============================================ */

.journal { list-style: none; margin: var(--e-4) 0 0; padding: 0; font-size: var(--t-sm); }

.journal li {
    padding-block: var(--e-3);
    border-bottom: 1px solid var(--filet);
    line-height: 1.5;
}

.journal li:last-child { border-bottom: 0; }

/* --- Variantes de formulaire ============================================= */

/* Une action de modération tient sur une ligne : motif, puis bouton. */
.formulaire--inline {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--e-3);
    padding: var(--e-3);
    margin-block: var(--e-3);
}

.formulaire--inline input[type="text"] { flex: 1 1 14rem; width: auto; }
.formulaire--inline .bouton { margin-top: 0; }

/* --- Barres d'audience =================================================== */

.tableau--barres td { vertical-align: middle; }

/* --- Onglets de lecture : libellé ======================================== */

.onglet__label { display: inline; }

/* --- Frise du récit ====================================================== */
/*
 * Elle répond à « on en est où ? ». Discrète par construction : un repère,
 * pas un titre. Sur petit écran elle défile horizontalement plutôt que de
 * s'empiler, pour rester lisible d'un coup d'œil.
 */

.frise {
    margin-block: var(--e-4) var(--e-5);
    padding-block: var(--e-3);
    border-block: 1px solid var(--filet);
}

.frise__etapes {
    display: flex;
    align-items: flex-start;
    gap: var(--e-1);
    margin: 0;
    padding: 0 0 var(--e-2);
    list-style: none;
    overflow-x: auto;
    scrollbar-width: thin;
    -webkit-overflow-scrolling: touch;
}

.frise__etape {
    /* La règle globale « li + li » ajoute une marge haute à tout élément de
       liste sauf le premier — utile dans le texte suivi, désastreux dans une
       liste horizontale : toutes les étapes se retrouvaient huit pixels plus
       bas que la première. Les autres listes en ligne du site font déjà cette
       remise à zéro ; la frise l'avait oubliée. */
    margin-top: 0;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--e-1);
    flex: 1 0 auto;
    min-width: 5.5rem;
    padding-inline: var(--e-2);
    text-align: center;
    color: var(--encre-pale);
    font-size: var(--t-xs);
}

/* Le trait qui relie les étapes passe derrière les points. */
.frise__etape::before {
    content: "";
    position: absolute;
    top: 0.3rem;
    left: 0;
    right: 0;
    height: 1px;
    background: var(--filet);
}

.frise__etape:first-child::before { left: 50%; }
.frise__etape:last-child::before { right: 50%; }

.frise__point {
    position: relative;
    width: 0.65rem;
    height: 0.65rem;
    border-radius: 50%;
    background: var(--filet-fort);
}

.frise__label {
    line-height: 1.3;
    /* « Montée vers Jérusalem » ne doit pas imposer sa largeur : il passe
       sur deux lignes plutôt que d'étirer sa colonne. */
    overflow-wrap: break-word;
}

.frise__etape--courante { color: var(--accent); font-weight: 700; }
.frise__etape--courante .frise__point {
    background: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-voile);
}

/* La description de l'étape courante, sous la liste et non dedans.
   À l'intérieur d'une colonne de 5,5 rem, ses 22 rem faisaient déborder la
   frise de six cents pixels et coupaient le texte au bord de l'écran. */
.frise__ici {
    max-width: var(--mesure);
    margin: var(--e-2) 0 0;
    font-weight: 400;
    color: var(--encre-douce);
    font-size: var(--t-xs);
    line-height: 1.45;
}

.frise__nuance { margin-top: var(--e-2); }

@media (min-width: 640px) {
    .frise__etape { min-width: 7rem; }
}

/* --- Outils de lecture : écoute et partage =============================== */

.outils {
    display: flex;
    flex-wrap: wrap;
    gap: var(--e-2);
    margin-top: var(--e-3);
}

/* --- Encart d'aide en tête de page ======================================= */
/*
 * Replié par défaut : il s'adresse à la première visite, et ne doit pas
 * s'interposer chaque jour entre le lecteur et le texte.
 */

.repli--aide {
    margin-block: var(--e-4);
    border-bottom: 0;
}

.repli--aide > summary { color: var(--encre-douce); font-weight: 500; font-size: var(--t-sm); }
.repli--aide[open] > summary { color: var(--accent); }

/* --- Chapô ================================================================ */

.chapo {
    font-size: var(--t-lg);
    line-height: 1.5;
    color: var(--encre-douce);
    margin-bottom: var(--e-6);
}

/* --- Répertoire des personnages ========================================== */
/*
 * Une liste de fiches se parcourt en diagonale : le nom en premier, le résumé
 * juste dessous, et rien d'autre. Le résumé est la fiche en une phrase — c'est
 * lui qui décide si on ouvre.
 */

.fiches { list-style: none; margin: var(--e-4) 0 var(--e-6); padding: 0; }

.fiche { border-bottom: 1px solid var(--filet); }
.fiche:last-child { border-bottom: 0; }

.fiche__lien {
    display: block;
    padding-block: var(--e-3);
    color: inherit;
    text-decoration: none;
}

.fiche__lien:hover .fiche__nom,
.fiche__lien:focus-visible .fiche__nom { color: var(--accent); text-decoration: underline; }

.fiche__nom { display: block; font-weight: 650; color: var(--encre); }

.fiche__resume {
    display: block;
    margin-top: var(--e-1);
    color: var(--encre-douce);
    font-size: var(--t-sm);
    line-height: 1.45;
}

/* La rubrique des confusions est la plus utile de la fiche : elle se voit. */
.note--confusion {
    border-left-color: var(--accent);
    background: var(--accent-voile);
}

.note--confusion .note__intitule { color: var(--accent); }
.note--confusion p:last-child { margin-bottom: 0; }

/* Un protagoniste qui a une fiche se signale comme tel. */
.realia dt a {
    text-decoration-thickness: 1px;
    text-underline-offset: 0.18em;
}

/* --- Visite guidée ======================================================= */

/*
 * Le voile ne peint rien : il ne sert qu'à intercepter les clics, pour que
 * la page reste inerte pendant la visite. L'assombrissement vient du halo,
 * dont l'ombre portée démesurée noircit tout sauf son propre rectangle —
 * ce qui donne le trou, sans masque SVG ni découpe.
 */

.visite__voile {
    position: fixed;
    inset: 0;
    z-index: 60;
    cursor: pointer;
}

.visite__halo {
    position: fixed;
    z-index: 61;
    border-radius: var(--r-md);
    pointer-events: none;
    box-shadow: 0 0 0 9999px rgba(12, 10, 8, 0.62);
    transition: top var(--transition), left var(--transition),
                width var(--transition), height var(--transition);
}

@media (prefers-color-scheme: dark) {
    .visite__halo { box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.74); }
}

.visite__bulle {
    position: fixed;
    z-index: 62;
    width: min(21rem, calc(100vw - 1rem));
    padding: var(--e-4);
    border: 1px solid var(--filet-fort);
    border-radius: var(--r-md);
    background: var(--papier-haut);
    color: var(--encre);
    box-shadow: var(--ombre);
    font-family: var(--f-ui);
}

.visite__bulle:focus { outline: none; }

/* Le bec est un carré tourné, dont deux côtés seulement portent le filet :
   les deux autres disparaissent sous le fond de la bulle. */
.visite__bec {
    position: absolute;
    top: -7px;
    width: 12px;
    height: 12px;
    margin-left: -6px;
    border-top: 1px solid var(--filet-fort);
    border-left: 1px solid var(--filet-fort);
    background: var(--papier-haut);
    transform: rotate(45deg);
}

.visite__bulle--dessus .visite__bec {
    top: auto;
    bottom: -7px;
    border-top: 0;
    border-left: 0;
    border-right: 1px solid var(--filet-fort);
    border-bottom: 1px solid var(--filet-fort);
}

.visite__compteur {
    margin: 0 0 var(--e-1);
    color: var(--encre-pale);
    font-size: var(--t-xs);
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.visite__titre {
    margin: 0 0 var(--e-2);
    font-size: var(--t-md);
    font-weight: 600;
    line-height: 1.25;
}

.visite__texte {
    margin: 0 0 var(--e-4);
    color: var(--encre-douce);
    font-size: var(--t-sm);
    line-height: 1.5;
}

.visite__actions {
    display: flex;
    justify-content: flex-end;
    gap: var(--e-2);
}

.visite__actions .bouton {
    min-height: var(--touche);
    padding-inline: var(--e-4);
}

/* --- Développer : le second niveau de lecture ============================ */

/* L'invitation, quand le développement n'existe pas encore. */
.developper {
    margin-top: var(--e-5);
    padding-top: var(--e-4);
    border-top: 1px solid var(--filet);
}

.developper form {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--e-3);
}

.developper .source { flex: 1 1 16rem; }

/* Le repli qui contient le développement se distingue des rubriques de
   l'analyse : ce n'est pas une rubrique de plus, c'est un autre texte. */
.repli--developpement {
    margin-top: var(--e-5);
    border: 1px solid var(--filet-fort);
    border-radius: var(--r-md);
    background: var(--papier-haut);
}

.repli--developpement > summary { font-weight: 600; }

.developpement > * + * { margin-top: var(--e-5); }

.developpement__ouverture {
    color: var(--encre-douce);
    font-size: var(--t-lecture);
}

.developpement__titre {
    margin: 0 0 var(--e-2);
    font-family: var(--f-ui);
    font-size: var(--t-md);
    font-weight: 600;
    line-height: 1.3;
}

.developpement__section + .developpement__section { margin-top: var(--e-5); }

/* Une question se lit comme un échange : l'intitulé porte, la réponse suit
   en retrait, ce qui évite de confondre les deux au survol de la page. */
.question + .question {
    margin-top: var(--e-4);
    padding-top: var(--e-4);
    border-top: 1px solid var(--filet);
}

.question__intitule {
    margin: 0 0 var(--e-2);
    font-family: var(--f-ui);
    font-weight: 600;
    color: var(--encre);
}

.question__reponse {
    margin: 0;
    padding-left: var(--e-4);
    border-left: 2px solid var(--filet-fort);
    color: var(--encre-douce);
}

.developpement__renvois .developpement__titre {
    font-size: var(--t-sm);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--encre-pale);
}

/* --- Compte rendu d'exécution du cron ==================================== */

/* Sortie de commande reproduite telle quelle : elle doit rester lisible et
   ne jamais élargir la page, d'où le défilement propre au bloc. */
.journal-brut {
    overflow-x: auto;
    max-height: 32rem;
    padding: var(--e-3);
    border: 1px solid var(--filet);
    border-radius: var(--r-sm);
    background: var(--papier-bas);
    color: var(--encre-douce);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: var(--t-xs);
    line-height: 1.5;
    white-space: pre;
}

/* --- Pistes de sermon ==================================================== */

/*
 * Page d'outil, pas de lecture. Rien n'y est replié : celui qui prépare veut
 * embrasser l'ensemble d'un coup d'œil pour choisir, là où le lecteur du reste
 * du site déplie ce qui l'intéresse.
 */

.sermon-jours {
    display: flex;
    flex-wrap: wrap;
    gap: var(--e-2);
    margin-bottom: var(--e-5);
}

.sermon-jour {
    margin-bottom: var(--e-2);
    font-size: var(--t-lg);
}

.sermon-lectures {
    margin: var(--e-4) 0 var(--e-5);
    padding-left: 0;
    list-style: none;
}

.sermon-lectures li {
    padding: var(--e-2) 0;
    border-bottom: 1px solid var(--filet);
}

.sermon-lectures .source { display: block; }

.sermon > * + * { margin-top: var(--e-6); }

.sermon__intitule {
    margin: 0 0 var(--e-2);
    color: var(--encre-pale);
    font-size: var(--t-xs);
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.sermon__fil,
.sermon__ouverture {
    padding: var(--e-4);
    border-left: 3px solid var(--accent);
    background: var(--accent-voile);
    border-radius: 0 var(--r-md) var(--r-md) 0;
}

/* Chaque piste est un sermon possible, pas une partie d'un plan : elle se
   présente donc comme un bloc autonome, détaché de ses voisines. */
.piste {
    margin-top: var(--e-6);
    padding: var(--e-5);
    border: 1px solid var(--filet-fort);
    border-radius: var(--r-md);
    background: var(--papier-haut);
}

.piste__titre {
    margin: 0 0 var(--e-3);
    font-size: var(--t-lg);
}

.piste__numero {
    display: block;
    color: var(--encre-pale);
    font-family: var(--f-ui);
    font-size: var(--t-xs);
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.piste__volet {
    margin-top: var(--e-4);
    padding-top: var(--e-3);
    border-top: 1px solid var(--filet);
}

.piste__etiquette {
    margin: 0 0 var(--e-1);
    color: var(--encre-pale);
    font-size: var(--t-xs);
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

/* L'application est ce que le prédicateur cherche en premier : elle se voit. */
.piste__volet--application {
    padding: var(--e-3) var(--e-4);
    border: 0;
    border-left: 2px solid var(--accent);
    background: var(--accent-voile);
    border-radius: 0 var(--r-sm) var(--r-sm) 0;
}

.piste__volet--ecueil .piste__etiquette { color: var(--encre-douce); }
.piste__volet--ecueil { color: var(--encre-douce); font-size: var(--t-sm); }

.piste__volet p:last-child,
.sermon__fil p:last-child,
.sermon__ouverture p:last-child { margin-bottom: 0; }

/* --- Choix du thème par le lecteur ======================================= */

/*
 * En bas du menu : trois choix, dont « comme le téléphone » par défaut.
 * Le bloc est masqué tant que nav.js ne l'a pas révélé — sans JavaScript, le
 * choix ne pourrait pas être mémorisé, et un réglage qui ne tient pas est pire
 * que pas de réglage.
 */

.affichage {
  /* Au pied de page : une largeur bornée, sinon les trois choix s'étirent
     sur toute la mesure d'un grand écran et ne ressemblent plus à un
     sélecteur. */
  max-width: 22rem;
  margin: var(--e-4) 0 var(--e-3);
  padding: var(--e-4) 0 0;
  border: 0;
  border-top: 1px solid var(--filet);
}

.affichage__titre {
  padding: 0;
  color: var(--encre-douce);
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.affichage__choix {
  display: flex;
  margin-top: var(--e-2);
  border: 1px solid var(--filet-fort);
  border-radius: var(--r-pilule);
  overflow: hidden;
}

.affichage__choix label {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: var(--touche);
  padding: var(--e-2);
  font-size: var(--t-xs);
  line-height: 1.25;
  text-align: center;
  cursor: pointer;
}

.affichage__choix label + label { border-left: 1px solid var(--filet-fort); }

/* Le bouton radio reste dans le flux pour rester accessible au clavier ;
   c'est le libellé qui porte l'apparence. */
.affichage__choix input {
  position: absolute;
  width: 1px; height: 1px;
  opacity: 0;
}

.affichage__choix label:has(:checked) {
  background: var(--encre);
  color: var(--papier);
  font-weight: 600;
}

.affichage__choix label:has(:focus-visible) {
  outline: 2px solid var(--focus);
  outline-offset: -2px;
}

.affichage__aide {
  margin: var(--e-2) 0 0;
  color: var(--encre-pale);
  font-size: var(--t-xs);
}

/* --- Invitation à créer un compte ======================================== */

/*
 * Affichée quand un visiteur non connecté ouvre les échanges. C'est la réponse
 * à un geste qu'il vient de faire : la donner en petit texte gris, comme
 * auparavant, laissait croire que le clic n'avait rien produit.
 */

.invite-compte {
  margin-block: var(--e-3);
  padding: var(--e-4);
  border: 1px solid var(--filet-fort);
  border-left: 3px solid var(--accent);
  border-radius: var(--r-md);
  background: var(--papier-haut);
}

.invite-compte__texte {
  margin: 0 0 var(--e-2);
  font-size: var(--t-md);
  font-weight: 600;
  color: var(--encre);
}

.invite-compte__detail {
  margin: 0 0 var(--e-3);
  font-size: var(--t-sm);
  color: var(--encre-douce);
}

.invite-compte .bouton + .invite-compte__detail { margin-top: var(--e-3); }
.invite-compte__detail:last-child { margin-bottom: 0; }

/* --- Formulaire de contact =============================================== */

/* Piège à robots : présent dans le document, hors de l'écran, jamais rempli
   par un humain. « display: none » serait détecté par les robots un peu
   soignés ; un décalage hors cadre l'est moins. */
.piege {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}


/* --- Attente d'une production ============================================= */
/*
 * Produire un texte demande une à deux minutes. C'est long à l'échelle d'une
 * page web, et rien ne le disait : le bouton restait tel quel, la page semblait
 * figée, et l'on recliquait — ou l'on partait.
 *
 * Le témoin est posé sur le bouton lui-même plutôt qu'en surimpression : c'est
 * là que le regard se trouve au moment du clic, et cela évite un voile qui
 * masquerait la page pendant deux minutes.
 */

.rotor {
  flex: none;
  width: 1em;
  height: 1em;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  animation: rotor 720ms linear infinite;
}

@keyframes rotor { to { transform: rotate(1turn); } }

/*
 * Mouvement réduit : on ralentit au lieu de supprimer. Un témoin d'attente qui
 * ne bouge plus n'informe plus de rien, et l'attente est ici réelle.
 */
@media (prefers-reduced-motion: reduce) {
  .rotor { animation-duration: 2.4s; }
}

.patiente {
  margin: var(--e-3) 0 0;
  max-width: var(--mesure);
  color: var(--encre-douce);
  font-size: var(--t-sm);
  line-height: 1.5;
}


/* --- Pistes de sermon : comparer, plutôt que lire d'affilée =============== */
/*
 * Celui qui prépare une homélie parcourt trois ou quatre pistes pour en choisir
 * une : il compare, il ne lit pas d'une traite. Empilées, elles font deux mille
 * pixels de haut et l'on ne voit jamais deux angles en même temps.
 *
 * Au-dessus de 64 em la page prend la largeur de l'en-tête, la tête de page
 * garde la mesure de lecture, et les pistes passent côte à côte. Chaque colonne
 * fait au moins 20 rem, soit environ cinquante-cinq signes : sous la mesure,
 * donc toujours confortable. En deçà de 64 em, rien ne change.
 *
 * « .prose » reste sur la racine : c'est lui qui porte le gras du contenu
 * (« .prose strong »). On lève seulement sa largeur, et on la rend aux enfants
 * qui doivent la garder.
 */

.sermon__pistes > .piste:first-child { margin-top: 0; }

@media (min-width: 64em) {
  .sermon-page {
    max-width: none;
    width: min(100% - 2 * var(--e-6), 68rem);
  }

  .sermon-page > * { max-width: var(--mesure); }
  .sermon-page > .sermon,
  .sermon-page > .sermon-jours { max-width: none; }

  .sermon {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--e-5);
  }

  .sermon > * + * { margin-top: 0; }

  .sermon > .sermon__pistes,
  .sermon > .note,
  .sermon > .sermon__renvois { grid-column: 1 / -1; }

  .sermon__pistes {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
    gap: var(--e-5);
    align-items: start;
  }

  /* min-width: 0 — sans quoi une largeur maximale interne étirerait la
     colonne, comme la frise l'avait appris. */
  .sermon__pistes > .piste { margin-top: 0; min-width: 0; }
}


/* Réglage à cocher, en administration.

   La classe ne s'appelle pas « .champ--case » : « .champ » habille les champs
   de saisie eux-mêmes — bordure, fond, hauteur — et l'appliquer à un
   conteneur lui donnerait l'apparence d'une zone de texte. La collision avait
   déjà cassé un formulaire une fois. Le libellé est cliquable sur toute sa longueur,
   et l'explication vient dessous, alignée sur lui : c'est elle qui porte la
   décision, la case ne fait que l'enregistrer. */
.reglage > label {
  display: flex;
  align-items: flex-start;
  gap: var(--e-3);
  min-height: var(--touche);
  font-weight: 600;
  cursor: pointer;
}

.reglage input {
  flex: none;
  width: 1.15rem;
  height: 1.15rem;
  margin-top: 0.15rem;
  accent-color: var(--accent);
}

.reglage .source { margin: var(--e-1) 0 0 calc(1.15rem + var(--e-3)); }


/* D'où vient cette lecture : Ancien ou Nouveau Testament.
   En retrait de couleur et de graisse par rapport au rang de la lecture, qui
   reste l'information principale — c'est une précision, pas un second titre.
   Le séparateur est décoratif : il ne doit pas être lu à voix haute. */
.lecture__testament { white-space: nowrap; color: var(--encre-pale); font-weight: 600; }
.lecture__testament::before { content: " · "; color: var(--filet-fort); }


/* --- La Chaîne d'or ======================================================= */
/*
 * La seule rubrique que personne n'a fait écrire à un modèle. Elle porte donc
 * une marque différente des autres replis : un filet à gauche, comme le texte
 * biblique, parce qu'elle est du même ordre — reçue, non produite.
 *
 * Chaque commentaire est un blockquote : c'est une citation, et le balisage
 * doit le dire aussi bien que la mise en page.
 */

.repli--catena > summary { font-variant-caps: small-caps; letter-spacing: 0.02em; }

.pere {
  margin: var(--e-4) 0 0;
  padding-left: var(--e-4);
  border-left: 2px solid var(--filet-fort);
}

.pere:first-of-type { margin-top: var(--e-3); }

.pere__nom {
  margin: 0 0 var(--e-1);
  color: var(--encre-douce);
  font-size: var(--t-sm);
  font-weight: 650;
  letter-spacing: 0.02em;
}

.pere p + p { margin-top: var(--e-2); }

.pere > p:not(.pere__nom) {
  margin: 0;
  font-family: var(--f-texte);
  line-height: 1.65;
}


/* --- L'accueil, au premier passage ======================================= */
/*
 * Ouverture de la visite guidée : même voile, mais un panneau centré plutôt
 * qu'une bulle, parce qu'il ne désigne encore rien. Il dit ce qu'est le site,
 * puis cède la place.
 */

.accueil {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: grid;
  place-items: center;
  padding: var(--e-4);
}

.accueil__boite {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 26rem;
  padding: var(--e-6) var(--e-5) var(--e-5);
  border-radius: var(--r-md);
  background: var(--papier-haut);
  box-shadow: var(--ombre-haute);
  text-align: center;
}

.accueil__boite:focus { outline: none; }

.accueil__image {
  display: block;
  width: 9rem;
  height: auto;
  margin: 0 auto var(--e-4);
}

.accueil__titre {
  margin: 0 0 var(--e-3);
  font-family: var(--f-texte);
  font-size: var(--t-xl);
}

.accueil__texte {
  margin: 0 0 var(--e-3);
  color: var(--encre-douce);
  line-height: 1.55;
}

.accueil__actions {
  display: flex;
  flex-direction: column;
  gap: var(--e-2);
  margin-top: var(--e-5);
}

.accueil__actions .bouton { width: 100%; }

.accueil__fermer {
  min-height: var(--touche);
  border: 0;
  background: none;
  color: var(--encre-pale);
  font: inherit;
  font-size: var(--t-sm);
  text-decoration: underline;
  cursor: pointer;
}

@media (prefers-reduced-motion: no-preference) {
  .accueil__boite { animation: accueil-entree 220ms ease-out; }
}

@keyframes accueil-entree {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}

/*
 * Le voile sous le panneau, pas dessus.
 *
 * Il avait le z-index global de la visite, supérieur à celui du panneau dans
 * le contexte d'empilement de « .accueil » : il couvrait la boîte. On la voyait
 * — le voile est translucide — mais aucun clic ne l'atteignait, ni « Fermer »,
 * ni « Découvrir ». Trouvé par un test de clic, pas à l'œil.
 */
.accueil .visite__voile { z-index: 0; }


/* --- Trace de réécriture ================================================== */
/*
 * En bas de page, dans l'avertissement : le style de la page a été réécrit.
 * L'émoji dit qu'un traitement a eu lieu ; le texte à côté dit lequel, pour
 * qu'on n'y lise pas qu'un humain a écrit ce que l'avertissement attribue,
 * juste au-dessus, à une intelligence artificielle.
 */
.trace-humaine {
  display: flex;
  align-items: flex-start;
  gap: var(--e-3);
  margin: var(--e-5) 0 0;
  padding: var(--e-3) var(--e-4);
  border-radius: var(--r-md);
  background: var(--papier-haut);
  color: var(--encre-douce);
  font-size: var(--t-sm);
  line-height: 1.5;
}

.trace-humaine__emoji {
  flex: none;
  font-size: 1.75rem;
  line-height: 1;
}

/* ------------------------------------------------------------------------
 * Le rappel du dimanche
 *
 * Un encadré sobre : l’état de cet appareil, puis le bouton. Il remplace le
 * réglage qu’on chercherait ailleurs — c’est la page entière qui explique,
 * l’encadré ne fait qu’agir.
 * ---------------------------------------------------------------------- */
.rappel {
  margin: var(--e-5) 0;
  padding: var(--e-4);
  border: 1px solid var(--filet);
  border-radius: var(--r-md);
  background: var(--papier-haut);
}
.rappel__etat { margin: 0; font-weight: 600; }
.rappel__etat:empty { display: none; }
.rappel__actions { margin: var(--e-3) 0 0; }
.rappel .source { margin-top: var(--e-3); margin-bottom: 0; }

/* ------------------------------------------------------------------------
 * L’invitation au rappel du dimanche
 *
 * Même forme que la bannière d’installation, mais visible aussi sur grand
 * écran : les notifications ne sont pas une affaire de téléphone seulement.
 * ---------------------------------------------------------------------- */
.invite {
  position: sticky;
  bottom: 0;
  z-index: 40;
  border-top: 1px solid var(--filet-fort);
  background: var(--papier-bas);
  padding-block: var(--e-4);
}
.invite__interieur {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-3);
  align-items: center;
  justify-content: space-between;
}
.invite__texte { margin: 0; font-size: 0.92rem; color: var(--encre-douce); max-width: 46ch; }
.invite__actions { display: flex; gap: var(--e-3); flex: none; }

/* La forme longue ou brève d’une lecture, à côté de son intitulé. */
.lecture__forme {
  display: inline-block;
  margin-left: var(--e-2);
  font-size: var(--t-xs);
  letter-spacing: 0.04em;
  color: var(--encre-pale);
}

/* Le compteur de présence, au pied de page : une ligne de plus, discrète. */
.en-ligne {
  margin: 0 0 var(--e-2);
  font-size: var(--t-xs);
  color: var(--encre-pale);
}
.en-ligne::before {
  content: "";
  display: inline-block;
  width: 0.45rem;
  height: 0.45rem;
  margin-right: 0.45rem;
  border-radius: 50%;
  background: #4a7c59;
  vertical-align: baseline;
}