/*
 * Les grands caractères : la couche que posent les documents faits pour être
 * lus vite, de loin, par quelqu'un qui n'a pas le produit sous les yeux.
 *
 * Elle se charge APRÈS `commun.css`, dont elle garde tout : le teal du rail,
 * le papier blanc, l'accent unique, Figtree, et le format à l'italienne. Ce
 * qu'elle change tient en une règle : une idée par page, et des caractères
 * assez grands pour qu'une page se lise en dix secondes.
 *
 * Deux formes de page, et pas une de plus :
 *
 *   .page.grande    un écran, son titre, une phrase. La capture prend toute
 *                   la hauteur qui reste.
 *   .page.pleine.simple   pas de capture : des cartes, des étapes numérotées,
 *                   un tableau. Le texte occupe la feuille.
 *
 * Le bandeau à deux colonnes de `commun.css` n'est pas repris : à cette taille
 * de caractères, une colonne de précision à droite du titre ne tient plus, et
 * la couper en deux rendrait les deux moitiés illisibles.
 */

/* ------------------------------------------------------------- couverture */

.couverture h1 {
  font-size: 46pt;
  max-width: 20ch;
}

.couverture .chapeau {
  font-size: 15pt;
  max-width: 44ch;
}

/* Un sommaire de huit entrées en petits caractères contredirait le document :
   six entrées, en trois colonnes de deux, à une taille qui se lit.
   `commun.css` en déclare quatre et remplit colonne par colonne ; trois
   colonnes pour six entrées occupent la largeur au lieu d'en laisser un quart
   vide. */
.couverture .sommaire {
  grid-template-columns: repeat(3, 1fr);
  column-gap: 14mm;
}

.couverture .sommaire p {
  font-size: 10.5pt;
  padding: 2.6mm 0;
}

.couverture .sommaire p b {
  font-size: 12pt;
}

.ours {
  font-size: 10pt;
}

/* La valeur unique que la couverture doit imposer : un mot de passe, une
   adresse. Elle remplace le sommaire quand le document n'a qu'une chose à
   faire retenir. Pas d'encart `code` ici : sa boîte crème ne se lit pas sur
   le fond profond de la couverture. */
.couverture .cle {
  margin: 14mm 0 0;
  font-size: 44pt;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--rail-clair);
}

.couverture .cle-legende {
  margin: 2mm 0 0;
  font-size: 14pt;
  color: var(--rail-doux);
  max-width: 46ch;
}

/* Sans sommaire, c'est la clé qui occupe la page : elle prend la place que le
   sommaire rendait, et l'ours redescend en pied. Le `margin-top: auto` du
   sommaire disparaissait avec lui, et tout le bloc restait collé en haut. */
.couverture.sans-sommaire .sommaire {
  display: none;
}

.couverture.sans-sommaire .cle {
  margin-top: auto;
  font-size: 56pt;
}

.couverture.sans-sommaire .ours {
  margin-top: 12mm;
  border-top: 1px solid #4a8279;
  padding-top: 4mm;
}

/* ------------------------------------------------- la page d'une capture */

.page.grande {
  display: flex;
  flex-direction: column;
}

.page.grande h2 {
  font-size: 30pt;
  line-height: 1.08;
  margin: 0 0 4mm;
  max-width: 26ch;
}

/* La phrase sous le titre : une seule, et large, parce qu'elle porte à elle
   seule ce que la capture ne dit pas. */
.page.grande .dit {
  margin: 0;
  font-size: 15pt;
  line-height: 1.42;
  color: var(--gris);
  max-width: 62ch;
}

/* Le rang de l'étape, à la taille du titre qu'il précède. */
.page.grande .etape {
  gap: 4mm;
  margin-bottom: 4mm;
}

.page.grande .etape .rang {
  width: 11mm;
  height: 11mm;
  font-size: 14pt;
  transform: translateY(1.4mm);
}

.page.grande .etape h2 {
  margin: 0;
}

.page.grande .visuel {
  margin-top: 7mm;
}

/* --------------------------------------------- la page sans capture */

.simple h2 {
  font-size: 30pt;
  line-height: 1.08;
  margin-bottom: 5mm;
}

.simple .chapeau-page {
  font-size: 16pt;
  line-height: 1.45;
  max-width: 50ch;
  color: var(--encre);
}

.simple h3 {
  font-size: 15pt;
  margin: 9mm 0 3mm;
}

