/* 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");
}

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

[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.85rem;
  --fs-ui: 0.75rem;
  --fs-small: 0.6rem;
}

/* Aucune de ces couleurs n'est une couleur liturgique (rouge, vert, violet, rose, blanc, or, noir) :
   elles ne servent qu'à distinguer les parties, sans symbolique.
   Chacune est assez foncée pour porter du texte blanc, ou pour s'écrire sur fond blanc (4,5:1 au moins).
   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 mêmes teintes sont reprises dans l'icône (docs/assets/icone*.png et icone.svg). */
/* Une couleur par partie du Catéchisme, partagée par la carte, le sommaire et les onglets */

:root {
  --pc: var(--md-default-fg-color--light);
}

:root {
  --p0: #2469cc; /* bleu */
  --p1: #22386b; /* bleu nuit */
  --p2: #107f85; /* sarcelle */
  --p3: #77706a; /* gris chaud */
}

/* Sur fond sombre, le bleu nuit se perdrait : il y est éclairci, en restant le plus sombre des deux bleus.
   L'icône fait de même sur son fond sombre (#3a539b dans les PNG, et dans le SVG selon le thème du système). */
[data-md-color-scheme="slate"] {
  --p1: #3a539b;
}

.ccc-p0 { --pc: var(--p0); }
.ccc-p1 { --pc: var(--p1); }
.ccc-p2 { --pc: var(--p2); }
.ccc-p3 { --pc: var(--p3); }

/* 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 13,6 px sur un portable, 15,3 px au-delà de 1600 px et 17 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 : le texte y part
   du palier du dessus, 15,3 px. 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));
  }
}

@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;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  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: 68rem;
}

/* 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(30rem, 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(30rem, 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(33.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.38rem;
  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: 0.98rem;
  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: 0.9rem;
  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;
}

/* Ancres de section : discrètes, au survol seulement */

.md-typeset h1 .headerlink {
  display: none;
}

.md-typeset .headerlink {
  font-weight: 400;
  color: var(--md-default-fg-color--lighter);
  margin-left: 0.4em;
}

/* 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.headerlink,
.md-typeset a.footnote-ref,
.md-typeset .footnote-backref,
.md-typeset .md-button {
  border-bottom: none;
}

/* 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 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;
  }
}

/* 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;
  }
}

/* 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;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  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;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  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);
  letter-spacing: 0.06em;
  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;
}

/* 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;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--md-default-fg-color--light);
  margin-bottom: 0.9rem;
}

.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 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);
}

/* 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;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  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, et sur écran moyen où le plan prend sa colonne. */
.md-typeset details.ccc-toc {
  display: none;
}

@media (max-width: 76.24em) {
  .md-typeset details.ccc-toc {
    display: block;
    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 » devient 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. */
.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 .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;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  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);
}

/* 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);
}

/* 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 ». */
@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-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, son cœur celle
   de l'en-tête (voir overrides/partials/logo.html). */
.ccc-logo__p0 { fill: var(--p0); }
.ccc-logo__p1 { fill: var(--p1); }
.ccc-logo__p2 { fill: var(--p2); }
.ccc-logo__p3 { fill: var(--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;
}

.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;
}

@media (max-width: 59.98em) {
  /* Les boutons des parties passent sur une seconde ligne de la barre. */
  [data-ccc-view="carte"] .ccc-bar--home .ccc-tools {
    order: 3;
    flex-basis: 100%;
    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, en petit au-dessus de l'intertitre : il ramène en haut. */
.ccc-panel__title {
  max-width: 100%;
  margin: 0 0 -0.2rem -0.5rem;
  padding: 0.15rem 0.5rem 0;
  overflow: hidden;
  font: inherit;
  font-size: var(--fs-small);
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--md-default-fg-color--light);
  border-radius: 0.3rem;
  cursor: pointer;
}

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

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

.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 les 30 rem du texte fixent la largeur maximale du panneau (voir carte.js). */
.ccc-panel__body {
  position: absolute;
  inset: 0;
  overflow: auto;
  padding: 1.6rem 1.6rem 3rem 3.8rem;
}

.ccc-panel__body > * {
  max-width: 30rem;
}

/* 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;
}

.ccc-t-level {
  font-size: calc(13.5px * var(--ccc-map-scale, 1));
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  /* 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);
}