/* =====================================================================
 * vaayu.re — les pages autres que l'accueil
 *
 * Se connecter, Prise en main, Confidentialite, Mentions legales, 404 et
 * Appairage. Elles sortent toutes de la meme coquille dans
 * `site/construire.js`, et partagent donc une seule feuille.
 *
 * Le debut reprend mot pour mot trois parties de `accueil.css` — les
 * jetons, la base typographique et l'en-tete — parce que deux copies d'une
 * identite divergent a la premiere retouche. Ce qui suit leur est propre.
 * ===================================================================== */

/* =====================================================================
 * Vaayu — jetons de la direction artistique « Souffle »
 * Bleu Vaayu pour agir, encre nuit pour lire, lagon pour ce qui est
 * synchronisé et réussi. Clair par défaut ; sombre au choix du visiteur.
 * ===================================================================== */

:root {
  color-scheme: light;

  --encre:       #0a1230;
  --encre-2:     #414a66;
  --encre-3:     #626a85;
  --sol:         #f6f8fc;
  --surface:     #ffffff;
  --surface-2:   #eef2fb;
  --trait:       #dfe5f3;
  --trait-2:     #c2cbe3;
  --accent:      #2150f5;
  --accent-vif:  #2150f5;
  --accent-sol:  #e9eeff;
  --accent-texte:#1d44d8;
  --sur-accent:  #ffffff;
  --lagon:       #12b3a4;
  --nuit:        #0a1230;
  --nuit-2:      #16204a;
  --sur-nuit:    #eef2ff;
  --sur-nuit-2:  #a9b3dd;
  --bulle-emis:  #2150f5;
  --bulle-recu:  #eef2fb;
  --succes:      #087269;
  --succes-sol:  #e0f6f3;
  --alerte:      #8f5a00;
  --alerte-sol:  #fcf0d8;

  --font-display: "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif;
  --font-sans:    "Plus Jakarta Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, Menlo, monospace;

  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-xl: 28px;
  --r-pill: 999px;

  --ombre-1: 0 1px 2px rgb(10 18 48 / 6%), 0 8px 24px -12px rgb(33 80 245 / 22%);
  --ombre-2: 0 2px 6px rgb(10 18 48 / 6%), 0 30px 60px -24px rgb(33 80 245 / 34%);
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --encre:      #eef1fb;
  --encre-2:    #b3bbd4;
  --encre-3:    #8a93ae;
  --sol:        #070b1c;
  --surface:    #0e1428;
  --surface-2:  #151c36;
  --trait:      #222a48;
  --trait-2:    #36406a;
  --accent:     #7d9dff;
  --accent-vif: #4d7bff;
  --accent-sol: #141d42;
  --accent-texte:#9bb3ff;
  --sur-accent: #06102c;
  --lagon:      #3fd6c6;
  --nuit:       #101a44;
  --nuit-2:     #1d2758;
  --sur-nuit:   #eef2ff;
  --sur-nuit-2: #b0badf;
  --bulle-emis: #2f5ff0;
  --bulle-recu: #1b2242;
  --succes:     #3fd6c6;
  --succes-sol: #0c2a28;
  --alerte:     #e5b163;
  --alerte-sol: #2a2110;
  --ombre-1: none;
  --ombre-2: 0 30px 60px -24px rgb(0 0 0 / 60%);
}
/* =====================================================================
 * vaayu.re — composants (DA « Souffle », v4)
 * Mouvements : --vite 160ms · --moyen 320ms · --lent 700ms, courbe unique.
 * Tout s'arrête sous prefers-reduced-motion.
 * ===================================================================== */

