/* AfterStart — site vitrine (afterstart.ch). 1/3 : socle.
   build.mjs assemble base.css, home.css et pages.css en un seul fichier.

   Refonte du 2026-09-30 (Alain : « des fenêtres l'une sur l'autre… faudrait
   donner un peu d'air ») : l'en-tête et l'accroche restent sur le graphite de
   l'app, le corps passe sur un papier clair à peine teinté vers le vert, sans
   cadre autour des sections — le vide fait la séparation. Les captures de
   l'app vivent dans une silhouette de téléphone dessinée en CSS.

   Jetons repris de src/styles/tokens.css de l'app. Quicksand pour les titres,
   IBM Plex Sans pour le texte, servies par le site (aucune requête vers
   Google). Mobile d'abord ; aucune règle ne dépend de JavaScript, et la
   politique de sécurité interdit tout style en ligne : tout est ici. */

@font-face {
  font-family: 'Quicksand';
  src: url('/assets/quicksand-latin.1b092c71.woff2') format('woff2');
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Sans';
  src: url('/assets/ibm-plex-sans-latin.056e4e24.woff2') format('woff2');
  font-weight: 100 700;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Graphite de l'app : en-tête, accroche, dernier appel, pied de page. */
  --bg: #545454;
  --bg-deep: #3c3c3c;
  --on-bg: #f5f6f5; /* 7,0:1 sur graphite */
  --on-bg-2: #d2d4d2; /* 5,1:1 sur graphite */
  --rule-bg: rgba(245, 246, 245, 0.22);

  /* Papier : le corps du site. Blanc cassé tiré vers le vert de l'accent. */
  --paper: #f3f6f4;
  --paper-2: #e8eee9; /* les trois points de confiance, seul fond teinté */
  --ink: #131614; /* 17,6:1 sur papier */
  --ink-body: #2a2f2c; /* 12,5:1 : le texte courant, un rien plus doux */
  --ink-2: #4f5752; /* 6,9:1 sur papier, 6,3:1 sur papier-2 */
  --eyebrow: #1e7a4b; /* vert foncé de l'app (--ok) : 4,9:1 sur papier */
  --rule: #d9e1db;

  --accent: #2fa36b;
  --accent-hover: #37b378;
  --accent-ink: #0f2a1e; /* 4,8:1 sur l'accent */
  --accent-soft: #d3ecdf; /* pastille des icônes */

  --phone: #1c1e1d; /* bordure du téléphone */
  --phone-edge: #3a3d3b;

  --ff-display: 'Quicksand', 'Nunito', 'Arial Rounded MT Bold', -apple-system, system-ui, sans-serif;
  --ff-ui: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;

  --gut: 16px;
  --wrap: 1040px;
  --r-card: 22px;
  --r-btn: 14px;
  --r-ctl: 12px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);

  /* Rythme vertical : l'espace entre deux sections. */
  --space: 64px;

  /* Colonnes texte / téléphone du grand écran. */
  --col-text: 34rem;
  --col-phone: 290px;

  --focus: var(--ink);
  color-scheme: light;
}

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: 16px;
}

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--paper);
  color: var(--ink-body);
  font-family: var(--ff-ui);
  font-size: 17px;
  line-height: 1.6;
  overflow-wrap: break-word;
}
main {
  flex: 1 0 auto;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  color: inherit;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
a:hover {
  text-decoration-thickness: 2px;
}

:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
  border-radius: 4px;
}

h1,
h2,
h3 {
  font-family: var(--ff-display);
  font-weight: 700;
  line-height: 1.15;
  margin: 0;
  color: var(--ink);
  letter-spacing: -0.01em;
  text-wrap: balance;
}

p {
  margin: 0;
  text-wrap: pretty;
}

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 var(--gut);
}

/* Les zones graphite : leurs propres couleurs de texte et de focus. */
.top,
.hero,
.closing,
.foot {
  --focus: var(--on-bg);
  color: var(--on-bg);
}
.top h1,
.hero h1,
.closing h2 {
  color: var(--on-bg);
}

.skip {
  position: absolute;
  left: 8px;
  top: -60px;
  z-index: 10;
  padding: 10px 14px;
  border-radius: var(--r-ctl);
  background: #fff;
  color: var(--ink);
  font-weight: 600;
  text-decoration: none;
}
.skip:focus {
  top: 8px;
  --focus: var(--ink);
}

