/*
 * Le monde visuel du parcours d'inscription, porté sur le papier : le teal
 * profond du rail, le crème du formulaire, l'accent unique, et Figtree.
 *
 * La page reste blanche. Teintée du crème du produit, elle avalait la moitié
 * droite de chaque capture, qui porte exactement la même couleur : la plaque
 * perdait son bord et l'écran avait l'air collé. Le crème est donc réservé aux
 * encarts, où il ne touche aucune capture.
 * Les valeurs viennent de frontend/DESIGN.md, section 2.
 *
 * Format à l'italienne, et la page coupée comme le produit : une colonne de
 * lecture à gauche, la capture à droite. Les écrans sont en 16/10 ; à la
 * française ils laissaient la moitié de la feuille vide et tombaient sous la
 * taille où le texte de l'interface se lit.
 */

@font-face {
  font-family: "Figtree";
  src: url("fonts/figtree-latin-wght-normal.woff2") format("woff2");
  font-weight: 100 900;
  font-display: block;
}

:root {
  --rail: #04544b;
  --rail-doux: #b4e3da;
  --rail-clair: #ffffff;
  --papier: #ffffff;
  --creme: #faf4ec;
  --encre: #16211f;
  --gris: #5c6b66;
  --accent: #007163;
  --trait: #e6ddd0;
  --ambre: #92400e;
  --ambre-fond: #fdf3e3;

  --hauteur-utile: 181mm;
}

@page {
  size: A4 landscape;
  margin: 14mm 17mm 15mm;
  background: var(--papier);
  @bottom-right {
    content: counter(page);
    font-family: "Figtree", sans-serif;
    font-size: 7.5pt;
    font-variant-numeric: tabular-nums;
    color: #5f6d68;
  }
  /* Le titre courant est écrit par chaque document : une boîte de marge ne
     lit ni attr() ni une propriété personnalisée. */
}

@page couverture {
  margin: 0;
  @bottom-right {
    content: none;
  }
}

* {
  box-sizing: border-box;
}

html {
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
  background: var(--papier);
}

body {
  margin: 0;
  background: var(--papier);
  color: var(--encre);
  font:
    400 9.6pt / 1.55 "Figtree",
    -apple-system,
    "Helvetica Neue",
    Arial,
    sans-serif;
  font-kerning: normal;
  -webkit-hyphens: none;
  hyphens: none;
}

p {
  margin: 0 0 3mm;
}
strong {
  font-weight: 600;
}
.num {
  font-variant-numeric: tabular-nums;
}

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

.couverture {
  page: couverture;
  width: 297mm;
  height: 210mm;
  padding: 18mm 20mm 16mm;
  background: var(--rail);
  color: var(--rail-clair);
  display: flex;
  flex-direction: column;
  break-after: page;
}