:root {
  --vite: 160ms;
  --moyen: 320ms;
  --lent: 700ms;
  --courbe: cubic-bezier(.2, .7, .2, 1);
  --colonne: 76rem;
  --gouttiere: clamp(16px, 5vw, 40px);
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 84px; }
body {
  margin: 0; background: var(--sol); color: var(--encre);
  font: 400 16.5px/1.6 var(--font-sans); word-spacing: .03em; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img, svg { display: block; max-width: 100%; }
a { color: var(--accent-texte); }
button { font: inherit; color: inherit; }
h1, h2, h3 { font-family: var(--font-display); color: var(--encre); margin: 0; }
p { margin: 0; }
strong { font-weight: 700; }
.visually-hidden:not(:focus) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.visually-hidden:focus { position: fixed; top: 12px; left: 12px; z-index: 100; padding: 10px 16px; background: var(--accent); color: var(--sur-accent); border-radius: var(--r-sm); }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: 6px; }
.wrap { width: min(var(--colonne), 100% - 2 * var(--gouttiere)); margin-inline: auto; }
.mono { font-family: var(--font-mono); }

/* Images claires / sombres */
.si-sombre { display: none; }
:root[data-theme="dark"] .si-clair { display: none; }
:root[data-theme="dark"] .si-sombre { display: block; }

/* ============================ Typographie =========================== */
.surtitre { display: inline-flex; align-items: center; gap: 10px; font: 700 13px/1 var(--font-sans); letter-spacing: .08em; text-transform: uppercase; color: var(--accent-texte); }
.surtitre::before { content: ""; width: 22px; height: 2px; border-radius: 2px; background: currentColor; }
.titre-1 { font-size: clamp(2.9rem, 7.4vw, 6rem); line-height: .98; font-weight: 800; letter-spacing: -0.045em; word-spacing: .02em; }
.titre-1 .doux { color: var(--encre-3); }
.titre-2 { font-size: clamp(1.9rem, 4.6vw, 3.6rem); line-height: 1.02; font-weight: 800; letter-spacing: -0.04em; text-wrap: balance; }
.titre-3 { font-size: 1.3rem; line-height: 1.25; font-weight: 800; letter-spacing: -0.02em; }
.chapeau { font-size: clamp(1.08rem, 1.6vw, 1.28rem); line-height: 1.6; color: var(--encre-2); }
.bleu { color: var(--accent); }
.virgule { margin-left: -.1em; }