/* ---- En-tête ---- */
.top {
  background: var(--bg);
  padding: 16px 0;
}
.top .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.top__logo {
  display: block;
  flex: 0 1 auto;
  min-width: 0;
  border-radius: 6px;
}
.top__logo img {
  /* Le logo empilé de l'app (2026-09-30) : hauteur fixée, largeur qui suit (290×120). */
  height: 46px;
  width: auto;
}
/* Téléphone : les langues au-dessus du bouton, calées à droite. */
.top__end {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
}
.top__langs {
  display: flex;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.top__langs a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  min-height: 32px;
  padding: 0 6px;
  border-radius: 8px;
  color: var(--on-bg-2);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-decoration: none;
}
.top__langs a:hover {
  color: var(--on-bg);
  background: var(--rule-bg);
}
.top__langs a[aria-current='page'] {
  color: var(--on-bg);
  text-decoration: underline;
  text-decoration-color: var(--accent);
  text-decoration-thickness: 3px;
  text-underline-offset: 6px;
}

/* ---- Boutons ----
   Un seul bouton plein par écran : celui de l'accroche (et du dernier appel).
   Celui de l'en-tête, toujours là, se fait discret : un contour. */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 10px 18px;
  border-radius: var(--r-btn);
  background: var(--accent);
  color: var(--accent-ink);
  font-family: var(--ff-display);
  font-weight: 700;
  font-size: 17px;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
  transition:
    background-color 180ms var(--ease),
    border-color 180ms var(--ease);
}
.btn:hover {
  background: var(--accent-hover);
}
.btn::after {
  content: '';
  width: 8px;
  height: 8px;
  border-top: 2.5px solid currentColor;
  border-right: 2.5px solid currentColor;
  border-radius: 1px;
  transform: rotate(45deg);
  margin-left: 2px;
}
.btn--lg {
  min-height: 54px;
  padding: 14px 26px;
  font-size: 19px;
}
.btn--ghost {
  background: transparent;
  color: var(--on-bg);
  border: 1.5px solid rgba(245, 246, 245, 0.55);
  padding: 8.5px 16px;
}
.btn--ghost:hover {
  background: var(--rule-bg);
  border-color: var(--on-bg);
}

/* ---- Téléphone : la capture de l'app dans une silhouette dessinée ---- */
.phone {
  position: relative;
  width: 100%;
  padding: 9px;
  border-radius: 44px;
  background: var(--phone);
  box-shadow:
    inset 0 0 0 1.5px var(--phone-edge),
    0 30px 50px -28px rgba(19, 22, 20, 0.5),
    0 12px 24px -14px rgba(19, 22, 20, 0.28);
}
.phone img {
  width: 100%;
  border-radius: 35px;
  background: var(--bg);
}
/* Le bouton latéral, pour que la silhouette se lise comme un téléphone. */
.phone::after {
  content: '';
  position: absolute;
  right: -3px;
  top: 22%;
  width: 3px;
  height: 11%;
  border-radius: 0 3px 3px 0;
  background: var(--phone);
}
.shot-caption {
  margin-top: 18px;
  color: var(--ink-2);
  font-size: 15px;
  line-height: 1.4;
  text-align: center;
}

@supports (corner-shape: squircle) {
  .btn,
  .phone,
  .phone img,
  .trio__item {
    corner-shape: superellipse(1.5);
  }
}

/* ---- Grand écran : en-tête ---- */
@media (min-width: 560px) {
  :root {
    --gut: 24px;
  }
  .top__logo img {
    height: 54px;
  }
  .top__end {
    flex-direction: row;
    align-items: center;
    gap: 14px;
  }
}

@media (min-width: 860px) {
  :root {
    --gut: 32px;
    --space: 112px;
  }
  body {
    font-size: 18px;
  }
  .top {
    padding: 24px 0;
  }
  .top__logo img {
    height: 60px;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition: none !important;
    animation: none !important;
    scroll-behavior: auto !important;
  }
}

/* AfterStart — site vitrine. 2/3 : la page d'accueil.
   Graphite en haut (accroche + un grand téléphone qui déborde sur le papier),
   puis une fonction par section, texte d'un côté et téléphone de l'autre,
   sans cadre ; les trois points de confiance ; le cadre santé en une ligne ;
   les questions ; le dernier appel sur graphite. */

