/*
 * WiColis — back-office. Composants.
 * Aucune valeur de couleur littérale ici : uniquement var(--wicolis-*) déclarés dans wicolis-tokens.css.
 * Structure imposée par la charte § 12.1 : barre latérale bleu nuit, en-tête clair, fond gris 50,
 * cartes blanches, bordures légères préférées aux ombres marquées (§ 10.4).
 */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  font-size: 100%;
}

/*
 * GRAISSES : toute règle qui déclare une famille déclare aussi sa graisse, et le couple
 * (famille, graisse) a son `@font-face`. Ce qui n'est pas déclaré est demandé en 400 — ou en 700
 * pour un élément gras par défaut de l'agent utilisateur — et le navigateur substitue la graisse
 * la plus proche SANS rien signaler. Six sélecteurs demandaient ainsi Poppins 400 et un Poppins
 * 500 alors que Poppins n'est servie qu'en 600 et 700 : le rendu était 600, donc juste par
 * accident. C'est la classe de défaut qui a laissé la vitrine en polices système — un déclaré
 * que le rendu contredit sans bruit. `RenduTypographiqueTest` mesure désormais les deux sens.
 */
body {
  margin: 0;
  background: var(--wicolis-surface-app);
  color: var(--wicolis-text-default);
  font-family: var(--wicolis-font-data);
  font-size: var(--wicolis-text-body);
  font-weight: 400;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  font-family: var(--wicolis-font-brand);
  /* 700 explicite : c'était le `bold` de l'agent utilisateur, donc déjà Poppins 700 servie. */
  font-weight: 700;
  color: var(--wicolis-text-strong);
  margin: 0;
}

h1 { font-size: var(--wicolis-text-h2); line-height: 1.25; }
h2 { font-size: var(--wicolis-text-h3); line-height: 1.3; }
h3 { font-size: var(--wicolis-text-body-lg); line-height: 1.4; }

/*
 * Éléments gras par défaut employés par les gabarits : `<th>` (entêtes de tableau, y compris
 * `scope="row"` hors de `thead`) et `<strong>` (titres de bandeau). Ils demandaient Inter 700, qui
 * n'est PAS servie — le navigateur retombait sur Inter 600. La graisse rendue est inchangée ; elle
 * est maintenant écrite.
 */
th,
strong {
  font-weight: 600;
}

p { margin: 0; }

a {
  color: var(--wicolis-link);
  text-decoration: underline;
  text-underline-offset: 2px;
}

a:hover {
  text-decoration-thickness: 2px;
}

:focus-visible {
  /* A-02 (arbitrages § 3.2) — règle de focus unique aux trois surfaces : l'indicateur est un
     TRACÉ PLEIN, jamais un halo translucide. Géométrie 2.4.11 : 3 px sur tout le périmètre,
     offset 2 px.
     RATIOS RECALCULES le 04/09/2026 sur la palette du logo (A-333, domicile 07 § 1) : sur fond
     clair --wicolis-focus-ring = --wicolis-accent (blue-600) vaut 4,57:1 sur blanc,
     4,36:1 sur gray-50 et 4,11:1 au pire fond clair. Sur fond institutionnel il est REDEFINI en
     --wicolis-accent-on-institutional (blue-400) : 6,49:1 sur navy-900 et 5,20:1 sur
     navy-700, la ne l'aurait valu que 3,70 et 2,96 — et 2,96 est SOUS le seuil non textuel de
     WCAG 1.4.11. C'est la seule raison d'etre de la redefinition ci-dessous.
     L ancien halo translucide, bleu 600 à 35 pour cent d opacité, ne valait que 1,64:1 composé
     sur blanc : il a disparu, y compris comme décor. */
  outline: 3px solid var(--wicolis-focus-ring);
  outline-offset: var(--wicolis-focus-offset);
  /* Anneau de séparation intercalé entre l'élément et l'outline : motif « double anneau », il
     garde l'indicateur lisible quand l'élément focalisé est lui-même coloré. */
  box-shadow: 0 0 0 2px var(--wicolis-surface);
  /* --wicolis-focus-ring et non --wicolis-accent : la bordure de l'element focalise suit le
     MEME token que l'outline, sinon la redefinition de fond institutionnel corrigerait l'un
     et laisserait l'autre a 2,96:1. Un seul token pour un seul indicateur. */
  border-color: var(--wicolis-focus-ring);
}

/* Sur fond sombre, l'anneau de séparation prend le FOND INSTITUTIONNEL et non le blanc (A-08
   règle 8 : le token nomme le rôle, plus la localisation ; conventions § 7.5). */
.wicolis-sidebar :focus-visible {
  box-shadow: 0 0 0 2px var(--wicolis-institutional-surface);
}

/* Supprimer le contour sans remplacement équivalent est interdit (A-02, règle 5) : le seul couple
   admis est :focus-visible pour l'indicateur, et la règle ci-dessous pour le focus programmatique. */
:focus:not(:focus-visible) {
  outline: none;
}

.wicolis-skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  padding: var(--wicolis-space-3) var(--wicolis-space-4);
  background: var(--wicolis-surface);
  color: var(--wicolis-text-strong);
  border: 1px solid var(--wicolis-border-strong);
  border-radius: var(--wicolis-radius-sm);
}

.wicolis-skip-link:focus {
  left: var(--wicolis-space-4);
  top: var(--wicolis-space-4);
}

.wicolis-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ---------------------------------------------------------------- ossature */

.wicolis-shell {
  display: grid;
  grid-template-columns: 248px 1fr;
  min-height: 100vh;
}

.wicolis-sidebar {
  background: var(--wicolis-institutional-surface);
  /* 07 § 2.3 ligne 23 : sous un fond institutionnel, l'accent clair remplace l'accent foncé.
     Propriété personnalisée donc HÉRITÉE : tout descendant focalisable de la barre latérale
     en bénéficie, y compris ceux qui n'existent pas encore. */
  --wicolis-focus-ring: var(--wicolis-accent-on-institutional);
  color: var(--wicolis-text-inverse-muted);
  display: flex;
  flex-direction: column;
  gap: var(--wicolis-space-6);
  padding: var(--wicolis-space-6) var(--wicolis-space-4);
}

