/* Evolii Face : ce que le socle et le commun ne dessinent pas.

   LE MOTEUR TIENT LA PALETTE, L'APP N'EN TIENT AUCUNE.

   Cette feuille posait ses propres couleurs (`--papier`, `--encre`) et les
   passait au moteur en réécrivant `--fond`, `--texte`, `--filet` et
   `--sys-blue`. Elle croyait « donner sa couleur au moteur » ; en réalité
   elle lui coupait les jambes, et de trois façons à la fois :

     · le THÈME ne pouvait plus exister - les couleurs étaient écrites en
       clair, sans variante sombre ;
     · le FOCUS et la colonne de gauche gardaient un filet fixe, là où le
       moteur en a un par thème ;
     · l'ACCENTUATION était morte. Le moteur range ses jetons dans
       `@layer t11d-jetons` ; une règle SANS couche l'emporte sur une règle
       couchée quelle que soit sa spécificité. `:root { --sys-blue: … }`
       d'ici battait donc `:root[data-accent="violet"]` de là-bas, et les six
       pastilles des réglages ne changeaient rien du tout. Mesuré le
       2026-09-08 : `--sys-blue` restait #4a6fa5 sur les six choix.

   On ne redéclare donc plus RIEN de ce que le moteur publie : `--fond`,
   `--fond-carte`, `--texte`, `--texte-2`, `--filet`, `--sys-blue`, ni
   `color-scheme`, ni le fond du `body` (t11d les pose déjà, et par thème).
   Les noms maison qui restent ne sont plus des couleurs : ce sont des ALIAS
   vers le moteur, gardés parce que le commun les lit (`ecrans.css`). */

:root {
  --papier: var(--fond);
  --encre:  var(--texte);
  --mut:    var(--texte-2);
}

/*
| LE GRIS DES TEXTES SECONDAIRES, UN CRAN PLUS SOMBRE.
|
| t11d livre `--texte-2` à 60 % et `--texte-3` à 30 % d'opacité : les aides des
| réglages et les sous-titres sortaient trop clairs pour être lus (le
| propriétaire, 2026-09-11). On les relève à 72 % et 58 %, dans les TROIS états
| du thème, hors couche pour l'emporter sur la couche `t11d-jetons`.
*/
:root {
  --texte-2: #3c3c43b8;
  --texte-3: #3c3c4394;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="clair"]) { --texte-2: #ebebf5b8; --texte-3: #ebebf594; }
}
:root[data-theme="sombre"] { --texte-2: #ebebf5b8; --texte-3: #ebebf594; }

/*
| LE PONT VERS h11k, REBRANCHÉ SUR LE MOTEUR.
|
| Ces noms-là (`--color-*`) sont ceux que h11k, h12s et g13r lisent. t11d les
| publie déjà, branchés sur sa palette - mais il les publie DANS
| `@layer t11d-jetons`, et `m14r.css` les redonne d'un `:root` SANS couche,
| chargé juste avant. Or ce qui n'est dans aucune couche l'emporte sur ce qui
| est couché, quel que soit l'ordre : c'est le jeu de couches lui-même, et il
| joue ici contre nous.
|
| Résultat mesuré le 2026-09-08 : la page courante de la pagination, la colonne
| triée, les anneaux de focus et les pastilles de h11k sortaient en VIOLET
| (#7c3aed, la couleur d'exemple de m14r) au milieu d'une application rose, et
| les six pastilles d'accentuation des Réglages n'y changeaient rien. Les
| surfaces de h11k venaient de la même feuille d'exemple : en thème sombre
| elles restaient claires, `m14r.css` attendant `[data-theme="dark"]` là où le
| moteur écrit `sombre`.
|
| On ne pose donc AUCUNE couleur ici - on ne fait que redonner à ces alias la
| valeur du moteur, comme les trois lignes au-dessus. Écrit sans couche dans
| la feuille chargée en dernier, ce bloc gagne contre l'exemple, et h11k suit
| enfin l'accentuation choisie dans les Réglages, thème compris.
*/
:root {
  --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);
  /*
  | L'ENCRE POSÉE SUR L'ACCENT : BLANCHE, ET C'EST NOUS QUI LE DISONS.
  |
  | h11k la choisit sinon par la règle de luminance WCAG, qui donne du NOIR
  | sur le bleu du système (#007aff) - pendant que le bouton principal de la
  | même page y pose du blanc. Le chiffre de la page courante sortait donc en
  | noir à trente pixels d'un « Nouvelle patiente » blanc, sur le même fond.
  |
  | Deux encres sur un seul fond dans un seul écran, c'est le défaut visible ;
  | le demi-point de contraste que la règle gagne ne se voit pas. Depuis h11k
  | 1.5.2, une valeur déclarée ici a le dernier mot sur son calcul.
  */
  --h11k-on-accent: #fff;
  /* Même règle pour les composants de formulaire (h12s 1.9.4) : le jour choisi
     du calendrier et l'heure choisie s'écrivent en blanc sur l'accent, comme
     le bouton principal à côté. */
  --h12s-on-accent: #fff;
}

