/* ═══════════════════════════════════════════════════════════════════════
   LINELY · la feuille de style du site — refonte du 06/09/2026

   ⚠️ UNE SEULE FEUILLE POUR TOUT LE SITE. Chaque page portait avant son
   propre bloc <style> : la barre, le pied et les couleurs avaient donc
   quatre définitions différentes, et corriger l'une ne corrigeait pas les
   autres. Tout vit ici.

   ⚠️ LES POLICES NE SE TÉLÉCHARGENT PAS, ET C'EST VOULU.
   La marque compose en New York et en SF, deux polices SYSTÈME d'Apple.
   `ui-serif` et `-apple-system` les rendent telles quelles sur iPhone et sur
   Mac, d'où vient l'essentiel du trafic d'un lien posté sur Instagram : on
   obtient la VRAIE typographie de la maison, sans une seule requête réseau.
   Charger Google Fonts aurait envoyé l'adresse IP de chaque visiteur chez un
   tiers, ce qui est un curieux message pour une app dont la promesse est la
   confidentialité. Ailleurs, Georgia prend le relais.

   ⚠️ LES DEUX MONDES. La marque a son monde clair et son monde sombre, déjà
   arrêtés sur les visuels. Le site suit le réglage du téléphone : toutes les
   couleurs sont des variables, aucune n'est écrite en dur dans un composant.
   ═══════════════════════════════════════════════════════════════════════ */

:root {
  --papier:       #FBF7EE;
  --papier-creux: #F4EDDF;
  --encre:        #3E3226;
  --encre-douce:  #6B5A46;
  --brume:        #7C6C55;
  --or:           #8A6C42;
  --or-clair:     #B8935E;
  --filet:        #E8DCC5;
  --ombre:        rgba(62, 50, 38, .10);
  --ombre-forte:  rgba(62, 50, 38, .18);
  --bezel:        #201C19;
  --serif: ui-serif, "New York", Georgia, "Times New Roman", serif;
  --sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, "Segoe UI", sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root {
    --papier:       #201914;
    --papier-creux: #2A211A;
    --encre:        #EDE3D2;
    --encre-douce:  #C4B49A;
    --brume:        #9C8B72;
    --or:           #B8935E;
    --or-clair:     #C9A876;
    --filet:        #3B2F24;
    --ombre:        rgba(0, 0, 0, .30);
    --ombre-forte:  rgba(0, 0, 0, .45);
    --bezel:        #0E0B09;
  }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--papier);
  color: var(--encre);
  font-family: var(--serif);
  font-size: 17px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

/* ⚠️ LA MATIÈRE. Toute l'identité de la marque est faite de papier — les
   cartes imprimées, le grain, le tapis — et le site n'en portait rien : des
   aplats crème parfaitement lisses, qui se lisent comme un calque numérique.
   Le grain se répète sous toute la page, à 30 d'alpha. On ne le voit pas, on
   le sent. En monde sombre il s'atténue encore : un grain clair sur un brun
   profond ferait de la neige. */
body::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: url("/img/grain.png") repeat;
  mix-blend-mode: soft-light;
  opacity: .5;
}
@media (prefers-color-scheme: dark) { body::before { opacity: .22; } }

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

/* ⚠️ LE TEXTE COURANT EST JUSTIFIÉ, ET LA CÉSURE N'EST PAS FACULTATIVE.
   Alex (06/09) : « pense à aligner les textes à droite et à gauche, c'est pas
   joli sinon ». Sur une colonne de téléphone, justifier SANS césure creuse des
   rivières entre les mots : le bord droit devient net et l'intérieur du
   paragraphe devient troué, ce qui est pire que le drapeau qu'on voulait
   corriger. `hyphens: auto` sur une page en `lang="fr"` laisse le navigateur
   couper aux syllabes françaises, et le gris du paragraphe reste régulier.
   Les TITRES ne se justifient jamais : sur deux ou trois mots, la justification
   les étire jusqu'à l'absurde. */
.justifie {
  text-align: justify;
  hyphens: auto; -webkit-hyphens: auto;
  hyphenate-limit-chars: 6 3 3;
}
a { color: inherit; }