/* ============================ Boutons =============================== */
.bouton {
  position: relative; overflow: hidden; isolation: isolate;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 54px; padding: 0 26px; border-radius: var(--r-pill); border: 1.5px solid var(--accent);
  font: 700 16px/1 var(--font-sans); text-decoration: none; white-space: nowrap; cursor: pointer;
  color: var(--sur-accent); background: var(--accent); box-shadow: var(--ombre-1);
  transition: transform var(--vite) var(--courbe), box-shadow var(--vite) var(--courbe), border-color var(--vite), background var(--vite);
}
.bouton::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(110deg, transparent 30%, rgb(255 255 255 / 25%) 50%, transparent 70%); transform: translateX(-120%); }
.bouton:hover { transform: translateY(-2px); box-shadow: var(--ombre-2); }
.bouton:hover::before { transform: translateX(120%); transition: transform .7s var(--courbe); }
.bouton:active { transform: translateY(0) scale(.97); }
.bouton svg { width: 18px; height: 18px; transition: transform var(--vite) var(--courbe); }
.bouton:hover svg { transform: translateX(4px); }
.bouton.creux { background: transparent; color: var(--encre); border-color: var(--trait-2); box-shadow: none; }
.bouton.creux::before { display: none; }
.bouton.creux:hover { border-color: var(--encre); }
.bouton.petit { min-height: 42px; padding: 0 18px; font-size: 15px; }
.bouton.clair { background: #fff; color: #0a1230; border-color: #fff; }
.bouton.large { width: 100%; }

/* ============================ En-tête =============================== */
.progression { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 70; background: linear-gradient(90deg, var(--accent), var(--lagon)); transform-origin: left; transform: scaleX(var(--p, 0)); pointer-events: none; }
header.site {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--sol) 78%, transparent);
  -webkit-backdrop-filter: saturate(1.5) blur(16px); backdrop-filter: saturate(1.5) blur(16px);
  border-bottom: 1px solid transparent; transition: border-color var(--moyen);
}
header.site.defile { border-bottom-color: var(--trait); }
.bandeau { display: flex; align-items: center; justify-content: space-between; gap: 16px; height: 72px; }
.marque { display: inline-flex; align-items: center; gap: 8px; color: var(--encre); text-decoration: none; font: 800 24px/1 var(--font-display); letter-spacing: -0.05em; }
.marque .sigle { color: var(--accent); }
.marque span { transform: translateY(-1px); }
.marque .sigle.trace path { stroke-dasharray: 90; stroke-dashoffset: 90; animation: trace 1.1s var(--courbe) .1s forwards; }
@keyframes trace { to { stroke-dashoffset: 0; } }
.nav { display: flex; align-items: center; gap: 2px; }
.nav a:not(.bouton) { position: relative; color: var(--encre-2); text-decoration: none; font-weight: 600; font-size: 15px; padding: 10px 13px; border-radius: var(--r-sm); transition: color var(--vite); }
.nav a:not(.bouton)::after { content: ""; position: absolute; left: 13px; right: 13px; bottom: 4px; height: 2px; border-radius: 2px; background: var(--accent); transform: scaleX(0); transition: transform var(--moyen) var(--courbe); }
.nav a:not(.bouton):hover { color: var(--encre); }
.nav a:not(.bouton):hover::after, .nav a.actif::after { transform: scaleX(1); }
.nav a.actif { color: var(--encre); }
.nav .bouton { margin-left: 8px; }
.theme-bascule { position: relative; width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--trait-2); background: var(--surface); color: var(--encre-2); cursor: pointer; display: grid; place-items: center; padding: 0; margin-left: 6px; transition: border-color var(--vite), color var(--vite), transform var(--moyen) var(--courbe); }
.theme-bascule:hover { color: var(--encre); border-color: var(--encre-3); }
.theme-bascule:active { transform: rotate(-20deg) scale(.94); }
.theme-bascule svg { position: absolute; width: 18px; height: 18px; transition: transform var(--moyen) var(--courbe), opacity var(--moyen); }
.theme-bascule .lune { opacity: 0; transform: rotate(-90deg) scale(.5); }
:root[data-theme="dark"] .theme-bascule .soleil { opacity: 0; transform: rotate(90deg) scale(.5); }
:root[data-theme="dark"] .theme-bascule .lune { opacity: 1; transform: none; }
html.transition-theme, html.transition-theme * { transition: background-color .35s ease, border-color .35s ease, color .35s ease, fill .35s ease !important; }
.burger { display: none; width: 44px; height: 44px; border: 1px solid var(--trait-2); border-radius: 50%; background: var(--surface); cursor: pointer; place-content: center; padding: 0; margin-left: 6px; }
.burger span { display: block; width: 18px; height: 2px; background: var(--encre); border-radius: 2px; transition: transform var(--moyen) var(--courbe), opacity var(--vite); }
.burger span + span { margin-top: 4px; }
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
.menu-mobile { display: none; position: absolute; left: 0; right: 0; top: 100%; background: var(--surface); border-bottom: 1px solid var(--trait); box-shadow: var(--ombre-2); padding: 8px var(--gouttiere) 20px; animation: deroule var(--moyen) var(--courbe); }
.menu-mobile a:not(.bouton) { display: block; padding: 14px 4px; color: var(--encre); text-decoration: none; font-weight: 700; font-size: 18px; border-bottom: 1px solid var(--trait); }
.menu-mobile .bouton { margin-top: 16px; }
@keyframes deroule { from { opacity: 0; transform: translateY(-8px); } }
@media (max-width: 1080px) {
  .nav .masque-mobile { display: none; }
  .burger { display: grid; }
  .menu-mobile.ouvert { display: block; }
}
@media (max-width: 420px) { .nav .bouton { display: none; } }

