/** * BioTimeline — authentification et espace client. * * DÉPENDANCE : assets/shared/css/tokens.css, chargé AVANT cette feuille par * BioTimeline\Client\Portal::print_styles(). Aucune couleur, aucun espacement, * aucun rayon, aucune ombre et aucune durée n'est écrit en dur ici : tout vient * des jetons `--biotl-*`. La racine porte la classe `biotl-a` (registre * ADMIN, froid et professionnel), donc le mode sombre et l'anneau de focus * viennent des jetons sans une ligne dupliquée. * * Pourquoi l'univers admin et non l'univers mémorial : ce n'est pas la même * personne au même moment. Le portail contributeur est un lieu de recueillement * (papier, sépia, serif). L'espace client est un poste de travail où l'on gère * un abonnement et des contributeurs — et un écran de connexion doit d'abord * inspirer la fiabilité d'un service payant. * * Cinq règles tenues d'un bout à l'autre : * * 1. DEUX VOLETS SUR GRAND ÉCRAN, UN SEUL SUR MOBILE. Le formulaire à gauche, * la réassurance à droite. Le panneau de droite disparaît sous 60rem : il * rassure, il n'informe pas, et il n'a rien à faire au-dessus d'un champ * email sur un téléphone. * 2. CIBLES DE 44 PX MINIMUM. --biotl-c-tap. Un champ de 36 px est un champ * manqué une fois sur trois au doigt. * 3. PROPRIÉTÉS LOGIQUES UNIQUEMENT. inline-start / inline-end / margin-inline / * padding-block. L'hébreu bascule en RTL sans une seule règle dédiée : seules * les familles de fonte changent. * 4. AUCUNE OMBRE LOURDE. Une bordure nette et un fond légèrement distinct * valent mieux qu'un halo. Les ombres de la palette s'arrêtent à --biotl-sh-2 * sur cet écran. * 5. TRANSITIONS COURTES OU RIEN. --biotl-t-fast sur les états d'interaction, * jamais d'animation d'entrée sur un formulaire de connexion. */ /* ========================================================================== ALIAS SÉMANTIQUES DE L'ESPACE CLIENT Dérivés des jetons, jamais inventés. ========================================================================== */ .biotl-a { --biotl-c-tap: 44px; /* Hauteur plancher de tout ce qui se touche. */ --biotl-c-tap-lg: var(--biotl-s-7); /* 48 px, bouton principal. */ --biotl-c-box: 25rem; /* Largeur de la colonne de formulaire. */ --biotl-c-measure: 46ch; /* Longueur de ligne confortable. */ --biotl-c-on-accent: #ffffff; /* Encre posée sur l'accent indigo. */ background: var(--biotl-a-bg); color: var(--biotl-a-ink); -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } /* En sombre, l'accent devient un indigo clair : l'encre posée dessus doit redevenir foncée, sinon le libellé du bouton principal disparaît. */ @media (prefers-color-scheme: dark) { .biotl-a:where(:not([data-biotl-theme="light"])) { --biotl-c-on-accent: var(--biotl-a-ink-inv); } } .biotl-a[data-biotl-theme="dark"] { --biotl-c-on-accent: var(--biotl-a-ink-inv); } /* L'hébreu a ses propres familles : une pile latine tombe sur un substitut système mal aligné en RTL. */ .biotl-a[dir="rtl"], .biotl-a[lang="he"] { --biotl-font-ui: var(--biotl-font-ui-he); --biotl-font-serif: var(--biotl-font-serif-he); } *, *::before, *::after { box-sizing: border-box; } [hidden] { display: none !important; } .biotl-auth { margin: 0; min-block-size: 100vh; background: var(--biotl-a-bg); color: var(--biotl-a-ink); font-family: var(--biotl-font-ui); font-size: var(--biotl-fs-md); line-height: var(--biotl-lh-base); -webkit-font-smoothing: antialiased; } .biotl-auth a { color: var(--biotl-a-accent-ink); text-decoration-thickness: 1px; text-underline-offset: 2px; } .biotl-auth a:hover { color: var(--biotl-a-accent-ink-hover); } /* ========================================================================== ARMATURE À DEUX VOLETS ========================================================================== */ .biotl-auth__grid { display: grid; grid-template-columns: 1fr; min-block-size: 100vh; } .biotl-auth__pane { display: flex; flex-direction: column; justify-content: center; align-items: center; padding: var(--biotl-s-6) var(--biotl-s-4) var(--biotl-s-7); } .biotl-auth__box { inline-size: 100%; max-inline-size: var(--biotl-c-box); } /* ========================================================================== EN-TÊTE DE LA COLONNE ========================================================================== */ .biotl-auth__brand { margin: 0 0 var(--biotl-s-7) 0; font-size: var(--biotl-fs-sm); font-weight: 600; letter-spacing: var(--biotl-ls-caps); text-transform: uppercase; } .biotl-auth__brand-link { color: var(--biotl-a-ink-3); text-decoration: none; } .biotl-auth__brand-link:hover { color: var(--biotl-a-ink); } .biotl-auth__head { margin-block-end: var(--biotl-s-5); } .biotl-auth__kicker { margin: 0 0 var(--biotl-s-2) 0; font-size: var(--biotl-fs-xs); font-weight: 600; letter-spacing: var(--biotl-ls-caps); text-transform: uppercase; color: var(--biotl-a-accent-ink); } .biotl-auth__title { margin: 0; font-size: var(--biotl-fs-2xl); line-height: var(--biotl-lh-tight); letter-spacing: var(--biotl-ls-tight); font-weight: 650; color: var(--biotl-a-ink); } .biotl-auth__intro { margin: var(--biotl-s-3) 0 0 0; max-inline-size: var(--biotl-c-measure); color: var(--biotl-a-ink-2); font-size: var(--biotl-fs-md); } /* Zone de message. Toujours présente dans le DOM, même vide : un conteneur aria-live inséré au moment de l'erreur n'est pas annoncé de façon fiable. */ .biotl-auth__live:empty { display: none; } /* ========================================================================== MESSAGES ========================================================================== */ .biotl-flash { display: flex; gap: var(--biotl-s-2); align-items: flex-start; margin-block-end: var(--biotl-s-5); padding: var(--biotl-s-3); border: 1px solid; border-radius: var(--biotl-r-md); font-size: var(--biotl-fs-base); line-height: var(--biotl-lh-snug); } .biotl-flash__icon { display: inline-flex; flex: 0 0 auto; margin-block-start: 1px; } .biotl-flash__text { margin: 0; } .biotl-flash--error { background: var(--biotl-serious-bg); border-color: var(--biotl-serious-line); color: var(--biotl-serious); } .biotl-flash--ok { background: var(--biotl-ok-bg); border-color: var(--biotl-ok-line); color: var(--biotl-ok); } /* ========================================================================== FORMULAIRES ========================================================================== */ .biotl-form { margin: 0; } .biotl-form--nested { margin-block-start: var(--biotl-s-4); } .biotl-field { margin-block-end: var(--biotl-s-4); } .biotl-label { display: block; margin-block-end: var(--biotl-s-2); font-size: var(--biotl-fs-base); font-weight: 600; color: var(--biotl-a-ink); } .biotl-input { display: block; inline-size: 100%; min-block-size: var(--biotl-c-tap); padding: var(--biotl-s-2) var(--biotl-s-3); background: var(--biotl-a-surface); border: 1px solid var(--biotl-a-line-strong); border-radius: var(--biotl-r-md); color: var(--biotl-a-ink); font-family: inherit; font-size: var(--biotl-fs-md); line-height: var(--biotl-lh-snug); transition: border-color var(--biotl-t-fast) var(--biotl-ease), box-shadow var(--biotl-t-fast) var(--biotl-ease); } .biotl-input::placeholder { color: var(--biotl-a-ink-3); } .biotl-input:hover { border-color: var(--biotl-a-ink-4); } /* Focus visible ET focus clavier : sur un champ de saisie, l'anneau doit apparaître aussi au clic, parce qu'il sert de repère de position. */ .biotl-input:focus { outline: none; border-color: var(--biotl-a-accent-ink); box-shadow: 0 0 0 3px var(--biotl-a-focus); } .biotl-input[aria-invalid="true"] { border-color: var(--biotl-serious-line); } .biotl-help { margin: var(--biotl-s-2) 0 0 0; font-size: var(--biotl-fs-sm); line-height: var(--biotl-lh-snug); color: var(--biotl-a-ink-3); } .biotl-help--center { margin-block-start: var(--biotl-s-4); text-align: center; } /* Note de validation d'email : informative, jamais bloquante. Vide, elle ne prend aucune place — pas de saut de mise en page à la frappe. */ .biotl-note { margin: var(--biotl-s-2) 0 0 0; font-size: var(--biotl-fs-sm); line-height: var(--biotl-lh-snug); color: var(--biotl-warn); } .biotl-note:empty { display: none; } .biotl-fieldset { margin: 0 0 var(--biotl-s-4) 0; padding: 0; border: 0; } .biotl-legend { padding: 0; margin-block-end: var(--biotl-s-2); font-size: var(--biotl-fs-base); font-weight: 600; color: var(--biotl-a-ink); } /* ========================================================================== MOT DE PASSE ET BOUTON ŒIL ========================================================================== */ .biotl-pw { position: relative; display: block; } /* Réserve la place du bouton dans le champ, du bon côté en RTL comme en LTR. */ .biotl-pw__input { padding-inline-end: calc(var(--biotl-c-tap) + var(--biotl-s-1)); } .biotl-pw__toggle { position: absolute; inset-block-start: 50%; inset-inline-end: var(--biotl-s-1); transform: translateY(-50%); display: inline-flex; align-items: center; justify-content: center; inline-size: var(--biotl-c-tap); block-size: var(--biotl-c-tap); padding: 0; background: none; border: 0; border-radius: var(--biotl-r-sm); color: var(--biotl-a-ink-3); cursor: pointer; transition: color var(--biotl-t-fast) var(--biotl-ease); } .biotl-pw__toggle:hover { color: var(--biotl-a-ink); } /* Œil barré quand le mot de passe est masqué, œil ouvert quand il est visible : l'icône décrit l'état courant, pas l'action. */ .biotl-pw__toggle[aria-pressed="true"] .biotl-pw__slash { display: none; } /* ========================================================================== CHOIX (RADIO EN CARTES) ET CASES À COCHER ========================================================================== */ .biotl-choices { display: grid; gap: var(--biotl-s-2); } .biotl-choice { display: flex; gap: var(--biotl-s-3); align-items: flex-start; padding: var(--biotl-s-3); background: var(--biotl-a-surface); border: 1px solid var(--biotl-a-line); border-radius: var(--biotl-r-md); cursor: pointer; transition: border-color var(--biotl-t-fast) var(--biotl-ease), background-color var(--biotl-t-fast) var(--biotl-ease); } .biotl-choice:hover { border-color: var(--biotl-a-line-strong); } .biotl-choice input[type="radio"] { flex: 0 0 auto; inline-size: 18px; block-size: 18px; margin: 2px 0 0 0; accent-color: var(--biotl-a-accent); } .biotl-choice:has(input[type="radio"]:checked) { background: var(--biotl-a-accent-soft); border-color: var(--biotl-a-accent-line); } .biotl-choice__body { display: block; } .biotl-choice__text { display: block; font-size: var(--biotl-fs-base); font-weight: 600; color: var(--biotl-a-ink); } .biotl-choice__hint { display: block; margin-block-start: var(--biotl-s-1); font-size: var(--biotl-fs-sm); line-height: var(--biotl-lh-snug); color: var(--biotl-a-ink-3); } .biotl-badge { display: inline-block; margin-inline-start: var(--biotl-s-1); padding: 1px var(--biotl-s-2); background: var(--biotl-a-surface-3); border-radius: var(--biotl-r-pill); font-size: var(--biotl-fs-2xs); font-weight: 600; letter-spacing: var(--biotl-ls-wide); text-transform: uppercase; color: var(--biotl-a-ink-2); vertical-align: 1px; } .biotl-field--conditional { margin-block: var(--biotl-s-3) 0; } .biotl-check { display: flex; gap: var(--biotl-s-3); align-items: flex-start; margin-block: var(--biotl-s-4); font-size: var(--biotl-fs-base); line-height: var(--biotl-lh-snug); color: var(--biotl-a-ink-2); cursor: pointer; } .biotl-check input[type="checkbox"] { flex: 0 0 auto; inline-size: 18px; block-size: 18px; margin: 2px 0 0 0; accent-color: var(--biotl-a-accent); } /* Champ leurre. Hors flux et hors écran, sans display:none ni visibility: certains robots ignorent précisément ces deux propriétés. */ .biotl-honeypot { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; opacity: 0; pointer-events: none; } /* ========================================================================== BOUTONS ========================================================================== */ .biotl-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--biotl-s-2); min-block-size: var(--biotl-c-tap-lg); padding: var(--biotl-s-2) var(--biotl-s-5); border: 1px solid transparent; border-radius: var(--biotl-r-md); font-family: inherit; font-size: var(--biotl-fs-md); font-weight: 600; line-height: 1.2; text-align: center; text-decoration: none; cursor: pointer; transition: background-color var(--biotl-t-fast) var(--biotl-ease), border-color var(--biotl-t-fast) var(--biotl-ease), color var(--biotl-t-fast) var(--biotl-ease); } .biotl-btn--block { inline-size: 100%; } .biotl-btn--primary { background: var(--biotl-a-accent); color: var(--biotl-c-on-accent); box-shadow: var(--biotl-sh-1); } .biotl-btn--primary:hover { background: var(--biotl-a-accent-hover); color: var(--biotl-c-on-accent); } .biotl-btn--secondary { background: var(--biotl-a-surface); border-color: var(--biotl-a-line-strong); color: var(--biotl-a-ink); } .biotl-btn--secondary:hover { background: var(--biotl-a-surface-2); border-color: var(--biotl-a-ink-4); color: var(--biotl-a-ink); } /* État de chargement : le bouton reste lisible, il ne clignote pas, et il est réellement désactivé — c'est le seul rempart contre le double envoi d'un lien de connexion. */ .biotl-btn[disabled], .biotl-btn[aria-disabled="true"] { cursor: default; opacity: .72; } .biotl-btn--busy::before { content: ""; inline-size: 14px; block-size: 14px; border: 2px solid currentColor; border-block-start-color: transparent; border-radius: var(--biotl-r-pill); animation: biotl-spin 700ms linear infinite; } @keyframes biotl-spin { to { transform: rotate(360deg); } } /* ========================================================================== SÉPARATEUR « OU » ET PANNEAU REPLIÉ ========================================================================== */ .biotl-alt { display: flex; align-items: center; gap: var(--biotl-s-3); margin-block: var(--biotl-s-5); color: var(--biotl-a-ink-3); font-size: var(--biotl-fs-sm); text-transform: uppercase; letter-spacing: var(--biotl-ls-wide); } .biotl-alt::before, .biotl-alt::after { content: ""; flex: 1 1 auto; block-size: 1px; background: var(--biotl-a-line); } .biotl-disclose { border: 1px solid var(--biotl-a-line); border-radius: var(--biotl-r-md); background: var(--biotl-a-surface); } .biotl-disclose[open] { background: var(--biotl-a-surface-2); } .biotl-disclose__summary { display: flex; align-items: center; min-block-size: var(--biotl-c-tap); padding: var(--biotl-s-2) var(--biotl-s-3); font-size: var(--biotl-fs-base); font-weight: 600; color: var(--biotl-a-ink-2); cursor: pointer; list-style: none; } .biotl-disclose__summary::-webkit-details-marker { display: none; } /* * Chevron maison : le marqueur natif est illisible et non stylable partout. * * BORDURES PHYSIQUES, ET C'EST VOULU. Avec `border-inline-end`, la pointe se * retournait en hébreu et désignait la gauche au lieu du bas. Un chevron est * une FORME : « vers le bas » veut dire la même chose dans les deux * directions. Seule la marge reste logique — c'est la place du chevron dans * la ligne, pas son dessin. */ .biotl-disclose__summary::after { content: ""; margin-inline-start: auto; inline-size: 8px; block-size: 8px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); transition: transform var(--biotl-t-fast) var(--biotl-ease); } .biotl-disclose[open] > .biotl-disclose__summary::after { transform: rotate(-135deg); } .biotl-disclose__summary:hover { color: var(--biotl-a-ink); } .biotl-disclose > .biotl-form { padding: 0 var(--biotl-s-3) var(--biotl-s-4); } /* ========================================================================== ÉTAPES DE L'ÉCRAN D'ATTENTE ========================================================================== */ .biotl-steps { margin: 0 0 var(--biotl-s-5) 0; padding: 0; list-style: none; display: grid; gap: var(--biotl-s-4); } .biotl-steps li { display: flex; gap: var(--biotl-s-3); align-items: flex-start; } .biotl-steps__num { display: inline-flex; flex: 0 0 auto; align-items: center; justify-content: center; inline-size: 26px; block-size: 26px; background: var(--biotl-a-accent-soft); border: 1px solid var(--biotl-a-accent-line); border-radius: var(--biotl-r-pill); color: var(--biotl-a-accent-ink); font-size: var(--biotl-fs-sm); font-weight: 700; } .biotl-steps__body { font-size: var(--biotl-fs-base); line-height: var(--biotl-lh-base); color: var(--biotl-a-ink-2); } .biotl-steps__body strong { display: block; color: var(--biotl-a-ink); } /* ========================================================================== PIED DE LA COLONNE ========================================================================== */ .biotl-auth__actions { margin-block: var(--biotl-s-5) 0; } .biotl-auth__foot { margin-block: var(--biotl-s-6) 0; padding-block-start: var(--biotl-s-4); border-block-start: 1px solid var(--biotl-a-line); font-size: var(--biotl-fs-base); color: var(--biotl-a-ink-2); } .biotl-auth__legal { margin-block: var(--biotl-s-3) 0; font-size: var(--biotl-fs-sm); color: var(--biotl-a-ink-3); } .biotl-auth__legal a { color: var(--biotl-a-ink-3); } /* ========================================================================== PANNEAU DE RÉASSURANCE Masqué sous 60rem. Composition sobre : un filet, une citation, trois engagements vérifiables. Aucun logo de client que nous n'avons pas. ========================================================================== */ .biotl-aside { display: none; } .biotl-aside__rule { display: block; inline-size: var(--biotl-s-7); block-size: 2px; margin-block-end: var(--biotl-s-6); background: var(--biotl-a-accent); } .biotl-aside__quote { margin: 0; max-inline-size: 30ch; font-family: var(--biotl-font-serif); font-size: var(--biotl-fs-2xl); line-height: var(--biotl-lh-tight); letter-spacing: var(--biotl-ls-tight); color: var(--biotl-a-ink); } .biotl-aside__quote p { margin: 0; } .biotl-aside__lead { margin-block: var(--biotl-s-5) var(--biotl-s-7); max-inline-size: 40ch; font-size: var(--biotl-fs-md); color: var(--biotl-a-ink-2); } .biotl-aside__list { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--biotl-s-4); max-inline-size: 42ch; } .biotl-aside__list li { display: flex; gap: var(--biotl-s-3); align-items: flex-start; font-size: var(--biotl-fs-base); line-height: var(--biotl-lh-snug); color: var(--biotl-a-ink-2); } .biotl-aside__icon { display: inline-flex; flex: 0 0 auto; align-items: center; justify-content: center; inline-size: 32px; block-size: 32px; background: var(--biotl-a-surface); border: 1px solid var(--biotl-a-line); border-radius: var(--biotl-r-sm); color: var(--biotl-a-ink-3); } @media (min-width: 60rem) { .biotl-auth__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .biotl-auth__pane { padding: var(--biotl-s-7) var(--biotl-s-6); } .biotl-auth__box { max-inline-size: var(--biotl-c-box); } .biotl-aside { display: flex; align-items: center; padding: var(--biotl-s-7); background: var(--biotl-a-surface-2); border-inline-start: 1px solid var(--biotl-a-line); } .biotl-aside__inner { inline-size: 100%; max-inline-size: 34rem; } } @media (min-width: 80rem) { .biotl-auth__grid { grid-template-columns: minmax(0, 30rem) minmax(0, 1fr); } .biotl-auth__pane { align-items: flex-end; padding-inline: var(--biotl-s-8); } .biotl-aside__quote { font-size: var(--biotl-fs-3xl); } } /* Contrastes forcés : les cartes et les champs doivent garder un contour. */ @media (forced-colors: active) { .biotl-input, .biotl-choice, .biotl-disclose, .biotl-btn { border: 1px solid CanvasText; } } /* Impression : personne n'imprime un écran de connexion, mais si cela arrive, on n'imprime ni le panneau de réassurance ni les boutons. */ @media print { .biotl-aside, .biotl-btn, .biotl-skip { display: none !important; } } /* ========================================================================== CIBLES TACTILES DES ÉCRANS D'ENTRÉE — WCAG 2.5.5 Ce sont les premiers écrans qu'un client rencontre, et les seuls qu'il traverse au téléphone en tenant autre chose dans l'autre main. ========================================================================== */ /* « Mot de passe oublié ? » — le lien de secours, celui qu'on cherche quand rien ne marche. Il mesurait 15 px de haut. */ .biotl-help--center a { display: inline-flex; align-items: center; min-block-size: var(--biotl-c-tap); } /* Le nom du site au-dessus du formulaire : c'est le retour à l'accueil. */ .biotl-auth__brand-link { display: inline-flex; align-items: center; min-block-size: var(--biotl-c-tap); } .biotl-check { min-block-size: var(--biotl-c-tap); } /* ========================================================================== LE SÉLECTEUR DE LANGUE DE L'ESPACE Il vit dans client-auth.css et non dans client-app.css parce que les DEUX coques le portent, et que seule celle-ci est chargée par les deux. Le placer dans la feuille applicative aurait donné un menu sans style sur l'écran de connexion — c'est-à-dire sur le seul écran où quelqu'un qui ne lit pas le français en a absolument besoin. ========================================================================== */ .biotl-langpick { position: relative; } .biotl-langpick__button { display: inline-flex; align-items: center; gap: var(--biotl-s-2); /* 44 px dans LES DEUX dimensions : replié sur un téléphone, ce bouton se réduit au globe, et un carré de 41 px se manque au pouce. */ min-block-size: var(--biotl-c-tap); min-inline-size: var(--biotl-c-tap); justify-content: center; padding: var(--biotl-s-1) var(--biotl-s-3); border-radius: var(--biotl-r-md); cursor: pointer; list-style: none; color: var(--biotl-a-ink-2); font-size: var(--biotl-fs-sm); font-weight: 600; } .biotl-langpick__button::-webkit-details-marker { display: none; } .biotl-langpick__button:hover { background: var(--biotl-a-surface-3); color: var(--biotl-a-ink); } .biotl-langpick__globe { display: inline-flex; color: var(--biotl-a-ink-3); } /* Sous 30rem, le nom de la langue cède la place : le globe et le menu suffisent, et la barre d'un téléphone n'a pas dix centimètres à donner. */ .biotl-langpick__now { display: none; max-inline-size: 9rem; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } @media (min-width: 30rem) { .biotl-langpick__now { display: block; } } .biotl-langpick__panel { position: absolute; z-index: 40; inset-block-start: calc(100% + var(--biotl-s-2)); inset-inline-end: 0; min-inline-size: 13rem; max-block-size: 60vh; overflow-y: auto; padding: var(--biotl-s-2); background: var(--biotl-a-surface); border: 1px solid var(--biotl-a-line); border-radius: var(--biotl-r-md); box-shadow: var(--biotl-sh-4); } .biotl-langpick__list { margin: 0; padding: 0; list-style: none; } .biotl-langpick__item { display: flex; align-items: center; gap: var(--biotl-s-3); min-block-size: var(--biotl-c-tap); padding: var(--biotl-s-2) var(--biotl-s-3); border-radius: var(--biotl-r-sm); color: var(--biotl-a-ink); font-size: var(--biotl-fs-base); text-decoration: none; } .biotl-langpick__item:hover { background: var(--biotl-a-surface-3); color: var(--biotl-a-ink); } .biotl-langpick__item.is-current { background: var(--biotl-a-accent-soft); color: var(--biotl-a-accent-ink); font-weight: 650; } .biotl-langpick__code { flex: none; min-inline-size: 2.2rem; font-size: var(--biotl-fs-2xs); font-weight: 700; letter-spacing: var(--biotl-ls-caps); text-transform: uppercase; color: var(--biotl-a-ink-3); } /* * LE NOM NE POUSSE PAS LA COCHE : C'EST LA COCHE QUI SE POUSSE ELLE-MÊME. * * Une auto-marge sur le NOM suivrait la direction du nom — et sur une entrée * hébraïque ou arabe, `inline-end` est la gauche : le nom partait à 97 px des * autres. Le défaut a été mesuré dans le thème en 2.6, et il est reproduit ici * à l'identique si l'on n'y prend pas garde. La coche, elle, ne porte pas de * `dir` : elle suit la direction du document, comme le reste du mobilier. */ .biotl-langpick__name { flex: 0 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .biotl-langpick__tick { display: inline-flex; flex: none; margin-inline-start: auto; color: var(--biotl-a-accent-ink); } /* Sur l'écran d'entrée, la marque et le sélecteur partagent une ligne. */ .biotl-auth__top { display: flex; align-items: center; justify-content: space-between; gap: var(--biotl-s-3); flex-wrap: wrap; } .biotl-auth__top .biotl-auth__brand { margin: 0; }