/* Les scènes qui portent une photo gardent leur fond clair en thème sombre.
   La règle ne vit PAS ici : `commun.css` est chargé après cette feuille et
   gagnait à spécificité égale - écrite ici, elle était inerte (mesuré le
   2026-09-08 : la scène du comparateur ressortait noire). Elle est donc là
   où la photo est la matière, dans `commun/assets/commun.css`. */

/* ── LA PORTE : ce que l'app fait, et la seule chose à faire ici ──────────
   Le moteur t11d donne la DISPOSITION (`t11d-porte`, deux panneaux) ; ce qui
   suit est le contenu, qui appartient à l'app.

   ÉPURÉ VEUT DIRE MOINS DE CHOSES, PAS DES CHOSES PLUS PETITES. Le panneau
   ne dit plus que quatre choses : d'où l'on est, ce que l'app fait, à quoi
   ça ressemble, et ce qu'elle promet. Le dessin est le sujet - c'est lui
   qu'on regarde, le reste l'encadre. */
/*
| L'ENCART N'EN EST PLUS UN (décision du proprio, 2026-09-09).
|
| Le moteur pose la porte comme une CARTE : coins arrondis et grande ombre
| portée, posée sur un fond gris. C'est juste sur un écran de très grande
| taille, où la carte tient toute seule ; ici on la veut franche. Angles
| droits, aucune ombre, aucun filet : deux surfaces qui se touchent, et c'est
| le changement de fond qui dit où passe la limite.
|
| On ne touche qu'à la DA : la disposition, les proportions et le repli en une
| colonne restent au moteur.
*/
.t11d-porte { border-radius: 0; box-shadow: none; border: 0; }

/*
| LE PANNEAU PORTE LA MARQUE, DONC SES COULEURS.
|
| L'insigne est cuivre sur crème ; le panneau était bleu, et le carré crème y
| flottait comme une vignette collée. On ne repeint pas l'app pour autant -
| l'espace de travail reste bleu, et il a ses raisons (le bleu ne veut rien
| dire, là où le rouge, l'orange et le vert disent urgent, en retard, fait).
|
| C'est la PORTE qui s'accorde à la marque, et elle seule : ici, et nulle part
| ailleurs, `--sys-blue` vaut le cuivre. Tout ce qui en dérive suit sans qu'on
| y touche - les points des phrases, les chevrons de la poignée, l'anneau de
| focus, et les trois taches de lumière. Le formulaire, lui, est de l'autre
| côté du pli : il garde le bleu de l'app, parce qu'on y travaille.
|
| Les teintes sont RELEVÉES SUR LE FICHIER du proprio, pas approchées à l'œil.
*/
.t11d-porte-visuel {
  --marque-cuivre:  #a2521f;
  --marque-cuivre-2:#c47a45;
  --marque-creme:   #efe7e1;
  --sys-blue: var(--marque-cuivre);

  /*
  | UNE SEULE COMPOSITION, PAS TROIS COINS.
  |
  | `space-between` écartait les blocs jusqu'aux bords : l'insigne restait
  | seul en haut, les phrases seules en bas, et un grand vide au milieu qu'on
  | prenait pour un oubli. Tout se groupe et se centre - le panneau se lit
  | d'un bloc, et le vide se retrouve autour au lieu d'être dedans.
  */
  justify-content: center; padding: 44px 46px; gap: 0;
}

/* L'insigne et le nom. L'insigne porte déjà le mot « evolii », mais à
   quarante pixels ce mot n'est plus lisible : le nom écrit à côté n'est pas un
   doublon, c'est ce qui se lit. */
