/* ============================================================
   socle.css — socle-ui 1.2.0
   Jetons et composants communs des applications personnelles de
   Dimitri, inspirés des Human Interface Guidelines Apple 2026.

   Source unique : claudo/infra, dossier `ui/`. Ce fichier est
   **copié** dans le `public/` de chaque application par
   `bin/socle-ui-copier`, jamais servi depuis un CDN : chaque
   application garde sa CSP `self` et reste déployable seule.
   Ne pas l'éditer dans une application : la copie serait perdue
   au prochain passage du script, et `bin/verifier-derive` le
   signalerait.

   Noms en français, préfixe `--a-` / `.a-` (Apple-like) pour ne
   pas entrer en collision avec les feuilles existantes.

   Deux ressources l'accompagnent, du même dossier et de la même
   version : `inter-variable.woff2` et `icones.svg`.

   Prérequis côté serveur : la CSP doit comporter `font-src
   'self'`. Sans lui, `default-src 'none'` refuse la police —
   vérifié au moteur WebKit le 09/09/2026, le refus est explicite
   et silencieux à l'œil. La référence externe
   `<use href="/icones.svg#nom">`, elle, passe sans directive
   supplémentaire (vérifiée au même endroit).
   ============================================================ */

/* ---------- 0. Police (auto-hébergée) ---------- */
/* Inter 4.001, sous-ensemble latin, axe `wght` 100–900 en un seul
   fichier de 48 Ko — moins lourd que les quatre graisses statiques
   qu'il remplace. `swap` : le texte s'affiche tout de suite dans la
   police système, puis bascule ; c'est ce qu'on veut sur un
   tableau de bord qu'on ouvre vingt fois par jour.
   Pas d'italique : le navigateur la synthétise, et l'interface n'en
   emploie pas. */
