/* La police est servie par le site (docs/assets/polices), en une seule version à graisse variable :
   toutes les graisses de 100 à 900 sont disponibles, en ligne comme hors ligne, sans appel à un autre site.
   Inter est publiée sous licence SIL Open Font (LICENCE.txt, à côté des fichiers).
   « optional » : une page ne change jamais de police en cours d'affichage, ce qui ferait sauter l'en-tête et le
   texte. La police est demandée dès le début de la page (overrides/main.html) ; dès la deuxième page, elle vient du
   cache sans même que le navigateur demande au serveur si elle a changé (docs/_headers), et elle est prête à temps.
   Sinon (une toute première visite sur un réseau lent), la page garde la police du système. */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: optional;
  src: url("../assets/polices/inter-latin.woff2") format("woff2");
}

@font-face {
  font-family: "Inter";
  font-style: italic;
  font-weight: 100 900;
  font-display: optional;
  src: url("../assets/polices/inter-italique-latin.woff2") format("woff2");
}

/* Le texte du Catéchisme se lit en Literata, une police à empattements dessinée pour la lecture longue à l'écran
   (SIL Open Font, comme Inter) ; Inter reste celle des menus, de la carte et des repères. Mêmes règles qu'Inter :
   servie par le site, demandée dès le début de la page, jamais changée en cours d'affichage. */
@font-face {
  font-family: "Literata";
  font-style: normal;
  font-weight: 200 900;
  font-display: optional;
  src: url("../assets/polices/literata-latin.woff2") format("woff2");
}

@font-face {
  font-family: "Literata";
  font-style: italic;
  font-weight: 200 900;
  font-display: optional;
  src: url("../assets/polices/literata-italique-latin.woff2") format("woff2");
}

:root {
  --md-text-font: "Inter";
}

:root {
  --ccc-book-font: "Literata", Georgia, serif;
}

[data-md-color-scheme="default"] {
  --md-primary-fg-color: #ffffff;
  --md-primary-bg-color: #16191d;
  --md-primary-bg-color--light: rgba(22, 25, 29, 0.6);

  --md-accent-fg-color: #123a61;
  --md-typeset-a-color: #1c4e80;

  --md-default-bg-color: #ffffff;
  --md-default-fg-color: rgba(22, 25, 29, 0.86);
  --md-default-fg-color--light: rgba(22, 25, 29, 0.64);
  --md-default-fg-color--lighter: rgba(22, 25, 29, 0.3);
  --md-default-fg-color--lightest: rgba(22, 25, 29, 0.08);

  --md-typeset-color: var(--md-default-fg-color);
  --md-code-bg-color: #f5f6f8;

  --gs-ink-strong: #16191d;
  --gs-rule: rgba(22, 25, 29, 0.1);
}

[data-md-color-scheme="slate"] {
  --md-hue: 220;
  --md-primary-fg-color: #16191d;
  --md-primary-bg-color: #e9edf2;
  --md-accent-fg-color: #9cc4ea;
  --md-typeset-a-color: #8fbce6;

  --gs-ink-strong: #f2f5f8;
  --gs-rule: rgba(255, 255, 255, 0.12);
}

/* Trois tailles de texte, et pas une de plus, en dehors des titres :
   le texte qu'on lit, les menus et boutons, les mentions discrètes (numéros, surtitres, renvois). */
:root {
  --fs-text: 0.95rem;
  --fs-ui: 0.75rem;
  --fs-small: 0.6rem;
  /* La longueur des lignes du texte, la même partout où il a la place : la page entière, le volet de la carte, celui
     de la recherche. Une ligne y commence et y finit donc par les mêmes mots (carte.js, fullWidth). */
  --ccc-ligne: 36rem;
}

/* Une couleur par partie, partagée par la carte, le sommaire et les onglets : --p0, --p1…, et les classes .ccc-p0,
   .ccc-p1… qui les posent dans --pc, sont écrites dans chaque page par hooks.py (part_colours_css), qui les tire
   des quatre couleurs du site selon le nombre de parties du texte.
   Toutes froides ou neutres, elles se distinguent moins bien pour un lecteur daltonien que des teintes
   opposées : c'est pourquoi chaque partie porte partout son numéro et son nom, jamais sa seule couleur.
   Les quatre sont reprises dans l'icône (docs/assets/icone*.png et icone.svg) et le logo (plus bas). */

/* Repris là où le thème est choisi : posé sur la seule racine, il garderait la couleur du thème clair, la page
   ne passant en sombre qu'à partir de <body>. */
:root,
[data-md-color-scheme] {
  --pc: var(--md-default-fg-color--light);
}


/* En-tête */

.md-header {
  box-shadow: none;
  border-bottom: 1px solid var(--gs-rule);
}

/* L'en-tête porte l'identité du site, la croix et le nom : plus haut et plus grand que celui du thème (2,4 rem,
   0,9 rem). Sa hauteur sert aussi à caler la barre et les colonnes en dessous. */
:root {
  --ccc-header: 2.9rem;
}

.md-header__title {
  height: var(--ccc-header);
  font-size: 1.05rem;
  font-weight: 700;
  line-height: var(--ccc-header);
  letter-spacing: -0.01em;
}

/* Le nom du site reste dans l'en-tête quand on descend dans la page : le thème le remplace alors par le titre de la
   page, que le fil d'Ariane, le plan et la table des matières disent déjà. */
.md-header__title--active .md-header__topic {
  opacity: 1;
  pointer-events: auto;
  transform: none;
  z-index: 0;
}

.md-header__topic + .md-header__topic,
.md-header__title--active .md-header__topic + .md-header__topic {
  display: none;
}

.md-tabs {
  border-bottom: 1px solid var(--gs-rule);
}

/* Taille du texte, réglée dans le panneau de réglages de l'en-tête (la roue crantée). Tout le site est dimensionné
   en rem, donc il suffit de multiplier la taille de base (la carte, en pixels, a son propre zoom).
   Les paliers sont ceux du thème Material, chacun descendu de deux crans (125 / 137,5 / 150 %) : le corps de
   texte fait ainsi 16 px sur un portable, 18 px au-delà de 1600 px et 20 px au-delà de 2000 px ; le
   réglage offre quatre crans de 6 % en dessous et quatre au-dessus. */
html {
  font-size: calc(100% * var(--ccc-scale, 1));
}

/* Un téléphone se tient plus près des yeux qu'un portable, mais son écran est bien plus dense : il part du palier
   du dessus, et le texte qu'on lit y fait 17 px, un peu moins qu'au-delà de 1600 px pour garder assez de mots par
   ligne sur un écran étroit. Le téléphone est ici l'écran trop étroit pour le volet de lecture (le seuil de
   carte.js), ou trop bas pour lui quand on le tient en paysage. */
@media screen and (max-width: 44.98em), screen and (max-height: 34.98em) and (pointer: coarse) {
  html {
    font-size: calc(112.5% * var(--ccc-scale, 1));
  }

  :root {
    --fs-text: 0.95rem;
  }
}

@media screen and (min-width: 100em) {
  html {
    font-size: calc(112.5% * var(--ccc-scale, 1));
  }
}

@media screen and (min-width: 125em) {
  html {
    font-size: calc(125% * var(--ccc-scale, 1));
  }
}

/* L'en-tête, lui, garde sa taille : la roue crantée et son panneau ne doivent pas bouger sous le doigt pendant
   qu'on règle. `zoom` annule pour lui l'agrandissement. La barre du dessous suit le texte, comme le reste. */
.md-header {
  zoom: calc(1 / var(--ccc-scale, 1));
}

/* Les réglages d'affichage : la roue crantée de l'en-tête ouvre un petit panneau, posé sous elle (carte.js).
   Comme l'en-tête, il garde sa taille quand le texte change : les boutons − et + restent sous le doigt
   d'un clic à l'autre. */
.ccc-settings {
  position: relative;
}

.ccc-settings__panel {
  position: absolute;
  top: 100%;
  right: 0.2rem;
  display: grid;
  gap: 0.7rem;
  padding: 0.6rem 0.7rem;
  font-size: var(--fs-ui);
  color: var(--md-default-fg-color);
  background: var(--md-default-bg-color);
  border: 1px solid var(--gs-rule);
  border-radius: 0.5rem;
  box-shadow: 0 0.3rem 1rem rgba(0, 0, 0, 0.16);
}

.ccc-settings__panel[hidden] {
  display: none;
}

/* Deux groupes, chacun sous son intitulé : ce qui vaut pour tout le site, puis ce qui règle la carte. */
.ccc-settings__group {
  display: grid;
  gap: 0.45rem;
}

.ccc-settings__group + .ccc-settings__group {
  padding-top: 0.7rem;
  border-top: 1px solid var(--gs-rule);
}

.ccc-settings__title {
  margin: 0;
  font-size: var(--fs-small);
  font-weight: 700;
  color: var(--md-default-fg-color--light);
}

.ccc-settings__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.2rem;
  font-weight: 700;
}

.ccc-settings__stepper,
.ccc-settings__choice {
  display: inline-flex;
  align-items: center;
  padding: 0.15rem;
  border: 1px solid var(--gs-rule);
  border-radius: 0.45rem;
}

.ccc-settings__panel button {
  font-weight: 700;
  color: var(--md-default-fg-color--light);
  border-radius: 0.3rem;
  cursor: pointer;
}

.ccc-settings__panel button:hover {
  color: var(--gs-ink-strong);
}

/* Les signes − et + : des cibles d'au moins 34 px sur téléphone, faciles à toucher. */
.ccc-settings__stepper button {
  width: 2.1rem;
  height: 1.9rem;
  font-size: 0.95rem;
  line-height: 1;
}

.ccc-settings__stepper button:disabled {
  opacity: 0.3;
  cursor: default;
}

/* Le cran en cours, entre les deux signes : un bouton lui aussi, qui ramène à 0. */
.ccc-settings__stepper .ccc-settings__value {
  width: auto;
  min-width: 1.9rem;
  font-size: inherit;
  font-variant-numeric: tabular-nums;
  color: var(--gs-ink-strong);
}

.ccc-settings__choice button {
  height: 1.9rem;
  padding: 0 0.75rem;
}

.ccc-settings__choice button[aria-pressed="true"] {
  color: var(--md-default-bg-color);
  background: var(--gs-ink-strong);
}

/* Le bouton clair / sombre du thème est remplacé par le panneau, qui coche ses cases à sa place. */
.ccc-settings ~ .md-header__option[data-md-component="palette"] {
  display: none;
}

/* Les réglages passent après la recherche, dans le coin. */
.md-header__option {
  order: 2;
}

[data-md-color-scheme="default"] .md-search__form {
  background-color: rgba(22, 25, 29, 0.05);
}

[data-md-color-scheme="default"] .md-search__form:hover {
  background-color: rgba(22, 25, 29, 0.09);
}

/* Gabarit */

/* La page s'élargit avec le texte tant que l'écran a de la place : colonnes et texte gardent leurs proportions.
   L'en-tête et la barre, eux, gardent leur largeur (`zoom` annule pour eux l'agrandissement du rem) :
   le panneau de réglages reste sous le curseur quand on clique plusieurs fois de suite. */
.md-grid {
  max-width: 74rem;
}

/* Le second sélecteur reprend celui du thème, qui sinon recale la colonne à gauche
   dès que la navigation latérale est affichée. */
.md-content .md-content__inner,
[dir] .md-sidebar:not([hidden]) ~ .md-content > .md-content__inner {
  max-width: min(var(--ccc-ligne), calc(100% - 1.6rem));
  margin-inline: auto;
  padding-top: 2.2rem;
}

.md-content__inner::before {
  display: none;
}

/* Sur petit écran, le texte doit commencer haut : le fil d'Ariane, le surtitre et le titre se resserrent. */
@media (max-width: 59.98em) {
  .md-content .md-content__inner,
  [dir] .md-sidebar:not([hidden]) ~ .md-content > .md-content__inner {
    padding-top: 1rem;
  }

  .md-content > .md-path {
    padding-top: 0.8rem;
  }
}

.md-content .md-path {
  font-size: var(--fs-small);
  max-width: min(var(--ccc-ligne), calc(100% - 1.6rem));
  margin-inline: auto;
}

/* Le fil d'Ariane passe à la ligne plutôt que de défiler de côté : chaque élément reste entier tant qu'il tient
   sur une ligne, et le chevron suit l'élément au lieu de le précéder, pour ne jamais ouvrir une ligne. */
.md-content > .md-path {
  overflow: visible;
}

.md-content > .md-path .md-path__list {
  flex-wrap: wrap;
  row-gap: 0.1rem;
}

.md-content > .md-path .md-path__item {
  display: inline-flex;
  align-items: center;
  white-space: normal;
}

.md-content > .md-path .md-path__item::before {
  display: none;
}

.md-content > .md-path .md-path__item:not(:last-child)::after {
  content: "";
  flex: none;
  width: 0.8rem;
  height: 0.8rem;
  margin-left: 0.2rem;
  background-color: var(--md-default-fg-color--lighter);
  -webkit-mask-image: var(--md-path-icon);
  mask-image: var(--md-path-icon);
}

/* Sur grand écran, une gouttière à gauche du texte accueille les numéros de paragraphe
   et les tient à distance de la navigation. */

@media (min-width: 60em) {
  .md-content .md-content__inner,
  [dir] .md-sidebar:not([hidden]) ~ .md-content > .md-content__inner,
  .md-content .md-path {
    max-width: min(39.5rem, calc(100% - 1.6rem));
    padding-left: 3.5rem;
  }
}

/* Le fil d'Ariane ne sert que là où le plan de gauche n'est pas sous les yeux : sur petit écran,
   et dans le volet de lecture (carte.js l'y recopie). */
@media (min-width: 60em) {
  .md-content > .md-path {
    display: none;
  }
}

/* Là où le texte a une colonne à côté de lui, il démarre à sa hauteur. */
@media (min-width: 60em) {
  .md-content .md-content__inner,
  [dir] .md-sidebar:not([hidden]) ~ .md-content > .md-content__inner {
    padding-top: 1.2rem;
  }
}

/* Corps de texte */

.md-typeset {
  font-size: var(--fs-text);
  line-height: 1.7;
  letter-spacing: -0.002em;
}

.md-typeset h1 {
  font-size: 1.62rem;
  line-height: 1.24;
  font-weight: 700;
  letter-spacing: -0.022em;
  color: var(--gs-ink-strong);
  margin-bottom: 0.9em;
}

.md-typeset h2 {
  font-size: 1.15rem;
  line-height: 1.35;
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--gs-ink-strong);
  margin-top: 3em;
  margin-bottom: 0.8em;
}

/* Le premier intertitre suit le titre de près : l'écart qui sépare deux sections n'a pas lieu d'être avant la première. */
.md-typeset h1 + h2,
.md-typeset .ccc-toc + h2,
.md-typeset .ccc-enonce + h2 {
  margin-top: 1.6em;
}

.md-typeset h3 {
  font-size: 1.06rem;
  line-height: 1.45;
  font-weight: 700;
  letter-spacing: -0.008em;
  margin-top: 2.2em;
  margin-bottom: 0.5em;
}

.md-typeset h4 {
  font-size: var(--fs-text);
  font-weight: 700;
  margin-top: 1.7em;
}

.md-typeset p {
  margin-block: 0 1.15em;
}