.wicolis-sidebar__brand {
  display: flex;
  align-items: center;
  gap: var(--wicolis-space-3);
  padding-bottom: var(--wicolis-space-4);
  border-bottom: 1px solid var(--wicolis-institutional-raised);
}

.wicolis-sidebar__logo {
  width: 152px;
  height: auto;
  display: block;
}

.wicolis-sidebar__section-title {
  font-size: var(--wicolis-text-caption);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--wicolis-text-inverse-muted);
  margin: 0 0 var(--wicolis-space-2) var(--wicolis-space-3);
}

.wicolis-nav {
  display: flex;
  flex-direction: column;
  gap: var(--wicolis-space-1);
  list-style: none;
  margin: 0;
  padding: 0;
}

/*
 * BUDGET DE LARGEUR DE LA BARRE — confronté aux largeurs déclarées, jamais répété.
 *
 * `.wicolis-shell` porte la largeur de la colonne, et c'est la SEULE déclaration qui la fixe :
 * NavigationDeLaBarreLateraleTest la lit là et en soustrait les largeurs déclarées ci-dessous —
 * padding de `.wicolis-sidebar`, padding et `gap` de `.wicolis-nav__link`, largeur de `.wicolis-icon`,
 * `column-gap` de `.wicolis-nav__disabled` — pour obtenir le budget de texte. Recopier la valeur dans
 * le test aurait rendu la garde verte le jour où la colonne change.
 *
 * AUCUNE TRONCATURE n'est déclarée sur la navigation : ni `text-overflow`, ni `overflow: hidden`,
 * ni `white-space: nowrap`, ni `-webkit-line-clamp`. Un libellé plus long que son budget se
 * REPLIE, il n'est jamais coupé. C'est ce qui rendait « International » suivi d'« Écran non encore
 * livré » impossible à faire tenir sur UNE ligne : le motif d'indisponibilité passe désormais sur
 * sa propre ligne, libre de se replier, et le budget n'est plus dépassé.
 */
.wicolis-nav__link,
.wicolis-nav__disabled {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--wicolis-space-3);
  min-height: 44px;
  padding: 0 var(--wicolis-space-3);
  border-radius: var(--wicolis-radius-sm);
  font-size: var(--wicolis-text-small);
  text-decoration: none;
  color: var(--wicolis-text-inverse-muted);
}

.wicolis-nav__link:hover {
  background: var(--wicolis-action-hover);
  color: var(--wicolis-text-inverse);
  text-decoration: none;
}

.wicolis-nav__link--active {
  background: var(--wicolis-action);
  color: var(--wicolis-action-text);
  font-weight: 600;
}

/*
 * Entrée non livrée. `opacity` compose --wicolis-text-inverse-muted (gris 300) à 72 % sur
 * --wicolis-institutional-surface (navy 900) : la couleur effective mesure 6,63:1, donc au-dessus du
 * seuil de texte courant. Le fait d'être non livrée n'est PAS porté par cette atténuation — elle
 * n'est qu'un renfort : le motif est un texte de plein droit, `.wicolis-nav__tag`, et l'entrée n'est
 * pas un lien.
 */
.wicolis-nav__disabled {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: var(--wicolis-space-3);
  align-items: center;
  color: var(--wicolis-text-inverse-muted);
  opacity: 0.72;
  cursor: not-allowed;
  padding-bottom: var(--wicolis-space-2);
}

/*
 * Le libellé prend la largeur restante et se replie. `min-width: 0` est nécessaire : sans lui un
 * élément flex refuse de descendre sous la largeur de son contenu et débordait de la barre.
 */
.wicolis-nav__label {
  flex: 1 1 auto;
  min-width: 0;
  overflow-wrap: break-word;
}

/*
 * Motif d'indisponibilité : sa PROPRE LIGNE, dans la deuxième colonne de la grille, donc alignée
 * sous le libellé sans qu'aucune largeur ne soit recopiée. Il portait un aplat en pilule avec
 * bordure et padding sur la MÊME ligne que le libellé, ce qui dépassait le budget de texte dès
 * « International » ; la deuxième colonne ne coûte aucune boîte supplémentaire.
 */
.wicolis-nav__tag {
  grid-column: 2;
  font-size: var(--wicolis-text-caption);
}

/*
 * Icône du back-office — fragments/icon.html. Aucune couleur ici : `currentColor` suit l'encre du
 * contexte, déclarée par le bloc porteur et donc mesurée par ContrasteEtFocusTest.
 */
.wicolis-icon {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
}

/* Repère d'un indicateur : la pastille de 36px l'accueille à 20px. */
.wicolis-kpi__glyph .wicolis-icon {
  width: 20px;
  height: 20px;
}

.wicolis-sidebar__footer {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: var(--wicolis-space-3);
}

.wicolis-cell-card {
  background: var(--wicolis-institutional-raised);
  /* 07 § 2.3 ligne 23 — c'est LE fond qui portait le défaut : --wicolis-accent n'y vaut que
     2,96:1, sous le seuil non textuel. */
  --wicolis-focus-ring: var(--wicolis-accent-on-institutional);
  border-radius: var(--wicolis-radius-md);
  padding: var(--wicolis-space-3);
  font-size: var(--wicolis-text-caption);
  color: var(--wicolis-text-inverse);
}

.wicolis-operator {
  display: flex;
  align-items: center;
  gap: var(--wicolis-space-3);
  border-top: 1px solid var(--wicolis-institutional-raised);
  padding-top: var(--wicolis-space-3);
}

.wicolis-avatar {
  width: 40px;
  height: 40px;
  border-radius: var(--wicolis-radius-pill);
  background: var(--wicolis-action);
  color: var(--wicolis-action-text);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: var(--wicolis-text-small);
  flex: 0 0 auto;
}

.wicolis-operator__name {
  font-size: var(--wicolis-text-small);
  color: var(--wicolis-text-inverse);
  font-weight: 500;
}

.wicolis-operator__role {
  font-size: var(--wicolis-text-caption);
  color: var(--wicolis-text-inverse-muted);
}