.marque {
  font-size: 12pt;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.couverture h1 {
  margin: 22mm 0 0;
  font-size: 38pt;
  line-height: 1.04;
  font-weight: 600;
  letter-spacing: -0.03em;
  max-width: 24ch;
  text-wrap: balance;
}

.couverture .chapeau {
  margin: 7mm 0 0;
  max-width: 52ch;
  font-size: 11.5pt;
  line-height: 1.5;
  color: var(--rail-doux);
}

.sommaire {
  margin-top: auto;
  border-top: 1px solid #4a8279;
  padding-top: 4mm;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(2, auto);
  grid-auto-flow: column;
  column-gap: 9mm;
}

.sommaire p {
  margin: 0;
  padding: 2mm 0;
  border-bottom: 1px solid #2a6a60;
  font-size: 8.2pt;
  line-height: 1.4;
  color: var(--rail-doux);
}

.sommaire p b {
  display: block;
  color: var(--rail-clair);
  font-weight: 560;
  font-size: 9.2pt;
}

.ours {
  margin-top: 5mm;
  display: flex;
  justify-content: space-between;
  gap: 10mm;
  font-size: 8pt;
  color: #96c9c0;
}

/* -------------------------------------------------------------------- pages */

.page {
  break-before: page;
  height: var(--hauteur-utile);
  display: flex;
  flex-direction: column;
}

/* Une page sans capture : le texte prend toute la largeur, et sa hauteur est un
   plancher plutôt qu'un plafond, pour qu'un paragraphe de trop déborde à la vue
   au lieu d'être rogné en silence. */
.page.pleine {
  display: block;
  height: auto;
  min-height: var(--hauteur-utile);
}

/* Le bandeau de lecture : ce que la page dit à gauche, la précision à droite.
   La capture prend ensuite toute la largeur, parce qu'un écran réduit au tiers
   de la feuille ne se lit plus. */
.entete {
  display: grid;
  grid-template-columns: 118mm 1fr;
  column-gap: 14mm;
  align-items: start;
}

.entete > div > :first-child {
  margin-top: 0;
}
.entete > div > :last-child {
  margin-bottom: 0;
}

h2 {
  margin: 0 0 2.5mm;
  font-size: 19pt;
  line-height: 1.14;
  font-weight: 600;
  letter-spacing: -0.025em;
  text-wrap: balance;
}

h3 {
  margin: 6mm 0 2mm;
  font-size: 10.6pt;
  font-weight: 600;
  letter-spacing: -0.008em;
  break-after: avoid;
}

.chapeau-page {
  margin: 0 0 4mm;
  font-size: 10.4pt;
  line-height: 1.5;
  color: var(--gris);
  text-wrap: balance;
}

.pleine .chapeau-page {
  max-width: 62ch;
}

/* Le rang de l'étape : le produit les numérote, le lecteur les compte. */
.etape {
  display: flex;
  align-items: baseline;
  gap: 2.6mm;
  margin-bottom: 2.5mm;
}

.etape .rang {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 6.4mm;
  height: 6.4mm;
  border-radius: 50%;
  background: var(--accent);
  color: #ffffff;
  font-size: 8pt;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  flex: none;
  transform: translateY(0.7mm);
}

.etape h2 {
  margin: 0;
}

/* ------------------------------------------------------------------- figures */

/* La capture prend toute la hauteur que le bandeau lui laisse, quelle que
   soit la longueur du texte au dessus. */
.visuel {
  flex: 1;
  min-height: 0;
  margin-top: 6mm;
  display: flex;
  align-items: center;
  justify-content: center;
}

figure {
  margin: 0;
  height: 100%;
  display: flex;
  align-items: center;
}

figure img {
  display: block;
  height: 100%;
  width: auto;
  max-width: 100%;
  border: 1px solid #b9ae9b;
  border-radius: 8px;
}

/* La légende vit dans le bandeau, à droite du titre : sous une capture haute
   de 146 mm, elle tomberait hors de la page. */
.legende {
  margin: 0;
  font-size: 9pt;
  line-height: 1.5;
  color: var(--gris);
  padding-top: 3mm;
  border-top: 1px solid var(--trait);
}

.triptyque {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8mm;
  align-items: end;
}

.triptyque figure {
  height: auto;
  display: block;
}
.triptyque figure img {
  height: auto;
  max-height: 128mm;
  margin: 0 auto;
  border-radius: 7px;
}

.triptyque figcaption {
  margin-top: 2.4mm;
  font-size: 8pt;
  text-align: center;
}

/* --------------------------------------------------------------------- listes */

.liste-etapes {
  border-top: 1px solid var(--encre);
  margin: 3mm 0 0;
}

.liste-etapes .ligne {
  display: grid;
  grid-template-columns: 6mm 42mm 1fr;
  gap: 4mm;
  align-items: baseline;
  /* 1,8 mm plutôt que 2,2 : six lignes suivies d'un tableau et d'un encart
     dépassaient la feuille de trois millimètres, et l'encart sautait seul sur
     la page suivante. `preflight.mjs` compte les feuilles et le dit. */
  padding: 1.8mm 0;
  border-bottom: 1px solid var(--trait);
  break-inside: avoid;
}

.liste-etapes .ligne > span:first-child {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  color: var(--accent);
}

.liste-etapes b {
  font-weight: 600;
  font-size: 10pt;
}
.liste-etapes p {
  margin: 0;
  color: #2b3835;
}

/* La suite des moments, une ligne qui ne se rompt pas. */
.suite {
  margin: 4mm 0 0;
  padding-left: 6mm;
  border-left: 1px solid var(--trait);
}

.suite .moment {
  position: relative;
  padding: 0 0 4mm;
  break-inside: avoid;
}

.suite .moment::before {
  content: "";
  position: absolute;
  left: -7.1mm;
  top: 1.6mm;
  width: 2.2mm;
  height: 2.2mm;
  border-radius: 50%;
  background: var(--accent);
}

.suite .moment b {
  display: block;
  font-weight: 600;
  font-size: 10pt;
}
.suite .moment p {
  margin: 0.5mm 0 0;
  color: var(--gris);
}

table {
  width: 100%;
  border-collapse: collapse;
  margin: 3mm 0 0;
  font-size: 9pt;
}

th,
td {
  text-align: left;
  vertical-align: top;
  padding: 2mm 5mm 2mm 0;
  border-bottom: 1px solid var(--trait);
}

thead th {
  border-bottom: 1px solid var(--encre);
  font-size: 7.8pt;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gris);
  font-weight: 600;
}

