/* Ce que les pages du compte ajoutent à la couche commune — le lot WG.

   Chaque règle vient des planches (specs/design/website/lot-wg/, « À REPORTER DANS commun/site.css »)
   et se reporte là-bas : ce fichier est une étape, pas une seconde charte (ADR-0025 § 2 : les jetons
   et les classes de commun/ repris tels quels). Écrit en jetons et en propriétés --site-… seulement. */

/* Une liste de faits — « ce que le compte connaît », un appareil, une licence. Un <dl> et pas un
   tableau : à 360, la valeur passe SOUS le fait au lieu de faire déborder la page. */
.wg-faits { display: grid; margin: 0; }
.wg-faits > div { display: grid; gap: var(--espace-1); padding-block: var(--espace-3); border-block-end: var(--site-filet) solid var(--trait); }
.wg-faits > div:first-child { border-block-start: var(--site-filet) solid var(--trait-fort); }
.wg-faits dt { color: var(--encre-secondaire); min-width: 0; overflow-wrap: anywhere; hyphens: auto; }
.wg-faits dd { margin: 0; display: grid; gap: var(--espace-1); justify-items: start; overflow-wrap: anywhere; min-width: 0; }
@container site (width >= 37.5rem) { /* --site-rupture-moyenne */
  .wg-faits > div { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); column-gap: var(--espace-5); align-items: baseline; }
}

/* Une carte générique — un appareil. Même surface, même contour que .site-plan. */
.wg-carte { display: grid; gap: var(--espace-3); align-content: start; min-width: 0; padding: var(--espace-5); background: var(--surface); border: var(--site-filet) solid var(--trait-fort); border-radius: var(--rayon-2); }
.wg-carte > .site-boutons { margin-block-start: var(--espace-1); }
@container site (width < 18rem) { /* --site-rupture-minuscule */
  .wg-carte { padding: var(--espace-3); }
  .site-bouton { padding-inline: var(--espace-3); }
  .site-bouton .site-icone { display: none; }
}
.site-grille > * { min-width: 0; }
/* Un appareil retiré : le contour passe en tirets — ni rouge, ni gris de bouton désactivé. */
.wg-carte.retire { border-style: dashed; }

/* L'empreinte d'un appareil, à comparer caractère à caractère avec celle du téléphone. */
.wg-empreinte { font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: 0.08em; word-spacing: 0.3em; white-space: nowrap; }
/* Écart à la planche : son exemple avait deux groupes ; l'empreinte fixée par feat-020/technique.md
   § 2 en a cinq, et ne tient plus sur une ligne à 360 × 200 % (128 px de débordement, mesuré par
   tools/verifier-pages.ts). Elle se coupe donc ENTRE ses groupes, jamais dans un groupe. */
.wg-empreinte { white-space: normal; }
.wg-empreinte > span { white-space: nowrap; }

/* Un code QR, qui garde le thème CLAIR dans le thème sombre (data-theme="light" posé sur lui) : un code
   inversé n'est pas lu par tous les lecteurs. 256 px au plus ; la marge intérieure tient lieu de zone
   calme. */
.wg-qr { display: grid; justify-items: center; gap: var(--espace-2); width: min(100%, calc(var(--espace-8) * 4)); padding: var(--espace-4); background: var(--surface); color: var(--encre); border: var(--site-filet) solid var(--trait-fort); border-radius: var(--rayon-2); }
.wg-qr svg { display: block; width: 100%; height: auto; }
.wg-etapes { display: grid; gap: var(--espace-2); padding-inline-start: var(--espace-5); margin: 0; }
.wg-etapes li::marker { color: var(--encre); font-weight: 600; }