/* Des étapes numérotées, en grand. */
.pas {
  margin: 7mm 0 0;
}

.pas .ligne {
  display: grid;
  grid-template-columns: 14mm 1fr;
  gap: 5mm;
  align-items: baseline;
  padding: 4mm 0;
  border-bottom: 1px solid var(--trait);
  break-inside: avoid;
}

.pas .ligne > span {
  font-size: 26pt;
  font-weight: 600;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}

.pas b {
  display: block;
  font-size: 17pt;
  font-weight: 600;
  margin: 0 0 1.5mm;
}

.pas p {
  margin: 0;
  font-size: 13pt;
  line-height: 1.4;
  color: var(--gris);
  max-width: 70ch;
}

/* Les étapes d'un parcours, nommées et numérotées, sur deux colonnes.
   Douze lignes pleine largeur déborderaient la feuille ; le nom seul suffit,
   puisque chaque étape a ensuite sa page et son écran. */
.parcours {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  column-gap: 16mm;
  margin: 7mm 0 0;
}

/* Six lignes par colonne, remplies de haut en bas : une numérotation qui se
   lit de gauche à droite ferait passer l'étape 2 en face de l'étape 1. */
.parcours.douze {
  grid-template-rows: repeat(6, auto);
  grid-auto-flow: column;
}

.parcours > div {
  display: grid;
  grid-template-columns: 12mm 1fr;
  gap: 4mm;
  align-items: baseline;
  padding: 2.9mm 0;
  border-bottom: 1px solid var(--trait);
}

.parcours span {
  font-size: 19pt;
  font-weight: 600;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}

.parcours b {
  font-size: 15pt;
  font-weight: 600;
}

/* Deux ou trois cartes au plus sur une page. */
.cartes {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0 9mm;
  margin: 8mm 0 0;
}

.cartes.deux {
  grid-template-columns: repeat(2, 1fr);
  gap: 0 14mm;
}

.cartes > div {
  border-top: 1px solid var(--encre);
  padding: 5mm 0 0;
  break-inside: avoid;
}

.cartes .titre {
  font-size: 20pt;
  font-weight: 600;
  margin: 0 0 3mm;
  line-height: 1.12;
}

.cartes .texte {
  font-size: 13pt;
  line-height: 1.42;
  color: var(--encre);
  margin: 0;
}

.cartes .petit {
  font-size: 11.5pt;
  color: var(--gris);
  margin: 2.5mm 0 0;
}

/* Un paragraphe courant sous un intertitre, quand ni carte ni tableau ne
   convient. */
.simple .para {
  margin: 0;
  font-size: 13pt;
  line-height: 1.45;
  color: var(--gris);
  max-width: 74ch;
}

/* Un tableau se lit à cette taille, ou il ne sert à rien. */
.simple table {
  font-size: 12.5pt;
  margin-top: 6mm;
}

.simple th,
.simple td {
  padding: 3mm 6mm 3mm 0;
}

.simple thead th {
  font-size: 10pt;
}

/* Les encarts, à l'échelle du reste. */
.simple .note,
.page.grande .note {
  margin-top: 8mm;
  padding: 5mm 6mm;
}

.simple .note b,
.page.grande .note b {
  font-size: 14pt;
  margin-bottom: 1.5mm;
}

.simple .note p,
.page.grande .note p {
  font-size: 13pt;
  line-height: 1.42;
}

.simple .rappel,
.page.grande .rappel {
  margin-top: 7mm;
  padding: 6mm 7mm;
}

.simple .rappel b,
.page.grande .rappel b {
  font-size: 15pt;
  margin-bottom: 1.8mm;
}

.simple .rappel p,
.page.grande .rappel p {
  font-size: 13pt;
  line-height: 1.42;
}

/* Une valeur à retenir, ou à taper. */
.valeur-seule {
  margin: 9mm 0 0;
}

.valeur-seule .etiquette {
  margin: 0 0 2mm;
  font-size: 11pt;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--gris);
}

/* Vingt et un points : la plus grande taille à laquelle une commande d'une
   cinquantaine de caractères tient encore sur une ligne. Coupée en deux, elle
   se recopie de travers. */
.valeur-seule .valeur {
  margin: 0;
  font-family: "SF Mono", Menlo, Consolas, monospace;
  font-size: 21pt;
  font-weight: 600;
  color: var(--accent);
  word-break: break-all;
}

.simple code,
.page.grande code {
  font-size: 0.82em;
}