.wicolis-main {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.wicolis-topbar {
  background: var(--wicolis-surface);
  border-bottom: 1px solid var(--wicolis-border);
  padding: var(--wicolis-space-4) var(--wicolis-space-8);
  display: flex;
  align-items: center;
  gap: var(--wicolis-space-4);
  flex-wrap: wrap;
}

.wicolis-breadcrumb {
  font-size: var(--wicolis-text-caption);
  color: var(--wicolis-text-default);
}

.wicolis-topbar__title {
  font-family: var(--wicolis-font-brand);
  font-weight: 600;
  font-size: var(--wicolis-text-body-lg);
  color: var(--wicolis-text-strong);
}

.wicolis-topbar__actions {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: var(--wicolis-space-3);
}

.wicolis-content {
  padding: var(--wicolis-space-8);
  display: flex;
  flex-direction: column;
  gap: var(--wicolis-space-6);
  max-width: 1600px;
}

.wicolis-page-head {
  display: flex;
  align-items: flex-start;
  gap: var(--wicolis-space-4);
  flex-wrap: wrap;
}

.wicolis-page-head__text {
  max-width: 760px;
  display: flex;
  flex-direction: column;
  gap: var(--wicolis-space-2);
}

.wicolis-page-head__subtitle {
  color: var(--wicolis-text-default);
  font-size: var(--wicolis-text-small);
}

/* ------------------------------------------------------------------ cartes */

.wicolis-card {
  background: var(--wicolis-surface);
  border: 1px solid var(--wicolis-border);
  border-radius: var(--wicolis-radius-md);
  padding: var(--wicolis-space-6);
}

.wicolis-card--flush {
  padding: 0;
  overflow: hidden;
}

.wicolis-card__head {
  display: flex;
  align-items: baseline;
  gap: var(--wicolis-space-3);
  padding: var(--wicolis-space-6) var(--wicolis-space-6) var(--wicolis-space-4);
  border-bottom: 1px solid var(--wicolis-border);
  flex-wrap: wrap;
}

/*
 * BANDE DE CARTES — la disposition que les maquettes du back-office emploient partout et que
 * `.wicolis-content` ne pouvait pas produire.
 *
 * `.wicolis-content` est un `flex-direction: column` borne a 1600 px : toute `.wicolis-card` qui en
 * est un enfant DIRECT s'etire donc sur la largeur entiere. Les maquettes, elles, rangent les blocs
 * analytiques en bandes de deux ou trois colonnes — mesure sur 02, 09 et 24. Sur une carte large,
 * une `.wicolis-impact__row` colle son libelle a gauche et sa valeur a 1500 px de la, et l'oeil ne
 * peut plus les apparier : c'est un defaut de lisibilite, pas seulement de ressemblance.
 *
 * L'IDIOME EST CELUI DE `.wicolis-kpi-grid`, JUSTE EN DESSOUS, et ce n'est pas une commodite :
 * `repeat(auto-fit, minmax(...))` fait tenir la bande a deux ou trois colonnes sur un ecran large et
 * la replie d'elle-meme sur un ecran etroit, SANS media query. Une grille a nombre de colonnes fixe
 * aurait exige une requete de plus par bande, et chacune aurait derive de son point de rupture.
 *
 * `align-items: start` empeche l'egalisation des hauteurs : deux cartes de contenus differents n'ont
 * aucune raison de finir a la meme ligne, et l'etirement laisserait un vide sous la plus courte.
 *
 * 320 px et non 240 : une carte analytique porte des lignes libelle/valeur, pas un seul nombre.
 */
.wicolis-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: var(--wicolis-space-4);
  align-items: start;
}

.wicolis-kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--wicolis-space-4);
}

.wicolis-kpi {
  display: flex;
  flex-direction: column;
  gap: var(--wicolis-space-2);
}

.wicolis-kpi__head {
  display: flex;
  align-items: center;
  gap: var(--wicolis-space-3);
}

.wicolis-kpi__glyph {
  width: 36px;
  height: 36px;
  border-radius: var(--wicolis-radius-sm);
  background: var(--wicolis-action-surface);
  color: var(--wicolis-institutional);
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}

.wicolis-kpi__label {
  font-size: var(--wicolis-text-small);
  color: var(--wicolis-text-default);
  font-weight: 500;
}

.wicolis-kpi__value {
  font-family: var(--wicolis-font-brand);
  font-weight: 600;
  font-size: var(--wicolis-text-h2);
  color: var(--wicolis-text-strong);
  line-height: 1.15;
}

.wicolis-kpi__meta,
.wicolis-kpi__definition {
  font-size: var(--wicolis-text-caption);
  color: var(--wicolis-text-default);
}

/*
 * Montants d'un indicateur : UNE LIGNE PAR DEVISE (contrat § 9.5, décision P-09). Aucune règle de
 * style ne suggère un total : pas de bordure de totalisation, pas de dernière ligne accentuée.
 * Deux devises ne s'additionnent pas, et un « total » affiché ici serait un chiffre faux.
 */
.wicolis-amounts {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--wicolis-space-1);
}

/*
 * FAMILLE DE DONNÉES, et ce n'est pas une préférence : c'est une MESURE.
 *
 * Ce bloc déclarait `--wicolis-font-brand` ET `font-variant-numeric: tabular-nums`. Les deux Poppins
 * servies (600, 700) ne portent AUCUNE table `GSUB` ni `GPOS` : ni `tnum`, ni `kern`, ni `calt`.
 * La déclaration de chiffres tabulaires y est donc un NO-OP, et les dix largeurs de chiffres de
 * Poppins SemiBold vont de 362 à 661 millièmes d'em — 0,2990 em d'écart. À 18 px,
 * « 1 111,11 € » mesure 85,9 px et « 8 888,88 € » 116,2 px : la virgule et le symbole ne
 * s'alignent d'une ligne à l'autre pour AUCUNE des deux devises, dans le bloc même qui porte la
 * séparation financière (une ligne par devise, P-09).
 *
 * `mobile` a mesuré les mêmes octets et tranché de même — `mobile/src/theme/typography.ts`,
 * `textStyles.amount` en Inter — et `07` § 2.3 ligne 9 donne `textStrong` à « donnée de tableau ».
 * Un montant est une donnée. `.wicolis-kpi__value` reste en marque : ses cartes sont indépendantes,
 * aucun alignement inter-cartes n'est en jeu, et il ne déclare aucune fonctionnalité OpenType.
 *
 * La famille est déclarée ICI et non héritée : `RenduTypographiqueTest` exige que toute règle
 * déclarant une fonctionnalité typographique déclare aussi la famille qui doit l'honorer, sinon la
 * conformité dépend d'un ancêtre qu'aucune feuille ne fixe.
 */