/* ============================ Apparitions =========================== */
.js .revele { opacity: 0; transform: translateY(24px); transition: opacity var(--lent) var(--courbe), transform var(--lent) var(--courbe); transition-delay: calc(var(--i, 0) * 90ms); }
.js .revele.vu { opacity: 1; transform: none; }

/* ============================ Pied ================================== */
footer.site { border-top: 1px solid var(--trait); padding: 56px 0 44px; font-size: 14.5px; }
.pied { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: 32px; }
.pied p { color: var(--encre-3); max-width: 34ch; margin-top: 14px; }
.pied h4 { margin: 0 0 12px; font-size: 13px; letter-spacing: .06em; text-transform: uppercase; color: var(--encre-3); }
.pied ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.pied a { color: var(--encre-2); text-decoration: none; }
.pied a:hover { color: var(--encre); text-decoration: underline; }
.sous-pied { margin-top: 40px; padding-top: 20px; border-top: 1px solid var(--trait); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; color: var(--encre-3); font-size: 13.5px; }
@media (max-width: 760px) { .pied { grid-template-columns: 1fr 1fr; } .pied > :first-child { grid-column: 1 / -1; } }

/* ============================ Mouvement réduit ====================== */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; transition-delay: 0s !important; }
  .js .revele { opacity: 1; transform: none; }
}

/* =====================================================================
 * Pages de document
 *
 * Se connecter, Prise en main, Confidentialite, Mentions legales, 404.
 * Une colonne etroite, une hierarchie lisible, et rien d'autre : ces pages
 * se lisent, elles ne se parcourent pas.
 * ===================================================================== */

.wrap-etroit {
  width: min(46rem, 100% - 2 * var(--gouttiere));
  margin-inline: auto;
}

.doc { padding: clamp(40px, 7vw, 76px) 0 clamp(56px, 8vw, 96px); }

.doc > h1 {
  font-size: clamp(2.1rem, 5vw, 3.2rem);
  line-height: 1.04;
  font-weight: 800;
  letter-spacing: -0.04em;
  text-wrap: balance;
  margin-bottom: 20px;
}
.doc > h2 {
  font-size: clamp(1.35rem, 2.4vw, 1.7rem);
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.2;
  margin: 52px 0 14px;
  padding-top: 26px;
  border-top: 1px solid var(--trait);
}
.doc > h2:first-of-type { border-top: 0; padding-top: 0; }
.doc h3 { font-size: 1.08rem; font-weight: 700; letter-spacing: -0.015em; margin: 28px 0 8px; }

.doc p { margin: 0 0 16px; color: var(--encre-2); }
.doc > .chapeau { color: var(--encre-2); margin-bottom: 36px; max-width: 42ch; }
.doc strong { color: var(--encre); }
.doc a { color: var(--accent-texte); text-underline-offset: 3px; }
.doc ul, .doc ol { margin: 0 0 18px; padding-left: 22px; color: var(--encre-2); }
.doc li { margin-bottom: 8px; }
.doc li::marker { color: var(--encre-3); }
.doc .bouton { margin: 6px 0 10px; }

/*
 * Le bouton garde sa couleur dans une page de document.
 *
 * `.doc a` et `.bouton` ont exactement la meme specificite ; la regle des
 * liens, ecrite plus loin, l'emportait et peignait le texte du bouton en
 * bleu sur fond bleu. Illisible — et invisible a la relecture, puisque
 * chacune des deux regles est juste : c'est leur rencontre qui ne l'est pas.
 */
.doc a.bouton { color: var(--sur-accent); }
.doc a.bouton.creux { color: var(--encre); }

/*
 * L'encart.
 *
 * Un filet a gauche plutot qu'un cadre complet : l'encart doit se
 * distinguer du texte courant sans s'en detacher au point qu'on le saute.
 */
.doc-note {
  margin: 28px 0;
  padding: 16px 20px;
  border-left: 3px solid var(--accent);
  border-radius: 0 var(--r-md) var(--r-md) 0;
  background: var(--surface-2);
  font-size: 15px;
  color: var(--encre-2);
}
.doc-note strong { color: var(--encre); }