:root {
  /* Accroche : largeur du téléphone et part qui déborde sous le graphite. */
  --hero-phone: min(216px, 60vw);
  --hero-pb: 32px;
  --overflow: 232px;
}

/* ---- Accroche ---- */
.hero {
  background: var(--bg);
  padding: 20px 0 var(--hero-pb);
}
.hero h1 {
  font-size: 40px;
  line-height: 1.1;
  max-width: 14ch;
}
.hero__text {
  margin-top: 16px;
  max-width: 34em;
  font-size: 17px;
  line-height: 1.55;
  color: var(--on-bg);
}
.hero__act {
  margin-top: 24px;
}
.hero__note {
  margin-top: 14px;
  max-width: 34em;
  color: var(--on-bg-2);
  font-size: 16px;
  line-height: 1.5;
}
.hero__figure {
  position: relative;
  z-index: 1;
  width: var(--hero-phone);
  margin: 32px auto calc(-1 * var(--overflow));
}

/* ---- Surtitre ---- */
.eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
  color: var(--eyebrow);
  font-family: var(--ff-ui);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.eyebrow::before {
  content: '';
  flex: none;
  width: 18px;
  height: 2px;
  border-radius: 1px;
  background: var(--accent);
}

/* ---- Une fonction par section ---- */
.feature {
  padding: calc(var(--space) / 2) 0;
}
/* La première : le téléphone de l'accroche l'illustre déjà, elle se place
   dessous (téléphone) ou à côté (grand écran). */
.lead {
  padding: calc(var(--overflow) - var(--hero-pb) + 48px) 0 calc(var(--space) / 2);
}
.feature__grid {
  display: grid;
  gap: 40px;
}
.feature h2,
.lead h2 {
  font-size: 28px;
}
.feature__text {
  margin-top: 16px;
  max-width: 34em;
}
.feature__figure {
  margin: 0 auto;
  width: min(248px, 68vw);
}

.ticks {
  list-style: none;
  margin: 20px 0 0;
  padding: 0;
  display: grid;
  gap: 10px;
}
.ticks li {
  position: relative;
  padding-left: 24px;
}
.ticks li::before {
  content: '';
  position: absolute;
  left: 3px;
  top: 0.64em;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
}

/* ---- Trois points de confiance : le seul endroit avec des cartes ---- */
.trio {
  padding: calc(var(--space) / 2) 0;
}
.trio__grid {
  display: grid;
  gap: 16px;
}
.trio__item {
  background: var(--paper-2);
  border-radius: var(--r-card);
  padding: 28px 24px;
}
.trio__icon {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--eyebrow);
}
.trio__icon svg {
  width: 24px;
  height: 24px;
}
.trio__item h2 {
  margin-top: 18px;
  font-size: 22px;
}
.trio__item p {
  margin-top: 10px;
}
.trio__item .ticks {
  margin-top: 14px;
  gap: 8px;
  color: var(--ink-2);
  font-size: 16px;
}
.trio__link {
  display: inline-block;
  margin-top: 14px;
  color: var(--ink);
  font-weight: 600;
}

/* ---- Cadre santé : une ligne sobre ---- */
.health {
  padding: calc(var(--space) / 2) 0;
}
.health__row {
  display: grid;
  gap: 6px;
  padding-top: 24px;
  border-top: 1px solid var(--rule);
}
.health h2 {
  font-size: 17px;
  line-height: 1.5;
}
.health p {
  color: var(--ink-2);
  font-size: 16px;
  max-width: 44em;
}

/* ---- Questions : une liste, séparée par des filets ---- */
.faq {
  padding: calc(var(--space) / 2) 0 var(--space);
}
.faq h2 {
  font-size: 28px;
}
.faq__list {
  margin-top: 20px;
  border-top: 1px solid var(--rule);
}
.faq details {
  border-bottom: 1px solid var(--rule);
}
.faq summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 18px 0;
  min-height: 60px;
  color: var(--ink);
  font-family: var(--ff-display);
  font-weight: 700;
  font-size: 18px;
  line-height: 1.35;
  border-radius: 6px;
}
.faq summary::-webkit-details-marker {
  display: none;
}
.faq summary::after {
  content: '';
  flex: none;
  width: 9px;
  height: 9px;
  margin-right: 4px;
  border-right: 2px solid var(--ink-2);
  border-bottom: 2px solid var(--ink-2);
  transform: translateY(-3px) rotate(45deg);
  transition: transform 180ms var(--ease);
}
.faq summary:hover {
  color: var(--eyebrow);
}
.faq details[open] summary::after {
  transform: translateY(2px) rotate(-135deg);
}
.faq details p {
  padding: 0 0 22px;
  max-width: 40em;
}