.wicolis-amounts__item {
  font-family: var(--wicolis-font-data);
  font-weight: 600;
  font-size: var(--wicolis-text-body-lg);
  color: var(--wicolis-text-strong);
  font-variant-numeric: tabular-nums;
}

/* Répartition par état : badge (couleur + libellé + glyphe) et compte, jamais un point coloré. */
.wicolis-distribution {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--wicolis-space-3);
}

.wicolis-distribution__item {
  display: inline-flex;
  align-items: center;
  gap: var(--wicolis-space-2);
  padding: var(--wicolis-space-2) var(--wicolis-space-3);
  border: 1px solid var(--wicolis-border);
  border-radius: var(--wicolis-radius-sm);
}

.wicolis-distribution__count {
  font-family: var(--wicolis-font-data);
  font-size: var(--wicolis-text-small);
  font-weight: 600;
  color: var(--wicolis-text-strong);
  font-variant-numeric: tabular-nums;
}

/* ---------------------------------------------------------------- boutons */

.wicolis-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--wicolis-space-2);
  min-height: 44px;
  min-width: 44px;
  padding: 0 var(--wicolis-space-4);
  border-radius: var(--wicolis-radius-sm);
  border: 1px solid transparent;
  font-family: var(--wicolis-font-data);
  font-size: var(--wicolis-text-small);
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
}

.wicolis-button--primary {
  background: var(--wicolis-action);
  color: var(--wicolis-action-text);
}

.wicolis-button--primary:hover {
  filter: brightness(0.94);
  text-decoration: none;
}

.wicolis-button--secondary {
  background: var(--wicolis-surface);
  color: var(--wicolis-text-strong);
  border-color: var(--wicolis-border-strong);
}

.wicolis-button--danger {
  background: var(--wicolis-status-danger);
  color: var(--wicolis-text-inverse);
}

.wicolis-button--ghost {
  background: transparent;
  color: var(--wicolis-link);
  padding: 0 var(--wicolis-space-2);
}

/*
 * Contrôle DÉSACTIVÉ. Deux points de règle, tous deux explicites :
 *   - le libellé est --wicolis-text-default (9,45:1 sur --wicolis-surface-muted), rôle prévu par la table
 *     A-08 ligne 10 (« libellé de contrôle désactivé ») ;
 *   - la limite est --wicolis-border (1,48:1) et non --wicolis-border-strong. C'est le SEUL emploi de
 *     --wicolis-border sur un contrôle, et il est admis parce que WCAG 1.4.11 exclut de son champ les
 *     composants d'interface inactifs. Un contrôle ACTIF prend --wicolis-border-strong (règle 13).
 */
.wicolis-button[disabled],
.wicolis-button--disabled {
  background: var(--wicolis-surface-muted);
  color: var(--wicolis-text-default);
  border-color: var(--wicolis-border);
  cursor: not-allowed;
}

/* --------------------------------------------------------------- tableaux */

.wicolis-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--wicolis-space-4);
  border: 0;
  margin: 0;
  padding: var(--wicolis-space-4) var(--wicolis-space-6);
  background: var(--wicolis-surface-app);
  border-bottom: 1px solid var(--wicolis-border);
}

.wicolis-filters__legend {
  font-size: var(--wicolis-text-caption);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--wicolis-text-default);
  padding: 0;
}

.wicolis-field {
  display: flex;
  flex-direction: column;
  gap: var(--wicolis-space-1);
  min-width: 160px;
}

.wicolis-field--wide {
  min-width: 100%;
  max-width: 760px;
}

.wicolis-label {
  font-size: var(--wicolis-text-small);
  font-weight: 500;
  color: var(--wicolis-text-default);
}

.wicolis-hint {
  font-size: var(--wicolis-text-caption);
  color: var(--wicolis-text-default);
}

.wicolis-input,
.wicolis-select,
.wicolis-textarea {
  min-height: 44px;
  padding: var(--wicolis-space-2) var(--wicolis-space-3);
  border: 1px solid var(--wicolis-border-strong);
  border-radius: var(--wicolis-radius-sm);
  background: var(--wicolis-surface);
  color: var(--wicolis-text-strong);
  font-family: var(--wicolis-font-data);
  font-weight: 400;
  font-size: var(--wicolis-text-body);
}

.wicolis-textarea {
  min-height: 120px;
  resize: vertical;
}

.wicolis-input--otp {
  font-family: var(--wicolis-font-data);
  font-weight: 400;
  font-size: var(--wicolis-text-h3);
  letter-spacing: 0.5em;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.wicolis-input[aria-invalid="true"],
.wicolis-select[aria-invalid="true"],
.wicolis-textarea[aria-invalid="true"] {
  border-color: var(--wicolis-status-danger);
  border-width: 2px;
}

/*
 * A-09 règle 15 — le message d'erreur de champ n'est PAS coloré en --wicolis-status-danger.
 *
 * --wicolis-status-danger tient 4,83:1 sur --wicolis-surface et 4,62:1 sur --wicolis-surface-app, mais seulement
 * 4,41:1 sur --wicolis-surface-muted, 4,34:1 sur --wicolis-action-surface et 4,44:1 sur
 * --wicolis-validation-surface : sa conformité en texte dépend du conteneur, exactement le mode de
 * panne que la règle 15 interdit — un formulaire déplacé dans un encart teinté casse une
 * conformité de couleur sans qu'aucune couleur ait changé. Le message passe donc sur l'encre de
 * corps forte (--wicolis-text-strong, 16,05:1 au pire des cinq fonds clairs) et sa hiérarchie est
 * portée par la GRAISSE, pas par la teinte.
 *
 * L'erreur reste identifiable sans dépendre de la couleur du texte : le contrôle invalide porte
 * aria-invalid="true", aria-describedby vers ce message, et une bordure --wicolis-status-danger de
 * 2 px (4,83:1 sur le fond blanc du champ, objet non textuel ≥ 3:1).
 */
.wicolis-field__error {
  font-size: var(--wicolis-text-small);
  color: var(--wicolis-text-strong);
  font-weight: 600;
}

.wicolis-checkbox {
  display: flex;
  align-items: flex-start;
  gap: var(--wicolis-space-3);
  min-height: 44px;
}

.wicolis-checkbox input {
  width: 20px;
  height: 20px;
  margin-top: var(--wicolis-space-2);
}

.wicolis-table-scroll {
  overflow-x: auto;
}

.wicolis-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--wicolis-text-small);
}