td:last-child,
th:last-child {
  padding-right: 0;
}

.grille-deux {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 11mm;
  margin: 3mm 0 0;
}

.grille-quatre {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0 9mm;
  margin: 3mm 0 0;
}

.grille-deux div,
.grille-quatre div {
  padding: 2.8mm 0;
  border-top: 1px solid var(--trait);
  break-inside: avoid;
}

.grille-deux b,
.grille-quatre b {
  display: block;
  font-weight: 600;
  margin-bottom: 0.8mm;
}
.grille-deux p,
.grille-quatre p {
  margin: 0;
  color: var(--gris);
}

/* --------------------------------------------------------------------- notes */

.note {
  margin: 5mm 0 0;
  padding: 3.2mm 4mm;
  border: 1px solid var(--trait);
  border-radius: 10px;
  background: var(--creme);
  break-inside: avoid;
}

.note b {
  display: block;
  font-weight: 600;
  margin-bottom: 1mm;
}
.note p {
  margin: 0;
  color: #2b3835;
}

.note.attention {
  border-color: #e7cfa6;
  background: var(--ambre-fond);
}
.note.attention b,
.note.attention p {
  color: var(--ambre);
}

.rappel {
  margin: 5mm 0 0;
  padding: 4mm 4.5mm;
  border-radius: 12px;
  background: var(--rail);
  color: var(--rail-clair);
  break-inside: avoid;
}

.rappel b {
  display: block;
  font-weight: 600;
  margin-bottom: 1.2mm;
}
.rappel p {
  margin: 0;
  color: var(--rail-doux);
}

/* Sur le teal, un fond blanc de code trouerait le bloc. */
.rappel code {
  background: #1a6259;
  border-color: #3f7d74;
  color: var(--rail-clair);
}

code {
  font-family: "SF Mono", Menlo, monospace;
  font-size: 0.86em;
  background: var(--creme);
  border: 1px solid var(--trait);
  border-radius: 4px;
  padding: 0.6mm 1.6mm;
}

/* Dans le bandeau de tête, un encart rempli se lit comme une boîte garée à
   côté du titre. Il y prend la même forme que la légende : un filet, un
   intertitre, du texte. Les encarts des pages sans capture gardent leur fond. */
.entete .note {
  margin: 0 0 4mm;
  padding: 3mm 0 0;
  border: none;
  border-top: 1px solid var(--trait);
  border-radius: 0;
  background: none;
}

.entete .note:last-child {
  margin-bottom: 0;
}
.entete .note b {
  font-size: 9.4pt;
}
.entete .note p {
  font-size: 9pt;
  line-height: 1.5;
  color: var(--gris);
}

.entete .note.attention {
  border-top-color: #d9b98a;
  background: none;
}

.entete .note.attention b {
  color: var(--ambre);
}
.entete .note.attention p {
  color: var(--ambre);
}

/* Le filet du haut suffit à séparer les deux blocs : deux filets côte à côte
   feraient un tableau que personne n'a demandé. */
.entete .note + .legende {
  border-top: none;
  padding-top: 0;
  margin-top: 1mm;
}

/* ------------------------------------------------------------------- écran */

/* Le même document lu dans un navigateur. Les boîtes de marge de `@page`
   n'existent qu'à l'impression : à l'écran, chaque section reprend ces marges
   en padding et devient une feuille posée sur un fond, centrée et ombrée.
   Les hauteurs restent celles du papier, pour que les captures gardent la
   taille calculée par `.visuel`. */

@media screen {
  html {
    background: #e9e7e1;
  }

  body {
    padding: 10mm 0;
  }

  .couverture,
  .page {
    width: 297mm;
    height: 210mm;
    margin: 0 auto 8mm;
    box-shadow:
      0 2px 4px rgba(22, 33, 31, 0.08),
      0 16px 30px -20px rgba(22, 33, 31, 0.45);
  }

  .page {
    background: var(--papier);
    padding: 14mm 17mm 15mm;
  }

  .page.pleine {
    height: auto;
    min-height: 210mm;
  }

  /* Sous la largeur d'une feuille, le document se réduit au lieu d'être coupé. */
  @media (max-width: 1190px) {
    html {
      zoom: 0.86;
    }
  }
  @media (max-width: 1010px) {
    html {
      zoom: 0.72;
    }
  }
  @media (max-width: 850px) {
    html {
      zoom: 0.6;
    }
  }
  @media (max-width: 700px) {
    html {
      zoom: 0.48;
    }
  }
  @media (max-width: 560px) {
    html {
      zoom: 0.38;
    }
  }
}