/* ---- Dernier appel, sur graphite ---- */
.closing {
  background: var(--bg);
  padding: 64px 0 72px;
}
.closing h2 {
  font-size: 30px;
  max-width: 18ch;
}
/* Le portrait d'illustration, à côté du dernier appel (2026-09-30). */
.closing__grid {
  display: grid;
  gap: 36px;
  align-items: center;
}
.closing__portrait {
  width: min(260px, 72%);
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: var(--r-card);
}
@media (min-width: 720px) {
  .closing__grid {
    grid-template-columns: 1fr auto;
  }
  .closing__portrait {
    width: 300px;
  }
}
.closing__act {
  margin-top: 28px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 22px;
}
.closing__act p {
  color: var(--on-bg-2);
  font-size: 16px;
}

/* ---- Apparition douce, sans JavaScript ----
   Une animation liée au défilement, seulement là où le navigateur la connaît
   et si la personne n'a pas demandé moins de mouvement. Ailleurs, tout est
   simplement affiché. */
@keyframes reveal {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .reveal {
      animation: reveal linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 40%;
    }
  }
}

/* ---- Tablette ---- */
@media (min-width: 560px) {
  :root {
    --hero-phone: 240px;
    --hero-pb: 40px;
    --overflow: 240px;
  }
  .hero h1 {
    font-size: 48px;
  }
  .hero__text {
    font-size: 18px;
  }
}

/* ---- Grand écran : texte et téléphone côte à côte, en alternance ---- */
@media (min-width: 860px) {
  :root {
    --hero-phone: var(--col-phone);
    --hero-pb: 64px;
    --overflow: 236px;
  }
  .hero {
    padding-top: 28px;
  }
  .hero__grid {
    display: grid;
    grid-template-columns: minmax(0, var(--col-text)) var(--col-phone);
    justify-content: space-between;
    align-items: center;
    column-gap: 48px;
  }
  .hero h1 {
    font-size: 56px;
  }
  .hero__text {
    font-size: 20px;
  }
  .hero__act {
    margin-top: 32px;
  }
  .hero__figure {
    align-self: start;
    margin: 8px 0 calc(-1 * var(--overflow));
  }

  /* À côté du téléphone qui déborde : texte à gauche, et assez de hauteur
     pour que la section suivante commence sous la légende. */
  .lead {
    padding-top: 72px;
    min-height: calc(var(--overflow) - var(--hero-pb) + 96px);
  }
  .lead .feature__body {
    max-width: var(--col-text);
  }

  .feature__grid {
    grid-template-columns: minmax(0, var(--col-text)) var(--col-phone);
    justify-content: space-between;
    align-items: center;
    gap: 48px;
  }
  .feature--flip .feature__grid {
    grid-template-columns: var(--col-phone) minmax(0, var(--col-text));
  }
  .feature--flip .feature__figure {
    order: -1;
  }
  .feature__figure {
    width: 262px;
  }
  .feature h2,
  .lead h2,
  .faq h2 {
    font-size: 36px;
  }
  .feature__text {
    margin-top: 20px;
  }

  .trio__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
  }
  .trio__item {
    padding: 32px 28px;
  }

  /* Mêmes colonnes que les questions, pour que les textes s'alignent. */
  .health__row {
    grid-template-columns: minmax(0, 18rem) minmax(0, 40rem);
    justify-content: space-between;
    gap: 48px;
    padding-top: 28px;
  }

  .faq__grid {
    display: grid;
    grid-template-columns: minmax(0, 18rem) minmax(0, 40rem);
    justify-content: space-between;
    gap: 48px;
  }
  .faq__list {
    margin-top: 0;
  }
  .faq summary {
    font-size: 19px;
    padding: 20px 0;
  }

  .closing {
    padding: 96px 0 104px;
  }
  .closing h2 {
    font-size: 40px;
  }
}