/* ⚠️ LES SECTIONS RÈGLENT LEUR ESPACEMENT EN `padding-block`, JAMAIS EN
   `padding`. Le raccourci `padding: 74px 0 6px` remet le padding HORIZONTAL à
   zéro et annule celui de `.enveloppe` : tout le texte de la page se collait
   aux deux bords de l'écran, et c'était invisible en lisant le code puisque
   les deux règles sont à cent lignes l'une de l'autre. */
.enveloppe { width: 100%; max-width: 64rem; margin-inline: auto; padding-inline: 22px; }
.prose { max-width: 33rem; margin-inline: auto; }
.centre { text-align: center; }

/* Visible des seuls lecteurs d'écran. `display: none` les priverait aussi. */
.saut {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* ── L'ornement de la maison : filet · losange · filet ─────────────────── */
.ornement {
  display: flex; align-items: center; justify-content: center; gap: 15px;
}
.ornement::before, .ornement::after {
  content: ""; display: block; width: 56px; height: 1px; background: var(--filet);
}
.ornement i {
  display: block; width: 7px; height: 7px; background: var(--or-clair);
  transform: rotate(45deg);
}

/* ── L'œil de chapitre ─────────────────────────────────────────────────── */
.oeil {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--or);
}

/* ── La barre ──────────────────────────────────────────────────────────── */
.barre {
  position: sticky; top: 0; z-index: 20;
  background: var(--papier);   /* repli : un fond plein vaut mieux qu'un fond absent */
  background: color-mix(in srgb, var(--papier) 88%, transparent);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color .3s ease;
}
.barre.pose { border-bottom-color: var(--filet); }
.barre-dedans {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; height: 58px;
}
.marque { display: flex; align-items: center; gap: 9px; text-decoration: none; }
.marque img { width: 26px; height: 26px; }
.marque span {
  font-family: var(--sans); font-size: 13px; font-weight: 600;
  letter-spacing: .22em; color: var(--encre);
}
.barre nav { display: flex; align-items: center; gap: 6px; }
.barre nav a {
  font-family: var(--sans); font-size: 14px; text-decoration: none;
  color: var(--encre-douce); padding: 8px 10px; border-radius: 9px;
}
.barre nav a:hover { color: var(--encre); background: var(--papier-creux); }
.barre nav a.cta {
  color: var(--papier); background: var(--or);
  padding: 9px 15px; font-weight: 500;
}
.barre nav a.cta:hover { background: var(--encre); color: var(--papier); }
@media (max-width: 520px) {
  .barre nav a.ailleurs { display: none; }
}

/* ── Le seuil ──────────────────────────────────────────────────────────── */
/* ⚠️ LE SEUIL TIENT UN ÉCRAN ENTIER, ET NE MONTRE QUE LA MARQUE.
   Il faisait 693 px sur 812 et enchaînait aussitôt sur la définition et le
   formulaire : tout arrivait en même temps, donc rien n'arrivait. Ici il n'y
   a que le signe, trois mots, et de quoi comprendre qu'on peut descendre. */
.seuil {
  min-height: 100vh;   /* repli pour les navigateurs sans unité « small viewport » */
  min-height: 100svh;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  text-align: center;
  padding-block: 78px 96px;
  position: relative;
}
.seuil .fleche {
  position: absolute; bottom: 30px; left: 50%; transform: translateX(-50%);
  width: 1px; height: 44px;
  background: linear-gradient(to bottom, transparent, var(--or-clair));
}
@media (prefers-reduced-motion: no-preference) {
  .seuil .fleche { animation: respire 2.8s ease-in-out infinite; }
  @keyframes respire {
    0%, 100% { opacity: .3; transform: translateX(-50%) scaleY(.6); }
    50%      { opacity: 1;  transform: translateX(-50%) scaleY(1); }
  }
}
.seuil .lockup { width: 150px; margin: 0 auto 40px; }
.seuil h1 {
  font-size: clamp(42px, 12vw, 84px);
  line-height: 1.04;
  font-weight: 400;
  letter-spacing: -.022em;
  margin: 0;
  text-wrap: balance;
}
/* ⚠️ AUCUN TITRE DU SITE NE CHANGE DE COULEUR EN COURS DE PHRASE (06/09).
   Le procédé — une moitié de titre dans l'or — a été retiré des trois endroits
   où il vivait : « évolue », « te remercie déjà », « à deux ». Un mot d'une
   autre couleur au milieu d'un titre se lit comme un lien, et sur une liste de
   trois mots il casse le rythme des trois. L'italique suffit à porter
   l'emphase. L'or reste, mais sur les OBJETS : l'ornement, les yeux de
   chapitre, les liens, le bouton. Jamais dans un titre. */