/* Le texte du livre, titres compris, en Literata, dans sa page comme dans le volet de la carte. Ce qui sert à s'y
   retrouver (surtitre, fil d'Ariane, numéros en marge, sommaire de la page et du chapitre, pages voisines) garde
   Inter, comme les menus. */
.md-typeset,
.md-typeset .ccc-panel__body {
  font-family: var(--ccc-book-font);
}

.md-typeset .ccc-kicker,
.md-typeset .ccc-pagetoc,
.md-typeset .ccc-panel__body .md-path,
.md-typeset .ccc-num,
.md-typeset .ccc-toc,
.md-typeset .ccc-children,
.md-typeset .ccc-pager,
.md-typeset .ccc-map,
.md-typeset table:not([class]) {
  font-family: var(--md-text-font-family);
}

/* Liens */

.md-typeset a {
  text-decoration: none;
  border-bottom: 1px solid rgba(28, 78, 128, 0.28);
}

.md-typeset a:hover {
  border-bottom-color: currentcolor;
}

.md-typeset h1 a,
.md-typeset h2 a,
.md-typeset h3 a,
.md-typeset h4 a,
.md-typeset a.footnote-ref,
.md-typeset .footnote-backref,
.md-typeset .md-button {
  border-bottom: none;
}

/* Une référence biblique ne se coupe pas en fin de ligne (« Dt 5, » puis « 19 » à la ligne suivante) : elle passe
   entière à la ligne suivante. */
.md-typeset a[href^="https://www.aelf.org/bible/"] {
  white-space: nowrap;
}

/* Citations, tableaux, notes */

/* Les citations que le Vatican met en retrait (l'Écriture, les Pères) : le même filet que les prières en vers. */
[dir] .md-typeset blockquote {
  margin: 0 0 1.15em;
  padding: 0.15em 0 0.15em 1.1em;
  border-left: 2px solid color-mix(in srgb, var(--pc, var(--md-default-fg-color--lighter)) 45%, transparent);
  color: inherit;
}

.md-typeset blockquote > :first-child {
  margin-top: 0;
}

.md-typeset blockquote > :last-child {
  margin-bottom: 0;
}

.md-typeset hr {
  border-bottom: 1px solid var(--gs-rule);
}

.md-typeset table:not([class]) {
  font-size: var(--fs-ui);
  border-color: var(--gs-rule);
}

/* Pas de mot surligné sur l'accueil : la carte et le sommaire ne sont pas des résultats de recherche. */
.md-typeset .ccc-map mark {
  color: inherit;
  background: none;
  box-shadow: none;
}

/* Recherche : le paragraphe proposé quand on tape un numéro */

.ccc-search-para {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  padding: 0.7rem 0.8rem 0.7rem 2.2rem;
  font-size: var(--fs-ui);
  color: var(--md-default-fg-color);
  border-bottom: 1px solid var(--gs-rule);
}

.ccc-search-para[hidden] {
  display: none;
}

.ccc-search-para strong {
  color: var(--md-typeset-a-color);
}

.ccc-search-para span {
  color: var(--md-default-fg-color--light);
}

.ccc-search-para[href]:hover,
.ccc-search-para[href]:focus {
  background: var(--md-default-fg-color--lightest);
}

/* Recherche : une référence biblique (« Jean 6, 23 ») et les paragraphes qui la citent */

.ccc-search-bible {
  font-size: var(--fs-ui);
  border-bottom: 1px solid var(--gs-rule);
}

.ccc-search-bible[hidden] {
  display: none;
}

.ccc-search-bible__head {
  margin: 0;
  padding: 0.7rem 0.8rem 0.3rem;
  font-weight: 700;
  color: var(--md-default-fg-color);
}

.ccc-search-bible__note {
  margin: 0;
  padding: 0 0.8rem 0.5rem;
  color: var(--md-default-fg-color--light);
}

/* Sur grand écran, alignés sur le texte des résultats, à droite de leur icône (comme la rangée des parties). */
@media (min-width: 60em) {
  .ccc-search-bible__head,
  .ccc-search-bible__note {
    padding-left: 2.2rem;
  }
}

.ccc-search-bible__note button {
  padding: 0;
  font: inherit;
  color: var(--md-typeset-a-color);
  cursor: pointer;
}

/* Une référence reconnue : seuls ses résultats s'affichent, pas ceux de la recherche par mots (carte.js). */
.ccc-search--bible > .md-search-result__meta,
.ccc-search--bible > .md-search-result__list,
.ccc-search--bible > .md-search-result__more {
  display: none;
}

/* Les favoris d'une adresse, sur la page de résultats (carte.js, showFavoris) : l'invitation à taper et le rappel
   de la syntaxe n'y servent pas. */
.ccc-search--favoris > .md-search-result__meta,
.ccc-search--favoris > .ccc-search-syntax {
  display: none;
}

/* Le nom du livre, au-dessus de ses favoris : les favoris mêlent les livres, que la recherche ne mêle pas. */
.ccc-search-favoris__livre {
  margin: 0;
  padding: 0.9rem 0.8rem 0.1rem;
  font-size: var(--fs-small);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--md-default-fg-color--light);
}

@media (min-width: 60em) {
  .ccc-search-favoris__livre {
    padding-left: 2.2rem;
  }
}

/* La page des favoris (docs/favoris.md) : leur liste, comme celle de la page de résultats, sans titre (l'en-tête le
   dit), et la recherche de l'en-tête, comme ailleurs. Sous la liste, « Exporter », qui copie le lien qui les emporte
   ailleurs. */
.ccc-favoris-page {
  padding-bottom: 1rem;
}

.ccc-search-bible__head:empty {
  display: none;
}

.ccc-favoris-export {
  margin: 0;
  padding: 1.2rem 0.8rem 1.5rem;
}

.ccc-favoris-export button {
  padding: 0.4rem 1rem;
  font: inherit;
  font-size: var(--fs-ui);
  font-weight: 600;
  color: var(--md-typeset-a-color);
  background: none;
  border: 1px solid currentcolor;
  border-radius: 0.3rem;
  cursor: pointer;
}

.ccc-favoris-export button:hover,
.ccc-favoris-export button:focus-visible {
  color: var(--md-accent-fg-color);
}

@media (min-width: 60em) {
  .ccc-favoris-export {
    padding-left: 2.2rem;
  }
}

/* Les paragraphes qui la citent : une liste comme celle de la recherche par mots (mêmes classes du thème), chaque
   paragraphe en extrait, la référence surlignée. */
.ccc-search-bible__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.ccc-search-bible .md-search-result__item {
  margin: 0;
}

/* Recherche : la correction d'un mot que le texte n'a pas (« Résultats pour prêtre, ou : père ») */

.ccc-search-fix {
  margin: 0;
  padding: 0.5rem 0.8rem 0.5rem 2.2rem;
  font-size: var(--fs-ui);
  color: var(--md-default-fg-color--light);
  border-bottom: 1px solid var(--gs-rule);
}

.ccc-search-fix[hidden] {
  display: none;
}

.ccc-search-fix strong {
  color: var(--md-default-fg-color);
}

.ccc-search-fix button {
  padding: 0;
  font: inherit;
  color: var(--md-typeset-a-color);
  background: none;
  border: 0;
  cursor: pointer;
}

.ccc-search-fix button:hover,
.ccc-search-fix button:focus-visible {
  text-decoration: underline;
}

/* Recherche : le rappel de la syntaxe, en gris sous le compte des résultats */

.ccc-search-syntax {
  display: flex;
  flex-wrap: wrap;
  gap: 0.1rem 0.9rem;
  margin: 0;
  padding: 0 0.8rem 0.5rem;
  font-size: var(--fs-small);
  line-height: 1.5;
  color: var(--md-default-fg-color--light);
  background: var(--md-default-bg-color);
  border-bottom: 1px solid var(--gs-rule);
}

/* Le premier exemple, le plus long, a sa ligne ; les deux autres se partagent la suivante. */
.ccc-search-syntax > span:first-child {
  flex-basis: 100%;
}

.ccc-search-syntax code {
  padding: 0 0.25em;
  font-family: inherit;
  font-weight: 700;
  color: var(--md-default-fg-color);
  background: var(--md-default-fg-color--lightest);
  border-radius: 0.2rem;
}

@media (min-width: 60em) {
  .ccc-search-syntax {
    padding-left: 2.2rem;
  }
}

@media (max-width: 59.98em) {
  .ccc-search-syntax.is-found {
    display: none;
  }
}

/* Recherche : un résultat tient en quelques lignes. Trois par paragraphe, et seulement les paragraphes où le mot
   a été trouvé (à défaut, le premier) ; carte.js retire le début d'un paragraphe quand le mot est plus loin. */
.md-search-result__article > p {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  overflow: hidden;
}

.md-search-result__article:has(> p mark) > p:not(:has(mark)),
.md-search-result__article:not(:has(> p mark)) > p ~ p {
  display: none;
}

/* Recherche : les résultats rangés par partie (carte.js). Le nom de la partie ouvre son groupe, dans sa couleur ;
   chaque résultat dit, au-dessus de son titre, par où on y arrive dans la partie. */
.ccc-search-group {
  padding: 1rem 0.8rem 0.4rem;
  font-size: var(--fs-small);
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--pc, var(--md-default-fg-color--light));
  border-bottom: 2px solid var(--pc, var(--md-default-fg-color--lightest));
}

.ccc-search-path {
  margin: 0 0 0.15rem;
  padding-top: 0.5rem;
  font-size: 0.62rem;
  line-height: 1.35;
  color: var(--md-default-fg-color--light);
}

/* La rangée des parties : chacune avec son nombre de résultats ; celle qui est choisie, pleine de sa couleur. */
.ccc-search-parts {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  padding: 0.5rem 0.8rem;
  border-bottom: 1px solid var(--md-default-fg-color--lightest);
}

.ccc-search-parts[hidden] {
  display: none;
}

.ccc-search-parts button {
  --c: var(--pc, var(--md-default-fg-color--light));
  min-height: 1.6rem;
  padding: 0.15rem 0.6rem;
  font: inherit;
  font-size: var(--fs-small);
  font-weight: 700;
  color: var(--c);
  background: transparent;
  border: 1px solid var(--c);
  border-radius: 1rem;
  cursor: pointer;
}

.ccc-search-parts button span {
  font-weight: 400;
}

.ccc-search-parts button[aria-pressed="true"] {
  color: var(--md-default-bg-color);
  background: var(--c);
}

@media (min-width: 60em) {
  .ccc-search-parts {
    padding-left: 2.2rem;
  }
}

/* En bas à droite des résultats, le bouton qui ouvre la page de résultats (carte.js, `toPage`) : il reste en
   place pendant que la liste défile. */
.ccc-search-page {
  position: absolute;
  right: 1rem;
  bottom: 1rem;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.4rem;
  height: 2.4rem;
  color: var(--md-default-bg-color);
  background: var(--md-typeset-a-color);
  border-radius: 50%;
  box-shadow: var(--md-shadow-z2);
}

.ccc-search-page:hover,
.ccc-search-page:focus-visible {
  background: var(--md-accent-fg-color);
}

.ccc-search-page svg {
  width: 1.3rem;
  height: 1.3rem;
  fill: currentColor;
}

.ccc-search-page[hidden] {
  display: none;
}

/* La page de résultats (docs/recherche.md) : la recherche du thème, toujours ouverte (carte.js, initResultsPage).
   Sur téléphone et tablette, le thème l'affiche déjà en plein écran, le champ en haut. Sur grand écran, elle quitte
   l'en-tête et devient la page, à plat : en haut une bande avec le champ, puis la liste, qui défile jusqu'en bas
   de l'écran. Le volet de lecture se range à sa droite, sa barre à la hauteur de la bande, un seul filet sous
   les deux. La page elle-même n'a rien d'autre à montrer. */
html:has(:is(.ccc-recherche, .ccc-favoris-page)) .md-content,
html:has(:is(.ccc-recherche, .ccc-favoris-page)) .ccc-footer,
html:has(:is(.ccc-recherche, .ccc-favoris-page)) .md-footer {
  display: none;
}