/* AfterStart — site vitrine. 3/4 : le portrait d'illustration (2026-09-30).
   Un seul emplacement à la fois, choisi dans site.json (« portrait ») :
   hero, dismoi, closing ou none. « closing » vit dans home.css ; ici, les
   deux « scènes » : le portrait à droite, le téléphone de l'app devant elle,
   à gauche et plus bas.

   Le visage est au centre-haut de l'image (de 30 à 60 % de la largeur, de 13
   à 42 % de la hauteur) : le téléphone ne recouvre que la bande gauche du
   portrait (moins de 22 %), où il n'y a que l'épaule et le fond.

   Réglages de la scène, posés sur son conteneur (le body pour l'accroche, la
   grille de la section pour Dis-moi) :
     --st-portrait  largeur du portrait (image 4:5) ;
     --st-phone     largeur du téléphone ;
     --st-overlap   part du portrait cachée par le téléphone ;
     --st-drop      le téléphone commence d'autant sous le haut du portrait. */

.home--p-hero,
.feature__grid--stage {
  --st-portrait: min(196px, 51vw);
  --st-phone: min(184px, 48vw);
  --st-overlap: min(40px, 10vw);
  --st-drop: 92px;
  --st-w: calc(var(--st-portrait) + var(--st-phone) - var(--st-overlap));
}

/* ---- La scène ---- */
.stage {
  display: grid;
  grid-template-columns:
    calc(var(--st-phone) - var(--st-overlap))
    var(--st-overlap)
    calc(var(--st-portrait) - var(--st-overlap));
  grid-template-rows: var(--st-drop) auto;
  justify-content: center;
}
.stage__portrait {
  grid-column: 2 / 4;
  grid-row: 1 / 3;
  align-self: start;
  width: var(--st-portrait);
  max-width: none;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: var(--r-card);
  box-shadow: 0 26px 48px -32px rgba(19, 22, 20, 0.55);
}
.stage__phone {
  grid-column: 1 / 3;
  grid-row: 2;
  position: relative;
  z-index: 1;
  width: var(--st-phone);
  margin: 0;
}
@supports (corner-shape: squircle) {
  .stage__portrait {
    corner-shape: superellipse(1.5);
  }
}

/* ---- Accroche : la scène remplace le téléphone seul ----
   Seul le téléphone déborde du graphite sur le papier ; le portrait reste
   dans le graphite. --overflow = hauteur de la scène (décalage + téléphone +
   légende) moins celle du portrait : la section suivante en tient compte. */
.home--p-hero {
  --overflow: calc(
    var(--st-drop) + (var(--st-phone) - 18px) * 2.1641 + 18px + 40px - var(--st-portrait) * 1.25
  );
}
.stage--hero {
  position: relative;
  z-index: 1;
  margin: 32px 0 calc(-1 * var(--overflow));
}

/* ---- Dis-moi : la scène à la place du téléphone de la section ---- */
.feature--flip .stage--feature {
  order: -1;
}

/* ---- Tablette ---- */
@media (min-width: 560px) {
  .home--p-hero,
  .feature__grid--stage {
    --st-portrait: 250px;
    --st-phone: 216px;
    --st-overlap: 52px;
    --st-drop: 116px;
  }
}

/* ---- Grand écran : texte à gauche, la scène à droite ---- */
@media (min-width: 860px) {
  .home--p-hero,
  .feature__grid--stage {
    --st-portrait: 262px;
    --st-phone: 204px;
    --st-overlap: 56px;
    --st-drop: 120px;
  }
  /* Le texte de l'accroche est haut sur trois lignes : le téléphone descend
     davantage pour déborder encore du graphite. */
  .home--p-hero {
    --st-drop: 170px;
  }
  .stage {
    justify-content: end;
  }

  .home--p-hero .hero__grid {
    grid-template-columns: minmax(0, 1fr) var(--st-w);
    column-gap: 40px;
  }
  .home--p-hero .hero h1 {
    font-size: 48px;
  }
  .stage--hero {
    align-self: start;
    margin: 8px 0 calc(-1 * var(--overflow));
  }
  /* La première fonction, sous l'accroche : son texte s'arrête avant le
     téléphone qui déborde. */
  .home--p-hero .lead .feature__body {
    max-width: calc(100% - var(--st-w) - 40px);
  }

  .feature__grid--stage {
    grid-template-columns: minmax(0, 1fr) var(--st-w);
    gap: 40px;
  }
  .feature--flip .feature__grid--stage {
    grid-template-columns: var(--st-w) minmax(0, 1fr);
  }
}