.wicolis-table caption {
  text-align: left;
  padding: var(--wicolis-space-3) var(--wicolis-space-6);
  color: var(--wicolis-text-default);
  font-size: var(--wicolis-text-caption);
}

.wicolis-table th,
.wicolis-table td {
  padding: var(--wicolis-space-3) var(--wicolis-space-4);
  border-bottom: 1px solid var(--wicolis-border);
  text-align: left;
  vertical-align: top;
}

.wicolis-table thead th {
  position: sticky;
  top: 0;
  background: var(--wicolis-surface-muted);
  color: var(--wicolis-text-strong);
  font-weight: 600;
  white-space: nowrap;
  z-index: 1;
}

.wicolis-table tbody tr:hover {
  background: var(--wicolis-surface-app);
}

.wicolis-table__cell--droite {
  font-family: var(--wicolis-font-data);
  font-weight: 400;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/*
 * LARGEURS : un PLANCHER, pas une largeur fixe — et l'écrire `width` était un déclaré que le rendu
 * ne pouvait pas honorer.
 *
 * En disposition automatique, `width` sur une cellule de tableau est une SUGGESTION : la largeur
 * utilisée ne descend jamais sous la largeur min-content de la colonne. Or `.wicolis-table thead th`
 * est en `white-space: nowrap`, donc la min-content d'une colonne est la largeur ENTIÈRE de son
 * en-tête. Mesure : « Frais de service taxes comprises » fait 254 px de min-content, soit 1,98 ×
 * les 8 rem (128 px) que `TableColumn.numeric()` déclarait pour elle — et 1,34 × déjà lorsque le
 * libellé disait « TTC ». Le libellé, lui, ne se raccourcit pas : « frais de service » porte
 * l'invariant 11 et ne se fusionne ni ne s'abrège.
 *
 * `min-width` dit ce que le navigateur fait déjà : la colonne ne descend pas sous ce plancher et
 * grandit jusqu'à sa min-content. Aucun changement de rendu, une déclaration qui redevient vraie.
 */
.wicolis-table__cell--etroite { min-width: 8rem; }
.wicolis-table__cell--moyenne { min-width: 14rem; }
.wicolis-table__cell--large { min-width: 22rem; }

.wicolis-table__sort {
  display: inline-flex;
  align-items: center;
  gap: var(--wicolis-space-1);
  color: var(--wicolis-text-strong);
  text-decoration: none;
  min-height: 44px;
}

.wicolis-table__sort:hover {
  text-decoration: underline;
}

.wicolis-mono {
  font-family: var(--wicolis-font-data);
  font-weight: 400;
  font-variant-numeric: tabular-nums;
  font-size: var(--wicolis-text-caption);
  color: var(--wicolis-text-default);
  word-break: break-all;
}

/*
 * Précision d'une cellule. Elle porte, sous chaque montant de la liste des frais de service, le
 * rappel de périmètre « Frais de service WiColis uniquement » (invariant 11, § 15.4 de la
 * charte) : sur un écran financier, ce rappel ne peut pas être le PLUS PETIT texte de l'écran.
 * --wicolis-text-small (14 px) et non --wicolis-text-caption (12 px).
 */
.wicolis-cell-hint {
  display: block;
  font-size: var(--wicolis-text-small);
  color: var(--wicolis-text-default);
}

.wicolis-row-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--wicolis-space-2);
}

.wicolis-row-actions__unavailable {
  font-size: var(--wicolis-text-caption);
  color: var(--wicolis-text-default);
}

/* ----------------------------------------------------------------- badges */

/*
 * A-10 règle 16 — chaque tonalité de statut a EXACTEMENT UN fond déclaré, et le couple
 * (teinte, fond) est mesuré ≥ 3:1. Le badge transporte son propre fond : teinte et fond sont
 * déclarés ensemble, ici, ce qui rend le couple mesurable par un test.
 *
 *   succès                  --wicolis-status-success  sur --wicolis-validation-surface .. 3,03 ✓
 *   disponibilité           --wicolis-status-success  sur --wicolis-validation-surface .. 3,03 ✓
 *   information             --wicolis-status-info     sur --wicolis-action-surface ...... 4,65 ✓
 *   avertissement           --wicolis-status-warning  sur --wicolis-surface ............. 3,19 ✓
 *   danger                  --wicolis-status-danger   sur --wicolis-surface ............. 4,83 ✓
 *   neutre                  --wicolis-status-neutral  sur --wicolis-surface-muted ....... 4,34 ✓
 *
 * Interdits, mesurés sous 3:1 : avertissement sur --wicolis-surface-muted (2,91), sur
 * --wicolis-action-surface (2,86) et sur --wicolis-validation-surface (2,93) ; succès sur
 * --wicolis-action-surface (2,96). C'est pourquoi l'ambre reste sur le fond blanc et n'est PAS posé
 * sur le fond neutre du badge par défaut.
 */
