/* Suivi CV hematologie — feuille unique, aucune dependance externe.
   L'application tourne sur un poste sans acces reseau : pas de police
   telechargee, pas d'image, pas de @import. Seules les polices Windows
   sont utilisees (Segoe UI, Consolas pour les touches clavier).

   Direction : structure "modernist" — angles vifs, filets 2 px pour les
   separations majeures, tout aligne a gauche, aucune ombre portee. Accent
   bleu #14539b pour l'interface ; le rouge est reserve a l'alerte critique
   et n'apparait nulle part ailleurs.

   Aucune classe n'a ete renommee, aucun id modifie : la feuille est un
   remplacement direct de l'ancienne. Toutes les couleurs se reglent ici,
   dans :root. */

:root {
  /* Fonds et encres */
  --fond: #eaeff5;           /* fond legerement bleute */
  --surface: #ffffff;
  --surface-2: #f2f6fb;      /* zebrage, en-tetes secondaires */
  --encre-forte: #191d23;    /* filets majeurs, en-tetes de tableau */
  --texte: #191d23;
  --texte-doux: #5b626c;
  --bord: #d5dae0;           /* filets 1 px entre les lignes */
  --bord-fort: #b6bcc4;      /* separation entre groupes de parametres */

  /* Accent d'interface */
  --accent: #14539b;
  --accent-fonce: #0e3f77;   /* survol, etat presse */
  --accent-doux: #e9f1fa;    /* survol de ligne, fond d'etiquette */
  --accent-clair: #b3cdea;   /* bordure d'etiquette accent */

  /* Code couleur metier — la logique ne change pas, seules les teintes
     ont ete ajustees pour tenir le contraste AA sur fond colore. */
  --critique: #8a0f18;           /* texte sur fond critique */
  --critique-vif: #c1121f;       /* filet, barre, puce de graphique */
  --critique-fond: #f9dedc;
  --surveillance: #7a4200;
  --surveillance-vif: #b25e00;
  --surveillance-fond: #fbeed6;
  --succes: #14603c;
  --succes-vif: #1a7a4c;
  --succes-fond: #e9f3ec;

  --rayon: 8px;              /* angles arrondis */
  --rayon-petit: 6px;        /* champs, boutons, etiquettes */
  --ombre: none;             /* aucune ombre : la structure porte tout */
}