/* --- Le formulaire de la page « Se connecter » ---------------------- */
.doc-form { display: grid; gap: 10px; margin: 20px 0 26px; }
.doc-label { font-weight: 700; font-size: 15px; color: var(--encre); }
.doc-form input {
  font: 400 16px/1 var(--font-sans);
  color: var(--encre);
  background: var(--surface);
  border: 1.5px solid var(--trait-2);
  border-radius: var(--r-md);
  padding: 14px 16px;
  min-height: 52px;
  transition: border-color var(--vite), box-shadow var(--vite);
}
.doc-form input:hover { border-color: var(--encre-3); }
.doc-form input:focus-visible { border-color: var(--accent); }

/* --- Les tableaux de la politique de confidentialite ---------------- */
.doc-table { width: 100%; border-collapse: collapse; margin: 18px 0 26px; font-size: 15px; }
.doc-table th, .doc-table td {
  text-align: left;
  vertical-align: top;
  padding: 12px 14px;
  border-bottom: 1px solid var(--trait);
}
.doc-table thead th {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 13px;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--encre-3);
  background: var(--surface-2);
}
.doc-table tbody tr:last-child td { border-bottom: 0; }
.doc-table td { color: var(--encre-2); }

/* --- La fiche des mentions legales ---------------------------------- */
.fiche { margin: 18px 0 26px; }
.fiche-ligne {
  display: grid;
  grid-template-columns: 15rem minmax(0, 1fr);
  gap: 4px 20px;
  padding: 12px 0;
  border-bottom: 1px solid var(--trait);
}
.fiche-ligne:last-child { border-bottom: 0; }
.fiche dt { font-weight: 700; font-size: 15px; color: var(--encre); margin: 0; }
.fiche dd { margin: 0; color: var(--encre-2); font-size: 15px; }
/* Un numero se lit chiffre par chiffre : il lui faut des chasses egales. */
.num { font-family: var(--font-mono); font-size: 0.95em; letter-spacing: .02em; }
@media (max-width: 640px) { .fiche-ligne { grid-template-columns: 1fr; } }

/* --- Les trois pistes de la page 404 -------------------------------- */
.pistes { list-style: none; margin: 26px 0 32px; padding: 0; display: grid; gap: 10px; }
.pistes li {
  margin: 0;
  border: 1px solid var(--trait);
  border-radius: var(--r-md);
  background: var(--surface);
  padding: 16px 20px;
  transition: border-color var(--vite), transform var(--vite) var(--courbe);
}
.pistes li:hover { border-color: var(--accent); transform: translateY(-2px); }
.pistes a {
  display: block;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.05rem;
  letter-spacing: -0.02em;
  color: var(--encre);
  text-decoration: none;
}
.pistes span { display: block; margin-top: 3px; font-size: 14.5px; color: var(--encre-3); }

/* --- Les etapes de la prise en main --------------------------------- */
/*
 * Numerotees par le compteur, et non a la main : inserer une etape au
 * milieu ne doit pas obliger a renumeroter les suivantes, ce qu'on oublie
 * une fois sur deux.
 */
.etapes { counter-reset: etape; list-style: none; margin: 26px 0 32px; padding: 0; display: grid; gap: 22px; }
.etapes li { counter-increment: etape; margin: 0; padding-left: 56px; position: relative; }
.etapes li::before {
  content: counter(etape, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: -2px;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--accent-sol);
  color: var(--accent-texte);
  font: 600 13px/1 var(--font-mono);
}
.etapes h3 { margin: 0 0 6px; }

/* La fleche des boutons, heritee des anciennes pages. */
.fleche { width: 18px; height: 18px; }


/* =====================================================================
 * Appairage
 *
 * La seule page de document qui soit aussi un outil : elle affiche un QR
 * vivant, un compte a rebours et une empreinte a comparer. Elle garde donc
 * sa propre mise en page, en pleine largeur.
 * ===================================================================== */