@media screen and (min-width: 60em) {
  html:has(:is(.ccc-recherche, .ccc-favoris-page)) {
    --ccc-bande: 4.5rem; /* la hauteur de la barre du volet, titre et intertitre compris */
    --ccc-colonne: min(44rem, 100% - 2rem);
  }

  html:has(.ccc-recherche) .md-search__overlay {
    display: none;
  }

  /* Le thème dessine la recherche ouverte par des règles plus précises que les nôtres : même préfixe. */
  html:has(.ccc-recherche) [data-md-toggle="search"]:checked ~ .md-header .md-search__inner {
    position: fixed;
    top: var(--ccc-entete, 2.4rem);
    right: var(--ccc-volet, 0px);
    bottom: 0;
    left: 0;
    display: flex;
    flex-direction: column;
    width: auto; /* entre les deux bords : un pourcentage se rapporterait ici à l'en-tête, pas à l'écran */
    padding: 0;
    transition: none;
    /* L'en-tête ne suit pas la taille du texte (son `zoom`) : la recherche, qui en sort pour devenir la page, la
       suit comme le volet. Ses mesures redeviennent alors celles du reste de la page. */
    zoom: var(--ccc-scale, 1); /* le thème en met un peu, qui décalerait le filet de celui du volet */
    float: none;
    background: var(--md-default-bg-color);
  }

  html:has(.ccc-recherche) [data-md-toggle="search"]:checked ~ .md-header .md-search__form {
    flex: none;
    box-sizing: border-box;
    width: var(--ccc-colonne);
    height: 2.4rem;
    margin: calc((var(--ccc-bande) - 2.4rem) / 2) auto;
    background: transparent;
    border: 1px solid var(--gs-rule);
    border-radius: 0.3rem;
    box-shadow: none;
  }

  html:has(.ccc-recherche) [data-md-toggle="search"]:checked ~ .md-header .md-search__form:focus-within {
    border-color: var(--md-typeset-a-color);
  }

  /* Le champ, plus grand qu'en tête de page : le mot proposé par le thème à sa taille, les icônes au milieu. */
  html:has(.ccc-recherche) .md-search__input,
  html:has(.ccc-recherche) .md-search__suggest {
    font-size: 0.9rem;
  }

  html:has(.ccc-recherche) .md-search__form .md-search__icon[for="__search"] {
    top: 0.6rem;
  }

  html:has(.ccc-recherche) .md-search__options {
    top: 0.7rem;
  }

  html:has(.ccc-recherche) [data-md-toggle="search"]:checked ~ .md-header .md-search__output {
    position: relative;
    top: 0;
    flex: 1 1 auto;
    min-height: 0;
    border-top: 1px solid var(--gs-rule);
    border-radius: 0;
    box-shadow: none;
  }

  html:has(.ccc-recherche) [data-md-toggle="search"]:checked ~ .md-header .md-search__scrollwrap {
    width: auto;
    height: 100%;
    max-height: none;
    background: transparent;
    border: none;
    box-shadow: none;
  }

  /* La liste suit la colonne du champ ; la barre de défilement reste au bord, contre le volet. */
  html:has(.ccc-recherche) .md-search-result,
  .ccc-favoris-page .md-search-result {
    width: var(--ccc-colonne);
    margin-inline: auto;
  }

  /* Sous la bande, un seul filet : la rangée des livres n'a pas le sien. */
  html:has(.ccc-recherche) .ccc-search-parts {
    padding-top: 0.8rem;
    border-bottom: none;
  }

  html:has(.ccc-recherche) .md-search-result__meta {
    padding-left: 2.2rem;
    background: transparent;
  }

  /* L'aide se retire dès qu'il y a des résultats : la page est faite pour les parcourir. */
  html:has(.ccc-recherche) .ccc-search-syntax.is-found {
    display: none;
  }

  /* Le volet de lecture (carte.js, initResultsPage) : à droite, sous l'en-tête, jusqu'en bas. Le reste du cadre
     laisse passer les clics vers la recherche, dessous. */
  .ccc-split:has(> :is(.ccc-recherche, .ccc-favoris-page)) {
    position: fixed;
    top: var(--ccc-entete, 2.4rem);
    right: 0;
    bottom: 0;
    left: 0;
    pointer-events: none;
  }

  .ccc-split > :is(.ccc-recherche, .ccc-favoris-page) {
    flex: 1 1 0;
    min-width: 0;
  }

  /* Les favoris défilent dans leur colonne, à gauche du volet ; ils reçoivent les clics, que le cadre laisse passer. */
  .ccc-split > .ccc-favoris-page {
    overflow-y: auto;
    pointer-events: auto;
  }

  .ccc-split:has(> :is(.ccc-recherche, .ccc-favoris-page)) > .ccc-handle,
  .ccc-split:has(> :is(.ccc-recherche, .ccc-favoris-page)) > .ccc-panel {
    pointer-events: auto;
  }

  .ccc-split:has(> :is(.ccc-recherche, .ccc-favoris-page)) .ccc-panel__bar {
    box-sizing: border-box;
    height: var(--ccc-bande);
  }

  /* La liste, plus légère que dans la recherche rapide : pas d'icône, un texte à la taille de la lecture, le titre
     de la page en avant, l'intertitre et le chemin en retrait, un filet fin sous le nom de chaque partie. Tout
     s'aligne sur le bord gauche du champ. */
  html:has(.ccc-recherche) .md-search-result__icon,
  .ccc-favoris-page .md-search-result__icon {
    display: none;
  }

  html:has(.ccc-recherche) .md-search-result__article,
  .ccc-favoris-page .md-search-result__article,
  html:has(.ccc-recherche) .ccc-search-parts,
  html:has(.ccc-recherche) .ccc-search-fix,
  html:has(.ccc-recherche) .ccc-search-syntax,
  html:has(.ccc-recherche) .md-search-result__meta {
    padding-left: 0.9rem;
    padding-right: 0.9rem;
  }

  html:has(.ccc-recherche) .ccc-search-group,
  .ccc-favoris-page .ccc-search-group {
    padding: 1.1rem 0.9rem 0.3rem;
    border-bottom-width: 1px;
  }

  html:has(.ccc-recherche) .ccc-search-path,
  .ccc-favoris-page .ccc-search-path {
    margin: 0;
    padding-top: 0.55rem;
    font-family: var(--md-text-font-family);
    font-size: var(--fs-small);
    color: var(--md-default-fg-color--light);
  }

  html:has(.ccc-recherche) .md-search-result__article h1,
  .ccc-favoris-page .md-search-result__article h1 {
    margin: 0.05rem 0 0.1rem;
    font-size: 0.92rem;
    font-weight: 500;
  }

  html:has(.ccc-recherche) .md-search-result__article h2,
  .ccc-favoris-page .md-search-result__article h2 {
    margin: 0.2rem 0 0.05rem;
    font-family: var(--md-text-font-family);
    font-size: var(--fs-small);
    font-weight: 600;
    color: var(--md-default-fg-color--light);
  }

  html:has(.ccc-recherche) .md-search-result__article > p,
  .ccc-favoris-page .md-search-result__article > p {
    margin: 0 0 0.55rem;
    font-size: 0.8rem;
    line-height: 1.6;
    color: var(--md-default-fg-color--light);
  }

  /* Le résultat qu'on lit dans le volet : un trait à gauche, dans la couleur des liens. */
  html:has(.ccc-split.has-panel > .ccc-recherche) .md-search-result .is-reading,
  .ccc-split.has-panel > .ccc-favoris-page .is-reading {
    background: color-mix(in srgb, var(--md-default-fg-color--lightest) 50%, transparent);
    box-shadow: inset 3px 0 var(--md-typeset-a-color);
  }

  /* Le thème range les boutons de l'en-tête pendant une recherche : ici elle est toujours ouverte, et les réglages
     (la taille du texte) doivent rester sous la main. */
  html:has(.ccc-recherche) [data-md-toggle="search"]:checked ~ .md-header .ccc-settings {
    max-width: none;
    opacity: 1;
  }
}

/* Une copie des tableaux, réservée à la recherche (hooks.py) */
.ccc-search-only {
  display: none;
}

/* Navigation latérale */

.md-nav {
  font-size: var(--fs-ui);
}

.md-nav--secondary .md-nav__title {
  box-shadow: none;
  font-weight: 700;
  font-size: var(--fs-small);
  color: var(--md-default-fg-color--light);
  padding-bottom: 0.9rem;
}

.md-nav--secondary .md-nav__list {
  border-left: 1px solid var(--gs-rule);
}

/* Table des matières : les grandes sections (I, II, III…) en gras, leurs intertitres en retrait dessous. */

.md-nav--secondary .md-nav__link {
  font-size: var(--fs-ui);
  font-weight: 600;
  line-height: 1.35;
  color: var(--md-default-fg-color);
  padding-block: 0.2rem;
  padding-left: 0.85rem;
  margin-left: -1px;
  border-left: 2px solid transparent;
  transition: color 120ms, border-color 120ms;
}

.md-nav--secondary .md-nav__link:hover {
  color: var(--gs-ink-strong);
}

.md-nav--secondary .md-nav__item {
  padding: 0;
}

.md-nav--secondary > .md-nav__list > .md-nav__item {
  margin-block: 0.25rem;
}

.md-nav--secondary .md-nav .md-nav__list {
  border-left: none;
  padding-left: 0.75rem;
  padding-bottom: 0.15rem;
}

.md-nav--secondary .md-nav .md-nav__link {
  font-size: calc(var(--fs-ui) * 0.92);
  font-weight: 400;
  color: var(--md-default-fg-color--light);
  padding-block: 0.12rem;
}

.md-nav--secondary .md-nav__link--active {
  color: var(--gs-ink-strong);
  font-weight: 700;
  border-left-color: var(--md-typeset-a-color);
}

/* Une prière, une hymne, un passage de l'Écriture en vers : ses lignes se suivent comme des vers, un peu en retrait,
   le long d'un filet à la couleur de la partie. Pas d'italique : dans le Catéchisme, il marque les « En bref ». */
.md-typeset .ccc-strophe {
  margin: 0 0 1.15em;
  padding: 0.15em 0 0.15em 1.1em;
  border-left: 2px solid color-mix(in srgb, var(--pc, var(--md-default-fg-color--lighter)) 45%, transparent);
}

/* Une ligne trop longue pour l'écran passe à la ligne en retrait : on voit où commence le vers suivant. */
.md-typeset .ccc-strophe p {
  margin: 0;
  padding-left: 1.2em;
  text-indent: -1.2em;
}

/* Une ligne qui ouvre une nouvelle strophe (« Loué sois-tu… ») garde ce découpage : elle suit une ligne vide
   dans le texte source, ce que la feuille de style ne voit pas ; les lignes restent donc simplement serrées. */
.md-typeset .ccc-strophe p + p {
  margin-top: 0.1em;
}

/* Deux textes en regard, ligne à ligne (les deux Credo) : pas de filet entre les lignes. */
/* Une prière en latin et en français, côte à côte (Adoro te, Supplices) : sans cadre, à la taille du texte,
   comme au Vatican. */
.md-typeset .ccc-strophe-table {
  margin: 0 0 1.15em;
}

/* Une cellule que le Vatican met en retrait (le latin du Supplices, n° 1383) : le filet des citations. */
.md-typeset .ccc-strophe-table table:not([class]) td.ccc-retrait {
  padding-left: 1.1em;
  border-left: 2px solid color-mix(in srgb, var(--pc, var(--md-default-fg-color--lighter)) 45%, transparent);
}

.md-typeset .ccc-strophe-table table:not([class]) {
  margin: 0;
  font-size: var(--fs-text);
  border: none;
  box-shadow: none;
}

.md-typeset .ccc-strophe-table table:not([class]) td {
  vertical-align: top;
  line-height: 1.6;
  border: none;
}

.md-typeset .ccc-vers table:not([class]) td {
  padding-block: 0.12em;
  border-top: none;
}

.md-typeset .ccc-vers table:not([class]) tr:first-child td {
  padding-top: 0.7em;
}

.md-typeset .ccc-vers table:not([class]) tr:last-child td {
  padding-bottom: 0.7em;
}

/* Le bouton ☰ n'existe que là où la barre n'a pas la place des liens du livre : sur téléphone et tablette en
   portrait, dans le livre comme devant la carte. Il ouvre le tiroir décrit plus bas. Devant la carte, au-delà, il n'y
   a pas de tiroir du tout : la carte prend toute la largeur. */
@media (min-width: 60em) {
  .md-header__button[for="__drawer"],
  .md-sidebar--primary.ccc-sidebar--home {
    display: none;
  }
}

/* La colonne de gauche (grand écran). Pendant la lecture, le plan de la partie où l'on est : la partie, ses sections
   et tous leurs chapitres, chacun sous le nom de son niveau. Un chapitre mène à son sommaire ; la partie et les
   sections, qui n'ont pas de page, à leur première page. Le chapitre en cours montre ses articles, celui qu'on lit
   repéré d'un trait. Rien à déplier. Devant le sommaire d'un chapitre, qui détaille déjà ses articles, elle
   s'arrête aux chapitres. */
.ccc-trail {
  padding: 0 0.6rem 1rem;
  font-size: var(--fs-ui);
  line-height: 1.3;
}

.ccc-trail a {
  display: block;
  color: var(--md-default-fg-color);
}

.ccc-trail a:hover {
  color: var(--md-typeset-a-color);
}

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

/* Le nom du niveau, au-dessus de son titre : un repère qu'on trouve quand on le cherche, plus discret que le
   titre, qui est ce qu'on lit. */
.ccc-trail__label {
  display: block;
  margin-bottom: 0.05rem;
  font-size: 0.58rem;
  font-weight: 600;
  color: color-mix(in srgb, var(--md-default-fg-color--light) 80%, transparent);
}

/* La partie */
.ccc-trail__d0 {
  margin-bottom: 0.2rem;
  font-size: 0.8rem;
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: -0.012em;
}

.ccc-trail__d0 a {
  color: var(--gs-ink-strong);
}

.ccc-trail__d0 .ccc-trail__label {
  font-size: var(--fs-small);
  color: var(--pc);
}

/* Une section, et ce qui se range directement sous la partie. Chaque section ouvre un groupe : de l'air et un
   filet au-dessus d'elle, ses chapitres serrés dessous. Son titre reste un cran sous celui de la partie. */
.ccc-trail__d1 {
  margin-top: 0.9rem;
  font-weight: 650;
}

.ccc-trail__d1.is-folder {
  margin-top: 0.75rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--gs-rule);
}

.ccc-trail__d1 a {
  color: var(--gs-ink-strong);
}

.ccc-trail__d1:not(.is-folder) {
  margin-top: 0.5rem;
  font-weight: 400;
}

/* Un chapitre : en retrait sous sa section. Celui où l'on est ressort. */
.ccc-trail__d2 {
  margin-top: 0.45rem;
  padding-left: 0.5rem;
}

.ccc-trail__d2.is-open {
  font-weight: 700;
}

.ccc-trail__d2.is-open a {
  color: var(--gs-ink-strong);
}

/* Les articles du chapitre en cours, le long d'un filet ; celui qu'on lit y est repéré. */
.ccc-trail__d3 {
  margin-left: 0.6rem;
  border-left: 1px solid var(--gs-rule);
}

.ccc-trail__d2 + .ccc-trail__d3 {
  margin-top: 0.35rem;
}

.ccc-trail__d3 + .ccc-trail__d2 {
  margin-top: 0.7rem;
}

.ccc-trail__d3 a {
  margin-left: -1px;
  padding: 0.22rem 0 0.22rem 0.7rem;
  color: var(--md-default-fg-color--light);
  border-left: 2px solid transparent;
}

.ccc-trail__d3 .ccc-trail__label {
  font-weight: 500;
  color: inherit;
  opacity: 0.75;
}

/* Plus bas encore (les articles d'un chapitre du Code) : le même filet, un cran plus à droite. */
.ccc-trail__d4,
.ccc-trail__d5 {
  margin-left: 1.2rem;
  border-left: 1px solid var(--gs-rule);
}

.ccc-trail__d5 {
  margin-left: 1.8rem;
}

.ccc-trail__d4 a,
.ccc-trail__d5 a {
  margin-left: -1px;
  padding: 0.22rem 0 0.22rem 0.7rem;
  color: var(--md-default-fg-color--light);
  border-left: 2px solid transparent;
}

.ccc-trail__d4 a[aria-current],
.ccc-trail__d5 a[aria-current] {
  color: var(--md-typeset-a-color);
  border-left-color: var(--md-typeset-a-color);
}

/* Le tableau des dix commandements : chaque ligne du Vatican sur une seule ligne, comme lui ; trop large pour
   l'écran, il glisse sur le côté plutôt que de casser les vers. L'en-tête, lui, passe à la ligne. */
.md-typeset .ccc-decalogue td {
  white-space: nowrap;
}

/* Sur un écran moyen (de 960 à 1220 px : tablette en paysage, fenêtre étroite), une seule colonne tient à côté du
   texte. C'est le plan qui la prend, à gauche : le thème n'y affiche que sa colonne de droite, qui reçoit donc un
   second exemplaire du plan (voir main.html) à la place de la table des matières. Une page sans plan (le Prologue,
   les Sigles) n'a pas de colonne du tout. */
.md-sidebar--secondary .ccc-trail {
  display: none;
}

@media (min-width: 60em) and (max-width: 76.24em) {
  .md-sidebar--secondary:not([hidden]) {
    order: 0;
  }

  .md-sidebar--secondary .ccc-trail {
    display: block;
  }

  .md-sidebar--secondary .md-nav--secondary,
  .md-sidebar--secondary:not(:has(.ccc-trail__list)) {
    display: none;
  }
}

/* Le tiroir du téléphone (bouton ☰) : d'abord les liens que la barre n'a pas la place d'afficher, le Prologue, les
   quatre parties et les Sigles, la partie où l'on est repérée ; puis, sous un filet, le plan de cette partie, le même
   que la colonne de gauche d'un grand écran, pour passer d'un chapitre ou d'un article à l'autre.
   Cette colonne-ci n'est un tiroir que sous 1220 px, et ne s'ouvre que sous 960 ; au-delà elle porte le plan. */
.ccc-drawer {
  display: none;
}