.wicolis-badge {
  display: inline-flex;
  /* `flex-start` et non `center` : sur deux lignes, l'icône reste alignée sur la PREMIÈRE, elle
     ne flotte pas au milieu du bloc de texte. */
  align-items: flex-start;
  gap: var(--wicolis-space-1);
  /*
   * Rayon en capsule (charte § 18 : badge = 999) et padding horizontal porté à 16 px, pas 12.
   * La charte décrit un badge d'UNE ligne ; celui-ci se replie (voir `white-space` plus bas). Sur
   * trois lignes la pastille fait ~54 px de haut, le rayon se clampe à la moitié de la hauteur et
   * les extrémités deviennent des demi-cercles de ~27 px : à 6 px du haut, le bord courbe entre
   * jusqu'à x ≈ 10 px, donc 12 px de padding ne laissaient que 2 px entre la 1re ligne de texte
   * et l'arc. À 16 px il reste ~6 px. La capsule est conservée plutôt que ramenée à
   * `--wicolis-radius-md` pour ne pas diverger de la pastille mobile, qui est en `radius.pill`.
   */
  border-radius: var(--wicolis-radius-pill);
  padding: 2px var(--wicolis-space-4);
  font-size: var(--wicolis-text-caption);
  font-weight: 600;
  /* Le libellé reste en gris 900 : contraste ≥ 16:1 sur chaque fond teinté. La tonalité est
     portée par le fond, la bordure et l'icône, jamais par la couleur du texte seule. */
  color: var(--wicolis-text-strong);
  border: 1px solid var(--wicolis-status-neutral);
  background: var(--wicolis-surface-muted);
  /*
   * A-55 — `white-space: nowrap` est RETIRÉ, et ce n'est pas une préférence de mise en page.
   *
   * Mesure sur les états RÉELLEMENT rendus par un écran, et non sur le catalogue entier : seules
   * les familles COLIS et FRAIS_DE_SERVICE atteignent une pastille aujourd'hui. Le pire cas est
   * donc `serviceFee.state.ÉCHEC` — « Paiement des frais de service non abouti », 40 caractères
   * et 7 mots — dans la colonne « Frais de service » de /colis, qui a huit colonnes.
   * `directPayment.state.À_PAYER` et ses 49 caractères n'est atteignable par AUCUN écran : aucun
   * `TableCell.badge(StatusFamily.PAIEMENT_DIRECT, …)` n'existe. Le mesurer donnait un chiffre
   * plus impressionnant et moins vrai.
   *
   * Le libellé passe à la ligne et n'est JAMAIS tronqué — un statut tronqué n'est plus un statut
   * lisible (charte § 14 : statut = couleur PLUS libellé). Et il ne l'est pas par chance :
   * `table-layout: auto` sous un conteneur `overflow-x: auto` ne comprime jamais une colonne sous
   * son min-content, qui vaut ici le mot le plus long. Même correction que la pastille mobile,
   * où `flexShrink` joue ce rôle.
   */
  white-space: normal;
  overflow-wrap: break-word;
  text-align: left;
}

/*
 * Icône : SVG en ligne. `flex: none` l'empêche de se compresser quand le libellé passe à la
 * ligne ; `margin-top` la centre optiquement sur la première ligne de texte (12 px × 1,5 = 18 px
 * de hauteur de ligne, glyphe de 14 px, donc 2 px).
 *
 * TAILLE FIXE À 14 px, et non `--wicolis-text-caption` : l'ENCRE RENDUE d'un tracé est
 * `stroke-width × taille ÷ viewBox`. À 12 px pour un `viewBox` de 16, l'anneau à 1,5 unité ne
 * rendait que 1,125 px : un trait sous 1,5 px CSS, placé à une position sous-pixel, s'étale sur
 * deux rangées à ~56 % de couverture, et le contraste EFFECTIF de l'ambre passe sous le seuil de
 * 3:1 que le test mesure sur le couple de couleurs — lequel ne voit pas l'étalement. 14 px est
 * aussi la taille de l'icône de la pastille mobile (`size={14}`), donc les deux surfaces rendent
 * le même signe à la même taille (R-A14). Les traits sont à 2 et 2,4 unités dans le SVG :
 * 2 × 14 / 16 = 1,75 px et 2,4 × 14 / 16 = 2,1 px.
 */
.wicolis-badge__glyph {
  font-size: 14px;
  width: 1em;
  height: 1em;
  flex: none;
  margin-top: 2px;
}

/* Code brut d'un état inconnu, rendu dans le flux et non dans un attribut `title`. */
.wicolis-badge__code {
  font-weight: 500;
  overflow-wrap: anywhere;
}

/*
 * A-55, majeur de mise en forme : la bordure de la pastille neutre était `--wicolis-border` (gray300)
 * sur `--wicolis-surface-muted` (gray100), soit 1,35:1 — un contour quasi invisible, là où `mobile`
 * pose la teinte de statut. Elle prend `--wicolis-status-neutral` (gray500), 4,34:1 sur le même fond.
 */
.wicolis-badge--neutral {
  background: var(--wicolis-surface-muted);
  border-color: var(--wicolis-status-neutral);
}

.wicolis-badge--neutral .wicolis-badge__glyph { color: var(--wicolis-status-neutral); }

.wicolis-badge--info {
  background: var(--wicolis-action-surface);
  border-color: var(--wicolis-status-info);
}

.wicolis-badge--info .wicolis-badge__glyph { color: var(--wicolis-status-info); }

.wicolis-badge--success {
  background: var(--wicolis-validation-surface);
  border-color: var(--wicolis-status-success);
}

.wicolis-badge--success .wicolis-badge__glyph { color: var(--wicolis-status-success); }

/*
 * Disponibilité (A-55 (a), R-A14) — MÊME couple déclaré que succès, aucun token neuf :
 * --wicolis-status-success sur --wicolis-validation-surface, 3,03:1 (07 § 4.2, même ligne de table).
 * Ce qui distingue les deux à l'écran est l'ICÔNE, indexée par tonalité dans fragments/badge.html.
 */
.wicolis-badge--available {
  background: var(--wicolis-validation-surface);
  border-color: var(--wicolis-status-success);
}

.wicolis-badge--available .wicolis-badge__glyph { color: var(--wicolis-status-success); }

/*
 * A-55 (b) — filet à 2 px pour les DEUX tonalités qui disent « agis ». Elles sont épinglées sur
 * --wicolis-surface, fond de la carte hôte : leur pastille n'a donc pas d'aplat, là où info, succès,
 * disponibilité et neutre en portent un. Le filet épaissi RÉDUIT l'écart de saillance, il ne
 * l'annule pas — un filet, même épais, reste moins saillant qu'un aplat. Aucun token n'est
 * ouvert : `--wicolis-warning-surface` est refusé (amber50 rend 3,07 contre l'ambre, conforme à 0,07
 * près, exactement la fragilité que la règle 15 condamne).
 */
.wicolis-badge--warning {
  background: var(--wicolis-surface);
  border-color: var(--wicolis-status-warning);
  border-width: 2px;
}

.wicolis-badge--warning .wicolis-badge__glyph { color: var(--wicolis-status-warning); }

.wicolis-badge--danger {
  background: var(--wicolis-surface);
  border-color: var(--wicolis-status-danger);
  border-width: 2px;
}