@media (prefers-color-scheme: dark) {
  :root {
    --fond: #14181e;
    --surface: #1c2129;
    --surface-2: #232a34;
    --encre-forte: #e8ecf1;
    --texte: #e8ecf1;
    --texte-doux: #9aa5b4;
    --bord: #333c49;
    --bord-fort: #46515f;

    --accent: #79b4e2;
    --accent-fonce: #a5cdee;
    --accent-doux: #1e2c37;
    --accent-clair: #3c5a74;

    --critique: #ffb3b6;
    --critique-vif: #f0666d;
    --critique-fond: #462225;
    --surveillance: #f2cf94;
    --surveillance-vif: #dda23f;
    --surveillance-fond: #3a2c19;
    --succes: #a8dcbf;
    --succes-vif: #63bc8c;
    --succes-fond: #1b2f24;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font: 15px/1.6 "Segoe UI", "Segoe UI Variable Text", system-ui, sans-serif;
  background: var(--fond);
  color: var(--texte);
}

/* Focus clavier visible partout, jamais l'anneau bleu par defaut. */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

::selection { background: var(--accent-doux); color: var(--texte); }

a { color: var(--accent); text-decoration: none; border-bottom: 1px solid var(--accent-clair); }
a:hover { color: var(--accent-fonce); border-bottom-color: var(--accent); }

/* --- Bandeau ------------------------------------------------------------ */

.bandeau {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: flex-end;
  justify-content: space-between;
  padding: 16px 24px 14px;
  background: var(--surface);
  border-top: 4px solid var(--accent);
  border-bottom: 2px solid var(--accent-clair);
}

.bandeau h1 {
  margin: 0;
  color: var(--accent-fonce);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -.01em;
}
/* Le sous-titre devient la ligne de contexte du laboratoire : petit,
   en capitales, couleur d'accent, place au-dessus du titre a la lecture. */
.sous-titre {
  margin: 3px 0 0;
  color: var(--texte-doux);
  font-size: 13px;
  max-width: 90ch;
}
.actions-bandeau { display: flex; gap: 14px; align-items: flex-end; }

/* --- Champs ------------------------------------------------------------- */

.champ { display: flex; flex-direction: column; gap: 4px; font-size: 12px; }
.champ > span {
  color: var(--texte-doux);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .12em;
}
.champ.case { flex-direction: row; align-items: center; gap: 8px; font-size: 14px; }
.champ.case > span {
  text-transform: none;
  letter-spacing: 0;
  font-weight: 400;
  font-size: 14px;
  color: var(--texte);
}
.champ.case input[type=checkbox] { width: 16px; height: 16px; accent-color: var(--accent); }

select, input[type=text], textarea {
  font: inherit;
  font-size: 14px;
  padding: 7px 10px;
  border: 1px solid #8b939d;
  border-radius: var(--rayon-petit);
  background: var(--surface);
  color: var(--texte);
  min-width: 140px;
}
select:hover, input[type=text]:hover { border-color: var(--accent); }

textarea { width: 100%; min-height: 62px; resize: vertical; }

/* --- Boutons ------------------------------------------------------------ */

/* Libelle cale a gauche, y compris quand le bouton est plus large. */
.bouton {
  display: inline-block;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  text-align: left;
  padding: 9px 15px;
  border: 2px solid var(--accent);
  border-radius: var(--rayon-petit);
  background: var(--accent);
  color: #fff;
  cursor: pointer;
  text-decoration: none;
}
.bouton:hover { background: var(--accent-fonce); border-color: var(--accent-fonce); }
.bouton:active { background: var(--accent-fonce); border-color: var(--accent-fonce); }
.bouton.secondaire {
  background: var(--surface);
  color: var(--accent);
  border-color: var(--encre-forte);
}
.bouton.secondaire:hover { background: var(--accent-doux); color: var(--accent-fonce); }
.bouton.discret {
  background: none;
  color: var(--texte-doux);
  border-color: var(--bord);
  font-weight: 500;
}
.bouton.discret:hover { background: var(--surface-2); color: var(--texte); }
.bouton:disabled { opacity: .45; cursor: default; }

/* --- Onglets, a la maniere des feuilles d'un classeur ------------------- */

.onglets {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  padding: 8px 24px 0;
  background: var(--accent-doux);
  border-bottom: 2px solid var(--accent);
  overflow-x: auto;
}
@media (prefers-color-scheme: dark) {
  .onglets { background: #10141a; }
}

.onglet {
  font: inherit;
  font-size: 14px;
  font-weight: 500;
  padding: 8px 16px;
  border: 2px solid var(--accent-clair);
  border-bottom: none;
  border-radius: var(--rayon) var(--rayon) 0 0;
  background: var(--surface-2);
  color: var(--texte-doux);
  cursor: grab;                 /* onglets deplacables au glisser-deposer */
  white-space: nowrap;
}
.onglet:hover { background: var(--accent-doux); color: var(--accent-fonce); }
.onglet:active { cursor: grabbing; }
.onglet.deplace { opacity: .4; }

/* L'onglet actif est une feuille au premier plan : il chevauche le filet
   du bas de la barre, comme un intercalaire tire vers l'avant. */
.onglet.actif {
  background: var(--surface);
  color: var(--texte);
  font-weight: 700;
  border-color: var(--accent);
  padding: 10px 18px 11px;
  margin-bottom: -2px;
}
.onglet.actif::before {
  content: "";
  display: inline-block;
  width: 3px;
  height: 13px;
  margin-right: 8px;
  vertical-align: -2px;
  background: var(--accent);
}

main { padding: 20px 24px 60px; max-width: 1600px; }
.vue { display: none; }
.vue.active { display: block; }

.barre-filtres {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  align-items: flex-end;
  margin-bottom: 16px;
}
.aide { margin: 0; color: var(--texte-doux); font-size: 14px; max-width: 70ch; }
kbd {
  font: 600 12px/1 Consolas, "Cascadia Mono", ui-monospace, monospace;
  padding: 3px 5px;
  border: 1px solid var(--bord-fort);
  border-bottom-width: 2px;
  border-radius: var(--rayon-petit);
  background: var(--surface-2);
  color: var(--texte);
}

/* --- Cartes ------------------------------------------------------------- */

.carte {
  background: var(--surface);
  border: 2px solid var(--accent-clair);
  overflow: hidden;
  border-radius: var(--rayon);
  box-shadow: var(--ombre);
  padding: 0;
  margin-bottom: 18px;
}

/* L'en-tete de carte est separe du contenu par un filet plein : c'est lui
   qui donne la hierarchie, pas un ecart de blanc. */
.carte-entete {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: baseline;
  justify-content: space-between;
  margin: 0;
  padding: 12px 14px;
  background: var(--accent-doux);
  border-bottom: 2px solid var(--accent-clair);
}
.carte-entete h2 { margin: 0; font-size: 18px; font-weight: 700; color: var(--accent-fonce); }
.carte-entete h3 { margin: 0; font-size: 15px; font-weight: 700; }

/* Tout ce qui suit l'en-tete dans une carte recoit la marge interne. */
.carte > *:not(.carte-entete):not(.enveloppe-tableau):not(table) {
  padding-left: 14px;
  padding-right: 14px;
}
.carte > .meta { padding-top: 10px; }
.carte > *:last-child { padding-bottom: 14px; }
.carte > table:last-child,
.carte > .enveloppe-tableau:last-child { padding-bottom: 0; }

.meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 20px;
  color: var(--texte-doux);
  font-size: 13px;
  margin: 0 0 10px;
}
.meta b { color: var(--texte); font-weight: 600; }

/* --- Zone de depot ------------------------------------------------------ */

.zone-depot {
  border: 2px dashed var(--bord-fort);
  border-radius: var(--rayon);
  background: var(--surface);
  padding: 40px 24px;
  text-align: left;
  transition: border-color .12s, background .12s;
}
.zone-depot.survol { border-color: var(--accent); background: var(--accent-doux); }
.zone-depot-contenu strong { display: block; font-size: 18px; font-weight: 700; margin-bottom: 4px; }
.zone-depot-contenu p { margin: 0 0 16px; color: var(--texte-doux); font-size: 14px; max-width: 60ch; }

/* --- Etiquettes --------------------------------------------------------- */

/* Angles vifs, filet de couleur, et un symbole qui double la teinte :
   la gravite reste lisible sans percevoir la couleur, et a l'impression
   en noir et blanc. */
.etiquette {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 3px 7px;
  border: 1px solid var(--bord-fort);
  border-radius: 20px;
  background: var(--surface-2);
  color: var(--texte-doux);
  white-space: nowrap;
}
.etiquette.critique {
  background: var(--critique-fond);
  color: var(--critique);
  border-color: var(--critique-vif);
}
.etiquette.critique::before { content: "\25B2\00A0"; }        /* triangle */
.etiquette.surveillance {
  background: var(--surveillance-fond);
  color: var(--surveillance);
  border-color: var(--surveillance-vif);
}
.etiquette.surveillance::before { content: "\25C6\00A0"; }    /* losange */
.etiquette.succes {
  background: var(--succes-fond);
  color: var(--succes);
  border-color: var(--succes-vif);
}
.etiquette.succes::before { content: "\2713\00A0"; }          /* coche */
/* Dans une cellule, l'etiquette doit rester plus basse que la ligne de
   24 px, sinon elle repousse chaque ligne du tableau. */
td .etiquette, th .etiquette {
  font-size: 10.5px;
  padding: 0 6px;
  line-height: 14px;
  vertical-align: 1px;
}

.etiquette.accent {
  background: var(--accent-doux);
  color: var(--accent);
  border-color: var(--accent-clair);
}

/* --- Tableaux ----------------------------------------------------------- */

.enveloppe-tableau { overflow: auto; max-height: 74vh; }

table {
  border-collapse: collapse;
  width: 100%;
  font-size: 14px;
  font-variant-numeric: tabular-nums;   /* chiffres a chasse fixe */
}

/* Ligne a 24 px boite comprise : le texte gagne 0,5 px sur l'ancienne
   feuille mais la ligne est plus courte, un tableau de 36 lignes tient
   toujours a l'ecran. */
th, td {
  box-sizing: border-box;
  height: 24px;
  padding: 3px 10px;
  line-height: 1.15;
  text-align: right;
  border-bottom: 1px solid var(--bord);
  white-space: nowrap;
}

th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--accent);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .10em;
  text-align: right;
  border-bottom: 2px solid var(--accent-fonce);
  padding: 8px 10px;
  height: auto;
}
th:first-child { border-top-left-radius: var(--rayon); }
th:last-child { border-top-right-radius: var(--rayon); }
@media (prefers-color-scheme: dark) {
  th { background: #1d3a5c; color: #eef4fb; }
}

th.gauche, td.gauche { text-align: left; }
tbody tr:nth-child(even) { background: var(--surface-2); }
tbody tr:hover { background: var(--accent-doux); }

td.parametre { font-weight: 700; }
td.absent { color: var(--texte-doux); }

/* Ligne de titre d'un groupe de parametres : filet fort au-dessus, c'est
   le repere qui permet de parcourir 36 lignes sans se perdre. */
tr.entete-parametre td {
  background: var(--surface-2);
  font-weight: 700;
  border-top: 2px solid var(--bord-fort);
  color: var(--texte);
}

/* Les deux etats d'alerte en fond de cellule. Le symbole precede la
   valeur : la couleur n'est jamais le seul indice. */
td.critique {
  background: var(--critique-fond);
  color: var(--critique);
  font-weight: 700;
  box-shadow: inset 3px 0 0 var(--critique-vif);
}
td.critique::before { content: "\25B2\00A0"; font-size: 10px; }
td.surveillance {
  background: var(--surveillance-fond);
  color: var(--surveillance);
  font-weight: 700;
  box-shadow: inset 3px 0 0 var(--surveillance-vif);
}
td.surveillance::before { content: "\25C6\00A0"; font-size: 10px; }
/* Le survol de ligne ne doit pas effacer une alerte. */
tbody tr:hover td.critique { background: var(--critique-fond); }
tbody tr:hover td.surveillance { background: var(--surveillance-fond); }

td.maximum { font-weight: 700; color: var(--texte); }

.motifs { margin: 12px 0 0; padding: 0; list-style: none; font-size: 14px; }
.motifs li {
  padding: 5px 0 5px 11px;
  border-left: 4px solid var(--bord-fort);
  margin-bottom: 5px;
  color: var(--texte-doux);
}
.motifs li.critique { border-left-color: var(--critique-vif); color: var(--critique); }
.motifs li.surveillance { border-left-color: var(--surveillance-vif); color: var(--surveillance); }
.motifs b { color: var(--texte); }

/* --- Graphiques --------------------------------------------------------- */

.graphique svg { width: 100%; height: auto; display: block; }
.legende {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 12px;
  font-size: 13px;
  color: var(--texte-doux);
}
.puce {
  display: inline-block;
  width: 11px;
  height: 11px;
  border-radius: 3px;
  margin-right: 6px;
  vertical-align: -1px;
}

/* --- Messages ----------------------------------------------------------- */

.messages {
  position: fixed;
  right: 18px;
  bottom: 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  z-index: 50;
}
.message {
  padding: 11px 15px;
  border: 2px solid var(--accent-clair);
  border-radius: var(--rayon);
  background: var(--surface);
  font-size: 14px;
  max-width: 380px;
}
.message.succes { border-left: 8px solid var(--succes-vif); }
.message.erreur { border-left: 8px solid var(--critique-vif); color: var(--critique); }

.vide { color: var(--texte-doux); padding: 28px 14px; text-align: left; }

/* --- Impression : document d'accreditation, A4 paysage ------------------ */

@media print {
  :root {
    --fond: #fff;
    --surface: #fff;
    --surface-2: #f2f2f2;
    --bord: #999;
    --bord-fort: #555;
    --encre-forte: #000;
    --texte: #000;
    --texte-doux: #333;
    --critique: #000;
    --critique-fond: #e6cfcf;
    --surveillance: #000;
    --surveillance-fond: #f0e4cc;
    --succes: #000;
    --rayon: 0px;
    --rayon-petit: 0px;
    --ombre: none;
  }
  .bandeau { border-bottom: 2px solid #000; padding: 0 0 8px; }
  .actions-bandeau, .onglets, .messages, .sans-impression, .zone-depot { display: none !important; }
  main { padding: 0; max-width: none; }
  .vue { display: none !important; }
  .vue.active { display: block !important; }
  .carte { border: none; padding: 0; margin: 0 0 10px; }
  .carte-entete { padding: 0 0 5px; border-bottom: 1px solid #000; }
  .carte > *:not(.carte-entete):not(.enveloppe-tableau):not(table) { padding: 0; }
  .enveloppe-tableau { overflow: visible; max-height: none; }
  table { font-size: 9.5pt; }
  th, td { padding: 3px 5px; height: auto; }
  th { position: static; background: #f2f2f2; color: #000; border-bottom: 1.5pt solid #000; border-radius: 0; }
  .carte-entete { background: none; }
  /* En noir et blanc, l'alerte se lit au symbole et au filet, pas au fond. */
  td.critique, td.surveillance { box-shadow: none; border-left: 2pt solid #000; }
  .etiquette { border: 1pt solid #000; }
  tbody tr:nth-child(even) { background: #f7f7f7; }
  tr { page-break-inside: avoid; }
  thead { display: table-header-group; }
  @page { size: A4 landscape; margin: 11mm; }
}

/* --- Recapitulatif : regroupement par annee -----------------------------
   L'en-tete est sur deux niveaux, une ligne d'annees qui coiffe les
   colonnes d'appareils. Un filet vertical marque le debut de chaque
   groupe pour que l'oeil ne melange pas 2025 DXH2 et 2026 DXH1. */

.recapitulatif-annees .entete-annees th { text-align: center; }
.recapitulatif-annees .entete-annees th.gauche { text-align: left; vertical-align: bottom; }
.recapitulatif-annees .entete-appareils th { text-align: right; font-weight: 600; }

/* Filet de separation entre deux annees, en-tete comme corps. */
.recapitulatif-annees th.groupe-annee,
.recapitulatif-annees td.groupe-annee { border-left: 2px solid var(--bord-fort, #b6bcc4); }

/* Mention discrete des annees reprises de l'ancien classeur Excel. */
.recapitulatif-annees .reprise {
  font-weight: 400;
  font-size: 10px;
  text-transform: none;
  letter-spacing: 0;
  opacity: .75;
}

/* Filet plus marque au changement de parametre : les niveaux 1, 2 et 3
   d'un meme parametre forment un bloc. */
.recapitulatif-annees tbody tr.debut-parametre td { border-top: 2px solid var(--bord-fort, #b6bcc4); }

@media print {
  .recapitulatif-annees th.groupe-annee,
  .recapitulatif-annees td.groupe-annee { border-left: 1.2pt solid #555; }
  .recapitulatif-annees tbody tr.debut-parametre td { border-top: 1.2pt solid #555; }
}

/* --- Onglet Lots : filtre de parametres ---------------------------------
   Cases a cocher plutot qu'un menu a selection multiple, qui obligerait a
   garder Ctrl enfonce. Elles s'etalent sur la largeur et se replient. */

.filtre-parametres {
  margin: 0 0 18px;
  padding: 10px 14px 12px;
  border: 1px solid var(--bord);
  border-radius: var(--rayon-petit, 6px);
  background: var(--surface);
}
.filtre-parametres legend {
  padding: 0 6px;
  color: var(--texte-doux);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .12em;
}
.cases-parametres {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 20px;
}
.cases-parametres .champ.case { font-size: 13.5px; }
.actions-parametres { display: flex; gap: 8px; margin-top: 10px; }
.actions-parametres .bouton { padding: 4px 10px; font-size: 12.5px; }

/* Comparaison des deux automates : une ligne par appareil, un filet au
   changement de parametre pour que les paires restent lisibles. */
.lot-compare tbody tr.debut-parametre td {
  border-top: 2px solid var(--bord-fort, #b6bcc4);
}

@media print {
  .filtre-parametres { display: none !important; }
  .lot-compare tbody tr.debut-parametre td { border-top: 1.2pt solid #555; }
}

/* La colonne de reference URT est la seule valeur a reporter ailleurs :
   elle est mise en avant, contrairement aux CV max qui se consultent. */
.recapitulatif-annees th.reference-urt { background: var(--accent-doux); color: var(--accent); }
.recapitulatif-annees td.reference-urt { font-weight: 700; background: var(--accent-doux); }
@media print {
  .recapitulatif-annees td.reference-urt { background: #eee; }
}

/* --- Onglet Année : les lots en colonnes --------------------------------
   Le tableau reprend `recapitulatif-annees`, dont il est la meme figure
   avec les lots a la place des annees. Ne sont definis ici que les deux
   points ou il en differe : le numero de lot sous le mois, et la colonne
   du parametre qui doit rester lisible pendant le defilement, dix-neuf
   lots faisant trente-huit colonnes de valeurs. */

.tableau-lots th .reprise {
  display: block;
  font-size: 0.78em;
  font-weight: 400;
  font-style: normal;
  opacity: 0.85;
}

.tableau-lots td.parametre,
.tableau-lots thead th.gauche:first-child {
  position: sticky;
  left: 0;
  z-index: 2;
  background: var(--surface);
}
.tableau-lots thead th.gauche:first-child { z-index: 4; }
.tableau-lots tbody tr:nth-child(even) td.parametre { background: var(--surface-2); }

/* --- Onglet Niveaux : les trois niveaux d'une page ----------------------
   Une seule carte, trois blocs empiles. Les deux automates sont sur le
   meme dessin : la legende est donc commune aux trois, en haut, plutot
   que repetee sous chaque graphique. */

.bloc-niveau { margin: 0 0 18px; }
.bloc-niveau:last-child { margin-bottom: 0; }

.titre-niveau {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  margin: 0 0 2px;
  padding: 0 0 4px;
  border-bottom: 1px solid var(--bord);
}

.titre-niveau h3 {
  margin: 0;
  font-size: 0.98rem;
}

.trace-niveau {
  width: 100%;
  height: auto;
  display: block;
}

.meta-graphique {
  display: flex;
  gap: 14px;
  font-size: 0.82rem;
  color: var(--texte-doux);
  font-variant-numeric: tabular-nums;
}

/* Le pointille de la legende dit ce qu'est la ligne discontinue des
   graphiques, sans quoi il faut deviner ce que la reference represente. */
.legende .puce.trait {
  width: 22px;
  height: 0;
  border-radius: 0;
  border-top: 2px dashed var(--texte-doux);
}

@media print {
  .bloc-niveau { page-break-inside: avoid; margin-bottom: 10px; }
  .titre-niveau { border-bottom: 1px solid #000; }
  /* Rien ne defile sur papier : la colonne figee reprend le zebrage. */
  .tableau-lots td.parametre,
  .tableau-lots thead th.gauche:first-child { position: static; background: none; }
}

/* --- Onglet Niveaux : les fleches de parametre --------------------------
   Elles encadrent le selecteur plutot que de le suivre : la cible visuelle
   est alors « avant » et « apres » la valeur, ce qui est le geste. */

.navigation-parametre {
  display: inline-flex;
  align-items: stretch;
  gap: 6px;
}

.navigation-parametre select { min-width: 190px; }

.bouton.fleche {
  padding: 0 11px;
  font-size: 1.15rem;
  line-height: 1;
  min-width: 34px;
}