@media (max-width: 76.24em) {
  /* Le thème réserve à droite une marge faite pour sa colonne de 12 rem : le tiroir, plus large, la reprend. */
  .md-sidebar--primary .md-sidebar__inner {
    display: flex;
    flex-direction: column;
    padding-right: 0;
  }

  .md-sidebar--primary .ccc-drawer {
    order: -1;
    display: block;
    padding: 0 1rem 1rem;
    font-size: 0.75rem;
  }

  .md-sidebar--primary .ccc-trail:not(.ccc-drawer) {
    margin: 0 1rem;
    padding: 1rem 0 2rem;
    border-top: 1px solid var(--gs-rule);
  }

  /* Le thème prévoit que son menu défile de lui-même : ici c'est le tiroir qui défile. Il est aussi plus large, et
     sort de la droite, du côté de son bouton ☰. Fermé, il disparaît aussi pour le clavier (sans quoi la touche Tab
     passerait par ses liens hors de l'écran), une fois qu'il a fini de glisser. */
  [dir] .md-sidebar--primary {
    left: auto;
    right: -15rem;
    width: 15rem;
    visibility: hidden;
    transition:
      transform 0.25s cubic-bezier(0.4, 0, 0.2, 1),
      box-shadow 0.25s,
      visibility 0s 0.25s;
  }

  [dir] [data-md-toggle="drawer"]:checked ~ .md-container .md-sidebar--primary {
    visibility: visible;
    transform: translateX(-15rem);
    transition:
      transform 0.25s cubic-bezier(0.4, 0, 0.2, 1),
      box-shadow 0.25s;
  }

  .md-sidebar--primary .md-sidebar__scrollwrap {
    overflow-y: auto;
    overscroll-behavior: contain;
  }
}

.md-typeset .ccc-drawer__title,
.ccc-drawer__title {
  margin: 0 0 0.8rem;
  padding: 1rem 0 0.7rem;
  font-size: 0.8rem;
  font-weight: 700;
  line-height: 1.25;
  color: var(--gs-ink-strong);
  border-bottom: 1px solid var(--gs-rule);
}

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

.ccc-drawer__part > a,
.ccc-drawer__extra > a {
  padding-block: 0.55rem;
}

.ccc-trail .ccc-drawer__part > a {
  display: flex;
  align-items: baseline;
  font-size: 0.85rem;
  font-weight: 700;
  line-height: 1.25;
  color: var(--gs-ink-strong);
}

.ccc-drawer__part .ccc-bar__numeral {
  flex: none;
  width: 1.3rem;
  font-size: 0.7rem;
}

.ccc-drawer__extra > a {
  color: var(--md-default-fg-color--light);
}

/* La page qu'on lit, ou le sommaire qu'on regarde */
.ccc-trail a[aria-current] {
  font-weight: 700;
  color: var(--md-typeset-a-color);
}

.ccc-trail__d3 a[aria-current] {
  border-left-color: var(--md-typeset-a-color);
}

/* Page de lecture : surtitre, numéros de paragraphe, liens précédent / suivant */

.md-typeset .ccc-kicker {
  font-size: var(--fs-small);
  line-height: 1.5;
  color: var(--md-default-fg-color--light);
  margin-bottom: 0.9rem;
}

/* Un article qui s'ouvre avant son paragraphe 1 : son intitulé, en tête de la page, puis, plus bas, le rang du
   paragraphe au-dessus de son titre (hooks.py, article_opening). */
.md-typeset .ccc-article-titre {
  margin: 0 0 1.2rem;
  font-size: 1.35em;
  font-weight: 600;
  line-height: 1.3;
  color: var(--gs-ink-strong);
}

.md-typeset .ccc-kicker--suite {
  margin-top: 2.4rem;
  margin-bottom: 0.3rem;
}

/* Les titres d'une partie, d'une section ou d'un chapitre sans page, en tête de la première page qui les suit
   (hooks.py, opened_here) : le premier ne prend pas l'écart qui le sépare de ce qui précède. */
.md-typeset > .ccc-kicker--suite:first-child,
.md-typeset > .ccc-ouverture:first-child,
.md-typeset > :first-child > .ccc-kicker--suite:first-child {
  margin-top: 0;
}

.md-typeset .ccc-ouverture {
  margin-bottom: 0.6rem;
}

.ccc-kicker__sep {
  color: var(--md-default-fg-color--lighter);
}

.md-typeset p:has(> .ccc-num) {
  position: relative;
}

.md-typeset a.ccc-num {
  position: absolute;
  left: -3rem;
  width: 2.4rem;
  text-align: right;
  font-size: var(--fs-small);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  line-height: calc(1.7 * var(--fs-text)); /* la hauteur de ligne du texte : le numéro reste en face de sa première ligne */
  color: var(--md-default-fg-color--light);
  border-bottom: none;
  scroll-margin-top: 6rem;
}

.md-typeset a.ccc-num:hover {
  color: var(--md-typeset-a-color);
}

/* Le numéro se double-clique, ou se touche deux fois (les favoris) : sans zoom du navigateur. Le texte reste
   sélectionnable, numéros compris (carte.js empêche seulement le double-clic de sélectionner). */
.md-typeset a.ccc-num {
  touch-action: manipulation;
}

/* Un favori : un petit marque-page devant son numéro, dans la couleur des liens. Le même, plein ou vide, dans la
   liste des favoris. */
:root {
  --ccc-marque: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 15'%3E%3Cpath d='M0 0h10v15L5 11 0 15z'/%3E%3C/svg%3E");
  --ccc-marque-vide: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 15'%3E%3Cpath d='M.75.75h8.5v12.7L5 10.1.75 13.45z' fill='none' stroke='black' stroke-width='1.5'/%3E%3C/svg%3E");
}

.md-typeset a.ccc-num.is-favori {
  color: var(--md-typeset-a-color);
}

.md-typeset a.ccc-num.is-favori::before {
  content: "";
  display: inline-block;
  width: 0.5em;
  height: 0.75em;
  margin-right: 0.3em;
  vertical-align: -0.05em;
  margin-left: -0.8em; /* le numéro ne bouge pas, ni le texte qui le suit : le marque-page déborde dans la marge */
  background-color: currentColor;
  -webkit-mask: var(--ccc-marque) center / contain no-repeat;
  mask: var(--ccc-marque) center / contain no-repeat;
}

/* Dans la liste de ses favoris (leur page, ou « Favoris » dans la recherche), le même marque-page devant chaque
   numéro, à toucher pour le retirer : la ligne reste alors, pâlie, le marque-page vide, pour le remettre d'un autre
   toucher. Sa zone de toucher déborde autour de lui, sans pousser le texte. */
.ccc-favori-marque {
  display: inline-block;
  width: 0.6em;
  height: 0.9em;
  margin: -0.5em 0.4em -0.5em -0.4em;
  padding: 0.5em 0.4em;
  box-sizing: content-box;
  vertical-align: -0.15em;
  cursor: pointer;
  background-color: var(--md-typeset-a-color);
  background-clip: content-box;
  -webkit-mask: var(--ccc-marque) center / 0.6em 0.9em content-box no-repeat;
  mask: var(--ccc-marque) center / 0.6em 0.9em content-box no-repeat;
}

.ccc-favori-marque.is-retire {
  -webkit-mask-image: var(--ccc-marque-vide);
  mask-image: var(--ccc-marque-vide);
}

.ccc-search-bible__extract:has(> .ccc-favori-marque.is-retire) {
  opacity: 0.5;
}

/* Le paragraphe où mène un lien (« 2427 », un résultat de recherche) s'éclaire à l'arrivée, le temps qu'on le
   repère, puis redevient comme les autres. */
@keyframes ccc-arrive {
  0%,
  45% {
    background-color: var(--ccc-arrive);
    box-shadow: 0 0 0 0.4rem var(--ccc-arrive);
  }
  100% {
    background-color: transparent;
    box-shadow: 0 0 0 0.4rem transparent;
  }
}

.md-typeset p:has(> .ccc-num:target),
.md-typeset .ccc-panel__body p:has(> .ccc-num.is-target) {
  --ccc-arrive: color-mix(in srgb, var(--md-typeset-a-color) 12%, transparent);
  border-radius: 0.1rem;
  animation: ccc-arrive 3.5s ease-out forwards;
}

@media (prefers-reduced-motion: reduce) {
  .md-typeset p:has(> .ccc-num:target),
  .md-typeset .ccc-panel__body p:has(> .ccc-num.is-target) {
    animation-timing-function: steps(1, end);
  }
}

/* Dans le texte, la marge intérieure agrandit la zone qu'on touche sans déplacer les lignes. */
@media (max-width: 59.98em) {
  .md-typeset a.ccc-num {
    position: static;
    margin: 0 calc(0.35em - 0.3rem) 0 -0.3rem;
    padding: 0.45rem 0.3rem;
  }
}

/* Le titre d'une page quand son énoncé est écrit en toutes lettres à côté (les commandements) */
.ccc-pre {
  display: block;
  font-size: 0.78em;
  font-weight: 500;
  color: var(--md-default-fg-color--light);
}

/* Sur la carte, l'intitulé d'un article partagé en paragraphes, en tête de la case du premier. */
.ccc-pre--article {
  margin-bottom: 0.3em;
  font-weight: 600;
  color: var(--md-default-fg-color);
}

/* Le thème estompe encore les <small> : ce gris passerait sous le seuil de lisibilité. */
.md-typeset small.ccc-pre {
  opacity: 1;
}

.ccc-span {
  font-size: var(--fs-small);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  color: var(--md-default-fg-color--light);
  margin-left: 0.5em;
}

/* Le sommaire d'un chapitre (les autres niveaux n'en ont pas, la carte en tient lieu) : un cadre par article,
   à la couleur de la partie. En tête son rang (« Article 2 »), puis son titre, qui mène à la page, et ses numéros ;
   dessous, ses intertitres, qui mènent chacun à leur endroit dans la page. */
.ccc-children {
  font-size: var(--fs-ui);
  line-height: 1.35;
}

.md-typeset .ccc-children a {
  border-bottom: none;
  color: inherit;
}

.ccc-c-block {
  margin-top: 0.6rem;
  padding: 0.7rem 0.9rem;
  border: 1px solid color-mix(in srgb, var(--pc) 30%, transparent);
  border-radius: 0.4rem;
  background: color-mix(in srgb, var(--pc) 6%, transparent);
}

.md-typeset .ccc-c-level {
  margin: 0 0 0.15rem;
  font-size: var(--fs-small);
  font-weight: 700;
  color: var(--pc);
}

.md-typeset .ccc-c-title {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.6rem;
  margin: 0;
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.012em;
  color: var(--gs-ink-strong);
}

.md-typeset .ccc-c-title a:hover {
  color: var(--md-typeset-a-color);
}

.ccc-c-title .ccc-span {
  flex: none;
  margin-left: 0;
  font-weight: 400;
}

.md-typeset .ccc-children .ccc-c-headings {
  margin: 0.55rem 0 0;
  padding: 0.45rem 0 0;
  list-style: none;
  line-height: 1.4;
  border-top: 1px solid color-mix(in srgb, var(--pc) 22%, transparent);
}

.md-typeset .ccc-children .ccc-c-headings li {
  margin: 0;
  padding: 0.22em 0;
}

.md-typeset .ccc-children a.ccc-heading {
  color: var(--md-default-fg-color);
}

.md-typeset .ccc-children a.ccc-heading:hover {
  color: var(--md-typeset-a-color);
}

/* Sur écran tactile, chaque intertitre prend la hauteur d'un doigt. */
@media (max-width: 76.24em) {
  .md-typeset .ccc-children .ccc-c-headings li {
    padding: 0.45em 0;
  }
}

/* « Dans cette page » : les intertitres de l'article, repliés sous son titre. Seulement là où la table des
   matières de droite n'est pas affichée : sur petit écran, sur écran moyen où le plan prend sa colonne, et dans le
   volet, qui n'a pas de colonne de droite. */
@media (min-width: 76.25em) {
  .md-typeset details.ccc-toc:not(.ccc-panel__body *) {
    display: none;
  }
}

.md-typeset details.ccc-toc {
  margin: 0 0 1.4rem;
  padding: 0;
  font-size: var(--fs-ui);
  border: 1px solid var(--gs-rule);
  border-radius: 0.3rem;
  background: none;
  box-shadow: none;
}

.md-typeset details.ccc-toc > summary {
  margin: 0;
  padding: 0.5rem 1.8rem 0.5rem 0.7rem;
  font-weight: 700;
  background: none;
}

.md-typeset details.ccc-toc > summary::before {
  display: none;
}

.md-typeset details.ccc-toc > summary::after {
  top: 0.55rem;
  right: 0.4rem;
  width: 0.9rem;
  height: 0.9rem;
  color: var(--md-default-fg-color--light);
}

.md-typeset details.ccc-toc ul {
  margin: 0;
  padding: 0 0.7rem 0.5rem;
  list-style: none;
}

.md-typeset details.ccc-toc li {
  margin: 0;
  padding: 0.25rem 0;
  line-height: 1.35;
}

.md-typeset details.ccc-toc a {
  color: var(--md-default-fg-color);
  border-bottom: none;
}

/* Là où le script tourne, « Dans cette page » reçoit au-dessus de lui la table des matières du volet (carte.js) :
   une barre qui se colle sous l'en-tête pendant la lecture et dit sous quel intertitre on lit. Elle déborde des marges du texte
   pour couvrir l'écran d'un bord à l'autre. Les intertitres et numéros de paragraphe visés s'arrêtent sous elle.
   Tant que la liste dépliée dessous est à l'écran, la barre ferait doublon avec elle et avec le titre : elle ne prend
   pas de place (carte.js lui donne une marge du bas égale à moins sa hauteur) et ne se montre qu'une fois la liste passée. */
.ccc-pagetoc {
  display: none;
}

@media (max-width: 76.24em) {
  .md-typeset .ccc-pagetoc {
    position: sticky;
    top: calc(var(--ccc-header) / var(--ccc-scale, 1));
    z-index: 2;
    display: flex;
    margin: 0 -0.8rem 1.4rem;
    padding: 0.3rem 0.8rem 0.3rem 1.3rem;
    font-size: var(--fs-ui);
    line-height: 1.4;
    background: var(--md-default-bg-color);
    border-top: 1px solid var(--gs-rule);
    border-bottom: 1px solid var(--gs-rule);
  }

  .md-typeset .ccc-pagetoc:not(.is-shown) {
    visibility: hidden;
  }

  .md-typeset .ccc-pagetoc .ccc-panel__menu {
    left: 0.4rem;
    right: 0.4rem;
  }

  .md-typeset:has(.ccc-pagetoc) h2[id],
  .md-typeset:has(.ccc-pagetoc) :target,
  .md-typeset:has(.ccc-pagetoc) a.ccc-num {
    /* L'en-tête ne suit pas la taille du texte (--ccc-scale), la barre si : même calcul que son `top`. */
    --md-scroll-margin: calc(var(--ccc-header) / var(--ccc-scale, 1) + 3.8rem);
    scroll-margin-top: calc(var(--ccc-header) / var(--ccc-scale, 1) + 3.8rem);
  }

  /* Le titre de l'article, dans la barre, ramène en haut : « Retour en haut de la page » du thème ferait doublon,
     et il apparaîtrait par-dessus la barre (le thème le place en ligne, d'après la seule hauteur de l'en-tête). */
  body:has(.ccc-pagetoc) .md-top {
    display: none;
  }
}

/* L'énoncé en toutes lettres, sous le titre (les commandements) */
.md-typeset .ccc-enonce {
  margin-top: -0.6em;
  font-size: 1.1em;
  font-style: italic;
  color: var(--md-default-fg-color--light);
}

.ccc-pager {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 3.5rem;
  padding-top: 1.2rem;
  border-top: 1px solid var(--gs-rule);
}

.md-typeset .ccc-pager a {
  flex: 1 1 0;
  border-bottom: none;
  font-weight: 700;
  line-height: 1.4;
  color: var(--gs-ink-strong);
}

.md-typeset .ccc-pager a:hover {
  color: var(--md-typeset-a-color);
}