.wicolis-badge--danger .wicolis-badge__glyph { color: var(--wicolis-status-danger); }

/* -------------------------------------------------------- états d'écran */

.wicolis-state {
  display: flex;
  flex-direction: column;
  gap: var(--wicolis-space-2);
  padding: var(--wicolis-space-8) var(--wicolis-space-6);
  text-align: left;
  border-radius: var(--wicolis-radius-md);
  border: 1px solid var(--wicolis-border);
  background: var(--wicolis-surface);
}

.wicolis-state__title {
  font-family: var(--wicolis-font-brand);
  font-weight: 600;
  font-size: var(--wicolis-text-body-lg);
  color: var(--wicolis-text-strong);
  display: flex;
  align-items: center;
  gap: var(--wicolis-space-2);
}

.wicolis-state__hint {
  color: var(--wicolis-text-default);
  max-width: 720px;
}

.wicolis-state__meta {
  font-family: var(--wicolis-font-data);
  font-weight: 400;
  font-size: var(--wicolis-text-caption);
  color: var(--wicolis-text-default);
  font-variant-numeric: tabular-nums;
}

.wicolis-state--erreur { border-left: 4px solid var(--wicolis-status-danger); }
.wicolis-state--hors-ligne { border-left: 4px solid var(--wicolis-status-warning); }
.wicolis-state--autorisation-refusee { border-left: 4px solid var(--wicolis-status-danger); }
.wicolis-state--action-indisponible { border-left: 4px solid var(--wicolis-status-neutral); }
.wicolis-state--vide { border-left: 4px solid var(--wicolis-border-strong); }
.wicolis-state--chargement { border-left: 4px solid var(--wicolis-accent); }
.wicolis-state--succes { border-left: 4px solid var(--wicolis-status-success); }
.wicolis-state--pret { border-left: 4px solid var(--wicolis-status-success); }

.wicolis-banner {
  display: flex;
  gap: var(--wicolis-space-3);
  align-items: flex-start;
  padding: var(--wicolis-space-4);
  border-radius: var(--wicolis-radius-md);
  border: 1px solid var(--wicolis-border);
  background: var(--wicolis-surface);
  font-size: var(--wicolis-text-small);
  color: var(--wicolis-text-default);
}

.wicolis-banner--succes {
  background: var(--wicolis-validation-surface);
  border-color: var(--wicolis-status-success);
}

.wicolis-banner--info {
  background: var(--wicolis-action-surface);
  border-color: var(--wicolis-status-info);
}

/*
 * DANGER et AVERTISSEMENT partagent leur fond, et c'est la charte § 8.3 qui l'impose : « erreur :
 * rouge en BORDURE + GLYPHE sur --wicolis-surface », « avertissement : ambre en bordure + glyphe sur
 * --wicolis-surface ». Les deux teintes sont sous 4,5:1 sur les fonds teintés (danger 4,41 sur
 * --wicolis-surface-muted, warning 2,91) : un fond plein teinté ferait dépendre la conformité du
 * conteneur, ce que la règle 15 d'A-09 interdit.
 *
 * La conséquence est qu'un palier de gravité NE PEUT PAS reposer sur la seule bordure : deux
 * bandeaux au même fond, distingués par une teinte de filet de 1 px, ne se différencient pas pour
 * un opérateur en vision des couleurs réduite. Le GLYPHE est donc obligatoire sur chaque bandeau,
 * et il l'est mécaniquement : `PastilleGlypheTest#chaque_bandeau_porte_un_glyphe` refuse tout
 * élément `wicolis-banner--<tonalité>` sans `th:replace` vers `fragments/icon`.
 */
.wicolis-banner--danger {
  background: var(--wicolis-surface);
  border-color: var(--wicolis-status-danger);
}

.wicolis-banner--avertissement {
  background: var(--wicolis-surface);
  border-color: var(--wicolis-status-warning);
}

/*
 * Le SIGNE d'un bandeau porte la teinte de sa tonalité — § 8.3 est littéral : « bordure + glyphe ».
 * Sans ces quatre règles, le glyphe rendrait en --wicolis-text-default et la teinte ne serait portée que
 * par un filet de 1 px.
 *
 * Les quatre couples sont EXACTEMENT les couples épinglés de 07 § 4.2 (règle 16, A-10 § 4.2), et
 * chaque bandeau porte le fond que sa tonalité épingle : succès sur --wicolis-validation-surface (3,03),
 * information sur --wicolis-action-surface (4,65), avertissement et erreur sur --wicolis-surface (3,19 et
 * 4,83). Objets non textuels, seuil 3:1 — les quatre passent. Aucun couple neuf, aucun token neuf.
 *
 * Et la teinte n'est pas le seul porteur du palier : la FORME du signe diffère pour les quatre
 * tonalités (marque de succès, barre d'information, barre d'avertissement, croix d'erreur), donc le
 * palier reste lisible en vision des couleurs réduite.
 */
.wicolis-banner--succes .wicolis-icon { color: var(--wicolis-status-success); }
.wicolis-banner--info .wicolis-icon { color: var(--wicolis-status-info); }
.wicolis-banner--avertissement .wicolis-icon { color: var(--wicolis-status-warning); }
.wicolis-banner--danger .wicolis-icon { color: var(--wicolis-status-danger); }

/* ------------------------------------------------------------ pagination */

.wicolis-pagination {
  display: flex;
  align-items: center;
  gap: var(--wicolis-space-3);
  flex-wrap: wrap;
  padding: var(--wicolis-space-4) var(--wicolis-space-6);
  border-top: 1px solid var(--wicolis-border);
}

.wicolis-pagination__summary {
  font-family: var(--wicolis-font-data);
  font-weight: 400;
  font-size: var(--wicolis-text-caption);
  color: var(--wicolis-text-default);
  margin-right: auto;
  font-variant-numeric: tabular-nums;
}

.wicolis-pagination__list {
  display: flex;
  gap: var(--wicolis-space-1);
  list-style: none;
  margin: 0;
  padding: 0;
}

.wicolis-pagination__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  border-radius: var(--wicolis-radius-sm);
  /* Bordure d'un élément interactif : gris 500 (4,76:1) et non gris 300 (1,48:1), seuil 3:1. */
  border: 1px solid var(--wicolis-border-strong);
  text-decoration: none;
  color: var(--wicolis-link);
  font-size: var(--wicolis-text-small);
}