@font-face {
  font-family: "Inter";
  src: url("/inter-variable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* ---------- 1. Couleurs sémantiques (mode clair) ---------- */
:root {
  color-scheme: light dark;

  /* Fonds groupés (Réglages, Santé) */
  --a-fond:            #F2F2F7;   /* systemGroupedBackground */
  --a-carte:           #FFFFFF;   /* secondarySystemGroupedBackground */
  --a-carte-2:         #F2F2F7;   /* tertiarySystemGroupedBackground */
  --a-remplissage:     rgba(120,120,128,.20); /* champs, segments */

  /* Textes */
  --a-texte:           #000000;
  --a-texte-2:         rgba(60,60,67,.60);
  --a-texte-3:         rgba(60,60,67,.30);
  --a-separateur:      rgba(60,60,67,.29);

  /* Teintes système */
  --a-bleu:    #007AFF;  --a-vert:   #34C759;  --a-rouge:  #FF3B30;
  --a-orange:  #FF9500;  --a-jaune:  #FFCC00;  --a-indigo: #5856D6;
  --a-violet:  #AF52DE;  --a-rose:   #FF2D55;  --a-sarcelle: #30B0C7;
  --a-cyan:    #32ADE6;  --a-menthe: #00C7BE;  --a-brun:   #A2845E;
  --a-gris:    #8E8E93;  --a-gris-2: #AEAEB2;  --a-gris-3: #C7C7CC;
  --a-gris-4:  #D1D1D6;  --a-gris-5: #E5E5EA;  --a-gris-6: #F2F2F7;

  --a-accent:  var(--a-bleu);   /* une application peut la surcharger */

  /* Verre (couche de navigation uniquement) */
  --a-verre-fond:      rgba(255,255,255,.62);
  --a-verre-bord:      rgba(255,255,255,.45);
  --a-verre-ombre:     0 8px 32px rgba(0,0,0,.12);

  /* ---------- 2. Typographie ---------- */
  /* Inter d'abord : c'est elle qui est livrée, et elle rend le même
     texte sur le Mac, l'iPhone et le VPS. Les polices système
     suivent comme repli le temps du chargement, ou si le woff2
     venait à manquer. */
  --a-police: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI",
              Roboto, system-ui, sans-serif;
  --a-mono:   ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --a-arrondie: var(--a-police);

  /* Échelle Dynamic Type « Large », 1 pt = 1 px sur le web */
  --a-t-grand-titre: 34px/41px; --a-t-titre-1: 28px/34px;
  --a-t-titre-2: 22px/28px;     --a-t-titre-3: 20px/25px;
  --a-t-entete: 17px/22px;      --a-t-corps: 17px/22px;
  --a-t-rappel: 16px/21px;      --a-t-sous-titre: 15px/20px;
  --a-t-note: 13px/18px;        --a-t-legende: 12px/16px;
  --a-t-legende-2: 11px/13px;

  /* ---------- 3. Géométrie ---------- */
  --a-marge: 16px;          /* marge horizontale de page */
  --a-gouttiere: 12px;
  --a-rayon-petit: 10px;    /* segments, champs, vignettes */
  --a-rayon: 12px;          /* boutons, petites cartes */
  --a-rayon-carte: 20px;    /* listes groupées iOS 26 (arbitrage 7) */
  --a-rayon-widget: 28px;
  --a-cible: 44px;          /* cible tactile minimale */
  --a-cellule: 44px;
  --a-icone-liste: 29px;    /* icône colorée d'une cellule Réglages */
  --a-icone-app: 60px;      /* icône d'écran d'accueil */
  --a-squircle: 22.37%;     /* rayon apparent d'une icône d'app */

  --a-transition: 160ms cubic-bezier(.2,.8,.2,1);
}

/* ---------- Mode sombre ---------- */
/* Arbitrage 3 : on suit `prefers-color-scheme` par défaut, et
   `data-theme` sur la racine force l'un ou l'autre. Le `:not(...)`
   du bloc média est ce qui permet à `data-theme="clair"` de gagner
   sur un système en sombre.
   Les valeurs sont en français — `clair` et `sombre` — parce que
   c'est ce qu'écrit déjà le dashboard : le socle se branche sur la
   bascule existante sans une ligne de JavaScript en plus. La
   maquette v0.1 disait `light` / `dark` ; c'est le seul écart, et
   il va dans le sens des consignes de langue du dépôt. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="clair"]) {
    --a-fond: #000000; --a-carte: #1C1C1E; --a-carte-2: #2C2C2E;
    --a-remplissage: rgba(120,120,128,.36);
    --a-texte: #FFFFFF; --a-texte-2: rgba(235,235,245,.60);
    --a-texte-3: rgba(235,235,245,.30); --a-separateur: rgba(84,84,88,.65);
    --a-bleu: #0A84FF; --a-vert: #30D158; --a-rouge: #FF453A; --a-orange: #FF9F0A;
    --a-jaune: #FFD60A; --a-indigo: #5E5CE6; --a-violet: #BF5AF2; --a-rose: #FF375F;
    --a-sarcelle: #40C8E0; --a-cyan: #64D2FF; --a-menthe: #63E6E2; --a-brun: #AC8E68;
    --a-gris-2: #636366; --a-gris-3: #48484A; --a-gris-4: #3A3A3C;
    --a-gris-5: #2C2C2E; --a-gris-6: #1C1C1E;
    --a-verre-fond: rgba(30,30,32,.62); --a-verre-bord: rgba(255,255,255,.14);
    --a-verre-ombre: 0 8px 32px rgba(0,0,0,.5);
  }
}
:root[data-theme="sombre"] {
  --a-fond: #000000; --a-carte: #1C1C1E; --a-carte-2: #2C2C2E;
  --a-remplissage: rgba(120,120,128,.36);
  --a-texte: #FFFFFF; --a-texte-2: rgba(235,235,245,.60);
  --a-texte-3: rgba(235,235,245,.30); --a-separateur: rgba(84,84,88,.65);
  --a-bleu: #0A84FF; --a-vert: #30D158; --a-rouge: #FF453A; --a-orange: #FF9F0A;
  --a-jaune: #FFD60A; --a-indigo: #5E5CE6; --a-violet: #BF5AF2; --a-rose: #FF375F;
  --a-sarcelle: #40C8E0; --a-cyan: #64D2FF; --a-menthe: #63E6E2; --a-brun: #AC8E68;
  --a-gris-2: #636366; --a-gris-3: #48484A; --a-gris-4: #3A3A3C;
  --a-gris-5: #2C2C2E; --a-gris-6: #1C1C1E;
  --a-verre-fond: rgba(30,30,32,.62); --a-verre-bord: rgba(255,255,255,.14);
  --a-verre-ombre: 0 8px 32px rgba(0,0,0,.5);
}

/* ---------- 4. Base et typographie ---------- */
html { -webkit-text-size-adjust: 100%; }
.a-socle {
  background: var(--a-fond); color: var(--a-texte);
  font: var(--a-t-corps) var(--a-police);
  -webkit-font-smoothing: antialiased;
}
/* La v0.1 demandait `font-feature-settings: "cv11", "ss01"` pour
   « rapprocher Inter de SF ». Écarté : chez Inter, `cv11` est le
   « a » à un étage, exactement l'inverse du « a » à deux étages de
   SF Pro. Les chiffres tabulaires, eux, sont demandés là où ils
   servent (`.a-chiffre`, `.a-widget-valeur`). */

.a-grand-titre { font: 700 var(--a-t-grand-titre) var(--a-police); letter-spacing: .4px; margin: 0; }
.a-titre-1 { font: 700 var(--a-t-titre-1) var(--a-police); margin: 0; }
.a-titre-2 { font: 700 var(--a-t-titre-2) var(--a-police); margin: 0; }
.a-titre-3 { font: 600 var(--a-t-titre-3) var(--a-police); margin: 0; }
.a-entete  { font: 600 var(--a-t-entete)  var(--a-police); }
.a-sous-titre { font: var(--a-t-sous-titre) var(--a-police); color: var(--a-texte-2); }
.a-note    { font: var(--a-t-note) var(--a-police); color: var(--a-texte-2); }
.a-legende { font: var(--a-t-legende) var(--a-police); color: var(--a-texte-2); }
.a-chiffre { font: 700 var(--a-t-grand-titre) var(--a-arrondie); font-variant-numeric: tabular-nums; }

/* ---------- 5. Icônes ---------- */
/* Règle de fond : **le sprite porte sa propre présentation**. Chaque
   `<symbol>` d'`icones.svg` arrive avec ses attributs `fill` ou
   `stroke`, parce que Phosphor dessine en aplat et Tabler au trait.
   Une feuille qui imposerait `fill: none; stroke: currentColor`
   (ce que faisait la v0.1) effacerait tous les glyphes Phosphor,
   c'est-à-dire la quasi-totalité du jeu. On ne fixe donc ici que la
   taille et la couleur, jamais le mode de tracé. */
.a-icone { width: 1em; height: 1em; flex: none; color: inherit; }

/* Teintes d'icône d'application (tableau 3.1 du cadrage).
   Deux tons de la même teinte, le clair en haut. Ces couleurs ne
   changent **pas** en mode sombre : une icône d'application est une
   marque, et iOS ne la retouche pas non plus. */
.a-teinte-bleu     { --a-haut: #5AC8FA; --a-bas: #007AFF; }
.a-teinte-vert     { --a-haut: #5CE07A; --a-bas: #28A745; }
.a-teinte-orange   { --a-haut: #FFB340; --a-bas: #F28500; }
.a-teinte-indigo   { --a-haut: #7A78F0; --a-bas: #4B48C7; }
.a-teinte-rose     { --a-haut: #FF6B8A; --a-bas: #E5254C; }
.a-teinte-brun     { --a-haut: #C4A27D; --a-bas: #8E6E48; }
.a-teinte-violet   { --a-haut: #C97CF5; --a-bas: #9440D6; }
.a-teinte-jaune    { --a-haut: #FFD84D; --a-bas: #E5A800; }
.a-teinte-sarcelle { --a-haut: #5AD6EC; --a-bas: #1F9CB4; }
.a-teinte-gris     { --a-haut: #B0B0B6; --a-bas: #7A7A80; }

/* Icône d'application (le « bouton iPhone »).
   Le dégradé est fait ici, pas dans le SVG : le fichier reste un
   carré monochrome, la liste blanche SVG des applications n'a rien
   à assouplir, et le mode sombre n'a rien à recalculer. */
.a-app-icone {
  width: var(--a-icone-app); aspect-ratio: 1; display: grid; place-items: center;
  border-radius: var(--a-squircle);
  background: linear-gradient(180deg, var(--a-haut, #5AC8FA), var(--a-bas, #007AFF));
  color: #fff;
  box-shadow: 0 1px 2px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.25);
  overflow: hidden;
}
/* Amélioration progressive : le vrai squircle d'Apple là où le
   moteur sait le tracer, l'arrondi à 22,37 % partout ailleurs. */
@supports (corner-shape: superellipse(2.5)) {
  .a-app-icone { corner-shape: superellipse(2.5); }
}
.a-app-icone svg { width: 55%; height: 55%; }

/* ---------- 6. Écran d'accueil ---------- */
.a-accueil {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px 12px;
  padding: var(--a-marge); justify-items: center;
}
@media (min-width: 700px) {
  .a-accueil { grid-template-columns: repeat(6, 1fr); gap: 32px 16px; --a-icone-app: 76px; }
}
@media (min-width: 1100px) {
  .a-accueil { grid-template-columns: repeat(8, 1fr); --a-icone-app: 84px; }
}
.a-app {
  position: relative; display: grid; justify-items: center; gap: 6px;
  text-decoration: none; color: inherit; width: 100%; max-width: 110px;
  transition: transform var(--a-transition);
}
.a-app:hover .a-app-icone { transform: scale(1.06); }
.a-app:active .a-app-icone { transform: scale(.94); filter: brightness(.85); }
/* Arbitrage 1 : le libellé est **toujours** visible, jamais réduit à
   une infobulle. Une ligne, coupée par des points de suspension. */
.a-app-libelle {
  font: 500 var(--a-t-legende) var(--a-police); text-align: center;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%;
}
.a-app-conteneur { position: relative; display: block; }

/* Pastille rouge, façon badge iOS : un service hors ligne, ou le compteur
   d'une tuile qui en porte un (ticket #69). La taille vient de la capture de
   l'iPhone de Dimitri : 26 pt de diamètre pour un chiffre, débordant le coin
   supérieur droit de l'icône. L'anneau à la couleur du fond la détache du
   dégradé de l'icône, exactement comme iOS. */
.a-pastille {
  position: absolute; top: -6px; right: -8px; min-width: 22px; height: 22px;
  box-sizing: border-box;
  padding: 0 6px; border-radius: 11px; background: var(--a-rouge); color: #fff;
  font: 600 13px/22px var(--a-police); text-align: center;
  box-shadow: 0 0 0 2px var(--a-fond);
}
/* Cadenas d'authentification unique, en bas à droite de l'icône. */
.a-sso {
  position: absolute; right: -4px; bottom: -2px; width: 18px; height: 18px;
  border-radius: 50%; background: var(--a-carte); color: var(--a-texte-2);
  display: grid; place-items: center; box-shadow: 0 0 0 2px var(--a-fond);
}
.a-sso svg { width: 11px; height: 11px; }

/* Infobulle courte, **bureau seulement** : au doigt il n'y a pas de
   survol, et la fiche détaillée joue ce rôle. Le délai de 600 ms
   évite qu'elle jaillisse au passage de la souris. */
.a-app[data-desc]::after {
  content: attr(data-desc); position: absolute; top: calc(100% + 4px);
  left: 50%; transform: translateX(-50%); width: 220px;
  background: var(--a-carte); color: var(--a-texte);
  font: var(--a-t-legende) var(--a-police); padding: 8px 10px;
  border-radius: 10px; box-shadow: 0 6px 24px rgba(0,0,0,.16);
  opacity: 0; pointer-events: none; transition: opacity 120ms 600ms;
  z-index: 5; text-align: left;
}
@media (hover: hover) { .a-app[data-desc]:hover::after { opacity: 1; } }

/* Un « dossier » d'écran d'accueil : le fond translucide qui
   regroupe les applications secondaires. */
.a-dossier {
  background: color-mix(in srgb, var(--a-texte) 6%, transparent);
  border-radius: var(--a-rayon-widget);
}
.a-dossier .a-accueil { padding: 20px 8px; }

.a-section-titre {
  font: 600 var(--a-t-entete) var(--a-police);
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
}
.a-section-titre small { font: var(--a-t-note) var(--a-police); color: var(--a-texte-2); }

/* ---------- 7. Liste groupée en carte ---------- */
.a-groupe-titre {
  font: var(--a-t-note) var(--a-police); text-transform: uppercase;
  letter-spacing: .3px; color: var(--a-texte-2);
  margin: 24px var(--a-marge) 8px calc(var(--a-marge) + 16px);
}
.a-groupe {
  margin: 0 var(--a-marge); background: var(--a-carte);
  border-radius: var(--a-rayon-carte); overflow: hidden;
}
.a-cellule {
  display: flex; align-items: center; gap: 12px; min-height: var(--a-cellule);
  padding: 8px var(--a-marge); color: inherit; text-decoration: none;
}
.a-cellule + .a-cellule { border-top: .5px solid var(--a-separateur); }
.a-groupe.a-avec-icones .a-cellule + .a-cellule {
  margin-left: calc(var(--a-marge) + var(--a-icone-liste) + 12px); padding-left: 0;
}
.a-cellule-icone {
  width: var(--a-icone-liste); height: var(--a-icone-liste); flex: none;
  border-radius: 7px; background: var(--a-bas, var(--a-accent)); color: #fff;
  display: grid; place-items: center;
}
.a-cellule-icone svg { width: 62%; height: 62%; }
.a-cellule-texte { flex: 1; min-width: 0; }
.a-cellule-valeur { color: var(--a-texte-2); }
.a-chevron { color: var(--a-gris-3); width: 14px; height: 14px; flex: none; }
.a-cellule:hover { background: color-mix(in srgb, var(--a-carte), var(--a-texte) 4%); }

/* ---------- 8. Barre d'onglets flottante en verre ---------- */
/* Arbitrage 6 : du verre sur la barre d'onglets, et un repli opaque
   quand le système demande moins de transparence. */
.a-onglets {
  position: fixed; left: 21px; right: 21px;
  bottom: calc(21px + env(safe-area-inset-bottom));
  display: flex; justify-content: space-around; padding: 6px; border-radius: 999px;
  background: var(--a-verre-fond); border: .5px solid var(--a-verre-bord);
  box-shadow: var(--a-verre-ombre);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  backdrop-filter: blur(20px) saturate(180%);
  z-index: 10;
}
@media (prefers-reduced-transparency: reduce) {
  .a-onglets {
    background: var(--a-carte);
    -webkit-backdrop-filter: none; backdrop-filter: none;
  }
}
.a-onglet {
  display: grid; justify-items: center; gap: 2px; padding: 6px 14px;
  border-radius: 999px; color: var(--a-texte-2); text-decoration: none;
  font: 500 var(--a-t-legende-2) var(--a-police); min-width: var(--a-cible);
  /* Un onglet est tantôt un <a>, tantôt un <button> — celui qui déplie le
     menu. Sans cette remise à zéro, le moteur peint le bouton avec son fond
     et sa bordure de formulaire : un disque gris au bout de la barre, dans
     les deux thèmes. Le fond de l'onglet actif est posé plus bas. */
  background: none; border: 0; appearance: none; -webkit-appearance: none;
  cursor: pointer;
}
.a-onglet svg { width: 24px; height: 24px; }
.a-onglet[aria-current="page"] {
  color: var(--a-accent);
  background: color-mix(in srgb, var(--a-accent) 14%, transparent);
}

/* ---------- 9. Contrôles ---------- */
.a-bouton {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 50px; padding: 0 20px; border-radius: var(--a-rayon); border: 0;
  background: var(--a-accent); color: #fff;
  font: 600 var(--a-t-entete) var(--a-police); text-decoration: none; cursor: pointer;
}
.a-bouton.est-secondaire {
  background: color-mix(in srgb, var(--a-accent) 15%, transparent); color: var(--a-accent);
}
.a-bouton.est-pastille { height: 34px; padding: 0 14px; border-radius: 999px; font-size: 15px; }
.a-segments { display: inline-flex; height: 32px; padding: 2px; border-radius: 9px; background: var(--a-remplissage); }
.a-segment {
  flex: 1; border: 0; background: none; border-radius: 7px; padding: 0 12px;
  font: 500 13px/28px var(--a-police); color: var(--a-texte); cursor: pointer;
}
.a-segment[aria-pressed="true"] { background: var(--a-carte); box-shadow: 0 1px 3px rgba(0,0,0,.12); }
.a-interrupteur {
  width: 51px; height: 31px; border-radius: 16px; background: var(--a-gris-4);
  position: relative; border: 0; cursor: pointer; transition: background var(--a-transition);
}
.a-interrupteur::after {
  content: ""; position: absolute; top: 2px; left: 2px; width: 27px; height: 27px;
  border-radius: 50%; background: #fff; box-shadow: 0 3px 8px rgba(0,0,0,.15);
  transition: transform var(--a-transition);
}
.a-interrupteur[aria-checked="true"] { background: var(--a-vert); }
.a-interrupteur[aria-checked="true"]::after { transform: translateX(20px); }
.a-recherche {
  display: flex; align-items: center; gap: 8px; height: 36px; padding: 0 10px;
  border-radius: var(--a-rayon-petit); background: var(--a-remplissage); color: var(--a-texte-3);
}
.a-recherche svg { width: 16px; height: 16px; flex: none; }
.a-recherche input {
  flex: 1; min-width: 0; border: 0; background: none;
  font: var(--a-t-corps) var(--a-police); color: var(--a-texte); outline: none;
}

/* Cibles tactiles : c'est l'absence de survol qui commande, pas la
   largeur de la fenêtre — une tablette au doigt a besoin des 44 px
   d'Apple, une fenêtre de bureau rétrécie non. */
@media (hover: none) {
  .a-recherche { height: var(--a-cible); }
  .a-segments { height: var(--a-cible); }
  .a-segment { line-height: calc(var(--a-cible) - 4px); }
  .a-onglet { min-height: var(--a-cible); align-content: center; }
}

/* ---------- 10. Widget / tuile de donnée ---------- */
.a-widget { background: var(--a-carte); border-radius: var(--a-rayon-widget); padding: 16px; display: grid; gap: 4px; }
.a-widget-titre { display: flex; align-items: center; gap: 6px; font: 600 var(--a-t-sous-titre) var(--a-police); color: var(--a-bas, var(--a-accent)); }
.a-widget-titre svg { width: 18px; height: 18px; }
.a-widget-valeur { font: 700 var(--a-t-titre-1) var(--a-arrondie); font-variant-numeric: tabular-nums; }
.a-widget-unite { font: var(--a-t-note) var(--a-police); color: var(--a-texte-2); }

/* ---------- 11. Feuille de détail ---------- */
/* Elle monte du bas comme une feuille iOS sur téléphone, et se pose
   au-dessus du bord bas sur écran large. Le voile capte le clic de
   fermeture. */
.a-voile {
  position: fixed; inset: 0; background: rgba(0,0,0,.35);
  opacity: 0; pointer-events: none; transition: opacity var(--a-transition); z-index: 20;
}
.a-voile.est-visible { opacity: 1; pointer-events: auto; }
.a-feuille {
  position: fixed; left: 50%; bottom: 0; transform: translate(-50%, 105%);
  width: min(100%, 560px); background: var(--a-carte);
  border-radius: 24px 24px 0 0; padding: 8px 20px calc(24px + env(safe-area-inset-bottom));
  z-index: 21; transition: transform 260ms cubic-bezier(.2,.8,.2,1);
  box-shadow: 0 -8px 40px rgba(0,0,0,.18);
}
@media (min-width: 700px) { .a-feuille { bottom: 24px; border-radius: 24px; } }
.a-feuille.est-ouverte { transform: translate(-50%, 0); }
.a-poignee { width: 36px; height: 5px; border-radius: 3px; background: var(--a-gris-3); margin: 0 auto 16px; }
.a-feuille-tete { display: flex; gap: 16px; align-items: center; }
.a-feuille-tete .a-app-icone { --a-icone-app: 72px; }
.a-feuille dl {
  display: grid; grid-template-columns: auto 1fr; gap: 6px 16px; margin: 16px 0;
  font: var(--a-t-sous-titre) var(--a-police);
}
.a-feuille dt { color: var(--a-texte-2); }
.a-feuille dd { margin: 0; font-family: var(--a-mono); font-size: 14px; overflow-wrap: anywhere; }
/* La chasse fixe est faite pour les identifiants techniques — un hôte, un
   amont. Une phrase en chasse fixe se lit mal et fait croire à une valeur
   qu'on pourrait copier telle quelle. */
.a-feuille dd.a-phrase { font-family: var(--a-police); }
.a-feuille .a-bouton { width: 100%; }

/* Pastille d'état, en ligne ou hors ligne. */
.a-etat { display: inline-flex; align-items: center; gap: 6px; font: var(--a-t-note) var(--a-police); }
.a-etat::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--a-vert); }
.a-etat.est-hors-ligne::before { background: var(--a-rouge); }

/* ---------- 12. Focus ---------- */
.a-app:focus-visible .a-app-icone,
.a-cellule:focus-visible,
.a-onglet:focus-visible,
.a-bouton:focus-visible { outline: 3px solid var(--a-accent); outline-offset: 3px; }

/* ---------- 13. Mouvement ---------- */
/* Le seul `!important` du socle, et il est là pour obéir au
   système : quand l'utilisateur demande moins d'animation, aucune
   règle de composant ne doit pouvoir passer outre. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}