.ccc-pager span {
  display: block;
  font-size: var(--fs-small);
  font-weight: 400;
  color: var(--md-default-fg-color--light);
}

.ccc-pager__next {
  text-align: right;
  margin-left: auto;
}

/* La barre Carte / Livre, sous l'en-tête de toutes les pages. */

/* Le texte des menus, un peu plus grand ici : la barre est ce qu'on touche le plus souvent. */
.ccc-bar {
  font-size: calc(var(--fs-ui) * 1.05);
  background: var(--md-default-bg-color);
  border-bottom: 1px solid var(--gs-rule);
}

/* Entre deux prières (le Compendium), moins d'air qu'entre deux sections d'un article : elles sont courtes et se suivent. */
.md-typeset h2.ccc-priere {
  margin-top: 1.8em;
}

/* Les prières communes, repliées sous leur titre par carte.js (initPrayers) : une liste de titres, chacun le
   bouton qui ouvre sa prière, une flèche devant ; ouverte, la prière donne son texte français, puis son latin sous
   la mention « En latin ». Sans script, les titres restent des intertitres et tout est affiché. */
.md-typeset h2.ccc-priere:has(> .ccc-priere__bouton) {
  margin: 0;
  border-bottom: 1px solid var(--gs-rule);
}

.md-typeset h2.ccc-priere:has(> .ccc-priere__bouton) {
  display: flex;
  align-items: center;
}

/* Copier le lien d'une prière : au bout de la ligne, au survol, ou la prière ouverte (carte.js, shareButton). */
.md-typeset .ccc-priere__lien {
  position: relative;
  flex: none;
  display: inline-flex;
  padding: 0.35em;
  color: var(--md-default-fg-color--light);
  background: none;
  border: none;
  border-radius: 0.3em;
  cursor: pointer;
  opacity: 0;
}

.md-typeset .ccc-priere__lien svg {
  width: 0.9em;
  height: 0.9em;
  fill: currentcolor;
}

.md-typeset h2.ccc-priere:hover > .ccc-priere__lien,
.md-typeset .ccc-priere__lien:focus-visible,
.md-typeset .ccc-priere__bouton[aria-expanded="true"] + .ccc-priere__lien {
  opacity: 1;
}

.md-typeset .ccc-priere__lien:hover {
  color: var(--md-typeset-a-color);
}

.md-typeset .ccc-priere__bouton {
  display: flex;
  align-items: center;
  gap: 0.5em;
  flex: 1;
  padding: 0.5em 0;
  font: inherit;
  color: inherit;
  text-align: left;
  background: none;
  border: none;
  cursor: pointer;
}

.md-typeset .ccc-priere__bouton::before {
  content: "";
  flex: none;
  width: 0.45em;
  height: 0.45em;
  margin: 0 0.15em;
  border-right: 2px solid var(--md-default-fg-color--light);
  border-bottom: 2px solid var(--md-default-fg-color--light);
  transform: rotate(-45deg);
  transition: transform 0.15s ease;
}

.md-typeset .ccc-priere__bouton[aria-expanded="true"]::before {
  transform: rotate(45deg);
}

.md-typeset .ccc-priere__bouton:hover {
  color: var(--md-typeset-a-color);
}

.md-typeset h2.ccc-priere:has(> .ccc-priere__bouton) + .ccc-priere__texte {
  padding: 0.2em 0 1em 1.25em;
  border-bottom: 1px solid var(--gs-rule);
}

/* Repliée, la prière reste dans la page (« until-found » : la recherche du navigateur la trouve) mais sans hauteur :
   ni son retrait ni son trait ne doivent se voir. */
.md-typeset h2.ccc-priere:has(> .ccc-priere__bouton) + .ccc-priere__texte[hidden] {
  padding: 0;
  border: none;
}

@media (prefers-reduced-motion: reduce) {
  .md-typeset .ccc-priere__bouton::before {
    transition: none;
  }
}

/* Les deux voix d'une prière dialoguée, « D. » et « C. » : en gras et en couleur, comme les livres de prière
   impriment ces repères en rouge. */
.md-typeset .ccc-voix {
  font-style: normal;
  font-weight: 700;
  color: var(--md-typeset-a-color);
}

.md-typeset p.ccc-latin {
  margin: 1.4em 0 0.4em;
  font-family: var(--md-text-font-family);
  font-size: var(--fs-small);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--md-default-fg-color--light);
}

/* Sur grand écran, la colonne de droite allume l'entrée d'un intertitre quand son bord haut passe à 1,2 rem sous
   l'en-tête ; or un intertitre où l'on va (un clic dans cette colonne) atterrit sous la barre, à 5,8 rem, et
   l'entrée précédente restait allumée. Le bord haut de l'intertitre remonte donc de 1,7 rem (un retrait intérieur,
   compensé par la marge au-dessus et par la marge de défilement) : le titre ne bouge pas d'un pixel, mais le thème
   le voit arriver au bon moment. Seulement dans la page elle-même : le volet de la carte fait son propre calcul.
   Un paragraphe où l'on va (« #p2520 », a.ccc-num à 8,4 rem) laisse l'intertitre qui le précède juste au-dessus de
   ce seuil, visible sous la barre mais pas encore allumé. Le thème lit la position par offsetTop, qui suit `top`
   mais pas `transform` : l'intertitre reste à sa place à l'écran et compte 2,6 rem plus tôt, assez pour s'allumer
   dès que son texte atteint la ligne où se pose un tel paragraphe. */
@media (min-width: 76.25em) {
  .md-typeset h2[id]:not(.ccc-panel__body *),
  .md-typeset h3[id]:not(.ccc-panel__body *) {
    padding-top: 1.7rem;
    scroll-margin-top: 4.1rem;
    position: relative;
    top: -2.6rem;
    transform: translateY(2.6rem);
  }

  .md-typeset h2[id]:not(.ccc-panel__body *) {
    margin-top: calc(3em - 1.7rem); /* 3em à l'écran, comme sans le retrait */
  }

  .md-typeset h3[id]:not(.ccc-panel__body *) {
    margin-top: calc(2.2em - 1.7rem);
  }

  /* Les mêmes compensations pour les écarts particuliers : le premier intertitre, et les prières. */
  .md-typeset h1 + h2[id]:not(.ccc-panel__body *),
  .md-typeset .ccc-toc + h2[id]:not(.ccc-panel__body *),
  .md-typeset .ccc-enonce + h2[id]:not(.ccc-panel__body *) {
    margin-top: calc(1.6em - 1.7rem);
  }

  .md-typeset h2.ccc-priere[id]:not(.ccc-panel__body *) {
    margin-top: calc(1.8em - 1.7rem);
  }

  /* Une prière repliée (initPrayers) : les titres se suivent comme une liste, sans écart, et sans ce retrait : il
     recouvrirait la ligne du dessus, qu'on survolerait et cliquerait à travers lui. */
  .md-typeset h2.ccc-priere[id]:has(> .ccc-priere__bouton):not(.ccc-panel__body *) {
    margin-top: 0;
    padding-top: 0;
    scroll-margin-top: 5.8rem; /* sans le retrait, la marge de défilement le reprend : le titre se pose sous la barre */
    top: 0;
    transform: none;
  }

  .md-typeset h1 + h2.ccc-priere[id]:has(> .ccc-priere__bouton):not(.ccc-panel__body *),
  .md-typeset .ccc-toc + h2.ccc-priere[id]:has(> .ccc-priere__bouton):not(.ccc-panel__body *) {
    margin-top: 1em;
  }

  /* La marge basse de ce qui précède l'intertitre ne se fond plus dans la sienne (le retrait s'y oppose) : elle
     s'efface, et l'écart est exactement celui de l'intertitre, comme avant. */
  .md-typeset :has(+ h2[id]):not(.ccc-panel__body *),
  .md-typeset :has(+ h3[id]):not(.ccc-panel__body *),
  .md-typeset h1:has(+ .ccc-toc + h2[id]):not(.ccc-panel__body *),
  .md-typeset h1:has(+ .ccc-pagetoc + .ccc-toc + h2[id]):not(.ccc-panel__body *) {
    /* « Dans cette page » (.ccc-toc, et la barre que carte.js pose devant) est caché sur grand écran : le titre est
       alors ce qui précède le premier intertitre. */
    margin-bottom: 0;
  }

}

/* Sur grand écran, la barre reste collée sous l'en-tête pendant la lecture : le sommaire et les parties
   sont toujours à portée. Les colonnes latérales et les ancres se calent en dessous. */
@media (min-width: 76.25em) {
  .ccc-bar {
    position: sticky;
    top: calc(var(--ccc-header) / var(--ccc-scale, 1));
    z-index: 3;
    height: 2.35rem;
    box-sizing: border-box;
  }

  /* Le thème fixe ces deux valeurs en ligne, d'après la seule hauteur de l'en-tête. */
  .md-main .md-sidebar {
    top: calc(var(--ccc-header) / var(--ccc-scale, 1) + 2.35rem) !important;
  }

  /* « Retour en haut de la page » ne sert que sur petit écran : ici le menu, la barre et la table des matières
     restent sous les yeux, et la barre collée sous l'en-tête le recouvrirait. */
  .md-top {
    display: none;
  }

  .md-main .md-sidebar__scrollwrap {
    max-height: calc(100vh - var(--ccc-header) / var(--ccc-scale, 1) - 2.35rem - 2.4rem);
  }

  .md-typeset :target {
    --md-scroll-margin: 6rem;
  }

  .md-typeset a.ccc-num {
    scroll-margin-top: 8.4rem;
  }
}

.ccc-bar__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.3rem 1rem;
  padding: 0.25rem 0.8rem;
}

.ccc-switch {
  display: inline-flex;
  padding: 0.15rem;
  border: 1px solid var(--gs-rule);
  border-radius: 0.45rem;
}

/* L'endroit où l'on est (un simple texte) et le lien vers l'autre. */
.ccc-switch a,
.ccc-switch span {
  padding: 0.3rem 0.75rem;
  font: inherit;
  font-weight: 700;
  color: var(--md-default-fg-color--light);
  border-radius: 0.3rem;
  cursor: pointer;
}

.ccc-switch a:hover {
  color: var(--gs-ink-strong);
}

.ccc-switch a.is-active:hover,
.ccc-switch .is-active {
  color: var(--md-default-bg-color);
  background: var(--gs-ink-strong);
}

/* Les liens du livre : le Prologue, les quatre parties, les Sigles. Ils n'apparaissent que côté livre. */
.ccc-bar__links {
  display: flex;
  gap: 1rem;
  margin-left: 0.6rem;
}

[data-ccc-view="carte"] .ccc-bar--home .ccc-bar__links {
  display: none;
}

.ccc-bar__links a {
  color: var(--md-default-fg-color--light);
}

.ccc-bar__links a:hover,
.ccc-bar__links a.is-current {
  color: var(--gs-ink-strong);
}

/* Les quatre parties sont le corps du livre : en gras, précédées de leur numéro dans leur couleur.
   Le Prologue et les Sigles restent en retrait. La partie en cours est soulignée de sa couleur. */
.ccc-bar__links {
  align-items: center;
}

/* Le soulignement a son pendant invisible au-dessus : le texte reste centré sur le bouton Carte / Livre. */
.ccc-bar__links a.ccc-bar__part {
  display: inline-flex;
  align-items: baseline;
  gap: 0.35rem;
  padding-block: 0.1rem;
  font-weight: 700;
  color: var(--md-default-fg-color);
  border-block: 2px solid transparent;
}

.ccc-bar__links a.ccc-bar__part:hover,
.ccc-bar__links a.ccc-bar__part.is-current {
  color: var(--gs-ink-strong);
}

.ccc-bar__links a.ccc-bar__part.is-current {
  border-bottom-color: var(--pc);
}

.ccc-bar__numeral {
  font-size: var(--fs-small);
  font-weight: 800;
  color: var(--pc);
}

/* Là où la barre n'a pas la place des titres, chaque partie se réduit à son numéro, dans sa couleur (comme les
   boutons de la carte) : on change de partie d'un geste, sur tous les écrans. */
@media (max-width: 76.24em) {
  .ccc-bar__name {
    display: none;
  }

  .ccc-bar__links {
    gap: 0.2rem;
    margin-left: 0;
  }

  .ccc-bar__links a,
  .ccc-bar__links a.ccc-bar__part {
    padding: 0.45rem 0.55rem;
  }

  .ccc-bar__numeral {
    font-size: var(--fs-ui);
  }
}

/* Même repli là où l'écran est assez large mais le texte trop grand pour que la barre tienne sur une ligne :
   carte.js le constate et pose `is-compact` (voir initBarFit). */
.ccc-bar__inner.is-compact .ccc-bar__name {
  display: none;
}

.ccc-bar__inner.is-compact .ccc-bar__links {
  gap: 0.2rem;
  margin-left: 0;
}

.ccc-bar__inner.is-compact .ccc-bar__links a,
.ccc-bar__inner.is-compact .ccc-bar__links a.ccc-bar__part {
  padding: 0.3rem 0.55rem;
}

.ccc-bar__inner.is-compact .ccc-bar__numeral {
  font-size: var(--fs-ui);
}

/* Plus étroit encore (`is-tight`) : les autres pages que les parties passent dans le menu « Autres pages ». */
.ccc-bar__more {
  display: none;
  position: relative;
}

.ccc-bar__inner.is-tight .ccc-bar__extra {
  display: none;
}

.ccc-bar__inner.is-tight .ccc-bar__more {
  display: block;
}

.ccc-bar__more summary {
  padding: 0.3rem 0.55rem;
  color: var(--md-default-fg-color--light);
  white-space: nowrap;
  cursor: pointer;
}

.ccc-bar__more summary:hover,
.ccc-bar__more[open] summary {
  color: var(--gs-ink-strong);
}

.ccc-bar__more ul {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 4;
  min-width: 14rem;
  margin: 0.2rem 0 0;
  padding: 0.35rem 0;
  list-style: none;
  background: var(--md-default-bg-color);
  border: 1px solid var(--gs-rule);
  border-radius: 0.45rem;
  box-shadow: 0 0.3rem 1rem rgb(0 0 0 / 12%);
}

.ccc-bar__inner .ccc-bar__more li a {
  display: block;
  padding: 0.4rem 0.9rem;
}

/* Sur téléphone, ces liens sont dans le tiroir qu'ouvre le bouton ☰. */
@media (max-width: 59.98em) {
  .ccc-bar__links {
    display: none;
  }
}

/* Page de lecture : « Lire en volet » et « Situer sur la carte », à droite de la barre. */
.ccc-actions {
  display: flex;
  align-items: center;
  gap: 0.15rem;
  margin-left: auto;
}

.ccc-actions a {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.3rem 0.5rem;
  font-weight: 700;
  white-space: nowrap;
  color: var(--md-default-fg-color--light);
  border-radius: 0.3rem;
}

.ccc-actions a:hover {
  color: var(--gs-ink-strong);
  background: var(--md-default-fg-color--lightest);
}

.ccc-actions svg {
  width: 0.9rem;
  height: 0.9rem;
  fill: currentcolor;
}

/* Une seule des deux actions à la fois. Là où le volet a la place de s'ouvrir (ordinateur, tablette : au moins
   720 px de large et 560 de haut, le même seuil que dans carte.js), « Lire en volet » suffit : il montre aussi où
   l'on est sur la carte. Sur téléphone, debout ou couché, l'écran est trop petit pour un volet : reste « Situer ».
   Une page sans case sur la carte (les titres profonds du Code) n'a que « Situer », partout. */