.wicolis-pagination__link--current {
  background: var(--wicolis-action);
  color: var(--wicolis-action-text);
  border-color: var(--wicolis-action);
  font-weight: 600;
}

/* --------------------------------------------------------- action sensible */

.wicolis-sensitive {
  display: grid;
  grid-template-columns: minmax(320px, 1fr) minmax(280px, 380px);
  gap: var(--wicolis-space-6);
  align-items: start;
}

.wicolis-impact {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--wicolis-space-3);
}

.wicolis-impact__row {
  display: flex;
  justify-content: space-between;
  gap: var(--wicolis-space-4);
  padding-bottom: var(--wicolis-space-2);
  border-bottom: 1px solid var(--wicolis-border);
  font-size: var(--wicolis-text-small);
}

.wicolis-impact__label {
  color: var(--wicolis-text-default);
}

.wicolis-impact__value {
  color: var(--wicolis-text-strong);
  text-align: right;
  font-weight: 500;
}

.wicolis-impact__row--strong .wicolis-impact__value {
  font-family: var(--wicolis-font-brand);
  /* Héritait 500 de `.wicolis-impact__value` : Poppins 500 n'est pas servie non plus. */
  font-weight: 600;
  font-size: var(--wicolis-text-body-lg);
}

.wicolis-form-grid {
  display: flex;
  flex-direction: column;
  gap: var(--wicolis-space-4);
}

.wicolis-form-actions {
  display: flex;
  gap: var(--wicolis-space-3);
  flex-wrap: wrap;
  padding-top: var(--wicolis-space-2);
}

/* ------------------------------------------------------------- connexion */

.wicolis-auth {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 100vh;
}

.wicolis-auth__brand {
  background: linear-gradient(160deg, var(--wicolis-institutional-raised), var(--wicolis-institutional-surface));
  /* 07 § 2.3 ligne 23 : les deux extrémités du dégradé sont institutionnelles. */
  --wicolis-focus-ring: var(--wicolis-accent-on-institutional);
  color: var(--wicolis-text-inverse);
  padding: var(--wicolis-space-16) var(--wicolis-space-12);
  display: flex;
  flex-direction: column;
  gap: var(--wicolis-space-8);
}

.wicolis-auth__kicker {
  font-size: var(--wicolis-text-caption);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--wicolis-text-inverse-muted);
}

.wicolis-auth__title {
  font-family: var(--wicolis-font-brand);
  font-weight: 700;
  font-size: var(--wicolis-text-h1);
  line-height: 1.15;
  color: var(--wicolis-text-inverse);
  max-width: 18ch;
}

.wicolis-auth__subtitle {
  color: var(--wicolis-text-inverse-muted);
  max-width: 46ch;
}

.wicolis-auth__features {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: var(--wicolis-space-4);
  list-style: none;
  margin: 0;
  padding: 0;
}

.wicolis-auth__feature {
  border: 1px solid var(--wicolis-institutional-raised);
  border-radius: var(--wicolis-radius-md);
  padding: var(--wicolis-space-4);
  display: flex;
  flex-direction: column;
  gap: var(--wicolis-space-2);
}

/*
 * Icône des trois cartes d'arguments (maquette 01). Une SEULE teinte pour les trois, et c'est
 * un choix : la maquette les nuance légèrement, mais `--wicolis-accent-on-institutional` est le
 * seul accent que la table d'alias admette sur fond institutionnel — l'accent foncé y tombe à
 * 3,70:1 et la règle 15 le refuse. Trois teintes inventées pour coller au pixel rouvriraient la
 * couche d'alias que cette table existe pour fermer.
 *
 * LE SELECTEUR VISE `.wicolis-icon`, LA CLASSE DU FRAGMENT, ET NON UNE CLASSE POSEE SUR LE SITE.
 * `th:replace` REMPLACE le noeud hote : tout attribut ecrit sur le `<svg>` du gabarit — classe
 * comprise — est jete au rendu. Une classe locale aurait donc ete un mecanisme mort, invisible
 * a la compilation et visible seulement en rendant la page. Elle l'a ete : les trois glyphes
 * sortaient sans taille ni teinte.
 */
.wicolis-auth__feature .wicolis-icon {
  width: 20px;
  height: 20px;
  color: var(--wicolis-accent-on-institutional);
}

.wicolis-auth__feature-title {
  font-weight: 600;
  color: var(--wicolis-text-inverse);
  font-size: var(--wicolis-text-small);
}

.wicolis-auth__feature-text {
  font-size: var(--wicolis-text-caption);
  color: var(--wicolis-text-inverse-muted);
}

.wicolis-auth__panel {
  background: var(--wicolis-surface-app);
  padding: var(--wicolis-space-16) var(--wicolis-space-12);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.wicolis-auth__form {
  width: 100%;
  max-width: 440px;
  display: flex;
  flex-direction: column;
  gap: var(--wicolis-space-4);
}

.wicolis-auth__editor {
  display: flex;
  align-items: center;
  gap: var(--wicolis-space-2);
  font-size: var(--wicolis-text-caption);
  color: var(--wicolis-text-default);
}

.wicolis-auth__editor img {
  width: 20px;
  height: 20px;
}

.wicolis-auth__meta {
  display: flex;
  justify-content: space-between;
  gap: var(--wicolis-space-4);
  font-size: var(--wicolis-text-caption);
  color: var(--wicolis-text-default);
}

.wicolis-auth__footer {
  margin-top: var(--wicolis-space-8);
  font-size: var(--wicolis-text-caption);
  color: var(--wicolis-text-default);
}

/* ---------------------------------------------------------- adaptativité */

@media (max-width: 1024px) {
  .wicolis-shell {
    grid-template-columns: 1fr;
  }

  .wicolis-sidebar {
    flex-direction: column;
  }

  .wicolis-auth {
    grid-template-columns: 1fr;
  }

  .wicolis-auth__brand {
    padding: var(--wicolis-space-8) var(--wicolis-space-6);
  }

  .wicolis-auth__panel {
    padding: var(--wicolis-space-8) var(--wicolis-space-6);
  }

  .wicolis-content {
    padding: var(--wicolis-space-4);
  }

  .wicolis-sensitive {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}