.face-porte-marque {
  display: flex; align-items: center; gap: 13px;
  margin-bottom: 30px;
  font-size: 17px; font-weight: 650; letter-spacing: -.02em;
  color: var(--texte, var(--encre));
}
/* Quarante pixels faisaient de l'insigne une vignette qu'on ne regardait pas.
   À soixante-quatre il devient ce qu'il est : la première chose de la page.

   PAS D'OMBRE PORTÉE. L'insigne n'est pas posé sur le panneau, il en fait
   partie - depuis que le fond part de son propre crème, l'ombre ne le
   détachait plus de rien : elle le salissait par en dessous. */
.face-porte-marque img {
  flex: none; width: 64px; height: 64px; border-radius: 16px;
}

.face-porte-dire { display: flex; flex-direction: column; }
/* UN CRAN PLUS BAS DANS L'ÉCHELLE. Quarante-quatre pixels faisaient un titre
   d'affiche : sur une porte, il écrasait tout ce qui suit - l'image comprise,
   qui est pourtant le sujet. */
.face-porte-dire h2 {
  margin: 0 0 7px; font-size: clamp(28px, 2.9vw, 37px); font-weight: 700;
  letter-spacing: -.035em; line-height: 1.06;
}
/*
| LES GRIS DE L'APP NE TIENNENT PAS SUR DU CRÈME.
|
| `--texte-2` et `--texte-3` sont réglés pour le blanc et le gris de l'espace
| de travail. Posés sur le crème chaud de la porte, ils perdent leur contraste
| et virent au délavé - la légende de la photo en devenait presque invisible.
|
| Les tons doux de ce panneau sont donc TIRÉS DE L'ENCRE, réchauffés d'une
| pointe de cuivre : ils restent de la même famille que le fond, et ils se
| lisent. Ils suivent le thème, puisqu'ils partent de `--texte`.
*/
.face-porte-sous {
  margin: 0; font-size: 16px;
  color: color-mix(in srgb, var(--texte, #111) 74%, var(--marque-cuivre, #a2521f));
}

/* ── L'AVANT-GOÛT : le comparateur, sur la porte ──────────────────────────
   Posé sur sa propre lumière : une lueur derrière lui le décolle du fond sans
   qu'on ait à lui dessiner un cadre. */
/* L'image est le sujet, pas l'affiche : bornée, elle laisse de l'air autour
   d'elle et le panneau cesse d'être une colonne pleine. */
.face-porte-demo { position: relative; margin: 26px 0 0; width: min(420px, 100%); }

/* PLUS DE PILE DERRIÈRE L'IMAGE. Elle disait « il y en a d'autres » en deux
   traits ; à cette taille elle ne lisait plus que comme une bosse blanche
   posée entre le sous-titre et la photo. Épurer, c'est retirer ce qui ne se
   comprend pas du premier coup d'œil. */
.face-porte-pile { display: none; }

.face-porte-cadre {
  position: relative; isolation: isolate; overflow: hidden;
  border-radius: 16px; background: var(--fond-carte, #fff);
  box-shadow: 0 24px 46px -20px color-mix(in srgb, var(--sys-blue, #0a84ff) 34%, transparent);
  touch-action: pan-y;                 /* le doigt glisse le curseur, la page suit */
}
.face-porte-photo { display: block; width: 100%; height: auto; }
/* L'APRÈS est posé PAR-DESSUS et découpé à gauche : le curseur le découvre en
   allant vers la droite, comme dans l'app. */
.face-porte-dessus { position: absolute; inset: 0; clip-path: inset(0 0 0 var(--x, 56%)); }

/*
| LE TRAIT ET LA POIGNÉE : deux objets posés SUR une photo.
|
| Un trait blanc plein disparaît sur une peau claire et découpe une peau
| sombre. Il garde donc son blanc, mais porte sa propre ombre - un demi-pixel
| de contour et un halo très diffus : il se détache de tout, sans jamais
| peser.
|
| La poignée passe de trente-quatre à quarante pixels - c'est la seule chose
| qu'on attrape, et quarante est la cible qu'un doigt trouve sans viser. Elle
| est en verre plutôt qu'en blanc plein : un liseré intérieur, un flou du fond
| derrière elle, et deux ombres au lieu d'une (une courte qui la pose, une
| longue qui la soulève).
*/
.face-porte-trait {
  position: absolute; top: 0; bottom: 0; left: var(--x, 56%);
  width: 2px; translate: -1px 0;
  background: rgba(255, 255, 255, .96);
  box-shadow: 0 0 0 .5px rgba(0, 0, 0, .12), 0 0 14px rgba(0, 0, 0, .22);
}
.face-porte-poignee {
  position: absolute; top: 50%; left: 50%; translate: -50% -50%;
  display: grid; place-items: center; width: 40px; height: 40px;
  color: var(--sys-blue, #0a84ff); border-radius: 50%;
  background: rgba(255, 255, 255, .93);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .9),
              0 1px 2px rgba(0, 0, 0, .16),
              0 8px 20px -6px rgba(0, 0, 0, .30);
}
.face-porte-poignee svg { width: 21px; height: 21px; }

.face-porte-etiq {
  position: absolute; bottom: 10px;
  padding: 3px 9px; border-radius: 999px;
  font-size: 11px; font-weight: 600; letter-spacing: .01em;
  color: #fff; background: rgba(0, 0, 0, .42);
  backdrop-filter: blur(4px);
}
.face-porte-etiq.est-avant { left: 10px; }
.face-porte-etiq.est-apres { right: 10px; }

/*
| LE CHAMP EST LE GESTE, la poignée n'est qu'un dessin.
|
| Un `input[type=range]` transparent couvre le cadre : la souris, le doigt et
| les flèches du clavier marchent sans qu'on écrive une ligne pour chacun, et
| un lecteur d'écran annonce un curseur, ce qu'il est. Écrire le glissement à
| la main aurait demandé trois écouteurs et n'aurait servi que la souris.
*/
/*
| POURQUOI CE SÉLECTEUR SI LONG.
|
| Le moteur habille tous les champs du corps par
| `.t11d-corps input:not([type=checkbox]):not([type=radio]):not([type=file])`
| - quatre classes de spécificité. Un `.t11d-corps .face-porte-curseur` en
| vaut deux : il perdait, et le curseur sortait en rectangle blanc posé sur la
| photo, qu'il recouvrait entièrement. On égale sa spécificité au lieu de
| sortir un `!important`, et l'égalité suffit puisque cette feuille est
| chargée après la sienne.
*/
/* t11d 1.6.10 a ajouté un `:not(.t11d-…)` à sa règle : cinq classes. On en
   met six, sinon le rectangle blanc revient (vu en prod le 2026-09-11). */
.t11d-corps.est-porte .face-porte-cadre > input.face-porte-curseur[type="range"][data-h12s-native],
.t11d-corps.est-porte input.face-porte-curseur[type="range"],
.face-porte-curseur {
  position: absolute; inset: 0; z-index: 2;
  width: 100%; height: 100%; min-height: 0; margin: 0; padding: 0;
  background: none; border: 0; border-radius: 0; box-shadow: none;
  accent-color: transparent; cursor: ew-resize;
  -webkit-appearance: none; appearance: none;
}
/* La PISTE aussi doit disparaître : `appearance: none` sur le champ ne la
   couvre pas, et le moteur habille tous les champs du corps - le curseur
   sortait en barre bleue posée en travers de la photo. */
.face-porte-curseur::-webkit-slider-runnable-track { background: transparent; border: 0; }
.face-porte-curseur::-moz-range-track { background: transparent; border: 0; }
.face-porte-curseur::-moz-range-progress { background: transparent; }
.face-porte-curseur::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 44px; height: 100px; background: transparent; cursor: ew-resize;
}
.face-porte-curseur::-moz-range-thumb {
  width: 44px; height: 100px; background: transparent; border: 0; cursor: ew-resize;
}
.face-porte-curseur:focus-visible { outline: 2px solid var(--sys-blue, #0a84ff); outline-offset: 3px; }

.face-porte-legende {
  margin: 11px 0 0; font-size: 12.5px;
  color: color-mix(in srgb, var(--texte, #111) 58%, var(--marque-cuivre, #a2521f));
}

/* Trois phrases COURTES, sans puce ronde : un filet vertical suffit à dire
   « ceci est une liste », et il ne fait pas de bruit. */
.face-porte-points { list-style: none; margin: 26px 0 0; padding: 0; display: grid; gap: 9px; max-width: 27rem; }
.face-porte-points li {
  padding-inline-start: 15px; position: relative;
  font-size: 14.5px; line-height: 1.45;
  color: color-mix(in srgb, var(--texte, #111) 84%, var(--marque-cuivre, #a2521f));
}
.face-porte-points li::before {
  content: ""; position: absolute; inset-inline-start: 0; top: .42em;
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--sys-blue, #0a84ff); opacity: .55;
}

.face-porte-pied {
  margin: 34px 0 0; display: flex; align-items: flex-start; gap: 9px;
  font-size: 12.5px; line-height: 1.45; color: var(--texte-3, var(--mut));
}
.face-porte-pied strong { color: var(--texte-2, var(--mut)); font-weight: 600; }
.face-porte-pied .pied-ic { flex: none; width: 16px; height: 16px; margin-top: 1px; }
.face-porte-pied svg { width: 100%; height: 100%; }

/* Le bouton d'entrée porte sa touche, posée à droite SANS décentrer le
   libellé : en flux, elle aurait poussé « Se connecter » vers la gauche. */
.face-porte-entrer { position: relative; }
.face-porte-touche {
  position: absolute; inset-inline-end: 12px; top: 50%; translate: 0 -50%;
  padding: 3px 7px; border-radius: 5px;
  font: inherit; font-size: 11.5px; font-weight: 600; line-height: 1;
  color: rgba(255, 255, 255, .92); background: rgba(255, 255, 255, .20);
}

.face-porte-aide { margin: 22px 0 0; font-size: 13px; line-height: 1.45; color: var(--texte-3, var(--mut)); }

/*
| SUR UN PORTABLE, LE PANNEAU SE SERRE AU LIEU DE DÉFILER.
|
| La porte fait 90 % de la hauteur. Sur un écran de 700 pixels, la promesse du
| bas - la phrase sur l'accord, celle qui engage - passait sous le bord et il
| fallait faire défiler un panneau qu'on ne pense jamais à faire défiler. Le
| dessin rend quelques pixels, et tout tient.
*/
@media (max-height: 800px) {
  .t11d-porte-visuel { padding: 34px 40px 28px; }
  .face-porte-demo { width: min(380px, 100%); margin: 20px 0 22px; }
  .face-porte-points { gap: 8px; }
  .face-porte-pied { margin-top: 16px; }
}

/*
| SUR UN ÉCRAN ÉTROIT, LA PROMESSE S'EFFACE : ON EST VENU ENTRER.
|
| Et les espaces se refont, parce que ce n'est plus la même boîte. Sur deux
| colonnes, le panneau ÉTIRE ses trois blocs du haut au bas (`space-between`)
| et l'air se répartit tout seul. Empilé, il ne reste que deux blocs : le même
| réglage collait alors le titre en haut, l'image en bas, et creusait entre les
| deux - le sous-titre venait toucher la photo, et un grand vide s'ouvrait
| sous la légende.
|
| Les blocs se suivent donc, avec un écart écrit. La pile de fiches derrière
| l'image disparaît : c'est un détail de profondeur, et à cette largeur elle ne
| lisait plus que comme une barre blanche entre le texte et la photo.
*/
@media (max-width: 62rem) {
  .t11d-porte-visuel {
    justify-content: flex-start; gap: 18px;
    padding: 28px 22px 26px;
  }
  /* Pas de touche à montrer sur un téléphone : il n'a pas de clavier à demeure,
     et le badge n'y serait qu'un ornement de plus. */
  .face-porte-points, .face-porte-pied, .face-porte-pile,
  .face-porte-touche { display: none; }
  .face-porte-dire h2 { font-size: 27px; }
  .face-porte-sous { font-size: 15.5px; }
  /* L'image prend la largeur du panneau : centrée et plus étroite, elle
     laissait deux marges inégales avec le texte au-dessus d'elle. */
  .face-porte-demo { width: 100%; margin: 6px 0 0; }
  .face-porte-legende { margin-top: 9px; }
}

/* Les trois taches de lumière. Dessinées, jamais chargées : c'est le premier
   écran, rien ne doit retarder la connexion.

   Elles sont VOLONTAIREMENT PÂLES et très floues : une tache qu'on remarque
   est une tache qui prend la place du dessin. Le rose du premier jet arrivait
   avant le produit. */
.t11d-taches > span { filter: blur(90px); }
.tache-a { width: 52%; aspect-ratio: 1; top: -14%;   left: -12%;  background: var(--marque-cuivre-2, #c47a45); opacity: .12; }
.tache-b { width: 46%; aspect-ratio: 1; bottom: -8%; left: 18%;   background: #e0b48c; opacity: .22; }
.tache-c { width: 34%; aspect-ratio: 1; top: 34%;    right: -12%; background: #d8a4a0; opacity: .18; }
/* SUR FOND SOMBRE, LE CUIVRE MONTE D'UN TON. Le cuivre profond est fait pour
   du crème ; sur le brun sombre du panneau, les points des phrases et les
   chevrons de la poignée s'y noyaient. Les deux états du thème sont écrits :
   celui du système, et celui que le poste a choisi. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="clair"]) .t11d-porte-visuel { --sys-blue: var(--marque-cuivre-2); }
}
:root[data-theme="sombre"] .t11d-porte-visuel { --sys-blue: var(--marque-cuivre-2); }

/*
| Le panneau part du crème de l'insigne plutôt que du blanc : le carré de la
| marque cesse d'être une vignette posée dessus, il en fait partie.
|
| LE CLAIR EST EN HAUT À GAUCHE, et le crème descend vers le bas à droite.
| C'était l'inverse : le coin le plus chargé était celui où l'on commence à
| lire, et l'insigne - un carré crème - s'y posait sur du crème plus foncé que
| lui. La lumière vient d'en haut, comme partout ailleurs dans l'app.
*/
.t11d-porte-visuel {
  background: linear-gradient(150deg,
    color-mix(in srgb, var(--marque-creme, #efe7e1) 30%, var(--fond-carte, #fff)),
    color-mix(in srgb, var(--marque-creme, #efe7e1) 78%, var(--fond-carte, #fff)));
}

/*
| RIEN NE FOND SOUS LE DOIGT (décision du proprio, 2026-09-09).
|
| Les moteurs animent le survol et le focus des champs et des boutons sur une
| centaine de millisecondes. C'est agréable sur un site ; dans un outil de
| travail où l'on enchaîne les gestes, c'est un retard mesurable entre le clic
| et la preuve qu'il a pris. La couleur change à l'instant.
|
| On ne coupe QUE ce qu'on manipule : les apparitions d'écran et le squelette
| de chargement gardent leur mouvement, ils disent qu'on attend.
*/
input, select, textarea, button,
.h11k-btn, a.h11k-btn, .h11k-switch i, .evolii-onglet, .evolii-puce,
.t11d-lien, .t11d-onglet, .t11d-plier, .t11d-sections a, .h12s-select {
  transition-duration: 0s !important;
}


/*
| ── LE TÉLÉPHONE, ET D'ABORD L'IPHONE ─────────────────────────────────────
| Sous 40 rem, l'app se tient au pouce : tout ce qui se touche fait 44 px de
| haut (la règle d'Apple), les champs sont écrits en 16 px (en dessous, Safari
| zoome la page à la prise de focus et ne revient pas), l'en-tête d'écran ne
| colle plus (trois boutons sur deux lignes figeaient le tiers de l'écran) et
| les gestes se rangent sur une seule ligne qu'on fait glisser.
*/
@media (max-width: 40rem) {
  .h11k-btn { min-height: 44px; }
  .h11k-btn.is-sm { min-height: 40px; }
  .h11k-dt-prev, .h11k-dt-next, .h11k-dt-page { min-height: 40px; min-width: 40px; }
  .t11d-corps input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=color]),
  .t11d-corps select, .t11d-corps textarea, .h12s-select, .h12s-date, .h12s-time,
  .t11d-porte input, .t11d-porte select, .t11d-porte textarea {
    font-size: 16px; min-height: 44px;
  }
  .t11d-chercher { min-height: 44px; }
  /* L'en-tête d'écran : statique, et ses gestes sur une ligne qui glisse. */
  .t11d-corps > .t11d-titre { position: static; }
  .t11d-corps > .t11d-titre::before, .t11d-corps > .t11d-titre::after { display: none; }
  .t11d-corps > .t11d-titre .t11d-gestes {
    flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none;
    width: 100%; margin-inline: -16px; padding-inline: 16px; box-sizing: content-box;
    scroll-snap-type: x proximity; padding-bottom: 2px;
  }
  .t11d-corps > .t11d-titre .t11d-gestes::-webkit-scrollbar { display: none; }
  .t11d-corps > .t11d-titre .t11d-gestes > * { flex: none; scroll-snap-align: start; }
  /* Les onglets d'un écran (Paramètres) : une ligne qui glisse, jamais deux. */
  .t11d-sections { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .t11d-sections::-webkit-scrollbar { display: none; }
  .t11d-sections a { white-space: nowrap; flex: none; min-height: 44px; padding-block: 0; display: inline-flex; align-items: center; }
  /* Les feuilles tiennent dans l'écran et défilent dedans. */
  dialog.h11k-modal { max-height: calc(100dvh - 24px); overflow: auto; }
}