@media (max-width: 44.98em), (max-height: 34.98em) {
  .ccc-actions .ccc-volet {
    display: none;
  }
}

@media (min-width: 45em) and (min-height: 35em) {
  .ccc-actions .ccc-volet ~ .ccc-locate {
    display: none;
  }
}

/* Le libellé entier tant que la barre ne porte pas les liens du livre ; à côté d'eux, l'abrégé. */
.ccc-actions__brief {
  display: none;
}

@media (min-width: 76.25em) {
  .ccc-actions__full {
    display: none;
  }

  .ccc-actions__brief {
    display: inline;
  }
}

/* Juste au-dessus du seuil où les liens du livre apparaissent, la barre est à l'étroit : on resserre
   pour que l'action de droite tienne sur la même ligne. */
@media (min-width: 76.25em) and (max-width: 82em) {
  .ccc-bar__inner {
    column-gap: 0.5rem;
  }

  .ccc-bar__links {
    gap: 0.75rem;
    margin-left: 0;
  }

  .ccc-actions a {
    padding-inline: 0.3rem;
  }
}

/* Là où la barre n'est pas collée sous l'en-tête (tablettes et téléphones), ses boutons prennent
   la hauteur d'un doigt. */
@media (max-width: 76.24em) {
  .ccc-switch a,
  .ccc-switch span,
  .ccc-actions a,
  .ccc-bar .ccc-tools button {
    padding-block: 0.55rem;
  }
}

/* Les boutons de la carte n'ont de sens que devant elle. */
.ccc-tools {
  display: none;
}

/* Accueil : la carte prend toute la fenêtre. */

.md-content .md-content__inner:has(#ccc-map) {
  max-width: none;
  margin: 0;
  padding: 0;
}

/* Le titre est déjà dans l'en-tête : on le garde pour les lecteurs d'écran seulement. */
.md-content__inner:has(#ccc-map) > h1 {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
}

[data-ccc-view="carte"] .md-main__inner:has(#ccc-map) {
  max-width: none;
  margin-top: 0;
}

.ccc-tools button {
  padding: 0.3rem 0.6rem;
  font: inherit;
  font-weight: 700;
  color: inherit;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 0.3rem;
  cursor: pointer;
}

/* Le survol n'a de sens qu'à la souris : au doigt, le navigateur le laisse sur le bouton touché, qui paraîtrait
   choisi alors qu'il n'a fait que déplacer la carte. */
@media (hover: hover) {
  .ccc-tools button:hover {
    background: var(--md-default-fg-color--lightest);
  }
}

/* Au doigt, c'est l'appui qui répond : le bouton fonce et se resserre, puis s'éteint en fondu. Un toucher bref ne
   dure que quelques millisecondes ; sans ce fondu, le retour passerait inaperçu. */
.ccc-tools button {
  transition:
    background-color 0.35s ease-out,
    transform 0.35s ease-out;
}

.ccc-tools button:active {
  background: var(--md-default-fg-color--lighter);
  transform: scale(0.94);
  transition: none;
}

/* Annonce passagère (« disponible hors ligne ») */
.ccc-toast {
  position: fixed;
  left: 50%;
  bottom: 1.2rem;
  z-index: 5;
  transform: translateX(-50%);
  padding: 0.5rem 0.9rem;
  font-size: var(--fs-ui);
  font-weight: 700;
  /* Un message long passe à la ligne plutôt que de sortir de l'écran d'un téléphone. */
  width: max-content;
  max-width: calc(100vw - 2rem);
  text-align: center;
  text-wrap: balance;
  color: var(--md-default-bg-color);
  background: var(--gs-ink-strong);
  border-radius: 1.2rem;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.22);
}

/* Sans réseau, les liens vers un autre site s'éteignent : gris, sans soulignement (voir initOfflineLinks dans carte.js). */
.ccc-hors-ligne .md-typeset a[href^="http"] {
  color: var(--md-default-fg-color--light);
  text-decoration: none;
  border-bottom-color: transparent;
  cursor: not-allowed;
}

/* Le logo de l'en-tête : la croix de l'icône, sans son fond. Ses bras ont les couleurs des parties du Catéchisme,
   les mêmes sur tous les sites, son cœur celle de l'en-tête (voir overrides/partials/logo.html). */
:root {
  --logo-p0: #2469cc;
  --logo-p1: #22386b;
  --logo-p2: #107f85;
  --logo-p3: #77706a;
}

/* Sur l'en-tête sombre, teinté par le livre (extra.entete), le bleu nuit des parties (#3a539b) ne se verrait
   presque plus : le logo prend un bleu plus clair que l'autre, aussi distinct de lui (3,9:1 au moins sur
   chaque en-tête). */
[data-md-color-scheme="slate"] {
  --logo-p1: #6380cc;
}

.ccc-logo__p0 { fill: var(--logo-p0); }
.ccc-logo__p1 { fill: var(--logo-p1); }
.ccc-logo__p2 { fill: var(--logo-p2); }
.ccc-logo__p3 { fill: var(--logo-p3); }
.ccc-logo__coeur { fill: currentcolor; }

/* La croix est plus étroite que haute : un peu plus grande que l'icône du thème, pour peser autant qu'elle. */
.md-header__button.md-logo svg.ccc-logo {
  height: 1.9rem;
}

/* Le bouton qui la porte se resserre, pour qu'elle tienne dans la hauteur de l'en-tête (--ccc-header). */
.md-header__button.md-logo {
  padding-block: 0.2rem;
}

/* Le thème la cache sous 1220 px, où le bouton ☰ prend sa place : elle reste, un peu plus petite, devant le nom du
   site, qu'elle accompagne. Le bouton ☰ passe à l'autre bout de l'en-tête, après la recherche et les réglages
   (`order: 2`, plus haut). */
@media screen and (max-width: 76.234375em) {
  .md-header__button[for="__drawer"] {
    order: 3;
  }

  .md-header__button.md-logo {
    display: block;
    margin-inline: 0.1rem 0;
    padding-inline: 0.2rem;
  }

  .md-header__button.md-logo svg.ccc-logo {
    height: 1.5rem;
  }

  [dir] .md-header__title {
    margin-left: 0.4rem;
  }
}

/* Pied de page : la mention de la source, en bas de chaque page. Pas devant la carte, qui occupe tout l'écran. */

.ccc-footer {
  margin-top: 2rem;
  padding: 0.7rem 0.8rem;
  font-size: var(--fs-small);
  line-height: 1.5;
  text-align: center;
  color: var(--md-default-fg-color--light);
  border-top: 1px solid var(--gs-rule);
}

.ccc-footer a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

[data-ccc-view="carte"] body:has(#ccc-map) .ccc-footer {
  display: none;
}

/* Accueil, affichage « carte » : une barre d'outils ancrée sous l'en-tête, la carte sur tout le reste. */

.ccc-map {
  display: none;
  /* Le texte de la carte suit la taille du texte choisie dans les réglages. Au zoom de lecture (celui où la carte
     se cale sur une partie ou sur une page, voir `unit` dans carte.js), 17 px de la carte valent le texte des
     pages (0,85 rem). Le titre d'un article s'affiche deux crans de réglage en dessous (17 / 1,06², soit 89 % du
     texte des pages), là où la feuille de style écrit 18 px : sur une carte, des titres un peu plus petits que
     le texte courant tiennent mieux dans leurs cases. Le réglage « Carte » déplace cette taille, vers le haut
     ou vers le bas ; et quand on recule, le texte grossit dans ses cases pour rester lisible (`--ccc-map-far`,
     que carte.js règle sur le zoom). */
  --ccc-map-scale: calc(15.13 / 18 * var(--ccc-scale, 1) * var(--ccc-map-adjust, 1) * var(--ccc-map-far, 1));
}

[data-ccc-view="carte"] .ccc-bar--home .ccc-tools {
  display: flex;
  align-items: center;
  gap: 0.15rem;
  min-width: 0;
}

.ccc-tools button {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  white-space: nowrap;
  border-color: transparent;
}

.ccc-tools button[class*="ccc-p"]::before {
  content: "";
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--pc);
}

/* Les parties, puis la vue d'ensemble derrière un filet. Le zoom est dans le panneau de réglages de l'en-tête. */
[data-ccc-view="carte"] .ccc-bar--home .ccc-tools {
  flex: 1;
}

/* Sur un écran tactile, on zoome en pinçant : les boutons − et + n'y servent à rien, et prendraient la place
   des parties (les sept livres du Code, sur un téléphone debout). */
@media (pointer: coarse) and (hover: none) {
  .ccc-tools .ccc-zoom {
    display: none;
  }
}

.ccc-fit svg {
  width: 0.85rem;
  height: 0.85rem;
  fill: none;
  stroke: currentcolor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.ccc-sep {
  flex: none;
  width: 1px;
  height: 1.1rem;
  margin: 0 0.3rem;
  background: var(--gs-rule);
}

[data-ccc-view="carte"] .ccc-map {
  display: block;
  position: relative;
  height: 80vh;
  overflow: hidden;
  touch-action: none;
  user-select: none;
  -webkit-touch-callout: none; /* pas de bulle « ouvrir le lien » à l'appui long, sur iPhone */
  cursor: grab;
  background-color: color-mix(in srgb, var(--md-default-fg-color) 3%, var(--md-default-bg-color));
}

.ccc-map.is-dragging {
  cursor: grabbing;
}

/* Sur un écran étroit, les boutons des parties passent sur une seconde ligne de la barre. Un téléphone tenu en
   paysage les garde sur la même ligne que « Carte | Livre » : la hauteur y manque, pas la largeur. */
@media (max-width: 44.98em), (max-width: 59.98em) and (min-height: 35em) {
  [data-ccc-view="carte"] .ccc-bar--home .ccc-tools {
    order: 3;
    flex-basis: 100%;
    justify-content: space-between;
  }
}

/* Sur un téléphone debout, les boutons se resserrent : les sept livres du Code et la vue d'ensemble tiennent sur
   la ligne. Le doigt garde toute la hauteur du bouton. */
@media (max-width: 44.98em) {
  [data-ccc-view="carte"] .ccc-bar--home .ccc-tools {
    gap: 0;
  }

  .ccc-bar--home .ccc-tools button {
    gap: 0.25rem;
    padding-inline: 0.3rem;
  }

  .ccc-bar--home .ccc-sep {
    margin: 0 0.1rem;
  }
}

@media (max-width: 21em) {
  .ccc-bar--home .ccc-tools button {
    gap: 0.15rem;
    padding-inline: 0.2rem;
  }
}

@media (min-width: 45em) and (max-height: 34.98em) {
  [data-ccc-view="carte"] .ccc-bar--home .ccc-tools {
    justify-content: space-between;
  }
}

/* Le panneau de lecture, à droite de la carte. Il s'ouvre à la largeur du texte ; la poignée sert à le réduire. */

.ccc-split {
  display: flex;
  align-items: stretch;
}

.ccc-split > .ccc-map {
  flex: 1 1 0;
  min-width: 0;
}

.ccc-handle,
.ccc-panel {
  display: none;
}

@media (min-width: 45em) and (min-height: 35em) {
  [data-ccc-view="carte"] .ccc-split.has-panel > .ccc-handle {
    display: block;
    position: relative;
    z-index: 3;
    flex: none;
    width: 11px;
    margin: 0 -5px;
    cursor: col-resize;
    touch-action: none;
  }

  [data-ccc-view="carte"] .ccc-split.has-panel > .ccc-panel {
    display: flex;
    flex: none;
    flex-direction: column;
    width: 42%;
    min-width: 0;
    background: var(--md-default-bg-color);
  }
}

.ccc-panel:focus {
  outline: none;
}

.ccc-handle::after {
  content: "";
  position: absolute;
  left: 5px;
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--gs-rule);
  transition: width 120ms, left 120ms, background-color 120ms;
}

.ccc-handle:hover::after,
.ccc-handle:focus-visible::after,
.ccc-split.is-resizing .ccc-handle::after {
  left: 4px;
  width: 3px;
  background: var(--md-typeset-a-color);
}

.ccc-handle:focus-visible {
  outline: none;
}

.ccc-split.is-resizing {
  cursor: col-resize;
  user-select: none;
}

.ccc-panel__bar {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.3rem 0.5rem 0.3rem 1.2rem;
  font-size: var(--fs-ui);
  border-bottom: 1px solid var(--gs-rule);
}

/* En tête de la barre, la table des matières de la page : un bouton qui dit sous quel intertitre on lit,
   coupé d'une ellipse s'il est long, et la liste des intertitres qu'il déroule sous la barre, sur sa largeur. */