.page-appairage { padding: clamp(36px, 6vw, 72px) 0 clamp(56px, 8vw, 96px); }
.appairage { width: min(var(--colonne), 100% - 2 * var(--gouttiere)); margin-inline: auto; }

.appairage-grille {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
  gap: clamp(28px, 5vw, 64px);
  align-items: center;
}
@media (max-width: 900px) { .appairage-grille { grid-template-columns: 1fr; } }

.sur-titre {
  display: inline-flex;
  align-items: baseline;
  gap: 10px;
  font: 600 12.5px/1 var(--font-mono);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--encre-3);
  margin-bottom: 18px;
}
.sur-titre span { color: var(--accent-texte); font-weight: 700; }

.titre-appairage {
  font-size: clamp(2.1rem, 4.6vw, 3.4rem);
  line-height: 1.02;
  font-weight: 800;
  letter-spacing: -0.04em;
  margin-bottom: 20px;
}
.titre-appairage em { font-style: normal; color: var(--accent); }

.appairage-chapeau, .appairage .chapeau { color: var(--encre-2); margin-bottom: 24px; max-width: 46ch; }

.gestes { counter-reset: geste; list-style: none; margin: 26px 0; padding: 0; display: grid; gap: 16px; }
.gestes li { display: flex; gap: 14px; align-items: flex-start; }
.geste-numero {
  flex: none;
  width: 34px; height: 34px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--accent-sol);
  color: var(--accent-texte);
  font: 600 12px/1 var(--font-mono);
}
.geste-texte { font-size: 15px; color: var(--encre-2); line-height: 1.5; }
.geste-texte strong { display: block; font-family: var(--font-display); font-weight: 700; font-size: 15.5px; color: var(--encre); letter-spacing: -0.01em; }

.appairage-aide, .appairage-note { font-size: 14.5px; color: var(--encre-3); max-width: 48ch; }
.appairage-note { margin-top: 20px; }

/* --- Le code, et ce qui l'entoure ------------------------------------ */
.appairage-code { display: grid; justify-items: center; gap: 14px; }
.qr-cadre {
  padding: 18px;
  border-radius: var(--r-xl);
  /* Toujours blanc, dans les deux themes : un QR sur fond sombre ne se
     lit pas, et l'appareil photo n'a pas de bouton pour s'en plaindre. */
  background: #ffffff;
  border: 1px solid var(--trait);
  box-shadow: var(--ombre-2);
}
.qr { width: min(17rem, 60vw); aspect-ratio: 1; display: grid; place-items: center; }
.qr img, .qr canvas, .qr svg { width: 100%; height: auto; }

.minuterie { font: 500 14px/1.4 var(--font-mono); color: var(--encre-3); text-align: center; }

.appairage-centre { max-width: 34rem; margin-inline: auto; text-align: center; }
.appairage-centre h2 { font-size: clamp(1.5rem, 3vw, 2.1rem); font-weight: 800; letter-spacing: -0.03em; margin-bottom: 18px; }
.appairage-centre .sur-titre { justify-content: center; }

/*
 * L'empreinte.
 *
 * Six chiffres a comparer d'un ecran a l'autre, en un coup d'oeil : chasse
 * fixe, tres grande taille, et de l'air entre les caracteres. C'est la
 * seule chose de la page qui protege reellement contre un interposé.
 */
.empreinte {
  font: 700 clamp(2.4rem, 7vw, 3.6rem)/1 var(--font-mono);
  letter-spacing: .16em;
  color: var(--accent);
  padding-left: .16em;
  margin: 10px 0 18px;
}

.appairage-sceau {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border-radius: var(--r-pill);
  background: var(--succes-sol);
  color: var(--succes);
  font-weight: 700;
  font-size: 14.5px;
}

.erreur {
  margin: 18px auto;
  max-width: 40rem;
  padding: 16px 20px;
  border-radius: var(--r-md);
  border: 1px solid color-mix(in srgb, var(--alerte) 35%, transparent);
  background: var(--alerte-sol);
  color: var(--alerte);
  font-size: 15px;
}