.seuil h1 em { font-style: italic; color: inherit; }
.definition-bloc { padding-block: 92px 0; text-align: center; }
.definition-bloc .definition {
  margin: 0 auto;
  font-size: clamp(17px, 4.4vw, 20px);
  line-height: 1.58;
  color: var(--encre-douce);
  max-width: 30rem;
  text-wrap: pretty;
}
.definition-bloc .ornement { margin: 40px auto 36px; }

/* ── La bande d'inscription ────────────────────────────────────────────── */
.appel { max-width: 27rem; margin-inline: auto; }
.appel .etat {
  font-family: var(--sans); font-size: 11px; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--or); margin-bottom: 12px;
}
form.inscription { display: flex; gap: 8px; }
form.inscription input {
  flex: 1; min-width: 0;
  font-family: var(--serif);
  font-size: 16px;               /* jamais moins : sous 16 px iOS zoome tout seul */
  color: var(--encre);
  background: var(--papier-creux);
  border: 1px solid var(--filet);
  border-radius: 12px;
  padding: 13px 15px;
  transition: border-color .2s ease;
}
form.inscription input::placeholder { color: var(--brume); font-style: italic; }
form.inscription input:focus-visible {
  outline: none; border-color: var(--or-clair);
  box-shadow: 0 0 0 3px var(--filet);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--or-clair) 22%, transparent);
}
form.inscription button {
  font-family: var(--sans); font-size: 15px; font-weight: 500;
  color: var(--papier); background: var(--encre);
  border: 0; border-radius: 12px; padding: 13px 20px;
  cursor: pointer; white-space: nowrap;
  transition: background .2s ease, transform .1s ease;
}
form.inscription button:hover { background: var(--or); }
form.inscription button:active { transform: translateY(1px); }
form.inscription button:disabled { opacity: .55; cursor: default; }
.reponse {
  font-family: var(--sans); font-size: 14px; margin-top: 12px; min-height: 1.3em;
}
.reponse.oui { color: var(--or); }
.reponse.non { color: #B4553C; }
@media (prefers-color-scheme: dark) { .reponse.non { color: #E0876B; } }
.appel .petit {
  font-family: var(--sans); font-size: 12.5px; color: var(--brume);
  margin-top: 12px;
}

/* ── Le bouton du lancement ─────────────────────────────────────────────────
   Il remplace le formulaire « Préviens-moi » le jour de la sortie. Mêmes
   encre, rayon et transition que le bouton du formulaire : c'est le même
   geste, au même endroit, et rien ne doit paraître déplacé.
   ⚠️ Pleine largeur assumée — la page arrivera d'Instagram, donc au pouce sur
   un téléphone, et une cible étroite au centre d'un écran se rate. */
a.telecharger {
  display: flex; align-items: center; justify-content: center;
  font-family: var(--sans); font-size: 15px; font-weight: 500;
  color: var(--papier); background: var(--encre);
  border-radius: 12px; padding: 15px 20px;
  text-decoration: none; white-space: nowrap;
  transition: background .2s ease, transform .1s ease;
}
a.telecharger:hover { background: var(--or); }
a.telecharger:active { transform: translateY(1px); }

/* ── L'accroche ────────────────────────────────────────────────────────── */
.accroche { padding-block: 74px 6px; }
.accroche p.question {
  font-size: clamp(23px, 5.6vw, 31px);
  line-height: 1.4; font-style: italic; margin: 0;
  text-wrap: pretty;
}
.accroche p.reponse-longue {
  margin: 26px 0 0; color: var(--encre-douce); font-size: 18px;
}
.accroche strong { font-weight: 400; color: var(--encre); font-style: normal; }

/* ── Les cinq temps ────────────────────────────────────────────────────── */
.temps { padding-block: 78px 30px; }
.temps > header { text-align: center; margin-bottom: 8px; }
.temps > header h2 {
  font-size: clamp(29px, 7vw, 42px); font-weight: 400; margin: 12px 0 0;
  letter-spacing: -.018em;
}
.temps > header p {
  color: var(--encre-douce); margin: 14px auto 0; max-width: 30rem;
}

/* ══════════════════════════════════════════════════════════════════════
   LES CINQ TEMPS — CINQ RYTHMES, PAS CINQ FOIS LE MÊME BLOC.

   ⚠️ MESURÉ AVANT DE REFAIRE : les cinq sections faisaient 1275, 1194, 1296,
   1279 et 1240 px. Cent-deux pixels d'écart entre la plus grande et la plus
   petite, et à chaque fois la même chose — un paragraphe, une liste, un
   téléphone. C'était un tableau déguisé en page, et c'est ce qui la faisait
   ressembler à une fiche technique plutôt qu'à une marque.

   Chaque temps reçoit maintenant la forme de ce qu'il raconte :
     I   Ondes  · le présent, le ciel      → l'écran GRAND, plein centre
     II  Carnet · le passé qui se feuillette → deux colonnes serrées
     III Écrin  · le futur, l'attente       → presque rien, beaucoup de vide
     IV  Cercle · les tiens                 → une bande de papier, à deux
     V   Miroir · toi avec toi-même         → le plus large, sur la matière
   ══════════════════════════════════════════════════════════════════════ */

.maison { padding-block: 74px; }
.maison h3 {
  font-size: clamp(30px, 8vw, 46px); font-weight: 400;
  margin: 12px 0 0; letter-spacing: -.02em; line-height: 1.05;
}
.maison .quand {
  font-style: italic; color: var(--or); font-size: 19px; margin: 8px 0 0;
}
.maison p.dit {
  margin: 22px 0 0; color: var(--encre-douce);
  text-align: justify; hyphens: auto; -webkit-hyphens: auto;
  hyphenate-limit-chars: 6 3 3;
}
/* Sauf la première, qui est centrée : on ne justifie pas un bloc centré, les
   deux mises en forme se contredisent. */
.maison--ciel p.dit { text-align: center; hyphens: manual; }
.maison ul {
  list-style: none; margin: 24px 0 0; padding: 0;
  font-family: var(--sans); font-size: 14.5px; color: var(--encre-douce);
}
.maison ul li { padding: 7px 0 7px 22px; position: relative; }
.maison ul li::before {
  content: ""; position: absolute; left: 2px; top: 15px;
  width: 6px; height: 6px; background: var(--or-clair); transform: rotate(45deg);
}
.maison .mots { max-width: 33rem; }

/* I · ONDES — l'ouverture. L'écran en grand, tout centré, rien à côté. */
.maison--ciel { text-align: center; padding-block: 30px 90px; }
.maison--ciel .mots { margin-inline: auto; }
.maison--ciel ul { display: inline-block; text-align: left; margin-top: 26px; }
.maison--ciel .ecran { max-width: 330px; margin: 0 auto 44px; }

/* II · CARNET — le passé se feuillette : deux colonnes serrées, l'écran petit. */
.maison--serree { border-top: 1px solid var(--filet); }
@media (min-width: 820px) {
  .maison--serree { display: grid; grid-template-columns: 1.15fr .85fr; gap: 56px; align-items: center; }
  .maison--serree .ecran { max-width: 236px; justify-self: end; }
}

/* III · ÉCRIN — l'attente. Le texte seul, grand, et l'écran réduit, posé de
   côté comme un objet qu'on aurait laissé là. Le vide FAIT le sujet. */
.maison--attente { border-top: 1px solid var(--filet); padding-block: 96px; }
.maison--attente .mots { max-width: 30rem; }
.maison--attente p.dit { font-size: 20px; color: var(--encre); }
.maison--attente ul { display: none; }
.maison--attente .ecran { max-width: 176px; margin-top: 46px; opacity: .92; }
@media (min-width: 820px) {
  .maison--attente { display: grid; grid-template-columns: 1fr auto; gap: 80px; align-items: end; }
  .maison--attente .ecran { margin: 0; }
}

/* IV · CERCLE — les tiens. Une bande de papier pleine largeur : la page
   change de sol, comme on change de pièce. */
.maison--bande {
  background: var(--papier-creux);
  border-radius: 26px;
  padding: 54px 26px;
  margin-block: 20px;
}
@media (min-width: 820px) {
  .maison--bande {
    display: grid; grid-template-columns: .9fr 1.1fr; gap: 60px;
    align-items: center; padding: 66px 54px;
  }
  .maison--bande .ecran { order: -1; max-width: 262px; }
}

/* V · MIROIR — la fin du parcours, et la seule qui pose la MATIÈRE : le tapis
   de cartes de la marque, en fond, sous un voile qui garde le texte lisible. */
.maison--large {
  position: relative; isolation: isolate; overflow: hidden;
  border-radius: 26px; padding: 58px 26px; margin-block: 24px 10px;
  color: var(--encre);
}
.maison--large::before {
  content: ""; position: absolute; inset: 0; z-index: -2;
  background: url("/img/tapis-bande.webp") center / cover no-repeat;
}
.maison--large::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--papier);   /* sans color-mix, le voile devient opaque : le
                                  tapis disparaît, mais le texte reste lisible,
                                  ce qui est le bon sens de la dégradation. */
  background: color-mix(in srgb, var(--papier) 90%, transparent);
}
@media (prefers-color-scheme: dark) {
  .maison--large::before { opacity: .22; }
  .maison--large::after  { background: var(--papier);
                           background: color-mix(in srgb, var(--papier) 78%, transparent); }
}
@media (min-width: 820px) {
  .maison--large {
    display: grid; grid-template-columns: 1fr 1fr; gap: 64px;
    align-items: center; padding: 76px 58px;
  }
  .maison--large .ecran { order: -1; max-width: 300px; }
}

/* Le téléphone : un cadre, pas une photo de téléphone. */
.ecran { justify-self: center; width: 100%; max-width: 300px; margin-inline: auto; }
.ecran .dalle {
  border-radius: 34px;
  padding: 8px;
  background: var(--bezel);
  box-shadow: 0 22px 50px -18px var(--ombre-forte), 0 2px 6px var(--ombre);
}
.ecran .dalle img { border-radius: 27px; width: 100%; }

/* ── La confidentialité ────────────────────────────────────────────────── */
.garde {
  background: var(--papier-creux);
  border-radius: 22px;
  padding: 46px 26px;
  margin: 40px 0 0;
  text-align: center;
}
.garde blockquote {
  margin: 20px auto 0; max-width: 31rem;
  font-size: clamp(20px, 5vw, 26px); font-style: italic; line-height: 1.45;
  text-wrap: pretty;
}
.garde .trois {
  display: grid; gap: 22px; margin: 34px auto 0; max-width: 46rem;
  font-family: var(--sans); font-size: 14px; color: var(--encre-douce);
}
@media (min-width: 720px) { .garde .trois { grid-template-columns: repeat(3, 1fr); } }
.garde .trois b {
  display: block; font-weight: 600; color: var(--encre); margin-bottom: 4px;
}

/* ── La clôture ────────────────────────────────────────────────────────── */
.cloture { padding-block: 84px 20px; text-align: center; }
.cloture p.intention {
  font-size: clamp(21px, 5.2vw, 27px); font-style: italic; line-height: 1.45;
  margin: 0 auto; max-width: 27rem; text-wrap: pretty;
}
.cloture .ornement { margin: 34px auto 34px; }
.cloture h2 {
  font-size: clamp(30px, 7.4vw, 46px); font-weight: 400; margin: 0 0 30px;
  letter-spacing: -.02em; line-height: 1.12; text-wrap: balance;
}
.cloture h2 em { font-style: italic; color: inherit; }

/* ── Le pied ───────────────────────────────────────────────────────────── */
footer {
  margin-top: 82px; padding: 40px 0 46px;
  border-top: 1px solid var(--filet);
  font-family: var(--sans); font-size: 13.5px; color: var(--brume);
  text-align: center;
}
footer nav {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 6px 20px; margin-bottom: 22px;
}
footer nav a { text-decoration: none; color: var(--encre-douce); }
footer nav a:hover { color: var(--or); text-decoration: underline; }
footer .signature { color: var(--brume); }

/* ── Le mouvement, discret et facultatif ───────────────────────────────── */
/* ⚠️ L'ÉTAT CACHÉ N'EXISTE QUE SI LE SCRIPT A PU LE POSER.
   La classe `js` est ajoutée par une ligne en tête de page. Sans elle, rien
   n'est masqué. Autrement dit : script en panne, navigateur ancien, JavaScript
   coupé, navigateur intégré d'Instagram qui fait des siennes — la page reste
   entièrement lisible. Une animation ratée ne doit JAMAIS effacer le contenu,
   et c'est exactement ce qui arrivait à la première version de cette page. */
@media (prefers-reduced-motion: no-preference) {
  html.js .paraitre { opacity: 0; transform: translateY(14px); }
  html.js .paraitre.vu {
    opacity: 1; transform: none;
    transition: opacity .7s ease, transform .7s cubic-bezier(.2, .7, .3, 1);
  }
}

:where(a, button, input):focus-visible {
  outline: 2px solid var(--or-clair); outline-offset: 3px; border-radius: 6px;
}

/* ═══════════════════════════════════════════════════════════════════════
   LES PAGES INTÉRIEURES — à propos, support, pages légales.
   Elles se lisent, elles ne se parcourent pas : une colonne, une mesure de
   lecture courte, et la même palette que l'accueil.
   ═══════════════════════════════════════════════════════════════════════ */

.page-titre { padding-block: 54px 8px; text-align: center; }
.page-titre h1 {
  font-size: clamp(32px, 8vw, 50px); font-weight: 400; margin: 12px 0 0;
  letter-spacing: -.02em; line-height: 1.1; text-wrap: balance;
}
.page-titre h1 em { font-style: italic; color: inherit; }
.page-titre .sous {
  color: var(--encre-douce); margin: 16px auto 0; max-width: 30rem;
  font-size: 18px; text-wrap: pretty;
}
.page-titre .ornement { margin: 30px auto 0; }

.article { padding-block: 30px 20px; }
.article > * { max-width: 33rem; margin-inline: auto; }
.article h2 {
  font-size: clamp(23px, 5.4vw, 30px); font-weight: 400;
  margin: 52px 0 0; letter-spacing: -.012em; line-height: 1.25;
}
.article h2:first-child { margin-top: 0; }
.article h3 {
  font-family: var(--sans); font-size: 15px; font-weight: 600;
  margin: 34px 0 0; letter-spacing: .01em;
}
.article p { margin: 16px 0 0; color: var(--encre-douce); }
.article p.fort { color: var(--encre); font-size: 19px; }
.article ul, .article ol { margin: 16px 0 0; padding-left: 0; list-style: none; }
.article ol { counter-reset: n; }
.article li {
  position: relative; padding: 7px 0 7px 24px; color: var(--encre-douce);
}
.article ul li::before {
  content: ""; position: absolute; left: 3px; top: 16px;
  width: 6px; height: 6px; background: var(--or-clair); transform: rotate(45deg);
}
.article ol li::before {
  counter-increment: n; content: counter(n) "."; position: absolute; left: 0;
  font-family: var(--sans); font-size: 13px; color: var(--or); top: 9px;
}
.article a { color: var(--or); text-underline-offset: 3px; }
.article a:hover { color: var(--encre); }

.article blockquote {
  margin: 30px auto 0; padding-left: 20px;
  border-left: 2px solid var(--filet);
  font-style: italic; font-size: 19px; color: var(--encre);
}

.carte {
  background: var(--papier-creux); border-radius: 16px;
  padding: 22px 22px 24px; margin: 18px auto 0;
}
.carte > :first-child { margin-top: 0; }
.carte .titre {
  font-family: var(--sans); font-size: 15px; font-weight: 600; color: var(--encre);
}

/* Un tableau doit pouvoir défiler DANS sa boîte : sur un téléphone, sinon,
   c'est la page entière qui part de travers. */
.tableau { overflow-x: auto; margin: 22px auto 0; max-width: 33rem; }
.tableau table { border-collapse: collapse; width: 100%; font-size: 15px; }
.tableau th, .tableau td {
  text-align: left; padding: 11px 14px; border-bottom: 1px solid var(--filet);
  vertical-align: top;
}
.tableau th {
  font-family: var(--sans); font-size: 12px; font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase; color: var(--or);
}
.tableau td { color: var(--encre-douce); }

.retour {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--sans); font-size: 15px; text-decoration: none;
  color: var(--or); margin-top: 46px;
}
.retour:hover { color: var(--encre); }