/*!
 * t11d — socle de tableau de bord
 * La coquille d'une application de travail : la colonne, la barre du pouce,
 * le corps qui défile, la porte. Les composants restent à h11k ; ici on les
 * DISPOSE et on les habille.
 *
 * Rien dans cette feuille ne connaît un métier. Ce qui est propre à une
 * création vit dans la feuille de la création, jamais ici.
 */

/* ══════════════════════════════════════════════════════════════════════════
   1. LES JETONS
   ══════════════════════════════════════════════════════════════════════════
   Une direction artistique tenue comme celle d'un système d'exploitation :
   des fonds GROUPÉS (le blanc est réservé aux cartes, le gris est le fond),
   des filets d'un demi-pixel, du verre translucide sur les barres, des
   rayons de carte et non de bouton web.

   Un projet qui veut une autre DA change CES valeurs, et rien d'autre.
   ══════════════════════════════════════════════════════════════════════════ */
/*
| LES JETONS VIVENT DANS UNE COUCHE, ET C'EST TOUT L'INTÉRÊT.
|
| Le bloc sombre s'écrit `:root:not([data-theme="clair"])` — une spécificité
| plus forte que `:root`. Sans couche, un projet qui redonne ses couleurs par
| un simple `:root { --fond: … }` PERDAIT contre elle, quel que soit l'ordre
| de chargement. Constaté sur la gamme Skin le 8 septembre 2026 : les cinq
| apps passaient en noir alors qu'elles déclaraient leur papier.
|
| Une couche règle ça proprement : tout ce qui n'est PAS dans une couche
| l'emporte sur ce qui y est, sans regarder la spécificité. Le projet redonne
| donc ses jetons d'un simple `:root`, comme on s'y attend (T-D2).
|
| Le reste de cette feuille reste HORS couche, exprès : elle habille h11k, et
| pour repeindre le kit il faut continuer de gagner contre lui.
*/
@layer t11d-jetons {

:root {
  /* Les couleurs système. Le bleu est la couleur d'accentuation par défaut :
     c'est lui que `data-accent` remplace, et lui seul. */
  --sys-blue:   #007aff;
  --sys-red:    #ff3b30;
  --sys-orange: #ff9500;
  --sys-green:  #34c759;
  --sys-gray:   #8e8e93;

  /* Les fonds. Le contenu est CLAIR sur un cadre gris : l'inverse d'un site. */
  --fond:       #f2f2f7;
  --fond-carte: #ffffff;
  --fond-champ: #7676801f;
  --fond-doux:  #7676800f;
  --verre:      rgba(249, 249, 249, .82);

  /* Le texte, en quatre niveaux, comme les « labels » du système. */
  --texte:   #1c1c1e;
  --texte-2: #3c3c4399;
  --texte-3: #3c3c434d;
  --filet:   #3c3c432e;

  /*
  | LE PONT VERS LES MOTEURS. Ils lisent ces noms-là : une seule source de
  | vérité, plusieurs vocabulaires.
  |
  | `--accent` est le nom GÉNÉRIQUE, le dernier repli de tous les moteurs
  | avant leur couleur d'usine. Ne pas le publier, c'est laisser chacun sortir
  | la sienne : g13r ouvrait sa palette en rose fuchsia au milieu d'une
  | application bleue, et le praticien qui avait choisi sa couleur voyait
  | l'écran le plus visible de l'application lui répondre autre chose.
  */
  --accent:        var(--sys-blue);
  --color-brand:   var(--sys-blue);
  --color-primary: var(--sys-blue);
  --color-bg:      var(--fond);
  --color-surface: var(--fond-carte);
  --color-text:    var(--texte);
  --color-muted:   var(--texte-2);
  --color-line:    var(--filet);
  --color-danger:  var(--sys-red);
  --color-warning: var(--sys-orange);
  --color-success: var(--sys-green);

  --r-carte:  12px;
  --r-champ:  10px;
  --r-pilule: 980px;

  /* La fonte de l'appareil : rien à télécharger, aucune IP qui part. */
  --font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display",
               system-ui, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --t-grand: 28px;   /* le grand titre d'un écran */
  --t-titre: 20px;   /* le titre d'une carte */
  --t-corps: 16px;
  --t-petit: 14px;
  --t-menu:  12px;   /* l'en-tête d'une section, en petites capitales */

  --t11d-cote: 244px;
  --t11d-cote-plie: 64px;
  --t11d-lecture: 72rem;   /* la largeur au-delà de laquelle un texte ne se lit plus */
  --t11d-large: 108rem;    /* les écrans qui se manipulent, pas ceux qui se lisent */
  /* L'air sous l'en-tête d'écran. Il vaut à la fois la MARGE et la hauteur de
     la bande qui la peint : deux valeurs qui doivent rester égales n'en font
     qu'une. Voir « L'AIR SOUS L'EN-TÊTE SE PEINT ». */
  --t11d-air-entete: 18px;

  --anim: .22s cubic-bezier(.25, .1, .25, 1);
}

/* Le sombre n'est pas le clair inversé : les fonds DESCENDENT jusqu'au noir,
   et le bleu MONTE pour rester lisible dessus. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="clair"]) {
    --sys-blue: #0a84ff; --sys-red: #ff453a; --sys-orange: #ff9f0a; --sys-green: #30d158;
    --fond: #000000; --fond-carte: #1c1c1e; --fond-champ: #7676803d; --fond-doux: #7676801f;
    --verre: rgba(28, 28, 30, .78);
    --texte: #ffffff; --texte-2: #ebebf599; --texte-3: #ebebf54d; --filet: #54545899;
    color-scheme: dark;
  }
}
/* Le choix explicite l'emporte sur celui du système, dans les DEUX sens. */
:root[data-theme="sombre"] {
  --sys-blue: #0a84ff; --sys-red: #ff453a; --sys-orange: #ff9f0a; --sys-green: #30d158;
  --fond: #000000; --fond-carte: #1c1c1e; --fond-champ: #7676803d; --fond-doux: #7676801f;
  --verre: rgba(28, 28, 30, .78);
  --texte: #ffffff; --texte-2: #ebebf599; --texte-3: #ebebf54d; --filet: #54545899;
  color-scheme: dark;
}
:root[data-theme="clair"] {
  --sys-blue: #007aff; --sys-red: #ff3b30; --sys-orange: #ff9500; --sys-green: #34c759;
  --fond: #f2f2f7; --fond-carte: #ffffff; --fond-champ: #7676801f; --fond-doux: #7676800f;
  --verre: rgba(249, 249, 249, .82);
  --texte: #1c1c1e; --texte-2: #3c3c4399; --texte-3: #3c3c434d; --filet: #3c3c432e;
  color-scheme: light;
}

/*
| La couleur d'accentuation (T-D7).
|
| Le rouge, l'orange et le vert ne sont PAS proposés : dans un tableau de bord
| ils portent un sens — urgent, en retard, fait. Les offrir comme couleur de
| marque rend l'urgence illisible, et c'est un défaut qu'on ne voit qu'en
| production, le jour où quelque chose presse.
*/
:root[data-accent="indigo"]   { --sys-blue: #5856d6; }
:root[data-accent="violet"]   { --sys-blue: #a24bd0; }
:root[data-accent="rose"]     { --sys-blue: #d6336c; }
:root[data-accent="sarcelle"] { --sys-blue: #0090a8; }
:root[data-accent="ardoise"]  { --sys-blue: #4a5568; }
@media (prefers-color-scheme: dark) {
  :root[data-accent="indigo"]:not([data-theme="clair"])   { --sys-blue: #6e6cf0; }
  :root[data-accent="violet"]:not([data-theme="clair"])   { --sys-blue: #bd6ae4; }
  :root[data-accent="rose"]:not([data-theme="clair"])     { --sys-blue: #f0558c; }
  :root[data-accent="sarcelle"]:not([data-theme="clair"]) { --sys-blue: #16b3cc; }
  :root[data-accent="ardoise"]:not([data-theme="clair"])  { --sys-blue: #8a94a6; }
}
:root[data-theme="sombre"][data-accent="indigo"]   { --sys-blue: #6e6cf0; }
:root[data-theme="sombre"][data-accent="violet"]   { --sys-blue: #bd6ae4; }
:root[data-theme="sombre"][data-accent="rose"]     { --sys-blue: #f0558c; }
:root[data-theme="sombre"][data-accent="sarcelle"] { --sys-blue: #16b3cc; }
:root[data-theme="sombre"][data-accent="ardoise"]  { --sys-blue: #8a94a6; }

}

/* ══════════════════════════════════════════════════════════════════════════
   2. LE CADRE
   ══════════════════════════════════════════════════════════════════════════ */
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--fond);
  color: var(--texte);
  font-family: var(--font-sans);
  font-size: var(--t-corps);
  line-height: 1.45;
  letter-spacing: -.01em;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--sys-blue); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3 { letter-spacing: -.02em; font-weight: 600; }

/* Le mouvement est discret, et coupé pour qui n'en veut pas. */
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

/*
| L'application : la colonne, et la scène.
|
| La colonne ne défile pas avec le contenu et ne se recharge pas d'un écran à
| l'autre. C'est CE détail qui fait qu'on se croit dans une application plutôt
| que sur un site.
*/
.t11d-app { display: grid; grid-template-columns: var(--t11d-cote) 1fr; min-height: 100vh; }
html.t11d-plie .t11d-app { grid-template-columns: var(--t11d-cote-plie) 1fr; }
.t11d-scene { display: flex; flex-direction: column; min-width: 0; background: var(--fond); }

/* ══════════════════════════════════════════════════════════════════════════
   3. LA COLONNE
   ══════════════════════════════════════════════════════════════════════════ */
.t11d-cote {
  position: sticky; top: 0; align-self: start;
  height: 100vh; box-sizing: border-box;
  display: flex; flex-direction: column; gap: 14px;
  padding: 14px 12px;
  background: var(--fond);
  border-inline-end: .5px solid var(--filet);
  overflow: hidden;
}
.t11d-cote-tete { display: flex; align-items: center; gap: 8px; padding: 2px 6px 0; min-height: 30px; }
.t11d-marque {
  flex: 1; min-width: 0;
  display: flex; align-items: center; gap: 8px;
  font-size: 17px; font-weight: 600; color: var(--texte); letter-spacing: -.02em;
}
/*
| LE SIGNE DE LA MARQUE. Carré, à la taille d'un caractère majuscule, et
| coupé au rayon des tuiles du système : c'est ainsi qu'on reconnaît une
| application, pas à un rectangle collé au bord.
|
| `flex: none` parce qu'un signe ne rétrécit pas : c'est le NOM qui s'abrège
| quand la colonne manque de place, et lui seul porte l'ellipse.
*/
.t11d-logo {
  flex: none; width: 32px; height: 32px;
  border-radius: 8px; object-fit: cover;
}
.t11d-marque-nom { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.t11d-marque:hover { text-decoration: none; opacity: .7; }
.t11d-plier {
  flex: none; display: grid; place-items: center;
  width: 30px; height: 30px; padding: 0;
  color: var(--texte-2); background: none; border: none; border-radius: 8px; cursor: pointer;
  transition: background var(--anim), color var(--anim);
}
.t11d-plier:hover { background: var(--fond-champ); color: var(--texte); }
.t11d-plier svg { width: 18px; height: 18px; }

/*
| LE CLAVIER DOIT VOIR OÙ IL EST.
|
| La coquille habillait ses commandes au survol et les laissait NUES au
| clavier : le bouton de repli, les destinations, la porte de sortie et les
| onglets du pouce recevaient bien le focus, sans que rien ne le montre. Une
| personne qui navigue à la tabulation perdait le fil dès la première touche.
|
| Un halo, pas un liseré : le même que celui des champs et des boutons de
| h11k, pour que la coquille et le kit parlent d'une seule voix. Et
| `:focus-visible`, jamais `:focus` : la souris n'a pas besoin d'être
| rassurée, elle vient de cliquer.
*/
.t11d-plier:focus-visible,
.t11d-lien:focus-visible,
.t11d-cote a.t11d-quitter:focus-visible,
.t11d-cote a.t11d-langue:focus-visible,
.t11d-onglet:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3.5px color-mix(in srgb, var(--sys-blue) 30%, transparent);
}
.t11d-marque:focus-visible { outline: 2px solid var(--sys-blue); outline-offset: 3px; border-radius: 4px; }

/* Caché, le raccourci ne laisse pas sa place : il est posé en absolu, mais
   `hidden` doit primer si un projet lui donne un display. */
.t11d-raccourci[hidden] { display: none; }

/* Le champ de recherche. Il n'est pas obligé de filtrer quoi que ce soit :
   dans une création qui a la palette (g13r), c'est une PORTE — la première
   lettre tapée l'ouvre en grand (voir t11d.js). */
/*
| UN CHAMP DE RECHERCHE, ET IL N'Y EN A QU'UN.
|
| Le style vivait sous `.t11d-cote-recherche input` : il n'appartenait qu'à la
| colonne, et le champ qu'un écran pose au-dessus de sa liste ne pouvait pas
| lui ressembler — même geste, deux apparences. Il porte donc une CLASSE, que
| la colonne et les écrans se partagent.
|
| La loupe est un fond, pas une balise : rien à poser dans le HTML, rien qui
| puisse se retrouver dans l'ordre de tabulation, et un champ sans texte se
| reconnaît quand même. Elle vaut 14 px, elle se retourne sous dir="rtl".
|
| Le remplissage est TRANSLUCIDE (`--fond-champ`) : le même champ se pose
| aussi bien sur le gris de la scène que sur le blanc d'une carte, sans qu'on
| ait à lui écrire deux fonds.
*/
.t11d-chercher {
  width: 100%; box-sizing: border-box;
  padding-block: 7px; padding-inline: 30px 12px;
  font: inherit; font-size: 14px; color: var(--texte);
  background: var(--fond-champ) no-repeat left 9px center;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 16 16' fill='none' stroke='%238e8e93' stroke-width='1.75' stroke-linecap='round'%3E%3Ccircle cx='7' cy='7' r='4.6'/%3E%3Cpath d='M10.6 10.6L14 14'/%3E%3C/svg%3E");
  border: none; border-radius: 9px;
}
.t11d-chercher::placeholder { color: var(--texte-3); }
.t11d-chercher:focus {
  outline: none; box-shadow: 0 0 0 3.5px color-mix(in srgb, var(--sys-blue) 26%, transparent);
}
/* La petite croix que WebKit ajoute aux champs `type="search"` : elle se
   dessine à sa façon, par-dessus la nôtre. On la retire, la loupe et le
   texte d'exemple suffisent à dire ce qu'est le champ. */
.t11d-chercher::-webkit-search-decoration,
.t11d-chercher::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }

.t11d-cote-recherche { position: relative; }
/* Dans la colonne, et là seulement : la place du badge « ⌘K » à droite. */
.t11d-cote-recherche .t11d-chercher { padding-inline-end: 42px; }
/* Le raccourci s'affiche DANS le champ : c'est la seule façon de l'apprendre
   sans le dire. Il s'efface dès qu'on écrit — à ce moment-là la palette est
   déjà ouverte, et le rappeler serait bavard. */
.t11d-raccourci {
  position: absolute; inset-inline-end: 8px; top: 50%; transform: translateY(-50%);
  pointer-events: none;
  font: inherit; font-size: 10.5px; font-weight: 600; letter-spacing: .02em;
  color: var(--texte-3); background: var(--fond-carte);
  border: 1px solid var(--filet); border-radius: 5px; padding: 1px 5px;
  transition: opacity var(--anim);
}
.t11d-cote-recherche .t11d-chercher:focus ~ .t11d-raccourci { opacity: 0; }

.t11d-nav { display: flex; flex-direction: column; gap: 2px; }
.t11d-lien {
  position: relative;
  display: flex; align-items: center; gap: 10px;
  padding: 7px 10px; border-radius: 8px;
  font-size: 14px; font-weight: 500; color: var(--texte);
  transition: background var(--anim), color var(--anim);
}
.t11d-lien:hover { background: var(--fond-doux); text-decoration: none; }
/* La destination courante : un FOND, pas une couleur criarde. L'icône seule
   prend l'accentuation — c'est assez pour savoir où l'on est. */
.t11d-lien.is-actif { background: var(--fond-champ); }
.t11d-lien.is-actif svg { color: var(--sys-blue); }
.t11d-lien svg { width: 20px; height: 20px; flex: none; color: var(--texte-2); }
.t11d-nom { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.t11d-compte {
  margin-inline-start: auto; flex: none;
  min-width: 20px; padding: 1px 6px; box-sizing: border-box;
  font-size: 11px; font-weight: 700; line-height: 16px; text-align: center;
  color: #fff; background: var(--sys-red); border-radius: var(--r-pilule);
}

.t11d-cote-pied { margin-top: auto; display: flex; flex-direction: column; gap: 8px; }
.t11d-qui { display: flex; flex-direction: column; padding: 0 10px; font-size: 13px; line-height: 1.3; }
.t11d-role { color: var(--texte-2); font-size: 12px; }
.t11d-cote a.t11d-quitter {
  display: flex; align-items: center; justify-content: flex-start; gap: 10px;
  padding: 7px 10px; border-radius: 8px; background: none;
  color: var(--texte-2); font-size: 14px; font-weight: 500;
}
.t11d-cote a.t11d-quitter:hover { background: var(--fond-doux); color: var(--texte); text-decoration: none; }
.t11d-quitter svg { width: 20px; height: 20px; color: inherit; }

/* Le choix de la langue : des pastilles de deux lettres, pas un menu
   déroulant. Deux ou trois langues se montrent ; au-delà, elles passent à la
   ligne. Repliée, la colonne les garde : c'est deux lettres. */
.t11d-langues { display: flex; flex-wrap: wrap; gap: 4px; padding: 0 10px 2px; }
.t11d-cote a.t11d-langue {
  padding: 2px 7px; border-radius: var(--r-pilule);
  font-size: 11px; font-weight: 600; letter-spacing: .03em;
  color: var(--texte-3); background: none;
}
.t11d-cote a.t11d-langue:hover { background: var(--fond-doux); color: var(--texte); text-decoration: none; }
.t11d-cote a.t11d-langue.is-actif { color: var(--texte); background: var(--fond-champ); }
html.t11d-plie .t11d-langues { justify-content: center; padding: 0; }

/* Repliée, la colonne ne garde que les icônes. Les infobulles de h11k
   prennent le relais des libellés (data-h11k-tip, posé par la coquille). */
html.t11d-plie .t11d-nom,
html.t11d-plie .t11d-qui,
html.t11d-plie .t11d-cote-recherche,
html.t11d-plie .t11d-marque-nom { display: none; }
/*
| REPLIÉE, LA COLONNE GARDE SON SIGNE — mais l'un SOUS l'autre.
|
| Le signe et le bouton de repli ne tiennent pas côte à côte dans les 64 px
| d'une colonne repliée : 32 et 30, plus l'écart, plus le rembourrage, et le
| bouton sortait par le bord. Ils se rangent donc en pile.
|
| Le nom, lui, disparaît : c'est ce qui prend la largeur — et c'est bien le
| signe qu'on garde des deux, puisque c'est à lui qu'on reconnaît l'app.
*/
html.t11d-plie .t11d-cote-tete { flex-direction: column; gap: 6px; }
html.t11d-plie .t11d-cote-tete .t11d-marque { flex: none; }
html.t11d-plie .t11d-lien,
html.t11d-plie .t11d-cote a.t11d-quitter { justify-content: center; padding: 9px 0; }
html.t11d-plie .t11d-cote-tete { justify-content: center; }
html.t11d-plie .t11d-compte {
  position: absolute; top: 2px; inset-inline-end: 6px; margin: 0;
  min-width: 16px; padding: 0 4px; font-size: 10px; line-height: 15px;
}

/* ══════════════════════════════════════════════════════════════════════════
   4. LE CORPS
   ══════════════════════════════════════════════════════════════════════════ */
.t11d-corps {
  max-width: var(--t11d-lecture); margin: 0 auto; width: 100%;
  padding: 20px 20px 64px; box-sizing: border-box;
}
/* Certains écrans ne se LISENT pas, ils se MANIPULENT : un formulaire et son
   résultat côte à côte gagnent toute la largeur. Le confort de lecture vaut
   pour du texte, pas pour un établi. */
.t11d-corps.est-large { max-width: var(--t11d-large); }
.t11d-pied { padding: 24px 20px 40px; color: var(--texte-3); font-size: 13px; text-align: center; }

/*
| L'EN-TÊTE D'ÉCRAN, QUI RESTE.
|
| Le titre dit où l'on est, et ses boutons sont les gestes de cet écran-là.
| Défilés hors de vue, on ne sait plus sur quel écran on travaille, et le
| geste principal demande de remonter. Sur une liste de quatre-vingt-dix
| consultations, ça arrive dix fois.
|
| UN SEUL BLOC, ET C'EST LA LEÇON. Faire coller le titre et les onglets
| SÉPARÉMENT demande de connaître la hauteur du premier pour poser le second :
| deux éléments collants, deux décalages à tenir d'accord, et le jour où le
| titre passe sur deux lignes les onglets se retrouvent dessous, coupés. On
| enveloppe donc les deux dans `.t11d-entete`, qui colle d'une pièce.
|
| PAS UNE LIGNE DE JAVASCRIPT. Le fond est posé en permanence : au repos il
| vaut celui de la page, on ne le voit pas ; collé, il masque ce qui défile
| dessous. Rien à détecter, rien qui puisse ne pas se déclencher.
*/
.t11d-entete {
  position: sticky; top: 0; z-index: 3;
  /*
  | L'AIR SOUS L'EN-TÊTE FAIT PARTIE DE L'EN-TÊTE.
  |
  | Le fond est peint sur la boîte de remplissage : ce qu'on met en bas du
  | `padding` reste couvert, donc le contenu ne vient JAMAIS toucher le filet
  | en défilant. Une marge, elle, laisserait le contenu passer dessous et
  | coller aux onglets dès le premier tour de molette — c'est ce qu'on voyait.
  */
  padding-block: 10px 16px;
  /*
  | ET DE L'AIR APRÈS LE FILET.
  |
  | Six pixels sous le trait, le premier bloc de l'écran venait s'y appuyer :
  | la carte semblait accrochée à l'en-tête au lieu d'être posée sur la page.
  |
  | Cet air ne peut PAS être un `padding` : il serait au-dessus du filet, et
  | l'on n'aurait fait qu'épaissir l'en-tête. Ce qu'on veut est de la place
  | APRÈS le trait. C'est donc une marge — et une marge ne peint rien, ce qui
  | est le vrai piège : voir la bande, juste en dessous.
  */
  margin-bottom: var(--t11d-air-entete);
}
/*
| LE TITRE ET SES GESTES, SUR UNE SEULE LIGNE.
|
| Le titre à gauche, les gestes de l'écran à droite, alignés sur son bas. Ce
| n'est pas de la décoration : le geste principal d'un écran se cherche à
| hauteur de son titre, pas une ligne plus bas. Ils passent à la ligne quand
| la place manque vraiment, et là seulement.
*/
.t11d-titre {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 16px; flex-wrap: wrap; margin: 8px 0 18px;
}
/* Un titre seul, sans onglets, colle aussi bien — mais pas s'il est déjà
   dans l'enveloppe : deux positions collantes imbriquées se disputent. */
.t11d-corps > .t11d-titre {
  position: sticky; top: 0; z-index: 3;
  padding-block: 10px 16px; margin-bottom: var(--t11d-air-entete);
}
.t11d-entete .t11d-titre  { position: static; padding-block: 0; margin-bottom: 0; }

/*
| LE FOND DÉBORDE, MAIS PAS N'IMPORTE OÙ.
|
| Le corps est une colonne de lecture centrée : un fond qui s'arrête à ses
| bords ferait une carte flottante, pas un en-tête. On l'étale donc largement
| — et la scène le COUPE (`overflow-x: clip`), sinon il passe par-dessus la
| colonne de gauche. C'est arrivé : l'en-tête recouvrait la recherche et le
| premier lien du menu.
|
| `clip` et non `hidden` : `hidden` ferait de la scène un conteneur de
| défilement, et l'en-tête collerait au haut de la scène au lieu de l'écran.
*/
.t11d-scene { overflow-x: clip; }
.t11d-entete::before, .t11d-corps > .t11d-titre::before {
  content: ''; position: absolute; inset-block: 0; inset-inline: -100vw; z-index: -1;
  background: var(--fond);
  border-bottom: .5px solid var(--filet);
}
/*
| L'AIR SOUS L'EN-TÊTE SE PEINT.
|
| Une marge ne peint rien. L'en-tête restait donc en place, le contenu passait
| dessous — et RÉAPPARAISSAIT dans les dix-huit pixels sous le filet : une
| bande de photos et de titres qui glissait entre l'en-tête fixe et l'en-tête
| de la carte, juste en dessous. Vu le 2026-09-09, et c'est pire que pas d'air
| du tout : ça donne l'impression que la page fuit par une fente.
|
| On peint donc la bande, du fond de la PAGE : au repos elle est invisible
| (c'est exactement la couleur qui serait là), et en défilant elle est opaque.
| Elle vit dans le contexte d'empilement de l'en-tête, donc au-dessus du
| contenu, comme le fond de l'en-tête lui-même.
|
| Sa hauteur et la marge sont le MÊME jeton : si l'une bouge sans l'autre, la
| fente revient — sur quelques pixels, ce qui est encore plus difficile à
| voir.
*/
.t11d-entete::after, .t11d-corps > .t11d-titre::after {
  content: ''; position: absolute; top: 100%; inset-inline: -100vw; z-index: -1;
  height: var(--t11d-air-entete);
  background: var(--fond);
}
.t11d-entete > .t11d-sections { margin-bottom: 0; }
.t11d-entete > .t11d-sections { border-bottom: none; }
.t11d-entete > .t11d-titre + .t11d-sections { margin-top: 10px; }

/* Rien ne colle quand rien ne défile : sur un écran court, la barre
   n'apporterait qu'une ligne de plus. */
@media (max-height: 30rem) {
  .t11d-entete, .t11d-corps > .t11d-titre { position: static; }
  .t11d-entete::after, .t11d-corps > .t11d-titre::after { display: none; }
}
/* Ni à l'impression : une feuille de papier ne défile pas. */
@media print {
  .t11d-entete, .t11d-corps > .t11d-titre { position: static; }
  .t11d-entete::before, .t11d-corps > .t11d-titre::before,
  .t11d-entete::after, .t11d-corps > .t11d-titre::after { display: none; }
}
.t11d-titre h1 { margin: 0; font-size: var(--t-grand); font-weight: 700; letter-spacing: -.03em; }
.t11d-titre h2 { margin: 0; font-size: var(--t-titre); }
.t11d-titre p  { margin: 4px 0 0; }
.t11d-gestes { display: flex; gap: 8px; flex-wrap: wrap; }
.t11d-muet { color: var(--texte-2); font-size: var(--t-petit); }

/*
| La carte : du blanc sur le gris. Ni ombre, ni filet.
|
| L'ombre est le réflexe du web ; un système d'exploitation sépare par le
| FOND, et ça suffit. Le filet qu'on ajoutait par-dessus doublait la
| séparation : deux frontières pour une seule limite, et une page qui compte
| dix cartes finit quadrillée.
|
| Ce qui sépare est donc le contraste entre `--fond-carte` et `--fond` : c'est
| lui qu'il faut tenir en changeant de thème, jamais un trait de rattrapage.
*/
.t11d-carte {
  background: var(--fond-carte);
  border-radius: var(--r-carte);
  padding: 16px 18px;
  margin-bottom: 16px;
}
.t11d-carte > :first-child { margin-top: 0; }
.t11d-carte > :last-child  { margin-bottom: 0; }
/* L'ÉCART DE 16, COMME ENTRE DEUX CARTES. Il valait 18 : deux cartes côte à
   côte étaient plus éloignées que les mêmes empilées, et l'œil le voyait sans
   savoir le nommer. Un écart entre encarts est un écart entre encarts, quel
   que soit l'axe. */
.t11d-colonnes { display: grid; grid-template-columns: 1.7fr 1fr; gap: 16px; align-items: start; }
/* Une colonne doit pouvoir RÉTRÉCIR. Sans ça, un enfant large (une ligne qui
   ne se coupe pas, un tableau) impose sa largeur minimale à la piste : le
   rapport 1.7/1 s'écrase vers 1/1, et la grille finit par déborder de l'écran.
   C'est le piège `min-width: auto` de la grille, et il ne se voit qu'à
   l'usage. */
.t11d-colonnes > * { min-width: 0; }
@media (max-width: 62rem) { .t11d-colonnes { grid-template-columns: 1fr; } }

/* ══════════════════════════════════════════════════════════════════════════
   5. LA BARRE DU POUCE (sous 48 rem)
   ══════════════════════════════════════════════════════════════════════════
   Les mêmes destinations, le même compteur, en bas de l'écran. La liste est
   écrite UNE fois dans la coquille et sert les deux barres : deux listes
   finissent toujours par ne plus dire pareil.
   ══════════════════════════════════════════════════════════════════════════ */
.t11d-onglets { display: none; }
/* Caché, un onglet ne prend pas sa part de la barre : `display:flex` battrait
   la règle du navigateur, il faut le dire ici. */
.t11d-onglet[hidden] { display: none; }
@media (max-width: 48rem) {
  .t11d-app { display: block; }
  .t11d-cote { display: none; }
  .t11d-corps { padding: 16px 16px 96px; }
  .t11d-carte { padding: 14px 16px; border-radius: 14px; }
  .t11d-titre h1 { font-size: 26px; }
  .t11d-pied { padding-bottom: 96px; }

  .t11d-onglets {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
    display: flex; justify-content: space-around; align-items: stretch;
    padding: 6px 4px calc(6px + env(safe-area-inset-bottom));
    background: var(--verre);
    backdrop-filter: saturate(180%) blur(20px);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    border-top: .5px solid var(--filet);
  }
  .t11d-onglet {
    position: relative; flex: 1;
    display: flex; flex-direction: column; align-items: center; gap: 3px;
    padding: 4px 2px; border-radius: 10px;
    font-size: 10px; font-weight: 500; color: var(--texte-2); text-align: center;
  }
  .t11d-onglet:hover { text-decoration: none; }
  /* « Rechercher » est un GESTE, donc un bouton — mais il doit se ranger dans
     la barre comme les destinations qui l'entourent. */
  /* `font: inherit` prendrait la taille du corps et écraserait les 10 px de
     la barre : on ne reprend que la fonte, jamais la taille. */
  button.t11d-onglet { font-family: inherit; background: none; border: none;
                       padding: 4px 2px; cursor: pointer; }
  .t11d-onglet svg { width: 24px; height: 24px; }
  .t11d-onglet.is-actif { color: var(--sys-blue); }
  .t11d-onglet .t11d-compte {
    position: absolute; top: 0; inset-inline-end: calc(50% - 20px); margin: 0;
    min-width: 16px; padding: 0 4px; font-size: 10px; line-height: 15px;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   6. L'HABILLAGE DES MOTEURS
   ══════════════════════════════════════════════════════════════════════════
   h11k dessine les composants ; ici on leur donne la DA. On ne REDESSINE
   rien : on repeint. Le jour où h11k gagne un composant, il arrive habillé.
   ══════════════════════════════════════════════════════════════════════════ */
.h11k-btn, button.h11k-btn, a.h11k-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 32px; padding: 6px 14px;
  font: inherit; font-size: 15px; font-weight: 500; letter-spacing: -.01em;
  color: var(--sys-blue);
  background: var(--fond-doux);
  border: none; border-radius: var(--r-pilule);
  cursor: pointer; white-space: nowrap;
  transition: background var(--anim), transform var(--anim), opacity var(--anim);
}
.h11k-btn:hover { background: var(--fond-champ); text-decoration: none; }
.h11k-btn:active { transform: scale(.97); }
.h11k-btn.is-primary { color: #fff; background: var(--sys-blue); }
.h11k-btn.is-primary:hover { background: var(--sys-blue); opacity: .88; }
.h11k-btn.is-alerte, .h11k-btn.is-danger { color: #fff; background: var(--sys-red); }
.h11k-btn.is-alerte:hover, .h11k-btn.is-danger:hover { background: var(--sys-red); opacity: .88; }
.h11k-btn[disabled] { opacity: .4; cursor: default; }
.h11k-btn:focus-visible {
  outline: none; box-shadow: 0 0 0 3.5px color-mix(in srgb, var(--sys-blue) 30%, transparent);
}

/* Le tableau est une LISTE, pas une grille de tableur : pas de bordure
   verticale, un filet horizontal, et l'en-tête en petites capitales. */
.h11k-table { width: 100%; border-collapse: collapse; font-size: 15px; }
.h11k-table th {
  text-align: start; font-size: 11px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .06em; color: var(--texte-3);
  padding-block: 6px; padding-inline: 0 12px;
  border-bottom: .5px solid var(--filet); white-space: nowrap;
}
.h11k-table td { padding-block: 11px; padding-inline: 0 12px; border-bottom: .5px solid var(--filet); vertical-align: middle; }
.h11k-table tr:last-child td { border-bottom: none; }
.h11k-table tbody tr:hover { background: var(--fond-doux); }

/* Les alertes : douces, jamais criardes. Un bandeau rouge vif dans un écran
   de travail se voit une fois, puis ne se voit plus. */
.h11k-alert {
  padding: 11px 14px; border-radius: var(--r-champ); font-size: var(--t-petit);
  margin-bottom: 16px; border: none;
}
.h11k-alert.is-danger  { color: var(--sys-red);    background: color-mix(in srgb, var(--sys-red) 10%, transparent); }
.h11k-alert.is-warning { color: var(--sys-orange); background: color-mix(in srgb, var(--sys-orange) 12%, transparent); }
.h11k-alert.is-success { color: var(--sys-green);  background: color-mix(in srgb, var(--sys-green) 12%, transparent); }

/* Les feuilles (modales de h11k) : elles montent du bas sur téléphone, et se
   posent au centre sur un grand écran. */
.h11k-modal {
  border: none; border-radius: var(--r-carte); padding: 0;
  background: var(--fond-carte); color: var(--texte);
  max-width: 40rem; width: calc(100% - 32px);
  box-shadow: 0 24px 60px -20px rgba(0, 0, 0, .35);
}
.h11k-modal::backdrop { background: rgba(0, 0, 0, .35); backdrop-filter: blur(3px); }
@media (max-width: 48rem) {
  .h11k-modal {
    margin: auto auto 0; width: 100%; max-width: none;
    border-radius: 16px 16px 0 0; max-height: 92vh;
  }
}

/*
| Les champs : ceux du système, pas ceux du navigateur.
|
| La règle porte sur TOUT le corps, et pas seulement sur un formulaire
| déclaré : un champ oublié retombe sur le rendu natif du navigateur, et ça
| se voit tout de suite au milieu d'une application soignée.
*/
.t11d-form { display: grid; gap: 14px; }
.t11d-form label, .t11d-corps label { display: block; font-size: 13px; color: var(--texte-2); margin-bottom: 5px; }
/* `.t11d-chercher` est EXCLU : ce n'est pas un champ de formulaire, c'est un
   filtre. Il porte son propre remplissage et sa loupe, et la règle
   ci-dessous est trop précise pour qu'une simple classe la batte. */
.t11d-corps input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not(.t11d-chercher),
.t11d-corps select, .t11d-corps textarea {
  width: 100%; box-sizing: border-box;
  padding: 9px 12px; font: inherit; font-size: 15px;
  color: var(--texte); background: var(--fond-carte);
  border: .5px solid var(--filet); border-radius: var(--r-champ);
  transition: border-color var(--anim), box-shadow var(--anim);
}
.t11d-corps input:not(.t11d-chercher):focus, .t11d-corps select:focus, .t11d-corps textarea:focus {
  outline: none; border-color: var(--sys-blue);
  box-shadow: 0 0 0 3.5px color-mix(in srgb, var(--sys-blue) 22%, transparent);
}
/*
| CE QUE LE NAVIGATEUR REMPLIT RESTE UN CHAMP DE L'APP.
|
| Un champ prérempli par le gestionnaire de mots de passe reçoit du navigateur
| un fond bleu pâle que `background-color` ne touche pas : il est peint par le
| moteur de rendu, au-dessus de la feuille. Sur un écran de connexion, c'est
| justement le seul moment où les deux champs sont remplis — et les deux
| ressortaient en bleu au milieu d'une page qui ne l'est pas.
|
| Le seul levier est une OMBRE INTÉRIEURE assez grande pour couvrir le champ.
| Elle repeint le fond ; `-webkit-text-fill-color` reprend l'encre, que le
| navigateur repeint aussi.
|
| L'ANNEAU DE FOCUS SE RAJOUTE À LA MAIN sur l'état `:focus` : une ombre
| remplace l'autre, et sans cette seconde déclaration un champ prérempli
| perdait son anneau au moment où on le sélectionne.
|
| `transition-delay` de dix jours : c'est le vieux remède contre l'animation
| de teinte que Chrome joue en arrivant. Il n'y a pas d'autre prise.
*/
.t11d-corps input:-webkit-autofill,
.t11d-corps input:-webkit-autofill:hover,
.t11d-corps input:-webkit-autofill:active,
.t11d-corps select:-webkit-autofill,
.t11d-corps textarea:-webkit-autofill,
.t11d-corps input:autofill,
.t11d-corps select:autofill,
.t11d-corps textarea:autofill {
  -webkit-box-shadow: 0 0 0 100rem var(--fond-carte) inset;
          box-shadow: 0 0 0 100rem var(--fond-carte) inset;
  -webkit-text-fill-color: var(--texte);
  caret-color: var(--texte);
  transition: background-color 0s 864000s;
}
.t11d-corps input:-webkit-autofill:focus,
.t11d-corps select:-webkit-autofill:focus,
.t11d-corps textarea:-webkit-autofill:focus,
.t11d-corps input:autofill:focus,
.t11d-corps select:autofill:focus,
.t11d-corps textarea:autofill:focus {
  -webkit-box-shadow: 0 0 0 100rem var(--fond-carte) inset,
                      0 0 0 3.5px color-mix(in srgb, var(--sys-blue) 22%, transparent);
          box-shadow: 0 0 0 100rem var(--fond-carte) inset,
                      0 0 0 3.5px color-mix(in srgb, var(--sys-blue) 22%, transparent);
}

.t11d-form textarea { min-height: 5.5rem; resize: vertical; line-height: 1.5; }
input[type="checkbox"], input[type="radio"] { accent-color: var(--sys-blue); margin-inline-end: 6px; }
/* Le dépôt d'un fichier : un bouton, pas la barre grise du navigateur. */
.t11d-corps input[type="file"] { font-size: 14px; color: var(--texte-2); }
.t11d-corps input[type="file"]::file-selector-button {
  margin-inline-end: 10px; padding: 6px 12px; font: inherit; font-size: 14px; font-weight: 500;
  color: var(--sys-blue); background: var(--fond-doux); border: none;
  border-radius: var(--r-pilule); cursor: pointer; transition: background var(--anim);
}
.t11d-corps input[type="file"]::file-selector-button:hover { background: var(--fond-champ); }
/* Une case à cocher garde son libellé À CÔTÉ d'elle, pas au-dessus. */
.t11d-corps fieldset label {
  display: inline-flex; align-items: center; gap: 6px;
  margin-inline-end: 16px; font-size: 15px; color: var(--texte);
}
.t11d-grille { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: 14px; }
.t11d-enligne { display: flex; gap: 10px; align-items: end; flex-wrap: wrap; }

/* Un groupe de champs : trois blocs se remplissent mieux que douze champs
   à la file. */
.t11d-groupe { border: none; margin: 0 0 18px; padding: 0; }
.t11d-groupe > legend {
  padding: 0; margin-bottom: 8px;
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .07em; color: var(--texte-3);
}

/* ══════════════════════════════════════════════════════════════════════════
   7. LES MOTIFS D'UN TABLEAU DE BORD
   ══════════════════════════════════════════════════════════════════════════
   Ce ne sont pas des composants (h11k les fait) : ce sont des DISPOSITIONS
   qu'on retrouve dans toute application de travail.
   ══════════════════════════════════════════════════════════════════════════ */

/* Les sections d'un écran : un menu horizontal qui allège une page trop
   longue, sans en faire cinq pages. */
.t11d-sections {
  display: flex; gap: 4px; flex-wrap: wrap;
  margin: 0 0 20px; border-bottom: .5px solid var(--filet);
}
.t11d-sections a {
  padding: 8px 12px 10px; color: var(--texte-2); font-size: 15px; font-weight: 500;
  border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.t11d-sections a:hover { color: var(--texte); text-decoration: none; }
.t11d-sections a.is-actif { color: var(--texte); font-weight: 600; border-bottom-color: var(--sys-blue); }

/* Le vis-à-vis : on règle à gauche, on voit à droite. L'aperçu suit le
   défilement — on tape en bas du formulaire et on voit toujours le résultat. */
.t11d-face {
  display: grid; grid-template-columns: minmax(20rem, 27rem) 1fr;
  gap: 20px; align-items: start; margin-top: 18px;
}
@media (max-width: 70rem) { .t11d-face { grid-template-columns: 1fr; } }
/* Le même piège que `.t11d-colonnes` : sans ça, un aperçu à taille réelle
   (une page A4 fait 794 pixels) impose sa largeur à la piste `1fr`, et le
   vis-à-vis pousse l'écran vers la droite au lieu de se réduire. */
.t11d-face > * { min-width: 0; }
.t11d-face-apercu { position: sticky; top: 16px; }

/* Le bouton d'enregistrement ne se cherche pas en bas d'un long formulaire. */
.t11d-barre-collante {
  position: sticky; bottom: 0; z-index: 2;
  display: flex; gap: 8px; flex-wrap: wrap; align-items: center;
  margin: 0 -18px -4px; padding: 12px 18px;
  background: var(--verre);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-top: .5px solid var(--filet);
}

/* Une ligne de réglage : ce que ça change, à gauche ; le champ, à droite.
   Un réglage dont on ne lit pas l'effet se règle à l'aveugle. */
.t11d-reglage {
  display: flex; gap: 20px; align-items: flex-start; justify-content: space-between;
  padding: 14px 0; border-bottom: .5px solid var(--filet);
}
.t11d-reglage:last-of-type { border-bottom: none; }
.t11d-reglage > div:first-child { flex: 1; min-width: 0; }
.t11d-reglage label { font-weight: 500; }
.t11d-reglage p { margin: 3px 0 0; font-size: 13px; color: var(--texte-2); max-width: 42rem; }
.t11d-reglage-champ { flex: none; display: flex; align-items: center; gap: 8px; }
.t11d-reglage-champ input, .t11d-reglage-champ select { min-width: 9rem; }
.t11d-unite { color: var(--texte-3); font-size: 13px; }

/* Les pastilles d'état. Elles disent un état, pas une marque : c'est pour ça
   que le rouge et le vert leur sont réservés (T-D7). */
.t11d-pastille {
  display: inline-block; padding: 2px 8px; border-radius: var(--r-pilule);
  font-size: 12px; font-weight: 600; color: var(--texte-2); background: var(--fond-champ);
  white-space: nowrap;
}
.t11d-pastille.is-urgent { color: #fff; background: var(--sys-red); }
.t11d-pastille.is-attente { color: var(--sys-orange); background: color-mix(in srgb, var(--sys-orange) 14%, transparent); }
.t11d-pastille.is-fait { color: var(--sys-green); background: color-mix(in srgb, var(--sys-green) 14%, transparent); }

/* La liste : le filet part du TEXTE, pas du bord de la carte. C'est le détail
   qui distingue une liste de système d'un tableau HTML. */
.t11d-liste { list-style: none; margin: 0; padding: 0; }
.t11d-liste > li {
  padding: 12px 0; border-bottom: .5px solid var(--filet);
  display: flex; gap: 12px; align-items: center; justify-content: space-between;
}
.t11d-liste > li:last-child { border-bottom: none; }
/*
| DEUX FORMES DE LISTE, et il faut choisir.
|
| Par défaut, une entrée est une LIGNE : un libellé à gauche, une valeur ou un
| geste à droite, sur une seule ligne. C'est la liste des réglages, des
| comptes, des pièces.
|
| `est-fiches` en fait une ENTRÉE : un titre, puis du texte en dessous. Sans
| cette variante, les blocs d'une entrée deviennent les colonnes d'une ligne
| flex et le texte se lit dans des couloirs de 80 pixels — c'est illisible, et
| c'est la faute qu'on fait en réutilisant la liste par réflexe.
*/
.t11d-liste.est-fiches > li {
  display: block; padding: 14px 0;
}
.t11d-liste.est-fiches > li > * + * { margin-top: 4px; }
.t11d-liste.est-fiches > li > :first-child { margin-top: 0; }

/* « Un titre, une date à droite. » Elle passe à la ligne quand la place
   manque : une ligne qui refuse de se couper élargit sa colonne, et c'est
   toute la grille qui déborde. */
.t11d-titre-ligne {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 12px; flex-wrap: wrap;
}
.t11d-titre-ligne > a { font-weight: 500; color: var(--texte); }
.t11d-titre-ligne > a:hover { color: var(--sys-blue); text-decoration: none; }
.t11d-titre-ligne .t11d-quand {
  color: var(--texte-2); font-size: var(--t-petit); white-space: nowrap;
}
/* Une ligne qui mène quelque part le dit, par un chevron. */
.t11d-chevron::after {
  content: ''; flex: none; width: 7px; height: 7px; margin-inline-start: 4px;
  border-right: 2px solid var(--texte-3); border-bottom: 2px solid var(--texte-3);
  transform: rotate(-45deg); transition: transform var(--anim);
}
a.t11d-chevron:hover::after { transform: rotate(-45deg) translate(2px, 2px); }

/* L'écran vide PARLE. Un tableau à zéro ligne n'est pas une information,
   c'est une impasse : on dit ce qu'il n'y a pas, et quoi faire. */
.t11d-vide {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  padding: 40px 20px; text-align: center; color: var(--texte-2);
}
.t11d-vide strong { color: var(--texte); font-weight: 600; font-size: 15px; }
.t11d-vide p { margin: 0; font-size: 13.5px; max-width: 26rem; }

/* Une jauge : elle ne devient chaude que quand il faut agir. */
.t11d-jauge {
  height: 6px; border-radius: var(--r-pilule); background: var(--fond-champ);
  overflow: hidden; margin: 4px 0 16px;
}
.t11d-jauge > span { display: block; height: 100%; background: var(--sys-blue); border-radius: var(--r-pilule); }
.t11d-jauge.is-tendue > span { background: var(--sys-orange); }

/* Ce qui ne se défait pas se VOIT avant d'être cliqué. */
/* Une carte n'a plus de filet ; celle qui ALERTE en reprend un, et c'est
   justement ce qui la distingue des autres. */
.t11d-danger { border: 1px solid color-mix(in srgb, var(--sys-red) 30%, var(--filet)); }
.t11d-danger h2 { color: var(--sys-red); }

/* Une liste qu'on ORDONNE : elle se lit de haut en bas, et cet ordre a un
   sens. On monte, on descend ; le rang se renumérote (voir t11d.js). */
.t11d-ordre { list-style: none; margin: 0 0 16px; padding: 0; counter-reset: rang; }
.t11d-ordre > li {
  display: flex; gap: 12px; align-items: center;
  padding: 10px 0; border-top: .5px solid var(--filet); counter-increment: rang;
}
.t11d-ordre > li:first-child { border-top: none; }
.t11d-ordre > li > div:first-of-type { flex: 1; min-width: 0; }
.t11d-rang {
  flex: none; width: 22px; height: 22px; border-radius: var(--r-pilule);
  display: grid; place-items: center; font-size: 12px; font-weight: 700;
  color: var(--texte-2); background: var(--fond-champ);
}
.t11d-ordre > li.is-fixe .t11d-rang { background: var(--sys-blue); color: #fff; }
.t11d-ordre > li:not(.is-fixe) .t11d-rang::before { content: counter(rang); }
.t11d-ordre-gestes { display: flex; gap: 4px; flex: none; }
.t11d-ordre-gestes button { min-width: 30px; padding: 2px 8px; }

/* Le fil de chargement : trois cents millisecondes de silence, puis un fil.
   Montré tout de suite, il clignote à chaque clic et fatigue ; jamais montré,
   une liaison lente donne l'impression d'un écran mort. */
.t11d-fil {
  position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 90;
  background: var(--sys-blue); transform: scaleX(0); transform-origin: left;
  opacity: 0; transition: transform .3s ease-out, opacity .2s;
}
html.t11d-charge .t11d-fil { opacity: 1; transform: scaleX(.7); }

/* ── Le squelette (T-D14) ───────────────────────────────────────────────────
   Il occupe la place de ce qui arrive. Ses proportions sont celles d'un écran
   ordinaire : un titre, une ligne, des cartes. Il n'imite pas un écran précis —
   un squelette qui promet la mauvaise forme ment deux fois. */

.t11d-squelette { display: flex; flex-direction: column; gap: var(--sp-3, 16px); }
.t11d-os {
  border-radius: var(--r-2, 10px);
  background: linear-gradient(90deg,
    var(--t-fond-2, rgba(0,0,0,.05)) 25%,
    var(--t-fond-3, rgba(0,0,0,.09)) 37%,
    var(--t-fond-2, rgba(0,0,0,.05)) 63%);
  background-size: 400% 100%;
  animation: t11d-os 1.4s ease-in-out infinite;
}
.t11d-os-titre { height: 30px; width: min(320px, 60%); }
.t11d-os-ligne { height: 14px; width: min(480px, 85%); }
.t11d-os-cartes { display: grid; gap: var(--sp-3, 16px); grid-template-columns: 1fr; }
@media (min-width: 700px) { .t11d-os-cartes { grid-template-columns: repeat(3, 1fr); } }
.t11d-os-carte { height: 140px; }

@keyframes t11d-os { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }

/* Un mouvement perpétuel n'est pas une information pour qui le supporte mal. */
@media (prefers-reduced-motion: reduce) {
  .t11d-os { animation: none; }
}

/* Le mot pour ceux qui n'ont pas l'image : « Chargement… », lu par le lecteur
   d'écran, invisible pour les autres. */
.t11d-invisible {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ══════════════════════════════════════════════════════════════════════════
   8. LA PORTE
   ══════════════════════════════════════════════════════════════════════════
   L'écran de connexion en deux panneaux : à gauche ce que le logiciel fait,
   à droite la seule chose à faire ici. Le moteur donne la DISPOSITION ; le
   contenu appartient à la création (QT1).
   ══════════════════════════════════════════════════════════════════════════ */
.t11d-corps.est-porte {
  display: grid; place-items: center;
  max-width: none; min-height: 100vh; padding: 0; box-sizing: border-box;
}
.t11d-porte {
  display: grid; grid-template-columns: 1.08fr 1fr;
  width: min(76rem, 100%);
  /* Jamais plus de 90 % de la hauteur : sur un grand écran la carte reste une
     carte, et sur un portable elle ne pousse pas le pied hors de vue. */
  height: 90vh; max-height: 90vh; min-height: min(560px, 90vh);
  border: .5px solid var(--filet); border-radius: 18px; overflow: hidden;
  background: var(--fond-carte);
  box-shadow: 0 30px 80px -40px rgba(0, 0, 0, .4);
}
.t11d-porte-visuel, .t11d-porte-entree { overflow-y: auto; }
.t11d-porte-visuel {
  position: relative; display: flex; flex-direction: column; gap: 22px;
  padding: 42px 40px; isolation: isolate;
  background: linear-gradient(150deg,
    color-mix(in srgb, var(--sys-blue) 10%, var(--fond-carte)),
    color-mix(in srgb, var(--sys-blue) 3%, var(--fond-carte)));
}
/* Les taches : trois dégradés flous, DESSINÉS et non chargés. Ils donnent la
   lumière ; le texte reste sombre, donc lisible. */
.t11d-taches { position: absolute; inset: 0; z-index: -1; overflow: hidden; }
.t11d-taches > span { position: absolute; border-radius: 50%; filter: blur(60px); opacity: .5; }
.t11d-porte-entree { display: grid; place-items: center; padding: 40px 24px; background: var(--fond-carte); }
.t11d-porte-form { width: min(24rem, 100%); }
.t11d-porte-form h1 { font-size: 26px; margin: 0 0 6px; }

@media (max-width: 62rem) {
  .t11d-corps.est-porte { padding: 0; }
  .t11d-porte {
    grid-template-columns: 1fr;
    width: 100%; height: auto; max-height: none; min-height: 100vh;
    border: none; border-radius: 0; box-shadow: none;
  }
  .t11d-porte-visuel, .t11d-porte-entree { overflow: visible; }
  .t11d-porte-entree { padding: 30px 24px 46px; align-items: start; }
}

/* ══════════════════════════════════════════════════════════════════════════
   9. LE SENS DE LECTURE
   ══════════════════════════════════════════════════════════════════════════
   Toute la coquille est écrite en propriétés LOGIQUES (inline-start,
   inline-end, padding-inline) : sous dir="rtl", la colonne passe à droite,
   les compteurs changent de bord et les marges se retournent d'elles-mêmes.
   i18n pose ce dir sur <html> ; sans lui, rien de tout ceci ne s'allume.

   Ne restent ici que les trois choses qu'aucune propriété logique ne sait
   dire : une image de fond, une rotation, un point d'origine.
   ══════════════════════════════════════════════════════════════════════════ */

/* La loupe du champ de recherche est une image de fond : background-position
   n'a pas d'équivalent logique. */
[dir="rtl"] .t11d-chercher { background-position: right 9px center; }

/* Le chevron est dessiné par deux bordures tournées de 45°. À droite il
   pointe vers l'avant ; à gauche, il doit pointer de l'autre côté. */
[dir="rtl"] .t11d-chevron::after { transform: rotate(135deg); }
[dir="rtl"] a.t11d-chevron:hover::after { transform: rotate(135deg) translate(2px, 2px); }

/* Le fil de chargement part du bord où commence la lecture. */
[dir="rtl"] .t11d-fil { transform-origin: right; }

/* ══════════════════════════════════════════════════════════════════════════
   10. L'IMPRESSION
   ══════════════════════════════════════════════════════════════════════════
   Ces métiers viennent du papier : l'impression est une vue, pas une pensée
   après coup. Il ne part que le contenu.
   ══════════════════════════════════════════════════════════════════════════ */
@media print {
  .t11d-cote, .t11d-onglets, .t11d-pied, .t11d-fil,
  .t11d-sections, .t11d-barre-collante, .sans-impression,
  .h11k-tip { display: none !important; }
  .t11d-app { display: block; }
  body, .t11d-scene { background: #fff !important; }
  .t11d-corps { padding: 0 !important; max-width: none; }
  .t11d-carte { border: none; padding: 0; margin-bottom: 12px; break-inside: avoid; }
  @page { size: A4; margin: 16mm 18mm; }
}