@media (min-width: 1040px) {
  .home--p-hero {
    --st-portrait: 330px;
    --st-phone: 240px;
    --st-overlap: 80px;
    --st-drop: 150px;
  }
  .feature__grid--stage {
    --st-portrait: 300px;
    --st-phone: 250px;
    --st-overlap: 64px;
    --st-drop: 110px;
  }
  .home--p-hero .hero__grid,
  .feature__grid--stage {
    column-gap: 48px;
  }
  .home--p-hero .hero h1 {
    font-size: 56px;
  }
  .home--p-hero .lead .feature__body {
    max-width: calc(100% - var(--st-w) - 48px);
  }
}

/* AfterStart — site vitrine. 3/3 : pages de texte (confidentialité, mentions
   légales, 404) et pied de page. Même papier que l'accueil, une colonne de
   lecture d'environ 65 caractères, sans cadre. */

/* ---- Pages de texte ---- */
.doc {
  padding: 48px 0 var(--space);
}
.doc__col {
  max-width: 40rem;
}
.doc h1 {
  font-size: 36px;
  line-height: 1.1;
}
.doc section {
  margin-top: 40px;
}
.doc h1 + section {
  margin-top: 32px;
}
.doc h2 {
  font-size: 22px;
  margin-bottom: 10px;
}
.doc p + p {
  margin-top: 10px;
}
.doc a {
  color: var(--ink);
}
.doc .intro {
  padding-top: 32px;
  border-top: 1px solid var(--rule);
  color: var(--ink-2);
}
.doc dl {
  margin: 14px 0 0;
  display: grid;
  gap: 2px 20px;
}
.doc dt {
  color: var(--ink-2);
  font-size: 16px;
}
.doc dd {
  margin: 0 0 10px;
}
.todo {
  background: #fff1b8;
  color: var(--ink);
  padding: 1px 6px;
  border-radius: 6px;
  font-weight: 600;
}

/* ---- Pied de page ---- */
.foot {
  background: var(--bg-deep);
  color: var(--on-bg-2);
  padding: 48px 0 40px;
  font-size: 16px;
  line-height: 1.5;
}
.foot a {
  color: var(--on-bg);
}
.foot__grid {
  display: grid;
  gap: 32px;
}
.foot__brand img {
  height: 52px;
  width: auto;
  opacity: 0.9;
}
.foot__brand p {
  margin-top: 14px;
  max-width: 22em;
}
.foot ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 4px 20px;
}
.foot__title {
  margin-bottom: 6px;
  color: var(--on-bg-2);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.foot__langs a,
.foot__links a {
  display: inline-block;
  padding: 6px 0;
}
.foot__langs a {
  text-decoration: none;
}
.foot__langs a:hover {
  text-decoration: underline;
}
.foot__langs a[aria-current='page'] {
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: var(--accent);
  text-decoration-thickness: 3px;
  text-underline-offset: 6px;
}
.foot__copy {
  padding-top: 20px;
  border-top: 1px solid var(--rule-bg);
  font-size: 15px;
}

@media (min-width: 860px) {
  .doc {
    padding-top: 72px;
  }
  .doc h1 {
    font-size: 48px;
  }
  .doc h1 + section {
    margin-top: 44px;
  }
  .doc section {
    margin-top: 48px;
  }
  .doc dl {
    grid-template-columns: max-content 1fr;
  }
  .doc dd {
    margin: 0;
  }

  .foot {
    padding: 64px 0 44px;
  }
  .foot__grid {
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr);
    column-gap: 48px;
    row-gap: 48px;
  }
  .foot__langs,
  .foot__links {
    flex-direction: column;
  }
  /* Aligné sur la liste des langues, qui a un titre. */
  .foot__links {
    padding-top: 25px;
  }
  .foot__copy {
    grid-column: 1 / -1;
  }
}