.ccc-panel__toc {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

/* Le titre de la page, au-dessus de l'intertitre : c'est le repère de l'endroit où l'on lit, et il ramène en haut.
   À la taille des menus (pas en petit), avec une flèche qui dit qu'il se touche, et une zone de toucher assez haute
   pour le doigt. */
.ccc-panel__title {
  display: block;
  max-width: 100%;
  margin: 0 0 -0.1rem -0.5rem;
  padding: 0.45rem 0.5rem 0.35rem;
  overflow: hidden;
  text-overflow: ellipsis; /* un titre long se coupe, entier au survol (title) */
  font: inherit;
  font-size: var(--fs-ui);
  font-weight: 600;
  text-align: left;
  white-space: nowrap;
  color: var(--md-default-fg-color);
  border-radius: 0.3rem;
  cursor: pointer;
}

.ccc-panel__title::before {
  content: "↑";
  margin-right: 0.35rem;
  font-weight: 400;
  color: var(--md-default-fg-color--light);
}

.ccc-panel__title:hover {
  background: var(--md-default-fg-color--lightest);
}

.ccc-panel__toc[hidden],
.ccc-panel__menu[hidden] {
  display: none;
}

/* Tant que « Dans cette page » est déplié à l'écran, dans le texte (carte.js) : la barre garde sa hauteur. */
.ccc-panel__bar .ccc-panel__toc:not(.is-shown) {
  visibility: hidden;
}

.ccc-panel__here {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  max-width: 100%;
  margin-left: -0.5rem;
  padding: 0.3rem 0.5rem;
  font: inherit;
  font-weight: 700;
  color: var(--gs-ink-strong);
  border-radius: 0.3rem;
  cursor: pointer;
}

.ccc-panel__here:hover {
  background: var(--md-default-fg-color--lightest);
}

.ccc-panel__here span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ccc-panel__here::after {
  content: "";
  flex: none;
  width: 0.34rem;
  height: 0.34rem;
  border-right: 1.5px solid currentcolor;
  border-bottom: 1.5px solid currentcolor;
  opacity: 0.6;
  transform: translateY(-25%) rotate(45deg);
}

.ccc-panel__menu {
  position: absolute;
  top: calc(100% + 0.3rem);
  left: 0.6rem;
  right: 0.6rem;
  display: grid;
  max-height: 60vh;
  overflow: auto;
  padding: 0.3rem;
  background: var(--md-default-bg-color);
  border: 1px solid var(--gs-rule);
  border-radius: 0.5rem;
  box-shadow: 0 0.3rem 1rem rgba(0, 0, 0, 0.16);
}

.ccc-panel__menu button {
  padding: 0.45rem 0.6rem;
  font: inherit;
  line-height: 1.35;
  text-align: left;
  color: var(--md-default-fg-color);
  border-radius: 0.3rem;
  cursor: pointer;
}

.ccc-panel__menu button:hover {
  background: var(--md-default-fg-color--lightest);
}

.ccc-panel__menu button[aria-current] {
  font-weight: 700;
  color: var(--md-typeset-a-color);
}

.md-typeset .ccc-panel__bar a {
  flex: none;
  font-weight: 700;
  color: var(--md-default-fg-color--light);
  border-bottom: none;
}

.md-typeset .ccc-panel__bar a:hover {
  color: var(--md-typeset-a-color);
}

.ccc-panel__close {
  padding: 0.3rem 0.6rem;
  font: inherit;
  font-weight: 700;
  color: var(--md-default-fg-color--light);
  background: transparent;
  border: 1px solid transparent;
  border-radius: 0.3rem;
  cursor: pointer;
}

.ccc-panel__close:hover {
  color: var(--gs-ink-strong);
  background: var(--md-default-fg-color--lightest);
}

/* Le contenu défile dans le panneau sans jamais en fixer la hauteur : c'est la carte qui la donne. */
.ccc-panel__scroll {
  position: relative;
  flex: 1;
  min-height: 0;
  container-type: inline-size;
}

/* Ces marges et la longueur des lignes fixent la largeur du panneau qui loge le texte comme la page (carte.js). */
.ccc-panel__body {
  position: absolute;
  inset: 0;
  overflow: auto;
  scrollbar-gutter: stable; /* sa place, réservée d'avance : mesurable avant que le texte arrive (carte.js) */
  padding: 1.6rem 1.6rem 3rem 3.8rem;
}

.ccc-panel__body > * {
  max-width: var(--ccc-ligne);
}

/* Le fil d'Ariane dans le volet : il passe à la ligne au lieu de défiler, et échappe aux règles
   que le corps de texte applique aux listes et aux liens. */
.md-typeset .ccc-panel__body .md-path {
  margin: 0 0 1.4rem;
  padding: 0;
  font-size: var(--fs-small);
  overflow: visible;
}

.md-typeset .ccc-panel__body .md-path__list {
  display: flex;
  flex-wrap: wrap;
  margin: 0;
  padding: 0;
  list-style: none;
}

.md-typeset .ccc-panel__body .md-path__list .md-path__item {
  display: inline-flex;
  align-items: center;
  margin: 0;
  white-space: normal;
}

/* Le chevron suit l'élément au lieu de le précéder : une ligne du fil ne commence jamais par un chevron. */
.md-typeset .ccc-panel__body .md-path__item::before {
  display: none;
}

.md-typeset .ccc-panel__body .md-path__item:not(:last-child)::after {
  content: "";
  width: 0.8rem;
  height: 0.8rem;
  margin: 0 0.2rem;
  background-color: var(--md-default-fg-color--lighter);
  -webkit-mask-image: var(--md-path-icon);
  mask-image: var(--md-path-icon);
}

.md-typeset .ccc-panel__body .md-path__link {
  color: var(--md-default-fg-color--light);
  border-bottom: none;
}

.md-typeset .ccc-panel__body .md-path__link:hover {
  color: var(--md-accent-fg-color);
}

.md-typeset .ccc-panel__source {
  margin: 2rem 0 0;
  padding-top: 0.7rem;
  font-size: var(--fs-small);
  line-height: 1.5;
  text-align: center;
  color: var(--md-default-fg-color--light);
  border-top: 1px solid var(--gs-rule);
}

/* Panneau étroit : les numéros de paragraphe rentrent dans le texte. */
@container (max-width: 27rem) {
  .ccc-panel__body {
    padding-left: 1.2rem;
    padding-right: 1.2rem;
  }

  .md-typeset .ccc-panel__body a.ccc-num {
    position: static;
    margin-right: 0.35em;
  }
}

/* La carte elle-même : un arbre. Tout y est en pixels, c'est le zoom qui règle la taille à l'écran.
   La couleur ne porte qu'une information, la partie ; la hiérarchie passe par la taille et la graisse.
   Seul le bandeau d'une partie est en aplat de couleur : une section est un cadre, un chapitre un fond à peine
   teinté, un article une case blanche. La carte reste ainsi légère malgré sa centaine de cases.
   Les traits sont des bordures de pseudo-éléments : aucun calcul de position.
   Les tailles de texte suivent les réglages de l'en-tête ; les cases gardent leur largeur et s'allongent au besoin
   (une largeur qui suivrait aussi le réglage ferait grandir la carte d'un bloc, comme un zoom, sans rien changer
   à l'écran une fois la carte cadrée sur la largeur). */

.ccc-stage {
  position: absolute;
  left: 0;
  top: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: max-content;
  padding: 48px;
  transform-origin: 0 0;
  visibility: hidden;
  font-size: calc(18px * var(--ccc-map-scale, 1));
  line-height: 1.3;
  letter-spacing: -0.005em;
  /* Un titre qui passe à la ligne se coupe en lignes de longueurs voisines, plutôt que de laisser un mot seul. */
  text-wrap: balance;
}

.ccc-map.is-ready .ccc-stage {
  visibility: visible;
}

.ccc-stage.is-animated {
  transition: transform 420ms cubic-bezier(0.2, 0.7, 0.2, 1);
}

.md-typeset .ccc-stage a {
  color: var(--gs-ink-strong);
  border-bottom: none;
}

/* Les quatre parties côte à côte ; au-dessus de la première, alignée sur elle à gauche, le Prologue, qui les
   précède dans le livre. */

.ccc-t-extras {
  align-self: flex-start;
  display: flex;
  gap: 10px;
  margin-bottom: 26px;
}

.ccc-t-extras:empty {
  display: none;
}

.ccc-b-parts {
  display: flex;
  align-items: flex-start;
  gap: 56px;
}

.ccc-b-part {
  --trunk: color-mix(in srgb, var(--pc) 38%, var(--md-default-bg-color));
  position: relative;
}

/* Nœuds */

.md-typeset a.ccc-b-banner {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 22px;
  font-size: calc(34px * var(--ccc-map-scale, 1));
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.015em;
  color: #fff;
  background: var(--pc);
  border-radius: 18px;
}

.ccc-b-numeral {
  flex: none;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  font-size: calc(19px * var(--ccc-map-scale, 1));
  letter-spacing: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.22);
}

.md-typeset a.ccc-t-node {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  box-sizing: border-box;
  padding: 5px 11px;
  background: var(--md-default-bg-color);
  border: 1px solid color-mix(in srgb, var(--pc) 26%, transparent);
  border-radius: 9px;
}

/* Sur la carte, ce qui s'ouvre a un cadre et un chevron (voir plus bas) : un chapitre, un article. Une partie
   et une section sont des titres (un bandeau, un intitulé souligné) ; sans texte à elles, elles n'ont pas de
   chevron, et les toucher cadre seulement la carte sur elles. */
.md-typeset a.ccc-t-section {
  min-height: 48px;
  padding: 6px 4px 8px;
  font-size: calc(23px * var(--ccc-map-scale, 1));
  font-weight: 650;
  letter-spacing: -0.02em;
  background: transparent;
  border: 0;
  border-bottom: 2px solid color-mix(in srgb, var(--pc) 70%, transparent);
  border-radius: 0;
}

/* Un chapitre : un fond à peine teinté, et un filet de la couleur pleine sur son bord gauche, qui garde la partie
   reconnaissable là où la teinte diluée tourne au gris (le bleu nuit, le gris chaud). */
.md-typeset a.ccc-t-chapter {
  box-shadow: inset 4px 0 0 var(--pc);
  padding: 10px 12px 10px 16px;
  font-size: calc(19px * var(--ccc-map-scale, 1));
  font-weight: 600;
  background: color-mix(in srgb, var(--pc) 13%, var(--md-default-bg-color));
  border-color: transparent;
}

.md-typeset a.ccc-t-leaf,
.md-typeset a.ccc-t-article {
  width: 370px;
}

.md-typeset a.ccc-t-extra {
  padding: 12px 24px;
  font-size: calc(21px * var(--ccc-map-scale, 1));
  font-weight: 600;
  border-color: var(--md-default-fg-color--lighter);
  border-radius: 20px;
}

.md-typeset a.ccc-t-node:hover {
  border-color: var(--pc);
  box-shadow: 0 4px 14px color-mix(in srgb, var(--pc) 30%, transparent);
  z-index: 1;
}

.md-typeset a.ccc-t-section:hover {
  box-shadow: none;
}

.md-typeset a.ccc-b-banner:hover {
  filter: brightness(1.1);
}

.ccc-stage .ccc-pre {
  font-size: calc(13.5px * var(--ccc-map-scale, 1));
}

.ccc-stage .ccc-span {
  flex: none;
  margin: 0;
  font-size: calc(13.5px * var(--ccc-map-scale, 1));
  font-weight: 500;
  letter-spacing: 0;
}

/* Une partie, une section ou un chapitre : en tête de case, son rang dans les mots du Catéchisme (« Première
   section », « Chapitre troisième ») et, à droite, ses numéros ; le titre, dessous, a toute la largeur de la case.
   Sur une page (un article), le rang se lit en petit au-dessus du titre et les numéros restent à sa droite,
   alignés d'une case à l'autre. */
.md-typeset .ccc-stage a.ccc-t-section,
.md-typeset .ccc-stage a.ccc-t-chapter {
  display: block;
}

.ccc-t-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 3px;
  line-height: 1.3;
}

/* En minuscules, le rang prend un cran de plus qu'il n'en avait en capitales, pour rester lisible quand la carte
   est vue en entier. */
.ccc-t-level {
  font-size: calc(15px * var(--ccc-map-scale, 1));
  font-weight: 700;
  /* Un peu plus sombre que la partie : le bleu de la première, sur le fond teinté d'un chapitre, n'avait pas le
     contraste qu'il faut pour un texte de cette taille (4,4 au lieu de 4,5). */
  color: color-mix(in srgb, var(--pc) 88%, #000);
}

.ccc-b-text {
  flex: 1;
  min-width: 0;
}

/* Le chevron de ce qui s'ouvre : à la suite des numéros d'un chapitre, d'un article, d'une page isolée (le Prologue), ou
   d'une partie ou d'une section qui ont du texte, à la couleur de la partie. Un signe qui se voit sans survol,
   donc aussi au doigt. Une partie et une section sans texte, qui n'ouvrent rien, n'en ont pas. */
.ccc-t-chapter .ccc-span::after,
.ccc-t-article .ccc-span::after,
.ccc-t-leaf .ccc-span::after,
.ccc-t-extra .ccc-span::after,
.has-text .ccc-span::after {
  content: "";
  display: inline-block;
  width: 0.42em;
  height: 0.42em;
  margin-left: 0.7em;
  vertical-align: 0.1em;
  color: var(--pc);
  border-top: 1.5px solid currentcolor;
  border-right: 1.5px solid currentcolor;
  opacity: 0.55;
  transform: rotate(45deg);
}

/* Blanc plein : sur la sarcelle et le gris des parties III et IV, un blanc atténué n'a plus le contraste voulu. */
.ccc-b-banner .ccc-t-level,
.ccc-b-banner .ccc-span {
  color: #fff;
}

/* Sur le bandeau d'une partie, qui est de sa couleur, le chevron est blanc. */
.ccc-b-banner.has-text .ccc-span::after {
  color: #fff;
}

/* Tronc vertical : chaque enfant s'y raccroche par un coude. `--elbow` est la hauteur du raccord,
   `--gap` l'espace au-dessus de l'enfant (plus grand avant une section, pour bien les séparer). */

.ccc-t-children {
  display: flex;
  flex-direction: column;
  gap: 18px;
  margin: 18px 0 0 18px;
}

.ccc-t-item {
  --elbow: 50%;
  --gap: 18px;
  position: relative;
  padding-left: 24px;
}

.ccc-t-item.has-children {
  --elbow: 24px;
}

.ccc-t-item.has-children:not(:first-child) {
  --gap: 34px;
  margin-top: 16px;
}

.ccc-t-item::before {
  content: "";
  position: absolute;
  left: 0;
  top: calc(-1 * var(--gap));
  bottom: 0;
  border-left: 1.5px solid var(--trunk);
}

.ccc-t-item::after {
  content: "";
  position: absolute;
  left: 0;
  top: var(--elbow);
  width: 24px;
  border-top: 1.5px solid var(--trunk);
}

/* Le trait d'un enfant descend jusqu'au suivant : il doit couvrir l'espace que celui-ci réserve. */
.ccc-t-item:has(+ .ccc-t-item.has-children)::before {
  bottom: -16px;
}

.ccc-t-item:last-child::before {
  bottom: auto;
  width: 24px;
  height: calc(var(--elbow) + var(--gap));
  box-sizing: border-box;
  border-bottom: 1.5px solid var(--trunk);
  border-bottom-left-radius: 12px;
}

.ccc-t-item:last-child::after {
  display: none;
}

/* Un chapitre et ses articles, à sa droite */

.ccc-t-branch {
  display: grid;
  grid-template-columns: 305px auto;
  align-items: center;
}

.ccc-t-leaves {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-left: 34px;
}

.ccc-t-chapter::after,
.ccc-t-article::before,
.ccc-t-article::after {
  content: "";
  position: absolute;
  box-sizing: border-box;
}

.ccc-t-chapter::after {
  left: 100%;
  top: 50%;
  width: 17px;
  border-top: 1.5px solid var(--trunk);
}

/* Un chapitre sans article n'a rien à sa droite : pas de trait qui en parte. */
.ccc-t-chapter:only-child::after {
  display: none;
}

.ccc-t-article::before {
  left: -18px;
  top: -3px;
  bottom: -3px;
  border-left: 1.5px solid var(--trunk);
}

.ccc-t-article::after {
  left: -18px;
  top: 50%;
  width: 17px;
  border-top: 1.5px solid var(--trunk);
}

.ccc-t-article:first-child::before {
  top: 50%;
  width: 17px;
  border-top: 1.5px solid var(--trunk);
  border-top-left-radius: 10px;
}

.ccc-t-article:last-child::before {
  bottom: 50%;
  width: 17px;
  border-bottom: 1.5px solid var(--trunk);
  border-bottom-left-radius: 10px;
}

.ccc-t-article:first-child::after,
.ccc-t-article:last-child::after {
  display: none;
}

.ccc-t-article:only-child::before {
  display: none;
}

.ccc-t-article:only-child::after {
  display: block;
  left: -35px;
  width: 35px;
}

/* Une case désignée (ouverte dans le volet, ou retrouvée par « Situer ») a son cadre : le filet d'un chapitre s'efface. */
.md-typeset .ccc-stage a.ccc-t-chapter.is-open,
.md-typeset .ccc-stage a.ccc-t-chapter.is-located {
  box-shadow: none;
}

/* La page ouverte dans le panneau de lecture */

.md-typeset .ccc-stage a.is-open {
  z-index: 2;
  outline: 4px solid var(--pc);
  outline-offset: 4px;
}

/* La page d'où l'on vient, après « Situer sur la carte » */

.md-typeset .ccc-stage a.is-located {
  z-index: 2;
  outline: 4px solid var(--pc);
  outline-offset: 4px;
  animation: ccc-located 1.6s ease-out 0.9s 3;
  transition: outline-color 0.6s;
}

/* Au bout de quelques secondes le cadre s'efface (carte.js), sauf si la page est ouverte dans le volet. */
.md-typeset .ccc-stage a.is-located.is-leaving:not(.is-open) {
  outline-color: transparent;
}

@keyframes ccc-located {
  from {
    box-shadow: 0 0 0 0 color-mix(in srgb, var(--pc) 60%, transparent);
  }
  to {
    box-shadow: 0 0 0 44px transparent;
  }
}

/* Téléphone : ni le nom du site, ni le titre de la page qui le remplace quand on défile, ne tiennent
   sur une ligne de l'en-tête. Plutôt que de les couper, on les laisse passer sur deux lignes
   (trois sur les plus petits écrans), dans une taille qui suit la largeur. */
@media (max-width: 40em) {
  .md-header__topic {
    height: 100%;
    align-items: center;
    white-space: normal;
  }

  .md-header__topic .md-ellipsis {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    font-size: clamp(0.55rem, 3.4vw, 0.9rem);
    line-height: 1.12;
    white-space: normal;
    text-wrap: balance;
  }
}

/* La carte sur téléphone et sur tablette en portrait (le même seuil que COLUMNS dans carte.js) : chaque partie
   devient une colonne étroite. Les articles ne partent plus à droite de leur chapitre, ils se rangent dessous,
   en retrait le long d'un trait ; les titres passent à la ligne dans les cases. Une partie tient ainsi dans
   l'écran à une taille lisible, sans défiler de côté. */
@media (max-width: 59.98em) {
  .ccc-b-part {
    width: 440px;
  }

  /* Les pages isolées, s'il y en a, restent au-dessus de la première partie, celle sur laquelle on arrive. */
  .ccc-t-extras {
    align-self: flex-start;
  }

  .md-typeset a.ccc-b-banner {
    font-size: calc(28px * var(--ccc-map-scale, 1));
  }

  .md-typeset a.ccc-t-leaf,
  .md-typeset a.ccc-t-article {
    width: auto;
  }

  .ccc-t-item {
    --elbow: 24px;
  }

  .ccc-t-branch {
    display: block;
  }

  .ccc-t-leaves {
    margin: 8px 0 0 18px;
  }

  .ccc-t-chapter::after {
    display: none;
  }

  /* Le trait descend du chapitre le long de ses articles ; chacun s'y raccroche par un tiret, le dernier par un coude. */
  .ccc-t-article:first-child::before,
  .ccc-t-article:only-child::before {
    display: block;
    top: -8px;
    bottom: -3px;
    width: auto;
    border-top: 0;
    border-radius: 0;
  }

  .ccc-t-article:first-child::after {
    display: block;
  }

  .ccc-t-article:last-child::before {
    bottom: 50%;
    width: 17px;
    border-bottom: 1.5px solid var(--trunk);
    border-bottom-left-radius: 10px;
  }

  .ccc-t-article:last-child::after {
    display: none;
  }
}

/* Sur téléphone, la colonne prend la largeur de l'écran au zoom de lecture (0,9 : la taille de base y est de
   18 px, voir `unit` dans carte.js), à 12 px de chaque bord. Sur un écran étroit, les titres passent à la ligne
   au lieu de rapetisser : le texte d'un article y garde la même taille, quel que soit l'écran. */
@media screen and (max-width: 44.98em), screen and (max-width: 59.98em) and (max-height: 34.98em) and (pointer: coarse) {
  .ccc-b-part {
    width: min(440px, calc((100vw - 24px) / 0.9));
  }
}

/* Qui a demandé moins de mouvement garde le cadre autour de la case désignée, sans l'onde qui en part. */
@media (prefers-reduced-motion: reduce) {
  .md-typeset .ccc-stage a.is-located {
    animation: none;
  }
}

/* « Retour en haut de la page », sur petit écran : toujours sur une seule ligne. */
.md-top {
  white-space: nowrap;
}

/* En sombre, les teintes légères de la carte se perdraient sur le fond : traits, cadres et fonds y sont plus marqués. */
[data-md-color-scheme="slate"] .ccc-b-part {
  --trunk: color-mix(in srgb, var(--pc) 60%, var(--md-default-bg-color));
}

[data-md-color-scheme="slate"] .md-typeset a.ccc-t-node {
  border-color: color-mix(in srgb, var(--pc) 50%, transparent);
}

[data-md-color-scheme="slate"] .md-typeset a.ccc-t-section {
  border-color: color-mix(in srgb, var(--pc) 70%, white);
}

[data-md-color-scheme="slate"] .md-typeset a.ccc-t-chapter {
  background: color-mix(in srgb, var(--pc) 30%, var(--md-default-bg-color));
  border-color: transparent;
}

/* En sombre, les couleurs des parties sont trop denses pour du texte : on les éclaircit là où elles en colorent. */
[data-md-color-scheme="slate"] .ccc-bar__numeral,
[data-md-color-scheme="slate"] .ccc-t-node .ccc-t-level,
[data-md-color-scheme="slate"] .ccc-t-node .ccc-span::after,
[data-md-color-scheme="slate"] .md-typeset .ccc-c-level,
[data-md-color-scheme="slate"] .ccc-trail__d0 .ccc-trail__label {
  color: color-mix(in srgb, var(--pc) 55%, white);
}

/* Compendium : sous chaque question, les numéros du Catéchisme qu'elle résume, en petit, chacun menant à son
   paragraphe sur le site du Catéchisme. */
.md-typeset .ccc-refs {
  display: block;
  margin-top: 0.15rem;
  font-size: var(--fs-small);
  font-weight: 400;
  color: var(--md-default-fg-color--light);
}

.md-typeset .ccc-refs a {
  color: inherit;
  font-variant-numeric: tabular-nums;
  border-bottom: 1px solid var(--md-default-fg-color--lightest);
}

.md-typeset .ccc-refs a:hover {
  color: var(--md-typeset-a-color);
}

/* Le nom court du site remplace le nom entier sur un écran étroit (overrides/partials/header.html). Un téléphone
   tenu en paysage a la place du nom entier. */
.md-header .ccc-title-short {
  display: none;
}

@media (max-width: 44.98em) {
  .md-header .ccc-title-long {
    display: none;
  }

  .md-header .ccc-title-short {
    display: inline;
  }
}

/* La bibliothèque, dans l'en-tête, avant la recherche : une icône, comme la roue des réglages. Les favoris, à côté,
   seulement pour qui en a (carte.js). */
.md-header .ccc-favoris-entete[hidden] {
  display: none;
}

.md-header .ccc-favoris-entete,
.md-header .ccc-bibliotheque {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* La bibliothèque : un catalogue, chaque texte sous une couverture dessinée en CSS (aucune image importée), ses
   dates et son étendue dessous. Deux rayons : en vedette, le Catéchisme et le Compendium ; plus bas et plus petits,
   les « Autres documents ». */
.md-typeset .ccc-biblio__intro {
  max-width: 32rem;
  color: var(--md-default-fg-color--light);
}

.md-typeset .ccc-biblio {
  /* Les livres, centrés dans la page, debout côte à côte, séparés de --ecart. */
  --ecart: clamp(0.9rem, 3.4vw, 3rem);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-end;
  row-gap: 2.6rem;
  /* La rangée peut dépasser la colonne du texte, centrée sur elle, jusqu'aux bords de l'écran : les livres ne passent
     à la ligne que sur un écran trop étroit pour eux. */
  position: relative;
  left: 50%;
  width: max-content;
  max-width: calc(100vw - 2rem);
  margin: max(2rem, 10vh) 0 0;
  transform: translateX(-50%);
}

/* Les livres grandissent avec l'écran, entre la taille d'un téléphone et celle d'un grand écran, sans dépasser sa
   hauteur : les deux rayons tiennent d'un coup d'œil sur un écran d'ordinateur portable. Leur titre suit
   (les unités cqi : une fraction de la largeur du livre), pour que « CATHOLIQUE » tienne toujours sur une ligne.
   Chaque livre a l'épaisseur de son texte (--epaisseur, de 0 à 1, que hooks.py calcule au build en comptant ses
   mots), qui se lit à la largeur de son dos : le Catéchisme est le plus épais, le Compendium le plus mince. */
.md-typeset .ccc-biblio > a.ccc-biblio__oeuvre {
  --dos: calc((0.2 + 0.8 * var(--epaisseur, 0.5)) * clamp(2.2rem, 4.8vw, 4.6rem));
  box-sizing: content-box; /* la largeur est celle du livre : le titre se mesure sur elle (cqi) */
  /* Assez petits sur une tablette pour que les trois tiennent sur une rangée. */
  width: clamp(5rem, min(13vw, 22vh), 14rem);
  padding: 0 calc(var(--ecart) / 2) 1rem calc(var(--ecart) / 2 + var(--dos) * 0.5);
  container-type: inline-size;
  perspective: 55rem;
  perspective-origin: 50% 35%;
}

.md-typeset a.ccc-biblio__oeuvre {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  color: var(--gs-ink-strong);
  border-bottom: none; /* pas le soulignement des liens */
  text-decoration: none;
}

/* La couverture : le plat d'un livre relié, debout, un peu tourné, si bien qu'on voit son dos à gauche,
   comme sur un rayonnage. Au survol, il pivote pour se présenter de face, comme pris en main. */
.md-typeset .ccc-biblio__couverture {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 0.1rem;
  aspect-ratio: 2 / 3;
  padding: 8cqi 3cqi 8cqi 7cqi;
  border-radius: 0.6cqi 2cqi 2cqi 0.6cqi;
  /* Le mors : le léger creux du plat le long du dos, et l'ombre du livre. */
  box-shadow:
    inset 4cqi 0 0 -2.6cqi rgba(0, 0, 0, 0.07),
    1.2rem 0.5rem 1.2rem -0.6rem rgba(0, 0, 0, 0.22); /* une ombre est sombre, en mode clair comme en mode sombre */
  font-family: var(--md-text-font-family);
  font-size: 9.6cqi;
  line-height: 1.15;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  /* La couleur du livre (--couverture, son encre --encre), la même en mode clair et en mode sombre : c'est un
     objet. Par défaut, le fond des pages de vatican.va ; un livre publié avec sa propre couleur garde la sienne. */
  color: var(--encre);
  background: var(--couverture);
  border: 1px solid rgba(0, 0, 0, 0.12);
  transform-style: preserve-3d;
  transform-origin: 0 50%;
  transform: rotateY(30deg);
  transition: transform 0.45s ease;
}

/* Le dos : replié à angle droit le long du bord gauche du plat, un ton plus foncé que lui, arrondi par un jour au
   milieu et une ombre sur ses bords. */
.md-typeset .ccc-biblio__couverture::before {
  content: "";
  position: absolute;
  top: -1px;
  bottom: -1px;
  right: 100%;
  width: var(--dos);
  transform-origin: 100% 50%;
  transform: rotateY(-90deg);
  background:
    linear-gradient(90deg, rgba(0, 0, 0, 0.08), rgba(0, 0, 0, 0) 35%, rgba(255, 255, 255, 0.14) 55%, rgba(0, 0, 0, 0) 70%, rgba(0, 0, 0, 0.1)),
    linear-gradient(rgba(0, 0, 0, 0.12), rgba(0, 0, 0, 0.12)),
    var(--couverture);
  border: 1px solid rgba(0, 0, 0, 0.12);
  border-radius: 0.6cqi 0 0 0.6cqi;
}

.md-typeset a.ccc-biblio__oeuvre {
  --couverture: #e8e2d1; /* le fond des pages de vatican.va */
  --encre: #3d3424;
}

/* Le Catéchisme : bleu, comme ses éditions imprimées ; le Compendium, son petit frère, d'un bleu acier plus clair,
   peu saturé : un bleu ciel rappellerait celui de l'Immaculée Conception, couleur liturgique par privilège. */
.md-typeset a.ccc-biblio__oeuvre--cec {
  --couverture: #1f3f7a;
  --encre: #ffffff;
}

.md-typeset a.ccc-biblio__oeuvre--compendium {
  --couverture: #b4c3d3;
  --encre: #142c55;
}

/* Le Compendium de la doctrine sociale : le vert de son édition imprimée, titre en blanc. */
.md-typeset a.ccc-biblio__oeuvre--doctrine-sociale {
  --couverture: #2d5a45;
  --encre: #ffffff;
}

/* Le second rayon : son nom, puis des livres plus petits que ceux du premier. */
.md-typeset h2.ccc-biblio__rayon {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin: 3.5rem 0 0;
  font-size: var(--fs-small);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--md-default-fg-color--light);
}

.md-typeset h2.ccc-biblio__rayon::before,
.md-typeset h2.ccc-biblio__rayon::after {
  content: "";
  flex: 1;
  border-top: 1px solid var(--gs-rule);
}

.md-typeset .ccc-biblio.ccc-biblio--autres {
  margin-top: 2rem;
}

.md-typeset .ccc-biblio--autres > a.ccc-biblio__oeuvre {
  width: clamp(4rem, min(9.5vw, 16vh), 10.5rem);
}

.md-typeset a.ccc-biblio__oeuvre:hover .ccc-biblio__couverture,
.md-typeset a.ccc-biblio__oeuvre:focus-visible .ccc-biblio__couverture {
  transform: rotateY(4deg) translateY(-0.3rem);
}

@media (prefers-reduced-motion: reduce) {
  .md-typeset .ccc-biblio__couverture {
    transition: none;
  }
}

/* Sur un téléphone, deux livres par rangée, centrés, assez grands pour se lire. */
@media (max-width: 37.48em) {
  .md-typeset .ccc-biblio {
    row-gap: 2rem;
    left: auto;
    width: auto;
    max-width: none;
    margin-top: 1.5rem;
    transform: none;
  }

  .md-typeset .ccc-biblio > a.ccc-biblio__oeuvre {
    width: 7rem;
    --ecart: 1.25rem;
  }

  .md-typeset .ccc-biblio--autres > a.ccc-biblio__oeuvre {
    width: 6rem;
  }
}

.md-typeset .ccc-biblio__couverture small {
  font-size: 0.85em;
  font-style: italic;
  text-transform: none;
  letter-spacing: 0;
  opacity: 0.85;
}




/* Sur la page Bibliothèque, les livres suffisent : le titre ne reste que pour les lecteurs d'écran. */
.md-typeset:has(> .ccc-biblio) > h1 {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}


/* Quand carte.js a posé la barre « Dans cette page » collée sous l'en-tête (téléphone, tablette), ou dans la barre
   du volet, le dépliant écrit par hooks.py reste déplié, pour voir la page d'un coup d'œil en arrivant ; son titre,
   que la barre porte déjà, s'efface. Sans script, il reste entier, et sert seul. */
.md-typeset .ccc-pagetoc + details.ccc-toc > summary,
.md-typeset .ccc-panel__body details.ccc-toc > summary {
  display: none;
}

.md-typeset .ccc-pagetoc + details.ccc-toc ul,
.md-typeset .ccc-panel__body details.ccc-toc ul {
  padding-top: 0.5rem;
}

/* Code et Doctrine sociale */

/* Code : la marque des canons modifiés, comme sur vatican.va, un « n » en exposant en gras italique. */
.md-typeset .ccc-n {
  font-weight: 700;
  font-style: italic;
}

/* Doctrine sociale : la citation en exergue d'une partie, à droite et en lignes courtes, comme sur vatican.va. */
.md-typeset .ccc-exergue {
  margin: 0 0 2em auto;
  text-align: right;
}

/* Doctrine sociale : les lignes que vatican.va centre ou met à droite dans la lettre et la présentation. */
.md-typeset p.ccc-centre {
  text-align: center;
}

.md-typeset p.ccc-droite {
  text-align: right;
}